/* Matrix Technical & Leadership Academy - shared marketing design system.
   Used by every public funnel page (home, framework, tracks, programmes, why, portals).
   Brand values are set in /assets/css/tokens.css — load that file first.
   The shorthand vars below alias the tokens so existing selectors keep working. */

:root{
  --navy:     var(--color-navy);           /* #0A1628 — confirmed brand navy */
  --gold:     var(--color-gold);           /* #C9A84C — confirmed brand gold */
  --char:     #2C2C2C;
  --gear:     var(--color-info);           /* #3498DB */
  --soft:     var(--color-surface-light);  /* #F4F7FC */
  --navytint: var(--color-navy-tint);      /* #EAEFF5 */
  --goldtint: var(--color-gold-tint);      /* #F7F1DD */
  --line:     var(--color-border-default); /* #D1DBE8 */
  --grey:     var(--color-text-muted);     /* #6B7280 */
  /* domain / level accent ramp */
  --A: var(--color-navy); --B: var(--color-info); --C:#5A8AC9; --D:#8FB0D8;
  --E: var(--color-gold); --F:#A8841F; --S:#B9892B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--char);background:#fff;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}

/* ---------- header / nav ---------- */
/* ============================================================================
   TWO-TIER HEADER -- Brand bar (top) + Nav bar (bottom)
   ============================================================================
   Rebuilt 2026-07-26 on branch feature/nav-dropdowns.
   Reference: docs/nav-rebuild-notes.md (audit 1-4, decisions BL-1..BL-6).

   This is now the ONLY generation of nav CSS in this file. The duplicate
   `.nav-dropdown-*` block that sat near line 812 and the "Item 5"
   `.site-nav > a` override that sat near line 848 are both folded in here.
   See nav-rebuild-notes 2.2 and 2.3 for what each of them broke.

   ── BRAND LOCK (nav-rebuild-notes BL-2) ───────────────────────────────────
   The nav chrome is theme-immune. Its colours are declared as `--chrome-*` on
   `.site-header` itself, NEVER on `:root`, because:
     - site-theme.js (line 171-175) and dev-tokens.js (line 28, 151) both write
       theme variables only to `document.documentElement`, i.e. `:root`;
     - a custom property declared on an element always beats an inherited value
       from an ancestor -- whatever the ancestor's specificity, source order or
       `!important` -- because inheritance is consulted only when no declaration
       applies to the element itself.
   A root-scoped write therefore cannot structurally reach these values.

   `--chrome-*` values are intentionally LITERAL hex, not `var(--color-navy)`.
   Aliasing them to the themeable tokens would defeat the lock; that is the
   entire point of the namespace. This is the one sanctioned exception to "no
   hex outside tokens.css", and it is why the block lives here rather than in
   tokens.css: apply-brand-tokens.js regenerates tokens.css wholesale and would
   silently delete it (nav-rebuild-notes section 9).

   Everything NOT brand-locked -- spacing, radius, z-index, motion, leading,
   tracking, type scale -- consumes the tokens listed in nav-rebuild-notes 4.
   Structural pixel values the scale does not cover (border widths, the 44px
   touch-target floor, the 52px logo, the brand lockup sizes, menu min-width)
   stay literal; they are not colours.

   ── Namespace and scoping ─────────────────────────────────────────────────
   Every nav rule is scoped as a descendant of `.site-header`, the component
   root. Two reasons:

   1. Specificity. `.site-header .site-nav` is 0,2,0, which beats matrix.css:28
      `.site-header nav` (0,1,1) and matrix.css:68
      `@media(max-width:640px){.site-header nav{display:none}}`. Without that,
      matrix.css would collapse this nav on small screens on the 9 repaired pages
      that also load it. matrix.css is out of scope this pass, so we out-specify
      it rather than edit it.

   2. Rollout safety. Scoping on `.site-header` rather than on the new `.mnav`
      marker means these rules apply to the existing per-page markup as well as
      to the shared partial. The header therefore never goes unstyled during the
      staged rollout, in either direction.

   The `mnav` marker still sits on the partial's root, and genuinely NEW elements
   introduced by this rebuild carry the `mnav__` / `mnav-` component prefix
   required by CLAUDE.md (`mnav__dd-group`, `mnav__burger`, `mnav-stub`).

   The pre-existing names (.site-header, .site-nav, .nav-dropdown-*, .dd-*,
   .authnav, .nav-toggle) are contracts with admin-bar.js, theme-toggle.js and
   the print rule further down this file -- not new CSS -- so they keep their
   names. See the contract table in assets/partials/site-header.html.
   ========================================================================= */

/* ── BRAND LOCK token namespace: the single declaration site ──
   Enforced by pipeline/css-audit-pipeline.js check C1. Never declare
   `--chrome-*` anywhere else, and never inside a [data-theme] block (C2/C3). */
.site-header{
  --chrome-navy:          #0A1628;
  --chrome-gold:          #C9A84C;
  --chrome-on-navy:       #FFFFFF;
  --chrome-text:          #D7E0EC;
  --chrome-text-muted:    #C9D6E8;
  --chrome-border:        #3a5d8a;
  --chrome-border-strong: #2a4d77;
  --chrome-rule:          #1e3a5a;
  --chrome-rule-soft:     rgba(255,255,255,.08);
  --chrome-hover-wash:    rgba(255,255,255,.04);
  --chrome-hover-solid:   #12325a;
  --chrome-menu-mobile:   #0a1e38;
  --chrome-shadow:        0 4px 24px rgba(0,0,0,.35);
  --chrome-menu-shadow:   0 12px 32px rgba(10,22,40,.5);
}

/* Outer header shell.
   `!important` retained on the three locked properties: matrix.css:21 declares
   `.site-header` at equal specificity and stylesheet order is not guaranteed on
   the 9 repaired pages. */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--chrome-navy) !important;
  color:var(--chrome-on-navy) !important;
  border-bottom:4px solid var(--chrome-gold) !important;
  box-shadow:var(--chrome-shadow);
}

/* ── Header space reservation (layout-shift guard) ──
   The header markup is fetched at runtime by site-header.js, so it lands after
   first paint and would otherwise shove the page down as it arrives. The loader
   synchronously inserts <div data-site-header-mount class="mnav-mount"> as the
   first body child and mount() swaps the real header in over it, so the space is
   occupied from first paint onward and nothing moves.

   Heights are measured, not guessed -- the rendered header is exactly 108px at
   >=1041px (60px brand bar + 44px nav bar + 4px gold border) and exactly 64px at
   <=1040px, where site.css sets .hdr-nav to display:none and only the brand bar
   remains. Both figures were taken across 13 viewport widths from 320px to
   1440px; there are only these two. A single value would over-reserve by 44px on
   every mobile page.

   Keep these in step with .hdr-brand min-height, .hdr-nav min-height and the
   .site-header border-bottom above. No JS-off cost: the placeholder only exists
   if the loader ran. */
.mnav-mount{min-height:108px}
@media(max-width:1040px){ .mnav-mount{min-height:64px} }

/* ── Tier 1: brand bar ── */
.site-header .hdr-brand{
  display:flex;align-items:center;justify-content:space-between;
  min-height:60px;
  border-bottom:1px solid var(--chrome-rule-soft);
}
.site-header .brand{
  display:flex;align-items:center;gap:var(--space-3);
  line-height:1;text-decoration:none;
}
.site-header .brand img,
.site-header .nav-logo{height:52px;width:auto;display:block;flex:none}
.site-header .brand .bt{display:flex;flex-direction:column;gap:var(--space-1)}
.site-header .brand-name{
  font-size:22px;font-weight:var(--font-weight-extrabold);
  color:var(--chrome-gold);
  letter-spacing:var(--tracking-tight);line-height:1;
  text-transform:uppercase;
}
.site-header .brand-sub{
  font-size:11px;color:var(--chrome-text-muted);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  line-height:1;
}
/* matrix.css:27 `.brand span{margin-top:3px}` (0,1,1) targets bare spans, and the
   shared partial builds the whole lockup from spans -- the `.bt` wrapper itself
   plus the two lines inside it -- where the old inline headers used a <div>
   wrapper. The rules above out-specify matrix.css on font and colour but never on
   margin, so on pages that also load matrix.css the 3px applied three times over.
   Once .brand-sub wrapped at narrow widths the brand bar grew past its 60px
   min-height and the header measured 73px instead of 64px: a 9px shift against
   the .mnav-mount reservation on every matrix.css page at <=390px.
   The descendant selector (not a child selector) is deliberate -- it must reach
   `.bt` AND its children. Vertical rhythm comes from .bt's `gap`, so zero is the
   correct value, not a counter-hack. Restores exactly two reserved heights on
   every page, which is what BL-8 depends on. */
.site-header .brand span{margin-top:0}
.authnav{display:flex;align-items:center;gap:var(--space-2)}

/* ── Tier 2: nav bar ── */
.site-header .hdr-nav{
  display:flex;align-items:center;justify-content:space-between;
  min-height:44px;
}
.site-header .site-nav{
  display:flex;gap:0;align-items:stretch;
  font-size:var(--font-size-sm);height:44px;
  flex:1;justify-content:space-evenly;
}

/* Top-level items. ONE rule for both the <a> children and the
   <button class="nav-dropdown-btn"> triggers, so they share font, size, weight,
   colour, line-height and optical centre. This is what the old "Item 5" block
   at line 848 existed to do; folding it in here removes the collision that
   silently killed the horizontal hit-area padding (nav-rebuild-notes 2.3) and
   left the touch target under 44px.
   admin-bar.js appends bare <a> children straight into .site-nav, so the
   `.site-nav > a` half of this selector must stay. */
.site-header .site-nav > a,
.site-header .site-nav > .nav-dropdown-wrap > .nav-dropdown-btn{
  display:inline-flex;align-items:center;
  color:var(--chrome-text);
  padding:0 var(--space-5);
  border:none;border-bottom:3px solid transparent;
  background:transparent;
  white-space:nowrap;cursor:pointer;line-height:1;
  font-family:var(--font-primary);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--tracking-wide);
  transition:color var(--transition-base),
             border-color var(--transition-base),
             background var(--transition-base);
}
.site-header .site-nav > a:hover,
.site-header .site-nav > a.active,
.site-header .site-nav > .nav-dropdown-wrap > .nav-dropdown-btn:hover,
.site-header .site-nav > .nav-dropdown-wrap.open > .nav-dropdown-btn{
  color:var(--chrome-on-navy);
  border-bottom-color:var(--chrome-gold);
  background:var(--chrome-hover-wash);
}

/* Visible focus. Required by the accessibility baseline and by the keyboard
   support landing in site-nav.js. Inset offset so the ring is not clipped by
   the 44px bar. */
.site-header .site-nav > a:focus-visible,
.site-header .site-nav > .nav-dropdown-wrap > .nav-dropdown-btn:focus-visible,
.site-header .nav-dropdown-menu a:focus-visible,
.nav-toggle:focus-visible,
.authnav .theme-toggle:focus-visible{
  outline:2px solid var(--chrome-gold);
  outline-offset:-2px;
}

/* ── Dropdown menus -- single generation ──
   Where the two former blocks disagreed, the values kept are the ones that were
   actually winning (the later block, formerly line 812), so consolidating is
   visually a no-op on desktop. See nav-rebuild-notes 2.2 for the full table. */
.site-header .nav-dropdown-wrap{position:relative;display:flex;align-items:stretch}
.site-header .nav-dropdown-caret{
  margin-left:var(--space-1);font-size:10px;line-height:1;
  transition:transform var(--transition-base);
}
.site-header .nav-dropdown-wrap.open .nav-dropdown-caret{transform:rotate(180deg)}

.site-header .nav-dropdown-menu{
  display:none;
  position:absolute;top:calc(100% + var(--space-2));left:0;
  min-width:280px;
  background:var(--chrome-navy);
  border:1.5px solid var(--chrome-border-strong);
  border-top:3px solid var(--chrome-gold);
  border-radius:var(--radius-md);
  box-shadow:var(--chrome-menu-shadow);
  padding:var(--space-2) 0;
  z-index:var(--z-dropdown);
}
.site-header .nav-dropdown-wrap.open .nav-dropdown-menu{display:block}

.site-header .nav-dropdown-menu .dd-heading{
  font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--chrome-gold);
  padding:var(--space-3) var(--space-5) var(--space-1);
  line-height:1;
}
.site-header .nav-dropdown-menu a{
  display:block;
  padding:var(--space-3) var(--space-5);
  color:var(--chrome-text);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  line-height:var(--leading-snug);
  border-bottom:1px solid var(--chrome-rule);
  white-space:normal;
  transition:color var(--transition-fast),background var(--transition-fast);
}
.site-header .nav-dropdown-menu a:hover{
  color:var(--chrome-gold);background:var(--chrome-hover-solid);
}
/* Drop the trailing rule at the end of a group, and at the end of a flat menu.
   The flat case covers the Client Workspaces menu that admin-bar.js rebuilds
   for logged-in users -- it emits bare anchors with no group wrappers.
   Replaces the old `li:last-child a` rule, which never matched: that block was
   written for a <ul> the markup has never used (nav-rebuild-notes 2.2). */
.site-header .nav-dropdown-menu .mnav__dd-group > a:last-child,
.site-header .nav-dropdown-menu > a:last-child{border-bottom:0}
.site-header .nav-dropdown-menu .dd-divider{
  height:1px;background:var(--chrome-rule-soft);margin:var(--space-2) 0;
}

/* ── Legacy single-row hdr alias (keeps portal pages working) ── */
.hdr{display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:20px}
.btn{font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:.3px;padding:10px 19px;border-radius:7px;
  cursor:pointer;border:1.5px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:.15s;white-space:nowrap;text-align:center}
