/* ============================================================================
   BDRI Home / Index - design reference styles
   Built entirely on tokens.css custom properties.
   Light register = :root default. Dark register = [data-register="dark"].
   Custom (non-token) properties are scoped + justified in design-rationale.md §10.
   ============================================================================ */

:root {
  /* §10 deviation - line-length control (no ch-based measure primitive exists) */
  --measure: 66ch;
  --measure-narrow: 54ch;
  /* §10 deviation - oversized hero display for a more substantial masthead.
     56px display token doesn't carry this headline weight; scoped to the hero. */
  --hero-display: clamp(2.75rem, 5.4vw, 4.5rem);
  --hero-rotator: clamp(1.5rem, 3vw, 2.5rem);
}

*,
*::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; /* scroll-container guard: off-canvas mobile panel can't add horizontal scroll */
}

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, 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": plain in-prose anchors get a gold underline on hover.
   :not([class]) keeps this off buttons, nav, cards (they carry their own hover). */
a:not([class]):hover {
  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;
}

/* ---- 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); /* dark register → aquamarine-bright automatically */
}

.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": underline turns gold on hover; text stays the legible
   aquamarine link color (gold is never used as text). */
.text-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--bdri-color-gold);
  text-decoration-thickness: var(--bw-input-focus);
  text-underline-offset: 0.2em;
}

/* ---- 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; 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 gold wash + lift; text stays ink/legible. */
.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); /* gold-tint fill */
  color: var(--bdri-color-ink); /* ink on the tint - never gold text; fixed ink (not theme-flipping) so it stays legible on the dark hero */
}

/* ============================================================================
   HEADER / NAV
   ============================================================================ */

.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;
}
.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); /* ink disc */
  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); /* gold as a fill - correct */
}

.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 in the medium-desktop band before the 900px breakpoint. */
@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;
}

.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);
  }
}

/* ============================================================================
   HERO - dark identity masthead (animated)
   ============================================================================ */

.hero {
  position: relative;
  overflow: hidden;
  /* §10 deviation 1 - sanctioned aquamarine→ink surface gradient (never text) */
  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);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bdri-space-7);
  padding-block: var(--bdri-space-8) var(--bdri-space-8);
  align-items: center;
}

.hero__masthead {
  max-width: 42rem;
}

.hero__title {
  font-family: var(--bdri-text-display-family);
  font-size: var(--hero-display);
  font-weight: var(--bdri-text-display-weight);
  line-height: 1.04;
  letter-spacing: var(--bdri-text-display-tracking);
  margin-block: var(--bdri-space-4) var(--bdri-space-5);
  text-wrap: balance;
}

/* the animated line - serif, sits just under the title */
.hero__rotator {
  font-family: var(--bdri-text-display-family);
  font-size: var(--hero-rotator);
  font-weight: var(--bdri-weight-regular);
  line-height: 1.15;
  color: var(--color-text-subtle);
  margin-bottom: var(--bdri-space-5);
}

.rotator {
  display: inline-block;
  position: relative;
}

.rotator__word {
  display: inline-block;
  color: var(--color-accent-primary); /* aquamarine-bright on dark - the data word */
  font-weight: var(--bdri-weight-semibold);
  border-bottom: var(--bw-medium) solid color-mix(in srgb, var(--color-accent-primary) 55%, transparent);
  padding-bottom: 0.04em;
  /* the word ITSELF is the data - animating it is sanctioned (motion-on-data);
     this is NOT a color-shift on the brand accent (banned). */
  transition: opacity 240ms ease, transform 240ms ease;
  will-change: opacity, transform;
}

.rotator__word.is-leaving {
  opacity: 0;
  transform: translateY(-0.22em);
}
.rotator__word.is-entering {
  opacity: 0;
  transform: translateY(0.22em);
  animation: word-in 360ms ease forwards;
}
@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

.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);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bdri-space-3);
  margin-block-start: var(--bdri-space-6);
}

.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bdri-space-3);
  margin-block-start: var(--bdri-space-5);
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-caption);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* ---- index plate - morphing door bars ------------------------------------ */

