/* ==========================================================================
   RS2 SHELL, consolidated (v3.1)
   The single home for all sitewide RS2 CSS. Loaded on every page from
   redsky-child/css/rs2-shell.css, enqueued in functions.php with rs2-tokens
   as a hard dependency. The Divi Theme Options Custom CSS field is EMPTY by
   doctrine; nothing lives in the database.

   Depends on tokens.css v2 (handle rs2-tokens) for every --rs-* variable.
   Fallbacks are stripped: tokens v2 names are verified and the dependency
   is enforced at enqueue time. Do not reintroduce literal fallbacks.

   CONTENTS
     01  Foundations: section shells, type patterns, cards, links, reveals
     02  Proof bar (.rs2-pb component; legacy .rs2-proof block retired)
     03  Solutions journey (sticky crossfade, raw-img photo model)
     04  Open roles / featured opportunities, v1 (.rs2-roles) LEGACY
     05  Intelligence / "What We're Watching"
     06  Footer + newsletter band (vars descoped from :root)
     07  Divi platform patches (load-order sensitive; keep last)
     08  Testimonials v2, single-row portrait marquee
     09  Open roles / featured opportunities, v2 (.rs2-jobs)

   v3.1 CHANGE LOG
   - REMOVED: the full stale copy of the navigation stylesheet that sat
     between the testimonials block and Section 09. It was the v2 FIXED
     build (position:fixed, the is-solid scroll-state system, inverted logo
     cross-fade, body.admin-bar top offsets) and it published generic
     variable names on :root sitewide, including --container:1440px, which
     fought the 1240px canon. Every one of its rules tied on specificity
     with the anchored v3.1 Code module in the Theme Builder Global Header,
     so the winner was decided by asset-optimizer ordering and flipped with
     cache state. The navigation stylesheet now lives in exactly ONE place:
     the Global Header Code module. Do not paste it back into this file.
   - RETAINED: Section 04 (.rs2-roles v1) alongside Section 09 (.rs2-jobs
     v2). The v1 Code module is still installed on the homepage; deleting
     Section 04 before the v2 module replaces it in the builder would strip
     the live Featured Opportunities section. Purge Section 04 in the same
     session that installs the v2 module, not before.

   CANON (July 2026 ruling)
   - Single locked brand red #C8102E. All red enters via tokens:
     --rs-color-brand-red / -bright (hover) / -deep (pressed) / -highlight
     (on-dark accent). No component declares its own red derivative.
   - Max content width 1240px sitewide (--rs-container-xl).
   - DOCTRINE: Divi owns layout in body sections (order, rows, columns,
     gutters). This file owns surfaces, type patterns, motion, component
     skins. The journey (03) is the one sanctioned exception: its pinned
     geometry is CSS-owned, like the hero.
   ========================================================================== */


/* ==========================================================================
   01  FOUNDATIONS
   ========================================================================== */

/* ---------- Section shells ---------- */
/* Divi's default 4%/0 section padding is zeroed in the section preset;
   vertical rhythm comes from here so it is fluid and consistent sitewide. */

.rs2-sec {
  position: relative;
  padding-block: var(--rs-space-section);
  isolation: isolate;
}

.rs2-sec--paper { background: var(--rs-color-paper); }
.rs2-sec--mist  { background: var(--rs-color-mist); }

/* Flat dark. Use sparingly; most dark moments should be --photo. */
.rs2-sec--dark { background: var(--rs-color-near-black); }

/* Photographic dark band. Divi supplies the background image on the section;
   this supplies the scrim and the light-on-dark text defaults. */
.rs2-sec--photo {
  background-color: var(--rs-color-near-black);
  background-size: cover;
  background-position: center;
}

.rs2-sec--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to right,
    rgb(10 10 10 / 0.72) 0%,
    rgb(10 10 10 / 0.55) 45%,
    rgb(10 10 10 / 0.25) 100%
  );
  pointer-events: none;
}

/* Everything Divi puts inside a photo section must clear the scrim. */
.rs2-sec--photo > .et_pb_row,
.rs2-sec--photo > .et_pb_row_inner {
  position: relative;
  z-index: 1;
}

/* Hairline dividers between two adjacent light sections. */
.rs2-sec--rule-top    { border-top: var(--rs-border-hair) solid var(--rs-color-fog); }
.rs2-sec--rule-bottom { border-bottom: var(--rs-border-hair) solid var(--rs-color-fog); }

/* Compact rhythm for strip sections (proof bar, industries). */
.rs2-sec--tight { padding-block: var(--rs-space-16); }

/* ---------- Shared type patterns ---------- */
/* Typography values are Divi-editable in the presets. These classes carry
   only what a preset cannot: the two-tone device, measure caps, and the
   on-dark color inversions. */

.rs2-eyebrow {
  font-family: var(--rs-font-display);
  font-size: var(--rs-fs-xs);
  font-weight: var(--rs-fw-semibold);
  letter-spacing: var(--rs-tracking-wider);
  text-transform: uppercase;
  color: var(--rs-color-brand-red);
  margin: 0 0 var(--rs-space-4);
}

.rs2-sec--photo .rs2-eyebrow,
.rs2-sec--dark .rs2-eyebrow {
  color: var(--rs-color-brand-red-highlight);
}

/* Section heading. Bold, fluid, tight. One emphasis span maximum. */
.rs2-h2 {
  font-family: var(--rs-font-display);
  font-size: var(--rs-fs-4xl);
  font-weight: var(--rs-fw-bold);
  line-height: var(--rs-lh-tight);
  letter-spacing: var(--rs-tracking-tight);
  color: var(--rs-color-ink);
  max-width: 20ch;
  margin: 0;
}

.rs2-sec--photo .rs2-h2,
.rs2-sec--dark .rs2-h2 {
  color: var(--rs-color-paper);
}

/* The two-tone device. One span per heading, never both colors. */
.rs2-h2 .rs2-em-soft { color: var(--rs-color-graphite); }
.rs2-h2 .rs2-em-red  { color: var(--rs-color-brand-red); }

.rs2-sec--photo .rs2-h2 .rs2-em-soft,
.rs2-sec--dark .rs2-h2 .rs2-em-soft { color: rgb(255 255 255 / 0.55); }

.rs2-sec--photo .rs2-h2 .rs2-em-red,
.rs2-sec--dark .rs2-h2 .rs2-em-red { color: var(--rs-color-brand-red-highlight); }

/* Section intro. Two sentences maximum by doctrine; the measure enforces it. */
.rs2-intro {
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-md);
  line-height: var(--rs-lh-relaxed);
  color: var(--rs-color-steel);
  max-width: 56ch;
  margin: var(--rs-space-5) 0 0;
}

.rs2-sec--photo .rs2-intro,
.rs2-sec--dark .rs2-intro {
  color: rgb(255 255 255 / 0.82);
}

/* ---------- Cards ---------- */
/* Paper on mist, or mist on paper. 12px radius, fog hairline, l1 to l2. */

.rs2-card {
  position: relative;
  height: 100%;
  padding: var(--rs-space-6);
  background: var(--rs-color-paper);
  border: var(--rs-border-hair) solid var(--rs-color-fog);
  border-radius: var(--rs-radius-lg);
  box-shadow: var(--rs-shadow-l1);
  transition:
    transform var(--rs-dur-base) var(--rs-ease-out),
    box-shadow var(--rs-dur-base) var(--rs-ease-out);
}

.rs2-sec--paper .rs2-card { background: var(--rs-color-mist); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rs2-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--rs-shadow-l2);
  }
}

/* Numbered card index, the 01 / 02 / 03 / 04 device from the prototype. */
.rs2-card__index {
  font-family: var(--rs-font-mono);
  font-size: var(--rs-fs-xs);
  font-weight: var(--rs-fw-medium);
  letter-spacing: var(--rs-tracking-wider);
  color: var(--rs-color-silver);
}

/* ---------- Link and CTA patterns ---------- */
/* Divi buttons are styled entirely in Divi (hero doctrine, gotcha 7).
   This is the inline text link with the arrow nudge, which Divi cannot do. */

.rs2-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rs-space-2);
  font-family: var(--rs-font-display);
  font-size: var(--rs-fs-sm);
  font-weight: var(--rs-fw-semibold);
  letter-spacing: var(--rs-tracking-wide);
  color: var(--rs-color-accent-default);
  text-decoration: none;
}

.rs2-link::after {
  content: "\2192";
  transition: transform var(--rs-dur-base) var(--rs-ease-out);
}

.rs2-link:hover { color: var(--rs-color-accent-hover); }

@media (prefers-reduced-motion: no-preference) {
  .rs2-link:hover::after { transform: translateX(4px); }
}

.rs2-sec--photo .rs2-link,
.rs2-sec--dark .rs2-link {
  color: var(--rs-color-paper);
}

/* Focus ring, brand red at 35 percent, everywhere. */
.rs2-link:focus-visible,
.rs2-card a:focus-visible {
  outline: none;
  box-shadow: var(--rs-shadow-focus);
  border-radius: var(--rs-radius-sm);
}

/* ---------- Scroll reveal (generic, JS-armed) ---------- */
/* One shot, never reverses, per the motion doctrine. Driven by
   IntersectionObserver (rs2-reveal.js), which is not a scroll listener and
   does not touch the compositor budget. Elements animate transform and
   opacity only. No JS means no reveal and fully visible content, which is
   the correct failure mode. */

@media (prefers-reduced-motion: no-preference) {
  html.rs2-js .rs2-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--rs-dur-slow) var(--rs-ease-out),
      transform var(--rs-dur-slow) var(--rs-ease-out);
  }

  html.rs2-js .rs2-reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Stagger across siblings, 70ms steps. Apply on the parent. */
.rs2-stagger > *:nth-child(2) { transition-delay: 70ms; }
.rs2-stagger > *:nth-child(3) { transition-delay: 140ms; }
.rs2-stagger > *:nth-child(4) { transition-delay: 210ms; }
.rs2-stagger > *:nth-child(5) { transition-delay: 280ms; }

