/* Studio showcase: footage in each Mark card, a blueprint gallery beneath, and a full-size viewer. */
.studio-mark-image .studio-show-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #030711; }
.studio-mark-card .studio-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.studio-gallery button { display: grid; gap: 6px; padding: 0; border: 1px solid #8fd8d526; border-radius: 12px; background: #030711; overflow: hidden; cursor: pointer; color: #c1d2d5; text-align: left; font: 600 12px/1.3 'Segoe UI', Arial, sans-serif; }
.studio-gallery img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s; }
.studio-gallery span { padding: 0 10px 9px; }
.studio-gallery button:hover img { transform: scale(1.04); }
.studio-gallery button:hover, .studio-gallery button:focus-visible { border-color: var(--accent); outline: none; }
.mark-two .studio-gallery button { border-color: #b897ff33; }
.studio-lightbox { max-width: min(1400px, 94vw); width: 100%; padding: 0; border: 1px solid #8fd8d540; border-radius: 16px; background: #030711; color: #c1d2d5; }
.studio-lightbox::backdrop { background: #000c; }
.studio-lightbox img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #030711; }
.studio-lightbox p { margin: 0; padding: 12px 16px; font-size: 13px; }
.studio-lightbox-close { position: absolute; top: 10px; right: 10px; font: 700 12px/1 'Segoe UI', Arial, sans-serif; padding: 9px 12px; border-radius: 999px; border: 0; background: var(--accent); color: #071b21; cursor: pointer; }
@media (max-width: 560px) { .studio-mark-card .studio-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }