/* Gekozen richting: Kleurwereld. Full-width kleurvlakken, pilknoppen, personages vóór grote typografie. */
body { --pad: clamp(4.5rem, 9vw, 8.5rem); --r: 1.75rem; }
p { max-width: 60ch; }


.h-xl { font-size: clamp(2.5rem, 6vw, 5.25rem); max-width: 15ch; }
.h-l { font-size: clamp(2.125rem, 4.2vw, 3.625rem); max-width: 20ch; }
.h-m { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 24ch; }
.intro, .lead, .big { font-size: clamp(1.125rem, 1.45vw, 1.3125rem); line-height: 1.55; }
.eyebrow { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.btn { border-radius: 999px; background: var(--purple); color: var(--white); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(253, 254, 255, 0.7); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: scale(0.97); }
}

/* Blok = kleurvlak over de volle breedte. Plain = witte tussenruimte. Ronde hoeken alleen op elementen binnen een vlak. */
.block { overflow: hidden; }
.block .inner { max-width: var(--wrap); margin-inline: auto; padding: var(--pad) var(--gutter); }
.plain { padding-block: var(--pad); }
.plain > .wrap > * + *, .block > .inner > * + * { margin-top: 1.75rem; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.two > * + * { margin-top: 0 !important; }
.two > div > * + * { margin-top: 1.5rem; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; margin-top: 2.5rem; }

/* Hero home: schermvullend. Reusachtige H1 in Gilroy Heavy, de Monkey staat er deels overheen, de tweede zin is een scheve lime strook.
   Lagen: kleur + naamband (achter) < H1 < Monkey + sticker < strook, tekst, knoppen. */
.hero-x { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: max(100dvh, 44rem); padding-top: clamp(6.5rem, 13vh, 8.5rem); color: var(--fg); background: var(--purple); transition: color 500ms ease; }
.hero-bgs, .hero-cast { position: absolute; inset: 0; }
.hero-bgs { z-index: -1; }
.hero-bg { position: absolute; inset: 0; background: var(--bg); visibility: hidden; }
.hero-bg.is-active { visibility: visible; z-index: 2; }
.hero-bg.is-leaving { visibility: visible; z-index: 1; }
.hero-cast { z-index: 1; pointer-events: none; }
.hero-monkey { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.hero-monkey.is-active, .hero-monkey.is-leaving { visibility: visible; }
.hero-monkey img, .hero-slot { position: absolute; left: 82%; bottom: 0; height: min(86dvh, 56rem); width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; }
/* Plek voor de foto van de ondernemer, tot die is aangeleverd. */
.hero-slot { display: grid; place-items: center; bottom: 3.5rem; height: min(70dvh, 46rem); width: min(27vw, 25rem); padding: 1.5rem; text-align: center; border-radius: 999px 999px 0 0; border: 3px dashed color-mix(in srgb, var(--fg) 55%, transparent); border-bottom: 0; background: color-mix(in srgb, var(--fg) 9%, transparent); }

.hero-x .hero-copy, .hero-x .hero-bar { max-width: none; }
.hero-x h1 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.84; }
.hero-x .mega { display: block; font-size: min(11.2vw, 21vh); }
.hero-x .line { display: block; overflow: hidden; padding-block: 0.04em; margin-block: -0.04em; white-space: nowrap; }
.hero-x .line > span { display: block; }
.hero-x .strip { position: relative; z-index: 2; display: inline-block; margin: 0.35em 0 0 -0.2em; padding: 0.32em 0.6em 0.26em; font-size: clamp(1.125rem, 2.75vw, 3rem); line-height: 1; letter-spacing: -0.02em; background: var(--strip, var(--lime)); color: var(--strip-fg, var(--ink)); transform: rotate(-2.2deg); transform-origin: 0 50%; transition: background-color 500ms ease, color 500ms ease; }
.hero-x .lead, .hero-x .actions, .hero-bar { position: relative; z-index: 2; }
.hero-x .lead { margin-top: clamp(1.25rem, 3vh, 2.25rem); max-width: 34rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn-ghost-fg { background: transparent; color: inherit; border-color: currentColor; }
.btn-strip { background: var(--strip, var(--lime)); color: var(--strip-fg, var(--ink)); }
.hero-x :focus-visible, .hero-page :focus-visible, .team :focus-visible { outline-color: var(--lime); }
.hero-spacer { display: none; }


/* Lopende band met naam en functie van de Monkey. */
.hero-band { position: absolute; inset: auto 0 0; overflow: hidden; padding-block: 0.875rem; background: rgba(0, 0, 0, 0.16); color: color-mix(in srgb, var(--fg) 62%, transparent); font-weight: 900; font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.hero-band .track { display: flex; align-items: center; width: max-content; animation: hero-band 38s linear infinite; }
.hero-band span { padding-inline: 0.7em; }
.hero-band i { flex: none; width: 0.85em; height: 0.92em; background: currentColor; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
@keyframes hero-band { to { transform: translateX(-50%); } }

.hero-bar { margin-top: auto; padding-block: 1.5rem clamp(4.25rem, 8vh, 5.5rem); }
.hero-controls { display: flex; align-items: center; gap: 0.5rem; }
.hero-controls[hidden] { display: none; }
.hero-controls button { min-width: 2.75rem; height: 2.75rem; padding: 0 0.875rem; border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; transition: transform 160ms var(--ease-out); }
.hero-controls button:active { transform: scale(0.95); }
.hero-progress { display: block; width: clamp(5rem, 12vw, 11rem); height: 3px; margin-left: 0.75rem; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, currentColor 28%, transparent); }
.hero-progress span { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
[data-slider].is-playing .hero-progress span { animation: hero-timer 10s linear both; }
[data-slider].is-paused .hero-progress span, [data-slider].is-waiting .hero-progress span { animation-play-state: paused; }
@keyframes hero-timer { to { transform: scaleX(1); } }

/* Binnenkomst bij laden: regels schuiven omhoog uit hun masker, strook en sticker ploppen erin, de Monkey stapt in beeld. Alleen CSS, de tekst staat al in de HTML. */
.hero-x .line > span { animation: hero-rise 900ms var(--ease-out) both; }
.hero-x .line:nth-child(2) > span { animation-delay: 90ms; }
.hero-x .strip { animation: hero-strip 700ms var(--ease-out) 420ms both; }
.hero-monkey.is-active > * { animation: hero-step 1000ms var(--ease-out) 200ms both; }
.hero-monkey.is-leaving > * { animation: hero-sink 450ms var(--ease-out) both; }
/* Wissel: de nieuwe kleur opent als cirkel vanaf de Monkey, de sticker draait mee. */
.hero-bg.is-entering { animation: hero-wipe 1100ms cubic-bezier(0.77, 0, 0.175, 1) both; }
@keyframes hero-rise { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes hero-strip { from { opacity: 0; transform: rotate(-9deg) scale(0.7); } to { opacity: 1; transform: rotate(-2.2deg) scale(1); } }
@keyframes hero-wipe { from { clip-path: circle(0% at 82% 58%); } to { clip-path: circle(160% at 82% 58%); } }
@keyframes hero-step { from { opacity: 0; transform: translateX(-50%) translateY(7%) scale(0.94); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes hero-sink { to { opacity: 0; transform: translateX(-50%) translateY(3%) scale(0.98); } }

/* Hero subpagina's: zelfde taal, full-width kleurvlak met Gilroy Heavy in kapitalen. */
.hero-page { position: relative; background: var(--purple); color: var(--white); }
.hero-page .inner { position: relative; padding-block: clamp(9rem, 14vw, 12rem) clamp(4rem, 8vw, 7rem); }
.hero-page h1 { font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 7.2vw, 7.5rem); line-height: 0.9; letter-spacing: -0.035em; max-width: 12em; text-wrap: balance; }
.hero-page .lead { margin-top: 2rem; max-width: 44rem; color: rgba(253, 254, 255, 0.92); }
.hero-page .hero-copy { position: relative; z-index: 1; }
.hero-page h1, .hero-page .lead { animation: page-rise 900ms var(--ease-out) both; }
.hero-page .lead { animation-delay: 140ms; }
@keyframes page-rise { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
.mark { position: absolute; opacity: 0.16; pointer-events: none; }
.hero-page .mark { width: clamp(14rem, 30vw, 28rem); height: auto; right: 4%; bottom: -14%; }
.hero-team-page { background: var(--ink); }
.hero-team-page { color: var(--white); }
.hero-team-page .inner { padding-bottom: 0; }
.hero-team-page .lead { max-width: 52rem; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.35; color: var(--white); }
.lineup.crowd { padding-top: clamp(3rem, 8vw, 8rem); }
.lineup.crowd img { height: clamp(9rem, 19vw, 18rem); }
.lineup.crowd .who { margin-inline: -2.2%; }

@media (max-width: 60rem) {
  .hero-x { padding-top: 8.75rem; min-height: 100dvh; }
  .hero-x .mega { font-size: min(12.4vw, 6rem); }
  .hero-x .strip { display: block; margin: 0.6em 0 0; font-size: clamp(1rem, 5vw, 1.75rem); line-height: 1.12; transform-origin: 50% 50%; }
  .hero-x .lead { font-size: 1rem; line-height: 1.5; }
  .hero-x .actions { margin-top: 1.25rem; gap: 0.5rem; }
  .hero-x .actions .btn { min-height: 2.75rem; }
  .hero-spacer { display: block; height: 47dvh; flex: none; }
  .hero-monkey img, .hero-slot { left: 44%; bottom: 3rem; height: 41dvh; }
  .hero-slot { width: 52vw; }
  @keyframes hero-wipe { from { clip-path: circle(0% at 46% 76%); } to { clip-path: circle(170% at 46% 76%); } }
  .hero-bar { position: absolute; left: var(--gutter); bottom: 3.5rem; padding: 0; width: auto; }
  .hero-progress { display: none; }
  .hero-controls button { min-width: 2.5rem; height: 2.5rem; background: color-mix(in srgb, var(--ink) 35%, transparent); }
  .lineup.crowd .who:nth-child(n + 8) { display: none; }
  .lineup.crowd img { height: clamp(10rem, 40vw, 16rem); }
  .lineup.crowd .who { margin-inline: -4%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-x .line > span, .hero-x .strip, .hero-monkey > *, .hero-bg.is-entering, .sc-slide, .sc-slide *, .hero-page h1, .hero-page .lead { animation: none !important; }
  .hero-band .track { animation: none; }
}

.statement { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.statement p { font-size: clamp(1.5rem, 2.8vw, 2.375rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; }

.bubbles { display: grid; gap: 0.75rem; }
.bubbles li { padding: 1.25rem 1.75rem; border-radius: var(--r); background: var(--mist); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; width: fit-content; max-width: 92%; }
.bubbles li:nth-child(even) { justify-self: end; background: var(--purple); color: var(--white); }


.stairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; margin-block: 3.5rem 2.5rem; }
.stairs li { border-radius: var(--r); padding: 2rem; background: var(--mist); }
.stairs li:nth-child(2) { padding-top: 5rem; background: var(--purple); color: var(--white); }
.stairs li:nth-child(3) { padding-top: 8rem; background: var(--ink); color: var(--white); }
.stairs .num { display: block; font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.05em; }
.stairs li:nth-child(3) .num { color: var(--lime); }
.stairs p { margin-top: 1rem; font-size: 1.125rem; }

/* Naam of woord groot achter het personage. */
.behind { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); font-weight: 900; line-height: 0.85; letter-spacing: -0.05em; text-transform: uppercase; white-space: nowrap; pointer-events: none; user-select: none; }
.team { background: var(--ink); color: var(--white); }
.team .inner { padding-bottom: 0; }
.team-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); }
.team-copy h2 { grid-row: span 3; }
.team-copy p { color: rgba(253, 254, 255, 0.86); }
.team-copy .btn { justify-self: start; }
.lineup { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: clamp(3rem, 6vw, 5rem) !important; padding-top: clamp(3rem, 9vw, 9rem); }
.lineup .behind { top: 0; font-size: clamp(4.5rem, 19.5vw, 19rem); color: var(--purple); }
.lineup img { position: relative; width: auto; height: clamp(11rem, 25vw, 23rem); margin-inline: -1.5%; }

.pricing-teaser { background: var(--mist); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; margin-block: 3rem 2rem; }
.fields li { border-radius: var(--r); padding: 2rem; background: var(--white); }
.fields li:nth-child(2) { padding-top: 4.5rem; background: var(--purple); color: var(--white); }
.fields li:nth-child(3) { padding-top: 7rem; background: var(--ink); color: var(--white); }
.fields strong { display: block; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.fields span { display: block; margin-top: 0.75rem; font-weight: 700; font-size: 1.125rem; }


.site-footer { background: var(--ink); color: var(--white); padding-block: 4rem; }
.site-footer .about p { margin-top: 1.25rem; max-width: 40ch; color: rgba(253, 254, 255, 0.82); }
.site-footer .promise { color: var(--lime) !important; font-weight: 700; }
.site-footer .links { font-weight: 600; font-size: 0.9375rem; }
.site-footer :focus-visible { outline-color: var(--lime); }

/* De Monkeys */
.stage { position: relative; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; border-radius: var(--r); background: var(--bg); aspect-ratio: 4 / 5; padding-top: 12%; container-type: inline-size; }
.stage .behind { font-size: 34cqw; color: var(--licht); opacity: 0.9; top: 6%; }
.stage img { position: relative; height: 100%; width: auto; max-width: none; transition: transform 280ms var(--ease-out); transform-origin: 50% 100%; }
.stage .monkey-missing { position: relative; align-self: center; padding: 1rem; }
@media (hover: hover) and (pointer: fine) { li:hover > .stage img, .stage:hover img { transform: scale(1.04); } }
.core-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.core .two { margin-top: 3rem !important; }
.rol { padding-top: 0; }
.rol-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.rol-grid > * + * { margin-top: 0 !important; }
.rol-grid > div > * + * { margin-top: 1.5rem; }
.rol.flip .stage { order: 2; }
.stage.wide { aspect-ratio: 5 / 4; }
.stage.wide .behind { font-size: 30cqw; }

.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem 1rem; margin-top: 3.5rem !important; }
.tiles > li { grid-column: span 3; }
.tiles > li:nth-child(7n + 5), .tiles > li:nth-child(7n + 6), .tiles > li:nth-child(7n + 7) { grid-column: span 4; }
.tiles > li:nth-child(7n + 5) .stage, .tiles > li:nth-child(7n + 6) .stage, .tiles > li:nth-child(7n + 7) .stage { aspect-ratio: 1; }
.tile-copy { padding: 1.25rem 0.25rem 0; }
.tile-copy h3 { font-size: 1.625rem; }
.tile-copy .rol { padding: 0; font-weight: 700; color: var(--purple); font-size: 0.9375rem; margin-block: 0.25rem 0.75rem; }
.tile-copy p { font-size: 1rem; color: var(--muted); }
.tile-copy .klant { margin-top: 0.5rem; color: var(--ink); }

.afdelingen { background: var(--mist); }
.dept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem !important; }
.dept-grid li { background: var(--white); border-radius: var(--r); padding: 2rem; }
.dept-grid h3 { font-size: 1.625rem; margin-block: 1.25rem 0.5rem; }
.dept-grid p { color: var(--muted); font-size: 1rem; }
.stack { display: flex; }
.stack .bust { width: 4rem; border-radius: 50%; border: 3px solid var(--white); margin-right: -0.875rem; }

.link-cards { display: grid; gap: 1rem; margin-top: 2.5rem !important; }
.link-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.link-cards a { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: 2rem; border-radius: var(--r); background: var(--mist); text-decoration: none; transition: transform 220ms var(--ease-out); }
.link-cards h3 { font-size: 1.625rem; }
.link-cards p { color: var(--muted); font-size: 1rem; }
.link-cards .go { margin-top: auto; padding-top: 1rem; font-weight: 800; color: var(--purple); }
@media (hover: hover) and (pointer: fine) { .link-cards a:hover { transform: translateY(-4px); } }

/* Pricing */
.start { background: var(--lime); }
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding-block: clamp(3rem, 5vw, 4.5rem) !important; }
.start-grid > * + * { margin-top: 0 !important; }
.start-grid > div > * + * { margin-top: 1rem; }
.start .prijs { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.pakket-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.pakket-fields > li { display: flex; flex-direction: column; gap: 1rem; border-radius: var(--r); padding: clamp(1.75rem, 2.6vw, 2.5rem); }
.f-create { background: var(--mist); }
.f-publish { background: var(--purple); color: var(--white); padding-top: 5rem !important; }
.f-grow { background: var(--ink); color: var(--white); padding-top: 8rem !important; }
.pakket-fields h3 { font-size: clamp(2.5rem, 4.4vw, 4rem); }
.pakket-fields .pay { font-weight: 800; font-size: 1.125rem; margin-top: -0.5rem; }
.pakket-fields .prijs { font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.f-grow .prijs, .f-publish .prijs { color: var(--lime); }
.pakket-fields ul li { position: relative; padding: 0.3125rem 0 0.3125rem 1.5rem; font-weight: 600; }
.pakket-fields ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--lime); }
.f-create ul li::before { background: var(--purple); }
.pakket-fields .extra { font-size: 0.9375rem; opacity: 0.86; }
.pakket-fields .btn { margin-top: auto; align-self: flex-start; }
.f-publish .btn, .f-grow .btn { background: var(--lime); color: var(--ink); }
.f-publish :focus-visible, .f-grow :focus-visible { outline-color: var(--lime); }
.pakketten .open-note { margin-top: 1rem; }

@media (max-width: 60rem) {
  .two, .cols-2,
  .team-copy, .rol-grid, .start-grid { grid-template-columns: 1fr; }
  
  .team-copy h2 { grid-row: auto; }
  .stairs, .fields, .pakket-fields, .link-cards.n3, .link-cards.n2 { grid-template-columns: 1fr; }
  .stairs li, .fields li, .pakket-fields > li { padding-top: 2rem !important; }
  .rol.flip .stage { order: 0; }
  .tiles > li, .tiles > li:nth-child(n) { grid-column: span 6; }
  .tiles > li:nth-child(n) .stage { aspect-ratio: 4 / 5; }
  .lineup .who:nth-child(n + 6) { display: none; }
  .lineup img { height: clamp(11rem, 44vw, 18rem); margin-inline: -3%; }
  .lineup .behind { font-size: 21vw; }
}
@media (max-width: 36rem) {
  .core-stages, .dept-grid { grid-template-columns: 1fr; }
  .tiles > li, .tiles > li:nth-child(n) { grid-column: span 12; }
  .actions .btn { flex: 1 1 100%; }
  .bubbles li { max-width: 100%; }
}

/* Fixronde 1 */
.p-pricing .hero-sub h1 { max-width: 26ch; font-size: clamp(2.25rem, 4.2vw, 3.875rem); }

/* ===== Extremer: grotere typografie, stickers, donker slot met schermbreed logo, scroll-animaties ===== */
.h-xl { font-size: clamp(2.75rem, 7.4vw, 7.25rem); max-width: 13ch; font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; }
.h-l { font-size: clamp(2.25rem, 5.2vw, 4.75rem); max-width: 17ch; letter-spacing: -0.04em; }
.bubbles li { font-size: clamp(1.125rem, 1.6vw, 1.4375rem); }
.bubbles li:nth-child(odd) { transform: rotate(-1.2deg); }
.bubbles li:nth-child(even) { transform: rotate(1.4deg); }

/* Line-up: Monkey komt omhoog en krijgt een sticker met naam en rol. */
.lineup img { margin-inline: 0; transition: transform 320ms var(--ease-out); transform-origin: 50% 100%; }
.lineup .who { position: relative; display: flex; align-items: flex-end; margin-inline: -1.5%; }
.lineup .tag { position: absolute; left: 50%; top: -0.5rem; z-index: 3; padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--licht); color: var(--ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.15; white-space: nowrap; opacity: 0; transform: translate(-50%, 0.75rem) rotate(-5deg) scale(0.85); transition: opacity 180ms ease, transform 300ms var(--ease-out); pointer-events: none; }
.lineup .tag strong { display: block; font-weight: 900; font-size: 1rem; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .lineup .who:hover { z-index: 2; }
  .lineup .who:hover img { transform: translateY(-4%) scale(1.06); }
  .lineup .who:hover .tag { opacity: 1; transform: translate(-50%, 0) rotate(-5deg) scale(1); }
}

/* Footer: schermvullend donker. Logo bovenaan, dan de afsluitende vraag van de pagina met de demoknop, dan de links. */
.site-footer { background: var(--ink); color: var(--white); min-height: 100dvh; display: flex; padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; }
.site-footer .wrap { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); }
.footer-brand { align-self: flex-start; }
.footer-logo { width: clamp(11rem, 22vw, 20rem); height: auto; }
.footer-cta { margin-block: auto; }
.footer-cta h2 { font-size: clamp(2.5rem, 6.6vw, 6.75rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.92; max-width: 14ch; }
.footer-cta p { margin-block: 1.75rem 2.25rem; max-width: 40rem; font-size: clamp(1.125rem, 1.5vw, 1.375rem); color: rgba(253, 254, 255, 0.9); }
.footer-cta .btn { border-radius: 999px; min-height: 4.25rem; padding-inline: 2.75rem; font-size: 1.3125rem; font-weight: 800; background: var(--lime); color: var(--ink); }
.site-footer .about p { margin-top: 0.75rem; }
.site-footer .promise { margin-top: 0 !important; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.site-footer .links a { font-size: 1rem; }

/* Tussenzin onder de hero: compacte donkere band. */
.statement { background: var(--ink); color: var(--white); }
.statement .inner { padding-block: clamp(2.5rem, 5vw, 4rem); }
.statement p { font-size: clamp(1.375rem, 2.5vw, 2.25rem); font-weight: 700; max-width: 38ch; line-height: 1.2; letter-spacing: -0.025em; }

/* Blok 2: kop groot, inleiding duidelijk, vervolg klein. De chatberichten krijgen de ruimte. */
.probleem .two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.probleem-copy { position: sticky; top: 7rem; }
.probleem-copy .lead-ink { margin-top: 2rem; font-size: clamp(1.25rem, 1.65vw, 1.5rem); font-weight: 600; line-height: 1.4; color: var(--ink); }
.probleem-copy .small { margin-top: 1.25rem; font-size: 1rem; color: var(--muted); max-width: 46ch; }
.bubbles { gap: 1rem; padding-top: 0.5rem; }
.bubbles li { position: relative; padding: 1.375rem 1.875rem; font-size: clamp(1.1875rem, 1.7vw, 1.5rem); border-radius: 1.75rem 1.75rem 1.75rem 0.375rem; }
.bubbles li:nth-child(even) { border-radius: 1.75rem 1.75rem 0.375rem 1.75rem; }

.poster { font-weight: 900; text-transform: uppercase; font-size: clamp(2.75rem, 8.4vw, 9rem); line-height: 0.9; letter-spacing: -0.045em; max-width: none; text-wrap: balance; }

/* Monkey-showcase: Monkey in het midden op eigen kleur, functie reusachtig erachter, naam als sticker, links expertise, rechts wat het oplevert. */
.showcase { position: relative; isolation: isolate; overflow: hidden; min-height: max(100dvh, 48rem); display: flex; flex-direction: column; justify-content: space-between; color: var(--fg); background: #6A2E9E; transition: color 500ms ease; }
.sc-slide { position: absolute; inset: 0; z-index: -1; display: flex; background: var(--bg); color: var(--fg); visibility: hidden; }
.sc-slide.is-active { visibility: visible; z-index: 0; }
.sc-slide.is-leaving { visibility: visible; z-index: -1; }
.sc-rol { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 21vh; text-align: center; font-weight: 900; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.045em; white-space: nowrap; color: var(--licht); font-size: min(calc(94vw / (var(--l) * 0.64)), 27vh); user-select: none; }
.sc-rol .line { display: block; overflow: hidden; padding-block: 0.05em; margin-block: -0.05em; }
.sc-rol .line > span { display: block; }
.sc-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 3.5rem); width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sc-fig { position: relative; align-self: end; margin: 0; display: flex; justify-content: center; }
.sc-fig img { height: min(80dvh, 50rem); width: auto; max-width: none; transform-origin: 50% 100%; }
.sc-naam { position: absolute; left: 70%; top: 30%; display: flex; flex-direction: column; padding: 0.625rem 1.125rem; border-radius: 1.25rem; background: var(--white); color: var(--ink); line-height: 1.15; white-space: nowrap; transform: rotate(5deg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); }
.sc-naam strong { font-weight: 900; font-size: clamp(1.125rem, 1.6vw, 1.5rem); text-transform: uppercase; letter-spacing: -0.02em; }
.sc-naam span { font-size: 0.875rem; font-weight: 600; }
.sc-card { max-width: 23rem; margin-top: 36vh; padding: clamp(1.25rem, 2vw, 2rem); border-radius: var(--r); background: var(--licht); color: var(--ink); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); }
.sc-left { justify-self: end; transform: rotate(-2deg); }
.sc-right { justify-self: start; transform: rotate(2deg); }
.sc-card h3 { font-size: 0.875rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.sc-card p { margin-top: 0.625rem; font-size: clamp(1rem, 1.25vw, 1.1875rem); font-weight: 600; line-height: 1.4; }
.showcase .hero-bar { z-index: 3; padding-block: 0 2rem; margin-top: auto; max-width: none; }
.showcase :focus-visible { outline-color: var(--lime); }
.sc-kop { position: relative; z-index: 3; padding-top: clamp(6.5rem, 12vh, 8rem); text-align: center; }
.sc-kop h1 { display: inline-block; padding: 0.4em 0.75em 0.32em; font-weight: 900; font-size: clamp(1rem, 1.75vw, 1.625rem); text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.05; background: var(--lime); color: var(--ink); transform: rotate(-1.6deg); }

/* Wissel en binnenkomst: kleur opent als cirkel vanaf de Monkey, de functie schuift regel voor regel omhoog, de kaarten komen van links en rechts. */
.sc-slide.is-entering { animation: sc-wipe 1100ms cubic-bezier(0.77, 0, 0.175, 1) both; }
.sc-slide.is-active .sc-rol .line > span { animation: hero-rise 900ms var(--ease-out) both; animation-delay: calc(260ms + var(--i) * 90ms); }
.sc-slide.is-active .sc-fig img { animation: sc-step 1000ms var(--ease-out) 220ms both; }
.sc-slide.is-active .sc-left { animation: sc-in-left 800ms var(--ease-out) 480ms both; }
.sc-slide.is-active .sc-right { animation: sc-in-right 800ms var(--ease-out) 560ms both; }
.sc-slide.is-active .sc-naam { animation: sc-pop 600ms var(--ease-out) 760ms both; }
.sc-slide.is-leaving .sc-fig img { animation: sc-sink 450ms var(--ease-out) both; }
@keyframes sc-wipe { from { clip-path: circle(0% at 50% 58%); } to { clip-path: circle(120% at 50% 58%); } }
@keyframes sc-step { from { opacity: 0; transform: translateY(7%) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes sc-sink { to { opacity: 0; transform: translateY(3%) scale(0.98); } }
@keyframes sc-in-left { from { opacity: 0; transform: translateX(-4rem) rotate(-9deg); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes sc-in-right { from { opacity: 0; transform: translateX(4rem) rotate(9deg); } to { opacity: 1; transform: rotate(2deg); } }
@keyframes sc-pop { from { opacity: 0; transform: rotate(-12deg) scale(0.6); } to { opacity: 1; transform: rotate(5deg) scale(1); } }

@media (max-width: 60rem) {
  .probleem .two { grid-template-columns: 1fr; }
  .probleem-copy { position: static; }
  .showcase { min-height: max(100dvh, 66rem); }
  .sc-rol { justify-content: flex-start; padding-top: 13.5rem; font-size: min(calc(92vw / (var(--l) * 0.66)), calc(16dvh / var(--rows))); }
  .sc-slide { align-items: flex-end; }
  .sc-grid { grid-template-columns: 1fr; gap: 0.625rem; padding-bottom: 7.5rem; }
  .sc-fig { order: -1; }
  .sc-fig img { height: 40dvh; }
  .showcase .hero-bar { bottom: 1.5rem; }
  .sc-naam { left: auto; right: -0.5rem; top: -9%; padding: 0.5rem 0.875rem; }
  .sc-naam strong { font-size: 1rem; }
  .sc-naam span { font-size: 0.75rem; }
  .sc-card { max-width: none; margin-top: 0; padding: 1rem 1.125rem; justify-self: stretch; transform: none !important; animation-name: sr-none !important; }
  .sc-card p { font-size: 0.9375rem; margin-top: 0.375rem; }
  .sc-kop { padding-top: 7.5rem; }
}

@media (max-width: 60rem) {
  .bubbles li { transform: none !important; }
  .site-footer { min-height: 0; }
}

/* Scroll-animaties (CSS scroll-driven, geen JavaScript). Zonder ondersteuning of bij "verminder beweging" staat alles gewoon stil op zijn plek. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .plain h2, .block h2:not(.poster), .statement p, .bubbles li, .stap, .reviews > li, .pakket-fields > li, .tiles > li, .dept-grid li, .link-cards li, .core-stages .stage, .rol-grid .stage, .start-grid > div {
      animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 26%;
    }
    .bubbles li:nth-child(odd) { animation-name: sr-left; }
    .bubbles li:nth-child(even) { animation-name: sr-right; }
    .stairs li:nth-child(2), .fields li:nth-child(2), .pakket-fields > li:nth-child(2) { animation-range: entry 8% cover 32%; }
    .stairs li:nth-child(3), .fields li:nth-child(3), .pakket-fields > li:nth-child(3) { animation-range: entry 16% cover 38%; }
    @keyframes sr-rise { from { opacity: 0; transform: translateY(4.5rem); } to { opacity: 1; transform: none; } }
    @keyframes sr-left { from { opacity: 0; transform: translateX(-5rem) rotate(-7deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
    @keyframes sr-right { from { opacity: 0; transform: translateX(5rem) rotate(8deg); } to { opacity: 1; transform: rotate(1.4deg); } }

    /* Het grote woord schuift achter de Monkeys langs, de Monkeys komen omhoog. */
    .lineup .who { animation: sr-up linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes sr-drift { from { transform: translateX(-42%); } to { transform: translateX(-58%); } }
    @keyframes sr-up { from { transform: translateY(35%); } to { transform: none; } }

    .footer-cta h2, .footer-cta p, .poster { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}

/* Monkey naast tekst in een auto-kolom: max-width in procenten maakt die kolom 0 breed. */

/* ===== Ronde 4: nieuwe hero-opbouw, klantenbalk, kanalen, stappen met beeld, pakketiconen, reviews, footer op één scherm ===== */

/* Hero: eerste zin klein in de strook, tweede zin reusachtig eronder met strakke spatiëring. */
.hero-x h1 { display: flex; flex-direction: column; align-items: flex-start; }
.hero-x .strip { order: -1; margin: 0 0 0.75em -0.15em; font-size: clamp(1rem, 1.85vw, 1.875rem); }
.hero-x .mega { font-size: min(9.6vw, 16vh); letter-spacing: -0.06em; line-height: 0.86; }
.hero-x .lead { margin-top: clamp(1rem, 2.4vh, 1.75rem); }
.hero-x .actions { margin-top: 1.5rem; }
.hero-x .line:nth-child(3) > span { animation-delay: 180ms; }
.hero-x .strip { animation-delay: 60ms; }

/* Klantenbalk: witte balk, logo's in de donkere huisstijlkleur (masker, dus altijd één kleur). */
.klantenbalk { background: var(--white); padding-block: clamp(1.75rem, 3vw, 2.75rem); border-bottom: 1px solid var(--line); }
.klantenbalk ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem clamp(2.5rem, 8vw, 8rem); }
.klantlogo { --h: calc((2rem + 3.4rem / var(--ratio)) * var(--schaal, 1)); display: block; height: var(--h); width: calc(var(--h) * var(--ratio)); background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

/* Kanalen: de tussenzin gecentreerd, met zwevende tegels van de kanalen eromheen. */
.kanalen { background: var(--ink); color: var(--white); }
.kanalen .inner { position: relative; display: grid; place-items: center; min-height: clamp(30rem, 78vh, 46rem); text-align: center; }
.kanalen .inner > * + * { margin-top: 0; }
.kanalen-tekst { position: relative; z-index: 1; max-width: 21ch; font-size: clamp(1.75rem, 3.7vw, 3.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; }
.kanalen-noot { position: absolute; left: 0; right: 0; bottom: 1.25rem; max-width: none; }
.zwevers li { position: absolute; display: grid; place-items: center; width: clamp(3.75rem, 6.4vw, 6rem); aspect-ratio: 1; border-radius: 28%; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); transition: transform 300ms var(--ease-out); animation: zweef 6s ease-in-out infinite alternate; }
.zwevers svg { width: 50%; height: 50%; }
.zwevers .z0 { left: 8%; top: 16%; rotate: -12deg; background: var(--lime); color: var(--ink); }
.zwevers .z1 { right: 9%; top: 12%; rotate: 10deg; background: var(--purple); color: var(--white); animation-duration: 7.5s; animation-delay: -2s; }
.zwevers .z2 { left: 15%; bottom: 14%; rotate: 9deg; background: var(--white); color: var(--ink); animation-duration: 5.5s; animation-delay: -1s; width: clamp(3rem, 5vw, 4.75rem); }
.zwevers .z3 { right: 15%; bottom: 17%; rotate: -8deg; background: var(--mist); color: var(--ink); animation-duration: 8s; animation-delay: -3s; }
.zwevers .z4 { left: 47%; top: 7%; rotate: 6deg; background: var(--lime); color: var(--ink); animation-duration: 6.5s; animation-delay: -4s; width: clamp(2.75rem, 4.2vw, 4rem); }
@keyframes zweef { from { translate: 0 -0.625rem; } to { translate: 0 0.625rem; } }
@media (hover: hover) and (pointer: fine) { .zwevers li:hover { transform: scale(1.12); } }

/* Blok 3: titel groot bovenaan, daaronder tekst links en de chatberichten rechts. */
.probleem .h-xl { max-width: 15ch; }
.probleem .two { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.probleem-copy .lead-ink { margin-top: 0; }

.btn.btn-ink { background: var(--ink); color: var(--white); }

/* Blok 5: drie echte stappen. Groot nummer, tekst, beeld. De kaarten stapelen over elkaar bij het scrollen. */
.stappen { display: grid; gap: 1.5rem; margin-block: clamp(2.5rem, 5vw, 4rem) 2.5rem !important; }
.stap { position: sticky; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: clamp(24rem, 62vh, 34rem); border-radius: var(--r); overflow: hidden; box-shadow: 0 -10px 40px rgba(29, 29, 27, 0.12); }
.stap.s1 { top: 5.5rem; background: var(--mist); }
.stap.s2 { top: 7rem; background: var(--purple); color: var(--white); }
.stap.s3 { top: 8.5rem; background: var(--ink); color: var(--white); }
.stap-tekst { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.75rem, 3.5vw, 3.5rem); }
.stap .num { font-weight: 900; font-size: clamp(5rem, 12vw, 12rem); line-height: 0.8; letter-spacing: -0.06em; color: var(--purple); }
.stap.s2 .num, .stap.s3 .num { color: var(--lime); }
.stap p { max-width: 24ch; font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.stap figure { margin: 0; min-height: 16rem; background: var(--mist); }
.stap img { width: 100%; height: 100%; object-fit: cover; }
.stap.s3 img { object-position: 0 0; }

/* Blok 6: de Monkeys staan echt vóór het woord. */
.lineup { padding-top: clamp(1.25rem, 3.4vw, 3.5rem); }
.lineup .behind { font-size: clamp(4.5rem, 21vw, 21rem); }
.lineup.crowd { padding-top: clamp(1.5rem, 4vw, 4rem); }

/* Blok 8: sfeerbeeld met meerdere ondernemers, tekstkaart eroverheen. */
.sfeer { display: grid; place-items: center; aspect-ratio: 21 / 9; min-height: 20rem; width: 100%; padding: 2rem; text-align: center; border-radius: var(--r); background: var(--mist); border: 3px dashed rgba(29, 29, 27, 0.3); }

/* Blok 9: pakketten met icoon, zoals op de pricingpagina. */
.pakket-icoon { display: grid; place-items: center; width: 4.25rem; aspect-ratio: 1; border-radius: 1.375rem; background: var(--purple); color: var(--white); rotate: -5deg; }
.pakket-icoon svg { width: 56%; height: 56%; }
.f-publish .pakket-icoon, .f-grow .pakket-icoon { background: var(--lime); color: var(--ink); }
.f-publish .pakket-icoon { rotate: 4deg; }
.pricing-teaser .f-create { background: var(--white); }
.pricing-teaser .pakket-fields { margin-top: 3rem !important; }
.start-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; max-width: none; padding: 1.25rem 1.75rem; border-radius: var(--r); background: var(--lime); font-size: 1.1875rem; }
.start-regel strong { font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; }
.start-regel span { font-weight: 800; }
.start-regel .btn { margin-left: auto; }

/* Blok 10: succesverhalen als reviews. Foto, logo, sterren en quote. Alles blijft gemarkeerd tot de klant akkoord is. */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 3rem 2.5rem !important; }
.reviews > li { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--r); background: var(--mist); }
.reviews > li:nth-child(2) { background: var(--purple); color: var(--white); }
.reviews > li:nth-child(2) .klantlogo { background: var(--white); }
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-foto { flex: none; display: grid; place-items: center; width: 5.5rem; aspect-ratio: 1; padding: 0.25rem; border-radius: 50%; text-align: center; border: 2px dashed currentColor; }
.review-foto .open-note { font-size: 0.5625rem; padding: 0.125rem 0.25rem; }
.reviews .klantlogo { --h: calc(1.5rem + 2.4rem / var(--ratio)); }
.sterren { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 1.625rem; letter-spacing: 0.12em; line-height: 1; color: color-mix(in srgb, currentColor 30%, transparent); }
.sterren .open-note { letter-spacing: 0; }
.reviews blockquote { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.review-naam { margin-top: auto; }

/* Footer: precies één scherm. Logo groot in het midden, daaronder de vraag klein met één knop, onderaan de links. */
.site-footer { height: 100dvh; min-height: 38rem; padding-block: clamp(4.5rem, 9vh, 6rem) 1.5rem; }
.site-footer .wrap { align-items: center; justify-content: space-between; gap: 1.5rem; text-align: center; }
.footer-mid { display: flex; flex-direction: column; align-items: center; margin-block: auto; }
.footer-brand { align-self: center; }
.footer-logo { width: min(60vw, 84vh, 64rem); }
.footer-mid h2 { margin-top: clamp(1.25rem, 3.5vh, 2.5rem); max-width: 30ch; font-size: clamp(1.25rem, 2.1vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.footer-mid p { margin-top: 0.875rem; max-width: 40rem; font-size: 1rem; line-height: 1.5; color: rgba(253, 254, 255, 0.72); }
.footer-mid .btn { margin-top: clamp(1.25rem, 3vh, 2rem); border-radius: 999px; min-height: 4rem; padding-inline: 2.75rem; font-size: 1.25rem; font-weight: 800; background: var(--lime); color: var(--ink); }
.site-footer .links { columns: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; font-weight: 600; }
.site-footer .links a { font-size: 0.9375rem; padding-block: 0.25rem; }
.footer-intro { max-width: none; font-size: 0.8125rem; color: rgba(253, 254, 255, 0.55); }
@media (max-height: 46rem) { .footer-mid p { display: none; } }

@media (max-width: 60rem) {
  .hero-x .mega { font-size: min(12.6vw, 5.5rem); }
  .hero-x .strip { display: inline-block; font-size: clamp(0.9375rem, 4.2vw, 1.375rem); margin-bottom: 0.875em; }
  .kanalen .inner { min-height: 32rem; }
  .zwevers .z0 { left: 4%; top: 7%; } .zwevers .z1 { right: 4%; top: 9%; } .zwevers .z2 { left: 6%; bottom: 9%; } .zwevers .z3 { right: 6%; bottom: 11%; } .zwevers .z4 { display: none; }
  .stap { position: static; grid-template-columns: 1fr; min-height: 0; }
  .stap figure { order: -1; aspect-ratio: 16 / 10; min-height: 0; }
  .reviews { grid-template-columns: 1fr; }
  .sfeer { aspect-ratio: 4 / 3; }
  .start-regel .btn { margin-left: 0; }
  .site-footer { height: auto; min-height: 100dvh; }
  .footer-logo { width: min(82vw, 30rem); }
}
@media (prefers-reduced-motion: reduce) { .zwevers li { animation: none; } }

/* ===== Ronde 5 ===== */

/* Klantenbalk loopt mee als band, tegen de richting van de hero-band in. */
.klantenbalk { overflow: hidden; padding-block: clamp(1.5rem, 2.6vw, 2.5rem); }
.klanten-track { display: flex; align-items: center; gap: clamp(3rem, 7vw, 7rem); width: max-content; padding-right: clamp(3rem, 7vw, 7rem); animation: hero-band 60s linear infinite reverse; }
.klanten-track .klantlogo { flex: none; }
@media (hover: hover) and (pointer: fine) { .klantenbalk:hover .klanten-track { animation-play-state: paused; } }
.hero-band span { padding-inline: 0.9em; }

/* Stappen: nummer reusachtig in de hoek als tint van de blokkleur, zodat tekst en beeld de aandacht houden. Eerste blok lime. */
.stap { isolation: isolate; }
.stap .num { position: absolute; z-index: -1; top: -0.13em; left: -0.05em; font-size: clamp(11rem, 27vw, 27rem); line-height: 0.8; letter-spacing: -0.07em; pointer-events: none; }
.stap.s1 { background: var(--lime); color: var(--ink); }
.stap.s1 .num { color: color-mix(in srgb, var(--lime) 72%, var(--ink)); }
.stap.s2 .num { color: color-mix(in srgb, var(--purple) 78%, var(--white)); }
.stap.s3 .num { color: color-mix(in srgb, var(--ink) 84%, var(--white)); }
.stap-tekst { justify-content: flex-end; }
.stap p { max-width: 22ch; font-size: clamp(1.375rem, 2.2vw, 2rem); }
/* Stap 3: het dashboard volledig in beeld, niet beeldvullend. */
.stap.s3 figure { display: grid; place-items: center; padding: clamp(1rem, 2.5vw, 2.5rem); background: transparent; }
.stap.s3 img { width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 0.875rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }

/* Teamblok: het woord over de volle breedte, precies in het midden, als tint van zwart. */
.lineup .behind { left: 50%; transform: translateX(-50%); font-size: 22.4vw; color: color-mix(in srgb, var(--ink) 80%, var(--white)); }
.lineup { padding-top: clamp(1.5rem, 4.4vw, 4.75rem); }
.team .inner, .hero-team-page .inner { overflow: visible; }


/* Reviews: sterren, quote, ondernemer met logo. Het label "Voorbeeld" blijft tot de tekst door de klant is goedgekeurd. */
.reviews > li { position: relative; gap: 1.5rem; }
.voorbeeld { position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.5rem; font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: #FFF3B8; border: 1px dashed rgba(29, 29, 27, 0.5); }
.sterren { gap: 0; font-size: 1.75rem; letter-spacing: 0.1em; color: var(--purple); }
.sterren span { color: color-mix(in srgb, currentColor 28%, transparent); }
.reviews > li:nth-child(2) .sterren { color: var(--lime); }
.reviews blockquote { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.review-wie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.review-foto { display: grid; place-items: center; width: 3.25rem; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--white); font-weight: 800; font-size: 1rem; }
.reviews > li:nth-child(2) .review-foto { background: var(--lime); color: var(--ink); }
.review-wie p { display: flex; flex-direction: column; line-height: 1.25; max-width: none; }
.review-wie p span { font-size: 0.875rem; opacity: 0.8; }
.reviews .klantlogo { --h: calc((1.25rem + 2rem / var(--ratio)) * var(--schaal, 1)); }

@media (max-width: 60rem) {
  .stap .num { font-size: clamp(8rem, 40vw, 13rem); top: auto; bottom: -0.1em; left: auto; right: -0.04em; }
  .stap.s3 figure { aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) { .klanten-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }

/* ===== Ronde 5b: hero met schermvullende foto's van ondernemers ===== */
.hero-foto .hero-bgs { z-index: -1; }
.hero-foto .hero-bg { margin: 0; overflow: hidden; }
.hero-foto .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 78% 30%; }
/* Waas in een donkere merkkleur: links dicht voor de tekst, rechts open voor de ondernemer; onderaan donker voor de band. */
.hero-foto .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 34%, color-mix(in srgb, var(--bg) 40%, transparent) 56%, transparent 74%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 85%, transparent), transparent 30%); }
.hero-foto .hero-band { z-index: 1; background: rgba(0, 0, 0, 0.32); color: var(--lime); }
.hero-foto .hero-bg.is-entering { animation-name: hero-wipe-foto; }
.hero-foto .hero-bg.is-active img { animation: hero-zoom 1600ms var(--ease-out) both; }
@keyframes hero-wipe-foto { from { clip-path: circle(0% at 78% 45%); } to { clip-path: circle(160% at 78% 45%); } }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 60rem) {
  /* Mobiel: tekst boven, de ondernemer met gezicht in beeld in de onderste helft. */
  .hero-foto .hero-bg img { inset: auto 0 0 0; height: 50%; object-position: 80% 10%; }
  .hero-foto .hero-bg::after { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 50%, color-mix(in srgb, var(--bg) 55%, transparent) 58%, transparent 70%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 80%, transparent), transparent 18%); }
  .hero-foto .hero-spacer { height: 46dvh; }
}
@media (prefers-reduced-motion: reduce) { .hero-foto .hero-bg.is-active img { animation: none; } }

/* ===== Ronde 6: strook met icoon en beroep, klantlogo's onderaan het eerste scherm ===== */
.hero-x .strip { display: inline-flex; align-items: center; overflow: hidden; }
.strip-icoon { flex: none; width: 1.15em; height: 1.24em; margin: -0.2em 0.45em -0.12em 0; background: currentColor; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.strip-rol { display: inline-block; }
.strip-rol::before { content: attr(data-rol) ",\00a0"; }

/* De hero laat onderaan precies ruimte voor de logostrook, zodat beide in het eerste scherm vallen. */
.hero-foto { --klanten-h: clamp(6.5rem, 14vh, 8.5rem); min-height: max(calc(100dvh - var(--klanten-h)), 40rem); }
.hero-foto .hero-bar { padding-bottom: clamp(1.25rem, 3vh, 2rem); }

/* Klanten: alleen de logo's, op één middenlijn, binnen de paginabreedte, met uitfadende randen. */
.klantenbalk { padding-block: 0; box-shadow: inset 0 -1px 0 var(--line); }
.klantenbalk .wrap { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; min-height: clamp(6.5rem, 14vh, 8.5rem); padding-block: 1rem; }
.klanten-venster { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.klanten-track { align-items: center; height: 3.25rem; gap: clamp(3rem, 6vw, 6rem); padding-right: clamp(3rem, 6vw, 6rem); animation-duration: 70s; }
.klanten-track .klantlogo { --h: calc((1.35rem + 2.5rem / var(--ratio)) * var(--schaal, 1)); align-self: center; }
@media (max-width: 60rem) {
  .hero-foto { min-height: 100dvh; }
  .strip-rol::before { white-space: normal; }
  .hero-x .strip { display: inline-block; }
  .strip-icoon { display: inline-block; vertical-align: -0.2em; }
}
@media (min-width: 60.0625rem) {
  /* Bediening rechtsonder, sticker erboven: zo eindigt de hero bij de knoppen en past de logostrook in het eerste scherm. */
  .hero-foto { padding-top: clamp(5.75rem, 11vh, 7.5rem); }
  .hero-foto .mega { font-size: min(9.6vw, 14.2vh); }
  .hero-foto .hero-copy { padding-bottom: clamp(1.5rem, 4vh, 2.75rem); }
  .hero-foto .hero-spacer { display: none; }
  .hero-foto .hero-bar { position: absolute; right: 0; bottom: 0; width: auto; margin: 0; padding: 0 var(--gutter) clamp(1rem, 2.5vh, 1.75rem); }
}

/* ===== Ronde 7: V4-copy (social media als kern), echte ondernemers in de hero, nieuwe blokken en pagina's ===== */

/* Hero: de eerste vraag reusachtig in drie regels, de tweede vraag in de scheve strook eronder. Uitsnede per foto via --pos. */
.hero-x .strip { order: 0; margin: 0.5em 0 0 -0.12em; font-size: clamp(1.25rem, 2.5vw, 2.625rem); animation-delay: 420ms; }
.hero-x .lead { max-width: 40rem; }
.hero-foto .hero-bg img { object-position: var(--pos, 78% 30%); }
.hero-bar { display: flex; align-items: center; gap: 0.875rem; }
/* Welk bedrijf er op de foto staat: wisselt mee met de slide. */
.hero-wie { display: inline-flex; align-items: center; gap: 0.5rem; max-width: none; overflow: hidden; padding: 0.7em 1.1em 0.6em; border-radius: 999px; background: color-mix(in srgb, var(--ink) 58%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.03em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.hero-wie::before { content: ""; flex: none; width: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--lime); }
.hero-wie [data-sl-naam] { display: inline-block; }
@media (min-width: 60.0625rem) {
  .hero-foto .mega { font-size: min(9vw, 12.6vh); }
}
@media (min-width: 60.0625rem) and (max-height: 50rem) {
  .hero-foto .lead { font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 60rem) {
  .hero-x .mega { font-size: min(11.4vw, 5.25rem); }
  .hero-x .strip { display: inline-block; margin: 0.6em 0 0; font-size: clamp(1.0625rem, 5vw, 1.5rem); }
  /* De foto hoort bij de vrije ruimte onder de tekst: het gezicht valt nooit achter de knoppen. */
  .hero-foto { --foto-h: 42dvh; }
  .hero-foto .hero-spacer { height: var(--foto-h); }
  .hero-foto .hero-bg img { inset: auto 0 0 0; height: calc(var(--foto-h) + 3.5rem); object-position: var(--pos-m, 90% 0); }
  .hero-foto .hero-bg::after { background: linear-gradient(0deg, transparent calc(var(--foto-h) - 1.5rem), var(--bg) calc(var(--foto-h) + 3.5rem)), linear-gradient(0deg, color-mix(in srgb, var(--bg) 82%, transparent), transparent 9rem); }
  /* Bedrijfslabel boven de pijltjes, links. */
  .hero-bar { flex-direction: column; align-items: flex-start; gap: 0.625rem; bottom: 1.5rem; }
}

.vink { flex: none; display: grid; place-items: center; width: 1.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--lime); }
.vink svg { width: 58%; height: 58%; }

/* Kanalen: eerste zin groot, tweede zin rustig eronder. */
.kanalen-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(1.25rem, 2.4vw, 2rem); }
.kanalen-tekst { max-width: 25ch; font-size: clamp(1.625rem, 3.2vw, 3.25rem); }
.kanalen-sub { max-width: 46ch; font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); font-weight: 600; line-height: 1.45; color: rgba(253, 254, 255, 0.78); }

/* Stappen: titel in kapitalen, uitleg eronder. */
.stap-tekst { gap: 0; }
.stap h3 { max-width: 12ch; font-weight: 900; font-size: clamp(1.75rem, 3.1vw, 2.875rem); line-height: 0.98; letter-spacing: -0.035em; text-transform: uppercase; }
.stap p { max-width: 32ch; margin-top: 1rem; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 600; line-height: 1.4; letter-spacing: 0; }

/* Monkeysblok: de lange kop over de volle breedte, tekst en knop eronder. */
.team-copy h2 { grid-column: 1 / -1; grid-row: auto; max-width: 21ch; text-wrap: balance; }
.team-copy .btn { align-self: end; }

/* Autoriteit: alleen typografie. Kop reusachtig links, tekst rechts, de slotzin als lime sticker. */
.autoriteit .two { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; }
.autoriteit .h-xl { max-width: 11ch; }
.autoriteit-copy > * + * { margin-top: 1.75rem; }
.autoriteit-copy .lead-ink { font-size: clamp(1.25rem, 1.65vw, 1.5rem); font-weight: 600; line-height: 1.4; color: var(--ink); }
.sticker-zin { display: inline-block; max-width: 25ch; padding: 0.75em 1.1em 0.65em; border-radius: 1.25rem 1.25rem 1.25rem 0.375rem; background: var(--lime); color: var(--ink); font-weight: 800; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.15; letter-spacing: -0.02em; transform: rotate(-1.6deg); }

/* Pakketten: Publish springt eruit (paars, opgetild, label "Meest gekozen"), Create en Grow zijn licht.
   Onderaan elk pakket: het Monkey-team als portretten en wat dezelfde disciplines in loondienst kosten. */
.pakket-fields { align-items: stretch; }
.pakket-fields > li { position: relative; padding-top: clamp(1.75rem, 2.6vw, 2.5rem) !important; }
.pakket-fields > .f-grow { background: var(--mist); color: var(--ink); }
.pricing-teaser .f-grow { background: var(--white); }
.f-grow .prijs { color: inherit; }
.f-grow .pakket-icoon { background: var(--purple); color: var(--white); rotate: -5deg; }
.f-grow .btn { background: var(--purple); color: var(--white); }
.f-grow .punten li::before { background: var(--purple); }
.f-grow :focus-visible { outline-color: var(--purple); }
.f-publish { box-shadow: 0 28px 60px rgba(46, 26, 74, 0.32); }
@media (min-width: 60.0625rem) {
  .pakket-fields { margin-block: 1.5rem; }
  .pakket-fields > .f-publish { margin-block: -1.5rem; padding-block: calc(clamp(1.75rem, 2.6vw, 2.5rem) + 1.5rem) !important; }
}
.pakket-label { position: absolute; top: -0.9rem; right: 1.5rem; padding: 0.55em 0.95em 0.45em; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 900; font-size: 0.875rem; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; transform: rotate(4deg); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
.pakket-fields .btn { margin-top: 0.5rem; }
.pakket-team { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.pakket-team .vast { margin-bottom: 0.875rem; font-weight: 800; }
.team-rij { --ring: var(--mist); display: grid; gap: 0.5rem; }
.pricing-teaser .team-rij { --ring: var(--white); }
.pakket-fields .f-publish .team-rij { --ring: var(--purple); }
/* Portretten schalen mee met de kaart, zodat ook negen Monkeys op één rij passen. */
.pakket-team { container-type: inline-size; }
.team-rij .stack .bust { --b: min(2.75rem, 13.4cqi); width: var(--b); border: 2px solid var(--ring); margin-right: calc(var(--b) * -0.25); }
.flex-rij { display: flex; align-items: center; gap: 0.5rem; }
.flex-rij .plus { font-weight: 900; font-size: 1.125rem; line-height: 1; }
.flex-rij .stack .bust { --b: min(2.125rem, 10.4cqi); opacity: 0.72; }
.team-tekst { margin-top: 0.875rem; font-size: 0.875rem; line-height: 1.4; opacity: 0.86; }
.loondienst { font-size: 0.9375rem; line-height: 1.4; }
.is-compact .loondienst { font-weight: 800; }
.pricing-teaser .start-regel { margin-top: 3.5rem !important; }
.pakketten .pakket-fields + p { margin-top: 3.5rem !important; }
.kleine-noot { max-width: 84ch; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }

/* Pricing: salarissen van losse functies op ink, het totaal als lime strook. */
.salarissen { background: var(--ink); color: var(--white); }
.salaris-lijst { max-width: 62rem; margin-top: clamp(2rem, 4vw, 3.5rem) !important; }
.salaris-lijst li { display: flex; align-items: baseline; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid rgba(253, 254, 255, 0.16); font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 600; }
.salaris-lijst .dots { flex: 1; }
.salaris-lijst strong { font-weight: 800; white-space: nowrap; }
.salaris-lijst .totaal { margin-top: 1.5rem; padding: 1.1rem 1.5rem 1rem; border: 0; border-radius: 1.25rem; background: var(--lime); color: var(--ink); font-weight: 900; font-size: clamp(1.25rem, 2.1vw, 1.875rem); letter-spacing: -0.02em; transform: rotate(-0.8deg); }
.salaris-lijst .totaal strong { font-weight: 900; }
.totaal-noot { margin-top: 1.5rem !important; font-weight: 600; color: rgba(253, 254, 255, 0.86); }
.salarissen .kleine-noot { color: rgba(253, 254, 255, 0.6); }

/* De Monkeys: uitbreidingen in ontwikkeling als open kaart over de volle breedte. */
.dept-grid .is-toekomst { background: transparent; border: 2px dashed rgba(29, 29, 27, 0.3); }
.dept-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.core .eyebrow, .afdelingen .eyebrow { margin-bottom: 1rem; color: var(--purple); }

/* Overige pagina's (Sections.astro): kleurvlakken, kop links en tekst rechts, lijsten en kaarten. */
.hero-page h1.is-lang { font-size: clamp(2.125rem, 5vw, 5.25rem); line-height: 0.94; max-width: 17em; }
.k-wit { background: var(--white); }
.k-mist { background: var(--mist); }
.k-purple { background: var(--purple); color: var(--white); }
.k-ink { background: var(--ink); color: var(--white); }
.k-lime { background: var(--lime); color: var(--ink); }
.sec .eyebrow { margin-bottom: 1rem; color: var(--purple); }
.k-purple .eyebrow, .k-ink .eyebrow { color: var(--lime); }
.k-lime .eyebrow { color: var(--ink); }
.sec .h-m.is-lang { font-size: clamp(1.875rem, 3.4vw, 3rem); max-width: 18ch; letter-spacing: -0.035em; }
.sec-copy > * + * { margin-top: 1.5rem; }
.k-purple .big, .k-ink .big { color: rgba(253, 254, 255, 0.9); }
.k-purple :focus-visible, .k-ink :focus-visible { outline-color: var(--lime); }
.sec-poster .inner { padding-block: clamp(3rem, 6vw, 5.5rem); }
.sec-open .inner { padding-block: clamp(2rem, 4vw, 3rem); }
.vinkjes { display: grid; gap: 0.875rem; }
.vinkjes li { display: flex; align-items: flex-start; gap: 0.875rem; font-weight: 700; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.35; }
.vinkjes .vink { margin-top: -0.1em; background: var(--purple); color: var(--white); }
.k-purple .vink, .k-ink .vink, .t-purple .vink, .t-ink .vink { background: var(--lime); color: var(--ink); }
.t-lime .vink { background: var(--ink); color: var(--lime); }
.lijsten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.lijsten.is-enkel { grid-template-columns: 1fr; }
.lijsten > * + * { margin-top: 0 !important; }
.lijst { border-radius: var(--r); padding: clamp(1.75rem, 3.2vw, 3rem); }
.lijst > * + * { margin-top: 1.75rem; }
.lijsten:not(.is-enkel) > .lijst:nth-child(2) { margin-top: clamp(0rem, 4vw, 4rem) !important; }
.t-lime { background: var(--lime); color: var(--ink); }
.t-purple { background: var(--purple); color: var(--white); }
.t-ink { background: var(--ink); color: var(--white); }
.t-mist { background: var(--mist); }
.t-purple :focus-visible, .t-ink :focus-visible { outline-color: var(--lime); }
.tags { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.tags li { padding: 0.65em 1.05em 0.55em; border-radius: 999px; background: var(--white); font-weight: 800; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1; }
.tags li:nth-child(3n + 1) { background: var(--purple); color: var(--white); rotate: -1.5deg; }
.tags li:nth-child(3n) { background: var(--lime); rotate: 1.5deg; }
.kaarten { display: grid; gap: 1rem; }
.kaarten.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kaarten.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaarten > li { border-radius: var(--r); padding: clamp(1.75rem, 2.6vw, 2.5rem); background: var(--mist); }
.k-mist .kaarten > li { background: var(--white); }
.kaarten > li > * + * { margin-top: 0.875rem; }
.kaarten h3 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.02; letter-spacing: -0.03em; }
.kaarten .eyebrow { margin-bottom: 0; }
.kaarten .sub { font-weight: 800; font-size: 1.125rem; line-height: 1.25; color: var(--purple); }
.kaarten p:not(.eyebrow):not(.sub) { opacity: 0.84; }
.kaarten.is-quote h3 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.08; }
.kaarten.is-quote > li:nth-child(4n + 2) { background: var(--purple); color: var(--white); }
.kaarten.is-quote > li:nth-child(4n + 3) { background: var(--ink); color: var(--white); }
.kaarten.is-quote > li:nth-child(4n + 4) { background: var(--lime); }
.kaarten.is-quote > li:nth-child(4n + 2) .eyebrow, .kaarten.is-quote > li:nth-child(4n + 3) .eyebrow { color: var(--lime); }
.kaarten.is-quote > li:nth-child(4n + 4) .eyebrow { color: var(--ink); }
.kaarten.is-groot p:not(.eyebrow) { max-width: 30ch; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; opacity: 1; }

@media (max-width: 60rem) {
  .autoriteit .two, .lijsten, .kaarten.n3, .kaarten.n2 { grid-template-columns: 1fr; }
  .lijsten:not(.is-enkel) > .lijst:nth-child(2) { margin-top: 0 !important; }
  .kanalen .inner { min-height: 38rem; }
  .salaris-lijst li { flex-wrap: wrap; gap: 0.125rem 1rem; }
  .salaris-lijst .dots { display: none; }
  .salaris-lijst li > span:first-child { flex: 1 1 100%; }
  .salaris-lijst .totaal { transform: none; }
  .sticker-zin { transform-origin: 50% 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lijst, .kaarten > li, .salaris-lijst li, .sticker-zin { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    .sticker-zin { animation-name: sr-sticker; }
    @keyframes sr-sticker { from { opacity: 0; transform: translateY(3rem) rotate(-7deg); } to { opacity: 1; transform: rotate(-1.6deg); } }
    .salaris-lijst .totaal { animation-name: sr-totaal; }
    @keyframes sr-totaal { from { opacity: 0; transform: translateY(3rem) rotate(-4deg); } to { opacity: 1; transform: rotate(-0.8deg); } }
  }
}

/* ===== Ronde 8: designpass na de klantmeeting (21-09-2026) ===== */

/* Foto's: het originele beeld met alleen een zwarte overlay. Geen kleurwaas, geen verloop.
   --ov per beeld (content.mjs), zo gekozen dat de witte tekst WCAG AA haalt. */
.hero-foto .hero-bg::after { background: rgba(0, 0, 0, var(--ov, 0.4)); }
@media (max-width: 60rem) {
  /* Mobiel staat de tekst op een effen donker vlak; de foto eronder krijgt dezelfde zwarte overlay, lichter omdat er geen tekst op staat. */
  .hero-foto .hero-bg img { height: var(--foto-h); }
  .hero-foto .hero-bg::after { inset: auto 0 0 0; height: var(--foto-h); background: rgba(0, 0, 0, 0.2); }
}


/* Stappen: de titel domineert, de uitleg is secundair (kleiner, minder contrast). */
.stap h3 { max-width: 11ch; font-size: clamp(2.125rem, 3.9vw, 3.625rem); line-height: 0.94; }
.stap p { max-width: 34ch; font-size: clamp(1rem, 1.15vw, 1.125rem); font-weight: 500; opacity: 0.76; }

/* Monkeysblok: het woord groter dan het scherm; het loopt aan beide kanten af. De sectie knipt af, dus geen horizontale scroll. */
.team { overflow: clip; }
.lineup .behind { font-size: 31vw; }
.lineup { padding-top: clamp(2.5rem, 8vw, 8.5rem); }
@media (max-width: 60rem) { .lineup .behind { font-size: 34vw; } }

/* Voorbeelden van posts: drie kolommen die continu langsschuiven, om en om omhoog en omlaag.
   De kolommen overlappen elkaar in de diepte; de middelste ligt bovenop. Zweven stopt bij hover. */
.voorbeelden { background: var(--mist); }
.voorbeelden .inner { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.vb-venster { --gat: clamp(1rem, 2vw, 1.75rem); position: relative; max-width: var(--wrap); height: clamp(36rem, 96vh, 60rem); margin-inline: auto; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); }
.vb-kolom { position: absolute; top: 0; width: 38%; }
.vb-kolom.k0 { left: 3%; }
.vb-kolom.k1 { left: 31%; z-index: 2; }
.vb-kolom.k2 { right: 3%; }
.vb-track { display: flex; flex-direction: column; animation: vb-schuif 46s linear infinite; will-change: transform; }
.vb-kolom.k1 .vb-track { animation-direction: reverse; animation-duration: 54s; }
.vb-kolom.k2 .vb-track { animation-duration: 62s; }
@keyframes vb-schuif { to { transform: translateY(-50%); } }
@media (hover: hover) and (pointer: fine) { .vb-venster:hover .vb-track { animation-play-state: paused; } }
.vb-post { position: relative; flex: none; margin: 0 0 var(--gat); overflow: hidden; border-radius: 1.5rem; background: var(--white); box-shadow: 0 18px 44px rgba(29, 29, 27, 0.2); }
.vb-kolom.k1 .vb-post { box-shadow: 0 28px 70px rgba(29, 29, 27, 0.32); }
.vb-kolom.k0 .vb-post:nth-child(odd), .vb-kolom.k2 .vb-post:nth-child(even) { rotate: -1.2deg; }
.vb-kolom.k0 .vb-post:nth-child(even), .vb-kolom.k2 .vb-post:nth-child(odd) { rotate: 1.2deg; }
.vb-post.vb-post { aspect-ratio: 4 / 5; }
.vb-post.vb-vierkant { aspect-ratio: 1; }
.vb-post.vb-reel { aspect-ratio: 9 / 16; }
.vb-post img, .vb-post video, .vb-leeg { display: block; width: 100%; height: 100%; object-fit: cover; }
.vb-post figcaption { position: absolute; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem 0.5rem 0.625rem; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 800; font-size: 0.8125rem; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.vb-post figcaption svg { width: 1.125rem; height: 1.125rem; }
/* Lege plek: effen huisstijlkleur met het Whoosh!-symbool als tint. */
.vb-leeg { position: relative; display: grid; place-items: center; }
.vb-leeg::before { content: ""; position: absolute; inset: 22%; background: currentColor; opacity: 0.12; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.vb-leeg b { position: relative; padding: 0.5em 0.9em 0.42em; border: 2px dashed currentColor; border-radius: 999px; font-weight: 900; font-size: 0.875rem; line-height: 1; text-transform: uppercase; opacity: 0.7; }
.c-purple { background: var(--purple); color: var(--white); }
.c-lime { background: var(--lime); color: var(--ink); }
.c-ink { background: var(--ink); color: var(--white); }
.c-white { background: var(--white); color: var(--ink); }
.c-mist { background: color-mix(in srgb, var(--mist) 60%, var(--ink) 8%); color: var(--ink); }
@media (max-width: 60rem) {
  .vb-venster { height: 40rem; }
  .vb-kolom { width: 60%; }
  .vb-kolom.k0 { left: var(--gutter); }
  .vb-kolom.k1 { left: auto; right: var(--gutter); }
  .vb-kolom.k2 { display: none; }
  .vb-post { border-radius: 1.125rem; }
  .vb-post figcaption { left: 0.625rem; top: 0.625rem; font-size: 0.6875rem; padding: 0.375rem 0.625rem 0.375rem 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* Stilstaand raster: geen beweging, geen overlap, de herhaling verborgen. */
  .vb-venster { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gat); padding: 0 var(--gutter) var(--pad); -webkit-mask-image: none; mask-image: none; }
  .vb-kolom, .vb-kolom.k0, .vb-kolom.k1, .vb-kolom.k2 { position: static; width: auto; display: block; }
  .vb-track { animation: none; }
  .vb-post { rotate: none !important; }
  .vb-post[aria-hidden="true"]:nth-child(n + 4) { display: none; }
}

/* Reviewblok: geen zichtbare titel. De kaarten staan symmetrisch in de paginabreedte, knop en notitie gecentreerd eronder. */
.succes .reviews { margin-top: 0 !important; }
.succes-voet { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }

/* Afsluiter: de vraag groot, alleen titel en knop. Het logo is kleiner geworden om ruimte te maken. */
.footer-logo { width: min(26vw, 30vh, 20rem); }
.footer-mid h2 { margin-top: clamp(1.5rem, 4vh, 3rem); max-width: 17ch; font-size: clamp(2.25rem, min(6.4vw, 9.5vh), 6.5rem); font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; text-transform: uppercase; text-wrap: balance; }
.footer-mid .btn { margin-top: clamp(1.5rem, 4vh, 2.75rem); }
@media (max-width: 60rem) { .footer-logo { width: min(48vw, 14rem); } }

/* ===== Ronde 9: Monkey-video's in de showcase ===== */
/* Het doek ligt precies over het stilstaande beeld. Zodra de video tekent (is-live) neemt het doek het over. */
.sc-beeld { position: relative; display: block; transform-origin: 50% 100%; }
.sc-beeld picture, .sc-beeld img { display: block; }
.sc-beeld canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sc-beeld.is-live canvas { opacity: 1; }
.sc-beeld.is-live img { visibility: hidden; }
/* De binnenkomst van de Monkey beweegt nu beeld en doek samen. */
.sc-slide.is-active .sc-fig img, .sc-slide.is-leaving .sc-fig img { animation: none; }
.sc-slide.is-active .sc-beeld { animation: sc-step 1000ms var(--ease-out) 220ms both; }
.sc-slide.is-leaving .sc-beeld { animation: sc-sink 450ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .sc-beeld { animation: none !important; } }

/* ===== Ronde 10: afronding na vergelijking met de klantmeeting ===== */
/* Kop met subregel: de tweede zin van een kop staat kleiner en rustiger onder de titel. */
.kop-groep { max-width: none; }
.kop-sub { margin-top: 0.5rem; max-width: 28ch; font-weight: 700; font-size: clamp(1.375rem, 2.5vw, 2.375rem); line-height: 1.1; letter-spacing: -0.03em; opacity: 0.66; }
.team-copy .kop-groep { grid-column: 1 / -1; }
/* Gereserveerde plekken (oneliner boven de reviews, contractvoorwaarden onder de pakketten): onzichtbaar zolang ze leeg zijn. */
.succes-intro:empty, .voorwaarden:empty { display: none; }
.succes-intro { max-width: 40ch; margin-inline: auto; text-align: center; font-weight: 700; font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; }
.succes-intro + .reviews { margin-top: clamp(2rem, 4vw, 3rem) !important; }
.pricing-teaser .voorwaarden { margin-top: 2.5rem !important; }
.pricing-teaser .voorwaarden + .start-regel { margin-top: 1.25rem !important; }
/* Ontbrekend Monkey-beeld zonder redactionele marker: alleen de initialen. */
.monkey-missing.is-stil::after { content: attr(data-i); font-weight: 900; font-size: clamp(2rem, 5cqi, 4rem); color: var(--licht); }
.stack .monkey-missing.is-stil::after { font-size: 1.125rem; font-weight: 800; }

/* ===== Ronde 11: voorbeeldenblok met tekst links en de schuivende posts rechts ===== */
/* Het venster loopt van de bovenkant tot de onderkant van het blok: geen witruimte en geen uitfaden, het blok knipt de kaarten af.
   De kaarten zijn kleiner dan voorheen; vorm, overlap en schaduw zijn gelijk gebleven. */
.vb-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; max-width: var(--wrap); height: clamp(36rem, 92vh, 54rem); margin-inline: auto; padding-inline: var(--gutter); }
.vb-copy { align-self: center; padding-block: 3rem; }
.vb-copy > * + * { margin-top: 2rem; }
.vb-venster { --gat: clamp(0.75rem, 1.4vw, 1.25rem); height: 100%; max-width: none; margin: 0; -webkit-mask-image: none; mask-image: none; overflow: visible; }
.voorbeelden { overflow: clip; }
.vb-kolom.k0 { left: 0; }
.vb-kolom.k1 { left: 31%; }
.vb-kolom.k2 { right: 0; }
.vb-post { border-radius: 1.125rem; box-shadow: 0 12px 30px rgba(29, 29, 27, 0.2); }
.vb-kolom.k1 .vb-post { box-shadow: 0 20px 48px rgba(29, 29, 27, 0.32); }
.vb-post figcaption { left: 0.625rem; top: 0.625rem; gap: 0.375rem; padding: 0.375rem 0.625rem 0.375rem 0.5rem; font-size: 0.6875rem; }
.vb-post figcaption svg { width: 0.9375rem; height: 0.9375rem; }
.vb-leeg b { font-size: 0.6875rem; }
/* Rechterkolom: label rechts, anders dekt de middelste kolom het af. */
.vb-kolom.k2 .vb-post figcaption { left: auto; right: 0.625rem; }
@media (max-width: 60rem) {
  .vb-layout { grid-template-columns: 1fr; gap: 0; height: auto; }
  .vb-copy { padding-block: var(--pad) 2.5rem; }
  /* Mobiel staat het venster onder de tekst: daar knipt het venster zelf af, zodat de kaarten niet over de tekst schuiven. */
  .vb-venster { height: 30rem; overflow: clip; }
  .vb-kolom.k0 { left: 0; }
  .vb-kolom.k1 { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vb-layout { height: auto; }
  .vb-venster { height: auto; padding: var(--pad) 0; overflow: visible; }
}

/* ===== Ronde 12: hero-kop in Gilroy Black, iets kleiner, -5% spatiëring; niets meer afgekapt ===== */
.hero-x .mega { font-weight: 850; letter-spacing: -0.05em; }
/* De regels zitten in een masker voor de binnenkomst. Door de negatieve spatiëring viel het laatste teken (het vraagteken) buiten dat masker. */
.hero-x .line { padding-right: 0.1em; }
@media (min-width: 60.0625rem) { .hero-foto .mega { font-size: min(8.2vw, 11.6vh); } }
@media (max-width: 60rem) { .hero-x .mega { font-size: min(10.6vw, 4.875rem); } }


/* ===== Ronde 13: Waaromblok = kanalenblok + de drie redenen, uitgelicht op scroll ===== */
/* overflow: clip in plaats van hidden: anders werkt position: sticky van het vaste blok niet. */
.waaromblok { overflow: clip; }
.waaromblok .inner { padding-bottom: clamp(2rem, 5vw, 4rem); }
.redenen-wrap { padding-bottom: var(--pad); }
/* De kop als scheve lime strook, zoals in de hero. */
.redenen-kop { max-width: none; }
.redenen-kop span { display: inline-block; margin-left: -0.1em; padding: 0.32em 0.6em 0.26em; background: var(--lime); color: var(--ink); font-weight: 900; font-size: clamp(1.125rem, 2vw, 2rem); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; transform: rotate(-2.2deg); transform-origin: 0 50%; }
.redenen { margin-top: clamp(1.5rem, 3vw, 3rem); }

/* Basis (mobiel, oudere browsers, "verminder beweging"): per reden de tekst met de kaart ernaast of eronder. */
.reden { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.reden-tekst p { max-width: 17ch; margin-top: 1.75rem; font-weight: 800; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.reden-icoon { display: grid; place-items: center; width: clamp(4rem, 6vw, 5.5rem); aspect-ratio: 1; border-radius: 28%; background: var(--lime); color: var(--ink); rotate: -6deg; transition: rotate 300ms var(--ease-out), scale 300ms var(--ease-out); }
.reden-icoon svg { width: 54%; height: 54%; }
.r-jaar .reden-icoon { background: var(--purple); color: var(--white); rotate: 5deg; }
.r-huisstijl .reden-icoon { background: var(--white); rotate: -4deg; }
.reden-beeld { display: grid; place-items: center; height: clamp(19rem, 46vh, 28rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); overflow: hidden; }
.reden-beeld > * { transition: transform 300ms var(--ease-out); }
.r-huisstijl .reden-beeld { background: var(--mist); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .reden-tekst:hover .reden-icoon { rotate: 8deg; scale: 1.1; }
  .reden-beeld:hover > * { transform: rotate(-1.5deg) scale(1.03); }
  .r-huisstijl .reden-beeld:hover .p0 { transform: rotate(-16deg) translate(-44%, 4%); }
  .r-huisstijl .reden-beeld:hover .p2 { transform: rotate(16deg) translate(44%, 4%); }
}

/* Prijs: de staaf van een eigen team tegenover één abonnement. */
/* Jaar: twaalf maanden die één voor één aan gaan. */
/* Huisstijl: drie posts in dezelfde stijl waaieren uit, met het kleurenpalet eronder. */
.v-stijl { display: grid; gap: 1.75rem; justify-items: center; width: 100%; }
.v-posts { position: relative; width: 38%; aspect-ratio: 4 / 5; }
.v-posts span { position: absolute; inset: 0; border-radius: 1rem; box-shadow: 0 12px 28px rgba(29, 29, 27, 0.22); transition: transform 300ms var(--ease-out); }
.v-posts span::after { content: ""; position: absolute; inset: 24%; background: currentColor; opacity: 0.22; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.v-posts .p0 { background: var(--lime); color: var(--ink); transform: rotate(-11deg) translate(-36%, 3%); }
.v-posts .p2 { background: var(--ink); color: var(--white); transform: rotate(11deg) translate(36%, 3%); }
.v-posts .p1 { background: var(--purple); color: var(--white); z-index: 1; }
.v-kleuren { display: flex; gap: 0.5rem; }
.v-kleuren i { width: 2.25rem; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 4px 10px rgba(29, 29, 27, 0.15); }
.v-kleuren i:nth-child(1) { background: var(--purple); } .v-kleuren i:nth-child(2) { background: var(--lime); } .v-kleuren i:nth-child(3) { background: var(--ink); } .v-kleuren i:nth-child(4) { background: var(--white); }

@media (max-width: 60rem) {
  .reden { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem; }
  .reden-beeld { height: auto; min-height: 17rem; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Uitlichten op scroll: de tekst is fel rond het midden van het scherm en gedimd erbuiten. */
    .reden-tekst { animation: reden-focus linear both; animation-timeline: view(); animation-range: cover 5% cover 95%; }
    @keyframes reden-focus { 0% { opacity: 0.2; transform: translateX(-1.5rem); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0.2; transform: none; } }
  }
}

/* Eén vast blok (desktop, met ondersteuning): de drie kaarten liggen op dezelfde plek en blijven staan terwijl de teksten
   erlangs scrollen. Welke kaart zichtbaar is volgt de tekst die in beeld staat; ook de animatie in de kaart loopt mee met die tekst.
   Techniek: de kaarten delen één rastervak over de hele lijst (li = display: contents) en zijn sticky; de tijdlijnen van de
   teksten (--r0, --r1, --r2) zijn via timeline-scope beschikbaar voor de kaarten. Geen JavaScript, geen scroll-listeners. */
@media (min-width: 60.0625rem) and (prefers-reduced-motion: no-preference) {
  @supports (timeline-scope: --a) and (animation-timeline: view()) {
    .redenen { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 6rem); timeline-scope: --r0, --r1, --r2; }
    .reden { display: contents; }
    .reden-tekst { grid-column: 1; display: flex; flex-direction: column; justify-content: center; min-height: 78vh; }
    .reden:nth-child(1) .reden-tekst { grid-row: 1; view-timeline-name: --r0; }
    .reden:nth-child(2) .reden-tekst { grid-row: 2; view-timeline-name: --r1; }
    .reden:nth-child(3) .reden-tekst { grid-row: 3; view-timeline-name: --r2; }
    .reden-beeld { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(50vh - 14rem); height: 28rem; animation: linear both; animation-range: cover 0% cover 100%; }
    .reden:nth-child(1) .reden-beeld { animation-name: beeld-eerste; animation-timeline: --r0; }
    .reden:nth-child(2) .reden-beeld { animation-name: beeld-midden; animation-timeline: --r1; }
    .reden:nth-child(3) .reden-beeld { animation-name: beeld-laatste; animation-timeline: --r2; }
    /* Geen doorzichtige overgang: de volgende kaart schuift van onderaf over de vorige heen, zoals de stappenkaarten stapelen. */
    @keyframes beeld-eerste { 0%, 100% { transform: none; } }
    @keyframes beeld-midden { 0%, 20% { visibility: hidden; transform: translateY(125%) rotate(5deg); } 21% { visibility: visible; transform: translateY(125%) rotate(5deg); } 42%, 100% { visibility: visible; transform: none; } }
    @keyframes beeld-laatste { 0%, 20% { visibility: hidden; transform: translateY(125%) rotate(-5deg); } 21% { visibility: visible; transform: translateY(125%) rotate(-5deg); } 42%, 100% { visibility: visible; transform: none; } }
    .reden:nth-child(2) .reden-beeld { z-index: 1; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35); }
    .reden:nth-child(3) .reden-beeld { z-index: 2; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35); }

    /* De animatie in elke kaart loopt mee met haar tekst. Groeien met clip-path, zodat de tekst in de staaf niet vervormt. */
    .v-posts { animation: v-waaier linear both; animation-timeline: --r2; animation-range: cover 34% cover 52%; }
    @keyframes v-waaier { from { scale: 0.6; rotate: -14deg; } to { scale: 1; rotate: 0deg; } }
  }
}

/* ===== Ronde 14: Waaromblok compacter en subtieler; het vaste blok blijft staan en de inhoud verspringt ===== */
.waaromblok .inner { padding-bottom: 0; }
.redenen { margin-top: 0; }
/* Zelfde lettergrootte als de stelling erboven (52 px op desktop). */
.reden-tekst p { max-width: 20ch; margin-top: 1.25rem; font-size: clamp(1.625rem, 3.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.035em; }
.reden-icoon { width: clamp(3rem, 4.2vw, 3.75rem); }
.reden-beeld { height: clamp(15rem, 34vh, 20rem); padding: clamp(1.25rem, 2vw, 1.75rem); }
.v-stijl { gap: 1.25rem; }
.v-posts { width: 30%; }
.v-kleuren i { width: 1.75rem; }
@media (max-width: 60rem) {
  .reden-beeld { height: auto; min-height: 14rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes reden-focus { 0% { opacity: 0.25; transform: none; } 40%, 60% { opacity: 1; transform: none; } 100% { opacity: 0.25; transform: none; } }
  }
}
@media (min-width: 60.0625rem) and (prefers-reduced-motion: no-preference) {
  @supports (timeline-scope: --a) and (animation-timeline: view()) {
    .reden-tekst { min-height: 46vh; }
    .reden-beeld { top: calc(50vh - 10rem); height: 20rem; box-shadow: none !important; }
    /* Verspringen: de kaarten liggen op elkaar en blijven op hun plek. De kaart van de volgende reden verschijnt kort en strak
       bovenop de vorige zodra haar tekst het midden van het scherm overneemt (rond 34% van haar tijdlijn). Geen schuiven. */
    @keyframes beeld-midden { 0%, 31% { opacity: 0; visibility: hidden; } 37%, 100% { opacity: 1; visibility: visible; } }
    @keyframes beeld-laatste { 0%, 31% { opacity: 0; visibility: hidden; } 37%, 100% { opacity: 1; visibility: visible; } }
    /* De animatie in de kaart speelt zodra de kaart er staat. */
    .v-posts { animation-range: cover 37% cover 52%; }
  }
}

/* ===== Ronde 15: hero rustiger, de ondernemer krijgt de ruimte ===== */
/* De kop is kleiner en het hele tekstblok staat onderaan: de knoppen links staan op één lijn met de pijltjes en de voortgangslijn rechts. */
@media (min-width: 60.0625rem) {
  .hero-foto { --hero-onder: clamp(1.5rem, 4vh, 2.75rem); }
  .hero-foto .mega { font-size: min(6.4vw, 9.4vh); }
  .hero-foto .hero-copy { margin-top: auto; padding-bottom: var(--hero-onder); }
  .hero-foto .lead { max-width: 36rem; }
  /* De pijltjes zijn lager dan de knoppen; dit zet hun midden op dezelfde lijn. */
  .hero-foto .hero-bar { padding-bottom: calc(var(--hero-onder) + (var(--knop-h, 3rem) - 2.75rem) / 2); }
}
@media (max-width: 60rem) { .hero-x .mega { font-size: min(9.6vw, 4.25rem); } }

/* ===== Ronde 16: het woord MONKEYS schuift bij het scrollen van rechts naar links ===== */
/* Het woord is breder dan het scherm. Aan het begin staat de M tegen de linkerrand en loopt de S rechts het beeld uit;
   aan het eind staat de S tegen de rechterrand en loopt de M links het beeld uit. Zo valt er nooit een gat voor de M of achter de S.
   2vw overlap vangt de witruimte in de letters en een eventuele scrollbalk op. Alleen CSS, gekoppeld aan de scrollpositie.
   Zonder ondersteuning of bij "verminder beweging" staat het woord stil in het midden (ook dan schermvullend). */
/* Het woord staat altijd op de onderkant van het blok: de voet van de letters valt samen met de onderrand.
   Gemeten aan het font: bij regelhoogte 0.85 ligt de basislijn 0.15em boven de onderkant van het tekstvak. */
.lineup .behind { font-size: 34vw; top: auto; bottom: -0.15em; line-height: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .lineup .behind { left: calc(50% - 50vw); transform: none; animation: monkeys-schuif linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes monkeys-schuif { from { transform: translateX(-2vw); } to { transform: translateX(calc(100vw - 100% + 2vw)); } }
  }
}

/* ===== Ronde 17: Monkeysblok met gecentreerde tekst en grotere Monkeys tot hun middel ===== */
/* Tekst gecentreerd boven de Monkeys, breder dan voorheen. */
.team-copy { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 64rem; margin-inline: auto; text-align: center; }
.team-copy h2 { max-width: 24ch; margin-inline: auto; }
.team-copy .kop-sub { max-width: none; }
.team-copy p:not(.kop-sub) { max-width: 68ch; }
.team-copy .btn { align-self: center; }
/* De Monkeys zijn groter en staan alleen met hun bovenlichaam in beeld: het blok knipt ze af onder het middel.
   --mh is de volledige hoogte van de figuur; daarvan is 56% zichtbaar. Het woord MONKEYS blijft op de onderrand staan. */
.team .lineup { --mh: clamp(19rem, 38vw, 36rem); --pt: clamp(2.5rem, 7vw, 7.5rem); box-sizing: border-box; align-items: flex-start; height: calc(var(--pt) + var(--mh) * 0.56); padding-top: var(--pt); }
.team .lineup .who { align-items: flex-start; height: calc(var(--mh) * 0.56); }
.team .lineup img { height: var(--mh); }
/* Elke Monkey is een link naar zijn eigen tegel op De Monkeys. De sticker verschijnt ook bij toetsenbordfocus. */
.lineup a.who { color: inherit; text-decoration: none; border-radius: 1rem; }
.lineup a.who:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; z-index: 2; }
.lineup a.who:focus-visible .tag { opacity: 1; transform: translate(-50%, 0) rotate(-5deg) scale(1); }
.lineup a.who:focus-visible img { transform: translateY(-4%) scale(1.06); }
.tiles > li { scroll-margin-top: 6rem; }
@media (max-width: 60rem) {
  /* Mobiel: drie Monkeys, groter. */
  .team .lineup { --mh: clamp(19rem, 74vw, 30rem); --pt: 3.5rem; }
  /* Het eerste kind van de line-up is het woord MONKEYS, dus de derde Monkey is het vierde kind. */
  .team .lineup .who:nth-child(n + 5) { display: none; }
  .team .lineup .who { margin-inline: -4.5%; }
}

/* ===== Ronde 18: het Herkenningsblok schuift over het Probleemblok (gordijn) ===== */
/* Het Probleemblok eindigt direct onder de laatste chatballon. Zodra die onderkant de onderrand van het scherm raakt, blijft het blok
   plakken (position: sticky, dus echt stil en zonder haperen) en schuift het paarse blok eroverheen: de ballonnen verdwijnen eronder.
   Het plakken is begrensd tot .gordijn (alleen deze twee blokken): het Probleemblok kan nooit doorlopen in het blok daarna.
   De hoogte van het blok komt uit header.js (--eigen-h); zonder JavaScript scrolt alles gewoon door.
   min(0px, ...): is het blok lager dan het scherm, dan plakt het bovenaan. */
.probleem { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.gordijn { position: relative; }
.gordijn .zicht { position: relative; z-index: 1; }
.gordijn .probleem[data-gemeten] { position: sticky; top: min(0px, calc(100svh - var(--eigen-h))); }

/* ===== Ronde 19: gordijn met uitfadende titel, en het Herkenningsblok als oog ===== */
/* Terwijl het paarse blok omhoog komt, vervaagt de inhoud van het Probleemblok: de aandacht gaat naar het volgende blok.
   De tijdlijn van het Herkenningsblok (--herken) is via timeline-scope beschikbaar voor het Probleemblok. */
@media (prefers-reduced-motion: no-preference) {
  @supports (timeline-scope: --a) and (animation-timeline: view()) {
    .gordijn { timeline-scope: --herken; }
    .gordijn .zicht { view-timeline-name: --herken; }
    /* Het uitfaden begint pas als het paarse blok al over de onderkant van de kop ligt (20 px) en is klaar als het er 150 px overheen ligt.
       Is het Probleemblok hoger dan het scherm, dan plakt het met zijn onderkant op de onderrand en staat de kop op (--eigen-h - --kop-onder)
       boven die rand. Is het lager dan het scherm (hoge schermen), dan plakt het bovenaan en is dat (100svh - --kop-onder). max() dekt beide;
       "entry <lengte>" is het moment waarop er zoveel van het paarse blok in beeld is. Beide maten komen uit header.js; de eerste regel is de terugval. */
    .gordijn .probleem > .wrap { animation: probleem-weg linear both; animation-timeline: --herken; animation-range: entry 55% entry 95%; }
    .gordijn .probleem[data-gemeten] > .wrap { animation-range: entry calc(max(100svh, var(--eigen-h)) - var(--kop-onder) + 20px) entry calc(max(100svh, var(--eigen-h)) - var(--kop-onder) + 150px); }
    @keyframes probleem-weg { to { opacity: 0; } }
  }
}

/* ===== Ronde 20: de footer komt achter het laatste blok vandaan ===== */
/* De footer plakt onderaan het scherm, achter de inhoud. De pagina schuift eroverheen weg en onthult hem; omdat de footer precies
   één scherm hoog is, staat hij aan het eind volledig in beeld, exact zoals voorheen. Alleen waar de footer gegarandeerd op het scherm
   past (desktop: height 100dvh). Op mobiel kan de footer hoger zijn dan het scherm; daar scrolt hij gewoon mee, anders zou de bovenkant nooit zichtbaar worden. */
@media (min-width: 60.0625rem) {
  main { position: relative; z-index: 1; background: var(--white); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
  .site-footer { position: sticky; bottom: 0; z-index: 0; }
}

/* ===== Ronde 22: één titelmaat voor alle blokken, en het Herkenningsblok als één geheel ===== */
/* Bloktitels hebben op de hele site dezelfde maat: maximaal 76 px (4.75rem). Dat geldt voor .h-xl, .h-l en de posters.
   Uitgezonderd: de hero-koppen (home, subpagina's, Monkey-showcase), de afsluitende vraag in de footer (bewust groot, besluit klant)
   en decoratieve letters (het woord MONKEYS, de stapnummers). */
:root { --titel: clamp(2.25rem, 5.2vw, 4.75rem); }
.h-xl, .h-l, .poster { font-size: var(--titel); }
.h-xl { max-width: 17ch; line-height: 1; }
.probleem .h-xl { max-width: 18ch; }
.autoriteit .h-xl { max-width: 14ch; }
.poster { line-height: 0.96; }

/* ===== Ronde 24: Zichtbaarheidsblok, herkenning en belofte als vier tegels in één paars blok ===== */
/* Rustiger en volwassener dan de twee losse posterblokken: kaarttitels in plaats van posters, geen lime tekst op paars.
   Raster 2 x 2, om en om breed en smal: tekst links boven, tekst rechts onder. */
.zicht { background: var(--purple); color: var(--ink); }
.tegels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.tegel { position: relative; display: flex; flex-direction: column; min-height: clamp(19rem, 28vw, 25rem); margin: 0; padding: clamp(1.75rem, 3vw, 3rem); border-radius: var(--r); overflow: hidden; }
.tegel > * + * { margin-top: 1.25rem; }
.t-herken { grid-column: span 7; background: var(--white); }
.t-oog { grid-column: span 5; background: var(--lime); justify-content: space-between; }
.t-team { grid-column: span 5; background: var(--purple-deep); }
.t-belofte { grid-column: span 7; background: var(--white); justify-content: center; }
.tegel h2 { max-width: 19ch; font-weight: 900; font-size: clamp(1.875rem, 3.3vw, 3.125rem); line-height: 1.02; letter-spacing: -0.04em; }
.tegel h2 .accent { color: var(--purple); }
.tegel p { max-width: 52ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.55; color: var(--muted); }
.t-herken { justify-content: flex-end; }
.t-herken .tegel-icoon { margin-bottom: auto; }
.tegel-icoon { display: grid; place-items: center; width: clamp(3rem, 4.2vw, 3.75rem); aspect-ratio: 1; border-radius: 28%; background: var(--purple); color: var(--white); rotate: -6deg; }
.tegel-icoon svg { width: 56%; height: 56%; }
.t-belofte .btn { align-self: flex-start; margin-top: 1.75rem; }
.t-belofte .actions .btn { margin-top: 0; }
/* Het oog: groot in de lime tegel, met de slotzin eronder. */
.oog-groot { display: block; width: clamp(7rem, 13vw, 11.5rem); color: var(--ink); transform-origin: 50% 50%; }
.oog-groot svg { display: block; width: 100%; height: auto; }
.t-oog p { max-width: 15ch; margin-top: 0; font-weight: 900; font-size: clamp(1.5rem, 2.5vw, 2.375rem); line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); }
/* Het kernteam in een tegel, afgesneden bij de benen. De figuren tellen niet mee voor de hoogte van de rij (picture is 1 px hoog,
   het beeld steekt eruit en de tegel knipt af), zodat de teksttegel ernaast de hoogte bepaalt. */
.t-team { --th: clamp(19rem, 33vw, 30rem); flex-direction: row; justify-content: center; align-items: flex-start; padding: clamp(1.5rem, 2.4vw, 2.25rem) 0 0; }
.t-team picture { display: block; height: 1px; }
.t-team > * + * { margin-top: 0; }
.t-team img { width: auto; max-width: none; height: var(--th); margin-inline: -7%; }
.t-team .t1 { position: relative; z-index: 1; height: calc(var(--th) * 1.08); }
.zicht :focus-visible { outline-color: var(--lime); }

@media (max-width: 60rem) {
  .t-herken, .t-oog, .t-team, .t-belofte { grid-column: 1 / -1; }
  .tegel { min-height: 0; }
  .t-oog { flex-direction: row; align-items: center; gap: 1.25rem; }
  .oog-groot { flex: none; width: 5.5rem; }
  .t-team { --th: clamp(18rem, 66vw, 25rem); height: calc(var(--th) * 0.66); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Knipperen: twee keer zodra de tegel in beeld is, en nog een keer bij hover. */
  .t-oog.is-in-beeld .oog-groot { animation: oog-knipper 1400ms 500ms both; }
  @keyframes oog-knipper { 0%, 30%, 46%, 62%, 100% { transform: scaleY(1); } 38%, 54% { transform: scaleY(0.08); } }
  @media (hover: hover) and (pointer: fine) { .t-oog:hover .oog-groot { animation: oog-knipper-kort 420ms both; } }
  @keyframes oog-knipper-kort { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.08); } }
  /* Binnenkomst op scroll: de tegels komen om en om van links en rechts, elk iets later. */
  @supports (animation-timeline: view()) {
    .tegel { animation: tegel-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .t-oog, .t-belofte { --van: 4rem; }
    .t-herken, .t-team { --van: -4rem; }
    .t-oog { animation-range: entry 10% cover 34%; }
    .t-belofte { animation-range: entry 10% cover 34%; }
    @keyframes tegel-in { from { opacity: 0; transform: translate(var(--van, 0), 3rem) scale(0.96); } to { opacity: 1; transform: none; } }
  }
}

/* ===== Ronde 25: Voor-wie-blok als net tweekoloms blok met fototegels ===== */
/* Links tekst, beroepen en knop; rechts vier portrettegels van de echte ondernemers uit de hero. De tweede kolom tegels staat iets lager. */
.wie { background: var(--mist); }
.wie-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.wie-grid > * + * { margin-top: 0 !important; }
.wie-copy > * + * { margin-top: 1.75rem; }
.wie-copy .big { max-width: 52ch; color: var(--muted); }
/* De beroepen: één stijl, recht, op een rij. */
.wie-beroepen { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 40rem; }
.wie-beroepen li { padding: 0.55em 0.95em 0.47em; border-radius: 999px; background: var(--white); font-weight: 800; font-size: 0.9375rem; line-height: 1; }
.wie-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.wie-tegels li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--ink); }
.wie-tegels li:nth-child(even) { translate: 0 clamp(1.5rem, 3vw, 3rem); }
.wie-tegels picture, .wie-tegels img { display: block; width: 100%; height: 100%; }
.wie-tegels img { object-fit: cover; transition: transform 300ms var(--ease-out); }
.wie-naam { position: absolute; left: 0.875rem; bottom: 0.875rem; max-width: calc(100% - 1.75rem); padding: 0.55em 0.9em 0.47em; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 800; font-size: 0.8125rem; line-height: 1.1; }
@media (hover: hover) and (pointer: fine) { .wie-tegels li:hover img { transform: scale(1.05); } }
@media (max-width: 60rem) {
  .wie-grid { grid-template-columns: 1fr; }
  .wie-tegels { gap: 0.625rem; padding-bottom: 1.5rem; }
  .wie-tegels li { border-radius: 1.125rem; }
  .wie-naam { left: 0.5rem; bottom: 0.5rem; font-size: 0.6875rem; border-radius: 0.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wie-tegels li { animation: wie-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes wie-in { from { opacity: 0; transform: translateY(3.5rem) scale(0.95); } to { opacity: 1; transform: none; } }
  }
}

/* ===== Ronde 26: Autoriteitsblok, "de hand van de maker" ===== */
/* Links de titel (eerste woord met de hand onderstreept), de toelichting en de slotzin als sticker. Rechts de ontwerptafel:
   een social post met de markeringen van de art director eroverheen. De strepen tekenen zichzelf terwijl je scrolt. */
.autoriteit .two { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.autoriteit .h-xl { max-width: 13ch; }
.autoriteit-copy > * + * { margin-top: 1.75rem; }
.onderstreept { position: relative; display: inline-block; }
.onderstreept svg { position: absolute; left: -2%; bottom: -0.2em; width: 104%; height: 0.28em; overflow: visible; }
.onderstreept .streep { stroke: var(--lime); stroke-width: 7; }
/* dasharray 1 1.5 en beginoffset 1.02: bij een teruggetrokken streep valt ook de ronde lijnkap buiten het pad, anders blijft er een puntje zichtbaar. */
.streep { fill: none; stroke: var(--purple); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.5; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
/* De ontwerptafel: mist met een fijn puntenraster, zoals een werkblad. */
.regie { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: var(--r); background-color: var(--mist); background-image: radial-gradient(rgba(29, 29, 27, 0.16) 1.2px, transparent 1.3px); background-size: 1.5rem 1.5rem; overflow: clip; }
.regie-post { position: absolute; left: 35%; top: 20%; width: 30%; aspect-ratio: 4 / 5; display: flex; flex-direction: column; gap: 5%; padding: 0 0 7%; border-radius: 1rem; background: var(--white); box-shadow: 0 18px 44px rgba(29, 29, 27, 0.22); rotate: -3deg; overflow: hidden; transition: rotate 300ms var(--ease-out), scale 300ms var(--ease-out); }
.regie-beeld { position: relative; flex: 1; background: var(--purple); }
.regie-beeld::after { content: ""; position: absolute; inset: 22%; background: var(--white); opacity: 0.22; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.regie-regel { display: block; height: 5.5%; margin-inline: 9%; border-radius: 999px; background: var(--ink); }
.regie-regel.r1 { width: 70%; }
.regie-regel.r2 { width: 46%; opacity: 0.35; }
.regie-stift { position: absolute; inset: 0; width: 100%; height: 100%; }
.regie-label { position: absolute; padding: 0.6em 1em 0.5em; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 800; font-size: clamp(0.8125rem, 1.15vw, 1.0625rem); line-height: 1; white-space: nowrap; box-shadow: 0 8px 20px rgba(29, 29, 27, 0.2); }
.l-strategie { left: 5%; bottom: 7%; rotate: -2deg; }
.l-art { right: 5%; top: 9%; rotate: 2deg; background: var(--purple); }
.l-keuzes { right: 4%; bottom: 8%; rotate: -1.5deg; background: var(--lime); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .regie:hover .regie-post { rotate: 0deg; scale: 1.04; } }
@media (max-width: 60rem) {
  .autoriteit .two { grid-template-columns: 1fr; }
  .regie-label { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Alles in de ontwerptafel volgt één tijdlijn: die van de tafel zelf (--regie). Let op: overflow: hidden zou van de tafel een eigen
       scrollgebied maken en de koppeling met het scrollen van de pagina verbreken; daarom overflow: clip.
       Elke streep tekent zich iets later dan de vorige; het label plopt erbij zodra zijn pijl er staat. */
    .regie { view-timeline-name: --regie; }
    .regie .streep { animation: streep-teken linear both; animation-timeline: --regie; animation-range: cover calc(16% + var(--i) * 4.5%) cover calc(25% + var(--i) * 4.5%); }
    .onderstreept .streep { animation: streep-teken linear both; animation-timeline: view(); animation-range: cover 12% cover 30%; }
    @keyframes streep-teken { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
    .regie-label { animation: label-plop linear both; animation-timeline: --regie; }
    .l-strategie { animation-range: cover 27% cover 33%; }
    .l-art { animation-range: cover 36% cover 42%; }
    .l-keuzes { animation-range: cover 45% cover 51%; }
    @keyframes label-plop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
  }
}

/* Kop met subregel: de binnenkomst beweegt titel en subregel samen. Anders schuift alleen de titel en valt hij tijdens het scrollen over de subregel. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kop-groep h2 { animation: none !important; }
    .kop-groep { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  }
}

/* ===== Ronde 27: de kaarten in het Waaromblok in de beeldtaal van "de hand van de maker" ===== */
/* Eén familie met de ontwerptafel in het Autoriteitsblok: werkblad met puntenraster, posts als witte kaartjes met beeld en tekstregels,
   handgetekende paarse markeringen (.streep) die zich tekenen terwijl de bijbehorende tekst in beeld is. */
.r-prijs .reden-beeld, .r-huisstijl .reden-beeld { background-color: var(--mist); background-image: radial-gradient(rgba(29, 29, 27, 0.16) 1.2px, transparent 1.3px); background-size: 1.5rem 1.5rem; color: var(--ink); }
.v-stijl { position: relative; height: 100%; align-content: center; }
.v-posts { width: 28%; }
.v-stijl { gap: 1.5rem; }
.v-posts span { display: flex; flex-direction: column; gap: 6%; padding: 0 0 8%; overflow: hidden; border-radius: 0.75rem; background: var(--white) !important; box-shadow: 0 14px 34px rgba(29, 29, 27, 0.2); }
.v-posts span::after { content: none; }
.v-posts b { position: relative; flex: 1; display: block; }
.v-posts b::after { content: ""; position: absolute; inset: 24%; background: var(--white); opacity: 0.24; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.v-posts .p0 b { background: var(--ink); }
.v-posts .p1 b { background: var(--purple); }
.v-posts .p2 b { background: var(--lime); }
.v-posts .p2 b::after { background: var(--ink); }
.v-posts i { display: block; height: 5%; margin-inline: 10%; border-radius: 999px; background: var(--ink); }
.v-posts i:last-child { width: 46%; opacity: 0.35; }
.v-posts i:nth-of-type(1) { width: 68%; }
.v-stift { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 60.0625rem) and (prefers-reduced-motion: no-preference) {
  @supports (timeline-scope: --a) and (animation-timeline: view()) {
    /* De markeringen tekenen zich nadat de kaart er staat, op de tijdlijn van de derde reden. */
    .v-stijl .streep { animation: streep-teken linear both; animation-timeline: --r2; animation-range: cover calc(44% + var(--i) * 5%) cover calc(52% + var(--i) * 5%); }
  }
}

/* ===== Ronde 28: het Whoosh!-icoon groot op de achtergrond van de footer ===== */
/* Subtiel: een tint lichter dan de achtergrond. Rechtsonder in de hoek, zo groot dat het achter het logo en de tekst valt,
   en het loopt rechts en onder het beeld uit. Het is decoratie (pseudo-element), dus onzichtbaar voor schermlezers. */
.site-footer { overflow: hidden; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; z-index: -1; right: -7vw; bottom: -14vh; width: min(56vw, 98vh); aspect-ratio: 474 / 512; background: color-mix(in srgb, var(--ink) 92%, var(--white)); -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; pointer-events: none; }
@media (max-width: 60rem) {
  .site-footer { position: relative; }
  .site-footer::before { right: -24vw; bottom: -5rem; width: 105vw; }
}

/* Slideteller in de hero: staat standaard uit en wordt alleen door de volwassen laag getoond. */
.hero-teller { display: none; }

/* ===== Ronde 29: hero-overlay alleen waar de tekst staat ===== */
/* De zwarte overlay lag over het hele beeld, waardoor de ondernemer rechts te donker werd. Nu is hij links vol (achter de tekst, minstens
   de per beeld gemeten sterkte --ov voor het contrast) en loopt hij naar rechts weg, zodat de ondernemer helder in beeld staat.
   Alleen zwart, geen kleurzweem. Onderaan een lichte zwarte rand voor de bediening. Mobiel heeft een eigen opbouw en blijft zoals het was. */
@media (min-width: 60.0625rem) {
  .hero-foto .hero-bg::after { background: linear-gradient(90deg, rgba(0, 0, 0, calc(var(--ov, 0.4) + 0.12)) 0%, rgba(0, 0, 0, var(--ov, 0.4)) 42%, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0) 82%), linear-gradient(0deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 20%); }
}

/* ===== Ronde 30: mobiele ronde van de homepage, en de lijn onder de klantenstrook weg ===== */
/* Geen lijntje meer tussen de klantlogo's en het blok eronder (alle schermformaten). */
.klantenbalk { border-bottom: 0; box-shadow: none; }

@media (max-width: 60rem) {
  /* Hero: eerst de ondernemer, dan de tekst. Bovenaan een donkere strook voor de header, daaronder de foto met het bovenlichaam
     in beeld, daaronder kop, tekst en knoppen. Bedrijfslabel en pijltjes staan onderin de foto. */
  .hero-foto { --kop-h: 4.5rem; --foto-h: 46dvh; padding-top: 0; min-height: 0; }
  .hero-foto .hero-spacer { order: -1; height: calc(var(--kop-h) + var(--foto-h)); }
  .hero-foto .hero-bg img { inset: var(--kop-h) 0 auto 0; height: var(--foto-h); object-position: var(--pos-m, 90% 0); }
  .hero-foto .hero-bg::after { inset: var(--kop-h) 0 auto 0; height: var(--foto-h); background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 38%); }
  .hero-foto .hero-copy { padding-block: 1.75rem 2.5rem; }
  .hero-foto .hero-bar { top: calc(var(--kop-h) + var(--foto-h) - 6.75rem); bottom: auto; }
  @keyframes hero-wipe-foto { from { clip-path: circle(0% at 60% 30%); } to { clip-path: circle(170% at 60% 30%); } }

  /* Stappen: het grote nummer staat op mobiel achter de tekst. Lichter, zodat de tekst goed leesbaar blijft. */
  .stap.s1 .num { color: color-mix(in srgb, var(--mist) 90%, var(--ink)); }
  .p-home .stap.s1 .num { color: color-mix(in srgb, var(--mist) 90%, var(--ink)); }
  .stap.s2 .num { color: color-mix(in srgb, var(--purple) 90%, var(--white)); }
  .stap.s3 .num { color: color-mix(in srgb, var(--ink) 92%, var(--white)); }

  /* Voor-wie-blok: eerst de ondernemers, dan de tekst. */
  .wie-tegels { order: -1; padding-bottom: 2.5rem; }

  /* Monkeysblok: drie Monkeys, groter en dichter op de knop. */
  .team .lineup { --mh: clamp(19rem, 84vw, 30rem); --pt: 1.25rem; margin-top: 1.75rem !important; }
  .team .lineup .who { margin-inline: -5.5%; }

  /* Voorbeelden: de posts schuiven horizontaal door het beeld, twee rijen in tegengestelde richting. */
  /* minmax(0, 1fr): anders rekt de brede rij posts de kolom op en loopt de tekst erboven het scherm uit. */
  .vb-layout { grid-template-columns: minmax(0, 1fr); }
  .vb-layout > * { min-width: 0; }
  /* De rijen lopen van schermrand tot schermrand, buiten de paginamarge. */
  .vb-venster { display: flex; flex-direction: column; gap: 0; height: auto; margin-inline: calc(var(--gutter) * -1); padding-bottom: var(--pad); overflow: clip; }
  .vb-kolom, .vb-kolom.k0, .vb-kolom.k1 { position: static; width: auto; left: auto; right: auto; }
  .vb-kolom.k1 { margin-top: -1.5rem; z-index: 2; }
  .vb-track { flex-direction: row; align-items: center; width: max-content; animation-name: vb-schuif-x; animation-duration: 38s; }
  .vb-kolom.k1 .vb-track { animation-duration: 46s; }
  .vb-post { height: 14.5rem; width: auto; margin: 0 var(--gat) 0 0; }
  .vb-kolom.k1 .vb-post { height: 16rem; }
  @keyframes vb-schuif-x { to { transform: translateX(-50%); } }
}
@media (max-width: 60rem) and (prefers-reduced-motion: reduce) {
  .vb-venster { display: flex; padding-inline: 0; }
  .vb-kolom { overflow-x: auto; }
  .vb-post[aria-hidden="true"]:nth-child(n + 4) { display: none; }
}

/* Kleurblokken knippen hun inhoud af met overflow: clip in plaats van hidden. Met hidden wordt een blok voor de browser een eigen
   scrollgebied: scroll-animaties van elementen in het blok (tegels, pakketkaarten) koppelen zich dan aan het blok in plaats van aan de
   pagina en blijven halverwege hangen, waardoor een kaart half doorzichtig kan blijven staan. De eerste regel is de terugval voor oudere browsers. */
.block { overflow: hidden; overflow: clip; }
.tegel, .wie-tegels li, .vb-post, .regie-post, .reden-beeld, .stap { overflow: hidden; overflow: clip; }

/* ===== Ronde 31: Wat kan Whoosh! Studio als visuele pagina in de stijl van de homepage ===== */
/* Hero: tekst links, rechts een tegel met een echte ondernemer (zelfde tegelstijl als het Voor-wie-blok). */
.hero-wk-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.hero-wk-grid > * + * { margin-top: 0 !important; }
.hero-wk-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 34rem; overflow: clip; border-radius: var(--r); background: var(--ink); }
.hero-wk-foto picture, .hero-wk-foto img { display: block; width: 100%; height: 100%; }
.hero-wk-foto img { object-fit: cover; }
.hero-wk-foto figcaption { position: absolute; left: 0.875rem; bottom: 0.875rem; padding: 0.55em 0.9em 0.47em; border-radius: var(--r-klein, 0.5rem); background: var(--white); color: var(--ink); font-weight: 800; font-size: 0.8125rem; line-height: 1.1; }
.hero-wk .mark { display: none; }
@media (prefers-reduced-motion: no-preference) { .hero-wk-foto { animation: page-rise 900ms var(--ease-out) 240ms both; } }
/* Zes resultaten als tegels met icoon. */
.levert-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3.5rem) !important; }
.levert-tegels li { display: flex; flex-direction: column; gap: 1.25rem; min-height: 14rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--r); background: var(--mist); }
/* Alle tegels in mist; alleen de iconen wisselen van kleur (paars, lime met ink, ink). */
.levert-tegels li:nth-child(3n + 2) .tegel-icoon { background: var(--lime); color: var(--ink); }
.levert-tegels li:nth-child(3n) .tegel-icoon { background: var(--ink); color: var(--lime); }
.levert-tegels p { max-width: 24ch; margin-top: auto; font-weight: 700; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.25; letter-spacing: -0.025em; }
/* Wat we overnemen: lijst links, werkblad rechts. */
.nemen-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.nemen-grid > * + * { margin-top: 0 !important; }
.nemen-copy .vinkjes { margin-top: 2rem; }
.nemen .vinkjes li { color: var(--white); }
.nemen .vink { background: var(--lime); color: var(--ink); }
.werkblad { position: relative; margin: 0; aspect-ratio: 5 / 4; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); background-color: var(--mist); background-image: radial-gradient(rgba(29, 29, 27, 0.16) 1.2px, transparent 1.3px); background-size: 1.5rem 1.5rem; color: var(--ink); overflow: clip; }
.werkblad .v-stijl { display: grid; gap: 1.5rem; justify-items: center; }
.werkblad .v-posts { width: 30%; }
/* Pakketten zonder prijs; Publish uitgelicht zoals op de homepage. */
.wk-fields > li { padding-top: clamp(1.75rem, 2.6vw, 2.5rem) !important; }
.wk-pakketten-voet { display: flex; justify-content: center; margin-top: clamp(4.5rem, 6vw, 6rem) !important; }
/* Herkenning: tekst met het oog en de knoppen, rechts het kernteam afgesneden bij de benen. */
.wk-herken-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.wk-herken-grid > * + * { margin-top: 0 !important; }
.wk-herken-grid > div { padding-bottom: 0; }
.wk-herken-grid > div > * + * { margin-top: 1.5rem; }
.wk-oog { background: var(--lime); color: var(--ink); }
.wk-oog svg { transform-origin: 50% 50%; }
/* Het kernteam in een donkerpaarse tegel, zoals de Monkeytegel op de homepage: groot, afgesneden bij de benen. */
.wk-trio { --th: clamp(20rem, 30vw, 30rem); display: flex; justify-content: center; align-items: flex-start; aspect-ratio: 1; margin: 0; padding-top: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--r); background: var(--purple-deep); overflow: clip; }
.wk-trio picture { display: block; height: 1px; }
.wk-trio img { width: auto; max-width: none; height: var(--th); margin-inline: -8%; }
.wk-trio .t1 { position: relative; z-index: 1; height: calc(var(--th) * 1.08); }
@media (max-width: 60rem) {
  .hero-wk-grid, .nemen-grid, .wk-herken-grid { grid-template-columns: 1fr; }
  .hero-wk-foto { max-height: 22rem; aspect-ratio: 4 / 3; }
  .levert-tegels { grid-template-columns: 1fr; }
  .levert-tegels li { min-height: 0; flex-direction: row; align-items: center; }
  .levert-tegels p { margin-top: 0; }
  .wk-trio { --th: clamp(18rem, 70vw, 26rem); aspect-ratio: auto; height: calc(var(--th) * 0.66); }
}
@media (prefers-reduced-motion: no-preference) {
  .wk-oog.is-in-beeld svg { animation: oog-knipper 1400ms 400ms both; }
  @supports (animation-timeline: view()) {
    .levert-tegels li { animation: tegel-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; --van: 0px; }
    .levert-tegels li:nth-child(3n + 2) { animation-range: entry 8% cover 32%; }
    .levert-tegels li:nth-child(3n) { animation-range: entry 16% cover 36%; }
    .werkblad { view-timeline-name: --werkblad; }
    .werkblad .streep { animation: streep-teken linear both; animation-timeline: --werkblad; animation-range: cover calc(30% + var(--i) * 8%) cover calc(42% + var(--i) * 8%); }
    .hero-wk-foto { animation-name: page-rise; }
  }
}

/* ===== Ronde 32: De Monkeys in de stijl van de homepage ===== */
/* Showcase: geen kaarten meer links en rechts, maar rustige tekst op de kleur van de Monkey met een dun lime lijntje erboven. */
.sc-card, .sc-left, .sc-right { max-width: 19rem; padding: 1.25rem 0 0; border-radius: 0; background: none; color: var(--fg); box-shadow: none; border-top: 2px solid var(--lime); }
.sc-card h3 { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: var(--lime); }
.sc-card p { font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 500; line-height: 1.45; color: var(--fg); opacity: 0.92; }
.sc-slide[data-fg="#1D1D1B"] .sc-card { border-top-color: var(--ink); }
.sc-slide[data-fg="#1D1D1B"] .sc-card h3 { color: var(--ink); }
/* Teamblok: tekst gecentreerd, de Monkeys groot met hun bovenlichaam, 13 stuks. */
.hero-team-page .team-copy { display: block; max-width: 56rem; text-align: center; }
.hero-team-page .lead { max-width: none; font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.5; }
.hero-team-page .lineup.crowd { --mh: clamp(16rem, 23vw, 24rem); }
.hero-team-page .lineup.crowd .who { margin-inline: -2.6%; }
@media (max-width: 60rem) { .hero-team-page .lineup.crowd { --mh: clamp(18rem, 74vw, 26rem); } .hero-team-page .lineup.crowd .who { margin-inline: -5%; } }
/* Alle Monkeys in gelijke tegels (4:5, vier per rij). Nummer in de hoek; bij hover schuift zijn rol omhoog over de tegel. */
.tiles { gap: 2.5rem 1rem; }
.tiles > li, .tiles > li:nth-child(n) { grid-column: span 3; }
.tiles > li:nth-child(n) .stage { aspect-ratio: 4 / 5; }
/* De regel hierboven gold ook op mobiel en overschreef de breekpunten uit ronde 1: vier smalle tegels per rij op een telefoon, waarbij
   "Neemt uit handen:" buiten het scherm liep en de pagina horizontaal kon schuiven (gevonden 28-09-2026). Breekpunten hersteld. */
@media (max-width: 60rem) { .tiles > li, .tiles > li:nth-child(n) { grid-column: span 6; } }
@media (max-width: 36rem) { .tiles > li, .tiles > li:nth-child(n) { grid-column: span 12; } }
.tile-stage { position: relative; overflow: clip; border-radius: var(--r); }
.tile-stage .stage { border-radius: 0; }
.tile-hover { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.25rem 1.25rem 1.125rem; max-width: none; background: var(--white); color: var(--ink); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; transform: translateY(100%); transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tiles > li:hover .tile-hover { transform: none; }
  .tile-copy .doet { display: none; } /* op hover-apparaten staat deze tekst in de tegel */
}
.tile-copy .doet { font-size: 1rem; color: var(--muted); }
/* Afdelingen: de namen verschijnen bij hover of focus op de portretten. */
.bust-wrap { position: relative; display: block; }
.bust-wrap .tag { position: absolute; left: 50%; bottom: calc(100% + 0.5rem); z-index: 3; padding: 0.4rem 0.7rem; border-radius: var(--r-klein, 0.5rem); background: var(--ink); color: var(--white); font-size: 0.8125rem; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; transform: translate(-50%, 0.35rem); transition: opacity 160ms ease, transform 240ms var(--ease-out); pointer-events: none; }
.bust-wrap:hover .tag, .bust-wrap:focus-within .tag { opacity: 1; transform: translate(-50%, 0); }
.bust-wrap:hover { z-index: 2; }
.stack .bust { transition: transform 240ms var(--ease-out); }
.bust-wrap:hover .bust { transform: translateY(-3px); }

/* Teamblok op De Monkeys: het woord MONKEYS (34vw, op de onderrand) mag niet tot in de tekst reiken; daarom extra ruimte boven de Monkeys. */
.hero-team-page .lineup.crowd { --pt: clamp(5rem, 15vw, 17rem); }
.hero-team-page .team-copy { position: relative; z-index: 1; }
/* Head of Creation: gecentreerd, met de drie portretten erboven. */
.kern-inner { display: grid; justify-items: center; text-align: center; max-width: 52rem; }
.kern-inner > * + * { margin-top: 1.25rem; }
.kern-inner .h-l { max-width: 18ch; }
.kern-inner .big { max-width: 46ch; color: rgba(253, 254, 255, 0.9); }
.kern-stack { margin-bottom: 0.5rem; }
.kern-stack .bust { width: 5.5rem; border-color: var(--purple); margin-right: -1.125rem; }
.kern-inner .eyebrow { color: var(--lime); }

/* ===== Ronde 33: Monkey-showcase als rolkaart ===== */
/* Titel linksboven als gewone paginakop (geen strook meer), met een klein label erboven. */
.sc-kop { text-align: left; padding-top: clamp(6rem, 11vh, 7.5rem); }
.sc-kop .eyebrow { margin-bottom: 0.5rem; color: var(--lime); }
.sc-slide[data-fg="#1D1D1B"] ~ .sc-kop .eyebrow, .showcase[style*="#1D1D1B"] .sc-kop .eyebrow { color: var(--ink); }
.sc-kop h1, .volw .sc-kop h1 { display: block; max-width: 22ch; padding: 0; background: none; color: var(--fg); font-weight: 700; font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -0.03em; text-transform: none; transform: none; }
/* De rol erachter blijft reusachtig, maar staat iets lager zodat hij achter de Monkey en naast de kolommen valt. */
.sc-rol { padding-top: 24vh; }
/* Links: teller, naam groot, functie, rolomschrijving. Rechts: checklist. Beide zonder kaart. */
.sc-card, .sc-left, .sc-right, .volw .sc-left, .volw .sc-right { max-width: 22rem; margin-top: 30vh; padding: 0; border: 0; background: none; box-shadow: none; }
.sc-teller { display: flex; align-items: baseline; gap: 0.3rem; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; opacity: 0.7; }
.sc-teller b { font-weight: 700; }
.sc-card .sc-naam-groot, .volw .sc-card .sc-naam-groot { margin-top: 0.75rem; text-transform: none; letter-spacing: -0.04em; font-weight: 700; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--fg); }
.sc-card .sc-functie, .volw .sc-card .sc-functie { margin-top: 0.5rem; opacity: 1; font-weight: 700; font-size: 1rem; color: var(--lime); }
.volw .sc-slide[data-fg="#1D1D1B"] .sc-card .sc-functie, .volw .sc-slide[data-fg="#1D1D1B"] .sc-card.sc-lijst h4 { color: var(--ink); }
.sc-card .sc-doet, .volw .sc-card .sc-doet { margin-top: 1rem; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); font-weight: 500; line-height: 1.5; color: var(--fg); opacity: 0.88; }
.sc-card.sc-lijst h4, .volw .sc-card.sc-lijst h4 { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
.sc-lijst ul { display: grid; gap: 0.75rem; margin-top: 1rem; }
.sc-lijst li { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 700; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--fg); }
.sc-lijst .vink { width: 1.5rem; margin-top: 0.05em; background: var(--lime); color: var(--ink); }
.sc-slide[data-fg="#1D1D1B"] .sc-lijst .vink { background: var(--ink); color: var(--lime); }
.sc-card h3, .sc-card p { margin-top: 0; }
.sc-wie > * + * { margin-top: 0.5rem; }
@media (max-width: 60rem) {
  .sc-kop { padding-top: 6.5rem; }
  .sc-rol { padding-top: 12.5rem; }
  .sc-card, .sc-left, .sc-right, .volw .sc-left, .volw .sc-right { max-width: none; margin-top: 0; padding: 0; background: none; }
  .sc-grid { gap: 1.25rem; }
  .volw .sc-card .sc-naam-groot { font-size: 1.75rem; }
  .sc-lijst ul { gap: 0.5rem; }
}

/* De functie achter de Monkey: over de volle breedte (zoals MONKEYS elders) en veel transparanter, zodat hij niet met de Monkey concurreert. */
.sc-rol { padding-top: 21vh; font-size: min(calc(100vw / (var(--l) * 0.60)), 32vh); letter-spacing: -0.05em; color: color-mix(in srgb, var(--licht) 42%, transparent); opacity: 1; }
@media (max-width: 60rem) { .sc-rol { padding-top: 14.5rem; font-size: min(calc(100vw / (var(--l) * 0.62)), calc(15dvh / var(--rows))); color: color-mix(in srgb, var(--licht) 50%, transparent); } }

/* ===== Ronde 34: stappenblok met illustraties in de beeldtaal van de site ===== */
/* Nummers lichter, op alle kaarten; kaart 2 heeft de tekst rechts voor ritme. Bovenin de tekst een voortgangsbalk (welke van drie). */
/* Nummers als heel lichte tint: 5% van de tekstkleur op de blokkleur. */
.stap.s1 .num, .volw .stap.s1 .num { color: color-mix(in srgb, var(--mist) 95%, var(--ink)); }
.stap.s2 .num { color: color-mix(in srgb, var(--purple) 94%, var(--white)); }
.stap.s3 .num { color: color-mix(in srgb, var(--ink) 95%, var(--white)); }
.stap.s2 .stap-tekst { order: 2; }
.stap.s2 .num { left: auto; right: -0.05em; }
.stap-tekst { justify-content: flex-end; }
.stap h3 { margin-top: 0; }
/* Illustraties: werkblad met puntenraster, zoals het Autoriteitsblok. */
.stap-beeld { position: relative; margin: 0; min-height: 16rem; overflow: clip; }
.werkblad-stap { display: grid; place-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); background-color: var(--mist); background-image: radial-gradient(rgba(29, 29, 27, 0.16) 1.2px, transparent 1.3px); background-size: 1.5rem 1.5rem; color: var(--ink); }
.stap.s2 .werkblad-stap { background-color: color-mix(in srgb, var(--purple) 88%, var(--white)); background-image: radial-gradient(rgba(253, 254, 255, 0.22) 1.2px, transparent 1.3px); }
.stap-beeld .v-stift { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Stap 1: afspraakkaart met de ondernemer en Nova, en een klokring van 30 minuten. */
.afspraak { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.25rem; width: min(21rem, 84%); padding: 2.25rem 1.75rem 2rem; border-radius: var(--r); background: var(--white); box-shadow: 0 18px 44px rgba(29, 29, 27, 0.18); }
.afspraak-wie { display: flex; margin-bottom: 0.75rem; }
.afspraak-wie .bust { width: 4.25rem; border-radius: 50%; border: 3px solid var(--white); margin-right: -0.75rem; }
.afspraak-held { background: var(--ink); }
.afspraak-held img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; object-fit: cover; }
.afspraak-titel { font-weight: 800; font-size: 1.875rem; line-height: 1; letter-spacing: -0.03em; }
.afspraak-sub { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.afspraak-klok { width: 6.5rem; margin-top: 1.25rem; color: var(--ink); }
/* De ring tekent zich volledig (besluit 23-09-2026; was een halve ring). De streep is iets langer dan de ring (1.04), anders blijft
   op de naad tussen begin en eind een speldenprikje van de grijze ring zichtbaar. */
.klok-streep { stroke-dasharray: 1.04 1.5; stroke-dashoffset: 0; }
/* Stap 2: de Brand Core als vier tegels. */
.brandcore { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 7rem); gap: 0.875rem; }
.bc-tegel { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1rem; background: var(--white); box-shadow: 0 14px 34px rgba(29, 29, 27, 0.18); }
.bc-kleuren { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 1.125rem; }
.bc-kleuren i { width: 100%; aspect-ratio: 1; border-radius: 50%; }
.bc-kleuren i:nth-child(1) { background: var(--purple); } .bc-kleuren i:nth-child(2) { background: var(--lime); } .bc-kleuren i:nth-child(3) { background: var(--ink); } .bc-kleuren i:nth-child(4) { background: var(--mist); }
.bc-logo i { display: block; width: 52%; aspect-ratio: 474 / 512; background: var(--purple); -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.bc-letter { font-weight: 800; font-size: 2.75rem; letter-spacing: -0.05em; color: var(--ink); }
.bc-toon { align-content: center; gap: 0.5rem; padding: 1.25rem; }
.bc-toon b { display: block; width: 100%; height: 0.5rem; border-radius: 999px; background: var(--ink); }
.bc-toon b:nth-child(2) { width: 70%; opacity: 0.5; } .bc-toon b:nth-child(3) { width: 45%; opacity: 0.25; }
/* Stap 3: het dashboard, volledig met sidebar, in een browserkader. */
.dashboard { display: flex; flex-direction: column; padding: clamp(1rem, 2.5vw, 2rem); background: transparent; }
.dashboard-venster { position: relative; display: block; border-radius: 0.75rem; overflow: clip; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.dashboard-venster img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; box-shadow: none; }
/* Het Whoosh! Studio-logo over de plek van het oude logo in de screenshot (linksboven in de sidebar, 2,2% van links, 3,5% van boven). */
.dashboard-logo { position: absolute; left: 2.6%; top: 4%; width: 12.5%; }
.dashboard-logo svg, .dashboard-logo img { width: 100%; height: auto; }
.stap.s3 figure { display: flex; }
@media (max-width: 60rem) {
  .stap.s2 .stap-tekst { order: 0; }
  .stap.s2 .num { right: -0.04em; }
  .stap-beeld { order: -1; aspect-ratio: auto; min-height: 15rem; }
  .brandcore { grid-template-columns: repeat(2, 5.5rem); }
  .bc-letter { font-size: 2rem; }
  .dashboard { padding: 0.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stap-beeld { view-timeline-name: --stap; }
    .stap-beeld .streep { animation: streep-teken linear both; animation-timeline: --stap; animation-range: cover calc(28% + var(--i, 0) * 8%) cover calc(40% + var(--i, 0) * 8%); }
    /* De klok tekent zich eerder dan de andere strepen (gemeten op 1440 x 900): met het algemene bereik sloot de ring pas op het
       moment dat stap 2 er al overheen schoof, zodat je altijd een gat zag. Zelfde specificiteit als de regel hierboven, dus later. */
    .stap-beeld .klok-streep { animation-name: klok-teken; animation-range: cover 24% cover 32%; }
    @keyframes klok-teken { from { stroke-dashoffset: 1.08; } to { stroke-dashoffset: 0; } } /* start bij 1.08: met de langere streep is er dan vooraf niets te zien */
  }
}

/* Stappenblok: titel en knop gecentreerd; het dashboard verticaal in het midden van kaart 3. */
.werkwijze > .wrap { display: flex; flex-direction: column; align-items: center; }
.werkwijze .h-l { max-width: 20ch; text-align: center; text-wrap: balance; }
.werkwijze .stappen { width: 100%; }
.werkwijze .actions { justify-content: center; }
.stap.s3 figure.dashboard { justify-content: center; }

/* ===== Ronde 35: Hoe het werkt als eigen pagina ===== */
/* Kernboodschap op ink naast een werkblad: de zoekbalk wordt doorgestreept, de ondernemer krijgt een vinkje. */
.kern-hw-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.kern-hw-grid > * + * { margin-top: 0 !important; }
.kern-hw .poster { color: var(--white); max-width: 14ch; }
.kern-hw-beeld { display: grid; place-items: center; align-content: center; gap: 2.25rem; aspect-ratio: 5 / 4; }
.url-balk { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; width: min(20rem, 84%); padding: 0.875rem 1.125rem; border-radius: 0.75rem; background: var(--white); box-shadow: 0 14px 34px rgba(29, 29, 27, 0.18); font-weight: 600; font-size: 1rem; color: var(--muted); opacity: 0.45; box-shadow: none; }
.url-balk i { width: 0.875rem; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--muted); opacity: 0.6; }
.url-jij { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem 0.75rem 0.75rem; border-radius: 999px; background: var(--white); box-shadow: 0 14px 34px rgba(29, 29, 27, 0.18); }
.url-held { width: 3.5rem; border-radius: 50%; background: var(--ink); }
.url-held img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; object-fit: cover; }
.url-jij b { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); }
.kern-hw-beeld .v-stift { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.kern-hw-beeld .streep { stroke-width: 6; }
/* Stappen met checklist: de kaart wordt hoger, de lijst staat onder de tekst. */
.stap-lijst { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.stap-lijst h4 { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.stap-lijst ul { display: grid; gap: 0.5rem; margin-top: 0.875rem; }
.stap-lijst li { display: flex; align-items: flex-start; gap: 0.625rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.stap-lijst .vink { width: 1.25rem; margin-top: 0.05em; background: var(--purple); color: var(--white); }
.stap.s2 .stap-lijst .vink, .stap.s3 .stap-lijst .vink { background: var(--lime); color: var(--ink); }
.stap.s2 .stap-lijst ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stap:has(.stap-lijst) { min-height: clamp(30rem, 78vh, 44rem); }
.stap:has(.stap-lijst) .stap-tekst { justify-content: flex-end; }
/* Waarom dit werkt: tekst naast de Brand Core. */
.waarom-hw-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.waarom-hw-grid > * + * { margin-top: 0 !important; }
.waarom-hw-grid > div > * + * { margin-top: 1.25rem; }
.waarom-hw-grid .eyebrow { color: var(--purple); }
.waarom-hw-beeld { aspect-ratio: 5 / 4; border-radius: var(--r); background-color: color-mix(in srgb, var(--purple) 88%, var(--white)); background-image: radial-gradient(rgba(253, 254, 255, 0.22) 1.2px, transparent 1.3px); margin: 0; }
@media (max-width: 60rem) {
  .kern-hw-grid, .waarom-hw-grid { grid-template-columns: 1fr; }
  .kern-hw .poster { max-width: none; }
  .stap.s2 .stap-lijst ul { grid-template-columns: 1fr; }
  .stap:has(.stap-lijst) { min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kern-hw-beeld { view-timeline-name: --kernhw; }
    /* De lijn (--i:0) tekent zich eerst; de punt (--i:1) begint pas als de lijn klaar is. */
    .kern-hw-beeld .streep { animation: streep-teken linear both; animation-timeline: --kernhw; animation-range: cover calc(30% + var(--i) * 14%) cover calc(44% + var(--i) * 6%); }
  }
}
/* Kern: de ondernemer en de Brand Core naast elkaar, met de pijl ertussen. */
.url-rij { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 4.5rem); }
.url-core { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; padding: 0.875rem 1.25rem 0.875rem 0.875rem; border-radius: 0.875rem; background: var(--white); box-shadow: 0 14px 34px rgba(29, 29, 27, 0.18); }
.url-core b { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; color: var(--ink); }
.url-core em { grid-column: 2; display: block; height: 0.375rem; border-radius: 999px; background: var(--ink); opacity: 0.25; margin-top: 0.375rem; }
.url-core em:last-child { width: 60%; }
.bc-logo-klein { grid-row: span 3; display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 0.75rem; background: var(--purple); }
.bc-logo-klein i { display: block; width: 56%; aspect-ratio: 474 / 512; background: var(--white); -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
@media (max-width: 60rem) { .kern-hw-grid .poster { order: -1; } .url-rij { gap: 1.5rem; } }

/* Waarom dit werkt: één Brand Core, daaronder vier weekposts die uit dezelfde basis komen. */
.basis { display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: space-between; aspect-ratio: 5 / 4; padding: clamp(1.5rem, 3vw, 2.5rem); background-color: var(--white); background-image: radial-gradient(rgba(29, 29, 27, 0.16) 1.2px, transparent 1.3px); }
.basis .v-stift { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.basis .streep { stroke-width: 5; }
.basis-core { position: relative; z-index: 1; }
.basis-weken { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; width: 100%; align-self: end; }
.basis-weken li { display: flex; flex-direction: column; gap: 6%; padding: 0 0 8%; border-radius: 0.75rem; background: var(--white); box-shadow: 0 12px 28px rgba(29, 29, 27, 0.16); overflow: clip; aspect-ratio: 4 / 5; }
.basis-weken b { position: relative; flex: 1; display: block; background: var(--purple); }
.basis-weken li:nth-child(2) b { background: var(--ink); } .basis-weken li:nth-child(3) b { background: var(--lime); } .basis-weken li:nth-child(4) b { background: var(--purple-deep); }
.basis-weken b::after { content: ""; position: absolute; inset: 26%; background: var(--white); opacity: 0.24; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.basis-weken li:nth-child(3) b::after { background: var(--ink); }
.basis-weken i { display: block; height: 5%; margin-inline: 12%; border-radius: 999px; background: var(--ink); }
.basis-weken i:nth-of-type(1) { width: 62%; } .basis-weken i:nth-of-type(2) { width: 40%; opacity: 0.35; }
.basis-weken span { display: block; padding: 0.375rem 12% 0; font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 60rem) { .basis-weken { gap: 0.5rem; } .basis-weken span { font-size: 0.5625rem; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .basis { view-timeline-name: --basis; }
    .basis .streep { animation: streep-teken linear both; animation-timeline: --basis; animation-range: cover calc(26% + var(--i) * 10%) cover calc(38% + var(--i) * 10%); }
    .basis-weken li { animation: v-aan linear both; animation-timeline: --basis; animation-range: cover calc(38% + var(--i) * 5%) cover calc(46% + var(--i) * 5%); }
  }
}

/* ===== Ronde 36: Oplossingen als eigen pagina ===== */
/* Vier problemen als tegels: de uitspraak van de ondernemer groot, daaronder met een vinkje wat Whoosh! Studio overneemt. */
.probleem-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.probleem-tegels li { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--r); background: var(--mist); }
.probleem-tegels .pt-2, .probleem-tegels .pt-3 { background: var(--purple); color: var(--white); }
.probleem-tegels .eyebrow { color: var(--purple); }
.probleem-tegels .pt-2 .eyebrow, .probleem-tegels .pt-3 .eyebrow { color: var(--lime); }
.probleem-tegels h3 { max-width: 16ch; font-weight: 700; font-size: clamp(1.625rem, 2.6vw, 2.375rem); line-height: 1.06; letter-spacing: -0.035em; }
.pt-antwoord { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font-size: 1rem; line-height: 1.5; opacity: 0.9; }
.pt-antwoord .vink { flex: none; margin-top: 0.15em; background: var(--purple); color: var(--white); }
.pt-2 .pt-antwoord .vink, .pt-3 .pt-antwoord .vink { background: var(--lime); color: var(--ink); }
/* Advertising: post krijgt bereik. */
.adv-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.adv-grid > * + * { margin-top: 0 !important; }
.adv-grid > div > * + * { margin-top: 1.25rem; }
.adv-beeld { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: clamp(2.5rem, 6vw, 4.5rem); aspect-ratio: 5 / 4; padding: clamp(1.5rem, 3vw, 2.5rem); }
.adv-post { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6%; width: 7rem; aspect-ratio: 4 / 5; padding: 0 0 8%; border-radius: 0.75rem; background: var(--white); box-shadow: 0 14px 34px rgba(29, 29, 27, 0.18); overflow: clip; }
.adv-post b { position: relative; flex: 1; display: block; background: var(--purple); }
.adv-post b::after { content: ""; position: absolute; inset: 24%; background: var(--white); opacity: 0.24; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.adv-post i { display: block; height: 5%; margin-inline: 12%; border-radius: 999px; background: var(--ink); }
.adv-post i:last-child { width: 46%; opacity: 0.35; }
.adv-bereik { position: relative; z-index: 1; display: grid; gap: 1rem; justify-items: center; }
.adv-icoon { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; border-radius: 0.75rem; background: var(--lime); color: var(--ink); }
.adv-icoon svg { width: 56%; height: 56%; }
.adv-staven { display: flex; align-items: flex-end; gap: 0.5rem; height: 6.5rem; }
.adv-staven i { display: block; width: 1.25rem; height: calc(var(--h) * 100%); border-radius: 0.375rem 0.375rem 0.25rem 0.25rem; background: var(--purple); transform-origin: 50% 100%; }
.adv-staven i:last-child { background: var(--lime); }
.adv-beeld .v-stift { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* In ontwikkeling: drie tegels met icoon, naam en toelichting. */
.ontw-kop { max-width: 46rem; }
.ontw-kop > * + * { margin-top: 1.25rem; }
.ontw-kop .eyebrow { color: var(--purple); }
.ontw-tegels li { background: var(--white); }
.ontw-tegels h3 { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.03em; }
.ontw-tegels li p { max-width: none; margin-top: 0.5rem; font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.ontw-tegels li div { margin-top: auto; }
@media (max-width: 60rem) {
  .probleem-tegels, .adv-grid { grid-template-columns: 1fr; }
  .adv-beeld { gap: 2rem; }
  .ontw-tegels li { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .probleem-tegels li { animation: tegel-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; --van: 0px; }
    .probleem-tegels li:nth-child(even) { animation-range: entry 10% cover 32%; }
    .adv-beeld { view-timeline-name: --adv; }
    .adv-beeld .streep { animation: streep-teken linear both; animation-timeline: --adv; animation-range: cover calc(30% + var(--i) * 14%) cover calc(44% + var(--i) * 6%); }
    .adv-staven i { animation: v-groei-y linear both; animation-timeline: --adv; animation-range: cover 34% cover 52%; }
    @keyframes v-groei-y { from { scale: 1 0.15; } to { scale: 1 1; } }
  }
}

/* ===== Ronde 37: Pricing, het begin spannender (23-09-2026) ===== */
/* Hero en salarisvergelijking in één paars blok: links de vraag, rechts de optelsom als witte kaart.
   Geen aparte titel boven de tabel meer (de kop blijft voor schermlezers). */
.hero-pr-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-pr-grid > * + * { margin-top: 0 !important; }
.hero-pr .inner { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-pr .hero-copy .lead { max-width: 34rem; }
.optelsom { position: relative; z-index: 1; padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.2vw, 1.75rem); border-radius: var(--r); background: var(--white); color: var(--ink); box-shadow: 0 30px 70px rgba(29, 29, 27, 0.28); }
.som-lijst { list-style: none; margin: 0; padding: 0; }
.som-lijst li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); font-weight: 600; }
.som-lijst li:last-child { border-bottom: 0; }
.som-functie { color: var(--muted); }
.som-bedrag { position: relative; white-space: nowrap; letter-spacing: -0.02em; }
.som-bedrag strong { font-weight: 700; }
.som-bedrag small { font-size: 0.75em; font-weight: 500; color: var(--muted); }
.som-plus { position: absolute; right: 100%; margin-right: 0.6rem; font-weight: 700; color: var(--purple); }
.som-streep { display: block; width: 100%; height: 0.75rem; margin-top: 0.25rem; overflow: visible; }
.som-streep .streep { stroke-width: 4; }
.som-totaal { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.75rem; padding: 1rem 1.25rem 0.9rem; border-radius: var(--r-klein, 0.5rem); background: var(--ink); color: var(--white); font-weight: 700; letter-spacing: -0.02em; }
.som-totaal strong { font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.625rem); letter-spacing: -0.03em; color: var(--lime); white-space: nowrap; }
.som-noot { margin-top: 0.875rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.hero-pr .hero-bron { grid-column: 1 / -1; margin-top: clamp(2rem, 4vw, 3rem) !important; color: rgba(253, 254, 255, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .optelsom { animation: page-rise 900ms var(--ease-out) 180ms both; }
  .som-lijst li { animation: page-rise 700ms var(--ease-out) both; animation-delay: calc(420ms + var(--i) * 110ms); }
  .som-streep .streep { animation: streep-teken 520ms var(--ease-out) 1080ms both; }
  .som-totaal, .som-noot { animation: page-rise 700ms var(--ease-out) 1380ms both; }
  .som-noot { animation-delay: 1520ms; }
}
/* Brand Core Kick-off: eigen blok op mist, prijs in paars, rechts de Brand Core-tegels op een paars werkblad. */
.kickoff, .volw .kickoff { background: var(--mist); color: var(--ink); }
.kickoff-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.kickoff-grid > * + * { margin-top: 0 !important; }
.kickoff-tekst > * + * { margin-top: 1.25rem; }
.kickoff-tekst .eyebrow, .volw .kickoff .eyebrow { color: var(--purple); }
.kickoff-tekst .h-l { max-width: 14ch; }
.kickoff-tekst .prijs, .volw .kickoff .prijs { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; color: var(--purple); }
.kickoff-tekst p:not(.eyebrow):not(.prijs) { max-width: 40rem; color: var(--muted); }
.kickoff-beeld { display: grid; place-items: center; margin: 0; aspect-ratio: 5 / 4; max-height: 30rem; border-radius: var(--r); background-color: color-mix(in srgb, var(--purple) 88%, var(--white)); background-image: radial-gradient(rgba(253, 254, 255, 0.22) 1.2px, transparent 1.3px); background-size: 1.5rem 1.5rem; overflow: clip; }
/* Pakketkaarten: geen namenlijst meer; de naam staat bij hover of focus boven het portret. */
.team-rij .bust-wrap:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 50%; }
.team-rij .stack { padding-top: 0.25rem; }
@media (max-width: 60rem) {
  .hero-pr-grid, .kickoff-grid { grid-template-columns: 1fr; }
  .kickoff-beeld { aspect-ratio: 4 / 3; max-height: 22rem; }
  .som-lijst li { flex-wrap: wrap; gap: 0.1rem 1rem; }
  .som-functie { flex: 1 1 100%; font-size: 0.875rem; }
  .som-bedrag { margin-left: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kickoff-beeld { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}

/* ===== Ronde 38: kleine fixes homepage (23-09-2026) ===== */
/* 1. Chatballonnen: sneller op volle sterkte. Het probleemblok blijft als gordijn plakken zodra zijn onderkant het scherm raakt;
   de laatste ballon komt dan nooit verder dan net in beeld, dus de binnenkomst moet klaar zijn zodra de ballon helemaal in beeld is. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bubbles li:nth-child(n) { animation-range: entry 0% entry 100%; }
    /* 3. Reviews: de middelste kaart komt eerst omhoog, de buitenste schuiven daarna vanachter de middelste naar buiten. */
    .reviews > li:nth-child(2) { animation-name: review-midden; animation-range: entry 0% cover 24%; }
    .reviews > li:nth-child(1) { animation-name: review-links; animation-range: entry 14% cover 36%; }
    .reviews > li:nth-child(3) { animation-name: review-rechts; animation-range: entry 14% cover 36%; }
    @keyframes review-midden { from { opacity: 0; transform: translateY(3.5rem) scale(0.96); } to { opacity: 1; transform: none; } }
    @keyframes review-links { from { opacity: 0; transform: translate(4rem, 1.5rem) scale(0.94); } to { opacity: 1; transform: none; } }
    @keyframes review-rechts { from { opacity: 0; transform: translate(-4rem, 1.5rem) scale(0.94); } to { opacity: 1; transform: none; } }
  }
}
.reviews > li:nth-child(2) { position: relative; z-index: 1; }
/* Mobiel staan de kaarten onder elkaar: zijwaarts inschuiven heeft daar geen zin, en de eerste kaart stak vóór zijn binnenkomst
   4rem buiten het scherm, waardoor de hele pagina op mobiel horizontaal kon schuiven (gevonden 28-09-2026). Daar komen ze alle drie omhoog. */
@media (max-width: 60rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reviews > li:nth-child(n) { animation-name: review-midden; animation-range: entry 0% cover 24%; }
  }
}
/* 3. Portret bij de review: de ondernemer uit de hero, rond, met de uitsnede uit posRond in `helden`. */
.review-foto { position: relative; overflow: clip; background: var(--ink); }
.review-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* 4. Footer: de links en de tekst over Whoosh! Studio kleiner en lichter, zodat de afsluitende vraag alle aandacht krijgt. */
.site-footer .links { font-weight: 500; }
.site-footer .links a { font-size: 0.8125rem; color: rgba(253, 254, 255, 0.7); }
.footer-intro { font-size: 0.6875rem; line-height: 1.5; max-width: 70ch; margin-inline: auto; color: rgba(253, 254, 255, 0.42); }

/* ===== Ronde 39: Succesverhalen als eigen pagina (23-09-2026) ===== */
/* Hero: de vier thema's uit de docx als rustige glazen labels onder de intro. */
.sv-thema { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem !important; }
.sv-thema li { padding: 0.5em 0.9em 0.42em; border-radius: var(--r-klein, 0.5rem); background: rgba(253, 254, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.18); font-weight: 700; font-size: 0.875rem; line-height: 1; letter-spacing: -0.01em; }
.sv-detail-hero .eyebrow { margin-bottom: 1.25rem; color: var(--lime); }
.sv-detail-hero .eyebrow a { text-decoration: none; }
.sv-detail-hero .eyebrow a:hover { text-decoration: underline; }
.sv-detail-hero .lead { font-weight: 700; }
/* Kop boven de cases en de tekstkoppen op de subpagina. */
.sv-kop { max-width: 46rem; }
.sv-kop > * + * { margin-top: 1.25rem; }
.sv-kop .eyebrow { color: var(--purple); }
.k-ink .sv-kop .eyebrow, .k-purple .sv-kop .eyebrow { color: var(--lime); }
/* De cases als afwisselende rijen: foto 5/12, tekst 7/12; bij de even rijen staat de foto rechts. */
.cases { display: grid; gap: clamp(3rem, 6vw, 5.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); counter-reset: none; }
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line); }
.case:first-child { padding-top: 0; border-top: 0; }
.case:nth-child(even) .case-foto { order: 2; }
.case-foto { position: relative; display: block; aspect-ratio: 4 / 5; max-height: 36rem; overflow: clip; border-radius: var(--r); background: var(--ink); }
.case-foto picture, .case-foto img { display: block; width: 100%; height: 100%; }
.case-foto img { object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .case:hover .case-foto img { transform: scale(1.03); } }
.case-label { position: absolute; left: 0.875rem; bottom: 0.875rem; padding: 0.55em 0.9em 0.47em; border-radius: var(--r-klein, 0.5rem); background: var(--white); color: var(--ink); font-weight: 800; font-size: 0.8125rem; line-height: 1.1; }
.case-body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.case-body .eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; color: var(--purple); }
.case-nr { font-variant-numeric: tabular-nums; opacity: 0.6; }
/* De branche klein en gewoon geschreven achter de bedrijfsnaam, met een punt ertussen: geen label, zodat de naam de aandacht houdt. */
.case-sector { font-weight: 600; font-size: 0.875rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.case-sector::before { content: "·"; margin-right: 0.75rem; }
.case-body h3 { max-width: 20ch; font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.04; letter-spacing: -0.04em; }
.case-body .voorbeeld { position: static; margin-bottom: -0.5rem; }
.case-deel h4 { margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.case-over { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Omlijnd in plaats van gevuld (feedback 23-09-2026): rustiger naast de vinkjes en de review. */
.case-over li { padding: 0.5em 0.85em 0.42em; border-radius: var(--r-klein, 0.5rem); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 0.8125rem; line-height: 1; letter-spacing: -0.01em; color: var(--muted); }
.case-res { display: grid; gap: 0.625rem; }
.case-res li { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 52ch; font-weight: 600; font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.01em; }
.case-res .vink { width: 1.5rem; margin-top: 0.1em; background: var(--purple); color: var(--white); }
.case-review { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.375rem; align-items: center; margin: 0; padding: 1.25rem 1.5rem; border-radius: var(--r); background: var(--mist); }
.case-review .review-foto { grid-row: span 2; width: 3rem; }
.case-review blockquote { margin: 0; }
.case-review blockquote p { max-width: 44ch; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.02em; }
.case-review figcaption { font-size: 0.8125rem; color: var(--muted); }
/* Herkenning op de overzichtspagina: rechts de vier ondernemers als ronde portretten, groot. */
.sv-koppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 22rem; justify-self: end; }
.sv-koppen li a { position: relative; display: block; aspect-ratio: 1; overflow: clip; border-radius: 50%; background: var(--purple-deep); box-shadow: 0 0 0 4px rgba(253, 254, 255, 0.14); transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.sv-koppen li a:hover, .sv-koppen li a:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 4px var(--lime); }
.sv-koppen picture, .sv-koppen img { display: block; width: 100%; height: 100%; }
.sv-koppen img { object-fit: cover; }
.sv-koppen li:nth-child(even) { translate: 0 1.5rem; }
/* Detail: kerngegevens in de hero, als rij onder de intro met een hairline erboven; de kanalen met hun icoon. */
.sv-feiten { display: flex; flex-wrap: wrap; gap: 1.25rem clamp(2rem, 4vw, 3.5rem); margin: 2.25rem 0 0 !important; padding-top: 1.5rem; border-top: 1px solid rgba(253, 254, 255, 0.22); }
.sv-feiten div { min-width: 0; }
.sv-feiten dt { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(253, 254, 255, 0.62); }
.sv-feiten dd { margin: 0.4rem 0 0; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--white); }
.sv-kanalen { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.sv-kanalen span { display: inline-flex; align-items: center; gap: 0.4rem; }
.sv-kanalen svg { width: 1.125rem; height: 1.125rem; color: var(--lime); }
.sv-detail-hero .voorbeeld { position: static; display: inline-block; margin-top: 1.5rem; }
/* Hoofdstukken: kop links, tekst rechts, met een reusachtig licht nummer achter de kop. */
.sv-hoofdstukken .wrap { display: grid; gap: clamp(3.5rem, 7vw, 6.5rem); padding-block: clamp(1rem, 2vw, 2rem) var(--pad); }
.sv-hoofdstuk { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.sv-nr { position: absolute; left: -0.06em; top: -0.42em; z-index: 0; font-weight: 900; font-size: clamp(7rem, 16vw, 14rem); line-height: 1; letter-spacing: -0.06em; color: color-mix(in srgb, var(--ink) 4%, var(--white)); pointer-events: none; user-select: none; }
.sv-h-kop { position: relative; z-index: 1; padding-top: 0.5rem; }
.sv-h-kop .eyebrow { margin-bottom: 0.75rem; color: var(--purple); }
.sv-h-tekst { position: relative; z-index: 1; display: grid; gap: 1.25rem; }
.sv-h-tekst .big { max-width: 58ch; }
.sv-team { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.sv-team .stack .bust { --b: 3.25rem; width: var(--b); border: 2px solid var(--white); margin-right: calc(var(--b) * -0.22); }
.sv-team-noot { font-size: 0.875rem; color: var(--muted); }
/* Resultaat: drie tegels met nummer op ink. */
.sv-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3.5rem) !important; }
.sv-res li { display: flex; flex-direction: column; gap: 1.5rem; min-height: 14rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--r); background: rgba(253, 254, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.14); }
.sv-res-nr { font-weight: 800; font-size: 0.875rem; letter-spacing: 0.06em; color: var(--lime); font-variant-numeric: tabular-nums; }
.sv-res li p { max-width: 26ch; margin-top: auto; font-weight: 700; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.25; letter-spacing: -0.025em; color: var(--white); }
/* Review: groot citaat rechts van de kop. */
.sv-review-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.sv-review-grid > * + * { margin-top: 0 !important; }
.sv-quote { margin: 0; }
.sv-quote blockquote { margin: 0; }
.sv-quote blockquote p { max-width: 24ch; font-weight: 700; font-size: clamp(1.625rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -0.04em; }
.sv-quote figcaption { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.75rem; font-size: 0.9375rem; color: var(--muted); }
.sv-quote figcaption strong { display: block; color: var(--ink); }
/* Meer succesverhalen: drie kaarten met foto. */
.sv-meer-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.sv-meer-lijst a { display: flex; flex-direction: column; height: 100%; overflow: clip; border-radius: var(--r); background: var(--mist); text-decoration: none; transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.sv-meer-lijst a:hover, .sv-meer-lijst a:focus-visible { transform: translateY(-4px); box-shadow: var(--schaduw); }
.sv-meer-lijst picture, .sv-meer-lijst img { display: block; width: 100%; }
.sv-meer-lijst picture { aspect-ratio: 4 / 3; overflow: clip; }
.sv-meer-lijst img { height: 100%; object-fit: cover; }
.sv-meer-tekst { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.sv-meer-tekst .eyebrow { color: var(--purple); }
.sv-meer-tekst strong { font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.03em; }
.sv-meer-tekst .go { margin-top: auto; padding-top: 0.75rem; font-weight: 700; font-size: 0.9375rem; color: var(--purple); }
@media (max-width: 60rem) {
  .case, .sv-hoofdstuk, .sv-review-grid { grid-template-columns: 1fr; }
  .case:nth-child(even) .case-foto { order: 0; }
  .case-foto { max-height: 24rem; aspect-ratio: 4 / 3; }
  .sv-koppen { max-width: 16rem; justify-self: start; }
  .sv-res, .sv-meer-lijst { grid-template-columns: 1fr 1fr; }
  .sv-res li { min-height: 0; }
  .sv-nr { font-size: 6rem; top: -0.35em; }
}
@media (max-width: 36rem) { .sv-res, .sv-meer-lijst { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .case-foto, .case-body, .sv-hoofdstuk, .sv-quote, .sv-meer-lijst li { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
    .case-body { animation-range: entry 8% cover 30%; }
    .sv-res li { animation: tegel-in linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; --van: 0px; }
    .sv-res li:nth-child(2) { animation-range: entry 8% cover 32%; }
    .sv-res li:nth-child(3) { animation-range: entry 16% cover 36%; }
    .sv-koppen li { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}

/* ===== Ronde 40: Plan een demo met de sleepbare agenda (23-09-2026) ===== */
/* Elementen met display flex of grid moeten toch verdwijnen als het script ze verbergt (hidden-attribuut). */
.demo-agenda-blok [hidden], .demo-form [hidden], .demo-formulier-blok[hidden] { display: none !important; }
/* Hero compact (feedback 23-09-2026: de agenda moet in het eerste scherm vallen): kop links, intro en zekerheden rechts, kleine
   kop en weinig ruimte. De agenda-kaart valt over de onderrand. */
.demo-hero .inner { padding-block: 6.5rem 5.5rem; }
.demo-hero .hero-copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0.75rem clamp(1.5rem, 4vw, 4rem); align-items: end; max-width: none; }
.demo-hero .hero-copy > * { margin-top: 0 !important; }
.demo-hero .eyebrow { grid-column: 1 / -1; margin-bottom: 0.25rem; color: var(--lime); }
/* Specifieker dan .volw .hero-page h1.is-lang uit de volwassen laag. */
.volw .hero-page.demo-hero h1, .volw .hero-page.demo-hero h1.is-lang { max-width: 16ch; font-size: clamp(1.875rem, 3.2vw, 2.875rem); line-height: 1.02; }
.volw .hero-page.demo-hero .lead { margin-top: 0; font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.55; }
.demo-hero .hero-rechts > * + * { margin-top: 1.25rem; }
.demo-feiten { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 700; font-size: 0.875rem; }
.demo-feiten li { display: flex; align-items: center; gap: 0.5rem; }
.demo-feiten .vink { width: 1.25rem; background: var(--lime); color: var(--ink); }
.demo-agenda-blok .wrap { padding-top: 0; margin-top: calc(-1 * clamp(3.5rem, 5.5vw, 4.5rem)); }
/* De agenda staat stil: geen binnenkomst bij het scrollen (de kop zou anders de algemene .plain h2-animatie krijgen). */
.agenda h2, .agenda .agenda-kop, .agenda .agenda-grid { animation: none !important; }
@media (max-width: 60rem) { .demo-hero .hero-copy { grid-template-columns: 1fr; } }
.agenda { position: relative; z-index: 2; padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--r); background: var(--white); box-shadow: 0 1px 2px rgba(29, 29, 27, 0.06), 0 24px 60px rgba(29, 29, 27, 0.16); }
.agenda-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.agenda-kop .eyebrow { margin-bottom: 0.5rem; color: var(--purple); }
.agenda-kop .h-m { max-width: 16ch; }
.agenda-hint { max-width: 52ch; margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.agenda-week { display: flex; align-items: center; gap: 0.5rem; }
.agenda-weeklabel { min-width: 14ch; text-align: center; font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
.agenda-pijl { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 0.625rem; background: var(--mist); color: var(--ink); cursor: pointer; transition: background-color 160ms ease, opacity 160ms ease; }
.agenda-pijl svg { width: 1rem; height: 1rem; }
.agenda-pijl:hover:not(:disabled) { background: color-mix(in srgb, var(--mist) 80%, var(--ink)); }
.agenda-pijl:disabled { opacity: 0.35; cursor: default; }
/* Het raster: een urenkolom en vijf dagkolommen; de rijen zijn de slots van 30 minuten. Het demoblok staat in hetzelfde raster. */
.agenda-scroll { overflow: visible; }
.agenda-grid { --rij: 2.25rem; --uren: 3.25rem; position: relative; display: grid; grid-template-columns: var(--uren) repeat(5, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--slots), var(--rij)); column-gap: 0.375rem; touch-action: pan-y; user-select: none; }
.agenda-hoek { grid-column: 1; grid-row: 1; }
.agenda-dag { grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding-bottom: 0.75rem; }
.agenda-dag b { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.agenda-dag span { min-height: 1.2em; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.agenda-uren { grid-column: 1; grid-row: 2 / span var(--slots); display: grid; grid-template-rows: repeat(calc(var(--slots) / 2), 1fr); }
.agenda-uren span { position: relative; top: -0.55em; font-size: 0.75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.agenda-kolom { grid-row: 2 / span var(--slots); display: grid; grid-template-rows: repeat(var(--slots), 1fr); border-top: 1px solid var(--line); }
.agenda-slot, .agenda-post { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font: inherit; color: inherit; }
.agenda-slot:nth-child(odd) { border-bottom-style: dashed; border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }
.agenda-slot { cursor: grab; transition: background-color 120ms ease; }
.agenda-slot:hover:not(:disabled), .agenda-slot:focus-visible { background: color-mix(in srgb, var(--lime) 28%, var(--white)); }
.agenda-slot:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.agenda-slot:disabled { cursor: default; background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(29, 29, 27, 0.035) 6px 7px); }
/* Voorbeeldposts paars, het demoblok lime (besluit 23-09-2026): de kleur zegt wat van wie is. */
.agenda-post { display: flex; align-items: center; gap: 0.375rem; padding-inline: 0.5rem; border-radius: 0.375rem; border-bottom: 0; background: var(--purple); color: var(--white); font-size: 0.75rem; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; }
.agenda-post svg { flex: none; width: 0.875rem; height: 0.875rem; }
.agenda-demo { z-index: 2; display: flex; align-items: center; gap: 0.4rem; padding-inline: 0.625rem; border-radius: 0.5rem; background: var(--lime); box-shadow: 0 10px 24px rgba(29, 29, 27, 0.18); color: var(--ink); font-size: 0.8125rem; line-height: 1; cursor: grab; pointer-events: auto; white-space: nowrap; overflow: hidden; }
.agenda-demo b { font-weight: 800; }
.agenda-demo span { opacity: 0.7; font-weight: 600; }
.agenda.is-slepen, .agenda.is-slepen .agenda-slot, .agenda.is-slepen .agenda-demo { cursor: grabbing; }
.agenda.is-slepen .agenda-demo { box-shadow: 0 18px 36px rgba(29, 29, 27, 0.24); transform: scale(1.03); }
.agenda-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.25rem; }
.agenda-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.agenda-legenda li { display: flex; align-items: center; gap: 0.5rem; }
.agenda-legenda i { display: block; width: 1rem; height: 0.75rem; border-radius: 0.2rem; }
.agenda-legenda .l-post { background: var(--purple); }
.agenda-legenda .l-demo { background: var(--lime); }
.agenda-zonder { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.875rem; color: var(--purple); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
/* Het formulier: zonder JavaScript onder de agenda, met JavaScript in het venster. */
.demo-formulier-blok .wrap { padding-top: 0; }
.demo-form { display: grid; gap: 1.5rem; max-width: 44rem; }
.form-kop > * + * { margin-top: 1rem; }
.form-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1rem 1.25rem; border-radius: var(--r-klein, 0.5rem); background: var(--mist); }
.form-moment .eyebrow { width: 100%; font-size: 0.6875rem; color: var(--purple); }
.form-moment b { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.form-ander { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.875rem; color: var(--purple); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.form-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.veld { display: grid; gap: 0.375rem; min-width: 0; }
.veld > span, .veld legend { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.veld-breed { grid-column: 1 / -1; }
.veld input, .veld select, .veld textarea { width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--white); font: inherit; font-size: 1rem; color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease; }
.veld textarea { min-height: 6rem; resize: vertical; }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: 0; border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 22%, transparent); }
.veld-vorm { margin: 0; padding: 0; border: 0; }
.veld-vorm legend { padding: 0; margin-bottom: 0.375rem; }
.veld-vorm label { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: 1.5rem; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.veld-vorm input { width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--purple); }
.form-melding { padding: 0.875rem 1.125rem; border-radius: var(--r-klein, 0.5rem); background: #FFF3B8; font-size: 0.9375rem; font-weight: 600; }
.form-knop { justify-self: start; }
.demo-form .btn-primary { background: var(--lime); color: var(--ink); }
/* Het venster. */
.demo-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--r); background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(29, 29, 27, 0.35); }
.demo-dialog::backdrop { background: rgba(29, 29, 27, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.demo-dialog-inhoud { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); }
.demo-dialog .demo-form { max-width: none; }
.dialog-sluit { position: absolute; top: 1rem; right: 1rem; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 0.625rem; background: var(--mist); color: var(--ink); cursor: pointer; }
.dialog-sluit svg { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .demo-dialog[open] { animation: dialog-in 320ms var(--ease-out) both; }
  .demo-dialog[open]::backdrop { animation: backdrop-in 320ms ease both; }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(1rem) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
}
/* Wat bespreken we: zes tegels zoals op Wat kan; geruststelling gecentreerd op paars. */
.bespreek-tegels li { background: var(--white); }
.demo-gerust .inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.demo-gerust .eyebrow { margin-bottom: 1rem; color: var(--lime); }
.demo-gerust .h-l { max-width: 16ch; }
.demo-gerust .big { max-width: 46rem; margin-top: 1.25rem; }
.demo-gerust .actions { margin-top: 2rem; }
@media (max-width: 60rem) {
  .agenda-grid { --rij: 2rem; --uren: 2.75rem; column-gap: 0.25rem; }
  .agenda-post span { display: none; }
  .agenda-post { justify-content: center; padding-inline: 0; }
  .agenda-demo { padding-inline: 0.375rem; font-size: 0.75rem; }
  .agenda-demo span { display: none; }
  .agenda-kop .h-m { max-width: none; }
  .form-velden { grid-template-columns: 1fr; }
}

/* ===== Ronde 41: Kennisbank als vindbaarheids-hub met artikelen (23-09-2026) ===== */
/* Hub: hero met de onderwerpen als ankers (omlijnde labels op paars). */
.kb-hero .eyebrow { margin-bottom: 1.25rem; color: var(--lime); }
.kb-onderwerpen { margin-top: 2rem; }
.kb-onderwerpen ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kb-onderwerpen a { display: inline-block; padding: 0.55em 0.9em 0.47em; border-radius: var(--r-klein, 0.5rem); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.35); font-weight: 700; font-size: 0.875rem; line-height: 1; letter-spacing: -0.01em; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.kb-onderwerpen a:hover, .kb-onderwerpen a:focus-visible { background: var(--lime); color: var(--ink); box-shadow: none; }
/* Vragen per onderwerp: kop met lijn, dan kaarten van twee kolommen met de vraag als link en het directe antwoord eronder. */
.kb-groep { margin-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 6rem; }
.kb-groep-kop { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); }
.kb-groep-kop::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kb-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.kb-lijst-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.kb-kaart { position: relative; display: flex; flex-direction: column; gap: 0.875rem; padding: clamp(1.5rem, 2.4vw, 2rem); border-radius: var(--r); background: var(--mist); transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.k-mist .kb-kaart { background: var(--white); }
.kb-kaart:has(a:hover), .kb-kaart:has(a:focus-visible) { transform: translateY(-4px); box-shadow: var(--schaduw); }
.kb-kaart h3, .kb-kaart h4 { margin: 0; font-weight: 700; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.15; letter-spacing: -0.03em; }
.kb-kaart h3 a, .kb-kaart h4 a { text-decoration: none; }
.kb-kaart h3 a::after, .kb-kaart h4 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kb-kaart p { max-width: none; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.kb-lees { margin-top: auto; padding-top: 0.5rem; font-weight: 700; font-size: 0.875rem; color: var(--purple); }
.kb-slot .inner { display: flex; flex-direction: column; align-items: flex-start; }
.kb-slot .h-l { max-width: 20ch; }
.kb-slot .big { max-width: 46rem; margin-top: 1.25rem; }
.kb-slot .actions { margin-top: 2rem; }
/* Artikel: hero met kruimelpad, de vraag als kop en eventueel datum; daarna tekst links en een kolom rechts met inhoud en knop. */
.kb-artikel-hero .inner { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.kb-artikel-hero .eyebrow { margin-bottom: 1.25rem; color: var(--lime); }
.kb-artikel-hero .eyebrow a { text-decoration: none; }
.kb-artikel-hero .eyebrow a:hover { text-decoration: underline; }
.volw .hero-page.kb-artikel-hero h1, .volw .hero-page.kb-artikel-hero h1.is-lang { max-width: 18ch; font-size: clamp(2rem, 4.2vw, 3.75rem); }
.kb-meta { margin-top: 1.5rem; font-size: 0.875rem; font-weight: 600; color: rgba(253, 254, 255, 0.72); }
.kb-artikel-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.kb-tekst { display: grid; gap: clamp(2rem, 3.5vw, 3rem); }
.kb-tekst .voorbeeld { position: static; justify-self: start; }
.kb-direct { padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--r); background: var(--mist); border-left: 0.375rem solid var(--purple); }
.kb-direct .eyebrow { margin-bottom: 0.75rem; color: var(--purple); }
.kb-direct p:not(.eyebrow) { max-width: none; font-weight: 700; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.kb-sectie { scroll-margin-top: 6rem; }
.kb-sectie h2, .kb-samengevat h2 { margin-bottom: 0.875rem; font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -0.035em; }
.kb-sectie p { max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; color: var(--muted); }
.kb-sectie p + p { margin-top: 1rem; }
.kb-samengevat { padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.kb-samengevat ul { display: grid; gap: 0.625rem; }
.kb-samengevat li { position: relative; padding-left: 1.5rem; font-weight: 600; line-height: 1.5; }
.kb-samengevat li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.625rem; height: 0.625rem; border-radius: 0.2rem; background: var(--lime); }
.kb-zij { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.kb-inhoud { padding: 1.5rem; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.kb-inhoud .eyebrow { margin-bottom: 0.75rem; color: var(--purple); }
.kb-inhoud ol { display: grid; gap: 0.5rem; counter-reset: inhoud; }
.kb-inhoud li { counter-increment: inhoud; display: flex; gap: 0.75rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.kb-inhoud li::before { content: counter(inhoud, decimal-leading-zero); flex: none; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--purple); font-variant-numeric: tabular-nums; padding-top: 0.2em; }
.kb-inhoud a { text-decoration: none; }
.kb-inhoud a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kb-cta { padding: 1.5rem; border-radius: var(--r); background: var(--ink); color: var(--white); }
.kb-cta-kop { font-weight: 700; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.03em; }
.kb-cta p:not(.kb-cta-kop) { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.5; color: rgba(253, 254, 255, 0.78); }
.kb-cta .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
@media (max-width: 60rem) {
  .kb-lijst, .kb-lijst-3, .kb-artikel-grid { grid-template-columns: 1fr; }
  .kb-zij { position: static; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kb-kaart, .kb-direct, .kb-sectie, .kb-samengevat { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    .kb-lijst .kb-kaart:nth-child(even) { animation-range: entry 8% cover 28%; }
    .kb-artikel h2 { animation: none; }
  }
}

/* ===== Ronde 42: Over Whoosh! Studio als eigen pagina (23-09-2026) ===== */
.over-hero .eyebrow { margin-bottom: 1.25rem; color: var(--lime); }
.over-hero .kop-groep .kop-sub, .hw-hero .kop-groep .kop-sub { max-width: 22ch; color: rgba(253, 254, 255, 0.72); }
.volw .over-hero .kop-sub, .volw .hw-hero .kop-sub { opacity: 1; }
.over-hero .lead, .hw-hero .lead { margin-top: 1.75rem; }
/* Het kernteam in de hero: dezelfde donkerpaarse tegel als op Wat kan, hier rechts naast de kop. */
.over-trio { --th: clamp(18rem, 26vw, 26rem); border-radius: var(--r); background: var(--purple-deep); }
.over-trio img { transition: transform 600ms var(--ease-out); }
.over-trio:hover img { transform: translateY(-4px); }
/* Waarom: kop links, tekst rechts, met de drie woorden uit de tekst als labels met icoon. */
.over-waarom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.over-waarom-grid > * + * { margin-top: 0 !important; }
.over-waarom-grid .eyebrow { margin-bottom: 1rem; color: var(--purple); }
.over-waarom-grid .h-l { max-width: 18ch; }
.over-waarom-tekst .big { max-width: 58ch; }
.over-mist { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }
.over-mist li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; border-radius: var(--r-klein, 0.5rem); background: var(--mist); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em; }
.over-mist-icoon { display: grid; place-items: center; width: 1.75rem; aspect-ratio: 1; border-radius: 0.375rem; background: var(--purple); color: var(--white); }
.over-mist-icoon svg { width: 60%; height: 60%; }
/* Missie en visie: twee kaarten met icoontegel, label en de tekst groot. */
.over-mv-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.over-mv-kaarten li { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--r); background: var(--white); }
.over-mv-kaarten .eyebrow { margin-top: 0.5rem; color: var(--purple); }
.over-mv-kaarten .mv-icoon-1 { color: var(--purple); }
.over-mv-kaarten .mv-icoon-2 { background: var(--ink); color: var(--lime); }
.over-mv-tekst { max-width: 26ch; font-weight: 700; font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -0.03em; }
/* Belofte: kop plus subregel rechts van de illustratie; witte tekst op ink. */
.over-belofte-tekst > * + * { margin-top: 1.25rem; }
.over-belofte-tekst .eyebrow { color: var(--lime); }
.over-belofte-tekst .h-l { color: var(--white); }
.over-belofte-tekst .kop-sub, .volw .over-belofte-tekst .kop-sub { color: var(--white); opacity: 0.72; }
.over-belofte-tekst .big { max-width: 44rem; color: rgba(253, 254, 255, 0.86); }
/* Het team: gecentreerd, met de drie ronde portretten erboven. */
.over-team-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.over-team-inner .eyebrow { margin-top: 1.5rem; color: var(--purple); }
.over-team-inner .h-l { max-width: 18ch; margin-top: 0.75rem; }
.over-team-inner .big { max-width: 46rem; margin-top: 1.25rem; }
.over-team-inner .actions { margin-top: 2rem; }
.over-stack .bust { --b: 4.5rem; width: var(--b); border: 3px solid var(--white); margin-right: calc(var(--b) * -0.22); }
.over-stack .bust-wrap:last-child .bust { margin-right: 0; }
@media (max-width: 60rem) {
  .over-waarom-grid, .over-mv-kaarten { grid-template-columns: 1fr; }
  .over-trio { aspect-ratio: 4 / 3; height: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .over-mv-kaarten li, .over-mist li { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
    .over-mv-kaarten li:nth-child(2) { animation-range: entry 10% cover 30%; }
  }
}

/* ===== Ronde 43: eigen hero-scène per subpagina (feedback 23-09-2026: de fototegel was overal hetzelfde en te saai) =====
   Elke scène staat rechts in de hero (hero-wk-grid), spreekt de beeldtaal van de site (witte kaartjes met hairline, werkblad,
   ballonnen) en komt bij het laden binnen met alleen CSS. Bij prefers-reduced-motion staat alles direct stil op zijn plek. */
.hero-scene { position: relative; margin: 0; width: 100%; max-width: 30rem; justify-self: end; }
@keyframes scene-in { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes scene-pop { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: none; } }
.hero-scene [style*="--i"] { animation: scene-in 640ms var(--ease-out) both; animation-delay: calc(240ms + var(--i, 0) * 170ms); }
/* Wat kan: weekplanning. */
.hp-kaart { display: grid; gap: 0.75rem; padding: 1.25rem; border-radius: var(--r); background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1), 0 24px 60px rgba(29, 29, 27, 0.22); }
.hp-kop { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; text-align: center; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hp-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, 3.25rem); gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 3.75rem; background-position: 0 0.5rem; }
.hp-post { grid-column: var(--d); grid-row: var(--r); display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.4rem 0.5rem; border-radius: 0.5rem; font-size: 0.625rem; font-weight: 700; line-height: 1.1; overflow: hidden; }
.hp-post svg { width: 0.875rem; height: 0.875rem; }
.hp-post b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.hp-post.k-purple { background: var(--purple); color: var(--white); }
.hp-post.k-lime { background: var(--lime); color: var(--ink); }
.hp-post.k-ink { background: var(--ink); color: var(--white); }
.hp-stempel { justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--lime); color: var(--ink); font-size: 0.8125rem; font-weight: 800; animation: scene-pop 520ms var(--ease-out) 1600ms both; }
.hp-stempel svg { width: 0.875rem; height: 0.875rem; }
/* Hoe het werkt: drie stappen als kaartjes op een werkblad, met een lijn die zichzelf tekent. */
.hs-stappen { aspect-ratio: 5 / 4; max-width: 34rem; border-radius: var(--r); overflow: clip; box-shadow: 0 24px 60px rgba(29, 29, 27, 0.22); }
.hs-stappen .hs-pad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs-stappen .streep { stroke-width: 5; stroke-dasharray: 1 1.5; animation: streep-teken 1400ms cubic-bezier(0.4, 0, 0.2, 1) 700ms both; }
.hs-stap { position: absolute; display: grid; gap: 0.35rem; width: 27%; padding: 0.75rem; border-radius: 0.875rem; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1), 0 14px 34px rgba(29, 29, 27, 0.16); }
/* De lijn loopt van middelpunt naar middelpunt achter de kaarten langs (svg staat vóór de kaarten in de DOM): alleen de stukken ertussen zijn zichtbaar. */
/* Het proces loopt omhoog (feedback 24-09-2026: van boven naar onder leek terug in het proces): 01 linksonder, 03 rechtsboven. */
.hs-stap.s1 { left: 4%; bottom: 5%; } .hs-stap.s2 { left: 36.5%; top: 32%; } .hs-stap.s3 { left: 69%; top: 5%; }
.hs-stap .hs-nr { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; color: var(--purple); }
.hs-stap b { font-weight: 800; font-size: 0.9375rem; line-height: 1.1; letter-spacing: -0.02em; }
.hs-stap small { margin-top: -0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.hs-wie { display: flex; height: 2.5rem; }
.hs-wie .bust { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--white); margin-right: -0.6rem; overflow: clip; background: var(--ink); }
.hs-wie .bust img { width: 100%; height: 100%; object-fit: cover; }
.hs-bc { display: grid; grid-template-columns: repeat(2, 1.35rem); gap: 0.25rem; }
.hs-bc i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 0.3rem; font-style: normal; font-weight: 800; font-size: 0.625rem; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1); }
.hs-bc .bc-k { background: linear-gradient(135deg, var(--purple) 50%, var(--lime) 50%); }
.hs-bc .bc-l { background: var(--white); }
.hs-bc .bc-l::before { content: ""; width: 60%; aspect-ratio: 474 / 512; background: var(--purple); -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.hs-bc .bc-t { display: grid; gap: 0.2rem; align-content: center; padding: 0.3rem; }
.hs-bc .bc-t b { display: block; height: 0.15rem; border-radius: 1rem; background: var(--ink); } .hs-bc .bc-t b:last-child { width: 60%; opacity: 0.4; }
.hs-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; height: 2.5rem; }
.hs-week i { display: block; border-radius: 0.25rem; background: var(--mist); }
.hs-week i.is-post { background: var(--purple); }
/* Oplossingen: chatballonnen, dan een lime antwoord waarin de typpuntjes een vinkje worden. */
.hs-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.625rem; min-height: 20rem; }
.hs-ballon { align-self: flex-start; max-width: 86%; padding: 0.875rem 1.125rem; border-radius: 0.875rem 0.875rem 0.875rem 0.25rem; background: var(--white); color: var(--ink); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; letter-spacing: -0.015em; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1), 0 10px 24px rgba(29, 29, 27, 0.16); }
.hs-chat .hs-ballon[style*="--i"] { animation-delay: calc(240ms + var(--i) * 380ms); }
.hs-antwoord { position: relative; align-self: flex-end; min-width: 4.75rem; min-height: 2.75rem; border-radius: 0.875rem 0.875rem 0.25rem 0.875rem; background: var(--lime); }
.hs-typ { display: flex; gap: 0.3rem; align-items: center; height: 100%; animation: hs-typ-weg 240ms ease 3200ms both; }
.hs-typ i { display: block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ink); opacity: 0.4; animation: hs-typ 900ms ease-in-out infinite; }
.hs-typ i:nth-child(2) { animation-delay: 150ms; } .hs-typ i:nth-child(3) { animation-delay: 300ms; }
@keyframes hs-typ { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-0.2rem); opacity: 1; } }
@keyframes hs-typ-weg { to { opacity: 0; visibility: hidden; } }
.hs-vink { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); animation: scene-pop 460ms var(--ease-out) 3300ms both; }
.hs-vink svg { width: 1.25rem; height: 1.25rem; }
/* Succesverhalen: mozaïek van de vier ondernemers. */
.hs-mozaiek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding-bottom: 1.5rem; }
.hs-portret { position: relative; display: block; aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--r); background: var(--purple-deep); box-shadow: 0 18px 44px rgba(29, 29, 27, 0.22); }
.hs-portret:nth-child(even) { translate: 0 1.5rem; }
.hs-portret picture, .hs-portret img { display: block; width: 100%; height: 100%; } .hs-portret img { object-fit: cover; }
.hs-label { position: absolute; left: 0.625rem; bottom: 0.625rem; padding: 0.45em 0.7em 0.38em; border-radius: 0.375rem; background: var(--white); color: var(--ink); font-weight: 800; font-size: 0.6875rem; line-height: 1.1; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1); }
/* Kennisbank: zoekbalk met wisselende vragen en de eerste antwoorden. */
.hs-zoek { display: grid; gap: 0.75rem; }
.hs-balk { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1), 0 18px 44px rgba(29, 29, 27, 0.22); animation: scene-in 640ms var(--ease-out) 240ms both; }
.hs-loep { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--lime); color: var(--ink); }
.hs-loep svg { width: 1.125rem; height: 1.125rem; }
.hs-vragen { position: relative; flex: 1; min-width: 0; height: 1.5em; font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; }
/* Specifieker dan de algemene binnenkomst op [style*="--i"], anders blijven alle drie de vragen staan. */
.hs-zoek .hs-vragen .hs-vraag { position: absolute; inset: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: hs-zoek-cycle 9s ease-in-out infinite; animation-delay: calc(600ms + var(--i) * 3s); }
.hs-vraag::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 0.15rem; background: var(--purple); animation: hs-caret 900ms steps(2) infinite; }
@keyframes hs-zoek-cycle { 0% { opacity: 0; transform: translateY(0.4em); } 6% { opacity: 1; transform: none; } 30% { opacity: 1; transform: none; } 34% { opacity: 0; transform: translateY(-0.4em); } 100% { opacity: 0; } }
@keyframes hs-caret { to { opacity: 0; } }
.hs-hits { display: grid; gap: 0.5rem; }
.hs-hits li { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; border-radius: 0.75rem; background: rgba(253, 254, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.2); }
.hs-hits li[style*="--i"] { animation-delay: calc(900ms + var(--i) * 170ms); }
.hs-hits b { font-weight: 800; font-size: 0.875rem; line-height: 1.2; letter-spacing: -0.02em; }
.hs-hits span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8125rem; line-height: 1.4; color: rgba(253, 254, 255, 0.78); }
/* Is het iets voor jou: zelfcheck-kaart met vinkjes die één voor één aangaan. */
.hs-checkkaart { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--r); background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1), 0 24px 60px rgba(29, 29, 27, 0.22); animation: scene-in 640ms var(--ease-out) 240ms both; }
.hs-checkkop { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.03em; }
.hs-checkkaart ul { display: grid; gap: 0.75rem; }
.hs-checkkaart li { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.hs-box { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: 0.05em; border-radius: 0.375rem; box-shadow: inset 0 0 0 2px rgba(29, 29, 27, 0.2); color: var(--ink); animation: hs-box-aan 300ms ease both; animation-delay: calc(900ms + var(--i) * 450ms); }
.hs-box svg { width: 0.875rem; height: 0.875rem; animation: scene-pop 360ms var(--ease-out) both; animation-delay: calc(900ms + var(--i) * 450ms); }
@keyframes hs-box-aan { to { background: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); } }
@media (max-width: 60rem) {
  .hero-scene { max-width: none; justify-self: stretch; }
  .hs-stappen { aspect-ratio: 5 / 4; }
  .hs-chat { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene *, .hero-scene, .hs-balk, .hs-checkkaart { animation: none !important; }
  .hs-typ { display: none; } .hs-vink { opacity: 1; }
  .hs-vraag { opacity: 0; } .hs-vraag:first-child { opacity: 1; } .hs-vraag::after { display: none; }
  .hs-box { background: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
  .hs-stappen .streep { stroke-dashoffset: 0; }
}

/* ===== Ronde 44: het footer-logo slaat in beeld zodra het verschijnt (23-09-2026) =====
   Dezelfde vuistslag als het header-logo (keyframes logo-boom in base.css). header.js zet is-in-beeld zodra 60% van het logo
   in beeld is; tot die tijd is het onzichtbaar, maar alleen met JavaScript (js-header), anders staat het gewoon. */
.js-header .footer-brand:not(.is-in-beeld) .footer-logo { opacity: 0; }
.footer-brand.is-in-beeld .footer-logo { animation: logo-boom 560ms cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: reduce) {
  .js-header .footer-brand:not(.is-in-beeld) .footer-logo { opacity: 1; }
  .footer-brand.is-in-beeld .footer-logo { animation: none; }
}

/* ===== Ronde 45: Waaromblok na de feedback van 24-09-2026 =====
   De stelling bovenaan blijft ink (eigen vlak .waarom-stelling over de volle breedte); de redenen staan op mist, zoals het
   Voor-wie-blok, zodat stelling en redenen twee duidelijk verschillende delen zijn. De kaarten volgen de kleur van hun icoon: lime (prijs),
   paars (het jaar), wit (huisstijl). De prijskaart toont twee liggende staven met het bedrag voluit; de jaarkaart is een
   herkenbaar kalenderblad waarvan de maand bij het scrollen van januari naar december rolt.
   Uitlijning: elke tekst is precies zo hoog als de kaart en staat daarin gecentreerd; de ruimte tussen de redenen is een gap.
   Zo staat de eerste tekst op één lijn met de kaart zodra die gaat plakken, en de laatste zodra hij loslaat. */
.waaromblok { background: var(--mist); color: var(--ink); }
.waarom-stelling { background: var(--ink); color: var(--white); }
.redenen-wrap { padding-top: clamp(3rem, 7vw, 6rem); }
.r-prijs .reden-beeld { background: var(--lime); color: var(--ink); }
.r-jaar .reden-beeld { background: var(--purple); color: var(--ink); }
.r-huisstijl .reden-beeld { background-color: var(--white); }

/* Prijs: wie, bedrag, staaf. De korte staaf is 500 / het loondiensttotaal van Create (salarissen.mjs). */
.v-prijs { display: grid; align-content: center; gap: clamp(1.25rem, 2.4vw, 2rem); width: 100%; }
.v-rij { display: grid; gap: 0.25rem; }
.v-wie { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: rgba(29, 29, 27, 0.72); }
.v-bedrag { font-size: 0.875rem; font-weight: 600; }
.v-bedrag b { margin-right: 0.2rem; font-size: clamp(1.625rem, 2.4vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.v-balk { display: block; height: 0.875rem; margin-top: 0.375rem; border-radius: 999px; background: rgba(29, 29, 27, 0.1); overflow: hidden; overflow: clip; }
.v-balk i { display: block; width: calc(var(--w) * 100%); min-width: 0.875rem; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; }
.v-whoosh .v-balk i { background: var(--purple); }

/* Kalenderblad: twee ringen, de maand met een jaarbalk, de weekdagen en de dagen; posts staan op vaste dagen in de huisstijlkleuren. */
.v-kal { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.5rem; width: min(100%, 23rem); height: 100%; padding: 1.125rem 1.125rem 1rem; border-radius: 0.75rem; background: var(--white); color: var(--ink); box-shadow: 0 14px 34px rgba(29, 29, 27, 0.25); }
.v-kal::before, .v-kal::after { content: ""; position: absolute; top: -0.5rem; left: 26%; width: 0.5rem; height: 1.25rem; border-radius: 999px; background: var(--ink); }
.v-kal::after { left: auto; right: 26%; }
.v-kal-kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.625rem; box-shadow: 0 1px 0 rgba(29, 29, 27, 0.1); }
.v-maand { display: block; height: 1.25em; overflow: hidden; overflow: clip; font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; }
.v-maand > span { display: block; }
.v-maand b { display: block; height: 1.25em; font-weight: inherit; }
.v-jaarbalk { flex: none; width: 34%; height: 0.375rem; border-radius: 999px; background: var(--mist); overflow: hidden; overflow: clip; }
.v-jaarbalk span { display: block; height: 100%; border-radius: inherit; background: var(--purple); transform: scaleX(calc(1 / 12)); transform-origin: left; }
.v-kal-dagen, .v-kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; text-align: center; }
.v-kal-dagen span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.v-kal-grid { grid-auto-rows: minmax(0, 1fr); }
.v-kal-grid span { display: grid; place-items: center; border-radius: 0.375rem; background: var(--mist); font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-kal-grid .is-leeg { background: transparent; }
.v-kal-grid .is-post { font-weight: 700; }
.v-kal-grid .kp-paars { background: var(--purple); color: var(--white); }
.v-kal-grid .kp-lime { background: var(--lime); color: var(--ink); }
.v-kal-grid .kp-ink { background: var(--ink); color: var(--white); }

@media (max-width: 60rem) {
  .r-jaar .reden-beeld { height: 19rem; }
}

@keyframes v-balk { from { transform: scaleX(0); } }
@keyframes v-maand { to { transform: translateY(-13.75em); } }
@keyframes v-jaarbalk { to { transform: scaleX(1); } }
@keyframes v-post { from { background-color: var(--mist); color: var(--ink); } }

/* Desktop met ondersteuning: tekst zo hoog als de kaart, en de animaties op de tijdlijn van de eigen tekst. */
@media (min-width: 60.0625rem) and (prefers-reduced-motion: no-preference) {
  @supports (timeline-scope: --a) and (animation-timeline: view()) {
    .redenen { --kaart-h: 20rem; row-gap: clamp(8rem, 28vh, 16rem); }
    .reden-tekst { min-height: var(--kaart-h); }
    .reden-beeld { top: calc(50vh - var(--kaart-h) / 2); height: var(--kaart-h); }
    .v-balk i { animation: v-balk linear both; animation-timeline: --r0; animation-range: cover 14% cover 34%; }
    .v-whoosh .v-balk i { animation-range: cover 30% cover 42%; }
    /* De maand rolt terwijl de tweede tekst het midden passeert: twaalf standen, geen tussenstanden. */
    .v-maand > span { animation: v-maand steps(12, jump-none) both; animation-timeline: --r1; animation-range: cover 40% cover 74%; }
    .v-jaarbalk span { animation: v-jaarbalk steps(12, jump-none) both; animation-timeline: --r1; animation-range: cover 40% cover 74%; }
    .v-kal-grid .is-post { animation: v-post linear both; animation-timeline: --r1; animation-range: cover calc(34% + var(--i) * 0.8%) cover calc(38% + var(--i) * 0.8%); }
  }
}
/* Mobiel met ondersteuning: dezelfde animaties, op de eigen plek in beeld. */
@media (max-width: 60rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Eén tijdlijn per kaart, zodat maand en jaarbalk altijd gelijk lopen. */
    .v-prijs { view-timeline-name: --prijs; }
    .v-kal { view-timeline-name: --kal; }
    .v-balk i { animation: v-balk linear both; animation-timeline: --prijs; animation-range: entry 60% cover 50%; }
    .v-whoosh .v-balk i { animation-range: cover 40% cover 55%; }
    .v-maand > span { animation: v-maand steps(12, jump-none) both; animation-timeline: --kal; animation-range: cover 30% cover 75%; }
    .v-jaarbalk span { animation: v-jaarbalk steps(12, jump-none) both; animation-timeline: --kal; animation-range: cover 30% cover 75%; }
  }
}

/* ===== Ronde 46: stap 3 met voorbeeldposts, en het platform als eigen blok op Hoe het werkt (28-09-2026) =====
   Stap 3 toont drie voorbeeldposts naast elkaar (stilstaand), de middelste groter en bovenop; zelfde kaarten als het voorbeeldenblok.
   Het dashboard staat niet meer in de stappen maar in een eigen blok op Hoe het werkt: tekst links, het venster groot rechts. */
.stap-posts { display: flex; align-items: center; justify-content: center; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); }
/* De posts zijn zelf ook <figure>: de regels voor de stapfiguur (.stap figure, .stap.s3 figure) mogen er niet op landen. */
.stap .stap-posts .vb-post { display: block; flex: none; order: 0; width: 30%; height: auto; min-height: 0; margin: 0; padding: 0; background: var(--white); aspect-ratio: 4 / 5; }
.stap .stap-posts .vb-post:nth-child(2) { z-index: 1; width: 38%; margin-inline: -3%; }
.stap-posts .vb-post figcaption { left: 0.5rem; top: 0.5rem; gap: 0.3rem; padding: 0.3rem 0.5rem 0.3rem 0.4rem; font-size: 0.625rem; }
.stap-posts .vb-post figcaption svg { width: 0.8125rem; height: 0.8125rem; }
/* De tekst in de afspraakkaart (stap 1) kreeg de opmaak van de staptekst (.stap p en .volw .stap p wonnen): "Demo" stond klein en
   gedimd. Hier met genoeg gewicht om die regels te passeren. */
.volw .stap .afspraak p, .stap .afspraak p { max-width: none; margin: 0; opacity: 1; letter-spacing: -0.02em; }
.stap .afspraak .afspraak-titel { font-weight: 700; font-size: 1.875rem; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.stap .afspraak .afspraak-sub { font-weight: 600; font-size: 0.875rem; line-height: 1.3; color: var(--muted); }
/* Mobiel (feedback 28-09-2026): de posts zoals op desktop, alleen kleiner; het label past dan niet meer, dus alleen het kanaalicoon.
   De afspraakkaart van stap 1 werd afgesneden: daar een compacte liggende kaart, zonder de klokring. */
@media (max-width: 60rem) {
  .stap .stap-posts { padding: 1.25rem; }
  .stap .stap-posts .vb-post { width: 29%; }
  .stap .stap-posts .vb-post:nth-child(2) { width: 36%; }
  .stap-posts .vb-post figcaption { left: 0.375rem; top: 0.375rem; padding: 0.3rem; }
  .stap-posts .vb-post figcaption span { display: none; }
  .afspraak { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 1.25rem; row-gap: 0.25rem; width: min(20rem, 88%); padding: 1.25rem 1.5rem; }
  .afspraak-wie { grid-row: span 2; margin-bottom: 0; }
  .afspraak-wie .bust { width: 3.5rem; }
  .stap .afspraak .afspraak-titel { align-self: end; font-size: 1.5rem; }
  .afspraak-sub { align-self: start; }
  .afspraak-klok { display: none; }
}

.platform-hw-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.platform-hw-grid > * + * { margin-top: 0 !important; }
.platform-hw-copy .h-l { max-width: 15ch; }
.platform-hw-copy .big { margin-top: 1.25rem; }
.platform-punten { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.platform-punten li { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 600; line-height: 1.4; color: rgba(253, 254, 255, 0.9); }
.platform-punten .vink { width: 1.5rem; margin-top: -0.05em; background: var(--lime); color: var(--ink); }
.platform-hw .actions { margin-top: 2rem; }
.platform-hw-beeld { margin: 0; }
@media (max-width: 60rem) {
  .platform-hw-grid { grid-template-columns: 1fr; }
}

/* ===== Ronde 47: autoriteitsblok met een foto van het team (feedback 24-09-2026) =====
   De ontwerptafel is vervangen door een foto; de drie labels (strategie, art direction, creatieve keuzes) liggen linksonder
   op de foto als witte labels met hairline, zoals de labels op foto's elders op de site. */
.autoriteit-foto { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; overflow: clip; box-shadow: var(--schaduw); }
.autoriteit-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-labels { position: absolute; left: clamp(0.75rem, 1.6vw, 1.25rem); bottom: clamp(0.75rem, 1.6vw, 1.25rem); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.foto-labels li { padding: 0.55em 0.9em 0.5em; border-radius: var(--r-klein, 0.5rem); background: var(--white); color: var(--ink); font-weight: 700; font-size: clamp(0.75rem, 1vw, 0.9375rem); line-height: 1; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1), 0 8px 20px rgba(29, 29, 27, 0.12); }
.foto-labels .fl-art { background: var(--purple); color: var(--white); box-shadow: none; }

/* ===== Ronde 48: Succesverhalen, goedkoper dan personeel (feedback 24-09-2026) =====
   Tekst links, rechts dezelfde lime prijskaart als in het waaromblok (PrijsVergelijking.astro), met een eigen tijdlijn voor de staven. */
.sv-besparing-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.sv-besparing-grid > * + * { margin-top: 0 !important; }
.sv-besparing .h-l { max-width: 16ch; }
.sv-besparing .big { margin-top: 1.25rem; }
.sv-noot { max-width: 60ch; margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.sv-besparing .actions { margin-top: 2rem; }
.prijs-kaart { display: grid; place-items: center; min-height: 20rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); background: var(--lime); color: var(--ink); }
@media (max-width: 60rem) {
  .sv-besparing-grid { grid-template-columns: 1fr; }
  .prijs-kaart { min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .prijs-kaart .v-prijs { view-timeline-name: --prijs-sv; }
    .prijs-kaart .v-balk i { animation: v-balk linear both; animation-timeline: --prijs-sv; animation-range: entry 60% cover 45%; }
    .prijs-kaart .v-whoosh .v-balk i { animation-range: cover 35% cover 50%; }
  }
}

/* ===== Ronde 38: foto in plaats van het kernteam in het zichtbaarheidsblok (29-09-2026) ===== */
/* De foto vult de tegel en telt niet mee voor de hoogte van de rij: de beloftetegel ernaast bepaalt die, net als eerst met de Monkeys.
   De ondernemer staat iets links van het midden; de uitsnede houdt hem in beeld als de tegel smal en hoog is. */
.t-team.t-foto { padding: 0; background: var(--ink); }
.t-team.t-foto picture { position: absolute; inset: 0; height: auto; }
.t-team.t-foto img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 46% 35%; }
@media (max-width: 60rem) {
  .t-team.t-foto { height: auto; aspect-ratio: 4 / 3; }
}

/* ===== Ronde 39: de Monkeys als AI-specialisten benoemd (SEO/GEO-stappenplan, 29-09-2026) ===== */
/* In de showcase bij elke Monkey het label "AI-specialist". (De zin onder de kop is sinds 29-09-2026 het blok "In het kort" onder de showcase.) */
.sc-teller .sc-ai { margin-left: 0.75rem; padding: 0.3em 0.6em 0.22em; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: var(--r-klein, 0.5rem); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ===== Ronde 40: Over Whoosh! Studio, teamfoto in de hero en de mensen achter Whoosh! Studio (29-09-2026) ===== */
.over-foto { aspect-ratio: 5 / 4; max-height: none; }
.over-foto img { object-position: 50% 40%; }
/* René en Lars: tekst links, twee portretten rechts (de tweede iets lager, zoals de fototegels in het Voor-wie-blok).
   Zolang er geen portret is, staat er een rustig silhouet op mist met een hairline. */
.over-mensen-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.over-mensen-grid > * + * { margin-top: 0 !important; }
.over-mensen .eyebrow { margin-bottom: 1rem; color: var(--purple); }
.over-mensen .h-l { max-width: 16ch; }
.over-mensen .big { max-width: 46ch; margin-top: 1.25rem; }
.over-mensen-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-bottom: clamp(1.5rem, 3vw, 3rem); }
.over-mensen-lijst > li + li { margin-top: 0; }
.over-mensen-lijst li:nth-child(even) { translate: 0 clamp(1.5rem, 3vw, 3rem); }
.mens-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: clip; border-radius: var(--r); background: var(--mist); box-shadow: inset 0 0 0 1px var(--vf-lijn, rgba(29, 29, 27, 0.1)); }
.mens-foto picture, .mens-foto img { display: block; width: 100%; height: 100%; }
.mens-foto img { object-fit: cover; object-position: 50% 50%; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .over-mensen-lijst li:hover .mens-foto img { transform: scale(1.04); } }
.mens-silhouet { position: absolute; left: 50%; bottom: 0; width: 78%; translate: -50% 0; fill: color-mix(in srgb, var(--purple) 14%, transparent); }
.over-mensen-lijst h3 { margin-top: 1rem; font-weight: 700; font-size: clamp(1.25rem, 1.6vw, 1.5rem); letter-spacing: -0.03em; }
.mens-rol { margin-top: 0.25rem; color: var(--muted); }
.over-mensen .heel { white-space: nowrap; }
/* Portretten links, tekst rechts (feedback 29-09-2026): anders staan de koppen van "Waarom" en "De mensen" links onder elkaar.
   Alleen visueel omgedraaid; in de HTML blijft de kop vóór de portretten. Mobiel: eerst de portretten, dan de tekst. */
.over-mensen-lijst { order: -1; }
/* Direct na "Waarom" (ook wit): de mensen sluiten aan zonder dubbele witruimte ertussen. */
.over-waarom + .over-mensen { padding-top: 0; }
/* LinkedIn-icoon in het wit, rechtsonder in de foto: een vierkant van glas met hairline, zoals de pijlen van de hero.
   Bij hover wordt het vlak wit en het icoon ink. */
.mens-li { position: absolute; right: 0.875rem; bottom: 0.875rem; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: rgba(29, 29, 27, 0.28); color: var(--white); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.mens-li svg { width: 50%; height: 50%; }
@media (hover: hover) and (pointer: fine) { .mens-li:hover { background: var(--white); color: var(--ink); } }
.mens-li:active { transform: scale(0.96); }
.mens-li:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* Binnenkomst bij het scrollen: elke foto komt rustig omhoog, de tweede iets later, en het beeld zakt van iets groter naar zijn
   plek. Het beeld schaalt op <picture>, zodat de zoom bij hover (op <img>) blijft werken. Zonder ondersteuning of bij
   "verminder beweging" staat alles stil op zijn plek. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .over-mensen-lijst li { animation: mens-in linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    .over-mensen-lijst li:nth-child(even) { animation-range: entry 12% cover 36%; }
    .mens-foto picture { animation: mens-beeld linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    .mens-li { animation: mens-icoon linear both; animation-timeline: view(); animation-range: cover 24% cover 40%; }
    @keyframes mens-in { from { opacity: 0; transform: translateY(3.5rem); } to { opacity: 1; transform: none; } }
    @keyframes mens-beeld { from { transform: scale(1.16); } to { transform: none; } }
    @keyframes mens-icoon { from { opacity: 0; } to { opacity: 1; } }
  }
}
.kb-auteur-li { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-left: 0.5rem; border-radius: 0.25rem; background: rgba(253, 254, 255, 0.16); color: var(--white); vertical-align: -0.2em; transition: background-color 200ms var(--ease-out); }
.kb-auteur-li svg { width: 62%; height: 62%; }
@media (hover: hover) and (pointer: fine) { .kb-auteur-li:hover { background: var(--lime); color: var(--ink); } }
.kb-auteur-li:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (max-width: 60rem) {
  .over-mensen-grid { grid-template-columns: 1fr; }
  .over-mensen-lijst { gap: 0.625rem; }
}

/* ===== Ronde 41: bronverwijzing bij de salarisbedragen (29-09-2026) ===== */
/* Superscript ¹ achter elk salarisbedrag, als link naar de bronregel (#bron-salarissen). Staat boven de uitgerekte kaartlinks
   in de Kennisbank, zodat hij klikbaar blijft. De bronregel is gewone zichtbare tekst; de links naar Indeed zijn onderstreept. */
.bron-sup { font-size: 0.62em; line-height: 0; vertical-align: super; }
.bron-sup a { position: relative; z-index: 2; padding-inline: 0.1em; color: inherit; font-weight: 700; text-decoration: none; }
.bron-sup a:hover { text-decoration: underline; }
.bron-regel a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.bron-regel sup { font-size: 0.75em; line-height: 0; }
#bron-salarissen { scroll-margin-top: 6rem; }

/* ===== Ronde 42: vergelijkingstabel (SEO/GEO-stappenplan punt 6, 29-09-2026) ===== */
/* Echte tabel in een eigen scrollkader: op smalle schermen (en in de smalle artikelkolom) scrolt hij opzij en blijft de
   criteriumkolom links staan. De kolom Whoosh! Studio heeft een lichte paarse achtergrond; alle tekst blijft staan.
   border-collapse: separate, want met collapse verspringen de randen van plakkende cellen. */
.sec-tabel .h-l { max-width: 20ch; }
.vgl { margin-top: clamp(2rem, 4vw, 3rem); }
.kb-tabel .vgl { margin-top: 1.25rem; }
/* In de artikelkolom: grid-items mogen smaller worden dan de tabel, anders duwt de tabel de kolom breder en scrolt het kader niet. */
.kb-tekst, .kb-tabel { min-width: 0; }
.vgl-scroll { overflow-x: auto; border: 1px solid var(--vf-lijn, rgba(29, 29, 27, 0.1)); border-radius: var(--r); background: var(--white); overscroll-behavior-x: contain; }
.vgl-scroll:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.vgl-tabel { width: 100%; min-width: 64rem; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; line-height: 1.45; text-align: left; }
.vgl-tabel caption { caption-side: top; text-align: left; }
.vgl-tabel caption span { position: sticky; left: 0; display: block; max-width: min(46rem, calc(100vw - 2 * var(--gutter) - 2.5rem)); padding: 1.25rem 1.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.vgl-tabel th, .vgl-tabel td { padding: 1rem 1.25rem; vertical-align: top; border-bottom: 1px solid var(--vf-lijn, rgba(29, 29, 27, 0.1)); }
.vgl-tabel tbody tr:last-child > * { border-bottom: 0; }
.vgl-tabel thead th { font-weight: 700; font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.vgl-tabel tbody th { font-weight: 700; color: var(--ink); }
.vgl-tabel td { font-weight: 500; color: var(--muted); }
.vgl-tabel th:first-child { position: sticky; left: 0; z-index: 1; width: 12rem; background: var(--white); box-shadow: 1px 0 0 var(--vf-lijn, rgba(29, 29, 27, 0.1)); }
.vgl-tabel .vgl-ws { background: color-mix(in srgb, var(--purple) 6%, var(--white)); }
.vgl-tabel td.vgl-ws { color: var(--ink); }
.vgl-tabel thead .vgl-ws { color: var(--purple); }
.vgl-tabel .bron-sup a { z-index: 0; }
.vgl-noot { max-width: 84ch; margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.vgl-noot a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.vgl-noot sup { font-size: 0.75em; line-height: 0; }
#bron-vergelijking { scroll-margin-top: 6rem; }
@media (max-width: 36rem) {
  .vgl-tabel { min-width: 52rem; font-size: 0.875rem; }
  .vgl-tabel th, .vgl-tabel td { padding: 0.875rem 1rem; }
  .vgl-tabel th:first-child { width: 8.5rem; }
}

/* ===== Ronde 43: byline in kennisbankartikelen (29-09-2026) ===== */
/* Rond portret en naam van de auteur onder de vraag. Nu nog placeholders (René of Lars, mensen.mjs). */
.kb-auteur { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.4; color: rgba(253, 254, 255, 0.82); }
.kb-auteur b { font-weight: 700; color: var(--white); }
.kb-auteur-foto { flex: none; width: 3rem; height: 3rem; overflow: clip; border-radius: 50%; box-shadow: 0 0 0 2px rgba(253, 254, 255, 0.24); }
.kb-auteur-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.9); transform-origin: 50% 32%; }

/* ===== Ronde 44: knop onder de problemen op Oplossingen (29-09-2026) ===== */
.problemen-cta { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem) !important; }

/* ===== Ronde 45b: kennisbankartikelen met links, lijsten, tabellen en bronnen (29-09-2026) ===== */
.tekst-link { color: var(--purple); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.tekst-link:hover { text-decoration-thickness: 2px; }
.kb-punten { display: grid; gap: 0.5rem; max-width: 62ch; margin-top: 1rem; }
.kb-punten li { position: relative; padding-left: 1.375rem; font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }
.kb-punten li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 0.15rem; background: var(--purple); }
.kb-sectie .kb-punten + p, .kb-sectie .kb-tabel-vrij + p { margin-top: 1rem; }
/* Tabellen in een artikel: zelfde tabel als de vergelijking, maar smaller en zonder uitgelichte kolom. */
.kb-tabel-vrij { margin-top: 1.25rem; }
.kb-tabel-vrij .vgl-tabel { min-width: 34rem; }
.kb-tabel-vrij .vgl-tabel th:first-child { width: 11rem; }
.kb-tabel-vrij .vgl-tabel td { color: var(--ink); }
.kb-sectie, .kb-tekst > * { min-width: 0; }
.kb-bronnen { padding-top: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.kb-bronnen h2 { margin-bottom: 0.625rem; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink); }
.kb-bronnen ul { display: grid; gap: 0.375rem; }
.kb-bronnen .tekst-link { color: inherit; }
.kb-bronnen p { margin-top: 0.625rem; }
.kb-open { display: grid; gap: 0.375rem; }
@media (max-width: 36rem) { .kb-tabel-vrij .vgl-tabel { min-width: 30rem; } .kb-tabel-vrij .vgl-tabel th:first-child { width: 7.5rem; } }
/* Ankers op de Monkey-tegels (de Monkeys in het teamblok linken ernaar): ruimte voor de header. */
.tiles > li { scroll-margin-top: 6rem; }

/* ===== Ronde 47: consistentieronde (29-09-2026) ===== */
/* 1. Binnenkomst bij het scrollen. Tot nu toe kwam in de meeste blokken alleen de titel omhoog; het label erboven, de tekst
      eronder, de knoppen en de foto's stonden er al. Nu komen ze mee, elk op zijn eigen moment (eigen view-tijdlijn), zodat het
      label net voor de titel komt en de tekst en knoppen erna. Niet in de hero's (die hebben een binnenkomst bij het laden), niet
      in de agenda en de artikelen, en niet binnen elementen die zelf al binnenkomen (anders beweegt iets dubbel). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Let op: geen spatie tussen :is(...) en :not(...); met een spatie raakt de regel de kinderen in plaats van het element zelf. */
    :is(.plain, .block):not(.hero-page, .hero-x, .hero-poster, .showcase, .demo-agenda-blok, .kb-artikel) :is(.eyebrow, p.big, p.intro, p.lead-ink, .team-copy > p, .kickoff-tekst > p, .actions, a.btn, ul.vinkjes, .platform-punten, .wie-beroepen, .start-regel, .kleine-noot, .sv-noot, .vgl, .kb-groep-kop, .autoriteit-foto, .platform-hw-beeld, .wk-trio):not(:is(li, .sv-hoofdstuk, .tegel, .case-body, .kb-direct, .lijst, .actions, .start-regel, .vgl) *) {
      animation: mee-omhoog linear both; animation-timeline: view(); animation-range: entry 0% cover 24%;
    }
    /* Titels binnen een blok dat zelf al binnenkomt, bewogen dubbel (tegel, hoofdstuk van een succesverhaal, lijst). */
    :is(.plain, .block) :is(.tegel, .sv-hoofdstuk, .lijst) h2:not(.poster) { animation: none; }
    @keyframes mee-omhoog { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
  }
}
/* 2. Afstand tussen het label en de titel: overal 1,25rem bij een grote titel en 0,75rem bij een kleine (was 0 tot 44 px). */
.volw :is(.plain, .block):not(.hero-page, .hero-x, .showcase) .eyebrow:has(+ :is(h2.h-l, h2.h-xl, .kop-groep)) { margin-bottom: 1.25rem !important; }
.volw :is(.plain, .block):not(.hero-page, .hero-x, .showcase) .eyebrow:has(+ h2.h-m) { margin-bottom: 0.75rem !important; }
.volw :is(.plain, .block):not(.hero-page, .hero-x, .showcase) .eyebrow + :is(h2.h-l, h2.h-xl, h2.h-m, .kop-groep) { margin-top: 0 !important; }
/* 3. Label op mist is paars, zoals op wit (het label "Wat het kost" op Succesverhalen was ink). */
.k-mist .eyebrow { color: var(--purple); }
/* 4. De knop in de kick-off-balk op de homepage erfde de grotere letter van de balk; nu even groot als alle andere knoppen. */
.start-regel .btn { font-size: 1.0625rem; }
.volw .start-regel .btn { border-color: rgba(253, 254, 255, 0.7); }
/* 5. Tijdelijke pagina's (FAQ, privacy, voorwaarden): alleen een hero, dus iets hoger, met de knoppen onder de tekst. */
.hero-tijdelijk { min-height: 72svh; display: grid; align-items: center; }
.hero-tijdelijk .inner { width: 100%; }
.hero-tijdelijk .actions { margin-top: 2rem; }
/* 6. Mobiel: de losse knop in het Voor-wie-blok is net als de andere links uitgelijnde knoppen even breed als de tekst. */
@media (max-width: 36rem) { .wie-copy > .btn { display: flex; width: 100%; } }

/* ===== Ronde 49: prijskaart in het waaromblok en op Succesverhalen (feedback 02-10-2026) =====
   "Rommelig, meer focus op de prijzen": twee duidelijk verschillende delen. Het eigen team staat rustig op de lime kaart (klein label,
   middelgroot bedrag, ink-staaf); Whoosh! Studio is een eigen ink-vlak met het bedrag groot in lime en een lime staaf. Zo is ook op
   mobiel het verschil in grootte meteen te zien. */
.v-prijs { gap: clamp(0.875rem, 1.6vw, 1.25rem); }
.v-rij { gap: 0.125rem; }
.v-wie { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; color: rgba(29, 29, 27, 0.68); }
.v-bedrag { font-size: 0.8125rem; font-weight: 600; }
.v-team { padding-inline: clamp(0.25rem, 0.6vw, 0.5rem); }
.v-team .v-bedrag b { font-size: clamp(1.5rem, 2vw, 1.875rem); }
.v-team .v-balk { height: 0.5rem; margin-top: 0.5rem; }
.v-whoosh { padding: clamp(1rem, 1.6vw, 1.375rem) clamp(1.125rem, 1.8vw, 1.5rem) clamp(1.125rem, 1.8vw, 1.5rem); border-radius: 0.75rem; background: var(--ink); color: var(--white); }
.v-whoosh .v-wie { color: rgba(253, 254, 255, 0.7); }
.v-whoosh .v-bedrag { color: rgba(253, 254, 255, 0.7); }
.v-whoosh .v-bedrag b { font-size: clamp(2.75rem, 4.4vw, 3.75rem); line-height: 1; color: var(--lime); }
.v-whoosh .v-balk { height: 0.5rem; margin-top: 0.75rem; background: rgba(253, 254, 255, 0.14); }
.v-whoosh .v-balk i { min-width: 0.5rem; background: var(--lime); }
/* Binnenkomst bij het scrollen (verzoek 02-10-2026): eerst het eigen team met zijn staaf, dan schuift het ink-vlak omhoog, dan komt
   €500 in beeld en groeit de lime staaf. Alleen CSS op dezelfde tijdlijnen als de staven: desktop de tekst ernaast (--r0), mobiel de
   kaart zelf (--prijs), Succesverhalen de eigen kaart (--prijs-sv). Zonder ondersteuning of bij prefers-reduced-motion staat alles stil. */
@keyframes v-op { from { opacity: 0; transform: translateY(1rem); } }
@keyframes v-vlak { from { opacity: 0; transform: translateY(2rem) scale(0.96); } }
@keyframes v-prijs-in { from { opacity: 0; transform: translateY(0.35em) scale(0.8); } }
.v-whoosh .v-bedrag b { display: inline-block; transform-origin: left bottom; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v-team, .v-whoosh, .v-whoosh .v-bedrag b { animation: linear both; animation-timeline: --prijs; }
    .v-team { animation-name: v-op; animation-range: cover 8% cover 20%; }
    .v-team .v-balk i { animation-range: cover 12% cover 28%; }
    .v-whoosh { animation-name: v-vlak; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); animation-range: cover 22% cover 34%; }
    .v-whoosh .v-bedrag b { animation-name: v-prijs-in; animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); animation-range: cover 30% cover 40%; }
    .v-whoosh .v-balk i { animation-range: cover 36% cover 50%; }
    .prijs-kaart :is(.v-team, .v-whoosh, .v-whoosh .v-bedrag b) { animation-timeline: --prijs-sv; }
    .prijs-kaart .v-team .v-balk i { animation-range: cover 12% cover 28%; }
    .prijs-kaart .v-whoosh .v-balk i { animation-range: cover 36% cover 50%; }
  }
}
@media (min-width: 60.0625rem) and (prefers-reduced-motion: no-preference) {
  @supports (timeline-scope: --a) and (animation-timeline: view()) {
    .r-prijs :is(.v-team, .v-whoosh, .v-whoosh .v-bedrag b) { animation-timeline: --r0; }
    .r-prijs .v-team { animation-range: cover 12% cover 22%; }
    .r-prijs .v-team .v-balk i { animation-range: cover 16% cover 30%; }
    .r-prijs .v-whoosh { animation-range: cover 26% cover 36%; }
    .r-prijs .v-whoosh .v-bedrag b { animation-range: cover 33% cover 41%; }
    .r-prijs .v-whoosh .v-balk i { animation-range: cover 38% cover 50%; }
  }
}

/* ===== Ronde 50: probleemblok, twee alinea's even groot (feedback 02-10-2026) ===== */
.probleem-copy .lead-ink + .lead-ink { margin-top: 1.25rem; }

/* ===== Ronde 51: stap 2 (Kick-off) in één paars vlak (feedback 02-10-2026) =====
   Het lichtere paarse werkblad achter de Brand Core-tegels is weg: het paars van de stap loopt door achter de illustratie. */
.stap.s2 .werkblad-stap { background-color: transparent; background-image: none; }

/* ===== Ronde 52: functie in plaats van naam boven de portretten in de pakketkaarten (feedback 02-10-2026) =====
   De functie is langer dan de naam ("Art Director & Creative Lead"): het label breekt af op een vaste breedte, en staat bij de
   eerste twee portretten van een rij links uitgelijnd en bij de laatste twee rechts, zodat het niet buiten de kaart steekt. */
.team-rij .tag { width: max-content; max-width: 10.5rem; white-space: normal; line-height: 1.2; text-align: left; }
.team-rij .bust-wrap:nth-child(-n + 2) .tag { left: 0; transform: translate(0, 0.35rem); }
.team-rij .bust-wrap:nth-last-child(-n + 2) .tag { left: auto; right: 0; transform: translate(0, 0.35rem); text-align: right; }
.team-rij .bust-wrap:nth-child(-n + 2):is(:hover, :focus-within) .tag,
.team-rij .bust-wrap:nth-last-child(-n + 2):is(:hover, :focus-within) .tag { transform: none; }

/* ===== Ronde 53: footerlinks in groepen (feedback 02-10-2026) =====
   Drie groepen (Aanbod, Over ons, Hulp) met een klein kopje, links uitgelijnd in kolommen; privacy en voorwaarden staan klein op de
   onderste regel naast het adres. Alles blijft klein en licht: de afsluitende vraag houdt de aandacht. */
.footer-nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 1.5rem clamp(2.5rem, 6vw, 5rem); text-align: left; }
.footer-kop { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(253, 254, 255, 0.42); }
.footer-groep ul { display: grid; gap: 0.125rem; margin-top: 0.5rem; }
.footer-groep a, .footer-juridisch a { display: inline-block; padding-block: 0.1875rem; font-size: 0.8125rem; font-weight: 500; color: rgba(253, 254, 255, 0.7); text-decoration: none; }
.footer-juridisch a { padding-block: 0; font-size: 0.6875rem; color: rgba(253, 254, 255, 0.42); }
@media (hover: hover) and (pointer: fine) { .footer-groep a:hover, .footer-juridisch a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; } }
.footer-onder { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.25rem 1.25rem; }
.footer-onder .footer-adres { margin-top: 0; }
.footer-juridisch { display: flex; gap: 1.25rem; }
.site-footer .wrap > .footer-intro { margin-top: -0.5rem; }
@media (max-width: 40rem) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; width: 100%; max-width: 22rem; gap: 1.75rem 1.5rem; }
  /* Aanbod (vijf links) links over twee rijen, Over ons en Hulp rechts onder elkaar: geen gat in de rechterkolom. */
  .footer-groep:first-child { grid-row: span 2; }
}

