/* ==========================================================================
   RAIA page components.

   Built on the extracted Government of Rwanda design system in main.css.
   Tokens, type scale and primitives are untouched; this file adds only the
   page-level patterns the site needs: header, page headers, content grids,
   cards, tables, tabs, opportunity cards, forms and accordions.

   Rules inherited from main.css:
     hairlines, never shadows; square corners everywhere; headings at 500;
     #00a1de is a fill that carries #001b3d text; #003f82 is the only blue
     safe as small text on white.
   ========================================================================== */

/* --------------------------------------------------------------- header
   Transparent over the hero, solid after scroll. Ported from the reference
   .rw-header block. */
.raia-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  background: transparent;
  transition: background 0.45s var(--rw-ease-soft), border-color 0.45s var(--rw-ease-soft);
  border-bottom: 1px solid transparent;
}

.raia-header.is-solid {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rw-line);
}

.raia-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 0;
  height: var(--rw-header-h);
}

/* Logo lockup: RAIA's own hook mark and two lines. The mark and the wordmark
   are the agency's identity and are NOT part of the ported design system;
   only the two header states (white over the hero, ink on the solid bar)
   come from the reference. */
.raia-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
  text-decoration: none;
}
.raia-brand__mark { display: block; width: 26px; height: 38px; flex: none; }

.raia-brand__word { display: grid; line-height: 1.18; min-width: 0; }
.raia-brand__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rw-white);
}
.raia-brand__by {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.raia-header.is-solid .raia-brand__name { color: var(--rw-ink); }
.raia-header.is-solid .raia-brand__by { color: var(--rw-gray); }

/* nav: the animated underline is the only hover cue */
.raia-nav { display: flex; align-items: stretch; gap: 0.25rem; }

/* wp_nav_menu output: container false, menu_class raia-nav__list */
.raia-nav__list {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.raia-nav__list li { display: flex; margin: 0; padding: 0; }

.raia-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;   /* normalize anchors (inherit 1.72) vs buttons (normal) */
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.raia-header.is-solid .raia-nav__link { color: var(--rw-ink-soft); }

.raia-nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.25rem;
  height: 1px;
  background: var(--rw-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--rw-ease);
}
/* the hover underline is the only hover cue, so it must clear 3:1 on white */
.raia-header.is-solid .raia-nav__link::after { background: var(--rw-blue-deep); }
.raia-nav__link:hover::after,
.raia-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.raia-nav__link--ext svg {
  display: block;
  width: 9px; height: 9px;
  opacity: 0.6;
  transition: transform 0.35s var(--rw-ease);
}
.raia-nav__link--ext:hover svg { transform: translate(1px, -1px); }

/* header actions: language switcher and the ghost CTA */
.raia-header__actions { display: flex; align-items: center; gap: 1rem; }

/* header actions: the CTA. The language switcher is deliberately absent,
   the site is English only. */

/* the header CTA is a ghost button that inverts to ink once the header is solid */
.raia-header__cta {
  flex: none;
  --btn-bg: transparent;
  --btn-fg: var(--rw-white);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.raia-header.is-solid .raia-header__cta {
  --btn-fg: var(--rw-ink);
  color: var(--rw-ink);
  border-color: rgba(0, 27, 61, 0.32);
}
.raia-header.is-solid .raia-header__cta:hover {
  color: var(--rw-blue-ink);
  border-color: var(--rw-blue-ink);
}

/* burger: three rules that fold into a cross */
.raia-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.raia-burger span {
  display: block; height: 1.5px;
  background: var(--rw-white);
  transition: transform 0.4s var(--rw-ease), opacity 0.3s, background 0.3s;
}
.raia-header.is-solid .raia-burger span { background: var(--rw-ink); }
.raia-burger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.raia-burger.is-active span:nth-child(2) { opacity: 0; }
.raia-burger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* the drawer covers the viewport, so the page must not scroll behind it */
body.raia-drawer-open { overflow: hidden; }

/* drawer: full-viewport panel */
.raia-drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--rw-white);
  padding: calc(var(--rw-header-h) + 2rem) var(--rw-pad) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity 0.45s var(--rw-ease-soft), transform 0.45s var(--rw-ease-soft), visibility 0s 0.45s;
}
.raia-drawer.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
.raia-drawer__list { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.raia-drawer__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--rw-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rw-line);
}
.raia-drawer__list a:hover { color: var(--rw-blue-deep); }
.raia-drawer .raia-btn { margin-top: 2rem; width: 100%; justify-content: center; }

/* the hero is a full-bleed stage, so main carries no top offset: the page
   header band reserves the header height itself, as the reference does */
.raia-main { padding-top: 0; }

@media (max-width: 1024px) {
  .raia-nav, .raia-header__actions { display: none; }
  .raia-burger { display: flex; }
}

/* Very narrow phones. The lockup is mark + two lines of type, and the second
   line carries heavy uppercase tracking, so at 280 to 360px its min-content
   width pushes the whole header row past the viewport and creates a
   horizontal scrollbar. Let the word column shrink and let the line wrap
   instead of forcing the row wider than the screen. */
