/* ============================================================
   Revest theme — design system
   Work Sans throughout. Charcoal / bronze / teal / off-white.
   Institutional restraint: hierarchy via weight, size, spacing.

   Type rule: light 300 only at >=1.05rem (leads/display); grid/card
   supporting copy sits at 400. Subhead/card titles = 500.
   Text bronze on light surfaces uses --bronze-ink (AA); --bronze is
   reserved for borders, dots and large decorative marks (non-text).
   ============================================================ */

/* Self-hosted Work Sans (variable, latin) — removes the render-blocking
   third-party Google Fonts chain. The file's wght axis is 100–900; declare the
   real range so the browser never clamps, then set the register deliberately
   below (editor-entered bold resolves to 600, not 700). */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/worksans-latin.woff2") format("woff2");
}

:root {
  --charcoal: #23252B;
  --charcoal-90: #2b2d34;
  --bronze: #B6976D;          /* borders, dots, marks (non-text) */
  --bronze-400: #c2a47b;      /* CTA gradient start */
  --bronze-600: #9b7f58;      /* CTA gradient end */
  --shadow-bronze: 0 12px 28px rgba(150,120,80,0.28);
  --shadow-lg: 0 18px 44px rgba(35,37,43,0.14);
  --bronze-ink: #886835;      /* bronze TEXT on white/off-white (AA ~5:1) */
  --bronze-200: #DDCBAB;      /* hero emphasis on dark */
  --bronze-300: #ccb288;      /* bronze text on dark (passes) */
  --teal: #58F8DE;
  --offwhite: #F5F3EF;
  --white: #ffffff;
  --ink: #23252B;
  --ink-70: rgba(35, 37, 43, 0.70);
  --ink-60: rgba(35, 37, 43, 0.64);
  --ink-50: rgba(35, 37, 43, 0.50);
  --light-70: rgba(255, 255, 255, 0.72);
  --light-50: rgba(255, 255, 255, 0.5);
  --hairline: rgba(35, 37, 43, 0.12);
  --hairline-strong: rgba(35, 37, 43, 0.50); /* form-control borders (WCAG 1.4.11 ≥3:1) */
  --hairline-light: rgba(255, 255, 255, 0.16);

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 140px);

  --radius-control: 3px;      /* buttons, inputs */
  --radius-surface: 4px;      /* cards, pillars, panels */
  --rv-ease: cubic-bezier(.22, .61, .36, 1);
  --header-tint: rgba(35, 37, 43, 0.88);  /* = --charcoal; one value for every template */

  --font: "Work Sans", -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- reset-ish ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure, blockquote { margin: 0; } /* UA gives blockquote 1em 40px — it broke the pullquote's left edge */
a { color: inherit; text-decoration: none; }
/* h4-h6 included: service pages demote pillar headings to h4 when the section
   carries its own h2, and UA h4 margins would otherwise reappear */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; }
h1, h2 { line-height: 1.05; }
h3, h4, h5, h6 { line-height: 1.2; }
p { margin: 0; }
strong, b { font-weight: 600; } /* keep the institutional register: never 700 */
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
[x-cloak] { display: none !important; }
.rv-hidden { display: none !important; }
.rv-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- focus-visible (keyboard) — dark surfaces get the light ring ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--charcoal); outline-offset: 2px; border-radius: 2px;
}
.rv-header :focus-visible, .rv-section--dark :focus-visible, .rv-hero :focus-visible,
.rv-page-hero :focus-visible, .rv-footer :focus-visible, .rv-process :focus-visible {
  outline-color: var(--bronze-300);
}
/* ...but the light ring must not land on a LIGHT element inside a dark landmark:
   bronze-300 on the bronze button is ~1.3:1 and on the white dropdown ~2:1, both
   below the 3:1 that WCAG 2.4.11/1.4.11 require of a focus indicator. */
.rv-header .rv-btn:focus-visible, .rv-hero .rv-btn:focus-visible,
.rv-page-hero .rv-btn:focus-visible, .rv-section--dark .rv-btn:focus-visible,
.rv-footer .rv-btn:focus-visible, .rv-process .rv-btn:focus-visible,
.rv-nav__dropdown :focus-visible {
  outline-color: var(--charcoal);
}
/* the ghost button IS transparent on dark, so it keeps the light ring */
.rv-header .rv-btn--ghost:focus-visible, .rv-hero .rv-btn--ghost:focus-visible,
.rv-page-hero .rv-btn--ghost:focus-visible, .rv-section--dark .rv-btn--ghost:focus-visible,
.rv-footer .rv-btn--ghost:focus-visible { outline-color: var(--bronze-300); }

.rv-skip {
  position: absolute; left: -9999px; top: 0; background: var(--charcoal); color: #fff;
  padding: 10px 16px; z-index: 200;
}
.rv-skip:focus { left: 8px; top: 8px; }

/* scroll-reveal base/in rules live in the inlined #rv-critical block (header.php)
   so LiteSpeed's CSS optimizer can't strip the JS-added .in selector. */

/* ---- layout primitives ---- */
.rv-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.rv-section { padding-block: var(--section-y); }
.rv-section--tight { padding-block: clamp(44px, 5vw, 76px); }
.rv-section--muted { background: var(--offwhite); }
.rv-section--dark { background: var(--charcoal); color: #fff; }
.rv-section--divider { border-top: 1px solid var(--hairline); }
.rv-section__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
/* Measure note: in Work Sans the "0" glyph (= 1ch) is ~1.24x the average
   rendered character, so a 62ch cap sets ~77 characters. Every cap below is
   therefore sized at roughly measure/1.25 to land in the 62–72 character band. */
.rv-section__intro { margin-top: 16px; max-width: 50ch; color: var(--ink-70); font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.7; text-wrap: pretty; }
.rv-section--dark .rv-section__intro { color: var(--light-70); }

/* ---- type ---- */
.rv-eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze-ink); margin-bottom: 18px;
}
.rv-eyebrow--light { color: var(--bronze-300); }
.rv-display { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.03; }
/* interior-page display H2s — must never outsize the page's own H1 */
.rv-display--sub { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.rv-h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.06; }
/* 500 so the heading tier is never lighter than the card titles it outranks */
.rv-h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.015em; }
/* Lead = the FIRST paragraph of a block only. Body-length copy that follows uses
   .rv-body — 300-weight at body length reads thin and washed out. */
.rv-lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 300; color: var(--ink-70); line-height: 1.7; max-width: 54ch; text-wrap: pretty; }
.rv-body { font-size: 1.05rem; font-weight: 400; color: var(--ink-70); line-height: 1.75; max-width: 54ch; text-wrap: pretty; }
.rv-section--dark .rv-lead, .rv-section--dark .rv-body { color: var(--light-70); }
.rv-lead + .rv-body, .rv-body + .rv-body, .rv-section__intro + .rv-body { margin-top: 20px; }
/* A service intro renders every paragraph as .rv-lead. One is an opening; three
   in a row is a page shouting at someone who has not agreed to listen yet. The
   first keeps the lead treatment, the rest read as body. */
/* :has() catches every lead that is followed by one, not just the first — so it
   must come BEFORE the sibling rule below, which at equal specificity wins back
   the muted ink for paragraphs two onward. Only the opening line keeps full ink. */
.rv-prose .rv-lead:has(+ .rv-lead) { color: var(--ink); }
.rv-prose .rv-lead + .rv-lead { font-size: 1.02rem; font-weight: 400; line-height: 1.75; max-width: 64ch; color: var(--ink-70); }
/* Prose: cap the MEASURE of children, never the container — a narrowed, centered
   container would break the shared left grid edge (sections would step left/right). */
.rv-prose { max-width: 58ch; font-size: 1.02rem; }
.rv-container.rv-prose { max-width: var(--container); }
.rv-container.rv-prose > * { max-width: 58ch; }
.rv-prose > * + * { margin-top: 24px; }
.rv-prose p, .rv-prose li { text-wrap: pretty; }
.rv-prose h2 { margin-top: 8px; }
.rv-prose h2, .rv-prose h3 { color: var(--ink); }
.rv-prose a:not(.rv-btn):not(.rv-link) {
  color: var(--bronze-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: color .2s var(--rv-ease);
}
.rv-prose a:not(.rv-btn):not(.rv-link):hover { color: var(--ink); }
.rv-pullquote {
  margin-top: 32px; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 300; font-style: italic;
  letter-spacing: -0.02em; color: var(--ink); border-left: 2px solid var(--bronze); padding-left: 24px; text-wrap: balance;
}

/* ---- buttons + links ---- */
/* spec A8: bronze GRADIENT + inset top highlight, not a flat fill.
   Text stays #1b1c20, NOT the prototype's white — white on this bronze measures
   ~2.98:1 and fails WCAG AA 4.5:1. Dark ink on the same gradient is 5.74:1. */
.rv-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px;
  background: linear-gradient(150deg, var(--bronze-400) 0%, var(--bronze-600) 100%);
  /* White label on the Kit gold is a deliberate brand call and measures
     2.36:1 at the gradient's light end, below the 4.5:1 AA requirement.
     Kept on purpose — do not "fix" by reverting the colour. */
  color: #fff; font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.01em; border: 1px solid var(--bronze-600); border-radius: var(--radius-control);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform .14s var(--rv-ease), box-shadow .24s var(--rv-ease), filter .24s var(--rv-ease), background .2s var(--rv-ease), color .2s var(--rv-ease);
}
.rv-btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), var(--shadow-bronze);
  filter: brightness(0.97) saturate(1.04);
}
.rv-btn:active { transform: translateY(0) scale(.985); }
/* trailing arrow nudges on hover (spec A8) */
.rv-btn > span:last-child { transition: transform .14s var(--rv-ease); }
.rv-btn:hover > span:last-child, .rv-btn:focus-visible > span:last-child { transform: translateX(3px); }
.rv-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); box-shadow: none; }
.rv-btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.7); box-shadow: none; filter: none; }
.rv-btn--ghost:active { background: rgba(255,255,255,0.14); }
.rv-btn--sm { padding: 11px 20px; font-size: 0.88rem; }
.rv-btn:disabled, .rv-btn[aria-disabled="true"] { opacity: .6; cursor: default; transform: none; }
.rv-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding-block: 10px; color: var(--bronze-ink);
  font-weight: 500; font-size: 0.92rem; letter-spacing: 0.01em;
}
/* spec A8: underline wipes in left->right on hover/focus */
.rv-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .24s var(--rv-ease);
}
.rv-underline:hover, .rv-underline:focus-visible { background-size: 100% 1px; }

