/* Generated by scripts/home-css.cjs
styles.css bffc2989b4e0083f3d0eadf171c2a73182bf9763c54835e29775df0ccbdbf012
home-proof.css f92b9379f60b918c3852ef1d9295b01121e406f1d6dc8d662dd064683e7b6c05
app.js 0cbb2e0d1d7be4183eafdc03476ce0b610e79447ae44bd826d77cf9d1c1ebe68
index.html c1ca318a0438b5953bb16f826c1e128dc54a5e3736624168beb671f72b337d29
en/index.html 7fe245a9388d8175507abc327d2456648953894e1778ed2fcb7958a9fa581680
scripts/home-css.cjs 9882859aad1085a6fb2da0d8f7aaa120fdb3731b0a7753e22cbfaa5dbb7b17a5
*/
/* Tamboer AI, meetsysteem, versie 4 september 2026.
   Warm papier, donkergroene inkt en één groen actieaccent. Lijnen en ritme
   maken de hiërarchie, niet grote zwarte vlakken of decoratieve effecten. */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/barlow-condensed-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/barlow-condensed-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #102a2a;
  --ink-deep: #0a1f1f;
  --graphite: #0f4f46;
  --text: #102a2a;
  --slate: #3e5654;
  --muted: #526966;
  --smoke: #667b77;
  --canvas: #fbfaf5;
  --paper: #fbfaf5;
  --surface: #ffffff;
  --mist: #f3f1e8;
  --tint: #edf3f0;
  --line: #c9c4b4;
  --accent: #14685c;
  --accent-dark: #0f4f46;
  --accent-soft: #e3f0ec;
  --mint: #dcebe6;
  --volt: #f5b84b;
  --warm: #8a4b12;
  --warm-soft: #f4eadf;
  --stop: #9b3320;
  --stop-soft: #f7e8e3;
  --focus: #f5b84b;
  --radius-button: 3px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --shell: 1160px;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Motielaag, 15 september 2026. Eén schaal voor alle beweging, uit de
   transitions-dev skill (_root.css). De variabelen per transitie verwijzen
   naar die schaal. Alleen wat de site gebruikt staat hier. */
:root {
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* Milde veer. Werd al gebruikt in de vergelijkingsrij en de heroschakelaar, maar bestond niet (5 oktober 2026). */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* 02 number pop-in */
  --digit-dur: var(--duration-very-slow);
  --digit-distance: var(--distance-base);
  --digit-stagger: 70ms;
  --digit-blur: var(--blur-small);
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* 04 */
  --text-swap-dur: var(--duration-quick);
  --text-swap-translate-y: var(--distance-micro);
  --text-swap-blur: var(--blur-small);
  --text-swap-ease: var(--ease-in-out);
  /* 05 */
  --dropdown-open-dur: var(--duration-fast);
  --dropdown-close-dur: var(--duration-quick);
  --dropdown-pre-scale: var(--scale-medium);
  --dropdown-closing-scale: var(--scale-tiny);
  --dropdown-ease: var(--ease-smooth-out);
  /* 06 */
  --modal-open-dur: var(--duration-fast);
  --modal-close-dur: var(--duration-quick);
  --modal-scale: var(--scale-large);
  --modal-scale-close: var(--scale-large);
  --modal-ease: var(--ease-smooth-out);
  /* 07 */
  --panel-open-dur: var(--duration-slow);
  --panel-close-dur: var(--duration-medium);
  --panel-translate-y: 24px;
  --panel-blur: var(--blur-small);
  --panel-ease: var(--ease-smooth-out);
  /* 08 page side-by-side */
  --page-slide-dur: var(--duration-fast);
  --page-fade-dur: var(--duration-fast);
  --page-slide-distance: var(--distance-base);
  --page-blur: var(--blur-medium);
  --page-slide-ease: var(--ease-smooth-out);
  --page-fade-ease: var(--ease-smooth-out);
  /* 09 */
  --icon-swap-dur: var(--duration-fast);
  --icon-swap-blur: var(--blur-small);
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: var(--ease-in-out);
  /* 10 */
  --check-opacity-dur: var(--duration-very-slow);
  --check-rotate-dur: var(--duration-very-slow);
  --check-rotate-from: 80deg;
  --check-bob-dur: var(--duration-very-slow);
  --check-y-amount: var(--distance-large);
  --check-blur-dur: var(--duration-very-slow);
  --check-blur-from: var(--blur-large);
  --check-path-dur: var(--duration-very-slow);
  --check-path-delay: var(--duration-micro);
  --check-ease-out: var(--ease-smooth-out);
  --check-ease-opacity: var(--ease-smooth-out);
  --check-ease-rotate: var(--ease-smooth-out);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: var(--ease-smooth-out);
  /* 11 */
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: var(--ease-smooth-out);
  --avatar-ease-out: var(--ease-bounce-strong);
  /* 12 */
  --shake-distance: var(--distance-small);
  --shake-overshoot: var(--distance-micro);
  --shake-dur-a: var(--duration-micro);
  --shake-dur-b: 60ms;
  --shake-ease: var(--ease-smooth-out);
  /* 16 */
  --tabs-dur: var(--duration-fast);
  --tabs-ease: var(--ease-smooth-out);
  /* 18 */
  --stagger-dur: var(--duration-very-slow);
  --stagger-distance: var(--distance-medium);
  --stagger-stagger: var(--duration-stagger);
  --stagger-blur: var(--blur-medium);
  --stagger-ease: var(--ease-smooth-out);
  /* 21 */
  --acc-expand: var(--duration-fast);
  --acc-collapse: var(--duration-fast);
  --acc-chevron: var(--duration-fast);
  --acc-ease: var(--ease-smooth-out);
  /* 24 */
  --learn-shift: 2px;
  --learn-in: var(--duration-medium);
  --learn-out: var(--duration-medium);
  --learn-ease: var(--ease-smooth-out);
  /* 22 */
  --toast-open: var(--duration-medium);
  --toast-close: var(--duration-fast);
  --toast-distance: 16px;
  --toast-blur: var(--blur-small);
  --toast-scale: var(--scale-medium);
  --toast-ease: var(--ease-smooth-out);
  /* 25 */
  --check-box: var(--duration-quick);
  --check-draw: var(--duration-medium);
  --check-delay: 0ms;
  --check-uncheck: var(--duration-quick);
  --check-ease: var(--ease-smooth-out);
  /* 26 */
  --reel-dur: 1400ms;
  --reel-cell: 30px;
  --reel-spin-blur: var(--blur-medium);
  --reel-stagger: 90ms;
  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 27 */
  --toggle-dur: var(--duration-medium);
  --toggle-travel: 18px;
  --toggle-ov1: 1px;
  --toggle-ov2: 0px;
  --toggle-track: var(--duration-fast);
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
  /* 28 */
  --think-hold: 2000ms;
  --think-swap: var(--duration-quick);
  --think-gap: 50ms;
  --think-distance: var(--distance-base);
  --think-blur: var(--blur-small);
  --think-shimmer: 2000ms;
  --think-base: var(--slate);
  --think-highlight: var(--ink);
  --think-ease: var(--ease-in-out);
  /* 30 */
  --stream-gap: 60ms;
  --stream-fade: var(--duration-medium);
  --stream-blur: 1px;
  --stream-ease: var(--ease-smooth-out);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
button, input, select, textarea { font: inherit; }
h1, h2 { color: var(--ink); font-family: var(--font-display); font-weight: 600; hyphens: none; letter-spacing: -.025em; margin: 0; overflow-wrap: normal; text-transform: none; text-wrap: balance; }
h1 { font-size: clamp(3rem, 4.6vw, 3.5rem); line-height: 1; max-width: 18ch; }
h2 { font-size: clamp(2.15rem, 4.2vw, 3.35rem); line-height: 1.05; }
h3 { color: var(--ink); font-weight: 650; font-size: 1.16rem; letter-spacing: -.015em; line-height: 1.3; margin: 0; text-wrap: balance; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

.shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 200; background: var(--volt); color: var(--ink); padding: 12px 18px; border-radius: var(--radius-button); font-weight: 600; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
[data-submission-confirmation] { visibility: hidden; }

/* Navigatie: zwevende witte pil in een hoge balk, zwarte knop rechts. */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(229, 229, 229, .94); backdrop-filter: blur(10px); }
.header-inner { min-height: 104px; display: flex; align-items: center; gap: 20px; }
.brand { color: var(--ink); font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.brand span { background: var(--mint); border-radius: 6px; padding: 1px 6px; }
.desktop-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; background: var(--surface); border-radius: 48px; padding: 6px; }
.desktop-nav a { color: var(--slate); font-size: .95rem; font-weight: 500; text-decoration: none; padding: 10px 15px; border-radius: 48px; white-space: nowrap; }
.desktop-nav a:hover { color: var(--ink); background: var(--mist); }
.desktop-nav a[aria-current="page"] { color: var(--ink); background: var(--mint); }
.mobile-menu { display: none; margin-left: auto; position: relative; }
.mobile-menu summary { color: var(--ink); cursor: pointer; font-weight: 500; list-style: none; padding: 12px 18px; background: var(--surface); border-radius: 48px; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; right: 0; top: 58px; width: 260px; background: var(--surface); border-radius: var(--radius); padding: 10px; }
.mobile-menu nav a { display: block; color: var(--ink); padding: 12px 14px; text-decoration: none; border-radius: 12px; }
.mobile-menu nav a:hover { background: var(--mist); }

/* Knoppen: gevuld zwart als enige primaire actie, ghost als tweede, tekstlink als derde. */
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; background: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius-button); color: #fff; font-weight: 500; padding: 14px 26px; text-decoration: none; transition: background var(--duration-quick) ease, color var(--duration-quick) ease; }
.button:hover { background: var(--graphite); border-color: var(--graphite); }
.button-small { min-height: 46px; padding: 9px 20px; font-size: .95rem; }
.button-light:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.button-secondary { background: transparent; border: 1.5px solid var(--slate); border-radius: 4px; color: var(--slate); }
.button-secondary:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.text-link { color: var(--ink); font-weight: 500; text-decoration: none; border-radius: 4px; padding: 2px 4px; margin-left: -4px; }
.text-link:hover { background: var(--mint); }
.text-link:hover span { transform: translateX(calc(var(--learn-shift) * 1.5)); transition-duration: var(--learn-in); }

.eyebrow, .mini-label { display: inline-flex; align-items: center; background: var(--mint); border-radius: 64px; color: var(--ink); font-family: var(--font-mono); font-size: .74rem; font-weight: 400; letter-spacing: -.01em; margin: 0 0 22px; padding: 8px 16px; text-transform: uppercase; }

/* Hero */
.hero { padding: 64px 0 80px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-items: end; gap: 56px; }
.hero-grid > *, .split-heading > *, .method-grid > *, .evidence-grid > *, .content-grid > *, .qualification-layout > * { min-width: 0; }
.lede { color: var(--slate); font-size: clamp(1.1rem, 1.9vw, 1.3rem); line-height: 1.4; margin-top: 30px; max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trust-row li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: 0 0 8px; }
.process-preview::after { content: none; }
.process-preview li:first-child { border-top: 0; }
.process-preview .preview-foot .text-link:hover { background: var(--mint); color: var(--ink); }
.offer-panel p:not(.eyebrow) { color: var(--slate); margin-top: 20px; max-width: 60ch; }

section:not(.hero):not(.proof-band) { padding: 80px 0; }
.compare-table th[scope="row"] { color: var(--ink); font-family: var(--font-mono); font-size: .72rem; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.ladder article.inverted .text-link:hover { color: var(--ink); }

.tint-section { background: transparent; }
.timeline li:first-child { padding-top: 22px; }
.timeline li:last-child { border-bottom: 0; }
blockquote { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 3.1rem); letter-spacing: -.02em; line-height: .95; margin: 0; text-transform: uppercase; }
.evidence-grid > div:last-child > p { color: var(--slate); }

/* Persoon: wie je aan de lijn krijgt. */
.person { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; background: var(--surface); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 40px); }
.person figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.person figure img { width: 100%; height: 100%; object-fit: cover; }
.person h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); margin-bottom: 18px; }
.person p { color: var(--slate); }

