/* Ontwerpconcept, drie schermen. Eén schaal voor alle afstanden: 8, 16, 24, 40, 64, 104, 160.
   Vier lettergroottes per breedte. Donker als basis, één licht moment. Goud als fijn accent. */
:root {
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 80px; --s7: 112px;
  --t1: 64px; --t2: 40px; --t3: 18px; --t4: 14px;
  --content: 1200px; --gutter: 40px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 820px) { :root { --t1: 38px; --t2: 30px; --t3: 17px; --t4: 13px; --gutter: 16px; --s5: 48px; --s6: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--off); font-family: var(--sans); font-size: var(--t3); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.accent { color: var(--accent-text); }
.label { display: block; font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-label); margin-bottom: var(--ruimte-label); }
.lede { max-width: 60ch; color: var(--muted); }
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }

/* De balk staat in styles/menu.css */

/* Knop: één per scherm */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); height: 48px; padding: 0 var(--s3); border-radius: 999px; background: var(--gold-btn); color: var(--on-gold); font-weight: 600; font-size: var(--t4); white-space: nowrap; transition: background .2s, transform .25s var(--ease); }
.btn:hover { background: var(--gold-btn-hi); }
.btn:active { transform: scale(0.98); }
.btn.small { height: 40px; padding: 0 var(--s2); }
.textlink { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t4); font-weight: 600; color: var(--off); border-bottom: 1px solid var(--gold-line); padding-bottom: 2px; }
.textlink svg { width: 14px; height: 14px; }

/* Beeldplek op ware grootte: wordt een foto, nu een ontworpen vlak met de omschrijving */
.slot { position: relative; overflow: hidden; border-radius: var(--s3); background: radial-gradient(120% 90% at 30% 20%, #163a16 0%, #0a2a0a 45%, #041a04 100%); }
.slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 60%, rgb(var(--bg-rgb) / 0.45) 100%); }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot .note { position: absolute; left: var(--s2); right: auto; max-width: 70%; bottom: var(--s2); z-index: 1; font-size: 12px; line-height: 1.4; color: rgb(var(--off-rgb) / 0.86); background: rgb(var(--bg-rgb) / 0.4); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: var(--s2); padding: var(--s2); }
.slot .note b { display: block; color: var(--accent-label); font-weight: 600; margin-bottom: 2px; letter-spacing: 0.04em; font-size: 12px; }
.cream .slot { background: radial-gradient(120% 90% at 30% 20%, #e3dfd3 0%, #d6d1c3 50%, #c9c3b2 100%); }
.cream .slot::after { background: none; }

/* Scherm 1: hero, het beeld draagt het scherm (Oura, Function Health) */
.hero { position: relative; min-height: calc(100vh - 72px); display: grid; align-items: center; overflow: hidden; }
.hero-media { position: absolute; inset: 0; left: 46%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0.55) 22%, rgb(var(--bg-rgb) / 0) 55%), linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 70%, rgb(var(--bg-rgb) / 0.35) 100%); }
.hero-copy { position: relative; z-index: 1; padding: var(--s6) 0; max-width: none; }
.hero h1 { max-width: 12ch; margin-bottom: var(--s2); }
.hero .lede { max-width: 44ch; margin-bottom: var(--s3); }
.hero .actions { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.hero .proof { font-size: var(--t4); color: var(--muted); letter-spacing: 0.02em; }
@media (max-width: 820px) {
  .hero { min-height: 0; display: block; }
  .hero-media { position: relative; left: 0; aspect-ratio: 4 / 5; max-height: 460px; }
  .hero-media::after { background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 55%, var(--bg) 100%); }
  .hero-copy { margin-top: calc(-1 * var(--s5)); padding: 0 0 var(--s5); }
  .hero-media .note { top: var(--s2); bottom: auto; }
  .hero h1 { max-width: none; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: var(--s2); margin-bottom: var(--s4); }
  .hero .btn { width: 100%; }
  .hero .textlink { align-self: center; }
}

/* Herkenning: één zin op het donker, gecentreerd */
.recog { padding: var(--s6) 0; }
.recog .big { font-family: var(--serif); font-size: var(--t2); line-height: 1.25; max-width: 30ch; margin: 0 auto; text-align: center; color: var(--off); }
@media (max-width: 820px) { .recog { padding: var(--s5) 0; } }
.founder .small { font-size: var(--t4); color: var(--light-muted); margin-bottom: var(--s3); }

/* Scherm 2: vijf fotokaarten naast elkaar, schuifbaar; de balken van het logo als voortgang (Oura-slider) */
.found { padding: var(--s6) 0; }
.found-head { margin-bottom: var(--ruimte-inhoud); max-width: 640px; }
.found-head h2 { margin-bottom: var(--s2); }
.rail-wrap { padding-left: max(var(--gutter), calc((100% - var(--content)) / 2)); }
.rail { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-right: var(--gutter); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.card { position: relative; flex: 0 0 440px; aspect-ratio: 440 / 580; border-radius: var(--s3); overflow: hidden; scroll-snap-align: start; background: #0a2a0a; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 50%, rgb(var(--bg-rgb) / 0.72) 100%); }
.card .cap { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 1; }
.card .cap b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--t2); line-height: 1.1; color: var(--off); margin-bottom: var(--s1); }
.card .cap span { display: block; font-size: var(--t4); color: rgb(var(--off-rgb) / 0.86); max-width: 34ch; }
.card.slot .note { top: var(--s3); bottom: auto; left: var(--s2); max-width: 80%; }
.rail-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s4); }
.bars { display: flex; gap: var(--s2); }
.bars button { display: block; width: 64px; height: 24px; display: grid; align-items: center; }
.bars button i { display: block; height: 8px; border-radius: 999px; background: rgb(var(--gold-rgb) / calc(0.3 * var(--glow))); transition: background .3s var(--ease); }
.bars li.on button i { background: var(--gold); }
.bars button:hover i { background: rgb(var(--gold-rgb) / calc(0.6 * var(--glow))); }
.arrows { display: flex; gap: var(--s2); }
.arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--off); display: grid; place-items: center; transition: border-color .2s, opacity .2s; }
.arrow:hover { border-color: var(--accent-line); }
.arrow[disabled] { opacity: 0.35; cursor: default; }
.arrow svg { width: 16px; height: 16px; }
@media (max-width: 820px) {
  .found { padding: var(--s5) 0; }
  .card { flex-basis: 80vw; }
  .bars { gap: var(--s1); }
  .bars button { width: 32px; }
  .rail-foot { gap: var(--s2); }
}

/* Eén grote zin op een rustig vlak (Neko, het missieblok) */
.statement { background: var(--light-bg); color: var(--light-ink); padding: var(--s7) 0; }
.statement .label { color: var(--gold-ink); }
.statement .big { font-family: var(--serif); font-size: var(--t2); line-height: 1.25; max-width: 28ch; margin-bottom: var(--s2); }
.statement .lede { color: var(--light-muted); }
@media (max-width: 820px) { .statement { padding: var(--s6) 0; } }

/* Scherm 3: meten is weten, beeld blijft staan terwijl de stappen voorbijkomen */
.measure { padding: var(--s6) 0; }
.measure .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.measure .sticky { position: sticky; top: calc(72px + var(--s4)); }
.measure .panes { position: relative; aspect-ratio: 4 / 5; max-height: 640px; }
.measure .panes .slot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.measure .panes .slot.on { opacity: 1; }
.measure h2 { margin-bottom: var(--s2); }
.measure .lede { margin-bottom: var(--ruimte-inhoud); }
.steps { display: grid; gap: var(--s5); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); align-items: start; transition: opacity .4s var(--ease); }
html.js .step { opacity: 0.45; }
html.js .step.on { opacity: 1; }
.step .n { font-family: var(--serif); font-size: var(--t3); color: var(--accent-text); padding-top: 4px; }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); margin: 0 0 var(--s1); }
.step p { color: var(--muted); max-width: 48ch; }
.measure .closing { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--gold-line); max-width: 48ch; }
.measure .closing p + p { margin-top: var(--s1); font-size: var(--t4); color: var(--muted); }
@media (max-width: 820px) {
  .measure { padding: var(--s5) 0; }
  .measure .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .measure .sticky { position: static; }
  .measure .panes { aspect-ratio: 4 / 3; max-height: none; }
  .steps { gap: var(--s4); }
  .step { grid-template-columns: 32px 1fr; gap: var(--s2); opacity: 1; }
}