.rv-link span { transition: transform .2s var(--rv-ease); }
.rv-link:hover span, .rv-link:focus-visible span { transform: translateX(4px); }

/* ---- header ---- */
.rv-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding-block: 24px;
  transition: background .3s var(--rv-ease), box-shadow .3s var(--rv-ease), padding .3s var(--rv-ease),
              backdrop-filter .3s var(--rv-ease), -webkit-backdrop-filter .3s var(--rv-ease);
}
/* spec A1: one tint across templates (was two hues; see --header-tint) */
.rv-header.is-scrolled {
  background: var(--header-tint); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding-block: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.1), 0 10px 30px rgba(20,16,12,0.28);
}
.rv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.rv-header__brand { display: inline-flex; align-items: center; }
.rv-header__brand img { height: 40px; width: auto; transition: transform .3s var(--rv-ease); transform-origin: left center; }
.rv-header.is-scrolled .rv-header__brand img { transform: scale(.85); }
.rv-header__nav { display: flex; align-items: center; gap: 28px; }
/* :not(.rv-btn) — this reset is (0,2,1) and outranks .rv-btn (0,1,0), so without
   it the header's "Book a consultation" lost its bronze fill, border and padding
   and rendered as a fourth plain nav link. */
.rv-header__nav a:not(.rv-btn), .rv-nav__services { color: rgba(255,255,255,0.9); font-size: 0.92rem; font-weight: 400; background: none; border: 0; padding-block: 10px; transition: color .2s var(--rv-ease); }
.rv-header__nav a:not(.rv-btn):hover, .rv-nav__services:hover { color: #fff; }
.rv-nav__services span { transition: transform .2s var(--rv-ease); }
.rv-nav__services[aria-expanded="true"] span { transform: rotate(180deg); }
.rv-nav__group { position: relative; display: flex; align-items: center; gap: 28px; }
.rv-nav__services { display: inline-flex; align-items: center; gap: 6px; }
/* open/close state lives in the inlined #rv-critical block (header.php): it
   toggles visibility+opacity, not display, so the menu eases out as well as in. */
.rv-nav__dropdown {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 240px; background: #fff; color: var(--ink);
  border-radius: var(--radius-surface); padding: 10px; box-shadow: 0 20px 50px rgba(0,0,0,0.22); gap: 2px;
}
.rv-nav__dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* hover-gap bridge */
/* Scoped through .rv-header__nav on purpose: the nav's own link rule is
   `.rv-header__nav a:not(.rv-btn)` (0,2,1) and sets white for the dark header bar.
   The panel is white, so an unscoped `.rv-nav__dropdown a` (0,1,1) loses and the
   items render white-on-white — visible only while hovered. */
.rv-header__nav .rv-nav__dropdown a { color: var(--ink); padding: 11px 14px; border-radius: 3px; font-size: 0.9rem; transition: background .18s var(--rv-ease), color .18s var(--rv-ease); }
.rv-header__nav .rv-nav__dropdown a:hover,
.rv-header__nav .rv-nav__dropdown a:focus-visible { background: var(--offwhite); color: var(--bronze-ink); }
.rv-header__toggle { display: none; width: 44px; height: 44px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: none; border: 0; padding: 0; }
.rv-header__toggle span { width: 24px; height: 2px; background: #fff; display: block; transition: transform .25s var(--rv-ease), opacity .2s var(--rv-ease); }
.rv-header.is-open .rv-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rv-header.is-open .rv-header__toggle span:nth-child(2) { opacity: 0; }
.rv-header.is-open .rv-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.rv-mobile-nav { display: none; }

/* ---- hero ---- */
.rv-hero {
  position: relative; min-height: 92vh; display: flex; align-items: center; color: #fff; overflow: hidden;
  background: radial-gradient(120% 100% at 15% 20%, #2b2d34 0%, var(--charcoal) 60%);
}
/* spec B1: slow Ken Burns drift. transform-only, so it never triggers layout. */
.rv-hero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08); animation: rv-kenburns 24s ease-out infinite alternate; will-change: transform; }
@keyframes rv-kenburns {
  0%   { transform: scale(1.08) translateY(0); }
  100% { transform: scale(1.16) translateY(-2%); }
}
@media (prefers-reduced-motion: reduce) { .rv-hero__img { animation: none; } }
/* Top scrim: the header is transparent until scroll, and the diagonal overlay is
   only ~0.58 opaque on the right — exactly where the nav sits. This makes nav
   contrast independent of whatever photograph is swapped in. */
.rv-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 1;
  background: linear-gradient(180deg, rgba(20,17,14,0.72) 0%, rgba(20,17,14,0) 100%); pointer-events: none; }
/* Prototype's vertical multi-stop ramp: dark at the top for nav legibility,
   nearly clear through the middle so the skyline actually reads, dark again at
   the bottom where the H1, sub and CTAs sit. The previous horizontal 0.92→0.58
   wash drowned the photograph. */
.rv-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,16,12,0.86) 0%, rgba(20,16,12,0.52) 42%, rgba(20,16,12,0.10) 78%, rgba(20,16,12,0.05) 100%),
    linear-gradient(180deg, rgba(20,16,12,0.45) 0%, rgba(20,16,12,0) 30%, rgba(20,16,12,0) 62%, rgba(18,14,10,0.55) 100%);
}
/* Keep the container's own max-width: overriding it to 900px re-centred the box
   and pushed the H1 150px right of the shared left grid edge (and of the logo
   directly above it). Cap the CHILDREN instead — same pattern as .rv-finalcta. */
.rv-hero__inner { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 60px; }
.rv-hero__title { font-size: clamp(2.8rem, 7vw, 5.4rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1.0; max-width: 15ch; }
.rv-hero__sub { margin-top: 26px; max-width: 50ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 300; color: rgba(255,255,255,0.85); text-wrap: pretty; }
.rv-hero__cta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- page hero (interior) — designed background, no bare slab ---- */
.rv-page-hero { position: relative; overflow: hidden; padding-top: clamp(150px, 16vw, 210px); padding-bottom: clamp(64px, 8vw, 104px);
  background: radial-gradient(130% 150% at 12% 18%, #30323a 0%, var(--charcoal) 52%); }
.rv-page-hero::after { content: ""; position: absolute; left: max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter))); bottom: 0; width: min(120px, 16vw); height: 2px; background: var(--bronze); }
/* Optional hero photograph. The overlay is heavier than the homepage's because
   this text block is smaller and sits higher; it also keeps the H1 legible
   whatever image an editor swaps in. */
.rv-page-hero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-page-hero__overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20,17,14,0.93) 0%, rgba(20,17,14,0.80) 42%, rgba(20,17,14,0.44) 100%); }
/* phones: text spans the full width, so the image has to sit further back */
@media (max-width: 700px) {
  .rv-page-hero__overlay { background: linear-gradient(180deg, rgba(20,17,14,0.88) 0%, rgba(20,17,14,0.82) 55%, rgba(20,17,14,0.9) 100%); }
}
.rv-page-hero .rv-container { position: relative; z-index: 2; }
.rv-page-hero__mark { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); z-index: 0; height: 120%; width: auto; opacity: 0.05; pointer-events: none; }
.rv-page-hero__title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 300; letter-spacing: -0.035em; max-width: 20ch; }
.rv-page-hero__title--long { font-size: clamp(2.3rem, 4.6vw, 3.6rem); max-width: 26ch; }
.rv-page-hero__sub { margin-top: 22px; max-width: 50ch; color: var(--light-70); font-weight: 300; font-size: 1.15rem; text-wrap: pretty; }
.rv-breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 26px; }
.rv-breadcrumb a { display: inline-block; padding-block: 12px; padding-inline: 6px; margin-block: -4px; margin-inline: -6px; transition: color .2s var(--rv-ease); }
.rv-breadcrumb a:hover { color: var(--bronze-300); }
.rv-breadcrumb [aria-current] { color: rgba(255,255,255,0.85); }

/* ---- positioning ---- */
/* The pivotal word is set in italic bronze — the prototype's one typographic
   accent. Weight is inherited so it stays on the 300-weight display setting. */
.rv-hero__title em { font-style: italic; font-weight: inherit; color: var(--bronze-200); }

/* Positioning: headline left, body + pull quote right. Collapsing this to one
   column left the right half of a 1440px viewport empty. */
.rv-positioning .rv-display { max-width: 16ch; }
.rv-positioning__body .rv-lead { margin-top: 0; }
@media (min-width: 901px) {
  .rv-positioning__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  /* The two-column layout halves the width this heading had as a single column, but
     the .rv-display clamp (6vw, up to 4.6rem) was sized for the full container. At
     ~488px of column that fits about eight characters, so a 34-character line broke
     three ways and orphaned "buyers,". Sized to land on two balanced lines instead;
     text-wrap: balance (inherited from the h1–h6 rule) then picks the break.
     The 16ch cap below is left in place for the single-column layout under 901px —
     it is not what was binding here. */
  .rv-positioning .rv-display { font-size: clamp(2.1rem, 3.8vw, 3.2rem); max-width: none; }
}
.rv-positioning .rv-lead { margin-top: 28px; }

/* ---- cards: shared surface system ---- */
.rv-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
/* 24px side padding, not 30: a 3-up card at 1200px only has ~276px of text
   width, and every px of padding costs ~1.5 characters of measure. */
.rv-service-card { position: relative; display: flex; flex-direction: column; padding: 34px 24px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-surface);
  transition: border-color .2s var(--rv-ease), transform .2s var(--rv-ease), box-shadow .2s var(--rv-ease); }
/* whole card is the target (stretched link) and reacts like .rv-related__card —
   previously only the ~40px "Learn more" link was clickable and nothing hovered */
