/* Grand Island landing (2026-10-14): the South Grand Island Bridge at night with moving searchlights
   behind the page title - the first screen postcard readers see. Words unchanged. */
header.hero.gi-photo{position:relative;overflow:hidden;background:#020a24;min-height:440px;display:flex;align-items:center;padding:56px 0}
header.hero.gi-photo > .wrap{position:relative;z-index:3;width:100%}
header.hero.gi-photo h1,header.hero.gi-photo .tag{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.gi-fx{position:absolute;inset:0}
.gi-fx .g-photo{position:absolute;inset:0;background:url("/images/hero-gi.webp") 62% 64%/cover no-repeat;animation:gpush 40s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes gpush{from{transform:scale(1)}to{transform:scale(1.06)}}
.gi-fx .g-beams{position:absolute;inset:0;display:block;z-index:2}
.gi-fx .g-shade{position:absolute;inset:0;z-index:1;background:
 linear-gradient(90deg,rgba(0,8,24,.92) 0%,rgba(0,10,32,.80) 30%,rgba(0,10,32,.35) 58%,rgba(0,8,24,.05) 82%),
 linear-gradient(180deg,rgba(0,8,24,.45) 0%,transparent 25%,transparent 75%,rgba(0,16,48,.9) 100%)}
@media (max-width:700px){
 header.hero.gi-photo{display:block;min-height:0;padding:0 0 22px}
 .gi-fx{position:relative;inset:auto;aspect-ratio:16/9;overflow:hidden;margin-bottom:18px}
 .gi-fx .g-photo{background-position:50% 100%;background-size:100% auto}
 .gi-fx .g-shade{background:linear-gradient(180deg,rgba(0,8,24,.3) 0%,transparent 25%,transparent 70%,#020a24 100%)}}
@media (prefers-reduced-motion:reduce){.gi-fx .g-photo{animation:none}}
/* like the homepage: no black bar. Desktop - the logo (bigger) and the menu buttons float over the
   bridge; phones - the page opens with a big centred logo in the sky that shrinks into the bar on scroll */
@media (min-width:701px){
 body:has(.gi-photo) > header.site-header{position:absolute!important;top:0;left:0;right:0;z-index:20;box-shadow:none!important;border-bottom:0!important;
  background:linear-gradient(180deg,rgba(0,6,18,.80) 0%,rgba(0,6,18,.38) 62%,rgba(0,6,18,0) 100%)!important}
 body:has(.gi-photo) > header.site-header .logo img{height:clamp(64px,min(8vw,13vh),112px)!important}
 body:has(.gi-photo) > header.site-header nav > a:not(.nav-add){background:rgba(6,14,36,.45)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
 header.hero.gi-photo{padding-top:calc(var(--hh,124px) + 40px);min-height:calc(440px + var(--hh,124px))}
 body:has(.gi-photo) .controls{top:0!important}}
@media (max-width:700px){
 :root{--sky:112px}
 body:has(.gi-photo) > header.site-header{background:rgba(0,8,20,var(--hb,1))!important;border-bottom-color:rgba(255,255,255,calc(.08 * var(--hb,1)))!important;box-shadow:0 2px 14px rgba(0,8,20,calc(.45 * var(--hb,1)))!important}
 body:has(.gi-photo) > header.site-header .logo{position:relative;z-index:2}
 body:has(.gi-photo) > header.site-header .logo picture{display:block;transform-origin:0 0;will-change:transform}
 header.hero.gi-photo{margin-top:calc(-1 * var(--hh,73px))}
 .gi-fx{aspect-ratio:auto;height:calc(100vw * 900 / 1600 + var(--sky))}
 .gi-fx .g-photo{background-color:#020a24;background-size:cover!important;background-position:42% 100%!important}   /* the photo fills the band to the very top: no plain strip */
 .gi-fx .g-shade{background:linear-gradient(180deg,rgba(0,8,24,.55) 0%,rgba(0,8,24,.15) 30%,transparent 50%,transparent 72%,#020a24 100%)}}