/* Groene Code 2.0. Regels en motivatie: zie DESIGN.md */

@font-face { font-family: 'Poppins'; font-weight: 200; font-display: swap; src: url('/assets/fonts/poppins-200.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
    /* Kleur */
    --night: #10211b;
    --green-deep: #183e30;
    --green: #548269;
    --sage: #c4d7bf;
    --paper: #f4f3eb;
    --paper-2: #eae9dd;
    --ink: #202723;
    --ink-soft: #59625c;
    --signal: #00bc91;      /* het felle groen van de huidige site */
    --signal-text: #0b7a5e; /* hetzelfde groen, leesbaar op papier (4,76:1) */
    --rule: #cfcfc0;
    --rule-control: #7c857f;
    --error: #9a2a17;

    /* Vlak-afhankelijk, zie .on-night, .on-dark en .on-sage */
    --fg: var(--ink);
    --fg-soft: var(--ink-soft);
    --accent: var(--signal-text);
    --dot: var(--signal);
    --line: var(--rule);
    --line-strong: var(--ink);

    /* Ruimte */
    --rail: 76px;
    --gutter: clamp(20px, 3.4vw, 56px);
    --max: 1680px;
    --edge: max(var(--gutter), calc((100vw - var(--rail) - var(--max)) / 2 + var(--gutter)));
    --u: calc((100vw - var(--rail)) / 100);
    --gap: clamp(14px, 1.8vw, 24px);
    --section: clamp(56px, 7vw, 112px);
    --tab: clamp(28px, 2.8vw, 40px);
    --head-h: 0px;

    /* Type */
    --sans: 'Poppins', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --t-label: .8rem;
    --t-small: .9375rem;
    --t-body: 1.0625rem;
    --t-lead: clamp(1.1875rem, 1.6vw, 1.4375rem);
    --t-h3: clamp(1.3125rem, 1.8vw, 1.625rem);
    --t-h2: clamp(2.25rem, calc(var(--u) * 4.9), 5.25rem);
    --t-mega: clamp(2.5rem, calc(var(--u) * 7.8), 8.5rem);

    /* Vorm en beweging */
    --radius: 2px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 93.75%; /* Alles in rem schaalt mee, en de browserinstelling blijft gelden. */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--head-h) + 20px);
}

html:has(.menu[open]) { overflow: hidden; }

body {
    margin: 0;
    background: var(--night);
    color: var(--ink);
    font: 400 var(--t-body)/1.7 var(--sans);
    font-synthesis: none;
    overflow-wrap: break-word;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
address { font-style: normal; }
strong { font-weight: 600; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .18s var(--ease); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--radius); }