/* ===== Ronde 54: Wat kan Whoosh! Studio, "Wat levert het op?" als typografische lijst (feedback 02-10-2026) =====
   De tegels met icoon zeiden niets. Nu: de kop links (plakt op desktop), rechts zes genummerde regels in grote letters met
   hairlines ertussen. De rest van de zin is gedempt, de kern (`nadruk`) staat in ink met een lime markeerstift die zich bij het
   scrollen over de woorden trekt. Zonder ondersteuning of bij prefers-reduced-motion staat de markering er gewoon. */
.levert-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.levert-grid > * + * { margin-top: 0 !important; }
.levert-grid > h2 { position: sticky; top: 7rem; }
.levert-lijst { border-top: 1px solid rgba(29, 29, 27, 0.12); }
.levert-lijst li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline; padding-block: clamp(1.25rem, 2.2vw, 1.875rem); border-bottom: 1px solid rgba(29, 29, 27, 0.12); }
.levert-nr { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--purple); font-variant-numeric: tabular-nums; }
.levert-lijst p { max-width: 30ch; font-size: clamp(1.375rem, 2.3vw, 2.125rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.035em; color: rgba(29, 29, 27, 0.5); }
.levert-nadruk { padding-inline: 0.06em; margin-inline: -0.06em; color: var(--ink); background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 88% / 100% 0.42em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes levert-stift { from { background-size: 0% 0.42em; } }
@keyframes levert-op { from { opacity: 0; transform: translateY(1.5rem); } }
@media (max-width: 60rem) {
  .levert-grid { grid-template-columns: 1fr; }
  .levert-grid > h2 { position: static; }
  .levert-lijst li { grid-template-columns: 2.5rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .levert-lijst li { animation: levert-op linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    .levert-nadruk { animation: levert-stift cubic-bezier(0.65, 0, 0.35, 1) both; animation-timeline: view(); animation-range: cover 22% cover 40%; }
  }
}

/* ===== Ronde 55: Monkey-showcase op mobiel, de Monkey groter (feedback 02-10-2026) =====
   Van 40dvh naar 58dvh; het blok groeit evenveel mee, zodat de Monkey omhoog over zijn functiewoord loopt (dat staat erachter)
   en niet tegen de paginakop aan komt. */
@media (max-width: 60rem) {
  .showcase { min-height: max(100dvh, calc(66rem + 18dvh)); }
  .sc-fig img { height: 58dvh; }
  /* Het functiewoord iets lager, zodat het bij elke Monkey achter hoofd en schouders staat (de poses verschillen in hoogte). */
  .sc-rol { padding-top: 17.5rem; }
}

/* ===== Ronde 56: Monkey-showcase op mobiel, wie en "Neemt uit handen" naast elkaar; vegen (feedback 02-10-2026) =====
   Onder de Monkey twee kolommen: links teller, naam, functie en rolomschrijving, rechts de checklist met kleinere vinkjes.
   touch-action: pan-y op de sliders: verticaal scrollen blijft van de browser, een horizontale veeg gaat naar slider.js. */
[data-slider] { touch-action: pan-y; }
@media (max-width: 60rem) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 1.25rem; align-items: start; }
  .sc-fig { grid-column: 1 / -1; }
  /* Teller op de eerste regel, het label AI-specialist eronder (de kolom is te smal voor beide naast elkaar). */
  .sc-teller { display: grid; grid-template-columns: repeat(3, auto) 1fr; justify-content: start; gap: 0.5rem 0.3rem; }
  .sc-teller .sc-ai { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  /* Met twee kolommen is de tekst onder de Monkey korter: het blok minder hoog en het functiewoord weer iets hoger. */
  .showcase { min-height: max(100dvh, calc(60rem + 18dvh)); }
  .sc-rol { padding-top: 15rem; }
  .volw .sc-card .sc-naam-groot { font-size: 1.375rem; line-height: 1.1; }
  .sc-card .sc-functie, .volw .sc-card .sc-functie { font-size: 0.875rem; line-height: 1.3; }
  .sc-card .sc-doet, .volw .sc-card .sc-doet { font-size: 0.8125rem; line-height: 1.45; }
  .sc-lijst ul { gap: 0.5rem; margin-top: 0.75rem; }
  .sc-lijst li { gap: 0.5rem; font-size: 0.875rem; line-height: 1.3; }
  .sc-lijst .vink { width: 1.0625rem; margin-top: 0.05em; }
}

/* ===== Ronde 57: Monkey-showcase op mobiel, nieuwe volgorde (feedback 02-10-2026) =====
   Onder de Monkey eerst de naam met het label AI-specialist ernaast, daaronder twee kolommen: links de functie als kolomtitel met
   de rolomschrijving, rechts "Neemt uit handen" met de checklist. Beide kolomtitels hebben precies dezelfde opmaak. De teller staat
   op mobiel niet meer in de tekst (vorige/volgende en vegen zijn er). Desktop blijft gelijk: daar staat het label naast de teller. */
.sc-ai-mobiel { display: none; }
.sc-naam-rij { display: block; }
@media (max-width: 60rem) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "fig fig" "naam naam" "functie lijst" "doet lijst"; grid-template-rows: auto auto auto 1fr; gap: 0 1rem; }
  .sc-fig { grid-area: fig; }
  .sc-wie { display: contents; }
  .sc-teller { display: none; }
  .sc-naam-rij { grid-area: naam; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1.25rem; }
  .sc-naam-rij .sc-naam-groot, .volw .sc-card .sc-naam-rij .sc-naam-groot { margin-top: 0; font-size: 1.75rem; line-height: 1.1; }
  .sc-ai-mobiel { display: inline-block; padding: 0.3em 0.6em 0.22em; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: var(--r-klein, 0.5rem); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); opacity: 0.7; }
  .sc-wie .sc-functie { grid-area: functie; }
  .sc-wie .sc-doet { grid-area: doet; }
  .sc-lijst { grid-area: lijst; }
  /* De twee kolomtitels: zelfde maat, gewicht, spatiëring, kapitalen, kleur en afstand. */
  .sc-card .sc-functie, .volw .sc-card .sc-functie, .sc-card.sc-lijst h4, .volw .sc-card.sc-lijst h4 { margin-top: 1.25rem; font-size: 0.75rem; font-weight: 800; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); opacity: 1; }
  .sc-card .sc-doet, .volw .sc-card .sc-doet { margin-top: 0.75rem; }
  .sc-lijst ul { margin-top: 0.75rem; }
  /* Zonder teller is de tekst korter: het blok iets lager, zodat de Monkey weer direct onder de kop over zijn functiewoord loopt. */
  .showcase { min-height: max(100dvh, calc(56.5rem + 18dvh)); }
}

