/* Preserve the original portrait framing: scale the banner by height, not width. */
.hero--fixed-framing .hero-visual{
  position:absolute;
  inset:0 max(0px,calc((100% - 1376px)/2)) 0 auto;
  display:block;
  width:auto;
  max-width:none;
  height:100%;
  aspect-ratio:1672/941;
  z-index:-2;
  mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 94%,transparent 100%);
}
.hero--fixed-framing .hero-photo{
  position:static;
  inset:auto;
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  object-fit:contain;
  object-position:right top;
  transform:none;
}

/* On narrow screens the same photograph follows the copy. Only its empty left area
   leaves the viewport; the person retains the framing of the source image. */
@media(max-width:980px){
  .hero--fixed-framing{
    --hero-photo-height:clamp(360px,105vw,440px);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    row-gap:0;
    padding-block:30px 27px;
    background:#f2eee7;
  }
  .hero--fixed-framing .hero-inner{
    display:contents;
    min-height:0;
    padding:0;
  }
  .hero--fixed-framing .hero-copy{
    order:0;
    width:calc(100% - 40px);
    max-width:560px;
    min-width:0;
    margin-inline:auto;
    padding:0 0 24px;
  }
  .hero--fixed-framing .hero-visual{
    order:1;
    position:relative;
    inset:auto;
    width:100%;
    max-width:none;
    height:var(--hero-photo-height);
    aspect-ratio:auto;
    overflow:hidden;
    z-index:0;
    mask-image:none;
  }
  .hero--fixed-framing .hero-photo{
    position:absolute;
    inset:0 auto auto 50%;
    width:auto;
    max-width:none;
    height:100%;
    object-fit:contain;
    object-position:center top;
    transform:translateX(-72.2%);
  }
  .hero--fixed-framing .hero-wash{display:none}
  .hero--fixed-framing .hero-caption{
    order:2;
    position:static;
    inset:auto;
    display:block;
    width:calc(100% - 40px);
    max-width:560px;
    margin:0 auto;
    padding:17px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    text-align:center;
  }
  .hero--fixed-framing .hero-caption strong{
    font-size:21px;
    line-height:1.22;
  }
  .hero--fixed-framing .hero-caption span:not(.caption-line){margin-top:5px}
}
@media(min-width:721px) and (max-width:980px){
  .hero--fixed-framing{padding-top:42px}
  .hero--fixed-framing .hero-copy{width:calc(100% - 64px);max-width:680px;padding-bottom:32px}
  .hero--fixed-framing h1{max-width:600px;font-size:42px}
  .hero--fixed-framing .hero-description{max-width:560px}
  .hero--fixed-framing .hero-photo{mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 94%,transparent 100%)}
  .hero--fixed-framing .hero-caption{max-width:680px}
}
@media(max-width:360px){
  .hero--fixed-framing{padding-top:27px}
  .hero--fixed-framing .hero-copy,
  .hero--fixed-framing .hero-caption{width:calc(100% - 32px)}
  .hero--fixed-framing .hero-caption strong{font-size:20px}
}