/* ── paginapatronen ───────────────────────────────────────────────────
   Voor alle pagina's onder /new-site/ behalve de homepage. Laadt ná
   site.css en leunt op dezelfde tokens en dezelfde drie tiers:
   ≤700 · 700–1024 · >1024. Prefix v2p-, zodat niets hier ooit met de
   homepage kan botsen. Geen eigen kleuren, maten of curves. */

/* ── paginakop ── */
.v2p-hero { background: var(--t-canvas);
  padding-block: calc(76px + var(--t-s8)) var(--v2-section); }
.v2p-hero__eyebrow { margin: 0 0 var(--t-s4); font-weight: 600;
  font-size: var(--t-body); color: var(--t-ink2); }
.v2p-hero .v2-display { max-width: 16em; }
.v2p-hero .v2-sub { margin-top: var(--t-s5); }
.v2p-hero__acts { display: flex; flex-wrap: wrap; gap: var(--t-s3);
  align-items: center; margin-top: var(--t-s6); }
.v2p-hero__foot { margin-top: var(--t-s4); font-size: var(--t-caption);
  color: var(--t-ink2); }
@media (max-width: 700px) {
  .v2p-hero__acts { flex-direction: column; align-items: stretch; }
  .v2p-hero__acts .v2-btn { width: 100%; }
}

/* ── de schermvullende fotokop ────────────────────────────────────────
   Het beeld vult het venster en de tekst ligt eróp, niet ernaast. Dat is
   het verschil met .v2p-hero--photo, waar de kop de lege witte wand naast
   het onderwerp voor zichzelf houdt.

   Geen sluier meer: het raam ís het lichtste vlak van de foto, dus inkt
   daarop haalt ruim de norm. Dat is meteen waarom de kop hoog staat en niet
   in het midden — op een derde ligt hij op het raam, in het midden zou hij
   op de donkere silhouetten van stoel en monitor landen.

   Het beeld staat als variabele op het element (zie de html): de paginapoort
   leest een .jpg in een stylesheet als klassenaam. */
.v2p-hero--cover { position: relative; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* Een derde van boven, maar nooit ónder de vaste kopbalk van 76px. */
  padding-block: max(calc(76px + var(--t-s7)), 30dvh) calc(var(--t-s8) * 2);
  background-color: var(--t-surface);
  background-image: var(--v2-shot, none);
  background-size: cover; background-position: center;
  background-repeat: no-repeat; }
/* Deze kop centreert zelf en leent .v2p-hero__mid niet meer. Die klasse hoort
   bij de etalage-kop van /one/, en die staat inmiddels op cobalt: hij zet zijn
   tekst dus op wit. Dezelfde maten, eigen kleuren — zo kan /one/ van grond
   veranderen zonder deze foto mee te trekken.

   --t-on-butter, niet --t-ink: dat token kantelt in donkere modus mee naar
   bijna wit en een foto doet dat niet. Zie §2.7 — daarvoor zijn de
   --t-on-*-tokens er. Om dezelfde reden geen --t-ink2 voor de subtekst: op
   0,72 van dezelfde inkt komt die op hetzelfde grijs uit én blijft donker. */
.v2p-hero--cover .v2-wrap { text-align: center; }
.v2p-hero--cover .v2-display { max-width: 17em; margin-inline: auto;
  font-size: clamp(34px, 2.5vw + 14px, 54px); color: var(--t-on-butter); }
.v2p-hero--cover .v2-sub { max-width: 56ch; margin-inline: auto;
  color: var(--t-on-butter); opacity: 0.72; }
/* De wenk blijft wit terwijl de tekst inkt is, en dat is geen slordigheid maar
   de foto: de kop ligt op een derde, op het uitgeblazen raam (inkt haalt daar
   9,3:1), de wenk ligt onderaan in het midden, op de donkere rug van de
   persoon. Gemeten over alle vensterverhoudingen komt inkt daar op 1,0:1 —
   onzichtbaar — en wit op 8,8:1 tot 18:1. Eén beeld, twee gronden. */
.v2p-hero--cover .v2-hero__arr { border-color: #fff; }
.v2p-hero--cover .v2-hero__arr::after { background: #fff; }

/* ── de uitgelichte agent ─────────────────────────────────────────────
   Eén agent groot naast zijn introductie, met de rest van het team klein
   eronder in dezelfde witte band. Het formaatverschil ís het argument:
   Oscar is de enige met wie je praat, dus de enige die je op ware grootte
   ziet. Daarom staat hij niet nóg een keer in de galerij eronder. */
/* Portret links, tekst rechts: het gezicht opent de band en de introductie
   leest ernaast. Vandaar 5/7 en niet 7/5. */
.v2p-lead-agent { display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--t-s8); align-items: center; }
.v2p-lead-agent .v2-h2 { margin-bottom: var(--t-s5); }
.v2p-lead-agent .v2p-lead { margin-bottom: 0; }
/* Geen kaart eronder: het portret staat vrij in de witte band, zoals een
   portret in een artikel. Het formaat doet het werk, geen vlak eromheen. */
.v2p-lead-agent__fig { margin: 0; justify-self: center; text-align: center; }
/* De bron is 400px en dat is het plafond. Op 280 staat hij op 1,4x — voor een
   portret met deze zachte scherpte de rand van wat kan; groter wordt zichtbaar
   zacht op een scherm dat alles maal twee tekent. */
.v2p-lead-agent__fig img { display: block; margin-inline: auto;
  width: clamp(200px, 22vw, 280px); height: auto; aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; }
.v2p-lead-agent + .v2p-kicker { margin-top: var(--t-s8); }

/* ── het agentenrek ───────────────────────────────────────────────────
   Geen kaarten meer: negen namen onder elkaar, gescheiden door één grijze
   streep, met de omschrijving eronder weggevouwen. Zelfde figuur als de FAQ
   op de homepage (.v2-faq), maar met een portret in de regel.

   <details name="..."> doet het openklappen zónder javascript én zorgt dat er
   maar één tegelijk openstaat — precies het harmonicagedrag. Een browser die
   dat attribuut nog niet kent laat er meerdere openstaan; dat is de nette
   terugval, niet een fout die gerepareerd moet worden. */
/* De portretmaat staat als variabele: de inspringing van de omschrijving
   rekent ermee, en dan staat hij op één plek in plaats van twee. */
.v2p-roster { --v2-ava: 84px; display: flex; flex-direction: column; }
.v2p-roster details { border-top: 1px solid var(--t-border); }
.v2p-roster details:last-child { border-bottom: 1px solid var(--t-border); }
.v2p-roster summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--t-s5); padding: var(--t-s5) 0; }
.v2p-roster summary::-webkit-details-marker { display: none; }
.v2p-roster img { display: block; width: var(--v2-ava); height: var(--v2-ava);
  border-radius: 50%; object-fit: cover; }
.v2p-roster__name { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-sm); line-height: 1.2;
  color: var(--t-cobalt-deep); }
.v2p-roster__role { display: block; margin-top: var(--t-s1);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t-ink2); }
/* Hetzelfde plusje als de FAQ, dat op open een kruisje wordt. */
.v2p-roster summary::after { content: "+"; font-family: var(--t-display);
  font-size: 24px; line-height: 1; color: var(--t-ink2);
  transition: transform 0.4s var(--v2-ease), color 0.2s var(--v2-ease); }
.v2p-roster details[open] summary::after { transform: rotate(45deg); }
.v2p-roster summary:hover::after { color: var(--t-cobalt-deep); }
/* De omschrijving begint waar de naam begint, niet waar het portret begint:
   zo houdt de kolom onder de namen één lijn. Onder 700px valt die inspringing
   weg, anders blijft er nauwelijks regel over. */
/* Het opengeklapte paneel: twee gelijke kolommen. Links het citaat op een grijs
   vlak, rechts wat de agent doet. Het citaat draagt de houding, de lijst draagt
   het werk — samen zeggen ze meer dan één alinea proza dat allebei probeert. */
.v2p-roster__body { display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--t-s6); align-items: stretch; margin: 0 0 var(--t-s6);
  padding-left: calc(var(--v2-ava) + var(--t-s5)); padding-right: var(--t-s7); }
/* Signifier, want een citaat is spraak en geen interface. Kleiner dan de naam
   erboven, anders vechten twee schreefletters om dezelfde regel. */
/* stretch + flex: het botervlak loopt mee met de hoogte van de lijst ernaast en
   het citaat hangt in het midden. Anders staat er een klein blokje naast een
   lange kolom en leest het als een restje.
   Op twee vijfde is er weer ruimte voor s6 binnenwerk; op een derde moest dat
   s5 zijn, anders bleef er voor 24px Signifier te weinig regel over.
   Kleur blijft --t-ink en niet --t-on-butter: boter-50 kantelt in donkere modus
   zélf mee naar donker, dus moet de inkt mee kantelen. Zie .v2p-agent, dat
   dezelfde grond gebruikt. */
.v2p-roster__quote { margin: 0; background: var(--t-butter-50);
  display: flex; align-items: center;
  border-radius: var(--t-r-panel); padding: var(--t-s6);
  font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-sm); line-height: 1.35; color: var(--t-ink); }
