/* ═══════════════════════════════════════════════════════════
   CaritaHub — Revamp stylesheet
   Implements "CaritaHub Website - Revamp.dc.html" from the
   CaritaHub design system (23b4fe37).

   Every class here is namespaced `rv-` so this file can sit
   alongside the legacy styles.css without collisions.
   The design's container-query units (cqw) become vw here —
   the design shell was a full-width inline-size container.
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN SYSTEM TOKENS ─────────────────────────────────── */
:root {
  --rv-primary:        #3D72E8;
  --rv-primary-dark:   #2D5EC7;
  --rv-primary-light:  #EBF2FF;
  --rv-accent:         #E07820;
  --rv-accent-light:   #FFF3E8;
  --rv-success:        #2DAF7B;
  --rv-success-light:  #E6F9F2;
  --rv-danger:         #E84B3D;
  --rv-danger-light:   #FEF0EF;
  --rv-purple:         #7B5EA7;
  --rv-purple-light:   #F0EBF8;
  --rv-teal:           #1A9FAF;
  --rv-teal-light:     #E5F6F8;
  --rv-text:           #1A2233;
  --rv-muted:          #6B7A99;
  --rv-bg:             #F4F6FB;
  --rv-border:         #DDE3F0;
  --rv-white:          #FFFFFF;
  --rv-navy:           #0C1B50;

  --rv-shadow-sm: 0 2px 14px rgba(61,114,232,.08);
  --rv-shadow-md: 0 6px 24px rgba(61,114,232,.16);
  --rv-shadow-lg: 0 16px 48px rgba(12,27,80,.34);

  --rv-radius-input: 10px;
  --rv-gutter: clamp(18px, 2.4vw, 32px);
  --rv-max: 1240px;
}

/* ── BASE ─────────────────────────────────────────────────── */
.rv *,
.rv *::before,
.rv *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* `.rv *` only reaches descendants — the body itself would keep the UA's
   default 8px margin and inset every full-bleed section by 8px. */
body.rv { margin: 0; padding: 0; box-sizing: border-box; }

body.rv {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--rv-text);
  background: var(--rv-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.rv img { max-width: 100%; display: block; }
/* :where() keeps these element defaults at zero specificity so any
   rv- component class below wins without needing !important. */
:where(.rv) :where(a) { text-decoration: none; color: var(--rv-primary); }
:where(.rv) :where(a):hover { color: var(--rv-primary-dark); }
.rv button,
.rv input,
.rv select,
.rv textarea { font-family: inherit; }
.rv :focus-visible { outline: 3px solid rgba(61,114,232,.45); outline-offset: 2px; }

.rv-shell { width: 100%; position: relative; }
.rv-wrap {
  max-width: var(--rv-max);
  margin: 0 auto;
  padding: 0 var(--rv-gutter);
}
.rv-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rv-skip {
  position: absolute; left: 12px; top: -60px; z-index: 900;
  background: var(--rv-white); color: var(--rv-primary);
  padding: 10px 18px; border-radius: 12px; font-weight: 600;
  box-shadow: var(--rv-shadow-md); transition: top .15s;
}
.rv-skip:focus { top: 12px; }

@keyframes rvMarquee { from { transform: translateX(0); }        to { transform: translateX(-50%); } }
@keyframes rvPopIn   { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rvFade    { from { opacity: 0; }                      to { opacity: 1; } }
@keyframes rvRise    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── DESIGN SYSTEM: BUTTON ───────────────────────────────── */
.rv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 9px 18px;
  font-size: 14px; font-weight: 600; line-height: 1;
  border-radius: 10px; border: 1.5px solid transparent;
  background: var(--rv-primary); color: #fff;
  cursor: pointer;
  transition: background .12s, opacity .12s, transform .06s;
}
.rv-btn:hover { background: var(--rv-primary-dark); color: #fff; }
.rv-btn--lg { gap: 7px; padding: 13px 26px; font-size: 16px; border-radius: 12px; }
.rv-btn--lg .ph-fill { font-size: 18px; }
.rv-btn .ph-fill { font-size: 16px; }
.rv-btn--secondary { background: var(--rv-primary-light); color: var(--rv-primary); }
.rv-btn--secondary:hover { background: #DCE8FF; color: var(--rv-primary); }
.rv-btn--outline { background: #fff; color: var(--rv-primary); border-color: var(--rv-primary); }
.rv-btn--outline:hover { background: var(--rv-primary-light); color: var(--rv-primary); }
.rv-btn--block { display: flex; width: 100%; }
.rv-btn[disabled] { cursor: not-allowed; opacity: .45; }

/* Ghost-on-dark link button (hero / CTA band) */
.rv-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px;
  font-size: 1rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.34);
  transition: background .12s;
}
.rv-btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Inline "read more" style arrow link */
.rv-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--rv-primary);
}
.rv-link .ph-fill { font-size: 14px; }
.rv-link--muted { color: var(--rv-muted); }
.rv-link--muted:hover { color: var(--rv-primary); }

/* ── DESIGN SYSTEM: FORM FIELDS ──────────────────────────── */
.rv-field { display: flex; flex-direction: column; gap: 6px; }
.rv-field > span,
.rv-field > label { font-size: 13px; font-weight: 600; color: var(--rv-text); }
.rv-field-opt { color: var(--rv-muted); font-weight: 400; }
.rv-input-box {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1.5px solid var(--rv-border);
  border-radius: var(--rv-radius-input);
  padding: 0 12px;
  transition: border-color .12s;
}
.rv-input-box:focus-within { border-color: var(--rv-primary); }
.rv-input-box > .ph-fill { font-size: 16px; color: var(--rv-muted); flex-shrink: 0; }
.rv-input-box input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 10px 0; font-size: 14px; color: var(--rv-text);
}
.rv-select,
.rv-textarea {
  border: 1.5px solid var(--rv-border);
  border-radius: var(--rv-radius-input);
  padding: 11px 12px; font-size: 14px; color: var(--rv-text);
  background: #fff; transition: border-color .12s;
}
.rv-select { cursor: pointer; }
.rv-textarea { resize: vertical; min-height: 96px; }
.rv-select:focus,
.rv-textarea:focus { outline: none; border-color: var(--rv-primary); }
.rv-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.rv-form-note { font-size: .75rem; color: var(--rv-muted); text-align: center; }

/* The spam gate: a sum generated in the browser, not a third-party captcha.
   The whole row is a <label>, so clicking anywhere in it focuses the answer. */
.rv-captcha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--rv-bg); border: 1px solid var(--rv-border);
  border-radius: 14px; padding: 14px 16px;
  cursor: text;
}
.rv-captcha-q { font-size: .9375rem; font-weight: 500; color: var(--rv-text); }
/* The two operands read as one unit, so they never break across a line. */
.rv-captcha-q b { font-weight: 700; white-space: nowrap; }
/* Says why the sum is being asked at all, so it does not read as a random
   hurdle. Matches .rv-form-note's size and colour. */
