/*
 * page.css
 * ReyBelen Standalone Theme — Interior Page Structures
 *
 * Authority: REYBELEN-COMPONENT-BLUEPRINT-SYSTEM.md §01, §16, §17, §18
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §05.4, §05.6, §08.2, §08.3, §08.6
 *            REYBELEN-STANDALONE-THEME-ARCHITECTURE.md §05.4, §04.3
 *            REYBELEN-ARCHITECTURAL-AMENDMENTS.md AM-01, AM-07, AM-08
 *
 * Owns: .rb-page-hero (interior page hero shell and content),
 *       .rb-two-column (About and Contact two-column layouts),
 *       .rb-entity-block (left-border cognac classification block),
 *       .rb-case-block (Work page case study listing blocks).
 *
 * Does not own: .rb-btn (components.css), .rb-label (components.css),
 *               .rb-faq-item (components.css), .rb-faq-section (sections.css),
 *               .rb-nav (nav.css), .rb-footer (footer.css),
 *               .rb-cta-strip (components.css), homepage sections (sections.css),
 *               article body (article.css), archive (archive.css),
 *               @media rules (responsive.css).
 *
 * No gradients. No icon systems. No secondary accent colors.
 * No GeneratePress selectors. No Pulse references. No !important.
 */


/* ══════════════════════════════════════════════════════════════════════════
   PAGE HERO — INTERIOR PAGES
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Page Hero: Shell ────────────────────────────────────────────────────── */

/*
 * Dark navy surface — mirrors the homepage hero in color authority.
 * Interior pages begin with the same dark register as the homepage.
 * Padding: 64px top (--sp-8), 48px bottom (--sp-6).
 * CBS §16: "Page Hero (interior) — 64px top / 48px bottom padding."
 * Not min-height: 100vh — interior pages show section content on first scroll.
 */

.rb-page-hero {
  width: 100%;
  background-color: var(--rb-navy);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-6);
}


/* ── Page Hero: Inner Content Column ─────────────────────────────────────── */

.rb-page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* ── Page Hero: Label (Eyebrow) ──────────────────────────────────────────── */

/*
 * .rb-label visual treatment is in components.css.
 * This rule scopes the label-to-headline gap for the page hero context.
 * The default --sp-3 (24px) gap is correct here — no override needed.
 */


/* ── Page Hero: Headline ─────────────────────────────────────────────────── */

/*
 * T2 scale: clamp(36px, 4.5vw, 56px) — VSA §02.2 (verbatim).
 * Line-height: 1.08 — VSA §02.2 T2 value.
 * Fraunces 300. White on dark navy surface.
 * max-width: 800px — prevents overlong interior page headlines.
 * Not T1 (homepage hero scale) — interior pages rank below the homepage entry.
 */

.rb-page-hero__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  max-width: 800px;
}

.rb-page-hero__headline em {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
}


/* ── Page Hero: Descriptor ───────────────────────────────────────────────── */

/*
 * Optional supporting sentence — not all interior pages use it.
 * System sans. Opacity 0.62: subordinate to headline, same as homepage hero desc.
 * max-width: 560px — line length governs readability.
 * Gap above: 24px from headline (--sp-3).
 */

.rb-page-hero__desc {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.62);
  max-width: 560px;
  margin: 0;
  padding: 0;
  margin-top: var(--sp-3);
}


/* ══════════════════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Two-Column: Shell ───────────────────────────────────────────────────── */

/*
 * Light surface — follows the dark page hero.
 * VSA §08.2: About page sequence — Page Hero (Dark) → Two-Column Content (Light).
 * Section-level vertical padding: 80px (--sp-10) top and bottom.
 */

.rb-two-column {
  width: 100%;
  background-color: var(--rb-bg);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}


/* ── Two-Column: Grid ────────────────────────────────────────────────────── */

/*
 * About page only: 1fr + fixed 340px portrait column.
 * AM-11: Fixed 340px column is the governing specification.
 * CBS §16 "60:40" language superseded by AM-11.
 * Gap: --sp-8 (64px) — CBS §16.
 */

.rb-two-column__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-8);
  align-items: start;
}


/* ── Two-Column: Content Column ──────────────────────────────────────────── */

.rb-two-column__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Label inside two-column prose: reduce gap after it to match simulation (24px) */
.rb-two-column__content > .rb-label {
  margin-bottom: calc(var(--sp-3) - var(--sp-4));
}


/* ── Two-Column: Prose Block ─────────────────────────────────────────────── */

/*
 * System sans body reading. --rb-ink — never grey for paragraph text.
 * VSA §02.4: grey body text prohibited on light surfaces.
 */

.rb-two-column__prose {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
}