.index-plate {
  /* Locked to a stable size so it NEVER jumps as the industry rotates:
     the scope label reserves 2 lines (tallest state = "Professional Services"),
     and the value column is fixed-width tabular so bars never shift. */
  display: flex;
  flex-direction: column;
  border: var(--bw-divider) solid color-mix(in srgb, var(--color-text-default) 18%, transparent);
  border-radius: var(--radius-modal);
  background-color: color-mix(in srgb, var(--color-text-inverted) 5%, transparent);
  padding: var(--bdri-space-7);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-text-default) 8%, transparent) inset;
}

.index-plate__cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bdri-space-4);
  font-family: var(--bdri-font-mono);
  margin-bottom: var(--bdri-space-6);
}

.index-plate__cap-label {
  font-size: var(--bdri-size-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 0.15em; /* optical baseline-align with the larger scope label */
}

.index-plate__cap-scope {
  /* Reserve a fixed 2-line height so single-line labels ("Tourism") don't
     shrink the box vs two-line labels ("Professional Services"). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(2 * var(--bdri-size-body-lg) * var(--bdri-lh-snug));
  max-width: 11ch;
  font-size: var(--bdri-size-body-lg);
  font-weight: var(--bdri-weight-semibold);
  line-height: var(--bdri-lh-snug);
  letter-spacing: 0.01em;
  color: var(--color-accent-primary); /* aquamarine-bright on dark */
  text-align: right;
  overflow: hidden;
}

.plate {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--bdri-space-6);
}

.plate__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 3.5rem;
  align-items: center;
  gap: var(--bdri-space-4);
}

.plate__name {
  font-family: var(--bdri-font-body);
  font-size: var(--bdri-size-body);
  font-weight: var(--bdri-weight-semibold);
  color: var(--color-text-default);
}

.meter {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-text-default) 14%, transparent);
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w, 0%);
  border-radius: var(--radius-pill);
  background: var(--color-door-strong);
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 480ms ease-out;
}

/* Door-state colors - data-driven on the morphing plate.
   STRONG = aquamarine, the confident/present state. On the dark register the
   plain bright aquamarine (#34BBD6) reads a touch pale next to the gold
   "developing" bars, which wrongly makes the top state look subordinate. Deepen
   it toward the flag aquamarine so STRONG reads solid and confident - the most
   present door looks strongest. Semantics unchanged (still aquamarine = strong);
   this only strengthens the aqua's depth/saturation. Light register keeps the
   already-deep flag aquamarine.
   Dark-register "gap" uses a LIGHTER steel so it stays legible on ink. */
.meter__fill[data-state='strong'] {
  background: linear-gradient(180deg,
    var(--bdri-color-aquamarine-bright) 0%,
    color-mix(in srgb, var(--bdri-color-aquamarine-bright) 35%, var(--bdri-color-aquamarine)) 100%);
}
.meter__fill[data-state='developing'] { background: var(--color-door-developing); } /* gold fill - OK */
.meter__fill[data-state='gap']        { background: var(--bdri-color-steel-light); }

.plate__val {
  /* tabular-nums + fixed column → bar baselines never shift between
     "8.9", "71.2", "0.0" as the industry rotates. */
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-body);
  font-weight: var(--bdri-weight-semibold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--color-text-default);
  text-align: right;
  white-space: nowrap;
}
.plate__val span { font-variant-numeric: tabular-nums; }

.plate__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bdri-space-2) var(--bdri-space-4);
  margin-top: auto; /* anchor legend to the bottom of the flex plate → stable box */
  padding-top: var(--bdri-space-5);
  border-top: var(--bw-divider) solid color-mix(in srgb, var(--color-text-default) 12%, transparent);
  font-family: var(--bdri-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.plate__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--bdri-space-2);
}

.plate__legend-dot {
  width: 10px; height: 10px;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.plate__legend-dot--strong { background: var(--color-door-strong); }
.plate__legend-dot--developing { background: var(--color-door-developing); }
.plate__legend-dot--gap { background: var(--bdri-color-steel-light); }

.index-plate__foot {
  margin-top: var(--bdri-space-4);
  font-family: var(--bdri-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

@media (min-width: 960px) {
  .hero__inner {
    /* plate sized UP - wider column + the masthead capped so the H1 isn't crowded */
    grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr);
    gap: var(--bdri-space-8);
    padding-block: var(--bdri-space-9);
  }
  .index-plate { padding: var(--bdri-space-8); }
  .index-plate__cap-scope { font-size: var(--bdri-size-h3); max-width: 13ch; }
  .index-plate__cap-scope {
    min-height: calc(2 * var(--bdri-size-h3) * var(--bdri-lh-snug));
  }
  .plate__name { font-size: var(--bdri-size-body-lg); }
  .plate__val { font-size: var(--bdri-size-body-lg); }
  .meter { height: 16px; }
  .plate { gap: var(--bdri-space-7); }
}

/* ============================================================================
   WHY THIS MATTERS NOW - light, three momentum beats
   ============================================================================ */

.matters {
  background: var(--color-surface-default);
  padding-block: var(--bdri-space-8);
}

.beats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--bdri-space-5);
}

