/* ============================================================
   IK WIL… — de vijf wens-pagina's
   /meer-aanvragen · /sneller-offreren · /minder-handwerk ·
   /betere-gastbeleving · /groeien-zonder-extra-mensen

   Dit is géén feature-pagina (BOUWGIDS §5.11) maar een wens-pagina:
   eerst de situatie van de bezoeker, dan pas de functies — en elke
   functie linkt door naar de bestaande functiepagina. Prefix `iw-`.
   Geladen ná ems-gedeeld.css; daar komen .em-kruimel en de FAQ vandaan.

   Eerste helft: de patronen die op meerdere van de vijf terugkomen.
   Tweede helft: per pagina het mechanisme dat er de kern van is.
   ============================================================ */

/* ------------------------------------------------------------
   1 — GEDEELDE PATRONEN
   ------------------------------------------------------------ */

/* ---- Foto-hero met de systeemvisual ernaast ----
   Zonder die visual leest een hero als een sfeerplaatje; mét hem weet de
   bezoeker binnen twee seconden dat het over software gaat die dit doet.
   De scrim staat in pixelstops, niet in procenten (BOUWGIDS §5.8). */
.iw-hero {
  position: relative;
  isolation: isolate;
  background: var(--c-dark);
  color: var(--c-on-dark);
  min-height: min(86vh, 52rem);
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 14vh, 10rem) clamp(3rem, 8vh, 5.5rem);
  overflow: hidden;
  --focus-ring: var(--c-on-dark);
}
.iw-hero-bg { position: absolute; inset: 0; z-index: -2; }
.iw-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.iw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 23, 29, 0.95) 0%, rgba(23, 23, 29, 0.86) 42%, rgba(23, 23, 29, 0.66) 72%, rgba(23, 23, 29, 0.58) 100%),
    linear-gradient(0deg, rgba(23, 23, 29, 0.7) 0px, rgba(23, 23, 29, 0.2) 260px, rgba(23, 23, 29, 0) 460px);
}
.iw-hero > .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.iw-hero-tekst { max-width: 34rem; }
/* .eyebrow is inkt op licht; op de donkere hero moet hij oplichten. */
.iw-hero .eyebrow { color: var(--c-orange); }
.iw-hero h1 { margin-bottom: var(--sp-5); }
.iw-hero .lead { color: rgba(244, 244, 245, 0.86); }
@media (max-width: 940px) {
  .iw-hero > .container { grid-template-columns: 1fr; }
  .iw-hero { padding-block: clamp(5rem, 12vh, 8rem) clamp(2.5rem, 6vh, 4rem); }
}
@media (max-width: 720px) {
  .iw-hero::before { background: linear-gradient(0deg, rgba(23, 23, 29, 0.92) 0%, rgba(23, 23, 29, 0.72) 55%, rgba(23, 23, 29, 0.55) 100%); }
}

.iw-hero-visual { display: grid; gap: var(--sp-3); }
.iw-hero-visual .iw-kader { width: 100%; }

/* Kader om een échte schermafdruk: lichte rand plus browserbalkje, zodat een
   screenshot met witte achtergrond niet op de donkere band zweeft. */
.iw-kader {
  background: var(--c-surface);
  border-radius: var(--r-media);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  margin: 0;
}
.iw-kader-balk {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-4);
  background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-line);
}
.iw-kader-balk i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); flex: 0 0 auto; }
.iw-kader-balk b {
  font-weight: 500; font-size: 12px; color: var(--c-ink-soft);
  margin-left: var(--sp-2); letter-spacing: 0.02em;
}
.iw-kader img { width: 100%; display: block; }
.iw-kader-bij {
  font-size: var(--fs-small);
  color: rgba(244, 244, 245, 0.62);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.iw-kader-bij::before {
  content: "";
  width: 18px; height: 1px; background: var(--c-orange); flex: 0 0 auto;
}

/* ---- "Zo doen we dat": de functies met een écht scherm erbij.
   Dit is de plek waar de bezoeker ziet hóé het werkt, en waar de wens-pagina
   zijn interne links naar de functiepagina's doorgeeft. ---- */
.iw-hoe { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-4); }
.iw-hoe article {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.iw-hoe .beeld { background: var(--c-surface-soft); aspect-ratio: 16 / 10; overflow: hidden; }
.iw-hoe .beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.iw-hoe .lijf { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; flex: 1; }
.iw-hoe .functie {
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-orange-deep);
}
.iw-hoe h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 500; margin: 0; }
.iw-hoe p { font-size: var(--fs-small); color: var(--c-ink-soft); flex: 1; }
.iw-hoe a { font-size: var(--fs-small); font-weight: 500; margin-top: auto; }