.v2p-roster__skills { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--t-s4); }
.v2p-roster__skills li { position: relative; padding-left: var(--t-s5);
  font-size: var(--t-body-lg); line-height: 1.5; color: var(--t-ink2); }
/* Een cobalt stip in plaats van een bolletje van de browser: die staat op de
   verkeerde hoogte zodra de regel omslaat. 0,6em legt hem op de x-hoogte. */
.v2p-roster__skills li::before { content: ""; position: absolute; left: 0;
  top: 0.6em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--t-cobalt-deep); }
.v2p-roster__skills a { color: inherit;
  text-decoration-color: var(--t-cobalt-deep); text-underline-offset: 0.16em; }
@media (max-width: 1024px) {
  .v2p-roster__body { grid-template-columns: minmax(0, 1fr); gap: var(--t-s5); }
}
@media (max-width: 700px) {
  .v2p-roster__body { padding-left: 0; padding-right: 0; }
  .v2p-roster summary { gap: var(--t-s4); }
}
@media (max-width: 1024px) {
  .v2p-lead-agent { grid-template-columns: minmax(0, 1fr); gap: var(--t-s7); }
}

/* ── rustige paginakop ────────────────────────────────────────────────
   De kennishub draagt onder de kop nog een lange sub én een voetregel;
   op 68px at de kop die twee op. Driekwart van de gewone displaycurve:
   40→30, 68→51, en de helling mee. Alleen boven 1024px, want onder die
   grens loopt .v2-display al op een eigen, lagere curve (site.css) —
   driekwart daarvan wordt te klein om de regel nog te dragen. */
@media (min-width: 1025px) {
  .v2p-hero--calm .v2-display { font-size: clamp(30px, 2.55vw + 12px, 51px); }
}

/* ── secties ── */
.v2p-sec { padding-block: var(--v2-section); }
.v2p-sec--tight { padding-block: var(--t-s8); }
.v2p-band { margin-block: 0; padding-block: var(--v2-section); }
.v2p-band--white { background: var(--t-surface); }
.v2p-band--butter { background: var(--t-butter-50); }
.v2p-band--cobalt { background: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep); }
.v2p-band--cobalt .v2-h2, .v2p-band--cobalt .v2-eyebrow { color: var(--t-on-cobalt-deep); }
.v2p-kicker { margin: 0 0 var(--t-s6); font-weight: 600;
  font-size: var(--t-body); color: var(--t-ink2); }
.v2p-band--cobalt .v2p-kicker { color: var(--t-on-cobalt-deep); opacity: 0.75; }
.v2p-sec .v2-h2, .v2p-band .v2-h2 { max-width: 22ch; margin-bottom: var(--t-s6); }
.v2p-lead { max-width: 34em; font-size: var(--t-body-lg); line-height: 1.6;
  color: var(--t-ink2); margin: 0 0 var(--t-s6); }
.v2p-band--cobalt .v2p-lead { color: var(--t-on-cobalt-deep); opacity: 0.85; }

/* refusal-lijst — de agent-diepteblokken op /one/agents/. Zelfde stem als
   v2p-prose se ul, maar smaller (max 34em, matcht v2p-lead) omdat deze
   blokken geen volle artikelbreedte gebruiken. */
.v2p-refuse { max-width: 34em; margin: 0; padding-left: 1.2em; list-style: disc; }
.v2p-refuse li { margin-bottom: var(--t-s3); font-size: var(--t-body);
  line-height: 1.6; color: var(--t-ink2); }
.v2p-refuse li:last-child { margin-bottom: 0; }
.v2p-refuse strong { color: var(--t-ink); }

/* ── definitieblok: woordvast, veilig om te citeren ── */
.v2p-def { position: relative; background: var(--t-butter-50);
  border: 1px solid var(--t-butter-100); border-left: 3px solid var(--t-cobalt-deep);
  border-radius: var(--t-r-card); padding: var(--t-s6); }
.v2p-def .v2p-def__label { margin: 0 0 var(--t-s3); font-family: var(--t-sans);
  font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-ink2); }
.v2p-def p { margin: 0; font-family: var(--t-display);
  font-size: clamp(19px, 1vw + 12px, 24px); line-height: 1.45; }

/* ── kaartraster: 3 breed, 2 op de tussenmaat, 1 op de telefoon ── */
.v2p-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--t-s5); }
.v2p-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Boterkaart (31/8, ownerkeuze). De rand gaat mee naar butter-100: dat is de
   combinatie die .v2p-agent al draagt, en een grijze --t-border om een boter
   vlak leest als een kaart die half is omgekleurd. Contrast gemeten: kop
   16,8:1, lopende tekst 6,0:1. */
.v2p-card { background: var(--t-butter-50); border: 1px solid var(--t-butter-100);
  border-radius: var(--t-r-card); padding: var(--t-s6);
  display: flex; flex-direction: column; }
.v2p-card--accent { border-color: var(--t-cobalt-deep); }
.v2p-card .v2p-card__label { margin: 0 0 var(--t-s3); font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-ink2); }
.v2p-card h3 { margin: 0 0 var(--t-s3); font-family: var(--t-display);
  font-weight: 400; font-size: var(--t-display-xs); line-height: 1.25; }
.v2p-card p { margin: 0; font-size: var(--t-body); line-height: 1.6;
  color: var(--t-ink2); }
.v2p-card p + p { margin-top: var(--t-s3); }
.v2p-card .v2p-card__more { margin-top: auto; margin-bottom: 0; padding-top: var(--t-s4); }
a.v2p-card { text-decoration: none; color: inherit;
  transition: transform 0.28s var(--v2-ease), border-color 0.28s var(--v2-ease); }
a.v2p-card:hover, a.v2p-card:focus-visible { transform: translateY(-3px);
  border-color: var(--t-border-strong); }
@media (max-width: 1024px) { .v2p-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .v2p-cards, .v2p-cards--2 { grid-template-columns: minmax(0, 1fr); } }

/* ── label/uitleg-rijen met haarlijnen ── */
.v2p-kv { margin: 0; }
.v2p-kv > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--t-s5); padding-block: var(--t-s5);
  border-top: 1px solid var(--t-border); }
.v2p-kv > div:last-child { border-bottom: 1px solid var(--t-border); }
.v2p-band--cobalt .v2p-kv > div { border-color: color-mix(in srgb, var(--t-on-cobalt-deep) 28%, transparent); }
.v2p-kv dt { margin: 0; font-weight: 600; font-size: var(--t-body-lg); }
.v2p-kv dd { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--t-ink2); }
.v2p-band--cobalt .v2p-kv dd { color: var(--t-on-cobalt-deep); opacity: 0.82; }
@media (max-width: 700px) {
  .v2p-kv > div { grid-template-columns: minmax(0, 1fr); gap: var(--t-s2); }
}

/* ── het bonnetje: tijd · status · regel ── */
.v2p-log { border: 1px solid var(--t-butter-100); border-radius: var(--t-r-card);
  overflow: hidden; background: var(--t-butter-50); }
.v2p-log > div { display: grid; grid-template-columns: 72px 110px minmax(0, 1fr);
  gap: var(--t-s4); align-items: baseline; padding: var(--t-s4) var(--t-s5);
  border-top: 1px solid var(--t-butter-100); }
.v2p-log > div:first-child { border-top: 0; }
.v2p-log time { font-size: var(--t-caption); color: var(--t-ink2);
  font-variant-numeric: tabular-nums; }