.beat {
  position: relative;
  background: var(--color-surface-subtle);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--bdri-space-6);
}

.beat__num {
  display: inline-block;
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-accent-primary);
  margin-bottom: var(--bdri-space-3);
}

.beat__head {
  font-family: var(--bdri-text-h3-family);
  font-size: var(--bdri-text-h3-size);
  font-weight: var(--bdri-text-h3-weight);
  line-height: var(--bdri-lh-snug);
  margin-bottom: var(--bdri-space-3);
}

.beat__body {
  color: var(--color-text-subtle);
  line-height: var(--bdri-lh-loose);
}

@media (min-width: 760px) {
  .matters { padding-block: var(--bdri-space-9); }
  .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bdri-space-5); }
}

/* ============================================================================
   THE OPPORTUNITY - 3 stat tiles, headroom framing
   ============================================================================ */

.opportunity {
  background: var(--color-surface-subtle);
  padding-block: var(--bdri-space-8);
  border-block: var(--bw-divider) solid var(--color-border-subtle);
}

.stat-tiles {
  display: grid;
  gap: var(--bdri-space-5);
}

.stat-tile {
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  border-top: var(--bw-accent) solid var(--color-accent-primary);
  padding: var(--bdri-space-6);
}

.stat-tile__figure {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: var(--bdri-text-display-family);
  line-height: 1;
  color: var(--color-text-default);
  margin-bottom: var(--bdri-space-3);
}

.stat-tile__num {
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  font-weight: var(--bdri-text-display-weight);
  letter-spacing: var(--bdri-track-tight);
}

.stat-tile__unit {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--bdri-weight-semibold);
  color: var(--color-text-subtle);
}

.stat-tile__arrow {
  font-family: var(--bdri-font-body);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--bdri-weight-regular);
  color: var(--color-accent-primary);
  padding-inline: 0.18em;
}

.stat-tile__label {
  font-size: var(--bdri-size-body-lg);
  font-weight: var(--bdri-weight-semibold);
  line-height: var(--bdri-lh-snug);
  margin-bottom: var(--bdri-space-2);
}

.stat-tile__note {
  font-size: var(--bdri-size-small);
  line-height: var(--bdri-lh-relaxed);
  color: var(--color-text-muted);
}

@media (min-width: 760px) {
  .opportunity { padding-block: var(--bdri-space-9); }
  .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   WHAT THE INDEX IS - light prose lede
   ============================================================================ */

.lede {
  background: var(--color-surface-default);
  padding-block: var(--bdri-space-8);
}

.lede__inner {
  max-width: var(--measure);
}

.lede__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-5);
  text-wrap: balance;
}

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

.lede__rule {
  display: block;
  width: 72px;
  height: var(--bw-accent);
  margin-top: var(--bdri-space-6);
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
}

@media (min-width: 760px) {
  .lede { padding-block: var(--bdri-space-9); }
}

/* ============================================================================
   FOUR DOORS - numbered plate + national penetration bars
   ============================================================================ */

.doors {
  background: var(--color-surface-subtle);
  padding-block: var(--bdri-space-8);
  border-block: var(--bw-divider) solid var(--color-border-subtle);
}

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

.doors__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;
}

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

.door-plate {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--bdri-space-4);
}

.door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bdri-space-4);
  align-items: start;
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--bdri-space-5);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

/* gold = "act here": clickable door card gets a gold top edge + border + lift. */
.door:hover {
  transform: translateY(-2px);
  border-color: var(--bdri-color-gold);
  box-shadow: inset 0 var(--bw-accent) 0 0 var(--bdri-color-gold), var(--bdri-shadow-card);
}