/* ---- Gebouwd productscherm (nooit een screenshot waar het kan) ---- */
.iw-scherm {
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-media);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  font-size: var(--fs-small);
}
.iw-scherm-balk {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-line);
}
.iw-scherm-balk i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); }
.iw-scherm-balk b {
  font-weight: 500;
  font-size: 12px;
  color: var(--c-ink-soft);
  margin-left: var(--sp-2);
  letter-spacing: 0.02em;
}
.iw-scherm-lijf { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); }
.iw-regel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}
.iw-regel:last-child { border-bottom: 0; padding-bottom: 0; }
.iw-regel span:first-child { color: var(--c-ink); }
.iw-regel b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iw-regel small { display: block; color: var(--c-ink-soft); font-size: 12px; }

.iw-status {
  display: inline-flex;
  justify-self: start;
  align-self: start;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-surface-soft);
  color: var(--c-ink);
}
.iw-status--aan { background: var(--c-orange); }
/* display uit een klasse wint van de UA-regel voor [hidden]; deze twee worden
   door het script verborgen en moeten dus expliciet weg kunnen. */
.iw-status[hidden], .iw-th-totaal[hidden] { display: none; }
.iw-status--klaar { background: var(--c-groen-licht); }

/* ---- Gesprek (widget, agent, gast) ---- */
.iw-chat { display: grid; gap: var(--sp-3); }
.iw-bubbel {
  max-width: 82%;
  padding: 10px var(--sp-4);
  border-radius: var(--r-card);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.iw-bubbel--gast { background: var(--c-surface-soft); border-bottom-left-radius: 4px; justify-self: start; }
.iw-bubbel--host { background: var(--c-ink); color: var(--c-on-dark); border-bottom-right-radius: 4px; justify-self: end; }
.iw-bubbel small { display: block; margin-top: 4px; font-size: 11px; opacity: 0.6; }

/* ---- EM-illustratie in een kaart (beeldtaal van de functiepagina's) ---- */
.iw-icoon {
  width: auto;
  max-height: 5.25rem;
  margin-bottom: var(--sp-3);
}
.card--dark .iw-icoon { filter: invert(1) hue-rotate(180deg); }

/* ---- Sfeerband: één beeld over de volle breedte met één regel bijschrift ---- */
.iw-fotoband {
  position: relative;
  isolation: isolate;
  min-height: min(56vh, 30rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
}
.iw-fotoband > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iw-fotoband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* pixelstops, niet in procenten: de tekst staat op een vaste afstand van de
     onderrand, ongeacht hoe hoog de band op dit scherm is (BOUWGIDS §5.8) */
  background: linear-gradient(0deg,
    rgba(23, 23, 29, 0.86) 0px,
    rgba(23, 23, 29, 0.7) 90px,
    rgba(23, 23, 29, 0.32) 190px,
    rgba(23, 23, 29, 0) 300px);
}
.iw-fotoband-bij {
  padding-block: var(--sp-6);
  max-width: 40rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.iw-fotoband-bij em {
  display: block;
  font-style: normal;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--sp-3);
}

/* ---- Beeld in een kaart ---- */
.iw-beeld {
  border-radius: var(--r-media);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.iw-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Getuige: de klant aan het woord, op zijn eigen locatie ----
   Grote locatiefoto als ondergrond, het gezicht van wie het zegt, en het logo
   van de locatie groot genoeg om herkend te worden. Tien pagina's zouden tien
   verschillende locaties krijgen; deze vijf hebben er vijf. */
.iw-getuige {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
  padding-block: clamp(4rem, 12vh, 7rem);
  display: flex;
  align-items: center;
  min-height: min(80vh, 44rem);
}
.iw-getuige-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.iw-getuige::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 23, 29, 0.92) 0%, rgba(23, 23, 29, 0.78) 45%, rgba(23, 23, 29, 0.42) 100%),
    linear-gradient(0deg, rgba(23, 23, 29, 0.55) 0px, rgba(23, 23, 29, 0) 320px);
}
.iw-getuige > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .iw-getuige > .container { grid-template-columns: 1fr; }
  .iw-getuige::before {
    background: linear-gradient(0deg, rgba(23, 23, 29, 0.93) 0%, rgba(23, 23, 29, 0.82) 55%, rgba(23, 23, 29, 0.6) 100%);
  }
}
.iw-getuige blockquote { margin: 0; max-width: 34rem; }
.iw-getuige-logo {
  height: clamp(3rem, 5vw, 4.5rem);
  width: auto;
  max-width: 20rem;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--sp-5);
}
.iw-getuige .eyebrow { color: var(--c-orange); }
.iw-getuige q {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  font-weight: 700;
  quotes: "\201E" "\201C";
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.iw-getuige blockquote p { color: rgba(244, 244, 245, 0.82); max-width: 46ch; }
.iw-getuige blockquote .btn { margin-top: var(--sp-5); }
.iw-getuige-kaart {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: grid;
  justify-items: center;
}
.iw-getuige-kaart .portret { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.iw-getuige-kaart figcaption {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  text-align: center;
  display: grid;
  gap: 2px;
}
.iw-getuige-kaart figcaption b { font-weight: 500; }
.iw-getuige-kaart figcaption span { font-size: var(--fs-small); color: var(--c-ink-soft); }

/* ---- Cijferband ---- */
.iw-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-6); }
.iw-cijfer { text-align: center; }
.iw-cijfer b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}
.iw-cijfer > span { display: block; margin-top: var(--sp-3); font-size: var(--fs-lead); font-weight: 500; }
.iw-cijfer > small { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); opacity: 0.66; }

