/* =============================================================
   STANDING OVATION — Design system
   Marine Blue-palet (marineblauw / ijsblauw "paper"). Schibsted Grotesk
   voor koppen, Hanken Grotesk voor tekst. Veel witruimte, subtiele
   bewegingen, afgeronde hoeken.

   ⚠️  KLEUREN & GRADIËNTEN staan NIET hier, maar centraal in
       assets/css/theme.css (--acc, --ink, --grad-hero, …).
       Deze file gebruikt ze alleen via var(--naam).
   ============================================================= */

/* -------------------------------------------------------------
   1. Structurele tokens (vorm, ruimte, typografie — geen kleur)
   ------------------------------------------------------------- */
:root {
    --font-head: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

    --r:      16px;
    --r-lg:   24px;
    --r-xl:   26px;
    --r-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(0,40,60,.06);
    --shadow-sm: 0 6px 20px -8px rgba(0,40,60,.16);
    --shadow:    0 30px 60px -34px rgba(0,40,60,.32);
    --shadow-lg: 0 40px 80px -40px rgba(0,40,60,.42);

    --container: 1280px;
    --container-narrow: 900px;
    --gutter: clamp(20px, 5vw, 44px);
    --section-y: clamp(84px, 13vh, 170px);
    /* De balk is net iets hoger dan het logo (11px lucht boven en onder).
       Wijzig je --logo-h, houd dan ook --nav-h in de gaten.
       Op verzoek van de klant (11 augustus) staat het logo een stuk groter;
       de balk groeide mee zodat de lucht eromheen gelijk bleef. */
    --logo-h: 78px;
    --nav-h: 100px;

    --ease: cubic-bezier(.16, .84, .44, 1);
}

/* -------------------------------------------------------------
   2. Reset & basis
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
    line-height: 1.62;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body.nav-solid main { padding-top: var(--nav-h); }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--tint); }
a { color: var(--acc); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-head); margin: 0 0 .5em; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); font-weight: 700; text-wrap: balance; }
/* Nederlandse samenstellingen ("ondersteuningssysteem", "bewegingsondersteunend")
   passen soms niet op één regel. De browser mag ze afbreken — mét koppelteken,
   dus hyphens en overflow-wrap horen bij elkaar. Zonder hyphens breekt het woord
   midden in het niets af. */
h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--sel); }

:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

/* -------------------------------------------------------------
   3. Layout-hulpmiddelen
   ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); background: var(--paper); }
.section--tint { background: var(--tint); }
.section--ice  { background: var(--tint-2); }
.section--dark, .section--ink { background: var(--dark); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--flush-top { padding-top: 0; }

.section__head { max-width: 60ch; margin-bottom: clamp(36px, 6vh, 64px); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-block; margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: .2em;
    font-size: .72rem; font-weight: 600; color: var(--acc);
}
.section--dark .eyebrow, .section--ink .eyebrow { color: rgba(255,255,255,.72); }

.section__title { font-weight: 700; letter-spacing: -.02em; line-height: 1.06; font-size: clamp(1.9rem, 3.6vw, 3.2rem); margin-bottom: .35em; }
.section__intro { font-size: clamp(1.05rem, 1.4vw, 1.28rem); line-height: 1.62; color: var(--ink-soft); max-width: 62ch; }
.section__head--center .section__intro { margin-inline: auto; }
.section--dark .section__intro, .section--ink .section__intro { color: var(--on-dark-mut); }

.lead { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.32; letter-spacing: -.01em; color: var(--ink); }

.prose p { color: var(--ink-soft); font-size: clamp(1rem, 1.2vw, 1.13rem); line-height: 1.62; margin-bottom: 1.1em; }
.prose p.strong { color: var(--ink); font-weight: 500; }

/* -------------------------------------------------------------
   4. Knoppen
   ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .5em;
    padding: 15px 28px; border: 1px solid transparent; border-radius: var(--r-pill);
    font-weight: 600; font-size: 1rem; line-height: 1;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn .icon { transition: transform .3s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--acc); transform: translateY(-2px); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.btn--on-hero {
    background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.4);
    backdrop-filter: blur(6px);
}
.btn--on-hero:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.text-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--acc); padding-bottom: 3px; transition: color .25s, gap .25s var(--ease); }
.text-link .icon { transition: transform .25s var(--ease); }
.text-link:hover { color: var(--acc); }
.text-link:hover .icon--arrow { transform: translateX(4px); }
.section--dark .text-link, .section--ink .text-link { color: #fff; border-color: var(--acc-soft); }

.icon { display: inline-block; vertical-align: middle; }

/* -------------------------------------------------------------
   5. Toegankelijkheid
   ------------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 200; padding: .7rem 1.1rem; background: var(--ink); color: #fff; border-radius: var(--r-pill); transform: translateY(-150%); transition: transform .25s var(--ease); }
.skip-link:focus { transform: translateY(0); }

/* -------------------------------------------------------------
   6. Header & navigatie
   ------------------------------------------------------------- */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: var(--nav-h);
    background: rgba(247,250,251,.84);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
    transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header--over:not(.is-scrolled) {
    background: transparent; border-bottom-color: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Logo — twee varianten over elkaar, gekruist ingefade */
.brand { position: relative; display: block; flex: none; line-height: 0; }
.brand__img { display: block; width: auto; height: var(--logo-h, 64px); background: none; transition: opacity .4s var(--ease); }
.brand__img--light { position: absolute; top: 0; left: 0; opacity: 0; }
.site-header--over:not(.is-scrolled) .brand__img--dark { opacity: 0; }
.site-header--over:not(.is-scrolled) .brand__img--light { opacity: 1; }
/* Het is een woordmerk met dunne letters, dus kleiner dan 60px wordt het niet. */
@media (max-width: 560px) { :root { --nav-h: 84px; --logo-h: 60px; } }

/* Nav — twee regels binnen de hoogte van de balk: bovenin de taalkeuze en de
   demonstratieknop, daaronder het menu, allebei rechts uitgelijnd. De rij staat
   in de HTML ná het menu (zie nav() in site/layout.mjs) omdat het burgermenu
   die volgorde nodig heeft; `order: -1` tilt hem hier naar boven. */
.primary-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.primary-nav__rij { order: -1; display: flex; align-items: center; gap: 14px; }
.primary-nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; }
.primary-nav__link { position: relative; white-space: nowrap; font-size: .92rem; font-weight: 500; color: var(--muted); transition: color .3s; }
.primary-nav__cta { white-space: nowrap; }
.primary-nav__link:hover { color: var(--ink); }
/* Het streepje onder de actieve pagina heeft de cyaan uit het logo, niet het
   marineblauwe hoofdaccent: zo rijmt het met de "opstaande" I links ernaast. */
