/* Final mobile hero composition — editorial, compact, no portrait/text collision */
@media (max-width:900px){
  .hero{
    min-height:0!important;
    max-height:none!important;
    display:block!important;
    padding-top:104px;
    background:#02070d;
  }
  .hero-media{
    position:relative!important;
    inset:auto!important;
    height:clamp(235px,62vw,360px);
    overflow:hidden;
    background:#02070d;
  }
  .hero-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:62% 42%;
    transform:none!important;
    filter:saturate(.78) contrast(1.04) brightness(.82)!important;
  }
  .hero-media:after{
    background:
      linear-gradient(90deg,rgba(2,7,13,.80) 0%,rgba(2,7,13,.45) 34%,rgba(2,7,13,.08) 72%),
      linear-gradient(0deg,rgba(2,7,13,1) 0%,rgba(2,7,13,.22) 40%,rgba(2,7,13,.06) 100%)!important;
  }
  .hero-content{
    position:relative;
    padding:24px 0 34px!important;
    max-width:none!important;
  }
  .hero-kicker{
    font-size:.66rem!important;
    letter-spacing:.14em!important;
  }
  .hero h1{
    font-size:clamp(3.35rem,17vw,4.5rem)!important;
    line-height:.82!important;
    margin:18px 0 20px!important;
    max-width:100%!important;
  }
  .hero-copy{
    font-size:.96rem!important;
    line-height:1.58!important;
    max-width:100%!important;
    color:#cbd4dc!important;
  }
  .cta-row{
    margin-top:24px!important;
  }
  .hero .btn{
    min-height:50px!important;
  }
  .scroll-cue{display:none!important}
}

@media (max-width:520px){
  .hero{padding-top:104px}
  .hero-media{height:clamp(220px,60vw,285px)}
  .hero-media img{object-position:61% 42%}
  .hero-content{padding:22px 0 30px!important}
  .hero h1{font-size:clamp(3.2rem,16.5vw,4.25rem)!important}
  .hero-copy{font-size:.93rem!important}
}