/* Keep one stable composition on large displays; never zoom the photo to fill
   the width of an ultrawide monitor. At small widths, stack copy and artwork. */
header,footer{padding-inline:max(24px,calc((100% - 1328px)/2))}
.hero{display:block;min-height:0;padding:0;background:#111516;overflow:hidden}
.hero-inner{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;max-width:1440px;min-height:660px;padding:72px 56px;margin:auto}
.hero-art{position:absolute;z-index:-1;right:0;top:0;width:76%;max-width:1040px;height:100%;margin:0;pointer-events:none}
.hero-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center;mask-image:linear-gradient(90deg,transparent 0%,#000 27%,#000 97%,transparent 100%)}
.hero-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#111516 0%,transparent 13%,transparent 85%,#111516 100%)}
.hero-copy{position:relative;max-width:520px;width:44%}
.hero h1{font-size:clamp(46px,4.7vw,68px);letter-spacing:-2px}
.hero p:not(.eyebrow){max-width:365px;font-size:15px}
.hero .note{max-width:350px}
.intro{padding:44px max(32px,calc((100% - 1280px)/2)) 54px}
@media(min-width:1800px){.hero-inner{min-height:700px}}
@media(min-width:901px) and (max-width:1150px){.hero-inner{min-height:600px;padding:56px 40px}.hero h1{font-size:50px}.hero-copy{width:46%}.hero-art{width:76%}.hero p:not(.eyebrow){max-width:320px}}
@media(max-width:900px){
  .hero-inner{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:48px 40px 0}
  .hero-copy{width:100%;max-width:620px;margin:0 auto}
  .hero h1{font-size:clamp(44px,7.2vw,62px)}
  .hero p:not(.eyebrow){max-width:420px;font-size:15px}
  .hero-art{position:relative;z-index:0;width:calc(100% + 80px);max-width:700px;height:auto;aspect-ratio:1.25;margin:0 -40px;align-self:center;right:auto;top:auto;overflow:hidden}
  .hero-art img{position:absolute;right:0;top:0;width:120%;max-width:none;height:auto;object-fit:initial;mask-image:none}
  .hero-art::after{background:linear-gradient(180deg,#111516 0%,#11151633 15%,transparent 28%,transparent 85%,#111516 100%)}
  .intro{padding:36px 40px 44px}
}
@media(max-width:570px){
  header,footer{padding-inline:24px}
  .hero-inner{padding:38px 24px 0}
  .hero-copy{max-width:420px}
  .hero h1{font-size:clamp(38px,10.7vw,54px);line-height:1.12;letter-spacing:-1.4px}
  .hero .eyebrow{font-size:9px;letter-spacing:2.1px;margin-bottom:18px}
  .hero .rule{margin:20px 0}
  .hero p:not(.eyebrow){font-size:14px;max-width:340px}
  .hero .note{font-size:10px;max-width:300px}
  .hero-art{width:calc(100% + 48px);max-width:570px;aspect-ratio:1.079;margin:0 -24px}
  .hero-art img{width:139%;height:auto}
  .intro{padding:30px 24px 40px}
}