/* North Track Digital - revamp component set
   Block types from site-design-brief.md Section 3. Use ONLY these blocks.
   Mobile is the design (390px first); desktop is the adaptation.
   Every value comes from tokens.css. No hard-coded colors, fonts or spacing. */

/* ============================ base ============================ */
.rv img, .rv video { max-width: 100%; height: auto; display: block; }

.rv-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.rv-wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gutter); }

.rv-section { padding: var(--section-y) 0; }
.rv-section.is-inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.rv-section.is-raised { background: var(--bg-raised); }

.rv h1, .rv h2, .rv h3 {
  font-family: var(--display); font-weight: 600;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.rv h1 { font-size: var(--fs-h1); }
.rv h2 { font-size: var(--fs-h2); }
.rv h3 { font-size: var(--fs-h3); }
.rv .accent { font-style: italic; color: var(--accent); }
.is-inverse .accent, .rv-hero .accent, .rv-cta .accent { color: var(--mint); }

.rv-eyebrow {
  display: inline-block; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-4);
}
.is-inverse .rv-eyebrow { color: var(--accent-soft); }

.rv-subline { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft); margin-top: var(--s-4); }
.is-inverse .rv-subline, .rv-hero .rv-subline, .rv-cta .rv-subline { color: var(--text-inverse-soft); }
.rv-filter { font-size: var(--fs-small); color: var(--text-soft); margin-top: var(--s-4); }
.is-inverse .rv-filter, .rv-hero .rv-filter, .rv-cta .rv-filter { color: var(--text-inverse-soft); }

.rv-head { max-width: 46ch; }
.rv-head + * { margin-top: var(--s-7); }

/* ============================ buttons ============================ */
.rv-btn {
  display: inline-block; padding: 15px 30px; border-radius: var(--radius-pill);
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  text-decoration: none; text-align: center; border: 1.5px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  min-height: 48px; /* tap target */
}
.rv-btn-solid { background: var(--accent); color: var(--sand); }
.rv-btn-solid:hover { background: var(--bg-inverse); color: var(--sand); }
.is-inverse .rv-btn-solid { background: var(--cream); color: var(--deep); }
.is-inverse .rv-btn-solid:hover { background: var(--mint); }
.rv-btn-ghost { border-color: var(--accent); color: var(--accent); background: transparent; }
.rv-btn-ghost:hover { background: var(--accent); color: var(--paper); }
.is-inverse .rv-btn-ghost { border-color: var(--accent-soft); color: var(--text-inverse); }

/* ============================ 1. HERO ============================ */
.rv-hero { position: relative; overflow: hidden; background: var(--bg-inverse); color: var(--text-inverse); }
.rv-hero-media { position: absolute; inset: 0; z-index: 0; }
.rv-hero-media {
  background:
    radial-gradient(120% 90% at 85% 10%, var(--slate) 0%, transparent 60%),
    radial-gradient(80% 70% at 10% 100%, var(--pine) 0%, transparent 50%),
    var(--charcoal);
}
/* faint reporting grid: identifies the product, never competes with copy */
.rv-hero-media::before {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(var(--rule-inverse) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-inverse) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
}
.rv-hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-hero-media video:not([src]):not(:has(source)) { display: none; }
/* darkened for legibility (brief 4.1); only matters once the loop lands */
.rv-hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,27,27,.55) 0%, rgba(27,27,27,.85) 100%);
}
/* Ruling 2026-10-12 (reference hawkemedia.com): type-only, cinematic. One line,
   one button, air. Centred on every width; the footage carries the rest. */
.rv-hero { min-height: clamp(520px, 78vh, 820px); display: grid; align-items: center; }
.rv-hero-inner {
  position: relative; z-index: 1; padding: clamp(72px, 12vw, 128px) var(--gutter);
  display: grid; justify-items: center; text-align: center;
}
.rv-hero h1 { max-width: 16ch; font-size: clamp(2.6rem, 6.2vw, 4.8rem); }
.rv-hero .rv-subline { max-width: 40ch; color: var(--text-inverse-soft); margin-top: var(--s-5); }
.rv-hero-cta { margin-top: var(--s-7); }
.rv-hero .rv-btn { padding: 18px 40px; font-size: 1.05rem; }
.rv-hero .rv-filter { margin-top: var(--s-5); }

/* logo wall (ruling 2026-10-14, ref Hawke): static cluster of white marks on
   the dark surface. Every logo is forced to white so colour files still work. */
.rv-logowall { padding: var(--s-6) 0; border-bottom: 1px solid var(--rule-inverse); }
.rv-logowall .rv-head { max-width: none; text-align: center; }
.rv-logowall .rv-head .rv-eyebrow { margin-bottom: 0; }
.rv-logowall .rv-head + * { margin-top: var(--s-5); }
/* desktop: a little taller (operator, 2026-10-16). More air above and below
   and between rows; phones keep the compact spacing. */
