/* Original cover coordinates: 793.92 × 1129.44. Keep every layer on this canvas. */
.hero.hero{grid-template-columns:1fr 1fr;background:#191d1e;min-height:740px}
.hero.hero .hero-composition{display:flex;justify-content:center;align-items:center;padding:0 0 0 7%;min-height:740px;height:auto;background:transparent;isolation:isolate;--hero-x:0px;--hero-y:0px}
.hero-art{display:block;position:relative;width:min(100%,530px);height:auto;aspect-ratio:793.92/1129.44;overflow:visible;pointer-events:none;user-select:none}
.hero.hero .hero-copy{padding:56px 9% 56px 5%;min-width:0}
.hero-element-layer{animation:hero-cover-breathe 14s ease-in-out infinite alternate;transform-origin:390px 565px}
.hero-year-layer{transform:translate(calc(var(--hero-x)*.15),calc(var(--hero-y)*.15))}
.hero-symbol-layer{filter:brightness(0) invert(1);transform:translate(calc(var(--hero-x)*.3),calc(var(--hero-y)*.3))}
@keyframes hero-cover-breathe{from{opacity:.96}to{opacity:1}}
.hero-art-paused .hero-element-layer{animation-play-state:paused}
@media(min-width:1600px){.hero.hero,.hero.hero .hero-composition{min-height:800px}.hero-art{width:min(100%,565px)}}
@media(min-width:701px) and (max-width:1000px){.hero.hero,.hero.hero .hero-composition{min-height:560px}.hero.hero .hero-copy{padding:40px 7% 40px 4%}.hero.hero .hero-copy h1{font-size:clamp(35px,4.6vw,48px)}}
@media(max-width:700px){.hero.hero{grid-template-columns:1fr;min-height:0}.hero.hero .hero-composition{min-height:0;height:auto;padding:12px 6% 0}.hero-art{width:min(100%,390px)}.hero.hero .hero-copy{padding:20px 6% 44px}.hero-copy h1{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.hero-element-layer{animation:none!important}.hero-year-layer,.hero-symbol-layer{transform:none}}

/* The wave belongs to the whole hero, so its only crop is the section boundary. */
.hero.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-wave{position:absolute;z-index:-1;pointer-events:none;left:-15%;top:-20%;width:54%;height:150%;background:linear-gradient(90deg,#644a32 0%,#45382c 18%,#2d2923 36%,#20211f 50%,#191d1e 68%,#191d1e 100%);mask:url('assets/hero-element.svg') left top/auto 100% no-repeat;-webkit-mask:url('assets/hero-element.svg') left top/auto 100% no-repeat;transform-origin:45% 55%;animation:hero-wave-flow 10s ease-in-out infinite alternate}
.hero-year-layer{animation:hero-year-float 8s ease-in-out infinite alternate;will-change:transform}
.hero-symbol-layer{animation:hero-symbol-float 6s ease-in-out infinite alternate;will-change:transform}
.hero-art-caption{opacity:1;transition:opacity 1.15s cubic-bezier(.22,1,.36,1),transform 1.35s cubic-bezier(.22,1,.36,1)}
@keyframes hero-wave-flow{from{transform:translate3d(-22px,20px,0) rotate(-1.2deg)}to{transform:translate3d(26px,-24px,0) rotate(1.2deg)}}
@keyframes hero-year-float{from{transform:translate3d(calc(var(--hero-x)*.5),calc(var(--hero-y)*.5 - 14px),0)}to{transform:translate3d(calc(var(--hero-x)*.5),calc(var(--hero-y)*.5 + 14px),0)}}
@keyframes hero-symbol-float{from{transform:translate3d(calc(var(--hero-x)*1.2),calc(var(--hero-y)*1.2 + 12px),0) rotate(-1.4deg) scale(.985)}to{transform:translate3d(calc(var(--hero-x)*1.2),calc(var(--hero-y)*1.2 - 16px),0) rotate(1.4deg) scale(1.02)}}
@keyframes hero-caption-float{from{transform:translateY(2px)}to{transform:translateY(-2px)}}
.hero-art-paused .hero-year-layer,.hero-art-paused .hero-symbol-layer,.hero-art-paused .hero-art-caption,.hero-wave-paused .hero-wave{animation-play-state:paused}
@media(max-width:700px){.hero-wave{left:-75%;top:-12%;width:150%;height:125%;}.hero.hero .hero-composition{padding:8px 3% 0}}
@media(prefers-reduced-motion:reduce){.hero-wave,.hero-year-layer,.hero-symbol-layer,.hero-art-caption{animation:none!important;transform:none!important}}

.hero-symbol-layer{transform-box:fill-box;transform-origin:center}
@media(hover:hover) and (pointer:fine){
 .hero-composition .hero-art-caption{opacity:0;transform:translateY(12px)}
 .hero-composition:hover .hero-art-caption,.hero-composition:focus-visible .hero-art-caption{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.hero-art-caption{transition:none}}

.hero-composition[data-catalog]{cursor:pointer;text-decoration:none}.hero-composition[data-catalog]:focus-visible{outline:2px solid #ff7900;outline-offset:-6px}

/* Four-line teamwear heading and the two requested supporting lines. */
:root{--hero-heading-size:clamp(34px,4.1vw,64px)}
.hero.hero .hero-copy h1{font-size:var(--hero-heading-size)}
.hero.hero .hero-copy .hero-capabilities{margin-top:26px}
.hero.hero .hero-copy .hero-audience{margin-top:10px}
@media(min-width:701px) and (max-width:1000px){:root{--hero-heading-size:clamp(28px,3.7vw,38px)}.hero.hero .hero-copy h1{font-size:var(--hero-heading-size)}}
@media(max-width:700px){:root{--hero-heading-size:clamp(32px,8.8vw,60px)}.hero.hero .hero-copy h1{font-size:var(--hero-heading-size)}}