/* ============================================================================
   BDRI - shared chrome (reset, type roles, nav, footer, buttons, layout)
   Used across all page-type design references. Built on tokens.css.
   Light register = :root default. Dark register = [data-register="dark"].
   ============================================================================ */

:root {
  --measure: 66ch;
  --measure-narrow: 54ch;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  background: var(--color-surface-default);
  color: var(--color-text-default);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--color-surface-default);
  color: var(--color-text-default);
  font-family: var(--bdri-text-body-family);
  font-size: var(--bdri-text-body-size);
  font-weight: var(--bdri-text-body-weight);
  line-height: var(--bdri-text-body-lh);
  letter-spacing: var(--bdri-text-body-tracking);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }

a {
  color: var(--color-text-link);
  text-decoration-thickness: var(--bw-divider);
  text-underline-offset: 0.18em;
}
/* gold = "act here": in-prose links (plain anchors that aren't buttons, nav,
   cards, or other already-styled affordances) turn gold on hover - both the
   TEXT and the underline. The :not() guard keeps this off component links that
   carry their own hover. On light surfaces the text uses the contrast-safe deep
   gold (bright flag gold fails as text); the underline keeps the bright gold as
   a graphic accent. On dark surfaces (see the [data-register='dark'] block
   below) the bright flag gold is legible as text and is used directly. */
a:not([class]):hover {
  color: var(--bdri-color-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--bdri-color-gold);
  text-decoration-thickness: var(--bw-input-focus);
  text-underline-offset: 0.2em;
}

strong { font-weight: var(--bdri-weight-semibold); color: var(--color-text-default); }

:focus-visible {
  outline: var(--bw-input-focus) solid var(--color-accent-primary);
  outline-offset: var(--space-inset-xs);
  border-radius: var(--radius-input);
}

[data-register='dark'] {
  background: var(--color-surface-default);
  color: var(--color-text-default);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* tabular numerals helper for any data figure */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- layout primitives ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-inset-md);
}
@media (min-width: 760px) {
  .wrap { padding-inline: var(--space-inset-lg); }
}

/* ---- shared type roles ---------------------------------------------------- */

.eyebrow {
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-caption);
  font-weight: var(--bdri-weight-semibold);
  line-height: var(--bdri-lh-normal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
}
.eyebrow--ink { color: var(--color-text-muted); }

.section-head { max-width: var(--measure); margin-bottom: var(--bdri-space-7); }

.section-title {
  font-family: var(--bdri-text-h2-family);
  font-size: var(--bdri-text-h2-size);
  font-weight: var(--bdri-text-h2-weight);
  line-height: var(--bdri-text-h2-lh);
  letter-spacing: var(--bdri-text-h2-tracking);
  margin-block: var(--bdri-space-3) var(--bdri-space-4);
  text-wrap: balance;
}

.section-intro {
  font-size: var(--bdri-size-body-lg);
  line-height: var(--bdri-lh-loose);
  color: var(--color-text-subtle);
}

.section-foot {
  margin-top: var(--bdri-space-6);
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-caption);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bdri-space-2);
  font-weight: var(--bdri-weight-semibold);
  text-decoration: none;
  color: var(--color-text-link);
}
/* gold = "act here": on hover the text AND the underline both go gold. On light
   surfaces the text uses the contrast-safe deep gold (bright flag gold fails AA
   as text) while the underline keeps the bright gold graphic accent. On dark
   surfaces the bright flag gold is legible and is used for the text too (see the
   [data-register='dark'] override below). */
.text-link:hover {
  color: var(--bdri-color-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--bdri-color-gold);
  text-decoration-thickness: var(--bw-input-focus);
  text-underline-offset: 0.2em;
}

/* dark surfaces: bright flag gold is legible as text on ink, so text-links and
   in-prose links use the bright gold for BOTH text and underline on hover. */
[data-register="dark"] a:not([class]):hover,
[data-register="dark"] .text-link:hover {
  color: var(--bdri-color-gold);
  text-decoration-color: var(--bdri-color-gold);
}

/* ---- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inset-sm);
  min-height: 48px;
  padding-inline: var(--bdri-space-5);
  border-radius: var(--radius-button);
  font-family: var(--bdri-text-button-family);
  font-size: var(--bdri-text-button-size);
  font-weight: var(--bdri-text-button-weight);
  letter-spacing: var(--bdri-text-button-tracking);
  line-height: var(--bdri-lh-tight);
  text-decoration: none;
  transition: background-color 200ms ease-out, color 200ms ease-out,
    border-color 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out;
}
.btn--primary {
  background: var(--color-accent-primary);
  color: var(--color-text-inverted);
  border: var(--bw-divider) solid var(--color-accent-primary);
}
/* gold = "act here": primary button shifts to a gold fill on hover with INK text
   (gold-on-ink is 11.36:1; ink-on-gold reads clean and gold is never used as text). */