/* ===== Ronde 58: Monkeys in ontwikkeling en de showcase op mobiel (feedback 02-10-2026) =====
   Label "In ontwikkeling" linksboven op de tegel van Finn, Cash, Rank en Tijn (op De Monkeys). */
.tile-status { position: absolute; left: 0.875rem; top: 0.875rem; z-index: 2; padding: 0.4rem 0.625rem 0.34rem; border-radius: var(--r-klein, 0.5rem); background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1), 0 6px 18px rgba(29, 29, 27, 0.16); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }

/* Showcase op mobiel: van boven naar beneden opgebouwd in plaats van onderaan uitgelijnd in een blok dat met de schermhoogte meegroeit
   (op een echte telefoon met adresbalk viel de Monkey daardoor onder zijn functiewoord). Het functiewoord staat direct onder de kop,
   de Monkey begint op dezelfde hoogte, zodat zijn hoofd over het woord valt, en zijn grootte volgt de breedte van het scherm. Zo staat
   de naam onder de Monkey zonder scrollen in beeld. */
@media (max-width: 60rem) {
  .showcase { min-height: max(100dvh, calc(13.25rem + min(121vw, 35rem) + 22rem)); }
  .sc-slide { align-items: flex-start; }
  .sc-rol { padding-top: 13rem; }
  .sc-grid { padding-top: 13.25rem; }
  .sc-fig img { height: min(121vw, 35rem); }
}

