/* ══════════════════════════════════════════════════════════════
   HLI — ROYAL REGISTER (LIGHT)
   Theme layer. Loads AFTER main.css and after each page's own
   <style> block, so it wins without needing !important everywhere.

   Direction: the navy-and-gold register used for the royal
   presentation decks, rebuilt on ivory instead of midnight.
   Ink is navy. Gold is a hairline, never a fill. Nothing is dark.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. TOKENS

   NOTE ON SPECIFICITY: every page carries its own inline <style>
   block in the body, which the browser reads AFTER this linked
   file. A plain :root here would lose to a page's :root. The
   repeated :root:root:root raises specificity to 0,3,0 so the
   theme wins wherever it is loaded from.
   ───────────────────────────────────────────── */
:root:root:root,
html body.dark-mode {
  /* Royal register — palette carried from the MISK/HLF proposal documents.
     Warm cream and ivory grounds, deep royal navy ink, burnished gold.
     Two golds are defined on purpose: the display gold is the document's
     #9C7A2E, which is correct at heading size but only reaches 3.9:1 on
     ivory. Anything at label or body size uses the darker --r-gold-text,
     which clears 4.5:1. */
  --r-ink:        #0B1F3A;   /* deep royal navy — headings            */
  --r-navy:       #14375C;   /* primary navy                          */
  --r-navy-deep:  #0B1F3A;
  --r-navy-mid:   #1C3A60;
  --r-blue:       #1D4E7C;
  --r-teal:       #14657F;   /* darkened from #1D7EA3 for legibility  */
  --r-green:      #2F7D3A;   /* darkened from #3B9044                 */

  --r-gold:       #9C7A2E;   /* display gold (proposal document)      */
  --r-gold-text:  #7E6020;   /* small text / labels — 5.6:1 on cream  */
  --r-gold-mid:   #C9A24B;
  --r-gold-lt:    #E7CE8E;
  --r-gold-wash:  #F6EEDB;
  --r-gold-tint:  #FBF5E7;

  --r-ivory:      #FBF8F1;   /* warm page ground                      */
  --r-parchment:  #F4ECDB;   /* cream alternate band                  */
  --r-sky:        #F6EEDB;   /* was cool blue — now warm ivory-gold   */
  --r-white:      #FFFFFF;
  --r-rule:       #DACDAE;   /* warm gold-grey hairline               */
  --r-rule-cool:  #E4DAC4;

  --r-body:       #2A3B4D;   /* body text                             */
  --r-muted:      #56656F;   /* muted — 6.0:1 on cream                */

  --r-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --r-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-shadow-sm: 0 1px 2px rgba(22,50,79,.05), 0 2px 8px rgba(22,50,79,.05);
  --r-shadow-md: 0 2px 6px rgba(22,50,79,.06), 0 12px 32px rgba(22,50,79,.08);
  --r-shadow-lg: 0 4px 12px rgba(22,50,79,.07), 0 24px 60px rgba(22,50,79,.11);

  /* ── Remap every legacy token the pages already use ── */
  --n:  var(--r-navy);      --b:  var(--r-blue);     --bd: var(--r-navy-deep);
  --t:  var(--r-teal);      --tl: #14657F;
  --g:  var(--r-green);     --gd: #245F2C;           --gl: #2F7D3A;
  --nd: var(--r-ivory);     --nm: var(--r-parchment);

  --tx1: var(--r-ink);      --tx2: var(--r-body);
  --tx3: var(--r-muted);    --tx4: #56656F;

  --bg0: var(--r-ivory);    --bg1: var(--r-parchment);
  --bgs: var(--r-sky);      --bgw: var(--r-white);

  --hli-crimson:       var(--r-navy);
  --hli-crimson-dark:  var(--r-navy-deep);
  --hli-crimson-light: var(--r-blue);
  --hli-gold:          var(--r-gold);
  --hli-gold-light:    var(--r-gold-mid);

  --bg-primary:   var(--r-ivory);
  --bg-secondary: var(--r-parchment);
  --bg-tertiary:  var(--r-sky);
  --bg-card:      var(--r-white);
  --bg-accent:    var(--r-gold-tint);

  --text-primary:   var(--r-ink);
  --text-secondary: var(--r-body);
  --text-muted:     var(--r-muted);

  --border-primary: var(--r-rule);
  --border-light:   var(--r-rule-cool);
  --border-accent:  var(--r-gold);

  --warn: #A8801F;

  --d1: var(--r-navy);  --d2: var(--r-blue);  --d3: var(--r-teal);
  --d4: #2C6E33;        --d5: var(--r-green);
}

/* The theme is light by design. Neutralise the legacy dark mode. */
body.dark-mode { background: var(--r-ivory); color: var(--r-ink); }

body { background: var(--r-ivory); color: var(--r-ink); }

/* ─────────────────────────────────────────────
   2. TYPE
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5,
.hv-h1, .hv-sh2, .ch-hero__h1, .io-h2, .mt-h2, .ab-h2,
.af-h2, .fw-h2, .gi-h2, .hw-h2 {
  font-family: var(--r-serif);
  color: var(--r-ink);
  letter-spacing: -.005em;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--r-gold); }

body, p, li, td, th, label, input, textarea, select, button {
  font-family: var(--r-sans);
}
p { color: var(--r-body); }

/* Eyebrow labels — gold, spaced, uppercase. Carried from the decks. */
.hv-eye, .ch-eye, .io-eye, .mt-eye, .ab-eye, .af-eye,
.fw-eye, .gi-eye, .hw-eye, .r-eye {
  font-family: var(--r-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--r-gold);
}
.hv-eye::before, .hv-eye::after,
.io-eye::before, .io-eye::after,
.ch-eye::before, .ch-eye::after,
.mt-eye::before, .mt-eye::after {
  background: var(--r-gold-lt) !important;
}

/* ─────────────────────────────────────────────
   3. THE SIGNATURE — Khatim eight-point star
   Used as the section medallion, the counter mark
   and the corner ornament. One motif, everywhere.
   ───────────────────────────────────────────── */
.r-star {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.12em;
  color: var(--r-gold);
}
.r-star svg { width: 100%; height: 100%; display: block; }

.r-medallion {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem;
  margin: 1.4rem 0;
}
.r-medallion::before, .r-medallion::after {
  content: ''; height: 1px; width: clamp(40px, 12vw, 120px);
}
.r-medallion::before { background: linear-gradient(90deg, transparent, var(--r-gold-lt)); }
.r-medallion::after  { background: linear-gradient(90deg, var(--r-gold-lt), transparent); }
.r-medallion--c { justify-content: center; }

