/* Right-side hero images for the black page banners: the photo sits on the
   right and fades left into the banner's black, so headlines stay readable. */
.page-hero.has-img{position:relative;overflow:hidden}
.page-hero.has-img::before{content:'';position:absolute;top:0;bottom:0;right:0;width:var(--ph-w,62%);
  background-image:var(--ph-img);background-size:cover;background-position:var(--ph-pos,center);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 32%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 32%,#000 62%);
  filter:brightness(.9) saturate(1.05)}
.page-hero.has-img::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 78%,rgba(0,0,0,.3) 100%)}
.page-hero.has-img .container{position:relative;z-index:2}
.page-hero.has-img h1,.page-hero.has-img h2{text-shadow:0 2px 18px rgba(0,0,0,.55)}
@media(max-width:860px){.page-hero.has-img::before{width:100%;opacity:.28;
  -webkit-mask-image:none;mask-image:none}}