/* tisser.ai v2 — pagina-laag op tisser.css
   Synthese Sana/Beside/Chronicle: één oppervlak, hairlines, alpha-hiërarchie,
   gewicht-400 display, één reveal-grammatica, product als omlijst object. */

:root {
  --v2-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v2-ease-io: cubic-bezier(0.83, 0, 0.17, 1);
  --v2-ease-mark: cubic-bezier(0.35, 0, 0.2, 1);   /* streek: gelijkmatiger */
  --v2-content: 1240px;
  --v2-margin: 32px;
  --v2-section: calc(var(--t-s8) + var(--t-s7));      /* 112px */
  --v2-section-lg: calc(var(--t-s8) * 2);              /* 128px */
}

/* Altijd licht. De tokenlaag schermt zijn dark-blok af met
   :root:not([data-theme="light"]), dus data-theme op de documentwortel zet
   het uit. color-scheme houdt ook de browser-eigen onderdelen (scrollbars,
   formuliervelden, autofill) licht — die volgen anders alsnog het systeem. */
html { scroll-behavior: smooth; color-scheme: light; }
body { background: var(--t-canvas); color: var(--t-ink); margin: 0;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--t-cta); outline-offset: 2px; }
a { color: inherit; }

.v2-wrap { max-width: calc(var(--v2-content) + 2 * var(--v2-margin));
           margin: 0 auto; padding-inline: var(--v2-margin); }

/* De iconensprite is alleen een voorraad <symbol>'s. Zonder deze regel rendert
   hij als een gewone svg van 300x150 en duwt hij de hele pagina omlaag. */
.v2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── type ── */
.v2-display { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(40px, 3.4vw + 16px, 68px);
  line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.v2-h2 { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(28px, 1.8vw + 14px, 44px);
  line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.v2-h3 { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(20px, 0.8vw + 14px, 24px); line-height: 1.2;
  letter-spacing: -0.01em; margin: 0; }
.v2-sub { font-size: var(--t-body-lg); line-height: 1.5; color: var(--t-ink2);
  max-width: 30em; margin: 0; }
.v2-eyebrow { font-size: var(--t-body); font-weight: 600; color: var(--t-ink2); margin: 0; }
.v2-cap { font-size: var(--t-caption); color: var(--t-ink2); }

/* ── knoppen ── */
/* Hover was één regel opacity op 0.75: dat maakt een knop doorschijnend en op
   wit dus lichter — de cobalt versmolt half met de pagina. Daarna heb ik hem
   donkerder gemaakt, en dat was net zo fout: cobalt-700 is wel donkerder maar
   ook minder verzadigd, en een veeg over een gevulde pil laat hem een halve
   seconde tweekleurig staan. Allebei kosten ze kleurkracht.
   Dus: de vulling verandert niet. Nooit. De knop komt naar voren — hij tilt
   op en werpt een schaduw in zijn éígen kleur, niet in grijs. Volle cobalt en
   volle butter blijven staan; alleen de diepte beweegt. */
.v2-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--t-s2); min-height: 56px; padding: 0 var(--t-s6);
  border-radius: var(--t-r-pill); font-family: var(--t-sans);
  font-size: var(--t-body-lg); font-weight: 600; text-decoration: none;
  transition: transform 0.28s var(--v2-ease), box-shadow 0.28s var(--v2-ease);
  border: 0; cursor: pointer; }
.v2-btn:hover, .v2-btn:focus-visible { transform: translateY(-2px); }
.v2-btn:active { transform: translateY(0); transition-duration: 0.08s; }
.v2-btn--primary { background: var(--t-cta); color: var(--t-on-cta); }
.v2-btn--primary:hover, .v2-btn--primary:focus-visible {
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--t-cta) 62%, transparent); }
.v2-btn--butter { background: var(--t-butter-100); color: var(--t-on-butter); }
.v2-btn--butter:hover, .v2-btn--butter:focus-visible {
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--t-butter-ink) 38%, transparent); }
/* De doorzichtige knop heeft geen vlak om naar voren te halen, dus die krijgt
   er wel een: zijn rand wordt de inktlijn en er komt een rustige vulling in. */
.v2-btn--ghost { background: transparent; color: var(--t-ink);
  box-shadow: inset 0 0 0 1px var(--t-border-strong);
  transition: transform 0.28s var(--v2-ease), box-shadow 0.28s var(--v2-ease),
              background 0.28s var(--v2-ease); }
.v2-btn--ghost:hover, .v2-btn--ghost:focus-visible {
  background: var(--t-subtle); box-shadow: inset 0 0 0 1px var(--t-ink); }
.v2-btn--onphoto { background: var(--t-surface); color: var(--t-ink); }
.v2-btn--onphoto:hover, .v2-btn--onphoto:focus-visible {
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--t-ink) 34%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .v2-btn { transition: none; }
  .v2-btn:hover, .v2-btn:focus-visible { transform: none; }
}
/* De knop in de balk blijft op de oude maat: 56px laat maar 10px lucht over in
   een balk van 76px, en die hoogte is bewust zo afgesteld. */
.v2-nav .v2-btn { min-height: 44px; padding-inline: var(--t-s5);
  font-size: var(--t-body); }

/* ── header ── */
.v2-header { position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--t-surface);
  transform: translateY(0);
  transition: transform 0.42s var(--v2-ease),
    background-color 0.5s var(--v2-ease); will-change: transform; }
/* Open menu: balk en paneel worden samen één butter-vlak. */
.v2-header.is-menu { background: var(--t-butter-50); }
.v2-header.is-tucked { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .v2-header { transition: none; }
  .v2-header.is-tucked { transform: none; }
}
.v2-nav { display: flex; align-items: center; gap: var(--t-s6);
  min-height: calc(var(--t-s7) + var(--t-s5) + var(--t-s2) - var(--t-s1)); }
.v2-nav__brand { display: flex; align-items: center; margin: 0;
  text-decoration: none; flex: none; }
/* optische correctie: het woordmerk is bodem-zwaar (inkt-zwaartepunt ligt
   15,8 van 150 eenheden onder het midden), dus geometrisch centreren laat het zakken */
.v2-nav__brand img { display: block; height: 26px; width: auto;
  transform: translateY(-2.7px); }
.v2-nav__links { display: flex; gap: var(--t-s5); list-style: none; margin: 0;
  padding: 0; }
.v2-nav__links { align-items: center; }
/* Signifier heeft alleen 400. Vroeg je hier 500, dan verzon de browser een
   schijn-vet (gemeten +5,8% inkt bij gelijke breedte) — troebel op een serif
   en precies wat §3.4 wil voorkomen. Presence komt van de graad, niet van vet. */
.v2-nav__links a { display: inline-flex; align-items: center;
  font-family: var(--t-display); font-weight: 400;
  font-size: calc(var(--t-body-lg) + 2px); line-height: 1;
  color: var(--t-ink); text-decoration: none;
  padding: var(--t-s2) var(--t-s1);
  background-image: linear-gradient(to top, transparent 0.42em,
    var(--t-butter-100) 0.42em 1.16em, transparent 1.16em);
  background-repeat: no-repeat; background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.32s var(--v2-ease); }
.v2-nav__links a:hover, .v2-nav__links a:focus-visible { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  .v2-nav__links a { transition: none; }
}
/* ── uitklapmenu's ────────────────────────────────────────────────
   De knop draagt dezelfde streek als een gewone menulink, zodat de rij
   één ding blijft. Open bij hover én bij toetsenbord — aria-expanded is
   de waarheid, de hover is een gemak erbovenop. */
.v2-nav__has { position: relative; }
.v2-nav__top { display: inline-flex; align-items: center; gap: var(--t-s2);
  background: none; border: 0; cursor: pointer;
  font-family: var(--t-display); font-weight: 400;
  font-size: calc(var(--t-body-lg) + 2px); line-height: 1;
  color: var(--t-ink); padding: var(--t-s2) var(--t-s1);
  background-image: linear-gradient(to top, transparent 0.42em,
    var(--t-butter-100) 0.42em 1.16em, transparent 1.16em);
  background-repeat: no-repeat; background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.32s var(--v2-ease); }
.v2-nav__has:hover .v2-nav__top,
.v2-nav__top:focus-visible,
.v2-nav__top[aria-expanded="true"] { background-size: 100% 100%; }
.v2-nav__caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.28s var(--v2-ease); }
.v2-nav__top[aria-expanded="true"] .v2-nav__caret {
  transform: rotate(-135deg) translate(-3px, -3px); }

.v2-nav__sub { position: absolute; top: 100%; left: calc(-1 * var(--t-s4));
  min-width: 232px; list-style: none; margin: 0; padding: var(--t-s3);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-r-card); box-shadow: var(--t-e3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.22s var(--v2-ease), transform 0.22s var(--v2-ease),
              visibility 0s linear 0.22s; }