.rv-captcha-hint {
  display: block; margin-top: 3px;
  font-size: .75rem; font-weight: 400; color: var(--rv-muted);
}
/* Matches .rv-select / .rv-textarea, so the answer field reads as one of
   the form's own inputs rather than a bolted-on widget. */
.rv-captcha-answer {
  width: 84px; flex-shrink: 0;
  border: 1.5px solid var(--rv-border);
  border-radius: var(--rv-radius-input);
  padding: 11px 12px; font-size: 14px; font-weight: 600; color: var(--rv-text);
  background: #fff; transition: border-color .12s;
  text-align: center;
}
.rv-captcha-answer:focus { outline: none; border-color: var(--rv-primary); }

/* ── VALIDATION STATES ────────────────────────────────────
   A field that fails validation states it twice: the box turns red,
   and a short message sits directly under it saying what is wrong.
   Colour alone would not carry for a colour-blind reader.          */
.rv-input-box.rv-invalid,
.rv-select.rv-invalid,
.rv-textarea.rv-invalid,
.rv-captcha-answer.rv-invalid { border-color: var(--rv-danger); background: var(--rv-danger-light); }
.rv-input-box.rv-invalid input { background: transparent; }
.rv-field-error {
  display: flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 500; color: var(--rv-danger);
}
.rv-field-error::before {
  content: "!";
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; flex-shrink: 0;
  border-radius: 50%; background: var(--rv-danger); color: #fff;
  font-size: .625rem; font-weight: 700;
}
/* The label row already sets 13px/600 on direct spans — the error message
   is not a label, so it opts back out. */
.rv-field > span.rv-field-error { font-size: .75rem; font-weight: 500; color: var(--rv-danger); }

.rv-error {
  display: flex; align-items: center; gap: 9px;
  background: var(--rv-danger-light); border-left: 4px solid var(--rv-danger);
  border-radius: 12px; padding: 12px 14px;
}
.rv-error .ph-fill { font-size: 18px; color: var(--rv-danger); flex-shrink: 0; }
.rv-error span { font-size: .875rem; font-weight: 500; color: var(--rv-text); }
[hidden] { display: none !important; }

/* ── EYEBROW + SECTION HEADS ─────────────────────────────── */
.rv-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rv-primary); margin-bottom: 12px;
}
.rv-sec-head {
  text-align: center; max-width: 680px;
  margin: 0 auto clamp(30px, 3.2vw, 48px);
}
.rv-sec-head h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 700;
  line-height: 1.18; letter-spacing: -.025em; color: var(--rv-text);
  text-wrap: pretty;
}
.rv-sec-head h2 + p { margin-top: 12px; }
.rv-sec-head p {
  font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--rv-muted);
  line-height: 1.7; text-wrap: pretty;
}
.rv-sec       { padding: clamp(52px, 6vw, 88px) 0; background: #fff; }
.rv-sec--alt  { padding: clamp(52px, 6vw, 88px) 0; background: var(--rv-bg); }

/* ═══════════════════════════════════════════════════════════
   COMPONENT: site header  (partials/header.html)
   ───────────────────────────────────────────────────────────
   Self-contained on purpose. This header ships on pages with
   two different `body` styles (body.rv here, styles.css on the
   legacy pages), so it must not inherit anything that affects
   its metrics — font, line-height and box-sizing are all
   declared locally. Inheriting line-height is what previously
   made nav links 41px tall on one page and 40px on another.

   Every dimension traces back to a token below. Change the
   height in ONE place: --rv-header-h.
   ═══════════════════════════════════════════════════════════ */
.rv-header {
  /* component tokens */
  --rv-header-h: 74px;
  --rv-header-logo-h: 38px;
  --rv-header-gap: 16px;
  --rv-nav-font: .95rem;
  --rv-nav-pad: 8px 13px;
  --rv-nav-radius: 10px;

  position: sticky; top: 0; z-index: 400;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rv-border);

  /* isolate from the host page's typography */
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--rv-text);
  -webkit-font-smoothing: antialiased;
}
/* …and from the host page's reset, or lack of one. Every rule here is wrapped
   in :where() so it contributes ZERO specificity — these are defaults that the
   component's own classes below must always be able to override. */
.rv-header *,
.rv-header *::before,
.rv-header *::after { box-sizing: border-box; }
:where(.rv-header) :where(p, nav, div, button, a, img, span, i) {
  margin: 0; padding: 0;
}
:where(.rv-header) :where(img) { display: block; max-width: 100%; }
:where(.rv-header) :where(button) {
  font-family: inherit; font-size: 1rem; line-height: inherit;
  border: none; background: none;
}

.rv-header-inner {
  max-width: var(--rv-max); margin: 0 auto; padding: 0 var(--rv-gutter);
  display: flex; align-items: center; gap: var(--rv-header-gap);
  height: var(--rv-header-h); min-width: 0;
}
.rv-logo { display: flex; align-items: center; flex-shrink: 0; }
.rv-logo img { height: var(--rv-header-logo-h); width: auto; }

.rv-nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; min-width: 0; flex-shrink: 1;
}
.rv-nav a {
  padding: var(--rv-nav-pad); font-size: var(--rv-nav-font); font-weight: 500;
  line-height: 1.4;
  color: var(--rv-muted); border-radius: var(--rv-nav-radius); white-space: nowrap;
  transition: background .12s, color .12s;
}
.rv-nav a:hover { background: var(--rv-primary-light); color: var(--rv-primary); }
.rv-nav a[aria-current="page"] { background: var(--rv-primary-light); color: var(--rv-primary); }

/* Nav dropdown (Solutions). The design models a flat nav; this keeps the
   existing vertical entry points, dressed as the design's own menu popover.
   Opens on hover and on keyboard focus — no JS needed. */
.rv-nav-item { position: relative; display: flex; align-items: center; }
.rv-nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.rv-nav-caret { font-size: 10px; opacity: .5; transition: transform .12s; }
.rv-nav-item:hover .rv-nav-caret,
.rv-nav-item:focus-within .rv-nav-caret { transform: rotate(180deg); }

.rv-nav-dd {
  position: absolute; top: 100%; left: 0;
  padding-top: 10px;
  min-width: 244px; z-index: 500;
  visibility: hidden; opacity: 0;
  transition: opacity .14s, visibility .14s;
}
.rv-nav-item:hover .rv-nav-dd,
.rv-nav-item:focus-within .rv-nav-dd { visibility: visible; opacity: 1; }
.rv-nav-dd-inner {
  background: #fff; border: 1px solid var(--rv-border); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(61,114,232,.16); padding: 6px;
  display: flex; flex-direction: column;
}
.rv-nav-dd a {
  padding: 10px 12px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: var(--rv-text); white-space: nowrap;
}
.rv-nav-dd a:hover { background: var(--rv-primary-light); color: var(--rv-primary); }
.rv-nav-dd-all { color: var(--rv-primary) !important; font-weight: 600 !important; }
.rv-nav-dd-sep { height: 1px; background: var(--rv-border); margin: 5px 8px; }

