/*
 * Rankdata V2
 *
 * Alle maten komen uit het Figma-bestand, frame "Home" (1920 breed).
 * De inhoudskolom is 1320 breed met marges van 300.
 */

:root {
  --rd-oranje: #FF7309;
  --rd-oranje-donker: #E05F00;
  --rd-perzik: #FFE3CE;
  --rd-zwart: #151515;
  --rd-grijs-donker: #3A3A3A;
  --rd-grijs: #7A7A7A;
  --rd-grijs-licht: #E7E7E7;
  --rd-grijs-vlak: #F5F5F5;
  --rd-wit: #FFFFFF;

  --rd-kolom: 1320px;
  --rd-marge: 300px;

  --rd-rubik: Rubik, system-ui, sans-serif;
  --rd-dm: "DM Sans", system-ui, sans-serif;

  /* het beeldmerk als vorm, exact het pad uit de huisstijl */
  --rd-merkvorm: polygon(0% 36.381%, 0% 0%, 100% 0%, 100% 100%, 70.86% 100%, 70.86% 55.362%, 39.819% 100%, 0% 100%, 44.504% 36.381%, 0% 36.381%);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--rd-dm);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rd-zwart);
  background: var(--rd-wit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--rd-rubik);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rd-oranje); text-decoration: none; }
a:hover { color: var(--rd-oranje-donker); }
ul { margin: 0; padding: 0; list-style: none; }

