/* =========================================================================
 * rp-bands.css — Resume Place band grammar (rph-*): homepage + spine-landing section treatments
 *
 * A faithful CSS port of the platform's canonical RPHomeBody
 * (src/components/system/screens/RPHomeScreen.tsx), the single source of
 * truth for the RP marketing homepage. Authored as semantic classes so the
 * FSE `velocity/page-homepage` pattern renders the same editorial composition
 * the System Viewer ships: light hero, navy books band, night ethos, the
 * services system on paper, and the darkest-ground CTA + footer.
 *
 * Design law (locked): tangelo whispers (accent only, never a surface);
 * navy is the ground; bright book-cover blue #2F62C4 is the signal; serif
 * folios lead each section header. See project_rp_design_system_northstar.
 *
 * Colors reuse the brand-sync `--rp-*` vars where they exist so the homepage
 * stays in token parity; the signal blues (bright/lifted/night) are not yet
 * projected by the brand-sync plugin, so they default to the canonical hex.
 * ========================================================================= */

/* Tokens live on :root so the chrome (utility bar, sticky header, night
 * footer) — which renders outside the `.rph` homepage wrapper — resolves them
 * too. The `.rph` rule below only sets the page-body defaults. */
:root {
  /* signal + ground */
  --rph-tangelo: var(--rp-tangelo, #f94d00);
  --rph-spiced: var(--rp-spiced-tea, #b35c44);
  --rph-deep: var(--rp-deep-blue, #1c3664);
  --rph-evening: var(--rp-evening-blue, #0f264c);
  --rph-night: var(--rp-night-blue, #0b1d3a);
  --rph-blue: var(--rp-bright-blue, #2f62c4);
  --rph-blue-lift: var(--rp-lifted-blue, #5b8ae0);

  /* tints — inks aligned to the KT-tuned tokens (2026-07 readability feedback);
     remaining literals have no token equivalent */
  --rph-ink: var(--rp-ink, #16243a);
  --rph-ink2: var(--rp-ink-2, #37414B);
  --rph-ink3: var(--rp-ink-3, #586069);
  --rph-line: var(--rp-line, #e4e4e2);
  --rph-line2: var(--rp-line-2, #d6d6d4);
  --rph-surface: var(--rp-surface, #ffffff);
  --rph-surface2: var(--rp-surface-2, #fafaf9);
  --rph-bg: var(--rp-bg, #f4f3ef);
  --rph-blue50: var(--rp-blue-50, #eef1f7);
  --rph-band: var(--rp-light-gray, #d2d9db);
  --rph-blue200: var(--rp-blue-200, #b7c6e5);
  --rph-blue800: var(--rp-blue-800, #13294c);
  --rph-tangelo50: var(--rp-tangelo-50, #fff3ed);
  --rph-tangelo100: var(--rp-tangelo-100, #ffe3d5);
  --rph-tangelo700: var(--rp-tangelo-700, #c04000);
  /* Dark-band text tiers. Body copy reads near-white and near-NEUTRAL: the
     token's blue-cast tier (--rp-d-fg-2 #d7e1f0) still read "too blue" on the
     navy (KT 2026-08-18), so the body literal here deliberately does not use
     it. The muted tier is for labels and captions only. */
  --rph-dfg2: #e9eaec;
  --rph-dfg3: var(--rp-d-fg-3, #9fb1cc);
  --rph-dline: var(--rp-d-line, rgba(143, 167, 205, 0.18));

  /* families — reuse the theme's Messina preset slugs */
  --rph-serif: var(--wp--preset--font-family--mencken, "Messina Serif", Georgia, serif);
  --rph-sans: var(--wp--preset--font-family--inter, "Messina Sans", system-ui, sans-serif);
  /* Mono is decoration, texture or border only (Abe 2026-09-09): numeral
     chips and preformatted blocks. Meta lines, prices, captions and any
     other text are sans. */
  --rph-mono: var(--wp--preset--font-family--space-mono, "Messina Sans Mono", monospace);
  --rph-cond: var(--wp--preset--font-family--condensed, "Messina Sans Condensed", sans-serif);
}

/* The Site Editor's global styles resolve the `inter` preset to plain
   Inter, which drops Messina Sans from the body font sitewide. The preset
   feeds the derived family tokens (--font-sans / --rph-sans / --rp-sans),
   and those are computed at :root before any body-level override, so it is
   not enough to repoint the preset alone — we restate the derived tokens
   too. All are set on <body> (which contains every rendered element), so
   the brand sans — shipped as a theme @font-face — wins for the whole page;
   Inter and the system stack remain as fallbacks only. */
body {
  --rp-messina-sans-stack: "Messina Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wp--preset--font-family--inter: var(--rp-messina-sans-stack);
  --font-sans: var(--rp-messina-sans-stack);
  --rph-sans: var(--rp-messina-sans-stack);
  --rp-sans: var(--rp-messina-sans-stack);
}

.rph {
  background: var(--rph-bg);
  color: var(--rph-ink);
  font-family: var(--rph-sans);
  font-size: 16px;
  line-height: 1.55;
}

/* Blockified sections: core flow-layout gap must not add spacing — rph-*
   classes own all margins. Mirrors the .rp-ds neutralizer in rp-ds.css. */
.rph :where(.is-layout-flow) > *,
:where(.is-layout-flow) > .rph,
.rph:where(.is-layout-flow) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* the page-content wrapper should not impose its own padding/measure */
.rph,
.rph * {
  box-sizing: border-box;
}
.rph a {
  text-decoration: none;
  color: inherit;
}
.rph img {
  max-width: 100%;
}
/* :where() keeps the reset at class specificity (0,1,0) so component
   classes further down can set their designed margins on p/h elements. */
.rph :where(h1, h2, h3, h4, h5, p) {
  margin: 0;
}

/* ---- registered marks ---------------------------------------------------
   RP owns a shelf of registered marks and they land inside headlines. At
   display sizes the glyph sets full height and reads as a third word, and CSS
   has no selector for a character, so inc/registered-marks.php wraps every
   (R) and (TM) in rendered block output and this sizes it. Same values the
   composed program lockups already use (.rp-mark__reg in rp-ds.css), so a
   mark reads the same whether it is set in type or built as artwork. */
.rp-reg {
  font-weight: 400;
  font-size: 0.42em;
  vertical-align: 0.95em;
  margin-left: 0.1em;
  letter-spacing: 0;
  line-height: 0; /* a superior glyph must not open the line it sits on */
  top: 0;         /* cancel the UA offset; vertical-align does the lifting */
}

/* ---- layout atoms ------------------------------------------------------- */
.rph-wrap {
  width: 100%;
  /* Same grid as .rp-wrap, so the header, the homepage bands, and every child
     page band share one left edge. */
  max-width: var(--rp-c-max, 1280px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.rph-wrap--wide {
  max-width: var(--rp-c-wide, 1400px);
}
.rph-section {
  padding-block: 112px;
}
.rph-section--96 {
  padding-block: 96px;
}

/* ---- type atoms --------------------------------------------------------- */

/* MONO IS RETIRED FROM CHROME. Kathryn Troutman, 2026-08-17: "throughout the
   website you throw in this weird, small, grayish, all cap, spaced out type
   font... This is not cute or readable. It is washed out." 2026-08-18: the
   eyebrow itself is too small and she dislikes the treatment; condensed caps
   and serif italic recuts were both tried and passed over. The eyebrow now
   leaves the caps-label family entirely: Messina Sans SemiBold, sentence
   case, sized to read, tracking a touch tighter than normal (-0.01em), in
   the signal blue. Captions are serif italic sentence case; mono appears
   only where it is genuinely data (none on this page). Chrome is still a
   label — three or four words, never a price. Anything longer belongs in
   .rph-meta. */
.rph-kicker {
  font-family: var(--rph-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rph-blue);
}

/* The other side of that ceiling: meta lines carrying real information
   (prices, durations, credentials, attributions) are sans, sentence case,
   and sized to be read. Light bands. */
.rph-meta,
.rph-xhero__cta-meta,
.rph-services__note,
.rph-interview__cta-meta,
.rph-agency__roster-label,
.rph-cert__format,
.rph-testi__cite {
  font-family: var(--rph-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rph-ink2);
}

/* Same treatment on the dark bands, lifted so it stays legible on navy. */
.rph-meta--ondark,
.rph-rewrite__cta-meta,
.rph-method__cta-meta {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rph-dfg2, #9fb1cc);
}
.rph-kicker--ondark {
  color: var(--rph-blue-lift);
}
.rph-kicker--signal {
  color: var(--rph-blue-lift);
}
.rph-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rph-blue);
  vertical-align: middle;
  margin-right: 8px;
}
.rph-filed {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rph-ink3);
  white-space: nowrap;
}
.rph-filed--ondark {
  color: var(--rph-dfg3);
}

/* ---- section header (drop-figure folio) --------------------------------- */
.rph-sechead > p { margin: 0; }
.rph-sechead {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 24px;
  row-gap: 5px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rph-line);
}
.rph-sechead--ondark {
  border-bottom-color: var(--rph-dline);
}
/* The numbered-folio device is retired (2026-08-11): headers lead with the
   kicker. The rule hides any folio still in markup so older patterns and
   block attributes degrade cleanly. */
.rph-sechead__folio {
  display: none;
}
.rph-sechead__kicker {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.rph-sechead__filed {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
}
.rph-sechead__title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.06;
  letter-spacing: -0.016em;
  color: var(--rph-ink);
}
.rph-sechead--ondark .rph-sechead__title {
  color: #fff;
}
/* Narrow viewports: shrink the editorial header so it stops eating the fold
   and pushing the section content down. */
@media (max-width: 720px) {
  .rph-sechead {
    grid-template-columns: 1fr;
    row-gap: 4px;
    margin-bottom: 28px;
    padding-bottom: 16px;
  }
  .rph-sechead__filed { display: none; }
  .rph-sechead__title { font-size: 23px; line-height: 1.1; }
}

/* ---- buttons ------------------------------------------------------------ */
.rph-btn {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 0.86em 1.3em;
  border-radius: 9px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  transition: filter 150ms ease, background 150ms ease;
}
.rph-btn:hover {
  filter: brightness(1.06);
  text-decoration: none;
}
.rph-btn--sm {
  font-size: 11px;
  padding: 0.66em 1em;
}
.rph-btn--primary {
  background: var(--rph-tangelo);
  color: #fff;
  box-shadow: 0 1px 2px rgba(192, 64, 0, 0.3);
}
.rph-btn--navy {
  background: var(--rph-deep);
  color: #fff;
}
.rph-btn--bright {
  background: var(--rph-blue);
  color: #fff;
}
.rph-btn--quiet {
  background: var(--rph-surface);
  color: var(--rph-ink);
  border-color: var(--rph-line2);
}
.rph-btn--ondark {
  background: rgba(234, 240, 248, 0.08);
  color: #fff;
  border-color: rgba(159, 177, 204, 0.3);
}
/* Buttons are links inside .rph, where `.rph a { color: inherit }` (0,1,1)
   outranks the variant color (0,1,0) and drags the label to the dark ink
   color. Re-assert each variant's text color at higher specificity. */
.rph a.rph-btn--primary,
.rph a.rph-btn--navy,
.rph a.rph-btn--bright,
.rph a.rph-btn--ondark { color: #fff; }
.rph a.rph-btn--quiet { color: var(--rph-ink); }
.rph-arrow::after {
  content: "→";
}

/* ---- pills -------------------------------------------------------------- */
.rph-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: 6px;
  line-height: 1.1;
}
.rph-pill--blue {
  background: var(--rph-blue50);
  color: var(--rph-blue800);
}
.rph-pill--tangelo {
  background: var(--rph-tangelo50);
  color: var(--rph-tangelo700);
}
.rph-pill--spiced {
  background: var(--rph-surface2);
  color: #8a4631;
}

/* ---- chrome: header --------------------------------------------------- */
/* The sticky paper and the utility bar are owned by navigation-styles.css
 * (one owner per chrome element); .rph-header below is the legacy Velocity
 * header, unused by the RP pattern. */
.rph-header {
  background: rgba(244, 243, 239, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rph-line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.rph-header .rph-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}
.rph-header__logo {
  height: 20px;
  width: auto;
  display: block;
}
.rph-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.rph-nav a {
  font-family: var(--rph-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--rph-ink2);
}
.rph-nav a:hover {
  color: var(--rph-tangelo);
}
.rph-header__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---- 01 · hero ---------------------------------------------------------- */
.rph-hero {
  /* The top pad is the distance from the header rule to the first word, so it
     scales with the viewport instead of holding a desktop figure on a phone:
     88px stays exactly 88px from ~1470px up, and a 390px screen gets 40px
     rather than a screenful of empty ground. */
  padding-block: clamp(2.5rem, 6vw, 88px) clamp(2.5rem, 5.5vw, 80px);
  position: relative;
  overflow: hidden;
}
.rph-hero__glow {
  position: absolute;
  top: -25%;
  right: -12%;
  width: 62%;
  height: 130%;
  background: radial-gradient(58% 50% at 70% 42%, var(--rph-blue50), transparent 70%);
  pointer-events: none;
}
.rph-hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.rph-hero__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--rph-ink);
}
.rph-hero__lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--rph-ink2);
  max-width: 40ch;
  margin: 0 0 32px;
}
.rph-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.rph-hero__stats {
  margin-top: 48px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.rph-statdiv {
  width: 1px;
  height: 54px;
  background: var(--rph-line2);
  margin-top: 4px;
}
.rph-stat__n {
  font-family: var(--rph-serif);
  font-weight: 200;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--rph-blue);
}
.rph-stat__n sub,
.rph-stat__sub {
  font-size: 0.6em;
  vertical-align: baseline;
}
.rph-stat__l {
  display: block;
  font-family: var(--rph-sans);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--rph-ink2);
  margin-top: 4px;
}

/* hero eyebrow — kicker + rule + filed (mirrors the app ConsultHero) */
.rph-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
/* The crumb trail and the filed label do not both fit on one phone line, and
   holding them there squeezed the trail into two wrapped lines with the label
   hanging off the right. Below the band breakpoint they stack, and the rule
   between them goes: it is a divider for two things sitting side by side. */
@media (max-width: 720px) {
  .rph-hero__eyebrow { flex-wrap: wrap; gap: 4px 14px; margin-bottom: 16px; }
  .rph-hero__eyebrow .rph-hero__rule { display: none; }
}
.rph-hero__rule {
  flex: 1;
  height: 1px;
  background: var(--rph-line2);
}
.rph-hero__accent {
  font-style: italic;
  color: var(--rph-blue);
}
/* consultation hero passes its accent as <em> (tangelo) vs the homepage's blue span */
.rph-hero__title em {
  font-style: italic;
  color: var(--rph-tangelo);
}

/* hero fact row — mono small-caps, blue values, hairline rule on top */
.rph-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rph-line);
}
.rph-fact {
  font-family: var(--rph-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rph-ink3);
  white-space: nowrap;
}
.rph-fact b {
  color: var(--rph-blue);
  font-weight: 600;
}

/* hero proof rail — founder portrait + heritage clipping + price sticker */
.rph-hero__proof {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
.rph-proof__frame {
  position: absolute;
  inset: 18px -16px -16px 22px;
  background: var(--rph-blue);
  border-radius: 18px;
  opacity: 0.1;
}
.rph-proof__fig {
  position: relative;
  margin: 0;
  background: var(--rph-surface);
  border: 1px solid var(--rph-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42), 0 10px 22px -14px rgba(11, 29, 58, 0.22);
}
.rph-proof__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.rph-proof__cap {
  padding: 16px 18px 18px;
  background: var(--rph-deep);
  color: #fff;
}
.rph-proof__name {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.rph-proof__role {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-dfg2);
  margin-top: 6px;
}

/* price sticker — tilted navy card with full-bleed orange band */
.rph-pricetag {
  position: absolute;
  left: -28px;
  bottom: 150px;
  z-index: 2;
  display: inline-block;
  transform: scale(0.5) rotate(-4deg);
  transform-origin: center;
  background: var(--rph-deep);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 0 6px #e4e3dd, 0 18px 30px -12px rgba(11, 29, 58, 0.45);
}
/* Real $210 price-tag graphic (self-contained PNG) — keep the wrapper's
   position/rotation, drop the CSS-sticker background, ring, and clipping. */
.rph-pricetag--img {
  background: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transform: scale(1) rotate(-4deg);
}
.rph-pricetag__img {
  display: block;
  width: 188px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(11, 29, 58, 0.35));
}
.rph-pricetag__fig {
  padding: 20px 26px 16px;
  text-align: center;
}
.rph-pricetag__price {
  font-family: var(--rph-cond);
  font-weight: 900;
  font-size: 82px;
  line-height: 0.84;
  letter-spacing: -0.03em;
  color: #fff;
}
.rph-pricetag__unit {
  font-family: var(--rph-cond);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 8px;
  padding-left: 0.32em;
}
.rph-pricetag__band {
  background: var(--rph-tangelo);
  padding: 11px 16px 13px;
  text-align: center;
  font-family: var(--rph-cond);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.18;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

/* hero form card — the intake form occupying the hero's right column on the
   consultation page (rp_render_hero aside). Matches the proof frame's surface
   + shadow so it reads as the same design language. */
.rph-hero__aside {
  justify-self: stretch;
  width: 100%;
}
/* When the hero's right column is the intake form (taller than the copy),
   top-align both columns so the headline doesn't float mid-height, and widen
   the container so the two-column form fields have room to breathe. */
.rph-hero--form .rph-wrap--wide {
  max-width: 1520px;
}
.rph-hero--form .rph-hero__grid {
  align-items: start;
  /* Form column is wider than the copy so the 5-step pill row fits on one line. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 64px;
}
.rph-hero--form .rph-hero__title {
  font-size: 46px;
  line-height: 1.04;
  margin-bottom: 18px;
}
/* Copy column hierarchy: the lede reads as support, not a second display
   setting — smaller, tighter, and capped to a readable measure. The CTA and
   fact row close ranks under it instead of floating between rules. */
.rph-hero--form .rph-hero__eyebrow {
  margin-bottom: 26px;
}
.rph-hero--form .rph-hero__lede {
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: 22px;
}
.rph-hero--form .rph-hero__facts {
  margin-top: 26px;
  padding-top: 20px;
  gap: 10px 22px;
}
/* Split-screen band: the form column carries a full-bleed light-gray field.
   The band is a pseudo-element anchored to the real grid column (not a 50vw
   guess against the 0.82/1.18fr tracks), extended up/down by the section's
   padding and past the wrap's right edge; the section's overflow:hidden clips
   it exactly at the viewport. z-index:0 on the aside keeps the -1 layer
   inside its own stacking context. */
.rph-hero--form {
  padding-block: clamp(2.25rem, 5vw, 72px) clamp(2.25rem, 4.5vw, 64px);
}
.rph-hero--form .rph-hero__glow {
  display: none;
}
.rph-hero--form .rph-hero__aside {
  position: relative;
  z-index: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 8px;
  /* Center the card in the VISIBLE band, not the grid column: the band bleeds
     past the wrap edge to the viewport, so the extra width is all on the
     right. A left pad equal to that bleed (minus the band's 40px left
     extension) moves the flex center onto the visible band's center. */
  padding-left: max(0px, calc((100vw - 1520px) / 2 - 16px));
}
/* Faint motion behind the band — the homepage's DC loop footage, washed down
   to a whisper so the gray field and the white form panel keep the contrast.
   Same box as the band ::before; the scrim repaints the band color on top. */
.rph-hero--form .rph-hero__bandmedia {
  position: absolute;
  top: -72px;
  bottom: -64px;
  left: -40px;
  right: -50vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.rph-hero--form .rph-hero__bandmedia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(60%);
  opacity: 0.34;
}
.rph-hero--form .rph-hero__bandmedia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--rph-band) 12%, transparent 55%, transparent 100%);
}
.rph-hero--form .rph-hero__aside::before {
  content: "";
  position: absolute;
  top: -72px;
  bottom: -64px;
  left: -40px;
  right: -50vw;
  background: var(--rph-band);
  z-index: -1;
}
/* The card sheds its chrome on the band — borderless form, centered, tight. */
.rph-hero--form .rph-formcard {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: 100%;
  /* 600px, not 560: the PI form's five stepper pills need the extra measure
     to stay inside the panel on one line. */
  max-width: 600px;
}
.rph-hero--form .rph-formcard__head {
  margin-bottom: 14px;
  padding-bottom: 14px;
}
.rph-hero--form .rph-formcard__title {
  font-size: 22px;
  margin-top: 8px;
}
/* The note's copy moved to the hero's left column; the node stays for the
   tier-picker head-sync (data-svc-note) and is hidden by markup + here. */
.rph-hero--form .rph-formcard__note {
  display: none;
}
.rph-hero--form .rph-formcard .rp-embed-quiz {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
}

/* Left-column walkthrough — the homepage method's 01/02/03 vocabulary at mini
   scale: mono number, serif row title, supporting line, hairline rows. */
.rph-hero__steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.rph-hero__step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 4px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rph-line);
}
.rph-hero__step-n {
  grid-row: span 2;
  padding-top: 3px;
  font-family: var(--rph-mono);
  font-size: 13px;
  color: var(--rph-blue);
}
.rph-hero__step-t {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--rph-ink);
}
.rph-hero__step-b {
  grid-column: 2;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rph-ink2);
  max-width: 48ch;
}
/* The two rates as the RP price tags, under the walkthrough on the federal
   consultation page (Kathryn 2026-09-30). */
.rph-hero__tags {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 28px;
}
.rph-hero__tags img {
  display: block;
  width: min(170px, 42%);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(11, 29, 58, 0.22));
}
.rph-hero__tags img:first-child {
  transform: rotate(-3deg);
}
.rph-hero__tags img:last-child {
  transform: rotate(3deg);
}
/* Collapse the form-variant hero to one column on tablet/phone. This override
   out-specifies the base @media rule, so it needs its own breakpoint or the
   form card overflows off-screen. */
@media (max-width: 980px) {
  .rph-hero--form .rph-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .rph-hero--form .rph-hero__title {
    font-size: 40px;
  }
  /* One column: content first, then the form in a full-width gray block at
     the hero's foot. */
  .rph-hero--form .rph-hero__aside {
    padding-block: 28px 0;
    padding-left: 0;
  }
  .rph-hero--form .rph-hero__aside::before,
  .rph-hero--form .rph-hero__bandmedia {
    top: -24px;
    bottom: -64px;
    left: -50vw;
    right: -50vw;
  }
}
.rph-formcard {
  position: relative;
  background: var(--rph-surface);
  border: 1px solid var(--rph-line);
  border-radius: 18px;
  box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42), 0 10px 22px -14px rgba(11, 29, 58, 0.22);
  padding: 26px 26px 28px;
}
.rph-formcard__head {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rph-line);
}
.rph-formcard__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--rph-ink);
  margin: 10px 0 0;
}
.rph-formcard__note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--rph-ink2);
  margin: 10px 0 0;
}

/* founder strip — the founder credential + price, relocated under the hero now
   that the form (not the portrait) owns the hero's right column. */
.rp-founder-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--rp-c-max, 1180px);
  margin: 0 auto;
  padding: 20px 1.5rem;
  border-bottom: 1px solid var(--rph-line);
}
.rp-founder-strip__img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: none;
  border: 1px solid var(--rph-line);
}
.rp-founder-strip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}
.rp-founder-strip__name {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--rph-ink);
}
.rp-founder-strip__role {
  font-family: var(--rph-sans);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rph-ink2);
}
.rp-founder-strip__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.rp-founder-strip__price .from {
  font-family: var(--rph-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rph-ink2);
}
.rp-founder-strip__price .num {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  color: var(--rph-blue, #2f62c4);
  letter-spacing: -0.02em;
}
.rp-founder-strip__price .unit {
  font-size: 13px;
  color: var(--rph-ink2);
}
@media (max-width: 560px) {
  .rp-founder-strip {
    flex-wrap: wrap;
    gap: 12px;
  }
  .rp-founder-strip__price {
    width: 100%;
  }
}

/* trust band — four authority cells, serif lead + mono caption, hairline-divided */
.rph-trust {
  background: var(--rph-bg);
  border-top: 1px solid var(--rph-line);
  border-bottom: 1px solid var(--rph-line);
}
.rph-trust__wrap {
  padding-inline: 0;
}
.rph-trust__grid {
  display: grid;
  grid-template-columns: repeat(var(--rph-trust-cols, 4), 1fr);
  gap: 1px;
  background: var(--rph-line);
}
.rph-trust__cell {
  background: var(--rph-bg);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 26px 32px;
}
.rph-trust__lead {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--rph-ink);
}
.rph-trust__sub {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rph-ink2);
}
.rph-trust__rule {
  width: 22px;
  height: 2px;
  background: var(--rph-blue);
  margin-top: 4px;
}