.rv-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Language picker */
.rv-lang { position: relative; }
.rv-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1.5px solid var(--rv-border);
  background: #fff; border-radius: 20px; cursor: pointer;
  font-size: .8125rem; font-weight: 600; color: var(--rv-text);
  transition: border-color .12s, color .12s;
}
.rv-lang-btn:hover { border-color: var(--rv-primary); color: var(--rv-primary); }
.rv-lang-btn .ph-globe-hemisphere-east { font-size: 16px; color: var(--rv-primary); }
.rv-lang-btn .ph-caret-down { font-size: 10px; opacity: .5; }
.rv-lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--rv-border); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(61,114,232,.16);
  padding: 6px; min-width: 190px; z-index: 500;
  animation: rvRise .16s ease both;
}
.rv-lang-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; border: none; background: #fff;
  border-radius: 10px; cursor: pointer;
  font-size: .875rem; font-weight: 500; color: var(--rv-text); text-align: left;
}
.rv-lang-menu button:hover { background: var(--rv-primary-light); }
.rv-lang-menu button .ph-check { font-size: 13px; color: var(--rv-primary); opacity: 0; }
.rv-lang-menu button[aria-checked="true"] { background: var(--rv-primary-light); }
.rv-lang-menu button[aria-checked="true"] .ph-check { opacity: 1; }

/* Mobile controls */
.rv-mob-actions { display: none; align-items: center; gap: 8px; margin-left: auto; }
.rv-mob-lang {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 11px; border: 1.5px solid var(--rv-border); background: #fff;
  border-radius: 20px; cursor: pointer;
  font-size: .8125rem; font-weight: 600; color: var(--rv-text);
}
.rv-mob-lang .ph-fill { font-size: 16px; color: var(--rv-primary); }
.rv-burger {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rv-border); background: #fff; border-radius: 14px; cursor: pointer;
}
.rv-burger .ph-fill { font-size: 20px; color: var(--rv-text); }

.rv-lang-row {
  border-top: 1px solid var(--rv-border); background: #fff;
  padding: 8px var(--rv-gutter) 12px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.rv-lang-row button {
  padding: 9px 14px; border: 1.5px solid var(--rv-border); background: #fff;
  border-radius: 20px; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: var(--rv-text);
}
.rv-lang-row button[aria-checked="true"] { border-color: var(--rv-primary); background: var(--rv-primary-light); }

.rv-drawer {
  border-top: 1px solid var(--rv-border); background: #fff;
  padding: 10px var(--rv-gutter) 20px;
  display: flex; flex-direction: column; gap: 2px;
  animation: rvRise .18s ease both;
}
.rv-drawer a {
  padding: 14px 12px; font-size: 1rem; font-weight: 500;
  color: var(--rv-text); border-radius: 12px;
  border-bottom: 1px solid var(--rv-primary-light);
}
/* Solutions verticals, listed inline in the drawer rather than nested. */
.rv-drawer a.rv-drawer-sub {
  padding: 12px 12px 12px 26px; font-size: .9375rem;
  color: var(--rv-muted);
}
.rv-drawer a.rv-drawer-sub-all { color: var(--rv-primary); font-weight: 600; }
.rv-drawer .rv-btn { margin-top: 14px; padding: 15px 26px; font-size: 16px; }

@media (max-width: 1079px) {
  .rv-nav, .rv-header-actions { display: none; }
  .rv-mob-actions { display: flex; }
}
@media (min-width: 1080px) {
  .rv-drawer, .rv-lang-row { display: none; }
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.rv-crumbs { background: var(--rv-bg); border-bottom: 1px solid var(--rv-border); }
.rv-crumbs ol {
  max-width: var(--rv-max); margin: 0 auto;
  padding: 12px var(--rv-gutter);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  list-style: none; font-size: .8125rem; color: var(--rv-muted);
}
.rv-crumbs a { color: var(--rv-muted); font-weight: 500; }
.rv-crumbs a:hover { color: var(--rv-primary); }
.rv-crumbs .ph-fill { font-size: 10px; opacity: .5; }
.rv-crumbs [aria-current] { color: var(--rv-text); font-weight: 600; }

/* ── HOME HERO ───────────────────────────────────────────── */
.rv-hero {
  background: linear-gradient(130deg, #0C1B50 0%, #2350B5 48%, #3D72E8 100%);
  color: #fff; position: relative; overflow: hidden;
}
.rv-hero::before,
.rv-hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.rv-hero::before {
  width: 520px; height: 520px; background: rgba(255,255,255,.06);
  top: -190px; right: -120px;
}
.rv-hero::after {
  width: 300px; height: 300px; background: rgba(255,255,255,.05);
  bottom: -140px; left: -80px;
}
.rv-hero-inner {
  max-width: var(--rv-max);
  min-height: clamp(520px, 42vw, 620px);
  margin: 0 auto;
  padding: clamp(48px, 5vw, 72px) var(--rv-gutter);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(28px, 3vw, 48px);
}
.rv-hero-copy { min-width: 0; position: relative; z-index: 2; }
.rv-hero-media {
  position: absolute;
  inset: 0 calc(50% - 50vw) 0 54%;
  min-width: 0;
}

.rv-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #fff; margin-bottom: 20px;
}
.rv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rv-success); display: block; }

.rv-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700;
  line-height: 1.07; letter-spacing: -.03em; color: #fff;
  margin-bottom: 18px; text-wrap: pretty;
}
.rv-hero-lead {
  font-size: clamp(.98rem, 1.32vw, 1.14rem); font-weight: 400; line-height: 1.7;
  color: rgba(255,255,255,.82); max-width: 600px; margin-bottom: 28px; text-wrap: pretty;
}
.rv-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.rv-hero-stats {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 26px;
}
.rv-hero-stat {
  display: flex; align-items: center; gap: 14px;
  flex: 1 1 180px;
  padding: 16px 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(9,17,45,.16), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.rv-hero-stat:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
.rv-hero-stat-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 1.15rem; color: #fff;
}
.rv-hero-stat-txt { min-width: 0; }
.rv-hero-stats b {
  display: block; font-size: clamp(1.5rem, 2vw, 1.85rem); font-weight: 700;
  color: #fff; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 2px;
}
.rv-hero-stats span { font-size: .78rem; color: rgba(255,255,255,.7); white-space: nowrap; }

/* The photo is masked to fade out on its left edge rather than being covered
   by a coloured overlay. An overlay has to guess a start colour, but the hero
   behind it is a 130deg gradient whose shade differs at every x — so any fixed
   colour shows as a visible band (which is exactly what this used to do).
   Masking to transparent lets the real gradient show through, so the blend is
   correct at any width and can't drift if the gradient is retuned.
   The long, eased ramp avoids a hard "edge of fade" line. */
