/* the peak: their photo, the quote on the empty wall above the heads */
.band{
  --bh:min(clamp(560px,78svh,820px),70vw);
  --iw:max(100%,calc(var(--bh) * 2.06)); /* widen so the wall is tall enough for the copy; heads land at ~45% */
  --ix:.45;
  position:relative;isolation:isolate;overflow:hidden;
  height:var(--bh);max-height:880px;background:var(--dark);color:var(--dark-ink)
}
.band-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.band-bg picture{position:absolute;inset:0;display:block;overflow:hidden}
/* 4.5% overhang top and bottom covers the shared parallax travel (yPercent +-4) */
.band-bg img{
  position:absolute;top:-4.5%;left:calc((100% - var(--iw)) * var(--ix));
  width:var(--iw);max-width:none;height:109%;
  object-fit:cover;object-position:45% 0%
}
/* scrim aimed at the copy only: the people below stay clean */
.band::before{
  content:"";position:absolute;inset:0 0 auto;height:58%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hero-shade) 72%,transparent) 0%,color-mix(in srgb,var(--hero-shade) 62%,transparent) 45%,transparent 100%)
}
.band-copy{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(28px,3.4vw,48px)
}
.band-q{
  max-width:20ch;margin:0;font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,5vw,76px);line-height:1.04;letter-spacing:-.02em;color:var(--dark-ink);text-wrap:balance
}
.band-who{margin:12px 0 0;max-width:40ch;font-size:16px;line-height:1.4;font-weight:500;color:var(--dark-ink);text-wrap:balance}
.band-copy .btn{margin-top:20px}

@media (max-width:600px){
  .band{--bh:clamp(560px,78svh,700px);--iw:100%;--ix:0}
  .band-bg img{object-position:50% 0%}
  .band-copy{padding-top:20px}
  .band-q{line-height:1.02}
  .band-who{margin-top:8px;max-width:26ch}
  .band-copy .btn{margin-top:14px}
}