.primary-nav__link.is-active { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--logo-cyan); text-underline-offset: 7px; text-decoration-thickness: 2px; }
.site-header--over:not(.is-scrolled) .primary-nav__link { color: rgba(255,255,255,.72); }
.site-header--over:not(.is-scrolled) .primary-nav__link:hover,
.site-header--over:not(.is-scrolled) .primary-nav__link.is-active { color: #fff; }

/* Taalwisselaar — een uitklapper, want vier codes naast elkaar duwden de
   demonstratieknop uit de balk (zie taalwisselaar() in site/layout.mjs). */
.taalkeuze { position: relative; flex: none; }
.taalkeuze__knop { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px;
    font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); cursor: pointer;
    list-style: none; transition: color .3s, background .3s; }
/* Randje om de vlag: de Nederlandse en de Franse hebben wit aan de rand en
   zouden anders in de balk of in het uitklaplijstje weglopen. */
.vlag { flex: none; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11,31,42,.18); }
.site-header--over:not(.is-scrolled) .taalkeuze__knop .vlag { box-shadow: 0 0 0 1px rgba(255,255,255,.45); }
.taalkeuze__knop::-webkit-details-marker { display: none; }  /* Safari zet er anders een driehoekje voor */
/* Op de balk is de vlag alleen genoeg; in het burgerpaneel komt de code erbij. */
.taalkeuze__code { display: none; }
.taalkeuze__knop:hover { color: var(--ink); background: var(--tint); }
.taalkeuze__knop:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.taalkeuze[open] .taalkeuze__pijl { transform: rotate(180deg); }
.taalkeuze__pijl { transition: transform .25s var(--ease); }
.taalkeuze__lijst { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; min-width: 108px;
    padding: 6px; margin: 0; list-style: none; background: var(--paper-2); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow); }
.taalkeuze__link { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 8px;
    font-size: .88rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); }