.rb-two-column__prose p {
  margin: 0;
  padding: 0;
}

.rb-two-column__prose p + p {
  margin-top: var(--sp-3);
}


/* ── Two-Column: Portrait Column ─────────────────────────────────────────── */

/*
 * Right column on About page. Contains the portrait image.
 * VSA §05.4: portrait appears in two locations — From the Work and About page.
 * Both are 3:4 ratio, right column, filter: saturate(0.75).
 */

.rb-two-column__portrait-col {
  position: relative;
}


/* ── Two-Column: Portrait Image ──────────────────────────────────────────── */

/*
 * VSA §05.6: aspect-ratio 3:4, object-fit: cover, saturate(0.70–0.80).
 * CBS §16: min-height 480px, saturate(0.75) — the approved value within the range.
 * width: 100% fills the grid column (340px on About page).
 */

.rb-two-column__portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 480px;
  filter: saturate(0.75);
}


/* ── Two-Column: Pull Quote (below portrait) ─────────────────────────────── */

.rb-two-column__quote {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: 2px solid var(--rb-cognac);
}

.rb-two-column__quote p {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--rb-ink);
  margin: 0 0 var(--sp-2);
}

.rb-two-column__quote cite {
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  font-style: normal;
}


/* ── Two-Column: Form Column ─────────────────────────────────────────────── */

/*
 * Right column on About page. The About two-column layout only.
 * Contact page form column is in .rb-contact__form (standalone CBS §18 block below).
 * Form visual treatment is in forms.css.
 */

.rb-two-column__form-col {
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   ENTITY BLOCK
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Entity Block: Shell ─────────────────────────────────────────────────── */

/*
 * CBS §16: Left border 3px cognac, padding-left 24px.
 * System sans 16px, --rb-ink. Light surface component.
 * Classifies a person, organization, or credential inline within prose.
 * STA §04.3 / template-parts/page/entity-block.php.
 * Appears within the About page two-column content column.
 */

.rb-entity-block {
  border-left: 3px solid var(--rb-cognac);
  padding-left: var(--sp-3);
  margin: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}


/* ── Entity Block: Label ─────────────────────────────────────────────────── */

/*
 * .rb-label visual treatment is in components.css.
 * No override needed — the default cognac DM Mono label is correct.
 */


/* ── Entity Block: Name ──────────────────────────────────────────────────── */

/*
 * The primary identifier. System sans 500 weight — not Fraunces.
 * Entity blocks classify, not narrate.
 */

.rb-entity-block__name {
  font-family: var(--rb-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-1);
}


/* ── Entity Block: Detail ────────────────────────────────────────────────── */

/*
 * Supporting metadata line. System sans 400.
 * --rb-text-meta: grey is permitted here — metadata, not body copy.
 * VSA §02.4 permits --rb-text-meta for classification metadata.
 */

.rb-entity-block__detail {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rb-text-meta);
  margin: 0;
  padding: 0;
}


/* ── Entity Block: Description ───────────────────────────────────────────── */

/*
 * Optional longer prose describing the entity.
 * System sans 400, 16px, --rb-ink — body reading register.
 */

.rb-entity-block__desc {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-top: var(--sp-2);
}


/* ══════════════════════════════════════════════════════════════════════════
   CASE BLOCK — WORK PAGE
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Case Block: Shell ───────────────────────────────────────────────────── */

/*
 * CBS §17 Work Page Blueprint: case blocks on dark navy surface.
 * VSA §08.3: Work page sequence — Nav → Page Hero (Dark) → Case Listing → CTA Strip → Footer.
 * Case listing section uses dark navy, creating a continuous dark register from hero.
 * Padding: 80px top/bottom (--sp-10) on the section shell.
 */

.rb-case-listing {
  width: 100%;
  background-color: var(--rb-navy);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}


/* ── Case Block: Grid ────────────────────────────────────────────────────── */

/*
 * Stacked single-column list of case blocks.
 * Gap: --sp-12 (96px) between cases — CBS §17 spacing table: "96px vertical spacing"
 * for all-dark continuous section layout.
 */

.rb-case-listing__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}


/* ── Case Block: Item ────────────────────────────────────────────────────── */

/*
 * Each case study block. Border-bottom separates items on dark surface.
 * CBS §17: "1px --rb-border horizontal rule between them" (all-dark layout).
 * padding-bottom matches the grid gap so the border lands mid-gap.
 */

.rb-case-block {
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--rb-border);
}

.rb-case-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}


/* ── Case Block: Client Label ────────────────────────────────────────────── */

