/* hp2-bg — a soft, light "sand-blue" backdrop for the whole reimagined second
   half, so those sections read as one cohesive band lifted off the flat page
   grey (--paper #eef1f7). Kept very light so all dark-navy text stays crisp;
   layered gradients + a faint grid give it an intentional, premium feel rather
   than a single flat tint. Sand-blue family only. */
.hp2-bg {
  position: relative;
  isolation: isolate;
  /* base wash: page grey -> faint periwinkle -> back, top to bottom */
  background:
    linear-gradient(
      180deg,
      #eef1f7 0%,
      #e9eef9 18%,
      #eaf0f8 50%,
      #e8edf7 82%,
      #eef1f7 100%
    );
}

/* soft top glow so the band opens with a gentle lift under the morning tour */
.hp2-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(90, 130, 194, 0.08), transparent 62%),
    radial-gradient(90% 40% at 88% 22%, rgba(47, 158, 143, 0.05), transparent 60%),
    radial-gradient(80% 40% at 10% 78%, rgba(90, 130, 194, 0.06), transparent 62%);
}

/* whisper-faint blueprint grid, the same motif the set-pieces use, tying the
   band together without adding any boxes */
.hp2-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(61, 99, 164, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 99, 164, 0.035) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

/* the sections inside sit above the backdrop layers */
.hp2-bg > * {
  position: relative;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* nothing animated here — declaration kept for parity/intent */
  .hp2-bg::before,
  .hp2-bg::after { will-change: auto; }
}