/* Beweging, alleen als het script draait en "minder beweging" uit staat */
html.js .rise { opacity: 0; transform: translateY(14px); filter: blur(8px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
html.js .rise.in { opacity: 1; transform: none; filter: blur(0); }
html.js .rise:nth-child(2) { transition-delay: .09s; }
html.js .rise:nth-child(3) { transition-delay: .18s; }
html.js .rise:nth-child(4) { transition-delay: .27s; }
html.js .rise:nth-child(5) { transition-delay: .36s; }
html.js .settle { transform: scale(1.03); transition: transform 1.2s var(--ease); }
html.js .settle.in { transform: none; }
.footer { padding: var(--s4) 0; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t4); }
.footer .wrap { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }

/* De rest van de homepage, dezelfde taal */
.hero h1 br { display: none; }
@media (min-width: 821px) { .hero h1 { max-width: 620px; white-space: nowrap; } .hero h1 br { display: inline; } }

.statement .wrap { text-align: center; }
.statement .big { margin-inline: auto; max-width: 30ch; }
.statement .lede { margin-inline: auto; }

.number { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.number .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: end; }
.number .huge { font-family: var(--serif); font-size: var(--t1); line-height: 1; color: var(--accent-text); margin: 0; }
.number .lede { max-width: 32ch; }
@media (max-width: 820px) { .number { padding: var(--s5) 0; } .number .wrap { grid-template-columns: 1fr; gap: var(--s3); } }

.gets { padding: var(--s6) 0; }
.gets .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.gets .slot.tall { aspect-ratio: 13 / 16; width: 100%; }
.gets h2 { margin-bottom: var(--s2); }
.list { margin-bottom: var(--s4); }
.list li { display: grid; grid-template-columns: 200px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list b { font-family: var(--sans); font-weight: 500; font-size: var(--fs-item); line-height: var(--lh-item); color: var(--off); }
.list span { color: var(--muted); max-width: 48ch; }
.gets.light { background: var(--light-bg); color: var(--light-ink); }
.gets.light .label { color: var(--gold-ink); }
.gets.light .list li { border-color: var(--light-line); }
.gets.light .list b { color: var(--light-ink); }
.gets.light .list span { color: var(--light-muted); }
.gets.light .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
.gets.light .slot { background: radial-gradient(120% 90% at 30% 20%, #e3dfd3 0%, #d6d1c3 50%, #c9c3b2 100%); }
.gets.light .slot::after { background: none; }
.number { border-top: 0; }
.voices { border-top: 0; }
@media (max-width: 820px) { .gets { padding: var(--s5) 0; } .gets .wrap { grid-template-columns: 1fr; gap: var(--ruimte-inhoud); } .gets-media { order: 2; } .gets .slot.tall { aspect-ratio: 4 / 3; } .list li { grid-template-columns: 1fr; gap: var(--s1); padding: var(--s2) 0; } }

.voices { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.voices h2 { margin-bottom: var(--ruimte-inhoud); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.quotes li { padding-top: var(--s3); border-top: 1px solid var(--gold-line); }
.quotes p { color: var(--off); margin-bottom: var(--s2); }
.quotes span { font-size: var(--t4); color: var(--muted); }
@media (max-width: 820px) { .voices { padding: var(--s5) 0; } .quotes { grid-template-columns: 1fr; gap: var(--s4); } }

.founder { background: var(--light-bg); color: var(--light-ink); padding: var(--s6) 0; }
.founder .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: center; }
.founder-copy { padding-top: 0; }
.quotes blockquote { margin: 0; }
.founder .photo { margin: 0; border-radius: var(--s3); overflow: hidden; max-width: 400px; }
.founder .photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; display: block; }
.founder .label { color: var(--gold-ink); }
.founder h2 { margin-bottom: var(--s2); max-width: 24ch; }
.founder .lede { color: var(--light-muted); margin-bottom: var(--s3); }
.founder .sig { font-family: var(--serif); font-size: var(--t3); margin-bottom: var(--s3); }
.founder .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
@media (max-width: 820px) { .founder { padding: var(--s5) 0; } .founder .wrap { grid-template-columns: 1fr; gap: var(--s4); } .founder-copy { padding-top: 0; } .founder .photo { max-width: 100%; } .founder .photo img { aspect-ratio: 4 / 4.4; } }

.burnout { padding: var(--s6) 0; }
.burnout .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s5); align-items: start; }
.burnout h2 { margin-bottom: var(--s2); }
.burnout .lede { max-width: 48ch; }
.doors li { border-top: 1px solid var(--line); }
.doors li:last-child { border-bottom: 1px solid var(--line); }
.doors a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; font-family: var(--serif); font-size: var(--t2); color: var(--off); transition: color .2s, padding-left .25s var(--ease); }
.doors a:hover { color: var(--accent-text); padding-left: var(--s1); }
.doors svg { width: 24px; height: 24px; flex: none; color: var(--accent-text); }
@media (max-width: 820px) { .burnout { padding: var(--s5) 0; } .burnout .wrap { grid-template-columns: 1fr; gap: var(--s4); } }

.faq { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.faq .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; font-family: var(--serif); font-size: var(--t3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--accent-text); transition: transform .25s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .answer { padding: 0 0 var(--s3); color: var(--muted); max-width: 56ch; }
.faq .answer a { color: var(--off); border-bottom: 1px solid var(--gold-line); }
@media (max-width: 820px) { .faq { padding: var(--s5) 0; } .faq .wrap { grid-template-columns: 1fr; gap: var(--s4); } }

.contact { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.contact .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.contact h2 { margin-bottom: var(--s2); }
.form { display: grid; gap: var(--s2); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.form label { display: grid; gap: var(--s1); font-size: var(--t4); color: var(--muted); }
.form input, .form textarea { font: inherit; font-size: var(--t3); color: var(--off); background: rgb(var(--off-rgb) / 0.04); border: 1px solid var(--line-2); border-radius: var(--s2); padding: 12px var(--s2); min-height: 48px; }
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--focus); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s1); }
.form-foot .small { font-size: var(--t4); color: var(--muted); }
@media (max-width: 820px) { .contact { padding: var(--s5) 0; } .contact .wrap { grid-template-columns: 1fr; gap: var(--s4); } .form .row2 { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } }

.footer { padding: var(--s5) 0 var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t4); }
.footer .wrap { display: block; }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s4); }
.footer .cols div { display: grid; gap: var(--s1); align-content: start; justify-items: start; }
.footer .cols b { color: var(--off); font-weight: 600; margin-bottom: var(--s1); }
.footer .cols a:hover { color: var(--off); }
.footer .flogo { height: 26px; width: auto; margin-bottom: var(--s2); }
.footer .bottom { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s3); }
@media (max-width: 820px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer .cols { grid-template-columns: 1fr; } }

/* Gedeeld met de andere delen van de site */
/* Wat je ziet, en vergoeding: twee korte blokken naast elkaar op het donker */
.pair { padding: var(--s6) 0; border-top: 1px solid var(--line); }
.pair .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
.pair h2 { font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); margin-bottom: var(--ruimte-lede); }
.pair .lede { margin-bottom: var(--s3); }
@media (max-width: 820px) { .pair { padding: var(--s5) 0; } .pair .wrap { grid-template-columns: 1fr; gap: var(--s4); } }

/* Verloop met één beeld: alle stappen even helder */
.measure.plain .step { opacity: 1; }
html.js .measure.plain .step { opacity: 1; }

/* Rekentoolpagina: korte hero zonder beeld */
.hero.slim { min-height: 0; padding: var(--s6) 0 var(--s5); }
@media (max-width: 820px) { .hero.slim { padding: var(--s5) 0; } .hero.slim .hero-copy { margin-top: 0; padding: 0; } }
.hero.slim .hero-copy { padding: 0; }

/* Links een kop, rechts de uitleg */
.cause-block { padding: var(--s6) 0; }
.cause-block .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.cause-block .lede { max-width: 52ch; }
.cause-block .lede + .lede { margin-top: var(--s2); }
@media (max-width: 820px) { .cause-block { padding: var(--s5) 0; } .cause-block .wrap { grid-template-columns: 1fr; gap: var(--ruimte-inhoud); } }
.pair .lede:last-child { margin-bottom: 0; }

/* Vragen in groepen */
.faq-groups { display: grid; gap: var(--s4); }
.faq-groups h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); color: var(--off); margin: 0 0 var(--s1); }