@media (min-width: 900px) {
  .rv-logowall { padding: var(--s-8) 0; }
  .rv-logowall .rv-head + * { margin-top: var(--s-6); }
  .rv-logowall .rv-logocloud { row-gap: var(--s-6); }
}

/* collage (ruling 2026-10-14): one centred, wrapping cluster, no rows or
   columns. Height is set by shape so wide and square marks carry equal weight. */
.rv-logocloud {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1040px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--s-4) var(--s-6);
}
.rv-logocloud li { display: flex; align-items: center; }
.rv-logocloud img {
  display: block; width: auto; filter: brightness(0) invert(1); opacity: .8;
  transition: opacity var(--dur) var(--ease);
}
.rv-logocloud .is-wide img { height: 24px; max-width: 150px; object-fit: contain; }
.rv-logocloud .is-square img { height: 44px; max-width: 70px; object-fit: contain; }
/* two-line lockups (wordmark plus tagline) need more height to read at the same weight */
.rv-logocloud .is-lockup img { height: 38px; max-width: 130px; }
.rv-logocloud li:hover img { opacity: 1; }
@media (max-width: 639px) {
  .rv-logocloud { gap: var(--s-3) var(--s-4); }
  .rv-logocloud .is-wide img { height: 18px; max-width: 108px; }
  .rv-logocloud .is-square img { height: 34px; max-width: 52px; }
  .rv-logocloud .is-lockup img { height: 30px; max-width: 100px; }
}

/* screen-reader-only text */
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================ 2. THREE-CARD ROW ============================ */
.rv-cards { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .rv-cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.rv-card {
  background: var(--bg-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s-6);
}
.is-inverse .rv-card { background: var(--bg-inverse-2); border-color: var(--rule-inverse); }
.rv-card h3 { margin-bottom: var(--s-3); }
.rv-card p { color: var(--text-soft); }
.is-inverse .rv-card p { color: var(--text-inverse-soft); }

/* ============================ 3. STEPPER ============================ */
.rv-stepper { counter-reset: step; }
.rv-step {
  position: relative; padding-left: var(--s-8); padding-bottom: var(--s-6);
  border-left: 2px solid var(--rule); margin-left: var(--s-4);
}
.rv-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.rv-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: calc(-1 * var(--s-5)); top: 0;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--accent); color: var(--paper);
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
}
.is-inverse .rv-step { border-left-color: var(--rule-inverse); }
.is-inverse .rv-step::before { background: var(--mint); color: var(--deep); }
.rv-step h3 { margin-bottom: var(--s-2); }
.rv-step p { color: var(--text-soft); }
.is-inverse .rv-step p { color: var(--text-inverse-soft); }
/* mobile progress bar (brief 3: one visible at a time with progress) */
.rv-stepper-progress { display: block; height: 3px; background: var(--rule); border-radius: 2px; margin-bottom: var(--s-6); overflow: hidden; }
.rv-stepper-progress i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width var(--dur) var(--ease); }
@media (min-width: 900px) {
  .rv-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
  .rv-step { padding-left: 0; padding-top: var(--s-8); border-left: 0; border-top: 2px solid var(--rule); margin-left: 0; padding-bottom: 0; }
  .rv-step::before { left: 0; top: calc(-1 * var(--s-5) - 1px); }
  .rv-step:last-child { border-top-color: var(--rule); }
  .rv-stepper-progress { display: none; }
}

/* ============================ 6. CARD GRID ============================ */
.rv-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .rv-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1000px) { .rv-grid { grid-template-columns: repeat(4, 1fr); } }
.rv-tile {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s-5);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.rv-tile h3 { font-size: 1.15rem; margin-bottom: var(--s-2); }
.rv-tile p { color: var(--text-soft); font-size: var(--fs-small); }

/* ============================ 7. RESULTS (ruling 2026-10-13, ref Hawke) ============================
   Image or logo beside metrics that count up on first view (revamp.js counters). */
.rv-results { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .rv-results { grid-template-columns: repeat(2, 1fr); } }
.rv-result {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius);
}
@media (min-width: 640px) { .rv-result { grid-template-columns: 34% minmax(0, 1fr); } }
.rv-result-media { position: relative; min-height: 220px; background: var(--bg-inverse-2); }
.rv-result-media img { width: 100%; height: 100%; object-fit: cover; }
.rv-result-media .rv-ph { height: 100%; min-height: 220px; border-radius: 0; border-width: 0 2px 0 0; }
.rv-result-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.rv-result-tag {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-warm);
}
.rv-result-tag span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-inverse-soft); margin-left: var(--s-3); }
.rv-result h3 { color: var(--text-inverse); }
.rv-result-ctx { color: var(--text-inverse-soft); font-size: var(--fs-small); }
.rv-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule-inverse); }
.rv-metric { display: grid; gap: var(--s-2); }
.rv-metric-num {
  font-family: var(--display); font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1;
  color: var(--accent-warm); font-variant-numeric: tabular-nums;
}
.rv-metric-label { font-size: var(--fs-small); color: var(--text-inverse-soft); line-height: 1.4; }
.rv-result .arrow-link { color: var(--mint); border-color: var(--accent-soft); margin-top: auto; align-self: flex-start; }

