/* ═══════════════════════════════════════════════════════════════════════════
   Over Workrlab.

   De navigatie, de voettekst en de grond komen van landing.css; hier staat
   alleen wat van deze pagina zelf is. Dit is het enige stuk van de site waar
   één iemand aan het woord is, en daar is de opmaak op gezet: een leeskolom
   in plaats van een marketingraster, en één donker blok voor de zin waar de
   pagina om draait.
   ═══════════════════════════════════════════════════════════════════════ */

.wrl-ov-sectie {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

.wrl-ov-sectie :focus-visible {
  outline: 2px solid #6C5CE7;
  outline-offset: 2px;
  border-radius: 6px;
}

.wrl-ov-kop { padding-top: 52px; }
.wrl-ov-ruim { padding-top: 76px; }

/* ── Koppen en labels ────────────────────────────────────────────────────── */

.wrl-ov-label {
  margin: 0 0 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A7F70;
}

.wrl-ov-titel {
  margin: 0 0 20px;
  max-width: 20ch;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 1.01;
  letter-spacing: -.038em;
  color: #17130E;
}

.wrl-ov-inleiding {
  margin: 0;
  max-width: 58ch;
  font-size: 18px;
  color: #5C5247;
}

.wrl-ov-tussenkop {
  margin: 0 0 32px;
  max-width: 20ch;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #17130E;
}

/* ── Het verhaal ─────────────────────────────────────────────────────────────
   Het sectielabel staat naast de tekst in plaats van erboven. Daarmee leest
   de kolom als tekst en niet als een blok op een marketingpagina, en de
   regellengte blijft onder de 66 tekens. */

.wrl-ov-verhaal {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}
.wrl-ov-verhaal .wrl-ov-label {
  flex: 1 1 200px;
  min-width: 0;
  margin: 6px 0 0;
}

.wrl-ov-kolom {
  flex: 999 1 560px;
  min-width: 0;
  max-width: 66ch;
}
.wrl-ov-kolom p {
  margin: 0 0 20px;
  font-size: 17.5px;
  line-height: 1.72;
  color: #3F382F;
}
.wrl-ov-kolom p:last-child { margin-bottom: 0; }

/* ── De stilte tussen twee opdrachten, naast "Waar het begon" ────────────────
   Een liggende balk van de afgelopen opdracht naar de volgende, die zich
   week voor week vult. Bewust liggend: verderop op deze pagina staat al een
   staande rail met stippen, en twee keer dezelfde vorm laat de pagina
   zichzelf herhalen.

   Alleen de breedte van de vulling en het getal eronder veranderen. De
   breedte staat in procenten, dus hij klopt ook als de kolom smaller wordt,
   en in de HTML staat hij op vol: zonder script leest de bezoeker de volle
   zeven weken in plaats van een lege balk. */

.wrl-ov-stiltemerk {
  margin: 0 0 9px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A89C8A;
}

.wrl-ov-stiltebalk {
  display: flex;
  align-items: stretch;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  background: #E8E3D8;
}
/* De opdracht die net is afgelopen. */
.wrl-ov-stiltestart {
  flex: none;
  width: 34px;
  background: #17130E;
}
.wrl-ov-stilteruimte {
  flex: 1 1 auto;
  min-width: 0;
}
.wrl-ov-stiltegroei {
  display: block;
  height: 100%;
  background: #D8D1C2;
  transition: width 1s cubic-bezier(.4, .1, .2, 1);
}
/* De volgende opdracht staat er nog niet: gestippeld en leeg. */
.wrl-ov-stiltedoel {
  flex: none;
  width: 34px;
  box-sizing: border-box;
  border: 1px dashed #C9C0AE;
  background: #F7F5F0;
}

.wrl-ov-stiltevoet {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 9px 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A89C8A;
}

.wrl-ov-stilteweken {
  margin: 22px 0 0;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.03em;
  color: #17130E;
  font-variant-numeric: tabular-nums;
}
.wrl-ov-stilteonder {
  margin: 3px 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: #8A7F70;
}

/* ── De kringloop naast "Waar we heen willen" ────────────────────────────────
   Vier haltes onder elkaar met een rail ernaast: een stip per halte en een
   lijntje naar de volgende. De halte die aan is krijgt een gevulde stip en
   donkere tekst, het lijntje erboven kleurt mee zodra de baan erlangs is
   geweest. Alle vier de teksten blijven de hele tijd leesbaar, want ze horen
   bij de alinea ernaast en niet bij de animatie.

   De standen zijn klassen (is-aan, is-gehad) en geen inline stijl, dus zonder
   script blijft de baan staan zoals hij in de HTML staat. */

.wrl-ov-zijkant {
  flex: 1 1 200px;
  min-width: 0;
  /* De tekstkolom ernaast loopt vast op 66ch, dus alles wat overblijft valt
     naar deze kant. Zonder deze grens wordt de baan een halve pagina breed en
     staat de rail in het niets. */
  max-width: 268px;
}
.wrl-ov-zijkant .wrl-ov-label { margin: 6px 0 26px; }

.wrl-ov-baan {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.wrl-ov-halte {
  display: flex;
  gap: 14px;
  min-height: 68px;
}

.wrl-ov-rail {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 11px;
}
.wrl-ov-stip {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #F7F5F0;
  border: 2px solid #D8D1C2;
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.wrl-ov-lijn {
  flex: 1 1 auto;
  width: 2px;
  min-height: 34px;
  margin-top: 4px;
  background: #E6E1D6;
  transition: background .45s ease;
}

.wrl-ov-haltetekst {
  min-width: 0;
  padding-bottom: 20px;
}
.wrl-ov-haltenaam {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A89C8A;
  transition: color .45s ease;
}
.wrl-ov-halteregel {
  display: block;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #A89C8A;
  transition: color .45s ease;
}

.wrl-ov-halte.is-aan .wrl-ov-stip {
  background: #17130E;
  border-color: #17130E;
  transform: scale(1.15);
}
.wrl-ov-halte.is-aan .wrl-ov-haltenaam { color: #17130E; }
.wrl-ov-halte.is-aan .wrl-ov-halteregel { color: #5C5247; }

.wrl-ov-halte.is-gehad .wrl-ov-lijn { background: #17130E; }

/* Het lijntje onder de laatste halte loopt door naar deze regel, zodat de
   baan niet doodloopt maar terugwijst naar de eerste. */
.wrl-ov-opnieuw {
  margin: 2px 0 0 25px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: #A89C8A;
}

/* ── De zin waar de pagina om draait ────────────────────────────────────────
   Stond als grijs kadertje tussen de alinea's. Het is de zin die het hele
   verhaal samenvat, dus hij krijgt het donkere vlak van de landingspagina. */

.wrl-ov-waarom {
  max-width: 1388px;
  margin: 48px auto 0;
  background: #0F172A;
  border-radius: 30px;
  padding: 64px 56px;
}
.wrl-ov-waarom .wrl-ov-label { color: #6E7A94; margin-bottom: 22px; }

.wrl-ov-waaromzin {
  margin: 0 0 26px;
  max-width: 24ch;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #FFFFFF;
}

.wrl-ov-waaromtekst {
  margin: 0;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.7;
  color: #C3CAD8;
}

/* ── De drie rollen ──────────────────────────────────────────────────────────
   Hier zijn kaarten wél goed: drie dingen van gelijk gewicht naast elkaar.
   De kop erboven is nieuw — eerst waren het drie alinea's zonder kop, en dan
   moet je ze alle drie lezen om te weten welke van jou is. */

.wrl-ov-rollen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wrl-ov-rol {
  background: #FFFFFF;
  border: 1px solid #E6E1D6;
  border-radius: 20px;
  padding: 28px 28px 30px;
}

.wrl-ov-rollabel {
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #F3F1FE;
  border: 1px solid #DAD4FA;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4F46A8;
}

.wrl-ov-rolkop {
  margin: 0 0 9px;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #17130E;
}

.wrl-ov-roltekst {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #5C5247;
}

/* ── De uitgangspunten ───────────────────────────────────────────────────────
   Beloften, geen functies: regels onder elkaar met een haarlijn ertussen in
   plaats van vier kaartjes die om aandacht vragen. */

.wrl-ov-principes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}

.wrl-ov-principe {
  padding: 24px 0;
  border-top: 1px solid #E6E1D6;
}

.wrl-ov-principekop {
  margin: 0 0 7px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #17130E;
}
.wrl-ov-principenummer {
  flex: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  color: #A89C8A;
}
.wrl-ov-principetekst {
  margin: 0 0 0 30px;
  font-size: 15.5px;
  line-height: 1.65;
  color: #5C5247;
}

/* ── Waar het vandaan komt ───────────────────────────────────────────────────
   Stond hier als een visitekaartje: een rondje met een letter, een naam en
   een functie. De vraag van een koper is niet wie het is maar waaróm het er
   is, en het rondje trok de aandacht weg van het antwoord. Nu alleen de
   tekst, iets groter gezet dan de rest, zodat het als een uitspraak leest. */

.wrl-ov-vanuit {
  background: #FFFFFF;
  border: 1px solid #E6E1D6;
  border-radius: 24px;
  padding: 36px 40px 38px;
}

.wrl-ov-vanuittekst {
  margin: 0;
  max-width: 58ch;
  font-size: 19px;
  line-height: 1.68;
  color: #3F382F;
}

/* ── De twee uitgangen ───────────────────────────────────────────────────── */

.wrl-ov-uitgang {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  padding: 56px 0 84px;
}

/* Allebei de uitgangen zijn ankers, geen handelingen: de eerste met een
   donkere streep omdat hij de weg is die de meesten nemen, de tweede met een
   lichte. Als gevulde knop vroeg de eerste evenveel aandacht als de kop
   erboven, op een pagina die bedoeld is om te lezen. */
.wrl-ov-eerste {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding-bottom: 7px;
  border-bottom: 1px solid #17130E;
  color: #17130E;
  text-decoration: none;
  font-weight: 600;
  font-size: 16.5px;
  transition: color .18s ease, border-color .18s ease;
}
.wrl-ov-eerste:hover,
.wrl-ov-eerste:focus-visible { color: #6C5CE7; border-bottom-color: #6C5CE7; }

.wrl-ov-tweede {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding-bottom: 7px;
  border-bottom: 1px solid #D8D1C2;
  color: #17130E;
  text-decoration: none;
  font-weight: 500;
  font-size: 16.5px;
}
.wrl-ov-tweede:hover,
.wrl-ov-tweede:focus-visible { border-bottom-color: #17130E; color: #6C5CE7; }

.wrl-ov-voorwaarden {
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #8A7F70;
}

/* ── Smallere schermen ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .wrl-ov-rollen { grid-template-columns: minmax(0, 1fr); }
  .wrl-ov-principes { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 620px) {
  .wrl-ov-sectie { padding: 0 20px; }
  .wrl-ov-kop { padding-top: 34px; }
  .wrl-ov-ruim { padding-top: 54px; }
  .wrl-ov-verhaal { gap: 14px; }
  .wrl-ov-waarom { margin-top: 34px; border-radius: 22px; padding: 38px 26px; }
  .wrl-ov-kolom p { font-size: 16.5px; }
  .wrl-ov-uitgang { padding: 40px 0 60px; gap: 16px 28px; }
  .wrl-ov-vanuit { padding: 26px 22px 28px; }
  .wrl-ov-vanuittekst { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .wrl-ov-sectie *, .wrl-ov-sectie *::before, .wrl-ov-sectie *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Zonder beweging blijft de balk op de volle zeven weken staan; dat is
     ook wat er in de HTML staat. */

  /* Zonder beweging valt er niets te volgen, dus staan alle haltes aan. */
  .wrl-ov-stip { background: #17130E; border-color: #17130E; }
  .wrl-ov-lijn { background: #17130E; }
  .wrl-ov-haltenaam { color: #17130E; }
  .wrl-ov-halteregel { color: #5C5247; }
}