/* Boss Level scroll-scrubbed homepage hero (see hero-scroll.js).

   #top.bl-hero is a tall scroll container; .bl-hero-stage sticks to the top of
   the viewport for the length of the film. Native video presents the frames, each
   slide carries its own scrim and copy, and the HUD tracks the stage. Colours
   are deliberate: the film is photographic, so the copy stays cream on dark
   scrims in both themes (the rules with !important override the light-theme
   and mobile hero rules in mobile-home.css, which target #top). */

#top.bl-hero {
  --bl-hero-scroll: 676;
  --bl-nav: 74px;
  --bl-cream: #f8f5ef;
  --bl-orange: #ff4400;
  --bl-gold: #ffb300;
  --bl-ink: #050508;
  position: relative;
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  height: calc(100vh + var(--bl-hero-scroll) * 1vh);
  height: calc(100svh + var(--bl-hero-scroll) * 1svh);
  background: var(--bl-ink) !important;
  color: var(--bl-cream) !important;
  overflow: visible !important;
  z-index: 0;
}
/* sticky needs every ancestor to be free of scrolling overflow: the rendered
   page wrapper clips x with `hidden`, which silently breaks sticky. `clip`
   clips without creating a scroll container. */
#dc-root > div > div[style*="overflow-x"] { overflow-x: clip !important; overflow-y: visible !important; }

#top.bl-hero .bl-hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--bl-ink);
  contain: strict;
  isolation: isolate;
}
#top.bl-hero .bl-hero-poster,
#top.bl-hero .bl-hero-still,
#top.bl-hero .bl-hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}
#top.bl-hero .bl-hero-poster { z-index: 0; }
#top.bl-hero .bl-hero-still,
#top.bl-hero .bl-hero-film { z-index: 1; opacity: 0; }
#top.bl-hero .bl-hero-still.is-live,
#top.bl-hero .bl-hero-film.is-live { opacity: 1; }
#top.bl-hero.is-opening-frame .bl-hero-film { opacity: 0; }
/* the nav floats over bright ceilings and sky: a light shade keeps it legible */
#top.bl-hero .bl-hero-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,8,.62) 0, rgba(5,5,8,.18) 14%, rgba(5,5,8,0) 26%),
    linear-gradient(0deg, rgba(5,5,8,.5) 0, rgba(5,5,8,0) 16%);
}

/* ── Slides ──────────────────────────────────────────────────────────────── */
#top.bl-hero .bl-hero-slides { position: absolute; inset: 0; z-index: 3; }
#top.bl-hero .bl-slide {
  --o: 0; --x: 0px; --y: 0px; --s: 1;
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: calc(var(--bl-nav) + 3vh) 5vw 12vh;
  opacity: var(--o);
  pointer-events: none;
}
#top.bl-hero .bl-slide.is-off { visibility: hidden; }
#top.bl-hero .bl-slide:not(.is-off) { will-change: opacity; }
#top.bl-hero .bl-slide.is-on { z-index: 1; }
#top.bl-hero .bl-slide-scrim { position: absolute; inset: 0; pointer-events: none; }
#top.bl-hero .bl-slide-inner {
  position: relative;
  max-width: min(46vw, 760px);
  transform: translate3d(var(--x), var(--y), 0) scale(var(--s));
  transform-origin: 0 50%;
}
#top.bl-hero .bl-slide.is-on .bl-slide-inner,
#top.bl-hero .bl-slide.is-on .bl-intro { pointer-events: auto; }