.v2p-log b { font-size: var(--t-caption); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; }
.v2p-log__refused b { color: var(--t-butter-ink); }
.v2p-log__ok b { color: var(--t-cobalt-700); }
.v2p-log p { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.v2p-log small { display: block; margin-top: var(--t-s1);
  font-size: var(--t-caption); color: var(--t-ink2); letter-spacing: 0.04em; }
.v2p-log__final { background: var(--t-ink); }
.v2p-log__final p, .v2p-log__final time, .v2p-log__final b { color: var(--t-canvas); }
@media (max-width: 700px) {
  .v2p-log > div { grid-template-columns: 60px minmax(0, 1fr); }
  .v2p-log time { display: none; }
}

/* ── artikelen ── */
.v2p-art { max-width: 720px; }
.v2p-art__meta { display: flex; flex-wrap: wrap; gap: var(--t-s3);
  align-items: center; margin-bottom: var(--t-s5); }
.v2p-art__date { font-size: var(--t-caption); color: var(--t-ink2); }
.v2p-prose { max-width: 65ch; }
.v2p-prose p { margin: 0 0 var(--t-s5); font-size: var(--t-body-lg);
  line-height: 1.7; color: var(--t-ink); }
.v2p-prose p.v2p-standfirst { font-size: var(--t-display-xs); line-height: 1.5;
  color: var(--t-ink2); }
.v2p-prose h2 { margin: var(--t-s8) 0 var(--t-s4); font-family: var(--t-display);
  font-weight: 400; font-size: var(--t-display-sm); line-height: 1.2;
  letter-spacing: -0.01em; }
.v2p-prose h3 { margin: var(--t-s6) 0 var(--t-s3); font-weight: 600;
  font-size: var(--t-body-lg); }
.v2p-prose ul, .v2p-prose ol { margin: 0 0 var(--t-s5); padding-left: 1.2em; }
.v2p-prose li { margin-bottom: var(--t-s2); font-size: var(--t-body-lg);
  line-height: 1.6; color: var(--t-ink); }
.v2p-prose blockquote { margin: var(--t-s6) 0; padding: var(--t-s2) 0 var(--t-s2) var(--t-s5);
  border-left: 3px solid var(--t-butter-100); font-family: var(--t-display);
  font-size: clamp(19px, 1vw + 12px, 24px); line-height: 1.45; }
.v2p-prose blockquote p { margin: 0; font-family: inherit; font-size: inherit; }
.v2p-prose a { color: inherit; text-decoration-color: var(--t-cobalt-deep);
  text-underline-offset: 0.16em; }
.v2p-prose hr { border: 0; border-top: 1px solid var(--t-border);
  margin: var(--t-s7) 0; }
.v2p-src { font-size: var(--t-caption); color: var(--t-ink2); }

/* ── de open plek: een bewust gat, in de taal van het ontwerp ── */
.v2p-slot { display: inline-block; padding: 0 var(--t-s2);
  font-size: var(--t-body); font-weight: 600; letter-spacing: 0.04em;
  background: var(--t-butter-50); border: 1px dashed var(--t-border-strong);
  border-radius: var(--t-r-btn); color: var(--t-butter-ink);
  font-variant-numeric: tabular-nums; }

/* ── tabellen (vergelijker, dossier) ── */
.v2p-tablewrap { overflow-x: auto; }
.v2p-table { width: 100%; border-collapse: collapse; background: var(--t-butter-50);
  border: 1px solid var(--t-butter-100); border-radius: var(--t-r-card); }
.v2p-table th { text-align: left; padding: var(--t-s4) var(--t-s5);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t-ink2);
  border-bottom: 1px solid var(--t-butter-100); }
.v2p-table td { padding: var(--t-s4) var(--t-s5); font-size: var(--t-body);
  line-height: 1.55; vertical-align: top; border-bottom: 1px solid var(--t-butter-100); }
.v2p-table tr:last-child td { border-bottom: 0; }
.v2p-table td:first-child { font-weight: 600; white-space: nowrap; }

/* ── inbedding van derden (HubSpot-agenda en -formulier) ──
   De embeds brengen hun eigen opmaak mee; wij geven ze alleen een kader en
   een minimumhoogte, zodat de pagina niet springt terwijl ze laden. Geen
   eigen kleuren of maten binnenin: wat HubSpot rendert blijft van HubSpot. */
.v2p-embed { background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-r-panel); padding: var(--t-s5); }
.v2p-embed--cal { min-height: 640px; }
.v2p-embed .meetings-iframe-container { width: 100%; }
/* Het formulier-iframe van HubSpot staat zelf op height:100%. Zonder een
   expliciete hoogte op de ouder rekent de browser dat uit naar nul en is
   het formulier onzichtbaar — vandaar de minimumhoogte hier. */
.v2p-embed .hs-form-frame { display: block; min-height: 560px; }
.v2p-embed .hs-form-frame iframe { display: block; }
@media (max-width: 700px) {
  .v2p-embed { padding: var(--t-s4); }
  .v2p-embed--cal { min-height: 720px; }
}

/* ── slotband: hergebruik van de homepage-CTA in paginajas ── */
.v2p-close { background: var(--t-cta); color: var(--t-on-cta);
  margin-block: 0; padding-block: calc(var(--t-s8) + var(--t-s6)); }
.v2p-close__in { display: flex; align-items: center; justify-content: space-between;
  gap: var(--t-s6); flex-wrap: wrap; }
.v2p-close h2 { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-md); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 18ch; text-wrap: balance; }
.v2p-close p { margin: var(--t-s3) 0 0; opacity: 0.82; font-size: var(--t-body);
  max-width: 44ch; }
.v2p-close .t-btn { min-height: 56px; padding-inline: var(--t-s6);
  font-size: var(--t-body-lg); border-radius: var(--t-r-pill);
  text-decoration: none; }
@media (max-width: 700px) {
  .v2p-close .t-btn { width: 100%; }
}

/* ── productschermen met bijschrift ── */
.v2p-shots { display: flex; flex-direction: column; gap: var(--v2-section); }
.v2p-shot { margin: 0; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--t-s7); align-items: center; }
.v2p-shot:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.v2p-shot:nth-child(even) .v2p-shot__win { order: 2; }
.v2p-shot__win { background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-r-panel); padding: var(--t-s1); overflow: hidden;
  box-shadow: var(--t-e2); }
.v2p-shot__win img { display: block; width: 100%; height: auto;
  border-radius: calc(var(--t-r-panel) - var(--t-s1)); }
.v2p-shot h2 { margin: 0 0 var(--t-s3); font-family: var(--t-display);
  font-weight: 400; font-size: var(--t-display-sm); line-height: 1.2;
  letter-spacing: -0.01em; }
.v2p-shot figcaption p { margin: 0; font-size: var(--t-body-lg); line-height: 1.6;
  color: var(--t-ink2); }
.v2p-shot figcaption a { color: inherit;
  text-decoration-color: var(--t-cobalt-deep); text-underline-offset: 0.16em; }
@media (max-width: 1024px) {
  .v2p-shot, .v2p-shot:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .v2p-shot:nth-child(even) .v2p-shot__win { order: 0; }
  .v2p-shot figcaption { max-width: 60ch; }
}

/* ── agentgalerij ── */
.v2p-agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--t-s5); }
.v2p-agent { background: var(--t-butter-50); border: 1px solid var(--t-butter-100);
  border-radius: var(--t-r-card); padding: var(--t-s6); text-align: center; }
.v2p-agent img { width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; object-position: center 20%; }
.v2p-agent h3 { margin: var(--t-s4) 0 0; font-family: var(--t-display);
  font-weight: 400; font-size: var(--t-display-xs); }
.v2p-agent .v2p-agent__role { display: block; margin-top: var(--t-s1);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t-ink2); }
.v2p-agent p { margin: var(--t-s3) 0 0; font-size: var(--t-body);
  line-height: 1.6; color: var(--t-ink2); }
@media (max-width: 1024px) { .v2p-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .v2p-agents { grid-template-columns: minmax(0, 1fr); } }
/* --wide: alleen voor de galerij van tien op /one/. In het gedeelde raster van
   drie laat tien een rij van één over, en één kolom op de telefoon maakt er een
   lijst van tien schermen van. Vandaar 5 · 3 · 2. Op /one/agents/ staat Oscar
   uitgelicht boven de galerij, dus blijven er negen over — precies drie volle
   rijen in het raster hierboven, en dat raster houdt hij dus. */
.v2p-agents--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--t-s4); }
/* De portretten van deze tien zijn vierkant aangeleverd, dus geen uitsnede
   omhoog zoals bij de oudere galerij. En de rol krijgt de hoogte van twee
   regels: "Social media manager" viel om, waardoor die ene alinea lager
   begon dan de rest van de rij. */
.v2p-agents--wide .v2p-agent { align-content: start; }
.v2p-agents--wide .v2p-agent img { object-position: center; }
.v2p-agents--wide .v2p-agent__role { min-height: 3em; }
@media (max-width: 1200px) { .v2p-agents--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .v2p-agents--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--t-s3); } }

/* ── de opname: een gereserveerd beeldvlak met zijn eigen bijschrift ──
   De Paper-artboards zetten op elke productpagina een gekleurd blok met een
   bracket-bijschrift ("[ product capture — the queue, mid-review ]"). Dat is
   geen tijdelijke lelijkheid maar de manier waarop het ontwerp een nog niet
   bestaand beeld vasthoudt: het vlak draagt de compositie, het bijschrift
   zegt wat erin komt. Zodra het beeld er is, neemt een echte afbeelding de
   plek in en blijft het kader staan. */
.v2p-capture { position: relative; border-radius: var(--t-r-panel);
  overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--t-subtle); color: var(--t-ink2);
  display: flex; align-items: flex-end; }
.v2p-capture--cobalt { background: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep); }
.v2p-capture--ink { background: var(--t-ink); color: var(--t-canvas); }
.v2p-capture--butter { background: var(--t-butter-50); color: var(--t-butter-ink); }
.v2p-capture--wide { aspect-ratio: 16 / 9; }
.v2p-capture--tall { aspect-ratio: 3 / 4; }
.v2p-capture > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.v2p-capture .v2p-capture__note { position: relative; margin: 0;
  padding: var(--t-s5); font-size: var(--t-caption); letter-spacing: 0.04em;
  opacity: 0.72; }

/* ── kop met beeld ernaast ── */
.v2p-hero--split .v2p-hero__grid { display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--t-s8); align-items: center; }
@media (max-width: 1024px) {
  .v2p-hero--split .v2p-hero__grid { grid-template-columns: minmax(0, 1fr);
    gap: var(--t-s7); }
}