.taalkeuze__link:hover { background: var(--tint); color: var(--ink); }
.taalkeuze__link.is-active { color: var(--ink); font-weight: 600; background: var(--tint); }
.site-header--over:not(.is-scrolled) .taalkeuze__knop { color: rgba(255,255,255,.72); }
.site-header--over:not(.is-scrolled) .taalkeuze__knop:hover { color: #fff; background: rgba(255,255,255,.16); }
/* In het burgermenu klapt de lijst inline uit in plaats van als zwevend paneel.
   De knop blijft daar staan: <details> toont zijn inhoud alleen als hij open is,
   dus de knop wegverbergen zou de talen onbereikbaar maken zonder JavaScript. */
@media (max-width: 1149px) {
    .taalkeuze { width: 100%; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
    .taalkeuze__knop { font-size: .95rem; padding: 8px 10px; gap: 9px; }
    /* In het paneel staat alles op 1,4rem; een vlag van 21px valt daarnaast weg. */
    .taalkeuze .vlag { width: 30px; height: 20px; }
    .taalkeuze__code { display: inline; }
    .taalkeuze__lijst { position: static; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0;
        background: none; border: 0; box-shadow: none; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .taalkeuze__pijl { transition: none; } }

.primary-nav__cta { display: inline-flex; align-items: center; padding: 11px 22px; background: var(--ink); color: var(--paper); border: 1px solid transparent; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem; transition: transform .3s var(--ease), background .3s; }
.primary-nav__cta:hover { transform: translateY(-2px); }
.site-header--over:not(.is-scrolled) .primary-nav__cta { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }

/* Burger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; color: var(--ink); transition: color .4s var(--ease); }
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.site-header--over:not(.is-scrolled) .nav-toggle { color: #fff; }
.nav-toggle[aria-expanded="true"] { color: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Burgermenu tot 1149px: daarboven past logo + menu naast elkaar.
   Blijft in sync met de resize-check in assets/js/main.js.

   Dit getal is twee keer verschoven. Het stond op 1023px, maar dat klopte niet:
   acht menu-items plus de knop "Plan een demonstratie" waren op één regel samen
   ruim 1200px breed, dus tussen 1024 en 1279px viel die knop half buiten beeld —
   onzichtbaar, want body staat op overflow-x: hidden. Daarom ging het naar
   1339px. Sinds de knop en de taalkeuze op een eigen regel bóven het menu staan,
   is die reden weg: alleen het menu hoeft nog naast het logo te passen.

   Gemeten bij 1150px, het smalst waarop nu de volledige balk verschijnt:
   Nederlands houdt 156px over, Engels 213px, Frans 98px en Duits 80px — dat
   laatste is het langste menu van de vier en dus de maat die telt. */
@media (max-width: 1149px) {
    .nav-toggle { display: flex; }
    .primary-nav {
        position: fixed; inset: var(--nav-h) 0 auto 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 26px var(--gutter) 34px;
        background: var(--paper); border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        transform: translateY(-150%); transition: transform .4s var(--ease);
        max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    }
    .primary-nav.is-open { transform: translateY(0); }
    /* Geen overgang terwijl de vensterrand versleept wordt: anders animeert de
       browser de sprong van rij-in-de-balk naar paneel-boven-het-scherm, en
       schiet het menu zichtbaar over de pagina. Wordt door main.js gezet en een
       vijfde seconde later weer weggehaald, zodat het uitklappen zelf vloeiend
       blijft. Hogere specificiteit dan de regel hierboven, dus de volgorde in
       dit bestand doet er niet toe. */
    .primary-nav.is-resizing { transition: none; }
    /* In het paneel geen tweede regel maar gewoon onder elkaar, in de volgorde
       waarin ze in de HTML staan: eerst de pagina's, dan de taal, dan de knop. */
    .primary-nav__rij { order: 0; flex-direction: column; align-items: stretch; gap: 0; }
    .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    /* Scheidingslijn tússen de items: op de <li> (die vult de volle breedte),
       niet op de <a>. Met li + li krijg je geen losse streep boven het eerste
       of onder het laatste item. */
    .primary-nav__list li + li { border-top: 1px solid var(--line); }
    /* display:block — anders reserveert de verticale padding geen ruimte en
       valt de rand door de tekst van het volgende item heen. */
    .primary-nav__link { display: block; padding: 15px 2px; font-family: var(--font-head); font-size: 1.4rem; font-weight: 500; color: var(--muted); }
    .primary-nav__link.is-active { color: var(--ink); text-decoration: none; }
    /* in het mobiele paneel altijd donkere tekst, ook op hero-pagina's */
    .site-header--over:not(.is-scrolled) .primary-nav.is-open .primary-nav__link { color: var(--muted); }
    .site-header--over:not(.is-scrolled) .primary-nav.is-open .primary-nav__link.is-active { color: var(--ink); }
    .primary-nav__cta { margin-top: 24px; justify-content: center; padding: 16px; }
    .site-header--over:not(.is-scrolled) .primary-nav.is-open .primary-nav__cta { background: var(--ink); color: var(--paper); border-color: transparent; }
    /* Het paneel is wit, ook op hero-pagina's: dan hoort het randje om de vlag
       donker te zijn, niet het lichte randje van de doorzichtige balk. */
    .site-header--over:not(.is-scrolled) .primary-nav.is-open .taalkeuze__knop .vlag { box-shadow: 0 0 0 1px rgba(11,31,42,.18); }
}

/* -------------------------------------------------------------
   7. Hero (home) & pagina-koppen
   ------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; background: var(--hero-fallback); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -8%; z-index: 0; background-image: var(--grad-hero); background-size: cover; background-position: center; will-change: transform; animation: aurora 26s ease-in-out infinite; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--grad-hero-veil); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: clamp(120px,17vh,190px) var(--gutter) clamp(96px,13vh,150px); will-change: transform, opacity; }
.hero__eyebrow { color: rgba(255,255,255,.78); }
.hero__title { color: #fff; font-weight: 600; letter-spacing: -.025em; line-height: 1.06; font-size: clamp(2.2rem, 5vw, 4.7rem); max-width: 17ch; margin-bottom: 0; }
.hero__text { margin-top: 34px; max-width: 52ch; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.62; color: rgba(255,255,255,.84); }
.hero .btn-row { margin-top: 44px; }
.hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 1; color: rgba(255,255,255,.6); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; }

/* Filmhero: tekst boven, video eronder over de volle breedte van de inhoud.
   Tot 11 augustus 2026 stond de video in een kolom van 560px naast de tekst;
   de klant wil hem groot. Breder dan de container gaat hij bewust niet: de bron
   is 640x360 en staat hier al op ruim twee keer zijn eigen formaat. Schermvullend
   wordt dat drie keer, en dan wordt ook de ingebrande ondertiteling pap. */
.hero--film { min-height: auto; }
/* Krappere marges dan de gewone hero: de video staat eronder, en met de royale
   koppadding van 190px begint hij pas ver onder de vouw. */
.hero__inner--film { display: grid; grid-template-columns: 1fr; gap: clamp(26px,3.5vw,42px);
    padding-block: calc(var(--nav-h) + clamp(22px,4vh,52px)) clamp(56px,8vh,104px); }
.hero__inner--film .hero__title { max-width: 20ch; }
.hero__inner--film .hero__text { max-width: 56ch; }
.hero__col--media { width: 100%; }
/* De ondertiteling zit in het beeld gebrand en loopt langs de onderrand. Het
   vlak heeft daarom géén vaste verhouding: de video bepaalt zijn eigen hoogte,
   'contain' laat de hele frame staan en object-position houdt de onderkant vast,
   zodat er van bóven af wat wegvalt als het ooit tóch bijgesneden moet worden.
   De geluidsknop staat rechtsboven en komt dus nooit over de onderste strook. */
.hero__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: contain; object-position: center bottom; background: #001a28; }

/* Geluidsknop op een video die zonder geluid start. Pil met tekst, want een los
   luidsprekertje leest niemand als "hier kun je klikken". */
.videobox__geluid {
    position: absolute; top: 20px; right: 20px; z-index: 2;
    display: inline-flex; align-items: center; gap: .5em;
    padding: 10px 16px; border: 0; border-radius: var(--r-pill);
    background: rgba(255,255,255,.94); color: var(--dark);
    font: inherit; font-size: .85rem; font-weight: 600; line-height: 1; cursor: pointer;
    box-shadow: 0 12px 26px -12px rgba(0,26,40,.85);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.videobox__geluid:hover { background: #fff; transform: translateY(-1px); }
.videobox__geluid:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 3px; }
.videobox__geluid-icoon { display: grid; place-items: center; }
/* Beide bijschriften delen één gridcel: de knop krijgt de breedte van het
   langste woord en blijft dus even breed als het geluid aan of uit gaat.
   Het verborgen bijschrift telt mee voor de breedte, maar niet voor
   schermlezers — vandaar visibility in plaats van display. */
.videobox__geluid-tekst { display: grid; }
.videobox__geluid-tekst > span { grid-area: 1 / 1; text-align: center; }
.videobox__geluid-tekst > span[hidden] { display: block; visibility: hidden; }
@media (max-width: 560px) {
    .videobox__geluid { top: 14px; right: 14px; padding: 9px 13px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .videobox__geluid { transition: none; } }
/* De kop staat boven de video en de knoppen ernaast: zo blijft de eerste
   schermvulling tekst + knoppen, en begint de video daar direct onder. */
@media (min-width: 900px) {
  .hero__inner--film .hero__title { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
}

/* Cijfertegels: groot getal boven, korte regel eronder, één bronregel onder de rij. */
.stats { display: grid; grid-template-columns: 1fr; gap: clamp(16px,2.4vw,26px); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--paper-2); border-radius: var(--r-lg); padding: clamp(26px,3.4vw,40px); box-shadow: var(--shadow); text-align: center; }
.stat__num { display: block; font-family: var(--font-head); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-size: clamp(2.1rem, 4.4vw, 3.4rem); color: var(--acc); }
.stat__text { margin-top: 14px; color: var(--ink-soft); line-height: 1.5; }
.stats__source { margin-top: clamp(18px,2.4vw,26px); text-align: center; font-size: .86rem; color: var(--ink-soft); }

.page-hero { position: relative; display: flex; align-items: flex-end; min-height: 70svh; color: #fff; background: var(--hero-fallback); overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: -8%; z-index: 0; background-image: var(--grad-hero); background-size: cover; background-position: center; will-change: transform; animation: aurora 32s ease-in-out infinite; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--scrim-soft); pointer-events: none; }
.page-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) clamp(54px,8vh,100px); padding-top: clamp(120px,20vh,180px); }
.page-hero__eyebrow, .page-hero .eyebrow { color: rgba(255,255,255,.7); }
.page-hero__title { color: #fff; font-weight: 700; letter-spacing: -.025em; line-height: 1.04; font-size: clamp(2.1rem, 4.8vw, 4.4rem); max-width: 20ch; }
.page-hero__intro { margin-top: 22px; max-width: 58ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.6; color: rgba(255,255,255,.86); }

/* Hero met beeld ernaast. Op "Hoe het werkt" hoort juist daar de foto die in
   één keer laat zien wát het is; onder 900px valt het beeld onder de tekst. */
.page-hero__inner--split { display: grid; grid-template-columns: 1fr; gap: clamp(32px,4.5vw,60px); align-items: center; }
.page-hero__inner--split .page-hero__title,
.page-hero__inner--split .page-hero__intro { max-width: 22ch; }
.page-hero__inner--split .page-hero__intro { max-width: 46ch; }
.page-hero__media { width: 100%; max-width: 520px; justify-self: center; }
@media (min-width: 900px) {
    .page-hero__inner--split { grid-template-columns: 1.05fr .95fr; }
    .page-hero__media { justify-self: end; }
}

/* -------------------------------------------------------------
   8. Beeldvlakken — foto's (.media > img) en gradiënten als terugval
   ------------------------------------------------------------- */
.media { position: relative; border-radius: var(--r-lg); background-size: cover; background-position: center; box-shadow: var(--shadow); overflow: hidden; }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 8; }
/* Foto binnen een beeldvlak: vult het vlak zonder te vervormen. Staat er een
   aspect-ratio op .media, dan bepaalt die de uitsnede; zo niet, dan volgt de
   hoogte de eigen verhouding van de foto. */
.media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Video in een beeldvlak: contain in plaats van cover, zodat er niets van het
   beeld wegvalt. De bron is 640x360 (16:9) en het vlak 16:8, dus er ontstaan
   smalle donkere randen — vandaar de donkere ondergrond. */
.media > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #001a28; }
/* Beeldvlak met inhoud er bovenop (play-knop): foto als laag eronder, donkere
   sluier ertussen zodat witte elementen leesbaar blijven. */
.media--overlay > img { position: absolute; inset: 0; }
.media--overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,26,40,.34), rgba(0,26,40,.62)); }
.media--overlay > :not(img) { position: relative; z-index: 1; }
/* Optioneel label in een placeholder-vlak (vervang het vlak later door een <img>) */
.media__label { position: absolute; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: .4em; padding: 6px 12px; background: rgba(255,255,255,.78); color: var(--ink-soft); border-radius: var(--r-pill); font-size: .74rem; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(4px); }
.media__label::before { content: ""; width: 12px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; opacity: .8; }
.media--onDark .media__label { background: rgba(0,26,40,.58); color: var(--on-dark); }

/* Opstellingen — kleine galerij met technische beelden. Bewust bescheiden van
   formaat: de aangeleverde bestanden zijn 761-1600px breed en zouden op volle
   breedte onscherp worden. object-fit:contain omdat het deels tekeningen op een
   witte ondergrond zijn; die mogen niet worden aangesneden. */
.opstellingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(32px, 5vh, 56px); }
.opstellingen__item { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.opstellingen__item > img { object-fit: contain; padding: 10px; }

/* Twee manieren om naar gezond werken te kijken (onze-visie).
   Twee kolommen met een 'vs' ertussen; onder 820px onder elkaar, waarbij de
   'vs' een horizontale scheiding wordt in plaats van een verticale. */
.vergelijk { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: stretch; }
.vergelijk::before { content: "vs"; grid-column: 2; grid-row: 1; align-self: center; justify-self: center;
    width: 3.4rem; height: 3.4rem; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--line); border-radius: 50%;
    font-family: var(--font-head); font-weight: 700; font-size: 1rem; letter-spacing: .02em;
    color: var(--muted); box-shadow: var(--shadow-sm); }