.btn-ghost{background:transparent;color:#fff;border-color:#3a5d8a}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{background:var(--gold);color:#10294a;border-color:var(--gold)}
.btn-gold:hover{background:#e6c14e;border-color:#e6c14e}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:#1f4a7d;border-color:#1f4a7d}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-outline:hover{border-color:var(--gear)}
.btn-lg{padding:12px 22px;font-size:14px}
.btn-block{width:100%}
/* mobile hamburger toggle (hidden on desktop).
   Height raised 38px -> 44px to meet the touch-target baseline. */
.nav-toggle{display:none;background:transparent;
  border:1.5px solid var(--chrome-border);color:var(--chrome-on-navy);
  border-radius:var(--radius-md);
  width:44px;height:44px;font-size:19px;line-height:1;cursor:pointer;flex:none;
  align-items:center;justify-content:center;font-family:var(--font-primary);
  transition:border-color var(--transition-base),color var(--transition-base)}
.nav-toggle:hover{border-color:var(--chrome-gold);color:var(--chrome-gold)}

@media(max-width:1040px){
  .nav-toggle{display:inline-flex}
  /* On mobile the nav bar collapses below the brand bar. `.site-header.nav-open`
     is toggled by site-nav.js; it is listed after the `.site-header .hdr-nav`
     rule so the equal 0,2,0 specificity resolves in its favour. */
  .site-header .hdr-nav{display:none;flex-direction:column;align-items:stretch;padding:0}
  .site-header.nav-open .hdr-nav{display:flex}
  .site-header .site-nav{
    flex-direction:column;height:auto;
    border-top:1px solid var(--chrome-rule-soft);
  }
  /* The wrap must stack, not sit inline beside its own static menu. The old CSS
     left `display:flex` from the base rule in force here, which put the trigger
     and the expanded list side by side. */
  .site-header .site-nav > .nav-dropdown-wrap{display:block}
  .site-header .site-nav > a,
  .site-header .site-nav > .nav-dropdown-wrap > .nav-dropdown-btn{
    padding:var(--space-3) var(--space-6);
    min-height:44px;width:100%;justify-content:flex-start;
    border:none;border-bottom:1px solid var(--chrome-border-strong);
  }
  .site-header .site-nav > a:hover,
  .site-header .site-nav > a.active{
    background:var(--chrome-hover-solid);color:var(--chrome-gold);
    border-bottom-color:var(--chrome-border-strong);
  }
  /* Submenus become inline disclosure lists. Given a distinct darker ground
     (--chrome-menu-mobile) instead of the `transparent` the old winning block
     produced, so nesting reads at a glance. This is the one deliberate visual
     change from resolving the two generations -- see nav-rebuild-notes 2.2. */
  .site-header .nav-dropdown-menu{
    position:static;min-width:0;
    background:var(--chrome-menu-mobile);
    border:none;border-top:1px solid var(--chrome-border-strong);
    border-radius:0;box-shadow:none;padding:0;
  }
  .site-header .nav-dropdown-menu a{
    display:flex;align-items:center;min-height:44px;
    padding:var(--space-3) var(--space-8);
  }
  .site-header .nav-dropdown-menu .dd-heading{
    padding:var(--space-3) var(--space-8) var(--space-1);
  }
}
@media(max-width:560px){.authnav .btn-gold{display:none}}
@media(max-width:420px){.btn{padding:8px 13px;font-size:12px}}

/* ── Reduced motion ──
   Accessibility baseline: honour prefers-reduced-motion. Suppresses the hover /
   focus colour fades, the caret spin and the toggle transitions across the whole
   header. The caret's rotate() is deliberately NOT reset: it is a state
   indicator paired with aria-expanded, not decoration, so it still flips -- it
   just flips instantly instead of animating. */
@media (prefers-reduced-motion: reduce){
  .site-header .site-nav > a,
  .site-header .site-nav > .nav-dropdown-wrap > .nav-dropdown-btn,
  .site-header .nav-dropdown-menu a,
  .site-header .nav-dropdown-caret,
  .nav-toggle,
  .authnav .theme-toggle{
    transition:none;
  }
}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,#16365d 0%,#1d4576 55%,#22507f 100%);color:#fff;padding:54px 0 42px}
.hero.compact{padding:40px 0 34px}
.eyebrow{color:var(--gold);font-weight:bold;letter-spacing:2px;font-size:12px;text-transform:uppercase}
.hero h1{font-size:42px;margin:10px 0 8px;line-height:1.08;max-width:880px}
.hero.compact h1{font-size:33px}
.hero .lede{font-size:18px;color:#DCE6F2;max-width:780px}
.hero .by{font-size:14px;color:#AFC4DE;margin-top:4px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
.stat b{font-size:26px;color:var(--gold);display:block;line-height:1.1}
.stat span{font-size:11.5px;color:#C9D6E8;text-transform:uppercase;letter-spacing:1px}
.flag{display:inline-block;margin-top:18px;font-size:12px;color:#10294a;background:var(--gold);padding:5px 12px;border-radius:20px;font-weight:bold}

/* breadcrumb */
.crumb{font-size:12.5px;color:#AFC4DE;margin-bottom:6px}
.crumb a:hover{color:#fff}

/* ---------- sections ---------- */
section{padding:46px 0}
section.tight{padding:34px 0}
section.alt{background:var(--soft)}
section.navy{background:var(--navy);color:#fff}
section.navy h2.sec,section.navy .lead{color:#fff}
.seclabel{color:var(--navy);font-weight:bold;letter-spacing:2px;font-size:12px;text-transform:uppercase}
h2.sec{color:var(--navy);font-size:28px;margin:6px 0 6px;line-height:1.15}
h3.sub{color:var(--navy);font-size:19px;margin:0 0 6px}
p.lead{color:var(--grey);max-width:840px;font-size:15.5px}
section.navy p.lead{color:#CFE0FF}
.center{text-align:center}
.center p.lead{margin-left:auto;margin-right:auto}

/* generic card grid */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.gap{margin-top:24px}

.card{border:1px solid var(--line);border-radius:13px;background:#fff;padding:18px 18px 16px;
  transition:transform .15s, box-shadow .15s;display:flex;flex-direction:column}
.card.lift{cursor:pointer}
.card.lift:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(24,58,100,.14)}
.card .ic{width:40px;height:40px;border-radius:10px;background:var(--navytint);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px;margin-bottom:12px}
.card .ic.gold{background:var(--goldtint);color:#8a6d18}
.card h4{color:var(--navy);font-size:16px;margin-bottom:7px;line-height:1.25}
.card p{font-size:13.5px;color:var(--grey)}
.card .meta{font-size:12px;color:var(--char);margin-top:11px;border-top:1px dashed var(--line);padding-top:9px}
.card .meta b{color:var(--navy)}
.card ul{margin:8px 0 0 18px;font-size:13.5px;color:var(--grey)}
.card ul li{margin:3px 0}
.card .top-stripe{height:5px;border-radius:6px;margin:-18px -18px 14px;}

/* pills / badges */
.pill{display:inline-block;background:var(--navytint);color:var(--navy);border-radius:20px;padding:3px 11px;font-size:11.5px;font-weight:bold}
.pill.g{background:var(--goldtint);color:#7d6313}
.pill.line{background:#fff;border:1px solid var(--line);color:var(--grey)}
.taglist{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}

/* ---------- pathway ladder (levels) ---------- */
.ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:26px}
@media(max-width:1080px){.ladder{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ladder{grid-template-columns:1fr}}
.lvl{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:transform .15s, box-shadow .15s}
.lvl.lift{cursor:pointer}
.lvl.lift:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(24,58,100,.16)}
.lvl .top{background:var(--navy);color:#fff;padding:13px 13px 11px;position:relative}
.lvl .top:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.lvl .num{color:var(--gold);font-weight:bold;font-size:18px}
.lvl .phase{font-weight:bold;font-size:13.5px;margin-top:2px;line-height:1.2}
.lvl .shift{font-size:11.5px;color:#CFE0FF;font-style:italic;margin-top:4px;min-height:28px}
.lvl .mid{padding:12px 13px;font-size:12.5px;color:var(--grey);flex:1}
.lvl .mid .aud{display:block;margin-top:8px;color:var(--char)}
.lvl .mid .aud b{color:var(--navy)}
.lvl .cnt{display:flex;gap:7px;padding:0 13px 13px;flex-wrap:wrap}

/* ---------- architecture diagram (stacked layers) ---------- */
.arch{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.layer{border:1px solid var(--line);border-left:6px solid var(--navy);border-radius:11px;background:#fff;
  padding:16px 20px;display:flex;gap:18px;align-items:flex-start}
.layer.l-tech{border-left-color:var(--gear)}
.layer.l-std{border-left-color:var(--gold)}
.layer.l-measure{border-left-color:var(--C)}
.layer.l-portal{border-left-color:var(--F)}
.layer .lyr-n{flex:none;width:38px;height:38px;border-radius:9px;background:var(--navytint);color:var(--navy);
  font-weight:bold;display:flex;align-items:center;justify-content:center;font-size:15px}
.layer h4{color:var(--navy);font-size:16px;margin-bottom:4px}
.layer p{font-size:13.5px;color:var(--grey)}
@media(max-width:560px){.layer{flex-direction:column;gap:10px}}

/* ---------- process flow (Diagnose..Improve) ---------- */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:26px}
@media(max-width:1000px){.flow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.flow{grid-template-columns:repeat(2,1fr)}}
.step{border:1px solid var(--line);border-radius:11px;background:#fff;padding:15px 14px;position:relative}
.step .sn{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:bold;
  display:flex;align-items:center;justify-content:center;font-size:13px;margin-bottom:10px}
.step h4{color:var(--navy);font-size:15px;margin-bottom:5px}
.step p{font-size:12.5px;color:var(--grey)}

/* ---------- standards / evidence strip ---------- */
.strip{background:var(--navytint);border-left:6px solid var(--navy);border-radius:9px;padding:16px 20px;margin-top:14px}
.strip.gold{background:var(--goldtint);border-left-color:var(--gold)}
.strip b{color:var(--navy);letter-spacing:.4px}
.strip p{font-size:13.5px;color:var(--char);margin-top:6px}
.note{background:var(--goldtint);border:1px solid #e6d39a;border-radius:9px;padding:12px 15px;font-size:13px;color:#7d6313;margin-top:16px}

/* ---------- key-value tables ---------- */
.kvtable{width:100%;border-collapse:collapse;margin-top:18px;font-size:13.5px}
.kvtable th,.kvtable td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.kvtable th{color:var(--navy);background:var(--soft);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.kvtable td.k{color:var(--grey);width:200px;font-weight:bold}
.table-scroll{overflow-x:auto}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,#16365d,#22507f);color:#fff;border-radius:16px;padding:34px 30px;margin:8px 0;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h3{font-size:23px;margin-bottom:6px}
.cta-band p{color:#CFE0FF;font-size:14.5px;max-width:560px}

/* ---------- lock notice (gated portal) ---------- */
.lockwrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.lockcard{max-width:440px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 28px;box-shadow:0 12px 30px rgba(24,58,100,.1)}
.lockcard .lk{font-size:30px}
.lockcard h2{color:var(--navy);margin:10px 0 6px;font-size:22px}
.lockcard p{color:var(--grey);font-size:14px;margin-bottom:18px}
.gated{display:none}
.gated.show{display:block}

/* ---------- modal (catalogue detail) ---------- */
.overlay{position:fixed;inset:0;background:rgba(16,28,46,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:14px;max-width:600px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.modal .mhead{padding:20px 24px;color:#fff;position:relative}
.modal .mhead .mbadges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.modal .mhead .mb{font-size:11px;font-weight:bold;padding:3px 9px;border-radius:5px;background:rgba(255,255,255,.2)}
.modal h2{font-size:21px;line-height:1.2}
.modal .close{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.18);border:0;color:#fff;
  width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1}
.modal .mbody{padding:20px 24px 26px}
.mrow{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--soft)}
.mrow .k{width:140px;color:var(--grey);font-size:12px;text-transform:uppercase;letter-spacing:.5px;flex:none}
.mrow .v{font-size:14px}
.mnote{margin-top:16px;background:var(--navytint);border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--navy)}

/* ---------- catalogue toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 8px}
.search{flex:1;min-width:220px;display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:#fff}
.search input{border:0;outline:0;font-family:inherit;font-size:14px;width:100%}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.chip{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:20px;padding:6px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.15s}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.count{color:var(--grey);font-size:13px;margin:14px 0 6px}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:920px){.catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.catgrid{grid-template-columns:1fr}}
.ccard{border:1px solid var(--line);border-radius:11px;overflow:hidden;cursor:pointer;background:#fff;
  display:flex;flex-direction:column;transition:transform .15s, box-shadow .15s}
.ccard:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(24,58,100,.14)}
.ccard .stripe{height:6px}
.ccard .cbody{padding:13px 14px 14px;flex:1;display:flex;flex-direction:column}
.ccard .badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.bdg{font-size:10.5px;font-weight:bold;padding:3px 8px;border-radius:5px;letter-spacing:.4px}
.bdg.lv{background:var(--navytint);color:var(--navy)}
.bdg.dom{color:#fff}
.bdg.fmt{background:#eef1f5;color:var(--grey)}
.bdg.safe{background:#fff;border:1px solid var(--gold);color:#8a6d18}
.ccard h3{font-size:15px;color:var(--navy);margin-bottom:6px;line-height:1.25}
.ccard .obj{font-size:12.5px;color:var(--grey);flex:1}
.ccard .tool{font-size:11.5px;color:var(--char);margin-top:9px;border-top:1px dashed var(--line);padding-top:8px}
.ccard .tool b{color:var(--navy)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#C9D6E8;font-size:12.5px;padding:30px 0 26px;margin-top:10px}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;padding-bottom:22px;border-bottom:1px solid #2a4d77}
.ft-top h5{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.ft-top a{color:#C9D6E8;display:block;padding:3px 0}
.ft-top a:hover{color:var(--gold)}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:16px}
.ft-bot b{color:#fff}
@media(max-width:760px){.ft-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ft-top{grid-template-columns:1fr}}
.ft-top.ft4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.ft-top.ft4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ft-top.ft4{grid-template-columns:1fr}}

/* ============================================================
   v3.0 homepage structure (Part 4) — additive only.
   Reuses existing brand tokens (navy/gold/Arial). No look change.
   ============================================================ */

/* signature 3px gold rule beneath the hero (never remove) */
.gold-rule{height:3px;background:var(--gold);width:100%}

/* scroll reveal (JS adds .reveal so no-JS shows content normally) */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* gold-outline button (Register, per Part 3) — navy text on light bg for WCAG AA */
.btn-gold-line{background:transparent;color:var(--navy);border-color:var(--gold)}
.btn-gold-line:hover{background:var(--gold);color:#10294a;border-color:var(--gold)}

/* hero — minimal thesis variant (zero CTAs) */
.hero .emph{font-style:italic;color:#E8D5A0}
.hero.thesis .lede{max-width:520px;color:rgba(255,255,255,.80)}

/* About — two-column label / body (160px | 1fr) */
.twocol{display:grid;grid-template-columns:160px 1fr;gap:30px;align-items:start}
.twocol .lab{color:var(--gold);font-weight:bold;letter-spacing:2px;font-size:12px;text-transform:uppercase;padding-top:6px}
.twocol .body p{color:var(--grey);font-size:15.5px;margin-bottom:14px;max-width:780px}
.twocol .body p:last-child{margin-bottom:0}
@media(max-width:680px){.twocol{grid-template-columns:1fr;gap:12px}}

/* How it works — four points, gold left border on navy */
.method{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(max-width:680px){.method{grid-template-columns:1fr}}
.mcard{background:rgba(255,255,255,.04);border:1px solid #2a4d77;border-left:4px solid var(--gold);
  border-radius:10px;padding:16px 18px}
.mcard h4{color:#fff;font-size:16px;margin-bottom:6px}
.mcard p{color:#CFE0FF;font-size:13.5px}

/* Standards strip — gold-outline badges on navy */
.std-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.std-badge{border:1px solid var(--gold);color:#F7F1DD;border-radius:8px;padding:7px 14px;
  font-size:12.5px;font-weight:bold;letter-spacing:.4px}

/* Register banner — navy card, 10px radius */
.reg-banner{background:linear-gradient(135deg,#16365d,#22507f);color:#fff;border-radius:10px;padding:26px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;margin-top:4px}
.reg-banner .eyebrow{margin-bottom:8px}
.reg-banner h3{font-size:21px;margin-bottom:6px}
.reg-banner p{color:#CFE0FF;font-size:14px;max-width:540px}
.reg-banner .acts{display:flex;gap:10px;flex-wrap:wrap}

/* Programme streams (Stage 2 deepens) */
.stream-tag{color:var(--navy);font-weight:bold;letter-spacing:1.4px;font-size:11px;text-transform:uppercase}
.lvltag{display:inline-block;font-size:10px;font-weight:bold;letter-spacing:.8px;text-transform:uppercase;
  border-radius:5px;padding:3px 7px;background:var(--navytint);color:var(--navy)}
.lvltag.prac{background:#E5EEF8;color:var(--gear)}
.lvltag.adv{background:var(--goldtint);color:#7d6313}
.arrow-link{color:var(--navy);font-weight:bold;font-size:13.5px;display:inline-flex;gap:6px;align-items:center;
  transition:.15s;margin-top:14px}
.arrow-link .ar{transition:transform .15s}
.arrow-link:hover{color:var(--gear)}
.arrow-link:hover .ar{transform:translateX(3px)}
.aud-filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* stream course listings (level tag | course name | duration) */
.course-rows{margin-top:16px;border-top:1px solid var(--line)}
.course{display:grid;grid-template-columns:104px 1fr auto;gap:12px;align-items:center;
  padding:10px 2px;border-bottom:1px solid var(--line)}
.course .cname{font-size:13.5px;color:var(--char);font-weight:bold;line-height:1.3}
.course .cdur{font-size:12px;color:var(--grey);white-space:nowrap}
.course.hide{display:none}
@media(max-width:420px){.course{grid-template-columns:92px 1fr auto;gap:8px}}

/* Commercial five-moves (Stage 3 deepens) */
.moves{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px}
@media(max-width:980px){.moves{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.moves{grid-template-columns:1fr}}
.move{border:1px solid var(--line);border-radius:11px;background:#fff;padding:16px 15px}
.move .mn{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:bold;
  display:flex;align-items:center;justify-content:center;font-size:13px;margin-bottom:10px}
.move h4{color:var(--navy);font-size:15px;margin-bottom:5px}
.move p{font-size:12.5px;color:var(--grey)}

/* Young Professional catalogue preview strip */
.cat-strip{background:var(--goldtint);border:1px solid #e6d39a;border-radius:13px;padding:24px 26px;margin-top:8px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cat-strip h3{color:var(--navy);font-size:20px;margin-bottom:6px}
.cat-strip p{color:#7d6313;font-size:14px;max-width:640px}

/* CTA three-card */
.cta-cards .card .btn{margin-top:14px;align-self:flex-start}

/* ===== Young Professional catalogue page ===== */
/* Core Four featured cards */
.core-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(max-width:760px){.core-grid{grid-template-columns:1fr}}
.corecard{border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:13px;background:#fff;
  padding:18px 20px;display:flex;flex-direction:column}
.corecard .oqtag{align-self:flex-start;font-size:10.5px;font-weight:bold;letter-spacing:.5px;background:var(--goldtint);
  color:#7d6313;border-radius:5px;padding:3px 8px;margin-bottom:10px;text-transform:uppercase}
.corecard h3{color:var(--navy);font-size:17px;margin-bottom:7px;line-height:1.25}
.corecard .cdesc{font-size:13.5px;color:var(--grey)}
.corecard .clbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);font-weight:bold;margin:12px 0 4px}
.corecard .clist{font-size:12.5px;color:var(--char);line-height:1.5}
.corecard .ct-foot{margin-top:auto;padding-top:14px}

/* add-to-pathway control + selected state */
.addbtn{font-family:inherit;font-size:12.5px;font-weight:bold;border:1.5px solid var(--navy);background:#fff;
  color:var(--navy);border-radius:7px;padding:7px 13px;cursor:pointer;transition:.12s}
.addbtn:hover{background:var(--navytint)}
.addbtn.added{background:var(--navy);color:#fff;border-color:var(--navy)}
.ccard.sel{box-shadow:0 0 0 2px var(--gold) inset}
.ccard .cfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;
  border-top:1px dashed var(--line);padding-top:9px}
.ccard .cfoot .fmtnote{font-size:11px;color:var(--grey)}

/* catalogue layout: grid + sticky pathway panel */
.catalogue-layout{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start;margin-top:8px}
@media(max-width:980px){.catalogue-layout{grid-template-columns:1fr}}
.pathway-panel{position:sticky;top:78px;border:1px solid var(--line);border-radius:13px;background:#fff;
  padding:18px 18px 16px;box-shadow:0 8px 22px rgba(24,58,100,.08)}
@media(max-width:980px){.pathway-panel{position:static}}
.pathway-panel .pp-eyebrow{color:var(--navy);font-weight:bold;letter-spacing:1.4px;font-size:10.5px;text-transform:uppercase}
.pathway-panel h3{color:var(--navy);font-size:17px;margin:4px 0 8px}
.pp-empty{font-size:13px;color:var(--grey)}
.pp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.pp-chip{font-size:11.5px;background:var(--navytint);color:var(--navy);border-radius:14px;padding:4px 6px 4px 10px;
  display:inline-flex;gap:6px;align-items:center}
.pp-chip button{border:0;background:transparent;color:var(--navy);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.pp-line{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--soft)}
.pp-line .k{color:var(--grey)}
.pp-line .v{color:var(--navy);font-weight:bold;text-align:right}
.pp-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}

/* package comparison cards */
.pkg{border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:13px;background:#fff;
  padding:18px;display:flex;flex-direction:column}
.pkg:nth-child(3){border-top-color:var(--gold)}
.pkg .ptag{align-self:flex-start;font-size:10px;font-weight:bold;letter-spacing:.6px;text-transform:uppercase;
  background:var(--navytint);color:var(--navy);border-radius:5px;padding:3px 8px;margin-bottom:9px}
.pkg h3{color:var(--navy);font-size:16px;margin-bottom:6px}
.pkg .pdesc{font-size:13px;color:var(--grey);margin-bottom:10px}
.pkg ul{list-style:none;margin:0;font-size:12.5px;color:var(--char)}
.pkg ul li{padding:5px 0 5px 18px;position:relative;border-top:1px solid var(--soft)}
.pkg ul li:before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:bold}

/* ===== Portal hero (dual-track + quick access) — Part 10 pre-login ===== */
.portal-hero{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start;margin-top:24px}
@media(max-width:980px){.portal-hero{grid-template-columns:1fr}}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.dual{grid-template-columns:1fr}}
.track-org{border-top:4px solid var(--gold)}
.track-ind{border-top:4px solid var(--gear)}
.portal-hero .card h4{margin-top:8px;font-size:17px}
.portal-hero .card .btn{margin-top:14px;align-self:flex-start}
.quick-access{border:1px solid var(--line);border-radius:13px;background:var(--soft);padding:6px 18px 14px}
.quick-access .qa-h{color:var(--navy);font-size:12px;text-transform:uppercase;letter-spacing:.8px;font-weight:bold;margin:14px 0 2px}
.qa-row{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
.qa-row:last-child{border-bottom:0}
.qa-row b{color:var(--navy);display:block;font-size:14px;transition:.12s}
.qa-row span{color:var(--grey);font-size:12.5px}
.qa-row:hover b{color:var(--navy)}

/* ===== OQ Shabab portal branding (Part 9) ===== */
:root{--oq:var(--oq-teal);--oqnavy:#081d33}

/* OQ portal white panel — Change 1 (2026-06-21)
   --client-accent is scoped here so each future portal sets its own without touching this rule. */
.oq-bar{--client-accent:#FF6B00;background:#FFFFFF;border-bottom:3px solid var(--client-accent);position:sticky;top:67px;z-index:40;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.oq-bar-in{display:flex;align-items:center;gap:16px;padding:13px 0}
.oq-mark{flex:none;display:block}
.oq-co{flex:1;color:var(--primary-navy);line-height:1.25}
.oq-co .oq-name{display:block;font-weight:bold;font-size:15px;color:var(--primary-navy)}
.oq-co .oq-sub{color:#555555;font-size:11px;letter-spacing:.6px;text-transform:uppercase}
.oq-with{display:flex;align-items:center;gap:9px;color:#555555;font-size:11px}
.oq-with img{height:48px;width:auto;display:block}
@media(max-width:560px){.oq-with .oq-with-t{display:none}}

/* Content area below OQ panel — Change 2 (2026-06-21) */
.hero.oq{background:#1E2A4A}
.hero.oq .eyebrow{color:var(--oq)}
.oq-rule{height:3px;background:var(--oq);width:100%}

.btn-oq{background:var(--oq);color:#10294a;border-color:var(--oq)}
.btn-oq:hover{background:#b8913f;border-color:#b8913f}

/* how this portal works — numbered steps */
.oq-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
@media(max-width:860px){.oq-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.oq-steps{grid-template-columns:1fr}}
.oq-step{border:1px solid var(--line);border-top:4px solid var(--oq);border-radius:11px;background:#fff;padding:16px 16px 14px}
.oq-step .on{width:28px;height:28px;border-radius:50%;background:var(--oqnavy);color:var(--oq);font-weight:bold;
  display:flex;align-items:center;justify-content:center;font-size:13px;margin-bottom:10px}
.oq-step h4{color:var(--navy);font-size:15px;margin-bottom:5px}
.oq-step p{font-size:12.5px;color:var(--grey)}

/* OQ requested core module cards */
.oq-core{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(max-width:760px){.oq-core{grid-template-columns:1fr}}
.oq-coremod{border:1px solid var(--line);border-left:4px solid var(--oq);border-radius:12px;background:#fff;padding:16px 18px}
.oq-coremod .mn{font-size:11px;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;color:var(--oq)}
.oq-coremod h4{color:var(--navy);font-size:16px;margin:4px 0 6px}
.oq-coremod p{font-size:13px;color:var(--grey)}

/* OQ add-on theme chips */
.oq-addons{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.oq-addon{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:8px;padding:8px 13px;font-size:12.5px;font-weight:bold}

/* OQ pre-built packages */
.oq-pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:14px;margin-top:22px}
.oq-pkg{cursor:pointer;border:1px solid var(--line);border-radius:13px;background:#fff;padding:16px 17px;display:flex;
  flex-direction:column;transition:transform .14s,box-shadow .14s}
.oq-pkg:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(24,58,100,.13)}
.oq-pkg.sel{box-shadow:0 0 0 2px var(--oq) inset;border-color:var(--oq)}
.oq-pkg .ptag{align-self:flex-start;font-size:10px;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;
  background:var(--navytint);color:var(--navy);border-radius:5px;padding:3px 8px;margin-bottom:9px}
.oq-pkg.sel .ptag{background:var(--oq);color:#fff}
.oq-pkg h4{color:var(--navy);font-size:15px;margin-bottom:9px;line-height:1.25}
.oq-pkg .picks{font-size:12px;color:var(--grey);line-height:1.55;margin-top:auto}
.oq-pkg .picks b{color:var(--navy)}
.oq-pkg .pchoose{font-size:12px;font-weight:bold;color:var(--oq);margin-top:11px}

/* OQ workshop selector (4 subjects x 5 options) */
.oq-subject{margin-top:22px}
.oq-subject .sh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.oq-subject .sh h4{color:var(--navy);font-size:16px}
.oq-subject .sh .mo{font-size:11px;color:var(--grey);text-transform:uppercase;letter-spacing:.5px}
.oq-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:1100px){.oq-opts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.oq-opts{grid-template-columns:1fr}}
.oq-opt{border:1px solid var(--line);border-radius:11px;background:#fff;padding:12px 13px;cursor:pointer;
  display:flex;flex-direction:column;transition:.15s}
.oq-opt:hover{border-color:var(--oq)}
.oq-opt.sel{box-shadow:0 0 0 2px var(--oq) inset;border-color:var(--oq)}
.oq-opt .selbadge{display:none;font-size:9.5px;font-weight:bold;color:#fff;background:var(--oq);border-radius:5px;
  padding:2px 7px;align-self:flex-start;margin-bottom:7px;letter-spacing:.4px;text-transform:uppercase}
.oq-opt.sel .selbadge{display:inline-block}
.oq-opt h5{font-size:12.5px;color:var(--navy);line-height:1.25;font-weight:bold}
.oq-opt .promise{font-size:11.5px;color:var(--grey);margin-top:6px;flex:1}
.oq-opt .pick{font-size:11px;font-weight:bold;color:var(--gear);margin-top:9px}
.oq-opt.sel .pick{color:var(--oq)}
.oq-opt .detbtn{font-size:11px;font-weight:bold;color:var(--gear);background:none;border:0;cursor:pointer;
  padding:9px 0 0;text-align:left;font-family:inherit}
.oq-opt .details{display:none;margin-top:9px;border-top:1px dashed var(--line);padding-top:9px}
.oq-opt .details.open{display:block}
.oq-opt .dlbl{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--navy);font-weight:bold;margin:7px 0 2px}
.oq-opt .dlist{font-size:11px;color:var(--char);line-height:1.5}
.oq-curric{margin-top:4px}
.oq-curric .crow{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid var(--soft);font-size:10.5px}
.oq-curric .crow .ct{color:var(--gear);font-weight:bold;white-space:nowrap;flex:none;width:64px}

/* OQ optional support features (checkboxes) */
.oq-support{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:860px){.oq-support{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.oq-support{grid-template-columns:1fr}}
.oq-feat{border:1px solid var(--line);border-radius:11px;background:#fff;padding:14px 15px;cursor:pointer;
  display:flex;gap:11px;align-items:flex-start;transition:.15s}
.oq-feat:hover{border-color:var(--oq)}
.oq-feat.on{border-color:var(--oq);box-shadow:0 0 0 1px var(--oq) inset}
.oq-feat .chkbox{width:18px;height:18px;border:2px solid var(--line);border-radius:5px;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.oq-feat.on .chkbox{background:var(--oq);border-color:var(--oq)}
.oq-feat h4{font-size:13.5px;color:var(--navy);margin-bottom:3px}
.oq-feat p{font-size:12px;color:var(--grey)}

/* OQ leadership ladder (six levels) */
.oq-ladder{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.oq-rung2{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-left:5px solid var(--oq);
  border-radius:10px;background:#fff;padding:13px 16px}
.oq-rung2:first-child{border-left-color:var(--gold)}
.oq-rung2 .ll{flex:none;width:34px;height:34px;border-radius:8px;background:var(--oqnavy);color:var(--oq);font-weight:bold;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.oq-rung2 h4{color:var(--navy);font-size:15px;margin-bottom:3px}
.oq-rung2 p{font-size:13px;color:var(--grey)}

/* OQ add-on pathway tracks (selectable) */
.oq-tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:860px){.oq-tracks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.oq-tracks{grid-template-columns:1fr}}
.oq-track{border:1px solid var(--line);border-radius:11px;background:#fff;padding:15px 16px;cursor:pointer;
  transition:.15s;display:flex;flex-direction:column}
.oq-track:hover{border-color:var(--oq)}
.oq-track.sel{box-shadow:0 0 0 2px var(--oq) inset;border-color:var(--oq)}
.oq-track h4{color:var(--navy);font-size:14.5px;margin-bottom:8px}
.oq-track ul{list-style:none;margin:0}
.oq-track li{padding:3px 0 3px 14px;position:relative;font-size:12px;color:var(--grey)}
.oq-track li:before{content:"\2022";position:absolute;left:0;color:var(--oq);font-weight:bold}
.oq-track .tsel{font-size:11px;font-weight:bold;color:var(--oq);margin-top:10px}

/* Investment overview (pricing) */
.invest{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
@media(max-width:860px){.invest{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.invest{grid-template-columns:1fr}}
.invcard{border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:13px;background:#fff;padding:18px;
  display:flex;flex-direction:column}
.invcard:nth-child(3){border-top-color:var(--gold)}
.invcard h4{color:var(--navy);font-size:15px;margin-bottom:4px}
.invcard .price{font-size:25px;color:var(--navy);font-weight:bold;margin:8px 0 2px}
.invcard .price small{font-size:12px;color:var(--grey);font-weight:normal}
.invcard .pdesc{font-size:12.5px;color:var(--grey);margin-bottom:8px}
.invcard ul{list-style:none;margin:auto 0 0;font-size:12px;color:var(--char)}
.invcard ul li{padding:4px 0 4px 16px;position:relative;border-top:1px solid var(--soft)}
.invcard ul li:before{content:"\2713";position:absolute;left:0;color:var(--gold);font-weight:bold}
.inv-extra{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.inv-extra .ix b{display:block;font-size:19px;color:var(--navy)}
.inv-extra .ix span{font-size:12px;color:var(--grey)}

/* OQ proposal form + live summary */
.oq-request{display:grid;grid-template-columns:1fr 350px;gap:24px;align-items:start;margin-top:22px}
@media(max-width:920px){.oq-request{grid-template-columns:1fr}}
.oq-form label{display:block;font-size:11px;font-weight:bold;color:var(--navy);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.4px}
.oq-form input,.oq-form select,.oq-form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-family:inherit;font-size:14px;background:#fff;color:var(--char)}
.oq-form textarea{min-height:90px;resize:vertical}
.oq-form .formnote{font-size:12px;color:var(--grey);margin-top:12px}
.oq-summary{position:sticky;top:78px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:18px;
  box-shadow:0 10px 26px rgba(24,58,100,.1)}
@media(max-width:920px){.oq-summary{position:static}}
.oq-summary .sh2{color:var(--navy);font-size:16px;margin-bottom:8px}
.oq-summary .srow{padding:9px 0;border-bottom:1px solid var(--soft);font-size:13px}
.oq-summary .srow:last-of-type{border-bottom:0}
.oq-summary .sk{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);font-weight:bold;display:block}
.oq-summary .sv{color:var(--navy);font-weight:bold}
.oq-summary .creat{font-size:11px;color:var(--grey);font-weight:normal;display:block;margin-top:2px}
.oq-summary .sactions{margin-top:14px;display:flex;flex-direction:column;gap:8px}

/* OQ portal print stylesheet (Part 9) */
@media print{
  .site-header,.oq-bar,.hero,.oq-rule,.oq-support,.site-footer,.toast,.nav-toggle,.lockwrap,
  .oq-summary .sactions,.oq-form,.detbtn{display:none!important}
  .oq-summary{position:static!important;box-shadow:none!important;border:1px solid #999}
  .oq-request{grid-template-columns:1fr!important}
  section{padding:12px 0!important;break-inside:avoid}
  .oq-opt:not(.sel){display:none!important}
  .oq-opt .details{display:block!important}
  body{background:#fff}
  /* Agenda elements visible in print */
  .agenda-section,.agenda-body,.agenda-toggle{display:block!important}
  .agenda-table{border-collapse:collapse!important}
  .agenda-table th,.agenda-table td{border:1px solid #e2ddd4!important;padding:5px 8px!important}
  .agenda-disclaimer-box{border:1px solid var(--gold)!important;background:#fffbf0!important}
}

/* ===== OQ hidden admin panel (?admin=pricing) — never rendered for clients ===== */
.oqadmin{position:fixed;right:18px;bottom:18px;width:384px;max-height:86vh;background:#0d2240;color:#fff;
  border:2px solid var(--gold);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:9000;
  display:flex;flex-direction:column;overflow:hidden;font-size:13px}
.oqadmin .ahead{padding:11px 14px;background:#081d33;border-bottom:1px solid #1f3a5c;display:flex;align-items:center;gap:10px}
.oqadmin .ahead .ht{line-height:1.25}
.oqadmin .ahead .at{font-weight:bold;font-size:12.5px;color:var(--gold);display:block}
.oqadmin .ahead .acl{font-size:9.5px;color:#9fb4cc;text-transform:uppercase;letter-spacing:.4px}
.oqadmin .amin{margin-left:auto;background:transparent;border:1px solid #2a4d77;color:#fff;border-radius:6px;
  width:28px;height:26px;cursor:pointer;font-family:inherit;font-size:15px;line-height:1}
.oqadmin .atabs{display:flex;gap:5px;padding:8px 10px;background:#0a2036;border-bottom:1px solid #1f3a5c}
.oqadmin .atabs button{flex:1;font-family:inherit;font-size:12px;font-weight:bold;border:0;border-radius:6px;
  padding:8px;cursor:pointer;background:transparent;color:#cdd9ea}
.oqadmin .atabs button.on{background:var(--gold);color:#10294a}
.oqadmin .abody{overflow:auto;padding:12px 14px;flex:1}
.oqadmin .apane{display:none}
.oqadmin .apane.on{display:block}
.oqadmin .fld{margin-bottom:10px}
.oqadmin .fld label{display:block;font-size:10.5px;color:#cdd9ea;margin-bottom:3px;letter-spacing:.2px}
.oqadmin .fld .where{display:block;color:#6f86a3;font-size:9.5px;margin-top:1px}
.oqadmin .fld input,.oqadmin .fld textarea{width:100%;background:#0a2036;border:1px solid #2a4d77;border-radius:6px;
  color:#fff;font-family:inherit;font-size:13px;padding:7px 9px}
.oqadmin .fld textarea{min-height:46px;resize:vertical}
.oqadmin .pricerow{display:flex;align-items:center;gap:7px}
.oqadmin .pricerow .cur{color:#9fb4cc;font-size:11px;font-weight:bold}
.oqadmin .grp{border-top:1px dashed #1f3a5c;margin:14px 0 9px;padding-top:9px;font-size:10.5px;color:var(--gold);
  font-weight:bold;text-transform:uppercase;letter-spacing:.5px}
.oqadmin .ahist .hentry{border:1px solid #1f3a5c;border-radius:7px;padding:8px 10px;margin-bottom:7px;background:#0a2036}
.oqadmin .hentry .htime{font-size:10px;color:#9fb4cc}
.oqadmin .hentry .hsum{font-size:12px;margin:3px 0 7px}
.oqadmin .hentry .restore{font-size:11px;font-weight:bold;background:transparent;border:1px solid var(--gold);
  color:var(--gold);border-radius:5px;padding:4px 10px;cursor:pointer;font-family:inherit}
.oqadmin .alog{max-height:150px;overflow:auto;border:1px solid #1f3a5c;border-radius:7px;background:#0a2036;padding:6px 10px}
.oqadmin .alog .lrow{font-size:11px;color:#cdd9ea;padding:4px 0;border-bottom:1px solid #14283f}
.oqadmin .alog .lrow:last-child{border-bottom:0}
.oqadmin .alog .lt{color:#8FA5C0}
.oqadmin .anote{font-size:11px;color:#9fb4cc;background:#0a2036;border:1px dashed #2a4d77;border-radius:7px;
  padding:8px 10px;margin-top:10px}
.oqadmin .afoot{padding:9px 12px;background:#081d33;border-top:1px solid #1f3a5c;display:flex;flex-wrap:wrap;gap:7px}
.oqadmin .abtn{font-family:inherit;font-size:12px;font-weight:bold;border:1px solid #2a4d77;background:#13325a;color:#fff;
  border-radius:7px;padding:8px 11px;cursor:pointer;flex:1;min-width:70px}
.oqadmin .abtn.gold{background:var(--gold);color:#10294a;border-color:var(--gold)}
.oqadmin .abtn.warn{background:#5a1e1e;border-color:#7a2a2a;color:#ffd9d9}
.oqadmin.min .atabs,.oqadmin.min .abody,.oqadmin.min .afoot{display:none}
@media(max-width:600px){
  .oqadmin{right:0;left:0;bottom:0;width:auto;max-height:82vh;border-radius:12px 12px 0 0;border-left:0;border-right:0;border-bottom:0}
  .oqadmin .abtn{flex:1 1 100%}
}
/* admin reset confirmation */
.oqadmin-confirm{position:fixed;inset:0;background:rgba(4,12,22,.72);z-index:9100;display:flex;align-items:center;justify-content:center;padding:18px}
.oqadmin-confirm .box{background:#0d2240;border:2px solid var(--gold);border-radius:12px;max-width:420px;padding:22px;color:#fff}
.oqadmin-confirm h4{color:var(--gold);font-size:15px;margin-bottom:10px}
.oqadmin-confirm p{font-size:13px;color:#cdd9ea;line-height:1.5;margin-bottom:16px}
.oqadmin-confirm .row{display:flex;gap:9px;justify-content:flex-end}

/* OQ trainer cards (Delivery assurance) — equal-weight two-person grid */
.trainer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
@media(max-width:680px){.trainer-grid{grid-template-columns:1fr}}
.trainer-card{border:1px solid var(--line);border-radius:13px;background:#fff;padding:20px 20px 18px;display:flex;flex-direction:column}
.trainer-top{display:flex;gap:16px;align-items:center;margin-bottom:13px}
.trainer-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--goldtint);background:var(--soft)}
.trainer-id h4{color:var(--navy);font-size:18px;margin-bottom:4px;line-height:1.2}
.trainer-id .ttitle{font-size:11.5px;color:#8a6d18;font-weight:bold;line-height:1.4;text-transform:uppercase;letter-spacing:.3px}
.trainer-card .tsum{font-size:13px;color:var(--grey);margin-bottom:13px;line-height:1.6}
.trainer-card .thl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--navy);font-weight:bold;margin-bottom:4px}
.trainer-card ul{list-style:none;margin:0}
.trainer-card li{position:relative;padding:6px 0 6px 16px;font-size:12.5px;color:var(--char);border-top:1px solid var(--soft);line-height:1.45}
.trainer-card li:before{content:"\25AA";position:absolute;left:0;top:6px;color:var(--gold);font-size:11px}

/* toast (copy confirmation) */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--navy);color:#fff;
  padding:11px 18px;border-radius:8px;font-size:13px;font-weight:bold;box-shadow:0 10px 26px rgba(16,28,46,.35);
  opacity:0;pointer-events:none;transition:.18s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Programme ladder — ten rungs, table-style rows with audience dots */
.rung-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--grey);margin:16px 0 2px}
.rung-legend span{display:inline-flex;align-items:center;gap:7px}
.dot{width:13px;height:13px;border-radius:50%;display:inline-block;border:1px solid transparent;flex:none}
.dot.org{background:var(--navy)}
.dot.ind{background:var(--gold)}
.dot.na{background:#fff;border-color:var(--line)}
.rungs{margin-top:12px;border-top:1px solid var(--line)}
.rung{display:grid;grid-template-columns:48px 1fr auto auto;gap:18px;align-items:center;
  padding:15px 4px;border-bottom:1px solid var(--line)}
.rung .rn{width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:bold;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.rung .rmain h4{color:var(--navy);font-size:15.5px;margin-bottom:3px;line-height:1.25}
.rung .rmain p{font-size:13px;color:var(--grey);max-width:600px}
.rung .rdots{display:flex;gap:7px;align-items:center}
.rung .ract .btn{white-space:nowrap}
.rung.hide{display:none}
@media(max-width:720px){
  .rung{grid-template-columns:40px 1fr;gap:6px 14px;align-items:start}
  .rung .rn{grid-row:1;grid-column:1}
  .rung .rmain{grid-row:1;grid-column:2}
  .rung .rdots{grid-row:2;grid-column:2;justify-self:start;margin-top:4px}
  .rung .ract{grid-row:3;grid-column:2;justify-self:start;margin-top:4px}
}

/* ===== Career-stage selector (homepage) ===== */
a.stage-card{text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
a.stage-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(24,58,100,.16);border-color:var(--navy)}
.stage-label{font-size:10.5px;font-weight:bold;letter-spacing:1px;text-transform:uppercase;
  color:var(--navy);background:var(--navytint);border-radius:5px;padding:3px 9px;
  align-self:flex-start;margin-bottom:10px}
.stage-subjects{font-size:12px;color:var(--grey);margin-top:10px;line-height:1.55;flex:1}
.stage-cta{font-size:13px;font-weight:bold;color:var(--navy);margin-top:16px;display:inline-flex;
  align-items:center;gap:5px;transition:.15s}
a.stage-card:hover .stage-cta{color:var(--gear)}

/* ===== Learning ring cards (homepage) ===== */
.ring-card{position:relative}
.ring-domain{font-size:10px;font-weight:bold;letter-spacing:.8px;text-transform:uppercase;
  color:var(--grey);margin-bottom:8px}
.ring-subjects{display:flex;flex-direction:column;gap:4px;margin-top:12px;flex:1}
.ring-subjects span{font-size:12px;color:var(--char);padding:4px 0;border-bottom:1px dashed var(--line)}
.ring-subjects span:last-child{border-bottom:0}

/* ===== Nav dropdown / nav typography -- REMOVED 2026-07-26 =================
   Two blocks used to live here:

   1. A second, complete `.nav-dropdown-*` generation. It silently won over the
      one in the header section above at equal specificity, so the nav was
      rendering from a set of values nobody was reading. It also carried
      `list-style:none` and `li:last-child a` for a <ul> the markup has never
      used. See nav-rebuild-notes 2.2.

   2. The "Item 5 -- Nav typography & alignment" override of `.site-nav > a` and
      `.nav-dropdown-btn`. It re-declared `padding:6px 1px` 776 lines after the
      layout rule it overrode, which is what destroyed the horizontal hit-area
      padding and left the top-level touch targets under 44px. The header only
      looked right because `justify-content:space-evenly` was spreading the
      items. See nav-rebuild-notes 2.3.

   Both are folded into the single generation in the header section at the top of
   this file. Do not re-add nav rules here -- keep one generation.
   ========================================================================= */

/* Brand-lock completeness (Rule 1): the Log out button in the top bar must not
   shift with the admin theme. Scoped to .authnav so other ghost buttons below
   the nav can still theme. Inherits --chrome-gold from .site-header. */
.authnav .btn-ghost:hover{
  border-color:var(--chrome-gold);color:var(--chrome-gold);
}

/* ===== Dark/Light Mode Toggle =====
   theme-toggle.js:48-58 mounts this button as the first child of .authnav and
   nowhere else, so it always sits inside .site-header and inherits --chrome-*.
   Size raised 36px -> 44px to meet the touch-target baseline.
   `flex-none` (not a property) corrected to `flex:none` -- it had never applied. */
.theme-toggle{background:transparent;
  border:1.5px solid var(--chrome-border);border-radius:var(--radius-md);
  color:var(--chrome-text);
  cursor:pointer;width:44px;height:44px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;
  transition:border-color var(--transition-base),color var(--transition-base)}
.theme-toggle:hover{border-color:var(--chrome-gold);color:var(--chrome-gold)}
.authnav .theme-toggle{margin-right:var(--space-1)}

/* ===== Dark Mode =====
   tokens.css sets the base dark-mode token values; only overrides that differ
   from that baseline (or add new vars) belong here. */
[data-theme="dark"]{
  --color-navy:        #0A1628;
  --color-gold:        #C9A84C;
  --color-surface-2:   #1A1440;
  --color-surface-3:   #22205a;
  --color-text-muted:  #A0AEC0;
  --color-border-default: rgba(var(--gold-rgb),0.2);
}
[data-theme="dark"] body{background:var(--primary-navy);color:#F5F5F5}
/* Content bands + cards consume the resolved surface vars in BOTH modes so the
   administrator hue carries through dark too (resolveTheme writes the dark form;
   the navy default resolves to #1A1440, preserving the historic dark skin). */
[data-theme="dark"] section.alt{background:var(--color-surface-light)}
[data-theme="dark"] .card{background:var(--color-surface-1);border-color:rgba(var(--gold-rgb),0.2);color:#F5F5F5}
[data-theme="dark"] h2.sec,[data-theme="dark"] h3.sub{color:#F5F5F5}
[data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] .char{color:#C8D6E8}
/* .site-header is brand-locked with !important in the base rule — no dark-mode override needed */
[data-theme="dark"] section.navy{background:var(--primary-navy)}
[data-theme="dark"] .card:hover{box-shadow:0 8px 24px rgba(var(--gold-rgb),0.15)}

/* SESSION T9 -- components that were never given a dark form, because dark mode
   could not render.
   Repairing the nested block comment at tokens.css:303 activates that file's
   [data-theme="dark"] block for the first time. Two of the tokens it turns on,
   --color-navy-tint (#EAEFF5 -> #1A2A4A) and --color-surface-1 (#FFFFFF ->
   #1A1440), are used as BACKGROUNDS by components whose text colour is
   var(--navy). While the block was dead those backgrounds stayed light and navy
   text was correct; once it is live the same rules paint navy on navy.
   Measured before adding this block, in dark mode, on the rendered pages:
     .card h4 / .card .meta b   #0A1628 on #1A1440  1.05:1   (needs 4.5:1)
     .card .ic, .layer .lyr-n   #0A1628 on #1A2A4A  1.27:1   (needs 4.5:1)
     .seclabel, .stream-tag,
     .quick-access .qa-h        #0A1628 on #0A1628  1.00:1   (needs 4.5:1)
   50 such failures across programmes, technical-track, leadership-track and
   client-portals/index. They are not bad token values -- each of the 12 dark
   values is sound on its own -- so the correction belongs with the components,
   not in tokens.css.
   LIGHT MODE IS UNTOUCHED: every selector here is scoped to [data-theme="dark"].
   Colours come from existing :root tokens; no new token and no hardcoded hex. */

/* Uppercase letter-spaced labels are eyebrows. tokens.css already carries the
   pair: --color-eyebrow for light surfaces, --color-eyebrow-dark (gold) for dark
   navy ones. Gold on #0A1628 is 7.62:1, and the design system reserves gold for
   headings and interactive elements -- which is exactly what these are. */
[data-theme="dark"] .seclabel,
[data-theme="dark"] .stream-tag,
[data-theme="dark"] .quick-access .qa-h{color:var(--color-eyebrow-dark)}

/* Card titles and emphasis: white, matching h2.sec / h3.sub above.
   .qa-row carries its colour on the ANCHOR -- its <b> has no colour rule of its
   own and simply inherits -- so the anchor is listed as well as the <b>. */
[data-theme="dark"] .card h4,
[data-theme="dark"] .card .meta b,
[data-theme="dark"] .quick-access .qa-row,
[data-theme="dark"] .quick-access .qa-row b,
[data-theme="dark"] .quick-access .qa-row:hover b{color:var(--color-text-primary)}

/* The navy-on-navy-tint family. Every one of these is
   background:var(--navytint);color:var(--navy) in the base sheet, so they all
   fail the moment --color-navy-tint darkens. Re-point the text, not the tint. */
[data-theme="dark"] .card .ic,
[data-theme="dark"] .layer .lyr-n,
[data-theme="dark"] .pill,
[data-theme="dark"] .bdg.lv,
[data-theme="dark"] .mnote,
[data-theme="dark"] .strip{color:var(--color-text-primary)}
/* Light mode (default) — explicit so toggling back from dark works */
[data-theme="light"] body{background:#fff;color:#2C2C2C}
[data-theme="light"] section.alt{background:var(--color-surface-light)}
[data-theme="light"] .card{background:#fff}

/* ==========================================================================
   ARIMO TYPOGRAPHY SYSTEM — 2026-06-27
   Executive sans-serif hierarchy. Single font family site-wide.
   ========================================================================== */

/* ── Global font reset ── */
*, *::before, *::after {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
}

body {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── Hero headlines ── */
.hero h1,
.hero-v2__headline,
.page-hero__headline {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ── Eyebrow / section labels ── */
.eyebrow,
.seclabel,
.v2-eyebrow,
.hero-v2__eyebrow,
.section-label,
.nav-label,
.stat-label,
.badge,
.pill {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Navigation ──
   REMOVED 2026-07-26. This was a third place setting nav typography
   (`.site-nav`, `.site-nav a`, `.nav-dropdown-btn`, `.nav-dropdown-menu a`).
   It was harmless only by accident -- lower specificity than the consolidated
   block at the top of this file -- but it is exactly the duplication that
   produced the two-generation bug. Nav font-family and weight now come from that
   single block, via --font-primary and the --font-weight-* tokens.
   Do not re-add nav selectors here. */

/* ── Buttons ── */
button,
.btn,
.button,
.cta,
.btn-hero-primary,
.btn-hero-ghost {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 700;
}

/* ── Cards ── */
.card h4,
.v2-stream-card__title,
.v2-audience-card h4 {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Body / lead text ── */
p,
.lead,
.v2-lead,
.v2-split__text p,
.card p,
.card .meta {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.65;
}

/* ── Forms ── */
input, textarea, select, label {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
}

/* ── Footer ── */
footer,
.site-footer,
.footer-v2 {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
}

/* ── Stats numbers ── */
.stat b,
.v2-stats__number {
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   WCAG CONTRAST FIXES — 2026-06-27
   Audit: 5 failures fixed below. All ratios verified against WCAG AA (4.5:1).
   ========================================================================== */

/* FIX 1 — Gold eyebrow labels on light/white backgrounds FAIL (2.29:1).
   Gold is only permitted on dark navy backgrounds.
   On light sections, eyebrows use navy (#0A1628 = 18.1:1 on white). */
.eyebrow,
.seclabel,
.v2-eyebrow,
.section-label,
.nav-label {
  color: #0A1628; /* navy — 18.1:1 on white, 16.9:1 on #F4F7FC — PASS AAA */
}

/* FIX 1b — Restore gold eyebrows ONLY on dark navy / hero backgrounds */
.hero .eyebrow,
.hero .seclabel,
.hero .v2-eyebrow,
.hero .section-label,
.hero-v2 .eyebrow,
.hero-v2 .seclabel,
.hero-v2 .v2-eyebrow,
.hero-v2 .hero-v2__eyebrow,
.v2-dark-section .eyebrow,
.v2-dark-section .seclabel,
.v2-dark-section .v2-eyebrow,
.v2-dark-section .section-label,
[class*="dark-bg"] .eyebrow,
[class*="dark-bg"] .seclabel,
[class*="dark-bg"] .v2-eyebrow,
.v2-methodology .eyebrow,
.v2-methodology .seclabel,
.v2-methodology .v2-eyebrow,
.v2-why .eyebrow,
.v2-why .seclabel,
.v2-why .v2-eyebrow,
.reg-banner .eyebrow {
  color: #C9A84C; /* gold — 7.93:1 on navy — PASS AAA */
}

/* FIX 2 — Light grey #9CA3AF on white FAILS (2.54:1).
   This colour must never be used for readable text.
   Any .text-light or .text-muted-light usage is overridden to safe grey. */
.text-light,
.text-muted-light,
[class*="text-light"] {
  color: #6B7280; /* safe muted grey — 4.83:1 on white — PASS AA */
}

/* FIX 3 — Dark mode: #6B7280 muted grey on #1A1440 surface FAILS (3.57:1).
   In dark mode, muted text must use the lightened token #A8BDD0. */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .meta,
[data-theme="dark"] .card .meta,
[data-theme="dark"] .card p,
[data-theme="dark"] .muted {
  color: #A8BDD0; /* 9.2:1 on #1A1440 — PASS AAA */
}

/* FIX 4 — Footer tagline gold on navy: already passes (7.93:1).
   Keeping gold in footer — no change needed. */

/* FIX 5 — matrix.css .eyebrow also uses gold globally.
   Scoped override: on light-bg sections within matrix.css components. */
.section-light .eyebrow,
.card .eyebrow,
.card .seclabel,
.v2-card .eyebrow,
.v2-card .seclabel {
  color: #0A1628; /* navy on white cards — PASS AAA */
}