/* spec B2: -6px lift + shadow-lg, with the inner image easing to 1.06 over 1.2s */
.rv-service-card__media { margin: -34px -24px 24px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--offwhite); border-radius: var(--radius-surface) var(--radius-surface) 0 0; }
.rv-service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.rv-service-card:hover .rv-service-card__media img,
.rv-service-card:focus-within .rv-service-card__media img { transform: scale(1.06); }
.rv-service-card:hover, .rv-service-card:focus-within { border-color: var(--bronze); transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.rv-service-card:active { transform: translateY(0); }
.rv-service-card .rv-link { margin-top: auto; padding-top: 20px; }
.rv-service-card .rv-link::after { content: ""; position: absolute; inset: 0; }
.rv-service-card:hover .rv-link span { transform: translateX(4px); }
.rv-service-card__num { color: var(--bronze-ink); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; }
/* Where the card has an image the numeral sits on it, as a badge, rather than
   taking a line of its own above the title. */
.rv-service-card:has(.rv-service-card__media) { position: relative; }
.rv-service-card:has(.rv-service-card__media) .rv-service-card__num {
  position: absolute; top: 14px; left: 16px; z-index: 2; color: #fff;
  text-shadow: 0 1px 10px rgba(20, 16, 12, 0.55);
}
.rv-service-card__title { margin-top: 14px; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.rv-service-card__body { margin-top: 16px; color: var(--ink-70); font-weight: 400; font-size: 0.95rem; line-height: 1.65; text-wrap: pretty; }

/* ---- why ---- */
/* Why: a standing image beside a single-column numbered list. The one column is
   also what makes the scroll-linked dimming below legible — a reading line only
   exists when there is one column to read down. */
.rv-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) clamp(24px,3vw,40px); }
.rv-why__media { margin: 0; }
.rv-why__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-surface); }
@media (min-width: 901px) {
  .rv-why__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 84px); align-items: start; }
  .rv-why__media { position: sticky; top: 116px; }
  .rv-why__layout .rv-why__grid { grid-template-columns: 1fr; gap: 0; }
  .rv-why__layout .rv-why__item { padding-block: 26px 28px; }
  .rv-why__layout .rv-why__item:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 900px) {
  .rv-why__media { margin-bottom: clamp(28px, 4vw, 40px); }
}
.rv-why__item { border-top: 1px solid var(--hairline); padding-top: 22px; }
/* spec B3: scroll-linked emphasis. Only dims once JS confirms it is driving the
   highlight (.rv-js-why), so a no-JS or reduced-motion visitor sees all five
   points at full strength. */
/* The items are also members of a .rv-reveal-group, which owns opacity during
   entry. These selectors are deliberately deeper than the reveal rule so the
   highlight only takes over AFTER the group has revealed (.in). */
.rv-js-why .rv-reveal-group.in > .rv-why__item { opacity: 0.4; transition: opacity .45s var(--rv-ease); }
.rv-js-why .rv-reveal-group.in > .rv-why__item.is-focus { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rv-js-why .rv-reveal-group.in > .rv-why__item { opacity: 1; }
}
/* Dimming tracks a single reading line. It is correct for the one-column list, but
   would fade 5 of 6 points at once if the list ever falls back to a multi-column
   grid — so it is switched off wherever more than one column is showing. */
@media (min-width: 901px) {
  .rv-why:not(:has(.rv-why__layout)) .rv-js-why .rv-reveal-group.in > .rv-why__item,
  .rv-js-why .rv-why:not(:has(.rv-why__media)) .rv-reveal-group.in > .rv-why__item { opacity: 1; }
}
.rv-why__num { color: var(--bronze-ink); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; }
.rv-why__title { margin-top: 12px; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.rv-why__body { margin-top: 12px; color: var(--ink-70); font-weight: 400; font-size: 0.95rem; line-height: 1.65; text-wrap: pretty; }

/* ---- process walkthrough ---- */
/* spec B4: progress rail that fills sea-blue as stages advance */
.rv-process__rail { position: relative; height: 2px; background: var(--hairline-light); }
.rv-process__railfill { position: absolute; inset: 0 auto 0 0; background: var(--teal); transition: width .6s var(--rv-ease); }
@media (prefers-reduced-motion: reduce) { .rv-process__railfill { transition: none; } }
.rv-process__railwrap { position: relative; }
.rv-process__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
@media (min-width: 901px) {
  /* Centred head, and the rail runs behind the numerals rather than above them.
     Each numeral carries the section ground so the line appears to pass behind it. */
  /* the head has its own max-width, so it needs centring in the container too —
     text-align alone just centres inside a box that is still sitting left */
  .rv-process .rv-section__head { text-align: center; margin-inline: auto; }
  .rv-process .rv-section__head .rv-section__intro { margin-inline: auto; max-width: 46ch; }
  .rv-process__rail { position: absolute; left: 0; right: 0; top: 39px; z-index: 0; }
  .rv-process__tabs { position: relative; z-index: 1; flex-wrap: nowrap; gap: 0; }
  .rv-process__tab {
    align-items: center; text-align: center; padding: 22px 8px;
    border-top: 0; margin-top: 0;
  }
  .rv-process__tabnum { background: var(--charcoal); }
}
.rv-process__tab {
  flex: 1 1 160px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 22px 18px; background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px;
  color: var(--light-50); text-align: left; transition: color .2s var(--rv-ease), border-color .2s var(--rv-ease), background .2s var(--rv-ease);
}
.rv-process__tab:hover { color: rgba(255,255,255,0.85); }
.rv-process__tab:active { background: rgba(255,255,255,0.06); }
.rv-process__tab.is-active { color: #fff; }
/* spec B4: the stage numeral is the "dot" — it fills bronze when active */
.rv-process__tabnum { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline-light);
  transition: background .24s var(--rv-ease), color .24s var(--rv-ease), border-color .24s var(--rv-ease), box-shadow .24s var(--rv-ease); }
.rv-process__tab.is-active .rv-process__tabnum {
  background: var(--bronze); border-color: var(--bronze); color: #1b1c20;
  box-shadow: 0 8px 20px rgba(182,151,109,0.35);
}
.rv-process__tablabel { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.rv-process__panels { min-height: clamp(300px, 34vw, 420px); }
.rv-process__panel { display: none; animation: rv-fade .3s var(--rv-ease); }
/* align-items:start, not center — panels have different heights, and centring
   makes the "01" numeral and title slide vertically as the user clicks tabs. */
.rv-process__panel.is-active { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.rv-process__panel.is-active:not(:has(.rv-process__media)) { grid-template-columns: 1fr; }
@keyframes rv-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rv-process__panelnum { color: var(--bronze-300); font-weight: 600; letter-spacing: 0.1em; }
.rv-process__paneltitle { margin-top: 10px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; letter-spacing: -0.02em; }
.rv-process__panelbody { margin-top: 18px; max-width: 46ch; color: var(--light-70); font-weight: 400; text-wrap: pretty; }
.rv-process__bullets { margin-top: 24px; display: grid; gap: 12px; max-width: 44ch; }
.rv-process__bullets li { display: flex; gap: 12px; color: rgba(255,255,255,0.85); font-weight: 400; }
.rv-process__bullets span { color: var(--bronze); }
.rv-process__media { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-surface); overflow: hidden; background: rgba(255,255,255,0.04); }
.rv-process__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.rv-process__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(35,37,43,0.35), rgba(35,37,43,0) 60%); }

/* ---- stats band ---- */
.rv-band { position: relative; overflow: hidden; }
.rv-band__bg {
  position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  opacity: 0.22;
}
.rv-band--media > .rv-container { position: relative; z-index: 1; }
.rv-band__head { max-width: 800px; margin-bottom: clamp(40px, 5vw, 64px); }
/* The band carries the market claim, so it takes the one full-bleed image below the
   hero. Dark ground means contrast comes from the ground, not the photograph — any
   image stays legible, which is exactly what fails on a light ground. */
.rv-section--dark .rv-stats { border-top-color: var(--hairline-light); }
.rv-section--dark .rv-stat__value { color: #fff; }
.rv-section--dark .rv-stat__affix { color: var(--bronze-300); }
.rv-section--dark .rv-stat__label,
.rv-section--dark .rv-stats__caption { color: var(--light-70); }
.rv-section--dark .rv-stats__caption a { color: var(--bronze-300); }
.rv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--hairline); padding-top: 44px; }
.rv-stat__value { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; color: var(--charcoal); font-variant-numeric: tabular-nums; }
/* spec B5: affixes stay static, in bronze, at a smaller optical size */
.rv-stat__affix { color: var(--bronze-ink); font-size: 0.62em; font-weight: 400; letter-spacing: 0; }
.rv-stat__label { margin-top: 10px; color: var(--ink-70); font-weight: 400; font-size: 0.98rem; }
.rv-stats__caption { margin-top: 28px; font-size: 0.82rem; color: var(--ink-60); }
.rv-stats__caption a {
  /* inline-block + vertical padding lifts the hit area to WCAG 2.2 AA
     (SC 2.5.8, 24x24 min) without changing how the caption reads. */
  display: inline-block;
  padding-block: 5px;
  text-decoration: underline; text-underline-offset: 3px;
  color: var(--ink-70); transition: color .2s var(--rv-ease);
}
.rv-stats__caption a:hover { color: var(--bronze-ink); }

/* ---- testimonials — editorial, no avatar disc ---- */
.rv-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); }
.rv-testimonial { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-surface); padding: 34px 24px; display: flex; flex-direction: column; gap: 24px; }
.rv-testimonial::before { content: "\201C"; font-size: 3.4rem; line-height: 0.6; color: var(--bronze); font-weight: 400; height: 1.4rem; }
.rv-testimonial blockquote { margin: 0; font-weight: 300; font-size: 1.02rem; line-height: 1.65; color: var(--ink); letter-spacing: -0.01em; text-wrap: pretty; }
.rv-testimonial figcaption { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; }
.rv-testimonial__name { font-weight: 500; font-size: 0.98rem; }
.rv-testimonial__place { color: var(--ink-60); font-size: 0.86rem; }

