/* =========================================================
       HERO — background media swap
    ========================================================== */
    #hero-new .hero-bg-video-desktop,
    #hero-new .hero-bg-image-mobile {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    #hero-new .hero-bg-video-desktop {
      display: block;
      object-fit: cover;
      z-index: 0;
    }

    #hero-new .hero-bg-image-mobile {
      display: none;
      z-index: 0;
      background-image: url("assets/img/hero/utlof-mobile.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    @media (max-width: 950px) {
      #hero-new .hero-bg-video-desktop {
        display: none !important;
      }

      #hero-new .hero-bg-image-mobile {
        display: block !important;
      }
    }

    /* =========================================================
       HERO — layout clearance below fixed header
    ========================================================== */
    #hero-new .container {
      padding-top: clamp(5.5rem, 4.8rem + 1.8vw, 7rem) !important;
    }

    /* =========================================================
       HERO — title
    ========================================================== */
    #hero-new #hero-title {
      display: block;
      margin: 0 0 clamp(0.8rem, 0.55rem + 0.9vw, 1.15rem) !important;
      font-size: clamp(2.15rem, 1.35rem + 2.8vw, 3.35rem) !important;
      font-weight: 700 !important;
      line-height: 1.05 !important;
      letter-spacing: 0.04em !important;
      text-align: center !important;
      text-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
      color: #fff;
    }

    /* =========================================================
       HERO — award line
    ========================================================== */
    #hero-new .hero-awardline {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.22rem;
      max-width: min(34rem, 92%);
      margin: 1rem auto 1rem !important;
      padding: 0;
      text-align: center;
      background: none !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    #hero-new .hero-awardline__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.06rem;
      padding: 0.24rem 0.72rem;
      border-radius: 999px;
      font-size: clamp(0.64rem, 0.61rem + 0.14vw, 0.76rem);
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(18, 18, 18, 0.95);
      background: linear-gradient(
        135deg,
        rgba(255, 244, 170, 0.98),
        rgba(255, 210, 90, 0.98),
        rgba(255, 176, 55, 0.98)
      );
      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.18),
        0 0 18px rgba(255, 210, 90, 0.12);
    }

    #hero-new .hero-awardline__text {
      display: block;
      max-width: 32ch;
      font-size: clamp(0.98rem, 0.93rem + 0.22vw, 1.1rem);
      font-weight: 800;
      line-height: 1.32;
      color: rgba(255, 255, 255, 0.95);
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
      text-wrap: balance;
    }

    #hero-new .hero-awardline__subtext {
      display: block;
      font-size: clamp(0.8rem, 0.77rem + 0.14vw, 0.9rem);
      font-weight: 600;
      line-height: 1.3;
      color: rgba(255, 255, 255, 0.78);
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    }

    #hero-new .hero-awardline__link {
      display: inline-flex;
      align-items: center;
      gap: 0.2rem;
      margin-top: 0.12rem;
      font-size: clamp(0.75rem, 0.73rem + 0.1vw, 0.84rem);
      font-weight: 700;
      color: rgba(255, 229, 120, 0.96);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 229, 120, 0.3);
      padding-bottom: 0.02rem;
      white-space: nowrap;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
      transition: color 180ms ease, border-color 180ms ease, opacity 180ms ease;
    }

    #hero-new .hero-awardline__link:hover,
    #hero-new .hero-awardline__link:focus-visible {
      color: rgba(255, 241, 170, 1);
      border-color: rgba(255, 241, 170, 0.65);
    }

    /* =========================================================
       HERO — badge glow
    ========================================================== */
    .pac-badge {
      animation: pacBadgeGlow 3.2s ease-in-out infinite;
    }

    .pac-badge:hover {
      animation-duration: 1.8s;
    }

    @keyframes pacBadgeGlow {
      0%, 100% {
        filter:
          drop-shadow(0 20px 38px rgba(0, 0, 0, 0.58))
          drop-shadow(0 0 18px rgba(255, 210, 90, 0.16))
          drop-shadow(0 0 18px rgba(0, 255, 214, 0.12))
          drop-shadow(0 0 14px rgba(60, 140, 255, 0.10));
      }

      50% {
        filter:
          drop-shadow(0 20px 38px rgba(0, 0, 0, 0.58))
          drop-shadow(0 0 28px rgba(255, 210, 90, 0.28))
          drop-shadow(0 0 24px rgba(0, 255, 214, 0.18))
          drop-shadow(0 0 22px rgba(60, 140, 255, 0.16));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pac-badge {
        animation: none;
      }
    }

    /* =========================================================
       HERO — medium desktop rebalance
       1450px and below: lift book, move CTA under byline,
       shrink buttons slightly
    ========================================================== */
    @media (max-width: 1450px) and (min-width: 971px) {
      #hero-new .hero-book-wrap {
        transform: translateY(-20%);
      }

      #hero-new .text-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #hero-new .hero-button-group {
        order: 4;
        margin: 0.35rem auto 0.9rem !important;
        gap: 0.7rem;
      }

      #hero-new .hero-button-group .preorder-btn {
        padding: 0.68rem 1rem !important;
        font-size: 0.88rem !important;
        min-width: 11.25rem;
      }

      #hero-new .hero-dek {
        order: 5;
      }

      #hero-new .pricing-p {
        order: 6;
      }
    }

    /* =========================================================
   HERO — large desktop rebalance
   Above 1450px: slightly larger and slightly higher
========================================================= */
@media (min-width: 1451px) {
  #hero-new .hero-book-wrap {
    transform: translateY(-6%) scale(1.035);
    transform-origin: center center;
  }
}