/* ===== Ronde 59: afdelingen op De Monkeys, teams in ontwikkeling als losse blokken (feedback 02-10-2026) =====
   SEO, Offline en drukwerk en B2B Sales zijn elk een eigen (gestippeld) blok met het label "In ontwikkeling" rechtsboven. */
.dept-grid li { position: relative; }
.dept-status { position: absolute; right: 1.25rem; top: 1.25rem; padding: 0.4rem 0.625rem 0.34rem; border-radius: var(--r-klein, 0.5rem); background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }

/* ===== Ronde 60: Oplossingen, In ontwikkeling: drie iconen in dezelfde opmaak (feedback 02-10-2026) =====
   De tegels erven de wisselende kleuren van de resultaattegels (paars, lime, ink); hier alle drie zoals de eerste: wit met hairline
   en een paars icoon. Extra specificiteit, omdat verfijnd.css na site.css laadt. */
.verfijnd .ontwikkeling .ontw-tegels li:nth-child(n) .tegel-icoon { background: var(--vf-vlak, var(--white)); box-shadow: inset 0 0 0 1px var(--vf-lijn, rgba(29, 29, 27, 0.1)); color: var(--purple); }

/* ===== Ronde 61: Over, missie en visie met iconen in dezelfde opmaak (feedback 02-10-2026) =====
   Visie had een ink-tegel met een lime pen, missie een witte tegel met hairline en een paars oog: nu allebei zoals missie. */
