/* ==========================================================================
   hero-scrollytelling — iteration block
   --------------------------------------------------------------------------
   Dark, full-bleed hero with a scroll-driven background frame sequence.
   Overlay content (nav, headline, body, Investor Hub card) stays static
   while the user scrolls; the background canvas advances frames in step
   with scroll progress through a 300vh outer container.

   PLAYGROUND MODE: raw Figma values throughout (no token snapping).
   These will be reconciled into tokens.json in a later, explicit pass.
   ========================================================================== */

/* ---------- Outer scroll-progression container ---------- */

.hero-scrolly {
  /* Break out of any parent max-width so the hero is genuinely full-bleed
     even when inlined inside the playground's centred wrapper. */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 300vh;       /* ~3 viewports of scroll for the whole 247-frame run */
  background: #07090D;  /* never pure #000 (design principles) */
}

.hero-scrolly__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.hero-scrolly__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #07090D;
}

.hero-scrolly__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Diagonal-line texture (ported from the wireframe app's .topo-overlay).
   45° hairlines every 16px at 6% opacity, masked with a 135° gradient so
   the pattern fades into nothing toward the bottom-right. Adapted from
   the original (dark-on-light) by switching to white-on-dark. */
.hero-scrolly__topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: repeating-linear-gradient(
    45deg,
    #ffffff 0,
    #ffffff 1px,
    transparent 1px,
    transparent 16px
  );
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 65%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 65%);
  z-index: 1;
}

/* ---------- Landing editorial labels (About-hero language) ----------
   Restrained Swiss framing for the otherwise-bare landing: a small eyebrow
   with the accent square, and a single bottom data strip on a hairline — the
   same treatments as the About hero's topbar/strip, no HUD. Above the
   background, below the nav, never intercepts pointer events; the whole layer
   is bound to --scroll-affordance so it fades as the user scrolls in. */
.hero-scrolly__landing {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #fff;
  opacity: var(--scroll-affordance, 1);
}
.hero-scrolly__landing-eyebrow {
  position: absolute;
  top: 110px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.hero-scrolly__landing-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #C42800;
}
.hero-scrolly__landing-strip {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hero-scrolly__landing-strip span { white-space: nowrap; }
/* Centre tagline (client, 1 Sep 2026): absolutely positioned so it sits on
   the page's true midline regardless of the outer spans' widths; top matches
   the strip's padding-top so all three share a baseline. */
.hero-scrolly__landing-centre {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
}
/* The three stat readouts are separate spans so phones can stack them
   (client, 28 Aug 2026). On desktop the pseudo-element separators rebuild
   the same single dotted line as before. */
.hero-scrolly__landing-stats { display: inline-flex; align-items: baseline; }
.hero-scrolly__landing-stats span + span::before { content: '\00a0\00b7\00a0'; }
.hero-scrolly__landing-strip .is-dim { color: rgba(255, 255, 255, 0.62); }

@media (max-width: 820px) {
  .hero-scrolly__landing-strip { font-size: 10.5px; gap: 14px; flex-wrap: wrap; }
  .hero-scrolly__landing-strip .is-dim { display: none; }
  /* Not enough width to float the tagline on the midline without colliding
     with the outer spans — drop it into the wrapping flex row instead. */
  .hero-scrolly__landing-centre { position: static; transform: none; }
}
@media (max-width: 760px) {
  /* Stack the data strip as clean rows — side-by-side spans collided. */
  .hero-scrolly__landing-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Phones: company + ticker on the first row, then the three stats one
     per line so nothing runs off the right edge (client, 28 Aug 2026). */
  .hero-scrolly__landing-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero-scrolly__landing-stats span + span::before { content: none; }
}

/* Global fixed nav wrapper — the nav is rendered site-wide via header.php. */
.page-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Hide-on-scroll (2026-08-18): scrolling down cedes the top edge to
   page-level sticky rails; scrolling up brings the nav back. */
html.nav-hidden .page-nav { transform: translateY(-110%); }
.page-nav > * { pointer-events: auto; }
.page-nav .hero-scrolly__nav { position: relative; top: 0; }

/* ---------- Top nav ---------- */

.hero-scrolly__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px;
  z-index: 3;
}