.rv-hero-photo {
  width: 100%; height: 100%;
  border-radius: 0; overflow: hidden;
  box-shadow: none; background: #1B3576;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.15) 10%, rgba(0,0,0,.55) 24%,
    rgba(0,0,0,.88) 38%, #000 52%);
  mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.15) 10%, rgba(0,0,0,.55) 24%,
    rgba(0,0,0,.88) 38%, #000 52%);
}
.rv-hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 47% center;
}

/* Floating care-log proof card */
.rv-hero-card {
  position: absolute; bottom: -22px; left: -14px;
  background: #fff; border: 1px solid var(--rv-border); border-radius: 16px;
  box-shadow: 0 6px 24px rgba(12,27,80,.18);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px; max-width: 290px;
}
.rv-hero-card-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #3D72E8 0%, #1A9FAF 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700;
}
.rv-hero-card-txt { min-width: 0; }
.rv-hero-card-txt b { display: block; font-size: .8125rem; font-weight: 700; color: var(--rv-text); }
.rv-hero-card-txt span { font-size: .75rem; color: var(--rv-muted); line-height: 1.45; }
.rv-chip-ok {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  background: var(--rv-success-light); color: var(--rv-success);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
@media (max-width: 767px) {
  .rv-hero-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(40px, 7vw, 58px) var(--rv-gutter) clamp(44px, 7vw, 64px);
  }
  .rv-hero-media { position: relative; inset: auto; width: 100%; }
  .rv-hero-photo {
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    box-shadow: var(--rv-shadow-lg);
    /* Stacked layout: the photo is a self-contained rounded card, so the
       edge-fade would just look like a rendering fault. */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rv-hero-photo img { object-position: center; }
}
@media (max-width: 640px) {
  .rv-hero-card { position: static; margin-top: 30px; max-width: none; }
}

/* ── PROOF STRIP + CLIENT MARQUEE ────────────────────────── */
.rv-proof { background: #fff; padding: clamp(40px, 4.4vw, 64px) 0 clamp(32px, 3.4vw, 48px); }
.rv-proof-lead {
  text-align: center; font-size: clamp(1.02rem, 1.5vw, 1.32rem); font-weight: 500;
  line-height: 1.6; color: var(--rv-text); max-width: 760px;
  margin: 0 auto 8px; text-wrap: pretty;
}
.rv-proof-lead b { color: var(--rv-primary); font-weight: 700; }
.rv-proof-sub {
  /* 640px was narrower than the sentence's natural width (~660px at 16px
     Lexend), so it always broke onto 2 lines regardless of viewport. Widened
     with headroom; still wraps safely on narrow phones since it's not nowrap. */
  text-align: center; font-size: clamp(.9rem, 1.15vw, 1rem); color: var(--rv-muted);
  max-width: 700px; margin: 0 auto 34px; text-wrap: pretty;
}

.rv-marquee {
  position: relative; overflow: hidden; padding: 6px 0;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* translateX(-50%) only lands seamlessly if the track's total width is
   EXACTLY twice one run's width — i.e. the two runs sit back to back with no
   extra gap between them at the track level. (A gap here — as this used to
   have — makes the two runs unequal widths relative to the 50% travelled,
   so the loop "jumps" by half that gap on every cycle.) The 44px rhythm
   between the last logo of one run and the first logo of the next comes from
   each run's own trailing margin below, so the seam still reads the same as
   every other gap in the strip. */
.rv-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: rvMarquee 52s linear infinite;
}
.rv-marquee:hover .rv-marquee-track { animation-play-state: paused; }
.rv-marquee-run { display: flex; align-items: center; gap: 44px; margin-right: 44px; }
.rv-logo-item { flex-shrink: 0; height: 46px; display: flex; align-items: center; }
.rv-logo-item img {
  max-height: 42px; max-width: 120px; width: auto; height: auto;
  object-fit: contain; filter: grayscale(1); opacity: .6;
  transition: filter .15s, opacity .15s;
}
.rv-logo-item img:hover { filter: grayscale(0); opacity: 1; }
.rv-country {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 20px; flex-shrink: 0;
  background: var(--rv-primary-light);
}
.rv-country img { width: 20px; height: 20px; border-radius: 50%; }
.rv-country span {
  font-size: .75rem; font-weight: 700; color: var(--rv-primary);
  letter-spacing: .04em; text-transform: uppercase;
}
.rv-country--id { background: var(--rv-accent-light); }
.rv-country--id span { color: var(--rv-accent); }

@media (prefers-reduced-motion: reduce) {
  .rv-marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .rv-marquee-track { animation: none; }
  .rv-marquee-track .rv-marquee-run[aria-hidden="true"] { display: none; }
}

/* ── TRUST / CERTIFICATION BAR ───────────────────────────── */
.rv-trust {
  background: var(--rv-bg);
  border-top: 1px solid var(--rv-border);
  border-bottom: 1px solid var(--rv-border);
  padding: clamp(34px, 3.6vw, 52px) 0;
}
.rv-trust-inner {
  max-width: var(--rv-max); margin: 0 auto; padding: 0 var(--rv-gutter);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 2.6vw, 40px); align-items: center;
}
.rv-trust-copy { flex: 1 1 300px; min-width: 0; }
.rv-trust-copy .rv-eyebrow { margin-bottom: 8px; font-size: .7rem; }
.rv-trust-copy h2 {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.3;
  letter-spacing: -.02em; color: var(--rv-text); margin-bottom: 8px; text-wrap: pretty;
}
.rv-trust-copy p {
  font-size: .9375rem; color: var(--rv-muted); line-height: 1.65;
  margin-bottom: 12px; text-wrap: pretty;
}
.rv-trust-chips { flex: 2 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rv-trust-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; background: #fff;
  border: 1px solid var(--rv-border); border-radius: 20px;
  box-shadow: var(--rv-shadow-sm);
}
.rv-trust-chip .ph-fill { font-size: 18px; }
.rv-trust-chip span { font-size: .8125rem; font-weight: 600; color: var(--rv-text); }

/* ── CARD GRIDS ──────────────────────────────────────────── */
.rv-card {
  background: #fff; border: 1px solid var(--rv-border); border-radius: 18px;
  box-shadow: var(--rv-shadow-sm); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.rv-card--hover:hover { box-shadow: var(--rv-shadow-md); transform: translateY(-3px); }
.rv-card-img {
  width: 100%; height: auto; aspect-ratio: 16/9;
  object-fit: cover; background: var(--rv-primary-light);
}
.rv-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rv-card-body h3 {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem); font-weight: 700;
  line-height: 1.3; color: var(--rv-text); text-wrap: pretty;
}
.rv-card-body p {
  font-size: .9375rem; color: var(--rv-muted); line-height: 1.7; text-wrap: pretty;
}

.rv-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.rv-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }

.rv-tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px 11px; border-radius: 20px;
  background: var(--rv-primary-light);
}
.rv-tag .ph-fill { font-size: 14px; color: var(--rv-primary); }
.rv-tag span {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rv-primary);
}
.rv-tag--wellbeing { background: var(--rv-success-light); }
.rv-tag--wellbeing .ph-fill, .rv-tag--wellbeing span { color: var(--rv-success); }
.rv-tag--ai { background: var(--rv-purple-light); }
.rv-tag--ai .ph-fill, .rv-tag--ai span { color: var(--rv-purple); }

/* ── REGION CARDS ────────────────────────────────────────── */
.rv-region { padding: 26px 24px; box-shadow: var(--rv-shadow-sm); }
.rv-region--soon { box-shadow: none; }
.rv-region-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rv-region-head img {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--rv-border); flex-shrink: 0;
}
.rv-region--soon .rv-region-head img { filter: grayscale(.4); }
.rv-region-head h3 { font-size: 1.0625rem; font-weight: 700; color: var(--rv-text); line-height: 1.3; }
.rv-status-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--rv-success);
}
.rv-status-live .rv-dot { width: 6px; height: 6px; }
.rv-status-soon {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px;
  background: var(--rv-bg); color: var(--rv-muted); font-size: 11px; font-weight: 700;
}
.rv-region p {
  font-size: .9375rem; color: var(--rv-muted); line-height: 1.7;
  margin-bottom: 16px; flex: 1; text-wrap: pretty;
}
.rv-region-verts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.rv-vert {
  padding: 4px 11px; border-radius: 20px;
  background: var(--rv-primary-light); color: var(--rv-primary);
  font-size: 11px; font-weight: 600;
}
.rv-vert--id { background: var(--rv-accent-light); color: var(--rv-accent); }

/* ── SOLUTIONS BENTO ─────────────────────────────────────── */
/* Explicit 3-column grid with one double-height hero tile. Tile placement is
   declared per breakpoint rather than left to auto-flow, because auto-placed
   items reflow unpredictably around the row-spanning hero and leave holes. */
.rv-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: clamp(14px, 1.4vw, 20px);
}

.rv-bento-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--rv-primary-light);
  padding: clamp(22px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  min-height: 268px;
  isolation: isolate;
  transition: transform .16s ease, box-shadow .16s ease;
}
.rv-bento-card:hover { transform: translateY(-3px); box-shadow: var(--rv-shadow-md); }

/* The hero tile: double height, sits in column 1. */
.rv-bento-card--hero { grid-row: span 2; min-height: 560px; }

/* Accent tiles invert to brand blue, mirroring the reference. */
.rv-bento-card--accent {
  background: linear-gradient(150deg, var(--rv-primary) 0%, var(--rv-primary-dark) 100%);
  color: #fff;
}
.rv-bento-card--accent .rv-bento-title,
.rv-bento-card--accent .rv-bento-country { color: #fff; }
.rv-bento-card--accent .rv-bento-desc { color: rgba(255,255,255,.82); }
.rv-bento-card--accent .rv-link { color: #fff; }
.rv-bento-card--accent .rv-link:hover { color: #fff; opacity: .8; }

.rv-bento-body { z-index: 2; max-width: 100%; }
.rv-bento-country {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 500; color: var(--rv-muted);
  margin-bottom: 10px;
}
.rv-bento-country img {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
}
.rv-bento-title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700;
  line-height: 1.2; letter-spacing: -.02em; color: var(--rv-text);
  margin-bottom: 8px; text-wrap: pretty;
}
.rv-bento-desc {
  font-size: .9375rem; line-height: 1.6; color: var(--rv-muted);
  text-wrap: pretty; margin-bottom: 14px;
}
.rv-bento-body .rv-link { z-index: 3; }
.rv-bento-card { cursor: pointer; }
.rv-bento-card .rv-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}

/* Device render, anchored to the tile's bottom and allowed to bleed past the
   edge — that overflow is what gives the bento its depth.
   The media box gets an EXPLICIT height: these sources are up to 1200px tall,
   and left to `flex:1` + intrinsic sizing they drive the grid row to ~950px
   instead of fitting the tile. Height here, image scaled to fit inside it. */
.rv-bento-media {
  position: relative; z-index: 1;
  height: 210px; flex: none;
  margin: 16px -10px -30px;
}
/* The hero fills whatever height the grid gives it. Safe to use flex:1 here
   ONLY because the image below is absolutely positioned: an in-flow image
   would contribute its intrinsic 1200px as the flex base size and blow the
   row height out (~600px tiles instead of ~385px). */
.rv-bento-card--hero .rv-bento-media { flex: 1; height: auto; min-height: 0; }
.rv-bento-media img {
  position: absolute; inset: auto 0 0 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 12px 28px rgba(12,27,80,.18));
}
/* ccms-new.png has baked-in background padding below the phones, so
   object-fit:cover was cropping into the phone screens instead of
   showing the background margin below them. Shrink + anchor to the
   bottom so the phones sit fully visible above the card's edge. */
.rv-bento-media--ccms img {
  object-fit: contain; object-position: bottom center;
  transform: scale(1.18) translateY(8%);
  transform-origin: bottom center;
}

/* Two devices in one tile: front device large and centred, second device
   smaller and offset behind-left — same "paired render" composition as the
   reference bento's multi-device tiles. Sizing is on the <img> itself (not
   inset:0 like the single-device case above) since the two need different
   widths/offsets rather than both filling the box. */
.rv-bento-media--pair img {
  inset: auto; bottom: 0; width: auto; height: 88%;
}
.rv-bento-media--pair .rv-bento-device-1 {
  left: 50%; z-index: 2;
  transform: translateX(-38%);
}
.rv-bento-media--pair .rv-bento-device-2 {
  left: 50%; z-index: 1; height: 74%; bottom: 6%;
  transform: translateX(-92%);
  filter: drop-shadow(0 10px 22px rgba(12,27,80,.16)) brightness(.97);
}

@media (max-width: 1023px) {
  .rv-bento { grid-template-columns: repeat(2, 1fr); }
  .rv-bento-card--hero { min-height: 520px; }
}
@media (max-width: 639px) {
  .rv-bento { grid-template-columns: 1fr; }
  .rv-bento-card { min-height: 340px; }
  /* No row-spanning on a single column — it would leave a gap.
     Declared AFTER .rv-bento-card: same specificity, so source order decides. */
  .rv-bento-card--hero { grid-row: auto; min-height: 460px; }
}