/* Variant voor /one/: het productscherm is hier de held, dus een groter
   beeldvlak en een iets teruggenomen kop &mdash; alleen hier, de andere
   v2p-hero--split-pagina's (studio, knowledge, ...) blijven op 7/5.
   De kolom-override zit achter dezelfde 1024px-grens als de basisregel
   erboven &mdash; zonder die guard bleef 6/6 ook op mobiel staan en
   kreeg de kop een kolom van ~144px in plaats van de volle breedte
   (gevonden bij mobiele audit 29/8). */
@media (min-width: 1025px) {
  .v2p-hero--one .v2p-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}
.v2p-hero--one .v2-display { font-size: clamp(28px, 1.6vw + 16px, 42px); }

/* Een foto heeft geen browserkader nodig; alleen een productscherm wel.
   Zonder deze uitzondering kreeg een redactionele foto dezelfde witte
   voering als een screenshot, en dat leest als een venster om een raam. */
.v2p-foto { display: block; width: 100%; height: auto;
  border-radius: var(--t-r-panel); }

/* ── kantoorblok: foto links, de praktische gegevens rechts ──
   De foto liep eerst over de volle breedte en werd daarmee het grootste
   element van de pagina, terwijl hij bedoeld is als bevestiging ("we
   bestaan echt, op dit adres") en niet als hoofdbeeld. In de smalste
   kolom staat hij terug op zijn plek, naast de gegevens waar de bezoeker
   voor komt. */
.v2p-office { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--t-s8); align-items: center; }
.v2p-office__foto { display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--t-r-panel); }
.v2p-office .v2p-kv { margin-top: var(--t-s5); }
@media (max-width: 1024px) {
  .v2p-office { grid-template-columns: minmax(0, 1fr); gap: var(--t-s6); }
}

/* ── figuur in een artikel ── */
.v2p-fig { margin: var(--t-s8) 0; max-width: 860px; }
.v2p-fig .v2p-shot__win { box-shadow: var(--t-e2); }
.v2p-fig figcaption { margin-top: var(--t-s3); font-size: var(--t-caption);
  line-height: 1.5; color: var(--t-ink2); }

/* figuur met portret ernaast — voor een artikel over één agent */
.v2p-fig--inline { display: flex; align-items: center; gap: var(--t-s5); }
.v2p-fig .v2p-fig__portrait { width: 120px; height: 120px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 20%; }
.v2p-fig--inline figcaption { margin-top: 0; }

/* ── hubkaart met een eigen vlak ──────────────────────────────────────
   Een hub is een onderwerp, geen lijstitem. Elke kaart krijgt daarom een
   gekleurd vlak bovenin: het geeft de vier hubs onderling verschil en de
   pagina de rust van een raster in plaats van een opsomming. */
.v2p-hubcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--t-s5); }
.v2p-hub { display: flex; flex-direction: column; overflow: hidden;
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-r-card); text-decoration: none; color: inherit;
  transition: transform 0.28s var(--v2-ease), border-color 0.28s var(--v2-ease); }
.v2p-hub:hover, .v2p-hub:focus-visible { transform: translateY(-3px);
  border-color: var(--t-border-strong); }
.v2p-hub .v2p-hub__plate { aspect-ratio: 16 / 9; display: flex;
  align-items: flex-end; padding: var(--t-s5); }
.v2p-hub__plate--cobalt { background: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep); }
.v2p-hub__plate--butter { background: var(--t-butter-100); color: var(--t-on-butter); }
.v2p-hub__plate--ink { background: var(--t-ink); color: var(--t-canvas); }
.v2p-hub__plate--canvas { background: var(--t-subtle); color: var(--t-ink2); }
.v2p-hub .v2p-hub__slug { margin: 0; font-size: var(--t-caption);
  letter-spacing: 0.04em; opacity: 0.78; }
.v2p-hub .v2p-hub__body { padding: var(--t-s6); display: flex;
  flex-direction: column; gap: var(--t-s3); flex: 1; }
.v2p-hub h3 { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-xs); line-height: 1.25; }
.v2p-hub p { margin: 0; font-size: var(--t-body); line-height: 1.6;
  color: var(--t-ink2); }
.v2p-hub .v2p-hub__tags { margin-top: auto; font-size: var(--t-caption);
  color: var(--t-ink2); letter-spacing: 0.04em; }
@media (max-width: 700px) { .v2p-hubcards { grid-template-columns: minmax(0, 1fr); } }

/* ── kennishub: vijf hubs op één rij ──────────────────────────────────
   Het artboard zet vijf onderwerpen naast elkaar, elk met één vraag. Bij
   minder dan vijf kolommen blijft de rij leesbaar door hem te laten
   afbreken in plaats van te knijpen. */
.v2p-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--t-s4); }
.v2p-topic { display: flex; flex-direction: column; gap: var(--t-s3);
  background: var(--t-butter-50); border: 1px solid var(--t-butter-100);
  border-radius: var(--t-r-card); padding: var(--t-s5);
  text-decoration: none; color: inherit;
  transition: transform 0.28s var(--v2-ease), border-color 0.28s var(--v2-ease); }
/* Bij hover verdiept de rand in zijn éígen kleur, niet in grijs — dezelfde
   regel als de knoppen bovenin site.css. Volle butter blijft staan; alleen
   de diepte beweegt. */
a.v2p-topic:hover, a.v2p-topic:focus-visible { transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--t-butter-ink) 45%, var(--t-butter-100)); }
.v2p-topic .v2p-topic__cat { margin: 0; font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-cobalt-700); }
.v2p-topic h3 { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-xs); line-height: 1.2; }
.v2p-topic p { margin: 0; font-size: var(--t-body); line-height: 1.5;
  color: var(--t-ink2); }
.v2p-topic .v2p-topic__count { margin-top: auto; padding-top: var(--t-s3);
  font-size: var(--t-caption); color: var(--t-cobalt-700); }
.v2p-topic--soon .v2p-topic__count { color: var(--t-ink2); }
@media (max-width: 1024px) { .v2p-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .v2p-five { grid-template-columns: minmax(0, 1fr); } }

/* ── het categorieblok: definitie links, citaat rechts ── */
.v2p-cat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  background: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep);
  border-radius: var(--t-r-panel); overflow: hidden; }
.v2p-cat__body { padding: var(--t-s7); }
.v2p-cat__quote { padding: var(--t-s7);
  border-left: 1px solid color-mix(in srgb, var(--t-on-cobalt-deep) 26%, transparent); }
.v2p-cat .v2p-cat__label { margin: 0 0 var(--t-s4); font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.7; }
.v2p-cat h2 { margin: 0 0 var(--t-s4); font-family: var(--t-display);
  font-weight: 400; font-size: var(--t-display-sm); line-height: 1.2; }
.v2p-cat p { margin: 0; font-size: var(--t-body); line-height: 1.6; opacity: 0.88; }
.v2p-cat .v2p-cat__more { margin-top: var(--t-s5); font-size: var(--t-caption);
  color: var(--t-on-cobalt-deep); }
.v2p-cat blockquote { margin: 0; font-family: var(--t-display);
  font-size: clamp(19px, 1vw + 12px, 24px); line-height: 1.4; }
@media (max-width: 1024px) {
  .v2p-cat { grid-template-columns: minmax(0, 1fr); }
  .v2p-cat__quote { border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--t-on-cobalt-deep) 26%, transparent); }
}

/* ── de bibliotheek: de index, per onderwerp ── */
.v2p-lib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--t-s7) var(--t-s6); }
/* De kolomkoppen dragen de indeling; in grijs zakten ze weg tegen de meta-
   regels eronder. Cobalt-700 (niet -deep) omdat dit inkt is en geen vlak: de
   700 draait wél met het donkere thema mee. 600 is het zwaarste écht
   getekende gewicht van Public Sans — 700 zou de browser laten faux-bolden. */
.v2p-lib__col h3 { margin: 0 0 var(--t-s4); padding-bottom: var(--t-s2);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t-cobalt-700);
  border-bottom: 1px solid var(--t-border-strong); }
.v2p-lib__col ul { list-style: none; margin: 0; padding: 0; }
.v2p-lib__col li { padding-block: var(--t-s4);
  border-bottom: 1px solid var(--t-border); }
.v2p-lib__col li:last-child { border-bottom: 0; }
.v2p-lib__col a { display: block; font-size: var(--t-body-lg); line-height: 1.4;
  color: var(--t-ink); text-decoration: none; }
.v2p-lib__col a:hover, .v2p-lib__col a:focus-visible {
  text-decoration: underline; text-decoration-color: var(--t-cobalt-deep);
  text-underline-offset: 0.16em; }
.v2p-lib__col .v2p-lib__meta { display: block; margin-top: var(--t-s2);
  font-size: var(--t-caption); color: var(--t-ink2); }
.v2p-lib__col .v2p-lib__soon { font-size: var(--t-body); color: var(--t-ink2); }
@media (max-width: 700px) { .v2p-lib { grid-template-columns: minmax(0, 1fr); } }

/* ── de woordenlijst ── */
.v2p-vocab > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--t-s6); padding-block: var(--t-s5);
  border-top: 1px solid var(--t-border); }
