/* Homepage – stijl "Klassiek" (zie STIJLRICHTLIJN.md). Gedeelde bouwstenen staan in site.css. */

/* ================= Hero ================= */
/* Hoogte van de hero: één scherm, binnen redelijke grenzen */
.hero-pin { --hero-h: clamp(560px, 100svh, 1200px); --hero-pin: 45svh; }
/* eindschaal van de uitgezoomde hero; de logostrook eronder neemt dezelfde breedte aan */
.flow { --hero-scale: .94; }

.hero {
  --hero-h: clamp(560px, 100svh, 1200px);
  /* linkerrand van de inhoud, gelijk met het logo */
  --edge: max(16px, calc((100vw - 1280px) / 2 + 16px));
  /* pay-off ≈ 7,5% van de beeldbreedte, gecentreerd; regel 2 is 11,5em breed en moet op één regel passen */
  --fs: min(7.5vw, calc((100vw - 2 * var(--edge)) / 11.6));
  --top-gap: clamp(16px, 2.4vw, 40px);
  --lines: 2;
  /* De hero is precies één scherm hoog, zodat de glazen kaart altijd in de eerste indruk staat.
     De uitsnede (Jop en Zoë, hoogte = 1,28 × breedte) is minstens zo breed dat de personen
     tot onder de rand doorlopen en daar worden afgesneden. */
  --title-h: calc(var(--lines) * .95 * var(--fs) - .23 * var(--fs));
  --fill-w: calc((100svh - var(--sc-masthead-h) - var(--top-gap) - var(--title-h)) / 1.28 * 1.1);
  --people-w: max(var(--fill-w), min(44vw, 760px));
  /* voorste persoon (Jop, ~29% van de uitsnede) iets links van het midden, Zoë rechts */
  --people-x: calc(45vw - .29 * var(--people-w));

  height: var(--hero-h);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sc-ink);
  color: var(--sc-white);
}

/* Alle lagen samen: schaalt bij het uitzoomen licht tegengesteld mee (camera-effect) */
.hero__zoom { position: relative; height: 100%; }

/* 1. Achtergrond zonder personen */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  filter: brightness(.5) saturate(.8);
  display: block;
}
/* 2. Merkfade op 23% */
.hero__fade { position: absolute; inset: 0; z-index: 1; background: var(--sc-fade); opacity: .23; }
/* 3. Korrel */
.hero__grain {
  position: absolute; inset: 0; z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: .25;
  pointer-events: none;
}

.hero__stage {
  /* geen eigen positionering: de glazen kaart richt zich op de hero (één schermhoogte) */
  position: static;
  padding-top: calc(var(--sc-masthead-h) + var(--top-gap));
  display: flex; flex-direction: column;
}

/* 4. Pay-off */
.hero__title {
  position: relative; z-index: 3;
  margin: 0; padding: 0 var(--edge);
  text-align: center; /* pay-off gecentreerd boven de personen */
  font-size: var(--fs); font-weight: 800; letter-spacing: -0.04em; line-height: .95;
}
.hero__line { display: block; white-space: nowrap; }
.hero__line--1 { color: var(--sc-white); }
.hero__line--2 { color: var(--sc-lime); }

/* 5. Personen: hoofden overlappen de onderkant van regel 2 met ~¼ letterhoogte
   (grondlijn ligt 0,13em boven de onderkant van de regel; ¼ van de x-hoogte ≈ 0,1em) */
.hero__people {
  position: relative; z-index: 4;
  display: block;
  width: var(--people-w);
  margin-left: var(--people-x);
  margin-top: calc(var(--fs) * -0.23);
  line-height: 0;
}
.hero__people img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}

/* UI: glazen kaart linksonder */
.hero__card {
  position: absolute; z-index: 5;
  left: var(--edge); bottom: clamp(16px, 3vw, 48px);
  width: min(450px, calc(100vw - 32px));
}
/* Hoofdknop in de hero: groter en met een lime gloed, zodat hij er direct uitspringt */
.btn--hero {
  padding: 15px 30px; font-size: var(--sc-fs-lead); font-weight: 600;
  box-shadow: 0 0 0 4px rgba(221, 229, 54, .28), var(--sc-shadow-3);
}
.btn--hero:hover { box-shadow: 0 0 0 6px rgba(221, 229, 54, .36), var(--sc-shadow-3); }