.vergelijk__kolom { grid-row: 1; background: rgba(255,255,255,.62); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.2rem); }
.vergelijk__kolom:first-of-type { grid-column: 1; }
.vergelijk__kolom--onze { grid-column: 3; background: #fff; border-color: color-mix(in srgb, var(--acc) 34%, var(--line)); box-shadow: var(--shadow-sm); }
.vergelijk__kop { text-align: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.vergelijk__titel { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--ink); }
.vergelijk__kolom--onze .vergelijk__titel { color: var(--acc); }
.vergelijk__sub { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }
.vergelijk__stappen { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
/* Pijl tússen de stappen — niet ná de laatste. */
.vergelijk__stap + .vergelijk__stap { position: relative; padding-top: 1.5rem; }
.vergelijk__stap + .vergelijk__stap::before { content: ""; position: absolute; top: .1rem; left: 50%; transform: translateX(-50%);
    width: 8px; height: 8px; border-right: 1.5px solid var(--line-strong, var(--muted)); border-bottom: 1.5px solid var(--line-strong, var(--muted));
    rotate: 45deg; opacity: .6; }
/* Gecentreerd, in lijn met de kolomkop en de pijl die er middendoor loopt. */
.vergelijk__stap { text-align: center; }
.vergelijk__stap h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.vergelijk__kolom--onze .vergelijk__stap h4 { color: var(--acc); }
/* Smaller dan de kolom: bij gecentreerde tekst leest een korte regellengte
   rustiger, en de tweede regel valt niet ver buiten de eerste. */
.vergelijk__stap p { max-width: 34ch; margin: .35rem auto 0; font-size: .94rem; line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }
.vergelijk__slot { max-width: 62ch; margin: clamp(28px, 5vh, 48px) auto 0; text-align: center; color: var(--ink-soft); line-height: 1.6; }
.vergelijk__slot strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1.1rem; }
@media (max-width: 820px) {
    .vergelijk { grid-template-columns: 1fr; }
    .vergelijk__kolom, .vergelijk__kolom:first-of-type, .vergelijk__kolom--onze { grid-column: 1; grid-row: auto; }
    .vergelijk::before { grid-column: 1; grid-row: auto; }
}

/* Projecten — installaties op locatie. Eerste foto groot, rest als vierkanten
   ernaast; onder 720px wordt het één kolom met de grote foto bovenaan. */
.project__head { max-width: 60ch; margin-bottom: clamp(20px, 3vh, 32px); }
.project__title { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin: 0; }
.project__meta { margin: .3rem 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--muted); }
.project__text { margin: 1rem 0 0; color: var(--ink-soft); }
.project__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }
.project--spaced { margin-top: clamp(48px, 8vh, 88px); }
@media (max-width: 820px) {
    .project__grid { grid-template-columns: 1fr 1fr; }
    .project__foto--groot { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .project__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   9. Grids, kaarten, feature-secties
   ------------------------------------------------------------- */
.grid { display: grid; gap: clamp(16px, 2.2vw, 26px); }
/* Tekst met een smal beeld ernaast. Anders dan .autofit krijgt de tekst hier
   het leeuwendeel: het beeld is een aangeleverde tekening van 355px breed en
   wordt bewust niet opgeschaald. Onder 720px gaat het beeld eronder staan,
   gecentreerd en op zijn eigen formaat. */
.tekst-beeld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
               gap: clamp(24px, 4vw, 44px); align-items: start; }
.tekst-beeld__figuur { max-width: 300px; }
@media (max-width: 720px) {
    .tekst-beeld { grid-template-columns: 1fr; justify-items: center; }
    .tekst-beeld__figuur { margin-top: 8px; }
}

.autofit { display: grid; gap: clamp(16px, 2.2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.autofit--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Vaste vier kolommen in plaats van auto-fit. De vier toepassingen kwamen er met
   auto-fit als 3 + 1 uit te liggen: drie op een rij en de vierde er los onder.
   De klant vroeg (11 augustus) om vier naast elkaar of twee om twee; dit doet
   allebei, afhankelijk van de breedte. Onder 1180px zijn vier kolommen te smal
   voor de bijschriften, dus wordt het daar 2 x 2. */
.autofit--vier { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .autofit--vier { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .autofit--vier { grid-template-columns: repeat(4, 1fr); } }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background-size: cover; background-position: center; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
/* Sectoren zonder aangeleverde foto: productbeeld op wit. Contain in plaats van
   cover, want cover snijdt zo'n losstaand product aan. */
.card__media--product { background: var(--tint); }
.card__media--product img { object-fit: contain; padding: 6%; }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; gap: .6rem; padding: 24px; flex: 1; }
.card__title { font-size: 1.18rem; margin: 0; font-weight: 600; }
.card__sub { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--acc); font-size: 1rem; line-height: 1.32; }
.card__text { color: var(--ink-soft); margin: 0; }
.card__link { margin-top: auto; padding-top: .6rem; }

.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature + .feature { margin-top: clamp(48px, 8vw, 96px); }
.feature__media { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background-size: cover; background-position: center; box-shadow: var(--shadow); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature--reverse .feature__media { order: 2; }
.feature__body h2, .feature__body h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
@media (max-width: 820px) { .feature--reverse .feature__media { order: 0; } }

/* Chips / pill-lijst */
.pill-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin-top: 1.4rem; }
.pill-list li { padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .98rem; font-weight: 500; color: var(--ink-soft); background: #fff; transition: background .3s, color .3s, border-color .3s; }
.pill-list li:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill-list--soft li:hover { background: #fff; color: var(--ink-soft); border-color: var(--line); cursor: default; }
.section--dark .pill-list li, .section--ink .pill-list li { background: rgba(255,255,255,.06); color: var(--on-dark); border-color: var(--line-dark); }

/* Voordelen met vinkjes */
.check-list { list-style: none; display: grid; gap: .8rem; margin-top: 1.4rem; }
.check-list li { display: flex; align-items: flex-start; gap: .7rem; color: var(--ink-soft); }
.check-list .icon { flex: none; margin-top: .15rem; color: var(--acc); }

/* Stap-kaarten */
.step { padding: clamp(1.6rem, 3vw, 2.2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; font-family: var(--font-head); font-weight: 700; color: #fff; background: var(--acc); border-radius: var(--r-pill); }
.step h3 { font-size: 1.25rem; font-weight: 600; }
.step p { color: var(--ink-soft); }

/* -------------------------------------------------------------
   10. Ademende cirkels ("cijfers die ertoe doen")
   ------------------------------------------------------------- */
.circles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 48px); }
.circle { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1; }
.circle__num { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; }
.circle p { margin: .55rem 0 0; line-height: 1.5; }
.circle--1 { width: clamp(230px,26vw,340px); background-image: var(--circle-1); color: #fff; padding: 30px; box-shadow: 0 30px 70px -30px rgba(0,50,73,.62); animation: breathe 7s ease-in-out infinite; }
.circle--1 .circle__num { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.circle--1 p { font-size: .86rem; color: rgba(255,255,255,.82); max-width: 22ch; }
.circle--2 { width: clamp(215px,24vw,300px); background-image: var(--circle-2); color: var(--ink); padding: 34px; box-shadow: 0 24px 60px -30px rgba(0,60,85,.34); animation: breatheAlt 6.2s ease-in-out infinite .4s; }
.circle--2 .circle__num { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
.circle--2 p { font-size: .82rem; color: var(--ink-soft); max-width: 22ch; }
/* Cirkel met een label in plaats van een getal — kleinere, leesbare kop */
.circle--label .circle__num { font-size: clamp(1.15rem, 1.9vw, 1.6rem) !important; line-height: 1.14; max-width: 13ch; text-wrap: balance; }
.circle__src { margin-top: .5rem !important; font-size: .72rem !important; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }

/* -------------------------------------------------------------
   12. Accordeon (FAQ)
   ------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.4rem 0; background: transparent; border: 0; text-align: left; font-family: var(--font-head); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; color: var(--ink); }
.accordion__icon { flex: none; position: relative; width: 1.25rem; height: 1.25rem; transition: transform .35s var(--ease); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--acc); }
.accordion__icon::before { width: 100%; height: 2px; }
.accordion__icon::after { width: 2px; height: 100%; transition: transform .35s var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 1.4rem; color: var(--ink-soft); max-width: 70ch; }
/* De knop zit in een <h3>, dus het paneel is géén directe buur van de knop.
   Openklappen loopt daarom via de .accordion__item — met :has() als variant
   die ook zonder JavaScript werkt (het eerste item staat open in de HTML). */
.accordion__item.is-open > .accordion__panel,
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) > .accordion__panel { grid-template-rows: 1fr; }

/* -------------------------------------------------------------
   13. Waar wij voor staan — vijf overtuigingen als open lijst
   Vier kolommen: nummer, icoon, kop met claim, en de uitleg. Haarlijnen
   in plaats van kaarten, zodat het één rustige reeks blijft.
   ------------------------------------------------------------- */
.overtuigingen { list-style: none; margin: 0; padding: 0; }
.overtuiging { display: grid; grid-template-columns: auto auto minmax(0, 26ch) minmax(0, 1fr);
    align-items: start; gap: clamp(1rem, 2.2vw, 2.4rem); padding: clamp(1.4rem, 2.8vw, 2rem) 0;
    border-top: 1px solid var(--line); }
.overtuiging:last-child { border-bottom: 1px solid var(--line); }
.overtuiging__nr { padding-top: .55rem; font-family: var(--font-head); font-weight: 700;
    font-size: .95rem; color: var(--acc); font-variant-numeric: tabular-nums; }
.overtuiging__icoon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--acc); }
.overtuiging__titel { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink); }
.overtuiging__claim { margin: .3rem 0 0; font-weight: 600; line-height: 1.45; color: var(--acc); }
.overtuiging__tekst { margin: 0; padding-top: .2rem; color: var(--ink-soft); line-height: 1.65; }
/* Onder 900px zakt de uitleg onder de kop; nummer en icoon blijven op één regel
   met de titel staan, zodat de reeks leesbaar blijft. */
@media (max-width: 900px) {
    .overtuiging { grid-template-columns: auto auto minmax(0, 1fr); row-gap: .85rem; }
    .overtuiging__kop { grid-column: 3; }
    .overtuiging__tekst { grid-column: 1 / -1; padding-top: 0; }
}

/* -------------------------------------------------------------
   14b. Pinned scroll-sectie (Apple feature-scroll)
        Beeld blijft staan terwijl de stappen langsscrollen.
        Zonder JS/op mobiel: nette statische fallback.
   ------------------------------------------------------------- */
.pinned { position: relative; }
.pinned.is-enhanced { height: calc(100vh + var(--steps, 3) * 72vh); }
.pinned__inner { padding-block: var(--section-y); }
.pinned.is-enhanced .pinned__inner {
    position: sticky; top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    /* Geen min-height: op een laag scherm (laptop van 700px) werd het blok dan
       hoger dan het venster en viel de onderkant weg. Het beeld hieronder krimpt
       in plaats daarvan mee. */
    padding-block: 0;
    display: flex; flex-direction: column; justify-content: center;
}
.pinned__head { max-width: 60ch; margin-bottom: clamp(1.75rem, 4vh, 3rem); }
.pinned__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pinned__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--tint); }
/* Op een laag scherm is 4/3 op de volle kolombreedte hoger dan wat er over is na
   de kop en de voortgangsbalk. Dan wint de hoogte en snijdt het beeld bij
   (object-fit: cover), in plaats van onder de vouw te verdwijnen. De aftrek is
   de kop plus de balk plus wat lucht; op een normaal scherm bijt deze regel niet. */
.pinned.is-enhanced .pinned__media { max-height: calc(100vh - var(--nav-h) - 300px); }
.pinned__panel { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.05); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.pinned__panel > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pinned__panel.is-active { opacity: 1; transform: none; }
.pinned:not(.is-enhanced) .pinned__panel:first-child { opacity: 1; transform: none; }
.pinned__steps { list-style: none; display: grid; gap: clamp(1rem, 2.4vh, 1.9rem); }
.pinned__step { display: flex; gap: 1rem; transition: opacity .45s var(--ease); }
/* In de vastgezette stand staan alle stappen in dezelfde gridcel en is alleen de
   actieve zichtbaar. Daarvoor stonden ze onder elkaar met de rest op 32% dekking;
   de kolom was dan zo hoog als alle stappen bij elkaar en paste niet op het
   scherm — de laatste stap viel eronder weg. Nu is de kolom zo hoog als de
   langste losse stap en staat hij door align-items:center netjes naast het beeld.
   visibility (in plaats van alleen opacity) houdt de verborgen stappen ook uit
   de voorleesvolgorde; de vertraging laat hem pas ná het uitfaden omklappen. */
.pinned.is-enhanced .pinned__steps { gap: 0; align-items: center; }
.pinned.is-enhanced .pinned__step {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.pinned.is-enhanced .pinned__step.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s;
}
.pinned__num { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--tint); color: var(--ink); font-family: var(--font-head); font-weight: 700; transition: background .45s var(--ease), color .45s var(--ease); }
.pinned.is-enhanced .pinned__step.is-active .pinned__num { background: var(--acc); color: #fff; }
.pinned__step h3 { font-size: 1.3rem; font-weight: 600; margin: 0 0 .25rem; }
.pinned__step p { color: var(--ink-soft); margin: 0; }
.pinned__sub { font-weight: 600; color: var(--ink) !important; margin-bottom: .3rem !important; }
.pinned__step p + p { margin-top: .6rem; }
.pinned__quote { margin-top: .7rem !important; padding-left: .9rem; border-left: 2px solid var(--acc); font-family: var(--font-head); font-weight: 500; color: var(--ink) !important; }
.pinned__progress { display: none; }
.pinned.is-enhanced .pinned__progress { display: block; height: 3px; background: var(--line); border-radius: 3px; margin-top: clamp(1.5rem, 4vh, 2.5rem); overflow: hidden; }
.pinned__progress span { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 3px; transition: width .3s var(--ease); }
@media (max-width: 820px) {
    .pinned.is-enhanced { height: auto; }
    .pinned.is-enhanced .pinned__inner { position: static; height: auto; min-height: 0; padding-block: var(--section-y); }
    .pinned__grid { grid-template-columns: 1fr; }
    /* Hier staan de stappen weer gewoon onder elkaar. De reset moet compleet zijn:
       de klasse is-enhanced blijft namelijk staan als je een breed venster
       versmalt, en zonder dit zouden de stappen op elkaar blijven liggen én
       verborgen blijven. */
    .pinned.is-enhanced .pinned__steps { gap: clamp(1rem, 2.4vh, 1.9rem); align-items: stretch; }
    .pinned.is-enhanced .pinned__step {
        grid-area: auto; opacity: 1; visibility: visible; transform: none; transition: none;
    }
    .pinned__progress, .pinned.is-enhanced .pinned__progress { display: none; }
}

/* -------------------------------------------------------------
   14c. Belofte-paneel ("Onze overtuiging") op een donkere sectie
   ------------------------------------------------------------- */
.pledge {
    max-width: 62ch; margin: clamp(48px, 8vh, 88px) auto 0; padding: clamp(1.8rem, 4vw, 3rem);
    text-align: center; border: 1px solid var(--line-dark); border-radius: var(--r-xl);
    background: rgba(255,255,255,.045);
}
.pledge__quote {
    margin: 0; font-family: var(--font-head); font-weight: 500; color: #fff;
    font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.24; letter-spacing: -.015em;
    text-wrap: balance;
}
.pledge__quote::before { content: "“"; }
.pledge__quote::after  { content: "”"; }
.pledge__after { margin: 1.1rem 0 0; color: var(--on-dark-mut); }
.pledge .btn-row { justify-content: center; }

/* -------------------------------------------------------------
   15. Manifest
   ------------------------------------------------------------- */
.manifest { padding-block: clamp(90px, 15vh, 190px); text-align: center; }
.manifest__quote { font-family: var(--font-head); font-weight: 600; letter-spacing: -.02em; line-height: 1.16; font-size: clamp(1.7rem, 3.6vw, 3rem); max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.manifest__quote .accent { color: var(--acc); }
.section--dark .manifest__quote .accent, .section--ink .manifest__quote .accent { color: var(--acc-soft); }

/* -------------------------------------------------------------
   16. CTA-band
   ------------------------------------------------------------- */
.cta { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: clamp(48px, 9vw, 96px) clamp(24px, 5vw, 64px); color: #fff; text-align: center; background: var(--grad-cta); }
.cta--photo { background: var(--dark); }
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img, .cta__media { background-size: cover; background-position: center; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,26,40,.72), rgba(0,26,40,.88)); }
.cta__title { color: #fff; font-weight: 700; letter-spacing: -.022em; line-height: 1.08; font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 24ch; margin-inline: auto; }
.cta__text { max-width: 54ch; margin: 26px auto 0; color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.cta .btn-row { margin-top: 36px; justify-content: center; }

/* Full-bleed groene CTA-sectie (home Blok 9) */
.section--cta { background: var(--grad-cta); color: #fff; text-align: center; }
.section--cta h1, .section--cta h2, .section--cta h3 { color: #fff; }
.section--cta .eyebrow { color: var(--acc-soft); }

/* -------------------------------------------------------------
   17. Formulieren
   ------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.field label .req { color: var(--acc); }
.field input, .field textarea, .field select { width: 100%; padding: .85rem 1rem; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--field-line); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: #8AA0AB; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-ring); }
.field textarea { min-height: 8rem; resize: vertical; }
.field--file input { padding: .6rem; background: var(--tint); }
.field__hint { font-size: .82rem; color: var(--muted); }
.field.has-error input, .field.has-error textarea { border-color: var(--err); box-shadow: 0 0 0 4px rgba(180,69,31,.12); }
.field__error { font-size: .82rem; color: var(--err); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Akkoordvinkje (downloadformulier). Het vakje staat naast de tekst in plaats
   van erboven, want een label van drie regels hoort bij één selectievakje. */
.field--check { gap: .3rem; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start;
         font-weight: 400; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .12rem; padding: 0; accent-color: var(--acc); cursor: pointer; }
.check a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.field--check.has-error .check input { outline: 2px solid var(--err); outline-offset: 3px; }

/* Formulierpaneel op een donkere sectie. Het paneel is wit, dus de tekstkleur
   moet hier weer donker worden: anders erft alles wat geen eigen kleurregel
   heeft de lichte kleur van .section--dark en staat het wit op wit. */
.card-panel--form { padding: clamp(1.4rem, 3vw, 2rem); color: var(--ink); }

.intent-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.intent-cards--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .intent-cards, .intent-cards--4 { grid-template-columns: 1fr; } }
.intent-card { position: relative; }
.intent-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.intent-card__box { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); font-weight: 600; transition: border-color .2s, box-shadow .2s, background .2s; }
.intent-card__box .icon { color: var(--acc); }
.intent-card__box span.sub { font-weight: 400; font-size: .9rem; color: var(--muted); }
.intent-card input:hover + .intent-card__box { border-color: var(--acc); }
.intent-card input:checked + .intent-card__box { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; background: var(--tint); }
.intent-card input:focus-visible + .intent-card__box { outline: 3px solid var(--acc); outline-offset: 2px; }

.alert { padding: 1.1rem 1.3rem; border-radius: var(--r); margin-bottom: 1.5rem; border: 1px solid; }
.alert--success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.alert--error   { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); }

.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: 1.5rem; }
.contact-info__item { display: flex; gap: .9rem; }
.contact-info__item .icon { flex: none; color: var(--acc); margin-top: .2rem; }
.contact-info__item h3 { font-size: 1rem; margin: 0 0 .15rem; font-weight: 600; }
.contact-info__item p, .contact-info__item a { color: var(--ink-soft); margin: 0; }
.card-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: var(--shadow-sm); }