/* ---- team ---- */
.rv-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.rv-team__photo { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-surface); background: var(--offwhite); }
.rv-team__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--rv-ease); }
.rv-team__card:hover .rv-team__photo img, .rv-team__card:focus-within .rv-team__photo img { transform: scale(1.03); }
.rv-team__name { margin-top: 20px; font-size: 1.3rem; font-weight: 500; }
.rv-team__role { margin-top: 4px; color: var(--bronze-ink); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.rv-team__more { margin-top: clamp(28px, 3vw, 40px); }
.rv-team__bio { margin-top: 14px; color: var(--ink-70); font-weight: 400; font-size: 0.95rem; line-height: 1.65; text-wrap: pretty; }

.rv-team__li { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding-block: 12px;
  font-size: 0.82rem; font-weight: 500; color: var(--bronze-ink); transition: color .2s var(--rv-ease); }
.rv-team__li:hover, .rv-team__li:focus-visible { color: var(--ink); }
.rv-team__li svg { flex: none; }

/* ---- credentials ---- */
.rv-cred__heading { margin-bottom: 24px; max-width: 20ch; }
.rv-cred__body { max-width: 58ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 300; color: rgba(255,255,255,0.86); line-height: 1.7; text-wrap: pretty; }
.rv-cred__chips { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.rv-cred__chips li { padding: 9px 16px; border: 1px solid var(--hairline-light); border-radius: 100px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82); }

/* ---- final CTA (children capped, container full — keeps the shared left edge) ---- */
/* The mark bleeds off the right edge as a watermark — large, low contrast, and
   pointer-events:none so it never intercepts the button. */
.rv-finalcta { position: relative; overflow: hidden; }
.rv-finalcta::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  right: -8%; top: 50%; transform: translateY(-50%);
  width: min(520px, 46%); aspect-ratio: 1;
  background: url("../img/revest-icon-gold.svg") no-repeat center / contain;
  opacity: 0.10;
}
.rv-finalcta > .rv-container { position: relative; z-index: 1; }
@media (max-width: 700px) { .rv-finalcta::after { right: -22%; opacity: 0.07; } }
.rv-finalcta__inner { max-width: var(--container); }
.rv-finalcta__inner > * { max-width: 780px; }
.rv-finalcta .rv-lead { margin-block: 24px 34px; }

/* ---- pillars (service) ---- */
.rv-pillar-groups { display: grid; gap: clamp(40px, 5vw, 64px); }
/* the head is a grid item here, so its own margin stacked with the grid gap —
   128px under the heading vs 64px between groups, splitting the section in half */
.rv-pillar-groups > .rv-section__head { margin-bottom: 0; }
.rv-pillar-group__title { color: var(--bronze-ink); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 26px; font-size: 0.95rem; text-transform: uppercase; }
.rv-pillars { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.rv-pillars:has(> .rv-pillar:only-child) { grid-template-columns: minmax(0, 720px); }
/* Balanced counts: 4 cards → 2×2; 5 cards → 6-track grid with centered last row */
@media (min-width: 901px) {
  .rv-pillars:has(> .rv-pillar:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .rv-pillars:has(> .rv-pillar:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .rv-pillars:has(> .rv-pillar:nth-child(5):last-child) > .rv-pillar { grid-column: span 2; }
  .rv-pillars:has(> .rv-pillar:nth-child(5):last-child) > .rv-pillar:nth-child(4) { grid-column: 2 / 4; }
}
/* spec C1: lift + a soft radial bronze wash fading in from the top */
.rv-pillar { position: relative; overflow: hidden; padding: 34px 24px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-surface);
  transition: transform .24s var(--rv-ease), box-shadow .24s var(--rv-ease), border-color .24s var(--rv-ease); }
.rv-pillar-wash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(182,151,109,0.22) 0%, rgba(182,151,109,0) 60%);
  transition: opacity .24s var(--rv-ease);
}
.rv-pillar > * { position: relative; }
.rv-pillar:hover, .rv-pillar:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(182,151,109,0.45); }
.rv-pillar:hover .rv-pillar-wash, .rv-pillar:focus-within .rv-pillar-wash { opacity: 1; }
/* Line icon above the title. Stroke-only bronze, matching the capabilities
   ticks and the landing-page set — a filled icon or a disc behind it would be
   the one piece of the system that shouts. */
.rv-pillar__icon { display: block; width: 34px; height: 34px; margin-bottom: 18px; }
.rv-pillar__title { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.rv-pillar__body { margin-top: 12px; color: var(--ink-70); font-weight: 400; font-size: 0.95rem; line-height: 1.65; text-wrap: pretty; }

/* ---- capabilities ---- */
/* spec C3: architectural edge rules, hidden on narrow screens */
.rv-caps-section { position: relative; }
/* Structural rules. Two forms, one idea: a hairline that fades out at both ends, so
   it reads as a seam in the page rather than a border drawn around a box. A hard
   edge-to-edge line would cut the page into slabs; this articulates the join without
   closing it. --divider (a plain border-top) stays available where a hard edge is
   actually wanted. */
/* the vrule is absolutely positioned — its section has to be the containing block */
.rv-why, .rv-team, .rv-caps-section { position: relative; }
.rv-vrule { position: absolute; top: 8%; bottom: 8%; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(182,151,109,0) 0%, rgba(182,151,109,0.45) 50%, rgba(182,151,109,0) 100%); }

/* Horizontal seam between sections that share a ground, where the colour change
   that normally marks a transition is absent or too faint to register. Inset to the
   gutter and fading at both ends, so it never reads as a table rule. */
/* The ground colour is carried as a token rather than a second `background`
   declaration. LiteSpeed's CSS minifier merges rules that set the same property on
   related selectors and keeps only the last value — which silently gave the
   light-ground seam the dark-ground gradient, making it invisible on white. One
   declaration, two token values, nothing for the minifier to collapse. */
.rv-section--seam {
  position: relative;
  --seam: rgba(35, 37, 43, 0.13);
  --seam-fade: rgba(35, 37, 43, 0);
}
.rv-section--dark.rv-section--seam {
  --seam: rgba(255, 255, 255, 0.16);
  --seam-fade: rgba(255, 255, 255, 0);
}
.rv-section--seam::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    var(--seam-fade) 0%, var(--seam) 22%, var(--seam) 78%, var(--seam-fade) 100%);
}
/* A seam marks a join, so it is pointless on a section that opens a viewport. */
@media (max-width: 700px) { .rv-section--seam::before { left: 20px; right: 20px; } }
.rv-vrule--left { left: max(24px, calc(50% - var(--container) / 2 - 40px)); }
.rv-vrule--right { right: max(24px, calc(50% - var(--container) / 2 - 40px)); }
@media (max-width: 900px) { .rv-vrule { display: none; } }

.rv-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.rv-cap { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--hairline); font-weight: 400; }
/* line icon, not a filled dot (spec C2) */
.rv-cap__icon { width: 22px; height: 22px; flex: none; color: var(--bronze-ink); margin-top: 1px; }

/* ---- detail blocks (service template) ----
   Editorial register: hairline-topped blocks with a bronze accent segment,
   echoing .rv-why__item and the .rv-page-hero bronze rule. Deliberately NOT
   cards — the pillars section already owns the card treatment on this template
   and repeating it reads as the same section twice. */
/* In-detail blocks are a Q&A list, not a grid: one column, each title a trigger
   for its own answer. The previous 2-up grid of open prose put ~360 words on
   screen at once with nothing to scan by. Height animates via grid-template-rows
   (the inner wrapper clips), so there is no fixed max-height to guess. */
.rv-detail { display: grid; gap: 0; }
.rv-detail__item { position: relative; border-top: 1px solid var(--hairline); }
/* short bronze segment overlaying the hairline — the system's accent mark */
.rv-detail__item::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--bronze);
}
.rv-detail__heading { margin: 0; }
.rv-detail__head {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  background: none; border: 0; padding: 26px 0 0; text-align: left;
  font: inherit; color: inherit; letter-spacing: inherit;
}
/* Wide enough that a question fits on one line at every width the container
   allows; the cap only exists to stop a long title running the full 1200px. */
.rv-detail__headtext { max-width: 50ch; text-wrap: balance; }
.rv-detail__chev { flex: 0 0 auto; color: var(--bronze-ink); font-size: 1.5rem; font-weight: 300; line-height: 1.2; transition: transform .45s var(--rv-ease); }
.rv-detail--js .rv-detail__head[aria-expanded="true"] .rv-detail__chev { transform: rotate(45deg); }
/* No JS: .rv-detail--js is never added, so every answer renders open. */
.rv-detail__bodywrap { padding-bottom: 28px; }
.rv-detail--js .rv-detail__bodywrap {
  display: grid; grid-template-rows: 0fr; opacity: 0; padding-bottom: 0;
  transition: grid-template-rows .55s cubic-bezier(0.45,0,0.2,1), opacity .55s cubic-bezier(0.45,0,0.2,1), padding-bottom .55s cubic-bezier(0.45,0,0.2,1);
}
.rv-detail--js .rv-detail__bodywrap.is-open { grid-template-rows: 1fr; opacity: 1; padding-bottom: 28px; }
@media (prefers-reduced-motion: reduce) { .rv-detail--js .rv-detail__bodywrap { transition: none; } }
/* The spacing above the answer is the paragraph's margin, NOT padding on this
   element. Padding sits outside the content box, so a collapsed row still
   rendered 14px tall — four dead bands down the section. A margin is inside
   the clipped box and collapses to nothing with it. */
.rv-detail__bodyinner { overflow: hidden; min-height: 0; }
.rv-detail__bodyinner > :first-child { margin-top: 14px; }
.rv-detail__body { color: var(--ink-70); font-size: 1.02rem; line-height: 1.75; max-width: 62ch; text-wrap: pretty; }
.rv-detail__body + .rv-detail__body { margin-top: 16px; }
.rv-section--muted .rv-detail__item { border-top-color: rgba(35,37,43,0.16); }

/* ---- settlement block ---- */
.rv-settlement__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
/* same role as .rv-section__intro — match it, don't render a second style */
.rv-settlement__intro { margin-top: 18px; max-width: 50ch; color: var(--light-70); font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.7; text-wrap: pretty; }
/* row-gap 0: the items' border-top rules must read as contiguous dividers when
   the grid collapses to 2 or 1 column */
.rv-settlement__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.rv-settlement__item { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--hairline-light); color: rgba(255,255,255,0.88); font-weight: 400; }
.rv-settlement__mark { width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); transform: translateY(-2px); }

