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

/* Remove the legacy decorative oval that sat between copy and portrait. */
.hero-visual:after{
  content:none!important;
  display:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:none!important;
}

@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;
  }

  /* Blend the photo into the page with straight, edge-based fades only.
     Avoid radial masks/glows so no oval silhouette can appear around the portrait. */
  .hero-visual:before{
    display:none!important;
    background:none!important;
    filter:none!important;
  }

  .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:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.22) 7%,
      rgba(0,0,0,.72) 17%,
      #000 29%,
      #000 100%
    )!important;
    mask-image:linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.22) 7%,
      rgba(0,0,0,.72) 17%,
      #000 29%,
      #000 100%
    )!important;
  }

  .hero-photo-fade{
    inset:-6% -8% -7% -7%!important;
    border:0!important;
    border-radius:0!important;
    background:
      linear-gradient(
        90deg,
        #02040c 0%,
        rgba(2,4,12,.96) 9%,
        rgba(2,4,12,.66) 19%,
        rgba(2,4,12,.22) 31%,
        transparent 44%
      ),
      linear-gradient(
        270deg,
        #02040c 0%,
        rgba(2,4,12,.48) 5%,
        rgba(2,4,12,.12) 12%,
        transparent 20%
      ),
      linear-gradient(
        180deg,
        #02040c 0%,
        rgba(2,4,12,.20) 10%,
        transparent 20%,
        transparent 79%,
        rgba(2,4,12,.30) 90%,
        #02040c 100%
      )!important;
  }
}

@media(max-width:980px){
  .hero-visual:before{
    display:none!important;
    background:none!important;
    filter:none!important;
  }
  .hero-photo-img{
    -webkit-mask-image:linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.55) 9%,
      #000 17%,
      #000 82%,
      rgba(0,0,0,.62) 91%,
      transparent 100%
    )!important;
    mask-image:linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.55) 9%,
      #000 17%,
      #000 82%,
      rgba(0,0,0,.62) 91%,
      transparent 100%
    )!important;
  }
  .hero-photo-fade{
    background:
      linear-gradient(90deg,#02040c 0%,rgba(2,4,12,.54) 8%,rgba(2,4,12,.12) 17%,transparent 27%),
      linear-gradient(270deg,#02040c 0%,rgba(2,4,12,.54) 8%,rgba(2,4,12,.12) 17%,transparent 27%),
      linear-gradient(180deg,#02040c 0%,rgba(2,4,12,.26) 9%,transparent 19%,transparent 78%,rgba(2,4,12,.35) 90%,#02040c 100%)!important;
    border-radius:0!important;
  }
}