/* ============================================================
   Worx | home.css
   The home page only. A space-exploration narrative in ten parts,
   each section a numbered stage of the mission:
     00 hero (THE GRAND TOUR film)  01 partners   02 mission archive
     03 mission modules  04 why Worx  05 telemetry  06 flight plan
     07 transmissions  08 field notes  09 briefing  10 launch
   Shared language: a mono kicker with its stage number, big Jost
   headlines split into lines (home.js), the site gradient for accents,
   glass hairlines, and the header's long soft easing curve.
   ============================================================ */

.hm {
  --hm-ease: cubic-bezier(0.135, 0.9, 0.15, 1);
  --hm-line: rgba(254, 238, 207, 0.1);
  --hm-glass: rgba(254, 238, 207, 0.035);
  /* the content column, and the gutter either side of it. Where the
     comms column and the stage rail are shown (wide, fine pointers), the
     column steps in so neither ever sits over a headline or a card. */
  --hm-wrap: min(var(--container), 92vw);
  --hm-gut: calc((100vw - var(--hm-wrap)) / 2);
  overflow-x: clip;
}

@media (min-width: 1101px) and (hover: hover) {
  .hm { --hm-wrap: min(var(--container), 100vw - 184px); }
}

.hm .container { width: var(--hm-wrap); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- shared type ------------------------------------------------ */
.hm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the glowing amber dot that marks every section, card and module */
.hm-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(250, 167, 25, 0.15), 0 0 12px rgba(250, 167, 25, 0.7);
}

.hm-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(250, 167, 25, 0.5);
  animation: hm-dot-ping 2.4s ease-out infinite;
}

@keyframes hm-dot-ping {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(2.2); opacity: 0; }
}

.hm-kicker b {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(250, 167, 25, 0.35);
  border-radius: 999px;
  font-weight: 500;
  color: var(--accent-2);
  letter-spacing: 0.1em;
}

.hm-h2 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
}

.hm-h2--xl {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
}

/* lines revealed by home.js splitLines() */
.hm-split-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.hm-split-line > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s var(--hm-ease);
}

.is-inview .hm-split-line > span {
  transform: none;
}

.is-inview .hm-split-line:nth-child(2) > span { transition-delay: 0.08s; }
.is-inview .hm-split-line:nth-child(3) > span { transition-delay: 0.16s; }
.is-inview .hm-split-line:nth-child(4) > span { transition-delay: 0.24s; }

.hm-head {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.hm-head--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hm-head--center .hm-h2 {
  max-width: 20ch;
}

.hm-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}

.hm-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 400px;
}

.hm-head-aside p {
  font-size: 1rem;
  color: var(--muted);
}

/* ghost link with an arrow that slides (44px tall: a full tap target,
   though it reads as a line of text) */
.hm-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.hm-ghost span {
  background: linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--hm-ease);
}

.hm-ghost svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.8;
  transition: transform 0.4s var(--hm-ease);
}

.hm-ghost:hover span,
.hm-ghost:focus-visible span {
  background-size: 100% 1px;
}

.hm-ghost:hover svg,
.hm-ghost:focus-visible svg {
  transform: translateX(5px);
}

.btn-spark--lg {
  height: 54px;
  padding: 0 1.8em;
  font-size: 1.02rem;
}

/* the hero CTA with a face on it (after digitalgravity.ae): one of the
   crew, on his own orange backdrop, in a circle set flush into the
   button's end */
.btn-spark--face {
  gap: 16px;
  padding-right: 5px;
}

.btn-face {
  flex: none;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
}

.btn-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hm-ease);
}

.btn-spark--face:hover .btn-face img,
.btn-spark--face:focus-visible .btn-face img { transform: scale(1.08); }

.hm-round {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(254, 238, 207, 0.18);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--hm-ease);
}

.hm-round svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.hm-round { position: relative; }

.hm-round:hover,
.hm-round:focus-visible {
  border-color: transparent;
  color: var(--accent-2);
  transform: scale(1.06);
}

/* ================================================================
   00 · HERO
   A tall section with a sticky stage: the film fills the screen, and
   as you scroll (home.js sets --hx: 0..1) it gathers into a floating
   rounded window, the copy lifting away, the next section sliding in.
   ================================================================ */
.hx {
  position: relative;
  height: 185vh;
  height: 185svh;
}

.hx-stage {
  --hx: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* always full screen, edge to edge */
.hx-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050201;
}

.hx-gl,
.hx-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.06);
}

/* the film: shown over the generated one once it plays */
.hx-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  --rx: 0;
  --ry: 0;
  /* 3D: the film leans with the pointer (a window into real space,
     home.js --rx/--ry) */
  transform:
    perspective(1400px) rotateX(calc(var(--ry) * -2.2deg)) rotateY(calc(var(--rx) * 3deg))
    scale(1.06);
  will-change: transform;
}

.hx:not(.has-film) .hx-video { opacity: 0 !important; }
.hx.has-film .hx-gl { opacity: 0; transition: opacity 1.4s ease; }

/* film grain: one generated noise tile, stepped around */
.hx-grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.09;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  animation: hx-grain 0.8s steps(8) infinite;
}

@keyframes hx-grain {
  0% { transform: translate(0, 0); } 12% { transform: translate(-6%, 4%); } 25% { transform: translate(4%, -8%); }
  37% { transform: translate(-10%, -3%); } 50% { transform: translate(8%, 6%); } 62% { transform: translate(-3%, 10%); }
  75% { transform: translate(10%, -5%); } 87% { transform: translate(-7%, -9%); } 100% { transform: translate(0, 0); }
}

/* ---- THE TITLE CARD -------------------------------------------- */
/* Where the film comes to rest. The pen-point dies out, black, then
   WORX appears out of the dark (each letter streams out from the
   centre, --o = its offset in letter widths), a light sweeps it, and
   it holds: the headline and the actions return under it. home.js runs
   the states: .is-card (black), .is-born, .is-final. */
.hx-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2vmin;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.hx.is-card .hx-card { opacity: 1; }

.hx-card-word {
  position: relative;
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 21vw, 22rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.08em;
  padding-left: 0.08em;
}

.hx-card-word span {
  display: inline-block;
  /* the Worx gradient, laid across the whole word (each letter shows its
     own slice of it, so the word reads as one ember -> amber sweep) */
  background: linear-gradient(100deg, #c04527 0%, #e57d23 45%, #faa719 82%, #ffc86a 100%);
  background-size: 400% 100%;
  background-position: calc(var(--i, 0) * 33.333%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: drop-shadow(0 0 34px rgba(229, 125, 35, 0.45));
}

.hx-card-word span:nth-child(2) { --i: 1; }
.hx-card-word span:nth-child(3) { --i: 2; }
.hx-card-word span:nth-child(4) { --i: 3; }

.hx.is-born .hx-card-word span {
  animation: hx-born 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hx.is-born .hx-card-word span:nth-child(2) { animation-delay: 0.05s; }
.hx.is-born .hx-card-word span:nth-child(3) { animation-delay: 0.1s; }
.hx.is-born .hx-card-word span:nth-child(4) { animation-delay: 0.15s; }

@keyframes hx-born {
  0%   { opacity: 0; transform: translateX(calc(var(--o) * 1em)) scale(0.06); filter: blur(24px) brightness(3); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0) brightness(1) drop-shadow(0 0 34px rgba(229, 125, 35, 0.45)); }
}

/* the light sweeping the word while it holds */
.hx-card-word::after {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 250, 240, 0.55) 50%, transparent 62%);
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  pointer-events: none;
}

.hx.is-born .hx-card-word::after {
  animation: hx-sweep 1.4s var(--hm-ease) 0.55s both;
}

@keyframes hx-sweep { to { transform: translateX(120%); } }

/* the flash the film erupts from as it begins */
.hx-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.hx-flash {
  background: radial-gradient(circle at 50% 50%, #fff, rgba(255, 220, 180, 0.8) 30%, rgba(250, 167, 25, 0.25) 60%, transparent 85%);
  mix-blend-mode: screen;
}

/* no WebGL: a still, warm deep-space frame */
.hx-fallback {
  background:
    radial-gradient(circle at 72% 44%, rgba(255, 170, 70, 0.9) 0 4%, rgba(229, 125, 35, 0.45) 9%, transparent 22%),
    radial-gradient(ellipse 70% 60% at 30% 70%, rgba(192, 69, 39, 0.25), transparent 70%),
    #070302;
}

.hx.has-gl .hx-fallback {
  display: none;
}

/* legibility: a soft fall-off under the copy, heavier at the bottom */
.hx-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 3, 2, 0.5) 0%, rgba(8, 3, 2, 0) 20%, rgba(8, 3, 2, 0) 62%, rgba(8, 3, 2, 0.72) 100%);
}

/* a dark bloom behind the copy so the headline never washes out */
.hx-shade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: radial-gradient(ellipse 50% 70% at 50% 100%, rgba(6, 2, 1, 0.7), transparent 75%);
  opacity: 0.3;
}

/* the film's letterbox: in while the universe is born and dies,
   out during the tour (home.js toggles .is-bars) */
.hx-bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  background: #000;
  transition: transform 1.2s var(--hm-ease);
  pointer-events: none;
}

.hx-bars i:first-child { top: 0; transform: translateY(-100%); }
.hx-bars i:last-child  { bottom: 0; transform: translateY(100%); }

.hx.is-bars .hx-bars i { transform: none; }

/* always full screen: no letterbox */
.hx-bars { display: none; }

/* mission-control readouts in the corners */
.hx-hud {
  position: absolute;
  top: clamp(96px, 13vh, 130px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.78);
  opacity: calc(1 - var(--hx) * 2.5);
  pointer-events: none;
}

.hx-hud small {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.5);
}

.hx-hud b {
  font-weight: 500;
  color: var(--accent-2);
}

.hx-hud--tl { left: clamp(20px, 5vw, 72px); }
.hx-hud--tr { right: clamp(20px, 5vw, 72px); align-items: flex-end; text-align: right; }

.hx-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--brand-ember);
  box-shadow: 0 0 10px rgba(192, 69, 39, 0.9);
  animation: hx-blink 1.2s steps(2, jump-none) infinite;
}

@keyframes hx-blink { 50% { opacity: 0.2; } }

/* the copy */
.hx-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(70px, 9.5vh, 104px);   /* low in the frame, just over the recorder */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(calc(var(--hx) * -12vh));
  opacity: calc(1 - var(--hx) * 1.8);
}

.hx-eyebrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.72);
}

.hx-eyebrow i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-2);
}

.hx-title {
  --glare: 0;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 8.6vw, 8.8rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--text);
  /* a soft dark halo keeps the headline (and the gradient "Worx.") clear
     of whatever the film is burning behind it */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 8px 36px rgba(6, 2, 1, 0.75));
}

.hx-line {
  display: block;
  overflow: hidden;
  padding: 0 0.04em 0.06em;
}

.hx-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.4s var(--hm-ease);
}

.hx.is-ready .hx-line > span { transform: none; }
.hx.is-ready .hx-line:nth-child(2) > span { transition-delay: 0.12s; }

.hx-title em {
  font-style: normal;
}

.hx-sub {
  max-width: 54ch;
  margin-top: 26px;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: rgba(254, 238, 207, 0.78);
}

.hx-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 30px;
  margin-top: 34px;
}

/* the CTA moment's headline (home.js types its last words). The edited
   words live in a box sized to the longer state, so neither the line
   nor the buttons below ever move while it types. */
.hx-say {
  /* one wide line on desktop, free of the content column */
  width: max-content;
  max-width: min(1340px, 100vw - 40px);
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  /* 3.75em on desktop, scaled down on smaller screens, then 1.5px
     lighter overall */
  font-size: calc(clamp(1.6em, 1em + 3.4vw, 3.75em) - 1.5px);
  font-weight: 400;
  line-height: 1.21;
  letter-spacing: -0.01em;
  color: var(--text);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 8px 30px rgba(6, 2, 1, 0.7));
}

.hx-say-edit {
  display: inline-grid;
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
}

.hx-say-sizer,
.hx-say-live { grid-area: 1 / 1; }

.hx-say-sizer {
  visibility: hidden;
  padding-right: 0.12em;          /* room for the caret after the last ">" */
}

/* the code half of "Worx <like/magic>": the site's mono face in the
   brand orange, like the <like/magic> under the logo */
.hx-say-code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--brand-orange);
}

/* the headline sits close over the actions */
.hx-say + .hx-cta { margin-top: 0; }

/* an editor caret in the Worx gradient (the same ember / orange / amber
   stops as --gradient, run along the bar so all three show) */
.hx-caret {
  display: inline-block;
  width: max(2px, 0.055em);
  height: 0.98em;
  margin-left: 0.05em;
  vertical-align: -0.14em;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--brand-amber) 0%, var(--brand-orange) 45%, var(--brand-ember) 100%);
  box-shadow: 0 0 10px rgba(229, 125, 35, 0.45);
  animation: hx-caret 1.06s steps(1, end) infinite;
}

/* solid while keys are moving, blinking when the line rests */
.hx-say.is-typing .hx-caret { animation: none; }

@keyframes hx-caret { 50% { opacity: 0; } }

@media (max-width: 760px) {
  /* the code state gets its own line: "Your Digital Vision Should" /
     "<Worx Like Magic/>" */
  .hx-say-edit { display: grid; width: max-content; max-width: 100%; margin: 0 auto; }
  .hx-say-fix { display: block; text-wrap: balance; }
}

.hx-say,
.hx-eyebrow,
.hx-sub,
.hx-cta,
.hx-hud,
.hx-telemetry {
  transition: opacity 1s ease 0.5s, transform 1.2s var(--hm-ease) 0.5s;
}

.hx:not(.is-ready) .hx-say,
.hx.is-card:not(.is-final) .hx-say,
.hx:not(.is-ready) .hx-cta,
.hx.is-card:not(.is-final) .hx-cta {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

/* one moment: the headline leads, the two actions follow it up */
.hx-say { transition-delay: 0.3s; }

/* scrolled on (home.js .is-away): the faded actions step out of the tab
   order and the pointer's way; they come straight back on return */
.hx.is-away .hx-cta { visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.4s; }

/* the exit: as the copy lifts away the film sinks toward the page ink,
   so the hand-off to Partners is a fade through dark, not a hard edge */
.hx-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                     /* over the film's layers, under the copy (z 2) */
  pointer-events: none;
  background: linear-gradient(180deg, rgba(21, 9, 5, 0.55), var(--ink) 92%);
  opacity: calc(var(--hx) * 0.9);
}

/* NOW PASSING readout + the film's reel position */
.hx-telemetry {
  position: absolute;
  left: clamp(20px, 5vw, 72px);
  right: clamp(20px, 5vw, 72px);
  bottom: clamp(26px, 4.5vh, 44px);
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.62);
  opacity: calc(1 - var(--hx) * 3);
  pointer-events: none;
}

.hx-telemetry {
  grid-template-columns: auto auto auto 1fr;
}

.hx-now b,
.hx-time b,
.hx-au b {
  display: inline-block;
  margin-left: 8px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hx-now b { min-width: 21ch; }
.hx-time b { min-width: 9ch; color: var(--text); }
.hx-au b { min-width: 7ch; margin: 0 6px 0 0; text-align: right; color: var(--accent-2); }

/* the reel: the singularity it starts from, a tick per chapter, and a
   burning playhead */
.hx-reel {
  position: relative;
  height: 1px;
  margin-left: 14px;
  background: rgba(254, 238, 207, 0.18);
}

.hx-reel::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 200, 140, 0.8);
}

.hx-reel i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
}

.hx-reel-ticks em {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: rgba(254, 238, 207, 0.35);
  transition: background 0.4s ease, height 0.4s ease, top 0.4s ease;
}

.hx-reel-ticks em.is-past { background: rgba(250, 167, 25, 0.8); }
.hx-reel-ticks em.is-now { top: -6px; height: 13px; background: #fff; }

.hx-reel-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #ffd79a;
  box-shadow: 0 0 12px 3px rgba(250, 167, 25, 0.85);
}

@media (max-width: 760px) {
  .hx-hud--tr { display: none; }
  .hx-hud--tl { top: 86px; }
  .hx-telemetry { grid-template-columns: auto auto; gap: 8px 18px; }
  .hx-now { grid-column: 1 / -1; }
  .hx-now b { min-width: 0; }
  .hx-reel { grid-column: 1 / -1; margin-left: 10px; }
  .hx-copy { bottom: 136px; }
  .hx-cta { gap: 16px 22px; }
}

@media (max-height: 640px) and (min-width: 761px) {
  .hx-hud { top: 84px; }
  .hx-sub { display: none; }
  .hx-copy { bottom: 70px; }
}

/* ================================================================
   01 · PARTNERS
   ================================================================ */
.hm-partners {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(56px, 7vw, 90px);
}

.hm-marquee {
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hm-marquee-row {
  display: flex;
  width: max-content;
  gap: 14px;
  will-change: transform;
}

.bm {
  display: grid;
  place-items: center;
  min-width: clamp(170px, 18vw, 260px);
  height: clamp(84px, 9vw, 112px);
  padding: 0 28px;
  border: 1px solid var(--hm-line);
  border-radius: 20px;
  background: var(--hm-glass);
  color: rgba(254, 238, 207, 0.66);
  white-space: nowrap;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.bm { position: relative; }

.bm:hover {
  color: var(--text);
  border-color: transparent;
  background: rgba(229, 125, 35, 0.06);
}

/* each client's name set the way its brand sets it */
.bm--chaumet { font-family: Georgia, "Times New Roman", serif; text-transform: uppercase; letter-spacing: 0.34em; font-size: 1rem; }
.bm--hyundai { font-style: italic; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 1rem; }
.bm--modon { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.46em; font-size: 1rem; }
.bm--genesis { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.56em; font-size: 0.86rem; }
.bm--kia { font-family: var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 1.9rem; }
.bm--uae-pavilion { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; }
.bm--hudayriyat { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.3rem; }
.bm--wealthface { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.bm--hisense { font-weight: 700; font-size: 1.4rem; letter-spacing: -0.03em; }
.bm--unicef { font-weight: 700; font-size: 1.45rem; }
.bm--universal { font-family: Georgia, "Times New Roman", serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.8rem; }
.bm--roxy { font-family: var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; }
.bm--lg { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; }
.bm--tiara { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.25rem; letter-spacing: 0.04em; }
.bm--duni { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.bm--glimpse { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.95rem; }

.hm-regions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 44px;
}

.hm-regions li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hm-regions li:first-child {
  border-color: rgba(250, 167, 25, 0.35);
  color: var(--text);
}

.hm-regions i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(250, 167, 25, 0.15);
}

/* ================================================================
   02 · MISSION ARCHIVE
   Desktop: .hm-archive is tall (home.js sets its height), its inner
   block sticks, the track slides by --tx.
   ================================================================ */
.hm-archive {
  position: relative;
  padding-top: clamp(40px, 6vw, 80px);
}

.hm-archive-pin {
  position: relative;
}

.hm-archive.is-pinned .hm-archive-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hm-archive.is-pinned .hm-head {
  margin-bottom: clamp(24px, 3.5vh, 44px);
}

.hm-track-wrap {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hm-track-wrap::-webkit-scrollbar { display: none; }

.hm-archive.is-pinned .hm-track-wrap {
  overflow: visible;
}

.hm-track {
  --tx: 0px;
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  width: max-content;
  padding: 0 var(--hm-gut);
  transform: translate3d(var(--tx), 0, 0);
  will-change: transform;
}

.hm-case {
  flex: none;
  width: clamp(280px, 38vw, 560px);
  scroll-snap-align: center;
}

.hm-case > a {
  display: block;
  color: inherit;
}

.hm-case-media {
  position: relative;
  aspect-ratio: 1906 / 910;       /* the films' own frame, so they fill it whole */
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 22px;
  background: #0c0503;
  isolation: isolate;
}

.hm-case-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 80% 70% at 70% 20%, rgba(229, 125, 35, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 60% at 20% 90%, rgba(192, 69, 39, 0.2), transparent 70%),
    #0e0604;
}

.hm-case-poster span {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(254, 238, 207, 0.22);
}

.hm-case-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hm-case-media video.is-playing {
  opacity: 1;
}

.hm-case-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(254, 238, 207, 0.06);
  background: linear-gradient(180deg, transparent 55%, rgba(8, 3, 2, 0.55));
  pointer-events: none;
}

.hm-case-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 16px;
  padding: 20px 4px 0;
}

.hm-case-n {
  grid-row: span 3;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  padding-top: 0.5em;
}

.hm-case-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.hm-case-body p {
  max-width: 48ch;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--muted);
}

.hm-case-body ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.hm-case-body li {
  padding: 5px 12px;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hm-case--more > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  aspect-ratio: 1906 / 910;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid rgba(250, 167, 25, 0.25);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, rgba(229, 125, 35, 0.18), transparent 70%),
    var(--hm-glass);
}

.hm-case-more-n {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.hm-case-more-t {
  font-size: 1.05rem;
  color: var(--muted);
}

.hm-track-foot {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(24px, 3.5vh, 40px);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.hm-track-count b {
  font-weight: 500;
  color: var(--text);
}

.hm-track-bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--hm-line);
}

.hm-track-bar i {
  position: absolute;
  inset: 0;
  background: var(--gradient);
  transform: scaleX(var(--p, 0.05));
  transform-origin: left;
}

.hm-archive:not(.is-pinned) .hm-track-hint { display: none; }

/* the swipe track (touch / narrow): a card fills most of the screen and
   the next one peeks in from the edge, so it reads as "swipe on" */
.hm-archive:not(.is-pinned) .hm-case { width: min(82vw, 460px); }
.hm-archive:not(.is-pinned) .hm-track-wrap { scroll-padding-inline: var(--hm-gut); }
.hm-archive:not(.is-pinned) .hm-case { scroll-snap-align: start; }

/* ================================================================
   03 · MISSION MODULES
   ================================================================ */
.hm-mod {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hm-mod-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hm-line);
}

.hm-mod-list li {
  border-bottom: 1px solid var(--hm-line);
}

.hm-mod-list button {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: clamp(16px, 2.2vw, 26px) 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.1vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: left;
  color: rgba(254, 238, 207, 0.28);
  cursor: pointer;
  transition: color 0.5s ease, padding-left 0.6s var(--hm-ease);
}

.hm-mod-list button .hm-dot {
  align-self: center;
  opacity: 0.35;
  box-shadow: none;
  transition: opacity 0.5s ease, box-shadow 0.5s ease;
}

.hm-mod-list button .hm-dot::after { display: none; }

.hm-mod-list button.is-active .hm-dot {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(250, 167, 25, 0.15), 0 0 12px rgba(250, 167, 25, 0.7);
}

.hm-mod-list button span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(254, 238, 207, 0.35);
  transition: color 0.5s ease;
}

.hm-mod-list button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
}

.hm-mod-list button:hover {
  color: rgba(254, 238, 207, 0.62);
}

.hm-mod-list button.is-active {
  padding-left: 12px;
  color: var(--text);
}

.hm-mod-list button.is-active span {
  color: var(--accent-2);
}

/* the auto-advance timer draws along the active row's underline */
.hm-mod-list button.is-active::after {
  animation: hm-mod-timer var(--mod-dur, 6s) linear forwards;
}

.hm-mod.is-paused .hm-mod-list button.is-active::after { animation-play-state: paused; }

.hm-mod.is-held .hm-mod-list button.is-active::after {
  animation: none;
  transform: scaleX(1);
}

@keyframes hm-mod-timer { to { transform: scaleX(1); } }

.hm-mod-stage {
  position: relative;
  display: grid;
  gap: 22px;
}

.hm-mod-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 50%, rgba(229, 125, 35, 0.2), transparent 55%),
    #070302;
}

.hm-mod-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.45s ease, transform 1.1s var(--hm-ease);
}

.hm-mod-visual.is-switching .hm-mod-gl {
  opacity: 0;
  transform: scale(0.94);
}

@keyframes hm-spin { to { transform: rotate(360deg); } }

.hm-mod-label {
  position: absolute;
  left: 22px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: rgba(254, 238, 207, 0.6);
  pointer-events: none;
}

.hm-mod-label b {
  font-weight: 500;
  color: var(--accent-2);
}

.hm-mod-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hm-mod-panel[hidden] {
  display: none;
}

.hm-mod-panel a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--hm-line);
  border-radius: 18px;
  background: var(--hm-glass);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.45s var(--hm-ease);
  animation: hm-panel-in 0.7s var(--hm-ease) both;
}

.hm-mod-panel a:nth-child(2) { animation-delay: 0.06s; }
.hm-mod-panel a:nth-child(3) { animation-delay: 0.12s; }
.hm-mod-panel a:nth-child(4) { animation-delay: 0.18s; }