/*
 * CBS §17: DM Mono label, cognac. Label-to-headline gap: 24px (--sp-3).
 * .rb-label default margin-bottom is already --sp-3 (components.css).
 * No scoped override — CBS §17 spacing matches the component default.
 */


/* ── Case Block: Headline ────────────────────────────────────────────────── */

/*
 * T2 scale. Fraunces 300. White on dark navy.
 * CBS §17: "T2 headline white" — case block headline is at T2, not T1.
 * T2 scale: clamp(36px, 4.5vw, 56px) / line-height: 1.08 — VSA §02.2 (verbatim).
 * max-width: 720px — constrains line length on wide viewports.
 */

.rb-case-block__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  max-width: 720px;
  margin-bottom: var(--sp-3);
}


/* ── Case Block: Outcome Statement ──────────────────────────────────────── */

/*
 * CBS §17: System sans 500 weight — outcome gets elevated weight on dark surface.
 * Distinguishes it from regular body prose.
 * Color: rgba(255,255,255,0.92) — CBS §17 hierarchy table (dark surface, verbatim).
 * Outcome to body gap: 16px (--sp-2) — CBS §17 spacing table.
 * max-width: 640px.
 */

.rb-case-block__outcome {
  font-family: var(--rb-font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-2);
}


/* ── Case Block: Body ────────────────────────────────────────────────────── */

/*
 * CBS §17 HTML model: <p class="rb-case-block__body">[Context and methodology]</p>
 * System sans. On dark surface: rgba(255,255,255,0.62) — CBS §17 hierarchy table.
 * Follows the outcome statement. Body gap: 16px (--sp-2) set by outcome margin-bottom.
 * max-width: 640px — matches outcome column width.
 */

.rb-case-block__body {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.62);
  max-width: 640px;
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-4);
}


/* ── Case Block: CTA Link ────────────────────────────────────────────────── */

/*
 * .rb-btn--ghost visual treatment is in components.css.
 * No layout override needed here.
 */


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT SECTION — STANDALONE (CBS §18)
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Contact: Shell ──────────────────────────────────────────────────────── */

/*
 * CBS §18: Standalone section. Not a variant of .rb-two-column.
 * VSA §08.6 sequence: Page Hero (Dark) → Contact (Light) → Footer.
 * No CTA strip on Contact page — the form itself is the CTA (CBS §18).
 * Light surface, section-level padding.
 */

.rb-contact {
  width: 100%;
  background-color: var(--rb-bg);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}


/* ── Contact: Grid ───────────────────────────────────────────────────────── */

/*
 * CBS §18 verbatim: "Grid: 1fr 400px (text column + fixed form column).
 * Gap: 64px (--sp-8)."
 */

.rb-contact__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--sp-8);
  align-items: start;
}


/* ── Contact: Copy Column ────────────────────────────────────────────────── */

/*
 * Left column. CBS §18: "single framing statement — what the conversation
 * is about, what to expect, what happens next. Maximum: two paragraphs."
 * System sans 16px, --rb-ink.
 */

.rb-contact__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.rb-contact__heading {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
}

.rb-contact__desc {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
}

.rb-contact__desc p {
  margin: 0;
  padding: 0;
}

.rb-contact__desc p + p {
  margin-top: var(--sp-3);
}


/* ── Contact: Form Column ────────────────────────────────────────────────── */

/*
 * Right column (400px). Vbout embedded form.
 * Form visual treatment in forms.css.
 * This rule positions the column only.
 */

.rb-contact__form {
  width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE-LEVEL SECTION WRAPPERS
   ══════════════════════════════════════════════════════════════════════════ */


/* ── About: Credentials Block ────────────────────────────────────────────── */

/*
 * Container for one or more entity blocks below the two-column content.
 * Light surface. Gap between entity blocks.
 * VSA §08.2: entity block is part of the light surface sequence on About.
 */

/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Work Section: Shell ─────────────────────────────────────────────────── */

/*
 * Base section for the Work page. Light surface.
 * Five sections on the page: §1 context, §2 signals (--alt), §3 models,
 * §4 outcomes (--alt), §5 conversation entry (--entry).
 * Standard section vertical padding: 80px (--sp-10).
 */

.rb-work-section {
  width: 100%;
  background-color: var(--rb-bg);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}


/* ── Work Section: Alternate (Dark) ──────────────────────────────────────── */

/*
 * Applied to §2 (signals) and §4 (outcomes).
 * Dark navy surface for visual rhythm — mirrors the page hero register.
 * Text colors inverted: headlines white, body rgba(255,255,255,0.62).
 */

.rb-work-section--alt {
  background-color: var(--rb-navy);
}


/* ── Work Section: Models ────────────────────────────────────────────────── */

/*
 * Applied to §3 (engagement models). Light surface.
 * No visual distinction from base — modifier reserved for specificity if needed.
 */

.rb-work-section--models {
  background-color: var(--rb-bg);
}


/* ── Work Section: Entry (Conversation) ──────────────────────────────────── */

/*
 * Applied to §5 (conversation entry). Light surface.
 * Reduced vertical padding — closing conversion moment, not a content section.
 */

.rb-work-section--entry {
  background-color: var(--rb-bg);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}


/* ── Work Section: Headline ──────────────────────────────────────────────── */

/*
 * T2 scale. Fraunces 300.
 * Light sections: --rb-ink. Dark sections (--alt): #FFFFFF.
 * max-width 720px: consistent with other T2 section headlines.
 */

.rb-work-section__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  max-width: 720px;
  margin-bottom: var(--sp-4);
}

.rb-work-section--alt .rb-work-section__headline {
  color: #FFFFFF;
}


/* ── Work Section: Body ──────────────────────────────────────────────────── */

/*
 * Prose container — wraps one or more paragraphs.
 * max-width 680px: reading column constraint.
 * Light: --rb-ink. Dark (--alt): rgba(255,255,255,0.62).
 */

.rb-work-section__body {
  max-width: 680px;
}

.rb-work-section__body p {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
}

.rb-work-section__body p + p {
  margin-top: var(--sp-3);
}

.rb-work-section--alt .rb-work-section__body p {
  color: rgba(255, 255, 255, 0.62);
}


/* ── Work Section: CTA ───────────────────────────────────────────────────── */

/*
 * Button wrapper in the conversation entry section (§5).
 * Margin-top creates breathing room above the button.
 */

.rb-work-section__cta {
  margin-top: var(--sp-5);
}


/* ── Work Signals: Grid ──────────────────────────────────────────────────── */

/*
 * Two-column grid of organizational signal items (§2 — dark surface).
 * Gap: --sp-5 (40px) between items. Applied above .rb-work-section__body.
 */

.rb-work-signals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}


/* ── Work Signal: Item ───────────────────────────────────────────────────── */

/*
 * Individual signal — title + body paragraph pair.
 * Left cognac border: classification visual anchor on dark surface.
 * Padding-left: 24px (--sp-3) — matches entity-block border rhythm.
 */

.rb-work-signal {
  border-left: 2px solid var(--rb-cognac);
  padding-left: var(--sp-3);
}


/* ── Work Signal: Title ──────────────────────────────────────────────────── */

/*
 * System sans 500 — elevated weight distinguishes from body copy.
 * White on dark surface: rgba(255,255,255,0.92) — high authority tier.
 */

.rb-work-signal__title {
  font-family: var(--rb-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-2);
}


/* ── Work Signal: Body ───────────────────────────────────────────────────── */

/*
 * System sans 400. Body reading register on dark surface.
 * rgba(255,255,255,0.62) — subordinate to title.
 */

.rb-work-signal__body {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  padding: 0;
}


/* ── Work Models: List ───────────────────────────────────────────────────── */

/*
 * Engagement model blocks — stacked column list.
 * Three models: Executive Leadership, Advisory, Consulting.
 * Gap: --sp-10 (80px) — substantial breathing room between models.
 * Margin-top separates the model list from the intro prose above.
 */

.rb-work-models {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
}


/* ── Work Model: Block ───────────────────────────────────────────────────── */

/*
 * Each engagement model. Left cognac border — classification anchor.
 * padding-left: 24px (--sp-3) — matches entity-block border rhythm.
 */

.rb-work-model {
  border-left: 3px solid var(--rb-cognac);
  padding-left: var(--sp-4);
  max-width: 680px;
}


/* ── Work Model: Name ────────────────────────────────────────────────────── */

/*
 * h3 — subsection heading inside the section.
 * T3 scale: clamp(24px, 2.8vw, 36px). Fraunces 300. --rb-ink on light surface.
 */

.rb-work-model__name {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-3);
}


/* ── Work Model: Body ────────────────────────────────────────────────────── */

.rb-work-model__body {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
}

.rb-work-model__body + .rb-work-model__body {
  margin-top: var(--sp-3);
}


/* ── Work Outcomes: Grid ─────────────────────────────────────────────────── */

/*
 * Outcomes listed in two-column grid on dark surface (§4 --alt).
 * Gap: --sp-5. Margin-top separates from intro prose.
 */

.rb-work-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}


/* ── Work Outcome: Item ──────────────────────────────────────────────────── */

/*
 * Individual outcome — title + body paragraph pair.
 * No left border — outcomes are additive, not classified.
 */

.rb-work-outcome {
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}


