/* Mobile cover composition follows Figma 19:722: full bleed, 390 × 240,
   with a large centred interface and deliberate cropping at the bottom. */
.ecom-mobile-canvas{display:none}
@media(max-width:760px){
  #works .case{--cover-radius:0px}
  #works .case .case-media{
    width:calc(100% + 2 * var(--inset));margin-inline:calc(-1 * var(--inset));
    height:auto;min-height:0;max-height:none;aspect-ratio:390/240;padding:0;
    overflow:hidden;clip-path:inset(0 round var(--cover-radius));container-type:inline-size;
  }
  #works .case:has(.assembly-cover){margin-top:0}
  #works .assembly-cover .cover-stage{left:0;top:0;width:100%;height:100%;transform:none;container-type:inline-size}
  #works .assembly-layer{transform:translateY(calc(10px * var(--assembly-lift)))}

  /* Exact slots from the supplied Direct Pro mobile composition. */
  #works #direct-selection .case-media{aspect-ratio:390/240;background:linear-gradient(84.4934deg,#191e28 12.042%,#191e2800 86.786%),#325aeb}
  #direct-selection .direct-logo{left:5.641026%;top:7.179167%;width:29.789487%}
  #direct-selection .direct-before{display:none}
  #direct-selection .direct-selector{
    left:5.641026%;top:33.75%;width:88.717949%;height:56.294872cqw;
    transform:translateY(calc(10px * var(--direct-lift)));border-radius:1.888cqw;overflow:hidden;
    background:#eff2f8;box-shadow:1.3cqw 2.34cqw 5.66cqw #1a1f2e4f;
  }
  #direct-selection .direct-selector-zoom{transform:none;transition:none}
  #direct-selection .direct-selector-content{width:112.7566%;left:-4.912%;top:-3.318cqw}
  #direct-selection .direct-card-viewport{height:59%}
  #direct-selection .direct-campaign-card{min-height:16.033cqw;padding:1.425cqw 1.782cqw;gap:.356cqw;border-radius:1.247cqw;font-size:1.069cqw;line-height:1.334}
  #direct-selection .direct-campaign-card strong{font-size:1.425cqw;line-height:1.25}
  #direct-selection .direct-card-grid{gap:.713cqw}
  #direct-selection .direct-campaign-card small{font-size:1.069cqw}
  #direct-selection .direct-modes{font-size:1.425cqw;border-radius:1.247cqw}
  #direct-selection .direct-kv{left:26%;top:-33%;width:94%;height:100%;opacity:1;overflow:visible;transform:rotate(13.75deg);transform-origin:50% 50%}
  #direct-selection .direct-kv img{width:100%}
  #direct-selection .direct-cta{display:flex;left:5.641026%;top:22.083333%;width:16.99718%;height:4.103cqw;font-size:1.71cqw;border-radius:1.283cqw}
  #direct-selection .direct-arrow{display:none}
  #direct-selection .direct-shade{top:auto;bottom:0;height:15.416667%;opacity:.1}

  /* Retain the colourful cover art around one large, centred UI window. */
  .space-motion canvas,.retail-motion canvas{object-fit:fill}
  #yango-space .space-motion::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;z-index:1;pointer-events:none;background:linear-gradient(to bottom,#25303d00,rgba(37,48,61,.3))}
  .space-motion .space-poster,.retail-motion .retail-poster{object-fit:contain}
  #works #direct-ecommerce .case-media{aspect-ratio:390/240;background:linear-gradient(125deg,#adc1ef,#e4e8f2 60%,#ffe555)}
  #direct-ecommerce .ecom-cover-video{object-fit:contain;object-position:center}
  .ecom-mobile-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
  .mobile-ecom-ready .ecom-cover-video{opacity:0}
  #works .ecom-motion-toggle{right:8px;bottom:8px;background:transparent}
  #works .ecom-motion-toggle img{filter:drop-shadow(0 1px 3px #0006)}

  #app-boost .boost-interface{left:5.641026%;top:50%;width:88.717949%;border-radius:1.888cqw;transform:translateY(-50%)}
  #app-boost .boost-background{left:0;top:0;width:100%;height:100%;object-fit:cover}
  #app-boost .boost-fade{left:0;right:0;top:auto;bottom:0;width:100%;height:22%;object-fit:fill;opacity:.3;z-index:1}

  #ai-agents .ai-device{left:10%;top:5%;height:90%}
  #ai-agents .ai-illustration{left:52%;width:38%;font-size:3cqw}
  #ai-agents .ai-pace{top:50%;transform:translateY(-50%)}
  #ai-agents .ai-juggle{display:none}
  #ai-agents .ai-illustration span{height:auto}

  #works #admind .admind-landscape img{left:0!important;top:0!important;width:100%!important;height:100%!important;object-fit:cover}
  #works #admind .admind-logo{left:auto!important;right:5.641026%!important;top:8%!important;width:28%!important;height:12%!important}
  #kontur .assembly-layer:first-child{left:-44%!important;top:0!important;width:144%!important;height:100%!important;transform:none}
  #kontur .assembly-layer:first-child img{object-fit:cover}
  #kontur .assembly-layer:nth-child(2){left:5.641026%!important;top:4%!important;width:26%!important;height:10%!important}
  #book .assembly-layer:nth-child(1){left:37%!important;top:5%!important;width:65%!important;height:66%!important;z-index:1}
  #book .assembly-layer:nth-child(2){left:12%!important;top:27%!important;width:76%!important;height:100%!important;z-index:3}
  #book .assembly-layer:nth-child(3){left:-4%!important;top:2.5%!important;width:52.5%!important;height:69.4%!important;z-index:1}
  #book .assembly-layer img{object-fit:contain}
  #works #miro .cover-stage{top:0;height:100%}
  #works #miro .assembly-layer img{object-fit:contain;opacity:1}
  #miro .cover-stage::before,#miro .cover-stage::after{content:none}
  /* Keep the desktop panorama's proportions, anchored to its left edge. */
  #works #office .cover-stage{display:block;left:0;top:0;width:199.2674%;height:100%;transform:none}
  #office .assembly-layer{display:block}
  #office .assembly-layer img{object-fit:cover}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  #works .assembly-layer,#miro .cover-stage::before,#miro .cover-stage::after,#direct-selection .direct-selector{transform:none}
}