@media (max-width: 420px) {
  .raia-header__inner { gap: 0.75rem; }
  /* .raia-brand is `flex: none` by default so the lockup keeps its shape on
     wide screens. On a 280px phone that refuses to shrink and pushes the row
     past the viewport. Let it shrink here only; the burger stays flex: none so
     its 44px tap target is never squeezed. */
  .raia-brand { gap: 0.6rem; min-width: 0; flex: 0 1 auto; }
  .raia-brand__word { min-width: 0; }
  .raia-brand__word > span { min-width: 0; }
  .raia-burger { flex: none; }
  .raia-brand__name {
    font-size: 1rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .raia-brand__by {
    letter-spacing: 0.06em;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Chips and status pills are nowrap by design so they read as single pills,
     but the long EOI labels ("Call for expression of interest", "Closed,
     evaluation under way") have a min-content width above a 280px column and
     drag the whole page into a horizontal scroll. Let them wrap only at the
     narrowest widths; the pill stays a single line everywhere else. */
  .raia-chip, .raia-status {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
}

/* Below 300px the lockup's min-content (mark + two tracked lines) still
   exceeds the column, so tighten the page gutter rather than distort the
   brand or shrink the 44px burger target. */
@media (max-width: 300px) {
  .raia-site { --rw-pad: 0.75rem; }
  .raia-header__inner { gap: 0.5rem; }
  .raia-brand { gap: 0.45rem; }
}

/* ----------------------------------------------------------------- hero
   Fixed 750px stage: full-bleed media under a three-layer scrim, content
   anchored to the bottom above the control bar. */
.raia-hero {
  position: relative;
  height: 750px;
  min-height: 720px;
  overflow: hidden;
  background: var(--rw-ink);
}
.raia-hero__media,
.raia-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.raia-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 12, 28, 0.78) 0%, rgba(0, 12, 28, 0.30) 14%, rgba(0, 12, 28, 0) 32%),
    linear-gradient(to top, rgba(0, 12, 28, 0.82) 0%, rgba(0, 12, 28, 0.25) 46%, rgba(0, 12, 28, 0.38) 100%),
    linear-gradient(to right, rgba(0, 12, 28, 0.5), transparent 62%);
}
.raia-hero__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  /* clearance above the control bar, matching the reference */
  padding-bottom: calc(4.75rem + 25px);
}
.raia-hero__content .raia-container {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
}
.raia-hero__headline { max-width: 15ch; }
.raia-hero__sub {
  max-width: 44rem;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.raia-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
/* the reference's tuned CTA: a tall button carrying a large arrow glyph */
.raia-hero__ctas .raia-btn { height: 141px; padding: 1.25rem 1.75rem; }
.raia-hero__ctas .raia-btn svg { height: 6.5rem; width: auto; flex: none; }

/* hero control bar */
.raia-hero__bar {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 12, 28, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.raia-hero__bar-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.5rem;
  height: clamp(3.75rem, 6.5vh, 4.5rem);
}
.raia-hero__captions {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  overflow: hidden;
  min-width: 0;
}
.raia-hero__cap {
  display: grid;
  gap: 0.15rem;
  opacity: 0.38;
  transition: opacity 0.5s var(--rw-ease-soft);
  /* A caption is ONE label string. Long labels wrap onto a second line
     rather than clipping out of the `overflow: hidden` captions rail. */
  white-space: normal;
  min-width: 0;
}
.raia-hero__cap.is-active { opacity: 1; }
.raia-hero__cap b {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rw-white);
}
.raia-hero__cap span {
  font-size: 0.6875rem; letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
}
.raia-hero__counter {
  display: flex; align-items: center;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  gap: 0.3rem;
}
.raia-hero__counter b { color: var(--rw-white); font-weight: 700; }

/* scroll cue */
.raia-hero__cue {
  position: absolute;
  z-index: 4;
  right: var(--rw-pad);
  bottom: clamp(5.5rem, 12vh, 8.5rem);
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.raia-hero__cue::after {
  content: "";
  width: 1px; height: 3.25rem;
  background: linear-gradient(rgba(255,255,255,0.6), transparent);
  animation: raia-cue 2.2s var(--rw-ease-soft) infinite;
}
@keyframes raia-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Hero carousel: a track of full-bleed slides beneath the shared headline,
   driven from the control bar. Ported from the reference's hero stage. */
.raia-hero__track {
  display: flex;
  height: 100%;
  transition: transform 1.05s var(--rw-ease);
  will-change: transform;
}
.raia-hero.is-animating .raia-hero__track { transition: transform 1.05s var(--rw-ease); }
.raia-hero:not(.is-animating) .raia-hero__track { transition: none; }
.raia-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.raia-hero__slide .raia-hero__media {
  transform: scale(1.08);
  transition: transform 6.5s linear;
}
.raia-hero__slide.is-active .raia-hero__media { transform: scale(1); }

/* progress segments ride the top edge of the control bar */
.raia-hero__progress {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; top: -1px;
  display: flex;
  gap: 3px;
  height: 2px;
}
.raia-hero__seg {
  flex: 1;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
}
.raia-hero__seg i {
  position: absolute; inset: 0;
  background: var(--rw-blue);
  transform: scaleX(0);
  transform-origin: left;
}
.raia-hero.is-playing .raia-hero__seg.is-active i {
  animation: raia-seg var(--raia-dwell, 8s) linear forwards;
}
@keyframes raia-seg {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.raia-hero__nav { display: flex; align-items: stretch; }
.raia-hero__arrow {
  width: clamp(3.25rem, 5vw, 4.25rem);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--rw-white);
  cursor: pointer;
  transition: background 180ms;
}
.raia-hero__arrow:hover { background: rgba(255, 255, 255, 0.08); }
.raia-hero__arrow svg { width: 16px; height: 16px; }
.raia-hero__cap { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .raia-hero__track { transition: none; }
  .raia-hero__slide .raia-hero__media { transition: none; transform: none; }
  .raia-hero__seg i { animation: none; }
}

/* Hero at tablet and below. Ported rule for rule from the reference
   (Site-Draft 2 main.css:2216-2221 and the 720px block at 2224-2267, plus its
   caption and cue lines at 1814-1823). Without this block the caption clips
   mid-word inside an 86px rail, the CTA arrow flex-stretches to ~150px and
   wraps its label, and the scroll cue collides with the CTAs. */
@media (max-width: 1024px) {
  .raia-hero__counter { flex: none; white-space: nowrap; }
  .raia-hero__cap { display: none; }
  .raia-hero__cap.is-active { display: grid; }
}

@media (max-width: 720px) {
  .raia-hero {
    height: auto;
    /* 660px mobile floor: keeps the hero substantial while letting the
       bottom-pinned bar kill the dead space below the CTAs */
    min-height: 660px;
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  .raia-hero__track { position: absolute; inset: 0; }   /* media layer fills the grown hero */
  .raia-hero__content {
    position: relative;
    inset: auto;
    /* +50px above the heading: it sat too close to the header */
    padding-top: calc(var(--rw-header-h) + 0.25rem + 50px + env(safe-area-inset-top, 0px));
    padding-bottom: 2rem;
  }
  .raia-hero__content .raia-container { gap: 1.25rem; }
  .raia-hero .raia-hero__headline { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  /* full-width CTAs collapse the wrapped label to one line and stop the row
     stretching both buttons to the tallest sibling */
  .raia-hero__ctas { width: 100%; gap: 0.6rem; }
  .raia-hero__ctas .raia-btn {
    flex: 1 1 100%; justify-content: space-between;
    padding: 0.9rem 1.25rem;
    height: auto;   /* the desktop 141px fixed height must not inflate the stacked mobile CTAs */
  }
  /* the arrow SVG has no intrinsic size; unconstrained it flex-stretches to
     ~172px and inflates every CTA to ~200px tall.
     pde-waive: audit-TCH -- user-request: reproduce the Site-Draft 2 design
     system exactly, which sets 1.15rem at main.css:2251. The 18.4px glyph is
     aria-hidden decoration inside a full-width anchor, so the touch target is
     the button and clears 24px. */
  .raia-hero__ctas .raia-btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
  .raia-hero__bar { position: relative; margin-top: auto; }
  .raia-hero__bar-inner {
    height: auto;
    min-height: 3.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block: 0.6rem;
  }
  /* the reference carries these two captions rules in two 720px blocks
     (1814-1815 and 2260-2263); the later `span { display: block }` wins, so the
     net computed behaviour is what is written here */
  .raia-hero__captions { flex: 1 1 100%; order: 1; overflow: visible; gap: 1.25rem; }
  .raia-hero__cap { display: none; white-space: normal; }
  .raia-hero__cap.is-active { display: grid; }
  .raia-hero__cap span { display: block; }
  .raia-hero__counter { order: 2; flex: none; white-space: nowrap; }
  .raia-hero__nav { order: 3; margin-left: auto; }
  /* bar-inner is auto-height here, so the arrows no longer stretch - keep them
     square and above the 24px tap minimum */
  .raia-hero__arrow { min-height: 3.25rem; }
  .raia-hero__cue { display: none; }
}

/* -------------------------------------------------------- split + figure */
.raia-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.raia-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.raia-split--reverse > :first-child { order: 2; }

/* The head column carries its photograph beneath the heading. That column
   used to hold the eyebrow and title and then nothing, which is what made
   every internal section read as a wall of text with a gap beside it. */
.raia-split > .raia-stack > .raia-figure { margin-top: 0.75rem; }
.raia-section--ink .raia-figure img { border-color: var(--rw-line-dark); }
.raia-section--ink .raia-figure figcaption { color: rgba(255, 255, 255, 0.55); }
@media (max-width: 900px) {
  .raia-split,
  .raia-split--even { grid-template-columns: 1fr; }
  .raia-split--reverse > :first-child { order: 0; }
}

.raia-stack { display: grid; gap: 1rem; align-content: start; }
.raia-stack--wide { gap: 1.5rem; }

.raia-figure { margin: 0; display: grid; gap: 0.6rem; }
.raia-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--rw-line);
}
.raia-figure figcaption {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rw-gray);
}

