/* ==========================================================================
   LUMEN Hero Directions — page styles (kit/hero-directions.html)
   A design canvas with three fixed 1440 × 900 artboards exploring the D01
   Home hero: 1a aperture + audience router, 1b annotated device, 1c editorial
   OR Dark. The artboards are mock-ups at desktop size; on narrow screens the
   canvas scrolls horizontally, like a design file.

   Intro motion: .motion-* classes below hold the closed state; the section's
   [data-motion="open"] (set by hero-directions.js) transitions them open.
   ========================================================================== */

body {
  background: #E4E6E1;
  /* The canvas disables tabular figures by default; elements that set the
     `font` shorthand reset this, so explicit tabular-nums still apply. */
  font-feature-settings: "tnum" 0;
}

a { text-decoration: none; }

@keyframes lumenTravel {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(1328px); opacity: 0; }
}

/* ── Motion states ──────────────────────────────────────────────────────── */

.motion-reveal {
  display: block;
  transform: translateY(105%);
  transition: transform 1100ms var(--ease-diastole) var(--motion-delay, 0ms);
}

.motion-fade {
  opacity: 0;
  transition: opacity 830ms var(--ease-diastole) var(--motion-delay, 0ms);
}
.motion-fade--rise {
  transform: translateY(16px);
  transition:
    opacity 830ms var(--ease-diastole) var(--motion-delay, 0ms),
    transform 830ms var(--ease-diastole) var(--motion-delay, 0ms);
}

.motion-aperture {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1400ms var(--ease-diastole) var(--motion-delay, 0ms);
}

.motion-draw {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1400ms var(--ease-diastole) var(--motion-delay, 0ms);
}

[data-motion="open"] .motion-reveal,
[data-motion="open"] .motion-fade--rise { transform: translateY(0); }
[data-motion="open"] .motion-fade       { opacity: 1; }
[data-motion="open"] .motion-aperture   { clip-path: circle(50% at 50% 50%); }
[data-motion="open"] .motion-draw       { transform: scaleX(1); }

.motion-delay-100 { --motion-delay: 100ms; }
.motion-delay-150 { --motion-delay: 150ms; }
.motion-delay-300 { --motion-delay: 300ms; }
.motion-delay-320 { --motion-delay: 320ms; }

/* One-off CTA pulse; restarted on "Replay motion" */
.hero-cta { position: relative; }

.hero-pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  pointer-events: none;
  animation: lumenPulse 1000ms var(--ease-diastole) 1.3s 1 both;
}
.hero-pulse--glow { animation-name: lumenPulseGlow; }

/* ── Canvas frame ───────────────────────────────────────────────────────── */

.canvas {
  padding: 48px 56px 56px;
  border-bottom: 1px solid var(--ink-a08);
}

.canvas__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1440px;
  margin: 0 0 28px;
}

.canvas__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.canvas__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.canvas__badge,
.canvas__badge:hover {
  padding: 4px 8px;
  border-radius: var(--radius-s);
  background: var(--graphite-900);
  color: var(--graphite-0);
  font: 500 11px/1 'Geist Mono', monospace;
}

.canvas__title {
  font: 600 15px/1.2 'Geist', sans-serif;
  color: var(--graphite-900);
}

.canvas__text {
  margin: 0;
  max-width: 880px;
  font: 400 15px/1.55 'Geist', sans-serif;
  color: var(--graphite-600);
  text-wrap: pretty;
}

.canvas__replay {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--ink-a20);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
  color: var(--graphite-900);
  font: 500 14px/1 'Geist', sans-serif;
  cursor: pointer;
}
.canvas__replay:hover { border-color: var(--graphite-900); }

.canvas__boards {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.canvas__next {
  margin: 28px 0 0;
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--graphite-600);
}

.board {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board__caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 400 13px/1.3 'Geist', sans-serif;
  color: var(--graphite-600);
}

.board__tag,
.board__tag:hover {
  padding: 4px 8px;
  border-radius: var(--radius-s);
  background: var(--ink-a08);
  color: var(--graphite-900);
  font: 500 11px/1 'Geist Mono', monospace;
}

