/* ============================================================
   hero.css — the sky stage and the card that climbs with scroll
   ============================================================ */

.stage {
  position: relative;
  height: 240vh;            /* fallback for engines without dvh */
  height: 240dvh;           /* 1 screen pinned + 1.4 screens of runway */
}

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;

  /* Card geometry lives here so the scroll cue can read it too. */
  --hmin: 47dvh;                                   /* JS replaces this with a measured px value */
  --hmax: calc(100dvh - (var(--gut) * 2));
  --cardh: calc(var(--hmin) + (var(--hmax) - var(--hmin)) * var(--p));
}

@media (max-width: 720px) {
  /* Keep the sticky runway stable while mobile browser chrome opens/closes.
     `dvh` changes during the gesture and can tug the following team panel
     into view before the hero has finished. */
  .stage { height: 210vh; }
  .pin {
    height: 100vh;
    height: 100svh;
    --hmin: 56vh;
    --hmin: 56svh;
    --hmax: calc(100vh - (var(--gut) * 2));
    --hmax: calc(100svh - (var(--gut) * 2));
  }
}

/* ---------- sky ---------- */

.sky {
  position: absolute;
  inset: 0;
  background: #4d7fc4;
}
.sky__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sky::after {                        /* scrim so white overlay type stays legible */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.45) 0%, rgba(10, 20, 40, 0) 34%);
  pointer-events: none;
}

/* ---------- overlay type on the sky ---------- */

.overlay {
  position: absolute;
  inset: 0;
  padding: calc(var(--gut) + 14px) calc(var(--gut) + 14px) 0;
  padding:
    calc(var(--gut) + 14px + env(safe-area-inset-top, 0px))
    calc(var(--gut) + 14px + env(safe-area-inset-right, 0px))
    0
    calc(var(--gut) + 14px + env(safe-area-inset-left, 0px));
  color: #fff;
  pointer-events: none;
  opacity: calc(1 - var(--p) * 1.75);   /* gone by the time the card reaches it */
}

.overlay__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-family: var(--display);
  font-stretch: 115%;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wordmark .mark { width: 1.6em; height: 1.6em; }

/* UTC date label */
.stamp {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* sits just above the card's top edge and rides up with it */
.cue {
  position: absolute;
  left: calc(var(--gut) + 14px);
  left: calc(var(--gut) + 14px + env(safe-area-inset-left, 0px));
  bottom: calc(var(--cardh) + var(--gut) + 16px);
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 12px rgba(8, 16, 32, 0.5);
}

/* ---------- the card ---------- */

.card {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  left: calc(var(--gut) + env(safe-area-inset-left, 0px));
  right: calc(var(--gut) + env(safe-area-inset-right, 0px));
  bottom: var(--gut);
  height: var(--cardh);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 24px 70px -20px rgba(6, 14, 30, 0.45);
}

/* strip glued to the card's top edge, so growth is legible */
.strip {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--rule);
  color: var(--slate);
}
.strip b { color: var(--ink); font-weight: 500; }
.strip__state { color: var(--slate); white-space: nowrap; }

.card__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4.4vw, 54px) var(--pad) var(--pad);
}

.card__main {
  flex: none;
  display: block;
}

.card__intro { min-width: 0; }