.v2-nav__has:hover .v2-nav__sub,
.v2-nav__has:focus-within .v2-nav__sub,
.v2-nav__top[aria-expanded="true"] + .v2-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s; }
.v2-nav__sub a { display: block; padding: var(--t-s2) var(--t-s3);
  border-radius: var(--t-r-btn);
  font-family: var(--t-sans); font-size: var(--t-body); font-weight: 500;
  color: var(--t-ink2); text-decoration: none; background-image: none;
  transition: background 0.18s var(--v2-ease), color 0.18s var(--v2-ease); }
.v2-nav__sub a:hover, .v2-nav__sub a:focus-visible {
  background: var(--t-butter-50); color: var(--t-ink); }
@media (prefers-reduced-motion: reduce) {
  .v2-nav__sub, .v2-nav__caret, .v2-nav__top { transition: none; }
}
.v2-nav__acts { margin-left: auto; display: flex; align-items: center;
  gap: var(--t-s3); }

/* De hamburger staat rechts van de knop en is een icoon, geen woord: naast
   een volle cobalt pil leest een tweede tekstknop als een tweede aanbod.
   Geen kader eromheen — het vlak verschijnt pas bij aanwijzen. */
.v2-nav__burger { display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent; color: var(--t-ink); cursor: pointer; }
.v2-nav__burger:focus-visible { outline: 2px solid var(--t-cobalt-deep);
  outline-offset: 2px; }
.v2-burger { display: block; position: relative; width: 20px; height: 14px; }
.v2-burger__l { position: absolute; left: 0; width: 100%; height: 1.5px;
  border-radius: var(--t-r-pill); background: currentColor;
  transition: transform 0.28s var(--v2-ease), opacity 0.16s var(--v2-ease); }
.v2-burger__l:nth-child(1) { top: 0; }
.v2-burger__l:nth-child(2) { top: 6.25px; }
.v2-burger__l:nth-child(3) { top: 12.5px; }
/* open: de buitenste twee draaien naar een kruis, de middelste valt weg */
.v2-nav__burger[aria-expanded="true"] .v2-burger__l:nth-child(1) {
  transform: translateY(6.25px) rotate(45deg); }
.v2-nav__burger[aria-expanded="true"] .v2-burger__l:nth-child(2) { opacity: 0; }
.v2-nav__burger[aria-expanded="true"] .v2-burger__l:nth-child(3) {
  transform: translateY(-6.25px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .v2-nav__burger, .v2-burger__l { transition: none; }
}

/* Alleen op echt desktop staat het menu in het midden tussen merk en knop. */
@media (min-width: 1025px) {
  .v2-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .v2-nav__brand { justify-self: start; }
  .v2-nav__links { justify-self: center; }
  .v2-nav__acts { justify-self: end; margin-left: 0; }
}

/* ── reveal-grammatica ── */
.v2-appear { opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--v2-ease), transform 0.8s var(--v2-ease);
  transition-delay: calc(var(--v2-i, 0) * 80ms); }
.v2-appear.is-seen { opacity: 1; transform: none; }
.v2-blur { filter: blur(12px); transition: opacity 0.9s var(--v2-ease),
  transform 0.9s var(--v2-ease), filter 0.9s var(--v2-ease);
  transition-delay: calc(var(--v2-i, 0) * 80ms); }
.v2-blur.is-seen { filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .v2-appear, .v2-blur { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Signatuur: de butter-markering trekt over het woord.
   Hij hangt bewust NIET aan de reveal van zijn ouder (`.is-seen .v2-hold`).
   Die vuurt zodra het blok de onderrand raakt — bij de hero dus al tijdens
   het laden, waardoor de streek al klaar is voor je kijkt. Een eigen waarnemer
   in site.js zet 'm pas als de zin het midden van het scherm haalt. */
.v2-hold { background-image: linear-gradient(transparent 22%,
    var(--t-butter-100) 22% 96%, transparent 96%);
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size 1s var(--v2-ease-mark) 0.08s; padding: 0 0.04em; }
.v2-hold.is-seen { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .v2-hold { background-size: 100% 100%; } }

/* ── hero ── */
.v2-hero { padding-top: calc(var(--t-s7) + var(--t-s5) + var(--t-s8)); padding-bottom: var(--t-s8);
  overflow: clip; }
.v2-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--t-s8); align-items: center; }
.v2-hero__copy { display: flex; flex-direction: column; gap: var(--t-s5);
  align-items: flex-start; }
/* De hero-kop stond op de volle displayschaal (tot 68px) en woog daarmee
   zwaarder dan alles eronder; op verzoek terug naar ~70%. Bewust alleen de
   homepage-hero: dezelfde .v2-display draagt ook de tour-kop en de slotkop,
   en die houden hun maat. */
.v2-hero__copy .v2-display { font-size: clamp(28px, 2.4vw + 11px, 48px); }
.v2-hero__acts { display: flex; gap: var(--t-s3); align-items: center;
  margin-top: var(--t-s2); }
.v2-hero__foot { margin-top: var(--t-s3); }
/* Op de telefoon passen twee pillen niet naast elkaar: de tekst brak dan
   binnen de knop over twee regels. Onder elkaar, elk over de volle breedte.
   Let op de volgorde: deze regel moet ná de basisregel staan, anders wint
   diens align-items alsnog. */
@media (max-width: 700px) {
  .v2-hero__acts { flex-direction: column; align-items: stretch;
    align-self: stretch; }
  .v2-hero__acts .v2-btn, .v2-hero__acts .t-btn { width: 100%; }
}

/* scrollwenk onderaan de hero — zelfde figuur als in de pijplijn, in butter */
/* boven de Ask-AI-balk (49px) uit, net als het stapblok in de pijplijn */
.v2-hero__cue { position: absolute; left: 50%;
  bottom: calc(var(--t-s8) + var(--t-s5));
  transform: translateX(-50%); pointer-events: none; }
.v2-hero__arr { display: block; width: 16px; height: 26px;
  border: 1.5px solid var(--t-butter-100); border-radius: var(--t-r-pill);
  position: relative; }
.v2-hero__arr::after { content: ""; position: absolute; left: 50%; top: 5px;
  width: 3px; height: 5px; border-radius: 2px;
  background: var(--t-butter-100); transform: translateX(-50%);
  animation: v2-scroll-cue 1.6s ease-in-out infinite; }
@keyframes v2-scroll-cue {
  0%, 100% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  70% { opacity: 0; transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero__arr::after { animation: none; opacity: 1; }
}

/* cinema-paneel: wit frame, bloedt rechts weg achter een sluier */
.v2-cinema { position: relative; margin-right: calc(-1 * clamp(0px, 12vw, calc(var(--t-s8) * 3))); }
.v2-cinema::after { content: ""; position: absolute; inset: 0 0 0 auto;
  width: clamp(40px, 14vw, 240px); pointer-events: none;
  background: linear-gradient(to left, var(--t-canvas) 12%, transparent); }
.v2-frame { background: var(--t-surface); padding: var(--t-s1);
  border-radius: var(--t-r-panel); border: 1px solid var(--t-border);
  box-shadow: var(--t-e3); }
.v2-live { position: relative; aspect-ratio: 1440 / 900; overflow: hidden;
  border-radius: calc(var(--t-r-panel) - var(--t-s1)); background: var(--t-canvas); }
.v2-live iframe { width: 1440px; height: 900px; border: 0;
  transform-origin: 0 0; pointer-events: none; }

/* ── logo-strip: hairline-cellen ── */
.v2-logos { border: 1px solid var(--t-border); border-radius: var(--t-r-card);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.v2-logos > div { display: flex; align-items: center; justify-content: center;
  min-height: 88px; font-family: var(--t-display);
  font-size: var(--t-display-xs); border-left: 1px solid var(--t-border);
  padding: var(--t-s4); text-align: center; }
.v2-logos > div:first-child { border-left: 0; }
.v2-logos__cap { text-align: center; margin: 0 0 var(--t-s4); }

/* ── sectiekop: h2 links, intro rechts ── */
.v2-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--t-s6) var(--t-s8); align-items: end;
  margin-bottom: var(--t-s7); }
.v2-head .v2-sub { justify-self: end; }

/* ── stemmen: hairline-kolommen, geen dozen ── */
.v2-voices { display: grid; grid-template-columns: repeat(3, 1fr); }
.v2-voices > div { padding: var(--t-s6); border-left: 1px solid var(--t-border);
  display: flex; flex-direction: column; gap: var(--t-s3); }
.v2-voices > div:first-child { border-left: 0; padding-left: 0; }
.v2-voices blockquote { margin: 0; font-family: var(--t-display);
  font-size: clamp(19px, 1vw + 12px, 24px);
  line-height: 1.3; letter-spacing: -0.01em; }
.v2-voices p { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--t-ink2); }