.artboard {
  position: relative;
  width: 1440px;
  height: 900px;
  overflow: hidden;
  border: 1px solid var(--ink-a08);
  border-radius: var(--radius-m);
  background: var(--graphite-50);
}
.artboard--dark {
  border: 0;
  background: var(--graphite-950);
  color: var(--graphite-mist);
}

/* ── Mock site header (static drawing of partials/site-header) ──────────── */

.mock-header {
  position: relative;
  z-index: 3;
  --mock-pad: 60px;
  --mock-line: var(--ink-a10);
}
.mock-header--dark {
  --mock-pad: 56px;
  --mock-line: var(--mist-a10);
}

.mock-header__util {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mock-pad);
  border-bottom: 1px solid var(--mock-line);
  font: 400 14px/1 'Geist', sans-serif;
  color: var(--graphite-600);
}
.mock-header--dark .mock-header__util { color: var(--mist-400); }

.mock-header__region {
  font: 400 12px/1 'Geist Mono', monospace;
  letter-spacing: .04em;
}

.mock-header__util-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mock-header__audience {
  display: flex;
  padding: 2px;
  border: 1px solid var(--ink-a14);
  border-radius: var(--radius-pill);
  font-size: 13px;
}
.mock-header--dark .mock-header__audience { border-color: rgba(232, 236, 234, .16); }

.mock-header__audience-option {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--graphite-600);
}
.mock-header__audience-option.is-active {
  background: var(--graphite-900);
  color: var(--graphite-50);
}
.mock-header--dark .mock-header__audience-option { color: var(--mist-400); }
.mock-header--dark .mock-header__audience-option.is-active {
  background: var(--graphite-mist);
  color: var(--graphite-950);
}

.mock-header__bar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--mock-pad);
  border-bottom: 1px solid var(--mock-line);
}

.mock-header__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.mock-header__wordmark {
  font: 600 19px/1 'Geist', sans-serif;
  letter-spacing: .22em;
  color: var(--graphite-900);
}

.mock-header__sub {
  font: 500 10px/1 'Geist Mono', monospace;
  letter-spacing: .18em;
  color: var(--graphite-500);
}

.mock-header__nav {
  display: flex;
  gap: 36px;
  font: 500 16px/1 'Geist', sans-serif;
  color: var(--graphite-900);
}

.mock-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  font: 500 15px/1 'Geist', sans-serif;
  color: var(--graphite-900);
}

.mock-header__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--graphite-900);
  border-radius: var(--radius-pill);
}

.mock-header--dark .mock-header__wordmark,
.mock-header--dark .mock-header__nav,
.mock-header--dark .mock-header__actions { color: var(--graphite-mist); }
.mock-header--dark .mock-header__sub { color: var(--mist-400); }
.mock-header--dark .mock-header__cta { border-color: rgba(232, 236, 234, .6); }

/* Kit pill as drawn inside the artboards */
.mock-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 10px;
  border-radius: var(--radius-pill);
  background: var(--graphite-900);
  color: var(--graphite-50);
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .06em;
}
.mock-pill__mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--scrub-300);
  box-shadow: inset 0 0 0 2.5px var(--graphite-900), inset 0 0 0 4px var(--scrub-300);
}
.mock-pill--router { right: 20px; bottom: 148px; }
.mock-pill--corner { right: 20px; bottom: 14px; }
.mock-pill--light {
  right: 20px;
  top: 128px;
  background: var(--graphite-mist);
  color: var(--graphite-950);
}
.mock-pill--light .mock-pill__mark {
  border-color: var(--scrub-600);
  box-shadow: inset 0 0 0 2.5px var(--graphite-mist), inset 0 0 0 4px var(--scrub-600);
}

/* Headline line mask (the text rises out of it) */
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-line--pb4  { padding-bottom: 4px; }
.hero-line--pb6  { padding-bottom: 6px; }
.hero-line--pb8  { padding-bottom: 8px; }
.hero-line--pb10 { padding-bottom: 10px; }
.hero-line--pb18 { padding-bottom: 18px; }
.hero-line--end  { text-align: right; }