/* ---- split (About) — spec D1: light Problem | dark Commitment, divided down
   the middle, boundary easing toward whichever side is hovered ---- */
.rv-split { position: relative; overflow: hidden; }
.rv-split__ground { position: absolute; inset: 0; z-index: 0; background: var(--charcoal); }
.rv-split__ground::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--offwhite);
  transition: width 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
/* The travel is deliberately smaller than the prototype's 54%/46%: the columns
   themselves do not move, so a boundary past ~52% would slide dark ground under
   the light-on-dark Commitment text. This keeps the shift inside the gutter. */
.rv-split:has(.rv-split__col--problem:hover) .rv-split__ground::before { width: 51.6%; }
.rv-split:has(.rv-split__col--commitment:hover) .rv-split__ground::before { width: 48.4%; }
.rv-split .rv-container { position: relative; z-index: 1; }
.rv-split__col--commitment { color: rgba(255,255,255,0.88); }
.rv-split__col--commitment .rv-h2, .rv-split__col--commitment .rv-split__head { color: #fff; }
.rv-split__col--commitment .rv-split__intro { color: var(--light-70); }
.rv-split__col--commitment .rv-split__list li { border-top-color: var(--hairline-light); }
.rv-split__col--commitment .rv-split__chev { color: var(--bronze-300); }
.rv-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.rv-split__heading { margin: 0; }
.rv-split__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; letter-spacing: inherit; }
/* spec D2: a "+" that rotates into a cross */
.rv-split__chev { display: none; color: var(--bronze); transition: transform .45s var(--rv-ease); font-size: 0.7em; font-weight: 300; line-height: 1; }
.rv-split__intro { margin-top: 18px; max-width: 50ch; color: var(--ink-70); font-weight: 400; text-wrap: pretty; }
.rv-split__list { margin-top: 22px; display: grid; gap: 2px; }
.rv-split__list li { padding: 16px 0; border-top: 1px solid var(--hairline); font-weight: 400; }
.rv-split__col--commitment .rv-split__list li::before { content: "→ "; color: var(--bronze-ink); }

/* MISSION (About) — the page's one statement moment. Left-aligned at .rv-prose
   measure on plain white it read as a stray heading: the container runs 1200px
   and the text stopped at 58ch, so most of the row was empty and nothing marked
   the block as the mission at all. Centred, given an eyebrow, and the statement
   itself promoted from .rv-lead to pull-quote scale in full ink — the sentence
   should carry the section, not the strapline above it.
   Stays light deliberately: .rv-split immediately above ends on a dark right
   half, so a dark band here would fuse with it into one unreadable slab. */
.rv-mission__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.rv-mission__headline { margin-inline: auto; max-width: 20ch; }
/* Matches the hero H1's italic-bronze emphasis, with the token swapped for the
   ground: --bronze-200 is tuned for the dark hero and measures ~1.5:1 on white,
   so the light-surface text bronze is the correct equivalent here. */
.rv-mission__headline em { font-style: italic; font-weight: inherit; color: var(--bronze-ink); }
.rv-mission__rule { display: block; width: 48px; height: 2px; margin: clamp(28px, 3.2vw, 38px) auto 0; background: var(--bronze); }
.rv-mission__body {
  margin: clamp(28px, 3.2vw, 38px) auto 0; max-width: 46ch;
  font-size: clamp(1.18rem, 1.9vw, 1.5rem); font-weight: 300; line-height: 1.55;
  letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty;
}
@media (max-width: 699px) { .rv-mission__headline { max-width: none; } }

/* ---- lead form ---- */
.rv-form__inner { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
/* :not(.rv-eyebrow) — this selector outranks .rv-eyebrow, so without it the
   form's "Enquire" label rendered 400-weight ink-70 instead of 600 bronze. */
.rv-form__intro p:not(.rv-eyebrow) { margin-top: 16px; color: var(--ink-70); font-weight: 400; text-wrap: pretty; }
/* spec C5: single column up to 1024px — two columns only on wide desktop, so
   fields are never squashed on phones or portrait tablets. */
.rv-form__body { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 1025px) { .rv-form__body { grid-template-columns: 1fr 1fr; } }
.rv-field { display: flex; flex-direction: column; gap: 8px; }
.rv-field--full { grid-column: 1 / -1; }
.rv-field label { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-70); }
.rv-field .rv-req { color: var(--bronze-ink); margin-left: 2px; }
.rv-field input, .rv-field select, .rv-field textarea {
  font-family: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control); background: #fff; color: var(--ink); transition: border-color .2s var(--rv-ease), box-shadow .2s var(--rv-ease);
}
.rv-field input:hover, .rv-field select:hover, .rv-field textarea:hover { border-color: rgba(35,37,43,0.65); }
.rv-field input:focus-visible, .rv-field select:focus-visible, .rv-field textarea:focus-visible {
  outline: 2px solid var(--charcoal); outline-offset: 1px; border-color: var(--bronze-ink); box-shadow: 0 0 0 3px rgba(136,104,53,0.35);
}
.rv-field input.is-invalid, .rv-field select.is-invalid, .rv-field textarea.is-invalid { border-color: #a83232; }
.rv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* row overrides the flex-direction:column inherited from .rv-field */
.rv-form__actions { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 18px; }
.rv-form__error { color: #a83232; font-size: 0.9rem; }
.rv-field__error { color: #a83232; font-size: 0.82rem; margin-top: 2px; }
.rv-main:focus { outline: none; }
.rv-form__success { padding: 40px; background: var(--offwhite); border-radius: var(--radius-surface); }
.rv-form__success h3 { font-size: 1.4rem; font-weight: 500; }
.rv-form__success p { margin-top: 10px; color: var(--ink-70); font-weight: 400; }

/* ---- service intro media split ---- */
.rv-intro-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.rv-intro-split__media { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-surface); overflow: hidden; background: var(--offwhite); }
.rv-intro-split__media img { width: 100%; height: 100%; object-fit: cover; }
.rv-intro-split__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(35,37,43,0.18), rgba(35,37,43,0) 60%); }

/* ---- contact channels ---- */
/* Closing statement inside the form's intro column — what used to be a separate
   CTA section on the service template. Quiet by design: it is reassurance beside
   the fields, not a second headline competing with the form's own. */
.rv-form__closing { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(24px, 2.6vw, 32px); border-top: 1px solid var(--hairline); }
.rv-form__closing p.rv-form__closingline {
  margin-top: 0; font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 300;
  letter-spacing: -0.015em; line-height: 1.4; color: var(--ink); text-wrap: balance;
}
.rv-form__closing p.rv-form__closingbody { margin-top: 12px; font-size: 0.95rem; }

/* ---- Contact: what happens next ----
   Three static statements. Held the .rv-detail classes until that became an
   accordion, at which point this section lost every gap it had. */
.rv-steps { display: grid; gap: clamp(34px, 4vw, 54px); }
.rv-steps__item { position: relative; border-top: 1px solid var(--hairline); padding-top: 26px; }
.rv-steps__item::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--bronze);
}
.rv-steps__item .rv-h3 { margin-bottom: 14px; max-width: 24ch; }
.rv-steps__body { color: var(--ink-70); font-size: 1.02rem; line-height: 1.75; max-width: 54ch; text-wrap: pretty; }
.rv-section--muted .rv-steps__item { border-top-color: rgba(35,37,43,0.16); }
@media (min-width: 901px) {
  .rv-steps { grid-template-columns: repeat(2, 1fr); column-gap: clamp(40px, 5vw, 72px); }
  /* a lone trailing block would leave a right-hand hole — keep it column-width */
  .rv-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 36px); }
}

.rv-channels-wrap { margin-top: clamp(32px, 4vw, 56px); }
.rv-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.rv-channel { display: flex; flex-direction: row; align-items: center; gap: 16px; min-height: 76px; padding: 20px 24px; border: 1px solid var(--hairline); border-radius: var(--radius-surface); transition: border-color .2s var(--rv-ease), transform .2s var(--rv-ease); }
.rv-channel__icon { flex: 0 0 auto; width: 28px; height: 28px; }
.rv-channel__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rv-channel:hover, .rv-channel:focus-visible { border-color: var(--bronze); transform: translateY(-2px); }
.rv-channel:active { transform: translateY(0); }
.rv-channel__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze-ink); }
.rv-channel__value { font-weight: 500; }

.rv-channels__meta { margin-top: 20px; font-size: 0.9rem; color: var(--ink-60); line-height: 1.7; max-width: 52ch; }

/* ---- related / cross-links ---- */
.rv-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; }
/* spec C4: a downloadable guide reads differently from a cross-link */
.rv-related__tag { display: inline-block; margin-bottom: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-ink); }
.rv-related__note { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--ink-60); }
/* spec C4 mobile: horizontal scroll-snap carousel, 84% cards, no scrollbar */
@media (max-width: 820px) {
  .rv-related {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    /* Same snapport correction as the card rails below: without it the browser
       scrolls the rail by its own start padding to satisfy scroll-snap-align,
       putting card 01 flush against the screen edge. */
    scroll-padding-inline: var(--gutter);
  }
  .rv-related::-webkit-scrollbar { display: none; }
  .rv-related__card { flex: 0 0 84%; scroll-snap-align: start; }
}
.rv-related__card { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 24px 26px; border: 1px solid var(--hairline); border-radius: var(--radius-surface); transition: border-color .2s var(--rv-ease), transform .2s var(--rv-ease); }
.rv-related__card:hover, .rv-related__card:focus-visible { border-color: var(--bronze); transform: translateY(-2px); }
.rv-related__card:active { transform: translateY(0); border-color: var(--bronze); }
.rv-related__title { font-weight: 500; }
.rv-related__card span[aria-hidden] { color: var(--bronze-ink); }

/* FURTHER READING — an article, not another page.
   The related row above is flat pills because it is navigation between service
   pages. This carries a thumbnail, a topic, a byline and a date because a
   reader deciding whether to click needs to know they are leaving for editorial
   content. Same signals the Insights index uses, so the two read as one system. */
/* Narrower than the service grid below it on purpose. A standfirst set across
   the full container runs past 100 characters a line; capped here it lands near
   65, and the narrower column is a second signal that this is editorial rather
   than another service card. The header caps with it so the Insights link sits
   flush with the card's right edge. */