/* ---------- Shared scroll-driven keyframes ---------- */
/* One rise, one rule-draw, sitewide. Components reference these instead of
   carrying near-identical private copies (formerly rs2RolesRise, rs2IntelRise,
   rs2RolesRule, rs2IntelRule). Rise distance unified at 24px. */

@keyframes rs2Rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rs2Rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Foundations responsive ---------- */

@media (max-width: 980px) {
  .rs2-h2 { max-width: 100%; }

  /* Photo scrim goes top-down on narrow screens; the left-weighted
     gradient stops protecting the text zone once copy is full width. */
  .rs2-sec--photo::before {
    background: linear-gradient(
      to bottom,
      rgb(10 10 10 / 0.75) 0%,
      rgb(10 10 10 / 0.55) 60%,
      rgb(10 10 10 / 0.45) 100%
    );
  }
}

@media (max-width: 767px) {
  .rs2-sec { padding-block: var(--rs-space-16); }
  .rs2-sec--tight { padding-block: var(--rs-space-12); }
}


/* ==========================================================================
   02  PROOF BAR (.rs2-pb)
   Companion to the rs2-proof-bar.html Code module (the ratified live build
   with count-up + tick device). The legacy .rs2-proof/.rs2-stat block is
   retired; its HTML must not return.

   Brand law: red is scarce. It appears here as the keyline ticks and the
   single permanently red numeral (96%), nothing else.
   ALL FIGURES QUARANTINED in the markup pending Sean's ratification.
   ========================================================================== */

.rs2-pb {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--rs-space-8);
  width: 100%;
}

/* ---------- Cell ---------- */

.rs2-pb__item {
  position: relative;
  padding-top: var(--rs-space-5);
  border-top: 1px solid var(--rs-color-fog);
  transition: transform var(--rs-dur-base) var(--rs-ease-out);
}

/* The signature: a brand-red tick drawn over each cell's hairline.
   Rests at 28px after entry; extends across the cell on hover. */
.rs2-pb__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 28px;
  background: var(--rs-color-brand-red);
  transform-origin: left center;
  transition: width 320ms var(--rs-ease-out);
}

/* ---------- Numerals ---------- */

.rs2-pb__value {
  display: flex;
  align-items: baseline;
  font-family: var(--rs-font-display);
  font-weight: var(--rs-fw-bold);
  font-size: var(--rs-fs-4xl);
  line-height: var(--rs-lh-tight);
  letter-spacing: var(--rs-tracking-tight);
  color: var(--rs-color-ink);
  font-variant-numeric: tabular-nums;   /* no width jitter while counting */
}

.rs2-pb__suffix {
  font-size: 0.5em;
  font-weight: var(--rs-fw-semibold);
  color: var(--rs-color-graphite);
  margin-left: 3px;
}

/* The one numeral per band allowed to carry brand red. */
.rs2-pb__item--red .rs2-pb__num {
  color: var(--rs-color-brand-red);
}

/* ---------- Caption ---------- */

.rs2-pb__caption {
  margin: var(--rs-space-3) 0 0;
  font-family: var(--rs-font-body);
  font-size: var(--rs-fs-sm);
  line-height: 1.5;
  color: var(--rs-color-graphite);
  max-width: 24ch;
}

/* ---------- Hover (pointer devices only) ---------- */

@media (hover: hover) {
  .rs2-pb__item:hover { transform: translateY(-2px); }
  .rs2-pb__item:hover::before { width: 100%; }
}

/* ---------- Entry state ---------- */
/* Armed by the component script only when it can also resolve it, so a
   JS failure, reduced motion, or the Visual Builder never hide the strip. */

.rs2-pb--armed .rs2-pb__item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 500ms var(--rs-ease-out),
    transform 500ms var(--rs-ease-out);
}

.rs2-pb--armed .rs2-pb__item::before { width: 0; }

.rs2-pb.is-in .rs2-pb__item {
  opacity: 1;
  transform: none;
}

.rs2-pb.is-in .rs2-pb__item::before {
  width: 28px;
  transition-delay: 350ms;   /* tick draws after the cell has landed */
}

@media (hover: hover) {
  .rs2-pb.is-in .rs2-pb__item:hover::before {
    width: 100%;
    transition-delay: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs2-pb--armed .rs2-pb__item,
  .rs2-pb__item,
  .rs2-pb__item::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Proof bar responsive ---------- */

@media (max-width: 1100px) {
  .rs2-pb {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rs-space-8) var(--rs-space-6);
  }
}

@media (max-width: 640px) {
  .rs2-pb {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--rs-space-6) var(--rs-space-5);
  }

  .rs2-pb__value { font-size: var(--rs-fs-3xl); }
}


/* ==========================================================================
   03  SOLUTIONS JOURNEY  (homepage sections 03.1 to 03.5)
   Five-slide sticky crossfade. Zero JavaScript. Compositor-thread only.
   Photo model: raw <img class="rs2-slide__photo"> inside the card Code
   module. The earlier Divi Image module machinery (.rs2-slide__bg) is
   retired and removed.

   Doctrine notes:
   - Journey geometry (sticky, heights, negative margins, animation) applies
     only at 981px and up, on the front end (body:not(.et-fb) guard), matching
     the hero responsive model and the Visual Builder lesson from the body
     build session.
   - Never set overflow:hidden on the .rs2-slide sections themselves. Sticky
     dies inside an overflow-hidden ancestor. The stage clips its own children.
   - Do not enable Divi parallax, Scroll Effects, Interactions, or Divi Sticky
     on any element in this journey. This file owns all motion.
   ========================================================================== */

/* Local aliases resolve straight to tokens; no private red derivatives. */
.rs2-slide,
.rs2-sol {
  --rs2s-red:          var(--rs-color-brand-red);
  --rs2s-red-deep:     var(--rs-color-brand-red-deep);
  --rs2s-line:         rgba(255, 255, 255, 0.16);
  --rs2s-font-heading: var(--rs-font-display);
  --rs2s-font-body:    var(--rs-font-body);
  --rs2s-font-mono:    var(--rs-font-mono);
}

/* ---------- Base layout, all widths, all contexts (builder-safe) ---------- */

.rs2-slide {
  overflow: visible;          /* sticky requirement, see doctrine note above */
}

.rs2-slide__stage {
  position: relative;
  width: 100%;
}

/* Photo layer: raw img absolutized against the stage. The Divi wrapper
   chain inside the stage is neutralized in section 07 so this resolves
   against the stage itself. */
.rs2-slide__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform-origin: center;
}

/* Legibility scrim so white card text never fights a bright sky */
.rs2-slide--photo .rs2-slide__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgb(8 10 14 / 0.32), rgb(8 10 14 / 0.18) 40%, rgb(8 10 14 / 0.38));
}

/* ---------- Journey geometry, desktop front-end only ----------
   Scroll math per slide, stage is 100vh sticky:
     pin duration       = section height minus 100vh
     next slide overlap = 100vh (the negative margin)
     dwell per slide    = section height minus 200vh
   03.1 intro: 250vh (50vh dwell, then hosts the 100vh crossfade of 03.2)
   03.2 to 03.4: 250vh each, margin-top -100vh
   03.5: 150vh, margin-top -100vh (50vh dwell, then scrolls out normally)
   Total added flow height: 700vh. */

@media (min-width: 981px) {
  body:not(.et-fb) .rs2-slide { position: relative; }
  body:not(.et-fb) .rs2-slide--1 { height: 250vh; z-index: 11; }
  body:not(.et-fb) .rs2-slide--2 { height: 250vh; z-index: 12; margin-top: -100vh; }
  body:not(.et-fb) .rs2-slide--3 { height: 250vh; z-index: 13; margin-top: -100vh; }
  body:not(.et-fb) .rs2-slide--4 { height: 250vh; z-index: 14; margin-top: -100vh; }
  body:not(.et-fb) .rs2-slide--5 { height: 250vh; z-index: 15; margin-top: -100vh; }
  body:not(.et-fb) .rs2-slide--6 { height: 150vh; z-index: 16; margin-top: -100vh; }

  body:not(.et-fb) .rs2-slide__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    max-width: none;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
}

/* ---------- Motion, scroll-driven ----------
   Gated exactly like the hero: supports check, 981px+, motion-safe, front
   end only. Browsers without scroll timelines skip this block entirely and
   get the opaque stack-and-cover, by design. */