/* ── Work Outcome: Title ─────────────────────────────────────────────────── */

/*
 * System sans 500 — outcome statement gets elevated weight.
 * White on dark surface: rgba(255,255,255,0.92).
 */

.rb-work-outcome__title {
  font-family: var(--rb-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  padding: 0;
  margin-bottom: var(--sp-2);
}


/* ── Work Outcome: Body ──────────────────────────────────────────────────── */

.rb-work-outcome__body {
  font-family: var(--rb-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE-LEVEL SECTION WRAPPERS
   ══════════════════════════════════════════════════════════════════════════ */


/* ── About: Credentials Block ────────────────────────────────────────────── */

/*
 * Container for one or more entity blocks below the two-column content.
 * Light surface. Gap between entity blocks.
 * VSA §08.2: entity block is part of the light surface sequence on About.
 */

.rb-about-credentials {
  width: 100%;
  background-color: var(--rb-bg);
  padding-top: 0;
  padding-bottom: var(--sp-10);
}

.rb-about-credentials__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}


/* ── About: Outside the Work ─────────────────────────────────────────────── */

.rb-outside-work {
  background-color: var(--rb-bg);
  padding-top: 0;
  padding-bottom: var(--sp-10);
}

.rb-outside-work__figure {
  margin: 0;
}

.rb-outside-work__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.rb-outside-work__caption {
  margin-top: var(--sp-2);
  font-family: var(--rb-font-mono);
  font-size: 0.75rem;
  color: var(--rb-text-meta);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE — SPLIT HERO
   ══════════════════════════════════════════════════════════════════════════ */

.rb-work-hero {
  background: var(--rb-navy);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-10);
}

.rb-work-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-8);
  align-items: end;
}

.rb-work-hero__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--sp-5);
}

.rb-work-hero__headline em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
}

.rb-work-hero__right { padding-bottom: 6px; }

.rb-work-hero__sub {
  font-family: var(--rb-font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--sp-5);
}

.rb-work-hero__body {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE — SIGNALS
   ══════════════════════════════════════════════════════════════════════════ */

.rb-signals {
  background: var(--rb-navy-mid);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.rb-signals__header {
  margin-bottom: var(--sp-8);
  max-width: 640px;
}

.rb-signals__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.rb-signal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  padding: var(--sp-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  align-items: baseline;
}

.rb-signal:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.rb-signal__num {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: block;
  margin-bottom: 10px;
}

.rb-signal__title {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

.rb-signal__body {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE — PULSE METHOD
   ══════════════════════════════════════════════════════════════════════════ */

.rb-pulse {
  background: var(--rb-bg);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-top: 1px solid var(--rb-border);
}

.rb-pulse__header {
  max-width: 680px;
  margin-bottom: var(--sp-8);
}

.rb-pulse__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
  margin: 0 0 12px;
}

.rb-pulse__sub {
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
}

.rb-pulse__flow {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--sp-8);
  border: 1px solid var(--rb-border);
}

.rb-pulse__step {
  flex: 1;
  padding: var(--sp-5) var(--sp-4);
  position: relative;
  border-right: 1px solid var(--rb-border);
}

.rb-pulse__step:last-child { border-right: none; }

.rb-pulse__step-num {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: block;
  margin-bottom: 10px;
}

.rb-pulse__step-name {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
  color: var(--rb-ink);
  margin: 0 0 10px;
}

.rb-pulse__step-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--rb-text-meta);
  margin: 0;
}

.rb-pulse__step::after {
  content: '→';
  position: absolute;
  right: -12px;
  top: var(--sp-5);
  font-size: 14px;
  color: var(--rb-cognac);
  z-index: 1;
  background: var(--rb-bg);
  padding: 2px 0;
}

.rb-pulse__step:last-child::after { display: none; }

.rb-pulse__note {
  border-left: 3px solid var(--rb-cognac);
  padding-left: var(--sp-3);
}

.rb-pulse__note p {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.5;
  color: var(--rb-ink);
  margin: 0;
}

.rb-pulse__note p + p { margin-top: 16px; }


/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE — ENGAGEMENT MODELS
   ══════════════════════════════════════════════════════════════════════════ */

.rb-models {
  background: var(--rb-navy);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}

.rb-models__header { margin-bottom: var(--sp-10); }

.rb-models__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 600px;
  margin: 0;
}

.rb-models__note {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.45);
  max-width: 560px;
  margin: 16px 0 0;
}

.rb-model {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-8) 0;
}

.rb-model:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rb-model__left { padding-top: 4px; }

.rb-model__type-label {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: block;
  margin-bottom: 10px;
}