.rv-further__head { max-width: 880px; margin-bottom: clamp(20px, 2.5vw, 32px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.rv-further__all { white-space: nowrap; }
.rv-further { max-width: 880px; display: grid; gap: 16px; }
.rv-further__item { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 30px); padding: 18px 26px 18px 18px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-surface); transition: border-color .2s var(--rv-ease), transform .2s var(--rv-ease), box-shadow .2s var(--rv-ease); }
.rv-further__item:hover, .rv-further__item:focus-visible { border-color: rgba(182,151,109,0.55); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.rv-further__item:active { transform: translateY(0); }
.rv-further__media { display: block; flex: 0 0 auto; width: 200px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--radius-surface) - 6px); background: var(--offwhite); }
.rv-further__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.rv-further__item:hover .rv-further__media img { transform: scale(1.04); }
.rv-further__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rv-further__tag { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-ink); }
/* Clamped so card height stays predictable whatever the next article's headline
   and standfirst run to — this template outlives the three posts it was built
   against, and a five-line standfirst would wreck the row. */
.rv-further__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 1.12rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; text-wrap: pretty; }
.rv-further__stand { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink-70); font-size: 0.95rem; line-height: 1.6; text-wrap: pretty; }
.rv-further__meta { display: block; font-size: 0.82rem; color: var(--ink-60); }
.rv-further__go { flex: 0 0 auto; margin-left: auto; color: var(--bronze-ink); }

/* Further reading and Related services are one decision, not two. At full
   section rhythm 239px of empty page sat between them. Only tightened for that
   specific pairing — standalone on a content page it keeps normal spacing. */
.rv-section--further:has(+ .rv-section--divider) { padding-bottom: clamp(28px, 3vw, 40px); }
.rv-section--further + .rv-section--divider { padding-top: clamp(36px, 4vw, 56px); }

/* Phone: 200px of thumbnail plus text in ~340px is neither. Stack instead, and
   drop the arrow — the whole row is the tap target. */
@media (max-width: 699px) {
    .rv-further__item { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 18px 20px; }
    .rv-further__media { width: 100%; aspect-ratio: 16 / 9; }
    .rv-further__go { display: none; }
}

/* ---- footer ---- */
.rv-footer { background: var(--charcoal); color: rgba(255,255,255,0.72); padding-block: clamp(56px, 7vw, 88px) 40px; }
.rv-footer__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: clamp(32px, 5vw, 72px); }
.rv-footer__brand img { height: 46px; width: auto; }
.rv-footer__tagline { margin-top: 20px; max-width: 36ch; font-weight: 400; font-size: 0.96rem; color: rgba(255,255,255,0.7); }
/* Three columns, not four. Four left ~133px each and broke "Buyer's
   Consultancy", "Payment Solutions" and "Additional Services" onto two lines. */
.rv-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rv-footer__col h3 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 16px; }
.rv-footer__col a { display: block; padding: 6px 0; font-size: 0.92rem; font-weight: 400; color: rgba(255,255,255,0.72); transition: color .2s var(--rv-ease); }
.rv-footer__col a:hover { color: var(--bronze-300); }
/* Legal disclosure. Styled as a peer of the links above it rather than a second
   heading, so it reads as one more item in the column until it is opened.
   NOT .rv-footer__legal — that class already dresses the copyright line at the
   foot of the page, so the two collided: the disclosure inherited the copyright
   line's 0.8125rem type and 20px margin, and the copyright line inherited the
   disclosure's spacing. */
.rv-footer__disclose { margin-top: 6px; }
.rv-footer__disclose > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 0; font-size: 0.92rem; color: rgba(255,255,255,0.72);
  transition: color .2s var(--rv-ease);
}
.rv-footer__disclose > summary::-webkit-details-marker { display: none; }
.rv-footer__disclose > summary::after {
  content: "\203A"; font-size: 1.05em; line-height: 1; color: var(--bronze-300);
  transition: transform .25s var(--rv-ease);
}
.rv-footer__disclose[open] > summary::after { transform: rotate(90deg); }
.rv-footer__disclose > summary:hover { color: var(--bronze-300); }
.rv-footer__disclose > summary:focus-visible { outline: 2px solid var(--bronze-300); outline-offset: 3px; border-radius: 2px; }
.rv-footer__disclose > a { padding-left: 14px; border-left: 1px solid var(--hairline-light); margin-left: 2px; }
/* spec A7: icon row is a phone-only affordance — on desktop the Connect column
   already carries these links, so showing both would duplicate them. */
.rv-footer__social { display: none; }
.rv-footer__strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hairline-light); }
.rv-footer__strip li { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.rv-footer__strip li:not(:last-child)::after { content: "·"; margin-left: 10px; }
/* Runs the container width rather than a 56ch column. Long measure is a problem
   for sustained reading, not for a three-line legal note — and the narrow version
   left most of the footer row empty beside it. */
.rv-footer__disclosure { margin-top: 24px; font-size: 0.8125rem; font-weight: 400; color: rgba(255,255,255,0.68); line-height: 1.7; }
.rv-footer__legal { margin-top: 20px; font-size: 0.8125rem; color: rgba(255,255,255,0.66); }

/* ============================================================
   Responsive — 3-col > 2-col (tablet) > 1-col (phone)
   ============================================================ */
/* 2-up starts at 700, not 601: at 601px a 3-up-turned-2-up card leaves ~196px of
   text (≈30 characters per line), which is below the readable floor. 601–699px
   takes the single-column phone treatment instead. */
@media (min-width: 700px) and (max-width: 900px) {
  .rv-services__grid, .rv-why__grid, .rv-testimonials__grid,
  .rv-team__grid, .rv-settlement__grid { grid-template-columns: repeat(2, 1fr); }
  /* Stats: keep 3-up (short numerals stay legible) rather than a 2+1 orphan. */
  /* Center a lone trailing card instead of leaving a right-hand hole. */
  .rv-services__grid > :last-child:nth-child(odd),
  .rv-testimonials__grid > :last-child:nth-child(odd),
  .rv-team__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 18px); margin-inline: auto; }
  /* keep 'AED 252B' from wrapping in narrow tablet columns */
  .rv-stat__value { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  /* form keeps 2 columns on tablet — plenty of width at 700-900px */
}

@media (max-width: 900px) {
  .rv-header__nav { display: none; }
  .rv-header__toggle { display: flex; }
  /* spec A3: full-height panel sliding in from the RIGHT. Transform-based so it
     eases out as well as in (a display toggle can only animate one way). */
  .rv-mobile-nav {
    /* display MUST be re-declared: the desktop base rule `.rv-mobile-nav{display:none}`
       lives later in this file and would otherwise win at equal specificity. */
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 0; right: 0; z-index: 5;
    width: min(360px, 86vw); height: 100dvh;
    padding: 28px clamp(24px, 6vw, 40px);
    background: var(--charcoal); box-shadow: -20px 0 60px rgba(10,8,6,0.5);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    /* declared here as well as in the critical block: without a start transform
       the panel has nothing to slide FROM */
    transform: translateX(100%); visibility: hidden;
    transition: transform .5s cubic-bezier(.65,0,.35,1), visibility 0s linear .5s;
  }
  .rv-mobile-nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .rv-mobile-nav__brand { display: block; margin-bottom: 26px; }
  .rv-mobile-nav__brand img { height: 54px; width: auto; }
  .rv-mobile-nav__label { margin-top: 18px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-300); }
  /* same specificity trap as the desktop nav: without :not(.rv-btn) the drawer's
     CTA rendered white-on-bronze (~2.3:1) with no horizontal padding */
  .rv-mobile-nav a:not(.rv-btn) { color: rgba(255,255,255,0.9); padding: 13px 0; font-size: 1rem; transition: color .2s var(--rv-ease); }
  .rv-mobile-nav .rv-btn { margin-top: 12px; justify-content: center; }
  .rv-header.is-open { background: rgba(35,37,43,0.98); }
  /* The drawer only covers the top of the viewport; dim everything below it so
     the open menu reads as a modal layer rather than a floating panel.
     Anchored to the header (fixed), NOT to the drawer — the drawer is
     overflow-y:auto, which would clip the scrim and add ~800px of phantom
     scroll inside the menu. z-index:-1 keeps it behind the header's own
     background and the drawer, but above page content (the header is a
     z-index:100 stacking context). */
  /* spec A3 overlay: dims and blurs the page behind the drawer. Tapping it closes
     the menu (@click.outside on the nav), so it must accept pointer events. */
  .rv-header::after {
    content: ""; position: fixed; inset: 0; z-index: 4;
    background: rgba(12,9,6,0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--rv-ease), visibility 0s linear .4s;
  }
  .rv-header.is-open::after { opacity: 1; visibility: visible; transition-delay: 0s; }

  .rv-caps { grid-template-columns: 1fr; }
  .rv-form__inner { grid-template-columns: 1fr; }
  .rv-footer__top { grid-template-columns: 1fr; }
  .rv-intro-split { grid-template-columns: 1fr; }
  .rv-intro-split__media { aspect-ratio: 16 / 9; order: -1; }
  .rv-footer__cols { grid-template-columns: repeat(2, 1fr); }
  .rv-footer__col a { padding-block: 11px; }

  /* Process: tabs stack, panel becomes single column with the image above.
     Number and label share one line so five tabs cost ~180px, not ~365px. */
  /* All five stages visible at once, tapped to select. They were a centre-
     snapping swipe rail: it showed three numerals at a time, left half a screen
     of empty space beside stage 01, and gave no signal that 04 and 05 existed.
     Five 34px numerals fit a 375px viewport with room to spare, so there is
     nothing to scroll and nothing to discover. onRailScroll() already no-ops
     when the rail does not overflow, so the swipe handler simply stops firing. */
  .rv-process__tabs {
    flex-direction: row; flex-wrap: nowrap; gap: 4px;
    justify-content: space-between;
    overflow: visible; padding-inline: 0;
  }
  .rv-process__tab {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; align-items: center; gap: 0; padding: 16px 2px;
    border: 0; text-align: center;
  }
  .rv-process__tablabel { display: none; } /* the active stage's title is in the panel */
  .rv-process__panel.is-active { grid-template-columns: 1fr; }
  .rv-process__media { aspect-ratio: 16 / 9; order: -1; }
  .rv-process__panels { min-height: 0; }

  /* About split → accordion */
  .rv-split__grid { grid-template-columns: 1fr; gap: 0; }
  .rv-split__col { border-top: 1px solid var(--hairline); }
  /* spec D2: Problem band on light ground, Commitment band on charcoal.
     Negative gutter margins make each band full-bleed inside the container. */
  .rv-split__ground { display: none; }
  .rv-split { background: var(--offwhite); }
  .rv-split__col--commitment {
    background: var(--charcoal); border-top-color: var(--hairline-light);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .rv-split__head { padding: 24px 0; }
  .rv-split__chev { display: block; }
  .rv-split__head[aria-expanded="true"] .rv-split__chev { transform: rotate(45deg); }
  /* height animates via grid-template-rows (inner wrapper clips) — no snap */
  .rv-split__body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s cubic-bezier(0.45,0,0.2,1), opacity .55s cubic-bezier(0.45,0,0.2,1); }
  .rv-split__body.is-open { grid-template-rows: 1fr; opacity: 1; padding-bottom: 8px; }
  .rv-split__bodyinner { overflow: hidden; min-height: 0; }
}

