/* One scene across all four portraits. The approved desktop card geometry stays
   in landing.css; only the media plane and compact disclosure are added here. */
.team-experience { position: relative; max-width: 68rem; margin-inline: auto; }
.team-grid--alive {
  position: relative;
  isolation: isolate;
  background: conic-gradient(var(--lt-color-sky) 0deg 90deg, var(--lt-color-moss) 90deg 180deg, var(--lt-color-cherry) 180deg 270deg, var(--lt-color-butter) 270deg);
}
.team-grid--alive .team-person { background: transparent; container-type: normal; }
.team-person--maya, .team-choice--maya { --person-bg: var(--lt-color-butter); }
.team-person--milena, .team-choice--milena { --person-bg: var(--lt-color-sky); }
.team-person--andrey, .team-choice--andrey { --person-bg: var(--lt-color-cherry); }
.team-person--maxim, .team-choice--maxim { --person-bg: var(--lt-color-moss); }
.team-grid--alive .team-person__copy { z-index: 2; background: var(--person-bg); }
.team-scene__media {
  position: absolute;
  z-index: 1;
  left: var(--scene-x);
  top: var(--scene-y);
  width: var(--scene-width);
  height: var(--scene-height);
  overflow: hidden;
  pointer-events: none;
  /* Only the already clipped outermost pixels are feathered; photo borders and
     the paths between portraits remain fully opaque. Same mask for still/video. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 .65%, #000 99.35%, transparent), linear-gradient(to bottom, transparent, #000 .65%, #000 99.35%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 .65%, #000 99.35%, transparent), linear-gradient(to bottom, transparent, #000 .65%, #000 99.35%, transparent);
  mask-composite: intersect;
}
.team-scene__video, .team-scene__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; border: 0; }
.team-scene__poster { z-index: 1; opacity: 1; }
.team-grid--alive[data-frame-visible="true"] .team-scene__poster { opacity: 0; }
.team-choices { display: none; }
.team-motion-toggle {
  position: absolute;
  top: 100%;
  right: 0;
  min-height: 44px;
  padding: 8px 0 8px 16px;
  border: 0;
  background: transparent;
  color: var(--lt-color-milk);
  font: 13px/1.4 var(--lt-font-display);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.team-motion-toggle[hidden], .team-grid--alive .team-person[hidden] { display: none !important; }
.team-motion-toggle:focus-visible { outline: 2px solid var(--lt-color-milk); outline-offset: 2px; }

@media (max-width: 1000px) {
  .team-grid--alive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: auto;
    background: none;
  }
  .team-scene__media {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background: conic-gradient(var(--lt-color-sky) 0deg 90deg, var(--lt-color-moss) 90deg 180deg, var(--lt-color-cherry) 180deg 270deg, var(--lt-color-butter) 270deg);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .team-grid--alive .team-person { display: block; grid-column: 1 / -1; background: var(--person-bg); }
  .team-grid--alive .team-person__copy { position: static; padding: 20px; }
  .team-grid--alive .lt-person__note { font-size: 16px; }
  .team-grid--alive.is-enhanced .team-scene__media { grid-row: 2; }
  .team-grid--alive.is-enhanced .team-person { grid-row: 4; }
  .team-grid--alive.is-enhanced .team-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    z-index: 2;
  }
  .team-choices--top { grid-row: 1; }
  .team-choices--bottom { grid-row: 3; }
  .team-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    color: var(--lt-color-ink);
    background: var(--person-bg);
    font: 700 clamp(16px, 4.5vw, 24px)/1.1 var(--lt-font-display);
    letter-spacing: var(--lt-tracking-h3);
    text-align: left;
    cursor: pointer;
  }
  .team-choice--maxim { color: var(--lt-color-milk); }
  .team-choice > span { font: 400 20px/1 var(--lt-font-display); }
  .team-choice[aria-expanded="true"] { box-shadow: inset 0 -3px currentColor; }
  .team-choice:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
  .team-grid--alive.is-enhanced .team-person__copy .lt-person__name { font-size: 24px; }
}