/* Hallmark · shape: one-pager, grote kop met de versterker, vier knelpunten als reeks, twee cases als typografische dossiers, over Rowin, formulier · genre: modern-minimal · theme: custom · job: hire · idea: "AI is een versterker: een rommelige lijn gaat een oranje knoop in en komt er als strakke golf uit; elke onthulling begint als een lijn" · vibe: "donker, scherp, oranje signaal, echt werk"
 * paper: oklch(16% 0.01 60) · accent: oklch(68% 0.19 45) · display: Red Hat Display · body: Red Hat Text · hero: grote kop over de volle breedte, daaronder zin en knop links en de versterker rechts · nav: naam links, één knop rechts, plakt bovenaan · footer: drie regels op een tweede vlak · imagery: geen schermen; de versterker (canvas, statische svg zonder script) en het portret · signature: de versterker, een zwakke rommelige lijn wordt een krachtige golf die met de scroll sterker wordt
 * axes: dark/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: H, de versterker is geometrie zonder data; hij draagt alleen als de beweging het verhaal vertelt (rommel erin, kracht eruit, ook de ruis) */
/* Hallmark · answered F8 · Rowin vroeg letterlijk om vettere animaties en scroll-choreografie door de hele pagina; alles leunt op één motief, de meetlijn, op transform, opacity en clip-path, en staat zonder script of met reduced motion stil en zichtbaar */
/* Hallmark · waive 47c · de versterker beeldt de kernzin uit (kennis erin, AI versterkt) en is geen nagemaakte interface of grafiek, er staan geen assen of waarden in · Rowin koos dit beeld zelf in plaats van screenshots in de hero */
/* Hallmark · waive 11 · vulling en label van de knop rollen samen omhoog in dezelfde duur en curve, het is één gebaar · Rowin vroeg om een stevige knop-interactie, één kleurwissel was hem te stil */
/* Hallmark · waive 77 · het blok RP Analytics is bewust smal en stil, één kop en één alinea met de privacylink · Google vraagt voor de merkverificatie een beschrijving van de app op de homepage, Rowin wil die rustig en zonder beweging */
/* Hallmark · dismissed 23 · de spine is een lijn van 2 px breed langs de rand, het oranje beslaat ver onder 5 procent van het scherm */
/* Hallmark · answered F4 · de secundaire knop is een omlijnde knop, alleen de hoverstaat vult hem */
@import url("../../tokens.css");

html, body { overflow-x: clip; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  accent-color: var(--color-accent);
  caret-color: var(--color-accent-text);
  scrollbar-color: var(--color-muted) var(--color-paper);
}
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, .btn:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset); }
:target { scroll-margin-top: var(--space-9); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: var(--space-4); top: -100px; background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); z-index: 10; }
.skip:focus { top: var(--space-4); }

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0; text-wrap: balance; overflow-wrap: break-word; min-width: 0; color: var(--color-ink); }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--text-lg); max-width: 34ch; }
.small { font-size: var(--text-sm); color: var(--color-muted); }
.nw { white-space: nowrap; }

/* woorden in koppen: elk woord in een eigen venster, zodat het van onder kan opkomen */
.wd { display: inline-block; clip-path: inset(-0.4em -0.3em 0 -0.3em); padding-bottom: 0.14em; margin-bottom: -0.14em; vertical-align: top; }
.wd > span { display: inline-block; }