/* -------------------------------------------------------------
   18. Overige componenten
   ------------------------------------------------------------- */

.topic { display: flex; flex-direction: column; gap: .4rem; padding: clamp(1.4rem, 3vw, 1.9rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .3s var(--ease), box-shadow .3s; }
.topic:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.topic__icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; background: var(--acc-wash); color: var(--acc); border-radius: 12px; margin-bottom: .4rem; }
.topic h3 { font-size: 1.2rem; margin: 0; font-weight: 600; }
.topic p { color: var(--ink-soft); margin: 0; }

.article-card:hover .article-card__tag { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }

.divider { height: 1px; background: var(--line); border: 0; margin-block: clamp(3rem, 6vw, 5rem); }

/* Octrooinummer — als klein keurmerk naast de tekst */
.patent { display: inline-flex; align-items: stretch; margin: 0; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; font-size: .8rem; line-height: 1; }
.patent__label { padding: 9px 12px; background: var(--tint); color: var(--muted); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; display: inline-flex; align-items: center; }
.patent__nr { padding: 9px 14px; background: var(--paper-2); color: var(--ink); font-weight: 700; font-family: var(--font-head); letter-spacing: .02em; display: inline-flex; align-items: center; }
/* Donkere variant — gekoppeld aan de omgeving, niet aan een losse klasse,
   zodat elke badge in een donkere sectie of de footer vanzelf goed staat. */