/* Tablet: groep groter zodat de personen het beeld blijven dragen */
@media (max-width: 1024px) {
  .hero { --people-w: max(var(--fill-w), 56vw); --people-x: calc(47vw - .29 * var(--people-w)); }
}

/* Mobiel: pay-off mag over vier regels lopen, groep breder dan het scherm */
@media (max-width: 720px) {
  .hero {
    --fs: 11.2vw;
    --lines: 4;
    --people-w: max(var(--fill-w), 112vw);
    /* groep gecentreerd: midden tussen Jop en Zoë ligt op ~45% van de uitsnede */
    --people-x: calc(50vw - .45 * var(--people-w));
  }
  .hero__line { white-space: normal; text-wrap: balance; }
  .hero__card { bottom: var(--sc-gutter); padding: var(--sc-space-4); }
  .glass__text { margin-bottom: var(--sc-space-3); font-size: var(--sc-fs-small); }
  .glass__actions .btn { padding: 10px 18px; font-size: var(--sc-fs-small); }
  .glass__actions .btn--hero { padding: 13px 22px; font-size: var(--sc-fs-body); }
}

/* ================= Klantlogo's: direct onder de uitgezoomde hero, even breed ================= */
.logo-strip {
  width: calc(100% * var(--hero-scale)); margin: 0 auto;
  padding-top: var(--sc-space-5);
}
/* Subtiel kopje boven de logo's */
.logo-strip__title {
  margin: 0 0 var(--sc-space-1); text-align: center;
  font-size: var(--sc-fs-small); font-weight: 500; color: var(--sc-ink-muted);
}
/* De logoslider zelf (.clients__…) staat in site.css, zodat hij ook op subpagina's werkt */

/* ================= Zo werkt het: video + uitleg ================= */
.intro-video { display: grid; grid-template-columns: 1fr; gap: var(--sc-space-7); align-items: center; }
@media (min-width: 960px) { .intro-video { grid-template-columns: 1fr 1.6fr; } }
.intro-video__body .section__intro + .section__intro { margin-top: var(--sc-space-3); }

.mini-stats {
  list-style: none; margin: var(--sc-space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-space-5) var(--sc-space-6);
}
.mini-stats li { display: flex; flex-direction: column; gap: var(--sc-space-1); padding-left: var(--sc-space-4); border-left: 2px solid var(--sc-lime); }
.mini-stats strong { font-size: var(--sc-fs-stat); font-weight: 700; line-height: var(--sc-lh-tight); letter-spacing: var(--sc-tracking-tight); color: var(--sc-blue); }
.mini-stats span { color: var(--sc-ink-muted); font-size: var(--sc-fs-small); }




/* ================= 3. Herkenning: "Waar loop je tegenaan?" =================
   Compacte lijst om te scannen: zes regels, elk een link naar de dienst die het oplost. Op grote
   schermen staat de kop links en de lijst rechts. Met een muis schuift bij aanwijzen één regel uitleg
   open; op aanraakschermen blijft het bij de korte regel, zodat het blok kort blijft. */