@media (min-width: 901px) {
  /* Desktop: both split columns always visible (no accordion) */
  .rv-split__body { display: block !important; }
  .rv-split__head { cursor: default; }
}

/* spec A7: phones drop the link columns and the blurb for a centred icon row —
   12 stacked links were 1334px of footer (1.6 viewports) on a 375px screen. */
@media (max-width: 820px) {
  .rv-footer__cols, .rv-footer__tagline { display: none; }
  .rv-footer__top { margin-bottom: 8px; }
  .rv-footer__social {
    display: flex; justify-content: center; gap: 14px;
    margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--hairline-light);
  }
  .rv-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--hairline-light); color: rgba(255,255,255,0.82);
    transition: color .2s var(--rv-ease), border-color .2s var(--rv-ease);
  }
  .rv-footer__social a:hover, .rv-footer__social a:focus-visible { color: var(--bronze-300); border-color: var(--bronze); }
  /* bottom row stacks centred */
  .rv-footer__strip { justify-content: center; margin-top: 24px; border-top: 0; padding-top: 0; }
  .rv-footer__disclosure, .rv-footer__legal { text-align: center; margin-inline: auto; }
  .rv-footer__brand { display: flex; justify-content: center; }
}

@media (max-width: 699px) {
  .rv-footer__cols { gap: 28px 20px; }
  .rv-form__body { grid-template-columns: 1fr; }
  .rv-form__actions { flex-direction: column; align-items: stretch; }
  .rv-form__actions .rv-btn { width: 100%; justify-content: center; }
  .rv-services__grid, .rv-why__grid, .rv-stats, .rv-testimonials__grid,
  .rv-team__grid, .rv-settlement__grid, .rv-pillars { grid-template-columns: 1fr; }

  /* Card sections become horizontal rails. A vertical stack costs most of a
     screen per card, so three services or three founders is a long scroll past
     content that was designed to be compared side by side. As a scroll-snap
     rail the set costs one screen, and the next card peeking past the edge is
     what says there is more. Full-bleed via negative gutter margins so the rail
     runs edge to edge while the first card still aligns to the container. */
  .rv-services__grid, .rv-testimonials__grid, .rv-team__grid {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    gap: 14px; padding-bottom: 4px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Without this the snapport starts at the scrollport edge, so the browser
       scrolls the rail by exactly the start padding to align the first card —
       cancelling the gutter and leaving card 01 flush against the screen. */
    scroll-padding-inline: var(--gutter);
  }
  .rv-services__grid::-webkit-scrollbar,
  .rv-testimonials__grid::-webkit-scrollbar,
  .rv-team__grid::-webkit-scrollbar { display: none; }
  .rv-services__grid > *, .rv-testimonials__grid > *, .rv-team__grid > * {
    flex: 0 0 84%; max-width: 420px; scroll-snap-align: start;
  }
  .rv-hero { min-height: auto; }
  .rv-hero__inner { padding-top: 108px; padding-bottom: 52px; }
  .rv-hero__overlay { background: linear-gradient(180deg, rgba(20,17,14,0.72) 0%, rgba(20,17,14,0.55) 35%, rgba(20,17,14,0.85) 100%); }
  /* every large tier needs the relaxation at phone sizes, not just the hero */
  .rv-display, .rv-hero__title { line-height: 1.08; }
  .rv-display--sub, .rv-page-hero__title, .rv-h2, .rv-process__paneltitle { line-height: 1.12; }
  .rv-hero__cta { flex-direction: column; align-items: stretch; }
  .rv-hero__cta .rv-btn { width: 100%; justify-content: center; }
  /* the page's two primary CTAs were styled differently: hero full-width, final auto */
  .rv-finalcta .rv-btn { width: 100%; justify-content: center; }
  .rv-page-hero { padding-top: 104px; padding-bottom: 52px; }
}

/* 520–699px: landscape phones and split-screen widths. Round 9 moved the 2-up
   boundary to 700, so this band inherited the full-width phone treatment — a
   single card ran the whole 620px viewport and team portraits rendered ~700px
   tall. Cap the column; keep the shared left edge by not centring the grid. */
@media (min-width: 520px) and (max-width: 699px) {
  .rv-services__grid, .rv-testimonials__grid, .rv-team__grid, .rv-pillars { grid-template-columns: minmax(0, 460px); }
  .rv-why__grid { grid-template-columns: minmax(0, 520px); }
}

/* Phones below 560px: every display clamp hits its rem floor by ~440px, so type
   stopped scaling exactly where the screen is narrowest (a 4-line H1 at 375px). */
@media (max-width: 560px) {
  .rv-hero__title { font-size: clamp(2.05rem, 10vw, 2.8rem); }
  .rv-page-hero__title { font-size: clamp(1.95rem, 9vw, 2.6rem); }
  .rv-page-hero__title--long { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .rv-display { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  .rv-display--sub { font-size: clamp(1.8rem, 8.5vw, 2.4rem); }
  .rv-h2 { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .rv-process__paneltitle { font-size: clamp(1.45rem, 7vw, 1.9rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   LANDING PAGE TEMPLATE (template-lp.php)
   Chrome-free conversion page. Reuses the theme's tokens, type scale and button
   system; only layout is new here.
   ========================================================================== */
.rv-lp { background: var(--charcoal); }
.rv-lp-bar { padding: 26px 0; background: var(--charcoal); }
.rv-lp-bar img { height: 46px; width: auto; display: block; }
/* ---- insights ---- */
/* Index head: the intro and the filter share one row on desktop, so the first
   article title is above the fold instead of three screens down. */
.rv-index__head { display: grid; gap: clamp(24px, 3vw, 36px); margin-bottom: clamp(32px, 4vw, 48px); }
.rv-index__intro { max-width: 60ch; color: var(--ink-70); font-size: 1.02rem; line-height: 1.7; text-wrap: pretty; }
.rv-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-cards__item { animation: rv-fade .28s var(--rv-ease); }
@media (prefers-reduced-motion: reduce) { .rv-cards__item { animation: none; } }
.rv-filter__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--hairline); border-radius: 100px;
  background: none; font: inherit; font-size: 0.88rem; color: var(--ink-70);
  transition: border-color .2s var(--rv-ease), color .2s var(--rv-ease), background .2s var(--rv-ease);
}
.rv-filter__chip:hover { border-color: var(--bronze); color: var(--ink); }
.rv-filter__chip.is-on { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.rv-filter__n { font-size: 0.76rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  /* One line that scrolls, rather than three rows of wrapped chips pushing the
     first card off screen. Same full-bleed rail the card sections use — and the
     same scroll-padding, without which snap alignment eats the start gutter. */
  .rv-filter {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); padding-bottom: 2px;
  }
  .rv-filter::-webkit-scrollbar { display: none; }
  .rv-filter__chip { flex: 0 0 auto; scroll-snap-align: start; }
}
.rv-filter__chip.is-on .rv-filter__n { opacity: 0.7; }
@media (min-width: 901px) {
  .rv-index__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .rv-filter { justify-content: flex-end; }
}

.rv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 36px); }
.rv-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-surface); overflow: hidden;
  transition: border-color .2s var(--rv-ease), transform .2s var(--rv-ease), box-shadow .2s var(--rv-ease); }
.rv-card:hover, .rv-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(182,151,109,0.45); }
.rv-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--offwhite); }
.rv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.rv-card:hover .rv-card__media img { transform: scale(1.04); }
.rv-card__body { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; flex: 1; }
.rv-card__title { font-size: 1.12rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; text-wrap: pretty; }
.rv-card__title a { color: inherit; }
.rv-card__title a:hover { color: var(--bronze-ink); }
.rv-card__stand { color: var(--ink-70); font-size: 0.95rem; line-height: 1.6; text-wrap: pretty; }
.rv-card__meta { margin-top: auto; padding-top: 12px; font-size: 0.82rem; color: var(--ink-60); }
.rv-cards__more { margin-top: clamp(26px, 3vw, 36px); }

/* Article: the title is an H1 but sits in a page-hero, so it takes the hero
   tier rather than the display tier — it must not outshout the homepage H1. */
.rv-article__title { max-width: 22ch; }
.rv-article__stand { max-width: 62ch; }
.rv-article__byline { margin-top: 20px; font-size: 0.88rem; color: rgba(255,255,255,0.7); }
.rv-article__byline a { color: var(--bronze-300); }
/* Takeaways and the article foot were narrowed on the .rv-container element
   itself. That element also carries margin-inline:auto, so shrinking it centred
   the box — the blocks read as deliberately indented while the hero and body
   above them sat hard left. Cap the CHILDREN instead and the container keeps its
   own left edge, which is the same fix .rv-prose already uses. */
