/* Media additions only: existing page styles and layout remain unchanged. */
.work-card.has-image { background-position:center; }
.case-cinema-loop { position:relative; overflow:hidden; padding:0; background:#111a24; }
.case-loop-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .65s ease; }
.case-loop-stage .case-loop-frame { width:100%; height:100%; object-fit:cover; }
.case-loop-frame.is-current { opacity:1; }
.case-loop-stage { position:relative; aspect-ratio:16/9; overflow:hidden; background:transparent; }
.case-walkthrough figure:has(.case-loop-stage--phone) { max-width:360px; margin:0 auto; }
.case-loop-controls { min-height:44px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px; border-top:1px solid var(--hard-line); background:var(--paper-hard); }
.case-loop-steps { display:flex; flex:1; gap:6px; min-width:80px; }
.case-loop-steps button { position:relative; flex:1; min-width:20px; height:24px; padding:0; border:0; background:transparent; cursor:pointer; }
.case-loop-steps button:before { content:''; position:absolute; left:0; right:0; top:10px; height:3px; background:var(--hard-line); }
.case-loop-progress { position:absolute; left:0; top:10px; height:3px; width:0; background:var(--accent); transition:width .1s linear; }
.case-loop-steps button.is-complete .case-loop-progress { width:100%; }
.case-loop-steps button[aria-current="step"] .case-loop-progress { width:var(--loop-progress,0%); }
.case-loop-label { font-size:12px; min-width:110px; text-align:left; }
.case-walkthrough { margin:24px 0 40px; }
@media(max-width:768px) { .case-loop-controls { min-height:44px; gap:8px; padding:10px; } .case-loop-label { font-size:12px; min-width:110px; text-align:left; } }
@media(prefers-reduced-motion:reduce) { .case-loop-frame,.case-loop-progress { transition:none; } }
.case-loop-steps button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }