/* Absolute layers preserve the approved hero photograph and phone geometry. */
.hero-backdrop,.backdrop-images{position:absolute;inset:0}
.hero-backdrop{overflow:hidden;background:#d9d3c7}
.backdrop-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms ease;pointer-events:none}
.backdrop-image.is-active{opacity:1}
.backdrop-controls{position:absolute;top:18px;right:18px;display:flex;align-items:center;background:#171d19d9;color:#fffdf7;border:1px solid #ffffff40;border-radius:3px;padding:0 4px 0 12px;gap:2px;max-width:calc(100% - 24px)}
.backdrop-label{font:11px/1.2 var(--sans);min-width:76px;margin-right:7px}
.backdrop-controls button{background:transparent;color:inherit;min-width:44px;min-height:44px;font:20px/1 var(--sans);padding:8px}
.backdrop-controls [data-backdrop=pause]{font-size:11px;min-width:49px}
.backdrop-controls button:hover{background:#ffffff17}
.backdrop-controls button:focus-visible{outline-offset:-3px;outline-color:#f0cb8d}
@media(max-width:760px){.backdrop-controls{top:12px;right:12px}.backdrop-label{min-width:65px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.backdrop-image{transition:none}}