.skip { position: fixed; z-index: 60; left: 12px; top: -80px; padding: 12px 16px; background: var(--paper); color: var(--ink); }
.skip:focus { top: 12px; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.staging { margin: 0; padding: 8px var(--gutter); background: var(--sage); color: var(--green-deep); font: 400 var(--t-label)/1.5 var(--mono); text-align: center; }

/* Paginakader */
.page { padding-left: var(--rail); background: var(--paper); overflow-x: clip; }
.wrap { position: relative; padding-inline: var(--edge); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.section { position: relative; padding-block: var(--section); background: var(--paper); }
.section.flush-top { padding-top: 0; }
.section--tight { padding-block: calc(var(--section) * .6); }
.self-end { align-self: end; }

/* Vlakken */
.on-night, .on-dark {
    --fg: var(--paper);
    --fg-soft: var(--sage);
    --accent: var(--signal);
    --line: rgba(196, 215, 191, .28);
    --line-strong: var(--sage);
    color: var(--paper);
}
.on-night { background: var(--night); }
.on-dark { background: var(--green-deep); }
.on-sage {
    --fg: var(--green-deep);
    --fg-soft: var(--green-deep);
    --accent: var(--green-deep);
    --dot: var(--green-deep);
    --line: rgba(24, 62, 48, .28);
    --line-strong: var(--green-deep);
    background: var(--sage);
    color: var(--green-deep);
}
.on-paper-2 { --accent: #0a6f55; background: var(--paper-2); }

/* Dossiertab: de schuine tab van de huidige site, nu als overgang tussen secties. */
.tab {
    --tab-x: 10%;
    --tab-w: clamp(210px, 24%, 340px);
    z-index: 1;
    margin-top: calc(var(--tab) * -1);
    padding-top: calc(var(--section) + var(--tab));
    clip-path: polygon(0 var(--tab), var(--tab-x) var(--tab), var(--tab-x) 0, calc(var(--tab-x) + var(--tab-w)) 0, calc(var(--tab-x) + var(--tab-w) + var(--tab)) var(--tab), 100% var(--tab), 100% 100%, 0 100%);
}
.tab__label { position: absolute; left: calc(var(--tab-x) + 18px); top: calc(var(--tab) / 2 - .6em); margin: 0; color: var(--fg-soft); font: 400 var(--t-label)/1.2 var(--mono); letter-spacing: .02em; white-space: nowrap; }
.tab__label--inline { position: static; display: block; margin-bottom: 14px; }

/* Gestippelde bouwlijnen, afkomstig van de huidige site. */
.gridlines { position: relative; }
.gridlines::before {
    content: '';
    position: absolute;
    inset: 0 var(--edge);
    pointer-events: none;
    --d: repeating-linear-gradient(to bottom, var(--line) 0 3px, transparent 3px 9px);
    background-image: var(--d), var(--d), var(--d);
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: 25% 0, 50% 0, 100% 0;
}
.gridlines > * { position: relative; }

/* Type: dun is wat eromheen zit, vet is waar het om gaat. */
.mega, .h2 { font-weight: 200; }
.mega { font-size: var(--t-mega); line-height: .98; letter-spacing: -.05em; }
.h2 { font-size: var(--t-h2); line-height: 1.03; letter-spacing: -.042em; }
.h2--solid { font-size: clamp(2.125rem, calc(var(--u) * 3.6), 3.75rem); }
.mega b, .h2 b, .statement b, .h3 b, .big-lines b { color: var(--accent); font-weight: 600; }
.h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.lead { font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.012em; text-wrap: pretty; }
.statement { font-size: clamp(1.5rem, calc(var(--u) * 2.7), 2.75rem); font-weight: 200; line-height: 1.12; letter-spacing: -.034em; text-wrap: balance; }
.soft { color: var(--fg-soft); }
.small { font-size: var(--t-small); line-height: 1.65; }
.measure { max-width: 40rem; }
.label { display: block; margin: 0; color: var(--fg-soft); font: 400 var(--t-label)/1.5 var(--mono); letter-spacing: .02em; }
.numeral { margin: 0; color: var(--accent); font-size: clamp(3.25rem, calc(var(--u) * 6), 6.25rem); font-weight: 200; line-height: .9; letter-spacing: -.05em; }
.flat-link { text-decoration: none; }

/* Halte: een aftakking vanaf de rail naar de sectie. */
.halt { position: relative; margin: 0; color: var(--fg-soft); font: 400 var(--t-label)/1.5 var(--mono); letter-spacing: .02em; }
.halt::before { content: ''; position: absolute; right: 100%; top: .75em; width: 100vw; height: 1px; margin-right: 14px; background: var(--dot); }
.halt::after { content: ''; position: absolute; left: -14px; top: calc(.75em - 3.5px); width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.halt { margin-left: 14px; }

/* Knoppen en links: de lijn met de stip groeit bij hover. */
.trail { position: relative; display: inline-block; flex: none; width: 30px; height: 1px; background: currentColor; vertical-align: middle; transition: width .28s var(--ease); }
.trail::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6em;
    min-height: 50px;
    padding: .55em 1.05em;
    border: 1px solid var(--green-deep);
    border-radius: var(--radius);
    background: var(--green-deep);
    color: var(--paper);
    font: 500 1rem/1.25 var(--sans);
    letter-spacing: -.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn:hover .trail, a:hover > .trail, .next:hover .trail { width: 52px; }
.btn--line { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--line:hover { background: var(--fg); border-color: var(--fg); color: var(--paper); }
.on-night .btn, .on-dark .btn, .card .btn { background: var(--signal); border-color: var(--signal); color: var(--night); }
.on-night .btn:hover, .on-dark .btn:hover, .card .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--night); }
.on-night .btn--line, .on-dark .btn--line { background: transparent; border-color: var(--sage); color: var(--paper); }
.on-night .btn--line:hover, .on-dark .btn--line:hover { background: var(--sage); border-color: var(--sage); color: var(--night); }
.arrow { display: inline-block; transition: transform .22s var(--ease); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; }
.more { display: inline-flex; gap: .8em; align-items: center; font-weight: 500; }

/* De rail: vaste route links, met de stip op de plek waar je bent. */
.rail { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; flex-direction: column; align-items: center; width: var(--rail); padding-block: 18px; background: var(--night); border-right: 1px solid rgba(196, 215, 191, .22); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.rail__logo { display: block; flex: none; }
.rail__logo img { width: 48px; }
.rail__nav { position: relative; flex: 1; display: flex; margin-block: 22px; min-height: 340px; }
.rail__nav ul { display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 2.2vh, 20px); padding-left: 20px; }
.rail__nav::before, .rail__progress { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; }
.rail__nav::before { background: rgba(196, 215, 191, .3); }
.rail__progress { background: var(--signal); transform-origin: top; transform: scaleY(0); }
@supports (animation-timeline: scroll()) {
    .rail__progress { animation: rail-grow linear both; animation-timeline: scroll(root); }
    @keyframes rail-grow { to { transform: scaleY(1); } }
}
.rail__nav li { position: relative; }
.rail__nav li::before { content: ''; position: absolute; left: -21px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--signal); transform: scale(0); transition: transform .22s var(--ease); }
.rail__nav li:hover::before, .rail__nav li:focus-within::before { transform: scale(.65); }
.rail__nav li.is-current::before { transform: scale(1.25); }
.rail__nav a { display: block; padding: 6px 8px; font-size: .875rem; font-weight: 400; letter-spacing: .005em; line-height: 1.2; text-decoration: none; writing-mode: vertical-rl; transform: rotate(180deg); }
.rail__nav a:hover { color: var(--signal); }
.rail__nav .is-current a { color: var(--signal); font-weight: 600; }
.rail__quick { flex: none; }
.rail__quick summary { display: grid; place-items: center; width: 56px; min-height: 48px; padding: 6px 2px; border: 1px solid rgba(196, 215, 191, .4); border-radius: var(--radius); font: 400 .6875rem/1.25 var(--mono); text-align: center; list-style: none; cursor: pointer; transition: border-color .18s var(--ease), color .18s var(--ease); }
.rail__quick summary::-webkit-details-marker { display: none; }
.rail__quick summary:hover, .rail__quick[open] summary { border-color: var(--signal); color: var(--signal); }
.rail__flyout { position: fixed; z-index: 40; left: calc(var(--rail) + 14px); bottom: 14px; width: 330px; animation: card-in .22s var(--ease); }
@keyframes card-in { from { opacity: 0; transform: translateX(-8px); } }

/* Het visitekaartje, met de tab van de huidige site. */
.card {
    --t: 34px;
    padding: calc(var(--t) + 22px) 26px 26px;
    background: #212223;
    color: var(--paper);
    clip-path: polygon(0 0, 52% 0, calc(52% + var(--t)) var(--t), 100% var(--t), 100% 100%, 0 100%);
}
.card__logo { width: 124px; }
.card__tag { margin: 16px 0 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.012em; }
.card__tag b { font-weight: 600; }
.card__tag span { color: var(--signal); font-size: var(--t-small); }
.card__facts { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--t-small); line-height: 1.4; }
.card__facts > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 3px; }
.card__facts dt { font-weight: 600; }
.card__facts dd { color: #b9c4bd; text-align: right; }
.card__links { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px; margin-top: 14px; padding-block: 10px; font: 400 .8125rem/1.3 var(--mono); }
.card__links a { display: block; padding-block: 5px; }
.card__links a:hover { color: var(--signal); }
.card__login { width: 100%; margin-top: 8px; }

/* Topbalk en menu onder de rail-breedte */
.topbar { display: none; position: sticky; top: 0; z-index: 20; background: var(--night); color: var(--paper); border-bottom: 1px solid rgba(196, 215, 191, .22); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-inline: var(--gutter); }
.topbar__logo img { width: 58px; }
.menu summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--sage); border-radius: var(--radius); font-size: var(--t-small); font-weight: 500; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu__close { display: none; }
.menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: inline; }
.menu__panel { position: fixed; inset: 65px 0 0; z-index: 19; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 12px var(--gutter) 28px; overflow-y: auto; background: var(--night); animation: menu-in .2s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu__main li { border-bottom: 1px solid rgba(196, 215, 191, .28); }
.menu__main a { display: flex; align-items: baseline; gap: 16px; padding-block: 11px; font-size: clamp(1.75rem, 8.4vw, 2.5rem); font-weight: 200; letter-spacing: -.04em; line-height: 1.15; text-decoration: none; }
.menu__main a:hover { color: var(--signal); }
.menu__main a[aria-current='page'] { color: var(--signal); font-weight: 600; }
.menu__main a[aria-current='page']::after { content: ''; align-self: center; width: 11px; height: 11px; margin-left: auto; border-radius: 50%; background: var(--signal); }
.menu__main .label { width: 1.7rem; flex: none; color: var(--sage); }
.menu__foot p { margin: 0 0 8px; font-size: 1.125rem; font-weight: 500; }
.menu__util { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.menu__util a { display: block; padding-block: 8px; font: 400 .875rem/1.4 var(--mono); }

/* Hero: de schaal is de boodschap. */
.hero { --goal: min(calc((100vw - var(--rail) - var(--edge) * 2) / 3.94), 29svh); padding-block: clamp(20px, 2.4vw, 36px) calc(var(--tab) + 4px); }
/* De hero vult het eerste scherm; de tab van de volgende sectie valt er net onder. */
.hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--head-h) + var(--tab)); }
.hero > .wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
.hero .clients { margin-top: auto; }
.hero > .wrap > .grid { margin-bottom: clamp(24px, 3vw, 44px); }
.hero__title { margin: 0; font-weight: 600; }
.hero__goal { display: block; width: fit-content; font-size: var(--goal); line-height: .86; letter-spacing: -.058em; white-space: nowrap; }
.hero__goal span { display: block; }
.hero__goal span + span { color: var(--signal); text-align: right; }
.hero__is { display: block; margin-top: .2em; font-size: calc(var(--goal) * .3); font-weight: 200; line-height: 1; letter-spacing: -.05em; }
.hero__is b { color: var(--signal); font-weight: 600; }
.hero__side { position: relative; }
.hero__means { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.hero__aside { display: block; margin-top: 3px; color: var(--sage); font: 400 var(--t-label)/1.5 var(--mono); }
.hero .lead { margin-top: 1.1em; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--sage); }