/* Donkere CTA als top-arc kaart: koepel die doorloopt in de zwarte voet. */
.dark-section { background: transparent; color: #c6c6c6; padding-bottom: 0 !important; }
.dark-section h2 { color: #fff; }
.dark-section .eyebrow { background: var(--mint); color: var(--ink); }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 50px; background: var(--ink); border-radius: 64px 64px 0 0; padding: clamp(56px, 7vw, 88px) clamp(28px, 6vw, 80px); }
.cta-panel .button { flex-shrink: 0; }
.cta-panel .button-secondary { border-color: #979797; color: #fff; }
.cta-panel .button-secondary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.cta-panel p:not(.eyebrow) { color: #979797; margin-top: 16px; max-width: 56ch; }
.content h2:first-child { margin-top: 0; }
.steps-list li::before { content: counter(steps, decimal-leading-zero); color: var(--ink); font-family: var(--font-mono); font-size: .85rem; letter-spacing: -.01em; padding-top: 4px; }
.tool-actions button[disabled] { cursor: not-allowed; opacity: .5; }
.tool-output[hidden] { display: none; }
.tool-step[hidden], .result-panel[hidden] { display: none; }
.choice-card:hover, .choice-card:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.field-error { color: var(--stop); display: block; font-size: .86rem; margin-top: 7px; }
.error-summary[tabindex="-1"], .tool-output[tabindex="-1"] { scroll-margin-top: 112px; }
.error-summary[hidden] { display: none; }
.tablist [role="tab"] { background: var(--canvas); border: 2px solid transparent; border-radius: 999px; color: var(--ink); cursor: pointer; min-height: 44px; padding: 9px 16px; }
.tablist [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
[role="tabpanel"][hidden] { display: none; }
.faq-grid details > p, .faq-grid details .t-acc-panel-inner > p { border-top: 1px solid var(--line); margin: 0; padding: 18px 0 24px; }
.tool-card-featured p:not(.mini-label) { color: #c6c6c6; }
.process-strip span:first-child { border-radius: 14px 0 0 14px; }
.process-strip span:last-child { border-radius: 0 14px 14px 0; }
.demo-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.demo-case[hidden] { display: none; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.radio-option:hover { border-color: var(--ink); }
.qualification-form[aria-busy="true"] { opacity: .86; }
.qualification-form button[disabled] { cursor: wait; opacity: .7; }

/* Zwarte voet met cadansmotief: maatstrepen op de tel, elke vierde streep in mint. */
.site-footer { background: var(--ink); color: #979797; padding: 0 0 24px; }
.site-footer::before { content: ""; display: block; height: 22px; margin-bottom: 56px; background-image: repeating-linear-gradient(90deg, var(--mint) 0 2px, transparent 2px 48px), repeating-linear-gradient(90deg, #444444 0 2px, transparent 2px 12px); background-position: left bottom, left bottom; background-size: 100% 22px, 100% 12px; background-repeat: no-repeat, no-repeat; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 60px; }
.footer-intro { margin-bottom: 36px; }
.footer-intro p { max-width: 60ch; margin-top: 12px; }
.footer-grid-four { grid-template-columns: repeat(4, 1fr); gap: 36px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-grid p { max-width: 34ch; margin-top: 10px; }
.footer-grid strong { color: #fff; font-family: var(--font-mono); font-size: .74rem; font-weight: 400; letter-spacing: -.01em; margin-bottom: 6px; text-transform: uppercase; }
.footer-grid a:not(.brand) { color: #c6c6c6; }
.footer-brand { color: #fff; }
.footer-brand span { background: var(--mint); color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; border-top: 1px solid #2f2f2f; font-size: .84rem; margin-top: 50px; padding-top: 20px; }
.footer-bottom a:not(.voltage) { color: #c6c6c6; }
.footer-bottom a:not(.voltage):hover { color: #fff; }
.voltage { background: var(--volt); border-radius: 4px; color: var(--ink); font-weight: 500; padding: 3px 8px; text-decoration: none; }
.voltage:hover { background: #fff; }
.site-footer .voltage { color: var(--ink); }
.footer-link { background: none; border: 0; color: #c6c6c6; cursor: pointer; padding: 0; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.footer-link:hover { color: #fff; }

.consent-banner { position: fixed; inset: auto 18px 18px; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; width: min(calc(100% - 36px), 880px); margin-inline: auto; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: 24px; }
.consent-title { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: .94; margin: 0; text-transform: uppercase; }
.consent-banner p:not(.eyebrow) { color: var(--slate); margin-top: 10px; max-width: 62ch; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-actions .button { min-height: 48px; padding: 10px 18px; }

/* E-mailkeuze: webmail, lokale mailapp of het adres kopieren zonder een dood mailto-eindpunt. */
.email-chooser { width: min(calc(100% - 32px), 620px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 24px 80px #102a2a38; overflow: auto; }
.email-chooser::backdrop { background: #102a2ab8; backdrop-filter: blur(3px); }
.email-chooser-panel { position: relative; padding: clamp(28px, 5vw, 44px); }
.email-chooser-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 1.8rem; line-height: 1; }
.email-chooser-close:hover { background: var(--mist); }
.email-chooser h2 { padding-right: 40px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.email-chooser-intro { max-width: 46ch; margin: 18px 0 26px; }
.email-chooser-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.email-chooser-options .button { width: 100%; min-width: 0; padding-inline: 18px; text-align: center; }
.email-chooser-address { margin: 22px 0 0; color: var(--slate); font-size: .9rem; overflow-wrap: anywhere; }
.email-chooser-address strong { color: var(--ink); }
@media (max-width: 560px) {
  .email-chooser-options { grid-template-columns: 1fr; }
  .email-chooser-panel { padding: 28px 20px 24px; }}
.cta-panel-foto { align-self: flex-end; flex-shrink: 0; width: clamp(170px, 20vw, 250px); height: auto; margin-bottom: calc(-1 * clamp(56px, 7vw, 88px)); }

@media (max-width: 1140px) {
  .desktop-nav a { padding: 10px 11px; font-size: .9rem; }
  .header-inner > .button { white-space: nowrap; }}

@media (max-width: 980px) {
  .desktop-nav, .header-inner > .button { display: none; }
  .mobile-menu { display: block; }
  .header-inner { min-height: 84px; }
  .hero-grid, .split-heading, .method-grid, .evidence-grid, .content-grid, .qualification-layout, .audience-grid, .compare-grid, .demo-grid, .offer-panel, .person, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .portret-card, .person figure { max-width: 440px; }
  .footer-grid-four { grid-template-columns: repeat(2, 1fr); }
  .cta-panel { align-items: flex-start; flex-direction: column; }}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .shell { width: min(calc(100% - 32px), var(--shell)); }
  .header-inner { min-height: 72px; }
  .hero { padding: 40px 0 56px; }
  h1 { font-size: clamp(2.8rem, 13.5vw, 3.4rem); }
  h2 { font-size: clamp(2rem, 9vw, 2.4rem); }
  section:not(.hero):not(.proof-band) { padding: 56px 0; }
  .card-grid.four, .card-grid.three.promises, .principle-grid, .footer-grid, .tool-directory, .tool-field-grid, .control-rail { grid-template-columns: 1fr; }
  .process-strip span:first-child { border-radius: 14px 14px 0 0; }
  .process-strip span:last-child { border-radius: 0 0 14px 14px; }
  .cta-panel { align-items: flex-start; flex-direction: column; border-radius: 40px 40px 0 0; }
  .offer-panel, .meting, .person { border-radius: var(--radius-lg); }
  .site-footer::before { margin-bottom: 44px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .consent-banner { grid-template-columns: 1fr; gap: 14px; inset: auto 12px 12px; max-height: 40vh; overflow: auto; width: calc(100% - 24px); padding: 18px; }
  .consent-actions .button { flex: 1; }
  .compare-table th[scope="row"], .compare-table td { display: block; min-width: 0; padding: 12px 16px; white-space: normal; }
  .compare-table th[scope="row"] { background: var(--ink); color: #fff; }
  .compare-table td::before { color: var(--muted); display: block; font-family: var(--font-mono); font-size: .7rem; margin-bottom: 4px; text-transform: uppercase; }
  .compare-table td:nth-of-type(1)::before { content: "Procesdiagnose"; }
  .compare-table td:nth-of-type(2)::before { content: "AI Workflow Audit"; }
  .compare-table td:nth-of-type(3)::before { content: "Implementatie en training"; }}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }}

/* Visuele systeemlaag v4. De HTML en conversieroute blijven ongewijzigd. */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.header-inner { min-height: 82px; }
.brand { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.72rem; letter-spacing: -.01em; }
.brand span { background: var(--mint); border-radius: 2px; padding: 1px 5px; }
.desktop-nav { gap: 24px; background: transparent; border-radius: 0; padding: 0; }
.desktop-nav a { border-bottom: 2px solid transparent; border-radius: 0; font-size: .91rem; font-weight: 550; padding: 12px 0 10px; }
.desktop-nav a:hover { background: transparent; border-color: var(--line); color: var(--accent-dark); }
.desktop-nav a[aria-current="page"] { background: transparent; border-color: var(--accent); color: var(--accent-dark); }
.mobile-menu summary { min-height: 46px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-button); font-weight: 650; padding: 10px 16px; }
.mobile-menu nav { top: 56px; width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 88px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.mobile-menu nav a { min-height: 46px; border-left: 3px solid transparent; border-radius: 2px; padding: 11px 14px; }
.mobile-menu nav a:hover { background: var(--mist); border-left-color: var(--line); }
.mobile-menu nav a[aria-current="page"] { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent-dark); }
.mobile-menu nav a.button { color: #fff; justify-content: center; margin-top: 12px; }
.mobile-menu nav a.button:hover { background: var(--accent-dark); border-left-color: var(--accent-dark); color: #fff; }

.button { min-height: 52px; background: var(--accent); border-color: var(--accent); border-radius: var(--radius-button); cursor: pointer; font-weight: 650; padding: 13px 24px; touch-action: manipulation; transition: background-color var(--duration-quick) ease, border-color var(--duration-quick) ease, color var(--duration-quick) ease; }
.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.button:active { background: var(--ink-deep); border-color: var(--ink-deep); }
.button-light:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.button-secondary { background: transparent; border-color: var(--slate); color: var(--slate); }
.button-secondary:hover { background: var(--surface); border-color: var(--accent-dark); color: var(--accent-dark); }
.text-link { color: var(--accent-dark); font-weight: 650; text-decoration: underline; text-decoration-color: var(--line); }
.text-link:hover { background: var(--mint); text-decoration-color: var(--accent); }

.eyebrow, .mini-label { gap: 10px; background: transparent; border-radius: 0; color: var(--accent-dark); font-size: .73rem; font-weight: 650; letter-spacing: .055em; margin-bottom: 20px; padding: 0; }
/* Zie de toelichting bij .price-step: WebKit telt een flex-basis op een pseudo-element niet mee in
   de intrinsieke breedte, dus het streepje krijgt zijn maat via width. */
.eyebrow::before, .mini-label::before { background: var(--accent); content: ""; flex: 0 0 auto; height: 2px; width: 24px; }

.hero { padding: clamp(56px, 7vw, 80px) 0 80px; }
.hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: clamp(48px, 7vw, 88px); }
.lede { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.34rem); line-height: 1.5; margin-top: 28px; }
.trust-row li::before { width: 8px; height: 8px; flex-basis: 8px; background: var(--accent); border-radius: 0; }

section:not(.hero):not(.proof-band) { padding: 72px 0; }
.metric-grid > div, .card, .tool-card, .qualification-form, .tool-form, .demo-board, .person, .faq-grid details, .side-card { border: 1px solid var(--line); }
.card:hover { border-color: var(--accent); }
.ladder article:nth-child(2) { border-top-color: var(--accent); }
.person { border-radius: var(--radius-xl); }
.person figure, .portret-card { border-radius: var(--radius-lg); }

.dark-section { color: var(--slate); }
.dark-section .eyebrow { background: transparent; }
.cta-panel { background: var(--ink); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.cta-panel h2 { color: #fff; }
.cta-panel p:not(.eyebrow) { color: #d0ddda; }
.cta-panel .eyebrow { color: #a8d0c5; }
.cta-panel .eyebrow::before { background: #a8d0c5; }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tablist [role="tab"], .demo-switch button { border-radius: var(--radius-button); }
.tablist [role="tab"][aria-selected="true"], .demo-switch button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }

.site-footer { background: var(--ink); color: #aabbb7; }
.footer-grid a:not(.brand), .footer-bottom a:not(.voltage), .footer-link { color: #d0ddda; }
.site-footer::before { background-image: repeating-linear-gradient(90deg, #7fb8aa 0 2px, transparent 2px 48px), repeating-linear-gradient(90deg, #46625f 0 2px, transparent 2px 12px); }
.voltage { background: var(--focus); border-radius: 2px; }
.consent-banner { border-color: var(--ink); border-radius: var(--radius-lg); }

@media (max-width: 980px) {
  .header-inner { min-height: 76px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .cta-panel { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }}

@media (max-width: 700px) {
  .shell { width: min(calc(100% - 40px), var(--shell)); }
  .header-inner { min-height: 68px; }
  .brand { font-size: 1.6rem; }
  .hero { padding: 32px 0 48px; }
  h1 { font-size: clamp(2.25rem, 11.5vw, 2.85rem); hyphens: none; line-height: 1.02; max-width: 100%; overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.9rem, 8vw, 2.35rem); hyphens: none; line-height: 1.08; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  section:not(.hero):not(.proof-band) { padding: 44px 0; }
  .cta-panel { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .consent-banner { background: var(--surface); }}

@media (max-width: 390px) {
  .shell { width: min(calc(100% - 32px), var(--shell)); }
  h1 { font-size: 1.9rem; }
  .eyebrow, .mini-label { font-size: .68rem; }}

/* ============================================================
   Laag v5, 4 september 2026: redactioneel op warm papier.
   De Controlekamer-animatie die deze laag introduceerde staat sinds
   laag v6 niet meer op de home; haar CSS is op 15 september 2026
   verwijderd. Wat bleef zijn de gecontroleerde breuk in de
   demonstratie op /resultaat en de bewijsclimax; de rest blijft kalm.
   Motion: uitsluitend transform, opacity, kleur en clip-path;
   easing var(--ease-smooth-out) uit de motielaag; geen loops.
   ============================================================ */
:root { --ease: var(--ease-smooth-out); --shell: 1200px; }
[hidden] { display: none !important; }

/* Typografie: monumentale serif, rustige sans, mono voor meting en status. */
h1 { font-size: min(clamp(3.8rem, 7.2vw, 7.4rem), calc(min(100vw - 64px, 1200px) / 11.6)); letter-spacing: -.038em; line-height: .94; max-width: none; }
.hero h1 { max-width: 24ch; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); letter-spacing: -.032em; line-height: 1; }
.person h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.lede { font-size: clamp(1.18rem, 1.9vw, 1.42rem); line-height: 1.42; max-width: 56ch; }
.eyebrow, .mini-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
section:not(.hero):not(.proof-band) { padding: clamp(64px, 7.8vw, 112px) 0; }
.cta-panel { padding: clamp(48px, 5vw, 64px) clamp(28px, 6vw, 80px); }
.button, .button-secondary, .button-light { border-radius: var(--radius-sm); font-weight: 650; letter-spacing: .005em; }
.button:active { transform: translateY(1px); }
.button-secondary { border-color: var(--ink); color: var(--ink); }
.button-secondary:hover { background: var(--surface); border-color: var(--accent-dark); color: var(--accent-dark); }
.ladder article, .person, .offer-panel, .meting, .timeline, .guarantee, .portret-card, .person figure { border-radius: var(--radius); }
.cta-panel { border-radius: var(--radius) var(--radius) 0 0; }
.tablist [role="tab"] { border-radius: var(--radius-sm); }
.tablist [role="tab"][aria-selected="true"] { color: #fff; }
.ladder-price, .metric-grid strong, .offer-panel-action strong, blockquote, .consent-title, .meting-waarden strong { text-transform: none; }
.consent-title { letter-spacing: -.025em; }

/* Hero: kop over de volle breedte, propositie links, het werkvoorbeeld rechts en deels achter de kop. */
.hero { overflow: visible; padding: clamp(32px, 4vw, 48px) 0 clamp(48px, 5vw, 64px); }
.hero-grid { align-items: start; column-gap: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); grid-template-rows: auto auto auto auto 1fr; row-gap: 0; }
.hero-actions { gap: 12px; margin-top: 30px; }
.trust-row li::before { border-radius: 0; height: 8px; width: 8px; }
.breuk-st::before { background: var(--accent); border: 2px solid var(--ink); content: ""; height: 10px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: background-color .3s var(--ease), border-color .3s var(--ease); width: 10px; }
.breuk-st-owner::before, .breuk-st-ownerlog::before { background: transparent; border-color: var(--line); }
.breuk-st-owner::after { border-left: 2px dashed var(--accent); content: ""; height: 26px; left: 4px; position: absolute; top: -30px; transform: scaleY(0); transform-origin: top; transition: transform .24s var(--ease); }
.demo-board[data-demo-route="exception"] .breuk-seg-break { transform: scaleX(.46); background: var(--stop); }
.demo-board[data-demo-route="exception"] .breuk-stop { opacity: 1; transform: translateX(0) scale(1); transition-delay: .3s; }
.demo-board[data-demo-route="exception"] .breuk-st-after { color: var(--smoke); }
.demo-board[data-demo-route="exception"] .breuk-st-after::before { background: transparent; border-color: var(--line); }
.demo-board[data-demo-route="exception"] .breuk-seg-after { background: var(--line); }
.demo-board[data-demo-route="exception"] .breuk-dossier { transform: translate(52px, 54px); }
.demo-board[data-demo-route="exception"] .breuk-st-owner::after { transform: scaleY(1); transition-delay: .2s; }
.demo-board[data-demo-route="exception"] .breuk-st-owner, .demo-board[data-demo-route="exception"] .breuk-st-ownerlog { color: var(--ink); }
.demo-board[data-demo-route="exception"] .breuk-st-owner::before { background: var(--stop); border-color: var(--ink); transition-delay: .3s; }
.demo-board[data-demo-route="exception"] .breuk-seg-owner { transform: scaleX(1); transition-delay: .36s; }
.demo-board[data-demo-route="exception"] .breuk-st-ownerlog::before { background: var(--accent); border-color: var(--ink); transition-delay: .7s; }
.meet-claim strong:first-child { color: var(--ink); font-family: var(--font-display); font-size: clamp(4.4rem, 13.4vw, 13.2rem); font-variant-numeric: lining-nums tabular-nums; font-weight: 600; grid-column: 1 / -1; letter-spacing: -.05em; line-height: .8; margin-left: -.04em; text-transform: none; }
.meet-claim strong:last-child { color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 5.2vw, 4.8rem); font-weight: 600; grid-column: 2; letter-spacing: -.035em; line-height: .95; text-transform: none; }
.meet-lat.is-armed .meet-fill { transform: scaleX(1); transition: none; }
.meet-lat.is-armed.is-in .meet-fill { transform: scaleX(.0667); transition: transform .56s var(--ease); }
.meet-lat.is-armed .meet-marker { opacity: 0; transform: translateY(-10px); transition: none; }
.meet-lat.is-armed.is-in .meet-marker { opacity: 1; transform: translateY(0); transition: opacity .18s var(--ease) .5s, transform .28s var(--ease) .5s; }
.meet-section @media (min-width: 981px) {
  .person { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .person { grid-template-columns: 1fr; }}
.control-rail::before { background: var(--accent); content: ""; height: 2px; left: 0; position: absolute; right: 0; top: 8px; }
.control-rail .card::before { background: var(--accent); border: 2px solid var(--ink); content: ""; height: 14px; left: 0; position: absolute; top: -34px; width: 14px; }
.control-rail .card:hover { border-color: transparent; }
.instrument-summary dt::before { border: 2px solid var(--ink); content: ""; height: 10px; left: 0; position: absolute; top: 2px; width: 10px; }
.instrument-summary > div[data-bron="geteld"] dt::before { background: var(--accent); }
.instrument-summary > div[data-bron="geschat"] dt::before { background: var(--focus); }
.instrument-summary > div[data-bron="factureerbaar"] dt::before, .instrument-summary > div[data-bron="extern"] dt::before { background: var(--accent); }
[data-baseline-builder] .field:has(> input + label + select) { grid-template-columns: minmax(0, 1fr) minmax(120px, 150px); }
[data-baseline-builder] .field:has(> input + label + select) > label:first-of-type { grid-column: 1 / -1 !important; }
[data-baseline-builder] .field:has(> input + label + select) > label:nth-of-type(2) { grid-row: 2 !important; }
[data-baseline-builder] .field:has(> input + label + select) > input, [data-baseline-builder] .field:has(> input + label + select) > select { grid-row: 3 !important; }
.measure, [data-baseline-builder] .field:has(> input + label + select) { align-items: end; display: grid; gap: 6px 14px; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px); }
.measure > label:first-of-type, [data-baseline-builder] .field:has(> input + label + select) > label:first-of-type { grid-column: 1; grid-row: 1; margin: 0; }
.measure > input, [data-baseline-builder] .field:has(> input + label + select) > input { grid-column: 1; grid-row: 2; }
.measure > label:nth-of-type(2), [data-baseline-builder] .field:has(> input + label + select) > label:nth-of-type(2) { color: var(--slate); font-family: var(--font-mono); font-size: .68rem; font-weight: 400; grid-column: 2; grid-row: 1; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.measure > select, [data-baseline-builder] .field:has(> input + label + select) > select { grid-column: 2; grid-row: 2; }
.measure > .field-error { grid-column: 1 / -1; grid-row: 3; }
.refinement summary::marker { color: var(--accent); }
.verdict::before { background: currentColor; border: 2px solid currentColor; content: ""; display: inline-block; height: 10px; margin-right: 8px; vertical-align: -1px; width: 10px; }
.verdict[data-band="uncertain"] { background: var(--mist); color: var(--ink); }
.verdict[data-band="uncertain"]::before { background: linear-gradient(135deg, var(--focus) 50%, transparent 50%); border-color: var(--ink); }
.verdict[data-band="negative"] { background: var(--stop-soft); color: var(--stop); }
.verdict[data-band="negative"]::before { background: linear-gradient(45deg, transparent 38%, currentColor 38% 62%, transparent 62%), linear-gradient(-45deg, transparent 38%, currentColor 38% 62%, transparent 62%); }
.choice-card:hover { border-color: var(--ink); }
.choice-card:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.tool-score::before { border: 2px solid var(--ink); content: ""; display: inline-block; height: .34em; margin-right: .22em; vertical-align: .08em; width: .34em; background: var(--accent); }
.result-panel[data-result="twijfel"] { border-top-color: var(--focus); }
.result-panel[data-result="twijfel"] .tool-score::before { background: linear-gradient(135deg, var(--focus) 50%, transparent 50%); }
.result-panel[data-result="no_go"] { border-top-color: var(--stop); }
.result-panel[data-result="no_go"] .tool-score::before { background: linear-gradient(45deg, transparent 38%, var(--stop) 38% 62%, transparent 62%), linear-gradient(-45deg, transparent 38%, var(--stop) 38% 62%, transparent 62%); }
.status-list strong::before { border: 2px solid currentColor; content: ""; display: inline-block; height: 10px; margin-right: 8px; vertical-align: -1px; width: 10px; }
.status-a::before { background: currentColor; }
.status-b::before { background: linear-gradient(135deg, var(--focus) 50%, transparent 50%); border-color: var(--ink); }
.status-c::before { background: linear-gradient(45deg, transparent 38%, currentColor 38% 62%, transparent 62%), linear-gradient(-45deg, transparent 38%, currentColor 38% 62%, transparent 62%); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
html.no-reveal .reveal { opacity: 1; transform: none; transition: none; }

@media (max-width: 1140px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); }}

@media (max-width: 980px) {
  .hero { padding-bottom: 56px; }
  .hero-grid { grid-template-columns: 1fr; }
  .control-rail::before { bottom: 0; height: auto; left: 6px; right: auto; top: 0; width: 2px; }
  .control-rail .card::before { left: 0; top: 4px; }
  .control-rail .card:last-child { padding-bottom: 0; }}

@media (max-width: 700px) {
  h1 { font-size: min(7.7vw, 1.88rem); letter-spacing: -.03em; line-height: 1; }
  .hero h1 { max-width: 100%; }
  h2 { font-size: clamp(1.9rem, 8.2vw, 2.4rem); letter-spacing: -.028em; line-height: 1.04; }
  .lede { font-size: 1.12rem; line-height: 1.45; margin-top: 22px; }
  .hero { padding: 28px 0 44px; }
  .hero-actions, .trust-row { margin-top: 24px; }
  section:not(.hero):not(.proof-band) { padding: 56px 0; }
  .breuk-st-owner::after { display: none; }
  .demo-board[data-demo-route="exception"] .breuk-seg-break { transform: scaleY(.42); }
  .demo-board[data-demo-route="exception"] .breuk-stop { transform: translateY(-50%) scale(1); }
  .demo-board[data-demo-route="exception"] .breuk-dossier { transform: translate(-4px, 36px); }
  .meet-claim strong:first-child { font-size: clamp(2.6rem, 12.2vw, 4.4rem); overflow-wrap: anywhere; }
  .measure, [data-baseline-builder] .field:has(> input + label + select) { grid-template-columns: 1fr; }
  .measure > label:nth-of-type(2), [data-baseline-builder] .field:has(> input + label + select) > label:nth-of-type(2) { grid-column: 1; grid-row: 3; margin-top: 6px; }
  .measure > select, [data-baseline-builder] .field:has(> input + label + select) > select { grid-column: 1; grid-row: 4; }
  [data-baseline-builder] .field:has(> input + label + select) > input { grid-row: 2 !important; }
  [data-baseline-builder] .field:has(> input + label + select) > label:nth-of-type(2) { grid-column: 1; grid-row: 3 !important; }
  [data-baseline-builder] .field:has(> input + label + select) > select { grid-row: 4 !important; }
  .measure > .field-error { grid-row: 5; }}

/* Klikdoelen van minimaal 44px op elke breedte, zonder layoutverschuiving: het raakvlak groeit via negatieve marges. */
.text-link, .footer-grid a:not(.brand), .footer-bottom a, .footer-link, .brand, main p a:not(.button), main li a:not(.button), main dd a, main td a { margin-block: -13px; padding-block: 13px; }
.footer-grid a:not(.brand), .footer-bottom a, .footer-link, .breadcrumbs a { display: inline-block; }
.desktop-nav a { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {

  .breuk *, .breuk *::before, .breuk *::after, .meet-fill, .meet-marker, .tool-progress-track span, .reveal { transition: none !important; }
  .meet-lat.is-armed .meet-fill { transform: scaleX(.0667); }
  .meet-lat.is-armed .meet-marker { opacity: 1; transform: none; }}

/* ============================================================
   Laag v6, 4 september 2026: rust en conversie.
   Minder secties, prijzen direct onder de hero, het gratis aanbod
   als product in beeld. Zelfde papier, inkt en accent als v4 en v5.
   ============================================================ */
h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); letter-spacing: -.028em; line-height: 1.08; }
section:not(.hero):not(.proof-band) { padding: clamp(56px, 6.5vw, 96px) 0; }
.section-head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 64ch; }
.card:hover { border-color: var(--line); }
.tint-section { background: var(--mist); }
.tint-section + .tint-section { border-top: 1px solid var(--line); }

/* Hero v6: propositie links, het gratis aanbod als kaart rechts. */
.hero { padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.check-list li::before { border-bottom: 2.5px solid var(--accent); border-left: 2.5px solid var(--accent); content: ""; height: 7px; left: 1px; position: absolute; top: .5em; transform: rotate(-45deg); width: 13px; }
.price-card.is-start { background-image: linear-gradient(var(--accent), var(--accent)); background-position: 0 0; background-repeat: no-repeat; background-size: 100% 4px; border-color: var(--accent); }
.pricing-foot { color: var(--slate); font-size: .94rem; margin-top: 24px; max-width: 72ch; }
.steps-row li::before { background: var(--accent); content: ""; height: 2px; left: 0; position: absolute; top: -2px; width: 40px; }
.process-list a::after { color: var(--accent-dark); content: "\2192"; font-weight: 650; transition: transform var(--learn-out) var(--learn-ease); }
.process-list a:hover::after { transform: translateX(calc(var(--learn-shift) * 2)); transition-duration: var(--learn-in); }
.process-list a:hover strong { color: var(--accent-dark); }
.minus-list li::before { background: var(--smoke); content: ""; height: 2.5px; left: 0; position: absolute; top: .72em; width: 14px; }

/* Persoon en bewijs, compacter. */
@media (min-width: 981px) {
  .person { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }}
@media (max-width: 980px) {
  .person { grid-template-columns: 1fr; }}
.person h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.cta-panel h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
@media (max-width: 700px) {
  .process-list a::after { display: none; }}

/* v6 nabewerking: rustiger koppen, labels op één regel. */
.eyebrow, .mini-label { display: flex; max-width: 100%; width: max-content; }
@media (max-width: 700px) {
  section:not(.hero):not(.proof-band) { padding: 48px 0; }
  .person figure { max-height: 300px; }
  .person figure img { object-position: 50% 20%; }
  .cta-panel-foto { display: none; }}
@media (min-width: 701px) {
  .hero .eyebrow, .page-hero .eyebrow, .section-head .eyebrow, .split-heading .eyebrow, .person .eyebrow, .cta-panel .eyebrow { white-space: nowrap; }}
.gain-list li::before { background: var(--accent); border-radius: 50%; content: ""; height: 9px; left: 0; position: absolute; top: .55em; width: 9px; }

.specialist { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 14px; margin: 0 0 18px; padding-bottom: 18px; }
.specialist img { border-radius: 999px; flex: 0 0 60px; height: 60px; object-fit: cover; width: 60px; }
.specialist p { margin: 0; min-width: 0; }
.specialist strong { color: var(--ink); display: block; font-size: .98rem; font-weight: 650; line-height: 1.3; }
.specialist span { color: var(--slate); display: block; font-size: .86rem; line-height: 1.45; margin-top: 2px; }
.traject li::before { color: var(--accent-dark); content: counter(traject, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; font-weight: 650; left: 0; letter-spacing: .04em; position: absolute; top: .3em; }
.cta-panel .supporting a:hover { color: #fff; }

.scenario-table td:first-child { color: var(--ink); font-weight: 500; }
@media (max-width: 700px) {
  .specialist img { flex-basis: 52px; height: 52px; width: 52px; }}
@media (max-width: 980px) {
  .price-card.has-toggle:not(.is-open) > .price-more { display: none; }
  .price-card.has-toggle:not(.is-open) > .t-acc-panel { grid-template-rows: 0fr; transition-duration: var(--acc-collapse); }
  .price-card.has-toggle:not(.is-open) > .t-acc-panel > .t-acc-panel-inner { opacity: 0; filter: blur(var(--blur-small)); transition-duration: var(--acc-collapse); }
  .price-card.has-toggle .price-toggle { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-button); color: var(--accent-dark); cursor: pointer; display: flex; font-size: .9rem; font-weight: 650; justify-content: space-between; margin-top: 18px; min-height: 48px; padding: 10px 14px; text-align: left; width: 100%; }
  .price-card.has-toggle .price-toggle::after { content: "+"; font-family: var(--font-mono); font-size: 1.1rem; }
  .price-card.has-toggle.is-open .price-toggle::after { content: "\2212"; }
  .price-card.has-toggle .price-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }}
@media (max-width: 700px) {
  section:not(.hero):not(.proof-band) { padding: 40px 0; }
  .person figure { max-height: 260px; }
  .cta-panel { padding: 44px 24px 48px; }
  .section-head { margin-bottom: 24px; }}
@media (max-width: 700px) {
  .hero { padding: 32px 0 44px; }
  .pricing-foot { margin-top: 16px; }}

/* Taalschakelaar (5 september 2026). Eén compacte NL | EN in de header; onder 700 pixels staat
   dezelfde wissel als gewone regel in het mobiele menu. Geen vlaggen, geen extra animatie. */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-left: 4px; font-size: .82rem; font-weight: 650; letter-spacing: .06em; }
.lang-switch a { color: var(--slate); display: inline-flex; align-items: center; min-height: 44px; padding: 10px 6px 8px; border-bottom: 2px solid transparent; text-decoration: none; }
.lang-switch a:hover { color: var(--accent-dark); border-color: var(--line); }
.lang-switch a[aria-current="true"] { color: var(--accent-dark); border-color: var(--accent); }
.lang-switch span { color: var(--muted); font-weight: 400; }
.mobile-menu nav .lang-link { border-top: 1px solid var(--line); border-radius: 0; color: var(--slate); font-size: .95rem; margin-top: 6px; padding-top: 14px; }
@media (max-width: 700px) { .lang-switch { display: none; }}

/* Engelse labels voor de mobiele vergelijkingstabel; de Nederlandse regels hierboven blijven de standaard. */
@media (max-width: 700px) {
  html[lang="en"] .compare-table td:nth-of-type(1)::before { content: "Process diagnosis"; }
  html[lang="en"] .compare-table td:nth-of-type(2)::before { content: "AI Workflow Audit"; }
  html[lang="en"] .compare-table td:nth-of-type(3)::before { content: "Implementation and training"; }}
.route-card.is-app { border-color: var(--accent); border-top: 4px solid var(--accent); }
.route-card p:not(.eyebrow) { color: var(--slate); font-size: .92rem; margin-top: 8px; }
.msg-picker li::before { content: none; }
main .msg-picker li a:not(.button), .msg-picker li a { margin-block: 0; padding: 14px 16px; } /* wint van de tikdoelvergroting op regel "main li a" */
main .msg-picker-compact li a:not(.button), .msg-picker-compact li a { padding: 11px 14px; }
.msg-picker a:hover, .msg-picker a:focus-visible { background: var(--accent-soft); border-color: var(--accent-dark); }
.msg-picker-compact summary::-webkit-details-marker { display: none; }
.msg-picker-compact summary::after { content: " +"; }
.msg-picker-compact[open] summary::after { content: " \2212"; }
.msg-picker-compact[open] summary { margin-bottom: 10px; }
.wa-bar { display: none; }
@media (max-width: 980px) {
  body.has-wa-bar { padding-bottom: 84px; }
  .wa-bar { align-items: center; backdrop-filter: blur(12px); background: rgba(229, 229, 229, .96); border-top: 1px solid var(--line); bottom: 0; display: flex; gap: 12px; justify-content: space-between; left: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 110; }
  .wa-bar p { color: var(--ink); font-size: .9rem; line-height: 1.3; margin: 0; }
  .wa-bar .button { flex: 0 0 auto; min-height: 48px; padding: 10px 18px; }
  body.has-wa-bar .consent-banner { bottom: 86px; }}
.price-card:hover { box-shadow: 0 18px 36px -30px rgba(16, 42, 42, .55); }
.price-card.is-start { box-shadow: 0 0 0 1px var(--accent), 0 24px 48px -34px rgba(15, 79, 70, .55); }
.price-card.is-start:hover { box-shadow: 0 0 0 1px var(--accent), 0 26px 52px -30px rgba(15, 79, 70, .65); }
.price-card.is-start .price-step em { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (min-width: 981px) {
  /* De pijl in de tussenruimte maakt van drie kaarten één traject. */
  .price-card + .price-card::after { border-right: 2px solid var(--smoke); border-top: 2px solid var(--smoke); content: ""; height: 11px; left: -10px; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 11px; }}

/* 2. Taalschakelaar: één klein bedieningselement in plaats van twee losse links. */
/* Geen overflow: hidden op de schakelaar: dat zou de focusring van de links wegknippen. */
.lang-switch { align-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-button); font-family: var(--font-mono); font-size: .7rem; gap: 0; letter-spacing: .08em; margin-left: 10px; }
.lang-switch a { border-bottom: 0; border-radius: 2px; color: var(--muted); min-height: 34px; padding: 6px 11px; }
.lang-switch a:hover { background: var(--mist); border-color: transparent; color: var(--accent-dark); }
.lang-switch a[aria-current="true"] { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); }
.lang-switch a[aria-current="true"]:hover { background: var(--accent-soft); color: var(--accent-dark); }
.lang-switch span { background: var(--line); font-size: 0; height: 34px; width: 1px; }

/* 3. Mobiele WhatsApp-balk: papier in plaats van grijs, op het stramien van de pagina. */
@media (max-width: 980px) {
  /* De ruimte voor de balk zit in de voet zelf, niet onder de body: een lege papierstrook onder de
     donkere voet leest als een fout. */
  body.has-wa-bar { padding-bottom: 0; }
  body.has-wa-bar .site-footer { padding-bottom: calc(24px + 92px); }
  body.has-wa-bar .consent-banner { bottom: 94px; }
  .wa-bar { backdrop-filter: blur(10px); background: rgba(251, 250, 245, .97); border-top: 1px solid var(--line); box-shadow: 0 -14px 30px -24px rgba(16, 42, 42, .6); gap: 18px; padding: 12px 32px calc(12px + env(safe-area-inset-bottom)); transition: opacity .22s ease, transform .22s ease; }
  .wa-bar p { color: var(--ink); font-size: .92rem; font-weight: 500; line-height: 1.35; max-width: 24ch; }
  .wa-bar p::before { background: var(--accent); content: ""; display: block; height: 2px; margin-bottom: 7px; width: 18px; }
  .wa-bar .button { min-height: 46px; padding: 10px 20px; }
  .wa-bar.is-hidden { opacity: 0; pointer-events: none; transform: translateY(100%); }}
@media (max-width: 700px) { .wa-bar { padding-inline: 20px; }}
@media (max-width: 390px) { .wa-bar { padding-inline: 16px; } .wa-bar p { font-size: .86rem; }}
@media (prefers-reduced-motion: reduce) { .wa-bar { transition: none; }}

/* 4. Portret in het persoonsblok: op mobiel een portret, niet een afgesneden blok. */
@media (max-width: 700px) {
  .person figure { aspect-ratio: 4 / 5; border: 1px solid var(--line); margin-bottom: 6px; max-height: none; width: min(76%, 260px); }
  .person figure img { object-position: 50% 14%; }}

/* Werkvoorbeelden en compacte beslispagina's, 7 september 2026. */
:root { --smoke: #526966; }
.dark-section .mini-label, .tool-card-dark .mini-label, .tool-card.is-primary .mini-label { color: #d4e2dc; }
.work-hero { padding-block: 64px; }
.work-hero .hero-grid { grid-template-columns: minmax(0,1.04fr) minmax(0,1fr); align-items: start; gap: 48px; }
.work-hero h1 { font-size: clamp(2.5rem,4.2vw,4rem); max-width: 16ch; }
.work-hero .lede { max-width: 53ch; }
.work-hero .specialist { margin-block: 26px 18px; }
.work-example { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 6px; padding: clamp(20px,3vw,36px); color: var(--ink); box-shadow: 0 14px 34px #102a2a09; }
.work-example h2 { font-size: clamp(1.55rem,2.6vw,2.1rem); line-height: 1.17; margin: 12px 0 24px; }
.work-decisions div:last-child { border-color: var(--accent); }
.example-section { padding-block: 48px; }
.process-entry:hover { background: #e0ebe5; }
.compact-section { padding-block: 24px; }
.work-demo .demo-case:not([hidden]) { margin-top: 22px; }
.desktop-nav a, .mobile-menu summary { min-height: 44px; display: inline-flex; align-items: center; }
/* Het mobiele menu is een lijst, geen woordenrij: elke regel vult de hele breedte. Met inline-flex
   liepen de items in elkaar door en wikkelden ze om, wat het menu rommelig maakte (9 september 2026). */
.mobile-menu nav a { min-height: 44px; display: flex; align-items: center; width: 100%; }
:focus-visible { outline: 3px solid #986020; outline-offset: 4px; }
@media (max-width: 980px) {
 .work-hero .hero-grid { grid-template-columns: 1fr; gap: 30px; }
 .work-hero h1 { max-width: 19ch; }}
@media (max-width: 600px) {
 .work-hero { padding-block: 32px; }
 .work-hero h1 { font-size: 2.6rem; }
 .example-section { padding-block: 30px; }
 .work-example { padding: 20px; }}
@media (prefers-reduced-motion: reduce) {
 .work-example *, .work-demo *, .wa-bar { animation: none !important; transition: none !important; }}

@media (max-width: 600px) { .work-hero h1 { font-size: clamp(2.05rem,8.7vw,2.45rem); }}
.work-hero .hero-grid { grid-template-rows: none; }
.compact-pricing .price-card.has-toggle:not(.is-open) > .price-more { display: none; }
.compact-pricing .price-card.has-toggle:not(.is-open) > .t-acc-panel { grid-template-rows: 0fr; transition-duration: var(--acc-collapse); }
.compact-pricing .price-card.has-toggle:not(.is-open) > .t-acc-panel > .t-acc-panel-inner { opacity: 0; filter: blur(var(--blur-small)); transition-duration: var(--acc-collapse); }
.compact-pricing .price-card.has-toggle .price-toggle { display: flex; justify-content: space-between; background: transparent; border: 1px solid var(--line); color: var(--accent-dark); font: inherit; font-size: .9rem; padding: 10px 14px; min-height: 48px; margin-block: 20px; width: 100%; text-align: left; cursor: pointer; }
.compact-pricing .price-toggle::after { content: "+"; }
.compact-pricing .is-open .price-toggle::after { content: "−"; }

@media (max-width: 600px) { .work-hero h1 { font-size: min(7.7vw,1.88rem); max-width: 100%; }}
@media (min-width: 981px) {
 .work-hero h1 { font-size: clamp(2.5rem,3.6vw,3.4rem); max-width: 100%; line-height: 1; overflow-wrap: anywhere; }}

.wa-bar.is-hidden, .mobile-actionbar.is-hidden { visibility: hidden; pointer-events: none; }
/* 5 oktober 2026: de balk schuift ook weg in plaats van met een knip te verdwijnen. visibility wacht tot de
   beweging klaar is; bij tonen gaat ze direct aan. Op desktop kreeg de balk nu pas een eigen uitgaande beweging. */
.wa-bar { transition: opacity .22s var(--ease-smooth-out), transform .22s var(--ease-smooth-out), visibility 0s linear 0s; }
.wa-bar.is-hidden { transition: opacity .22s var(--ease-smooth-out), transform .22s var(--ease-smooth-out), visibility 0s linear .22s; }
@media (min-width: 981px) { .wa-bar.is-hidden { opacity: 0; transform: translateY(12px); }}
.price-outcome > span:first-child { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--accent-dark); color: #fff; font-size: .85rem; }
.case-track::-webkit-scrollbar { display: none; }
.carousel-controls[hidden] { display: none; }
.case-dots [aria-current] span { width: 18px; border-radius: 8px; background: var(--accent-dark); }
.carousel-controls [data-case-pause] { margin-left: 8px; font-size: .8rem; }
main > section:last-child { padding-bottom: 72px; }
.free-deliverables, .result-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.free-deliverables .card, .result-card { padding: 28px; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--surface); }
@media (min-width: 981px) {
 .wa-bar { position: fixed; display: flex; align-items: center; gap: 14px; right: 24px; bottom: 24px; z-index: 110; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; padding: 12px; box-shadow: 0 6px 24px #102a2a20; max-width: 420px; }
 .wa-bar p { font-size: .85rem; line-height: 1.4; margin: 0; max-width: 18ch; }
 .wa-bar .button { white-space: nowrap; min-height: 48px; }}
@media (max-width: 980px) { .free-deliverables, .result-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }}
@media (max-width: 600px) {
 .free-deliverables, .result-cards { grid-template-columns: 1fr; }
 main > section:last-child { padding-bottom: 48px; }}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.case-dots [aria-current] span { width: 7px; border-radius: 50%; }
.carousel-cta:hover { text-decoration: underline; }
.person-compact figure { max-width: 280px; max-height: 380px; }
.person-compact figure img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 14%; }
@media (min-width: 981px) { .person.person-compact { grid-template-columns: 280px minmax(0,1fr); }}
@media (max-width: 600px) { .person-compact figure { max-width: 180px; max-height: 220px; }}
.home-final { margin-top: 36px; }
@media (max-width: 600px) {
 .demo-board[data-demo-route="exception"] .breuk-owner .breuk-seg-owner { transform: scaleY(1); }}

/* Mobiele carousel: bediening direct bereikbaar, ook op een smalle iPhone. */
@media (max-width: 600px) {
  .case-carousel .carousel-controls[hidden] { display: none; }}
@media (max-width: 600px) {
  .demo-board[data-demo-route="exception"] .breuk-dossier { transform: none; }
  .demo-board[data-demo-route="exception"] .breuk-stop { transform: translateY(-50%) scale(1); }
  .demo-board[data-demo-route="exception"] .breuk-seg-break { transform: scaleY(.5); }
  .breuk-st-owner::after { display: none; }
  .demo-board[data-demo-route="exception"] .breuk-owner { border-left-color: var(--accent); }
  .demo-board[data-demo-route="exception"] .breuk-owner .breuk-seg-owner { transform: scaleY(1); }}
.os-entry-examples a:hover { border-color: var(--accent); }
.consent-banner.is-inline { position: static; inset: auto; max-height: none; overflow: visible; width: min(calc(100% - 32px), 880px); margin: 24px auto; transform: none; }
.process-entries.services-overview .os-service-entry:hover { background: var(--graphite); }
@media (max-width: 1180px) {
  .site-header .desktop-nav, .site-header .header-inner > .button { display: none; }
  .site-header .mobile-menu { display: block; }}
.proof-scoreboard a:last-child { border:0; }
.proof-scoreboard a:hover { background:var(--graphite); }
.proof-flow li:not(:last-child)::after { content:' →'; color:var(--accent); }
.proof-project p:last-child { background:var(--mint); color:var(--ink); }
.proof-card-outcome p:last-child { font-size:.9rem; margin-bottom:0; }
.proof-bank-chart > div > span:first-child { width:65px; flex-shrink:0; font-size:.85rem; }
.proof-impact > :not(.proof-orbit) { position:relative; z-index:1; }
.proof-orbit::before,.proof-orbit::after { content:""; position:absolute; border:1px solid #a8e6cf20; border-radius:50%; inset:28px; }
.proof-orbit::after { inset:58px; }
.proof-orbit i:nth-child(2) { top:230px; left:51px; opacity:.55; }
.proof-orbit i:nth-child(3) { top:219px; left:157px; opacity:.35; }
.proof-bar::before { content:""; position:absolute; inset:0; background:#dcebe6; border-radius:3px; transform-origin:left; }
.proof-bar-after::before { background:#a8e6cf; }
.proof-flow li::before { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent); opacity:.2; transform-origin:left; }
.proof-page .result-card:hover { border-color:var(--accent); }
@media (prefers-reduced-motion:no-preference) {
 .proof-in-view .proof-bar::before { animation:proof-grow .85s cubic-bezier(.2,.7,.2,1) both; }
 .proof-in-view .proof-bar-after::before { animation-delay:.15s; }
 .proof-flow.proof-in-view li::before { animation:proof-flow-pass .7s ease-out both; }
 .proof-flow.proof-in-view li:nth-child(2)::before { animation-delay:.16s; }
 .proof-flow.proof-in-view li:nth-child(3)::before { animation-delay:.32s; }
 .proof-flow.proof-in-view li:nth-child(4)::before { animation-delay:.48s; }
 .proof-impact.proof-in-view .proof-project p:last-child { animation:proof-project-in .7s var(--duration-quick) ease-out both; }
 .proof-scoreboard a:hover .proof-arrow { transform:translate(3px,-3px); }}
@keyframes proof-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes proof-orbit-entry { from { transform:rotate(-24deg); opacity:.2; } to { transform:rotate(0); opacity:1; } }
@keyframes proof-flow-pass { from { transform:scaleX(0); opacity:1; } to { transform:scaleX(1); opacity:.35; } }
@keyframes proof-project-in { from { transform:translateY(8px); opacity:.5; } to { transform:translateY(0); opacity:1; } }
.proof-quote::before { content:'"'; position:absolute; top:14px; left:0; font-family:Georgia,serif; font-size:2.4rem; color:var(--accent); }

/* ============================================================
   Laag v8, 13 september 2026: mobiele home. Grotere specialistfoto met
   nieuwe uitsnede, tertiaire OS-link in de hero en de strook "Zo werkt
   het gratis AI-startplan" direct onder de hero.
   ============================================================ */
.specialist img { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--mint); flex-basis: 64px; height: 64px; width: 64px; }
.hero-alt a:hover { background: var(--mint); }
@media (max-width: 700px) {
  .specialist img { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--mint); flex-basis: 72px; height: 72px; width: 72px; }
  .work-hero .specialist { gap: 16px; }}

/* Laag v8 vervolg: dienstblokken, projecten met cijfers en quotes, zes fasen op de werkwijze. */
.services-section .section-head, .projects-section .section-head { max-width: 68ch; }
.home-quote::before { color: var(--accent); content: '"'; font-family: var(--font-display); font-size: 2.6rem; left: 14px; line-height: 1; position: absolute; top: 10px; }
.projects-section .text-link { font-weight: 600; }

/* Laag v8 beweging, 13 september 2026: hero-entree, sectorticker, gefaseerd inschuiven,
   tellende cijfers en zwevende kaarten. Alleen transform en opacity; uit bij verminderde beweging. */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 18 texts reveal op de hero, sinds 15 september 2026. Boven de vouw loopt
   de intrede als keyframe uit de motielaag: die start bij de eerste verf,
   werkt zonder JavaScript en verschuift de LCP niet. Onder de vouw gebruikt
   dezelfde transitie wel de JavaScript-variant met .t-stagger. */
@keyframes t-stagger-in {
  from { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.work-hero .hero-grid > div:first-child > *, .page-hero .shell > * { animation: t-stagger-in var(--stagger-dur) var(--stagger-ease) both; }
.work-hero .hero-grid > div:first-child > :nth-child(2), .page-hero .shell > :nth-child(2) { animation-delay: var(--stagger-stagger); }
.work-hero .hero-grid > div:first-child > :nth-child(3), .page-hero .shell > :nth-child(3) { animation-delay: calc(var(--stagger-stagger) * 2); }
.work-hero .hero-grid > div:first-child > :nth-child(4), .page-hero .shell > :nth-child(4) { animation-delay: calc(var(--stagger-stagger) * 3); }
.work-hero .hero-grid > div:first-child > :nth-child(5), .page-hero .shell > :nth-child(5) { animation-delay: calc(var(--stagger-stagger) * 4); }
.work-hero .hero-grid > div:first-child > :nth-child(6), .page-hero .shell > :nth-child(6) { animation-delay: calc(var(--stagger-stagger) * 5); }
.work-hero .hero-grid > div:first-child > :nth-child(n+7), .page-hero .shell > :nth-child(n+7) { animation-delay: calc(var(--stagger-stagger) * 6); }
/* 5 oktober 2026: de aanvraagkaart landt tegelijk met de tekst in plaats van als laatste (was .7s na .3s). */
.work-hero .work-example { animation: hero-in .6s .1s var(--ease) both; }
.specialist img { border-radius: 14px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--mint); flex-basis: 76px; height: 95px; object-fit: cover; object-position: 50% 20%; width: 76px; }
.ticker-track span::after { background: var(--accent); border-radius: 50%; content: ""; height: 5px; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 5px; }
.sector-ticker:hover .ticker-track { animation-play-state: paused; }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-very-slow) var(--ease), transform var(--duration-very-slow) var(--ease); }
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > :nth-child(2) { transition-delay: .1s; }
.reveal-stagger.is-in > :nth-child(3) { transition-delay: .2s; }
.reveal-stagger.is-in > :nth-child(4) { transition-delay: .3s; }
.reveal-stagger.is-in > :nth-child(5) { transition-delay: .4s; }
.reveal-stagger.is-in > :nth-child(6) { transition-delay: .5s; }
.reveal-stagger.is-in.is-settled > * { transition-delay: 0s; }
html.no-reveal .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
.process-entry:hover, .flow-steps li:hover, .phase-list li:hover, .home-quote:hover { box-shadow: 0 16px 34px #102a2a14; transform: translateY(-4px); }
.reveal-stagger.is-in > .process-entry:hover, .reveal-stagger.is-in > li:hover, .reveal-stagger.is-in > .home-quote:hover { transform: translateY(-4px); }
@media (max-width: 700px) {
  .specialist img { flex-basis: 88px; height: 110px; width: 88px; }}
@media (prefers-reduced-motion: reduce) {
  .work-hero .work-example, .work-hero .hero-grid > div:first-child > *, .page-hero .shell > * { animation: none; }
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }}
.price-glance li::before { background: var(--accent); bottom: 0; content: ""; left: 0; position: absolute; top: 0; transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease) .25s; width: 4px; }
.price-glance.is-in li::before { transform: scaleY(1); }
.price-glance li:first-child strong { color: var(--accent-dark); }
@media (min-width: 981px) {
  .price-glance li + li::after { border-right: 2px solid var(--smoke); border-top: 2px solid var(--smoke); content: ""; height: 9px; left: -9px; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 9px; }}
.pricing.reveal-stagger.is-in .price-card:hover { transform: translateY(-4px); }
.pricing.reveal-stagger .price-amount::after { background: var(--accent); content: ""; display: block; height: 3px; margin-top: 10px; transform: scaleX(0); transform-origin: left; transition: transform var(--duration-very-slow) var(--ease) .5s; width: 44px; }
.pricing.reveal-stagger.is-in .price-amount::after { transform: scaleX(1); }
.pricing.reveal-stagger.is-in .price-step em { opacity: 1; transform: none; }
.pricing.reveal-stagger .price-card.is-start { overflow: hidden; }
.pricing.reveal-stagger .price-card.is-start::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); border-radius: inherit; content: ""; inset: 0; pointer-events: none; position: absolute; transform: translateX(-130%) skewX(-18deg); width: 42%; }
.pricing.reveal-stagger.is-in .price-card.is-start::before { animation: price-sheen 1.15s .7s var(--ease) both; }
@keyframes price-sheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@media (min-width: 981px) {
  .pricing.reveal-stagger .price-card + .price-card::after { opacity: 0; transition: opacity var(--duration-slow) var(--ease) .7s; }
  .pricing.reveal-stagger.is-in .price-card + .price-card::after { opacity: 1; }}
.versus-grid::before { background: var(--ink); border-radius: 50%; color: #fff; content: "vs"; display: grid; font-family: var(--font-mono); font-size: .7rem; font-weight: 650; height: 34px; left: 50%; letter-spacing: .04em; place-items: center; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 34px; z-index: 1; }
.versus-col.is-ai { background: var(--tint); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.versus-col.is-ai h3 { color: var(--accent-dark); }
.versus-col li::before { background: #9aa8a3; content: ""; height: 2px; left: 2px; position: absolute; top: .6em; width: 11px; }
.versus-col.is-ai li { color: var(--ink); }
.versus-col.is-ai li::before { background: none; border-bottom: 2.5px solid var(--accent); border-left: 2.5px solid var(--accent); height: 6px; left: 2px; top: .38em; transform: rotate(-45deg); width: 11px; }
.versus.is-in li, .versus.is-in .versus-foot { opacity: 1; transform: none; }
.versus.is-in li:nth-child(2) { transition-delay: .12s; }
.versus.is-in li:nth-child(3) { transition-delay: .24s; }
.versus.is-in li:nth-child(4) { transition-delay: .36s; }
.versus.is-in .is-ai li:nth-child(1) { transition-delay: .3s; }
.versus.is-in .is-ai li:nth-child(2) { transition-delay: .42s; }
.versus.is-in .is-ai li:nth-child(3) { transition-delay: .54s; }
.versus.is-in .is-ai li:nth-child(4) { transition-delay: .66s; }
.versus.is-in .versus-foot { transition-delay: .9s; }
html.no-reveal .versus li, html.no-reveal .versus .versus-foot { opacity: 1; transform: none; transition: none; }
@media (max-width: 600px) {
  .versus-grid::before { display: none; }}
@media (prefers-reduced-motion: reduce) {
  .price-glance li::before, .pricing.reveal-stagger .price-card, .pricing.reveal-stagger .price-amount::after, .pricing.reveal-stagger .price-step em, .versus li, .versus .versus-foot { opacity: 1; transform: none; transition: none; }
  .pricing.reveal-stagger .price-card.is-start::before { animation: none; display: none; }
  .pricing.reveal-stagger .price-card + .price-card::after { opacity: 1; transition: none; }}
.versus-col li strong::after { content: ":"; }
.versus-col.is-ai li strong { color: var(--accent-dark); }
.logo-line a:hover { background: var(--mint); }
@media (max-width: 700px) { .logo-line-marks span:nth-child(n+7) { display: none; }}
.logo-mark.brand-25d366 { color: #25D366; }
.logo-mark.brand-412991 { color: #412991; }
.logo-mark.brand-d97757 { color: #D97757; }
.logo-mark.brand-ea4335 { color: #EA4335; }
.logo-tile.is-word { padding-left: 14px; }
.logo-tile:hover { border-color: var(--accent); box-shadow: 0 10px 22px #102a2a14; }
.logo-tile:not(.t-avatar):hover { transform: translateY(-3px); }
.logo-mark { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; color: var(--brand, var(--ink)); display: inline-grid; flex: 0 0 34px; height: 34px; place-items: center; width: 34px; }
.logo-mark svg { display: block; }
.logo-wall.reveal-stagger.is-in > :nth-child(7) { transition-delay: .6s; }
@media (max-width: 700px) {
  .logo-mark { flex-basis: 30px; height: 30px; width: 30px; }
  .logo-mark svg { height: 22px; width: 22px; }}

/* ============================================================
   Transitielaag, 15 september 2026.
   Elf transities uit de transitions-dev skill, aangesloten op de
   motielaag bovenin dit bestand. Elke transitie houdt haar eigen
   prefers-reduced-motion blok. Inline waarden worden nooit als
   style-attribuut in de HTML gezet; JavaScript schrijft ze via
   setProperty, zodat de CSP style-src 'self' geldig blijft.
   ============================================================ */

/* 05 menu dropdown: het mobiele menu groeit uit de knop. */
.mobile-menu nav { transform-origin: top right; transform: scale(var(--dropdown-pre-scale)); opacity: 0; pointer-events: none; transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease); will-change: transform, opacity; }
.mobile-menu[open] nav { transform: scale(1); opacity: 1; pointer-events: auto; }
.mobile-menu[open].is-closing nav { transform: scale(var(--dropdown-closing-scale)); opacity: 0; pointer-events: none; transition: transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease); }
@media (prefers-reduced-motion: reduce) { .mobile-menu nav { transition: none !important; }}

/* 06 modal: de e-mailkiezer schaalt op vanuit het midden. */
.email-chooser { transform-origin: center; transform: scale(var(--modal-scale)); opacity: 0; transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease); will-change: transform, opacity; }
.email-chooser.is-open { transform: scale(1); opacity: 1; }
.email-chooser.is-closing { transform: scale(var(--modal-scale-close)); opacity: 0; transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease); }
@media (prefers-reduced-motion: reduce) { .email-chooser { transition: none !important; }}

/* 11 avatar group hover: buurtegels tillen mee, terugkeer met veer. */
@media (hover: hover) and (pointer: fine) {
  .t-avatar { transform-origin: center; transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1)); transition: transform var(--avatar-dur) var(--avatar-ease-in); }
  .logo-line-marks:hover .t-avatar, .logo-group ul:hover .t-avatar { will-change: transform; }
  .logo-tile.t-avatar { transition: transform var(--avatar-dur) var(--avatar-ease-in), box-shadow var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }}
@media (prefers-reduced-motion: reduce) { .t-avatar { transition: none !important; transform: none !important; }}

/* 21 accordion: paneelhoogte via grid-template-rows, zonder hoogtemeting.
   Het paneel staat open in rust; .t-acc-shut op de houder klapt het dicht,
   zodat een omgeving die het paneel altijd toont (prijskaart op desktop)
   niets hoeft uit te zetten. */
.t-acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
.t-acc-shut > .t-acc-panel { grid-template-rows: 0fr; transition-duration: var(--acc-collapse); }
.t-acc-shut > .t-acc-panel > .t-acc-panel-inner { opacity: 0; filter: blur(var(--blur-small)); transition-duration: var(--acc-collapse); }
.t-acc-instant > .t-acc-panel, .t-acc-instant > .t-acc-panel > .t-acc-panel-inner { transition: none; }
.faq-grid details summary::-webkit-details-marker { display: none; }
.faq-grid details summary .t-acc-chevron { color: var(--accent-dark); flex: none; }
.t-acc-chevron { display: inline-flex; transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.faq-grid details[open]:not(.t-acc-shut) .t-acc-chevron { transform: scaleY(-1); }
@media (prefers-reduced-motion: reduce) { .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none !important; }}

/* 18 texts reveal: gefaseerde intrede van een tekstblok. */
.t-stagger-line { opacity: 0; transform: translateY(var(--stagger-distance)); filter: blur(var(--stagger-blur)); transition: opacity var(--stagger-dur) var(--stagger-ease), transform var(--stagger-dur) var(--stagger-ease), filter var(--stagger-dur) var(--stagger-ease); will-change: transform, opacity, filter; }
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger.is-shown .t-stagger-line { opacity: 1; transform: translateY(0); filter: blur(0); }
html.no-reveal .t-stagger-line { opacity: 1; transform: none; filter: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .t-stagger-line { transition: none !important; opacity: 1; transform: none; filter: none; }}

/* 08 page side-by-side: stapwissel schuift mee met de richting.
   De site houdt één stap in de flow, zodat de pagina niet op de
   hoogste stap hoeft te staan; de richting komt uit data-dir. */
.t-page { transition: opacity var(--page-fade-dur) var(--page-fade-ease), transform var(--page-slide-dur) var(--page-slide-ease), filter var(--page-slide-dur) var(--page-slide-ease); will-change: opacity, transform, filter; }
.t-page.is-entering { opacity: 0; filter: blur(var(--page-blur)); transition: none; }
.t-page.is-entering[data-dir="forward"] { transform: translateX(var(--page-slide-distance)); }
.t-page.is-entering[data-dir="back"] { transform: translateX(calc(var(--page-slide-distance) * -1)); }
@media (prefers-reduced-motion: reduce) { .t-page { transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; }}

/* 07 panel reveal: een uitkomstpaneel komt binnen met cross-blur. */
.t-panel-slide { transform: translateY(var(--panel-translate-y)); opacity: 0; filter: blur(var(--panel-blur)); transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease); will-change: transform, opacity, filter; }
.t-panel-slide[data-open="true"] { transform: translateY(0); opacity: 1; filter: blur(0); transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease); }
@media (prefers-reduced-motion: reduce) { .t-panel-slide { transition: none !important; transform: none; opacity: 1; filter: none; }}

/* 12 error state shake: het foutblok schudt en herstelt zelf. */
.t-input { transition: border-color var(--duration-quick) var(--ease-out); will-change: transform; }
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .t-input { animation: none !important; transform: none !important; }}

/* 02 number pop-in: een cijfer dat verandert komt kort opnieuw binnen. */
@keyframes t-digit-pop-in {
  0% { transform: translate(calc(var(--digit-distance) * var(--digit-dir-x)), calc(var(--digit-distance) * var(--digit-dir-y))); opacity: 0; filter: blur(var(--digit-blur)); }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; }
.t-digit-group.is-animating .t-digit[data-stagger="1"] { animation-delay: var(--digit-stagger); }
.t-digit-group.is-animating .t-digit[data-stagger="2"] { animation-delay: calc(var(--digit-stagger) * 2); }
@media (prefers-reduced-motion: reduce) { .t-digit-group .t-digit { animation: none !important; }}

/* 04 text states swap: een label wisselt op zijn plek. */
.t-text-swap { display: inline-block; transform: translateY(0); filter: blur(0); opacity: 1; transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease), opacity var(--text-swap-dur) var(--text-swap-ease); will-change: transform, filter, opacity; }
.t-text-swap.is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
.t-text-swap.is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .t-text-swap { transition: none !important; }}

/* 09 icon swap: kopieericoon wisselt naar vinkje in dezelfde plek. */
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon { grid-area: 1 / 1; transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease), transform var(--icon-swap-dur) var(--icon-swap-ease); will-change: opacity, filter, transform; }
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"], .t-icon-swap[data-state="b"] .t-icon[data-icon="b"] { opacity: 1; filter: blur(0); transform: scale(1); }
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"], .t-icon-swap[data-state="b"] .t-icon[data-icon="a"] { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
@media (prefers-reduced-motion: reduce) { .t-icon-swap .t-icon { transition: none !important; }}

/* 10 success check: het vinkje tekent zichzelf na kopieren. */
.t-success-check { display: inline-block; transform-origin: center; opacity: 0; will-change: transform, opacity, filter; }
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.t-success-check[data-state="in"] { animation: t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards, t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards, t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards, t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards; }
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }}

/* 16 tabs sliding: de gevulde pil schuift naar het gekozen tabblad. */
.tablist.has-pill { position: relative; }
.tablist.has-pill [role="tab"] { background: transparent; }
.tablist.has-pill [role="tab"][aria-selected="true"] { background: transparent; border-color: transparent; color: #fff; }
.t-tabs-pill { position: absolute; left: 0; top: 0; height: 0; width: 0; background: var(--accent); border-radius: var(--radius-sm); transform: translate(0, 0); transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease), height var(--tabs-dur) var(--tabs-ease); will-change: transform, width, height; z-index: 0; pointer-events: none; }
.tablist.has-pill [role="tab"] { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .t-tabs-pill, .tablist.has-pill [role="tab"] { transition: none !important; }}

.button .t-icon-swap { margin-right: 8px; }
.t-digit { white-space: pre; }

/* ============================================================
   Fase 4 van het transitieplan, 15 september 2026. Zes optionele
   transities, aangesloten op dezelfde motielaag.
   ============================================================ */

/* 22 toast: een bevestiging die niet in een knoplabel past. */
.t-toast { background: var(--ink); border-radius: var(--radius); bottom: calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 18px 40px -22px rgba(16, 42, 42, .8); color: #fff; font-size: .95rem; font-weight: 500; left: 24px; max-width: min(380px, calc(100vw - 48px)); opacity: 0; padding: 14px 18px; pointer-events: none; position: fixed; transform: translateY(var(--toast-distance)) scale(var(--toast-scale)); filter: blur(var(--toast-blur)); will-change: transform, opacity, filter; z-index: 60; transition: opacity var(--toast-close) var(--toast-ease), transform var(--toast-close) var(--toast-ease), filter var(--toast-close) var(--toast-ease); }
.t-toast.is-open { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition: opacity var(--toast-open) var(--toast-ease), transform var(--toast-open) var(--toast-ease), filter var(--toast-open) var(--toast-ease); }
@media (prefers-reduced-motion: reduce) { .t-toast { transition: none !important; }}

/* 25 checkbox check: het vinkje tekent zich in het contextvakje van de
   OS-scan. Het native invoerveld blijft staan en blijft bedienbaar; het
   ligt doorzichtig over het getekende vakje. */
.t-check-host { align-items: center; display: inline-flex; gap: 10px; position: relative; }
.t-check-host > input[type="checkbox"] { cursor: pointer; height: 22px; left: 0; margin: 0; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 22px; z-index: 1; }
.t-check { align-items: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); display: inline-flex; flex: none; height: 22px; justify-content: center; width: 22px; transition: background-color var(--check-box) var(--check-ease), border-color var(--check-box) var(--check-ease); }
.t-check svg { display: block; fill: none; height: 12px; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 12px; }
.t-check svg path { stroke-dasharray: var(--check-len, 15); stroke-dashoffset: var(--check-len, 15); transition: stroke-dashoffset var(--check-uncheck) var(--check-ease); }
.t-check-host > input[type="checkbox"]:checked ~ .t-check { background: var(--accent); border-color: var(--accent); }
.t-check-host > input[type="checkbox"]:checked ~ .t-check svg path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay); }
.t-check-host > input[type="checkbox"]:focus-visible ~ .t-check { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .t-check, .t-check svg path { transition: none !important; }}

/* 26 spinning counter: de cijferrij van Mijn projecten draait naar zijn
   eindwaarde. De streep is een verticale SVG-blur, want blur() in CSS
   smeert ook zijwaarts. */
/* De cijferrij van Mijn projecten staat in een strong; .stat-row span zou de
   rolcellen anders op de kleine bijschriftmaat zetten. */
span.t-reel, span.t-reel span { color: inherit; font: inherit; font-variant-numeric: tabular-nums; line-height: 1; }
.t-reel { align-items: center; display: inline-flex; height: var(--reel-cell); }
.t-reel-col { height: var(--reel-cell); overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.t-reel-strip { display: flex; flex-direction: column; will-change: transform, filter; }
.t-reel-digit { align-items: center; display: flex; height: var(--reel-cell); justify-content: center; }
.t-reel-defs { height: 0; position: absolute; width: 0; }
@media (prefers-reduced-motion: reduce) { .t-reel-strip { transition: none !important; filter: none !important; }}

/* 27 toggle: de bezoekmeting op de privacypagina is een schakelaar. De
   knoppen blijven in de HTML staan, zodat de pagina zonder JavaScript
   precies hetzelfde doet. */
.t-toggle { background: var(--line); border: 0; border-radius: 999px; display: inline-flex; flex: none; height: 24px; padding: 3px; transition: background-color var(--toggle-track) var(--toggle-ease); width: 44px; }
.t-toggle-thumb { background: var(--surface); border-radius: 50%; box-shadow: 0 1px 3px rgba(16, 42, 42, .35); display: block; height: 18px; translate: 0 0; width: 18px; will-change: translate; }
.t-switch[aria-checked="true"] .t-toggle { background: var(--accent); }
.t-switch[aria-checked="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
.t-switch.is-init[aria-checked="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
.t-switch.is-init[aria-checked="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes t-toggle-on {
  0% { translate: 0 0; }
  55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
  80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
  100% { translate: var(--toggle-travel) 0; }
}
@keyframes t-toggle-off {
  0% { translate: var(--toggle-travel) 0; }
  55% { translate: calc(0px - var(--toggle-ov1)) 0; }
  80% { translate: var(--toggle-ov2) 0; }
  100% { translate: 0 0; }
}
.t-switch { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-weight: 650; gap: 12px; min-height: 48px; padding: 8px 18px 8px 12px; }
.t-switch:hover { background: var(--mist); }
@media (prefers-reduced-motion: reduce) { .t-toggle-thumb { animation: none !important; }}

/* 28 thinking states: de statusregel van de werkstroomdemo glanst zolang
   een stap loopt en wisselt daarna naar de volgende. */
.t-think { display: block; position: relative; }
.t-think-text { display: block; filter: blur(0); opacity: 1; position: relative; transform: translateY(0); transition: transform var(--think-swap) var(--think-ease), filter var(--think-swap) var(--think-ease), opacity var(--think-swap) var(--think-ease); will-change: transform, filter, opacity; }
.t-think.is-busy .t-think-text::before { animation: t-think-shimmer var(--think-shimmer) linear infinite; background-clip: text; background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--think-highlight) 50%, transparent 60%, transparent 100%); background-repeat: no-repeat; background-size: 400% 100%; color: transparent; content: attr(data-text); inset: 0; pointer-events: none; position: absolute; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
@keyframes t-think-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.t-think-text.is-exit { transform: translateY(calc(var(--think-distance) * -1)); filter: blur(var(--think-blur)); opacity: 0; }
.t-think-text.is-enter-start { transition: none; transform: translateY(var(--think-distance)); filter: blur(var(--think-blur)); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .t-think-text { transition: none !important; transform: none !important; filter: none !important; }
  .t-think-text::before { display: none !important; }}

/* 30 streaming text: de AI-werkinstructie in het OS-resultaat komt woord
   voor woord binnen. De volledige tekst staat meteen in de DOM, dus
   kopieren, exporteren en voorlezen zien altijd het hele bericht. */
.t-stream-w { filter: blur(var(--stream-blur)); opacity: 0; transition: opacity var(--stream-fade) var(--stream-ease), filter var(--stream-fade) var(--stream-ease); }
.t-stream-w.is-in { filter: blur(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .t-stream-w { transition: none !important; filter: none !important; opacity: 1 !important; }}

/* Laag v10, voorstel 20 september 2026: hero-vergelijking, resultaatkaarten, bedrijfsvergelijking.
   Beweging volgt de motielaag bovenin dit bestand: rijen komen eenmalig binnen via .reveal,
   daarbinnen eerst "zonder", dan de pijl, dan "met", het vinkje tekent zich en de opbrengst popt. */
:root {
  --cmp-old-delay: 60ms;
  --cmp-arrow-delay: 200ms;
  --cmp-new-delay: 260ms;
  --cmp-check-delay: 460ms;
  --cmp-gain-delay: 540ms;
  --cmp-check-len: 15;
}
.cmp-check { fill: none; flex: 0 0 auto; overflow: visible; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cmp-check path { stroke-dasharray: var(--cmp-check-len); stroke-dashoffset: 0; }
.hv-head span:last-child { color: var(--accent-dark); }
.hv-old::before { background: var(--stop); content: ""; height: 2px; left: 12px; opacity: .75; position: absolute; top: 1.25em; width: 10px; }
.hv-rows li:nth-child(1) > * { animation-delay: .55s; } .hv-rows li:nth-child(1) .hv-new { animation-delay: .8s; } .hv-rows li:nth-child(1) .cmp-check path { animation-delay: 1.05s; }
.hv-rows li:nth-child(2) > * { animation-delay: .75s; } .hv-rows li:nth-child(2) .hv-new { animation-delay: 1s; } .hv-rows li:nth-child(2) .cmp-check path { animation-delay: 1.25s; }
.hv-rows li:nth-child(3) > * { animation-delay: .95s; } .hv-rows li:nth-child(3) .hv-new { animation-delay: 1.2s; } .hv-rows li:nth-child(3) .cmp-check path { animation-delay: 1.45s; }
.hv-rows li:nth-child(4) > * { animation-delay: 1.15s; } .hv-rows li:nth-child(4) .hv-new { animation-delay: 1.4s; } .hv-rows li:nth-child(4) .cmp-check path { animation-delay: 1.65s; }
@keyframes hv-in { from { opacity: 0; transform: translateY(var(--distance-base)); } to { opacity: 1; transform: none; } }
@keyframes hv-new-in { from { filter: blur(var(--blur-small)); opacity: 0; transform: translateX(calc(var(--distance-medium) * -1)); } to { filter: blur(0); opacity: 1; transform: none; } }
@keyframes cmp-draw { from { stroke-dashoffset: var(--cmp-check-len); } to { stroke-dashoffset: 0; } }

/* Resultaatkaarten */
.result-cards { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 22px; }
.result-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); border-top: 4px solid var(--accent); display: flex; flex-direction: column; padding: 26px 26px 24px; transition: box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
.result-who { color: var(--slate); font-family: var(--font-mono); font-size: .7rem; font-weight: 650; letter-spacing: .08em; margin: 0 0 14px; text-transform: uppercase; }
.result-number { display: grid; gap: 6px; margin: 0 0 16px; }
.result-number strong { color: var(--accent-dark); font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.4rem); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.result-number > span { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.result-quote blockquote p::before, .result-quote blockquote p::after { content: '"'; }

/* Bedrijfsvergelijking */
.compare-section { background: var(--mist); border-block: 1px solid var(--line); }
.compare-section .section-head h2 { max-width: 20ch; }
.compare-head span:first-child { border-radius: var(--radius-lg) 0 0 0; }
.compare-head span:last-child { border-radius: 0 var(--radius-lg) 0 0; }
.compare-row:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.compare-old p::before { background: var(--stop); content: ""; height: 2px; left: 2px; opacity: .75; position: absolute; top: .74em; width: 11px; }
.compare-row:last-child .compare-new { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent); }
.compare-new::after { background: var(--accent); border: 3px solid var(--surface); border-radius: 50%; color: #fff; content: "→"; display: grid; font-size: .85rem; height: 30px; left: -15px; line-height: 1; place-items: center; position: absolute; top: 50%; transform: translateY(-50%) scale(1); width: 30px; }
.compare-row.reveal .compare-new::after { transition: transform var(--duration-very-slow) var(--ease-bounce); transition-delay: var(--cmp-arrow-delay); }
.compare-row.reveal:not(.is-in) .compare-old { opacity: 0; transform: translateX(calc(var(--distance-base) * -1)); }
.compare-row.reveal:not(.is-in) .compare-new > * { filter: blur(var(--blur-small)); opacity: 0; transform: translateX(calc(var(--distance-medium) * -1)); }
.compare-row.reveal:not(.is-in) .compare-new::after { transform: translateY(-50%) scale(0); }
.compare-row.reveal:not(.is-in) .cmp-check path { stroke-dashoffset: var(--cmp-check-len); }
.compare-row.reveal:not(.is-in) .compare-gain > * { opacity: 0; transform: scale(.9); }
html.no-reveal .compare-row.reveal .compare-old, html.no-reveal .compare-row.reveal .compare-new > *, html.no-reveal .compare-row.reveal .compare-gain > * { filter: none; opacity: 1; transform: none; transition: none; }
html.no-reveal .compare-row.reveal .compare-new::after { transform: translateY(-50%) scale(1); transition: none; }
html.no-reveal .compare-row.reveal .cmp-check path { stroke-dashoffset: 0; transition: none; }
.sum-old li::before { background: var(--stop); content: ""; height: 2px; left: 2px; opacity: .75; position: absolute; top: .72em; width: 11px; }
.compare-sum.reveal:not(.is-in) li { opacity: 0; transform: translateY(var(--distance-base)); }
.compare-sum.reveal li:nth-child(2) { transition-delay: 90ms; }
.compare-sum.reveal li:nth-child(3) { transition-delay: 180ms; }
.compare-sum.reveal li:nth-child(4) { transition-delay: 270ms; }
.compare-sum.reveal .sum-new li:nth-child(2) { transition-delay: 540ms; }
.compare-sum.reveal .sum-new li:nth-child(3) { transition-delay: 630ms; }
.compare-sum.reveal .sum-new li:nth-child(4) { transition-delay: 720ms; }
.compare-sum.reveal:not(.is-in) .cmp-check path { stroke-dashoffset: var(--cmp-check-len); }
html.no-reveal .compare-sum.reveal li { opacity: 1; transform: none; transition: none; }
html.no-reveal .compare-sum.reveal .cmp-check path { stroke-dashoffset: 0; transition: none; }

@media (hover: hover) and (pointer: fine) {
  .result-card:hover { box-shadow: 0 16px 36px #102a2a14; transform: translateY(-3px); }
  .compare-row:hover .compare-icon { background: var(--accent); color: #fff; transform: scale(1.06); }
  .compare-row:hover .compare-new { background: #e2efea; }
  .compare-row:hover .compare-new::after { transform: translateY(-50%) scale(1.12); transition-delay: 0s; transition-duration: var(--duration-fast); }}

@media (max-width: 960px) {
  .result-cards { grid-template-columns: 1fr; }
  .compare-row, .compare-row:last-child { border: 1px solid var(--line); border-radius: var(--radius-lg); grid-template-columns: 1fr; overflow: hidden; }
  .compare-new, .compare-row:last-child .compare-new { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); overflow: visible; }
  .compare-new::after { content: "↓"; left: 50%; top: 0; transform: translate(-50%, -50%) scale(1); }
  .compare-row.reveal:not(.is-in) .compare-new::after { transform: translate(-50%, -50%) scale(0); }
  html.no-reveal .compare-row.reveal .compare-new::after { transform: translate(-50%, -50%) scale(1); }}
.cases-section .case-tabs[hidden] { display: none; }
.cases-section .case-tabs [data-case-prev], .cases-section .case-tabs [data-case-next] { display: none; }
.cases-section .case-tab[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) { .cases-section .case-tab:not([aria-current="true"]):hover { background: var(--accent-soft); border-color: var(--accent); }}
@media (max-width: 960px) {
  .compare-toggle:not([hidden]) { background: none; border: 0; cursor: pointer; display: block; inset: 0; padding: 0; position: absolute; width: 100%; }
  .compare-toggle::after { border-bottom: 2px solid var(--accent-dark); border-right: 2px solid var(--accent-dark); content: ""; height: 9px; position: absolute; right: 20px; top: 50%; transform: translateY(-70%) rotate(-135deg); transition: transform var(--duration-fast) var(--ease-smooth-out); width: 9px; }
  .compare-row.is-collapsed .compare-toggle::after { transform: translateY(-70%) rotate(45deg); }
  .compare-row.is-collapsed .compare-old, .compare-row.is-collapsed .compare-new { display: none; }
  .compare-row.is-collapsed .compare-gain { padding-top: 0; }
  .compare-row.is-collapsed .compare-gain > * { opacity: 1; transform: none; }}
@media (prefers-reduced-motion: reduce) {
  .result-card, .compare-icon { transition: none; }
  .compare-row.reveal .compare-old, .compare-row.reveal .compare-new > *, .compare-row.reveal .compare-gain > *, .compare-row.reveal .compare-new::after, .compare-row.reveal .cmp-check path, .compare-sum.reveal li, .compare-sum.reveal .cmp-check path { transition: none; }}
.versus-xl .versus-grid::before { font-size: 1rem; height: 60px; width: 60px; box-shadow: 0 0 0 6px var(--paper); }
.versus-xl .versus-col.is-ai { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: none; }
.versus-xl .versus-col.is-ai h3 { color: #fff; }
.versus-xl .versus-col.is-ai li { border-top-color: rgba(255, 255, 255, .24); color: #fff; }
.versus-xl .versus-col li::before { left: 2px; top: 25px; width: 16px; }
.versus-xl .versus-col.is-ai li::before { border-color: #9fd8c9; height: 8px; left: 2px; top: 20px; width: 16px; }
.versus-xl .versus-col li strong::after { content: none; }
.versus-xl .versus-col.is-ai li strong { color: #9fd8c9; }
.is-ai .versus-outcome { border-top-color: #9fd8c9; color: #fff; }
.is-ai .versus-outcome span { color: #9fd8c9; }
@media (max-width: 600px) {
  .versus-xl .versus-col li::before { top: 23px; }
  .versus-xl .versus-col.is-ai li::before { top: 18px; }}
.versus-xl.is-in li, .versus-xl.is-in .versus-outcome, .versus-xl.is-in .versus-live, .versus-xl.is-in .versus-foot { animation: versus-row var(--duration-very-slow) var(--ease-smooth-out) both; }
@keyframes versus-row { from { filter: blur(var(--blur-medium)); opacity: 0; transform: translateY(var(--distance-medium)); } to { filter: blur(0); opacity: 1; transform: none; } }
.versus-xl.is-in .versus-live { animation-delay: 0s; }
.versus-xl.is-in li:nth-child(1) { animation-delay: .08s; }
.versus-xl.is-in li:nth-child(2) { animation-delay: .16s; }
.versus-xl.is-in li:nth-child(3) { animation-delay: .24s; }
.versus-xl.is-in li:nth-child(4) { animation-delay: .32s; }
.versus-xl.is-in li:nth-child(5) { animation-delay: .4s; }
.versus-xl.is-in li:nth-child(6) { animation-delay: .48s; }
.versus-xl.is-in .versus-outcome { animation-delay: .6s; }
.versus-xl.is-in .is-ai .versus-live { animation-delay: .6s; }
.versus-xl.is-in .is-ai li:nth-child(1) { animation-delay: .7s; }
.versus-xl.is-in .is-ai li:nth-child(2) { animation-delay: .85s; }
.versus-xl.is-in .is-ai li:nth-child(3) { animation-delay: 1s; }
.versus-xl.is-in .is-ai li:nth-child(4) { animation-delay: 1.15s; }
.versus-xl.is-in .is-ai li:nth-child(5) { animation-delay: 2.15s; }
.versus-xl.is-in .is-ai li:nth-child(6) { animation-delay: 2.4s; }
.versus-xl.is-in .is-ai .versus-outcome { animation-delay: 1.4s; }
.versus-xl.is-in .versus-foot { animation-delay: 1.6s; }
.versus-xl.is-in .is-ai li::before { animation: versus-check var(--duration-very-slow) var(--ease-bounce) both; animation-delay: inherit; }
@keyframes versus-check { from { opacity: 0; transform: rotate(-45deg) scale(0); } to { opacity: 1; transform: rotate(-45deg) scale(1); } }
.versus-xl .versus-grid::before { transition: transform var(--duration-very-slow) var(--ease-bounce); }
.versus-xl:not(.is-in) .versus-grid::before { transform: translate(-50%, -50%) scale(0); }
.versus-xl.is-in .versus-grid::before { transition-delay: .5s; }
.versus-xl .versus-col.is-ai { transition: box-shadow var(--duration-very-slow) var(--ease-smooth-out) 1.5s; }
.versus-xl.is-in .versus-col.is-ai { box-shadow: 0 24px 60px -28px rgba(15, 79, 70, .75); }
html.no-reveal .versus-xl li, html.no-reveal .versus-xl .versus-foot, html.no-reveal .versus-xl .versus-outcome, html.no-reveal .versus-xl .versus-live { animation: none; opacity: 1; }
html.no-reveal .versus-xl .versus-grid::before { transform: translate(-50%, -50%); }
.versus-live::before { background: #9aa8a3; border-radius: 50%; content: ""; flex: none; height: 9px; width: 9px; }
.is-ai .versus-live { --think-base: #cfe9e2; --think-highlight: #fff; color: #cfe9e2; }
.is-ai .versus-live::before { animation: versus-pulse 1.8s var(--ease-in-out) infinite; background: #6fe0c4; box-shadow: 0 0 0 0 rgba(111, 224, 196, .6); }
@keyframes versus-pulse { 0% { box-shadow: 0 0 0 0 rgba(111, 224, 196, .6); } 70% { box-shadow: 0 0 0 9px rgba(111, 224, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 224, 196, 0); } }
.versus-live .t-think { flex: 1; min-width: 0; }
.versus-xl .versus-col li.is-pair { background: var(--mist); color: var(--ink); }
.versus-xl .versus-col.is-ai li.is-pair { background: rgba(255, 255, 255, .1); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .versus-xl li, .versus-xl .versus-foot, .versus-xl .versus-outcome, .versus-xl .versus-live, .versus-xl .versus-col, .versus-xl .is-ai li::before, .is-ai .versus-live::before { animation: none !important; opacity: 1 !important; transition: none !important; }
  .versus-xl .versus-grid::before { transform: translate(-50%, -50%) !important; transition: none !important; }}
@media (max-width: 600px) {
  .page-hero .portret-card.is-compact { max-width: none; }
  .page-hero .portret-card.is-compact img { aspect-ratio: 1 / 1; object-position: 50% 12%; }}
.os-map.is-in > :nth-child(2) { transition-delay: .35s; }
.os-map.is-in > :nth-child(3) { transition-delay: .7s; }
.os-layer + .os-layer::before { background: var(--accent); border-radius: 50%; color: #fff; content: "↓"; display: grid; font-size: .9rem; height: 30px; left: 50%; line-height: 1; place-items: center; position: absolute; top: -34px; transform: translateX(-50%); width: 30px; }
.os-layer.is-core { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 24px 60px -28px rgba(15, 79, 70, .75); }
.os-layer.is-core .os-layer-tag { color: #9fd8c9; }
.os-layer.is-core h3 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.os-layer p:not(.os-layer-tag) { color: var(--slate); margin: 0 auto; max-width: 62ch; }
.os-layer.is-core p:not(.os-layer-tag) { color: #dcebe6; }
.os-layer.is-core .os-chips li { background: rgba(255, 255, 255, .13); color: #fff; }
.os-duo p:not(.os-layer-tag) { margin: 0; }
@media (max-width: 960px) {
  .compare.is-collapsed .compare-extra { display: none; }
  .compare.is-collapsed .compare-more { background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--radius); color: var(--ink); cursor: pointer; display: block; font: inherit; font-weight: 650; min-height: 52px; padding: 12px 18px; width: 100%; }}
@media (max-width: 600px) {
  .os-layer + .os-layer::before { top: -32px; }}

/* Laag v11, 20 september 2026: autoriteitsrij, hero-kaart met schakelaar, logoband, reviewkaarten, donkere
   bedrijfsvergelijking, Operating System-sectie, voorbeeldopdracht, drie aanbodkaarten, FAQ in twee kolommen
   en de vergelijkingstabel op de prijzenpagina. Geen geel: accenten zijn groen, mint en wit. */
:root { --leaf: #9fd8c9; --ink-line: #ffffff24; --ink-soft: #ffffff0d; --ink-text: #c5d6d2; }
.hv-knob::after { background: #fff; border-radius: 50%; box-shadow: 0 2px 6px #102a2a40; content: ""; height: 24px; left: 3px; position: absolute; top: 3px; transition: transform var(--duration-slow) var(--ease-bounce, ease); width: 24px; }
.hv-switch:focus-visible ~ .hv-top .hv-knob { outline: 3px solid var(--accent); outline-offset: 3px; }
.hv2 .hv-old::before { left: 15px; top: 50%; }
.hv-switch:checked ~ .hv-bg { opacity: 1; }
.hv-switch:checked ~ .hv-top { border-color: var(--ink-line); }
.hv-switch:checked ~ .hv-top .carousel-author strong { color: #fff; }
.hv-switch:checked ~ .hv-top .carousel-author small, .hv-switch:checked ~ .hv-top .hv-toggle-off { color: var(--ink-text); }
.hv-switch:checked ~ .hv-top .hv-toggle-on { color: var(--leaf); }
.hv-switch:checked ~ .hv-top .hv-knob { background: var(--accent); }
.hv-switch:checked ~ .hv-top .hv-knob::after { transform: translateX(24px); }
.hv-switch:checked ~ .hv-rows strong { color: #fff; }
.hv-switch:checked ~ .hv-rows .hv-old { opacity: 0; transform: translateY(-8px); }
.hv-switch:checked ~ .hv-rows .hv-new { opacity: 1; transform: none; }
.hv-switch:checked ~ .hv-rows li:nth-child(2) > span { transition-delay: 90ms; }
.hv-switch:checked ~ .hv-rows li:nth-child(3) > span { transition-delay: 180ms; }
.hv-switch:checked ~ .hv-rows li:nth-child(4) > span { transition-delay: 270ms; }
.hv-switch:checked ~ .hv-rows li:nth-child(5) > span { transition-delay: 360ms; }
.hv-switch:checked ~ .hv-foot { border-color: var(--ink-line); }
.hv-switch:checked ~ .hv-foot .hv-foot-off { opacity: 0; }
.hv-switch:checked ~ .hv-foot .hv-foot-on { color: #fff; opacity: 1; }
.hv-switch:checked ~ .text-link { color: var(--leaf); }
.logo-marquee-label { color: var(--slate); font-family: var(--font-mono); font-size: .7rem; font-weight: 650; letter-spacing: .08em; margin: 0 0 14px; text-align: center; text-transform: uppercase; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }

/* Resultaten als reviewkaarten: de eerste kaart is de uitgelichte, donkere kaart */
#bewijs .result-cards .result-card { border-radius: var(--radius-xl); border-top-width: 1px; }
#bewijs .result-cards .result-card:first-child { background: var(--ink); border-color: var(--ink); box-shadow: 0 24px 48px -22px #102a2a80; }
#bewijs .result-cards .result-card:first-child .result-who { color: var(--leaf); }
#bewijs .result-cards .result-card:first-child .result-number strong, #bewijs .result-cards .result-card:first-child .result-number > span, #bewijs .result-cards .result-card:first-child .result-quote blockquote p { color: #fff; }
#bewijs .result-cards .result-card:first-child .result-desc, #bewijs .result-cards .result-card:first-child .result-quote figcaption { color: var(--ink-text); }
#bewijs .result-cards .result-card:first-child .result-quote { border-color: var(--ink-line); }

/* Bedrijfsvergelijking op donker: twee bedrijfskaarten, daaronder per onderdeel wat er was en wat het wordt */
.compare-section { background: radial-gradient(90% 60% at 85% 0%, #17473f 0%, var(--ink) 60%); border: 0; color: var(--ink-text); }
.compare-section .eyebrow::before { background: var(--leaf); }
.compare-section .section-head h2, .compare-sub { color: #fff; }
.compare-duo.reveal:not(.is-in) .sum-new .wb-regel { flex-grow: 3; }
.compare-duo.reveal:not(.is-in) .sum-new .wb-klant { flex-grow: 1; }
html.no-reveal .compare-duo.reveal .sum-new .wb-regel { flex-grow: 1; transition: none; }
html.no-reveal .compare-duo.reveal .sum-new .wb-klant { flex-grow: 3; transition: none; }
.compare-row, .compare-row:last-child { background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-xl); grid-template-columns: 230px minmax(0, 1fr) 270px; transition: background-color var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out); }
.compare-old, .compare-new, .compare-row:last-child .compare-new { background: none; box-shadow: none; grid-column: 2; }
.compare-old p::before { background: #8fa8a3; }
.compare-new::after { content: none; }
.compare-section .logo-line a:hover { background: #ffffff14; }

/* Vergelijking v2: per onderdeel twee panelen naast elkaar, links zonder AI, rechts met AI en de opbrengst */
.compare-v2 .compare-row, .compare-v2 .compare-row:last-child { align-items: stretch; background: none; border: 0; border-top: 1px solid var(--ink-line); border-radius: 0; gap: 0 16px; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.12fr); padding: 18px 0; }
.compare-v2 .compare-row:first-of-type { border-top: 0; }
.compare-v2 .compare-old p::before { content: none; }
.compare-v2 .compare-new, .compare-v2 .compare-row:last-child .compare-new { background: var(--paper); border-radius: var(--radius-xl) var(--radius-xl) 0 0; grid-column: 3; grid-row: 1; padding: 18px 22px 10px !important; position: relative; }
.compare-v2 .compare-new::after { background: var(--accent); border: 3px solid var(--ink); border-radius: 50%; color: #fff; content: "→"; display: grid; font-size: .85rem; height: 32px; left: -24px; line-height: 1; place-items: center; position: absolute; top: calc(50% + 10px); transform: translateY(-50%); width: 32px; z-index: 2; }
.compare-v2 .compare-row:hover { background: none; }
.compare-v2 .compare-row:hover .compare-new, .compare-v2 .compare-row:hover .compare-gain { background: var(--paper); }
.compare-v2 .compare-row:hover .compare-old { background: #ffffff12; }
.os-chat blockquote p::before, .os-chat blockquote p::after { content: none; }
.os-chat.is-plain { background: var(--paper); }
.os-chat.is-plain blockquote p { color: var(--muted); font-style: italic; }
.os-chat.is-own { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 24px 60px -28px rgba(15, 79, 70, .75); }
.os-chat.is-own figcaption { color: var(--leaf); }
.os-chat.is-own blockquote p { color: #fff; font-weight: 500; }
.plan-doc::before { background: var(--accent); border-radius: var(--radius-xl) var(--radius-xl) 0 0; content: ""; height: 5px; inset: 0 0 auto 0; position: absolute; }

/* Drie aanbodkaarten */
.offer-cards { align-items: stretch; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0 0 24px; padding: 0; }
.offer-cards > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 10px; padding: 28px; position: relative; transition: box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
.offer-step { color: var(--accent-dark); font-family: var(--font-mono); font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.offer-cards > li > strong { color: var(--ink); font-family: var(--font-display); font-size: clamp(2.2rem, 3.4vw, 3rem); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.02em; line-height: 1; margin-top: 6px; }
.offer-name { color: var(--ink); font-size: 1.12rem; font-weight: 700; }
.offer-desc { color: var(--slate); font-size: .93rem; line-height: 1.5; }
.offer-list { display: grid; gap: 9px; list-style: none; margin: 6px 0 10px; padding: 0; }
.offer-list li { color: var(--ink); font-size: .93rem; line-height: 1.45; padding-left: 24px; position: relative; }
.offer-list .cmp-check { fill: none; left: 1px; position: absolute; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; top: .3em; }
.offer-badge { align-self: flex-start; background: var(--accent-soft); border-radius: 999px; color: var(--accent-dark); font-family: var(--font-mono); font-size: .66rem; font-weight: 650; letter-spacing: .06em; margin-top: auto; padding: 4px 10px; text-transform: uppercase; }
.offer-cards > li > .button, .offer-cards > li > .text-link { align-self: flex-start; margin: 8px 0 0; }
.offer-cards .offer-free { background: radial-gradient(120% 80% at 100% 0%, #1b5a50 0%, var(--ink) 60%); border-color: var(--ink); box-shadow: 0 22px 44px -18px #102a2a66; }
.offer-cards .offer-free .offer-step { color: var(--leaf); }
.offer-cards .offer-free > strong, .offer-cards .offer-free .offer-name { color: #fff; }
.offer-cards .offer-free .offer-desc, .offer-cards .offer-free .offer-list li { color: var(--ink-text); }
.offer-cards .offer-free .cmp-check { stroke: var(--leaf); }
.offer-cards .offer-free .offer-badge { background: #ffffff1a; color: #fff; }
.offer-cards .offer-free .button { align-self: stretch; background: #fff; border-color: #fff; color: var(--ink); text-align: center; }
.offer-cards .offer-os { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* FAQ in twee kolommen */
.faq-split { align-items: start; display: grid; gap: 56px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); }
.faq-intro { position: sticky; top: 110px; }
.faq-intro h2 { color: var(--ink); font-size: clamp(2rem, 3.2vw, 2.7rem); margin-bottom: 14px; }
.faq-intro p:not(.eyebrow) { color: var(--slate); margin: 0 0 16px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { align-items: center; cursor: pointer; display: flex; gap: 20px; justify-content: space-between; list-style: none; padding: 24px 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { color: var(--ink); font-family: var(--font-body); font-size: 1.08rem; font-weight: 650; line-height: 1.4; margin: 0; }
.faq-list summary::after { color: var(--accent-dark); content: "+"; flex: 0 0 auto; font-size: 1.6rem; font-weight: 300; line-height: 1; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > p { color: var(--slate); margin: 0; max-width: 68ch; padding: 0 40px 26px 0; }
.faq-list summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.plan-compare thead th:first-child { text-align: left; }
.plan-compare tbody th[scope="row"] { color: var(--ink); font-size: .95rem; font-weight: 500; text-align: left; width: 40%; }
.plan-compare .is-featured { background: #14685c0d; }
.plan-compare thead .is-featured { background: var(--accent-soft); box-shadow: inset 0 3px 0 var(--accent); }
.plan-compare .no span[aria-hidden] { background: #b9b4a3; border-radius: 2px; display: inline-block; font-size: 0; height: 2px; vertical-align: middle; width: 12px; }
@media (max-width: 760px) {
  .plan-compare thead th:first-child, .plan-compare tbody th[scope="row"], .plan-compare tfoot th { background: var(--mist); left: 0; position: sticky; width: 132px; z-index: 1; }}

@media (hover: hover) and (pointer: fine) {
  .offer-cards > li:hover { box-shadow: 0 18px 38px -18px #102a2a4d; transform: translateY(-3px); }
  .offer-cards .offer-os:hover { box-shadow: inset 0 0 0 1px var(--accent), 0 18px 38px -18px #102a2a4d; }
  .compare-row:hover { background: #ffffff17; border-color: #ffffff40; }
  .compare-row:hover .compare-new, .compare-row:hover .compare-old { background: none; }
  .compare-row:hover .compare-icon { background: var(--leaf); color: var(--ink); }}

@media (max-width: 960px) {
  .compare-row, .compare-row:last-child { border: 1px solid var(--ink-line); border-radius: var(--radius-xl); grid-template-columns: 1fr; overflow: hidden; }
  .compare-new, .compare-row:last-child .compare-new { box-shadow: none; padding: 6px 18px 14px !important; }
  .compare-toggle::after { border-color: #fff; }
  .compare-v2 .compare-row, .compare-v2 .compare-row:last-child { border: 1px solid var(--ink-line); border-radius: var(--radius-xl); gap: 0; grid-template-columns: 1fr; padding: 0; }
  .compare-v2 .compare-row:first-of-type { border-top: 1px solid var(--ink-line); }
  .compare-v2 .compare-new::after { content: "↓"; left: 50%; top: -6px; transform: translate(-50%, -50%); }
  .compare-v2 .compare-row.is-collapsed .compare-gain { background: none; border-radius: 0; border-top: 1px solid var(--ink-line); margin: 0; padding: 12px 18px 14px !important; }
  .compare-v2 .compare-row.is-collapsed .compare-gain p { color: #fff; }
  .compare-v2 .compare-row.is-collapsed .compare-gain .gain-tag { background: #9fd8c926; color: var(--leaf); }
  .offer-cards { grid-template-columns: 1fr; }
  .faq-split { gap: 24px; grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .faq-list details > p { padding-right: 0; }}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track ul[aria-hidden] { display: none; }
  .hv2 .hv-bg, .hv2 .hv-old, .hv2 .hv-new, .hv-knob::after { transition: none; }}
.faq-cats a:hover, .faq-cats a:focus-visible { background: var(--accent-soft); border-color: var(--accent-dark); }
h2[id][tabindex="-1"] { scroll-margin-top: 96px; }
h2[id][tabindex="-1"]:focus { outline: none; }
/* Zonder JavaScript of met verminderde beweging zet het script geen chevron. Dan tekent CSS hem,
   zodat open en dicht altijd zichtbaar zijn en niet alleen uit beweging blijken. */
.faq-grid details:not([data-accordion]) > summary::after, .faq-list details:not([data-accordion]) > summary::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; flex: none; height: 9px; margin: 0 4px 4px 0; transform: rotate(45deg); width: 9px; }
.faq-grid details[open]:not([data-accordion]) > summary::after, .faq-list details[open]:not([data-accordion]) > summary::after { margin: 4px 4px 0 0; transform: rotate(-135deg); }
.shot-link:hover, .shot-link:focus-visible { border-color: var(--accent-dark); }
.img-preview { background: var(--ink-deep); border: 0; border-radius: var(--radius); color: #fff; height: min(92dvh, 1100px); max-height: none; max-width: none; overflow: hidden; padding: 0; width: min(94vw, 1280px); }
.img-preview::backdrop { background: rgba(6, 20, 20, .82); }
.img-preview[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ip-button:hover { background: rgba(255, 255, 255, .2); }
.ip-button:focus-visible { outline: 3px solid var(--volt); outline-offset: 2px; }
.ip-button[disabled] { cursor: default; opacity: .4; }
.ip-frame img.is-swapping { opacity: 0; }
.ip-frame img.is-dragging { transition: none; }
@media (max-width: 760px) {
  .img-preview { border-radius: 0; height: 100dvh; width: 100vw; }}

/* v12.3 Actietoestanden: gereed, bezig, gelukt, mislukt. Elke toestand heeft een eigen icoon
   en eigen tekst; kleur en beweging zijn nooit de enige drager. */
.as-icon { display: none; flex: none; height: 18px; margin-right: 8px; width: 18px; }
.as-icon svg { display: block; height: 18px; width: 18px; }
.button[data-action-state] { align-items: center; display: inline-flex; justify-content: center; }
.button[data-action-state="busy"] .as-icon, .button[data-action-state="done"] .as-icon, .button[data-action-state="failed"] .as-icon { display: inline-block; }
.button[data-action-state="busy"] { cursor: progress; }
.button[data-action-state="busy"] .as-icon svg { animation: as-spin .8s linear infinite; }
.button[data-action-state="done"], .button.button-secondary[data-action-state="done"] { background: var(--accent-soft); border-color: var(--accent-dark); color: var(--accent-dark); }
.button[data-action-state="failed"], .button.button-secondary[data-action-state="failed"] { background: var(--stop-soft); border-color: var(--stop); color: var(--stop); }
.as-note { align-items: flex-start; border-left: 3px solid var(--line); color: var(--slate); display: flex; flex-basis: 100%; font-size: .95rem; gap: 8px; margin: 10px 0 0; padding: 2px 0 2px 12px; }
.as-note:empty { border: 0; margin: 0; min-height: 0; padding: 0; }
.as-note[data-state="done"] { border-color: var(--accent-dark); color: var(--accent-dark); }
.as-note[data-state="failed"] { border-color: var(--stop); color: var(--stop); font-weight: 700; }
@keyframes as-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .button[data-action-state="busy"] .as-icon svg { animation: none; }}
.status-step::before { color: var(--muted); content: counter(stap, decimal-leading-zero); counter-increment: stap; font-family: var(--font-mono); font-size: .8rem; }
.status-step[aria-current="step"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.status-demo[data-status-live] .status-step[data-reached="false"] { background: transparent; }
.status-demo[data-status-live] .status-step[data-reached="false"] .status-badge { background: transparent; border-style: dashed; color: var(--muted); }
.status-badge[data-status="ontvangen"] { background: var(--mist); color: var(--ink); }
.status-badge[data-status="voorbereid"] { background: var(--accent-soft); color: var(--accent-dark); }
.status-badge[data-status="controle"] { background: var(--warm-soft); border-style: dashed; color: var(--warm); }
.status-badge[data-status="goedgekeurd"] { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.nav-card a::after { align-self: center; color: var(--accent-dark); content: "→"; grid-column: 2; grid-row: 1 / span 2; transition: transform var(--duration-quick) var(--ease-out); }
.nav-card a:hover, .nav-card a:focus-visible { background: var(--accent-soft); }
.nav-card a:hover .nav-card-title, .nav-card a:focus-visible .nav-card-title { text-decoration: underline; text-underline-offset: 3px; }
.nav-card a:hover::after { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .nav-card a, .nav-card a::after { transition: none; }}
/* Een veldmelding die uit de browser komt, krijgt dezelfde plaats en kleur als de eigen meldingen. */
.field-error[data-native-error="true"] { font-weight: 700; }
.tool-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--stop); box-shadow: inset 0 0 0 1px var(--stop); }

/* Klantlogo's en compacte cases, 21 september 2026. */
.client-marquee { background: var(--ink); color: #fff; overflow: hidden; padding: 30px 0 34px !important; }
.client-marquee-head { align-items: baseline; display: flex; gap: 18px; justify-content: center; margin-bottom: 20px; }
.client-marquee-head .logo-marquee-label { color: var(--leaf); margin: 0; }
.client-marquee-head > p:last-child { color: var(--ink-text); font-size: .9rem; margin: 0; }
.client-marquee-view { mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); overflow: hidden; }
.client-marquee-track { animation: ticker-run 72s linear infinite; display: flex; width: max-content; will-change: transform; }
.client-marquee-track ul { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0 14px 0 0; }
.client-marquee-track li { display: flex; }
.client-logo-tile { align-items: center; background: #fff; border: 1px solid #ffffff38; border-radius: var(--radius); display: flex; height: 112px; justify-content: center; padding: 18px 24px; transition: border-color var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); width: 280px; }
.client-logo-tile.is-dark { background: #071b1b; }
.client-logo-tile.is-square { width: 154px; }
.client-logo-tile img { display: block; height: 70px; max-width: 100%; object-fit: contain; width: auto; }
.client-logo-tile:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus); outline: 0; }
.client-marquee:hover .client-marquee-track, .client-marquee:focus-within .client-marquee-track { animation-play-state: paused; }
/* Met script remt de band zelf af (initMarqueeEase); de harde CSS-pauze blijft alleen de terugval. */
.client-marquee.is-eased:hover .client-marquee-track, .client-marquee.is-eased:focus-within .client-marquee-track { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .client-logo-tile:hover { border-color: var(--leaf); box-shadow: 0 18px 30px -20px #000; transform: translateY(-4px); }}
.company-logo-grid a.is-dark { background: var(--ink); }
.company-logo-grid a[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .company-logo-grid a:hover { border-color: var(--accent); box-shadow: 0 12px 24px -20px #102a2a99; transform: translateY(-2px); }}
.company-case[data-default] { display: block; }
.company-case:target { display: block; }
.company-cases:has(.company-case:target) .company-case[data-default]:not(:target) { display: none; }
.company-case > header.is-dark-logo > img { background: var(--ink); }
.company-case blockquote::before { color: var(--accent); content: "\201C"; font-family: var(--font-display); font-size: 3rem; line-height: 0; margin-right: 4px; vertical-align: -.45em; }
@media (max-width: 640px) {
  .client-marquee-head { align-items: center; flex-direction: column; gap: 8px; padding-inline: 20px; text-align: center; }
  .client-logo-tile { height: 88px; padding: 14px 18px; width: 220px; }
  .client-logo-tile.is-square { width: 126px; }
  .client-logo-tile img { height: 58px; }}
@media (prefers-reduced-motion: reduce) {
  .client-marquee-track { animation: none; }
  .client-marquee-view { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .client-marquee-track ul[aria-hidden] { display: none; }}
.company-proof-section.is-tint { background: var(--mist); }
.company-proof-section:target .client-case { animation: company-case-arrive .65s var(--ease-smooth-out) both; }
.proof-company-logo.is-dark { background: var(--ink); }
.company-proof-case .case-body > div:not(.case-result) { border-top: 1px solid var(--line); padding-top: 20px; }
.case-offer-route a:hover { color: var(--leaf); }
.case-offer-route a:focus-visible { outline-color: var(--leaf); }
@keyframes company-case-arrive { from { opacity: .55; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .company-proof-section:target .client-case { animation: none; }}
.company-proof-section.is-tint { background: var(--tint); }
.company-proof-section:target .company-proof-case {
  border-color: var(--accent);
  box-shadow: 0 26px 80px rgb(28 114 84 / 14%);
}
.proof-company-head::after {
  background: var(--accent);
  bottom: -1px;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  width: 76px;
}
.company-proof-case .case-body > div:not(.case-result) {
  border-top: 0;
  padding: 0 0 0 22px;
  position: relative;
}
.company-proof-case .case-body > div:not(.case-result)::before {
  background: #d7e3dc;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 2px;
}
.company-proof-case .case-body > div:nth-child(2)::before { background: var(--accent); }
.company-proof-case .case-body > div:nth-child(2) h3 { color: var(--accent-dark); }
.proof-benefits > div:nth-child(2) { background: var(--accent-dark); }
.proof-benefits > div:nth-child(3) { background: var(--accent); border-right: 0; }
.case-offer-route > p:not(.case-offer-kicker) { max-width: 78ch !important; }
.case-offer-cta:hover { background: #c7f2db; color: var(--ink) !important; }
.company-proof-case .proof-quote::before {
  color: var(--accent);
  left: clamp(24px, 3vw, 38px);
  top: 18px;
}
@media (max-width: 640px) {
  .company-proof-case .case-body > div:not(.case-result) { padding-left: 16px; }
  .proof-benefits > div:last-child { border-bottom: 0; }
  .company-proof-case .proof-quote::before { left: 18px; }}

/* Laag v13 (21 september 2026): geillustreerde voet met draaiende molenwieken.
   De voetinhoud is ongewijzigd; de scene (.footer-scene) staat als decoratieve laag achter de kolommen
   en loopt eronder door tot de onderbalk. Uitlijning van de wieken: illustratie 3168 x 1344, molenas op
   83.59% / 77.16%, sprite 301 px = 9.50% van de breedte. De scene houdt de beeldverhouding van de
   illustratie vast, dus de percentages kloppen op elke breedte. Alleen de wieken bewegen. */
.site-footer { background: #fcf7ec; border-top: 1px solid var(--line); color: var(--slate); isolation: isolate; overflow: hidden; padding: 0; position: relative; }
.site-footer::before { background-image: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 48px), repeating-linear-gradient(90deg, #b9c9c2 0 2px, transparent 2px 12px); }
.site-footer > .shell { position: relative; z-index: 1; }
.footer-brand { color: var(--ink); }
.footer-grid strong { color: var(--accent-dark); }
.footer-grid a:not(.brand), .mail-footer-links a { color: var(--ink); }
.footer-grid a:not(.brand):hover, .mail-footer-links a:hover { color: var(--accent); }
/* Zacht papierwaas achter de kolommen: de links blijven leesbaar boven het lijnenspel van de illustratie. */
.footer-grid::before, .footer-intro::before { background: radial-gradient(closest-side, rgba(252, 247, 236, .92) 0%, rgba(252, 247, 236, .8) 60%, rgba(252, 247, 236, 0) 100%); content: ""; inset: -40px -48px -56px; pointer-events: none; position: absolute; z-index: -1; }
.footer-scene { aspect-ratio: 3168 / 1344; margin: calc(-1 * min(25vw, 550px)) auto 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%); max-width: 2200px; pointer-events: none; position: relative; width: 100%; z-index: 0; }
.footer-scene-art { height: 100%; inset: 0; max-width: none; position: absolute; width: 100%; }
.footer-scene-blades { animation: footer-scene-spin 12s linear infinite; aspect-ratio: 1 / 1; height: auto; left: 83.59%; max-width: none; position: absolute; top: 77.16%; transform: translate(-50%, -50%); transform-origin: 50% 50%; width: 9.5%; will-change: transform; }
@keyframes footer-scene-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}
/* Onderbalk: dezelfde regel als voorheen, nu als donkere band over de volle breedte onder het landschap. */
.footer-bottom { background: var(--ink); border-top: 0; box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); color: #aabbb7; margin-top: 0; padding-bottom: 20px; }
@media (min-width: 2201px) {
  .footer-scene { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }}
@media (max-width: 980px) {
  /* De ruimte voor de WhatsApp-balk blijft in de voet zitten en kleurt mee met de onderbalk. */
  body.has-wa-bar .site-footer { background: linear-gradient(to top, var(--ink) 0, var(--ink) calc(24px + 92px), #fcf7ec calc(24px + 92px)); }}
@media (max-width: 719px) {
  /* Mobiel: de scene staat als band onder de kolommen, uitgesneden op de rechterhelft zodat de molen groot genoeg blijft. */
  .footer-scene { margin: 8px 0 0 -70%; max-width: none; width: 170%; }}
@media (prefers-reduced-motion: reduce) {
  .footer-scene-blades { animation: none; }}

/* Herindeling 21 september 2026: bestaande componenten in compacte leesvolgorde. */
.reordered-home main > section:not(.hero):not(.client-marquee), .reordered-page main > section:not(.page-hero) { padding-block: 64px; }
.reordered-home .hero { padding-block: 64px; }
.reordered-home .hero-grid { grid-template-columns: 1.15fr 1fr; align-items: start; }
.reordered-home h1 { max-width: 15ch; }
.starter-card { padding: 32px; height: auto; min-height: 0; }
.starter-card h2 { font-size: clamp(1.9rem,3vw,2.7rem); }
.starter-card .button { white-space: normal; text-align:center; }
.reordered-home .specialist { display: flex; gap: 18px; align-items: center; margin: 28px 0; }
.reordered-home .specialist img { width: 76px; height: 90px; object-fit: cover; border-radius: 12px; }
.reordered-home .specialist p { max-width: 42ch; margin:0; }
.reorder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.reorder-grid.two,.result-cards.reorder-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.practice-card { background:var(--surface); color:var(--ink); border:1px solid var(--accent); border-radius:20px; padding:24px; }
.practice-card h3 { margin-top:0; }
.practice-card dt { font-weight:700; margin-top:18px; }
.practice-card dd { margin:6px 0 0; }
.case-summary-logo { width:180px; height:80px; object-fit:contain; object-position:left; }
.client-marquee.is-paused .client-marquee-track { animation-play-state:paused; }
.menu-secondary { border-top:1px solid currentColor; margin-top:16px; padding-top:16px; display:grid; gap:12px; }
@media(max-width:800px){
 .reordered-home .hero-grid,.reorder-grid,.reorder-grid.two,.result-cards.reorder-two,.reordered-page .phase-list { grid-template-columns:1fr; }
 .reordered-home main > section:not(.hero):not(.client-marquee),.reordered-page main > section:not(.page-hero),.os-page .os-home { padding-block:40px; }
 .reordered-home .hero { padding-block:36px; }
 .starter-card { padding:24px; }
 .reorder-table td::before { content:attr(data-label); display:block; font-weight:700; }}
.reordered-home #bewijs .result-card { color:var(--ink); }
.reordered-home #bewijs .result-card:first-child { color:var(--paper); }
.reordered-home #bewijs .result-card:first-child a { color:var(--leaf); }
.reordered-home #bewijs .result-card blockquote { margin:24px 0 0; padding:0; font-size:1rem; }
.reordered-home #bewijs .result-card blockquote p { color:inherit; font-size:1.05rem; }
.reordered-home #bewijs .result-card > p:not(.result-number):not(.result-who) { font-size:1rem; color:inherit; }

/* Preserve narrow layouts for the moved comparison and legacy examples. */
.anchor-alias { display:block; scroll-margin-top:100px; }

.reordered-home .software-marks { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; list-style:none; padding:12px 0; margin:0; }
.reordered-home .software-mark { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:0; padding:0; }
.reordered-home .software-mark .logo-mark, .reordered-home .software-mark svg, .reordered-home .software-mark img { width:32px; height:32px; display:block; object-fit:contain; }
.practice-gain { font-weight:650; border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }

.reordered-home #bewijs .result-card blockquote { color:inherit; font-family:var(--font-body); font-weight:400; line-height:1.5; text-transform:none; letter-spacing:0; }
@media(max-width:640px){
 .reordered-page .footer-grid > div { min-width:0; overflow-wrap:anywhere; }}
/* DOM order is introduction, action, person, project link, matching mobile focus order. */
.reordered-home .hero-grid { gap:20px 48px; }
.reordered-home .hero-grid > div:first-child { grid-column:1; grid-row:1; }
.reordered-home .hero-grid > .starter-card { grid-column:2; grid-row:1 / span 3; }
.reordered-home .hero-grid > .specialist { grid-column:1; grid-row:2; margin:8px 0; }
.reordered-home .hero-grid > .text-link { grid-column:1; grid-row:3; }
@media(max-width:800px) {
 .reordered-home .hero-grid { gap:20px; }
 .reordered-home .hero-grid > .starter-card { grid-column:1; grid-row:2; }
 .reordered-home .hero-grid > .specialist { grid-row:3; }
 .reordered-home .hero-grid > .text-link { grid-row:4; }
 .reordered-home .hero h1 { max-width:none; }
 .reordered-home .hero .lede { margin-bottom:0; }
 .reordered-home .starter-card { padding:24px; }}

/* Feedback 21 september: rustige instap, leesbare compacte cases. */
.faq-list details[data-accordion] > summary::after { content: none; }
.faq-list summary .t-acc-chevron { flex: none; color: var(--accent-dark); }
.faq-list details[open]:not(.t-acc-shut) .t-acc-chevron { transform: scaleY(-1); }
.starter-card > .button { justify-content: center; text-align: center; width: 100%; }
.client-logo-tile { height: 88px; width: 220px; padding: 18px 22px; }
.client-logo-tile.is-square { width: 120px; }
.client-logo-tile img { height: auto; max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }
.proof-scoreboard.proof-benefits > div:nth-child(3) { background: var(--ink); }
.company-proof-case .case-details[open] > .case-body { margin: 18px 0; }

/* Derde feedbackronde: één contactactie, bestaande software, zichtbare casebewijzen. */
.contact-alternatives { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; border-top:1px solid var(--line); padding-top:20px; margin-top:24px; font-size:.9rem; }
.starter-card .contact-note { margin-top:18px; }
.software-bridge { border-top:1px solid #526966; margin-top:32px; padding-top:28px; }
.software-bridge-copy { max-width:760px; }
.software-bridge h3 { color:var(--paper); font-size:1.45rem; margin:0 0 12px; }
.software-bridge-copy p { color:#dbe8e1; margin:0; }
.software-bridge-groups { display:flex; align-items:center; flex-wrap:wrap; gap:22px 32px; margin:24px 0; }
.software-bridge-groups p { color:#dbe8e1; margin:0 0 10px; font-size:.85rem; }
.software-plus { color:var(--leaf); font-size:1.5rem; }
.reordered-home .software-bridge .software-marks { justify-content:flex-start; gap:18px; padding:0; }
.reordered-home .software-bridge .software-mark { width:30px; height:30px; }
.reordered-home .software-bridge .software-mark :is(.logo-mark,svg,img) { width:26px; height:26px; }
.reordered-home .software-bridge .logo-mark { color:#dbe8e1; }
.case-logo-frame { display:flex; align-items:center; justify-content:center; height:90px; width:160px; border-radius:8px; background:#fff; margin-bottom:18px; padding:12px 18px; }
.reordered-home .case-logo-frame .case-summary-logo { width:auto; height:auto; max-width:100%; max-height:64px; object-fit:contain; margin:0; }
.reordered-home #bewijs .result-number strong { white-space:nowrap; }
.company-proof-case .proof-case-layout > .case-body > div::before { content:none; }
.company-proof-case > .proof-quote::before { left:20px; top:14px; }
@media(max-width:640px) {
 .contact-alternatives { display:grid; gap:18px; }
 .software-bridge-groups { gap:20px; align-items:flex-start; }
 .software-plus { display:none; }
 .software-bridge-groups > div { flex-basis:100%; }
 .case-results li:last-child { border-bottom:0; }}
.reordered-home .software-bridge .logo-mark { background:transparent; border:0; border-radius:0; }
.reordered-home .software-bridge > .text-link { color:var(--leaf); }

/* Vierde feedbackronde: zichtbaar verschil, herkenbare gereedschappen en klantstem. */
.practice-card dl { margin-bottom:0; }
.practice-ai { background:#e5f3ec; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:14px 16px; margin-top:18px; }
.practice-ai dt { color:var(--accent-dark); margin-top:0; }
.practice-ai dd { color:var(--ink); }
.practice-card > .practice-gain { min-height:0; }
.software-bridge-groups { display:grid; grid-template-columns:minmax(0,1.2fr) 32px minmax(0,1fr); max-width:720px; gap:20px; align-items:stretch; }
.software-bridge-groups > div { border:1px solid #526966; border-radius:10px; padding:18px 20px; background:#193a37; }
.software-bridge-groups > div > p { color:var(--paper); font-weight:600; margin-bottom:16px; }
.software-plus { align-self:center; justify-self:center; font-size:1.8rem; }
.reordered-home .software-bridge .software-marks { gap:20px; }
.reordered-home .software-bridge .software-mark { width:32px; height:32px; }
.reordered-home .software-bridge .software-mark :is(.logo-mark,svg,img) { width:28px; height:28px; }
.home-testimonial { margin:24px 0 0; border-top:1px solid currentColor; padding-top:18px; }
.home-testimonial blockquote { margin:0; padding:0; }
.home-testimonial figcaption { font-family:var(--font-body); font-size:.8rem; margin-top:12px; opacity:1; }
.result-card .home-testimonial figcaption { color:inherit; }
.company-proof-case .case-offer-cta.button:hover { background:var(--accent-dark); }
@media(max-width:640px) {
 .software-bridge-groups { grid-template-columns:minmax(0,1fr); gap:12px; }
 .software-bridge-groups > div { padding:16px 18px; }
 .software-plus { display:block; font-size:1.4rem; line-height:1; }}

/* Keyboard access and clear spacing found in the complete route audit. */
table[tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Fifth feedback round: reused counters, aligned comparisons and direct expertise. */
.home-outcomes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:40px 0 18px; padding:28px 0; border-block:1px solid var(--line); }
.home-outcomes > div { padding:0 28px; border-right:1px solid var(--line); }
.home-outcomes > div:first-child { padding-left:0; }
.home-outcomes > div:last-child { border-right:0; }
.home-outcomes strong { display:block; color:var(--accent-dark); font-family:var(--font-display); font-size:clamp(2.6rem,4.8vw,4rem); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.3; min-height:1.3em; }
.home-outcomes > div > span { color:var(--ink); font-weight:650; }
.home-outcomes p { font-size:.92rem; margin:8px 0 0; max-width:30ch; }
.outcome-link { display:inline-flex; padding-block:8px; }
.reordered-home .software-bridge-groups { max-width:980px; grid-template-columns:minmax(0,1.8fr) 32px minmax(0,1fr); }
.reordered-home .software-marks-existing { flex-wrap:wrap; align-items:center; row-gap:20px; }
.reordered-home .software-bridge .software-mark.software-mark-wide { width:72px; }
.reordered-home .software-bridge .software-mark.software-mark-wide img { width:72px; height:32px; object-fit:contain; }
.reordered-home .software-mark img[src$="exact-logo.svg"] { background:white; border-radius:3px; padding:5px; }
.direct-expert-note { border-left:3px solid var(--accent); padding-left:16px; font-weight:600; }
@media (min-width:901px) {
 .home-practice-grid { grid-template-rows:repeat(7,auto); row-gap:0; }
 .home-practice-grid .practice-card { display:grid; grid-template-rows:subgrid; grid-row:span 7; }
 .home-practice-grid .practice-card dl { display:contents; }
 .home-practice-grid .practice-gain { margin-top:20px; padding-top:16px; }}
@media (max-width:719px) {
 .reordered-home .software-bridge-groups { grid-template-columns:1fr; }
 .home-outcomes { grid-template-columns:1fr; padding:8px 0; }
 .home-outcomes > div,.home-outcomes > div:first-child { padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }
 .home-outcomes > div:last-child { border-bottom:0; }
 .home-outcomes p { max-width:none; }}
/* Intro van de homekaarten, 5 oktober 2026: dekkend voordat de beweging uitloopt, zodat witte kaarten op de
   donkere sectie niet even grijs ogen. Na de intro (is-settled) reageert de hover weer in 0,3 s. */
.home-reveal.reveal-stagger > * { transition:opacity 350ms var(--ease),transform 650ms var(--ease),box-shadow .3s var(--ease); }
.home-reveal.reveal-stagger.is-settled > * { transition:opacity 350ms var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 .home-reveal.is-in > .practice-card:hover,.home-reveal.is-in > .result-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px #102a2a18; }}
/* Keep footer hit areas separate, including at 320px. */
.footer-grid a:not(.brand) { display:inline-flex; align-items:center; min-height:24px; margin-block:0; padding-block:0; }
/* Mobiel: geen zijwaarts vegen. Het rijlabel staat over de volle breedte, de drie opties staan eronder naast elkaar. */
@media (max-width: 760px) {
  .plan-compare tbody th[scope="row"] { background: none; border-bottom: 0; font-size: .95rem; grid-column: 1 / -1; padding: 14px 4px 2px; position: static; width: auto; }
  .plan-compare tfoot td, .plan-compare tfoot td.is-featured { background: none; border: 0; display: block; padding: 0; }}
/* Onderwerptegels op de FAQ-pagina: de algemene tikvlakvergroting hoort niet op een tegel. */
main .faq-cats li a:not(.button) { margin-block: 0; padding-block: 12px; }
/* Eén uitklapperstijl buiten de FAQ-rasters, gelijk aan de FAQ-kaarten. */
main :not(.faq-grid):not(.faq-list) > details:not([class]), .case-details, .legacy-proof-details, .maintenance-details, .prompt-details, .wf-details, details.comparison-demo, details.refinement { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-block: 16px; padding: 0 20px; }
main :not(.faq-grid):not(.faq-list) > details:not([class]) > summary, .case-details > summary, .legacy-proof-details > summary, .maintenance-details > summary, .prompt-details > summary, .wf-details > summary, details.comparison-demo > summary, details.refinement > summary { align-items: center; color: var(--ink); cursor: pointer; display: flex; font-weight: 650; gap: 16px; justify-content: space-between; list-style: none; min-height: 56px; padding: 14px 0; }
main :not(.faq-grid):not(.faq-list) > details:not([class]) > summary::-webkit-details-marker, .case-details > summary::-webkit-details-marker, .legacy-proof-details > summary::-webkit-details-marker, .maintenance-details > summary::-webkit-details-marker, .prompt-details > summary::-webkit-details-marker, .wf-details > summary::-webkit-details-marker, details.comparison-demo > summary::-webkit-details-marker, details.refinement > summary::-webkit-details-marker { display: none; }
main :not(.faq-grid):not(.faq-list) > details:not([class]) > summary::after, .case-details > summary::after, .legacy-proof-details > summary::after, .maintenance-details > summary::after, .prompt-details > summary::after, .wf-details > summary::after, details.comparison-demo > summary::after, details.refinement > summary::after { border-bottom: 2px solid var(--accent-dark); border-right: 2px solid var(--accent-dark); content: ""; flex: none; height: 9px; margin: 0 4px 4px 0; transform: rotate(45deg); transition: transform var(--duration-quick, .15s) var(--ease, ease); width: 9px; }
main :not(.faq-grid):not(.faq-list) > details:not([class])[open] > summary::after, .case-details[open] > summary::after, .legacy-proof-details[open] > summary::after, .maintenance-details[open] > summary::after, .prompt-details[open] > summary::after, .wf-details[open] > summary::after, details.comparison-demo[open] > summary::after, details.refinement[open] > summary::after { margin: 4px 4px 0 0; transform: rotate(225deg); }
main :not(.faq-grid):not(.faq-list) > details:not([class])[open], .case-details[open], .legacy-proof-details[open], .maintenance-details[open], .prompt-details[open], .wf-details[open], details.comparison-demo[open], details.refinement[open] { padding-bottom: 20px; }
main :not(.faq-grid):not(.faq-list) > details:not([class])[open] > summary, .case-details[open] > summary, .legacy-proof-details[open] > summary, .maintenance-details[open] > summary, .prompt-details[open] > summary, .wf-details[open] > summary, details.comparison-demo[open] > summary, details.refinement[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
/* In de donkere vergelijkingssectie (home, /brasil/) blijft de uitklapper doorzichtig met lichte lijnen en lichte tekst;
   een wit vlak maakt de witte tekst erin onleesbaar. */
main .compare-section :not(.faq-grid):not(.faq-list) > details:not([class]) { background: transparent; border: 0; border-radius: 0; border-top: 1px solid rgba(255, 255, 255, .22); padding: 0; }
main .compare-section :not(.faq-grid):not(.faq-list) > details:not([class]) > summary { color: #fff; }
main .compare-section :not(.faq-grid):not(.faq-list) > details:not([class]) > summary::after { border-color: #9fd8c9; }
main .compare-section :not(.faq-grid):not(.faq-list) > details:not([class])[open] { padding-bottom: 0; }
main .compare-section :not(.faq-grid):not(.faq-list) > details:not([class])[open] > summary { border-bottom-color: rgba(255, 255, 255, .22); }
/* Kopritme: een kop plakt niet aan de tekst eronder of het blok erboven. De marge staat op de kop zelf,
   zodat zij samenvalt met een bestaande marge van het volgende blok en die nooit verkleint. */
body:not(.os-page) main section > div[class="shell"] > h2 { margin-bottom: 18px; }
body:not(.os-page) main .section-head > h2:not(:last-child) { margin-bottom: 12px; }
body:not(.os-page) main section > div[class="shell"] > :is(p, div, ul, ol, table, details) + h3 { margin-top: 32px; }
body:not(.os-page) main section > div[class="shell"] > h3, main .reorder-grid article > h3, main .case-sectors h3, main .brasil-bank-story h3 { margin-bottom: 8px; }

/* Afwerkingsronde 21 september 2026, deel B: conversie. */
/* Hoofdknop boven de vouw op een telefoon (664 pixels zichtbaar in Safari). */
@media (max-width: 600px) {
  .work-hero { padding-block: 22px 32px; }
  .work-hero .hero-grid { gap: 22px; }
  .starter-card { display: flex; flex-direction: column; padding: 22px 22px 24px; }
  .starter-card > h2 { font-size: 1.42rem; line-height: 1.12; }
  .work-hero .lede { font-size: 1.02rem; }
  .starter-card > .button { margin-top: 18px; order: 1; }
  .starter-card > h2 + p { margin-top: 18px; order: 2; }
  .starter-card > .contact-note { order: 3; }
  .starter-card > .contact-alternatives { order: 4; }}
/* De voet op mobiel: linkgroepen inklapbaar. app.js zet de knoppen; zonder JavaScript blijven alle links zichtbaar. */
.footer-toggle { display: none; }
@media (max-width: 760px) {
  .footer-grid.is-collapsible > div > strong { display: none; }
  .footer-grid.is-collapsible .footer-toggle { align-items: center; background: none; border: 0; border-top: 1px solid var(--line); color: var(--accent-dark); cursor: pointer; display: flex; font: inherit; font-family: var(--font-mono); font-size: .78rem; justify-content: space-between; letter-spacing: .04em; min-height: 52px; padding: 0; text-transform: uppercase; width: 100%; }
  .footer-grid.is-collapsible .footer-toggle::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; height: 8px; margin-right: 6px; transform: rotate(45deg); transition: transform var(--duration-quick, .15s) var(--ease, ease); width: 8px; }
  .footer-grid.is-collapsible .footer-toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
  .footer-grid.is-collapsible .footer-toggle[aria-expanded="false"] ~ a { display: none; }
  .footer-grid.is-collapsible { gap: 0; }
  .footer-grid.is-collapsible > div { gap: 0; }
  .footer-grid.is-collapsible > div:last-child { border-bottom: 1px solid var(--line); }
  .footer-grid.is-collapsible .footer-toggle ~ a { min-height: 44px; }}

/* Gravures, 21 september 2026. Vier componenten dekken alle plaatsingen; elk beeld is decoratief (alt="", aria-hidden). */
.gravure-hero, .gravure-band img, .gravure-zij img, .method-art, .offer-art, .lost-art { display: block; height: auto; pointer-events: none; user-select: none; }
/* 1. Beeld rechts in een hero met lege rechterhelft. */
.page-hero .shell.has-gravure { position: relative; }
.page-hero .shell.has-gravure > :not(picture):not(nav) { max-width: min(100%, 640px); }
@media (max-width: 900px) {
  .page-hero .shell.has-gravure > :not(picture):not(nav) { max-width: 100%; }}
/* 3. Klein beeld rechts in een sectie met lege rechterhelft. */
.has-gravure-zij { position: relative; }
.gravure-zij.is-trommel { width: 170px; }
.gravure-zij.is-training { grid-column: 2; grid-row: 1; position: static; transform: none; width: 230px; }
@media (max-width: 900px) {
  .gravure-zij.is-trommel { width: 130px; }}
@media (max-width: 600px) {
  .gravure-zij.is-training { grid-column: 1; grid-row: 2; margin: 14px 0 6px; width: min(100%, 260px); }}
/* De trommel tikt de Tamboer-cadans: vijf slagen, de langste pauze na de derde. Eén keer per aanwijzing. */
@keyframes tamboer-cadans {
  0%, 9%, 18%, 27%, 52%, 61%, 70%, 79%, 100% { transform: translateY(0) rotate(0); }
  4.5%, 22.5%, 56.5%, 74.5% { transform: translateY(2px) rotate(-1deg); }
  13.5% { transform: translateY(2px) rotate(1deg); }
}
.gravure-zij.is-trommel { pointer-events: auto; }
.gravure-zij.is-trommel img { pointer-events: auto; transform-origin: 50% 80%; }
@media (prefers-reduced-motion: no-preference) {
  .gravure-zij.is-trommel:hover img, .gravure-zij.is-trommel:focus-visible img, .gravure-zij.is-trommel.is-tikt img { animation: tamboer-cadans 1.6s ease-out 1; }}
/* 4. Eigen opmaak: werkwijzestappen, aanbodkaarten, 404. */
.method-steps li.has-art { align-items: center; column-gap: 24px; display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(140px, 220px); }
.method-steps li.has-art .method-number { align-self: start; }
.method-steps li.has-art > div { grid-column: 2; grid-row: 1; max-width: 62ch; }
.method-steps li.has-art picture { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 820px) {
  .method-steps li.has-art { grid-template-columns: 56px 1fr; }
  .method-steps li.has-art picture { grid-column: 2; grid-row: auto; justify-self: start; margin-bottom: 8px; }
  .method-steps li.has-art > div { grid-row: auto; }}
.offer-art { height: 110px; margin: 0 0 18px; max-width: 100%; object-fit: contain; object-position: left center; width: auto; }
.os-layer.is-core:has(> picture) { padding-top: 0; }
/* /brasil/: de oversteek in de voet met een varend schip, en de twee vogels naast de vragenkop. */
.footer-scene.is-travessia { aspect-ratio: 2688 / 1152; }
.footer-scene-ship { animation: travessia-vaart 90s linear infinite; height: auto; left: 22%; max-width: none; position: absolute; top: 74.2%; width: 7.5%; will-change: left, opacity; }
@keyframes travessia-vaart { 0% { left: 22%; opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { left: 69%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .footer-scene-ship { animation: none; left: 46%; }}
.method-steps li.has-art picture { justify-self: center; max-width: 100%; width: 200px; }
.offer-art { margin-inline: auto; object-position: center; }
.os-duo > div:has(> picture) h3, .os-duo > div:has(> picture) p { text-align: center; }
.gravure-zij.is-trommel { right: 20%; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) {
  .gravure-zij.is-trommel { right: auto; top: auto; transform: none; }}
@media (max-width: 820px) {
  .method-steps li.has-art picture { grid-column: 1 / -1; justify-self: center; margin: 4px 0 12px; width: 150px; }}
@media (max-width: 600px) {
  .gravure-zij.is-training { justify-self: center; margin-inline: auto; }}
/* /brasil/ op mobiel: de hele oversteek in beeld, van de molen tot Rio, in plaats van alleen de rechterkant. */
@media (max-width: 719px) {
  .footer-scene.is-travessia { margin: 12px 0 0; max-width: none; width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
  .footer-scene.is-travessia .footer-scene-ship { animation-name: travessia-vaart-mobiel; width: 9%; }}
@keyframes travessia-vaart-mobiel { 0% { left: 22%; opacity: 0; } 5% { opacity: 1; } 94% { opacity: 1; } 100% { left: 68%; opacity: 0; } }
.os-layer.is-sources .os-layer-art { margin: 0 auto 18px; width: min(100%, 340px); }
.os-layer.is-sources .os-chips { margin-inline: auto; margin-top: 18px; max-width: 760px; }
.os-duo > div:hover { box-shadow: 0 18px 40px -26px rgba(15, 79, 70, .55); transform: translateY(-3px); }
/* Lagen en pijlen. */
.os-map.is-armed > li { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out); }
.os-map.is-armed.is-in > li { opacity: 1; transform: none; }
.os-map.is-armed.is-in > :nth-child(2) { transition-delay: .35s; }
.os-map.is-armed.is-in > :nth-child(3) { transition-delay: .7s; }
.os-map.is-armed > .os-layer + .os-layer::before { opacity: 0; transform: translate(-50%, -10px); transition: opacity var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); }
.os-map.is-armed.is-in > .os-layer + .os-layer::before { opacity: 1; transform: translateX(-50%); }
.os-map.is-armed.is-in > :nth-child(2)::before { transition-delay: .25s; }
.os-map.is-armed.is-in > :nth-child(3)::before { transition-delay: .6s; }
/* Chips: één voor één nadat hun laag zichtbaar is. */
.os-map.is-armed .os-chips li { opacity: 0; transform: translateY(6px) scale(.94); transition: opacity var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); }
.os-map.is-armed.is-in .os-chips li { opacity: 1; transform: none; transition-delay: calc(var(--chip-base, .3s) + var(--chip-i, 0) * 45ms); }
.os-map.is-armed.is-in > :nth-child(2) .os-chips li { --chip-base: .8s; }
.os-chips li:nth-child(1) { --chip-i: 0; } .os-chips li:nth-child(2) { --chip-i: 1; } .os-chips li:nth-child(3) { --chip-i: 2; } .os-chips li:nth-child(4) { --chip-i: 3; }
.os-chips li:nth-child(5) { --chip-i: 4; } .os-chips li:nth-child(6) { --chip-i: 5; } .os-chips li:nth-child(7) { --chip-i: 6; } .os-chips li:nth-child(8) { --chip-i: 7; }
.os-chips li:nth-child(9) { --chip-i: 8; } .os-chips li:nth-child(10) { --chip-i: 9; } .os-chips li:nth-child(11) { --chip-i: 10; } .os-chips li:nth-child(12) { --chip-i: 11; } .os-chips li:nth-child(13) { --chip-i: 12; }
.os-demo.is-armed .os-demo-ask { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out); }
.os-demo.is-armed .os-chat { opacity: 0; transform: translateY(14px); transition: opacity var(--duration-very-slow) var(--ease-smooth-out) .2s, transform var(--duration-very-slow) var(--ease-smooth-out) .2s; }
.os-demo.is-armed .os-chat.is-own { transition-delay: .45s; }
.os-demo.is-armed.is-in .os-demo-ask, .os-demo.is-armed.is-in .os-chat { opacity: 1; transform: none; }
.os-demo.is-armed.is-in:not(.is-done) .os-chat.is-own blockquote p::after { animation: os-caret 1s steps(2, start) infinite; background: var(--leaf); content: ""; display: inline-block; height: 1em; margin-left: 4px; vertical-align: -.15em; width: 2px; }
@keyframes os-caret { to { opacity: 0; } }
.os-demo.is-armed .os-chat-chips li { opacity: 0; transform: translateY(6px); transition: opacity var(--duration-medium) var(--ease-smooth-out), transform var(--duration-medium) var(--ease-smooth-out); }
.os-demo.is-armed .os-chat-chips .cmp-check path { stroke-dashoffset: var(--cmp-check-len); }
.os-demo.is-armed.is-done .os-chat-chips li { opacity: 1; transform: none; }
.os-demo.is-armed.is-done .os-chat-chips .cmp-check path { animation: cmp-draw var(--duration-very-slow) var(--ease-in-out) both; }
.os-demo.is-armed.is-done .os-chat-chips li:nth-child(2) { transition-delay: .18s; } .os-demo.is-armed.is-done .os-chat-chips li:nth-child(2) .cmp-check path { animation-delay: .25s; }
.os-demo.is-armed.is-done .os-chat-chips li:nth-child(3) { transition-delay: .36s; } .os-demo.is-armed.is-done .os-chat-chips li:nth-child(3) .cmp-check path { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .os-duo > div:hover { transform: none; }}
@media (max-width: 600px) {
  .os-layer.is-sources .os-layer-art { width: min(100%, 300px); }}
.flow-label::before { background: var(--accent); content: ""; display: inline-block; height: 1px; margin-right: 10px; vertical-align: middle; width: 22px; }
.flow-tabs[hidden], .flow-controls[hidden] { display: none; }
.flow-tabs button:hover { color: var(--ink); }
.flow-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.flow-tabs button:focus-visible, .flow-replay:focus-visible, .flow-toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.flow-rail::before, .flow-rail-fill { bottom: 0; content: ""; height: 2px; left: 12.5%; position: absolute; right: 12.5%; }
.flow-rail::before { background: var(--line); }
.flow-rail li::after { background: var(--paper); border: 2px solid var(--accent); border-radius: 50%; bottom: -21px; content: ""; height: 10px; left: calc(50% - 5px); position: absolute; width: 10px; z-index: 1; }
.flow-rail li.is-gate::after { border-color: var(--volt); }
.flow-rail li.is-gate em { background: var(--volt); border-radius: 4px; bottom: -44px; color: var(--ink); font-style: normal; left: 50%; letter-spacing: .08em; padding: 3px 7px; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 2; }
.flow-scene:not(.is-armed) .flow-rail li.is-gate em { display: none; }
.flow-panel[hidden] { display: none; }
.flow-out strong::before { color: var(--leaf); content: "\2713"; font-weight: 700; }
.flow-toggle span::before { background: var(--line); border-radius: 999px; content: ""; display: inline-block; height: 20px; margin-right: 10px; transition: background-color var(--duration-fast) var(--ease-smooth-out); vertical-align: -5px; width: 36px; }
.flow-toggle span::after { background: #fff; border-radius: 50%; box-shadow: 0 1px 2px #0003; content: ""; height: 16px; left: 2px; position: absolute; top: 2px; transition: transform var(--duration-fast) var(--ease-smooth-out); width: 16px; }
.flow-toggle input:checked + span::before { background: var(--stop); }
.flow-toggle input:checked + span::after { transform: translateX(16px); }
.flow-replay:hover { background: var(--ink); color: #fff; }
.flow-scene.is-exception .flow-exc { display: inline; }
.flow-scene.is-exception .flow-normal { display: none; }
.flow-scene.is-exception .flow-line-risk em { color: var(--stop); font-weight: 700; }
.flow-scene.is-exception .flow-line-risk { background: var(--stop-soft); border-radius: 6px; margin: 0 -6px; padding: 3px 6px; }
.flow-scene.is-exception .flow-check-risk svg { background: var(--stop); }
.flow-scene.is-exception .flow-check-risk svg path { display: none; }
.flow-scene.is-exception .flow-check-risk svg text { display: block; }
.flow-scene.is-exception .flow-stamp { border-color: var(--stop); color: var(--stop); }
.flow-scene.is-exception .flow-out, .flow-scene.is-exception .flow-out strong { background: var(--stop-soft); color: var(--ink); }
.flow-scene.is-exception .flow-out strong::before { color: var(--stop); content: "\2192"; }
.flow-scene.is-exception .flow-out > span { color: var(--slate); }

@media (max-width: 899px) {
  .flow-step:last-child { padding-bottom: 0; }
  .flow-step::before { background: var(--paper); border: 2px solid var(--accent); border-radius: 50%; content: ""; height: 10px; left: -6px; position: absolute; top: 3px; width: 10px; }
  .flow-step-check::before { border-color: var(--volt); }}
.flow-scene.is-armed .flow-rail li::after { border-color: var(--line); transition: border-color var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out); }
.flow-scene.is-armed .flow-rail li.is-reached::after { background: var(--accent); border-color: var(--accent); }
.flow-scene.is-armed .flow-rail li.is-gate.is-reached::after { background: var(--volt); border-color: var(--volt); }
.flow-scene.is-armed .flow-rail li { transition: color var(--duration-fast) var(--ease-smooth-out); }
.flow-scene.is-armed .flow-rail li:not(.is-reached) { color: #9aa8a4; }
/* Wisselen van voorbeeld, 5 oktober 2026: het oude voorbeeld vloeit weg en de rail loopt terug (zie change in app.js). */
.flow-scene.is-armed .flow-panel { transition: opacity 150ms var(--ease-smooth-out); }
.flow-scene.is-leaving .flow-panel { opacity: 0; }
.flow-scene.is-leaving .flow-rail-fill { transition: transform 150ms var(--ease-smooth-out); }
.flow-scene.is-leaving .flow-rail li.is-gate em { opacity: 0 !important; transition: opacity 150ms var(--ease-smooth-out); }
/* Homepage: subtiele bedrijfslogo's bij de aanvraag en herkenbare software die aansluit op AI. */
.starter-card > .invite-proof {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  color: #65716c;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 0;
  order: 1;
}
.invite-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
}
.invite-logos img {
  display: block;
  width: 42px;
  height: 21px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .65;
}
.invite-proof:hover { color: var(--ink); }
.invite-proof:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 800px) {
  .invite-logos { gap: 10px; }
  .invite-logos img { width: 36px; height: 20px; }
  .starter-card > .invite-proof { font-size: 11px; margin-top: 12px; }
}
@media (max-width: 359px) {
  .invite-logos { gap: 7px; }
  .invite-logos img { width: 31px; }
}

/* Een compacte logoregel: je software met passende AI ernaast. */
.reordered-home .software-bridge-groups {
  max-width: 760px;
  grid-template-columns: minmax(0, 2fr) 24px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.software-bridge-groups > div {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.software-bridge-groups > div > p {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  color: #dbe8e1;
}
.reordered-home .software-bridge .software-marks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.reordered-home .software-bridge .software-marks-ai { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reordered-home .software-bridge .software-mark,
.reordered-home .software-bridge .software-mark.software-mark-wide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  height: 46px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dbe8e1;
}
.reordered-home .software-bridge .software-name {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  color: #c4d1cb;
}
.reordered-home .software-bridge .software-mark :is(.logo-mark, svg, img) {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  padding: 0;
  filter: grayscale(1);
  opacity: .85;
}
.reordered-home .software-bridge .software-mark-wide img { width: 45px; }
.reordered-home .software-bridge .software-mark img[src$="exact-logo.svg"] { background: transparent; filter: grayscale(1) brightness(0) invert(1); }
.software-ai {
  --page-slide-distance: var(--distance-medium);
  --page-slide-dur: 600ms;
  --page-fade-dur: 600ms;
  --page-blur: var(--blur-small);
}
.software-bridge .software-plus {
  align-self: center;
  margin-top: 25px;
  color: #adc3b7;
  font-size: 22px;
  line-height: 1;
}
@keyframes software-connect {
  0%, 100% { opacity: .6; }
  45% { opacity: 1; color: #eff5e9; }
}
.software-bridge.is-connected .software-plus { animation: software-connect 800ms var(--ease-smooth-out) 400ms both; }
@media (max-width: 719px) {
  .reordered-home .software-bridge-groups { grid-template-columns: 1fr; gap: 12px; max-width: 390px; }
  .reordered-home .software-bridge .software-marks { gap: 8px; }
  .software-bridge-groups > div > p { margin-bottom: 10px; }
  .software-bridge .software-plus { margin: 0; justify-self: start; }
  .reordered-home .software-bridge .software-marks-ai { max-width: 185px; }
}
@media (max-width: 389px) {
  .reordered-home .software-bridge .software-marks-existing { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 210px; row-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .software-bridge.is-connected .software-plus { animation: none; }
}

/* Behoud de bestaande flex- en rasterindeling rondom verliesvrije logo's. */
.home-image { display: contents; }
.home-image > source { display: none; }

/* Meetlat in de bewijskaarten: dezelfde taak krimpt van 45 naar 8 minuten; 12 uur per week licht op. */
.case-meter { display: grid; gap: 8px; margin: -4px 0 18px; }
.case-meter-row { align-items: center; display: grid; font-size: 12px; gap: 12px; grid-template-columns: 76px minmax(0, 1fr) 48px; margin: 0; }
.case-meter-row > span:first-child { font-family: var(--font-mono); letter-spacing: .08em; opacity: .75; text-transform: uppercase; }
.case-meter-row > span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.case-meter-bar { border-radius: 3px; display: block; height: 8px; overflow: hidden; position: relative; }
.case-meter-bar i { border-radius: 3px; inset: 0; position: absolute; transform-origin: left center; }
.case-meter-was .case-meter-bar i { background: currentColor; opacity: .28; }
.case-meter-now .case-meter-bar i { background: var(--leaf); transform: scaleX(.178); }
.case-meter.is-armed .case-meter-now .case-meter-bar i { transform: scaleX(1); transition: none; }
.case-meter.is-armed.is-in .case-meter-now .case-meter-bar i { transform: scaleX(.178); transition: transform 900ms cubic-bezier(.19, 1, .22, 1) 350ms; }
.case-meter.is-armed .case-meter-now > span:last-child { opacity: 0; }
.case-meter.is-armed.is-in .case-meter-now > span:last-child { opacity: 1; transition: opacity 250ms var(--ease-smooth-out) 1000ms; }
.case-hours { align-items: center; display: flex; gap: 12px; margin: -4px 0 18px; }
.case-hours ol { display: grid; flex: 1; gap: 4px; grid-template-columns: repeat(12, minmax(0, 1fr)); list-style: none; margin: 0; max-width: 280px; padding: 0; }
.case-hours li { background: var(--accent); border-radius: 2px; height: 14px; }
.case-hours.is-armed li { opacity: .14; transform: scaleY(.5); }
.case-hours.is-armed.is-in li { opacity: 1; transform: none; transition: opacity 200ms var(--ease-smooth-out), transform 300ms cubic-bezier(.19, 1, .22, 1); }
.case-hours.is-armed.is-in li:nth-child(2) { transition-delay: 60ms; } .case-hours.is-armed.is-in li:nth-child(3) { transition-delay: 120ms; }
.case-hours.is-armed.is-in li:nth-child(4) { transition-delay: 180ms; } .case-hours.is-armed.is-in li:nth-child(5) { transition-delay: 240ms; }
.case-hours.is-armed.is-in li:nth-child(6) { transition-delay: 300ms; } .case-hours.is-armed.is-in li:nth-child(7) { transition-delay: 360ms; }
.case-hours.is-armed.is-in li:nth-child(8) { transition-delay: 420ms; } .case-hours.is-armed.is-in li:nth-child(9) { transition-delay: 480ms; }
.case-hours.is-armed.is-in li:nth-child(10) { transition-delay: 540ms; } .case-hours.is-armed.is-in li:nth-child(11) { transition-delay: 600ms; }
.case-hours.is-armed.is-in li:nth-child(12) { transition-delay: 660ms; }