/* Vormronde (13 oktober): kadering. Een fijne lijn geeft een blok een begin en een einde; goud alleen voor het bewijs. */
.frame { border: 1px solid var(--line-2); border-radius: var(--s3); padding: var(--s4); }
.cause-block, .route, .gets:not(.light), .signals, .measure, .burnout, .outcomes.dark, .story.dark { border-top: 1px solid var(--line); }
.story .chapter + .chapter { border-top: 1px solid var(--line); padding-top: var(--s6); }
.story .photo + .chapter { border-top: 0; padding-top: 0; }
.pair .wrap > div { border: 1px solid var(--line-2); border-radius: var(--s3); padding: var(--s4); }
.pair .lede { max-width: 44ch; }
.outcomes .list b { font-size: var(--fs-item); line-height: var(--lh-item); }
.outcomes .list li { grid-template-columns: 220px 1fr; align-items: baseline; }
@media (max-width: 820px) { .outcomes .list li { grid-template-columns: 1fr; } .pair .wrap > div { padding: var(--s3); } }
/* Het bewijs: het getal met zijn omschrijving en de feiten ernaast, in één kader */
.proof-block { padding: var(--s6) 0; }
.proof-block .frame { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s4); align-items: start; }
.proof-block .main .huge { font-family: var(--serif); font-size: var(--t1); line-height: 1; color: var(--accent-text); margin-bottom: var(--s2); }
.proof-block .main .lede { max-width: 36ch; }
.proof-block .side { display: grid; gap: var(--s3); border-left: 1px solid var(--line); padding-left: var(--s4); align-self: stretch; align-content: center; }
.proof-block .side div b { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--t2); line-height: 1.1; color: var(--off); margin-bottom: 4px; }
.proof-block .side div span { font-size: var(--t4); color: var(--muted); }
@media (max-width: 820px) { .proof-block { padding: var(--s5) 0; } .proof-block .frame { grid-template-columns: 1fr; padding: var(--s3); gap: var(--s3); } .proof-block .side { border-left: 0; border-top: 1px solid var(--line); padding: var(--s3) 0 0; grid-template-columns: 1fr 1fr; } }

/* Segmenten (13 oktober, na Ryan: "duidelijke blokken, kaders, segmenten"). Vier tonen: de donkere basis, een lichter groen
   voor eilanden die erop liggen, crème als band of eiland, een diepere crème voor kaarten op crème. Goud blijft accent.
   Een eiland ligt 20 px los van de rand (Oura). Binnen een segment staan onderdelen in kaarten of achter lijnen. */
:root { --island-gap: 20px; --island-radius: 32px; }
@media (max-width: 820px) { :root { --island-gap: 12px; --island-radius: 24px; } }
section.island { margin: var(--island-gap) var(--island-gap) 0; border-radius: var(--island-radius); background: var(--panel); border: 1px solid var(--island-line); overflow: hidden; }
section.island.statement.dark { background: var(--panel); }
section.island.light { border-color: transparent; }
section.island.light { background: var(--light-bg); color: var(--light-ink); }
section.island.light .label { color: var(--gold-ink); }
section.island.light .lede { color: var(--light-muted); }
section.island + section:not(.island):not(.footer) { margin-top: var(--island-gap); }
.card-tile { background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s4); }
.island.light .card-tile { background: var(--light-bg-2); border-color: var(--light-line); }
/* De ervaringen als kaarten */
.voices.island .quotes li { border-top: 0; padding: var(--s4); background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--s3); display: grid; align-content: space-between; }
/* De vragen in een kader */
.faq .faq-list.frame { padding: 0 var(--s4); }
.faq .faq-list.frame details:first-child { border-top: 0; }
.faq .faq-list.frame details:last-child { border-bottom: 0; }
/* Het formulier als kaart */
.contact.island .form { background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s4); }
.contact.island .form input, .contact.island .form textarea { background: rgb(var(--bg-rgb) / 0.45); }
/* De deuren als kaarten */
.burnout.island .doors li { border: 0; }
.burnout.island .doors a { background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s2); }
.burnout.island .doors a:hover { padding-left: var(--s4); border-color: var(--gold-line); }
/* Het bewijsblok: de omschrijving vult de linkerhelft */
@media (min-width: 821px) { .proof-block .frame { grid-template-columns: 1.25fr 1fr; } }
.proof-block .main .lede { max-width: none; }
.proof-block .frame { background: var(--panel); }
@media (max-width: 820px) { .voices.island .quotes li { padding: var(--s3); } .contact.island .form { padding: var(--s3); } .faq .faq-list.frame { padding: 0 var(--s3); } .burnout.island .doors a { padding: var(--s2) var(--s3); } }
@media (min-width: 821px) { .burnout.island .wrap { grid-template-columns: 1fr 1fr; } }

/* Tabbladen (13 oktober, Ryan: "kiezen per onderwerp", "gewoon kunnen doorscrollen"). Beeld en tekst wisselen samen op een klik.
   Zonder script staan alle onderwerpen onder elkaar; het beeld komt tot rust als het segment in beeld komt. */
.measure.tabbed .wrap { display: block; }
.measure.tabbed .copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); align-items: start; }
.measure.tabbed .copy > * { grid-column: 2; }
.measure.tabbed .copy > .media { grid-column: 1; grid-row: 1 / span 12; }
.measure.tabbed .panes { position: relative; aspect-ratio: 4 / 5; max-height: 600px; }
.measure.tabbed .panes .slot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.measure.tabbed .panes .slot.on { opacity: 1; }
.tabpanels { display: block; }
html.js .tabpanels { display: grid; }
html.js .tabpanel { grid-area: 1 / 1; }
html.js .tabpanel[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }
html.js .measure.tabbed .panes { transform: scale(1.03); transition: transform 1.2s var(--ease); }
html.js .measure.tabbed.in .panes { transform: none; }
.tabs { display: flex; gap: var(--s1); margin: var(--s3) 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; height: 40px; padding: 0 var(--s2); border-radius: 999px; border: 1px solid var(--line-2); font-size: var(--t4); font-weight: 600; color: var(--muted); transition: color .2s, background .2s, border-color .2s; }
.tabs button:hover { color: var(--off); border-color: var(--gold-line); }
.tabs button[aria-selected="true"] { background: var(--gold-btn); color: var(--on-gold); border-color: var(--gold-btn); }
html:not(.js) .tabs { display: none; }
.tabpanel[hidden] { display: none; }
html:not(.js) .tabpanel { display: block; margin-top: var(--s4); }
.tabpanel h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0 0 var(--s2); }
.tabpanel .textlink { margin-top: var(--s3); }
.tabpanel > p { color: var(--muted); margin-bottom: var(--s3); max-width: 52ch; }
.list.compact { margin: 0; }
.list.compact li { grid-template-columns: 150px 1fr; padding: 12px 0; }
.list.compact b { font-size: var(--t4); font-family: var(--sans); font-weight: 600; color: var(--off); letter-spacing: 0.02em; }
.list.compact span { font-size: var(--t4); }
.measure.tabbed .closing { margin-top: var(--s4); }
html.js .tabpanel { animation: tabin .35s var(--ease); }
@keyframes tabin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .tabpanel { animation: none; } }
@media (max-width: 820px) { .measure.tabbed .copy { grid-template-columns: 1fr; } .measure.tabbed .copy > * { grid-column: 1; } .measure.tabbed .copy > .media { grid-row: auto; margin: var(--s2) 0 var(--s3); } .measure.tabbed .panes { aspect-ratio: 4 / 3; } .tabs { margin: var(--s2) 0; flex-wrap: wrap; overflow: visible; } .tabpanel h3 { font-size: 24px; } .list.compact li { grid-template-columns: 1fr; gap: 2px; } }

/* Doortrekken (13 oktober): het slot, de ervaringen en de leespagina als segment; de inleiding van Meten op de schaal */
.cta.island { text-align: center; }
.measure.tabbed .lede { margin-bottom: 0; }
.stories.island li { border-top: 0; padding: var(--s4); background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--s3); }
.stories.island ul { max-width: 860px; }
.policy.island .toc a { border-left-color: var(--line-2); }
@media (max-width: 820px) { .stories.island li { padding: var(--s3); } }

/* Meten als één geheel (admin, 14 oktober, na Ryan: "één geheel wat samenwerkt en overloopt"). Drie rijen onder elkaar, alle drie
   zichtbaar, één open. Het beeld is even hoog als de kolom ernaast. De gouden lijn boven de open rij loopt vol en opent dan de
   volgende, tot de bezoeker zelf een rij kiest. Het open paneel heeft één vaste hoogte (--flow-h, gezet door het script), zodat
   het blok niet verspringt. Zonder script staan de drie panelen open onder elkaar. */
