/* Meet the team. One circuit, every face: the team's working session develops into
   colour, the ZTA hub lands on its edge, and a trace runs from it to the people the client
   meets at kickoff, then leadership, then the whole team, and last to the client, drawn as
   the newest member of the team. The circuit itself is drawn by team.js into
   svg.team-lines; this file lays out the people so that it never crosses a face or a line
   of text (it runs down the centre, and passes behind the middle leadership card: in at its
   photo, out below its last line). */

.team {
  --tg: var(--gutter); /* the page's gutter: the section shares the page's one column */
  --rail-x: 18px;      /* the masthead rail, from the content's left edge (in the margin when wide) */
  --lane: 0px;         /* phones: the lane the rail runs down, left of everything */
  --card: #141418;
  --ring: 0 0 0 1px var(--cloud-14);
  --yours-ring: 0 0 0 2px var(--yellow);
  /* A short bottom: the circuit runs on from the client's card into the roadmap card below
     (see .after in styles.css), so the two read as one step, not two sections. */
  padding: 136px 0 64px;
}
@media (max-width: 899px) {
  .team { --rail-x: 12px; --lane: 44px; padding: 96px 0 52px; }
}
@media (max-width: 599px) {
  .team { padding: 80px 0 40px; }
}

:where(.team) :where(h3, h4, figure, ul) { margin: 0; }
:where(.team) :where(ul) { padding: 0; list-style: none; }

