/* ==========================================================================
   Seven Plus - Homepage hero (static)
   One full-height archive photo with a plain text caption overlay. Same
   composition on every device and every breakpoint - no scroll-scrubbing,
   no position:sticky, no second image layer, no JavaScript, no scroll cue.

   History: this used to be a scroll-driven "cinematic" hero - a tall
   (240-350vh) container with a position:sticky inner stage that hero.js
   cycled through several scenes as the user scrolled (entrance photo ->
   zoom -> a second aerial photo -> word/brand reveals). That relied on
   position:sticky staying pinned for the entire scroll range, which proved
   unreliable in practice: on some real phones and on some (not all)
   desktops - depending on browser/display-scaling/prefers-reduced-motion,
   not on anything this site's code could detect and branch on reliably -
   the sticky stage let go early. Since the tall outer container carries no
   background of its own, whatever height went un-pinned showed through as
   a large plain-white gap after the hero, and the second image surfaced
   out of place mid-transition, reading as a leftover "old" hero image.
   Retired entirely (markup removed in functions.php, hero.js emptied and
   unenqueued) rather than patched, since a static hero cannot exhibit
   either failure mode: there is no tall container and no second image to
   fail to hide.
   ========================================================================== */

.sp-hero-widget .elementor-widget-container{ padding:0; margin:0; line-height:0; }

.sp-hero2{
  position:relative;
  height:100vh; /* fallback for browsers without dvh */
  height:100dvh;
}
.sp-hero2__stage{
  position:relative;
  height:100vh; /* fallback for browsers without dvh */
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sp-dark, #1E1A26);
  isolation:isolate;
}

.sp-hero2__layer{ position:absolute; inset:0; z-index:1; }
.sp-hero2__layer img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; display:block; }
.sp-hero2__entrance{ opacity:1; }
.sp-hero2__entrance img{ transform:none; object-position:46% center; }

.sp-hero2__tint{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,16,26,0) 50%, rgba(20,16,26,.6) 100%);
}

/* Caption overlay - plain position:absolute text anchored bottom-right over
   the empty sand foreground of the archive photo, clear of the station
   building/vehicles/power lines. Static (no opacity/transform binding to
   any JS-driven variable - there is no JS here anymore), so it can never
   affect the hero's height or the page's document flow. */
.sp-hero2__brand{
  position:absolute; z-index:6;
  right:6%; bottom:64px; max-width:340px;
}
.sp-hero2__brand-inner{
  display:flex; align-items:stretch; gap:16px;
}
.sp-hero2__brand-accent{
  flex:0 0 auto; width:3px; border-radius:2px; align-self:stretch;
  background:linear-gradient(180deg, var(--sp-orange), var(--sp-purple));
}
.sp-hero2__brand-text{ text-align:right; }
.sp-hero2__brand-title{
  font-family:var(--sp-font-heading); font-weight:700;
  font-size:clamp(22px,2.8vw,32px); line-height:1.3; color:#fff; margin:0 0 8px;
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.sp-hero2__brand-sub{
  font-family:var(--sp-font); font-weight:500;
  font-size:clamp(14px,1.4vw,16px); line-height:1.6; color:rgba(255,255,255,.9); margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}

@media (max-width:640px){
  .sp-hero2__entrance img{ object-position:42% center; }
  .sp-hero2__brand{ right:20px; bottom:36px; max-width:260px; }
  .sp-hero2__brand-text{ max-width:230px; }
  .sp-hero2__brand-title{ font-size:clamp(19px,5.6vw,23px); }
  .sp-hero2__brand-sub{ font-size:13px; }
}

/* Short viewports (landscape phones) */
@media (max-height:480px){
  .sp-hero2__stage{ height:640px; }
}