/* ============ HERO PEOPLE SET — the sourcing scroll, in the hero =========
   Same grammar as the homepage sourcing graphic: one figure holds the front,
   two recede behind, banners annotate whoever is in front, and a rail of
   expert IDs rotates the front slot. Dark-ground adaptation: the two behind
   recede by dimming toward the void rather than washing out. */
.xph{position:absolute;z-index:1;right:34px;top:50%;
  width:clamp(360px,33vw,468px);
  /* lifted so the set starts level with the second headline line */
  transform:translateY(calc(-50% - 130px))}
.xph-stage{position:relative;aspect-ratio:652/780}

.xph-fig{position:absolute;left:50%;bottom:0;height:98%;aspect-ratio:1024/1536;
  transform-origin:50% 100%;transform:translateX(-50%);
  transition:transform .92s var(--ease),opacity .92s var(--ease),filter .92s var(--ease);
  will-change:transform,opacity,filter}
.xph-fig img{width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.4) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.4) 92%,transparent 100%)}
.xph-fig.is-center{transform:translateX(-50%) scale(1);opacity:1;filter:drop-shadow(0 26px 30px rgba(4,14,30,.55));z-index:3}
.xph-fig.is-left{transform:translateX(-96%) translateY(-2%) scale(.72);opacity:.38;
  filter:grayscale(1) brightness(.62) contrast(.9) blur(1.4px);z-index:1}
.xph-fig.is-right{transform:translateX(-4%) translateY(-2%) scale(.72);opacity:.38;
  filter:grayscale(1) brightness(.62) contrast(.9) blur(1.4px);z-index:1}
.xph-fig.nt{transition:none}
.xph.in .xph-fig.is-center{animation:xph-breathe 8.8s ease-in-out 1.3s infinite}
@keyframes xph-breathe{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* soft ground under whoever holds the front */
.xph-glow{position:absolute;left:50%;bottom:-2%;width:64%;height:14%;transform:translateX(-50%);
  z-index:2;pointer-events:none;filter:blur(18px);opacity:0;transition:opacity 1.1s var(--ease);
  background:radial-gradient(ellipse at 50% 62%,rgba(255,255,255,.16),rgba(255,255,255,.05) 46%,transparent 72%)}
.xph.in .xph-glow{opacity:1}

/* the banners — dark glass, same voice as the case-study cards below */
.xph-b{position:absolute;z-index:6;border-radius:10px;padding:11px 14px;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45),0 28px 48px -22px rgba(0,0,0,.55);
  opacity:0;transform:translateY(15px) scale(.975);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  will-change:opacity,transform}
.xph-b.on{opacity:1;transform:none}
.xph-b:after{content:"";position:absolute;top:-3.5px;width:6px;height:6px;border-radius:50%;
  background:var(--warm);opacity:0;transition:opacity .5s var(--ease) .18s}
.xph-b.on:after{opacity:1}
.xph-b1{right:-7%;top:2%;width:48%}
.xph-b1:after{left:16px}
.xph-b2{left:-7%;top:47%;width:52%}
.xph-b2:after{right:16px}
.xph-b3{right:-4%;bottom:5%;width:58%}
.xph-b3:after{left:16px}

.xph-k{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-family:var(--mono);font-size:8.5px;line-height:1;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(0,0,0,.55)}
.xph-k s{width:12px;height:1px;background:rgba(0,0,0,.25);text-decoration:none;flex:none}
.xph-t{margin:0;font-size:12.5px;font-weight:400;line-height:1.42;color:#0a0a0a;letter-spacing:-.005em}
.xph-t b{font-weight:500;color:var(--warm)}


@media(max-width:1250px){.xph{width:clamp(340px,30vw,420px);right:24px}}
@media(max-width:1080px){.xph{display:none}}
@media(prefers-reduced-motion:reduce){
  .xph-fig{animation:none!important}
  .xph-fig,.xph-b,.xph-glow{transition:none}
  .xph-b{opacity:1;transform:none}
  .xph-b:after{opacity:1}
}