/* ── de rondleiding ──────────────────────────────────────────────
   Intro scrolt gewoon weg. Daarna staat de etalage een volle viewport
   lang vast: links de toelichting, rechts het scherm. Zes stappen, elk
   ~90vh scroll. De stap volgt uit de voortgang door de scroller — zie
   tisserTourStep() in site.js. */
/* De band eromheen geeft al 128px boven. Samen was dat 256 boven en 128 onder;
   nu 180 (-30%) en 76 (-40%). */
.v2-tour__intro { display: flex; flex-direction: column; gap: var(--t-s5);
  padding-block: calc(var(--t-s7) + var(--t-s1))
                 calc(var(--t-s7) + var(--t-s5) + var(--t-s1)); }
.v2-tour__intro .v2-display { max-width: 18em; }
.v2-tour__intro .v2-sub { max-width: 32em; }

:root { --v2-tour-step: 90vh; }
.v2-tour__scroller { position: relative;
  height: calc(100vh + 6 * var(--v2-tour-step)); }
.v2-tour__sticky { position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center;
  padding-inline: var(--v2-margin); }
.v2-tour__grid { width: 100%; max-width: 1560px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(var(--t-s6), 4vw, var(--t-s8)); align-items: center; }

/* links: de toelichting wisselt, de rail zegt waar je bent */
.v2-tour__copy { display: flex; flex-direction: column; gap: var(--t-s5); }
/* vaste hoogte, anders verspringt de rail bij elke wissel. 15em dekt de
   langste toelichting op de grootste koptrap (gemeten 208px bij 1440) */
.v2-tour__stage { position: relative; min-height: 15.5em; }
.v2-tour__stage:empty { display: none; }
/* De tekst rijdt dezelfde kant op als de schermen: wat geweest is vertrekt naar
   boven, wat komt schuift van onderen in. Zonder dat kwam alles van beneden en
   voelde het los van de band. */
.v2-tour__cap { position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(var(--t-s5));
  transition: opacity 0.5s var(--v2-ease), transform 0.6s var(--v2-ease);
  pointer-events: none; }
.v2-tour__cap.is-past { transform: translateY(calc(var(--t-s5) * -1)); }
.v2-tour__cap.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* de regelval staat als <br> in de opmaak, dus geen text-wrap: balance —
   die twee vechten om dezelfde beslissing */
.v2-tour__cap h3 { margin: 0 0 var(--t-s4); font-family: var(--t-display);
  font-weight: 400; font-size: clamp(var(--t-display-sm), 2.3vw + 7px, var(--t-display-xl));
  line-height: 1.12; letter-spacing: -0.02em; color: var(--t-ink); }
.v2-tour__cap p { margin: 0; font-size: var(--t-body-lg); line-height: 1.6;
  color: var(--t-ink2); }

/* De rail in Signifier: een inhoudsopgave, geen labelrij. Elk label staat op
   twee regels, elke regel in een eigen span — zo kan de butter-markering per
   regel doorlopen, net als in het hoofdmenu.
   De li houdt een vaste hoogte aan die past bij de áctieve (grotere) maat,
   anders duwt het oplichtende item de rest omlaag bij elke wissel. */
.v2-tour__rail { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; --v2-rail: var(--t-display-sm); }
.v2-tour__rail li { position: relative;
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  align-items: center; gap: var(--t-s4);
  min-height: calc(var(--v2-rail) * 1.25 * 1.16 + var(--t-s5));
  font-family: var(--t-display); font-weight: 400;
  font-size: var(--v2-rail); line-height: 1.16;
  color: var(--t-ink2);
  transition: color 0.45s var(--v2-ease), font-size 0.45s var(--v2-ease); }

/* het icoon groeit en wordt cobalt; de tekst wordt juist inkt, niet cobalt —
   anders vechten letter en teken om dezelfde nadruk */
.v2-tour__ico { width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--t-ink2); transform-origin: left center;
  transition: color 0.45s var(--v2-ease), transform 0.45s var(--v2-ease); }
.v2-tour__rail li.is-active .v2-tour__ico { color: var(--t-cobalt-700);
  transform: scale(1.3); }

/* de markering trekt van links naar rechts */
.v2-tour__rail li span { display: block; width: fit-content;
  background-image: linear-gradient(to top, transparent 0.22em,
    var(--t-butter-100) 0.22em 1.02em, transparent 1.02em);
  background-repeat: no-repeat; background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.55s var(--v2-ease); }
.v2-tour__rail li.is-active span { background-size: 100% 100%; }

.v2-tour__rail li.is-active { color: var(--t-ink);
  font-size: calc(var(--v2-rail) * 1.25); }
@media (prefers-reduced-motion: reduce) {
  .v2-tour__rail li, .v2-tour__rail li span, .v2-tour__ico {
    transition: none; }
}

/* De kolom moet binnen de vastgezette viewport blijven. Met twee regels per
   rij is de rail 420px; op een laag scherm past dat niet naast de toelichting,
   en dan snijdt de etalage boven en onder wat af. Vandaar op hoogte meeschalen. */
@media (max-height: 800px) {
  .v2-tour__rail { --v2-rail: var(--t-display-xs); }
  .v2-tour__copy { gap: var(--t-s6); }
}
@media (max-height: 690px) {
  .v2-tour__rail { --v2-rail: var(--t-body-lg); }
  .v2-tour__copy { gap: var(--t-s5); }
  .v2-tour__cap h3 { font-size: var(--t-display-sm); }
  .v2-tour__stage { min-height: 12.8em; }
}

/* rechts: één venster, alle schermen even groot, kruislings gewisseld */
/* De breedte is de enige maat die we zetten; de hoogte volgt uit de verhouding.
   Zet je in plaats daarvan een max-height, dan klemt die de hoogte terwijl de
   breedte blijft staan — de verhouding klopt dan niet meer en object-fit laat
   een witte strook achter. Vandaar de hoogtegrens omgerekend naar breedte. */
/* De schermen lopen als een band door een venster ter hoogte van de viewport:
   het actieve scherm hangt stil in het midden en rijdt daarna naar boven weg
   terwijl het volgende van onderen binnenkomt. De verschuiving zet site.js per
   scrollstand; hieronder staat alleen de ruststand (voor het geval JS uitvalt). */
/* Boven- en onderrand vervagen in plaats van hard afsnijden: anders knipt
   overflow de slagschaduw doormidden en zie je een harde lijn meelopen. */
.v2-tour__screens { position: relative; height: 100vh; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0,
    black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0,
    black 7%, black 93%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.v2-tour__screens .v2-frame { position: absolute; top: 50%; left: 0; right: 0;
  margin-inline: auto;
  width: min(calc(100% - var(--t-s4)), calc(72vh * 1600 / 1003));
  aspect-ratio: 1600 / 1004;
  /* op dit formaat is e3 te zwaar; e2 houdt het scherm los van de achtergrond
     zonder de rand te benadrukken */
  box-shadow: var(--t-e2);
  transform: translateY(calc(-50% + 100vh)); will-change: transform; }
.v2-tour__screens .v2-frame.is-current { transform: translateY(-50%); }
.v2-frame__win { position: absolute; inset: var(--t-s1); overflow: hidden;
  border-radius: calc(var(--t-r-panel) - var(--t-s1)); background: var(--t-surface); }
/* de witrand gaat van beide maten af, dus het venster is een haar breder van
   verhouding dan het beeld. Vullen (≈3px eraf) in plaats van passen — passen
   zou een witte strook overlaten en die valt wél op. */
.v2-frame__win img { display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; }

@media (prefers-reduced-motion: reduce) {
  .v2-tour__cap { transition: none; }
}

/* smal: geen vastzetten. Elke toelichting staat boven zijn eigen scherm. */
@media (max-width: 1024px) {
  .v2-tour__intro { max-width: none; padding-block: var(--v2-section); }
  .v2-tour__scroller { height: auto; }
  .v2-tour__sticky { position: static; height: auto; padding-inline: 0;
    display: block; padding-bottom: var(--v2-section); }
  .v2-tour__grid { grid-template-columns: minmax(0, 1fr); gap: 0;
    padding-inline: var(--v2-margin); }
  .v2-tour__rail { display: none; }
  .v2-tour__stage { min-height: 0; }
  .v2-tour__cap { position: static; opacity: 1; transform: none;
    pointer-events: auto; margin-bottom: var(--t-s5); }
  .v2-tour__screens { height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
    display: flex; flex-direction: column; gap: var(--t-s7); }
  /* width: auto werkt hier niet. Het venster in de lijst staat absoluut,
     dus het kader heeft geen inhoud in de stroom: zijn hoogte werd 10px
     (alleen rand en voering) en de aspect-ratio rekende daar een breedte
     van 16px bij. En met position: static ankerde het venster zich aan de
     hele lijst in plaats van aan zijn eigen kader, waardoor het beeld als
     reuzenstrook over de tekst heen viel. Vandaar relative plus een vaste
     breedte: dan rekent de ratio de goede kant op en blijft het venster
     binnen zijn kader. */
  .v2-tour__screens .v2-frame { position: relative; inset: auto;
    width: 100%; height: auto;
    transform: none; will-change: auto; aspect-ratio: 1600 / 1004; }
  /* .is-current draagt op desktop een translateY(-50%) om het kader in de
     etalage te centreren. Dat won hier van de reset hierboven en trok het
     eerste kader 105px omhoog, over de laatste regel van zijn tekst heen. */
  .v2-tour__screens .v2-frame.is-current { transform: none; }
}

/* ── de vloer: cobalt-deep band ── */
/* band, geen sectie met marges: met margin-block viel de canvaskleur van de
   body ertussen en zag je een grijze strook tussen wit en cobalt */

/* ── cijfers: hairline-rij ── */
.v2-nums { display: grid; grid-template-columns: repeat(3, 1fr); }
.v2-nums > div { padding: var(--t-s6); border-left: 1px solid var(--t-border); }
.v2-nums > div:first-child { border-left: 0; padding-left: 0; }
.v2-nums b { display: block; font-family: var(--t-display); font-weight: 400;
  font-size: clamp(44px, 3vw + 20px, 64px); line-height: 1;
  letter-spacing: -0.02em; margin-bottom: var(--t-s2); }
.v2-nums p { margin: 0; }

/* ── klantenticker ───────────────────────────────────────────────────
   Zelfde rekensom als .sec-loop hierboven: de tussenruimte zit áán het
   logo (margin-right), niet als gap op de rij. Met 12 logo's zitten er
   anders 11 tussenruimtes en is 50% van de baan niet precies één reeks,
   waardoor de lus elke ronde een stukje verspringt.

   De reeks staat twee keer in de dom. De tweede is aria-hidden: een
   schermlezer hoort de namen één keer, via het aria-label op de band. */
.v2-ticker { position: relative; overflow: hidden; margin-top: var(--t-s5);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%); }
.v2-ticker__track { display: flex; align-items: center; width: max-content;
  /* Duur hoort bij de baanlengte: meer ruimte tussen de logo's maakt de
     reeks langer, dus bij dezelfde duur zou hij juist sneller gaan. Met
     160px logo + 96px ruimte is één reeks 3072px; 90s geeft ~34 px/s,
     rustig genoeg om een logo te laten landen. */
  animation: v2-ticker-run 90s linear infinite; will-change: transform; }
