/* Screens keep their source ratio. Only the decorative backdrops may crop. */
.preview-screen[hidden],.case-preview-views{display:none!important}
.preview-screen{position:absolute;overflow:hidden;isolation:isolate;background:#101113;aspect-ratio:var(--screen-ratio,16/9)}
.preview-screen>img,.preview-screen>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.preview-screen>.preview-video{opacity:0;transition:opacity .2s linear;z-index:1}
.preview-screen.is-ready>.preview-video{opacity:1}
.work-art .preview-screen.art-window,.work-art .preview-screen.art-phone,.work-art .preview-screen.art-object{height:auto;bottom:auto;box-sizing:border-box}
.work-art .preview-screen.art-window,.work-art .preview-screen.art-phone{border:1px solid #ffffff26;border-radius:3px}
.work-art .preview-screen.art-phone{width:26%;top:6%;border-radius:5px;background:#eee}
.work-art .preview-screen.art-full{inset:0;width:100%;height:100%;aspect-ratio:auto}
.art-galaxy .art-backdrop{filter:brightness(.28) saturate(.7);object-position:center}
.work-art.art-galaxy .preview-screen.art-window{width:80%;left:10%;right:auto;top:25%}
.art-galaxy .art-name{font-size:10cqw;top:6%;left:6%}
.work-art.art-maison-m .phone-one{left:34%}
.work-art.art-maison-m .phone-two{left:65%;top:6%}
.art-maison-m .art-name{left:5%;top:9%;font-size:9cqw;max-width:24%}
.work-art.art-swisstapgo .preview-screen.art-object{width:33%;right:7%;top:4%;background:#dce4e9}
.art-swisstapgo .art-name{left:6%;top:12%;font-size:12cqw}
.art-swisstapgo .art-note{bottom:10%}
.art-loredana .art-backdrop{filter:brightness(.32) saturate(.7);object-position:center}
.art-loredana .art-name{top:12%;left:6%;font-size:9cqw;color:#f7d5ca}
.work-art.art-loredana .art-phone{right:7%;top:6%;width:26%;background:#23111d}
.art-xela .art-macro{inset:0 43% 0 0}
.art-xela .art-macro img{width:100%;height:100%;object-fit:cover;object-position:center;transform:none}
.work-art.art-xela .art-phone{width:26%;right:7%;top:6%}
.art-xela .art-name{left:6%;top:10%;font-size:9cqw;width:42%}
.work-art.art-brodard .art-window{width:90%;left:5%;top:5%}
.art-brodard .art-name{left:6%;top:auto;bottom:4%;font-size:5cqw;color:#273c35;line-height:1}
.art-santeria .preview-screen{background:#18070d}
.art-bds .preview-screen{background:#001e24}
.art-murano .preview-screen{background:#faf9f5}
.work-heading .work-heading-end{display:flex;align-items:center;gap:22px}
.preview-motion-toggle{font:inherit;font-size:11px;color:var(--text-muted);padding:10px 0;background:none;border:0;border-bottom:1px solid var(--rule);white-space:nowrap;cursor:pointer}
.preview-motion-toggle:hover{color:white}
.case-preview-control{display:flex;justify-content:flex-end;margin-top:13px}
/* The case studies have room to show a complete, larger mobile screen. */
.opening-galaxy .case-art{aspect-ratio:1.6}
.case-art .art-galaxy .art-name{font-size:9cqw}
.case-art .work-art.art-galaxy .art-window{width:80%;left:10%;top:23%}
.opening-maison-m .case-art{aspect-ratio:1.05}
.case-art .work-art.art-maison-m .art-phone{width:36%;top:14%}
.case-art .work-art.art-maison-m .phone-one{left:8%}
.case-art .work-art.art-maison-m .phone-two{left:56%}
.case-art .art-maison-m .art-name{font-size:6cqw;top:4%;left:8%;max-width:none}
.opening-loredana .case-art,.opening-xela .case-art{aspect-ratio:.9}
.case-art .work-art.art-loredana .art-phone,.case-art .work-art.art-xela .art-phone{width:44%;top:7%;right:6%}
.case-art .art-xela .art-macro{right:43%}
.case-art .art-xela .art-name{font-size:9cqw;width:39%}
.opening-swisstapgo .case-art{aspect-ratio:1}
.case-art .work-art.art-swisstapgo .art-object{width:48%;top:7%;right:6%}
.case-art .art-swisstapgo .art-name{font-size:11cqw;left:6%;top:12%}
.opening-santeria .case-art,.opening-bds .case-art{aspect-ratio:16/9}
.opening-brodard .case-art{aspect-ratio:1.5}
.opening-murano .case-art{aspect-ratio:1.44}
.opening-bds .case-lead{grid-template-columns:.8fr 1.4fr}
.case-proof{padding-top:65px;padding-bottom:65px}
/* The studio pairs two complete screens, without hiding one behind another. */
.studio-web-composition{aspect-ratio:1.63;background:#1e0d13;overflow:hidden}
.studio-book{left:3%;top:16%;width:69%;height:auto;aspect-ratio:16/9}
.studio-phone{width:22%;right:3%;height:auto;top:5%;aspect-ratio:416/900;border-radius:4px;overflow:hidden;box-shadow:0 8px 24px #0005}
.studio-book>.preview-screen,.studio-phone>.preview-screen{inset:0;width:100%;height:100%}
@media(max-width:760px){.opening-bds .case-lead{display:flex}.opening-galaxy .case-art{aspect-ratio:1.6}.opening-maison-m .case-art{aspect-ratio:1.05}.opening-xela .case-art,.opening-loredana .case-art{aspect-ratio:.9}.opening-santeria .case-art,.opening-bds .case-art{aspect-ratio:16/9}.studio-web-composition{aspect-ratio:1.63}}
@media(max-width:600px){.work-heading .work-heading-end{display:block;align-self:flex-end}.work-heading-end>span{display:none}.work-heading .preview-motion-toggle{max-width:85px;white-space:normal;text-align:right;line-height:1.5;font-size:10px}}
@media(prefers-reduced-motion:reduce){.preview-screen>.preview-video{display:none}.preview-motion-toggle{display:none}}
/* A complete portrait still fits the desktop opening at laptop height. */
@media(min-width:761px){.opening-loredana .case-art,.opening-xela .case-art{aspect-ratio:1.12}.case-art .work-art.art-loredana .art-phone,.case-art .work-art.art-xela .art-phone{width:36%;top:6%;right:6%}}
.art-xela .art-name{color:#fff;text-shadow:0 2px 14px #0008}
/* Two native viewports, composed side by side. Brand names live in the caption. */
.work-art:is(.art-galaxy,.art-brodard,.art-santeria,.art-murano,.art-bds) .preview-screen.art-window{left:4%;right:auto;top:20%;width:66%;height:auto;aspect-ratio:16/9;box-shadow:0 10px 35px #0002}
.work-art:is(.art-galaxy,.art-brodard,.art-santeria,.art-murano,.art-bds) .preview-screen.companion-phone{left:auto;right:3.5%;top:6%;width:25%;height:auto;aspect-ratio:416/900;box-shadow:0 9px 28px #0003}
.work-art.art-maison-m .phone-one{left:17%}.work-art.art-maison-m .phone-two{left:57%}
.work-art.art-swisstapgo .preview-screen.art-object{right:34%;width:32%;top:5%}
.art-santeria{background:#b3a48f}.art-murano{background:#e5ded3}.art-bds{background:#07151b}
.case-art .work-art:is(.art-galaxy,.art-brodard,.art-santeria,.art-murano,.art-bds) .preview-screen.art-window{top:26%;width:66%;left:4%}
.case-art .work-art:is(.art-galaxy,.art-brodard,.art-santeria,.art-murano,.art-bds) .preview-screen.companion-phone{top:11%;right:3.5%;width:25%}
.case-art .work-art.art-swisstapgo .preview-screen.art-object{right:26%;width:48%;top:7%}
:is(.opening-galaxy,.opening-brodard,.opening-santeria,.opening-murano,.opening-bds) .case-art{aspect-ratio:1.3}
@media(max-width:760px){:is(.opening-galaxy,.opening-brodard,.opening-santeria,.opening-murano,.opening-bds) .case-art{aspect-ratio:1.3}}
@media(max-width:600px){.work-grid .work-card:last-child .art-bds .preview-screen.companion-phone{width:20.5%;right:5%;top:5%}}
/* Both viewports are recordings of the actual website; no static desktop stand-ins. */
.art-swisstapgo{background:#232428}.art-maison-m{background:#c9c1af}
.work-art:is(.art-maison-m,.art-swisstapgo,.art-loredana,.art-xela) .preview-screen.art-window{left:4%;right:auto;top:20%;width:66%;height:auto;aspect-ratio:16/9;box-shadow:0 10px 35px #0002}
.work-art:is(.art-maison-m,.art-swisstapgo,.art-loredana,.art-xela) .preview-screen.companion-phone{left:auto;right:3.5%;top:6%;width:25%;height:auto;aspect-ratio:416/900;box-shadow:0 9px 28px #0003}
.case-art .work-art:is(.art-maison-m,.art-swisstapgo,.art-loredana,.art-xela) .preview-screen.art-window{left:4%;top:26%;width:66%}
.case-art .work-art:is(.art-maison-m,.art-swisstapgo,.art-loredana,.art-xela) .preview-screen.companion-phone{left:auto;right:3.5%;top:11%;width:25%}
:is(.opening-maison-m,.opening-swisstapgo,.opening-loredana,.opening-xela) .case-art{aspect-ratio:1.3}
/* Full-size, selectable case previews on phones. */
@media(max-width:600px){
 .case-preview-views{display:flex!important;justify-content:flex-end;gap:24px;margin-bottom:16px}
 .case-preview-views button{font:inherit;font-size:12px;min-height:44px;color:#8e97a3;background:none;border:0;border-bottom:1px solid transparent;padding:10px 0;cursor:pointer}
 .case-preview-views button[aria-pressed=true]{color:#fff;border-bottom-color:#ccd9ec}
 .case-stage[data-case-view=mobile] .case-art{aspect-ratio:auto;height:min(560px,66svh);min-height:360px}
 .case-stage[data-case-view=mobile] .case-art .work-art .preview-screen.companion-phone{top:24px;left:50%;right:auto;width:auto;height:calc(100% - 48px);max-width:calc(100% - 48px);aspect-ratio:416/900;transform:translateX(-50%)}
 .case-stage[data-case-view=desktop] .case-art{aspect-ratio:1.5;height:auto}
 .case-stage[data-case-view=desktop] .case-art .work-art .preview-screen.art-window{left:5%;right:auto;top:50%;width:90%;height:auto;aspect-ratio:16/9;transform:translateY(-50%)}
}