.herken { display: grid; gap: var(--sc-space-5); }
.herken .section__head { margin-bottom: 0; }
@media (min-width: 960px) {
  .herken { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: var(--sc-space-8); align-items: start; }
  .herken__side { position: sticky; top: calc(var(--sc-header-h, 96px) + var(--sc-space-5)); }
}
/* Oproep naar de 2 minuten fit-check: donker merkvlak onder de kop; op mobiel onder de lijst */
.herken__side { display: grid; gap: var(--sc-space-6); }
@media (max-width: 959px) { .herken__side { display: contents; } .fit-cta { order: 1; } }
.fit-cta { padding: var(--sc-space-6); }
.fit-cta .fit-cta__label { margin: 0 0 var(--sc-space-2); font-size: var(--sc-fs-small); font-weight: 500; color: var(--sc-lime); }
.fit-cta__title { margin: 0 0 var(--sc-space-3); font-size: var(--sc-fs-stat); font-weight: 700; line-height: var(--sc-lh-tight); letter-spacing: var(--sc-tracking-tight); color: var(--sc-white); }
.fit-cta .btn { margin-top: var(--sc-space-2); }
.pains { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-line); }
.pains > li { border-bottom: 1px solid var(--sc-line); }
.pain {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: var(--sc-space-5);
  padding: var(--sc-space-5) var(--sc-space-4) var(--sc-space-5) var(--sc-space-5);
  border-radius: var(--sc-radius-sm);
  text-decoration: none; color: inherit;
  transition: background-color var(--sc-dur-base) var(--sc-ease), box-shadow var(--sc-dur-base) var(--sc-ease);
}
/* lime streepje links = de actieve-menu-markering; groeit bij aanwijzen */
.pain::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; border-radius: 3px;
  background: var(--sc-lime); transform: translateY(-50%);
  transition: height var(--sc-dur-base) var(--sc-ease-out);
}
.pain__titel { margin: 0; font-size: var(--sc-fs-h3); font-weight: 700; line-height: var(--sc-lh-snug); }
.pain__dienst { margin: var(--sc-space-1) 0 0; font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-blue); }
.pain__pijl {
  grid-row: 1 / span 3; grid-column: 2;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--sc-line); color: var(--sc-ink); background: var(--sc-white);
  transition: background-color var(--sc-dur-base) var(--sc-ease), border-color var(--sc-dur-base) var(--sc-ease), transform var(--sc-dur-base) var(--sc-ease-out);
}
.pain__uitleg { display: none; }

@media (hover: hover) and (pointer: fine) {
  .pain__uitleg {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows var(--sc-dur-slow) var(--sc-ease-out), opacity var(--sc-dur-slow) var(--sc-ease);
  }
  .pain__uitleg > p { overflow: hidden; min-height: 0; margin: 0; color: var(--sc-ink-muted); }
  .pain:is(:hover, :focus-visible) { background: var(--sc-white); box-shadow: var(--sc-shadow-1); }
  .pain:is(:hover, :focus-visible)::before { height: calc(100% - 2 * var(--sc-space-4)); }
  .pain:is(:hover, :focus-visible) .pain__uitleg { grid-template-rows: 1fr; opacity: 1; }
  .pain:is(:hover, :focus-visible) .pain__uitleg > p { padding-top: var(--sc-space-2); }
  .pain:is(:hover, :focus-visible) .pain__pijl { background: var(--sc-lime); border-color: var(--sc-lime); transform: translateX(4px); }
}
.pain:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 3px; }
@media (max-width: 560px) {
  .pain { padding: var(--sc-space-4) 0 var(--sc-space-4) var(--sc-space-4); column-gap: var(--sc-space-3); }
  .pain__titel { font-size: var(--sc-fs-body); }
  .pain__pijl { width: 34px; height: 34px; }
}

/* ================= 7. Werkwijze (donker) ================= */
.process { display: grid; grid-template-columns: 1fr; gap: var(--sc-space-7); }
@media (min-width: 960px) {
  .process { grid-template-columns: 1fr 1.3fr; column-gap: var(--sc-space-8); align-items: start; }
  /* kop blijft in beeld terwijl je door de stappen scrolt */
  .process__intro { position: sticky; top: calc(var(--sc-header-h) + var(--sc-space-5)); }
}
.process__intro p { margin-bottom: 0; }