/* Citation marker */
.cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  vertical-align: 4px;
  border: 1px solid rgba(10, 18, 22, .28);
  border-radius: var(--radius-s);
  background: var(--graphite-0);
  color: var(--graphite-900);
  font: 500 11px/1 'Geist Mono', monospace;
  cursor: pointer;
}
button.cite:hover {
  border-color: var(--scrub-600);
  color: var(--scrub-600);
}
.cite--dark {
  border-color: rgba(232, 236, 234, .35);
  background: none;
  color: var(--graphite-mist);
  cursor: auto;
}

/* Study card popover */
.study-card {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 5;
  width: 400px;
  padding: 20px 22px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-m);
  background: var(--graphite-0);
  box-shadow: var(--elevation-3);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.study-card--inline {
  gap: 12px;
  font: 400 14px/1.4 'Geist', sans-serif;
}

.study-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}
.study-card--inline .study-card__head { align-items: normal; }

.study-card__close {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--graphite-600);
  font: 500 14px/1 'Geist Mono', monospace;
  cursor: pointer;
}
.study-card__close--plain {
  padding: 0;
  font: inherit;
}

.study-card__title {
  font: 500 17px/1.3 'Geist', sans-serif;
  color: var(--graphite-900);
}

.study-card__facts {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  font: 400 14px/1.4 'Geist', sans-serif;
}

.study-card__key { color: var(--graphite-500); }
.study-card__num { font-variant-numeric: tabular-nums; }

.study-card__result {
  font: 500 14px/1.4 'Geist Mono', monospace;
  color: var(--graphite-900);
}

.study-card__design { color: var(--graphite-600); }

/* The 1b card sits inside the proof paragraph and takes its text colour */
.study-card--inline .study-card__title,
.study-card--inline .study-card__result { color: inherit; }

.study-card__ref {
  padding-top: 12px;
  border-top: 1px solid var(--ink-a10);
  font: 400 12px/1.45 'Geist Mono', monospace;
  color: var(--graphite-500);
}
.study-card__ref--tight { padding-top: 10px; }

/* ── 1a Aperture + audience router ──────────────────────────────────────── */

.calib-corner {
  position: absolute;
  top: 128px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--graphite-900);
  opacity: .5;
}
.calib-corner--left  { left: 40px;  border-left: 1px solid var(--graphite-900); }
.calib-corner--right { right: 40px; border-right: 1px solid var(--graphite-900); }

.calib-ruler {
  position: absolute;
  left: 28px;
  top: 150px;
  bottom: 150px;
  width: 8px;
  background: repeating-linear-gradient(180deg, rgba(10, 18, 22, .35) 0 1px, transparent 1px 12px);
}

.hero-aperture__eyebrow {
  position: absolute;
  left: 60px;
  top: 168px;
}

.hero-aperture__title {
  position: absolute;
  left: 56px;
  top: 200px;
  margin: 0;
  font: 500 132px/.94 'Geist', sans-serif;
  letter-spacing: -.045em;
  color: var(--graphite-900);
}

.hero-aperture__accent {
  font: italic 400 148px/.9 'Instrument Serif', serif;
  letter-spacing: -.02em;
}

/* z-index keeps the open study card above the CTA and trust rows (in the
   DC original the card slid underneath them and its × was not clickable). */
.hero-aperture__proof {
  --motion-delay: 600ms;
  position: absolute;
  z-index: 4;
  left: 60px;
  top: 486px;
  width: 640px;
}

.hero-aperture__proof-text {
  margin: 0;
  font: 400 21px/1.45 'Geist', sans-serif;
  color: var(--graphite-750);
  text-wrap: pretty;
}

