.testimonials { background: var(--paper); }
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.video-card { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 16px; aspect-ratio: 4 / 5; background: var(--ink); color: #fff; cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(14,23,38,.04); transition: transform .3s, box-shadow .3s; }
.video-card:hover,.video-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(14,23,38,.16); }
.video-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.video-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .7s, filter .35s; }
.video-card:nth-child(1) img { object-position: 63% center; }
.video-card:nth-child(2) img { object-position: 58% center; }
.video-card:nth-child(3) img { object-position: 52% center; }
.video-card:nth-child(4) img { object-position: 50% center; }
.video-card:hover img { transform: scale(1.04); filter: grayscale(.75); }
.video-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(14,23,38,.02) 25%,rgba(14,23,38,.9) 100%); }
.play { position: absolute; top: 50%; left: 50%; width: 66px; height: 66px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.95); transition: transform .3s; }
.play::after { content: ''; position: absolute; left: 28px; top: 22px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 17px solid var(--ink); }
.video-card:hover .play { transform: translate(-50%,-50%) scale(1.08); }
.video-meta { position: absolute; left: 24px; right: 20px; bottom: 22px; display: flex; flex-direction: column; }
.video-meta b { font-size: 17px; }
.video-meta small { margin-top: 4px; color: rgba(255,255,255,.68); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.video-modal[hidden] { display: none; }
.video-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 28px; }
.video-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,10,18,.88); backdrop-filter: blur(8px); cursor: pointer; }
.video-dialog { position: relative; z-index: 1; width: min(100%, 980px); background: #050b13; border-radius: 16px; box-shadow: 0 32px 90px rgba(0,0,0,.5); overflow: hidden; }
.video-player { aspect-ratio: 16 / 9; background: #000; }
.video-player video { width: 100%; height: 100%; display: block; object-fit: contain; }
.video-close { position: absolute; z-index: 2; right: 12px; top: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.video-close:focus-visible { outline: 3px solid var(--soft); outline-offset: 3px; }
.video-caption { display: flex; gap: 12px; align-items: baseline; padding: 14px 20px 17px; color: #fff; }
.video-caption span { color: #98a3b6; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
body.video-open { overflow: hidden; }
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .video-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; } .video-card { flex: 0 0 82%; scroll-snap-align: start; } .video-modal { padding: 12px; } .video-caption { flex-direction: column; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .video-card,.video-card img,.play { transition: none; } }