:root{
  /* Optional: tune overlay globally */
  --hc-overlay: rgba(0,0,0,.55);
}

/* Hero Cover (hc*) */
.hc{ position: relative; padding-top: 0; }
.hc--cover{ min-height: min(92vh, 880px); overflow: hidden; }
.hc__bg{
  position: absolute; inset: 0;
  background-image: var(--hero-image, url('images/landing/cover.webp'));
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.05);
}
.hc__bg::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.65) 40%, rgba(0,0,0,.45) 100%),
    radial-gradient(800px 380px at 15% 10%, rgba(255,122,0,.10), transparent 60%);
  mix-blend-mode: normal;
}
/* Neutralize the old hero decorative background if any */
.hc.hero::before{ content: none !important; }

/* Content on top */
.hc__inner{
  position: relative; z-index: 1;
  display: grid; align-content: center; min-height: inherit;
  padding-top: 72px; /* leaves space for sticky header */
  padding-bottom: 24px;
}
/* keep your existing typography/buttons colors */
.hc .btn.btn--primary{ background: var(--accent); color: #111; }
.hc .btn.btn--ghost{ border: 1px solid var(--line); }

@media (max-width: 640px){
  .hc--cover{ min-height: 82vh; }
}