@keyframes v2-ticker-run { from { transform: translateX(0); }
                           to   { transform: translateX(-50%); } }
/* Vaste box + contain, want de logo's lopen van 1:1 (The Family) tot
   10,5:1 (AND Agency). Op alleen een vaste hoogte rendert dat woordmerk
   optisch vier keer kleiner dan een vierkant merk. Zo vult een breed
   woordmerk de breedte, een vierkant merk de hoogte, en wegen ze
   onderling ongeveer even zwaar. De ingebakken witruimte is uit de
   bestanden geknipt; zonder dat trimmen klopt deze berekening niet. */
.v2-ticker__i { height: 60px; width: 160px; object-fit: contain;
  display: block; flex: none; margin-right: calc(var(--t-s8) + var(--t-s6));
  opacity: 0.78; transform: scale(var(--v2-logo-scale, 1)); }
/* Optische correctie. object-fit egaliseert het kader, niet de visuele
   massa: een vet, dicht woordmerk (Tony's, Basic-Fit) vult zijn kader
   veel voller dan een luchtig logo en oogt daardoor groter bij dezelfde
   maat. De schaal zit op een transform, niet op de maat, zodat het kader
   en dus het ritme van de rij gelijk blijft. Per logo instelbaar via
   --v2-logo-scale in de markup. */
@media (max-width: 700px) {
  .v2-ticker__i { height: 44px; width: 116px; margin-right: var(--t-s7); }
  /* Kortere baan op een telefoon (12 × 164px), dus een kortere duur om
     dezelfde gevoelde snelheid te houden. */
  .v2-ticker__track { animation-duration: 58s; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-ticker__track { animation: none; }
}

/* ── faq ── */
/* Band, geen sectie met marges: een marge kan geen achtergrond dragen, dus
   het witte vlak zou naast de tekst wegvallen. De canvaskleur ernaast doet
   het scheiden. */
.v2-faqband { background: var(--t-surface); margin-block: 0;
  padding-block: var(--v2-section-lg); }
.v2-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--t-s8); align-items: start; }
.v2-faq__list { display: flex; flex-direction: column; }
.v2-faq details { border-top: 1px solid var(--t-border); }
.v2-faq details:last-child { border-bottom: 1px solid var(--t-border); }
.v2-faq summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; gap: var(--t-s4);
  padding: var(--t-s5) 0; font-size: var(--t-body-lg); font-weight: 600;
  /* Cobalt-700 is de teksttint van het merk (zelfde als de eyebrows, de
     cijfers en de hulp-iconen) en kantelt mee in donkere modus. Het
     plusje blijft bewust --t-ink2: één accent per rij, anders vecht de
     marker met de vraag om aandacht. */
  color: var(--t-cobalt-700); }
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: "+"; font-family: var(--t-display);
  font-size: 24px; color: var(--t-ink2); transition: transform 0.4s var(--v2-ease); }
.v2-faq details[open] summary::after { transform: rotate(45deg); }
.v2-faq details p { margin: 0 0 var(--t-s5); color: var(--t-ink2);
  line-height: 1.5; max-width: 44em; }

/* ── slot ── */
.v2-close { text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: var(--t-s5); }
.v2-close .v2-sub { max-width: 36em; }

/* ── footer ─────────────────────────────────────────────────────
   Wit vlak, beeldmerk links met het adres eronder. Elke kolom krijgt een
   streep erboven — dezelfde volgorde als de stappenbalk: twee butter, dan
   cobalt, dan grijs. Ze markeren de kolommen zonder een kader te trekken. */
.v2-foot { background: var(--t-surface); border-top: 1px solid var(--t-border);
  padding-block: var(--t-s8); margin-top: 0; }
.v2-foot__cols { display: grid;
  grid-template-columns: 2fr repeat(4, 1fr); gap: var(--t-s6); }
.v2-foot__brand { display: flex; flex-direction: column; gap: var(--t-s5); }
.v2-foot__mark { display: block; width: 112px; height: 112px; }
.v2-foot__adr { font-style: normal; font-size: var(--t-body);
  line-height: 1.6; color: var(--t-ink2); }
.v2-foot__col { padding-top: var(--t-s4); border-top: 2px solid var(--t-border); }
.v2-foot__col:nth-of-type(2) { border-top-color: var(--t-butter-100); }
.v2-foot__col:nth-of-type(3) { border-top-color: var(--t-butter-100); }
.v2-foot__col:nth-of-type(4) { border-top-color: var(--t-cta); }
.v2-foot h4 { margin: 0 0 var(--t-s3); font-size: var(--t-body); font-weight: 600; }
.v2-foot ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--t-s2); }
.v2-foot a { text-decoration: none; color: var(--t-ink2); font-size: var(--t-body);
  transition: color 0.24s var(--v2-ease); }
.v2-foot a:hover { color: var(--t-ink); }
/* Eén regel: copyright uiterst links, de juridische links uiterst rechts.
   De copyrightzin mag zelf afbreken (flex: 1 1 auto + min-width: 0) zodat hij
   de links nooit naar een tweede regel duwt. Pas onder 640px stapelen ze. */
.v2-foot__base { margin-top: calc(var(--t-s8) * 2 + var(--t-s5)); display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline;
  gap: var(--t-s3) var(--t-s6); }
.v2-foot__legal { flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: var(--t-caption); color: var(--t-ink2); }
/* wint bewust van '.v2-foot ul' (kolom) en '.v2-foot a' (body-grootte):
   die zijn specifieker dan een losse klasse, dus staat de klasse hier
   met het type erbij. Zonder dit stapelen de links verticaal. */
.v2-foot ul.v2-foot__legalnav { list-style: none; margin: 0; padding: 0;
  flex: 0 0 auto; margin-left: auto;
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: var(--t-s2) var(--t-s5); }
.v2-foot .v2-foot__legalnav a,
.v2-foot .v2-foot__legalnav .v2-foot__cookies { font-size: var(--t-caption); }
.v2-foot__cookies { background: none; border: 0; padding: 0; font: inherit;
  color: var(--t-ink2); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; transition: color 0.24s var(--v2-ease); }
.v2-foot__cookies:hover { color: var(--t-ink); }

/* ── sectieritme ── */
.v2-sec { margin-block: var(--v2-section); }
.v2-sec--lg { margin-block: var(--v2-section-lg); }