@keyframes hm-panel-in {
  from { opacity: 0; transform: translateY(14px); }
}

.hm-mod-panel a b {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
}

.hm-mod-panel a span {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.hm-mod-panel a:hover,
.hm-mod-panel a:focus-visible {
  border-color: rgba(250, 167, 25, 0.35);
  background: rgba(229, 125, 35, 0.06);
  transform: translateY(-3px);
}

/* ---- the annotated plate (wide screens) ------------------------
   The division's services are written on the photograph itself, each
   pinned to a survey mark on the world by a hairline leader. */
.hm-mod-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* every service reads as a payload on the manifest */
.hm-mod-panel { counter-reset: payload; }

.hm-mod-panel a::before {
  counter-increment: payload;
  content: "PAYLOAD 0" counter(payload);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: rgba(250, 167, 25, 0.75);
}

.hm-mod-pin path {
  fill: none;
  stroke: rgba(254, 238, 207, 0.32);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--hm-ease) var(--d, 0s), stroke 0.35s ease;
}

.hm-mod-pin-ring {
  fill: none;
  stroke: rgba(250, 167, 25, 0.55);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s var(--hm-ease), opacity 0.5s ease var(--d, 0s), stroke 0.35s ease;
}

.hm-mod-pin-dot { fill: var(--text); transition: opacity 0.4s ease var(--d, 0s); }
.hm-mod-pin-end { fill: rgba(254, 238, 207, 0.6); transition: opacity 0.4s ease calc(var(--d, 0s) + 0.6s); }

.hm-mod-pin.is-drawing path { stroke-dashoffset: 1; transition: none; }
.hm-mod-pin.is-drawing circle { opacity: 0; transition: none; }
.hm-mod-pin.is-drawing .hm-mod-pin-ring { transform: scale(0.2); }

.hm-mod-pin.is-hot path { stroke: url(#mod-lg); }
.hm-mod-pin.is-hot .hm-mod-pin-ring { stroke: #faa719; transform: scale(1.5); }
.hm-mod-pin.is-hot .hm-mod-pin-end { fill: #faa719; }

/* the annotated plate needs the room: laptops and up (tablets, landscape
   included, get the stacked module below) */
@media (min-width: 1181px) {
  .hm-mod-stage { display: block; }

  /* a soft falloff on the right, where the labels are written */
  .hm-mod-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, transparent 48%, rgba(7, 3, 2, 0.5) 78%, rgba(7, 3, 2, 0.62));
    pointer-events: none;
  }

  .hm-mod-panel {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: clamp(22px, 3vw, 40px);
    width: 36%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 1.8vw, 22px);
    pointer-events: none;
  }

  .hm-mod-panel a {
    position: relative;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    pointer-events: auto;
  }

  .hm-mod-panel a b {
    font-size: clamp(0.98rem, 1.25vw, 1.12rem);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
    transition: color 0.35s ease;
  }

  .hm-mod-panel a span {
    font-size: 0.8rem;
    line-height: 1.45;
    color: rgba(254, 238, 207, 0.58);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  }

  .hm-mod-panel a:hover,
  .hm-mod-panel a:focus-visible {
    border-color: transparent;
    background: none;
    transform: translateX(4px);
  }

  .hm-mod-panel a:hover b,
  .hm-mod-panel a:focus-visible b { color: var(--accent-2); }

  /* the world's name and caption stay bottom-left, under the disc */
  .hm-mod-label { z-index: 3; }
}

@media (max-width: 1180px) {
  .hm-mod-lines { display: none; }
  .hm-mod { grid-template-columns: 1fr; }
  /* the divisions become a row of pills that swipes; its ends fade so a
     cut-off pill reads as "more this way", not as a broken layout */
  .hm-mod-list {
    flex-direction: row; overflow-x: auto; border: 0; gap: 8px; scrollbar-width: none;
    margin-inline: calc(var(--hm-gut) * -1);
    padding-inline: var(--hm-gut);
    scroll-padding-inline: var(--hm-gut);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--hm-gut), #000 calc(100% - var(--hm-gut) - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--hm-gut), #000 calc(100% - var(--hm-gut) - 24px), transparent);
  }
  .hm-mod-list::-webkit-scrollbar { display: none; }
  .hm-mod-list li { border: 0; flex: none; }
  .hm-mod-list button {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--hm-line);
    border-radius: 999px;
    font-size: 1rem;
    white-space: nowrap;
  }
  .hm-mod-list button.is-active { padding-left: 18px; border-color: rgba(250, 167, 25, 0.45); }
  .hm-mod-list button::after { display: none; }
  .hm-mod-panel { grid-template-columns: 1fr; gap: 0; }
  .hm-mod-panel a {
    padding: 16px 0 16px 16px;
    border: 0;
    border-left: 1px solid var(--hm-line);
    border-radius: 0;
    background: none;
  }
  .hm-mod-panel a:hover,
  .hm-mod-panel a:focus-visible {
    border-color: rgba(250, 167, 25, 0.6);
    background: none;
    transform: none;
  }
}

/* tablets: the division's services in two columns under the plate */
@media (min-width: 701px) and (max-width: 1180px) {
  .hm-mod-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .hm-mod-visual { aspect-ratio: 16 / 9; }
}

/* ---- phones: the flight through the modules ----------------------
   One division at a time hid the other twelve services behind a pill
   row that only showed two of its five stops. On phones every division
   is written out in the page instead, each under its own module head,
   and the world docks under the header while the page flies through
   them: it switches as each division passes (home.js), a counter and
   five ticks on it say where the flight is, and each service fades as
   it slides under the plate. The pills stay above as the manifest:
   tap one and the page flies to that module. */
.hm-mod-panel-head,
.hm-mod-flight { display: none; }

@media (max-width: 700px) {
  .hm-mod-stage { display: block; }

  .hm-mod-visual {
    position: sticky;
    top: 72px;
    z-index: 4;
    aspect-ratio: auto;
    height: min(60vw, 34svh);
    min-height: 150px;
    box-shadow: 0 16px 28px -14px #000;
  }

  .hm-mod-flight {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: rgba(254, 238, 207, 0.55);
    pointer-events: none;
  }

  .hm-mod-flight b { font-weight: 500; color: var(--accent-2); }

  .hm-mod-ticks { display: flex; gap: 3px; margin-left: 6px; }

  .hm-mod-ticks i {
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: rgba(254, 238, 207, 0.22);
    transition: background 0.4s ease, width 0.4s var(--hm-ease);
  }

  .hm-mod-ticks i.is-past { background: rgba(250, 167, 25, 0.5); }
  .hm-mod-ticks i.is-on { width: 18px; background: var(--gradient); }

  .hm-mod-panel,
  .hm-mod-panel[hidden] { display: grid; }

  .hm-mod-panel { margin-top: 30px; }

  .hm-mod-panel-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: rgba(254, 238, 207, 0.4);
    transition: color 0.5s ease;
  }

  .hm-mod-panel-head span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: rgba(254, 238, 207, 0.4);
    transition: color 0.5s ease;
  }

  .hm-mod-panel.is-current .hm-mod-panel-head { color: var(--text); }
  .hm-mod-panel.is-current .hm-mod-panel-head span { color: var(--accent-2); }

  .hm-mod-panel a { transition: opacity 0.35s ease, translate 0.45s var(--hm-ease), border-color 0.35s ease; }
  .hm-mod-panel.is-current a { border-left-color: rgba(250, 167, 25, 0.35); }

  /* a service passing under the plate docks: it fades out of the way */
  .hm-mod-panel .is-docked { opacity: 0; translate: 0 -10px; }
}

/* phones on their side: too short to pin the plate, so it stays in the
   flow; the module heads still spell out every division */
@media (max-width: 700px) and (max-height: 500px) {
  .hm-mod-visual { position: relative; top: auto; height: 60vh; }
}

/* ================================================================
   04 · WHY WORX: a star chart
   No cards: the four reasons are four constellations on one sheet of
   sky, a faint graticule behind them and an ecliptic (home.js) strung
   through their hearts. Each figure draws itself in when the chart
   comes into view; pointing at one lights it and lets the others fade.
   ================================================================ */
.hm-chart {
  position: relative;
  padding: clamp(10px, 2vw, 30px) 0 clamp(20px, 3vw, 40px);
}

.hm-chart-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%);
  mask: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 80%);
}

.hm-chart-grid path {
  fill: none;
  stroke: rgba(254, 238, 207, 0.07);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 6;
}

/* the ecliptic, through the four figures (home.js) */
.hm-chart-ecl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hm-chart-ecl path {
  fill: none;
  stroke: url(#ecl-g);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
  transition: stroke-dashoffset 2.4s var(--hm-ease) 0.3s;
}

.hm-chart.is-inview .hm-chart-ecl path { stroke-dashoffset: 0; }

/* on phones the meander passes behind the copy: quieter there */
.hm-chart-ecl.is-zig path { opacity: 0.3; }

.hm-chart-ecl text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  fill: rgba(254, 238, 207, 0.32);
}

.hm-chart-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  counter-reset: none;
}

/* a sky, not a row: the figures sit at different heights */
.hm-star {
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease calc(var(--i) * 0.16s), transform 1.1s var(--hm-ease) calc(var(--i) * 0.16s);
}

.hm-star:nth-child(2) { margin-top: clamp(40px, 7vw, 110px); }
.hm-star:nth-child(3) { margin-top: clamp(10px, 2vw, 30px); }
.hm-star:nth-child(4) { margin-top: clamp(60px, 9vw, 140px); }

.hm-chart.is-inview .hm-star { opacity: 1; transform: none; }

.hm-star-fig {
  width: 100%;
  height: auto;
  margin-bottom: 18px;
  overflow: visible;
}

.hm-star-fig .ln {
  fill: none;
  stroke: rgba(254, 238, 207, 0.34);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--hm-ease) calc(0.3s + var(--i) * 0.2s), stroke 0.5s ease;
}

.hm-star-fig .ln--faint { stroke: rgba(254, 238, 207, 0.12); stroke-dasharray: 1; }

.hm-chart.is-inview .hm-star-fig .ln { stroke-dashoffset: 0; }

.hm-star-fig .st {
  fill: var(--text);
  opacity: 0;
  transition: opacity 0.6s ease calc(0.2s + var(--i) * 0.2s);
}

.hm-chart.is-inview .hm-star-fig .st {
  opacity: 1;
  animation: hm-star-tw 4.2s ease-in-out var(--t, 0s) infinite;
}

.hm-star-fig .st--a {
  fill: #faa719;
  filter: drop-shadow(0 0 6px rgba(250, 167, 25, 0.85));
}

.hm-star-fig .st--run {
  fill: #faa719;
  filter: drop-shadow(0 0 6px rgba(250, 167, 25, 0.9));
}

.hm-star-fig .wave {
  fill: none;
  stroke: rgba(250, 167, 25, 0.75);
  stroke-linecap: round;
  stroke-width: 1;
  opacity: 0;
}

.hm-chart.is-inview .hm-star-fig .wave { animation: hm-beacon 3.6s ease-out infinite; }
.hm-star-fig .w2 { animation-delay: 0.5s !important; }
.hm-star-fig .w3 { animation-delay: 1s !important; }

@keyframes hm-star-tw { 50% { opacity: 0.55; } }
@keyframes hm-beacon { 0% { opacity: 0; } 20% { opacity: 0.9; } 70%, 100% { opacity: 0; } }

.hm-star-cat {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.45);
}

.hm-star-cat b {
  font-weight: 500;
  color: var(--accent-2);
}

.hm-star-cat span {
  margin-left: 6px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.28);
}

.hm-star h3 {
  margin: 0 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hm-line);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 600;
  color: var(--text);
  transition: color 0.4s ease;
}

.hm-star-text {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--muted);
}

/* pointing at a figure lights it; the rest of the sky steps back
   (fine pointers only: a tap on a phone would leave the sky dimmed) */