.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-space-7); }
/* voortgangslijn: groeit mee met het scrollen en laat zien waar je in het proces bent */
.steps::before, .steps::after {
  content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px;
}
.steps::before { background: var(--sc-on-dark-line); }
.steps::after { background: var(--sc-lime); transform-origin: top; }
.step { position: relative; padding-left: calc(40px + var(--sc-space-5)); }
.step__nr {
  /* boven de voortgangslijn, zodat de lijn achter het cijfer langs loopt */
  position: absolute; z-index: 1; left: 0; top: 0;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--sc-ink); border: 2px solid var(--sc-on-dark-line);
  font-weight: 700; color: var(--sc-white);
  transition: background-color var(--sc-dur-slow) var(--sc-ease), border-color var(--sc-dur-slow) var(--sc-ease), color var(--sc-dur-slow) var(--sc-ease), transform var(--sc-dur-slow) var(--sc-ease-out);
}
.step__title { margin: 6px 0 var(--sc-space-2); font-size: var(--sc-fs-h3); font-weight: 700; line-height: var(--sc-lh-snug); }
.step p { margin: 0; font-size: var(--sc-fs-body); }
.step__title, .step p { transition: opacity var(--sc-dur-slow) var(--sc-ease); }

/* Met JS: stappen lichten één voor één op zodra je ze bereikt */
.js .step:not(.is-active) .step__title,
.js .step:not(.is-active) p { opacity: .45; }
.js .step.is-active .step__nr { background: var(--sc-lime); border-color: var(--sc-lime); color: var(--sc-ink); transform: scale(1.08); }

/* ================= Beweging (homepage) =================
   Zelfde regels als in site.css: alleen transform en opacity, uit bij "minder beweging". */

/* Hero bij laden: belofte → mensen → actie, in die volgorde */
.js .hero__line { animation: sc-rise var(--sc-dur-reveal) var(--sc-ease-out) both; }
.js .hero__line--2 { animation-delay: calc(1 * var(--sc-stagger)); }
.js .hero__people img { animation: sc-people calc(var(--sc-dur-reveal) * 1.4) var(--sc-ease-out) both; animation-delay: calc(2 * var(--sc-stagger)); }
.js .hero__card { animation: sc-rise var(--sc-dur-reveal) var(--sc-ease-out) both; animation-delay: calc(5 * var(--sc-stagger)); }
@keyframes sc-people { from { opacity: 0; transform: translateY(6%) scale(.98); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {

    /* Sticky scale-down: de hero blijft vastgepind en zoomt uit tot een afgeronde kaart
       (schaal 1 → 0,94, radius 0 → 36px), terwijl de lagen binnenin licht tegengesteld
       meeschalen. Zo voelt het als een camera die uitzoomt, en zie je dat de pagina verdergaat.
       Pas na de extra scrollafstand (--hero-pin) laat de hero los. Zonder ondersteuning of bij
       "minder beweging" is er geen extra scrollafstand: dan is het een gewone hero. */
    .hero-pin { height: calc(var(--hero-h) + var(--hero-pin)); }
    .hero {
      position: sticky; top: 0;
      box-shadow: var(--sc-shadow-3);
      animation: sc-hero-card linear both;
      animation-timeline: scroll(root); animation-range: 0 var(--hero-pin);
    }
    .hero__zoom {
      animation: sc-hero-zoom linear both;
      animation-timeline: scroll(root); animation-range: 0 var(--hero-pin);
    }

    /* Voortgangslijn van de werkwijze vult zich terwijl je door de stappen scrolt */
    .steps::after { animation: sc-fill linear both; animation-timeline: view(); animation-range: cover 20% cover 65%; }
  }
}
@keyframes sc-hero-card { to { transform: scale(var(--hero-scale)); border-radius: var(--sc-radius-xl); } }
@keyframes sc-hero-zoom { to { transform: scale(1.025); } }
@keyframes sc-fill { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  .video-player__icon, .clients__list img, .step__nr, .pain, .pain::before, .pain__uitleg, .pain__pijl { transition: none; }
  .js .hero__line, .js .hero__people img, .js .hero__card { animation: none; }
}

/* ================= 5. Positionering: wie zet je in? =================
   Drie kolommen: stagiairs/werkstudenten — student consultants (donker merkvlak, in het midden en iets
   groter) — traditionele adviesbureaus. Bolletjes geven het niveau aan; de tekst ernaast zegt wat het betekent. */

.compare { display: grid; gap: var(--sc-space-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) {
  .compare { grid-template-columns: 1fr 1.2fr 1fr; gap: var(--sc-space-5); }
}
/* Mobiel: eigen aanbod eerst */
@media (max-width: 1023px) { .compare__main { order: -1; } }

.compare__side { gap: 0; height: auto; }
.compare__sub { margin: var(--sc-space-1) 0 var(--sc-space-3); font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-blue); }

/* Scores: label links, bolletjes + waarde rechts */
.compare__scores { margin: var(--sc-space-5) 0 0; }
.compare__scores > div {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-4);
  padding: var(--sc-space-3) 0; border-top: 1px solid var(--sc-line);
}
.compare__scores dt { font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.compare__scores dd { margin: 0; display: flex; align-items: center; gap: var(--sc-space-2); font-size: var(--sc-fs-small); font-weight: 600; white-space: nowrap; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-line); }
.dots i.on { background: var(--sc-ink); }