/* ── responsive ── */
@media (max-width: 1024px) {
  .v2-hero__grid, .v2-story, .v2-faq { grid-template-columns: minmax(0, 1fr); }
  /* één kolom betekent niet één smalle kolom: de kop mag hier de volle
     breedte pakken. De lopende tekst niet — die houdt de 30em van .v2-sub,
     goed voor zo'n 65 tekens per regel. Met 62ch liep hij op de tussenmaat
     naar 83 tekens, ruim boven wat prettig leest. */
  .v2-hero__copy { max-width: none; }

  /* ── maatvoering op de smalle tiers ──────────────────────────────
     De grote kop stond op 375 nog op 40px: even groot als op een tablet,
     want de clamp bodemde daar al uit. Onder 1025px een eigen curve:
     34px op de telefoon, 40px op de tussenmaat, vloeiend ertussen.
     De lopende tekst blijft overal 16px — dat is de ondergrens voor
     comfortabel lezen, en onder 16px zoomt iOS bovendien in op velden. */
  .v2-display { font-size: clamp(34px, 1.6vw + 28px, 40px); }
  /* De hero-kop volgt hieronder de gewone mobiele maat: op een smal scherm
     is hij al niet dominant, en 70% dáárvan wordt te klein om te dragen. */
  .v2-hero__copy .v2-display { font-size: clamp(34px, 1.6vw + 28px, 40px); }

  /* Knoppen zijn op deze schermen 56px hoog met 32px zijruimte: een
     desktopmaat op een telefoon. 48px blijft ruim boven het minimum van
     44px dat Apple aanhoudt (Android houdt 48px aan), en het label blijft
     16px — kleiner maakt een knop niet netter, alleen slechter leesbaar. */
  .v2-btn, .sec-cta .t-btn { min-height: 48px; padding-inline: var(--t-s5); }

  .v2-story__copy { position: static; }
  .v2-cinema { margin-right: 0; }
  .v2-cinema::after { display: none; }
  .v2-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .v2-head .v2-sub { justify-self: start; }
}
/* De tussenmaat draagt het volle menu niet: op 768 wikkelde het over twee
   regels en viel het over de knop heen. Vanaf hier dus de hamburger — op de
   telefoon en op de tablet dezelfde balk.

   Het menu is hier geen regel in de balk maar een paneel eronder. Dat is niet
   alleen netter: zolang de lijst in de balk meeliep, groeide de balk mee bij
   het openen en sprongen merk, knop en kruis met een ruk omhoog. Een paneel
   dat los onder de balk hangt laat de balk staan waar hij staat. */
@media (max-width: 1024px) {
  .v2-nav__burger { display: inline-flex; }
  .v2-nav { gap: var(--t-s3); }

  .v2-nav__links { position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    background: var(--t-surface);
    /* Geen streep boven of onder: die knipt het paneel los van de balk en
       plakt het aan de pagina. Een contactschaduw plus een zachte val
       eronder legt het er juist overheen. */
    box-shadow: var(--t-e1), var(--t-e3);
    padding-block: var(--t-s4) var(--t-s5);
    max-height: calc(100svh - 76px); overflow-y: auto;
    /* uitschuiven naar beneden: het paneel wordt van boven naar onder
       vrijgegeven, het schuift niet als geheel het beeld in */
    clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
    /* Dichtgaan is opengaan achterstevoren: eerst laten de items los, dan
       vouwt het paneel van onder naar boven weer dicht. Die vouw duurt
       langer dan het openen en de dekking zakt pas op het eind — anders is
       het voorbij voor je het gezien hebt. */
    /* Niet --v2-ease op de weg terug: die zet 60% van de vouw in de eerste
       150ms en kruipt daarna. Een gelijkmatige curve laat je de beweging
       echt volgen. */
    transition: clip-path 0.62s cubic-bezier(0.45, 0, 0.35, 1) 0.14s,
      opacity 0.34s var(--v2-ease) 0.42s,
      background-color 0.5s var(--v2-ease),
      visibility 0s linear 0.76s; }
  .v2-nav.is-open .v2-nav__links { clip-path: inset(0 0 0 0); opacity: 1;
    visibility: visible; background: var(--t-butter-50);
    transition-delay: 0s, 0s, 0s, 0s; }

  /* De hoofditems staan gecentreerd, met tussen elk paar een haarlijn die
     niet doorloopt tot de rand: een streep van rand tot rand deelt het
     paneel op, een korte streep hoort bij de lijst. */
  .v2-nav__links > li { position: relative; text-align: center; }
  .v2-nav__links > li + li::before { content: ''; position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 60%; height: 1px; background: var(--t-border); }
  .v2-nav__links > li > a, .v2-nav__top { position: relative; display: flex;
    width: 100%; justify-content: center; align-items: center; gap: var(--t-s2);
    padding: var(--t-s5) var(--v2-margin); background-image: none;
    font-size: clamp(20px, 6vw, 22px); color: var(--t-ink); }

  /* Het pijltje hangt niet aan het woord maar aan de streep: zijn
     rechterkant valt samen met het rechteruiteinde van de haarlijn, die op
     60% breedte staat en dus op 80% eindigt. */
  .v2-nav__caret { display: block; position: absolute; right: 20%;
    top: 50%; margin: 0;
    border-color: var(--t-cobalt-deep);
    transform: translateY(-50%) rotate(45deg) translate(-2px, -2px); }
  .v2-nav__top[aria-expanded="true"] .v2-nav__caret {
    transform: translateY(-50%) rotate(-135deg) translate(-3px, -3px); }

  /* De subitems staan op hetzelfde wit; het onderscheid zit in maat en
     kleur, niet in een tweede vlak. */
  .v2-nav__sub { position: static; display: none; transform: none;
    opacity: 1; visibility: visible; min-width: 0;
    border: 0; box-shadow: none; border-radius: 0;
    background: none; padding: 0 0 var(--t-s5); }
  .v2-nav__top[aria-expanded="true"] + .v2-nav__sub { display: block; }
  .v2-nav__sub a { justify-content: center; text-align: center;
    padding: var(--t-s3) var(--v2-margin); font-size: var(--t-body-lg);
    color: var(--t-ink2); }

  /* de items komen er los in: kort, met een korrel onscherpte ervoor */
  .v2-nav__links > li { opacity: 0; transform: translateY(-6px); filter: blur(6px);
    transition: opacity 0.22s var(--v2-ease), transform 0.22s var(--v2-ease),
      filter 0.22s var(--v2-ease); }
  .v2-nav.is-open .v2-nav__links > li { opacity: 1; transform: none; filter: none; }
  .v2-nav.is-open .v2-nav__links > li:nth-child(1) { transition-delay: 0.10s; }
  .v2-nav.is-open .v2-nav__links > li:nth-child(2) { transition-delay: 0.135s; }
  .v2-nav.is-open .v2-nav__links > li:nth-child(3) { transition-delay: 0.17s; }
  .v2-nav.is-open .v2-nav__links > li:nth-child(4) { transition-delay: 0.205s; }
  .v2-nav.is-open .v2-nav__links > li:nth-child(5) { transition-delay: 0.24s; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .v2-nav__links, .v2-nav__links > li { transition: none; }
  .v2-nav__links > li { filter: none; transform: none; }
}
@media (max-width: 700px) {
  :root { --v2-margin: 20px; --v2-section: var(--t-s8); --v2-section-lg: var(--t-s8); }
  .v2-nav .v2-btn { min-height: 36px; padding-inline: var(--t-s4);
    font-size: var(--t-caption); }
  .v2-voices { grid-template-columns: minmax(0, 1fr); }
  .v2-voices > div { border-left: 0; padding-inline: 0;
    border-top: 1px solid var(--t-border); }
  .v2-voices > div:first-child { border-top: 0; }
  .v2-nums { grid-template-columns: minmax(0, 1fr); }
  .v2-nums > div { border-left: 0; padding-inline: 0;
    border-top: 1px solid var(--t-border); }
  .v2-nums > div:first-child { border-top: 0; }
  .v2-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-foot__cols > div:first-child { grid-column: 1 / -1; }
  /* Onder 700px breekt de copyrightzin over twee regels en zakken de links
     eronder. Rechts uitlijnen oogt dan scheef, dus daar staan ze links. */
  .v2-foot ul.v2-foot__legalnav { margin-left: 0; }
  .v2-logos { grid-template-columns: repeat(2, 1fr); }
  .v2-logos > div:nth-child(3) { border-left: 0; }
  .v2-logos > div:nth-child(n+3) { border-top: 1px solid var(--t-border); }
}

/* ── ask-ai balk (GEO: de definitie-vraag voorgebakken) ── */
.v2-askai { position: sticky; bottom: 0; z-index: 90;
  background: var(--t-ink); color: var(--t-surface);
  border-top: 1px solid var(--t-ink);
  transition: transform 0.4s var(--v2-ease); }
.v2-askai.is-hidden { transform: translateY(100%); }
.v2-askai__row { display: flex; align-items: center; gap: var(--t-s5);
  min-height: 48px; }
.v2-askai__label { margin: 0; font-size: var(--t-caption); font-weight: 600; }
.v2-askai__links { display: flex; gap: var(--t-s4); }
.v2-askai__links a { font-size: var(--t-caption); color: var(--t-surface);
  text-decoration: none; transition: color 0.24s var(--v2-ease); }
.v2-askai__links a:hover { opacity: 0.75; }
.v2-askai__close { margin-left: auto; background: none; border: 0;
  font-size: var(--t-body-lg); color: var(--t-surface); cursor: pointer;
  min-width: 40px; min-height: 40px; }
@media (max-width: 700px) { .v2-askai__label { display: none; } }

/* ── hero met fotografische achtergrond (full-bleed) ── */
.v2-hero--photo { position: relative; overflow: visible; }
.v2-hero__mobile-img { display: none; width: 100%; height: auto; }
@media (min-width: 1025px) {
  .v2-hero--photo {
    /* het beeld is 284px breder dan de hero; op 40% schuift het 114px naar
       links. Verder kan niet: vanaf 50% snijdt de schuine stoelrand het
       tekstvak in en zakt ink2 daar onder 4,5:1 (gemeten). */
    background-size: cover; background-position: 40% center;
    /* dvh, niet vh: op mobiel krimpt de balk van de browser weg en met vh
       zou de hero dan een stuk hoger zijn dan het zichtbare scherm */
    min-height: 100dvh;
    display: flex; align-items: center;
  }
  .v2-hero--photo .v2-wrap { width: 100%;
    padding-top: calc(var(--t-s7) + var(--t-s5) + var(--t-s6));
    padding-bottom: var(--t-s7);
  }
  .v2-hero--photo .v2-hero__copy { max-width: clamp(400px, 36vw, 560px); }
}
@media (max-width: 1024px) {
  .v2-hero--photo { padding-bottom: 0; background-image: none !important; }
  .v2-hero__mobile-img { display: block; margin-top: var(--t-s6); }
}

/* ── witte band met beeld links / content rechts ── */
.v2-white { background: var(--t-surface); margin-block: 0;
  padding-block: var(--v2-section-lg); }
.v2-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--t-s8); align-items: start; }
.v2-photo { margin: 0; border-radius: var(--t-r-panel); overflow: hidden; }
.v2-photo img { display: block; width: 100%; height: auto; }
/* deze kop op ~75%: 39,9 -> 29,4px bij 1440. Alleen hier, want .v2-h2
   draagt ook de vier andere sectiekoppen. */
