/* VNS home hero: mobile/tablet image-and-copy overlay.
   Desktop >=1051px intentionally remains unchanged. 2026-10-23 */
@media (max-width:1050px) {
  body.home .hero {
    background:#092b49!important;
    width:100%!important;
    overflow:hidden!important;
  }
  body.home .hero .hero-shell {
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#092b49!important;
    isolation:isolate!important;
  }
  body.home .hero .hero-media {
    position:absolute!important;
    inset:0 0 auto 0!important;
    display:block!important;
    order:initial!important;
    width:100%!important;
    max-width:none!important;
    height:clamp(340px,75vw,570px)!important;
    max-height:none!important;
    overflow:hidden!important;
    background:#092b49!important;
    line-height:0!important;
    z-index:0!important;
  }
  body.home .hero .hero-banner {
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:71% 43%!important;
    filter:none!important;
    transform:none!important;
  }
  body.home .hero .hero-shade {
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,
      rgba(8,36,59,.05) 0%,
      rgba(8,36,59,.13) 17%,
      rgba(8,36,59,.67) 37%,
      rgba(8,36,59,.95) 54%,
      #092b49 70%,
      #092b49 100%)!important;
  }
  body.home .hero .hero-content {
    position:relative!important;
    inset:auto!important;
    z-index:2!important;
    order:initial!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:clamp(230px,36vw,380px) 24px clamp(30px,4vw,46px)!important;
    background:transparent!important;
    pointer-events:none!important;
    box-sizing:border-box!important;
  }
  body.home .hero .hero-copy {
    width:min(100%,740px)!important;
    max-width:100%!important;
    padding:0!important;
    margin:0 auto!important;
    pointer-events:auto!important;
  }
  body.home .hero .eyebrow,
  body.home .hero h1,
  body.home .hero .lead,
  body.home .hero .hero-copy>p:not(.eyebrow):not(.lead) {
    color:#fff!important;
    text-shadow:0 2px 10px rgba(2,21,37,.35)!important;
  }
  body.home .hero .eyebrow {
    color:#ffe3a0!important;
    font-size:12px!important;
    letter-spacing:.13em!important;
    line-height:1.4!important;
    margin:0 0 12px!important;
  }
  body.home .hero h1 {
    margin:0 0 15px!important;
    font-size:clamp(33px,4.4vw,43px)!important;
    line-height:1.11!important;
    letter-spacing:-.035em!important;
    text-wrap:balance;
  }
  body.home .hero .lead {
    margin:0 0 12px!important;
    font-size:clamp(17px,2.1vw,19px)!important;
    line-height:1.45!important;
  }
  body.home .hero .hero-copy>p:not(.eyebrow):not(.lead) {
    font-size:15px!important;
    line-height:1.52!important;
    margin-bottom:0!important;
  }
  body.home .hero .actions {
    display:flex!important;
    flex-wrap:wrap!important;
    gap:11px!important;
    margin-top:19px!important;
  }
  body.home .hero .actions .btn {
    flex:0 1 auto!important;
    min-width:0!important;
    min-height:46px!important;
    font-size:14px!important;
    padding:11px 17px!important;
    gap:9px!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:540px) {
  body.home .hero .hero-content {
    padding:225px 18px 29px!important;
  }
  body.home .hero h1 {
    font-size:clamp(29px,8.15vw,36px)!important;
  }
  body.home .hero .lead {font-size:16.5px!important}
  body.home .hero .hero-copy>p:not(.eyebrow):not(.lead) {font-size:14.5px!important}
  body.home .hero .hero-media {height:clamp(322px,88vw,400px)!important}
}
@media (max-width:360px) {
  body.home .hero .hero-content {padding:207px 16px 27px!important}
  body.home .hero .hero-media {height:320px!important}
  body.home .hero .actions .btn {flex:1 1 145px!important;padding:10px 12px!important}
}
@media (prefers-reduced-motion: reduce) {
  body.home .hero * {scroll-behavior:auto!important}
}