.team-wide {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--tg), 1280px);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .team-head,
  .kick,
  .lead-head,
  .crew-group {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* The circuit: resting traces, nodes, and the flares that run along them. */
.team-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.team-lines .rest,
.after-trace .rest {
  fill: none;
  stroke: rgb(237 242 10 / 0.28);
  stroke-width: 1.25;
  stroke-linejoin: round;
  transition: stroke 300ms var(--ease);
}
.team-lines .rest.is-hot { stroke: rgb(237 242 10 / 0.6); }
.team-lines .rest.is-yours {
  stroke: rgb(237 242 10 / 0.85);
  stroke-width: 1.5;
}
.team-lines .glow {
  fill: none;
  stroke: rgb(237 242 10 / 0.18);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.team-lines .node {
  fill: var(--graphite);
  stroke: var(--yellow);
  stroke-width: 1.25;
  transform-box: fill-box;
  transform-origin: center;
}
.team-lines .ping {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.25;
  transform-box: fill-box;
  transform-origin: center;
}
.team-lines .is-off { opacity: 0; }
.zta-flare path {
  fill: none;
  stroke: #edf20a;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zta-flare .bloom { stroke-width: 12; stroke-opacity: 0.12; }
.zta-flare .halo { stroke-width: 6; stroke-opacity: 0.35; }
.zta-flare .core { stroke-width: 2.25; }

/* Head ------------------------------------------------------------------ */

.team-head h2 {
  margin-top: 14px;
  font: 650 clamp(2.5rem, 1.6rem + 3vw, 4.5rem)/1.02 var(--display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.team-lede {
  max-width: 38ch;
  margin-top: 20px;
  color: var(--cloud-72);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
/* Stacked like every other header on the page: eyebrow, title, then the lede under it. */
@media (min-width: 900px) {
  .team-head .eyebrow,
  .team-head h2,
  .team-lede { grid-column: 1 / 8; }
}

/* The working session, full bleed, with the hub on its lower edge. -------- */

.team-film {
  position: relative;
  z-index: 1;
  /* An explicit width: otherwise max-height transfers through the aspect ratio into a
     max-width, and on big screens the photo (and the hub) stop short of full bleed. */
  width: 100%;
  margin-top: 56px;
  aspect-ratio: 2.25 / 1;
  max-height: min(720px, 78vh);
  background: var(--card);
}
.team-film picture {
  display: block;
  height: 100%;
  overflow: hidden;
}
.team-film img,
.team-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.team-film img { transition: filter 1600ms var(--ease-out), transform 2400ms var(--ease-out); }
.team-film.is-pending img {
  filter: grayscale(1) brightness(0.5);
  transform: scale(1.06);
}
.team-film::before,
.team-film::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The page's lattice, faint, over the bottom of the photo. */
.team-film::before {
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 0.5 71.5 36 36 71.5 0.5 36Z' fill='none' stroke='%23F6F7F8' stroke-opacity='0.06'/%3E%3C/svg%3E");
  background-size: 72px 72px;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 40%);
  mask-image: linear-gradient(to top, #000, transparent 40%);
}
.team-film::after {
  z-index: 0;
  background: linear-gradient(180deg, rgb(11 11 13 / 0.55) 0%, rgb(11 11 13 / 0) 18%, rgb(11 11 13 / 0) 58%, rgb(11 11 13 / 0.9) 100%);
}
.team-film video { position: absolute; inset: 0; opacity: 0; }

.team-film-cap {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: max(var(--tg), (100% - 1280px) / 2);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cloud-72);
  font: 700 0.75rem/1.3 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.team-film-cap::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  background: var(--yellow);
  transform: rotate(45deg);
}

.team-hub {
  --inset: 18px;
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  translate: -50% 50%;
}
.team-hub::before,
.team-hub::after {
  content: "";
  position: absolute;
  inset: var(--inset);
  transform: rotate(45deg);
}
.team-hub::before {
  border: 1.5px solid rgb(237 242 10 / 0.8);
  background: var(--graphite);
  box-shadow: 0 0 36px rgb(237 242 10 / 0.28);
}
.team-hub::after {
  border: 1.5px solid var(--yellow);
  opacity: 0;
}
.team-hub svg { position: relative; width: 30px; height: 30px; color: var(--cloud); }
.team-hub path { fill: currentColor; }
.team-hub.is-pending { opacity: 0; }

/* The team film (once Abdul-Raafe's cut is in): pause and play. */
.team-film-toggle,
.team-film-play {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: rgb(11 11 13 / 0.6);
  color: var(--cloud);
  font: 600 0.875rem/1 var(--body);
  cursor: pointer;
}
.team-film-toggle { width: 40px; height: 40px; }
.team-film-play { min-height: 40px; padding: 0 16px 0 12px; }
.team-film-toggle svg,
.team-film-play svg { width: 16px; height: 16px; fill: currentColor; }
.team-film.has-video .team-film-cap { right: auto; }
.team-film.has-video .team-film-play:not([hidden]) ~ .team-film-toggle { display: none; }

@media (max-width: 899px) {
  .team-film { aspect-ratio: 2 / 1; max-height: none; }
  .team-film-cap { left: auto; right: var(--tg); bottom: 16px; }
  .team-film.has-video .team-film-cap { right: 72px; }
  .team-hub {
    --inset: 13px;
    left: calc(var(--tg) + 12px);
    width: 64px;
    height: 64px;
  }
  .team-hub svg { width: 22px; height: 22px; }
}
@media (max-width: 599px) {
  .team-film { aspect-ratio: 5 / 4; }
}

/* Shared: tags, plates, framed photos. ----------------------------------- */

.team .tag {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 0.6875rem/1.3 var(--body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.team .tag { background: var(--yellow); color: var(--graphite); }

.plate {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #1a1a20;
  color: var(--cloud-72);
}
/* Someone the link doesn't name yet: a plate on the page's lattice. The lead's carries our mark
   on a circuit node, like the hub on the team photo; the engineer's shows our engineers. */
.plate--open {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 0.5 23.5 12 12 23.5 0.5 12Z' fill='none' stroke='%23F6F7F8' stroke-opacity='0.08'/%3E%3C/svg%3E") center / 24px 24px,
    radial-gradient(closest-side, rgb(237 242 10 / 0.08), rgb(237 242 10 / 0)),
    #16161b;
}
.plate-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
}
.plate-node::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1.5px solid rgb(237 242 10 / 0.8);
  background: var(--graphite);
  box-shadow: 0 0 28px rgb(237 242 10 / 0.25);
  transform: rotate(45deg);
}
.plate-node svg {
  position: relative;
  width: 22px;
  height: 22px;
  color: var(--cloud);
}
/* Two by two, on the phone's plate (88px) as on the desktop's (96px). */
.plate-faces {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  gap: 5px;
  padding: 6px;
}
.plate-face {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: #1f1f26;
  box-shadow: 0 0 0 1px var(--cloud-14);
  color: var(--cloud-72);
  font: 650 0.75rem/1 var(--display);
  letter-spacing: 0.02em;
}
.plate--initials {
  font: 650 1.75rem/1 var(--display);
  letter-spacing: -0.02em;
}
/* The client's plate: their initials, lit in the circuit's yellow over its lattice. Until
   the circuit reaches them it is grey, like every frame it has not reached yet. */
.plate--you {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 0.5 27.5 14 14 27.5 0.5 14Z' fill='none' stroke='%230B0B0D' stroke-opacity='0.12'/%3E%3C/svg%3E") center / 28px 28px,
    var(--yellow);
  color: var(--graphite);
  font: 650 2.25rem/1 var(--display);
  letter-spacing: -0.04em;
}
/* The lead's open seat: the team in the office (the photo the circuit starts from), with our node
   on its corner, until the link names their lead. */
.plate--office { position: relative; overflow: hidden; }
.plate--office picture,
.plate--office img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plate--office img {
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(0.9) brightness(0.9);
}
.plate--office .plate-node {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: scale(0.6);
  transform-origin: 100% 100%;
}
/* Until the link names them, the client's plate carries our mark. */
.plate-mark { width: 84%; height: auto; }

.lp-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--ring);
}
.lp-photo picture,
.lp-photo img,
.member-photo picture,
.member-photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.lp-photo img,
.member-photo img { object-fit: cover; }
[data-trace] img,
[data-trace] .plate { transition: filter 700ms var(--ease-out); }
[data-trace].is-pending img,
[data-trace].is-pending .plate { filter: grayscale(1) brightness(0.6); }
/* Phones light each person as they reach the reading band, so what waits stays softer meanwhile. */
@media (max-width: 899px) {
  [data-trace].is-pending img { filter: grayscale(0.5) brightness(0.85); }
}
/* A plate's own faces are dimmed once, with the plate. */
[data-trace].is-pending .plate img { filter: none; }
@keyframes frame-reach {
  from { box-shadow: 0 0 0 1.5px rgb(237 242 10 / 0.9); }
}
.lp-photo.is-reached,
.kick-card.is-reached { animation: frame-reach 900ms var(--ease-out); }
.lp.is-yours .lp-photo { box-shadow: var(--yours-ring); }

/* A person as a card: the people at the kickoff, and the client at the very end. ------- */

.member {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "tags tags" "name name" "photo title" "photo line";
  column-gap: 16px;
  align-content: start;
  padding: 16px 16px 18px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 0 0 1px rgb(246 247 248 / 0.1);
}
.member-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.member-photo {
  grid-area: photo;
  width: 96px;
  height: 120px;
  overflow: hidden;
  border-radius: 12px;
  background: #1a1a20;
}
/* The name gets the card's full width (a full name never wraps beside the photo);
   the photo sits under it, beside the title and the line. */
.member-name {
  grid-area: name;
  margin-bottom: 16px;
  font: 650 1.5rem/1.1 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Job titles read as written, in sentence case, the same on every card and in the directory. */
.member-title {
  grid-area: title;
  margin-bottom: 8px;
  color: var(--cloud-56);
  font: 500 0.875rem/1.4 var(--body);
  text-wrap: balance;
}
.member-line {
  grid-area: line;
  color: var(--cloud-72);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.member.is-yours {
  box-shadow: 0 0 0 1.5px rgb(237 242 10 / 0.7), 0 0 40px -8px rgb(237 242 10 / 0.35);
}
.member.is-yours .member-photo { box-shadow: var(--yours-ring); }
@media (max-width: 899px) {
  .member { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; }
  .member-photo { width: 88px; height: 110px; }
}
/* Small phones: a smaller photo beside the title, and the line under both at the card's full
   width, so it never runs down a narrow strip beside the photo. */
@media (max-width: 420px) {
  .kick-card {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "tags tags" "name name" "photo title" "line line";
  }
  .kick-card .member-photo { width: 72px; height: 90px; }
  .kick-card .member-title { align-self: center; margin: 0; }
  .kick-card .member-line { margin-top: 12px; }
  /* A seat the link doesn't name has no title: its line takes the room beside the plate. */
  .kick-card:has(> .member-title[hidden]) { grid-template-areas: "tags tags" "name name" "photo line"; }
  .kick-card:has(> .member-title[hidden]) .member-line { align-self: center; margin-top: 0; }
  /* Our four engineers, two by two, on the smaller plate. */
  .kick-card .plate-faces { gap: 4px; padding: 4px; }
  .kick-card .plate-face { width: 27px; height: 27px; }
}

/* Tier 1: who they meet at kickoff. Kensho hosts, with their client delivery lead and one
   of our engineers (or Kensho alone when he is their lead too). ---------------------------- */

/* One step between the tiers: photo to kickoff, kickoff to leadership, leadership to the photo
   strip, the strip to the whole team. */
.team-stage { margin-top: 112px; }
/* One sub-heading size for the team's three tiers: "Who you'll meet", leadership, the whole team. */
.kick-intro h3,
.lead-head h3,
.crew-head h3 {
  margin-top: 12px;
  font: 650 clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem)/1.1 var(--display);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.kick-text {
  max-width: 34ch;
  margin-top: 14px;
  color: var(--cloud-72);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.kick-cards {
  display: grid;
  align-items: start;
  gap: 16px;
  margin-top: 32px;
}
.kick-card { --attach: left; }
/* Before the link names anyone, the "name" is a description: quieter, on a line as tall as a
   name's, so its plate lines up with the photos beside it. */
.kick-card:not(.is-yours) .member-name {
  color: var(--cloud-72);
  font-size: 1.25rem;
  line-height: 1.32;
}
/* A seat the link doesn't name yet shows its people whole, in a strip across the card under the
   description: the team in the office for the lead, our engineers side by side for the engineer.
   (A cropped portrait made both read as zoomed in.) */
.kick-card:has(> .member-photo .plate--open) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tags" "name" "photo" "line";
}
.kick-card:has(> .member-photo .plate--open) .member-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 2.8 / 1;
}
.kick-card:has(> .member-photo .plate--open) .member-line {
  align-self: start;
  margin-top: 14px;
}
/* The engineers: one portrait each, head and shoulders, with a first name. */
.kick-card .member-photo:has(.plate-faces) { border-radius: 0; background: none; }
.kick-card .plate--open:has(.plate-faces) { background: none; }
.kick-card .plate-faces {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0;
}
.kick-card .plate-face {
  position: relative;
  width: auto;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--cloud-14);
}
/* Each portrait fills its tile, whatever the strip's height, rather than sizing the strip. */
.kick-card .plate-face picture {
  position: absolute;
  inset: 0;
}
.kick-card .plate-face img {
  object-position: 50% 30%;
  transform: none;
}
.plate-face-name {
  position: absolute;
  inset: auto 0 0;
  overflow: hidden;
  padding: 20px 8px 7px;
  background: linear-gradient(rgb(11 11 13 / 0), rgb(11 11 13 / 0.8));
  color: var(--cloud);
  font: 600 0.75rem/1.2 var(--body);
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Small phones: narrower portraits, so the names sit centred in smaller type and keep whole. */
@media (max-width: 420px) {
  .kick-card .plate-faces { gap: 4px; }
  .plate-face-name {
    padding: 14px 2px 5px;
    font-size: 0.6875rem;
    letter-spacing: 0;
    text-align: center;
  }
}
@media (max-width: 360px) {
  .plate-face-name { font-size: 0.625rem; }
}
#team-kickoff { scroll-margin-top: 96px; }

@media (min-width: 900px) {
  .kick { align-items: start; }
  .kick-intro { grid-column: 1 / 6; }
  .kick-cards { grid-column: 7 / 13; margin-top: 0; }
}
/* Narrower desktops: two by two, the intro beside Kensho and the other two below it, so both
   columns fill. The list lays its cards on the tier's own grid (subgrid); the circuit runs
   down the centre gap and reaches each card from the side nearest it. Without subgrid the
   cards stay stacked beside the intro. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) and (max-width: 1279px) {
    .kick:not(.is-pair) { row-gap: 24px; }
    .kick:not(.is-pair) .kick-intro { grid-row: 1; }
    .kick:not(.is-pair) .kick-cards {
      grid-column: 1 / -1;
      grid-row: 1 / span 2;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      align-items: stretch;
      gap: normal;
      pointer-events: none;
    }
    .kick:not(.is-pair) .kick-card { pointer-events: auto; }
    .kick:not(.is-pair) .kick-card[data-role="host"] { grid-column: 7 / -1; grid-row: 1; }
    .kick:not(.is-pair) .kick-card[data-role="lead"] { --attach: right; grid-column: 1 / 7; grid-row: 2; }
    .kick:not(.is-pair) .kick-card[data-role="engineer"] { grid-column: 7 / -1; grid-row: 2; }
    /* Side by side under Kensho: when the link names only one of the two, the other keeps
       room for a tag, so their names line up. */
    .kick:not(.is-pair) .kick-card:not([data-role="host"]) .member-tags { min-height: 1.4rem; }
    .kick:not(.is-pair):has(.kick-card:not([data-role="host"]) > .member-tags:not([hidden])) .kick-card:not([data-role="host"]) .member-tags[hidden] {
      display: flex !important;
      visibility: hidden;
    }
  }
}
/* Wide screens: the intro and the cards share one row, three columns each, so the circuit
   runs down the gap between Kensho and the next card. */
@media (min-width: 1280px) {
  .kick-intro { grid-column: 1 / 4; }
  .kick-cards {
    grid-column: 4 / 13;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
  }
  .kick.is-pair .kick-intro { grid-column: 1 / 6; }
  .kick.is-pair .kick-cards { grid-column: 7 / 13; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kick-card { --attach: top; }
  /* Side by side, every card keeps room for its tags (two on Kensho's when he is their lead
     too), so the names line up whether or not the link names someone. */
  .kick-card .member-tags { min-height: 1.4rem; }
  .kick.is-pair .kick-card .member-tags { min-height: 3.2rem; }
  .kick-card .member-tags[hidden] { display: flex !important; visibility: hidden; }
}

/* Tier 2: leadership, one card each: what they do for you, and where they come from. --- */

.lead { margin-top: 112px; }
.lp-name {
  font: 650 1.375rem/1.15 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-role {
  margin-top: 6px;
  color: var(--cloud-56);
  font: 500 0.875rem/1.4 var(--body);
  text-wrap: balance;
}
.lp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.lp-bio,
.lp-from {
  margin-top: 12px;
  color: var(--cloud-72);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}
/* Where they come from: its own beat, a step quieter than what they do for you. */
.lp-from {
  margin-top: 10px;
  color: var(--cloud-56);
}
.lp-grid {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

/* Phones and small tablets: editorial blocks, photo beside the name. */
@media (max-width: 899px) {
  .team-stage,
  .crew,
  .team-strip { padding-left: var(--lane); }
  .lp-grid .lp {
    display: grid;
    /* 150px photos, narrower on the smallest phones. */
    grid-template-columns: min(150px, 100% - 156px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    column-gap: 16px;
  }
  .lp-grid .lp-photo { grid-column: 1; grid-row: 1 / 4; }
  .lp-grid .lp-name,
  .lp-grid .lp-role { grid-column: 2; }
  .lp-grid .lp-name { grid-row: 1; font-size: 1.5rem; }
  .lp-grid .lp-role { grid-row: 2; }
  /* A tag gets the full width on a phone. */
  .lp-grid .lp-pills { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; }
  .lp-grid .lp-bio { grid-column: 1 / -1; grid-row: 5; margin-top: 16px; }
  .lp-grid .lp-pills:not([hidden]) + .lp-bio { margin-top: 12px; }
  .lp-grid .lp-from { grid-column: 1 / -1; grid-row: 6; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .lp-grid .lp { grid-template-columns: 180px minmax(0, 1fr); }
}

/* Desktop: all five alike, their words read from the left edge under their photos, like every card
   around them. Three over two up to 1279px, one row of five from 1280px. The circuit runs down the
   middle and passes behind the middle card: in at its photo, out below its last line (see team.js). */
@media (min-width: 900px) {
  .lead-head .eyebrow,
  .lead-head h3 { grid-column: 1 / 6; }
  .lp-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: 56px 24px;
    max-width: 880px;
    margin: 64px auto 0;
  }
  .lp-grid > .lp { grid-column: span 2; }
  /* The five bios start on one line: every card keeps room for a two-line title, and for a tag
     row only when the link tags one of the leaders (their delivery lead), so one tag doesn't push
     its card's bio down and no card carries an empty row otherwise. */
  .lp-grid .lp-role { min-height: 2.8em; }
  .lp-grid .lp-pills[hidden] { display: flex !important; visibility: hidden; }
  .lp-grid .lp-pills { min-height: 22px; }
  .lp-grid:not(:has(.lp-pills .tag:not([hidden]))) .lp-pills { display: none !important; }
  .lp-grid > .lp:nth-child(4) { grid-column: 2 / span 2; }
  .lp-grid .lp-photo { margin-bottom: 18px; }
}
@media (min-width: 1280px) {
  .lp-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: none;
  }
  .lp-grid > .lp,
  .lp-grid > .lp:nth-child(4) { grid-column: auto; }
}

/* The team at work: six photos, each whole with its caption, in the page's column. ----------- */

.team-strip {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--tg), 1280px);
  margin: 112px auto 0;
}
.strip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
/* Each photo and its caption are one opaque piece, so the circuit passes behind them and
   only shows in the gaps, never through a caption. */
.strip-list figure { background: var(--graphite); }
.strip-list picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--card);
}
.strip-list img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.strip-list figcaption {
  margin-top: 10px;
  color: var(--cloud-56);
  font: 700 0.75rem/1.3 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 899px) {
  .team-strip { margin-top: 88px; }
  .strip-list { gap: 24px 12px; }
}
/* Phones: the filmstrip is a row you swipe, one photo at a time with its caption (where we were,
   and with whom), and the next photo showing at the screen's edge. It runs out to that edge. */
@media (max-width: 599px) {
  .team-strip {
    width: auto;
    margin-inline: var(--tg) 0;
  }
  .strip-list {
    display: flex;
    gap: 12px;
    padding-right: var(--tg);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .strip-list::-webkit-scrollbar { display: none; }
  .strip-list > li {
    flex: none;
    width: 84%;
    scroll-snap-align: start;
  }
}

/* Tier 4: everyone else, as a masthead on the rail. Each person is a face (their photo, or their
   initials), a name, a title and one line. --------------------------------- */

.crew { margin-top: 112px; }
.crew-head { margin-bottom: 44px; }
.crew-sub {
  margin-top: 14px;
  color: var(--cloud-72);
  font-size: 1.0625rem;
  line-height: 1.55;
}
/* Leadership has its own cards just above, so the masthead doesn't list them again. Their
   entries stay in the markup: ?lead= and ?engineer= find people there (team.js), and a leader's
   kickoff card takes its title and line from it. */
.crew-group[data-group="leadership"] { display: none; }
.crew-group {
  position: relative;
  padding: 28px 0;
}
.crew-group::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 1px solid var(--cloud-14);
}
.crew-label {
  align-self: start;
  color: var(--cloud-72);
  font: 700 0.75rem/1.3 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crew-list {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}
.crew-entry {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-content: start;
  justify-items: start;
}
.crew-entry > :not(.crew-face) { grid-column: 2; }
.crew-face {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: #1a1a20;
  box-shadow: 0 0 0 1px var(--cloud-14);
  color: var(--cloud-72);
  font: 650 0.875rem/1 var(--display);
  letter-spacing: 0.02em;
  transition: filter 700ms var(--ease-out), box-shadow 400ms var(--ease);
}
.crew-face picture,
.crew-face img {
  display: block;
  width: 100%;
  height: 100%;
}
/* The photos are 4:5 portraits: a slight zoom from near the top brings each face to the
   middle of the circle. */
.crew-face img,
.plate-face img {
  object-fit: cover;
  object-position: 50% 20%;
  transform: scale(1.35);
  transform-origin: 50% 12%;
}
.crew-name {
  grid-row: 1;
  align-self: end;
  font: 600 1.125rem/1.2 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
  transition: opacity 400ms var(--ease);
}
.crew-role {
  grid-row: 2;
  margin-top: 3px;
  color: var(--cloud-56);
  font-size: 0.875rem;
  line-height: 1.4;
  text-wrap: balance;
}
.crew-line {
  margin-top: 10px;
  color: var(--cloud-72);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.crew-entry .tag { margin-top: 10px; }
/* Until the circuit reaches their group, faces are grey and names dim, like every photo it
   hasn't reached yet. */
.crew-entry.is-dim .crew-face { filter: grayscale(1) brightness(0.6); }
.crew-entry.is-dim .crew-name { opacity: 0.64; }
.crew-entry.is-yours .crew-face {
  box-shadow: 0 0 0 2px var(--yellow), 0 0 16px rgb(237 242 10 / 0.5);
}
/* Tablets: two people a row, so the list fills the column like the cards above it. */
@media (min-width: 600px) and (max-width: 899px) {
  .crew-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
}
/* Wide screens: the masthead's rail runs in the margin, left of the page's edge, so the header,
   the group labels and their hairlines start on the same edge as every section above. */
@media (min-width: 900px) {
  .team { --rail-x: -24px; }
  .crew-group { padding: 28px 0; }
  .crew-label { grid-column: 1 / 4; padding-top: 4px; }
  .crew-list {
    grid-column: 4 / 13;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    margin-top: 0;
  }
}
@media (min-width: 1180px) {
  .crew-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The finale: the client, as the newest member of the team. The rail turns into their
   card, which lights up when the circuit reaches it. */
.crew-you .crew-label {
  color: var(--yellow);
  text-wrap: balance;
}
.you-card {
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-areas: "name name" "photo title" "photo channel" "photo line" "photo ." "crew crew";
  width: min(100%, 560px);
  margin-top: 18px;
  padding: 16px 16px 18px;
  transition: box-shadow 900ms var(--ease-out);
}
.you-card .member-photo {
  width: 96px;
  height: 120px;
  transition: box-shadow 900ms var(--ease-out);
}
.you-name {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  transition: opacity 600ms var(--ease-out);
}
/* Their company comes from the link (up to 60 characters): a long word breaks rather than
   running out of a phone-width card. */
.you-card .member-title {
  margin-bottom: 10px;
  color: var(--cloud-72);
  font: 600 1.0625rem/1.35 var(--body);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.you-card .member-line {
  color: var(--cloud);
  font-size: 1.0625rem;
  line-height: 1.5;
}
/* Their Slack channel, the circuit's yellow "#" on the dark card. */
.you-channel {
  grid-area: channel;
  margin-bottom: 10px;
  color: var(--cloud);
  font: 600 0.9375rem/1.35 var(--body);
  overflow-wrap: anywhere;
}
.you-channel .hash { margin-right: 1px; color: var(--yellow); }
/* Who they're joining: the faces and names of the people they meet at the kickoff. */
.you-crew {
  grid-area: crew;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cloud-14);
  color: var(--cloud-72);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.you-crew-faces { display: flex; flex: none; }
.you-crew-faces .kf-face {
  width: 28px;
  height: 28px;
  background: #1f1f26;
  color: var(--cloud-72);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px rgb(237 242 10 / 0.7);
  font-size: 0.625rem;
}
.you-crew-faces .kf-face + .kf-face { margin-left: -6px; }
/* Lit, the card glows from the plate outward. */
.you-card:not(.is-pending) {
  background: radial-gradient(120% 140% at 0% 50%, rgb(237 242 10 / 0.09), rgb(237 242 10 / 0) 60%), var(--card);
  box-shadow: 0 0 0 1.5px rgb(237 242 10 / 0.8), 0 0 72px -12px rgb(237 242 10 / 0.5);
}
.you-card:not(.is-pending) .member-photo {
  box-shadow: 0 0 0 2px var(--yellow), 0 0 28px rgb(237 242 10 / 0.4);
}
.you-card.is-pending .you-name { opacity: 0.64; }
@keyframes you-reach {
  0% { box-shadow: 0 0 0 1.5px rgb(237 242 10 / 1), 0 0 0 0 rgb(237 242 10 / 0.5), 0 0 72px -12px rgb(237 242 10 / 0.5); }
  100% { box-shadow: 0 0 0 1.5px rgb(237 242 10 / 0.8), 0 0 0 22px rgb(237 242 10 / 0), 0 0 72px -12px rgb(237 242 10 / 0.5); }
}
.you-card.is-reached { animation: you-reach 1100ms var(--ease-out); }
@media (min-width: 900px) {
  /* The closing beat: one wide card across the whole list, their plate on the left where the
     circuit comes in, and their name beside it. */
  .crew-you .you-card {
    grid-column: 4 / 13;
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas: "photo ." "photo name" "photo title" "photo channel" "photo line" "photo crew" "photo .";
    column-gap: 32px;
    width: auto;
    margin-top: 0;
    padding: 24px 32px 24px 24px;
  }
  .crew-you .you-card .member-photo { width: 128px; height: 160px; }
  .crew-you .you-name {
    margin-bottom: 12px;
    font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.5rem);
  }
}
@media (max-width: 899px) {
  .plate--you { font-size: 2rem; }
}
/* Tablets: as wide as the kickoff cards above it. */
@media (min-width: 600px) and (max-width: 899px) {
  .you-card { width: 100%; }
}
/* Phones: their company gets the card's full width under their name, so it never has to
   break mid-word beside the plate. */
@media (max-width: 599px) {
  .you-card {
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas: "name name" "title title" "channel channel" "photo line" "photo ." "crew crew";
  }
  .you-card:has(.you-company:not([hidden])) .you-name { margin-bottom: 8px; }
  .you-card .member-title { margin-bottom: 14px; }
}

/* Small phones: a smaller plate, so their line has room beside it. */
@media (max-width: 420px) {
  .you-card { grid-template-columns: 72px minmax(0, 1fr); }
  .you-card .member-photo { width: 72px; height: 90px; }
}

/* Motion: the hub's ping. */
@media (prefers-reduced-motion: no-preference) {
  .team-hub.is-ping::after { animation: diamond-ping 1600ms var(--ease-out) both; }
}

/* Page wow 1: faces in the roadmap's Kickoff stop, linked to the team. ------ */

.kickoff-faces {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.kf-stack { display: flex; }
.kf-face {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ink-14);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
  font: 700 0.75rem/1 var(--body);
  letter-spacing: 0.02em;
}
/* Opaque where it can be, so the face behind never shows through where they overlap. */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .kf-face { background: color-mix(in srgb, var(--ink) 14%, var(--paper)); }
}
.kf-face + .kf-face { margin-left: -10px; }
/* Initials on the back face shift left so the front face never covers them. */
.kf-face:not(:has(img)):has(+ .kf-face) { padding-right: 8px; }
.kf-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* The client closes the row: their initials in the circuit's yellow on a graphite disc. */
.kf-stack .kf-face--you {
  margin-left: 6px;
  background: var(--graphite);
  color: var(--yellow);
  box-shadow: 0 0 0 2px var(--graphite);
  font: 650 0.875rem/1 var(--display);
  letter-spacing: -0.01em;
}
/* Someone the link doesn't name yet: the page's diamond, like their card's empty plate, in a
   quieter ring than the people it does name. */
.kf-face.kf-face--open { box-shadow: 0 0 0 2px var(--ink-30); }
.kf-diamond {
  width: 8px;
  height: 8px;
  border: 1.25px solid var(--ink-70);
  transform: rotate(45deg);
}
.kf-link {
  white-space: nowrap;
  color: var(--ink);
  font: 600 1.0625rem/1.3 var(--body);
  text-decoration-color: var(--ink-30);
}
.kf-link:hover { text-decoration-color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .kf-face { box-shadow: 0 0 0 2px var(--yellow); }
  .kf-stack .kf-face--you { box-shadow: 0 0 0 2px var(--yellow); }
}

/* Page wow 2: the waiting connection on the locked roadmap. --------------- */

.after-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* The wire from the client's card to their roadmap card crosses the paper above it: ink there by
   day (yellow stays on dark surfaces), the circuit's yellow at night. Once their roadmap is
   open, it is lit all the way. */
.after-card.is-open .after-trace .rest,
.team-lines .rest.is-open { stroke: rgb(237 242 10 / 0.85); }
.team-lines .rest.on-paper { stroke: rgb(20 19 16 / 0.24); }
.team-lines .rest.on-paper.is-open { stroke: rgb(20 19 16 / 0.7); }
@media (prefers-color-scheme: dark) {
  .team-lines .rest.on-paper { stroke: rgb(237 242 10 / 0.28); }
  .team-lines .rest.on-paper.is-open { stroke: rgb(237 242 10 / 0.85); }
}