/* ----------------------------------------------------------------- media */
.raia-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--rw-mist);
  border: 1px solid var(--rw-line);
  overflow: hidden;
}
.raia-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.raia-media__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--rw-mist);
}
.raia-media__play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.raia-media__play span {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  background-color: var(--rw-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M0 0 L12 7 L0 14 Z' fill='%23003f82'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.15rem center;
  background-size: 12px 14px;
  border: 1px solid var(--rw-line);
  color: var(--rw-ink);
  padding: 0.85rem 1.15rem 0.85rem 2.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.raia-media__play:hover span { border-color: var(--rw-blue-deep); }
.raia-caption {
  font-size: 0.8125rem;
  color: var(--rw-gray);
  margin-top: 0.6rem;
}

/* ------------------------------------------------------- page header band
   Follows the reference .rw-page-hero: paper ground, and it reserves the
   fixed header height itself. No breadcrumb trail here, the pages carry
   none, so the heading opens the band. */
.raia-phead {
  position: relative;
  padding-top: calc(var(--rw-header-h) + clamp(3.5rem, 8vh, 6.5rem));
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
  background: var(--rw-paper);
  border-bottom: 1px solid var(--rw-line);
}
.raia-phead__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
  max-width: none;
}
/* the text occupies the left column, the photograph the right, laid out
   explicitly so the image can span both text rows */
.raia-phead__inner .raia-h1 { grid-area: 1 / 1 / 2 / 2; }
.raia-phead__inner .raia-lead { grid-area: 2 / 1 / 3 / 2; }
.raia-phead__media {
  grid-area: 1 / 2 / 3 / 3;
  position: relative;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
}
.raia-phead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85);
  transition: transform 1.6s var(--rw-ease);
}
.raia-phead__media:hover img { transform: scale(1.045); }
.raia-phead .raia-h1 { max-width: 20ch; }
.raia-phead .raia-lead {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--rw-ink-soft);
  margin: clamp(1.25rem, 2.5vh, 1.75rem) 0 0;
}

/* a page that starts with an ordinary section has to clear the fixed header
   itself; the hero and the page header band already do */
.raia-main > .raia-section:first-child {
  padding-top: calc(var(--rw-header-h) + var(--rw-sec));
}

