/* Real product captures, preserving the full image inside each case. */
.case-dialog .case-sheet-art.case-media {
  --media-inset: 32px; --media-height: 320px;
  display: block; height: auto; min-height: 0; max-height: none; aspect-ratio: auto;
  margin: 0 0 20px; padding: 0; border-radius: 0;
  background: transparent; color: var(--text); font: inherit; text-align: left; place-items: normal;
  overflow: visible;
}
.case-media-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-inline: var(--media-inset); }
.case-media-header > span { color: var(--muted); font-size: 12px; line-height: 1.4; text-wrap: pretty; }
.case-media-controls { display: flex; flex: none; gap: 4px; }
.case-media-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--card2); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.case-media-controls button:hover { background: var(--accent-soft); }
.case-media-controls button:disabled { opacity: .35; cursor: default; background: var(--card2); }
.case-media-rail { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 0 var(--media-inset) 12px; scroll-padding-inline: 0; }
.case-media-item { flex: 0 0 auto; width: min(100%, calc(var(--media-height) * var(--media-aspect))); min-width: 0; margin: 0; scroll-snap-align: start; }
/* Only the first snap includes the leading space; later slides meet the viewport edge. */
.case-media-item:first-child { scroll-margin-inline-start: var(--media-inset); }
.case-media-item > a { display: block; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.case-media-item img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.case-dialog .case-sheet-art.case-media-portrait,
.case-dialog .case-sheet-art.case-media-campaign { --media-height: 340px; }
.case-media-item figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 9px 2px 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
.case-media-item a { color: inherit; text-underline-offset: 3px; }
.case-media-socials { margin-top: 4px; }
.case-media :is(button,a,.case-media-rail):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.case-media-rail:focus-visible { outline-offset: -2px; }
.reference-projects .discover-preview .win.discover-mobile { height: 244px; aspect-ratio: auto; overflow: visible; border: 0; background: transparent; box-shadow: none; transform: none; }
.discover-mobile .discover-phone { position: absolute; width: clamp(170px,73%,220px); aspect-ratio: .64; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .15),0 14px 30px rgb(0 0 0 / .16); transform-origin: 50% 80%; transition: transform 180ms cubic-bezier(.2,.7,.2,1); }
.discover-mobile .discover-phone-results { left: 0; top: 0; z-index: 1; transform: rotate(-5deg); }
.discover-mobile .discover-phone-details { left: 48%; top: 34px; z-index: 0; transform: rotate(6deg); }
/* Bring the second screen forward while the results screen makes room. */
@media (hover: hover) and (pointer: fine) {
  .discover-preview:hover .discover-phone-results { transform: translate(-6px, 8px) rotate(-8deg) scale(.97); }
  .discover-preview:hover .discover-phone-details { z-index: 2; transform: translate(-28px, -24px) rotate(0deg); }
}
.discover-preview:has(:focus-visible) .discover-phone { transition: none; }
.discover-preview:has(:focus-visible) .discover-phone-details { z-index: 2; transform: translate(-28px, -24px); }
.reference-projects .discover-mobile .discover-phone img { position: absolute; display: block; max-width: none; height: auto; object-fit: contain; }
.reference-projects .discover-mobile .discover-phone-results img { width: 160%; left: -30%; top: 0; transform: translateY(-41.5%); }
.reference-projects .discover-mobile .discover-phone-details img { width: 129%; left: -14.5%; top: 0; transform: translateY(-29.5%); }
/* Two full 24QW screens sit as small, untrimmed cards at the lower-right edge. */
.reference-projects .capka .qw-promo-scene { position: relative; top: 12px; width: min(100%,260px); height: 210px; margin: 0 -8px -18px 0; justify-self: end; overflow: visible; border: 0; background: transparent; box-shadow: none; transform: none; }
.qw-promo-scene .qw-phone { position: absolute; background: #fff; box-shadow: 0 10px 24px rgb(0 0 0 / .14); transform-origin: 50% 80%; transition: transform 180ms cubic-bezier(.2,.7,.2,1); }
.qw-promo-scene .qw-phone-home { left: 14px; top: 28px; z-index: 2; width: 162px; aspect-ratio: .6; overflow: hidden; border-radius: 28px; transform: rotate(-4deg); }
.qw-promo-scene .qw-phone-city { right: 0; top: 60px; z-index: 1; width: 140px; overflow: hidden; border-radius: 22px; transform: rotate(4deg); }
.reference-projects .capka .qw-promo-scene .qw-phone img { position: static; display: block; width: 100%; max-width: 100%; height: auto; transform: none; }
.reference-projects .capka .qw-promo-scene .qw-phone-home img { position: absolute; width: 175%; max-width: none; left: -38%; top: -28px; }
@media (hover: hover) and (pointer: fine) {
  .product-qw:hover .qw-phone-home { transform: translate(-12px, 12px) rotate(-8deg) scale(.96); }
  .product-qw:hover .qw-phone-city { z-index: 3; transform: translate(-18px, -8px) rotate(0deg) scale(1.18); }
}
.product-qw:has(:focus-visible) .qw-phone { transition: none; }
.product-qw:has(:focus-visible) .qw-phone-city { z-index: 3; transform: translate(-18px, -8px) rotate(0deg) scale(1.18); }
.reference-projects .science-preview .win,
.reference-projects .capka .selfmd-site-preview { border: 0; background: transparent; }
/* Keep a small inset before the Science wordmark within the content crop. */
.reference-projects .science-preview .win img { transform: translateX(calc(-10% + 12px)); }
.reference-projects .capka .selfmd-site-preview img { transform: translateX(-3px); }
/* Learna keeps its original artwork inside the shared preview frame. */
.reference-projects .capka .learna-preview { background: var(--card2); }
.reference-projects .learna-preview .learna-scene { width: 100%; height: 100%; }
.reference-projects .capka .learna-preview .learna-path {
  position: absolute; width: 95%; height: auto; right: -5%; top: -8%; transform: none;
}
.reference-projects .learna-preview .learna-topic {
  top: 46%; left: 7%; max-width: 75%; padding: 10px 12px; transform: none;
}
@media (max-width:640px) {
  .case-dialog .case-sheet-art.case-media { --media-inset: 22px; --media-height: 230px; }
  .case-dialog .case-sheet-art.case-media-portrait { --media-height: 340px; }
  .case-dialog .case-sheet-art.case-media-campaign { --media-height: 260px; }
  .reference-projects .discover-preview .win.discover-mobile { height: 254px; }
  .reference-projects .discover-mobile .discover-phone { width: 64%; }
  .reference-projects .capka .qw-promo-scene { width: min(100%,236px); height: 198px; margin-right: 0; }
  .qw-promo-scene .qw-phone-home { left: 10px; top: 34px; width: 161px; }
  .qw-promo-scene .qw-phone-city { top: 54px; width: 132px; }
}
html[data-motion="off"] :is(.discover-mobile .discover-phone,.qw-promo-scene .qw-phone) { transition: none; transform: none; }
@media (prefers-reduced-motion:reduce) {
  html:not([data-motion="full"]) :is(.discover-mobile .discover-phone,.qw-promo-scene .qw-phone) { transition: none !important; transform: none !important; }
}