.hero-scrolly__nav-logo {
  display: block;
  width: 73.948px;
  height: 58.419px;
  flex-shrink: 0;
}
.hero-scrolly__nav-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-scrolly__nav-right {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

/* Mobile nav: the market + weather ticker is desktop chrome — on phones it
   collided with the wordmark and pushed MENU off-screen. Logo + language +
   MENU only, compact pills. */
@media (max-width: 760px) {
  /* Doubled selectors: these must beat the base rules declared further down
     in this file (same specificity would lose to source order). */
  .hero-scrolly__nav { padding: 14px 16px; }
  .hero-scrolly__nav .hero-scrolly__nav-logo { width: 56px; height: 44.2px; }
  .hero-scrolly__nav .hero-scrolly__ticker { display: none; }
  .hero-scrolly__nav .hero-scrolly__nav-right { gap: 10px; }
  .hero-scrolly__nav .hero-scrolly__lang-trigger { padding: 11px 14px; }
  .hero-scrolly__nav .hero-scrolly__menu-btn { padding: 11px 16px; }
}

/* Tablet / narrow desktop (29 Aug 2026): the ticker pill is fixed-width, so
   from 761px up to ~1023px the nav row overflowed the viewport (menu button's
   right edge landed at 905px on a 768/900 screen). Hide the ticker until the
   row genuinely fits; it returns at 1024px. */
@media (max-width: 1023px) {
  .hero-scrolly__nav .hero-scrolly__ticker { display: none; }
}

/* Ticker pill */
.hero-scrolly__ticker {
  background: #fff;
  border-radius: 6px;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0.78px;
  color: #181a1f;
}
.hero-scrolly__ticker-group {
  display: flex;
  gap: 8px;
  align-items: baseline;
  height: 20px;
}
/* Stock-rotation cross-fade — same pattern as the weather widget. */
.hero-scrolly__ticker-group[data-stock] {
  transition: opacity 200ms ease;
}
.hero-scrolly__ticker-group[data-swap="out"] {
  opacity: 0;
  transition-duration: 150ms;
}
/* Separators in Norwegian red so they tie to the brand accent
   (also matches the loader's --no-red). */
.hero-scrolly__ticker-sep {
  color: #BA0C2F;
}
.hero-scrolly__ticker-divider {
  width: 1px;
  height: 13px;
  background: #BA0C2F;
  align-self: center;
}
/* Weather widget — rotates location/temp/coord/condition every 4s via JS,
   with a 150ms cross-fade by toggling data-swap between "in" and "out". */
.hero-scrolly__ticker-weather {
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 200ms ease;
}
.hero-scrolly__ticker-weather[data-swap="out"] {
  opacity: 0;
  transition-duration: 150ms;
}
.hero-scrolly__ticker-weather-icon {
  display: inline-flex;
  align-items: center;
  color: #6b6f7a;
  flex-shrink: 0;
}
.hero-scrolly__ticker-weather-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}
.hero-scrolly__ticker-weather-loc {
  display: inline-block;
  min-width: 64px;
}
.hero-scrolly__ticker-weather-temp {
  display: inline-block;
  min-width: 30px;
}
.hero-scrolly__ticker-weather-coord {
  color: #6b6f7a;
}

/* Menu button */
.hero-scrolly__menu-btn {
  appearance: none;
  background: #fff;
  border: none;
  border-radius: 6px;
  padding: 13.75px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
  letter-spacing: 1.04px;
  color: #181a1f;
  cursor: pointer;
}
.hero-scrolly__menu-btn img,
.hero-scrolly__menu-btn svg {
  width: 20px;
  height: 17px;
  display: block;
}

/* ---------- Language selector (small pill, dropdown on click) ----------
   Sits between the ticker and the MENU button. EN default; click reveals
   a dropdown with NO and DE. Text codes instead of emoji flags — reads
   consistently across platforms and ties to the mono caps voice used by
   the ticker + menu pills either side. Trigger padding mirrors the menu
   button (13.75 px vertical) so all three pills share a baseline. */

.hero-scrolly__lang {
  position: relative;
}

.hero-scrolly__lang-trigger {
  appearance: none;
  background: #fff;
  border: 0;
  border-radius: 6px;
  /* Matches the menu button's vertical padding for an even pill row.
     Horizontal is slightly tighter (text is only two characters). */
  padding: 13.75px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
  letter-spacing: 1.04px;
  color: #181a1f;
  cursor: pointer;
}

.hero-scrolly__lang-flag {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: inherit;
}

.hero-scrolly__lang-dropdown {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s 180ms;
}
.hero-scrolly__lang[data-state="open"] .hero-scrolly__lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s 0s;
}

.hero-scrolly__lang-option {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  /* Code + endonym row: "DE  Deutsch". */
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
  transition: background 150ms ease;
}
.hero-scrolly__lang-name {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 19.5px;
  color: #4A4F5C;
}
.hero-scrolly__lang-option[aria-current="true"] .hero-scrolly__lang-name {
  color: #14161C;
}
.hero-scrolly__lang-option:hover,
.hero-scrolly__lang-option:focus-visible {
  background: #f0f1f4;
  outline: none;
}
.hero-scrolly__lang-option[aria-current="true"] {
  background: #f0f1f4;
}

/* ---------- Bottom content block ---------- */

/* Bottom row: left intro stack (eyebrow / headline / body) + right
   investor card. Bottoms aligned, so the last line of body copy and the
   bottom of the card share a baseline — and because body copy is now in
   the same group as the headline, there's no empty mid-air between them. */
.hero-scrolly__content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 56px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  z-index: 2;
  color: #fff;
}

.hero-scrolly__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1036.8px;
  flex: 1 1 auto;
  min-width: 0;
}

.hero-scrolly__eyebrow {
  margin: 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 16.5px;
  font-weight: 400;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: #fff;
}

.hero-scrolly__headline {
  margin: 0;
  font-family: 'Geologica', system-ui, sans-serif;
  font-weight: 300;
  font-size: 77.8px;
  line-height: 1;
  letter-spacing: -1.555px;
  color: #f0f1f4;
  max-width: 991px;
  word-break: break-word;
}

.hero-scrolly__body-copy {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 21px;
  line-height: 28px;
  font-weight: 400;
  color: #b5b8c2;
  max-width: 38ch;
}

/* Mobile hero content: the desktop row (intro left, investor card right)
   crushed the intro to a one-word-per-line sliver on phones. Stack it —
   intro on top at readable sizes, card full-width below. */
@media (max-width: 760px) {
  .hero-scrolly__content {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    bottom: 32px;
  }
  .hero-scrolly__intro { gap: 14px; max-width: none; }
  .hero-scrolly__eyebrow { font-size: 12px; }
  .hero-scrolly__headline { font-size: 40px; letter-spacing: -0.8px; max-width: none; }
  .hero-scrolly__body-copy { font-size: 15.5px; line-height: 1.5; max-width: none; }
  .hero-scrolly__content .hero-scrolly__investor-card { width: 100%; max-width: none; }
}

