/* Hero: lighter overlay so the photo keeps its colours; text stays legible via shadow. */
.hero h1,.hero .eyebrow,.hero-cta-row a.secondary-cta{text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 22px rgba(0,0,0,.45)}
.hero-lead,.hero-content ul,.hero-content li{text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.6),0 0 24px rgba(0,0,0,.4)}
.hero-image{filter:brightness(1.06) saturate(1.06)}
.hero-overlay{background:linear-gradient(90deg,rgba(24,48,53,.50) 0%,rgba(30,58,62,.32) 40%,rgba(36,68,73,.08) 64%,rgba(36,68,73,0) 100%)}
@media (width<=1250px){
.hero-overlay{background:linear-gradient(90deg,rgba(24,48,53,.52) 0%,rgba(30,58,62,.38) 45%,rgba(36,68,73,.14) 70%,rgba(36,68,73,0) 100%)}
}
@media (width<=900px){
.hero-overlay{background:linear-gradient(90deg,rgba(24,48,53,.52) 0%,rgba(30,58,62,.40) 60%,rgba(36,68,73,.22) 100%)}
}
@media (width<=640px){
.hero-overlay{background:linear-gradient(180deg,rgba(24,48,53,.05) 0%,rgba(24,48,53,.30) 22%,rgba(24,48,53,.50) 48%,rgba(24,48,53,.30) 72%,rgba(24,48,53,.42) 100%)}
.hero h1,.hero-lead,.hero .eyebrow,.hero-cta-row a.secondary-cta{text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 22px rgba(0,0,0,.55)}
.hero-image{filter:brightness(1.07) saturate(1.08)}
}