.v2-split__body > .v2-h2 {
  font-size: clamp(var(--t-display-xs), 1.35vw + 10px, var(--t-display-md)); }
.v2-split__body > .v2-sub { margin-top: var(--t-s4); }
.v2-voices--stack { grid-template-columns: minmax(0, 1fr); margin-top: var(--t-s6); }
.v2-voices--stack .v2-eyebrow { color: var(--t-cobalt-700); }
.v2-voices--stack > div { border-left: 0; padding: var(--t-s5) 0;
  border-top: 1px solid var(--t-border); }
.v2-voices--stack > div:first-child { border-top: 1px solid var(--t-border); padding-left: 0; }
@media (max-width: 1024px) {
  .v2-split { grid-template-columns: minmax(0, 1fr); }
}

/* ── banden: wit (logo's) en textuur (de rondleiding) ── */
.v2-whiteband { background: var(--t-surface); margin-block: 0;
  padding-block: var(--v2-section); }
/* band, geen sectie met marges: met margin-block valt de vulling binnen de
   marge weg en hangt de kleur strak om de tekst in plaats van door te lopen */
.v2-butterband { background: var(--t-butter-50); margin-block: 0;
  padding-block: var(--v2-section-lg); }

/* Textuurband. De url staat inline op de sectie, niet hier: de checker leest
   een .jpg in een <style>-blok als klassenaam en struikelt erover.
   `fixed` schaalt de textuur op de viewport in plaats van op de sectie — die
   is hier 6+ schermen hoog, dus met `scroll` zou hij 3,5x uitgerekt worden. */
.v2-texband { margin-block: 0; padding-block: var(--v2-section-lg);
  background-color: var(--t-surface);
  background-size: cover; background-position: center;
  background-repeat: no-repeat; background-attachment: fixed; }
/* smal (en op iOS, waar fixed toch niet werkt): meeschuiven én tegelen.
   Met `cover` moest een beeld van 1920x1076 een sectie van 375 breed en 3355
   hoog vullen: het werd dan 3,1x uitgerekt en de fijne striemen werden brede
   banen. Op ware grootte herhalen houdt de korrel even fijn als op desktop
   (dat toont hem op 0,84x). De naden vallen niet op: de textuur heeft een
   spreiding van 5 op 255 en de randen schelen 5 tot 6 niveaus. */
@media (max-width: 1024px) {
  .v2-texband { background-attachment: scroll;
    background-size: auto; background-repeat: repeat; }
}
/* De rondleiding draagt twee uitsneden, allebei als variabele op de sectie
   zelf gezet (zie de html). Hier alleen de keuze ertussen. */
.v2-tour { background-image: var(--v2-tex, none); }
/* Op een telefoon de staande uitsnede (1080x1920) in plaats van het liggende
   beeld: die past bij de vorm van de sectie in plaats van er dwars op te
   staan. Verticaal naadloos gemaakt — boven- en onderrand schelen 0,3 van de
   255 niveaus — dus hij mag gewoon herhalen, één schermhoogte per tegel. */
@media (max-width: 700px) {
  .v2-tour { background-image: var(--v2-tex-mob, none);
    background-size: 100% auto; background-repeat: repeat-y; }
}

/* band, geen sectie met marges: anders valt de witte vulling binnen de marge weg.
   Vult het scherm en zet zijn inhoud in het midden; zakt terug naar gewone
   hoogte zodra de tegels stapelen en 100vh te krap wordt. */
.v2-trioband { background: var(--t-surface); margin-block: 0;
  padding-block: var(--v2-section-lg);
  min-height: 100vh; display: flex; align-items: center; }
.v2-trioband > .v2-wrap { width: 100%; }
@media (max-width: 860px) { .v2-trioband { min-height: 0; display: block; } }

/* ── drie kolommen met beeldtegel — bibliotheek §14 ──────────────
   Regels overgenomen uit site-library.src.html, niet nagebouwd.
   De tegel is de illustratie; kop en tekst staan eronder, búiten het
   vlak. Alleen sec-src is nieuw: het bronregeltje in de derde tegel. */
/* Eigen maat, iets boven de gewone h2: deze kop draagt de sectie. */
.sec-trio__h { max-width: 34ch; margin: 0 0 var(--t-s7);
  font-size: clamp(30px, 2.1vw + 16px, 50px); }

.v2-trioband { position: relative; }
.sec-trio__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--t-s5); }
.sec-trio__tile { background: var(--t-butter-50); border-radius: var(--t-r-card);
  height: 260px; overflow: hidden; display: flex; align-items: center;
  justify-content: center; padding: var(--t-s4); position: relative; }
.sec-trio__h3 { font-size: var(--t-body-lg); font-weight: 600;
  margin: var(--t-s5) 0 var(--t-s2); }
.sec-trio__p { color: var(--t-ink2); font-size: var(--t-body);
  line-height: var(--t-body-lh); margin: 0; max-width: 38ch; }
/* kaart en inhoud op ~140% van de bibliotheekmaat */
.sec-mini { background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-r-card); box-shadow: var(--t-e2); padding: var(--t-s5);
  width: 100%; max-width: 348px; }
.sec-mini__t { font-size: var(--t-body); color: var(--t-ink2);
  margin: 0 0 var(--t-s3); }
.sec-mini__b { font-family: var(--t-display); font-size: var(--t-display-sm);
  line-height: 1.35; margin: 0; }
/* ── tegels ── */
/* 1 · marmer. Het beeld is de vulling; de url staat inline op het element,
   want de checker leest een .jpg in een <style>-blok als klassenaam. */
.sec-trio__tile--marble, .sec-trio__tile--photo { background-color: var(--t-surface);
  background-size: cover; background-position: center; }

/* 2 · de modellen lopen eindeloos door. De band bevat de reeks twee keer, dus
   een verschuiving van precies 50% valt naadloos samen met het begin. */
.sec-loop { position: absolute; inset: 0; display: flex; align-items: center;
  overflow: hidden; }
/* Geen `gap` en geen padding op de band: bij 14 chips zitten er 13 tussen-
   ruimtes, dus 50% van de bandbreedte is niet precies één reeks en springt de
   lus elke ronde een stukje. Met de ruimte áán de chip is elke chip even breed
   en klopt 50% wél exact. */
.sec-loop__track { display: flex; align-items: center;
  width: max-content;
  animation: sec-loop-run 30s linear infinite; will-change: transform; }
@keyframes sec-loop-run { from { transform: translateX(0); }
                          to   { transform: translateX(-50%); } }