@supports (animation-timeline: view()) {
  @media (min-width: 981px) and (prefers-reduced-motion: no-preference) {

    /* Crossfade: the incoming slide fades in across exactly its entry range,
       which for a taller-than-viewport section is the 100vh of travel from
       first pixel entering to full viewport coverage. */
    body:not(.et-fb) .rs2-slide--fade {
      view-timeline-name: --rs2-slide;
      animation: rs2-slide-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    /* Photo drift: slow settle-in zoom across the slide's full cover range.
       Runs on the section's named timeline so it keeps progressing while the
       stage is pinned. Transform only, compositor thread. */
    body:not(.et-fb) .rs2-slide--fade .rs2-slide__photo {
      animation: rs2-bg-drift linear both;
      animation-timeline: --rs2-slide;
      animation-range: cover 0% cover 100%;
    }

    /* Card rise: subtle vertical settle synced to the back half of entry. */
    body:not(.et-fb) .rs2-slide--fade .rs2-sol {
      animation: rs2-card-rise linear both;
      animation-timeline: --rs2-slide;
      animation-range: entry 30% entry 100%;
    }
  }
}

@keyframes rs2-slide-fade {
  from { opacity: 0; }
  35%  { opacity: 0.22; }   /* eased curve: old slide holds longer, then commits */
  to   { opacity: 1; }
}
@keyframes rs2-bg-drift {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}
@keyframes rs2-card-rise {
  from { transform: translateY(28px); }
  to   { transform: translateY(0); }
}

/* ---------- Stacked mode, 980px and below ----------
   No pinning, no fades, no negative margins. Each photo slide is a normal
   full-height section with the photo absolutized behind the card. */

@media (max-width: 980.98px) {
  .rs2-slide--photo {
    position: relative;
    overflow: hidden;               /* safe here: no sticky below 981px */
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  .rs2-slide--photo .rs2-slide__stage {
    position: static;
    padding: 96px 0;
  }
}

/* ---------- Solution card skin (.rs2-sol namespace, zero collisions) ----------
   Construction mirrors the hero stat card: translucent glass frame with a
   thicker top bar carrying the title, 10px glass sides and bottom, opaque
   inner panel, radius 12, overflow hidden. Dark variant of the hero recipe. */

.rs2-sol-wrap {
  position: relative;
  z-index: 2;
  width: min(90%, var(--rs-container-xl));
  margin-inline: auto;
  display: flex;
}
.rs2-sol-wrap--left  { justify-content: flex-start; }
.rs2-sol-wrap--right { justify-content: flex-end; }

.rs2-sol {
  width: min(100%, 480px);
  background: rgb(10 12 18 / 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rs2s-line);
  border-radius: 12px;
  padding: 0 10px 10px;             /* thin glass sides + bottom */
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.55);
}

/* Glass top bar: index + pillar title live on the blur itself */
.rs2-sol__bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 14px 13px;
}
.rs2-sol__index {
  font-family: var(--rs2s-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--rs2s-red);
}
.rs2-sol__title {
  margin: 0;
  font-family: var(--rs2s-font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Opaque inner panel */
.rs2-sol__panel {
  background: rgb(10 12 18 / 0.94);
  border-radius: 8px;
  padding: 26px 26px 24px;
}

.rs2-sol__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgb(200 16 46 / 0.14);
  border: 1px solid rgb(200 16 46 / 0.35);
  color: var(--rs2s-red);
}
.rs2-sol__icon svg { width: 22px; height: 22px; }

.rs2-sol__body {
  margin: 0 0 18px;
  font-family: var(--rs2s-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: rgb(255 255 255 / 0.84);
}

.rs2-sol__list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.rs2-sol__list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--rs2s-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.78);
}
.rs2-sol__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rs2s-red);
}

.rs2-sol__rule {
  height: 1px;
  margin: 0 0 18px;
  background: rgb(255 255 255 / 0.12);
}

.rs2-sol__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.rs2-sol__num {
  font-family: var(--rs2s-font-heading);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;   /* carried numeral rule */
}
.rs2-sol__num em {
  font-style: normal;
  color: var(--rs2s-red);
}
.rs2-sol__statLabel {
  font-family: var(--rs2s-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: right;
  color: rgb(255 255 255 / 0.55);
  max-width: 45%;
  line-height: 1.5;
}

.rs2-sol__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--rs2s-red);
  color: #ffffff !important;
  font-family: var(--rs2s-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}
.rs2-sol__btn svg {
  width: 15px;
  height: 15px;
  transition: transform 150ms ease;
}
.rs2-sol__btn:hover {
  background: var(--rs2s-red-deep);
  transform: translateY(-1px);
}
.rs2-sol__btn:hover svg { transform: translateX(3px); }
.rs2-sol__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(200 16 46 / 0.4);
}

/* Short-laptop guard: keep the tallest card inside a 100vh stage */
@media (min-width: 981px) and (max-height: 780px) {
  .rs2-sol__panel { padding: 20px 22px 18px; }
  .rs2-sol__icon { width: 40px; height: 40px; margin-bottom: 12px; }
  .rs2-sol__body { font-size: 14px; margin-bottom: 14px; }
  .rs2-sol__list { gap: 7px; margin-bottom: 14px; }
  .rs2-sol__num { font-size: 34px; }
  .rs2-sol__stat { margin-bottom: 16px; }
}

/* Phone: solid fills replace blur, same lever as the hero ticker */
@media (max-width: 767px) {
  .rs2-sol {
    width: 100%;
    background: rgb(10 12 18 / 0.9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Motion-safe: transitions off for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .rs2-sol__btn,
  .rs2-sol__btn svg { transition: none; }
}


/* ==========================================================================
   04  OPEN ROLES / FEATURED OPPORTUNITIES, v1 (.rs2-roles)  LEGACY
   SUPERSEDED by Section 09 (.rs2-jobs v2). RETAINED ONLY because the v1
   Code module is still installed on the homepage. Delete this entire block
   in the same session that swaps the builder over to the v2 module, per the
   superseded-file discipline. Do not delete it before that swap.

   Zero JavaScript. Scroll reveals run on CSS scroll-driven animations
   (animation-timeline: view()), compositor thread only, progressive
   enhancement: unsupported browsers render everything static and fully
   visible. Reduced motion respected.
   ========================================================================== */

.rs2-roles {
  --rsr-red:        var(--rs-color-brand-red);
  --rsr-red-deep:   var(--rs-color-brand-red-deep);
  --rsr-red-tint:   rgba(200, 16, 46, .07);
  --rsr-ink:        #1C1D21;
  --rsr-ink-soft:   #55565C;
  --rsr-ink-faint:  #8A8B92;
  --rsr-bone:       #F6F6F6;
  --rsr-card:       #FFFFFF;
  --rsr-line:       #E4E4E2;
  --rsr-line-dark:  #C9C9C6;
  --rsr-amber:      #8A6A1B;
  --rsr-amber-tint: rgba(178, 137, 32, .12);
  --rsr-green:      #1F7A4D;
  --rsr-green-tint: rgba(31, 122, 77, .10);
  --rsr-display:    var(--rs-font-display);
  --rsr-body:       var(--rs-font-body);

  background: var(--rsr-bone);
  color: var(--rsr-ink);
  font-family: var(--rsr-body);
  padding: clamp(88px, 10vw, 140px) clamp(20px, 5vw, 64px);
}

.rs2-roles__inner {
  max-width: var(--rs-container-xl);
  margin: 0 auto;
}

/* ---------- Header ---------- */

.rs2-roles__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.rs2-roles__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--rsr-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rsr-red);
}

.rs2-roles__eyebrow-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--rsr-red);
  transform-origin: left center;
}

.rs2-roles__title {
  margin: 0;
  font-family: var(--rsr-display);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--rsr-ink);
}

.rs2-roles__intro {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.4vw, 17px);
  font-style: italic;
  line-height: 1.6;
  color: var(--rsr-ink-soft);
}

/* View-all link: underline draws in, arrow nudges */
.rs2-roles__viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-bottom: 6px;
  font-family: var(--rsr-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rsr-red);
  background:
    linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat;
  transition: background-size .35s cubic-bezier(.4, 0, .2, 1);
}

.rs2-roles__arrow {
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

@media (hover: hover) {
  .rs2-roles__viewall:hover { background-size: 100% 2px; }
  .rs2-roles__viewall:hover .rs2-roles__arrow { transform: translate(2px, -2px); }
}

/* ---------- Role grid ---------- */

.rs2-roles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.rs2-role {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  background: var(--rsr-card);
  border: 1px solid var(--rsr-line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    border-color .35s ease,
    box-shadow .35s ease;
}

/* Signature micro-detail: red accent bar draws across the top on hover */
.rs2-role::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--rsr-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.rs2-role__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.rs2-role__tag {
  padding: 5px 10px 4px;
  border-radius: 4px;
  font-family: var(--rsr-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

.rs2-role__tag--type { color: var(--rsr-red);   background: var(--rsr-red-tint); }
.rs2-role__tag--hot  { color: var(--rsr-amber); background: var(--rsr-amber-tint); }
.rs2-role__tag--new  { color: var(--rsr-green); background: var(--rsr-green-tint); }

.rs2-role__go {
  margin-left: auto;
  color: var(--rsr-ink-faint);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .3s ease;
}

.rs2-role__name {
  margin: 0 0 14px;
  font-family: var(--rsr-display);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--rsr-ink);
  transition: color .3s ease;
}

.rs2-role__meta {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--rsr-ink-soft);
}

.rs2-role__meta li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.rs2-role__meta li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rsr-line-dark);
  transform: translateY(-2px);
  transition: background .3s ease;
}

.rs2-role__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rsr-line);
}

.rs2-role__rate {
  font-family: var(--rsr-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--rsr-ink);
}

.rs2-role__rate-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rsr-ink-faint);
  margin-right: 4px;
}

.rs2-role__age {
  font-size: 12.5px;
  font-style: italic;
  color: var(--rsr-ink-faint);
  white-space: nowrap;
}

@media (hover: hover) {
  .rs2-role:hover {
    transform: translateY(-5px);
    border-color: var(--rsr-line-dark);
    box-shadow: 0 18px 40px -18px rgba(28, 29, 33, .18);
  }
  .rs2-role:hover::before { transform: scaleX(1); }
  .rs2-role:hover .rs2-role__name { color: var(--rsr-red); }
  .rs2-role:hover .rs2-role__go {
    color: var(--rsr-red);
    transform: translate(2px, -2px);
  }
  .rs2-role:hover .rs2-role__meta li::before { background: var(--rsr-red); }
}

.rs2-role:focus-visible,
.rs2-roles__viewall:focus-visible,
.rs2-roles__more-cta:focus-visible,
.rs2-refer__cta:focus-visible {
  outline: 2px solid var(--rsr-red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Grid footer CTA ---------- */

.rs2-roles__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--rsr-line);
}

.rs2-roles__more-note {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  color: var(--rsr-ink-soft);
}

.rs2-roles__more-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1.5px solid var(--rsr-red);
  border-radius: 6px;
  font-family: var(--rsr-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rsr-red);
  background: transparent;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

@media (hover: hover) {
  .rs2-roles__more-cta:hover {
    background: var(--rsr-red);
    color: #FFFFFF;
    box-shadow: 0 12px 28px -12px rgba(200, 16, 46, .45);
  }
  .rs2-roles__more-cta:hover .rs2-roles__arrow { transform: translateX(3px); }
}

/* ---------- Referral band ---------- */

.rs2-refer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(56px, 6vw, 84px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
  background: var(--rsr-card);
  border: 1px solid var(--rsr-line);
  border-left: 4px solid var(--rsr-red);
  border-radius: 10px;
}

.rs2-refer__lead {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.rs2-refer__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  color: var(--rsr-red);
  background: var(--rsr-red-tint);
}

.rs2-refer__head {
  margin: 0 0 5px;
  font-family: var(--rsr-display);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--rsr-ink);
}

.rs2-refer__sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--rsr-ink-soft);
}

.rs2-refer__amount {
  margin: 0;
  flex: none;
  font-family: var(--rsr-display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--rsr-red);
}

.rs2-refer__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 6px;
  font-family: var(--rsr-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  background: var(--rsr-red);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

@media (hover: hover) {
  .rs2-refer__cta:hover {
    background: var(--rsr-red-deep);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(200, 16, 46, .5);
  }
  .rs2-refer__cta:hover .rs2-roles__arrow { transform: translateX(3px); }
}

/* ---------- Scroll-driven reveals (progressive enhancement) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .rs2-roles__head-copy,
    .rs2-roles__viewall,
    .rs2-role,
    .rs2-roles__more,
    .rs2-refer {
      animation: rs2Rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 34%;
    }

    /* Stagger by grid position: each column lands a beat later */
    .rs2-role:nth-child(3n + 2) { animation-range: entry 6%  entry 40%; }
    .rs2-role:nth-child(3n + 3) { animation-range: entry 12% entry 46%; }

    /* Eyebrow rule draws in with the header */
    .rs2-roles__eyebrow-rule {
      animation: rs2Rule both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }

    /* Referral amount lands with a subtle scale settle */
    .rs2-refer__amount {
      animation: rs2Amount both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }
  }
}

@keyframes rs2Amount {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .rs2-roles *,
  .rs2-roles *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Roles responsive ---------- */

@media (max-width: 1080px) {
  .rs2-roles__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .rs2-roles__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .rs2-refer { flex-wrap: wrap; }
  .rs2-refer__amount { order: 2; }
  .rs2-refer__cta { order: 3; }
}

@media (max-width: 640px) {
  .rs2-roles__grid { grid-template-columns: 1fr; gap: 16px; }
  .rs2-roles__more {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }
  .rs2-refer {
    flex-direction: column;
    align-items: flex-start;
  }
  .rs2-refer__amount { order: 0; }
  .rs2-refer__cta { width: 100%; justify-content: center; }
}


/* ==========================================================================
   05  RED SKY INTELLIGENCE / "WHAT WE'RE WATCHING" (white surface)
   Container aligned to the 1240px canon (was 1440 in the prototype).
   Deep-red literals repointed to --rs-color-brand-red-deep (#9A0E25);
   the matching alpha values below use its RGB triplet 154 14 37.
   Zero JavaScript; scroll-driven reveals; static-visible fallback.
   All rules scoped under .rs2-intel. No class bleed.
   ========================================================================== */

.rs2-intel {
  --rsi-red:        var(--rs-color-brand-red);
  --rsi-red-deep:   var(--rs-color-brand-red-deep);
  --rsi-red-tint:   rgba(200, 16, 46, .10);
  --rsi-ink:        #222222;
  --rsi-graphite:   #575756;
  --rsi-muted:      #a8a8a7;
  --rsi-line:       #e8e8e8;
  --rsi-line-soft:  #ececec;
  --rsi-display:    var(--rs-font-display);
  --rsi-body:       var(--rs-font-body);
  --rsi-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --rsi-dur-base:   220ms;
  --rsi-dur-slow:   320ms;

  background: #ffffff;
  padding: 100px 0;
  position: relative;
  font-family: var(--rsi-body);
}

/* Signature: red hairline across the section top */
.rs2-intel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--rsi-red), var(--rsi-red-deep));
}

.rs2-intel__container {
  max-width: var(--rs-container-xl);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Header ---------- */

.rs2-intel .tl-header { margin-bottom: 56px; }

.rs2-intel .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--rsi-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rsi-red);
}

.rs2-intel .section-eyebrow-line {
  width: 28px;
  height: 1px;
  background: var(--rsi-red);
  transform-origin: left center;
}

.rs2-intel .section-heading {
  margin: 0;
  font-family: var(--rsi-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rsi-ink);
}

.rs2-intel .section-subhead {
  margin: 14px 0 0;
  max-width: 560px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.7;
  color: var(--rsi-graphite);
}

/* ---------- Grid ---------- */

.rs2-intel .tl-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2px;
}

.rs2-intel .tl-card {
  background: #ffffff;
  border: 1px solid var(--rsi-line);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all var(--rsi-dur-slow) var(--rsi-ease);
}

.rs2-intel .tl-card--featured { grid-row: span 2; }

@media (hover: hover) {
  .rs2-intel .tl-card:hover {
    border-color: rgba(200, 16, 46, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(34, 34, 34, 0.1);
    z-index: 1;
  }
  .rs2-intel .tl-card:hover .tl-card-title { color: var(--rsi-red-deep); }
  .rs2-intel .tl-card:hover .tl-card-read { gap: 8px; }
  .rs2-intel .tl-card:hover .tl-card-photo,
  .rs2-intel .tl-card:hover .tl-card-image-inner { transform: scale(1.04); }
}

/* ---------- Image window ---------- */

.rs2-intel .tl-card-image {
  width: 100%;
  height: 160px;
  display: block;
  background: linear-gradient(135deg, #1a0305 0%, #0d1117 50%, #1a0305 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.rs2-intel .tl-card-image--featured { height: 280px; }

.rs2-intel .tl-card-image-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 1.2s var(--rsi-ease);
}

.rs2-intel .tl-card-image-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 16, 46, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 16, 46, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.rs2-intel .tl-card-image-glow {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.2) 0%, transparent 70%);
  position: relative;
  z-index: 1;
}

.rs2-intel .tl-card-image-glow--sm { width: 120px; height: 120px; }

/* Real photo sits above the pattern fallback. While src is the
   "REPLACE THIS WITH IMAGE URL" placeholder the broken image is
   collapsed (alt="") and the pattern shows through. */
.rs2-intel .tl-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 1.2s var(--rsi-ease);
}

.rs2-intel .tl-card-category {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--rsi-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--rsi-red);
  color: #fff;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 2;
}

/* ---------- Card body ---------- */

.rs2-intel .tl-card-body {
  padding: 28px 28px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rs2-intel .tl-card-body--text {
  padding: 28px;
  justify-content: space-between;
}

.rs2-intel .tl-card-title {
  margin: 0 0 10px;
  font-family: var(--rsi-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--rsi-ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color var(--rsi-dur-base) var(--rsi-ease);
}

.rs2-intel .tl-card-title--featured { font-size: 22px; }
.rs2-intel .tl-card-title--sm       { font-size: 15px; margin-bottom: 0; }

.rs2-intel .tl-card-chip {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 8px;
  border-radius: 2px;
  font-family: var(--rsi-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--rsi-red-tint);
  color: var(--rsi-red-deep);
}

.rs2-intel .tl-card-excerpt {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--rsi-graphite);
  flex: 1;
}

.rs2-intel .tl-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--rsi-line-soft);
}

.rs2-intel .tl-card-body--text .tl-card-meta { border-top: 1px solid var(--rsi-line-soft); }

.rs2-intel .tl-card-author {
  font-family: var(--rsi-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--rsi-graphite);
  letter-spacing: 0.02em;
}

.rs2-intel .tl-card-date {
  font-size: 11px;
  font-style: italic;
  color: var(--rsi-muted);
}

.rs2-intel .tl-card-read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--rsi-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rsi-red-deep);
  transition: gap var(--rsi-dur-base) var(--rsi-ease);
}

/* ---------- Footer CTA ---------- */

.rs2-intel .tl-footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs2-intel .btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  background: transparent;
  color: var(--rsi-red-deep);
  font-family: var(--rsi-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgb(154 14 37 / 0.4);
  border-radius: 3px;
  transition: all var(--rsi-dur-base) var(--rsi-ease);
}

@media (hover: hover) {
  .rs2-intel .btn-outline-dark:hover {
    background: rgb(154 14 37 / 0.06);
    border-color: var(--rsi-red-deep);
  }
}

.rs2-intel .tl-card:focus-visible,
.rs2-intel .btn-outline-dark:focus-visible {
  outline: 2px solid var(--rsi-red);
  outline-offset: 3px;
}

