/* Compact cinematic phone stages; all styling is independent of the former orbit. */
.kinetic-phone-host {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
}
.kinetic-phone-stage {
  --kinetic-phone-width: 208px;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 510px !important;
  min-height: 510px !important;
  flex: 1 1 auto;
  padding: 0 !important;
  margin-block: 8px !important;
  perspective: 1300px;
  perspective-origin: 50% 44%;
  isolation: isolate;
  overflow: visible;
  touch-action: pan-y;
}
.kinetic-phone-stage-four {
  height: 540px !important;
  min-height: 540px !important;
}
.kinetic-phone-stage > .kinetic-phone-card {
  position: absolute !important;
  left: 50% !important;
  top: 46% !important;
  width: var(--kinetic-phone-width) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 497 / 1024;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14% / 6.8% !important;
  background: #080808 !important;
  overflow: hidden !important;
  transform-origin: 50% 50%;
  transition: none !important;
  backface-visibility: hidden;
  pointer-events: none;
}
.kinetic-phone-stage.kinetic-in-view > .kinetic-phone-card {
  will-change: transform, opacity;
}
.kinetic-phone-card > .elementor-background-video-container {
  position: absolute !important;
  inset: 1.35% 2.5% 1.7% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 12% / 5.8% !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12% / 5.8%);
  isolation: isolate;
  background: #080808;
}
.kinetic-phone-card > .elementor-background-video-container > iframe {
  position: absolute !important;
  width: 355.56% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
}
.kinetic-phone-card > .elementor-widget-image,
.kinetic-phone-card > .elementor-widget-image > .elementor-widget-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3;
  pointer-events: none;
}
.kinetic-phone-card > .elementor-widget-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: fill !important;
}
.kinetic-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: max-content;
  max-width: 100%;
  color: #dffffd;
  font-family: "avenir-lt-pro", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 120;
}
.kinetic-scroll-mouse {
  display: block;
  width: 19px;
  height: 29px;
  border: 1.5px solid #6ec1e3;
  border-radius: 12px;
  position: relative;
}
.kinetic-scroll-mouse > span {
  position: absolute;
  top: 5px;
  left: 7px;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: #dffffd;
  animation: kinetic-mouse-scroll 1.9s ease-in-out infinite;
  animation-play-state: paused;
}
.kinetic-scroll-chevron {
  color: #6ec1e3;
  font-size: 19px;
  animation: kinetic-scroll-arrow 1.9s ease-in-out infinite;
  animation-play-state: paused;
}
.kinetic-in-view .kinetic-scroll-mouse > span,
.kinetic-in-view .kinetic-scroll-chevron {
  animation-play-state: running;
}
@keyframes kinetic-mouse-scroll {
  0%, 12% { transform: translateY(0); opacity: .3; }
  45% { opacity: 1; }
  80%, 100% { transform: translateY(9px); opacity: 0; }
}
@keyframes kinetic-scroll-arrow {
  0%, 100% { transform: translateY(-2px); opacity: .5; }
  50% { transform: translateY(3px); opacity: 1; }
}
@media (max-width: 767px) {
  .kinetic-phone-stage {
    height: 410px !important;
    min-height: 410px !important;
    margin-block: 4px !important;
    perspective: 950px;
  }
  .kinetic-phone-stage-four {
    height: 430px !important;
    min-height: 430px !important;
  }
  .kinetic-scroll-cue { bottom: 12px; font-size: 12px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .kinetic-phone-stage > .kinetic-phone-card { will-change: auto !important; }
  .kinetic-scroll-mouse > span,
  .kinetic-scroll-chevron { animation: none; }
  .kinetic-scroll-cue { display: none; }
}