/* Keep the page in place while the visible sticky header becomes compact. */
.site-header-space {
  --site-header-padding: 1rem;
  --site-header-row-height: 2.75rem;
  block-size: calc(2 * var(--site-header-padding) + var(--site-header-row-height));
  pointer-events: none;
}

.site-header {
  pointer-events: auto;
}

.site-header__inner {
  padding-block: var(--site-header-padding);
}

@media (min-width: 640px) {
  .site-header-space {
    --site-header-padding: 1.5rem;
    --site-header-row-height: max(60px, 2.75rem);
  }
}

@media (min-width: 1024px) {
  .site-header-space {
    --site-header-padding: 2rem;
  }
}

@media (min-width: 1280px) {
  .site-header-space {
    --site-header-padding: 2.5rem;
  }
}

@media (min-width: 1536px) {
  .site-header-space {
    --site-header-padding: 74px;
  }
}

/* Keep scroll effects scoped to the visible header. */
.site-header,
.site-header__inner,
.site-header__logo,
.site-header__logo img,
.site-header .nav-menu,
.site-header .nav-menu li,
.site-header .nav-menu li a,
.site-header .primary-button {
  will-change: auto;
}

.site-header__inner,
.site-header__logo,
.site-header__logo img,
.site-header .nav-menu {
  transition: none;
}

.site-header .primary-button {
  transition: color 160ms ease, background-color 160ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    --site-header-transition: 220ms cubic-bezier(0.2, 0.65, 0.3, 1);
    transition: box-shadow var(--site-header-transition);
  }

  .site-header__inner {
    transition:
      padding-top var(--site-header-transition),
      padding-bottom var(--site-header-transition);
  }

  .site-header__logo {
    transition: min-height var(--site-header-transition);
  }

  .site-header__logo img {
    transition: max-height var(--site-header-transition);
  }

  .site-header__inner .nav-menu {
    transition: gap var(--site-header-transition);
  }

  .site-header__inner .primary-button {
    transition:
      padding var(--site-header-transition),
      font-size var(--site-header-transition),
      color 160ms ease,
      background-color 160ms ease;
  }
}

.mobile-menu-overlay,
#wizard-modal {
  transition: opacity 160ms ease-out;
}

.sp-logo-scroller {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.sp-logo-scroller:focus-visible {
  outline: 2px solid #37acab;
  outline-offset: -2px;
}

.sp-client-logos .client-row {
  width: max-content;
  min-width: 100%;
}

/* Keep the gradient text above the card's absolutely positioned artwork. */
.hero-home-box .hero-card p {
  position: relative;
  z-index: 1;
}

/* Soft glow from the earlier release; the hero layout is unchanged. */
.hero-home-box {
  background:
    radial-gradient(85% 60% at 10% 100%, rgba(255, 147, 146, 0.66), transparent 78%),
    radial-gradient(80% 70% at 92% 100%, rgba(109, 210, 192, 0.74), transparent 82%),
    #fff;
}

/* Fade the fine grain into the glow, beneath the title, photos and cards. */
.hero-home-box::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: url("../images/hero/gradient-dither.png") repeat;
  -webkit-mask-image: linear-gradient(transparent 32%, #000 74%);
  mask-image: linear-gradient(transparent 32%, #000 74%);
  opacity: 0.016;
}

@media (max-width: 1023px) {
  /* Keep the fixed menu panel relative to the viewport. */
  .site-header,
  .site-header__inner {
    transform: none;
    contain: none;
    backface-visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.site-header, .primary-button, .light-button, .portfolio-filter-btn, .package-filter-btn, .sp-blog-filter, .mobile-menu-overlay),
  #wizard-modal {
    transition-duration: 0ms !important;
  }
}