.v2p-vocab > div:last-child { border-bottom: 1px solid var(--t-border); }
.v2p-vocab dt { margin: 0; font-weight: 600; font-size: var(--t-body-lg); }
.v2p-vocab dd { margin: 0; font-size: var(--t-body); line-height: 1.6;
  color: var(--t-ink2); }
@media (max-width: 700px) {
  .v2p-vocab > div { grid-template-columns: minmax(0, 1fr); gap: var(--t-s2); }
}

/* ── genummerde regels ── */
.v2p-numrules { list-style: none; margin: 0; padding: 0; }
.v2p-numrules li { display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--t-s4); padding-block: var(--t-s5);
  border-top: 1px solid var(--t-border); font-size: var(--t-body-lg);
  line-height: 1.5; }
.v2p-numrules li:last-child { border-bottom: 1px solid var(--t-border); }
.v2p-numrules .v2p-numrules__n { color: var(--t-cobalt-700); font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* ── nieuwsbriefband ── */
.v2p-news { background: var(--t-ink); color: var(--t-canvas);
  margin-block: 0; padding-block: var(--v2-section); }
.v2p-news__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--t-s7); align-items: center; }
.v2p-news h2 { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-sm); line-height: 1.2; max-width: 20ch; }
.v2p-news p { margin: var(--t-s3) 0 0; font-size: var(--t-body); opacity: 0.72; }
@media (max-width: 1024px) { .v2p-news__in { grid-template-columns: minmax(0, 1fr); } }

/* ── artikelsjabloon ──────────────────────────────────────────────────
   Overgenomen uit de artboards op Page 1 van het Paper-bestand: kruimel,
   kop, standfirst, auteursregel, een citaatband over de volle breedte, en
   daarna het lichaam met een kolom ernaast waarin het cijfer, de
   inhoudsopgave, de definitie en de doorverwijzing staan. */
.v2p-crumb { margin: 0 0 var(--t-s4); font-size: var(--t-caption);
  color: var(--t-ink2); }
.v2p-crumb a { color: var(--t-cobalt-700); text-decoration: none; }
.v2p-crumb a:hover, .v2p-crumb a:focus-visible { text-decoration: underline; }
.v2p-byline { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--t-s3) var(--t-s5); margin-top: var(--t-s6);
  padding-top: var(--t-s5); border-top: 1px solid var(--t-border);
  font-size: var(--t-caption); color: var(--t-ink2); }
.v2p-byline .v2p-byline__who { display: flex; align-items: center;
  gap: var(--t-s3); color: var(--t-ink); }
.v2p-byline .v2p-byline__mark { display: inline-flex; align-items: center;
  justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--t-butter-100); color: var(--t-on-butter);
  font-size: var(--t-caption); font-weight: 600; }

/* citaatband over de volle breedte */
.v2p-pull { background: var(--t-butter-50); margin-block: 0;
  padding-block: var(--v2-section); }
.v2p-pull .v2p-pull__cat { margin: 0 0 var(--t-s4); font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-butter-ink); }
.v2p-pull blockquote { margin: 0; max-width: 22ch;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(28px, 2.2vw + 14px, 44px); line-height: 1.2;
  letter-spacing: -0.01em; }

/* lichaam + kolom */
.v2p-artgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--t-s8); align-items: start; }
.v2p-aside { display: flex; flex-direction: column; gap: var(--t-s5);
  position: sticky; top: calc(76px + var(--t-s5)); }
@media (max-width: 1024px) {
  .v2p-artgrid { grid-template-columns: minmax(0, 1fr); gap: var(--t-s7); }
  .v2p-aside { position: static; }
}

/* het antwoord in 30 seconden */
.v2p-30 { background: var(--t-canvas); border: 1px solid var(--t-border);
  border-radius: var(--t-r-card); padding: var(--t-s6); margin-bottom: var(--t-s7); }
.v2p-30 .v2p-30__label { margin: 0 0 var(--t-s4); font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-cobalt-700); }
.v2p-30 ul { list-style: none; margin: 0; padding: 0; }
.v2p-30 li { display: grid; grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--t-s3); font-size: var(--t-body); line-height: 1.6; }
.v2p-30 li + li { margin-top: var(--t-s4); }
.v2p-30 .v2p-30__arr { color: var(--t-cobalt-700); }

/* het cijfer */
/* Cijferkaart op kobalt (31/8, ownerkeuze). Gemeten: butter-50 op
   cobalt-deep is 5,87:1 en het onderschrift op 0,85 wit is 4,95:1 — allebei
   boven de 4,5 van AA. Het onderschrift stond op --t-ink2; dat is een
   inktkleur voor een lichte ondergrond en zakte hier naar 1,6:1. */
.v2p-stat { background: var(--t-cobalt-deep); border-radius: var(--t-r-card);
  padding: var(--t-s6); }
.v2p-stat b { display: block; font-family: var(--t-display); font-weight: 400;
  /* 70% van de vorige maat (40/3vw+18/56), elk deel van de clamp mee
     geschaald zodat het over de hele breedte 70% blijft en niet alleen op de
     uiteinden. */
  font-size: clamp(28px, 2.1vw + 13px, 39px); line-height: 1;
  letter-spacing: -0.02em; color: var(--t-butter-50); }
.v2p-stat p { margin: var(--t-s3) 0 0; font-size: var(--t-caption);
  line-height: 1.5; color: var(--t-on-cobalt-deep); opacity: 0.85; }

/* inhoudsopgave */
.v2p-toc { border: 1px solid var(--t-border); border-radius: var(--t-r-card);
  padding: var(--t-s6); }
.v2p-toc .v2p-toc__label { margin: 0 0 var(--t-s4); font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-ink2); }
.v2p-toc ol { list-style: none; margin: 0; padding: 0; }
.v2p-toc li + li { margin-top: var(--t-s3); }
.v2p-toc a { font-size: var(--t-body); line-height: 1.4; color: var(--t-ink);
  text-decoration: none; }
.v2p-toc a:hover, .v2p-toc a:focus-visible { text-decoration: underline;
  text-decoration-color: var(--t-cobalt-deep); text-underline-offset: 0.16em; }

/* doorverwijzing naar het volgende stuk */
.v2p-next { background: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep);
  border-radius: var(--t-r-card); padding: var(--t-s6); }
.v2p-next h3 { margin: 0 0 var(--t-s3); font-family: var(--t-display);
  font-weight: 400; font-size: var(--t-display-xs); }
.v2p-next p { margin: 0 0 var(--t-s4); font-size: var(--t-body);
  line-height: 1.6; opacity: 0.85; }
.v2p-next a { color: var(--t-on-cobalt-deep); font-size: var(--t-body); }

/* vragen die je team gaat stellen */
.v2p-qa { margin-top: var(--t-s8); }
.v2p-qa h2 { margin: 0 0 var(--t-s5); font-family: var(--t-display);
  font-weight: 400; font-size: var(--t-display-sm); }
.v2p-qa > div { padding-block: var(--t-s5); border-top: 1px solid var(--t-border); }
.v2p-qa > div:last-child { border-bottom: 1px solid var(--t-border); }
.v2p-qa h3 { margin: 0 0 var(--t-s2); font-weight: 600; font-size: var(--t-body-lg); }
.v2p-qa p { margin: 0; font-size: var(--t-body); line-height: 1.6;
  color: var(--t-ink2); }

/* slotstatement over de volle breedte */
.v2p-statement { background: var(--t-butter-50); margin-block: 0;
  padding-block: var(--v2-section); text-align: center; }
.v2p-statement .v2p-statement__cat { margin: 0 0 var(--t-s4);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t-butter-ink); }
.v2p-statement h2 { margin: 0 auto; max-width: 18ch;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(30px, 2.4vw + 16px, 48px); line-height: 1.15;
  letter-spacing: -0.02em; }
.v2p-statement p { margin: var(--t-s5) 0 0; font-size: var(--t-caption);
  color: var(--t-ink2); }

/* Bronnenlijst onder het blunder-dossier. Elk incident zijn eigen citaties;
   een incident met maar één bron wordt zichtbaar als zodanig gemarkeerd,
   want dat is precies het soort ding dat je niet moet wegpoetsen. */
.v2p-srclist { list-style: none; margin: var(--t-s6) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--t-s5); }
.v2p-srclist > li { padding-top: var(--t-s4); border-top: 1px solid var(--t-border); }
.v2p-srclist > li > b { display: block; font-weight: 600; margin-bottom: var(--t-s2); }
.v2p-srclist ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--t-s2); }
.v2p-srclist ul li { font-size: var(--t-caption); color: var(--t-ink2);
  overflow-wrap: anywhere; }
.v2p-srclist a { color: var(--t-cobalt-700); }
.v2p-srclist__thin { display: inline-block; margin-top: var(--t-s2);
  padding: 0 var(--t-s2); background: var(--t-butter-50);
  border: 1px dashed var(--t-border-strong); border-radius: var(--t-r-btn);
  color: var(--t-butter-ink); font-size: var(--t-caption); }

/* ── het grote productscherm ──────────────────────────────────────────
   Eén scherm op ware grootte, direct onder de kop. Wat One is, laat je
   eerst zien en leg je daarna pas uit — vandaar volle wrapbreedte in
   plaats van het 860px-figuur uit de artikelen (.v2p-fig). */