.btn--primary:hover {
  background: var(--bdri-color-gold);
  border-color: var(--bdri-color-gold);
  color: var(--bdri-color-ink);
  transform: translateY(-1px);
  filter: none;
}
.btn--ghost {
  background: transparent;
  color: var(--color-text-default);
  border: var(--bw-input-focus) solid var(--color-border-default);
}
/* ghost button: gold border + subtle lift; text stays ink (gold is never text). */
.btn--ghost:hover {
  border-color: var(--bdri-color-gold);
  color: var(--color-text-default);
  background: color-mix(in srgb, var(--bdri-color-gold) 12%, transparent);
  transform: translateY(-1px);
}
.btn__soon {
  font-family: var(--bdri-font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--color-surface-callout-highlight);
  color: var(--bdri-color-ink);
}

/* ---- door-state vocabulary (aquamarine / gold / steel + TEXT, never traffic lights) */
.dot { width: 12px; height: 12px; border-radius: var(--radius-pill); flex: 0 0 auto; display: inline-block; }
.dot--strong { background: var(--color-door-strong); }
.dot--developing { background: var(--color-door-developing); }
.dot--gap { background: var(--color-door-gap); }
[data-register='dark'] .dot--gap { background: var(--bdri-color-steel-light); }

/* generic door bar (light register) */
.bar {
  position: relative; display: block;
  height: 10px; border-radius: var(--radius-pill);
  background: var(--color-surface-subtle); overflow: hidden;
}
.bar__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--w, 0%); border-radius: var(--radius-pill);
}
.bar__fill--strong { background: var(--color-door-strong); }
.bar__fill--developing { background: var(--color-door-developing); }
.bar__fill--gap { background: var(--color-door-gap); }

/* ============================================================================
   HEADER / NAV (shared component)
   ============================================================================ */

.masthead-nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--color-surface-default) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: var(--bw-divider) solid var(--color-border-subtle);
}
.masthead-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bdri-space-4); padding-block: var(--bdri-space-3);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--bdri-space-3);
  color: var(--color-text-default); text-decoration: none;
  padding: var(--bdri-space-1) var(--bdri-space-2);
  margin-inline-start: calc(-1 * var(--bdri-space-2));
  border-radius: var(--radius-card);
  transition: background-color 160ms ease-out;
}
/* clear home affordance: the wordmark reads as a clickable home link on hover/focus */
.brand:hover { background: var(--color-surface-subtle); }
.brand:hover .brand__name { color: var(--color-accent-primary); }
.brand:focus-visible { outline: var(--bw-input-focus) solid var(--color-accent-primary); outline-offset: var(--space-inset-xs); }
.brand__mark {
  position: relative; flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: var(--radius-card); background: var(--color-surface-accent); overflow: hidden;
}
.brand__mark-sea, .brand__mark-sun {
  position: absolute; inset-block: 9px; width: 8px; border-radius: var(--radius-pill);
}
.brand__mark-sea { inset-inline-start: 10px; background: var(--color-accent-primary); }
.brand__mark-sun { inset-inline-start: 22px; background: var(--color-accent-graphic); }
.brand__text { display: grid; gap: 2px; }
.brand__name {
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-body-lg);
  font-weight: var(--bdri-weight-bold); line-height: var(--bdri-lh-tight); letter-spacing: 0.01em;
}
.brand__descriptor {
  font-family: var(--bdri-font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--color-text-muted); white-space: nowrap;
}
.primary-nav { display: flex; align-items: center; gap: var(--bdri-space-5); }
.primary-nav__list { display: flex; align-items: center; gap: var(--bdri-space-2); list-style: none; padding: 0; margin: 0; }
.primary-nav__list a[data-mobile-primary] { display: none; }
.primary-nav__link {
  display: inline-flex; align-items: center; gap: var(--bdri-space-2);
  min-height: 40px; padding-inline: var(--bdri-space-3);
  border-radius: var(--radius-pill); color: var(--color-text-subtle);
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-tight);
  text-decoration: none; white-space: nowrap;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}