.measure.flow .wrap { display: block; }
.measure.flow .copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); align-items: start; }
.measure.flow .copy > * { grid-column: 2; }
.measure.flow .copy > .media { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; position: relative; min-height: 480px; }
.measure.flow .panes { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
.measure.flow .lede { margin-bottom: var(--s3); }
.flow-item { position: relative; border-top: 1px solid var(--line-2); }
.flow-item:last-child { border-bottom: 1px solid var(--line-2); }
.flow-item h3 { margin: 0; font: inherit; }
.flow-item button { width: 100%; display: grid; grid-template-columns: 40px 1fr 20px; column-gap: var(--s2); align-items: start; text-align: left; padding: 20px 0; }
.flow-item .n { font-size: var(--t4); font-weight: 600; letter-spacing: 0.08em; color: var(--accent-label); padding-top: 7px; font-variant-numeric: tabular-nums; }
.flow-item .t { font-family: var(--serif); font-size: 24px; line-height: 1.25; color: var(--off); transition: color .2s; }
.flow-item .t small { display: block; font-family: var(--sans); font-size: var(--t4); line-height: 1.5; color: var(--muted); margin-top: 2px; }
.flow-item .plus { width: 20px; height: 20px; margin-top: 6px; color: var(--accent-text); transition: opacity .2s, transform .3s var(--ease); }
.flow-inner { padding: 0 0 var(--s3) calc(40px + var(--s2)); }
.flow-inner > p { color: var(--muted); font-size: 16px; margin-bottom: var(--s2); max-width: 52ch; }
.flow-inner .textlink { margin-top: var(--s2); }
.measure.flow:not(.live) .plus { display: none; }
.measure.flow.live .flow-panel { height: 0; overflow: hidden; visibility: hidden; transition: height .45s var(--ease), visibility 0s .45s; }
.measure.flow.live .flow-item.on .flow-panel { height: var(--flow-h, auto); visibility: visible; transition: height .45s var(--ease), visibility 0s; }
.measure.flow.live .flow-item:not(.on) .t { color: rgb(var(--off-rgb) / 0.72); }
.measure.flow.live .flow-item:not(.on) button:hover .t { color: var(--off); }
.measure.flow.live .flow-item.on .plus { opacity: 0; transform: rotate(90deg); }
.flow-item .flow-bar { position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; }
.flow-item .flow-bar span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.measure.flow.live .flow-item.on .flow-bar span { transform: scaleX(1); }
.measure.flow.live.run:not(.held) .flow-item.on .flow-bar span { animation: flowbar 9s linear both; }
.measure.flow.live.run:not(.held):hover .flow-item.on .flow-bar span, .measure.flow.live.run:not(.held):focus-within .flow-item.on .flow-bar span { animation-play-state: paused; }
@keyframes flowbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .measure.flow.live .flow-panel, .measure.flow.live .flow-item.on .flow-panel { transition: none; } }
@media (max-width: 820px) {
  .measure.flow .copy { grid-template-columns: 1fr; }
  .measure.flow .copy > * { grid-column: 1; }
  .measure.flow .copy > .media { grid-row: auto; min-height: 0; margin-bottom: var(--s3); }
  .measure.flow .panes { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .flow-item button { grid-template-columns: 32px 1fr 20px; padding: var(--s2) 0; }
  .flow-item .t { font-size: 22px; }
  .flow-inner { padding-left: 0; }
}

/* Het bewijs op home (admin, 14 oktober, na Ryan: "weggemoffeld"). Het getal met één zin, daaronder de vijf gebieden als losse
   onderdelen. Hier staat de gouden lijn: 1 px, vol goud, zoals op zijn huidige site, en alleen op deze vijf. */
.evidence { padding: var(--s4) 0; }
.evidence .frame { background: var(--panel); display: grid; gap: var(--s4); }
.evidence .claim { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s4); align-items: center; }
.evidence .huge { font-family: var(--serif); font-size: 96px; line-height: 0.9; letter-spacing: -0.02em; color: var(--accent-text); }
.evidence .claim p + p { font-family: var(--serif); font-size: 30px; line-height: 1.25; max-width: 40ch; text-wrap: balance; }
.evidence .areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); }
.evidence .areas li { display: grid; place-items: center; min-height: 64px; padding: 0 var(--s2); border: 1px solid var(--accent-line); border-radius: 999px; background: var(--panel-hi); font-size: 16px; font-weight: 600; text-align: center; }
.evidence .also { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.evidence .also div { display: flex; align-items: baseline; gap: var(--s2); }
.evidence .also b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; white-space: nowrap; }
.evidence .also span { font-size: var(--t4); color: var(--muted); }
@media (max-width: 820px) {
  .evidence { padding: var(--s3) 0; }
  .evidence .frame { padding: var(--s3); gap: var(--s3); }
  .evidence .claim { grid-template-columns: 1fr; row-gap: var(--s2); }
  .evidence .huge { font-size: 64px; }
  .evidence .claim p + p { font-size: 22px; }
  .evidence .areas { grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .evidence .areas li { min-height: 48px; font-size: 14px; }
  .evidence .areas li:last-child { grid-column: 1 / -1; }
  .evidence .also { grid-template-columns: 1fr; row-gap: var(--s2); }
  .evidence .also b { font-size: 24px; }
}

/* Waarom 66 dagen, boven "Wat je krijgt" in hetzelfde lichte segment (admin, 14 oktober; tekst uit Ryans lessen over gewoontes) */
.gets .wrap.why { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); row-gap: 0; align-items: end; padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--light-line); }
.gets .why .label { grid-column: 1 / -1; }
.gets .why .big { font-family: var(--serif); font-size: var(--t2); line-height: 1.2; max-width: 24ch; margin-bottom: var(--s2); text-wrap: balance; }
.gets .why .lede { max-width: 62ch; }
@media (max-width: 820px) { .gets .wrap.why { grid-template-columns: 1fr; padding-bottom: var(--s4); margin-bottom: var(--s4); } }
.gets .why .big { margin-bottom: 0; }
@media (max-width: 820px) { .gets .why .big { margin-bottom: var(--s2); } }
.statement .big { text-wrap: balance; }

/* De herkenning met een tweede regel eronder (admin, 12 oktober avond) */
.recog .big + .lede { margin: var(--s2) auto 0; max-width: 56ch; text-align: center; }

/* Maten naar de markt (admin, 12 oktober avond, na Ryan: "die 94 is giga en dicht bij de rand"). Gemeten: grote getallen in een
   kaart zijn 48 tot 64 px (Function Health 64, Superpower 60, Stripe 48, Eight Sleep 54 tot 72); 92 px alleen los, zonder kaart
   (Biograph). De binnenmarge groeit met de breedte van het vlak: tot 320 breed 20 tot 24, 360 tot 560 breed 24 tot 40,
   boven 1000 breed 40 tot 76 (Function Health 40 tot 56, Linear 44 tot 76). Dus: een kader over de volle inhoudsbreedte krijgt 64
   binnenmarge, het getal is 64 en staat minstens zijn eigen hoogte van de rand, en kaarten in een rij staan 24 uit elkaar. */
@media (min-width: 821px) {
  .evidence .frame { padding: var(--s5); gap: var(--s4); }
  .evidence .claim { column-gap: var(--s3); align-items: center; }
  .evidence .huge { font-size: var(--t1); line-height: 1; letter-spacing: -0.01em; }
  .evidence .claim p + p { font-size: 24px; line-height: 1.3; max-width: 34ch; }
  .evidence .areas li { min-height: 56px; font-size: 15px; }
  .evidence .also b { font-size: 24px; }
  .voices.island .quotes { gap: var(--s3); }
  .faq .faq-list.frame { padding: 0 var(--s4); }
}

/* Homepage in de volgorde van de markt (admin, 12 oktober avond, na Ryan: "leer van andere sites"). Oura: hero, één uitspraak met
   twee knoppen, de thema's, het cijfer als kop, de verhalen, daarna de uitleg. Maten volgens de meting hierboven. */
.statement .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.statement .lede { max-width: 58ch; }
.btn.line { background: transparent; color: var(--light-ink); border: 1px solid rgb(var(--ink-rgb) / 0.35); }
.btn.line:hover { background: rgb(var(--ink-rgb) / 0.06); }
.why { padding: var(--s6) 0; }
.why h2 { margin-bottom: var(--s4); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--light-line); margin-bottom: var(--s4); }
.why-grid li { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--light-line); }
.why-grid li:not(:nth-child(3n + 1)) { padding-left: var(--s4); border-left: 1px solid var(--light-line); }
.why-grid b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin-bottom: var(--s1); }
.why-grid span { display: block; color: var(--light-muted); font-size: 16px; max-width: 34ch; }
.why .textlink, .how .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
.proof .stat { font-size: var(--fs-kaart); line-height: var(--lh-kaart); max-width: 23ch; margin-bottom: var(--s4); text-wrap: balance; }
.proof .areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.proof .areas li { border-top: 1px solid var(--accent-line); padding-top: var(--s2); font-size: 16px; font-weight: 600; }
.proof .quotes { margin-bottom: var(--s4); }
.how { padding: var(--s6) 0; }
.how .wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.how h2 { font-size: 32px; line-height: 1.2; margin-bottom: var(--s2); text-wrap: balance; }
.how .lede { margin-bottom: var(--s3); }
.steps4 li { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--light-line); }
.steps4 li:last-child { border-bottom: 1px solid var(--light-line); }
.steps4 .n { grid-row: 1 / span 2; font-size: var(--t4); font-weight: 600; letter-spacing: 0.08em; color: var(--gold-ink); padding-top: 6px; font-variant-numeric: tabular-nums; }
.steps4 b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; }
.steps4 li > span:not(.n) { color: var(--light-muted); font-size: 16px; margin-top: 4px; max-width: 52ch; }
.founder h2 { margin-bottom: var(--s1); }
.founder .small { margin-bottom: var(--s3); }
@media (max-width: 820px) {
  .why, .how { padding: var(--s5) 0; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid li, .why-grid li:not(:nth-child(3n + 1)) { padding: var(--s3) 0; border-left: 0; }
  .proof .areas { grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s4); }
  .how .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .how h2 { font-size: 26px; }
  .steps4 b { font-size: 20px; }
}

