[data-floating-region] {
  position: relative;
  isolation: isolate;
}

[data-floating-region] .hero-copy,
[data-floating-region] .hero-stage {
  position: relative;
  z-index: 1;
}

[data-floating-region] .floating-pill {
  display: none;
}

.hero-floating-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hero-floating-tag {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(13, 14, 19, 0.14));
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform;
}

.hero-floating-tag-left {
  top: clamp(14rem, 36vw, 23rem);
  left: clamp(0.5rem, 9vw, 6rem);
  width: clamp(7rem, 7vw + 4.6rem, 8.4rem);
}

.hero-floating-tag-right {
  top: clamp(20rem, 44vw, 31rem);
  right: clamp(0.25rem, 6vw, 4.5rem);
  width: clamp(9rem, 10vw + 4rem, 12rem);
}

@media (max-width: 1100px) {
  .hero-floating-tag-left {
    top: clamp(13rem, 33vw, 18rem);
    left: clamp(0.25rem, 4vw, 2rem);
  }

  .hero-floating-tag-right {
    top: clamp(18rem, 47vw, 26rem);
    right: clamp(0.25rem, 4vw, 2rem);
  }
}

@media (max-width: 780px) {
  .hero-floating-layer {
    inset: 0 0 auto;
    min-height: 42rem;
  }

  .hero-floating-tag-left {
    top: 32rem;
    left: -0.25rem;
    width: 6.75rem;
  }

  .hero-floating-tag-right {
    top: 34.75rem;
    right: -0.1rem;
    width: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-floating-tag {
    transform: none !important;
  }
}