/* De componenten. Alle waarden komen uit tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--astronaut-100); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--sky-700); }
.tone-dark a:not(.btn) { color: var(--sky-400); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-3); }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.12; }
h1 { font-size: var(--fs-h1); font-weight: 900; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 800; line-height: 1.25; }
p + p { margin-top: 0.8em; }
.over { font-size: var(--fs-over); font-weight: 700; letter-spacing: var(--tracking-over); text-transform: uppercase; color: var(--sky-700); }
.tone-dark .over { color: var(--sky-400); }
.lead, .intro { font-size: var(--fs-lead); color: var(--muted); }
.tone-dark .lead, .tone-dark .intro, .tone-dark p { color: var(--muted-dark); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-2); top: var(--s-2); z-index: 10; background: var(--white); padding: 8px 12px; }
:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }

/* Achtergronden */
.tone-dark { background: var(--space-950); color: var(--white); }
.tone-light { background: var(--astronaut-100); }
.tone-white { background: var(--white); }

/* Knoppen: één primaire per sectie, werkwoord voorop */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-4); }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent; }
.btn-primary { background: var(--sky-700); color: var(--white); }
.btn-primary-dark { background: var(--astronaut-500); color: var(--white); }
.btn-ghost { border-color: var(--astronaut-300); color: var(--ink); }
.btn-ghost-dark { border-color: var(--astronaut-500); color: var(--white); }
.btn:hover { filter: brightness(1.08); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; margin-top: auto; padding-top: var(--s-2); white-space: nowrap; }

/* Iconen (Phosphor) */
.ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: var(--blue-soft); color: var(--sky-700); flex: none; }
.ico.small { width: 30px; height: 30px; font-size: 17px; border-radius: 50%; }
.ico.rose { background: var(--rose-soft); color: var(--rose-ink); }
.ico.yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.tone-dark .ico { background: var(--space-800); color: var(--sky-400); }

/* Kop en navigatie */
.site-header { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--space-800); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 76px; }
.brand img { height: 30px; width: auto; }
.menu { display: flex; gap: 28px; list-style: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.menu a, .menu button { color: var(--white); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.menu .active > a, .menu .active > button, .menu a[aria-current] { color: var(--sky-400); }
.has-sub { position: relative; }
.has-sub ul { display: none; position: absolute; top: calc(100% + 14px); left: -16px; list-style: none; background: var(--space-900); border: 1px solid var(--space-800); border-radius: var(--r-md); padding: 8px; min-width: 240px; box-shadow: var(--shadow); }
.has-sub button[aria-expanded="true"] + ul, .has-sub:focus-within ul { display: block; }
.has-sub ul a { display: block; padding: 8px 12px; border-radius: var(--r-sm); }
.has-sub ul a:hover { background: var(--space-800); }
.nav-cta .btns { margin-top: 0; }
.nav-cta .btn { white-space: nowrap; padding: 0 18px; }
.menu { gap: 24px; }
.mobile-menu { display: none; }

/* Secties */
.sec { position: relative; padding: var(--s-7) 0; }
.sec-hero { padding: var(--s-6) 0 var(--s-7); }
.sec-logos { padding: var(--s-4) 0; }
.sec-head { max-width: 720px; margin-bottom: var(--s-5); }
.sec-head h2 { margin-top: 10px; }
.sec-head + .intro { margin-top: calc(-1 * var(--s-4)); margin-bottom: var(--s-5); max-width: 720px; }
.grid { display: grid; gap: var(--s-3); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: center; }
.split.media-right > figure { order: 2; }
.prose { max-width: 760px; }
.prose p, .prose ul { margin-top: 0.8em; }
.prose ul { padding-left: 1.2em; }

/* Opening */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-5); align-items: center; }
.hero h1 { margin-top: 14px; }
.hero .lead { margin-top: var(--s-3); }
/* Productnamen in de introtekst: een grijze stippellijn eronder; bij hover vult het woord zich met de kleur van het product (Voice blauw, Care geel) */
.hero .lead a:is([href="/discovery-voice/"], [href="/discovery-care/"]) { --mark: var(--blue); color: inherit; padding: 0 2px; border-radius: 2px; text-decoration: underline dotted 2px color-mix(in srgb, currentColor 50%, transparent); text-underline-offset: 5px; background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 100% / 100% 0%; transition: background-size 0.25s, color 0.25s, text-decoration-color 0.25s; }
.hero .lead a[href="/discovery-care/"] { --mark: var(--yellow); }
.hero .lead a:is([href="/discovery-voice/"], [href="/discovery-care/"]):hover { background-size: 100% 100%; color: var(--space-950); text-decoration-color: transparent; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: var(--s-3); font-size: var(--fs-small); color: var(--muted-dark); }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust i { color: var(--sky-400); font-size: 16px; }
.hero-visual { position: relative; }
.hero-visual .photo { min-height: 430px; }
.hero-visual .float { position: absolute; right: -24px; bottom: -36px; width: 62%; }

/* Beelden: het product in een demo-kader, foto's met mensen */
.shot, .float { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--astronaut-500); background: var(--space-900); box-shadow: var(--shadow); }
.shot img, .float img { width: 100%; height: auto; }
.shot figcaption, .float figcaption { font-size: 12px; color: var(--muted-dark); padding: 8px 14px; border-top: 1px solid var(--astronaut-500); }
/* Een werkende widget in plaats van een schermbeeld. De widgets staan in een eigen "stage" (padding en
   achtergrond, uit hd-widgets.css); op de site staat de widget zonder die rand in de sectie. */
.shot.live { min-width: 0; overflow: visible; border: 0; background: none; box-shadow: none; }
/* Elke widget een eigen stapellaag: de tegels van HoneyGrid hebben z-index tot in de honderden en
   kwamen anders over de vaste menubalk heen. */
.shot.live, .widget-wide { isolation: isolate; }
.shot.live .hdw-stage, .widget-wide .hdw-stage { padding: 0; background: none; }
.widget-wide .hdw-stage { border-radius: 20px; }
/* Ruimte voor de widget zolang zijn script nog niet geladen is, zodat de pagina niet verspringt. De
   widgets zelf zijn 370 tot 680px hoog; de spraakwidget groeit tijdens het afspelen niet (409-415px). */
.shot.live > :not(:defined), .widget-wide :not(:defined) { display: block; min-height: 400px; }
/* De HoneyGrid vooraf op zijn echte hoogte, zodat hij niet verspringt als het script laadt: kaartkop en
   randen (122.5px) plus het raster, 3.031 keer de tegelbreedte (een kwart van de ruimte, 64 tot 116px). */
.shot.live:has(> hd-honeygrid) { container-type: inline-size; }
/* De apparaten staan los op de sectie: hun schaduw loopt door buiten het kader, anders tekent de rand
   van het kader een rechthoek. */
.shot.live > hd-voice-devices .vd-fit { overflow: visible; }
.widget-wide hd-dashboard-devices:not(:defined) { min-height: 0; aspect-ratio: 1160 / 660; max-height: 660px; }
.shot.live > hd-voice-devices:not(:defined) { min-height: 0; aspect-ratio: 512 / 400; max-height: 400px; }
.shot.live > hd-honeygrid:not(:defined) { min-height: calc(122.5px + 3.031 * clamp(64px, (100cqw - 54px) / 4, 116px)); }
.shot.live figcaption, .widget-wide figcaption { border-top: 0; padding: 10px 2px 0; color: var(--muted); }
.tone-dark .shot.live figcaption { color: var(--muted-dark); }
/* Tekst die direct op de stage staat (buiten de kaart: koppen en labels) is wit voor een donkere
   achtergrond; op een lichte sectie krijgt hij de tekstkleuren van de site. */
:is(.tone-light, .tone-white) .shot.live .hdw-stage > div > :is(.hdw-row, label) {
  --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--muted); --icon-accent: var(--sky-700);
}
/* Aanbevolen acties op smalle breedte: de tekst blijft naast het icoon en de knop gaat eronder,
   ook bij een lange titel (hd-widgets.css laat de rij anders per kaart anders afbreken). */
@container hdw (max-width: 520px) { .sa-row > .hdw-grow { flex: 1 1 calc(100% - 45px); } }
/* Het dashboard is een achtergrondbeeld: minder vaag dan in het ontwerp (3.4px), nog steeds onleesbaar;
   ook de paginatitel, de kaarttitels en hun iconen (het ontwerp liet die scherp). */