/* Meten in de opbouw van Oura (breed beeld, kop en uitleg, drie onderdelen met dunne lijnen), en beeld dat zacht meebeweegt */
.measure.wide .wrap { display: block; }
.measure.wide h2 { margin-bottom: var(--s4); }
.m-media { aspect-ratio: 1200 / 520; border-radius: var(--s3); margin-bottom: var(--s5); }
.m-media img { object-position: 50% 42%; }
.m-intro { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); align-items: start; margin-bottom: var(--s5); }
.m-intro h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0; max-width: 20ch; }
.m-intro p { color: var(--muted); max-width: 52ch; }
.m-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.m-cols li { display: grid; align-content: start; gap: var(--s1); padding: 0 var(--s4); border-left: 1px solid var(--line-2); }
.m-cols li:first-child { padding-left: 0; border-left: 0; }
.m-cols li:last-child { padding-right: 0; }
.m-cols b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.m-cols span { color: var(--muted); font-size: 16px; }
.m-cols .textlink { justify-self: start; margin-top: var(--s2); }
.par img { will-change: transform; }
html.js .par img { transform: scale(1.1); }
.proof .stat { max-width: 32ch; }
@media (max-width: 820px) {
  .m-media { aspect-ratio: 4 / 3; margin-bottom: var(--s4); }
  .m-intro { grid-template-columns: 1fr; row-gap: var(--s2); margin-bottom: var(--s4); }
  .m-intro h3 { font-size: 24px; }
  .m-cols { grid-template-columns: 1fr; }
  .m-cols li, .m-cols li:first-child, .m-cols li:last-child { padding: var(--s3) 0; border-left: 0; border-top: 1px solid var(--line-2); }
}

/* Derde ronde (admin, 12 oktober laat, na Ryan: "dingen gedowngraded ten opzichte van mijn originele site"). Zijn eigen onderdelen
   zijn de ondergrens: de kaarten van Waarom ELIMA met icoon en beweging, het getal dat binnenkomt, zijn eigen regels. */
.why.island { padding: var(--s6) 0; }
.why-head { text-align: center; margin-bottom: var(--s5); }
.why-head h2 { margin-bottom: var(--s1); }
.why-head .sub { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--accent-text); }
.why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
.why-cards li { background: var(--panel-hi); border: 1px solid var(--line-2); border-radius: var(--s3); padding: var(--s4) 32px; transition: transform .45s var(--ease), border-color .35s ease, background-color .35s ease; }
.why-cards li:hover { transform: translateY(-4px); border-color: var(--accent-line); background-color: #113611; }
.why-cards .head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.why-cards .icon { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--gold-tint); display: grid; place-items: center; transition: background-color .35s ease, transform .45s var(--ease); }
.why-cards li:hover .icon { background-color: rgb(var(--gold-rgb) / calc(0.24 * var(--glow))); transform: scale(1.03); }
.why-cards .icon svg { width: 24px; height: 24px; }
.why-cards h3 { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--accent-text); margin: 0; }
.why-cards p { font-size: 16px; color: var(--muted); }
.why-foot { text-align: center; }
.why.island .textlink { color: var(--off); border-bottom-color: var(--gold-line); }
.proof-top { text-align: center; margin-bottom: var(--s6); }
.proof .huge { font-family: var(--serif); font-size: 128px; line-height: 1; letter-spacing: -0.02em; color: var(--accent-text); margin-bottom: var(--s2); font-variant-numeric: tabular-nums; }
.proof .stat { font-size: var(--fs-kaart); line-height: var(--lh-kaart); letter-spacing: 0; max-width: none; margin: 0 auto var(--s4); }
.proof .areas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-bottom: 0; }
.proof .areas li { display: grid; place-items: center; min-height: 56px; padding: 0 var(--s4); border: 1px solid var(--accent-line); border-radius: 999px; background: var(--panel-hi); font-size: 16px; font-weight: 600; font-style: italic; transition: transform .45s var(--ease), background-color .35s ease; }
.proof .areas li:hover { transform: translateY(-3px); background-color: rgb(var(--gold-rgb) / calc(0.12 * var(--glow))); }
html.js .proof-top.draw > * { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
html.js .proof-top.draw > .huge { transform: translateY(56px) scale(0.9); }
html.js .proof-top.draw.in > * { opacity: 1; transform: none; }
html.js .proof-top.draw.in > .stat { transition-delay: .15s; }
html.js .proof-top.draw.in > .areas { transition-delay: .3s; }
.rail { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.card img { transition: transform .9s var(--ease); }
.card:hover img { transform: scale(1.03); }
.quotes li { transition: transform .45s var(--ease), border-color .35s ease; }
.voices.island .quotes li:hover { transform: translateY(-3px); border-color: var(--gold-line); }
@media (max-width: 820px) {
  .why.island { padding: var(--s5) 0; }
  .why-cards { grid-template-columns: 1fr; gap: var(--s2); }
  .why-cards li { padding: var(--s3); }
  .proof-top { margin-bottom: var(--s5); }
  .proof .huge { font-size: 84px; }
  .proof .areas { gap: var(--s1); }
  .proof .areas li { min-height: 46px; padding: 0 20px; font-size: 14px; }
}
@media (min-width: 821px) and (max-width: 1100px) { .why-cards { grid-template-columns: 1fr 1fr; } }

/* De fotokaarten met label en uitklappen (Oura: label-pil linksboven, plusknop, tekst over de foto) */
.card .pill { position: absolute; top: var(--s2); left: var(--s2); z-index: 1; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: rgb(var(--bg-rgb) / 0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--off); }
.card .cap { right: calc(var(--s3) + 56px); }
.card .cap span { font-family: var(--serif); font-size: 17px; line-height: 1.35; max-width: 30ch; }
.card .more { position: absolute; right: var(--s2); bottom: var(--s2); z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--off-rgb) / 0.16); border: 1px solid rgb(var(--off-rgb) / 0.32); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--off); transition: transform .5s var(--ease), background-color .3s ease, border-color .3s ease; }
.card .more:hover { background: rgb(var(--off-rgb) / 0.28); border-color: var(--accent-line); }
.card .more svg { width: 16px; height: 16px; }
.card.open .more { transform: rotate(45deg); }
.card .sheet { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--s2); padding: var(--s3); padding-right: calc(var(--s3) + 56px); background: rgb(var(--bg-rgb) / 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; }
.card.open .sheet { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s; }
.card .sheet b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--accent-text); }
.card .sheet .q { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--off); }
.card .sheet p { font-size: 16px; color: var(--muted); max-width: 34ch; }
@media (max-width: 820px) { .card .sheet b { font-size: 24px; } .card .sheet .q { font-size: 19px; } .card .cap span { font-size: 15px; } }

/* Het label en de plusknop naar het voorbeeld dat Ryan aanwees (Oura, 12 oktober laat): een mat, licht doorschijnend label
   linksboven met icoon en naam, en een lichte ronde plusknop rechtsboven. De naam staat in het label, onderaan staat zijn uitspraak. */