/* gold disc, ink number on top (correct gold-as-fill usage) */
.door__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-graphic); /* gold fill */
  color: var(--color-text-default); /* ink number on gold */
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold);
  letter-spacing: 0.02em;
}

.door:hover .door__num { filter: brightness(1.04); }

.door__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bdri-space-3);
  margin-bottom: var(--bdri-space-3);
}

.door__name {
  font-family: var(--bdri-text-h3-family);
  font-size: var(--bdri-text-h3-size);
  font-weight: var(--bdri-text-h3-weight);
  line-height: var(--bdri-lh-snug);
}

.door__rate {
  font-family: var(--bdri-font-mono);
  font-weight: var(--bdri-weight-semibold);
  color: var(--color-text-default);
  white-space: nowrap;
}
.door__rate-num { font-size: var(--bdri-size-body-lg); }
.door__rate-unit { font-size: var(--bdri-size-small); color: var(--color-text-muted); }

.door__bar {
  display: block;
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  overflow: hidden;
  margin-bottom: var(--bdri-space-3);
}

.door__bar-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w, 0%);
  border-radius: var(--radius-pill);
}
.door__bar-fill--strong { background: var(--color-door-strong); }
.door__bar-fill--developing { background: var(--color-door-developing); }
.door__bar-fill--gap { background: var(--color-door-gap); } /* light register - steel reads fine */

.door__text {
  color: var(--color-text-subtle);
  line-height: var(--bdri-lh-loose);
  max-width: 42ch;
}

.doors__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bdri-space-4);
  margin-top: var(--bdri-space-6);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bdri-space-3) var(--bdri-space-5);
  padding: var(--bdri-space-4) var(--bdri-space-5);
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  font-size: var(--bdri-size-small);
  color: var(--color-text-subtle);
}

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

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--bdri-space-2);
}

.legend__dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
}
.legend__dot--strong { background: var(--color-door-strong); }
.legend__dot--developing { background: var(--color-door-developing); }
.legend__dot--gap { background: var(--color-door-gap); }

@media (min-width: 760px) {
  .doors { padding-block: var(--bdri-space-9); }
  .door-plate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bdri-space-5); }
  .door { padding: var(--bdri-space-6); }
}

/* ============================================================================
   FOUR DOORS - teaser only (de-duplicated; data lives on The Index)
   ============================================================================ */

.doors-teaser {
  background: var(--color-surface-subtle);
  padding-block: var(--bdri-space-8);
  border-block: var(--bw-divider) solid var(--color-border-subtle);
}

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

.doors-teaser__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;
}

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

.doors-teaser__list {
  list-style: none; padding: 0; margin: 0 0 var(--bdri-space-7);
  display: grid; gap: var(--bdri-space-3);
}

.dteaser {
  display: flex; align-items: center; gap: var(--bdri-space-3);
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--bdri-space-4) var(--bdri-space-5);
}
/* gold disc, ink number - correct gold-as-fill usage */
.dteaser__num {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--color-accent-graphic); color: var(--color-text-default);
  font-family: var(--bdri-font-mono); font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold);
}
.dteaser__name {
  font-family: var(--bdri-text-h3-family);
  font-size: var(--bdri-size-body-lg);
  font-weight: var(--bdri-weight-semibold);
}
.dteaser__role {
  margin-left: auto;
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-caption);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.doors-teaser__routes { display: grid; gap: var(--bdri-space-4); }

.route-card {
  display: grid; gap: var(--bdri-space-2); align-content: start;
  background: var(--color-surface-default);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-left: var(--bw-accent) solid var(--color-accent-primary);
  border-radius: var(--radius-card);
  padding: var(--bdri-space-5) var(--bdri-space-6);
  text-decoration: none; color: var(--color-text-default);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
/* gold = "act here": clickable route card gets a gold top edge + border + lift. */
.route-card:hover {
  transform: translateY(-2px);
  border-color: var(--bdri-color-gold);
  box-shadow: inset 0 var(--bw-accent) 0 0 var(--bdri-color-gold), var(--bdri-shadow-card);
}
.route-card__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(--color-text-muted);
}
.route-card__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);
}
.route-card__cta {
  font-family: var(--bdri-font-body); font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold); color: var(--color-text-link);
}

