/* ============================================================
   ASCO — the whole site on one page.
   Inherits shared/system.css. Adds: the launch loader, the hero
   stage, the agent desk, the voice session and booking.
   ============================================================ */

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; place-items: center;
  transition: transform 0.9s cubic-bezier(0.8, 0, 0.2, 1);
}
body.loaded .loader { transform: translateY(-101%); }
.mark { overflow: visible; }
.mark-big { width: 104px; }
.mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.mark-big path { stroke-width: 4.5; }
.loader-tag {
  position: absolute; left: 50%; top: calc(50% + 88px); transform: translateX(-50%);
  font: 400 12.5px/1 var(--mono); letter-spacing: 0.34em; color: var(--ghost); white-space: nowrap;
}
.loader-pct {
  position: absolute; right: 34px; bottom: 24px;
  font: 400 clamp(42px, 6vw, 80px)/1 var(--mono); color: rgba(242, 241, 238, 0.85);
}

/* ---------- bar ---------- */
.bar { justify-content: flex-start; gap: 0; }
.wordmark { text-decoration: none; }
.wordmark sup { font-size: 10.5px; opacity: 0.65; }
.nav { display: flex; gap: 26px; margin: 0 auto; }
.nav a {
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.18em; color: var(--muted);
  text-decoration: none; transition: color 0.18s;
}
.nav a:hover { color: var(--ink); }
.pill {
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 10px 18px;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--ink);
  text-decoration: none; background: rgba(10, 12, 15, 0.5);
}
.pill:hover { border-color: rgba(111, 163, 255, 0.7); }

/* ---------- socials: a signal network that drops our channels ---------- */
.soc { position: relative; margin-left: 10px; }
.soc-btn {
  width: 37px; height: 37px; border-radius: 999px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 12, 15, 0.5);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.18s;
}
.soc-btn:hover, .soc.open .soc-btn { border-color: rgba(111, 163, 255, 0.7); }
.soc-btn svg { width: 15px; height: 15px; overflow: visible; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.soc.open .soc-btn svg { transform: rotate(180deg); }
.sl { stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; fill: none; }
.sn { fill: #8e9ab0; }
/* the pulse travels node to node around the network */
.soc-btn .n1 { animation: socpulse 2.7s ease-in-out infinite; }
.soc-btn .n2 { animation: socpulse 2.7s ease-in-out infinite 0.9s; }
.soc-btn .n3 { animation: socpulse 2.7s ease-in-out infinite 1.8s; }
@keyframes socpulse {
  0%, 100% { fill: #8e9ab0; }
  11% { fill: #6fa3ff; }
  30% { fill: #8e9ab0; }
}
.soc-menu {
  position: absolute; right: 0; top: calc(100% + 12px); min-width: 170px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8, 10, 14, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 8px; display: grid; gap: 2px;
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.28s;
}
.soc.open .soc-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.soc-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 11px 12px; border-radius: 9px; text-decoration: none;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.18em; color: var(--muted);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.18s, background 0.18s;
}
.soc.open .soc-menu a { opacity: 1; transform: none; }
.soc.open .soc-menu a:nth-child(1) { transition-delay: 0.07s; }
.soc.open .soc-menu a:nth-child(2) { transition-delay: 0.14s; }
.soc-menu a:hover { color: var(--ink); background: rgba(111, 163, 255, 0.08); }
.soc-menu a i { font-style: normal; color: var(--bright); }

/* ---------- mobile: hamburger + dropdown nav ---------- */
.menu-btn { display: none; }
@media (max-width: 760px) {
  .bar { justify-content: flex-start; }
  .pill { margin-left: auto; }
  .nav { display: none; }
  .menu-btn {
    display: grid; gap: 4px; place-content: center;
    width: 38px; height: 38px; border-radius: 999px; padding: 0; margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 12, 15, 0.5);
    cursor: pointer;
  }
  .menu-btn i { display: block; width: 15px; height: 1.5px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; }
  .menu-btn.open i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-btn.open i:nth-child(2) { opacity: 0; }
  .menu-btn.open i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .bar.menu-open .nav {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; margin: 0;
    background: rgba(8, 10, 14, 0.96); border: 1px solid var(--line); border-radius: 14px;
    padding: 8px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .bar.menu-open .nav a { padding: 14px; border-radius: 9px; font-size: 13px; }
  .bar.menu-open .nav a:active { background: rgba(111, 163, 255, 0.1); color: var(--ink); }

  /* the agent desk stacks — face above, conversation below */
  .agentgrid { grid-template-columns: 1fr; gap: 26px; padding: 60px var(--pad); }
  .obj3d { width: min(62vw, 270px); margin: 0 auto; }
  .face { justify-items: center; }
}

/* long-press should feed the animations, never select the page */
@media (pointer: coarse) {
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
}

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; overflow: hidden; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease 0.15s; }
body.in #scene { opacity: 1; }
.hero-copy {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 10; width: max-content; max-width: 94vw; text-align: center;
  /* the copy floats over the hold-to-blast zone — clicks pass through,
     only the CTA is interactive */
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
/* the hero speaks in the same voice as every section heading (.h1):
   Schibsted 700, tight tracking, ghost accent on the em word */
.hero-h {
  font: 700 clamp(36px, 5.4vw, 88px)/1.06 var(--display);
  /* cap by viewport too: neither line may wrap, or the single-row
     line masks would clip the second row */
  font-size: min(clamp(36px, 5.4vw, 88px), 10.6vw);
  letter-spacing: -0.02em; color: var(--ink);
}
.hero-h em { font-style: normal; }
.hero-h .gw { color: var(--ghost); }
.lmask { display: block; overflow: hidden; }
.line { display: block; }
/* words rise one by one through the line mask — the site's reveal,
   staggered per word via --wi set by one.js */
.line span {
  display: inline-block; transform: translateY(118%);
  transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.22, 1);
  transition-delay: calc(var(--wi, 0) * 70ms);
}
body.in .line span { transform: none; }
/* an underlined arrow-link in the site's voice — used for EXPLORE → */
.morelink {
  display: inline-block; margin-top: 24px; text-decoration: none;
  font: 500 13px/1 var(--mono); letter-spacing: 0.18em; color: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding: 4px 2px 8px;
  transition: border-color 0.18s;
}
.morelink:hover { border-color: var(--bright); }
.morelink i { font-style: normal; color: var(--bright); }

.hint {
  position: absolute; bottom: calc(var(--cred-h) + 22px); z-index: 10; pointer-events: none;
  font: 400 12px/1.8 var(--mono); letter-spacing: 0.16em; color: var(--ghost);
  opacity: 0; transition: opacity 0.8s ease 1.1s;
}
body.in .hint { opacity: 0.85; }
.hint-c { left: 50%; transform: translateX(-50%); text-align: center; }
.hint-r { right: var(--pad); text-align: right; }
@media (max-width: 760px) { .hint-c { display: none; } }

/* ---------- the film, beside the heading it belongs to ----------
   .h1 is scaled for a full-width measure; in a half-width column it
   breaks to four lines and strands the last word. Smaller step + balance
   holds it to two, so the heading and the film read as one unit. */
.hud-copy .h1 { font-size: clamp(28px, 3.4vw, 52px); max-width: none; text-wrap: balance; }
.hud-copy .lede { max-width: 46ch; }
@media (max-width: 900px) { .hud-copy .h1 { font-size: clamp(30px, 4.4vw, 62px); } }

/* ---------- the hero floor: who built this, before a single scroll ----------
   Absolute, so it rides the hero's own 100vh instead of pushing the
   composition down. The rail declares its height as a token and .hint
   lifts by exactly that — change one number, nothing collides. */
.hero { --cred-h: 100px; }
.cred {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  min-height: var(--cred-h);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px clamp(22px, 4vw, 56px);
  padding: 18px var(--pad);
  border-top: 1px solid var(--line);
  background: linear-gradient(to top, rgba(4, 5, 7, 0.78), rgba(4, 5, 7, 0));
  opacity: 0; transition: opacity 0.9s ease 1.35s;
  /* the hero underneath stays hold-to-blast; this rail never eats a press */
  pointer-events: none;
}
body.in .cred { opacity: 1; }
.cred-t {
  margin: 0; max-width: 30em; text-align: right; text-wrap: balance;
  font: 400 13px/1.7 var(--mono); letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted);
}
.cred-logos {
  display: flex; align-items: center; gap: clamp(20px, 3.2vw, 44px);
  margin: 0; padding: 0; list-style: none;
}
.cred-logos li + li { padding-left: clamp(20px, 3.2vw, 44px); border-left: 1px solid var(--line); }
/* optically matched, not box-matched — the two stacked wordmarks need more
   height than the single-line one to read at the same apparent size */
.cred-logos img { display: block; width: auto; opacity: 0.82; }
.l-palantir { height: clamp(18px, 1.95vw, 27px); }
.l-goldman { height: clamp(25px, 2.75vw, 38px); }
.l-jpmorgan { height: clamp(23px, 2.55vw, 35px); }

@media (max-width: 900px) {
  .hero { --cred-h: 132px; }
  .cred { flex-direction: column; justify-content: center; gap: 13px; }
  .cred-t { text-align: center; max-width: 40ch; font-size: 11.5px; }
}
@media (max-width: 480px) {
  /* three wordmarks plus two rules have to clear --pad on a 390px phone;
     the clamp floors above are what keep this from touching the edges */
  .cred-logos { gap: 12px; }
  .cred-logos li + li { padding-left: 12px; }
}

/* ---------- the agent desk ---------- */
.agentarea { position: relative; z-index: 1; border-top: 1px solid var(--line); background: rgba(4, 5, 7, 0.6); }
.agentgrid {
  display: grid; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: clamp(70px, 11vh, 130px) var(--pad);
}
.face { display: grid; justify-items: center; gap: 18px; margin: 0; }
.obj3d { position: relative; width: min(32vw, 40vh); aspect-ratio: 1; }
.instrument { width: 100%; height: 100%; display: block; }
.head3d {
  position: absolute; inset: 7%; width: 86%; height: 86%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 66%);
}
.tick { stroke: #cfd3d8; stroke-width: 1.1; opacity: 0; transition: opacity 0.35s ease; }
body.b1 .tick { opacity: 0.3; }
body.b1 .tick.major { opacity: 0.8; }
.arc {
  fill: none; stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(11, 95, 255, 0.35));
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
body.b1 .arc { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.inner-dash {
  fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 2 7;
  opacity: 0; transition: opacity 0.7s ease;
}
body.b2 .inner-dash { opacity: 1; }
.seed {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px rgba(11, 95, 255, 0.95);
  opacity: 0; transition: opacity 0.45s ease;
}
body.b0 .seed { opacity: 1; animation: seedpulse 2.2s ease-in-out infinite; }
body.b2 .seed { opacity: 0; animation: none; }
@keyframes seedpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
figcaption { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cap-name { font: 500 13px/1 var(--mono); letter-spacing: 0.28em; color: var(--muted); }
.cap-role { font: 400 12px/1 var(--mono); letter-spacing: 0.22em; color: var(--bright); }

.talk { display: grid; gap: 18px; }
.agent-h { max-width: 16ch; }
.log {
  max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 15px;
  padding-right: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
  overscroll-behavior: contain;   /* a finger on the transcript must not trap the page scroll */
}
.log::-webkit-scrollbar { width: 6px; }
.log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.msg { max-width: 62ch; font: 400 15px/1.65 var(--mono); }
.msg .who { display: block; font-size: 12px; letter-spacing: 0.24em; margin-bottom: 7px; color: var(--ghost); }
.msg.agent .who { color: var(--bright); }
.msg.agent { color: var(--ink); }
.msg.you { color: var(--muted); align-self: flex-end; text-align: right; }
.msg.sys { font-size: 13.5px; letter-spacing: 0.06em; color: var(--ghost); }
.typing span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--bright); margin-right: 4px; animation: blink 1.1s infinite; }
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.composer { display: flex; gap: 10px; }
.composer input {
  flex: 1; background: rgba(255, 255, 255, 0.035); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 15px 18px;
  font: 400 15px/1 var(--mono); outline: none; transition: border-color 0.18s;
}
.composer input:focus { border-color: rgba(111, 163, 255, 0.6); }
.composer input::placeholder { color: var(--ghost); }
.composer button {
  width: 50px; height: 50px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--signal); color: #fff; font: 500 18px/1 var(--mono);
}
.composer button:disabled { opacity: 0.35; cursor: default; }

.agent-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.voice-cta { padding: 13px 22px; }

/* ---------- one CTA, two ways through ----------
   Same mechanics as the header's socials dropdown, so it behaves the way the
   rest of the site already does: click to open, click-away or Escape to close. */
.pick { position: relative; }
.pick-menu {
  position: absolute; left: 0; top: calc(100% + 10px); min-width: 264px; z-index: 20;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(8, 10, 14, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 8px; display: grid; gap: 2px;
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.28s;
}
.pick.open .pick-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
/* flips above the trigger when the viewport floor is close, so the choice
   is never half off-screen — the action row sits low in its column */
.pick.up .pick-menu { top: auto; bottom: calc(100% + 10px); transform: translateY(8px); }
.pick.up.open .pick-menu { transform: none; }
.pick-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--muted);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.18s, background 0.18s;
}
.pick.open .pick-menu button { opacity: 1; transform: none; }
.pick.open .pick-menu button:nth-child(1) { transition-delay: 0.07s; }
.pick.open .pick-menu button:nth-child(2) { transition-delay: 0.14s; }
.pick-menu button:hover, .pick-menu button:focus-visible { color: var(--ink); background: rgba(111, 163, 255, 0.08); }
.pick-menu button:focus-visible { outline: 2px solid var(--bright); outline-offset: -2px; }
.pick-menu button i { font-style: normal; color: var(--bright); margin-left: auto; }
.pick-menu .mic { flex: none; color: var(--bright); }
/* the menu is the width of the trigger on a phone, not a floating slab */
@media (max-width: 560px) { .pick { flex: 1 1 100%; } .pick-menu { min-width: 0; left: 0; right: 0; } }
.mic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.voice-cta .mic { color: var(--bright); }
.linky {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 12.5px/1 var(--mono); letter-spacing: 0.16em; color: var(--bright);
  border-bottom: 1px solid rgba(111, 163, 255, 0.45);
}
figcaption .status { margin-left: 0; margin-bottom: 2px; }
.status { display: flex; align-items: center; gap: 8px; margin-left: auto; font: 400 12px/1 var(--mono); letter-spacing: 0.18em; color: var(--muted); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ghost); transition: background 0.3s, box-shadow 0.3s; }
.status.live i { background: #4fd18b; box-shadow: 0 0 9px rgba(79, 209, 139, 0.8); }
.status.offline i { background: #ff6a5e; box-shadow: 0 0 9px rgba(255, 106, 94, 0.7); }
@media (max-width: 900px) { .agentgrid { grid-template-columns: 1fr; } .obj3d { width: min(70vw, 40vh); } }

/* ---------- footer ---------- */
.foot {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 30px var(--pad) 60px; border-top: 1px solid var(--line);
  font: 400 12.5px/1.8 var(--mono); letter-spacing: 0.12em; color: var(--ghost);
}
.foot a { color: var(--muted); }

/* ---------- voice session ---------- */
.voice { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.voice[hidden] { display: none; }
.voice-scrim { position: absolute; inset: 0; background: rgba(3, 4, 6, 0.88); backdrop-filter: blur(6px); }
.voice-panel {
  position: relative; width: min(94vw, 920px); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #0a0d12; border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 30px 22px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.75);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.voice.cal-open .voice-panel { width: min(96vw, 1260px); }
.voice-x {
  position: absolute; top: 14px; right: 16px; background: none; border: 0; cursor: pointer;
  color: var(--ghost); font-size: 22px; line-height: 1; z-index: 2;
}
/* agent top-left · conversation beside it · calendar joins on the right */
.voice-stage { display: flex; align-items: stretch; gap: 26px; flex: 1; min-height: 0; }
.voice-stage[hidden] { display: none; }
.vside { flex: 0 0 216px; display: grid; justify-items: start; align-content: start; gap: 12px; text-align: left; }
.vchat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 340px; }

/* thinking: the ring loops its own launch — the arcs draw in,
   dissolve, and draw again, exactly like open and close */
.voice.thinking .vring .arc {
  transition: none;
  animation: arcloop 1.5s cubic-bezier(0.5, 0, 0.35, 1) infinite alternate;
}
.voice.thinking .vring .inner-dash { animation: dashloop 1.5s ease-in-out infinite alternate; }
@keyframes arcloop { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dashloop { from { opacity: 0.12; } to { opacity: 1; } }

/* the intake gate */
.vgate {
  display: grid; gap: 2px; justify-items: start; align-content: center;
  width: min(100%, 400px); margin: 24px auto; min-height: 330px;
}
.vgate[hidden] { display: none; }
.vgate h3 { font: 600 clamp(19px, 2vw, 24px)/1.25 var(--display); color: var(--ink); margin: 8px 0 6px; }
.vg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; width: 100%; }
.vgate label {
  width: 100%; display: block; margin-top: 12px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.22em; color: var(--ghost);
}
.vgate input {
  width: 100%; margin-top: 6px;
  background: rgba(255, 255, 255, 0.04); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px;
  font: 400 14.5px/1.4 var(--mono); outline: none;
}
.vgate input:focus { border-color: rgba(111, 163, 255, 0.6); }
.vgate .solid { margin-top: 18px; }
.vg-msg { font: 400 12px/1.5 var(--mono); color: #ffb35e; min-height: 14px; margin-top: 9px; }
.voice.muted .mic-btn { background: #343a45; box-shadow: none; }
.voice.muted .mic-btn .mic { opacity: 0.55; }

/* the orb: rings that pulse while the mic is open */
.orb { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.orb::after {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 20px rgba(11, 95, 255, 0.9);
}
.orb i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(111, 163, 255, 0.4); opacity: 0;
}
.voice.listening .orb i { animation: orbping 2.1s ease-out infinite; }
.voice.listening .orb i:nth-child(2) { animation-delay: 0.7s; }
.voice.listening .orb i:nth-child(3) { animation-delay: 1.4s; }
@keyframes orbping {
  0% { transform: scale(0.25); opacity: 0.85; }
  100% { transform: scale(1); opacity: 0; }
}
.voice.speaking .orb::after { animation: talkpulse 0.5s ease-in-out infinite alternate; }
@keyframes talkpulse { to { transform: scale(1.7); } }

.voice-state { font: 500 12px/1 var(--mono); letter-spacing: 0.28em; color: var(--bright); }
.voice-title { font: 600 clamp(18px, 2vw, 24px)/1.25 var(--display); color: var(--ink); }
.voice-help { font: 400 13.5px/1.65 var(--mono); color: var(--muted); max-width: 42ch; }

.tscript {
  width: 100%; flex: 1 1 auto; min-height: 150px; overflow-y: auto; text-align: left;
  display: flex; flex-direction: column; gap: 13px;
  padding: 16px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  overscroll-behavior: contain;
}
.tscript:empty::before {
  content: "TRANSCRIPT APPEARS HERE";
  font: 400 12px/1 var(--mono); letter-spacing: 0.2em; color: var(--ghost);
  margin: auto;
}
.tline { font: 400 14.5px/1.6 var(--mono); }
.tline b { display: block; font-size: 11.5px; letter-spacing: 0.22em; color: var(--ghost); margin-bottom: 5px; font-weight: 400; }
.tline.you { color: var(--muted); }
.tline.agent { color: var(--ink); }
.tline.agent b { color: var(--bright); }

/* He is composing. Three dots on the agent's own line, in the place his
   reply is about to occupy, so the wait reads as him thinking rather than
   as the window having stopped. Mounted only past a delay (TYPING_AFTER in
   agentwin.js) — on a fast turn it never appears at all. */
.tline.typing .dots { display: inline-flex; gap: 5px; align-items: center; height: 16px; }
.tline.typing .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--bright);
  opacity: 0.28; animation: agentdot 1.25s ease-in-out infinite;
}
.tline.typing .dots i:nth-child(2) { animation-delay: 0.18s; }
.tline.typing .dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes agentdot {
  0%, 70%, 100% { opacity: 0.28; transform: translateY(0); }
  35%           { opacity: 1;    transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .tline.typing .dots i { animation: none; opacity: 0.6; }
}

.interim { font: 400 14px/1.5 var(--mono); color: var(--ghost); min-height: 18px; font-style: italic; }

.voice-controls { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.mic-btn {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: var(--signal); border: 0; color: #fff;
  display: grid; place-items: center; transition: transform 0.18s, background 0.2s;
}
.mic-btn .mic { width: 21px; height: 21px; stroke-width: 1.6; }
.mic-btn:hover { transform: scale(1.06); }
.voice.listening .mic-btn { background: #ff3b30; box-shadow: 0 0 0 6px rgba(255, 59, 48, 0.14); }
.mic-btn:disabled { opacity: 0.4; cursor: default; }
.ghost, .solid {
  border-radius: 999px; padding: 12px 22px; cursor: pointer;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.16em;
}
.ghost { background: none; border: 1px solid var(--line); color: var(--muted); }
.solid { background: var(--signal); border: 0; color: #fff; }
.solid:disabled { opacity: 0.4; cursor: default; }
.voice-note { font: 400 12.5px/1.6 var(--mono); letter-spacing: 0.06em; color: var(--ghost); min-height: 16px; }
.voice-note.warn { color: #ffb35e; }

/* ---------- session summary: what the call covered, kept ---------- */
.vsum {
  border: 1px solid rgba(111, 163, 255, 0.35); border-radius: 10px;
  padding: 13px 16px; background: rgba(11, 95, 255, 0.06);
}
.vsum[hidden] { display: none; }
.vsum-t { font: 500 11.5px/1 var(--mono); letter-spacing: 0.24em; color: var(--bright); margin-bottom: 9px; }
.vsum-b { font: 400 13.5px/1.65 var(--mono); color: var(--ink); display: grid; gap: 6px; }
.vsum-b p { padding-left: 15px; position: relative; }
.vsum-b p::before { content: "—"; position: absolute; left: 0; color: var(--bright); }
.voice.ended .vcomposer, .voice.ended .interim { display: none !important; }

/* ---------- rating: one slim bar at the bottom, nothing scrolls ---------- */
.rate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px;
}
.rate[hidden] { display: none; }
.rate-sub { font: 400 12px/1.5 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.rate-sub span { color: var(--bright); }
.stars { display: flex; gap: 5px; }
.stars button {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  color: var(--muted); font: 500 12.5px/1 var(--mono);
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
}
.stars button:hover { transform: translateY(-1px); border-color: rgba(111, 163, 255, 0.6); }
.stars button.on { background: rgba(11, 95, 255, 0.18); border-color: var(--bright); color: var(--ink); }
#rate-note {
  flex: 1 1 150px; min-width: 130px; background: rgba(255, 255, 255, 0.04); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px;
  font: 400 12px/1.4 var(--mono); outline: none;
}
#rate-note::placeholder { color: var(--ghost); }
.rate .ghost, .rate .solid { padding: 9px 14px; font-size: 11.5px; }
.rate-msg { font: 400 11.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--bright); min-height: 10px; }
.rate-msg.bad { color: #ff6a5e; }

/* ---------- the booking calendar panel ---------- */
.vcal {
  flex: 0 0 auto; width: 0; opacity: 0; overflow: hidden; margin-left: 0;
  border-left: 1px solid transparent; padding-left: 0;
  transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease 0.12s,
              margin-left 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), padding-left 0.55s;
}
.vcal[hidden] { display: none; }
.vcal.in { width: 312px; opacity: 1; border-left-color: var(--line); padding-left: 24px; }
.cal-eyebrow { font: 500 12px/1 var(--mono); letter-spacing: 0.24em; color: var(--bright); margin-bottom: 14px; white-space: nowrap; }
.cal-views { position: relative; width: 288px; }
.cal-views > div { transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cal-views > div.away {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  opacity: 0; transform: scale(1.05); pointer-events: none;
}
.cal-views > div.pre { opacity: 0; transform: scale(0.94); transition: none; }
.cal-views header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-title { font: 500 12.5px/1 var(--mono); letter-spacing: 0.2em; color: var(--ink); }
.cal-nav {
  width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font: 400 14.5px/1 var(--mono); display: grid; place-items: center;
  transition: border-color 0.18s, color 0.18s;
}
.cal-nav:hover:not(:disabled) { border-color: rgba(111, 163, 255, 0.6); color: var(--ink); }
.cal-nav:disabled { opacity: 0.25; cursor: default; }
.cal-month header { justify-content: space-between; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font: 400 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--ghost); margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid button, .cal-grid i {
  aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  color: var(--muted); font: 500 12.5px/1 var(--mono); cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.cal-grid i { background: none; border-color: transparent; }
.cal-grid button:disabled { opacity: 0.25; cursor: default; }
.cal-grid button:not(:disabled):hover { border-color: var(--bright); color: var(--ink); background: rgba(11, 95, 255, 0.1); }
.cal-grid button.today { border-color: rgba(111, 163, 255, 0.55); color: var(--bright); }
.cal-hint { margin-top: 12px; font: 400 12px/1.6 var(--mono); color: var(--ghost); }
.cal-slots { display: grid; gap: 6px; }
.cal-slots button {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  color: var(--ink); font: 400 12.5px/1 var(--mono);
  transition: border-color 0.18s, background 0.18s;
}
.cal-slots button b { font: 500 10.5px/1 var(--mono); letter-spacing: 0.18em; color: var(--bright); }
.cal-slots button:not(:disabled):hover { border-color: var(--bright); background: rgba(11, 95, 255, 0.1); }
.cal-slots button:disabled { opacity: 0.32; cursor: default; }
.cal-slots button:disabled b { color: var(--ghost); }
.cal-confirm label { display: block; font: 500 11px/1 var(--mono); letter-spacing: 0.22em; color: var(--ghost); margin: 12px 0 5px; }
.cal-confirm input {
  width: 100%; background: rgba(255, 255, 255, 0.04); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font: 400 13.5px/1.4 var(--mono); outline: none;
}
.cal-confirm input:focus { border-color: rgba(111, 163, 255, 0.6); }
.cal-note { margin-top: 10px; font: 400 12px/1.6 var(--mono); color: var(--ghost); }
.cal-send { width: 100%; margin-top: 12px; }
.cal-msg { margin-top: 8px; font: 400 12px/1.5 var(--mono); color: #ffb35e; min-height: 14px; }
.cal-done { text-align: center; padding: 34px 0; }
.cal-check {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  border: 1px solid var(--bright); color: var(--bright);
  display: grid; place-items: center; font: 400 20px/1 var(--mono);
  box-shadow: 0 0 24px rgba(11, 95, 255, 0.35);
}
.cal-done-t { font: 500 12.5px/1 var(--mono); letter-spacing: 0.24em; color: var(--ink); }
.cal-done-s { margin-top: 9px; font: 400 12px/1.7 var(--mono); color: var(--muted); }

@media (max-width: 940px) {
  .voice-stage { flex-direction: column; gap: 16px; }
  /* the agent header: face pinned left, state + help beside it,
     the controls on their own full-width row — nothing squeezes */
  .vside {
    flex: none; width: 100%;
    display: grid; grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas: "orb state" "orb help" "controls controls" "note note";
    column-gap: 16px; row-gap: 4px; align-items: center;
  }
  .vside .orb.has-face { grid-area: orb; width: 92px; height: 92px; }
  .voice-state { grid-area: state; align-self: end; }
  .voice-help { grid-area: help; align-self: start; max-width: none; }
  .voice-controls { grid-area: controls; margin-top: 10px; }
  .voice-note { grid-area: note; }
  .vchat { min-height: 220px; }
  .vcal.in { width: 100%; margin-left: 0; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .cal-views { width: 100%; }
  .voice-panel { max-height: 94vh; overflow-y: auto; }
}

/* phones: the window becomes a full sheet — the stage scrolls as one,
   the transcript keeps its own bounded scroll inside it */
@media (max-width: 640px) {
  .voice { place-items: stretch; }
  .voice-panel {
    width: 100%; max-height: none; height: 100dvh;
    border-radius: 0; border: 0;
    padding: 20px 18px calc(14px + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .voice.cal-open .voice-panel { width: 100%; }
  .voice-stage { overflow-y: auto; overscroll-behavior: contain; }
  .vchat { min-height: 0; }
  .tscript { max-height: 44dvh; }
  .voice.cal-open .tscript { max-height: 30dvh; }
  /* the gate and the rating bar are panel children OUTSIDE the stage —
     they need their own scroll or a short viewport (keyboard up) cuts them off */
  .vgate { min-height: 0; margin: 14px auto; overflow-y: auto; max-height: 100%; overscroll-behavior: contain; }
  .rate { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .vg-row { grid-template-columns: 1fr; }
}

/* ---------- booking ---------- */
.sheet { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(3, 4, 6, 0.85); backdrop-filter: blur(4px); }
.sheet-card {
  position: relative; width: min(92vw, 470px); background: #0a0d12;
  border: 1px solid var(--line); border-radius: 14px; padding: 30px;
  display: grid; gap: 13px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}
.sheet-card h3 { font: 600 19px/1.35 var(--display); color: var(--ink); margin-bottom: 4px; }
.sheet-card label { display: grid; gap: 7px; font: 400 12px/1 var(--mono); letter-spacing: 0.22em; color: var(--ghost); }
.sheet-card input, .sheet-card textarea {
  background: rgba(255, 255, 255, 0.04); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 14px; font: 400 14.5px/1.5 var(--mono); outline: none; resize: vertical;
}
.sheet-card input:focus, .sheet-card textarea:focus { border-color: rgba(111, 163, 255, 0.6); }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.sheet-msg { font: 400 13px/1 var(--mono); letter-spacing: 0.1em; color: var(--bright); min-height: 14px; }
.sheet-msg.bad { color: #ff6a5e; }

/* capture helper: ?flat=1 pins the hero so a full-page screenshot
   can show the sections below it (100vh would otherwise eat the frame) */
body.flat .hero { height: 900px; }

/* ════════════════════════════════════════════════════════════
   SCROLL MOTION (studied frame-by-frame from the reference film)
   ════════════════════════════════════════════════════════════ */

/* ---------- sheet slide-over: each middle area is a rounded panel
   that rides up OVER the one before it; the outgoing panel dims
   and settles back slightly, like paper sheets stacking. ---------- */
.shell { position: relative; }
.shell .panel {
  position: relative;
  background: #07090c;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -34px 70px rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  will-change: transform;
}
.shell .panel + .panel { margin-top: -34px; }   /* corners overlap the sheet below */
.panel .panel-dim {                              /* JS-driven exit veil */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #000; opacity: 0; pointer-events: none; z-index: 5;
}
.spine { z-index: 6; }                           /* ticks ride above the sheets */

/* ---------- line-mask rise on headings (statement entrances) ---------- */
.h1 .lm { display: block; overflow: hidden; }
.h1 .lm > span {
  display: block; transform: translateY(112%);
  transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.22, 1);
}
.h1.lines-in .lm > span { transform: none; }
.h1 .lm:nth-child(2) > span { transition-delay: 0.09s; }
.h1 .lm:nth-child(3) > span { transition-delay: 0.18s; }
/* once the mask handles entrance, the generic fade must not double up */
.h1.lines-ready { opacity: 1 !important; transform: none !important; }

/* ---------- scroll-scrub word fill on ledes + kickers ---------- */
.lede .sw, .kicker .sw { opacity: 0.22; transition: opacity 0.18s linear; }
.lede .sw.lit, .kicker .sw.lit { opacity: 1; }
.lede.scrub-ready, .kicker.scrub-ready { opacity: 1 !important; transform: none !important; }

/* ---------- per-character fill on product names ---------- */
.prod-name .cf { color: #343b45; transition: color 0.22s linear; }
.prod-name .cf.lit { color: var(--ink); }

/* ---------- odometer index rolls ---------- */
[data-roll] { display: inline-block; }
.odo { display: inline-flex; overflow: hidden; }
.odo .odo-d { display: inline-block; height: 1em; line-height: 1; }
.odo .odo-strip {
  display: block; transform: translateY(0);
  transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.odo .odo-strip span { display: block; height: 1em; line-height: 1; }

/* ---------- the pinned horizontal rail (numbered cards) ---------- */
.railwrap { position: relative; margin-top: 44px; }
.railpin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.railtrack {
  display: flex; gap: clamp(16px, 2vw, 28px);
  padding-left: 2px; will-change: transform;
}
.railcard {
  flex: 0 0 auto;
  width: min(420px, 78vw); height: min(58vh, 520px);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px;
  background: rgba(255, 255, 255, 0.015);
  padding: 34px 30px;
  display: flex; flex-direction: column;
}
.railcard .mi { font: 500 14.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--bright); }
.railcard h3 {
  font: 600 clamp(20px, 1.9vw, 27px)/1.25 var(--display); color: var(--ink);
  margin-top: 16px; max-width: 14ch;
}
.railcard p {
  margin-top: auto; font-size: 15px; line-height: 1.7; color: var(--body); max-width: 40ch;
}
.adr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.adr-row .loop { grid-column: 1 / -1; }
@media (max-width: 860px) { .adr-row { grid-template-columns: 1fr; } }

/* ---------- watermark band: hatched ASCO lit by a torch ---------- */
.wmband {
  position: relative; z-index: 1; height: clamp(220px, 34vh, 420px);
  background: #07090c; overflow: hidden;
  border-radius: 34px 34px 0 0; margin-top: -34px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 -34px 70px rgba(0, 0, 0, 0.55);
}
#wmcanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* flat-capture: pin the rail like the hero so stills show the cards */
body.flat .railpin { height: 900px; }
body.flat .railwrap { height: auto !important; }

/* ---------- voice window: the face relaunches small, top-centre ---------- */
.orb.has-face { width: 148px; height: 148px; }
.orb.has-face::after { display: none; }        /* the dot gives way to the face */
.voice-face {
  position: absolute; inset: 4%; width: 92%; height: 92%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 70%);
}
/* the desk face bows out while the window is open — canvas dissolves
   via its own active() state; the caption follows in CSS */
body.voice-live .agentgrid figcaption { opacity: 0; transition: opacity 0.6s ease; }
/* the window is about the chat: give the transcript the room */
.tscript { max-height: 42vh; min-height: 120px; }

/* ---------- the ring, around the window face too ----------
   Same instrument, scoped so it boots with the WINDOW, not the desk. */
.orb.has-face { width: 196px; height: 196px; }
.voice-face { inset: 17%; width: 66%; height: 66%; }
.vring { position: absolute; inset: 0; width: 100%; height: 100%; }
#voice .tick { opacity: 0; transition: opacity 0.35s ease; }
#voice.v1 .tick { opacity: 0.3; }
#voice.v1 .tick.major { opacity: 0.8; }
#voice .arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
#voice.v1 .arc { stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
#voice .inner-dash { opacity: 0; transition: opacity 0.7s ease; }
#voice.v2 .inner-dash { opacity: 1; }

/* ---------- the window's composer (text mode) ---------- */
.vcomposer { display: none; width: 100%; gap: 10px; }
.voice.mode-text .vcomposer { display: flex; }
.voice.mode-text .mic-btn, .voice.mode-text .interim { display: none; }
.vcomposer input {
  flex: 1; background: rgba(255, 255, 255, 0.035); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  font: 400 15px/1 var(--mono); outline: none; transition: border-color 0.18s;
}
.vcomposer input:focus { border-color: rgba(111, 163, 255, 0.6); }
.vcomposer input::placeholder { color: var(--ghost); }
.vcomposer button {
  width: 48px; height: 48px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--signal); color: #fff; font: 500 17px/1 var(--mono);
}
.vcomposer button:disabled { opacity: 0.35; cursor: default; }

/* ---------- the product drum: a vertical rolodex of cards ----------
   One card faces you; neighbours tilt away above and below like the
   faces of a cylinder. Scroll turns the drum; the label follows. */
.drumwrap { position: relative; margin-top: 6px; }
.drumpin {
  /* 88vh pin: the card box rides high enough to fit the page and
     appears sooner after the section title */
  position: sticky; top: 0; height: 88vh;
  display: grid; grid-template-columns: minmax(200px, 26%) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 50px); align-items: center;
  padding-bottom: 6vh;
}
.drum-label { align-self: center; }
.dl-i { display: block; font: 500 13px/1 var(--mono); letter-spacing: 0.2em; color: var(--bright); }
.dl-name {
  margin-top: 16px;
  font: 600 clamp(24px, 2.4vw, 36px)/1.1 var(--mono); letter-spacing: -0.01em; color: var(--ink);
}
.dl-sub { margin-top: 10px; font-size: 15px; color: var(--muted); }
.drum-label.swap { animation: dlswap 0.35s ease; }
@keyframes dlswap {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

.drumstage { perspective: 1500px; perspective-origin: 50% 50%; }
.drum {
  position: relative; margin: 0 auto;
  width: min(700px, 84vw); height: clamp(420px, 58vh, 580px);
  transform-style: preserve-3d;
}
.drum .prod {
  position: absolute; inset: 0;
  background: #0a0d12;              /* solid — cards must occlude each other */
  overflow: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
@media (max-width: 900px) {
  .drumpin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .drum { height: clamp(400px, 58vh, 560px); }
}
/* flat capture: unpin so a full-page still shows the stage */
body.flat .drumpin { height: 900px; }
body.flat .drumwrap { height: auto !important; }

/* ---------- the AI COO brain ---------- */
.brainviz {
  display: block; width: 100%;
  height: clamp(260px, 42vh, 400px); margin-top: 30px;
}

/* ---------- drum cards for the build steps ---------- */
.drum .drumcard {
  position: absolute; inset: 0;
  background: #0a0d12;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px;
  padding: 34px 30px;
  display: flex; flex-direction: column;
  overflow: hidden; backface-visibility: hidden;
  will-change: transform, opacity;
}
.drum .drumcard .mi { font: 500 14.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--bright); }
.drum .drumcard h3 {
  font: 600 clamp(22px, 2.2vw, 32px)/1.22 var(--display); color: var(--ink);
  margin-top: 16px; max-width: 16ch;
}
.drum .drumcard p {
  margin-top: auto; font-size: 15.5px; line-height: 1.72; color: var(--body); max-width: 46ch;
}
/* the fuller story under each step's animation */
.drum .drumcard p.more {
  margin-top: 9px; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 52ch;
}
/* the pixel stage: the card's middle belongs to the choreography */
.drum .drumcard .pixcard {
  flex: 1; min-height: 72px; align-self: center;
  width: min(340px, 72%); margin: 14px 0;
  display: block; pointer-events: none;
}
.dl-sub:empty { display: none; }

/* odometer digits clip inside their own column — no neighbour slivers */
.odo .odo-d { overflow: hidden; }