/* Legacy ornaments inherit the gold hairline treatment */
.hv-orn__l, .ch-orn__l, .io-orn__l, .mt-orn__l {
  background: linear-gradient(90deg, transparent, var(--r-gold-lt)) !important;
}
.hv-orn__d, .ch-orn__d, .io-orn__d, .mt-orn__d {
  background: var(--r-gold) !important;
}

/* ─────────────────────────────────────────────
   4. BRIGHTENING — every formerly dark band
   Heroes, banners and CTAs across all nine pages.
   ───────────────────────────────────────────── */

/* Hero backdrops → ivory with a gold-tinted bloom */
.ab-hero__bg, .ch-hero__bg, .af-hero__bg, .fw-hero__bg,
.gi-hero__bg, .hw-hero__bg, .io-hero__bg, .mt-hero__bg,
.hv-hero__bg, .hv-vision__bg {
  background:
    radial-gradient(ellipse 70% 60% at 78% 12%, rgba(196,162,74,.16) 0%, transparent 62%),
    radial-gradient(ellipse 62% 58% at 12% 88%, rgba(29,126,163,.10) 0%, transparent 60%),
    linear-gradient(168deg, #FFFFFF 0%, var(--r-ivory) 44%, var(--r-parchment) 100%) !important;
}

/* Banner / CTA / feature bands → parchment with gold wash */
.ch-banner__bg, .af-banner__bg, .io-banner__bg,
.ch-response::before, .af-cta::before, .fw-flow::before,
.gi-trust::before, .gi-closing::before, .hw-pathways::before,
.io-society::before, .mt-dual::before, .mt-cta::before {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(196,162,74,.20) 0%, transparent 64%),
    linear-gradient(180deg, var(--r-gold-tint) 0%, var(--r-parchment) 100%) !important;
}

/* Those bands carried white type. Bring the ink back. */
.ch-banner, .af-banner, .io-banner, .ch-response, .af-cta, .fw-flow,
.gi-trust, .gi-closing, .hw-pathways, .io-society, .mt-dual, .mt-cta,
.ab-hero, .ch-hero, .af-hero, .fw-hero, .gi-hero, .hw-hero,
.io-hero, .mt-hero, .hv-vision {
  color: var(--r-ink);
}
.ch-banner *, .af-banner *, .io-banner *, .ch-response *, .af-cta *,
.fw-flow *, .gi-trust *, .gi-closing *, .hw-pathways *, .io-society *,
.mt-dual *, .mt-cta *, .ab-hero *, .ch-hero *, .af-hero *, .fw-hero *,
.gi-hero *, .hw-hero *, .io-hero *, .mt-hero *, .hv-vision * {
  text-shadow: none !important;
}

/* Anything that explicitly set white text inside those bands */
[class*="__h1"], [class*="__h2"], [class*="__h3"] {
  color: var(--r-ink);
}
.io-h2--soc, .io-h2--soc em { color: var(--r-ink); }
.io-h2--soc em { color: var(--r-gold); }
.io-eye--c, .hv-eye--c { color: var(--r-gold) !important; }
.io-eye--c::before, .io-eye--c::after {
  background: linear-gradient(90deg, transparent, var(--r-gold-lt)) !important;
}

/* Grain / ring overlays were tuned for dark. Soften them. */
[class$="__grain"] { opacity: .35 !important; mix-blend-mode: multiply; }
[class$="__rings"] > span,
[class$="__b1"], [class$="__b2"], [class$="__b3"] { opacity: .55 !important; }
[class$="__topglow"], [class$="__bloom"] { opacity: .4 !important; }

/* Cards on ivory: white face, gold hairline, navy top rule */
.hv-impact-card, .hv-d-card, .io-stu-card, .io-sch-card, .io-soc-card,
.ab-card, .af-card, .fw-domain, .gi-card, .hw-card, .mt-step__card,
.mt-domain-card, .ch-pillar {
  background: var(--r-white);
  border: 1px solid var(--r-rule);
  box-shadow: var(--r-shadow-sm);
}
.io-soc-card { color: var(--r-body); }
.io-soc-card h3, .io-soc-card .io-soc-card__h4 { color: var(--r-ink); }

/* Buttons */
.btn--primary, .hv-btn-p, .ch-btn-primary, .mt-btn-p, .io-btn-p,
.af-btn-p, .fw-btn-p, .gi-btn-p, .hw-btn-p, .ab-btn-p {
  background: var(--r-navy) !important;
  border: 1px solid var(--r-navy) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(27,79,114,.22) !important;
}
.btn--primary:hover, .hv-btn-p:hover, .ch-btn-primary:hover, .mt-btn-p:hover,
.io-btn-p:hover, .af-btn-p:hover, .fw-btn-p:hover, .gi-btn-p:hover,
.hw-btn-p:hover, .ab-btn-p:hover {
  background: var(--r-navy-deep) !important;
  border-color: var(--r-navy-deep) !important;
}
.btn--outline, .hv-btn-o, .ch-btn-outline, .mt-btn-o, .io-btn-o,
.af-btn-o, .fw-btn-o, .gi-btn-o, .hw-btn-o, .ab-btn-o, .hv-btn-ol {
  background: transparent !important;
  border: 1px solid var(--r-gold) !important;
  color: var(--r-navy) !important;
}
.btn--outline:hover, .hv-btn-o:hover, .ch-btn-outline:hover, .mt-btn-o:hover,
.io-btn-o:hover, .af-btn-o:hover, .fw-btn-o:hover, .gi-btn-o:hover,
.hw-btn-o:hover, .ab-btn-o:hover, .hv-btn-ol:hover {
  background: var(--r-gold-wash) !important;
  color: var(--r-navy-deep) !important;
  border-color: var(--r-gold) !important;
}

/* Nav + footer */
.scroll-progress { background: linear-gradient(90deg, var(--r-navy), var(--r-gold)) !important; }

/* ─────────────────────────────────────────────
   5. ANIMATED COUNTERS
   ───────────────────────────────────────────── */
.r-counters {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(196,162,74,.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--r-white) 0%, var(--r-gold-tint) 100%);
  border-top: 1px solid var(--r-rule);
  border-bottom: 1px solid var(--r-rule);
}
.r-counters__hd { text-align: center; max-width: 62ch; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); }
.r-counters__h2 {
  font-family: var(--r-serif);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600; line-height: 1.16; color: var(--r-ink);
  margin: .55rem 0 0;
}
.r-counters__h2 em { font-style: italic; color: var(--r-gold); }
.r-counters__sub { margin-top: .9rem; color: var(--r-body); font-size: 1rem; line-height: 1.65; }