/* Investor Hub card — vertical stack, glass surface.
   Media on top (full-bleed crop of the portrait + a Milano-Red Q2 chip),
   then mono kicker / sans heading / CTA row with an arrow. Hover lifts
   the card and pushes the arrow right; the whole surface uses heavier
   backdrop blur + light tint for a refined glassmorphism. */
.hero-scrolly__investor-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 290px;
  flex-shrink: 0;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: #fff;
  transition: transform 320ms cubic-bezier(0.33, 1, 0.68, 1),
              border-color 280ms ease,
              box-shadow 280ms ease;
}
.hero-scrolly__investor-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 26px 56px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.hero-scrolly__investor-media {
  position: relative;
  width: 100%;
  /* Banner crop, deliberately shorter than 16:9 — 135px per Varun's 19 Aug
     ruling (+25% image height so both figures read at card size). */
  height: 135px;
  overflow: hidden;
  background: #15171c;
}
.hero-scrolly__investor-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-scrolly__investor-card:hover .hero-scrolly__investor-portrait {
  transform: scale(1.03);
}
.hero-scrolly__investor-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  /* Sharp corners (2026-08-20): the card it sits on is radius 0. */
  border-radius: 0;
  background: #BA0C2F;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.hero-scrolly__investor-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.hero-scrolly__investor-eyebrow {
  margin: 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero-scrolly__investor-heading {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero-scrolly__investor-cta {
  margin: 4px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.hero-scrolly__investor-cta-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-scrolly__investor-card:hover .hero-scrolly__investor-cta-arrow {
  transform: translate(2px, -2px);
}

/* ---------- Scroll-down affordance (bottom-center) ----------------------
   Compact stack: horizontal mono-caps label over a short hairline track
   with a dot that drops on a 1.9 s loop. Sits below the content block in
   the strip between the body row and the viewport's bottom edge.
   Opacity is bound to (1 − --reveal-text) so it fades out the moment the
   tail-end content (headline + investor card) starts revealing.
   ------------------------------------------------------------------------- */

.hero-scrolly__scroll-indicator {
  position: absolute;
  /* Centred both horizontally AND vertically in the hero so it lands in
     the viewer's eye-line the moment the page paints. The intro stack
     is opacity 0 until late in the scroll, by which point this
     indicator has already faded out via --scroll-affordance, so the
     two never share the centre of the frame. */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Fallback 1 ensures the indicator is visible on initial paint,
     before the JS-written --scroll-affordance is set. */
  opacity: var(--scroll-affordance, 1);
  transition: opacity 200ms ease;
  pointer-events: none;
}

.hero-scrolly__scroll-indicator-label {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  /* Slow alpha pulse — keeps the prompt alive without competing with
     the cascading red dots below. */
  animation: hero-scrolly-label-pulse 2.6s ease-in-out infinite;
}
@keyframes hero-scrolly-label-pulse {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1;    }
}
/* Phones: the label wraps to two lines — centre both on the track/caret
   (padding-left offsets the trailing letter-spacing) and deepen the shadow
   so it reads over bright frames (client, 28 Aug 2026). Sits AFTER the base
   rule above so the shadow wins at equal specificity. */
@media (max-width: 760px) {
  .hero-scrolly__scroll-indicator-label {
    text-align: center;
    padding-left: 0.28em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.6);
  }
}

.hero-scrolly__scroll-indicator-track {
  position: relative;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.hero-scrolly__scroll-indicator-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C42800;
  box-shadow: 0 0 12px rgba(196, 40, 0, 0.75);
  transform: translate(-50%, -8px);
  animation: hero-scrolly-drop 1.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
/* Second dot trails the first by half a cycle — cascade reads more
   eye-catching than a single drop. */
.hero-scrolly__scroll-indicator-dot--lag {
  animation-delay: -0.9s;
}

@keyframes hero-scrolly-drop {
  0%   { transform: translate(-50%, -8px); opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translate(-50%, 50px); opacity: 0; }
}

/* Caret restored — at the lifted bottom: 36 there's room for the full
   stack again. Red, with a gentle bob in step with the dropping dots
   so the whole indicator pulses together. */
.hero-scrolly__scroll-indicator-caret {
  width: 22px;
  height: 22px;
  display: block;
  color: #C42800;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  animation: hero-scrolly-caret-bob 1.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@keyframes hero-scrolly-caret-bob {
  0%, 100% { transform: translateY(-1px); }
  50%      { transform: translateY( 2px); }
}
/* ---------- Loading overlay (visible until frames preloaded) ---------- */

.hero-scrolly__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07090D;
  z-index: 4;
  transition: opacity 320ms ease;
}
.hero-scrolly__loading[data-state="done"] {
  opacity: 0;
  pointer-events: none;
}
.hero-scrolly__loading-text {
  margin: 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 1.04px;
  color: #6b6f7a;
  text-transform: uppercase;
}

/* ---------- Full-screen menu overlay (editorial / white) -----------------
   Mirrors the wireframe app's MenuOverlay: white panel revealed by a
   diagonal clip-path sweep (a triangle whose hypotenuse sweeps across),
   three-column index — Pages / Docu-Series / Latest Release — with each
   item fading and rising in stagger. Animation in pure CSS, no GSAP.
   ------------------------------------------------------------------------- */

/* Menu overlay — sequenced four-state machine driven by the inline JS
   (or hero-scrollytelling.js). State flow:

     closed   → opening  → open
        ↑         ↓         ↓
        ↓     (strips      (content
        closing←  arrive)   fades in)
                       ↑
                       (content fades out)

   • opening: strips cascade in. Content stays hidden.
   • open: strips at rest. Content fades in.
   • closing: content fades out. Strips stay covering.
   • closed: strips cascade out. Content already gone.

   The CSS only knows about the states; the JS does the timing.
   `closed` is the default — no explicit selector needed for it. */
.hero-scrolly__menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
  color: #181a1f;
  overflow-y: auto;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  visibility: hidden;
  /* Hide AFTER the closing-state strip cascade finishes (max delay
     380ms + transition 1100ms = 1480ms). On any non-closed state we
     flip visibility instantly so the cascade can start the same frame. */
  transition: visibility 0s 1480ms;
}
.hero-scrolly__menu-overlay[data-state="opening"],
.hero-scrolly__menu-overlay[data-state="open"],
.hero-scrolly__menu-overlay[data-state="closing"] {
  visibility: visible;
  transition: visibility 0s 0s;
}

/* 45° strip layer that lives BEHIND the menu content. */
.hero-scrolly__menu-wipe {
  position: absolute;
  inset: -50%;
  display: flex;
  pointer-events: none;
  transform: rotate(45deg);
  z-index: 0;
}
.hero-scrolly__menu-wipe i {
  flex: 1 1 0;
  display: block;
  background: #ffffff;
  /* Default (closed): strips parked OFF-SCREEN above the rotated frame
     (= off-screen toward the upper-right in screen space). */
  transform: translate3d(0, -220%, 0);
  will-change: transform;
  /* 1100ms transition — deliberate, headline gesture. Same delay set
     is used in BOTH directions (opening and closing); the JS pause
     between states is what separates the two motions. */
  transition: transform 1100ms cubic-bezier(0.76, 0, 0.24, 1) var(--d, 0ms);
}
/* Hand-tuned non-linear per-strip delay (ms). 0–380 spread. */
.hero-scrolly__menu-wipe i:nth-child(1)  { --d:   0ms; }
.hero-scrolly__menu-wipe i:nth-child(2)  { --d: 240ms; }
.hero-scrolly__menu-wipe i:nth-child(3)  { --d: 100ms; }
.hero-scrolly__menu-wipe i:nth-child(4)  { --d: 360ms; }
.hero-scrolly__menu-wipe i:nth-child(5)  { --d:  60ms; }
.hero-scrolly__menu-wipe i:nth-child(6)  { --d: 320ms; }
.hero-scrolly__menu-wipe i:nth-child(7)  { --d: 180ms; }
.hero-scrolly__menu-wipe i:nth-child(8)  { --d: 380ms; }
.hero-scrolly__menu-wipe i:nth-child(9)  { --d:  80ms; }
.hero-scrolly__menu-wipe i:nth-child(10) { --d: 200ms; }
.hero-scrolly__menu-wipe i:nth-child(11) { --d: 140ms; }
.hero-scrolly__menu-wipe i:nth-child(12) { --d: 280ms; }
.hero-scrolly__menu-wipe i:nth-child(13) { --d:  30ms; }
.hero-scrolly__menu-wipe i:nth-child(14) { --d: 260ms; }
.hero-scrolly__menu-wipe i:nth-child(15) { --d: 220ms; }
.hero-scrolly__menu-wipe i:nth-child(16) { --d: 160ms; }

/* Strips are AT REST (translateY 0, covering) during opening, open, AND
   closing — only the `closed` default state has them off-screen. */
.hero-scrolly__menu-overlay[data-state="opening"] .hero-scrolly__menu-wipe i,
.hero-scrolly__menu-overlay[data-state="open"]    .hero-scrolly__menu-wipe i,
.hero-scrolly__menu-overlay[data-state="closing"] .hero-scrolly__menu-wipe i {
  transform: translate3d(0, 0, 0);
}

/* Menu inner sits ABOVE the strip layer AND is the single visibility
   gate for everything inside the overlay. Hidden by default; only
   the strict `open` state fades it in. This is what makes the topbar,
   wordmark, close button, kicker labels, links, episodes, and press
   releases all come and go TOGETHER as one unit — rather than the
   .menu-reveal class only gating a subset of them. */
.hero-scrolly__menu-inner {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-scrolly__menu-overlay[data-state="open"] .hero-scrolly__menu-inner {
  opacity: 1;
}

.hero-scrolly__menu-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-scrolly__menu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.hero-scrolly__menu-wordmark {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #181a1f;
}

.hero-scrolly__menu-close {
  appearance: none;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.04px;
  color: #181a1f;
  cursor: pointer;
  transition: color 200ms ease;
}
.hero-scrolly__menu-close:hover {
  color: #000;
}

.hero-scrolly__menu-kicker {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6f7a;
}

.hero-scrolly__menu-grid {
  display: grid;
  /* Docu column gets the lion's share now that it holds 6 episodes in a
     2-col card grid; press column slimmed to balance. */
  grid-template-columns: 3.5fr 6fr 3.5fr;
  padding: 40px 0 96px;
  border-top: 1px solid #e4e5e9;
}

.hero-scrolly__menu-col {
  padding: 0 32px;
}
.hero-scrolly__menu-col--pages {
  padding-left: 0;
}
.hero-scrolly__menu-col--press {
  padding-right: 0;
}
.hero-scrolly__menu-col--rule {
  border-left: 1px solid #e4e5e9;
}

.hero-scrolly__menu-col-label {
  display: block;
  margin-bottom: 24px;
}

/* Pages column */

.hero-scrolly__menu-link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #e4e5e9;
  color: #181a1f;
  text-decoration: none;
}
.hero-scrolly__menu-link:first-of-type {
  border-top: 1px solid #e4e5e9;
}

.hero-scrolly__menu-index {
  flex-shrink: 0;
  width: 24px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #6b6f7a;
}