/* ============================ 8. ACCORDION ============================ */
.rv-accordion { border-top: 1px solid var(--rule); }
.rv-ac { border-bottom: 1px solid var(--rule); }
.rv-ac summary {
  cursor: pointer; list-style: none; padding: var(--s-5) 0;
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  display: flex; justify-content: space-between; gap: var(--s-4); align-items: flex-start;
  min-height: 48px;
}
.rv-ac summary::-webkit-details-marker { display: none; }
.rv-ac summary::after {
  content: "+"; font-family: var(--body); font-size: 1.4rem; line-height: 1;
  color: var(--accent); flex: 0 0 auto; transition: transform var(--dur) var(--ease);
}
.rv-ac[open] summary::after { transform: rotate(45deg); }
.rv-ac-body { padding-bottom: var(--s-5); color: var(--text-soft); max-width: 68ch; }

/* ============================ 9. CTA BAND ============================ */
.rv-cta { background: var(--bg-inverse); color: var(--text-inverse); text-align: center; }
.rv-cta .rv-wrap-narrow > * + * { margin-top: var(--s-4); }
.rv-cta .rv-btn { margin-top: var(--s-5); }

/* ============================ 10. STICKY MOBILE CTA ============================ */
.rv-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--s-3) var(--gutter);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(27, 27, 27, .96); backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform var(--dur) var(--ease);
}
.rv-sticky.is-on { transform: translateY(0); }
.rv-sticky .rv-btn { display: block; width: 100%; background: var(--cream); color: var(--deep); }
@media (min-width: 768px) { .rv-sticky { display: none; } }

/* ============================ scroll reveal (brief 7) ============================ */
.rv-reveal { opacity: 0; transform: translateY(var(--reveal-shift)); }
.rv-reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .rv-reveal { opacity: 1; transform: none; }
}

/* ============================ footer category block ============================ */
.rv-category { border-top: 1px solid var(--rule-inverse); padding: var(--s-6) 0; font-size: var(--fs-small); color: var(--mint); }

/* ============================ placeholders (revamp only) ============================
   Every asset and figure Daniel still owes is rendered with these, so nothing
   is silently missing and nothing fake reads as real. Delete a .rv-ph when its
   real asset lands. site-design-brief.md Section 6 lists what each one needs. */
.rv-ph {
  display: grid; place-items: center; text-align: center;
  min-height: 200px; padding: var(--s-6);
  border: 2px dashed var(--accent-soft); border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(146,169,143,.10) 10px, rgba(146,169,143,.10) 20px);
  color: var(--text-soft); font-size: var(--fs-small); line-height: 1.5;
}
.is-inverse .rv-ph, .rv-band .rv-ph, .rv-hero .rv-ph { color: var(--text-inverse-soft); }
.rv-ph b { display: block; font-family: var(--display); font-size: 1rem; color: var(--accent); margin-bottom: var(--s-2); }
.is-inverse .rv-ph b, .rv-band .rv-ph b { color: var(--mint); }
.rv-ph-inline {
  display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
  border: 1px dashed var(--accent-soft); background: rgba(146,169,143,.12);
  font-size: .85em; font-weight: 600; color: var(--accent); white-space: nowrap;
}
.is-inverse .rv-ph-inline { color: var(--mint); }

/* footer brand name: styled like the old h4 but not a heading (heading-order) */
.site-footer .footer-brand-name { font-family: var(--display); color: var(--cream); font-size: 1.25rem; font-weight: 600; margin-bottom: 14px; }

/* =====================================================================
   COMMUNICATION STANDARD (north-track-site-communication-brief.md)
   Additions and overrides applied after the first build.
   ===================================================================== */


/* --- Section 2 + 15: homepage insights tiles, generated from the manifest --- */
.rv-insight {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--bg-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s-5); text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv-insight:hover { border-color: var(--accent); transform: translateY(-2px); }
.rv-insight .rv-eyebrow { margin-bottom: 0; }
.rv-insight h3 { font-size: 1.08rem; }
.rv-insight p { font-size: var(--fs-small); color: var(--text-soft); }

/* --- Section 14: closing band is a simple centred callout in the FAQ's colour
       scheme, then straight into the footer. Not a full-bleed coloured section. --- */
.rv-cta { background: var(--bg-raised); color: var(--text); text-align: center; border-top: 1px solid var(--rule); }
.rv-cta h2 { color: var(--text); }
.rv-cta .rv-subline, .rv-cta .rv-filter { color: var(--text-soft); }
.rv-cta .rv-btn-solid { background: var(--accent); color: var(--sand); }
.rv-cta .rv-btn-solid:hover { background: var(--bg-inverse); color: var(--sand); }

