/* ==========================================================================
   BIOLOG — DARK GLASS HERO
   --------------------------------------------------------------------------
   Loaded only by index.html and hero-variants.html. Everything is scoped
   under .hero-dark, so the square-cornered, shadowless, gradient-free rules
   in biolog.css are untouched everywhere else on the site.

   This block is a deliberate exception to three house rules: it uses corner
   radius, glow and gradient. See REVIEW.md section 9.

   Switch the light source with one attribute on the section:
       <section class="hero-dark" data-glow="amber">   default
       <section class="hero-dark" data-glow="sand">
   ========================================================================== */

.hero-dark {
  --chamber:   #04100E;
  --chamber-2: #08201C;
  --glow:      #E9A23B;   /* amber — the light source */
  --glow-soft: #F3C77E;
  --aqua:      #2FB6A8;
  --aqua-lit:  #6FE7D6;
  --panel:     rgba(255, 255, 255, 0.045);
  --panel-hi:  rgba(255, 255, 255, 0.16);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--chamber);
  padding: 0;
}

.hero-dark[data-glow="sand"] {
  --glow: #DFD581;
  --glow-soft: #EDE7B6;
}

/* ------------------------------------------------------------- 1. ground */
.hd-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hd-bg svg { width: 100%; height: 100%; display: block; }

/* two soft blooms sitting behind everything, in CSS so they scale with the
   viewport rather than with the SVG viewBox */
.hd-bg::before,
.hd-bg::after { content: ''; position: absolute; border-radius: 50%; }
.hd-bg::before {
  width: 74%; height: 128%; right: -8%; top: -30%;
  background: radial-gradient(circle at 50% 50%,
    rgba(47,182,168,.34) 0%, rgba(47,182,168,.13) 38%, transparent 68%);
  filter: blur(22px);
}
.hd-bg::after {
  width: 46%; height: 78%; left: 18%; bottom: -26%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--glow) 26%, transparent) 0%,
    color-mix(in srgb, var(--glow) 8%, transparent) 42%, transparent 70%);
  filter: blur(30px);
}

/* vignette, so the band reads as a lit chamber rather than a flat fill */
.hero-dark::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(4,16,14,.6) 0%, transparent 22%);
}

/* ------------------------------------------------------------ 2. content */
.hd-in {
  position: relative; z-index: 2;
  display: grid; gap: 48px; align-items: center;
  padding-top: 88px; padding-bottom: 96px;
}
@media (min-width: 1000px) {
  .hd-in { grid-template-columns: 1.02fr .98fr; gap: 40px;
           padding-top: 120px; padding-bottom: 130px; }
}

.hd-copy .eyebrow { color: var(--aqua-lit); }
.hd-copy .eyebrow::before { color: var(--aqua-lit); }

.hd-copy h1 {
  color: #FFFFFF;
  font-size: clamp(38px, 5.2vw, 66px);
  text-wrap: balance;
  font-weight: 900; line-height: 1.02; letter-spacing: -.035em;
  margin: 0; max-width: 13ch;
}
.hd-copy h1 .top { display: block; }
.hd-copy h1 .lit {
  display: block;
  background: linear-gradient(96deg, var(--aqua-lit) 0%, var(--aqua) 58%,
              color-mix(in srgb, var(--aqua) 70%, var(--glow)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--aqua-lit);
}
.hd-copy .lead { color: #9FBDB6; margin-top: 26px; max-width: 50ch; }

/* pill buttons with the trailing disc, per the reference */
.hd-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.pill {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 9px 9px 9px 28px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--panel-hi);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: #fff;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pill .disc {
  width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--aqua-lit); color: #04100E;
  transition: transform .2s ease;
}
.pill .disc svg { width: 16px; height: 16px; }
.pill:hover { border-color: rgba(111,231,214,.55); transform: translateY(-1px); }
.pill:hover .disc { transform: translateX(3px); }
.pill-solid { background: var(--aqua-lit); color: #04100E; border-color: transparent; }
.pill-solid .disc { background: #04100E; color: var(--aqua-lit); }
.pill-solid:hover { background: #8BF0E1; }
@media (prefers-reduced-motion: reduce) {
  .pill:hover, .pill:hover .disc { transform: none; }
}

.hd-trust {
  margin-top: 34px; font-size: 14px; color: #7FA39C;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.hd-trust a { color: var(--aqua-lit); border-bottom-color: rgba(111,231,214,.4); }

/* --------------------------------------------------------- 3. the panels */
.hd-art { position: relative; min-height: 400px; }
@media (min-width: 1000px) { .hd-art { min-height: 540px; } }

.glass {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--panel-hi);
  background:
    linear-gradient(150deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 46%,
                    rgba(255,255,255,.05) 100%);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 32px 70px -28px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.16);
}
/* the inner hairline frame the reference uses on both panels */
.glass::before {
  content: ''; position: absolute; inset: 9px; border-radius: 12px;
  border: 1px solid rgba(111,231,214,.20); pointer-events: none;
}

/* ---- the capture tile ---- */
.hd-tile {
  width: 176px; height: 176px;
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: grid; place-items: center;
}
@media (min-width: 1000px) { .hd-tile { width: 200px; height: 200px; left: 0; } }
.hd-tile .platen { position: relative; width: 92px; height: 92px; }
.hd-tile .platen svg { width: 100%; height: 100%; display: block; }
.hd-tile .scan {
  position: absolute; left: -14px; right: -14px; top: 34%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--glow) 22%,
              var(--glow-soft) 50%, var(--glow) 78%, transparent);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--glow) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hd-tile .scan { animation: hd-scan 5.2s cubic-bezier(.45,0,.55,1) infinite; }
}
@keyframes hd-scan {
  0%, 100% { top: 22%; opacity: .35; }
  50%      { top: 74%; opacity: 1; }
}
.hd-tile .cap {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: #7FA39C;
}

/* ---- the readout panel ---- */
.hd-panel {
  position: absolute; right: 0; top: 0; z-index: 4;
  width: min(100%, 410px); padding: 18px 18px 16px;
}
@media (min-width: 1000px) { .hd-panel { width: 420px; } }
/* the notched corner from the reference card */
.hd-panel { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px),
            calc(100% - 26px) 100%, 0 100%); }

.hd-panel-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--aqua-lit);
  padding: 4px 4px 14px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.hd-panel-head .live {
  width: 6px; height: 6px; border-radius: 999px; background: var(--aqua-lit);
  box-shadow: 0 0 10px 2px rgba(111,231,214,.7);
}
@media (prefers-reduced-motion: no-preference) {
  .hd-panel-head .live { animation: hd-pulse 2.6s ease-in-out infinite; }
}
@keyframes hd-pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.hd-panel-head .far { margin-left: auto; color: #7FA39C; letter-spacing: .08em; }

.hd-line {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.hd-line:last-of-type { border-bottom: 0; }
.hd-line .id {
  font-family: var(--mono); font-size: 13px; color: #EAF6F3;
  font-variant-numeric: tabular-nums; display: block;
}
.hd-line .at { font-size: 11px; color: #7FA39C; display: block; margin-top: 3px; }
.hd-st {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px;
  padding: 5px 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap;
}
.hd-st i { width: 5px; height: 5px; border-radius: 999px; background: currentColor;
  box-shadow: 0 0 8px 1px currentColor; }
.hd-st.ok { color: #6FE7B4; }
.hd-st.fl { color: var(--glow-soft); }
.hd-st.no { color: #F5877D; }

/* rows resolve one at a time on load */
@media (prefers-reduced-motion: no-preference) {
  .hd-line { opacity: 0; transform: translateY(5px); }
  .hd-line.in { opacity: 1; transform: none;
    transition: opacity .5s ease, transform .5s ease; }
}

/* ---- the wire between them ---- */
.hd-wire {
  position: absolute; left: 176px; bottom: 96px; width: 46px; height: 128px;
  z-index: 2; pointer-events: none; display: none;
}
@media (min-width: 1000px) { .hd-wire { display: block; left: 200px; } }
.hd-wire svg { width: 100%; height: 100%; overflow: visible; }

/* --------------------------------------------------------- 4. small view */
@media (max-width: 999px) {
  .hd-art { min-height: 340px; margin-top: 8px; }
  .hd-panel { right: 0; top: 0; width: min(100%, 400px); }
  .hd-tile { left: 0; bottom: 0; }
}
@media (max-width: 460px) {
  .hd-art { min-height: 400px; }
  .hd-panel { width: 100%; }
  .hd-tile { width: 148px; height: 148px; }
  .hd-tile .platen { width: 74px; height: 74px; }
}

/* Safari and Firefox without backdrop-filter still need a readable panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(10, 32, 28, .88); }
}

/* ==========================================================================
   5. THE ICE CARD
   The credential, front-most. Adding it turns the hero from
   capture -> decision into capture -> credential -> decision, which is the
   card-binding argument staged in depth instead of drawn flat.

   Two faces, switched on the element:
       data-face="bars"      abstract data bars, as in the reference
       data-face="redacted"  a real card front with the personal fields barred
   ========================================================================== */

.hd-card {
  position: absolute; right: 0; top: 150px; z-index: 5;
  width: min(100%, 352px); aspect-ratio: 85.6 / 54;   /* ID-1 */
  padding: 17px 18px; display: flex; flex-direction: column;
  box-shadow:
    0 44px 90px -30px rgba(0,0,0,.92),
    0 0 0 1px rgba(111,231,214,.10),
    inset 0 1px 0 rgba(255,255,255,.20);
}
/* the reference's notched corner belongs to the abstract face only —
   a real card does not have one */
.hd-card[data-face="bars"] {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px),
             calc(100% - 24px) 100%, 0 100%);
}
.hd-card::before { inset: 8px; border-radius: 12px; }

.cd-kick {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #7FA39C; display: block;
}
.cd-title {
  font-size: 15px; font-weight: 900; letter-spacing: .04em;
  text-transform: uppercase; color: #EAF6F3; display: block; margin-top: 3px;
}
.cd-bar { display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(111,231,214,.55), rgba(111,231,214,.14)); }
.cd-bar + .cd-bar { margin-top: 8px; }
.w95 { width: 95% } .w80 { width: 80% } .w66 { width: 66% }
.w52 { width: 52% } .w40 { width: 40% } .w28 { width: 28% }

/* ---- abstract face ---- */
.cd-row { display: flex; align-items: center; gap: 14px; }
.cd-avatar {
  width: 52px; height: 52px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, rgba(111,231,214,.30), rgba(111,231,214,.06) 70%);
  border: 1px solid rgba(111,231,214,.38);
}
.cd-avatar svg { width: 26px; height: 26px; }
.cd-fields { margin-top: 15px; flex: 1; }
.cd-foot {
  margin-top: auto; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; color: #8FB5AD;
  font-variant-numeric: tabular-nums;
}
.cd-chip {
  width: 26px; height: 19px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--glow-soft), var(--glow));
  opacity: .82; position: relative;
}
.cd-chip::after {
  content: ''; position: absolute; inset: 4px 3px;
  border-left: 1px solid rgba(4,16,14,.45); border-right: 1px solid rgba(4,16,14,.45);
}
.cd-foot .far { margin-left: auto; letter-spacing: .12em; text-transform: uppercase;
  font-size: 8.5px; color: #7FA39C; }

/* ---- real card face ---- */
.cd-head {
  display: flex; align-items: center; gap: 9px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cd-crest {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 3px;
  border: 1px solid rgba(111,231,214,.45);
  background: radial-gradient(circle at 50% 40%, rgba(111,231,214,.30), transparent 72%);
}
.cd-inst {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: #BFD9D3;
}
.cd-role {
  margin-left: auto; font-size: 8.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--aqua-lit);
  border: 1px solid rgba(111,231,214,.4); border-radius: 999px; padding: 3px 9px;
}
.cd-body { display: flex; gap: 14px; padding-top: 12px; flex: 1; }
.cd-photo {
  width: 62px; flex: 0 0 auto; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  position: relative;
}
.cd-photo::after {
  content: 'PHOTO'; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .2em; color: #6E9089;
}
.cd-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cd-id {
  font-family: var(--mono); font-size: 14px; color: #EAF6F3; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.cd-lab { font-family: var(--mono); font-size: 8px; letter-spacing: .18em;
  text-transform: uppercase; color: #6E9089; }
.cd-mrz {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.10);
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: #5E807A;
  white-space: nowrap; overflow: hidden;
}

/* the readout drops behind the card and only its top edge shows */
.hd-panel { z-index: 3; right: -14px; width: min(100%, 336px); }
@media (min-width: 1000px) { .hd-panel { width: 336px; right: -14px; } }
.hd-tile { z-index: 4; }
@media (min-width: 1000px) { .hd-tile { width: 168px; height: 168px; } }
@media (min-width: 1000px) { .hd-tile .platen { width: 78px; height: 78px; } }
@media (min-width: 1000px) { .hd-wire { left: 168px; bottom: 84px; height: 116px; } }

@media (max-width: 999px) {
  .hd-art { min-height: 430px; }
  .hd-card { top: 104px; right: 0; width: min(100%, 330px); }
  .hd-panel { top: 0; right: 0; width: min(100%, 300px); }
}
@media (max-width: 460px) {
  .hd-art { min-height: 420px; }
  .hd-card { top: 92px; width: 100%; }
  .hd-panel { width: 90%; }
  .cd-title { font-size: 13px; }
}

/* ==========================================================================
   6. FULL-SCREEN HERO + FLOATING NAV
   The hero fills the viewport and the navigation sits over it, transparent,
   until you scroll past — then it pins and reverts to the light bar the
   other nineteen pages use.

   100svh, not 100vh: on mobile browsers vh measures the viewport with the
   address bar hidden, so a 100vh hero is cut off on load and the buttons
   land below the fold.
   ========================================================================== */

.site-top.over {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  transition: background .28s ease, box-shadow .28s ease;
}
.site-top.over .util {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #8FB5AD;
}
.site-top.over .util a { color: #8FB5AD; }
.site-top.over .util a:hover { color: var(--aqua-lit); }
.site-top.over .util .sep { color: rgba(255,255,255,.18); }

.site-top.over header.nav {
  position: static; background: transparent; backdrop-filter: none;
  -webkit-backdrop-filter: none; border-bottom: 0;
}
.site-top.over .wordmark b { color: #FFFFFF; }
.site-top.over .wordmark span { color: #9FBDB6; }
/* the mark stays orange on the chamber ground — it carries against it, and
   a white mark would lose the one piece of brand colour in the composition */
.site-top.over .wordmark .bl-mark { color: #F4502A; }
.site-top.over .nav-links > *,
.site-top.over .has-menu > button { color: #E2F0EC; }
.site-top.over .nav-links a:hover,
.site-top.over .has-menu > button:hover { color: var(--aqua-lit); }
.site-top.over .nav-links .btn-primary {
  background: var(--aqua-lit); border-color: var(--aqua-lit); color: #04100E;
  border-radius: 999px; padding: 11px 22px;
}
.site-top.over .nav-links .btn-primary:hover { background: #8BF0E1; color: #04100E; }
.site-top.over .nav-toggle {
  color: #E2F0EC; border-color: rgba(255,255,255,.28); border-radius: 999px;
}
.site-top.over .drawer { background: rgba(4,16,14,.97); border-top-color: rgba(255,255,255,.12); }
.site-top.over .drawer a { color: #E2F0EC; border-bottom-color: rgba(255,255,255,.10); }
.site-top.over .menu { background: #0A211D; border-color: rgba(255,255,255,.14); }
.site-top.over .menu a { color: #DCEBE7; }
.site-top.over .menu a:hover { background: rgba(255,255,255,.06); color: var(--aqua-lit); }

/* once the hero has scrolled by, revert to the standard light bar */
.site-top.over.pinned {
  position: fixed; background: rgba(255,255,255,.97);
  box-shadow: 0 1px 0 var(--rule);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.site-top.over.pinned .util { display: none; }
.site-top.over.pinned .wordmark b { color: var(--navy); }
.site-top.over.pinned .wordmark span { color: var(--slate); }
.site-top.over.pinned .nav-links > *,
.site-top.over.pinned .has-menu > button { color: var(--navy); }
.site-top.over.pinned .nav-links a:hover { color: var(--green); }
.site-top.over.pinned .nav-links .btn-primary {
  background: var(--green); border-color: var(--green); color: #fff;
}
.site-top.over.pinned .nav-toggle { color: var(--navy); border-color: var(--rule); }
.site-top.over.pinned .menu { background: var(--paper); border-color: var(--rule); }
.site-top.over.pinned .menu a { color: var(--ink); }
.site-top.over.pinned .drawer { background: var(--paper); border-top-color: var(--rule); }
.site-top.over.pinned .drawer a { color: var(--navy); border-bottom-color: var(--rule); }

/* the hero itself now owns the viewport */
.hero-dark.full { min-height: 100svh; display: flex; align-items: center; }
@supports not (min-height: 100svh) { .hero-dark.full { min-height: 100vh; } }
.hero-dark.full .hd-in {
  width: 100%; padding-top: 132px; padding-bottom: 72px;
}
@media (min-width: 1000px) {
  .hero-dark.full .hd-in { padding-top: 124px; padding-bottom: 64px; }
}
/* short laptop screens: let it grow rather than crush the art */
@media (max-height: 700px) and (min-width: 1000px) {
  .hero-dark.full { min-height: 720px; }
}

/* scroll cue */
.hd-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: #6E9089; border: 0;
}
.hd-cue span.rail {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, rgba(111,231,214,.55), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hd-cue span.rail { animation: hd-cue 2.6s ease-in-out infinite; transform-origin: top; }
}
@keyframes hd-cue { 0%,100% { opacity:.35; transform:scaleY(.55) } 50% { opacity:1; transform:scaleY(1) } }
@media (max-height: 720px) { .hd-cue { display: none; } }

/* ------------------------------------------- 7. the card clears the log */
.hd-panel { top: 0; right: 0; }
.hd-card { top: auto; bottom: 0; right: 0; }
@media (min-width: 1000px) {
  .hd-art { min-height: 524px; }
  .hd-panel { width: 336px; right: 0; }
  .hd-card  { width: 336px; right: 0; bottom: 0; }
  .hd-tile  { left: 0; bottom: 0; }
  .hd-wire  { left: 168px; bottom: 92px; height: 96px; }
}
/* the second connector: card up to the log it resolves against */
.hd-wire2 {
  position: absolute; right: 264px; bottom: 214px; width: 20px; height: 52px;
  z-index: 2; pointer-events: none; display: none;
}
@media (min-width: 1000px) { .hd-wire2 { display: block; } }
.hd-wire2 svg { width: 100%; height: 100%; overflow: visible; }

/* ============================================ 8. MOTION — the log panel */
.hd-panel { overflow: hidden; }

/* a. sweep — a highlight passes down the rows */
.hero-dark[data-log="sweep"] .hd-panel::after {
  content: ''; position: absolute; left: 0; right: 0; height: 64px; top: -64px;
  background: linear-gradient(180deg, transparent,
              rgba(111,231,214,.14) 45%, rgba(111,231,214,.02) 70%, transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-dark[data-log="sweep"] .hd-panel::after {
    animation: hd-logsweep 4.4s cubic-bezier(.4,0,.6,1) infinite;
  }
}
@keyframes hd-logsweep { 0% { top: -64px } 100% { top: 100% } }

/* b. loop — rows fade up in sequence, over and over */
@media (prefers-reduced-motion: no-preference) {
  .hero-dark[data-log="loop"] .hd-line {
    animation: hd-rowloop 6.4s ease-in-out infinite;
  }
  .hero-dark[data-log="loop"] .hd-line:nth-of-type(1) { animation-delay: .0s }
  .hero-dark[data-log="loop"] .hd-line:nth-of-type(2) { animation-delay: .28s }
  .hero-dark[data-log="loop"] .hd-line:nth-of-type(3) { animation-delay: .56s }
  .hero-dark[data-log="loop"] .hd-line:nth-of-type(4) { animation-delay: .84s }
}
@keyframes hd-rowloop {
  0%   { opacity: 0; transform: translateY(6px) }
  10%  { opacity: 1; transform: none }
  84%  { opacity: 1; transform: none }
  96%  { opacity: 0; transform: translateY(-4px) }
  100% { opacity: 0; transform: translateY(6px) }
}

/* c + d. cycle and clock are driven from hero-dark.js — a row is inserted
   at the top and the oldest is removed, so the panel behaves like a queue
   clearing rather than a decoration. */
.hd-line.arriving { animation: hd-arrive .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes hd-arrive {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.hd-line.leaving { animation: hd-leave .4s ease both; }
@keyframes hd-leave { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .hd-line.arriving, .hd-line.leaving { animation: none; }
}

/* ================================================ 9. MOTION — the card */
.hd-card { overflow: hidden; will-change: transform; }

/* a. float — the card and the log drift at different rates, so the stack
      separates in depth instead of moving as one slab */
@media (prefers-reduced-motion: no-preference) {
  .hero-dark[data-card-motion="float"] .hd-card,
  .hero-dark[data-card-motion="both"] .hd-card {
    animation: hd-floatA 11s ease-in-out infinite;
  }
  .hero-dark[data-card-motion="float"] .hd-panel,
  .hero-dark[data-card-motion="both"] .hd-panel {
    animation: hd-floatB 13s ease-in-out infinite;
  }
  .hero-dark[data-card-motion="float"] .hd-tile,
  .hero-dark[data-card-motion="both"] .hd-tile {
    animation: hd-floatC 15s ease-in-out infinite;
  }
}
@keyframes hd-floatA {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg) }
  50%     { transform: translate3d(0,-11px,0) rotate(-.45deg) }
}
@keyframes hd-floatB {
  0%,100% { transform: translate3d(0,0,0) }
  50%     { transform: translate3d(0,-6px,0) }
}
@keyframes hd-floatC {
  0%,100% { transform: translate3d(0,0,0) }
  50%     { transform: translate3d(0,-4px,0) }
}

/* b. sweep — a band of light crosses the glass */
.hero-dark[data-card-motion="sweep"] .hd-card::after,
.hero-dark[data-card-motion="both"] .hd-card::after {
  content: ''; position: absolute; top: -60%; left: -70%;
  width: 45%; height: 220%; pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent,
              rgba(255,255,255,.16) 42%, rgba(111,231,214,.10) 58%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-dark[data-card-motion="sweep"] .hd-card::after,
  .hero-dark[data-card-motion="both"] .hd-card::after {
    animation: hd-shine 6.5s cubic-bezier(.35,0,.35,1) infinite;
  }
}
@keyframes hd-shine {
  0%       { left: -70% }
  55%,100% { left: 150% }
}

/* c. tilt — driven from JS, which sets the two custom properties */
.hero-dark[data-card-motion="tilt"] .hd-art { perspective: 1100px; }
.hero-dark[data-card-motion="tilt"] .hd-card,
.hero-dark[data-card-motion="tilt"] .hd-panel,
.hero-dark[data-card-motion="tilt"] .hd-tile {
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg))
             translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
  transform-style: preserve-3d;
}
.hero-dark[data-card-motion="tilt"] .hd-card  { --depth: 1 }
.hero-dark[data-card-motion="tilt"] .hd-panel { --depth: .55 }
.hero-dark[data-card-motion="tilt"] .hd-tile  { --depth: .3 }

/* --------------------------------------------------------------------------
   10. STAGE HEIGHT
   The log panel renders ~338px with its header and four rows. The card is
   213px at ID-1 and 336 wide. Stacked with a clear gap, the stage needs 600
   — measured, not guessed, because the two must not touch: the whole point
   of separating them is that the log stays fully readable.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .hd-art { min-height: 600px; }
}
@media (max-width: 999px) {
  .hd-art { min-height: 560px; }
  .hd-panel { top: 0; right: 0; width: min(100%, 336px); }
  .hd-card { top: auto; bottom: 0; right: 0; width: min(100%, 336px); }
  .hd-tile { left: 0; bottom: 0; }
}
@media (max-width: 460px) {
  .hd-art { min-height: 530px; }
  .hd-panel { width: 100%; }
  .hd-card { width: 100%; }
  .hd-tile { width: 132px; height: 132px; z-index: 6; left: 0; bottom: -18px; }
  .hd-tile .platen { width: 62px; height: 62px; }
  .hd-tile .cap { font-size: 8px; bottom: 11px; }
}

/* --------------------------------------------------------------------------
   11. THE PANEL DOES NOT RESIZE
   With the queue running, a fifth row exists for the ~400ms between the new
   one arriving and the old one leaving. Left to size itself, the panel grew
   and shrank on every cycle and shoved the card down with it.

   Fixed height = padding 18 + header 35 + four rows at 67 + padding 16 = 337.
   overflow:hidden then does the clipping, which is also what makes the
   bottom row look like it is falling out of the queue.
   -------------------------------------------------------------------------- */
.hd-panel { height: 337px; }
@media (max-width: 460px) { .hd-panel { height: 337px; } }

/* narrow: the stack needs the full 337 + gap + 213 + tile clearance */
@media (max-width: 999px) {
  .hd-art { min-height: 640px; }
}
@media (max-width: 460px) {
  .hd-art { min-height: 620px; }
  .hd-tile { bottom: 0; left: 0; z-index: 6; }
  .hd-card { bottom: 0; right: 0; width: calc(100% - 44px); }
}

/* --------------------------------------------------------------------------
   12. TOKENS AVAILABLE OUTSIDE THE HERO
   The floating navigation is a sibling of .hero-dark, not a descendant, so
   var(--aqua-lit) resolved to nothing there and the Request-a-demo button
   lost its fill entirely. These live at the root so the nav can reach them;
   .hero-dark still redeclares them, and [data-glow] still overrides --glow
   per hero, so nothing about the variant switching changes.
   -------------------------------------------------------------------------- */
:root {
  --chamber:   #04100E;
  --chamber-2: #08201C;
  --glow:      #E9A23B;
  --glow-soft: #F3C77E;
  --aqua:      #2FB6A8;
  --aqua-lit:  #6FE7D6;
  --panel:     rgba(255, 255, 255, 0.045);
  --panel-hi:  rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   13. 404
   Same chamber, shorter. The refusal chip does the explaining.
   ========================================================================== */
.hd-404 { min-height: auto; display: block; }
.hd-404 .hd-in { padding-top: 150px; padding-bottom: 96px; }
.hd-404 .hd-copy h1 { font-size: clamp(34px, 4.6vw, 58px); max-width: 14ch; margin-top: 20px; }
.hd-404-chip { border-radius: 999px; padding: 6px 14px; }
.hd-404 .chip-refused { color: #F08279; }
.hd-404 .chip-refused .dot { box-shadow: 0 0 9px 1px currentColor; }
.hd-404-req {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 30px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  background: rgba(255,255,255,.035); padding: 11px 16px;
  font-family: var(--mono); font-size: 13px; max-width: 100%;
}
.hd-404-req .k {
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #6E9089;
  flex: 0 0 auto;
}
.hd-404-req .v {
  color: #EAF6F3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-404-art { min-height: 380px; }
.hd-404-art .hd-panel { top: 24px; }
@media (max-width: 999px) { .hd-404-art { display: none; } }
/* pills never wrap — a two-line label pushes the disc out of round */
.pill { white-space: nowrap; }

/* ==========================================================================
   14. MEGA-MENU ON THE DARK SKIN
   The panel exists on every page. Over the transparent hero bar it has to
   read as part of the chamber; once the bar pins it reverts to the light
   panel the other pages use. Same markup, both states.
   ========================================================================== */
.site-top.over .mega {
  background: rgba(6, 20, 18, .96);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.9);
}
.site-top.over .mm-say { border-right-color: rgba(255,255,255,.12); }
.site-top.over .mm-say h4 { color: #FFFFFF; }
.site-top.over .mm-say p { color: #9FBDB6; }
.site-top.over .mm-cta { color: var(--aqua-lit); border-bottom-color: rgba(111,231,214,.4); }
.site-top.over .mm-cta:hover { border-bottom-color: var(--aqua-lit); }
.site-top.over .mm-alt { color: #7FA39C; }
.site-top.over .mm-alt:hover { color: var(--aqua-lit); }
.site-top.over .mm-fig img { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.site-top.over .mm-fig figcaption { color: #7FA39C; }
.site-top.over .mm-item:hover { background: rgba(255,255,255,.055); }
.site-top.over .mm-icon { color: var(--aqua-lit); }
.site-top.over .mm-item:hover .mm-icon { color: #FFFFFF; }
.site-top.over .mm-text b { color: #EAF6F3; }
.site-top.over .mm-text span { color: #7FA39C; }
.site-top.over .mm-item:hover .mm-text b { color: var(--aqua-lit); }
.site-top.over .has-menu[data-open="true"] > button { color: var(--aqua-lit); }

/* pinned state reverts to the light panel */
.site-top.over.pinned .mega { background: var(--paper); backdrop-filter: none;
  -webkit-backdrop-filter: none; border-bottom-color: var(--rule); }
.site-top.over.pinned .mm-say { border-right-color: var(--rule); }
.site-top.over.pinned .mm-say h4 { color: var(--navy); }
.site-top.over.pinned .mm-say p,
.site-top.over.pinned .mm-alt,
.site-top.over.pinned .mm-text span,
.site-top.over.pinned .mm-fig figcaption { color: var(--slate); }
.site-top.over.pinned .mm-cta { color: var(--green); }
.site-top.over.pinned .mm-icon { color: var(--deep-teal); }
.site-top.over.pinned .mm-text b { color: var(--navy); }
.site-top.over.pinned .mm-item:hover { background: var(--mist); }
.site-top.over.pinned .mm-fig img { border-color: var(--rule); background: var(--mist); }
.site-top.over.pinned .has-menu[data-open="true"] > button { color: var(--green); }

/* the hero must not sit above an open panel */
.hero-dark { z-index: 0; }