/* (Voorafgegaan door .widget-scale: de widgetstijlen laden na deze, dus de selector moet zwaarder zijn.) */
.widget-scale .db-skeleton .db-card > :not(.db-ch), .widget-scale .db-skeleton .db-qa > *, .widget-scale .db-skeleton h1 + .hdw-row, .widget-scale .db-skeleton :is(h1, .db-ch .chip, .db-ch h2, .db-ch .meta) { filter: blur(1.5px); }
.widget-wide { margin: var(--s-4) auto 0; max-width: 1100px; min-width: 0; }
.widget-scale { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.widget-scale > div { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.photo { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; background: linear-gradient(150deg, #D9C7B5 0%, #B8A595 35%, #8C9DB1 100%); }
.photo.tall { min-height: 420px; }
.photo.portrait { aspect-ratio: 4 / 5; min-height: 0; }
/* Een echte foto krijgt de maat van de plek, niet die van het bestand: de foto vult het vlak en wordt bijgesneden. */
.photo.real { display: block; background: none; }
.photo.logo { align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--astronaut-300); padding: 48px; }
.photo.logo img { width: 100%; max-width: 360px; height: auto; }
.photo.real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo .who { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 40px; color: rgba(15, 24, 36, 0.25); font-size: 110px; }
.photo .brief { position: relative; margin: 16px; background: rgba(15, 24, 36, 0.8); color: var(--white); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; line-height: 1.45; max-width: 440px; }
.photo .brief b { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 2px; }
.hero-visual .photo .brief { margin-bottom: 150px; }

/* Logo's */
.logos { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.logos-label { font-size: var(--fs-small); color: var(--muted); max-width: 170px; }
.logo-slot { flex: 1; min-width: 130px; height: 44px; border: 1px dashed #9FB2CC; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #6C7F99; font-size: 13px; text-align: center; }
.logos-img { height: 160px; width: auto; }
/* Keurmerken van DigiTrust: als losse beelden, onbewerkt, niet opvallender dan naam en logo van Hawking. */
/* De bestanden zijn transparant en bedoeld voor een witte ondergrond: op een donkere band een wit vlak erachter
   (het keurmerk zelf blijft onbewerkt, zoals DigiTrust voorschrijft). */
.sec-logos .logos-img[src*="/certificaten/"] { height: 136px; padding: 8px; border-radius: 12px; background: var(--white); box-sizing: border-box; }
.tone-dark .logos-label { color: var(--muted-dark); }
/* Een kop als een merkkleurband boven de logo's (logos met title:). Op donker: overline en titel wit,
   het reuzenicoon in een donkerdere tint van de band, zoals bij de gekleurde banden. */
.logos-band { margin-bottom: var(--s-4); }
/* Het reuzenicoon midden op de hele band (kop en keurmerken), zoals bij de andere banden. */
.sec-logos .wrap:has(> .logos-band) { position: relative; }
.sec-logos .logos-band { position: static; min-height: 0; }
.sec-logos.tone-dark { --big: var(--space-800); }
.sec-logos:has(.logos-band) { padding: var(--s-5) 0; overflow: hidden; }
.tone-dark .logos-band .over, .tone-dark .logos-band h2 { color: var(--white); }
.sec-logos .note { font-size: var(--fs-small); color: var(--muted); margin-top: 10px; }

/* Kaarten en stappen */
.card, .step { background: var(--white); border: 1px solid var(--astronaut-300); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
/* Lange samenstellingen (gegevensbeschermingseffectbeoordeling) breken af in plaats van de hele rij kaarten
   breder te maken dan een telefoonscherm. */
.card, .step { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.tone-white .card, .tone-white .step { background: var(--astronaut-100); }
.tone-dark .card { background: var(--space-900); border-color: var(--space-800); }
.card p, .step p { color: var(--muted); }
.tone-dark .card p { color: var(--muted-dark); }
.pill { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--astronaut-100); border-radius: var(--r-pill); padding: 3px 10px; color: var(--muted); }
.tone-dark .pill { background: var(--space-800); color: var(--muted-dark); }
.step { position: relative; }
.step-num { position: absolute; top: var(--s-3); right: var(--s-4); font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--astronaut-300); }
.ico.plain { width: auto; height: auto; background: none; border-radius: 0; color: var(--ink); font-size: 30px; justify-content: flex-start; }

/* Producten naast elkaar */
.plan { background: var(--white); border: 1px solid var(--astronaut-300); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.tone-white .plan { background: var(--astronaut-100); }
.plan .bar { display: block; width: 56px; height: 6px; border-radius: 3px; background: var(--blue); margin-bottom: 6px; }
.plan .bar.rose { background: var(--rose); }
.plan .bar.yellow { background: var(--yellow); }
.plan-sub { color: var(--muted); font-size: 17px; }
.plan-tag { font-weight: 700; }
.plan-list ul { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.plan-list li { position: relative; padding-left: 28px; color: var(--muted); font-size: 15px; }
.plan-list li::before { content: "\2713"; position: absolute; left: 2px; top: 0; font-weight: 800; color: var(--sky-700); }
.plan-list li strong { color: var(--ink); }
.plan-dark { background: var(--space-950) !important; border-color: var(--space-950); color: var(--white); }
.plan-dark .plan-sub, .plan-dark li { color: var(--muted-dark); }
.plan-dark li strong { color: var(--white); }
.plan-dark li::before, .plan-dark .more { color: var(--sky-400); }

/* Gekleurde tegels (fill: true): magenta, cyaan en geel. Tekst altijd navy; rechts een reuzencijfer
   in een donkerdere tint van dezelfde kleur, afgesneden door de rand. Geen iconen: het cijfer is het beeld. */
.fill > .card, .fill > .step { border: 0; position: relative; overflow: hidden; min-height: 240px; justify-content: flex-start; padding-top: 128px; padding-right: 72px; }
.fill > :nth-child(3n+1) { background: var(--rose) !important; --big: var(--rose-500); }
.fill > :nth-child(3n+2) { background: var(--blue) !important; --big: var(--berry-600); }
.fill > :nth-child(3n) { background: var(--yellow) !important; --big: var(--canary-500); }
.fill > * h3, .fill > * p, .fill .more { position: relative; color: var(--space-950) !important; }
.fill .big-num { position: absolute; top: -34px; right: -14px; font-family: var(--font-display); font-weight: 900; font-size: 200px; line-height: 1; letter-spacing: -0.05em; color: var(--big); }
/* Een infoblok onder kaarten (note: en buttons:): icoon, korte tekst met de vette eerste zin als kop, en de
   knoppen rechts ernaast; op smalle schermen onder elkaar. */
.info-block { margin-top: var(--s-4); display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: var(--s-3); row-gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--astronaut-100); border: 1px solid var(--astronaut-300); }
.tone-light .info-block { background: var(--white); }
.tone-dark .info-block { background: var(--space-900); border-color: var(--space-800); }
.info-block > .after-note, .info-block > .btns { grid-column: 2; }
.info-block > .ico { background: var(--white); }
.after-note { max-width: 760px; color: var(--muted); }
.after-note strong:first-child { display: block; margin-bottom: 4px; font-size: 19px; color: var(--ink); }
.tone-dark .after-note strong:first-child { color: var(--white); }
.info-block .btns { margin-top: 0; }
@media (max-width: 600px) { .info-block { grid-template-columns: 1fr; } .info-block > .after-note, .info-block > .btns { grid-column: 1; } }

/* Merkkleurvlakken (tone: rose, blue, yellow): de hele sectie in de merkkleur, alles erop navy.
   Kaarten worden kolommen met een navy lijn erboven, zonder iconen. */
.tone-rose { background: var(--rose); }
.tone-blue { background: var(--blue); }
.tone-yellow { background: var(--yellow); }
.tone-rose, .tone-blue, .tone-yellow { color: var(--space-950); }
.tone-rose .over, .tone-blue .over, .tone-yellow .over,
.tone-rose p, .tone-blue p, .tone-yellow p,
.tone-rose .intro, .tone-blue .intro, .tone-yellow .intro,
.tone-rose .after-note, .tone-blue .after-note, .tone-yellow .after-note,
.tone-rose .more, .tone-blue .more, .tone-yellow .more { color: var(--space-950); }
.tone-rose .card, .tone-blue .card, .tone-yellow .card { background: none; border: 0; border-top: 3px solid var(--space-950); border-radius: 0; padding: var(--s-2) 0 0; }
.tone-rose .ico, .tone-blue .ico, .tone-yellow .ico { display: none; }
.tone-rose .btn-primary, .tone-blue .btn-primary, .tone-yellow .btn-primary { background: var(--space-950); color: var(--white); }
.tone-rose .btn-ghost, .tone-blue .btn-ghost, .tone-yellow .btn-ghost { border-color: var(--space-950); color: var(--space-950); }
.tone-rose mark.todo, .tone-blue mark.todo, .tone-yellow mark.todo { background: rgba(255, 255, 255, 0.55); color: var(--space-950); }
.tone-rose .quote { background: none; padding: 0; }

/* Een lijst zonder iconen: lijnen ertussen */
.prose ul.plain, .plain-list ul { list-style: none; padding-left: 0; }
.plain-list li { padding: 14px 0; border-top: 1px solid var(--astronaut-300); }
.icon-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
/* Feature met columns: grid: kop en inleiding over de volle breedte, onderdelen in twee kolommen. Een widget-sectie
   met dezelfde achtergrond direct erna sluit aan zonder extra ruimte. */
.feature-grid .intro { max-width: 820px; margin-top: var(--s-2); }
.checks.checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); margin-top: var(--s-3); }
.sec-feature.tone-light + .sec-widget.tone-light, .sec-feature.tone-white + .sec-widget.tone-white { padding-top: 0; }
.two-col-body { column-count: 2; column-gap: var(--s-5); margin-top: var(--s-3); }
.two-col-body > *:first-child, .two-col-body .lead > p:first-child { margin-top: 0; }
.two-col-body li { break-inside: avoid; }
:is(.two-col-body, .two-col.has-list) :is(.belief, .checks) { display: block; }
/* Met een lijst: kop, tekst en knoppen links, de lijst rechts vanaf de bovenkant van de sectie, zodat de punten
   in volgorde onder elkaar staan (bijv. 2022 boven 2024). */
.two-col.has-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.two-col.has-list > :is(.belief, .checks) { margin-top: 0; }
.two-col.has-list > :is(.belief, .checks) > li:first-child { border-top: 0; padding-top: 0; }
.two-col.has-list .btns { margin-top: var(--s-4); }
.two-col.has-list .sec-head { margin-bottom: var(--s-4); }
:is(.two-col-body, .two-col.has-list) .checks li { margin-bottom: 14px; }
/* Lijsten in een sectie met twee kolommen in dezelfde stijl als de lijsten bij een feature: klein rond icoon,
   lijn ertussen. */
:is(.two-col-body, .two-col.has-list) .belief li { padding: 14px 0; border-top: 1px solid var(--astronaut-300); break-inside: avoid; }
:is(.two-col-body, .two-col.has-list) .belief .ico { width: 30px; height: 30px; font-size: 17px; border-radius: 50%; }
.col-logo { display: block; width: 160px; height: auto; margin-bottom: var(--s-3); }
.plain-list li strong { display: block; font-family: var(--font-display); font-size: 18px; }

/* Merkkleurband: kort, met een reuzenwoord in een donkerdere tint, afgesneden door de rand */
.sec-band { padding: var(--s-5) 0; overflow: hidden; }
.tone-rose { --big: var(--rose-500); }
.tone-blue { --big: var(--blue-600); }
.tone-yellow { --big: var(--canary-500); }
.band { position: relative; min-height: 176px; display: flex; align-items: center; }
.band-text { position: relative; max-width: 58%; }
.band-text h2 { margin-top: 10px; font-size: clamp(32px, 4.2vw, 52px); font-weight: 900; }
.band-text .lead { margin-top: var(--s-2); color: var(--space-950); }
.band-word { position: absolute; right: -4vw; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 900; font-size: clamp(100px, 15vw, 220px); line-height: 0.8; letter-spacing: -0.05em; color: var(--big); white-space: nowrap; }
.band-icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 176px; line-height: 1; color: var(--big); }
@media (max-width: 900px) { .band-text { max-width: 100%; } .band-word, .band-icon { opacity: 0.5; } }

/* Het citaat in roze: een groot aanhalingsteken rechts, in de donkerdere tint, afgesneden door de rand */
.sec-quote.tone-rose { overflow: hidden; }
.sec-quote.tone-rose .wrap { position: relative; }
.tone-rose .quote { display: block; position: relative; max-width: 72%; }
.tone-rose .quote .mark { display: none; }
.sec-quote.tone-rose .wrap::after { content: "\201D"; position: absolute; right: -3vw; top: 50%; transform: translateY(-38%); font-family: var(--font-display); font-weight: 900; font-size: clamp(220px, 28vw, 420px); line-height: 0.8; color: var(--rose-500); pointer-events: none; }
@media (max-width: 900px) { .tone-rose .quote { max-width: 100%; } .sec-quote.tone-rose .wrap::after { opacity: 0.5; } }

/* Kolommen met een navy lijn erboven, zonder kaders */
.lines > .card { background: none !important; border: 0; border-top: 3px solid var(--space-950); border-radius: 0; padding: var(--s-2) 0 0; }
.lines .ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--ink); font-size: 30px; justify-content: flex-start; align-self: flex-start; }

/* Een citaat in roze: compacter dan een hoofdstukvlak */
.sec-quote.tone-rose { padding: var(--s-5) 0; }
.tone-rose .quote p { font-size: clamp(21px, 2.4vw, 28px); }

/* Geen weeskinderen in koppen */
h1, h2, h3 { text-wrap: balance; }
main p, main li { text-wrap: pretty; }

/* Lijst naast beeld */
.checks, .belief { list-style: none; margin-top: var(--s-3); display: grid; gap: 4px; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--astronaut-300); }
.checks li p, .belief li p { color: var(--muted); font-size: 15px; }
/* Een lijst die de widget ernaast bedient (linked: true): het actieve onderdeel licht op, met een lijn
   bovenaan die vol loopt tot de volgende stap (--step-ms, gezet door de widget). */
