/*
Theme Name: RedLines Child (rebuild)
Template: generatepress
*/

/* Smooth crossfade between pages — requires Chrome 111+/Edge 111+/Safari 18+ */
@view-transition {
  navigation: auto;
}

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand colours — defined in redlines-tokens.css (loaded before this file).
     --rl-navy, --rl-coral, --rl-coral-light, --rl-pink, --rl-pink-bg,
     --rl-white and the --rl-navy-* opacity scale are all aliases there. */
  --rl-off-white:  #F5F7FA;
  /* Body copy is a dark grey, NOT the navy brand primary: navy is for
     headings, labels and stats. (Redefined 2026-07-17: body text read
     as black site-wide when this pointed at --brand-primary.) */
  --rl-text-body:  #1f2937;

  /* Typography */
  --rl-font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Font sizes */
  --rl-fs-small:   0.875rem;
  --rl-fs-base:    1rem;
  --rl-fs-h3:      1.125rem;
  --rl-fs-heading: 1.125rem;
  --rl-fs-display: 1.875rem;

  /* Spacing */
  --rl-space-2:  0.5rem;
  --rl-space-3:  0.75rem;
  --rl-space-4:  1rem;
  --rl-space-5:  1.25rem;
  --rl-space-6:  1.5rem;
  --rl-space-8:  2rem;
  --rl-space-10: 2.5rem;
  --rl-space-12: 3rem;
  --rl-space-16: 4rem;
  --rl-space-20: 5rem;
  --rl-space-24: 6rem;

  /* Layout */
  --rl-max-width:      1200px;
  --rl-max-width-text: 720px;
  --rl-radius-sm:      4px;
  --rl-radius-md:      8px;
  --rl-radius-lg:      12px;
  --rl-radius-xl:      20px;
  --rl-radius-full:    9999px;

  /* Shadows */
  --rl-shadow-lg:   0 8px 32px var(--rl-navy-14), 0 4px 8px var(--rl-navy-08);
  --rl-shadow-card: 0 2px 24px var(--rl-navy-08);

  /* Transitions */
  --rl-transition: 0.2s ease;

  /* ── App design system tokens (mirrors Scan / Pro app.css) ── */

  /* App spacing — 8px grid */
  --app-space-half: 4px;
  --app-space-1:    8px;
  --app-space-2:    16px;
  --app-space-3:    24px;
  --app-space-4:    32px;
  --app-space-6:    48px;

  /* App typography */
  --app-text-h1:      24px;
  --app-text-h2:      18px;
  --app-text-body:    14px;
  --app-text-meta:    11px;
  --app-weight-title: 600;
  --app-weight-body:  500;

  /* App colours */
  --app-bg:            #f8f8f8;
  --app-surface:       #ffffff;
  --app-surface-alt:   #f0f0f8;
  --app-border:        #e5e7eb;
  --app-border-subtle: #f3f4f6;
  --app-text-primary:  var(--brand-primary);
  --app-text-secondary:#6b7280;

  /* App card */
  --app-card-radius:   8px;
  --app-card-padding:  24px;
  --app-card-shadow:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --app-card-shadow-md:0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  /* Risk level colours (1 = low green → 5 = critical red) */
  --app-risk-1:     #16a34a;
  --app-risk-1-bg:  rgba(22, 163, 74,  0.12);
  --app-risk-2:     #65a30d;
  --app-risk-2-bg:  rgba(101,163, 13,  0.12);
  --app-risk-3:     #d97706;
  --app-risk-3-bg:  rgba(217,119,  6,  0.12);
  --app-risk-4:     #ea580c;
  --app-risk-4-bg:  rgba(234, 88, 12,  0.12);
  --app-risk-5:     #dc2626;
  --app-risk-5-bg:  rgba(220, 38, 38,  0.12);

  /* Risk category colours */
  --app-physical:       #0C447C;
  --app-physical-bg:    rgba(12, 68,124, 0.10);
  --app-transitional:   #e53935;
  --app-transitional-bg:rgba(229,57, 53, 0.10);
  --app-supplier:       #6b7280;
  --app-supplier-bg:    rgba(107,114,128, 0.10);

  /* Semantic colour tokens — override in .theme-* classes */
  --color-primary:       var(--brand-accent);
  --color-primary-light: var(--brand-accent-mid);
  --color-secondary:     var(--brand-primary);

  /* Marketing page secondary text */
  --rl-text-secondary:   #374151;

  /* --rl-navy-* opacity scale and --rl-hero-height defined in redlines-tokens.css */
}

/* ============================================================
   THEME TOKENS — swap these per brand, keep component CSS neutral
   ============================================================ */
.theme-redlines {
  --color-primary:        var(--brand-accent);
  --color-primary-light:  var(--brand-accent-mid);
  --color-secondary:      var(--brand-primary);
  --color-hero-bg-image:  url('/wp-content/uploads/2026/05/AboutHero.webp');
}

/* ============================================================
   BASE RESETS (scoped to homepage block)
   ============================================================ */
.rl-homepage *,
.rl-homepage *::before,
.rl-homepage *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--rl-font);
  -webkit-font-smoothing: antialiased;
}

.rl-homepage {
  color: var(--rl-text-body);
  line-height: 1.6;
}

.rl-homepage img {
  max-width: 100%;
  height: auto;
  display: block;
}

.rl-homepage a:not(.rl-btn) {
  color: inherit !important;
  text-decoration: none !important;
}

/* Override GeneratePress link colour bleed into body text */
.rl-problem__card-body,
.rl-section-sub,
.rl-lead {
  color: var(--rl-text-body) !important;
}

.rl-lead--light {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.rl-container,
.rl-section-inner {
  width: 100%;
  max-width: var(--rl-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rl-space-6);
  padding-right: var(--rl-space-6);
}

.rl-section {
  padding-top: var(--rl-space-12);
  padding-bottom: var(--rl-space-12);
}

.rl-section--lg {
  padding-top: var(--rl-space-16);
  padding-bottom: var(--rl-space-16);
}

.rl-section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--rl-space-10);
}
.rl-section-sub {
  font-family: var(--rl-font);
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  text-align: center;
  /* Wide enough that two-sentence intros wrap to two balanced lines
     rather than leaving an orphaned word on a third. */
  max-width: 820px;
  margin: var(--rl-space-3) auto 0;
  line-height: 1.6;
  text-wrap: balance;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.rl-eyebrow {
  display: block;
  text-align: center;
  font-size: var(--rl-fs-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rl-red-dark);
  margin-bottom: var(--rl-space-3);
}

/* Keep eyebrow left-aligned inside left-column hero/content layouts */
.rl-hero__content .rl-eyebrow,
.svc-hero__inner .rl-eyebrow,
.svc-ov__hero-inner .rl-eyebrow,
.cs-detail-hero__inner .rl-eyebrow,
.about-section__text .rl-eyebrow { text-align: left; }

/* Pin hero eyebrows to exact 24px height so H1 starts at the same pixel on every page */
.svc-hero__inner .rl-eyebrow,
.svc-ov__hero-inner .rl-eyebrow {
  line-height: 24px;
  margin-top: 0;
  margin-bottom: 0;
}

.rl-eyebrow--light {
  color: var(--rl-coral-light);
}

.rl-h1 {
  /* Same clamp as .svc-hero__h1 / .svc-ov__h1 so every hero h1 maxes
     at 40px (2.5rem) at desktop. Removes the previous tier where home,
     campaign, and partner heroes rendered 8px larger than other pages. */
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--rl-white);
  letter-spacing: -0.02em;
  margin: 0 0 var(--rl-space-5);
}

.rl-h2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rl-navy);
  letter-spacing: 0;
  margin: 0 0 var(--rl-space-4);
}

.rl-lead {
  font-size: var(--rl-fs-base);
  line-height: 1.7;
  color: var(--rl-text-body);
  margin: 0 0 var(--rl-space-6);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2rem;
  font-family: var(--rl-font);
  font-size: var(--rl-fs-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--rl-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--rl-transition), color var(--rl-transition),
              border-color var(--rl-transition), transform var(--rl-transition),
              box-shadow var(--rl-transition);
  white-space: nowrap;
}

.rl-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.rl-btn--primary {
  background-color: var(--rl-red-dark);
  color: var(--rl-white);
  border-color: var(--rl-red-dark);
}

.rl-btn--primary:hover {
  background-color: var(--rl-coral);
  border-color: var(--rl-coral);
  box-shadow: 0 4px 16px rgba(var(--brand-accent-rgb), 0.4);
  color: var(--rl-white);
}

.rl-btn--outline {
  background: transparent;
  color: var(--rl-navy);
  border-color: rgba(var(--brand-primary-rgb), 0.30);
}

.rl-btn--outline:hover {
  background: var(--rl-navy-04);
  border-color: var(--rl-navy);
  color: var(--rl-navy);
}

.rl-btn--sm {
  padding: 0.6rem 1.4rem;
  font-size: var(--rl-fs-small);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.rl-hero {
  background-color: var(--rl-navy);
  background-image: url('/wp-content/uploads/2026/05/Homepage.webp');
  background-size: cover;
  background-position: center;
  height: var(--rl-hero-height);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.rl-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--rl-space-10);
  align-items: flex-start;
  padding-top: 130px;
  padding-bottom: 80px;
}

.rl-hero__content {
  width: 100%;
  max-width: 580px;
}

.rl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rl-space-4);
  align-items: center;
  margin-top: var(--rl-space-4);
}

.rl-hero__visual {
  width: 100%;
}

.rl-hero__screenshot {
  border-radius: var(--rl-radius-xl);
  box-shadow: var(--rl-shadow-lg);
  width: 100%;
}

.rl-hero__cta {
  margin-top: var(--rl-space-5);
}

/* Partner hero: text-only (no right-side logo card). Content gets the
   full hero width so the H1 fits in ~2 lines instead of cramping into 4.
   Two-class selectors so these override the desktop media-query that
   sets the parent to flex-row + content to flex 0 0 46%. */
.rl-hero__inner.rl-hero__inner--solo {
  flex-direction: column;
  align-items: flex-start;
}
.rl-hero__content.rl-hero__content--wide {
  width: 100%;
  max-width: 860px;
  flex: 1 1 auto;
}

/* Partner logo card — the white background is just a thin offset
   around the logo. Card height is fixed; width hugs the logo's
   intrinsic aspect, so wide wordmarks get wide cards, square icons
   get square cards. One CSS block handles every shape. To resize the
   card globally, change --rl-partner-card-h below. */
.rl-hero__visual.rl-hero__partner-card {
  --rl-partner-card-h: 220px;
  --rl-partner-card-p: 10px;

  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--rl-white);
  border-radius: var(--rl-radius-md);
  box-shadow: var(--rl-shadow-lg);
  padding: var(--rl-partner-card-p);
  box-sizing: border-box;
  display: block;
  height: var(--rl-partner-card-h);
  width: auto;
  max-width: 100%;
}

/* Logo height pinned in pixels (card height minus padding × 2) so the
   card width follows the logo's intrinsic aspect ratio. Three-class
   selector gives this rule higher specificity than .rl-hero__screenshot,
   removing the need for !important. */
.rl-hero__visual.rl-hero__partner-card > .rl-hero__partner-logo {
  height: calc(var(--rl-partner-card-h) - 2 * var(--rl-partner-card-p));
  width: auto;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: contain;
}

/* Partner signup form — hide the auto-populated "Partner" field
   locally rather than relying on WPForms shipping wpforms-hidden. */
.rl-partner-form .wpforms-hidden {
  display: none !important;
}

/* Accessibility: visible focus rings on every interactive element.
   :focus-visible only triggers on keyboard focus, not mouse clicks —
   so mouse users see no change but keyboard users get a clear
   indicator. Brand coral with offset reads on both light and dark
   backgrounds. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
.wpforms-submit:focus-visible,
.rl-btn:focus-visible,
/* The style guide's focus specimens ride on THIS rule rather than copying it,
   so the page cannot document a focus ring the site does not draw. See
   .rl-ds__is-focus in the style guide section at the foot of this file. */
.rl-ds__is-focus,
.rl-ds__form .rl-ds__is-focus {
  outline: 2px solid var(--rl-coral);
  outline-offset: 2px;
  border-radius: var(--rl-radius-sm);
}

/* ============================================================
   SECTION: PROBLEM
   ============================================================ */
.rl-problem {
  background-color: var(--rl-white);
}


.rl-problem__grid {
  display: flex;
  flex-direction: column;
  gap: var(--rl-space-4);
  max-width: 860px;
  margin: 0 auto;
}

.rl-problem__card {
  background-color: var(--rl-off-white);
  padding: var(--rl-space-6) var(--rl-space-8);
  border-left: 4px solid var(--rl-coral);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
}

.rl-problem__card-heading {
  font-size: var(--rl-fs-heading);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 var(--rl-space-2);
}

.rl-problem__card-body {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.65;
  margin: 0;
}



/* ============================================================
   SECTION: SECTOR APPLICABILITY
   ============================================================ */
.rl-sectors {
  background-color: var(--rl-pink-bg);
}
.rl-sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rl-space-8);
}
.rl-sectors__col {
  text-align: center;
  padding: var(--rl-space-8);
  background: var(--rl-white);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-card);
}
.rl-sectors__icon {
  font-size: 2.25rem;
  color: var(--rl-coral);
  display: block;
  margin-bottom: var(--rl-space-4);
}
.rl-sectors__heading {
  font-size: var(--rl-fs-heading);
  font-weight: 600;
  color: var(--rl-navy);
  margin: 0 0 var(--rl-space-3);
}
.rl-sectors__body {
  font-size: var(--rl-fs-small);
  color: var(--rl-text-body);
  line-height: 1.6;
  margin: 0 0 var(--rl-space-5);
}
.rl-sectors__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--rl-space-2);
  margin-top: var(--rl-space-4);
}
.rl-section-sub--light {
  color: #ffffff !important;
}
.rl-sector-chip {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rl-navy);
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-18);
  border-radius: var(--rl-radius-full);
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

/* ============================================================
   SECTION: PROOF
   ============================================================ */
.rl-proof {
  background-color: var(--rl-white);
}
.rl-proof--dark {
  background-color: var(--rl-navy);
}
.rl-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: var(--rl-space-6);
}
.rl-proof__card {
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: var(--rl-space-8);
  box-shadow: var(--rl-shadow-lg);
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
}
.rl-proof__badge {
  font-size: var(--rl-fs-small);
  font-weight: 600;
  color: var(--rl-red-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--rl-space-2);
}
.rl-proof__client {
  font-size: var(--rl-fs-heading);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 var(--rl-space-4);
}
.rl-proof__stat {
  display: flex;
  align-items: baseline;
  gap: var(--rl-space-2);
  margin-bottom: var(--rl-space-4);
  padding-bottom: var(--rl-space-4);
  border-bottom: 1px solid var(--rl-navy-08);
}
.rl-proof__stat-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rl-coral);
  line-height: 1.1;
}
.rl-proof__link {
  display: inline-block;
  margin-top: var(--rl-space-3);
  font-size: var(--rl-fs-small);
  font-weight: 600;
  /* See --rl-coral-text. There is a SECOND .rl-proof__link block below
     which also sets the colour and wins on source order, so both had to
     change; the duplicate itself is legacy and is left as it is, since
     these rules retire with the v2 conversion. */
  color: var(--rl-coral-text);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.rl-proof__link:hover { text-decoration: underline; }
.rl-proof__stat-label {
  font-size: var(--rl-fs-small);
  color: var(--rl-text-body);
  line-height: 1.3;
}
.rl-proof__body {
  font-size: var(--rl-fs-small);
  color: var(--rl-text-body);
  line-height: 1.6;
  margin: 0;
}
.rl-proof__link {
  font-size: var(--rl-fs-small);
  font-weight: 600;
  color: var(--rl-coral-text);
  text-decoration: none;
  align-self: end;
}
.rl-proof__link:hover {
  text-decoration: underline;
}
.rl-h2--light {
  color: var(--rl-white);
}


/* Item 8 of docs/SITE-TODO-2026-09-09.md (Codex F01). Below 768px the
   hero stacks, but the fixed 560px height with overflow:hidden clipped the
   product screenshot out of view entirely, leaving a tall background and
   a generic promise with no evidence. Let the hero grow (same exception
   rule 20 grants every hero on mobile) and show the screenshot as a tight
   crop on the Pro output panel, which is the part that is legible at
   phone width; the full laptop mock would render its labels at ~7px. */
@media (max-width: 767px) {
  .rl-hero { height: auto; min-height: var(--rl-hero-height); }
  .rl-hero__screenshot {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 88% 50%;
    max-width: 360px;
    display: block;
  }
}

/* ============================================================
   TABLET — 768px
   ============================================================ */
@media (min-width: 768px) {
  .rl-hero__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--rl-space-12);
  }

  .rl-hero__content {
    flex: 0 0 48%;
  }

  .rl-hero__visual {
    flex: 1;
  }
}

/* ============================================================
   DESKTOP — 1024px
   ============================================================ */
@media (min-width: 1024px) {
  .rl-hero__content {
    flex: 0 0 46%;
  }
}

/* ============================================================
   MOCK APP CARDS  (homepage 2 — app UI mockups)
   ============================================================ */

/* Outer card shell */
.rl-mock {
  font-family: var(--rl-font);
  font-size: var(--app-text-body);
  background: var(--app-surface);
  border-radius: var(--app-card-radius);
  box-shadow: var(--app-card-shadow-md);
  border: 1px solid var(--app-border);
  overflow: hidden;
}

/* Card header bar */
.rl-mock__header {
  display: flex;
  align-items: center;
  gap: var(--app-space-1);
  height: 44px;
  padding: 0 var(--app-space-2);
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
  flex-shrink: 0;
}

.rl-mock__title {
  font-size: var(--app-text-meta);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--app-text-secondary);
  flex: 1;
}

.rl-mock__icon {
  font-size: 16px !important;
  color: var(--app-text-secondary) !important;
}

.rl-mock__badge {
  font-size: var(--app-text-meta);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--rl-radius-sm);
  background: var(--app-surface-alt);
  color: var(--rl-navy);
  border: 1px solid var(--app-border);
}

/* KPI bar row */
.rl-mock__kpi-row {
  display: flex;
  border-bottom: 1px solid var(--app-border);
}

.rl-mock__kpi-cell {
  flex: 1;
  padding: var(--app-space-2) var(--app-space-3);
  border-right: 1px solid var(--app-border);
}

.rl-mock__kpi-cell:last-child {
  border-right: none;
}

.rl-mock__kpi-label {
  font-size: var(--app-text-meta);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--app-text-secondary);
  margin-bottom: 4px;
}

.rl-mock__kpi-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--app-text-primary);
}

.rl-mock__kpi-sub {
  font-size: var(--app-text-meta);
  color: var(--app-text-secondary);
  margin-top: 2px;
}

/* Risk grid table */
.rl-mock__grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--app-text-body);
}

.rl-mock__grid th {
  font-size: var(--app-text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--app-text-secondary);
  padding: var(--app-space-1) var(--app-space-1);
  text-align: center;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
  white-space: nowrap;
}

.rl-mock__grid th:first-child {
  text-align: left;
  padding-left: var(--app-space-2);
  min-width: 140px;
}

.rl-mock__grid td {
  padding: 6px var(--app-space-1);
  border-bottom: 1px solid var(--app-border-subtle);
  text-align: center;
}

.rl-mock__grid td:first-child {
  text-align: left;
  padding-left: var(--app-space-2);
  font-weight: 500;
  color: var(--app-text-primary);
  white-space: nowrap;
}

.rl-mock__grid tbody tr:last-child td {
  border-bottom: none;
}

.rl-mock__grid tbody tr:hover td {
  background: var(--rl-navy-04);
  cursor: default;
}

/* Risk level cell badge */
.rl-risk-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
}

.rl-risk-1 { background: var(--app-risk-1-bg); color: var(--app-risk-1); }
.rl-risk-2 { background: var(--app-risk-2-bg); color: var(--app-risk-2); }
.rl-risk-3 { background: var(--app-risk-3-bg); color: var(--app-risk-3); }
.rl-risk-4 { background: var(--app-risk-4-bg); color: var(--app-risk-4); }
.rl-risk-5 { background: var(--app-risk-5-bg); color: var(--app-risk-5); }

/* Body area inside a mock card */
.rl-mock__body {
  padding: var(--app-space-2);
}

/* Inline table for Pro financial data */
.rl-mock__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--app-text-body);
}

.rl-mock__table th {
  font-size: var(--app-text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-text-secondary);
  padding: var(--app-space-1) var(--app-space-2);
  border-bottom: 1px solid var(--app-border);
  text-align: left;
}

.rl-mock__table td {
  padding: 10px var(--app-space-2);
  border-bottom: 1px solid var(--app-border-subtle);
  color: var(--app-text-primary);
  font-weight: 500;
}

.rl-mock__table tbody tr:last-child td {
  border-bottom: none;
}

.rl-mock__table tbody tr:hover td {
  background: var(--rl-navy-04);
  cursor: default;
}

.rl-mock__table tbody tr:hover td.num {
  color: var(--rl-coral);
}

.rl-mock__table td.num {
  text-align: right;
  font-weight: 600;
}

/* Risk type pill */
.rl-mock__pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--rl-radius-full);
  font-size: var(--app-text-meta);
  font-weight: 600;
}

.rl-mock__pill--physical {
  color: var(--app-physical);
  background: var(--app-physical-bg);
}

.rl-mock__pill--transitional {
  color: var(--app-transitional);
  background: var(--app-transitional-bg);
}

.rl-mock__pill--supplier {
  color: var(--app-supplier);
  background: var(--app-supplier-bg);
}

/* ============================================================
   RL-CARD  — faithful HTML port of the app's RlCard component
   (q-card flat bordered + header + separator + body)
   ============================================================ */

.rl-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-card-radius);
  box-shadow: var(--app-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--rl-font);
  font-size: var(--app-text-body);
  color: var(--app-text-primary);
}

.rl-card__header {
  display: flex;
  align-items: center;
  gap: var(--app-space-1);
  padding: var(--app-space-1) var(--app-space-2);
  min-height: 44px;
  flex-shrink: 0;
}

.rl-card__header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--app-space-2);
  gap: var(--app-space-1);
}

.rl-card__icon {
  font-size: 18px !important;
  color: var(--app-text-secondary) !important;
  flex-shrink: 0;
}

.rl-card__title {
  font-size: var(--app-text-h2);
  font-weight: 600;
  color: var(--app-text-primary);
  flex: 1;
}

.rl-card__header--center .rl-card__title {
  flex: none;
}

.rl-card__sep {
  height: 1px;
  background: var(--app-border);
  flex-shrink: 0;
}

.rl-card__body {
  padding: var(--app-space-2) var(--app-space-2);
  flex: 1;
}

.rl-card__body--center {
  text-align: center;
}


/* ============================================================
   SERVICE ROW MOCK SCREENS  (homepage 2)
   ============================================================ */

/* Override the image-wrap when it holds a mock card */
.rl-svc-mock-wrap {
  background: var(--app-bg);
  padding: var(--app-space-2);
  display: flex;
  align-items: stretch;
  /* aspect-ratio:1/1 inherited from .rl-service-row__image-wrap */
}

/* scan-card / pro-card / expert-card are ALWAYS square.
   Wherever the partial is dropped, its parent's width determines the
   size and the card scales to a 1:1 aspect ratio. Do not override
   this anywhere — cap with max-width on the parent, never max-height. */
.rl-svc-mock {
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: var(--app-text-body);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  /* WCAG contrast, scoped to the decorative mocks only: the app palette
     labels sit one notch darker here so the tiny simulated text passes
     4.5:1. The real app tokens elsewhere are untouched. */
  --app-text-secondary: #4b5563;
  --app-risk-3: #b45309;
  --app-risk-4: #c2410c;
  --app-risk-5: #b91c1c;
  --app-transitional: #c62828;
  --color-transitional: #c62828;
  --risk-3: #b45309;
  --risk-4: #c2410c;
  --risk-5: #b91c1c;
}
.rl-svc-mock .rl-svc-pro__scenario-tab--active {
  background: var(--rl-red-dark);
  border-color: var(--rl-red-dark);
}
.rl-svc-mock .rl-svc-pro__map-coords {
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
}
.rl-svc-mock .rl-svc-pro__map-coords span { color: #e5e7eb; }

/* Scan — compact grid to fit all rows in the square */
.rl-svc-scan {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rl-scan-grid {
  flex: 1;
  table-layout: fixed;
  width: 100%;
}

.rl-scan-grid th,
.rl-scan-grid td {
  padding: 3px 4px;
}

/* Allow long hazard headers (e.g. "Water Scarcity") to wrap to two lines
   rather than clip under table-layout:fixed + white-space:nowrap inherited
   from .rl-mock__grid. Applies wherever the scan-card partial renders. */
.rl-scan-grid th {
  white-space: normal;
  line-height: 1.15;
  vertical-align: bottom;
}

.rl-scan-grid th:first-child,
.rl-scan-grid td:first-child {
  padding-left: 8px;
  font-size: 11px;
  width: 30%;
}

.rl-scan-grid .rl-risk-cell {
  width: 24px;
  height: 24px;
  font-size: 11px;
  border-radius: var(--rl-radius-sm);
}

/* Summary strip inside Scan mock */
.rl-svc-mock__summary {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--app-border);
}

.rl-svc-mock__kpi {
  flex: 1;
  padding: var(--app-space-1) var(--app-space-2);
  border-right: 1px solid var(--app-border);
}

.rl-svc-mock__kpi:last-child {
  border-right: none;
}

.rl-svc-mock__kpi-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-svc-mock__kpi-sub {
  font-size: var(--app-text-meta);
  color: var(--app-text-secondary);
  margin-top: 2px;
}

/* Risk badge coloured by level */
.rl-mock__badge--risk5 {
  background: var(--app-risk-5-bg);
  color: var(--app-risk-5);
  border-color: var(--app-risk-5-bg);
}

/* Pro scenario selector */
.rl-svc-pro__scenarios {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
}
.rl-svc-pro__scenario-tab {
  /* Decorative mock UI (span, not a real button — the mock is aria-hidden). */
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--rl-radius-xl);
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--app-text-secondary);
  font-family: var(--rl-font);
  line-height: 1.4;
}
.rl-svc-pro__scenario-tab--active {
  background: var(--rl-coral);
  color: white;
  border-color: var(--rl-coral);
}
.rl-svc-pro__scenario-horizon {
  font-size: 9px;
  color: var(--app-text-secondary);
  font-family: var(--rl-font);
  margin-left: auto;
}

/* Pro KPI strip */
.rl-svc-pro__kpi-strip {
  display: flex;
  border-bottom: 1px solid var(--app-border);
}

.rl-svc-pro__kpi-cell {
  flex: 1;
  padding: var(--app-space-1) var(--app-space-1);
  border-right: 1px solid var(--app-border);
  min-width: 0;
}

.rl-svc-pro__kpi-cell:last-child {
  border-right: none;
}

.rl-svc-pro__kpi-cell--hero {
  flex: 1;
}

.rl-svc-pro__hero-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.rl-svc-pro__kpi-val {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--app-text-primary);
}

/* Pro map — expands to fill remaining card height in any context */
.rl-svc-pro__map-wrap {
  position: relative;
  flex: 1;
  min-height: 140px;
  overflow: hidden;
  border-bottom: 1px solid var(--app-border);
}

.rl-svc-pro__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 55%;
  display: block;
}

.rl-svc-pro__map-marker {
  position: absolute;
  top: 42%;
  left: 52%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.rl-svc-pro__map-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.25);
  animation: rl-pulse 2s ease-out infinite;
}

.rl-svc-pro__map-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dc2626;
  border: 2.5px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.rl-svc-pro__map-popup {
  position: absolute;
  top: calc(42% - 62px);
  left: 52%;
  transform: translateX(-50%);
  background: white;
  border-radius: 5px;
  padding: 6px 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  z-index: 4;
  white-space: nowrap;
}

.rl-svc-pro__map-popup::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: white;
  border-bottom: 0;
}

.rl-svc-pro__map-popup-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--rl-navy);
  font-family: var(--rl-font);
  line-height: 1.3;
}

.rl-svc-pro__map-popup-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--app-risk-5);
  background: #fee2e2;
  border-radius: 3px;
  padding: 1px 4px;
  margin-top: 2px;
  display: inline-block;
  font-family: var(--rl-font);
}

.rl-svc-pro__map-coords {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.75);
  font-size: 9px;
  font-family: var(--rl-font);
  padding: 3px 8px;
  display: flex;
  justify-content: space-between;
}

.rl-svc-pro__map-coords span {
  color: rgba(255,255,255,0.45);
}

.rl-svc-pro__risk-overlay {
  position: absolute;
  bottom: 22px;
  right: 8px;
  background: rgba(255,255,255,0.96);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 5;
}
.rl-svc-pro__risk-header {
  font-size: 8px;
  font-weight: 700;
  color: var(--rl-navy);
  font-family: var(--rl-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  opacity: 0.6;
}
.rl-svc-pro__risk-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0;
  font-family: var(--rl-font);
}
.rl-svc-pro__risk-name {
  font-size: 9px;
  color: var(--rl-navy);
}
.rl-svc-pro__risk-val {
  font-size: 9px;
  font-weight: 600;
}
.rl-svc-pro__risk-val--physical   { color: var(--app-physical); }
.rl-svc-pro__risk-val--transitional { color: var(--app-transitional); }

@keyframes rl-pulse {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

.rl-svc-pro__table {
  table-layout: fixed;
}

.rl-svc-pro__table thead th:nth-child(2),
.rl-svc-pro__table thead th:nth-child(3) {
  text-align: right;
}

/* Expert project tile grid */
.rl-svc-expert__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--app-space-1);
  padding: var(--app-space-2);
  flex: 1;
  align-content: stretch;
}

.rl-project-tile {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-card-radius);
  padding: var(--app-space-1) var(--app-space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}

.rl-project-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-card-shadow-md);
}

.rl-project-tile__logo-wrap {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--app-surface-alt);
  border: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-project-tile__initials {
  font-size: 14px;
  font-weight: 700;
  color: var(--app-text-secondary);
  letter-spacing: 0.03em;
}

.rl-project-tile__name {
  font-size: var(--app-text-body);
  font-weight: 600;
  color: var(--app-text-primary);
  line-height: 1.2;
}

.rl-project-tile__meta {
  font-size: var(--app-text-meta);
  color: var(--app-text-secondary);
}

.rl-project-tile__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--app-text-meta);
  color: var(--app-text-secondary);
  gap: 4px;
  margin-top: 2px;
}

.rl-project-tile__stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rl-project-tile--add {
  border: 2px dashed var(--app-border);
  background: transparent;
  justify-content: center;
}

/* ============================================================
   HOMEPAGE 2 — app design system overrides (.rl-hp2 scope)
   ============================================================ */

/* Section h2s on homepage use base rl-h2 (matches decision/tool pages) */

.rl-hp2 .rl-problem__card-heading {
  font-size: var(--app-text-h2);   /* 18px / 600 */
  font-weight: var(--app-weight-title);
}

.rl-hp2 .rl-problem__card-body {
  font-size: var(--app-text-body);  /* 14px / 500 */
  font-weight: var(--app-weight-body);
}

.rl-hero .rl-lead {
  font-size: 18px;
}

/* Problem card icon */
/* hp2 problem card — icon left, full rounded card */
.rl-hp2 .rl-problem__card {
  background: var(--app-surface);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--app-card-shadow-md);
  border-left: 4px solid var(--rl-coral);
  padding: var(--app-space-3);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--app-space-2);
}

.rl-problem__card-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--rl-radius-full);
  background-color: var(--rl-pink-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-problem__card-icon {
  font-size: 20px !important;
  color: var(--rl-coral);
  display: block;
}

.rl-problem__card-text {
  flex: 1;
  min-width: 0;
}


/* hp2: section background rhythm */
.rl-hp2 .rl-problem  { background-color: var(--rl-off-white); }


/* ============================================================
   SCROLL SNAP — homepage only
   proximity mode: snaps when near a section boundary but
   does not trap the user inside tall sections (e.g. services).
   snap-margin-top offsets the GeneratePress sticky nav.
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 122px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.rl-homepage > section {
  scroll-margin-top: 122px;
}



@media (min-width: 768px) {
  .rl-hp2 .rl-problem__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Compact mock variant — tighter for step cards */
.rl-mock--compact .rl-mock__kpi-cell {
  padding: var(--app-space-1) var(--app-space-2);
}

.rl-mock--compact .rl-mock__kpi-value {
  font-size: 18px;
}

.rl-mock--compact .rl-mock__table td {
  padding: 7px var(--app-space-2);
}

/* ── Step app cards (rl-card shell + photo + body) ─────────────────── */
.rl-step-app {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rl-step-app__img-wrap {
  flex: 0 0 auto;
  height: 140px;
  overflow: hidden;
  background: var(--app-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--app-space-2);
}

.rl-step-app__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.rl-step-app__body {
  padding: var(--app-space-3) var(--app-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--app-space-1);
}

.rl-step-app__num {
  width: 36px;
  height: 36px;
  margin-bottom: var(--app-space-1);
}

.rl-step-app__heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--app-text-primary);
  margin: 0;
  line-height: 1.3;
}

.rl-step-app__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--app-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE BASE — font / reset scope
═══════════════════════════════════════════════════ */

.svc-page {
  font-family: var(--rl-font);
  color: var(--rl-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.svc-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.svc-page a:not(.rl-btn) {
  color: inherit;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════
   SERVICES OVERVIEW PAGE
═══════════════════════════════════════════════════ */

.svc-ov__hero {
  position: relative;
  height: var(--rl-hero-height);
  background: var(--rl-navy);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.svc-ov__hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--color-hero-bg-image);
  background-size: cover;
  background-position: center 40%;
  filter: brightness(0.5);
}
/* Contact/request pages: zoom and pull the laptop photo right so the
   bright screen edge sits clear of the headline text. */
@media (min-width: 1025px) {
  .contact-page .svc-ov__hero-bg {
    background-size: 130% auto;
    background-position: 100% 40%;
  }
}

.svc-ov__hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 130px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
}

.svc-ov__h1 {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: white;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 16px 0 20px;
  height: 2.3em;
  overflow: hidden;
}

.svc-ov__lead {
  font-size: 18px;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin-bottom: 32px;
  line-height: 1.6;
}

.svc-ov__hero-inner .rl-btn {
  align-self: flex-start;
  margin-top: auto;
}

.svc-ov__products {
  padding: var(--rl-space-16) 0;
  background: var(--rl-off-white);
}

.svc-ov__h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--color-secondary);
  max-width: 820px;
  margin: 12px auto 16px;
  text-align: center;
  line-height: 1.2;
}

.svc-ov__subtitle {
  font-size: 16px;
  color: var(--rl-text-secondary);
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  line-height: 1.6;
}

.svc-ov__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* product column: interactive card on top, text below */
.svc-ov__product-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0; /* prevent table content from expanding column past 1fr */
}

/* square wrapper — same pattern as .rl-service-row__image-wrap on homepage */
.svc-ov__mock-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--app-card-radius);
}

.svc-ov__product-col .rl-svc-mock {
  transition: transform 0.2s, box-shadow 0.2s;
}

.svc-ov__product-col .rl-svc-mock:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--rl-navy-14);
}

.svc-ov__card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.svc-ov__card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0;
}

.svc-ov__card-text {
  font-size: 15px;
  color: var(--rl-text-secondary);
  margin: 0;
  line-height: 1.6;
  flex: 1;
}

.svc-ov__footer-note {
  text-align: center;
  margin-top: 48px;
  font-size: 15px;
  color: var(--rl-text-secondary);
}

.svc-ov__footer-note a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ── Services overview: methodology section ── */
.svc-ov__method {
  padding: var(--rl-space-20) 0;
  background: var(--rl-navy);
}
.svc-ov__method .rl-section-header {
  margin-bottom: 52px;
}
.svc-ov__method .rl-eyebrow {
  color: var(--rl-red-dark);
}
.svc-ov__method .rl-h2 {
  color: white;
}
.svc-ov__method .rl-section-sub {
  color: rgba(255,255,255,0.7);
}
.svc-ov__method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.svc-ov__method-item {
  padding: 28px 24px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--rl-radius-lg);
  border-left: 3px solid var(--rl-coral);
}
.svc-ov__method-icon {
  font-size: 28px;
  color: var(--rl-coral);
  display: block;
  margin-bottom: 14px;
}
.svc-ov__method-heading {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 10px;
}
.svc-ov__method-body {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 900px) {
  .svc-ov__method-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .svc-ov__method-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — hero
═══════════════════════════════════════════════════ */

.svc-hero {
  position: relative;
  height: var(--rl-hero-height);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.svc-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--color-hero-bg-image);
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.5);
}

/* Tool hero — plain navy background */
.svc-hero--tool {
  background: var(--rl-navy);
}
.svc-hero--tool .svc-hero__bg { display: none; }

.svc-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 130px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
}

.svc-hero__h1 {
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: white;
  max-width: 880px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 16px 0 20px;
  /* Pin to 2 lines so 1-line and 2-line H1s reserve identical space
     and the elements below sit at the same pixel on every service page.
     min-height (not height) is required in flex column — plain height
     gets treated as a hint and the H1 shrinks to its content. */
  min-height: 2.3em;
}

/* Service-name pill: sits between the H1 (question) and the lead so
   the visitor sees both the wayfinding label ("Portfolio Exposure")
   and the question that brought them here. Self-align flex-start so
   the pill hugs its content instead of stretching the flex row. */
.svc-hero__service {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(236, 82, 82, 0.65);
  border-radius: var(--rl-radius-full);
  color: var(--rl-coral);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.svc-hero__lead {
  font-size: 18px;
  color: rgba(255,255,255,0.82);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.6;
  /* Pin to 4 lines (the longest current lead) so the lead's bottom
     edge — and the CTA row below it — land on the same pixel on every
     service page. */
  min-height: calc(4 * 1.6em);
}

.svc-hero__ctas {
  display: flex;
  gap: 16px;
  margin-top: auto;
  flex-wrap: wrap;
  align-items: center;
}
.svc-hero__login-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.svc-hero__login-link:hover { color: #ffffff; text-decoration: underline; }
.svc-hero__login-link[href=""] { display: none; }

.rl-btn--outline-light {
  border: 2px solid rgba(255,255,255,0.6);
  color: white;
  background: transparent;
  padding: 10px 22px;
  border-radius: var(--rl-radius-full);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.rl-btn--outline-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: white;
  color: white;
}

/* Shared section heading + subtitle */
.svc-h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-secondary);
  max-width: 640px;
  margin: 12px auto 16px;
  line-height: 1.2;
  text-align: center;
}

.svc-subtitle {
  font-size: 16px;
  color: var(--rl-text-secondary);
  max-width: 600px;
  margin: 0 auto 52px;
  line-height: 1.6;
  text-align: center;
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — Is This Right For You?
═══════════════════════════════════════════════════ */

.svc-rfv {
  padding: var(--rl-space-16) 0;
  background: white;
  text-align: center;
}

.svc-rfv__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.svc-rfv__icon {
  font-size: 48px;
  color: var(--rl-coral);
  display: block;
  margin: 0 auto 16px;
}

.svc-rfv__heading {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 10px;
}

.svc-rfv__body {
  font-size: 14px;
  color: var(--rl-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — What You Get
═══════════════════════════════════════════════════ */

.svc-wyg {
  padding: var(--rl-space-16) 0;
  background: var(--rl-off-white);
}

.svc-wyg__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}


.svc-wyg__body {
  font-size: 15px;
  color: var(--rl-text-secondary);
  line-height: 1.7;
  margin: 0 0 16px;
}

.svc-wyg__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 24px 0 8px;
}

.svc-wyg__list {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-wyg__list li {
  font-size: 14px;
  color: var(--rl-text-secondary);
  line-height: 1.5;
}

.svc-wyg__img-wrap {
  border-radius: var(--rl-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px var(--rl-navy-14);
}

.svc-wyg__img {
  width: 100%;
  height: auto;
  display: block;
}


/* card partial in the wyg column */
.svc-wyg__card-wrap {
  display: flex;
  align-items: flex-start;
}

.svc-wyg__card-wrap .rl-svc-mock {
  width: 100%;
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — How It Works
═══════════════════════════════════════════════════ */

.svc-how {
  padding: var(--rl-space-16) 0;
  background: white;
  text-align: center;
}

.svc-how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 0;
}

.svc-how__step {
  padding: 32px 28px;
  text-align: center;
  border: 1px solid var(--app-border);
  border-radius: var(--rl-radius-lg);
  background: white;
}

.svc-how__step-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rl-navy);
  color: white;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  letter-spacing: -0.02em;
}

.svc-how__step-heading {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 12px;
}

.svc-how__step-body {
  font-size: 14px;
  color: var(--rl-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.svc-how__note {
  margin-top: 36px;
  font-size: 13px;
  color: var(--rl-text-secondary);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — Reasons / Who It's For
═══════════════════════════════════════════════════ */

.svc-reasons {
  padding: var(--rl-space-16) 0;
  background: var(--rl-pink-bg, #fff5f5);
}

.svc-reasons__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 0;
}

.svc-reasons__card {
  padding: 28px;
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  background: white;
  box-shadow: var(--app-card-shadow-md);
}

.svc-reasons__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 10px;
}

.svc-reasons__body {
  font-size: 14px;
  color: var(--rl-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   SERVICE PAGE — CTA strip
═══════════════════════════════════════════════════ */

.svc-cta {
  padding: 56px 0;
  background: white;
  text-align: center;
  border-top: 1px solid var(--app-border);
}

.svc-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.svc-cta__text {
  font-size: 16px;
  color: var(--rl-text-secondary);
  margin: 0;
}

.svc-cta__link {
  color: var(--rl-red-dark);
  font-weight: 600;
  text-decoration: none;
}

.svc-cta__link:hover {
  text-decoration: underline;
}

.svc-cta__btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   GENERATEPRESS HEADER & NAV
═══════════════════════════════════════════════════ */

/* Header background — white with subtle bottom border */
.site-header,
#site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--rl-navy-08);
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible !important;
}

/* Ensure logo container never clips logo in any sticky/scroll state */
.inside-header {
  overflow: visible !important;
}
.site-branding-container {
  flex-shrink: 0;
  overflow: visible;
}

/* Logo sizing */
.site-header .custom-logo,
.site-header img.header-image {
  max-height: 56px;
  width: auto;
}

/* Hide GeneratePress site title text — logo image already contains the wordmark */
.site-branding .main-title {
  display: none !important;
}

/* Header inner — vertical breathing room, natural item widths */
.inside-header {
  padding: 12px 24px !important;
  position: relative;
}

/* Force solid sticky header on single post pages */
body.single .site-header,
body.single #site-header {
  position: sticky !important;
  top: 0 !important;
  background: #ffffff !important;
}

/* Prevent GeneratePress sticky nav from shrinking on scroll */
/* GP Premium adds .navigation-stick to .main-navigation; also catch any .shrink/.shrunk variants */
.main-navigation.navigation-stick .inside-navigation {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.main-navigation.navigation-stick .custom-logo,
.main-navigation.navigation-stick img.header-image,
.main-navigation.navigation-stick .site-title a {
  max-height: 56px !important;
}
.main-navigation.navigation-stick {
  transition: none !important;
}
.site-header.shrink .inside-header,
.site-header.shrunk .inside-header {
  padding: 12px 24px !important;
}
.site-header.shrink .custom-logo,
.site-header.shrink img.header-image,
.site-header.shrunk .custom-logo,
.site-header.shrunk img.header-image {
  max-height: 56px !important;
}
.site-header.shrink,
.site-header.shrunk {
  transition: none !important;
}

/* Offset sticky header below WP admin bar when logged in */
body.admin-bar .site-header,
body.admin-bar #site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar #site-header {
    top: 46px;
  }
}

/* Nav links */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-item > a {
  line-height: 30px;
}

/* Prevent nav items from wrapping to a second row */
#primary-menu.menu {
  flex-wrap: nowrap !important;
  align-items: center;
}
/* Nav items — natural width, centred text */
.main-navigation .main-nav ul.menu > li:not(.nav-cta):not(.rl-nav-login) {
  text-align: center;
}
/* Hide dropdown chevrons — dropdown still works on hover */
.main-navigation .main-nav .menu > li > a .dropdown-menu-toggle {
  display: none;
}

.main-navigation .main-nav .menu > li.nav-cta {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.main-navigation .main-nav .menu > li > a {
  font-family: var(--rl-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--rl-navy) !important;
  text-decoration: none;
  padding: 0 14px;
  transition: color var(--rl-transition);
}

.main-navigation .main-nav .menu > li > a:hover,
.main-navigation .main-nav .menu > li.current-menu-item > a,
.main-navigation .main-nav .menu > li.current-menu-ancestor > a {
  color: var(--rl-red-dark) !important;
}
/* Decisions (#decisions) and Tools nav items — never auto-highlighted */
.main-navigation .main-nav .menu > li.menu-item-141.current-menu-item > a,
.main-navigation .main-nav .menu > li.menu-item-141.current-menu-ancestor > a,
.main-navigation .main-nav .menu > li.menu-item-141.current_page_item > a,
.main-navigation .main-nav .menu > li.menu-item-147.current-menu-item > a,
.main-navigation .main-nav .menu > li.menu-item-147.current-menu-ancestor > a,
.main-navigation .main-nav .menu > li.menu-item-147.current_page_item > a {
  color: var(--rl-navy) !important;
}

/* Dropdown chevron on parent items */
.main-navigation .main-nav .menu > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
  opacity: 0.5;
}

/* Dropdown submenus — premium design */
.main-navigation .main-nav .sub-menu {
  background: #ffffff;
  border-radius: 10px;
  min-width: 220px;
  width: auto !important;
  margin-top: 0 !important;
  left: 0 !important;
  padding: 8px 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease !important;
}

/* Mobile nav: restore sub-menu to normal document flow so it doesn't overlap siblings */
.main-navigation.toggled .main-nav .sub-menu {
  position: static !important;
  transform: none !important;
  left: auto !important;
  border-radius: 0;
  min-width: 0;
}

/* Border and shadow only when visible — prevents ghost bar on hover-off */
.main-navigation:not(.toggled) ul li:hover > .sub-menu,
.main-navigation:not(.toggled) ul li.sfHover > .sub-menu {
  border: 1px solid var(--rl-navy-10);
  border-left: 4px solid var(--rl-coral);
  box-shadow: 0 12px 40px var(--rl-navy-14), 0 2px 8px var(--rl-navy-06);
}

/* Slide down on reveal */
.main-navigation:not(.toggled) ul li:hover > ul,
.main-navigation:not(.toggled) ul li.sfHover > ul {
  transform: translateY(0);
}

.main-navigation .main-nav .sub-menu a {
  font-family: var(--rl-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--rl-navy) !important;
  padding: 10px 20px;
  line-height: 1.3;
  transition: color 120ms ease, background 120ms ease;
}

.main-navigation .main-nav .sub-menu a:hover {
  color: var(--rl-coral) !important;
  background: rgba(var(--brand-accent-rgb), 0.05);
}

/* Nav group label — non-interactive section header in dropdown */
.main-navigation .main-nav .sub-menu li.nav-group-label > a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-navy-40) !important;
  cursor: default;
  padding: 12px 20px 4px;
  pointer-events: none;
}
.main-navigation .main-nav .sub-menu li.nav-group-label > a:hover {
  background: transparent;
  color: var(--rl-navy-40) !important;
}

/* Contact Us — coral pill button */
.main-navigation .main-nav .menu > li.nav-cta > a {
  background: var(--rl-red-dark) !important;
  color: #ffffff !important;
  border-radius: var(--rl-radius-full);
  padding: 10px 22px !important;
  line-height: 1.2 !important;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
}

.main-navigation .main-nav .menu > li.nav-cta > a::after {
  content: ' ›';
}

.main-navigation .main-nav .menu > li.nav-cta > a:hover {
  background: var(--rl-coral) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════
   MOCK CARD SCALING
   All sizes are relative to card width (cqi units).
   Native design width = 540px → 1px ≈ 0.185cqi
   Everything scales up/down as the square resizes.
═══════════════════════════════════════════════════ */

/* header */
.rl-svc-mock .rl-card__header        { min-height: 8.1cqi; padding: 1.5cqi 3.0cqi; gap: 1.5cqi; }
.rl-svc-mock .rl-card__icon          { font-size: 3.3cqi !important; }
.rl-svc-mock .rl-card__title         { font-size: 3.3cqi; }
.rl-svc-mock .rl-mock__badge         { font-size: 2.0cqi; padding: 0.4cqi 1.5cqi; border-radius: 0.75cqi; }

/* scan risk grid */
.rl-svc-mock .rl-mock__grid          { font-size: 2.6cqi; }
.rl-svc-mock .rl-mock__grid th       { font-size: 2.0cqi; padding: 0.6cqi 0.75cqi; }
.rl-svc-mock .rl-mock__grid td       { padding: 1.1cqi 0.75cqi; }
.rl-svc-mock .rl-scan-grid th:first-child,
.rl-svc-mock .rl-scan-grid td:first-child { padding-left: 1.5cqi; font-size: 2.1cqi; }

/* risk level badges */
.rl-svc-mock .rl-risk-cell           { width: 5.9cqi; height: 5.9cqi; font-size: 2.4cqi; border-radius: 1.1cqi; }

/* pro scenario tabs */
.rl-svc-mock .rl-svc-pro__scenarios        { padding: 0.9cqi 1.5cqi; gap: 0.75cqi; }
.rl-svc-mock .rl-svc-pro__scenario-tab    { font-size: 1.7cqi; padding: 0.4cqi 1.4cqi; }
.rl-svc-mock .rl-svc-pro__scenario-horizon { font-size: 1.7cqi; }

/* pro KPI strip */
.rl-svc-mock .rl-svc-pro__kpi-cell  { padding: 1.5cqi; }
.rl-svc-mock .rl-mock__kpi-label    { font-size: 1.85cqi; margin-bottom: 0.5cqi; }
.rl-svc-mock .rl-svc-pro__hero-val  { font-size: 4.1cqi; }
.rl-svc-mock .rl-svc-pro__kpi-val   { font-size: 3.0cqi; }
.rl-svc-mock .rl-svc-mock__kpi-sub  { font-size: 1.85cqi; }

/* pro map — fills remaining card height in all contexts */
.rl-svc-mock .rl-svc-pro__map-wrap  { flex: 1; height: auto; }
.rl-svc-mock .rl-svc-pro__map-dot   { width: 3.0cqi; height: 3.0cqi; }
.rl-svc-mock .rl-svc-pro__map-pulse { width: 5.9cqi; height: 5.9cqi; }
.rl-svc-mock .rl-svc-pro__map-popup { padding: 1.1cqi 1.85cqi; border-radius: 0.9cqi; }
.rl-svc-mock .rl-svc-pro__map-popup-title { font-size: 1.85cqi; }
.rl-svc-mock .rl-svc-pro__map-popup-badge { font-size: 1.7cqi; padding: 0.2cqi 0.75cqi; border-radius: 0.56cqi; }
.rl-svc-mock .rl-svc-pro__map-coords      { font-size: 1.7cqi; padding: 0.56cqi 1.5cqi; }

/* pro risk overlay */
.rl-svc-mock .rl-svc-pro__risk-overlay   { padding: 1cqi 1.5cqi; border-radius: 0.9cqi; bottom: 3.5cqi; right: 1.2cqi; }
.rl-svc-mock .rl-svc-pro__risk-header    { font-size: 1.4cqi; margin-bottom: 0.6cqi; }
.rl-svc-mock .rl-svc-pro__risk-row       { gap: 2.2cqi; }
.rl-svc-mock .rl-svc-pro__risk-name      { font-size: 1.7cqi; }
.rl-svc-mock .rl-svc-pro__risk-val       { font-size: 1.7cqi; }

/* pro risk table */
.rl-svc-mock .rl-mock__table         { font-size: 2.6cqi; }
.rl-svc-mock .rl-mock__table th      { font-size: 2.0cqi; padding: 1.2cqi 1.85cqi; }
.rl-svc-mock .rl-mock__table td      { padding: 1.4cqi 1.85cqi; }
.rl-svc-mock .rl-mock__pill          { font-size: 1.85cqi; padding: 0.37cqi 1.1cqi; }

/* expert project tiles */
.rl-svc-mock .rl-svc-expert__grid        { gap: 1.5cqi; padding: 2.0cqi; }
.rl-svc-mock .rl-project-tile            { gap: 0.75cqi; padding: 1.5cqi; }
.rl-svc-mock .rl-project-tile__logo-wrap { width: 6.3cqi; height: 6.3cqi; border-radius: 1.1cqi; }
.rl-svc-mock .rl-project-tile__initials  { font-size: 2.6cqi; }
.rl-svc-mock .rl-project-tile__name      { font-size: 2.4cqi; }
.rl-svc-mock .rl-project-tile__meta      { font-size: 1.85cqi; }
.rl-svc-mock .rl-project-tile__stats     { font-size: 2.0cqi; gap: 0.75cqi; margin-top: 0.37cqi; }


/* ═══════════════════════════════════════════════════
   CASE STUDIES — index hero
═══════════════════════════════════════════════════ */

.cs-hero {
  position: relative;
  overflow: hidden;
}
.cs-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--color-hero-bg-image);
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.42) saturate(0.7);
}
.cs-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 60px;
}

.cs-hero__cards-row {
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
}

.cs-hero-cards__h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: #ffffff;
  margin: 8px 0 12px;
  text-align: center;
}

.cs-hero-cards__subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 1.6;
}
.cs-hero__h1 {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  color: white;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 20px;
  max-width: 720px;
}
.cs-hero__lead {
  font-size: 18px;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   CASE STUDIES — index grid
═══════════════════════════════════════════════════ */

.cs-grid-section {
  padding: 72px 0;
  background: var(--rl-off-white);
}
.cs-grid__h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 12px auto 16px;
  text-align: center;
  max-width: 640px;
  line-height: 1.2;
}
.cs-grid__subtitle {
  font-size: 16px;
  color: var(--rl-text-secondary);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 52px;
  line-height: 1.6;
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ═══════════════════════════════════════════════════
   CASE STUDY CARD — reusable partial
═══════════════════════════════════════════════════ */

.cs-card {
  background: white;
  border-radius: var(--rl-radius-lg);
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--rl-coral);
  box-shadow: var(--rl-shadow-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(var(--brand-primary-rgb), 0.13);
  text-decoration: none;
  color: inherit;
}
.cs-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cs-card__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--rl-coral);
  letter-spacing: 0.08em;
}
.cs-card__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--rl-radius-full);
  background: var(--rl-pink-bg);
  color: var(--rl-coral);
  border: 1px solid rgba(var(--brand-accent-rgb), 0.25);
}
.cs-card__badge--expert {
  background: var(--rl-navy-06);
  color: var(--rl-navy);
  border-color: rgba(var(--brand-primary-rgb), 0.15);
}
.cs-card__badge--scan {
  background: rgba(16,185,129,0.08);
  color: #047857;
  border-color: rgba(16,185,129,0.25);
}
.cs-card__client {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-card__client-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--rl-radius-md);
  background: var(--rl-navy-04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.04em;
  overflow: hidden;
}
.cs-card__client-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
}
.cs-card__client-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-navy);
  line-height: 1.3;
}
.cs-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0;
  line-height: 1.4;
}
.cs-card__body {
  font-size: 13px;
  color: var(--rl-text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.cs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
.cs-card__meta-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--rl-radius-full);
  background: var(--rl-off-white);
  color: var(--rl-text-secondary);
  border: 1px solid var(--app-border);
}
.cs-card__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-coral);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   CASE STUDY DETAIL PAGE
═══════════════════════════════════════════════════ */

.cs-detail-hero {
  position: relative;
  min-height: var(--rl-hero-height);
  background: var(--rl-navy);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.cs-detail-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--color-hero-bg-image);
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.5);
}
.cs-detail-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 130px;
  padding-bottom: 80px;
}
.cs-detail-hero__h1 {
  /* Aligned with .rl-h1 / .svc-hero__h1 — 40px (2.5rem) max at desktop. */
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: white;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
  max-width: 800px;
}
.cs-detail-hero__lead {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 660px;
}
.cs-detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--rl-radius-lg);
  overflow: hidden;
  max-width: 720px;
}
.cs-detail-hero__meta-item {
  flex: 1;
  padding: 14px 20px;
  background: rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.12);
  border-left: 2px solid var(--rl-coral);
  min-width: 140px;
}
.cs-detail-hero__meta-item:last-child { border-right: none; }
.cs-detail-hero__meta-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rl-coral-light);
  margin-bottom: 4px;
}
.cs-detail-hero__meta-val {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: white;
}
/* ── CS meta panel — white card below hero ── */
/* Summary bar sits ON the hero, anchored to its bottom edge: the panel
   is a zero-height hook right after the hero and the card is absolutely
   positioned 28px up from it, so any card height stays contained and
   the next section always starts exactly at the hero's bottom edge. */
.cs-meta-panel {
  background: transparent;
  padding: 0;
  position: relative;
  z-index: 2;
  height: 0;
}
.cs-meta-panel > .rl-section-inner {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
}
@media (max-width: 768px) {
  /* The stacked 2x2 card is much taller on mobile: a modest straddle
     instead of full containment, back in normal flow. */
  .cs-meta-panel { height: auto; margin-top: -60px; }
  .cs-meta-panel > .rl-section-inner { position: static; }
}
.cs-meta-panel__inner {
  display: flex;
  background: white;
  border-radius: var(--rl-radius-lg);
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--rl-coral);
  box-shadow: 0 14px 36px rgba(11, 31, 58, 0.14);
  overflow: hidden;
}
.cs-meta-item {
  flex: 1;
  padding: 18px 24px;
  border-right: 1px solid var(--app-border);
}
.cs-meta-item:last-child { border-right: none; }
.cs-meta-item__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rl-red-dark);
  margin-bottom: 4px;
}
.cs-meta-item__val {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-navy);
}

.cs-challenge {
  padding: 72px 0;
  background: white;
}
.cs-challenge__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: start;
  margin-top: 32px;
}
.cs-h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 12px 0 20px;
  line-height: 1.3;
  max-width: 640px;
}
.cs-body {
  font-size: 15px;
  color: var(--rl-text-secondary);
  line-height: 1.75;
  margin: 0 0 16px;
  max-width: 620px;
}
.cs-stat-card {
  background: var(--rl-navy);
  border-radius: var(--rl-radius-lg);
  padding: 44px 36px;
  text-align: center;
  min-width: 220px;
  flex-shrink: 0;
  border-top: 4px solid var(--rl-coral);
}
.cs-stat-card__val {
  font-size: 4rem;
  font-weight: 800;
  color: var(--rl-coral);
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.cs-stat-card__label {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  max-width: 160px;
  margin: 0 auto;
}
.cs-solution {
  padding: var(--rl-space-20) 0;
  background: var(--rl-off-white);
}
.cs-solution__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 32px;
}
/* Media variant: solution narrative left, supporting photo right.
   All five case-study photos share the 1360x960 master crop. */
.cs-solution__cols--media {
  grid-template-columns: 7fr 5fr;
  align-items: center;
}
.cs-solution__text .cs-body { margin: 0 0 16px; }
.cs-solution__text .cs-body:last-child { margin-bottom: 0; }
.cs-solution__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rl-radius-lg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}
.cs-outcomes {
  padding: var(--rl-space-20) 0;
  background: white;
}
.cs-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 0;
}
.cs-outcome-card {
  background: var(--rl-off-white);
  border-radius: var(--rl-radius-lg);
  border-left: 4px solid var(--rl-coral);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Item 46 of docs/SITE-TODO-2026-09-09.md (F18): the 01/02/03 sat in a
   tinted circle and read like a result. Now a quiet label; the text is the
   result. Mondelez uses word labels (Scope / Capability / Use) here. */
.cs-outcome-card__icon {
  font-size: 11px;
  font-weight: 700;
  color: var(--rl-navy-40, rgba(11, 31, 58, 0.4));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.cs-outcome-card__text {
  font-size: 15px;
  color: var(--color-secondary);
  line-height: 1.65;
  margin: 0;
  font-weight: 500;
}

/* ── CS responsive ── */
@media (max-width: 768px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }
  .cs-meta-panel__inner {
    flex-wrap: wrap;
  }
  .cs-meta-item {
    flex: 0 0 50%;
    border-bottom: 1px solid var(--app-border);
  }
  .cs-meta-item:nth-child(2n) { border-right: none; }
  .cs-meta-item:nth-last-child(-n+2) { border-bottom: none; }
  .cs-challenge__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cs-solution__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cs-solution__cols--media { gap: 28px; }
  .cs-outcomes__grid {
    grid-template-columns: 1fr;
  }
  .cs-idx-grid {
    grid-template-columns: 1fr;
  }
  .cs-challenge__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── CS index card grid ── */
.cs-idx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto auto auto;
  column-gap: 24px;
  row-gap: 24px;
  margin-top: 40px;
}
.cs-idx-card {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  background: white;
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: var(--rl-space-8);
  text-decoration: none;
  box-shadow: var(--rl-shadow-lg);
  transition: box-shadow 0.2s, transform 0.2s;
}
.cs-idx-card:hover {
  box-shadow: 0 8px 32px var(--rl-navy-14);
  transform: translateY(-2px);
}
.cs-idx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cs-idx-card .rl-proof__link {
  align-self: end;
  padding-top: var(--rl-space-2);
}
.cs-idx-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--rl-space-4);
  align-self: start;
}
.cs-idx-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--rl-radius-sm);
  background: var(--rl-off-white);
  color: var(--rl-navy);
  border: 1px solid var(--rl-navy-10);
}

/* ── CS index card logo ── */
.cs-idx-card__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  object-position: center;
  background: var(--rl-off-white);
  border: 1px solid var(--rl-navy-08);
  border-radius: 10px;
  padding: 8px;
  flex-shrink: 0;
  display: block;
}
/* Anonymous clients get a neutral icon chip instead of a fake logo. */
.cs-idx-card__logo--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-idx-card__logo--icon .material-icons {
  font-size: 30px;
  color: var(--rl-navy-40);
}

/* ── CS challenge cols ── */
.cs-challenge__cols {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: start;
  margin-top: 32px;
}

/* ── CS solution dark variant ── */
.cs-solution--dark {
  background: var(--rl-navy);
}
.cs-h2--light {
  color: white;
}
.cs-body--light {
  color: rgba(255,255,255,0.75);
}

/* ── CS quote band ── */
.cs-quote-band {
  padding: var(--rl-space-20) 0;
  background: var(--rl-navy);
}
.cs-quote {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.cs-quote::before {
  content: '\201C';
  display: block;
  font-size: 6rem;
  color: var(--rl-coral);
  line-height: 0.6;
  margin-bottom: 24px;
  font-family: var(--rl-font);
}
.cs-quote__text {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: white;
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 28px;
  font-weight: 400;
}
.cs-quote__author {
  font-size: 13px;
  color: var(--rl-coral);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════ */

.about-pillars {
  padding: var(--rl-space-20) 0;
  background: var(--rl-off-white);
}
.about-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.about-pillar {
  background: white;
  border: 1px solid var(--rl-navy-10);
  border-left: 4px solid var(--rl-coral);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  padding: 28px 24px;
}
.about-pillar__icon {
  font-size: 24px;
  color: var(--rl-coral);
  margin-bottom: 16px;
}
.about-pillar__h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 10px;
  line-height: 1.3;
}
.about-pillar__lead {
  font-size: 15px;
  font-weight: 600;
  color: var(--rl-text-secondary);
  margin: 0 0 14px;
  line-height: 1.5;
}
.about-pillar__list {
  margin: 0;
  padding-left: 18px;
}
.about-pillar__list li {
  font-size: 14px;
  color: var(--rl-text-secondary);
  line-height: 1.65;
  margin-bottom: 6px;
}
.about-partners {
  padding: 72px 0;
  background: white;
  text-align: center;
}
.about-partners__inner {
  max-width: 680px;
  margin: 0 auto;
}
.about-h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 12px 0 16px;
  line-height: 1.3;
}
.about-body {
  font-size: 15px;
  color: var(--rl-text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════ */

.contact-form-section {
  padding: var(--rl-space-20) 0;
  background: var(--rl-off-white);
}
.contact-form-section__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: start;
}
/* ── The utility form family: /contact/ and /request-documents/ ──
   The v2 review: "its narrower inset does not line up with the main hero
   content. Harmonise the form family without altering fields, consent or
   delivery."

   It did not line up, and the step was small enough to read as a
   mistake rather than a decision. Measured at 1440 before this change:
   the hero wrap starts at x=96 and runs 1248px; the form section used
   .rl-section-inner at 1200px, starting at x=120, and the white card
   added another 24px of its own, so the form's first pixel sat at x=144.
   Two containers and a card, three different left edges down one page.

   SCOPED TO .rl-v2, WHICH NOW REACHES FURTHER THAN THESE TWO PAGES, and
   that was checked rather than assumed. /free-screening/ and the eight
   referral pages took .rl-v2 in the 15 October conversion, so they get
   this too. Looked at before keeping it: the partner form reads better
   without the card, its co-branding, consent line and fields are
   untouched, and the review asks for the same thing there ("the
   co-branding above the form adds height; tighten grouping while keeping
   the relationship clear"). The campaign pages have no .rl-v2 and are
   genuinely untouched.

   THE CARD GOES WITH IT. A white box with a border on a grey ground is
   the same marketing device removed from the policy pages on 15 October,
   and here it was also the thing introducing the third edge. The form
   sits on the page; the panel beside it keeps its own alignment. */
.rl-v2 .contact-form-section .rl-section-inner {
  /* The same expression .rl-v2__wrap uses, not a token: the wrap is
     declared inline as min(78rem, 100% - 3rem) and there is no custom
     property for it, so copying the value is the only way to guarantee
     the two agree. If the wrap ever becomes a token, both move together. */
  width: min(78rem, 100% - 3rem);
  max-width: none;
  padding-inline: 0;
  margin-inline: auto;
}
.rl-v2 .contact-form-wrap {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* The section kept --rl-space-20 (80px) top and bottom, which was sized
   for a card floating in it. With the card gone that is just a gap
   between the hero and the first thing a visitor has to read, on a page
   whose whole job is the form. The review: "the current opening pushes
   the task too far down." */
.rl-v2 .contact-form-section {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  /* WHITE, NOT THE OFF-WHITE BAND. Rob, 29 October: the HubSpot forms sit
     on a grey background and should be white.

     The grey (--rl-off-white, #F5F7FA) was the ground the white form CARD
     used to sit on. The card was removed on 15 October for the same reason
     the policy pages lost theirs, and that left the band doing nothing but
     tinting a form that no longer contrasts with it. Removing the tint
     finishes that change rather than starting a new one.

     Scoped to .rl-v2 so it reaches the eleven converted pages: /contact/,
     /request-documents/, /free-screening/ and the eight referral pages.
     The campaign pages carry no .rl-v2 and keep the legacy treatment,
     which is the same boundary the card removal used. */
  background: #fff;
}
.contact-form-section__inner--centered {
  grid-template-columns: 1fr;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.contact-form-section:has(.contact-form-section__inner--centered) {
  padding-top: var(--rl-space-8);
}

.partner-overview + .contact-form-section {
  padding-top: var(--rl-space-16);
}
.contact-form-wrap {
  background: white;
  border-radius: var(--rl-radius-lg);
  border: 1px solid var(--app-border);
  padding: 40px;
}
/* .rl-v2 PREFIXED, see the note on .rl-pills-block. `.rl-v2 h2` and
   `.rl-v2 p` are (0,1,1) and were taking both the size and the margins
   from these two on /contact/ and /request-documents/. */
.rl-v2 .contact-form__h2,
.contact-form__h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 10px;
  line-height: 1.3;
}
.rl-v2 .contact-form__sub,
.contact-form__sub {
  font-size: 15px;
  color: var(--rl-text-secondary);
  margin: 0 0 28px;
  line-height: 1.6;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: white;
  border-radius: var(--rl-radius-lg);
  border: 1px solid var(--app-border);
  padding: 20px;
}
.contact-info__icon {
  font-size: 22px;
  line-height: 1;
  color: var(--rl-coral);
  flex-shrink: 0;
  margin-top: 1px;
}
.contact-info__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rl-text-secondary);
  margin: 0 0 4px;
}
.contact-info__val {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0;
  text-decoration: none;
}
a.contact-info__val:hover { color: var(--rl-coral); }

/* WPForms overrides — match brand */
.contact-form-wrap .wpforms-form .wpforms-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
}
.contact-form-wrap .wpforms-form input[type=text],
.contact-form-wrap .wpforms-form input[type=email],
.contact-form-wrap .wpforms-form textarea {
  border: 1px solid var(--app-border);
  border-radius: 6px;
  font-family: var(--rl-font);
  font-size: 14px;
  padding: 10px 14px;
  color: var(--color-secondary);
  background: var(--rl-off-white);
  transition: border-color 0.15s;
}
.contact-form-wrap .wpforms-form input:focus,
.contact-form-wrap .wpforms-form textarea:focus {
  border-color: var(--rl-coral);
  outline: none;
  background: white;
}
.contact-form-wrap .wpforms-form .wpforms-submit {
  background: var(--rl-red-dark) !important;
  border: none !important;
  border-radius: var(--rl-radius-full) !important;
  font-family: var(--rl-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.contact-form-wrap .wpforms-form .wpforms-submit:hover {
  background: var(--rl-navy) !important;
}
.contact-form-wrap .wpcf7-submit,
.contact-form-wrap input[type="submit"] {
  background: var(--rl-coral) !important;
  border: none !important;
  border-radius: var(--rl-radius-full) !important;
  font-family: var(--rl-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  color: #fff !important;
}
.contact-form-wrap .wpcf7-submit:hover,
.contact-form-wrap input[type="submit"]:hover {
  background: var(--rl-navy) !important;
}

.contact-map-embed {
  border-radius: var(--rl-radius-lg);
  overflow: hidden;
  height: 300px;
  width: 100%;
}
.contact-map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE — redesigned alternating sections
═══════════════════════════════════════════════════ */

.about-stripes {
  overflow: hidden;
  height: 100px;
}
.about-stripes__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: brightness(0.8) saturate(1.2);
}

.about-section {
  padding: var(--rl-space-20) 0;
  background: white;
}
.about-section--alt {
  background: var(--rl-off-white);
}

.about-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.about-section__inner--text-only {
  grid-template-columns: 1fr;
  max-width: 680px;
}
.about-section--text-only .about-section__h2 {
  max-width: 680px;
}
.about-section__list--cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.about-section__list--cols li {
  background: var(--rl-off-white);
  border-left: 3px solid var(--rl-navy);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  padding: 14px 16px;
}

.about-section__h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 12px 0 28px;
  line-height: 1.3;
}

.about-section__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-section__list li {
  font-size: 15px;
  color: var(--rl-text-secondary);
  line-height: 1.65;
  padding-left: 22px;
  position: relative;
}
.about-section__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rl-coral);
  flex-shrink: 0;
}

.about-section__image {
  border-radius: var(--rl-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px var(--rl-navy-14);
}
.about-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 420px;
}

.about-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.about-logos img {
  height: auto;
  max-height: 56px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.2s, opacity 0.2s;
  display: block;
}
.about-logos img:hover {
  filter: none;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   INSIGHTS — hero (injected via PHP hook)
═══════════════════════════════════════════════════ */

.insights-hero {
  background-color: var(--rl-navy);
  background-image: var(--color-hero-bg-image);
  background-size: cover;
  background-position: center 30%;
  filter: none;
  position: relative;
  min-height: var(--rl-hero-height);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.insights-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(var(--brand-primary-rgb), 0.82) 0%, rgba(var(--brand-accent-rgb), 0.42) 100%);
  pointer-events: none;
}
.insights-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 130px;
  padding-bottom: 80px;
  max-width: 680px;
}
.insights-hero__h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: white;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 20px;
}
.insights-hero__lead {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  margin: 0;
}

/* ── Single post: break out of GeneratePress grid container ── */
.single .site-content .grid-container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.single .site-content {
  display: block !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════
   INSIGHTS — article (single post)
═══════════════════════════════════════════════════ */

.article-hero {
  position: relative;
  min-height: 460px;
  background: var(--rl-navy);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.article-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(var(--brand-primary-rgb), 0.88) 0%, rgba(var(--brand-accent-rgb), 0.38) 100%);
  pointer-events: none;
}
.article-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 130px;
  padding-bottom: 60px;
}
.article-hero__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  transition: color 0.15s;
}
.article-hero__back:hover { color: white; }
.article-hero__h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: white;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 12px 0 16px;
  max-width: 820px;
}
.article-hero__meta {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin: 0;
  letter-spacing: 0.03em;
}
.article-content-section {
  padding: var(--rl-space-16) 0 80px;
  background: white;
}
.article-content {
  max-width: 720px;
}
.article-content p {
  font-size: 16px;
  color: var(--rl-text-body);
  line-height: 1.8;
  margin: 0 0 22px;
}
.article-content > p:first-of-type {
  font-size: 17px;
  color: var(--rl-text-body);
  line-height: 1.75;
  font-weight: 500;
}
/* ══════════════════════════════════════════════════════════════════
   ARTICLE SECTION HEADINGS.

   REWORKED 15 October, alongside scripts/fix-article-headings.mjs, which
   converted 183 bold paragraphs into real h2 elements across 23 posts.
   The v2 review asked for that conversion on two articles ("convert
   existing section-heading paragraphs to appropriate semantic headings",
   "use appropriate heading markup") and for "stronger section rhythm" or
   "clearer section hierarchy" on a dozen more. They were the same fault:
   23 of 28 articles had ZERO headings in the body.

   THE .rl-v2 PREFIX IS LOAD-BEARING, for the ninth time in this file.
   `.rl-v2 h2 { font-size: var(--v2-h2) }` is (0,1,1) and single.php puts
   .rl-v2 on <main>; a bare .article-content h2 is (0,1,0) and loses.
   Measured on the drought article the moment the headings existed: 40px
   rather than the 24px this rule asks for, and margin-top 0 rather than
   52px, so eight new headings arrived oversized and welded to the
   paragraph above them. A real heading with no space above it is barely
   better than a bold paragraph.

   THE CORAL LEFT BORDER GOES. It is the same device the review called
   older than v2 on the partner introduction: a coloured bar beside a
   heading. A rule ABOVE the heading groups it with the section it opens,
   which is what the policy pages now do, and what the method and spec
   sections have always done.

   SPACE IS THE HIERARCHY. 3.5rem above and 0.75rem below, so each
   heading sits with its own section rather than floating between two.
   ══════════════════════════════════════════════════════════════════ */
.rl-v2 .article-content h2,
.article-content h2 {
  font-family: var(--v2-font-display, 'Poppins', sans-serif);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  color: var(--rl-navy);
  line-height: 1.3;
  margin: 3.5rem 0 0.75rem;
  padding-top: 1.5rem;
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid var(--v2-rule, rgba(1, 0, 61, 0.1));
}
/* The first one opens the article rather than separating two sections,
   so it takes neither the rule nor the space above it. */
.rl-v2 .article-content > h2:first-child,
.article-content > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.rl-v2 .article-content h3,
.article-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--rl-navy);
  line-height: 1.35;
  margin: 2.25rem 0 0.6rem;
}
.article-content strong {
  font-weight: 700;
  color: var(--rl-navy);
}
.article-content a {
  color: var(--rl-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content a:hover { opacity: 0.8; }
.article-content ul,
.article-content ol {
  margin: 0 0 22px 0;
  padding-left: 24px;
}
.article-content li {
  font-size: 16px;
  color: var(--rl-text-body);
  line-height: 1.75;
  margin-bottom: 8px;
}
.article-content blockquote {
  border-left: 4px solid var(--rl-coral);
  background: var(--rl-off-white);
  border-radius: 0 var(--rl-radius-md) var(--rl-radius-md) 0;
  padding: 24px 32px;
  margin: 40px 0;
}
.article-content blockquote p {
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  color: var(--rl-navy);
  line-height: 1.6;
  margin: 0;
}
.article-content hr {
  border: none;
  border-top: 1px solid var(--app-border);
  margin: 40px 0;
}

/* ═══════════════════════════════════════════════════
   INSIGHTS — card grid (home.php)
═══════════════════════════════════════════════════ */

/* GP constrains blog index wrapper to 1200px — body class is 'blog' not 'home' */
body.blog .insights-index {
  width: 100% !important;
  max-width: none !important;
}
.insights-grid-section {
  padding: 72px 0;
  background: var(--rl-off-white);
}
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto auto;
  column-gap: 24px;
  row-gap: 24px;
}
.insight-card {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  background: white;
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: var(--rl-space-8);
  text-decoration: none;
  box-shadow: var(--rl-shadow-lg);
  transition: box-shadow 0.2s, transform 0.2s;
}
.insight-card:hover {
  box-shadow: 0 8px 32px var(--rl-navy-14);
  transform: translateY(-2px);
}
/* Item 58 of docs/SITE-TODO-2026-09-09.md (F25): the newest article leads
   the index as a full-width card with a longer excerpt; the rest stay
   compact. Rows keep the subgrid alignment. */
.insight-card--featured {
  grid-column: 1 / -1;
  border-left-width: 6px;
  padding: var(--rl-space-10) var(--rl-space-10);
}
.insight-card--featured .insight-card__title {
  font-size: clamp(20px, 2vw, 26px);
  max-width: 720px;
}
.insight-card--featured .rl-proof__body { max-width: 760px; font-size: 1rem; }

.insight-card__date {
  font-size: 11px;
  font-weight: 600;
  color: var(--rl-coral);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.insight-card__title {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 700;
  color: var(--rl-navy);
  line-height: 1.4;
  margin: 10px 0 0;
}
.insight-card .rl-proof__body {
  margin: 12px 0 0;
  align-self: start;
}
.insight-card .rl-proof__link {
  margin-top: 16px;
  align-self: end;
}
.insight-pagination {
  margin-top: 40px;
  text-align: center;
}
.insight-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 2px;
  border-radius: var(--rl-radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-navy);
  text-decoration: none;
  background: white;
  border: 1px solid var(--app-border);
}
.insight-pagination .page-numbers.current,
.insight-pagination .page-numbers:hover {
  background: var(--rl-navy);
  color: white;
  border-color: var(--rl-navy);
}

@media (max-width: 900px) {
  .insight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rl-sectors__grid {
    grid-template-columns: 1fr;
    gap: var(--rl-space-6);
  }
  .rl-proof__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: var(--rl-space-6);
  }
  .rl-proof__card {
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }
  .rl-proof__body { flex: 1; margin: 0 0 var(--rl-space-6); }
  .rl-proof__link { margin-top: auto; align-self: auto; }
}
@media (max-width: 600px) {
  .insight-grid {
    grid-template-columns: 1fr;
  }
  .about-section__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ═══════════════════════════════════════════════════
   DECISION PAGES
═══════════════════════════════════════════════════ */

.dec-challenge {
  padding: var(--rl-space-16) 0;
  background: #ffffff;
  text-align: center;
}

.dec-gap {
  padding: var(--rl-space-16) 0;
  background: var(--rl-off-white);
}

.dec-gap__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}

.dec-how {
  padding: var(--rl-space-16) 0;
  background: var(--rl-pink-bg, #fff5f5);
  text-align: center;
}

.dec-outputs {
  padding: var(--rl-space-16) 0;
  background: #ffffff;
}

.dec-outputs__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.dec-outputs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dec-outputs__list li {
  padding: 16px 16px 16px 52px;
  position: relative;
  background: var(--rl-off-white);
  border-radius: var(--rl-radius-md);
  border-left: 4px solid var(--rl-coral);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-secondary);
}

.dec-outputs__list li::before {
  content: "check_circle";
  font-family: "Material Icons";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rl-coral);
  font-size: 22px;
  line-height: 1;
}

.dec-outputs__stat {
  text-align: center;
  padding: 40px 32px;
}

.dec-outputs__stat-val {
  font-size: 3rem;
  font-weight: 800;
  color: var(--rl-coral);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}

.dec-outputs__stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-secondary);
  margin-bottom: 20px;
}

.dec-outputs__stat-body {
  font-size: 14px;
  color: var(--rl-text-secondary);
  line-height: 1.6;
}

.dec-context {
  padding: var(--rl-space-12) 0;
  background: var(--rl-off-white);
  border-top: 1px solid var(--rl-navy-08);
}

.dec-context__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.dec-context__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.dec-context__chip {
  background: white;
  border: 1px solid var(--rl-navy-14);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
}

.dec-context__pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.dec-context__pill {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  background: white;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  transition: background 0.2s;
}

.dec-context__pill:hover {
  background: var(--rl-off-white);
}

.dec-context__note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--rl-text-secondary);
  line-height: 1.55;
  font-style: italic;
}

@media (max-width: 900px) {
  .dec-gap__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dec-outputs__inner,
  .dec-context__cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dec-gap__grid {
    grid-template-columns: 1fr;
  }
}


/* ── Homepage: Partners / Trusted-by strip ── */
.rl-partners {
  padding: 36px 0;
  background: white;
  border-top: 1px solid var(--rl-navy-07);
  border-bottom: 1px solid var(--rl-navy-07);
}

.rl-partners__label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rl-text-secondary);
  margin: 0 0 28px;
}

.rl-partners__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
}

.rl-partners__logos img {
  height: 52px;
  width: auto;
  display: block;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.2s, opacity 0.2s;
}

/* Auto-scale height as logo count grows */
.rl-partners__logos:has(img:nth-child(4)) img { height: 46px; }
.rl-partners__logos:has(img:nth-child(5)) img { height: 40px; }
.rl-partners__logos:has(img:nth-child(6)) img { height: 35px; }
.rl-partners__logos:has(img:nth-child(7)) img { height: 30px; }

.rl-partners__logos img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 600px) {
  .rl-partners__logos {
    gap: 28px;
  }
  .rl-partners__logos img,
  .rl-partners__logos:has(img:nth-child(4)) img,
  .rl-partners__logos:has(img:nth-child(5)) img,
  .rl-partners__logos:has(img:nth-child(6)) img,
  .rl-partners__logos:has(img:nth-child(7)) img {
    height: 28px;
  }
}

/* ── Sector Pages ── */
.sector-usecases {
  padding: var(--rl-space-20) 0;
  background: var(--rl-off-white);
}

.dec-context__cols--products-only {
  grid-template-columns: 1fr;
  max-width: 560px;
}

/* ── Sectors Overview ── */
.sectors-ov__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.sectors-ov__card {
  display: flex;
  flex-direction: column;
  background: var(--rl-white);
  border-radius: var(--rl-radius-lg);
  padding: 36px 28px 28px;
  box-shadow: 0 2px 12px var(--rl-navy-07);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.sectors-ov__card:hover {
  box-shadow: var(--rl-shadow-lg);
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}
.sectors-ov__icon {
  font-size: 2rem;
  color: var(--rl-coral);
  margin-bottom: 16px;
}
.sectors-ov__heading {
  font-size: var(--rl-fs-heading);
  font-weight: 600;
  color: var(--rl-navy);
  margin: 0 0 12px;
}
.sectors-ov__body {
  font-size: var(--rl-fs-small);
  color: var(--rl-text-body);
  line-height: 1.65;
  flex: 1;
  margin: 0 0 24px;
}
.sectors-ov__btn {
  align-self: flex-start;
}
@media (max-width: 860px) {
  .sectors-ov__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── ABM Landing Pages ── */
.abm-hero {
  position: relative;
  background: var(--rl-navy);
  padding: 100px 0 80px;
  overflow: hidden;
}
.abm-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.abm-hero__h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--rl-white);
  line-height: 1.2;
  margin: 16px 0 20px;
}
.abm-hero__lead {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  margin: 0 0 32px;
}
.abm-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.abm-problem { padding: var(--rl-space-20) 0; background: var(--rl-white); }
.abm-problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.abm-h2 {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 12px 0 20px;
  line-height: 1.3;
}
.abm-h2--centered { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.abm-body { font-size: var(--rl-fs-base); color: var(--rl-text-body); line-height: 1.7; margin: 0 0 16px; }
.abm-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.abm-bullet {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.abm-bullet__icon { color: var(--rl-coral); font-size: 1.375rem; flex-shrink: 0; margin-top: 2px; }
.abm-bullet__heading { display: block; font-size: var(--rl-fs-base); font-weight: 600; color: var(--rl-navy); margin-bottom: 4px; }
.abm-bullet__body { font-size: var(--rl-fs-small); color: var(--rl-text-body); line-height: 1.6; margin: 0; }

.abm-solution { padding: var(--rl-space-20) 0; background: var(--rl-off-white); }
.abm-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.abm-step {
  background: var(--rl-white);
  border-radius: var(--rl-radius-lg);
  padding: 32px 24px;
  box-shadow: 0 2px 12px var(--rl-navy-06);
}
.abm-step__num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--rl-coral);
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}
.abm-step__heading { font-size: var(--rl-fs-base); font-weight: 600; color: var(--rl-navy); margin: 0 0 10px; }
.abm-step__body { font-size: var(--rl-fs-small); color: var(--rl-text-body); line-height: 1.65; margin: 0; }

.abm-proof { padding: 72px 0; background: var(--rl-navy); }
.abm-proof__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.abm-proof__quote-text {
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  color: var(--rl-white);
  line-height: 1.65;
  font-style: italic;
  margin: 0 0 12px;
}
.abm-proof__cite {
  font-size: var(--rl-fs-small);
  color: rgba(255,255,255,0.62);
  font-style: normal;
  display: block;
}
.abm-proof__cs-link {
  font-size: var(--rl-fs-small);
  color: var(--rl-coral-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--brand-accent-rgb), 0.4);
  padding-bottom: 2px;
}
.abm-proof__cs-link:hover { color: var(--rl-white); border-color: rgba(255,255,255,0.4); }

.abm-cta { padding: var(--rl-space-20) 0; background: var(--rl-white); }
.abm-cta__inner { text-align: center; max-width: 600px; margin: 0 auto; }
.abm-cta__h2 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 700; color: var(--rl-navy); margin: 0 0 16px; }
.abm-cta__body { font-size: var(--rl-fs-base); color: var(--rl-text-body); line-height: 1.7; margin: 0 0 32px; }

@media (max-width: 860px) {
  .abm-problem__grid { grid-template-columns: 1fr; gap: 40px; }
  .abm-steps { grid-template-columns: 1fr; }
}

/* ── V4 Homepage: Five services grid ──────────────────────────────────── */
.rl-hp-services__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
}
.rl-hp-svc-card {
  flex: 0 0 calc(33.333% - 16px);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rl-navy-10);
  border-left: 3px solid var(--rl-coral);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  padding: 20px 20px 18px;
  background: var(--rl-white);
  transition: box-shadow var(--rl-transition), transform var(--rl-transition);
}
.rl-hp-svc-card:hover {
  box-shadow: var(--rl-shadow-card);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.rl-hp-svc-card__title {
  font-size: var(--rl-fs-heading);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 12px;
  line-height: 1.35;
}
.rl-hp-svc-card__decision {
  font-size: 14px;
  color: var(--rl-text-body);
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}
.rl-hp-svc-card__sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.rl-hp-svc-card__more {
  font-size: var(--rl-fs-small);
  font-weight: 600;
  color: var(--rl-coral);
  margin-top: auto;
}
@media (max-width: 900px) {
  .rl-hp-svc-card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 580px) {
  .rl-hp-svc-card { flex: 0 0 100%; }
}

/* ── V4 Homepage: How it works brief (dark navy strip) ────────────────── */
.rl-hiw-brief {
  background: var(--rl-navy);
  padding: 72px 0;
}
.rl-hiw-brief__inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.rl-hiw-brief__inner .rl-eyebrow--light {
  display: block;
  margin-bottom: 16px;
}
.rl-hiw-brief__inner .rl-h2--light {
  margin-bottom: 24px;
}
.rl-hiw-brief__body {
  font-size: var(--rl-fs-base);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  margin: 0 0 48px;
}
.rl-hiw-brief__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
  text-align: left;
}
.rl-hiw-brief__tier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: 24px 20px;
  text-decoration: none;
  transition: background var(--rl-transition);
}
.rl-hiw-brief__tier:hover {
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}
.rl-hiw-brief__tier-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--rl-coral);
  letter-spacing: 0.04em;
}
.rl-hiw-brief__tier-label {
  font-size: var(--rl-fs-small);
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-bottom: 4px;
}
.rl-hiw-brief__tier-body {
  font-size: var(--rl-fs-small);
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 700px) {
  .rl-hiw-brief__tiers { grid-template-columns: 1fr; }
  .rl-hiw-brief__inner { max-width: 100%; }
}

/* ── V4 Homepage: Partners / CAP section ──────────────────────────────── */
.rl-hp-partners {
  background: var(--rl-off-white);
}
.rl-hp-partners__types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.rl-hp-partners__type-card {
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-navy);
  border-radius: var(--rl-radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 160px;
}
.rl-hp-partners__type-label {
  font-size: var(--rl-fs-small);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0;
  letter-spacing: 0.01em;
}
.rl-hp-partners__type-body {
  font-size: var(--rl-fs-small);
  color: var(--rl-text-body);
  line-height: 1.65;
  margin: 0;
}
.rl-hp-partners__footer {
  margin-top: 36px;
  text-align: center;
}
@media (max-width: 768px) {
  .rl-hp-partners__types-grid { grid-template-columns: 1fr; }
}

/* ── V4 Service pages ─────────────────────────────────────────────────────── */

.v4svc-body {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 0 20px;
}
.v4svc-body--wide { max-width: 760px; }
.v4svc-body:last-child { margin-bottom: 0; }

/* ── Services Overview page ──────────────────────────────────────────────── */

.svc-ov-services { padding: 72px 0; background: var(--rl-white); }
.svc-ov__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-ov__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid var(--rl-navy-10);
  border-left: 4px solid var(--rl-navy);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  background: var(--rl-white);
  text-decoration: none;
  transition: border-left-color 0.15s, box-shadow 0.15s;
}
.svc-ov__card:hover {
  border-left-color: var(--rl-coral);
  box-shadow: 0 4px 20px var(--rl-navy-08);
}
.svc-ov__card--partner { border-left-color: var(--rl-coral); }
.svc-ov__card-layer {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--rl-coral);
}
.svc-ov__card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0;
  line-height: 1.25;
}
.svc-ov__card-decision {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.svc-ov__card-cta {
  font-size: var(--rl-fs-base);
  font-weight: 600;
  color: var(--rl-navy);
  margin-top: 4px;
}
.svc-ov__card:hover .svc-ov__card-cta { color: var(--rl-coral); }

.svc-ov-layers { padding: 72px 0; background: var(--rl-off-white); }
.svc-ov-layers .rl-eyebrow { display: block; margin-bottom: 12px; }
.svc-ov-layers .rl-h2 { margin-bottom: 12px; }
.svc-ov-layers .rl-section-sub { margin-bottom: 48px; }
.svc-ov-layers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc-ov-layer {
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-10);
  border-left: 4px solid var(--rl-navy);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-ov-layer--partner { border-left-color: var(--rl-coral); }
.svc-ov-layer__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0;
}
.svc-ov-layer__body {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.svc-ov-layer__link {
  font-size: var(--rl-fs-base);
  font-weight: 600;
  color: var(--rl-navy);
  text-decoration: none;
}
.svc-ov-layer__link:hover { color: var(--rl-coral); }

@media (max-width: 900px) {
  .svc-ov__grid { grid-template-columns: 1fr 1fr; }
  .svc-ov-layers__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .svc-ov__grid { grid-template-columns: 1fr; }
}

/* Decision context */
.v4svc-context {
  padding: 72px 0;
  background: var(--rl-white);
}
.v4svc-context__inner .rl-eyebrow { display: block; margin-bottom: 16px; }
.v4svc-context__inner .rl-h2 { margin-bottom: 28px; }

/* Gap — why existing approaches fall short */
.v4svc-gap {
  padding: var(--rl-space-16) 0;
  background: var(--rl-off-white);
}
.v4svc-gap__inner .rl-eyebrow { display: block; margin-bottom: 16px; }
.v4svc-gap__inner .rl-h2 { margin-bottom: 24px; }

/* Delivers — what RedLines provides */
.v4svc-delivers {
  padding: 72px 0;
  background: var(--rl-white);
}
.v4svc-delivers__inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.v4svc-delivers__text {
  flex: 1;
}
.v4svc-delivers__text .rl-eyebrow { display: block; margin-bottom: 16px; }
.v4svc-delivers__text .rl-h2 { margin-bottom: 24px; }
.v4svc-delivers__outputs {
  flex: 0 0 340px;
  background: var(--rl-off-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 3px solid var(--rl-coral);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  padding: 28px 28px 32px;
}
.v4svc-outputs__label {
  font-size: var(--rl-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rl-navy);
  margin: 0 0 16px;
}
.v4svc-outputs__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v4svc-outputs__list li {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.55;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--rl-navy-08);
  position: relative;
}
.v4svc-outputs__list li:last-child { border-bottom: none; }
.v4svc-outputs__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-coral);
}
.v4svc-outputs__list li:empty { display: none; }

/* Scales — project to platform */
.v4svc-scales {
  padding: var(--rl-space-16) 0;
  background: var(--rl-off-white);
}
.v4svc-scales__inner .rl-eyebrow { display: block; margin-bottom: 16px; }
.v4svc-scales__inner .rl-h2 { margin-bottom: 24px; }

/* Platform — analytical layer + sectors (dark navy) */
.v4svc-platform {
  background: var(--rl-navy);
  padding: 72px 0;
}
.v4svc-platform__inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.v4svc-platform__left {
  flex: 1;
}
.v4svc-platform__left .rl-eyebrow--light { display: block; margin-bottom: 16px; }
.v4svc-platform__left .rl-h2--light { margin-bottom: 20px; }
.v4svc-platform__body {
  font-size: var(--rl-fs-base);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  margin: 0 0 32px;
}
.v4svc-platform__right {
  flex: 0 0 300px;
}
.v4svc-platform__visual {
  flex: 0 0 400px;
}
/* aspect-ratio: auto is now the default on .rl-svc-mock */
.v4svc-platform__meta { margin-top: 32px; }
.v4svc-platform__label {
  font-size: var(--rl-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
}
.v4svc-platform__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.rl-sector-chip--light {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
}
.v4svc-platform__buyers {
  font-size: var(--rl-fs-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .v4svc-delivers__inner { flex-direction: column; }
  .v4svc-delivers__outputs { flex: 0 0 auto; width: 100%; }
  .v4svc-platform__inner { flex-direction: column; }
  .v4svc-platform__right { flex: 0 0 auto; width: 100%; }
  .v4svc-platform__visual { display: none; }
}

/* ── V4 How It Works page ─────────────────────────────────────────────────── */

.v4hiw-body {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 0 20px;
}

/* Analytical architecture */
.v4hiw-arch {
  padding: 72px 0;
  background: var(--rl-white);
}
.v4hiw-arch .rl-eyebrow { display: block; margin-bottom: 16px; }
.v4hiw-arch .rl-h2 { margin-bottom: 24px; }
.v4hiw-arch__grid {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 2px;
  margin-top: 40px;
  max-width: 760px;
  background: var(--rl-navy-08);
  border: 2px solid var(--rl-navy-08);
  border-radius: 6px;
  overflow: hidden;
}
.v4hiw-arch__cell {
  background: var(--rl-white);
  padding: 16px 20px;
}
.v4hiw-arch__cell--header {
  background: var(--rl-off-white);
  font-size: var(--rl-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rl-navy);
  display: flex;
  align-items: center;
}
.v4hiw-arch__cell--rowlabel {
  background: var(--rl-off-white);
  font-size: var(--rl-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rl-navy);
  display: flex;
  align-items: center;
}
.v4hiw-arch__cell--content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v4hiw-arch__cell--content strong {
  font-size: var(--rl-fs-heading);
  font-weight: 700;
  color: var(--rl-navy);
}
.v4hiw-arch__cell--content span {
  font-size: var(--rl-fs-small);
  color: var(--rl-text-body);
  line-height: 1.45;
}
.v4hiw-arch__cell--pro strong { color: var(--rl-coral); }
.v4hiw-arch__cell--expert { background: rgba(var(--brand-primary-rgb), 0.03); }

/* Tier sections — Scan / Pro / Expert */
.v4hiw-tier { padding: 72px 0; }
.v4hiw-tier--scan   { background: var(--rl-off-white); }
.v4hiw-tier--pro    { background: var(--rl-white); }
.v4hiw-tier--expert { background: var(--rl-off-white); }

.v4hiw-tier__inner {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}
.v4hiw-tier__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.v4hiw-tier__visual {
  flex: 0 0 400px;
}
.v4hiw-tier__visual .rl-svc-mock { aspect-ratio: auto; }

.v4hiw-tier__text { }
.v4hiw-tier__text .rl-eyebrow { display: block; margin-bottom: 12px; }
.v4hiw-tier__text .rl-h2 { margin-bottom: 24px; }
.v4hiw-tier__pathway {
  font-size: var(--rl-fs-base);
  font-style: italic;
  color: var(--rl-navy);
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--rl-coral);
}
.v4hiw-tier__attrs {
  border: 1px solid var(--rl-navy-10);
  border-left: 3px solid var(--rl-navy);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  padding: 24px 24px 28px;
  background: var(--rl-white);
}
.v4hiw-tier--scan .v4hiw-tier__attrs,
.v4hiw-tier--expert .v4hiw-tier__attrs { background: var(--rl-white); }
.v4hiw-tier--pro .v4hiw-tier__attrs { border-left-color: var(--rl-coral); }
.v4hiw-tier__attrs-label {
  font-size: var(--rl-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rl-navy);
  margin: 0 0 14px;
}
.v4hiw-tier__attrs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v4hiw-tier__attrs-list li {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.5;
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--rl-navy-07);
  position: relative;
}
.v4hiw-tier__attrs-list li:last-child { border-bottom: none; }
.v4hiw-tier__attrs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-navy);
}
.v4hiw-tier--pro .v4hiw-tier__attrs-list li::before { background: var(--rl-coral); }

/* Project-to-platform */
.v4hiw-p2p { background: var(--rl-navy); padding: 72px 0; }
.v4hiw-p2p__inner { max-width: 900px; }
.v4hiw-p2p__inner .rl-eyebrow--light { display: block; margin-bottom: 16px; }
.v4hiw-p2p__inner .rl-h2--light { margin-bottom: 24px; }
.v4hiw-p2p__body {
  font-size: var(--rl-fs-base);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
  margin: 0;
}

/* P2P step cards */
.v4hiw-p2p__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.v4hiw-p2p__step {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--rl-radius-lg);
  padding: 28px 24px;
}
.v4hiw-p2p__step-num {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--rl-coral);
  margin-bottom: 10px;
}
.v4hiw-p2p__step-h {
  font-size: var(--rl-fs-h3);
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  font-family: var(--rl-font);
}
.v4hiw-p2p__step-body {
  font-size: var(--rl-fs-base);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0;
}

/* Services pointer */
.v4hiw-services { padding: 72px 0; background: var(--rl-off-white); }
.v4hiw-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.v4hiw-svc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px;
  border: 1px solid var(--rl-navy-10);
  border-left: 3px solid var(--rl-coral);
  border-radius: 0 var(--rl-radius-lg) var(--rl-radius-lg) 0;
  text-decoration: none;
  color: var(--rl-navy);
  background: var(--rl-white);
  transition: box-shadow var(--rl-transition), transform var(--rl-transition);
}
.v4hiw-svc-card:hover {
  box-shadow: var(--rl-shadow-card);
  transform: translateY(-2px);
  color: var(--rl-navy);
  text-decoration: none;
}
.v4hiw-svc-card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.v4hiw-svc-card__arrow {
  font-size: 1.4rem;
  color: var(--rl-coral);
  flex-shrink: 0;
  margin-left: 8px;
}
@media (max-width: 960px) {
  .v4hiw-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .v4hiw-services__grid { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 900px) {
  .v4hiw-tier__inner { flex-direction: column; }
  .v4hiw-tier__attrs { flex: 0 0 auto; width: 100%; }
  .v4hiw-tier__visual { display: none; }
  .v4hiw-arch__grid { grid-template-columns: 80px 1fr 1fr; }
}

/* ─── v5 Shared Utility ─── */
.rl-section--tint { background: #f7f7f8; }

/* ─── Decision Page ─── */


/* Hero CTA row — primary button + pill as secondary CTA, both left-aligned */
.svc-hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  flex-wrap: wrap;
}
/* Pill used as a link */
a.rl-powered-pill {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  display: inline-flex;
}
a.rl-powered-pill:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  color: inherit;
}

/* Pill size variant */
.rl-powered-pill--lg {
  font-size: 0.78rem;
  padding: 5px 14px;
  letter-spacing: 0.06em;
}

/* Shared icon style for decision page cards */
.dec-card__icon {
  font-size: 1.6rem !important;
  display: block;
  margin-bottom: 14px;
}
.dec-context__col .dec-card__icon { color: var(--rl-navy); opacity: 0.5; }
.dec-gap__card .dec-card__icon { color: var(--rl-coral); }

/* Context section */
.dec-context__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.dec-context__col {
  background: #fff;
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-navy);
  border-radius: var(--rl-radius-lg);
  padding: 24px 28px 22px;
}
.dec-context__col-heading {
  font-family: var(--rl-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 10px;
  line-height: 1.35;
}
.dec-context__col-body { font-family: var(--rl-font); font-size: 0.9rem; line-height: 1.65; color: var(--rl-text-body); margin: 0; }

/* Gap section cards */
.dec-gap__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.dec-gap__card {
  background: #fff;
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: 24px 28px 22px;
}
.dec-gap__card-heading { font-family: var(--rl-font); font-size: 0.95rem; font-weight: 700; color: var(--rl-navy); margin: 0 0 10px; line-height: 1.35; min-height: 2.6rem; }
.dec-gap__card-body { font-family: var(--rl-font); font-size: 0.875rem; line-height: 1.65; color: var(--rl-text-secondary); margin: 0; }

/* Delivers list */
.dec-delivers__list {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  /* Wide enough that every checklist item stays on one line at 1440px. */
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dec-delivers__item {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--rl-text-body);
  font-weight: 500;
  padding: 12px 24px;
  background: #fff;
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  position: relative;
  padding-left: 52px;
  display: flex;
  align-items: center;
}
.dec-delivers__item::before {
  content: '✓';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rl-coral);
  font-weight: 700;
  font-size: 1rem;
}
.dec-delivers__footer {
  max-width: 700px;
  margin: 24px auto 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--rl-navy);
  opacity: 0.85;
}

/* Partner-page overview:
   - Row 1: partner logo, centred above the risk matrix column
   - Row 2: "What you get" copy (LEFT) | risk matrix (RIGHT)
   - "Representative output" caption sits under the matrix */
.partner-overview__inner { display: block; }
/* Logo row mirrors the body grid so the logo sits centred above the
   matrix column. Per-partner modifier classes set on the logo control
   alignment and size. */
/* Logo band: total vertical space from hero-bottom to the line that
   comes off the 'Climate Risk Screening' eyebrow. The logo fills 80%
   of this band; 10% padding above, 10% below. Driven by a single CSS
   variable so the band can be resized in one place. */
.partner-overview {
  --rl-partner-logo-band: 180px;
  padding-top: calc(var(--rl-partner-logo-band) * 0.1);
}
.partner-overview__logo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: calc(var(--rl-partner-logo-band) * 0.1);
}
@media (max-width: 900px) {
  .partner-overview__logo-row { grid-template-columns: 1fr; gap: 48px; }
}
.partner-overview__logo {
  grid-column: 2;
  height: calc(var(--rl-partner-logo-band) * 0.8);
  max-height: calc(var(--rl-partner-logo-band) * 0.8);
  width: auto;
  justify-self: center;
  object-fit: contain;
}
@media (max-width: 900px) {
  .partner-overview__logo { grid-column: 1; justify-self: start; }
}
/* Per-partner overrides retained as escape hatches (not used by JRP
   or ESG Pro under the 80%-band rule). */
.partner-overview__logo--left { justify-self: start; }
.partner-overview__logo--lg   { height: calc(var(--rl-partner-logo-band) * 1.0); max-height: calc(var(--rl-partner-logo-band) * 1.0); }
.partner-overview__logo--xl   { height: calc(var(--rl-partner-logo-band) * 1.2); max-height: calc(var(--rl-partner-logo-band) * 1.2); }
/* Body grid: header (eyebrow + h2) is a full-width row on its own,
   then a 2-col row with the body content on the left and the matrix
   on the right. The matrix is centred within its cell so its midpoint
   aligns with the subtitle→footer range, NOT the eyebrow→footer range. */
.partner-overview__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header header"
    "left   right";
  column-gap: 64px;
  row-gap: 0;
  align-items: center;
}
/* Header has no margin-bottom; the standard 24px gap below h2 comes
   from the subtitle's .rl-section-sub margin-top. */
.partner-overview__header { grid-area: header; margin-bottom: 0; }
.partner-overview__left   { grid-area: left;  align-self: start; }
.partner-overview__right  { grid-area: right; align-self: center; }
@media (max-width: 900px) {
  .partner-overview__body {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "left" "right";
    row-gap: 48px;
  }
  .partner-overview__right { align-self: start; }
}
.partner-overview__left { text-align: left; }
.partner-overview__eyebrow { text-align: left; }
.partner-overview__h2 { text-align: left; }
.partner-overview__sub { max-width: none; text-align: left; }
.partner-overview__items { max-width: none; margin-top: 56px; margin-bottom: 16px; }
.partner-overview__footer { max-width: none; margin: 56px 0 0; }
/* :not(.rl-btn) matches the specificity of the .svc-page a:not(.rl-btn)
   rule that sets color: inherit on all service-page anchors. Without
   the :not, that rule wins by specificity (0,2,1 vs 0,1,1) even though
   ours is more specific in intent. */
.partner-overview__footer a:not(.rl-btn),
.partner-overview__footer a:not(.rl-btn):visited {
  color: var(--rl-coral);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.partner-overview__footer a:not(.rl-btn):hover {
  color: var(--rl-coral-light);
}
/* Logo wrapped in an anchor to the partner's site. Anchor uses
   display: contents so the img stays the grid item and keeps its
   grid-column/justify-self placement. */
.partner-overview__logo-link {
  display: contents;
}
.partner-overview__right {
  position: relative;
}
/* Caption sits absolutely BELOW the matrix so it doesn't contribute
   to the right column's height. With the caption out of the flow,
   align-items: center on the parent grid lines the matrix's middle
   up with the middle of the left column, not the middle of
   matrix+caption combined. */
.partner-overview__matrix-title {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rl-navy);
  opacity: 0.6;
  text-align: center;
}
.partner-overview {
  padding-bottom: calc(var(--rl-space-12) + 32px);
}

/* Report section */
.dec-report-section {
  background: var(--rl-navy);
  padding: var(--rl-space-20) 0;
}
.dec-report__header {
  text-align: center;
  margin-bottom: 48px;
}
.dec-report__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
.dec-report__body { color: rgba(255,255,255,0.75); font-size: 0.95rem; line-height: 1.7; margin: 20px 0 24px; }
.dec-report__defensible {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dec-report__defensible li {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  padding-left: 22px;
  position: relative;
  line-height: 1.55;
}
.dec-report__defensible li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--rl-coral);
  font-weight: 700;
}
.dec-report__badge-wrap { display: flex; align-items: center; }
.dec-report__badge {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--rl-radius-lg);
  padding: 36px 32px;
  text-align: center;
  min-width: 220px;
}
.dec-report__badge-icon { font-size: 48px; color: var(--rl-coral); display: block; margin-bottom: 16px; }
.dec-report__badge-name { color: #fff; font-weight: 700; font-size: 0.95rem; margin: 0 0 8px; line-height: 1.4; }
.dec-report__badge-format { color: rgba(255,255,255,0.75); font-size: 0.75rem; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.dec-report__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Powered By section */
.dec-powered__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.dec-powered__pill { margin-bottom: 16px; display: inline-flex; }
.dec-powered__h2 { margin-top: 0; }
.dec-powered__body { font-size: 0.95rem; line-height: 1.65; color: var(--rl-text-body); margin: 16px 0 28px; }
.dec-powered__card-wrap { max-width: 480px; }

/* Scales section — journey cards */
.dec-scales__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.dec-scales__col {
  background: #fff;
  border: 1px solid var(--rl-navy-08);
  border-left: 3px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: 28px 28px 24px;
}
.dec-scales__step-num {
  display: block;
  font-family: var(--rl-font);
  font-size: 2rem;
  font-weight: 800;
  color: var(--rl-coral);
  line-height: 1;
  margin-bottom: 14px;
}
.dec-scales__col-heading { font-family: var(--rl-font); font-size: 1rem; font-weight: 700; color: var(--rl-navy); margin: 0 0 12px; }
.dec-scales__col-body { font-family: var(--rl-font); font-size: 0.9rem; line-height: 1.65; color: var(--rl-text-body); margin: 0; }

/* Sectors section */
.dec-sectors__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.dec-sectors__eyebrow { margin: 0; flex-shrink: 0; }
.dec-sectors__chips { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 768px) {
  .dec-context__cols, .dec-gap__grid, .dec-powered__inner, .dec-scales__cols { grid-template-columns: 1fr; }
  .dec-report__inner { grid-template-columns: 1fr; }
  .dec-report__badge-wrap { justify-content: center; }
  .svc-hero__bottom { flex-direction: column; align-items: flex-start; }
  .dec-sectors__inner { flex-direction: column; align-items: flex-start; }
}

/* ─── Tool Page ─── */

/* Governed Analysis cards */
.tool-governed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.tool-governed__card {
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-card);
  padding: var(--rl-space-8);
}
.tool-governed__card-heading { font-size: 1rem; font-weight: 700; color: var(--rl-navy); margin: 0 0 10px; min-height: 2.7rem; }
.tool-governed__card-body { font-size: 0.9rem; line-height: 1.6; color: var(--rl-text-body); margin: 0; }

/* Decisions grid */
.tool-decisions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.tool-decisions__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--rl-space-8);
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-card);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  min-height: 140px;
}
.tool-decisions__card:hover { box-shadow: var(--rl-shadow-lg); transform: translateY(-2px); }
.tool-decisions__card:has(.tool-decisions__question:empty) { display: none; }
.tool-decisions__question {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rl-navy);
  line-height: 1.3;
  flex: 1;
}
.tool-decisions__cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rl-coral);
  margin-top: var(--rl-space-6);
  display: block;
}

/* Output badge cards — auto-fit so 1-card (Scan) centres, 4-card (Pro/Expert) fills */
.tool-output__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 28px;
  margin-top: var(--rl-space-10);
}
.tool-output__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.tool-output__card:has(.tool-output__badge-name:empty) { display: none; }
.tool-output__badge {
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-card);
  padding: 32px 28px;
  text-align: center;
  width: 100%;
}
.tool-output__badge-icon { font-size: 40px; color: var(--rl-coral); display: block; margin-bottom: 14px; }
.tool-output__badge-name { color: var(--rl-navy); font-weight: 700; font-size: 0.95rem; margin: 0 0 6px; line-height: 1.4; }
.tool-output__badge-format { color: var(--rl-text-secondary); font-size: 0.72rem; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.tool-output__card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rl-red-dark);
  text-decoration: none;
}
.tool-output__card-link:hover { text-decoration: underline; }

/* Upgrade Path — dark section */
.tool-upgrade-section {
  background: var(--rl-navy);
  padding: var(--rl-space-16) 0;
}
.tool-upgrade__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-12);
}
.tool-upgrade__text { flex: 1; max-width: 580px; }
.tool-upgrade__body {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 16px 0 28px;
}
.tool-upgrade__pill { flex-shrink: 0; }

@media (max-width: 900px) {
  .tool-governed__grid,
  .tool-decisions__grid,
  .tool-output__cards { grid-template-columns: 1fr; }
  .tool-upgrade__inner { flex-direction: column; align-items: flex-start; }
}

/* ─── Credibility logos bar ─── */
.rl-credibility {
  background: var(--rl-light-bg, #f7f7f8);
  padding: 10px 0;
  border-top: 1px solid var(--rl-navy-06);
  border-bottom: 1px solid var(--rl-navy-06);
}
.rl-credibility__label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(var(--brand-primary-rgb), 0.65);
  margin: 0 0 8px;
}
.rl-credibility__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
/* Unified partner-bar treatment site-wide.
   B&W transparent source files at 160px native, displayed at 40px
   (~4x pixel density). Visual style is identical everywhere the
   partners-bar element is used; the strip's *content* varies by
   context (homepage shows RedLines clients, about/campaign pages
   show DE Group analytics platform clients). */
.rl-credibility {
  padding: 48px 0 56px;
}
.rl-credibility__label {
  margin-bottom: 28px;
}
.rl-credibility__logos {
  gap: 64px;
}
.rl-credibility__logos img {
  height: 40px;
  width: auto;
  max-height: 40px;
  opacity: 0.85;
  /* One master file per brand: colour originals render uniformly grey
     here, so no separate B&W strip files are needed. */
  filter: grayscale(1);
  mix-blend-mode: normal;
  object-fit: contain;
}
@media (max-width: 900px) {
  .rl-credibility__logos { gap: 36px; }
  .rl-credibility__logos img { height: 32px; max-height: 32px; }
}
@media (max-width: 600px) {
  .rl-credibility__logos { gap: 24px; }
  .rl-credibility__logos img { height: 28px; max-height: 28px; }
}
/* credibility-line element (used at the foot of campaign pages):
   the rl-credibility-line__logos rule already sets 40px height +
   grayscale. The new logos are already grayscale, so neutralise that
   so they don't double-grey. */
.rl-credibility-line__logos img {
  filter: none;
  opacity: 0.85;
}

/* Octopus logo renders visually smaller than its peers because its
   artwork has more vertical whitespace. Scale it up 40% to match the
   apparent size of the other logos across every strip + viewport. */
.rl-credibility__logos      img[src*="logo-octopus"],
.rl-credibility-line__logos img[src*="logo-octopus"] {
  height: 56px;
  max-height: 56px;
}
@media (max-width: 900px) {
  .rl-credibility__logos img[src*="logo-octopus"] { height: 45px; max-height: 45px; }
}
@media (max-width: 600px) {
  .rl-credibility__logos img[src*="logo-octopus"] { height: 39px; max-height: 39px; }
}

/* proof-cards/sector variant — light background, sector-name top
   accent above the client. Matches the partner-credentials PDF
   format: SECTOR HEADER -> Client -> big stat -> description. */
.rl-proof.rl-proof--sector {
  background: var(--rl-off-white);
}
.rl-proof.rl-proof--sector .rl-section-header .rl-eyebrow { color: var(--rl-red-dark); }
.rl-proof.rl-proof--sector .rl-h2,
.rl-proof.rl-proof--sector .rl-section-sub { color: var(--rl-navy); }
.rl-proof__card.rl-proof__card--sector {
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--rl-radius-lg);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rl-proof__sector {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 11px is as small as text gets on this site, so 4.5:1 is not negotiable.
     See --rl-coral-text in redlines-tokens.css. */
  color: var(--rl-coral-text);
  margin: 0 0 4px;
}
.rl-proof__card--sector .rl-proof__client {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0;
}
.rl-proof__card--sector .rl-proof__stat-val {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rl-navy);
  line-height: 1.2;
  display: block;
  margin: 4px 0 12px;
}
.rl-proof__card--sector .rl-proof__body {
  font-size: 0.92rem;
  color: var(--rl-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Back-to-top button — bottom-right, fades in after first viewport. */
.rl-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: var(--rl-radius-full);
  background: var(--rl-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}
.rl-back-to-top.is-visible {
  opacity: 0.88;
  pointer-events: auto;
}
.rl-back-to-top:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.rl-back-to-top[hidden] { display: none; }
.rl-material-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: middle; }
.rl-back-to-top .rl-material-icon { font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
  .rl-back-to-top { transition: none; }
}

/* ─── HP Decisions section ─── */
.rl-hp-decisions.rl-section { padding-top: var(--rl-space-12); padding-bottom: 5rem; }
.rl-hp-decisions .rl-section-header { margin-bottom: 4rem; }
.rl-hp-decisions .rl-container { max-width: 1380px; }
.rl-hp-decisions__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 0;
}
.rl-hp-dec-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  padding: 26px 22px 22px;
  background: #fff;
  border: 1px solid var(--rl-navy-10);
  border-radius: var(--rl-radius-lg);
  text-decoration: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.rl-hp-dec-card:hover { box-shadow: 0 4px 20px var(--rl-navy-08); border-color: var(--rl-coral); }
.rl-hp-dec-card__icon { font-size: 1.8rem !important; color: var(--rl-coral); display: block; margin-bottom: 4px; }
.rl-hp-dec-card__question { font-size: 0.97rem; font-weight: 700; color: var(--rl-navy); margin: 0; line-height: 1.35; min-height: 2.65rem; }
.rl-hp-dec-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rl-navy-07);
}
.rl-hp-dec-card__more { font-size: 0.82rem; font-weight: 600; color: var(--rl-red-dark); }
.rl-hp-dec-card__powered { font-size: 0.7rem; font-weight: 600; color: var(--rl-navy); opacity: 0.45; text-align: right; }
.rl-hp-decisions__partnership { margin-top: 48px; }
.rl-hp-partnership-card {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 24px 32px;
  background: var(--rl-navy);
  border-radius: var(--rl-radius-lg);
  text-decoration: none;
  transition: opacity 0.15s;
}
.rl-hp-partnership-card:hover { opacity: 0.92; }
.rl-hp-partnership-card__left { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 300px; padding-right: 32px; border-right: 1px solid rgba(255,255,255,0.12); }
.rl-hp-partnership-card__title { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.rl-hp-partnership-card__powered { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; }
.rl-hp-partnership-card__body { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin: 0; flex: 1; padding: 0 32px; }
.rl-hp-partnership-card__cta { font-size: 0.85rem; font-weight: 600; color: var(--rl-coral); flex-shrink: 0; white-space: nowrap; padding-left: 32px; border-left: 1px solid rgba(255,255,255,0.12); }

/* === HOMEPAGE DEMO (home-v2, phase 2) =========================
   Scoped entirely to .home-v2 so the live homepage is untouched.
   See content/pages/home-v2.php and
   docs/CODEX-HOMEPAGE-DESIGN-BRIEF-2026-09-10.md.

   The hero photograph is 4:3 (Unsplash, Francesco Ungaro), where the
   storm sky occupies the upper half and the city sits along the lower
   third. Anchoring the crop at 65% keeps the buildings in frame at
   desktop while leaving the darkest part of the sky behind the text. */
.home-v2 .rl-hero {
  background-image: url('/wp-content/uploads/2026/09/HomeV2Hero.jpg');
  background-position: center 65%;
}
/* Legibility does not come from the brightness filter alone here: the
   sky has bright patches. A navy scrim, heavier on the left where the
   text sits, guarantees contrast without flattening the photograph. */
.home-v2 .rl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgba(1, 0, 61, 0.88) 0%,
      rgba(1, 0, 61, 0.72) 38%,
      rgba(1, 0, 61, 0.32) 68%,
      rgba(1, 0, 61, 0.18) 100%);
  pointer-events: none;
}
.home-v2 .rl-hero { position: relative; }
.home-v2 .rl-hero__inner { position: relative; z-index: 1; }

/* Two audience routes: the three-party element carries two panels here,
   so give it a two-column track and drop the chevron connector (these
   are alternatives, not a sequence). */
.home-v2 .rl-flow3__track { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.home-v2 .rl-flow3__party::after { display: none !important; }
.home-v2 .rl-flow3__note { font-size: 1rem; }
/* The hero CTA row wrapped to two lines. The buttons need 304 + 16 + 237 =
   557px and the content column was 558px, so it wrapped on a rounding
   error. The column is sized by `flex: 0 0 46%` in the >=1024px rule, so
   max-width alone does nothing: widen the flex basis instead. The photo
   carries the right half of this composition, so the text column can take
   more room than the live hero's. */
@media (min-width: 1024px) {
  .home-v2 .rl-hero__content { flex: 0 0 52%; }
}
.home-v2 .rl-hero__actions { align-items: center; }
/* Ground the product example instead of letting it float: a soft shadow
   and a hairline give it a surface to sit on against the dark sky. */
.home-v2 .rl-hero__screenshot {
  box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.12);
}
.home-v2 .rl-flow3__note a { font-weight: 700; text-decoration: none; }
.home-v2 .rl-flow3__note a:hover { text-decoration: underline; }

/* The question row sits below the proof and is deliberately quieter than
   the five large cards it replaces: no icon-led blocks competing with the
   case cards above. */
.home-v2 .rl-hp-decisions__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.home-v2 .rl-hp-dec-card { padding: 20px 16px; }
.home-v2 .rl-hp-dec-card__icon { font-size: 20px; }
.home-v2 .rl-hp-dec-card__question { font-size: 0.95rem; line-height: 1.35; }
.home-v2 .rl-hp-dec-card__footer { margin-top: 12px; }
.home-v2 .rl-hp-dec-card__more { font-size: 0.8rem; }
@media (max-width: 1100px) {
  .home-v2 .rl-hp-decisions__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .home-v2 .rl-flow3__track { grid-template-columns: 1fr; }
  .home-v2 .rl-hp-decisions__grid { grid-template-columns: repeat(2, 1fr); }
  /* Portrait crop on phones: the mobile source is 800x600, and at that
     width the city band is what earns its place, not the sky. */
  .home-v2 .rl-hero { background-position: center 72%; }
}
@media (max-width: 560px) {
  .home-v2 .rl-hp-decisions__grid { grid-template-columns: 1fr; }
}

/* === WORKFLOW: THREE-PARTY FLOW (workflow/three-party) ===
   Item 36 of docs/SITE-TODO-2026-09-09.md (F33, C-2). For Partners had a
   stock handshake hero and no diagram of the actual model. This draws the
   adviser -> RedLines -> client relationship in CSS: three columns, the
   middle one navy (RedLines), coral connectors between them. Drawn rather
   than an image so it stays sharp, translatable and needs no artwork. */
.rl-flow3__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 48px;
}
.rl-flow3__party {
  position: relative;
  background: #fff;
  border: 1px solid var(--rl-navy-10);
  border-top: 4px solid var(--rl-navy);
  border-radius: var(--rl-radius-lg);
  padding: 28px 24px 24px;
}
/* RedLines is the middle party: inverted so the division of labour reads at
   a glance without a legend. */
.rl-flow3__party--us {
  background: var(--rl-navy);
  border-color: var(--rl-navy);
  border-top-color: var(--rl-coral);
}
.rl-flow3__icon {
  font-size: 26px;
  color: var(--rl-coral);
}
.rl-flow3__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rl-navy-40, rgba(11, 31, 58, 0.4));
  margin: 10px 0 4px;
}
.rl-flow3__party--us .rl-flow3__label { color: rgba(255, 255, 255, 0.55); }
.rl-flow3__role {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rl-navy);
  margin: 0 0 14px;
}
.rl-flow3__party--us .rl-flow3__role { color: #fff; }
.rl-flow3__does {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rl-flow3__does li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--rl-text-body);
}
.rl-flow3__does li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-coral);
}
.rl-flow3__party--us .rl-flow3__does li { color: rgba(255, 255, 255, 0.82); }
/* Connectors: the same coral step-circle used by the homepage engagement
   row and the offer-progression strip, so the flow reads as one family. */
@media (min-width: 901px) {
  .rl-flow3__party:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rl-coral);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.25);
    z-index: 2;
  }
}
.rl-flow3__note {
  margin: 32px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--rl-text-secondary);
}
.rl-flow3__note a { color: var(--rl-coral); }
@media (max-width: 900px) {
  .rl-flow3__track { grid-template-columns: 1fr; gap: 16px; }
  /* Stacked: a short vertical coral rule stands in for the chevron. */
  .rl-flow3__party:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -16px;
    width: 2px;
    height: 16px;
    background: var(--rl-coral);
  }
}

/* ─── HP How We Work 6-stage flow ─── */
.rl-how-work__stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.rl-how-work__stage {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 3px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: 24px 20px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.rl-how-work__stage:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.rl-how-work__stage-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--rl-coral);
  line-height: 1;
  margin-bottom: 12px;
}
.rl-how-work__stage-heading { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.rl-how-work__stage-body { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.55; }

/* ─── HP Tools overview ─── */
.rl-hp-tools__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.rl-hp-tool-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px 24px;
  background: #fff;
  border: 1px solid var(--rl-navy-10);
  border-left: 4px solid var(--rl-navy);
  border-radius: var(--rl-radius-lg);
  text-decoration: none;
  transition: box-shadow 0.15s, border-left-color 0.15s;
}
.rl-hp-tool-card:hover { box-shadow: 0 4px 20px var(--rl-navy-08); border-left-color: var(--rl-coral); }
.rl-hp-tool-card__name { font-size: 1.1rem; font-weight: 800; color: var(--rl-navy); margin: 0; }
.rl-hp-tool-card__tagline { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rl-red-dark); margin: 0; }
.rl-hp-tool-card__body { font-size: 0.9rem; line-height: 1.55; color: var(--rl-text-body); margin: 4px 0 0; flex: 1; }
.rl-hp-tool-card__more { font-size: 0.85rem; font-weight: 600; color: var(--rl-red-dark); margin-top: 12px; }
.rl-hp-tool-card--aside { border-left-style: dashed; }
.rl-hp-tool-card__aside {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-navy-40, rgba(11, 31, 58, 0.4));
  margin: -8px 0 4px;
}
.rl-hp-tool-card__visual {
  margin-top: 20px;
  border-radius: var(--rl-radius-md);
  overflow: hidden;
  container-type: inline-size;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .rl-hp-decisions__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .rl-hp-decisions__grid { grid-template-columns: repeat(2, 1fr); }
  .rl-how-work__stages { grid-template-columns: repeat(2, 1fr); }
  .rl-how-work__stages-row { grid-template-columns: repeat(2,1fr); }
  .rl-hp-tools__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rl-how-work__stages { grid-template-columns: 1fr; }
  .rl-how-work__stages-row { grid-template-columns: 1fr; }
}
/* The partnership card's row layout (300px left column + body + nowrap
   CTA) needs ~725px; it only stacked below 600px, so 601-724px overflowed
   the page horizontally (found 2026-09-09 while fixing item 8; site-check
   tests 375 only). Stack from 767px down, and drop the row dividers. */
@media (max-width: 767px) {
  .rl-hp-partnership-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rl-hp-partnership-card__left { width: auto; padding-right: 0; border-right: 0; }
  .rl-hp-partnership-card__body { padding: 0; }
  .rl-hp-partnership-card__cta { padding-left: 0; border-left: 0; white-space: normal; }
}

/* ─── Partial card — homepage tool card context ─── */
.rl-hp-tool-card__visual .rl-svc-mock { aspect-ratio: 1 / 1; }
.rl-hp-tool-card__visual .rl-card { border-width: 2px; }
.rl-hp-tool-card__visual .rl-mock__grid td { border-bottom-color: transparent; }

/* ─── Reusable powered-by pill ─── */
.rl-powered-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid;
  white-space: nowrap;
}
.rl-powered-pill--on-dark {
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
  background: #1a1a4d;
}
.rl-powered-pill--on-dark.rl-powered-pill--pro {
  color: #ffffff;
  border-color: rgba(var(--brand-accent-rgb), 0.5);
  background: #c73333;
}
.rl-powered-pill--on-light {
  color: var(--rl-navy);
  border-color: var(--rl-navy-18);
  background: var(--rl-navy-04);
}

/* ─── How We Work — two-track layout ─── */
.rl-how-work__tracks { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.rl-how-work__track {
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: var(--rl-radius-lg);
  padding: 18px 20px 22px;
  transition: border-color 0.2s;
  cursor: default;
}
.rl-how-work__track--extended {
  border-color: rgba(var(--brand-accent-rgb), 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Outer pro border highlights only when hovering the 04-06 area, not the nested Scan box */
.rl-how-work__track--extended:hover:not(:has(.rl-how-work__track:hover)) { border-color: rgba(var(--brand-accent-rgb), 0.9); }
/* Inner scan box hover must not cascade to outer */
.rl-how-work__track--extended .rl-how-work__track:hover { border-color: rgba(255,255,255,0.6); }
.rl-how-work__track-header { margin-bottom: 16px; }
/* Pro & Expert pill: remove double spacing so gap above and below pill are equal */
.rl-how-work__track--extended > .rl-how-work__track-header { margin-bottom: 0; }
/* Pills dim by default, brighten when their track is hovered.
   Border-only fade — keeps text fully opaque so the contrast audit
   sees the real foreground color, not a composited near-transparent one. */
.rl-how-work__track-header .rl-powered-pill {
  border-color: rgba(255,255,255,0.15);
  transition: border-color 200ms ease;
}
.rl-how-work__track:not(.rl-how-work__track--extended):hover .rl-powered-pill { border-color: rgba(255,255,255,0.5); }
.rl-how-work__track--extended:hover:not(:has(.rl-how-work__track:hover)) > .rl-how-work__track-header .rl-powered-pill { border-color: rgba(var(--brand-accent-rgb), 0.7); }
.rl-how-work__stages-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .rl-how-work__stages-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rl-how-work__stages-row { grid-template-columns: 1fr; }
}

/* ─── Decisions bespoke CTA ─── */
.rl-hp-decisions__bespoke {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-bottom: 4px;
}
.rl-hp-decisions__bespoke-text { font-size: 0.88rem; color: var(--rl-text-secondary); margin: 0; }
.rl-btn--outline-sm {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 18px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
  border-radius: 100px;
  color: var(--rl-navy);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.rl-btn--outline-sm:hover { background: rgba(var(--brand-primary-rgb), 0.05); border-color: var(--rl-navy); color: var(--rl-navy); }

/* ─── Site Footer ─── */
.rl-footer {
  background: var(--rl-navy);
  color: rgba(255,255,255,0.6);
  font-family: var(--rl-font);
}
.rl-footer__inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: var(--rl-max-width);
  margin: 0 auto;
  padding: 56px 32px 48px;
}
.rl-footer__logo {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.rl-footer__tagline {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 0 0 10px;
  line-height: 1.4;
}
.rl-footer__descriptor {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
  line-height: 1.65;
}
.rl-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rl-footer__col-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.70);
  margin: 0 0 4px;
}
.rl-footer__col a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.rl-footer__col a:hover { color: #fff; }
.rl-footer__col-link--accent { color: var(--rl-coral) !important; }
.rl-footer__col-link--accent:hover { color: #ff7a7a !important; }
.rl-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--rl-max-width);
  margin: 0 auto;
  padding: 20px 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.rl-footer__copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
}
.rl-footer__bar-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.rl-footer__bar-links a,
.rl-footer__bar-links button {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.rl-footer__bar-links button { background: none; border: 0; padding: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.rl-footer__bar-links button[hidden] { display: none; }
.rl-footer__bar-links button:hover { color: #fff; }
/* THE MAP LOADS WITH THE PAGE. Rob, 30 October: "just do it so the map
   loads". The consent gate, its holding panel and the drawn placeholder
   that briefly replaced it are all gone; .contact-map-embed now frames an
   ordinary iframe.

   Recorded because it is a deliberate trade, not an oversight: Google
   receives the visitor's IP and sets its cookies when this loads, before
   any choice is made. Neither policy page describes the map, so nothing on
   the site contradicts that today. If either is ever written to cover
   embeds, this is the behaviour it has to describe. */
.rl-footer__bar-links a:hover { color: #fff; }

/* Hide GeneratePress default footer bar */
.site-footer { display: none !important; }

@media (max-width: 900px) {
  .rl-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 20px 32px; }
  .rl-footer__brand { grid-column: 1 / -1; }
  .rl-footer__bar { flex-direction: column; gap: 12px; text-align: center; padding: 20px; }
}
@media (max-width: 540px) {
  .rl-footer__inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════ */

/* Origin — white bg, 2-col prose */
.about-origin {
  background: #fff;
  padding: var(--rl-space-20) 0;
}
.about-origin .rl-eyebrow { color: var(--rl-red-dark); }
.about-origin__h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 12px 0 40px;
  max-width: 640px;
  line-height: 1.25;
}
.about-origin__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.about-origin__body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(var(--brand-primary-rgb), 0.75);
  margin: 0;
}

/* Origin --with-image variant: mirrors .about-urgency's two-column
   grid but swaps the visual to the LEFT and text to the RIGHT, giving
   the page visual rhythm against the stripes section below. */
.about-origin--with-image .about-origin__eyebrow {
  text-align: center;
  display: block;
  margin-bottom: 32px;
}
.about-origin--with-image .about-origin__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-origin--with-image .about-origin__visual {
  display: flex;
}
.about-origin--with-image .about-origin__image {
  width: 100%;
  height: auto;
  border-radius: var(--rl-radius-md);
  display: block;
  object-fit: cover;
}
.about-origin--with-image .about-origin__h2 {
  margin-top: 0;
}
.about-origin--with-image .about-origin__body {
  margin-bottom: 16px;
}
.about-origin--with-image .about-origin__body:last-of-type {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .about-origin--with-image .about-origin__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Urgency — white bg, text + warming stripes image */
.about-urgency {
  background: #fff;
  padding: var(--rl-space-20) 0;
}
.about-urgency__eyebrow {
  text-align: center;
  display: block;
  margin-bottom: 32px;
}
.about-urgency__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-urgency__h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 12px 0 28px;
  line-height: 1.25;
}
.about-urgency__body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--rl-navy) !important;
  margin: 0 0 16px;
}
.about-urgency__body:last-of-type { margin-bottom: 0; }
.about-urgency__body a { color: var(--rl-navy); text-decoration: underline; }
.about-urgency__visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-urgency__img {
  width: 100%;
  border-radius: var(--rl-radius-md);
  display: block;
}
.about-urgency__stripes {
  width: 100%;
  height: 220px;
  border-radius: var(--rl-radius-md);
  background-image: url('/wp-content/uploads/2026/05/Stripes.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.about-urgency__caption {
  font-size: 0.78rem;
  color: var(--rl-text-secondary);
  text-align: center;
  margin: 0;
  font-style: italic;
}
.about-urgency__name-note {
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  padding: 10px 16px;
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--rl-navy);
  background: var(--rl-off-white);
  border-radius: var(--rl-radius-lg);
}

/* Approach — off-white, numbered editorial rows */
/* === About: founder section =====================================
   Photo left, name + role + bio paragraphs right. The page's
   credibility load-bearer — must look human, not a stock layout. */
.about-founder {
  padding: var(--rl-space-20) 0;
}
.about-founder__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 768px) {
  .about-founder__inner { grid-template-columns: 1fr; gap: 32px; }
}
.about-founder__photo {
  margin: 0;
  align-self: center;
}
.about-founder__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--rl-radius-lg);
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.about-founder__text .rl-eyebrow {
  color: var(--rl-red-dark);
  text-align: left;
}
.about-founder__h2 {
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--rl-navy);
  letter-spacing: -0.02em;
  margin: 10px 0 4px;
  line-height: 1.2;
}
.about-founder__role {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rl-coral);
  margin: 0 0 24px;
}
.about-founder__para {
  font-size: 1rem;
  color: var(--rl-text-secondary);
  line-height: 1.7;
  margin: 0 0 16px;
}
.about-founder__creds {
  list-style: none;
  padding: 20px 0 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--app-border);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 28px;
}
.about-founder__creds li {
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-navy);
  position: relative;
  padding-left: 18px;
}
.about-founder__creds li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: var(--rl-radius-full);
  background: var(--rl-coral);
}

.about-approach {
  background: var(--rl-off-white);
  padding: var(--rl-space-20) 0;
}
.about-approach__h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 12px 0 48px;
  line-height: 1.25;
}
.about-approach__rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about-approach__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--app-border);
}
.about-approach__row:last-child { border-bottom: 1px solid var(--app-border); }
.about-approach__num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--rl-coral);
  line-height: 1;
  padding-top: 4px;
}
.about-approach__heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 10px;
}
.about-approach__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rl-navy);
  margin: 0;
}

@media (max-width: 800px) {
  .about-origin__cols { grid-template-columns: 1fr; gap: 24px; }
  .about-urgency__inner { grid-template-columns: 1fr; gap: 40px; }
  .about-approach__row { grid-template-columns: 56px 1fr; gap: 20px; }
  .about-approach__num { font-size: 1.8rem; }
}

/* ─── Decision Flow progress dots ─── */
.rl-flow-progress {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}
.rl-flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), 0.15);
  transition: background 0.2s;
}
.rl-flow-dot--active { background: var(--rl-coral); }

/* ─── Decision Flow (Homepage) ─── */
.rl-decision-flow {
  max-width: 860px;
  margin: 24px auto 16px;
  background: #fff;
  border: 1px solid var(--rl-navy-10);
  border-radius: var(--rl-radius-lg);
  box-shadow: 0 2px 12px var(--rl-navy-06);
  display: flex;
  align-items: stretch;
}
.rl-flow-step,
.rl-flow-result {
  flex: 1;
  padding: 32px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.rl-flow-step--hidden { display: none !important; }
.rl-flow-question {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 32px;
  line-height: 1.35;
}
.rl-flow-answers {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.rl-flow-btn {
  padding: 14px 40px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--rl-radius-lg);
  cursor: pointer;
  border: 2px solid var(--rl-navy);
  background: var(--rl-navy);
  color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.rl-flow-btn:hover { background: var(--rl-coral); border-color: var(--rl-coral); }
.rl-flow-btn--no { background: transparent; color: var(--rl-navy); }
.rl-flow-btn--no:hover { background: var(--rl-coral); border-color: var(--rl-coral); color: #fff; }
.rl-flow-hint {
  font-size: 0.82rem;
  color: rgba(var(--brand-primary-rgb), 0.45);
  margin: -8px 0 0;
  line-height: 1.4;
}
.rl-flow-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rl-flow-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: var(--rl-radius-full);
  border: 1px solid var(--rl-navy-18);
  background: transparent;
  color: rgba(var(--brand-primary-rgb), 0.5);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--rl-font);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.rl-flow-back:hover { border-color: var(--rl-coral); color: var(--rl-coral); }
.rl-flow-result {
  text-align: left;
  justify-content: flex-start;
}
.rl-flow-result__card {
  background: #fff;
  border: 1px solid var(--rl-navy-10);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  padding: 28px 32px;
}
.rl-flow-result__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rl-coral);
  margin: 0 0 10px;
}
.rl-flow-result__name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--rl-navy);
  margin: 0 0 12px;
  line-height: 1.25;
}
.rl-flow-result__body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--rl-text-body);
  margin: 0 0 24px;
}
.rl-flow-result__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rl-flow-restart {
  background: none;
  border: none;
  color: var(--rl-navy-40);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--rl-font);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.rl-flow-restart:hover { color: var(--rl-coral); }
@media (max-width: 600px) {
  .rl-flow-step, .rl-flow-result { padding: 28px 20px; }
  .rl-flow-question { font-size: 1.1rem; }
  .rl-flow-answers { flex-direction: column; align-items: stretch; }
  .rl-flow-btn { width: 100%; text-align: center; }
  .rl-flow-result__card { padding: 20px 16px; }
  .rl-flow-result__name { font-size: 1.1rem; }
}

/* ── Log in — navy outline pill, sits after Contact in normal nav flow ── */
.main-navigation .menu > .rl-nav-login {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.main-navigation .rl-nav-login > a {
  display: inline-block !important;
  font-family: var(--rl-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--rl-navy) !important;
  background: transparent !important;
  border: 1.5px solid var(--rl-navy) !important;
  border-radius: var(--rl-radius-full) !important;
  padding: 7px 18px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.main-navigation .rl-nav-login > a:hover {
  background: var(--rl-navy) !important;
  color: #ffffff !important;
  border-color: var(--rl-navy) !important;
}
/* Dropdown — align left edge to left edge of pill, extending rightward (avoids covering Contact) */
/* RIGHT-ALIGNED, not left, and this was causing horizontal scroll on
   every page between 950 and 1200px.
   
   Log in is the last item in the bar, so anchoring its 160px dropdown to
   its own LEFT edge pushed it past the viewport. The panel is
   visibility:visible when closed (it is hidden by opacity and transform,
   not by display), so the browser counts it: documentElement.scrollWidth
   measured exactly 51px wider than the viewport at 1200, 1100, 1024,
   1000 and 950. At 1440 the bar sits far enough from the edge that it
   fits, and at 901 and below the mobile menu has taken over, which is
   why both the review's responsive audit (768 and 375) and the site
   gate's 375px check missed it.
   
   Found while verifying an unrelated tablet change on the case pages. */
.main-navigation .rl-nav-login .sub-menu {
  left: auto !important;
  right: 0 !important;
  top: 100% !important;
  bottom: auto !important;
  min-width: 160px;
}
/* Mobile menu, items 9 and 9a of docs/SITE-TODO-2026-09-09.md (Codex
   F04 plus what fixing it exposed). Three defects in the toggled menu:
   Log in was hidden below 768px by a rule that assumed the hamburger
   handled login; the Services, Tools and Log in parents are href="#" and
   the chevrons are hidden, so their sub-menus could never be opened on a
   phone (every decision and tool page unreachable from the nav); and the
   collapsed sub-menus still occupied 17px each, leaving phantom gaps and
   nudging "Case Studies" off centre. With the menu open every sub-menu is
   now expanded and centred, the "#" parents act as group labels, and Log
   in is a plain item with Scan and Pro beneath it. Desktop untouched. */
@media (max-width: 768px) {
  .main-navigation .menu > .rl-nav-login { display: list-item; margin-left: 0; }
  /* Log in loses its desktop button treatment on mobile and becomes a
     plain row like the others. The !important flags are the legacy
     block's; they stay because the desktop rules they override are
     themselves specific, but the VALUES are now the same ones the open
     menu uses below rather than the old 30px line box.

     line-height:30px here was half of why every tap target measured 30px
     tall. Fixing it in place is better than adding a more specific rule
     on top: a second declaration winning an !important fight is how a
     stylesheet becomes unreadable. */
  .main-navigation .rl-nav-login > a {
    display: flex !important;
    align-items: center;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    min-height: 48px;
    background: transparent !important;
  }
  /* LEFT, not centre. The v2 review asked for "stronger alignment" in the
     mobile menu, and centring was the other half of the problem: six
     items of different lengths had six different left edges. Both
     selectors are listed because the login item carried its own copy of
     the centring rule. */
  .main-navigation.toggled .main-nav ul.menu > li,
  .main-navigation.toggled .main-nav ul.menu > li.rl-nav-login { text-align: left; }
  .main-navigation.toggled .main-nav ul.menu > li.nav-cta { justify-content: center; }
  /* "#" parents are labels, not links, once their children are visible. */
  .main-navigation.toggled .main-nav ul.menu > li.menu-item-has-children > a[href="#"] { pointer-events: none; }
  .main-navigation.toggled .main-nav .sub-menu {
    /* GP floats sub-menus left; a narrow one (Tools, Log in) let the
       following top-level items wrap up beside it. */
    float: none !important;
    width: 100% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .main-navigation.toggled .main-nav .sub-menu li { text-align: center; }
  .main-navigation.toggled .main-nav .sub-menu a {
    display: block;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rl-navy-70, rgba(11, 31, 58, 0.7)) !important;
  }
}

/* ── Proof panel: client identity ──
   Three treatments, never mixed: an approved logo in a fixed-height box,
   a typographic name for a named client without one, or a descriptive
   identity with a quiet withheld line for a confidential client. Rob's
   rule, 3 October: "avoid fake logos, arbitrary initials and empty logo
   boxes."

   The box is fixed-HEIGHT and auto-width so logos of different aspect
   ratios sit on one optical baseline, the same principle as the partner
   logo box. Greyscale at rest keeps the panel's own hierarchy: the
   finding leads, the client qualifies it. */
/* THE TITLE ROW: heading left, client identity right, baselines aligned
   at the top so a two-line heading does not drag the logo down with it.
   The identity column is flex:none, so the heading takes the space and the
   logo keeps its natural width.

   On a narrow column it wraps to its own line UNDER the heading rather
   than squeezing: a logo compressed to fit is worse than a logo on the
   next line. */
.rl-v2__proof-panel-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
.rl-v2__proof-panel-titlerow h2 { flex: 1 1 18rem; }
.rl-v2__proof-identity {
  flex: none;
  height: 34px;
  display: inline-flex;
  align-items: center;
  /* Nudged down so the logo's optical centre sits with the heading's first
     line rather than its cap height. */
  margin-top: 0.35rem;
}
.rl-v2__proof-identity img {
  max-height: 100%;
  width: auto;
  filter: grayscale(1);
  opacity: 0.85;
}
/* The text identity, for a named client with no approved logo or for an
   anonymised engagement. Sized to sit beside the label without competing
   with the heading below. */
.rl-v2 .rl-v2__proof-identity-text {
  flex: none;
  margin: 0.4rem 0 0;
  text-align: right;
  font-size: 1rem;
  font-weight: 600;
  color: var(--v2-ink);
}
.rl-v2 .rl-v2__proof-identity-text span {
  font-size: var(--v2-small);
  font-weight: 400;
  color: var(--v2-ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   SCREENING FORM, IN THE v2 VISUAL SYSTEM
   ═══════════════════════════════════════════════════════════════════
   The last old-style elements on /free-screening/ and the eight partner
   pages after the body converted on 4 October. Rob: "free screening still
   has old style elements on it."

   WPForms owns the form markup, so this restyles rather than rebuilds:
   the submit button takes the v2 button spec (4px radius, Work Sans,
   accent-mid) instead of a Poppins pill, and the "what happens next"
   panel loses its rounded card for a ruled block, which is how every
   other v2 aside is drawn.

   SCOPED TO .screening-scope AND .rl-v2. The original note here said the
   scope existed "so the contact page and the campaign pages, which still
   use the legacy language, are untouched". That stopped being true on 12
   October, when /contact/ and /request-documents/ were converted and took
   .rl-v2 on their wrappers: their submit button kept the fully rounded
   legacy pill while the v2 action directly above it in the same hero was
   a 4px rectangle. Two button languages, 500px apart, on the page every
   CTA on the site points at.

   The campaign pages have no .rl-v2 and are still untouched, which is
   what the scoping was for. These rules retire with the legacy CSS at
   stage 11, when both scopes go away entirely.
   ═══════════════════════════════════════════════════════════════════ */
.rl-v2 .contact-form-wrap .wpforms-form .wpforms-submit,
.screening-scope .contact-form-wrap .wpforms-form .wpforms-submit {
  /* FALLBACK IS #d93b30, the token's own value, NOT the lighter
     --brand-accent-mid. I first wrote #f07070 here from memory: that is
     2.89:1 behind white text and fails AA badly, where the real token is
     4.55:1. A fallback that disagrees with its token is worse than none,
     because it only shows up where the token is missing. */
  background: var(--v2-accent-mid, #d93b30) !important;
  border-radius: 4px !important;
  font-family: var(--v2-font-body, 'Work Sans', sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 0.9rem 1.6rem !important;
  letter-spacing: 0 !important;
}
.rl-v2 .contact-form-wrap .wpforms-form .wpforms-submit:hover,
.screening-scope .contact-form-wrap .wpforms-form .wpforms-submit:hover {
  background: #c02f25 !important;
}
/* The aside: a ruled block, not a rounded card. Same treatment as the v2
   method facts and the spec boundary. */
.screening-scope .rl-support-panel {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--v2-rule, rgba(1, 0, 61, 0.10));
  border-radius: 0;
  padding: 1.5rem 0 0;
}

/* ── Hero mock sample-data label ──
   Every product render on the site is captioned as sample data
   (mockups/README.md rule 3). The square hero cards were the exception,
   and they are where a visitor meets invented numbers FIRST: the
   screening card's "95 of 175" read as a real result. Rob's review,
   3 October: "explicitly label the hero's 95-of-175 example as sample
   data."

   Quiet by design. The label has to be legible without competing with the
   figure it qualifies. */
/* MOVED OUTSIDE THE CARD, 4 October. .rl-card is overflow:hidden at a
   fixed height from the hero geometry rule, so a label appended inside it
   was clipped: measured bottom 576 against a card ending at 556. It now
   renders in .svc-hero__card, beneath the card rather than within it,
   which is also where it reads as a caption rather than a card row. */
/* ABSOLUTE, so it cannot change the hero's geometry. As a normal block it
   was a flow child of .svc-hero__card and pushed the CTA row from 514px to
   532px across all nine screening pages, failing rule 20. The card is
   fixed-height, so positioning the label just under it is stable. */
.svc-hero__card { position: relative; }
.svc-hero__card-sample {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 10px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* 0.62, not 0.45. At 0.45 this composites to #8d8ca8 on the white card,
     which is 3.26:1 and fails AA for small text; the lighthouse gate
     caught it on /free-screening/. 0.62 gives #626187 at 5.87:1. Quiet
     enough not to compete with the figure it qualifies, legible enough to
     be a label rather than decoration. */
  /* White, not ink: outside the card the label sits on the navy hero
     ground. 0.72 composites to #c3c2cd on that ground, clearing AA for
     small text; the lighthouse gate checks it. */
  color: rgba(255, 255, 255, 0.72);
  text-align: right;
}


/* ═══════════════════════════════════════════════════════════════════
   SPECIFICATION  (v2/spec)
   ═══════════════════════════════════════════════════════════════════
   A definition list, not a bullet list, because the information is
   term-and-value and was being written as sentences to fake that.

   Rob's review, 3 October: "the current Scan section gives Input, eleven
   hazard names, delivery time and exclusions almost identical visual
   treatment. Labels run into their values. The two-column reading order
   mixes unrelated subjects."

   THE LAYOUT IS THE ARGUMENT. Narrow column for what you provide (few
   facts, short), wide column for what comes back (the substance), then
   the hazard inventory on its own because a list of eleven names IS a
   list and should look like one. Reading order runs narrow-then-wide,
   which is the order the questions get asked in.
   ═══════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__spec,
section.rl-v2__spec.rl-v2 { background: var(--v2-paper-2); }
.rl-v2__spec-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__spec-head h2 { max-width: 28rem; }

.rl-v2__spec-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* The column headings are labels, not headings competing with the h2. */
.rl-v2 .rl-v2__spec-col-h {
  font-size: var(--v2-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin: 0 0 1.25rem;
}

.rl-v2__spec-dl { margin: 0; }
/* Each pair is term-above-value with a rule between pairs. A two-column
   term/value grid was tried and read worse: the terms are short and the
   values run to a sentence, so a side-by-side grid left the term column
   mostly empty and forced the value into a narrow measure. */
.rl-v2__spec-pair {
  padding: 1rem 0;
  border-top: 1px solid var(--v2-rule);
}
.rl-v2__spec-pair:last-child { border-bottom: 1px solid var(--v2-rule); }
.rl-v2 .rl-v2__spec-pair dt {
  font-size: var(--v2-small);
  font-weight: 600;
  color: var(--v2-ink);
  margin-bottom: 0.3rem;
}
.rl-v2 .rl-v2__spec-pair dd {
  margin: 0;
  font-size: var(--v2-body);
  line-height: 1.55;
  color: var(--v2-ink-soft);
}

/* Account terms remain visible, separate from assessment inputs and outputs. */
.rl-v2__spec-account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-gap-block); margin: var(--v2-gap-block) 0 0; }
.rl-v2__spec-account .rl-v2__spec-pair { border: 0; padding: 0; }
/* Overview: two readable groups, without a rule around every field. */
.rl-v2 .rl-v2__spec[data-layout="overview"] .rl-v2__spec-col-h { font-size: var(--v2-h3); font-weight: var(--v2-w-display); letter-spacing: normal; text-transform: none; color: var(--v2-ink); margin-bottom: var(--space-4); }
.rl-v2__spec[data-layout="overview"] .rl-v2__spec-dl { display: grid; gap: var(--space-3); }
.rl-v2__spec[data-layout="overview"] .rl-v2__spec-pair { padding: 0; border: 0; }
.rl-v2 .rl-v2__spec[data-layout="overview"] .rl-v2__spec-pair dt { font-size: var(--v2-body); }
@media (max-width: 700px) {
  .rl-v2__spec-account { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* The inventory: a genuine list, set as one so it reads as coverage at a
   glance rather than as eleven more facts of equal weight. */
.rl-v2__spec-inventory {
  margin-top: var(--v2-gap-block);
  padding-top: var(--v2-gap-block);
  border-top: 2px solid var(--v2-rule);
}
.rl-v2 .rl-v2__spec-inv-note {
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  margin: -0.75rem 0 1.25rem;
  max-width: var(--v2-measure);
}
.rl-v2__spec-inv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.6rem 2rem;
}
.rl-v2__spec-inv-list li {
  font-size: var(--v2-body);
  color: var(--v2-ink);
  padding-left: 1rem;
  position: relative;
}
.rl-v2__spec-inv-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--v2-accent-text, #c0342a);
}

/* The boundary: one line, set apart, because "what it does not do" is the
   fact a buyer most needs and it was previously the last bullet in a
   list of eight. */
.rl-v2 .rl-v2__spec-boundary {
  margin-top: var(--v2-gap-block);
  padding-top: 1.25rem;
  border-top: 2px solid var(--v2-rule);
  font-size: var(--v2-body);
  line-height: 1.6;
  color: var(--v2-ink);
  max-width: 46rem;
}
/* The trailing link is part of the sentence, so it must sit on the text
   baseline rather than introducing its own block spacing. Without this it
   wrapped onto a line of its own with a gap above it, which read as a
   separate statement. */
.rl-v2 .rl-v2__spec-boundary .rl-v2__link {
  display: inline;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .rl-v2__spec-cols { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   METHOD  (v2/method)
   ═══════════════════════════════════════════════════════════════════
   One or more named evidence chains, each a track that ENDS IN ITS OWN
   OUTPUT, plus sources, retained record and limitations as readable
   entries.

   Rob's review: "'Two chains' is illustrated as one numbered sequence
   from 1 to 6. Transition modelling looks like the next step after
   physical modelling." That was v2/steps generating counters across what
   were actually two independent methods, so the numbering asserted a
   relationship that does not exist.

   Each path numbers WITHIN ITSELF via its own counter-reset, and the
   output row closes it, so two paths read as two.
   ═══════════════════════════════════════════════════════════════════ */
.rl-v2__method-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__method-head h2 { max-width: 30rem; }
.rl-v2 .rl-v2__method-intro {
  font-size: var(--v2-lead);
  color: var(--v2-ink-soft);
  margin-top: 1.25rem;
  max-width: var(--v2-measure);
}

.rl-v2__method-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
/* A SINGLE path must not stretch the full content width. auto-fit gives
   one column the whole 1248px, so Scan's four steps ran at ~1,200px per
   line. Rob: "Scan's single method track stretches across almost the
   entire content width, producing very long lines. Give that track a
   narrower reading width." Two paths keep the full width, because each
   column is then already at a readable measure. */
.rl-v2__method-paths:not(:has(> * + *)) { max-width: 46rem; }
.rl-v2__method-path-head { margin-bottom: 1.25rem; }
.rl-v2 .rl-v2__method-path-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--v2-ink);
  margin: 0;
}
.rl-v2 .rl-v2__method-path-note {
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  margin: 0.4rem 0 0;
}

/* A buyer-facing summary with the full evidence chain still in the document.
   Each path has its own native disclosure, so the two methods stay distinct. */
.rl-v2 .rl-v2__method-summary { font-size: var(--v2-body); color: var(--v2-ink-soft); line-height: 1.65; margin: 0; max-width: var(--v2-measure); }
.rl-v2__method-details-body { padding-block: var(--space-2) var(--space-4); }
.rl-v2 .rl-v2__method[data-layout="summary"] .rl-v2__method-path-name { font-size: var(--v2-h3); font-weight: var(--v2-w-display); }
.rl-v2 .rl-v2__method[data-layout="summary"] :is(.rl-v2__method-step-b, .rl-v2__method-qualification) { font-size: var(--v2-body); }
.rl-v2 .rl-v2__method-qualification-heading { font-size: var(--v2-h3); margin: var(--space-4) 0 var(--space-1); }
.rl-v2 .rl-v2__method-qualification-heading + .rl-v2__method-qualification { margin-top: 0; }

/* The track. Numbered WITHIN the path, which is the whole point. */
.rl-v2__method-track {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rl-mstep;
  border-top: 2px solid var(--v2-ink);
}
.rl-v2__method-step {
  counter-increment: rl-mstep;
  position: relative;
  padding: 0.95rem 0 0.95rem 2.1rem;
  border-bottom: 1px solid var(--v2-rule);
}
.rl-v2__method-step::before {
  content: counter(rl-mstep);
  position: absolute;
  left: 0; top: 0.95rem;
  font-size: var(--v2-small);
  font-weight: 600;
  color: var(--v2-ink-soft);
  font-variant-numeric: tabular-nums;
}
.rl-v2 .rl-v2__method-step-h {
  font-size: var(--v2-body);
  font-weight: 600;
  color: var(--v2-ink);
  margin: 0 0 0.25rem;
}
.rl-v2 .rl-v2__method-step-b {
  font-size: var(--v2-small);
  line-height: 1.6;
  color: var(--v2-ink-soft);
  margin: 0;
}

/* The output closes the path, so a reader can see where each chain ends
   rather than inferring it from where the numbering stops. */
.rl-v2__method-output {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--v2-paper-2);
  border-left: 3px solid var(--v2-accent-text, #c0342a);
}
.rl-v2__method-output-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-bottom: 0.25rem;
}
.rl-v2__method-output-value {
  display: block;
  font-size: var(--v2-body);
  font-weight: 600;
  color: var(--v2-ink);
  line-height: 1.45;
}

/* Sources, retained record, limitations. Readable entries, NOT small
   print: "don't bury limitations in tiny text. They are part of
   evaluating the tool." */
/* TWO COLUMNS, NOT FOUR. The v2 review on /scan/: "the
   methodology/source block uses four narrow prose columns. Two wider
   columns or progressively revealed detail would be easier to read."

   auto-fit with a 16rem minimum fitted four columns in the available
   width, measured at 276px each. These entries are sources, record and
   limitations: sentences, not labels, and 276px sets them at roughly 35
   characters a line. Two columns give about 570px, which is a reading
   measure, and the content is four or five entries, so two columns also
   means two tidy rows rather than one thin band. */
.rl-v2__method-facts {
  margin: var(--v2-gap-block) 0 0;
  padding-top: var(--v2-gap-block);
  border-top: 2px solid var(--v2-rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 2rem 3rem;
}
.rl-v2 .rl-v2__method-fact dt {
  font-size: var(--v2-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-ink);
  margin-bottom: 0.5rem;
}
.rl-v2 .rl-v2__method-fact dd {
  margin: 0;
  font-size: var(--v2-small);
  line-height: 1.65;
  color: var(--v2-ink-soft);
}
.rl-v2 .rl-v2__method-fact dd a {
  color: var(--v2-accent-text, #c0342a);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* Reference detail behind a disclosure: present and findable, out of the
   main reading path. Styled as a quiet control rather than a button, so
   it reads as "more if you want it" rather than a call to action. */
.rl-v2__method-ref {
  margin-top: 1.75rem;
  border-top: 1px solid var(--v2-rule);
  padding-top: 1.1rem;
}
.rl-v2 .rl-v2__method-ref summary {
  cursor: pointer;
  font-size: var(--v2-small);
  font-weight: 600;
  color: var(--v2-accent-text, #c0342a);
  list-style: none;
}
.rl-v2 .rl-v2__method-ref summary::-webkit-details-marker { display: none; }
.rl-v2 .rl-v2__method-ref summary::after {
  content: " +";
  font-weight: 400;
}
.rl-v2 .rl-v2__method-ref[open] summary::after { content: " −"; }
.rl-v2 .rl-v2__method-ref summary:focus-visible {
  outline: 2px solid var(--v2-ink);
  outline-offset: 3px;
}
.rl-v2 .rl-v2__method-ref-body {
  margin-top: 1rem;
  font-size: var(--v2-small);
  line-height: 1.7;
  color: var(--v2-ink-soft);
  max-width: 52rem;
}

@media (max-width: 1000px) {
  .rl-v2__method-paths { grid-template-columns: 1fr; }
  .rl-v2__method-facts { grid-template-columns: 1fr; }
}

/* ── Footer entry link ──
   The free screening, set apart from the two tools above it rather than
   listed as a third. Same rule-above treatment as the login links, but
   brighter, because this one is an action a visitor should take rather
   than a utility link for someone who already has an account.

   Why it is not in the list: the screening answers "do we have a
   problem?" and deliberately withholds WHICH assets are highest risk
   (docs/FreeScreeningInfo.md s8-9), which is the question Scan exists to
   answer. Different output, not a smaller one. Listing it inline made it
   read as a third tool, which is part of what Rob reported confusing
   people on calls. */
.rl-footer__entry-link {
  margin-top: 14px;
  font-size: 0.82rem !important;
  font-weight: 600;
  color: rgba(255,255,255,0.92) !important;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 12px;
}
.rl-footer__entry-link:hover { color: #fff !important; }

/* ── Footer login links ── */
.rl-footer__login-link {
  margin-top: 8px;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.75) !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
.rl-footer__login-link + .rl-footer__login-link {
  border-top: none;
  margin-top: 2px;
  padding-top: 0;
}
.rl-footer__login-link:hover {
  color: rgba(255,255,255,0.8) !important;
}
.rl-footer__login-arrow {
  color: var(--rl-coral);
}

/* ═══════════════════════════════════════════════
   WPFORMS — DOCUMENT REQUEST FORM
   ═══════════════════════════════════════════════ */

.rl-doc-request {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.rl-doc-request__intro {
  margin-bottom: 40px;
}
.rl-doc-request__intro h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--rl-navy);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.rl-doc-request__intro p {
  font-size: 1rem;
  color: var(--rl-text-secondary);
  line-height: 1.6;
  max-width: 560px;
}

/* ── Field labels ── */
.rl-doc-request .wpforms-field-label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--rl-navy) !important;
  margin-bottom: 6px !important;
}
.rl-doc-request .wpforms-field-sublabel {
  font-size: 0.72rem !important;
  color: var(--rl-text-secondary) !important;
}

/* ── Text inputs and textarea ── */
.rl-doc-request .wpforms-field input[type="text"],
.rl-doc-request .wpforms-field input[type="email"],
.rl-doc-request .wpforms-field textarea {
  border: 1.5px solid var(--app-border) !important;
  border-radius: var(--rl-radius-md) !important;
  padding: 11px 14px !important;
  font-size: 0.92rem !important;
  font-family: var(--rl-font) !important;
  color: var(--rl-navy) !important;
  background: var(--rl-off-white) !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
  width: 100% !important;
}
.rl-doc-request .wpforms-field input[type="text"]:focus,
.rl-doc-request .wpforms-field input[type="email"]:focus,
.rl-doc-request .wpforms-field textarea:focus {
  border-color: var(--rl-navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--rl-navy-08) !important;
}
.rl-doc-request .wpforms-field input.wpforms-error,
.rl-doc-request .wpforms-field textarea.wpforms-error {
  border-color: var(--rl-coral) !important;
}
.rl-doc-request .wpforms-error {
  color: var(--rl-coral) !important;
  font-size: 0.78rem !important;
  margin-top: 4px !important;
}

/* === Campaign-page polish ===========================================
   Used by /try-redlines-scan/ and /housing-sector/. New variants and
   tightened presentation across hero, problem-solution, capability
   cards, trust signals, delivers callout, and credibility line. */

/* Hero split-card: cap scan-card height so the partial doesn't
   overflow the hero. Tighter grid font sizes, gradient fade at the
   bottom so the cut-off rows read as "more data below". */
/* scan-card stays SQUARE (locked via aspect-ratio: 1/1 on .rl-svc-mock).
   Cap the card by limiting WIDTH only; height follows the 1:1 ratio.
   Right-aligned within the hero's visual column. */
.rl-hero__visual--card {
  max-width: 460px;
  width: 100%;
  justify-self: end;
  margin-left: auto;
}
.rl-hero__visual--card .rl-card {
  background: #fff;
  border-radius: var(--rl-radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

/* Hero campaign modifier: text + visual sit side-by-side. The base
   .rl-hero CSS hardcodes the homepage bg image; the inline style on
   the section overrides via background-image, so any campaign bg
   image works. Use a darker overlay so light text stays legible. */
.rl-hero--campaign {
  /* Campaign hero is content-driven height, not the fixed --rl-hero-height
     of the homepage hero. Lets the square scan-card sit at a usable size
     without overflowing. overflow:visible too so the card isn't clipped. */
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  background-color: var(--rl-navy);
  /* Removed background-blend-mode: multiply — it was killing the bg image.
     Now image shows naturally; legibility overlay sits in ::before below. */
}
/* Left-darkening overlay so white hero copy stays readable over varied
   photo backgrounds. Fades to transparent past the centre so the scan-card
   on the right is unaffected. */
.rl-hero--campaign::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(1, 0, 61, 0.75) 0%,
    rgba(1, 0, 61, 0.45) 35%,
    rgba(1, 0, 61, 0) 65%
  );
  pointer-events: none;
  z-index: 0;
}
.rl-hero--campaign > * { position: relative; z-index: 1; }
.rl-hero--campaign .rl-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
  padding-top: 110px;
  padding-bottom: 80px;
}
.rl-hero--campaign .rl-hero__content { max-width: none; }
@media (max-width: 900px) {
  .rl-hero--campaign .rl-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .rl-hero__visual--card { max-width: 100%; justify-self: stretch; }
  .rl-hero__visual--card .rl-card { max-height: 320px; }
}

/* Problem-solution icon-rows variant: one item = icon + heading +
   body. Replaces the bullet-list look with something punchier. */
/* Why-this-matters problem-solution section: extra breathing room above
   the section and between the centred subtitle and the bullet grid.
   Per Polly's feedback the default rl-section padding (48px) and 40px
   margin-top read as cluttered on housing-sector / try-redlines-scan. */
.rl-problem-sol--icon-rows {
  padding-top: var(--rl-space-20);
}
.rl-problem-sol--icon-rows .rl-section-header {
  margin-bottom: var(--rl-space-16);
}
.rl-problem-sol--icon-rows .rl-problem-sol__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  column-gap: 48px;
  row-gap: 0;
  margin-top: 0;
}
/* Flatten columns into the parent grid so corresponding rows on the left
   and right share a row track — guarantees row-pair alignment regardless
   of varying text lengths. */
.rl-problem-sol--icon-rows .rl-ps-col { display: contents; }
.rl-problem-sol--icon-rows .rl-ps-col--problem  > * { grid-column: 1; }
.rl-problem-sol--icon-rows .rl-ps-col--solution > * { grid-column: 2; }
.rl-problem-sol--icon-rows .rl-ps-col__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.rl-problem-sol--icon-rows .rl-ps-col--problem .rl-ps-col__label { color: var(--rl-coral); }
.rl-problem-sol--icon-rows .rl-ps-col--solution .rl-ps-col__label { color: #15803d; }
.rl-problem-sol--icon-rows .rl-ps-col__label-icon { font-size: 16px; }
.rl-problem-sol--icon-rows .rl-ps-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--app-border);
}
.rl-problem-sol--icon-rows .rl-ps-row:last-child { border-bottom: 1px solid var(--app-border); }
.rl-problem-sol--icon-rows .rl-ps-row__icon {
  width: 24px; height: 24px;
  border-radius: var(--rl-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}
.rl-problem-sol--icon-rows .rl-ps-row__icon--warn { background: rgba(236, 82, 82, 0.12); color: var(--rl-coral); }
.rl-problem-sol--icon-rows .rl-ps-row__icon--ok   { background: rgba(34, 197, 94, 0.14); color: #16a34a; }
.rl-problem-sol--icon-rows .rl-ps-row__heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 4px;
  line-height: 1.35;
}
.rl-problem-sol--icon-rows .rl-ps-row__text {
  font-size: 14px;
  color: var(--rl-text-secondary);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .rl-problem-sol--icon-rows .rl-problem-sol__grid { grid-template-columns: 1fr; }
  /* Items pinned to column 2 recreate an implicit second track even with a
     1fr template, so release the pins when collapsing to one column. */
  .rl-problem-sol--icon-rows .rl-ps-col--problem  > *,
  .rl-problem-sol--icon-rows .rl-ps-col--solution > * { grid-column: 1; }
  .rl-problem-sol--icon-rows .rl-ps-col--solution .rl-ps-col__label { margin-top: 32px; }
}

/* Benefits cards quoted variant: large quote mark, distinct from
   regular benefits-cards. Optional Powered-by tag. */
/* Push the row down so the quote marks have headroom above the cards. */
.rl-benefits--quoted .rl-benefits__grid {
  margin-top: 60px;
}
.rl-benefits--quoted .rl-benefits__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: var(--rl-radius-lg);
  padding: 48px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rl-benefits--quoted .rl-benefits__card-quote-mark {
  position: absolute;
  top: 8px; left: 22px;
  font-family: serif;
  font-size: 64px;
  line-height: 1;
  color: var(--rl-coral);
  font-weight: 700;
}
.rl-benefits--quoted .rl-benefits__heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rl-navy);
  line-height: 1.35;
  margin: 0;
  /* Reserve 2 lines so single-line headings don't push bodies up — bodies
     start at the same y across all cards even when some titles wrap. */
  min-height: 2.7em;
}
.rl-benefits--quoted .rl-benefits__body {
  font-size: 0.92rem;
  color: var(--rl-text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.rl-benefits--quoted .rl-benefits__tag {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-coral);
  padding: 4px 10px;
  border: 1px solid rgba(236, 82, 82, 0.35);
  border-radius: var(--rl-radius-full);
  background: rgba(236, 82, 82, 0.05);
}

/* Governed icon support: circular accent above the heading. */
.tool-governed__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--rl-radius-full);
  background: rgba(236, 82, 82, 0.10);
  color: var(--rl-coral);
  font-size: 22px;
  margin-bottom: 14px;
}

/* Delivers with-callout: 2-col, bullets left + callout right. */
.dec-delivers--with-callout .dec-delivers__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}
.dec-delivers--with-callout .dec-delivers__list--checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.dec-delivers--with-callout .dec-delivers__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.95rem;
  color: var(--rl-text-secondary);
  line-height: 1.6;
}
.dec-delivers--with-callout .dec-delivers__item::before { content: none; }
.dec-delivers--with-callout .dec-delivers__check {
  width: 22px; height: 22px;
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  border-radius: var(--rl-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}
.dec-delivers--with-callout .dec-delivers__callout {
  background: var(--rl-navy);
  color: #fff;
  border-radius: var(--rl-radius-lg);
  padding: 28px;
}
.dec-delivers--with-callout .dec-delivers__callout-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.dec-delivers--with-callout .dec-delivers__callout-body {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  margin: 0 0 16px;
}
.dec-delivers--with-callout .dec-delivers__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dec-delivers--with-callout .dec-delivers__badge {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--rl-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 900px) {
  .dec-delivers--with-callout .dec-delivers__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Credibility line: a single-line trust strip with logos beside the
   text. Replaces the empty cta-band hack. */
.rl-credibility-line { padding: 36px 0; background: var(--rl-off-white); }
.rl-credibility-line__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
}
.rl-credibility-line__lead {
  font-size: 0.9rem;
  color: var(--rl-text-secondary);
  margin: 0;
  max-width: 640px;
  line-height: 1.6;
}
.rl-credibility-line__lead strong { color: var(--rl-navy); }
/* ACCENT TEXT USES --rl-coral-text, NOT --rl-coral. At 0.9rem this is body
   text and needs 4.5:1; coral gives 3.56:1 on white and 3.39:1 on cream.
   #c0342a gives 5.58:1 and 5.31:1. Failing the Lighthouse accessibility
   gate on /free-screening/ and /expert/ until 3 October. */
/* UNDERLINED, AND THAT IS THE ACCESSIBILITY FIX RATHER THAN A STYLE CHOICE.
   Recolouring the link to --rl-coral-text cleared the contrast-against-
   background failure and immediately exposed a second one: Lighthouse's
   link-in-text-block audit. A link INSIDE a paragraph must be
   distinguishable from the text around it by something other than colour,
   or by 3:1 contrast against that text. #c0342a against the body grey
   #374151 is 1.85:1, so colour alone was never going to carry it.
   An underline is the distinguisher, and text-decoration: none here was
   the actual defect. Hover now thickens it rather than adding it. */
/* SPECIFICITY: `.svc-page a:not(.rl-btn)` is (0,2,1) and sets
   text-decoration: none, so a bare `.rl-credibility-line__lead a` at
   (0,1,1) lost on every service page and the underline silently did not
   appear. /expert/ passed the audit and /free-screening/ did not, purely
   because one is a .svc-page and the other is not. Doubling the class
   here takes it to (0,2,1) and wins on source order. This is the same
   trap recorded three times in the v2 block below. */
.rl-credibility-line__lead a,
.rl-credibility-line .rl-credibility-line__lead a {
  color: var(--rl-coral-text) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.rl-credibility-line__lead a strong { color: inherit; }
.rl-credibility-line .rl-credibility-line__lead a:hover { text-decoration-thickness: 2px; }
.rl-credibility-line__logos {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.rl-credibility-line__logos img {
  height: 40px;
  width: auto;
  opacity: 0.85;
}

/* === Contact-form pills ===========================================
   Clickable pill UI overlaid on a hidden WPForms checkbox field.
   The pills *are* the UI; the WPForms checkbox field is the data
   layer (driven by JS). Used on /contact/ and /request-documents/.
   ================================================================ */
/* THE .rl-v2 PREFIX IS LOAD-BEARING on every margin here, and this is the
   eighth time this trap has been hit in this stylesheet.

   /contact/ and /request-documents/ gained .rl-v2 on their wrappers in
   the October conversion. `.rl-v2 p { margin: 0 }` is (0,1,1); a bare
   .rl-pills__label is (0,1,0) and loses regardless of source order, so
   every margin below was being discarded and nobody noticed because the
   result still looked like a form.

   Measured on /contact/ before this fix: the heading, its sub-line, the
   chooser label, the chooser sub-line and the pills all computed
   margin-bottom 0 and ran into each other as five stacked lines. The
   heading also rendered at 40px rather than the 30px its own clamp caps
   it at, because .rl-v2 h2 took that too. */
.rl-v2 .rl-pills-block,
.rl-pills-block {
  margin: 0 0 32px;
}
.rl-v2 .rl-pills__label,
.rl-pills__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-navy);
  margin: 0 0 6px;
}
.rl-v2 .rl-pills__sub,
.rl-pills__sub {
  font-size: 13px;
  color: var(--rl-text-secondary);
  margin: 0 0 14px;
  line-height: 1.5;
}
.rl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rl-pill {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--app-border);
  border-radius: var(--rl-radius-full);
  background: white;
  font-family: var(--rl-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-navy);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.rl-pill:hover {
  border-color: var(--rl-navy);
}
.rl-pill.is-selected {
  background: var(--rl-coral);
  border-color: var(--rl-coral);
  color: white;
}
.rl-pill.is-selected:hover {
  border-color: var(--rl-coral);
}
/* JS adds this to the underlying WPForms checkbox field so it stays in
   the form (still submits) but is removed from view. */
.rl-pills-source--hidden {
  display: none !important;
}

/* ── Checkboxes ── */
.rl-doc-request .wpforms-field-checkbox ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rl-doc-request .wpforms-field-checkbox ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--app-border);
  border-radius: var(--rl-radius-md);
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rl-doc-request .wpforms-field-checkbox ul li:hover {
  border-color: var(--rl-navy);
  background: var(--rl-off-white);
}
.rl-doc-request .wpforms-field-checkbox ul li input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--rl-coral) !important;
  flex-shrink: 0;
  cursor: pointer;
}
.rl-doc-request .wpforms-field-checkbox .wpforms-field-label-inline {
  font-size: 0.88rem !important;
  color: var(--rl-navy) !important;
  font-weight: 500 !important;
  cursor: pointer;
  line-height: 1.4;
}

/* ── Submit button ── */
.rl-doc-request .wpforms-submit-container {
  margin-top: 28px !important;
}
.rl-doc-request .wpforms-submit {
  background: var(--rl-coral) !important;
  color: var(--rl-navy) !important;
  font-family: var(--rl-font) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  border: none !important;
  border-radius: var(--rl-radius-full) !important;
  padding: 14px 36px !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
}
.rl-doc-request .wpforms-submit:hover { opacity: 0.88 !important; }

/* ── Confirmation message ── */
.rl-doc-request .wpforms-confirmation-container-full {
  background: var(--rl-off-white) !important;
  border: 1.5px solid var(--app-border) !important;
  border-left: 4px solid var(--rl-coral) !important;
  border-radius: var(--rl-radius-md) !important;
  padding: 20px 24px !important;
  font-size: 0.95rem !important;
  color: var(--rl-navy) !important;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE / TABLET FIXES
   ═══════════════════════════════════════════════ */

/* ── Hero padding: 130px top is too tall on mobile ── */
@media (max-width: 640px) {
  .svc-ov__hero-inner,
  .svc-hero__inner,
  .rl-hero__inner,
  .cs-detail-hero__inner {
    padding-top: 70px;
    padding-bottom: 40px;
  }
}
/* Item 48 (F17): the case-study hero kept its 560px minimum on phones,
   leaving 150-190px of empty image under the lead. Content-driven below
   900px, like every other hero. */
@media (max-width: 900px) {
  .cs-detail-hero { min-height: 0; }
}

/* ── Contact form: stack form + contact info vertically ── */
/* Item 52 of docs/SITE-TODO-2026-09-09.md (F21). Two things: the form
   grid kept its 320px aside down to 641px, leaving the form ~340px wide on
   tablets and WPForms' half-width email and phone fields at 145-155px with
   the placeholder cut off; and the Contact and Request Documents heroes
   were a fixed 560px of decoration with the form starting at y=722. The
   aside now stacks below 1024px, and on the two form pages the hero is as
   tall as its text. */
@media (max-width: 1024px) {
  .contact-form-section__inner,
  .screening-scope .contact-form-section__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .contact-form-section__inner {
    gap: 24px;
  }
  .contact-form-wrap {
    padding: 24px 16px;
  }
}
.contact-page .svc-ov__hero { height: auto; min-height: 0; }
.contact-page .svc-ov__hero-inner { padding-top: 72px; padding-bottom: 56px; }
/* The shared h1 reserves two lines; on these one-line headings that left a
   band of empty space above the lead. */
.contact-page .svc-ov__h1 { height: auto; }

/* ── CS index grid: 2-col at tablet, 1-col at mobile ──
   Overrides the existing max-width:768px → 1fr rule    */
@media (max-width: 900px) {
  .cs-idx-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 580px) {
  .cs-idx-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Homepage decisions grid: 1-col on small mobile ── */
@media (max-width: 480px) {
  .rl-hp-decisions__grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   COOKIEYES BANNER — brand overrides
   (plugin uses inline styles, !important required)
═══════════════════════════════════════════════════ */
.cky-consent-container {
  font-family: var(--rl-font) !important;
}
.cky-consent-bar {
  border-color: var(--rl-navy-10) !important;
  box-shadow: 0 4px 24px var(--rl-navy-10) !important;
}
.cky-title {
  color: var(--rl-navy) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}
.cky-notice-des,
.cky-notice-des p {
  color: var(--rl-text-secondary) !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}
/* Accept All — coral primary */
.cky-btn-accept {
  background-color: var(--rl-coral) !important;
  border-color: var(--rl-coral) !important;
  color: #fff !important;
  font-family: var(--rl-font) !important;
  font-weight: 600 !important;
  border-radius: var(--rl-radius-full) !important;
}
.cky-btn-accept:hover {
  background-color: var(--rl-coral-light) !important;
  border-color: var(--rl-coral-light) !important;
}
/* Reject All + Customise — navy outline */
.cky-btn-reject,
.cky-btn-customize {
  background-color: transparent !important;
  border-color: var(--rl-navy) !important;
  color: var(--rl-navy) !important;
  font-family: var(--rl-font) !important;
  font-weight: 500 !important;
  border-radius: var(--rl-radius-full) !important;
}
.cky-btn-reject:hover,
.cky-btn-customize:hover {
  background-color: rgba(var(--brand-primary-rgb), 0.05) !important;
}

/* ==================================================================
   POLICY PAGES (privacy-policy, cookie-policy) -- a legal document.

   REBUILT 15 October. The v2 review: "replace the older inset frame,
   conference banner and typography with a quiet legal-document layout
   and clear section hierarchy. A photograph is unnecessary. Preserve
   policy substance and legal details; this is a template refinement."

   WHY IT IS ONLY CSS. These two pages are classic WordPress content held
   in the database, not PHP manifests. The wording is legal text and the
   markup is not ours to restructure, so everything below works on the
   classes the existing content already carries: .rl-policy-page wraps
   it, .rl-policy__content holds the body, .rl-policy__table the cookie
   tables. No content change, no new claim, nothing about the policy
   itself moves.

   THE PHOTOGRAPH GOES. The hero was .svc-ov__hero painted with
   InsightsHero.webp, which is the conference photograph from the
   Insights section: an audience watching a presentation, behind the
   words "Privacy Policy". It said nothing about the policy, it borrowed
   another section identity, and the design brief does not decorate pages
   with stock photography. A legal document opens with its title.

   WHAT REPLACES IT is a masthead on paper: eyebrow, title, one line of
   summary, and the revision date promoted up beside them, because when a
   policy last changed is the first thing a reader checks and it was set
   as a grey afterthought below the fold of the frame.

   THE INSET FRAME GOES TOO. The content sat in a white card floating on
   grey, which is a marketing device: it says "look at this panel". A
   policy is the page.

   HIERARCHY. h2 was --rl-fs-h3 at the same colour as everything else and
   h3 was 1rem, which is body size, so a reader skimming for "Your
   rights" had nothing to skim. They now separate by size, weight and the
   rule above each h2, and the h2 rule is what makes the sections visible
   as sections.

   MEASURE. --v2-measure is ~66 characters. The old column was 760px,
   which at 16px runs past 90 characters a line and is tiring over a page
   of continuous prose. Legal text is read, not scanned, so it gets the
   reading measure the rest of the site uses.
   ================================================================== */
/* THE INSET FRAME IS GeneratePress .inside-article, and removing it means
   removing all four of its properties, not just its side padding.

   It is a white card, 40px of vertical padding, sitting on the grey site
   background, ABOVE .rl-policy-page in the tree. So painting the policy
   wrapper with paper left two white bands, one above the masthead and
   one below the last clause, with a visible edge down each side: the
   frame the review asked to remove, just thinner.

   Measured before this change: body #f7f8f9, .inside-article #ffffff at
   1200px wide starting at x=196, .rl-policy-page paper inside it.

   The side-padding half of this rule predates the rebuild: GP pads by
   30px on phones and .rl-section-inner adds 24px, which left a 267px
   text column at 375. That reasoning still holds and is kept. */
.page .inside-article:has(.rl-policy-page) {
  padding: 0;
  background: var(--v2-paper);
  border: 0;
  box-shadow: none;
}
/* The grey ground behind the frame goes with it, so the document runs to
   the edge of the window rather than ending in a band of another colour.
   Scoped by .rl-policy-body, which functions.php adds when the page
   content carries the .rl-policy-page wrapper: .rl-policy-page itself is
   far too deep in the tree to paint what is behind it. */
body.rl-policy-body { background: var(--v2-paper); }


.rl-policy-page {
  background: var(--v2-paper);
  font-family: var(--v2-font-body);
  color: var(--v2-ink);
  -webkit-font-smoothing: antialiased;
}

/* THE MASTHEAD. The content still emits section.svc-ov__hero with an
   inline --color-hero-bg-image and a .svc-ov__hero-bg layer inside it.
   Neither is ours to delete, so both are neutralised here: the section
   loses the dark ground and the backdrop element is removed from the
   flow. That is why the photograph is addressed in two rules rather than
   one. */
.rl-policy-page .svc-ov__hero {
  height: auto;
  min-height: 0;
  background: none;
  background-image: none;
  border-bottom: 1px solid var(--v2-rule);
}
.rl-policy-page .svc-ov__hero-bg { display: none; }
.rl-policy-page .svc-ov__hero-inner {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  max-width: calc(var(--v2-measure) + 48px);
  margin-inline: auto;
}
/* The eyebrow was .rl-eyebrow--light, written for white text on a dark
   photograph. On paper it needs the ink treatment. */
.rl-policy-page .rl-eyebrow,
.rl-policy-page .rl-eyebrow--light {
  color: var(--v2-ink-quiet);
  font-size: var(--v2-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rl-policy-page .svc-ov__h1 {
  height: auto;
  font-family: var(--v2-font-display);
  font-size: var(--v2-h2);
  font-weight: var(--v2-w-display);
  line-height: 1.15;
  color: var(--v2-ink);
  margin: 0.5rem 0 0;
}
.rl-policy-page .svc-ov__lead {
  font-size: var(--v2-lead);
  line-height: 1.5;
  color: var(--v2-ink-soft);
  margin: 0.85rem 0 0;
  max-width: none;
}

.rl-policy {
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--v2-gap-section);
  background: var(--v2-paper);
}
/* THE SAME COLUMN AS THE MASTHEAD. The masthead inherits 24px of inner
   padding from .rl-section-inner and the body column did not, so the
   title started at x=548 and the first clause at x=524: a 24px step that
   reads as a mistake because it is too small to look deliberate.
   Measured, not guessed. Both now resolve to one column. */
.rl-policy__content {
  max-width: calc(var(--v2-measure) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}
/* WHEN IT LAST CHANGED, promoted. It is the first question a reader of a
   policy asks and it was a grey line of small print. On its own rule, so
   it reads as a property of the document rather than a stray line. */
.rl-policy__updated {
  color: var(--v2-ink-quiet);
  font-size: var(--v2-small);
  letter-spacing: 0.02em;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--v2-rule);
}
/* THE RULE ABOVE EACH h2 is what makes the sections readable as sections.
   Without it the only signal is a slightly larger line of the same navy,
   and a reader skimming for one clause has to read to find it. */
.rl-policy__content h2 {
  font-family: var(--v2-font-display);
  font-size: var(--v2-h3);
  font-weight: var(--v2-w-medium);
  line-height: 1.3;
  color: var(--v2-ink);
  margin: clamp(2.5rem, 4.5vw, 3.5rem) 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--v2-rule);
}
.rl-policy__content > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.rl-policy__content h3 {
  font-family: var(--v2-font-body);
  font-size: var(--v2-body);
  font-weight: 600;
  color: var(--v2-ink);
  margin: 1.75rem 0 0.5rem;
}
.rl-policy__content p,
.rl-policy__content li {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.rl-policy__content ul {
  padding-left: 1.15rem;
  margin: 0 0 1.25rem;
}
.rl-policy__content li { margin-bottom: 0.6rem; }
.rl-policy__content strong { color: var(--v2-ink); font-weight: 600; }
/* UNDERLINED, not coloured alone. Colour by itself does not distinguish
   an inline link, which cost the accessibility score once already on the
   service pages: see the link-in-text-block note in CLAUDE.md. */
.rl-policy__content a {
  color: var(--v2-accent-text, #c0342a);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.rl-policy__content a:hover { color: var(--v2-ink); }

/* -- The cookie tables --
   The review: "tables already scroll within their mobile containers
   without overflowing the whole page. Improve the scroll affordance and
   long-name wrapping." Both are addressed below. */
.rl-policy__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 2rem;
  font-size: var(--v2-small);
}
.rl-policy__table th {
  background: none;
  color: var(--v2-ink);
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  font-weight: 600;
  font-size: var(--v2-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--v2-ink-faint);
  white-space: nowrap;
}
.rl-policy__table td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--v2-rule);
  color: var(--v2-ink-soft);
  vertical-align: top;
}
.rl-policy__table tr:nth-child(even) td { background: none; }
/* HORIZONTAL RULES ONLY. The classic-editor table markup carries cell
   borders on all four sides, which draws a grid; a legal reference table
   reads better as rows. The zebra striping goes for the same reason: two
   devices doing one job. */
.rl-policy__table th,
.rl-policy__table td {
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
/* THE COOKIE NAME COLUMN. Identifiers are code, so they are set in the
   mono face and given the ink weight: they are the thing a reader is
   looking up, and "__hs_opt_out" in body type beside prose is easy to
   misread as a word.

   BREAKING IS A NARROW-SCREEN FALLBACK, not a default. The first version
   put overflow-wrap:anywhere here unconditionally, and at 1440 it split
   "hubspotutk" across two lines in a column with room to spare: the rule
   fires on available width, and the column is only as wide as the layout
   gives it. Desktop keeps the identifiers whole; the break is applied in
   the narrow block below, where the alternative is a table wider than
   the phone. */
.rl-policy__table td:first-child {
  color: var(--v2-ink);
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  white-space: nowrap;
}
/* THE SCROLL AFFORDANCE. A table that scrolls inside its own box gives a
   reader no sign that it does: the content simply ends at the edge. The
   fading edge appears only while there is more in that direction, using
   a background-attachment:local and scroll pair that resolves itself as
   the box scrolls, so it needs no script and cannot get out of step. */
@media (max-width: 760px) {
  /* Now the identifiers may break: a 30-character cookie name sets the
     column minimum and pushes the whole table past the viewport before
     any of the prose has a say. */
  .rl-policy__table td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .rl-policy__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--v2-paper), rgba(253, 252, 250, 0)) left center / 2.5rem 100% no-repeat local,
      linear-gradient(to left,  var(--v2-paper), rgba(253, 252, 250, 0)) right center / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(1, 0, 61, 0.14), rgba(1, 0, 61, 0)) left center / 1rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(1, 0, 61, 0.14), rgba(1, 0, 61, 0)) right center / 1rem 100% no-repeat scroll;
  }
}

/* ── Focus states — consistent visible ring ── */
:focus-visible {
  outline: 2px solid var(--rl-coral);
  outline-offset: 3px;
  border-radius: 2px;
}
.rl-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rl-coral);
}
.main-navigation a:focus-visible {
  outline: 2px solid var(--rl-coral);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── 404 page ── */
.error404 .site-content .grid-container {
  max-width: 100%;
  padding: 0;
}
.rl-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 100px var(--rl-space-6);
  background: var(--rl-off-white);
}
.rl-404__code {
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 800;
  color: var(--rl-navy);
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.12;
  display: block;
  margin-bottom: -0.5em;
}
.rl-404__heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 var(--rl-space-4);
}
.rl-404__body {
  font-size: 1rem;
  color: var(--rl-text-secondary);
  max-width: 440px;
  margin: 0 auto var(--rl-space-8);
  line-height: 1.65;
}
.rl-404__links {
  display: flex;
  gap: var(--rl-space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Responsive hero images — CSS custom property approach.
   Hero elements set --color-hero-bg-image-tablet / -mobile
   via inline style slots. Falls back to desktop image when unset.
   ============================================================ */

/* --- Tablet (768px–1279px) --- */
@media (min-width: 768px) and (max-width: 1279px) {
  .svc-ov__hero-bg  { background-image: var(--color-hero-bg-image-tablet, var(--color-hero-bg-image)); }
  .svc-hero__bg     { background-image: var(--color-hero-bg-image-tablet, var(--color-hero-bg-image)); }
  .cs-detail-hero__bg { background-image: url('/wp-content/uploads/2026/05/CaseStudiesHero-tablet.webp'); }
  body.blog .svc-ov__hero-bg { background-image: url('/wp-content/uploads/2026/05/InsightsHero-tablet.webp'); }
}

/* --- Mobile (≤767px) --- */
@media (max-width: 767px) {
  .svc-ov__hero-bg  { background-image: var(--color-hero-bg-image-mobile, var(--color-hero-bg-image)); }
  .svc-hero__bg     { background-image: var(--color-hero-bg-image-mobile, var(--color-hero-bg-image)); }
  .cs-detail-hero__bg { background-image: url('/wp-content/uploads/2026/05/CaseStudiesHero-mobile.webp'); }
  body.blog .svc-ov__hero-bg { background-image: url('/wp-content/uploads/2026/05/InsightsHero-mobile.webp'); }
}

/* ============================================================
   Case study detail — mobile fixes
   The .cs-challenge__cols base rule at line ~3296 comes after
   the old @media (max-width: 768px) block, so those rules were
   always overridden. These rules are placed after the base rule
   so source order is correct.
   ============================================================ */
@media (max-width: 767px) {
  /* Stack: challenge text first, stat card below — full width, centred */
  .cs-challenge__cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cs-challenge__stat {
    display: flex;
    justify-content: center;
  }
  .cs-stat-card {
    min-width: 0;
    width: 100%;
    max-width: 340px;
    padding: 36px 28px;
  }

  /* Reduce hero H1 weight on mobile — less vertical mass */
  .cs-detail-hero__h1 {
    font-size: 1.75rem;
  }
}


/* === CAMPAIGN LANDING PAGE ELEMENTS === */

/* ── Bullet list (shared utility) ──────────────────────────── */
.rl-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rl-bullet-list__item {
  padding-left: 22px;
  position: relative;
  font-size: 0.9375rem;
  color: var(--color-grey-700);
  line-height: 1.55;
}
.rl-bullet-list__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rl-navy-40);
}
.rl-bullet-list--positive .rl-bullet-list__item::before {
  background: var(--rl-coral);
}
.rl-bullet-list--compact { gap: 8px; }
.rl-bullet-list--compact .rl-bullet-list__item { font-size: 0.875rem; }

/* ── Problem / Solution columns ─────────────────────────────── */
.rl-problem-sol { background: var(--color-bg); }
.rl-problem-sol__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
}
.rl-problem-sol__col--solution {
  border-left: 3px solid var(--rl-coral);
  padding-left: 32px;
}
.rl-problem-sol__heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .rl-problem-sol__grid { grid-template-columns: 1fr; gap: 32px; }
  .rl-problem-sol__col--solution { border-left: none; padding-left: 0; border-top: 3px solid var(--rl-coral); padding-top: 24px; }
}

/* ── Quote ──────────────────────────────────────────────────── */
.rl-quote { background: var(--rl-navy); }
.rl-quote__block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.rl-quote__text {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--rl-white);
  line-height: 1.65;
  margin-bottom: 28px;
  font-style: italic;
}
.rl-quote__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rl-quote__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-white);
}
.rl-quote__org {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Why Us ─────────────────────────────────────────────────── */
.rl-why-us { background: var(--color-surface); }
.rl-why-us__list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 56px;
}
.rl-why-us__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rl-why-us__icon {
  font-size: 20px;
  color: var(--rl-coral);
  flex-shrink: 0;
  margin-top: 1px;
}
.rl-why-us__text {
  font-size: 0.9375rem;
  color: var(--color-grey-700);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .rl-why-us__list { grid-template-columns: 1fr; }
}

/* ── Action Cards ───────────────────────────────────────────── */
.rl-action-cards { background: var(--color-bg); }
.rl-action-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.rl-action-card {
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--card-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rl-action-card__heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--rl-navy);
}
.rl-action-card__body {
  font-size: 0.9375rem;
  color: var(--color-grey-600);
  line-height: 1.55;
}
.rl-action-card .rl-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) {
  .rl-action-cards__grid { grid-template-columns: 1fr; }
}

/* ── Benefits Cards ─────────────────────────────────────────── */
.rl-benefits { background: var(--rl-navy-tint); }
.rl-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.rl-benefits__card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  padding: 28px;
  box-shadow: var(--shadow-1);
}
.rl-benefits__heading {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin-bottom: 12px;
}
.rl-benefits__body {
  font-size: 0.9375rem;
  color: var(--color-grey-600);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .rl-benefits__grid { grid-template-columns: 1fr; }
}

/* === SCREENING SCOPE: prose + steps (screening + partner pages) === */

/* Prose statement block: centred column under a centred heading */
.rl-prose {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.rl-prose p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-grey-600, #4b5563);
  margin: 0 0 1rem;
}
.rl-prose p:last-child { margin-bottom: 0; }

/* "How it works" numbered steps */
.rl-steps {
  list-style: none;
  counter-reset: rl-step;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 12px;
}
.rl-steps__item {
  counter-increment: rl-step;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78px;
  padding: 18px 24px 18px 74px;
  background: #fff;
  border-radius: var(--rl-radius-lg, 12px);
  border: 1px solid rgba(11, 31, 58, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.rl-steps__item::before {
  content: counter(rl-step);
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rl-navy, #0b1f3a);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-steps__body {
  color: var(--rl-text-body);
  line-height: 1.55;
  font-size: 1rem;
}
/* Timing note: contained panel so it reads as part of the process block */
.rl-steps__note {
  margin: 24px auto 0;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, 0.08);
  border-radius: var(--rl-radius-lg, 12px);
  font-size: 0.875rem;
  color: var(--color-grey-600, #4b5563);
  line-height: 1.6;
}

/* The hero CTA text is longer than other tool pages: wrap instead of
   clipping past the viewport on narrow screens (.rl-btn is nowrap). */
@media (max-width: 600px) {
  .screening-scope .svc-hero__ctas .rl-btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
  }
}

/* Hero credibility line: small muted line under the lead (hero/tool-card) */
.svc-hero__lead-note {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 22px;
}
/* ON THE SCREENING HERO the note is one line of practical facts sitting
   directly above the CTAs, not a paragraph. Rule 20 fixes this hero at
   560px with the CTA row at 514px, and the note's default 45px block plus
   22px margin took it to 531px. A single line at a tighter leading, with
   the margin halved, pays for itself out of the lead's bottom spacing.
   Measured back to 514px. */
.screening-scope .svc-hero__lead-note {
  line-height: 1.45;
  margin-bottom: 10px;
  max-width: 520px;
}

/* Partner hero chips: "Introduced by [logo] / Prepared by [logo]"
   (hero/tool-card). Two separate label+chip groups so the partner and
   RedLines identities never merge into one lockup. */
.rl-hero__through {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 12px;
}
.rl-hero__through-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rl-hero__through-label {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.rl-hero__through-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}
/* Higher specificity than `.svc-page img` (which forces height:auto). */
.rl-hero__through .rl-hero__through-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* Invisible logo box: every partner logo (wide, square or tall) gets an
   identical fixed footprint but NO visible chrome — no background, no
   padding. The transparent, tight-cropped master file maximises inside it
   (object-fit contain), so any logo shape fills the box with no plate or
   dead space. Never size partner logos by image dimensions. */
.rl-logo-box {
  width: 200px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rl-radius-lg);
}
.rl-logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Form-panel co-brand variant: enough height that square and portrait
   logos read at full size while wide wordmarks stay width-constrained. */
.rl-logo-box--sm { width: 160px; height: 110px; }
/* Fill variant: the artwork visually fills the whole rounded box.
   The box background is the EXACT colour baked into the RedLines lockup
   (#01003d) and the image is contained, so the box can be any size
   without cropping the artwork; the box radius clips the corners. */
.rl-logo-box--fill {
  padding: 0;
  overflow: hidden;
  background: #01003d;
}
.rl-logo-box--fill img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* ══════════════════════════════════════════════════════════════════
   MORE CASES (v2/more-cases) — the onward links at the foot of a case.

   The v2 review on the full case pages: "present the closing
   related-case links as a scannable group rather than a long inline
   paragraph." It was one sentence with middots between four cases,
   inside the prose component. See the note in the element.

   ROWS, EACH ON A RULE. The client name leads and the scale follows it
   quietly, so scanning the column gives four clients and reading one row
   gives the reason to click it. The whole row is the link.

   TWO COLUMNS ABOVE 760px, because four rows at full width leaves a lot
   of empty line and makes the group taller than the decision deserves.
   ══════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__more { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); }
.rl-v2__more-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  /* TWO, explicitly. auto-fit with a 17rem minimum gave four columns in
     the 1248px wrap, which put each client in a 288px cell and wrapped
     "Global audit and advisory firm" onto two lines beside three
     single-line neighbours. The count here is known (always four cases
     minus the one you are on, so three or four) and two columns is the
     shape that reads as a short list rather than a row of headings. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3.5rem;
}
@media (max-width: 760px) {
  .rl-v2__more-list { grid-template-columns: minmax(0, 1fr); }
}
.rl-v2 .rl-v2__more-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--v2-rule);
  text-decoration: none;
  color: var(--v2-ink);
}
/* The last row in each column closes the group. :last-child alone would
   only close the final one, which on a two-column grid leaves one column
   open at the bottom. */
.rl-v2__more-list > li:nth-last-child(-n+2) .rl-v2__more-item {
  border-bottom: 1px solid var(--v2-rule);
}
@media (max-width: 760px) {
  .rl-v2__more-list > li:nth-last-child(-n+2) .rl-v2__more-item { border-bottom: 0; }
  .rl-v2__more-list > li:last-child .rl-v2__more-item {
    border-bottom: 1px solid var(--v2-rule);
  }
}
.rl-v2 .rl-v2__more-client {
  font-size: var(--v2-body);
  font-weight: var(--v2-w-medium);
}
.rl-v2 .rl-v2__more-scale {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  text-align: right;
  flex-shrink: 0;
}
.rl-v2 .rl-v2__more-item:hover .rl-v2__more-client { color: var(--v2-accent-text); }

/* ══════════════════════════════════════════════════════════════════
   PARTNER FIT (partner-fit/default) — the one co-branding moment.

   REWORKED 15 October. The v2 review on the eight partner landing pages:
   "the introduction's centred red label, rounded box and red left border
   feel older than v2. Use a simpler editorial treatment and improve
   partner recognition near the opening. Balance logo size optically
   rather than imposing a universal width."

   THE BOX GOES. It was a white card with a 1px navy border and a 4px
   coral left border, on a page whose every other section is flat. A
   bordered panel reads as an advertisement, which is precisely wrong
   here: this is where the partner explains in their own words why they
   are offering the screening, and it should read as editorial text.

   THE CENTRED HEADING GOES with it. Centred label over centred heading
   over left-set body is three alignments in 200px.

   THE LOGO IS SIZED BY SHAPE. The old box was a fixed 180x150, so a
   mark's rendered area fell out of its aspect ratio and nothing else:
   ESG Pro's square mark came out at 22,500 sq px against RZB Advisory's
   6,120, a factor of 3.7. The review saw this from both ends, "the
   square logo outweighs the wide wordmarks" and "the wide wordmark
   appears too small". The three bands below equalise area to roughly
   9,000 sq px, which brings the spread to about 1.3x. The band itself is
   decided in rl_partner_page(), where the dimensions are known; the
   arithmetic for all eight is recorded there.

   These pages carry .screening-scope, so the v2 tokens resolve here.
   ══════════════════════════════════════════════════════════════════ */
.rl-partner-fit {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.rl-partner-fit__inner {
  max-width: 54rem;
  margin-inline: auto;
}
.rl-partner-fit__head { margin-bottom: 1.75rem; }
.rl-partner-fit .rl-eyebrow {
  display: block;
  color: var(--v2-ink-quiet, #55637a);
  font-size: var(--v2-micro, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}
.rl-partner-fit .rl-h2 {
  text-align: left;
  font-size: var(--v2-h3, 1.25rem);
  font-weight: var(--v2-w-medium, 500);
  line-height: 1.3;
  color: var(--v2-ink, #01003d);
  margin: 0.5rem 0 0;
}
/* THE BAND. A hair rule rather than a box: it groups the mark with the
   words without drawing a container around them. */
.rl-partner-fit__band {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: 1.5rem;
  border-top: 1px solid var(--v2-rule, rgba(1, 0, 61, 0.1));
}
.rl-partner-fit__mark {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.rl-partner-fit__logo { display: block; }
.rl-partner-fit__logo img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* THE THREE BANDS. Caps are max-width and max-height together, so a mark
   fits whichever dimension binds first and the resulting areas land
   within about 1.3x of each other instead of 3.7x.

   wide      ratio >= 2.6   AdaptationUK, RZB Advisory, Consultus, JRP
   balanced  1.25 to 2.6    Know Carbon, Sikia Resources
   compact   ratio <= 1.25  ESG Pro, SustainAbility on Call  */
.rl-partner-fit__mark--wide img     { max-width: 200px; max-height: 60px; }
.rl-partner-fit__mark--balanced img { max-width: 136px; max-height: 80px; }
.rl-partner-fit__mark--compact img  { max-width: 100px; max-height: 100px; }

/* THE PARTNER'S WORDS at the page's reading measure, at body size rather
   than the 0.95rem the card used: it is the partner speaking, not a
   caption. */
.rl-partner-fit__body p {
  margin: 0 0 1rem;
  font-size: var(--v2-body, 1rem);
  line-height: 1.7;
  color: var(--v2-ink-soft, #55637a);
}
.rl-partner-fit__body p:last-child { margin-bottom: 0; }
.rl-partner-fit__body a { font-weight: 600; }

/* THE MARK STAYS ABOVE THE WORDS when the band stacks: partner
   recognition is the whole point of this section, and the reader has
   usually arrived from the partner's own site. The rule moves to sit
   between them so the grouping still reads. */
@media (max-width: 700px) {
  .rl-partner-fit__band {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .rl-partner-fit__mark--wide img     { max-width: 180px; max-height: 54px; }
  .rl-partner-fit__mark--balanced img { max-width: 124px; max-height: 72px; }
  .rl-partner-fit__mark--compact img  { max-width: 92px;  max-height: 92px; }
}

/* Partner form: data-sharing line under the form */
.rl-partner-form__note {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  color: var(--rl-text-secondary);
  line-height: 1.6;
}

/* Screening form: single supporting panel beside the form (used by both
   the standard screening page and, with co-brand rows, partner pages). */
.rl-support-panel {
  background: #fff;
  border: 1px solid var(--rl-navy-08);
  border-radius: var(--rl-radius-lg);
  padding: 26px 28px;
  align-self: start;
}
.rl-support-panel__divider {
  height: 1px;
  background: var(--rl-navy-08);
  margin: 16px 0;
}
.rl-support-panel--partner .rl-support-panel__label { margin-bottom: 8px; }
.rl-support-panel__muted {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--rl-text-secondary);
  line-height: 1.6;
}
.rl-support-panel__contact--flush { border-top: none; padding-top: 0; }
/* Partner pages: the compact relationship panel sits above the form on
   mobile so attribution is visible before the fields. */
@media (max-width: 640px) {
  .partner-page .rl-support-panel { order: -1; }
}
.rl-support-panel__h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--rl-navy);
}
.rl-support-panel__steps {
  list-style: none;
  counter-reset: rl-support-step;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.rl-support-panel__steps li {
  counter-increment: rl-support-step;
  position: relative;
  padding-left: 34px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--rl-text-secondary);
}
.rl-support-panel__steps li::before {
  content: counter(rl-support-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(11, 31, 58, 0.08);
  color: var(--rl-navy);
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-support-panel__contact {
  padding-top: 16px;
  border-top: 1px solid var(--rl-navy-08);
}
.rl-support-panel__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-text-secondary);
}
.rl-support-panel__contact a {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  margin-bottom: 4px;
}

/* Shared form aside: explicit specificity beats the v2 heading reset. */
.rl-v2 .rl-support-panel__h3 { margin-bottom: 1.5rem; }
.rl-v2 .rl-support-panel__steps { margin: 0 0 1.5rem; gap: 1rem; }
.rl-v2 .rl-support-panel__muted { margin-top: 1rem; }
.rl-v2 .rl-support-panel__contact { margin-top: 1.5rem; }

/* ── Screening pages rhythm pass (scoped to .screening-scope: the free-screening page
   and all partner pages; no other page carries this wrapper class) ──
   Tighter vertical spacing (~15-20%), narrower Why-RedLines gutter,
   softer card shadows, rebalanced form grid. */
.screening-scope .rl-section {
  padding-top: var(--rl-space-10);
  padding-bottom: var(--rl-space-10);
}
.screening-scope .rl-section-header { margin-bottom: 28px; }
.screening-scope .rl-problem-sol--icon-rows { padding-top: var(--rl-space-10); }
.screening-scope .rl-problem-sol--icon-rows .rl-section-header { margin-bottom: 32px; }
.screening-scope .rl-problem-sol--icon-rows .rl-problem-sol__grid { column-gap: 32px; }
.screening-scope .tool-governed__card { box-shadow: 0 1px 10px var(--rl-navy-08); }
.screening-scope .contact-form-section { padding: var(--rl-space-16) 0; }
.screening-scope .contact-form-section__inner {
  grid-template-columns: 1fr 350px;
  gap: 32px;
}
@media (max-width: 1024px) {
  /* Re-assert the sitewide collapse over the scoped 2-col rule (item 52:
     the 350px aside left WPForms' half-width fields at ~154px on tablets). */
  .screening-scope .contact-form-section__inner { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   SCREENING HERO: ALIGNED TO v2 TYPOGRAPHY
   ═════════════════════════════════════════════════════════════════
   Rob, 4 October: the free screening hero and form "still use the older
   rounded-button treatment", the most obvious inconsistency between
   these pages. Measured against /scan/ at 1440px:

     eyebrow   16px w600 coral, sentence case   ->  12px w500 caps,
                                                    letterspaced, white 62%
     h1        40px w700                        ->  64px w500
     button    radius 9999px (a full pill)      ->  radius 4px

   WHY THIS IS SCOPED AND NOT A COMPONENT SWAP. hero/tool-card renders on
   /free-screening/ AND all eight partner pages, and the page wrapper
   cannot take .rl-v2: that class carries descendant selectors which reach
   into the legacy hero and push its CTA from 514px to 649px, failing rule
   20 across nine pages. Measured 3 October, recorded in the manifest.
   .screening-scope already exists for exactly this and covers the same
   nine pages.

   WHAT IS NOT CHANGED, DELIBERATELY: the h1 stays at its own size. The v2
   heroes reach 64px over three lines; this h1 is one line inside a hero
   fixed at 560px by rule 20, and growing it would push the CTA row off
   its mandated 514px. Weight is free, so the weight matches; size is
   geometry, so it does not.

   VALUES COME FROM THE v2 TOKENS, not copied numbers, so this follows
   the v2 scale if the scale moves. */
.screening-scope .svc-hero .rl-eyebrow--light {
  font-size: var(--v2-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
/* w700 against the v2 display weight. The display face carries the size;
   bold on top of it is the older treatment. */
.screening-scope .svc-hero__h1 { font-weight: var(--v2-w-display); }
/* THE PILL IS THE LOUDEST DIFFERENCE. --rl-radius-full is a true pill at
   9999px; v2 buttons are 4px. Both hero buttons, so the pair stays
   consistent with each other. */
.screening-scope .svc-hero .rl-btn { border-radius: 4px; font-weight: 500; }
/* The "text ›" chevron is a legacy convention across ten elements. The v2
   buttons carry no glyph, so it is hidden HERE rather than deleted from
   the shared element, which still renders on pages that have not
   converted. See the note in content/elements/hero/tool-card.html. */
.screening-scope .svc-hero .rl-btn__chev { display: none; }
/* THE SAMPLE LABEL READS AS A v2 FIGURE CAPTION. It was 11px uppercase
   tracked and right-aligned, a different convention from the v2 figures
   on /scan/ and /pro/, which caption in sentence case at --v2-small,
   left-aligned under the figure they qualify. Same information, same
   voice as the rest of the family.

   STILL ABSOLUTE, and that is load-bearing: this label sits outside the
   card because .rl-card has overflow:hidden and clipped it, and it is
   taken out of flow because as a flow child it added height and pushed
   the hero CTA from 514px to 532px, failing rule 20. Changing how it
   READS must not change that it is positioned. */
.screening-scope .svc-hero__card-sample {
  right: auto;
  left: 0;
  font-size: var(--v2-small);
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}
/* THE FORM'S HEADINGS, same reason as the hero h1. Rob flagged the hero
   "and form" together. The submit button was already square at w500
   (checked, 4 October: 4px radius, weight 500), so the only thing still
   speaking the older language here was bold headings against the v2
   display weight. Size is untouched; this is weight only. */
.screening-scope .contact-form-section h2,
.screening-scope .contact-form-section h3 { font-weight: var(--v2-w-display); }

/* ── THE HERO FIGURE ───────────────────────────────────────────────
   Rob, 4 October: "I really don't like the free screening hero image.
   It's square. The others are rectangles. It feels like we've missed the
   design brief here somehow."

   Measured: .rl-svc-screening is a hand-coded HTML mock at aspect-ratio
   1/1, rendering 340x340, while /scan/ and /pro/ show real 16:10 renders
   at 574x359. A different KIND of object, not a different style, which is
   why no amount of typography alignment was going to fix it.

   So the screening hero takes a render like the others, and the column it
   sits in widens from 340px to the 574px those heroes use. The 16:10 then
   gives 359px of height, which is SHORTER than the 340px square plus its
   caption, so this cannot push the CTA row: rule 20 holds, measured
   after. */
.screening-scope .svc-hero__inner--card:has(.svc-hero__card--figure) {
  grid-template-columns: minmax(0, 1fr) 574px;
}
/* THE FIGURE MUST NOT SET THE ROW HEIGHT, which is the whole of rule 20
   on this page. The grid is align-items:stretch, so the tallest cell
   defines the row and both columns take it; the text column then grows
   with the figure, and its CTA row (pinned by margin-top:auto) moves with
   the bottom. Measured: a 359px figure made the text column 359px against
   350px on a partner page, and the CTA went 514 -> 523px.

   So the figure's cell is taken out of the height calculation: the card
   is positioned absolutely within a zero-height anchor, centred on the
   text column it sits beside. Its height is then its own business
   entirely and the text column keeps the 350px the hero geometry gives
   it. Measured back to 514px, matching /scan/ and the partner pages. */
.screening-scope .svc-hero__inner--card:has(.svc-hero__card--figure) .svc-hero__card--figure {
  position: relative;
  align-self: center;
  height: 0;
}
.screening-scope .svc-hero__card--figure .svc-hero__figure {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
/* The caption rides with the absolutely positioned figure rather than the
   zero-height box, or it lands on the hero's vertical centre. */
.screening-scope .svc-hero__card--figure .svc-hero__card-sample {
  top: calc(50% + 180px);
}
.screening-scope .svc-hero__figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* The renders are white-ground application screenshots on a navy hero,
     so they need the same lift the v2 heroes give them. */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
}
/* Stack the screening hero below 900px. Match the desktop :has()
   specificity so its fixed 574px figure column cannot collapse the text
   column to zero. The figure and caption return to normal flow. */
@media (max-width: 900px) {
  .screening-scope .svc-hero__inner--card:has(.svc-hero__card--figure) {
    grid-template-columns: minmax(0, 1fr);
  }
  .screening-scope .svc-hero__inner--card:has(.svc-hero__card--figure) .svc-hero__card--figure {
    height: auto;
    max-width: 100%;
  }
  .screening-scope .svc-hero__card--figure .svc-hero__figure {
    position: static;
    transform: none;
  }
  .screening-scope .svc-hero__card--figure .svc-hero__card-sample {
    position: static;
  }
}
/* Fallback for browsers without :has(). The column stays 340px there and
   the figure simply fits it, still 16:10, still not a square. */
@supports not selector(:has(*)) {
  .screening-scope .svc-hero__card--figure { width: 340px; }
}

/* Homepage engagement progression: connect the four tool cards so they
   read as one journey (free screening -> screening -> quantification ->
   at scale) rather than four unrelated products. Coral step circles in
   the card gaps, echoing the numbered-step circles used site-wide.
   Scoped to the homepage. */
@media (min-width: 901px) {
  .rl-hp2 .rl-hp-tool-card,
  .rl-progression__step { position: relative; }
  /* Shared coral step-circle connector: homepage engagement cards AND the
     offer-progression strip on the tool/screening pages. One definition. */
  .rl-hp2 .rl-hp-tool-card:not(:last-child)::after,
  .rl-progression__step:not(:last-child)::after {
    content: '\203A';
    position: absolute;
    right: -27px;
    top: 42%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rl-coral);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.25);
    pointer-events: none;
    z-index: 2;
  }
  /* Item 30 of docs/SITE-TODO-2026-09-09.md (F02): Expert is for advisers
     and groups, not the next rung for every buyer. No connector into the
     aside card or step, on the homepage row and the progression strip. */
  .rl-hp2 .rl-hp-tool-card:has(+ .rl-hp-tool-card--aside)::after,
  .rl-progression__step:has(+ .rl-progression__step--aside)::after { display: none; }
  /* Progression strip: the 34px circle must sit fully INSIDE the 44px
     column gap (spans +5px..+39px past the card edge) so it can never be
     painted over by a hovered neighbour card (hover translateY creates a
     stacking context). Keep gap >= circle width + 10px if either changes. */
  .rl-progression__step:not(:last-child)::after { right: -39px; top: 50%; }
}

/* Offer progression strip (offer-progression element): the four-offer
   journey, current page highlighted. Used on the tool + screening pages.
   Same full-width four-column grid as the homepage engagement cards. */
.rl-progression__track {
  display: grid;
  /* auto-fit, not repeat(4): the buying ladder dropped to three rungs when
     Expert moved to the partner route (28 September 2026), and a hardcoded
     four left an empty fourth column. Counting the steps in CSS means the
     strip follows lib/screening.php instead of having to be kept in step
     with it by hand. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  /* 44px gap hosts the 34px connector circle with 5px clearance each side
     (see the circle rule in the min-width:901px block above). */
  gap: 44px;
}
.rl-progression__step {
  display: block;
  background: #fff;
  border: 1px solid var(--rl-navy-08);
  border-radius: var(--rl-radius-lg);
  padding: 18px 20px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rl-progression__step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 31, 58, 0.10);
  text-decoration: none;
}
.rl-progression__step--current {
  border-color: var(--rl-coral);
  border-left-width: 4px;
  background: #fff6f5;
}
.rl-progression__name {
  display: block;
  font-weight: 700;
  color: var(--rl-navy);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.rl-progression__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--rl-text-secondary);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .rl-progression__track { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .rl-progression__track { grid-auto-flow: row; grid-template-columns: 1fr; }
}

/* Output split (tool-output/split): platform screenshot rows reuse the
   rl-imgrows layout; a card_partial row gets a sized wrap. The governed
   reports subsection introduces the badge cards beneath the rows. */
.tool-output__mock-wrap .rl-svc-mock {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.tool-output__reports-head {
  text-align: center;
  max-width: 640px;
  margin: var(--rl-space-16) auto 0;
}
.tool-output__reports-h3 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0;
}
.tool-output__reports-sub {
  font-size: var(--rl-fs-base);
  color: var(--rl-text-body);
  line-height: 1.6;
  margin: var(--rl-space-3) 0 0;
}

/* Homepage Challenge statement: one framed panel, not loose text.
   White card + coral edge — the site's standard text-box treatment
   (matches the governance cards, checklist pills and partner panel). */
.rl-hp2 .rl-prose-section .rl-section-inner {
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-card);
  padding: 28px 40px;
}
.rl-hp2 .rl-prose-section .rl-section-header { margin-bottom: 10px; }

/* Screening product mock (screening-card partial): the free-screening
   member of the scan/pro/expert mock family. Square via .rl-svc-mock;
   sized in cqi like its siblings (design width 540px, 1px ~ 0.185cqi).
   Content mirrors the real Climate Risk Overview screenshot. */
.rl-svc-screening {
  display: flex;
  flex-direction: column;
}
.rl-svc-screening__hero {
  text-align: center;
  padding: 7.5cqi 4cqi 5cqi;
}
.rl-svc-screening__big {
  font-size: 21cqi;
  font-weight: 800;
  line-height: 1;
  color: var(--rl-navy);
}
.rl-svc-screening__label {
  font-size: 3.6cqi;
  font-weight: 700;
  color: var(--rl-navy);
  margin-top: 1.5cqi;
}
.rl-svc-screening__vh { color: var(--risk-4); }
.rl-svc-screening__ex { color: var(--risk-5); }
.rl-svc-screening__hero .rl-svc-mock__kpi-sub { margin-top: 1.4cqi; font-size: 3cqi; }
.rl-svc-screening__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqi;
  padding: 0 4cqi;
}
.rl-svc-screening__cell {
  background: var(--app-surface-alt);
  border-radius: 1.5cqi;
  padding: 4.5cqi 2cqi;
  text-align: center;
}
.rl-svc-screening__cell-val {
  font-size: 9.5cqi;
  font-weight: 800;
  line-height: 1.1;
}
.rl-svc-screening__cell-val--vh { color: var(--risk-4); }
.rl-svc-screening__cell-val--ex { color: var(--risk-5); }
.rl-svc-screening__cell .rl-mock__kpi-label { font-size: 2.6cqi; margin-top: 1cqi; }
.rl-svc-screening__trend {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 1.8cqi;
  padding: 3.2cqi 4cqi;
  border-top: 1px solid var(--app-border);
  font-size: 2.9cqi;
  color: var(--rl-text-secondary);
  line-height: 1.4;
}
.rl-svc-screening__trend strong { color: var(--risk-5); }
.rl-svc-screening__trend-icon {
  font-size: 3.4cqi !important;
  color: var(--risk-5);
}

/* Steps: bold step title above the step body (mobile). On desktop the
   heading runs inline with the body so each step is a one-line row —
   the inline rule lives in the media block below this one because a
   later same-specificity rule would override it. */
.rl-steps__heading {
  display: block;
  font-weight: 700;
  color: var(--rl-navy, #0b1f3a);
  margin-bottom: 2px;
}
@media (min-width: 901px) {
  .rl-steps__heading { display: inline; margin: 0 10px 0 0; }
}

/* Positive two-column variant (icon-rows-positive): neutral navy left
   column instead of the red problem styling. */
.rl-problem-sol--positive .rl-ps-col--problem .rl-ps-col__label { color: var(--rl-navy); }
.rl-ps-row__icon--info { background: rgba(11, 31, 58, 0.08); color: var(--rl-navy); }

/* Tool hero with product card (hero/tool-card): text left, compact
   product card right.

   HARD RULE: every svc-hero on the site is exactly var(--rl-hero-height)
   tall on desktop, and the CTA row sits at the same position on every
   page (pinned to the content-box bottom, matching the natural position
   on scan/pro/free-screening: hero 560px, CTA top ~514px at 1440w).
   Fit the content to the hero; never grow the hero to fit the content.
   Mobile (<=900px) is the only exception: the stacked card needs the
   hero to grow. */
.svc-hero--card { height: var(--rl-hero-height); }
.svc-hero__inner--card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: stretch;
  height: 100%;
}
.svc-hero__inner--card .svc-hero__text {
  display: flex;
  flex-direction: column;
}
/* Standard heroes overshoot their content box by exactly 2px (scan/pro:
   CTA bottom at box+2). The -2px mirrors that so pinned CTAs land at the
   identical sitewide position (top 514px at 1440w). */
.svc-hero__inner--card .svc-hero__ctas { margin-top: auto; margin-bottom: -2px; }
.svc-hero__inner--card .svc-hero__card { align-self: center; }
/* The standard hero content box is exactly full (eyebrow + 2-line h1 +
   4-line lead + CTAs = 350px). Card heroes add chips and can carry longer
   leads, so their internal margins are compressed to keep the stack
   inside the box; the auto-margin then pins the CTAs at the sitewide
   position. */
.svc-hero__inner--card .svc-hero__h1 { margin: 4px 0 8px; }
.svc-hero__inner--card .svc-hero__lead { margin-bottom: 10px; }
.svc-hero__card .rl-card {
  background: #fff;
  border-radius: var(--rl-radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}
@media (max-width: 900px) {
  .svc-hero--card { height: auto; min-height: var(--rl-hero-height); }
  .svc-hero__inner--card { grid-template-columns: 1fr; gap: 40px; height: auto; }
  .svc-hero__card { width: 100%; max-width: 340px; justify-self: center; }
}

/* Item 4 of docs/SITE-TODO-2026-09-09.md (Codex F12/F13/F19/F34). Below
   900px a 3-line h1 plus a 6-line lead no longer fits the fixed 560px
   hero: the flex auto-margin pushed the CTA row up over the last line of
   the lead (8-19px measured overlap on Portfolio, Supplier, For Partners)
   and the About h1's fixed 2.3em height clipped its last line(s). Mobile
   is the exception rule 20 sanctions, so every hero family grows from its
   content here and the desktop line reservations are released. Desktop
   geometry is untouched; npm run heroes still gates 1440. */
@media (max-width: 900px) {
  .svc-hero,
  .svc-ov__hero { height: auto; min-height: var(--rl-hero-height); }
  .svc-hero__h1 { min-height: 0; }
  .svc-hero__lead { min-height: 0; }
  .svc-ov__h1 { height: auto; overflow: visible; }
}

/* Discover image rows (what/image-rows): app screenshot left in a white
   card, what-it-is + why-it-matters right. Images render at natural
   aspect, capped at native size so small captures never upscale. */
.rl-imgrows {
  max-width: 1200px;
  margin: 16px auto 0;
  display: grid;
  gap: 36px;
}
.rl-imgrows__row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
}
/* Rows zigzag: odd rows image left / text right, even rows flipped. */
.rl-imgrows__row:nth-child(even) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.rl-imgrows__row:nth-child(even) .rl-imgrows__media { order: 2; }
.rl-imgrows__media {
  /* #f3f5f7 matches the background baked into the screening-*.webp
     screenshots so their edges blend in; no border or shadow by design. */
  background: #f3f5f7;
  border-radius: var(--rl-radius-lg);
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rl-imgrows__media img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Item 17 of docs/SITE-TODO-2026-09-09.md (Codex F32). The tool-output
   screenshots are 1640px UI renders; at phone width the whole interface
   shrinks to a thumbnail with 5px labels. Rows that set mobile_focus get a
   portrait crop on the region the caption is about (object-position set
   inline per row), so the figure stays legible. The "Sample data" tag
   labels the illustrative portfolios. */
.rl-imgrows__media { position: relative; }
.rl-imgrows__tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-navy-40, rgba(11, 31, 58, 0.4));
  background: rgba(255, 255, 255, 0.9);
  padding: 3px 8px;
  border-radius: var(--rl-radius-full);
  pointer-events: none;
}
@media (max-width: 640px) {
  .rl-imgrows__media img.rl-imgrows__img--focus {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: var(--rl-mf-pos, 50% 50%);
    border-radius: var(--rl-radius-md, 8px);
  }
}

/* Item 22 (Codex F29): on a phone the partner page's hero product card
   stacked between the "Introduced by" eyebrow and the partner's own logo
   panel, so a referred visitor met the product before the introducer. Hide
   the card below 900px on partner pages only; the same overview appears in
   the discover rows further down.

   THE HERO MUST SHRINK WITH IT, 15 October, and for seven months it did
   not. The v2 review: "at phone and tablet widths, partner hero figures
   are hidden and the fixed-height hero leaves a large gap before its
   actions. Correct that spacing deliberately."

   Measured on /partners/jrp/ before this change, lead bottom to CTA top:

       1440    60px   figure shown
       1024    10px   figure shown
        900   144px   figure hidden, hero still 560px
        768   144px
        600   239px   the worst case, and not the narrowest width
        480   152px
        375    87px

   The rule above removed the figure and nothing removed the 560px it had
   been occupying, so a quarter of the hero became empty navy between the
   sentence and the button a referred visitor is there to press. 600px is
   worst because the lead has stopped wrapping to many lines but the hero
   has not yet reached the 480px block that trims its padding.

   HARD RULE 20 IS INTACT. It fixes every .svc-hero at 560px with the CTA
   row at 514px on DESKTOP, and names "mobile (<=900px) stacking" as its
   one sanctioned exception. This is that exception, applied at the width
   where the geometry it protects has already stopped applying. npm run
   heroes measures at 1440 and is unaffected; it is run below to confirm
   that rather than assumed. */
@media (max-width: 900px) {
  .partner-page .svc-hero__card { display: none; }
  /* The height is set as an inline-free `height: 560px` on .svc-hero, so
     auto has to win on specificity, not on order alone. */
  .partner-page .svc-hero,
  .screening-scope.partner-page .svc-hero {
    height: auto;
    min-height: 0;
    padding-block: clamp(2.75rem, 7vw, 4rem);
  }
  /* THE INNER PADDING IS THE REST OF IT. .svc-hero__inner carries
     130px top and 80px bottom, sized for the desktop composition where
     the figure column fills the space they create. With the figure
     hidden they are 210px of empty navy that the height:auto above
     happily preserves: the first attempt here fixed the lead-to-CTA gap
     and left 141px of slack BELOW the buttons, which is the same fault
     moved rather than removed. Measured, not noticed by eye. */
  .partner-page .svc-hero__inner {
    height: auto;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 0;
  }
  .partner-page .svc-hero__ctas { margin-top: 2rem; }
}

/* Item 26 (Codex F10): one line of reassurance under the request-form
   intro. */
.contact-form__note {
  font-size: 0.85rem;
  color: var(--rl-navy-70, rgba(11, 31, 58, 0.7));
  margin: -6px 0 18px;
}
.contact-form__note a { color: inherit; text-decoration: underline; }
.rl-imgrows__h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--rl-navy);
  margin: 0 0 10px;
  line-height: 1.35;
}
.rl-imgrows__what {
  font-size: 0.95rem;
  color: var(--rl-text-secondary);
  line-height: 1.6;
  margin: 0 0 12px;
}
.rl-imgrows__why {
  font-size: 0.95rem;
  color: var(--rl-navy);
  line-height: 1.6;
  margin: 0;
}
.rl-imgrows__why strong { color: var(--rl-red-dark); }
.rl-imgrows__full {
  /* The commercial conclusion of the results section: full results width,
     more presence than a note, more space above than below. White card +
     coral edge — the site's standard text-box treatment. */
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 40px 44px;
  background: var(--rl-white);
  border: 1px solid var(--rl-navy-08);
  border-left: 4px solid var(--rl-coral);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-card);
}
.rl-imgrows__full .rl-imgrows__h3 { font-size: 1.375rem; }
.rl-imgrows__full .rl-imgrows__what { margin: 0; font-size: 1rem; color: var(--rl-navy); }
@media (max-width: 900px) {
  /* The even-row selector below media queries has higher specificity
     than a bare class, so the stacked collapse must name it too. */
  .rl-imgrows__row,
  .rl-imgrows__row:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
  .rl-imgrows__row:nth-child(even) .rl-imgrows__media { order: 0; }
  .rl-imgrows { gap: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════
   The v2 token block lived here until stage 2 (28 September 2026).
   It is now redlines-v2-tokens.css, loaded before this file.
   Do not redefine --v2-* values below: they would win by source order and
   the token file would stop being the single definition.
   ═══════════════════════════════════════════════════════════════════ */

/* Body copy in Inter, headings in Poppins. Two faces, one job each. */
.rl-v2 h1, .rl-v2 h2, .rl-v2 h3, .rl-v2 .v2-num {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-w-display);
  letter-spacing: -0.03em;   /* every reference tracks negative */
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.rl-v2 p { margin: 0; line-height: 1.65; }

/* ── The base type scale. ──────────────────────────────────────────────
   Before this, --v2-display existed only inside .rl-v2__hero h1 and --v2-h2
   was restated inside six section rules, so the tokens did not govern
   anything on their own and a heading outside a known section silently fell
   back to GeneratePress. That is also why the style guide's specimens could
   not be trusted: there was no shared rule for them to inherit.
   Sections may still override (white on navy, a narrower measure); they
   should no longer need to restate the size. */
.rl-v2 h1 { font-size: var(--v2-display); }
.rl-v2 h2 { font-size: var(--v2-h2); line-height: 1.1; }
.rl-v2 h3 {
  font-size: var(--v2-h3); line-height: 1.3;
  font-weight: var(--v2-w-medium); letter-spacing: -0.02em;
}
/* .rl-v2 prefix required. `.rl-v2 p { line-height: 1.65 }` above is (0,1,1)
   and beats a bare .rl-v2__lead at (0,1,0) regardless of source order, so the
   1.6 declared here was discarded and both rendered at 1.65. Measured: 31.35px
   and 23.1px against the intended 30.4px and 22.4px. Same specificity trap as
   the heading and paragraph margins on the style guide. */
.rl-v2 .rl-v2__lead  { font-size: var(--v2-lead);  line-height: 1.6; color: var(--v2-ink-soft); }
.rl-v2 .rl-v2__small { font-size: var(--v2-small); line-height: 1.6; color: var(--v2-ink-quiet); }
.rl-v2 a { color: inherit; }

.rl-v2__wrap { width: min(78rem, 100% - 3rem); margin-inline: auto; }
/* DESCENDANT *OR* SELF. `.rl-v2 section` alone requires the section to be
   INSIDE an .rl-v2 ancestor, which is true on a converted page and false
   for a v2 "island": a single v2 component dropped into a legacy page
   carrying .rl-v2 on its own section element so the typography rules
   scope to it. Those islands matched none of the padding rules and
   rendered with zero block padding, so the progression strip touched the
   footer on /free-screening/. Found in review, 3 October.

   section.rl-v2 covers the island case; .rl-v2 section covers the normal
   one. Both are (0,1,1), so neither wins over the modified hero and
   figure rules below that need to. */
.rl-v2 section,
section.rl-v2 { padding-block: var(--v2-gap-section); }

/* EMBEDDED CONTENT IS RESPONSIVE. The Climate Change Committee article
   overflowed its viewport by exactly the body padding: a 375px iframe
   starting 24px in on a 375px screen. The one overflow found across 60
   views in the 14 October review.

   THE WIDTH COMES FROM wp-embed.js, NOT FROM THE MARKUP. WordPress's post
   embed writes width="600" on the iframe, then its script resizes the
   element inline to the WINDOW width and sets position:absolute while it
   measures. Absolute positioning takes the iframe out of its parent's
   327px content box, so a plain `width: 100%` resolves against the
   containing block rather than the column, and loses to the inline style
   anyway.

   max-width with !important is the one thing that beats an inline width
   on an absolutely positioned element. Used deliberately and scoped to
   article embeds; see docs/CONVENTIONS.md on !important.

   Written against the embed classes rather than that one article, so any
   future oEmbed behaves. */
.rl-v2 .article-content iframe,
.rl-v2 .article-content .wp-embedded-content {
  max-width: 100% !important;
  box-sizing: border-box;
}
/* THE WRAPPER NEEDS A POSITIONING CONTEXT, and this is the actual fix.
   wp-embed.js sets position:absolute on the iframe while it measures.
   Nothing between it and <body> was positioned, so its offsetParent was
   BODY and `max-width: 100%` resolved against the 375px viewport instead
   of the 327px text column: the cap was being honoured, against the wrong
   box. position:relative on the wrapper makes the column the containing
   block, and the same max-width then does what it reads as doing. */
.rl-v2 .article-content .wp-block-embed,
.rl-v2 .article-content .wp-block-embed__wrapper {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}
/* The <p> WordPress wraps the iframe in is the element the iframe is
   actually positioned against once the wrapper is relative. */
.rl-v2 .article-content .wp-block-embed__wrapper > p { position: relative; }

/* ═════════════════════════════════════════════════════════════════
   QUOTE (v2/quote)
   ═════════════════════════════════════════════════════════════════
   One testimonial, set as a quotation. The v2 review asked for the JRP
   testimonial to be "a distinct quotation with its attribution": it was
   running as inline text inside a credibility line, so a reader scanning
   the page could not see that someone else was speaking.

   SET AT LEAD SIZE, NOT DISPLAY SIZE. The temptation with a testimonial
   is to blow it up; at 40px a five-sentence quotation becomes a wall and
   stops being read. Lead size with a generous measure reads as considered
   speech, which is what it is.

   NO DECORATIVE QUOTE GLYPH. The legacy quoted card draws a large open
   quote; here the rule above the attribution does the separating and the
   typographic quotes in the text say the rest. */
.rl-v2__quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--v2-gap-block);
  align-items: start;
}
.rl-v2 .rl-v2__quote-lead {
  font-family: var(--v2-font-display);
  font-size: var(--v2-h3);
  line-height: 1.4;
  color: var(--v2-ink);
}
@media (max-width: 900px) {
  .rl-v2__quote-layout { grid-template-columns: 1fr; }
}
.rl-v2__quote-figure {
  margin: 0;
  max-width: 48rem;
}
.rl-v2 .rl-v2__quote-text {
  font-size: var(--v2-lead);
  line-height: 1.6;
  color: var(--v2-ink);
  margin: 0;
  /* The browser default indents and side-borders a blockquote. */
  padding: 0;
  border: 0;
  quotes: none;
}
.rl-v2__quote-by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--v2-rule);
}
.rl-v2__quote-by cite {
  font-style: normal;
  font-size: var(--v2-small);
  font-weight: 500;
  color: var(--v2-ink);
}
.rl-v2__quote-context {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
}

/* Proof layout: the count, quotation and attribution are one unit.
   Opt-in, 16 October. The testimonial wording and chapter rhythm stay intact. */
.rl-v2__quote[data-layout="proof"] .rl-v2__quote-layout {
  display: block;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--v2-panel);
  border-radius: var(--v2-panel-radius);
}
.rl-v2__quote[data-layout="proof"] .rl-v2__quote-lead {
  max-width: 42rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: 1.5rem;
}
.rl-v2__quote[data-layout="proof"] .rl-v2__quote-figure { max-width: 58rem; }
.rl-v2__quote[data-layout="proof"] .rl-v2__quote-text { font-style: normal; }
.rl-v2__quote[data-layout="proof"] .rl-v2__quote-by { align-items: center; gap: 1rem 1.5rem; }

/* Editorial proof: a concise statement beside the unchanged quotation. */
.rl-v2 section.rl-v2__quote[data-layout="statement"] { background: var(--v2-ink); }
.rl-v2__quote[data-layout="statement"] .rl-v2__quote-layout {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
}
.rl-v2__quote[data-layout="statement"] .rl-v2__quote-lead {
  color: #fff;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  letter-spacing: -.025em;
  line-height: 1.2;
  max-width: 22rem;
}
.rl-v2__quote[data-layout="statement"] .rl-v2__quote-text { color: rgba(255,255,255,.85); font-style: normal; }
.rl-v2__quote[data-layout="statement"] .rl-v2__quote-by { border: 0; padding-top: 0; align-items: center; }
.rl-v2__quote[data-layout="statement"] cite { color: #fff; }
.rl-v2__quote[data-layout="statement"] .rl-v2__quote-logo {
  background: #fff;
  padding: .75rem 1rem;
  height: 4rem;
  width: 8rem;
  box-sizing: border-box;
  border-radius: var(--v2-panel-radius);
}
@media (max-width: 900px) {
  .rl-v2__quote[data-layout="statement"] .rl-v2__quote-layout { grid-template-columns: 1fr; }
  .rl-v2__quote[data-layout="statement"] .rl-v2__quote-lead { max-width: 36rem; }
}

.rl-v2__quote-logo { width: auto; height: 2.5rem; max-width: 10rem; object-fit: contain; }

/* Evidence may pair a testimonial with a case. Evidence-wide gives the
   testimonial its own full-width band; separate engagements stay separate. */
.rl-v2 section.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) { background: var(--v2-ink); }
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--v2-gap-block);
  align-items: start;
}
.rl-v2__quote-heading { grid-column: 1 / -1; max-width: 54rem; }
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__quote-heading h2,
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__quote-heading .v2-label,
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__quote-text,
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) cite { color: var(--v2-paper); }
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__quote-text {
  font-size: var(--v2-lead);
  font-style: normal;
}
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__quote-by {
  border: 0;
  padding: 0;
  align-items: center;
  margin-top: var(--v2-gap-block);
}
.rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__quote-logo {
  background: var(--v2-panel-raised);
  padding: var(--space-2);
  height: var(--space-6);
  width: auto;
  box-sizing: content-box;
  border-radius: var(--v2-panel-radius);
}
.rl-v2__quote-cases { min-width: 0; }
@media (max-width: 900px) {
  .rl-v2__quote:is([data-layout="evidence"], [data-layout="evidence-wide"]) .rl-v2__wrap { grid-template-columns: 1fr; }
}

.rl-v2__quote[data-layout="evidence-wide"] .rl-v2__wrap {
  display: block;
  max-width: calc(var(--v2-measure) * 1.65);
}
.rl-v2__quote[data-layout="evidence-wide"] .rl-v2__quote-heading {
  margin-bottom: var(--v2-gap-block);
}
.rl-v2__quote[data-layout="evidence-wide"] .rl-v2__quote-text {
  font-size: var(--v2-lead);
}


/* ═════════════════════════════════════════════════════════════════
   COMPARE (v2/compare)
   ═════════════════════════════════════════════════════════════════
   Two options answered against the same questions. Built 14 October for
   the partnership page, where the v2 review found the same relationship
   explained several times in prose.

   Each option is one labelled definition list. A shared grid keeps the
   questions aligned on desktop; the same markup stacks on narrow screens.
   There is no second mobile copy and no inherited table-cell styling. */
.rl-v2__compare-head { margin-bottom: var(--v2-gap-block); }
.rl-v2 .rl-v2__compare-sub {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  max-width: 42rem;
  margin-top: 0.75rem;
}
.rl-v2__compare-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--v2-gap-block);
  row-gap: var(--v2-gap-item);
}
.rl-v2__compare-option {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  padding: var(--v2-gap-block);
  background: var(--v2-paper-2);
}
.rl-v2 .rl-v2__compare-option h3 {
  font-size: calc(var(--v2-h3) * 1.4);
  margin-bottom: 0;
}
.rl-v2__compare-option dl { display: contents; margin: 0; }
.rl-v2__compare-option dl > div { margin-top: 0; }
.rl-v2__compare-option dt {
  font-size: var(--v2-small);
  font-weight: var(--v2-w-body);
  color: var(--v2-ink-quiet);
}
.rl-v2__compare-option dd {
  margin: 0.5rem 0 0;
  font-size: var(--v2-lead);
  line-height: 1.65;
  color: var(--v2-ink);
}
.rl-v2 .rl-v2__compare-note {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: var(--v2-gap-item);
  max-width: 42rem;
}
@media (max-width: 760px) {
  .rl-v2__compare-options { grid-template-columns: 1fr; gap: var(--v2-gap-item); }
  .rl-v2__compare-option { display: block; grid-row: auto; padding: var(--v2-gap-item); }
  .rl-v2__compare-option dl { display: block; }
  .rl-v2__compare-option dl > div { margin-top: var(--v2-gap-item); }
  .rl-v2__compare-option dd { min-height: 0; }
}

/* Panels: stronger questions and tighter spacing, as requested in the
   16 October transcript. The subgrid still aligns the comparison rows. */
.rl-v2__compare[data-layout="panels"] .rl-v2__compare-head { margin-bottom: 2rem; }
.rl-v2__compare[data-layout="panels"] .rl-v2__compare-options { column-gap: 1.5rem; row-gap: 1rem; }
.rl-v2__compare[data-layout="panels"] .rl-v2__compare-option {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--v2-panel-raised);
  border: 1px solid var(--v2-rule);
  border-radius: var(--v2-panel-radius);
  box-shadow: var(--v2-panel-shadow);
}
.rl-v2__compare[data-layout="panels"] .rl-v2__compare-option dt {
  font-size: var(--v2-body);
  font-weight: var(--v2-w-medium);
  color: var(--v2-ink);
}
.rl-v2__compare[data-layout="panels"] .rl-v2__compare-option dd {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  margin-top: 0.25rem;
  line-height: 1.55;
}
.rl-v2__compare[data-layout="panels"] .rl-v2__compare-option h3 { margin-bottom: 0.75rem; }

/* Routes: open editorial columns for a compact comparison. */
.rl-v2__compare[data-layout="routes"] .rl-v2__compare-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
.rl-v2__compare[data-layout="routes"] .v2-label { grid-column: 1 / -1; }
.rl-v2__compare[data-layout="routes"] h2 { grid-row: span 2; max-width: 30rem; }
.rl-v2__compare[data-layout="routes"] .rl-v2__compare-sub { margin-top: 0; font-size: var(--v2-lead); }
.rl-v2__compare[data-layout="routes"] .rl-v2__compare-options { gap: clamp(2rem, 5vw, 4.5rem); }
.rl-v2__compare[data-layout="routes"] .rl-v2__compare-option { display: block; grid-row: auto; padding: 0; background: none; }
.rl-v2__compare[data-layout="routes"] .rl-v2__compare-option h3 { font-size: 1.5rem; }
.rl-v2__compare[data-layout="routes"] dl { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 2rem; }
.rl-v2__compare[data-layout="routes"] dt { font-size: var(--v2-small); }
.rl-v2__compare[data-layout="routes"] dd { font-size: var(--v2-body); margin-top: .35rem; line-height: 1.5; }
@media (max-width: 900px) {
  .rl-v2__compare[data-layout="routes"] .rl-v2__compare-head { display: block; }
  .rl-v2__compare[data-layout="routes"] .rl-v2__compare-sub { margin-top: 1.25rem; }
  .rl-v2__compare[data-layout="routes"] .rl-v2__compare-options { grid-template-columns: 1fr; gap: 3rem; }
  .rl-v2__compare[data-layout="routes"] dl > div { margin-top: 0; }
}
@media (max-width: 420px) {
  .rl-v2__compare[data-layout="routes"] dl { grid-template-columns: 1fr; gap: 1rem; }
}

/* Summary comparison: state the difference before showing the terms.
   The optional summaries are approved service wording. A native disclosure
   keeps the existing responsibilities and costs one click away. */
.rl-v2__compare[data-layout="choices"] .rl-v2__compare-head { max-width: 54rem; }
.rl-v2__compare[data-layout="choices"] .rl-v2__compare-sub { font-size: var(--v2-lead); max-width: 48rem; }
.rl-v2__compare[data-layout="choices"] .rl-v2__compare-options { gap: 2rem; align-items: start; }
.rl-v2__compare[data-layout="choices"] .rl-v2__compare-option {
  display: block;
  grid-row: auto;
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--v2-panel);
  border-radius: var(--v2-panel-radius);
}
.rl-v2 .rl-v2__compare-option .rl-v2__compare-summary { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; max-width: 28rem; }
.rl-v2 .rl-v2__compare-support { margin-top: 1.25rem; max-width: 28rem; font-size: var(--v2-body); color: var(--v2-ink-soft); }
.rl-v2__compare-details { margin-top: var(--space-4); border-top: 1px solid var(--v2-rule); }
.rl-v2__compare[data-layout="choices"] dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; margin: 1.5rem 0 0; }
.rl-v2__compare[data-layout="choices"] dl > div { margin: 0; }
.rl-v2__compare[data-layout="choices"] dd { font-size: var(--v2-body); line-height: 1.5; margin-top: .35rem; }
@media (min-width: 901px) {
  .rl-v2__compare[data-layout="choices"] .rl-v2__compare-summary { min-height: 2.5em; }
  .rl-v2__compare[data-layout="choices"] .rl-v2__compare-support { min-height: 3.3em; }
}
@media (max-width: 900px) {
  .rl-v2__compare[data-layout="choices"] .rl-v2__compare-options { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rl-v2__compare[data-layout="choices"] dl { grid-template-columns: 1fr; }
}

/* Card comparison: the same raised surface, edge and shadow as compact
   case cards. Icons identify the routes; these are not clickable cards. */
.rl-v2__compare[data-layout="cards"] .rl-v2__compare-options {
  gap: var(--space-4);
  align-items: stretch;
}
.rl-v2__compare[data-layout="cards"] .rl-v2__compare-option {
  display: flex;
  flex-direction: column;
  grid-row: auto;
  padding: clamp(var(--space-3), 2.5vw, var(--space-4));
  background: var(--v2-panel-raised);
  border: 1px solid var(--v2-rule);
  border-radius: var(--v2-panel-radius);
  box-shadow: var(--v2-panel-shadow);
}
.rl-v2__compare[data-layout="cards"] .rl-v2__compare-identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.rl-v2__compare[data-layout="cards"] .rl-v2__compare-model { margin: 0; }
.rl-v2__compare-icon { display: inline-flex; flex: 0 0 auto; color: var(--v2-ink); }
.rl-v2__compare-icon svg { display: block; width: var(--space-6); height: var(--space-6); }
.rl-v2 .rl-v2__compare[data-layout="cards"] .rl-v2__compare-summary {
  font-size: 1.5rem;
  max-width: 24rem;
}
.rl-v2 .rl-v2__compare-body {
  margin-top: var(--space-2);
  max-width: var(--v2-measure);
  font-size: var(--v2-body);
  line-height: 1.65;
  color: var(--v2-ink-soft);
}
.rl-v2__compare[data-layout="cards"] .rl-v2__compare-supplement {
  margin-top: var(--space-3);
  padding: clamp(var(--space-3), 2.5vw, var(--space-4));
  background: var(--v2-panel);
  border-radius: var(--v2-panel-radius);
}
.rl-v2 .rl-v2__compare[data-layout="cards"] .rl-v2__compare-note {
  margin: 0;
  max-width: 50rem;
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
}
.rl-v2__compare[data-layout="cards"] .rl-v2__compare-support-blocks { margin-top: var(--space-3); }
@media (min-width: 901px) {
  .rl-v2__compare[data-layout="cards"] .rl-v2__compare-summary { min-height: 2.5em; }
}
@media (max-width: 900px) {
  .rl-v2__compare[data-layout="cards"] .rl-v2__compare-options { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Buyer overview: the partner comparison hierarchy without card surfaces.
   Two separate explanations remain visible; no reference accordion. */
.rl-v2__compare[data-layout="overview"] .rl-v2__compare-options {
  gap: var(--v2-gap-block);
}
.rl-v2__compare[data-layout="overview"] .rl-v2__compare-option {
  display: block;
  grid-row: auto;
  padding: 0;
  background: none;
}
.rl-v2__compare[data-layout="overview"] .rl-v2__compare-identity {
  margin-bottom: var(--space-2);
}
.rl-v2 .rl-v2__compare[data-layout="overview"] .rl-v2__compare-model { margin: 0; }
.rl-v2 .rl-v2__compare[data-layout="overview"] .rl-v2__compare-summary { font-size: 1.5rem; }
.rl-v2 .rl-v2__compare[data-layout="overview"] .rl-v2__compare-body { margin-bottom: 0; }
.rl-v2 .rl-v2__compare[data-layout="overview"] .rl-v2__compare-note {
  font-size: var(--v2-body);
  max-width: 58rem;
  margin-top: var(--space-4);
}
/* A sole supporting item spans the panel and needs no empty second column. */
.rl-v2__compare-support-blocks:has(> :only-child) { grid-template-columns: 1fr; }
.rl-v2__compare-supplement > .rl-v2__compare-support-blocks:first-child { margin-top: 0; }
/* Short parallel card titles need no reserved second line. Compact cards
   keep the existing surface, type and padding; their content sets the height. */
.rl-v2 .rl-v2__compare[data-layout="cards"][data-density="compact"] .rl-v2__compare-summary { min-height: 0; }
@media (min-width: 901px) {
  .rl-v2__compare-support-blocks:has(> :only-child) > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-4);
    align-items: start;
  }
  .rl-v2 .rl-v2__compare-support-blocks:has(> :only-child) :is(h3, p) { margin: 0; }
}
@media (max-width: 900px) {
  .rl-v2__compare[data-layout="overview"] .rl-v2__compare-options { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Visible commercial details: concise lists and shared supporting copy.
   Opt-in content slots preserve existing question-and-answer comparisons. */
.rl-v2__compare[data-layout="choices"] .rl-v2__compare-options:has(.rl-v2__compare-points) { align-items: stretch; }
.rl-v2__compare-option:has(.rl-v2__compare-points) .rl-v2__compare-support { min-height: 0; }
.rl-v2 .rl-v2__compare-points {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  color: var(--v2-ink-soft);
  font-size: var(--v2-body);
}
.rl-v2__compare-points li + li { margin-top: var(--space-1); }
.rl-v2__compare:has(.rl-v2__compare-points) .rl-v2__compare-note {
  font-size: var(--v2-body);
  max-width: 50rem;
  margin-top: var(--space-3);
}
.rl-v2__compare-support-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v2-gap-block);
  margin-top: var(--v2-gap-block);
}
.rl-v2 .rl-v2__compare-support-blocks h3 { font-size: var(--v2-h3); }
.rl-v2 .rl-v2__compare-support-blocks p {
  margin-top: var(--space-1);
  color: var(--v2-ink-soft);
  max-width: var(--v2-measure);
}
.rl-v2__compare-support-blocks a {
  color: var(--v2-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .rl-v2__compare-support-blocks { grid-template-columns: 1fr; gap: var(--space-3); }
}

.rl-v2 .rl-v2__compare-intro-note {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  margin-top: 0.5rem;
  max-width: 42rem;
}


/* Supporting information (v2-disclosures partial).
   Native controls keep secondary detail accessible without adding page chapters. */
.rl-v2__disclosures { margin-top: var(--v2-gap-block); border-top: 1px solid var(--v2-rule); }
.rl-v2__disclosure { border-bottom: 1px solid var(--v2-rule); }
:is(.rl-v2__disclosure, .rl-v2__compare-details) > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: var(--v2-ink);
  font-size: var(--v2-body);
  font-weight: var(--v2-w-medium);
  cursor: pointer;
  list-style: none;
}
:is(.rl-v2__disclosure, .rl-v2__compare-details) > summary::-webkit-details-marker { display: none; }
:is(.rl-v2__disclosure, .rl-v2__compare-details) > summary:hover { text-decoration: underline; text-underline-offset: var(--space-half); }
:is(.rl-v2__disclosure, .rl-v2__compare-details) > summary:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: var(--space-half); }
.rl-v2__disclosure-toggle { position: relative; width: var(--space-2); height: var(--space-2); flex-shrink: 0; }
.rl-v2__disclosure-toggle::before,
.rl-v2__disclosure-toggle::after { content: ""; position: absolute; background: currentColor; }
.rl-v2__disclosure-toggle::before { width: 100%; height: 1px; left: 0; top: 50%; }
.rl-v2__disclosure-toggle::after { height: 100%; width: 1px; top: 0; left: 50%; }
:is(.rl-v2__disclosure, .rl-v2__compare-details)[open] .rl-v2__disclosure-toggle::after { display: none; }
.rl-v2__disclosure-body { padding: var(--space-1) 0 var(--space-4); max-width: 66rem; }
.rl-v2 .rl-v2__disclosure-body p,
.rl-v2 .rl-v2__disclosure-body ul { color: var(--v2-ink-soft); font-size: var(--v2-body); max-width: var(--v2-measure); }
.rl-v2 .rl-v2__disclosure-body p { margin-top: var(--space-2); }
.rl-v2__disclosure-body ul { margin: 0 0 var(--space-3); padding-left: var(--space-3); }
.rl-v2__disclosure-body li + li { margin-top: var(--space-1); }
.rl-v2__disclosure-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--v2-gap-block); }
.rl-v2 .rl-v2__disclosure-body h3 { font-size: var(--v2-h3); margin-bottom: var(--space-2); }
.rl-v2__disclosure-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--v2-gap-block); padding-left: var(--space-3); margin: 0; }
.rl-v2__disclosure-steps > li { padding-left: var(--space-1); }
.rl-v2__disclosure-steps > li + li { margin-top: 0; }
.rl-v2 .rl-v2__disclosure-body .rl-v2__disclosure-note { margin-top: var(--space-3); font-size: var(--v2-small); }
@media (max-width: 760px) {
  .rl-v2__disclosure-groups,
  .rl-v2__disclosure-steps { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ═════════════════════════════════════════════════════════════════
   ARTICLE BODY, UNDER THE v2 SCOPE
   ═════════════════════════════════════════════════════════════════
   The .rl-v2 specificity trap, SEVENTH time, and this one shipped for two
   days across all 27 articles before anyone looked at a body paragraph.

   `.article-content p` sets margin:0 0 22px at (0,1,1). `.rl-v2 p` sets
   margin:0 at the SAME specificity and sits later in the file, so it won
   on source order the moment single.php gained the v2 scope on 12
   October. Every article became one unbroken wall of text.

   Restated at (0,2,1) so source order cannot decide it either way. The
   measure and sizes come from the v2 scale while they are here: 16px at
   720px was the legacy body setting, and v2 articles read better at the
   same lead size the rest of the site uses. */
.rl-v2 .article-content p {
  font-size: var(--v2-body);
  line-height: 1.75;
  color: var(--v2-ink-soft);
  margin: 0 0 1.4rem;
}
.rl-v2 .article-content > p:first-of-type {
  font-size: var(--v2-lead);
  color: var(--v2-ink);
  font-weight: 400;
}
.rl-v2 .article-content li { margin-bottom: 0.5rem; }
.rl-v2 .article-content h2,
.rl-v2 .article-content h3 { margin: 2.5rem 0 1rem; }
.rl-v2 .article-content h2:first-child { margin-top: 0; }

/* ═════════════════════════════════════════════════════════════════
   404, UNDER THE v2 SCOPE
   ═════════════════════════════════════════════════════════════════
   The big "404" was w800 and the heading w700, against a display weight
   of 500 everywhere else. Small-and-bold is the amateur signature the
   token file names in its own header; large-and-light is the house voice,
   and this is the largest numeral on the site. */
.rl-v2.rl-404 .rl-404__code {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-w-display);
  color: var(--v2-ink);
  opacity: 0.1;
}
.rl-v2.rl-404 .rl-404__heading {
  font-family: var(--v2-font-display);
  font-size: var(--v2-h2);
  font-weight: var(--v2-w-display);
  letter-spacing: -0.02em;
  color: var(--v2-ink);
}
.rl-v2.rl-404 .rl-404__body {
  font-size: var(--v2-lead);
  color: var(--v2-ink-soft);
}
/* THE MARGINS HAVE TO BE RESTATED. `.rl-v2 p` sets margin:0 at (0,1,1)
   and the v2 heading rules do the same, so adding the scope collapsed the
   heading, body and links into one another: the stack had been relying on
   the legacy margins. The .rl-v2 specificity trap, sixth time.

   The numeral's NEGATIVE bottom margin is deliberate and stays: the
   heading is meant to sit over the faded 404 behind it. */
.rl-v2.rl-404 .rl-404__heading { margin: 0 0 1rem; }
.rl-v2.rl-404 .rl-404__body { margin: 0 0 2.25rem; max-width: 34rem; }
/* The actions align with the centred stack above them, and the two links
   sit on the button's optical line rather than its box. */
.rl-v2.rl-404 .rl-404__links { align-items: center; gap: 1.75rem; }
/* FULL WIDTH. The block sat left of the page: .rl-404 is a flex COLUMN
   with align-items:center, so it shrink-wrapped to its widest child
   (592px) and then centred its contents inside that, while its 1200px
   parent stayed empty to the right. The container was never the problem;
   the main element just had to fill it. Measured 12 October. */
.rl-404 { width: 100%; }

/* ═════════════════════════════════════════════════════════════════
   THE INSIGHTS INDEX, UNDER THE v2 SCOPE
   ═════════════════════════════════════════════════════════════════
   Converted 12 October, the last public page carrying the legacy card
   language: every one of 27 article cards had a coral left bar, a 1px
   outline, a drop shadow, rounded corners, a coral uppercase date and a
   coral "Read article ›". Five decorative devices on a list whose job is
   to let someone scan 27 headlines.

   Same treatment as the case study index: a rule separates, the ground
   carries, and the headline does the work. */
.rl-v2 .insights-grid-section { background: var(--v2-paper-2); padding: var(--v2-gap-section) 0; }
.rl-v2 .insight-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--v2-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem 0 0;
}
.rl-v2 .insight-card:hover {
  box-shadow: none;
  transform: none;
  border-top-color: var(--v2-ink);
}
/* ── TWO COLUMNS, NOT THREE ──
   The v2 review: "editorial cards work, but long titles create dense
   blocks of six or more lines. Wider cards/two columns would help before
   considering approved shorter display titles."

   That last clause is the point: the titles are attribution-study names
   and shortening them needs approval, so the column has to give instead.
   Measured at 1440 before this change, in a 368px third-column: five
   lines on most cards and six at 375px. Two columns give about 600px,
   which puts the same titles in two or three.

   The featured card already spans the full width, so this only changes
   the ordinary ones. Below 900px the existing responsive rules take over
   and stack them. */
@media (min-width: 901px) {
  .rl-v2 .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
/* TABLET GOES TO ONE COLUMN, which the measurements forced. The legacy
   rules drop to two columns below 900px and to one below 600, so at
   768px each card had 348px: NARROWER than the 368px that made the
   desktop titles five lines in the first place, and it measured five
   lines there too. Two columns is right when the column is wide; at
   tablet width it is the same density problem with fewer cards. */
@media (min-width: 601px) and (max-width: 900px) {
  .rl-v2 .insight-grid { grid-template-columns: minmax(0, 1fr); }
}
/* THE FEATURED CARD SPANS BOTH COLUMNS, so its own content should not
   look like it is still sitting in one. Measured at 1440: the card is
   1152px, its title caps at 720 and its body at 760, which left roughly
   400px of empty ground to its right and made the lead item read as
   unfinished rather than featured.

   The caps themselves are right: 720px of 30px display type is already a
   long line and widening it would hurt the reading. So the card uses the
   space instead of the line length, putting the excerpt and its action
   beside the title at two columns. Below 901px it stacks with everything
   else. */
@media (min-width: 901px) {
  .rl-v2 .insight-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 3rem;
    align-items: start;
  }
  .rl-v2 .insight-card--featured .insight-card__date { grid-column: 1 / -1; }
  .rl-v2 .insight-card--featured .insight-card__title { grid-row: 2; grid-column: 1; }
  .rl-v2 .insight-card--featured .rl-proof__body {
    grid-row: 2; grid-column: 2; margin: 0;
  }
  .rl-v2 .insight-card--featured .rl-proof__link {
    grid-row: 3; grid-column: 2; width: auto; justify-self: start;
  }
}
/* The featured card keeps its full width and its longer excerpt, which is
   the thing that makes it featured; it loses the thicker coral bar, which
   was the thing that only decorated it. */
.rl-v2 .insight-card--featured {
  border-top-width: 2px;
  border-top-color: var(--v2-ink);
  padding: 1.75rem 0 0;
}
/* The date is metadata, not an accent. Coral at 600 made every date in a
   27-card list compete with its own headline. */
.rl-v2 .insight-card__date {
  font-size: var(--v2-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--v2-ink-quiet);
}
.rl-v2 .insight-card__title {
  font-family: var(--v2-font-display);
  font-size: var(--v2-h3);
  font-weight: var(--v2-w-display);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
}
.rl-v2 .insight-card--featured .insight-card__title {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
}
.rl-v2 .insight-card .rl-proof__body {
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  line-height: 1.6;
}
.rl-v2 .insight-card .rl-proof__link {
  font-size: var(--v2-small);
  color: var(--v2-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rl-v2 .insight-card .rl-btn__chev { display: none; }
/* Pagination: text and a rule, not bordered boxes. */
.rl-v2 .insight-pagination .page-numbers {
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--v2-small);
  font-weight: 400;
  color: var(--v2-ink-soft);
}
.rl-v2 .insight-pagination .page-numbers.current {
  color: var(--v2-ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ═════════════════════════════════════════════════════════════════
   THE FOUNDER SECTION, UNDER THE v2 SCOPE
   ═════════════════════════════════════════════════════════════════
   /about/ converted on 12 October. Three of its four bespoke elements
   mapped onto components that already existed (origin and challenge onto
   v2/row, the four principles onto v2/steps); about-founder did not, and
   gets no new component: a photo, a bio and a credentials list is its own
   shape, and inventing a generic "person" component for one use would be
   worse than restyling this one.

   What changes is the chrome, as on the case study index: the role was
   coral uppercase, the credentials carried coral bullet dots, and the
   photo was a rounded card. Three decorative devices on a section whose
   content is already strong. */
.rl-v2 .about-founder .rl-eyebrow {
  font-size: var(--v2-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-ink-quiet);
  text-align: left;
  margin-left: 0;
}
.rl-v2 .about-founder .rl-h2 {
  font-family: var(--v2-font-display);
  font-size: var(--v2-h2);
  font-weight: var(--v2-w-display);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--v2-ink);
}
/* The role is a fact about the person, not an accent. Coral uppercase at
   600 made it compete with the name directly above it. */
.rl-v2 .about-founder__role {
  font-size: var(--v2-small);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--v2-ink-quiet);
}
/* MARGIN RESTATED, and that is the point of the rule. `.rl-v2 p` sets
   margin:0 at (0,1,1) and beats `.about-founder__para` at (0,1,0), so
   converting this page silently stripped the 16px between paragraphs and
   three paragraphs of biography ran together as one block. Seen on
   screen, 12 October. The .rl-v2 specificity trap, fifth time.

   The measure is capped too: this column is 775px wide, so the bio ran to
   a line length nothing else in v2 uses. */
.rl-v2 .about-founder__para {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 38rem;
}
.rl-v2 .about-founder__para:last-of-type { margin-bottom: 0; }
/* Credentials: a list of six facts, set as text. The coral dot before
   each one was decoration standing in for a bullet, and six of them read
   as a graphic device rather than as information. */
.rl-v2 .about-founder__creds { border-top-color: var(--v2-rule); }
.rl-v2 .about-founder__creds li {
  font-size: var(--v2-small);
  font-weight: 400;
  color: var(--v2-ink-soft);
  padding-left: 0;
}
.rl-v2 .about-founder__creds li::before { display: none; }
/* Square, like every other figure in v2. */
.rl-v2 .about-founder__photo img { border-radius: 4px; }
/* THE PORTRAIT STARTS WHERE THE BIOGRAPHY STARTS. The v2 review: "align
   the portrait with the start of the biography rather than allowing the
   biography to begin well above it."

   .about-founder__inner is a grid with align-items:start, which is
   right, but .about-founder__photo overrode it with align-self:center,
   so the portrait centred against a text column much taller than it.
   Measured at 1440: the name began at 790px and the portrait at 896,
   106px below, which reads as two unrelated blocks rather than a person
   beside their own biography. */
.rl-v2 .about-founder__photo { align-self: start; }
/* THE NAME AND ROLE GET THEIR SPACE BACK, tenth instance of the .rl-v2
   trap in this stylesheet. .about-founder__h2 asks for 10px above and
   .about-founder__role for 24px below; both are (0,1,0) and lose to
   `.rl-v2 h2` and `.rl-v2 p` at (0,1,1). Measured: both computed 0, so
   the eyebrow, the name, the role and the first line of biography ran
   together as four stacked lines with nothing separating the person from
   their own story. */
.rl-v2 .about-founder__h2 { margin: 0.5rem 0 0.25rem; }
.rl-v2 .about-founder__role { margin: 0 0 1.5rem; }

/* ═════════════════════════════════════════════════════════════════
   CONTACT PAGE, UNDER THE v2 SCOPE
   ═════════════════════════════════════════════════════════════════
   /contact/ converted on 12 October: it is where every CTA on the site
   lands, and it was the last legacy page in the main journey. The hero
   and the trust block moved to v2 components; these are the two legacy
   treatments the conversion left behind, both seen on screen once Local
   was back up.

   THE PILLS ARE NOT CAPSULES. They are the same full-radius pill the
   screening hero buttons lost on 4 October, and pills used as decoration
   are a tell the design brief names. They stay BUTTON-SHAPED, because
   they are genuinely toggles and have to look pressable; they just stop
   being capsules. Selected state keeps its filled treatment: with eight
   of them, the difference between picked and not has to survive at a
   glance.

   Same reasoning as everywhere else in this file: 4px, not 9999px. */
.rl-v2 .rl-pill {
  border-radius: 4px;
  border-width: 1px;
  font-family: var(--v2-font-body);
  font-size: var(--v2-small);
  font-weight: 500;
  padding: 0.55rem 0.9rem;
}
/* THE CONTACT DETAILS ARE NOT CARDS. Three bordered, rounded, white
   boxes beside a form is the legacy card language; v2 separates with
   rules. Email, phone and address are a list of three facts, not three
   objects of equal weight to the form they sit next to. */
.rl-v2 .contact-info__item {
  background: none;
  border: 0;
  border-top: 1px solid var(--v2-rule);
  border-radius: 0;
  padding: 1.1rem 0 0;
}

/* ═════════════════════════════════════════════════════════════════
   CASE STUDY INDEX, UNDER THE v2 SCOPE
   ═════════════════════════════════════════════════════════════════
   /case-studies/ converted on 12 October, the last page in that family:
   the five detail pages moved on 3 October and the index linking them did
   not, so the page a visitor meets FIRST was the only legacy one.

   The cs-grid MARKUP is right and stays: five equal cards is the correct
   shape for an index, and the two v2 proof components are built for one
   lead case with quieter ones beside it, which is a homepage shape. What
   was legacy here is the chrome, so that is what changes.

   Scoped to .rl-v2 so nothing else using these classes moves; nothing
   else does today, but the legacy home and campaign pages are converting
   later and this keeps that decision theirs. */
.rl-v2 .cs-grid-section { background: var(--v2-paper-2); padding: var(--v2-gap-section) 0; }
/* LEFT-ALIGNED. .rl-section-header centres and auto-margins itself, which
   is the legacy convention; nothing in v2 is centred, and on screen the
   header sat centred above five left-aligned cards. Seen on 12 October
   once Local was back up. */
.rl-v2 .cs-grid-section .rl-section-header {
  margin: 0 0 var(--v2-gap-block);
  text-align: left;
  max-width: none;
}
/* The legacy header uses .rl-eyebrow and .rl-h2 rather than the v2 label
   and heading, so the v2 scale is applied rather than the markup changed. */
/* .rl-eyebrow centres itself too, like the heading and sub below it.
   Three separate legacy rules each centring their own element, which is
   why left-aligning the container fixed none of them. */
.rl-v2 .cs-grid-section .rl-eyebrow {
  font-size: var(--v2-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-ink-quiet);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.rl-v2 .cs-grid-section .rl-h2 {
  font-family: var(--v2-font-display);
  font-size: var(--v2-h2);
  font-weight: var(--v2-w-display);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--v2-ink);
  max-width: 34rem;
}
/* The sub-line centres and auto-margins ITSELF, so left-aligning the
   header around it was not enough: the h2 moved left and the sentence
   under it stayed centred. Both have to be reset here. */
.rl-v2 .cs-grid-section .rl-section-sub {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  max-width: 42rem;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
/* NOT A BORDERED, SHADOWED, ROUNDED BOX. The v2 language draws separation
   with rules and space; the coral left border, 1px outline and drop
   shadow are three devices doing one job, and they are the clearest
   remaining legacy signal on the page. A top rule and the card's own
   ground is enough to say "these are five separate things". */
.rl-v2 .cs-idx-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--v2-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 1.75rem 0 0;
}
.rl-v2 .cs-idx-card:hover {
  box-shadow: none;
  transform: none;
  border-top-color: var(--v2-ink);
}
/* The badge was a filled capsule. Pills used as decoration are one of the
   tells the design brief names, so it becomes tracked label text, which
   is what the v2 figure captions already do. */
.rl-v2 .cs-idx-card .cs-card__badge {
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--v2-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-ink-quiet);
}
.rl-v2 .cs-idx-card__tag {
  background: none;
  border: 0;
  padding: 0 1rem 0 0;
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
}
/* The statistic is the card's argument, so it takes the v2 numeral
   treatment the proof panels use rather than a bold body size. */
.rl-v2 .cs-idx-card .rl-proof__stat-val {
  font-family: var(--v2-font-display);
  font-size: 2.75rem;
  font-weight: var(--v2-w-display);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--v2-ink);
}
/* THE NUMERAL AND ITS LABEL STACK, as they do in the v2 proof panels. The
   legacy rule sets them side by side on a baseline with a rule under the
   pair, so a 44px numeral sat beside wrapping small text and the label
   ran to three lines in a narrow card. */
/* THE GAP IS THE SUBGRID'S, NOT A MARGIN, and that is why trimming the
   margin first barely moved it. The v2 review: "tighten the gap between
   the key metric and description."

   .cs-idx-card is a 6-row subgrid and .cs-idx-grid sets row-gap:24px, so
   every row of every card is separated by 24px BEFORE any margin.
   Measured from the stat label's bottom to the description's top: 36px,
   which is 24 of gap plus 12 of margin. The description read as a
   separate block rather than the explanation of the figure above it.

   So the margin goes to zero and the row gap carries the spacing alone,
   at 16px. The gap is shared by all six rows, so this also closes the
   badge-to-client and tags-to-link joins by the same amount, which is
   the right direction for a card that was airy throughout. */
.rl-v2 .cs-idx-grid { row-gap: 16px; }
.rl-v2 .cs-idx-card .rl-proof__stat {
  display: block;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.rl-v2 .cs-idx-card .rl-proof__stat-label {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--v2-small);
  line-height: 1.45;
  max-width: 22rem;
}
/* The logo sat in a bordered, rounded, filled tile: the same three
   devices the card itself just lost. The mark alone is enough. */
.rl-v2 .cs-idx-card__logo {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: auto;
  max-width: 72px;
  height: 32px;
}
.rl-v2 .cs-idx-card__logo--icon { display: none; }
.rl-v2 .cs-idx-card .rl-proof__stat-label,
.rl-v2 .cs-idx-card .rl-proof__client { color: var(--v2-ink-quiet); }
/* THE DESCRIPTION READS AT BODY SIZE. The v2 review: "increase the
   readability of the quieter card description text."

   Measured: 14px at --v2-ink-soft, which is 62% of navy. Small AND
   faded, on the text that explains what each case actually found. The
   size goes to --v2-body and the colour stays ink-soft, which is about
   7.4:1 on this ground: quieter than the heading, not harder to read.
   Lighthouse still reports 100 on this page after the change. */
.rl-v2 .cs-idx-card .rl-proof__body {
  color: var(--v2-ink-soft);
  font-size: var(--v2-body);
  line-height: 1.6;
}
/* THE CARD GRID SHARES THE HERO'S EDGE. The review: "the card grid's
   inset differs from the hero's main alignment; reconcile that within
   this page family."

   It did, by 48px: the hero wrap starts at x=96 and runs 1248px, while
   .rl-section-inner is 1200px starting at x=120 and the grid adds its
   own 24px, so the first card began at x=144. The same two-container
   mismatch corrected on /contact/ and /request-documents/ today, in the
   same way: the section inner takes the wrap's own expression, since
   .rl-v2__wrap is declared inline as min(78rem, 100% - 3rem) and there
   is no token to share. */
.rl-v2 .cs-grid-section .rl-section-inner {
  width: min(78rem, 100% - 3rem);
  max-width: none;
  padding-inline: 0;
  margin-inline: auto;
}
/* The link, with the chevron hidden the same way the screening hero
   hides its own: a wrapped span, so the glyph goes and the link's
   accessible name keeps its words. Setting font-size:0 with a ::before
   replacement was the first attempt and is worse than the chevron: it
   empties the accessible name and hands screen readers generated content
   instead of the link text. */
.rl-v2 .cs-idx-card .rl-proof__link {
  color: var(--v2-accent-text);
  font-size: var(--v2-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rl-v2 .cs-idx-card .rl-proof__link .rl-btn__chev { display: none; }

/* ── CHAPTERS ──────────────────────────────────────────────────────
   Rob, 4 October: "components still determine the rhythm more than the
   reader's questions do. A heading, paragraph, figure and large gap
   repeatedly announce a fresh start." That is literally what the rule
   above does: every section gets the same padding, so a figure that
   CONTINUES the previous one is separated by exactly as much air as a
   change of subject.

   The fix is not fewer sections. It is a spacing that distinguishes
   "still the same demonstration" from "now something else":

     data-chapter="start"   first section of a chapter. Full gap above.
     data-chapter="mid"     continues it. Tight above AND below.
     data-chapter="end"     last of the chapter. Tight above, full below.

   Set it per section in the manifest; sections with no attribute keep the
   uniform rhythm. A one-section chapter needs no attribute at all: it is
   already bounded by full gaps on both sides.

   --v2-gap-join is deliberately not a fraction of --v2-gap-section. The
   point is a visible RATIO between the two, so a chapter reads as one
   movement; 3rem against a 5-8.5rem section gives roughly 1:2 at the
   small end and 1:3 at the large, which is the difference between a
   paragraph break and a chapter break.

   SPECIFICITY: these must beat the (0,1,1) rule above, so each selector
   pairs the attribute with the same two-part shape. */
.rl-v2 section[data-chapter="mid"],
section.rl-v2[data-chapter="mid"],
.rl-v2 section[data-chapter="end"],
section.rl-v2[data-chapter="end"] { padding-block-start: var(--v2-gap-join); }
.rl-v2 section[data-chapter="start"],
section.rl-v2[data-chapter="start"],
.rl-v2 section[data-chapter="mid"],
section.rl-v2[data-chapter="mid"] { padding-block-end: var(--v2-gap-join); }

/* A quiet label. Navy at low opacity, NOT the accent: the accent is
   reserved for actions from here on. */
.rl-v2 .v2-label {
  display: block;
  font-family: var(--v2-font-body);
  font-size: var(--v2-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-bottom: 1.25rem;
}

/* ── Hero ─────────────────────────────────────────────────────────
   Navy, full bleed, asymmetric: text left at a controlled measure,
   product output right and large. The aligned marketing profile below
   shares a 640px desktop frame; other page families remain content-led. */
.rl-v2__hero {
  position: relative;
  background: var(--v2-ink);
  color: #fff;
  overflow: hidden;
}
/* NOTE THE DOUBLED PREFIX, and it is not redundant. `.rl-v2 section` above
   is (0,1,1); a bare `.rl-v2__hero` is (0,1,0) and LOSES to it, and the hero
   is a <section>. So the padding declared on .rl-v2__hero never applied at
   all — the hero silently took --v2-gap-section (9vw = 122.94px at 1366px)
   for the whole life of the v2 work. The documented trap, in its documented
   form: the edit appears to do nothing.

   Why it is changed: at 122.94px the client logo strip sat 46px BELOW the
   fold at 1366x768 — measured, and the worst possible position, present but
   unseen, so the proof never landed on the most common laptop viewport. A
   6rem ceiling brings it into view without touching the headline scale
   (Codex point 1, 29 September).

   Re-measure at 1366x768 after any change here, and measure the COMPUTED
   value, not the declared one. */
.rl-v2 section.rl-v2__hero {
  padding-block: clamp(4rem, 7vw, 6rem);
}
/* The image comes from the bg_image slot as an inline style, not from
   here. It was hardcoded to the homepage photograph while the hero existed
   only on one page; the component serves 17, and a background every page
   shares is not a component but a copy of the homepage. Omit the slot and
   the hero is plain navy, which is the right default for a page whose
   subject has no photograph. */
.rl-v2__hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 62%;
  opacity: 0.5;
}
/* Discoverable in HTML, with responsive delivery; preserve the approved crop. */
.rl-v2 .rl-v2__hero-bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
/* Scrim weighted left, so the headline always has contrast regardless
   of what the photograph is doing behind it. */
.rl-v2__hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(96deg,
    rgba(10,10,46,0.94) 0%, rgba(10,10,46,0.86) 34%,
    rgba(10,10,46,0.55) 66%, rgba(10,10,46,0.38) 100%);
}
.rl-v2__hero-inner { position: relative; z-index: 2; }
/* TWO COLUMNS WHEN THERE IS A FIGURE. The hero component sets --figure on
   the section when fig_src is present, so a hero with no visual does not
   leave an empty column.

   A `:has()` fallback sat here between 2 and 2 October for the homepage's
   own template, which predated the component and carried no modifier.
   Removed when the homepage converted: every hero on the site now comes
   from the component, so the modifier is always there when it should be. */
.rl-v2__hero--figure .rl-v2__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Without a figure the text runs to a readable measure rather than the
   full width. A 1400px line of 19px lead is unreadable, and a hero with no
   visual should still read as composed rather than as one missing its
   picture. */
.rl-v2__hero:not(.rl-v2__hero--figure) .rl-v2__hero-text { max-width: 46rem; }

/* Account brief: the named assets are the visual, before any product UI.
   This content-led profile is separate from the aligned marketing family.
   The identity has its own row. The wider headline and risk list then share
   a top edge; link padding provides the small optical inset on the right.
   Findings use the same columns, keeping a continuous page alignment. */
.rl-v2 section.rl-v2__hero[data-layout="brief"] { padding-block: var(--v2-gap-block); }
.rl-v2__hero--brief .rl-v2__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--v2-gap-block);
  align-items: start;
}
.rl-v2 .rl-v2__hero[data-layout="brief"] h1 { font-size: var(--v2-hero-display); text-wrap: balance; }
.rl-v2__hero-identity { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.rl-v2 .rl-v2__hero-identity .v2-label { margin: 0; }
.rl-v2__hero-client { display: inline-flex; align-items: center; flex-shrink: 0; padding: var(--space-1) var(--space-2); background: #fff; border-radius: 4px; color: var(--v2-ink); max-width: 50%; }
.rl-v2__hero-client img { display: block; width: auto; height: var(--space-4); max-width: 150px; object-fit: contain; }
.rl-v2 .rl-v2__hero-findings { list-style: none; padding: 0; margin: 0; }
.rl-v2__hero-findings li + li { border-top: 1px solid rgba(255,255,255,.2); }
.rl-v2 .rl-v2__hero-findings a {
  display: grid;
  grid-template-columns: var(--space-4) minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-2);
  color: var(--v2-paper);
  text-decoration: none;
}
.rl-v2 .rl-v2__hero-findings a:hover h2 { text-decoration: underline; text-underline-offset: var(--space-half); }
.rl-v2 .rl-v2__hero-findings a:focus-visible { outline: 2px solid currentColor; outline-offset: var(--space-half); }
.rl-v2 .rl-v2__hero-findings h2 { font-size: var(--v2-h3); color: inherit; line-height: 1.4; letter-spacing: normal; }
.rl-v2 .rl-v2__hero-findings p { margin: var(--space-1) 0 0; color: rgba(255,255,255,.72); font-size: var(--v2-small); }
.rl-v2__hero-finding-number {
  display: grid;
  place-items: center;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: 6px;
  background: var(--v2-paper);
  color: var(--v2-ink);
  font-family: var(--v2-font-display);
  font-size: var(--v2-h3);
  line-height: 1;
}
@media (max-width: 800px) {
  .rl-v2 section.rl-v2__hero[data-layout="brief"] { padding-block: var(--space-4); }
  .rl-v2__hero--brief .rl-v2__hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .rl-v2 .rl-v2__hero[data-layout="brief"] h1 { font-size: var(--v2-h2); }
  .rl-v2 .rl-v2__hero[data-layout="brief"] .rl-v2__hero-lead { font-size: var(--v2-body); }
  .rl-v2 .rl-v2__hero-findings a { padding-block: var(--space-2); }
}
@media (min-width: 601px) and (max-width: 800px) {
  .rl-v2 .rl-v2__hero[data-layout="brief"] h1 { font-size: var(--v2-hero-display); }
}

/* Co-branding chips: "Introduced by X / Prepared by RedLines", partner
   pages only. White chips on the navy ground, because a partner logo is
   whatever colours it is and needs a light field to sit on — the same
   reason the legacy partner pages use a fixed logo box. */
.rl-v2__hero-through {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  margin-top: 2rem;
}
.rl-v2__hero-through-group { display: flex; align-items: center; gap: 0.75rem; }
.rl-v2__hero-through-label {
  font-size: var(--v2-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.58 on navy, not lower: 0.45 measures 4.43:1 and fails AA at this
     size. Same correction the statement band and navy CTA carry. */
  color: rgba(255,255,255,0.58);
}
.rl-v2__hero-through-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 4px;
  padding: 0.5rem 0.75rem;
  height: 44px;
}
.rl-v2__hero-through-chip img {
  max-height: 26px; width: auto; max-width: 120px; object-fit: contain;
}

/* The note sits under the lead: a qualifier, smaller and quieter, but it
   must stay legible for the same reason the CTA band's note does. */
.rl-v2 .rl-v2__hero-note {
  font-size: var(--v2-small);
  color: rgba(255,255,255,0.72);
  margin-top: 0.85rem;
  max-width: 34rem;
}
.rl-v2__hero h1 { font-size: var(--v2-display); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   ARTICLE TITLES ARE PROSE, NOT HEADLINES.

   Added 15 October. The v2 review raises title dominance on fourteen of
   the twenty-seven articles, and the same sentence keeps appearing:
   "reduce title dominance", "the title still dominates despite being
   shorter than the longest entries", "prioritise title scale and
   measure". It names a shared treatment rather than per-article fixes,
   and the numbers say why.

   THE CAUSE. Articles render through v2/hero with an unclassed h1, so
   they take --v2-display: clamp(2.75rem, 5.2vw, 4rem). That scale was
   chosen for a hero headline of two lines, and the brief sets the hero
   geometry around "eyebrow + 2-line h1 + 4-line lead". These titles are
   attribution-study names and run to twenty-two words. Measured before
   this change, at 64px desktop and 44px phone:

       Iran / Euphrates-Tigris drought   21 words   470px  /  600px
       Sri Lanka / Malacca Strait        22 words   538px  /  600px
       Pakistan monsoon                  16 words   470px  /  508px
       England summer heat               12 words   269px  /  277px

   600px of heading on a 812px phone screen is the entire first view.

   THE FIX IS A SCALE, NOT A CAP. A max-height would clip a title and a
   line-clamp would hide words from a heading that is also the page's
   subject; the review is explicit about "preserving natural wrapping"
   and "without changing the article's qualifications". So only the type
   size changes. The measure was already right and is left alone:
   .rl-v2__hero-text caps the column at 736px, which at 64px set about 28
   characters a line and at 37px sets about 58, which is a reading
   measure. The review asks to "prioritise title scale and measure"; the
   scale was the half that was wrong.

   THE SHORT ONES STILL READ AS TITLES. The review singles out the
   England piece: "the relatively direct title works well. Preserve that
   balance." At 12 words it lands at 40px over two lines, which is still
   clearly the largest thing on the page, just no longer the only thing
   on the first screen.
   ══════════════════════════════════════════════════════════════════ */
.rl-v2.article-page .rl-v2__hero h1 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
/* The standfirst follows the title. .rl-v2__hero-lead is capped at 30rem
   for a hero, which beside a 46rem title read as a column that changed
   its mind halfway down. */
.rl-v2.article-page .rl-v2__hero-lead { max-width: 44rem; }
.rl-v2__hero .v2-label { color: rgba(255,255,255,0.62); }
/* The h1 has margin:0 from the shared heading rule, and GeneratePress
   gives p a bottom margin only, so the measured h1-to-lead gap was 0.
   Space it explicitly. */
.rl-v2 .rl-v2__hero-lead {
  font-size: var(--v2-lead);
  color: rgba(255,255,255,0.78);
  max-width: 30rem;
  margin-top: 1.75rem;
}
.rl-v2__hero-actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; margin-top: 2.5rem;
}
/* Shared desktop frame and title/action positions. The 16 October call
   replaces the reserved title area with the actual heading height: the
   subtitle follows each title by 1.5rem, while remaining space sits before
   the actions. Mobile stays natural; articles and forms remain separate. */
@media (min-width: 1101px) {
  .rl-v2 section.rl-v2__hero[data-layout="aligned"] {
    height: var(--v2-hero-height);
    padding-block: var(--v2-hero-padding);
    box-sizing: border-box;
  }
  .rl-v2__hero[data-layout="aligned"] .rl-v2__hero-text {
    display: grid;
    grid-template-rows: 2.5rem max-content minmax(0, 1fr) auto;
    height: calc(var(--v2-hero-height) - var(--v2-hero-padding) * 2);
  }
  .rl-v2__hero[data-layout="aligned"] h1 { font-size: var(--v2-hero-display); }
  .rl-v2__hero[data-layout="aligned"] .v2-label { margin-bottom: 0; }
  .rl-v2__hero[data-layout="aligned"] .rl-v2__hero-intro { margin-top: 1.5rem; }
  .rl-v2 .rl-v2__hero[data-layout="aligned"] .rl-v2__hero-lead {
    margin-top: 0;
    max-width: var(--v2-measure);
  }
  .rl-v2__hero[data-layout="aligned"] .rl-v2__hero-actions { margin-top: 1.5rem; }
}
@media (max-width: 1100px) {
  .rl-v2__hero[data-layout="aligned"] .rl-v2__hero-grid { grid-template-columns: 1fr; }
  .rl-v2__hero[data-layout="aligned"] .rl-v2__hero-text { max-width: 46rem; }
}

/* ══════════════════════════════════════════════════════════════════
   THE UTILITY HERO — /contact/ and /request-documents/.

   The v2 review, P2: "compact the Contact and Request Documents
   introductions. These are task pages; the current opening consumes too
   much space before the form", and per page, "establish a compact
   utility introduction shared with Request Documents" and "the large,
   mostly empty right side of the header consumes space before the form".

   Rule 20 already carves these out: "a form page should become more
   compact rather than inherit a large marketing hero", and the aligned
   contract above is opt-in for exactly that reason. But opting OUT only
   avoided the 640px frame; it left the base hero's marketing padding,
   clamp(4rem, 7vw, 6rem), top and bottom. Measured at 1440 before this:
   582px on /contact/ and 613px on /request-documents/, against the
   marketing family's 640. Barely a saving.

   Three changes, all of them about getting to the task:

     - padding roughly halves, which is the bulk of the height;
     - the text column takes the reading measure instead of running to
       the full wrap, which is what left "the large, mostly empty right
       side" the review describes. A one-sentence introduction set across
       1248px is a wide, thin band of text with nothing beside it;
     - the title drops to the section scale. A form page is not making a
       display statement, and at --v2-display it was the loudest thing on
       a page whose job is a text field.

   SHARED, not per page. The review asks for one treatment across both,
   and a second page-specific variant is how two pages that should match
   stop matching.
   ══════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__hero[data-layout="utility"] {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

/* ══════════════════════════════════════════════════════════════════
   THE ARTICLE MASTHEAD — a quiet text opening, no photograph.

   The v2 review, P3: "replace the repeated conference photograph with a
   quiet text masthead", and "long titles and a repeated conference
   photograph make the Insights collection harder to scan".

   With the photograph gone the navy ground is doing nothing but
   separating the header from the body, and at full marketing padding it
   separated them by a lot. An article opening should hand the reader to
   the first paragraph, so the padding roughly halves and the masthead
   sits on paper rather than navy: the body is already paper, so the
   article now reads as one page instead of a banner and a document.

   THE TITLE SCALE IS UNCHANGED. It was set on 15 October from measuring
   all 28 articles, where the longest ran to 605px desktop and 647px
   phone at the display scale; it is clamp(1.75rem, 2.6vw, 2.5rem) now
   and the review asks to keep natural wrapping, so nothing here touches
   it.
   ══════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__hero[data-layout="article"] {
  background: var(--v2-paper);
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-bottom: 1px solid var(--v2-rule);
}
/* THE SCRIM GOES TOO, and missing it the first time rendered navy text on
   a navy gradient: nearly unreadable, and the screenshot was the only
   thing that showed it. .rl-v2__hero::after paints a left-weighted navy
   wash so a headline keeps contrast over whatever the photograph is
   doing. With no photograph there is nothing to scrim, and it was simply
   covering the paper ground this rule sets. */
.rl-v2 .rl-v2__hero[data-layout="article"]::after { content: none; }
.rl-v2 .rl-v2__hero[data-layout="article"] h1 { color: var(--v2-ink); }
.rl-v2 .rl-v2__hero[data-layout="article"] .rl-v2__hero-lead {
  color: var(--v2-ink-quiet);
  font-size: var(--v2-small);
  letter-spacing: 0.02em;
  margin-top: 1rem;
}
.rl-v2 .rl-v2__hero[data-layout="article"] .rl-v2__hero-back {
  color: var(--v2-ink-quiet);
}
.rl-v2 .rl-v2__hero[data-layout="article"] .rl-v2__hero-back:hover {
  color: var(--v2-accent-text);
}
.rl-v2__hero[data-layout="utility"] .rl-v2__hero-text {
  max-width: 44rem;
}
.rl-v2 .rl-v2__hero[data-layout="utility"] h1 {
  font-size: var(--v2-h2);
  line-height: 1.15;
}
.rl-v2 .rl-v2__hero[data-layout="utility"] .rl-v2__hero-lead {
  max-width: var(--v2-measure);
  margin-top: 1rem;
}
.rl-v2__hero[data-layout="utility"] .rl-v2__hero-actions { margin-top: 1.75rem; }

/* One filled button. The secondary is a text link with a rule under it,
   not a second button competing for the same attention. */
.rl-v2__btn {
  display: inline-block;
  /* accent-mid, not accent-text: 4.55:1 behind white so it clears AA, while
     sitting closer to brand Red1 than the darker text colour does. Red1
     itself is 3.56:1 and cannot carry white button text. The #c02f25 hover
     below is darker again, so the interaction still reads. */
  background: var(--v2-accent-mid);
  color: #fff !important;
  font-family: var(--v2-font-body);
  font-size: var(--v2-body);
  font-weight: 500;
  padding: 0.9rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
}
.rl-v2__btn:hover { background: #c02f25; color: #fff; }
.rl-v2__btn--ghost {
  background: transparent; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  border-radius: 0; padding: 0.9rem 0.25rem;
}
.rl-v2__btn--ghost:hover { background: transparent; border-bottom-color: #fff; color: #fff; }
/* The base .rl-v2__btn sets color:#fff, but `.rl-v2 a { color: inherit }`
   is more specific in cascade order for a link inside a light section, so
   the ink variant rendered navy-on-navy and was invisible. State it. */
.rl-v2__btn--ink { background: var(--v2-ink); color: #fff; }
.rl-v2__btn--ink:hover { background: #16163f; color: #fff; }

/* Product figure: one thing, shown large, with a caption that says what
   it is. Replaces four miniature mock-ups. */
/* margin-inline:auto so a figure CAPPED below its column width (fig_max,
   see the note in v2/row.html) sits centred in the space rather than
   pinned to one edge. Uncapped figures fill the column, where auto
   margins resolve to zero and nothing changes. */
.rl-v2__figure { margin: 0 auto; }
/* Reserve the hero figure's grid-column width before its image loads.
   Auto margins otherwise let an intrinsically sized figure collapse during
   a cold load, despite the image/source dimension attributes. */
.rl-v2__hero-figure { width: 100%; min-width: 0; }

.rl-v2__figure img {
  display: block; width: 100%; height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.rl-v2__figcap {
  display: flex; gap: 0.75rem; align-items: baseline;
  margin-top: 0.85rem;
  font-size: var(--v2-small);
  color: rgba(255,255,255,0.68);
}
.rl-v2__figcap strong { color: rgba(255,255,255,0.9); font-weight: 500; }
.rl-v2__tag {
  /* Was a bordered capsule. Pills used as decoration are one of the tells
     Rob named, so this is now plain tracked text; the caption beside it
     already gives it context. */
  font-size: var(--v2-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}

/* ── Logo strip. Quiet, one line, no heading. ─────────────────────── */
/* A quiet line, not a section. The section rule gives every section
   var(--v2-gap-section) of padding, which made this 393px tall; override it. */
/* The hairline under the logo strip was decorative. The band below it is
   tinted, which already marks the change. */
.rl-v2 section.rl-v2__logos { padding-block: 2.5rem; }
.rl-v2__logos-wrap {
  width: calc(100% - 4rem); max-width: 1440px; margin-inline: auto;
  display: flex; align-items: center; gap: 2rem;
}
.rl-v2__logos-label {
  font-size: var(--v2-micro); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--v2-ink-soft); white-space: nowrap; flex: 0 0 auto;
  line-height: 1.5;
}
.rl-v2__logos-track {
  min-width: 0; flex: 1; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--v2-line) transparent;
}
.rl-v2__logos-track:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 5px; }
.rl-v2__logos-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 2.2vw, 2.5rem); flex-wrap: nowrap;
  width: max-content; min-width: 100%; padding-block: .5rem;
}
.rl-v2__logos img {
  flex: 0 0 auto; height: 26px; width: auto; max-width: 116px;
  object-fit: contain; opacity: 0.7; filter: grayscale(1);
}
@media (max-width: 1100px) {
  .rl-v2__logos-wrap { display: block; }
  .rl-v2__logos-label { display: block; margin-bottom: 1.25rem; }
  .rl-v2__logos-track { padding-bottom: .5rem; }
}
@media (max-width: 600px) {
  .rl-v2__logos-wrap { width: calc(100% - 2.5rem); }
  .rl-v2__logos-row { gap: 2rem; padding-right: 1rem; }
}
/* Logo rows never wrap. Narrow screens scroll within the strip, not the page. */
.rl-credibility > .rl-container { max-width: 1440px; }
.rl-credibility__logos {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
  overscroll-behavior-x: contain; scrollbar-width: thin; padding-block: .5rem;
}
.rl-credibility__logos img { flex: 0 0 auto; }
.rl-credibility__logos:focus-visible { outline: 2px solid var(--rl-navy, #07043b); outline-offset: 5px; }

/* ── Numbers. Orennia's move: statistics as the design element,
      immediately after the hero. RedLines has real ones. ─────────── */
/* Codex review point 5: this band had ~127px of padding top and bottom for
   four short facts. Compressed to about half, which still reads as a
   deliberate pause rather than a squeeze. */
.rl-v2 section.rl-v2__figures {
  background: var(--v2-paper-2);
  padding-block: clamp(3rem, 4.5vw, 4.25rem);
}
.rl-v2__figures-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.rl-v2 .v2-num {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  display: block;
}
.rl-v2__figure-item p {
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  margin-top: 0.6rem;
  max-width: 14rem;
}

/* ── Editorial rows. Asymmetric 55/45, alternating, no cards. ────── */
.rl-v2__row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.rl-v2__row + .rl-v2__row { padding-top: 0; }
.rl-v2__row--panel { background: var(--v2-panel); }
/* The flip swaps the two children with `order`, but ORDER DOES NOT MOVE THE
   COLUMN WIDTHS. The grid is 1fr / 1.15fr — text narrow, figure wide — so a
   flipped row put the figure in the 1fr column and it rendered 82px
   narrower than the figure in the row above it. Rob spotted the two
   product images were different sizes, 2 October.

   Swapping the template on the flipped row keeps the figure in the wide
   column either way, so consecutive rows show their images at the same
   size while still alternating sides. */
.rl-v2__row--flip .rl-v2__row-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.rl-v2__row--flip .rl-v2__row-grid > *:first-child { order: 2; }

/* EMPHASIS: a genuinely different composition, not the same one mirrored.
   Codex point 4, 2 October: the two product rows "repeat the text/image
   layout with the sides swapped. Give the mitigation example more width
   and a different composition to emphasise its importance."

   So the wide row stacks instead of splitting: text at a readable measure,
   then the figure full width beneath it. That roughly doubles the figure's
   area and changes the shape of the section, which is what signals that
   this one matters more.

   Only works if it is rare. If every row is wide, none is emphasised. */
.rl-v2__row--wide .rl-v2__row-grid {
  grid-template-columns: 1fr;
  gap: var(--v2-gap-block);
}
.rl-v2__row--wide .rl-v2__row-text { max-width: 44rem; }
/* AN INTERMEDIATE WIDTH, not the full wrap. Rob, 4 October: "the
   full-width treatment now overshoots". The matrix went 688px -> 1,266px
   and the bespoke diagram 558px -> 1,136px, which is dominant rather than
   prominent, and the figure's own internal heading started competing with
   the page heading above it.

   900px sits between the 629px split column, where these were unreadable,
   and the 1248px wrap, where they take over.

   LEFT-ALIGNED, not centred. Centring was the first attempt and it looked
   accidental on screen: the heading and paragraph start at the wrap edge,
   so a centred figure left a 170px gutter down its left side and read as
   an image that had failed to fill its container. Sharing the text's left
   edge makes the cap look chosen. */
.rl-v2__row--wide .rl-v2__figure {
  max-width: 900px;
}
/* The flip is meaningless once stacked: there are no columns to swap, and
   leaving order:2 would put the figure above its own heading. */
.rl-v2__row--wide.rl-v2__row--flip .rl-v2__row-grid > *:first-child { order: 0; }

/* TEXT-ONLY ROWS. v2/row already makes the figure conditional, but a row
   with no figure still sat in the 1fr column of a two-column grid, so the
   text occupied the left half and the right half was simply empty. It read
   as a failed image rather than a deliberate section.

   /climate-cost-attribution/ is the case that needs this: its first half is
   analysis of your own cost history against recorded weather, and NO render
   in the library shows that. Every one is a forward projection. Illustrating
   historical analysis with a projection would misrepresent the service, so
   that row carries its argument in words and this makes that look intended.

   Single column, text at a slightly wider measure than the split rows use
   (there is no figure competing for the eye, and 34rem of prose stranded in
   a 1248px section looks lost).

   SPECIFICITY: `.rl-v2__row p` above is (0,2,0), so the paragraph measure
   here must be written at (0,3,0) or it loses. This is the trap that caught
   the hero padding, the flipped columns and the mobile hero; see the note in
   the media query below. */
.rl-v2__row--text .rl-v2__row-grid { grid-template-columns: 1fr; }
.rl-v2__row--text .rl-v2__row-text { max-width: 52rem; }
.rl-v2__row--text .rl-v2__row-text p { max-width: 46rem; }
.rl-v2__row p { font-size: var(--v2-body); color: var(--v2-ink-soft); margin-top: 1.25rem; max-width: var(--v2-measure); }
/* Codex review, 2026-09-10, point 3. The figure defaults above are
   DARK-section styles (45%-black shadow, white caption) because the hero
   was written first. These light overrides were scoped to .rl-v2__row, so
   the proof section inherited a heavy grey shadow and an almost-white
   caption on white. Scope by SECTION TONE instead of by one section name,
   so any future light section is covered. */
.rl-v2__row .rl-v2__figure img,
.rl-v2__proof .rl-v2__figure img,
.rl-ds .rl-v2__figure img,
.rl-v2__figures .rl-v2__figure img,
.rl-v2__questions .rl-v2__figure img,
.rl-v2__close .rl-v2__figure img {
  box-shadow: 0 18px 40px rgba(10, 10, 46, 0.10);
  border: 1px solid var(--v2-rule);
}
.rl-v2__row .rl-v2__figcap,
.rl-v2__proof .rl-v2__figcap,
.rl-ds .rl-v2__figcap { color: var(--v2-ink-quiet); }
.rl-v2__row .rl-v2__figcap strong,
.rl-v2__proof .rl-v2__figcap strong,
.rl-ds .rl-v2__figcap strong { color: var(--v2-ink-soft); }
.rl-v2__row .rl-v2__tag,
.rl-v2__proof .rl-v2__tag,
.rl-ds .rl-v2__tag { color: var(--v2-ink-quiet); }
/* `.rl-v2 a { color: inherit }` was winning on cascade order (same
   specificity, declared later), so every text link rendered navy instead
   of the accent. Measured 2026-09-10.

   The accent is also darkened for TEXT use: #d93b30 on white is 4.5:1,
   which passes AA for large text but is marginal for a 16px link, and
   `npm run lighthouse` requires 100 on accessibility. #c0342a gives
   about 5.9:1 while reading as the same colour. */
/* Red text and link colour. 5.58:1 on white, 5.44:1 on paper, so it passes
   AA at body size where Red1 would not. Same hue family as Red1. */
.rl-v2 { --v2-accent-text: #c0342a; }
.rl-v2 a.rl-v2__link {
  display: inline-block; margin-top: 1.5rem;
  font-size: var(--v2-body); font-weight: 500;
  color: var(--v2-accent-text); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.rl-v2 a.rl-v2__link:hover { color: var(--v2-ink); }
.rl-v2__links { display: flex; flex-wrap: wrap; gap: 1.75rem; }

/* Featured case presented as facts rather than an irrelevant sample
   screenshot (Codex point 4). */
.rl-v2__facts { display: grid; gap: 2rem; margin: 0; }
.rl-v2__fact dt { line-height: 1; }
.rl-v2__fact dd {
  margin: 0.5rem 0 0;
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  max-width: 18rem;
}

/* A directional cue so the question rows read as clickable. */
.rl-v2__q-arrow { display: inline-block; transition: transform 0.15s; }
.rl-v2__q:hover .rl-v2__q-arrow { transform: translateX(3px); }

/* ── Proof. One featured case, two quieter. ──────────────────────── */
/* Section separators are space and tone, not hairlines. */
.rl-v2 section.rl-v2__proof {
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.rl-v2__proof-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: var(--v2-gap-block); }
.rl-v2__proof-head h2 { max-width: 40rem; }   /* room for the capability heading; size from the base scale */
.rl-v2__case-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-bottom: calc(var(--v2-gap-block) + 1rem); }
/* This slot now carries a phrase ("A three-year sourcing strategy"), not a
   numeral, after Codex point 4. Numeral sizing would set it enormous, so it
   is sized as a statement instead. The three supporting facts beside it keep
   the numeral treatment. */
.rl-v2__case-lead > div > .v2-num {
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  display: block;
  max-width: 100%;
  line-height: 1.15;
}
.rl-v2__facts .v2-num { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.rl-v2__case-lead p { font-size: var(--v2-lead); color: var(--v2-ink-soft); margin-top: 1.25rem; max-width: var(--v2-measure); }
.rl-v2__case-quiet { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-top: var(--v2-gap-block); }
.rl-v2__case-quiet .v2-num { font-size: 1.75rem; }
.rl-v2__case-quiet p { font-size: var(--v2-small); color: var(--v2-ink-soft); margin-top: 0.75rem; max-width: 26rem; }
.rl-v2__client { font-size: var(--v2-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-ink-quiet); display: block; margin-bottom: 0.75rem; }

/* ── Statement. One full-bleed navy moment, as a change of pace. ── */
.rl-v2__statement { background: var(--v2-ink); color: #fff; }
.rl-v2__statement-inner { max-width: 46rem; }
.rl-v2__statement h2 { color: #fff; }         /* size from the base scale */
.rl-v2__statement p { font-size: var(--v2-lead); color: rgba(255,255,255,0.72); margin-top: 1.5rem; }
/* 0.45 alpha on navy measured at 4.43:1, just under the 4.5 AA floor for
   12px text. 0.58 clears it and still reads as a recessive label. */
.rl-v2__statement .v2-label { color: rgba(255,255,255,0.58); }
.rl-v2__statement-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2.5rem; }

/* ── Questions. A quiet list, not five cards. ────────────────────── */
.rl-v2__qs-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__qs-head h2 { max-width: 30rem; }      /* size from the base scale */
/* Row rules stay: they separate list rows that would otherwise run
   together, which is a rule doing a job. The rule on top of the list was
   decorative, so it is gone. */
.rl-v2__qlist { }
.rl-v2__q {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem; align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--v2-rule);
  text-decoration: none;
  transition: padding-left 0.15s;
}
.rl-v2__q:hover { padding-left: 0.5rem; }
.rl-v2__q-text { font-family: var(--v2-font-display); font-size: var(--v2-h3); font-weight: var(--v2-w-medium); letter-spacing: -0.02em; }
.rl-v2__q-meta { font-size: var(--v2-small); color: var(--v2-ink-quiet); white-space: nowrap; }
/* Text, so it takes the text variant. --v2-accent is Red1 (3.47:1 on paper)
   and fails AA below large sizes; this line is small. */
.rl-v2__q:hover .rl-v2__q-meta { color: var(--v2-accent-text); }

/* ── Close ───────────────────────────────────────────────────────── */
.rl-v2 section.rl-v2__close {
  background: var(--v2-paper-2);
  padding-block: clamp(4rem, 6.5vw, 6rem);
}
.rl-v2__close-inner { max-width: 44rem; }
.rl-v2__close p { font-size: var(--v2-lead); color: var(--v2-ink-soft); margin-top: 1.25rem; }
/* The offer leads; the review and timing conditions sit quieter beneath it
   (Codex feedback). They must stay legible: they are the honest part. */
.rl-v2__close p.rl-v2__note {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: 0.85rem;
  max-width: 32rem;
}
.rl-v2__close-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-top: 2.5rem; }
/* .rl-v2__link carries margin-top for its in-body use, which pushed the
   secondary action 25px below the button's centre in these action rows.
   The margin is set by `.rl-v2 a.rl-v2__link`, so the override has to match
   that specificity (an earlier attempt at `.rl-v2__close-actions
   .rl-v2__link` lost and the misalignment stayed). */
.rl-v2 .rl-v2__close-actions a.rl-v2__link,
.rl-v2 .rl-v2__statement-actions a.rl-v2__link,
.rl-v2 .rl-v2__proof-head a.rl-v2__link { margin-top: 0; }
/* Section-level proof figure: full width, above the featured case, so it
   illustrates the analysis rather than claiming to be a client's data.
   Sits between the head (which has its own gap-block margin) and the case,
   so it only needs space beneath it.

   Cropped to 3:1 on 21 October following Rob and Polly's request for
   about 20?25% less photograph height. At 1248px wide this is 416px,
   down from 535px at 21:9. The 3:2 phone composition remains deeper
   so the vineyard context survives at a small width. */
.rl-v2 .rl-v2__proof-figure { margin: 0 0 var(--v2-gap-block); }
.rl-v2 .rl-v2__proof-figure img {
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: 50% 60%;
}
@media (max-width: 700px) {
  .rl-v2 .rl-v2__proof-figure img { aspect-ratio: 3 / 2; }
}

/* ── Responsive. Mobile gets its own composition, not a squeeze. ── */
@media (max-width: 1000px) {
  /* EVERY TWO-COLUMN GRID RESETS HERE, INCLUDING THE MODIFIED ONES.
     This is the third time the same specificity trap has bitten: a
     modifier like `.rl-v2__hero--figure .rl-v2__hero-grid` is (0,2,0) and
     beats the (0,1,0) selectors below at EVERY width, so the element
     stayed in two columns on a phone. Measured at 375px: the hero was
     155px of text beside a 148px image.

     The modifier selectors are listed explicitly rather than relying on
     the base ones, because a bare class will always lose to a modified
     one. Any new modifier that sets grid-template-columns must be added
     here at the same time, or it will do this again. */
  .rl-v2__hero-grid,
  .rl-v2__hero--figure .rl-v2__hero-grid,
  .rl-v2__row-grid,
  .rl-v2__case-lead { grid-template-columns: 1fr; }
  /* THE FLIPPED ROW NEEDS ITS COLUMNS RESET TOO, not just its order.
     `.rl-v2__row--flip .rl-v2__row-grid` is (0,2,0) and carries no media
     query, so it beat the (0,1,0) rule above at EVERY width: a flipped row
     stayed in two columns on a phone, at 162px and 141px, with its heading
     wrapping to five lines and the figure rendering 141px wide. Measured
     at 375px, 2 October. The order reset below was written at the same
     time as the bug and masked it, because the row looked deliberately
     ordered while being unusably narrow. */
  .rl-v2__row--flip .rl-v2__row-grid { grid-template-columns: 1fr; }
  .rl-v2__row--flip .rl-v2__row-grid > *:first-child { order: 0; }
  /* The report grid is NOT reset here, deliberately. It is defined at
     line ~9178, AFTER this block, so a reset written here loses to it on
     source order at equal specificity — adding it here looks like a fix
     and changes nothing. Its breakpoint lives with the component instead.
     See the note there. */
  /* --text is already single-column, so its grid needs nothing here. Its
     max-widths do: 52rem and 46rem are desktop measures and would simply
     overflow a 375px viewport if left to apply. Listed explicitly rather
     than relying on them being wider than the container, per the note
     above about bare classes losing to modified ones. */
  .rl-v2__row--text .rl-v2__row-text,
  .rl-v2__row--text .rl-v2__row-text p { max-width: 100%; }
  .rl-v2__figures-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .rl-v2__proof-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
@media (max-width: 620px) {
  .rl-v2__wrap,
  /* THE COPIES FOLLOW THE WRAP HERE TOO. Three places now reproduce
     .rl-v2__wrap's expression because it is declared inline with no
     token: the two utility form sections and the case-study index grid.
     Each was aligned at 1440, 1024 and 768 and then sat 4px out at 375,
     because only the original narrowed below 620. Listing them together
     is what stops the next copy missing it; a token would be better and
     is the real fix if a fourth appears. */
  .rl-v2 .contact-form-section .rl-section-inner,
  .rl-v2 .cs-grid-section .rl-section-inner { width: calc(100% - 2.5rem); }
  .rl-v2__case-quiet { grid-template-columns: 1fr; }
  .rl-v2__q { grid-template-columns: 1fr; gap: 0.5rem; }
  .rl-v2__hero-actions .rl-v2__btn { width: 100%; text-align: center; }
  .rl-v2__hero-actions .rl-v2__btn--ghost { width: auto; }

  /* ── Mobile rhythm ───────────────────────────────────────────────
     Codex point 5: "Reduce the empty space between product evidence and
     case studies. Keep generous spacing where it signals a genuinely new
     section."

     --v2-gap-section is clamp(5rem, 9vw, 8.5rem). At 375px, 9vw is 34px,
     so the clamp never engages and the 5rem FLOOR sets every gap: 80px
     above and 80px below, meaning 160px of empty space between any two
     sections regardless of whether the subject changed. On a 375px screen
     that is nearly half a viewport of nothing.

     Desktop is untouched. There the 9vw term is live (130px at 1440) and
     the uneven rhythm is the design.

     The principle, kept from the token file: the gap before a major
     statement is larger than the gap between related items. So the pairs
     that continue a thought tighten, and the two places where the page
     genuinely turns keep their air. */

  /* Related, so they close up: the figures belong to the hero's claim,
     and the second product row continues the first. */
  .rl-v2 section.rl-v2__figures { padding-block: 2.25rem; }
  .rl-v2 section.rl-v2__row     { padding-block: 3.25rem; }
  /* Restores `.rl-v2__row + .rl-v2__row { padding-top: 0 }` from the base
     block, which the rule above outranks. Two consecutive rows are one
     argument in two parts: a gap between them would read as a section
     break that is not there. Measured: without this the second row gained
     52px of top padding and the pair fell apart.

     THIS PREDATES CHAPTERS and guesses at what they now state. It joins
     ANY two adjacent rows, which is right by luck where the rows continue
     one demonstration and wrong where a new subject happens to follow a
     row. Where a chapter IS declared the rules below take over, so this
     only governs rows that have not been grouped. */
  .rl-v2 section.rl-v2__row + section.rl-v2__row { padding-top: 0; }

  /* CHAPTERS AT MOBILE WIDTHS. These repeat here rather than relying on
     the base block because the per-component rules above are (0,2,1) and
     sit LATER in the file: at equal specificity the later rule wins
     whatever the media query says, so the base chapter rules were being
     overwritten to a flat 3.25rem on every side. The trap this file has
     fallen into four times.

     The ratio is kept, scaled down: the join is about a third of the
     section gap at this width, as it is on desktop. */
  .rl-v2 section[data-chapter="start"],
  section.rl-v2[data-chapter="start"] { padding-block: 3.25rem 1.25rem; }
  .rl-v2 section[data-chapter="mid"],
  section.rl-v2[data-chapter="mid"]   { padding-block: 1.25rem; }
  .rl-v2 section[data-chapter="end"],
  section.rl-v2[data-chapter="end"]   { padding-block: 1.25rem 3.25rem; }

  /* The product evidence to case studies joint Codex named. The proof
     section follows the rows as more of the same argument, so the seam
     does not need announcing; its own heading does that. */
  .rl-v2 section.rl-v2__proof   { padding-block: 3.25rem; }

  /* These two DO signal a new section and keep their space:
     - statement: the page changes audience here, from buyer to partner
     - close:     the final ask, which should not feel crowded
     Both are also full-bleed colour changes, so the space reads as
     deliberate rather than accidental. */
  .rl-v2 section.rl-v2__statement { padding-block: 4rem; }
  .rl-v2 section.rl-v2__close     { padding-block: 3.75rem; }

  /* Questions sit between the two, so it takes the middle value. */
  .rl-v2 section.rl-v2__questions { padding-block: 3.5rem; }
}

/* ── Blocks ───────────────────────────────────────────────────────
   A heading, then a set of titled blocks. Replaces context/default and
   gap/default, which were the same shape with different cardinality.

   A rule above each block rather than a border around it, and no icons:
   the heading does the work, and a decorative glyph above it competes for
   the first glance.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2__blocks-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__blocks-head h2 { max-width: 30rem; }
/* DOUBLED PREFIX: `.rl-v2 p` is (0,1,1) and sets margin and line-height. */
.rl-v2 .rl-v2__blocks-sub {
  font-size: var(--v2-lead);
  color: var(--v2-ink-soft);
  margin-top: 1.25rem;
  max-width: var(--v2-measure);
}
.rl-v2__blocks-grid {
  display: grid;
  /* auto-fit rather than a fixed count, so two blocks and three blocks
     both fill the row without the manifest declaring which it is. 18rem
     is the width below which the body text starts setting badly. */
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.rl-v2__block { border-top: 2px solid var(--v2-ink); padding-top: 1.25rem; }
.rl-v2 .rl-v2__block-h3 { margin: 0; }
.rl-v2 .rl-v2__block-body {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  margin-top: 0.75rem;
  line-height: 1.65;
}
/* The optional per-block link, styled as the inline links elsewhere in
   v2: accent text with an underline, because colour alone does not
   distinguish a link and the lighthouse gate checks that. */
.rl-v2 .rl-v2__block-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: var(--v2-small);
  color: var(--v2-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Optional evidence beneath a business summary. Shared by account
   blueprints; the block still uses the standard body and heading scale. */
.rl-v2 .rl-v2__block-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-size: var(--v2-small);
}
.rl-v2__block-sources a { color: var(--v2-ink-soft); text-underline-offset: 3px; }
.blueprint-page section.rl-v2__blocks[data-chapter="mid"] { background: var(--v2-panel); }

/* Numbered benefits, requested 19 October. The markers replace the rules
   and aid scanning; they do not imply a sequence of process steps. */
.rl-v2__blocks[data-layout="numbered"] .rl-v2__block {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  align-content: start;
  border: 0;
  padding: 0;
}
.rl-v2__block-number {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-family: var(--v2-font-display);
  font-size: var(--v2-h2);
  font-weight: var(--v2-w-display);
  line-height: 1;
  color: var(--v2-ink);
}
.rl-v2__blocks[data-layout="numbered"] :is(.rl-v2__block-h3, .rl-v2__block-body, .rl-v2__block-link) { grid-column: 2; }
.rl-v2 .rl-v2__blocks[data-layout="numbered"] .rl-v2__block-body { margin: 0; }
@media (min-width: 901px) {
  .rl-v2__blocks[data-layout="numbered"] .rl-v2__block {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}
@media (max-width: 900px) {
  .rl-v2__blocks[data-layout="numbered"] .rl-v2__blocks-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.rl-v2 .rl-v2__blocks-note {
  grid-column: 1 / -1;
  margin-top: var(--v2-gap-block);
  max-width: 50rem;
  color: var(--v2-ink-soft);
  font-size: var(--v2-body);
}

/* Editorial blocks: the section premise beside a compact stack of
   benefits. An opt-in layout, not a new page-specific component. */
.rl-v2__blocks:is([data-layout="editorial"], [data-layout="editorial-open"]) .rl-v2__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Open editorial benefits retain the shared columns without stacked panels. */
.rl-v2 .rl-v2__blocks[data-layout="editorial-open"] .rl-v2__blocks-grid { row-gap: 2rem; }
.rl-v2 .rl-v2__blocks[data-layout="editorial-open"] .rl-v2__block { background: none; border: 0; padding: 0; }

.rl-v2__blocks:is([data-layout="editorial"], [data-layout="editorial-open"]) .rl-v2__blocks-head { margin-bottom: 0; }
.rl-v2__blocks:is([data-layout="editorial"], [data-layout="editorial-open"]) .rl-v2__blocks-grid { grid-template-columns: 1fr; gap: 1rem; }
.rl-v2__blocks:is([data-layout="editorial"], [data-layout="editorial-open"]) .rl-v2__block {
  border-top: 0;
  border-left: 2px solid var(--v2-ink-faint);
  padding: 1.5rem;
  background: var(--v2-panel);
}
@media (max-width: 900px) {
  .rl-v2__blocks:is([data-layout="editorial"], [data-layout="editorial-open"]) .rl-v2__wrap { grid-template-columns: 1fr; }
}

/* ── Shared case cards (16 October call) ────────────────────────────
   One partial for compact Home cases, the index and related work. The
   landscape variant uses the same identity, copy, facts and link slots. */
.rl-v2__case-cards-head { margin-bottom: 2rem; }
.rl-v2__case-cards-head h2 { max-width: 48rem; }
.rl-v2 .rl-v2__case-cards-head p { margin-top: 1rem; color: var(--v2-ink-soft); }
.rl-v2__case-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.rl-v2__case-cards-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-v2__case-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--v2-panel-raised);
  border: 1px solid var(--v2-rule);
  border-radius: var(--v2-panel-radius);
  box-shadow: var(--v2-panel-shadow);
  overflow: hidden;
  transition: box-shadow 160ms, border-color 160ms;
}
.rl-v2__case-card:has(a):hover { border-color: var(--v2-ink-faint); box-shadow: 0 0.5rem 1.5rem rgba(1,0,61,0.1); }
.rl-v2__case-card:focus-within { outline: 2px solid var(--v2-ink); outline-offset: 3px; }
.rl-v2__case-card-image { display: block; width: 100%; height: 12rem; object-fit: cover; }
.rl-v2__case-card-content { display: flex; flex-direction: column; flex: 1; padding: clamp(1.5rem, 2.5vw, 2rem); }
.rl-v2__case-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2rem; margin-bottom: 1.25rem; }
.rl-v2 .rl-v2__case-card-meta .v2-label { margin: 0; }
.rl-v2__case-card-logo { height: 2rem; width: auto; max-width: 9rem; object-fit: contain; }
.rl-v2 .rl-v2__case-card h3 { font-size: 1.5rem; margin: 0; }
.rl-v2 .rl-v2__case-card-body { margin-top: 1rem; font-size: var(--v2-body); line-height: 1.65; color: var(--v2-ink-soft); }
.rl-v2__case-card-facts { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--v2-rule); }
.rl-v2__case-card-facts > div { flex: 1 1 7rem; }
.rl-v2__case-card-facts dt { font-family: var(--v2-font-display); font-size: 1.5rem; font-weight: var(--v2-w-medium); }
.rl-v2__case-card-facts dd { margin: 0.4rem 0 0; font-size: var(--v2-small); color: var(--v2-ink-soft); line-height: 1.5; }
.rl-v2 .rl-v2__case-card-link { display: block; align-self: flex-start; margin-top: auto; padding-top: 1.5rem; color: var(--v2-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.rl-v2__case-card-link::after { content: ""; position: absolute; inset: 0; }
.rl-v2__case-cards--single .rl-v2__case-cards-grid { grid-template-columns: 1fr; }
.rl-v2__case-cards--single .rl-v2__case-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.rl-v2__case-cards--single .rl-v2__case-card-image { height: 100%; min-height: 20rem; }
.rl-v2__proof-related { margin-top: 2rem; }
.rl-v2__case-lead-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.rl-v2__case-lead-identity img { height: 2.75rem; width: auto; max-width: 12rem; object-fit: contain; }
.rl-v2 .rl-v2__case-lead-identity .rl-v2__client { margin: 0; }
.rl-v2 .rl-v2__proof-intro { max-width: 48rem; margin-bottom: 2rem; color: var(--v2-ink-soft); font-size: var(--v2-lead); }
.rl-v2__case-meta-logo { height: 2.75rem; width: auto; max-width: 13rem; object-fit: contain; margin-bottom: 1.5rem; }
@media (max-width: 1000px) {
  .rl-v2__case-cards-grid[data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .rl-v2__case-cards-grid,
  .rl-v2__case-cards-grid[data-columns="3"],
  .rl-v2__case-cards--single .rl-v2__case-card { grid-template-columns: 1fr; }
  .rl-v2__case-cards--single .rl-v2__case-card-image { min-height: 0; height: 12rem; }
}
@media (prefers-reduced-motion: reduce) { .rl-v2__case-card { transition: none; } }

/* ── Proof panel ──────────────────────────────────────────────────
   One engagement, as figures rather than a sentence. The quiet
   credibility-line is right for a passing reference and wrong for the one
   piece of proof a page needs a reader to stop at.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2__proof-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* CENTRED, not top-aligned. A review, 2 October: "the current tall left
     column leaves a lot of unused space below the figures." Measured: the
     left column ran 364px against 122px of figures, so 243px sat empty
     under them. Centring puts the figures against the middle of the text
     rather than hanging from its top. */
  align-items: center;
}
/* The client should be the prominent thing, not a four-line headline.
   Narrower measure forces the heading shorter, and the label above it
   carries the client name on pages that name one. */
.rl-v2__proof-panel-head h2 { max-width: 20rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* DOUBLED PREFIX: `.rl-v2 p` is (0,1,1) and sets margin and line-height. */
.rl-v2 .rl-v2__proof-panel-body {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  margin-top: 1.25rem;
  line-height: 1.65;
  max-width: var(--v2-measure);
}
.rl-v2 .rl-v2__proof-panel-head a.rl-v2__link { margin-top: 1.5rem; }
/* Three figures in a row, each with the line that stops it being
   decoration. A rule above rather than a box around. */
.rl-v2__proof-panel-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
}
.rl-v2__proof-panel-figure {
  border-top: 2px solid var(--v2-ink);
  padding-top: 1rem;
}
.rl-v2__proof-panel-figure dt { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1; }
.rl-v2__proof-panel-figure dd {
  margin: 0.6rem 0 0;
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  line-height: 1.5;
}
@media (max-width: 860px) {
  .rl-v2__proof-panel-inner { grid-template-columns: 1fr; }
  /* Once the title row wraps, the identity is on its own line, so
     space-between leaves it stranded mid-column. Left-align it with the
     heading above it instead. */
  .rl-v2__proof-panel-titlerow { justify-content: flex-start; }
  .rl-v2 .rl-v2__proof-identity-text { text-align: left; }
}

/* ── Progression ──────────────────────────────────────────────────
   The buying ladder: free screening, Scan, Pro. Rendered on ten pages
   from rl_offer_progression(), so this is a high-leverage block.

   Numbered, because the order is the argument — each rung costs more and
   tells you more. Columns at wide widths, rows at narrow, never bordered
   boxes: three rungs of visibly different value should not be drawn as
   three identical containers.
   ═════════════════════════════════════════════════════════════════ */
/* SUPPORTING SECTIONS TAKE LESS AIR THAN THE ARGUMENT. A review, 2
   October: "tighten the large gaps around the differentiation section and
   the transition from sectors to the journey. Keep breathing room around
   the important figures; the spacing needn't give every supporting section
   the same prominence."

   Right: --v2-gap-section gave blocks, report, chips and progression the
   same 129.6px at 1440 as the product rows, so a sector list was framed as
   weightily as the thing the page exists to show. These four are
   supporting material and now read as it. The rows, the hero and the
   closing ask keep the full gap. */
.rl-v2 section.rl-v2__progression,
.rl-v2 section.rl-v2__blocks { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.rl-v2 section.rl-v2__report  { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
/* THESE THREE MUST STILL YIELD TO A CHAPTER, and until 15 October they
   did not. The chapter rules are (0,2,1) and so are these, but these are
   declared later, so a .rl-v2__blocks carrying data-chapter="start" kept
   its own padding on both sides and sat outside the group it was meant
   to open. Found on /climate-analytics-partnership/, where the "what you
   get" chapter had a full gap in the middle of it.

   Restating the chapter joins here, after the rules that were beating
   them, is the narrowest fix. Any future per-section padding rule added
   below this point needs the same treatment or it will do this again. */
.rl-v2 section.rl-v2__progression[data-chapter="mid"],
.rl-v2 section.rl-v2__blocks[data-chapter="mid"],
.rl-v2 section.rl-v2__report[data-chapter="mid"],
.rl-v2 section.rl-v2__progression[data-chapter="end"],
.rl-v2 section.rl-v2__blocks[data-chapter="end"],
.rl-v2 section.rl-v2__report[data-chapter="end"] { padding-block-start: var(--v2-gap-join); }
.rl-v2 section.rl-v2__progression[data-chapter="mid"],
.rl-v2 section.rl-v2__blocks[data-chapter="mid"],
.rl-v2 section.rl-v2__report[data-chapter="mid"],
.rl-v2 section.rl-v2__progression[data-chapter="start"],
.rl-v2 section.rl-v2__blocks[data-chapter="start"],
.rl-v2 section.rl-v2__report[data-chapter="start"] { padding-block-end: var(--v2-gap-join); }

.rl-v2 section.rl-v2__progression { background: var(--v2-paper-2); }
/* ONWARD TONE: the ladder as a footer, not a final argument. On
   /free-screening/ this strip follows the request form, so a full section
   heading there starts a new topic at the exact moment the page has
   finished. Heading at label size, padding halved. Both selector forms
   for the island case; see the chapter note above. */
.rl-v2 section.rl-v2__progression--onward,
section.rl-v2.rl-v2__progression--onward { padding-block: var(--v2-gap-join); }
.rl-v2__progression--onward .rl-v2__progression-head { margin-bottom: 1.75rem; }
.rl-v2 .rl-v2__progression--onward h2 {
  font-size: var(--v2-h3);
  font-weight: var(--v2-w-medium);
  color: var(--v2-ink-soft);
  max-width: 40rem;
}
.rl-v2__progression-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__progression-head h2 { max-width: 30rem; }
.rl-v2__progression-track {
  list-style: none; margin: 0; padding: 0;
  counter-reset: rl-rung;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.rl-v2__progression-step { counter-increment: rl-rung; }
.rl-v2 .rl-v2__progression-step > a {
  display: block;
  text-decoration: none;
  border-top: 2px solid var(--v2-rule);
  padding-top: 1.25rem;
  transition: border-color 0.15s;
}
.rl-v2 .rl-v2__progression-step > a:hover { border-top-color: var(--v2-ink); }
.rl-v2__progression-step > a::before {
  content: counter(rl-rung);
  display: block;
  font-family: var(--v2-font-display);
  font-weight: var(--v2-w-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  /* ink-QUIET, not faint: a numeral is text. Faint is 2.30:1 on paper-2
     and fails even the 3:1 large-text floor. Same as steps and outcomes. */
  color: var(--v2-ink-quiet);
  margin-bottom: 0.85rem;
}
.rl-v2__progression-name {
  display: block;
  font-family: var(--v2-font-display);
  font-size: var(--v2-h3);
  font-weight: var(--v2-w-medium);
  letter-spacing: -0.02em;
  color: var(--v2-ink);
}
.rl-v2__progression-desc {
  display: block;
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  line-height: 1.6;
  margin-top: 0.5rem;
}
/* WHERE YOU ARE. A solid ink rule and the accent on the name: the reader
   should see Scan's place in the sequence while reading the Scan page, so
   the current rung is marked as present rather than removed or disabled.
   It stays a link — re-reading the page you are on is harmless, and
   dropping the href leaves a hole in the row. */
.rl-v2 .rl-v2__progression-step--current > a { border-top-color: var(--v2-ink); }
.rl-v2__progression-step--current .rl-v2__progression-name { color: var(--v2-accent-text); }

@media (max-width: 760px) {
  /* Rows rather than columns: three columns at 375px gives each rung about
     100px, which is narrower than its own name. */
  .rl-v2__progression-track { grid-template-columns: 1fr; gap: 0; }
  .rl-v2 .rl-v2__progression-step > a {
    border-top-width: 1px;
    padding-block: 1.25rem;
  }
  .rl-v2 .rl-v2__progression-step--current > a { border-top-width: 2px; }
  .rl-v2__progression-track > :last-child > a { border-bottom: 1px solid var(--v2-rule); }
  /* The number moves inline with the name, so a rung is one line plus its
     description rather than three stacked fragments. */
  .rl-v2__progression-step > a::before {
    display: inline-block;
    margin: 0 0.75rem 0 0;
    font-size: var(--v2-body);
  }
  .rl-v2__progression-name { display: inline; }
}

/* ── Report ───────────────────────────────────────────────────────
   The deliverable, offered as a document. Navy, because it is the
   decision pages' one full-bleed moment and their second ask after the
   hero — the same role the partner statement plays on the homepage.

   No document icon: the legacy version drew a bordered card with a page
   glyph inside it, which is a picture of a PDF rather than the PDF.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__report { background: var(--v2-ink); color: #fff; }
.rl-v2__report .v2-label { color: rgba(255,255,255,0.58); }
.rl-v2__report h2 { color: #fff; max-width: 22rem; }
.rl-v2__report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: var(--v2-gap-block);
}
/* THE BREAKPOINT LIVES HERE, not in the 1000px block at ~8879 with the
   other grids. That block is EARLIER in the file, and at equal specificity
   the later rule wins no matter what a media query says — so a reset
   written up there is silently dead. It was: added, measured, still 152px.

   Without this the report ran two 152px columns on a 375px phone, turning
   headings, body and the CTA button into vertical strips. It shipped that
   way on asset-resilience, supplier-resilience, corporate-exposure and
   climate-cost-attribution; Portfolio Exposure escaped only because its
   "What arrives" section uses v2/row instead. Found in review, 3 October.

   npm run sitecheck now fails any v2 grid that stays multi-column at
   375px, so the next one is caught by a gate rather than by eye. */
@media (max-width: 1000px) {
  .rl-v2__report-grid { grid-template-columns: 1fr; }
}
/* DOUBLED PREFIX: `.rl-v2 p` is (0,1,1) and sets margin and line-height. */
.rl-v2 .rl-v2__report-body {
  font-size: var(--v2-body);
  color: rgba(255,255,255,0.78);
  margin-top: 1.25rem;
  line-height: 1.65;
}
/* The "or run it yourself" line, under the actions. Quieter than the body
   because it is an aside about a different way of buying, not part of the
   description of what arrives. 0.68 on this navy clears AA for small
   text; the lighthouse gate checks it. */
.rl-v2 .rl-v2__report-self {
  font-size: var(--v2-small);
  color: rgba(255,255,255,0.68);
  margin-top: 1.5rem;
  line-height: 1.6;
  max-width: 34rem;
}
.rl-v2 .rl-v2__report-self a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rl-v2__report-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem; margin-top: 2rem;
}
/* The tool this report comes out of. A quiet link, not a second button:
   the download is the action here. */
.rl-v2 a.rl-v2__report-tool {
  font-size: var(--v2-small);
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.rl-v2 a.rl-v2__report-tool:hover { color: #fff; border-bottom-color: #fff; }
/* What makes it defensible. The argument, not a feature list. */
.rl-v2__report-list { list-style: none; margin: 0; padding: 0; }
.rl-v2__report-list li {
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255,255,255,0.16);
  font-size: var(--v2-small);
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}
.rl-v2__report-list > :last-child { border-bottom: 1px solid rgba(255,255,255,0.16); }

/* ── Chips ────────────────────────────────────────────────────────
   A label and a row of short terms. NOT pills: nothing here is clickable,
   and a bordered capsule implies it is. Space separates them.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__chips {
  background: var(--v2-paper-2);
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
}
.rl-v2__chips-inner {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.75rem 2.5rem;
}
/* The label sits inline with the terms rather than above them, so the
   whole thing reads as one line. Its default bottom margin would break
   that alignment. */
.rl-v2 .rl-v2__chips-inner .v2-label { margin-bottom: 0; }
.rl-v2__chips-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
}
.rl-v2__chips-list li {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
}

/* ── Case study family ────────────────────────────────────────────
   Four components: the hero's back link, the meta line, and the case
   section that replaces cs-challenge, cs-solution and cs-outcomes.

   The legacy cs-outcome-card is one of the three selectors failing
   npm run lighthouse on contrast, a carried blocker in CLAUDE.md. This
   family replaces it rather than patching it.
   ═════════════════════════════════════════════════════════════════ */

/* The way back to the index. White on the navy hero, quiet until hovered:
   it is an escape hatch, not a call to action. */
.rl-v2 a.rl-v2__hero-back {
  display: inline-block;
  font-size: var(--v2-small);
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  margin-bottom: 1.25rem;
  transition: color 0.15s;
}
.rl-v2 a.rl-v2__hero-back:hover { color: #fff; }

/* The facts, in one line. Space separates the cells; the label above each
   value does the grouping, so no borders are needed. */
.rl-v2 section.rl-v2__case-meta {
  background: var(--v2-paper-2);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.rl-v2__case-meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin: 0;
}
/* TWO BY TWO AT TABLET, not three with a straggler. The v2 review on the
   full case pages: "at tablet width, make the four engagement details a
   deliberate two-by-two group instead of three columns with an orphaned
   fourth item."

   auto-fit with an 11rem minimum fits exactly three columns in the
   tablet width available, and the list always holds exactly four items,
   so the fourth dropped to a row of its own on all five case pages. A
   lone item under a full row reads as something left over rather than
   the fourth of four. Measured at 768 before this change: columns 3,
   rows 2, items per row [3, 1].

   Explicit rather than a different minmax, because the count is known:
   this list is four engagement facts, not an arbitrary collection.

   THE LOWER BOUND IS 601px, NOT 701. The first version stopped at 701 on
   the assumption that something below took over, and 700px then measured
   [3, 1] in the one-pixel-wide gap that left. Checked at nine widths
   rather than two, which is the only way that shows up: 1440 [4], 901
   [4], 900 [2,2], 800 [2,2], 701 [2,2], 700 [3,1], 600 [2,2], 375 all
   stacked. Below 601 the column is narrow enough that auto-fit gives two
   on its own. */
@media (min-width: 601px) and (max-width: 900px) {
  .rl-v2__case-meta-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rl-v2__case-meta-item dt {
  font-size: var(--v2-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-ink-quiet);
  margin-bottom: 0.35rem;
}
.rl-v2__case-meta-item dd {
  margin: 0;
  font-size: var(--v2-body);
  color: var(--v2-ink);
}

/* One movement of the narrative. The grid is asymmetric when something
   sits beside the text and a single measured column when nothing does. */
.rl-v2__case-sec h2 { max-width: 34rem; margin-bottom: var(--v2-gap-block); }
.rl-v2__case-sec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
/* `:has()` rather than a modifier class, because the template already
   decides by which slot is filled and a second signal could disagree with
   the first. A section with only text gets one readable column. */
/* .rl-v2__case-fig LEFT THIS LIST on 14 October: the figure now renders
   ABOVE the grid rather than inside it, so a section whose only extra is
   a context photograph should still collapse to one readable text column
   rather than reserving an empty second one. */
.rl-v2__case-sec-grid:not(:has(.rl-v2__case-stat, .rl-v2__case-outcomes, .rl-v2__case-labelled)) {
  grid-template-columns: 1fr;
}
/* THE OPENING CONTEXT PHOTOGRAPH: full measure, above the text, and
   CROPPED SHALLOW rather than shrunk.

   The v2 review, 15 October: "two large contextual photographs add too
   much scrolling before and between the evidence. Retain one
   well-scaled vineyard image; let the findings lead", and on the
   homepage feature, "a featured case should feel substantial because the
   evidence is prominent, not because the photograph is enormous".

   Measured at 1440 before this change: every case photograph rendered
   960x600, which is 67% of the viewport height, so a reader met two
   thirds of a screen of scenery before the first finding.

   WHY A CROP AND NOT A SMALLER IMAGE. These are 16:10 files shared with
   the figure family, and narrowing the column would have left the
   photograph floating in white with the text beside it unchanged, which
   reads as a mistake rather than a decision. A shallower frame keeps the
   image at full measure, so it still opens the page with authority, and
   gives back the height. 21:9 at 960px is 411px, about 46% of the
   viewport: present, not dominant.

   object-position favours the upper middle, because these are landscapes
   and horizons: a centre crop on a 21:9 window of a 16:10 field tends to
   cut the sky and keep the foreground, which is the least informative
   half. Checked by eye on all five rather than assumed.

   THE RATIO IS NOT UNIVERSAL. The design brief, section 12: "images do
   not all need identical pixel dimensions... consistency means a defined
   treatment within each component". This is the case-page context
   treatment; product renders keep 16:10, which is what sitecheck
   enforces on them. */
.rl-v2__case-fig {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 60rem;
}
.rl-v2__case-fig img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 42%;
}
/* On a phone the column is already narrow, so the same ratio would make
   a letterbox strip. 3:2 keeps the subject legible at 335px. */
@media (max-width: 700px) {
  .rl-v2__case-fig img { aspect-ratio: 3 / 2; }
}
/* INK CAPTIONS ON A LIGHT GROUND. .rl-v2__figcap is white at 68% because
   it was written for figures on the navy hero and navy sections; on a
   light case section that is 1.6:1 and Lighthouse failed
   /case-studies/mondelez/ at 96 the moment these photographs were added.
   The design system already carries the same override for .rl-ds.
   A navy case section keeps the white treatment, which is why this is
   scoped to the light one rather than applied to the component. */
.rl-v2__case-sec:not(.rl-v2__case-sec--navy) .rl-v2__figcap { color: var(--v2-ink-quiet); }
.rl-v2__case-sec:not(.rl-v2__case-sec--navy) .rl-v2__figcap strong { color: var(--v2-ink-soft); }
.rl-v2__case-sec:not(.rl-v2__case-sec--navy) .rl-v2__tag { color: var(--v2-ink-quiet); }
.rl-v2__case-sec-text { max-width: 44rem; }
/* DOUBLED PREFIX: `.rl-v2 p` is (0,1,1) and sets margin and line-height. */
.rl-v2 .rl-v2__case-sec-text p {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  line-height: 1.7;
}
.rl-v2 .rl-v2__case-sec-text p + p { margin-top: 1.25rem; }

/* Parallel solution points fill the section, while each paragraph keeps
   a short measure. Other case sections retain the prose layout above. */
.rl-v2__case-sec-text:has(.rl-v2__case-points) { max-width: none; }
.rl-v2__case-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rl-v2__case-points > li { border-top: 1px solid var(--v2-rule); padding-top: 1.25rem; }
.rl-v2 .rl-v2__case-points h3 { margin: 0; }
.rl-v2 .rl-v2__case-points p { margin-top: 0.75rem; }
@media (max-width: 1100px) {
  .rl-v2__case-points { grid-template-columns: 1fr; max-width: 44rem; }
}

/* The scale of the problem, beside the challenge. */
.rl-v2__case-stat { border-top: 2px solid var(--v2-ink); padding-top: 1.25rem; }
.rl-v2__case-stat .v2-num { font-size: clamp(2.5rem, 4.5vw, 3.5rem); }
.rl-v2 .rl-v2__case-stat p {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: 0.5rem;
}

/* What changed. Numbered rows, not cards: a one-line outcome and a
   three-line one are not equally weighty and boxes make them look it. */
.rl-v2__case-outcomes {
  list-style: none; margin: 0; padding: 0;
  counter-reset: rl-outcome;
}
.rl-v2__case-outcomes li {
  counter-increment: rl-outcome;
  display: grid; grid-template-columns: 2rem 1fr; gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--v2-rule);
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  line-height: 1.6;
}
.rl-v2__case-outcomes > :last-child { border-bottom: 1px solid var(--v2-rule); }
.rl-v2__case-outcomes li::before {
  content: counter(rl-outcome);
  font-family: var(--v2-font-display);
  font-weight: var(--v2-w-display);
  /* ink-QUIET, not faint: a numeral is text. Faint measures 2.30:1 and
     fails even the 3:1 large-text floor. Same correction as steps. */
  color: var(--v2-ink-quiet);
}

/* Labelled outcomes, where the results are different KINDS rather than
   steps in a sequence. Same rows and rules as the numbered list; the
   label replaces the numeral. */
.rl-v2__case-labelled { margin: 0; }
.rl-v2__case-labelled-item {
  padding: 0.9rem 0;
  border-top: 1px solid var(--v2-rule);
}
.rl-v2__case-labelled > :last-child { border-bottom: 1px solid var(--v2-rule); }
.rl-v2__case-labelled-item dt {
  font-size: var(--v2-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v2-ink-quiet);
  margin-bottom: 0.4rem;
}
.rl-v2__case-labelled-item dd {
  margin: 0;
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  line-height: 1.6;
}

/* Navy, for the solution only: the one full-bleed change marks the turn
   from problem to answer. Two on a page would mark nothing. */
.rl-v2 section.rl-v2__case-sec--navy { background: var(--v2-ink); color: #fff; }
.rl-v2__case-sec--navy h2 { color: #fff; }
.rl-v2__case-sec--navy .v2-label { color: rgba(255,255,255,0.58); }
.rl-v2 .rl-v2__case-sec--navy .rl-v2__case-sec-text p { color: rgba(255,255,255,0.78); }
.rl-v2__case-sec--navy .rl-v2__case-points > li { border-color: rgba(255,255,255,0.22); }
.rl-v2 .rl-v2__case-sec--navy .rl-v2__case-points h3 { color: #fff; }

@media (max-width: 900px) {
  .rl-v2__case-sec-grid { grid-template-columns: 1fr; }
}

/* ── Parties ──────────────────────────────────────────────────────
   Who does what, when more than one organisation is involved. The RedLines
   column takes a navy ground rather than a badge or a highlight colour:
   tone says "this is the one you are buying" without spending the accent,
   which belongs to actions.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2__parties-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__parties-head h2 { max-width: 34rem; }
/* DOUBLED PREFIX: `.rl-v2 p` is (0,1,1) and sets margin and line-height. */
.rl-v2 .rl-v2__parties-intro {
  font-size: var(--v2-lead);
  color: var(--v2-ink-soft);
  margin-top: 1.25rem;
  max-width: var(--v2-measure);
}
.rl-v2__parties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  align-items: stretch;   /* equal height here IS correct: these are peers */
}
.rl-v2__party {
  background: var(--v2-paper-2);
  padding: 1.75rem;
  border-top: 2px solid var(--v2-ink);
}
/* The one being bought. Navy ground, white text. */
.rl-v2__party--us {
  background: var(--v2-ink);
  border-top-color: var(--v2-accent-mid);
}
.rl-v2 .rl-v2__party-label {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-w-display);
  font-size: var(--v2-h3);
  letter-spacing: -0.02em;
  margin: 0;
}
.rl-v2 .rl-v2__party-role {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: 0.25rem;
}
.rl-v2__party-does {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
}
.rl-v2__party-does li {
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  line-height: 1.6;
  padding: 0.6rem 0;
  border-top: 1px solid var(--v2-rule);
}
/* White text on the navy column. 0.72 and 0.62 measure well clear of AA on
   this ground; the rule needs lifting too or it disappears. */
.rl-v2__party--us .rl-v2__party-label { color: #fff; }
.rl-v2 .rl-v2__party--us .rl-v2__party-role { color: rgba(255,255,255,0.62); }
.rl-v2__party--us .rl-v2__party-does li {
  color: rgba(255,255,255,0.78);
  border-top-color: rgba(255,255,255,0.16);
}
.rl-v2 .rl-v2__parties-note {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: 1.5rem;
  max-width: 44rem;
}
.rl-v2 .rl-v2__parties-note a { color: var(--v2-accent-text); }


/* Open roles: the three participants are labelled columns, with no icon
   substitutes or background boxes. The approved responsibilities carry
   the explanation. Narrow screens read one role at a time. */
.rl-v2__parties[data-layout="roles"] .rl-v2__parties-head h2 { max-width: 48rem; }
.rl-v2__parties[data-layout="roles"] .rl-v2__parties-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
.rl-v2__parties[data-layout="roles"] .rl-v2__party { padding: 0; border: 0; background: none; }
.rl-v2__parties[data-layout="roles"] .rl-v2__party-label { color: var(--v2-ink); font-size: 1.5rem; }
.rl-v2__parties[data-layout="roles"] .rl-v2__party-role { color: var(--v2-ink-quiet); }
.rl-v2__parties[data-layout="roles"] .rl-v2__party-does li {
  color: var(--v2-ink-soft);
  border: 0;
  padding: 0 0 .75rem;
  font-size: var(--v2-body);
}
.rl-v2__parties[data-layout="roles"] .rl-v2__party-does li:last-child { padding-bottom: 0; }
@media (max-width: 900px) {
  .rl-v2__parties[data-layout="roles"] .rl-v2__parties-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* Partner relationship: Material Symbols and a branded laptop, requested
   by Rob on 16 October. Lines connect the participants without arrows or
   an implied delivery sequence. Original responsibilities expand below. */
.rl-v2__parties[data-layout="diagram"] .rl-v2__wrap {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--v2-gap-block);
  align-items: start;
}
.rl-v2__parties[data-layout="diagram"] .rl-v2__parties-head { margin-bottom: 0; }
.rl-partner-diagram { width: 100%; max-width: 42rem; justify-self: end; color: var(--v2-ink); }
.rl-partner-diagram__contributors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.rl-partner-diagram__node { text-align: center; }
.rl-partner-diagram__visual { height: 10rem; display: flex; justify-content: center; align-items: center; }
.rl-partner-diagram svg { display: block; fill: currentColor; }
.rl-partner-diagram__people { width: 9rem; max-width: 80%; }
.rl-partner-diagram__laptop { width: 14rem; max-width: 100%; }
.rl-v2 .rl-partner-diagram h3 { margin: var(--space-2) 0 0; font-size: 1.5rem; }
.rl-v2 .rl-partner-diagram p { margin: var(--space-1) auto 0; color: var(--v2-ink-soft); font-size: var(--v2-body); max-width: 15rem; line-height: 1.5; }
.rl-partner-diagram__connections { height: 4rem; width: 100%; margin-top: var(--space-3); }
.rl-partner-diagram__connections path { stroke: var(--v2-ink-faint); stroke-width: 1.5; }
.rl-partner-diagram__client { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.rl-partner-diagram__client-icon { width: 3.5rem; flex: 0 0 3.5rem; }
.rl-v2 .rl-partner-diagram__client h3 { margin-top: 0; }
.rl-partner-diagram__client p { text-align: left; }
.rl-v2__parties-details { grid-column: 1 / -1; }
.rl-v2__parties-details > summary {
  width: fit-content;
  cursor: pointer;
  font-size: var(--v2-body);
  font-weight: 500;
  color: var(--v2-ink);
  padding-block: var(--space-1);
}
.rl-v2__parties-details > summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.rl-v2__parties-details > summary:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: var(--space-half); }
.rl-v2__parties-detail-content { margin-top: var(--space-3); }
.rl-v2__parties[data-layout="diagram"] .rl-v2__party { background: none; padding: 0; border: 0; }
.rl-v2__parties[data-layout="diagram"] .rl-v2__party-label { color: var(--v2-ink); font-size: var(--v2-body); }
.rl-v2__parties[data-layout="diagram"] .rl-v2__party-role { color: var(--v2-ink-quiet); }
.rl-v2__parties[data-layout="diagram"] .rl-v2__party-does li {
  color: var(--v2-ink-soft);
  border: 0;
  padding: 0 0 var(--space-1);
  font-size: var(--v2-body);
}
@media (max-width: 900px) {
  .rl-v2__parties[data-layout="diagram"] .rl-v2__wrap,
  .rl-v2__parties[data-layout="diagram"] .rl-v2__parties-grid { grid-template-columns: 1fr; }
  .rl-partner-diagram { justify-self: center; }
}
@media (max-width: 480px) {
  .rl-partner-diagram__contributors { gap: var(--space-2); }
  .rl-partner-diagram__visual { height: 7rem; }
  .rl-v2 .rl-partner-diagram h3 { font-size: var(--v2-h3); }
  .rl-v2 .rl-partner-diagram p { font-size: var(--v2-small); }
  .rl-partner-diagram__connections { height: 3rem; }
}

/* Connected roles: two contributors and the client they serve. The order
   and text are unchanged; the connecting rules carry the relationship.
   A third party is required for this opt-in layout. Narrow screens use
   the same semantic content with no implied sequential arrows. */
.rl-v2__parties[data-layout="connected"] .rl-v2__parties-head h2 { max-width: 48rem; }
.rl-v2__parties[data-layout="connected"] .rl-v2__parties-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 1.5rem;
}
.rl-v2__parties[data-layout="connected"] .rl-v2__party {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 0;
  border-radius: var(--v2-panel-radius);
  background: var(--v2-panel);
}
.rl-v2__parties[data-layout="connected"] .rl-v2__party--us { background: var(--v2-ink); }
.rl-v2__parties[data-layout="connected"] .rl-v2__party-label { font-size: 1.5rem; }
.rl-v2__parties[data-layout="connected"] .rl-v2__party-role { font-size: var(--v2-body); }
.rl-v2__parties[data-layout="connected"] .rl-v2__party-does li {
  font-size: var(--v2-body);
  padding-block: 0.75rem;
}
.rl-v2__parties[data-layout="connected"] .rl-v2__party--us .rl-v2__party-does li { color: #fff; }
.rl-v2__parties[data-layout="connected"] .rl-v2__party:nth-child(-n+2)::after {
  content: "";
  position: absolute;
  height: 1.5rem;
  left: 50%;
  bottom: -1.5rem;
  border-left: 1px solid var(--v2-ink-faint);
}
.rl-v2__parties[data-layout="connected"] .rl-v2__party:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: start;
}
.rl-v2__parties[data-layout="connected"] .rl-v2__party:last-child::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: calc(25% - 0.375rem);
  width: calc(50% + 0.75rem);
  border-top: 1px solid var(--v2-ink-faint);
}
.rl-v2__parties[data-layout="connected"] .rl-v2__party:last-child::after {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  height: 1.5rem;
  border-left: 1px solid var(--v2-ink-faint);
}
.rl-v2__parties[data-layout="connected"] .rl-v2__party:last-child .rl-v2__party-does { margin-top: 0; }
.rl-v2__parties[data-layout="connected"] .rl-v2__party:last-child li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 680px) {
  .rl-v2__parties[data-layout="connected"] .rl-v2__parties-grid { grid-template-columns: 1fr; gap: 1rem; }
  .rl-v2__parties[data-layout="connected"] .rl-v2__party:last-child { grid-template-columns: 1fr; gap: 1.25rem; }
  .rl-v2__parties[data-layout="connected"] .rl-v2__party::before,
  .rl-v2__parties[data-layout="connected"] .rl-v2__party::after { display: none; }
}

/* ── Steps ────────────────────────────────────────────────────────
   A numbered process. An ordered list in the markup, because the order is
   the meaning; the numbers are generated by CSS from the list position,
   so they cannot drift from it.

   The NUMBER IS THE DESIGN: display size, quiet ink, its own column. The
   same move the figures band makes, and the reason these need no boxes.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__steps { background: var(--v2-paper-2); }
.rl-v2__steps-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__steps-head h2 { max-width: 30rem; }
.rl-v2 .rl-v2__steps-intro {
  font-size: var(--v2-lead);
  color: var(--v2-ink-soft);
  margin-top: 1.25rem;
  max-width: var(--v2-measure);
}
.rl-v2__steps-list {
  list-style: none; margin: 0; padding: 0;
  counter-reset: rl-step;
}
.rl-v2__step {
  counter-increment: rl-step;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--v2-rule);
  align-items: baseline;
}
.rl-v2__steps-list > :last-child { border-bottom: 1px solid var(--v2-rule); }
/* TWO COLUMNS FOR SHORT STEPS. The stacked list is right for the homepage
   ladder, where each rung carries a paragraph. On a tool page the steps
   are a four-part method with one line each, and stacked they cost 1,147px
   to say twelve lines. Two columns halves that without touching a word.

   Opt-in via `columns => "2"`, because the default is correct wherever the
   steps carry real prose. Reverts to one column below 1000px, listed in
   the shared media block since .rl-v2__steps-list is defined ABOVE it. */
.rl-v2__steps--cols .rl-v2__steps-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
/* The first row of a two-column grid needs its own top border on both
   cells, and the last row its bottom; with the stacked rule only the very
   first and last item would get one. */
.rl-v2__steps--cols .rl-v2__step:nth-child(2) { border-top: 1px solid var(--v2-rule); }
.rl-v2__steps--cols .rl-v2__steps-list > :nth-last-child(2) { border-bottom: 1px solid var(--v2-rule); }
/* The breakpoint lives HERE, not in the shared 1000px block, because that
   block sits earlier in the file and at equal specificity the later rule
   wins whatever a media query says. Same reason the report grid carries
   its own; see the note there. */
@media (max-width: 1000px) {
  .rl-v2__steps--cols .rl-v2__steps-list { grid-template-columns: 1fr; }
  .rl-v2__steps--cols .rl-v2__step:nth-child(2) { border-top: 0; }
}
/* The number, from the list position rather than the content, so it cannot
   disagree with the order it is rendered in. */
.rl-v2__step::before {
  content: counter(rl-step);
  font-family: var(--v2-font-display);
  font-weight: var(--v2-w-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  /* ink-QUIET, not ink-faint. The token file is explicit that faint is for
     "rules, borders and other non-text decoration"; a step number is text,
     whatever else it is doing visually. Measured on paper-2: faint is
     2.30:1 and fails even the 3:1 large-text threshold, quiet is 4.91:1
     and clears it comfortably. */
  color: var(--v2-ink-quiet);
}
.rl-v2 .rl-v2__step-h3 { margin: 0; }
.rl-v2 .rl-v2__step-body {
  font-size: var(--v2-body);
  color: var(--v2-ink-soft);
  margin-top: 0.5rem;
  line-height: 1.65;
  max-width: 46rem;
}
.rl-v2 .rl-v2__steps-note {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: 1.5rem;
  max-width: var(--v2-measure);
}
/* In two columns the measure cap leaves the note under column one with an
   obvious void beside it, because the grid above has just established two
   columns and the eye expects the second to continue. Wider, so the note
   reads as a footnote to the whole block rather than to the left half.

   BOTH SELECTOR FORMS, because of the island pattern. On an island the
   .rl-v2 class is ON this section, so a descendant ".rl-v2 .rl-v2__steps--cols"
   never matches: there is no .rl-v2 ancestor. On a v2 page the wrapper
   carries it and the descendant form is the one that matches. The rule
   has to beat ".rl-v2 .rl-v2__steps-note" at (0,2,0), so a bare class
   would lose on specificity even where it did match. */
.rl-v2 .rl-v2__steps--cols .rl-v2__steps-note,
.rl-v2__steps--cols.rl-v2 .rl-v2__steps-note { max-width: 62rem; }
.rl-v2 .rl-v2__steps-note a { color: var(--v2-accent-text); }
.rl-v2 .rl-v2__steps-label { margin-bottom: var(--space-3); }

@media (max-width: 620px) {
  /* The number moves above the step rather than beside it: a 4rem column
     on a 375px screen leaves the text too narrow to set. */
  .rl-v2__step { grid-template-columns: 1fr; gap: 0.5rem; }
}


/* Optional contextual photograph within the shared sequence introduction. */
.rl-v2__steps-figure { margin: 2rem 0 0; }
.rl-v2__steps-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--v2-panel-radius);
}

/* Sequence layout: introduction beside a numbered track. The native
   ordered list supplies the order without a second diagram or image. */
.rl-v2 section.rl-v2__steps[data-layout="sequence"] { background: var(--v2-panel); }
.rl-v2__steps[data-layout="sequence"] .rl-v2__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.rl-v2__steps[data-layout="sequence"] .rl-v2__steps-head { margin-bottom: 0; }
.rl-v2__steps[data-layout="sequence"] .rl-v2__steps-note { grid-column: 2; margin-top: 0; }
.rl-v2__steps[data-layout="sequence"] .rl-v2__step {
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 1rem;
}
.rl-v2__steps[data-layout="sequence"] .rl-v2__step:first-child { padding-top: 0; border-top: 0; }
.rl-v2__steps[data-layout="sequence"] .rl-v2__step::before { color: var(--v2-ink); }
/* Short engagement sequences use the same type at a tighter section rhythm.
   Opt-in only: standard screening/About steps retain their existing spacing. */
.rl-v2 section.rl-v2__steps[data-density="compact"] { padding-block: var(--v2-gap-section-compact); }
.rl-v2 .rl-v2__steps[data-density="compact"] .rl-v2__step-body { margin-bottom: 0; }
.rl-v2__steps[data-density="compact"] .rl-v2__step:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 620px) {
  .rl-v2__steps[data-layout="sequence"][data-density="compact"] .rl-v2__step { grid-template-columns: var(--space-3) minmax(0, 1fr); column-gap: var(--space-2); }
}
@media (max-width: 900px) {
  .rl-v2__steps[data-layout="sequence"] .rl-v2__wrap { grid-template-columns: 1fr; gap: 2rem; }
  .rl-v2__steps[data-layout="sequence"] .rl-v2__steps-note { grid-column: auto; }
}

/* ── Delivers ─────────────────────────────────────────────────────
   What you get, as a list. Replaces both delivers/default and
   what/default, which were the same element by accretion.

   ROWS, NOT CARDS. Codex, 2 October: distinct labelled blocks, "avoid
   introducing another row of boxed cards". Boxes also force every item to
   the height of the longest, so a four-word item gets the same visual
   weight as a two-line one, which is a lie about their importance.

   The rule between rows is the same move the questions list makes, and it
   passes the guide's test for a line: it separates rows that would
   otherwise run together, rather than decorating.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2__delivers-head { margin-bottom: var(--v2-gap-block); }
.rl-v2__delivers-head h2 { max-width: 30rem; }
/* DOUBLED PREFIX: `.rl-v2 p` is (0,1,1) and sets margin and line-height. */
.rl-v2 .rl-v2__delivers-sub {
  font-size: var(--v2-lead);
  color: var(--v2-ink-soft);
  margin-top: 1.25rem;
  max-width: var(--v2-measure);
}
.rl-v2__delivers-list { list-style: none; margin: 0; padding: 0; }
.rl-v2__delivers-item {
  padding: 1.15rem 0;
  border-top: 1px solid var(--v2-rule);
  font-size: var(--v2-body);
  line-height: 1.6;
  color: var(--v2-ink);
  max-width: 48rem;
}
/* TWO COLUMNS FOR SHORT ITEMS, same reasoning as the steps variant above:
   a list of one-line facts does not need the full measure, and stacked it
   costs twice the height for no gain in legibility. Opt-in via
   `columns => "2"`; the default stays single-column for items that run to
   a sentence or more. The max-width above is what keeps a long item
   readable, so it is dropped here where the column already constrains it. */
.rl-v2__delivers--cols .rl-v2__delivers-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.rl-v2__delivers--cols .rl-v2__delivers-item { max-width: none; }
@media (max-width: 1000px) {
  .rl-v2__delivers--cols .rl-v2__delivers-list { grid-template-columns: 1fr; }
}
/* A rule below the last row too, so the list closes rather than trailing
   off into the section's padding. */
.rl-v2__delivers-list > :last-child { border-bottom: 1px solid var(--v2-rule); }
.rl-v2 .rl-v2__delivers-footer {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: 1.5rem;
  max-width: var(--v2-measure);
}

/* The callout variant: list in one column, the summary beside it. */
.rl-v2__delivers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Not a card: tinted ground and a rule above, so it reads as a different
   KIND of content rather than as a box floated beside the list. */
.rl-v2__delivers-aside {
  background: var(--v2-paper-2);
  padding: 1.75rem;
  border-top: 2px solid var(--v2-ink);
}
.rl-v2 .rl-v2__delivers-aside-h3 {
  font-size: var(--v2-h3);
  margin: 0;
}
.rl-v2 .rl-v2__delivers-aside-body {
  font-size: var(--v2-small);
  color: var(--v2-ink-soft);
  margin-top: 0.85rem;
  line-height: 1.65;
}
/* The summary in four words. No border: these are not tags, nothing
   filters by them, and a bordered pill would reintroduce the boxed look
   this family exists to avoid. Weight and spacing carry them. */
.rl-v2__delivers-badges {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
}
.rl-v2__delivers-badges li {
  font-size: var(--v2-micro);
  font-weight: var(--v2-w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-ink-quiet);
}

@media (max-width: 900px) {
  .rl-v2__delivers-grid { grid-template-columns: 1fr; }
  /* The aside follows the list on mobile and needs air above it, since the
     list's closing rule would otherwise sit tight against its own. */
  .rl-v2__delivers-aside { margin-top: 1rem; }
}


/* Illustrated inclusions: one full product output beside an open list. */
.rl-v2__delivers[data-layout="illustrated"] .rl-v2__delivers-head h2 { max-width: 48rem; }
.rl-v2__delivers[data-layout="illustrated"] .rl-v2__delivers-sub { max-width: 48rem; }
.rl-v2__delivers[data-layout="illustrated"] .rl-v2__delivers-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.rl-v2 .rl-v2__delivers-figure img { box-shadow: var(--v2-panel-shadow); }

.rl-v2__delivers[data-layout="illustrated"] .rl-v2__delivers-item {
  padding: 0 0 1.25rem 1.5rem;
  border: 0;
  position: relative;
}
.rl-v2__delivers[data-layout="illustrated"] .rl-v2__delivers-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6rem;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--v2-ink);
}
.rl-v2__delivers[data-layout="illustrated"] .rl-v2__delivers-item:last-child { padding-bottom: 0; }
@media (max-width: 900px) {
  .rl-v2__delivers[data-layout="illustrated"] .rl-v2__delivers-body { grid-template-columns: 1fr; }
}

/* Ledger layout: two balanced columns of inclusions, with a clear
   heading and a single enclosing surface. Plain-string items remain the
   shared contract; no added claims or decorative icons. */
.rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-head h2 { max-width: 48rem; }
.rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-sub { max-width: 48rem; }
.rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--v2-panel);
  border-radius: var(--v2-panel-radius);
}
.rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-item { max-width: none; }
.rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-item:last-child { border-bottom: 0; }
@media (max-width: 760px) {
  .rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-list { grid-template-columns: 1fr; }
  .rl-v2__delivers[data-layout="ledger"] .rl-v2__delivers-item:nth-child(2) { border-top: 1px solid var(--v2-rule); padding-top: 1.15rem; }
}

/* ── CTA band ─────────────────────────────────────────────────────
   A heading, a sentence, and the action to take. Two tones from one
   component: quiet is the default (the page's closing ask), navy is the
   mid-page change of pace where the page turns to a different audience.

   The TONE CLASS ON THE SECTION drives everything, including the button
   variants. The renderer has no negation or else branch, so putting the
   decision in the cascade rather than in per-element conditions is the
   only pattern that behaves when the slot is omitted.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__cta {
  background: var(--v2-paper-2);
  padding-block: clamp(4rem, 6.5vw, 6rem);
}
.rl-v2__cta-inner { max-width: 44rem; }

/* Invitation: a concise closing step with the actions beside the introduction. */
.rl-v2__cta[data-layout="invitation"] .rl-v2__cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--v2-gap-block);
  max-width: none;
  align-items: center;
}
.rl-v2__cta[data-layout="invitation"] .rl-v2__cta-text { max-width: var(--v2-measure); }
.rl-v2__cta[data-layout="invitation"] .rl-v2__cta-actions {
  margin: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-self: end;
}
.rl-v2__cta-client { display: block; max-width: 100%; color: var(--v2-ink); }
.rl-v2__cta-client img { display: block; width: 180px; height: 64px; max-width: 100%; object-fit: contain; object-position: left center; }
@media (max-width: 900px) {
  .rl-v2__cta[data-layout="invitation"] .rl-v2__cta-inner { grid-template-columns: 1fr; }
  .rl-v2__cta[data-layout="invitation"] .rl-v2__cta-actions { justify-self: stretch; }
}

/* DOUBLED PREFIX: `.rl-v2 p` is (0,1,1) and sets margin and line-height on
   every paragraph. A bare class here is (0,1,0) and loses. */
.rl-v2 .rl-v2__cta-body {
  font-size: var(--v2-lead);
  color: var(--v2-ink-soft);
  margin-top: 1.25rem;
}
/* The honest part: review and timing conditions sit quieter than the offer
   but must stay legible. --v2-ink-quiet is the quietest grey permitted for
   words (about 4.9:1); --v2-ink-faint is decoration only and would fail. */
.rl-v2 .rl-v2__cta-note {
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
  margin-top: 0.85rem;
  max-width: 32rem;
}
.rl-v2__cta-actions {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 1.5rem;
  margin-top: 2.5rem;
}

/* COMPACT: A MID-PAGE ASK, NOT A CLOSING ONE. Rob, 4 October: compact the
   free screening's middle. Measured there, the standard band spent 540px
   delivering one sentence and a button, and because the inner column is
   44rem the right half of the section was empty while the page was still
   getting taller.

   The difference is what the band is FOR. At the foot of a page it is the
   final word and earns its room. Mid-page it is a door held open for a
   reader who is already convinced, so it should cost as little height as
   possible: the ask and the button sit on one row, and the note sits
   under the heading rather than pushing the action further down.

   Below 760px it stacks, because a heading and a button side by side at
   phone width leaves neither enough room. */
.rl-v2 section.rl-v2__cta--compact {
  padding-block: clamp(2.5rem, 3.5vw, 3.25rem);
}
.rl-v2__cta--compact .rl-v2__cta-inner {
  max-width: none;
  display: flex;
  /* ALIGNED TO THE HEADING, not centred on the block. Centring put the
     button level with the gap between the heading and the body text,
     which read as a button that had drifted rather than one placed. The
     heading is what the button answers, so they share a baseline band. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem 3rem;
  flex-wrap: wrap;
}
/* The text column keeps a measure; only the ROW is full width. */
.rl-v2__cta--compact .rl-v2__cta-text { max-width: 40rem; }
.rl-v2 .rl-v2__cta--compact .rl-v2__cta-body { margin-top: 0.6rem; }
.rl-v2 .rl-v2__cta--compact .rl-v2__cta-note { margin-top: 0.5rem; }
/* margin-top on the actions is what the standard band uses to separate
   the button from the copy above it. Here they are siblings in a row, so
   that margin would only push the button off centre. */
.rl-v2__cta--compact .rl-v2__cta-actions { margin-top: 0.35rem; flex: none; }
@media (max-width: 760px) {
  .rl-v2__cta--compact .rl-v2__cta-inner { display: block; }
  .rl-v2__cta--compact .rl-v2__cta-actions { margin-top: 1.75rem; }
}

/* Quiet tone: ONE clear action in ink, with a text link beside it. The
   accent is saved for the navy band, where it has a dark ground to carry
   it; on paper the ink button is the stronger, calmer call. */
.rl-v2__cta:not(.rl-v2__cta--navy) .rl-v2__cta-primary {
  background: var(--v2-ink);
}
.rl-v2__cta:not(.rl-v2__cta--navy) .rl-v2__cta-primary:hover {
  background: #16163f;
}
/* The second action as a text link. These properties duplicate
   .rl-v2__link rather than reusing the class, because the class carries a
   margin-top for its in-body use that misaligns it in an action row — the
   same problem the close and statement rows already work around further
   down. Setting them here keeps the alignment correct by construction. */
.rl-v2 .rl-v2__cta:not(.rl-v2__cta--navy) a.rl-v2__cta-second {
  color: var(--v2-accent-text);
  font-size: var(--v2-body);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s;
}
.rl-v2 .rl-v2__cta:not(.rl-v2__cta--navy) a.rl-v2__cta-second:hover {
  color: var(--v2-ink);
}

/* Navy tone: the full-bleed moment. Two buttons, because a dark ground
   carries both without either shouting, and this audience has two genuine
   next steps rather than one ask and an escape hatch. */
.rl-v2 section.rl-v2__cta--navy {
  background: var(--v2-ink);
  color: #fff;
}
.rl-v2__cta--navy h2 { color: #fff; }
/* 0.58 rather than 0.45: measured at 4.43:1 on navy, just under the AA
   floor for small text. Same correction the statement band already carries. */
.rl-v2__cta--navy .v2-label { color: rgba(255,255,255,0.58); }
.rl-v2 .rl-v2__cta--navy .rl-v2__cta-body { color: rgba(255,255,255,0.72); }
.rl-v2 .rl-v2__cta--navy .rl-v2__cta-note { color: rgba(255,255,255,0.62); }
/* Ghost: outlined, transparent, white. `.rl-v2 a { color: inherit }` is
   (0,1,1) and wins over a bare class, so the colour needs this shape. */
.rl-v2 .rl-v2__cta--navy a.rl-v2__cta-second {
  display: inline-block;
  color: #fff;
  font-size: var(--v2-body);
  font-weight: var(--v2-w-medium);
  padding: 0.9rem 1.6rem;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.rl-v2 .rl-v2__cta--navy a.rl-v2__cta-second:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}

@media (max-width: 620px) {
  /* The primary action goes full width so the thumb target is unambiguous;
     the secondary stays inline so it reads as the lesser option. */
  .rl-v2__cta-actions .rl-v2__cta-primary { width: 100%; text-align: center; }
  .rl-v2__cta-actions { gap: 1.25rem; }
}

/* ── Credibility line ─────────────────────────────────────────────
   One sentence of evidence with its links inside it. The quietest proof
   element on the site: a tinted band, one line of type, no heading.

   Set on --v2-paper-2 rather than a bordered box. The legacy version used
   a background AND the page used rules elsewhere; a tone change alone is
   enough to mark a band, and the style guide's own rules forbid decorative
   hairlines.

   CONTRAST: --v2-ink-soft on --v2-paper-2 computes about 7.4:1, well clear
   of AA. Worth stating because the LEGACY .rl-credibility-line is one of
   the three selectors failing npm run lighthouse on contrast (a carried
   item in CLAUDE.md), and this component is the fix rather than a patch of
   that rule. Do not copy the legacy colours across on conversion.
   ═════════════════════════════════════════════════════════════════ */
.rl-v2 section.rl-v2__cred {
  background: var(--v2-paper-2);
  padding-block: clamp(2.25rem, 3.5vw, 3rem);
}
.rl-v2__cred-inner {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 1.25rem 2.5rem;
}
/* DOUBLED PREFIX REQUIRED: `.rl-v2 p` is (0,1,1) and sets line-height on
   every paragraph. A bare .rl-v2__cred-lead is (0,1,0) and would lose, so
   the line-height here would silently do nothing. The documented trap. */
.rl-v2 .rl-v2__cred-lead {
  flex: 1 1 28rem;
  font-size: var(--v2-body);
  line-height: 1.6;
  color: var(--v2-ink-soft);
  margin: 0;
  max-width: 58rem;   /* wider than --v2-measure: this is one line, not a paragraph */
}
/* The lead's own markup. `strong` names the claim, links point at the
   evidence. Both must stay legible against the tint. */
.rl-v2 .rl-v2__cred-lead strong { color: var(--v2-ink); font-weight: var(--v2-w-medium); }
/* `.rl-v2 a { color: inherit }` is (0,1,1) and beats a bare class here, so
   this needs the same shape to win — the same reason .rl-v2__link carries
   `.rl-v2 a.rl-v2__link` further up. */
.rl-v2 .rl-v2__cred-lead a {
  color: var(--v2-accent-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.15s;
}
.rl-v2 .rl-v2__cred-lead a:hover { color: var(--v2-ink); }
.rl-v2 .rl-v2__cred-lead a strong { color: inherit; }

/* Logos sit INLINE after the sentence, not on their own row: on the two
   pages that use them the lead ends "Clients include" and the marks finish
   it. Same height and treatment as the partners-bar strip, so the site has
   one logo appearance rather than two. */
.rl-v2__cred-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem;
}
.rl-v2__cred-logos img {
  height: 26px; width: auto; max-width: 116px; object-fit: contain;
  opacity: 0.6; filter: grayscale(1);
}

/* ═══════════════════════════════════════════════════════════════════
   SITE FOOTER, v2
   Rob, 2 October: "fonts etc should be consistent with the rest of the
   page". The footer was set entirely in Poppins at weights 600 and 700 —
   Poppins is the DISPLAY face, and a footer link is interface text, so it
   belongs in Work Sans at 500 like every other control on the site.

   SITE-WIDE, like the header, and for the same reason: nothing launches
   until every page is converted, so a footer that briefly disagrees with
   an unconverted page is seen only on Local by us. The plan says so
   directly (section 8): "Header and footer can be designed early because
   the rebuild is isolated."

   THE TAGLINE AND DESCRIPTOR ARE NOT STYLED AS BRAND COPY HERE, because
   they are no longer footer copy: rl_home_hero() in functions.php reads
   them from the homepage manifest, so what renders is the homepage's own
   h1 and lead. They are set at footer scale rather than hero scale, since
   a 64px headline in a footer would be absurd, but the words are not this
   file's to choose.

   Tokens resolve because redlines-v2-tokens.css scopes them to .rl-v2 AND
   .site-footer alongside .site-header.
   ═══════════════════════════════════════════════════════════════════ */
.rl-footer {
  font-family: var(--v2-font-body);
}
.rl-footer__logo {
  font-family: var(--v2-font-display);
  font-weight: var(--v2-w-display);
  letter-spacing: -0.02em;
}
/* The homepage h1, at footer scale. Still the heaviest thing in the
   footer, because it is the claim the whole site makes. */
.rl-footer .rl-footer__tagline {
  font-family: var(--v2-font-display);
  font-size: 1.0625rem;
  font-weight: var(--v2-w-medium);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
}
/* The homepage lead. 0.78 on navy measures well clear of AA; the legacy
   0.75 was close enough to the floor to be worth lifting while here. */
.rl-footer .rl-footer__descriptor {
  font-family: var(--v2-font-body);
  font-size: var(--v2-small);
  font-weight: var(--v2-w-body);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}
.rl-footer__col-heading {
  font-family: var(--v2-font-body);
  font-size: var(--v2-micro);
  font-weight: var(--v2-w-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.7 measures 4.2:1 on navy and fails AA at 12px. 0.78 clears it and
     still reads as a quiet label. */
  color: rgba(255,255,255,0.78);
}
.rl-footer__col a,
.rl-footer__login-link {
  font-family: var(--v2-font-body);
  font-size: var(--v2-small);
  font-weight: var(--v2-w-body);
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.78);
  transition: color 0.15s;
}
.rl-footer__col a:hover,
.rl-footer__login-link:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   SITE HEADER, v2
   Codex point 8: "The rounded Contact and Log in controls feel different
   from the squarer homepage buttons. Apply a consistent button treatment."
   He is right, and it was the most visible inconsistency on the first
   screen: two different button languages within 600px of each other.

   SITE-WIDE ON PURPOSE, not scoped to v2 pages. Rob, 2 October: the site
   does not launch until every page is converted, so a header that
   temporarily disagrees with the 33 unconverted pages costs nothing — it
   is seen only on Local, by us, during the rebuild. The plan says the same
   thing (section 8): "Header and footer can be designed early because the
   rebuild is isolated."

   An earlier attempt scoped this per-page with a body class driven by the
   manifest's __wrapper. It worked, but it solved a problem that does not
   exist, and it left a filter in functions.php to be unpicked at launch.
   Removed.

   These are OVERRIDES of the legacy header rules, which stay where they
   are. The legacy rules use !important liberally, so matching or beating
   their specificity here is unavoidable; that is a property of what is
   being overridden, not a choice. All of it goes when the legacy header
   CSS is deleted at stage 11.
   ═══════════════════════════════════════════════════════════════════ */

/* Nav links: Work Sans at 500, matching page body text. The legacy header
   sets 600/15px in --rl-font, which reads heavier and narrower than
   anything on a v2 page. */
.main-navigation .main-nav ul.menu > li > a {
  font-family: var(--v2-font-body);
  font-weight: var(--v2-w-medium);
  font-size: 0.9375rem;             /* 15px, unchanged: the fit is right */
  letter-spacing: -0.01em;
}

/* Nav-link hover: ink, not red. The legacy header turned plain nav links
   #c73333 on hover, which breaks the rule the style guide states plainly —
   "the accent marks actions… if red appears anywhere else it is a
   mistake". Hovering a navigation item is not an action; following the
   link is, and the link's own destination page does that work. It was also
   a THIRD red on screen, since #c73333 is the legacy value rather than
   either v2 step.

   Current page keeps the accent, because that is state rather than
   decoration: it tells you where you are. */
.main-navigation .main-nav ul.menu > li:not(.nav-cta):not(.rl-nav-login) > a:hover,
.main-navigation .main-nav ul.menu > li:not(.nav-cta):not(.rl-nav-login) > a:focus {
  color: var(--v2-ink) !important;
  opacity: 0.68;
}

/* Contact: the page's primary button, not a pill.
   Same radius (4px), same weight (500), same accent as .rl-v2__btn, so the
   header CTA and the hero CTA are visibly one control. --v2-accent-mid is
   4.55:1 behind white and clears AA; the legacy --rl-red-dark (#c73333) is
   a different red again, which is the third one on the screen. */
.main-navigation .main-nav .menu > li.nav-cta > a {
  background: var(--v2-accent-mid) !important;
  border-radius: 4px;
  font-family: var(--v2-font-body);
  font-weight: var(--v2-w-medium);
  font-size: var(--v2-body);
  padding: 0.65rem 1.25rem !important;
  letter-spacing: -0.01em;
  transition: background 0.15s;
}
.main-navigation .main-nav .menu > li.nav-cta > a:hover {
  background: #c02f25 !important;   /* the .rl-v2__btn hover, exactly */
}
/* The legacy rule appends a chevron. The v2 buttons carry no glyph, and the
   hero CTA sits a few hundred pixels below this one. */
.main-navigation .main-nav .menu > li.nav-cta > a::after { content: none; }

/* Log in: the ghost/outline partner to Contact. Square to match, navy
   rather than accent, since the accent is reserved for the primary action. */
.main-navigation .rl-nav-login > a {
  font-family: var(--v2-font-body) !important;
  font-weight: var(--v2-w-medium) !important;
  font-size: var(--v2-small) !important;
  border-radius: 4px !important;
  border-color: var(--v2-ink) !important;
  color: var(--v2-ink) !important;
  padding: 0.5rem 1rem !important;
  letter-spacing: -0.01em;
}
.main-navigation .rl-nav-login > a:hover {
  background: var(--v2-ink) !important;
  border-color: var(--v2-ink) !important;
}

/* ── Desktop drop-downs ───────────────────────────────────────────
   Rob spotted this hovering Log in, 2 October: the button was restyled but
   the menu it opens was not, so the v2 header dropped an old-style panel.
   Services and Tools had the same fault — GeneratePress styles all three
   and nothing here had overridden it.

   What was wrong: 10px rounded corners against the header's 4px, Poppins
   where interface text should be Work Sans (Poppins is the display face,
   and a menu item is not display type), and a generic grey drop shadow.

   Replaced with the same language as the rest of the header: 4px, Work
   Sans at 500, and a hairline border instead of a shadow. The guide allows
   a rule where it carries information — here it is the panel's edge
   against the page, which a shadow was faking.
   ═════════════════════════════════════════════════════════════════ */
.main-navigation .main-nav ul.menu ul.sub-menu {
  border-radius: 4px;
  border: 1px solid var(--v2-rule);
  /* Tight and low-spread. A 16px blur read as a grey haze around the panel
     — it looked like the panel itself was grey, which is what Rob saw. The
     border does the separating; the shadow only lifts it off the page. */
  box-shadow: 0 2px 6px rgba(1, 0, 61, 0.06);
  padding-block: 0.35rem;
  background: #fff;
}
.main-navigation .main-nav ul.menu ul.sub-menu a {
  font-family: var(--v2-font-body);
  font-size: var(--v2-small);
  font-weight: var(--v2-w-medium);
  letter-spacing: -0.01em;
  color: var(--v2-ink);
  transition: background 0.12s, color 0.12s;
}
/* GeneratePress paints its own hover background from the Customizer, so
   this needs !important to land. A tint of the page's own paper, not a
   new colour. */
.main-navigation .main-nav ul.menu ul.sub-menu a:hover,
.main-navigation .main-nav ul.menu ul.sub-menu a:focus,
.main-navigation .main-nav ul.menu ul.sub-menu .current-menu-item > a {
  background: var(--v2-paper-2) !important;
  color: var(--v2-ink) !important;
}

/* The Log in button inverts on hover: navy fill, white label. Measured
   while hovered, the label was rgb(199,51,51) — the legacy red on navy,
   which is unreadable and was visible as soon as Rob opened the menu.

   Two reasons the obvious selector lost. The hover is on the LI (the menu
   stays open while the pointer is over either), so `a:hover` alone misses
   it once the pointer moves down into the panel. And the legacy rule is
   `.main-navigation .main-nav .menu > li > a` carrying !important, so the
   override has to match that depth rather than the shorter form. */
.main-navigation .main-nav .menu > li.rl-nav-login:hover > a,
.main-navigation .main-nav .menu > li.rl-nav-login.sfHover > a,
.main-navigation .main-nav .menu > li.rl-nav-login > a:hover,
.main-navigation .main-nav .menu > li.rl-nav-login > a:focus {
  background: var(--v2-ink) !important;
  border-color: var(--v2-ink) !important;
  color: #fff !important;
}

/* ── Mobile menu: collapsible groups ──────────────────────────────
   Codex point 7: "Collapse Services and Tools into expandable groups,
   keeping the main destinations immediately visible."

   The menu previously opened with EVERY sub-menu expanded: six Services
   questions and four Tools, so Case Studies, For Partners, Insights and
   About were pushed below ten sub-items on a 375px screen. That was not an
   oversight — expanding everything fixed a real float bug, recorded at the
   legacy rule around line 6579, where a narrow sub-menu let the following
   top-level items wrap up beside it.

   So the float fix is KEPT (width:100%, float:none) and only the default
   visibility changes: collapsed until its parent is opened. Toggling is
   driven by aria-expanded on the parent link, set by the small script in
   functions.php, so the state is exposed to screen readers rather than
   being a purely visual trick.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Collapsed by default. The legacy block sets these open with
     !important, so these must match it. */
  .main-navigation.toggled .main-nav ul.menu > li.menu-item-has-children > .sub-menu {
    display: none !important;
  }
  .main-navigation.toggled .main-nav ul.menu > li.menu-item-has-children > a[aria-expanded="true"] + .sub-menu {
    display: block !important;
  }
  /* The parent is a control now, so it must be clickable: the legacy rule
     disables pointer events on href="#" parents. */
  .main-navigation.toggled .main-nav ul.menu > li.menu-item-has-children > a[href="#"] {
    pointer-events: auto;
    cursor: pointer;
  }
  /* A caret that turns, so open/closed is visible as well as announced. */
  .main-navigation.toggled .main-nav ul.menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0.4em; height: 0.4em;
    margin-left: 0.5em;
    vertical-align: middle;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.1em, -0.1em);
    transition: transform 0.15s;
  }
  .main-navigation.toggled .main-nav ul.menu > li.menu-item-has-children > a[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-0.1em, -0.1em);
  }
  /* The Contact CTA keeps its button shape in the mobile list; the legacy
     block strips Log in back to a plain item, which still applies. */
  .main-navigation.toggled .main-nav ul.menu > li.nav-cta > a::after { content: none; }

  /* ────────────────────────────────────────────────────────────────
     THE OPEN MENU, reworked 15 October. The v2 review: "refine the
     mobile menu's older centred links and pale panel with stronger
     alignment and comfortable tap spacing. Preserve the working Menu and
     Tools controls."

     Both faults, measured at 375px before this change:

       - every link text-align:center, so six items of different lengths
         had six different left edges and nothing to read down;
       - each link 30px tall, against the 44px that is the floor for a
         comfortable touch target. Contact, being a button, was 40.

     LEFT-ALIGNED, so the items share an edge with the logo above them
     and with every page the menu opens onto. Centred navigation is the
     older language this review is clearing out; it is also harder to
     scan, because the eye has to find the start of each line.

     48px MINIMUM, set with min-height and centred content rather than
     padding alone, so a wrapped item does not become a 96px row.

     THE PALE PANEL GOES for the paper the rest of the site uses, with a
     rule under each item instead of a fill around the group: the same
     move as the policy pages and the partner introduction. The caret
     controls, the submenu behaviour and the Contact button above are all
     untouched, which is what "preserve the working Menu and Tools
     controls" asks for. */
  .main-navigation.toggled {
    background: var(--v2-paper, #fdfcfa);
    border-bottom: 1px solid var(--v2-rule, rgba(1, 0, 61, 0.1));
  }
  .main-navigation.toggled .main-nav ul.menu > li > a,
  .main-navigation.toggled .main-nav ul.menu .sub-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.5rem 1.5rem;
    text-align: left;
    justify-content: flex-start;
  }
  .main-navigation.toggled .main-nav ul.menu > li:not(.nav-cta) > a {
    border-bottom: 1px solid var(--v2-rule, rgba(1, 0, 61, 0.1));
  }
  /* The caret sits at the far end of the row rather than against the
     word, so the whole row reads as one control and the carets line up
     down the right edge. BOTH selectors: Log in draws its caret from a
     different rule and is not a .menu-item-has-children, so the first
     version left that one caret jammed against the word while the others
     had moved. */
  .main-navigation.toggled .main-nav ul.menu > li.menu-item-has-children > a::after,
  .main-navigation.toggled .main-nav ul.menu > li > a::after,
  .main-navigation.toggled .main-nav ul.menu > li.rl-nav-login > a::after {
    margin-left: auto;
    margin-right: 0.35rem;
  }
  /* Submenu items are indented rather than centred, so the nesting is
     visible without a second type size. */
  .main-navigation.toggled .main-nav ul.menu .sub-menu > li > a {
    padding-left: 2.75rem;
    min-height: 44px;
  }
  /* The Contact button keeps its shape and is the one item that stays
     inset from the rules, because it is an action and not a destination. */
  .main-navigation.toggled .main-nav ul.menu > li.nav-cta {
    padding: 0.75rem 1.5rem;
    /* Its own rule above, since the button is inset and so cannot carry
       the shared one on its link like every other row does. */
    border-top: 1px solid var(--v2-rule, rgba(1, 0, 61, 0.1));
  }
  .main-navigation.toggled .main-nav ul.menu > li.nav-cta > a {
    justify-content: center;
    min-height: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM PAGE (.rl-ds)
   Stage 0 of docs/SITE-MIGRATION-PLAN-2026-09-28.md. Local only.

   Styled plainly on purpose: this page documents the language, it does
   not perform it. Specimens sit on a neutral ground so the thing being
   shown is the only thing competing for attention.
   ═══════════════════════════════════════════════════════════════════ */
/* Codex point 5: someone checking an export size should not have to read
   the page. At-a-glance answers first, contents next, detail below. */
.rl-ds__glance {
  /* 13rem, not 11: at 11 the export sizes wrapped onto two lines and the row
     read ragged. This is a quick-reference block, so each answer should be one
     line. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem; margin-top: 2.5rem;
  padding: 2rem 0; border-top: 1px solid var(--v2-rule);
  border-bottom: 1px solid var(--v2-rule);
}
.rl-ds__glance dt {
  font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--v2-ink-quiet); margin-bottom: 0.35rem;
}
.rl-ds__glance dd { margin: 0; font-size: var(--v2-body); color: var(--v2-ink); }
.rl-ds__glance dd + dd { margin-top: 0.2rem; }
.rl-ds__toc { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.rl-ds__toc a { font-size: var(--v2-small); color: var(--v2-ink-soft); text-decoration: none; border-bottom: 1px solid var(--v2-rule); padding-bottom: 2px; }
.rl-ds__toc a:hover { color: var(--v2-ink); border-bottom-color: currentColor; }
.rl-ds__head { padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.rl-ds__head h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.rl-ds .rl-ds__lead {
  font-size: var(--v2-lead); color: var(--v2-ink-soft);
  max-width: var(--v2-measure); margin: 1.5rem 0 0;
}
.rl-ds .rl-ds__section { padding-block: clamp(3.5rem, 5.5vw, 5rem); }
/* Codex point 4: the page discourages hairline section separators, then used
   them on itself. This is a documented exception, not an oversight: a
   reference page is scanned by section rather than read in order, and the
   rules double as anchors for the contents list. Marketing pages still use
   space and tone. */
.rl-ds__section + .rl-ds__section { border-top: 1px solid var(--v2-rule); }
/* Space under a heading scales with the heading, because a 40px line needs
   more air beneath it than a 20px one to read as a title rather than a first
   line of the paragraph. em, not rem, so the two stay locked together.

   NOTE THE .rl-ds PREFIX. The v2 reset at the top of this block sets
   `.rl-v2 h1, .rl-v2 h2, .rl-v2 h3 { margin: 0 }`, which is (0,1,1) and beats
   a bare .rl-ds__h2 at (0,1,0). Without the prefix every heading margin here
   computes to 0px and the headings touch their body copy, which is exactly
   how this page shipped. */
.rl-ds h2.rl-ds__h2 { font-size: var(--v2-h2); margin: 0 0 0.45em; }
.rl-ds h3.rl-ds__h3 { font-size: var(--v2-h3); margin: 3rem 0 0.75em; }
.rl-ds .rl-ds__head h1 { margin: 0; }
.rl-ds .rl-ds__note {
  font-size: var(--v2-body); color: var(--v2-ink-soft);
  max-width: 44rem; margin: 0 0 3rem;
}

/* ── Component specimens ──────────────────────────────────────────
   Each entry renders the real template, so the demo cannot drift from
   the component. The surrounding frame is deliberately plain: it is a
   container for the thing being shown, not a design of its own. */
.rl-ds__component + .rl-ds__component {
  margin-top: 4rem; padding-top: 4rem;
  border-top: 1px solid var(--v2-rule);
}
.rl-ds__component-head {
  display: flex; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 0.75rem;
}
/* The .rl-ds h3 rule carries 3rem of top margin for its in-body use, which
   pushed every component title away from its own rule. Specificity has to
   match `.rl-ds h3.rl-ds__h3` to win. */
.rl-ds .rl-ds__component-head h3.rl-ds__h3 { margin: 0; }
.rl-ds__component-path {
  font-size: var(--v2-small); color: var(--v2-ink-quiet);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rl-ds .rl-ds__component-what {
  font-size: var(--v2-body); color: var(--v2-ink-soft);
  max-width: var(--v2-measure); margin: 0 0 0.5rem;
}
.rl-ds .rl-ds__component-replaces {
  font-size: var(--v2-small); color: var(--v2-ink-quiet);
  margin: 0 0 1.5rem;
}

/* The specimen sits on the page's own paper so it reads as it will in
   use, inside a hairline that marks where the component starts and ends.
   The guide permits itself rules the marketing pages do not: a reference
   page is scanned, and the boundary is the information. */
.rl-ds__component-demo {
  border: 1px solid var(--v2-rule);
  background: var(--v2-paper);
  overflow: hidden;
}
/* A component designed for a dark ground is shown on one. */
.rl-ds__component-demo--dark { background: var(--v2-ink); }
/* Sections carry their own full-section padding, which is correct on a page
   and far too much inside a 1-of-6 specimen frame. */
.rl-ds .rl-ds__component-demo > section { padding-block: 2.5rem; }

.rl-ds__slots {
  display: grid; gap: 0.85rem; margin: 1.5rem 0 0;
}
.rl-ds__slot {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 1.5rem; align-items: baseline;
}
.rl-ds__slot dt { font-size: var(--v2-small); }
.rl-ds__slot dt code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--v2-ink);
}
.rl-ds__slot-req {
  font-size: var(--v2-micro); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--v2-accent-text);
}
.rl-ds__slot dd {
  margin: 0; font-size: var(--v2-small);
  color: var(--v2-ink-soft); line-height: 1.6;
}
@media (max-width: 700px) {
  .rl-ds__slot { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ── Chrome states ────────────────────────────────────────────────
   Header and footer rules. No live specimen: the page already carries a
   real header, and a second one would be a copy that could drift. */
.rl-ds__chrome-states { display: grid; gap: 0; }
.rl-ds__chrome-state {
  display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 0.35rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--v2-rule);
}
.rl-ds .rl-ds__chrome-what {
  margin: 0; font-size: var(--v2-small);
  font-weight: var(--v2-w-medium); color: var(--v2-ink);
}
.rl-ds .rl-ds__chrome-rule {
  margin: 0; font-size: var(--v2-small); color: var(--v2-ink);
}
/* The reason sits under the rule in the same column, quieter: the rule is
   what you came for, the reason is what stops someone reverting it. */
.rl-ds .rl-ds__chrome-why {
  grid-column: 2; margin: 0.35rem 0 0;
  font-size: var(--v2-small); color: var(--v2-ink-soft); line-height: 1.6;
}
@media (max-width: 700px) {
  .rl-ds__chrome-state { grid-template-columns: 1fr; }
  .rl-ds .rl-ds__chrome-why { grid-column: 1; }
}

/* Type specimens: the sample, then its numbers. */
.rl-ds__specimen {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem; align-items: start;
  /* The display sample is 64px tall. At 1.75rem padding the samples nearly
     touched and the section read as one dense block, the opposite of what a
     type scale should show.

     The metadata column is five rows tall whatever the sample is, so it sets
     the row height and the small specimens floated in empty space. Aligning
     the metadata to the sample's baseline row and letting the row collapse to
     its content keeps each specimen the size it actually is. */
  padding: 2.25rem 0; border-top: 1px solid var(--v2-rule);
}
/* A transparent container. It must impose NO type of its own, or the specimen
   inside it stops being a faithful copy of the component. */
.rl-ds__specimen-demo { color: var(--v2-ink); overflow-wrap: anywhere; }
.rl-ds__specimen-demo > * { margin: 0; }
.rl-ds .rl-ds__meta { margin: 0; display: grid; gap: 0.3rem; align-content: start; }
.rl-ds__meta > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; }
.rl-ds__meta dt {
  font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--v2-ink-quiet); margin: 0;
}
.rl-ds__meta dd { font-size: var(--v2-small); color: var(--v2-ink-soft); margin: 0; }
.rl-ds code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem; color: var(--v2-ink);
  background: var(--v2-paper-2); padding: 0.1rem 0.35rem; border-radius: 3px;
}
/* In the library the same treatment repeated 21 times stopped reading as
   inline code and started reading as a grid of chips, which is the exact
   thing this page tells you not to do. Monospace alone marks a filename. */
.rl-ds__lib code, .rl-ds__lib-files code, .rl-ds__logo-meta code {
  background: none; padding: 0; border-radius: 0; color: var(--v2-ink-quiet);
}
/* The dot separators were for a plain inline list of filenames. Now that each
   item is a thumbnail, they read as stray marks between images. */

/* The brand palette, laid out like the reference sheet Rob supplied: equal
   blocks butted together, names and values beneath. No gaps between chips,
   because the point is the relationship between the four. */
.rl-ds__brand { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1.5rem; }
.rl-ds__brand-chip { aspect-ratio: 3 / 2.4; }
.rl-ds__brand-item:first-child .rl-ds__brand-chip { border-radius: 4px 0 0 4px; }
.rl-ds__brand-item:last-child .rl-ds__brand-chip {
  border-radius: 0 4px 4px 0; box-shadow: inset 0 0 0 1px var(--v2-rule);
}
.rl-ds .rl-ds__brand-name { margin: 1rem 0 0.35rem; font-weight: 500; font-size: var(--v2-body); }
.rl-ds .rl-ds__brand-hex,
.rl-ds .rl-ds__brand-rgb { margin: 0; font-size: var(--v2-small); color: var(--v2-ink-soft); }
.rl-ds .rl-ds__brand-use { margin: 0.6rem 1.5rem 0 0; font-size: var(--v2-small); color: var(--v2-ink-quiet); line-height: 1.55; }
@media (max-width: 760px) {
  .rl-ds__brand { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
  .rl-ds__brand-item .rl-ds__brand-chip { border-radius: 4px; }
}

/* Colour swatches. */
.rl-ds__swatches, .rl-ds__ratios {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1.75rem;
}
.rl-ds__chip { height: 4.5rem; border-radius: 4px; margin-bottom: 0.75rem; }
.rl-ds__swatch-name { font-weight: 500; font-size: var(--v2-body); margin: 0; }
.rl-ds .rl-ds__swatch-token { margin: 0.5rem 0 0.35rem; }
.rl-ds__swatch-use { font-size: var(--v2-small); color: var(--v2-ink-soft); margin: 0; }
.rl-ds .rl-ds__swatch-contrast {
  font-size: var(--v2-micro); color: var(--v2-ink-quiet);
  margin: 0.4rem 0 0; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Figure ratios, drawn at their real proportions. */
.rl-ds__ratio-box {
  background: var(--v2-paper-2);
  border: 1px solid var(--v2-rule); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--v2-small); color: var(--v2-ink-quiet);
  margin-bottom: 0.75rem;
}
.rl-ds__figure { max-width: 40rem; margin: 0 0 1.5rem; }
.rl-ds__rules { max-width: 44rem; padding-left: 1.1rem; margin: 0; }
.rl-ds__rules li {
  font-size: var(--v2-body); color: var(--v2-ink-soft);
  line-height: 1.6; margin-bottom: 0.6rem;
}

/* Action specimens, on both grounds. */
.rl-ds__actions-row {
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
  padding: 1.75rem; border-radius: 6px; background: var(--v2-paper-2);
  margin-bottom: 1rem;
}
.rl-ds__actions-row--dark { background: var(--v2-ink); }

/* Space bars, drawn at their real height. */
.rl-ds__spaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 2rem; align-items: end; }
.rl-ds__space-bar { width: 100%; background: var(--v2-ink); border-radius: 3px; margin-bottom: 0.75rem; }
.rl-ds .rl-ds__space-value { font-size: var(--v2-small); color: var(--v2-ink-quiet); margin: 0.5rem 0 0; }

/* The do-not list. */
.rl-ds__dont { display: grid; gap: 1.5rem; max-width: 46rem; }
/* Codex point 4: this list used a red left border on every item, which
   contradicts the rule on the same page that red marks actions only. A quiet
   rule carries the same grouping without spending the accent. */
.rl-ds__dont-item { padding-left: 1rem; border-left: 2px solid var(--v2-rule); }
.rl-ds .rl-ds__dont-no { font-weight: 500; font-size: var(--v2-body); margin: 0 0 0.6rem; }
.rl-ds .rl-ds__dont-why, .rl-ds .rl-ds__dont-do {
  font-size: var(--v2-small); color: var(--v2-ink-soft); margin: 0 0 0.5rem; line-height: 1.6;
}

@media (max-width: 760px) {
  .rl-ds__specimen { grid-template-columns: 1fr; gap: 1rem; }
}

/* Design system: hover specimens shown beside resting states, so both are
   visible at once (a hover state you have to hover to see is no use in a
   style guide). .rl-ds__is-hover replays each :hover rule. */
.rl-ds__states { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 46rem; margin-bottom: 0.5rem; }
.rl-ds .rl-ds__state-head { font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--v2-ink-quiet); margin: 0 0 0.75rem; }
.rl-ds .rl-ds__actions-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 46rem; align-items: start; }
.rl-ds__state-col { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.rl-ds__state-col .rl-v2__link { margin-top: 0; }
/* These MUST match the real :hover rules exactly. The first version used
   #a82c23 for the primary hover while the real one is #c02f25, and left the
   ghost hover with the filled red background, so the guide was documenting
   colours the site does not use. Values below are copied from the rules they
   illustrate; change them together or not at all. */
.rl-v2 .rl-ds__is-hover.rl-v2__btn { background: #c02f25; color: #fff !important; }
.rl-v2 .rl-ds__is-hover.rl-v2__btn--ink { background: #16163f; }
.rl-v2 .rl-ds__is-hover.rl-v2__btn--ghost {
  background: transparent; border-bottom-color: #fff; color: #fff !important;
}
.rl-v2 a.rl-ds__is-hover.rl-v2__link { color: var(--v2-ink); }
.rl-ds__actions-row--dark .rl-ds__state-head { color: rgba(255,255,255,0.55); }

/* Form field specimens. The target the HubSpot embed gets styled into. */
.rl-ds__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 40rem; }
.rl-ds__field { display: block; }
.rl-ds__field--wide { grid-column: 1 / -1; }
.rl-ds__field-label { display: block; font-size: var(--v2-small); font-weight: 500; margin-bottom: 0.4rem; }
.rl-ds__form input, .rl-ds__form textarea {
  width: 100%; font-family: var(--v2-font-body); font-size: var(--v2-body);
  color: var(--v2-ink); background: var(--v2-paper);
  /* --v2-control-border, not ink-faint. A form border is a control boundary
     and needs 3:1 against its background to be perceivable; ink-faint is
     2.33:1, which is a decoration value. Two different jobs, two tokens. */
  border: 1px solid var(--v2-control-border); border-radius: 4px;
  padding: 0.7rem 0.85rem; box-sizing: border-box;
}
/* No focus rule of its own: the site-wide :focus-visible rule at the top of
   this file already covers inputs, and a second one here would be another
   copy to drift. The specimen below borrows that rule by selector. */
.rl-ds__form input::placeholder, .rl-ds__form textarea::placeholder { color: var(--v2-ink-quiet); }
.rl-ds .rl-ds__field-note { grid-column: 1 / -1; font-size: var(--v2-small); color: var(--v2-ink-quiet); margin: 0.5rem 0 0; max-width: 34rem; }
/* States a reference page has to show. Focus matters most: it is a keyboard
   user's only indication of where they are.

   These specimens must never re-declare a state. The first version did, and
   drifted immediately: it drew the focus ring navy at 3px offset while the
   real rule is coral at 2px, and gave inputs a third value again. So the
   specimen classes are ADDED to the real rules' selector lists instead, at
   the site-wide focus rule near the top of this file. Changing the real rule
   changes the specimen, because they are the same declaration. */
.rl-v2 .rl-ds__is-disabled.rl-v2__btn {
  background: var(--v2-ink-faint); color: #fff !important; cursor: not-allowed;
}
/* The image library. Rob asked for "Scan = this, Pro = this": a named file
   per product, so that two pages showing the same thing show the same file.
   Rows rather than cards, because the reader is looking one product up, not
   comparing all six. */
.rl-ds__lib { margin-top: 2rem; }
.rl-ds__lib-row {
  display: grid; grid-template-columns: 11rem 1fr 13rem; gap: 2rem;
  padding: 1.75rem 0; align-items: start;
}
.rl-ds__lib-row + .rl-ds__lib-row { border-top: 1px solid var(--v2-rule); }
.rl-ds .rl-ds__lib-name { font-family: var(--v2-font-display); font-size: var(--v2-h3); font-weight: var(--v2-w-medium); margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.rl-ds__lib-prefix { margin: 0; font-size: var(--v2-small); color: var(--v2-ink-quiet); }
.rl-ds .rl-ds__lib-shows { margin: 0 0 1.1rem; font-size: var(--v2-body); color: var(--v2-ink-soft); line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
/* Each asset is shown, not just named: picking an image from a list of
   filenames means opening six tabs to find the right one. */
.rl-ds__lib-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.rl-ds__lib-files li { font-size: var(--v2-small); }
.rl-ds__asset { display: block; width: 10.5rem; text-decoration: none; color: inherit; }
.rl-ds__asset-thumb {
  /* 6px, because this is a figure. The page's own rule is that radius varies
     by purpose: 4px on controls, 6px on images. A thumbnail is an image. */
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 6px; background: var(--v2-paper-2);
  box-shadow: inset 0 0 0 1px var(--v2-rule);
}
.rl-ds__asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-ds__asset-name { display: block; margin-top: 0.4rem; line-height: 1.35; }
.rl-ds__asset-name code { font-size: 0.7rem; overflow-wrap: anywhere; }
/* Quiet by default, because nineteen accent-red links would break the page's
   own rule that red marks the one action in a section. But quiet has a floor:
   the first version used --v2-ink-faint at 2.33:1, which this page explicitly
   says is for rules and borders and NEVER for text. A reference page breaking
   its own rule is the worst kind of defect, so this takes ink-quiet, the
   quietest token the page permits for words. */
.rl-ds .rl-ds__asset-open {
  display: block; margin-top: 0.15rem;
  font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--v2-ink-quiet);
}
.rl-ds__asset:hover .rl-ds__asset-open { color: var(--v2-accent-text); text-decoration: underline; }
.rl-ds__asset:hover .rl-ds__asset-thumb { box-shadow: inset 0 0 0 1px var(--v2-ink-faint); }

/* The approved logo masters, at the height the strip actually renders. */
.rl-ds__logos { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.rl-ds__logo { display: block; text-decoration: none; color: inherit; }
.rl-ds__logo-box {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: 0 0.5rem;
}
/* NO SIZE OR TREATMENT HERE. The specimen carries .rl-v2__logos so it renders
   through the real component rules, which is the only way this page can be
   trusted about them. The first version hard-coded 40px at 0.85 opacity and
   called it "the height the client strip renders at"; the component actually
   uses 26px at 0.6, so the guide was documenting a treatment nothing used.
   Only the hover reveal is local, because that is a guide affordance. */
.rl-ds__logo-meta { display: block; margin-top: 0.4rem; font-size: var(--v2-micro); color: var(--v2-ink-quiet); }
.rl-ds .rl-ds__logo:hover .rl-ds__logo-box img { filter: none; opacity: 1; }
.rl-ds__lib-meta { margin: 0; }
.rl-ds__lib-meta div + div { margin-top: 0.6rem; }
.rl-ds__lib-meta dt { font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--v2-ink-quiet); }
.rl-ds__lib-meta dd { margin: 0.15rem 0 0; font-size: var(--v2-small); color: var(--v2-ink); }

/* Logos and share cards: label/value pairs, one shape for both. */
.rl-ds__rulelist { margin: 2rem 0 0; }
.rl-ds__rulelist div { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; padding: 1.1rem 0; }
.rl-ds__rulelist div + div { border-top: 1px solid var(--v2-rule); }
.rl-ds__rulelist dt { font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--v2-ink-quiet); }
/* These values carry long unbreakable strings (wp_yoast_indexable.open_graph_
   image_meta, scripts/make-page-cards.mjs), which pushed the grid 2px past the
   viewport at 375. Let them break rather than widen the page. */
.rl-ds__rulelist dd {
  margin: 0; font-size: var(--v2-body); color: var(--v2-ink-soft); line-height: 1.65;
  overflow-wrap: anywhere; min-width: 0;
}

/* The share card diagram shows the safe area to scale, because "keep it in
   the middle" is the rule people get wrong and a sentence does not fix. */
.rl-ds__share { display: grid; grid-template-columns: 22rem 1fr; gap: 3rem; align-items: start; }
.rl-ds__share-demo { margin-top: 2rem; }
.rl-ds__share-card {
  aspect-ratio: 1200 / 627; background: var(--v2-ink); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.rl-ds__share-safe {
  aspect-ratio: 1 / 1; height: 100%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75); line-height: 1.6;
}
.rl-ds .rl-ds__share-cap { margin: 0.9rem 0 0; font-size: var(--v2-small); color: var(--v2-ink-quiet); }

@media (max-width: 860px) {
  .rl-ds__lib-row { grid-template-columns: 1fr; gap: 1rem; }
  .rl-ds__rulelist div { grid-template-columns: 1fr; gap: 0.4rem; }
  .rl-ds__share { grid-template-columns: 1fr; gap: 1.5rem; }
  .rl-ds__share-demo { margin-top: 0; max-width: 22rem; }
}

/* Codex point 6: the page stated the mobile-crop rule in words but showed no
   example, so the rule it most needed to demonstrate was the one it only
   asserted. Same source file both sides: full frame at desktop width, and the
   region the caption names at phone width. The phone side is scaled and
   positioned rather than a separate export, because the real crops are stage 6
   of the migration and need choosing per image, not guessing here. */
.rl-ds__crop {
  display: grid; grid-template-columns: 1fr 15rem; gap: 2rem; align-items: start;
  margin-top: 1.5rem;
}
.rl-ds__crop-frame { overflow: hidden; border-radius: 6px; background: var(--v2-paper-2); }
.rl-ds__crop-frame--wide { aspect-ratio: 16 / 10; }
.rl-ds__crop-frame--wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-ds__crop-frame--phone { aspect-ratio: 4 / 5; position: relative; }
/* The crop is done with object-fit plus object-position, not by scaling an
   absolutely-positioned image: `max-width:100%` from the figure rules clamped
   the scaled width back to the frame, and `height:auto` on an absolute image
   computed to zero, so the demo rendered the whole interface squashed into a
   corner. That was the exact failure the caption tells you to avoid. */
.rl-ds__crop-frame--phone img {
  /* object-fit alone only CLIPS: it showed the whole interface at small scale
     with the right edge cut off, which demonstrates the mistake rather than
     the rule. A crop has to magnify, so the image is sized to a multiple of
     the frame and offset to the region the caption names: the total and the
     leading hazards. */
  position: absolute; top: 0; left: 0;
  width: 300%; height: auto; max-width: none;
  transform: translate(-50%, -19%);
  display: block;
}
@media (max-width: 760px) {
  .rl-ds__crop { grid-template-columns: 1fr; }
  .rl-ds__crop-item--phone { max-width: 15rem; }
}

.rl-ds__field--error input { border-color: var(--v2-accent-text); }
.rl-ds .rl-ds__field-msg { font-size: var(--v2-small); margin: 0.5rem 0 0; }
.rl-ds__field-msg--error { color: var(--v2-accent-text); }
.rl-ds__field-msg--ok { color: #1d6b3f; }
/* The confirmation after a completed form, which is a different state from a
   valid field and belongs in a different place on the page. */
.rl-ds .rl-ds__sent {
  margin: 1rem 0 0; padding: 0.85rem 1rem; max-width: 34rem;
  background: var(--v2-paper-2); border-left: 2px solid #1d6b3f;
  font-size: var(--v2-body); color: var(--v2-ink);
}

@media (max-width: 760px) {
  .rl-ds .rl-ds__actions-row, .rl-ds__form { grid-template-columns: 1fr; }
  /* Codex point 6: the two column headings stacked together above both
     example groups, so neither label sat with what it described. Hide them
     and label each group inline instead. */
  .rl-ds__states { display: none; }
  .rl-ds__state-col::before {
    content: attr(data-state);
    display: block; width: 100%;
    font-size: var(--v2-micro); text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--v2-ink-quiet); margin-bottom: 0.25rem;
  }
  .rl-ds__actions-row--dark .rl-ds__state-col::before { color: rgba(255,255,255,0.55); }
}

/* Qualifications stay beside the calculation they qualify. */
.rl-v2 .rl-v2__method-qualification { margin-top: 1.5rem; max-width: 80ch; font-size: var(--v2-small); color: var(--v2-ink-soft); }

/* === BLUEPRINT FINDINGS ======================================= */
/* The numbered body of a per-account blueprint, ordered by how certain
   each finding is rather than by what it might cost.

   EVERY SELECTOR DOUBLES THE PREFIX. `.rl-v2 p` is (0,1,1); a bare
   `.rl-v2__finding-p` is (0,1,0) and loses to it regardless of source
   order. This is the repository's most frequently rediscovered trap, and
   the findings body is almost entirely paragraphs, so it would have hit
   every one of them. */

.rl-v2 .rl-v2__findings { padding-block: var(--v2-gap-section); }

.rl-v2 .rl-v2__findings-head { max-width: none; }
.rl-v2 .rl-v2__findings-intro,
.rl-v2 .rl-v2__findings-caveat { max-width: var(--v2-measure); }
.rl-v2 .rl-v2__findings-intro {
  margin-top: 1rem;
  font-size: var(--v2-lead);
  color: var(--v2-ink-quiet);
}
/* The honesty note: what this page can and cannot tell them. A panel
   rather than a paragraph because it qualifies everything below it, and a
   reader who skips it should still see that it was said. */
.rl-v2 .rl-v2__findings-caveat {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--v2-panel);
  border-radius: var(--v2-panel-radius);
  font-size: var(--v2-small);
  color: var(--v2-ink-quiet);
}

/* The legend. Declared once, above the findings, so the scale is known
   before the first tag is met. */
/* THE LEGEND BREAKS OUT OF THE HEAD'S MEASURE. The head is capped at
   --v2-measure so the intro sets at a readable line length, but the legend
   is a scale: four tags in descending order of certainty, and a wrap after
   the third breaks the ordering a reader is meant to take in at a glance.
   It gets the full width and stays on one line to 700px. */
.rl-v2 .rl-v2__findings-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  width: max-content;
  max-width: 100%;
}

/* THE TAGS. Four levels, and the visual weight descends with the
   certainty: a solid navy fill for a published decision, an outline for a
   reasoned inference, and the faintest treatment for what nobody knows
   yet. A reader should be able to rank them without reading the words.

   NOT COLOUR ALONE. Each tag carries its own words, so the distinction
   survives greyscale printing and colour blindness. The artwork's
   red/amber/green band is a different scale for a different purpose and
   is deliberately not reused here. */
.rl-v2 .rl-v2__ftag {
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.1875rem;
  font-family: var(--v2-font-display);
  font-size: var(--v2-micro);
  font-weight: var(--v2-w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rl-v2 .rl-v2__ftag--decided   { background: var(--v2-ink); color: #fff; border-color: var(--v2-ink); }
.rl-v2 .rl-v2__ftag--happening { background: transparent; color: var(--v2-ink); border-color: var(--v2-ink); }
/* --rl-coral-text, not --v2-accent: the 3 October contrast pass found
   coral at 3.56:1 on white, below AA for text this size. */
.rl-v2 .rl-v2__ftag--checking  { background: transparent; color: var(--rl-coral-text); border-color: var(--rl-coral-text); }
.rl-v2 .rl-v2__ftag--uncertain { background: transparent; color: var(--v2-ink-quiet); border-color: var(--v2-rule); }

.rl-v2 .rl-v2__findings-list {
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* A rule above each finding, not a box around it. Same reasoning as the
   blocks element: a border forces every finding to the height of the
   longest, so a two-line finding and one with a six-row table are made to
   look equally weighty when they are not. */
.rl-v2 .rl-v2__finding {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: 2.75rem;
  border-top: 1px solid var(--v2-rule);
}
.rl-v2 .rl-v2__finding:last-child { border-bottom: 1px solid var(--v2-rule); }

.rl-v2 .rl-v2__finding-n {
  font-family: var(--v2-font-display);
  font-size: 1.5rem;
  font-weight: var(--v2-w-medium);
  color: var(--v2-accent);
  line-height: 1.1;
}
.rl-v2 .rl-v2__finding-h3 {
  margin: 0.75rem 0 0;
  font-size: var(--v2-h3);
  font-weight: var(--v2-w-medium);
  color: var(--v2-ink);
}
.rl-v2 .rl-v2__finding-p {
  margin-top: 0.875rem;
  max-width: 44rem;
  color: var(--v2-ink-quiet);
}

/* The evidence table. Three columns: the place, what the published source
   says, and what that means in plain terms. The third column is where the
   translation happens and is the reason this beats a paragraph.

   IT SCROLLS INSIDE ITS OWN CONTAINER. A table of site names and policy
   wording cannot reflow to 375px, and the alternative to a scroll region
   is the page itself scrolling sideways, which sitecheck fails. */
.rl-v2 .rl-v2__finding-body { min-width: 0; }

/* THE SCROLL REGION ONLY WORKS IF ITS ANCESTORS CAN SHRINK. A grid item
   defaults to min-width:auto, which resolves to its content width, so a
   six-column evidence table widened the column, pushed the page past the
   viewport, and the wrapper's overflow-x never engaged. Both the track
   (minmax(0,1fr)) and the item (min-width:0) have to allow it. Sitecheck
   found 123px of horizontal overflow at 375px; nothing is visible at
   desktop widths, which is exactly why the gate exists.

   Keyboard access: tabindex and a label make the region focusable, so a
   keyboard user can scroll a table they cannot drag. */
.rl-v2 .rl-v2__finding-tablewrap {
  margin-top: 1.5rem;
  max-width: 48rem;
  overflow-x: auto;
}
.rl-v2 .rl-v2__finding-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--v2-small);
}
.rl-v2 .rl-v2__finding-table th {
  padding: 0 0.875rem 0.625rem 0;
  border-bottom: 1px solid var(--v2-ink);
  font-family: var(--v2-font-display);
  font-size: var(--v2-micro);
  font-weight: var(--v2-w-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-ink-quiet);
  text-align: left;
  white-space: nowrap;
}
.rl-v2 .rl-v2__finding-table td {
  padding: 0.875rem 0.875rem 0.875rem 0;
  border-bottom: 1px solid var(--v2-rule);
  color: var(--v2-ink-quiet);
  vertical-align: top;
}
/* The place names carry the weight: they are what the reader scans for. */
.rl-v2 .rl-v2__finding-table td:first-child { color: var(--v2-ink); font-weight: var(--v2-w-medium); }

/* A verbatim quotation from a published source. The panel marks it as
   someone else's words rather than ours, which matters on a page whose
   authority rests on the distinction. */
.rl-v2 .rl-v2__finding-quote {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.5rem;
  max-width: 44rem;
  background: var(--v2-panel);
  border-radius: var(--v2-panel-radius);
}
.rl-v2 .rl-v2__finding-quote blockquote { margin: 0; }
.rl-v2 .rl-v2__finding-quote p { margin: 0; color: var(--v2-ink); }
.rl-v2 .rl-v2__finding-quote figcaption {
  margin-top: 0.625rem;
  font-size: var(--v2-small);
  color: var(--v2-ink-faint);
}

/* THE QUESTION IT RAISES. A coral rule on the left, because this is the
   one line in each finding that asks something of the reader rather than
   telling them something. It is what turns a report into a conversation,
   and the element requires it for that reason. */
.rl-v2 .rl-v2__finding-q {
  margin-top: 1.75rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--v2-accent);
  max-width: 44rem;
}
.rl-v2 .rl-v2__finding-q-label {
  display: block;
  font-family: var(--v2-font-display);
  font-size: var(--v2-micro);
  font-weight: var(--v2-w-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rl-coral-text);
}
.rl-v2 .rl-v2__finding-q-text {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  color: var(--v2-ink);
}

/* The number moves above the finding rather than beside it: a 4.5rem
   gutter on a 375px screen leaves too little for the heading. */
@media (max-width: 700px) {
  .rl-v2 .rl-v2__finding { grid-template-columns: 1fr; gap: 0; }
  .rl-v2 .rl-v2__finding-n { font-size: 1.125rem; }
  .rl-v2 .rl-v2__finding-h3 { margin-top: 0.375rem; }
}

/* === BLUEPRINT PAGE CHROME ==================================== */
/* Brief findings: one left-hand question and one readable explanation.
   Asset identity and heading sit above both columns. The photo and evidence
   share the next row, so their top alignment survives wrapped headings.
   Opt-in; legacy long-form blueprints retain their original composition. */
.rl-v2 .rl-v2__findings[data-layout="brief"] { padding-block: var(--v2-gap-section-compact); }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__findings-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-3) var(--v2-gap-block);
  align-items: start;
}
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__findings-head > .v2-label { grid-column: 1 / -1; margin: 0; }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__findings-intro { margin: 0; }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__findings-list { margin-top: var(--v2-gap-block); }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-3) var(--v2-gap-block);
  padding-block: var(--v2-gap-block);
  /* The document already reserves 122px for its sticky header. */
  scroll-margin-top: 0;
}
.rl-v2__finding-identity { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); }
.rl-v2 .rl-v2__finding-identity .rl-v2__finding-n { color: var(--v2-ink-quiet); font-size: var(--v2-h3); line-height: 1.4; white-space: nowrap; }
.rl-v2 .rl-v2__finding-identity .v2-label { margin: 0; }
.rl-v2__finding-heading { grid-column: 1 / -1; min-width: 0; }
.rl-v2 .rl-v2__finding-heading .rl-v2__finding-h3 { margin: 0; max-width: none; font-size: var(--v2-h3); line-height: 1.4; text-wrap: balance; }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding-body { grid-column: 1 / -1; }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding--illustrated .rl-v2__finding-body { grid-column: 2; }
.rl-v2 .rl-v2__finding-photo { width: 100%; min-width: 0; margin: 0; }
.rl-v2 .rl-v2__finding-photo img { display: block; width: 100%; border-radius: 6px; }
.rl-v2 .rl-v2__finding-photo[data-focus="top"] img { object-position: 50% 0; }
.rl-v2 .rl-v2__finding-photo[data-focus="center"] img { object-position: 50% 50%; }
.rl-v2 .rl-v2__finding-photo[data-focus="bottom"] img { object-position: 50% 100%; }
.rl-v2 .rl-v2__finding-photo figcaption { margin-top: var(--space-1); font-size: var(--v2-micro); }
.rl-v2 .rl-v2__finding-photo figcaption a { color: var(--v2-ink-quiet); }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding-p { margin: 0 0 var(--space-3); }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding-q {
  margin-top: var(--space-4);
  border-left: 2px solid var(--v2-ink);
  padding: var(--space-3);
  background: var(--v2-paper-2);
}
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding-q-label { color: var(--v2-ink-quiet); }
.rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding-q-text {
  font-family: var(--v2-font-display);
  font-size: var(--v2-lead);
  line-height: 1.5;
}
.rl-v2 .rl-v2__finding-sources { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); list-style: none; padding: 0; margin: var(--space-4) 0 0; font-size: var(--v2-small); }
.rl-v2 .rl-v2__finding-sources a { color: var(--v2-ink-quiet); text-decoration: underline; text-underline-offset: var(--space-half); }
@media (max-width: 800px) {
  .rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__findings-head { grid-template-columns: 1fr; gap: var(--space-3); }
  .rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding { grid-template-columns: 1fr; gap: var(--space-4); }
  .rl-v2 .rl-v2__findings[data-layout="brief"] .rl-v2__finding--illustrated .rl-v2__finding-body { grid-column: 1; }
  .rl-v2 .rl-v2__finding-heading .rl-v2__finding-h3 { max-width: none; }
}

/* Shared cold-outreach presentation: brand tint, clear hierarchy and calm
   photography. These rules belong to the family, never a company JSON. */
.blueprint-page {
  --blueprint-heading-accent: var(--brand-primary-tint);
  --blueprint-hero-weight: 600;
  --blueprint-photo-saturation: .88;
  --blueprint-photo-contrast: 1.02;
}
/* The blueprint explanation spans the shared container below the hero.
   It wraps naturally on phones; there is no forced line break. */
.blueprint-page .rl-v2__blueprint-intro {
  padding-block: var(--space-4);
  background: var(--v2-paper-2);
}
.blueprint-page .rl-v2__blueprint-intro p {
  margin: 0;
  max-width: none;
  line-height: 1.6;
  color: var(--v2-ink);
}
/* Give the client identity room above the main blueprint introduction. */
.blueprint-page .rl-v2__hero-identity {
  margin-bottom: var(--space-6);
}
@media (max-width: 800px) {
  .blueprint-page .rl-v2__hero-identity { margin-bottom: var(--space-4); }
}
.blueprint-page .rl-v2__hero[data-layout="brief"] h1 {
  font-weight: var(--blueprint-hero-weight);
}
.blueprint-page .rl-v2__hero-findings h2 {
  color: var(--blueprint-heading-accent);
  font-weight: var(--blueprint-hero-weight);
}
.blueprint-page .rl-v2__hero-findings p,
.blueprint-page .rl-v2__hero[data-layout="brief"] .rl-v2__hero-lead {
  color: rgba(255,255,255,.86);
  font-weight: 400;
}
.blueprint-page .rl-v2__finding-photo-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-sm);
  isolation: isolate;
}
.blueprint-page .rl-v2__finding-photo-media img {
  filter: saturate(var(--blueprint-photo-saturation)) contrast(var(--blueprint-photo-contrast));
}
.blueprint-page .rl-v2__finding-photo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--rl-navy-04), var(--rl-navy-14));
}
/* Legacy white-backed logos blend into the pale invitation surface.
   Prefer an authentic transparent master for newly sourced logos. */
.blueprint-page .rl-v2__cta[data-layout="invitation"] img {
  mix-blend-mode: multiply;
}

/* A blueprint is a prepared document for one named reader, not a page
   competing for attention. The masthead carries RedLines and the client;
   client identity also sits in the hero. No service nav, no login,
   no footer link farm.

   WHY THE CHROME GOES. Every nav item is an invitation to leave a document
   that took real work to prepare, and the footer's five service links make
   a bespoke page look like a landing page. The reader arrived by a private
   link; they do not need to be sold the rest of the site inside it.

   The header is kept rather than removed so the page still identifies who
   sent it, which matters more here than on any public page. */
/* THE WRAPPER CANNOT REACH THE HEADER. `.blueprint-page` is set by the
   manifest's __wrapper, which renders inside <main>; the site header and
   footer are siblings of that, further up the tree. A first attempt wrote
   `.blueprint-page .main-navigation` and silently matched nothing, which
   only the screenshot revealed. The body class is the hook that reaches
   both, and functions.php adds one for blueprint pages. */
body.rl-blueprint .main-navigation,
body.rl-blueprint .menu-toggle,
body.rl-blueprint .rl-footer__inner,
body.rl-blueprint .rl-footer__entry-link { display: none; }

/* The footer keeps only its bottom bar: a document still needs to say who
   published it and under what terms. */
body.rl-blueprint .rl-footer { padding-block: 0; }
body.rl-blueprint .rl-footer__bar { border-top: 0; }

/* One account logo from JSON, repeated in the sticky header and invitation. */
body.rl-blueprint .inside-header { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3); }
body.rl-blueprint .site-branding-container { flex: 1; min-width: 0; gap: var(--space-3); }
body.rl-blueprint .site-branding { display: none; }
.rl-blueprint-header-client {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
  max-width: 180px;
  min-height: var(--space-4);
  text-align: right;
  color: var(--rl-navy);
  font-size: .875rem;
  line-height: 1.3;
}
.rl-blueprint-header-client img { display: block; width: 144px; height: 40px; object-fit: contain; object-position: right center; }
@media (max-width: 600px) {
  body.rl-blueprint .inside-header { gap: var(--space-2); }
  body.rl-blueprint .site-logo img { max-width: 120px; height: auto; }
  .rl-blueprint-header-client img { width: 112px; height: 32px; }
  .rl-v2__hero-identity { gap: var(--space-2); }
  .rl-v2__hero-client { padding-inline: var(--space-1); }
  .rl-v2__hero-client img { max-width: 120px; }
}