/* ---- Slot-CTA ---- */
.iw-cta { text-align: center; }
.iw-cta h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--sp-5); }
.iw-cta .lead { max-width: 44ch; margin-inline: auto; margin-bottom: var(--sp-6); color: rgba(244, 244, 245, 0.8); }

/* ---- Kleine helper ---- */
.iw-mid { text-align: center; max-width: var(--container-narrow); margin-inline: auto; }

/* ------------------------------------------------------------
   2 — PER PAGINA HET MECHANISME
   ------------------------------------------------------------ */

/* ============ /meer-aanvragen — het lek ============
   Honderd bolletjes zijn de honderd mensen die deze maand zoeken. Bij elk
   lek verdwijnt er een deel; bij elk gedicht gat komt er een deel terug. */
.iw-lek { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.iw-lek-toestel { position: sticky; top: calc(var(--em-nav-h, 4.5rem) + var(--sp-4)); display: grid; gap: var(--sp-4); }
.iw-lek-raster { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.iw-lek-raster i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-orange);
  transition: background 420ms var(--ease), opacity 420ms var(--ease), transform 520ms var(--ease);
}
.iw-lek-raster i.weg { background: rgba(244, 244, 245, 0.16); opacity: 0.55; transform: translateY(6px) scale(0.7); }
.iw-lek-raster i.terug { background: var(--c-lavender); }
.iw-lek-teller { display: flex; align-items: baseline; gap: var(--sp-3); }
.iw-lek-teller b {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-orange);
}
.iw-lek-teller span { font-size: var(--fs-lead); color: rgba(244, 244, 245, 0.72); max-width: 12ch; }
.iw-lek-uitleg { font-size: var(--fs-small); color: rgba(244, 244, 245, 0.55); border-top: 1px solid rgba(244, 244, 245, 0.16); padding-top: var(--sp-4); }

.iw-lek-stappen { display: grid; gap: clamp(4rem, 16vh, 11rem); padding-block: clamp(2rem, 10vh, 6rem) clamp(6rem, 22vh, 14rem); }
.iw-lek-stap { max-width: 34rem; }
.iw-lek-stap .num {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: rgba(244, 244, 245, 0.5); margin-bottom: var(--sp-4);
}
.iw-lek-stap .num::before { content: ""; width: 34px; height: 1px; background: var(--c-orange); }
.iw-lek-stap h3 { font-size: var(--fs-kaartkop); margin-bottom: var(--sp-3); }
.iw-lek-stap p { color: rgba(244, 244, 245, 0.78); }
.iw-lek-stap .verlies {
  font-family: var(--font-display);
  font-size: var(--fs-kaartkop);
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-orange);
  font-variant-numeric: lining-nums tabular-nums;
}
.iw-lek-kantel { max-width: 36rem; padding: var(--sp-6) 0; border-block: 1px solid rgba(244, 244, 245, 0.2); }
.iw-lek-kantel h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.iw-lek-kantel p { color: rgba(244, 244, 245, 0.78); }
.iw-lek-stap--fix .num::before { background: var(--c-lavender); }
.iw-lek-stap--fix .verlies { color: var(--c-lavender); }
.iw-lek-stap .btn { margin-top: var(--sp-5); }

