/* =============================================================================
   RM Styleguide 2026 : conformiteitslaag voor /research-innovation/
   Bron: https://rm-style-guide.vercel.app (secties 02 t/m 10)
   Los bestand (geen edits in de minified export). Verwijder de <link> in
   index.html om terug te gaan naar de vorige stijl.
   ========================================================================== */

/* ---------- 03 Typografie : lettertype-variabelen -------------------------
   De export zet --font-gilroy / --font-playfair via een descendant-selector
   (.rm-ri .__variable_x) terwijl alle klassen op ÉÉN element staan. Daardoor
   waren de variabelen leeg en vielen alle koppen terug op Ubuntu en alle
   accentwoorden op Ubuntu-cursief. Hier rechtstreeks gezet. */
.rm-ri {
  --font-gilroy: "__gilroy_07aedb", Gilroy, "__gilroy_Fallback_07aedb", system-ui, sans-serif;
  --font-playfair: "__Playfair_Display_86b090", "Playfair","Playfair Display", "__Playfair_Display_Fallback_86b090", Georgia, serif;
}

/* ---------- Koppen : Gilroy, schaal 54/36/24/21/18 ------------------------ */
.rm-ri h1:not(.mpc-h1),
.rm-ri h2,
.rm-ri h3,
.rm-ri h4,
.rm-ri h5 {
  font-family: var(--font-gilroy) !important;
}
/* H1 (hero): Gilroy 800, 54/32, lh 1.25, -3% */
.rm-ri h1[class*="text-[72px]"] {
  font-weight: 800 !important;
  font-size: 54px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em !important;
}
/* H2: Gilroy 700, 36/24, lh 1.25 */
.rm-ri h2,
.rm-ri .vpl-t,
.rm-ri .rmvc-title,
.rm-ri p[class*="text-[38px]"][class*="font-display"] {
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}
/* H3: Gilroy 700, 24/21, lh 1.3 */
.rm-ri h3 {
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}
/* H4: 21/18 (kaarttitels in onderzoek- en methodeblok) */
.rm-ri h3[class*="text-[20px]"],
.rm-ri h3[class*="text-[22px]"] {
  font-size: 21px !important;
}
/* H5: 18/17 (compacte kaarten) */
.rm-ri .dp-card h3,
.rm-ri h3.mpc-h3 {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.rm-ri .mpc-h3 { font-weight: 700 !important; }

/* Eyebrow -> H 12px, H -> tekst 24px (vaste ritme-tokens) */
.rm-ri div:has(> .eyebrow + h2) { gap: 0 !important; }
.rm-ri div:has(> .eyebrow + h2) > h2 { margin-top: 12px !important; }
.rm-ri div:has(> .eyebrow + h2) > h2 + * { margin-top: 24px !important; }
.rm-ri .vpl-t { margin-top: 12px !important; }

@media (max-width: 767px) {
  .rm-ri h1[class*="text-[72px]"] { font-size: 32px !important; }
  .rm-ri h2,
  .rm-ri .vpl-t,
  .rm-ri .rmvc-title,
  .rm-ri p[class*="text-[38px]"][class*="font-display"] { font-size: 24px !important; }
  .rm-ri h3 { font-size: 21px !important; }
  .rm-ri h3[class*="text-[20px]"],
  .rm-ri h3[class*="text-[22px]"] { font-size: 18px !important; }
  .rm-ri .dp-card h3,
  .rm-ri h3.mpc-h3 { font-size: 17px !important; }
  .rm-ri p[class*="text-[18px]"] { font-size: 17px !important; }
}

/* ---------- Accentwoord: ongewijzigd t.o.v. voor de guide-pass -------------
   De font-variabelen zijn nu gevuld, dus .accent zou vanzelf Playfair worden.
   Op verzoek blijft het accent zoals het was: Ubuntu cursief, tekstkleur. */
.rm-ri .accent {
  font-family: inherit !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: inherit !important;
}

/* ---------- 02 Kleuren : geen blauwe/grijze tekst op donker --------------- */
/* "#b8caff en #97a5ce zijn geen tekstkleuren meer. Tekst op donker is wit." */
.rm-ri .text-fg-muted,
.rm-ri .text-fg-blue,
.rm-ri [class*="text-[#97a5ce]"]:not(div.flex-col.gap-\[15px\] p),
.rm-ri [class*="text-[#b8caff]"]:not(div.flex-col.gap-\[15px\] p),
.rm-ri [class*="text-[#c9d3f0]"],
.rm-ri [class*="text-[#b7c0ce]"],
.rm-ri [class*="text-[#9cb4ff]"],
.rm-ri [class*="text-[rgba(151,165,206"] {
  color: #fff !important;
}
/* componentklassen uit de eigen v2-bestanden */
.rm-ri .rdw-quote, .rm-ri .rdw-bubble span, .rm-ri .rm-ca-n, .rm-ri .rm-meth-bubble,
.rm-ri .rmvc-label, .rm-ri .rmvc-note, .rm-ri .rmvc-lead, .rm-ri .rmvc-intro-p,
.rm-ri .rmvc-kicker, .rm-ri .rmvc-close, .rm-ri .rmvc-open-title,
.rm-ri .rmbn-chip, .rm-ri .rmbn-blink,
.rm-ri .dp-eyebrow, .rm-ri .dp-card p, .rm-ri .dp-hub span,
.rm-ri .ri-src-link, .rm-ri .ri-src-pre,
.rm-ri .vpl-rol, .rm-ri .vpl-zeg {
  color: #fff !important;
}
/* oranje/groen/rood: alleen de merk- en statuskleuren */
.rm-ri .text-brand-light,
.rm-ri [class*="text-[#ff8555]"],
.rm-ri [class*="text-[#f0742e]"] { color: #f16b37 !important; }
.rm-ri [class*="text-[#ff7a7e]"] { color: #ff4b4b !important; }
.rm-ri [class*="text-[#a0e68d]"],
.rm-ri .text-success,
.rm-ri .dp-active { color: #6acc50 !important; }
.rm-ri .dp-hub ~ * b, .rm-ri .dp-card--orange b { color: #f16b37 !important; }
.rm-ri .dp-active::before, .rm-ri .dp-active i { background: #6acc50 !important; }

/* Oranje gradient is alleen voor knoppen, nooit voor grafieken/vlakken/tekst */
.rm-ri [class*="bg-gradient-to-"][class*="from-[#ff8555]"],
.rm-ri .bg-brand-grad,
.rm-ri [class~="bg-[#ff7a00]"] {
  background-image: none !important;
  background-color: #f16b37 !important;
}
.rm-ri .bg-clip-text.bg-brand-grad,
.rm-ri .bg-clip-text[class*="from-[#ff8555]"] {
  background: none !important;
  color: #f16b37 !important;
  -webkit-text-fill-color: #f16b37 !important;
}

/* ---------- 03 Typografie : bodyschaal (nooit kleiner dan p-XS 12px) ------- */
.rm-ri [class*="text-[8px]"],
.rm-ri [class*="text-[9px]"] { font-size: 10px !important; }                      /* stat-labels: 10px uppercase */
.rm-ri [class*="text-[10px]"]:not(sup),
.rm-ri [class*="text-[11px]"] { font-size: 12px !important; }                     /* labels/chips: 12px */
.rm-ri [class*="text-[13px]"],
.rm-ri [class*="text-[13.5px]"] { font-size: 14px !important; }                   /* p-small: 15/14 */
.rm-ri .rdw-quote { font-size: 12px !important; line-height: 1.5 !important; }
.rm-ri .rdw-bubble b, .rm-ri .rdw-bubble span { font-size: 12px !important; }
.rm-ri .dp-eyebrow { font-size: 12px !important; }
.rm-ri .ri-src-link, .rm-ri .ri-src-pre { font-size: 12px !important; }
.rm-ri .rmvc-close { font-size: 12px !important; }

/* ---------- 07 Radius-schaal: 8 / 12 / 16 / 24 / pill -------------------- */
.rm-ri .dp-card { border-radius: 16px !important; }
.rm-ri .rdw-bubble,
.rm-ri .rm-meth-bubble,
.rm-ri [class*="rounded-[14px]"] { border-radius: 12px !important; }
.rm-ri .rmvc-card, .rm-ri .rmvc-shell { border-radius: 24px !important; }
.rm-ri .rmbn-c, .rm-ri .rmbn-front { border-radius: 12px !important; }
.rm-ri [class*="rounded-[10px]"] { border-radius: 24px !important; }              /* case-kaarten: 24px */
.rm-ri [class*="rounded-[32px]"] { border-radius: 24px !important; }
.rm-ri [class*="rounded-md"] { border-radius: 8px !important; }

/* ---------- 08 Kaarten & panelen: #000c32, 1px lijnblauw 40% -------------- */
.rm-ri .dp-card,
.rm-ri .rm-iris-card,
.rm-ri [class*="bg-[rgba(23,47,119,0.15)]"] {
  background-color: #000c32 !important;
  border-color: rgba(57, 81, 153, 0.4) !important;
}
.rm-ri .rdw-bubble,
.rm-ri .rm-meth-bubble,
.rm-ri .rm-ca-video,
.rm-ri .rm-tool-video {
  background-color: #0a1336 !important;
  border-color: rgba(57, 81, 153, 0.4) !important;
}
.rm-ri [class*="border-[rgba(77,100,221,0.22)]"],
.rm-ri [class*="border-[rgba(0,12,49,0.1)]"],
.rm-ri [class*="border-white/[0.07]"],
.rm-ri [class*="border-white/[0.08]"] {
  border-color: rgba(57, 81, 153, 0.4) !important;
}
.rm-ri .dp-hub { background: #0a1336 !important; border-color: rgba(57, 81, 153, 0.4) !important; }

/* Status-tinten: vulling 10%, rand 50% */
.rm-ri [class*="bg-[rgba(106,204,80,0.15)]"] { background-color: rgba(106, 204, 80, 0.1) !important; }
.rm-ri [class*="bg-[rgba(255,75,75,0.15)]"] { background-color: rgba(255, 75, 75, 0.1) !important; }

/* "Geschikt voor" / "Minder geschikt voor": status-badges, geen CTA-gradient */
.rm-ri [style*="81.92deg"] {
  background-image: none !important;
  background-color: rgba(106, 204, 80, 0.1) !important;
  border: 1px solid rgba(106, 204, 80, 0.5) !important;
  box-shadow: none !important;
}
.rm-ri [style*="79.04deg"] {
  background-image: none !important;
  background-color: rgba(255, 75, 75, 0.1) !important;
  border: 1px solid rgba(255, 75, 75, 0.5) !important;
  box-shadow: none !important;
}

/* ---------- 08 Stat-blokken: waarde altijd groen -------------------------- */
.rm-ri p.font-display[class*="text-[25.77px]"],
.rm-ri span.font-display[class*="text-[26px]"][class*="tracking-[-0.5px]"],
.rm-ri span.font-display[class*="text-[22px]"][class*="font-extrabold"],
.rm-ri span.font-display[class*="text-[20px]"][class*="font-extrabold"],
.rm-ri dd.mpc-display {
  color: #6acc50 !important;
  font-weight: 700 !important;
}
.rm-ri span[class*="bg-clip-text"][class*="font-extrabold"] {
  color: #6acc50 !important;
  -webkit-text-fill-color: #6acc50 !important;
  background: none !important;
}
.rm-ri p[class*="italic"][class*="text-brand-light"][class*="text-[10px]"] {
  color: #6acc50 !important;
  font-size: 12px !important;
}

/* ---------- 08 Knoppen: styleguide Primary / Secondary (v4) ---------------------
   79deg-gradient, 50px (outline 52px), pill, Ubuntu 700 15px, label op 1 regel,
   GEEN schaduw in rust, gloed + lift pas bij hover/focus, chip 36px wit met navy
   pijl die bij hover wisselt (uit naar rechtsboven, nieuwe van linksonder). */
.rm-ri .btn-primary,
.rm-ri .btn-ghost {
  min-height: 50px;
  padding: 7px 7px 7px 30px !important;
  font-family: var(--font-ubuntu), "Ubuntu", system-ui, sans-serif;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  gap: 14px !important;
  border-radius: 9999px !important;
  white-space: nowrap;
  box-shadow: none;
  text-decoration: none !important;
}
.rm-ri .btn-primary > span:first-child,
.rm-ri .btn-ghost > span:first-child { white-space: nowrap; }
.rm-ri .btn-primary {
  background-image: linear-gradient(79deg, #ff8555 0%, #d04813 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 320ms cubic-bezier(.34, 1.56, .64, 1), filter 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.rm-ri .btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  background: transparent !important;
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1), background-color .27s ease-in-out, border-color .27s ease-in-out;
}
.rm-ri .btn-primary:hover,
.rm-ri .btn-primary:focus-visible {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 20px 56px rgba(255, 133, 85, 0.55), 0 10px 28px rgba(208, 72, 19, 0.45);
  filter: brightness(1.07) saturate(1.05);
  background-position: 0 0 !important;
}
.rm-ri .btn-ghost:hover,
.rm-ri .btn-ghost:focus-visible {
  transform: translateY(-3px) scale(1.025);
  background-color: rgba(255, 255, 255, 0.08) !important;
}
.rm-ri .btn-primary:active,
.rm-ri .btn-ghost:active { transform: translateY(-1px) scale(1); transition-duration: 140ms; }
.rm-ri .btn-primary:active { box-shadow: 0 12px 40px rgba(255, 133, 85, 0.45); }

/* chip: 36px wit, navy pijl 16px (twee pijlen, wissel bij hover) */
.rm-ri .btn-primary .btn-arrow,
.rm-ri .btn-ghost .btn-arrow {
  position: relative;
  overflow: hidden;
  width: 36px;
  height: 36px;
  background-color: #fff;
}
.rm-ri .btn-primary .btn-arrow svg.btn-arrow-icon,
.rm-ri .btn-ghost .btn-arrow svg.btn-arrow-icon { opacity: 0; transform: none !important; transition: none; }
.rm-ri .btn-arrow:has(svg.btn-arrow-icon)::before,
.rm-ri .btn-arrow:has(svg.btn-arrow-icon)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background-color: #08288b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: transform 380ms cubic-bezier(.65, 0, .35, 1), opacity 260ms ease;
}
.rm-ri .btn-arrow:has(svg.btn-arrow-icon)::before { transform: translate(-50%, -50%); opacity: 1; }
.rm-ri .btn-arrow:has(svg.btn-arrow-icon)::after { transform: translate(-180%, 80%); opacity: 0; }
.rm-ri :is(.btn-primary, .btn-ghost):is(:hover, :focus-visible) .btn-arrow:has(svg.btn-arrow-icon)::before { transform: translate(80%, -180%); opacity: 0; }
.rm-ri :is(.btn-primary, .btn-ghost):is(:hover, :focus-visible) .btn-arrow:has(svg.btn-arrow-icon)::after { transform: translate(-50%, -50%); opacity: 1; }
/* telefoon-chip (Bel-knop): zelfde chip, navy icoon, geen pijlwissel */
.rm-ri .btn-arrow svg.lucide { width: 16px; height: 16px; color: #08288b; }
@media (prefers-reduced-motion: reduce) {
  .rm-ri .btn-arrow:has(svg.btn-arrow-icon)::before,
  .rm-ri .btn-arrow:has(svg.btn-arrow-icon)::after { transition: opacity 150ms ease; transform: translate(-50%, -50%) !important; }
  .rm-ri .btn-primary, .rm-ri .btn-ghost { transition: box-shadow 150ms ease, background-color 150ms ease; }
  .rm-ri .btn-primary:hover, .rm-ri .btn-primary:focus-visible, .rm-ri .btn-ghost:hover, .rm-ri .btn-ghost:focus-visible { transform: none; }
}
/* volle breedte (block): chip 7px van de rand, label gecentreerd, 43px aan beide kanten */
.rm-ri .btn-full {
  min-height: 50px;
  padding-left: 43px !important;
  padding-right: 43px !important;
}
.rm-ri .btn-primary.btn-full .btn-arrow,
.rm-ri .btn-ghost.btn-full .btn-arrow { position: absolute; right: 7px; top: 50%; }
.rm-ri .btn-full > span:first-child { font: 700 15px/1.2 var(--font-ubuntu), "Ubuntu", system-ui, sans-serif !important; }
/* mobiel: knop over de volle breedte = block (chip vast 7px van de rand, label gecentreerd) */
@media (max-width: 767px) {
  .rm-ri :is(.btn-primary, .btn-ghost).max-md\:w-full {
    position: relative;
    padding-left: 43px !important;
    padding-right: 43px !important;
  }
  .rm-ri :is(.btn-primary, .btn-ghost).max-md\:w-full .btn-arrow {
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -18px;
  }
}
@media (max-width: 430px) {
  .rm-ri :is(.btn-primary, .btn-ghost) > span:first-child { white-space: normal; text-align: center; }
}
/* kleine knop (kaart naast de foto): terug naar Large, net als de rest */
.rm-ri .vpl .vpl-cta a.vpl-knop {
  min-height: 50px;
  box-shadow: none;
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 320ms cubic-bezier(.34, 1.56, .64, 1), filter 320ms cubic-bezier(.34, 1.56, .64, 1);
}
.rm-ri .vpl .vpl-cta a.vpl-knop:hover,
.rm-ri .vpl .vpl-cta a.vpl-knop:focus-visible {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 20px 56px rgba(255, 133, 85, 0.55), 0 10px 28px rgba(208, 72, 19, 0.45);
  filter: brightness(1.07) saturate(1.05);
}
/* manifest-knop: zelfde Large-knop, geen rustschaduw, glow bij hover op het blok */
.rm-ri .rmvc .rmvc-cta,
.rm-ri .rmvc .rmvc-shell:hover .rmvc-cta {
  background: linear-gradient(79deg, #ff8555 0%, #d04813 100%) !important;
}
.rm-ri .rmvc .rmvc-cta {
  min-height: 50px;
  padding: 7px 7px 7px 30px !important;
  gap: 14px !important;
  white-space: nowrap;
  box-shadow: none !important;
  transition: transform 320ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 320ms cubic-bezier(.34, 1.56, .64, 1), filter 320ms cubic-bezier(.34, 1.56, .64, 1) !important;
}
.rm-ri .rmvc .rmvc-shell:hover .rmvc-cta {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 20px 56px rgba(255, 133, 85, 0.55), 0 10px 28px rgba(208, 72, 19, 0.45) !important;
  filter: brightness(1.07) saturate(1.05);
}
.rm-ri .rmvc .rmvc-cta-icon { width: 36px !important; height: 36px !important; color: #08288b !important; }
.rm-ri .rmvc .rmvc-cta-icon svg { width: 16px !important; height: 16px !important; }

/* ---------- Iconen: één stijl, oranje outline ----------------------------- */
.rm-ri .dp-card svg,
.rm-ri .dp-card--green svg,
.rm-ri .dp-card--azure svg { stroke: #f16b37 !important; color: #f16b37 !important; }

/* ---------- aanvullingen op componentklassen ------------------------------- */
.rm-ri .rdw-who, .rm-ri .rdw-who span,
.rm-ri .rm-meth-who, .rm-ri .rm-meth-who span,
.rm-ri .dp-stats span, .rm-ri .dp-stats div,
.rm-ri .rmvc-foot p, .rm-ri .rmvc-panel p,
.rm-ri .rmbn-txt p, .rm-ri .rmbn-step em { color: #fff !important; }
.rm-ri .dp-stats span { font-size: 12px !important; }
.rm-ri .dp-hub--refinery b { color: #f16b37 !important; }
.rm-ri .rmbn-bars i { background-image: none !important; background-color: #f16b37 !important; }

/* ---------- Case-kaarten: hover-highlight (kopje + tekst om de beurt oranje) --
   De !important-kleuren hierboven blokkeerden de animatie uit ri-logos.css, en
   de gedempte stand was blauw (#97a5ce / #b8caff), wat de guide niet meer toestaat.
   Nu: gedempt = wit 60%, actief = #f16b37, 3s per blok, soepel in en uit. */
@keyframes rm-hl-sg {
  0%   { color: rgba(255, 255, 255, 0.6); }
  3%, 30% { color: #f16b37; }
  36%, 100% { color: rgba(255, 255, 255, 0.6); }
}
.rm-ri .group:hover>div.absolute.inset-0>div.flex-col.gap-\[15px\]>div>p:first-child,
.rm-ri .group:hover>div.absolute.inset-0>div.flex-col.gap-\[15px\]>div:nth-child(n)>p:last-child {
  color: rgba(255, 255, 255, 0.6);
  animation-name: rm-hl-sg;
  animation-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .rm-ri .group:hover>div.absolute.inset-0>div.flex-col.gap-\[15px\]>div>p:first-child,
  .rm-ri .group:hover>div.absolute.inset-0>div.flex-col.gap-\[15px\]>div:nth-child(n)>p:last-child { animation: none; color: #fff; }
}

/* ---------- Hero: "Search Lab" als Playfair-accent ------------------------- */
.rm-ri .rm-pf {
  font-family: var(--font-playfair) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #f16b37 !important;
}

/* ---------- Manifest: zelfde kolom als de rest van de pagina ----------------
   Binnenruimte 32px (24px mobiel) net als .max-w-site px-8; inhoud dus 1116px. */
.rm-ri .rmvc .rmvc-wrap { max-width: 1180px; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
@media (max-width: 767px) { .rm-ri .rmvc .rmvc-wrap { padding-left: 24px; padding-right: 24px; } }

/* ---------- Inzichten: grafiekvlak met halftransparante achtergrond, zodat de particles minder opvallen ---------- */
.rm-ri .rm-ins [class*="h-[200px]"][class*="w-[380px]"][class*="bg-transparent"] {
  background-color: rgba(0, 12, 50, 0.72) !important;
}

/* ---------- Methode: stappen lopen mee met scroll, paneel blijft in beeld (sticky) ----------
   main had overflow-x:hidden (= scroll container, sticky werkte daardoor niet); clip doet hetzelfde zonder. */
main.overflow-x-hidden { overflow-x: clip !important; }
@media (min-width: 768px) {
  .rm-ri .rm-meth > div:nth-child(2) { position: sticky; top: 150px; }
}
@media (min-width: 768px) {
  /* elke fase krijgt scrollruimte, zodat de stappen rustig doorlopen */
  .rm-ri .rm-meth { min-height: 2200px; }
  .rm-ri .rm-meth > div:first-child { position: sticky; top: 150px; align-self: flex-start; gap: 8px; margin-bottom: -250px; }
}
@media (min-width: 768px) {
  /* Rico blijft net als de kaart op zijn plek staan (sticky i.p.v. onderaan de lange lijst) */
  .rm-ri .rm-meth > .rm-meth-human {
    position: sticky;
    right: auto;
    bottom: auto;
    top: min(606px, calc(100vh - 150px));
    align-self: flex-start;
    flex: none;
    margin: 475px 0 -295px -616px;
    width: 536px;
  }
}
@media (min-width: 768px) {
  .rm-ri .rm-meth { padding-bottom: 295px; }
  /* vaste kaarthoogte: de fases wisselen zonder dat Rico of de kaart verspringt */
  .rm-ri .rm-meth > div:nth-child(2) > div { min-height: 440px; }
}

/* bento-illustratie: microtekst niet in #97a5ce (guide: wit) */
.rm-ri .rmbn-front-f span,
.rm-ri .rmbn-bars em { color: rgba(255, 255, 255, 0.72) !important; }

/* Inzichten-vinkjes: alleen groene outline, geen oranje vulling (wint van de !important-regel voor bg-[#ff7a00] hierboven) */
.rm-ri .size-\[22px\].bg-\[\#ff7a00\]{background-color:transparent !important;background-image:none !important;border-color:#6acc50 !important}

/* ======== Mobiel-pass 2026-10-29 (alles binnen media queries; desktop ongewijzigd) ======== */

/* 1. "De versnelling"-kaart: foto + blauwe waas zoals op desktop (foto zichtbaar, geen harde naad onderaan) */
@media (max-width:767px){
  .rm-ri .ri-sjors{background-image:url(/pages_static/research-innovation/sjors-bg-wide.webp);background-size:auto 60%;background-position:68% 0;background-repeat:no-repeat;bottom:0;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 28%,transparent 58%);mask-image:linear-gradient(180deg,#000 0,#000 28%,transparent 58%)}
  .rm-ri .ri-sjors::after{background:linear-gradient(248deg,rgba(8,40,139,.7) 35%,#08288b 96%)}
}

/* 2. Datawarehouse: label "Fase 0X . ..." botst niet meer met de tekstwolk erboven/eronder (ruimte boven elke rij) */
@media (max-width:767px){
  .rm-ri .dp-row--sources,.rm-ri .dp-row--hub,.rm-ri .dp-row--process,.rm-ri .dp-row--outputs{padding-top:38px}
  .rm-ri .dp-row--sources::after,.rm-ri .dp-row--hub::after,.rm-ri .dp-row--process::after,.rm-ri .dp-row--outputs::after{top:4px}
}

/* 4. Branchecheck-blok: onder 1000px onder elkaar (kop + tekst, dan kaart) i.p.v. twee kolommen waarvan de tweede buiten beeld viel */
@media (max-width:1000px){
  .rm-ri .vpl{flex-direction:column;align-items:stretch;gap:28px}
  .rm-ri .vpl-in{order:1}
  .rm-ri .vpl-laag{order:2;width:100%}
  .rm-ri .vpl-kaart{display:flex;flex-direction:column;align-items:stretch;gap:14px;max-width:none;margin-top:0}
  .rm-ri .vpl-kaart .vpl-cta{grid-column:auto;grid-row:auto;justify-self:stretch;width:100%}
  .rm-ri .vpl .vpl-cta a.vpl-knop{width:100%;box-sizing:border-box;justify-content:space-between}
}

/* 5. "Meer info" + categorie-pill: tekst niet laten afbreken, rij mag naar twee regels */
@media (max-width:767px){
  .rm-ri .inline-flex.h-\[35px\].rounded-\[30px\]{flex-shrink:0;white-space:nowrap}
  .rm-ri .inline-flex.h-\[35px\].rounded-\[30px\] > span{white-space:nowrap}
  .rm-ri .flex.items-center.justify-between.gap-3:has(> .inline-flex.h-\[35px\].rounded-\[30px\]){flex-wrap:wrap;row-gap:8px}
}

/* 6. Inzichten-kaarten: groot cijfer in eigen strook bovenin, niet over de kop heen */
@media (max-width:767px){
  .rm-ri .rm-ins{padding-top:60px}
}

/* ======== Mobiel-pass 2 2026-10-29 ======== */

/* 7. Avatars altijd rond: nooit laten krimpen in een flex-rij, vaste 1:1 */
@media (max-width:767px){
  .rm-ri .rm-ca-av,.rm-ri .rdw-av,.rm-ri img.rounded-full,.rm-ri .vpl-wie img{flex-shrink:0;aspect-ratio:1/1}
  .rm-ri .rm-ca-exp{white-space:nowrap;height:auto;min-height:26px}
}

/* 8. Ranky-tools: op touch geen hover, dus de video toont zodra de kaart voor 60% in beeld is
   (class .rm-tool-live wordt gezet door het script #rm-ri-tools-autoplay in page-next-ri-hosted-v2.php) */
@media (max-width:767px),(hover:none){
  .rm-ri #tools .group.rm-tool-live .rm-tool-video{opacity:1}
  .rm-ri #tools .group.rm-tool-live .rm-tool-ranky{opacity:0;transform:scale(.96)}
}

/* 9. Datawarehouse fase 02 (Verbinden): dezelfde warme gloed als op desktop, met zachte randen (geen vlak) */
@media (max-width:767px){
  .rm-ri .dp-row--hub:not(.dp-row--hub + .dp-row--hub)::before{
    left:-24px;right:-24px;width:auto;height:auto;top:-17px;bottom:-232px;
    background:
      linear-gradient(color-mix(in srgb,var(--dpl) 32%,transparent),color-mix(in srgb,var(--dpl) 32%,transparent)) top left/100% 2px no-repeat,
      radial-gradient(ellipse 50% 100% at 50% 0,color-mix(in srgb,var(--dpl) 30%,transparent) 0%,color-mix(in srgb,var(--dpl) 10%,transparent) 55%,transparent 100%)}
}

/* ======== Mobiel-pass 3 2026-10-29 ======== */

/* 10. Hero: tekstblok in de normale stroom op mobiel, zodat het niet boven de container uitsteekt (en onder de sticky header valt) */
@media (max-width:767px){
  .rm-ri div[class*="min-h-[703px]"]{min-height:0}
  .rm-ri div[class*="min-h-[703px]"] > .z-10.absolute.flex-col{position:relative;top:auto;left:auto;right:auto;transform:none;width:auto;margin:0 24px;padding:44px 0 48px}
}

/* 11. Datawarehouse fase 01: icoon-knoppen boven de bronkaarten, één kaart tegelijk (script #rm-ri-dw-tabs).
   Op breed scherm blijft de knoppenrij verborgen en alle kaarten zichtbaar. */
.rm-ri .rm-dw-tabs{display:none}
@media (max-width:767px){
  .rm-ri .rm-dw-tabs{display:flex;justify-content:center;gap:12px;margin:2px 0 -6px}
  .rm-ri .dp-row--sources > .dp-card.rm-dw-off{display:none}
  .rm-ri .rm-dw-tab{width:56px;height:56px;padding:0;border-radius:14px;border:1px solid rgba(57,81,153,.55);background:rgba(10,19,54,.6);color:#97a5ce;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
  .rm-ri .rm-dw-tab svg{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.8}
  .rm-ri .rm-dw-tab[aria-selected="true"]{background:#08288b;border-color:#5b7bd9;color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,40,139,.5)}
  .rm-ri .rm-dw-tab:focus-visible{outline:2px solid #f16b37;outline-offset:3px}
  .rm-ri .dp-row--sources > .dp-card:not(.rm-dw-off){animation:rm-dw-in .35s ease both}
}
@keyframes rm-dw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rm-ri .dp-row--sources > .dp-card:not(.rm-dw-off){animation:none}.rm-ri .rm-dw-tab{transition:none}}

/* 12. Poppetjes in het Datawarehouse: zachte micro-animatie (zweven + ring), Ranky wiebelt af en toe; uit bij "verminder beweging" */
@media (prefers-reduced-motion:no-preference){
  .rm-ri .dpx-say .rdw-av{animation:rdw-float 6s ease-in-out infinite,rdw-ring 6s ease-in-out infinite;will-change:transform}
  .rm-ri .dpx-say .rdw-av--sjors{animation-delay:-.8s,-.8s}
  .rm-ri .dpx-say .rdw-av--rico{animation-delay:-2.6s,-2.6s}
  .rm-ri .dpx-say .rdw-av--ranky{animation:rdw-float 5.2s ease-in-out infinite -1.7s,rdw-ring 5.2s ease-in-out infinite -1.7s,rdw-wiggle 8s ease-in-out infinite -3s}
}
@keyframes rdw-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(-1.6deg)}}
@keyframes rdw-ring{0%,100%{box-shadow:0 0 0 0 rgba(241,107,55,0)}50%{box-shadow:0 0 0 5px rgba(241,107,55,.16)}}
@keyframes rdw-wiggle{0%,86%,100%{rotate:0deg}90%{rotate:-7deg}94%{rotate:6deg}97%{rotate:-3deg}}

/* 13. Ranky Backlinks (de lange figuur) paste niet in het mediavak van 170px en werd boven/onder afgesneden: iets lager */
@media (max-width:767px){
  .rm-ri #tools .rm-tool-ranky[src*="ranky-backlink"]{height:156px;margin-top:0}
}

/* ======== Mobiel-pass 4 2026-10-29: tool-kaarten als swipe-carrousel (zoals /the-standard/) ======== */
.rm-ri .rm-swipe-hint{display:none}
@media (max-width:767px){
  .rm-ri .rm-swipe-hint{display:block;margin:0 0 16px}
  .rm-ri .rm-swipe-hint p{display:flex;align-items:center;gap:8px;margin:0;padding-bottom:12px;font-family:'Ubuntu Sans','Ubuntu',sans-serif;font-size:13px;font-weight:500;color:#ff8555}
  .rm-ri .rm-swipe-hint svg{width:16px;height:16px;flex:none}
  .rm-ri .rm-swipe-hint .bar{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
  .rm-ri .rm-swipe-hint .bar i{display:block;height:100%;width:30%;border-radius:3px;background:#f16b37;transition:width .15s linear}
  .rm-ri .rm-swipe.flex-col{flex-direction:row}
  .rm-ri .rm-swipe{align-items:flex-start !important;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;width:calc(100% + 48px) !important;max-width:none;padding:0 24px 4px;scroll-padding:0 24px;box-sizing:border-box;transition:height .3s ease}
  .rm-ri .rm-swipe::-webkit-scrollbar{display:none}
  /* drie blokken, zelfde rand en afronding; het blok in beeld heeft de lichtere rand */
  .rm-ri .rm-swipe>*:nth-child(1),.rm-ri .rm-swipe>*:nth-child(3)>div:first-child,.rm-ri .rm-swipe .mpc-panel{border:1px solid rgba(57,81,153,.4) !important;border-radius:16px !important;transition:border-color .3s ease}
  .rm-ri .rm-swipe>.is-zicht:nth-child(1),.rm-ri .rm-swipe>.is-zicht:nth-child(3)>div:first-child,.rm-ri .rm-swipe>.is-zicht .mpc-panel{border-color:rgba(111,173,242,.6) !important}
  .rm-ri .rm-swipe>*{flex:0 0 min(calc(100vw - 64px),340px);width:min(calc(100vw - 64px),340px);min-width:0;scroll-snap-align:start}
}

/* ======== Mobiel-pass 5 2026-10-29 ======== */

/* 14. De drie kleine blokjes ("5+ years / 12 frameworks / Dagelijks"): zachte lichtveeg + subtiele gloed, om het statische te breken.
   Per blokje een ander moment (gespreid); uit bij "verminder beweging". */
@media (prefers-reduced-motion:no-preference){
  .rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col{position:relative;overflow:hidden;animation:rm-pill-glow 6s ease-in-out infinite}
  .rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;animation:rm-pill-sheen 6s ease-in-out infinite}
  .rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col:nth-child(2),.rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col:nth-child(2)::after{animation-delay:-2s}
  .rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col:nth-child(3),.rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col:nth-child(3)::after{animation-delay:-4s}
}
@keyframes rm-pill-sheen{0%,55%{background-position:130% 0}85%,100%{background-position:-30% 0}}
@keyframes rm-pill-glow{0%,100%{box-shadow:0 0 0 0 rgba(241,107,55,0)}45%{box-shadow:0 0 26px -8px rgba(241,107,55,.32)}}

/* 15. Datawarehouse mobiel: de verticale lijn begint op de eerste horizontale lijn (aansluiting) i.p.v. erboven uit te steken (rij-lijn = 17px boven de rij, pipeline-padding 48px) */
@media (max-width:767px){
  .rm-ri .dp-pipeline::before{top:31px}
}

/* 15b. Datawarehouse mobiel: de verticale lijn stopt onderaan de laatste kaart (niet door in de 55px pipeline-padding) */
@media (max-width:767px){
  .rm-ri .dp-pipeline::before{bottom:55px}
}

/* 16. Datawarehouse mobiel: elk fasevlak krijgt vanaf zijn horizontale lijn een zachte gloed in de kleur van de fase (zoals desktop); zachte randen, geen vlak.
   Fase 02 (hub) loopt door tot en met de Refinery-rij. */
@media (max-width:767px){
  .rm-ri .dp-row:not(.dp-row--hub + .dp-row--hub)::before{
    left:-24px;right:-24px;width:auto;height:auto;top:-17px;bottom:-17px;
    background:
      linear-gradient(color-mix(in srgb,var(--dpl) 32%,transparent),color-mix(in srgb,var(--dpl) 32%,transparent)) top left/100% 2px no-repeat,
      radial-gradient(ellipse 50% 520px at 50% 0,color-mix(in srgb,var(--dpl) 30%,transparent) 0%,color-mix(in srgb,var(--dpl) 10%,transparent) 55%,transparent 100%)}
  .rm-ri .dp-row--hub:not(.dp-row--hub + .dp-row--hub)::before{bottom:-232px}
}

/* 17. Fase-01-knoppen: even breed als het blok eronder (4 gelijke kolommen, zelfde zijkanten) */
@media (max-width:767px){
  .rm-ri .rm-dw-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;justify-content:stretch;width:100%}
  .rm-ri .rm-dw-tab{width:100%}
}

/* ======== Mobiel-pass 6 2026-10-29 ======== */

/* 18. Blokjes ("5+ years" e.d.): lichtveeg van BOVEN naar BENEDEN (was zijwaarts) */
@media (prefers-reduced-motion:no-preference){
  .rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col::after{
    background:linear-gradient(180deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);
    background-size:100% 260%;background-position:0 130%;animation-name:rm-pill-sheen-v}
}
@keyframes rm-pill-sheen-v{0%,55%{background-position:0 130%}85%,100%{background-position:0 -30%}}

/* 19. Datawarehouse mobiel: dezelfde fasegradient als op het grote scherm: dunne lijn bovenaan + kleur die van boven naar beneden uitdooft,
   over de volle breedte met zachte zijkanten (geen cirkel). Gradient begrensd op 480px, zoals de panelen op desktop (~370-600px). */
@media (max-width:767px){
  .rm-ri .dp-row:not(.dp-row--hub + .dp-row--hub)::before{
    left:-24px;right:-24px;width:auto;height:auto;top:-17px;bottom:-17px;
    background:
      linear-gradient(color-mix(in srgb,var(--dpl) 32%,transparent),color-mix(in srgb,var(--dpl) 32%,transparent)) top left/100% 1px no-repeat,
      linear-gradient(color-mix(in srgb,var(--dpl) 18%,transparent) 0%,transparent 100%) top left/100% 480px no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
  .rm-ri .dp-row--hub:not(.dp-row--hub + .dp-row--hub)::before{bottom:-232px}
}

/* 20. Fase-01-tabs volgens de styleguide ("Tabs"): bak in --rm-card-2 met --radius-md en 4px padding, gelijke knoppen met --radius-sm,
   actieve knop met de CTA-gradient; inactief wit/72, wit bij hover. Iconen i.p.v. tekst, dus 48px hoog voor een goede tikdoel. */
@media (max-width:767px){
  .rm-ri .rm-dw-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;box-sizing:border-box;width:100%;background:#0a1336;border:1px solid rgba(57,81,153,.4);border-radius:12px;margin:2px 0 -6px}
  .rm-ri .rm-dw-tab{width:100%;height:48px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.72);transform:none;box-shadow:none}
  .rm-ri .rm-dw-tab[aria-selected="true"]{background:linear-gradient(79deg,#ff8555 0%,#d04813 100%);color:#fff;transform:none;box-shadow:0 8px 22px -10px rgba(208,72,19,.6)}
}
@media (max-width:767px) and (hover:hover){.rm-ri .rm-dw-tab:not([aria-selected="true"]):hover{color:#fff}}

/* 21. Onze methode (mobiel): stap bobt en licht op zodra hij in beeld komt (script #rm-ri-method-glow zet .rm-me-live) */
.rm-ri .hidden.flex-col.gap-10 .grid.size-11.place-items-center.rounded-3xl{transition:box-shadow .6s ease}
.rm-ri .hidden.flex-col.gap-10 > div > div[class*="rounded-lg"]{transition:border-color .6s ease,box-shadow .6s ease}
.rm-ri .rm-me-live .grid.size-11.place-items-center.rounded-3xl{box-shadow:0 0 0 6px rgba(241,107,55,.16),0 0 30px rgba(241,107,55,.55)}
.rm-ri .rm-me-live > div[class*="rounded-lg"]{border-color:rgba(241,107,55,.5);box-shadow:0 0 34px -14px rgba(241,107,55,.4)}
@media (prefers-reduced-motion:no-preference){
  .rm-ri .rm-me-live .grid.size-11.place-items-center.rounded-3xl{animation:rm-me-bob .9s cubic-bezier(.34,1.56,.64,1) both}
}
@keyframes rm-me-bob{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-9px) scale(1.1)}65%{transform:translateY(2px) scale(.97)}100%{transform:translateY(0) scale(1)}}

/* ======== Eyebrows uitlijnen 2026-10-29 ======== */
/* 22. Eyebrow: de tekst begint op dezelfde lijn als de kop eronder; het merkteken hangt links/boven in de marge en haakt aan de eerste letter
   (de export zette het 25x45px merkteken als flex-item voor de tekst, waardoor de tekst 19px te ver naar rechts stond).
   Hoogte (45px) blijft gelijk, dus de ritmiek met de kop eronder verandert niet. */
.rm-ri .eyebrow{position:relative;min-height:45px;gap:0}
.rm-ri .eyebrow::before{position:absolute;left:-15px;top:0;margin:0}
/* de losse varianten: zelfde regel */
.rm-ri .vpl-eb{padding-left:0}
.rm-ri .vpl-eb::before{left:-15px}
.rm-ri .rmvc-eyebrow{margin-left:0}

/* 23. Eyebrow-merkteken kleiner: in het voorbeeld is het 8x8px bij 10px kapitaalhoogte (verhouding .8); het stond op 15,5px (SVG op 25px breed).
   De SVG (viewBox 32) tekent het teken van 6..25,5 / 6..26, dus op 13px box (schaal .41) is het teken ~8px en staat het 2,5px in de box.
   Plaats: rechtsonder net links-boven de eerste letter (2px ertussen), zoals in het voorbeeld. */
.rm-ri .eyebrow::before{left:-11px;top:16.8px;width:13px;height:13px;background-size:13px 13px;background-position:0 0}

/* 24. Fase-01-tabs: actieve knop is een subtiele indicatie (lichte oranje tint + dun randje + gekleurd icoon), geen volle vulling of schaduw. */
@media (max-width:767px){
  .rm-ri .rm-dw-tab[aria-selected="true"]{background:rgba(241,107,55,.13);color:#ff8555;box-shadow:inset 0 0 0 1px rgba(241,107,55,.5);transform:none}
  .rm-ri .rm-dw-tab:not([aria-selected="true"]){color:rgba(255,255,255,.6)}
}

/* ======== Mobiel-pass 7 2026-10-29 ======== */

/* 25. Fase-01-knoppen kleiner (waren te groot): 40px hoog, icoon 20px */
@media (max-width:767px){
  .rm-ri .rm-dw-tab{height:40px}
  .rm-ri .rm-dw-tab svg{width:20px;height:20px}
}

/* 26. Fase 03: kaarten inklappen tot hun kop (icoon + titel), de kaart in het leesgebied opent (script #rm-ri-dw-accordion).
   Kop = icoon links, label + titel rechts; de rest staat eronder over de volle breedte. */
@media (max-width:767px){
  .rm-ri .dp-row--process > .dp-card{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;overflow:hidden;padding-right:44px}
  .rm-ri .dp-row--process > .dp-card > .dp-icon{grid-column:1;grid-row:1 / span 2;margin:0}
  .rm-ri .dp-row--process > .dp-card > .dp-eyebrow{grid-column:2;grid-row:1;margin:0;align-self:end}
  .rm-ri .dp-row--process > .dp-card > h3{grid-column:2;grid-row:2;margin:0;align-self:start}
  .rm-ri .dp-row--process > .dp-card:not(:has(> .dp-eyebrow)) > h3{grid-row:1 / span 2;align-self:center}
  .rm-ri .dp-row--process > .dp-card > :not(.dp-icon):not(.dp-eyebrow):not(h3){grid-column:1 / -1}
  .rm-ri .dp-row--process > .dp-card > p{margin-top:14px}
  .rm-ri .dp-row--process > .dp-card.rm-ac::after{content:"";position:absolute;right:20px;top:26px;width:9px;height:9px;border-right:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);transform:rotate(45deg);transition:transform .35s ease,top .35s ease}
  .rm-ri .dp-row--process > .dp-card.rm-ac.rm-ac-open::after{transform:rotate(-135deg);top:31px}
  .rm-ri .dp-row--process > .dp-card.rm-ac > :not(.dp-icon):not(.dp-eyebrow):not(h3){opacity:0;transition:opacity .2s ease}
  .rm-ri .dp-row--process > .dp-card.rm-ac.rm-ac-open > :not(.dp-icon):not(.dp-eyebrow):not(h3){opacity:1;transition:opacity .35s ease .15s}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .rm-ri .dp-row--process > .dp-card.rm-ac::after,.rm-ri .dp-row--process > .dp-card.rm-ac > *{transition:none}
}

/* ======== Mobiel-pass 8 2026-10-29 ======== */

/* 27. Accordion ook voor fase 04 (outputs); zelfde kaartopbouw als fase 03 */
@media (max-width:767px){
  .rm-ri .dp-row--outputs > .dp-card{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;overflow:hidden}
  .rm-ri .dp-row--outputs > .dp-card > .dp-icon{grid-column:1;grid-row:1 / span 2;margin:0}
  .rm-ri .dp-row--outputs > .dp-card > h3{grid-column:2;grid-row:1 / span 2;margin:0;align-self:center}
  .rm-ri .dp-row--outputs > .dp-card > :not(.dp-icon):not(h3){grid-column:1 / -1}
  .rm-ri .dp-row--outputs > .dp-card > p{margin-top:14px}
  .rm-ri .dp-row--outputs > .dp-card.rm-ac > :not(.dp-icon):not(h3){opacity:0;transition:opacity .2s ease}
  .rm-ri .dp-row--outputs > .dp-card.rm-ac.rm-ac-open > :not(.dp-icon):not(h3){opacity:1;transition:opacity .35s ease .15s}
}

/* 28. Geen pijltje/dropdown: weg. De open kaart herken je aan een fellere rand in de kleur van de fase (blauw fase 03, groen fase 04). */
@media (max-width:767px){
  .rm-ri .dp-row--process > .dp-card.rm-ac::after,.rm-ri .dp-row--outputs > .dp-card.rm-ac::after{content:none}
  .rm-ri .dp-row--process > .dp-card{padding-right:18px}
  .rm-ri .dp-row--process > .dp-card.rm-ac,.rm-ri .dp-row--outputs > .dp-card.rm-ac{transition:border-color .45s ease,box-shadow .45s ease}
  .rm-ri .dp-row--process > .dp-card.rm-ac.rm-ac-open,.rm-ri .dp-row--outputs > .dp-card.rm-ac.rm-ac-open{
    border-color:color-mix(in srgb,var(--dpl) 85%,transparent);
    box-shadow:0 0 26px -14px var(--dpl)}
}

/* 29. De open fasekaart: fellere rand in de fasekleur. Moet !important zijn: de styleguide-laag zet de rand van alle .dp-card's met !important. */
@media (max-width:767px){
  .rm-ri .dp-row--process > .dp-card.rm-ac.rm-ac-open,.rm-ri .dp-row--outputs > .dp-card.rm-ac.rm-ac-open{
    border-color:color-mix(in srgb,var(--dpl) 85%,transparent) !important;border-top-color:color-mix(in srgb,var(--dpl) 85%,transparent) !important}
}

/* 30. Accordion smoother: de glow was een box-shadow die elk frame opnieuw getekend werd; nu een inset-glow via ::after met alleen opacity-transitie.
   Tekst schuift mee in (transform + opacity, gelijke curve als de hoogte). */
@media (max-width:767px){
  .rm-ri .dp-row--process > .dp-card.rm-ac,.rm-ri .dp-row--outputs > .dp-card.rm-ac{transition:border-color .5s ease;box-shadow:none !important}
  .rm-ri .dp-row--process > .dp-card.rm-ac::after,.rm-ri .dp-row--outputs > .dp-card.rm-ac::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 0 28px -12px var(--dpl);opacity:0;transition:opacity .5s ease;top:0;right:0;width:auto;height:auto;border:0;transform:none}
  .rm-ri .dp-row--process > .dp-card.rm-ac.rm-ac-open::after,.rm-ri .dp-row--outputs > .dp-card.rm-ac.rm-ac-open::after{opacity:.9;transform:none;top:0}
  .rm-ri .dp-row--process > .dp-card.rm-ac > :not(.dp-icon):not(.dp-eyebrow):not(h3),
  .rm-ri .dp-row--outputs > .dp-card.rm-ac > :not(.dp-icon):not(h3){transform:translateY(8px);transition:opacity .25s ease,transform .3s cubic-bezier(.32,.72,0,1)}
  .rm-ri .dp-row--process > .dp-card.rm-ac.rm-ac-open > :not(.dp-icon):not(.dp-eyebrow):not(h3),
  .rm-ri .dp-row--outputs > .dp-card.rm-ac.rm-ac-open > :not(.dp-icon):not(h3){transform:none;transition:opacity .45s ease .12s,transform .55s cubic-bezier(.32,.72,0,1) .08s}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .rm-ri .dp-row--process > .dp-card.rm-ac > *,.rm-ri .dp-row--outputs > .dp-card.rm-ac > *,
  .rm-ri .dp-row--process > .dp-card.rm-ac::after,.rm-ri .dp-row--outputs > .dp-card.rm-ac::after{transition:none;transform:none}
}

/* 31. Fasegloed met vaste hoogte: de gradient loopt na 480px toch uit, maar het vlak hing aan de onderkant van de rij en moest tijdens het open- en dichtklappen
   elk frame opnieuw (met masker) getekend worden. Vaste hoogte + eigen laag = geen herteken per frame. */
@media (max-width:767px){
  .rm-ri .dp-row:not(.dp-row--hub + .dp-row--hub)::before{bottom:auto;height:520px;will-change:transform}
}

/* ======== Mobiel-pass 9 2026-10-29 ======== */

/* 32. Loop FASE 01 -> FASE 05 op mobiel: het stilstaande pijltje maakt plaats voor een pijl die rondloopt (script #rm-ri-loop-arrow).
   Alleen verborgen zodra de lopende pijl er is; bij "verminder beweging" blijft het origineel staan. Lichte gloed zoals de desktop-pijl. */
.rm-ri svg.rm-loop-live > path[d^="M56 44"]{display:none}
.rm-ri svg.rm-loop-live .rm-loop-run{filter:drop-shadow(0 0 3px rgba(241,107,55,.8))}

/* ======== Mobiel-pass 10 2026-10-29: Onze methode als swipe-carrousel met nummerknoppen ======== */
.rm-ri .rm-ms-tabs{display:none}
@media (max-width:767px){
  .rm-ri .rm-ms-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;box-sizing:border-box;width:100%;background:#0a1336;border:1px solid rgba(57,81,153,.4);border-radius:12px}
  .rm-ri .rm-ms-tab{height:40px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.6);font-family:'Gilroy','Ubuntu',sans-serif;font-weight:800;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease}
  .rm-ri .rm-ms-tab[aria-selected="true"]{background:rgba(241,107,55,.13);color:#ff8555;box-shadow:inset 0 0 0 1px rgba(241,107,55,.5)}
  .rm-ri .rm-ms-tab:focus-visible{outline:2px solid #f16b37;outline-offset:2px}

  .rm-ri .rm-ms.flex-col{flex-direction:row}
  .rm-ri .rm-ms{align-items:flex-start !important;gap:16px !important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;width:calc(100% + 48px) !important;max-width:none;padding:0 24px 4px;scroll-padding:0 24px;box-sizing:border-box;transition:height .3s ease}
  .rm-ri .rm-ms::-webkit-scrollbar{display:none}
  .rm-ri .rm-ms>*{flex:0 0 min(calc(100vw - 64px),340px);width:min(calc(100vw - 64px),340px);min-width:0;scroll-snap-align:start}
  /* in de carrousel is de nummercirkel van de stap altijd "aan": de actieve stap licht op, de rest is gedempt */
  .rm-ri .rm-ms>*{opacity:.55;transition:opacity .35s ease}
  .rm-ri .rm-ms>.is-zicht{opacity:1}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.rm-ri .rm-ms,.rm-ri .rm-ms>*,.rm-ri .rm-ms-tab{transition:none}}

/* glow/bob van het nummercirkeltje mag niet afgesneden worden door de carrousel */
@media (max-width:767px){.rm-ri .rm-ms{padding-top:14px;margin-top:-6px}}

/* 33. Scroll-anchoring uit op mobiel: iOS Safari heeft het niet, Chrome wel; de accordeon corrigeert zelf de scrollpositie, anders telt het dubbel in Chrome. */
@media (max-width:767px){html{overflow-anchor:none}}

/* ======== Mobiel-pass 11 2026-10-30 ======== */
@media (max-width:767px){
  /* 34. Cijfers in de methode-knoppen optisch in het midden (Gilroy-cijfers stonden 2,7px te hoog) */
  .rm-ri .rm-ms-tab{padding:5px 0 0;line-height:1}
  /* 35. Grote cijfers in de Inzichten-kaarten van de rand af (stonden 6px / -2px: tegen de hoek) */
  .rm-ri .rm-ins>.rm-card-num{left:18px;right:auto;top:12px}
  .rm-ri .rm-ins:nth-of-type(even)>.rm-card-num{left:auto;right:18px}
}
/* 36. De toekomst (bento): rand weer oranje; zodra een tegel in beeld is licht hij op zoals bij hover op desktop (script #rm-ri-bento-live) */
@media (max-width:767px){
  .rm-ri .rmbn-t{border-color:rgba(241,107,55,.4) !important;transition:border-color .6s ease,box-shadow .6s ease}
  .rm-ri .rmbn-t .rmbn-nr{transition:color .6s ease,transform .6s cubic-bezier(.32,.72,0,1)}
  .rm-ri .rmbn-t .rmbn-p img{transition:filter .7s ease}
  .rm-ri .rmbn-t .rmbn-p{transition:box-shadow .7s ease}
  .rm-ri .rmbn-t.rm-bn-live{border-color:rgba(255,133,85,.85) !important;box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 30px -12px rgba(241,107,55,.6)}
  .rm-ri .rmbn-t.rm-bn-live .rmbn-nr{color:rgba(241,107,55,.34);transform:scale(1.06)}
  .rm-ri .rmbn-t.rmbn-tall.rm-bn-live .rmbn-nr{color:rgba(255,160,120,.28)}
  .rm-ri .rmbn-t.rm-bn-live .rmbn-robot{opacity:1}
  .rm-ri .rmbn-t.rm-bn-live .rmbn-p img{filter:none}
  .rm-ri .rmbn-t.rm-bn-live .rmbn-p{box-shadow:0 0 0 2px #0a1336,0 0 0 4px rgba(241,107,55,.75),0 0 22px rgba(241,107,55,.5)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.rm-ri .rmbn-t,.rm-ri .rmbn-t .rmbn-nr,.rm-ri .rmbn-t .rmbn-p,.rm-ri .rmbn-t .rmbn-p img{transition:none}}

/* 34b. Correctie: 2,4px i.p.v. 5px (gemeten op element-screenshot: dan 0,0px verschil) */
@media (max-width:767px){.rm-ri .rm-ms-tab{padding:2.4px 0 0}}

/* 34c. fijnafstelling (3,3px: gemeten tussen 2,4px = -0,7 en 5px = +1,3) */
@media (max-width:767px){.rm-ri .rm-ms-tab{padding:3.3px 0 0}}

/* ======== Pass 12 2026-10-30 ======== */
/* 37. Mobiele grafiek: "AI MOMENT" was 15 eenheden in een SVG van 680 breed (6,6px op het scherm) en viel weg: nu 28 eenheden (~12px), iets ruimer gezet en met zachte gloed. */
@media (max-width:767px){
  .rm-ri svg[viewBox="0 0 680 820"] text[fill="#ff8555"][text-anchor="end"]{font-size:28px;letter-spacing:2.4px;font-weight:800;fill:#ff9a6e;paint-order:stroke;stroke:rgba(10,19,54,.9);stroke-width:5px;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,133,85,.55))}
}
/* 38. Eyebrow "Vrijblijvende branchecheck": zelfde merkteken en plaatsing als alle andere eyebrows (13px-box van eyebrow-icon.svg, ~8px zichtbaar, 1px links/boven van de eerste letter) */
.rm-ri .vpl-eb::before{background:url(/pages_static/research-innovation/eyebrow-icon.svg) no-repeat 0 0/13px 13px;clip-path:none;width:13px;height:13px;left:-11px;top:-6.2px}

/* ======== Mobiel-pass 13 2026-10-30 ======== */
@media (max-width:767px){
  /* 39. Swipe-carrousels rustiger: een snelle swipe slaat geen kaart over, geen elastische browser-swipe terug, hoogte beweegt pas na het swipen */
  .rm-ri .rm-swipe,.rm-ri .rm-ms{overscroll-behavior-x:contain;transition:height .45s cubic-bezier(.32,.72,0,1)}
  .rm-ri .rm-swipe>*,.rm-ri .rm-ms>*{scroll-snap-stop:always}
  .rm-ri .rm-swipe>*{transition:border-color .45s ease}

  /* 40. Onze methode: kaarten snappen in het midden (links en rechts evenveel van de buren zichtbaar) */
  .rm-ri .rm-ms{padding-left:calc((100vw - min(calc(100vw - 64px),340px)) / 2);padding-right:calc((100vw - min(calc(100vw - 64px),340px)) / 2);scroll-padding:0}
  .rm-ri .rm-ms>*{scroll-snap-align:center;transition:opacity .45s ease}

  /* 41. De toekomst: rand weer rustig; alleen de tegel die langs het midden van het scherm komt licht op */
  .rm-ri .rmbn-t{border-color:rgba(57,81,153,.4) !important}

  /* 42. Andere bureaus vs Ranking Masters: toggle "Geschikt voor | Minder geschikt voor" */
  .rm-ri .rm-vs-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;box-sizing:border-box;width:100%;background:#0a1336;border:1px solid rgba(57,81,153,.4);border-radius:12px;margin:8px 0 14px}
  .rm-ri .rm-vs-tab{height:46px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.65);font-family:'Ubuntu',sans-serif;font-weight:700;font-size:14px;line-height:1.15;padding:0 8px;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
  .rm-ri .rm-vs-tab::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:currentColor;opacity:.55}
  .rm-ri .rm-vs-tab[aria-selected="true"]::before{opacity:1}
  .rm-ri .rm-vs-tab-ja[aria-selected="true"]{background:rgba(106,204,80,.14);color:#8be070;box-shadow:inset 0 0 0 1px rgba(106,204,80,.5)}
  .rm-ri .rm-vs-tab-nee[aria-selected="true"]{background:rgba(255,75,75,.13);color:#ff8585;box-shadow:inset 0 0 0 1px rgba(255,75,75,.5)}
  .rm-ri .rm-vs-tab:focus-visible{outline:2px solid #f16b37;outline-offset:2px}
  .rm-ri .rm-vs-group.rm-vs-off{display:none !important}
  .rm-ri .rm-vs-group > :first-child:not(.rm-vs-tabs){display:none}   /* het label staat nu op de knop */
  .rm-ri .rm-vs-group > .mt-\[20px\]{margin-top:0}
  .rm-ri .rm-vs-group:not(.rm-vs-off){animation:rm-dw-in .4s ease both}
}
.rm-ri .rm-vs-tabs{display:none}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.rm-ri .rm-vs-group:not(.rm-vs-off){animation:none}.rm-ri .rm-vs-tab,.rm-ri .rm-swipe,.rm-ri .rm-ms,.rm-ri .rm-ms>*{transition:none}}

/* 42b. Volgorde-fix: de basisregel (verborgen) stond na de mobiele regel en won. */
@media (max-width:767px){.rm-ri .rm-vs-tabs{display:grid}}

/* ======== Pass 14 2026-10-30 ======== */
@media (max-width:767px){
  /* 43. "AI MOMENT" terug naar de huisstijl: zelfde stijl als het originele label (Ubuntu 700, #ff8555, letterafstand), alleen groot genoeg (styleguide-minimum 12px op het scherm = 27 eenheden). Geen rand, geen gloed, geen extra vet. */
  .rm-ri svg[viewBox="0 0 680 820"] text[fill="#ff8555"][text-anchor="end"]{font-size:27px;letter-spacing:2.7px;font-weight:700;fill:#ff8555;stroke:none;paint-order:normal;filter:none}

  /* 44. Tools-carrousel: de hoogte werd geanimeerd van 1219 naar 1987px (kaart 2 is 1983px hoog) en dwong elk frame een layout van de hele pagina eronder af = trillen bij het landen. Die laag staat buiten beeld, dus nu in één keer, en de carrousel is een eigen layout-eiland. */
  .rm-ri .rm-swipe{transition:none;contain:layout}
}

/* 45. Tools-carrousel: de laatste kaart kon zijn snappunt niet bereiken (16-26px te kort); verplichte snap schokt dan. Rechter-padding zo groot dat elke kaart op zijn plek kan komen: scrollbreedte >= (n-1)*(kaart+gap) + schermbreedte. */
@media (max-width:767px){.rm-ri .rm-swipe{padding-right:calc(100vw - min(calc(100vw - 64px),340px) - 24px)}}

/* 43b. AI MOMENT: styleguide-minimum 12px op het scherm (27.5 eenheden = 12.1px) */
@media (max-width:767px){.rm-ri svg[viewBox="0 0 680 820"] text[fill="#ff8555"][text-anchor="end"]{font-size:27.5px}}

/* ======== Pass 15 2026-10-30: iconen in de methode-knoppen ======== */
@media (max-width:767px){
  .rm-ri .rm-ms-tab{display:flex;align-items:center;justify-content:center;gap:6px;padding:0;line-height:1}
  .rm-ri .rm-ms-tab svg{width:17px;height:17px;flex:none;display:block}
  .rm-ri .rm-ms-tab .rm-ms-n{position:relative;top:1.4px}   /* optische correctie: Gilroy-cijfers staan hoog (zie 34) */
}

/* 46. Methode-knoppen: alleen iconen, cijfers weg (aria-label "Stap n: naam" blijft); icoon iets groter nu het de enige inhoud is. */
@media (max-width:767px){
  .rm-ri .rm-ms-tab .rm-ms-n{display:none}
  .rm-ri .rm-ms-tab svg{width:20px;height:20px}
}

/* ======== Pass 16 2026-10-30: Inzichten-kaarten lichten op bij het midden van het scherm ======== */
@media (max-width:767px){
  .rm-ri .rm-ins{transition:border-color .6s ease,box-shadow .6s ease}
  .rm-ri .rm-ins>.rm-card-num{transition:color .6s ease,transform .6s cubic-bezier(.32,.72,0,1)}
  .rm-ri .rm-ins.rm-in-live{border-color:rgba(255,133,85,.8) !important;border-top-color:rgba(255,133,85,.8) !important;box-shadow:0 0 28px -12px rgba(241,107,55,.55)}
  .rm-ri .rm-ins.rm-in-live>.rm-card-num{color:rgba(255,102,0,.34);transform:scale(1.06)}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.rm-ri .rm-ins,.rm-ri .rm-ins>.rm-card-num{transition:none}}

/* 47. Inzichten op scroll = precies de desktop-hover (zoals het was): deeltjes, donkere sluier, zachte oranje rand (.45), oranje cijfer.
   De eerdere felle rand (.8), gloed en cijfer-schaal zijn weg. Rand moet !important: de styleguide pint de rand van .rm-ins. */
@media (max-width:767px){
  .rm-ri .rm-ins.rm-in-live{border-color:rgba(255,133,85,.45) !important;border-top-color:rgba(255,133,85,.45) !important;background:rgba(255,255,255,.06);box-shadow:none}
  .rm-ri .rm-ins.rm-in-live::after{opacity:1}
  .rm-ri .rm-ins.rm-in-live>.rm-card-num{color:rgba(255,102,0,.34);transform:none}
}

/* 48. Toggle "Geschikt voor | Minder geschikt voor": elk label op één regel. Kolommen naar tekstlengte (0.85fr / 1.15fr), bolletje weg (kleur van de actieve knop geeft de stand al aan), geen afbreken. */
@media (max-width:767px){
  .rm-ri .rm-vs-tabs{grid-template-columns:0.85fr 1.15fr}
  .rm-ri .rm-vs-tab{white-space:nowrap;padding:0 6px;font-size:14px;letter-spacing:0}
  .rm-ri .rm-vs-tab::before{content:none}
}

/* 39. /* Eyebrow-hoekje volgens de styleguide (rm-style-guide.vercel.app): merkteken 14px-box (zichtbaar ca. 8,5px), hangt linksboven de eerste letter
   (left -10,8px / top -7,1px t.o.v. de eyebrow, --rm-eyebrow-mark-x/y), niet inline; ook op mobiel. */
html body .rm-ri .eyebrow::before,
html body .rm-ri .vpl-eb::before{width:14px;height:14px;background-size:14px 14px;background-position:0 0;left:-10.86px}
html body .rm-ri .eyebrow::before{top:15.93px}
html body .rm-ri .vpl-eb::before{top:-7.07px}
html body .mpc-root .mpc-eb::before,
html body .rm-ri .rmvc .rmvc-eyebrow::before{width:8.53px;height:8.75px;left:-8.23px}
html body .mpc-root .mpc-eb::before{top:-6.94px}
html body .rm-ri .rmvc .rmvc-eyebrow::before{top:3.56px}

/* ======== Fix 2026-11-02: drie stat-blokjes ("5+ years / 12 frameworks / Dagelijks") ========
   De lichtveeg-regel van Mobiel-pass 5 gaf de blokjes overflow:hidden op ALLE breedtes. Daardoor was hun
   automatische min-breedte 0 en kregen ze op >=768px elk evenveel ruimte (flex-1), ook als "12 frameworks"
   (nowrap, 25.77px) breder is: de tekst werd afgeknipt. De lichtveeg zit al binnen het blokje (inset:0,
   border-radius:inherit), dus overflow is daar niet nodig. Mobiel (kolom, volle breedte) blijft ongewijzigd. */
@media (min-width:768px){
  .rm-ri .mt-1.flex.gap-3 > .flex.flex-1.flex-col{overflow:visible}
}