/* Let the hero photography read clearly while retaining white type at its base. */
.hero-aside::before {
  background: rgba(8, 27, 61, .10);
}
.hero-aside::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 43%, rgba(8, 27, 61, .08) 65%, rgba(8, 27, 61, .52) 100%);
}
.hero-aside .aside-label,
.hero-aside .hero-statement,
.hero-aside li {
  text-shadow: 0 2px 9px rgba(4, 20, 43, .7);
}

/* The same quiet blue-to-orange finish on both contact panels. */
.contact-panel {
  border-color: rgba(255, 255, 255, .78);
  background:
    radial-gradient(ellipse 55% 75% at 98% 96%, rgba(248, 216, 194, .2), transparent 83%),
    linear-gradient(128deg, #e6f2fb 0%, #e1eef9 38%, #eef2f5 67%, #f8eae1 100%);
  box-shadow: 0 24px 60px rgba(58, 98, 144, .1);
}
.contact-panel::before {
  background:
    radial-gradient(ellipse 34% 46% at 12% 24%, rgba(164, 203, 239, .19), transparent 78%),
    radial-gradient(ellipse 40% 47% at 81% 73%, rgba(247, 208, 181, .17), transparent 82%),
    radial-gradient(ellipse 29% 35% at 53% 16%, rgba(255, 255, 255, .3), transparent 76%);
  opacity: .58;
}
.contact-panel:hover::before,
.contact-panel:focus-within::before { opacity: .72; }

/* Keep the homepage canvas calm so the contact card remains distinct. */
.site-shell .contact-page {
  background: #eef6ff;
}