.spectrum-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 680px;
  scroll-margin-top: 60px;
  color: #fffcf2;
  background: #10251f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.planning-film, .planning-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.planning-film {
  z-index: -2;
  object-fit: cover;
  opacity: .68;
  filter: saturate(.55);
}
.planning-shade {
  z-index: -1;
  background: linear-gradient(90deg, #061710bd, #06171080, #061710b8), linear-gradient(0deg, #061710b8, transparent 70%);
}
.spectrum-motion .eyebrow { color: #edcf96; }
.spectrum-motion h2 { max-width: 960px; text-shadow: 0 2px 22px #0008; }
.spectrum-motion input { accent-color: #edcf96; }
.spectrum-motion .scale { width: min(730px, 100%); }
.spectrum-motion .scale button { color: #f2eee2; padding: 10px 5px; }
.spectrum-motion .scale .active { color: #edcf96; }
.spectrum-motion #depth-copy {
  width: min(730px, 100%);
  background: #0c211be6;
  border: 1px solid #d5ba7a80;
  padding: 28px;
  backdrop-filter: blur(8px);
}
.planning-motion-toggle {
  position: absolute;
  top: 22px;
  right: 6vw;
  border: 1px solid #ffffff80;
  background: #10251fe6;
  color: white;
  padding: 10px 14px;
  cursor: pointer;
  font: 12px Arial, sans-serif;
}
@media (max-width: 600px) {
  .spectrum-motion { min-height: 740px; padding-top: 95px; }
  .spectrum-motion h2 { font-size: 38px; }
  .spectrum-motion .scale button { font-size: 12px; }
  .planning-film { object-position: 60% center; }
}
@media (prefers-reduced-motion: reduce) {
  .planning-film { visibility: hidden; }
}