.r-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--r-rule);
  border: 1px solid var(--r-rule);
  border-radius: 4px; overflow: hidden;
}
.r-stat {
  position: relative;
  background: var(--r-white);
  padding: clamp(1.7rem, 3vw, 2.5rem) clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.5rem, 2.6vw, 2.1rem);
  text-align: center;
  transition: background .3s ease;
}
.r-stat:hover { background: var(--r-gold-tint); }
.r-stat__mark {
  width: 20px; height: 20px; margin: 0 auto .9rem;
  color: var(--r-gold-lt);
}
.r-stat__mark svg { width: 100%; height: 100%; display: block; }
.r-stat__num {
  font-family: var(--r-serif);
  font-size: clamp(2.7rem, 5.4vw, 3.9rem);
  font-weight: 600; line-height: 1;
  color: var(--r-navy);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em;
}
.r-stat__num .r-pre, .r-stat__num .r-sfx {
  font-size: .52em; color: var(--r-gold); font-weight: 600;
  letter-spacing: 0; vertical-align: .34em;
}
.r-stat__rule {
  width: 34px; height: 2px; margin: .95rem auto .85rem;
  background: var(--r-gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .7s cubic-bezier(.16,1,.3,1) .18s;
}
.r-stat.is-on .r-stat__rule { transform: scaleX(1); }
.r-stat__label {
  font-family: var(--r-sans);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--r-ink);
}
.r-stat__desc {
  margin-top: .55rem;
  font-size: .84rem; line-height: 1.55; color: var(--r-muted);
}
.r-stat__src {
  display: block; margin-top: .7rem;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--r-gold); font-weight: 600;
}
.r-counters__note {
  margin: 1.6rem auto 0; max-width: 74ch; text-align: center;
  font-size: .78rem; line-height: 1.6; color: var(--r-muted);
}
.r-counters__note a { color: var(--r-navy); text-decoration: underline; text-underline-offset: 2px; }

/* ─────────────────────────────────────────────
   6. DOMAIN CARDS WITH HOVER BLURB
   ───────────────────────────────────────────── */
.r-domains { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--r-ivory); }
/* Five cards never tile evenly in an auto-fit grid: the browser lays out
   four then strands the fifth, leaving a wide empty band. Flex with centred
   wrapping keeps every row balanced at any width. */
.r-dom-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(.9rem, 1.6vw, 1.35rem);
}
/* A 260px basis forces three per row below the five-across breakpoint,
   so the wrap is 3+2 rather than 4+1 with a stranded, stretched card. */
.r-dom-grid > .r-dom {
  flex: 1 1 260px;
  min-width: 200px;
  max-width: 320px;
}
/* Five across only once there is genuinely room for five */
@media (min-width: 1260px) {
  .r-dom-grid > .r-dom { flex: 1 1 0; min-width: 0; max-width: none; }
}
.r-dom {
  position: relative; overflow: hidden;
  background: var(--r-white);
  border: 1px solid var(--r-rule);
  border-radius: 5px;
  display: flex; flex-direction: column;
  text-align: left;
  width: 100%; padding: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.16,1,.3,1),
              box-shadow .45s cubic-bezier(.16,1,.3,1),
              border-color .45s ease;
}
.r-dom:hover, .r-dom:focus-visible, .r-dom.is-open {
  transform: translateY(-5px);
  box-shadow: var(--r-shadow-md);
  border-color: var(--r-gold-lt);
}
.r-dom:focus-visible { outline: 2px solid var(--r-gold); outline-offset: 3px; }
.r-dom__bar { height: 3px; background: var(--dom, var(--r-navy)); }
.r-dom__fig { position: relative; overflow: hidden; background: var(--r-ivory); }
.r-dom__fig img { width: 100%; height: auto; display: block; }
.r-dom__n {
  position: absolute; top: .7rem; right: .8rem;
  font-family: var(--r-serif); font-size: 1.5rem; font-weight: 600;
  color: var(--r-gold); opacity: .75; line-height: 1;
}

.r-dom__body { padding: 1.15rem 1.25rem 1.35rem; }
.r-dom__h {
  font-family: var(--r-serif); font-size: 1.22rem; font-weight: 600;
  line-height: 1.22; color: var(--r-ink); margin: 0;
}
.r-dom__sub {
  display: block; margin-top: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dom, var(--r-navy));
}
.r-dom__cue {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .85rem;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--r-muted);
  transition: color .3s ease;
}
.r-dom:hover .r-dom__cue, .r-dom.is-open .r-dom__cue { color: var(--r-gold); }

/* The blurb panel */
.r-dom__blurb {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem 1.4rem;
  background: linear-gradient(165deg, rgba(252,250,245,.985), rgba(246,241,230,.985));
  border-top: 3px solid var(--dom, var(--r-navy));
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.16,1,.3,1), visibility .38s;
}
.r-dom:hover .r-dom__blurb,
.r-dom:focus-visible .r-dom__blurb,
.r-dom.is-open .r-dom__blurb {
  opacity: 1; visibility: visible; transform: none;
}
.r-dom__blurb-h {
  font-family: var(--r-serif); font-size: 1.05rem; font-weight: 600;
  color: var(--r-ink); margin: 0 0 .2rem;
}
.r-dom__blurb-k {
  font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--r-gold); margin-bottom: .6rem;
}
.r-dom__blurb-p {
  font-size: .86rem; line-height: 1.6; color: var(--r-body); margin: 0;
}
.r-dom__blurb-list {
  margin: .8rem 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--r-rule); padding-top: .7rem;
}
.r-dom__blurb-list li {
  position: relative; padding-left: .95rem;
  font-size: .78rem; line-height: 1.5; color: var(--r-muted);
  margin-bottom: .28rem;
}
.r-dom__blurb-list li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--r-gold);
}

/* ─────────────────────────────────────────────
   7. REVEAL
   ───────────────────────────────────────────── */