.v2p-bigshot { margin: var(--t-s7) 0 0; }
.v2p-bigshot .v2p-shot__win { box-shadow: var(--t-e3); }
.v2p-bigshot figcaption { margin-top: var(--t-s4); max-width: 70ch;
  font-size: var(--t-caption); line-height: 1.5; color: var(--t-ink2); }

/* ── icoonpenning boven een schermbijschrift ──────────────────────────
   Alleen in .v2p-shot: het icoon is het anker waaraan je een functie
   terugvindt als je de pagina scant in plaats van leest. Sprite-id's uit
   _partials/sprite.html; de fabriek hangt die er vanzelf onder zodra de
   bron een href="#ic-…" bevat. */
.v2p-shot__ico { display: block; color: var(--t-cobalt-deep); }
.v2p-shot__ico svg { width: 32px; height: 32px; fill: none;
  stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* ── use-cases: beeld, titel, één zin ─────────────────────────────────
   Vier gelijke kaarten met een gereserveerd beeldvlak erboven. Zolang de
   lijst nog een ownerbesluit is, zijn titel én zin bewuste gaten
   (.v2p-slot) — geen verzinsels, en zichtbaar op /review. */
.v2p-uc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--t-s5); }
.v2p-uc__card { background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-r-card); padding: var(--t-s5);
  display: flex; flex-direction: column; gap: var(--t-s4); }
.v2p-uc__card .v2p-capture { margin: 0; }
.v2p-uc__card .v2p-card__label { margin: 0; font-size: var(--t-caption);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-ink2); }
.v2p-uc__card h3 { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-xs); line-height: 1.25; }
.v2p-uc__card p { margin: 0; font-size: var(--t-body); line-height: 1.6;
  color: var(--t-ink2); }
@media (max-width: 700px) { .v2p-uc { grid-template-columns: minmax(0, 1fr); } }

/* ── de etalage-kop: kop gecentreerd, scherm eronder, onderkant weggesneden ──
   De pagina opent met wat One is in plaats van met een knop. Het scherm loopt
   onderaan door onder de volgende sectie: geen fade, gewoon de sectiegrens die
   hem afdekt. Vandaar padding-bottom 0 op de kop en border-bottom 0 op het
   venster — de bodemrand en -radius horen niet te bestaan.
   De textuur staat als variabele op het element zelf (zie de html): de
   paginapoort leest een .jpg in een stylesheet als klassenaam. .v2p-hero zet
   `background` als shorthand, dus alles wat daarbij hoort moet hier opnieuw —
   size, position en attachment sneuvelen anders met de kleur mee. */
.v2p-hero--stage { padding-block: calc(76px + var(--t-s8)) 0;
  background: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep); }
.v2p-hero__mid { text-align: center; }
/* Kleiner dan de standaard-display: de kop deelt het scherm hier met een
   opname, en elke regel die de kop erbij pakt gaat van het beeld af. */
.v2p-hero__mid .v2-display { max-width: 17em; margin-inline: auto;
  font-size: clamp(34px, 2.5vw + 14px, 54px);
  color: var(--t-on-cobalt-deep); }
/* .v2-sub staat standaard op ink2; op cobalt moet hij mee naar wit, met een
   tikje minder dekking zodat de kop de kop blijft. */
.v2p-hero__mid .v2-sub { max-width: 56ch; margin-inline: auto;
  color: var(--t-on-cobalt-deep); opacity: 0.86; }

.v2p-stage { margin-top: var(--t-s7); }
.v2p-stage__win { max-width: 896px; margin-inline: auto;
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-bottom: 0; border-radius: var(--t-r-panel) var(--t-r-panel) 0 0;
  padding: var(--t-s1) var(--t-s1) 0; overflow: hidden;
  max-height: clamp(272px, 51vh, 624px); box-shadow: var(--t-e3); }
.v2p-stage__win img { display: block; width: 100%; height: auto;
  border-radius: calc(var(--t-r-panel) - var(--t-s1))
                 calc(var(--t-r-panel) - var(--t-s1)) 0 0; }
/* Op een telefoon past het hele scherm in 209px hoogte en is dan onleesbaar.
   Liever een uitsnede: het beeld groter dan zijn venster, links uitgelijnd,
   zodat het gesprek leesbaar blijft en rechts en onder wegvallen. */
@media (max-width: 700px) {
  .v2p-stage__win { max-height: 58vh; }
  .v2p-stage__win img { width: 180%; max-width: none; }
}

/* de sectie die de onderkant afdekt, en de kop-uitspraak afmaakt */
.v2p-mid { text-align: center; }
.v2p-mid .v2-h2 { margin-inline: auto; }
.v2p-mid .v2p-lead { margin-inline: auto; }
.v2p-mid .v2p-hero__acts { justify-content: center; }

/* ── schermen-carrousel ───────────────────────────────────────────────
   Vier schermen naast elkaar op een rail in plaats van om-en-om onder
   elkaar: je klikt erdoorheen zoals door "News and stories" op de
   homepage, en de sectie kost een schermhoogte in plaats van vier.
   Knoppen en gedrag zijn dezelfde als daar (.sec-posts__nav / site.js),
   hier via data-rail zodat de rail niet aan één id vastzit. */
.v2p-railwrap { position: relative; }
/* De rail scrolt, dus hij klipt. Zonder binnenmarge sneed hij de slagschaduw
   van de opname er links en rechts kaarsrecht af — een zichtbare band naast
   het scherm. De padding geeft de schaduw lucht, de negatieve marge zet de
   opname terug op de paginamarge (32px marge - 24px uitloop = 8px over).
   Onder staat 40px: de schaduw hangt 12px omlaag met 32px vervaging. */
/* gap 48 en niet 16: de binnenmarge hieronder is 24px breed, en met een
   kleinere tussenruimte piepte de buurslide daar precies doorheen. Nu staat
   de buur op 48px en blijft hij buiten de zichtbare goot. */
.v2p-rail { display: flex; gap: var(--t-s7); overflow-x: auto;
  scroll-snap-type: x mandatory; margin-top: var(--t-s6);
  margin-inline: calc(-1 * var(--t-s5));
  padding-inline: var(--t-s5); padding-block: var(--t-s5) 40px;
  scroll-padding-inline-start: var(--t-s5); scrollbar-width: none; }
.v2p-rail::-webkit-scrollbar { display: none; }
/* Eén scherm per slide: opname links, kop en alinea rechts. Twee kaarten
   naast elkaar maakte de opnames te klein om iets in te kunnen lezen — en
   dat lezen is het hele punt van een productscherm. */
/* Geen kaart om de slide heen: het kader stond op een witte band en sneed de
   sectie doormidden zonder iets af te bakenen. Het scherm draagt zijn eigen
   schaduw, dat is de enige rand die er nodig is. */
.v2p-slide { flex: 0 0 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  align-items: center; }
/* De gootbreedte tussen scherm en tekst was 24+24px. Met een icoon van 64 en
   een kop van 51px staat de tekst dan tegen het scherm aan geplakt; naar
   48+48. */
.v2p-slide__win { padding: var(--t-s5) var(--t-s7) var(--t-s5) 0; }
.v2p-slide__win img { display: block; width: 100%; height: auto;
  border-radius: var(--t-r-card); box-shadow: var(--t-e3); }
.v2p-slide__body { padding: var(--t-s6) 0 var(--t-s6) var(--t-s7); }
/* Icoon op 150% (32 -> 48; stond op 64, 31/8 iets terug op ownerverzoek).
   Alleen hier: .v2p-shot__ico staat verder nergens op de site, maar de
   basisregel hoort bij .v2p-shot en die kan terugkomen. */
.v2p-slide__body .v2p-shot__ico svg { width: 48px; height: 48px; }
.v2p-slide__body h3 { margin: var(--t-s5) 0 var(--t-s4);
  font-family: var(--t-display); font-weight: 400;
  /* +115% op elk deel van de clamp (26/1,3vw+16/34), zodat het over de hele
     breedte dezelfde verhouding houdt. Stond op +150%, 31/8 teruggebracht op
     ownerverzoek. text-wrap: balance verdeelt de kop gelijkmatig over de twee
     regels in plaats van één lang woord te laten overhangen. */
  font-size: clamp(30px, 1.5vw + 18px, 39px); line-height: 1.15;
  letter-spacing: -0.01em; text-wrap: balance; }
.v2p-slide__body p { margin: 0; font-size: var(--t-body-lg); line-height: 1.6;
  color: var(--t-ink2); }
.v2p-slide__body a { color: inherit;
  text-decoration-color: var(--t-cobalt-deep); text-underline-offset: 0.16em; }
.v2p-railnav { display: flex; gap: var(--t-s3); margin-top: var(--t-s4); }
.v2p-railnav button { width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; background: var(--t-surface);
  border: 1px solid var(--t-border-strong); color: var(--t-ink);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--t-ease); }
.v2p-railnav button:hover:not([disabled]) { background: var(--t-subtle);
  border-color: var(--t-ink2); }
