/* ==========================================================================
   The Resilient Athlete
   Standalone stylesheet. Printed by prosport_ra_styles() in functions.php,
   only on resilient-athlete/tpl-*.php.
   Everything is scoped under .resilient-athlete so it cannot leak into the main site.

   To remove the Resilient Athlete section: delete this directory, the templates in this directory, the
   prosport_ra_styles() call in header.php, and the Resilient Athlete block in functions.php.
   ========================================================================== */

.resilient-athlete {
  /* Brand tokens mirror the ACF options the main site uses, with fallbacks. */
  --ra-blue:         var(--primary-btn-background-colour, #0C71C3);
  --ra-blue-hover:   var(--primary-btn-background-colour-hover, #0E60A2);
  --ra-orange:       var(--secondary-btn-background-colour, #FF801F);
  --ra-orange-hover: var(--secondary-btn-background-colour-hover, #E37019);

  --ra-navy:      #0A2033;
  --ra-navy-deep: #061520;
  --ra-ink:       #101C26;
  --ra-body:      #4E5E6B;
  --ra-muted:     #82909D;
  --ra-line:      #E4EBF2;
  --ra-soft:      #F6F9FC;
  --ra-gold:      #E0A32E;

  /* One face across the page. Kept as a token so headings can still be
     tuned independently of body copy. */
  --ra-display: 'Poppins', sans-serif;
  --ra-radius:    16px;
  --ra-radius-lg: 24px;

  /* Layered shadows read as depth rather than a single grey blur. */
  --ra-sh-sm:   0 1px 2px rgba(16, 28, 38, .04), 0 4px 12px rgba(16, 28, 38, .05);
  --ra-sh-md:   0 2px 4px rgba(16, 28, 38, .04), 0 12px 28px rgba(16, 28, 38, .08);
  --ra-sh-lift: 0 4px 8px rgba(16, 28, 38, .05), 0 24px 52px rgba(16, 28, 38, .14);

  --ra-wrap: 1180px;
  --ra-navh: 112px;   /* the fixed navbar, same height at every width */
  --ra-video: 760px;  /* player column, and anything sitting under it */

  color: var(--ra-body);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-wrap { max-width: var(--ra-wrap); margin: 0 auto; padding: 0 28px; }
/* Four-across rows need more room than the reading-width sections. */
.resilient-athlete .ra-wrap.is-wide { max-width: 1340px; }

.resilient-athlete h1, .resilient-athlete h2, .resilient-athlete h3, .resilient-athlete h4 {
  color: var(--ra-ink);
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
}
.resilient-athlete p { margin: 0; }

/* Eyebrow with a short rule: small signal of craft, repeated everywhere. */
.resilient-athlete .ra-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ra-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ra-orange);
  margin-bottom: 18px;
}
.resilient-athlete .ra-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; opacity: .55; flex: none;
}
.resilient-athlete .ra-head .ra-eyebrow::after {
  content: ""; width: 26px; height: 2px; background: currentColor; opacity: .55; flex: none;
}

.resilient-athlete .ra-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ra-orange); color: #fff;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 14px 26px;
  border: 2px solid var(--ra-orange); border-radius: 6px;
  text-decoration: none; cursor: pointer;
  transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-btn:hover {
  background: var(--ra-orange-hover); border-color: var(--ra-orange-hover); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 128, 31, .30);
}
.resilient-athlete .ra-btn .bi { font-size: 15px; transition: transform .22s ease; }
.resilient-athlete .ra-btn:hover .bi { transform: translateX(4px); }

.resilient-athlete .ra-btn.is-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.resilient-athlete .ra-btn.is-ghost:hover {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .8); box-shadow: none;
}
/* Light background counterpart to .is-ghost. The ghost button is white text
   on a translucent white border, which is correct on the hero and invisible
   anywhere else. Use this on white and soft sections. */
.resilient-athlete .ra-btn.is-outline {
  background: #fff; color: var(--ra-ink); border-color: var(--ra-line);
  box-shadow: none;
}
.resilient-athlete .ra-btn.is-outline:hover {
  background: #fff; color: var(--ra-orange); border-color: var(--ra-orange);
  box-shadow: var(--ra-sh-sm);
}

.resilient-athlete .ra-section { padding: 86px 0; position: relative; }
/* The whole page clips the arcs' horizontal overhang, not each section, so the
   arcs can still bleed into their neighbours vertically. */
.resilient-athlete { overflow-x: clip; }
/* Full-bleed backgrounds. The page gets its rhythm from alternating light,
   tinted and dark sections rather than from dividers or boxed-in panels. */
.resilient-athlete .ra-section.is-soft { background: var(--ra-soft); }

/* Dark anchor section. Breaks up the run of light sections mid-page and makes
   the white cards inside it read as the focus. */

.resilient-athlete .ra-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.resilient-athlete .ra-head h2,
.resilient-athlete .ra-head .ra-head-line {
  font-family: var(--ra-display);
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
  margin-bottom: 14px;
  /* The heading colour comes from the h1-h4 reset, which a paragraph does not
     match — so a heading turned into one has to be given it here. */
  color: var(--ra-ink);
  text-wrap: balance;
}
/* The question under the section's own heading. An h3, so the outline says what
   the page already showed: it sits beneath the h2 rather than beside it. Sized
   between the heading and the body — two headings at identical size read as one
   broken sentence. */
.resilient-athlete .ra-head h3.ra-head-sub {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--ra-body);
  margin-top: -4px;
  margin-bottom: 14px;
}

.resilient-athlete .ra-head p:not(.ra-eyebrow):not(.ra-head-line) {
  font-size: 16px; color: var(--ra-body);
}

/* --------------------------------------------------------------------------
   Hero
   Uses <section>, not <header>: the theme has header h1 / header p !important
   rules that would otherwise override this page.
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-hero { position: relative; overflow: hidden; background: var(--ra-navy); }
.resilient-athlete .ra-hero-bg {
  position: absolute; inset: 0;
  background: no-repeat center / cover;
  opacity: .26; filter: saturate(.8);
}
.resilient-athlete .ra-hero-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(1250px 660px at 84% -14%, rgba(255, 128, 31, .32), transparent 62%),
    radial-gradient(900px 520px at 6% 108%, rgba(12, 113, 195, .34), transparent 66%),
    linear-gradient(158deg, #12456F 0%, var(--ra-navy) 54%, var(--ra-navy-deep) 100%);
  opacity: .94;
}
/* Fine grid texture: reads as considered rather than a flat gradient. */
.resilient-athlete .ra-hero-grid-tex {
  position: absolute; inset: 0; opacity: .30; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 76%);
}
/* Direct child only: the trust bar nests inside the hero and has its own .ra-wrap. */
.resilient-athlete .ra-hero > .ra-wrap { position: relative; z-index: 2; padding-top: 178px; padding-bottom: 52px; }
.resilient-athlete .ra-hero-layout {
  display: grid; grid-template-columns: 1.18fr .82fr; gap: 60px; align-items: center;
}
.resilient-athlete .ra-hero h1,
.resilient-athlete .ra-hero .ra-hero-title {
  color: #fff;
  font-family: var(--ra-display);
  font-size: clamp(34px, 4.9vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 12ch;
  margin-bottom: 18px;
}
/* Resilient Athlete homepage hero only. Sized to hold "The Resilient Athlete"
   on one line, down to the 900px point where the layout goes single column. */
.resilient-athlete .ra-hero.is-home h1,
.resilient-athlete .ra-hero.is-home .ra-hero-title {
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1.06;
  max-width: none;
  margin-bottom: 10px;
  text-transform: none;
}
/* Title and tagline read as written, not shouted. Homepage only. */
.resilient-athlete .ra-hero.is-home .ra-tagline { text-transform: none; }
.resilient-athlete .ra-hero .ra-tagline {
  display: inline-block;
  font-family: var(--ra-display);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 23px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ra-orange);
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 2px solid rgba(255, 128, 31, .32);
}
/* These ch caps, not the column, were what squeezed the copy. Widened to sit
   inside the column rather than well short of it. */
.resilient-athlete .ra-hero .ra-subh {
  color: #fff; font-weight: 600;
  font-size: clamp(17px, 1.65vw, 20px); line-height: 1.42;
  max-width: 52ch; margin-bottom: 20px;
}
.resilient-athlete .ra-hero .ra-lede {
  color: #BFD2E1; font-size: 16px; max-width: 66ch; margin-bottom: 34px;
}
.resilient-athlete .ra-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.resilient-athlete .ra-mnd {
  display: flex; align-items: center; gap: 10px;
  color: #93AEC3; font-size: 14px; margin-top: 24px;
}
.resilient-athlete .ra-mnd .bi { color: var(--ra-orange); font-size: 15px; flex: none; }

/* --------------------------------------------------------------------------
   Book mockup — cover, spine shade, page block, floor shadow
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-book-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 0 50px;
  perspective: 1800px;
}
.resilient-athlete .ra-book-stage::before {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 80%; height: 74%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 128, 31, .42), transparent 68%);
  filter: blur(54px); pointer-events: none;
}
.resilient-athlete .ra-book-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 16px;
  width: 66%; height: 26px; transform: translateX(-46%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(13px); pointer-events: none;
}

.resilient-athlete .ra-book3d {
  position: relative; margin: 0;
  width: 100%; max-width: 322px;
  transform-style: preserve-3d;
  transform: rotateY(-15deg) rotateX(2deg);
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}
.resilient-athlete .ra-book3d:hover { transform: rotateY(-7deg) rotateX(0deg) translateY(-8px); }

.resilient-athlete .ra-book3d .ra-book-cover {
  display: block; width: 100%; height: auto; position: relative; z-index: 2;
  border-radius: 3px 6px 6px 3px;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, .28),
    0 14px 28px rgba(0, 0, 0, .34),
    0 34px 62px rgba(0, 0, 0, .42);
}
/* Spine shading down the binding edge */
.resilient-athlete .ra-book3d::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26px;
  border-radius: 3px 0 0 3px; z-index: 3; pointer-events: none;
  background: linear-gradient(to right,
    rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .16) 38%,
    rgba(255, 255, 255, .14) 74%, rgba(255, 255, 255, 0) 100%);
}
/* Sheen across the cover */
.resilient-athlete .ra-book3d::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: 3px 6px 6px 3px;
  background: linear-gradient(104deg,
    rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, .07) 100%);
}
/* Page block on the outer edge */
.resilient-athlete .ra-book3d .ra-book-pages {
  position: absolute; top: 5px; bottom: 5px; right: -11px; width: 13px; z-index: 1;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(to right,
    #F4F1EA 0px, #F4F1EA 1px, #D9D3C6 1px, #D9D3C6 2px);
  box-shadow: inset -3px 0 6px rgba(0, 0, 0, .22);
  transform: rotateY(28deg); transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
/* Lives inside the hero, so it sits on the hero's own gradient with only a
   hairline separating it rather than reading as a second dark block. */
.resilient-athlete .ra-trust {
  position: relative; z-index: 2;
  background: transparent;
  padding: 20px 0 26px;
}
.resilient-athlete .ra-trust::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--ra-wrap), calc(100% - 56px));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}
/* Four even columns with hairline dividers, so the checks never wrap raggedly. */
.resilient-athlete .ra-trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
/* Stacked and centred: the four labels differ in length, so a centred block
   stays balanced whether a label runs to one line or two. */
.resilient-athlete .ra-trust li {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 11px; padding: 2px 24px;
  color: #C2D3E0; font-size: 14.5px; font-weight: 500; line-height: 1.4;
  text-align: center;
}
.resilient-athlete .ra-trust li + li::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: rgba(255, 255, 255, .10);
}
.resilient-athlete .ra-trust li .bi {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(255, 128, 31, .20), rgba(255, 128, 31, .07));
  border: 1px solid rgba(255, 128, 31, .26);
  color: var(--ra-orange); font-size: 16px;
}
.resilient-athlete .ra-trust li span { max-width: 20ch; }

/* --------------------------------------------------------------------------
   Prose, pull quote, value pills
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-prose {
  max-width: 700px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; gap: 16px; font-size: 16px;
}

.resilient-athlete .ra-pullquote {
  position: relative;
  max-width: 860px; margin: 0 auto;
  padding: 28px 34px 28px 40px;
  background: linear-gradient(120deg, #fff, var(--ra-soft));
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-sh-sm);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600; color: var(--ra-ink); line-height: 1.5;
}
.resilient-athlete .ra-pullquote::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--ra-orange), var(--ra-blue));
}

.resilient-athlete .ra-pills { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }
.resilient-athlete .ra-pill {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--ra-line); border-radius: 999px;
  padding: 11px 22px; font-weight: 600; font-size: 14px; color: var(--ra-ink);
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-pill .bi { color: var(--ra-orange); font-size: 16px; }

/* --------------------------------------------------------------------------
   The failed loop — four cards that read as a cycle you cannot escape
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-loop {
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: 38px; row-gap: 18px;
  margin: 44px auto 48px;
}
.resilient-athlete .ra-loop-item {
  /* No overflow:hidden here — it would clip the connector arrow, which is
     positioned outside the card in the grid gap. */
  position: relative;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 24px 22px 22px;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-loop-item:hover { transform: translateY(-3px); box-shadow: var(--ra-sh-md); }

/* Oversized ghost numeral anchors each step */
.resilient-athlete .ra-loop-item .ra-loop-n {
  position: absolute; top: 6px; right: 14px;
  font-family: var(--ra-display); font-weight: 700; font-size: 40px; line-height: 1;
  color: var(--ra-ink); opacity: .07; pointer-events: none;
}
.resilient-athlete .ra-loop-item .ra-loop-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  color: var(--ra-muted); font-size: 17px;
  margin-bottom: 14px;
}
.resilient-athlete .ra-loop-item p {
  font-size: 15px; font-weight: 600; color: var(--ra-ink); line-height: 1.45;
}

/* Arrows are pseudo-elements so they can never wrap away from their card. */
.resilient-athlete .ra-loop-item:not(:last-child)::after {
  content: "\F138"; /* bootstrap-icons arrow-right */
  font-family: "bootstrap-icons"; font-size: 17px; line-height: 1;
  color: #BFCDDA;
  position: absolute; right: -27px; top: 50%; transform: translateY(-50%);
}

/* The fourth card closes the loop */
.resilient-athlete .ra-loop-item.is-end {
  background: linear-gradient(150deg, #fff, rgba(255, 128, 31, .07));
  border-color: rgba(255, 128, 31, .40);
}
.resilient-athlete .ra-loop-item.is-end .ra-loop-n { color: var(--ra-orange); opacity: .16; }
.resilient-athlete .ra-loop-item.is-end .ra-loop-icon {
  background: rgba(255, 128, 31, .12);
  border-color: rgba(255, 128, 31, .30);
  color: var(--ra-orange);
}

/* --------------------------------------------------------------------------
   Four entry cards
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.resilient-athlete .ra-card {
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 32px 28px 30px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  box-shadow: var(--ra-sh-sm);
  transition: transform .26s cubic-bezier(.2, .7, .3, 1), box-shadow .26s ease, border-color .26s ease;
}
.resilient-athlete .ra-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ra-sh-lift);
  border-color: rgba(12, 113, 195, .22);
  color: inherit;
}
/* Accent rail that fills on hover */
.resilient-athlete .ra-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ra-orange), var(--ra-blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.resilient-athlete .ra-card:hover::before { transform: scaleX(1); }
/* Soft wash that warms the card on hover */
.resilient-athlete .ra-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 88% -8%, rgba(12, 113, 195, .07), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.resilient-athlete .ra-card:hover::after { opacity: 1; }
.resilient-athlete .ra-card > * { position: relative; z-index: 1; }

.resilient-athlete .ra-card .ra-card-icon {
  width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  color: #fff; font-size: 23px;
  margin-bottom: 20px;
  box-shadow: 0 8px 18px rgba(12, 113, 195, .30);
  transition: background .26s ease, box-shadow .26s ease, transform .26s ease;
}
.resilient-athlete .ra-card:hover .ra-card-icon {
  background: linear-gradient(150deg, #FF9440, var(--ra-orange));
  box-shadow: 0 10px 22px rgba(255, 128, 31, .38);
  transform: translateY(-3px);
}
.resilient-athlete .ra-card .ra-kicker {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--ra-display); font-weight: 500;
  color: var(--ra-orange); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: 8px;
}
.resilient-athlete .ra-card .ra-kicker em {
  font-style: normal; font-weight: 600;
  color: var(--ra-blue); letter-spacing: .08em;
}
/* Divider dot between the step number and the label. */
.resilient-athlete .ra-card .ra-kicker em::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ra-line); margin-left: 9px;
}
.resilient-athlete .ra-card h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px;
}
.resilient-athlete .ra-card p { font-size: 14.5px; line-height: 1.6; color: var(--ra-body); margin-bottom: 24px; }
/* Shared with .ra-path below: outlined, so these navigational actions do not
   compete with the page's solid orange primary CTAs. */