.sec-loop__d { width: 84px; height: 84px; margin-right: var(--t-s6);
  border-radius: var(--t-r-panel);
  flex: none; background: var(--t-surface); border: 1px solid var(--t-border);
  box-shadow: var(--t-e2); display: flex; align-items: center;
  justify-content: center; color: var(--t-ink); }
/* de merklogo's zijn losse svg-bestanden, niet inline: hun merkkleuren
   kunnen geen token worden en horen dus niet in de opmaak die de checker
   leest. Als asset blijven ze bovendien cachebaar. */
.sec-loop__i { width: 36px; height: 36px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .sec-loop__track { animation: none; }
}

/* 3 · cobalt-deep: het enige vlak dat niet met het thema meedraait, dus hier
   mag de vaste witte inkt weer gebruikt worden. */
.sec-trio__tile--cobalt { background: var(--t-cobalt-deep); }

/* zegels: vier ronde keurmerken, lijnwerk in de merktaal.
   Als HTML-cirkels, niet als svg-tekst — dan pakken ze de echte letters mee
   en schalen ze met de typeschaal. surface op ink haalt 17,4:1. */
/* Vast 2x2, geen rij van vier: vier cirkels van 84 plus tussenruimte vragen
   372px en de tegel biedt er 365 op 1440 — en nog minder daaronder. Een rij
   zou dus afgesneden worden. Een blok van twee bij twee past op elke breedte. */
.sec-seals { display: grid; grid-template-columns: repeat(2, auto);
  gap: var(--t-s3); justify-content: center; align-content: center;
  width: 100%; }
.sec-seal { flex: none; width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid var(--t-on-cobalt-deep);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  color: var(--t-on-cobalt-deep);
  font-family: var(--t-label); font-size: var(--t-caption); line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase; }
.sec-seal b { font-size: var(--t-body); font-weight: 600;
  letter-spacing: 0.02em; }
@media (max-width: 860px) {
  .sec-seals { gap: var(--t-s4); }
}

@media (max-width: 860px) {
  .sec-trio__row { grid-template-columns: minmax(0, 1fr); }
  /* Eén kolom betekende een vaste 200px over de volle breedte: op een
     telefoon werd de tegel daarmee 1,68 breed tegen hoog en op een tablet
     zelfs 3,6 — terwijl hij op desktop 389x260 is, oftewel 3:2. De inhoud
     (de marmerplaat, de modellenrij, de zegels) is op die verhouding
     gezet, dus die houden we aan en laat de hoogte meerekenen. */
  .sec-trio__tile { height: auto; aspect-ratio: 3 / 2; }
}

/* ── nachtdienst — volle-breedte beeld, tekst links ─────────────
   De linkerhelft van het beeld is bijna zwart (wit haalt er 20,2:1, geen
   enkele pixel onder 4,5), dus de tekst kan er kaal op. Geen sluier: §4.2
   verbiedt een scrim om tekst leesbaar te maken.
   --t-on-cobalt-deep is de enige vaste witte inkt in de laag: hij draait
   bewust niet met het thema mee, en dat is precies wat een altijd-donker
   beeldvlak nodig heeft. */
.v2-night { display: flex; align-items: center; margin-block: 0;
  min-height: clamp(560px, 64vh, 840px);
  background-color: var(--t-ink);
  background-size: cover; background-position: center right;
  background-repeat: no-repeat; }
.v2-night .v2-wrap { width: 100%; }
.v2-night__copy { display: flex; flex-direction: column; gap: var(--t-s5);
  max-width: 34em; }
/* Signifier heeft alleen 400 — dit is dus al regular. Omgekeerd op zwart wint
   een letter ~13% inkt door halatie; antialiased haalt daar het meeste van weg
   en de laatste procenten haalt de dekking eraf. Lichter dan dit kan niet
   zonder een Light-snede in het pakket. */
.v2-night__h { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: clamp(var(--t-display-md), 2.6vw + 14px, 56px);
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--t-on-cobalt-deep); opacity: 0.93; }
/* lopende tekst in Public Sans, zoals overal op de pagina — de display-snede
   is voor koppen, niet voor alinea's */
.v2-night__cta { align-self: flex-start; margin-top: var(--t-s3); }
.v2-night__p { margin: 0; font-family: var(--t-sans); font-weight: 400;
  font-size: var(--t-body-lg); line-height: 1.65;
  max-width: 32em; color: var(--t-on-cobalt-deep); opacity: 0.82; }
@media (max-width: 700px) {
  .v2-night { background-position: center; min-height: clamp(440px, 70vh, 640px); }
}

/* ── artikelen-carrousel — bibliotheek §32 ───────────────────────
   Regels overgenomen uit site-library.src.html. De rail loopt bewust het
   kader uit: dat vertelt dat er meer is dan wat je ziet. Daarom links
   uitlijnen op de tekstkolom en rechts laten doorlopen tot de schermrand. */
.v2-posts { --v2-rail-inset: max(var(--v2-margin), calc((100vw - var(--v2-content)) / 2));
  background: var(--t-canvas); padding-block: var(--v2-section-lg);
  padding-left: var(--v2-rail-inset);
  padding-right: 0; overflow: hidden; }
.sec-posts__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--t-s5); padding-right: var(--v2-margin); flex-wrap: wrap; }
.sec-posts__h { font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-xl); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0; }
/* De rail loopt van schermrand tot schermrand en niet van tekstkolom tot
   schermrand: negatieve marge naar buiten, dezelfde maat als binnenruimte
   terug naar binnen. De eerste kaart staat daardoor nog steeds op de lijn
   van de kop, maar er is links een strook waarin een vertrekkende kaart mag
   uitlopen — en die strook wordt vervaagd in plaats van afgehakt.
   overflow-x:auto maakt ook de verticale as klemmend, dus de optillende
   kaart krijgt daar ook ruimte; het verschil is er met marges weer
   afgehaald zodat het ritme op de pagina gelijk blijft. */
.sec-posts__railwrap { position: relative; }
.sec-posts__railwrap::after { content: ""; position: absolute; z-index: 2;
  inset-block: 0; left: calc(-1 * var(--v2-rail-inset));
  width: var(--v2-rail-inset); pointer-events: none;
  background: linear-gradient(90deg, var(--t-canvas) 30%, transparent); }
.sec-posts__rail { display: flex; gap: var(--t-s4); overflow-x: auto;
  scroll-snap-type: x mandatory; margin-top: var(--t-s4);
  margin-inline-start: calc(-1 * var(--v2-rail-inset));
  padding-block: var(--t-s4);
  padding-inline-start: var(--v2-rail-inset);
  scroll-padding-inline-start: var(--v2-rail-inset);
  padding-right: var(--v2-margin);
  scrollbar-width: none; }
.sec-posts__rail::-webkit-scrollbar { display: none; }
/* De kaart is de link, niet alleen de kop: een kaart die er klikbaar uitziet
   moet ook overal klikbaar zijn. */
.sec-post { flex: 0 0 340px; scroll-snap-align: start;
  border: 1px solid var(--t-border); border-radius: var(--t-r-card);
  overflow: hidden; background: var(--t-surface);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 0.32s var(--v2-ease), background 0.32s var(--v2-ease),
              border-color 0.32s var(--v2-ease), box-shadow 0.32s var(--v2-ease); }
/* Geen slagschaduw op hover: die legt een donkere strook onder de kaart en
   wordt door de scrollbak toch weer afgesneden. De kaart kleurt in plaats
   daarvan naar het merkvlak en zet zijn rand aan. */
a.sec-post:hover, .sec-post--cta:hover, .sec-post--cta:focus-within {
  transform: translateY(-3px); }
/* De streek wordt zwaarder, niet donkerder: butter-100 op de rand plus
   dezelfde kleur als ring erbinnen leest als een dubbele lijn zonder dat de
   inhoud een pixel verschuift. Een donkere rand gaf een strook om de kaart
   die net zo hinderlijk was als de schaduw die hij verving. */
a.sec-post:hover { background: var(--t-butter-50);
  border-color: var(--t-butter-100);
  box-shadow: inset 0 0 0 1px var(--t-butter-100); }
/* Het label is butter-50 op wit; op een butter-50 kaart zou het verdwijnen. */
a.sec-post:hover .sec-post__tag { background: var(--t-surface); }
a.sec-post:hover .sec-post__h { text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sec-post:focus-visible { outline: 2px solid var(--t-cobalt-deep);
  outline-offset: 3px; }
/* De beeldbak snijdt af; het beeld zelf mag dus rustig groter worden. */
.sec-post__imgwrap { overflow: hidden; }
.sec-post__img { aspect-ratio: 16 / 9; background-size: cover;
  background-position: center; background-color: var(--t-sunken);
  transition: transform 0.5s var(--v2-ease); }
a.sec-post:hover .sec-post__img { transform: scale(1.045); }
.sec-post__body { padding: var(--t-s5); display: flex; flex-direction: column;
  gap: var(--t-s3); }
.sec-post__tag { align-self: flex-start; }
.sec-post__h { font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-xs); line-height: 1.25; margin: 0; }
.sec-post__date { font-size: var(--t-caption); color: var(--t-ink2); margin-top: auto; }

