/* ═══════════════════════════════════════════════════════════════════════════
   Sidura AI — het verhaal

   Een scrollpagina die de werkwijze uitlegt vóórdat iemand de dashboards in
   duikt. Andere opzet dan de rest van de demo: geen zijbalk, geen tabbladen,
   maar volle schermen met één gedachte per scherm.

   De techniek is overal dezelfde. Elke scène is een hoge sectie met daarin een
   vastgeplakt beeld en een kolom tekst die eraan voorbijschuift. Een script zet
   op de sectie een variabele --v van 0 tot 1: hoe ver je door die scène bent.
   Alles wat beweegt, leest die variabele — de radarsweep draait ermee, lijnen
   tekenen zichzelf ermee, tekst verschijnt op een eigen drempel.

   Waarom geen bibliotheek: dezelfde reden als bij de grafieken. Deze pagina
   moet het doen op de wifi van een klant, en een scrollbibliotheek van een CDN
   is precies wat er dan niet laadt.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url('fonts/inter-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: 'Inter'; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 700 800;
  font-display: swap; src: url('fonts/archivo-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;
}

:root {
  --inkt:       #12100c;
  --inkt-2:     #1a1611;
  --inkt-3:     #241f19;
  --wit:        #f6f2e9;
  --tekst:      #d9d1c1;
  --zacht:      #a89e8d;
  --zee:        #7bb0c4;
  --zee-fel:    #9cc6d6;
  --terracotta: #da7a57;
  --terracotta-fel: #e08a68;
  --groen:      #88a878;
  --oker:       #d9a24e;
  --lijn:       rgba(246,242,233,.13);
  --maxw:       1220px;
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--inkt); color: var(--tekst);
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { color: var(--wit); font-weight: 680; letter-spacing: -.03em; line-height: 1.08; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(22px, 5vw, 48px); }

/* ── Voortgangsbalk ──────────────────────────────────────────────────────
   Nu de balk bovenaan weg is, kan de voortgang daar staan: een dunne lijn op
   het donkere vlak, zichtbaar zonder iets in de weg te zitten. */
.v-voortgang {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 70;
  background: linear-gradient(90deg, var(--zee), var(--terracotta));
  width: calc(var(--paginavoortgang, 0) * 100%);
  box-shadow: 0 0 12px rgba(255, 77, 157, .55);
}

/* ── Drijvende achtergrond ────────────────────────────────────────────────
   Twee gloeden die met de scroll door het beeld schuiven en van elkaar weg
   bewegen. Het is één vast element achter alles: goedkoper dan een verloop per
   sectie, en het loopt door over de secties heen, waardoor de pagina één
   doorlopende ruimte blijft in plaats van een stapel blokken.

   De kleuren blijven ver onder de tekstcontrastgrens — dit mag opvallen als je
   erop let, en verder niet. */
.v-achtergrond {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58vw 58vh at
      calc(14% + var(--paginavoortgang, 0) * 66%)
      calc(6%  + var(--paginavoortgang, 0) * 74%),
      rgba(95, 155, 212, .20), transparent 68%),
    radial-gradient(52vw 52vh at
      calc(88% - var(--paginavoortgang, 0) * 74%)
      calc(88% - var(--paginavoortgang, 0) * 66%),
      rgba(255, 77, 157, .17), transparent 66%),
    radial-gradient(70vw 40vh at 50% calc(120% - var(--paginavoortgang, 0) * 40%),
      rgba(95, 206, 155, .09), transparent 70%);
}
/* Alles wat inhoud is, ligt erboven. */
.v-opening, .v-stelling, .v-scene, .v-cijfers, .v-beloften, .v-slot {
  position: relative; z-index: 1;
}

/* ── Merkteken in de opening ──────────────────────────────────────────── */
.v-merkteken {
  display: inline-flex; align-items: center; gap: 13px; margin-bottom: 30px;
  color: #fff; font-family: 'Archivo', var(--font); font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.03em;
}
.v-merkteken svg { width: clamp(38px, 4vw, 48px); height: auto; flex: none; }
/* De kleuren van het zegel. Deze pagina laadt demo.css niet, en zonder deze
   regels krijgt de ring geen lijnkleur en valt het hart terug op zwart — dan
   staat er een zwarte stip op een donkere grond. Dat was hier al zo vóór de
   meander erbij kwam; het viel niet op omdat een stip op inkt eruitziet als
   een stip die er hoort te zijn. */