/* ------------------------------------------------------- numbered tiles */
.raia-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rw-line);
  border-left: 1px solid var(--rw-line);
}
.raia-tile {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-right: 1px solid var(--rw-line);
  border-bottom: 1px solid var(--rw-line);
  background: var(--rw-white);
  color: inherit;
  text-decoration: none;
  transition: background 0.5s var(--rw-ease-soft);
}
a.raia-tile:hover { background: var(--rw-paper); }
a.raia-tile:hover .raia-tile__title { color: var(--rw-blue-deep); }
.raia-tile__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--rw-blue-deep);
  font-variant-numeric: tabular-nums;
}
.raia-tile__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--rw-ink);
  margin: 0;
  transition: color 0.3s;
}
.raia-tile p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--rw-body); }
@media (max-width: 900px) { .raia-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .raia-tiles { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- journey */
/* "How we create value" chevron diagram. The six SVG chevrons are copied
   verbatim from the source markup, including their fills, strokes and
   labels; this block only lays them out, exactly as the source does. */
.raia-journey {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.raia-journey li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* overflow: visible because the chevron paths sit exactly on the viewBox
   edge and the outer svg clips by default, which would cut the stroke in
   half along the top and bottom of every block. */
.raia-journey svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.raia-journey p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--rw-body);
  padding-right: 18px;
}

/* Ambient interaction: the gradient sweeps the chevrons in order, one through
   six, then repeats every ten seconds. Each block carries its own clipped
   overlay in the SVG, so the sweep stays inside the arrow shape and never
   washes the label. The sweep itself takes 0.9s (9% of the cycle); the rest
   is the pause before the next block. */
.raia-jsweep {
  transform: translateX(-200px);
  animation: raia-sweep 10s var(--rw-ease) infinite;
}
.raia-journey li:nth-child(2) .raia-jsweep { animation-delay: calc(10s * 1 / 6); }
.raia-journey li:nth-child(3) .raia-jsweep { animation-delay: calc(10s * 2 / 6); }
.raia-journey li:nth-child(4) .raia-jsweep { animation-delay: calc(10s * 3 / 6); }
.raia-journey li:nth-child(5) .raia-jsweep { animation-delay: calc(10s * 4 / 6); }
.raia-journey li:nth-child(6) .raia-jsweep { animation-delay: calc(10s * 5 / 6); }
@keyframes raia-sweep {
  0%   { transform: translateX(-200px); }
  9%   { transform: translateX(200px); }
  100% { transform: translateX(200px); }
}
@media (prefers-reduced-motion: reduce) {
  .raia-jsweep { animation: none; }
}
@media (max-width: 980px) {
  .raia-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 560px) {
  .raia-journey { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------- colour band */
.raia-band {
  background: var(--rw-blue);
  color: var(--rw-blue-ink);
}
/* the pattern panel runs the full height of the band: the row stretches, and
   the vertical padding lives on the copy column so the panel reaches the
   section edges, exactly as the source builds it */
.raia-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
  padding-block: 0;
}
.raia-band__inner > .raia-stack {
  padding-block: clamp(3.5rem, 8vh, 6.5rem);
}
/* the band heading is white over the band's blue; the eyebrow and lede keep
   the navy the rest of the band uses */
.raia-band .raia-h2 { color: var(--rw-white); }
.raia-band .raia-label { color: var(--rw-blue-ink); }
.raia-band .raia-label::before { background: var(--rw-blue-ink); }
.raia-band .raia-lead { color: var(--rw-blue-ink); }
/* Catalogue band panel: a photograph filling the right column, full height. */
.raia-band__aside {
  position: relative;
  overflow: hidden;
}
.raia-band__aside img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .raia-band__inner { grid-template-columns: 1fr; }
  .raia-band__aside { min-height: 7rem; }
}

.raia-sectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.75rem;
  max-width: 40rem;
}
.raia-sectors a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--rw-white);
  color: var(--rw-ink);
  padding: 0.9rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.3s, color 0.3s;
}
.raia-sectors a::after { content: "\2197"; color: var(--rw-blue-deep); }
.raia-sectors a:hover { background: var(--rw-blue-ink); color: var(--rw-white); }
.raia-sectors a:hover::after { color: var(--rw-blue); }
@media (max-width: 560px) { .raia-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -------------------------------------------------------------- tag row */
.raia-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.raia-tags a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.65rem 1rem 0.65rem 2.2rem;
  background-color: var(--rw-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0 L9 4.5 L4.5 9 L0 4.5 Z' fill='%23003f82'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 9px 9px;
  border: 1px solid var(--rw-line);
  color: var(--rw-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s;
}
.raia-tags a:hover { border-color: var(--rw-ink); }

/* --------------------------------------------------------------- cta band
   Ported from the reference's .rw-journey: full-bleed photography under a
   navy scrim, white headline, and a white button carrying the large arrow. */
.raia-cta {
  position: relative;
  overflow: hidden;
  background: var(--rw-ink);
}
.raia-cta__bg {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
}
.raia-cta__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.35) brightness(0.55) contrast(1.05);
}
.raia-cta__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0, 12, 28, 0.9), rgba(0, 12, 28, 0.55));
}
.raia-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  padding-block: 100px;
}
.raia-cta .raia-h2 { color: var(--rw-white); max-width: 44rem; }
.raia-cta__ask {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
/* same button treatment as the hero CTAs: a tall white block with the
   large arrow, so the label wraps inside it the way the reference does */
.raia-cta__inner .raia-btn { height: 141px; padding: 1.25rem 1.75rem; }
.raia-cta__inner .raia-btn svg { height: 6.5rem; width: auto; flex: none; }

/* --------------------------------------------------------------- lists */
.raia-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.raia-list--single { grid-template-columns: minmax(0, 1fr); }
.raia-list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--rw-body);
}
.raia-list li::before {
  content: "";
  width: 10px; height: 10px;
  margin-top: 0.45rem;
  background: var(--rw-blue-deep);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.raia-list b {
  display: block;
  color: var(--rw-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) { .raia-list { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- timeline
   Emulated from the source timeline: a 2px rail, rotated square markers,
   a fixed 150px date column set in mono, and the entry stacking at 600px.

   pde-waive: side-accent-border -- user-request: emulate the timeline in
   _raia_source.html, whose spine is drawn at 2px (border-left: 2px solid
   #dcdddb). The rail is a neutral hairline spine, not a coloured accent. */
.raia-timeline {
  list-style: none;
  margin: 0 0 0 6px;
  padding: 0;
  border-left: 2px solid #dcdddb;
}
.raia-timeline li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  padding: 0 0 32px 28px;
  position: relative;
}
.raia-timeline li::before {
  content: "";
  position: absolute;
  left: -9px; top: 5px;
  width: 16px; height: 16px;
  background: var(--rw-white);
  border: 3px solid #6b7380;
  transform: rotate(45deg);
  box-sizing: border-box;
  transition: border-color 240ms var(--rw-ease), background-color 240ms var(--rw-ease);
}
.raia-timeline li.is-now::before {
  border-color: #4199ff;
  background: #4199ff;
}
.raia-timeline time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: #6b7380;
  padding-top: 2px;
}
.raia-timeline b {
  font-size: 19px;
  display: block;
  margin-bottom: 4px;
}
.raia-timeline p { margin: 0; font-size: 16px; color: #4a5361; }
@media (max-width: 600px) {
  .raia-timeline li { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------------------- tables */
.raia-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rw-line);
}
.raia-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--rw-white);
}
.raia-table th,
.raia-table td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--rw-line);
}
.raia-table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rw-gray);
  background: var(--rw-paper);
}
.raia-table tr:last-child td { border-bottom: 0; }
.raia-table td b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rw-ink);
  margin-bottom: 0.2rem;
}
.raia-table td span { color: var(--rw-body); }
.raia-table td:first-child { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- cards */
.raia-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.raia-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raia-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  background: var(--rw-white);
  border: 1px solid var(--rw-line);
  border-top: 3px solid var(--rw-blue);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.raia-card h3, .raia-card h4 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rw-ink);
  margin: 0;
}
.raia-card p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--rw-body); }
.raia-card .raia-card__k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--rw-blue-deep);
}
@media (max-width: 1080px) { .raia-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .raia-cards,
  .raia-cards--3 { grid-template-columns: 1fr; }
}

/* numbered step row (3 or 4 steps) */
.raia-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  counter-reset: st;
  margin: 0;
  padding: 0;
}
.raia-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raia-steps li {
  counter-increment: st;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  border-top: 3px solid var(--rw-line);
  padding: 1.25rem 1.5rem 0 0;
  transition: border-color 240ms var(--rw-ease);
}
/* the blue rule belongs to whichever step carries is-current; the first step
   carries it in the markup as the resting state, so no fallback rule can
   outrank the walker when it comes back round to step one */
.raia-steps li.is-current { border-top-color: var(--rw-blue); }
.raia-steps li::before {
  content: "Step " counter(st);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rw-blue-deep);
}
.raia-steps--4 li::before { content: "0" counter(st); }
.raia-steps h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--rw-ink);
  margin: 0;
}
.raia-steps p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--rw-body); }
@media (max-width: 720px) {
  .raia-steps,
  .raia-steps--4 { grid-template-columns: 1fr; row-gap: 1.5rem; }
}

/* ------------------------------------------------------- note / callout */
.raia-note {
  background: var(--rw-blue-mist);
  border: 1px solid var(--rw-line);
  border-top: 3px solid var(--rw-blue);
  padding: 1.15rem 1.35rem;
  display: grid;
  gap: 0.5rem;
}
.raia-note h4 { color: var(--rw-ink); margin: 0; font-size: 1rem; font-weight: 600; }
.raia-note p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--rw-body); }
.raia-note code {
  /* the reference never switches to a monospace face */
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--rw-white);
  border: 1px solid var(--rw-line);
  padding: 0.5rem 0.65rem;
  display: block;
  word-break: break-word;
  color: var(--rw-ink);
}
.raia-note--plain { background: var(--rw-paper); border-top-color: var(--rw-gray-soft); }

/* --------------------------------------------------------- tabs (audience) */
.raia-tabs {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.raia-tablist { display: grid; gap: 0.4rem; }
.raia-tablist button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  text-align: left;
  font: 600 1rem/1.3 var(--rw-font);
  padding: 0.85rem 1rem;
  border: 1px solid var(--rw-line);
  background: var(--rw-white);
  color: var(--rw-ink);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.raia-tablist button::after { content: "\2192"; opacity: 0; }
.raia-tablist button:hover { border-color: var(--rw-blue-deep); }
.raia-tablist button[aria-selected="true"] {
  background: var(--rw-ink);
  border-color: var(--rw-ink);
  color: var(--rw-white);
}
.raia-tablist button[aria-selected="true"]::after { opacity: 1; }
.raia-tabpanel {
  background: var(--rw-white);
  border: 1px solid var(--rw-line);
  border-top: 4px solid var(--rw-blue);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.15rem;
  min-height: 100%;
}
.raia-tabpanel[hidden] { display: none; }
.raia-tabpanel h3 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rw-ink);
  margin: 0;
}
/* Link pairs. The base rule lays two text links out side by side with a real
   gap, which the class implies; tab panels keep their established tighter
   spacing through the more specific rule below. */
.raia-actions { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.raia-tabpanel .raia-actions { display: flex; flex-wrap: wrap; gap: 1.15rem; align-items: center; }
@media (max-width: 900px) {
  .raia-tabs { grid-template-columns: 1fr; }
  .raia-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
}
@media (max-width: 560px) { .raia-tablist { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- filters */
.raia-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.raia-filters button {
  min-height: 40px;
  font: 600 0.875rem/1 var(--rw-font);
  padding: 0.6rem 1rem;
  border: 1px solid var(--rw-line);
  background: var(--rw-white);
  color: var(--rw-ink-soft);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.raia-filters button:hover { border-color: var(--rw-blue-deep); color: var(--rw-blue-deep); }
.raia-filters button[aria-pressed="true"] {
  background: var(--rw-ink);
  border-color: var(--rw-ink);
  color: var(--rw-white);
}

/* ----------------------------------------------------------- chips/status */
.raia-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--rw-gray);
}
/* Chip construction matches the reference .rw-atlas__chip and
   .rw-partner-card__chips span exactly. */
.raia-chip {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rw-ink-soft);
  background: var(--rw-paper);
  border: 1px solid var(--rw-line);
  padding: 0.38rem 0.65rem;
  white-space: nowrap;
}
.raia-chip--sample {
  background: transparent;
  border-color: var(--rw-gray-soft);
  color: var(--rw-gray);
}
.raia-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.38rem 0.65rem;
  border: 1px solid var(--rw-line);
  background: var(--rw-white);
  color: var(--rw-ink-soft);
  white-space: nowrap;
}
.raia-status::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: currentColor;
}
/* States use palette values only. The active state follows the reference's
   .rw-atlas__chip.is-on: ink ground, white text. */