.primary-nav__link:hover {
  color: var(--color-text-default);
  background: var(--color-surface-subtle);
  box-shadow: inset 0 -2px 0 0 var(--bdri-color-gold); /* gold = interactive affordance */
}
/* with Home + two submenus + Insights + About + the score button, the desktop
   row is denser - tighten link/toggle padding in the medium-desktop band so it
   never crowds the score action before the 900px mobile breakpoint takes over. */
@media (min-width: 901px) and (max-width: 1120px) {
  .primary-nav { gap: var(--bdri-space-4); }
  .primary-nav__list { gap: var(--bdri-space-1); }
  .primary-nav__link { padding-inline: var(--bdri-space-2); }
  .nav-submenu__toggle { padding-inline: var(--bdri-space-2); }
}
.primary-nav__link[aria-current='page'] {
  color: var(--color-text-default);
  box-shadow: inset 0 -2px 0 0 var(--color-accent-primary); border-radius: 0;
}

/* ---- nav submenu: "The Four Doors" exposes the 4 individual doors ---------
   RECOMMENDED DEFAULT (operator decision pending). Disclosure pattern:
   desktop = hover/focus-open; mobile = the items render inline in the panel.
   Progressive enhancement: with JS off, the parent link still goes to /four-doors. */
.nav-has-submenu { position: relative; }
.nav-submenu__toggle {
  display: inline-flex; align-items: center; gap: var(--bdri-space-2);
  min-height: 40px; padding-inline: var(--bdri-space-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-pill);
  color: var(--color-text-subtle);
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-tight); white-space: nowrap;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}
.nav-submenu__toggle:hover { color: var(--color-text-default); background: var(--color-surface-subtle); }
.nav-submenu__caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 160ms ease-out; }
.nav-has-submenu[data-open='true'] .nav-submenu__caret { transform: rotate(-135deg) translateY(-1px); }
.nav-submenu {
  list-style: none; margin: 0; padding: var(--bdri-space-2);
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 230px;
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--bdri-shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 0s linear 140ms;
}
.nav-has-submenu[data-open='true'] .nav-submenu,
.nav-has-submenu:hover .nav-submenu,
.nav-has-submenu:focus-within .nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}
.nav-submenu__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bdri-space-3);
  min-height: 40px; padding: var(--bdri-space-2) var(--bdri-space-3);
  border-radius: var(--radius-input);
  color: var(--color-text-default); text-decoration: none;
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold);
}
.nav-submenu__link:hover {
  background: var(--color-surface-subtle);
  color: var(--color-accent-primary);
  box-shadow: inset 2px 0 0 0 var(--bdri-color-gold); /* gold = interactive affordance */
}
.nav-submenu__rate { font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption); font-weight: var(--bdri-weight-regular); color: var(--color-text-muted); }
.nav-submenu__all { margin-top: var(--bdri-space-1); padding-top: var(--bdri-space-2); border-top: var(--bw-divider) solid var(--color-border-subtle); }
.nav-submenu__all .nav-submenu__link { color: var(--color-text-link); }

/* ---- breadcrumbs (deep pages: industry, door, insight article) -----------
   RECOMMENDED DEFAULT. Gives a one-click path up to the section parent -
   directly addresses "doors are reachable only two levels deep". */
.breadcrumb { background: var(--color-surface-subtle); border-bottom: var(--bw-divider) solid var(--color-border-subtle); }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bdri-space-2);
  list-style: none; margin: 0; padding-block: var(--bdri-space-3);
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption); letter-spacing: 0.02em;
}
.breadcrumb__list li { display: inline-flex; align-items: center; gap: var(--bdri-space-2); }
.breadcrumb__list a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb__list a:hover { color: var(--color-accent-primary); text-decoration: underline; text-decoration-color: var(--bdri-color-gold); text-decoration-thickness: var(--bw-input-focus); }
.breadcrumb__sep { color: var(--color-text-muted); }
.breadcrumb__current { color: var(--color-text-default); font-weight: var(--bdri-weight-semibold); }

.score-action {
  display: inline-flex; align-items: center; gap: var(--bdri-space-2);
  min-height: 42px; padding-inline: var(--bdri-space-4);
  border: var(--bw-input-focus) solid var(--color-accent-primary);
  border-radius: var(--radius-button); color: var(--color-accent-primary);
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold); text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}
/* score CTA: gold border + subtle gold wash on hover (gold = act); text stays the
   legible aquamarine accent in both registers (gold is never text). */
