/**
 * home.css — the department landing (js/home.js, #page-home) and the
 * section index at the top of a realm (.realm-index, Company).
 * Every colour is a token: it follows the theme with nothing extra.
 */

/* ── shared type ─────────────────────────────────────────────────── */
.home-kicker {
  font-size: var(--fs-kicker); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 14px;
}
.home-h2 {
  font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.03em;
  font-weight: 800; color: var(--navy-deep); max-width: 22ch; margin: 0 0 14px;
}
.home-lead { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.65; max-width: 60ch; margin: 0; }
.home-head { margin-bottom: clamp(24px, 3vw, 36px); }

#page-home > section + section { margin-top: clamp(72px, 10vw, 128px); }

/* ── hero ────────────────────────────────────────────────────────── */
/* the words left, the running record right; stacked below 1080px */
.home-hero {
  padding: clamp(12px, 4vw, 48px) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 452px);
  align-items: center; gap: clamp(32px, 4vw, 64px);
}
@media (max-width: 1080px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home-hero-side { max-width: 560px; }
}

/* ── the demo batch record (home.js heroRecord) ──────────────────────
   Drawn as an MES screen: a navy device bar, the record's identity and
   status, the nine-stage strip, and the audit trail as it is written.
   One palette: released is the accent, a deviation the one red. */
.home-record {
  position: relative; overflow: hidden;
  border-radius: calc(var(--radius-lg) + 2px);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), var(--surface-hi);
  font-size: 13px; color: var(--text);
}
.hrec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; background: var(--chrome); color: var(--fw-t90);
}
.hrec-label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hrec-live { width: 7px; height: 7px; border-radius: 50%; background: var(--fw-t40); box-shadow: 0 0 0 0 rgba(var(--fw-t40-rgb), .6); animation: hrec-live 2s var(--ease-out-quart) infinite; }
@keyframes hrec-live { 0% { box-shadow: 0 0 0 0 rgba(var(--fw-t40-rgb), .55); } 100% { box-shadow: 0 0 0 9px rgba(var(--fw-t40-rgb), 0); } }
.hrec-demo { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--fw-t90-rgb), .6); border: 1px solid rgba(var(--fw-t90-rgb), .22); border-radius: 6px; padding: 2px 7px; }