.card h1 {
  margin: 0 0 0.5em;
  font-stretch: 112%;
  font-size: clamp(31px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.032em;
  max-width: 17ch;
}
.card h1 em {
  display: block;          /* the break belongs between the two halves */
  font-style: normal;
  color: var(--slate);
}

.lede {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.lede p { margin: 0 0 0.9em; }
.lede p:last-child { margin-bottom: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2.6vw, 30px);
}

/* team carousel */
.team {
  min-width: 0;
  margin: clamp(42px, 5vw, 70px) 0 0;
}
.team__viewport {
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  overscroll-behavior-inline: contain;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.team__viewport.is-dragging { cursor: grabbing; }
.team__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.4vw, 46px);
  width: max-content;
  min-height: 264px;
  margin: 0;
  padding: 22px 0;
  list-style: none;
  will-change: transform;
}
.team__track li {
  flex: 0 0 176px;
  transform: scale(var(--team-scale, 0.78));
  transform-origin: center;
  opacity: var(--team-opacity, 0.5);
  will-change: transform, opacity;
}
.team__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
.team__person img {
  width: 100px;
  height: 100px;
  border: 1px solid var(--night-rule);
  border-radius: 50%;
  object-fit: cover;
  background: var(--night-rule);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.8);
  -webkit-user-drag: none;
}
.team__person strong,
.team__person small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team__person strong {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.team__person small {
  margin-top: 5px;
  color: var(--night-slate);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: none;
}
.team__stats {
  display: block;
  margin-top: 7px;
  color: var(--night-slate);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.team__stats b {
  color: #c3cad3;
  font-weight: 500;
}
.team__person:hover strong { text-decoration: underline; }

/* second tier — the company signal that earns space once the card is tall */
.backers {
  margin: auto 0 0;
  padding-top: clamp(20px, 2.6vw, 34px);
  border-top: 1px solid var(--rule);
  opacity: calc((var(--p) - 0.5) * 3.2);
  transform: translateY(calc((1 - var(--p)) * 18px));
}
.backers__label {
  margin: 0 0 14px;
  color: var(--slate);
}
.backers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px clamp(14px, 2.5vw, 32px);
}
.backers__list li {
  font-family: var(--display);
  font-stretch: 108%;
  font-weight: 600;
  font-size: clamp(13px, 1.45vw, 18px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.backers__more { color: var(--slate); }

/* ---------- phones ---------- */

/* The backers collapse into a compact grid on smaller screens. */
@media (max-width: 720px) {
  .team { margin-top: 36px; }
  .team__track { gap: 22px; min-height: 210px; padding: 18px 0; }
  .team__track li { flex-basis: 150px; }
  .team__person img { width: 76px; height: 76px; }
  .team__person strong { font-size: 12px; }
  .team__person small { font-size: 8px; }
  .team__stats { display: none; }
  .backers { padding-top: 18px; }
  .backers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .strip__state { display: none; }
  .card__body { padding-top: 26px; }
  .card h1 {
    max-width: 15ch;
    margin-bottom: 0.65em;
    font-size: clamp(29px, 8.2vw, 35px);
    line-height: 1.02;
  }
  .lede {
    max-width: none;
    font-size: 15px;
    line-height: 1.5;
  }
  .actions { margin-top: 18px; }
  .actions .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 360px) {
  .strip__where { display: none; }
  .alt__val { font-size: 22px; }
  .tape i { width: 2px; }
}

/* ---------- phone in landscape / very short windows ---------- */

/* Compact narrow phones before the measured card runs out of vertical room.
   Wider windows keep the original short-landscape threshold. */
@media (max-height: 560px), (max-width: 480px) and (max-height: 700px) {
  .card h1 { font-size: clamp(24px, 4.4vh, 40px); margin-bottom: 0.4em; }
  .lede { font-size: 14px; line-height: 1.45; max-width: 60ch; }
  .card__body { padding-top: 18px; }
  .actions { margin-top: 14px; }
  .actions .btn { flex-basis: 0; min-width: 0; padding: 11px 16px; }
  .btn__wide { display: none; }
  .btn__compact { display: inline; }
  .backers { padding-top: 16px; }
  .backers__label { margin-bottom: 8px; }
  .backers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .backers__list li { font-size: 12px; }
  .cue { display: none; }
}

/* ---------- reduced motion : no growth choreography ---------- */

@media (prefers-reduced-motion: reduce) {
  .stage { height: 100vh; height: 100dvh; }
  .pin { --cardh: var(--hmax); }
  .overlay { display: none; }
  .backers { opacity: 1; transform: none; }
}