.hero-aperture__actions {
  --motion-delay: 750ms;
  position: absolute;
  left: 60px;
  top: 590px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-aperture__trust {
  --motion-delay: 900ms;
  position: absolute;
  left: 60px;
  top: 672px;
  font: 400 12px/1 'Geist Mono', monospace;
  letter-spacing: .04em;
  color: var(--graphite-600);
}

.trust-list {
  display: flex;
  gap: 18px;
}

.trust-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-list__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--graphite-600);
  border-radius: 50%;
}

.aperture-ring {
  position: absolute;
  right: 84px;
  top: 150px;
  width: 560px;
  height: 560px;
}

.aperture-ring__axis {
  position: absolute;
  background: var(--ink-a14);
}
.aperture-ring__axis--x { left: -40px; right: -40px; top: 50%; height: 1px; }
.aperture-ring__axis--y { top: -40px; bottom: -40px; left: 50%; width: 1px; }

.aperture-ring__ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(10, 18, 22, .55) 0 .35deg, transparent .35deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 68.6%, #000 69%, #000 71.4%, transparent 71.8%);
  mask: radial-gradient(circle, transparent 68.6%, #000 69%, #000 71.4%, transparent 71.8%);
  transform: scale(1.16);
}

.aperture-ring__circle {
  position: absolute;
  border-radius: 50%;
}
.aperture-ring__circle--outer { inset: 0;    border: 1px solid var(--ink-a16); }
.aperture-ring__circle--inner { inset: 34px; border: 1px solid var(--ink-a12); }

.aperture-ring__photo {
  position: absolute;
  inset: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--sage-200) 0 12px, var(--sage-250) 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aperture-ring__highlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .55), transparent 60%);
}

.aperture-ring__caption {
  position: relative;
  max-width: 240px;
  text-align: center;
  font: 500 12px/1.5 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--sage-800);
}

.aperture-ring__label {
  position: absolute;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-600);
}
.aperture-ring__label--tolerance {
  right: -10px;
  top: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.aperture-ring__label--radius { left: -54px; bottom: 60px; }

.aperture-ring__leader {
  width: 44px;
  height: 1px;
  background: var(--graphite-600);
}

/* Audience router tabs */
.role-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 128px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-hairline);
  background: var(--graphite-0);
}

.role-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 32px;
  border: 0;
  border-right: 1px solid var(--ink-a10);
  background: var(--graphite-50);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-2);
  --role-color: var(--graphite-600);
}
.role-tab[aria-selected="true"] {
  background: var(--graphite-0);
  --role-color: var(--graphite-900);
}
.role-tab:hover { background: var(--graphite-25); }

.role-tab__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: transparent;
  transition: background var(--dur-3);
}
.role-tab[aria-selected="true"] .role-tab__bar { background: var(--scrub-600); }

.role-tab__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 12px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.role-tab__arrow {
  font-size: 15px;
  color: var(--role-color);
}

.role-tab__label {
  font: 500 18px/1.2 'Geist', sans-serif;
  color: var(--role-color);
}

.role-tab__sub {
  font: 400 14px/1.3 'Geist', sans-serif;
  color: var(--graphite-500);
}

/* ── 1b Annotated device ────────────────────────────────────────────────── */

.hero-device__copy {
  position: absolute;
  left: 60px;
  top: 176px;
  width: 580px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-device__title {
  margin: 0;
  font: 500 92px/.96 'Geist', sans-serif;
  letter-spacing: -.045em;
}

.hero-device__accent {
  font: italic 400 104px/.9 'Instrument Serif', serif;
  letter-spacing: -.02em;
}

.hero-device__proof {
  position: relative;
  margin: 0;
  max-width: 520px;
  font: 400 20px/1.5 'Geist', sans-serif;
  color: var(--graphite-750);
  text-wrap: pretty;
}

.hero-device__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.device-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.device-facts__item {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--ink-a10);
}
.device-facts__item:first-child { padding-left: 0; }
.device-facts__item:last-child  { border-right: 0; }