.raia-status--open { background: var(--rw-ink); border-color: var(--rw-ink); color: var(--rw-white); }
.raia-status--closed { background: var(--rw-mist); color: var(--rw-ink-soft); }
.raia-status--soon { background: var(--rw-blue-mist); color: var(--rw-ink-soft); }

/* ------------------------------------------------------- opportunity list */
/* minmax(0, 1fr) everywhere a track holds card content: a bare `1fr` is
   minmax(auto, 1fr), and the auto minimum lets min-content push the track
   past the viewport on narrow screens. That is what overflowed /opportunities/
   at 280px and 320px. */
.raia-opps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
.raia-opp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  gap: 1.5rem;
  min-width: 0;
  background: var(--rw-white);
  border: 1px solid var(--rw-line);
  padding: 1.35rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s;
}
.raia-opp > * { min-width: 0; }
a.raia-opp:hover { border-color: var(--rw-blue); }
a.raia-opp:hover h3 { color: var(--rw-blue-deep); }
.raia-opp h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rw-ink);
  margin: 0.6rem 0 0.4rem;
  transition: color 0.25s;
}
.raia-opp p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--rw-body); }
.raia-opp__when {
  border-left: 1px solid var(--rw-line);
  padding-left: 1.25rem;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  font-size: 0.8125rem;
  color: var(--rw-gray);
}
.raia-opp__when b {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--rw-ink);
  font-variant-numeric: tabular-nums;
}
.raia-opp__when .raia-cta-t { color: var(--rw-blue-deep); font-weight: 700; margin-top: 0.4rem; }
.raia-opp--sample { border-style: dashed; }
.raia-opp[hidden] { display: none; }
@media (max-width: 720px) {
  .raia-opp { grid-template-columns: minmax(0, 1fr); }
  .raia-opp__when {
    border-left: 0;
    border-top: 1px solid var(--rw-line);
    padding: 0.9rem 0 0;
    min-width: 0;
  }
}

/* ------------------------------------------------- detail + sticky facts */
.raia-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.raia-detail__main { display: grid; gap: 3rem; min-width: 0; }
.raia-detail__main section { display: grid; gap: 0.9rem; }
.raia-detail__main h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--rw-ink);
  margin: 0;
}
.raia-facts {
  position: sticky;
  top: calc(var(--rw-header-h) + 1.5rem);
  background: var(--rw-paper);
  border: 1px solid var(--rw-line);
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}
.raia-facts dl { margin: 0; display: grid; gap: 0.85rem; }
.raia-facts dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rw-gray);
}
.raia-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rw-ink);
  word-break: break-word;
}
/* F-04, carried over from the reference (main.css:2270): a standalone link in a
   facts row is 19px tall, under the 24px hit-area minimum. inline-block lets the
   padding add height without disturbing the surrounding text. */
.raia-facts dd a {
  display: inline-block;
  padding-block: 0.25rem;
}
.raia-facts .raia-btn { justify-content: center; }
@media (max-width: 900px) {
  .raia-detail { grid-template-columns: 1fr; }
  .raia-facts { position: static; }
}

/* --------------------------------------------------------- stat blocks */
.raia-stats3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.raia-stats3 > div {
  border-top: 3px solid var(--rw-blue);
  padding-top: 0.7rem;
  display: grid;
  gap: 0.3rem;
}
.raia-stats3 b {
  /* the reference's own stat-value scale, so the numeral stays in vocabulary */
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rw-ink);
  font-variant-numeric: tabular-nums;
}
.raia-stats3 span { font-size: 0.875rem; line-height: 1.45; color: var(--rw-body); }
@media (max-width: 640px) { .raia-stats3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- audience boxes */
.raia-users {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.raia-users > div {
  border: 1px solid var(--rw-line);
  padding: 1.15rem;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.raia-users small {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rw-blue-deep);
}
.raia-users h4 { font-size: 1.0625rem; font-weight: 600; color: var(--rw-ink); margin: 0; }
.raia-users p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--rw-body); }
@media (max-width: 800px) { .raia-users { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- yes / no */
.raia-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.raia-two > div { padding: 1.15rem; display: grid; gap: 0.6rem; align-content: start; }
/* Tints come from the palette's neutral set; the heading colour carries the
   signal. #20603d and #b3452e are both sanctioned as text in the reference. */
.raia-two .raia-yes { background: var(--rw-blue-mist); }
.raia-two .raia-no { background: var(--rw-mist); }
.raia-two .raia-yes h4 { color: var(--gov-green-2); }
.raia-two .raia-no h4 { color: #b3452e; }
.raia-two h4 { font-size: 1rem; font-weight: 700; color: var(--rw-ink); margin: 0; }
.raia-two ul { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.4rem; font-size: 0.9375rem; color: var(--rw-body); }
@media (max-width: 640px) { .raia-two { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- checks */
/* Marker construction matches the reference .rw-checklist exactly: a 7px
   filled --rw-blue glyph rotating square, circle and triangle. */
.raia-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.raia-checklist li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rw-body);
}
.raia-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px; height: 7px;
  background: var(--rw-blue);
}
.raia-checklist li:nth-child(3n)::before { border-radius: 50%; }
.raia-checklist li:nth-child(3n+1)::before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 8px; height: 7px;
  top: 0.66em;
}
/* the mandatory item is marked typographically, not with a new visual system */
.raia-checklist li.is-required {
  font-weight: 600;
  color: var(--rw-ink);
}

/* --------------------------------------------------------------- posts */
.raia-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.raia-post {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  border-top: 1px solid var(--rw-ink);
  padding-top: 1rem;
}
.raia-post time {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--rw-gray);
  font-variant-numeric: tabular-nums;
}
.raia-post h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--rw-ink);
  margin: 0;
}
.raia-post p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--rw-body); }
@media (max-width: 860px) { .raia-posts { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- faq */
.raia-faq { display: grid; }
.raia-faq details { border-bottom: 1px solid var(--rw-line); }
.raia-faq details:first-of-type { border-top: 1px solid var(--rw-line); }
.raia-faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1.15rem 2.75rem 1.15rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rw-ink);
}
.raia-faq summary::-webkit-details-marker { display: none; }
.raia-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 0.9rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--rw-blue-deep);
}
.raia-faq details[open] summary::after { content: "\2212"; }
.raia-faq details p {
  margin: 0;
  padding: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--rw-body);
  max-width: 68ch;
}
.raia-faq summary:hover { color: var(--rw-blue-deep); }