/* positions: where the copy lands so it sits in the empty part of the frame */
#top.bl-hero .bl-slide[data-pos="left"] .bl-slide-scrim {
  background: linear-gradient(90deg, rgba(5,5,8,.86) 0, rgba(5,5,8,.62) 28%, rgba(5,5,8,.18) 52%, rgba(5,5,8,0) 66%);
}
#top.bl-hero .bl-slide[data-pos="right"] { justify-items: end; }
#top.bl-hero .bl-slide[data-pos="right"] .bl-slide-inner { text-align: right; max-width: min(40vw, 640px); transform-origin: 100% 50%; }
#top.bl-hero .bl-slide[data-pos="right"] .bl-slide-scrim {
  background: linear-gradient(270deg, rgba(5,5,8,.86) 0, rgba(5,5,8,.62) 28%, rgba(5,5,8,.18) 52%, rgba(5,5,8,0) 66%);
}
#top.bl-hero .bl-slide[data-pos="bottom-left"] { align-items: end; padding-bottom: 14vh; }
#top.bl-hero .bl-slide[data-pos="bottom-left"] .bl-slide-scrim,
#top.bl-hero .bl-slide[data-pos="bottom-center"] .bl-slide-scrim {
  background: linear-gradient(0deg, rgba(5,5,8,.9) 0, rgba(5,5,8,.7) 26%, rgba(5,5,8,.25) 50%, rgba(5,5,8,0) 66%);
}
#top.bl-hero .bl-slide[data-pos="bottom-center"] { align-items: end; justify-items: center; padding-bottom: 14vh; }
#top.bl-hero .bl-slide[data-pos="bottom-center"] .bl-slide-inner { text-align: center; max-width: min(64vw, 900px); transform-origin: 50% 100%; }
#top.bl-hero .bl-slide[data-pos="top-left"] { align-items: start; padding-top: calc(var(--bl-nav) + 6vh); }
#top.bl-hero .bl-slide[data-pos="top-right"] { align-items: start; justify-items: end; padding-top: calc(var(--bl-nav) + 6vh); }
#top.bl-hero .bl-slide[data-pos="top-right"] .bl-slide-inner { text-align: right; max-width: min(40vw, 640px); transform-origin: 100% 0; }
#top.bl-hero .bl-slide[data-pos="top-right"] .bl-slide-scrim {
  background:
    linear-gradient(180deg, rgba(5,5,8,.86) 0, rgba(5,5,8,.6) 26%, rgba(5,5,8,.16) 50%, rgba(5,5,8,0) 64%),
    linear-gradient(270deg, rgba(5,5,8,.5) 0, rgba(5,5,8,.2) 24%, rgba(5,5,8,0) 46%);
}
#top.bl-hero .bl-slide[data-pos="top-right"] .bl-rule { margin-left: auto; }
#top.bl-hero .bl-slide[data-pos="top-right"] .bl-cta-row { justify-content: flex-end; }
#top.bl-hero .bl-slide[data-pos="top-left"] .bl-slide-scrim {
  background: linear-gradient(180deg, rgba(5,5,8,.88) 0, rgba(5,5,8,.66) 26%, rgba(5,5,8,.2) 50%, rgba(5,5,8,0) 64%);
}
#top.bl-hero .bl-slide[data-pos="center"] { justify-items: center; }
#top.bl-hero .bl-slide[data-pos="center"] .bl-slide-inner { text-align: center; max-width: min(70vw, 980px); transform-origin: 50% 50%; }
#top.bl-hero .bl-slide[data-pos="center"] .bl-slide-scrim {
  background: radial-gradient(ellipse 62% 56% at 50% 52%, rgba(5,5,8,.78), rgba(5,5,8,.42) 55%, rgba(5,5,8,0) 100%);
}

