/* Core Team shares one camera and particle field with the globe ahead. The flight is
   through the Hero's grey sky, so everything here keeps the page's own palette. */
.s-team.team-flight {
  --team-sky: 0px;
  --team-note: 0;
  height: 540svh;
  min-height: 0;
  padding: 0;
}
.s-team.team-flight .team-panel {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.s-team.team-flight.is-fixing .team-panel { position: fixed; inset: 0; height: 100vh; }
.team-flight .team-stage {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
}
/* The board: the head spans the column's height, eyebrow at the top, the title low on the
   left over the passing portraits; the copy low on the right in a narrow column */
.team-flight .team-head {
  position: absolute;
  inset: clamp(100px, 14svh, 160px) auto 9svh var(--page-x);
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  /* Stays for the whole flight; team-flight.js sends its lines out through their masks */
  z-index: 1100;
  pointer-events: none;
}
.team-flight .team-title {
  max-width: 4.6em; /* "The / people / behind it" */
  margin: 0;
  font-size: clamp(42px, 5.7vw, 88px);
  line-height: 1.05;
  text-align: left;
  /* Solid ink, no gradient: background-clip text inside a block that moves every scroll
     frame (--team-intro) flickers in Chrome */
  color: var(--ink);
  background: none;
}
.team-flight .team-title .rli { background: none; color: inherit; }
.team-flight .team-lead {
  position: absolute;
  left: 75%;
  bottom: 9svh;
  width: min(260px, 18vw);
  font-size: 13px;
  z-index: 1100;
  pointer-events: none;
}
.team-flight .team-note {
  position: absolute;
  top: auto;
  right: var(--page-x);
  bottom: 9svh;
  opacity: var(--team-note);
  pointer-events: none;
}
.team-flight .team-photo {
  position: absolute;
  inset: 0 auto auto 0;
  width: 320px;
  aspect-ratio: 4 / 5; /* team-flight.js sets each plate's own ratio */
  translate: none;
  transform-origin: center;
  visibility: hidden;
  overflow: visible; /* the caption hangs below the plate */
  background: var(--white); /* the cut-out photo on a white plate */
  will-change: transform, width;
  pointer-events: none;
}
.team-flight .team-img {
  height: 100%;
  object-position: 50% 18%;
  clip-path: none !important;
  transition: none;
}
/* Name and role: under the plate, not in it (they scale and move with it) */
.team-flight .team-person {
  position: absolute;
  inset: 100% auto auto 0; /* hangs from the plate's left corner, not fitted to its width */
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 0 0;
  white-space: nowrap; /* name and role stay one line each whatever the plate's width */
  color: var(--ink);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.team-person small { color: var(--muted); font-size: 11px; font-weight: 300; letter-spacing: .02em; }
/* In the legacy board, captions retain the same position inside each portrait. */
.s-team:not(.team-flight) .team-person { display: none; }
/* (300 -> 250svh: the stats stand at 64% of the run, and the old tail left ~70svh of dead
   scroll before the contact copy came up) */
html.has-team-flight.has-presence-story .s-presence { margin-top: -100svh; height: 250svh; }
@media (max-width: 768px) {
  .team-flight .team-head { top: 106px; gap: 16px; }
  .team-flight .team-title { font-size: clamp(38px, 10vw, 56px); max-width: 4.6em; }
  .team-flight .team-head { bottom: 7svh; }
  /* Narrow screens: the copy goes top-right, clear of the title at the bottom-left */
  .team-flight .team-lead { left: auto; right: 24px; top: 106px; bottom: auto; width: min(220px, 44vw); font-size: 12px; }
  .team-flight .team-note { bottom: 7svh; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-team.team-flight { height: auto; min-height: 100svh; }
  .s-team.team-flight .team-panel { position: relative; height: auto; overflow: visible; }
  .team-flight .team-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px; height: auto; padding: 110px var(--page-x) 80px; }
  .team-flight .team-head, .team-flight .team-lead, .team-flight .team-note { position: static; grid-column: 1 / -1; opacity: 1; width: auto; translate: none; }
  .team-flight .team-photo { position: relative; width: calc(100% * var(--team-size, 1)); min-width: 0; margin-bottom: 60px; visibility: visible; will-change: auto; }
  .team-flight .team-person { width: 100%; padding: 12px 0 0; font-size: 14px; line-height: 1.2; white-space: normal; }
  html.has-team-flight.has-presence-story .s-presence { margin-top: 0; height: 240svh; }
}