/* knoppen: één gebaar, vulling en label rollen samen omhoog */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 0 var(--space-5); font-family: var(--font-body); font-weight: var(--strong-weight); font-size: var(--text-base); line-height: 1; white-space: nowrap; text-decoration: none; border: var(--rule-width) solid transparent; border-radius: var(--radius-control); cursor: pointer; position: relative; isolation: isolate; overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-slow) var(--ease-snap), border-color var(--dur-slow) var(--ease-snap); }
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; transform: translateY(101%); transition: transform var(--dur-slow) var(--ease-snap); }
.btn-label { display: block; position: relative; overflow: hidden; padding: 0.2em 0; margin: -0.2em 0; }
.btn-txt { display: block; position: relative; transition: transform var(--dur-slow) var(--ease-snap); }
.btn-txt::after { content: attr(data-label); content: attr(data-label) / ""; position: absolute; left: 0; right: 0; top: calc(100% + 0.4em); text-align: center; }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover .btn-txt, .btn:focus-visible .btn-txt { transform: translateY(calc(-100% - 0.4em)); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.btn[aria-busy="true"] { cursor: progress; opacity: 1; transform: none; }
.btn-primary[aria-busy="true"] { color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn[aria-busy="true"]::before { transform: translateY(101%); }
.btn[aria-busy="true"] .btn-txt { transform: none; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn-primary::before { background: var(--color-ink); }
.btn-primary:hover, .btn-primary:focus-visible { border-color: var(--color-ink); color: var(--color-paper); }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-secondary::before { background: var(--color-accent); }
.btn-secondary:hover, .btn-secondary:focus-visible { color: var(--color-accent-ink); border-color: var(--color-accent); }

/* navigatie, plakt bovenaan zodat Contact altijd binnen bereik is */
.nav { position: sticky; top: 0; z-index: 5; background: var(--color-paper); border-bottom: var(--rule-width) solid var(--color-rule); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--space-8); gap: var(--space-4); }
.wordmark { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; letter-spacing: var(--tracking-display); }
.wordmark:hover { color: var(--color-accent-text); }

/* voortgang: een meetlijn langs de linkerrand, alleen met beweging en vanaf tablet */
.spine { display: none; position: fixed; top: 0; bottom: 0; left: var(--space-3); width: 2px; background: var(--color-rule); z-index: 4; pointer-events: none; }
.spine::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform-origin: top; transform: scaleY(var(--s, 0)); }
@media (min-width: 40rem) { .js .spine { display: block; } }

/* hero */
.hero { padding: var(--space-7) 0 var(--space-8); }
.hero h1 { max-width: 16ch; }
.line { display: block; }
.hero h1 .wd > span { animation: rise 0.9s var(--ease-out) both; animation-delay: calc(var(--i) * var(--stagger)); }
/* de tweede regel komt op als het signaal de oranje knoop bereikt (rond 0,9 s) */
.hero h1 .line-2 .wd > span { animation-delay: calc(0.85s + var(--i) * var(--stagger)); }
@keyframes rise { from { transform: translateY(115%); } to { transform: none; } }
.hero-text > * { animation: fadeup 0.7s var(--ease-out) both; }
.hero-text > :nth-child(1) { animation-delay: 1.1s; }
.hero-text > :nth-child(2) { animation-delay: 1.2s; }
.hero-text > :nth-child(3) { animation-delay: 1.3s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
.hero-text { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.hero-text .btn { margin-top: var(--space-2); }
@media (min-width: 960px) {
  .hero { padding: var(--space-8) 0 var(--space-9); }
  .signaal { aspect-ratio: 4 / 3; }
  .hero h1 { max-width: 22ch; }
  .hero-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); margin-top: var(--space-7); }
}

/* de versterker: zonder script een statische tekening, met script het canvas */
.hero-visual { min-width: 0; }
.signaal { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-paper-2); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-card); animation: veldin 0.9s var(--ease-out) 0.2s both; }
@keyframes veldin { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.signaal-static, .signaal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.signaal-canvas { opacity: 0; }
.signaal.live .signaal-canvas { opacity: 1; }
.signaal.live .signaal-static { display: none; }
.sig-in { fill: none; stroke: var(--color-muted); stroke-width: 1.25; stroke-linejoin: round; }
.sig-uit { fill: none; stroke: var(--color-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sig-knoop { fill: var(--color-accent); }

/* secties */
.section { padding: var(--section-gap) 0 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); } .split h2 { position: sticky; top: calc(var(--space-8) + var(--space-6)); align-self: start; } }

/* knelpunten: een reeks, de oranje meetlijn schuift mee naar het knelpunt dat je leest */
.problems { display: grid; position: relative; padding-left: var(--space-5); }
.problems::before, .problem::after { content: ""; position: absolute; left: 0; right: 0; height: var(--rule-width); background: var(--color-rule); transform-origin: left; transition: transform 0.9s var(--ease-out); }
.problems::before { top: 0; left: var(--space-5); }
.problem { position: relative; display: grid; gap: var(--space-2); padding: var(--space-5) 0; }
.problem::after { bottom: 0; }
.problem p { max-width: var(--measure); color: var(--color-muted); transition: color var(--dur-slow) var(--ease-out); }
.problem.is-active p { color: var(--color-ink); }
.probe { position: absolute; left: 0; top: 0; width: 2px; height: 1px; background: var(--color-accent); transform-origin: top; transform: translateY(var(--py, 0px)) scaleY(var(--ph, 0)); transition: transform 0.6s var(--ease-snap), opacity var(--dur-base) var(--ease-out); }
@media (min-width: 960px) { .problem { padding: var(--space-8) 0; } .section { padding-top: calc(var(--section-gap) * 1.5); } .contact { padding-bottom: calc(var(--section-gap) * 1.5); } }
.js .probe { opacity: 0; }
.js .probe.on { opacity: 1; }

/* bewijs 3a: een typografisch statement, de versterker groeit mee met de scroll */
.input-kop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: end; }
.input-kop h2 { font-size: var(--text-3xl); max-width: 16ch; }
.input-tekst { max-width: var(--measure); font-size: var(--text-lg); }
@media (min-width: 960px) { .input-kop { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); } }
.proof { list-style: none; margin: var(--section-gap) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); counter-reset: bewijs; }
.proof li { position: relative; padding-top: var(--space-4); font-family: var(--font-num); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink); max-width: 44ch; }
.proof li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent); transform-origin: left; transition: transform 0.9s var(--ease-snap); }
@media (min-width: 960px) { .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }

/* bewijs 3b: een schema van de koppelingen, signalen lopen van je systemen naar de agents */
.systemen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.systemen-tekst { display: grid; gap: var(--space-4); justify-items: start; }
.systemen-tekst h2 { margin-bottom: var(--space-2); }
.systemen-tekst p { max-width: var(--measure); }
@media (min-width: 960px) { .systemen { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); } }
.schakel { --bus: var(--space-7); --puls: var(--space-2); margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--bus) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--space-3) 0; }
@media (min-width: 640px) { .schakel { --bus: var(--space-9); --puls: var(--space-5); } }
.schakel-kop { font-size: var(--text-sm); color: var(--color-muted); grid-row: 1; grid-column: 1; }
.schakel-kop-r { grid-column: 3; }
.nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); grid-row: 2; }
.nodes-a { grid-column: 1; }
.nodes-s { grid-column: 3; justify-content: space-around; }
.nodes li { position: relative; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--strong-weight); line-height: 1.3; color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-control); }
.nodes li::after, .puls { content: ""; position: absolute; top: 50%; width: calc(var(--bus) / 2); height: 2px; margin-top: -1px; }
.nodes li::after { height: var(--rule-width); margin-top: 0; background: var(--color-field-border); transition: transform 0.6s var(--ease-snap); }
.nodes-a li::after, .nodes-a .puls { left: 100%; }
.nodes-s li::after, .nodes-s .puls { right: 100%; }
.nodes-a li::after { transform-origin: right; }
.nodes-s li::after { transform-origin: right; }
.bus { grid-row: 2; grid-column: 2; position: relative; }
.bus::before { content: ""; position: absolute; left: 50%; top: var(--space-5); bottom: var(--space-5); width: var(--rule-width); background: var(--color-field-border); transform-origin: top; transition: transform 0.8s var(--ease-snap) 0.3s; }
.puls { overflow: hidden; pointer-events: none; }
.puls::before { content: ""; position: absolute; inset: 0; background: var(--color-accent); clip-path: inset(0 calc(100% - var(--puls)) 0 0); transform: translateX(100%); }

