/* Motion and Brand & print pages */
.hero-video { position: relative; overflow: hidden; background: #111; aspect-ratio: 21 / 9; margin-bottom: 0; }
.hero-video video { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.hero-video .hv-label { position: absolute; left: 24px; bottom: 20px; color: #fff; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); padding: 6px 10px; border-radius: 4px; }

.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.vcard { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.vcard:focus-visible { outline: 2px solid #3b6fd8; outline-offset: 4px; }
.vthumb { position: relative; aspect-ratio: 16 / 9; background: #1b1f4a; overflow: hidden; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.vcard:hover .vthumb img { transform: scale(1.05); }
.vplay {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease), background 0.35s ease;
}
.vcard:hover .vplay { transform: scale(1.12); background: #fff; }
.vmeta { display: flex; flex-direction: column; gap: 4px; }
.vmeta .vt { font-size: 16px; font-weight: 400; color: var(--ink); }
.vmeta .vd { font-size: 14px; line-height: 1.6; color: var(--body); }
.vtag { align-self: flex-start; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gif-grid .tile { aspect-ratio: 600 / 350; }

/* Video dialog */
.vbox .vbox-inner { width: min(1100px, 92vw); display: flex; flex-direction: column; gap: 12px; }
.vbox .vbox-frame { aspect-ratio: 16 / 9; background: #000; display: flex; align-items: center; justify-content: center; }
.vbox .vbox-frame.tall { aspect-ratio: 9 / 16; height: 80vh; width: auto; align-self: center; }
.vbox .vbox-frame video { width: 100%; height: 100%; object-fit: contain; }
.vbox .vbox-title { margin: 0; color: #c8c8c8; font-size: 14px; }
.vbox-fail { text-align: center; color: #fff; display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 24px; }
.vbox-fail .pill { align-self: center; }

/* Brand & print */
.pack-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.range { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.range .tile { aspect-ratio: 4 / 3; background: #eef2f6; }
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.photo-strip .tile { aspect-ratio: 16 / 9; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 900px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vgrid, .photo-strip, .two { grid-template-columns: 1fr; }
  .hero-video { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .vthumb img, .vplay { transition: none; }
}
.range.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .range.r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Magazine ads */
.mag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mag { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mag .tile { aspect-ratio: 2202 / 2576; }
.mag .tile img { object-fit: cover; }
.mag figcaption { display: flex; flex-direction: column; gap: 4px; }
.mag-s { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #666); }
.mag-h { font-size: 14px; line-height: 1.5; }
.mag-more { margin: 20px 0 0; font-size: 14px; }
.mag-more a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }