/* Three physical planes stay in document flow, keeping every summary in reach. */
.approach-depth .principles {
  min-width: 0;
  padding: 3px 24px 8px 0;
  perspective: 1350px;
  perspective-origin: 45% 40%;
}

.approach-depth .principle {
  position: relative;
  margin: 0 0 18px;
  border: 1px solid #363638;
  background: #101011;
  transform-origin: 10% 50%;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease), border-color .5s, background-color .5s;
}

.approach-depth .principle:last-child { margin-bottom: 0; }
.approach-depth .principle:nth-child(2) { background: #0e0e0f; border-color: #303032; }
.approach-depth .principle:nth-child(3) { background: #0c0c0d; border-color: #29292c; }

.approach-depth .principle::before {
  content: '';
  position: absolute;
  inset: 5px -5px -5px 5px;
  border: 1px solid #28282b;
  background: #0a0a0b;
  transform: translateZ(-7px);
  pointer-events: none;
}

.approach-depth[data-approach-motion="on"] .principle {
  transform: translate3d(calc(var(--approach-plane-index, 0) * 7px), 0, calc(var(--approach-plane-index, 0) * -18px)) rotateY(-4deg);
}

.approach-depth .principle[open] {
  z-index: 2;
  border-color: #69696b;
  background: #171718;
}

.approach-depth[data-approach-motion="on"] .principle[open] {
  transform: translate3d(-6px, 0, 22px) rotateY(-1deg);
}

.approach-depth .principle summary,
.approach-depth .principle:first-child summary {
  gap: 18px;
  padding: 25px 24px;
}

.approach-depth .principle h3 {
  font-size: clamp(25px, 2.25vw, 37px);
  line-height: 1.15;
}

.approach-depth .principle summary:hover h3 { transform: translateX(3px); }
.approach-depth .principle summary:focus-visible { outline-offset: 4px; }
.approach-depth .principle-body { padding: 0 28px 27px 58px; }
.approach-depth .principle-body p { color: #b6b6b8; }
.approach-depth .principle[open] .principle-number { color: #e6e6e8; }

/* Pausing removes depth immediately, including the body text's old animation. */
.approach-depth[data-approach-motion="off"] .principles { perspective: none; }
.approach-depth[data-approach-motion="off"] .principle,
.approach-depth[data-approach-motion="off"] .principle summary h3 {
  transform: none;
  transition: none;
}
.approach-depth[data-approach-motion="off"] .principle::before { display: none; }
.approach-depth[data-approach-motion="off"] .principle-body p { animation: none; }

@media (max-width: 1050px) and (min-width: 701px) {
  .approach-depth .principles { padding-right: 16px; }
  .approach-depth .principle summary,
  .approach-depth .principle:first-child summary { padding: 22px 18px; gap: 14px; }
  .approach-depth .principle h3 { font-size: 27px; }
  .approach-depth .principle-body { padding-left: 47px; padding-right: 22px; }
  .approach-depth[data-approach-motion="on"] .principle {
    transform: translate3d(calc(var(--approach-plane-index, 0) * 4px), 0, calc(var(--approach-plane-index, 0) * -10px)) rotateY(-3deg);
  }
  .approach-depth[data-approach-motion="on"] .principle[open] {
    transform: translate3d(-3px, 0, 12px) rotateY(-1deg);
  }
}

/* Touch layouts are flat, generous and fully scrollable. */
@media (max-width: 700px) {
  .approach-depth .principles { padding: 0; perspective: none; }
  .approach-depth .principle { margin-bottom: 12px; }
  .approach-depth[data-approach-motion="on"] .principle,
  .approach-depth[data-approach-motion="on"] .principle[open] { transform: none; }
  .approach-depth .principle::before { display: none; }
  .approach-depth .principle summary,
  .approach-depth .principle:first-child summary { padding: 22px 18px; gap: 14px; }
  .approach-depth .principle h3 { font-size: clamp(25px, 6.5vw, 31px); }
  .approach-depth .principle-body { padding: 0 20px 24px 47px; }
  .approach-depth .principle-body p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .approach-depth .principles { perspective: none; }
  .approach-depth[data-approach-motion] .principle,
  .approach-depth[data-approach-motion] .principle[open],
  .approach-depth .principle summary:hover h3 { transform: none; transition: none; }
  .approach-depth .principle::before { display: none; }
  .approach-depth .principle-body p { animation: none; }
}