/* Per-page hero images v2 (2026-10-16): photo background + gradient overlay + white text.
   Pages set their own image via inline style="background-image:url('data:...')".
   Optional per-page focal point: style="...; --hero-focus-x: 65%;" (default center). */
.hero--page-image {
  position: relative;
  background-color: #101826;
  background-size: cover;
  background-position: var(--hero-focus-x, center) 30%;
  background-repeat: no-repeat;
}
.hero--page-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,18,28,0.62) 0%, rgba(12,18,28,0.45) 50%, rgba(12,18,28,0.68) 100%);
  pointer-events: none;
}
.hero--page-image > .container { position: relative; z-index: 1; }
.hero--page-image .hero-title { color: #fff; }
.hero--page-image .hero-lead { color: rgba(255,255,255,.92); }
.hero--page-image .hero-badge { background: rgba(255,255,255,.95); color: #101826; }
@media (max-width: 640px) {
  .hero--page-image { background-position: var(--hero-focus-x, center) 25%; }
}