.rb-model__type-name {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.rb-model--primary .rb-model__left {
  border-left: 3px solid var(--rb-cognac);
  padding-left: 20px;
}

.rb-model__body {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.55);
}

.rb-model__body p { margin: 0; }
.rb-model__body p + p { margin-top: 16px; }

.rb-model__tag {
  display: inline-flex;
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 12px;
  margin-top: 16px;
}

.rb-model--primary .rb-model__tag {
  color: rgba(160, 82, 45, 0.8);
  border-color: rgba(160, 82, 45, 0.3);
}


/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE — OUTCOMES
   ══════════════════════════════════════════════════════════════════════════ */

.rb-outcomes {
  background: var(--rb-bg);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
  border-top: 1px solid var(--rb-border);
}

.rb-outcomes__header { margin-bottom: var(--sp-8); }

.rb-outcomes__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
  margin: 0;
}

.rb-outcome {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rb-border);
  align-items: baseline;
}

.rb-outcome:last-child {
  border-bottom: 1px solid var(--rb-border);
}

.rb-outcome__num {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--rb-cognac);
  margin: 0;
}

.rb-outcome__title {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.25;
  color: var(--rb-ink);
  margin: 0 0 10px;
}

.rb-outcome__body {
  font-size: 15px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
}

.rb-outcomes__caveat {
  font-size: 14px;
  line-height: 1.72;
  color: var(--rb-text-meta);
  margin-top: var(--sp-6);
  font-style: italic;
  border-top: 1px solid var(--rb-border);
  padding-top: var(--sp-4);
}


/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE — ENTRY CTA
   ══════════════════════════════════════════════════════════════════════════ */

.rb-work-cta {
  background: var(--rb-navy);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  text-align: center;
}

.rb-work-cta__inner {
  max-width: 600px;
  margin: 0 auto;
}

.rb-work-cta__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}

.rb-work-cta__sub {
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 var(--sp-6);
}


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE — SPLIT HERO
   ══════════════════════════════════════════════════════════════════════════ */

.rb-contact-hero {
  background: var(--rb-navy);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-10);
}

.rb-contact-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-10);
  align-items: center;
}

.rb-contact-hero__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}

.rb-contact-hero__headline em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}

.rb-contact-hero__aside-sub {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--sp-4);
  margin: 0 0 var(--sp-4);
}

.rb-contact-hero__aside-body {
  font-size: 15px;
  line-height: 1.82;
  color: rgba(255, 255, 255, 0.42);
}

.rb-contact-hero__aside-body p { margin: 0; }
.rb-contact-hero__aside-body p + p { margin-top: 18px; }


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE — FRAMING ROWS
   ══════════════════════════════════════════════════════════════════════════ */

.rb-contact-frame {
  background: var(--rb-bg);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}

.rb-frame-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--rb-border);
  align-items: start;
}

.rb-frame-row:last-child { border-bottom: 1px solid var(--rb-border); }

.rb-frame-row__label-col { padding-top: 3px; }

.rb-frame-row__label-text {
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: block;
}

.rb-frame-row__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.3;
  color: var(--rb-ink);
  margin: 0 0 14px;
}

.rb-frame-row__body {
  font-size: 16px;
  line-height: 1.82;
  color: var(--rb-ink);
}

.rb-frame-row__body p { margin: 0; }
.rb-frame-row__body p + p { margin-top: 16px; }


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE — CONTACT ACTION (DARK)
   ══════════════════════════════════════════════════════════════════════════ */

.rb-contact-action {
  background: var(--rb-navy);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}

.rb-contact-action__inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--sp-10);
  align-items: start;
}

.rb-contact-action__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 16px;
}

.rb-contact-action__body {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.48);
}

.rb-contact-action__body p { margin: 0; }
.rb-contact-action__body p + p { margin-top: 14px; }

.rb-contact-action__email-wrap { margin-top: var(--sp-6); }

.rb-contact-action__email {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.1;
  color: #fff;
  display: inline-block;
  border-bottom: 1px solid var(--rb-cognac);
  padding-bottom: 6px;
  text-decoration: none;
  transition: color 150ms;
}

.rb-contact-action__email:hover { color: var(--rb-cognac-lt); }

.rb-contact-action__email-note {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin-top: 10px;
  display: block;
}

.rb-contact-action__linkedin {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rb-contact-action__linkedin-label {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  display: block;
  margin-bottom: 10px;
}

.rb-contact-action__linkedin-link {
  font-family: var(--rb-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  transition: color 150ms;
}

.rb-contact-action__linkedin-link:hover { color: #fff; }

.rb-cf7-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-6);
}


/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE — WHAT TO EXPECT
   ══════════════════════════════════════════════════════════════════════════ */

.rb-expect {
  background: var(--rb-bg);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-top: 1px solid var(--rb-border);
}

.rb-expect__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-8);
  align-items: start;
}