.card .pill { top: var(--s3); left: var(--s3); z-index: 3; height: 48px; gap: 10px; padding: 0 20px 0 16px; background: rgba(24, 26, 18, 0.42); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.card .pill svg { width: 22px; height: 22px; flex: none; }
.card .more { top: var(--s3); right: var(--s3); bottom: auto; width: 48px; height: 48px; background: var(--off); border: 0; color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 5px rgb(var(--off-rgb) / 0.22); transition: transform .5s var(--ease), box-shadow .3s ease; }
.card .more:hover { background: var(--off); box-shadow: 0 0 0 8px rgb(var(--off-rgb) / 0.28); }
.card .cap { right: var(--s3); }
.card .cap span { font-size: 24px; line-height: 1.25; max-width: 18ch; color: var(--off); }
.card .sheet { padding: var(--s3); padding-top: 96px; }
.card .sheet .q { font-size: 24px; line-height: 1.25; }
@media (max-width: 820px) { .card .pill { top: var(--s2); left: var(--s2); height: 42px; font-size: 15px; } .card .more { top: var(--s2); right: var(--s2); width: 42px; height: 42px; } .card .cap span { font-size: 20px; } .card .sheet .q { font-size: 20px; } }

/* Boven en onder gelijk (admin, 12 oktober nacht, na Ryan: "ruimte onder is groter dan boven"): de laatste deur zonder marge eronder */
.burnout.island .doors li:last-child a { margin-bottom: 0; }

/* De naam van de fundering staat weer groot onderaan de kaart, zijn uitspraak klein eronder (Ryan, 12 oktober nacht: "dat is juist
   wat het is"). Het label houdt het icoon uit de app en het nummer. */
.card .cap span { font-family: var(--serif); font-size: 17px; line-height: 1.35; max-width: 30ch; color: rgb(var(--off-rgb) / 0.86); }
.card .sheet { padding-top: 96px; }
@media (max-width: 820px) { .card .cap span { font-size: 15px; } }

/* Het label is alleen het icoon, in de vorm en de kleur van de app (.fcard-ic.lg: 16% tint, rand van 30%, icoon in de kleur van de
   fundering), op een matte ondergrond zodat het op een foto leesbaar blijft. Geen nummer: de funderingen hebben geen volgorde.
   Onder de naam staat de regel uit de app. De hoeken van het uitklapvlak volgen de kaart (geen hoekjes bij het openen). */
.card { isolation: isolate; transform: translateZ(0); }
.card img, .card::after, .card .sheet { border-radius: inherit; }
.card .chip { position: absolute; top: var(--s3); left: var(--s3); z-index: 3; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--fc); background: linear-gradient(color-mix(in oklab, var(--fc) 16%, transparent), color-mix(in oklab, var(--fc) 16%, transparent)), rgba(20, 22, 16, 0.5); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fc) 30%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.card .chip svg { width: 26px; height: 26px; }
.card .cap span { font-family: var(--sans); font-size: 16px; line-height: 1.45; max-width: 34ch; color: rgb(var(--off-rgb) / 0.86); }
@media (max-width: 820px) { .card .chip { top: var(--s2); left: var(--s2); width: 44px; height: 44px; border-radius: 14px; } .card .chip svg { width: 22px; height: 22px; } .card .cap span { font-size: 15px; } }

/* Het beeld beweegt 6% mee bij scrollen, ook op de fotokaarten en in de hero (Ryan, 12 oktober nacht). Geen zoom meer bij aanwijzen
   op de kaarten, die zou de beweging overschrijven. */
html.js .par img { transform: scale(1.14); }
.card:hover img { transform: none; }
.hero-media { overflow: hidden; }
.found-head h2 { margin-bottom: 0; }

/* Meten, de scrollvorm terug (admin, 12 oktober nacht). Het beeld is vastgezet binnen het blok en wisselt bij de stap die midden in
   beeld staat. Een eiland met overflow: hidden breekt het vastzetten, daarom hier overflow: clip. Elk onderdeel is ruim een half
   scherm hoog, zodat het beeld blijft staan tot de wissel (de klacht bij de eerste versie: het beeld was al half voorbij). */
.measure.scrolly { overflow: clip; }
.measure.scrolly .wrap { grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: start; }
.measure.scrolly .sticky { position: sticky; top: calc(80px + var(--s4)); }
.measure.scrolly .panes { aspect-ratio: 4 / 5; max-height: min(520px, calc(100vh - 200px)); width: auto; margin-inline: auto 0; }
.measure.scrolly .panes .slot { transition: opacity .9s var(--ease); }
.measure.scrolly .lede { font-family: var(--serif); font-size: 22px; color: var(--accent-text); margin-bottom: var(--s5); }
.measure.scrolly .steps { gap: 0; }
.measure.scrolly .step { min-height: 46vh; align-content: start; padding: var(--s4) 0; border-top: 1px solid var(--line-2); transition: opacity .6s var(--ease); }
.measure.scrolly .step:last-child { min-height: 30vh; padding-bottom: 0; }
html.js .measure.scrolly .step { opacity: 0.38; }
html.js .measure.scrolly .step.on { opacity: 1; }
.measure.scrolly .step h3 { font-size: 32px; margin-bottom: var(--s2); }
.measure.scrolly .step p { margin-bottom: var(--s3); max-width: 50ch; }
@media (max-width: 820px) {
  .measure.scrolly .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .measure.scrolly .sticky { position: static; }
  .measure.scrolly .panes { aspect-ratio: 4 / 3; max-height: none; margin: 0; }
  .measure.scrolly .step { min-height: 0; padding: var(--s3) 0; }
  html.js .measure.scrolly .step { opacity: 1; }
  .measure.scrolly .step h3 { font-size: 24px; }
}

/* Waarom ELIMA in zijn eigen kleuren (Ryan: "dof nu ineens"): de kop in goud, de kaarten in het heldere groen van zijn site met de
   gouden lijn van 1 px, zoals zijn eigen blok. Geen eiland eromheen: de kaarten zijn hier de vlakken. */
