/* Shared banner dimensions and buttons, including compact spacing below. */
.hero-carousel{--campaign-height:clamp(350px,calc(13.5vw + 232px),470px)}
.hero-carousel .hero-track,
.hero-carousel .hero-track:has(>.bn-hero:not([inert])){height:var(--campaign-height)}
.hero-carousel .hero-track>.tom-hero{box-sizing:border-box;height:var(--campaign-height);min-height:0;max-height:none;aspect-ratio:auto;overflow:hidden}
.hero-carousel .hero-track>.bn-hero{padding:24px 6% 56px}
.hero-carousel .hero-track>.tom-hero:not(.bn-hero)>picture{position:absolute;inset:0;width:100%;height:100%;padding:0}
.hero-carousel .hero-track>.tom-hero:not(.bn-hero)>picture img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-carousel .hero-track>.tom-hero:not(.bn-hero)>:is(.tom-copy,.styling-copy,.amir-copy){position:absolute;inset:0 auto 0 6%;width:44%;height:100%;box-sizing:border-box;padding:24px 0 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;text-align:left;background:transparent}
.hero-carousel .hero-track>.tom-hero:not(.bn-hero)>div :is(h1,h2){font-size:clamp(28px,4vw,64px);line-height:1.04;min-height:0;margin:0}
.hero-carousel .hero-track>.tom-hero:not(.bn-hero)>div p{min-height:0;margin:0}
.hero-carousel .hero-track :is(.bn-button,.button){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 28px;border:1px solid white;border-radius:999px;background:white;color:#111;font-family:inherit;font-size:14px;font-weight:400;line-height:1.25;letter-spacing:0;text-transform:none;text-decoration:none;box-shadow:none;gap:0}
.hero-carousel .hero-track :is(.bn-button,.button):hover{background:#ececec;border-color:#ececec;color:#111}
.hero-carousel .hero-track :is(.bn-button,.button):focus-visible{outline:2px solid white;outline-offset:4px}
.hero-carousel .hero-dots,.hero-carousel .hero-arrows{bottom:8px}
main>.hero-carousel+#populart{padding-top:18px}
@media(max-width:700px){
 .hero-carousel{--campaign-height:clamp(310px,calc(20.33vw + 230px),375px)}
 .hero-carousel .hero-track>.bn-hero{padding:24px 7% 42px}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>:is(.tom-copy,.styling-copy,.amir-copy){inset:0;width:100%;padding:24px 7% 48px;justify-content:flex-end;background:linear-gradient(transparent 15%,#000b 100%);color:white}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>div :is(h1,h2){font-size:clamp(28px,6vw,42px);color:white}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>div p{font-size:14px;line-height:1.4;color:white;max-width:360px}
 main>.hero-carousel+#populart{padding-top:14px}
}

/* Keep editable multi-line campaign text inside the compact banner. */
.hero-carousel .bn-emblem{top:22%;width:19%;max-height:calc(var(--campaign-height) - 100px)}
.hero-carousel .bn-emblem>span{font-size:clamp(32px,4.3vw,70px);line-height:1;letter-spacing:-.06em;text-align:center}
@media(max-width:700px){.hero-carousel .bn-emblem{top:auto;bottom:52px;width:72px;max-height:90px}.hero-carousel .bn-emblem>span{font-size:18px}.hero-carousel .bn-emblem small{margin-top:5px}}


/* Mobile: show the complete artwork beside the copy, without zoom cropping. */
@media(max-width:700px){
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero){background:#080a09}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>picture{inset:12px 3% 42px auto;width:42%;height:calc(100% - 54px)}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>picture img{object-fit:contain;object-position:center}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>:is(.tom-copy,.styling-copy,.amir-copy){inset:0 auto 0 0;width:56%;padding:20px 0 42px 6%;justify-content:center;gap:12px;background:none}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>div :is(h1,h2){font-size:clamp(22px,5.6vw,34px);overflow-wrap:normal}
 .hero-carousel .hero-track>.tom-hero:not(.bn-hero)>div p{font-size:13px;line-height:1.4}
 .hero-carousel .hero-track :is(.bn-button,.button){padding:11px 23px;min-height:44px}
 .hero-carousel .bn-emblem.has-image{box-sizing:border-box;height:72px;padding:4px}
}


/* Campaign artwork without baked-in text or controls. Reference slides unchanged. */
.hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero){padding:0;background:#101114;isolation:isolate}
.hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>picture{inset:0;width:100%;height:100%;padding:0}
.hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>picture img{position:absolute;right:0;width:min(100%,calc(var(--campaign-height) * 3));height:100%;object-fit:contain;object-position:right center;mask-image:linear-gradient(to right,transparent,#000 14%)}
.hero-carousel .campaign-hit{position:absolute;inset:0;z-index:1}
.hero-carousel .campaign-copy{position:absolute;inset:0 auto 0 6%;width:40%;padding:24px 0 48px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;z-index:2;pointer-events:none;color:#fff}
.hero-carousel .campaign-copy .button{pointer-events:auto}
.hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>.campaign-copy h2{font-size:clamp(28px,4vw,64px);font-weight:700;line-height:1.08;color:#fff}
.hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>.campaign-copy p{font-size:clamp(16px,1.8vw,26px);line-height:1.4;color:#fff;max-width:440px}
@media(max-width:700px){
 .hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>picture{inset:0;width:100%;height:100%;padding:0}
 .hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>picture img{width:100%;height:100%;object-fit:cover;object-position:right center;mask-image:none}
 .hero-carousel .campaign-copy{inset:0 auto 0 6%;width:39%;padding:20px 0 48px;gap:16px}
 .hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>.campaign-copy h2{font-size:clamp(22px,5.6vw,34px);line-height:1.08}
 .hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>.campaign-copy p{font-size:13px;line-height:1.4}
}
@media(min-width:481px) and (max-width:700px){.hero-carousel .hero-track>.campaign-art-hero:not(.bn-hero)>picture img{width:auto;min-width:75%;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 16%)}}