@media (max-width: 900px) {
  .iw-lek { grid-template-columns: 1fr; }
  .iw-lek-toestel { top: 3.5rem; background: var(--c-dark); padding-block: var(--sp-4); z-index: 2; }
  .iw-lek-raster { gap: 5px; max-width: 22rem; }
  .iw-lek-stappen { gap: clamp(3rem, 12vh, 7rem); }
}

.iw-fn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1000px) { .iw-fn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .iw-fn { grid-template-columns: 1fr; } }
.iw-fn .card { display: flex; flex-direction: column; gap: var(--sp-3); }
.iw-fn .card p { flex: 1; font-size: var(--fs-small); color: var(--c-ink-soft); }
.iw-fn .card a { font-size: var(--fs-small); font-weight: 500; }
.iw-fn .gat { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-orange-deep); }

/* ============ /sneller-offreren — het theater ============
   Links het gesprek met de gast, rechts de offerte die zich vult. De vijf
   fases lopen mee met het scrollen; het scenario kies je zelf. */
.iw-th { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 980px) { .iw-th { grid-template-columns: 1fr; } }

.iw-th-toestel { position: sticky; top: calc(var(--em-nav-h, 4.5rem) + var(--sp-4)); display: grid; gap: var(--sp-4); }
.iw-th-keuze { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.iw-th-keuze button {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.iw-th-keuze button:hover { border-color: var(--c-ink); }
.iw-th-keuze button[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

.iw-th-scherm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 27rem; }
@media (max-width: 620px) { .iw-th-scherm { grid-template-columns: 1fr; } }
.iw-th-gesprek { padding: var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; border-right: 1px solid var(--c-line); background: var(--c-surface-soft); }
.iw-th-offerte { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.iw-th-offerte-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.iw-th-offerte-kop b { font-family: var(--font-display); font-size: var(--fs-kaartkop); font-weight: 700; }
.iw-th-offerte-kop img { height: 26px; width: auto; }
.iw-th-leeg { color: var(--c-ink-40); font-size: var(--fs-small); font-style: italic; }
.iw-th-nieuw { animation: iw-th-in 420ms var(--ease) both; }
@keyframes iw-th-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.iw-th-totaal { display: flex; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-ink); font-weight: 500; }
.iw-th-totaal b { font-variant-numeric: tabular-nums; }

.iw-th-speld {
  background: var(--c-dark);
  color: var(--c-on-dark);
  border-radius: var(--r-tile);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  --focus-ring: var(--c-on-dark);
}
.iw-th-speld p { font-size: var(--fs-small); }
.iw-th-speld em { font-style: normal; display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(244, 244, 245, 0.5); margin-bottom: 4px; }

.iw-th-fases { display: grid; gap: clamp(3rem, 12vh, 8rem); padding-block: clamp(1rem, 6vh, 4rem) clamp(6rem, 24vh, 15rem); }
.iw-th-fase { border-left: 1px solid var(--c-line-strong); padding-left: var(--sp-5); transition: border-color var(--t-med) var(--ease); }
.iw-th-fase.is-nu { border-left-color: var(--c-orange); }
.iw-th-fase .stap { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-40); margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; }
.iw-th-fase.is-nu .stap { color: var(--c-orange-deep); }
.iw-th-fase h3 { font-size: var(--fs-kaartkop); margin-bottom: var(--sp-3); }
.iw-th-fase p { color: var(--c-ink-soft); }

.iw-grens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .iw-grens { grid-template-columns: 1fr; } }

/* ============ /minder-handwerk — de week ============
   Een normale week bij vier events, per rol uitgesplitst. Elk blokje is een
   taak; de schakelaar laat zien wat er verdwijnt en wat er juist blijft. */