/* Achtste kaart: geen artikel maar de doorstap naar de hele hub. Cobalt vlak,
   dus butter-knop — cobalt op cobalt verdwijnt (§4.3). */
.sec-post--cta { background: var(--t-cobalt-deep); border-color: var(--t-cobalt-deep);
  justify-content: center; padding: var(--t-s6) var(--t-s5); gap: var(--t-s4); }
.sec-post__ctah { color: var(--t-on-cobalt-deep); }
.sec-post__ctap { color: var(--t-on-cobalt-deep); opacity: 0.88;
  font-size: var(--t-body); line-height: var(--t-body-lh); margin: 0; }
.sec-post__ctab { align-self: flex-start; min-height: 48px;
  padding-inline: var(--t-s5); font-size: var(--t-body);
 }
.sec-post__ctab:focus-visible { outline: 2px solid var(--t-on-cobalt-deep);
  outline-offset: 3px; }

/* Kopregel-link: geen knop, wel een duidelijke aanwijzer. */
.sec-posts__all { font-size: var(--t-body); font-weight: 500; color: var(--t-cta);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--t-ease); }
.sec-posts__all:hover { color: var(--t-cta-hover); }
.sec-posts__all:focus-visible { outline: 2px solid var(--t-cobalt-deep);
  outline-offset: 3px; border-radius: var(--t-r-btn); }
.sec-posts__nav { display: flex; gap: var(--t-s3); margin-top: var(--t-s5); }
.sec-posts__nav 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); }
.sec-posts__nav button:hover:not([disabled]) { background: var(--t-subtle);
  border-color: var(--t-ink2); }
.sec-posts__nav button:focus-visible { outline: 2px solid var(--t-cobalt-deep);
  outline-offset: 3px; }
.sec-posts__nav button[disabled] { opacity: 0.35; cursor: not-allowed; }
.sec-icon { width: 20px; height: 20px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .sec-posts__h { font-size: var(--t-display-md); }
  .sec-post { flex-basis: 260px; }
  .sec-post--cta { padding: var(--t-s5) var(--t-s4); }
  .sec-post__ctab { padding-inline: var(--t-s4); }
}
@media (prefers-reduced-motion: reduce) {
  .sec-post, .sec-post__img { transition: none; }
  a.sec-post:hover, .sec-post--cta:hover { transform: none; }
  a.sec-post:hover .sec-post__img { transform: none; }
}

/* ── CTA-band — bibliotheek §39 ──────────────────────────────────
   Regels overgenomen uit site-library.src.html. De knop is butter: cobalt
   op cobalt verdwijnt, en dit is de plek waar de twee merkkleuren elkaar
   raken. Band, geen sectie met marges — anders valt de canvaskleur ernaast. */
/* de bieb zet hier zijpadding; op een volle-breedte band moet de tekst juist
   op de contentkolom uitlijnen, dus het binnenwerk zit in .v2-wrap */
/* 150% lucht boven en onder (64 -> 96px), en de paragraaf naast de kop
   in plaats van eronder */
.sec-cta { background: var(--t-cta); color: var(--t-on-cta);
  margin-block: 0; padding-block: calc(var(--t-s8) + var(--t-s6)); }
.sec-cta__inner { display: flex; align-items: center;
  justify-content: space-between; gap: var(--t-s6); flex-wrap: wrap; }
.sec-cta__copy { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--t-s7); align-items: center; flex: 1 1 620px; }
.sec-cta__copy .sec-cta__s { margin: 0; }
.sec-cta__h { font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-md); line-height: 1.1; letter-spacing: -0.02em;
  margin: 0; max-width: 18ch; text-wrap: balance; }
.sec-cta__s { margin: var(--t-s3) 0 0; opacity: 0.82;
  font-size: var(--t-body); max-width: 44ch; }
/* de bieb-knop staat op 40px; de knoppen op deze pagina zijn 56px */
/* de bieb-knop is een <button>; hier is het een <a>, dus de streep eronder
   moet er expliciet af */
.sec-cta .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; }
/* Kop naast paragraaf werkt tot de tussenmaat; daaronder kneep de tweede
   kolom naar nul en stak de tekst het scherm uit — dat was de horizontale
   schuifruimte op de telefoon. */
@media (max-width: 1024px) {
  .sec-cta__copy { grid-template-columns: minmax(0, 1fr); gap: var(--t-s4); }
  .sec-cta__h { max-width: none; }
}

/* ── begeleiding: lijst links, kaart met een gezicht rechts ──────── */
/* band op butter-50, de kaart erop wit — zo licht de kaart op in plaats van
   op te gaan in het vlak */
.v2-helpband { background: var(--t-butter-50); margin-block: 0;
  padding-block: var(--v2-section-lg); }
/* cijfers op wit, de getallen in cobalt */
.v2-numsband { background: var(--t-surface); margin-block: 0;
  padding-block: var(--v2-section-lg); }
.v2-numsband .v2-nums b { color: var(--t-cobalt-700); }
.v2-help__grid { display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--t-s8); align-items: start; }
.v2-help__title { max-width: 18ch; margin: var(--t-s3) 0 var(--t-s7); }
.v2-help__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
.v2-help__item { display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--t-s5); padding: var(--t-s5) 0;
  border-top: 1px solid var(--t-border); }
.v2-help__ico { width: 24px; height: 24px; color: var(--t-cobalt-700);
  margin-top: var(--t-s1); }
.v2-help__h { font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-xs); line-height: 1.25; margin: 0 0 var(--t-s2);
  color: var(--t-ink); }
.v2-help__p { margin: 0; font-size: var(--t-body); line-height: 1.55;
  color: var(--t-ink2); max-width: 46ch; }

/* de kaart: het gezicht maakt de belofte concreet */
.v2-help__card { background: var(--t-surface);
  border: 1px solid var(--t-border); border-radius: var(--t-r-panel);
  padding: var(--t-s6); position: sticky;
  top: calc(var(--t-s7) + var(--t-s5) + var(--t-s6)); }
.v2-help__face { display: block; width: 128px; height: 128px;
  border-radius: 50%; object-fit: cover; margin-bottom: var(--t-s5); }
.v2-help__card-h { font-family: var(--t-display); font-weight: 400;
  font-size: var(--t-display-sm); line-height: 1.15; margin: 0 0 var(--t-s3);
  color: var(--t-ink); }
.v2-help__card-p { margin: 0 0 var(--t-s6); font-size: var(--t-body);
  line-height: 1.55; color: var(--t-ink2); }
@media (max-width: 1024px) {
  .v2-help__grid { grid-template-columns: minmax(0, 1fr); }
  .v2-help__card { position: static; max-width: 420px; }
}

/* ── maatvoering van de koppen op de smalle tiers ────────────────────
   Dit blok staat bewust achteraan. De sectiekoppen krijgen verderop in dit
   bestand nog eigen regels (.v2-split__body > .v2-h2 zet er een op 75%,
   .v2-help__card-h staat op 24px), en die wonnen van een blok halverwege.
   Achteraan wint de bedoeling.

   De aanleiding: toen de grote kop naar 34px ging, zakten de sectiekoppen
   mee — 28px, en op de butterband zelfs 20px, voor een kop die een hele
   sectie opent. Ze staan nu op 32 (een echte stap op de schaal), de kaart-
   en bijschriftkoppen op 28, en de getallen dragen hun eigen sectie weer.
   Rangorde op een telefoon: 34 / 32 / 28. */
@media (max-width: 1024px) {
  .v2-h2, .v2-split__body > .v2-h2 { font-size: var(--t-display-md); }
  .v2-tour__cap h3, .v2-help__card-h { font-size: clamp(24px, 7.4vw, 28px); }
  .v2-nums b { font-size: clamp(52px, 13vw, 64px); }
}

/* Taalwissel. Staat naast de CTA en niet in de menulijst, zodat hij op elke
   maat zichtbaar blijft — ook wanneer het menu is ingeklapt. Toont altijd
   alleen de ANDERE taal: op de Engelse site staat er NL, op de Nederlandse EN.
   De builder vult href en taal per pagina in; op de homepage staat het echte
   adres, en de schil-poort normaliseert dat verschil weg. */
.v2-nav__lang { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 var(--t-s2);
  border: 1px solid var(--t-border-strong); border-radius: var(--t-r-btn);
  color: var(--t-ink2); font-size: var(--t-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  transition: color .18s ease, border-color .18s ease; }
.v2-nav__lang:hover { color: var(--t-ink); border-color: var(--t-ink); }
.v2-nav__lang:focus-visible { outline: 2px solid var(--t-cobalt-deep); outline-offset: 2px; }