/* ── Type ────────────────────────────────────────────────────────────────── */
#top.bl-hero .bl-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: .26em;
  color: var(--bl-orange);
  margin: 0 0 22px;
}
#top.bl-hero h1, #top.bl-hero h2 {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bl-cream) !important;
  margin: 0 !important;
  text-wrap: balance;
}
#top.bl-hero h1 { font-size: clamp(46px, 5.4vw, 92px) !important; line-height: .94 !important; letter-spacing: .01em !important; max-width: none !important; }
#top.bl-hero h2 { font-size: clamp(38px, 4.6vw, 78px); line-height: .96; }
#top.bl-hero h1 span, #top.bl-hero h2 span { font-size: inherit !important; }
#top.bl-hero .bl-orange { color: var(--bl-orange) !important; }
#top.bl-hero .bl-gold { color: var(--bl-gold) !important; }
#top.bl-hero .bl-flicker { animation: none; }
#top.bl-hero .bl-rule { height: 4px; width: 260px; max-width: 40%; background: var(--bl-orange); margin: 30px 0 24px; }
#top.bl-hero .bl-slide[data-pos="right"] .bl-rule { margin-left: auto; }
#top.bl-hero .bl-slide[data-pos="bottom-center"] .bl-rule,
#top.bl-hero .bl-slide[data-pos="center"] .bl-rule { margin-inline: auto; }
#top.bl-hero p {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.25vw, 21px) !important;
  line-height: 1.55 !important;
  color: rgba(248,245,239,.86) !important;
  max-width: 34em !important;
  margin: 22px 0 0 !important;
}
#top.bl-hero .bl-slide-1 p { max-width: 30em !important; }
#top.bl-hero .bl-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; }
#top.bl-hero .bl-slide[data-pos="right"] .bl-cta-row { justify-content: flex-end; }
#top.bl-hero .bl-slide[data-pos="center"] .bl-cta-row,
#top.bl-hero .bl-slide[data-pos="bottom-center"] .bl-cta-row { justify-content: center; }
#top.bl-hero .bl-cta {
  display: inline-flex;
  align-items: stretch;
  color: var(--bl-ink) !important;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.9,.3,1), filter .2s ease;
}
#top.bl-hero .bl-cta:hover, #top.bl-hero .bl-cta:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
#top.bl-hero .bl-cta:focus-visible { outline: 2px solid var(--bl-gold); outline-offset: 3px; }
#top.bl-hero .bl-cta > span:first-child {
  display: flex; align-items: center; justify-content: center;
  background: var(--bl-orange); color: var(--bl-ink);
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase;
  padding: 17px 22px;
}
#top.bl-hero .bl-cta > span:last-child { display: flex; align-items: center; background: var(--bl-gold); padding: 0 14px; }
#top.bl-hero .bl-cta svg { display: block; }
#top.bl-hero .bl-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bl-cream) !important; text-decoration: none;
  border-bottom: 1px solid rgba(248,245,239,.35); padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
#top.bl-hero .bl-cta-ghost:hover, #top.bl-hero .bl-cta-ghost:focus-visible { color: var(--bl-gold) !important; border-color: var(--bl-gold); }
#top.bl-hero .bl-note { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; color: #b8b1a6; }
#top.bl-hero .bl-note b { color: var(--bl-cream); font-weight: 700; }

/* LEVEL UP: the closing card gets the biggest type on the page */
#top.bl-hero .bl-slide-8 h2 { font-size: clamp(64px, 9vw, 168px); line-height: .9; }
#top.bl-hero .bl-slide-8 p { font-size: clamp(18px, 1.5vw, 24px) !important; max-width: 26em !important; }

/* ── Slide 1: copy left, Devin in the middle, the intro card right ───────── */
#top.bl-hero .bl-slide-1 { grid-template-columns: minmax(0, 1fr) auto; column-gap: 4vw; justify-items: stretch; }
#top.bl-hero .bl-slide-1 .bl-slide-inner { max-width: min(48vw, 780px); justify-self: start; }
#top.bl-hero .bl-slide-1 .bl-slide-scrim {
  background:
    linear-gradient(90deg, rgba(5,5,8,.84) 0, rgba(5,5,8,.58) 26%, rgba(5,5,8,.14) 50%, rgba(5,5,8,0) 60%),
    linear-gradient(270deg, rgba(5,5,8,.55) 0, rgba(5,5,8,.2) 16%, rgba(5,5,8,0) 30%);
}
#top.bl-hero .bl-intro {
  position: relative;
  justify-self: end;
  align-self: center;
  width: clamp(200px, 15.5vw, 290px);
  translate: calc(var(--x) * -0.6) 0;
  opacity: min(1, calc(var(--o) * 1.2));
}
#top.bl-hero .bl-intro-card,
#top.bl-hero .homepage-hero-intro {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 !important;
  background: var(--bl-ink);
  border: 1px solid rgba(248,245,239,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  overflow: hidden;
}
#top.bl-hero .homepage-hero-intro .boss-hero-video {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; background: var(--bl-ink);
}
#top.bl-hero .bl-intro-badge {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 14px 14px 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; line-height: 1.5;
  color: var(--bl-cream);
  background: linear-gradient(0deg, rgba(5,5,8,.85), rgba(5,5,8,0));
}
#top.bl-hero .bl-intro-badge b { color: var(--bl-gold); font-weight: 700; }
#top.bl-hero .homepage-hero-intro .boss-hero-play { z-index: 3; }
#top.bl-hero .bl-intro-close {
  position: absolute; top: -14px; right: -14px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(248,245,239,.3); background: var(--bl-ink); color: var(--bl-cream);
  font: 22px/1 'Archivo', sans-serif; cursor: pointer; display: none;
}
#top.bl-hero .bl-intro.is-expanded {
  position: fixed; inset: 0; z-index: 2147483000;
  width: auto; translate: 0 0; opacity: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,8,.86);
  backdrop-filter: blur(10px);
  padding: 24px;
}
#top.bl-hero .bl-intro.is-expanded .homepage-hero-intro { width: min(92vw, calc(88vh * 9 / 16)) !important; }
#top.bl-hero .bl-intro.is-expanded .bl-intro-close { display: block; top: 22px; right: 22px; }
#top.bl-hero .bl-intro.is-expanded .bl-intro-badge { display: none; }

