/* ---- bg.v1: one family of road photographs behind the top of each page (2026-09-17) ----
   The photo sits inside <main> (which is position:relative; z-index:1) at z-index:-1, so every section
   paints above it while it still covers the fixed grid overlay. A gradient fades it into the page colour
   so the band below reads exactly as before. */
.pbg{position:absolute;left:0;right:0;top:0;height:min(96vh,960px);z-index:-1;overflow:hidden;pointer-events:none}
.pbg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,1,40,.66) 0%,rgba(10,1,40,.42) 34%,rgba(10,1,40,.74) 66%,rgba(10,1,40,.96) 88%,var(--indigo) 100%)}
.pbg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(0,0,0,0) 0%,rgba(10,1,40,.35) 100%);z-index:1}
/* the pages' own hero glows are for the plain background; dim them over a photo */
.has-bg .glow,.has-bg .hero-glow,.has-bg .arrive-glow{opacity:.35}
.has-bg .grid-bg{opacity:.5}
@media(max-width:900px){
  .pbg{height:min(90vh,780px)}
  .pbg img{object-position:50% 46%}
  .pbg::after{background:linear-gradient(180deg,rgba(10,1,40,.7) 0%,rgba(10,1,40,.5) 30%,rgba(10,1,40,.8) 64%,rgba(10,1,40,.97) 88%,var(--indigo) 100%)}
}
@media(prefers-reduced-transparency:reduce){.pbg{display:none}}
/* nonprofits page: its dark hero is opaque; let the photo through and fade into the hero's own dark */
body.biz.has-bg .bhero.dk{background:transparent}
body.biz .pbg::after{background:linear-gradient(180deg,rgba(14,4,54,.66) 0%,rgba(14,4,54,.44) 34%,rgba(14,4,54,.8) 66%,rgba(14,4,54,.97) 88%,var(--dk) 100%)}