.section--dark .patent, .section--ink .patent, .site-footer .patent { border-color: var(--line-dark); }
.section--dark .patent__label, .section--ink .patent__label, .site-footer .patent__label { background: rgba(255,255,255,.10); color: var(--on-dark-mut); }
.section--dark .patent__nr, .section--ink .patent__nr, .site-footer .patent__nr { background: transparent; color: #fff; }
.badge-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* In de footerkolom passen twee badges niet naast elkaar → onder elkaar */
.badge-row--footer { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 1rem; }
/* Aanklikbare variant (CE-verklaring als PDF) */
.patent--link { transition: transform .25s var(--ease), border-color .25s; }
.patent--link .patent__nr { display: inline-flex; align-items: center; gap: .45em; }
.patent--link:hover { transform: translateY(-2px); border-color: var(--acc-soft); }
.section--dark .patent--link:hover .patent__label,
.section--ink .patent--link:hover .patent__label,
.site-footer .patent--link:hover .patent__label { background: rgba(255,255,255,.18); }
.patent--link:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 3px; }

/* Definitielijst — "Wat je van ons mag verwachten" */
.deflist { display: grid; gap: 0; margin: 0; }
.deflist__row { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.deflist__row:last-child { border-bottom: 1px solid var(--line); }
.deflist dt { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin-bottom: .2rem; }
.deflist dd { margin: 0; color: var(--ink-soft); }

.to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); width: 3rem; height: 3rem; z-index: 90; display: grid; place-items: center; background: var(--ink); color: #fff; border: 0; border-radius: 50%; box-shadow: var(--shadow); transform: translateY(1rem) scale(.8); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.to-top .icon { transform: rotate(-90deg); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* -------------------------------------------------------------
   19. Footer
   ------------------------------------------------------------- */