/* preview card */
.rph-preview {
  background: var(--rph-surface);
  border: 1px solid var(--rph-line);
  border-radius: 18px;
  box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42), 0 10px 22px -14px rgba(11, 29, 58, 0.22);
  overflow: hidden;
}
.rph-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rph-line);
  background: var(--rph-surface2);
}
.rph-preview__filed {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rph-ink3);
}
.rph-preview__body {
  padding: 24px 24px 32px;
}
.rph-preview__meta {
  font-family: var(--rph-sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rph-ink3);
  margin-bottom: 8px;
}
.rph-preview__name {
  font-family: var(--rph-serif);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.06;
  color: var(--rph-ink);
}
.rph-preview__role {
  color: var(--rph-ink3);
  font-size: 14px;
  margin-top: 6px;
}
.rph-preview__bars {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rph-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--rph-blue50);
}
.rph-bar--hot {
  background: var(--rph-tangelo100);
}
.rph-preview__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rph-line);
}
.rph-preview__score {
  font-size: 14px;
  color: var(--rph-ink2);
}
.rph-preview__score b {
  font-family: var(--rph-serif);
  font-weight: 300;
  color: var(--rph-blue);
  font-size: 22px;
}
.rph-preview__mark {
  width: 24px;
  height: 24px;
  display: block;
}

/* ---- 02 · books (navy ground) ------------------------------------------ */
.rph-books {
  background: var(--rph-evening);
  color: #fff;
}
.rph-books__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: center;
}
.rph-books__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #fff;
  margin-top: 16px;
}
.rph-books__lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--rph-dfg2);
  margin-top: 20px;
  max-width: 46ch;
}
.rph-books__shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rph-spine {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--rph-blue), #1e47a0);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42);
  overflow: hidden;
}
.rph-spine::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: rgba(255, 255, 255, 0.16);
}
.rph-spine__ed {
  align-self: flex-start;
  font-family: var(--rph-cond);
  font-weight: 700;
  font-size: 9.9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rph-night);
  padding: 0.25em 0.5em;
  border-radius: 3px;
}
.rph-spine__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.16;
  color: #fff;
}
.rph-spine__sub {
  font-family: var(--rph-sans);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}

/* ---- 06 · the shelf — real covers (warm ground) ------------------------ */
.rph-books__covers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 48px;
}
.rph-book {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.rph-book__frame {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 22px 48px -26px rgba(11, 29, 58, 0.34);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rph-book__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.rph-book:hover .rph-book__frame,
.rph-book:focus-visible .rph-book__frame {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px -24px rgba(11, 29, 58, 0.44);
}
.rph-book__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  color: var(--rph-evening);
}
.rph-book__price {
  font-family: var(--rph-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rph-blue);
}
.rph-books__cta {
  margin-top: 44px;
}

/* ---- ethos (night interstitial) ---------------------------------------- */
.rph-ethos {
  background: var(--rph-night);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rph-ethos__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 60% at 50% 0, rgba(47, 98, 196, 0.22), transparent 70%);
}
.rph-ethos__inner {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 32px;
}
.rph-ethos__label {
  font-family: var(--rph-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rph-blue-lift);
  margin-bottom: 32px;
}
.rph-ethos__quote {
  margin: 0;
  font-family: var(--rph-serif);
  font-weight: 200;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.rph-ethos__cite {
  margin-top: 32px;
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 12.8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rph-dfg3);
}

/* ---- media + text ------------------------------------------------------- */
.rph-media__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.rph-media__fig {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42);
}
.rph-media__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.rph-media__cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  font-family: var(--rph-sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 29, 58, 0.55);
  backdrop-filter: blur(6px);
  padding: 0.4em 0.7em;
  border-radius: 4px;
}
.rph-media__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.06;
  letter-spacing: -0.016em;
  margin: 16px 0 0;
  color: var(--rph-ink);
}
.rph-media__body {
  font-size: 19px;
  line-height: 1.62;
  color: var(--rph-ink2);
  margin: 20px 0 28px;
  max-width: 46ch;
}

/* ---- pillars ------------------------------------------------------------ */
.rph-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rph-pillar {
  background: var(--rph-surface);
  border: 1px solid var(--rph-line);
  border-radius: 14px;
  padding: 32px 24px 24px;
  box-shadow: 0 1px 2px rgba(16, 36, 44, 0.05);
  position: relative;
  overflow: hidden;
}
/* Retired 2026-08-03. House rule: no coloured edge bars on cards; a colour code
   belongs on a tag or an eyebrow. The ECQ cards carry 01 to 05 numerals, which
   already do the sequencing. Kept as a no-op so any stale markup renders nothing
   rather than an unstyled span. */
.rph-pillar__rule { display: none; }
.rph-pillar__n {
  font-family: var(--rph-serif);
  font-weight: 200;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.rph-pillar__title {
  font-family: var(--rph-serif);
  font-weight: 600;
  font-size: 23px;
  margin: 16px 0 8px;
  color: var(--rph-ink);
}
.rph-pillar__role {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 11.8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.rph-pillar__body {
  color: var(--rph-ink2);
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
}
.rph-link {
  color: var(--rph-blue);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--rph-sans);
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
}

/* ---- photo band (full-bleed) ------------------------------------------- */
.rph-band {
  position: relative;
  padding-block: 128px;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.rph-band__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -0.016em;
  margin: 16px 0 0;
  color: #fff;
}
.rph-band__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 56px;
  margin-top: 40px;
  justify-content: start;
}
.rph-bandstat__n {
  display: block;
  font-family: var(--rph-serif);
  font-weight: 200;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
}
.rph-bandstat__l {
  display: block;
  font-family: var(--rph-sans);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rph-dfg2);
  margin-top: 10px;
  max-width: 22ch;
}

/* ---- services (paper, 4-up) -------------------------------------------- */
.rph-services {
  background: var(--rph-surface2);
  border-block: 1px solid var(--rph-line);
}
.rph-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.rph-svc {
  padding: 24px;
  background: var(--rph-surface);
  border: 1px solid var(--rph-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 36, 44, 0.05);
}
.rph-svc__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.rph-svc__title {
  font-family: var(--rph-serif);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--rph-ink);
}
.rph-svc__body {
  color: var(--rph-ink2);
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}