.v2p-railnav button:focus-visible { outline: 2px solid var(--t-cobalt-deep);
  outline-offset: 3px; }
.v2p-railnav button[disabled] { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 860px) {
  .v2p-slide { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .v2p-slide__win { padding: 0; }
  .v2p-slide__body { padding: var(--t-s5) 0 var(--t-s6); }
}
/* Onder 700px zakt --v2-margin naar 20px; een uitloop van 24 stak dan net
   buiten het scherm. 12 past er wel binnen. */
@media (max-width: 700px) {
  .v2p-rail { margin-inline: calc(-1 * var(--t-s3));
    padding-inline: var(--t-s3); scroll-padding-inline-start: var(--t-s3); }
}

/* ── de overpagina-kop: foto over de volle breedte, schermhoog ──────
   Zelfde gedrag als de homepage-hero (.v2-hero--photo): het beeld ligt als
   achtergrond zodat de tekst eroverheen kan, en onder 1025px valt het terug
   naar een gewone afbeelding onder de tekst. Een achtergrond die je moet
   bijsnijden werkt op een telefoon nooit — daar staat de vrouw óf half
   buiten beeld óf over de kop heen.

   background-position staat op 70%: het beeld is 2,18 breed tegen 1,6 van een
   normaal venster, dus cover snijdt links en rechts weg. Op 70% blijft de
   vrouw (op 75% van het beeld) binnen het scherm en houdt de tekst de witte
   wand voor zichzelf. */
.v2p-hero--photo { position: relative; }
@media (min-width: 1025px) {
  .v2p-hero--photo { background-size: cover; background-position: 72% center;
    background-repeat: no-repeat;
    min-height: 100dvh; display: flex; align-items: center; }
  .v2p-hero--photo .v2-wrap { width: 100%; }
  /* Gemeten op het beeld zelf (31/8, na vervanging): het is 2280x843, dus
     2,705 breed, en de witte wand loopt tot 62% — de vorige foto was 2,184
     breed met de wand tot 65%. Allebei die getallen zitten in de som
     hieronder, dus bij een nieuwe foto moeten ze opnieuw gemeten worden;
     ze zijn niet te raden uit het bestand.

     Omdat het beeld veel breder is dan een venster (2,705 tegen ~1,6) snijdt
     cover er links en rechts flink af: op 1025x700 zie je maar 54% van de
     breedte. Op 72% blijft het gezicht heel en houdt de tekst de wand voor
     zich; verder naar rechts en de kop loopt de deur in, verder naar links en
     de vrouw valt buiten beeld.

     Gemeten op het beeld: de wand houdt op bij 0,620 en de vrouw staat van
     0,628 tot 0,857. Daaruit volgt waar de deurrand op het scherm landt:
     0,620·sw − 0,72·(sw−breedte), met sw = hoogte·2,705. Uitgewerkt is dat
     72vw − 27,05vh. Dat hangt dus óók van de HOOGTE af, niet alleen van de
     breedte — een smal maar hoog venster snijdt meer weg en duwt de deur naar
     links. Een vaste vw-grens liep daar de deur in (gemeten: 1025×900).
     Vandaar dat de tekst zijn grens uitrekent in plaats van hem te raden. */
  .v2p-hero--photo {
    --wand: max(300px, min(46vw, 680px, calc(72vw - 27.05dvh - 48px)));
  }
  .v2p-hero--photo .v2-display { max-width: var(--wand);
    font-size: clamp(30px, 2.2vw + 12px, 48px); }
  /* De subtekst houdt zijn eigen leesmaat van 30em en krimpt alleen mee als
     de wand smaller is dan dat. */
  .v2p-hero--photo .v2-sub { max-width: min(30em, var(--wand)); }
}
@media (max-width: 1024px) {
  .v2p-hero--photo { background-image: none !important; padding-bottom: 0; }
  /* De wenk zegt "er is meer onder de vouw" en hoort bij een kop die het hele
     scherm vult. Onder 1025px is de kop dat niet meer en landt hij midden in
     de foto eronder — daar is het geen aanwijzing maar een vlek. */
  .v2p-hero--photo .v2-hero__cue { display: none; }
}

/* De scrolwenk van de homepage staat in boter omdat hij daar op een donkere
   stoel ligt. Hier ligt hij op een witte wand: zelfde vorm, inktkleur. */
.v2p-hero--photo .v2-hero__arr { border-color: var(--t-ink2); }
.v2p-hero--photo .v2-hero__arr::after { background: var(--t-ink2); }

/* Het AI AM-merk boven het adres: een logo is geen illustratie, het staat op
   ware grootte en niet uitgerekt. */
.v2p-office__logo { display: block; width: auto;
  height: calc(var(--t-s7) * 2.25);           /* 48 -> 72 -> 108px, tweemaal 150% */
  margin-bottom: var(--t-s5); }

/* ── beeld naast tekst ────────────────────────────────────────────────
   Eén blok met een vierkant beeld links en de uitleg rechts. Geen kaart
   eromheen: het beeld is vrijstaand op wit en draagt zichzelf. */
.v2p-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--t-s8); align-items: center; }
/* 85%: de koppelingenring vroeg om lucht. De linkerrand blijft op de
   paginamarge staan, dus de uitlijning met de secties erboven en eronder
   blijft intact en de ruimte valt naar de tekstkolom. */
.v2p-duo__beeld img { display: block; width: 85%; height: auto; }
.v2p-duo__tekst .v2-h2 { max-width: 18ch; margin-bottom: var(--t-s5); }
.v2p-duo__tekst .v2p-lead { max-width: 52ch; }
.v2p-duo__tekst .v2p-lead:last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
  .v2p-duo { grid-template-columns: minmax(0, 1fr); gap: var(--t-s6); }
  .v2p-duo__beeld { max-width: 420px; margin-inline: auto; }
}

/* ── rondleiding, kale stand ──────────────────────────────────────────
   De etalage van de homepage (.v2-tour, aangestuurd door tisserTour in
   site.js) draagt daar vijf schermafdrukken in een venster. Hier draagt
   hij vier lévende animaties, en die willen juist géén kader: geen kaart,
   geen rand, geen grijs vlak. Alleen de beweging op de band.

   Vier stappen in plaats van vijf, dus de scroller is een slag korter. */
.v2-tour--bare .v2-tour__scroller { height: calc(100vh + 5 * var(--v2-tour-step)); }
/* Twee gelijke helften, samen gecentreerd in het venster met ruimte eromheen:
   de sectie draagt alleen nog een bijschrift en een animatie, dus de rust
   eromheen moet het werk doen. */
.v2-tour--bare .v2-tour__sticky { justify-content: center; }
.v2-tour--bare .v2-tour__grid { max-width: 1080px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--t-s7), 6vw, calc(var(--t-s8) * 2)); }
.v2-tour--bare .v2-tour__copy { justify-content: center; }
.v2-tour--bare .v2-tour__cap p { max-width: 42ch; }

/* het kader ontkleden: het is nog wél de bak waar de JS op rekent (hij zet
   er de transform op), dus hij blijft staan — alleen zonder huid. */
.v2-tour--bare .v2-frame { background: none; border: 0; box-shadow: none;
  padding: 0; border-radius: 0; }
.v2-tour--bare .v2-tour__screens .v2-frame { aspect-ratio: 5 / 4;
  width: min(100%, calc(46vh * 5 / 4));
  display: grid; place-items: center; }

/* de demo zelf: geen tegel, geen sunken vlak, en flink groter. De fragmenten
   zijn op ware grootte ontworpen (een modelkiezer is 190px), dus schalen in
   plaats van herbouwen — het blijft DOM, dus het blijft scherp. */
/* min-height blijft staan: het menu van de kiezer, de beeldlaag van de editor
   en de veegrand staan allemaal absoluut, dus zonder hoogte zakt de demo in
   tot een streep (gemeten: 33px voor de modelkiezer). */
/* Elke doos sluit om zijn eigen inhoud. Ze stonden alle vier op dezelfde
   260px, maar de inhoud hangt per demo in een andere hoek: de kiezer en de
   redenering linksboven (109 resp. 190px speling onder), het opslaan netjes
   in het midden, de beeldeditor vullend. Vier animaties op vier plekken in
   hun vak — vandaar dat het rommelig oogde. Nu is de doos zo groot als wat
   erin zit, en centreert het kader alle vier op dezelfde as.
   De maten zijn gemeten, niet geschat (inhoud ÷ schaal). */
.v2-tour--bare .v2p-mnt-demo { background: none; padding: 0;
  overflow: visible; transform: scale(1.6); transform-origin: center;
  width: auto; min-height: 0; }
/* De kiezer klapt open en dicht, dus zijn zwaartepunt beweegt: dicht is hij
   alleen de knop (33px), open loopt hij door tot 196. Op 120 ligt de doos
   tussen beide standen in — dicht staat de knop iets boven het midden, open
   straddelt het menu het. Het menu mag buiten de doos hangen. */
