.environmental-agents-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .44fr);
  gap: clamp(18px, 2.6vw, 42px);
  align-items: center;
  height: min(76vh, 790px);
  perspective: none;
}

.agents-visual {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: visible;
}

.agents-stack {
  position: absolute;
  inset: 5% 2% 4% 0;
  transform-style: preserve-3d;
  perspective: 1250px;
}

.agent-layer {
  --lift: calc(var(--layer) * -30px);
  position: absolute;
  inset: 13% 7% 10% 2%;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 72px, 0) rotateX(58deg) rotateZ(-42deg) scale(.72);
  transform-origin: 50% 55%;
  transition: transform 850ms cubic-bezier(.2,.75,.2,1), opacity 440ms ease, filter 350ms ease;
  will-change: transform, opacity;
}

.environmental-agents-stage.is-ready .agent-layer {
  opacity: .62;
  transform: translate3d(calc(var(--layer) * 5px), var(--lift), 0) rotateX(58deg) rotateZ(-42deg) scale(.72);
}

.environmental-agents-stage.is-ready .agent-layer--base { opacity: .82; }

.agent-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  filter: contrast(1.08);
}

.agent-layer:not(.agent-layer--base) img { transform: rotate(90deg); }

.agent-layer figcaption {
  position: absolute;
  right: -12px;
  top: 48%;
  padding: 4px 7px;
  color: var(--accent);
  background: rgba(0, 0, 0, .78);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(42deg);
  transform-origin: right center;
}

.environmental-agents-stage[data-selected]:not([data-selected=""]) .agent-layer:not(.agent-layer--base):not(.is-active) {
  opacity: .09;
  filter: saturate(.2) brightness(.58);
}

.environmental-agents-stage .agent-layer.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 15px color-mix(in srgb, var(--accent) 42%, transparent));
  transform: translate3d(8px, calc(var(--lift) - 15px), 0) rotateX(58deg) rotateZ(-42deg) scale(.77);
}

.agents-index { align-self: center; min-width: 0; }
.agents-index-kicker,
.agents-index-note {
  margin: 0;
  color: #77746d;
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.agents-index-kicker { margin-bottom: 12px; }
.agents-index-note { margin-top: 14px; max-width: 240px; text-transform: none; letter-spacing: 0; }

.agents-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.agent-button {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 241, 236, .22);
  border-radius: 0;
  color: #aaa79e;
  background: #050607;
  cursor: pointer;
  transition: border-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.agent-button img { width: 100%; height: 100%; min-height: 0; object-fit: cover; filter: grayscale(.7) contrast(1.12); transition: filter 260ms ease, opacity 260ms ease; }
.agent-button-label { padding: 6px 7px 7px; font-size: 9px; line-height: 1; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.agent-button-number { position: absolute; z-index: 2; top: 6px; left: 7px; font-size: 8px; color: rgba(242,241,236,.58); }
.agent-button:hover,
.agent-button:focus-visible,
.agent-button.is-active { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); outline: none; }
.agent-button.is-active img,
.agent-button:hover img { filter: grayscale(0) contrast(1.08); }

@media (max-width: 980px) {
  .environmental-agents-stage { grid-template-columns: 1fr; height: auto; }
  .agents-visual { height: min(66vw, 620px); }
  .agents-index { padding: 0 3%; }
  .agents-index-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .agents-visual { height: 470px; }
  .agent-layer { inset: 15% 1% 10%; }
  .agents-index-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .agent-layer,
  .agent-button { transition-duration: 1ms !important; }
}