/* V8: keep both hero columns on the same centered 1372px grid as the page.
   The full-bleed background stays viewport-wide, but photo positioning is
   resolved against .hero-content rather than the viewport.
   This prevents the rightward drift at wide viewports / zoomed-out browsers. */
.hero-fullwidth .hero-content {
  position: relative;
  isolation: isolate;
}
.hero-fullwidth .hero-visual {
  position: absolute;
  right: 0;
  bottom: -25px;
  width: min(72%, 935px);
  height: calc(100% + 25px);
  max-width: 100%;
  flex: none;
  z-index: 1;
}
.hero-fullwidth .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  /* Blend the edges of the portrait's original studio background into the
     full-width navy canvas instead of showing a hard rectangular boundary. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 13%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 13%, black 88%, transparent 100%);
}
.hero-fullwidth .hero-copy {
  z-index: 2;
}
/* At browser zoom-out widths, do not let the face drift beyond the
   fixed centered content edge while the background expands. */
@media (min-width: 1600px) {
  .hero-fullwidth .hero-visual {
    right: 0;
    width: min(72%, 975px);
  }
}
@media (min-width: 1100px) and (max-width: 1360px) {
  .hero-fullwidth .hero-visual {
    width: 73%;
    right: 0;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .hero-fullwidth .hero-visual {
    width: 72%;
    right: 0;
    bottom: -20px;
  }
}
/* Keep the portrait below the copy on phone screens, both within the
   same container margins. The natural document flow is more robust. */
@media (max-width: 760px) {
  .hero-fullwidth .hero-stage {
    display: block;
  }
  .hero-fullwidth .hero-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
  }
  .hero-fullwidth .hero-copy {
    flex: 0 0 auto;
    width: 100%;
    max-width: 600px;
  }
  .hero-fullwidth .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: min(100%, 600px);
    height: 370px;
    margin: 18px auto -4px;
    overflow: hidden;
    flex: 0 0 auto;
    order: initial;
  }
  .hero-fullwidth .hero-visual img {
    object-position: center bottom;
  }
}
@media (max-width: 490px) {
  .hero-fullwidth .hero-visual {
    height: 335px;
    margin-top: 9px;
  }
}
@media (max-width: 370px) {
  .hero-fullwidth .hero-visual {
    height: 290px;
  }
}