/* ============================================================
   BAM ANALYTIX — COMPONENTS
   ============================================================ */

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

/* Primary: black text on orange = 6.13:1. Never white-on-orange. */
.btn--primary {
  background: var(--accent-bg);
  color: var(--on-accent);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

.btn--secondary {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  background: var(--color-black);
  color: var(--color-white);
}
.section--dark .btn--secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}
.section--dark .btn--secondary:hover,
.section--dark .btn--secondary:focus-visible {
  background: var(--color-white);
  color: var(--color-black);
}

.btn--link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-black);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  display: inline-block;
}
.section--dark .btn--link { color: var(--color-white); }
.btn--link:hover, .btn--link:focus-visible { color: var(--color-accent-dark); }
.section--dark .btn--link:hover, .section--dark .btn--link:focus-visible { color: var(--accent-on-dark); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* ============ SITE HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-black);
  border-bottom: 1px solid var(--color-charcoal-800);
}
.site-header__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .site-header__inner { padding-inline: var(--space-7); }
}

.site-header__logo img {
  height: 34px;
  width: auto;
}
.site-header__logo {
  display: flex;
  align-items: center;
}

.site-nav {
  display: none;
}
@media (min-width: 1080px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
}
.site-nav__link {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--color-white);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.site-nav__link:hover, .site-nav__link:focus-visible,
.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--color-accent);
}
.site-nav__badge {
  font-size: var(--fs-xs);
  color: var(--text-muted-on-dark);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  margin-left: var(--space-1);
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
@media (min-width: 1080px) {
  .site-header__actions { display: flex; }
}
.site-header__portal {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted-on-dark);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.site-header__portal:hover, .site-header__portal:focus-visible {
  color: var(--color-white);
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  padding: var(--space-2) var(--space-3);
}
@media (min-width: 1080px) {
  .menu-toggle { display: none; }
}
.menu-toggle__icon {
  width: 22px; height: 16px;
  position: relative;
}
.menu-toggle__icon span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.menu-toggle__icon span:nth-child(1) { top: 0; }
.menu-toggle__icon span:nth-child(2) { top: 7px; }
.menu-toggle__icon span:nth-child(3) { top: 14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--color-black);
  z-index: calc(var(--z-header) - 1);
  overflow-y: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.mobile-nav[data-open="true"] {
  transform: translateX(0);
}
@media (min-width: 1080px) {
  .mobile-nav { display: none; }
}
.mobile-nav__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-white);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-charcoal-800);
}
.mobile-nav__cta {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mobile-nav__portal {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--text-muted-on-dark);
  padding: var(--space-3) 0;
  text-align: center;
  border: 1px solid var(--color-charcoal-700);
  border-radius: var(--radius-sm);
}

body[data-nav-open="true"] { overflow: hidden; }

/* ============ HERO ============ */
.hero {
  padding-block: var(--space-9);
}
@media (max-width: 640px) {
  /* Without this, .hero's unconditional padding-block wins over .section's
     mobile reduction (equal specificity, later in cascade) and the hero ends
     up much taller than every other section on small screens. */
  .hero { padding-block: var(--space-7); }
}
.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid--split { grid-template-columns: 1.1fr 1fr; }
}
.hero__body { max-width: 56ch; }
.hero h1 { margin-bottom: var(--space-5); }
.hero__lede { font-size: var(--fs-lg); color: var(--text-muted); max-width: 58ch; }
.section--dark .hero__lede { color: var(--text-muted-on-dark); }
.hero__support {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--dark .hero__support { color: var(--text-muted-on-dark); }

/* Mobile order override: headline/body/CTA before visual (§ build req) */
.hero__visual { order: 2; }
@media (min-width: 960px) {
  .hero__visual { order: unset; }
}

/* BRS orbit diagram: cap its size on mobile so it reads as a supporting
   visual, not a full-bleed graphic dominating the screen. Also tighten the
   gap above it and its own top/bottom margin — .diagram's default
   margin-block (var(--space-6), meant for in-page diagrams elsewhere) was
   stacking with the hero grid gap and doubling up as dead space here. */
@media (max-width: 640px) {
  .hero__grid { gap: var(--space-5); }
  .hero__visual .diagram {
    max-width: 380px;
    margin-inline: auto;
    margin-block: var(--space-2);
  }
}
@media (max-width: 400px) {
  .hero__visual .diagram {
    max-width: 310px;
  }
}

/* ============ SCOPE LABEL STRIP ============ */
.scope-strip {
  display: grid;
  gap: var(--space-3) var(--space-6);
  grid-template-columns: 1fr;
  padding: var(--space-5);
  background: var(--surface-muted);
  border-left: 3px solid var(--color-accent);
  font-size: var(--fs-sm);
}
@media (min-width: 700px) {
  .scope-strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.section--dark .scope-strip {
  background: var(--color-charcoal-900);
}
.scope-strip dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.section--dark .scope-strip dt { color: var(--text-muted-on-dark); }
.scope-strip dd { font-weight: 600; }

/* ============ EVIDENCE CARD (Observed/Interpretation/Recommended/Evaluation) ============ */
.evidence-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-block: var(--space-6);
}
@media (min-width: 700px) {
  .evidence-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .evidence-grid--four { grid-template-columns: repeat(4, 1fr); }
}
.evidence-card {
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--color-accent);
}
.section--dark .evidence-card,
.section--muted .evidence-card {
  background: var(--color-white);
}
.evidence-card__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}
.evidence-card p { font-size: var(--fs-sm); }