.hrec-id { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 0; }
.hrec-title { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--navy-deep); letter-spacing: -.01em; }
.hrec-meta { margin: 0; font-size: 11.5px; color: var(--text-muted); }
.hrec-meta span { white-space: nowrap; }
/* narrow: a line of the trail may take two rows rather than be cut */
@media (max-width: 560px) {
  .hrec-what { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.hrec-status {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 9px;
  border-radius: var(--radius-pill); background: var(--blue-dim); color: var(--blue);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  transition: background-color var(--dur-base) var(--ease-out-quart), color var(--dur-base) var(--ease-out-quart);
}
.hrec-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: hrec-blink 1.4s steps(2, jump-none) infinite; }
@keyframes hrec-blink { 50% { opacity: .25; } }
.home-record.is-released .hrec-status { background: var(--accent); color: #fff; }
.home-record.is-released .hrec-status i { animation: none; }

.hrec-stage { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 8px; }
.hrec-stage-k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.hrec-stage-n { font-size: 11.5px; color: var(--blue); }
.hrec-stage-name { font-size: 13.5px; color: var(--navy-deep); }

/* nine stages, recipe to release: done, now, still to come */
.hrec-steps { list-style: none; margin: 0; padding: 0 18px 14px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.hrec-steps li { height: 5px; border-radius: 3px; background: var(--tile-2); transition: background-color var(--dur-base) var(--ease-out-quart); }
.hrec-steps li.is-done { background: var(--blue); }
.hrec-steps li.is-now { background: linear-gradient(90deg, var(--blue), var(--accent)); box-shadow: 0 0 0 3px var(--accent-dim); }

/* the audit trail: who, what, when — the newest line last */
.hrec-log {
  list-style: none; margin: 0; padding: 4px 0; min-height: calc(4 * 46px + 8px);
  border-top: 1px solid var(--border); background: color-mix(in srgb, var(--tile) 45%, var(--surface));
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hrec-line {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 10px; row-gap: 1px;
  padding: 6px 18px 6px 15px; border-left: 3px solid transparent;
  animation: hrec-line-in var(--dur-slow) var(--ease-out-expo) both;
}
.hrec-line.is-still { animation: none; }
@keyframes hrec-line-in { from { opacity: 0; transform: translateY(10px); } }
.hrec-t { grid-row: span 2; font-size: 11px; color: var(--text-faint); padding-top: 1px; }
.hrec-who { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.hrec-what { font-size: 12.5px; color: var(--navy-deep); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrec-line[data-kind="signature"] { border-left-color: var(--blue); }
.hrec-line[data-kind="signature"] .hrec-who { color: var(--blue); }
.hrec-line[data-kind="deviation"] { border-left-color: var(--red); background: var(--red-dim); }
.hrec-line[data-kind="deviation"] .hrec-who { color: var(--red); }
.hrec-line[data-kind="resolved"] { border-left-color: var(--accent); }
.hrec-line[data-kind="resolved"] .hrec-who { color: var(--accent); }

.hrec-seal {
  display: flex; align-items: center; gap: 9px; margin: 0; padding: 12px 18px;
  border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text-faint);
  transition: color var(--dur-base) var(--ease-out-quart);
}
.hrec-seal-mark {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px dashed var(--text-faint); font-size: 11px; color: transparent;
  transition: all var(--dur-base) var(--ease-out-quart);
}
.home-record.is-released .hrec-seal { color: var(--navy-deep); }
.home-record.is-released .hrec-seal-mark { border: 0; background: var(--accent); color: #fff; }

/* ── GxP by design ───────────────────────────────────────────────── */
.standards-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.standard {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px;
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), var(--surface-hi);
}
.standard-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px;
  border-radius: 6px; background: var(--blue-dim); color: var(--blue);
}
.standard-icon svg { width: 19px; height: 19px; }
.standard-name { font-size: 15px; color: var(--navy-deep); letter-spacing: -.01em; }
.standard-note { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.standards-more { margin: 18px 0 0; }
.home-title {
  font-size: var(--fs-display); line-height: 1; letter-spacing: -0.035em;
  font-weight: 800; color: var(--navy-deep); max-width: 16ch; margin: 0 0 22px;
}
.home-title:focus { outline: none; }
.home-title:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.home-hero-lead { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.65; max-width: 62ch; margin: 0; }
.home-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.home-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-size: 13.5px; }
.home-cta-quiet {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 4px;
  font-size: 13.5px; font-weight: 700; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);
}
.home-cta-quiet:hover { color: var(--blue); border-bottom-color: currentColor; }

/* ── the two doors ───────────────────────────────────────────────── */
/* the stage the doors turn in (home.js): one shared vanishing point */
.home-doors { perspective: 1600px; perspective-origin: 50% 40%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(48px, 7vw, 80px); }
.home-door {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--surface-hi);
  transition: translate var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart);
  backface-visibility: hidden;
}
/* `translate`, not `transform`: the scroll tilt (home.js) owns transform */
.home-door:hover { translate: 0 -3px; box-shadow: var(--shadow-md), var(--surface-hi); border-color: var(--blue-dim); }
.home-door:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.door-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tile); }
.door-media :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-door[data-tone="plant"] .door-media img { object-position: top left; }
.door-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.4vw, 28px); flex: 1; }
.door-label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
.door-mark {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 11.5px; letter-spacing: 0; border: 1px solid currentColor;
}
.home-door[data-tone="plant"] .door-mark { background: var(--blue); color: var(--surface); border-color: var(--blue); }
.door-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: var(--navy-deep); margin: 0; }
.door-desc { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.door-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.door-points li { position: relative; padding-left: 20px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.door-points li::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-dim); box-shadow: inset 0 0 0 2px var(--accent);
}
.door-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--border);
}
.door-count { font-size: 13px; color: var(--text-muted); }
.door-count b { font-size: 20px; color: var(--navy-deep); margin-right: 2px; }
.door-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--blue); }