.hero-scrolly__menu-link-label {
  flex: 1;
  /* Display face at semi-bold (client, 2026-08-28) — was Plex Sans 700. */
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

.hero-scrolly__menu-link-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.hero-scrolly__menu-link:hover .hero-scrolly__menu-link-arrow {
  opacity: 1;
  transform: translateX(0);
}
.hero-scrolly__menu-link:hover .hero-scrolly__menu-link-label {
  color: #000;
}

/* "Coming soon" — a disabled menu item: greyed, non-interactive, with a small
   mono tag in place of the hover arrow. */
.hero-scrolly__menu-link--soon {
  cursor: default;
  pointer-events: none;
}
.hero-scrolly__menu-link--soon .hero-scrolly__menu-index,
.hero-scrolly__menu-link--soon .hero-scrolly__menu-link-label {
  color: #b6b8be;
}
.hero-scrolly__menu-link-soon {
  flex-shrink: 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9da4;
  white-space: nowrap;
}

/* Docu-series column — 6 episodes in a 3-row × 2-col card grid.
   Each card stacks vertically: 16:9 thumb (with EP number overlaid +
   centred play badge) over a meta-line + title. */

.hero-scrolly__menu-episodes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 20px;
}

.hero-scrolly__menu-episode {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  color: #181a1f;
  text-decoration: none;
}

.hero-scrolly__menu-episode-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(150deg, #2a2a2a 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 360ms cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-scrolly__menu-episode:hover .hero-scrolly__menu-episode-thumb {
  transform: translateY(-2px);
}

/* Episode index — overlaid on the thumb (top-left), not a left rail item. */
.hero-scrolly__menu-episode-index {
  position: absolute;
  top: 10px;
  left: 12px;
  width: auto;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  z-index: 1;
}

.hero-scrolly__menu-episode-play {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 200ms ease, border-color 200ms ease;
}
.hero-scrolly__menu-episode:hover .hero-scrolly__menu-episode-play {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.85);
}
.hero-scrolly__menu-episode-play svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  display: block;
  transform: translateX(1px);
}

.hero-scrolly__menu-episode-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-scrolly__menu-episode-meta {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #6b6f7a;
}

.hero-scrolly__menu-episode-title {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 20ch;
}

/* Press column — two stacked items (Latest Press Release + Latest Article).
   Each is the same release card; a hairline rule separates them, and the
   second column-label gets extra top margin to breathe. */

.hero-scrolly__menu-col-label--second {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e4e5e9;
}

.hero-scrolly__menu-release {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: #181a1f;
}

.hero-scrolly__menu-release-meta {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #6b6f7a;
}

