/* Recent work: one big featured video, the rest in a row you can swipe (js/work.js) */
.wk-feat{margin-top:clamp(28px,3.4vw,48px)}
.wk-stage{position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#0a0a0a; isolation:isolate}
.wk-stage img, .wk-stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.wk-stage video{background:transparent}
.wk-still{transition:opacity .4s}
.wk-stage .wk-blur{display:none}
.wk-feat.tall .wk-blur{display:block; filter:blur(36px) brightness(.55) saturate(1.15); transform:scale(1.2)}
.wk-feat.tall .wk-still, .wk-feat.tall .wk-stage video{object-fit:contain}
.wk-play{position:absolute; inset:0; z-index:2; display:block; width:100%; border:0; padding:0; cursor:pointer; background:linear-gradient(rgba(10,10,10,0) 55%, rgba(10,10,10,.35))}
.wk-play .pp{left:clamp(14px,1.6vw,24px); bottom:clamp(14px,1.6vw,24px); padding:8px 22px 8px 8px; font-size:1.05rem; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wk-play .pp i{width:36px; height:36px}
.wk-play:hover .pp{transform:scale(1.05)}
.wk-feat.playing .wk-play{display:none}
.wk-info{display:flex; justify-content:space-between; align-items:flex-start; gap:14px 40px; margin-top:20px; flex-wrap:wrap}
.wk-info > div:first-child{min-width:0; flex:1 1 420px}
.wk-info h3{font-size:clamp(1.4rem,2vw,1.9rem)}
.wk-info p{color:var(--muted); margin:6px 0 0; max-width:62ch}
.wk-info .chips{flex:none; padding-top:6px}

.wk-reel{margin-top:clamp(32px,3.4vw,52px)}
.wk-track{--n:3; --gap:20px; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); gap:var(--gap); overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:8px; padding:8px; margin:-8px; scrollbar-width:none; user-select:none; -webkit-user-select:none; cursor:grab}
.wk-track::-webkit-scrollbar{display:none}
.wk-track.dragging{scroll-snap-type:none; cursor:grabbing}
.wk-track.dragging .wk-card{pointer-events:none}
@media (max-width: 1000px){ .wk-track{--n:2.2} }
@media (max-width: 640px){ .wk-track{--n:1.25; --gap:14px} }
.wk-item{scroll-snap-align:start; min-width:0}
.wk-card{display:grid; gap:10px; align-content:start; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.wk-card:focus-visible{outline:none}
.wk-img{position:relative; display:block; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; background:#0a0a0a; transition:outline-color .2s}
.wk-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wk-card.tall .wk-pic{object-fit:contain}
.wk-card .wk-blur{filter:blur(24px) brightness(.55) saturate(1.15); transform:scale(1.2)}
.wk-card:hover .wk-pic{transform:scale(1.04)}
.wk-card[aria-current="true"] .wk-img, .wk-card:focus-visible .wk-img{outline:3px solid var(--fg); outline-offset:3px}
.wk-dur{position:absolute; right:10px; bottom:10px; background:rgba(10,10,10,.72); color:#fff; font-size:.8rem; font-weight:600; line-height:1.4; padding:3px 10px; border-radius:999px; font-variant-numeric:tabular-nums}
.wk-t{font-family:var(--f-display); font-weight:700; font-size:1.15rem; line-height:1.25; letter-spacing:-.01em; margin-top:4px}
.wk-d{color:var(--muted); font-size:.98rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

.wk-nav{display:flex; align-items:center; gap:12px; margin-top:24px}
.wk-bar{flex:1; height:2px; margin-right:12px; background:var(--line); border-radius:2px; position:relative; overflow:hidden}
.wk-bar i{position:absolute; top:0; bottom:0; left:0; width:10%; background:var(--fg); border-radius:2px}
.wk-arrow{width:48px; height:48px; flex:none; border-radius:50%; border:1.5px solid var(--fg); background:transparent; color:var(--fg); display:grid; place-items:center; padding:0; cursor:pointer; transition:background .2s, color .2s, opacity .2s}
.wk-arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.wk-arrow:hover:not(:disabled){background:var(--fg); color:var(--bg)}
.wk-arrow:disabled{opacity:.25; cursor:default}

/* With a mouse the titles and texts sit on the video and appear on hover (like before); on touch screens they stay below */
@media (hover: hover) and (pointer: fine){
  .wk-feat{position:relative}
  .wk-info{position:absolute; left:0; right:0; bottom:0; z-index:3; margin:0; padding:clamp(56px,7vw,120px) clamp(20px,2.4vw,40px) clamp(20px,2.4vw,32px); border-radius:0 0 var(--r) var(--r); background:linear-gradient(rgba(10,10,10,0), rgba(10,10,10,.82)); color:#fff; pointer-events:none; opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1)}
  .wk-info h3{color:#fff}
  .wk-info p{color:rgba(255,255,255,.85)}
  .wk-info .chips span{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff}
  .wk-feat:hover .wk-info, .wk-feat:focus-within .wk-info{opacity:1; transform:none}
  .wk-feat.playing .wk-info{display:none}
  .wk-play .pp{transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
  .wk-feat:hover .wk-play .pp{opacity:0}

  .wk-card{position:relative}
  .wk-cap{position:absolute; left:0; right:0; bottom:0; display:grid; gap:4px; padding:clamp(40px,4vw,64px) 16px 16px; border-radius:0 0 var(--r) var(--r); background:linear-gradient(rgba(10,10,10,0), rgba(10,10,10,.8)); color:#fff; pointer-events:none; opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
  .wk-cap .wk-t{margin:0; color:#fff}
  .wk-cap .wk-d{color:rgba(255,255,255,.82)}
  .wk-card:hover .wk-cap, .wk-card:focus-visible .wk-cap{opacity:1; transform:none}
  .wk-dur{transition:opacity .25s ease}
  .wk-card:hover .wk-dur{opacity:0}
}
@media not ((hover: hover) and (pointer: fine)){ .wk-cap{display:grid; gap:6px} }

/* Client logos on the cards (js/work.js): a separate layer over the brand field. When the card comes into view the
   logo lands: it rises out of a blur, a touch too big, settles with a small overshoot, and a gleam runs across it.
   On hover it lifts and the gleam runs again */
.wk-logo{position:absolute; left:50%; top:47%; width:var(--lw, 50%); height:34%; translate:-50% -50%; pointer-events:none; z-index:1;
  opacity:0; transform:translateY(18%) scale(.72) rotate(-4deg); filter:blur(14px)}
.wk-logo img{display:block; width:100%; height:100%; object-fit:contain}
.wk-shine{position:absolute; inset:0; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) 140% 0 / 250% 100% no-repeat;
  -webkit-mask:var(--logo) center / contain no-repeat; mask:var(--logo) center / contain no-repeat; mix-blend-mode:soft-light; opacity:0}
.wk-card.logo-in .wk-logo{animation:wk-logo-in 1.1s cubic-bezier(.16,1.3,.3,1) var(--ld, 0ms) forwards}
.wk-card.logo-in .wk-shine{animation:wk-shine 1.1s cubic-bezier(.5,0,.3,1) calc(var(--ld, 0ms) + .55s) both}
@keyframes wk-logo-in{0%{opacity:0; transform:translateY(18%) scale(.72) rotate(-4deg); filter:blur(14px)}
  45%{opacity:1; filter:blur(0)} 70%{transform:translateY(-3%) scale(1.04) rotate(.6deg)} 100%{opacity:1; transform:none; filter:blur(0)}}
@keyframes wk-shine{0%{opacity:1; background-position:140% 0} 100%{opacity:1; background-position:-40% 0}}
.wk-card.logo-in .wk-logo{transition:scale .45s cubic-bezier(.3,1.5,.5,1)}
.wk-card.logo-in:hover .wk-logo{scale:1.07}
.wk-card.logo-in:hover .wk-shine{animation:wk-shine .9s cubic-bezier(.5,0,.3,1) both}
@media (prefers-reduced-motion: reduce){ .wk-logo{opacity:1; transform:none; filter:none} .wk-card.logo-in .wk-logo, .wk-shine{animation:none} }