/* ---------- Scroll-driven reveals ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .rs2-intel .tl-header,
    .rs2-intel .tl-card,
    .rs2-intel .tl-footer {
      animation: rs2Rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }

    /* Stagger mirrors the original reveal-delay-1..4 rhythm */
    .rs2-intel .tl-card:nth-child(2) { animation-range: entry 5%  entry 37%; }
    .rs2-intel .tl-card:nth-child(3) { animation-range: entry 10% entry 42%; }
    .rs2-intel .tl-card:nth-child(4) { animation-range: entry 15% entry 47%; }
    .rs2-intel .tl-card:nth-child(5) { animation-range: entry 20% entry 52%; }

    .rs2-intel .section-eyebrow-line {
      animation: rs2Rule both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs2-intel *,
  .rs2-intel *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Intel responsive ---------- */

@media (max-width: 1080px) {
  .rs2-intel .tl-grid { grid-template-columns: 1fr 1fr; }
  .rs2-intel .tl-card--featured { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 640px) {
  .rs2-intel { padding: 72px 0; }
  .rs2-intel__container { padding: 0 20px; }
  .rs2-intel .tl-grid { grid-template-columns: 1fr; }
  .rs2-intel .tl-card--featured { grid-column: auto; }
}


/* ==========================================================================
   06  FOOTER + NEWSLETTER BAND
   Source of the visual language: the ratified homepage prototype footer,
   reproduced faithfully, with a newsletter signup band added above it.

   CANON CORRECTIONS APPLIED
   - Variables descoped from :root (they were global with generic names
     like --red and --dur-base, a sitewide collision risk) and scoped to
     the footer components. Reds resolve to tokens; the darker hover
     lands on --rs-color-brand-red-deep (#9A0E25, formerly #A80D26).
   - Container aligned to the 1240px canon (was 1440).

   Divi 5 translation: Theme Builder Global Footer template. Classes via
   the Advanced tab.
   ========================================================================== */

.footer,
.footer-newsletter {
  --ftr-red:              var(--rs-color-brand-red);
  --ftr-red-hover:        var(--rs-color-brand-red-deep);   /* darker on hover, per ratified prototype */
  --ftr-red-glow:         rgba(200, 16, 46, 0.35);

  /* Surfaces (unchanged from prototype) */
  --ftr-bg-utility:       #040609;
  --ftr-bg-footer:        #020406;

  /* Text */
  --ftr-text-primary:     #ffffff;
  --ftr-text-secondary:   rgba(255, 255, 255, 0.60);
  --ftr-text-muted:       rgba(255, 255, 255, 0.35);

  /* Borders */
  --ftr-border-subtle:    rgba(255, 255, 255, 0.07);
  --ftr-border-red:       rgba(200, 16, 46, 0.20);
  --ftr-border-red-strong:rgba(200, 16, 46, 0.50);

  /* Interactive surfaces */
  --ftr-surface-active:   rgba(200, 16, 46, 0.08);

  /* Typography */
  --ftr-font-display:     var(--rs-font-display);
  --ftr-font-body:        var(--rs-font-body);

  /* Motion */
  --ftr-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --ftr-dur-base:         220ms;

  /* Layout */
  --ftr-container:        var(--rs-container-xl);
}

/* ---------- Newsletter signup band (sits above the footer grid) ---------- */

.footer-newsletter {
  border-bottom: 1px solid var(--ftr-border-subtle);
  background: var(--ftr-bg-utility);
}
.footer-newsletter-inner {
  max-width: var(--ftr-container);
  margin: 0 auto;
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
}
.footer-newsletter-eyebrow {
  font-family: var(--ftr-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ftr-red);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-newsletter-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--ftr-red);
}
.footer-newsletter-title {
  font-family: var(--ftr-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ftr-text-primary);
  margin: 0 0 4px;
}
.footer-newsletter-sub {
  font-family: var(--ftr-font-body);
  font-size: 13px;
  color: var(--ftr-text-muted);
  margin: 0;
}
.footer-newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 1 460px;
  min-width: min(340px, 100%);
}
.footer-newsletter-input {
  flex: 1 1 200px;
  height: 46px;
  padding: 0 16px;
  font-family: var(--ftr-font-body);
  font-size: 14px;
  color: var(--ftr-text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ftr-border-subtle);
  border-radius: 3px;
  transition: border-color var(--ftr-dur-base) var(--ftr-ease);
}
.footer-newsletter-input::placeholder { color: var(--ftr-text-muted); }
.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--ftr-border-red-strong);
}
.footer-newsletter-btn {
  height: 46px;
  padding: 0 26px;
  font-family: var(--ftr-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--ftr-red);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--ftr-dur-base) var(--ftr-ease);
}
.footer-newsletter-btn:hover { background: var(--ftr-red-hover); }

/* ---------- Footer (reproduced from the ratified homepage prototype) ---------- */

.footer {
  background: var(--ftr-bg-footer);
  border-top: 1px solid var(--ftr-border-subtle);
}
.footer-main {
  padding: 72px 40px 56px;
  max-width: var(--ftr-container);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 60px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 20px;
}
.footer-logo-icon {
  display: block;
  width: 34px;
  height: 34px;
}
.footer-logo-text {
  font-family: var(--ftr-font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.footer-logo-text .r { color: var(--ftr-red); }
.footer-logo-text .w { color: rgba(255, 255, 255, 0.9); }
.footer-tagline {
  font-family: var(--ftr-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ftr-text-muted);
  font-style: italic;
  margin: 0 0 24px;
  max-width: 280px;
}
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ftr-font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--ftr-text-secondary);
  text-decoration: none;
  transition: color var(--ftr-dur-base) var(--ftr-ease);
}
.footer-contact-item:hover { color: var(--ftr-text-primary); }
.footer-contact-item svg { color: var(--ftr-red); flex-shrink: 0; }
.footer-social { display: flex; gap: 10px; }
.footer-social-link {
  width: 34px;
  height: 34px;
  border: 1px solid var(--ftr-border-subtle);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ftr-text-muted);
  text-decoration: none;
  transition: all var(--ftr-dur-base) var(--ftr-ease);
}
.footer-social-link:hover {
  border-color: var(--ftr-border-red);
  color: var(--ftr-red);
  background: var(--ftr-surface-active);
}
.footer-col-heading {
  font-family: var(--ftr-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ftr-text-primary);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ftr-border-subtle);
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.footer-link {
  font-family: var(--ftr-font-body);
  font-size: 13px;
  color: var(--ftr-text-muted);
  text-decoration: none;
  transition: color var(--ftr-dur-base) var(--ftr-ease);
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-link::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ftr-red);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--ftr-dur-base) var(--ftr-ease);
}
.footer-link:hover { color: var(--ftr-text-secondary); }
.footer-link:hover::before { opacity: 1; }
.footer-bottom {
  border-top: 1px solid var(--ftr-border-subtle);
  padding: 20px 40px;
  max-width: var(--ftr-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-legal {
  font-family: var(--ftr-font-body);
  font-size: 11px;
  color: var(--ftr-text-muted);
}
.footer-legal a { color: var(--ftr-text-muted); text-decoration: underline; }
.footer-legal a:hover { color: var(--ftr-text-secondary); }
.footer-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ftr-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ftr-text-muted);
}
.footer-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ftr-red);
  animation: ftrPulseDot 2s ease-in-out infinite;
}
@keyframes ftrPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 var(--ftr-red-glow); }
  50%      { box-shadow: 0 0 0 5px rgba(200, 16, 46, 0); }
}

/* Focus visibility on the dark ground */
.footer a:focus-visible,
.footer-newsletter a:focus-visible,
.footer-newsletter-btn:focus-visible,
.footer-newsletter-input:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Footer responsive ---------- */

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-main { padding: 56px 24px 44px; }
  .footer-newsletter-inner { padding: 36px 24px; }
  .footer-bottom { padding: 18px 24px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-badge-dot { animation: none; }
}


/* ==========================================================================
   07  DIVI PLATFORM PATCHES (load-order sensitive; keep last)
   ========================================================================== */

/* RS2 sticky unlock: Divi wrappers must not clip.
   Divi injects overflow-y:hidden on #page-container inline, which
   kills position:sticky and scroll timelines for everything inside. */
body:not(.et-fb) #page-container,
body:not(.et-fb) #et-main-area,
body:not(.et-fb) #main-content,
body:not(.et-fb) .et-l,
body:not(.et-fb) .et_builder_inner_content {
  overflow: visible !important;
}

/* Divi entrance animations are banned inside the journey. Their
   viewport-trigger math breaks inside pinned, negative-margin geometry
   and strands modules at opacity 0. This file owns all journey motion. */
body:not(.et-fb) .rs2-slide .et_pb_module,
body:not(.et-fb) .rs2-slide .et_had_animation,
body:not(.et-fb) .rs2-slide .et-waypoint {
  opacity: 1 !important;
  animation-name: none !important;
  transform: none !important;
}

/* Journey photo: neutralize positioning on the Divi wrapper chain inside
   the stage so the absolute .rs2-slide__photo resolves against the stage. */
body:not(.et-fb) .rs2-slide__stage .et_pb_column,
body:not(.et-fb) .rs2-slide__stage .et_pb_code,
body:not(.et-fb) .rs2-slide__stage .et_pb_code_inner {
  position: static;
}

/* Stage armor: Divi 5's late dynamic CSS ties our stage selector on
   specificity and overrides height. Reassert the pin frame with weight. */
@media (min-width: 981px) {
  body:not(.et-fb) .rs2-slide .rs2-slide__stage {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
}


/* ==========================================================================
   08  TESTIMONIALS v2, single-row portrait marquee
   Replaces the v1 testimonial block entirely; v1 rules are removed.

   Auto-scroll is a single CSS transform animation, compositor thread,
   zero JS. Hard cutoff at the viewport edges, no masks. Pagination nudges
   the .rs2-tm__shift wrapper (rs2-testimonials.js). Reduced motion
   converts the row to a manual snap carousel.

   Single locked brand red #C8102E.
   ========================================================================== */

.rs2-tm {
  --rst-red:       var(--rs-color-brand-red, #C8102E);
  --rst-red-deep:  #9E0C24;
  --rst-ink:       #14151A;
  --rst-graphite:  #575756;
  --rst-muted:     #8A8B92;
  --rst-bone:      #F6F6F6;
  --rst-line:      #DDDDDA;
  --rst-display:   var(--rs-font-display, 'Montserrat', 'Helvetica Neue', sans-serif);
  --rst-body:      'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --rst-ease:      cubic-bezier(.4, 0, .2, 1);

  --rst-speed:     124s;                       /* full loop duration */
  --rst-card-w:    clamp(345px, 30vw, 428px);  /* portrait width, +15% */
  --rst-gap:       14px;

  background: var(--rst-bone);
  font-family: var(--rst-body);
  color: var(--rst-ink);
  padding: clamp(88px, 10vw, 140px) 0;
  overflow: hidden;
}

/* ---------- Header ---------- */

.rs2-tm__head {
  max-width: 1240px;
  margin: 0 auto clamp(44px, 5vw, 68px);
  padding: 0 clamp(20px, 5vw, 64px);
}

.rs2-tm__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--rst-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rst-red);
}

.rs2-tm__eyebrow-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--rst-red);
  transform-origin: left center;
}

.rs2-tm__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--rst-display);
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--rst-ink);
}

.rs2-tm__intro {
  margin: 18px 0 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.4vw, 17px);
  font-style: italic;
  line-height: 1.6;
  color: var(--rst-graphite);
}