/* ============================ TESTIMONIALS ============================ */
.rv-quote { font-size: var(--fs-lead); line-height: 1.5; }
.rv-who { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.rv-who img { width: 48px; height: 48px; border-radius: var(--radius-pill); object-fit: cover; flex: 0 0 auto; }
.rv-who strong { display: block; font-size: var(--fs-body); }
.rv-who span { display: block; font-size: var(--fs-small); color: var(--text-soft); }

/* second client quote + the agency-founder references */

.rv-quote-card { background: var(--mint); border-radius: var(--radius); padding: var(--s-6); }
.rv-quote-card .rv-quote { color: var(--deep); }
.rv-quote-card .rv-who span { color: var(--moss); }

/* =====================================================================
   VISUAL ENGAGEMENT PASS
   Design brief S2.4: motion has a job. It reveals structure (a stepper
   advancing, a comparison dimming). Never decoration.
   Comms brief S4: contrast is the tool, not imagery.
   ===================================================================== */

/* --- insights tiles carry the article image (assets already exist, slug-named) --- */
.rv-insight { padding: 0; gap: 0; overflow: hidden; }
.rv-insight-media { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mint); }
.rv-insight-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.rv-insight:hover .rv-insight-media img { transform: scale(1.03); }
.rv-insight-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }

/* --- channel tiles: icon identifies the channel so the eye stops scanning text --- */
.rv-tile-icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: var(--s-3); }
.rv-tile:hover .rv-tile-icon { color: var(--deep); }

/* --- comms brief S4 contrast on the remaining plain-card sections --- */

/* --- stepper: the connecting line draws as the reader advances (S2.4) --- */
@media (min-width: 900px) {
  .rv-step { border-top-color: var(--rule); }
  .rv-step::after {
    content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0;
    background: var(--accent); transition: width 520ms var(--ease);
  }
  .rv-step.is-in::after { width: 100%; }
}
@media (max-width: 899px) {
  .rv-step::after {
    content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 0;
    background: var(--accent); transition: height 520ms var(--ease);
  }
  .rv-step.is-in::after { height: 100%; }
  .rv-step:last-child::after { display: none; }
}

/* Insights row is three tiles, not four: .rv-grid's 4-up left a dead column. */
@media (min-width: 1000px) { .rv-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   SALES PASS, 2026-10-12
   Operator brief: shorter, conversion-forward copy; more colour range; visual
   elements that break the text; no oversized client photo. Every new colour is
   a token (tokens.css: --accent-warm, --bg-tint). See DECISIONS-site-revamp.md.
   ===================================================================== */

/* warm eyebrows give every section a visual anchor before the headline */
.rv-eyebrow, .is-inverse .rv-eyebrow { color: var(--accent-warm); }
.rv-section.is-tint { background: var(--bg-tint); }

.rv-tile { border-top: 3px solid var(--mint); }
.rv-tile:hover { border-top-color: var(--accent-warm); }

/* testimonial carousel: native scroll-snap row, arrows call scrollBy (revamp.js) */
.rv-carousel { position: relative; }
.rv-carousel-track {
  display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: var(--s-2) var(--gutter) var(--s-4); margin: 0 calc(-1 * var(--gutter));
  scroll-padding-inline: var(--gutter);
}
.rv-carousel-track::-webkit-scrollbar { display: none; }
.rv-carousel-track:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 4px; }
.rv-carousel-track > .rv-quote-card { flex: 0 0 min(86vw, 380px); scroll-snap-align: start; }
@media (min-width: 900px) { .rv-carousel-track > .rv-quote-card { flex-basis: calc((100% - 2 * var(--s-5)) / 3); } }
.rv-carousel-nav { display: flex; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-4); }
.rv-carousel-btn {
  width: 48px; height: 48px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  display: grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rv-carousel-btn svg { width: 22px; height: 22px; }
.rv-carousel-btn:hover { background: var(--accent); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .rv-carousel-track { scroll-behavior: auto; } }
.rv-quote-card { display: flex; flex-direction: column; }
.rv-quote-card .rv-quote { font-size: var(--fs-body); }
.rv-quote-card .rv-quote::before {
  content: "\201C"; display: block; font-family: var(--display); font-size: 3rem;
  line-height: .6; color: var(--accent-warm); margin-bottom: var(--s-3);
}
.rv-quote-card > p:last-child { margin-top: var(--s-4); }

/* warm accent on the structural marks: step numerals, stepper line, FAQ toggle */
.rv-step::before { background: var(--accent-warm); color: var(--deep); }
@media (min-width: 900px) { .rv-step.is-in::after { background: var(--accent-warm); } }
@media (max-width: 899px) { .rv-step.is-in::after { background: var(--accent-warm); } }
.rv-stepper-progress i { background: var(--accent-warm); }
.rv-ac summary::after { color: var(--accent-warm); }

/* ============================ Services dropdown (operator, 2026-10-14) ============================
   Desktop opens on hover or the arrow; the phone menu expands in place.
   Breakpoint matches main.css's mobile menu (780px). */
.nav-dd { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dd-toggle {
  display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0; margin: 0 -6px 0 0;
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--ink);
}
.nav-dd-toggle svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.nav-dd-toggle:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 2px; }
.nav-dd.is-open .nav-dd-toggle svg { transform: rotate(180deg); }
.nav-dd-menu { list-style: none; margin: 0; padding: 0; }
@media (min-width: 781px) {
  .nav-dd-menu {
    position: absolute; top: calc(100% + 14px); left: -14px; z-index: 60; min-width: 220px; padding: 8px;
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  /* invisible bridge so the menu stays open while the pointer crosses the gap */
  .nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-dd:hover .nav-dd-menu, .nav-dd.is-open .nav-dd-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-dd:hover .nav-dd-toggle svg { transform: rotate(180deg); }
  .nav-dd-menu a { display: block; padding: 10px 12px; border-radius: 8px; font-size: .95rem; white-space: nowrap; }
  .nav-dd-menu a:hover { background: var(--bg-tint); color: var(--ink); }
  .nav-dd-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
  .nav-dd-all a { color: var(--accent); }
}
@media (max-width: 780px) {
  .nav-dd { flex-wrap: wrap; border-bottom: 1px solid var(--sand); }
  .nav-links .nav-dd-link { flex: 1; border-bottom: 0; }
  .nav-dd-toggle { min-width: 44px; min-height: 44px; margin: 0; }
  .nav-dd-menu { display: none; width: 100%; padding: 0 0 10px 14px; }
  .nav-dd.is-open .nav-dd-menu { display: block; }
  .nav-links .nav-dd-menu a { display: block; padding: 10px 0; border-bottom: 0; font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) { .nav-dd-menu, .nav-dd-toggle svg { transition: none; } }

/* ============================ Case studies collection (2026-10-14) ============================ */
.rv-pagehead { padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); }
.rv-pagehead h1 { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--text-inverse); }
.rv-pagehead .rv-subline { max-width: 46ch; }
.rv-result h2 { font-size: var(--fs-h3); color: var(--text-inverse); }
.rv-result h2 a { color: inherit; text-decoration: none; }
.rv-result h2 a:hover { color: var(--mint); }
.rv-result-media { display: block; }
.rv-results-more { margin-top: var(--s-6); text-align: center; }
.nav-links a[aria-current="page"] { color: var(--sage); }