.v2-tour--bare .v2p-mnt-mp    { width: 234px; min-height: 120px; }
.v2-tour--bare .v2p-mnt-think { width: 300px; min-height: 142px; }
.v2-tour--bare .v2p-mnt-save  { width: 300px; min-height: 140px; }
/* de beeldeditor draagt een foto en heeft dus wél een vlak nodig */
.v2-tour--bare .v2p-mnt-imed { width: 330px; min-height: 300px;
  transform: scale(1.35); overflow: hidden;
  border-radius: var(--t-r-panel); }

/* Het bijschrift stond met de bovenkant vast (inset: 0 0 auto 0), dus een kop
   van twee regels duwde de alinea omlaag terwijl de animatie op zijn plek
   bleef. Verticaal centreren zet beide op dezelfde middellijn. */
.v2-tour--bare .v2-tour__cap { inset: 0; display: flex;
  flex-direction: column; justify-content: center; }
/* Het kader is op vh gemaakt (62vh * 5/4), dus de vergroting hangt aan de
   hóógte van het venster, niet aan de breedte. Gemeten: bij 900px hoog is het
   kader 697px en past 2,3; bij 800px is het 620 en past 2,0. */
@media (max-height: 860px) {
  .v2-tour--bare .v2p-mnt-demo { transform: scale(1.45); }
  .v2-tour--bare .v2p-mnt-imed { transform: scale(1.2); }
}
@media (max-height: 740px) {
  .v2-tour--bare .v2p-mnt-demo { transform: scale(1.3); }
  .v2-tour--bare .v2p-mnt-imed { transform: scale(1.1); }
}
.v2-tour--bare .v2p-mnt-img-wrap { border-radius: var(--t-r-card); }

/* De scrolwenk staat op de homepage in boter op een donkere stoel; hier ligt
   hij op de lichte band, dus inkt. Zelfde vorm, zelfde puls. */
/* De wenk hangt aan de sticky (position: sticky maakt hem tot ankerpunt), dus
   hij staat altijd onderin het venster en niet onder de tekstkolom. */
.v2-tour--bare .v2-hero__arr--ink { position: absolute; z-index: 1;
  left: 50%; transform: translateX(-50%); bottom: var(--t-s7); }
.v2-hero__arr--ink { border-color: var(--t-ink2); }
.v2-hero__arr--ink::after { background: var(--t-ink2); }

@media (max-width: 1024px) {
  /* onder 1024 valt de etalage terug op een gewone lijst (zie site.css);
     dan hoeft er niets vergroot en mag de wenk weg.
     De kolomregel hierboven is specifieker dan die terugval, dus die moet
     hier expliciet terug naar één kolom — anders werd de tweede kolom 0px
     breed en brak elk bijschrift op één woord per regel. */
  .v2-tour--bare .v2-tour__grid { grid-template-columns: minmax(0, 1fr); }
  .v2-tour--bare .v2p-mnt-demo,
  .v2-tour--bare .v2p-mnt-imed { transform: none; width: 100%; min-height: 240px; }
  .v2-tour--bare .v2-tour__screens .v2-frame { aspect-ratio: auto; width: 100%; }
  .v2-tour--bare .v2-hero__arr--ink { display: none; }
  .v2-tour--bare .v2-tour__titel { max-width: none; }
}


/* ── datareis-diagram op /security/ ───────────────────────────────────
   De datareis stond als lijst op de pagina: vijf regels 01-05 met een
   omschrijving ernaast, precies zoals de drie blokken eromheen. Juist dit
   stuk is wat een compliance officer wil zien — wát de tenant verlaat en
   wat niet — dus is het nu een tekening. Alles op tokens, zodat hij in
   licht en donker meegaat; geen externe library. */
.sec-flow { display: block; width: 100%; height: auto;
  font-family: var(--t-sans); }
/* Op een telefoon zou het diagram naar ~335px krimpen; de labels van 13,5px
   komen dan op 5px uit en zijn onleesbaar. Onder 760px krijgt hij daarom een
   ondergrens en schuift hij binnen zijn eigen kader, net als een brede tabel.
   De pagina zelf schuift daardoor nooit zijwaarts. */
.sec-flowwrap { overflow-x: auto; }
@media (max-width: 760px) {
  .sec-flow { min-width: 680px; }
}
.sec-flow__zonelbl { fill: var(--t-ink2); font-size: var(--t-caption);
  letter-spacing: 0.12em; }
.sec-flow__box { fill: var(--t-surface); stroke: var(--t-border); stroke-width: 1; }
.sec-flow__box--out { fill: var(--t-butter-50); stroke: var(--t-butter-100); }
.sec-flow__num { fill: var(--t-cobalt-deep); font-size: var(--t-caption);
  letter-spacing: 0.06em; }
.sec-flow__t { fill: var(--t-ink); font-size: var(--t-body); font-weight: 600; }
.sec-flow__d { fill: var(--t-ink2); font-size: var(--t-caption); }
.sec-flow__lbl { fill: var(--t-ink2); font-size: var(--t-caption); }
.sec-flow__line { stroke: var(--t-border-strong); stroke-width: 1.5; fill: none; }
.sec-flow__edge { stroke: var(--t-cobalt-deep); stroke-width: 1.5; fill: none; }
.sec-flow__head { fill: var(--t-cobalt-deep); }
.sec-flow__head--grey { fill: var(--t-border-strong); }
.sec-flow__bound { stroke: var(--t-border-strong); stroke-width: 1.5;
  stroke-dasharray: 4 5; }

/* /security/ draagt een ander beeld dan /about/, dus de som hierboven moet
   opnieuw: header-security.jpg is 2280x943 (2,418 breed) en de wand loopt tot
   0,625 — bij /about/ was dat 2,705 en 0,620. Uitgewerkt met dezelfde formule
   0,625·sw − 0,72·(sw−breedte), sw = hoogte·2,418:  72vw − 22,97dvh.
   Raden kan hier niet; het getal komt uit het beeld. */
@media (min-width: 1025px) {
  /* Deze kop vult 80% van het venster, niet 100% — eigen keuze voor /security/,
     dus gescoped: /about/ deelt .v2p-hero--photo en blijft schermvullend. */
  .v2p-hero--photo-sec { min-height: 80dvh; }
  /* De som rekent met de HOOGTE van de kop, want daarop wordt het beeld
     ge-cover'd, en die is hier 80dvh in plaats van 100dvh. Uitgeschreven:
     de wand landt op 0,72*breedte - 0,095*sw, met sw = hoogte*2,418; de
     coefficient is dus 0,095*2,418 = 22,97 per 100dvh en 18,38 bij 80dvh.

     Let op de richting: een LAGERE kop snijdt het beeld minder ver af, dus de
     wand loopt verder naar rechts en er is MEER ruimte voor tekst. Laat je
     22,97 staan, dan loopt de kop dus niet het raam in maar blijft hij
     onnodig smal (gemeten 1025x1200: 414px in plaats van 469px). */
  .v2p-hero--photo-sec {
    --wand: max(300px, min(46vw, 680px, calc(72vw - 18.38dvh - 48px)));
  }
}

/* ── uitspraakblok op cobalt (/security/) ─────────────────────────────
   .v2p-pull staat op 28 pagina's en .v2p-card is sinds 31/8 boter; dit zijn
   dus varianten, geen wijziging van de basis. */
.v2p-pull--cobalt { background: var(--t-cobalt-deep); }
.v2p-pull--cobalt .v2-wrap { text-align: center; }
/* Omtrek geprobeerd (31/8) en weer weggehaald: op cobalt viel een lijn van
   1px op een display-serif met dunne haarlijnen uit elkaar. Gevuld wit dus,
   en vier pixels kleiner dan de basis van .v2p-pull. */
.v2p-pull--cobalt blockquote { max-width: 30ch; margin-inline: auto;
  color: var(--t-on-cobalt-deep);
  font-size: clamp(24px, 2.2vw + 10px, 40px);
  /* Zonder balance eindigt de uitspraak op een losse "it." */
  text-wrap: balance; }

/* Genummerde kaarten: het volgnummer in cobalt in plaats van grijs, en een
   iets grotere kop. .v2p-card__label staat op 34 pagina's, vandaar de
   modifier op het raster en niet op de kaart zelf. */
.v2p-cards--nums .v2p-card__label { color: var(--t-cobalt-deep); }
.v2p-cards--nums .v2p-card h3 { font-size: var(--t-display-sm); }

/* ── sectiekop: titel en inleiding naast elkaar ───────────────────────
   Standaard staat de inleiding onder de kop. Hier leest ze ernaast, zodat de
   kop zijn eigen regellengte houdt en de sectie hoger begint.
   De marge wordt met .v2p-sec/.v2p-band ervoor genoemd omdat
   '.v2p-band .v2-h2' anders even specifiek is en op volgorde zou winnen —
   dat is precies het soort botsing dat je pas in de browser ziet. */
.v2p-sechead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--t-s6) var(--t-s8); align-items: end; margin-bottom: var(--t-s7); }
.v2p-sec .v2p-sechead .v2-h2, .v2p-band .v2p-sechead .v2-h2 { margin-bottom: 0; }
.v2p-sechead .v2p-lead { margin-bottom: 0; }
@media (max-width: 900px) {
  .v2p-sechead { grid-template-columns: minmax(0, 1fr); align-items: start;
    gap: var(--t-s4); }
}