@media (hover: hover) {
  .hm-chart-list:hover .hm-star { opacity: 0.38; }
  .hm-chart-list:hover .hm-star:hover { opacity: 1; }
  .hm-chart.is-inview .hm-chart-list:hover .hm-star { transition-delay: 0s; transition-duration: 0.5s; }
  .hm-star:hover .ln { stroke: url(#ecl-g); }
  .hm-star:hover h3 { color: var(--accent-2); }
}

@media (max-width: 1100px) {
  .hm-chart-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .hm-star:nth-child(n) { margin-top: 0; }
  .hm-star:nth-child(2n) { margin-top: 60px; }
  .hm-star-fig { max-width: 300px; }
}

/* phones: a star-chart legend. Each figure sits beside its reason,
   left, right, left, right, so the ecliptic zig-zags down the sheet
   and four reasons fit in about one screen instead of three */
@media (max-width: 560px) {
  .hm-chart-list { grid-template-columns: 1fr; row-gap: 30px; }
  .hm-star:nth-child(n) {
    margin-top: 0;
    display: grid;
    grid-template-columns: clamp(84px, 27vw, 118px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 18px;
    align-items: start;
  }
  .hm-star-fig {
    grid-column: 1;
    grid-row: 1 / span 3;
    max-width: none;
    margin: 4px 0 0;
    align-self: center;
  }
  .hm-star > :not(.hm-star-fig) { grid-column: 2; }
  .hm-star:nth-child(2n) { grid-template-columns: minmax(0, 1fr) clamp(84px, 27vw, 118px); }
  .hm-star:nth-child(2n) .hm-star-fig { grid-column: 2; }
  .hm-star:nth-child(2n) > :not(.hm-star-fig) { grid-column: 1; }
  .hm-star-cat { margin-bottom: 6px; font-size: 0.58rem; letter-spacing: 0.18em; }
  .hm-star h3 { padding-top: 8px; font-size: 1.12rem; }
  .hm-star-text { font-size: 0.88rem; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-star, .hm-star-fig .ln, .hm-star-fig .st, .hm-chart-ecl path { transition: none; }
  .hm-star-fig .st, .hm-star-fig .wave { animation: none !important; }
  .hm-star-fig .st--run { display: none; }
}

/* ================================================================
   05 · TELEMETRY: a live instrument panel
   The years roll on a mission odometer, four dials sweep to their
   readings, a comet rides the trajectory from the 2019 launch to now,
   and the downlink ticker streams the same figures.
   ================================================================ */
.hm-telemetry {
  position: relative;
  padding: clamp(80px, 10vw, 150px) 0 0;
  overflow: hidden;
}

/* the panel's warm light, feathered at the top so it rises out of the
   horizon arc above instead of starting on a hard edge */
.hm-telemetry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(229, 125, 35, 0.1), transparent 70%),
    radial-gradient(ellipse 60% 80% at 0% 90%, rgba(192, 69, 39, 0.12), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 clamp(90px, 14vw, 220px));
  mask-image: linear-gradient(180deg, transparent, #000 clamp(90px, 14vw, 220px));
}

/* the trajectory, behind everything */
.hm-tl-orbit {
  position: absolute;
  inset: 8% 0 12%;
  width: 100%;
  height: 80%;
  pointer-events: none;
}

.hm-tl-orbit-path {
  fill: none;
  stroke: url(#orbit-g);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.6 1.4;
}

.hm-tl-comet {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff4dc;
  box-shadow: 0 0 14px 4px rgba(250, 167, 25, 0.9), 0 0 60px 16px rgba(229, 125, 35, 0.35);
  pointer-events: none;
}

.hm-tl-comet i {
  position: absolute;
  right: 50%;
  top: 50%;
  width: 180px;
  height: 2px;
  margin-top: -1px;
  transform-origin: right center;
  transform: rotate(var(--ang, 20deg));
  background: linear-gradient(90deg, transparent, rgba(250, 167, 25, 0.75));
  border-radius: 2px;
}

.hm-tl-mark {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.45);
  pointer-events: none;
}

.hm-tl-mark b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0;
  color: var(--text);
}

/* the launch mark sits in the clear band between the dials and the
   downlink ticker, where the trajectory begins, never under a card */
/* the two ends of the trajectory, read as one timeline along the clear
   band between the dials and the downlink ticker: 2019 on the left, this
   year on the right (never over the odometer, whatever the layout) */
.hm-tl-mark--start,
.hm-tl-mark--end { bottom: calc(52px + clamp(18px, 2vw, 30px)); z-index: 2; flex-direction: row; align-items: baseline; gap: 12px; }
.hm-tl-mark--start { left: var(--hm-gut); }
.hm-tl-mark--end { right: var(--hm-gut); text-align: right; }
.hm-tl-mark--end b { color: var(--accent-2); }

.hm-tl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px) clamp(32px, 6vw, 96px);
  align-items: end;
}

.hm-tl-head > p:last-child {
  max-width: 44ch;
  margin-top: 20px;
  color: var(--muted);
}

/* ---- the mission odometer ------------------------------------- */
.hm-odo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--muted);
}

.hm-odo-digits {
  display: flex;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(254, 238, 207, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(18, 7, 4, 0.8));
  box-shadow: inset 0 1px 0 rgba(254, 238, 207, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.hm-odo-wheel {
  position: relative;
  width: clamp(54px, 6.4vw, 92px);
  height: clamp(78px, 9vw, 128px);
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #0a0403, #1a0b06 50%, #0a0403);
  box-shadow: inset 0 0 0 1px rgba(254, 238, 207, 0.06);
}

/* the glass and the shadow at the wheel's top and bottom */
.hm-odo-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.75)),
    linear-gradient(180deg, transparent 49.6%, rgba(0, 0, 0, 0.6) 50%, transparent 50.4%);
  pointer-events: none;
}

.hm-odo-strip {
  display: flex;
  flex-direction: column;
  transition: transform 2.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.hm-odo-strip span {
  display: grid;
  place-items: center;
  height: clamp(78px, 9vw, 128px);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.2vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hm-odo-elapsed b {
  font-weight: 500;
  color: var(--accent-2);
}

/* ---- the dials -------------------------------------------------- */
.hm-dials {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(10px, 2vw, 24px);
}

.hm-dial {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.76vw, 24px) clamp(11px, 1.6vw, 21px) 18px;
  border: 1px solid var(--hm-line);
  border-radius: 21px;
  background:
    radial-gradient(circle at 50% 42%, rgba(229, 125, 35, 0.1), transparent 60%),
    rgba(10, 4, 3, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hm-dial svg {
  grid-area: 1 / 1;
  width: 80%;
  max-width: 184px;
  height: auto;
  overflow: visible;
  transform: rotate(-90deg);
}

.hm-dial-ticks {
  fill: none;
  stroke: rgba(254, 238, 207, 0.22);
  stroke-width: 6;
  stroke-dasharray: 1 5.3;
}

/* a bright segment scanning round the bezel, forever */
.hm-dial-sweep {
  fill: none;
  stroke: #ffd79a;
  stroke-width: 6;
  stroke-dasharray: 5 95;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(250, 167, 25, 0.9));
  transform-origin: 100px 100px;
  transition: opacity 1s ease 2s;
  animation: hm-sweep 4.8s linear infinite;
}

.hm-dial:nth-child(2) .hm-dial-sweep { animation-duration: 6.2s; animation-delay: -1.3s; }
.hm-dial:nth-child(3) .hm-dial-sweep { animation-duration: 5.4s; animation-delay: -2.6s; animation-direction: reverse; }
.hm-dial:nth-child(4) .hm-dial-sweep { animation-duration: 7s; animation-delay: -0.7s; }

.hm-telemetry.is-inview .hm-dial-sweep { opacity: 0.75; }

@keyframes hm-sweep { to { transform: rotate(360deg); } }

/* once live (home.js), the arc and needle follow the live reading
   frame by frame, so their sweep-in transition steps aside */
.hm-dial.is-live .hm-dial-arc,
.hm-dial.is-live .hm-dial-needle { transition: none; }

.hm-dial.is-sampling .hm-dial-read strong { color: #ffe7c2; text-shadow: 0 0 18px rgba(250, 167, 25, 0.55); }

.hm-dial-read strong { transition: color 0.3s ease, text-shadow 0.3s ease; }

.hm-dial-track {
  fill: none;
  stroke: rgba(254, 238, 207, 0.07);
  stroke-width: 8;
}

.hm-dial-arc {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 6px rgba(250, 167, 25, 0.55));
  transition: stroke-dasharray 2.2s cubic-bezier(0.25, 1, 0.3, 1) 0.2s;
}

.hm-dial-needle {
  transform-origin: 100px 100px;
  transform: rotate(0deg);
  transition: transform 2.2s cubic-bezier(0.25, 1, 0.3, 1) 0.2s;
}

.hm-dial-needle circle {
  fill: #fff4dc;
  filter: drop-shadow(0 0 6px rgba(250, 167, 25, 1));
}

.hm-telemetry.is-inview .hm-dial-arc { stroke-dasharray: calc(var(--p) * 100) 100; }
.hm-telemetry.is-inview .hm-dial-needle { transform: rotate(calc(var(--p) * 360deg)); }

.hm-dial:nth-child(2) .hm-dial-arc, .hm-dial:nth-child(2) .hm-dial-needle { transition-delay: 0.35s; }
.hm-dial:nth-child(3) .hm-dial-arc, .hm-dial:nth-child(3) .hm-dial-needle { transition-delay: 0.5s; }
.hm-dial:nth-child(4) .hm-dial-arc, .hm-dial:nth-child(4) .hm-dial-needle { transition-delay: 0.65s; }

.hm-dial-read {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.hm-dial-read strong {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.88vw, 2.64rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hm-dial-read > span {
  max-width: 13ch;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted);
}

.hm-dial-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  color: rgba(254, 238, 207, 0.55);
}

.hm-dial-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px rgba(250, 167, 25, 0.8);
  animation: hx-blink 1.4s ease-in-out infinite;
}

/* ---- the downlink ticker ----------------------------------------- */
.hm-tl-ticker {
  position: relative;
  z-index: 1;
  margin-top: clamp(84px, 8vw, 116px);
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
  overflow: hidden;
  background: rgba(10, 4, 3, 0.6);
}

.hm-tl-ticker-row {
  display: flex;
  width: max-content;
  gap: 26px;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.45);
  animation: hm-tick 40s linear infinite;
}

.hm-tl-ticker-row b { font-weight: 500; color: var(--text); }
.hm-tl-ticker-row > span:first-child { color: var(--accent-2); }

@keyframes hm-tick { to { transform: translateX(-50%); } }

@media (max-width: 1000px) {
  .hm-dials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the narrowest phones: the card is already as small as the ring can
   go and still hold its reading, so the ring takes the card width */
@media (max-width: 374px) {
  .hm-dial svg { width: 100%; }
}

@media (max-width: 760px) {
  .hm-tl { grid-template-columns: 1fr; }
  .hm-odo { align-items: flex-start; }
  /* one tall column: stretched that far the trajectory reads as rain
     across the copy, so the phone layout keeps to the instruments */
  .hm-tl-mark, .hm-tl-orbit, .hm-tl-comet { display: none; }
}

/* ================================================================
   COMMS RAIL (left): the social channels, the stage rail's twin
   ================================================================ */
.hm-comms {
  position: fixed;
  left: clamp(12px, 1.6vw, 26px);
  top: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(254, 238, 207, 0.55);
  transform: translate(calc(-100% - 40px), -50%);
  transition: transform 0.9s var(--hm-ease);
}

.hm-comms.is-on {
  transform: translate(0, -50%);
}

.hm-comms-tag,
.hm-comms-freq {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hm-comms-tag { color: var(--accent-2); }
.hm-comms-freq b { font-weight: 500; color: var(--text); }

.hm-comms-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.hm-comms-signal i {
  width: 3px;
  background: var(--accent-2);
  animation: hm-signal 1.6s ease-in-out infinite;
}

.hm-comms-signal i:nth-child(1) { height: 30%; }
.hm-comms-signal i:nth-child(2) { height: 50%; animation-delay: 0.15s; }
.hm-comms-signal i:nth-child(3) { height: 70%; animation-delay: 0.3s; }
.hm-comms-signal i:nth-child(4) { height: 85%; animation-delay: 0.45s; }
.hm-comms-signal i:nth-child(5) { height: 100%; animation-delay: 0.6s; }

@keyframes hm-signal { 50% { opacity: 0.25; } }

.hm-comms-line {
  position: relative;
  width: 1px;
  height: clamp(40px, 8vh, 80px);
  overflow: hidden;
  background: rgba(254, 238, 207, 0.2);
}

/* a data packet running down the wire */
.hm-comms-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -30%;
  width: 1px;
  height: 30%;
  background: linear-gradient(transparent, var(--accent-2));
  animation: hm-packet 2.4s linear infinite;
}

.hm-comms-line:last-of-type::after { animation-delay: 1.2s; }

@keyframes hm-packet { to { top: 100%; } }

.hm-comms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hm-comms-list a {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(254, 238, 207, 0.2);
  border-radius: 10px;
  background: rgba(21, 9, 5, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text);
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.hm-comms-list a::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 13px;
  background:
    linear-gradient(var(--accent-2), var(--accent-2)) top left / 6px 1px,
    linear-gradient(var(--accent-2), var(--accent-2)) top left / 1px 6px,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 6px 1px,
    linear-gradient(var(--accent-2), var(--accent-2)) bottom right / 1px 6px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease, inset 0.25s ease;
}

.hm-comms-list a:hover,
.hm-comms-list a:focus-visible {
  border-color: var(--accent-2);
  background: rgba(250, 167, 25, 0.12);
  color: var(--accent-2);
  transform: translateX(3px);
}

.hm-comms-list a:hover::before,
.hm-comms-list a:focus-visible::before {
  opacity: 1;
  inset: -7px;
}

.hm-comms-list svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.hm-comms-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid rgba(250, 167, 25, 0.4);
  border-radius: 6px;
  background: rgba(21, 9, 5, 0.9);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--accent-2);
  opacity: 0;
  transform: translate(-6px, -50%);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hm-comms-list a:hover .hm-comms-tip,