/* ── MANIFESTO VIDEO ─────────────────────────────────────── */
.rv-video-sec {
  background: var(--rv-bg); padding: clamp(52px, 6vw, 88px) 0;
}
.rv-video-inner {
  max-width: var(--rv-max); margin: 0 auto; padding: 0 var(--rv-gutter);
  display: flex; flex-wrap: wrap; gap: clamp(24px, 3.2vw, 52px); align-items: center;
}
.rv-video-media { flex: 1 1 420px; min-width: 0; }
.rv-video-copy  { flex: 1 1 340px; min-width: 0; }
.rv-video-copy h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.2rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -.025em; color: var(--rv-text); margin-bottom: 14px; text-wrap: pretty;
}
.rv-video-copy p {
  font-size: clamp(.95rem, 1.2vw, 1.05rem); color: var(--rv-muted);
  line-height: 1.7; margin-bottom: 24px; text-wrap: pretty;
}
.rv-video-frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--rv-shadow-md);
  background: linear-gradient(135deg, #0C1B50 0%, #2350B5 100%);
  border: none; padding: 0; cursor: pointer; display: block;
}
.rv-video-frame img,
.rv-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.rv-video-hint {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: rgba(255,255,255,.72); font-size: .8125rem; padding: 20px; text-align: center;
}
.rv-play {
  width: 76px; height: 76px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.94); box-shadow: 0 6px 24px rgba(12,27,80,.3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s; flex-shrink: 0;
}
.rv-video-frame:hover .rv-play { transform: scale(1.06); }
.rv-play .ph-fill { font-size: 28px; color: var(--rv-primary); margin-left: 3px; }
.rv-video-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 20px;
  background: rgba(12,27,80,.62); backdrop-filter: blur(6px); pointer-events: none;
}
.rv-video-badge .ph-fill { font-size: 13px; color: #fff; }
.rv-video-badge span {
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ── CTA BAND ────────────────────────────────────────────── */
.rv-cta {
  background: linear-gradient(135deg, #0C1B50 0%, #2D5EC7 100%);
  padding: clamp(52px, 6vw, 84px) 0; text-align: center;
  position: relative; overflow: hidden;
}
.rv-cta::before {
  content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,255,255,.06); top: -160px; left: -80px; pointer-events: none;
}
.rv-cta-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--rv-gutter); position: relative; }
.rv-cta h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.18;
  letter-spacing: -.025em; color: #fff; margin-bottom: 14px; text-wrap: pretty;
}
.rv-cta p {
  font-size: clamp(.95rem, 1.2vw, 1.08rem); color: rgba(255,255,255,.8);
  line-height: 1.7; margin-bottom: 28px; text-wrap: pretty;
}
.rv-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── NEWS & INFO ─────────────────────────────────────────── */
.rv-news-hero {
  background: linear-gradient(130deg, #0C1B50 0%, #2350B5 52%, #3D72E8 100%);
  color: #fff; position: relative; overflow: hidden;
}
.rv-news-hero::before {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: rgba(255,255,255,.06); top: -200px; right: -100px; pointer-events: none;
}
.rv-news-hero-inner {
  max-width: 900px; margin: 0 auto;
  padding: clamp(44px, 5vw, 76px) var(--rv-gutter) clamp(44px, 5vw, 72px);
  position: relative; text-align: center;
}
.rv-news-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.1;
  letter-spacing: -.03em; color: #fff; margin-bottom: 16px; text-wrap: pretty;
}
.rv-news-hero > div > p {
  font-size: clamp(.95rem, 1.28vw, 1.1rem); color: rgba(255,255,255,.82);
  line-height: 1.7; max-width: 640px; margin: 0 auto 30px; text-wrap: pretty;
}
.rv-news-hero .rv-pill { gap: 7px; }
.rv-news-hero .rv-pill .ph-fill { font-size: 13px; }

