/* Home cover: one photograph (the A6250 row beside its substation) with a light
   energy layer on top, faded into the page at the top, bottom and both edges. */
.hero.hflow{background:var(--bg); isolation:isolate}
.hf-stage{position:absolute; inset:0; z-index:0; overflow:hidden; will-change:transform}
.hf-stage img,.hf-cv{position:absolute; inset:0; width:100%; height:100%}
.hf-stage img{object-fit:cover; object-position:58% 42%; filter:saturate(1.04) contrast(1.06) brightness(.9);
  opacity:0; transform:scale(1.045); transition:opacity 1.4s var(--e), transform 2.6s var(--e)}
.hero.hflow.lit .hf-stage img{opacity:1; transform:none}
.hf-cv{z-index:1; pointer-events:none; opacity:0; transition:opacity 1.6s ease .5s}
.hero.hflow.lit .hf-cv{opacity:1}
/* the darkness: top (under the header), bottom (into the page), both edges, and a soft vignette */
.hf-stage::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:
  linear-gradient(to bottom, rgba(5,7,12,.92) 0%, rgba(5,7,12,.45) 14%, rgba(5,7,12,0) 30%),
  linear-gradient(to top, var(--bg) 0%, rgba(5,7,12,.94) 16%, rgba(5,7,12,.55) 38%, rgba(5,7,12,0) 62%),
  linear-gradient(to right, rgba(5,7,12,.95) 0%, rgba(5,7,12,.62) 22%, rgba(5,7,12,.18) 46%, rgba(5,7,12,0) 62%),
  linear-gradient(to left, rgba(5,7,12,.9) 0%, rgba(5,7,12,.3) 9%, rgba(5,7,12,0) 20%),
  radial-gradient(120% 90% at 62% 42%, rgba(5,7,12,0) 48%, rgba(5,7,12,.55) 100%)}

.hero.hflow .wrap{position:relative; z-index:3}
.hero.hflow{padding-top:calc(var(--navh) + 40px); padding-bottom:clamp(56px,8vh,96px)}
.hero.hflow .h1{max-width:none; font-size:clamp(40px,5.1vw,82px); line-height:1.02}
.hero.hflow .hero-sub{max-width:54ch; margin-top:22px}
.hero.hflow .btn-row{margin-top:30px!important}
.hero.hflow .trust{gap:10px; margin-top:30px}
.hero.hflow .trust span{padding:8px 14px; border-radius:999px; background:rgba(8,14,22,.62); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--ink2)}
.hero.hflow .trust span:first-child{border-color:rgba(60,204,252,.45); color:var(--ink)}
.hero.hflow .scrollcue{left:auto; right:var(--gut); bottom:34px}
.hero.hflow .seq-tag{position:absolute; right:var(--gut); top:calc(var(--navh) + 18px); z-index:4; font-family:var(--fm); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(238,243,250,.42)}

@media(max-height:800px) and (min-width:901px){
  .hero.hflow .h1{font-size:clamp(40px,4.6vw,66px)}
  .hero.hflow .trust{display:none}
}
/* phones: the photograph gets its own band at the top and the copy sits under it */
@media(max-width:900px){
  .hero.hflow{padding-top:calc(var(--navh) + 30vh)}
  .hf-stage{bottom:auto; height:72vh; height:72svh}
  .hf-stage img{object-position:84% 50%}
  .hf-stage::after{background:
    linear-gradient(to bottom, rgba(5,7,12,.85) 0%, rgba(5,7,12,0) 22%),
    linear-gradient(to top, var(--bg) 0%, rgba(5,7,12,.9) 22%, rgba(5,7,12,.35) 48%, rgba(5,7,12,0) 70%),
    linear-gradient(to right, rgba(5,7,12,.55) 0%, rgba(5,7,12,0) 26%),
    linear-gradient(to left, rgba(5,7,12,.5) 0%, rgba(5,7,12,0) 18%)}
  .hero.hflow .h1{font-size:clamp(34px,9.6vw,48px)}
  .hero.hflow .seq-tag{top:calc(var(--navh) + 12px)}
  .hero.hflow .trust{gap:8px; margin-top:24px}
  .hero.hflow .trust span{padding:6px 11px}
}
@media(max-width:600px){
  .hero.hflow .lcos-pill{max-width:100%}
  .hero.hflow .lcos-pill b{white-space:normal; line-height:1.5}
  .hero.hflow .lcos-pill span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hf-stage img{transition:none; transform:none}
}