.verfijnd .over-mv-kaarten .tegel-icoon:is(.mv-icoon-1, .mv-icoon-2) { background: var(--vf-vlak, var(--white)); box-shadow: inset 0 0 0 1px var(--vf-lijn, rgba(29, 29, 27, 0.1)); color: var(--purple); }

/* ===== Ronde 62: Kennisbank, meer beelden (verzoek 02-10-2026) =====
   Elke vraagkaart (hub en gerelateerde vragen) heeft bovenaan een beeld over de volle kaartbreedte; elk artikel een groot beeld onder
   het directe antwoord en een tweede halverwege. Zolang er geen foto is: placeholder in huisstijl (KbBeeld.astro) met het symbool. */
.kb-beeld { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; overflow: clip; background: var(--mist); }
.kb-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kb-beeld.is-leeg::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 474 / 512; transform: translate(-50%, -50%); background: currentColor; -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.kb-beeld .open-note { position: absolute; left: 0.75rem; bottom: 0.75rem; }
.kb-beeld.t-paars { background: var(--purple); color: rgba(253, 254, 255, 0.2); }
.kb-beeld.t-ink { background: var(--ink); color: rgba(253, 254, 255, 0.14); }
.kb-beeld.t-licht { background-color: var(--white); background-image: radial-gradient(rgba(29, 29, 27, 0.14) 1.2px, transparent 1.3px); background-size: 1.25rem 1.25rem; color: color-mix(in srgb, var(--purple) 32%, transparent); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.1); }
.kb-kaart { --kp: clamp(1.5rem, 2.4vw, 2rem); }
.kb-kaart .kb-beeld-kaart { aspect-ratio: 2 / 1; margin: calc(-1 * var(--kp)) calc(-1 * var(--kp)) 0.375rem; border-radius: var(--r) var(--r) 0 0; }
.kb-tekst .kb-beeld-kop { margin-top: clamp(2rem, 4vw, 3rem); }
.kb-tekst .kb-beeld-midden { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ===== Ronde 63: Succesverhalen, geen ronde portretten in het paarse slotblok op mobiel (feedback 02-10-2026) =====
   De cases staan hoger op de pagina al met foto; op desktop blijven de vier rondjes naast de tekst staan. */
@media (max-width: 60rem) { .sv-koppen { display: none; } }

/* ===== Ronde 64: poster-hero voor de subpagina's, test op Wat kan Whoosh! Studio (feedback collega 02-10-2026) =====
   Grote titel in Gilroy Heavy kapitalen, regel voor regel gecentreerd, zo breed als het scherm toelaat (--l = langste regel,
   --n = aantal regels). Eromheen glazen kaartjes die passen bij de pagina, twee lime pijlen die zich tekenen en een draaiende lime
   sticker naar de demo. Fijn raster op het paars. De hero is korter dan het scherm, zodat het blok eronder al in beeld komt. */
.hero-poster { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--purple); color: var(--white); }
.hero-poster::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(253, 254, 255, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 254, 255, 0.075) 1px, transparent 1px); background-size: 4.5rem 4.5rem; background-position: center; -webkit-mask: radial-gradient(ellipse at 50% 45%, #000 35%, transparent 80%); mask: radial-gradient(ellipse at 50% 45%, #000 35%, transparent 80%); }
.ph-podium { position: relative; display: grid; place-items: center; width: min(100%, 88rem); height: clamp(32rem, 80svh, 50rem); margin-inline: auto; padding: 6.5rem var(--gutter) 3.5rem; }
.volw .hero-poster .ph-titel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin: 0; text-align: center; font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.84; font-size: min(calc(70vw / (var(--l) * 0.74)), calc(50svh / var(--n)), 12rem); color: var(--white); text-wrap: nowrap; }
.ph-regel { display: block; }
.ph-zwevers { position: absolute; inset: 6.5rem var(--gutter) 3rem; z-index: 2; pointer-events: none; }
.ph-tegel { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; border-radius: 1rem; background: rgba(253, 254, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.3), 0 18px 40px rgba(29, 29, 27, 0.22); color: var(--white); font-size: clamp(0.875rem, 1.1vw, 1.0625rem); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--r)); }
.ph-chip-icoon { display: grid; place-items: center; width: 2.25rem; aspect-ratio: 1; border-radius: 0.625rem; background: var(--white); color: var(--purple); }
.ph-chip-icoon svg { width: 58%; height: 58%; }
.ph-post { flex-direction: column; align-items: stretch; gap: 0.5rem; width: clamp(8.5rem, 12vw, 11.5rem); padding: 0.5rem 0.5rem 0.75rem; }
.ph-post-beeld { position: relative; display: block; aspect-ratio: 1; border-radius: 0.625rem; background: var(--white); }
.ph-post-beeld i { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 474 / 512; transform: translate(-50%, -50%); background: var(--purple); -webkit-mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; mask: url("/assets/logo/whoosh-icon.svg") center / contain no-repeat; }
.ph-post-kop { display: flex; align-items: center; gap: 0.375rem; padding-inline: 0.25rem; }
.ph-post-kop svg { width: 1rem; height: 1rem; }
.ph-post-sub { padding-inline: 0.25rem; font-size: 0.75rem; font-weight: 600; opacity: 0.75; }
.ph-pijl { position: absolute; width: clamp(5rem, 8vw, 8.5rem); color: var(--lime); overflow: visible; }
.ph-pijl-1 { left: 12%; top: 32%; }
.ph-pijl-2 { left: 76%; top: 64%; }
.ph-streep { stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ph-sticker { position: absolute; right: max(var(--gutter), 5%); bottom: 2.25rem; z-index: 3; display: grid; place-items: center; width: clamp(6.25rem, 8.5vw, 8.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--ink); text-decoration: none; box-shadow: 0 14px 34px rgba(29, 29, 27, 0.28); transition: scale 300ms var(--ease-out); }
.ph-sticker-tekst { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-sticker-tekst text { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; fill: currentColor; }
.ph-sticker-pijl { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .ph-sticker:hover { scale: 1.06; } }
.ph-sticker:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
@keyframes ph-in { from { opacity: 0; scale: 0.7; } }
@keyframes ph-teken { from { stroke-dashoffset: 1; } }
@keyframes ph-draai { to { rotate: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .ph-tegel { animation: ph-in 700ms var(--ease-out) calc(250ms + var(--i) * 110ms) both, zweef 6s ease-in-out calc(var(--i) * -1.4s) infinite alternate; }
  .ph-pijl-1 .ph-streep { animation: ph-teken 700ms cubic-bezier(0.65, 0, 0.35, 1) 900ms both; }
  .ph-pijl-2 .ph-streep { animation: ph-teken 700ms cubic-bezier(0.65, 0, 0.35, 1) 1200ms both; }
  .ph-pijl .ph-punt { animation-delay: 1500ms; }
  .ph-pijl-2 .ph-punt { animation-delay: 1800ms; }
  .ph-sticker { animation: ph-in 600ms var(--ease-out) 700ms both; }
  .ph-sticker-tekst { animation: ph-draai 18s linear infinite; }
}
@media (max-width: 60rem) {
  .ph-podium { height: clamp(25rem, 60svh, 31rem); padding: 5.5rem var(--gutter) 2.5rem; }
  .volw .hero-poster .ph-titel { font-size: min(calc(90vw / (var(--l) * 0.74)), calc(30svh / var(--n))); }
  .ph-zwevers { inset: 5.5rem var(--gutter) 2.5rem; }
  .ph-niet-mobiel, .ph-pijl-2 { display: none; }
  .ph-tegel { left: var(--xm); top: var(--ym); }
  .ph-pijl-1 { left: 30%; top: 12%; width: 3.5rem; rotate: 20deg; }
  .ph-tegel { padding: 0.375rem 0.625rem 0.375rem 0.375rem; gap: 0.5rem; font-size: 0.8125rem; border-radius: 0.75rem; }
  .ph-chip-icoon { width: 1.75rem; border-radius: 0.5rem; }
  .ph-post { width: 7rem; padding: 0.375rem 0.375rem 0.5rem; }
  .ph-post-sub { display: none; }
  .ph-sticker { width: 5.5rem; bottom: 0.75rem; right: 0.75rem; }
  .ph-sticker-tekst text { font-size: 16px; }
}

/* ===== Ronde 65: poster-hero op alle subpagina's (behalve home en De Monkeys, 02-10-2026) en het antwoordblok eronder ===== */
.ph-midden { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(1rem, 2vw, 1.5rem); text-align: center; }
.ph-boven .eyebrow, .ph-boven { color: var(--lime); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ph-boven a { color: inherit; text-decoration: none; }
.ph-boven a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ph-onder { display: grid; justify-items: center; gap: 1rem; color: rgba(253, 254, 255, 0.86); }
/* Lange titel (kennisbankartikel, casedetail): kleiner en gewoon doorlopend, nog steeds Heavy kapitalen. */
.volw .hero-poster.ph-lang .ph-titel { display: block; max-width: 20ch; font-size: clamp(2.25rem, 5vw, 5rem); line-height: 0.95; text-wrap: balance; }
/* Compact (Plan een demo): lager, zodat de agenda hoog in beeld staat. */
.ph-compact .ph-podium { height: clamp(26rem, 58svh, 34rem); padding-bottom: 6.5rem; }
.volw .hero-poster.ph-compact .ph-titel { font-size: min(calc(70vw / (var(--l) * 0.74)), calc(34svh / var(--n)), 9rem); }
.ph-compact .ph-zwevers { inset: 6rem var(--gutter) 5rem; }
/* Profielkaartje: rond portret met naam en een kleine regel, zoals in de referentie. */
.ph-profiel { gap: 0.75rem; padding: 0.5rem 1rem 0.5rem 0.5rem; }
.ph-avatar { flex: none; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 2px var(--white); }
.ph-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-profiel-tekst { display: grid; line-height: 1.15; }
.ph-profiel-tekst small { font-size: 0.75rem; font-weight: 600; opacity: 0.75; }
@media (max-width: 60rem) {
  .volw .hero-poster.ph-lang .ph-titel { font-size: clamp(1.875rem, 8vw, 2.75rem); }
  .ph-compact .ph-podium { height: clamp(22rem, 52svh, 28rem); }
  .volw .hero-poster.ph-compact .ph-titel { font-size: min(calc(80vw / (var(--l) * 0.74)), calc(26svh / var(--n))); }
  /* Lange titel op mobiel: de hero groeit mee met de tekst, de sticker staat eronder, geen kaartjes of pijlen. */
  .ph-lang .ph-podium { height: auto; min-height: 24rem; padding-bottom: 8rem; }
  .ph-lang .ph-zwevers, .ph-lang .ph-sticker { display: none; }
  .ph-lang .ph-podium { padding-bottom: 3.5rem; min-height: 0; }
  .hero-poster:has(.ph-boven) .ph-pijl-1, .ph-compact .ph-pijl { display: none; }
  .ph-pijl-1 { left: 50%; top: 14%; }
  .ph-avatar { width: 2.125rem; }
  .ph-profiel { padding: 0.375rem 0.75rem 0.375rem 0.375rem; }
}

/* Het antwoordblok direct onder de poster-hero: de kop klein links, de intro (SEO/GEO) rechts, met wat erbij hoort eronder. */
.antwoordblok { padding-block: clamp(4rem, 8vw, 7rem) !important; }
.antwoord-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.antwoord-grid > * + * { margin-top: 0 !important; }
.antwoord-kop > * + * { margin-top: 1rem; }
.volw .antwoordblok h2 { max-width: 18ch; font-size: clamp(1.75rem, 2.8vw, 2.75rem); line-height: 1.08; }
.volw .antwoordblok .kop-sub { font-size: clamp(1.375rem, 2.2vw, 2rem); }
.antwoord-tekst > * + * { margin-top: 1.5rem; }
@media (max-width: 60rem) { .antwoord-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Onderdelen die uit een hero naar het antwoordblok of een eigen blok zijn verhuisd: lichte varianten. */
.sv-thema-licht li { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.12); }
.kb-onderwerpen-licht { margin-top: 0; }
.kb-onderwerpen-licht a { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 27, 0.2); }
.kb-onderwerpen-licht a:hover, .kb-onderwerpen-licht a:focus-visible { background: var(--purple); color: var(--white); box-shadow: none; }
.pr-som .hero-bron { color: var(--muted); }
.pr-som .hero-copy .lead { color: var(--muted); }
.ph-citaat { max-width: 40ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 600; line-height: 1.4; }
.ph-lead { max-width: 40ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 500; }
.ph-onder .actions { justify-content: center; margin-top: 0.5rem; }
.ph-onder .kb-auteur { margin-top: 0; }
/* Casedetail: de foto (eerst in de hero) groot onder de poster-hero, met de kerngegevens eronder. */
.sv-detail-beeld { padding-bottom: 0 !important; }
.sv-detail-foto { position: relative; margin: 0; aspect-ratio: 16 / 7; border-radius: var(--r); overflow: hidden; overflow: clip; background: var(--ink); }
.sv-detail-foto picture, .sv-detail-foto img { display: block; width: 100%; height: 100%; }
.sv-detail-foto img { object-fit: cover; }
.sv-detail-foto figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: 0.55em 0.9em 0.47em; border-radius: var(--r-klein, 0.5rem); background: var(--white); color: var(--ink); font-weight: 800; font-size: 0.8125rem; line-height: 1.1; }
.sv-feiten-licht { margin-top: 1.5rem; color: var(--ink); }
@media (max-width: 60rem) { .sv-detail-foto { aspect-ratio: 4 / 3; } }
.sv-feiten-licht { border-top-color: rgba(29, 29, 27, 0.12); }
.sv-feiten-licht dt { color: var(--muted); }
.sv-feiten-licht dd { color: var(--ink); }
.sv-feiten-licht .sv-kanalen svg { color: var(--purple); }

/* ===== Ronde 66: introblok op de homepage (02-10-2026) =====
   De hero-tekst onder de klantenstrook: links de openingsvraag groot (ink, Bold), rechts de rest als rustige lopende tekst.
   Wit, net als de klantenstrook, zonder lijn ertussen; daarna volgt het waaromblok op ink. */
.home-intro { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem) !important; }
.home-intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.home-intro-grid > * + * { margin-top: 0 !important; }
.home-intro-vraag { max-width: 16ch; font-size: clamp(1.875rem, 3.2vw, 3rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.volw .home-intro .big { max-width: 38rem; font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
@media (max-width: 60rem) { .home-intro-grid { grid-template-columns: 1fr; gap: 1.25rem; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home-intro-vraag { animation: mee-omhoog linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
  }
}

/* ===== Ronde 67: hero op de homepage, tekst verticaal gecentreerd (verzoek 02-10-2026) =====
   Sinds de hero-tekst in het introblok staat, is het tekstblok kleiner; het staat nu in het midden van de hero in plaats van onderaan.
   De bediening (bedrijfslabel, teller, pijlen, voortgang) blijft rechtsonder (ronde 30, absoluut). Alleen desktop; mobiel blijft eerst
   de foto, dan de tekst. */
@media (min-width: 60.0625rem) {
  .hero-foto { padding-bottom: clamp(5.75rem, 11vh, 7.5rem); } /* gelijk aan de bovenmarge: de tekst staat precies in het midden */
  .hero-foto .hero-copy { margin-block: auto; padding-bottom: 0; }
}
/* Meer ruimte tussen "Geen inspiratie of geen tijd?" en de knoppen (verzoek 02-10-2026). */
.hero-foto .actions { margin-top: clamp(2.5rem, 5vh, 3.5rem); }
@media (max-width: 60rem) { .hero-foto .actions { margin-top: 1.75rem; } }

/* ===== Ronde 68: 404, "de enige pagina die we niet ontworpen hebben" (verzoek 06-10-2026) =====
   Poster-hero met de titel 404 als geselecteerd frame in een ontwerptool: lime kader dat zich tekent, vier grepen, framenaam en een
   label "Nog niet ontworpen". De 0 is hol (zoals "zichtbaar" op de homepage). Twee Monkey-cursors bewegen over het frame; Rens klikt
   op de 0, die even lime wordt en weer leegloopt. Rechtsboven een reactiedraad die zich na het laden opbouwt (typpuntjes, dan het
   bericht); bij het laatste bericht ploft het kaartje "+1 bezoeker" erin. Alles in CSS, bij prefers-reduced-motion staat alles stil
   en zijn alle berichten zichtbaar. Op mobiel geen zwevende kaartjes; de draad staat onder de knoppen. */
.nf-podium { height: auto; min-height: 100svh; padding-block: 8rem 5rem; }
/* De laatste term houdt naast de reactiedraad (25vw, max. 20rem) en de marge vrij, zodat de 404 er op een smal desktopscherm niet onder valt. */
.volw .hero-poster .nf-titel { font-size: min(30vw, 42svh, 21rem, calc(50vw - min(20rem, 25vw) - 4rem)); letter-spacing: -0.02em; line-height: 0.8; }
.nf-frame { position: relative; padding: 0 0.04em; }
.nf-nul { display: inline-block; color: transparent; -webkit-text-stroke: 0.022em var(--white); paint-order: stroke fill; }
@supports not (-webkit-text-stroke: 1px black) { .nf-nul { color: var(--white); opacity: 0.4; } }
.nf-selectie { position: absolute; inset: -1.125rem -1.75rem -0.75rem; pointer-events: none; }
.nf-kader { position: absolute; inset: 0; border: 2px solid var(--lime); }
.nf-greep { position: absolute; left: calc(var(--gx) * 100%); top: calc(var(--gy) * 100%); width: 0.875rem; aspect-ratio: 1; border: 2px solid var(--lime); border-radius: 2px; background: var(--white); translate: -50% -50%; }
.nf-framenaam { position: absolute; left: -2px; bottom: calc(100% + 0.5rem); display: inline-flex; align-items: center; gap: 0.375rem; color: var(--lime); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.nf-framenaam svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nf-maat { position: absolute; left: 50%; top: calc(100% + 0.625rem); padding: 0.35em 0.65em 0.3em; border-radius: 0.375rem; background: var(--lime); color: var(--ink); font-size: 0.8125rem; font-weight: 800; line-height: 1.1; white-space: nowrap; translate: -50% 0; }
.nf .ph-onder { margin-top: 3rem; }
.nf-lead { max-width: 24ch; font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.nf-sub { max-width: 44ch; font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 500; line-height: 1.55; text-wrap: pretty; }
/* De cursors: pijl in de lichte kleur van de Monkey met een naamlabel, zoals een medewerker in een ontwerptool. */
.nf-cursor { position: absolute; z-index: 4; left: var(--cx, 102%); top: var(--cy, 100%); display: block; width: 0; height: 0; }
.nf-c2 { --cx: -6%; --cy: 72%; }
.nf-cursor svg { position: absolute; left: -3px; top: -2px; width: 1.5rem; height: 1.5rem; fill: var(--kleur); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 4px 8px rgba(29, 29, 27, 0.3)); }
.nf-cursor b { position: absolute; left: 1.125rem; top: 1.25rem; padding: 0.3em 0.6em 0.25em; border-radius: 0.375rem; background: var(--kleur); color: var(--ink); font-size: 0.75rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }
/* De post die nooit gepost is: een leeg, gestippeld beeldvlak. */
.nf-post-beeld { background: transparent; box-shadow: inset 0 0 0 2px rgba(253, 254, 255, 0.4); }
.nf-post-beeld i { background: rgba(253, 254, 255, 0.35); }
.nf-likes { display: inline-flex; align-items: center; gap: 0.25rem; }
.nf-likes svg { width: 0.75rem; height: 0.75rem; }
.nf-bezoeker .ph-chip-icoon { background: var(--lime); color: var(--ink); }
/* De reactiedraad. */
.nf-draad { position: absolute; z-index: 3; right: max(var(--gutter), 3%); top: 7.5rem; display: grid; width: min(20rem, 25vw); padding: 0.875rem 0.875rem 1rem; border-radius: 1rem; background: rgba(253, 254, 255, 0.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.28), 0 18px 40px rgba(29, 29, 27, 0.22); color: var(--white); text-align: left; }
.nf-draad-kop { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(253, 254, 255, 0.18); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.nf-draad-kop svg { width: 1rem; height: 1rem; }
.nf-slot { display: grid; grid-template-rows: 1fr; }
/* Ruimte links (met negatieve marge) voor de witte ring om de avatar: de clip sneed die anders af. */
.nf-slot-in { display: grid; min-height: 0; margin-inline: -0.25rem; padding-inline: 0.25rem; overflow: hidden; overflow: clip; }
.nf-slot-in > * { grid-area: 1 / 1; padding-top: 0.875rem; }
.nf-bericht, .nf-typt { display: flex; align-items: flex-start; gap: 0.625rem; }
.nf-avatar { flex: none; width: 2.125rem; border-radius: 50%; box-shadow: 0 0 0 2px rgba(253, 254, 255, 0.85); }
.nf-bericht > span:last-child { display: grid; gap: 0.2rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.nf-bericht small { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 800; }
.nf-bericht em { padding: 0.15em 0.45em 0.1em; border-radius: 0.3rem; box-shadow: inset 0 0 0 1px rgba(253, 254, 255, 0.45); font-size: 0.625rem; font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.nf-typt { opacity: 0; }
.nf-puntjes { display: inline-flex; gap: 0.25rem; margin-top: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 0.75rem; background: rgba(253, 254, 255, 0.18); }
.nf-puntjes i { width: 0.375rem; aspect-ratio: 1; border-radius: 50%; background: var(--white); }
@keyframes nf-kader { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0); } }
@keyframes nf-plop { 0% { opacity: 0; scale: 0.3; } 60% { opacity: 1; scale: 1.18; } 100% { scale: 1; } }
@keyframes nf-leeg { from { color: var(--white); } to { color: transparent; } }
@keyframes nf-vul { 0%, 30% { -webkit-text-fill-color: currentColor; scale: 1; } 33% { -webkit-text-fill-color: var(--lime); scale: 1.06; } 36%, 54% { -webkit-text-fill-color: var(--lime); scale: 1; } 62%, 100% { -webkit-text-fill-color: currentColor; } }
@keyframes nf-c1 { 0%, 10% { left: 102%; top: 100%; } 28%, 55% { left: 50%; top: 56%; } 28% { scale: 1; } 31% { scale: 0.8; } 34% { scale: 1; } 72%, 86% { left: -2%; top: -3%; } 100% { left: 102%; top: 100%; } }
@keyframes nf-c2 { 0% { left: -6%; top: 72%; } 22% { left: 18%; top: 104%; } 44%, 52% { left: 84%; top: 18%; } 74% { left: 108%; top: 40%; } 100% { left: -6%; top: 72%; } }
@keyframes nf-open { from { grid-template-rows: 0fr; } }
@keyframes nf-in { from { opacity: 0; translate: 0 0.5rem; } }
@keyframes nf-typt { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nf-stip { 0%, 60%, 100% { translate: 0 0; opacity: 0.5; } 30% { translate: 0 -0.25rem; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .nf-kader { animation: nf-kader 700ms cubic-bezier(0.65, 0, 0.35, 1) 300ms both; }
  .nf-greep { animation: nf-plop 450ms var(--ease-out) calc(850ms + (var(--gx) + var(--gy) * 2) * 70ms) both; }
  .nf-framenaam, .nf-maat { animation: ph-in 500ms var(--ease-out) 1100ms both; }
  .nf-nul { animation: nf-leeg 1100ms var(--ease-out) 500ms both, nf-vul 10s ease-in-out 1.8s infinite; }
  .nf-c1 { animation: ph-in 400ms var(--ease-out) 1400ms both, nf-c1 10s cubic-bezier(0.45, 0, 0.25, 1) 1.8s infinite; }
  .nf-c2 { animation: ph-in 400ms var(--ease-out) 2000ms both, nf-c2 13s cubic-bezier(0.45, 0, 0.25, 1) 2.2s infinite; }
  .nf-draad { animation: ph-in 600ms var(--ease-out) 900ms both; }
  .nf-slot { --s: calc(1.5s + var(--j) * 1.9s); --m: calc(var(--s) + min(var(--j), 1) * 1.3s); animation: nf-open 400ms var(--ease-out) var(--s) both; }
  .nf-bericht { animation: nf-in 450ms var(--ease-out) var(--m) both; }
  .nf-typt { animation: nf-typt 1.3s linear var(--s) both; }
  .nf-puntjes i { animation: nf-stip 900ms ease-in-out infinite; }
  .nf-puntjes i:nth-child(2) { animation-delay: 150ms; }
  .nf-puntjes i:nth-child(3) { animation-delay: 300ms; }
  .nf-bezoeker { animation: nf-plop 700ms var(--ease-out) 6.5s both, zweef 6s ease-in-out 7.2s infinite alternate; }
}
@media (max-width: 60rem) {
  .nf-podium { padding-block: 8.5rem 3.5rem; gap: 2.5rem; }
  .volw .hero-poster .nf-titel { font-size: min(40vw, 30svh); }
  .nf-selectie { inset: -0.5rem -0.75rem -0.25rem; }
  .nf .ph-zwevers { display: none; }
  .nf-draad { position: static; width: min(100%, 22rem); }
  .nf-cursor b { font-size: 0.6875rem; }
}

/* ===== Ronde 70: home-hero in kapitalen met chatballon (06-10-2026, eerst als voorstel op /voorstel-hero/, home/Hero.astro) =====
   Bovenop de huidige hero (hero-x hero-foto: hele foto met zwarte overlay, klantenstrook in het eerste scherm, mobiel eerst de foto).
   De vraag in vier regels Gilroy Heavy kapitalen, links, "zichtbaar" hol, met dezelfde regelafstand (0.84) en spatiëring (-0.035em)
   als de poster-hero's (feedback 06-10-2026); elke regel past (9 tekens x 0.74 em = 6.66 em breed).
   De maskers van de regels hebben ruimte boven, rechts en onder, zodat geen letter wordt afgekapt. "Geen inspiratie of geen tijd?"
   is een paarse chatballon met typpuntjes (eerst wit, paars op verzoek 06-10-2026); op mobiel staat hij op de foto. Extra beweging: de foto zoomt langzaam uit zolang hij
   in beeld is, "zichtbaar" licht op bij elke wissel, en bij het wegscrollen schuift de tekst sneller omhoog dan de foto. */
.volw .hero-x.hero-caps .mega { font-weight: 900; letter-spacing: -0.035em; line-height: 0.84; text-transform: uppercase; font-size: min(calc(min(48vw, 44rem) / 6.66), 11.5vh); }
.volw .hero-x.hero-caps .line { padding: 0.12em 0.14em 0.1em 0; margin: -0.12em -0.14em -0.1em 0; }
.volw .hero-x.hero-caps .hol { -webkit-text-stroke-width: 0.024em; }
.hc-ballon { position: relative; z-index: 2; display: grid; margin-top: clamp(1.25rem, 3vh, 2rem); padding: 0.7em 1.05em 0.66em; border-radius: 1.125rem 1.125rem 1.125rem 0.3rem; background: var(--purple); color: var(--white); box-shadow: 0 1px 2px rgba(29, 29, 27, 0.1), 0 18px 40px rgba(29, 29, 27, 0.3); font-size: clamp(1.125rem, 1.6vw, 1.625rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-transform: none; white-space: nowrap; transform-origin: 0 100%; }
.hc-ballon > * { grid-area: 1 / 1; }
.hc-typt { display: inline-flex; align-items: center; gap: 0.3em; opacity: 0; }
.hc-typt i { width: 0.42em; aspect-ratio: 1; border-radius: 50%; background: var(--white); }
.hero-caps .actions { margin-top: clamp(1.75rem, 4vh, 2.75rem); }
@keyframes hc-ballon { 0% { opacity: 0; scale: 0.5; } 65% { opacity: 1; scale: 1.05; } 100% { scale: 1; } }
@keyframes hc-typt { 0%, 100% { opacity: 0; } 12%, 88% { opacity: 1; } }
@keyframes hc-tekst { from { opacity: 0; translate: 0 0.3em; } }
@keyframes hc-stip { 0%, 60%, 100% { translate: 0 0; opacity: 0.45; } 30% { translate: 0 -0.3em; opacity: 1; } }
@keyframes hc-flits { 0% { color: transparent; } 30% { color: var(--fg); } 100% { color: transparent; } }
@keyframes hc-kb { 0% { transform: scale(1.08); animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } 14% { transform: scale(1.035); animation-timing-function: linear; } 100% { transform: scale(1); } }
/* Het hoofd van de ondernemer blijft altijd in beeld (feedback 06-10-2026: op een breed, laag scherm viel de bovenkant weg): op desktop
   staat de foto bovenaan uitgelijnd (--pos-top, de x van pos met y 0%) en zoomen gebeurt vanaf de bovenrand, niet vanuit het midden. */
@media (min-width: 60.0625rem) { .hero-caps .hero-bg img { object-position: var(--pos-top, 78% 0%); transform-origin: 70% 0; } }
@keyframes hc-weg-tekst { to { translate: 0 -16vh; opacity: 0.25; } }
@keyframes hc-weg-foto { to { scale: 1.1; } }
@keyframes hc-weg-ballon { to { translate: 0 -16vh; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-caps .line:nth-child(4) > span { animation-delay: 270ms; }
  .hc-ballon { animation: hc-ballon 520ms var(--ease-out) 650ms both; }
  .hc-typt { animation: hc-typt 1000ms linear 700ms both; }
  .hc-typt i { animation: hc-stip 800ms ease-in-out infinite; }
  .hc-typt i:nth-child(2) { animation-delay: 130ms; }
  .hc-typt i:nth-child(3) { animation-delay: 260ms; }
  .hc-ballon-tekst { animation: hc-tekst 380ms var(--ease-out) 1700ms both; }
  /* Alleen op desktop: op mobiel zou de vergrote foto onder zijn eigen vlak uitsteken. */
  @media (min-width: 60.0625rem) { .hero-caps .hero-bg.is-active img { animation: hc-kb 11s linear both; } }
  /* Bij elke wissel licht "zichtbaar" even op. volw-leeg blijft in de lijst, zodat die niet opnieuw start. */
  .volw .hero-caps:has(.hero-bg.is-entering) .hol { animation: volw-leeg 1100ms var(--ease-out) 1300ms both, hc-flits 1200ms ease-in-out 300ms both; }
  @supports (animation-timeline: scroll()) { @media (min-width: 60.0625rem) {
    .hero-caps .mega { animation: hc-weg-tekst linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .hero-caps .hc-ballon { animation: hc-ballon 520ms var(--ease-out) 650ms both, hc-weg-ballon linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 90vh; }
    .hero-caps .hero-bgs { animation: hc-weg-foto linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  } }
}
@media (max-width: 60rem) {
  .hero-caps.hero-foto { --foto-h: 44dvh; }
  .volw .hero-x.hero-caps .mega { font-size: min(calc((100vw - 2 * var(--gutter)) / 6.66), 4.5rem); }
  /* De ballon staat op de foto, linksboven, alsof de ondernemer hem zegt. */
  .hero-caps .hc-ballon { position: absolute; left: var(--gutter); top: calc(var(--kop-h) + 1rem); margin: 0; font-size: 1rem; }
  .hero-caps .actions { margin-top: 1.5rem; }
}