/* Real work on the service pages: portfolio videos in the example sections' own slots, each opened in the portfolio player.
   portfolio.css styles the player, the round play button and the length; this file fits them into the section's cards. */
/* Light grey while a still loads, so the dark play button never sits black on black. */
.vid-work a.vid-slot{display:block;border-radius:18px;background:#ececea}
.vid-work .vid-slot.has-photo img{transition:transform .35s}
.vid-work .pf-play,.vid-work .pf-time{z-index:1}
.vid-work .pf-play svg{width:20px;height:20px;margin-left:2px}
.vid-work a.vid-slot:focus-visible{outline:2px solid #131313;outline-offset:3px}
.vid-page .vid-work .vid-media-copy{padding:16px 2px 0}
.vid-page .vid-work .vid-media-copy h3{margin-bottom:4px}
/* The kind of business under a card's title: a quiet second line. */
.vid-page .vid-work .vid-media-copy .vid-work-label{margin:0 0 8px;font-size:13px;line-height:1.4;color:#8c8c80}
@media(hover:hover){
    .vid-work a.vid-slot:hover img{transform:scale(1.04)}
    .vid-work a.vid-slot:hover .pf-play{background:#ffe01a;color:#131313}
}
/* More cards than fit across: the arrows stay on wide screens too. */
.vid-examples.has-many .seo-carousel-controls{display:flex}
/* However many videos a section has, its cards keep the size of the six-card rows, side by side from the left. */
.vid-work .vid-media-grid{display:flex;gap:18px;max-width:none}
.vid-work .vid-media-grid>.vid-media-card{flex:0 0 calc((100% - 90px)/6);min-width:172px}

/* On a phone every video section is one row to swipe: two cards and the edge of the next, whatever the layout on a wide screen. */
@media(max-width:680px){
    .vid-work .vid-media{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;margin-inline:-22px;padding:0 22px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
    .vid-work .vid-media::-webkit-scrollbar{display:none}
    .vid-work .vid-media>.vid-media-card{flex:0 0 44%;width:auto;min-width:0;scroll-snap-align:start}
    .vid-examples.vid-work .seo-carousel-controls{display:none}
    .vid-page .vid-work .vid-media-copy{padding-top:12px}
    .vid-page .vid-work .vid-media-copy h3{font-size:16px;line-height:1.25}
    .vid-page .vid-work .vid-media-copy p{font-size:12.5px;line-height:1.5}
    .vid-page .vid-work .vid-media-copy .vid-work-label{font-size:12px}
    .vid-work .pf-play{width:44px;height:44px}
    .vid-work .pf-time{right:8px;bottom:8px}
}

/* The player on a service page: the same icons, white caption and focus ring as on the portfolio page
   (the service pages colour every paragraph grey). */
.vid-page .pf-player svg{width:18px;height:18px;flex:none}
.vid-page .pf-bar p,.vid-page .pf-bar strong{color:#fff}
.vid-page .pf-player :is(button,video):focus-visible{outline:2px solid #ffe01a;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.vid-work .vid-slot.has-photo img{transition:none}}