.iw-wk-balk {
  position: sticky;
  top: calc(var(--em-nav-h, 4.5rem) + var(--sp-3));
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.iw-wk-schakel { display: inline-flex; background: var(--c-surface-soft); border-radius: var(--r-pill); padding: 3px; }
.iw-wk-schakel button {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  border: 0;
  background: transparent;
  color: var(--c-ink-soft);
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.iw-wk-schakel button[aria-pressed="true"] { background: var(--c-ink); color: #fff; }
.iw-wk-meter { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.iw-wk-ring { width: 74px; height: 74px; position: relative; flex: 0 0 auto; }
.iw-wk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.iw-wk-ring circle { fill: none; stroke-width: 6; }
.iw-wk-ring .baan { stroke: var(--c-line); }
.iw-wk-ring .vul { stroke: var(--c-orange); stroke-linecap: round; transition: stroke-dashoffset 700ms var(--ease); }
.iw-wk-meter b { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.iw-wk-meter span { font-size: var(--fs-small); color: var(--c-ink-soft); display: block; max-width: 16ch; }

.iw-wk-rooster { display: grid; gap: var(--sp-3); overflow-x: auto; }
.iw-wk-dagen, .iw-wk-rij { display: grid; grid-template-columns: 8.5rem repeat(7, minmax(4.5rem, 1fr)); gap: var(--sp-2); align-items: stretch; }
.iw-wk-dagen span { font-size: 11.5px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-40); text-align: center; }
.iw-wk-rol {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small); font-weight: 500;
}
.iw-wk-rol img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
.iw-wk-cel { display: grid; gap: 3px; align-content: start; min-height: 2.5rem; }
.iw-wk-blok {
  border: 0;
  font-family: var(--font-body);
  text-align: left;
  background: var(--c-bg-shade);
  color: var(--c-ink);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease), background var(--t-fast) var(--ease);
}
.iw-wk-blok b { font-weight: 500; display: block; }
.iw-wk-blok em { font-style: normal; font-variant-numeric: tabular-nums; opacity: 0.7; }
.iw-wk-blok:hover { background: var(--c-cream); }
.iw-wk-blok.blijft { background: var(--c-lavender); }
.is-met .iw-wk-blok:not(.blijft) { opacity: 0; transform: scale(0.6); pointer-events: none; }
.iw-wk-blok.is-gekozen { outline: 2px solid var(--c-orange); outline-offset: 1px; }

.iw-wk-uitleg {
  margin-top: var(--sp-5);
  background: var(--c-dark);
  color: var(--c-on-dark);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  --focus-ring: var(--c-on-dark);
}
.iw-wk-uitleg em { font-style: normal; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(244, 244, 245, 0.5); }
.iw-wk-uitleg h3 { font-size: var(--fs-kaartkop); margin: 0; }
.iw-wk-uitleg p { color: rgba(244, 244, 245, 0.8); }
.iw-wk-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); font-size: 12.5px; color: var(--c-ink-soft); }
.iw-wk-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.iw-wk-legenda i { width: 14px; height: 10px; border-radius: 3px; background: var(--c-bg-shade); }
.iw-wk-legenda i.blijft { background: var(--c-lavender); }

@media (max-width: 900px) {
  .iw-wk-dagen, .iw-wk-rij { grid-template-columns: 6.5rem repeat(7, minmax(3.4rem, 1fr)); }
  .iw-wk-rol img { display: none; }
  .iw-wk-meter { margin-left: 0; }
}

.iw-rollen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .iw-rollen { grid-template-columns: 1fr; } }
.iw-rollen img { border-radius: var(--r-media); margin-bottom: var(--sp-4); width: 100%; display: block; }

/* ============ /betere-gastbeleving — zes momenten ============
   Zes volle-bleed fotoscènes met het scherm van dat moment ernaast, en een
   voortgangslijn bovenin die meeloopt met waar je bent in het jaar. */
.iw-mo-lijn {
  position: sticky;
  top: var(--em-nav-h, 4.5rem);
  z-index: 4;
  background: rgba(23, 23, 29, 0.82);
  backdrop-filter: blur(8px);
  color: var(--c-on-dark);
  padding: var(--sp-3) 0;
}
.iw-mo-lijn ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-5); justify-content: center; flex-wrap: wrap; }
.iw-mo-lijn li {
  font-size: 11.5px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.42);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: color var(--t-med) var(--ease);
}
.iw-mo-lijn li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(244, 244, 245, 0.3);
  transition: background var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.iw-mo-lijn li.is-nu { color: var(--c-on-dark); }
.iw-mo-lijn li.is-nu::before { background: var(--c-orange); transform: scale(1.5); }

