html,
body {
  margin: 0;
  padding: 0;
  background: #09000d;
  color: #fff;
  font-family: Inter, sans-serif;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {

  background:
    linear-gradient(
      180deg,
      rgba(5,0,8,.08) 0%,
      rgba(5,0,8,.04) 20%,
      rgba(5,0,8,.12) 100%
    ),

    linear-gradient(
      90deg,
      rgba(5,0,8,.28) 0%,
      rgba(5,0,8,.10) 45%,
      rgba(5,0,8,0) 100%
    );
}

@media (max-width:768px) {

  .hero-overlay {

    background:
      linear-gradient(
        180deg,
        rgba(5,0,8,.04),
        rgba(5,0,8,.10)
      ),

      linear-gradient(
        90deg,
        rgba(5,0,8,.18),
        rgba(5,0,8,0)
      );
  }

}

.hero-content {

  position: relative;
  z-index: 5;

  display: flex;
  flex-direction: column;

  justify-content: flex-start;

  min-height: 100svh;

  padding:
    max(22px, env(safe-area-inset-top))
    22px
    34px
    22px;

  box-sizing: border-box;
}

.logo {

  display: block;

  width: 210px;

  max-width: 72vw;

  margin:
    8px auto 34px auto;
}

h1 {

  margin: 0;

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(2.2rem, 7vw, 4.4rem);

  line-height: .95;

  font-weight: 600;

  letter-spacing: -.03em;

  max-width: 320px;

  text-shadow:
    0 2px 18px rgba(0,0,0,.45);
}

.subtitle {

  margin-top: 18px;

  font-size: 1.05rem;

  line-height: 1.45;

  color: rgba(255,255,255,.88);

  max-width: 280px;

  text-shadow:
    0 2px 12px rgba(0,0,0,.45);
}

.cta {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: fit-content;

  height: 50px;

  padding: 0 22px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #b4547e,
      #d56d97
    );

  color: #fff;

  text-decoration: none;

  font-size: .96rem;
  font-weight: 600;

  letter-spacing: .01em;

  box-shadow:
    0 8px 24px rgba(213,109,151,.28);
}

.cta:active {
  transform: scale(.98);
}

.microcopy {

  margin-top: 14px;

  font-size: .82rem;

  line-height: 1.45;

  color:
    rgba(255,255,255,.72);

  text-shadow:
    0 2px 12px rgba(0,0,0,.35);
}

.microcopy div + div {
  margin-top: 2px;
}

/* =========================
   DESKTOP
   ========================= */

@media (min-width: 769px) {

  .hero-content {

    justify-content: center;

    padding-left: 7vw;

    max-width: 620px;
  }

  .logo {
    width: 21px;
  }

  @media (min-width: 769px) {
    .logo {
        width: 260px;
    }

    }

  h1 {
    font-size:
      clamp(4rem, 5vw, 5.8rem);

    max-width: 600px;
  }

  .subtitle {
    font-size: 1.2rem;
    max-width: 420px;
  }
}

.callbox {
  display: inline-flex;
  margin-top: 42px;
  flex-direction: column;
  width: 200px;
  max-width: 82vw;
  border-radius: 18px;
  overflow: visible;
  text-decoration: none;
  box-shadow:
    0 10px 28px rgba(0,0,0,.30);
}

.callbox-top {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(
      180deg,
      #b00074,
      #8d005d
    );
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  border-radius:
    16px 16px 0 0;

  overflow: hidden;
  border-bottom:
    1px solid rgba(255,255,255,.22);

}

.phone-icon {

  width: 15px;
  height: 15px;
  opacity: .95;
  flex: 0 0 auto;
}

.callbox-number {

  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}