/* Klanten */
.clients { display: grid; gap: 14px 32px; margin-top: clamp(24px, 3vw, 44px); padding-block: 16px; border-top: 1px solid var(--line); }
.clients ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px clamp(14px, 2.2vw, 30px); align-items: center; }
.clients a { display: block; }
.clients img { width: 100%; max-width: 104px; filter: brightness(0) invert(1); opacity: .62; transition: opacity .18s var(--ease); }
.clients a:hover img, .clients a:focus-visible img { opacity: 1; }

/* De lijn */
.line { display: block; width: 100%; height: auto; overflow: visible; }
.line--narrow { display: none; }
.line__path { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.line__dot { fill: var(--signal); }
.line--draw .line__path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: line-draw 2.4s .15s var(--ease) forwards; }
.line--draw .line__dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot-in .4s 2.4s var(--ease) forwards; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes dot-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* Doorgestreepte vragen */
.struck li { padding-block: .34em; border-top: 1px solid var(--line); font-size: clamp(1.375rem, calc(var(--u) * 2.8), 2.75rem); font-weight: 200; line-height: 1.14; letter-spacing: -.034em; }
.struck li:last-child { border-bottom: 1px solid var(--line); }
.struck span { background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 58% / 100% .055em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .struck span { animation: strike linear both; animation-timeline: view(); animation-range: entry 70% cover 48%; }
        @keyframes strike { from { background-size: 0 .055em; } to { background-size: 100% .055em; } }
    }
}

.tags { display: flex; flex-wrap: wrap; gap: 0 1.2em; margin: 1em 0 0; color: var(--fg-soft); font: 400 .8125rem/1.8 var(--mono); }