.why.own { padding: var(--s6) 0; }
.why.own .why-head h2 { color: var(--accent-text); }
.why.own .why-head .sub { color: var(--off); font-size: 24px; }
.why.own .why-cards li { background: var(--brand); border-color: var(--accent-line); }
.why.own .why-cards li:hover { border-color: var(--accent-soft); background-color: #043004; }
.why.own .why-cards p { color: var(--off-dim); }
.why.own .textlink { color: var(--off); border-bottom-color: var(--gold-line); }
section.island + .why.own { margin-top: 0; }

/* Het getal: groot, niet reusachtig (Ryan: "fucking groot"). 88 px, de maat van zijn eigen site. */
.proof .huge { font-size: 88px; margin-bottom: var(--s2); }
@media (max-width: 820px) { .proof .huge { font-size: 64px; } .why.own { padding: var(--s5) 0; } }

/* Vijfde ronde (admin, 12 oktober nacht). Waarom ELIMA als licht eiland, zodat het in het ritme van de pagina valt (donker en licht
   om en om) en kleur krijgt: crème met lichte kaarten, een donkergroen rondje met het gouden icoon, kop in de vorm van de andere
   blokken (label en kop). De beweging bij aanwijzen blijft. */
.why.light { padding: var(--s6) 0; }
.why.light .why-head { text-align: left; margin-bottom: var(--s5); }
.why.light .why-head h2 { color: var(--light-ink); margin-bottom: 0; }
.why.light .why-cards li { background: #f6f4ef; border: 1px solid var(--light-line); box-shadow: 0 1px 0 rgb(var(--ink-rgb) / calc(0.03 * var(--sh))); transition: transform .45s var(--ease), border-color .35s ease, box-shadow .45s var(--ease), background-color .35s ease; }
.why.light .why-cards li:hover { transform: translateY(-4px); border-color: var(--accent-line); background-color: #fbfaf7; box-shadow: 0 18px 40px rgb(var(--ink-rgb) / calc(0.10 * var(--sh))); }
.why.light .why-cards .icon { background: var(--panel); }
.why.light .why-cards li:hover .icon { background-color: var(--brand); transform: scale(1.03); }
.why.light .why-cards h3 { color: var(--light-ink); }
.why.light .why-cards p { color: var(--light-muted); }
.why.light .why-foot { text-align: left; }
.why.light .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }
/* De vijf sterren terug bij de ervaringen (zijn huidige site) */
.voices.island .quotes li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.quotes .stars { color: var(--gold); font-size: 16px; letter-spacing: 4px; line-height: 1; }
.quotes li > span:last-child { margin-top: auto; padding-top: var(--s1); }
@media (max-width: 820px) { .why.light { padding: var(--s5) 0; } }
html.js .par img { transform: scale(1.1); }
.hero h1.long { font-size: 48px; line-height: 1.1; max-width: none; }
.statement .lede + .lede { margin-top: var(--s2); }
.statement .big + .lede { max-width: 62ch; }
@media (max-width: 820px) { .hero h1.long { font-size: 32px; } }
.measure.scrolly .sticky { top: calc(88px + var(--s4)); }
.hero { min-height: calc(100vh - 84px); }

/* Zesde ronde (admin, 12 oktober nacht). De ervaringen als rij die je doorschuift (alle vijf, drie in beeld), en de kaarten van
   Waarom ELIMA donker op het lichte vlak voor contrast (Ryan: "misschien hier wel contrast inbrengen, de kaarten donker"). */
.rev-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.rev-head .label { margin-bottom: 0; }
.rev-arrows { display: flex; gap: var(--s1); }
.rev-arrows .arrow { width: 44px; height: 44px; }
.quotes.revs { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
.quotes.revs::-webkit-scrollbar { display: none; }
.quotes.revs li { flex: 0 0 calc((100% - 2 * var(--s3)) / 3); scroll-snap-align: start; }
.why.light .why-cards li { background: var(--panel); border: 1px solid transparent; box-shadow: none; }
.why.light .why-cards li:hover { background-color: var(--panel-hi); border-color: var(--accent-line); box-shadow: 0 18px 40px rgb(var(--ink-rgb) / calc(0.22 * var(--sh))); }
.why.light .why-cards .icon { background: var(--gold-tint); }
.why.light .why-cards li:hover .icon { background-color: rgb(var(--gold-rgb) / calc(0.24 * var(--glow))); }
.why.light .why-cards h3 { color: var(--off); }
.why.light .why-cards p { color: var(--muted); }
@media (max-width: 820px) { .quotes.revs li { flex-basis: 86%; } .rev-arrows { display: none; } }

/* Tekstlinks op een licht eiland zijn donker (op de funderingenpagina stond een lichte link op een licht vlak: onleesbaar) */
section.island.light .textlink { color: var(--light-ink); border-bottom-color: rgb(var(--ink-rgb) / 0.35); }

/* Zevende ronde (admin, 12 oktober nacht). De fotokaarten minder hoog (ze vulden het hele scherm): 400 bij 500. De rij klikt op de
   computer niet meer vast op een kaart, zodat de vijf balken en de pijlen tot het einde lopen. */
.card { flex: 0 0 400px; aspect-ratio: 4 / 5; }
.card .cap b { font-size: 34px; }
@media (min-width: 821px) { .rail { scroll-snap-type: none; } }
@media (max-width: 820px) { .card { flex-basis: 80vw; } .card .cap b { font-size: 28px; } }
.measure.scrolly .step:last-child { min-height: 34vh; }

/* Meten: de kop blijft staan samen met de foto (Ryan, 12 oktober nacht: "nu scrol je de titel weg terwijl de foto blijft staan").
   De linkerkolom (label, kop, regel en beeld) is als geheel vastgezet; rechts scrollen de twee onderdelen. Het beeld krimpt mee op
   een laag scherm, zodat kop en beeld samen altijd passen onder de balk. */
.measure.scrolly .sticky .lede { margin-bottom: var(--s3); }
.measure.scrolly .panes { max-height: min(440px, calc(100vh - 380px)); min-height: 240px; margin-inline: 0 auto; }
.measure.scrolly .step { min-height: 52vh; }
.measure.scrolly .step:first-child { border-top: 0; padding-top: 0; }
.measure.scrolly .step:last-child { min-height: 30vh; }
@media (max-width: 820px) { .measure.scrolly .panes { max-height: none; min-height: 0; } .measure.scrolly .step, .measure.scrolly .step:last-child { min-height: 0; } .measure.scrolly .step:first-child { padding-top: var(--s3); } }

/* Meten, bijgesteld na meting: de rechterkolom moet duidelijk hoger zijn dan de vaste linkerkolom, anders blijft er niets staan.
   Beeld vierkant en lager, onderdelen hoger. */
.measure.scrolly .panes { aspect-ratio: 1 / 1; max-height: min(380px, calc(100vh - 420px)); min-height: 220px; }
.measure.scrolly .step { min-height: 60vh; }
.measure.scrolly .step:last-child { min-height: 40vh; }
@media (max-width: 820px) { .measure.scrolly .panes { aspect-ratio: 4 / 3; max-height: none; min-height: 0; } .measure.scrolly .step, .measure.scrolly .step:last-child { min-height: 0; } }

/* Achtste ronde (admin, 12 oktober nacht). De cijfers die vertrouwen geven staan groot onder de knoppen van de hero (Ryan: "600
   begeleid is een beetje weg, terwijl dat de data is die verkoopt"): drie cijfers met een dunne lijn ertussen. De hero vult het
   hele scherm, zodat er bij het laden geen licht randje van het volgende blok onder staat. De foto staat lager, zodat de handen
   niet onder de balk vallen. De ervaringskaarten houden hun bovenrand bij het omhoogkomen. */
.hero { min-height: 100vh; min-height: 100svh; }
.hero-copy { padding-top: calc(84px + var(--s5)); }
.hero-media img { object-position: 60% 8%; }
.hero-stats { display: flex; gap: var(--s4); margin-top: var(--s1); }
.hero-stats li { display: grid; gap: 4px; padding-left: var(--s4); border-left: 1px solid var(--line-2); }
.hero-stats li:first-child { padding-left: 0; border-left: 0; }
.hero-stats b { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1; color: var(--accent-text); }
.hero-stats span { font-size: var(--t4); color: var(--off-dim); letter-spacing: 0.02em; }
.quotes.revs { padding-block: 8px; margin-block: -8px; }
@media (max-width: 820px) { .hero-copy { padding-top: 0; } .hero-stats { gap: var(--s3); } .hero-stats li { padding-left: var(--s3); } .hero-stats b { font-size: 28px; } }

/* Negende ronde (admin, 12 oktober nacht). Elk blok is een afgerond vlak (de oprichter nu ook; het motto met zijn volle band is van
   de homepage af). Meten zonder grote gaten: de twee onderdelen staan dicht onder elkaar naast de kop en het beeld; het beeld
   wisselt als het tweede onderdeel midden in beeld komt. De deuren bij burn-out in de maat van de andere kaarttitels. */
.founder.island { padding: var(--s6) 0; }
.measure.scrolly .step, .measure.scrolly .step:last-child { min-height: 0; padding: var(--s4) 0; }
.measure.scrolly .step:first-child { padding-top: 0; }
.measure.scrolly .step:last-child { padding-bottom: 0; }
.measure.scrolly .wrap { align-items: center; }
.measure.scrolly .sticky { position: static; }
.burnout.island .doors a { font-size: 24px; padding: var(--s3) var(--s3); }
.doors svg { width: 20px; height: 20px; }
html.js .par img { transform: scale(1.14); }
@media (max-width: 820px) { .founder.island { padding: var(--s5) 0; } .burnout.island .doors a { font-size: 20px; } }
.hero-copy { padding-top: var(--s6); }
@media (max-width: 820px) { .hero-copy { padding-top: 0; } }

/* De dunne lichte streep aan de linkerrand van de herofoto bij het laden (Ryan stuurde er een schermbeeld van): de rand van het beeld
   kwam een pixel onder het verloop vandaan terwijl het vlak nog schaalde. Het vlak schaalt niet meer bij het laden (de foto beweegt
   al mee met de scroll), het verloop steekt links iets uit en de rand is een pixel afgesneden. */
html.js .hero-media.settle, html.js .hero-media.settle.in { transform: none; transition: none; }
.hero-media { background: var(--bg); clip-path: inset(0 0 0 1px); }
.hero-media::after { inset: 0 0 0 -4px; }

/* De streep, de echte oorzaak: sinds de herofoto meebewoog met de scroll kreeg hij een eigen laag, en het verloop erboven dekte
   de linkerrand dan net geen hele pixel af. De herofoto beweegt daarom niet mee (de fotokaarten en de andere beelden wel). */
.hero-media { clip-path: none; }
.hero-media::after { inset: 0; }
.hero-media img { transform: none !important; will-change: auto; }
.hero-stats b { font-variant-numeric: tabular-nums; }

/* Meten, tiende ronde (admin, 12 oktober nacht; Ryan: "niet meer die premium feel dat een deel blijft staan", "meer visueel, mensen
   houden niet van lezen"). De linkerkolom (kop en beeld) staat weer vast terwijl rechts de twee onderdelen voorbijkomen. Elk
   onderdeel is gevuld met tegels in plaats van tekst: wat het lab onderzoekt, en wat de ring meet. Daardoor is de rechterkolom van
   zichzelf hoog genoeg en zijn er geen lege stukken nodig om het beeld te laten staan. */
.measure.scrolly .wrap { align-items: start; }
.measure.scrolly .sticky { position: sticky; top: calc(88px + var(--s4)); }
.measure.scrolly .step { padding: var(--s4) 0; min-height: 0; }
.measure.scrolly .step:first-child { padding-top: 0; min-height: 52vh; }
.measure.scrolly .step:last-child { padding-bottom: 0; }
.measure.scrolly .step p { margin-bottom: var(--s3); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: var(--s3); }
.tiles li { display: grid; gap: 12px; align-content: start; padding: 20px; background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--s2); transition: transform .45s var(--ease), border-color .35s ease; }
.tiles li:hover { transform: translateY(-3px); border-color: var(--gold-line); }
.tiles svg { width: 26px; height: 26px; color: var(--accent-text); }
.tiles b { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--off); }
.measure.scrolly .step p.after { font-size: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: var(--s3); }
.checks li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--gold-line); border-radius: 999px; font-size: var(--t4); font-weight: 600; color: var(--off); }
.checks li::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--accent-line); border-bottom: 2px solid var(--accent-line); transform: rotate(-45deg) translateY(-2px); }
@media (max-width: 820px) {
  .measure.scrolly .sticky { position: static; }
  .measure.scrolly .step:first-child { min-height: 0; padding-top: var(--s3); }
  .tiles { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .tiles li { padding: 14px 10px; gap: 8px; }
  .tiles b { font-size: 13px; }
}

/* Resultaten (admin, 12 oktober nacht; Ryan: "spacing klopt hier niet"): het bewijs in de vorm van de homepage, direct onder de kop,
   met de twee cijfers gecentreerd eronder en de sterren bij de ervaringen */
.proof .hero-stats.mid { justify-content: center; margin-top: 0; }
.proof .proof-top + .hero-stats.mid { margin-top: calc(-1 * var(--s4)); padding-top: var(--s4); border-top: 1px solid var(--line); max-width: 520px; margin-inline: auto; }
.stories .stars { display: block; color: var(--gold); font-size: 16px; letter-spacing: 4px; line-height: 1; margin-bottom: var(--s2); }
.hero.slim + section.island { margin-top: 0; }
.measure.scrolly .step:first-child { min-height: 0; }

/* De vijf gebieden als drie en twee onder het getal, even breed (zoals op zijn huidige site): een compact blok onder de 94% in
   plaats van één lange rij met ongelijke pillen */
.proof .areas { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); max-width: 780px; margin-inline: auto; }
.proof .areas li { grid-column: span 2; padding: 0 var(--s2); }
.proof .areas li:nth-child(4) { grid-column: 2 / span 2; }
.proof .areas li:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 820px) {
  .proof .areas { grid-template-columns: 1fr 1fr; gap: var(--s1); max-width: none; }
  .proof .areas li, .proof .areas li:nth-child(4) { grid-column: auto; }
  .proof .areas li:nth-child(5) { grid-column: 1 / -1; }
}