/* ── HUD ─────────────────────────────────────────────────────────────────── */
#top.bl-hero .bl-hud {
  position: absolute; left: 5vw; right: 5vw; bottom: 30px; z-index: 4;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  pointer-events: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .24em; color: #b8b1a6;
}
#top.bl-hero .bl-hud-stage { display: flex; align-items: center; gap: 14px; }
#top.bl-hero .bl-hud-num { color: var(--bl-cream); }
#top.bl-hero .bl-hud-name { color: var(--bl-gold); }
#top.bl-hero .bl-hud-meter { display: flex; gap: 3px; }
#top.bl-hero .bl-hud-meter span { display: block; width: 9px; height: 14px; background: rgba(248,245,239,.16); transition: background .3s ease, box-shadow .3s ease; }
#top.bl-hero .bl-hud-meter span.lit { background: var(--bl-orange); }
#top.bl-hero .bl-hud-meter span.now { background: var(--bl-gold); }
#top.bl-hero .bl-hud-scroll {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  letter-spacing: .3em; color: #b8b1a6;
  animation: blPulse 2.4s ease-in-out infinite;
  transition: opacity .4s ease;
}
#top.bl-hero .bl-hud-scroll.is-hidden { opacity: 0; animation: none; visibility: hidden; }

/* Reduced motion uses one still per scene, with no translation or zoom. */
@media (prefers-reduced-motion: reduce) {
  #top.bl-hero .bl-slide-inner,
  #top.bl-hero .bl-slide-inner > *,
  #top.bl-hero .bl-intro { transform: none !important; translate: 0 0 !important; scale: 1 !important; }
  #top.bl-hero .bl-flicker, #top.bl-hero .bl-hud-scroll, #top.bl-hero .bl-hud-meter span.now { animation: none; }
}

/* ── Light theme: the film is the film; copy stays cream over the scrims ─── */
html[data-boss-theme="light"] #top.bl-hero,
html[data-boss-theme="light"] #top.bl-hero h1,
html[data-boss-theme="light"] #top.bl-hero h2 { color: var(--bl-cream) !important; }
html[data-boss-theme="light"] #top.bl-hero p { color: rgba(248,245,239,.86) !important; }
html[data-boss-theme="light"] #top.bl-hero .bl-orange { color: var(--bl-orange) !important; }
html[data-boss-theme="light"] #top.bl-hero .bl-gold { color: var(--bl-gold) !important; }
html[data-boss-theme="light"] #top.bl-hero { background: var(--bl-ink) !important; }

