/* Two-watch photographic montage. Geometry remains static during each fade. */
/* Preserve the removed button’s 44px height and -18px / 14px margins. */
.hero__stage { margin-bottom: calc(clamp(20px, 5vw, 34px) + 40px); }
.hero__stage::before { content: none; }
.duo { position: relative; width: min(100%, 460px); aspect-ratio: 1857 / 2043; isolation: isolate; }
.duo__planes, .duo__shell, .duo__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.duo__planes, .duo__shell { visibility: hidden; }
.duo.is-ready .duo__planes, .duo.is-ready .duo__shell { visibility: visible; }
.duo.is-ready .duo__fallback { display: none; }
.duo__glass, .duo__screen { position: absolute; inset: 0; background: #000; }
.duo__projection { position: absolute; top: 0; left: 0; width: 394px; height: 463px; transform-origin: 0 0; }
.duo__face { position: absolute; top: 0; left: 0; width: 394px; height: 463px; max-width: none; opacity: 0; transition: opacity 220ms ease-out; }
.duo__face.is-current { opacity: 1; }
.duo__shell { z-index: 1; pointer-events: none; -webkit-mask-image: url('hero-shell-mask.v1.svg'); mask-image: url('hero-shell-mask.v1.svg'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@media (prefers-reduced-motion: reduce) { .duo__face { transition: none; } }