/* ---------- Row, shift wrapper, track ---------- */

.rs2-tm__row {
  overflow: hidden;   /* hard cutoff at viewport edges, no mask */
  /* Breathing room inside the clip box so the hover lift is not
     cut off at the top and the shadow is not cut off at the
     bottom. The negative margins cancel the padding so section
     rhythm is unchanged. Keep the pairs equal. */
  padding-block: 28px 56px;
  margin-block: -28px -56px;
}

/* JS-nudged layer for the pagination buttons. Composes with the
   track's own animation; auto-scroll never touches JS. */
.rs2-tm__shift {
  will-change: transform;
  transition: transform .55s var(--rst-ease);
}

.rs2-tm__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: rs2TmScroll var(--rst-speed) linear infinite;
}

.rs2-tm__group {
  display: flex;
  gap: var(--rst-gap);
  padding-right: var(--rst-gap); /* keeps the seam gap even */
}

@keyframes rs2TmScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause on hover and on keyboard focus inside the row */
.rs2-tm__row:hover .rs2-tm__track,
.rs2-tm__row:focus-within .rs2-tm__track {
  animation-play-state: paused;
}

/* ---------- Card, portrait ---------- */

.rs2-tm__card {
  position: relative;
  flex: none;
  width: var(--rst-card-w);
  aspect-ratio: 5 / 8;
  margin: 0;
  padding: 26px 28px 26px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #FFFFFF;
  /* Fallback surface until the supplied image lands. Staff cards
     get a red-shifted variant below. */
  background:
    radial-gradient(120% 80% at 50% 30%, #3A3D46 0%, #1E2027 55%, #14151A 100%);
  transition:
    transform .45s var(--rst-ease),
    box-shadow .45s var(--rst-ease);
}

.rs2-tm__card--staff {
  background:
    radial-gradient(120% 80% at 50% 30%, #4A1520 0%, #2A0C13 55%, #14151A 100%);
}

/* Supplied blurry photo. Decorative, alt empty. While src is the
   "PUT IMAGE HERE" placeholder the broken image collapses and the
   gradient above shows through. */
.rs2-tm__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.001);
  transition: transform .8s var(--rst-ease);
}

/* Hide the image while its src is still the placeholder, otherwise
   Chrome paints a broken-image glyph over the card. This selector
   stops matching the moment a real URL is pasted in. */
.rs2-tm__bg[src="PUT IMAGE HERE"] { display: none; }

/* Legibility scrim, deepens on hover */
.rs2-tm__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 11, 15, .38) 0%, rgba(10, 11, 15, .18) 40%, rgba(10, 11, 15, .58) 100%);
  transition: background .45s var(--rst-ease);
  pointer-events: none;
}

.rs2-tm__top,
.rs2-tm__quote,
.rs2-tm__attr {
  position: relative;
  z-index: 2;
}

/* Top strip: badge left, rank right */
.rs2-tm__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rs2-tm__chip {
  padding: 7px 13px 6px;
  border-radius: 6px;
  font-family: var(--rst-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  line-height: 1;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rs2-tm__rank {
  font-family: var(--rst-display);
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -.03em;
  line-height: .9;
  color: rgba(255, 255, 255, .28);
  transition: color .45s var(--rst-ease);
  pointer-events: none;
}

/* Quote, left-aligned to the badge edge.
   The border-left, padding-left and margin resets override Divi's
   core blockquote rule, which otherwise paints a 5px accent bar and
   indents the text. Do not remove these; the bar comes back. */
.rs2-tm__quote {
  margin: auto 0;
  padding: 18px 0;
  border-left: 0;
  font-size: clamp(14.5px, 1.3vw, 16px);
  font-style: italic;
  line-height: 1.62;
  text-align: left;
  letter-spacing: -.002em;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 12px rgba(10, 11, 15, .35);
}

.rs2-tm__quote::before { content: "\201C"; }
.rs2-tm__quote::after  { content: "\201D"; }

/* Attribution, hairline above, left-aligned per mockup */
.rs2-tm__attr {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .30);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rs2-tm__who {
  font-family: var(--rst-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #FFFFFF;
}

.rs2-tm__org {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.35;
  color: rgba(255, 255, 255, .78);
}

/* ---------- Hover: pause is on the row; card lifts, zooms, darkens ---------- */

@media (hover: hover) {
  .rs2-tm__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px -24px rgba(10, 11, 15, .55);
  }
  .rs2-tm__card:hover .rs2-tm__bg { transform: scale(1.05); }
  .rs2-tm__card:hover .rs2-tm__scrim {
    background:
      linear-gradient(180deg, rgba(10, 11, 15, .50) 0%, rgba(10, 11, 15, .34) 40%, rgba(10, 11, 15, .68) 100%);
  }
  .rs2-tm__card:hover .rs2-tm__rank { color: rgba(255, 255, 255, .55); }
}

/* ---------- Pagination bar ---------- */

.rs2-tm__nav {
  max-width: 1240px;
  margin: clamp(40px, 4.5vw, 60px) auto 0;
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 5vw, 64px) 0;
  border-top: 1px solid var(--rst-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rs2-tm__nav-left {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}

.rs2-tm__foot-note {
  margin: 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--rst-muted);
}

.rs2-tm__results-link {
  font-family: var(--rst-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rst-red);
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 2px no-repeat;
  transition: background-size .35s var(--rst-ease);
}

.rs2-tm__nav-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rs2-tm__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--rst-graphite);
  background: transparent;
  color: var(--rst-graphite);
  cursor: pointer;
  transition:
    border-color .3s var(--rst-ease),
    color .3s var(--rst-ease),
    background .3s var(--rst-ease),
    transform .2s var(--rst-ease);
}

@media (hover: hover) {
  .rs2-tm__results-link:hover { background-size: 100% 2px; }
  .rs2-tm__btn:hover {
    border-color: var(--rst-red);
    color: #FFFFFF;
    background: var(--rst-red);
  }
}

.rs2-tm__btn:active { transform: scale(.94); }

.rs2-tm__btn:focus-visible,
.rs2-tm__results-link:focus-visible {
  outline: 2px solid var(--rst-red);
  outline-offset: 3px;
}

/* ---------- Header and nav reveal, scroll-driven ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rs2-tm__head {
      animation: rs2TmRise both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
    .rs2-tm__eyebrow-rule {
      animation: rs2TmRule both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
    .rs2-tm__nav {
      animation: rs2TmRise both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

@keyframes rs2TmRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rs2TmRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Reduced motion: manual snap carousel ---------- */

@media (prefers-reduced-motion: reduce) {
  .rs2-tm *,
  .rs2-tm *::before,
  .rs2-tm *::after {
    animation: none !important;
    transition: none !important;
  }
  .rs2-tm__row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: clamp(20px, 5vw, 64px);
  }
  .rs2-tm__shift,
  .rs2-tm__track { width: auto; transform: none !important; }
  .rs2-tm__group--clone { display: none; }
  .rs2-tm__card { scroll-snap-align: start; }
}

/* ---------- Testimonials responsive ---------- */

@media (max-width: 900px) {
  .rs2-tm {
    --rst-speed: 78s;
    --rst-card-w: clamp(272px, 76vw, 330px);
    --rst-gap: 16px;
  }
}

@media (max-width: 640px) {
  .rs2-tm__nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .rs2-tm__nav-btns { align-self: flex-end; }
}


/* ==========================================================================
   [REMOVED IN v3.1] NAVIGATION STYLESHEET
   A full stale copy of the v2 FIXED navigation CSS used to sit here. It has
   been deleted. The navigation stylesheet lives in exactly ONE place: the
   Divi Theme Builder Global Header Code module (RS2_Nav v3.1 anchored).
   Do not paste it back into this file. Every rule in it tied on specificity
   with the module, so the winner was decided by asset-optimizer ordering
   and flipped with cache state.
   ========================================================================== */


/* ==========================================================================
   09  OPEN ROLES / FEATURED OPPORTUNITIES, v2 (bone surface, Intel styling)
   REPLACES Section 04 (.rs2-roles v1). New namespace (.rs2-jobs / .jb-*) to
   avoid class collisions while both modules exist on staging. Delete
   Section 04 once the v1 Code module is retired from the builder, per the
   superseded-file discipline.

   Visual system inherited from Section 05 (.rs2-intel): sharp corners,
   1px hairline borders, 2px mosaic gap, 220/320ms transitions, lift +
   border-warm + soft-shadow hover, title-to-deep-red hover, scroll-driven
   reveals on the shared rs2Rise / rs2Rule keyframes (already defined in
   the shell foundations block). Zero JavaScript. Reduced motion respected.

   Mosaic hierarchy: row 1 feature cards (newest reqs, largest), row 2
   standard, row 3 compact + the dark referral tile.
   ========================================================================== */

.rs2-jobs {
  --rsj-red:        var(--rs-color-brand-red);
  --rsj-red-deep:   var(--rs-color-brand-red-deep);
  --rsj-red-hi:     var(--rs-color-brand-red-highlight); /* on-dark accent */
  --rsj-red-tint:   rgba(200, 16, 46, .10);
  --rsj-ink:        #222222;
  --rsj-graphite:   #575756;
  --rsj-muted:      #a8a8a7;
  --rsj-line:       #e8e8e8;
  --rsj-line-soft:  #ececec;
  --rsj-bone:       #F6F6F6;
  --rsj-card:       #FFFFFF;
  --rsj-dark:       #131418;      /* referral tile surface */
  --rsj-dark-text:  #B9BAC2;
  --rsj-dark-line:  rgba(255, 255, 255, .14);
  --rsj-amber:      #8A6A1B;
  --rsj-amber-tint: rgba(178, 137, 32, .12);
  --rsj-green:      #1F7A4D;
  --rsj-green-tint: rgba(31, 122, 77, .10);
  --rsj-display:    var(--rs-font-display);
  --rsj-body:       var(--rs-font-body);
  --rsj-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --rsj-dur-base:   220ms;
  --rsj-dur-slow:   320ms;

  background: var(--rsj-bone);
  color: var(--rsj-ink);
  font-family: var(--rsj-body);
  padding: 100px 0;
  position: relative;
}

