/* Matches the reference's 1440px outer container and 64px desktop gutters. */
:root{--content-gutter:max(64px,calc((100% - 1312px)/2))}
header,.hero,.section,footer.site-footer,.belt-stage{padding-left:var(--content-gutter);padding-right:var(--content-gutter)}
.hero .scroll-cue{left:var(--content-gutter)}
.belt-product{max-width:1120px}
@media(max-width:1000px){:root{--content-gutter:40px}.footer-main{gap:40px}}
@media(max-width:650px){:root{--content-gutter:24px}header,.hero,.section,footer.site-footer,.belt-stage{padding-left:24px;padding-right:24px}.hero .scroll-cue{left:24px}.footer-main{gap:35px}}
/* Pull the desktop scene back without changing the content layout. */
@media(min-width:651px){.hero .arena{inset:-1%;background-size:auto 100%;background-repeat:no-repeat;background-color:#04131e;background-position:right center;animation:hero-distant-zoom 18s ease-in-out infinite alternate;transform-origin:75% 65%}}
@keyframes hero-distant-zoom{from{transform:translate3d(0,0,0) scale(1) rotate(-.2deg)}to{transform:translate3d(-.3%,.2%,0) scale(1.07) rotate(.2deg)}}
@media(prefers-reduced-motion:reduce){.hero .arena{animation:none!important;transform:none!important}}
@media(min-width:651px){.hero .arena{background-position:center center;inset:-1% -1% -1% -8%;background-color:#04131e;transform-origin:65% 65%}}
/* Fade the photographic edges into the surrounding navy canvas. */
@media(min-width:651px){.hero .arena{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 78%,transparent 98%);mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 78%,transparent 98%)}.hero{background:#04131e}.hero:after{background:linear-gradient(90deg,#04131ee8 0%,#04131ea3 29%,#04131e15 54%,transparent 72%,#04131e66 100%),linear-gradient(0deg,#061923,transparent 22%)}}
@media(min-width:651px){.hero .arena{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 64%,transparent 82%);mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 64%,transparent 82%)}}
/* Smaller desktops retain both competitors; phones use a quiet image overlay. */
@media(min-width:651px) and (max-width:1450px){.hero .arena{inset:-1%;background-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 93%,transparent 100%)}.hero:after{background:linear-gradient(90deg,#04131ee8 0%,#04131ea3 30%,#04131e15 55%,transparent 85%),linear-gradient(0deg,#061923,transparent 20%)}}
@media(max-width:650px){.hero .arena{opacity:.2;-webkit-mask-image:none;mask-image:none}.hero:after{background:linear-gradient(180deg,#04131e99 0%,#04131e66 45%,#04131e33 78%,#06192388 100%)}.hero .mesh{opacity:.25}}