/* ---- news --------------------------------------------------------------- */
/* Two lead stories large, then a compact grid of the rest. */
.rph-news-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.rph-news-more {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.rph-news-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}
@media (max-width: 900px) {
  .rph-news-feature { grid-template-columns: 1fr; }
  .rph-news-more { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .rph-news-more { grid-template-columns: 1fr; }
}
.rph-newscard {
  background: var(--rph-surface);
  border: 1px solid var(--rph-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(16, 36, 44, 0.05);
}
.rph-newscard__cover {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background-size: cover;
  background-position: center;
}
.rph-newscard--banner .rph-newscard__cover {
  aspect-ratio: 16 / 9;
}
.rph-newscard__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.rph-newscard__meta {
  font-family: var(--rph-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rph-ink3);
}
.rph-newscard__title {
  font-family: var(--rph-sans);
  font-weight: 600;
  line-height: 1.2;
  font-size: 18.9px;
  margin: 0;
  color: var(--rph-ink);
}
/* Homepage post cards: sans throughout — no mono, no serif, no condensed. */
.rph-newscard .rph-pill {
  font-family: var(--rph-sans);
  letter-spacing: 0.06em;
}
.rph-newscard--banner .rph-newscard__body {
  padding: 24px 26px 26px;
  gap: 14px;
}
.rph-newscard--banner .rph-newscard__title {
  font-size: 27px;
  line-height: 1.1;
}
.rph-newscard--banner .rph-newscard__cover {
  padding: 20px;
}
.rph-newscard__excerpt {
  color: var(--rph-ink2);
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}
.rph-newscard__link {
  margin-top: auto;
}

/* ---- events (dark, serif numerals) ------------------------------------- */
.rph-events {
  background: var(--rph-evening);
  color: var(--rph-dfg2);
}
.rph-eventrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--rph-dline);
}
.rph-eventrow--first {
  border-top: none;
}
.rph-eventrow__date {
  text-align: center;
  width: 84px;
}
.rph-eventrow__dy {
  font-family: var(--rph-serif);
  font-weight: 200;
  font-size: 51px;
  line-height: 0.85;
  color: var(--rph-blue-lift);
  letter-spacing: -0.02em;
}
.rph-eventrow__mo {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 11.8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rph-dfg3);
  margin-top: 6px;
}
.rph-eventrow__title {
  font-family: var(--rph-serif);
  font-weight: 600;
  font-size: 18.9px;
  color: #fff;
  margin: 0;
}
.rph-eventrow__detail {
  font-family: var(--rph-sans);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rph-dfg3);
  margin-top: 6px;
}

/* ---- CTA (darkest ground, dual glow) ----------------------------------- */
.rph-cta__panel {
  background: linear-gradient(135deg, var(--rph-night), var(--rph-evening));
  border-radius: 18px;
  padding: 64px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.42);
}
.rph-cta__glow-a {
  position: absolute;
  top: -40%;
  right: -8%;
  width: 48%;
  height: 170%;
  background: radial-gradient(50% 50% at 60% 50%, rgba(249, 77, 0, 0.2), transparent 70%);
}
.rph-cta__glow-b {
  position: absolute;
  bottom: -50%;
  left: -6%;
  width: 42%;
  height: 160%;
  background: radial-gradient(50% 50% at 40% 50%, rgba(47, 98, 196, 0.26), transparent 70%);
}
.rph-cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 40px;
  align-items: center;
}
.rph-cta__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -0.016em;
  color: #fff;
  margin: 16px 0;
}
.rph-cta__lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--rph-dfg2);
  max-width: 46ch;
  margin: 0;
}
.rph-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- footer (night) ----------------------------------------------------- */
.rph-footer {
  background: var(--rph-night);
  color: var(--rph-dfg2);
  padding-block: 80px 32px;
}
.rph-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.rph-footer__logo {
  margin: 0;
}
.rph-footer__logo img {
  height: 24px;
  width: auto;
  display: block;
}
.rph-footer__line {
  font-family: var(--rph-serif);
  font-weight: 200;
  font-size: 38px;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 20px 0 0;
}
.rph-footcol__h {
  color: #fff;
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 16px;
}
.rph-footcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rph-footcol li {
  font-size: 14px;
  color: var(--rph-dfg2);
}
.rph-footcol a {
  color: var(--rph-dfg2);
  font-family: var(--rph-sans);
  text-decoration: none;
  transition: color 0.16s;
}
.rph-footcol a:hover {
  color: #fff;
}
/* The base row sets its own ink, so the links in it take the row's colour
   rather than the document's near-black link colour, which was invisible on
   the navy ground (1.24:1). */