.hero-scrolly__menu-release-headline {
  margin: 0;
  /* D1 — see .hero-scrolly__menu-film-title. */
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 22px; /* same as the film title (client, 2026-08-28); was 28px */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #181a1f;
  /* Rule of thumb (client, 2026-08-28): a release headline never runs past
     four lines, so the Corporate presentation foot always stays in view.
     Full title is on the element's title attribute. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-scrolly__menu-release-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #181a1f;
  transition: color 200ms ease;
}
.hero-scrolly__menu-release-cta svg {
  width: 15px;
  height: 15px;
}
.hero-scrolly__menu-release:hover .hero-scrolly__menu-release-cta {
  color: #000;
}

/* Per-item .menu-reveal stagger has been retired. Visibility for the
   entire menu is now driven by the parent .hero-scrolly__menu-inner
   opacity, so every element appears and disappears in a single beat —
   no more topbar-leaks-in-early or kicker-lingers-after-close. The
   class itself is kept so the existing markup (with --reveal-idx
   inline styles) doesn't error; it simply has no effect now. */
.menu-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
/* ---------- Tail-end reveal (driven by scroll progress in JS) ------------
   The JS writes two custom properties on .hero-scrolly each frame:
     --reveal-text  (headline block + body copy)
     --reveal-card  (Investor Hub card, slightly staggered)
   Each runs 0 → 1 across a window near the end of the scroll. We map that
   to opacity (linear) and a 32px translateY (eased in JS). Under
   prefers-reduced-motion we keep the fade but drop the slide.
   ------------------------------------------------------------------------- */

.hero-scrolly__intro {
  opacity: var(--reveal-text, 0);
  transform: translate3d(0, calc((1 - var(--reveal-text, 0)) * 32px), 0);
  will-change: opacity, transform;
}

.hero-scrolly__investor-card {
  opacity: var(--reveal-card, 0);
  transform: translate3d(0, calc((1 - var(--reveal-card, 0)) * 32px), 0);
  will-change: opacity, transform;
}

/* Logo contrast flip (2026-07): black mark over light sections. */
.hero-scrolly__nav-logo img { transition: filter 0.25s ease; }
.page-nav.nav-on-light .hero-scrolly__nav-logo img { filter: invert(1); }

/* ==========================================================================
   Mobile pass 2 (2026-07-10 client review)
   ========================================================================== */
@media (max-width: 760px) {
  /* Menu overlay: pages only. The docu-series and press columns are
     desktop material — on a phone the menu is a navigator. */
  .hero-scrolly__menu-grid { display: block; }
  .hero-scrolly__menu-col--docu,
  .hero-scrolly__menu-col--press { display: none; }
  .hero-scrolly__menu-inner { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Full-width investor card wants a fuller media crop than the desktop
     290px card's 108px banner. */
  .hero-scrolly__content .hero-scrolly__investor-media { height: 150px; }
  /* Breathing room so the card's CTA row clears the viewport bottom. */
  .hero-scrolly__content { padding-bottom: 28px; }
}

/* ---------- Menu foot: deck download + investor-updates capture ---------- */
/* One hairline-ruled utility row under the menu grid. Ink on paper like the
   rest of the overlay: mono kickers, quiet underline input, red on hover. */
/* Stacked in the PRESS COLUMN under the latest article (client call):
   two more entries in the column's own rhythm — hairline rule, kicker,
   content — so the download and the capture read as part of the list. */
.hero-scrolly__menu-foot {
  display: flex;
  flex-direction: column;
  gap: 20px; /* was 34px — headline-to-CTA read too loose (client, 2026-08-28) */
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid rgba(20, 26, 38, 0.14);
}
.hero-scrolly__menu-foot .hero-scrolly__menu-kicker {
  display: block;
  margin-bottom: 9px;
}
.hero-scrolly__menu-foot-dl {
  text-decoration: none;
  color: inherit;
}
.hero-scrolly__menu-foot-dl-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  /* 45° survey hatch underline — the brand line, not a plain rule */
  background: repeating-linear-gradient(
    45deg,
    #141A26 0, #141A26 1.5px,
    transparent 1.5px, transparent 5px
  ) left bottom / 100% 5px no-repeat;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #141A26;
  transition: color 240ms ease, border-color 240ms ease, gap 240ms cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-scrolly__menu-foot-dl-line svg {
  width: 15px;
  height: 15px;
  color: #C42800;
  transition: transform 240ms cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-scrolly__menu-foot-dl:hover .hero-scrolly__menu-foot-dl-line {
  gap: 14px;
  color: #C42800;
  background-image: repeating-linear-gradient(
    45deg,
    #C42800 0, #C42800 1.5px,
    transparent 1.5px, transparent 5px
  );
}
.hero-scrolly__menu-foot-dl:hover .hero-scrolly__menu-foot-dl-line svg { transform: translateY(2px); }

.hero-scrolly__menu-foot-signup { margin: 0; }
.hero-scrolly__menu-foot-row {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.hero-scrolly__menu-foot-row {
  display: flex;
  width: 100%;
}
.hero-scrolly__menu-foot-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 2px 10px;
  border: 0;
  border-radius: 0;
  /* idle: quiet ink hatch underline; focus: Milano red */
  background: repeating-linear-gradient(
    45deg,
    rgba(20, 26, 38, 0.4) 0, rgba(20, 26, 38, 0.4) 1.5px,
    transparent 1.5px, transparent 5px
  ) left bottom / 100% 5px no-repeat;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  color: #141A26;
  outline: none;
}
.hero-scrolly__menu-foot-row input::placeholder { color: rgba(20, 26, 38, 0.38); }
.hero-scrolly__menu-foot-row input:focus {
  background-image: repeating-linear-gradient(
    45deg,
    #C42800 0, #C42800 1.5px,
    transparent 1.5px, transparent 5px
  );
}
.hero-scrolly__menu-foot-row button {
  position: relative;
  margin-left: 18px;
  padding: 8px 18px 8px 22px;
  background:
    repeating-linear-gradient(
      45deg,
      #C42800 0, #C42800 1.5px,
      transparent 1.5px, transparent 5px
    ) left top / 6px 100% no-repeat;
  border: 1px solid #141A26;
  border-radius: 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #141A26;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.hero-scrolly__menu-foot-row button:hover {
  background: #C42800;
  border-color: #C42800;
  color: #F4F5F7;
}

@media (max-width: 760px) {
  /* Phones hide the docu + press columns, but the foot rides along with
     the press column — so re-show the column as a bare container and
     hide everything in it EXCEPT the foot. */
  .hero-scrolly__menu-col--press { display: block; }
  .hero-scrolly__menu-col--press > :not(.hero-scrolly__menu-foot) { display: none; }
  .hero-scrolly__menu-foot {
    margin-top: 10px;
    padding-bottom: 40px;
    border-top: 0;
  }
}

/* Paper backdrop for SCROLLED menu content. The wipe strips cover ~2
   viewport heights around the overlay top; with the menu foot the content
   can scroll past that on phones and the page showed through. This
   backdrop extends the paper downward — appearing only in the strict
   `open` state, when the strips already cover the screen, so the wipe
   reveal (opening AND closing) is untouched. */
.hero-scrolly__menu-overlay::before {
  content: '';
  /* FIXED, not absolute: it must neither scroll with the content nor
     extend the overlay's scrollable height. */
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-scrolly__menu-overlay[data-state="open"]::before { opacity: 1; }

/* ---------- Menu topbar: logo + instrument close (2026-07-13) ---------- */
/* The white logo SVG inverts to ink on the paper overlay — the same trick
   the fixed nav uses over light sections. */
/* The SVG uses preserveAspectRatio="none" and fills its box — so the box
   itself carries the logo's fixed ratio (73.95 x 58.42), like the nav. */
.hero-scrolly__menu-logo {
  display: block;
  width: 60px;
  height: 47.4px;
  flex-shrink: 0;
}
.hero-scrolly__menu-logo img {
  display: block;
  width: 100%;
  height: 100%;
  filter: invert(1);
}
/* Close: the ✕ sits in a square outline instrument. Hover fills it Milano
   red, the cross turns paper-white and quarter-turns — tactile, still Swiss. */
.hero-scrolly__menu-close svg {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 12px;
  border: 1px solid rgba(20, 26, 38, 0.32);
  color: #181a1f;
  transition:
    background 240ms ease,
    border-color 240ms ease,
    color 240ms ease,
    transform 420ms cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-scrolly__menu-close:hover svg {
  background: #C42800;
  border-color: #C42800;
  color: #F4F5F7;
  transform: rotate(90deg);
}
@media (max-width: 760px) {
  .hero-scrolly__menu-logo { width: 48px; height: 37.9px; }
  .hero-scrolly__menu-close svg { width: 38px; height: 38px; padding: 11px; }
}

/* ---------- Menu polish round (2026-07-13): items 2, 4, 5, 6 ---------- */

/* 2 — "You are here": the current page's index rides in Milano red. */
.hero-scrolly__menu-link.is-current .hero-scrolly__menu-index {
  color: #C42800;
  font-weight: 700;
}

/* 4 — Page-link hover: the index flips red and the row's hairline draws
   in red from the left (ruler motif). Links only — the Coming-soon row
   stays inert. */
a.hero-scrolly__menu-link { position: relative; }
a.hero-scrolly__menu-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #C42800;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.33, 1, 0.68, 1);
}
a.hero-scrolly__menu-link:hover::after { transform: scaleX(1); }
a.hero-scrolly__menu-link .hero-scrolly__menu-index { transition: color 200ms ease; }
a.hero-scrolly__menu-link:hover .hero-scrolly__menu-index { color: #C42800; }

/* 5 — Episode hover: the play ring fills red, the still brightens. */
.hero-scrolly__menu-episode-thumb { transition: transform 240ms ease, filter 240ms ease; }
.hero-scrolly__menu-episode:hover .hero-scrolly__menu-episode-thumb { filter: brightness(1.16); }
.hero-scrolly__menu-episode-play { transition: background 240ms ease, border-color 240ms ease; }
.hero-scrolly__menu-episode:hover .hero-scrolly__menu-episode-play {
  background: #C42800;
  border-color: #C42800;
}
.hero-scrolly__menu-episode-play svg { fill: #ffffff; }

/* 6 — Contact floor: one quiet mono line under the columns. */
.hero-scrolly__menu-contactline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-top: 34px;
  padding: 20px 0 36px;
  border-top: 1px solid rgba(20, 26, 38, 0.14);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #6b6f7a;
}
.hero-scrolly__menu-contactline-k {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-right: 8px;
}
.hero-scrolly__menu-contactline a {
  color: #181a1f;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 26, 38, 0.3);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.hero-scrolly__menu-contactline a:hover {
  color: #C42800;
  border-color: #C42800;
}
.hero-scrolly__menu-contactline-sep { color: rgba(20, 26, 38, 0.3); }
@media (max-width: 760px) {
  .hero-scrolly__menu-contactline { margin-top: 4px; padding-bottom: 44px; }
}

/* ---------- Menu film: one documentary feature (2026-07-14) ---------- */
.hero-scrolly__menu-film { max-width: 640px; }
.hero-scrolly__menu-film-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0B0F16;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-scrolly__menu-film-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.33, 1, 0.68, 1), filter 240ms ease;
}
.hero-scrolly__menu-film-frame:hover img { transform: scale(1.02); filter: brightness(1.1); }
.hero-scrolly__menu-film-frame .hero-scrolly__menu-episode-play {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
}
.hero-scrolly__menu-film-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0B0F16;
}
.hero-scrolly__menu-film-meta {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.hero-scrolly__menu-film-title {
  margin: 18px 0 8px;
  /* D1: h3 on the display face at the hero weight. Nav CHROME (menu button,
     ticker, language pills) is deliberately untouched — this is the menu
     panel's editorial content. */
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -.01em;
  color: #181a1f;
}
.hero-scrolly__menu-film-desc {
  margin: 0;
  max-width: 56ch;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #5b5f6a;
}

/* Menu contact floor — social channels */
.hero-scrolly__menu-socials {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 16px;
  margin-left: auto;
}
.hero-scrolly__menu-socials a {
  display: inline-flex;
  color: rgba(20, 26, 38, 0.55);
  transition: color 200ms ease, transform 200ms ease;
}
.hero-scrolly__menu-socials a:hover { color: #C42800; transform: translateY(-1px); }
.hero-scrolly__menu-socials svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .hero-scrolly__menu-socials { margin-left: 0; width: 100%; gap: 20px; }
  .hero-scrolly__menu-socials svg { width: 18px; height: 18px; }
}

/* Menu "Follow Teako" block — labelled channel links in the menu foot */
.hero-scrolly__menu-follow { margin-top: 26px; }
/* Icons only, no channel labels (client, 1 Sep 2026) — wider gap so each
   channel reads separately without its word. */
.hero-scrolly__menu-follow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 12px;
}
.hero-scrolly__menu-follow-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #141A26;
  padding-bottom: 5px;
  background: repeating-linear-gradient(
    45deg,
    rgba(20, 26, 38, 0.35) 0, rgba(20, 26, 38, 0.35) 1.5px,
    transparent 1.5px, transparent 5px
  ) left bottom / 100% 4px no-repeat;
  transition: color 200ms ease;
}
.hero-scrolly__menu-follow-row a:hover {
  color: #C42800;
  background-image: repeating-linear-gradient(
    45deg,
    #C42800 0, #C42800 1.5px,
    transparent 1.5px, transparent 5px
  );
}
.hero-scrolly__menu-follow-row svg { width: 18px; height: 18px; }

/* (Blend-mode approach abandoned 2026-08-02 — fixed-nav stacking context
   isolates it; the sampled nav-on-light flip below handles inversion.) */

/* Sign-off audit (2026-08-18): comfortable tap targets in the menu —
   contact and social links measured 19-21px tall on mobile. */
@media (max-width: 760px) {
  .hero-scrolly__menu-overlay a { padding-top: 10px; padding-bottom: 10px; }
  .hero-scrolly__menu-overlay .hero-scrolly__menu-close { padding: 12px; }
}

.hero-scrolly__menu-foot-dl-btn, .hero-scrolly__menu-foot .hero-scrolly__menu-kicker--phone { display: none; }

/* ==========================================================================
   Menu overlay on phones (client, 29 Aug 2026)
   Order: film (landscape) · page links (half size) · download presentation +
   investor-updates sign-up · social icons. Press headlines and the investor-
   relations contact line are desktop material. Overlay scrolls.
   Must sit after the earlier phone rules to win at equal specificity.
   ========================================================================== */
@media (max-width: 760px) {
  /* Logo: same box as the site header's wordmark (56×44). The SVG is
     preserveAspectRatio="none", so the IMAGE must be that exact ratio too —
     it was rendering 56×24 (squashed flat). */
  .hero-scrolly__menu-logo { width: 56px; height: 44px; }
  .hero-scrolly__menu-logo img { width: 56px; height: 44px; }
  /* The wipe layer (1,491px wide) stuck out to the right and the overlay
     scrolled sideways — that was the dead space on the right of a phone. */
  .hero-scrolly__menu-overlay { overflow-x: hidden; }
  .hero-scrolly__menu-inner { overflow-x: hidden; }
  /* Page links at half size. */
  /* Round 3 (29 Aug): slightly smaller, no divider lines, decent spacing. */
  .hero-scrolly__menu-link-label { font-size: 17px; }
  .hero-scrolly__menu-link { gap: 14px; border-bottom: 0; }
  .hero-scrolly__menu-link:first-of-type { border-top: 0; }
  .hero-scrolly__menu-overlay .hero-scrolly__menu-link { padding-top: 11px; padding-bottom: 11px; }
  /* Re-flow the three columns as one stack, in the order above. */
  .hero-scrolly__menu-grid { display: flex; flex-direction: column; }
  .hero-scrolly__menu-col--docu { display: contents; }
  .hero-scrolly__menu-col--docu > :not(.hero-scrolly__menu-film):not(.hero-scrolly__menu-follow) { display: none; }
  .hero-scrolly__menu-film { order: 2; max-width: none; margin: 22px 0 6px; }
  .hero-scrolly__menu-film-frame { aspect-ratio: 16 / 9; width: 100%; height: auto; }
  .hero-scrolly__menu-film-frame img, .hero-scrolly__menu-film-frame video { width: 100%; height: 100%; object-fit: cover; }
  .hero-scrolly__menu-film-title, .hero-scrolly__menu-film-desc { display: none; }
  .hero-scrolly__menu-col--pages { order: 1; }
  .hero-scrolly__menu-col--press { order: 3; padding-left: 0; margin-left: 0; border-left: 0; width: 100%; }
  /* Download + sign-up: full width, no indent or side rule; the sign-up
     stacks (field, then a full-width button) instead of squeezing into a row. */
  .hero-scrolly__menu-overlay .hero-scrolly__menu-foot { margin: 18px 0 0; padding: 22px 0 18px; border-left: 0; border-top: 1px solid rgba(20, 26, 38, 0.14); width: 100%; gap: 22px; }
  .hero-scrolly__menu-overlay .hero-scrolly__menu-foot-signup { width: 100%; }
  .hero-scrolly__menu-overlay .hero-scrolly__menu-foot-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .hero-scrolly__menu-overlay .hero-scrolly__menu-foot-row input { width: 100%; box-sizing: border-box; }
  /* Sign-up button: no hatched edge on phones, plain secondary, same height as the primary. */
  .hero-scrolly__menu-overlay .hero-scrolly__menu-foot-row button { width: 100%; box-sizing: border-box; margin-left: 0; padding: 13px 18px; background: transparent; text-align: center; }
  /* Download: one primary button on phones (kicker + underlined line hidden). */
  .hero-scrolly__menu-foot-dl .hero-scrolly__menu-kicker, .hero-scrolly__menu-foot-dl-line { display: none; }
  .hero-scrolly__menu-foot-dl { display: block; }
  .hero-scrolly__menu-foot-dl-btn { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 14px 18px; background: #C42800; border: 1px solid #C42800; color: #F4F5F7; font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
  .hero-scrolly__menu-foot .hero-scrolly__menu-kicker--desk { display: none; }
  .hero-scrolly__menu-foot .hero-scrolly__menu-kicker--phone { display: block; }
  .hero-scrolly__menu-overlay .hero-scrolly__menu-foot { gap: 14px; }
  /* Tighter vertical rhythm so the overlay sits closer to one screen (client, 29 Aug):
     top bar 20 → 12, hairline-to-first-link 40 → 10, film/foot/follow gaps trimmed. */
  .hero-scrolly__menu-topbar { padding: 12px 0; }
  .hero-scrolly__menu-grid { padding: 10px 0 24px; }
  .hero-scrolly__menu-film { margin: 14px 0 4px; }
  .hero-scrolly__menu-overlay .hero-scrolly__menu-foot { margin-top: 10px; padding-top: 14px; padding-bottom: 12px; }
  .hero-scrolly__menu-follow { margin-top: 2px; padding-bottom: 16px; }
  /* Follow: icons only, one row. */
  .hero-scrolly__menu-follow { order: 4; margin-top: 4px; padding-bottom: 36px; }
  .hero-scrolly__menu-follow-row { display: flex; gap: 26px; flex-wrap: wrap; }
  .hero-scrolly__menu-follow-row a { background: none; padding: 0; border: 0; width: auto; }
  .hero-scrolly__menu-follow-row a span { display: none; }
  .hero-scrolly__menu-follow-row svg { width: 22px; height: 22px; }
  .hero-scrolly__menu-contactline { display: none; }
}