.device-facts__key {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.device-facts__value { font: 500 15px/1.3 'Geist', sans-serif; }

.hero-device__footnote {
  position: absolute;
  left: 60px;
  bottom: 22px;
  font: 400 12px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

.device-figure {
  position: absolute;
  left: 690px;
  top: 144px;
  width: 700px;
  height: 700px;
  overflow: hidden;
  border: 1px solid var(--ink-a10);
  border-radius: var(--radius-l);
  background-color: var(--graphite-0);
  background-image:
    linear-gradient(var(--ink-a04) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-a04) 1px, transparent 1px);
  background-size: 20px 20px;
}

.device-figure__head {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 18px;
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

.device-figure__device {
  position: absolute;
  left: 70px;
  top: 120px;
  width: 420px;
  height: 420px;
}

.device-figure__ticks {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--ink-a50) 0 .4deg, transparent .4deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 70.5%, transparent 71%);
  mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 70.5%, transparent 71%);
  transform: scale(1.2);
}

.device-figure__circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ink-a16);
}

.device-figure__render {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--sage-100) 0 10px, var(--sage-150) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-figure__caption {
  max-width: 200px;
  text-align: center;
  font: 500 12px/1.5 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-600);
}

.device-figure__axis {
  position: absolute;
  background: var(--ink-a12);
}
.device-figure__axis--x { left: -30px; right: -30px; top: 50%; height: 1px; }
.device-figure__axis--y { top: -30px; bottom: -30px; left: 50%; width: 1px; }

/* Scale bar */
.device-figure__scale {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 44px;
  height: 14px;
}
.device-figure__scale > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.device-figure__scale-minor { height: 6px;  background: repeating-linear-gradient(90deg, rgba(10, 18, 22, .45) 0 1px, transparent 1px 12px); }
.device-figure__scale-major { height: 12px; background: repeating-linear-gradient(90deg, rgba(10, 18, 22, .7) 0 1px, transparent 1px 120px); }
.device-figure__scale-base  { height: 1px;  background: var(--ink-a30); }

.device-figure__scale-labels {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* Annotation: dot at (--x, --y), leader line to the label column at 516px.
   --i staggers the draw-in. */
.anno {
  --anno-delay: calc(600ms + var(--i) * 180ms);
  --anno-label-delay: calc(1100ms + var(--i) * 180ms);
  --anno-accent: var(--graphite-900);
  --anno-border: var(--ink-a14);
}
.anno.is-active {
  --anno-accent: var(--scrub-600);
  --anno-border: var(--graphite-900);
}

.anno__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--graphite-900);
  border-radius: 50%;
  background: var(--graphite-0);
  box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 6px var(--anno-accent);
  opacity: 0;
  transition: opacity 320ms var(--anno-delay);
}

.anno__line {
  position: absolute;
  left: calc(var(--x) + 7px);
  top: var(--y);
  width: calc(516px - var(--x) - 7px);
  height: 1px;
  background: var(--graphite-900);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 830ms var(--ease-diastole) var(--anno-delay);
}

.anno__label {
  position: absolute;
  left: 516px;
  top: var(--label-y);
  width: 164px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--anno-border);
  border-radius: var(--radius-m);
  background: var(--graphite-0);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
  outline-offset: 2px;
  opacity: 0;
  transition: opacity 560ms var(--anno-label-delay), border-color 200ms;
}

[data-motion="open"] .anno__dot,
[data-motion="open"] .anno__label { opacity: 1; }
[data-motion="open"] .anno__line  { transform: scaleX(1); }

.anno__index {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .06em;
  color: var(--graphite-500);
}

.anno__title {
  font: 500 14px/1.25 'Geist', sans-serif;
  color: var(--graphite-900);
}

.anno__spec {
  display: none;
  font: 400 13px/1.35 'Geist Mono', monospace;
  color: var(--graphite-750);
}
.anno.is-active .anno__spec { display: inline; }

/* ── 1c Editorial, OR Dark ──────────────────────────────────────────────── */

