.hero {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.hero__viewport {
  position: relative;
  width: 100%;
  overflow: visible;
  line-height: 0;
}

.hero__banner {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 80px 0 0 115px;
  pointer-events: none;
  z-index: 4;
}

.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.65rem);
  max-width: min(90vw, 42rem);
}

.hero__logo {
  width: clamp(11.75rem, 40vw, 29.5rem);
  height: auto;
}

.hero__text {
  width: 100%;
  text-align: center;
  color: var(--white);
  line-height: 1.05;
  overflow: visible;
}

.hero__tagline {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 2.35vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero__tagline-script {
  display: block;
  width: 100%;
  margin: clamp(0.25rem, 0.75vw, 0.55rem) 0 0;
  color: #fff;
  font-family: var(--font-script);
  font-size: clamp(3.25rem, 10vw, 7.5rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  overflow: visible;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.hero__social {
  position: absolute;
  right: clamp(0.5rem, 1.4vw, 1.5rem);
  top: 1.35rem;
  z-index: 5;
}

.hero__social .social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  list-style: none;
}

.hero__social a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero__social a svg {
  width: 20px;
  height: 20px;
}

.hero__social a:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}

@media (max-width: 900px) {
  .hero__viewport {
    aspect-ratio: 3 / 4.55;
    min-height: clamp(31rem, 118vw, 37rem);
    overflow: visible;
  }

  .hero__viewport::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fc0082;
    opacity: 0.34;
    pointer-events: none;
    z-index: 2;
  }

  .hero__banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 88% center;
  }

  .hero__content {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: clamp(2.5rem, 10.5vw, 3.75rem) 0 clamp(1rem, 3vw, 1.5rem);
    overflow: visible;
  }

  .hero__brand {
    width: 100%;
    max-width: min(94vw, 26rem);
    margin: 0 auto;
    gap: clamp(1.2rem, 4.5vw, 1.75rem);
    overflow: visible;
  }

  .hero__social {
    display: none;
  }

  .hero__logo {
    width: clamp(11.25rem, 61vw, 18.25rem);
  }

  .hero__tagline {
    font-size: clamp(1rem, 3.85vw, 1.8rem);
  }

  .hero__text {
    margin-top: clamp(0.25rem, 1.2vw, 0.5rem);
  }

  .hero__tagline-script {
    margin-top: clamp(0.35rem, 1.5vw, 0.65rem);
    font-size: clamp(3rem, 12vw, 5.75rem);
  }

  .hero {
    margin-bottom: clamp(0.35rem, 1.5vw, 0.75rem);
  }
}

@media (max-width: 620px) {
  .hero__viewport {
    aspect-ratio: 3 / 4.85;
    min-height: clamp(33rem, 128vw, 39rem);
  }

  .hero__banner {
    object-position: 92% center;
  }

  .hero__content {
    padding: clamp(2.15rem, 11.5vw, 3.25rem) 0 clamp(0.85rem, 2.5vw, 1.25rem);
  }

  .hero__brand {
    max-width: min(96vw, 22rem);
    gap: clamp(1.05rem, 5vw, 1.55rem);
  }

  .hero__logo {
    width: min(72vw, 16.75rem);
  }

  .hero__tagline {
    font-size: clamp(0.92rem, 4.2vw, 1.28rem);
  }

  .hero__text {
    margin-top: clamp(0.35rem, 1.8vw, 0.65rem);
  }

  .hero__tagline-script {
    margin-top: clamp(0.4rem, 2vw, 0.75rem);
    font-size: clamp(2.75rem, 13vw, 4.25rem);
  }

  .hero__social a {
    width: 28px;
    height: 28px;
  }

  .hero__social a svg {
    width: 18px;
    height: 18px;
  }
}