/* Scoped replacement for the composite team photo. Load after update.css. */
#team .team-stage:not(.team-stage--cards) {
  min-height: calc(884 * var(--team-unit, 1px) + var(--team-extra-height, 0px));
}

#team .team-stage > .ekoh-team-hover {
  --team-ring-width: 124%;
  --team-ring-center: 65%;
  --team-people-shift: calc(18 * var(--team-unit, 1px));
  position: absolute;
  display: block;
  isolation: isolate;
  left: calc(507.37 * var(--team-unit, 1px));
  right: auto;
  top: auto;
  bottom: 0;
  width: calc(990 * var(--team-unit, 1px));
  max-width: none;
  height: auto;
  aspect-ratio: 1796 / 1418;
  margin: 0;
  padding: 0;
  overflow: visible;
  direction: ltr;
  z-index: 1;
}

/* The complete static composition uses the original design's wider footprint.
   Its natural height must not be constrained by the animated-layer canvas. */
#team .team-stage > .ekoh-team-hover--static {
  left: calc(405.578 * var(--team-unit, 1px));
  width: calc(1193.587 * var(--team-unit, 1px));
  aspect-ratio: auto;
}

#team .ekoh-team-hover--static > .ekoh-team-hover__static {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  clip-path: none;
  opacity: 1;
}

/* Keep the upper segments above the heads; crop only the decorative layer
   at the same bottom edge as the people. Biography panels are outside it. */
#team .ekoh-team-hover__ring-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(-24% -16% 0 -16%);
  pointer-events: none;
  z-index: 0;
}

#team .ekoh-team-hover__ring-frame {
  position: absolute;
  left: 50%;
  top: var(--team-ring-center);
  width: var(--team-ring-width);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Fixed orientation from the supplied design asset. */
#team .ekoh-team-hover__ring-frame > .ekoh-team-hover__ring {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  clip-path: none;
  opacity: 1;
  transform: none;
  animation: none;
}


#team .ekoh-team-hover__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

#team .ekoh-team-hover__layer > img,
#team .ekoh-team-hover__layer > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  transform: none;
  clip-path: none;
  background: transparent;
  opacity: 1;
}

/* Individual portrait exports occupy their person's part of the shared canvas.
   The poster and motion use identical geometry; a different size never changes files. */
#team .ekoh-team-hover__layer--individual { --person-center: 50%; }
#team .ekoh-team-hover__layer--individual[data-person="man_right"] { --person-center: 71%; }
#team .ekoh-team-hover__layer--individual[data-person="man_left"] { --person-center: 23%; }
#team .ekoh-team-hover__layer--individual > img,
#team .ekoh-team-hover__layer--individual > video {
  inset: auto;
  left: var(--person-center);
  bottom: 0;
  width: 55%;
  height: 104%;
  transform: translateX(-50%);
  object-position: center bottom;
}

/* Same subject geometry for the first-frame poster and the moving video. */
#team .ekoh-team-hover__layer--fitted > img,
#team .ekoh-team-hover__layer--fitted > video {
  inset: auto;
  left: var(--team-media-left);
  bottom: var(--team-media-bottom);
  width: var(--team-media-width);
  height: var(--team-media-height);
  transform: none;
  object-position: center;
}

#team .ekoh-team-hover__motion { visibility: hidden; }
#team .ekoh-team-hover__layer.is-motion-visible > .ekoh-team-hover__still { visibility: hidden; }
#team .ekoh-team-hover__layer.is-playing > .ekoh-team-hover__motion.is-active { visibility: visible; }

#team .ekoh-team-hover__hits {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}

/* Lower the people and their silhouette hit areas together. Clip the excess
   at the artwork's bottom edge; leave the ring and biography labels in place. */
#team .ekoh-team-hover__layer,
#team .ekoh-team-hover__hits {
  transform: translateY(var(--team-people-shift));
  clip-path: inset(0 0 var(--team-people-shift) 0);
}

#team .ekoh-team-hover.is-ready > .ekoh-team-hover__hits { display: block; }

/* Remove browser click/tap outlines from the transparent SVG hit areas.
   Keyboard navigation keeps the orange silhouette indicator below. */
#team .ekoh-team-hover,
#team .ekoh-team-hover__hits,
#team .ekoh-team-hover__hits path,
#team .ekoh-team-hover__hits path:focus,
#team .ekoh-team-hover__hits path:active {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

#team .ekoh-team-hover__hits path {
  pointer-events: visiblePainted;
  cursor: pointer;
  touch-action: manipulation;
  stroke: none;
}

#team .ekoh-team-hover__hits path:focus-visible {
  outline: none;
  stroke: #ff3e07;
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

/* Hide the obsolete control if cached HTML from the previous version appears. */
#team .ekoh-team-hover__ring-toggle { display: none !important; }

/* The section-overlap animation gives .people-services z-index: 3. The strip
   must sit ABOVE that entire stacking context to cover the subpixel crop edge.
   Desktop only: on mobile, biographies separate the artwork and the strip. */
@media (min-width: 1200px) {
  #clients {
    position: relative;
    z-index: 4;
    margin-top: -2px;
  }
}

@media (max-width: 1199px) {
  #team .team-stage:not(.team-stage--cards) { min-height: 0; }
  #team .ekoh-team-hover__ring-clip { clip-path: inset(0); }
  #team .team-stage:not(.team-stage--cards) > .ekoh-team-hover {
    --team-ring-width: 134%;
    --team-ring-center: 82%;
    --team-people-shift: 10px;
    position: relative;
    inset: auto;
    width: calc(100% + 48px);
    max-width: none;
    margin: 0 -24px 10px;
    grid-column: 1 / -1;
  }
  #team .ekoh-team-hover--static {
    overflow: hidden;
    overflow: clip;
  }
  #team .ekoh-team-hover--static > .ekoh-team-hover__static {
    width: 128%;
    margin: 0 -14%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #team .ekoh-team-hover__hits { display: none !important; }
}