/* De pillen onder de 94% smaller: ongeveer de maat van zijn eigen site (212 breed), niet uitgerekt */
.proof .areas { max-width: 640px; gap: 12px; }
.proof .areas li { min-height: 58px; padding: 0 12px; }
@media (max-width: 820px) { .proof .areas { max-width: none; gap: var(--s1); } .proof .areas li { min-height: 46px; } }

/* De link onder de ervaringen stond tegen de kaarten aan (de rij had onder een negatieve marge): 40 eronder */
.quotes.revs { margin-bottom: calc(var(--s4) - 8px); }

/* Meten: meer lucht onder de balk terwijl de linkerkolom vaststaat (Ryan: "nog maar weinig ruimte als je naar beneden scrollt") */
@media (min-width: 821px) { .measure.scrolly .sticky { top: calc(88px + var(--s5)); } .measure.scrolly .panes { max-height: min(380px, calc(100vh - 450px)); } }

/* links naar een onderdeel van de pagina: vloeiend, en het onderdeel komt onder de balk uit in plaats van erachter */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 116px; }
@media (max-width: 820px) { [id] { scroll-margin-top: 80px; } }
/* de vragen in het schreefloze lettertype (Ryan 13 okt) */
.faq summary { font-family: var(--sans); font-size: var(--fs-item); font-weight: 500; line-height: var(--lh-item); }

/* keuzeveld in het formulier: zelfde vorm als de invoervelden, met een eigen pijl */
.form select { font: inherit; font-size: var(--t3); color: var(--off); background: rgb(var(--off-rgb) / 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ddaa6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center / 16px; border: 1px solid var(--line-2); border-radius: var(--s2); padding: 12px 44px 12px var(--s2); min-height: 48px; width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; }
.form select:focus { outline: none; border-color: var(--focus); }
.form select:invalid { color: var(--muted); }
.form select option { color: var(--light-ink); background: var(--light-bg); }
.contact.island .form select { background-color: rgb(var(--bg-rgb) / 0.45); }
/* oprichter: de foto een stuk kleiner (Ryan 13 okt), de tekst krijgt de ruimte */
@media (min-width: 821px) { .founder .wrap { grid-template-columns: 240px 1fr; gap: var(--s6); } .founder .photo { max-width: 240px; } .founder h2 { margin-bottom: var(--s2); } .founder .lede { max-width: 56ch; } }
@media (max-width: 820px) { .founder .photo { max-width: 200px; } }

/* 14 oktober, klus 1 tot 3: eindeloze ervaringen, elk blok een eiland, de vragen zonder lege kolom */
.quotes.revs.endless { scroll-snap-type: none; }
.quotes.revs li .label { margin-bottom: 0; }
.faq.island .wrap { display: block; max-width: 880px; }
.faq.island .faq-head { margin-bottom: var(--s3); }
.faq.island .faq-head .lede { margin-bottom: 0; }
.numbers.island .head { max-width: 640px; }
/* /vragen: een paar basisvragen los, daaronder de onderwerpen als blokken die openklappen */
.topics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); align-items: start; }
.topic { background: var(--panel-hi); border: 1px solid var(--line); border-radius: var(--s3); padding: 0 var(--s4); }
.topic > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; }
.topic > summary::-webkit-details-marker { display: none; }
.topic > summary b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); color: var(--off); }
.topic > summary small { display: block; font-size: var(--t4); color: var(--muted); margin-top: 2px; }
.topic > summary svg { width: 20px; height: 20px; flex: none; color: var(--accent-text); transition: transform .3s var(--ease); }
.topic[open] > summary svg { transform: rotate(45deg); }
.topic .faq-list { padding-bottom: var(--s2); }
.topic .faq-list details:first-child { border-top: 1px solid var(--line); }
.topic .faq-list details:last-child { border-bottom: 0; }
html.js .topic[open] .faq-list { animation: tabin .35s var(--ease); }
.faq .basics { margin-bottom: 0; }
@media (max-width: 820px) { .topics { grid-template-columns: 1fr; gap: var(--s2); } .topic { padding: 0 var(--s3); } .topic > summary b { font-size: 20px; } }
.proof .proof-top:only-child .areas { margin-bottom: 0; }
.proof .proof-top:only-child { margin-bottom: 0; }
.measure.flow .checks { margin: var(--s3) 0 0; }

/* 14 oktober, klus 8: de drie stappen als kop van Meten is weten (lab als voorbereiding voor een plan op maat, de ring voor gerichte begeleiding) */
.measure .sys { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); padding-bottom: var(--s5); margin-bottom: var(--s2); border-bottom: 1px solid var(--line-2); }
.measure .sys li { padding-top: var(--s3); border-top: 1px solid var(--gold-line); }
.measure .sys .n { display: block; font-size: var(--t4); font-weight: 600; letter-spacing: 0.08em; color: var(--accent-label); margin-bottom: var(--s2); font-variant-numeric: tabular-nums; }
.measure .sys h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25; margin: 0 0 var(--s1); }
.measure .sys p { color: var(--muted); font-size: 16px; max-width: 36ch; }
@media (max-width: 820px) { .measure .sys { grid-template-columns: 1fr; gap: var(--s3); padding-bottom: var(--s4); } }
.measure .m-head { grid-column: 1 / -1; }
.measure .m-head .lede { margin-bottom: 0; }
.measure .sys { margin: 0; padding-bottom: var(--s4); }
.measure.scrolly .sticky .lede { margin-bottom: 0; }
.measure .m-head .lede { margin-bottom: 0 !important; }
.measure.scrolly .wrap > * { min-width: 0; }
@media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .measure .sys { margin: 0; } }
/* Ryan 14 okt: beeld mag alleen bewegen terwijl je scrolt, niet nadeinen. De .card img had een transitie van .9s op transform,
   waardoor het meebewegende beeld (parallax) na het stoppen nog doorschoof. Geen transitie op beelden die met de scroll meebewegen. */
html.js .par img { transition: none !important; }
/* Reviews: de naam vet en daaronder het traject in gewone tekst, in plaats van de functie (Ryan, 22 oktober, INBOX-RYAN punt 1) */
.quotes li > span:last-child b, .bw-gk figcaption b { display: block; font-weight: 600; }

/* 15 nov (Ryan: "best wel veel groen wat er over mij heen gaat ... bij die ander is het niet nodig"): op de telefoon staat de tekst
   van /over en /resultaten ónder de foto, dus alleen een kort verloop naar de achtergrond, zoals op /traject en /methode. */
@media (max-width: 820px) { body.bw-over .hero-media::after, body.bw-resultaten .hero-media::after { background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 80%, var(--bg) 100%); } }