/* "Book a Strategy Call" is longer than the old label; keep it on one line */
.nav-links .btn { white-space: nowrap; }

/* main.css .nav-bar zeroes the .wrap side padding, so below 1160px the logo
   touched the screen edge. This keeps a 24px gutter at every width and adds
   nothing once the centred margin is already 24px or more. */
.nav-bar { padding-left: clamp(0px, calc((1208px - 100vw) / 2), 24px); padding-right: clamp(0px, calc((1208px - 100vw) / 2), 24px); }

/* ============================ Review slideshow (booking page, 2026-10-15) ============================
   Plain white, no heading, one review at a time. Native scroll-snap; arrows
   and dots in revamp.js. Swipe works on phones with no script. */
.rv-slideshow { background: var(--paper); padding: clamp(48px, 8vw, 88px) 0; }
.rv-slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; max-width: 820px; margin: 0 auto;
}
.rv-slides::-webkit-scrollbar { display: none; }
.rv-slides:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 4px; }
.rv-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 0 var(--gutter); text-align: center; }
.rv-slide blockquote {
  margin: 0; font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.4; color: var(--charcoal);
}
.rv-slide figcaption { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); text-align: left; }
.rv-slide figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rv-slide figcaption strong { display: block; color: var(--charcoal); }
.rv-slide figcaption span { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.4; }
.rv-slides-nav { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-7); }
.rv-dots { display: flex; gap: 8px; }
.rv-dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--sand); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv-dots button[aria-current="true"] { background: var(--accent-warm); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .rv-slides { scroll-behavior: auto; } }

/* ============================ /creatives proof page (2026-10-15) ============================
   Cold email landing page: no nav, one CTA. Video cards keep the 9:16 frame
   reserved before anything loads, so nothing shifts when a video starts. */
.cr-page .rv-hero { min-height: 0; display: block; }
.cr-page .rv-hero-inner { padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(48px, 8vw, 96px); }
.cr-page .rv-hero h1 { max-width: 22ch; font-size: clamp(2rem, 5vw, 3.5rem); }
.cr-brandbar {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-5) var(--gutter) 0; font-family: var(--display); font-weight: 600; color: var(--cream);
}
.cr-brandbar img { width: 32px; height: 32px; border-radius: 8px; }

.rv .cr-brand {
  font-family: var(--body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-warm);
}
.cr-lead {
  margin-top: var(--s-3); max-width: 24ch;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-h2);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text);
}