.checks-linked li { position: relative; cursor: pointer; outline: none; padding-left: 16px; padding-right: 16px; border-radius: 0; transition: opacity var(--dur-base, 200ms) ease, background 300ms ease; }
.checks-linked li.is-on + li { border-top-color: transparent; }
.checks-linked li.is-on { background: var(--white); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 8px 24px -16px rgba(13, 22, 38, 0.35); }
/* De kaart schuift mee naar het actieve onderdeel; een lijn loopt van de punt van de kaart naar het onderdeel. */
.shot.live.is-linked { align-self: stretch; position: relative; }
.is-linked.is-beside > hd-voice-tour { display: block; transform: translateY(var(--card-y, 0px)); transition: transform 450ms cubic-bezier(.2, .7, .3, 1); }
.is-linked.is-beside .hdw-stage { position: relative; }
.is-linked.is-beside .vt-pin::after { content: ""; position: absolute; left: 8px; top: -1px; width: calc(var(--s-5) - 8px); height: 2px; background: var(--sky-700); }
@media (prefers-reduced-motion: reduce) { .is-linked > hd-voice-tour, .vt-pin { transition: none !important; } }
.checks-linked li:not(.is-on) { opacity: 0.6; }
.checks-linked li:hover, .checks-linked li:focus-visible { opacity: 1; }
.checks-linked li:focus-visible strong { text-decoration: underline; }
.checks-linked li.is-on .ico { background: var(--sky-700); color: var(--white); }
.checks-linked li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--sky-700); }
.checks-linked li.is-on::before { width: 100%; }
.checks-linked:not(.is-paused) li.run-0::before { animation: step-0 var(--step-ms, 4s) linear both; }
.checks-linked:not(.is-paused) li.run-1::before { animation: step-1 var(--step-ms, 4s) linear both; }
@keyframes step-0 { from { width: 0; } to { width: 100%; } }
@keyframes step-1 { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .checks-linked li::before { animation: none !important; } }
.belief { gap: 14px; }
.belief li { display: grid; grid-template-columns: auto 1fr; gap: 14px; }