.iw-mo-scene {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 52rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--c-on-dark);
  --focus-ring: var(--c-on-dark);
}
.iw-mo-foto { position: absolute; inset: 0; z-index: -2; }
.iw-mo-foto img { width: 100%; height: 100%; object-fit: cover; }
.iw-mo-scene::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(23,23,29,.88) 0%, rgba(23,23,29,.7) 38%, rgba(23,23,29,.2) 72%, rgba(23,23,29,.05) 100%);
}
.iw-mo-scene--rechts::before { background: linear-gradient(270deg, rgba(23,23,29,.88) 0%, rgba(23,23,29,.7) 38%, rgba(23,23,29,.2) 72%, rgba(23,23,29,.05) 100%); }
.iw-mo-inhoud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.iw-mo-scene--rechts .iw-mo-inhoud { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
.iw-mo-scene--rechts .iw-mo-tekst { order: 2; }
@media (max-width: 900px) {
  .iw-mo-inhoud, .iw-mo-scene--rechts .iw-mo-inhoud { grid-template-columns: 1fr; }
  .iw-mo-scene--rechts .iw-mo-tekst { order: 0; }
  .iw-mo-scene::before, .iw-mo-scene--rechts::before { background: linear-gradient(0deg, rgba(23,23,29,.92) 0%, rgba(23,23,29,.74) 60%, rgba(23,23,29,.5) 100%); }
}
.iw-mo-tekst { max-width: 34rem; }
.iw-mo-wanneer { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-orange); margin-bottom: var(--sp-4); }
.iw-mo-tekst h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.iw-mo-tekst p { color: rgba(244, 244, 245, 0.86); }
.iw-mo-tekst .btn { margin-top: var(--sp-5); }
.iw-mo-kaart .iw-scherm { box-shadow: var(--shadow-pop); }

.iw-contrast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 860px) { .iw-contrast { grid-template-columns: 1fr; } }
.iw-kolom h3 { font-size: var(--fs-kaartkop); margin-bottom: var(--sp-4); }
.iw-mail { display: grid; gap: var(--sp-2); margin: 0; padding: 0; }
.iw-mail li {
  list-style: none;
  background: var(--c-surface);
  border-radius: var(--r-tile);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
}
.iw-mail li em { font-style: normal; color: var(--c-ink-40); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.iw-kolom--constell .iw-mail li { background: var(--c-orange-wash); }

/* ============ /groeien-zonder-extra-mensen — de vijfde collega ============
   Een etmaal als schijf: negen uur waarin jouw team werkt, vijftien waarin
   de agent doorwerkt. */
.iw-klok { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 900px) { .iw-klok { grid-template-columns: 1fr; } }
.iw-klok-schijf { position: relative; width: min(100%, 26rem); margin-inline: auto; }
.iw-klok-schijf svg { width: 100%; height: auto; }
.iw-klok-uur { transition: opacity 500ms var(--ease); }
.iw-klok-midden { text-align: center; margin-top: var(--sp-4); }
.iw-klok-midden b { font-family: var(--font-display); font-size: var(--fs-h3); display: block; line-height: 1; }
.iw-klok-midden span { font-size: var(--fs-small); color: rgba(244, 244, 245, 0.6); }
.iw-klok-legenda { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.iw-klok-legenda span { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: rgba(244, 244, 245, 0.78); }
.iw-klok-legenda i { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.iw-klok-legenda i.uur-team { background: var(--c-lavender); }
.iw-klok-legenda i.uur-agent { background: var(--c-orange); }

.iw-klok-tekst h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.iw-klok-tekst p { color: rgba(244, 244, 245, 0.8); }
.iw-klok-tellers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 620px) { .iw-klok-tellers { grid-template-columns: 1fr; } }
.iw-klok-teller b { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1; color: var(--c-orange); font-variant-numeric: lining-nums tabular-nums; }
.iw-klok-teller span { font-size: var(--fs-small); color: rgba(244, 244, 245, 0.7); }
.iw-klok-bron { margin-top: var(--sp-4); font-size: var(--fs-small); color: rgba(244, 244, 245, 0.5); }

.iw-hs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 4rem); align-items: center; }
@media (max-width: 860px) { .iw-hs { grid-template-columns: 1fr; } }
.iw-hs-label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--c-orange-deep); margin-bottom: var(--sp-3);
}
.iw-hs h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.iw-hs blockquote { margin: 0; }
.iw-hs q {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-kaartkop);
  line-height: var(--lh-heading);
  quotes: "\201E" "\201C";
  margin-bottom: var(--sp-3);
}
.iw-hs cite { font-style: normal; font-size: var(--fs-small); color: var(--c-ink-soft); }
.iw-hs-na { margin-top: var(--sp-4); }
.iw-hs .btn { margin-top: var(--sp-5); }
.iw-hs img { border-radius: var(--r-media); width: 100%; display: block; }

.iw-blijft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .iw-blijft { grid-template-columns: 1fr; } }
.iw-blijft .card--dark { border: 1px solid rgba(244, 244, 245, 0.14); }
.iw-blijft .iw-beeld { margin-bottom: var(--sp-4); }