.v-merkteken .zegel-ring,
.v-merkteken .zegel-sleutel { fill: none; stroke: var(--tekst); stroke-linejoin: miter; }
.v-merkteken .zegel-hart { fill: var(--terracotta-fel); }
.v-merkteken .ai { color: var(--terracotta); margin-left: .3em; }

.v-knop {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 19px; border-radius: 999px; font-size: 14.5px;
  font-weight: 600; border: 1px solid var(--lijn); color: var(--wit);
  transition: background .18s ease, border-color .18s ease;
}
.v-knop:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.v-knop.vol { background: var(--terracotta); border-color: var(--terracotta); color: #08151f; }
.v-knop.vol:hover { background: var(--terracotta-fel); border-color: var(--terracotta-fel); }

/* ── Opening ──────────────────────────────────────────────────────────── */
.v-opening {
  min-height: 100vh; display: grid; place-items: center; text-align: center;
  overflow: hidden; padding: 70px 0 80px;
}
/* Een zachte gloed achter de tekst; puur sfeer, en daarom in een pseudo-element
   zodat een schermlezer er niets van merkt. */
.v-opening::before {
  content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,157,.16), rgba(95,155,212,.08) 45%, transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.v-opening .wrap { position: relative; }
.v-eyebrow {
  display: inline-flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--zee); margin-bottom: 26px;
}
.v-eyebrow::before, .v-eyebrow::after {
  content: ""; width: 34px; height: 1.5px; background: currentColor; opacity: .6;
}
.v-opening h1 { font-size: clamp(40px, 8vw, 92px); max-width: 16ch; margin: 0 auto; }
.v-opening h1 .fel {
  background: linear-gradient(100deg, var(--zee), var(--terracotta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v-opening .onder { font-size: clamp(17px, 2vw, 21px); color: var(--zacht);
                    max-width: 56ch; margin: 28px auto 0; }
.v-scrollhint {
  position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.v-scrollhint svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .v-scrollhint svg { animation: v-wip 2s ease-in-out infinite; }
}
@keyframes v-wip { 0%, 100% { transform: translateY(0); opacity: .6; }
                   50% { transform: translateY(6px); opacity: 1; } }

/* ── Tussenstuk: één gedachte, groot ──────────────────────────────────── */
.v-stelling { padding: clamp(90px, 16vh, 170px) 0; }
.v-stelling h2 { font-size: clamp(30px, 5vw, 58px); max-width: 20ch; }
.v-stelling p { font-size: clamp(16px, 1.7vw, 20px); color: var(--zacht);
                max-width: 58ch; margin-top: 26px; }
.v-stelling .klein { font-size: 15px; margin-top: 18px; }

/* ── Scène: vastgeplakt beeld met tekst die erlangs schuift ───────────── */
/* --v staat standaard op 1, de eindstand. Het script zet hem meteen op de
   werkelijke scrollpositie; blijft dat script weg — geblokkeerd, of een fout —
   dan staat alles zichtbaar in plaats van dat de tekeningen leeg blijven. */
.v-scene { position: relative; --v: 1; }
.v-scene .binnen {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: clamp(24px, 4vw, 60px); max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 48px);
}
.v-plak {
  position: sticky; top: 0; height: 100vh; display: flex; align-items: center;
  justify-content: center; grid-column: 2;
}
.v-doek { width: 100%; max-width: 640px; }
.v-doek svg { width: 100%; height: auto; display: block; overflow: visible; }
.v-stappen { grid-column: 1; grid-row: 1; padding: 26vh 0; }

/* Om en om: bij de omgekeerde scènes staat het beeld links en de tekst rechts.
   De kolombreedtes wisselen mee, zodat de tekstkolom altijd de smalste is. */
.v-scene.omgekeerd .binnen { grid-template-columns: minmax(0, 58%) minmax(0, 42%); }
.v-scene.omgekeerd .v-plak { grid-column: 1; }
.v-scene.omgekeerd .v-stappen { grid-column: 2; grid-row: 1; }
.v-stap { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; }
.v-stap .nr {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; font-weight: 700; margin-bottom: 18px;
  background: rgba(255,255,255,.08); color: var(--zee); border: 1px solid var(--lijn);
}
.v-stap h3 { font-size: clamp(23px, 2.6vw, 33px); margin-bottom: 14px; }
.v-stap p { font-size: 16.5px; color: var(--zacht); max-width: 46ch; text-wrap: pretty; }
.v-stap p + p { margin-top: 14px; }
.v-stap .merk {
  align-self: flex-start; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.v-stap .citaat {
  margin-top: 20px; padding: 15px 18px; border-left: 2px solid var(--terracotta);
  background: rgba(255,255,255,.03); border-radius: 0 10px 10px 0;
  font-size: 15.5px; color: var(--tekst);
}

/* Verschijnen als de stap in beeld komt. Alles wat beweegt zit achter
   prefers-reduced-motion; wie dat uitzet krijgt de tekst gewoon meteen. */
.v-stap > * { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
  .v-stap > * { opacity: 1; transform: none; }
}
.v-stap.zichtbaar > * {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.v-stap.zichtbaar > *:nth-child(2) { transition-delay: .07s; }
.v-stap.zichtbaar > *:nth-child(3) { transition-delay: .14s; }
.v-stap.zichtbaar > *:nth-child(4) { transition-delay: .21s; }

@media (max-width: 900px) {
  /* Geen vastgeplakt beeld op een smal scherm: dan blijft er naast een halve
     viewport aan illustratie geen leesbare kolom over. Beeld boven, tekst
     eronder, en alleen verschijnen — geen scrollgestuurde animatie. */
  .v-scene .binnen,
  .v-scene.omgekeerd .binnen { grid-template-columns: 1fr; }
  .v-plak, .v-scene.omgekeerd .v-plak {
    position: static; height: auto; grid-column: 1; grid-row: 1; padding: 30px 0 10px; }
  .v-stappen, .v-scene.omgekeerd .v-stappen {
    grid-column: 1; grid-row: 2; padding: 0 0 40px; }
  .v-stap { min-height: 0; padding: 34px 0; }
}

/* ── Agentkop ─────────────────────────────────────────────────────────────
   Elke scène opent met wie er aan het woord is. Zonder zo'n kop lees je vijf
   keer een verhaal in dezelfde vorm en merk je de overgang niet; het nummer,
   de kleur en de lijn erboven maken van elke scène een eigen hoofdstuk.

   De kleur komt uit --agentkleur, die per scène wordt gezet en doorwerkt in het
   nummer, de merkjes, de citaatrand en de gloed achter de scène. #}
*/
.v-agentkop { margin-bottom: 8vh; }
.v-agentkop .streep {
  display: block; width: 100%; height: 2px; margin-bottom: 26px;
  background: linear-gradient(90deg, var(--agentkleur, var(--zee)), transparent 72%);
}
.v-agentkop .rij { display: flex; align-items: baseline; gap: 18px; }
.v-agentnr {
  font-family: 'Archivo', var(--font); font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 800; line-height: .9; letter-spacing: -.05em;
  color: var(--agentkleur, var(--zee)); flex: none;
  /* Een omlijnd cijfer: opvallend groot zonder de kop ernaast te overstemmen. */
  -webkit-text-stroke: 1.5px var(--agentkleur, var(--zee));
  color: transparent;
}
.v-agentkop .rol {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--agentkleur, var(--zee));
  margin-bottom: 9px;
}
.v-agentkop h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.04; }
.v-agentkop .wat { font-size: 15.5px; color: var(--zacht); margin-top: 12px; max-width: 42ch; }

/* Een gloed in de kleur van de agent, aan de kant waar het beeld staat. Zo
   verschuift niet alleen de tekst maar ook de sfeer als je een scène verder
   komt. */
.v-scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(62% 52% at var(--tintx, 76%) 46%,
    color-mix(in srgb, var(--agentkleur, #7bb0c4) 16%, transparent), transparent 68%);
}
.v-scene.omgekeerd::before { --tintx: 24%; }

/* De merkjes en citaten binnen een scène volgen dezelfde kleur. */
.v-stap .merk {
  background: color-mix(in srgb, var(--agentkleur, #7bb0c4) 16%, transparent);
  color: var(--agentkleur, var(--zee));
}
.v-stap .citaat { border-left-color: var(--agentkleur, var(--terracotta)); }
.v-stap .nr { color: var(--agentkleur, var(--zee)); }

@media (max-width: 900px) {
  .v-agentkop { margin-bottom: 26px; }
}

/* ── Onderdelen in de tekeningen ──────────────────────────────────────── */
.v-doek text { font-family: var(--font); }
.v-label { font-size: 12.5px; fill: var(--zacht); }
.v-label-fel { font-size: 13px; fill: var(--terracotta); font-weight: 650; }
.v-titel { font-size: 15px; fill: #fff; font-weight: 650; }

/* Verschijnen op een eigen drempel. `--d` is de drempel, `--s` de snelheid
   waarmee het element opkomt; allebei per element in te stellen. */
.op-drempel {
  opacity: clamp(0, calc((var(--v, 0) - var(--d, 0)) * var(--s, 10)), 1);
}
.groei-drempel {
  opacity: clamp(0, calc((var(--v, 0) - var(--d, 0)) * var(--s, 10)), 1);
  transform: scale(clamp(.6, calc(.6 + (var(--v, 0) - var(--d, 0)) * var(--s, 10) * .4), 1));
  transform-box: fill-box; transform-origin: center;
}

/* ── Resultaten ───────────────────────────────────────────────────────── */
.v-cijfers { padding: clamp(80px, 14vh, 150px) 0; }
.v-cijfers .rooster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 40px); margin-top: 54px;
}
/* Drie regels, van groot naar klein: het getal, waar het over gaat, en wat u
   eraan heeft. De streep erboven bindt ze samen als één kaart zonder dat er een
   kader omheen hoeft. */
.v-kaart { border-top: 2px solid var(--lijn); padding-top: 22px; }
.v-kaart .waarde {
  font-size: clamp(40px, 5.6vw, 62px); font-weight: 700; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--zee), var(--terracotta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v-kaart .titel { font-size: 17px; font-weight: 650; color: var(--wit); margin-top: 12px; }
.v-kaart p { font-size: 14.5px; color: var(--zacht); margin-top: 8px; text-wrap: pretty; }

/* ── Beloften ─────────────────────────────────────────────────────────── */
.v-beloften { padding: clamp(70px, 12vh, 130px) 0; background: var(--inkt-2); }
.v-beloften .rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                       gap: 22px; margin-top: 44px; }
.v-belofte { background: rgba(255,255,255,.03); border: 1px solid var(--lijn);
             border-radius: 16px; padding: 28px 26px; }
.v-belofte svg { width: 34px; height: 34px; margin-bottom: 18px; color: var(--terracotta); }
.v-belofte h3 { font-size: 19px; margin-bottom: 10px; }
.v-belofte p { font-size: 15px; color: var(--zacht); text-wrap: pretty; }

/* ── Afsluiting ───────────────────────────────────────────────────────── */
.v-slot { padding: clamp(90px, 16vh, 170px) 0; text-align: center; overflow: hidden; }
.v-slot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(255,77,157,.18), transparent 60%);
}
.v-slot .wrap { position: relative; }
.v-slot h2 { font-size: clamp(30px, 5.5vw, 60px); max-width: 18ch; margin: 0 auto; }
.v-slot p { font-size: 18px; color: var(--zacht); max-width: 52ch; margin: 24px auto 0; }
.v-slot .knoppen { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
                   margin-top: 40px; }
.v-slot .v-knop { padding: 14px 26px; font-size: 16px; }
.v-knop svg { width: 18px; height: 18px; flex: none; }

/* Verschijnen bij het in beeld komen, voor blokken buiten de scènes. */
.onthul { opacity: 0; transform: translateY(26px); }
.onthul.zichtbaar { opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .onthul { opacity: 1; transform: none; } }

/* ── Bewegende onderdelen in de tekeningen ────────────────────────────────
   Alles hier leest --v, de voortgang door de scène die het script zet. */

/* De radarsweep maakt twee volle slagen over de scène heen. */
.r-sweep {
  transform-box: view-box; transform-origin: 50% 50%;
  transform: rotate(calc(var(--v, 0) * 720deg));
}
@media (prefers-reduced-motion: no-preference) {
  .r-vondst-ring { transform-box: fill-box; transform-origin: center;
                   animation: v-puls 2.4s ease-out infinite; }
}
@keyframes v-puls {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* De weegschaal begint scheef en komt tot rust op de helft van de scène: de
   afweging is dan gemaakt en het besluit rolt eronder tevoorschijn. */
.w-balk {
  transform-box: view-box; transform-origin: 50% 31.7%;
  transform: rotate(calc(-7deg + clamp(0deg, calc(var(--v, 0) * 14deg), 7deg)));
}

/* Lijnen die zichzelf tekenen krijgen hun dasharray van het script; hier staat
   alleen de overgang, zodat een sprong in de scrollpositie niet schokt. */
.lijn-teken { transition: stroke-dashoffset .08s linear, opacity .2s linear; }

@media (prefers-reduced-motion: reduce) {
  .r-sweep, .w-balk { transform: none; }
  .op-drempel, .groei-drempel { opacity: 1; transform: none; }
  .lijn-teken { transition: none; }
}

/* ── Uitspraak van de agent ───────────────────────────────────────────────
   De conclusies in dit verhaal zijn voorbeelden, geen cijfers uit een echte
   campagne. Ze in een wolkje zetten met de agent ernaast maakt dat zichtbaar:
   dit is wat zo'n agent zou zeggen, niet wat er gebeurd is. De bronregel
   eronder zegt het er ook nog bij. */
.v-quote { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; }
.v-quote .robot {
  flex: none; width: 42px; height: 42px; border-radius: 50%; margin-top: 4px;
  color: var(--agentkleur, var(--zee));
  background: color-mix(in srgb, var(--agentkleur, #7bb0c4) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--agentkleur, #7bb0c4) 45%, transparent);
  display: grid; place-items: center;
}
.v-quote .robot svg { width: 26px; height: 26px; }
.v-quote blockquote {
  position: relative; flex: 1 1 auto;
  background: rgba(255,255,255,.045); border: 1px solid var(--lijn);
  border-radius: 4px 14px 14px 14px; padding: 16px 19px;
}
/* Het puntje naar de robot toe: twee driehoeken over elkaar, zodat de rand
   meeloopt en er geen naad in het wolkje valt. */
.v-quote blockquote::before,
.v-quote blockquote::after {
  content: ""; position: absolute; left: -9px; top: 12px;
  border: 5px solid transparent; border-right-width: 9px; border-left-width: 0;
}
.v-quote blockquote::before { border-right-color: var(--lijn); }
.v-quote blockquote::after { left: -8px; border-right-color: #101b28; }
.v-quote p { font-size: 16px; color: var(--wit); text-wrap: pretty; margin: 0; }
/* Aanhalingstekens in het stijlblad en niet in de tekst zelf: dan blijven ze
   staan als iemand de zin herschrijft, en staat er nooit per ongeluk een enkel
   teken. De bronregel eronder valt er bewust buiten — dat is geen citaat. */
.v-quote blockquote p { quotes: "\201C" "\201D"; }
.v-quote blockquote p::before { content: open-quote; }
.v-quote blockquote p::after  { content: close-quote; }
.v-quote cite {
  display: block; margin-top: 11px; font-style: normal; font-size: 12px;
  color: var(--zacht); letter-spacing: .02em;
}
.v-quote cite b { color: var(--agentkleur, var(--zee)); font-weight: 650; }

/* ── De collega's in het verhaal ──────────────────────────────────────────
   Het portret naast het volgnummer. Het nummer blijft staan: in een verhaal
   zegt "01 van 04" waar je bent, en dat doet een gezicht niet. */
.v-gezicht {
  width: 76px; height: 76px; border-radius: 50%; flex: none; display: block;
  border: 3px solid var(--agentkleur, var(--zee));
  background: var(--vlak, #fff);
}
.v-roep {
  margin: .2rem 0 0; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--agentkleur, var(--zee));
}
@media (max-width: 640px) {
  .v-gezicht { width: 56px; height: 56px; }
}