.cr-stats { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-6); }
@media (min-width: 640px) { .cr-stats { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.cr-stat {
  display: grid; gap: var(--s-2); padding: var(--s-5);
  background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius-sm);
}
.cr-stat-num {
  font-family: var(--display); font-size: clamp(2rem, 4.5vw, 2.6rem); line-height: 1;
  color: var(--accent-warm); font-variant-numeric: tabular-nums;
}
.cr-stat-label { font-size: var(--fs-small); color: var(--text-inverse-soft); line-height: 1.4; }

.cr-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-6); }
@media (min-width: 900px) {
  .cr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .cr-grid.is-two { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cr-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.is-raised .cr-card { background: var(--bg); }
.cr-media {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  padding: 0; border: 0; background: var(--bg-inverse); cursor: pointer;
}
.cr-media img, .cr-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-media video { z-index: 1; }
.cr-media.rv-ph { display: grid; place-items: center; align-content: center; min-height: 0; border-radius: 0; border-width: 0 0 2px 0; cursor: default; }
.cr-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: rgba(27, 27, 27, .62); color: var(--cream); transition: opacity var(--dur) var(--ease);
}
.cr-play svg { margin-left: 3px; }
.cr-media.is-playing .cr-play { opacity: 0; }
.cr-media:focus-visible { outline: 3px solid var(--accent-warm); outline-offset: -3px; }
.cr-meta { display: grid; gap: var(--s-1); padding: var(--s-4); }
.cr-platform {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--accent-warm); margin-bottom: var(--s-1);
}
.cr-figure { font-size: var(--fs-small); color: var(--text-soft); line-height: 1.35; }
.cr-figure strong {
  display: block; font-family: var(--display); font-weight: 600; color: var(--text);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-variant-numeric: tabular-nums;
}
.cr-note { margin-top: var(--s-5); max-width: 60ch; color: var(--text-soft); }
.cr-note-tight { margin-top: var(--s-3); font-size: var(--fs-small); }

.cr-how { text-align: center; }
.cr-how h2 { color: var(--text-inverse); }
.cr-steps { list-style: none; counter-reset: cr; display: grid; gap: var(--s-3); margin: var(--s-6) auto 0; max-width: 34rem; text-align: left; }
.cr-steps li {
  counter-increment: cr; display: flex; align-items: baseline; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border: 1px solid var(--rule-inverse); border-radius: var(--radius-sm);
  background: var(--bg-inverse-2); font-size: var(--fs-lead); line-height: 1.35;
}
.cr-steps li::before {
  content: "0" counter(cr); font-family: var(--display); font-weight: 600; color: var(--accent-warm); flex: 0 0 auto;
}
.cr-model { margin: var(--s-6) auto 0; max-width: 46ch; color: var(--text-inverse-soft); }
.cr-how .rv-btn { margin-top: var(--s-6); }
.cr-footer { padding-top: var(--s-5); }
.cr-footer .footer-bottom { margin-top: 0; }
.cr-book { padding: clamp(40px, 7vw, 72px) 0 0; background: var(--paper); scroll-margin-top: var(--s-4); }
.cr-book + .rv-slideshow { padding-top: var(--s-6); }
.rv-sticky.cr-hide { transform: translateY(110%); }
.cr-book-head { text-align: center; margin-bottom: var(--s-6); }
.cr-faq h2 { margin-bottom: var(--s-6); }
.cr-footer .footer-bottom { border-top: 0; padding-top: 0; }
/* client logo heads each case section (operator, 2026-10-15) */
.cr-brand-logo { line-height: 0; }
.cr-brand-logo img { display: block; width: auto; height: clamp(40px, 5vw, 52px); }

/* ============================ Hero interim motion (2026-10-16) ============================
   Homepage only (.rv-hero-live), so the /creatives hero is untouched. Until
   the editor's video lands: drifting light fields, a panning grid, a staggered
   entrance, and an ochre underline that draws under the accent. All motion
   stops under prefers-reduced-motion; the static frame still reads as designed. */
.rv-hero-live .rv-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
  will-change: transform; mix-blend-mode: screen;
}
.rv-hero-live .rv-orb-1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -12%; top: -18%;
  background: radial-gradient(circle, rgba(52,55,69,.95), transparent 70%); animation: rv-drift-1 22s ease-in-out infinite alternate; }
.rv-hero-live .rv-orb-2 { width: 38vw; height: 38vw; max-width: 540px; max-height: 540px; right: -10%; bottom: -22%;
  background: radial-gradient(circle, rgba(201,138,60,.32), transparent 70%); animation: rv-drift-2 26s ease-in-out infinite alternate; }
.rv-hero-live .rv-orb-3 { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; right: 18%; top: -14%;
  background: radial-gradient(circle, rgba(73,94,75,.55), transparent 70%); animation: rv-drift-3 30s ease-in-out infinite alternate; }