.rd-overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rd-zwart); color: var(--rd-wit); padding: 12px 20px;
}
.rd-overslaan:focus { left: 0; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------------------------------------------------------------- omhulsel */
.rd-binnen {
  width: min(var(--rd-kolom), 100% - 48px);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- kopbalk */
.rd-kop { background: var(--rd-wit); }
.rd-kop__binnen {
  height: 80px;
  width: min(var(--rd-kolom), 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
.rd-kop__logo { display: flex; align-items: center; flex: none; }
.rd-kop__nav { flex: 1; }
.rd-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 16px;
  font-weight: 400;
}
.rd-menu a { color: var(--rd-zwart); }
.rd-menu a:hover { color: var(--rd-oranje); }
.rd-menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 9px; height: 6px;
  margin-left: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  vertical-align: middle;
}
.rd-menu .sub-menu {
  display: none;
  position: absolute;
  background: var(--rd-wit);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 14px 0;
  min-width: 240px;
  z-index: 20;
}
.rd-menu li { position: relative; }
.rd-menu li:hover > .sub-menu { display: block; }
.rd-menu .sub-menu a { display: block; padding: 9px 22px; font-size: 15px; }

.rd-kop__acties { display: flex; align-items: center; gap: 22px; flex: none; }
.rd-kop__partner { color: var(--rd-oranje); font-weight: 500; }
.rd-kop__schakelaar { display: none; }

/* ---------------------------------------------------------------- knoppen */
.rd-knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  font-family: var(--rd-rubik);
  font-weight: 700;
  font-size: 16px;
  padding: 0 28px;
  height: 48px;
  white-space: nowrap;
}
.rd-knop--oranje { background: var(--rd-oranje); color: var(--rd-wit); }
.rd-knop--oranje:hover { background: var(--rd-oranje-donker); color: var(--rd-wit); }
.rd-knop--zwart { background: var(--rd-zwart); color: var(--rd-wit); }
.rd-knop--zwart:hover { background: #000; color: var(--rd-wit); }
.rd-knop--groot { height: 60px; padding: 0 34px; }
.rd-knop--rand {
  border: 1.5px solid rgba(255,255,255,.6);
  color: var(--rd-wit);
  font-weight: 500;
}

/* ---------------------------------------------------------------- usp-balk */
.rd-usp { background: var(--rd-zwart); }
.rd-usp__binnen {
  height: 60px;
  width: min(var(--rd-kolom), 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
}
.rd-usp__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--rd-wit);
  font-size: 20px;
  font-weight: 500;
}
.rd-usp__icoon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rd-wit);
  color: var(--rd-oranje);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.rd-usp__lijn { width: 1px; height: 24px; background: #333; flex: none; }

/* ------------------------------------------------------------------- hero */
.rd-hero {
  background: var(--rd-grijs-licht);
  height: 820px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.rd-hero__tekst {
  width: 892px;
  flex: none;
  padding: 171px 60px 0 var(--rd-marge);
}
.rd-hero__badge { display: flex; align-items: center; gap: 10px; margin-bottom: 39px; }
.rd-hero__badge span { font-size: 16px; }
.rd-hero h1 {
  font-size: 64px;
  font-weight: 500;
  line-height: 77px;
  max-width: 640px;
  margin-bottom: 24px;
}
.rd-hero__sub {
  font-family: var(--rd-rubik);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.rd-hero__tekstblok {
  font-size: 16px;
  line-height: 24px;
  color: rgba(21,21,21,.75);
  max-width: 420px;
  margin-bottom: 28px;
}
.rd-hero__staaf { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.rd-hero__koppen { display: flex; }
.rd-hero__koppen img {
  width: 50px; height: 50px; border-radius: 50%;
  object-fit: cover; object-position: center 20%;
  border: 2px solid var(--rd-grijs-licht);
}
.rd-hero__koppen img + img { margin-left: -14px; }
.rd-hero__getal { font-family: var(--rd-rubik); font-size: 16px; font-weight: 600; }
.rd-hero__label { font-size: 14px; color: rgba(21,21,21,.75); }

.rd-hero__beeld {
  flex: 1;
  position: relative;
  clip-path: var(--rd-merkvorm);
}
.rd-hero__beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* --------------------------------------------------------------- logobalk */
.rd-logobalk { border-bottom: 1px solid #F0F0F0; }
.rd-logobalk__binnen {
  height: 80px;
  width: min(1840px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
.rd-logobalk__titel {
  font-family: var(--rd-rubik);
  font-size: 24px;
  font-weight: 600;
  flex: none;
}
.rd-logobalk__titel em { font-style: normal; color: var(--rd-oranje); }
.rd-logobalk__lijn { width: 1px; height: 32px; background: var(--rd-grijs-licht); flex: none; }
.rd-logobalk__rij {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rd-logobalk__rij img { max-height: 30px; max-width: 140px; width: auto; opacity: .82; }

/* ------------------------------------------------------ vlakken met de R */
.rd-vlak { position: relative; overflow: hidden; }
.rd-vlak > * { position: relative; }
.rd-merkvlak {
  position: absolute;
  top: 0; bottom: 0;
  clip-path: var(--rd-merkvorm);
  pointer-events: none;
}
.rd-vlak--perzik { background: var(--rd-perzik); }
.rd-vlak--perzik .rd-merkvlak { background: rgba(255,115,9,.15); right: 0; width: 1124px; }
.rd-vlak--grijs { background: var(--rd-grijs-licht); }
.rd-vlak--grijs .rd-merkvlak { background: rgba(255,255,255,.30); left: 0; width: 1050px; }
.rd-vlak--wit { background: var(--rd-wit); }
.rd-vlak--wit .rd-merkvlak { background: rgba(21,21,21,.05); width: 946px; }
.rd-vlak--oranje { background: var(--rd-oranje); }
.rd-vlak--oranje .rd-merkvlak { background: rgba(255,255,255,.10); left: 0; width: 1920px; }

/* --------------------------------------------------------------- voettekst */
.rd-voet { background: var(--rd-zwart); color: var(--rd-wit); }
.rd-voet__binnen {
  width: min(var(--rd-kolom), 100% - 48px);
  margin-inline: auto;
  padding: 80px 0 56px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px;
}
.rd-voet__pitch { font-size: 14px; line-height: 1.65; color: #9A9A9A; max-width: 280px; margin-top: 18px; }
.rd-voet__titel {
  font-family: var(--rd-rubik);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--rd-oranje);
  margin-bottom: 18px;
}
.rd-voet__lijst { display: flex; flex-direction: column; gap: 11px; }
.rd-voet__lijst a, .rd-voet__lijst li { font-size: 14px; color: #C4C4C4; }
.rd-voet__lijst a:hover { color: var(--rd-wit); }

.rd-scores { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; max-width: 280px; }
.rd-score { background: #1D1D1D; border: 1px solid #2A2A2A; border-radius: 10px; padding: 14px 16px; }
.rd-score__kop { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.rd-score__kop span { font-family: var(--rd-rubik); font-size: 14px; font-weight: 600; color: var(--rd-wit); }
.rd-score__sterren { display: flex; gap: 3px; margin-bottom: 9px; }
.rd-tp {
  width: 18px; height: 18px; border-radius: 2px; background: #00B67A;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.rd-tp--half { background: linear-gradient(90deg, #00B67A 50%, #3A3A3A 50%); }
.rd-score__tekst { font-size: 13px; color: #9A9A9A; }
.rd-score__tekst strong { color: var(--rd-wit); }

.rd-voet__onder { border-top: 1px solid #2A2A2A; }
.rd-voet__onderbinnen {
  width: min(var(--rd-kolom), 100% - 48px);
  margin-inline: auto;
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: #7A7A7A;
}
.rd-voet__onderbinnen nav { margin-left: auto; display: flex; gap: 22px; }
.rd-voet__onderbinnen a { color: #7A7A7A; }
.rd-voet__onderbinnen a:hover { color: var(--rd-wit); }

/* ------------------------------------------------------------------ inhoud */
.rd-artikel { width: min(760px, 100% - 48px); margin: 64px auto; }
.rd-artikel h2 { font-size: 32px; margin: 36px 0 14px; }
.rd-artikel h3 { font-size: 24px; margin: 28px 0 12px; }
.rd-artikel p { margin-bottom: 18px; line-height: 1.75; }

/* ------------------------------------------------------- gedeelde stukjes */
.rd-pil {
  display: inline-flex;
  border: 1px solid var(--rd-oranje);
  color: var(--rd-oranje);
  border-radius: 50px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.rd-pil--wit { border-color: rgba(255,255,255,.55); color: var(--rd-wit); }
.rd-pil--grijs { background: var(--rd-grijs-licht); }
.rd-scheider { width: 1px; height: 16px; background: #C9C9C9; display: inline-block; }
.rd-stip { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-oranje); flex: none; }
.rd-bolletje { width: 44px; height: 44px; border-radius: 50%; background: var(--rd-oranje); flex: none; }
.rd-bolletje--groot { width: 60px; height: 60px; }
.rd-tekstlink {
  color: var(--rd-zwart);
  font-weight: 700;
  border-bottom: 1.5px solid var(--rd-zwart);
  padding-bottom: 2px;
  align-self: flex-start;
}
.rd-tekstlink:hover { color: var(--rd-oranje); border-color: var(--rd-oranje); }

/* ---------------------------------------------------------------- verhaal */
.rd-verhaal { padding: 120px 0 96px; }
.rd-verhaal__kop { display: flex; gap: 80px; align-items: flex-start; }
.rd-verhaal__kop h2 {
  flex: 1;
  font-size: 48px;
  font-weight: 500;
  line-height: 58px;
  max-width: 620px;
}
.rd-verhaal__zij { width: 369px; flex: none; padding-top: 33px; }
.rd-verhaal__lead {
  font-family: var(--rd-rubik);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.rd-verhaal__tekst { font-size: 16px; line-height: 24px; color: rgba(21,21,21,.75); }
.rd-verhaal__beeld { position: relative; margin-top: 66px; }
.rd-verhaal__beeld > img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
}
.rd-verhaal__kaart {
  position: absolute;
  left: 22px;
  bottom: 40px;
  width: 400px;
  background: var(--rd-wit);
  border-radius: 12px;
  padding: 40px;
}
.rd-verhaal__kaarttitel {
  font-family: var(--rd-rubik);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 24px;
}
.rd-verhaal__lijst { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.rd-verhaal__lijst li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; }

/* -------------------------------------------------------------- expertises */
.rd-expertises { padding: 84px 0 0; }
.rd-expertises__kop { display: flex; gap: 80px; align-items: flex-start; padding-bottom: 40px; }
.rd-expertises__kop > div:first-child { flex: 1; }
.rd-expertises__kop h2 {
  font-size: 48px;
  font-weight: 500;
  line-height: 58px;
  margin-top: 16px;
}
.rd-expertises__zij { width: 351px; flex: none; padding-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.rd-expertises__zij p { font-size: 16px; line-height: 24px; color: rgba(21,21,21,.75); }

.rd-kaartenrij {
  display: flex;
  gap: 24px;
  padding: 0 0 96px max(300px, calc((100vw - var(--rd-kolom)) / 2));
  overflow-x: auto;
  scrollbar-width: none;
}
.rd-kaartenrij::-webkit-scrollbar { display: none; }
.rd-kaart {
  width: 450px;
  min-height: 440px;
  flex: none;
  background: var(--rd-wit);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  color: var(--rd-zwart);
  transition: transform .18s ease;
}
.rd-kaart:hover { transform: translateY(-4px); color: var(--rd-zwart); }
.rd-kaart__icoon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(231,231,231,.55);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.rd-kaart__onder { margin-top: auto; display: block; }
.rd-kaart__titel {
  display: block;
  font-family: var(--rd-rubik);
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  margin-bottom: 16px;
}
.rd-kaart__tekst { display: block; font-size: 16px; line-height: 24px; color: rgba(21,21,21,.75); }

/* ------------------------------------------------------------------ cases */
.rd-cases { padding: 100px 0 96px; }
.rd-cases__kop { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.rd-cases__kop h2 {
  font-size: 48px;
  font-weight: 500;
  line-height: 58px;
  max-width: 560px;
  margin: 16px 0 0;
}
.rd-cases__tekst {
  font-size: 20px;
  line-height: 30px;
  color: rgba(21,21,21,.75);
  max-width: 460px;
  margin: 24px 0 32px;
}
.rd-casesrij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 56px;
}
.rd-case {
  position: relative;
  height: 650px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
}
.rd-case img { width: 100%; height: 100%; object-fit: cover; }
.rd-case__over {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);
}
.rd-case__tekst { position: absolute; left: 40px; right: 40px; bottom: 40px; }
.rd-case__naam {
  display: block;
  font-family: var(--rd-rubik);
  font-size: 24px;
  font-weight: 600;
  color: var(--rd-wit);
  margin-bottom: 14px;
}
.rd-case__labels { display: flex; gap: 10px; flex-wrap: wrap; }
.rd-case__labels span {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  color: var(--rd-wit);
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 50px;
}

/* ------------------------------------------------------------ zo begint het */
.rd-start { padding: 0 20px 96px; }
.rd-start__blok {
  position: relative;
  overflow: hidden;
  background: var(--rd-oranje);
  border-radius: 24px;
  padding: 120px 160px;
  display: flex;
  gap: 120px;
  color: var(--rd-wit);
}
.rd-start__blok > *:not(.rd-merkvlak) { position: relative; }
.rd-merkvlak--start {
  right: -80px; width: 900px;
  background: rgba(255,255,255,.10);
}
.rd-start__links { flex: 1; max-width: 640px; }
.rd-start__links h2 {
  font-size: 64px;
  font-weight: 500;
  line-height: 77px;
  color: var(--rd-wit);
  margin: 22px 0 0;
}
.rd-start__groot {
  font-size: 32px;
  font-weight: 500;
  line-height: 42px;
  margin-top: 126px;
}
.rd-start__rechts { width: 480px; flex: none; }
.rd-start__uitleg { font-size: 20px; font-weight: 700; line-height: 24px; max-width: 340px; }
.rd-start__klein { font-size: 16px; font-weight: 500; margin: 24px 0 28px; }
.rd-start__kaart {
  background: var(--rd-wit);
  color: var(--rd-zwart);
  border-radius: 12px;
  padding: 30px;
  margin-top: 60px;
}
.rd-start__quote { font-size: 16px; font-weight: 500; line-height: 24px; margin-bottom: 24px; }
.rd-start__wie { display: flex; align-items: center; gap: 14px; }
.rd-start__naam { font-size: 16px; font-weight: 500; }
.rd-start__rol { font-size: 14px; color: rgba(21,21,21,.75); }

/* ------------------------------------------------------------------- team */
.rd-team { padding: 96px 0 110px; }
.rd-merkvlak--links { left: 0; width: 946px; background: rgba(21,21,21,.05); }
.rd-merkvlak--rechts { left: 974px; width: 946px; background: rgba(21,21,21,.05); }
.rd-team__kop { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; }
.rd-team__kop h2 { font-size: 48px; font-weight: 500; line-height: 62px; margin-top: 16px; }
.rd-teamrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rd-lid { margin: 0; }
.rd-lid__vlak {
  display: block;
  background: var(--rd-oranje);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 312 / 360;
}
.rd-lid__vlak img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.rd-lid figcaption { padding-top: 24px; }
.rd-lid__naam { display: block; font-family: var(--rd-rubik); font-size: 24px; font-weight: 500; }
.rd-lid__rol { display: block; font-size: 16px; color: rgba(21,21,21,.75); margin-top: 4px; }

/* ---------------------------------------------------------- beoordelingen */
.rd-beoordelingen { position: relative; background: var(--rd-grijs-licht); padding: 80px 0 96px; overflow: hidden; }
.rd-beoordelingen__oranje { position: absolute; left: 0; top: 0; bottom: 0; width: 600px; background: var(--rd-oranje); }
.rd-beoordelingen__merk {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1050px;
  background: rgba(255,255,255,.10);
  clip-path: var(--rd-merkvorm);
}
.rd-beoordelingen__hoek {
  position: absolute; right: 0; top: 0; width: 285px; height: 228px;
  background: var(--rd-oranje);
  clip-path: var(--rd-merkvorm);
}
.rd-beoordelingen__binnen {
  position: relative;
  width: min(var(--rd-kolom), 100% - 48px);
  margin-inline: auto;
  padding-left: 380px;
}
.rd-beoordelingen h2 { font-size: 48px; font-weight: 500; line-height: 62px; margin-top: 16px; }
.rd-reviewrij {
  position: relative;
  display: flex;
  gap: 24px;
  margin-top: 56px;
  padding: 0 0 8px 338px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rd-reviewrij::-webkit-scrollbar { display: none; }
.rd-review {
  width: 450px;
  min-height: 500px;
  flex: none;
  background: var(--rd-wit);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.rd-review__badge { display: flex; align-items: center; gap: 10px; }
.rd-review__google { font-size: 16px; }
.rd-review__score { font-size: 16px; font-weight: 500; }
.rd-review__tekst { font-size: 24px; line-height: 34px; margin-top: 34px; }
.rd-review__wie { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 32px; }
.rd-review__naam { font-family: var(--rd-rubik); font-size: 18px; font-weight: 500; }
.rd-review__rol { font-size: 16px; color: rgba(21,21,21,.75); margin-top: 2px; }

/* -------------------------------------------------------------------- faq */
.rd-faq { padding: 100px 0 110px; }
.rd-faq h2 { font-size: 48px; font-weight: 500; line-height: 62px; margin: 16px 0 44px; }
.rd-faq__lijst { display: flex; flex-direction: column; gap: 12px; }
.rd-faq__item { background: var(--rd-grijs-licht); border-radius: 12px; padding: 0 32px; }
.rd-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 80px;
  font-family: var(--rd-rubik);
  font-size: 20px;
  font-weight: 500;
}
.rd-faq__item summary::-webkit-details-marker { display: none; }
.rd-faq__item summary > span:first-child { flex: 1; }
.rd-faq__teken {
  width: 24px; height: 24px; flex: none;
  border: 1.5px solid var(--rd-oranje);
  border-radius: 50%;
  position: relative;
}
.rd-faq__teken::before, .rd-faq__teken::after {
  content: ""; position: absolute; background: var(--rd-oranje);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.rd-faq__teken::before { width: 10px; height: 1.5px; }
.rd-faq__teken::after { width: 1.5px; height: 10px; }
.rd-faq__item[open] .rd-faq__teken::after { display: none; }
.rd-faq__item p {
  font-size: 16px;
  line-height: 24px;
  color: rgba(21,21,21,.75);
  max-width: 1160px;
  padding-bottom: 28px;
}
.rd-faq__onder { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.rd-faq__onder p { flex: 1; font-size: 20px; line-height: 30px; color: rgba(21,21,21,.75); }


/* ------------------------------------------------------------------ mobiel */
@media (max-width: 1100px) {
  :root { --rd-marge: 24px; }
  .rd-kop__nav, .rd-kop__partner { display: none; }
  .rd-kop__schakelaar {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  }
  .rd-kop__streep, .rd-kop__streep::before, .rd-kop__streep::after {
    display: block; width: 22px; height: 2px; background: var(--rd-zwart); content: "";
  }
  .rd-kop__streep::before { transform: translateY(-7px); }
  .rd-kop__streep::after { transform: translateY(5px); }
  .rd-mobielmenu { background: var(--rd-wit); border-bottom: 1px solid #EEE; padding: 12px 24px 24px; }
  .rd-mobielmenu__lijst { display: flex; flex-direction: column; gap: 4px; }
  .rd-mobielmenu__lijst a { display: block; padding: 12px 0; color: var(--rd-zwart); font-size: 17px; }
  .rd-mobielmenu .sub-menu a { padding-left: 16px; font-size: 15px; color: var(--rd-grijs); }

  .rd-usp__binnen { height: auto; flex-direction: column; gap: 10px; padding: 16px 0; }
  .rd-usp__item { justify-content: flex-start; font-size: 16px; }
  .rd-usp__bol { width: 22px; height: 22px; }
  .rd-usp__lijn { display: none; }

  .rd-hero { flex-direction: column; height: auto; }
  .rd-hero__tekst { width: 100%; padding: 48px 24px 40px; }
  .rd-hero h1 { font-size: clamp(34px, 8vw, 48px); line-height: 1.1; }
  .rd-hero__beeld { width: 100%; height: 380px; flex: none; }

  .rd-logobalk__binnen { height: auto; flex-wrap: wrap; padding: 24px 0; gap: 20px; }
  .rd-logobalk__lijn { display: none; }
  .rd-logobalk__rij { flex-wrap: wrap; justify-content: flex-start; gap: 28px; }

  .rd-voet__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; padding: 56px 0 40px; }
  .rd-voet__onderbinnen { flex-direction: column; align-items: flex-start; }
  .rd-voet__onderbinnen nav { margin-left: 0; }
}

@media (max-width: 620px) {
  .rd-voet__binnen { grid-template-columns: 1fr; }
  .rd-hero__beeld { height: 300px; }
}

/* ------------------------------------------- de nieuwe secties op mobiel */
@media (max-width: 1400px) {
  .rd-kaartenrij { padding-left: 24px; }
  .rd-reviewrij { padding-left: 24px; }
  .rd-beoordelingen__binnen { padding-left: 0; }
  .rd-beoordelingen__oranje { width: 260px; }
  .rd-start__blok { padding: 80px 60px; gap: 60px; }
  .rd-start__links h2 { font-size: 48px; line-height: 58px; }
  .rd-start__groot { margin-top: 48px; font-size: 26px; line-height: 36px; }
}

@media (max-width: 1100px) {
  .rd-verhaal { padding: 64px 0 56px; }
  .rd-verhaal__kop { flex-direction: column; gap: 28px; }
  .rd-verhaal__kop h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; }
  .rd-verhaal__zij { width: 100%; padding-top: 0; }
  .rd-verhaal__beeld { margin-top: 32px; }
  .rd-verhaal__beeld > img { height: 360px; }
  .rd-verhaal__kaart { position: static; width: 100%; margin-top: 20px; padding: 28px; }

  .rd-expertises { padding-top: 56px; }
  .rd-expertises__kop { flex-direction: column; gap: 24px; }
  .rd-expertises__kop h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; }
  .rd-expertises__zij { width: 100%; padding-top: 0; }
  .rd-kaart { width: 300px; min-height: 340px; padding: 28px; }
  .rd-kaart__titel { font-size: 22px; line-height: 28px; }
  .rd-kaartenrij { padding-bottom: 56px; }

  .rd-cases { padding: 64px 0 56px; }
  .rd-cases__kop h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; }
  .rd-casesrij { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .rd-case { height: 380px; }
  .rd-case__tekst { left: 24px; right: 24px; bottom: 24px; }

  .rd-start { padding: 0 12px 56px; }
  .rd-start__blok { flex-direction: column; padding: 48px 28px; gap: 36px; border-radius: 16px; }
  .rd-start__links h2 { font-size: clamp(30px, 7vw, 42px); line-height: 1.15; }
  .rd-start__groot { font-size: 20px; line-height: 30px; margin-top: 24px; }
  .rd-start__rechts { width: 100%; }
  .rd-start__kaart { margin-top: 32px; }

  .rd-team { padding: 56px 0 64px; }
  .rd-team__kop { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
  .rd-team__kop h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; }
  .rd-teamrij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .rd-lid__naam { font-size: 20px; }

  .rd-beoordelingen { padding: 56px 0 64px; }
  .rd-beoordelingen h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; }
  .rd-beoordelingen__oranje { display: none; }
  .rd-beoordelingen__hoek { width: 150px; height: 120px; }
  .rd-review { width: 300px; min-height: 380px; padding: 28px; }
  .rd-review__tekst { font-size: 18px; line-height: 28px; margin-top: 24px; }

  .rd-faq { padding: 56px 0 64px; }
  .rd-faq h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; margin-bottom: 28px; }
  .rd-faq__item { padding: 0 20px; }
  .rd-faq__item summary { font-size: 17px; min-height: 64px; gap: 16px; }
  .rd-faq__onder { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  .rd-teamrij { grid-template-columns: 1fr; }
  .rd-hero__tekstblok { max-width: none; }
}

/* ------------------------------------------------------------- kruimelpad */
.rd-kruimels { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #8A8A8A; }
.rd-kruimels a { color: #8A8A8A; }
.rd-kruimels a:hover { color: var(--rd-oranje); }
.rd-kruimels__hier { color: var(--rd-zwart); }

/* ----------------------------------------------------------- losse pagina */
.rd-paginakop { background: var(--rd-grijs-licht); padding: 26px 0 64px; }
.rd-paginakop h1 {
  font-size: 64px;
  font-weight: 500;
  line-height: 77px;
  max-width: 1100px;
  margin-top: 34px;
}
.rd-paginakop__intro {
  font-size: 20px;
  line-height: 30px;
  color: rgba(21,21,21,.75);
  max-width: 760px;
  margin-top: 24px;
}
.rd-paginabeeld { margin: -40px auto 0; position: relative; }
.rd-paginabeeld img { width: 100%; height: 520px; object-fit: cover; border-radius: 12px; }

/* --------------------------------------------------------------- artikel */
.rd-postkop { position: relative; padding: 20px 20px 0; }
.rd-postkop__blok {
  background: var(--rd-oranje);
  border-radius: 12px;
  min-height: 600px;
  padding: 100px 60px 0;
  text-align: center;
  color: var(--rd-wit);
}
.rd-postkop__blok h1 {
  font-size: 64px;
  font-weight: 500;
  line-height: 77px;
  color: var(--rd-wit);
  max-width: 900px;
  margin: 22px auto 0;
}
.rd-auteur {
  position: absolute;
  right: 50px;
  top: 50px;
  width: 300px;
  background: var(--rd-wit);
  border-radius: 12px;
  padding: 30px;
}
.rd-auteur__label { font-size: 14px; color: rgba(21,21,21,.75); margin-bottom: 14px; }
.rd-auteur__label--tweede { margin-top: 24px; padding-top: 20px; border-top: 1px solid #F0F0F0; }
.rd-auteur__wie { display: flex; align-items: center; gap: 12px; }
.rd-auteur__naam { font-size: 16px; font-weight: 500; }
.rd-auteur__rol { font-size: 14px; color: rgba(21,21,21,.75); }
.rd-auteur__delen { display: flex; gap: 16px; color: var(--rd-zwart); }
.rd-auteur__delen a { color: var(--rd-zwart); display: flex; }
.rd-auteur__delen a:hover { color: var(--rd-oranje); }
.rd-auteur__tijd {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid #F0F0F0;
}

.rd-postbeeld { width: min(1200px, 100% - 48px); margin: -234px auto 0; position: relative; }
.rd-postbeeld img { width: 100%; height: 650px; object-fit: cover; border-radius: 12px; }
.rd-postbeeld--leeg { height: 240px; }

.rd-postinhoud {
  width: min(850px, 100% - 48px);
  margin: 80px auto 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--rd-grijs-donker);
}
.rd-postinhoud > *:first-child { margin-top: 0; }
.rd-postinhoud p { margin: 0 0 22px; }
.rd-postinhoud h2 { font-size: 32px; font-weight: 500; line-height: 40px; margin: 44px 0 18px; color: var(--rd-zwart); }
.rd-postinhoud h3 { font-size: 24px; font-weight: 600; line-height: 32px; margin: 34px 0 14px; color: var(--rd-zwart); }
.rd-postinhoud h4 { font-size: 20px; font-weight: 600; margin: 28px 0 12px; color: var(--rd-zwart); }
.rd-postinhoud ul, .rd-postinhoud ol { margin: 0 0 22px; padding-left: 22px; }
.rd-postinhoud ul { list-style: none; padding-left: 0; }
.rd-postinhoud ul li { position: relative; padding-left: 24px; margin-bottom: 10px; }
.rd-postinhoud ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rd-oranje);
}
.rd-postinhoud ol li { margin-bottom: 10px; }
.rd-postinhoud img { border-radius: 12px; margin: 28px 0; }
.rd-postinhoud blockquote {
  background: var(--rd-perzik);
  border-radius: 12px;
  padding: 32px 36px;
  margin: 32px 0;
  font-family: var(--rd-rubik);
  font-size: 21px;
  line-height: 32px;
  color: var(--rd-zwart);
}
.rd-postinhoud blockquote p:last-child { margin-bottom: 0; }
.rd-postinhoud table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; }
.rd-postinhoud th, .rd-postinhoud td { border-bottom: 1px solid var(--rd-grijs-licht); padding: 12px 8px; text-align: left; }

.rd-postvoet {
  width: min(850px, 100% - 48px);
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--rd-grijs-licht);
  padding-top: 26px;
}

/* ------------------------------------------------------------ blogoverzicht */
.rd-blogkop { padding: 20px 20px 0; }
.rd-blogkop__blok {
  position: relative;
  overflow: hidden;
  background: var(--rd-oranje);
  border-radius: 12px;
  padding: 90px 60px 90px 280px;
  color: var(--rd-wit);
}
.rd-blogkop__blok > *:not(.rd-merkvlak) { position: relative; }
.rd-merkvlak--blog {
  right: 120px; left: auto;
  top: 90px; bottom: 90px;
  width: 200px;
  background: var(--rd-wit);
}
.rd-blogkop h1 {
  font-size: 64px;
  font-weight: 500;
  line-height: 77px;
  color: var(--rd-wit);
  max-width: 620px;
  margin: 22px 0 40px;
}
.rd-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50px;
  padding: 5px;
  flex-wrap: wrap;
}
.rd-filters__item {
  color: var(--rd-wit);
  font-size: 16px;
  padding: 11px 22px;
  border-radius: 50px;
}
.rd-filters__item:hover { color: var(--rd-wit); background: rgba(255,255,255,.12); }
.rd-filters__item.is-actief { background: var(--rd-wit); color: var(--rd-zwart); font-weight: 500; }

.rd-blog { padding: 90px 0 110px; }
.rd-postrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.rd-postkaart { display: flex; flex-direction: column; }
.rd-postkaart__beeld {
  display: block;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--rd-grijs-licht);
}
.rd-postkaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.rd-postkaart__meta { display: flex; align-items: center; gap: 9px; font-size: 14px; color: rgba(21,21,21,.75); margin-top: 20px; }
.rd-postkaart__titel { font-size: 24px; font-weight: 500; line-height: 31px; margin: 12px 0 10px; }
.rd-postkaart__titel a { color: var(--rd-zwart); }
.rd-postkaart__titel a:hover { color: var(--rd-oranje); }
.rd-postkaart__tekst { font-size: 16px; line-height: 24px; color: rgba(21,21,21,.75); margin-bottom: 16px; }
.rd-postkaart__link {
  font-weight: 700;
  border-bottom: 1.5px solid var(--rd-oranje);
  align-self: flex-start;
  padding-bottom: 2px;
  margin-top: auto;
}

.rd-paginering { margin-top: 64px; }
.rd-paginering .nav-links { display: flex; gap: 10px; align-items: center; justify-content: center; }
.rd-paginering .page-numbers {
  min-width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50px; padding: 0 18px;
  background: var(--rd-grijs-licht); color: var(--rd-zwart);
  font-weight: 500;
}
.rd-paginering .page-numbers.current, .rd-paginering .page-numbers:hover {
  background: var(--rd-oranje); color: var(--rd-wit);
}

/* -------------------------------------------------------- verwante artikelen */
.rd-verwant { padding: 90px 0 100px; }
.rd-verwant__kop { text-align: center; margin-bottom: 48px; }
.rd-verwant__kop h2 { font-size: 48px; font-weight: 500; line-height: 58px; margin-top: 16px; }

/* --------------------------------------------------- sjablonen op mobiel */
@media (max-width: 1400px) {
  .rd-auteur { position: static; width: auto; max-width: 420px; margin: 32px auto 0; }
  .rd-postkop__blok { min-height: 0; padding: 60px 40px 40px; }
  .rd-postbeeld { margin-top: 32px; }
}

@media (max-width: 1100px) {
  .rd-paginakop { padding: 20px 0 40px; }
  .rd-paginakop h1 { font-size: clamp(32px, 7vw, 46px); line-height: 1.15; margin-top: 24px; }
  .rd-paginakop__intro { font-size: 17px; line-height: 26px; }
  .rd-paginabeeld img { height: 300px; }

  .rd-postkop__blok h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.15; }
  .rd-postbeeld img { height: 320px; }
  .rd-postinhoud { margin-top: 48px; font-size: 16px; line-height: 26px; }
  .rd-postinhoud h2 { font-size: 26px; line-height: 34px; }

  .rd-blogkop__blok { padding: 48px 28px; }
  .rd-blogkop h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.15; margin-bottom: 28px; }
  .rd-merkvlak--blog { display: none; }
  .rd-filters__item { font-size: 15px; padding: 9px 16px; }

  .rd-blog { padding: 56px 0 64px; }
  .rd-postrij { grid-template-columns: 1fr; gap: 32px; }
  .rd-verwant { padding: 56px 0 64px; }
  .rd-verwant__kop h2 { font-size: clamp(28px, 6vw, 38px); line-height: 1.2; }
}

/* de omgezette oude uitklappers */
.rd-uitklap { padding-bottom: 24px; font-size: 16px; line-height: 26px; color: rgba(21,21,21,.75); }
.rd-uitklap p { margin: 0 0 14px; }

/* oude content die nog niet is omgezet: leesbaar houden */
.rd-postinhoud, .rd-postinhoud * { text-align: left !important; }
.rd-postinhoud h1, .rd-postinhoud h2, .rd-postinhoud h3, .rd-postinhoud h4 { max-width: none; }
.rd-postinhoud img { max-width: 100%; max-height: 360px; width: auto; height: auto; }
.rd-postinhoud figure { margin: 28px 0; }
.rd-postinhoud a { color: var(--rd-oranje); }
.rd-postinhoud .rd-knop { color: var(--rd-wit); text-decoration: none; margin: 8px 0 20px; }

/* beelden die in de oude site een carrousel waren */
.rd-logorij {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 40px; margin: 28px 0; padding: 28px 0; border-top: 1px solid var(--rd-grijs-licht);
  border-bottom: 1px solid var(--rd-grijs-licht);
}
.rd-logorij img { max-height: 48px !important; max-width: 150px; width: auto; margin: 0 !important; }
.rd-postinhoud img { max-height: 260px; }

/* ------------------------------------------------------ overzichtspagina's */
.rd-paginakop__rij { display: flex; gap: 80px; align-items: flex-end; }
.rd-paginakop__rij h1 { flex: 1; }
.rd-paginakop__zij {
  width: 420px; flex: none;
  font-size: 16px; line-height: 24px;
  color: rgba(21,21,21,.75);
  padding-bottom: 12px;
}

.rd-werk { padding: 64px 0 110px; }
.rd-werkrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rd-werkrij .rd-case { height: 420px; }
.rd-case__leeg { position: absolute; inset: 0; background: var(--rd-grijs-licht); display: block; }

/* ------------------------------------------------------------- vacatures */
.rd-vacaturekop { display: flex; align-items: center; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.rd-vacaturekop .rd-hero__staaf { margin-top: 0; }

.rd-sfeer {
  display: flex; gap: 20px; align-items: center;
  padding: 64px 0 96px 180px;
  overflow: hidden;
}
.rd-sfeer img { border-radius: 14px; object-fit: cover; flex: none; }
.rd-sfeer__0 { width: 210px; height: 300px; }
.rd-sfeer__1 { width: 440px; height: 400px; }
.rd-sfeer__2 { width: 380px; height: 340px; }
.rd-sfeer__3 { width: 520px; height: 300px; }

.rd-cultuur { background: var(--rd-oranje); color: var(--rd-wit); }
.rd-cultuur__binnen { display: flex; gap: 60px; align-items: flex-start; padding: 96px 0; }
.rd-cultuur__links { flex: 1; }
.rd-cultuur__links h2 {
  font-size: 48px; font-weight: 500; line-height: 58px;
  color: var(--rd-wit); max-width: 420px; margin: 20px 0 32px;
}
.rd-cultuur__lijst { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.rd-cultuur__lijst .rd-faq__item { background: var(--rd-wit); color: var(--rd-zwart); }
.rd-cultuur__beeld { width: 520px; flex: none; }
.rd-cultuur__beeld img { width: 100%; height: 600px; object-fit: cover; border-radius: 14px; }

.rd-vacatures { padding: 96px 0 110px; }
.rd-vacatures h2 { font-size: 48px; font-weight: 500; line-height: 58px; text-align: center; margin-bottom: 40px; }
.rd-vacaturelijst { display: flex; flex-direction: column; gap: 12px; }
.rd-vacature {
  display: flex; align-items: center; gap: 24px;
  background: var(--rd-grijs-licht);
  border-radius: 12px;
  padding: 26px 32px;
  color: var(--rd-zwart);
}
.rd-vacature:hover { background: var(--rd-perzik); color: var(--rd-zwart); }
.rd-vacature__titel { flex: 1; font-family: var(--rd-rubik); font-size: 20px; font-weight: 500; }
.rd-vacature__kolom { width: 130px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-grijs); }
.rd-vacatures__slot, .rd-vacatures__leeg { text-align: center; margin-top: 32px; color: rgba(21,21,21,.75); }

.rd-blog--tekst { padding-top: 0; }

@media (max-width: 1400px) {
  .rd-sfeer { padding-left: 24px; }
}

@media (max-width: 1100px) {
  .rd-paginakop__rij { flex-direction: column; align-items: flex-start; gap: 20px; }
  .rd-paginakop__zij { width: 100%; padding-bottom: 0; }
  .rd-werk { padding: 40px 0 64px; }
  .rd-werkrij { grid-template-columns: 1fr; gap: 20px; }
  .rd-werkrij .rd-case { height: 300px; }
  .rd-sfeer { padding: 40px 0 56px 24px; gap: 12px; }
  .rd-sfeer__0 { width: 130px; height: 190px; }
  .rd-sfeer__1 { width: 260px; height: 240px; }
  .rd-sfeer__2 { width: 220px; height: 200px; }
  .rd-sfeer__3 { width: 280px; height: 180px; }
  .rd-cultuur__binnen { flex-direction: column; padding: 56px 0; gap: 32px; }
  .rd-cultuur__links h2 { font-size: clamp(28px, 6vw, 40px); line-height: 1.2; }
  .rd-cultuur__beeld { width: 100%; }
  .rd-cultuur__beeld img { height: 320px; }
  .rd-vacatures { padding: 56px 0 64px; }
  .rd-vacatures h2 { font-size: clamp(28px, 6vw, 40px); line-height: 1.2; }
  .rd-vacature { flex-wrap: wrap; gap: 10px 16px; padding: 20px 22px; }
  .rd-vacature__titel { flex: 1 1 100%; font-size: 17px; }
  .rd-vacature__kolom { width: auto; }
}

/* -------------------------------------------------- niets buiten het scherm */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 1100px) {
  .rd-kop__binnen { gap: 12px; width: calc(100% - 32px); }
  .rd-kop__acties { gap: 8px; margin-left: auto; }
  .rd-kop__contact { height: 42px; padding: 0 18px; font-size: 15px; }
  .rd-kop__logo svg { height: 22px; width: auto; }
  .rd-usp__binnen { width: calc(100% - 32px); }
  .rd-binnen { width: calc(100% - 32px); }
  .rd-logobalk__binnen { width: calc(100% - 32px); }
  .rd-voet__binnen, .rd-voet__onderbinnen { width: calc(100% - 32px); }
  .rd-hero h1, .rd-paginakop h1, .rd-postkop__blok h1, .rd-blogkop h1 { overflow-wrap: anywhere; }
  .rd-logobalk__rij { justify-content: space-between; gap: 20px 28px; }
  .rd-logobalk__rij img { max-height: 24px; max-width: 110px; }
  .rd-postinhoud { width: calc(100% - 32px); }
  .rd-postbeeld { width: calc(100% - 32px); }
  .rd-postvoet { width: calc(100% - 32px); }
}

@media (max-width: 480px) {
  .rd-kop__contact span, .rd-kop__contact { font-size: 0; }
  .rd-kop__contact svg { width: 18px; height: 18px; }
  .rd-kop__contact { padding: 0 14px; }
}

/* titel die geen H1 is, omdat de content er zelf al een heeft */
.rd-paginakop__titel, .rd-postkop__titel {
  font-family: var(--rd-rubik);
  font-size: 64px;
  font-weight: 500;
  line-height: 77px;
  letter-spacing: -0.02em;
  margin-top: 34px;
}
.rd-postkop__titel {
  color: var(--rd-wit);
  max-width: 900px;
  margin: 22px auto 0;
}
@media (max-width: 1100px) {
  .rd-paginakop__titel { font-size: clamp(32px, 7vw, 46px); line-height: 1.15; margin-top: 24px; }
  .rd-postkop__titel { font-size: clamp(30px, 7vw, 44px); line-height: 1.15; }
}

/* ============================================================================
 * Bewegende schermen bij de cases, versie met telefoon en een echte loop.
 * Het beeld staat twee keer onder elkaar en schuift precies een beeldhoogte
 * op. Daardoor is er geen sprong en geen moment dat hij terugscrollt.
 * ========================================================================== */

.rd-show {
  position: relative;
  padding-right: 120px;
}

.rd-mockup { margin: 0; --rd-duur: 14s; }

/* ---------------------------------------------------------------- laptop */
.rd-mockup__kap {
  background: #1D1D1F;
  border-radius: 16px 16px 6px 6px;
  padding: 16px 16px 18px;
  position: relative;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .28);
}
.rd-mockup__lens {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #3A3A3C;
}
.rd-mockup__voet {
  height: 14px;
  margin: 0 -3.2%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #C8C9CC 0%, #9B9CA0 62%, #7C7D81 100%);
  position: relative;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
.rd-mockup__voet span {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 7px;
  border-radius: 0 0 8px 8px;
  background: #8A8B8F;
}

/* -------------------------------------------------------------- telefoon */
.rd-mockup--telefoon {
  position: absolute;
  right: 0;
  bottom: -34px;
  width: 232px;
}
.rd-telefoon {
  position: relative;
  background: #1D1D1F;
  border-radius: 30px;
  padding: 9px;
  box-shadow: 0 22px 46px rgba(0, 0, 0, .30);
}
.rd-telefoon .rd-mockup__scherm {
  aspect-ratio: 9 / 19.5;
  border-radius: 22px;
}
.rd-telefoon__balk {
  position: absolute;
  top: 17px; left: 50%;
  transform: translateX(-50%);
  width: 62px; height: 17px;
  border-radius: 12px;
  background: #1D1D1F;
  z-index: 3;
}

/* ------------------------------------------------------------- het scherm */
.rd-mockup__scherm {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--rd-wit);
  aspect-ratio: 16 / 10;
}
.rd-mockup__band { display: block; }
.rd-mockup__band img { display: block; width: 100%; height: auto; }

.rd-mockup__scherm::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(114deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%);
}

/* Doorlopend, zonder terugsprong: het beeld staat twee keer onder elkaar en
   we schuiven precies de helft van de band op. */
@keyframes rd-lopen {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.rd-mockup.is-zichtbaar .rd-mockup__band {
  animation: rd-lopen var(--rd-duur) linear infinite;
  will-change: transform;
}
.rd-show:hover .rd-mockup__band,
.rd-show:focus-within .rd-mockup__band { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rd-mockup.is-zichtbaar .rd-mockup__band { animation: none; }
}

/* ------------------------------------------------------------- bijschrift */
.rd-show__bijschrift { margin-top: 58px; text-align: center; }
.rd-show__bijschrift a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--rd-zwart);
  border-bottom: 1.5px solid var(--rd-oranje);
  padding-bottom: 3px;
}
.rd-show__bijschrift a:hover { color: var(--rd-oranje); }

/* --------------------------------------------------- plek op de casepagina */
.rd-caseshow {
  width: min(1100px, 100% - 48px);
  margin: -180px auto 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  .rd-caseshow { margin-top: 32px; width: calc(100% - 32px); }
  .rd-show { padding-right: 0; }
  .rd-mockup__kap { padding: 9px 9px 11px; border-radius: 10px 10px 4px 4px; }
  .rd-mockup__voet { height: 10px; }
  .rd-mockup__voet span { width: 60px; height: 5px; }
  .rd-mockup--telefoon { position: static; width: 150px; margin: 22px auto 0; }
  .rd-show__bijschrift { margin-top: 26px; }
}