/* Voor- en nadelen uitklappen */
.compare__details { margin-top: var(--sc-space-5); }
.compare__details summary {
  cursor: pointer; list-style: none; font-weight: 600; color: var(--sc-blue);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.compare__details summary::-webkit-details-marker { display: none; }
.compare__details summary:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 3px; border-radius: 4px; }
.compare__details[open] summary { margin-bottom: var(--sc-space-3); }
.compare__kop { margin: var(--sc-space-3) 0 var(--sc-space-1); font-size: var(--sc-fs-small); font-weight: 700; }
.compare__details ul { margin: 0; padding-left: 1.1em; color: var(--sc-ink-muted); font-size: var(--sc-fs-small); }
.compare__details li { margin-bottom: var(--sc-space-1); }
.compare__details[open] > :not(summary) { animation: sc-rise var(--sc-dur-slow) var(--sc-ease-out); }

/* Midden: donker merkvlak met foto bovenaan die in het vlak overloopt */
.compare__main { padding: 0; display: flex; flex-direction: column; }
.compare__img {
  display: block; width: 100%; height: 240px; object-fit: cover; object-position: center 35%;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.compare__main-body { padding: 0 clamp(var(--sc-space-5), 3vw, var(--sc-space-7)) clamp(var(--sc-space-6), 3vw, var(--sc-space-7)); margin-top: calc(-1 * var(--sc-space-7)); position: relative; }
.compare__title { margin: 0; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.compare__main .compare__sub { color: var(--sc-lime); }
.panel .compare__kern { margin: 0; max-width: none; font-size: var(--sc-fs-lead); color: var(--sc-white); }
.compare__main .compare__scores > div { border-top-color: var(--sc-on-dark-line); }
.compare__main .compare__scores dt { color: var(--sc-on-dark-muted); }
.compare__main .dots i { background: var(--sc-on-dark-line); }
.compare__main .dots i.on { background: var(--sc-lime); }
.compare__why { list-style: none; margin: var(--sc-space-4) 0 0; padding: 0; display: grid; gap: var(--sc-space-2); }
.compare__why li { position: relative; padding-left: var(--sc-space-6); color: var(--sc-on-dark-muted); font-size: var(--sc-fs-small); }
.compare__why li::before {
  content: ""; position: absolute; left: 2px; top: .4em; width: 12px; height: 6px;
  border-left: 2px solid var(--sc-lime); border-bottom: 2px solid var(--sc-lime); transform: rotate(-45deg);
}
.compare__main .actions { margin-top: var(--sc-space-5); }
@media (min-width: 1024px) { .compare__main { box-shadow: var(--sc-shadow-3); } }

@media (prefers-reduced-motion: reduce) { .compare__details[open] > :not(summary) { animation: none; } }

/* Inschuiven tijdens het scrollen (alleen breed scherm, alleen browsers met scroll-gestuurde animaties):
   de twee alternatieven liggen eerst achter het middelste vlak en waaieren uit naar hun plek, terwijl het
   middelste vlak licht omhoog komt. De scrollpositie bepaalt hoe ver de beweging is, dus terugscrollen
   schuift ze weer samen. Zonder ondersteuning of bij "minder beweging": gewone onthulling. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  @supports (animation-timeline: view()) {
    .compare { view-timeline-name: --compare; position: relative; }
    .compare__main { position: relative; z-index: 2; }
    .compare__side { position: relative; z-index: 1; }
    /* de gewone onthulling uitzetten: de scrollbeweging neemt het over */
    .js .compare > [data-reveal] { opacity: 1; transform: none; transition: none; }

    .compare__main {
      animation: sc-compare-main linear both;
      animation-timeline: --compare; animation-range: entry 0% entry 85%;
    }
    .compare__side--stagiairs {
      transform-origin: right center;
      animation: sc-compare-left linear both;
      animation-timeline: --compare; animation-range: entry 20% entry 100%;
    }
    .compare__side--adviesbureau {
      transform-origin: left center;
      animation: sc-compare-right linear both;
      animation-timeline: --compare; animation-range: entry 20% entry 100%;
    }
  }
}
/* Rustig uitlopende curve binnen de keyframes, zodat de kaarten zacht "landen" op hun plek */
@keyframes sc-compare-main {
  from { opacity: .4; transform: translateY(72px) scale(.94); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes sc-compare-left {
  from { opacity: 0; transform: translateX(78%) scale(.86); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes sc-compare-right {
  from { opacity: 0; transform: translateX(-78%) scale(.86); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* ================= Samenwerkvormen ("Twee manieren van samenwerken") =================
   Twee kaarten naast elkaar met een foto erachter, onder een donkere laag met de merkfade (zoals .panel).
   De eerste kaart neemt het grootste deel van de breedte; beweeg je over de andere (of tab je ernaar),
   dan neemt die het over. Op smalle schermen staan ze onder elkaar. */
.vormen { display: flex; flex-direction: column; gap: var(--sc-space-5); }
@media (max-width: 759px) { .vorm { min-height: 360px; } }
.vorm {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; min-height: 440px;
  border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-2);
  background: var(--sc-ink); color: var(--sc-white);
}
.vorm__img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}
/* donker van onder (leesbaarheid) + merkfade 23% + korrel, net als het donkere merkvlak */
.vorm::before, .vorm::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vorm::before {
  background: linear-gradient(0deg, rgba(50, 50, 50, .94) 0%, rgba(50, 50, 50, .7) 45%, rgba(50, 50, 50, .2) 100%);
}
.vorm::after { background: var(--sc-fade); opacity: var(--sc-fade-dark); }
.vorm__body { padding: var(--sc-space-6); max-width: 560px; }
.vorm__title { margin: 0 0 var(--sc-space-2); font-size: var(--sc-fs-h3); font-weight: 700; line-height: var(--sc-lh-snug); }
.vorm__text { margin: 0; color: var(--sc-on-dark-muted); }
.vorm .actions { margin-top: var(--sc-space-5); }

@media (min-width: 760px) {
  .vormen { flex-direction: row; }
  .vorm { flex: 1 1 0; min-width: 0; }
  /* Vloeiend schuiven: eigen overgang voor de breedte (zonder de oplopende vertraging van het
     onthullen), naast die van het onthullen zelf. .js [data-reveal] zou hem anders overschrijven. */
  .js .vormen > .vorm, .vormen > .vorm {
    --vorm-schuif: 400ms cubic-bezier(.4, 0, .2, 1);
    transition:
      flex-grow var(--vorm-schuif),
      opacity var(--sc-dur-reveal) var(--sc-ease-out) calc(var(--i, 0) * var(--sc-stagger)),
      transform var(--sc-dur-reveal) var(--sc-ease-out) calc(var(--i, 0) * var(--sc-stagger));
  }
  .vorm:first-child { flex-grow: 1.9; }
  /* de kaart onder de muis (of met focus) wordt breed, de andere smal */
  .vormen:has(.vorm:hover, .vorm:focus-within) .vorm { flex-grow: 1; }
  .vormen:has(.vorm:hover, .vorm:focus-within) .vorm:is(:hover, :focus-within) { flex-grow: 1.9; }
  .vorm:is(:hover, :focus-within) .vorm__img { transform: scale(1.04); }
  /* tekst houdt een vaste breedte, zodat hij niet herschikt tijdens het verschuiven */
  .vorm__body { width: min(520px, 100%); flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .vormen > .vorm, .vormen > .vorm, .vorm__img { transition: none; }
}