.rv-takeaways { max-width: var(--container); }
.rv-takeaways > h2 { max-width: 40ch; }
.rv-takeaways ul { margin-top: 18px; display: grid; gap: 2px 48px; }
@media (min-width: 901px) { .rv-takeaways ul { grid-template-columns: 1fr 1fr; } }
.rv-takeaways li { padding: 14px 0 14px 26px; border-top: 1px solid var(--hairline); position: relative; font-weight: 400; text-wrap: pretty; }
.rv-takeaways li::before { content: ""; position: absolute; left: 0; top: 22px; width: 12px; height: 1px; background: var(--bronze); }
/* Wider than the 58ch .rv-prose default — an article is read in long stretches
   and the narrow column left most of the row empty. Not the full 1200px: that is
   ~110 characters a line, which is measurably worse to read, so this takes the
   width that helps and stops before the width that hurts. */
/* One measure for the body and the blocks under it. A ch value cannot do this
   job: the disclosure renders at 0.8rem, so 68ch there is ~200px narrower than
   68ch in the body, and the foot visibly failed to line up with the column it
   sits beneath. 690px is what 68ch resolves to at the body's 1.02rem. */
.rv-article__body, .rv-article__foot { --measure: 690px; }
.rv-container.rv-article__body > * { max-width: var(--measure); }

/* In-article headings.
   The shared .rv-prose rule sets h2 margin-top to 8px — correct on a legal page
   where a heading opens its block, wrong here. It left every subhead nearer the
   paragraph above it than its own text, so each read as a tail rather than a
   title. Space above a heading has to exceed space below it or the grouping
   inverts, which is what was happening down the whole article.
   Sizes are set rather than inherited: the global h1–h6 weight is 300, lighter
   than the 400 body text, so an inherited subhead is weaker than the prose it
   is meant to head. */
.rv-container.rv-article__body h2 {
  margin-top: clamp(42px, 4.5vw, 60px);
  font-size: clamp(1.32rem, 2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.rv-container.rv-article__body h3 {
  margin-top: clamp(30px, 3.4vw, 40px);
  font-size: clamp(1.06rem, 1.5vw, 1.18rem);
  font-weight: 500;
  line-height: 1.4;
}
.rv-container.rv-article__body h2 + p,
.rv-container.rv-article__body h3 + p { margin-top: 14px; }
/* The site already has a list vocabulary — the bronze arrow on the About split
   and the bronze dot in the settlement block. A browser disc belongs to neither. */
.rv-container.rv-article__body ul { padding-left: 0; list-style: none; display: grid; gap: 12px; }
.rv-container.rv-article__body ul > li { position: relative; padding-left: 28px; }
.rv-container.rv-article__body ul > li::before {
  content: "\2192"; position: absolute; left: 0; top: 0; color: var(--bronze-ink);
}
.rv-container.rv-article__body ol { padding-left: 24px; display: grid; gap: 12px; }
.rv-container.rv-article__body ol > li::marker { color: var(--bronze-ink); font-weight: 500; }
.rv-container.rv-article__body strong { font-weight: 600; }
.rv-article__foot { display: grid; gap: clamp(28px, 3.5vw, 44px); max-width: var(--container); }
.rv-article__foot > * { max-width: var(--measure); }
.rv-sources ul { margin-top: 14px; display: grid; gap: 10px; font-size: 0.92rem; }
.rv-sources li { color: var(--ink-70); }
/* These were already real links to vara.ae, moec.gov.ae and dubailand.gov.ae —
   they simply inherited the body colour with no underline, so they read as flat
   text and nobody would think to click them. Citing a primary source only counts
   if the reader can tell it is a citation. */
.rv-sources a {
  color: var(--ink-70);
  text-decoration: underline;
  text-decoration-color: var(--bronze);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s var(--rv-ease), text-decoration-color .2s var(--rv-ease);
}
.rv-sources a:hover, .rv-sources a:focus-visible { color: var(--ink); text-decoration-color: var(--ink); }
/* They open in a new tab, so say so rather than surprising people. */
.rv-sources a::after { content: "\2197"; margin-left: 5px; font-size: 0.86em; color: var(--bronze-ink); text-decoration: none; }
.rv-authorbox { display: flex; gap: 20px; align-items: flex-start; padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--hairline); }
.rv-authorbox__photo { flex: 0 0 auto; width: 72px; height: 90px; object-fit: cover; border-radius: var(--radius-surface); }
.rv-authorbox__name { font-weight: 500; line-height: 1.3; }
.rv-authorbox__role { margin-top: 3px; font-size: 0.9rem; color: var(--bronze-ink); line-height: 1.4; }
/* The review line and the link were one paragraph at 1.7 line-height, which read
   as a loose block of unrelated sentences. Tighter, and the link gets its own row
   so it stops looking like the tail of a date. */
.rv-authorbox__meta { margin-top: 14px; font-size: 0.88rem; color: var(--ink-60); line-height: 1.55; }
.rv-authorbox__link { margin-top: 10px; }
.rv-article__disclosure { font-size: 0.8rem; color: var(--ink-60); line-height: 1.7; padding-top: clamp(20px, 2.5vw, 28px); border-top: 1px solid var(--hairline); }
/* Share row: outlined like the footer's social icons, bronze on hover. */
.rv-share__label { font-size: 0.88rem; color: var(--ink-60); }
.rv-share__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rv-share__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  font-size: 0.9rem; font-weight: 500; line-height: 1.2; color: var(--ink-70); background: transparent;
  border: 1px solid var(--hairline); border-radius: var(--radius-control);
  transition: color .2s var(--rv-ease), border-color .2s var(--rv-ease);
}
.rv-share__btn svg { flex: 0 0 auto; color: var(--bronze-ink); }
.rv-share__btn:hover, .rv-share__btn:focus-visible { color: var(--ink); border-color: var(--bronze); }
.rv-share__btn[hidden] { display: none; }
.rv-pagination { margin-top: clamp(32px, 4vw, 48px); font-size: 0.92rem; }
.rv-pagination .page-numbers { padding: 8px 12px; color: var(--ink-70); }
.rv-pagination .current { color: var(--ink); font-weight: 500; }
/* Every card breakpoint lives here, after the base rule, in descending order.
   They were previously split: a phone rule sat in the shared mobile block ~170
   lines ABOVE the base `repeat(3, 1fr)`, so the base won on source order and
   phones got three 143px cards. A second attempt bounded the tablet rule but
   left the phone rule stranded in the same wrong place. Keeping them together
   and after the base is what makes the order self-evident. */
@media (min-width: 700px) and (max-width: 900px) { .rv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px) { .rv-cards { grid-template-columns: 1fr; gap: 20px; } }

.rv-lp-bar__brand { display: inline-block; border-radius: 2px; transition: opacity .2s var(--rv-ease); }
.rv-lp-bar__brand:hover { opacity: 0.82; }
.rv-lp-bar__brand:focus-visible { outline: 2px solid var(--bronze-300); outline-offset: 6px; }

.rv-lp-hero { background: var(--charcoal); color: #fff; padding-block: clamp(28px, 5vw, 72px) clamp(56px, 8vw, 104px); }
.rv-lp-hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
.rv-lp-h1 {
  font-size: clamp(2.3rem, 5.6vw, 3.9rem); font-weight: 300; line-height: 1.05;
  letter-spacing: -0.035em; margin: 14px 0 0; text-wrap: balance;
}
.rv-lp-sub { margin-top: 22px; font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--light-70); max-width: 46ch; }
.rv-lp-trust { margin-top: 26px; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--bronze-300); }

/* form card — the one light surface on a dark page, so it reads as the target */
.rv-lp-card { background: #fff; color: var(--ink); border-radius: var(--radius-surface); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-lg); }
.rv-lp-card__title { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 20px; }
.rv-lp-form .rv-field { margin-bottom: 16px; }
.rv-lp-submit { width: 100%; justify-content: center; margin-top: 6px; }
.rv-lp-note { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-70); }
.rv-lp-fine { margin: 6px 0 0; font-size: 0.8rem; color: var(--ink-60); line-height: 1.5; }
.rv-lp-radios { border: 0; padding: 0; margin: 0 0 16px; }
.rv-lp-radios legend { font-size: 0.82rem; font-weight: 500; margin-bottom: 10px; }
.rv-lp-radio { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.93rem; cursor: pointer; }
.rv-lp-success { text-align: left; }
.rv-lp-success__h { font-size: 1.25rem; font-weight: 500; margin: 0 0 8px; }

.rv-lp-why { background: var(--offwhite); padding-block: var(--section-y); }
.rv-lp-why__grid { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: clamp(32px, 4vw, 52px); }
.rv-lp-why__icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: var(--radius-surface); }
.rv-lp-why__h { margin: 18px 0 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.rv-lp-why__p { margin: 10px 0 0; color: var(--ink-70); font-size: 0.95rem; line-height: 1.65; text-wrap: pretty; }

.rv-lp-inside { padding-block: var(--section-y); }
.rv-lp-inside__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
.rv-lp-list { list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; }
.rv-lp-list li { display: flex; gap: 14px; padding: 17px 0; border-top: 1px solid var(--hairline-light); color: var(--light-70); font-size: 0.97rem; line-height: 1.6; }
.rv-lp-list li span { color: var(--bronze-300); flex: none; }
.rv-lp-talk { border-left: 2px solid var(--bronze); padding-left: clamp(20px, 2.5vw, 28px); color: var(--light-70); }
.rv-lp-talk__h { font-size: 1.15rem; font-weight: 500; color: #fff; margin: 0 0 12px; }
.rv-lp-talk .rv-btn { margin-top: 20px; }

.rv-lp-final { background: var(--offwhite); padding-block: var(--section-y); }
.rv-lp-final__wrap { max-width: 620px; }
.rv-lp-final .rv-h2 { margin-bottom: clamp(24px, 3vw, 34px); }

.rv-lp-foot { background: var(--charcoal); color: var(--light-50); padding-block: 40px; font-size: 0.82rem; }
.rv-lp-foot p { margin: 0 0 8px; letter-spacing: 0.04em; }
.rv-lp-foot__legal a { color: var(--light-70); }
.rv-lp-foot__legal a:hover { color: #fff; }

@media (min-width: 901px) {
  .rv-lp-hero__grid { grid-template-columns: 1fr minmax(0, 480px); column-gap: clamp(48px, 6vw, 90px); }
  .rv-lp-why__grid { grid-template-columns: repeat(3, 1fr); }
  .rv-lp-inside__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
}