/* ── the bridge: lab station → PLANT module ──────────────────────── */
.bridge-steps {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.bridge-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline;
  padding: 16px 18px; border-radius: var(--radius-md); background: var(--tile);
}
.bridge-step-n { grid-row: span 2; font-size: 12px; color: var(--blue); font-weight: 700; }
.bridge-step b { font-size: 15px; color: var(--navy-deep); }
.bridge-step span:last-child { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.bridge-table { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.bridge-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
.bridge-rows .bridge-row + .bridge-row { border-top: 1px solid var(--border); }
.bridge-row-head > span { padding: 0 22px; }
.bridge-row-head {
  padding: 12px 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border); background: var(--bg);
}
.bridge-cell {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline;
  padding: 18px 22px; text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
.bridge-cell:hover { background: var(--blue-dim); }
.bridge-cell:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.bridge-tag { grid-row: span 2; font-size: 10.5px; font-weight: 700; color: var(--text-faint); letter-spacing: .04em; min-width: 9ch; }
.bridge-to .bridge-tag { color: var(--blue); }
.bridge-name { font-size: 15px; color: var(--navy-deep); }
.bridge-sub { font-size: 12.5px; color: var(--text-muted); }
.bridge-arrow {
  position: relative; display: grid; place-items: center; color: var(--blue); font-weight: 700;
}
.bridge-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--border), var(--blue-dim), var(--border)); z-index: 0; }
.bridge-arrow { isolation: isolate; }
.bridge-arrow::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); z-index: -1; }

/* ── challenges ──────────────────────────────────────────────────── */
.challenge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.challenge-grid > li { display: flex; }
.challenge {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px 44px; border-radius: var(--radius-md); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.challenge:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.challenge:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.challenge-n { font-size: 11px; color: var(--text-faint); font-weight: 700; }
.challenge-label { font-size: 15px; color: var(--navy-deep); line-height: 1.3; }
.challenge-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.challenge .nudge-icon { position: absolute; left: 20px; bottom: 16px; color: var(--blue); font-weight: 700; }

/* ── partners ────────────────────────────────────────────────────── */
.home-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.home-partners .home-kicker { margin: 0; color: var(--text-muted); }
.home-partner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* ── the next step ───────────────────────────────────────────────── */
/* the page's one dark panel: the ask, set apart from everything above it
   (the same deep navy as the ROI estimate), lit from its top corner */
.home-closing {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(56px, 8vw, 104px);
  color: var(--fw-t90);
}
.home-closing::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(var(--steel-rgb), .42), rgba(var(--steel-rgb), .12) 55%, transparent);   /* the website's blue */
  pointer-events: none;
}
.home-closing::after {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.home-closing .home-h2 { max-width: 20ch; color: #fff; }
.home-closing .home-lead { color: rgba(var(--fw-t90-rgb), .74); }
.home-closing .home-cta-quiet { color: #fff; }
.home-closing .home-cta-quiet:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }
.home-closing .home-cta:focus-visible, .home-closing .home-cta-quiet:focus-visible { outline-color: #fff; }

/* ── a realm's section index (Company) ───────────────────────────── */
.realm-index { margin-top: clamp(24px, 3vw, 36px); }
.realm-index-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.realm-index-list > li { display: flex; }
.realm-index-card {
  flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: baseline;
  padding: 16px 18px; border-radius: var(--radius-md); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.realm-index-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.realm-index-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.realm-index-num { grid-row: span 3; font-size: 12px; font-weight: 700; color: var(--blue); }
.realm-index-kicker { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.realm-index-title { font-size: 14.5px; color: var(--navy-deep); line-height: 1.3; }
.realm-index-min { font-size: 11.5px; color: var(--text-muted); }

/* ── narrow screens ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .home-doors { grid-template-columns: minmax(0, 1fr); }
  .bridge-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bridge-row-head { display: none; }
  .bridge-row { grid-template-columns: minmax(0, 1fr); }
  .bridge-arrow { height: 22px; transform: rotate(90deg); }
  .bridge-arrow::after, .bridge-line { display: none; }
  .bridge-cell { padding: 14px 18px; }
  .bridge-to { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-door, .challenge, .realm-index-card { transition: none; }
  .challenge:hover, .realm-index-card:hover { transform: none; }
  .home-door:hover { translate: none; }
}

/* ══ the hero, over the batch twin's 3D hall (js/home.js heroMedia) ══
   The navy band's ground is a recording of the twin's guided tour, under
   a navy shade: deepest behind the words, opening up on the right where
   the hall shows through the frosted record. Its top runs up behind the
   top bar with the band (--band-top), and it fills the first screen. */
.home-hero { align-items: center; }
/* centred on the whole screen below the top bar, not on the band alone */
.home-hero.is-full { padding-top: 0; padding-bottom: var(--band-adjust, 0px); }
.home-hero.is-opener::after { z-index: -2; }          /* the lift stays under the picture */

.home-hero-media {
  position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
  top: calc(-1 * var(--band-top, 0px));
  overflow: hidden; pointer-events: none;
  background: var(--fw-navy);
}
.home-hero-video, .home-hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
  transition: opacity .42s var(--ease-out-quart);
}
.home-hero-media.is-turning .home-hero-video { opacity: 0; }
/* a still: the frame drifts closer, slowly, back and forth */
.home-hero-media.is-still .home-hero-poster { animation: hero-drift 26s var(--ease-in-out-smooth) infinite alternate; transform-origin: 64% 52%; }
@keyframes hero-drift { to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .home-hero-media.is-still .home-hero-poster { animation: none; } }

.home-hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 82% 58%, transparent 0%, rgba(var(--fw-s80-rgb), .18) 70%),
    linear-gradient(90deg, rgba(6, 43, 63, .97) 0%, rgba(6, 43, 63, .93) 38%, rgba(6, 43, 63, .55) 62%, rgba(6, 43, 63, .34) 100%),
    linear-gradient(180deg, rgba(6, 43, 63, .78) 0%, rgba(6, 43, 63, 0) 24%, rgba(6, 43, 63, 0) 68%, rgba(var(--fw-s80-rgb), .96) 100%);
}

/* over the moving hall, the words a step lighter than the page's greys (AA on the shade) */
.home-hero .home-hero-kicker { color: var(--steel); }
.home-hero .home-hero-lead { color: #d3dde3; }
.home-hero .home-cta-quiet { color: #fff; }
.home-hero .home-cta-quiet:hover { color: var(--steel); }

/* the record, frosted: the hall moves behind it while it writes itself */
.home-hero .home-record {
  background: rgba(var(--fw-s80-rgb), .78);
  border-color: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* the way into the twin: a glass pill with a pulsing play */
.home-hero-twin {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  padding: 7px 20px 7px 7px; border-radius: var(--radius-pill); text-decoration: none;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .2s var(--ease-out-quart), border-color .2s var(--ease-out-quart), transform .2s var(--ease-out-quart);
}
.home-hero-twin:hover { background: rgba(255, 255, 255, .11); border-color: rgba(var(--steel-rgb), .55); transform: translateY(-1px); }
.home-hero-twin:focus-visible { outline: 2px solid var(--steel-t40); outline-offset: 4px; }
.home-hero-twin-play {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--steel); color: var(--steel-ink);
}
.home-hero-twin-play svg { width: 17px; height: 17px; margin-left: 2px; }
.home-hero-twin-play::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(var(--steel-rgb), .6);
  animation: hero-ping 2.4s var(--ease-out-quart) infinite;
}
@keyframes hero-ping { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.home-hero-twin-text { display: grid; line-height: 1.3; }
.home-hero-twin-text b { font-size: 14px; font-weight: 800; color: #fff; }
.home-hero-twin-text span { font-size: 12px; color: #aebdc6; }

/* the live tag at the hall's corner, on the content's right edge */
.home-hero-live {
  position: absolute; z-index: 1; bottom: clamp(18px, 3vh, 32px);
  right: max(var(--wrap-pad), calc((100vw - var(--wrap-max)) / 2 + var(--wrap-pad)));
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 11.5px; color: #e8eef1; text-decoration: none;
  background: rgba(var(--fw-s90-rgb), .55); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.home-hero-live:hover { border-color: rgba(var(--steel-rgb), .6); }
.home-hero-live:focus-visible { outline: 2px solid var(--steel-t40); outline-offset: 3px; }
.home-hero-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e86f51; box-shadow: 0 0 0 0 rgba(232, 111, 81, .6); animation: hero-live 1.8s ease-out infinite; }
@keyframes hero-live { to { box-shadow: 0 0 0 7px rgba(232, 111, 81, 0); } }

@media (prefers-reduced-motion: reduce) {
  .home-hero-twin-play::after, .home-hero-live-dot { animation: none; }
}
/* narrower: the words over an even shade; the tag sits under the content */
@media (max-width: 1080px) {
  .home-hero-scrim {
    background: linear-gradient(180deg, rgba(6, 43, 63, .9) 0%, rgba(6, 43, 63, .88) 55%, rgba(6, 43, 63, .8) 80%, rgba(var(--fw-s80-rgb), .96) 100%);
  }
  .home-hero-live { position: static; justify-self: start; margin-top: 4px; }
}