.rs2-jobs__container {
  max-width: var(--rs-container-xl);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Header (type matched to .rs2-intel) ---------- */

.rs2-jobs .jb-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

.rs2-jobs .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--rsj-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rsj-red);
}

.rs2-jobs .section-eyebrow-line {
  width: 28px;
  height: 1px;
  background: var(--rsj-red);
  transform-origin: left center;
}

.rs2-jobs .section-heading {
  margin: 0;
  font-family: var(--rsj-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--rsj-ink);
}

.rs2-jobs .section-subhead {
  margin: 14px 0 0;
  max-width: 560px;
  font-size: 16px;
  font-style: italic;
  line-height: 1.7;
  color: var(--rsj-graphite);
}

/* View-all link: underline draws in, arrow nudges */
.rs2-jobs .jb-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-bottom: 6px;
  font-family: var(--rsj-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rsj-red-deep);
  background:
    linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size var(--rsj-dur-slow) var(--rsj-ease);
}

.rs2-jobs .jb-arrow { transition: transform var(--rsj-dur-base) var(--rsj-ease); }

@media (hover: hover) {
  .rs2-jobs .jb-viewall:hover { background-size: 100% 1px; }
  .rs2-jobs .jb-viewall:hover .jb-arrow { transform: translate(2px, -2px); }
}

/* ---------- Mosaic grid: 3 x 3, hairline 2px gaps ---------- */

.rs2-jobs .jb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.rs2-jobs .jb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--rsj-card);
  border: 1px solid var(--rsj-line);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all var(--rsj-dur-slow) var(--rsj-ease);
}

/* Mosaic tiers: newest reqs read larger, older reqs recede */
.rs2-jobs .jb-card--feature { padding: 30px 28px 24px; min-height: 258px; }
.rs2-jobs .jb-card--std     { padding: 26px 26px 22px; min-height: 216px; }
.rs2-jobs .jb-card--compact { padding: 22px 24px 18px; min-height: 168px; }

/* Hover system lifted from .tl-card: lift, warm border, soft shadow.
   No top accent bar. Corner arrow retained and nudged. */
@media (hover: hover) {
  .rs2-jobs .jb-card:hover {
    border-color: rgba(200, 16, 46, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(34, 34, 34, 0.1);
    z-index: 1;
  }
  .rs2-jobs .jb-card:hover .jb-card__name { color: var(--rsj-red-deep); }
  .rs2-jobs .jb-card:hover .jb-card__go {
    color: var(--rsj-red);
    transform: translate(2px, -2px);
  }
  .rs2-jobs .jb-card:hover .jb-card__meta li::before { background: var(--rsj-red); }
}

/* ---------- Card anatomy ---------- */

.rs2-jobs .jb-card__tags {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.rs2-jobs .jb-tag {
  padding: 4px 8px 3px;
  border-radius: 2px;
  font-family: var(--rsj-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.rs2-jobs .jb-tag--type  { color: var(--rsj-red-deep); background: var(--rsj-red-tint); }
.rs2-jobs .jb-tag--hot   { color: var(--rsj-amber);    background: var(--rsj-amber-tint); }
.rs2-jobs .jb-tag--multi { color: var(--rsj-green);    background: var(--rsj-green-tint); }
.rs2-jobs .jb-tag--refer { color: #FFFFFF;             background: var(--rsj-red); }

.rs2-jobs .jb-card__go {
  margin-left: auto;
  flex: none;
  color: var(--rsj-muted);
  transition:
    transform var(--rsj-dur-base) var(--rsj-ease),
    color var(--rsj-dur-base) var(--rsj-ease);
}

.rs2-jobs .jb-card__name {
  margin: 0 0 12px;
  font-family: var(--rsj-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rsj-ink);
  transition: color var(--rsj-dur-base) var(--rsj-ease);
}

.rs2-jobs .jb-card--feature .jb-card__name { font-size: 20px; line-height: 1.25; }
.rs2-jobs .jb-card--compact .jb-card__name { font-size: 15px; margin-bottom: 0; }

.rs2-jobs .jb-card__meta {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rsj-graphite);
}

/* Explicit guard against Divi list-style bleed into Code modules */
.rs2-jobs .jb-card__meta li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rs2-jobs .jb-card__meta li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C9C9C6;
  transform: translateY(-2px);
  transition: background var(--rsj-dur-base) var(--rsj-ease);
}

.rs2-jobs .jb-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rsj-line-soft);
}

.rs2-jobs .jb-card--compact .jb-card__foot { padding-top: 12px; margin-top: 14px; }

.rs2-jobs .jb-card__rate {
  font-family: var(--rsj-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--rsj-ink);
  white-space: nowrap;
}

.rs2-jobs .jb-card__rate-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rsj-muted);
  margin-right: 4px;
}

.rs2-jobs .jb-card__age,
.rs2-jobs .jb-card__desc {
  font-size: 11px;
  font-style: italic;
  color: var(--rsj-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Referral tile (dark, 9th cell) ---------- */

.rs2-jobs .jb-card--refer {
  background: var(--rsj-dark);
  border-color: var(--rsj-dark);
}

.rs2-jobs .jb-card--refer .jb-card__go { color: rgba(255, 255, 255, .45); }

.rs2-jobs .jb-card--refer .jb-card__name {
  color: #FFFFFF;
  font-size: 16px;
  margin-bottom: 10px;
}

.rs2-jobs .jb-refer__sub {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--rsj-dark-text);
  flex: 1;
}

.rs2-jobs .jb-refer__sub strong {
  font-family: var(--rsj-display);
  font-weight: 700;
  color: var(--rsj-red-hi);
  white-space: nowrap;
}

.rs2-jobs .jb-card--refer .jb-card__foot { border-top-color: var(--rsj-dark-line); }

.rs2-jobs .jb-refer__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--rsj-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rsj-red-hi);
  transition: gap var(--rsj-dur-base) var(--rsj-ease);
}

@media (hover: hover) {
  .rs2-jobs .jb-card--refer:hover {
    border-color: rgba(200, 16, 46, 0.55);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }
  .rs2-jobs .jb-card--refer:hover .jb-card__name { color: var(--rsj-red-hi); }
  .rs2-jobs .jb-card--refer:hover .jb-refer__cta { gap: 9px; }
  .rs2-jobs .jb-card--refer:hover .jb-card__go { color: var(--rsj-red-hi); }
}

/* ---------- Section footer (Intel btn-outline pattern) ---------- */

.rs2-jobs .jb-footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.rs2-jobs .jb-footer__note {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  color: var(--rsj-graphite);
}

.rs2-jobs .btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  background: transparent;
  color: var(--rsj-red-deep);
  font-family: var(--rsj-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgb(154 14 37 / 0.4);
  border-radius: 3px;
  transition: all var(--rsj-dur-base) var(--rsj-ease);
}

@media (hover: hover) {
  .rs2-jobs .btn-outline-dark:hover {
    background: rgb(154 14 37 / 0.06);
    border-color: var(--rsj-red-deep);
  }
  .rs2-jobs .btn-outline-dark:hover .jb-arrow { transform: translateX(3px); }
}

/* ---------- Focus ---------- */

.rs2-jobs .jb-card:focus-visible,
.rs2-jobs .jb-viewall:focus-visible,
.rs2-jobs .btn-outline-dark:focus-visible {
  outline: 2px solid var(--rsj-red);
  outline-offset: 3px;
}