.score-action:hover {
  background: color-mix(in srgb, var(--bdri-color-gold) 14%, transparent);
  border-color: var(--bdri-color-gold);
  color: var(--color-accent-primary);
}
.score-action__soon, .primary-nav__soon {
  font-family: var(--bdri-font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--color-surface-callout-highlight); color: var(--bdri-color-ink);
}
.nav-toggle {
  display: none; align-items: center; gap: var(--bdri-space-2);
  min-height: 44px; min-width: 44px; padding-inline: var(--bdri-space-3);
  border: var(--bw-divider) solid var(--color-border-default);
  border-radius: var(--radius-button); background: var(--color-surface-default);
  color: var(--color-text-default); font-family: var(--bdri-font-body);
  font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold); cursor: pointer;
}
.nav-close {
  display: none; position: absolute; top: var(--bdri-space-4); right: var(--bdri-space-4);
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-button); background: var(--color-surface-default);
  color: var(--color-text-default); font-size: 28px; line-height: 1; cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; background: var(--color-text-default);
  border-radius: var(--radius-pill); position: relative;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  body.js .primary-nav .nav-close { display: inline-flex; }
  body.nav-locked { overflow: hidden; }
  body.js .primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 40;
    width: min(86vw, 360px); height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: var(--bdri-space-7) var(--bdri-space-5) var(--bdri-space-6);
    background: var(--color-surface-default);
    border-left: var(--bw-divider) solid var(--color-border-subtle);
    box-shadow: var(--bdri-shadow-modal);
    transform: translateX(100%);
    transition: transform 240ms ease-out, visibility 0s linear 240ms;
    overflow-y: auto; visibility: hidden; pointer-events: none;
  }
  body.js .primary-nav.is-open {
    transform: translateX(0); visibility: visible; pointer-events: auto;
    transition: transform 240ms ease-out;
  }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .primary-nav__list a[data-mobile-primary] {
    display: flex; justify-content: center; min-height: 52px;
    margin-top: var(--bdri-space-6); margin-bottom: var(--bdri-space-4);
    border: var(--bw-input-focus) solid var(--color-accent-primary);
    border-radius: var(--radius-button); color: var(--color-accent-primary); background: transparent;
  }
  .score-action { display: none; }
  .primary-nav__link {
    min-height: 48px; width: 100%; border-radius: 0;
    border-bottom: var(--bw-divider) solid var(--color-border-subtle);
    font-size: var(--bdri-size-body); color: var(--color-text-default);
  }
  .primary-nav__link[aria-current='page'] { box-shadow: inset 3px 0 0 0 var(--color-accent-primary); }

  /* mobile: the Four-Doors submenu renders inline (always open, indented) -
     no hover/popover on touch. The toggle button is hidden; items list inline. */
  .nav-has-submenu { width: 100%; }
  .nav-submenu__toggle { display: none; }
  .nav-submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; box-shadow: none; border: none; padding: 0;
    background: transparent; transition: none;
  }
  .nav-submenu__link {
    min-height: 44px; padding-left: var(--bdri-space-5);
    border-bottom: var(--bw-divider) solid var(--color-border-subtle);
    border-radius: 0;
  }
  .nav-submenu__link::before { content: '\21B3'; margin-right: var(--bdri-space-2); color: var(--color-text-muted); }
}

/* ============================================================================
   PAGE HERO band (light or dark per page) - generic reusable header band
   ============================================================================ */
.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(110% 80% at 92% 4%, color-mix(in srgb, var(--color-accent-primary) 22%, transparent) 0%, transparent 58%),
    linear-gradient(168deg, var(--color-surface-subtle) 0%, var(--color-surface-default) 64%);
  border-bottom: var(--bw-accent) solid var(--color-accent-primary);
}
.page-hero__inner { padding-block: var(--bdri-space-8); }
.page-hero__eyebrow { margin-bottom: var(--bdri-space-4); }
.page-hero__title {
  font-family: var(--bdri-text-display-family);
  font-size: clamp(2.25rem, 4vw, var(--bdri-size-display));
  font-weight: var(--bdri-text-display-weight);
  line-height: 1.06; letter-spacing: var(--bdri-text-display-tracking);
  text-wrap: balance;
}
.page-hero__standfirst {
  font-family: var(--bdri-text-display-family);
  font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-regular);
  line-height: var(--bdri-lh-relaxed); color: var(--color-text-subtle);
  max-width: var(--measure-narrow); margin-top: var(--bdri-space-4);
}
@media (min-width: 760px) { .page-hero__inner { padding-block: var(--bdri-space-9); } }

