/* Wristband strips cover the image before revealing the next campaign. */
.banner-stage{position:relative;isolation:isolate;overflow:hidden;background:var(--navy)}
.banner-title-line{display:block}
.banner-copy .button svg,.banner-secondary svg{transition:transform .2s ease}
.banner-copy .button:hover svg,.banner-secondary:hover svg{transform:translateX(4px)}
.banner-ribbon-transition{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.banner-ribbon{position:absolute;left:-12.5%;top:calc(var(--ribbon-index)*20% - 1%);width:125%;height:22%;background:var(--ribbon-color);border-radius:3px;box-shadow:0 3px 8px #00002d33;transform:translate3d(-115%,0,0);animation:band-sweep 1.05s cubic-bezier(.65,0,.3,1) calc(var(--ribbon-index)*35ms) both;will-change:transform;overflow:hidden}
.ribbon-seal{position:absolute;inset:0 auto 0 5%;width:10%;background:#fff;display:flex;align-items:center;justify-content:center}
.ribbon-seal svg{width:65%;height:100%;fill:none;stroke:#d0d2db;stroke-width:.7}
.ribbon-seal small{font-size:clamp(9px,1.1vw,18px);font-weight:800;color:var(--navy);writing-mode:vertical-rl;transform:rotate(180deg)}
.ribbon-gold{position:absolute;inset:0 auto 0 15%;width:1.5%;background:repeating-linear-gradient(135deg,#c8a54d 0 5px,#ead38f 5px 9px)}
.ribbon-logo{position:absolute;left:24%;top:30%;width:17%;height:40%;object-fit:contain}
.ribbon-print{position:absolute;left:51%;top:50%;transform:translateY(-50%);font-size:clamp(11px,1.7vw,26px);font-weight:800;letter-spacing:.035em;color:var(--navy);white-space:nowrap}
.ribbon-end{position:absolute;inset:12% 9% 12% auto;border-left:1px dashed #00006655}
.banner-ribbon-transition[data-direction=back] .banner-ribbon{animation-name:band-sweep-back}
.banner-controls>div:first-child button,.banner-arrows button{transition:background .2s ease,box-shadow .2s ease}
.banner-arrows button:hover{background:#fff0e6}
.banner-arrows .banner-playback{width:auto;display:flex;gap:9px;padding:0 13px;font-size:12px;font-weight:600;white-space:nowrap}
.playback-icon{width:12px;height:13px;border-left:4px solid currentColor;border-right:4px solid currentColor}
[data-paused=true] .playback-icon{width:0;height:0;border:7px solid transparent;border-right:0;border-left:10px solid currentColor}
.banner-playback:disabled{opacity:1;cursor:default;background:#f3f5fa}
.banner-timing{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:8px;padding-bottom:10px}
.banner-playback-status{font-size:11px;color:var(--muted)}
.banner-progress{width:140px;height:3px;border-radius:2px;background:#e0e4ed;overflow:hidden;flex-shrink:0}
.banner-progress>span{display:block;width:100%;height:100%;background:var(--navy);transform-origin:left;animation:banner-countdown 10s linear both}
@keyframes band-sweep{0%{transform:translate3d(-115%,0,0)}38%,57%{transform:translate3d(0,0,0)}100%{transform:translate3d(115%,0,0)}}
@keyframes band-sweep-back{0%{transform:translate3d(115%,0,0)}38%,57%{transform:translate3d(0,0,0)}100%{transform:translate3d(-115%,0,0)}}
@keyframes banner-countdown{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){.banner-arrows{justify-content:space-between}.banner-arrows .banner-playback{margin-right:auto}.ribbon-seal{width:15%}.ribbon-gold{left:20%;width:2%}.ribbon-logo{left:28%;width:28%}.ribbon-print{left:62%;font-size:10px}.ribbon-end{right:5%}.banner-playback-status{font-size:10px}.banner-progress{width:90px}}
@media(prefers-reduced-motion:reduce){.hero-headers *{animation:none!important;transition:none!important}.banner-ribbon-transition{display:none}.banner-progress{display:none}}