/* Concentric rings centred at (1180px, 300px) */
.orbit {
  position: absolute;
  left: 1180px;
  top: 300px;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
}
.orbit--outer { --size: 1000px; border: 1px solid rgba(232, 236, 234, .07); }
.orbit--mid   { --size: 760px;  border: 1px solid rgba(232, 236, 234, .08); }
.orbit--glow  { --size: 520px;  border: 1px solid rgba(82, 224, 168, .18); }
.orbit--ticks {
  --size: 640px;
  background: repeating-conic-gradient(rgba(232, 236, 234, .28) 0 .3deg, transparent .3deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 69%, #000 69.5%, #000 71.5%, transparent 72%);
  mask: radial-gradient(circle, transparent 69%, #000 69.5%, #000 71.5%, transparent 72%);
}

.hero-editorial__eyebrow {
  position: absolute;
  left: 56px;
  top: 150px;
  color: var(--mist-400);
}
.hero-editorial__eyebrow .eyebrow__rule {
  background: var(--mist-400);
  opacity: 1;
}

.hero-editorial__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 176px;
  margin: 0;
  padding: 0 56px;
}

.hero-editorial__line-1 {
  font: 500 196px/.92 'Geist', sans-serif;
  letter-spacing: -.055em;
  color: var(--graphite-mist);
}

.hero-editorial__line-2 {
  font: italic 400 206px/.86 'Instrument Serif', serif;
  letter-spacing: -.025em;
  color: var(--graphite-mist);
}

/* The lumen channel between the two headline lines */
.lumen-channel {
  position: relative;
  display: block;
  height: 1px;
  margin: 18px 0 22px;
  background: rgba(82, 224, 168, .28);
}

.lumen-channel__fill {
  --motion-delay: 400ms;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--scrub-300);
  opacity: .7;
}

.lumen-channel__dot {
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--scrub-300);
  box-shadow: 0 0 14px 3px rgba(82, 224, 168, .55);
  animation: lumenTravel 7s cubic-bezier(.45, 0, .2, 1) 2s infinite both;
}

.hero-editorial__footer {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 40px;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: end;
}

.hero-editorial__lead {
  --motion-delay: 700ms;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero-editorial__proof {
  margin: 0;
  max-width: 480px;
  font: 400 19px/1.5 'Geist', sans-serif;
  color: var(--mist-200);
  text-wrap: pretty;
}

.hero-editorial__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-cta--glow {
  padding: 0 28px;
  border: 0;
  background: var(--scrub-300);
  color: var(--graphite-900);
}
.hero-cta--glow:hover,
.hero-cta--glow:focus-visible {
  background: #7BEBC0;
  color: var(--graphite-900);
}

.hero-editorial__secondary { border-color: var(--mist-a30); }
.hero-editorial__secondary:hover { border-color: var(--graphite-mist); }

/* Live fleet numbers */
.fleet {
  --motion-delay: 850ms;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fleet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--mist-400);
}

.fleet__live {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fleet__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5CC8E6;
}
.fleet__live-label { color: #5CC8E6; }

.fleet__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(232, 236, 234, .14);
}

.fleet__stat {
  padding: 18px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--mist-a10);
}
.fleet__stat:first-child { padding-left: 0; }
.fleet__stat:last-child  { padding-right: 0; border-right: 0; }

.fleet__value {
  font: 500 44px/1 'Geist', sans-serif;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.fleet__unit {
  margin-left: 4px;
  font: 500 18px/1 'Geist Mono', monospace;
  color: var(--mist-400);
}
.fleet__unit--wide { margin-left: 6px; }

.fleet__label {
  font: 400 13px/1.3 'Geist', sans-serif;
  color: var(--mist-400);
}

/* ── Without JavaScript ─────────────────────────────────────────────────────
   The intro is started by hero-directions.js. When scripting is off, show the final
   state right away (same declarations as the rules above). */

@media (scripting: none) {
  .motion-reveal,
  .motion-fade--rise { transform: translateY(0); }
  .motion-fade { opacity: 1; }
  .motion-aperture { clip-path: circle(50% at 50% 50%); }
  .motion-draw { transform: scaleX(1); }
  .anno__dot,
  .anno__label { opacity: 1; }
  .anno__line { transform: scaleX(1); }
}