/* --------------------------------------------------------------- forms */
.raia-formcard {
  background: var(--rw-white);
  border: 1px solid var(--rw-line);
  padding: clamp(1.35rem, 3vw, 2rem);
}
.raia-formgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.raia-formgrid > div {
  background: var(--rw-white);
  border: 1px solid var(--rw-line);
  padding: 1.15rem;
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.raia-formgrid small {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rw-blue-deep);
  font-variant-numeric: tabular-nums;
}
.raia-formgrid h4 { font-size: 1.0625rem; font-weight: 600; color: var(--rw-ink); margin: 0; }
.raia-formgrid p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--rw-body); }
@media (max-width: 900px) { .raia-formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .raia-formgrid { grid-template-columns: 1fr; } }

/* Built like the reference .rw-success panel: hairline border, paper ground. */
.raia-ok {
  display: none;
  border: 1px solid var(--rw-line);
  background: var(--rw-paper);
  color: var(--rw-ink);
  padding: 0.9rem 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* An embedded third-party form. The frame carries its own height and
   scrolls internally, with a hairline so it reads as a panel rather than
   a hole in the page. */
.raia-embed {
  border: 1px solid var(--rw-line);
  background: var(--rw-white);
  overflow: hidden;
}
.raia-embed iframe {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
}

/* Form sections group related controls and carry a hairline heading, so a
   long form reads as six labelled parts rather than one wall of fields. */
.raia-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.raia-form legend {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rw-gray);
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--rw-line);
  margin-bottom: 0.5rem;
  width: 100%;
}

/* A question with fixed answers keeps the group label as its legend, so the
   question and its options are announced together. */
.raia-options {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.raia-options legend {
  border-bottom: 0;
  padding: 0;
  margin-bottom: 0.35rem;
}
.raia-options label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--rw-body);
}
.raia-options input {
  /* 24px: WCAG 2.5.8 minimum target */
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--rw-blue-deep);
}

/* Multi-part form. One part at a time with a stepper showing where you are;
   without scripting every part is present in sequence and the buttons hide. */
.raia-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
}
.raia-stepper li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.8125rem;
  color: var(--rw-gray);
}
.raia-stepper b {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rw-gray-soft);
}
.raia-stepper li.is-current,
.raia-stepper li.is-done { color: var(--rw-ink); }
.raia-stepper li.is-current b,
.raia-stepper li.is-done b { color: var(--rw-blue-deep); }
.raia-stepper li.is-current span {
  text-decoration: underline;
  text-decoration-color: var(--rw-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* author display values defeat the UA [hidden] rule - re-enforce it */
.raia-formstep[hidden], .raia-btn[hidden], .raia-hero__cue[hidden], .raia-ok[hidden] {
  display: none !important;
}

.raia-formnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.raia-form__alert {
  background: var(--rw-paper);
  border: 1px solid #b3452e;
  color: var(--rw-ink);
  padding: 0.9rem 1rem;
  font-size: 0.9375rem;
}
.raia-ok.is-visible { display: block; }

/* -------------------------------------------------------------- utility */
.raia-prose { max-width: 68ch; }
.raia-prose p { margin: 0 0 1rem; }
.raia-prose p:last-child { margin-bottom: 0; }
.raia-mt { margin-top: 1.75rem; }
.raia-mt-lg { margin-top: 3rem; }
.raia-center { text-align: center; }

/* ------------------------------------------------------ area rows (what)
   Ported from the source's .arow: a square pattern panel on the left, the
   four labelled fields on the right, hairline between rows. The fields are
   a two-column definition list with mono uppercase labels, which is what
   turns them from loose text into a finished block. */
.raia-section--row { padding-block: 0; }
.raia-arow {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(24px, 5vw, 64px);
  padding-block: 56px;
  border-bottom: 1px solid var(--rw-line);
  transition: background-color 180ms, opacity 320ms var(--rw-ease-soft), transform 320ms var(--rw-ease-soft);
}
.raia-arow--last { border-bottom: 0; }
.raia-arow__media {
  min-height: 220px;
  max-width: 100%;
  overflow: hidden;
}
.raia-arow__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}
.raia-arow dl {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px 20px;
  margin: 8px 0 0;
  font-size: 16px;
}
.raia-arow dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rw-gray);
  padding-top: 3px;
}
.raia-arow dd {
  margin: 0;
  color: var(--rw-body);
  transition: color 180ms;
}

/* hover: the row lifts off the page and the values sharpen */
.raia-arow:hover { background-color: var(--rw-paper); }
.raia-arow:hover dd { color: var(--rw-ink); }

/* entrance: rows rise into view as they arrive. Without scripting or with
   reduced motion they are simply present, never hidden. */
.raia-arow.is-hidden {
  opacity: 0;
  transform: translateY(18px);
}