.rv-search { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; margin: 0 auto; }
.rv-search-box {
  flex: 1 1 300px; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 20px; padding: 0 8px 0 18px;
  box-shadow: 0 6px 24px rgba(12,27,80,.22);
}
.rv-search-box > .ph-fill { font-size: 18px; color: var(--rv-muted); flex-shrink: 0; }
.rv-search-box input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  padding: 15px 0; font-size: .9375rem; color: var(--rv-text);
}
.rv-search-clear {
  width: 32px; height: 32px; border: none; background: var(--rv-bg);
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.rv-search-clear .ph-fill { font-size: 12px; color: var(--rv-muted); }
.rv-search .rv-btn { padding: 15px 26px; }

.rv-news-body { background: var(--rv-bg); padding: clamp(28px, 3vw, 40px) 0 clamp(52px, 6vw, 84px); }
.rv-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.rv-cat {
  padding: 9px 16px; border-radius: 20px;
  border: 1.5px solid var(--rv-border); background: #fff; color: var(--rv-muted);
  font-size: .8125rem; font-weight: 600; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.rv-cat:hover { border-color: var(--rv-primary); color: var(--rv-primary); }
.rv-cat[aria-pressed="true"] { background: var(--rv-primary); border-color: var(--rv-primary); color: #fff; }

.rv-results {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  justify-content: space-between; margin-bottom: 20px;
}
.rv-results h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--rv-text); }
.rv-results span { font-size: .875rem; color: var(--rv-muted); }

/* Article thumbnail placeholder — no stock photography stands in for real art */
.rv-thumb {
  position: relative; width: 100%; aspect-ratio: 16/9; flex-shrink: 0;
  background: linear-gradient(135deg, #EBF2FF 0%, #DCE8FF 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-thumb > .ph-fill { font-size: 40px; color: rgba(61,114,232,.42); }

.rv-featured {
  background: #fff; border: 1px solid var(--rv-border); border-radius: 20px;
  box-shadow: var(--rv-shadow-sm); overflow: hidden;
  display: flex; flex-wrap: wrap; margin-bottom: clamp(18px, 2vw, 28px);
}
.rv-featured-media { flex: 1 1 340px; min-width: 0; position: relative; min-height: 240px; }
.rv-featured-media .rv-thumb { height: 100%; aspect-ratio: auto; }
.rv-featured-flag {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px; background: var(--rv-accent); pointer-events: none;
}
.rv-featured-flag .ph-fill { font-size: 12px; color: #fff; }
.rv-featured-flag span {
  font-size: 11px; font-weight: 700; color: #fff;
  letter-spacing: .04em; text-transform: uppercase;
}
.rv-featured-body {
  flex: 1 1 360px; min-width: 0; padding: clamp(22px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 12px; justify-content: center;
}
.rv-featured-body h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 700; line-height: 1.22;
  letter-spacing: -.025em; color: var(--rv-text); text-wrap: pretty;
}
.rv-featured-body p { font-size: .9875rem; color: var(--rv-muted); line-height: 1.7; text-wrap: pretty; }
.rv-featured-body .rv-link { font-size: .9375rem; }
.rv-featured-body .rv-link .ph-fill { font-size: 15px; }

.rv-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rv-meta time, .rv-meta > span:not(.rv-cat-tag) { font-size: .8125rem; color: var(--rv-muted); }
.rv-cat-tag { padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; }

.rv-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.rv-article .rv-card-body { padding: 18px 20px 22px; gap: 9px; }
.rv-article h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.32; color: var(--rv-text); text-wrap: pretty; }
.rv-article p { font-size: .875rem; color: var(--rv-muted); line-height: 1.65; flex: 1; text-wrap: pretty; }
.rv-article-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 4px;
}
.rv-article-foot .rv-link { font-size: .8125rem; }
.rv-article-foot .rv-link .ph-fill { font-size: 13px; }
.rv-article-foot > span { font-size: .75rem; color: var(--rv-muted); }

.rv-empty {
  background: #fff; border: 1px dashed var(--rv-border); border-radius: 20px;
  padding: clamp(40px, 5vw, 72px) 28px; text-align: center;
}
.rv-empty-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--rv-primary-light);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.rv-empty-icon .ph-fill { font-size: 28px; color: var(--rv-primary); }
.rv-empty h3 { font-size: 1.15rem; font-weight: 700; color: var(--rv-text); margin-bottom: 8px; }
.rv-empty p { font-size: .9375rem; color: var(--rv-muted); margin-bottom: 20px; }

.rv-newsletter {
  margin-top: clamp(32px, 3.6vw, 52px);
  background: linear-gradient(135deg, #3D72E8 0%, #2D5EC7 100%);
  border-radius: 20px; padding: clamp(26px, 3vw, 40px);
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  box-shadow: 0 6px 24px rgba(61,114,232,.24);
}
.rv-newsletter-copy { flex: 1 1 300px; min-width: 0; }
.rv-newsletter h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; color: #fff;
  line-height: 1.28; margin-bottom: 8px; text-wrap: pretty;
}
.rv-newsletter p { font-size: .9375rem; color: rgba(255,255,255,.8); line-height: 1.65; text-wrap: pretty; }
.rv-newsletter form { flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rv-newsletter input {
  flex: 1 1 180px; min-width: 0; border: none; outline: none; border-radius: 12px;
  padding: 14px 16px; font-size: .9375rem; color: var(--rv-text); background: #fff;
}
.rv-newsletter button {
  padding: 14px 22px; border-radius: 12px; border: none;
  background: var(--rv-navy); color: #fff; font-size: .9375rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.rv-newsletter button:hover { background: #081239; }
.rv-newsletter input.rv-invalid { outline: 2px solid var(--rv-danger); outline-offset: 1px; }
/* Sits on its own row under the input + button, which wrap in a flex row. */
.rv-newsletter .rv-field-error { flex-basis: 100%; color: #FFD7D2; }
.rv-newsletter .rv-field-error::before { background: #FFD7D2; color: var(--rv-danger); }
.rv-newsletter-done {
  flex: 1 1 300px; display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: .9375rem; font-weight: 500;
}
.rv-newsletter-done .ph-fill { font-size: 22px; }

/* ── CONTACT ─────────────────────────────────────────────── */
.rv-contact-hero {
  background: linear-gradient(130deg, #0C1B50 0%, #2350B5 100%);
  color: #fff; padding: clamp(40px, 4.6vw, 68px) 0;
}
.rv-contact-hero-inner { max-width: 780px; margin: 0 auto; padding: 0 var(--rv-gutter); text-align: center; }
.rv-contact-hero .rv-eyebrow { color: rgba(255,255,255,.7); margin-bottom: 14px; }
.rv-contact-hero h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 700; line-height: 1.12;
  letter-spacing: -.03em; color: #fff; margin-bottom: 14px; text-wrap: pretty;
}
.rv-contact-hero p {
  font-size: clamp(.95rem, 1.24vw, 1.08rem); color: rgba(255,255,255,.82);
  line-height: 1.7; text-wrap: pretty;
}
.rv-contact-body { background: var(--rv-bg); padding: clamp(36px, 4.4vw, 64px) 0 clamp(52px, 6vw, 84px); }
.rv-contact-inner {
  max-width: var(--rv-max); margin: 0 auto; padding: 0 var(--rv-gutter);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 2.6vw, 40px); align-items: flex-start;
}
.rv-contact-form-card {
  flex: 2 1 420px; min-width: 0; background: #fff;
  border: 1px solid var(--rv-border); border-radius: 20px;
  box-shadow: var(--rv-shadow-sm); padding: clamp(24px, 2.8vw, 40px);
}
.rv-contact-form-card h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 700;
  letter-spacing: -.02em; color: var(--rv-text); margin-bottom: 6px;
}
.rv-contact-form-card > div > p {
  font-size: .9375rem; color: var(--rv-muted); line-height: 1.65; margin-bottom: 24px;
}
.rv-form { display: flex; flex-direction: column; gap: 16px; }
.rv-contact-aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rv-office {
  background: #fff; border: 1px solid var(--rv-border);
  border-left: 4px solid var(--rv-primary); border-radius: 18px;
  box-shadow: var(--rv-shadow-sm); padding: 22px;
}
.rv-office--id { border-left-color: var(--rv-accent); }
.rv-office-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rv-office-head img { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--rv-border); }
.rv-office h3 { font-size: 1rem; font-weight: 700; color: var(--rv-text); }
.rv-office p { font-size: .9375rem; color: var(--rv-muted); line-height: 1.7; }
.rv-office a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .875rem; font-weight: 600; }
.rv-office a .ph-fill { font-size: 15px; }
.rv-next { background: var(--rv-primary-light); border: 1px solid var(--rv-border); border-radius: 18px; padding: 22px; }
.rv-next-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv-next-head .ph-fill { font-size: 20px; color: var(--rv-primary); }
.rv-next h3 { font-size: 1rem; font-weight: 700; color: var(--rv-text); }
.rv-next p { font-size: .9375rem; color: var(--rv-muted); line-height: 1.7; }

/* Success state (shared by contact page + demo panel) */
.rv-sent { text-align: center; padding: clamp(28px, 3.4vw, 48px) 0; animation: rvFade .2s ease both; }
.rv-sent-icon {
  width: 72px; height: 72px; border-radius: 50%; background: var(--rv-success-light);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.rv-sent-icon .ph-fill { font-size: 36px; color: var(--rv-success); }
.rv-sent h2, .rv-sent h3 { font-size: 1.4rem; font-weight: 700; color: var(--rv-text); margin-bottom: 10px; }
.rv-sent h3 { font-size: 1.25rem; }
.rv-sent p {
  font-size: .9875rem; color: var(--rv-muted); line-height: 1.7;
  max-width: 420px; margin: 0 auto 22px;
}
.rv-btn-quiet {
  padding: 11px 22px; border-radius: 12px; border: 1.5px solid var(--rv-border);
  background: #fff; color: var(--rv-text); font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.rv-btn-quiet:hover { background: var(--rv-bg); }

/* ── FOOTER ──────────────────────────────────────────────── */
.rv-footer { background: var(--rv-navy); padding: clamp(44px, 5vw, 68px) 0 26px; }
.rv-footer-top {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(26px, 3vw, 48px);
  padding-bottom: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.rv-footer-logo { height: 38px; width: auto; margin-left: -8px; margin-bottom: 14px; }
.rv-footer-tagline { font-size: .9375rem; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 12px; }
.rv-footer-by { font-size: .8125rem; color: rgba(255,255,255,.52); }
.rv-footer-social { display: flex; gap: 12px; margin-top: 16px; }
.rv-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.82);
  font-size: 20px; transition: background 160ms ease, color 160ms ease;
}
.rv-footer-social a:hover { background: rgba(255,255,255,.16); color: #fff; }
.rv-footer-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.55); margin-bottom: 16px;
}
.rv-footer-links { display: flex; flex-direction: column; gap: 10px; }
.rv-footer-links a { font-size: .9rem; color: rgba(255,255,255,.82); font-weight: 400; }
.rv-footer-links a:hover { color: #fff; }
.rv-footer-contact { font-size: .85rem; color: rgba(255,255,255,.78); line-height: 1.7; margin-bottom: 10px; }
.rv-footer-mail { font-size: .85rem; color: #4FD1B8; font-weight: 500; }
.rv-footer-mail:hover { color: #7fe0cd; }
.rv-footer-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding: 9px 16px; border: 1.5px solid rgba(255,255,255,.24); border-radius: 20px;
  color: #fff; font-size: .8125rem; font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease;
}
.rv-footer-cta i { font-size: 13px; }
.rv-footer-cta:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.rv-footer-langs { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rv-footer-langs button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.18); background: transparent;
  color: #fff; font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.rv-footer-langs button[aria-checked="true"] {
  border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.16);
}
.rv-footer-bottom {
  padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between;
  font-size: .78rem; color: rgba(255,255,255,.55);
}
.rv-footer-bottom a { color: rgba(255,255,255,.7); }
.rv-footer-bottom a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   COMPONENT: sticky CTA + demo panel  (partials/demo-cta.html)
   Also ships on both page types — isolated for the same reason
   as the header above.
   ═══════════════════════════════════════════════════════════ */
.rv-sticky,
.rv-demo {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rv-text);
  -webkit-font-smoothing: antialiased;
}
.rv-sticky *, .rv-sticky *::before, .rv-sticky *::after,
.rv-demo *, .rv-demo *::before, .rv-demo *::after { box-sizing: border-box; }
/* :where() again — zero specificity, so the component classes still win. */
:where(.rv-sticky, .rv-demo) :where(p, h2, h3, div, label, span, form, button, i) {
  margin: 0; padding: 0;
}
:where(.rv-sticky, .rv-demo) :where(button, input, select, textarea) {
  font-family: inherit;
}
:where(.rv-demo) :where(img) { display: block; max-width: 100%; }

