/* THE EAGLE • viewport-cover presentation, inspired by the reference site.
   Exact first-screen height; one slide photo at any instant; constant-speed zoom.
   This is intentionally loaded after the previous slideshow styles. */

/* Let the sticky navigation sit ABOVE the top of the image, without using
   an extra 82px of document height. This is scoped ONLY to the Home route. */
body:has(.page-view[data-page="home"]:not([hidden])) > header {
  position:sticky !important;
  top:0 !important;
  margin-bottom:-82px !important;
  z-index:100 !important;
}

/* Keep header and full-screen photo together inside the first viewport. */
.page-view[data-page="home"] > section.hero,
.page-view[data-page="home"] section.hero {
  position:relative !important;
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:100vh !important;
  height:100svh !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:0 !important;
}

/* Maintain a single original photo per frame. No background repeat, gradient
   image copy or blurred second layer. Cover the viewport continuously. */
.page-view[data-page="home"] .hero-split,
.page-view[data-page="home"] .hero-split .eagle-slide-frame {
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}
.page-view[data-page="home"] .hero-split .eagle-slide-frame::before,
.page-view[data-page="home"] .hero-split .eagle-slide-frame::after {
  display:none !important;
  content:none !important;
  background:none !important;
}
.page-view[data-page="home"] .hero-split .eagle-slide-frame .hero-image {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center center !important;
  transform:scale(1) !important;
  transform-origin:center center !important;
  /* Animation uses independent CSS scale so prior transform overrides cannot break it. */
  transition:none !important;
}
.page-view[data-page="home"] .hero-split .eagle-slide-frame.is-active .hero-image {
  animation:eagle-steady-viewport-zoom 10s linear both !important;
}
@keyframes eagle-steady-viewport-zoom {
  from {scale:1.24;}
  to {scale:1;}
}

/* As on the reference, keep branding above the photograph. Inset the
   text below the header so it never overlaps the navigation. */
.page-view[data-page="home"] .hero .hero-content {
  padding-top:clamp(150px,calc(12svh + 75px),218px) !important;
}
@media(max-width:560px) {
  body:has(.page-view[data-page="home"]:not([hidden])) > header {
    margin-bottom:-76px !important;
  }
  .page-view[data-page="home"] .hero .hero-content {
    padding-top:clamp(140px,calc(10svh + 72px),184px) !important;
  }
}
@media(max-height:680px) {
  .page-view[data-page="home"] .hero .hero-content {
    padding-top:118px !important;
  }
  .page-view[data-page="home"] .hero .hero-content .hero-actions {
    margin-top:14px !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  .page-view[data-page="home"] .hero-split .eagle-slide-frame.is-active .hero-image {
    animation:none !important;
    scale:1 !important;
  }
}

/* Compact screens: keep all CTAs/trust badges clear of the bottom caption. */
@media(max-width:360px) and (max-height:740px) {
  .page-view[data-page="home"] .hero .hero-content {
    padding-top:113px !important;
    padding-bottom:22px !important;
  }
  .page-view[data-page="home"] .hero .hero-intro {
    font-size:.83rem !important;
    line-height:1.47 !important;
  }
  .page-view[data-page="home"] .hero .hero-actions {
    gap:7px !important;
    margin-top:14px !important;
  }
  .page-view[data-page="home"] .hero .hero-actions .button {
    min-height:43px !important;
  }
  .page-view[data-page="home"] .hero .hero-trust {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:5px !important;
    row-gap:6px !important;
    margin-top:12px !important;
  }
  .page-view[data-page="home"] .hero .hero-trust > span {
    box-sizing:border-box !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:5px 6px !important;
    font-size:.65rem !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }
  .page-view[data-page="home"] .hero .hero-trust > span > span {
    white-space:normal !important;
  }
}