@media (min-width: 1451px) {
  #hero-new .hero-book-wrap {
    transform: translateY(-20%);
  }
}

/* =========================================================
   HERO NEW — desktop video / mobile-tablet image swap
========================================================= */

#hero-new {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#hero-new .container,
#hero-new .row,
#hero-new .text-container,
#hero-new .hero-book-wrap {
  position: relative;
  z-index: 3;
}

/* Background layers */
#hero-new .hero-bg-video-desktop,
#hero-new .hero-bg-image-mobile,
#hero-new .hero-new-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#hero-new .hero-bg-video-desktop {
  display: block;
  object-fit: cover;
  z-index: 0;
}

#hero-new .hero-bg-image-mobile {
  display: none;
  z-index: 0;
  background-image: url("../img/hero/utlof-mobile.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

#hero-new .hero-new-overlay {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(6, 6, 6, 0.18) 0%,
      rgba(6, 6, 6, 0.32) 35%,
      rgba(6, 6, 6, 0.55) 70%,
      rgba(6, 6, 6, 0.78) 100%
    );
}

/* Book cover */
#hero-new .hero-book-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero-new .hero-new-book-cover {
  display: block;
  position: relative;
  z-index: 3;
  width: min(100%, 32rem);
  max-width: 100%;
  height: auto;
}

/* Make sure badge stays above the cover */
#hero-new .pac-badge {
  position: absolute;
  z-index: 4;
}

/* Switch to mobile/tablet image */
@media (max-width: 991.98px) {
  #hero-new .hero-bg-video-desktop {
    display: none;
  }

  #hero-new .hero-bg-image-mobile {
    display: block;
  }

  #hero-new {
    min-height: auto;
    padding: 7rem 0 4rem;
  }

  #hero-new .row {
    row-gap: 2rem;
  }

  #hero-new .hero-book-wrap {
    margin: 0 auto;
  }

  #hero-new .hero-new-book-cover {
    width: min(78vw, 24rem);
  }

  #hero-new .text-container {
    position: relative;
    z-index: 3;
  }
}

/* Smaller phones */
@media (max-width: 575.98px) {
  #hero-new .hero-new-book-cover {
    width: min(82vw, 20rem);
  }

  #hero-new .hero-bg-image-mobile {
    background-position: center top;
  }
}