/* ---------- Scroll-driven reveals (shared rs2Rise / rs2Rule) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .rs2-jobs .jb-header,
    .rs2-jobs .jb-card,
    .rs2-jobs .jb-footer {
      animation: rs2Rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }

    /* Column stagger, mirroring the Intel rhythm */
    .rs2-jobs .jb-card:nth-child(3n + 2) { animation-range: entry 5%  entry 37%; }
    .rs2-jobs .jb-card:nth-child(3n + 3) { animation-range: entry 10% entry 42%; }

    .rs2-jobs .section-eyebrow-line {
      animation: rs2Rule both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rs2-jobs *,
  .rs2-jobs *::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Jobs v2 responsive ---------- */

@media (max-width: 1080px) {
  .rs2-jobs .jb-grid { grid-template-columns: 1fr 1fr; }
  .rs2-jobs .jb-card--refer { grid-column: span 2; min-height: 0; }
  .rs2-jobs .jb-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .rs2-jobs { padding: 72px 0; }
  .rs2-jobs__container { padding: 0 20px; }
  .rs2-jobs .jb-grid { grid-template-columns: 1fr; }
  .rs2-jobs .jb-card--refer { grid-column: auto; }
  .rs2-jobs .jb-card--feature,
  .rs2-jobs .jb-card--std,
  .rs2-jobs .jb-card--compact { min-height: 0; }
  .rs2-jobs .jb-footer {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }
}

/* ==========================================================================
   rs2-shell.css SECTION 10 ADDENDUM (shell v3.1 -> v3.2)

   PASTE LOCATION: end of rs2-shell.css, immediately BEFORE the
   "========================= END rs2-shell.css" banner.

   ALSO EDIT the file header by hand:
   1. CONTENTS list, add:
        10  Solutions journey intro, slide 03.1 (.rs2-si) copy + rail + cue
   2. Change log, add under a new "v3.2 CHANGE LOG" line:
        - ADDED: Section 10, the 03.1 intro Code module skin. Left column
          carries the ratified intro copy; right column is the five-solution
          at-a-glance rail; a decorative scroll cue sits beneath. Zero JS.

   No functions.php change: rs2-shell.css is already enqueued sitewide with
   filemtime() versioning, so saving the file busts the cache on its own.
   Clear WP Rocket after saving.

   NOTE ON SECTION ORDER: Section 07 (Divi platform patches) is documented
   as "keep last" because its overflow and stage-armor rules must outrank
   Divi's late dynamic CSS. Section 10 contains no rules that compete with
   Section 07 (different selectors, no overflow, no stage geometry), so
   appending after 09 is safe, matching how 08 and 09 already sit after 07.
   ========================================================================== */


/* ==========================================================================
   10  SOLUTIONS JOURNEY INTRO, SLIDE 03.1 (.rs2-si)
   Companion to the 26-09-03 Slide 03.1 Code module. Replaces the native
   Divi Heading + Text stack: ratified intro copy left, the five-solution
   at-a-glance rail right, scroll cue beneath.

   Doctrine notes:
   - Lives inside the journey (Section 03), so CSS-owned layout is the
     sanctioned exception. The Section and Stage row keep their existing
     journey classes; the :has() neutralizer below zeros the Divi wrapper
     chain so this module composes identically with builder defaults.
   - Zero JavaScript. Reveals ride the shared rs2Rise / rs2Rule keyframes
     (Section 01 foundations) on scroll-driven timelines; unsupported
     browsers render everything static and fully visible. The cue bob is a
     time-based keyframe. Reduced motion kills all of it.
   - The desktop stage is a 100vh overflow-hidden pin, so content height is
     budgeted: short-laptop compaction guard at 860px, same lever as the
     .rs2-sol card guard in Section 03.
   - No stat keys in this component by design; the proof strip above the
     journey carries the figures.
   ========================================================================== */

.rs2-si {
  --rss-red:        var(--rs-color-brand-red);
  --rss-red-deep:   var(--rs-color-brand-red-deep);
  --rss-red-tint:   rgba(200, 16, 46, .08);
  --rss-ink:        #222222;
  --rss-graphite:   #575756;
  --rss-muted:      #a8a8a7;
  --rss-line:       #e8e8e8;
  --rss-card:       #FFFFFF;
  --rss-display:    var(--rs-font-display);
  --rss-body:       var(--rs-font-body);
  --rss-mono:       var(--rs-font-mono);
  --rss-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --rss-dur-base:   220ms;
  --rss-dur-slow:   320ms;

  position: relative;
  width: min(90%, var(--rs-container-xl));
  margin-inline: auto;
  font-family: var(--rss-body);
  color: var(--rss-ink);
  /* Stacked-mode rhythm. The desktop override below hands vertical
     centering to the 100vh stage instead. */
  padding-block: clamp(80px, 12vw, 128px);
}

@media (min-width: 981px) {
  body:not(.et-fb) .rs2-si { padding-block: 24px 8px; }
}

/* ---------- Divi guards ---------- */

.rs2-si *,
.rs2-si *::before,
.rs2-si *::after { box-sizing: border-box; }

/* :where() keeps the flatten at zero specificity so the single-class
   component margins below always win. Same lesson as the solutions hub
   "scrunched" bug; do not remove the wrapper. */
.rs2-si :where(p, h1, h2, h3, h4) { margin: 0; padding: 0; }
.rs2-si a { text-decoration: none; }
.rs2-si svg { display: block; }

/* ---------- Divi wrapper neutralizer, scoped to this module ---------- */
/* Zeros the Row / Column / Code chain that carries .rs2-si so the module
   composes edge to edge inside the stage with builder settings left at
   defaults. The Section is deliberately untouched: it carries the journey
   classes and background, and its padding is already zeroed in the
   section preset. */

#page-container .et_pb_row:has(.rs2-si),
#et-boc .et_pb_row:has(.rs2-si) {
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: none !important;
}
#page-container .et_pb_column:has(.rs2-si),
#et-boc .et_pb_column:has(.rs2-si) {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
#page-container .et_pb_code:has(.rs2-si),
#page-container .et_pb_module:has(.rs2-si),
#et-boc .et_pb_code:has(.rs2-si) {
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Two-column frame ---------- */

.rs2-si__grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

/* ---------- Left column: copy ---------- */

.rs2-si__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--rss-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rss-red);
}

.rs2-si__eyebrow-rule {
  display: block;
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--rss-red);
  transform-origin: left center;
}

.rs2-si__h {
  margin: 0;
  max-width: 20ch;
  font-family: var(--rss-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--rss-ink);
}

.rs2-si__body {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.7;
  color: var(--rss-graphite);
}
.rs2-si__body + .rs2-si__body { margin-top: 14px; }

/* ---------- Right column: the at-a-glance rail ---------- */

.rs2-si__rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.rs2-si__rail-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
  font-family: var(--rss-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rss-muted);
}
.rs2-si__rail-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rss-line);
}

.rs2-si__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: var(--rss-card);
  border: 1px solid var(--rss-line);
  border-radius: 10px;
  color: inherit;
  overflow: hidden;
  transition:
    transform var(--rss-dur-slow) var(--rss-ease),
    border-color var(--rss-dur-slow) var(--rss-ease),
    box-shadow var(--rss-dur-slow) var(--rss-ease);
}

/* Signature micro-detail: brand-red keyline draws down the left edge */
.rs2-si__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--rss-red);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .38s var(--rss-ease);
}

.rs2-si__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  color: var(--rss-red);
  background: var(--rss-red-tint);
  border: 1px solid rgba(200, 16, 46, .28);
  transition:
    background var(--rss-dur-base) var(--rss-ease),
    color var(--rss-dur-base) var(--rss-ease),
    border-color var(--rss-dur-base) var(--rss-ease);
}
.rs2-si__icon svg { width: 20px; height: 20px; }

.rs2-si__txt { display: block; min-width: 0; }

.rs2-si__t {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--rss-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.3;
  color: var(--rss-ink);
  transition: color var(--rss-dur-base) var(--rss-ease);
}

.rs2-si__n {
  flex: none;
  font-family: var(--rss-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--rss-muted);
}

.rs2-si__d {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rss-graphite);
}

.rs2-si__go {
  color: var(--rss-muted);
  transition:
    transform var(--rss-dur-base) var(--rss-ease),
    color var(--rss-dur-base) var(--rss-ease);
}
.rs2-si__go svg { width: 15px; height: 15px; }

@media (hover: hover) {
  .rs2-si__item:hover {
    transform: translateX(4px);
    border-color: rgba(200, 16, 46, .35);
    box-shadow: 0 12px 32px rgba(34, 34, 34, .10);
  }
  .rs2-si__item:hover::before { transform: scaleY(1); }
  .rs2-si__item:hover .rs2-si__t { color: var(--rss-red-deep); }
  .rs2-si__item:hover .rs2-si__icon {
    background: var(--rss-red);
    border-color: var(--rss-red);
    color: #FFFFFF;
  }
  .rs2-si__item:hover .rs2-si__go {
    color: var(--rss-red);
    transform: translateX(3px);
  }
}

.rs2-si__item:focus-visible {
  outline: 2px solid var(--rss-red);
  outline-offset: 3px;
}

/* ---------- Scroll cue ---------- */

.rs2-si__cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: clamp(36px, 5vh, 56px);
  color: var(--rss-muted);
}

.rs2-si__cue-label {
  font-family: var(--rss-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rs2-si__cue-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rss-line);
  color: var(--rss-red);
}
.rs2-si__cue-arrow svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: no-preference) {
  .rs2-si__cue-arrow { animation: rs2SiBob 2.2s var(--rss-ease) infinite; }
}

@keyframes rs2SiBob {
  0%, 100% { transform: translateY(0);   opacity: .85; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ---------- Scroll-driven reveals (shared rs2Rise / rs2Rule) ---------- */
/* Entry ranges complete during the slide's scroll-in, before the stage
   pins, so nothing is left mid-animation while 03.1 holds the viewport. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .rs2-si__copy,
    .rs2-si__rail-label,
    .rs2-si__item,
    .rs2-si__cue {
      animation: rs2Rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }

    /* Rail stagger. The label is child 1; items are children 2 through 6. */
    .rs2-si__rail .rs2-si__item:nth-child(2) { animation-range: entry 5%  entry 37%; }
    .rs2-si__rail .rs2-si__item:nth-child(3) { animation-range: entry 10% entry 42%; }
    .rs2-si__rail .rs2-si__item:nth-child(4) { animation-range: entry 15% entry 47%; }
    .rs2-si__rail .rs2-si__item:nth-child(5) { animation-range: entry 20% entry 52%; }
    .rs2-si__rail .rs2-si__item:nth-child(6) { animation-range: entry 25% entry 57%; }

    .rs2-si__eyebrow-rule {
      animation: rs2Rule both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}

/* ---------- Short-laptop guard ---------- */
/* The desktop stage is a 100vh overflow-hidden pin. Compact the block so
   the tallest column clears the frame on shallow screens. */

@media (min-width: 981px) and (max-height: 860px) {
  body:not(.et-fb) .rs2-si__h    { font-size: clamp(26px, 2.8vw, 36px); }
  body:not(.et-fb) .rs2-si__body { font-size: 14px; margin-top: 14px; }
  body:not(.et-fb) .rs2-si__body + .rs2-si__body { margin-top: 10px; }
  body:not(.et-fb) .rs2-si__rail { gap: 8px; }
  body:not(.et-fb) .rs2-si__item { padding: 11px 14px; gap: 12px; }
  body:not(.et-fb) .rs2-si__icon { width: 36px; height: 36px; }
  body:not(.et-fb) .rs2-si__icon svg { width: 18px; height: 18px; }
  body:not(.et-fb) .rs2-si__d   { font-size: 12px; margin-top: 2px; }
  body:not(.et-fb) .rs2-si__cue { margin-top: 22px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .rs2-si *,
  .rs2-si *::before,
  .rs2-si *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Intro responsive (stacked mode, 980px and below) ---------- */

@media (max-width: 980px) {
  .rs2-si__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .rs2-si__h { max-width: 100%; }
}

@media (max-width: 480px) {
  .rs2-si__item { padding: 13px 14px; gap: 12px; }
  .rs2-si__icon { width: 38px; height: 38px; }
}

/* ========================= END rs2-shell.css ============================= */