/* compact hero (used on /explore - short framing, no stat panel) */
.page-hero--compact .page-hero__inner { padding-block: var(--bdri-space-7); }
@media (min-width: 760px) { .page-hero--compact .page-hero__inner { padding-block: var(--bdri-space-8); } }
.page-hero__inline-link {
  display: inline-block; margin-top: var(--bdri-space-3);
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold); color: var(--color-text-link); text-decoration: none;
}
.page-hero__inline-link:hover { text-decoration: underline; }

/* inst-strip can carry two stacked actions */
.inst-strip__actions { display: flex; flex-wrap: wrap; gap: var(--bdri-space-3); align-items: center; }

/* ============================================================================
   ANIMATED DATA-BOX ENTRANCE - door-page hero stat + industry-page key numbers.
   The number counts up and bars grow to their static value ONCE on load (not
   looping). Motion on the DATA only, never the aquamarine brand color. The
   final/static value is the authored markup; JS animates from 0 to it, then
   leaves the real value in place. prefers-reduced-motion => no animation, the
   static authored value stands. Mirrors the home hero's discipline.
   ============================================================================ */

/* Bars opted into the count-up start at width:0 and transition to their --w.
   The `is-armed` class (set by JS after reading --w) holds them at 0; removing
   it on the next frame animates to the real width. JS-off: no is-armed class is
   ever added, so the bar shows its authored --w immediately. */
.bar__fill[data-animate].is-armed { width: 0 !important; }
.bar__fill[data-animate] { transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  /* hard stop: never hold a bar at 0; show the authored value */
  .bar__fill[data-animate].is-armed { width: var(--w) !important; }
  .bar__fill[data-animate] { transition: none; }
}

/* ============================================================================
   FOOTER (shared identity band)
   ============================================================================ */
.site-footer {
  background: var(--color-surface-default);
  border-top: var(--bw-accent) solid var(--color-accent-primary);
}
.site-footer__inner { display: grid; gap: var(--bdri-space-6); padding-block: var(--bdri-space-8); }
.site-footer__identity {
  font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-body-lg);
  font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-normal);
}
.site-footer__tag { margin-top: var(--bdri-space-2); color: var(--color-text-muted); font-size: var(--bdri-size-small); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--bdri-space-3) var(--bdri-space-5); margin-top: var(--bdri-space-5); }
.site-footer__links a { color: var(--color-text-subtle); font-size: var(--bdri-size-small); font-weight: var(--bdri-weight-semibold); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-text-default); text-decoration: underline; text-decoration-color: var(--bdri-color-gold); text-decoration-thickness: var(--bw-input-focus); text-underline-offset: 0.2em; }
.site-footer__backing-label {
  font-family: var(--bdri-font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--bdri-space-2);
}
.attribution-wordmark {
  display: inline-flex; align-items: baseline; font-family: var(--bdri-font-body);
  font-size: var(--bdri-size-body-lg); font-weight: var(--bdri-weight-bold); letter-spacing: 0;
}
.attribution-wordmark__primary { color: var(--color-attribution-ddigi); }
.attribution-wordmark__secondary { color: var(--color-attribution-leads); }
.site-footer__publisher { display: inline-block; line-height: 0; border-radius: var(--bdri-radius-sm); }
.site-footer__publisher:focus-visible { outline: var(--bw-input-focus) solid var(--color-accent-primary); outline-offset: 3px; }
.site-footer__publisher-logo { display: block; width: 165px; height: auto; max-width: 100%; }
.site-footer__meta { display: grid; gap: var(--bdri-space-2); color: var(--color-text-muted); font-size: var(--bdri-size-small); }
.site-footer a { color: var(--color-text-link); }
@media (min-width: 760px) {
  .site-footer__inner { grid-template-columns: 1.5fr 0.8fr 1fr; align-items: start; gap: var(--bdri-space-7); padding-block: var(--bdri-space-8); }
}