.rb-expect__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
  color: var(--rb-ink);
  margin: 0;
}

.rb-expect__items { display: flex; flex-direction: column; }

.rb-expect__item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rb-border);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-3);
  align-items: baseline;
}

.rb-expect__item:first-child { border-top: 1px solid var(--rb-border); }

.rb-expect__item-num {
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rb-cognac);
}

.rb-expect__item-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--rb-ink);
}

.rb-expect__item-body strong {
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE HERO — two-column dark
   ══════════════════════════════════════════════════════════════════════════ */

.rb-about-hero {
  background: var(--rb-navy);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-10);
}

.rb-about-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--sp-10);
  align-items: center;
}

.rb-about-hero__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 680px;
  margin: 0;
}

.rb-about-hero__headline em {
  font-style: italic;
}

.rb-about-hero__aside {
  align-self: center;
}

.rb-about-hero__aside-sub {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--sp-4);
  margin: 0 0 var(--sp-4);
}

.rb-about-hero__aside-body {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — CONTEXT STRIP
   ══════════════════════════════════════════════════════════════════════════ */

.rb-context-strip {
  background: var(--rb-navy-mid);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--sp-5) 0;
}

.rb-context-strip__inner {
  display: flex;
  gap: 0;
}

.rb-context-item {
  flex: 1;
  padding: 0 var(--sp-5);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.rb-context-item:first-child {
  padding-left: 0;
}

.rb-context-item:last-child {
  border-right: none;
}

.rb-context-item__num {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1;
  color: #fff;
  display: block;
  margin-bottom: 8px;
}

.rb-context-item__label {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  display: block;
  margin-bottom: 4px;
}

.rb-context-item__sub {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — PERSONAL BLOCK
   ══════════════════════════════════════════════════════════════════════════ */

.rb-personal {
  background: var(--rb-bg);
  padding: 0 0 var(--sp-10);
}

.rb-personal__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6);
  border-top: 1px solid var(--rb-border);
  padding-top: var(--sp-6);
  align-items: start;
}

.rb-personal__label-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rb-personal__label-col .rb-label {
  margin-bottom: 0;
}

.rb-personal__content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--rb-meta, #6B7280);
  margin: 0 0 16px;
}

.rb-personal__content:last-of-type {
  margin-bottom: 0;
}

.rb-personal__details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.rb-personal__detail {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rb-ink);
  border: 1px solid var(--rb-border);
  padding: 5px 12px;
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — ORIGIN MOMENT
   ══════════════════════════════════════════════════════════════════════════ */

.rb-origin {
  background: var(--rb-bg);
  padding: 0 0 var(--sp-12);
}

.rb-origin__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6);
  border-top: 1px solid var(--rb-border);
  padding-top: var(--sp-6);
  align-items: start;
}

.rb-origin__pull {
  border-left: 3px solid var(--rb-cognac);
  padding-left: var(--sp-3);
  margin-top: var(--sp-3);
}

.rb-origin__pull p {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  color: var(--rb-ink);
  margin: 0;
}

.rb-origin__body {
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
}

.rb-origin__body p {
  margin: 0;
}

.rb-origin__body p + p {
  margin-top: var(--sp-3);
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — THREE VANTAGES (dark)
   ══════════════════════════════════════════════════════════════════════════ */

.rb-vantages {
  background: var(--rb-navy);
  padding: var(--sp-12) 0;
}

.rb-vantages__header {
  margin-bottom: var(--sp-8);
}

.rb-vantages__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 640px;
  margin: 0;
}

.rb-vantages__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.rb-vantage-card {
  background: var(--rb-navy);
  padding: var(--sp-6) var(--sp-5);
}

.rb-vantage-card__num {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  display: block;
  margin-bottom: var(--sp-4);
}

.rb-vantage-card__context {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: block;
  margin-bottom: var(--sp-3);
}

.rb-vantage-card__title {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 var(--sp-3);
}

.rb-vantage-card__body {
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.55);
}

.rb-vantage-card__body p {
  margin: 0;
}

.rb-vantage-card__body p + p {
  margin-top: var(--sp-3);
}

.rb-vantage-card__verdict {
  font-family: var(--rb-font);
  font-style: italic;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.38);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--sp-3);
  margin-top: var(--sp-4);
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — POSITIONS
   ══════════════════════════════════════════════════════════════════════════ */

.rb-positions {
  background: var(--rb-bg);
  padding: var(--sp-12) 0;
}

.rb-positions__header {
  margin-bottom: var(--sp-8);
}

