/* ============================================================
   AMRICO — inner-page redesign layer
   Shared by the marketing inner pages (full-service-outbound,
   advisory-training, about, and the lighter shell pages).

   Opt in with <body class="rd"> and link this file AFTER each
   page's inline <style>. Every rule is scoped to body.rd / .rd-*
   so it only augments the shared shell — it never restyles the
   base component rules, and legal / homepage pages are unaffected.

   Tokens (--navy-deep, --steel, --line-on-light, …) come from
   each page's inline :root. Typography stays Inter (var(--font-display)).
   ============================================================ */

/* Hero: dark scrim guarantees white-text contrast over the animated gradient */
body.rd .subhero::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(102deg,
    rgba(6,4,10,0.66) 0%,
    rgba(6,4,10,0.36) 42%,
    rgba(6,4,10,0) 74%);
}
body.rd .subhero-inner { position: relative; z-index: 2; }

/* Pacing helper — a wider breath before / after a heavy moment */
body.rd .rd-open { padding-top: 104px; }

/* ---- Non-sequential items: diamond marker instead of ordinal numbers ---- */
body.rd .rd-scenarios {
  margin-top: 32px;
  border-top: 1px solid var(--line-on-light);
}
body.rd .rd-scenario {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 26px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-on-light);
  align-items: start;
}
body.rd .rd-scenario-mark {
  width: 9px; height: 9px;
  margin-top: 9px;
  background: var(--steel-deep);
  transform: rotate(45deg); /* reads as a set of peers, not a ranked sequence */
}
body.rd .rd-scenario-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
body.rd .rd-scenario-body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-on-light);
  max-width: 720px;
}

/* ---- "What's included" split layout (statement left / rail right) ---- */
body.rd .rd-split { grid-template-columns: 1fr 430px; gap: 0 96px; }
body.rd .rd-split-head { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; }
body.rd .rd-split-head h2 { margin-bottom: 0; }
body.rd .rd-split .includes-item-body { color: var(--text-on-light); } /* readability bump */

/* ---- Signature moment: full-bleed dark band ---- */
body.rd .rd-band {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 100px 56px 104px;
  background:
    radial-gradient(ellipse 55% 75% at 82% 22%, rgba(122,155,173,0.16), transparent 62%),
    radial-gradient(ellipse 50% 65% at 12% 88%, rgba(30,58,138,0.20), transparent 66%),
    var(--navy-deep);
  color: #fff;
}
body.rd .rd-band-inner { max-width: 1180px; margin: 0 auto; }
body.rd .rd-band-lead { max-width: 760px; margin-bottom: 56px; }
body.rd .rd-band h2 { color: #fff; }
body.rd .rd-band-lead p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  max-width: 720px;
  margin-bottom: 16px;
}
body.rd .rd-band-lead p:last-child { margin-bottom: 0; }
body.rd .rd-band-feature {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px 64px;
  align-items: center;
  padding-top: 48px;
  border-top: 1px solid var(--line-on-dark-strong);
}
/* Variant: a single centered proof element (quote-only or stat-only) */
body.rd .rd-band-feature--single { grid-template-columns: 1fr; }
/* Variant: the band's proof point IS a statement (page has no stat/quote) — enlarge the headline */
body.rd .rd-band--statement .rd-band-lead { max-width: 1000px; margin-bottom: 0; }
body.rd .rd-band--statement h2 {
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin-bottom: 28px;
}
body.rd .rd-band-quote {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 32px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--beige);
}
body.rd .rd-band-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(60px, 8vw, 96px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
}
body.rd .rd-band-stat-num .unit {
  font-size: 0.36em;
  font-weight: 500;
  color: var(--steel);
  margin-left: 8px;
  letter-spacing: 0;
  vertical-align: middle;
}
body.rd .rd-band-stat-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
}

/* ---- Focus visibility (links, buttons, CTAs, FAQ summaries) ---- */
body.rd a:focus-visible,
body.rd button:focus-visible,
body.rd .subhero-cta:focus-visible,
body.rd .closer-cta:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
  border-radius: 2px;
}
body.rd .faq-item summary:focus-visible {
  outline: 2px solid var(--steel-deep);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--steel-deep);
}

/* ---- List rows: home-page "patterns" cadence for inner-page content lists ----
   Replaces the boxed page-grid / spec-list / includes look. Hairline rules run
   the full width of each row (edge to edge of the section, not cell borders),
   an index marker sits on the left, and rows alternate a faint tint. */
body.rd .rd-rows {
  margin-top: 34px;
  border-top: 1px solid var(--line-on-light);
}
body.rd .rd-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 26px;
  padding: 26px 30px 28px 8px;
  border-bottom: 1px solid var(--line-on-light);
  align-items: start;
  transition: background 0.4s ease;
}
body.rd .rd-row:nth-child(even) { background: rgba(15,26,41,0.024); }
body.rd .rd-row:hover { background: rgba(30,58,138,0.05); }
body.rd .rd-row-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--steel-deep);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
body.rd .rd-row-tx { max-width: 760px; }
body.rd .rd-row-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 8px;
}
body.rd .rd-row-body {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-on-light);
  margin: 0;
}

/* ---- Dark band variant: lead text left, single proof stat aside on the right ---- */
body.rd .rd-band--aside .rd-band-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px 72px;
  align-items: center;
}
body.rd .rd-band--aside .rd-band-lead { max-width: none; margin-bottom: 0; }

/* ---- Responsive: mirror the shared shell breakpoints ---- */
@media (max-width: 900px) {
  body.rd .rd-split { grid-template-columns: 1fr; gap: 0; }
  body.rd .rd-split-head { position: static; }
  body.rd .rd-open { padding-top: 48px; }
  body.rd .rd-band { padding: 68px 28px 72px; }
  body.rd .rd-band-lead { margin-bottom: 40px; }
  body.rd .rd-band-feature { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  body.rd .rd-band--aside .rd-band-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  body.rd .rd-row { grid-template-columns: 32px 1fr; gap: 2px 16px; padding: 22px 4px 24px; }
  body.rd .rd-row-num { font-size: 13px; }
}
