.kv {
  padding-bottom: 24%;
}

.kv-frame {
  overflow: visible;
}

.kv-frame > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.kv-title.inside {
  left: 4%;
  bottom: .02em;
  width: 92%;
  color: #fff;
  font-size: clamp(48px, 9.4vw, 98px);
  line-height: .92;
  text-align: left;
  white-space: nowrap;
  mix-blend-mode: difference;
  text-shadow: none;
}

.kv-title.inside .hero-line {
  width: 100%;
}

.kv-title.outside {
  position: relative;
  z-index: 4;
  top: auto;
  left: auto;
  display: block;
  width: 100%;
  margin: .05em 0 0;
  color: #000;
  font-size: clamp(54px, 10vw, 108px);
  line-height: .88;
  text-align: center;
  white-space: nowrap;
  transform: none;
}

.kv-title.outside .hero-line {
  display: block;
  clip-path: inset(105% 0 0 0);
  opacity: 0;
  transform: translateY(34px);
  will-change: clip-path, opacity, transform;
  animation: hero-line-reveal .82s 5.31s cubic-bezier(.22, .9, .28, 1) forwards;
}

.kv-desc {
  max-width: 92%;
  margin-top: 9%;
  font-size: clamp(14px, 2.25vw, 25px);
  line-height: 1.52;
}

@media (max-width: 600px) {
  .kv {
    padding-bottom: 34vh;
  }

  .kv-title.inside {
    left: 3%;
    bottom: .06em;
    width: 94%;
    font-size: 11.6vw;
  }

  .kv-title.outside {
    margin-top: .12em;
    font-size: 12.8vw;
  }

  .kv-desc {
    max-width: 95%;
    margin-top: 12%;
    font-size: 3.45vw;
    line-height: 1.48;
  }

  .split-head h2 {
    font-size: 12vw;
    white-space: nowrap;
  }

  .store-arrows {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv-title.outside .hero-line {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}