.hm-comms-list a:focus-visible .hm-comms-tip {
  opacity: 1;
  transform: translate(0, -50%);
}

.hm-comms-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(254, 238, 207, 0.35);
}

.hm-comms-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(250, 167, 25, 0.8);
  animation: hx-blink 1.4s ease-in-out infinite;
}

@media (max-width: 1100px), (hover: none) {
  .hm-comms { display: none; }
}

/* ================================================================
   06 · FLIGHT PLAN
   Stage cards stick one over another; the clock counts down.
   ================================================================ */
.hm-flight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.hm-flight-lead {
  position: sticky;
  top: clamp(110px, 16vh, 160px);
}

.hm-flight-lead > p {
  max-width: 40ch;
  margin-top: 20px;
  color: var(--muted);
}

/* ---- the countdown board -----------------------------------------
   Split-flap digits: each is four half-leaves. On a change the top of
   the old number falls on its hinge, the bottom of the new one lands
   (home.js clicks through every number on the way, faster when it has
   far to go). Under it: which stage it is reading, and a ladder of the
   seven. At T-00 the board goes to liftoff. */
.hm-fclock {
  --fd: 0.18s;
  position: relative;
  margin-top: clamp(28px, 5vh, 56px);
}

.hm-fclock-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.08em;
  font-size: clamp(4.2rem, 8.4vw, 7.4rem);
}

.hm-fclock-t,
.hm-fclock-sign {
  font-family: var(--font-mono);
  font-size: 0.28em;
  font-weight: 500;
  line-height: 1;
  color: rgba(254, 238, 207, 0.42);
}

.hm-fclock-sign { margin: 0 0.12em 0 0.04em; color: var(--accent-2); }

.hm-flap {
  position: relative;
  display: inline-block;
  width: 0.72em;
  height: 1.12em;
  perspective: 3.2em;
}

.hm-flap-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #211008, #170a05);
  box-shadow: inset 0 0 0 1px rgba(254, 238, 207, 0.07);
  backface-visibility: hidden;
}

.hm-flap-top,
.hm-flap-fall {
  top: 0;
  border-radius: 0.09em 0.09em 0 0;
  transform-origin: 50% 100%;
}

.hm-flap-bot,
.hm-flap-rise {
  bottom: 0;
  border-radius: 0 0 0.09em 0.09em;
  background: linear-gradient(180deg, #1a0c06, #120704);
  transform-origin: 50% 0;
}

.hm-flap-h i {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hm-flap-top i,
.hm-flap-fall i { top: 0; }

.hm-flap-bot i,
.hm-flap-rise i { bottom: 0; }

/* the hinge, and the two pins it turns on */
.hm-flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 4;
  height: 2px;
  margin-top: -1px;
  background: #080302;
}

.hm-flap::before {
  content: "";
  position: absolute;
  left: 0.035em;
  right: 0.035em;
  top: 50%;
  z-index: 5;
  height: 0.05em;
  margin-top: -0.025em;
  background:
    radial-gradient(circle, rgba(254, 238, 207, 0.22) 45%, transparent 55%) 0 50% / 0.05em 0.05em no-repeat,
    radial-gradient(circle, rgba(254, 238, 207, 0.22) 45%, transparent 55%) 100% 50% / 0.05em 0.05em no-repeat;
}

.hm-flap-fall,
.hm-flap-rise { z-index: 3; visibility: hidden; }

.hm-flap.is-flip .hm-flap-fall {
  visibility: visible;
  animation: hm-flap-fall var(--fd) cubic-bezier(0.55, 0, 0.9, 0.4) both;
}

.hm-flap.is-flip .hm-flap-rise {
  visibility: visible;
  animation: hm-flap-rise var(--fd) cubic-bezier(0.1, 0.6, 0.35, 1) var(--fd) both;
}

@keyframes hm-flap-fall {
  from { transform: rotateX(0); filter: brightness(1); }
  to { transform: rotateX(-90deg); filter: brightness(0.45); }
}

@keyframes hm-flap-rise {
  from { transform: rotateX(90deg); filter: brightness(1.6); }
  to { transform: rotateX(0); filter: brightness(1); }
}

.hm-fclock-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.45);
}

.hm-fclock-meta b {
  font-weight: 500;
  color: var(--text);
}

.hm-fclock-ladder {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-width: 330px;
  margin-top: 14px;
}

.hm-fclock-ladder li {
  height: 3px;
  border-radius: 2px;
  background: rgba(254, 238, 207, 0.1);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.hm-fclock-ladder li.is-past { background: rgba(229, 125, 35, 0.7); }

.hm-fclock-ladder li.is-now {
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(250, 167, 25, 0.8);
  animation: hm-rung 1.4s ease-in-out infinite;
}

@keyframes hm-rung { 50% { opacity: 0.45; } }

/* T-00: liftoff. The board warms from below and the name says so. */
.hm-fclock-row::after {
  content: "";
  position: absolute;
  left: -10%;
  right: 30%;
  bottom: -38%;
  height: 70%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 60% at 55% 30%, rgba(229, 125, 35, 0.45), transparent 70%);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.hm-fclock.is-go .hm-fclock-row::after { opacity: 1; animation: hm-ignite 2.6s ease-in-out infinite; }
.hm-fclock.is-go .hm-flap-h { box-shadow: inset 0 0 0 1px rgba(250, 167, 25, 0.28); }
.hm-fclock.is-go .hm-fclock-meta b { color: var(--accent-2); }
.hm-fclock.is-go .hm-fclock-ladder li { background: var(--accent-2); box-shadow: 0 0 8px rgba(250, 167, 25, 0.6); animation: none; }

@keyframes hm-ignite { 50% { opacity: 0.6; transform: scaleY(0.9); } }

.hm-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hm-stage {
  position: sticky;
  top: calc(clamp(110px, 16vh, 160px) + var(--i, 0) * 14px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  min-height: clamp(180px, 24vh, 240px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--hm-line);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(229, 125, 35, 0.1), transparent 60%),
    #120704;
  box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 0;
}

/* the deck: a card the next one lands on tips back on its top edge and
   sinks (smaller, darker) as more stages stack over it (home.js: --tip,
   --sink; --fuel fills the live card's edge toward the next stage) */
.hm-stage {
  overflow: hidden;
  transform: perspective(1400px) rotateX(calc(var(--tip, 0) * 6deg)) scale(calc(1 - var(--sink, 0) * 0.035));
  filter: brightness(calc(1 - min(var(--sink, 0), 4) * 0.14));
  transition: border-color 0.5s ease;
  will-change: transform;
}

.hm-stage > * { position: relative; z-index: 1; }

/* the stage's number, huge and hollow, in the corner of the card */
.hm-stage::before {
  content: attr(data-n);
  position: absolute;
  right: 0.04em;
  bottom: -0.3em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(7rem, 13vw, 11.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(254, 238, 207, 0.07);
  transition: -webkit-text-stroke-color 0.6s ease;
  pointer-events: none;
}

.hm-stage.is-live::before { -webkit-text-stroke-color: rgba(250, 167, 25, 0.18); }
.hm-stage.is-live { border-color: rgba(250, 167, 25, 0.32); }

/* status light: STANDBY -> IN PROGRESS -> CLEARED */
.hm-stage-st {
  position: absolute;
  left: clamp(24px, 3vw, 36px);
  bottom: clamp(18px, 2.2vw, 26px);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.38);
}

.hm-stage-st i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(254, 238, 207, 0.25);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.hm-stage-st b { font-weight: 500; }
.hm-stage-st b::after { content: "STANDBY"; }

.hm-stage.is-live .hm-stage-st { color: var(--accent-2); }
.hm-stage.is-live .hm-stage-st i {
  background: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(250, 167, 25, 0.15), 0 0 10px rgba(250, 167, 25, 0.8);
  animation: hm-rung 1.4s ease-in-out infinite;
}
.hm-stage.is-live .hm-stage-st b::after { content: "IN PROGRESS"; }
.hm-stage--go.is-live .hm-stage-st b::after { content: "LIFTOFF"; }

.hm-stage.is-done .hm-stage-st { color: rgba(254, 238, 207, 0.55); }
.hm-stage.is-done .hm-stage-st i { background: rgba(254, 238, 207, 0.6); }
.hm-stage.is-done .hm-stage-st b::after { content: "CLEARED"; }

/* fuel: the live card's lower edge fills as the next stage closes in */
.hm-stage-fuel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(var(--fuel, 0));
  transform-origin: left;
}

.hm-stage-t {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  padding-top: 0.45em;
}

.hm-stage h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.hm-stage h3 em {
  font-style: normal;
  color: var(--accent-2);
}

.hm-stage p {
  max-width: 46ch;
  margin-top: 10px;
  color: var(--muted);
}

.hm-stage--go {
  border-color: rgba(250, 167, 25, 0.4);
  background:
    radial-gradient(ellipse 90% 140% at 100% 0%, rgba(229, 125, 35, 0.28), transparent 65%),
    #140805;
}

/* the status light sits in its own strip at the foot of the card, never
   over the copy */
.hm-stage { padding-bottom: calc(clamp(24px, 3vw, 36px) + 26px); }

@media (max-width: 900px) {
  .hm-flight-grid { grid-template-columns: 1fr; }
  .hm-flight-lead { position: static; }
  .hm-fclock { display: none; }
  .hm-stage { top: calc(90px + var(--i, 0) * 10px); min-height: 0; }
}

@media (max-width: 560px) {
  /* phones: the T-number heads the card, the copy gets the full width */
  .hm-stage { grid-template-columns: 1fr; gap: 8px; }
  .hm-stage-t { padding-top: 0; }
  .hm-stage::before { font-size: 6.5rem; }
}

/* ================================================================
   07 · TRANSMISSIONS
   ================================================================ */
.hm-tx-nav {
  display: flex;
  gap: 12px;
}

.hm-tx-deck {
  display: grid;
}

.hm-tx-card {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--hm-line);
  border-radius: 28px;
  background:
    radial-gradient(ellipse 60% 100% at 0% 0%, rgba(229, 125, 35, 0.12), transparent 70%),
    var(--hm-glass);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.9s var(--hm-ease), visibility 0s linear 0.6s;
}

.hm-tx-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s ease 0.1s, transform 0.9s var(--hm-ease) 0.1s, visibility 0s;
}

.hm-tx-wave {
  grid-row: span 2;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 64px;
}

.hm-tx-wave i {
  width: 3px;
  height: 20%;
  border-radius: 2px;
  background: var(--gradient);
  animation: hm-wave 1.1s ease-in-out infinite alternate;
}

.hm-tx-wave i:nth-child(3n) { animation-duration: 0.8s; }
.hm-tx-wave i:nth-child(3n+1) { animation-duration: 1.4s; animation-delay: -0.4s; }
.hm-tx-wave i:nth-child(4n) { animation-duration: 0.95s; animation-delay: -0.7s; }

@keyframes hm-wave { to { height: 100%; } }

.hm-tx-card:not(.is-active) .hm-tx-wave i { animation-play-state: paused; }

.hm-tx-card blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.7vw, 2.3rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

.hm-tx-card figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  margin-top: 28px;
}

.hm-avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--on-accent);
  box-shadow: 0 0 0 4px rgba(229, 125, 35, 0.15);
}