/* Veilig en verantwoord, kort */
.safe { align-items: start; }
.safe-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.safe-item { background: var(--space-900); border: 1px solid var(--space-800); border-radius: var(--r-md); padding: var(--s-3); display: flex; flex-direction: column; gap: 6px; }
.tone-light .safe-item, .tone-white .safe-item { background: var(--white); border-color: var(--astronaut-300); }
.safe-item strong { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin-top: 6px; }
.safe-item p { font-size: 14px; }

/* Citaat */
.quote { background: var(--rose); color: var(--space-950); border-radius: var(--r-lg); padding: var(--s-5); display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
.quote .mark { font-family: var(--font-display); font-weight: 900; font-size: 120px; line-height: 0.7; }
.quote p { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.3; color: var(--space-950); }
.quote figcaption { margin-top: 14px; font-weight: 600; font-size: 15px; }
.quote-blue { background: var(--blue); }
.quote mark.todo { background: rgba(255, 255, 255, 0.55); }

/* Vragen en antwoorden */
.faq { border-top: 1px solid var(--astronaut-300); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--astronaut-300); padding: 18px 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s-2); font-weight: 700; font-size: 17px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--sky-700); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: 10px; color: var(--muted); }

/* Slotblok */
.cta { background: var(--sky-700); color: var(--white); border-radius: var(--r-lg); padding: var(--s-5); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.cta p { color: #D4EAF6; margin-top: 8px; }
.cta .btns { margin-top: 0; flex: none; }
.cta .btn-primary-dark { background: var(--yellow); color: var(--space-950); }

/* Team */
.member h3 { margin-top: var(--s-2); }
.member .role { color: var(--muted); font-size: var(--fs-small); }
.member p { margin-top: 6px; }

/* Voet */
.site-footer { padding: var(--s-6) 0 var(--s-3); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-4); }
.foot-grid img { height: 26px; width: auto; margin-bottom: var(--s-2); }
.foot-grid p { color: var(--muted-dark); font-size: var(--fs-small); max-width: 300px; }
.foot-grid h4 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 10px; }
.foot-grid ul { list-style: none; }
.foot-grid li { padding: 3px 0; }
.foot-grid a { color: var(--white) !important; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.foot-grid li i { color: var(--sky-400); }
/* Kenmerken onder de beschrijving in de voet (footer.trust in site.json). */
.foot-trust { margin-top: var(--s-2); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.foot-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 0; font-size: var(--fs-small); color: var(--muted-dark); }
.foot-trust i { font-size: 16px; }
.foot-bottom { border-top: 1px solid var(--space-800); margin-top: var(--s-5); padding-top: var(--s-2); font-size: 13px; color: var(--muted-dark); display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.foot-bottom a { color: var(--muted-dark) !important; }

/* Alleen in de preview */
.preview-bar { background: var(--yellow); color: var(--space-950); font-size: 13px; padding: 8px 0; }
.preview-bar .wrap { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.preview-bar nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }
.preview-bar a { color: var(--space-950); }
.preview-bar a[aria-current] { font-weight: 700; }
.block-label { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--rose); color: var(--space-950); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }
mark.todo { background: var(--yellow-soft); color: var(--yellow-ink); border-radius: 3px; padding: 0 3px; }
.tone-dark mark.todo { background: #3A3214; color: var(--yellow); }
body:not(.is-preview) mark.todo { background: none; color: inherit; padding: 0; }
.is-preview [data-todo] { outline: 2px dashed var(--yellow); outline-offset: 2px; }

/* Smalle schermen */
@media (max-width: 900px) {
  .menu, .nav-cta { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { list-style: none; font-size: 28px; color: var(--white); cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu .panel { position: absolute; right: 0; top: 44px; width: min(320px, 90vw); background: var(--space-900); border: 1px solid var(--space-800); border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow); }
  .mobile-menu .panel ul { list-style: none; }
  .mobile-menu .panel a:not(.btn) { display: block; padding: 10px 12px; color: var(--white); text-decoration: none; }
  .mobile-menu .panel .btns { margin: 8px 4px 4px; }
  .two-col-body { column-count: 1; }
  .two-col.has-list { grid-template-columns: 1fr; }
  .checks.checks-grid { grid-template-columns: 1fr; }
  .hero, .split, .cols-2, .cols-3, .cols-4, .foot-grid, .safe-list { grid-template-columns: 1fr; }
  .split.media-right > figure { order: 0; }
  .hero-visual .float { position: relative; right: 0; bottom: 0; width: 100%; margin-top: -60px; }
  .hero-visual .photo .brief { margin-bottom: 70px; }
  .sec { padding: var(--s-6) 0; }
  .cta { flex-direction: column; align-items: flex-start; padding: var(--s-4); }
  .quote { grid-template-columns: 1fr; padding: var(--s-4); }
  .quote .mark { font-size: 80px; }
  .quote p { font-size: 21px; }
}

/* Dezelfde kaartschaduw (--shadow-card) onder elke widget; tekstkaarten en afbeeldingen houden hun eigen stijl. */
.shot.live :is(.hd-card, .vf-card, .vc), .widget-wide .jy-panel { box-shadow: var(--shadow-card); }

/* Tijdelijke foto op Over Hawking: zacht gemaakt tot de definitieve opname er is. De waarde van blur() is vrij
   te kiezen; de kleine zoom houdt de randen scherp. Weghalen zodra de nieuwe foto er staat. */
.photo img[src$="/over-hawking-team.jpg"] { filter: blur(0.7px); transform: scale(1.2); }