.r-rv { opacity: 0; transform: translateY(22px);
        transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.r-rv.is-on { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────
   8. ACCESSIBILITY + RESPONSIVE
   ───────────────────────────────────────────── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--r-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .r-rv { opacity: 1; transform: none; transition: none; }
  .r-stat__rule { transform: scaleX(1); transition: none; }
  .r-dom { transition: none; }
  .r-dom__blurb { transition: opacity .01ms; }
}

@media (max-width: 640px) {
  .r-dom__blurb { position: static; opacity: 1; visibility: visible; transform: none;
                  background: var(--r-gold-tint); border-top: 1px solid var(--r-rule); }
  .r-dom__cue { display: none; }
  .r-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .r-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   9. PAGE-SPECIFIC REPAIRS
   ───────────────────────────────────────────── */

/* Challenge hero: numerals go navy, sources sit under the label */
.ch-stat__n { color: var(--r-navy) !important; font-family: var(--r-serif);
              font-variant-numeric: tabular-nums lining-nums; }
.ch-stat--red .ch-stat__n,
.ch-stat--amber .ch-stat__n,
.ch-stat--teal .ch-stat__n { color: var(--r-navy) !important; }
.ch-stat__n em { color: var(--r-gold); }
.ch-stat__l { color: var(--r-body); }
.ch-stat__src {
  display: block; margin-top: .35rem;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--r-gold);
}

/* Impact tier strip: give the animated numerals room and weight */
.io-tier__n {
  font-family: var(--r-serif); color: var(--r-navy) !important;
  font-variant-numeric: tabular-nums lining-nums;
}
.io-tier__label, .io-tier__desc { color: var(--r-body) !important; }
.io-tier__ico { color: var(--r-gold) !important; border-color: var(--r-gold-lt) !important; }

/* Methodology step circles: gold numerals on ivory, not dark discs */
.mt-step__circle,
.fw-step__circle {
  background: var(--r-gold-tint) !important;
  border: 1px solid var(--r-gold) !important;
  color: var(--r-navy) !important;
  box-shadow: none !important;
}
.mt-step__label, .fw-step__label { color: var(--r-gold-text) !important; }
.mt-prompt { border-left: 2px solid var(--r-gold); background: var(--r-gold-tint); color: var(--r-body); }

/* Framework domain image wells: light gradients, not midnight */
.fw-domain:nth-child(1) .fw-domain__img-wrap { background: linear-gradient(135deg, var(--r-sky), #DCE9F3) !important; }
.fw-domain:nth-child(2) .fw-domain__img-wrap { background: linear-gradient(135deg, var(--r-sky), #D6E5F2) !important; }
.fw-domain:nth-child(3) .fw-domain__img-wrap { background: linear-gradient(135deg, #E9F4F8, #D3E9F1) !important; }
.fw-domain:nth-child(4) .fw-domain__img-wrap { background: linear-gradient(135deg, #EAF3EB, #D5E8D8) !important; }
.fw-domain:nth-child(5) .fw-domain__img-wrap { background: linear-gradient(135deg, #EAF4EC, #D2E8D6) !important; }

/* About/get-involved card tops and form headers */
.ab-card__top, .gi-form-card__top, .mt-principle__top {
  background: linear-gradient(90deg, var(--r-navy), var(--r-gold)) !important;
}
.gi-form-card--success .gi-form-card__top {
  background: linear-gradient(90deg, var(--r-green), var(--r-gold)) !important;
}

/* Tables */
.mt-table thead th { background: var(--r-navy); color: #fff; }
.mt-table tbody td { border-color: var(--r-rule); color: var(--r-body); }
.mt-table tbody tr:nth-child(even) td { background: var(--r-gold-tint); }

/* Section watermarks were sized for dark grounds */
[class$="__wm"] { color: var(--r-gold) !important; opacity: .06 !important; }

/* ─────────────────────────────────────────────
   10. FOOTER — royal navy anchor
   The one deliberately deep element on the site.
   This is the deck's cover treatment: true royal
   navy with gold rules, not the old near-black.
   Swap the two lines marked LIGHT to go parchment.
   ───────────────────────────────────────────── */
html body .ft {
  background: #1B4F72;                    /* LIGHT: var(--r-parchment) */
}
html body .ft__bg {
  background: linear-gradient(150deg, #1B4F72 0%, #17456A 40%, #123C5C 100%) !important;
                                          /* LIGHT: none */
}
html body .ft__b1,
html body .ft__b2 { opacity: .3 !important; }

html body .ft, html body .ft p, html body .ft li, html body .ft span {
  color: rgba(255,255,255,.82);
}
html body .ft a { color: rgba(255,255,255,.9); }
html body .ft a:hover { color: #E6C97A; }
html body .ft__brand-name,
html body .ft__nav-h { color: #fff; }
html body .ft__mission em { color: #E6C97A !important; font-style: italic; }
html body .ft__stmt em { color: #E6C97A; }
html body .ft__orn__l { background: linear-gradient(90deg, rgba(230,201,122,.6), transparent) !important; }
html body .ft__orn__d { background: #E6C97A !important; }
html body .ft__div { background: linear-gradient(90deg, rgba(230,201,122,.28), transparent) !important; }
html body .ft__badge { border: 1px solid rgba(230,201,122,.5); }
html body .ft__badge::before { background: none !important; }
html body .ft__badge-text { color: #E6C97A; }
html body .ft__cred::before { background: #E6C97A !important; }
html body .ft__nav-h::after { background: linear-gradient(90deg, rgba(230,201,122,.3), transparent) !important; }
html body .ft__back {
  border: 1px solid rgba(230,201,122,.45);
  color: #E6C97A; background: transparent;
}
html body .ft__back:hover { background: rgba(230,201,122,.14); }

/* ══════════════════════════════════════════════════════════════
   11. READABILITY LAYER

   Every band listed here used to sit on a near-black gradient, so
   its text was white. The grounds are now cream, which left that
   text invisible. This restores the ink across all of them in one
   pass, then puts the gold and accent colours back where they
   belong. Ordering matters: the broad rule lands first.
   ══════════════════════════════════════════════════════════════ */

/* The formerly-dark section roots, in one list */
html body :is(
  .ab-hero, .ch-hero, .af-hero, .fw-hero, .gi-hero, .hw-hero, .io-hero, .mt-hero,
  .ch-banner, .af-banner, .io-banner, .ch-response, .af-cta, .fw-flow,
  .gi-trust, .gi-closing, .hw-pathways, .io-society, .mt-dual, .mt-cta,
  .gi-form-card, .mt-domain-card, .io-soc-card, .hv-vision
) :is(h1, h2, h3, h4, h5, p, li, span, a, cite, em, strong, div, small, td, th, label) {
  color: var(--r-body);
}

/* Headings inside those bands go to full ink */
html body :is(
  .ab-hero, .ch-hero, .af-hero, .fw-hero, .gi-hero, .hw-hero, .io-hero, .mt-hero,
  .ch-banner, .af-banner, .io-banner, .ch-response, .af-cta, .fw-flow,
  .gi-trust, .gi-closing, .hw-pathways, .io-society, .mt-dual, .mt-cta,
  .gi-form-card, .mt-domain-card, .io-soc-card, .hv-vision
) :is(h1, h2, h3, h4, h5) {
  color: var(--r-ink);
}

/* Emphasis inside headings keeps the gold accent */
html body :is(h1, h2, h3) em,
html body :is(h1, h2, h3) i {
  color: var(--r-gold);
}

/* ── Eyebrows, labels and micro-type: the darker gold ── */
html body :is(
  [class$="-eye"], [class*="-eye "], [class*="-eye--"],
  [class*="__eyebrow"], [class*="__label"], [class*="__tag"],
  [class*="__abbr"], [class*="__type"], [class*="__source"],
  [class*="__step"], [class*="__role"], [class*="__meta-tag"],
  [class*="__journey-label"], .r-eye, .r-stat__src, .mt-badge
) {
  color: var(--r-gold-text);
}

/* ── Supporting copy: readable muted ── */
html body :is(
  [class*="__sub"], [class*="__desc"], [class*="__attr"],
  [class*="__foot"], [class*="__quote"], [class*="__stmt"],
  [class*="__detail"], [class*="__cred"], [class*="__of"]
) {
  color: var(--r-body);
}
html body :is([class*="__attr"], [class*="__source"], [class*="__cred"]) {
  color: var(--r-muted);
}

/* ── Breadcrumbs ── */
html body :is([class*="crumb"], [class*="__bc"], .ab-cb) :is(a, span) {
  color: var(--r-muted);
}
html body :is([class*="crumb"], [class*="__bc"], .ab-cb) a:hover { color: var(--r-navy); }

/* ── Big display numerals ── */
html body :is(
  [class*="__index"], [class*="__num"], [class*="-stat__n"],
  [class*="__n"], .gi-path__num, .fw-domain__index
) {
  color: var(--r-navy);
}

/* ── Pills and chips on light grounds ── */
html body :is(.fw-jpill, .gi-trust-pill, .mt-dom-pill, .hm-pill, [class*="__chip"]) {
  color: var(--r-body);
  border-color: var(--r-rule);
  background: var(--r-white);
}
html body :is(.fw-jpill, .gi-trust-pill) :is(span, b) { color: var(--r-body); }

/* ── Outline buttons ── */
html body :is(.af-btn-o, .mt-btn-o, .ch-btn-outline, .io-btn-o, .fw-btn-o,
              .gi-btn-o, .hw-btn-o, .ab-btn-o, .hv-btn-ol) {
  color: var(--r-navy);
  border-color: var(--r-gold);
}

/* ── Card interiors that were dark ── */
html body :is(.mt-domain-card, .io-soc-card, .gi-form-card) {
  background: var(--r-white);
  border: 1px solid var(--r-rule);
}
html body .gi-form-card__title { color: var(--r-ink); }
html body .gi-form-card__sub   { color: var(--r-muted); }

/* ── Links in prose ── */
html body main a:not([class]) { color: var(--r-navy); text-decoration: underline;
                                text-underline-offset: 2px; }
html body main a:not([class]):hover { color: var(--r-gold-text); }

/* ── Accent restatements that must survive the broad rule ── */
html body .r-dom__sub          { color: var(--dom, var(--r-navy)); }
html body .hm-kicker           { color: var(--r-gold-text); }
html body .r-stat__label       { color: var(--r-ink); }
html body .hm-statement__q strong,
html body .hm-close__line--acc { color: var(--r-gold); }

/* ══════════════════════════════════════════════════════════════
   12. FINAL CONTRAST OVERRIDES

   These specific elements carry !important or high-specificity
   colour in their own page stylesheets and survived section 11.
   Each one is listed because an automated contrast audit found
   it below 4.5:1 (or 3:1 for large text), not on suspicion.
   ══════════════════════════════════════════════════════════════ */

/* Large display statements that stayed white */
html body :is(
  .ab-vm__h2, .ab-vmc__h3, .ab-vmc__p, .ab-vmc__foot,
  .ch-banner__quote, .ch-banner__eyebrow,
  .af-banner__stmt, .af-banner__eyebrow,
  .io-banner__stmt, .io-banner__eyebrow,
  .mt-principle__q, .mt-principle__attr,
  .gi-closing__h2, .hw-pathways__h2
) {
  color: var(--r-ink) !important;
}
html body :is(.ab-vmc__p, .mt-principle__attr, .ab-vmc__foot,
              .io-banner__attr, .gi-closing__attr) {
  color: var(--r-body) !important;
}
html body :is(.ch-banner__eyebrow, .af-banner__eyebrow, .io-banner__eyebrow,
              .ab-vm__eye) {
  color: var(--r-gold-text) !important;
}

/* Outline buttons that kept white label text */
html body :is(.ch-btn-outline, .mt-btn-o, .af-btn-o, .io-btn-o, .fw-btn-o,
              .gi-btn-o, .hw-btn-o, .ab-btn-o, .hv-btn-ol, .btn--outline) {
  color: var(--r-navy) !important;
  border-color: var(--r-gold) !important;
  background: transparent !important;
}
html body :is(.ch-btn-outline, .mt-btn-o, .af-btn-o, .io-btn-o, .fw-btn-o,
              .gi-btn-o, .hw-btn-o, .ab-btn-o, .hv-btn-ol):hover {
  background: var(--r-gold-wash) !important;
  color: var(--r-navy-deep) !important;
}

/* Column headers and abbreviations on tinted grounds */
html body .ch-shift__col-hd { color: var(--r-body) !important; }
html body :is(.af-card__abbr, .af-card__source, .af-cred) { color: var(--r-gold-text) !important; }
html body :is(.fw-step__label, .mt-step__label, .mt-badge) { color: var(--r-gold-text) !important; }

/* Domain archetype subtitles */
html body .r-dom__sub { color: var(--dom, var(--r-navy)) !important; }

/* ══════════════════════════════════════════════════════════════
   13. FOOTER — royal navy anchor, corrected contrast
   ══════════════════════════════════════════════════════════════ */
html body .ft            { background: #14375C; }
html body .ft__bg        { background: linear-gradient(150deg,#14375C 0%,#102C4A 55%,#0B1F3A 100%) !important; }
html body :is(.ft, .ft p, .ft li, .ft span, .ft div, .ft small) { color: #EDE4D0; }
html body .ft a          { color: #F2EADA; }
html body .ft a:hover    { color: var(--r-gold-lt); }
html body :is(.ft__brand-name, .ft__nav-h, .ft__conn-h) { color: #FFFFFF !important; }
html body :is(.ft__nav-h, .ft__conn-h) {
  opacity: 1 !important;
  letter-spacing: .18em; font-weight: 700;
}
html body .ft__copy, html body .ft__copy strong { color: #E4DAC4 !important; }
html body .ft__stmt, html body .ft__stmt em     { color: var(--r-gold-lt) !important; }
html body .ft__mission     { color: #EDE4D0 !important; }
html body .ft__mission em  { color: var(--r-gold-lt) !important; font-style: italic; }
html body .ft__conn-lead   { color: #EDE4D0 !important; }
html body .ft__badge-text, html body .ft__cred { color: var(--r-gold-lt) !important; }
html body .ft__back { border: 1px solid rgba(231,206,142,.5); color: var(--r-gold-lt); }

/* Last four, each found by the contrast audit rather than by eye */
html body .af-card__link      { color: var(--r-gold-text) !important; }
html body .hw-pathway__step   { color: var(--r-gold-text) !important; }
html body .gi-submit__text,
html body .gi-submit          { color: #FFFFFF !important; }
/* Unclassed paragraph inside the Impact "society" band */
html body .io-society p,
html body .io-society :is(span, div):not([class]) { color: var(--r-body) !important; }

/* ══════════════════════════════════════════════════════════════
   14. JUSTIFIED PROSE

   Full justification, matching the proposal documents. Hyphenation
   is switched on deliberately: justifying without it opens rivers
   of white space in narrow columns. Headings, labels, buttons,
   table cells and anything already centred are left alone, since
   justifying short lines is what makes text look broken.
   ══════════════════════════════════════════════════════════════ */
html body main :is(p, .hm-deck, .hm-sub, .r-counters__sub, [class*="__p"],
                   [class*="__sub"], [class*="__desc"], [class*="__detail"],
                   [class*="__lead"], [class*="__body"] p, li) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Anything centred, short, or structural stays as it is */
html body main :is(
  h1, h2, h3, h4, h5, h6,
  [class*="__eyebrow"], [class*="__label"], [class*="__tag"], [class*="__attr"],
  [class*="__n"], [class*="__num"], [class*="__cue"], [class*="__src"],
  [class*="-eye"], [class*="__stmt"], [class*="__quote"], [class*="__q"],
  .r-stat p, .r-stat div, .r-counters__note, .r-counters__hd p,
  .hm-hd p, .hm-statement__q, .hm-close__line, .hm-legend__txt b,
  .hm-legend__txt i, .r-dom__blurb-p, .r-dom__blurb-list li,
  .hm-pill, .mt-prompt, td, th, button, label, .btn, [class*="btn"]
) {
  text-align: inherit;
  hyphens: manual;
}
html body main :is(.r-counters__hd, .hm-hd, .r-counters__note, .hm-close,
                   .hm-statement, [class*="--c"], [style*="text-align:center"]) {
  text-align: center;
}
html body main :is(.r-stat, .r-stat p) { text-align: center; }

/* Short measures should never be justified: below roughly 34 characters
   the gaps become obvious. */
@media (max-width: 560px) {
  html body main :is(p, li) { text-align: left; hyphens: auto; }
}

/* ══════════════════════════════════════════════════════════════
   15. DARK PANELS — corrected

   A pixel-level audit (sampling rendered pixels rather than reading
   backgroundColor) found panels still painting dark gradients. In
   revision 1 I treated the "__top" elements as thin accent bars and
   painted a navy-to-gold gradient across them. They are in fact
   full card panels, so that gradient covered whole cards. These are
   now light, with the text inside brought to ink to match.
   ══════════════════════════════════════════════════════════════ */

html body :is(.ab-card__top, .mt-principle__top, .gi-form-card__top) {
  background: linear-gradient(135deg,
      #FFFFFF 0%, var(--r-gold-tint) 46%, var(--r-gold-wash) 100%) !important;
  border-bottom: 1px solid var(--r-rule);
}
html body :is(.ab-card__top, .mt-principle__top, .gi-form-card__top)::before {
  background: radial-gradient(circle, rgba(156,122,46,.10) 0%, transparent 62%) !important;
}
html body :is(.ab-card__top, .mt-principle__top, .gi-form-card__top)::after {
  background: linear-gradient(90deg, transparent, var(--r-gold) 30%,
              var(--r-gold-lt) 70%, transparent) !important;
}
html body :is(.ab-card__top, .mt-principle__top, .gi-form-card__top)
        :is(h1,h2,h3,h4,p,span,div,em,strong,cite) { color: var(--r-body) !important; }
html body :is(.ab-card__top, .mt-principle__top, .gi-form-card__top)
        :is(h1,h2,h3,h4) { color: var(--r-ink) !important; }
html body :is(.mt-principle__q, .ab-card__quote) { color: var(--r-ink) !important; }
html body :is(.mt-principle__tag, .ab-card__tag, .gi-form-card__sub) {
  color: var(--r-gold-text) !important;
}
html body .gi-form-card__sub { color: var(--r-muted) !important; }

/* Foundation-card numeral panels: tinted, not dark */
html body .ab-fc__num,
html body .ab-fc:nth-child(1) .ab-fc__num,
html body .ab-fc:nth-child(2) .ab-fc__num,
html body .ab-fc:nth-child(3) .ab-fc__num {
  background: var(--r-gold-tint) !important;
  border-right: 1px solid var(--r-rule);
}
html body .ab-fc:nth-child(1) .ab-fc__num { background: #EEF3F8 !important; }
html body .ab-fc:nth-child(2) .ab-fc__num { background: #EDF4EE !important; }
html body .ab-fc:nth-child(3) .ab-fc__num { background: #EAF2F5 !important; }
html body .ab-fc__n  { color: var(--r-navy) !important; }
html body .ab-fc__of { color: var(--r-muted) !important; }

/* Framework domain images: the overlay was darkening the illustrations */
html body .fw-domain__img-overlay {
  background: linear-gradient(to top, rgba(244,236,219,.55) 0%,
              rgba(251,248,241,.15) 45%, transparent 72%) !important;
}
html body .fw-domain__num { color: rgba(156,122,46,.30) !important; }

/* ══════════════════════════════════════════════════════════════
   16. ICONS ON LIGHT GROUNDS

   Circles and badges that used to be dark now hold white icons,
   which vanish. Force the glyphs to inherit the ink colour.
   ══════════════════════════════════════════════════════════════ */
html body :is(.fw-step__circle, .mt-step__circle, .mt-domain-card__ico,
              .ab-card__ico, .io-tier__ico, .hw-stat__ico, .gi-path__ico,
              .af-card__ico, .ch-pillar__ico, .hm-imp__ico) {
  background: var(--r-gold-tint) !important;
  border: 1px solid var(--r-gold-lt) !important;
  color: var(--r-navy) !important;
  box-shadow: none !important;
}
html body :is(.fw-step__circle, .mt-step__circle, .mt-domain-card__ico,
              .ab-card__ico, .io-tier__ico, .hw-stat__ico, .gi-path__ico,
              .af-card__ico, .ch-pillar__ico, .hm-imp__ico) svg {
  color: currentColor !important;
  stroke: currentColor !important;
}
html body :is(.fw-step__circle, .mt-step__circle) svg :is(path,circle,rect,line,polyline,polygon) {
  stroke: currentColor !important;
  fill: none !important;
}
/* Per-domain accent on the journey circles */
html body .fw-step:nth-child(1) .fw-step__circle { color: #14375C !important; }
html body .fw-step:nth-child(2) .fw-step__circle { color: #1D4E7C !important; }
html body .fw-step:nth-child(3) .fw-step__circle { color: #14657F !important; }
html body .fw-step:nth-child(4) .fw-step__circle { color: #245F2C !important; }
html body .fw-step:nth-child(5) .fw-step__circle { color: #2F7D3A !important; }

/* Methodology domain cards: body copy was still white */
html body .mt-domain-card__p,
html body .mt-domain-card:hover .mt-domain-card__p { color: var(--r-body) !important; }
html body .mt-domain-card__h3   { color: var(--r-ink) !important; }
html body .mt-domain-card__foot { color: var(--r-muted) !important;
                                  border-top-color: var(--r-rule) !important; }

/* ══════════════════════════════════════════════════════════════
   17. REMAINING SMALL-TYPE CONTRAST
   ══════════════════════════════════════════════════════════════ */
html body :is(.ch-banner__eyebrow, .af-banner__eyebrow, .io-banner__eyebrow,
              .ab-vm__eye, .ab-card__tag) {
  color: #6B5218 !important;                /* 6.6:1 on the tinted grounds */
}
html body .ft__badge      { background: rgba(255,255,255,.10) !important;
                            border: 1px solid rgba(231,206,142,.55) !important; }
html body .ft__badge-text { color: #FFFFFF !important; }
html body :is(.ch-eye--warn, [class*="--warn"]) { color: #A33A2C !important; }

/* Decorative watermarks are not content; keep them out of the audit
   and out of the accessibility tree. */
html body [class$="__wm"] { color: var(--r-gold) !important; opacity: .05 !important;
                            user-select: none; }

/* ══════════════════════════════════════════════════════════════
   18. ABOUT — Vision & Mission band

   .ab-vm::before paints a full-bleed navy-to-blue gradient over the
   whole section, and the two cards sit on it as translucent glass.
   Neither was caught by earlier passes because both are painted with
   background-image rather than backgroundColor.
   ══════════════════════════════════════════════════════════════ */
html body .ab-vm { background: var(--r-ivory) !important; }
html body .ab-vm::before {
  background: radial-gradient(ellipse 70% 60% at 78% 10%, rgba(156,122,46,.14) 0%, transparent 62%),
              linear-gradient(125deg, #FFFFFF 0%, var(--r-ivory) 42%,
                              var(--r-parchment) 100%) !important;
}
html body .ab-vm::after { opacity: .3 !important; }
html body .ab-vmc {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid var(--r-rule) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(11,31,58,.05), 0 16px 40px rgba(11,31,58,.07);
}
html body :is(.ab-vm__h2, .ab-vmc__h3)  { color: var(--r-ink) !important; }
html body :is(.ab-vmc__p, .ab-vmc__foot){ color: var(--r-body) !important; }
html body .ab-vmc__foot { border-top-color: var(--r-rule) !important; }
html body .ab-vmc__type { color: var(--r-gold-text) !important; }
html body .ab-vmc--vision .ab-vmc__type { color: #6B5218 !important; }
html body .ab-vmc--mission .ab-vmc__type { color: #245F2C !important; }
html body .ab-vmc__ico {
  background: var(--r-gold-tint) !important;
  border: 1px solid var(--r-gold-lt) !important;
  color: var(--r-navy) !important;
}
html body .ab-vmc__ico svg { stroke: currentColor !important; }

/* Challenge: the alert red needs to clear 3:1 at display size */
html body :is(.ch-hero__h1 em, .ch-crisis__h2 em, [class*="ch-"] em) { color: #A33A2C !important; }

/* ══════════════════════════════════════════════════════════════
   19. HOVER STATES

   Contrast audits that only sample the resting state miss these
   entirely. Each of these rules brightened text toward white on
   hover, which was correct on the old dark cards and unreadable on
   cream. Found by re-running the audit with hover simulated.
   ══════════════════════════════════════════════════════════════ */
html body :is(.hw-pathway, .mt-domain-card, .io-soc-card, .ab-vmc,
              .ch-pillar, .af-card, .fw-domain, .gi-path):hover
        :is([class*="__p"], [class*="__label"], [class*="__desc"],
            [class*="__sub"], [class*="__foot"], p, li, span) {
  color: var(--r-body) !important;
}
html body :is(.hw-pathway, .mt-domain-card, .io-soc-card, .ab-vmc,
              .ch-pillar, .af-card, .fw-domain, .gi-path):hover
        :is(h1, h2, h3, h4, h5) { color: var(--r-ink) !important; }
html body :is(.hw-pathway, .mt-domain-card, .io-soc-card, .ab-vmc):hover
        :is([class*="__label"], [class*="__tag"], [class*="__type"],
            [class*="-eye"], [class*="__step"]) { color: var(--r-gold-text) !important; }

/* Resting state for the same elements */
html body :is(.hw-pathway__p, .hw-pathway__h4, .hw-pathway__step) { color: var(--r-body) !important; }
html body .hw-pathway__h4  { color: var(--r-ink) !important; }
html body .hw-pathway__step{ color: var(--r-gold-text) !important; }
html body .hw-pathway__top { background: linear-gradient(90deg, var(--r-gold), var(--r-gold-lt)) !important; }

/* Small chips and creds that flipped to white on hover */
html body :is(.ab-pill, .af-cred, .mt-badge):hover { color: var(--r-navy) !important; }
html body :is(.ch-pillar:hover .ch-pillar__label) { color: #6B5218 !important; }

/* Small gold labels found by the hover audit, sitting between 3.5 and 4.3:1.
   Moved to the deepest gold, which clears 4.5:1 on every tinted ground used. */
html body :is(.r-dom__cue, .r-dom__blurb-k, .ch-pillar__label, .af-card__abbr) {
  color: #6B5218 !important;
}
html body .r-dom:hover .r-dom__cue { color: #6B5218 !important; }

/* ══════════════════════════════════════════════════════════════
   20. DOMAIN CARD HOVER PANEL

   The blurb is an absolute overlay filling the card, so any content
   taller than the card is simply cut off. Measured overflow was 7 to
   31px across the five. The card now carries a min-height sized to
   the tallest blurb, and the panel's own type is tightened.
   ══════════════════════════════════════════════════════════════ */
.r-dom { min-height: 356px; }
.r-dom__blurb {
  padding: 1.15rem 1.15rem;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.r-dom__blurb-k { margin-bottom: .4rem; font-size: .64rem; }
.r-dom__blurb-h { font-size: .98rem; margin-bottom: .3rem; }
.r-dom__blurb-p { font-size: .82rem; line-height: 1.52; }
.r-dom__blurb-list { margin-top: .6rem; padding-top: .55rem; }
.r-dom__blurb-list li { font-size: .745rem; line-height: 1.42; margin-bottom: .22rem; }

/* ══════════════════════════════════════════════════════════════
   21. JUSTIFICATION — micro-label exclusions

   The justify rule matched [class*="__sub"], which caught uppercase
   archetype labels as well as prose subtitles. A two-word label set
   to justify stretches into a full line of gaps.
   ══════════════════════════════════════════════════════════════ */
html body main :is(
  .r-dom__sub, .hm-legend__txt b, .hm-legend__txt i, .hm-legend__n,
  .fw-step__sublabel, .fw-step__label, .mt-domain-card__type,
  .ab-vmc__type, .io-tier__label, .hw-stat__label, .r-stat__label,
  .hm-pill, .hm-kicker, [class*="__archetype"], [class*="__sublabel"],
  .r-dom__cue, .r-dom__blurb-k, .r-stat__src, .af-card__abbr
) {
  text-align: left !important;
  text-justify: auto !important;
  hyphens: manual !important;
  word-spacing: normal !important;
}
/* Any uppercase micro-label: never justify */
html body main :is([class*="__label"], [class*="__tag"], [class*="__type"],
                   [class*="-eye"], [class*="__eyebrow"], [class*="__step"]) {
  text-align: inherit;
  hyphens: manual;
}

/* ══════════════════════════════════════════════════════════════
   22. HOME — framework architecture band (canonical 5·4·8·40·2)
   ══════════════════════════════════════════════════════════════ */
.hm-arch {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background:
    radial-gradient(ellipse 74% 90% at 50% 0%, rgba(196,162,74,.13) 0%, transparent 62%),
    linear-gradient(180deg, var(--r-white) 0%, var(--r-gold-tint) 100%);
  border-top: 1px solid var(--r-rule);
  border-bottom: 1px solid var(--r-rule);
}
.hm-arch__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--r-rule);
  border-radius: 4px;
  background: var(--r-white);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11,31,58,.05), 0 20px 48px rgba(11,31,58,.07);
}
/* the gold spine running behind all five numerals */
.hm-arch__grid::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: 92px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--r-gold-lt) 12%,
              var(--r-gold-lt) 88%, transparent);
  pointer-events: none;
}
.hm-arch__cell {
  position: relative;
  padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1.6rem, 2.4vw, 2.1rem);
  text-align: center;
  border-right: 1px solid var(--r-rule);
  transition: background .35s ease;
}
.hm-arch__cell:last-child { border-right: 0; }
.hm-arch__cell:hover { background: var(--r-gold-tint); }
.hm-arch__cell::before {
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--r-gold);
  opacity: 0; transition: opacity .35s ease;
}
.hm-arch__cell:hover::before { opacity: 1; }
.hm-arch__n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--r-white);
  border: 1px solid var(--r-gold-lt);
  box-shadow: inset 0 0 0 4px var(--r-gold-tint);
  font-family: var(--r-serif);
  font-size: 2.1rem; font-weight: 600; line-height: 1;
  color: var(--r-navy);
  font-variant-numeric: lining-nums;
}
.hm-arch__l {
  display: block; margin-top: 1rem;
  font-family: var(--r-sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--r-gold-text);
}
.hm-arch__l::after {
  content: ''; display: block; width: 26px; height: 2px;
  margin: .7rem auto 0; border-radius: 2px;
  background: var(--r-gold);
}
.hm-arch__d {
  display: block; margin-top: .8rem;
  font-size: .82rem; line-height: 1.6;
  color: var(--r-muted);
  text-align: center;
}
@media (max-width: 1020px) {
  .hm-arch__grid { grid-template-columns: repeat(2, 1fr); }
  .hm-arch__grid::before { display: none; }
  .hm-arch__cell { border-bottom: 1px solid var(--r-rule); }
  .hm-arch__cell:nth-child(2n) { border-right: 0; }
  .hm-arch__cell:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (max-width: 560px) {
  .hm-arch__grid { grid-template-columns: 1fr; }
  .hm-arch__cell { border-right: 0; }
}
@media (max-width: 1080px) {
  .hm-arch__grid { grid-template-columns: repeat(3, 1fr); }
  .hm-arch__cell:nth-child(4), .hm-arch__cell:nth-child(5) { border-top: 1px solid var(--r-rule); }
}
@media (max-width: 640px) {
  .hm-arch__grid { grid-template-columns: 1fr 1fr; }
}

/* Dimension 5's green (#2F7D3A) lands at exactly 4.5:1 on the gold-tint
   ground — a coin-flip against rounding. Small text in that accent steps
   one shade deeper; bars and icons keep the brand green. */
html body .hm-legend__row[style*="2F7D3A"] i,
html body .r-dom[style*="2F7D3A"] .r-dom__sub,
html body .r-dom[style*="2F7D3A"] .r-dom__blurb-k { color: #276933 !important; }