/* cases: open dossiers op een lijn, zonder kaart; het mandje is het enige vlak */
.cases { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
.case-wrap { position: relative; }
.case { border-top: var(--rule-width) solid var(--color-rule); padding: var(--space-6) 0 var(--space-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.case-head { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.case h3 { font-size: var(--text-3xl); }
.case-groot h3 { max-width: 20ch; }
.case-wie { font-size: var(--text-lg); color: var(--color-muted); }
.tag { font-size: var(--text-sm); color: var(--color-ink); border: var(--rule-width) solid var(--color-field-border); border-radius: var(--radius-control); padding: var(--space-1) var(--space-2); line-height: 1.3; }
.case-body { display: grid; gap: var(--space-6); align-content: start; }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.facts li { padding-left: var(--space-4); border-left: var(--rule-width) solid var(--color-rule); max-width: var(--measure); }
.case-result { display: grid; gap: var(--space-2); padding-left: var(--space-4); border-left: 2px solid var(--color-accent); max-width: 44ch; }
.case-result p { font-size: var(--text-lg); }
.case-result .case-fig { font-family: var(--font-num); font-size: var(--text-figure); line-height: 1; color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7) var(--space-8); padding: var(--space-8) 0 var(--space-2); }
  .case-groot .case-head { grid-column: 1 / -1; }
}

/* het winkelmandje: een gestileerde demo van de kassakoopjes, geen kopie van de winkel */
.mandje-fig { margin: 0; display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
.mandje { width: 100%; max-width: 400px; background: var(--color-paper-2); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-5); font-size: var(--text-sm); line-height: 1.35; color: var(--color-ink); }
.m-lijf { display: grid; gap: var(--space-4); transition: opacity var(--dur-slow) var(--ease-out); }
.m-kop { display: flex; align-items: center; gap: var(--space-2); }
.m-titel { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); letter-spacing: var(--tracking-display); }
.m-aantal { font-family: var(--font-num); font-variant-numeric: tabular-nums; min-width: 1.6em; padding: 0 var(--space-1); text-align: center; border: var(--rule-width) solid var(--color-field-border); border-radius: var(--radius-control); }
.m-balk { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-paper); border-radius: var(--radius-control); }
.m-balk-tekst { display: grid; }
.m-balk-tekst > span { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--space-2); transition: opacity var(--dur-base) var(--ease-out); }
.m-balk-tekst b { font-family: var(--font-num); font-weight: var(--body-weight); }
.m-nog { opacity: 0; }
.m-gratis { font-weight: var(--strong-weight); }
.m-ico { width: 1em; height: 1em; fill: none; stroke: var(--color-accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-meter { height: 6px; background: var(--color-rule); border-radius: var(--radius-control); overflow: hidden; }
.m-vul { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(1); transition: transform 0.9s var(--ease-snap); }
.m-regels { list-style: none; margin: 0; padding: 0; display: grid; }
.m-item, .m-acc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--rule-width) solid var(--color-rule); }
.m-acc { grid-template-columns: auto minmax(0, 1fr) auto auto; border-bottom: 0; border-top: var(--rule-width) solid var(--color-rule); }
.m-thumb { width: 44px; height: 44px; display: grid; place-items: center; background: var(--color-paper); border-radius: var(--radius-control); }
.m-thumb svg { width: 28px; height: 28px; fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.m-naam { display: grid; gap: 2px; font-weight: var(--strong-weight); min-width: 0; }
.m-naam small { font-size: var(--text-sm); font-weight: var(--body-weight); color: var(--color-muted); }
.m-prijs { display: grid; justify-items: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-prijs s { color: var(--color-muted); font-size: 0.8125rem; }
.m-label { justify-self: start; font-size: 0.8125rem; font-weight: var(--strong-weight); color: var(--color-accent-text); border: var(--rule-width) solid currentColor; border-radius: var(--radius-control); padding: 0 var(--space-1); line-height: 1.5; transition: transform var(--dur-slow) var(--ease-snap) 0.35s, opacity var(--dur-base) var(--ease-out) 0.35s; }
.m-plus { width: 32px; height: 32px; display: grid; place-items: center; border: var(--rule-width) solid var(--color-ink); border-radius: var(--radius-control); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.m-plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.m-extra { display: grid; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-snap); }
.m-extra-kop { font-weight: var(--strong-weight); padding: var(--space-3) 0; }
.m-item { transition: opacity var(--dur-base) var(--ease-out), transform 0.7s var(--ease-snap); }
.m-acc-1 { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.m-acc-2 { transform: translateY(calc(-100% - var(--rule-width))); transition: transform var(--dur-slow) var(--ease-snap) 0.15s; }
.m-totaal { display: flex; justify-content: space-between; align-items: baseline; font-weight: var(--strong-weight); }
.m-som { font-family: var(--font-num); font-weight: var(--body-weight); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }

/* de stappen van de demo; zonder script of met reduced motion staat de eindstand */
.mandje.is-reset, .mandje.is-reset * { transition: none !important; }
.mandje.is-uit .m-lijf { opacity: 0; }
.mandje.is-s0 .m-item-1 { opacity: 0; transform: translateY(-28px); }
.mandje:is(.is-s0, .is-s1, .is-s2, .is-s3, .is-s4) .m-item-2 { opacity: 0; }
.mandje:is(.is-s0, .is-s1) .m-vul { transform: scaleX(0); }
.mandje:is(.is-s2, .is-s3, .is-s4) .m-vul { transform: scaleX(0.533); }
.mandje:is(.is-s0, .is-s1, .is-s2, .is-s3, .is-s4) .m-gratis { opacity: 0; }
.mandje:is(.is-s2, .is-s3, .is-s4) .m-nog { opacity: 1; }
.mandje:is(.is-s0, .is-s1, .is-s2) .m-extra { opacity: 0; transform: translateY(var(--space-3)); }
.mandje:is(.is-s0, .is-s1, .is-s2) .m-label { opacity: 0; transform: scale(0.8); }
.mandje:is(.is-s0, .is-s1, .is-s2, .is-s3, .is-s4) .m-acc-1 { opacity: 1; }
.mandje:is(.is-s0, .is-s1, .is-s2, .is-s3, .is-s4) .m-acc-2 { transform: none; }
.mandje.is-s4 .m-acc-1 .m-plus { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); transform: scale(0.86); }

/* over */
.over { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.portrait-wrap { width: 100%; max-width: 480px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-card); border: var(--rule-width) solid var(--color-rule); }
.portrait { width: 100%; height: 100%; object-fit: cover; }
.over-text { display: grid; gap: var(--space-4); justify-items: start; }
.over-text p { max-width: var(--measure); }
.over-text h2 { margin-bottom: var(--space-2); }
@media (min-width: 960px) { .over { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } .portrait-wrap { max-width: none; } }

/* contact */
.contact { padding-bottom: var(--section-gap); }
.contact-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-7); }
.contact-in::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: var(--rule-width); background: var(--color-rule); transform-origin: left; transition: transform 1.1s var(--ease-snap); }
.contact-intro { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.contact-intro h2 { margin-bottom: var(--space-2); }
.contact-intro p { max-width: var(--measure); }
.contact-form { min-width: 0; display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 960px) { .contact-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } }

/* formulier */
.form { display: grid; gap: var(--space-4); }
.form[hidden] { display: none; }
.fld-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-5); }
@media (min-width: 640px) { .fld-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fld { display: grid; min-width: 0; }
.fld label { font-size: var(--text-sm); font-weight: var(--strong-weight); color: var(--color-ink); line-height: 1.4; }
.req { font-weight: var(--body-weight); color: var(--color-muted); margin-left: var(--space-1); }
.err { min-height: 1lh; font-size: var(--text-sm); line-height: 1.6; color: var(--color-error); display: flex; align-items: center; gap: var(--space-2); padding: 0 0 var(--space-1); }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.fld input, .fld textarea { width: 100%; min-height: var(--control-height); padding: var(--space-3) var(--space-4); font: inherit; color: var(--color-ink); background: var(--color-paper-2); border: var(--rule-width) solid var(--color-field-border); border-radius: var(--radius-control); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.fld textarea { min-height: calc(var(--control-height) * 3); resize: vertical; line-height: var(--leading-body); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--color-muted); }
.fld input:hover, .fld textarea:hover { border-color: var(--color-ink); }
.fld input:focus-visible, .fld textarea:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: 2px; border-color: var(--color-focus); }
.fld input:disabled, .fld textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.fld.is-err input, .fld.is-err textarea { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.form-foot { display: grid; gap: var(--space-4); justify-items: start; margin-top: var(--space-3); }
.form-foot .small { max-width: var(--measure); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* meldingen na versturen: zichtbaar via script, of zonder script via #verzonden en #fout */
.notice { display: none; padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-paper-2); border: var(--rule-width) solid var(--color-rule); border-left: 2px solid var(--color-accent); }
.notice:target, .notice.is-on { display: grid; gap: var(--space-2); align-content: start; }
.notice:focus { outline: none; }
.notice:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset); }
.notice-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1.2; display: flex; align-items: center; gap: var(--space-3); }
.notice-err { border-left-color: var(--color-error); }
.notice-err .notice-title { color: var(--color-error); }