/* ── Narrow and portrait: every slide anchors to the bottom over a scrim ─── */
@media (max-width: 800px), (max-aspect-ratio: 4/5) {
  #top.bl-hero { --bl-nav: 64px; }
  #top.bl-hero .bl-slide,
  #top.bl-hero .bl-slide[data-pos] {
    align-items: end; justify-items: start;
    padding: calc(var(--bl-nav) + 2vh) 20px 66px;
    grid-template-columns: 1fr;
  }
  #top.bl-hero .bl-slide-inner,
  #top.bl-hero .bl-slide[data-pos] .bl-slide-inner { max-width: 100%; text-align: left; transform-origin: 0 100%; }
  #top.bl-hero .bl-slide .bl-slide-scrim,
  #top.bl-hero .bl-slide[data-pos] .bl-slide-scrim,
  #top.bl-hero .bl-slide-1 .bl-slide-scrim {
    background: linear-gradient(0deg, rgba(5,5,8,.94) 0, rgba(5,5,8,.8) 28%, rgba(5,5,8,.42) 52%, rgba(5,5,8,0) 72%);
  }
  #top.bl-hero .bl-kicker { font-size: 10px; letter-spacing: .16em; margin-bottom: 14px; }
  #top.bl-hero h1 { font-size: clamp(36px, 10vw, 60px) !important; line-height: .94 !important; }
  #top.bl-hero h2 { font-size: clamp(32px, 9.4vw, 56px); }
  #top.bl-hero .bl-slide-8 h2 { font-size: clamp(56px, 18vw, 96px); }
  #top.bl-hero .bl-rule { margin: 18px 0 14px; width: 120px; }
  #top.bl-hero p { font-size: 15px !important; line-height: 1.45 !important; margin-top: 14px !important; max-width: 100% !important; }
  #top.bl-hero .bl-note { letter-spacing: .1em; }
  #top.bl-hero .bl-slide-8 p { font-size: 17px !important; }
  #top.bl-hero .bl-cta-row { margin-top: 20px; gap: 12px 18px; }
  #top.bl-hero .bl-slide[data-pos="right"] .bl-cta-row,
  #top.bl-hero .bl-slide[data-pos="top-right"] .bl-cta-row,
  #top.bl-hero .bl-slide[data-pos="center"] .bl-cta-row { justify-content: flex-start; }
  #top.bl-hero .bl-cta > span:first-child { padding: 15px 18px; font-size: 14px; }
  #top.bl-hero .bl-slide[data-pos="right"] .bl-rule,
  #top.bl-hero .bl-slide[data-pos="top-right"] .bl-rule,
  #top.bl-hero .bl-slide[data-pos="center"] .bl-rule,
  #top.bl-hero .bl-slide[data-pos="bottom-center"] .bl-rule { margin-inline: 0; }
  /* slide 1: the intro becomes a compact console row under the CTA */
  #top.bl-hero .bl-slide-1 .bl-slide-inner { max-width: 100%; }
  #top.bl-hero .bl-intro {
    justify-self: start; align-self: end; width: 100%; translate: 0 0;
    margin-top: 12px;
  }
  #top.bl-hero .bl-intro:not(.is-expanded) .homepage-hero-intro {
    aspect-ratio: auto !important; height: 52px; display: flex; align-items: center;
    width: 100% !important; max-width: 420px !important;
    box-shadow: none;
  }
  #top.bl-hero .bl-intro:not(.is-expanded) .homepage-hero-intro .boss-hero-video {
    position: relative; width: 30px !important; height: 52px !important; flex: 0 0 30px;
  }
  #top.bl-hero .bl-intro:not(.is-expanded) .bl-intro-badge {
    position: static; background: none; padding: 0 14px; font-size: 10px; letter-spacing: .14em;
  }
  #top.bl-hero .bl-intro:not(.is-expanded) .homepage-hero-intro .boss-hero-play { background: none; justify-content: flex-end; padding-right: 14px; }
  #top.bl-hero .bl-intro:not(.is-expanded) .homepage-hero-intro .boss-hero-play-icon { width: 32px; height: 32px; }
  #top.bl-hero .bl-intro:not(.is-expanded) .homepage-hero-intro .boss-hero-play-icon::before { border-width: 8px 0 8px 13px; }
  #top.bl-hero .bl-hud { left: 20px; right: 20px; bottom: 22px; font-size: 10px; letter-spacing: .18em; }
  #top.bl-hero .bl-hud-name { display: none; }
  #top.bl-hero .bl-hud-scroll { display: none; }
  #top.bl-hero .bl-hero-shade {
    background:
      linear-gradient(180deg, rgba(5,5,8,.66) 0, rgba(5,5,8,.2) 12%, rgba(5,5,8,0) 22%),
      linear-gradient(0deg, rgba(5,5,8,.5) 0, rgba(5,5,8,0) 16%);
  }
}
@media (max-width: 800px) and (max-height: 700px) {
  #top.bl-hero .bl-slide, #top.bl-hero .bl-slide[data-pos] { padding-bottom: 64px; }
  #top.bl-hero h1 { font-size: clamp(34px, 9.5vw, 52px) !important; }
  #top.bl-hero p { font-size: 15px !important; }
  #top.bl-hero .bl-slide-1 p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}