/* ============ FACTOR DEFINITIONS (Presence/Interest/Connection/Sentiment) ============ */
.factor-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-block: var(--space-6);
}
@media (min-width: 700px) {
  .factor-grid { grid-template-columns: repeat(2, 1fr); }
}
.factor-item {
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.section--dark .factor-item { border-top-color: var(--color-charcoal-700); }
.factor-item__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2);
}
.section--dark .factor-item__name { color: var(--accent-on-dark); }

/* ============ ROLE / AUDIENCE TILES ============ */
.tile-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-block: var(--space-6);
}
@media (min-width: 700px) {
  .tile-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.role-tile {
  position: relative;
  display: block;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.role-tile:hover, .role-tile:focus-visible {
  border-color: var(--color-accent);
}
.role-tile__icon { margin-bottom: var(--space-4); color: var(--color-accent); }
.role-tile__question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}
.role-tile__body { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.role-tile__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-black);
  border-bottom: 2px solid var(--color-accent);
}

/* ============ PROOF TILES ============ */
.proof-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-block: var(--space-6);
}
@media (min-width: 760px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
}
.proof-tile {
  display: block;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--color-black);
}
.proof-tile:hover, .proof-tile:focus-visible { border-top-color: var(--color-accent); }
.proof-tile__type {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.proof-tile__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
}
.proof-tile__finding { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.proof-tile__label {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.proof-tile__cta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-black);
  border-bottom: 2px solid var(--color-accent);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-5);
}
.filter-btn {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.filter-btn[aria-pressed="true"] {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.filter-empty {
  padding: var(--space-7);
  text-align: center;
  color: var(--text-muted);
  display: none;
}
.filter-empty[data-active="true"] { display: block; }

/* ============ FAQ ============ */
.faq-list { margin-block: var(--space-6); }
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.section--dark .faq-item { border-bottom-color: var(--color-charcoal-700); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  padding-block: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
}
.faq-item__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  position: relative;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; transition: transform var(--transition-fast); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}
.faq-item__a[data-open="true"] { max-height: 600px; }
.faq-item__a-inner {
  padding-bottom: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 68ch;
}
.section--dark .faq-item__a-inner { color: var(--text-muted-on-dark); }

/* ============ FORMS ============ */
.form-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-grid--2col { grid-template-columns: 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
}
.field__required { color: var(--color-accent-dark); }
.field__helper { font-size: var(--fs-xs); color: var(--text-muted); }
.field__input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: var(--fs-base);
}
.field__input:focus-visible { border-color: var(--color-accent); }
.field__input[aria-invalid="true"] { border-color: var(--color-accent-dark); border-width: 2px; }
.field__error {
  font-size: var(--fs-xs);
  color: var(--color-accent-dark);
  font-weight: 600;
  display: none;
}
.field[data-error="true"] .field__error { display: block; }
select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a0a0a' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
}
textarea.field__input { resize: vertical; min-height: 120px; }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.checkbox-field input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.checkbox-field label { font-size: var(--fs-sm); }

.form-error-summary {
  display: none;
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-accent-dark);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.form-error-summary[data-active="true"] { display: block; }
.form-error-summary ul { list-style: disc; padding-left: var(--space-5); margin-top: var(--space-2); font-weight: 400; }
.form-error-summary a { text-decoration: underline; }

.form-state {
  display: none;
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.form-state[data-active="true"] { display: block; }
.form-state__icon { margin-bottom: var(--space-5); color: var(--color-accent); }

.form-privacy { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-4); }
.form-privacy a { text-decoration: underline; }

/* ============ CLOSING CTA ============ */
.closing-cta {
  text-align: center;
  padding-block: var(--space-9);
}
.closing-cta__inner { max-width: 640px; margin-inline: auto; }
.closing-cta h2 { margin-bottom: var(--space-4); }
.closing-cta p { margin-inline: auto; margin-bottom: var(--space-5); }
.closing-cta .cta-row { justify-content: center; }

/* ============ DIAGRAMS (shared) ============ */
.diagram { margin-block: var(--space-6); }

/* BRS orbit diagram (home hero): the four factor nodes travel slowly around
   the central score; each node counter-rotates so its circle and text stay
   upright. Respects prefers-reduced-motion via the global rule in base.css,
   which forces all animation-durations to ~0 for that preference. */
.brs-orbit {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: bam-orbit-ring 120s linear infinite;
}
.brs-orbit__node {
  transform-box: fill-box;
  transform-origin: center;
  animation: bam-orbit-counter 120s linear infinite;
}
@keyframes bam-orbit-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bam-orbit-counter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Scroll-triggered reveal: fades/rises in once 25% of the element has
   entered the viewport (see scroll-reveal.js). Plain CSS transition, so
   prefers-reduced-motion is handled by the global transition-duration
   override in base.css — content still ends up visible either way. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Home hero: eyebrow then headline fade/rise in sequentially on load. */
.hero-fade {
  opacity: 0;
  animation: bam-hero-fade 0.8s ease-out forwards;
}
.hero-fade--1 { animation-delay: 0.1s; }
.hero-fade--2 { animation-delay: 0.55s; }
@keyframes bam-hero-fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Every other page's hero: same eyebrow-then-headline reveal on load, applied
   generically by markup position rather than by hand-adding classes to each
   page. Home is excluded here (:not(.hero-fade)) because its own eyebrow/H1
   already carry the more elaborate video-intro-gated version above; without
   the exclusion both rules would fire on the same elements there. */
.hero .eyebrow:not(.hero-fade),
.hero__body > h1:not(.hero-fade) {
  opacity: 0;
  animation: bam-hero-fade 0.7s ease-out forwards;
}
.hero .eyebrow:not(.hero-fade) { animation-delay: 0.1s; }
.hero__body > h1:not(.hero-fade) { animation-delay: 0.35s; }

/* ============ HERO BRAND INTRO ============ */
/* Layering: video (1) -> diagonal scrim + legibility scrim (2) ->
   hero content (3) -> skip (5).
   Timeline, driven by <html data-intro>, all offsets relative to the moment
   each state is entered (video reaches ~4s to trigger "revealing"):
     playing    0.0s        video only, copy held back
     revealing  +0.0s       diagonal scrim starts its 2.2s sweep; legibility
                            scrim fades in over 0.6s; body copy/buttons/
                            tagline appear immediately (no fade class)
                +0.1-0.35s  eyebrow, then headline, fade in
                +0.6-1.4s   BRS diagram fades in
                +1.7-2.2s   BRS core/ring shine once each
     done       video ends  video + both scrims fade away, copy stays  */
.hero { position: relative; overflow: hidden; }

.hero-intro {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 1;
  transition: opacity 0.9s ease;
}
.hero-intro[hidden] { display: none; }
html[data-intro="done"] .hero-intro {
  opacity: 0;
  pointer-events: none;
}
.hero-intro__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Oversized (200%) so its own soft gradient edge acts as the leading edge of
   the wipe. Parked down-right, then translated home. */
.hero-intro__scrim {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top left,
    #000 0%,
    #000 34%,
    rgba(0, 0, 0, 0.94) 43%,
    rgba(0, 0, 0, 0.78) 50%,
    rgba(0, 0, 0, 0.55) 57%,
    rgba(0, 0, 0, 0.3) 66%,
    rgba(0, 0, 0, 0.12) 75%,
    rgba(0, 0, 0, 0) 86%
  );
  transform: translate(60%, 60%);
  will-change: transform;
}
html[data-intro="revealing"] .hero-intro__scrim,
html[data-intro="done"] .hero-intro__scrim {
  transform: translate(0, 0);
  transition: transform 2.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Text-legibility scrim: independent of the diagonal sweep direction, so the
   sweep itself always runs bottom-right -> top-left as specified, but the
   text column (which lives at top-left, where the diagonal scrim is most
   transparent) still gets a reliable dark backing over the still-playing
   video during the ~2s copy sits over moving footage. */
.hero-intro__legibility {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.6) 25%,
    rgba(0, 0, 0, 0.28) 48%,
    rgba(0, 0, 0, 0) 68%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
}
html[data-intro="revealing"] .hero-intro__legibility,
html[data-intro="done"] .hero-intro__legibility {
  opacity: 1;
}
html[data-intro-immediate] .hero-intro__legibility {
  transition: none;
  opacity: 1;
}
@media (max-width: 959px) {
  /* Below the desktop split, hero__body spans the full width (not just a
     left column), so a left-to-right fade would leave the right half of the
     text under-darkened. Cover the width evenly instead. */
  .hero-intro__legibility {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.55) 55%,
      rgba(0, 0, 0, 0.2) 80%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* Hero copy sits above both layers once revealed. */
.hero__grid { position: relative; z-index: 3; }

.hero-intro__skip {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 5;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--color-charcoal-600);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
}
.hero-intro__skip:hover,
.hero-intro__skip:focus-visible {
  background: var(--color-accent);
  color: var(--on-accent);
  border-color: var(--color-accent);
}
html:not([data-intro]) .hero-intro__skip,
html[data-intro="done"] .hero-intro__skip { display: none; }

/* Phase 1: hold the copy back. It stays in the DOM and the accessibility tree
   the whole time — only its paint is deferred. */
html[data-intro="playing"] .hero__body,
html[data-intro="playing"] .hero__visual {
  opacity: 0;
  pointer-events: none;
}
html[data-intro="playing"] .hero-fade { animation: none; }

/* Phase 2: copy animates in behind the settling scrim. Body copy, buttons and
   the tagline have no .hero-fade class, so they appear the instant
   .hero__body's forced opacity:0 lifts (immediately on entering
   "revealing") — these delays exist only so the eyebrow and headline don't
   lag conspicuously behind them. The declarations are identical for
   "revealing" and "done" so moving between those two states never restarts
   an animation mid-flight. */
html[data-intro="revealing"] .hero-fade--1,
html[data-intro="done"] .hero-fade--1 { animation: bam-hero-fade 0.6s ease-out 0.1s forwards; }
html[data-intro="revealing"] .hero-fade--2,
html[data-intro="done"] .hero-fade--2 { animation: bam-hero-fade 0.6s ease-out 0.35s forwards; }
html[data-intro="revealing"] .hero__visual,
html[data-intro="done"] .hero__visual { opacity: 0; animation: bam-hero-fade 0.8s ease-out 0.6s forwards; }
html[data-intro="playing"] .brs-core-shine,
html[data-intro="playing"] .brs-ring-shine { animation: none; }
html[data-intro="revealing"] .brs-core-shine,
html[data-intro="done"] .brs-core-shine { animation: bam-core-shine 0.9s ease-in-out 1.7s 1; }
html[data-intro="revealing"] .brs-ring-shine,
html[data-intro="done"] .brs-ring-shine { animation: bam-ring-shine 0.9s ease-in-out 2.2s 1; }

/* Skip / autoplay refusal / error / timeout: no staged delays, show at once. */
html[data-intro-immediate] .hero-intro__scrim { transition: none; }
html[data-intro-immediate] .hero-fade--1,
html[data-intro-immediate] .hero-fade--2 { animation: bam-hero-fade 0.5s ease-out 0s forwards; }
html[data-intro-immediate] .hero__visual { animation: bam-hero-fade 0.5s ease-out 0.1s forwards; }
html[data-intro-immediate] .brs-core-shine { animation: bam-core-shine 0.9s ease-in-out 1.2s 1; }
html[data-intro-immediate] .brs-ring-shine { animation: bam-ring-shine 0.9s ease-in-out 1.7s 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-intro, .hero-intro__skip { display: none; }
}

/* BRS core shine: a quick, bright flash on the orange ring, 2s after the
   page settles. Then the outer grey ring shines 0.5s after that. Both are
   pure animation-delay — no JS/scroll needed. */
.brs-core-shine {
  animation: bam-core-shine 0.9s ease-in-out 2s 1;
}
@keyframes bam-core-shine {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 69, 0, 0)); }
  50% { filter: drop-shadow(0 0 26px rgba(255, 69, 0, 1)) drop-shadow(0 0 10px rgba(255, 69, 0, 1)); }
}

.brs-ring-shine {
  animation: bam-ring-shine 0.9s ease-in-out 2.5s 1;
}
@keyframes bam-ring-shine {
  0%, 100% { stroke: #3d3d3d; filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { stroke: #ffffff; filter: drop-shadow(0 0 26px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 1)); }
}
.diagram-caption {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-3);
  max-width: 60ch;
}
.section--dark .diagram-caption { color: var(--text-muted-on-dark); }

/* ============ IMAGE / MEDIA PLACEHOLDER ============ */
.media-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-charcoal-900);
  border: 1px dashed var(--color-charcoal-600);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  color: var(--text-muted-on-dark);
}
.media-slot--wide { aspect-ratio: 16 / 9; }
.media-slot__note {
  font-size: var(--fs-xs);
  text-align: center;
  max-width: 40ch;
  line-height: var(--lh-body);
}
.media-slot__note strong { display: block; color: var(--color-white); margin-bottom: var(--space-2); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-nav); font-size: var(--fs-sm); }

/* ============ SITE FOOTER ============ */
.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-charcoal-800);
}
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer__brand img { height: 30px; margin-bottom: var(--space-4); }
.site-footer__brand p { font-size: var(--fs-sm); color: var(--text-muted-on-dark); max-width: 42ch; }
.site-footer__tagline {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-nav);
}
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--space-4);
  color: var(--text-muted-on-dark);
}
.site-footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__links a { font-size: var(--fs-sm); }
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--accent-on-dark); }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--text-muted-on-dark);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--color-white); }

/* ============ COOKIE CONSENT ============ */
.cookie-banner {
  position: fixed;
  left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  max-width: 620px;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  padding: var(--space-6);
  z-index: var(--z-cookie);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: none;
}
.cookie-banner[data-open="true"] { display: block; }
.cookie-banner h2 { font-size: var(--fs-lg); margin-bottom: var(--space-3); }
.cookie-banner p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-5); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cookie-banner__actions .btn { flex: 1 1 auto; }

.cookie-modal {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.7);
  z-index: calc(var(--z-cookie) + 1);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.cookie-modal[data-open="true"] { display: flex; }
.cookie-modal__panel {
  background: var(--color-white);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-7);
}
.cookie-modal__panel h2 { margin-bottom: var(--space-5); }
.cookie-pref {
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.cookie-pref__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.cookie-pref__title { font-family: var(--font-display); font-weight: 600; }
.cookie-pref p { font-size: var(--fs-sm); color: var(--text-muted); }

.toggle {
  position: relative;
  width: 44px; height: 24px;
  flex-shrink: 0;
}
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle__track {
  position: absolute; inset: 0;
  background: var(--color-charcoal-300);
  border-radius: 999px;
  transition: background var(--transition-fast);
}
.toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform var(--transition-fast);
}
.toggle input:checked ~ .toggle__track { background: var(--color-accent-dark); }
.toggle input:checked ~ .toggle__thumb { transform: translateX(20px); }
.toggle input:disabled ~ .toggle__track { background: var(--color-charcoal-400); opacity: 0.6; }
.toggle input:focus-visible ~ .toggle__track { outline: var(--focus-ring); outline-offset: 2px; }

/* ============ BADGES ============ */
.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
}
.badge--planned {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

/* ============ BREADCRUMB ============ */
.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-top: var(--space-5);
}
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-accent-dark); }
.breadcrumb span[aria-hidden="true"] { margin: 0 var(--space-2); }

/* ============ PROCESS STEPS ============ */
.process-list {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  counter-reset: step;
  margin-block: var(--space-6);
}
@media (min-width: 900px) {
  .process-list--5 { grid-template-columns: repeat(5, 1fr); }
}
.process-step {
  padding-top: var(--space-5);
  border-top: 3px solid var(--color-accent);
}
.process-step__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-2);
}
.process-step__title { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--space-2); }
.process-step p { font-size: var(--fs-sm); color: var(--text-muted); }
.section--dark .process-step p { color: var(--text-muted-on-dark); }

/* ============ AUDIT-GAP ADDITIONS ============ */

/* §09.1 cookie saved confirmation (shown briefly after Save My Choices) */
.cookie-saved {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: var(--surface-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.cookie-saved[data-active="true"] { display: block; }

/* §09.5 Return to top */
.site-footer__top {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--text-muted-on-dark);
  border-bottom: 1px solid var(--color-charcoal-700);
  padding-bottom: 2px;
}
.site-footer__top:hover, .site-footer__top:focus-visible {
  color: var(--color-white);
  border-bottom-color: var(--color-accent);
}

/* §09.5 Clear filters */
.filter-btn--clear {
  border-style: dashed;
  color: var(--text-muted);
}
.filter-btn--clear:hover, .filter-btn--clear:focus-visible {
  color: var(--color-accent-dark);
  border-color: var(--color-accent);
}
.filter-btn[hidden] { display: none; }