.site-footer { background: var(--footer); color: var(--on-dark-mut); padding-block: clamp(56px, 9vh, 96px) 40px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3rem); padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.brand--footer { --logo-h: 96px; }
/* De tagline past net niet op één regel bij 34ch, waardoor "klacht." als los
   woord op regel twee bleef staan. Iets meer ruimte, en balance zodat hij bij
   grotere tekstinstellingen alsnog netjes over twee regels verdeelt. */
.site-footer__tagline { color: var(--on-dark-mut); max-width: 42ch; margin-top: 1rem; font-size: .92rem; line-height: 1.55; text-wrap: balance; }
.site-footer__heading { color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer__col ul { list-style: none; display: grid; gap: 11px; font-size: .95rem; }
.site-footer__col a { color: var(--on-dark-mut); transition: color .2s; }
.site-footer__col a:hover { color: #fff; }
.site-footer__contact li { display: flex; align-items: center; gap: .6rem; }
.site-footer__contact .icon { color: var(--on-dark-mut); flex: none; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 26px; color: var(--on-dark-faint); font-size: .82rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; }
.site-footer__legal a { color: var(--on-dark-faint); }
.site-footer__legal a:hover { color: #fff; }

/* -------------------------------------------------------------
   20. Scroll-reveal & motion
   ------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay: var(--reveal-delay, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* Woord-voor-woord onthulling van grote koppen (Apple-stijl: fade + rise) */
.split { opacity: 1 !important; transform: none !important; filter: none !important; }
.split .word { display: inline-block; }
.split .word__i { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.split.is-visible .word__i { opacity: 1; transform: none; }

/* Ambient "aurora": de hero-gradient drijft en ademt heel subtiel */
@keyframes aurora {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
    33%      { transform: translate3d(-2.2%, 1.6%, 0) scale(1.14); }
    66%      { transform: translate3d(1.8%, -1.4%, 0) scale(1.09); }
}

@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes breatheAlt { 0%,100% { transform: scale(1.055); } 50% { transform: scale(.965); } }
@keyframes ping { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1; transform: none; filter: none; }
    .split .word__i { transform: none; }
    .circle,
    .hero::before, .page-hero::before { animation: none; }
    /* geen parallax-transform op de hero-inhoud in reduced-motion */
    .hero__inner { transform: none !important; opacity: 1 !important; }
}

/* -------------------------------------------------------------
   Academy-artikelen
   ------------------------------------------------------------- */
/* Expertinzicht: één uitgelicht inzicht per artikel, met een accentstreep links.
   De bronvermelding hoort er altijd bij — een kader zonder afzender belooft
   gezag dat het niet waarmaakt (Deel C van de briefing). */
.expert { margin: clamp(36px,5vh,56px) 0; padding: clamp(24px,3vw,34px) clamp(22px,3vw,34px); border-left: 4px solid var(--expert); background: var(--tint); border-radius: 0 var(--r) var(--r) 0; }
.expert__label { display: block; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; font-weight: 600; color: var(--ink-soft); }
.expert__quote { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.15rem,1.9vw,1.5rem); line-height: 1.36; letter-spacing: -.01em; color: var(--ink); }
.expert__source { margin: 14px 0 0; font-size: .92rem; color: var(--ink-soft); }

/* Artikeltekst: iets smaller dan de standaard prose, want lange leesteksten
   lezen prettiger op circa 68 tekens. */
.artikel { max-width: 68ch; margin-inline: auto; }
.artikel h2 { font-size: clamp(1.5rem,2.6vw,2.1rem); margin-top: clamp(38px,5vh,58px); }
.artikel h3 { font-size: clamp(1.15rem,1.8vw,1.4rem); margin-top: clamp(26px,3.5vh,38px); }
.artikel figure { margin: clamp(32px,4.5vh,48px) 0; }
.artikel figcaption { margin-top: 12px; font-size: .9rem; color: var(--ink-soft); text-align: center; }
.artikel__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: clamp(28px,4vh,40px); font-size: .92rem; color: var(--ink-soft); }
/* Slotbeeld: het zadel in beeld op artikelen die verder alleen omgevingsfoto's
   en schema's hebben. De link staat op een eigen regel onder het bijschrift. */
.artikel__slotbeeld figcaption .text-link { display: inline-flex; margin-top: 10px; }
.artikel__bronnen { margin-top: clamp(36px,5vh,52px); padding-top: clamp(24px,3vh,32px); border-top: 1px solid var(--line); }
.artikel__bronnen li { margin-bottom: .5em; color: var(--ink-soft); font-size: .95rem; }
.artikel__auteur { margin-top: clamp(28px,4vh,40px); padding: clamp(20px,2.6vw,28px); background: var(--tint); border-radius: var(--r); }

/* Het zadelblok dat onderaan iedere pagina staat (zie zadelband() in
   site/helpers.mjs). Smalle band: het beeld is een staande uitsnede op wit, dus
   het krijgt een eigen kader met een krappe kolom — groter uitvergroot ziet een
   productfoto op wit er al gauw uit als een advertentie. */
/* De haarlijnen zijn er voor /contact: daar grenst de band aan een sectie met
   dezelfde ijsblauwe achtergrond en zou hij zonder scheiding in één groot vlak
   opgaan. Tegen een lichte of donkere buur vallen ze niet op. */
.zadelband { padding-block: clamp(40px,5.5vh,72px); background: var(--tint);
    border-block: 1px solid var(--line); }
.zadelband__inner { display: grid; grid-template-columns: 1fr; gap: clamp(22px,3vw,46px); align-items: center; }
@media (min-width: 700px) { .zadelband__inner { grid-template-columns: minmax(0, 232px) 1fr; } }
/* Grote variant, alleen op /contact: daar staat het zadel bóven het formulier en
   is het het eerste dat je van het product ziet, dus mag het ruimer. */
.zadelband__inner--groot { margin-block: clamp(28px,4vh,44px); }
@media (min-width: 700px) { .zadelband__inner--groot { grid-template-columns: minmax(0, 340px) 1fr; } }
.zadelband__inner--groot .zadelband__foto { max-width: 260px; }
/* Op één kolom zou de staande foto over de volle breedte een half scherm vullen
   en de tekst wegduwen; hij is hier het beeldmerk, niet het onderwerp. */
.zadelband__foto { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
    max-width: 176px; }
.zadelband__foto img { width: 100%; height: auto; background: #fff; }
/* Geen kop in dit blok (zie zadelband() in site/helpers.mjs). De lopende tekst
   staat daarom iets groter dan gewone bodytekst: zonder kop erboven moet die zin
   het blok zelf dragen. */
.zadelband__tekst p:not(.eyebrow) { max-width: 56ch; color: var(--ink-soft); font-size: 1.05em; }
.zadelband__tekst .text-link { margin-top: 18px; display: inline-flex; }

/* Videorij op "Hoe het werkt" (de overige video's onder de grote) en op de
   Academy, waar alle vijf in hetzelfde raster staan. Vijf in een raster van drie
   laat er twee over op de tweede rij; die vullen daar de eerste twee kolommen,
   wat prettiger leest dan gecentreerde losse eindjes. */
.videorij { display: grid; grid-template-columns: 1fr; gap: clamp(18px,2.4vw,26px); margin-top: clamp(22px,3vw,32px); }
@media (min-width: 760px) { .videorij { grid-template-columns: repeat(3, 1fr); } }
.videorij--groot { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
@media (min-width: 760px) { .videorij--groot { grid-template-columns: 1fr; } }
.videorij__item { margin: 0; }
.videorij__item video { width: 100%; height: auto; }
.videorij__item figcaption { margin-top: 10px; font-size: .92rem; line-height: 1.5; color: var(--on-dark-mut); }
.videorij__titel { display: block; margin-bottom: .25em; font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }

/* Afspeelknop over het posterframe. Hij staat iets boven het midden, want de
   ondertiteling zit in het beeld gebrand en loopt langs de onderrand. Zodra de
   video speelt verdwijnt de knop en neemt de balk van de browser het over. */
.videobox { position: relative; }
.videobox__play { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 74px; height: 74px; padding: 0 0 0 4px;
    color: var(--dark); background: rgba(255,255,255,.92); border: 0; border-radius: 50%;
    box-shadow: 0 16px 34px -14px rgba(0,26,40,.7); cursor: pointer;
    transition: transform .25s var(--ease), background .25s var(--ease); }
.videobox__play:hover { transform: translate(-50%, -50%) scale(1.07); background: #fff; }
.videobox__play:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 3px; }
.videobox.is-playing .videobox__play { display: none; }
@media (prefers-reduced-motion: reduce) { .videobox__play { transition: none; } }