/* ==========================================================================
   ABOUT · 02 THE TEAM — "The crew" in motion (assets/s7-crew.js).
   Desktop: one square on the left (the studio after dark — the crew row on
   top, a stage below showing what each person does for you), the copy and
   the crew list on the right. The person on stage lights up in the list and
   their row fills as their part plays; click a name to jump to them. At the
   end the whole list lights up. Phones and tablets: copy, the square, then
   the list. Without the script the square shows a plain violet card.
   ========================================================================== */
.svc-section.s7crew-section {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-rows: 1fr auto auto 1fr;                 /* copy + list sit centred against the square */
  grid-template-areas:
    "box ."
    "box head"
    "box list"
    "box .";
  column-gap: 70px;
  row-gap: 0;
}
/* desktop: the homepage's split-section gutters (.audit-pitch-wrap, 105px) so the square can grow */
@media (min-width: 1001px) {
  .svc-section.s7crew-section { max-width: none; padding: 100px 105px; }
}
.s7crew-section > .svc-section-head { grid-area: head; margin: 0; }
.s7crew-section > .s7crew-list { grid-area: list; }
.s7crew-section > .s7crew-box { grid-area: box; align-self: center; }

.s7crew-box {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 0 0;
  border-radius: 26px;
  overflow: hidden;
  background: #7c5cf0;
  box-shadow: 0 40px 90px rgba(22, 13, 66, 0.26), 0 12px 30px rgba(22, 13, 66, 0.12);
}
.s7crew {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(135deg, #4f2bd8 0%, #7c5cf0 55%, #c4b5fd 100%);
}
.s7crew-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.s7crew:not(.is-live) .s7crew-svg { visibility: hidden; }

/* ---- the crew list ------------------------------------------------------ */
.s7crew-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.s7crew-row {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  width: 100%;
  padding: 14px 20px 17px 14px;
  border-radius: 18px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s ease;
}
.s7crew-row:hover { background: #faf8ff; }
.s7crew-row:focus { outline: none; }
.s7crew-row:focus-visible { outline: 2px solid #6d3ef0; outline-offset: 2px; }

/* initials only — one badge, or a pair for the Reblin brothers */
.s7crew-av {
  grid-row: 1 / span 3;
  position: relative;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, var(--a, #a08bff), var(--b, #6f5fd1));
  opacity: 0.5;
  filter: saturate(0.55);
  transition: opacity .4s ease, filter .4s ease, box-shadow .4s ease;
}
.s7crew-av--pair { width: 48px; height: 46px; border-radius: 0; background: none; }
.s7crew-av--pair i {                                    /* two small badges, only their rims overlap */
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  background: linear-gradient(135deg, var(--a), var(--b));
  box-shadow: 0 0 0 2px #ffffff;
}
.s7crew-av--pair i:first-child { left: 0; top: 0; --a: #818cf8; --b: #4338ca; }
.s7crew-av--pair i:last-child { left: 18px; top: 16px; --a: #6366f1; --b: #3730a3; }
/* the AI crew: a spark instead of initials */
.s7crew-av--ai { --a: #38bdf8; --b: #7c3aed; }
.s7crew-av--ai svg { display: block; width: 22px; height: 22px; }
.s7crew-name {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: rgba(12, 13, 18, 0.6);
  transition: color .4s ease;
}
.s7crew-role {
  margin-top: 2px;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(111, 95, 209, 0.7);
  transition: color .4s ease;
}
.s7crew-desc {
  margin-top: 5px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(74, 74, 85, 0.7);
  transition: color .4s ease;
}
/* how far through their part the square is (--p, set by the script) */
.s7crew-bar {
  position: absolute;
  left: 78px;
  right: 20px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(109, 62, 240, 0.14);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
}
.s7crew-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #6d3ef0;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.s7crew-row.is-on { background: #f5f1ff; }
.s7crew-row.is-on .s7crew-av { opacity: 1; filter: none; }
.s7crew-row.is-on .s7crew-av:not(.s7crew-av--pair) { box-shadow: 0 0 0 4px rgba(109, 62, 240, 0.16); }
.s7crew-row.is-on .s7crew-name { color: #0c0d12; }
.s7crew-row.is-on .s7crew-role { color: #6d3ef0; }
.s7crew-row.is-on .s7crew-desc { color: #4a4a55; }
.s7crew-row.is-on .s7crew-bar { opacity: 1; }
/* the last part: everyone on at once */
.s7crew-list.is-all .s7crew-row { background: #faf8ff; }
.s7crew-list.is-all .s7crew-bar { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .s7crew-bar { display: none; }
}

/* ---- tablets + phones: copy, the square, then the list ------------------- */
@media (max-width: 1000px) {
  .svc-section.s7crew-section {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "box" "list";
    row-gap: 32px;
  }
  .s7crew-box { margin: 0 auto; }
  .s7crew-section > .s7crew-list { margin: 0 auto; width: 100%; max-width: 760px; }
}
@media (max-width: 620px) {
  .s7crew-box { border-radius: 20px; }
  .s7crew-section > .s7crew-list { margin-top: -6px; }
  .s7crew-row { padding: 12px 14px 15px 10px; column-gap: 13px; border-radius: 16px; }
  .s7crew-name { font-size: 16px; }
  .s7crew-desc { font-size: 14.5px; }
  .s7crew-bar { left: 71px; right: 14px; bottom: 7px; }
}