/* Video-led presentation informed by production-company portfolios, in VV CI. */
.s-work main{padding-top:0}.s-work .v-stage{position:relative;isolation:isolate;height:calc(100svh - 35px);min-height:580px;max-height:1100px;color:#fff;background:#141414;overflow:hidden;padding:125px 5vw 28px;display:flex;flex-direction:column;justify-content:space-between}.v-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.v-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0004,transparent 38%,#0009);z-index:-1}.v-stage-top{display:flex;justify-content:space-between;align-items:start;gap:25px}.s-work .v-stage h1{font-size:clamp(48px,5vw,78px);line-height:1;margin:0}.v-stage-top>span{font-size:11px;margin-top:8px}.v-stage-bottom{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-top:auto;padding-block:40px 25px}.s-work .v-stage-bottom p{font-size:12px;margin:0 0 10px}.s-work .v-stage-bottom h2{font-size:clamp(47px,5.5vw,83px);line-height:1.05}.s-work .v-stage-bottom button{display:flex;gap:50px;align-items:center;justify-content:space-between;background:#f0b4bd;color:#000;border:0;padding:18px 24px;font:20px/1.2 Anton;cursor:pointer}.v-stage-bottom button span{font:26px/1 OpenSans}.v-stage-bottom button:hover{background:#fff}.v-explore{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #fff6;padding-top:17px;font-size:11px;color:#fff!important;text-decoration:none}.v-explore span{font-size:22px}
.v-collection{padding:55px 0 0}.v-collection-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-inline:5vw}.s-work .v-collection-head h2{font-size:clamp(36px,4vw,58px)}.s-work .v-hand{font:clamp(24px,2.5vw,34px)/1.2 Hand;transform:rotate(-4deg);display:block}.s-work .v-preview{font-size:11px;line-height:1.65;max-width:80ch;padding:0 5vw;margin:20px 0 30px;box-sizing:content-box}.v-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#fff}.v-tile{display:block;border:0;padding:0;width:100%;position:relative;isolation:isolate;aspect-ratio:1.65;background:#000;overflow:hidden;cursor:pointer;color:#fff;text-align:left}.v-tile>video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .65s cubic-bezier(.2,.7,.2,1)}.v-tile:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 40%,#000b)}.v-tile:hover>video,.v-tile:focus-visible>video{transform:scale(1.025)}.v-tile-meta{position:absolute;bottom:27px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:end;gap:20px}.v-tile-meta small{display:block;font:10px/1.4 OpenSans;margin-bottom:5px}.v-tile-meta strong{display:block;font:clamp(33px,3.3vw,49px)/1.1 Anton;letter-spacing:-.015em}.v-open{font-size:11px;padding:9px 0;border-bottom:1px solid #fff;transition:color .2s}.v-tile:hover .v-open{color:#f0b4bd;border-color:#f0b4bd}.v-tile:focus-visible{outline:4px solid #f0b4bd!important;outline-offset:-5px!important}
.v-contact{padding:65px 5vw 75px;background:#f0b4bd}.s-work .v-contact>a{display:flex;align-items:center;justify-content:space-between;gap:30px;font:clamp(40px,6.5vw,95px)/1.15 Anton;text-decoration:none;margin-top:30px;border-bottom:1px solid #000;padding-bottom:25px}.v-contact>a>span{transition:transform .3s}.v-contact>a:hover>span{transform:translate(5px,-5px)}
.s-work .v-dialog{background:#000;color:#fff;border:0;width:min(1200px,94vw);max-width:94vw;max-height:94svh;padding:22px;overflow:auto}.v-dialog::backdrop{background:#000d;backdrop-filter:blur(9px)}.v-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:20px}.s-work .v-dialog-top p{font-size:13px;margin:0}.s-work .v-dialog-close{background:transparent;color:#fff;border:1px solid #fff7;padding:10px 15px;font:14px OpenSans;cursor:pointer}.v-dialog>video{display:block;width:100%;max-height:70svh;background:#000}.s-work .v-dialog-note{font-size:11px;color:#ccc;margin:17px 0 0;max-width:70ch}.s-work:has(.v-dialog[open]){overflow:hidden}
@media(max-width:700px){.s-work .v-stage{height:calc(90svh - 15px);min-height:560px;padding:100px 6vw 20px}.s-work .v-stage h1{font-size:48px}.v-stage-top>span{font-size:9px;max-width:15ch;text-align:right}.v-stage-bottom{display:block;padding-bottom:22px}.s-work .v-stage-bottom h2{font-size:52px}.s-work .v-stage-bottom button{font-size:19px;padding:14px 18px;width:100%;margin-top:24px}.v-collection{padding-top:35px}.v-collection-head{padding-inline:6vw;align-items:start}.s-work .v-collection-head h2{font-size:35px}.s-work .v-collection-head .v-hand{font-size:22px;max-width:9ch}.s-work .v-preview{padding-inline:6vw;font-size:10px;margin-top:20px;margin-bottom:23px}.v-grid{grid-template-columns:1fr;gap:3px}.v-tile{aspect-ratio:1.2}.v-tile-meta{left:22px;right:22px;bottom:23px}.v-tile-meta strong{font-size:37px}.v-tile-meta small{font-size:9px}.v-open{font-size:10px}.v-contact{padding:45px 6vw}.s-work .v-contact>a{font-size:11.5vw;align-items:end;gap:20px;margin-top:25px}.v-contact>a>span{font-size:42px}.s-work .v-dialog{padding:15px;width:96vw;max-width:96vw}.v-dialog-top{gap:15px}.s-work .v-dialog-top p{font-size:11px}.s-work .v-dialog-close{font-size:12px;padding:8px 10px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.v-tile>video,.v-contact>a>span{transition:none;transform:none!important}}

/* Same customer-logo loop as home, scoped placement for Work. */
.s-work .v-brands{margin-top:0;margin-bottom:30px;padding-block:27px;border-color:#0002;background:#fff}.s-work .v-brands:hover>div{animation-play-state:paused}
@media(max-width:700px){.s-work .v-brands{padding-block:22px;margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.s-work .v-brands{overflow-x:auto}.s-work .v-brands>div{animation:none}.s-work .v-brands>div[aria-hidden=true]{display:none}}

/* Motion belongs to the footage, not to a new page layout. */
.s-work .v-stage>video{transform:translateY(var(--work-drift,0px)) scale(1.1)}
.s-work .v-explore span{transition:transform .4s,color .3s}
.s-work .v-explore:is(:hover,:focus-visible) span{transform:translateY(5px);color:#f0b4bd}
.s-work .v-tile-meta strong{transform-origin:left bottom;transition:transform .5s cubic-bezier(.16,1,.3,1),color .3s}
.s-work .v-tile:is(:hover,:focus-visible) .v-tile-meta strong{transform:translateY(-4px) scale(1.04);color:#f0b4bd}
.s-work .v-open{position:relative}
.s-work .v-open:after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:4px;background:#f0b4bd;clip-path:polygon(0 40%,45% 0,100% 35%,96% 75%,20% 100%);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.s-work .v-tile:is(:hover,:focus-visible) .v-open:after{transform:scaleX(1)}
.s-work .v-contact>a{position:relative}
.s-work .v-contact>a:after{content:'';position:absolute;bottom:-3px;left:0;width:100%;height:6px;background:#000;clip-path:polygon(0 45%,28% 10%,80% 30%,100% 10%,98% 60%,35% 100%,1% 75%);transform:scaleX(var(--work-line,0));transform-origin:left}
@media(max-width:700px){.s-work .v-tile:is(:hover,:focus-visible) .v-tile-meta strong{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.s-work .v-stage>video{transform:none}.s-work .v-tile-meta strong,.s-work .v-explore span,.s-work .v-open:after{transition:none;transform:none!important}}
.s-work.motion-paused .v-stage>video{transform:none}
.s-work.motion-paused .v-tile-meta strong,.s-work.motion-paused .v-explore span,.s-work.motion-paused .v-open:after{transition:none}

.s-work .v-stage-bottom .v-sound{background:transparent;border:1px solid #fff8;color:#fff;padding:12px 18px;gap:12px;font:15px/1.4 OpenSans;cursor:pointer;width:auto}.s-work .v-stage-bottom .v-sound:hover{background:#f0b4bd;color:#000;border-color:#f0b4bd}

/* Full 16:9 showreel, without crop or scroll zoom. */
body.s-work .v-stage{height:auto;min-height:0;max-height:none;aspect-ratio:16/9;padding:100px 5vw 25px}
body.s-work .v-stage>video{object-fit:contain;transform:none}
body.s-work .v-stage-bottom .v-sound{width:48px;height:48px;min-width:48px;padding:11px;display:grid;place-items:center;border-radius:50%;background:#ffffff18;backdrop-filter:blur(8px);border:1px solid #ffffff80}
.v-sound svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v-sound .sound-waves,.v-sound[aria-pressed="true"] .sound-mute{display:none}.v-sound[aria-pressed="true"] .sound-waves{display:block}
@media(max-width:700px){body.s-work .v-stage{margin-top:80px;padding:16px 6vw;aspect-ratio:16/9}.s-work .v-stage h1{font-size:30px}.s-work .v-stage-top>span,.s-work .v-stage-bottom p,.s-work .v-explore{display:none}.s-work .v-stage-bottom{display:flex;padding:0;align-items:end}.s-work .v-stage-bottom h2{font-size:26px}.s-work .v-stage-bottom .v-sound{margin:0;width:42px;height:42px;min-width:42px;padding:8px}}

/* Showreel retains its original colours, without a veil. */
body.s-work .v-stage:after{background:none}
body.s-work .v-stage>video{filter:none;opacity:1}