.rv-sticky {
  position: fixed; right: 22px; bottom: 22px; z-index: 600;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.rv-sticky button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 22px; border-radius: 20px; border: none;
  background: linear-gradient(135deg, #3D72E8 0%, #2D5EC7 100%);
  color: #fff; font-size: .9375rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 24px rgba(61,114,232,.42);
  transition: transform .12s, box-shadow .12s;
}
.rv-sticky button:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(61,114,232,.5); }
.rv-sticky button .ph-fill { font-size: 19px; }
@media (max-width: 520px) {
  .rv-sticky { right: 14px; bottom: 14px; }
  .rv-sticky button { padding: 13px 18px; font-size: .875rem; }
}
/* The open drawer carries its own CTA — don't stack the pill on top of it. */
body:has(#rv-drawer:not([hidden])) .rv-sticky { display: none; }
/* The contact page's whole purpose is booking a demo — the form is
   already the page's one CTA, so the floating pill is redundant here. */
body:has(#rv-contact-form) .rv-sticky { display: none; }

/* ═══════════════════════════════════════════════════════════
   COMPONENT: cookie consent banner  (partials/cookie-consent.html)
   Ships everywhere the sticky CTA and demo panel do, same reset.
   ═══════════════════════════════════════════════════════════ */
.rv-cookie {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: fixed; left: 22px; right: 22px; bottom: 22px; z-index: 650;
  max-width: 640px; margin: 0 auto;
  background: #fff; color: var(--rv-text);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(12,27,80,.22);
  border: 1px solid rgba(12,27,80,.08);
  animation: rvFade .18s ease both;
}
.rv-cookie * { box-sizing: border-box; }
.rv-cookie-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 18px 22px;
}
.rv-cookie-inner p {
  margin: 0; flex: 1 1 320px; font-size: .875rem; line-height: 1.5;
}
.rv-cookie-inner a { color: var(--rv-primary); text-decoration: underline; }
.rv-cookie-actions {
  display: flex; gap: 10px; flex: 0 0 auto;
}
.rv-cookie-actions .rv-btn {
  padding: 10px 18px; font-size: .875rem;
}
@media (max-width: 520px) {
  .rv-cookie { left: 12px; right: 12px; bottom: 12px; }
  .rv-cookie-inner { padding: 16px; }
  .rv-cookie-actions { width: 100%; }
  .rv-cookie-actions .rv-btn { flex: 1 1 0; justify-content: center; }
}
/* Stay out of the way of the demo panel and drawer when either is open. */
body:has(#rv-demo:not([hidden])) .rv-cookie,
body:has(#rv-drawer:not([hidden])) .rv-cookie { display: none; }

.rv-demo {
  position: fixed; inset: 0; z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.rv-demo-scrim {
  position: fixed; inset: 0; border: none; padding: 0;
  background: rgba(12,27,80,.5); backdrop-filter: blur(3px);
  animation: rvFade .18s ease both; cursor: pointer;
}
.rv-demo-panel {
  position: relative; width: min(520px, 100%); max-height: calc(100vh - 48px);
  margin: auto; border-radius: 22px; overflow: hidden;
  background: #fff; box-shadow: 0 24px 64px rgba(12,27,80,.32);
  display: flex; flex-direction: column;
  animation: rvPopIn .22s cubic-bezier(.4, 0, .2, 1) both;
}
@media (max-width: 480px) {
  .rv-demo { padding: 12px; }
  .rv-demo-panel { max-height: calc(100vh - 24px); border-radius: 18px; }
}
.rv-demo-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 24px 24px 18px; border-bottom: 1px solid var(--rv-border); flex-shrink: 0;
}
.rv-demo-head .rv-eyebrow { font-size: .7rem; margin-bottom: 6px; }
.rv-demo-head h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--rv-text); line-height: 1.25; }
.rv-demo-close {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 14px;
  border: 1px solid var(--rv-border); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rv-demo-close:hover { background: var(--rv-bg); }
.rv-demo-close .ph-fill { font-size: 16px; color: var(--rv-text); }
.rv-demo-body { flex: 1; overflow-y: auto; padding: 22px 24px 28px; }
.rv-demo-body .rv-form { gap: 15px; }
.rv-demo-body .rv-form > p { font-size: .9375rem; color: var(--rv-muted); line-height: 1.65; }
/* auto-fit, not a hardcoded 1fr 1fr: the dialog is now centered and can be
   narrower than the old edge-to-edge side panel, so a fixed two-up grid was
   overflowing its own container on small screens. */
.rv-demo-body .rv-field-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.rv-demo-body .rv-captcha { gap: 12px; padding: 13px 15px; }

@media (prefers-reduced-motion: reduce) {
  .rv *, .rv *::before, .rv *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}