/* ---- institutional strip (dual-audience device, reused on key pages) ------ */
.inst-strip {
  display: grid; gap: var(--bdri-space-4);
  background: var(--color-surface-accent); color: var(--color-text-inverted);
  border-radius: var(--radius-modal); padding: var(--bdri-space-6) var(--bdri-space-6);
  --color-accent-primary: var(--bdri-color-aquamarine-bright);
}
.inst-strip__kicker {
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-caption);
  font-weight: var(--bdri-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bdri-color-aquamarine-bright);
}
.inst-strip__head {
  font-family: var(--bdri-text-h3-family); font-size: var(--bdri-size-h3);
  font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-snug); color: var(--bdri-color-white);
}
.inst-strip__body { color: var(--bdri-color-cloud); line-height: var(--bdri-lh-loose); max-width: var(--measure); }
.inst-strip .btn--ghost { color: var(--bdri-color-white); border-color: color-mix(in srgb, var(--bdri-color-white) 40%, transparent); }
/* inside the aquamarine inst strip, buttons still go gold on hover (gold = act). */
.inst-strip .btn--ghost:hover { border-color: var(--bdri-color-gold); color: var(--bdri-color-white); background: color-mix(in srgb, var(--bdri-color-gold) 16%, transparent); }
.inst-strip .btn--primary { background: var(--bdri-color-aquamarine-bright); color: var(--bdri-color-ink); border-color: var(--bdri-color-aquamarine-bright); }
.inst-strip .btn--primary:hover { background: var(--bdri-color-gold); border-color: var(--bdri-color-gold); color: var(--bdri-color-ink); }
@media (min-width: 760px) {
  .inst-strip { grid-template-columns: 1fr auto; align-items: center; gap: var(--bdri-space-6); padding: var(--bdri-space-7); }
}

/* ---- funnel / download band ----------------------------------------------- */
.funnel {
  background: var(--color-surface-subtle);
  border-top: var(--bw-divider) solid var(--color-border-subtle);
}
.funnel__inner {
  display: grid; gap: var(--bdri-space-4); align-items: center;
  padding-block: var(--bdri-space-8);
}
.funnel__head {
  font-family: var(--bdri-text-h2-family); font-size: var(--bdri-size-h3);
  font-weight: var(--bdri-weight-semibold); line-height: var(--bdri-lh-snug); text-wrap: balance;
}
.funnel__body { color: var(--color-text-subtle); line-height: var(--bdri-lh-loose); max-width: var(--measure); }
@media (min-width: 760px) {
  .funnel__inner { grid-template-columns: 1fr auto; gap: var(--bdri-space-7); padding-block: var(--bdri-space-8); }
}

/* ---- skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute; z-index: 50;
  inset-block-start: var(--bdri-space-2); inset-inline-start: var(--bdri-space-2);
  transform: translateY(-160%); border-radius: var(--radius-button);
  background: var(--color-surface-accent); color: var(--color-text-inverted);
  padding: var(--bdri-space-2) var(--bdri-space-4);
  font-weight: var(--bdri-weight-semibold); text-decoration: none;
  transition: transform 160ms ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================================
   GOLD INTERACTIVE-AFFORDANCE LAYER (site-wide)
   Gold = "act here / this is interactive." On hover, every clickable card gets
   a clear gold accent (a gold top edge via box-shadow + a gold border) plus the
   normal lift, so it's obvious the card is a link. Gold is graphic only here -
   it's an edge/border, never text. These selectors are element+class
   (specificity 0,1,1) so they win over the per-route `.card:hover` (0,1,0) rules
   that load after shared.css, without needing to edit 27 route stylesheets.
   ============================================================================ */
a.route-card,
a.ind-tile,
a.def__link,
a.article-card,
a.crosslink,
a.door {
  /* ensure the gold edge animates in (route base sets transform/box-shadow only) */
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}
a.route-card:hover,
a.ind-tile:hover,
a.def__link:hover,
a.article-card:hover,
a.crosslink:hover,
a.door:hover {
  border-color: var(--bdri-color-gold);
  box-shadow: inset 0 var(--bw-accent) 0 0 var(--bdri-color-gold), var(--bdri-shadow-card);
  transform: translateY(-2px);
}

/* matrix industry-picker pills (clickable) - gold border + subtle gold wash,
   except the active pill which stays the solid aquamarine selection state.
   (Route four-doors/styles.css defines .matrix-picker__btn:hover at equal
   specificity but loads AFTER shared, so the gold variant is set there too.) */
.matrix-picker__btn:hover:not(.is-active) {
  border-color: var(--bdri-color-gold);
  color: var(--color-text-default);
  background: color-mix(in srgb, var(--bdri-color-gold) 12%, var(--color-surface-default));
}

/* NOTE: heatmap row links (explore) and matrix-table row links (four-doors) also
   read as text links and get the same gold underline, but their per-route
   :hover rules load after shared.css at equal specificity, so the gold variant
   is applied in those route stylesheets directly, not here. */

/* ---- reduced-motion hard stop --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}