/* Procesweergave */
.flow { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.flow__art { display: none; }
.flow__steps { display: grid; }
.flow__step { position: relative; padding: 0 0 36px 32px; border-left: 1px solid var(--line-strong); }
.flow__step:last-child { padding-bottom: 0; border-left-color: transparent; }
.flow__dot { position: absolute; left: -8px; top: 12px; width: 15px; height: 15px; border-radius: 50%; background: var(--signal); }
.flow__step h3 { margin-block: 12px 10px; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
.flow__step p:not(.label, .flow__branch, .numeral) { color: var(--fg-soft); font-size: var(--t-small); line-height: 1.65; }
.flow__branch { margin-top: 14px; padding-left: 14px; border-left: 1px dashed var(--line-strong); color: var(--fg); font: 400 .8125rem/1.6 var(--mono); }
.flow__tag { display: none; }

/* Vroeger en nu: de ingreep als schema. */
.lanes { display: grid; gap: clamp(24px, 3vw, 40px); }
.lane__label { margin: 0 0 12px; color: var(--fg-soft); font: 400 var(--t-label)/1.5 var(--mono); }
.lane ol { display: grid; }
.lane li { position: relative; padding: 0 0 14px 24px; font-size: var(--t-small); line-height: 1.35; }
.lane li::before { content: ''; position: absolute; left: 0; top: .28em; width: 11px; height: 11px; border-radius: 50%; }
.lane li::after { content: ''; position: absolute; left: 5px; top: calc(.28em + 13px); bottom: -2px; width: 0; }
.lane li:last-child::after { display: none; }
.lane--was { color: var(--fg-soft); }
.lane--was li::before { border: 1px solid currentColor; }
.lane--was li::after { border-left: 1px dashed currentColor; }
.lane--loose li::after { display: none; }
.lane--now { --c: var(--signal); }
.on-sage .lane--now { --c: var(--green-deep); }
.lane--now .lane__label { color: var(--fg); }
.lane--now li { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 500; letter-spacing: -.012em; line-height: 1.25; padding-bottom: 18px; }
.lane--now li::before { background: var(--c); width: 13px; height: 13px; }
.lane--now li::after { border-left: 2px solid var(--c); left: 5.5px; }

/* Projecten */
.shot { display: block; overflow: hidden; background: var(--paper-2); }
.shot img { width: 100%; transition: transform .7s var(--ease); }
a:hover > .shot img { transform: scale(1.012); }
.bleed-right { margin-right: calc(var(--edge) * -1); }
.bleed-left { margin-left: calc(var(--edge) * -1); }
.spec > div { display: grid; gap: 2px 20px; padding-block: 13px; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { color: var(--fg-soft); font: 400 var(--t-label)/1.9 var(--mono); }
.spec dd { font-size: var(--t-small); line-height: 1.65; }
.spec--large dd { font-size: var(--t-body); line-height: 1.7; }
.index { border-top: 1px solid var(--line-strong); }
.index > li { position: relative; border-bottom: 1px solid var(--line); }
.index__row { padding-block: clamp(18px, 2vw, 26px); row-gap: 6px; align-items: baseline; }
.index__row h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
.index__row h3 a { text-decoration: none; }
.index__row h3 a::after { content: ''; position: absolute; inset: 0; }
.index__row p:not(.label) { color: var(--fg-soft); font-size: var(--t-small); line-height: 1.65; }
.index > li:hover h3 { color: var(--accent); }

/* Eigenschappen */
.traits > li { display: grid; gap: 4px 24px; padding-block: 18px; border-top: 1px solid var(--line); }
.traits > li:last-child { border-bottom: 1px solid var(--line); }
.traits h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; }
.traits p { color: var(--fg-soft); font-size: var(--t-small); line-height: 1.65; }

/* Vergelijking */
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 20px 0; border-top: 1px solid var(--line); font-weight: 400; text-align: left; vertical-align: top; }
.compare thead th { padding-block: 0 12px; border-top: 0; color: var(--fg-soft); font: 400 var(--t-label)/1.5 var(--mono); }
.compare .col { width: clamp(58px, 12vw, 150px); }
.compare tbody th { padding-right: 20px; }
.compare strong { display: block; font-size: clamp(1.375rem, calc(var(--u) * 2.6), 2.5rem); font-weight: 200; line-height: 1.1; letter-spacing: -.034em; }
.compare .is-us strong { color: var(--accent); font-weight: 600; }
.compare tbody th span { display: block; margin-top: 4px; color: var(--fg-soft); font-size: var(--t-small); line-height: 1.6; }
.compare tr.is-us th, .compare tr.is-us td { border-top: 1px solid var(--ink); }
.dot { display: inline-block; width: 17px; height: 17px; margin-top: 8px; border-radius: 50%; background: var(--signal); }
.dot--off { background: transparent; border: 1px solid var(--rule-control); }

/* Ruggengraat op /aanpak */
.spine > li { position: relative; padding: 0 0 clamp(48px, 6vw, 88px) clamp(28px, 4vw, 44px); border-left: 1px solid var(--line-strong); }
.spine > li:last-child { padding-bottom: 0; border-left-style: dashed; }
.spine__dot { position: absolute; left: -10px; top: 6px; width: 19px; height: 19px; border-radius: 50%; background: var(--signal); }
.spine .label { display: none; }
.spine h3 { margin-block: 0 14px; font-size: clamp(2rem, calc(var(--u) * 3.8), 3.75rem); font-weight: 200; line-height: 1.04; letter-spacing: -.042em; }
.spine li > p { color: var(--fg-soft); }
.spine li > p a { color: var(--fg); }

/* Trap op /procesanalyse */
.stairs { display: grid; gap: 28px var(--gap); }
.stairs > li { position: relative; padding-top: 18px; border-top: 1px solid var(--signal); }
.stairs h3 { margin-block: 12px 10px; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
.stairs .small { color: var(--fg-soft); }

/* Grote regels */
.big-lines li { padding-block: .2em; border-top: 1px solid var(--line); font-size: clamp(1.5rem, calc(var(--u) * 3.8), 3.75rem); font-weight: 200; line-height: 1.08; letter-spacing: -.04em; }
.big-lines li:last-child { border-bottom: 1px solid var(--line); font-weight: 600; }

/* Inhoudsopgave op /cases */
.toc li { border-top: 1px solid var(--line); }
.toc li:last-child { border-bottom: 1px solid var(--line); }
.toc a { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding-block: 9px; font-size: var(--t-small); text-decoration: none; }
.toc .arrow { transition: transform .22s var(--ease); }
.toc a:hover .arrow { transform: translateY(3px); }

/* De grote stip: hier komt de lijn uit. */
.bigdot-host { --dot-w: clamp(480px, 48vw, 960px); overflow: clip; }
.bigdot { position: absolute; left: calc(var(--rail) * 0 - var(--dot-w) * .18); top: calc(var(--dot-w) * -.25); width: var(--dot-w); height: var(--dot-w); border-radius: 50%; background: var(--signal); }
.in-dot { --fg: var(--night); --fg-soft: var(--night); --accent: var(--night); --dot: var(--night); position: relative; color: var(--night); min-height: calc(var(--dot-w) * .75 - var(--section) + 28px); }
.in-dot .h2, .in-dot .mega { font-size: clamp(2.5rem, calc(var(--u) * 4.9), 5.25rem); line-height: 1; }
.in-dot .lead { max-width: 15em; font-weight: 500; }
.in-dot a { color: inherit; }
.bigdot-host .form__col, .bigdot-host .below-dot { position: relative; }

/* Formulieren */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.form__full { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: 6px; font-size: var(--t-small); font-weight: 500; }
.form input, .form select, .form textarea, .domain input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid var(--rule-control);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input[type='file'] { font-size: var(--t-small); }
.form input:hover, .form select:hover, .form textarea:hover, .domain input:hover { border-color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus, .domain input:focus { outline: 0; border-color: var(--green-deep); box-shadow: 0 0 0 2px var(--green-deep); }
.on-night .form input, .on-night .form textarea, .on-dark .form input, .on-dark .form textarea { background: transparent; border-color: var(--sage); color: var(--paper); }
.on-night .form input:hover, .on-night .form textarea:hover { border-color: var(--paper); }
.on-night .form input:focus, .on-night .form textarea:focus { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.form__hint { color: var(--fg-soft); font-size: .875rem; line-height: 1.6; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin: 0 0 24px; padding: 14px 16px; border-left: 3px solid var(--signal); background: var(--paper-2); color: var(--ink); }
.notice a { color: inherit; }
.notice--error { border-left-color: var(--error); background: #fbece8; color: var(--error); }

.domain { display: grid; gap: 8px; }
.domain label { font-size: var(--t-small); font-weight: 500; }
.domain__row { display: flex; flex-wrap: wrap; gap: 10px; }
.domain input { flex: 1 1 260px; width: auto; min-height: 68px; font-size: clamp(1.375rem, calc(var(--u) * 2.6), 2.25rem); font-weight: 200; letter-spacing: -.03em; }
.on-night .domain input { background: var(--paper); }
.domain input::placeholder { color: var(--ink-soft); opacity: 1; }
.domain .btn { min-height: 68px; }

/* Instellingen */
.settings dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-block: 10px; border-top: 1px solid var(--line); }
.settings dl > div:last-child { border-bottom: 1px solid var(--line); }
.settings dt { color: var(--fg-soft); font-size: var(--t-small); }
.settings dd { font: 400 var(--t-small)/1.7 var(--mono); overflow-wrap: anywhere; }

/* Doorlopende tekst */
.prose { max-width: 42rem; }
.prose h2 { margin-block: 2.2em .55em; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin-bottom: 1.1em; }
.prose li { position: relative; margin-bottom: .35em; padding-left: 1.1em; }
.prose li::before { content: ''; position: absolute; left: 0; top: .7em; width: .36em; height: .36em; border-radius: 50%; background: var(--signal); }
.prose .btn { margin-block: .4em; }

/* Ruimtehulpjes */
.mt-s { margin-top: clamp(10px, 1.2vw, 16px); }
.mt-m { margin-top: clamp(20px, 2.6vw, 36px); }
.mt-l { margin-top: clamp(32px, 4vw, 56px); }
.mt-xl { margin-top: clamp(56px, 7vw, 104px); }
.pad-band { padding-block: clamp(40px, 5vw, 72px); }
.rule-top { padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line-strong); }

/* Volgend project */
.next { display: block; text-decoration: none; transition: background-color .25s var(--ease), color .25s var(--ease); }
.next:hover { background: var(--night); color: var(--paper); }
.next__inner { display: grid; gap: 6px; padding-block: clamp(32px, 4vw, 56px); }
.next__inner .label { color: inherit; }
.next__title { font-size: clamp(2rem, calc(var(--u) * 4), 4.25rem); font-weight: 200; line-height: 1.05; letter-spacing: -.042em; }

/* Footer: het woordmerk als afsluiting */
.footer { padding-block: clamp(48px, 6vw, 88px) 24px; --fg: var(--paper); --fg-soft: #b9c4bd; --line: rgba(244, 243, 235, .2); background: var(--night); color: var(--paper); font-size: var(--t-small); }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--signal); text-decoration: underline; }
.footer__cols { row-gap: 32px; }
.footer__muted { color: var(--fg-soft); }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.footer h2 { margin-bottom: 12px; color: var(--fg-soft); font: 400 var(--t-label)/1.5 var(--mono); letter-spacing: .02em; }
.footer li { margin-bottom: 2px; }
.footer li a { display: inline-block; padding-block: 2px; }
.footer address { margin-bottom: 12px; }
.footer__mark { margin: clamp(32px, 5vw, 72px) 0 0; font-size: calc((100vw - var(--rail) - var(--edge) * 2) / 5.86); font-weight: 200; line-height: 1.22; letter-spacing: -.055em; white-space: nowrap; }
.footer__mark b { color: var(--signal); font-weight: 600; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 40px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--fg-soft); font: 400 var(--t-label)/1.7 var(--mono); }
.footer__legal p { margin: 0; }
.footer__sidn { display: flex; align-items: center; gap: 12px; }
.footer__sidn img { width: 34px; }

/* Vaste kolommen vanaf 900px: c{start}-{breedte} */
@media (min-width: 900px) {
    .c1-2 { grid-column: 1 / span 2; } .c1-3 { grid-column: 1 / span 3; } .c1-4 { grid-column: 1 / span 4; }
    .c1-5 { grid-column: 1 / span 5; } .c1-6 { grid-column: 1 / span 6; } .c1-7 { grid-column: 1 / span 7; }
    .c1-8 { grid-column: 1 / span 8; } .c1-9 { grid-column: 1 / span 9; } .c1-10 { grid-column: 1 / span 10; }
    .c3-3 { grid-column: 3 / span 3; } .c3-6 { grid-column: 3 / span 6; } .c3-8 { grid-column: 3 / span 8; } .c3-10 { grid-column: 3 / span 10; }
    .c4-5 { grid-column: 4 / span 5; } .c4-6 { grid-column: 4 / span 6; } .c4-7 { grid-column: 4 / span 7; } .c4-9 { grid-column: 4 / span 9; }
    .c5-4 { grid-column: 5 / span 4; } .c5-7 { grid-column: 5 / span 7; } .c5-8 { grid-column: 5 / span 8; }
    .c6-4 { grid-column: 6 / span 4; } .c6-5 { grid-column: 6 / span 5; } .c6-7 { grid-column: 6 / span 7; }
    .c7-3 { grid-column: 7 / span 3; } .c7-4 { grid-column: 7 / span 4; } .c7-6 { grid-column: 7 / span 6; }
    .c8-3 { grid-column: 8 / span 3; } .c8-5 { grid-column: 8 / span 5; }
    .c9-4 { grid-column: 9 / span 4; } .c10-3 { grid-column: 10 / span 3; }

    .sticky { position: sticky; top: calc(var(--head-h) + 28px); align-self: start; }
    .flip > * { grid-row: 1; }
    .offset-down { margin-top: clamp(56px, 8vw, 128px); }

    .hero__side { margin-top: calc(var(--goal) * -.3 - 6px); }
    .clients { grid-template-columns: 76px minmax(0, 1fr); align-items: center; }
    .clients ul { grid-template-columns: repeat(11, minmax(0, 1fr)); }

    .stop { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
    .stop--big { align-items: end; }
    .spec > div { grid-template-columns: 9.5rem minmax(0, 1fr); }
    .traits > li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

    .stairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stairs > li:nth-child(2) { margin-top: 64px; }
    .stairs > li:nth-child(3) { margin-top: 128px; }

    /* Vroeger en nu: horizontale schema's */
    .lane ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .lane li { padding: 24px 16px 0 0; }
    .lane li::before { top: 0; left: 0; }
    .lane li::after { top: 5px; left: 13px; right: 2px; bottom: auto; width: auto; height: 0; }
    .lane--was li::after { border-left: 0; border-top: 1px dashed currentColor; }
    .lane--now li { padding-bottom: 0; }
    .lane--now li::after { left: 15px; right: 2px; top: 5px; border-left: 0; border-top: 2px solid var(--c); }

    /* Procesweergave op breed scherm: lijnen in SVG, tekst in kolommen eronder. */
    .flow__art { display: block; position: relative; height: 150px; }
    .flow__art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .flow__art path { fill: none; stroke: var(--sage); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .flow__art .dashed { stroke-dasharray: 3 6; }
    .flow__tag { display: block; position: absolute; padding-inline: 8px; background: var(--green-deep); color: var(--sage); font: 400 var(--t-label)/1.4 var(--mono); white-space: nowrap; }
    .flow__tag--skip { left: 25%; top: 9px; transform: translateX(-50%); }
    .flow__tag--loop { left: 87%; top: 45px; transform: translateX(-50%); }
    .flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flow__step { padding: 0 var(--gap) 0 0; border-left: 0; }
    .flow__dot { left: 0; top: -46px; }
}

/* Onder 1000px verdwijnt de rail en komt er een topbalk. */
@media (max-width: 999.98px) {
    :root { --rail: 0px; --head-h: 65px; }
    .rail { display: none; }
    .topbar { display: block; }
    .bigdot-host { --dot-w: 125vw; }
}

@media (max-width: 899.98px) {
    .hero { --goal: calc((100vw - var(--edge) * 2) / 3.94); }
    .hero__is { font-size: max(2.25rem, calc(var(--goal) * .3)); }
    .sm-gap { margin-top: 24px; }
    .sm-gap-lg { margin-top: 48px; }
    .gridlines::before { display: none; }
    .actions .btn { flex: 1 1 100%; }
    .clients ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bleed-right, .bleed-left { margin-inline: calc(var(--edge) * -1); }
    .tab { --tab-x: 0% !important; --tab-w: min(84%, 300px); }
    .hero__side { margin-top: 26px; }
    .in-dot .lead { max-width: 13em; }
}

@media (max-width: 600px) {
    .line--wide { display: none; }
    .line--narrow { display: block; }
    .clients ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__legal { flex-direction: column; align-items: flex-start; }
    .domain .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
    .line--draw .line__path { stroke-dasharray: none; stroke-dashoffset: 0; }
    .line--draw .line__dot { opacity: 1; }
    .shot img { transform: none !important; }
}

.lanes--stacked .lane ol { grid-auto-flow: row; }
@media (min-width: 900px) {
    .lanes--stacked .lane li { padding: 0 0 14px 24px; }
    .lanes--stacked .lane li::before { top: .28em; left: 0; }
    .lanes--stacked .lane li::after { top: calc(.28em + 13px); left: 5px; right: auto; bottom: -2px; width: 0; height: auto; border-top: 0; }
    .lanes--stacked .lane--was li::after { border-left: 1px dashed currentColor; }
    .lanes--stacked .lane--now li::after { left: 5.5px; border-left: 2px solid var(--c); }
    .flip-note { grid-row: 1; }
}

/* ---------- Verdieping: situaties, schema's en verhalen ---------- */
.viz-note { margin: 12px 0 0; color: var(--fg-soft); font: 400 var(--t-label)/1.5 var(--mono); }
.quote { font-size: clamp(1.5rem, calc(var(--u) * 2.8), 2.75rem); font-weight: 200; line-height: 1.14; letter-spacing: -.034em; text-wrap: balance; }
.quote b { color: var(--accent); font-weight: 600; }
.prose-wide { max-width: 44rem; }
.prose-wide h3 { margin-block: 1.8em .4em; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; }
.prose-wide h3:first-child { margin-top: 0; }

/* Uitklappers die iets laten zien */
.reveal summary { display: inline-flex; align-items: center; gap: .7em; min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; cursor: pointer; list-style: none; }
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::after { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .2s var(--ease); }
.reveal[open] summary::after { background: currentColor; }
.reveal > :not(summary) { margin-top: 8px; }

/* Sectie 2: drie situaties, drie composities */
.sit { padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); row-gap: 20px; }
.sit:last-of-type { border-bottom: 1px solid var(--line); }
.sit h3 { font-size: clamp(1.625rem, calc(var(--u) * 2.7), 2.625rem); font-weight: 200; line-height: 1.08; letter-spacing: -.036em; }
.sit h3 b { color: var(--accent); font-weight: 600; }
.sit__text { margin-top: 14px; color: var(--fg-soft); }

/* Spreadsheet-tekening */
.sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fg); border-left: 1px solid var(--fg); font: 400 .75rem/1.3 var(--mono); }
.sheet span { padding: 9px 7px; border-right: 1px solid var(--fg); border-bottom: 1px solid var(--fg); min-height: 34px; overflow-wrap: anywhere; }
.sheet .hd { background: var(--paper-2); }
.sheet .on { background: var(--signal); color: var(--night); }

/* Dubbel invoeren */
.retype { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; font: 400 .8125rem/1.35 var(--mono); }
.retype__box { padding: 14px 10px; border: 1px solid var(--fg); text-align: center; }
.retype__arrow { display: grid; justify-items: center; gap: 3px; color: var(--fg-soft); font-size: .6875rem; text-align: center; }
.retype__arrow i { display: block; width: 58px; border-top: 1px dashed currentColor; }

/* Stappen tellen */
.count { display: grid; gap: 14px; }
.count__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.count__who { font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.count__steps { display: flex; flex-wrap: wrap; gap: 3px 12px; color: var(--fg-soft); font: 400 .75rem/1.5 var(--mono); }
.count__steps span { position: relative; padding-left: 12px; }
.count__steps span::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.count__now { grid-column: 2; display: none; color: var(--fg); font-size: var(--t-small); font-weight: 500; line-height: 1.35; }
.count:has(~ .reveal[open]) .count__steps span, .sit__viz:has(.reveal[open]) .count__steps span { text-decoration: line-through; text-decoration-color: var(--signal); }
.sit__viz:has(.reveal[open]) .count__now { display: block; }
.sit__viz:has(.reveal[open]) .retype__arrow, .sit__viz:has(.reveal[open]) .retype__box:last-child { opacity: .35; }
.sit__viz:has(.reveal[open]) .sheet span:not(.hd, .keep) { color: transparent; }

/* Tag: vroeger en nu */
.versus { display: grid; gap: 1px; background: var(--line); }
.versus > div { padding: clamp(20px, 3vw, 40px); background: var(--paper); }
.on-sage .versus > div { background: var(--sage); }
.versus__label { margin: 0 0 14px; color: var(--fg-soft); font: 400 var(--t-label)/1.5 var(--mono); }
.versus svg { display: block; width: 100%; max-width: 300px; height: auto; margin-bottom: 18px; overflow: visible; }
.versus svg * { vector-effect: non-scaling-stroke; }
.draw { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.draw--signal { stroke: var(--signal); stroke-width: 2.2; }
.fill-signal { fill: var(--signal); stroke: none; }
.versus ol { display: grid; gap: 7px; counter-reset: st; }
.versus li { position: relative; padding-left: 22px; font-size: var(--t-small); line-height: 1.4; }
.versus li::before { content: ''; position: absolute; left: 0; top: .34em; width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; }
.versus__now li { font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 500; letter-spacing: -.012em; }
.versus__now li::before { background: var(--signal); border-color: var(--signal); top: .38em; }
.counter { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
.counter div { min-width: 7rem; }
.counter b { display: block; color: var(--accent); font-size: clamp(2.125rem, calc(var(--u) * 3.9), 4rem); font-weight: 200; line-height: 1; letter-spacing: -.05em; }
.counter span { display: block; margin-top: 4px; color: var(--fg-soft); font: 400 var(--t-label)/1.4 var(--mono); }

/* Diensten: per dienst een eigen regel */
.svc { position: relative; padding-block: clamp(26px, 3vw, 44px); border-top: 1px solid var(--line-strong); row-gap: 16px; }
.svc:last-child { border-bottom: 1px solid var(--line-strong); }
.svc h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.022em; font-weight: 500; }
.svc--big h3 { font-size: clamp(2.25rem, calc(var(--u) * 4.9), 5rem); font-weight: 200; line-height: 1; letter-spacing: -.05em; }
.svc h3 b { color: var(--accent); font-weight: 600; }
.svc__problem { margin-top: 10px; font-size: var(--t-lead); line-height: 1.35; letter-spacing: -.012em; }
.svc dl { display: grid; gap: 10px; font-size: var(--t-small); line-height: 1.6; }
.svc dt { color: var(--fg-soft); font: 400 var(--t-label)/1.6 var(--mono); }
.svc__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; font-size: var(--t-small); font-weight: 500; }

/* Kalender: papier tegenover elke dag */
.days { display: grid; gap: 16px; }
.days__label { margin: 0 0 6px; font: 400 var(--t-label)/1.4 var(--mono); }
.days__row { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: clamp(2px, .45vw, 6px); }
.days__row i { display: block; aspect-ratio: 1; border: 1px solid var(--line-strong); }
.days__row .hit { background: var(--dot); border-color: var(--dot); }
.days__end { margin: 6px 0 0; font-size: var(--t-small); font-weight: 500; }

/* Schermen: één wijziging, drie plekken */
.screens { display: grid; gap: clamp(12px, 1.6vw, 22px); align-items: end; }
.screen { display: flex; flex-direction: column; gap: 10px; }
.screen__frame { padding: 14px; border: 1px solid var(--sage); background: var(--night); color: var(--paper); font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.screen__name { margin: 0; color: var(--sage); font: 400 var(--t-label)/1.4 var(--mono); }
.screen__line { display: flex; justify-content: space-between; gap: 8px; padding-block: 6px; border-top: 1px solid rgba(196, 215, 191, .25); color: var(--sage); }
.screen__line.is-live { color: var(--signal); font-weight: 600; }
.screen--kiosk .screen__frame { min-height: 13rem; border-radius: 6px 6px 0 0; }
.screen--wall .screen__frame { min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; }
.screen--sign .screen__frame { padding-block: 22px; font-size: 1.0625rem; }
.screen__logo { color: var(--signal); font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.sync { display: grid; gap: 6px; max-width: 26rem; margin-bottom: 22px; }
.sync label { font-size: var(--t-small); font-weight: 500; }
.sync input { min-height: 52px; padding: 10px 14px; border: 1px solid var(--signal); border-radius: var(--radius); background: transparent; color: var(--paper); font: inherit; }
.sync input:focus { outline: 2px solid var(--signal); outline-offset: 1px; }

/* Keten */
.chain { position: relative; }
.chain li { position: relative; display: grid; gap: 2px var(--gap); padding: 0 0 clamp(16px, 2vw, 26px) 34px; }
.chain li::before { content: ''; position: absolute; left: 6px; top: .9em; bottom: -.7em; border-left: 2px solid var(--signal); }
.chain li:last-child::before { display: none; }
.chain li::after { content: ''; position: absolute; left: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; background: var(--signal); }
.chain b { font-size: clamp(1.5rem, calc(var(--u) * 2.8), 2.75rem); font-weight: 200; line-height: 1.08; letter-spacing: -.04em; }
.chain span { color: var(--fg-soft); font-size: var(--t-small); line-height: 1.55; align-self: center; }

/* De verkeerde vraag */
.ask__system { position: sticky; top: calc(var(--head-h) + 16px); padding: clamp(18px, 2.4vw, 30px); background: var(--night); color: var(--paper); }
.ask__system h3 { margin: 0 0 12px; color: var(--sage); font: 400 var(--t-label)/1.5 var(--mono); }
.ask__parts li { padding-block: 7px; border-top: 1px solid rgba(196, 215, 191, .25); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.25; letter-spacing: -.012em; transition: color .25s var(--ease), opacity .25s var(--ease); }
.ask__rest { margin: 14px 0 0; color: var(--signal); font-weight: 600; line-height: 1.3; }
.ask__q { border-top: 1px solid var(--line); }
.ask__q:last-of-type { border-bottom: 1px solid var(--line); }
.ask__q summary { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding-block: 15px; font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.25; letter-spacing: -.016em; cursor: pointer; list-style: none; }
.ask__q summary::-webkit-details-marker { display: none; }
.ask__q summary::after { content: ''; flex: none; align-self: center; width: 11px; height: 11px; border-radius: 50%; border: 1px solid currentColor; transition: background-color .2s var(--ease); }
.ask__q[open] summary::after { background: var(--signal); border-color: var(--signal); }
.ask__q p { margin: 0 0 16px; max-width: 34rem; color: var(--fg-soft); font-size: var(--t-small); }
.ask:has(#v1[open]) .p1, .ask:has(#v2[open]) .p2, .ask:has(#v3[open]) .p3, .ask:has(#v4[open]) .p4, .ask:has(#v5[open]) .p5, .ask:has(#v6[open]) .p6 { color: rgba(196, 215, 191, .6); text-decoration: line-through; text-decoration-color: var(--signal); }

/* Vragen */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; padding-block: 16px; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; color: var(--accent); font-weight: 200; font-size: 1.5em; line-height: .8; }
.faq details[open] summary::after { content: '–'; }
.faq p { max-width: 42rem; margin-bottom: 18px; color: var(--fg-soft); }

/* Zwembanen: fictief proces */
.swim { position: relative; }
.swim__art { display: none; }
.swim__nodes { display: grid; gap: 12px; }
.swim__node { position: relative; padding-left: 22px; font-size: var(--t-small); line-height: 1.35; }
.swim__node::before { content: ''; position: absolute; left: 0; top: .32em; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--fg); }
.swim__node em { display: block; color: var(--fg-soft); font: 400 var(--t-label)/1.4 var(--mono); font-style: normal; }
.swim__node.is-pain::before { background: var(--error); border-color: var(--error); }
.swim__after { display: none; margin-top: 20px; padding: 18px; background: var(--paper-2); }
.swim__after ol { display: grid; gap: 8px; margin-top: 8px; }
.swim__after li { position: relative; padding-left: 20px; font-weight: 500; }
.swim__after li::before { content: ''; position: absolute; left: 0; top: .4em; width: 11px; height: 11px; border-radius: 50%; background: var(--signal); }
.swimmer:has(.reveal[open]) .swim__node.is-gone { color: var(--fg-soft); text-decoration: line-through; text-decoration-color: var(--signal); }
.swimmer:has(.reveal[open]) .swim__node.is-gone::before { background: transparent; border-style: dashed; border-color: var(--fg-soft); }
.swimmer:has(.reveal[open]) .swim__after { display: block; }
.swimmer:has(.reveal[open]) .swim__art .l-old { opacity: .25; }

/* Schematisch adviesdocument */
.paper-doc { position: relative; max-width: 26rem; padding: clamp(22px, 3vw, 36px); background: var(--paper); color: var(--ink); box-shadow: 10px 10px 0 var(--green-deep); }
.paper-doc h3 { margin: 0 0 4px; font-size: 1.125rem; line-height: 1.25; }
.paper-doc__sec { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.paper-doc__sec b { font-size: var(--t-small); font-weight: 600; }
.paper-doc__sec i { display: block; height: 7px; margin-top: 7px; background: var(--paper-2); }
.paper-doc__sec i:nth-child(3) { width: 82%; }
.paper-doc__sec i:nth-child(4) { width: 58%; }

/* Grote procesvisualisatie */
.bigflow svg { display: none; width: 100%; height: auto; overflow: visible; }
.bigflow text { fill: currentColor; font-family: var(--sans); font-size: 15px; }
.bigflow .t-big { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.bigflow .t-mono { font-family: var(--mono); font-size: 12px; fill: var(--sage); }
.bigflow .ln { fill: none; stroke: var(--sage); stroke-width: 1.2; }
.bigflow .ln--d { stroke-dasharray: 3 6; }
.bigflow .nd { fill: var(--signal); }
.bigflow .nd--o { fill: var(--green-deep); stroke: var(--signal); stroke-width: 1.5; }
.bigflow__list { display: grid; gap: 14px; }
.bigflow__list li { position: relative; padding-left: 24px; }
.bigflow__list li::before { content: ''; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: 50%; background: var(--signal); }
.bigflow__list b { display: block; font-weight: 600; }
.bigflow__list span { color: var(--fg-soft); font-size: var(--t-small); }

/* Tijdlijn */
.years { display: grid; gap: 22px; }
.years li { position: relative; padding-left: 26px; }
.years li::before { content: ''; position: absolute; left: 0; top: .9em; width: 13px; height: 13px; border-radius: 50%; background: var(--signal); }
.years li::after { content: ''; position: absolute; left: 6px; top: 1.6em; bottom: -22px; border-left: 1px solid var(--line-strong); }
.years li:last-child::after { display: none; }
.years b { display: block; color: var(--accent); font-size: clamp(2.25rem, calc(var(--u) * 3.9), 4rem); font-weight: 200; line-height: 1.05; letter-spacing: -.05em; }
.years span { display: block; max-width: 26rem; font-size: var(--t-small); line-height: 1.6; }

.note-source { margin-top: 12px; color: var(--fg-soft); font: 400 var(--t-label)/1.6 var(--mono); }
.note-source a { color: inherit; }
.back-link { display: inline-block; margin-bottom: 14px; }
.lesson { padding-block: clamp(28px, 3.5vw, 48px); }

@media (min-width: 900px) {
    .sit__viz { align-self: center; }
    .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc--big dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .screens { grid-template-columns: 1fr 1.7fr 1.1fr; }
    .chain li { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .years { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); }
    .years li { padding: 22px 16px 0 0; }
    .years li::before { top: 0; left: 0; }
    .years li::after { top: 6px; left: 14px; right: -10px; bottom: auto; border-left: 0; border-top: 1px solid var(--line-strong); }

    .swim__art { display: block; position: absolute; inset: 0; pointer-events: none; }
    .swim__art svg { display: block; width: 100%; height: 100%; }
    .swim__art path { fill: none; stroke: var(--fg-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .swim { padding-left: 7.5rem; }
    .swim__roles { position: absolute; left: 0; top: 0; bottom: 0; width: 7rem; display: grid; grid-template-rows: repeat(3, 1fr); color: var(--fg-soft); font: 400 var(--t-label)/1.3 var(--mono); }
    .swim__roles span { padding-top: 12px; border-top: 1px solid var(--line); }
    .swim__inner { position: relative; }
    .swim__nodes { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(3, 8.5rem); gap: 0; }
    .swim__node { grid-column: var(--c); grid-row: var(--r); justify-self: start; align-self: start; padding: 22px 8px 2px 0; background: linear-gradient(transparent 20px, var(--paper) 20px); font-size: .8125rem; }
    .swim__node::before { top: 5px; left: 0; z-index: 1; }
    .swim__node em { display: none; }
    .bigflow svg { display: block; }
    .bigflow__list { display: none; }
}

@media (max-width: 899.98px) {
    .swim__roles { display: none; }
    .ask__system { top: 72px; z-index: 2; padding: 12px 14px; }
    .ask__parts { display: flex; flex-wrap: wrap; gap: 0 14px; }
    .ask__parts li { padding-block: 2px; border: 0; font-size: .8125rem; }
    .ask__rest { margin-top: 6px; font-size: .8125rem; }
}

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

/* Kluwen in de hero */
.hero__knot { margin-top: 14px; }
.hero__knot .line { max-width: 480px; }
.hero__knot .line--wide .line__path { stroke-width: 4.4; }
.hero__knot .line--narrow { max-width: 72%; }
.hero__where { display: none; margin: 0; color: var(--sage); font: 400 var(--t-label)/1.7 var(--mono); }
.hero__where b { color: var(--paper); font-weight: 500; }
@media (min-width: 1240px) {
    .hero__where { display: block; position: absolute; top: 4px; right: var(--edge); text-align: right; }
}
@media (max-width: 899.98px) { .hero__knot { margin-top: 18px; } }

.mega--long { font-size: clamp(2.375rem, calc(var(--u) * 5.9), 6.5rem); }
.bleed-full { margin-inline: 0; }
.project-head { padding-bottom: 0; }
.plist__row { padding-block: clamp(36px, 5vw, 72px); border-top: 1px solid var(--line-strong); }
.plist__row h2 a { text-decoration: none; }
.plist__row h2 a:hover { color: var(--accent); }
.bigflow { color: var(--paper); }
@media (max-width: 1099.98px) {
    .bigflow svg { display: none !important; }
    .bigflow__list { display: grid !important; }
}

.swimmer .swim__after { margin-top: 18px; }
.traits h3 a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }