/* Shared screenshot composition: edge-to-edge desktop, phone at lower right.
   The stage includes the phone overhang so captions never overlap it. */
#cases .portfolio-project-group .portfolio-media--devices,
.works-index .portfolio-media--devices {
  display: block;
  padding: 0;
  aspect-ratio: auto;
  background: transparent;
}
.v34 .work-preview {
  display: block;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  aspect-ratio: 8 / 5;
  padding: 0;
  gap: 0;
  background: transparent;
}
.work-preview-desktop {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #141918;
}
.work-preview-phone {
  display: block;
  position: absolute;
  right: 5.5%;
  bottom: .5%;
  width: 20%;
  aspect-ratio: 390 / 844;
  padding: 0;
  border: 3px solid #202321;
  border-width: max(1px, .65cqw);
  border-radius: 3cqw;
  overflow: hidden;
  background: #202321;
  box-shadow: 0 0 0 1px #777b75, 0 2px 3px #1113;
}
/* Preserve screenshot proportions; crop only the captured scrollbar at right. */
:is(#cases, .v34) .work-preview img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: left top;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none !important;
}
:is(#cases, .v34) .work-preview-desktop img { width: calc(100% * 1440 / 1425); }
:is(#cases, .v34) .work-preview-phone img[src$="/clowd-general-mobile.webp"] { width: calc(100% * 390 / 374); }
.v34 .work-preview--service { margin-top: 24px; }
/* The Web Design page uses the same uncluttered presentation. */
.v34 .proof-showcase { padding: 0; background: transparent; border: 0; box-shadow: none; }
.v34 .proof-showcase-meta { margin-bottom: 20px; }
/* Product photography remains independent of website screenshots. */
:is(#cases,.works-index) .portfolio-media--product{display:grid;grid-template-columns:1.8fr 1fr;gap:5px;background:#e9ece6}
:is(#cases,.works-index) .portfolio-media--product .portfolio-product-main{height:100%;object-fit:cover;object-position:60% center}
:is(#cases,.works-index) .portfolio-product-examples{display:grid;gap:5px;min-height:0}
:is(#cases,.works-index) .portfolio-product-examples img{width:100%;height:100%;min-height:0;object-fit:cover}