.stepup-element-hero{--stepup-elements-paper:#eeede6;display:grid;grid-template-columns:46% 54%;align-items:center;position:relative;isolation:isolate;overflow:hidden;min-height:540px;background:var(--stepup-elements-paper);padding:40px 4.4%}
.stepup-element-hero-copy{min-width:0;position:relative;z-index:2;padding:30px 0;max-width:650px}.stepup-element-hero .stepup-element-title{font-size:clamp(40px,5.6vw,84px);margin-bottom:25px;letter-spacing:-.06em}.stepup-element-hero .stepup-element-accent{display:block}.stepup-element-hero .stepup-element-description{margin-bottom:24px}
.stepup-element-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}.stepup-element-hero-copy[style*="center"] .stepup-element-hero-actions{justify-content:center}
.stepup-element-hero-media{--stepup-focal-x:50%;--stepup-focal-y:50%;position:relative;min-width:0;min-height:450px;align-self:stretch;isolation:isolate}.stepup-element-hero-media>picture{position:absolute;inset:0;display:block}.stepup-element-hero-media .stepup-element-image{position:absolute;inset:0;object-position:var(--stepup-focal-x) var(--stepup-focal-y);mix-blend-mode:multiply;z-index:1;translate:var(--stepup-hero-x,0px) var(--stepup-hero-y,0px);transition:translate 300ms cubic-bezier(.2,.7,.2,1)}.stepup-element-hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.stepup-element-hero-word{position:absolute;top:0;inset-inline-start:4%;font-weight:700;font-size:clamp(70px,12vw,180px);letter-spacing:-.06em;line-height:1.1;color:#dcdad1;max-width:94%;overflow-wrap:anywhere}
.stepup-element-hero-caption{position:absolute;inset-inline:7%;bottom:15px;z-index:2;font-size:11px}.stepup-element-hero-edge{position:absolute;bottom:12px;inset-inline-start:4.4%;font-size:8px;letter-spacing:.14em}.stepup-element-hero-side{position:absolute;inset-inline-end:12px;top:45%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.16em}
.stepup-element-hero[data-image-side=left] .stepup-element-hero-media{grid-column:1;grid-row:1}.stepup-element-hero[data-image-side=left] .stepup-element-hero-copy{grid-column:2;grid-row:1;padding-inline-start:40px}
.stepup-element-hero-overlay{display:flex}.stepup-element-hero-overlay .stepup-element-hero-media{position:absolute;inset:0;z-index:0}.stepup-element-hero-overlay .stepup-element-hero-copy{z-index:2}.stepup-element-hero-overlay .stepup-element-image{mix-blend-mode:normal}
.stepup-element-hero-text{--stepup-elements-paper:#faf9f6;display:block;min-height:0;background:var(--stepup-elements-paper);padding:60px 20px;text-align:center}.stepup-element-hero-text .stepup-element-hero-copy{margin:auto;max-width:900px}.stepup-element-hero-text .stepup-element-title{font-size:clamp(38px,5vw,72px)}.stepup-element-hero-text .stepup-element-eyebrow,.stepup-element-hero-text .stepup-element-hero-actions{justify-content:center}
@media(max-width:767px){.stepup-element-hero{grid-template-columns:minmax(0,1fr);padding:24px;min-height:0}.stepup-element-hero-copy{padding:16px 0}.stepup-element-hero .stepup-element-title{font-size:clamp(36px,11vw,54px)}.stepup-element-hero-media{min-height:310px}.stepup-element-hero-word{font-size:90px}.stepup-element-hero[data-image-side=left] .stepup-element-hero-copy,.stepup-element-hero[data-image-side=left] .stepup-element-hero-media{grid-column:auto;grid-row:auto;padding-inline-start:0}.stepup-element-hero[data-mobile-first=image] .stepup-element-hero-media{grid-row:1}.stepup-element-hero-edge{display:none}.stepup-element-hero-side{inset-inline-end:5px}.stepup-element-hero-caption{bottom:0}.stepup-element-hero-overlay{min-height:500px}}

.stepup-hero-slider{display:grid;position:relative;isolation:isolate;overflow:hidden;touch-action:pan-y pinch-zoom}.stepup-hero-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--stepup-hero-fade,850ms) ease,visibility 0s var(--stepup-hero-fade,850ms)}.stepup-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--stepup-hero-fade,850ms) ease}.stepup-hero-slide>.stepup-element-hero{height:100%}.stepup-hero-slide[data-align=center] .stepup-element-hero-copy{text-align:center}.stepup-hero-slide[data-align=end] .stepup-element-hero-copy{text-align:end}.stepup-hero-slide[data-align=center] .stepup-element-hero-actions{justify-content:center}.stepup-hero-slide[data-align=end] .stepup-element-hero-actions{justify-content:flex-end}.stepup-hero-slide[data-position=start] .stepup-element-hero-copy{align-self:start}.stepup-hero-slide[data-position=end] .stepup-element-hero-copy{align-self:end}.stepup-hero-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;z-index:5}.stepup-hero-dots button{border:0;background:none;min-width:44px;min-height:44px;display:grid;place-items:center;cursor:pointer}.stepup-hero-dots button span{width:6px;height:6px;border-radius:50%;background:#191919;opacity:.3;transition:opacity 180ms cubic-bezier(.2,.7,.2,1),transform 180ms cubic-bezier(.2,.7,.2,1)}.stepup-hero-dots button[aria-pressed=true] span{opacity:1;transform:scale(1.35)}.stepup-hero-dots button:focus-visible{outline:2px solid #dc1a2e;outline-offset:-4px}
.stepup-hero-dots{max-width:60%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}.stepup-hero-dots::-webkit-scrollbar{display:none}
@keyframes stepup-hero-visual-in{from{opacity:0;scale:.985}to{opacity:1;scale:1}}
@keyframes stepup-hero-copy-in{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.stepup-hero-slide.is-active.is-entering .stepup-element-hero-media{animation:stepup-hero-visual-in 700ms cubic-bezier(.2,.7,.2,1) both}
.stepup-hero-slide.is-active.is-entering :is(.stepup-element-eyebrow,.stepup-element-title,.stepup-element-description,.stepup-element-hero-actions,.stepup-element-hero-caption,.stepup-element-hero-edge,.stepup-element-hero-side){animation:stepup-hero-copy-in 400ms cubic-bezier(.2,.7,.2,1) both}
.stepup-hero-slide.is-active.is-entering .stepup-element-title{animation-delay:60ms}.stepup-hero-slide.is-active.is-entering .stepup-element-description{animation-delay:130ms}.stepup-hero-slide.is-active.is-entering .stepup-element-hero-actions{animation-delay:200ms}.stepup-hero-slide.is-active.is-entering :is(.stepup-element-hero-caption,.stepup-element-hero-edge,.stepup-element-hero-side){animation-delay:260ms}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.stepup-hero-slider .stepup-element-button:hover{translate:0 -1px}.stepup-hero-slider .stepup-element-text-link:hover .stepup-element-arrow-icon{transform:translate(4px,0)}}
@media(prefers-reduced-motion:reduce){.stepup-hero-slide{transition:none!important}.stepup-element-hero-media .stepup-element-image{translate:none!important}.stepup-hero-slide *{animation:none!important}}

.stepup-hero-slider{padding-bottom:0;background:var(--stepup-elements-paper,#eeede6)}.stepup-hero-dots{bottom:8px}
#stepup-the-neutral-rotation{padding-bottom:0!important}

@media(min-width:768px){
#stepup-the-neutral-rotation .stepup-element-hero{grid-template-columns:48% 52%;min-height:550px;padding:0 4.4%}
#stepup-the-neutral-rotation .stepup-element-hero-copy{padding:60px 0 65px}
#stepup-the-neutral-rotation .stepup-element-title{font-family:"StepUp Coolvetica",Arial,sans-serif;font-size:80px;font-weight:400;line-height:.88;letter-spacing:-4px}
:is(#stepup-off-duty,#stepup-the-brand-perspective) .stepup-element-hero{padding:0;min-height:0;height:auto}
:is(#stepup-off-duty,#stepup-the-brand-perspective) .stepup-element-hero-media{min-height:0}
#stepup-off-duty .stepup-element-hero{grid-template-columns:.9fr 1.1fr;height:425px}
#stepup-off-duty .stepup-element-hero-copy{padding:35px}
#stepup-the-brand-perspective .stepup-element-hero{grid-template-columns:1.1fr 1fr;height:380px}
#stepup-the-brand-perspective .stepup-element-hero-copy{padding:35px 25px}
#stepup-the-stepup-mindset .stepup-element-hero-text{min-height:0;height:auto;padding:0;background:transparent;overflow:visible}
#stepup-the-stepup-mindset .stepup-element-hero-copy{max-width:650px;padding:0;margin:auto}
#stepup-the-stepup-mindset .stepup-element-eyebrow{margin-bottom:0}
#stepup-the-stepup-mindset .stepup-element-description{font-size:14px;line-height:1.8;margin-bottom:12px}
}
@media(min-width:1024px){
#stepup-the-neutral-rotation .stepup-element-hero{grid-template-columns:46% 54%;min-height:640px}
#stepup-the-neutral-rotation .stepup-element-hero-copy{padding:68px 0 60px}
#stepup-the-neutral-rotation .stepup-element-title{font-size:clamp(76px,8.15vw,122px)}
#stepup-the-neutral-rotation .stepup-element-hero-word{top:33px}
#stepup-off-duty .stepup-element-hero{height:445px}
#stepup-off-duty .stepup-element-hero-copy{padding:64px 52px}
#stepup-the-brand-perspective .stepup-element-hero{height:455px}
#stepup-the-brand-perspective .stepup-element-hero-copy{padding:54px 35px}
#stepup-the-stepup-mindset .stepup-element-hero-copy{max-width:850px}
}

@media(max-width:767px){
#stepup-the-neutral-rotation .stepup-element-hero{height:617px;min-height:617px;grid-template-rows:272px 345px;padding:0}
#stepup-the-neutral-rotation .stepup-element-hero-copy{align-self:stretch;padding:38px 24px 0;max-width:none}
#stepup-the-neutral-rotation .stepup-element-title{font-family:"StepUp Coolvetica",Arial,sans-serif;font-size:clamp(50px,14.5vw,56.55px);font-weight:400;line-height:.94;letter-spacing:-2px}
#stepup-the-neutral-rotation .stepup-element-hero-media{min-height:345px;height:345px}
#stepup-the-neutral-rotation .stepup-element-hero-media>picture{transform:translateY(-8px)}
#stepup-the-neutral-rotation .stepup-element-image{object-fit:contain}
:is(#stepup-off-duty,#stepup-the-brand-perspective) .stepup-element-hero{padding:0;min-height:0}
#stepup-off-duty .stepup-element-hero{height:634px;grid-template-rows:324px 310px}
#stepup-off-duty .stepup-element-hero-copy{padding:32px 26px 12px}
#stepup-off-duty .stepup-element-hero-media{height:310px;min-height:310px}
#stepup-the-brand-perspective .stepup-element-hero{height:663px;grid-template-rows:353px 310px}
#stepup-the-brand-perspective .stepup-element-hero-copy{padding:28px 25px 35px}
#stepup-the-brand-perspective .stepup-element-hero-media{height:310px;min-height:310px}
#stepup-the-brand-perspective .stepup-element-hero-media .stepup-element-image{scale:1.08}
#stepup-the-stepup-mindset .stepup-element-hero-text{min-height:0;height:auto;padding:0;background:transparent;overflow:visible}
#stepup-the-stepup-mindset .stepup-element-hero-copy{max-width:350px;padding:0;margin:auto}
#stepup-the-stepup-mindset .stepup-element-eyebrow{margin-bottom:0}
#stepup-the-stepup-mindset .stepup-element-description{font-size:14px;line-height:1.8;margin-bottom:4px}
}

/* Final mobile artwork composition from the approved preview. */
@media(max-width:767px){
#stepup-the-neutral-rotation .stepup-element-hero-media{isolation:isolate}
#stepup-the-neutral-rotation .stepup-element-hero-media::before{content:"";position:absolute;width:300px;aspect-ratio:1;inset-inline-start:calc(50% - 150px);top:20px;z-index:0;border-radius:50%;background:radial-gradient(circle,transparent 0 114px,#d7d5cc 114px 115px,transparent 115px 149px,#d7d5cc 149px 150px);pointer-events:none}
#stepup-the-neutral-rotation .stepup-element-hero-media>picture{z-index:auto;transform:none}
#stepup-the-neutral-rotation .stepup-element-image{transform:rotate(-18deg) translate(-5px,-17px)!important}
#stepup-the-neutral-rotation .stepup-element-hero-word{top:20px;inset-inline-start:15%;z-index:0;max-width:82%;font-size:93px;line-height:1;letter-spacing:-3px;color:#deddd5;opacity:1}

#stepup-the-brand-perspective .stepup-element-hero-media{height:353px;min-height:353px;isolation:isolate!important}
#stepup-the-brand-perspective .stepup-element-hero-media::before{content:none}
#stepup-the-brand-perspective .stepup-element-hero-word{top:20px;inset-inline-start:10%;z-index:0;max-width:none;font-size:150px;line-height:1;letter-spacing:-5px;white-space:nowrap;color:#cbd0c0;opacity:1}
#stepup-the-brand-perspective .stepup-element-hero-media .stepup-element-image{z-index:2;object-fit:contain;object-position:center 42%;scale:.88!important;transform:rotate(-15deg) translateY(-8px)!important}
#stepup-the-brand-perspective .stepup-element-hero-caption{inset-inline-start:22px;inset-inline-end:20px;bottom:15px;z-index:3;font-size:9px;line-height:1.5;font-weight:400}
#stepup-the-brand-perspective .stepup-element-hero-caption .stepup-element-text-link{gap:10px;padding:0;border-bottom:0;font-size:9px;font-weight:400}
#stepup-the-brand-perspective .stepup-element-hero-caption .stepup-element-arrow-icon{width:13px;height:13px}
#stepup-the-brand-perspective .stepup-element-eyebrow{font-size:9px;letter-spacing:.15em;margin-bottom:20px}
#stepup-the-brand-perspective .stepup-element-description{max-width:300px;font-size:12px;line-height:1.75;margin-bottom:20px}
#stepup-the-brand-perspective .stepup-element-button{min-height:44px;padding:12px 16px;gap:14px;font-size:11px}
}

/* Blend the complete animated artwork group against the editorial surface. */
#stepup-the-neutral-rotation .stepup-element-hero-media,
#stepup-off-duty .stepup-element-hero-media,
#stepup-the-brand-perspective .stepup-element-hero-media{isolation:auto!important;background:transparent!important;mix-blend-mode:multiply!important}
#stepup-the-neutral-rotation .stepup-element-hero-media>picture,
#stepup-the-neutral-rotation .stepup-element-hero-media .stepup-element-image,
#stepup-off-duty .stepup-element-hero-media>picture,
#stepup-off-duty .stepup-element-hero-media .stepup-element-image,
#stepup-the-brand-perspective .stepup-element-hero-media>picture,
#stepup-the-brand-perspective .stepup-element-hero-media .stepup-element-image{background:transparent!important}
#stepup-the-neutral-rotation .stepup-element-hero-media .stepup-element-image,
#stepup-off-duty .stepup-element-hero-media .stepup-element-image,
#stepup-the-brand-perspective .stepup-element-hero-media .stepup-element-image{mix-blend-mode:multiply!important}
@media(min-width:370px) and (max-width:767px){
#stepup-the-brand-perspective .stepup-element-title{width:calc(100% + 25px);font-size:43px;white-space:nowrap}
}