.resilient-athlete .ra-card .ra-go,
.resilient-athlete .ra-path .ra-go {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid rgba(12, 113, 195, .34);
  border-radius: 6px;
  color: var(--ra-blue); font-weight: 600; font-size: 14px;
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-card .ra-go .bi,
.resilient-athlete .ra-path .ra-go .bi { font-size: 13px; transition: transform .22s ease; }
.resilient-athlete .ra-card:hover .ra-go,
.resilient-athlete .ra-path:hover .ra-go {
  background: var(--ra-blue); border-color: var(--ra-blue); color: #fff;
  box-shadow: 0 10px 22px rgba(12, 113, 195, .26);
}
.resilient-athlete .ra-card:hover .ra-go .bi,
.resilient-athlete .ra-path:hover .ra-go .bi { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Two-column split with media
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
/* z-index:0 makes this its own stacking context, so the accent frame below
   is reliably painted under the image instead of escaping upwards. */
.resilient-athlete .ra-split-media { position: relative; z-index: 0; }
.resilient-athlete .ra-split-media img {
  position: relative; z-index: 2;
  width: 100%; height: auto; aspect-ratio: 4 / 3.3; object-fit: cover;
  border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-sh-md);
  display: block;
}
.resilient-athlete .ra-split-media::after {
  content: ""; position: absolute; z-index: 1;
  inset: auto -26px -26px auto;
  width: 172px; height: 172px; border-radius: var(--ra-radius-lg);
  border: 3px solid var(--ra-orange); opacity: .38;
}
.resilient-athlete .ra-split-body h2 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: clamp(23px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
  margin-bottom: 18px;
}
.resilient-athlete .ra-split-body p { font-size: 15.5px; margin-bottom: 16px; }
.resilient-athlete .ra-split-body .ra-lede-line {
  font-size: clamp(16.5px, 1.6vw, 19px); font-weight: 600;
  color: var(--ra-ink); line-height: 1.5; margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Book section
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-book { display: grid; grid-template-columns: .82fr 1.18fr; gap: 72px; align-items: center; }
.resilient-athlete .ra-book .ra-book-stage::before {
  background: radial-gradient(circle, rgba(12, 113, 195, .28), transparent 68%);
}
.resilient-athlete .ra-book .ra-book-stage::after {
  background: radial-gradient(ellipse at center, rgba(16, 28, 38, .32), transparent 70%);
}
.resilient-athlete .ra-book .ra-book3d { max-width: 296px; }
.resilient-athlete .ra-book .ra-book3d .ra-book-cover {
  box-shadow:
    0 2px 3px rgba(16, 28, 38, .14),
    0 14px 26px rgba(16, 28, 38, .16),
    0 32px 56px rgba(16, 28, 38, .20);
}
.resilient-athlete .ra-book h2 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: clamp(23px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
}
.resilient-athlete .ra-book .ra-book-sub { font-size: 17px; font-weight: 600; color: var(--ra-ink); margin: 14px 0 12px; }
.resilient-athlete .ra-book .ra-book-intro { font-size: 15.5px; }
.resilient-athlete .ra-booklist {
  list-style: none; margin: 30px 0 34px; padding: 0;
  display: flex; flex-direction: column; gap: 15px;
}
.resilient-athlete .ra-booklist li { position: relative; padding-left: 34px; font-size: 15px; color: var(--ra-body); }
.resilient-athlete .ra-booklist li .bi { position: absolute; left: 0; top: 3px; color: var(--ra-orange); font-size: 18px; }
.resilient-athlete .ra-book .ra-mnd { color: var(--ra-muted); margin-top: 20px; }

/* --------------------------------------------------------------------------
   Course band
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-course {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #12456F, var(--ra-navy) 60%, var(--ra-navy-deep));
  border-radius: var(--ra-radius-lg);
  padding: 54px 52px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center;
  box-shadow: 0 30px 70px rgba(10, 32, 51, .26);
}
.resilient-athlete .ra-course::before {
  content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 20% 30%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 20% 30%, #000, transparent 74%);
}
.resilient-athlete .ra-course::after {
  content: ""; position: absolute; right: -150px; top: -150px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 128, 31, .24), transparent 68%);
}
.resilient-athlete .ra-course > * { position: relative; z-index: 1; }
.resilient-athlete .ra-course .ra-eyebrow { color: #FFB878; }
.resilient-athlete .ra-course h2 {
  color: #fff; font-family: var(--ra-display); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
}
.resilient-athlete .ra-course .ra-course-sub { color: #fff; font-weight: 600; font-size: 16.5px; margin: 14px 0; }
.resilient-athlete .ra-course .ra-course-body { color: #BFD2E1; font-size: 15.5px; }
.resilient-athlete .ra-course ul {
  list-style: none; margin: 0 0 34px; padding: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.resilient-athlete .ra-course li {
  position: relative; padding-left: 34px; color: #D4E2EE; font-size: 15px;
}
.resilient-athlete .ra-course li .bi {
  position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 128, 31, .16); color: var(--ra-orange); font-size: 11px;
}
.resilient-athlete .ra-course .ra-selfpaced { color: #93AEC3; font-size: 14px; margin-top: 18px; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-quote-featured {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #12456F, var(--ra-navy) 60%, var(--ra-navy-deep));
  border-radius: var(--ra-radius-lg);
  padding: 46px 50px;
  display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center;
  margin-bottom: 26px;
  box-shadow: 0 30px 70px rgba(10, 32, 51, .26);
}
.resilient-athlete .ra-quote-featured::after {
  content: "\201C"; position: absolute; right: 40px; top: -18px;
  font-family: Georgia, serif; font-size: 210px; line-height: 1;
  color: rgba(255, 255, 255, .06);
}
.resilient-athlete .ra-quote-featured > * { position: relative; z-index: 1; }
.resilient-athlete .ra-quote-featured img {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .36);
  display: block;
}
.resilient-athlete .ra-quote-featured .ra-stars { color: var(--ra-gold); font-size: 15px; letter-spacing: 3px; margin-bottom: 18px; }
.resilient-athlete .ra-quote-featured blockquote {
  margin: 0 0 22px; padding: 0;
  font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; color: #fff; line-height: 1.55;
}
.resilient-athlete .ra-quote-featured .ra-who { font-weight: 700; color: #fff; font-size: 17px; }
.resilient-athlete .ra-quote-featured .ra-role { color: #93AEC3; font-size: 14.5px; }

.resilient-athlete .ra-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.resilient-athlete .ra-quote {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius); padding: 28px 26px;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-quote:hover { transform: translateY(-4px); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-quote .ra-stars { color: var(--ra-gold); font-size: 14px; letter-spacing: 3px; margin-bottom: 16px; }
.resilient-athlete .ra-quote blockquote { margin: 0 0 18px; padding: 0; font-size: 15px; color: var(--ra-ink); line-height: 1.6; }
/* Pushed to the bottom so the three names line up despite different quote lengths. */
.resilient-athlete .ra-quote .ra-who {
  margin-top: auto; padding-top: 4px;
  font-weight: 700; color: var(--ra-blue); font-size: 15.5px;
}
.resilient-athlete .ra-quote .ra-role { color: var(--ra-muted); font-size: 14px; }

/* --------------------------------------------------------------------------
   Paths
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.resilient-athlete .ra-path {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--ra-line); border-radius: var(--ra-radius);
  padding: 32px 28px 30px; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  box-shadow: var(--ra-sh-sm);
  transition: transform .26s cubic-bezier(.2, .7, .3, 1), box-shadow .26s ease, border-color .26s ease;
}
.resilient-athlete .ra-path:hover {
  transform: translateY(-6px); box-shadow: var(--ra-sh-lift);
  border-color: rgba(12, 113, 195, .22); color: inherit;
}
.resilient-athlete .ra-path::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ra-orange), var(--ra-blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.resilient-athlete .ra-path:hover::before { transform: scaleX(1); }
.resilient-athlete .ra-path .ra-path-num {
  font-family: var(--ra-display); font-weight: 500;
  color: var(--ra-orange); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px;
}
.resilient-athlete .ra-path h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 9px;
}
.resilient-athlete .ra-path p { font-size: 14.5px; line-height: 1.55; margin-bottom: 24px; }

/* A full sentence, not a heading, so it stays at body weight and size. */
.resilient-athlete .ra-closeline {
  text-align: center; max-width: 680px; margin: 48px auto 0;
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 20px); color: var(--ra-ink); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Practitioner band
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-physio {
  position: relative; overflow: hidden;
  /* Flatter and darker than the dark anchor section, so it reads as a quieter
     closing band for practitioners rather than another offer. */
  background: linear-gradient(150deg, #0B2438, var(--ra-navy-deep));
  padding: 70px 0;
}
.resilient-athlete .ra-physio::before {
  content: ""; position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 24% 40%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 24% 40%, #000, transparent 76%);
}
.resilient-athlete .ra-physio > * { position: relative; z-index: 1; }
.resilient-athlete .ra-physio .ra-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap;
}
.resilient-athlete .ra-physio .ra-eyebrow { color: #6FB3E8; }
.resilient-athlete .ra-physio h2 {
  color: #fff; font-family: var(--ra-display); font-weight: 600;
  font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.015em; margin-bottom: 12px;
}
.resilient-athlete .ra-physio p { color: #A6BED2; max-width: 60ch; font-size: 15.5px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .resilient-athlete .ra-cards { grid-template-columns: repeat(2, 1fr); }
  .resilient-athlete .ra-loop { grid-template-columns: repeat(2, 1fr); column-gap: 38px; }
  .resilient-athlete .ra-loop-item:nth-child(2n)::after { display: none; }
  .resilient-athlete .ra-quotes { grid-template-columns: 1fr 1fr; }
  .resilient-athlete .ra-paths { grid-template-columns: 1fr; }
  .resilient-athlete .ra-trust ul { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .resilient-athlete .ra-trust li:nth-child(odd)::before { display: none; }
}

@media (max-width: 900px) {
  .resilient-athlete .ra-section { padding: 74px 0; }
  .resilient-athlete .ra-hero > .ra-wrap { padding-top: 150px; padding-bottom: 56px; }
  .resilient-athlete .ra-hero-layout { grid-template-columns: 1fr; gap: 46px; }
  .resilient-athlete .ra-hero h1,
  .resilient-athlete .ra-hero .ra-hero-title { max-width: none; }
  .resilient-athlete .ra-hero .ra-subh, .resilient-athlete .ra-hero .ra-lede { max-width: none; }
  .resilient-athlete .ra-book3d { max-width: 236px; transform: rotateY(-11deg); }
  .resilient-athlete .ra-book .ra-book3d { max-width: 236px; }
  .resilient-athlete .ra-split { grid-template-columns: 1fr; gap: 44px; }
  .resilient-athlete .ra-split-media::after { display: none; }
  .resilient-athlete .ra-book { grid-template-columns: 1fr; gap: 46px; }
  .resilient-athlete .ra-course { grid-template-columns: 1fr; gap: 36px; padding: 46px 34px; }
  .resilient-athlete .ra-quotes { grid-template-columns: 1fr; }
  .resilient-athlete .ra-quote-featured {
    grid-template-columns: 1fr; gap: 28px; padding: 40px 32px; text-align: center;
  }
  .resilient-athlete .ra-quote-featured img { margin: 0 auto; width: 128px; height: 128px; }
}

@media (max-width: 620px) {
  .resilient-athlete .ra-wrap { padding: 0 20px; }
  .resilient-athlete .ra-section { padding: 58px 0; }
  .resilient-athlete .ra-cards { grid-template-columns: 1fr; }
  .resilient-athlete .ra-loop { grid-template-columns: 1fr; column-gap: 0; row-gap: 14px; }
  .resilient-athlete .ra-loop-item::after { display: none !important; }
  .resilient-athlete .ra-pullquote { padding: 26px 24px 26px 30px; }
  .resilient-athlete .ra-course { padding: 36px 24px; }
  .resilient-athlete .ra-quote { padding: 28px 24px; }
  .resilient-athlete .ra-quote-featured { padding: 32px 24px; }
  .resilient-athlete .ra-physio .ra-inner { flex-direction: column; align-items: flex-start; }
  /* One per row on phones: back to icon-beside-label so it stays compact. */
  .resilient-athlete .ra-trust ul { grid-template-columns: 1fr; row-gap: 16px; }
  .resilient-athlete .ra-trust li {
    flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 14px; padding: 0; text-align: left;
  }
  .resilient-athlete .ra-trust li::before { display: none !important; }
  .resilient-athlete .ra-trust li span { max-width: none; }
  .resilient-athlete .ra-trust li .bi { width: 38px; height: 38px; font-size: 16px; }
}

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


/* ==========================================================================
   Hero book: floating endorsement and proof chip
   Only in the hero — the book section further down keeps a plain mockup.
   ========================================================================== */
.resilient-athlete .ra-hero .ra-book-stage { padding: 34px 0 100px; }

.resilient-athlete .ra-book-endorse {
  position: absolute; z-index: 5;
  left: -14px; bottom: 6px;
  width: 250px; margin: 0;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: rgba(8, 26, 41, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .42);
}
.resilient-athlete .ra-book-endorse img {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .22);
}
.resilient-athlete .ra-book-endorse blockquote {
  margin: 0 0 6px; padding: 0;
  color: #E8F1F8; font-size: 12.5px; line-height: 1.45; font-weight: 500;
}
.resilient-athlete .ra-book-endorse figcaption {
  color: var(--ra-orange); font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em;
}

.resilient-athlete .ra-hero .ra-book3d { z-index: 2; }

@media (max-width: 900px) {
  /* Centred with auto margins, NOT translateX. The hero reveal animation below
     sets its own transform on this card and finishes on `transform: none`,
     which wiped a centring translate and left the card hanging off the right
     edge of the screen. Insets plus auto margins cannot be clobbered that way. */
  .resilient-athlete .ra-book-endorse {
    left: 0; right: 0; bottom: 4px;
    width: auto; max-width: 320px;
    margin-inline: auto;
  }
  .resilient-athlete .ra-hero .ra-book-stage { padding: 34px 0 84px; }
}

/* ==========================================================================
   Motion
   Nothing here hides content on its own — every rule is behind .is-animated,
   which parts/motion.php only adds when JS runs and reduced motion is off.
   ========================================================================== */
.resilient-athlete.is-animated [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .75s cubic-bezier(.2, .7, .3, 1),
    transform .75s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.resilient-athlete.is-animated [data-reveal].is-in { opacity: 1; transform: none; }

/* Media rises with a touch of scale so images feel like they settle. */
.resilient-athlete.is-animated .ra-split-media[data-reveal] { transform: translateY(26px) scale(.985); }
.resilient-athlete.is-animated .ra-split-media[data-reveal].is-in { transform: none; }

/* --- Hero entrance ------------------------------------------------------- */
.ra-hero.is-animated h1,
.ra-hero.is-animated .ra-hero-title,
.ra-hero.is-animated .ra-tagline,
.ra-hero.is-animated .ra-subh,
.ra-hero.is-animated .ra-lede,
.ra-hero.is-animated .ra-hero-cta,
.ra-hero.is-animated .ra-mnd,
.ra-hero.is-animated .ra-trust,
.ra-hero.is-animated .ra-book-stage {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .8s cubic-bezier(.2, .7, .3, 1),
    transform .8s cubic-bezier(.2, .7, .3, 1);
}
.ra-hero.is-animated h1,
.ra-hero.is-animated .ra-hero-title { transition-delay: 60ms; }
.ra-hero.is-animated .ra-tagline   { transition-delay: 140ms; }
.ra-hero.is-animated .ra-subh      { transition-delay: 210ms; }
.ra-hero.is-animated .ra-lede      { transition-delay: 275ms; }
.ra-hero.is-animated .ra-hero-cta  { transition-delay: 340ms; }
.ra-hero.is-animated .ra-mnd       { transition-delay: 400ms; }
.ra-hero.is-animated .ra-trust     { transition-delay: 520ms; }
/* The book comes from the right and slightly deeper, so it reads as an object. */
.ra-hero.is-animated .ra-book-stage {
  transform: translateY(26px) translateX(26px) scale(.96);
  transition-delay: 200ms;
  transition-duration: 1s;
}
.ra-hero.is-animated.is-in h1,
.ra-hero.is-animated.is-in .ra-hero-title,
.ra-hero.is-animated.is-in .ra-tagline,
.ra-hero.is-animated.is-in .ra-subh,
.ra-hero.is-animated.is-in .ra-lede,
.ra-hero.is-animated.is-in .ra-hero-cta,
.ra-hero.is-animated.is-in .ra-mnd,
.ra-hero.is-animated.is-in .ra-trust,
.ra-hero.is-animated.is-in .ra-book-stage { opacity: 1; transform: none; }

/* The endorsement card lands last, once the book has settled. */
.ra-hero.is-animated .ra-book-endorse {
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: opacity .6s ease 1s, transform .6s cubic-bezier(.2, .7, .3, 1) 1s;
}
.ra-hero.is-animated.is-in .ra-book-endorse { opacity: 1; transform: none; }

/* --- Continuous book float ---------------------------------------------- */
@keyframes raBookFloat {
  0%, 100% { transform: rotateY(-15deg) rotateX(2deg) translateY(0); }
  50%      { transform: rotateY(-15deg) rotateX(2deg) translateY(-11px); }
}
.ra-hero.is-animated.is-in .ra-book3d {
  animation: raBookFloat 6.5s ease-in-out infinite;
  animation-delay: 1.2s;
}
/* Hover takes over from the float. */
.ra-hero.is-animated.is-in .ra-book3d:hover {
  animation: none;
  transform: rotateY(-7deg) rotateX(0deg) translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .resilient-athlete.is-animated [data-reveal],
  .ra-hero.is-animated * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ==========================================================================
   Nav sizing
   Nothing to override any more. Resilient Athlete pages render the site header exactly as
   every other page does, so sizing these links differently would make the
   same nav jump between sections.
   ========================================================================== */

/* ==========================================================================
   Method page components
   Same tokens, radii, shadows and type scale as the homepage, so the two
   pages read as one system.
   ========================================================================== */

/* --- Compact hero: no book column, long sentence-case headline ----------- */
.resilient-athlete .ra-hero.is-compact > .ra-wrap { padding-top: 172px; padding-bottom: 92px; }
.resilient-athlete .ra-hero.is-compact h1,
.resilient-athlete .ra-hero.is-compact .ra-hero-title {
  text-transform: none;
  font-size: clamp(25px, 3.3vw, 41px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.018em;
  /* Absolute width: this headline is ~100 characters, and a narrow measure
     broke it into too many short lines. */
  max-width: 900px;
  margin-bottom: 26px;
}
.resilient-athlete .ra-hero.is-compact .ra-subh { max-width: 56ch; margin-bottom: 16px; }
.resilient-athlete .ra-hero.is-compact .ra-lede { max-width: 62ch; margin-bottom: 34px; }

/* --- Long-form prose sits left at a reading width ------------------------ */
.resilient-athlete .ra-prose.is-left { text-align: left; max-width: 68ch; margin: 0 auto; }

/* --- Callout note -------------------------------------------------------- */
/* Aside callout. Sits under a grid, so it is sized to the component column
   rather than the reading column and is fully rounded, not a half-box. */
.resilient-athlete .ra-note {
  max-width: 940px; margin: 36px auto 0;
  display: flex; align-items: flex-start; gap: 20px;
  background: linear-gradient(140deg, rgba(255, 128, 31, .09), rgba(255, 128, 31, .03));
  border: 1px solid rgba(255, 128, 31, .30);
  border-radius: var(--ra-radius);
  padding: 24px 28px;
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-note p {
  font-size: 15.5px; line-height: 1.65; color: var(--ra-body);
}
.resilient-athlete .ra-note strong { color: var(--ra-ink); font-weight: 600; }
.resilient-athlete .ra-note-ico {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(255, 128, 31, .28);
  box-shadow: 0 4px 12px rgba(255, 128, 31, .14);
  font-size: 21px; line-height: 1;
}

/* --- Animal kingdom ------------------------------------------------------ */
.resilient-athlete .ra-kingdom {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

.resilient-athlete .ra-animal {
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 26px 24px;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-animal:hover { transform: translateY(-4px); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-animal-ico {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  font-size: 22px; line-height: 1;
  margin-bottom: 16px;
}
.resilient-athlete .ra-animal h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 16px; font-weight: 700; letter-spacing: -.008em; margin-bottom: 8px;
}
.resilient-athlete .ra-animal p { font-size: 14.5px; line-height: 1.6; color: var(--ra-body); }

/* Eighth block: spans two columns to complete the third row, and carries
   roughly twice the copy of an animal card so it needs the extra width. */
.resilient-athlete .ra-animal.is-catch {
  grid-column: span 2;
  background: linear-gradient(150deg, rgba(255, 128, 31, .10), rgba(255, 128, 31, .03));
  border-color: rgba(255, 128, 31, .32);
}
.resilient-athlete .ra-animal.is-catch .ra-animal-ico {
  background: #fff;
  border-color: rgba(255, 128, 31, .30);
  box-shadow: 0 4px 12px rgba(255, 128, 31, .14);
}
.resilient-athlete .ra-animal.is-catch h3 { color: var(--ra-orange); }

.resilient-athlete .ra-mlist {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.resilient-athlete .ra-mlist li {
  position: relative; padding-left: 18px;
  font-size: 14px; line-height: 1.55; color: var(--ra-body);
}
.resilient-athlete .ra-mlist li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ra-orange);
}
.resilient-athlete .ra-mlist li strong { color: var(--ra-ink); font-weight: 600; }

/* --- Three step flow ----------------------------------------------------- */
/* A timeline, not three equal cards. The middle step carries three times the
   copy of the first, so equal-height columns left the short ones half empty. */
.resilient-athlete .ra-flow {
  display: flex; flex-direction: column;
  max-width: 860px; margin: 0 auto;
}
.resilient-athlete .ra-fstep {
  position: relative;
  display: flex; align-items: flex-start; gap: 24px;
  padding: 0 0 30px 0;
}
.resilient-athlete .ra-fstep:last-child { padding-bottom: 0; }
/* Spine connecting one step to the next. */
.resilient-athlete .ra-fstep:not(:last-child)::after {
  content: "";
  position: absolute; left: 19px; top: 52px; bottom: 10px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(12, 113, 195, .34), rgba(12, 113, 195, .08));
}
.resilient-athlete .ra-fstep-n {
  flex: none; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  color: #fff; font-weight: 700; font-size: 17px;
  box-shadow: 0 8px 18px rgba(12, 113, 195, .28);
}
.resilient-athlete .ra-fstep h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 17px; font-weight: 700; letter-spacing: -.008em; margin-bottom: 8px;
}
.resilient-athlete .ra-fstep p { font-size: 15px; line-height: 1.65; color: var(--ra-body); }

/* --- Traditional vs Resilient Athlete ------------------------------------ */
.resilient-athlete .ra-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 920px; margin: 40px auto 0;
}
/* The old column is deliberately recessed, the new one elevated, so the
   contrast is carried by the design and not just the tick and cross. */
.resilient-athlete .ra-col { border-radius: var(--ra-radius); padding: 0; overflow: hidden; }

.resilient-athlete .ra-col header {
  display: flex; align-items: center; gap: 13px;
  padding: 22px 28px;
}
.resilient-athlete .ra-col-ico {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  font-size: 16px;
}
.resilient-athlete .ra-col h4 {
  font-weight: 700; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  margin: 0;
}
.resilient-athlete .ra-col ul { list-style: none; margin: 0; padding: 6px 28px 26px; }
.resilient-athlete .ra-col li {
  position: relative;
  padding: 14px 0 14px 32px;
  font-size: 15px; line-height: 1.55;
}
.resilient-athlete .ra-col li + li { border-top: 1px solid; }
.resilient-athlete .ra-col li::before {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: "bootstrap-icons"; font-size: 10px;
}

/* White, not tinted: this sits inside a tinted section, so a grey card had
   no definition. The dashed border still marks it as the recessed option. */
.resilient-athlete .ra-col.is-old {
  background: #fff;
  border: 1px dashed #C6D4E1;
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-col.is-old header { border-bottom: 1px dashed #CBD8E4; }
.resilient-athlete .ra-col.is-old .ra-col-ico { background: #fff; border: 1px solid var(--ra-line); color: var(--ra-muted); }
.resilient-athlete .ra-col.is-old h4 { color: var(--ra-muted); }
.resilient-athlete .ra-col.is-old li { color: var(--ra-muted); }
.resilient-athlete .ra-col.is-old li + li { border-color: rgba(0, 0, 0, .06); }
.resilient-athlete .ra-col.is-old li::before {
  content: "\F62A"; background: rgba(0, 0, 0, .05); color: #A4B2BF;
}

.resilient-athlete .ra-col.is-new {
  background: linear-gradient(150deg, #12456F, var(--ra-navy) 62%, var(--ra-navy-deep));
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 24px 52px rgba(10, 32, 51, .26);
}
.resilient-athlete .ra-col.is-new header { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.resilient-athlete .ra-col.is-new .ra-col-ico {
  background: rgba(255, 128, 31, .18);
  border: 1px solid rgba(255, 128, 31, .34);
  color: var(--ra-orange);
}
.resilient-athlete .ra-col.is-new h4 { color: #FFB878; }
.resilient-athlete .ra-col.is-new li { color: #E1ECF5; }
.resilient-athlete .ra-col.is-new li + li { border-color: rgba(255, 255, 255, .10); }
.resilient-athlete .ra-col.is-new li::before {
  content: "\F26E"; background: rgba(111, 217, 164, .16); color: #7FE3AE;
}

/* --- Numbered rows: principles and phases -------------------------------- */
.resilient-athlete .ra-nlist { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.resilient-athlete .ra-nrow {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius); padding: 26px 28px 26px 26px;
  display: grid; grid-template-columns: 56px 1fr; gap: 4px 22px; align-items: start;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.resilient-athlete .ra-nrow:hover {
  transform: translateY(-3px); box-shadow: var(--ra-sh-lift);
  border-color: rgba(12, 113, 195, .20);
}
/* Accent rail that fills on hover, matching the homepage cards. */
.resilient-athlete .ra-nrow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--ra-orange), #FF9440);
  transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.resilient-athlete .ra-nrow:hover::before { transform: scaleY(1); }
.resilient-athlete .ra-nrow.is-phase::before { background: linear-gradient(180deg, var(--ra-blue), #1C8AE0); }

/* A block, not a small circle: gives the ordered list real structure. */
.resilient-athlete .ra-num {
  grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(150deg, #FF9440, var(--ra-orange));
  color: #fff; font-weight: 700; font-size: 22px; letter-spacing: -.02em;
  box-shadow: 0 10px 22px rgba(255, 128, 31, .30);
}
/* Phases run blue, so the two ordered lists are not confused for each other. */
.resilient-athlete .ra-nrow.is-phase .ra-num {
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  box-shadow: 0 10px 22px rgba(12, 113, 195, .28);
}
.resilient-athlete .ra-nrow h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 17.5px; font-weight: 700; letter-spacing: -.008em; margin-bottom: 7px;
}
.resilient-athlete .ra-nrow p { font-size: 15px; line-height: 1.65; color: var(--ra-body); }

/* --- Dark statement panel ------------------------------------------------ */
.resilient-athlete .ra-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #12456F, var(--ra-navy) 60%, var(--ra-navy-deep));
  border-radius: var(--ra-radius-lg);
  padding: 62px 58px;
  box-shadow: 0 30px 70px rgba(10, 32, 51, .26);
}
.resilient-athlete .ra-panel::before {
  content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 22% 28%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 22% 28%, #000, transparent 74%);
}
.resilient-athlete .ra-panel::after {
  content: ""; position: absolute; right: -150px; top: -150px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 128, 31, .20), transparent 68%);
  pointer-events: none;
}
.resilient-athlete .ra-panel-inner {
  position: relative; z-index: 1;
  max-width: 68ch; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.resilient-athlete .ra-panel .ra-eyebrow { color: #FFB878; }
.resilient-athlete .ra-panel h2 {
  color: #fff; font-family: var(--ra-display); font-weight: 600;
  font-size: clamp(23px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
  margin-bottom: 4px;
}
.resilient-athlete .ra-panel p { color: #C9DAE8; font-size: 15.5px; line-height: 1.65; }
.resilient-athlete .ra-panel .ra-panel-lede { color: #fff; font-weight: 600; font-size: 17px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .resilient-athlete .ra-kingdom { grid-template-columns: repeat(2, 1fr); }
  /* Still a clean fill at two across: 7 animals + a double-width catch. */
  .resilient-athlete .ra-animal.is-catch { grid-column: span 2; }
}

@media (max-width: 900px) {
  .resilient-athlete .ra-hero.is-compact > .ra-wrap { padding-top: 142px; padding-bottom: 70px; }
  .resilient-athlete .ra-hero.is-compact h1,
  .resilient-athlete .ra-hero.is-compact .ra-hero-title { max-width: none; }
  .resilient-athlete .ra-compare { grid-template-columns: 1fr; }
  .resilient-athlete .ra-panel { padding: 44px 32px; }
}

@media (max-width: 620px) {
  .resilient-athlete .ra-kingdom { grid-template-columns: 1fr; }
  .resilient-athlete .ra-animal.is-catch { grid-column: span 1; }
  .resilient-athlete .ra-nrow { padding: 22px 20px 22px 18px; gap: 16px; }
  .resilient-athlete .ra-num { width: 46px; height: 46px; font-size: 19px; border-radius: 12px; }
  .resilient-athlete .ra-col header { padding: 18px 22px; }
  .resilient-athlete .ra-col ul { padding: 4px 22px 22px; }
  .resilient-athlete .ra-note { padding: 18px 20px; }
  .resilient-athlete .ra-panel { padding: 34px 24px; }
  .resilient-athlete .ra-col { padding: 24px 22px; }
}

/* ==========================================================================
   Article layout (.ra-article — the long-form Method page)
   One consistent column structure: text sits in a reading column, multi-column
   components sit in a wider one. Landing pages are unaffected.
   ========================================================================== */
.ra-article {
  /* Absolute, not ch: ch resolves against each element's own font-size, so the
     larger emphasis lines computed a wider column than the body copy and broke
     the shared left edge. */
  --ra-read: 680px;   /* anything carrying running text */
  --ra-comp: 1000px;  /* genuinely multi-column blocks */
}

/* Everything that carries running text shares one column and one left edge. */
.ra-article .ra-prose.is-left,
.ra-article .ra-pullquote {
  max-width: var(--ra-read);
  margin-left: auto;
  margin-right: auto;
}
/* The notes follow full-width grids, so they take the component column. */

/* Tier one: everything carrying running text shares the reading column and,
   for the left-aligned blocks, one left edge. */
.ra-article .ra-nlist,
.ra-article .ra-flow:not(.is-four),
.ra-article .ra-note,
.ra-article .ra-deeplist { max-width: var(--ra-read); }

/* Tier two: genuinely multi-column blocks, centred on the same axis. */
.ra-article .ra-compare,
.ra-article .ra-kingdom,
.ra-article .ra-panel,
.ra-article .ra-quote-featured {
  max-width: var(--ra-comp);
  margin-left: auto; margin-right: auto;
}


/* Vertical rhythm between stacked text blocks, replacing inline margins. */
.ra-article .ra-prose + .ra-pullquote,
.ra-article .ra-pullquote + .ra-prose,
.ra-article .ra-prose + .ra-prose { margin-top: 30px; }
.ra-article .ra-flow + .ra-prose,
.ra-article .ra-nlist + .ra-pullquote,
.ra-article .ra-kingdom + .ra-note,
.ra-article .ra-note + .ra-pullquote { margin-top: 38px; }

/* --- Emphasis lines, not boxes -------------------------------------------
   These are lede lines inside flowing copy. A card made them read as separate
   components and, being wider than the prose, broke the column's left edge. */
.ra-article .ra-pullquote {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 0 4px 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ra-ink);
  line-height: 1.62;
}
.ra-article .ra-pullquote::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--ra-orange), var(--ra-blue));
}

/* --- Heads share the reading column so left edges line up ---------------- */
.ra-article .ra-head { max-width: var(--ra-read); margin-bottom: 40px; }

/* --- Slightly tighter sections: this page is long ------------------------ */
.ra-article .ra-section { padding: 76px 0; }

@media (max-width: 620px) {
  .ra-article .ra-pullquote { padding-left: 20px; }
  .resilient-athlete .ra-note { padding: 20px 20px; gap: 14px; }
  .resilient-athlete .ra-note-ico { width: 38px; height: 38px; font-size: 18px; }
}

/* ==========================================================================
   Deeper-work blocks (calm the lizard / guide the elephant / aim the monkeys)
   Stacked full-width rather than three columns: one block carries a five item
   list and another carries none, so side-by-side cards were badly unbalanced.
   ========================================================================== */
.resilient-athlete .ra-deeplist {
  margin: 38px auto 0;
  display: flex; flex-direction: column; gap: 20px;
}

.resilient-athlete .ra-deep {
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 28px 30px;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-deep:hover { transform: translateY(-3px); box-shadow: var(--ra-sh-md); }

.resilient-athlete .ra-deep header {
  display: flex; align-items: center; gap: 15px;
  margin-bottom: 16px;
}
.resilient-athlete .ra-deep .ra-animal-ico { margin-bottom: 0; }
.resilient-athlete .ra-deep h3 {
  font-weight: 700; font-size: 18px; letter-spacing: -.008em;
  margin: 0;
}
.resilient-athlete .ra-deep > p { font-size: 15px; line-height: 1.65; color: var(--ra-body); }

/* The lists run two across when there is room, so a five item list does not
   stretch the block out of proportion with the others. */
.resilient-athlete .ra-deep .ra-mlist { margin-top: 18px; }
.resilient-athlete .ra-deep .ra-mlist li { font-size: 14.5px; }

@media (max-width: 760px) {
  .resilient-athlete .ra-deep { padding: 24px 22px; }
  .resilient-athlete .ra-deep header { align-items: flex-start; }
}

/* ==========================================================================
   Onward links (Put It Into Practice)
   Compact rows, not cards: these are four navigation links with a line of
   description each, and full cards made them read heavier than the content.
   ========================================================================== */
.resilient-athlete .ra-nextlist {
  max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}

.resilient-athlete .ra-next {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 12px;
  padding: 18px 22px;
  text-decoration: none; color: inherit;
  box-shadow: var(--ra-sh-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.resilient-athlete .ra-next:hover {
  transform: translateY(-2px);
  box-shadow: var(--ra-sh-md);
  border-color: rgba(12, 113, 195, .24);
  color: inherit;
}
.resilient-athlete .ra-next::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--ra-orange), var(--ra-blue));
  transform: scaleY(0); transform-origin: top;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.resilient-athlete .ra-next:hover::before { transform: scaleY(1); }

.resilient-athlete .ra-next-ico {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  color: #fff; font-size: 18px;
  box-shadow: 0 6px 14px rgba(12, 113, 195, .26);
  transition: background .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-next:hover .ra-next-ico {
  background: linear-gradient(150deg, #FF9440, var(--ra-orange));
  box-shadow: 0 6px 14px rgba(255, 128, 31, .30);
}

.resilient-athlete .ra-next-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resilient-athlete .ra-next-body strong {
  font-weight: 700; font-size: 16px; letter-spacing: -.008em; color: var(--ra-ink);
}
.resilient-athlete .ra-next-body > span { font-size: 14px; line-height: 1.5; color: var(--ra-body); }

.resilient-athlete .ra-next-go {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  color: var(--ra-blue); font-weight: 600; font-size: 13.5px;
  white-space: nowrap;
}
.resilient-athlete .ra-next-go .bi { font-size: 12px; transition: transform .2s ease; }
.resilient-athlete .ra-next:hover .ra-next-go { color: var(--ra-orange); }
.resilient-athlete .ra-next:hover .ra-next-go .bi { transform: translateX(4px); }

@media (max-width: 700px) {
  /* The call to action label folds away; the whole row is the link. */
  .resilient-athlete .ra-next { grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; }
  .resilient-athlete .ra-next-go { display: none; }
}

/* --- Closing panel: the final statement and CTA together ----------------- */
.resilient-athlete .ra-panel.is-close { margin-top: 42px; padding: 54px 52px; }
.resilient-athlete .ra-panel.is-close .ra-panel-inner {
  align-items: center; text-align: center; gap: 26px;
}
.resilient-athlete .ra-panel.is-close .ra-closeline {
  margin: 0;
  color: #fff;
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  max-width: 46ch;
}
@media (max-width: 620px) {
  .resilient-athlete .ra-panel.is-close { padding: 36px 24px; }
}

/* ==========================================================================
   Roadmap stepper
   The same spine-and-number language as the Intention/Plan/Action timeline,
   scaled up because each step carries a heading, prose and its own blocks.
   ========================================================================== */
.resilient-athlete .ra-road {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--ra-read);
}

.resilient-athlete .ra-rstep {
  position: relative;
  display: grid; grid-template-columns: 54px 1fr; gap: 24px;
  padding-bottom: 46px;
}
.resilient-athlete .ra-rstep:last-child { padding-bottom: 0; }

/* Spine running from one milestone to the next. */
.resilient-athlete .ra-rstep:not(:last-child)::before {
  content: "";
  position: absolute; left: 26px; top: 62px; bottom: 8px; width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(12, 113, 195, .30), rgba(12, 113, 195, .07));
}

.resilient-athlete .ra-rnum {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  color: #fff; font-weight: 700; font-size: 21px; letter-spacing: -.02em;
  box-shadow: 0 10px 22px rgba(12, 113, 195, .28), 0 0 0 6px #fff;
}
.resilient-athlete .ra-section.is-soft .ra-rnum { box-shadow: 0 10px 22px rgba(12, 113, 195, .28), 0 0 0 6px var(--ra-soft); }

.resilient-athlete .ra-rbody { padding-top: 2px; min-width: 0; }
.resilient-athlete .ra-rkicker {
  display: block;
  color: var(--ra-orange); font-weight: 700; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 7px;
}
.resilient-athlete .ra-rbody h3,
.resilient-athlete .ra-rbody h2 {
  font-weight: 700; font-size: 21px; letter-spacing: -.012em;
  margin-bottom: 12px;
}
.resilient-athlete .ra-rbody > p {
  font-size: 15.5px; line-height: 1.68; color: var(--ra-body);
  margin-bottom: 14px;
}
.resilient-athlete .ra-rbody > p strong { color: var(--ra-ink); font-weight: 600; }

/* The one clear action on a step. Outlined, matching the card links. */
.resilient-athlete .ra-do {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 4px;
  padding: 11px 20px;
  border: 1.5px solid rgba(12, 113, 195, .34);
  border-radius: 6px;
  color: var(--ra-blue); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-do .bi { font-size: 13px; transition: transform .22s ease; }
.resilient-athlete .ra-do:hover {
  background: var(--ra-blue); border-color: var(--ra-blue); color: #fff;
  box-shadow: 0 10px 22px rgba(12, 113, 195, .26);
}
.resilient-athlete .ra-do:hover .bi { transform: translateX(4px); }

/* --- The V: past on the left, future on the right ------------------------ */
/* The past side carries roughly twice the copy of the future side, so the
   columns are weighted to bring the two cards closer to equal height. */
.resilient-athlete .ra-vsplit {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px;
  margin: 6px 0 20px;
}
.resilient-athlete .ra-vside {
  border-radius: 12px;
  padding: 22px 22px 24px;
}
.resilient-athlete .ra-vside h4 {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 14px; letter-spacing: -.005em;
  margin-bottom: 10px;
}
.resilient-athlete .ra-vside h4 .bi { font-size: 14px; }
.resilient-athlete .ra-vside p { font-size: 14.5px; line-height: 1.6; }

.resilient-athlete .ra-vside.is-past {
  background: var(--ra-soft);
  border: 1px solid var(--ra-line);
}
.resilient-athlete .ra-vside.is-past h4 { color: var(--ra-blue); }
.resilient-athlete .ra-vside.is-past p { color: var(--ra-body); }

.resilient-athlete .ra-vside.is-future {
  background: linear-gradient(150deg, rgba(255, 128, 31, .09), rgba(255, 128, 31, .03));
  border: 1px solid rgba(255, 128, 31, .30);
}
.resilient-athlete .ra-vside.is-future h4 { color: var(--ra-orange); }
.resilient-athlete .ra-vside.is-future p { color: var(--ra-body); }

/* --- Tripwires and rigid-to-relaxed signals ------------------------------ */
.resilient-athlete .ra-trip {
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 6px 0 18px;
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-trip h4 {
  font-weight: 700; font-size: 15.5px; letter-spacing: -.008em;
  margin-bottom: 4px;
}
.resilient-athlete .ra-trip-sub { font-size: 14px; color: var(--ra-muted); margin-bottom: 12px; }
.resilient-athlete .ra-trip .ra-mlist { margin-top: 12px; }

.resilient-athlete .ra-check { list-style: none; margin: 14px 0 0; padding: 0; }
.resilient-athlete .ra-check li {
  position: relative; padding: 11px 0 11px 32px;
  font-size: 14.5px; line-height: 1.55; color: var(--ra-body);
}
.resilient-athlete .ra-check li + li { border-top: 1px solid var(--ra-line); }
.resilient-athlete .ra-check li strong { color: var(--ra-ink); font-weight: 600; }
.resilient-athlete .ra-check li::before {
  content: "\F26E"; /* bootstrap-icons check-lg */
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: "bootstrap-icons"; font-size: 10px;
  background: rgba(31, 157, 107, .14); color: #1F9D6B;
}

/* Signals card reads as the softer, observational one. */
.resilient-athlete .ra-trip.is-signals { background: var(--ra-soft); box-shadow: none; }

/* --- The three phases inside step four ----------------------------------- */
.resilient-athlete .ra-phases {
  list-style: none; margin: 6px 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.resilient-athlete .ra-phases li {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: 10px; padding: 14px 18px;
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-phases p { font-size: 14.5px; line-height: 1.55; color: var(--ra-body); }
.resilient-athlete .ra-phases p strong { color: var(--ra-ink); font-weight: 600; }
.resilient-athlete .ra-pnum {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  color: #fff; font-weight: 700; font-size: 13px;
}

/* Blocks nested inside a step fill the step's column. */
.resilient-athlete .ra-rbody .ra-note,
.resilient-athlete .ra-rbody .ra-nextlist { max-width: none; margin-left: 0; margin-right: 0; }
.resilient-athlete .ra-rbody .ra-note { margin-top: 0; margin-bottom: 18px; }
.resilient-athlete .ra-rbody .ra-mlist { margin-bottom: 18px; }

@media (max-width: 700px) {
  .resilient-athlete .ra-rstep { grid-template-columns: 44px 1fr; gap: 16px; padding-bottom: 38px; }
  .resilient-athlete .ra-rstep:not(:last-child)::before { left: 21px; top: 52px; }
  .resilient-athlete .ra-rnum { width: 44px; height: 44px; font-size: 18px; }
  .resilient-athlete .ra-vsplit { grid-template-columns: 1fr; }
  .resilient-athlete .ra-trip { padding: 20px; }
}

/* ==========================================================================
   Hero contents card
   The homepage hero has the book in the right column. These are long guide
   pages, so the same slot carries a contents list that also lets people jump.
   ========================================================================== */
.resilient-athlete .ra-hero-split {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}

.resilient-athlete .ra-hero-aside {
  background: rgba(8, 26, 41, .58);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ra-radius);
  padding: 26px 28px 22px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
}
.resilient-athlete .ra-hero-aside h2 {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 4px;
}
.resilient-athlete .ra-hero-aside h2::before {
  content: "\F4A6"; /* bootstrap-icons signpost-split-fill */
  font-family: "bootstrap-icons"; font-size: 15px;
  color: var(--ra-orange); letter-spacing: 0;
}
/* Built as a miniature of the stepper below: a spine running through the
   numbers, so the card reads as the route rather than a list of links. */
.resilient-athlete .ra-hero-aside ol { list-style: none; margin: 4px 0 0; padding: 0; }
.resilient-athlete .ra-hero-aside li { position: relative; }
.resilient-athlete .ra-hero-aside li:not(:last-child)::before {
  content: "";
  position: absolute; left: 13px; top: 30px; bottom: -4px; width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .16);
}
.resilient-athlete .ra-hero-aside a {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 7px 0;
  color: #C1D4E4; font-size: 14px; line-height: 1.4;
  text-decoration: none;
  transition: color .2s ease;
}
.resilient-athlete .ra-hero-aside a span {
  flex: none; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #10314C;
  border: 1.5px solid rgba(255, 255, 255, .22);
  color: #A9C6DD; font-size: 12px; font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
/* Step one is the entry point, so it is marked as the start of the route. */
.resilient-athlete .ra-hero-aside li:first-child a span {
  background: var(--ra-orange); border-color: var(--ra-orange); color: #fff;
  box-shadow: 0 6px 16px rgba(255, 128, 31, .38);
}
.resilient-athlete .ra-hero-aside a:hover { color: #fff; }
.resilient-athlete .ra-hero-aside a:hover span {
  background: var(--ra-orange); border-color: var(--ra-orange); color: #fff;
  transform: scale(1.08);
}

/* Jump targets clear the fixed navbar, which measures 112px, plus breathing room. */
.resilient-athlete .ra-section[id],
.resilient-athlete .ra-rstep[id] { scroll-margin-top: 136px; }

@media (max-width: 1000px) {
  .resilient-athlete .ra-hero-split { grid-template-columns: 1fr; gap: 36px; }
  .resilient-athlete .ra-hero-aside { max-width: 520px; }
}
@media (max-width: 620px) {
  .resilient-athlete .ra-hero-aside { padding: 22px 20px 18px; }
  .resilient-athlete .ra-hero-aside a { font-size: 14px; }
}

/* --- Two part headline: the question, then the instruction ---------------
   With no eyebrow above it, the orange lead-in carries that job instead. */
.resilient-athlete .ra-hero h1 .ra-h1-lead,
.resilient-athlete .ra-hero .ra-hero-title .ra-h1-lead {
  display: block;
  color: var(--ra-orange);
  font-size: .58em;
  font-weight: 700;
  letter-spacing: -.005em;
  margin-bottom: 8px;
}

/* ==========================================================================
   Assessment pages: hub + joint pages
   Status colours below are semantic, not brand decoration. Red means "get this
   checked", green means "good result". Everything else stays blue and orange.
   ========================================================================== */
.resilient-athlete {
  --ra-red:      #C0392B;
  --ra-red-bg:   #FCEDEB;
  --ra-red-line: #F0C9C4;
  --ra-good:     #1B8A5A;
  --ra-good-bg:  #EAF7F0;
  --ra-good-line:#BFE3D0;
}

/* --- Group label above a grid -------------------------------------------- */
.resilient-athlete .ra-grouplabel {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--ra-display); font-weight: 500;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ra-muted);
  margin: 0 0 22px;
}
.resilient-athlete .ra-grouplabel::after {
  content: ""; flex: 1; height: 1px; background: var(--ra-line);
}
.resilient-athlete .ra-jointgrid + .ra-grouplabel { margin-top: 44px; }

/* --- Body part tiles ------------------------------------------------------ */
.resilient-athlete .ra-jointgrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.resilient-athlete .ra-joint {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 26px 24px 24px;
  box-shadow: var(--ra-sh-sm);
  text-decoration: none; color: inherit;
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, border-color .24s ease;
}
.resilient-athlete .ra-joint::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ra-orange), var(--ra-blue));
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.resilient-athlete a.ra-joint:hover {
  transform: translateY(-5px); box-shadow: var(--ra-sh-lift);
  border-color: rgba(12,113,195,.22); color: inherit;
}
.resilient-athlete a.ra-joint:hover::before { transform: scaleX(1); }
.resilient-athlete .ra-joint h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 20px; letter-spacing: .012em; margin-bottom: 9px;
}
.resilient-athlete .ra-joint p { font-size: 14.5px; line-height: 1.55; color: var(--ra-body); margin-bottom: 20px; }
.resilient-athlete .ra-joint .ra-go {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border: 1.5px solid rgba(12,113,195,.34); border-radius: 6px;
  color: var(--ra-blue); font-weight: 600; font-size: 13.5px;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.resilient-athlete .ra-joint .ra-go .bi { font-size: 12px; transition: transform .22s ease; }
.resilient-athlete a.ra-joint:hover .ra-go { background: var(--ra-blue); border-color: var(--ra-blue); color: #fff; }
.resilient-athlete a.ra-joint:hover .ra-go .bi { transform: translateX(4px); }

/* Not built yet: still a tile, clearly not a link, never a dead end. */
.resilient-athlete .ra-joint.is-soon { background: var(--ra-soft); box-shadow: none; }
.resilient-athlete .ra-joint.is-soon h3 { color: var(--ra-muted); }
.resilient-athlete .ra-joint.is-soon p { color: var(--ra-muted); }
.resilient-athlete .ra-joint .ra-soon {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px dashed var(--ra-line);
  color: var(--ra-muted);
  font-family: var(--ra-display); font-weight: 500;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}

/* --- The three signal types ----------------------------------------------
   Side by side, not stacked. The whole point of the copy is that these are
   three different messages you have to tell apart, so they need to be
   comparable at a glance. */
.resilient-athlete .ra-signals {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1060px; margin: 0 auto;
}
.resilient-athlete .ra-signal {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-signal:hover { transform: translateY(-4px); box-shadow: var(--ra-sh-lift); }

.resilient-athlete .ra-signal-band {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 22px;
  color: #fff;
  font-family: var(--ra-display); font-weight: 500;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.resilient-athlete .ra-signal-band .bi { font-size: 15px; }
.resilient-athlete .ra-signal.is-warn  .ra-signal-band { background: var(--ra-red); }
.resilient-athlete .ra-signal.is-coord .ra-signal-band { background: var(--ra-good); }
.resilient-athlete .ra-signal.is-noise .ra-signal-band { background: var(--ra-blue); }

.resilient-athlete .ra-signal-body { padding: 24px 24px 26px; }
.resilient-athlete .ra-signal h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 18px; letter-spacing: .012em; line-height: 1.25;
  margin-bottom: 10px; color: var(--ra-ink);
}
.resilient-athlete .ra-signal p { font-size: 14.5px; line-height: 1.62; color: var(--ra-body); }

/* What to do about each one, pinned to the bottom so the three line up. */
.resilient-athlete .ra-signal-verdict {
  margin-top: auto;
  padding: 14px 24px;
  border-top: 1px solid var(--ra-line);
  background: var(--ra-soft);
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 9px;
}
.resilient-athlete .ra-signal.is-warn  .ra-signal-verdict { color: var(--ra-red); }
.resilient-athlete .ra-signal.is-coord .ra-signal-verdict { color: var(--ra-good); }
.resilient-athlete .ra-signal.is-noise .ra-signal-verdict { color: var(--ra-blue); }

@media (max-width: 900px) {
  .resilient-athlete .ra-signals { grid-template-columns: 1fr; max-width: 640px; }
}
/* --- Centred emphasis blocks between prose ------------------------------- */
.resilient-athlete .ra-closer { text-align: center; max-width: 720px; margin: 0 auto; }
.resilient-athlete .ra-closer .ra-big {
  font-family: var(--ra-display); font-weight: 600;
  font-size: clamp(19px, 2vw, 24px); color: var(--ra-ink); line-height: 1.3;
  margin-bottom: 12px;
}
.resilient-athlete .ra-closer p { font-size: 15.5px; line-height: 1.65; }
.resilient-athlete .ra-closer .ra-punch {
  font-size: 17px; font-weight: 600; color: var(--ra-ink); margin-top: 16px;
}
.resilient-athlete .ra-signals + .ra-closer { margin-top: 40px; }
.resilient-athlete .ra-closer + .ra-signals { margin-top: 36px; }

/* --- Safety callout ------------------------------------------------------- */
.resilient-athlete .ra-callout {
  max-width: 880px; margin: 0 auto;
  display: flex; gap: 18px; align-items: flex-start;
  position: relative; overflow: hidden;
  background: var(--ra-red-bg);
  border: 1px solid var(--ra-red-line);
  border-radius: var(--ra-radius);
  padding: 24px 28px 24px 32px;
}
.resilient-athlete .ra-callout::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--ra-red);
}
.resilient-athlete .ra-callout .ra-callout-ico {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(192,57,43,.12);
  color: var(--ra-red); font-size: 17px;
}
.resilient-athlete .ra-callout strong {
  display: block; margin-bottom: 6px;
  font-family: var(--ra-display); font-weight: 600;
  font-size: 17px; letter-spacing: .012em; color: var(--ra-red);
}
.resilient-athlete .ra-callout p { color: #8A4A42; font-size: 15px; line-height: 1.6; }
/* Callouts carry no vertical margin so a page can place them freely. Two in a
   row (the lower back page stacks an urgent one above the general one) would
   otherwise butt together into a single slab. */
.resilient-athlete .ra-callout + .ra-callout { margin-top: 18px; }

/* --- Closing call to action ---------------------------------------------- */
.resilient-athlete .ra-closecta { text-align: center; margin-top: 30px; }

/* --- Quiet note under a block -------------------------------------------- */
.resilient-athlete .ra-quietnote {
  text-align: center; max-width: 660px; margin: 34px auto 0;
  color: var(--ra-muted); font-size: 14.5px; line-height: 1.6;
}

/* --- Four across variant of the step flow -------------------------------- */
/* Four equal cards, not the vertical timeline the three step flow uses. */
.resilient-athlete .ra-flow.is-four {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; max-width: none;
}
.resilient-athlete .ra-flow.is-four .ra-fstep {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 28px 26px;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-flow.is-four .ra-fstep:hover { transform: translateY(-4px); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-flow.is-four .ra-fstep::after { display: none; }
.resilient-athlete .ra-flow.is-four .ra-fstep-n { margin-bottom: 18px; border-radius: 12px; }
.resilient-athlete .ra-flow.is-four .ra-fstep h3 { font-size: 17px; margin-bottom: 9px; }
.resilient-athlete .ra-flow.is-four .ra-fstep p { font-size: 14.5px; line-height: 1.6; }

@media (max-width: 1080px) {
  .resilient-athlete .ra-jointgrid { grid-template-columns: repeat(2, 1fr); }
  .resilient-athlete .ra-flow.is-four { grid-template-columns: repeat(2, 1fr); }
  .resilient-athlete .ra-flow.is-four .ra-fstep:nth-child(2n)::after { display: none; }
}
@media (max-width: 620px) {
  .resilient-athlete .ra-jointgrid { grid-template-columns: 1fr; }
  .resilient-athlete .ra-flow.is-four { grid-template-columns: 1fr; }
  .resilient-athlete .ra-callout { padding: 20px 20px; gap: 14px; flex-direction: column; }
}

/* Three across variant of the entry card grid. */
.resilient-athlete .ra-cards.ra-cards-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .resilient-athlete .ra-cards.ra-cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .resilient-athlete .ra-cards.ra-cards-3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Joint assessment pages (Achilles and the nine to follow)
   ========================================================================== */

/* --- Signposts: route yourself down the page ----------------------------- */
.resilient-athlete .ra-signposts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* --- Assessment box ------------------------------------------------------- */
.resilient-athlete .ra-assessbox {
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-lg);
  padding: 34px 36px;
  max-width: 900px; margin: 0 auto 22px;
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-assessbox h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 22px; letter-spacing: .012em; margin-bottom: 10px;
}
.resilient-athlete .ra-assessbox > p { font-size: 15.5px; line-height: 1.62; color: var(--ra-body); }

.resilient-athlete .ra-steps-ol {
  counter-reset: raStep;
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.resilient-athlete .ra-steps-ol li {
  counter-increment: raStep;
  position: relative; padding-left: 40px;
  font-size: 15px; line-height: 1.6; color: var(--ra-body);
}
.resilient-athlete .ra-steps-ol li::before {
  content: counter(raStep);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  color: var(--ra-blue);
  font-family: var(--ra-display); font-weight: 600; font-size: 13px;
}

/* Good / poor outcome split */
.resilient-athlete .ra-result { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.resilient-athlete .ra-result .ra-r { border-radius: 12px; padding: 20px 22px; font-size: 14.5px; line-height: 1.6; }
.resilient-athlete .ra-result .ra-r strong {
  display: block; margin-bottom: 6px;
  font-family: var(--ra-display); font-weight: 600; font-size: 16px; letter-spacing: .012em;
}
.resilient-athlete .ra-result .is-good { background: var(--ra-good-bg); border: 1px solid var(--ra-good-line); color: #2C5F49; }
.resilient-athlete .ra-result .is-good strong { color: var(--ra-good); }
.resilient-athlete .ra-result .is-poor { background: var(--ra-red-bg); border: 1px solid var(--ra-red-line); color: #8A4A42; }
.resilient-athlete .ra-result .is-poor strong { color: var(--ra-red); }

.resilient-athlete .ra-assessnote {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--ra-line);
  color: var(--ra-muted); font-size: 13.5px; line-height: 1.55;
}

/* --- Red flag checklist --------------------------------------------------- */
.resilient-athlete .ra-checklist {
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-lg);
  padding: 32px 36px;
  max-width: 900px; margin: 0 auto 22px;
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-checklist h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 21px; letter-spacing: .012em; margin-bottom: 9px;
}
.resilient-athlete .ra-checklist > p { font-size: 15px; line-height: 1.6; color: var(--ra-body); }
.resilient-athlete .ra-checklist ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.resilient-athlete .ra-checklist li {
  position: relative; padding-left: 32px;
  font-size: 15px; line-height: 1.55; color: var(--ra-ink);
}
.resilient-athlete .ra-checklist li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid var(--ra-red-line); background: var(--ra-red-bg);
}

/* --- Drill phases --------------------------------------------------------- */
.resilient-athlete .ra-phase { max-width: 1060px; margin: 0 auto 36px; }
.resilient-athlete .ra-phase-label { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.resilient-athlete .ra-phase-n {
  flex: none;
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  color: #fff; font-family: var(--ra-display); font-weight: 600; font-size: 17px;
  box-shadow: 0 8px 18px rgba(12,113,195,.28);
}
.resilient-athlete .ra-phase-label h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 20px; letter-spacing: .012em;
}
.resilient-athlete .ra-phase-label .ra-phase-sub { color: var(--ra-muted); font-size: 14px; }

.resilient-athlete .ra-drills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.resilient-athlete .ra-drill {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-drill:hover { transform: translateY(-4px); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-drill-vid {
  position: relative;
  height: 132px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(150deg, #12456F, var(--ra-navy));
  color: #C9DAE8; font-size: 13.5px; font-weight: 600;
  text-decoration: none;
}
.resilient-athlete .ra-drill-vid:hover { color: #fff; }
.resilient-athlete .ra-drill-play {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ra-orange); color: #fff; font-size: 15px;
  box-shadow: 0 8px 18px rgba(255,128,31,.34);
  transition: transform .22s ease;
}
.resilient-athlete .ra-drill-vid:hover .ra-drill-play { transform: scale(1.08); }
.resilient-athlete .ra-drill-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; }
.resilient-athlete .ra-drill h4 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 17px; letter-spacing: .012em;
}
.resilient-athlete .ra-drill p { font-size: 14px; line-height: 1.58; color: var(--ra-body); }
.resilient-athlete .ra-drill .ra-cue {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--ra-line);
  color: var(--ra-muted); font-size: 13px; line-height: 1.5;
}
.resilient-athlete .ra-drill .ra-newflag {
  align-self: flex-start;
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  color: var(--ra-blue);
  font-family: var(--ra-display); font-weight: 500;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .resilient-athlete .ra-signposts,
  .resilient-athlete .ra-drills { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .resilient-athlete .ra-result { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .resilient-athlete .ra-signposts,
  .resilient-athlete .ra-drills { grid-template-columns: 1fr; }
  .resilient-athlete .ra-assessbox,
  .resilient-athlete .ra-checklist { padding: 26px 22px; }
}

/* ==========================================================================
   Breadcrumb inside the hero
   A separate bar above the hero collided with the fixed navbar and broke the
   dark band. It now sits on the hero itself, above the eyebrow.
   ========================================================================== */
.resilient-athlete .ra-hero-crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 13.5px;
}
.resilient-athlete .ra-hero-crumb a {
  color: #A9C4D8; text-decoration: none; font-weight: 500;
  transition: color .2s ease;
}
.resilient-athlete .ra-hero-crumb a:hover { color: var(--ra-orange); }
.resilient-athlete .ra-hero-crumb .bi { color: #6F8CA5; font-size: 10px; }
.resilient-athlete .ra-hero-crumb span { color: #E4EEF6; font-weight: 500; }

/* ==========================================================================
   Drill video modal
   The tile opens a dialog rather than sending people off to Vimeo. The iframe
   src is only set on open, so no video loads until it is asked for.
   ========================================================================== */
.ra-vmodal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 21, 32, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}
.ra-vmodal.is-open { opacity: 1; visibility: visible; }
.ra-vmodal-dialog {
  position: relative;
  width: min(980px, 100%);
  background: #0A2033;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  transform: translateY(14px) scale(.985);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.ra-vmodal.is-open .ra-vmodal-dialog { transform: none; }
.ra-vmodal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.ra-vmodal-title {
  font-family: 'Oswald', 'Poppins', sans-serif; font-weight: 600;
  font-size: 18px; letter-spacing: .012em; color: #fff;
}
.ra-vmodal-close {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font-size: 16px; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ra-vmodal-close:hover { background: var(--secondary-btn-background-colour, #FF801F); transform: rotate(90deg); }
.ra-vmodal-frame { position: relative; aspect-ratio: 16 / 9; background: #061520; }
.ra-vmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.ra-vmodal-open { overflow: hidden; }

/* The drill tile is now a button, so it needs the tile styling reset. */
.resilient-athlete button.ra-drill-vid {
  width: 100%; border: 0; cursor: pointer;
  font-family: 'Poppins', sans-serif;
}

@media (max-width: 620px) {
  .ra-vmodal { padding: 14px; }
  .ra-vmodal-head { padding: 14px 16px; }
  .ra-vmodal-title { font-size: 16px; }
}

/* --- Body part icon: shared figure, moving highlight --------------------- */
.resilient-athlete .ra-joint-ico {
  width: 54px; height: 54px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  margin-bottom: 18px;
  transition: background .24s ease, border-color .24s ease;
}
.resilient-athlete .ra-bodyicon { width: 34px; height: 34px; display: block; }
.resilient-athlete .ra-bodyicon-figure { color: #A7BACA; transition: color .24s ease; }
.resilient-athlete .ra-bodyicon-spot { fill: rgba(255, 128, 31, .22); transition: fill .24s ease; }
.resilient-athlete .ra-bodyicon-dot  { fill: var(--ra-orange); transition: fill .24s ease; }

.resilient-athlete a.ra-joint:hover .ra-joint-ico { background: #fff; border-color: rgba(12, 113, 195, .26); }
.resilient-athlete a.ra-joint:hover .ra-bodyicon-figure { color: var(--ra-blue); }
.resilient-athlete a.ra-joint:hover .ra-bodyicon-spot { fill: rgba(255, 128, 31, .30); }

/* Muted on the tiles that are not built yet. */
.resilient-athlete .ra-joint.is-soon .ra-bodyicon-figure { color: #C3CFDA; }
.resilient-athlete .ra-joint.is-soon .ra-bodyicon-spot { fill: rgba(130, 144, 157, .16); }
.resilient-athlete .ra-joint.is-soon .ra-bodyicon-dot { fill: var(--ra-muted); }

/* ==========================================================================
   Meet the team
   A single column list. The earlier two column version left a wide dead
   channel between a small label and the copy, which read as a layout bug.
   ========================================================================== */
.resilient-athlete .ra-team {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.resilient-athlete .ra-teamrow {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 24px 28px 24px 32px;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-teamrow:hover { transform: translateY(-3px); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-teamrow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ra-blue);
}
.resilient-athlete .ra-teamrow.is-surface::before { background: var(--ra-orange); }
.resilient-athlete .ra-teamrow.is-deep::before    { background: var(--ra-good); }
.resilient-athlete .ra-teamrow.is-chain::before   { background: var(--ra-blue); }

.resilient-athlete .ra-teamrole {
  display: inline-block;
  font-family: var(--ra-display); font-weight: 500;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ra-blue);
  margin-bottom: 8px;
}
.resilient-athlete .ra-teamrow.is-surface .ra-teamrole { color: var(--ra-orange); }
.resilient-athlete .ra-teamrow.is-deep    .ra-teamrole { color: var(--ra-good); }
.resilient-athlete .ra-teamrow.is-chain   .ra-teamrole { color: var(--ra-blue); }

.resilient-athlete .ra-teamrow h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 19px; letter-spacing: .012em; margin-bottom: 8px;
}
.resilient-athlete .ra-teamrow p { font-size: 15px; line-height: 1.65; color: var(--ra-body); }
/* ==========================================================================
   Your sport: an accordion, which is what the copy asks for
   ========================================================================== */
.resilient-athlete .ra-sportlist {
  max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.resilient-athlete .ra-sport {
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-sh-sm);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-sport[open] { border-color: rgba(12, 113, 195, .26); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-sport summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ra-display); font-weight: 600;
  font-size: 18px; letter-spacing: .012em; color: var(--ra-ink);
}
.resilient-athlete .ra-sport summary::-webkit-details-marker { display: none; }
.resilient-athlete .ra-sport summary:hover { color: var(--ra-blue); }
.resilient-athlete .ra-sport-toggle {
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  color: var(--ra-blue); font-size: 13px;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), background .22s ease, color .22s ease;
}
.resilient-athlete .ra-sport[open] .ra-sport-toggle {
  transform: rotate(45deg);
  background: var(--ra-orange); border-color: var(--ra-orange); color: #fff;
}
.resilient-athlete .ra-sport-body {
  padding: 0 24px 22px;
  font-size: 15px; line-height: 1.68; color: var(--ra-body);
}

@media (max-width: 700px) {
  .resilient-athlete .ra-teamrow { padding: 20px 20px 20px 24px; }
  .resilient-athlete .ra-sport summary { padding: 17px 18px; font-size: 16.5px; }
  .resilient-athlete .ra-sport-body { padding: 0 18px 18px; }
}

/* ==========================================================================
   How to know it is working
   Four "you will notice this" signs, then two guidance cards. Six identical
   rows gave the signs and the warnings the same weight, which they are not.
   ========================================================================== */
.resilient-athlete .ra-signs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 880px; margin: 0 auto;
}
.resilient-athlete .ra-sign {
  display: flex; align-items: flex-start; gap: 15px;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 22px 24px;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-sign:hover { transform: translateY(-3px); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-sign-ico {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ra-good-bg); border: 1px solid var(--ra-good-line);
  color: var(--ra-good); font-size: 14px;
}
.resilient-athlete .ra-sign p { font-size: 15px; line-height: 1.6; color: var(--ra-ink); }

.resilient-athlete .ra-guides {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  max-width: 880px; margin: 26px auto 0;
}
.resilient-athlete .ra-guide {
  position: relative; overflow: hidden;
  border-radius: var(--ra-radius);
  padding: 26px 28px 26px 32px;
  background: #fff; border: 1px solid var(--ra-line);
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-guide::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ra-blue);
}
.resilient-athlete .ra-guide.is-warn::before { background: var(--ra-orange); }
.resilient-athlete .ra-guide-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ra-display); font-weight: 500;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ra-blue); margin-bottom: 10px;
}
.resilient-athlete .ra-guide.is-warn .ra-guide-label { color: var(--ra-orange); }
.resilient-athlete .ra-guide h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 19px; letter-spacing: .012em; margin-bottom: 8px;
}
.resilient-athlete .ra-guide p { font-size: 15px; line-height: 1.62; color: var(--ra-body); }

@media (max-width: 780px) {
  .resilient-athlete .ra-signs, .resilient-athlete .ra-guides { grid-template-columns: 1fr; }
}

/* --- Rhythm between a component block and the emphasis line after it ------ */
.resilient-athlete .ra-team + .ra-pullquote,
.resilient-athlete .ra-signs + .ra-pullquote,
.resilient-athlete .ra-sportlist + .ra-pullquote,
.resilient-athlete .ra-jointgrid + .ra-pullquote,
.resilient-athlete .ra-signals + .ra-pullquote,
.resilient-athlete .ra-drills + .ra-pullquote,
.resilient-athlete .ra-assessbox + .ra-pullquote,
.resilient-athlete .ra-checklist + .ra-pullquote { margin-top: 40px; }

.resilient-athlete .ra-team + .ra-prose,
.resilient-athlete .ra-sportlist + .ra-prose,
.resilient-athlete .ra-signs + .ra-prose { margin-top: 34px; }

/* --- Anchor targets clear the fixed navbar when jumped to ---------------- */
.resilient-athlete [id] { scroll-margin-top: 110px; }

/* Grid heading is also the anchor target for "find my body part". */
.resilient-athlete .ra-gridhead { margin-top: 56px; }

/* --- Buttons keep their natural width on small screens ------------------- */
/* Full width buttons looked like form submits rather than CTAs. They stay
   inline and simply wrap when a row runs out of room. */
@media (max-width: 620px) {
  .resilient-athlete .ra-btn { width: auto; padding: 13px 22px; font-size: 14.5px; }
  .resilient-athlete .ra-hero-cta { gap: 12px; }
  .resilient-athlete .ra-hero-cta .ra-btn { width: auto; }
}

/* ==========================================================================
   Joint page: honest "not built yet" states
   Three of the upper body pages have no coordination test or drills in the
   source. They say so rather than inventing content to fill the box.
   ========================================================================== */
.resilient-athlete .ra-soon {
  max-width: 900px; margin: 0 auto;
  background: #fff;
  border: 1px dashed #D8C79B;
  border-radius: var(--ra-radius-lg);
  padding: 34px 36px;
}
.resilient-athlete .ra-soon h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 21px; letter-spacing: .012em; margin: 4px 0 12px;
}
.resilient-athlete .ra-soon p { font-size: 15.5px; line-height: 1.65; color: var(--ra-body); margin-bottom: 14px; }
.resilient-athlete .ra-soon p:last-of-type { margin-bottom: 0; }
.resilient-athlete .ra-soon strong { color: var(--ra-ink); font-weight: 600; }
.resilient-athlete .ra-soon .ra-btn { margin-top: 20px; }

/* --- Urgent callout: the lower back cauda equina signs -------------------- */
.resilient-athlete .ra-callout.is-urgent {
  background: #F9DEDA;
  border-color: #E8B4AC;
}
.resilient-athlete .ra-callout.is-urgent::before { width: 7px; }
.resilient-athlete .ra-callout.is-urgent .ra-callout-ico {
  background: rgba(192, 57, 43, .18); font-size: 19px;
}
.resilient-athlete .ra-callout.is-urgent strong { font-size: 19px; }
.resilient-athlete .ra-callout.is-urgent p { color: #7A3931; }

/* --- Amber callout: video conflicts and build notes ---------------------- */
.resilient-athlete .ra-callout.is-amber {
  background: #FBF6EA;
  border-color: #E8D3A2;
}
.resilient-athlete .ra-callout.is-amber::before { background: #C79A2E; }
.resilient-athlete .ra-callout.is-amber .ra-callout-ico { background: rgba(199, 154, 46, .16); color: #9A6F14; }
.resilient-athlete .ra-callout.is-amber strong { color: #9A6F14; }
.resilient-athlete .ra-callout.is-amber p { color: #7A6021; }

/* --- Stacked result variant: the ankle grade self check ------------------ */
.resilient-athlete .ra-result.is-stack { grid-template-columns: 1fr; }
.resilient-athlete .ra-result .ra-r.is-warn {
  background: #FBF6EA; border: 1px solid #E8D3A2; color: #7A6021;
}
.resilient-athlete .ra-result .ra-r.is-warn strong { color: #9A6F14; }

/* --- Urgent signpost card: routes straight to the red flags -------------- */
.resilient-athlete .ra-card.is-urgent { background: var(--ra-red-bg); border-color: var(--ra-red-line); }
.resilient-athlete .ra-card.is-urgent .ra-card-icon {
  background: linear-gradient(150deg, #D2554A, var(--ra-red));
  box-shadow: 0 8px 18px rgba(192, 57, 43, .28);
}
.resilient-athlete .ra-card.is-urgent .ra-kicker { color: var(--ra-red); }
.resilient-athlete .ra-card.is-urgent .ra-kicker em { color: var(--ra-red); }
.resilient-athlete .ra-card.is-urgent .ra-go { color: var(--ra-red); border-color: rgba(192, 57, 43, .34); }
.resilient-athlete a.ra-card.is-urgent:hover .ra-go { background: var(--ra-red); border-color: var(--ra-red); color: #fff; }
.resilient-athlete a.ra-card.is-urgent:hover .ra-card-icon { background: linear-gradient(150deg, #D2554A, var(--ra-red)); }

@media (max-width: 620px) {
  .resilient-athlete .ra-soon { padding: 26px 22px; }
}

/* Amber variant of the drill chip, for the unresolved video conflict. */
.resilient-athlete .ra-drill .ra-newflag.is-warn {
  background: #FBF3E2; border-color: #E8D3A2; color: #9A6F14;
}

/* ==========================================================================
   Rehab drills: hub tiles, joint index rows, exercise pages
   ========================================================================== */

/* --- Drill chips on the hub tiles ---------------------------------------- */
.resilient-athlete .ra-chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.resilient-athlete .ra-chip {
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  color: var(--ra-blue);
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.resilient-athlete .ra-joint.is-soon .ra-chip { color: var(--ra-muted); background: #fff; }

/* --- Joint drill index: one row per drill -------------------------------- */
.resilient-athlete .ra-drilllist { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.resilient-athlete .ra-drillrow {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 22px 26px;
  box-shadow: var(--ra-sh-sm);
  text-decoration: none; color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.resilient-athlete a.ra-drillrow:hover {
  transform: translateY(-3px); box-shadow: var(--ra-sh-md);
  border-color: rgba(12,113,195,.24); color: inherit;
}
.resilient-athlete .ra-drillrow-n {
  flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  color: #fff; font-family: var(--ra-display); font-weight: 600; font-size: 17px;
  box-shadow: 0 8px 18px rgba(12,113,195,.26);
}
.resilient-athlete .ra-drillrow h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 18px; letter-spacing: .012em; margin-bottom: 5px;
}
.resilient-athlete .ra-drillrow p { font-size: 14.5px; line-height: 1.55; color: var(--ra-body); }
.resilient-athlete .ra-drillrow .ra-drillrow-go {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(12,113,195,.30);
  color: var(--ra-blue); font-size: 14px;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}
.resilient-athlete a.ra-drillrow:hover .ra-drillrow-go {
  background: var(--ra-blue); border-color: var(--ra-blue); color: #fff; transform: translateX(3px);
}

/* --- Exercise page ------------------------------------------------------- */
.resilient-athlete .ra-exvideo {
  max-width: 900px; margin: 0 auto;
  border-radius: var(--ra-radius-lg); overflow: hidden;
  box-shadow: var(--ra-sh-md);
}
.resilient-athlete button.ra-exvideo-btn {
  width: 100%; border: 0; cursor: pointer; display: block;
  position: relative; aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, #12456F, var(--ra-navy) 60%, var(--ra-navy-deep));
  color: #C9DAE8; font-family: 'Poppins', sans-serif;
}
.resilient-athlete .ra-exvideo-btn .ra-exvideo-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-size: 15px; font-weight: 600;
}
.resilient-athlete .ra-exvideo-btn .ra-drill-play { width: 62px; height: 62px; font-size: 24px; }
.resilient-athlete .ra-exvideo-btn:hover { color: #fff; }
.resilient-athlete .ra-exvideo-btn:hover .ra-drill-play { transform: scale(1.06); }

.resilient-athlete .ra-exblock { max-width: 760px; margin: 0 auto 40px; }
.resilient-athlete .ra-exblock:last-child { margin-bottom: 0; }
.resilient-athlete .ra-exblock h2 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 25px; letter-spacing: .01em; margin-bottom: 14px;
}
.resilient-athlete .ra-exblock p { font-size: 16px; line-height: 1.68; color: var(--ra-body); margin-bottom: 12px; }
.resilient-athlete .ra-exblock p:last-child { margin-bottom: 0; }

/* Mistakes and success side by side */
.resilient-athlete .ra-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.resilient-athlete .ra-checkcol { border-radius: var(--ra-radius); padding: 24px 26px; }
.resilient-athlete .ra-checkcol.is-miss { background: var(--ra-red-bg); border: 1px solid var(--ra-red-line); }
.resilient-athlete .ra-checkcol.is-right { background: var(--ra-good-bg); border: 1px solid var(--ra-good-line); }
.resilient-athlete .ra-checkcol h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 17px; letter-spacing: .012em; margin-bottom: 14px;
}
.resilient-athlete .ra-checkcol.is-miss h3 { color: var(--ra-red); }
.resilient-athlete .ra-checkcol.is-right h3 { color: var(--ra-good); }
.resilient-athlete .ra-checkcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.resilient-athlete .ra-checkcol li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; }
.resilient-athlete .ra-checkcol li::before {
  position: absolute; left: 0; top: 1px;
  font-family: "bootstrap-icons"; font-size: 13px;
}
.resilient-athlete .ra-checkcol.is-miss li { color: #8A4A42; }
.resilient-athlete .ra-checkcol.is-miss li::before { content: "\F62A"; color: #C0574B; }
.resilient-athlete .ra-checkcol.is-right li { color: #2C5F49; }
.resilient-athlete .ra-checkcol.is-right li::before { content: "\F26E"; color: var(--ra-good); }

/* Make it easier */
.resilient-athlete .ra-easier {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 22px 26px 22px 30px;
  font-size: 15.5px; line-height: 1.65; color: var(--ra-body);
  box-shadow: var(--ra-sh-sm);
}
.resilient-athlete .ra-easier::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ra-orange);
}

/* Which injuries this helps */
.resilient-athlete .ra-helps {
  max-width: 760px; margin: 0 auto 40px;
  background: var(--ra-soft); border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-lg); padding: 30px 32px;
}
.resilient-athlete .ra-helps h2 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 22px; letter-spacing: .012em; margin-bottom: 10px;
}
.resilient-athlete .ra-helps p { font-size: 15.5px; line-height: 1.65; margin-bottom: 18px; }
.resilient-athlete .ra-helps .ra-helpchips { display: flex; flex-wrap: wrap; gap: 10px; }
.resilient-athlete .ra-helps a {
  background: #fff; border: 1px solid var(--ra-line);
  color: var(--ra-blue); font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.resilient-athlete .ra-helps a:hover { border-color: var(--ra-orange); color: var(--ra-orange); transform: translateY(-2px); }

@media (max-width: 700px) {
  .resilient-athlete .ra-checks { grid-template-columns: 1fr; }
  .resilient-athlete .ra-drillrow { grid-template-columns: auto 1fr; gap: 16px; padding: 20px; }
  .resilient-athlete .ra-drillrow .ra-drillrow-go { display: none; }
  .resilient-athlete .ra-helps { padding: 24px 22px; }
}

/* ==========================================================================
   Full drill card: video tile beside the detail
   Used on the joint rehab pages, where the whole write up sits inline.
   ========================================================================== */
.resilient-athlete .ra-drillcard {
  display: grid; grid-template-columns: 240px 1fr;
  max-width: 900px; margin: 0 auto 20px;
  background: #fff; border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius-lg); overflow: hidden;
  box-shadow: var(--ra-sh-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.resilient-athlete .ra-drillcard:hover { transform: translateY(-3px); box-shadow: var(--ra-sh-md); }

.resilient-athlete .ra-drillcard-vid {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(150deg, #12456F, var(--ra-navy));
  color: #C9DAE8; font-size: 13px; font-weight: 600;
  border: 0; cursor: pointer; font-family: 'Poppins', sans-serif;
  min-height: 200px;
}
.resilient-athlete .ra-drillcard-vid:hover { color: #fff; }
.resilient-athlete .ra-drillcard-vid:hover .ra-drill-play { transform: scale(1.07); }

.resilient-athlete .ra-drillcard-body { padding: 26px 30px; }
.resilient-athlete .ra-drillcard-body h3 {
  font-family: var(--ra-display); font-weight: 600;
  font-size: 21px; letter-spacing: .012em; margin-bottom: 10px;
}
.resilient-athlete .ra-drillcard-forit { font-size: 15.5px; line-height: 1.62; color: var(--ra-body); margin-bottom: 18px; }

.resilient-athlete .ra-drillcard-rows { display: flex; flex-direction: column; gap: 14px; }
.resilient-athlete .ra-drillcard-row { font-size: 14.5px; line-height: 1.58; color: var(--ra-body); }
.resilient-athlete .ra-drillcard-row .ra-k {
  display: block; margin-bottom: 3px;
  font-family: var(--ra-display); font-weight: 500;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.resilient-athlete .ra-drillcard-row.is-how  .ra-k { color: var(--ra-blue); }
.resilient-athlete .ra-drillcard-row.is-dont .ra-k { color: var(--ra-red); }
.resilient-athlete .ra-drillcard-row.is-got  .ra-k { color: var(--ra-good); }

.resilient-athlete .ra-drillcard-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 10px 18px;
  border: 1.5px solid rgba(12,113,195,.32); border-radius: 6px;
  color: var(--ra-blue); font-weight: 600; font-size: 13.5px; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.resilient-athlete .ra-drillcard-more:hover { background: var(--ra-blue); border-color: var(--ra-blue); color: #fff; }

@media (max-width: 760px) {
  .resilient-athlete .ra-drillcard { grid-template-columns: 1fr; }
  .resilient-athlete .ra-drillcard-vid { min-height: 150px; }
  .resilient-athlete .ra-drillcard-body { padding: 22px 22px 24px; }
}

/* --- Phase rail ----------------------------------------------------------- */
/* The three phases as a left-to-right progression, not a stack and not cards.
   The vertical .ra-flow timeline is right where each step carries a paragraph.
   Here each step is four words, so stacked rows read as a sparse list with a
   ragged left edge. A horizontal track keeps the order legible and the three
   labels on one baseline. Numbers ride the track, copy hangs beneath it. */
.resilient-athlete .ra-prail {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin: 0; padding: 0; list-style: none;
  max-width: 900px; margin-inline: auto;
}
.resilient-athlete .ra-prail-step { position: relative; text-align: center; padding-top: 4px; }
/* Connector runs from the edge of this number to the edge of the next one. */
.resilient-athlete .ra-prail-step:not(:last-child)::after {
  content: "";
  position: absolute; top: 27px; height: 2px; border-radius: 2px;
  left: calc(50% + 32px); width: calc(100% - 64px + 26px);
  background: linear-gradient(90deg, rgba(12, 113, 195, .30), rgba(12, 113, 195, .12));
}
.resilient-athlete .ra-prail-n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-family: var(--ra-display); font-weight: 700; font-size: 18px;
  color: #fff; background: linear-gradient(150deg, #1C8AE0, var(--ra-blue));
  box-shadow: 0 8px 18px rgba(12, 113, 195, .26);
  /* Ring separates the number from the track passing behind it. */
  outline: 6px solid #fff;
}
/* The last phase is the destination, so it lands on the accent. */
.resilient-athlete .ra-prail-step:last-child .ra-prail-n {
  background: linear-gradient(150deg, #FF9A47, var(--ra-orange));
  box-shadow: 0 8px 18px rgba(255, 128, 31, .28);
}
.resilient-athlete .ra-prail-step h3 {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 17px; letter-spacing: -.008em;
  margin: 16px 0 7px;
}
.resilient-athlete .ra-prail-step p {
  font-size: 14.5px; line-height: 1.6; color: var(--ra-muted);
  /* No ch cap. At this column width all three blurbs sit on one line, and a
     cap only forced the longer two to wrap while the first stayed single. */
  margin-inline: auto;
}
/* On a soft background the number ring has to match it, not white. */
.resilient-athlete .ra-section.is-soft .ra-prail-n { outline-color: var(--ra-soft, #F6F8FB); }

/* Three across only while the columns stay wide enough to keep each blurb on
   one line. Narrower than this and one wraps while the others do not, which is
   the ragged look we removed from the vertical version. */
@media (max-width: 900px) {
  .resilient-athlete .ra-prail {
    grid-template-columns: 1fr; gap: 0;
    max-width: none; margin-inline: 0;
  }
  .resilient-athlete .ra-prail-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    text-align: left; padding: 0 0 24px;
  }
  .resilient-athlete .ra-prail-step:last-child { padding-bottom: 0; }
  /* Badge spans both rows so the spine below it has a fixed anchor. */
  .resilient-athlete .ra-prail-n {
    grid-column: 1; grid-row: 1 / span 2;
    align-self: start;
    width: 40px; height: 40px; font-size: 16px;
    outline: 0;
  }
  /* Optical centring against the badge, then the blurb sits straight under. */
  .resilient-athlete .ra-prail-step h3 { grid-column: 2; grid-row: 1; margin: 9px 0 4px; font-size: 16px; }
  .resilient-athlete .ra-prail-step p  { grid-column: 2; grid-row: 2; margin: 0; max-width: none; }
  /* Continuous spine, badge bottom to next badge top. No floating stub. */
  .resilient-athlete .ra-prail-step:not(:last-child)::after {
    top: 46px; bottom: -6px; height: auto; width: 2px;
    left: 19px; right: auto;
    background: linear-gradient(180deg, rgba(12, 113, 195, .28), rgba(12, 113, 195, .10));
  }
}

/* --------------------------------------------------------------------------
   Heading levels changed without changing the look
   Where a heading moves level — the method name becoming the h1, the hero line
   becoming the h2, a section label becoming a paragraph — .ra-hero-title and
   .ra-head-line are added to the EXISTING selectors above rather than given
   rules of their own. That is what keeps "same sizing/style" true: the compact
   hero, the home hero and the animation all still apply. A separate copy of
   those declarations would be a copy that drifts.

   Left here is only what a heading tag brings with it that a span or paragraph
   did not — the browser's own margins and size.
   -------------------------------------------------------------------------- */
/* A heading tag used only to set the document level, never to style anything.
   It has to add NOTHING of its own — not the heading reset's line-height or
   text-wrap, not the browser's size, weight or margins — because the element
   inside it was styled as a span and has to keep rendering as one. Overriding
   the differences property by property means finding them all first; inheriting
   means there are none. */
.resilient-athlete h1.ra-level-only,
.resilient-athlete h2.ra-level-only,
.resilient-athlete .ra-hero h1.ra-level-only,
.resilient-athlete .ra-hero h2.ra-level-only {
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: inherit;
  text-wrap: inherit;
  /* Zero, and it has to out-rank the hero rules to stay zero:
     .ra-hero.is-compact h1 is (0,3,1) and sets margin-bottom: 26px, which beat
     a plain h1.ra-level-only at (0,2,1). The hero selectors above are listed
     again here purely to match that weight. */
  margin: 0 0 0 0;
}
.resilient-athlete h2.ra-hero-title,
.resilient-athlete p.ra-head-line { margin-top: 0; }

/* The h1 as a plain sentence just above the call to action. Not the eyebrow:
   that is a small uppercase label, and this is a line meant to be read. Sized
   between the lede and the hero title so it leads into the button. */
.resilient-athlete .ra-hero-claim {
  display: block;
  color: #fff;
  font-family: var(--ra-display);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.005em;
  max-width: 62ch;
  margin-bottom: 22px;
}

/* The eyebrow sits tighter to the title when it is the h1 above it: it reads as
   one unit with the heading rather than as a label with its own space. */
.resilient-athlete .ra-level-only .ra-eyebrow { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Notice band
   One line under a hero, stating plainly what the page is. Full bleed so it
   reads as a band between sections rather than as content inside one.
   White on this blue is a 4.6:1 contrast ratio, so the text stays legible at
   the smaller size it drops to on a phone.
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-notice {
  background: rgb(28, 138, 224);
  padding: 16px 0;
}
/* Heading or paragraph, identical treatment. It is an h2 for document
   structure; text-wrap is reset because the base heading rule balances lines
   and that would re-break this sentence differently. */
.resilient-athlete .ra-notice p,
.resilient-athlete .ra-notice h2 {
  margin: 0;
  color: #fff;
  font-family: var(--ra-display);
  font-weight: 600;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.45;
  text-align: center;
  text-wrap: wrap;
}
@media (max-width: 575.98px) {
  .resilient-athlete .ra-notice { padding: 13px 0; }
  .resilient-athlete .ra-notice p,
  .resilient-athlete .ra-notice h2 { font-size: 14.5px; text-align: left; }
}

/* --------------------------------------------------------------------------
   FAQs
   Same accordion as the sport lists (.ra-sport) rather than a second one — the
   behaviour and the look are identical, so only the wrapper and the few things
   an answer needs that a one-line sport note did not are defined here.
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-faqs { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.resilient-athlete .ra-sport-body p { margin: 0 0 12px; }
.resilient-athlete .ra-sport-body p:last-child { margin-bottom: 0; }
.resilient-athlete .ra-faq-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ra-blue); font-weight: 600; text-decoration: none;
}
.resilient-athlete .ra-faq-link:hover { text-decoration: underline; }
.resilient-athlete .ra-faq-link .bi { font-size: 13px; }

/* The line under the closing button: reassurance, not a second call to act. */
.resilient-athlete .ra-closenote {
  margin-top: 14px; font-size: 14.5px; color: var(--ra-body); text-align: center;
}

/* --------------------------------------------------------------------------
   Inline drill video
   The drill pages embed the video rather than opening it in a modal: an iframe
   that is actually in the markup is the only kind Google can index, and the
   VideoObject schema on the page has to be describing something real.
   -------------------------------------------------------------------------- */
.resilient-athlete .ra-videoframe {
  position: relative;
  /* Matches .ra-exblock, so the player lines up with the text column beneath it
     instead of running the full width of the wrap and dwarfing the page. */
  max-width: var(--ra-video);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #0B1B27;
  box-shadow: var(--ra-sh-md);
}
.resilient-athlete .ra-videoframe iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Fallback for browsers without aspect-ratio. */
@supports not (aspect-ratio: 16 / 9) {
  .resilient-athlete .ra-videoframe { height: 0; padding-bottom: 56.25%; }
}
.resilient-athlete .ra-videocue {
  /* Same column as the player above it. Without this the cue spans the full
     is-wide wrap and runs well past the edges of the video. */
  max-width: var(--ra-video);
  margin-inline: auto;
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ra-body);
  text-align: center;
}
.resilient-athlete .ra-videocue strong { color: var(--ra-ink); font-weight: 600; }

/* ==========================================================================
   Coming soon pages (course, podcast)
   ========================================================================== */

/* Status pill under the hero title, so the page reads as deliberate rather
   than unfinished. */
.resilient-athlete .ra-soonflag {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 22px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 128, 31, .14);
  border: 1px solid rgba(255, 128, 31, .34);
  color: var(--ra-orange);
  font-family: var(--ra-display);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.resilient-athlete .ra-soonflag .bi { font-size: 13px; }

/* Wait list capture. */
.resilient-athlete .ra-waitlist {
  max-width: 680px; margin: 0 auto; text-align: center;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-sh-sm);
  padding: 40px 36px;
}
.resilient-athlete .ra-waitlist h2 { font-size: 27px; margin-bottom: 10px; }
.resilient-athlete .ra-waitlist > p {
  color: var(--ra-muted); font-size: 15.5px; line-height: 1.65;
  max-width: 46ch; margin: 0 auto 24px;
}
.resilient-athlete .ra-waitlist-form {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.resilient-athlete .ra-waitlist-form input[type="email"] {
  flex: 1 1 280px; min-width: 0; max-width: 340px;
  padding: 14px 16px;
  font-family: inherit; font-size: 15px; color: var(--ra-ink);
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.resilient-athlete .ra-waitlist-form input[type="email"]::placeholder { color: #9AABB8; }
.resilient-athlete .ra-waitlist-form input[type="email"]:focus {
  outline: none;
  border-color: var(--ra-blue);
  box-shadow: 0 0 0 3px rgba(12, 113, 195, .16);
}
/* The button sizes to its own content here, not the flex line. */
.resilient-athlete .ra-waitlist-form .ra-btn { flex: 0 0 auto; }

.resilient-athlete .ra-waitlist-note {
  margin: 16px 0 0;
  color: var(--ra-muted); font-size: 12.5px; font-style: italic;
}

/* Label kept for screen readers where the placeholder carries the visible cue. */
.resilient-athlete .ra-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 620px) {
  .resilient-athlete .ra-waitlist { padding: 30px 22px; }
  .resilient-athlete .ra-waitlist-form { flex-direction: column; align-items: center; }
  /* Once the row becomes a column, flex-basis controls HEIGHT, so the 280px
     basis from the desktop rule stretched the field into a tall box. Reset it
     and size the field by width instead. */
  .resilient-athlete .ra-waitlist-form input[type="email"] {
    flex: 0 0 auto;
    width: 100%; max-width: none;
  }
  /* Button keeps its own width rather than stretching edge to edge. */
  .resilient-athlete .ra-waitlist-form .ra-btn { align-self: center; }
}

/* ==========================================================================
   Review flag — NOT FOR PUBLIC RELEASE
   Renders an unresolved editorial note from the source doc straight onto the
   page, loudly, so it cannot be missed in review and cannot be mistaken for
   design. Any page showing one of these is not ready to be published.
   ========================================================================== */
.resilient-athlete .ra-reviewflag {
  max-width: 880px;
  margin: 0 auto 28px;
  padding: 18px 22px;
  background: #FFF1F0;
  border: 2px dashed #C0392B;
  border-radius: 10px;
  color: #A32B1C;
  font-size: 15px;
  line-height: 1.55;
}
.resilient-athlete .ra-reviewflag strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ra-display);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #C0392B;
}
.resilient-athlete .ra-reviewflag code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #E8C4BF;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: #C0392B;
  word-break: break-word;
}

/* ==========================================================================
   Blog hub
   Follows the supplied hub design rather than the shared RA card components:
   left aligned section heads, plain region tiles with no body icon, and
   pillars carrying a kicker and an orange top rule.
   ========================================================================== */

/* Section heads run left here, not centred like the rest of the site. */
.resilient-athlete .ra-bloghead { text-align: left; max-width: 62ch; margin-bottom: 28px; }
.resilient-athlete .ra-bloghead .ra-eyebrow { justify-content: flex-start; }
.resilient-athlete .ra-bloghead .ra-eyebrow::before,
.resilient-athlete .ra-bloghead .ra-eyebrow::after { display: none; }
.resilient-athlete .ra-bloghead h2 { margin-bottom: 8px; }
.resilient-athlete .ra-bloghead p { margin: 0; color: var(--ra-body); font-size: 16.5px; }

/* Hero title: the h1 is the visible headline on this page. */
.resilient-athlete .ra-bloghero-title {
  color: #fff;
  font-family: var(--ra-display); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06; letter-spacing: -.02em;
  max-width: 20ch; margin: 0 0 16px;
}

/* --- Region grid --------------------------------------------------------- */
.resilient-athlete .ra-regiongrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px;
}
.resilient-athlete .ra-region {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 22px;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.resilient-athlete .ra-region:hover {
  transform: translateY(-3px);
  box-shadow: var(--ra-sh-md);
  border-color: var(--ra-orange);
}
.resilient-athlete .ra-region h3 {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 18px; letter-spacing: -.008em; margin: 0;
}
.resilient-athlete .ra-region p { font-size: 14.5px; line-height: 1.55; color: var(--ra-muted); margin: 0; }
/* Count sits at the bottom whatever the blurb length, so the row lines up. */
.resilient-athlete .ra-region-count {
  margin-top: auto; padding-top: 12px;
  color: var(--ra-orange);
  font-family: var(--ra-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
}
.resilient-athlete .ra-region.is-soon { opacity: .65; }
.resilient-athlete .ra-region.is-soon .ra-region-count { color: var(--ra-muted); }
.resilient-athlete .ra-region.is-active { border-color: var(--ra-orange); box-shadow: var(--ra-sh-md); }

/* --- Pillars ------------------------------------------------------------- */
.resilient-athlete .ra-pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px;
}
.resilient-athlete .ra-pillar {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-top: 3px solid var(--ra-orange);
  border-radius: var(--ra-radius);
  padding: 24px;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.resilient-athlete .ra-pillar:hover { transform: translateY(-3px); box-shadow: var(--ra-sh-md); }
.resilient-athlete .ra-pillar-k {
  color: var(--ra-orange);
  font-family: var(--ra-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
}
.resilient-athlete .ra-pillar h3 {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 19px; letter-spacing: -.008em; margin: 0;
}
.resilient-athlete .ra-pillar p { font-size: 14.5px; line-height: 1.55; color: var(--ra-body); margin: 0; }
.resilient-athlete .ra-pillar-go {
  margin-top: auto; padding-top: 10px;
  color: var(--ra-blue);
  font-family: var(--ra-display); font-weight: 700; font-size: 13.5px;
}

/* --- Articles + sidebar -------------------------------------------------- */
.resilient-athlete .ra-blogsplit {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start;
}
.resilient-athlete .ra-blogmain { min-width: 0; }
.resilient-athlete .ra-blogmore { margin-top: 22px; }
.resilient-athlete .ra-clearfilter { color: var(--ra-blue); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.resilient-athlete .ra-clearfilter:hover { text-decoration: underline; }

.resilient-athlete .ra-postlist { display: flex; flex-direction: column; gap: 16px; }
.resilient-athlete .ra-post {
  display: block;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 22px 24px;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease;
}
.resilient-athlete .ra-post:hover { border-color: var(--ra-orange); }
.resilient-athlete .ra-post-cat {
  display: block; margin-bottom: 6px;
  color: var(--ra-orange);
  font-family: var(--ra-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
}
.resilient-athlete .ra-post h3 {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 19px; line-height: 1.3; letter-spacing: -.008em; margin: 0 0 6px;
}
.resilient-athlete .ra-post p { font-size: 15px; line-height: 1.6; color: var(--ra-body); margin: 0; }
.resilient-athlete .ra-post-meta { display: block; color: var(--ra-muted); font-size: 13px; margin-top: 6px; }

.resilient-athlete .ra-blogside {
  position: sticky; top: 124px;   /* clears the fixed navbar */
  display: flex; flex-direction: column; gap: 18px;
}
.resilient-athlete .ra-sidelabel {
  display: block; margin-bottom: 12px;
  font-family: var(--ra-display); font-weight: 700;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
}
.resilient-athlete .ra-sidebook {
  background: linear-gradient(160deg, #12456F, var(--ra-navy) 60%, var(--ra-navy-deep));
  border-radius: var(--ra-radius); padding: 24px 20px; text-align: center;
  box-shadow: var(--ra-sh-md);
}
.resilient-athlete .ra-sidebook .ra-sidelabel { color: #8FA9C0; }
.resilient-athlete .ra-sidebook-cover {
  width: 135px; height: auto; display: block; margin: 0 auto 16px;
  border-radius: 4px; box-shadow: 0 18px 34px rgba(0, 0, 0, .5);
}
.resilient-athlete .ra-sidebook h3 {
  color: #fff; font-family: var(--ra-display); font-weight: 700;
  font-size: 17px; line-height: 1.25; margin: 0 0 8px;
}
.resilient-athlete .ra-sidebook p { color: #BFD2E1; font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.resilient-athlete .ra-sidebook .ra-btn { width: 100%; justify-content: center; }

/* Deeper than the brand orange: white body copy on #FF801F is about 2.9:1. */
.resilient-athlete .ra-sideassess {
  background: linear-gradient(160deg, #E8710F, #C2510E);
  border-radius: var(--ra-radius); padding: 24px 20px; text-align: center;
  box-shadow: var(--ra-sh-md);
}
.resilient-athlete .ra-sideassess .ra-sidelabel { color: #FFD9C2; }
.resilient-athlete .ra-sideassess h3 {
  color: #fff; font-family: var(--ra-display); font-weight: 700;
  font-size: 18px; margin: 0 0 8px;
}
.resilient-athlete .ra-sideassess p { color: #FFF3EA; font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.resilient-athlete .ra-sideassess-btn {
  display: block; background: #fff; color: #C2510E;
  font-family: var(--ra-display); font-weight: 700; font-size: 15px;
  padding: 13px 16px; border-radius: 10px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.resilient-athlete .ra-sideassess-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .18); }

@media (max-width: 980px) {
  .resilient-athlete .ra-blogsplit { grid-template-columns: 1fr; gap: 38px; }
  .resilient-athlete .ra-blogside { position: static; flex-direction: row; flex-wrap: wrap; }
  .resilient-athlete .ra-blogside > * { flex: 1 1 280px; }
}
@media (max-width: 620px) {
  .resilient-athlete .ra-blogside { flex-direction: column; }
  .resilient-athlete .ra-post { padding: 20px; }
}

/* Pagination on a region's article list. */
.resilient-athlete .ra-pagination {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 26px;
}
.resilient-athlete .ra-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 9px;
  color: var(--ra-ink);
  font-family: var(--ra-display); font-weight: 600; font-size: 14.5px;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.resilient-athlete .ra-pagination .page-numbers:hover { border-color: var(--ra-orange); color: var(--ra-orange); }
.resilient-athlete .ra-pagination .page-numbers.current {
  background: var(--ra-blue); border-color: var(--ra-blue); color: #fff;
}
.resilient-athlete .ra-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* Breadcrumb in the region hero, matching the joint pages. */
.resilient-athlete .ra-bloghub .ra-hero-crumb { margin-bottom: 18px; }

/* Load more sits beside the archive link, both ghost buttons. */
.resilient-athlete .ra-blogmore { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.resilient-athlete .ra-loadmore.is-loading { opacity: .6; pointer-events: none; }

/* ==========================================================================
   Single Resilient Athlete article
   ========================================================================== */

.resilient-athlete.ra-post-single { background: #fff; }
/* Wider than the 960 in the design: with no card around the prose the column
   can carry more without the line length running away. */
.resilient-athlete .ra-wrap.is-article { max-width: 1100px; }

/* --- Ribbon -------------------------------------------------------------- */
/* Sits under the fixed navbar, so it needs the same clearance the heroes use. */
.resilient-athlete .ra-ribbon {
  background: linear-gradient(90deg, var(--ra-navy), var(--ra-navy-deep));
  color: #DCE6F0; font-size: 14px;
  padding: 12px 0; margin-top: var(--ra-navh);
}
.resilient-athlete .ra-ribbon .ra-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resilient-athlete .ra-ribbon-badge {
  background: var(--ra-orange); color: #fff;
  font-family: var(--ra-display); font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.resilient-athlete .ra-ribbon-crumb { color: #9FB4C9; font-size: 13.5px; display: flex; gap: 8px; flex-wrap: wrap; }
.resilient-athlete .ra-ribbon-crumb a { color: #CFDDEA; text-decoration: none; }
.resilient-athlete .ra-ribbon-crumb a:hover { color: #fff; text-decoration: underline; }
.resilient-athlete .ra-ribbon-link { margin-left: auto; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.resilient-athlete .ra-ribbon-link:hover { color: var(--ra-orange); }

/* --- Head ---------------------------------------------------------------- */
.resilient-athlete .ra-posthead { padding: 38px 0 6px; }
.resilient-athlete .ra-chips { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.resilient-athlete .ra-chip {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}
.resilient-athlete .ra-chip.is-cat { background: var(--ra-soft); color: var(--ra-navy); border: 1px solid var(--ra-line); }
.resilient-athlete .ra-chip.is-ra  { background: #FDEEE6; color: #C2510E; border: 1px solid #F6D3BF; }

.resilient-athlete .ra-posttitle {
  font-family: var(--ra-display); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.14; letter-spacing: -.02em;
  max-width: 30ch; margin: 0 0 22px;
}

.resilient-athlete .ra-byline {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--ra-line);
  border-bottom: 1px solid var(--ra-line);
}
.resilient-athlete .ra-avatar {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #FF9A47, var(--ra-orange));
  color: #fff; font-family: var(--ra-display); font-weight: 700; font-size: 17px;
}
.resilient-athlete .ra-avatar-img { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; }
.resilient-athlete .ra-avatar.is-big, .resilient-athlete .ra-avatar-img.is-big { width: 64px; height: 64px; font-size: 21px; }
.resilient-athlete .ra-byline-who { font-family: var(--ra-display); font-weight: 700; color: var(--ra-ink); }
.resilient-athlete .ra-byline-role { color: var(--ra-muted); font-size: 14px; }
.resilient-athlete .ra-byline-meta { margin-left: auto; color: var(--ra-muted); font-size: 13.5px; text-align: right; }

/* --- Article + sidebar --------------------------------------------------- */
.resilient-athlete .ra-postlayout {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  gap: 56px; padding: 36px 0 70px; align-items: start;
}
.resilient-athlete .ra-postbody { min-width: 0; font-size: 17px; line-height: 1.75; color: var(--ra-body); }
.resilient-athlete .ra-postbody > h2 {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 25px; line-height: 1.25; letter-spacing: -.015em;
  margin: 38px 0 14px;
  scroll-margin-top: 130px;   /* clears the fixed navbar when jumped to */
}
.resilient-athlete .ra-postbody > h2:first-child { margin-top: 0; }
.resilient-athlete .ra-postbody h3 {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 20px; margin: 26px 0 10px;
}
.resilient-athlete .ra-postbody p { margin: 0 0 18px; }
.resilient-athlete .ra-postbody ul,
.resilient-athlete .ra-postbody ol { margin: 0 0 18px; padding-left: 22px; }
.resilient-athlete .ra-postbody li { margin-bottom: 9px; }
.resilient-athlete .ra-postbody a { color: #C2510E; }
.resilient-athlete .ra-postbody img { max-width: 100%; height: auto; border-radius: var(--ra-radius); }

/* --- Contents ------------------------------------------------------------ */
.resilient-athlete .ra-postside { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 18px; }
.resilient-athlete .ra-toc {
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: var(--ra-radius);
  padding: 18px 20px;
}
.resilient-athlete .ra-toc-h {
  font-family: var(--ra-display); font-weight: 700;
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ra-muted); margin: 0 0 12px;
}
.resilient-athlete .ra-toc ol {
  list-style: none; margin: 0; padding: 0;
  counter-reset: ratoc;
  display: flex; flex-direction: column; gap: 9px;
  /* Capped hard: an 18 heading article would otherwise push the book advert
     clean off the screen, which is the one thing in this column that sells. */
  max-height: 22vh; overflow-y: auto;
  scrollbar-width: thin;
}
/* Readable size. The block is kept short by the height cap and its own
   scroll, not by shrinking the text. */
.resilient-athlete .ra-toc li { counter-increment: ratoc; font-size: 13.5px; line-height: 1.4; }
.resilient-athlete .ra-toc a { display: flex; gap: 8px; color: var(--ra-body); text-decoration: none; }
.resilient-athlete .ra-toc a::before { content: counter(ratoc); color: var(--ra-orange); font-weight: 700; flex: none; }
.resilient-athlete .ra-toc a:hover { color: #C2510E; }
.resilient-athlete .ra-toc li.is-active a { color: var(--ra-navy); font-weight: 700; }

/* --- Your next step ------------------------------------------------------ */
/* A dark panel rather than an outlined box: this is the moment the article
   hands over to the system, and it should read like the hero and the book
   blocks elsewhere in the section, not like a form fieldset. */
.resilient-athlete .ra-nextstep {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #12456F, var(--ra-navy) 58%, var(--ra-navy-deep));
  border-radius: 18px;
  padding: 34px 36px;
  margin: 44px 0 0;
  box-shadow: 0 24px 50px rgba(10, 32, 51, .22);
}
/* Soft light bloom, same device the RA heroes use. */
.resilient-athlete .ra-nextstep::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 300px at 88% -30%, rgba(255, 128, 31, .20), transparent 62%);
  pointer-events: none;
}
.resilient-athlete .ra-nextstep > * { position: relative; }
.resilient-athlete .ra-nextstep-k {
  display: block; margin-bottom: 10px;
  color: var(--ra-orange);
  font-family: var(--ra-display); font-weight: 700;
  font-size: 12px; letter-spacing: .11em; text-transform: uppercase;
}
.resilient-athlete .ra-nextstep h2 {
  color: #fff;
  font-family: var(--ra-display); font-weight: 700;
  font-size: 26px; line-height: 1.2; letter-spacing: -.018em;
  margin: 0 0 8px;
}
.resilient-athlete .ra-nextstep-sub {
  color: #BFD2E1; font-size: 16px; line-height: 1.6;
  margin: 0 0 24px; max-width: 54ch;
}
.resilient-athlete .ra-nextstep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.resilient-athlete .ra-f {
  display: grid; grid-template-columns: 42px 1fr auto;
  align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.resilient-athlete .ra-f:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}
.resilient-athlete .ra-f-ico {
  width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  color: #fff; font-size: 18px;
}
.resilient-athlete .ra-f-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resilient-athlete .ra-f-lbl {
  color: #fff; font-family: var(--ra-display); font-weight: 700;
  font-size: 15.5px; line-height: 1.3;
}
.resilient-athlete .ra-f-d { color: #A9C0D4; font-size: 13.5px; line-height: 1.45; }
.resilient-athlete .ra-f-go { color: #7E9BB5; font-size: 15px; transition: transform .2s ease, color .2s ease; }
.resilient-athlete .ra-f:hover .ra-f-go { color: #fff; transform: translateX(4px); }

/* The book is the one we actually want pressed, so it carries the accent. */
.resilient-athlete .ra-f.is-book {
  background: linear-gradient(150deg, #FF9A47, var(--ra-orange));
  border-color: transparent;
}
.resilient-athlete .ra-f.is-book:hover {
  background: linear-gradient(150deg, #FFA75C, #FF8A2E);
  transform: translateY(-2px);
}
.resilient-athlete .ra-f.is-book .ra-f-ico { background: rgba(255, 255, 255, .22); }
.resilient-athlete .ra-f.is-book .ra-f-d { color: #FFEADA; }
.resilient-athlete .ra-f.is-book .ra-f-go { color: #FFE2CC; }

/* --- Assessment ---------------------------------------------------------- */
/* Same shape as the panel above it so the two read as a pair, one navy and
   one accent, rather than two unrelated slabs. */
/* Two columns, not three. The icon used to be its own column and floated
   mid block beside a cramped heading, with dead space bottom right. */
.resilient-athlete .ra-assesscard {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #E8710F, #C2510E);
  border-radius: 18px;
  padding: 34px 38px;
  margin: 18px 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 32px;
  box-shadow: 0 24px 50px rgba(194, 81, 14, .22);
}
.resilient-athlete .ra-assesscard::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 260px at 90% -40%, rgba(255, 255, 255, .18), transparent 62%);
  pointer-events: none;
}
.resilient-athlete .ra-assesscard > * { position: relative; }

.resilient-athlete .ra-assesscard-txt { min-width: 0; }
.resilient-athlete .ra-assesscard-k {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
  color: #FFD9C2;
  font-family: var(--ra-display); font-weight: 700;
  font-size: 12px; letter-spacing: .11em; text-transform: uppercase;
}
.resilient-athlete .ra-assesscard-k .bi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, .2); color: #fff; font-size: 13px;
}
.resilient-athlete .ra-assesscard h2 {
  color: #fff; font-family: var(--ra-display); font-weight: 700;
  font-size: 25px; line-height: 1.22; margin: 0 0 9px;
  max-width: 34ch; letter-spacing: -.018em;
}
.resilient-athlete .ra-assesscard p {
  color: #FFF1E6; font-size: 15px; line-height: 1.55; margin: 0; max-width: 52ch;
}
.resilient-athlete .ra-assesscard-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; color: #C2510E;
  font-family: var(--ra-display); font-weight: 700; font-size: 15.5px;
  padding: 15px 26px; border-radius: 11px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.resilient-athlete .ra-assesscard-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0, 0, 0, .2); }

/* --- Author -------------------------------------------------------------- */
/* A white card. The old soft grey matched the page tint exactly, so the block
   had no edges at all. */
.resilient-athlete .ra-authorbio {
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 16px;
  box-shadow: var(--ra-sh-sm);
  padding: 28px 30px;
  margin: 34px 0 0;
  display: grid; grid-template-columns: 74px 1fr;
  gap: 22px; align-items: start;
}
.resilient-athlete .ra-authorbio .ra-avatar-img.is-big,
.resilient-athlete .ra-authorbio .ra-avatar.is-big {
  width: 74px; height: 74px;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(10, 32, 51, .16);
}
.resilient-athlete .ra-authorbio-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
}
.resilient-athlete .ra-authorbio h3 {
  font-family: var(--ra-display); font-weight: 700; font-size: 19px; margin: 0;
}
.resilient-athlete .ra-authorbio-role {
  color: #C2510E; font-family: var(--ra-display); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px;
}
.resilient-athlete .ra-authorbio p { font-size: 15px; line-height: 1.65; margin: 0; color: var(--ra-body); }

@media (max-width: 720px) {
  .resilient-athlete .ra-nextstep, .resilient-athlete .ra-assesscard { padding: 26px 22px; }
  .resilient-athlete .ra-assesscard { grid-template-columns: 1fr; gap: 16px; }
  .resilient-athlete .ra-assesscard-btn { justify-content: center; }
  .resilient-athlete .ra-authorbio { grid-template-columns: 1fr; }
}

/* --- Author + related ---------------------------------------------------- */
.resilient-athlete .ra-related { border-top: 1px solid var(--ra-line); padding-top: 28px; margin-top: 36px; }
.resilient-athlete .ra-related h3 { font-family: var(--ra-display); font-weight: 700; font-size: 20px; margin: 0 0 16px; }
.resilient-athlete .ra-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.resilient-athlete .ra-related a {
  display: block; padding: 13px 15px;
  background: #fff; border: 1px solid var(--ra-line); border-radius: 9px;
  color: var(--ra-navy); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: border-color .18s ease;
}
.resilient-athlete .ra-related a:hover { border-color: var(--ra-orange); }

@media (max-width: 900px) {
  /* Contents moves above the article, where it is actually useful on a phone. */
  .resilient-athlete .ra-postlayout { grid-template-columns: 1fr; gap: 32px; }
  .resilient-athlete .ra-postside { position: static; order: -1; }
  .resilient-athlete .ra-toc ol { max-height: none; }
  .resilient-athlete .ra-nextstep-grid,
  .resilient-athlete .ra-related ul { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .resilient-athlete .ra-byline-meta { display: none; }
  .resilient-athlete .ra-nextstep, .resilient-athlete .ra-assesscard { padding: 22px; }
  .resilient-athlete .ra-authorbio { flex-direction: column; }
}

/* --- Single article: navbar and page background --------------------------- */
/*
 * The navbar is fixed, near transparent, with white links, because every other
 * Resilient Athlete page puts a dark hero underneath it. An article has no
 * hero, so the links were white on white.
 *
 * Solved the way the theme already solves it for FAQs, T&Cs, 404 and team
 * pages: translucent white with blur and dark links.
 *
 * Literal colours, not var(--ra-*): those tokens are declared on
 * .resilient-athlete, and these rules sit on <body>, which is outside it.
 */
body.single-post.resilient-athlete-page .main-navbar {
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.single-post.resilient-athlete-page .main-navbar .nav-item.non-button a {
  color: #101C26 !important;
}
body.single-post.resilient-athlete-page .main-navbar .nav-item.non-button a:hover,
body.single-post.resilient-athlete-page .main-navbar .nav-item.non-button a.active {
  color: #FF801F !important;
}
body.single-post.resilient-athlete-page .main-navbar .navbar-toggler { color: #101C26; }

/* A soft tint so the page is not flat white. The article sits straight on it,
   no card: the reading column is the page, not a panel within it.

   Scoped to <main>, not <body>: tinting the body puts the colour behind the
   footer as well, which has no background of its own. */
.resilient-athlete.ra-post-single { background: #F6F9FC; }

/* The contents box and the blocks under the article carry the white, so they
   lift off the tint without boxing the prose. */
.resilient-athlete .ra-toc { background: #fff; }

/* Sidebar book advert: smaller on an article than on the blog hub, so the
   contents list and the advert both fit the viewport together. */
.resilient-athlete.ra-post-single .ra-sidebook { padding: 18px 16px; }
.resilient-athlete.ra-post-single .ra-sidebook-cover { width: 92px; margin-bottom: 11px; }
.resilient-athlete.ra-post-single .ra-sidebook h3 { font-size: 15px; line-height: 1.25; margin-bottom: 6px; }
.resilient-athlete.ra-post-single .ra-sidebook p { font-size: 12px; line-height: 1.45; margin-bottom: 11px; }
.resilient-athlete.ra-post-single .ra-sidebook .ra-btn { padding: 11px 16px; font-size: 14px; }
.resilient-athlete.ra-post-single .ra-sidelabel { font-size: 10px; margin-bottom: 9px; }

/* --- Author card refinements --------------------------------------------- */
.resilient-athlete .ra-authorbio-k {
  display: block; margin-bottom: 6px;
  color: var(--ra-muted);
  font-family: var(--ra-display); font-weight: 700;
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
}
/* Circular, not a rounded square. The border was squaring off the corners. */
.resilient-athlete .ra-authorbio .ra-avatar-img.is-big,
.resilient-athlete .ra-authorbio .ra-avatar.is-big {
  border-radius: 50%;
  object-fit: cover;
}
.resilient-athlete .ra-authorbio-more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px;
  color: var(--ra-blue);
  font-family: var(--ra-display); font-weight: 700; font-size: 14.5px;
  text-decoration: none;
}
.resilient-athlete .ra-authorbio-more:hover { color: var(--ra-orange); }
.resilient-athlete .ra-authorbio-more .bi { font-size: 13px; transition: transform .2s ease; }
.resilient-athlete .ra-authorbio-more:hover .bi { transform: translateX(4px); }

/* The active contents entry needs to read at a glance once the list scrolls. */
.resilient-athlete .ra-toc li {
  border-left: 2px solid transparent;
  padding-left: 10px;
  margin-left: -12px;
  transition: border-color .2s ease;
}
.resilient-athlete .ra-toc li.is-active { border-left-color: var(--ra-orange); }
.resilient-athlete .ra-toc li.is-active a { color: var(--ra-ink); font-weight: 700; }

/* Sidebar advert on an article: no label, and sized so the description holds
   two lines in a 290px column. */
.resilient-athlete.ra-post-single .ra-sidebook h3 { font-size: 14px; line-height: 1.25; margin-bottom: 7px; }
.resilient-athlete.ra-post-single .ra-sidebook p { font-size: 11px; line-height: 1.5; margin-bottom: 12px; letter-spacing: -.005em; }