@keyframes rv-drift-1 { to { transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes rv-drift-2 { to { transform: translate(-16vw, -12vh) scale(1.18); } }
@keyframes rv-drift-3 { to { transform: translate(-10vw, 16vh) scale(.9); } }
/* keep the copy area calm: a soft dark centre over the light fields */
.rv-hero-live .rv-hero-media::after {
  background: radial-gradient(60% 55% at 50% 50%, rgba(27,27,27,.55), rgba(27,27,27,0) 75%);
}
.rv-hero-live .rv-hero-media::before { content: none; }

/* staggered entrance on load */
.rv-hero-live .rv-hero-inner > * { animation: rv-rise .7s var(--ease) both; }
.rv-hero-live .rv-hero-inner > :nth-child(2) { animation-delay: .12s; }
.rv-hero-live .rv-hero-inner > :nth-child(3) { animation-delay: .24s; }
.rv-hero-live .rv-hero-inner > :nth-child(4) { animation-delay: .36s; }
@keyframes rv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ochre underline draws under the accent words after the headline lands */
.rv-hero-live h1 .accent {
  background-image: linear-gradient(var(--accent-warm), var(--accent-warm));
  background-repeat: no-repeat; background-position: 0 92%; background-size: 0% .09em;
  animation: rv-underline .9s var(--ease) .75s forwards; padding-bottom: .04em;
}
@keyframes rv-underline { to { background-size: 100% .09em; } }

/* the button breathes once a few seconds in, to draw the eye, then rests */
.rv-hero-live .rv-btn-solid { animation: rv-cta-pulse 2.4s var(--ease) 2.2s 2; }
@keyframes rv-cta-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,138,60,0); } 50% { box-shadow: 0 0 0 10px rgba(201,138,60,.18); } }

@media (prefers-reduced-motion: reduce) {
  .rv-hero-live .rv-orb,
  .rv-hero-live .rv-hero-inner > *, .rv-hero-live .rv-btn-solid { animation: none; }
  .rv-hero-live h1 .accent { animation: none; background-size: 100% .09em; }
}


/* hero button hover (2026-10-16): the global hover goes to charcoal, which is
   the hero background, so the button vanished. On the dark hero it lightens. */
.rv-hero .rv-btn-solid:hover { background: var(--mint); color: var(--charcoal); }

/* rolling channel names in the hero (2026-10-16). Solid, very faint (outline
   strokes showed glyph overlaps in the system font), on the
   top and bottom edges only, never behind the headline. Each track holds the
   list twice and slides by half its width, so the loop has no seam. */