.hm-tx-card figcaption b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
}

.hm-tx-card figcaption > span:last-child {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hm-tx-dots {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.hm-tx-dots i {
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--hm-line);
  transition: background 0.4s ease, width 0.5s var(--hm-ease);
}

.hm-tx-dots i.is-active {
  width: 56px;
  background: var(--gradient);
}

@media (max-width: 700px) {
  .hm-tx-card { grid-template-columns: 1fr; }
  .hm-tx-wave { grid-row: auto; height: 40px; }
}

/* ================================================================
   08 · FIELD NOTES
   ================================================================ */
.hm-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hm-note {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
}

.hm-note-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 20px;
}

.hm-note-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--hm-ease), filter 0.6s ease;
  filter: saturate(0.9);
}

.hm-note:hover .hm-note-img img,
.hm-note:focus-visible .hm-note-img img {
  transform: scale(1.08);
  filter: saturate(1.05);
}

.hm-note-tag {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.hm-note h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.hm-note p {
  color: var(--muted);
}

/* three equal cards; one column once they'd get too narrow */
@media (max-width: 700px) {
  .hm-notes-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   09 · BRIEFING (FAQ): the briefing terminal
   An index of questions on the left; one HUD screen on the right that
   the chosen answer decrypts onto (home.js). The items are display:
   contents on wide screens, so every answer lands in the screen's cell;
   on narrow ones they fold back into an accordion.
   ================================================================ */
.hm-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
}

.hm-faq-lead { display: contents; }
.hm-faq-lead > .hm-kicker,
.hm-faq-lead > .hm-h2 { grid-column: 1; }
.hm-faq-lead > .hm-kicker { align-self: end; }

.hm-faq-lead > p:last-child {
  grid-column: 2;
  grid-row: 2;
  max-width: 40ch;
  justify-self: end;
  color: var(--muted);
}

.hm-faq-lead a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brf {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: repeat(var(--n), auto);
  column-gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 48px);
}

.brf-item { display: contents; }

/* ---- the index --------------------------------------------------- */
.brf-q {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 15px 4px 15px 0;
  border: 0;
  border-bottom: 1px solid var(--hm-line);
  background: none;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: rgba(254, 238, 207, 0.55);
  cursor: pointer;
  transition: color 0.35s ease, padding-left 0.5s var(--hm-ease);
}

.brf-item:first-of-type .brf-q { border-top: 1px solid var(--hm-line); }

.brf-q::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--hm-ease);
}

.brf-id {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(254, 238, 207, 0.32);
  transition: color 0.35s ease;
}

.brf-qt { flex: 1; }

/* signal strength: lit on the open channel */
.brf-sig {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.brf-sig i {
  width: 3px;
  border-radius: 1px;
  background: rgba(254, 238, 207, 0.14);
  transition: background 0.35s ease;
}

.brf-sig i:nth-child(1) { height: 5px; }
.brf-sig i:nth-child(2) { height: 8px; }
.brf-sig i:nth-child(3) { height: 12px; }

.brf-q:hover { color: rgba(254, 238, 207, 0.85); }
.brf-q:focus-visible { outline: 1px solid rgba(250, 167, 25, 0.6); outline-offset: 2px; }

.brf-item.is-open .brf-q { padding-left: 12px; color: var(--text); }
.brf-item.is-open .brf-q::before { transform: scaleX(1); }
.brf-item.is-open .brf-id { color: var(--accent-2); }
.brf-item.is-open .brf-sig i { background: var(--accent-2); }
.brf-item.is-open .brf-sig i:nth-child(3) { animation: hm-rung 1.4s ease-in-out infinite; }

/* ---- the screen -------------------------------------------------- */
.brf-screen {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 24px;
  background:
    repeating-linear-gradient(0deg, rgba(254, 238, 207, 0.022) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 70% at 85% 0%, rgba(229, 125, 35, 0.14), transparent 65%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(192, 69, 39, 0.1), transparent 70%),
    #0d0503;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55);
}

/* the four corner brackets of a viewfinder */
.brf-corners {
  --c: rgba(254, 238, 207, 0.4);
  position: absolute;
  inset: 54px 16px 50px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 18px no-repeat;
}

/* a slow scan passing down the glass */
.brf-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(250, 167, 25, 0.06), transparent);
  animation: brf-scan 7s linear infinite;
  pointer-events: none;
}

@keyframes brf-scan { from { transform: translateY(-100%); } to { transform: translateY(420%); } }

.brf-bar,
.brf-foot {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.45);
}

.brf-bar { top: 0; height: 44px; border-bottom: 1px solid var(--hm-line); }
.brf-bar span { display: flex; align-items: center; gap: 9px; }
.brf-bar [data-brf-status] { color: var(--accent-2); }

.brf-rec {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-ember);
  box-shadow: 0 0 8px rgba(192, 69, 39, 0.9);
  animation: hx-blink 1.2s steps(2, jump-none) infinite;
}

.brf-foot { bottom: 0; height: 40px; border-top: 1px solid var(--hm-line); }

.brf-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;
}

.brf-wave i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: rgba(250, 167, 25, 0.7);
  transform: scaleY(0.25);
  animation: brf-wave 1.1s ease-in-out infinite;
}

.brf-wave i:nth-child(3n) { animation-duration: 0.8s; }
.brf-wave i:nth-child(4n) { animation-duration: 1.4s; }
.brf-wave i:nth-child(2n) { animation-delay: -0.4s; }
.brf-wave i:nth-child(5n) { animation-delay: -0.7s; }

@keyframes brf-wave { 50% { transform: scaleY(1); } }

/* the decrypt bar: fills as a new answer comes in */
.brf-prog {
  flex: 1;
  max-width: 180px;
  height: 2px;
  background: rgba(254, 238, 207, 0.08);
}

.brf-prog i {
  display: block;
  height: 100%;
  background: var(--gradient);
  transform-origin: left;
}

.brf-prog i.is-run { animation: brf-prog 0.7s var(--hm-ease) both; }

@keyframes brf-prog { from { transform: scaleX(0); } }

/* ---- the answer, on the screen ----------------------------------- */
.brf-a {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  position: relative;
  z-index: 1;
  padding: 72px clamp(28px, 4vw, 56px) 68px;
}

.brf-a[hidden] { display: none; }

.brf-a-cat {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--accent-2);
}

.brf-a-h {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text);
}

.brf-a-p {
  max-width: 50ch;
  margin-top: 18px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(254, 238, 207, 0.72);
}

/* ---- the answer as a console readout ------------------------------
   A small JavaScript object whose keys are plain words and whose values
   are plain English: code to look at, a sentence to read. The strings
   are the brightest thing in it; the syntax steps back. (The prose
   answer stays in the page, hidden, for screen readers and search.) */
.brf-prompt {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: 0.08em;
  color: var(--brand-orange);
}

.brf-code {
  margin: 20px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  line-height: 1.75;
  white-space: normal;
  color: var(--text);
  background: none;
  overflow: visible;
}

.brf-code code { display: block; font: inherit; }

/* one line of code; a long one wraps with a hanging indent */
.brf-code .ln {
  display: block;
  padding-left: 2ch;
  text-indent: -2ch;
}

.brf-code .ln--in { padding-left: 4ch; }

.t-c { color: rgba(254, 238, 207, 0.38); font-style: italic; }
.t-k { color: var(--brand-orange); }
.t-v { color: var(--text); }
.t-p { color: rgba(254, 238, 207, 0.4); }
.t-key { color: var(--accent-2); }
.t-s { color: var(--text); }
.t-b { color: var(--brand-orange); }

.brf-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.35em;
  vertical-align: -0.2em;
  background: linear-gradient(180deg, var(--brand-amber), var(--brand-orange) 45%, var(--brand-ember));
  animation: hx-caret 1.06s steps(1, end) infinite;
}

/* the readout prints line by line when a briefing opens */
.brf-a.is-in .brf-code .ln { animation: brf-line 0.45s ease both; }
.brf-a.is-in .brf-code .ln:nth-child(2) { animation-delay: 0.08s; }
.brf-a.is-in .brf-code .ln:nth-child(3) { animation-delay: 0.2s; }
.brf-a.is-in .brf-code .ln:nth-child(4) { animation-delay: 0.32s; }
.brf-a.is-in .brf-code .ln:nth-child(5) { animation-delay: 0.44s; }
.brf-a.is-in .brf-code .ln:nth-child(6) { animation-delay: 0.56s; }
.brf-a.is-in .brf-code .ln:nth-child(7) { animation-delay: 0.68s; }

@keyframes brf-line { from { opacity: 0; transform: translateX(-6px); } }

/* the question, as a call: ask("...") with the code parts faded */
.brf-qt-fn {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: 400;
  color: rgba(254, 238, 207, 0.28);
  transition: color 0.35s ease;
}

.brf-item.is-open .brf-q .brf-qt-fn { color: var(--brand-orange); }

.brf-a-link {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--accent-2);
}

.brf-a-link span { transition: transform 0.35s var(--hm-ease); }
.brf-a-link:hover span { transform: translateX(4px); }

.brf-a.is-in .brf-a-link { animation: brf-in 0.8s var(--hm-ease) 0.75s both; }
.brf-a-link > span:last-child { margin-left: 8px; }

@keyframes brf-in { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } }

@media (max-width: 900px) {
  .hm-faq-grid { grid-template-columns: 1fr; }
  .hm-faq-lead > p:last-child { grid-column: 1; grid-row: auto; justify-self: start; }
  .brf { grid-template-columns: 1fr; grid-template-rows: none; }
  .brf-screen { display: none; }
  .brf-a {
    grid-column: 1;
    grid-row: auto;
    padding: 6px 0 22px 16px;
    border-left: 1px solid rgba(250, 167, 25, 0.5);
    margin-top: 12px;
  }
  .brf-a-h { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brf-scan, .brf-wave i, .brf-rec { animation: none; }
  .brf-a.is-in .brf-a-link, .brf-prog i.is-run, .brf-a.is-in .brf-code .ln, .brf-caret { animation: none; }
}

/* ================================================================
   10 · LAUNCH: the console over the horizon
   A world far bigger than the frame sits below it, so all you see is
   its limb burning across the bottom of the page. Over it: the crew's
   go / no-go poll, the ignition (the project CTA) and the next kickoff
   window. Hover arms the ignition (the ring charges, the poll's last
   call flips to GO); a click lifts off before it opens Contact.
   ================================================================ */
.hm-launch {
  position: relative;
  min-height: min(100vh, 980px);
  padding: clamp(90px, 11vw, 160px) 0 clamp(120px, 16vw, 220px);
  overflow: hidden;
  isolation: isolate;
}

/* ---- the sky ---------------------------------------------------- */
.hm-launch-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hm-launch-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* the planned trajectory, faint and dashed */
.hm-arc-guide {
  fill: none;
  stroke: rgba(254, 238, 207, 0.12);
  stroke-width: 1;
  stroke-dasharray: 2 9;
  vector-effect: non-scaling-stroke;
}

/* the contrail: three lengths of the same line, heads together, so it
   is brightest at the craft and thins out behind it */
.hm-arc-trail {
  fill: none;
  stroke: url(#trail-g);
  stroke-linecap: round;
  stroke-dasharray: var(--L) 3;
  vector-effect: non-scaling-stroke;
  animation: hm-trail 11s linear infinite;
}

.hm-arc-trail.t1 { stroke-width: 2.4; opacity: 0.95; }
.hm-arc-trail.t2 { stroke-width: 1.6; opacity: 0.45; }
.hm-arc-trail.t3 { stroke-width: 1; opacity: 0.18; }

/* the head runs 0 -> 1 in the first 80% of the loop, then off the end */
@keyframes hm-trail {
  from { stroke-dashoffset: var(--L); }
  80% { stroke-dashoffset: calc(var(--L) - 1); }
  to { stroke-dashoffset: calc(var(--L) - 1.25); }
}

.hm-arc-craft { filter: drop-shadow(0 0 8px rgba(250, 167, 25, 0.9)); }

/* the ground: warm light where the console stands, fading out into the
   page ink, so the footer carries straight on */
.hm-launch-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75%;
  background:
    radial-gradient(ellipse 42% 50% at 50% 62%, rgba(229, 125, 35, 0.2), transparent 70%),
    radial-gradient(ellipse 75% 45% at 50% 72%, rgba(192, 69, 39, 0.1), transparent 75%);
  /* nothing reaches the section's edge: it ends on the page ink */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  transition: opacity 0.6s ease;
}

.hm-launch.is-armed .hm-launch-ground { opacity: 1.5; }

.hm-launch-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hm-launch-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.9s cubic-bezier(0.6, 0, 0.8, 0.4), opacity 0.7s ease;
}

.hm-launch-copy .hm-h2--xl { max-width: 17ch; text-wrap: balance; }

.hm-launch-copy > p:not(.hm-kicker) {
  max-width: 46ch;
  margin-top: 22px;
  font-size: 1.08rem;
  color: var(--muted);
}

/* ---- the console ------------------------------------------------ */
.hm-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  max-width: 1040px;
  margin-top: clamp(40px, 6vw, 72px);
}

.hm-console-panel {
  padding: 20px 22px;
  border: 1px solid var(--hm-line);
  border-radius: 18px;
  background: rgba(12, 5, 3, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  text-align: left;
}

.hm-console-h {
  margin-bottom: 14px;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: rgba(254, 238, 207, 0.45);
}

/* the poll: each station calls GO in turn */
.hm-poll ol { display: grid; gap: 9px; }

.hm-poll li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(254, 238, 207, 0.08);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.62);
}

.hm-poll li:last-child { padding-bottom: 0; border: 0; }

.hm-poll b {
  font-weight: 500;
  color: var(--accent-2);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.4s ease, transform 0.5s var(--hm-ease), color 0.3s ease;
}

.hm-launch.is-inview .hm-poll b { opacity: 1; transform: none; }
.hm-launch.is-inview .hm-poll li:nth-child(1) b { transition-delay: 0.5s; }
.hm-launch.is-inview .hm-poll li:nth-child(2) b { transition-delay: 0.85s; }
.hm-launch.is-inview .hm-poll li:nth-child(3) b { transition-delay: 1.2s; }
.hm-launch.is-inview .hm-poll li:nth-child(4) b { transition-delay: 1.55s; }
.hm-launch.is-inview .hm-poll li:nth-child(5) b { transition-delay: 1.95s; }

.hm-poll-you { color: var(--text) !important; }
.hm-poll-you b { color: rgba(254, 238, 207, 0.5); animation: hm-rung 1.2s ease-in-out infinite; }
.hm-launch.is-armed .hm-poll-you b { color: var(--accent-2); animation: none; transition-delay: 0s; }

/* the launch window */
.hm-window-t {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(254, 238, 207, 0.45);
}

.hm-window-t b {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hm-window-d {
  margin-top: 6px;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.5);
}

.hm-window-s {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--accent-2);
}

.hm-window-s i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(250, 167, 25, 0.8);
  animation: hm-rung 1.4s ease-in-out infinite;
}

/* ---- the ignition ------------------------------------------------ */
.hm-ignite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hm-ignite-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(200px, 20vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--on-accent);
  -webkit-tap-highlight-color: transparent;
}

/* the launch light: a soft column rising out of the ignition, behind
   everything; it flares when armed and blazes at liftoff */
.hm-ignite-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: -1;
  width: clamp(160px, 18vw, 260px);
  height: 130vh;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(250, 167, 25, 0.28), rgba(229, 125, 35, 0.08) 35%, transparent 80%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.9s var(--hm-ease);
}

.hm-launch.is-armed .hm-ignite-btn::before { opacity: 0.85; }
.hm-launch.is-lift .hm-ignite-btn::before { opacity: 1; transform: translateX(-50%) scaleX(1.6); }

.hm-ignite-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hm-ignite-ticks {
  transform-origin: 100px 100px;
  animation: hm-spin 60s linear infinite;
}

.hm-ignite-ticks line {
  stroke: rgba(254, 238, 207, 0.22);
  stroke-width: 1;
  transition: stroke 0.4s ease;
}

.hm-ignite-ticks line.maj { stroke: rgba(254, 238, 207, 0.5); }

.hm-ignite-track {
  fill: none;
  stroke: rgba(254, 238, 207, 0.08);
  stroke-width: 2;
}

.hm-ignite-charge {
  fill: none;
  stroke: url(#ign-g);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  transition: stroke-dashoffset 0.9s var(--hm-ease);
}

.hm-ignite-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 10px rgba(229, 125, 35, 0.08), 0 18px 50px -12px rgba(229, 125, 35, 0.7);
  transition: transform 0.5s var(--hm-ease), box-shadow 0.5s ease;
  animation: hm-breathe 3.2s ease-in-out infinite;
}

.hm-ignite-state {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  opacity: 0.7;
}

.hm-ignite-label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.1;
}

@keyframes hm-breathe { 50% { box-shadow: 0 0 0 16px rgba(229, 125, 35, 0.05), 0 18px 60px -12px rgba(229, 125, 35, 0.85); } }

/* armed: the ring charges, the ticks warm, the core leans in */
.hm-ignite-btn:hover .hm-ignite-charge,
.hm-ignite-btn:focus-visible .hm-ignite-charge,
.hm-ignite-btn.is-launch .hm-ignite-charge { stroke-dashoffset: 0; }

.hm-ignite-btn:hover .hm-ignite-ticks line,
.hm-ignite-btn:focus-visible .hm-ignite-ticks line { stroke: rgba(250, 167, 25, 0.55); }

.hm-ignite-btn:hover .hm-ignite-core,
.hm-ignite-btn:focus-visible .hm-ignite-core {
  transform: scale(1.05);
  animation: none;
  box-shadow: 0 0 0 14px rgba(229, 125, 35, 0.12), 0 22px 70px -10px rgba(250, 167, 25, 0.9);
}

.hm-ignite-btn:focus-visible { outline: none; }
.hm-ignite-btn:focus-visible .hm-ignite-track { stroke: rgba(250, 167, 25, 0.6); }

/* liftoff: the core kicks, a pressure wave leaves the ring, the page
   rises past (home.js opens Contact once it has) */
.hm-ignite-wave {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 2px solid rgba(250, 167, 25, 0.8);
  opacity: 0;
  pointer-events: none;
}

.hm-ignite-btn.is-launch .hm-ignite-core { animation: hm-kick 0.7s var(--hm-ease) both; }
.hm-ignite-btn.is-launch .hm-ignite-wave { animation: hm-wave-out 0.8s ease-out both; }
.hm-launch.is-lift .hm-launch-copy { transform: translateY(-40px); opacity: 0; }

@keyframes hm-kick { 30% { transform: scale(0.9); } 100% { transform: scale(1.12); } }
@keyframes hm-wave-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

@media (max-width: 900px) {
  .hm-console { grid-template-columns: 1fr 1fr; gap: 18px; }
  .hm-ignite { grid-column: 1 / -1; order: -1; margin-bottom: 10px; }
}

@media (max-width: 560px) {
  .hm-console { grid-template-columns: 1fr; }
}

/* ---- reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hx-grain { display: none; }
  .hm-stage { transform: none !important; }
  .hm-arc-trail, .hm-arc-craft { display: none; }
  .hm-fclock-ladder li.is-now, .hm-stage.is-live .hm-stage-st i, .hm-fclock.is-go .hm-fclock-row::after { animation: none; }
  .hx.is-born .hx-card-word span { animation: none; opacity: 1; }
  .hx-line > span,
  .hm-split-line > span { transform: none !important; transition: none !important; }
  .hx:not(.is-ready) .hx-eyebrow,
  .hx:not(.is-ready) .hx-sub,
  .hx:not(.is-ready) .hx-cta,
  .hx:not(.is-ready) .hx-say { opacity: 1; transform: none; }
  .hx-caret { animation: none; }
  .hm-dot::after { animation: none; display: none; }
  .hm-tl-ticker-row, .hm-comms-line::after, .hm-comms-signal i { animation: none; }
  .hm-odo-strip, .hm-dial-arc, .hm-dial-needle { transition: none; }
  .hm-dial-sweep { animation: none; }
  .hm-art *, .hm-ignite-ticks, .hm-ignite-core, .hm-arc-trail, .hx-dot, .hm-tx-wave i { animation: none !important; }
  .hm-mod-list button.is-active::after { animation: none; transform: scaleX(1); }
}

/* ================================================================
   THE WORX INSTRUMENT LAYER
   What makes this page mission control rather than a template: a
   stage rail, instrument-ruled headers, atmosphere-entry arcs between
   sections, drifting Martian dust, a targeting reticle, viewfinder
   frames on every film, and signals that decode as they arrive.
   ================================================================ */

.hm > section,
.hm > .hm-limb {
  position: relative;
  z-index: 1;
}

/* one vertical rhythm: two stages back to back share their spacing
   instead of stacking two full paddings into a dead band */
.hm > .section + .section {
  padding-top: calc(var(--section-pad) * 0.55);
}

/* ---- Martian dust: one fixed canvas under everything ---------- */
.hm-dust {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

/* ---- instrument-ruled section headers ------------------------- */
.hm-kicker {
  position: relative;
  flex-wrap: wrap;
}

.hm-ruler {
  display: block;
  /* it gives way before it wraps: on a narrow screen the ruler shortens
     to fit beside the stage name instead of dropping to its own line */
  flex: 0 1 auto;
  width: clamp(80px, 12vw, 180px);
  min-width: 28px;
  height: 9px;
  background:
    repeating-linear-gradient(90deg, rgba(254, 238, 207, 0.4) 0 1px, transparent 1px 9px) 0 100% / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(250, 167, 25, 0.9) 0 1px, transparent 1px 45px) 0 100% / 100% 9px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--hm-ease) 0.2s;
}

.hm-head--center .hm-ruler {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  transform-origin: center;
}

.is-inview .hm-ruler,
.hm-kicker.is-inview .hm-ruler {
  transform: none;
}

/* the stage name and its ruler stay on one line (home.js wraps them);
   the coordinate stamp is free to drop beneath */
.hm-kicker-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.hm-coord {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.4);
  font-variant-numeric: tabular-nums;
}

/* ---- atmosphere-entry arcs between sections -------------------- */
.hm-limb {
  height: clamp(90px, 14vw, 220px);
  margin: clamp(20px, 4vw, 60px) 0 calc(clamp(20px, 4vw, 60px) * -1);
  pointer-events: none;
}

.hm-limb svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hm-limb path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.hm-limb-line {
  stroke-width: 1.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.4s var(--hm-ease);
}

.hm-limb-glow {
  stroke-width: 26;
  opacity: 0;
  filter: blur(18px);
  transition: opacity 2.4s ease 0.6s;
}

.hm-limb.is-inview .hm-limb-line { stroke-dashoffset: 0; }
.hm-limb.is-inview .hm-limb-glow { opacity: 0.22; }

.hm-limb-tag {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  white-space: nowrap;
  color: rgba(254, 238, 207, 0.45);
  opacity: 0;
  transition: opacity 1s ease 1.4s;
}

.hm-limb.is-inview .hm-limb-tag { opacity: 1; }

/* ---- the mission rail ------------------------------------------ */
.hm-rail {
  position: fixed;
  right: clamp(12px, 1.6vw, 26px);
  top: 50%;
  z-index: 60;
  transform: translate(calc(100% + 40px), -50%);
  transition: transform 0.9s var(--hm-ease);
}

.hm-rail.is-on {
  transform: translate(0, -50%);
}

.hm-rail ol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hm-rail ol::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(254, 238, 207, 0.14);
}

.hm-rail-fill {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 1px;
  height: calc(100% - 8px);
  background: var(--gradient);
  transform: scaleY(var(--rail, 0));
  transform-origin: top;
  pointer-events: none;
}

.hm-rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 16px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(254, 238, 207, 0.4);
}

.hm-rail a span {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s ease, transform 0.4s var(--hm-ease);
  white-space: nowrap;
  text-transform: uppercase;
}

.hm-rail a::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(254, 238, 207, 0.35);
  border-radius: 50%;
  background: #120704;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s var(--hm-ease);
}

.hm-rail a.is-past::after { border-color: rgba(250, 167, 25, 0.7); background: rgba(250, 167, 25, 0.35); }

.hm-rail a.is-current { color: var(--text); }

/* the live stage's name rides beside its node only where the margin is
   wide enough to hold it clear of the content; narrower, the names show
   when the rail is pointed at (the limb tags announce each arrival) */
@media (min-width: 1600px) {
  .hm-rail a.is-current span { opacity: 1; transform: none; }
}
.hm-rail a.is-current::after {
  border-color: var(--accent-2);
  background: var(--accent-2);
  box-shadow: 0 0 12px 2px rgba(250, 167, 25, 0.7);
  transform: scale(1.25);
}