@media (min-width: 640px) {
  .doors-teaser__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .doors-teaser { padding-block: var(--bdri-space-9); }
  .doors-teaser__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

/* ============================================================================
   DOORS COMPOUND - dark register, the killer stat
   ============================================================================ */

.compound {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 8% 100%, color-mix(in srgb, var(--color-accent-primary) 16%, transparent) 0%, transparent 60%),
    var(--color-surface-default); /* ink */
  border-block: var(--bw-accent) solid var(--color-accent-primary);
}

.compound__inner {
  display: grid;
  gap: var(--bdri-space-7);
  padding-block: var(--bdri-space-8);
  align-items: center;
}

.compound__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;
}

.compound__body {
  color: var(--color-text-subtle);
  font-size: var(--bdri-size-body-lg);
  line-height: var(--bdri-lh-loose);
  max-width: var(--measure-narrow);
}

.compound__stamp {
  margin-top: var(--bdri-space-4);
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-caption);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.compound__chart {
  margin: 0;
}

.compound__bars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: var(--bdri-space-3);
  height: 230px;
}

.cbar {
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  justify-items: center;
  height: 100%;
  gap: var(--bdri-space-2);
}

.cbar__fill {
  display: block;
  width: 100%;
  max-width: 56px;
  height: calc(var(--h) * 0.75);
  min-height: 4px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: color-mix(in srgb, var(--color-accent-primary) 38%, transparent);
  align-self: end;
  transition: height 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cbar--peak .cbar__fill {
  background: var(--color-accent-primary); /* aquamarine-bright on dark - the peak */
}

.cbar__val {
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-small);
  font-weight: var(--bdri-weight-semibold);
  color: var(--color-text-default);
}

.cbar--peak .cbar__val { color: var(--color-accent-primary); }

.cbar__cap {
  font-family: var(--bdri-font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-align: center;
}

.compound__axis {
  margin-top: var(--bdri-space-4);
  padding-top: var(--bdri-space-3);
  border-top: var(--bw-divider) solid color-mix(in srgb, var(--color-text-default) 14%, transparent);
  font-family: var(--bdri-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (min-width: 860px) {
  .compound__inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: var(--bdri-space-8);
    padding-block: var(--bdri-space-9);
  }
  .compound__bars { height: 280px; }
}

/* ============================================================================
   FIND YOUR INDUSTRY - 8 tiles
   ============================================================================ */

.industries {
  background: var(--color-surface-default);
  padding-block: var(--bdri-space-8);
}

.ind-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--bdri-space-4);
}

.ind-tile {
  display: grid;
  gap: var(--bdri-space-2);
  height: 100%;
  background: var(--color-surface-subtle);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-left: var(--bw-accent) solid var(--color-accent-primary);
  border-radius: var(--radius-card);
  padding: var(--bdri-space-5);
  text-decoration: none;
  color: var(--color-text-default);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

/* gold = "act here": clickable industry tile gets a gold top edge + border + lift. */
.ind-tile:hover {
  transform: translateY(-2px);
  border-color: var(--bdri-color-gold);
  box-shadow: inset 0 var(--bw-accent) 0 0 var(--bdri-color-gold), var(--bdri-shadow-card);
}

.ind-tile__name {
  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-snug);
}

.ind-tile__doors {
  font-family: var(--bdri-font-mono);
  font-size: var(--bdri-size-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ind-tile__doors-num {
  color: var(--color-accent-primary);
  font-weight: var(--bdri-weight-semibold);
}

.ind-tile__standing {
  font-size: var(--bdri-size-small);
  line-height: var(--bdri-lh-relaxed);
  color: var(--color-text-subtle);
}

@media (min-width: 620px) {
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 920px) {
  .industries { padding-block: var(--bdri-space-9); }
  .ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================================
   THE BAHAMAS REALITY (ROBO) - concept block
   ============================================================================ */

.robo {
  background: var(--color-surface-subtle);
  padding-block: var(--bdri-space-8);
  border-block: var(--bw-divider) solid var(--color-border-subtle);
}

.robo__inner {
  max-width: var(--measure);
}

.robo__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);
}

.robo__body {
  font-size: var(--bdri-size-body-lg);
  line-height: var(--bdri-lh-loose);
  color: var(--color-text-subtle);
  margin-bottom: var(--bdri-space-5);
}

@media (min-width: 760px) {
  .robo { padding-block: var(--bdri-space-9); }
}

/* ============================================================================
   DUAL CTA
   ============================================================================ */

.dual-cta {
  background: var(--color-surface-default);
  padding-block: var(--bdri-space-8);
}

.dual-cta__grid {
  display: grid;
  gap: var(--bdri-space-5);
}

.cta-card {
  display: grid;
  gap: var(--bdri-space-3);
  align-content: start;
  background: var(--color-surface-subtle);
  border: var(--bw-divider) solid var(--color-border-subtle);
  border-radius: var(--radius-modal);
  padding: var(--bdri-space-7) var(--bdri-space-6);
}

.cta-card--inst {
  background: var(--color-surface-accent); /* ink - the institutional read goes dark */
  color: var(--color-text-inverted);
}
/* re-anchor dark register inside the ink card so accents/links swap correctly */
.cta-card--inst { --color-accent-primary: var(--bdri-color-aquamarine-bright); }

.cta-card__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(--color-accent-primary);
}
.cta-card--inst .cta-card__kicker { color: var(--bdri-color-aquamarine-bright); }

.cta-card__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);
}

.cta-card__body {
  line-height: var(--bdri-lh-loose);
  color: var(--color-text-subtle);
  margin-bottom: var(--bdri-space-2);
}
.cta-card--inst .cta-card__head { color: var(--bdri-color-white); }
.cta-card--inst .cta-card__body { color: var(--bdri-color-cloud); }

.cta-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bdri-space-3);
}
/* ghost button on the ink card needs a light border + light text */
.cta-card--inst .btn--ghost {
  color: var(--bdri-color-white);
  border-color: color-mix(in srgb, var(--bdri-color-white) 40%, transparent);
}
/* inside the ink inst card, buttons still go gold on hover (gold = act); gold-on-ink
   and ink-on-gold both clear contrast. Explicit selectors win over the scoped
   aquamarine-bright base by source order + the added :hover. */
.cta-card--inst .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);
}
.cta-card--inst .btn--primary {
  background: var(--bdri-color-aquamarine-bright);
  color: var(--bdri-color-ink);
  border-color: var(--bdri-color-aquamarine-bright);
}
.cta-card--inst .btn--primary:hover {
  background: var(--bdri-color-gold);
  border-color: var(--bdri-color-gold);
  color: var(--bdri-color-ink);
}

@media (min-width: 760px) {
  .dual-cta { padding-block: var(--bdri-space-9); }
  .dual-cta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

/* ============================================================================
   FOOTER - dark identity band
   ============================================================================ */

.site-footer {
  background: var(--color-surface-default); /* dark register → ink */
  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);
  }
}

/* ---- 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); }

/* ---- responsive display-size guards -------------------------------------- */

@media (max-width: 640px) {
  .section-title,
  .lede__title,
  .doors__title,
  .compound__title,
  .robo__title {
    font-size: var(--bdri-size-h3); /* 24px - drop section titles a step on phones */
  }
  .hero__inner { padding-block: var(--bdri-space-7); }
  .plate__row { grid-template-columns: 4.25rem 1fr 3rem; }
}

/* ---- motion: entrance + reduced-motion guard ----------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__masthead > *,
  .door,
  .beat,
  .stat-tile {
    animation: rise 480ms ease-out both;
  }
  .hero__masthead > *:nth-child(1) { animation-delay: 40ms; }
  .hero__masthead > *:nth-child(2) { animation-delay: 100ms; }
  .hero__masthead > *:nth-child(3) { animation-delay: 160ms; }
  .hero__masthead > *:nth-child(4) { animation-delay: 220ms; }
  .hero__masthead > *:nth-child(5) { animation-delay: 280ms; }
  .door:nth-child(1) { animation-delay: 60ms; }
  .door:nth-child(2) { animation-delay: 130ms; }
  .door:nth-child(3) { animation-delay: 200ms; }
  .door:nth-child(4) { animation-delay: 270ms; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hard stop for ALL motion under reduced-motion - including the JS engine's
   transitions on the morphing plate, the compound bars, and the rotator. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ===== nav submenu (Four Doors) - added for nav-IA pass ===== */
/* ---- 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); }
.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); }

@media (max-width: 900px) {
  /* 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); }
}