.rv-hero-roll {
  position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rv-roll-top { top: clamp(14px, 4vh, 40px); }
.rv-roll-bottom { bottom: clamp(14px, 4vh, 40px); }
.rv-roll-track { display: flex; width: max-content; animation: rv-roll 70s linear infinite; }
.rv-roll-bottom .rv-roll-track { animation-direction: reverse; animation-duration: 85s; animation-delay: -17s; }
.rv-roll-group {
  flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap;
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: 1.05;
}
/* words: bold sans and italic serif alternate; a faint base with a slow sheen */
.rv-roll-group b, .rv-roll-group em {
  padding: 0 .28em;
  background-image: linear-gradient(100deg,
    rgba(203,217,198,.07) 0%, rgba(203,217,198,.07) 42%,
    rgba(232,236,229,.30) 50%,
    rgba(203,217,198,.07) 58%, rgba(203,217,198,.07) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rv-sheen 9s ease-in-out infinite;
}
.rv-roll-group b { font-family: var(--body); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.rv-roll-group em { font-family: var(--display); font-style: italic; font-weight: 600; letter-spacing: -.01em; }
.rv-roll-group i { font-style: normal; font-size: .32em; color: rgba(201,138,60,.45); }
.rv-roll-bottom .rv-roll-group b, .rv-roll-bottom .rv-roll-group em { animation-delay: -4.5s; }
@keyframes rv-sheen { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@keyframes rv-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rv-roll-track, .rv-roll-group b, .rv-roll-group em { animation: none; } }

/* five stars above the 'What clients say' heading (2026-10-16). Decorative only. */
.rv-stars { display: inline-flex; gap: 4px; margin-bottom: var(--s-3); }
.rv-stars svg { width: 20px; height: 20px; fill: var(--accent-warm); }
/* the homepage section has its own heading, so the slides sit a little closer */
.rv-head-center { margin-inline: auto; text-align: center; }
.rv-section .rv-head + .rv-slides { margin-top: var(--s-6); }

/* result card header (operator, 2026-10-16): client logo in place of the name,
   sized to the old heading, Ecommerce tag on the right, then the services
   provided as small pills in place of the context paragraph. */
.rv-result-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.rv-result-logo { margin: 0; line-height: 0; }
.rv-result-logo img { height: 1.35em; width: auto; max-width: 180px; filter: brightness(0) invert(1); }
.rv-result-logo.is-lockup img { height: 2.1em; }
.rv-result-logo.is-colour img { filter: none; }
.rv-result-pill { flex: 0 0 auto; font-size: var(--fs-small); color: var(--text-inverse); padding: 4px 12px; border-radius: 999px; background: rgba(203,217,198,.10); }
.rv-metric-num small { font-size: .5em; font-family: var(--body); font-weight: 600; margin-left: 2px; }
.rv-result-body { min-width: 0; }
.rv-result-ctx strong { display: inline-block; margin-bottom: 2px; color: var(--text-inverse); font-weight: 700; }

/* homepage latest articles: a swipe row on phones (operator, 2026-10-16) so the
   three tiles take one screen instead of three. The next tile peeks in from the
   right so it reads as swipeable. Desktop keeps the three-column grid. */
@media (max-width: 767px) {
  #latest-insights-grid {
    display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-2);
    scroll-padding-inline: var(--gutter);
  }
  #latest-insights-grid::-webkit-scrollbar { display: none; }
  #latest-insights-grid > .rv-insight { flex: 0 0 82%; scroll-snap-align: start; }
  #latest-insights-grid .rv-insight p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* result card photos on phones (operator, 2026-10-16): one fixed 16:9 crop so
   the square Tossits photo matches the wide Kutzall one and both cards line up. */
@media (max-width: 639px) {
  .rv-result-media { aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }
  .rv-result-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
}

/* homepage hero fills the first desktop screen (operator, 2026-10-16), so the
   logo band only appears on scroll. 76px is the sticky header's height. */
@media (min-width: 900px) {
  .rv-hero-live { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
}

/* ============================ About page (2026-10-30) ============================ */
.rv-lead-text { max-width: 62ch; margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.6; }
.rv-head + .rv-lead-text { margin-top: var(--s-5); }
.rv-founder { display: grid; gap: var(--s-6); align-items: center; }
.rv-founder img { width: 100%; max-width: 320px; height: auto; border-radius: var(--radius); }
.rv-founder h2 { margin-bottom: var(--s-4); }
.rv-founder p:not(.rv-eyebrow) { max-width: 52ch; margin-bottom: var(--s-4); }
@media (min-width: 800px) { .rv-founder { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-8); } }
.rv-proofstrip { max-width: 640px; }
.rv-proofstrip .rv-metric-num { font-size: clamp(2.6rem, 6vw, 3.6rem); }
.rv-proof-link { display: inline-block; margin-top: var(--s-6); color: var(--mint); }

/* ============================ Services page (2026-10-30) ============================ */
.rv-feature { max-width: 760px; padding: var(--s-7); border-radius: var(--radius); background: var(--bg-inverse); color: var(--text-inverse); }
.rv-feature h2 { color: var(--text-inverse); margin-bottom: var(--s-4); }
.rv-feature p:not(.rv-eyebrow) { color: var(--text-inverse-soft); font-size: var(--fs-lead); line-height: 1.6; }
.rv-svc { display: flex; flex-direction: column; }
.rv-svc p { flex: 1; margin-bottom: var(--s-4); }
.rv-svc .arrow-link { align-self: flex-start; }
.rv-svc-cta { background: var(--mint); border-color: var(--mint); }
.rv-svc-cta h3, .rv-svc-cta p { color: var(--deep); }
.rv-svc-cta .rv-btn { align-self: flex-start; white-space: nowrap; padding-inline: 20px; font-size: .9rem; }
.rv-also { margin-top: var(--s-6); color: var(--text-soft); }
.rv-also a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rv-pricing-link { display: inline-block; margin-top: var(--s-5); }

/* ============================ Service page template (2026-10-30) ============================ */
.rv-pagehead-btn { margin-top: var(--s-6); }
.rv-prose { max-width: 760px; }
.rv-prose h2 { margin-bottom: var(--s-5); }
.rv-prose p:not(.rv-eyebrow) { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-soft); margin-bottom: var(--s-4); }
.rv-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rv-head + .rv-checks { margin-top: var(--s-6); }
.rv-checks { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .rv-checks { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }
.rv-checks li { position: relative; padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 22px); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); font-weight: 500; }
.rv-checks li::before { content: ""; position: absolute; left: var(--s-5); top: calc(var(--s-4) + .45em); width: 12px; height: 7px; border-left: 2px solid var(--accent-warm); border-bottom: 2px solid var(--accent-warm); transform: rotate(-45deg); }
.rv-profitline { padding-block: clamp(48px, 7vw, 80px); }
.rv-profitline-text { max-width: 40ch; font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; color: var(--text-inverse); }
.rv-proofcard { padding: var(--s-7); border-radius: var(--radius); background: var(--bg-inverse); color: var(--text-inverse); max-width: 760px; }
.rv-proof-note { margin-top: var(--s-5); color: var(--text-inverse-soft); }
.rv-proof-note a { color: var(--mint); margin-right: var(--s-4); }
.rv-person { display: flex; gap: var(--s-5); align-items: flex-start; flex-wrap: wrap; max-width: 760px; padding: var(--s-6); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); }
.rv-person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.rv-person > div { flex: 1; min-width: 240px; }
.rv-person h3 { margin-bottom: var(--s-3); }
.rv-person p:not(.rv-eyebrow) { color: var(--text-soft); margin-bottom: var(--s-3); }