.rph-footer__base a { color: inherit; text-decoration: none; }
.rph-footer__base a:hover,
.rph-footer__base a:focus-visible { color: #fff; text-decoration: underline; }
.rph-footer__legal { display: inline-flex; flex-wrap: wrap; gap: 0 .4rem; }
.rph-footer__base p { margin: 0; }

.rph-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rph-dline);
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-dfg3);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .rph-hero__grid,
  .rph-books__grid,
  .rph-media__grid,
  .rph-cta__grid {
    grid-template-columns: 1fr;
  }
  .rph-pillars,
  .rph-svc-grid,
  .rph-news-grid,
  .rph-books__covers,
  .rph-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .rph-hero__title {
    font-size: 44px;
  }
  .rph-hero__proof {
    margin-top: 44px;
  }
  .rph-trust__grid {
    grid-template-columns: 1fr 1fr;
  }
  .rph-ethos__quote {
    font-size: 38px;
  }
  .rph-nav,
  .rph-header__cta {
    display: none;
  }
}
@media (max-width: 640px) {
  .rph-section,
  .rph-band {
    padding-block: 72px;
  }
  .rph-pillars,
  .rph-svc-grid,
  .rph-news-grid,
  .rph-footer__grid,
  .rph-books__shelf,
  .rph-band__stats {
    grid-template-columns: 1fr;
  }
  .rph-hero__stats {
    flex-wrap: wrap;
    gap: 20px;
  }
  .rph-trust__grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Free builders (CCAR, cover letter, resume). Client-side Alpine tools
   rendered by inc/child-pages.php velocity_render_builder(). Uses the same
   --rph-* brand tokens as the homepage system.
   ======================================================================== */
/* ===========================================================================
   Free builders (.rpb): the CCAR Accomplishment Builder and the Cover Letter
   Builder, rebuilt 2026-08-21 to the production pages' shape. One column,
   full width, the page's own words first, then the form, then the closing
   guidance. Examples sit in the open under their prompts. Type is body size
   and body ink throughout (KT: the small, light register reads as "bad").
   ======================================================================== */
/* The same container as the hero above it (rp-wrap), so the form's left edge
   lines up with the title; the prose and fields cap at a reading width. */
.rpb {
  font-family: var(--rph-sans, var(--rp-messina-sans-stack));
  /* Padding, not margin: the constrained layout zeroes a first child's top
     margin, which put the intro flush against the hero's bottom edge. */
  padding-top: clamp(2.25rem, 4vw, 3.5rem);
  margin: 0 auto;
  width: 100%;
  max-width: var(--rp-c-max);
  padding-inline: 1.5rem;
  box-sizing: border-box;
}
.rpb > * { max-width: 62rem; }
.rp-after-band .rpb { padding-top: 0; }
.rpb-intro { margin: 0 0 2.25rem; }
.rpb-intro p,
.rpb-intro li {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--rph-ink, #16243a);
  margin: 0 0 1rem;
}
/* The theme resets list markers; these lists are prose and want them back. */
.rpb-intro ul,
.rpb-hints,
.rpb-submit-copy ul {
  list-style: disc;
}
.rpb-intro ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.rpb-intro li { margin-bottom: 0.4rem; }
.rpb-intro h3,
.rpb-closing h3 {
  margin-top: 2rem;
  font-family: var(--rph-serif, var(--rp-serif));
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rph-ink, #16243a);
  margin: 1.75rem 0 0.5rem;
}

/* How it works: the flow, stated before the form. */
.rpb-steps-k {
  font-size: 1rem;
  font-weight: 600;
  color: var(--rph-ink, #16243a);
  margin: 0 0 0.75rem;
}
.rpb-steps {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0 0 1.75rem;
  display: grid;
  gap: 1rem 2rem;
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
}
@media (min-width: 640px) {
  .rpb-steps { grid-template-columns: repeat(3, 1fr); }
}
.rpb-step { display: flex; flex-direction: column; gap: 0.3rem; }
.rpb-step-n {
  font-family: var(--rph-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rph-ink3, #727a82);
}
.rpb-step-t {
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--rph-ink, #16243a);
}
.rpb-step-sample {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rph-blue, #2f62c4);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The form's own heading: the tool's promise, then the note under it. */
.rpb-form-title {
  font-family: var(--rph-serif, var(--rp-serif));
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--rph-ink, #16243a);
  margin: 0 0 0.35rem;
}
.rpb-form-lead {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rph-tangelo, #f94d00);
  margin: 0 0 1rem;
}
.rpb-note {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--rph-ink2, #48515a);
  margin: 0 0 1.75rem;
}

/* Fields: full width, one per line; city / state / ZIP share a row. */
.rpb-field { margin-bottom: 1.4rem; }
.rpb-field--compact { margin-bottom: 0.9rem; }
.rpb-field--prompt { margin-bottom: 1rem; }
.rpb-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}
@media (min-width: 700px) {
  .rpb-row { grid-template-columns: 2fr 2fr 1fr; }
}
.rpb-label {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rph-ink, #16243a);
  margin: 0 0 0.4rem;
}
.rpb-req { color: var(--rph-tangelo, #f94d00); font-weight: 600; }
/* Instructional copy, at body size. */
.rpb-help {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rph-ink2, #48515a);
  margin: 0 0 0.6rem;
}
/* A prompt's checklist and its tip: instruction, at body size, quieter than
   the question above them but never small. */
.rpb-hint-kick {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--rph-ink, #16243a);
  margin: 0 0 0.3rem;
}
.rpb-hints {
  margin: 0 0 0.6rem;
  padding-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rph-ink2, #48515a);
}
.rpb-hints li { margin-bottom: 0.25rem; }
.rpb-tip {
  margin: 0 0 0.6rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--rph-line2, #d6d6d4);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rph-ink2, #48515a);
}
.rpb-field--note { margin-bottom: 1.6rem; }
/* The submit block's own heading and copy. */
.rpb-form-title--submit { margin-bottom: 0.6rem; }
.rpb-submit-copy p,
.rpb-submit-copy li {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--rph-ink2, #48515a);
  margin: 0 0 0.6rem;
}
.rpb-submit-copy ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.rpb-submit-copy strong { color: var(--rph-ink, #16243a); }

.rpb-note-inline {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--rph-ink, #16243a);
  margin: 0.25rem 0 1.25rem;
}
/* The worked example, in the open: blue lead-in, a rule on the left. */
.rpb-example {
  margin: 0 0 0.75rem;
  padding: 0.15rem 0 0.15rem 0.9rem;
  border-left: 3px solid var(--rph-blue, #2f62c4);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--rph-blue800, var(--rph-ink2, #48515a));
}
.rpb-field--prompt .rpb-example { margin-bottom: 0; }
.rpb-example-k {
  font-weight: 700;
  color: var(--rph-blue, #2f62c4);
}
/* Section titles inside a long form (Your details, Paragraph 2). */
.rpb-fieldset-title {
  font-family: var(--rph-serif, var(--rp-serif));
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--rph-ink, #16243a);
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
.rpb-form-title + .rpb-fieldset-title,
.rpb-form-lead + .rpb-fieldset-title,
.rpb-note + .rpb-fieldset-title { margin-top: 0.5rem; padding-top: 0; border-top: 0; }
.rpb-fieldset-lead {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--rph-ink, #16243a);
  margin: -0.5rem 0 1rem;
}
.rpb-check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--rph-ink2, #48515a);
}
.rpb-check input { margin-top: 0.25rem; flex: none; }
.rpb-control {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.05rem;
  color: var(--rph-ink, #16243a);
  background: var(--rph-surface, #fff);
  border: 1px solid var(--rph-line2, #d6d6d4);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rpb-control:focus {
  outline: none;
  border-color: var(--rph-blue, #2f62c4);
  box-shadow: 0 0 0 3px var(--rph-blue-ring, rgba(47, 98, 196, 0.15));
}
textarea.rpb-control { resize: vertical; min-height: 4rem; line-height: 1.5; }

/* Submitting closes the form. */
.rpb-submit {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
.rpb-capture-optin { margin: 0 0 1rem; }
.rpb-btn {
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid var(--rph-line2, #d6d6d4);
  background: var(--rph-surface, #fff);
  color: var(--rph-ink, #16243a);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rpb-btn:hover { border-color: var(--rph-ink3, #727a82); }
.rpb-btn-primary {
  background: var(--rph-tangelo, #f94d00);
  border-color: var(--rph-tangelo, #f94d00);
  color: #fff;
}
.rpb-btn-primary:hover { background: var(--rph-tangelo700, #c23d00); border-color: var(--rph-tangelo700, #c23d00); }
.rpb-submit-btn {
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}
@media (min-width: 700px) {
  .rpb-submit-btn { width: auto; min-width: 22rem; }
}
.rpb-after {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--rph-ink2, #48515a);
  margin: 1rem 0 0;
}
.rpb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.rpb-capture-err {
  font-size: 0.95rem;
  color: var(--rph-warn, #b26a14);
  margin: 0.6rem 0 0;
}

/* After sending: the confirmation, the other ways out, the text itself. */
.rpb-done {
  margin-top: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--rph-line, #e4e4e2);
  border-radius: 8px;
  background: var(--rph-surface2, #fafaf9);
}
.rpb-capture-done {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--rph-ink, #16243a);
  margin: 0 0 1rem;
  font-weight: 600;
}
.rpb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.rpb-pre {
  font-family: var(--rph-mono);
  font-size: 0.95rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--rph-ink, #16243a);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* The closing guidance, at body size. */
.rpb-closing {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rph-line, #e4e4e2);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--rph-ink, #16243a);
}
.rpb-closing p { margin: 0 0 0.9rem; }
.rpb-closing p:last-child { margin-bottom: 0; }
.rpb-closing blockquote {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--rph-blue, #2f62c4);
  background: var(--rph-surface2, #fafaf9);
  font-style: italic;
}
[x-cloak] { display: none !important; }

/* ===========================================================================
   Homepage v4 — the 13-section RPHomeBody port (editorial hero, audiences,
   new rules, method, photo band, agency, certification, newsletter). Reuses
   the shared rph- vocabulary (wrap, sechead, btn, kicker, filed, stat, dot).
   Faithful to src/components/system/screens/rp/sections/*.
   ======================================================================== */

/* -- Editorial hero (contact CTA replaces the app's upload dropzone) ------- */
.rph-xhero {
  position: relative;
  overflow: hidden;
  background: var(--rph-surface2, #fafaf9);
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
  padding-block: 72px 60px;
}
.rph-xhero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(56% 48% at 72% 38%, rgba(47, 98, 196, 0.1), transparent 70%);
}
.rph-xhero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  grid-template-areas: "lead book";
  gap: 36px 56px;
  align-items: center;
}
.rph-xhero__lead {
  grid-area: lead;
}
/* The book as the hero object — flat cover, physicality from the same layered
   programmatic shadows as the band treatment; no baked-in 3D artwork. */
.rph-xhero__bookobj {
  grid-area: book;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.rph-xhero__booklink {
  display: block;
  transform: rotate(1.5deg);
  transition: transform 0.24s ease;
}
.rph-xhero__booklink:hover {
  transform: rotate(0deg) translateY(-4px);
}
.rph-xhero__bookimg {
  display: block;
  width: min(340px, 100%);
  height: auto;
  border-radius: 2px 5px 5px 2px;
  box-shadow:
    0 1px 2px rgba(11, 29, 58, 0.18),
    0 10px 22px -8px rgba(11, 29, 58, 0.3),
    0 36px 56px -20px rgba(11, 29, 58, 0.38);
  transition: box-shadow 0.24s ease;
}
.rph-xhero__booklink:hover .rph-xhero__bookimg {
  box-shadow:
    0 2px 3px rgba(11, 29, 58, 0.16),
    0 16px 28px -10px rgba(11, 29, 58, 0.3),
    0 44px 68px -22px rgba(11, 29, 58, 0.42);
}
/* Portrait variant of the hero object: no book-spine radius or tilt, a person
   sits square; same layered shadow language keeps the physicality. */
.rph-xhero__bookimg--photo {
  width: min(360px, 100%);
  border-radius: 5px;
}
.rph-xhero__bookobj--photo .rph-xhero__bookimg--photo:hover {
  box-shadow:
    0 1px 2px rgba(11, 29, 58, 0.18),
    0 10px 22px -8px rgba(11, 29, 58, 0.3),
    0 36px 56px -20px rgba(11, 29, 58, 0.38);
}
.rph-xhero__bookcap {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink2);
  text-align: center;
}
/* KT's team blurb + credential badge beneath the hero portrait. */
.rph-xhero__photonote {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--rph-ink2);
  max-width: min(360px, 100%);
  margin: 0;
  text-align: center;
}
.rph-xhero__photobadge {
  width: 132px;
  height: auto;
  margin-top: 2px;
}
.rph-xhero__ctarow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 36px;
}
.rph-xhero__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.rph-xhero__head-rule {
  flex: 1;
  height: 1px;
  background: var(--rph-line2, #d6d6d4);
}
.rph-xhero__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--rph-ink);
  max-width: 15ch;
}
.rph-xhero__lede {
  font-size: 1.1875rem;
  font-weight: 600; /* Messina Sans ships 400/600 only; 500 falls back to 400 */
  line-height: 1.5;
  color: var(--rph-ink);
  max-width: 46ch;
  margin: 28px 0 0;
}
/* The subhead sits tight under the H1; the checks list follows it. */
.rph-xhero__lede--sub {
  margin-top: 16px;
}
/* The act block's own headline: the outcome, the offer, then the order CTA. */
.rph-xhero__act-title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--rph-ink);
  margin: 0 0 6px;
}
.rph-xhero__act-sub {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--rph-ink2);
  margin: 0 0 16px;
}
.rph-xhero__stats {
  margin-top: 40px;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.rph-xhero__statdiv {
  width: 1px;
  height: 54px;
  background: var(--rph-line2, #d6d6d4);
  margin-top: 4px;
}
/* Contact CTA card — the app's dropzone footprint, as a solid action card. */
.rph-xhero__cta {
  background: var(--rph-surface, #fff);
  border: 1px solid var(--rph-line2, #d6d6d4);
  border-radius: 16px;
  box-shadow: var(--rp-sh-sm);
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 208px;
  justify-content: center;
}
.rph-xhero__cta-eyebrow {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rph-tangelo);
}
.rph-xhero__cta-title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.18;
  color: var(--rph-ink);
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0;
}
/* type comes from the .rph-meta group in "type atoms" */
.rph-xhero__cta-meta {
  max-width: 46ch;
}
.rph-xhero__cta .rph-btn {
  margin-top: 6px;
}
.rph-xhero__skip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 2px;
  color: var(--rph-ink3);
  font-family: var(--rph-sans);
  font-size: 0.82rem;
}
.rph-xhero__skip-rule {
  flex: 1;
  height: 1px;
  background: var(--rph-line2, #d6d6d4);
}
.rph-xhero__skip a {
  color: var(--rph-blue);
  font-weight: 600;
  text-decoration: none;
}
.rph-xhero__skip a:hover {
  text-decoration: underline;
}

/* -- Section lede (shared under a sechead) --------------------------------- */
.rph-lede {
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--rph-ink2);
  max-width: 62ch;
  margin: 0 0 40px;
}
.rph-lede--ondark {
  color: var(--rph-dfg2, #9fb1cc);
}

/* -- Card grids (audiences, rules) ----------------------------------------- */
.rph-cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Seven-card composition: a row of three service tracks, then a row of
   four audience cards. 12-col grid so both rows divide evenly. */
.rph-cardgrid--34 {
  grid-template-columns: repeat(12, 1fr);
}
.rph-cardgrid--34 > .rph-scard {
  grid-column: span 4;
}
.rph-cardgrid--34 > .rph-scard:nth-child(n + 4) {
  grid-column: span 3;
}
.rph-scard {
  background: var(--rph-surface, #fff);
  border: 1px solid var(--rph-line, #e4e4e2);
  border-radius: 14px;
  padding: 30px 26px 26px;
  box-shadow: var(--rp-sh-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rph-scard__tag {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.rph-scard__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--rph-ink);
}
.rph-scard--rule .rph-scard__title {
  font-size: 1.4375rem;
}
.rph-scard__body {
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--rph-ink2);
  margin: 0;
}
.rph-scard__more {
  margin-top: auto;
  padding-top: 4px;
  color: var(--rph-blue);
  font-weight: 600;
  font-size: 0.875rem;
  font-family: var(--rph-sans);
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
  text-decoration: none;
}
.rph-scard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rph-scard__stamp {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.12em;
  color: var(--rph-ink3);
}
.rph-rules {
  background: var(--rph-surface2, #fafaf9);
  border-top: 1px solid var(--rph-line, #e4e4e2);
}

/* -- Services strip (under the hero) ---------------------------------------
   The three business lines as a full-bleed directory: three ruled columns
   edge to edge, one line of copy each, proof marks at display scale flushed
   to the column foot. */
.rph-services {
  background: var(--rph-surface, #fff);
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
}
.rph-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.rph-services__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(36px, 4vw, 64px) clamp(28px, 3.5vw, 64px);
}
.rph-services__col + .rph-services__col {
  border-left: 1px solid var(--rph-line, #e4e4e2);
}
.rph-services__tag {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.rph-services__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.1vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--rph-ink);
}
.rph-services__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rph-ink2);
  margin: 0;
  max-width: 40ch;
}
.rph-services__proof {
  margin-top: auto;
  padding-top: clamp(24px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.rph-services__marks {
  width: 100%;
}
/* The card action spans the column but reads centered: label and arrow
   together, sized up from the --sm default it still carries in markup. */
.rph-services__cta {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  gap: 0.5em;
  font-size: 0.9375rem;
  padding: 0.95em 1.2em;
}
.rph-services__marks {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(20px, 2vw, 32px);
  flex-wrap: wrap;
  border-top: 1px solid var(--rph-line, #e4e4e2);
  padding-top: clamp(20px, 2vw, 32px);
}
.rph-services__logo {
  height: 84px;
  width: auto;
  max-width: 100%;
}
.rph-services__logo--nwboc {
  height: 72px;
}
.rph-services__logo--stars {
  height: 92px;
}
.rph-services__logo--rp {
  height: 44px;
}
/* type comes from the .rph-meta group in "type atoms" */
.rph-services__note {
  margin: 0;
}
/* -- Audience index (who we serve) -----------------------------------------
   The seven audiences as a ruled index instead of cards: name, one hook,
   arrow. Two columns of slim rows; the service pages carry the detail. */
.rph-audindex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(48px, 5vw, 96px);
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
}
.rph-audindex__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name arrow" "hook arrow";
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  padding: 16px 0;
  border-top: 1px solid var(--rph-line, #e4e4e2);
  text-decoration: none;
}
.rph-audindex__name {
  grid-area: name;
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rph-ink);
}
.rph-audindex__hook {
  grid-area: hook;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--rph-ink3);
}
.rph-audindex__row .rph-arrow {
  grid-area: arrow;
  color: var(--rph-blue, #2f62c4);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.rph-audindex__row:hover .rph-arrow {
  opacity: 1;
  transform: translateX(0);
}
.rph-audindex__row:hover .rph-audindex__name {
  color: var(--rph-blue, #2f62c4);
}

/* -- Audience strip (who we serve) ------------------------------------------
   Folded into the foot of the start section: a rule, one line, then seven
   compact icon tiles, one per audience, each routing to its own page. */
.rph-audband {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
.rph-audband__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 24px;
}
.rph-audband__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rph-ink, #10242c);
  margin: 0;
}
.rph-audband__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.rph-audband__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px 14px;
  background: var(--rph-surface, #fff);
  border: 1px solid var(--rph-line, #e4e4e2);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.rph-audband__tile:hover {
  border-color: var(--rph-blue, #2f62c4);
  box-shadow: var(--rp-sh-sm);
}
.rph-audband__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--rph-line, #e4e4e2);
  border-radius: 8px;
  color: var(--rph-blue, #2f62c4);
}
.rph-audband__icon svg {
  width: 20px;
  height: 20px;
}
.rph-audband__name {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--rph-ink, #10242c);
}
.rph-audband__tile .rph-arrow {
  position: absolute;
  top: 20px;
  right: 14px;
  color: var(--rph-blue, #2f62c4);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.rph-audband__tile:hover .rph-arrow {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 980px) {
  .rph-audband__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .rph-services__grid {
    grid-template-columns: 1fr;
  }
  .rph-services__col + .rph-services__col {
    border-left: 0;
    border-top: 1px solid var(--rph-line, #e4e4e2);
  }
  .rph-audindex {
    grid-template-columns: 1fr;
  }
}

/* -- Method (dark, framed media + numbered steps) -------------------------- */
.rph-method {
  background: var(--rph-evening, #0f264c);
  color: #fff;
}
.rph-method__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 52px;
  align-items: stretch;
}
.rph-method__fig {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rph-dline, rgba(143, 167, 205, 0.18));
  min-height: 420px;
  background:
    linear-gradient(180deg, rgba(15, 38, 76, 0.2), rgba(11, 29, 58, 0.9)),
    var(--rph-night, #0b1d3a);
  background-size: cover;
  background-position: center;
}
.rph-method__cap,
.rph-method__fig > figcaption {
  position: absolute;
  left: 22px;
  bottom: 20px;
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  color: #fff;
  text-shadow: 0 1px 10px rgba(11, 29, 58, 0.7);
}
.rph-method__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.rph-method__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
.rph-method__n {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 1.875rem;
  line-height: 1;
  color: var(--rph-blue-lift, #5b8ae0);
  padding-top: 2px;
  min-width: 44px;
}
/* The step tag matches the step title's size (1.375rem) so the tag names the
   move without shouting over it; the numeral stays the largest mark. */
.rph-method__tag {
  font-family: var(--rph-sans);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rph-blue-lift, #5b8ae0);
}
.rph-method__stitle {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
  color: #fff;
}
.rph-method__sbody {
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--rph-dfg2, #9fb1cc);
  margin: 6px 0 0;
  max-width: 42ch;
}
.rph-method__cta {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* on the text column: numeral min-width plus the step grid gap */
  padding-left: 64px;
}
/* Sectionized DB pages wrap band children in WP flow-layout groups, whose
   :root :where(.is-layout-flow) > * rule zeroes direct-child margins after
   this sheet in the cascade. Re-assert the CTA offsets one level deeper. */
.rph-method .rph-method__cta {
  margin-block-start: 34px;
}
.rph-rewrite .rph-rewrite__cta {
  margin-block-start: 36px;
}
.rph-interview .rph-interview__cta {
  margin-block-start: 30px;
}
/* -- The two-page rewrite band (the 2025 what-changed cards, reworked into a
      selling section near the foot of the page; KT direction 2026-08-10) --- */
.rph-rewrite {
  /* Opens on the method band's evening navy, so the two join without a
     seam, and settles into night by the foot (Abe 2026-09-09): the dark
     twin of the hero's white-to-gray fade into the start section. */
  background: linear-gradient(180deg, var(--rph-evening, #0f264c) 0%, var(--rph-evening, #0f264c) 18%, var(--rph-night, #0b1d3a) 100%);
  color: #fff;
}
.rph-rewrite__grid {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: 64px;
  align-items: start;
}
.rph-rewrite__fig {
  margin: 0;
  position: sticky;
  top: 96px;
}
.rph-rewrite__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 46% 18%;
  border: 1px solid var(--rph-dline, rgba(143, 167, 205, 0.18));
  filter: saturate(0.88);
}
.rph-rewrite__figcap {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--rph-dfg3, #9fb1cc);
  margin-top: 12px;
  max-width: 38ch;
}
.rph-sechead--tight {
  margin-bottom: 0;
}
.rph-rewrite__lede {
  margin-top: 22px;
  max-width: 54ch;
}
/* five pages become two: CSS-only page stacks */
.rph-rewrite__pages {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 34px;
  padding-bottom: 4px;
}
.rph-rewrite__stack {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.rph-rewrite__stack i {
  display: block;
  width: 22px;
  height: 30px;
  border: 1px solid var(--rph-dfg3, #6f84a6);
  border-radius: 1px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 5px,
      var(--rph-dline, rgba(143, 167, 205, 0.28)) 5px 6px
    ) content-box;
  padding: 5px 4px;
}
.rph-rewrite__stack--new i {
  border-color: var(--rph-blue);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 5px,
      rgba(95, 138, 224, 0.55) 5px 6px
    ) content-box;
}
.rph-rewrite__stacklabel {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rph-dfg3, #6f84a6);
  padding-bottom: 6px;
}
.rph-rewrite__becomes {
  font-family: var(--rph-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--rph-dfg2, #9fb1cc);
  padding-bottom: 5px;
  margin-inline: 6px;
}
.rph-rewrite__rows {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  border-top: 1px solid var(--rph-dline, rgba(143, 167, 205, 0.18));
}
.rph-rewrite__row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rph-dline, rgba(143, 167, 205, 0.18));
}
.rph-rewrite__tag {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rph-blue-lift, #5b8ae0);
  padding-top: 3px;
}
.rph-rewrite__rowbody {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--rph-dfg2, #9fb1cc);
  max-width: 56ch;
}
@media (max-width: 900px) {
  .rph-rewrite__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .rph-rewrite__fig {
    position: static;
    max-width: 460px;
  }
  .rph-rewrite__fig img {
    aspect-ratio: 4 / 3;
  }
  .rph-rewrite__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.rph-rewrite__cta {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* type comes from the .rph-meta--ondark group in "type atoms" */
.rph-rewrite__cta-meta {
  margin: 0;
}
.rph-scard--ondark {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rph-dline, rgba(143, 167, 205, 0.18));
  box-shadow: none;
}
.rph-scard--ondark .rph-scard__title {
  color: #fff;
}
.rph-scard--ondark .rph-scard__body {
  color: var(--rph-dfg2, #9fb1cc);
}
.rph-scard--ondark .rph-scard__stamp {
  color: var(--rph-dfg2, #9fb1cc);
}

/* type comes from the .rph-meta--ondark group in "type atoms" */
.rph-method__cta-meta {
  margin: 0;
}

/* -- Washington photo band ------------------------------------------------- */
.rph-pband {
  position: relative;
  overflow: hidden;
  padding-block: 112px;
  background-color: var(--rph-night, #0b1d3a);
  background-image: linear-gradient(180deg, rgba(11, 29, 58, 0.88), rgba(11, 29, 58, 0.94));
  color: #fff;
}
.rph-pband__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 2.875rem);
  line-height: 1.06;
  letter-spacing: -0.016em;
  margin: 16px 0 0;
  color: #fff;
  max-width: 20ch;
}
.rph-pband__lede {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--rph-dfg2, #9fb1cc);
  margin: 18px 0 0;
  max-width: 46ch;
}
.rph-pband__people {
  margin: 44px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.rph-pband__fig {
  margin: 0;
}
.rph-pband__ph {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.rph-pband__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rph-pband__cap {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  color: var(--rph-dfg3, #9fb1cc);
  margin-top: 12px;
  display: block;
}
.rph-pband__stats {
  margin: 46px 0 0;
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}
.rph-pband__stat-n {
  display: block;
  font-family: var(--rph-serif);
  font-weight: 200;
  font-size: 2.75rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
}
.rph-pband__stat-l {
  display: block;
  font-family: var(--rph-sans);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--rph-dfg2, #9fb1cc);
  margin-top: 4px;
  max-width: 22ch;
}

/* -- Agency training (night, roster) --------------------------------------- */
.rph-agency {
  /* --rph-paper is defined nowhere, so this band always fell through to the
     literal, which was another yellow (hue 42, sat 24%) from the family being
     retired. Pointed at the greyed muted surface, and the dead variable
     dropped so the real value is not hidden behind a token that never existed. */
  background: var(--rp-paper-muted, #f1f0ee);
  position: relative;
  overflow: hidden;
}
/* The class strip: four real cohorts as one solid row at the head of the
   band, edge to edge, no gutters, no captions (Abe 2026-09-10). It is the
   seam between certification and agency training: a hard visual break
   that the content on both sides shares, since the people in the pictures
   are the certified trainers and the agency classes at once. */
.rph-agency {
  padding-top: 0;
}
.rph-agency__strip {
  list-style: none;
  margin: 0 0 88px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.rph-agency__shot {
  margin: 0;
}
.rph-agency__shot img {
  display: block;
  width: 100%;
  height: clamp(180px, 22vw, 320px);
  object-fit: cover;
  object-position: 50% 40%;
}
.rph-agency__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.rph-agency__courselabel {
  display: block;
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-blue);
  margin-bottom: 12px;
}
/* The tracks: four rows, a serif title and one sans line each. */
.rph-agency__ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--rph-ink);
}
.rph-agency__course {
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
}
.rph-agency__coursehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.rph-agency__coursetitle {
  margin: 0;
  font-family: var(--rph-serif);
  /* Client mandate (2026-09-11): the GSA course titles carry weight. */
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rph-ink);
}
.rph-agency__gsamark {
  flex: none;
  font-family: var(--rph-cond);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--rph-blue);
  border: 1px solid var(--rph-blue);
  border-radius: 4px;
  padding: 0.25em 0.5em;
}
.rph-agency__coursebody {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--rph-ink2);
  max-width: 56ch;
}
.rph-agency__coursesmore {
  margin: 14px 0 0;
}
.rph-agency__gsakey {
  margin: 14px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--rph-ink3);
}
@media (max-width: 980px) {
  .rph-agency__strip { grid-template-columns: repeat(2, 1fr); margin-bottom: 56px; }
  .rph-agency__shot img { height: clamp(160px, 30vw, 240px); }
  .rph-agency__grid { grid-template-columns: 1fr; gap: 44px; }
}
.rph-agency__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rph-agency__p {
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--rph-ink2);
  margin: 0;
  max-width: 46ch;
}
.rph-agency__formats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rph-agency__chip {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-ink, #1c2733);
  border: 1px solid var(--rph-line2);
  border-radius: 8px;
  padding: 0.5em 0.85em;
}
.rph-agency__reg {
  font-family: var(--rph-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rph-ink3);
}
.rph-agency__proof {
  margin-top: 54px;
  padding-top: 28px;
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
/* type comes from the .rph-meta group in "type atoms" */
.rph-agency__roster-label {
  display: block;
  margin-bottom: 32px;
  /* Overrides its .rph-meta group membership: this line is the seal roster's
     headline, centered over the wall, so it reads at display scale. */
  font-family: var(--rph-serif);
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
  color: var(--rph-ink, #16243a);
}
.rph-logobar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 18px;
}
@media (min-width: 700px) {
  .rph-logobar { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1020px) {
  .rph-logobar { grid-template-columns: repeat(7, 1fr); }
}
.rph-logobar li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.rph-logobar img {
  height: 74px;
  width: auto;
  object-fit: contain;
}
.rph-logobar li span {
  font-family: var(--rph-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rph-ink2);
  line-height: 1.4;
  max-width: 15ch;
}
.rph-logobar-note {
  margin: 32px auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
  color: var(--rph-ink3);
  max-width: 62ch;
}

/* -- Certification (paper, credential cards) ------------------------------- */
.rph-cert {
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
.rph-cert__lede {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px 64px;
  align-items: center;
  margin-bottom: 40px;
}
.rph-cert__p {
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--rph-ink2);
  margin: 0;
  max-width: 58ch;
}
.rph-cert__index {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rph-ink, #10242c);
}
.rph-cert__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 340px) minmax(0, 1fr) 150px;
  gap: 0 40px;
  align-items: start;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
  text-decoration: none;
}
.rph-cert__num {
  font-family: var(--rph-serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--rph-blue);
}
.rph-cert__rowhead {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rph-cert__who {
  margin: 0;
}
/* type comes from the .rph-meta group in "type atoms" */
.rph-cert__format {
  display: block;
  margin-top: 12px;
}
.rph-cert__side {
  justify-self: end;
  align-self: center;
  display: flex;
  align-items: center;
}
.rph-cert__side .rp-mark {
  opacity: 0.95;
}
.rph-cert__go {
  color: var(--rph-ink3, #586069);
  transition: color 0.18s ease, transform 0.18s ease;
}
.rph-cert__row:hover .rph-cert__go {
  color: var(--rph-blue);
  transform: translateX(4px);
}
.rph-cert__row:hover .rph-cert__name {
  color: var(--rph-blue);
}
@media (max-width: 980px) {
  .rph-cert__lede {
    grid-template-columns: 1fr;
  }
  .rph-cert__row {
    grid-template-columns: 44px 1fr;
    gap: 10px 16px;
  }
  .rph-cert__rowbody {
    grid-column: 2;
  }
  .rph-cert__side {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
}
.rph-cert__ribbon {
  display: block;
  width: min(100%, 234px);
  height: auto;
  margin: 0 0 14px;
}
.rph-cert__badge-note {
  grid-column: 1 / -1;
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink2, #37414b);
  margin: 4px 0 0;
  text-align: center;
}
.rph-cert__name {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.4375rem;
  line-height: 1.25;
  color: var(--rph-ink, #10242c);
  transition: color 0.18s ease;
}
.rph-cert__abbr {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-ink3, #586069);
}
.rph-cert__who {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--rph-ink2);
  margin: 0;
  max-width: 56ch;
}

/* -- Live webinars (homepage index, mirrors the cert index) ---------------- */
.rph-webi {
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
/* Leading the page rather than sitting mid-rhythm: the section rule separates
   it from nothing, and the full 112px of section padding reads as the page
   failing to start. */
.rph-webi--lead {
  border-top: 0;
  padding-top: 44px;
}
/* The schedule heading opens a second movement, under the posters. It needs
   enough room that the carousel's dots and arrows read as the carousel's
   chrome and not the heading's, which is all this buys: at zero they attach
   to the kicker, and past about 40px the section stops feeling continuous. */
.rph-webi__schedhead {
  margin-top: 36px;
}
/* This header's filed slot carries the button to the full catalog, not a chrome
   label, so it has to survive the narrow-viewport rule that hides the slot
   everywhere else. The grid is single column down here, so the button takes its
   own row under the heading rather than squeezing it. */
@media (max-width: 720px) {
  .rph-webi__schedhead .rph-sechead__filed {
    display: block;
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 14px;
  }
}
@media (max-width: 700px) {
  .rph-webi__schedhead {
    margin-top: 28px;
  }
}
.rph-webi__state--ondark {
  color: var(--rph-dfg3, #9fb1cc);
}
.rph-webi__feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 56px;
  align-items: center;
  margin-bottom: 48px;
}
.rph-webi__art {
  display: block;
  line-height: 0;
}
.rph-webi__art img {
  width: 100%;
  height: auto;
  display: block;
}
.rph-webi__featbody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.rph-webi__next {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-blue);
}
.rph-webi__featname {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.22;
  color: var(--rph-ink, #10242c);
  margin: 0;
}
.rph-webi__featcta {
  margin: 6px 0 0;
}
/* The featured session as the Eventbrite creative rebuilt in page markup:
   navy ground, vertical rail label, kicker, serif title, byline, and the
   flat book cover (the only image) carrying its own CSS shadow. */
.rph-webi__card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 300px);
  gap: 0 56px;
  align-items: center;
  background: linear-gradient(115deg, var(--rph-night, #0b1d3a), var(--rph-evening, #0f264c) 78%);
  background-color: var(--rph-night, #0b1d3a);
  padding: 52px 64px 52px 0;
  margin-bottom: 48px;
  overflow: hidden;
}
.rph-webi__cardrail {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 1px solid var(--rph-dline, rgba(143, 167, 205, 0.18));
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rph-dfg3, #9fb1cc);
  opacity: 0.85;
}
.rph-webi__cardbody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.rph-webi__cardmark {
  width: 150px;
  height: auto;
  margin-bottom: 10px;
}
/* The kicker is the creative's second voice, under the wordmark and over the
   title, so it scales with the poster instead of sitting at label size. The
   tracking comes down as the size goes up: 0.16em reads as spacing at 13px
   and as gaps at 22px. */
.rph-webi__cardkick {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-blue-lift, #5b8ae0);
  margin: 0;
}
.rph-webi__cardtick {
  display: block;
  width: 38px;
  height: 4px;
  background: var(--rph-tangelo, #f94d00);
  margin-bottom: 16px;
}
.rph-webi__cardtitle {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  line-height: 1.12;
  color: #fff;
  margin: 0;
  max-width: 18ch;
}
.rph-webi__cardlede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--rph-dfg3, #9fb1cc);
  margin: 0;
  max-width: 46ch;
}
.rph-webi__cardby {
  font-size: 0.9375rem;
  color: var(--rph-dfg2, #e9eaec);
  margin: 0;
}
.rph-webi__cardsep {
  color: var(--rph-dline, rgba(143, 167, 205, 0.4));
  margin: 0 6px;
}
.rph-webi__cardby .rph-webi__cardmeta {
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
}
.rph-webi__card .rph-webi__featcta {
  margin-top: 8px;
}
.rph-webi__cardcover {
  justify-self: end;
  line-height: 0;
}
.rph-webi__cardcover img {
  width: 100%;
  max-width: 300px;
  height: auto;
  transform: rotate(2.5deg);
  box-shadow:
    0 1px 2px rgba(4, 12, 26, 0.5),
    0 12px 28px -8px rgba(4, 12, 26, 0.55),
    0 32px 64px -16px rgba(4, 12, 26, 0.6);
}
.rph-webi__state--ondark {
  color: var(--rph-dfg3, #9fb1cc);
}
.rph-webi__index {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rph-ink, #10242c);
}
.rph-webi__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 0 40px;
  align-items: center;
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
  text-decoration: none;
}
.rph-webi__leaf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.rph-webi__month {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-blue);
}
.rph-webi__day {
  font-family: var(--rph-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--rph-ink, #10242c);
}
.rph-webi__rowbody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rph-webi__name {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.4375rem;
  line-height: 1.25;
  color: var(--rph-ink, #10242c);
  transition: color 0.18s ease;
}
.rph-webi__meta {
  font-size: 0.9375rem;
  color: var(--rph-ink2, #3d4852);
}
.rph-webi__side {
  justify-self: end;
  white-space: nowrap;
}
.rph-webi__cta {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rph-blue);
  transition: transform 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rph-webi__state {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rph-ink3, #586069);
}
.rph-webi__row:hover .rph-webi__name {
  color: var(--rph-blue);
}
.rph-webi__row:hover .rph-webi__cta {
  transform: translateX(4px);
}
@media (max-width: 980px) {
    .rph-webi__feature {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rph-webi__card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 28px;
  }
  .rph-webi__cardrail {
    display: none;
  }
  .rph-webi__cardcover {
    justify-self: start;
  }
  .rph-webi__cardcover img {
    max-width: 220px;
  }
  .rph-webi__row {
    grid-template-columns: 56px 1fr;
    gap: 8px 16px;
  }
  .rph-webi__side {
    grid-column: 2;
    justify-self: start;
  }
}

/* -- Newsletter signup (deep-blue capture) --------------------------------- */
.rph-nsignup {
  background: var(--rph-deep, #1c3664);
  color: #fff;
  padding-block: 88px;
}
.rph-nsignup__grid {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 48px;
  align-items: center;
}
.rph-nsignup__kicker {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #f7b79c;
}
.rph-nsignup__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
  color: #fff;
  max-width: 520px;
}
.rph-nsignup__lede {
  font-family: var(--rph-sans);
  font-size: 0.96875rem;
  line-height: 1.6;
  color: #c6d2e6;
  margin: 16px 0 0;
  max-width: 460px;
}
.rph-nsignup__form {
  background: var(--rph-surface, #fff);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 26px 56px -28px rgba(11, 29, 58, 0.5);
}
.rph-nsignup__label {
  display: block;
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rph-ink2);
}
.rph-nsignup__input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.95rem;
  color: var(--rph-ink);
  background: var(--rph-surface2, #fafaf9);
  border: 1px solid var(--rph-line2, #d6d6d4);
  border-radius: 8px;
  padding: 0.7rem 0.75rem;
  margin: 8px 0 12px;
}
.rph-nsignup__input:focus {
  outline: none;
  border-color: var(--rph-blue);
  box-shadow: 0 0 0 3px rgba(47, 98, 196, 0.15);
}
.rph-nsignup__reassure {
  font-family: var(--rph-sans);
  font-size: 0.78rem;
  color: var(--rph-ink3);
  margin: 12px 0 0;
}

/* -- Homepage testimonials (featured quote + 3-up) ------------------------- */
.rph-testi__hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 44px;
}
.rph-testi__featured {
  border-left: 3px solid var(--rph-tangelo);
  padding-left: 28px;
  max-width: 60ch;
}
.rph-testi__portrait {
  margin: 0;
  justify-self: center;
}
.rph-testi__portrait img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
}
.rph-testi__portrait-cap {
  display: block;
  margin-top: 14px;
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  color: var(--rph-ink2, #37414b);
  text-align: center;
}
.rph-testi__outcome {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-tangelo700, #c04000);
}
.rph-testi__quote {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--rph-ink);
  margin: 14px 0 0;
}
.rph-testi__featured .rph-testi__quote {
  font-size: 1.75rem;
}
/* type comes from the .rph-meta group in "type atoms" */
.rph-testi__cite {
  margin: 14px 0 0;
  display: block;
}
.rph-testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.rph-testi__card {
  border-top: 2px solid var(--rph-line, #e4e4e2);
  padding-top: 22px;
}
.rph-testi__card .rph-testi__quote {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--rph-ink2);
}

/* -- Responsive collapses -------------------------------------------------- */
@media (max-width: 980px) {
  .rph-xhero__grid,
  .rph-method__grid,
  .rph-cert__grid,
  .rph-nsignup__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .rph-xhero__grid {
    grid-template-areas:
      "lead"
      "book";
  }
  .rph-xhero__bookimg {
    width: min(240px, 70vw);
  }
  .rph-agency__grid {
    grid-template-columns: 1fr;
  }
  .rph-logobar {
    grid-template-columns: repeat(3, 1fr);
  }
  .rph-cardgrid,
  .rph-testi__grid {
    grid-template-columns: 1fr 1fr;
  }
  .rph-cardgrid--34 > .rph-scard,
  .rph-cardgrid--34 > .rph-scard:nth-child(n + 4) {
    grid-column: auto;
  }
  .rph-cardgrid--34 > .rph-scard:last-child {
    grid-column: 1 / -1;
  }
  .rph-testi__hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .rph-pband__people {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .rph-cardgrid,
  .rph-testi__grid,
  .rph-cert__cards,
  .rph-pband__people {
    grid-template-columns: 1fr;
  }
  .rph-xhero__stats {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ===========================================================================
   Homepage media — bundled RP photography + DC video loops (hero backdrop,
   method frame, CTA close). Videos sit far back and quiet under scrims.
   ======================================================================== */
.rph-xhero { position: relative; }
.rph-xhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}
.rph-xhero__glow { z-index: 1; }
.rph-xhero .rph-wrap { position: relative; z-index: 2; }

.rph-method__fig { position: relative; }
.rph-method__video,
.rph-method__fig > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.rph-method__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 38, 76, 0.1) 0%, rgba(15, 38, 76, 0.3) 55%, rgba(15, 38, 76, 0.86) 100%);
}
.rph-method__cap,
.rph-method__fig > figcaption { z-index: 2; }

.rph-cta__panel { position: relative; overflow: hidden; }
.rph-cta__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
  z-index: 0;
  pointer-events: none;
}
.rph-cta__glow-a,
.rph-cta__glow-b { z-index: 1; }
.rph-cta__grid { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .rph-xhero__video,
  .rph-method__video,
  .rph-method__fig > img,
  .rph-cta__video { display: none; }
}

/* ===========================================================================
   Newsroom / blog archive cards (home.html query loop, scope .rph-news)
   Contained cards: full-bleed banner on top (no crop, no radius), post meta
   in a padded body. Equal-height across a row so the grid reads as one system.
   ======================================================================== */
.rph-news .rph-news-grid.wp-block-post-template {
  gap: 2rem 1.75rem;
}
.rph-news .rph-news-card {
  background: var(--card, #ffffff);
  border: 1px solid var(--border, #e4e4e2);
  overflow: hidden;            /* clip the banner to the card edges */
  height: 100%;               /* fill the grid cell → equal-height cards */
}
/* Banner: show the featured image in full, flush to the card's top edge. */
.rph-news .rph-news-card .wp-block-post-featured-image {
  margin: 0;
  line-height: 0;             /* kill descender gap under the <img> */
}
.rph-news .rph-news-card .wp-block-post-featured-image a,
.rph-news .rph-news-card .wp-block-post-featured-image img,
.rph-news .rph-news-card .rph-thumb-fallback {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
}
/* Body: the contained meta column. flex:1 pushes the date to a stable baseline
   and lets the card stretch cleanly to the row height. */
.rph-news .rph-news-card__body {
  flex: 1 1 auto;
  padding: 1.15rem 1.35rem 1.4rem;
}

/* Pagination — bordered mono page chips, navy current, tangelo hover. */
.rph-news-pagination {
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rph-news-pagination .wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rph-news-pagination .page-numbers,
.rph-news-pagination .wp-block-query-pagination-previous,
.rph-news-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  border: 1px solid var(--border, #e4e4e2);
  font-family: var(--rph-mono, var(--font-mono), ui-monospace, monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--foreground, #16243a);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rph-news-pagination .wp-block-query-pagination-previous,
.rph-news-pagination .wp-block-query-pagination-next {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}
.rph-news-pagination .page-numbers.current {
  background: var(--rph-deep, #1c3664);
  border-color: var(--rph-deep, #1c3664);
  color: #ffffff;
}
.rph-news-pagination a.page-numbers:hover,
.rph-news-pagination a.wp-block-query-pagination-previous:hover,
.rph-news-pagination a.wp-block-query-pagination-next:hover {
  border-color: var(--rph-tangelo, #f94d00);
  color: var(--rph-tangelo, #f94d00);
}
/* The ellipsis between number ranges is not a control — no chrome. */
.rph-news-pagination .page-numbers.dots {
  border: 0;
  min-width: 1rem;
  padding: 0 0.25rem;
  color: var(--muted-foreground, #727a82);
}

/* --- 2026-07-12 KT homepage review: hero flag + note, compact newsletter --- */
.rph-flag {
  display: inline-flex;
  vertical-align: -1px;
  margin-right: 9px;
  width: 20px;
  height: 13px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(11, 29, 58, 0.12);
  overflow: hidden;
}
.rph-flag svg { display: block; }
.rph-xhero__note {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--rph-ink2);
  max-width: 52ch;
  margin: 18px 0 0;
}
.rph-nsignup--compact { padding-block: 56px; }
.rph-nsignup--compact .rph-nsignup__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.rph-nsignup__logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 0 18px;
}

/* --- The start section (00a) — every service starts with a consultation.
   The two rate tiers as ledger rows beside the 8th-edition cover portraits,
   set as a staggered mosaic (the middle column drops, echoing the cover).
   Directly under the hero since 2026-09-09 (KT), on the light gray the
   hero's gradient lands on, with no rule between: the hero's foot and this
   section's head are one continuous surface, and the navy method band
   below is the first change of register. The section's own top padding is zero for that reason; the
   hero carries the gap. */
.rph-start {
  background: var(--rph-bg, #f1f4f5);
  padding-block: 0 72px;
  overflow: hidden;
}
/* Under the split-screen hero (figStyle=anatomy) there is no gradient to
   carry the gap: the hero ends on a hard edge with zero bottom padding, so
   the section brings its own head room. */
.rph-rhero--anatomy + .rph-start {
  padding-top: 72px;
}
@media (max-width: 980px) {
  .rph-rhero--anatomy + .rph-start { padding-top: 56px; }
}
.rph-start__cols {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.rph-start__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.rph-start__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--rph-ink);
}
/* KT's three qualifying questions: serif, ruled rows, blue check tick.
   Lives in the hero; .rph-start__checks kept as an alias for reuse. */
.rph-start__checks,
.rph-xhero__checks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 56ch;
}
.rph-start__checks li,
.rph-xhero__checks li {
  font-family: var(--rph-serif);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--rph-ink);
  padding: 10px 0 10px 28px;
  position: relative;
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
.rph-start__checks li:first-child,
.rph-xhero__checks li:first-child {
  border-top: 0;
  padding-top: 0;
}
.rph-start__checks li:first-child::before,
.rph-xhero__checks li:first-child::before {
  top: 2px;
}
.rph-start__checks li::before,
.rph-xhero__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  background-color: var(--rph-blue, #2f62c4);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M2.5 8.5l3.5 3.5 7.5-8"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M2.5 8.5l3.5 3.5 7.5-8"/></svg>') center / contain no-repeat;
}
.rph-start__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--rph-ink2);
  max-width: 56ch;
  margin: 18px 0 36px;
}
.rph-start__tier {
  border-top: 2px solid var(--rph-line, #e4e4e2);
  padding: 20px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
}
.rph-start__tier-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.rph-start__tier-title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--rph-ink);
}
.rph-start__tier-sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--rph-ink3);
  margin: 0;
}
.rph-start__tier-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.rph-start__tier-num {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--rph-ink);
}
.rph-start__tier-unit {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rph-ink3);
}
.rph-start__card-link {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--rph-blue, #2f62c4);
  text-decoration: none;
  margin-top: 4px;
}
.rph-start__card-link:hover { text-decoration: underline; }
.rph-start__note {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink2);
  border-top: 2px solid var(--rph-line, #e4e4e2);
  padding-top: 16px;
  margin: 0;
}
.rph-start__ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}
.rph-start__mosaic {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rph-start__mosaic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.rph-start__mosaic-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(11, 29, 58, 0.14),
    0 12px 24px -12px rgba(11, 29, 58, 0.3);
}
.rph-start__mosaic-cap {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  color: var(--rph-ink2);
  margin-top: 20px;
  text-align: center;
}
@media (max-width: 980px) {
  .rph-start__cols {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .rph-start__mosaic { order: -1; }
}
@media (max-width: 720px) {
  .rph-start__tier {
    flex-direction: column;
    gap: 10px;
  }
  .rph-start__tier-price {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .rph-start__mosaic-grid { gap: 10px; }
}

.rph-bookband {
  position: relative;
  z-index: 3;
  background: var(--rph-surface2, #fafaf9);
  border-bottom: 1px solid var(--rph-line, #e4e4e2);
  padding-block: 64px 72px;
}
.rph-bookband__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 36px;
  margin-top: 48px;
}
.rph-bookband__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}
.rph-bookband__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 5px 5px 2px;
  box-shadow:
    0 1px 2px rgba(11, 29, 58, 0.16),
    0 10px 20px -8px rgba(11, 29, 58, 0.28),
    0 24px 40px -18px rgba(11, 29, 58, 0.3);
  transition: transform 0.2s ease;
}
.rph-bookband__item:hover img { transform: translateY(-4px); }
.rph-bookband__item span {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rph-ink2);
  line-height: 1.4;
}
.rph-bookband__item:hover span { color: var(--rph-ink); }
@media (prefers-reduced-motion: reduce) {
  .rph-bookband__item img { transition: none; }
}
.rph-bookband__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 62ch;
}
.rph-bookband__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  justify-content: space-between;
}
.rph-bookband__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--rph-ink);
}
.rph-bookband__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--rph-ink2);
  max-width: 52ch;
  margin: 0;
}
.rph-bookband__meta {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink2);
}
.rph-bookband__ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
}
@media (max-width: 720px) {
  /* Shelf scrolls sideways on small screens instead of wrapping raggedly. */
  .rph-bookband__row {
    display: flex;
    overflow-x: auto;
    gap: 24px;
    margin-top: 36px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .rph-bookband__item { flex: 0 0 118px; }
  .rph-bookband__ctas { margin-top: 32px; }
}
.rph-xhero__cta-alt {
  font-family: var(--rph-sans);
  font-size: 0.82rem;
  color: var(--rph-ink3);
}
.rph-xhero__cta-alt a {
  color: var(--rph-blue, #2f62c4);
  font-weight: 600;
  text-decoration: none;
}
.rph-xhero__cta-alt a:hover { text-decoration: underline; }

/* The named titles as physical covers — About founder section (navy ground). */
.rph-bookrow {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
}
.rph-bookrow__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 92px;
  text-decoration: none;
}
.rph-bookrow__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease;
}
.rph-bookrow__item:hover img { transform: translateY(-3px); }
.rph-bookrow__item span {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.4;
}
.rph-bookrow__item:hover span { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .rph-bookrow__item img { transition: none; }
}

/* Credential badge beside the CFJST card. */
.rph-cert__badge {
  margin: 0;
  align-self: center;
  justify-self: center;
  text-align: center;
  padding: 8px 6px;
}
.rph-cert__badge img {
  width: 224px;
  height: auto;
  background: #fff;
  border: 1px solid var(--rph-line, #e4e4e2);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--rp-sh-sm);
}
.rph-cert__badge figcaption {
  margin-top: 12px;
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink2, #37414b);
  max-width: 26ch;
  margin-inline: auto;
}

/* ===========================================================================
   Press line — the compact cross-surface strip for velocity/press-list
   variant "strip". Surfaces the newest press mentions on the newsroom and
   other pages, routing to the full press room. Hairline-framed ledger row.
   ======================================================================== */
.rph-pressline {
  border-block: 1px solid var(--rph-line, #e4e4e2);
  padding-block: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}
.rph-pressline__label {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rph-tangelo, #f94d00);
  white-space: nowrap;
}
.rph-pressline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.rph-pressline__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rph-pressline__item + .rph-pressline__item {
  border-left: 1px solid var(--rph-line, #e4e4e2);
  padding-left: 24px;
}
.rph-pressline__outlet {
  font-family: var(--rph-cond);
  font-weight: 600;
  font-size: 0.71875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-ink3, #727a82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rph-pressline__title {
  font-family: var(--rph-serif);
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--rph-ink, #16243a);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.rph-pressline__title:hover {
  color: var(--rph-blue, #2f62c4);
}
.rph-pressline__all {
  white-space: nowrap;
}
@media (max-width: 980px) {
  .rph-pressline {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rph-pressline__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rph-pressline__item + .rph-pressline__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rph-line, #e4e4e2);
    padding-top: 14px;
  }
}

/* ------------------------------------------------------------------
   Interview preparation band — one photo, act column, two-up specifics.
   Sits after the dark rewrite band; light ground.
   ------------------------------------------------------------------ */
.rph-interview {
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
.rph-interview__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}
.rph-interview__fig {
  margin: 0;
  position: relative;
  min-width: 0;
  min-height: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 64px -34px rgba(11, 29, 58, 0.45);
  align-self: stretch;
}
.rph-interview__fig img {
  position: absolute;
  inset: 0;
}
.rph-interview__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.rph-interview__figcap {
  position: absolute;
  left: 16px;
  bottom: 13px;
  right: 16px;
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  color: #fff;
  text-shadow: 0 1px 10px rgba(11, 29, 58, 0.7);
}
/* The band's header lives in a half-width column: no filed label,
   slightly smaller title. */
.rph-interview .rph-sechead__filed {
  display: none;
}
.rph-interview .rph-sechead__title {
  font-size: 30px;
}
.rph-interview__lede {
  max-width: 52ch;
}
.rph-interview__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--rph-line, #e4e4e2);
}
.rph-interview__tag {
  display: block;
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 10px;
}
.rph-interview__rowtitle {
  font-family: var(--rph-serif);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--rph-ink, #1c2733);
  margin: 0 0 8px;
}
.rph-interview__rowp {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rph-ink2);
  margin: 0;
}
/* Client notes 23535/23536: each prep offer carries its price, serif like the
   rate card, so the number reads as a fact rather than fine print. */
.rph-interview__price {
  display: block;
  margin-top: 12px;
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--rph-ink);
}
.rph-interview__col .rph-scard__more {
  margin-top: 10px;
  display: inline-block;
}
.rph-interview__cta {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* type comes from the .rph-meta group in "type atoms" */
.rph-interview__cta-meta {
  margin: 0;
}
@media (max-width: 980px) {
  .rph-interview__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .rph-interview__fig {
    min-height: 0;
    aspect-ratio: 16 / 9;
    align-self: auto;
  }
  .rph-interview__fig img {
    position: static;
  }
}
@media (max-width: 560px) {
  .rph-interview__cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ===========================================================================
   THE TYPE RULING, THE GLOBAL CHROME                             2026-08-19
   ===========================================================================
   096cd3d and c34865d converted the homepage BANDS. They did not reach the
   chrome that wraps every page, which is what "throughout the website" in
   Kathryn's note actually points at: the utility bar, the nav dropdown column
   headings, and the footer base line were still condensed caps at .1em to
   .14em, and .rph-fact was still 10px MONO CAPS carrying a price.

   That last one matters most. The spec named the $210 / $260 placements as the
   ones that mattered, and this is a price set in 10px grey spaced-out mono.

   Registers are the same two the rest of the ruling uses. See the block at the
   end of rp-ds.css for the full reasoning. */

.rph-footer__base{
  font-family:var(--rph-sans);font-weight:600;font-size:.8125rem;
  letter-spacing:-.01em;text-transform:none}

/* A price is a fact about the offer, not a data readout. Sans meta register,
   at a size someone can actually read it at. */
.rph-fact{
  font-family:var(--rph-sans);font-weight:400;font-size:.8125rem;line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--rph-ink2)}

/* The step numeral stays mono: "01" is data. */

/* The homepage's own stragglers. 096cd3d and c34865d converted the eyebrow and
   meta families; these nine kept the old treatment because they carry their own
   font declarations. .rph-book__price is the notable one: another price set in
   mono, the exact case the ruling exists to stop. */

.rph-rewrite__stacklabel,
.rph-agency__chip,
.rph-cert__abbr,
.rph-pill{
  font-family:var(--rph-sans);font-weight:600;font-size:.875rem;
  letter-spacing:-.01em;text-transform:none}

.rph-start__tier-unit,
.rph-testi__outcome,
.rph-agency__reg,
.rph-book__price,
.rph-newscard__meta{
  font-family:var(--rph-sans);font-weight:400;font-size:.8125rem;line-height:1.5;
  letter-spacing:0;text-transform:none}
/* Higher specificity than the group above, so it needs restating. */
.rph-newscard .rph-pill{letter-spacing:-.01em}
.rph-trust__sub{
  font-family:var(--rph-sans);font-weight:400;font-size:.8125rem;line-height:1.5;
  letter-spacing:0;text-transform:none}

/* ===========================================================================
   HOMEPAGE PROSE, ONE LADDER                                     2026-08-19
   ===========================================================================
   The homepage set supporting prose at SEVEN different sizes: .9375, .90625,
   .9375, .9, .8, 14px, .96875 and .78rem, all doing the same job. None of them
   was a decision; they were each picked in the section they live in.

   Three registers, and every paragraph lands on one of them:
     prose     1.1875rem / 1.62   the main argument (already .rph-agency__p,
                                  .rph-hero__lede, .rph-media__body)
     prose-sm  1rem      / 1.6    supporting copy inside a card or a row
     caption   .8125rem  / 1.5    genuine captions and legal notes only

   1rem is the FLOOR for anything that is a paragraph. This audience skews
   about 55 and the standing note on the ink tokens is "too light, barely
   readable" (KT 2026-07); 14px body copy is the size version of that. Cards
   may sit a step below the main prose, they may not sit at caption size. */

.rph-services__body,
.rph-method__sbody,
.rph-rewrite__rowbody,
.rph-interview__rowp,
.rph-cert__who,
.rph-newscard__excerpt{
  font-size:1rem;line-height:1.6}

/* A lede, so it sits between the two. */
.rph-nsignup__lede{font-size:1.0625rem;line-height:1.6}

/* Genuine captions: small, but not smaller than the caption register. */
.rph-logobar-note,
.rph-nsignup__reassure{font-size:.8125rem;line-height:1.5}

/* ---- Logo bar: centre the orphan row ------------------------------------ 2026-08-19
   A 7-up grid with 12 seals leaves 5 on the second row, hard against the left
   edge with a two-column hole to the right of it. Grid cannot centre a partial
   final row: the tracks exist whether or not anything sits in them.

   Flex-wrap can, so the column count moves into the flex-basis and the exact
   3 / 5 / 7 rhythm is preserved at the same breakpoints. The basis subtracts
   the gutters it does not get (n-1 gaps of 18px), which is what keeps a full
   row landing on the same widths the grid produced. */
.rph-logobar{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:34px 18px}
.rph-logobar li{flex:0 0 calc((100% - 36px) / 3)}
@media (min-width:700px){
  .rph-logobar li{flex-basis:calc((100% - 72px) / 5)}
}
@media (min-width:1020px){
  .rph-logobar li{flex-basis:calc((100% - 108px) / 7)}
}

/* -- Webinar poster carousel ----------------------------------------------
   The posters are the Eventbrite creative at full size, so they cannot shrink
   to sit side by side and cannot all stack without burying the schedule. One
   at a time, swipeable, with the count made explicit by the dots. The
   viewport does the work in CSS: scroll-snap means the thing swipes on touch
   and scrolls with a trackpad before any script runs, and the script only
   adds arrows, dots and auto-advance. */
.rph-wcar {
  position: relative;
}
.rph-wcar__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.rph-wcar__viewport::-webkit-scrollbar {
  display: none;
}
.rph-wcar__track {
  display: flex;
}
.rph-wcar__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* The card carries its own bottom margin as a standalone block; inside the
     track that margin would show as dead navy under every slide. */
  margin-bottom: 0;
}
.rph-wcar--solo .rph-wcar__viewport {
  overflow: visible;
}
.rph-wcar__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.rph .rph-wcar__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: transparent;
  border: 1px solid var(--rph-line2, #d7d7d3);
  border-radius: 999px;
  color: var(--rph-ink, #10242c);
  cursor: pointer;
  font-size: 1.0625rem;
  line-height: 1;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.rph .rph-wcar__arrow:hover {
  border-color: var(--rph-ink, #10242c);
}
.rph .rph-wcar__arrow:focus-visible {
  outline: 2px solid var(--rph-blue, #2f62c4);
  outline-offset: 2px;
}
/* Opacity-led, no scale jump. */
.rph .rph-wcar__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}
.rph-wcar__dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
/* The pair reads as one control, so they sit together rather than pinned to
   opposite ends of the band. */
.rph-wcar__arrows {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The dots are progress bars: the track is the empty state and the fill runs
   left to right over the dwell, so the bar answers "how long until this
   moves" instead of only "which one am I on". The fill is driven by the
   script off the same clock as the advance, so the two can never drift. */
.rph .rph-wcar__dot {
  position: relative;
  overflow: hidden;
  width: 56px;
  height: 4px;
  padding: 0;
  border: 0;
  background: var(--rph-line2, #d7d7d3);
  cursor: pointer;
}
.rph-wcar__dotfill {
  position: absolute;
  inset: 0;
  background: var(--rph-blue, #2f62c4);
  transform: scaleX(0);
  transform-origin: left center;
}
/* A slide already shown this cycle reads as complete. */
.rph .rph-wcar__dot.is-done .rph-wcar__dotfill {
  transform: scaleX(1);
}
/* The resting state when nothing is animating (autoplay stopped, or reduced
   motion): the current bar is simply full, the way it behaved before. The
   script's animation overrides this while it is running. */
.rph .rph-wcar__dot[aria-selected="true"] .rph-wcar__dotfill {
  transform: scaleX(1);
}
.rph .rph-wcar__dot:focus-visible {
  outline: 2px solid var(--rph-blue, #2f62c4);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .rph-wcar__viewport {
    scroll-behavior: auto;
  }
}
@media (max-width: 700px) {
  .rph-wcar__nav {
    gap: 14px;
  }
  .rph .rph-wcar__dot {
    width: 40px;
  }
}

/* Core blocks wearing the band classes. Patterns print core blocks now, so a
   core image, list, button or paragraph must land on the same rules the hand
   markup did. */
.rph-books__cta .wp-block-button__link { font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 0.86em 1.3em;
  border-radius: 9px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  transition: filter 150ms ease, background 150ms ease; }
.rph-books__cta .wp-block-button__link:hover { filter: brightness(1.06);
  text-decoration: none; }
.rph-books__cta .wp-block-button__link { background: var(--rph-deep);
  color: #fff; }
.rph-scard__tag--tangelo { color: var(--rph-tangelo); }
.rph-scard__tag--blue { color: var(--rph-blue); }
.rph-scard > p, .rph-scard__head > p, .rph-trust__cell > p, .rph-method__step > p, .rp-stat > p, .rp-force > p, .rph-cardgrid p.rph-scard__body { margin: 0; }
.rph-section:not(.rph-method) .rph-method__fig > figcaption { color: var(--rp-ink-2, #444); }
.rph-method__fig { margin: 0; }
.rph-method__grid--tight { margin-top: 8px; }
.rph-method__grid--loose { margin-top: 40px; }
.rph-lede--spaced { margin-top: 32px; }

/* Any rph-btn variant on a core button block. */
.rph .wp-block-button[class*="rph-btn--"] > .wp-block-button__link { font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 0.86em 1.3em;
  border-radius: 9px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  cursor: pointer;
  transition: filter 150ms ease, background 150ms ease; text-decoration: none; }
.rph .wp-block-button[class*="rph-btn--"] > .wp-block-button__link:hover { filter: brightness(1.06);
  text-decoration: none; }
.rph .wp-block-button.rph-btn--primary > .wp-block-button__link { background: var(--rph-tangelo);
  color: #fff;
  box-shadow: 0 1px 2px rgba(192, 64, 0, 0.3); }
.rph .wp-block-button.rph-btn--navy > .wp-block-button__link { background: var(--rph-deep);
  color: #fff; }
.rph .wp-block-button.rph-btn--bright > .wp-block-button__link { background: var(--rph-blue);
  color: #fff; }
.rph .wp-block-button.rph-btn--ondark > .wp-block-button__link { background: rgba(234, 240, 248, 0.08);
  color: #fff;
  border-color: rgba(159, 177, 204, 0.3); }
.rph-testi__card > p { margin: 0; }
.rph-scard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rph-method__cta > p { margin: 0; }
.rp-quote.wp-block-quote { margin-top: 32px; max-width: 62ch; }
.rp-quote.wp-block-quote > p { margin: 0; }

/* Patterns print band children inside core flow groups, and the .rp-ds flow
   reset (rp-ds.css, loaded later) zeroes their margins at equal specificity.
   Re-assert the rhythm one level of specificity up, so a block page and the
   old hand markup space the same. */
.rp-ds.rph :where(.is-layout-flow) > .rph-sechead { margin-bottom: 28px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-lede { margin: 0 0 40px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-lede--spaced { margin-top: 32px; }
.rp-ds.rph :where(.is-layout-flow) > .rp-quote.wp-block-quote { margin-top: 32px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-method__grid--tight { margin-top: 8px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-method__grid--loose { margin-top: 40px; }
.rp-ds.rph :where(.is-layout-flow) > .rp-statrow { margin-top: 8px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-books__cta { margin-top: 44px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-method__cta { margin-block-start: 34px; }
.rp-ds.rph :where(.is-layout-flow) > .rp-ticks.wp-block-list { margin-top: 16px; }
.rp-ds.rph :where(.is-layout-flow) > .rp-cta-row.wp-block-buttons { margin-top: 24px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-method__stitle { margin: 6px 0 0; }
.rp-ds.rph :where(.is-layout-flow) > .rph-method__sbody { margin: 6px 0 0; }
.rp-ds.rph :where(.is-layout-flow) > .rph-news-foot { margin-top: 22px; }
.rp-ds.rph :where(.is-layout-flow) > .rph-lede + .wp-block-list { margin-top: -24px; }
/* ---- the order bar (KT direction 2026-09-08: the consultation order in a
        few places on the homepage). One line, one tangelo button, the price.
        Tangelo stays an accent: the band ground is the paper, the button
        is the only orange. ---------------------------------------------- */
.rph-orderbar {
  padding-block: 40px;
  background: var(--rph-surface2);
  border-block: 1px solid var(--rph-line);
}
.rph-orderbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  flex-wrap: wrap;
}
.rph-orderbar__line {
  margin: 0;
  font-family: var(--rph-serif);
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--rph-ink);
  max-width: 34ch;
}
.rph-orderbar__line strong {
  font-weight: 500;
  color: var(--rph-blue);
}
.rph-orderbar__act {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.rph-orderbar__meta {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink3);
}
@media (max-width: 700px) {
  .rph-orderbar__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The two-page band leading the page (2026-09-08): the figure is a resume
   page, so it keeps its own whites and shows from the top. */
.rph-rewrite__fig--doc img {
  aspect-ratio: 17 / 22;
  object-position: top center;
  filter: none;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 29, 58, 0.3), 0 12px 32px rgba(11, 29, 58, 0.35);
}
@media (max-width: 980px) {
  .rph-rewrite__fig--doc img {
    aspect-ratio: 17 / 14;
  }
}
/* The page-stack row could not wrap, so on a phone it widened the whole band
   past the viewport. It wraps now, and the grid's children never set the
   band's width. */
.rph-rewrite__grid > * {
  min-width: 0;
}
@media (max-width: 560px) {
  .rph-rewrite__pages {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

/* ===========================================================================
   Two-page hero (.rph-rhero): paper ground, the squeeze as the figure.
   A column of page sheets; pages one and two hold in the signal blue, the
   pages after them fade out once on load and stay gone. Under the column the
   rule as data, in mono. One tangelo button; the struck rules on the ghost
   pages are the only other tangelo on the band.
   ======================================================================== */
.rph-rhero {
  /* White at the head, settling into the light gray by the foot, where the
     start section picks the gray up: the two are one surface joined by the
     gradient rather than a rule (Abe 2026-09-09). Gray family only. */
  background: linear-gradient(180deg, var(--rph-surface) 0%, var(--rph-surface) 38%, var(--rph-bg) 100%);
  color: var(--rph-ink);
  padding-block: 88px 72px;
  overflow: hidden;
}
.rph-rhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px 72px;
  align-items: start;
}
.rph-rhero__lead {
  /* One measure for the deck, the body and the italic line, in a fixed
     unit so three type sizes share one right edge (Abe 2026-09-10). */
  --rph-rhero-measure: 30rem;
  padding-bottom: 72px;
}
.rph-rhero__title {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 3.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 8px 0 0;
  max-width: 21ch;
  color: var(--rph-ink);
}
/* a short rule closes the headline; book-cover blue, the signal color */
.rph-rhero__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--rph-blue);
  margin-top: 20px;
}
.rph-rhero__deck {
  font-family: var(--rph-sans);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--rph-ink);
  margin: 20px 0 0;
  max-width: var(--rph-rhero-measure);
  text-wrap: pretty;
}
.rph-rhero__sub {
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 6px 0 0;
  max-width: var(--rph-rhero-measure);
  text-wrap: pretty;
}
.rph-rhero__sub a {
  color: var(--rph-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.rph-rhero__sub a:hover {
  color: var(--rph-blue800);
}
.rph-rhero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
}
/* Both doors on one line. Ordering is the ask; going to read the samples first
   is what most visitors do, and that page carries the same consultation CTA at
   its end, so the second door is part of the funnel rather than a way out of
   it. A text link in the signal blue, because one primary button per view is
   the rule and a bordered ghost next to the tangelo reads as a rival. */
.rph-rhero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.rph-rhero__second {
  font-family: var(--rph-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rph-blue);
  text-decoration: none;
}
.rph-rhero__second:hover { text-decoration: underline; }
.rph-rhero__cta-meta {
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink3);
}
.rph-rhero__fine {
  font-family: var(--rph-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--rph-ink2);
  /* Sits close under the rates line as the last word of the same thought;
     the rule and the double gap read as a separate section (Abe 2026-09-09). */
  margin: 14px 0 0;
  max-width: var(--rph-rhero-measure);
  text-wrap: pretty;
}

/* the figure: five pages become two. The still is the last frame of the
   motion (an SVG the platform builds); view.js lays the Lottie over it once
   loaded. No caption and no labels: the drawing carries it. */
.rph-rhero__fig {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}
.rph-rhero__col {
  position: relative;
  width: 100%;
}
.rph-rhero__still,
.rph-rhero__motion {
  position: absolute;
  inset: 0;
}
.rph-rhero__still svg,
.rph-rhero__motion svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.rph-rhero__motion { display: none; }
.rph-rhero__col.is-motion .rph-rhero__motion { display: block; }
.rph-rhero__col.is-motion .rph-rhero__still { display: none; }
/* the figure fills the column; the timeline's canvas is its aspect */
.rph-rhero__col { aspect-ratio: 500 / 600; }
/* The sample (figStyle=sample): one document. Page one is the object; page
   two sits directly behind it, a few pixels up and right, so the stack reads
   as one two-page resume rather than two sheets (KT 2026-09-09). Same box
   as the motion so the grid does not move when the figure changes. */
/* The label on the specimen. One line, tight to the document: it says what the
   scan is, nothing more. An earlier version carried the whole feature list,
   which is samples-page detail, and stacking it under the taller column left
   the opposite corner of the section empty. */
.rph-rhero__figcap {
  width: 88%;
  margin: 0.75rem 0 0 4%;
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink3);
}

.rph-rhero__pages {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 500 / 600;
}
.rph-rhero__page {
  position: absolute;
  display: block;
  width: 88%;
  height: auto;
  left: 4%;
  bottom: 2%;
  background: #fff;
  border: 1px solid var(--rph-line, #e4e4e2);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(11, 29, 58, 0.08), 0 18px 40px rgba(11, 29, 58, 0.14);
}
.rph-rhero__page--2 { transform: translate(10px, -10px); filter: brightness(0.97); }
.rph-rhero__page--1 { z-index: 1; }
/* Paper under a hand (view.js sets --paper-x / --paper-y in -1..1, eased).
   The stack leans toward the pointer; the back sheet drifts a touch further
   and its shadow deepens as it lifts. Transforms are composed here so the
   rest transform above stays the single source of the stack's shape. */
.rph-rhero__pages.is-paper {
  --paper-x: 0;
  --paper-y: 0;
  /* No preserve-3d: each sheet leans in its own flat context, so the back
     sheet can never cut through the front one. */
  perspective: 1400px;
}
.rph-rhero__pages.is-paper .rph-rhero__page {
  will-change: transform;
  transform-origin: 50% 60%;
}
.rph-rhero__pages.is-paper .rph-rhero__page--1 {
  transform:
    rotateY(calc(var(--paper-x) * 6deg))
    rotateX(calc(var(--paper-y) * -4deg))
    translate(calc(var(--paper-x) * 4px), calc(var(--paper-y) * 3px));
}
.rph-rhero__pages.is-paper .rph-rhero__page--2 {
  transform:
    translate(10px, -10px)
    rotateY(calc(var(--paper-x) * 7deg))
    rotateX(calc(var(--paper-y) * -4.5deg))
    translate(calc(var(--paper-x) * 14px), calc(var(--paper-y) * 10px))
    rotate(calc(var(--paper-x) * 1.2deg));
}

/* The anatomy (figStyle=anatomy): the targeted two-page resume as a plain
   graphic (Abe 2026-09-24: "simple with basic callouts"). Two page shapes
   meet in the middle; each section is one flat block; callouts sit outside,
   page one's on the left and page two's on the right, each joined to its
   block by a leader line that ends in a dot. Page one's blocks are blue, the
   critical information; page two's are gray. Motion is one short reveal:
   the pages fade up, then the callouts draw out in reading order. */
/* Split screen, the consultation hero's layout (Abe 2026-09-24): the copy
   stays on the page grid at the left, and the graphic sits in a full-bleed
   light-gray field that runs from its column to the viewport edge and from
   the header to the start section. The field is a pseudo-element on the real
   grid column, pushed past the wrap and clipped by the section's
   overflow:hidden, as .rph-hero--form does it. */
.rph-rhero--anatomy {
  padding-block: 0;
  background: var(--rph-surface);
}
/* The lead beside the anatomy is three voices, not five (Abe 2026-09-24:
   "still very cluttered"): the headline, one lede, the body in a quieter
   tone. The rule under the headline and the bold deck both go; the lede is
   the deck at reading weight, one step up from the body. */
.rph-rhero--anatomy .rph-rhero__title::after { display: none; }
/* KT 2026-09-25 headline is longer; two lines on a desktop, balanced */
.rph-rhero--anatomy .rph-rhero__title {
  font-size: clamp(2rem, 3vw, 2.75rem);
  max-width: none;
  text-wrap: balance;
}
.rph-rhero--anatomy .rph-rhero__deck {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin-top: 28px;
}
.rph-rhero--anatomy .rph-rhero__sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--rph-ink2);
  margin-top: 16px;
}
.rph-rhero--anatomy .rph-rhero__cta { margin-top: 32px; }
.rph-rhero--anatomy .rph-rhero__fine { margin-top: 24px; font-size: 1.0625rem; }
.rph-rhero__grid--anatomy {
  /* The lead is its 30rem measure plus the gutter; the field takes the rest. */
  grid-template-columns: minmax(0, calc(30rem + clamp(32px, 4vw, 72px))) minmax(0, 1fr);
  column-gap: 0;
  align-items: stretch;
}
.rph-rhero--anatomy .rph-rhero__lead {
  padding-block: 88px 80px;
  padding-right: clamp(32px, 4vw, 72px);
}
.rph-rhero__fig--anatomy {
  position: relative;
  z-index: 0;
  justify-content: center;
  padding-block: 72px;
  /* The field bleeds past the wrap to the viewport, so the figure's own box
     reaches into that bleed too; the graphic then centres in what is seen. */
  --rhero-bleed: max(0px, (100vw - var(--rp-c-wide, 1280px)) / 2);
  margin-right: calc(var(--rhero-bleed) * -1);
  padding-inline: clamp(32px, 4vw, 72px);
}
.rph-rhero__fig--anatomy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -50vw;
  background: var(--rph-band);
  z-index: -1;
}
.rph-rhero__fig--anatomy .rph-anat {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}
/* On the gray field the meta steps up a tier, and the graphic's page one
   blue reads against white sheets as before. */
.rph-rhero__fig--anatomy .rph-anat__folio,
.rph-rhero__fig--anatomy .rph-anat__meta {
  color: var(--rph-ink2);
}
@media (max-width: 980px) {
  .rph-rhero--anatomy .rph-rhero__lead {
    padding-block: 56px 40px;
    padding-right: 0;
  }
  .rph-rhero__fig--anatomy {
    max-width: none;
    margin-right: 0;
    padding: 48px 0 56px;
  }
  .rph-rhero__fig--anatomy::before {
    left: -50vw;
  }
  .rph-rhero__grid--anatomy {
    grid-template-columns: 1fr;
  }
}
.rph-anat {
  --anat-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --anat-lead: 14px;
  /* the block's inset from the sheet edge, and how far a leader reaches in */
  --anat-inset: 16px;
  --anat-reach: 26px;
}
.rph-anat__title {
  font-family: var(--rph-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rph-ink);
  margin: 0;
  text-wrap: balance;
}
/* The head: the figure's name on the left, the samples door on the right,
   on one baseline (Abe 2026-09-24). */
.rph-anat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
/* The minimal button: an outline in ink on the gray field, compact, so it
   reads as a way through rather than a second ask beside the tangelo. */
.rph .rph-anat__btn,
.rph-anat__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--rph-ink) 35%, transparent);
  border-radius: 4px;
  font-family: var(--rph-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rph-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.rph-anat__btn:hover {
  border-color: var(--rph-ink);
  background: color-mix(in srgb, var(--rph-surface) 45%, transparent);
}
.rph-anat__btn .rph-arrow { transition: transform 0.24s ease; }
.rph-anat__btn:hover .rph-arrow { transform: translateX(3px); }
/* The format, under the drawing as texture: one quiet line, the specs as
   short sentences. */
.rph-anat__specs {
  margin: 28px 0 0;
  text-align: center;
  font-family: var(--rph-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rph-ink3);
}
/* The pair: page two behind page one, up and to the right, so it reads as
   one two-page resume (Abe 2026-09-24: "stack the papers more so that the
   graphic is not so wide and we can make it taller"). The overlap buys
   height: each sheet is most of the pair's width, and page two shows a
   strip wide enough for its callouts to land on. The pair box's side
   padding is where the callouts hang, page one's to the left and page
   two's to the right, each list positioned on its own sheet so a callout's
   height is a percentage of the page it names. */
.rph-anat__pair {
  --anat-calls: clamp(96px, 8vw, 128px);
  --anat-sheet: 84%;
  --anat-shift: 5%;
  --anat-calls-l: var(--anat-calls);
  --anat-calls-r: var(--anat-calls);
  position: relative;
  display: grid;
  margin-top: 40px;
  padding-inline: var(--anat-calls-l) var(--anat-calls-r);
}
.rph-anat__page {
  grid-area: 1 / 1;
  position: relative;
  width: var(--anat-sheet);
  aspect-ratio: 8.5 / 11;
  background: var(--rph-surface);
  border-radius: 2px;
}
.rph-anat__page--1 {
  z-index: 1;
  justify-self: start;
  margin-top: var(--anat-shift);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--rph-night) 8%, transparent),
    0 16px 36px color-mix(in srgb, var(--rph-night) 14%, transparent);
}
.rph-anat__page--2 {
  justify-self: end;
  margin-bottom: var(--anat-shift);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--rph-night) 8%, transparent);
}
/* The page names stay in the markup for screen readers; the stack shows
   which page is which on its own. */
.rph-anat__folio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The sheet's writing: the real sample traced into lines (sample-lines.py),
   painted here so the tokens own the colours. Body text is a light ink, the
   bold headings full ink, the keywords the writer marked in the signal
   blue. The lines keep the scan's own coordinates, so a callout at a
   section's height lands on that section. */
.rph-anat__lines,
.rph-anat__scan {
  position: absolute;
  inset: 0;
}
.rph-anat__lines svg,
.rph-anat__scan img {
  display: block;
  width: 100%;
  height: 100%;
}
.rph-anat__lines .ln { fill: color-mix(in srgb, var(--rph-ink) 22%, var(--rph-surface)); }
.rph-anat__lines .ln--b { fill: var(--rph-ink); }
.rph-anat__lines .ln--k { fill: var(--rph-blue); }
.rph-anat__lines .ln--d { fill: var(--rph-ink3); }
/* The scans show as they load (KT 2026-09-25: no line animation). */
.rph-anat__scan {
  border-radius: 2px;
  overflow: hidden;
}
.rph-anat__scan picture { display: contents; }
.rph-anat__scan img { object-fit: cover; }
.rph-anat__calls {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--anat-calls-l) - 8px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* page one's list ends at its left edge; page two's starts at its right */
.rph-anat__page--1 .rph-anat__calls { right: 100%; }
.rph-anat__page--2 .rph-anat__calls { left: 100%; width: calc(var(--anat-calls-r) - 8px); }
.rph-anat__call {
  position: absolute;
  top: var(--y);
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  margin: 0;
}
.rph-anat__page--1 .rph-anat__call { flex-direction: row; text-align: right; }
.rph-anat__page--2 .rph-anat__call { flex-direction: row-reverse; text-align: left; }
.rph-anat__txt {
  flex: 1;
  min-width: 0;
  font-family: var(--rph-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rph-ink);
  text-wrap: balance;
}
.rph-anat__meta {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--rph-ink2);
}
/* The leader: a hairline from the callout to a dot on the block, reaching in
   past the sheet edge by the block's inset. */
.rph-anat__call::after {
  content: "";
  flex: none;
  width: calc(var(--anat-lead) + var(--anat-reach));
  height: 1px;
  margin-inline: 10px calc(var(--anat-reach) * -1);
  background: var(--rph-ink3);
  transform-origin: 100% 50%;
}
.rph-anat__page--2 .rph-anat__call::after {
  margin-inline: calc(var(--anat-reach) * -1) 10px;
  transform-origin: 0 50%;
}
.rph-anat__call::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--rph-ink);
  z-index: 1;
}
.rph-anat__page--1 .rph-anat__call::before {
  right: calc(var(--anat-reach) * -1 - 3.5px);
}
.rph-anat__page--2 .rph-anat__call::before { left: calc(var(--anat-reach) * -1 - 3.5px); }

@media (prefers-reduced-motion: no-preference) {
  /* Page one lands first, page two settles in behind it (KT 2026-09-25),
     then the callouts draw out: page one's in reading order, then page two's. */
  .rph-anat__page {
    animation: rph-anat-settle 0.5s var(--anat-ease) both;
    animation-delay: 0s;
  }
  .rph-anat__page--2 { animation-delay: 0.35s; }
  .rph-anat__call {
    animation: rph-anat-fade 0.5s ease both;
    animation-delay: calc(0.45s + var(--i) * 0.08s);
  }
  .rph-anat__page--2 .rph-anat__call { animation-delay: calc(0.85s + var(--i) * 0.08s); }
  .rph-anat__call::after {
    animation: rph-anat-draw 0.5s var(--anat-ease) both;
    animation-delay: inherit;
  }
}
@keyframes rph-anat-settle {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes rph-anat-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rph-anat-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Narrow field (a phone, or the split screen below 1200px): no room for a
   callout column on both sides of the pair, so the pages cascade: page one
   on the right with its callouts to the left, page two tucked under its
   lower corner on the left with its callouts to the right. Each sheet keeps
   a readable size. */
@media (max-width: 1200px) {
  .rph-anat__pair {
    display: block;
    padding-inline: 0;
  }
  .rph-anat__page {
    width: 64%;
  }
  .rph-anat__page--1 {
    z-index: 1;
    margin: 0 0 0 auto;
  }
  .rph-anat__page--2 {
    margin: -6% auto 0 0;
  }
  .rph-anat__page--1 .rph-anat__calls,
  .rph-anat__page--2 .rph-anat__calls {
    /* the rest of the row, as a share of the sheet's own width */
    width: calc(36 / 64 * 100% - 8px);
  }
  .rph-anat__txt { font-size: 0.8125rem; }
  .rph-anat__meta { font-size: 0.75rem; }
  .rph-anat { --anat-lead: 8px; --anat-inset: 12px; --anat-reach: 20px; }
}
@media (max-width: 980px) {
  .rph-rhero {
    padding-block: 56px 0;
  }
  .rph-rhero__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rph-rhero__lead {
    padding-bottom: 40px;
  }
  .rph-rhero__fig {
    max-width: 560px;
  }
  /* The band's bottom padding is zero so the motion can bleed off the edge;
     the sample pair is a real object and wants the paper under it. */
  .rph-rhero__fig--sample {
    margin-bottom: 48px;
  }
}
@media (max-width: 560px) {
  .rph-rhero__fine {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------------------
   Featured story: the dateline strip above the hero.

   A newspaper puts the one thing it wants read first in a thin band across the
   top, in type. This band does the same. Artwork is allowed three ways and
   carries no words in any of them, because the words are in the markup.

   Contrast, measured against the ground each token actually sits on:
   tangelo #F94D00 on night #0B1D3A is 4.9:1, lifted blue #5B8AE0 is 5.0:1,
   #9FB1CC is 7.7:1. On pale blue the flag steps down to tangelo-700 for 4.6:1.
   --------------------------------------------------------------------------- */
.rph-feat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 26px;
  background: var(--rph-night, #0b1d3a);
  border-bottom: 1px solid rgba(143, 167, 205, 0.22);
}
.rph-feat--paper {
  background: var(--rph-blue50, #eef1f7);
  border-bottom-color: var(--rph-line, #e4e4e2);
}
.rph-feat .rph-feat__bleed,
.rph-feat .rph-feat__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.rph-feat .rph-feat__bleed {
  /* Bounded rather than stretched across the band: the artwork that arrives
     here is usually a 600px-wide export, and a tall band would scale it up
     into mush. It sits at the right, centred, no larger than it was made. */
  /* Right edge lines up with the wrap's, so on a full-bleed band the artwork
     sits on the same gutter as everything else rather than on the viewport. */
  inset: 50% max(1.5rem, calc((100% - var(--rp-c-wide, 1400px)) / 2 + 1.5rem)) auto auto;
  transform: translateY(-50%);
  width: min(46%, 700px);
  height: min(100%, 200px);
  background-repeat: no-repeat;
  background-position: right center;
  /* The whole graphic, at the band's height, sitting to the right of the
     type. Cropping it would hide the part the artwork was made for, and
     blowing it up to cover would put its own lettering under the headline. */
  background-size: contain;
}
.rph-feat .rph-feat__scrim {
  background: linear-gradient(
    90deg,
    var(--rph-night, #0b1d3a) 0%,
    var(--rph-night, #0b1d3a) 44%,
    rgba(11, 29, 58, 0.7) 58%,
    rgba(11, 29, 58, 0) 72%
  );
}
.rph-feat.rph-feat--paper .rph-feat__scrim {
  background: linear-gradient(
    90deg,
    var(--rph-blue50, #eef1f7) 0%,
    var(--rph-blue50, #eef1f7) 44%,
    rgba(238, 241, 247, 0.7) 58%,
    rgba(238, 241, 247, 0) 72%
  );
}
.rph-feat .rph-feat__row {
  display: flex;
  align-items: center;
  gap: 20px 40px;
}
.rph-feat .rph-feat__lead {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 66ch;
}
.rph-feat--fig-bleed .rph-feat__lead {
  max-width: min(56ch, 56%);
}
.rph-feat .rph-feat__flagline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 6px;
}
.rph-feat .rph-feat__flag {
  font-family: var(--rph-cond);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rph-tangelo, #f94d00);
}
.rph-feat.rph-feat--paper .rph-feat__flag {
  color: var(--rph-tangelo700, #c04000);
}
.rph-feat .rph-feat__date {
  /* Sans, not mono: a date in a dateline is meta text, and mono here is
     decoration only (the rule at the top of this sheet). */
  font-family: var(--rph-sans);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--rph-dfg3, #9fb1cc);
}
.rph-feat.rph-feat--paper .rph-feat__date {
  color: var(--rph-ink3, #586069);
}
.rph-feat .rph-feat__title {
  /* A host wrapper (.rp-article h2 and its like) may hang a rule and a top
     padding on any h2 it contains. The band draws its own structure. */
  border: 0;
  padding: 0;
  font-family: var(--rph-serif);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.rph-feat.rph-feat--paper .rph-feat__title {
  color: var(--rph-ink, #16243a);
}
.rph-feat .rph-feat__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.28s ease;
}
.rph-feat .rph-feat__title a:hover {
  background-size: 100% 1px;
}
.rph-feat .rph-feat__deck {
  font-family: var(--rph-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 7px 0 0;
  color: var(--rph-dfg2, #e9eaec);
  max-width: 62ch;
}
.rph-feat.rph-feat--paper .rph-feat__deck {
  color: var(--rph-ink2, #37414b);
}
.rph-feat .rph-feat__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--rph-cond);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rph-blue-lift, #5b8ae0);
}
.rph-feat.rph-feat--paper .rph-feat__cta {
  color: var(--rph-blue, #2f62c4);
}
.rph-feat .rph-feat__cta .rph-arrow {
  transition: transform 0.24s ease;
}
.rph-feat .rph-feat__cta:hover .rph-arrow {
  transform: translateX(4px);
}
/* The picture keeps its own proportions. Height is capped, width follows. */
.rph-feat .rph-feat__fig {
  flex: 0 1 auto;
  margin: 0;
  line-height: 0;
}
.rph-feat .rph-feat__fig img {
  display: block;
  width: auto;
  height: auto;
  max-height: 96px;
  max-width: min(420px, 38vw);
  border-radius: 3px;
}
@media (max-width: 860px) {
  .rph-feat {
    padding-block: 22px;
  }
  .rph-feat .rph-feat__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .rph-feat .rph-feat__fig {
    order: -1;
  }
  .rph-feat .rph-feat__fig img {
    max-width: 100%;
    max-height: 80px;
  }
  /* Behind the type, a wide graphic starves the words on a phone, and there
     is no arrangement of the two that a 600px banner survives. It comes out.
     Nothing is lost: the artwork was never carrying the message. */
  .rph-feat .rph-feat__bleed,
  .rph-feat .rph-feat__scrim {
    display: none;
  }
  .rph-feat--fig-bleed .rph-feat__lead {
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rph-feat .rph-feat__title a,
  .rph-feat .rph-feat__cta .rph-arrow {
    transition: none;
  }
}
/* Phone: the stacked pages sit apart so page two's first callout clears
   page one, and the lede steps down to stay a lede, not a wall. */
@media (max-width: 600px) {
  .rph-anat__page--2 { margin-top: 6%; }
  .rph-rhero--anatomy .rph-rhero__deck { font-size: 1.125rem; }
}