/* RP Analytics: rustig blok boven de footer, voor de merkverificatie van Google */
.app { padding: 0 0 var(--space-8); }
.app-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-6); }
.app-in::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: var(--rule-width); background: var(--color-rule); }
.app h2 { font-size: var(--text-xl); }
.app-tekst { display: grid; gap: var(--space-3); }
.app-tekst p { max-width: var(--measure); color: var(--color-muted); }
@media (min-width: 960px) { .app-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); } }

/* footer */
.footer { background: var(--color-paper-2); border-top: var(--rule-width) solid var(--color-rule); padding: var(--space-6) 0; font-size: var(--text-sm); color: var(--color-muted); }
.foot-in { display: grid; gap: var(--space-3); }
.foot-line { max-width: 80ch; }
.foot-line span { margin-right: var(--space-4); }
.footer a { color: var(--color-ink); }
.footer a:hover { color: var(--color-accent-text); }

/* ---------------------------------------------------------------
   Scroll-choreografie. Alles hieronder geldt alleen onder .js,
   die het script zet als reduced motion uit staat. Zonder script of
   met reduced motion staat de pagina af en stil.
   --------------------------------------------------------------- */

/* hero: de versterker blijft iets achter als je wegscrolt */
.js .hero-visual { transform: translateY(calc(var(--x, 0) * 14%)); }

/* koppen woord voor woord */
.js .split-words .wd > span { transform: translateY(115%); transition: transform var(--dur-reveal) var(--ease-snap); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js .split-words.in .wd > span { transform: none; }

/* knelpunten ontvouwen: lijn trekt, kop schuift open, tekst volgt */
.js .problems:not(.in)::before, .js .problem:not(.in)::after { transform: scaleX(0); }
.js .problem h3 { clip-path: inset(-0.3em 100% -0.3em 0); transform: translateX(calc(var(--space-4) * -1)); transition: clip-path 0.75s var(--ease-snap) 0.1s, transform 0.75s var(--ease-snap) 0.1s; }
.js .problem.in h3 { clip-path: inset(-0.3em -0.3em -0.3em 0); transform: none; }
.js .problem p { opacity: 0; transform: translateY(var(--space-2)); transition: opacity 0.6s var(--ease-out) 0.35s, transform 0.6s var(--ease-out) 0.35s, color var(--dur-slow) var(--ease-out); }
.js .problem.in p { opacity: 1; transform: none; }

/* bewijs 3a */
.js .rise-een { opacity: 0; transform: translateY(var(--space-4)); transition: opacity 0.7s var(--ease-out) 0.3s, transform 0.7s var(--ease-snap) 0.3s; }
.js .rise-een.in { opacity: 1; transform: none; }
.js .proof:not(.in) li::before { transform: scaleX(0); }
.js .proof li { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-snap); }
.js .proof.in li { clip-path: inset(-0.2em -0.2em -0.2em 0); }
.js .proof.in li:nth-child(2), .js .proof.in li:nth-child(2)::before { transition-delay: 0.25s; }
.js .proof.in li:nth-child(3), .js .proof.in li:nth-child(3)::before { transition-delay: 0.5s; }