.hm-rail:hover a span { opacity: 1; transform: none; }
.hm-rail a:hover,
.hm-rail a:focus-visible { color: var(--text); }

@media (max-width: 1100px), (hover: none) {
  .hm-rail { display: none; }
}

/* ---- the mission dock (touch + narrow screens) ------------------
   The rail's stand-in where the rail hides: a smoked-glass pill bottom
   left, level with the contact beacon on the right. Live stage number
   and name, a ring for how far down the page you are. Tapping it opens
   a sheet of every stage (home.js). */
.hm-dock,
.hm-sheet {
  --hm-ease: cubic-bezier(0.135, 0.9, 0.15, 1);
}

.hm-dock {
  position: fixed;
  left: clamp(14px, 4vw, 32px);
  bottom: calc(clamp(16px, 4vw, 32px) + 6px + env(safe-area-inset-bottom, 0px));
  z-index: 121;
  display: none;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.7s var(--hm-ease);
}

@media (max-width: 1100px), (hover: none) {
  .hm-dock { display: block; }
}

.hm-dock.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* the footer carries the same links; the menu and the contact console
   own the screen while they are open */
.hm-dock.is-tucked,
.nav-open .hm-dock,
body:has(.qc-dock.is-open) .hm-dock {
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.hm-dock-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  max-width: calc(100vw - 140px);
  padding: 0 14px 0 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(21, 9, 5, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(254, 238, 207, 0.06);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the site's gradient hairline, same as every other control */
.hm-dock-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(254, 238, 207, 0.16), rgba(254, 238, 207, 0.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* the gradient ring: lit while focused or open, and flashed briefly
   each time a new stage comes aboard */
.hm-dock-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hm-dock-btn:focus-visible { outline: none; }
.hm-dock-btn:focus-visible::after,
.hm-dock-btn[aria-expanded="true"]::after { opacity: 1; }
.hm-dock.is-tick .hm-dock-btn::after { animation: hm-dock-tick 1.6s ease; }
@keyframes hm-dock-tick { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }

.hm-dock-ring {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
}

.hm-dock-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hm-dock-ring circle {
  fill: none;
  stroke: rgba(254, 238, 207, 0.12);
  stroke-width: 1.5;
}

.hm-dock-ring .hm-dock-arc {
  stroke: var(--accent-2);
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(250, 167, 25, 0.55));
}

.hm-dock-ring b {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent-2);
}

.hm-dock-ring b::after {
  content: "%";
  font-size: 0.8em;
  opacity: 0.6;
}

.hm-dock-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  line-height: 1.15;
}

.hm-dock-txt small {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.42);
}

.hm-dock-txt > span {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hm-dock-caret {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(254, 238, 207, 0.55);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--hm-ease);
}

.hm-dock-btn[aria-expanded="true"] .hm-dock-caret { transform: rotate(180deg); }

/* folded while you read downwards: just the ring */
.hm-dock-txt,
.hm-dock-caret {
  max-width: 220px;
  transition: max-width 0.6s var(--hm-ease), opacity 0.35s ease;
}
.hm-dock-btn { transition: padding 0.6s var(--hm-ease), gap 0.6s var(--hm-ease); }
.hm-dock.is-shy .hm-dock-btn { gap: 0; padding: 0 6px; }
.hm-dock.is-shy .hm-dock-txt,
.hm-dock.is-shy .hm-dock-caret { max-width: 0; opacity: 0; }

/* ---- the stage sheet --------------------------------------------- */
html.hm-sheet-lock,
html.hm-sheet-lock body { overflow: hidden; }

.hm-sheet {
  position: fixed;
  inset: 0;
  z-index: 140;
}

.hm-sheet[hidden] { display: none; }

.hm-sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 3, 2, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hm-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(86vh, 86dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px clamp(18px, 5vw, 36px) calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(229, 125, 35, 0.1), transparent 60%),
    rgba(21, 9, 5, 0.94);
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(250, 167, 25, 0.28);
  transform: translateY(100%);
  transition: transform 0.55s var(--hm-ease);
}

.hm-sheet-panel.is-drag { transition: none; }
.hm-sheet.is-open .hm-sheet-scrim { opacity: 1; }
.hm-sheet.is-open .hm-sheet-panel { transform: none; }

/* tablets: a floating card rather than a full-width sheet */
@media (min-width: 640px) {
  .hm-sheet-panel {
    left: 50%;
    right: auto;
    bottom: 24px;
    width: min(600px, calc(100% - 48px));
    border-radius: 22px;
    transform: translate(-50%, calc(100% + 40px));
  }
  .hm-sheet.is-open .hm-sheet-panel { transform: translate(-50%, 0); }
}

.hm-sheet-grab {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 4px;
  background: rgba(254, 238, 207, 0.2);
}

.hm-sheet-head {
  position: relative;
  padding-right: 48px;
  margin-bottom: 16px;
}

.hm-sheet-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(254, 238, 207, 0.55);
}

.hm-sheet-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px 1px rgba(250, 167, 25, 0.7);
}

.hm-sheet-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.hm-sheet-x {
  position: absolute;
  top: -2px;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(254, 238, 207, 0.14);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.hm-sheet-x svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.hm-sheet-x:focus-visible { outline: none; border-color: var(--accent-2); }

.hm-sheet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* an odd last stage takes the whole row */
.hm-sheet-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.hm-sheet-list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.6s var(--hm-ease);
}

.hm-sheet.is-open .hm-sheet-list li { opacity: 1; transform: none; }
.hm-sheet.is-open .hm-sheet-list li:nth-child(n) { transition-delay: calc(0.08s + var(--n, 0) * 0.025s); }

.hm-sheet-list a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 58px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(254, 238, 207, 0.035);
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s ease;
}

.hm-sheet-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: rgba(254, 238, 207, 0.08);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.hm-sheet-list a:active { background: rgba(254, 238, 207, 0.07); }
.hm-sheet-list a:focus-visible { outline: none; }
.hm-sheet-list a:focus-visible::before,
.hm-sheet-list a.is-current::before { background: var(--gradient); }
.hm-sheet-list a.is-current { background: rgba(229, 125, 35, 0.1); }

.hm-sheet-list b {
  flex: none;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(254, 238, 207, 0.4);
}

.hm-sheet-list a.is-past b,
.hm-sheet-list a.is-current b { color: var(--accent-2); }

.hm-sheet-list span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

.hm-sheet-list small {
  font-family: var(--font-body, inherit);
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
}

.hm-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(254, 238, 207, 0.08);
}

.hm-sheet-comms {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-sheet-comms a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(254, 238, 207, 0.14);
  border-radius: 50%;
  color: var(--text);
}

.hm-sheet-comms a:focus-visible { outline: none; border-color: var(--accent-2); }

.hm-sheet-comms svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.hm-sheet-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--gradient);
  color: var(--on-accent, #1a0b05);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.hm-sheet-cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 340px) {
  .hm-sheet-list { gap: 6px; }
  .hm-sheet-list a { padding: 10px; gap: 8px; }
  .hm-sheet-list span { font-size: 0.88rem; }
  .hm-sheet-comms a { width: 38px; height: 38px; }
  .hm-sheet-cta { padding: 0 14px; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-dock, .hm-sheet-scrim, .hm-sheet-panel, .hm-sheet-list li { transition: opacity 0.15s ease; }
  .hm-dock, .hm-sheet-list li { transform: none; }
  .hm-dock-txt, .hm-dock-caret, .hm-dock-btn { transition: none; }
  .hm-dock.is-tick .hm-dock-btn::after { animation: none; }
}

/* ---- viewfinder frames on the films and worlds ------------------ */
.hm-case-media,
.hm-mod-visual {
  --vf: rgba(254, 238, 207, 0.55);
}

.hm-vf {
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--vf), var(--vf)) 0 0 / 16px 1px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 0 0 / 1px 16px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 100% 0 / 16px 1px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 100% 0 / 1px 16px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 0 100% / 16px 1px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 0 100% / 1px 16px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 100% 100% / 16px 1px no-repeat,
    linear-gradient(var(--vf), var(--vf)) 100% 100% / 1px 16px no-repeat;
  opacity: 0.7;
  transition: inset 0.6s var(--hm-ease), opacity 0.4s ease;
}

.hm-case > a:hover .hm-vf { inset: 20px; opacity: 1; }

.hm-vf-rec {
  position: absolute;
  left: 22px;
  top: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(254, 238, 207, 0.8);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hm-vf-rec::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-ember);
  box-shadow: 0 0 8px rgba(192, 69, 39, 0.9);
  animation: hx-blink 1.2s steps(2, jump-none) infinite;
}

.hm-case-media.is-live .hm-vf-rec { opacity: 1; }

/* a scan line sweeping a film when you target it */
.hm-case-media::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(250, 167, 25, 0.12), transparent);
  transform: translateY(-110%);
  pointer-events: none;
}

.hm-case > a:hover .hm-case-media::before {
  animation: hm-scan 1.6s var(--hm-ease);
}

@keyframes hm-scan { to { transform: translateY(420%); } }

/* ---- incoming transmission line -------------------------------- */
.hm-tx-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: rgba(254, 238, 207, 0.45);
}

.hm-tx-meta b {
  font-weight: 500;
  color: var(--accent-2);
}

@media (prefers-reduced-motion: reduce) {
  .hm-dust { display: none; }
  .hm-limb-line { stroke-dashoffset: 0; transition: none; }
  .hm-ruler { transform: none; transition: none; }
  .hm-case-media::before { display: none; }
}

/* ================================================================
   ONE HOVER LANGUAGE
   The site's hairline of the brand gradient (as components.css draws it
   on every card): it fades in around whatever you can press or point at
   on this page, following its rounded corners. home.js adds the
   .hm-ring span where a pseudo-element is already in use.
   ================================================================ */
.hm-ring,
.bm::after,
.hm-round::after,
.hm-note-img::after,
.hm-case--more > a::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* inside a clipping frame the ring sits on the frame's inner edge */
.hm-ring,
.hm-note-img::after { inset: 0; }

.hm-note-img { position: relative; transition: border-color 0.35s ease; }
.hm-case--more > a { position: relative; transition: border-color 0.35s ease; }
.hm-case-media { transition: border-color 0.35s ease; }

.bm:hover::after,
.hm-round:hover::after,
.hm-round:focus-visible::after,
.hm-note:hover .hm-note-img::after,
.hm-note:focus-visible .hm-note-img::after,
.hm-case--more > a:hover::after,
.hm-case--more > a:focus-visible::after,
.hm-case > a:hover .hm-ring,
.hm-case > a:focus-visible .hm-ring { opacity: 1; }

.hm-note:hover .hm-note-img,
.hm-note:focus-visible .hm-note-img,
.hm-case--more > a:hover,
.hm-case--more > a:focus-visible,
.hm-case > a:hover .hm-case-media,
.hm-case > a:focus-visible .hm-case-media { border-color: transparent; }

/* the cards carry their own ring, so keyboard focus uses it instead of
   an outline drawn round the whole link */
.hm-case > a:focus-visible,
.hm-note:focus-visible { outline: none; }
.hm-case > a:focus-visible h3,
.hm-note:focus-visible h3 { color: var(--accent-2); }

/* ================================================================
   ENTRANCE CHOREOGRAPHY
   One calm arrival for every stage's content (home.js .hm-rise, set only
   when motion is welcome): after the headline's lines rise, the body
   follows up out of the dark, siblings a beat apart (--rd).
   ================================================================ */
.hm-rise {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s ease var(--rd, 0s), transform 1.25s var(--hm-ease) var(--rd, 0s);
}

.hm-rise.is-risen {
  opacity: 1;
  transform: none;
}

/* ================================================================
   LARGE AND ULTRAWIDE SCREENS
   Past 1800px the whole page scales up as one piece (the type is rem-
   and clamp-based, so it grows in proportion) and the content column
   opens up with it, so a wide monitor reads like a bigger cinema
   screen, not a laptop layout floating in the middle.
   ================================================================ */
@media (min-width: 1800px) {
  html:has(body[data-page="home"]) { font-size: clamp(16px, 0.25vw + 11.6px, 20px); }
  .hm { --hm-wrap: min(84rem, 100vw - 260px); }
  .hm-h2 { font-size: clamp(2.1rem, 4.6vw, 4.6rem); }
  .hm-h2--xl { font-size: clamp(2.6rem, 6vw, 6.2rem); }
}

@media (min-width: 2400px) {
  .hm { --hm-wrap: min(92rem, 100vw - 320px); }
}