@media (max-width: 900px) {
  .raia-arow { grid-template-columns: 1fr; }
  .raia-arow__media { min-height: 80px; }
  .raia-arow dl { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .raia-arow,
  .raia-arow dd { transition: none; }
  .raia-arow.is-hidden { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- 3D interaction
   Pointer-driven depth on the page's card and media surfaces. Perspective
   tilt on [data-tilt], parallax shift on [data-parallax]. transform and
   opacity only, on the sanctioned 180/240ms durations, and switched off
   entirely under reduced motion. No dependency, no runtime: this is CSS
   perspective plus one small pointer handler. */
[data-tilt] {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 240ms var(--rw-ease);
}
[data-tilt]:hover { transition-duration: 180ms; }

[data-parallax] {
  transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0) scale(1.02);
  transition: transform 320ms var(--rw-ease-soft);
}

@media (prefers-reduced-motion: reduce) {
  [data-tilt],
  [data-parallax] {
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .raia-reveal,
  .raia-tile,
  .raia-nav__link,
  .raia-tablist button,
  .raia-filters button { transition: none; }
}

/* ------------------------------------------------------------- six steps
   The process chart on How we work. Each step is a column carrying its
   ordinal, name and one-line summary above a single strong rule; selecting
   one reveals the detail beneath. The visual language is the reference's
   own: one heavy rule above each column, no cards, no boxes, no shadows and
   no radii. Interactivity lives in the state change and the panel, so the
   at-rest row is exactly the reference. */
.raia-process { display: grid; gap: 0; }

.raia-process__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.raia-process__slot { min-width: 0; }

.raia-process__tab {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 1.15rem 0 0.5rem;
  border: 0;
  border-top: 2px solid var(--rw-ink);
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.raia-process__num {
  font-size: 1.875rem;   /* 30px: the ordinal is the dominant cue in the rail */
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--rw-gray);
}
.raia-process__name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--rw-ink);
  transition: color 0.25s;
}
.raia-process__hint {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rw-body);
}

/* selection is carried by the rule and the name, never by a filled card */
.raia-process__tab:hover .raia-process__name,
.raia-process__tab:focus-visible .raia-process__name { color: var(--rw-blue-deep); }
.raia-process__tab[aria-selected="true"] {
  border-top-color: var(--rw-blue);
  border-top-width: 3px;
}
.raia-process__tab[aria-selected="true"] .raia-process__name { color: var(--rw-blue-deep); }
.raia-process__tab[aria-selected="true"] .raia-process__num { color: var(--rw-blue-deep); }
.raia-process__tab:focus-visible {
  outline: 2px solid var(--rw-blue-deep);
  outline-offset: 4px;
}

/* detail panel: the three fields the old table carried */
.raia-process__panels {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rw-line);
  padding-top: 1.75rem;
}
.raia-process__panel {
  display: grid;
  gap: 1.5rem;
  max-width: 64rem;
}
.raia-process__panel:focus-visible {
  outline: 2px solid var(--rw-blue-deep);
  outline-offset: 6px;
}
.raia-process__lead {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--rw-body);
}
.raia-process__lead b {
  font-weight: 600;
  color: var(--rw-ink);
}
.raia-process__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 3rem;
  margin: 0;
}
.raia-process__facts > div {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  min-width: 0;
}
.raia-process__facts dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rw-gray);
}
.raia-process__facts dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--rw-ink-soft);
}

/* until the behaviour attaches, every panel is present so nothing is lost */
.raia-process[data-ready] .raia-process__panel { display: none; }
.raia-process[data-ready] .raia-process__panel.is-on { display: grid; }

@media (max-width: 1024px) {
  .raia-process__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
}
@media (max-width: 620px) {
  .raia-process__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .raia-process__facts { grid-template-columns: minmax(0, 1fr); }
  .raia-process__lead { font-size: 1.125rem; }
}

/* ------------------------------------------------------------- principles
   The four rules on How we work, laid out horizontally with a display numeral
   on each. Same construction language as the process chart above it: one
   strong rule per column, no cards, no boxes, no radii. The numeral carries
   the sequence, so the list stays an ordered list. */
.raia-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
  margin: clamp(2.75rem, 5vw, 4.25rem) 0 0;
  padding: 0;
  list-style: none;
}
.raia-rules__item {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-width: 0;
  border-top: 2px solid var(--rw-ink);
  padding-top: 1.35rem;
}
.raia-rules__num {
  font-size: 4rem;          /* the big numeral the row is built around */
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rw-gray);
}
.raia-rules__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--rw-ink);
}
.raia-rules__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--rw-body);
}

@media (max-width: 1024px) {
  .raia-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; }
}
@media (max-width: 620px) {
  .raia-rules { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .raia-rules__num { font-size: 3.25rem; }
}

/* ------------------------------------------------- home section counters
   The __index slot on .raia-sec-head carries the 01 / 06 counter. On Home the
   head also appears inside a split column or the full-width band, where the
   surrounding layout already supplies the width and the spacing below, so
   those two constraints are released there only. */
.raia-split > .raia-sec-head,
.raia-band__inner > .raia-sec-head {
  margin-bottom: 0;
}
.raia-split > .raia-sec-head > .raia-sec-head__left,
.raia-band__inner > .raia-sec-head > .raia-sec-head__left {
  max-width: none;
}
.raia-sec-head__index {
  flex: none;
  /* The counter shares the eyebrow's line rather than sitting at the foot of
     the heading block. align-self scopes this to elements that actually carry
     an index, so sec-heads without one (about, opportunities, partner,
     work-with-us) keep the base alignment. The margin reset matters because
     home renders the counter as a <p>, which otherwise adds 1em above it. */
  align-self: flex-start;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Inside the catalogue band the copy column used to be a .raia-stack carrying
   the vertical padding that seats the text against a full-height panel. The
   head replaced that element, so the padding is restored here and the copy is
   centred in the stretched row instead of sitting at its foot. */
.raia-band__inner > .raia-sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: start;
  gap: 1.5rem 2rem;
  padding-block: clamp(3.5rem, 8vh, 6.5rem);
}
.raia-band__inner > .raia-sec-head > .raia-sec-head__index {
  align-self: start;
}
@media (max-width: 900px) {
  .raia-band__inner > .raia-sec-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
  }
}
/* Below 720px the shared rule stacks .raia-sec-head into a column, which would
   drop the counter under the heading. Pin it to the top-right instead so it
   keeps sharing the eyebrow's line at every width. */
@media (max-width: 720px) {
  .raia-sec-head {
    position: relative;
  }
  .raia-sec-head__index {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: right;
    max-width: 46%;
  }
  /* the band's copy column carries its own vertical padding, so the pinned
     counter has to start below it to land on the eyebrow's line */
  .raia-band__inner > .raia-sec-head > .raia-sec-head__index {
    top: clamp(3.5rem, 8vh, 6.5rem);
  }
}