/* bewijs 3b: eerst de bus, dan de lijnen naar elk blok, dan lopen de signalen */
.js .schakel:not(.in) .bus::before { transform: scaleY(0); }
.js .schakel:not(.in) .nodes li::after { transform: scaleX(0); }
.js .schakel .nodes li { opacity: 0; transform: translateX(calc(var(--space-4) * var(--kant, 1))); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-snap); }
.js .schakel .nodes-a li { --kant: -1; }
.js .schakel.in .nodes li { opacity: 1; transform: none; }
.js .schakel.in .nodes-s li:nth-child(1) { transition-delay: 0.1s; } .js .schakel.in .nodes-s li:nth-child(2) { transition-delay: 0.18s; } .js .schakel.in .nodes-s li:nth-child(3) { transition-delay: 0.26s; } .js .schakel.in .nodes-s li:nth-child(4) { transition-delay: 0.34s; }
.js .schakel.in .nodes-a li:nth-child(1) { transition-delay: 0.5s; } .js .schakel.in .nodes-a li:nth-child(2) { transition-delay: 0.58s; } .js .schakel.in .nodes-a li:nth-child(3) { transition-delay: 0.66s; } .js .schakel.in .nodes-a li:nth-child(4) { transition-delay: 0.74s; } .js .schakel.in .nodes-a li:nth-child(5) { transition-delay: 0.82s; }
.js .schakel.in .nodes li::after { transition-delay: 0.7s; }
.js .schakel.loop .puls::before { animation: puls 2.2s linear infinite; animation-delay: calc(1.2s + var(--d, 0s)); }
.js .schakel.loop .nodes-a .puls::before { animation-delay: calc(1.6s + var(--d, 0s)); }
@keyframes puls { 0% { transform: translateX(100%); } 45% { transform: translateX(calc(var(--puls) * -1)); } 100% { transform: translateX(calc(var(--puls) * -1)); } }

/* cases: een oranje lijn trekt over de breedte, daarna gaat de case vanuit die lijn open */
.js .case-wrap { --draw: clamp(0, var(--p, 0) / 0.35, 1); --open: clamp(0, (var(--p, 0) - 0.3) / 0.7, 1); }
.js .case-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--draw)); opacity: calc(1 - var(--open) * 1.5); z-index: 1; pointer-events: none; }
.js .case { clip-path: inset(calc((1 - var(--open)) * 49.6%) 0 calc((1 - var(--open)) * 49.6%) 0 round var(--radius-card)); transform: translateY(calc((1 - var(--open)) * var(--space-6))); }
.js .case h3 { opacity: 0; transform: translateY(var(--space-5)); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-snap); }
.js .case .tag { opacity: 0; transition: opacity 0.5s var(--ease-out) 0.3s; }
.js .case .facts li { opacity: 0; transform: translateX(var(--dx, var(--space-7))); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-snap); }
.js .case .facts li:nth-child(2) { --dx: var(--space-5); }
.js .case .facts li:nth-child(3) { --dx: var(--space-8); }
.js .case-result { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-snap) 0.55s; }
.js .case-wrap.in .case h3, .js .case-wrap.in .facts li { opacity: 1; transform: none; }
.js .case-wrap.in .tag { opacity: 1; }
.js .case-wrap.in .facts li:nth-child(1) { transition-delay: 0.15s; }
.js .case-wrap.in .facts li:nth-child(2) { transition-delay: 0.25s; }
.js .case-wrap.in .facts li:nth-child(3) { transition-delay: 0.35s; }
.js .case-wrap.in .case-result { clip-path: inset(0 -0.2em 0 0); }

/* portret: schuift van onder open, de foto zakt op zijn plek */
.js .portrait-wrap { clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0 round var(--radius-card)); }
.js .portrait-wrap img { transform: translateY(calc((0.5 - var(--q, 0.5)) * 6%)) scale(calc(1.24 - var(--p, 0) * 0.14)); }

/* tekstblokken: kinderen komen na elkaar op */
.js .rise > :not(h2) { opacity: 0; transform: translateY(var(--space-4)); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-snap); }
.js .rise.in > :not(h2) { opacity: 1; transform: none; }
.js .rise.in > :nth-child(2) { transition-delay: 0.2s; }
.js .rise.in > :nth-child(3) { transition-delay: 0.3s; }
.js .rise.in > :nth-child(4) { transition-delay: 0.4s; }
.js .rise.in > :nth-child(5) { transition-delay: 0.5s; }
.js .rise.in > :nth-child(6) { transition-delay: 0.6s; }
.js .contact-in:not(.in)::before { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active { transform: none; }
}