/* Bencefalo v47 — desktop Hero keeps full portrait proportions */

@media(min-width:981px){
  html,body,#app{
    overflow-x:clip!important;
  }

  .hero{
    overflow:visible!important;
  }

  .hero-visual{
    left:42%!important;
    right:calc((100vw - 100%) / -2 - 2.5vw)!important;
    top:-5%!important;
    bottom:-6%!important;
  }

  /* Preserve the portrait aspect ratio on desktop: no object-fit crop. */
  .hero-photo-img{
    top:-9%!important;
    right:2%!important;
    bottom:auto!important;
    left:auto!important;
    width:auto!important;
    height:122%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    filter:saturate(.88) contrast(1.03) brightness(.80)!important;
    -webkit-mask-image:radial-gradient(
      ellipse 61% 77% at 52% 49%,
      #000 0%,
      #000 52%,
      rgba(0,0,0,.95) 62%,
      rgba(0,0,0,.76) 72%,
      rgba(0,0,0,.48) 81%,
      rgba(0,0,0,.20) 90%,
      transparent 100%
    )!important;
    mask-image:radial-gradient(
      ellipse 61% 77% at 52% 49%,
      #000 0%,
      #000 52%,
      rgba(0,0,0,.95) 62%,
      rgba(0,0,0,.76) 72%,
      rgba(0,0,0,.48) 81%,
      rgba(0,0,0,.20) 90%,
      transparent 100%
    )!important;
  }

  .hero-photo-fade{
    inset:-6% -8% -7% -7%!important;
    background:
      radial-gradient(
        ellipse at 67% 47%,
        transparent 0%,
        transparent 46%,
        rgba(2,4,12,.05) 60%,
        rgba(2,4,12,.18) 72%,
        rgba(2,4,12,.44) 85%,
        rgba(2,4,12,.92) 100%
      ),
      linear-gradient(
        90deg,
        #02040c 0%,
        rgba(2,4,12,.88) 10%,
        rgba(2,4,12,.36) 24%,
        transparent 42%,
        transparent 78%,
        rgba(2,4,12,.20) 88%,
        rgba(2,4,12,.66) 96%,
        #02040c 100%
      ),
      linear-gradient(
        180deg,
        #02040c 0%,
        rgba(2,4,12,.24) 10%,
        transparent 21%,
        transparent 79%,
        rgba(2,4,12,.32) 90%,
        #02040c 100%
      )!important;
  }
}