.rb-positions__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rb-ink);
  margin: 0;
}

.rb-position-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--rb-border);
}

.rb-position-row:last-child {
  border-bottom: 1px solid var(--rb-border);
}

.rb-position-row__label {
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  padding-top: 4px;
}

.rb-position-row__title {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
  margin: 0 0 var(--sp-3);
}

.rb-position-row__body {
  font-size: 16px;
  line-height: 1.78;
  color: var(--rb-ink);
  margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — EVIDENCE (dark)
   ══════════════════════════════════════════════════════════════════════════ */

.rb-evidence {
  background: var(--rb-navy);
  padding: var(--sp-12) 0;
}

.rb-evidence__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: end;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: var(--sp-8);
}

.rb-evidence__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.rb-evidence__intro {
  font-size: 16px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.rb-evidence__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.rb-evidence__stat {
  padding: var(--sp-4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rb-evidence__stat-num {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1;
  color: #fff;
  display: block;
  margin-bottom: 8px;
}

.rb-evidence__stat-label {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  display: block;
}

.rb-evidence__decision {
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: var(--sp-4);
}

.rb-evidence__decision-bar {
  background: var(--rb-cognac);
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
}

.rb-evidence__decision-label {
  font-family: var(--rb-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-cognac);
  display: block;
  margin-bottom: 10px;
}

.rb-evidence__decision-text {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.rb-evidence__narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}

.rb-evidence__narrative-col {
  font-size: 16px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.62);
}

.rb-evidence__narrative-col p {
  margin: 0;
}

.rb-evidence__narrative-col p + p {
  margin-top: var(--sp-3);
}

.rb-evidence__note {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--sp-5);
  margin-top: var(--sp-2);
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE — WHO FOR
   ══════════════════════════════════════════════════════════════════════════ */

.rb-about-who {
  background: var(--rb-bg);
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--rb-border);
}

.rb-about-who__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-8);
}

.rb-about-who__headline {
  font-family: var(--rb-font-heading);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--rb-ink);
  margin: 0;
}

.rb-about-who__situations {
  display: flex;
  flex-direction: column;
}

.rb-about-who__item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rb-border);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-3);
  align-items: baseline;
}

.rb-about-who__item:first-child {
  border-top: 1px solid var(--rb-border);
}

.rb-about-who__item-num {
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rb-cognac);
}

.rb-about-who__item-title {
  font-family: var(--rb-font);
  font-weight: 500;
  font-size: 15px;
  color: var(--rb-ink);
  margin: 0 0 6px;
}

.rb-about-who__item-text {
  font-size: 15px;
  line-height: 1.72;
  color: var(--rb-ink);
  margin: 0;
}


/* ── About: Logo Bar — Organizations worked with ─────────────────────────── */

.rb-logo-bar {
  padding: var(--sp-8) 0;
  background: var(--rb-bg);
  border-top: 1px solid var(--rb-border);
  border-bottom: 1px solid var(--rb-border);
}

.rb-logo-bar__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--rb-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rb-text-meta);
  margin: 0 0 var(--sp-6);
}

.rb-logo-bar__label::before,
.rb-logo-bar__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rb-border);
}

.rb-logo-bar__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.rb-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Actual logo images — grayscale at rest, colour on hover */
.rb-logo-item__img {
  display: block;
  max-height: 48px;
  width: auto;
  filter: grayscale(1) opacity(0.5);
  transition: filter 220ms ease;
}

.rb-logo-item__img--square {
  max-height: 60px;
}

.rb-logo-item__img:hover {
  filter: grayscale(0) opacity(1);
}


/* ══════════════════════════════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATIONS
   Only active when JS adds .rb-will-animate to <body>.
   CSS is gated so elements appear normally if JS is absent or blocked.
   ══════════════════════════════════════════════════════════════════════════ */

.rb-will-animate .rb-fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.rb-will-animate .rb-fade-up.rb-in {
  opacity: 1;
  transform: translateY(0);
}

.rb-will-animate .rb-fade-up[data-delay="1"] { transition-delay: 0.12s; }
.rb-will-animate .rb-fade-up[data-delay="2"] { transition-delay: 0.24s; }

.rb-will-animate .rb-hero-enter {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.rb-will-animate .rb-hero-enter.rb-in {
  opacity: 1;
  transform: translateY(0);
}

.rb-will-animate .rb-hero-enter[data-delay="1"] { transition-delay: 0.12s; }
.rb-will-animate .rb-hero-enter[data-delay="2"] { transition-delay: 0.26s; }
.rb-will-animate .rb-hero-enter[data-delay="3"] { transition-delay: 0.40s; }