/* My Work: same cinematic opening as the homepage, then brands, impact, cases, films and scale */
.wk-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px 40px;flex-wrap:wrap;margin:50px 0 56px}
.wk-heading h2{font-size:clamp(46px,6.2vw,96px)}
.wk-heading>p{font-size:14px;line-height:1.7;max-width:300px}
.wk-fine{font-size:10px;line-height:1.7;opacity:.6;margin-top:34px;max-width:640px}
.wk-journey-stats li{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 20px;border-radius:16px;font-size:12px}
.wk-journey-stats li span{font-family:Manrope,Arial,sans-serif;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.04em;color:var(--gold)}
.copy-portfolio{background:none;border:0;border-bottom:1px solid currentColor;color:inherit;padding:6px 0;font-size:12px}
.copy-status{font-size:11px;opacity:.7}

/* Brands: two bands of real logos drifting in opposite directions */
.wk-brands{border-radius:30px 30px 0 0;overflow:clip;padding-bottom:70px}
.wk-marquee{display:flex;overflow:hidden;margin:0 calc(var(--gutter)*-1);padding:22px 0;border-top:1px solid var(--line);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wk-marquee+.wk-marquee{border-bottom:1px solid var(--line)}
.wk-marquee ul{display:flex;align-items:center;flex-shrink:0;list-style:none;margin:0;padding:0;animation:brand-roll 60s linear infinite}
.wk-marquee.is-reverse ul{animation-direction:reverse;animation-duration:66s}
.wk-marquee:hover ul{animation-play-state:paused}
.wk-marquee li{display:flex;align-items:center;justify-content:center;height:clamp(72px,7vw,96px);padding:0 clamp(26px,3vw,46px)}
.wk-marquee img{display:block;width:auto;height:clamp(36px,3.8vw,52px);max-width:220px;object-fit:contain}
.wk-marquee .lg-loreal img,.wk-marquee .lg-garnier img,.wk-marquee .lg-maybelline img{height:clamp(24px,2.6vw,36px)}
.wk-marquee .lg-huxberry img{height:clamp(17px,1.8vw,24px)}
.wk-marquee .lg-saffola img,.wk-marquee .lg-colgate img{height:clamp(30px,3.2vw,44px)}
.wk-marquee .lg-cadbury img{height:clamp(34px,3.6vw,50px)}
.wk-marquee .lg-ariel img,.wk-marquee .lg-dettol img,.wk-marquee .lg-harpic img,.wk-marquee .lg-goodknight img,.wk-marquee .lg-hit img,.wk-marquee .lg-parachuteadvansed img,.wk-marquee .lg-marico img,.wk-marquee .lg-lipton img,.wk-marquee .lg-tide img,.wk-marquee .lg-cornetto img{height:clamp(54px,5.6vw,76px)}
.lg-word span{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:clamp(22px,2.3vw,32px);letter-spacing:-.04em;color:var(--c);white-space:nowrap}
.motion-off .wk-marquee ul{animation-play-state:paused}

/* Impact: dark band over the tunnel */
.wk-impact-section{background:linear-gradient(180deg,#08281fa6,#08281fe0 40%,#0b2f25e6);overflow:clip}
.wk-impact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #f1ede32e}
.wk-impact>div{padding:34px 28px 34px 0;border-bottom:1px solid #f1ede32e}
.wk-impact>div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid #f1ede32e}
.wk-impact strong{display:block;font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:clamp(38px,4.4vw,66px);letter-spacing:-.06em;line-height:1;color:var(--gold);white-space:nowrap}
.wk-impact span{display:block;font-size:15px;margin-top:16px}
.wk-impact small{display:block;font-size:11px;opacity:.6;margin-top:6px}

/* Case studies */
.wk-cases{border-radius:30px 30px 0 0}
.case-filters{display:flex;gap:8px;flex-wrap:wrap}
.case-filters button{padding:11px 18px;border:1px solid #13372e40;border-radius:40px;background:none;color:var(--ink);font-size:12px;transition:background .3s,color .3s,border-color .3s}
.case-filters button:hover{border-color:var(--ink)}
.case-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.filter-status{font-size:11px;opacity:.6;margin:-30px 0 30px}
.case-list{display:flex;flex-direction:column;gap:clamp(70px,9vw,130px)}
.case-study[hidden]{display:none}
.wk-case{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(30px,5vw,80px);align-items:center;scroll-margin-top:100px}
.wk-case:nth-child(even) .wk-case-media{order:2}
.wk-case-media{--reveal:1;--shift:0%;position:relative;aspect-ratio:16/11;border-radius:20px;overflow:hidden;background:#d9d3c4;clip-path:inset(calc((1 - var(--reveal)) * 10%) calc((1 - var(--reveal)) * 14%) round calc(20px + (1 - var(--reveal)) * 40px))}
.wk-case-media img{width:100%;height:100%;object-fit:cover;scale:1.14;translate:0 var(--shift)}
.wk-flow{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:clamp(28px,4vw,56px);background:radial-gradient(ellipse at 100% 0,#c2a66a33,transparent 55%),var(--ink);color:var(--ivory)}
.wk-flow span{font-size:9px;letter-spacing:.16em;color:var(--gold)}
.wk-flow strong{font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.045em}
.wk-flow i{width:1px;height:26px;background:#e5c18b80;margin:8px 0 8px 3px}
.wk-case-body{opacity:0;transform:translateY(26px);transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1)}
.wk-case.is-in .wk-case-body{opacity:1;transform:none}
.wk-case-top{display:flex;align-items:center;gap:14px}
.wk-case-num{font-family:Manrope,Arial,sans-serif;font-size:13px;color:#8a6a35}
.wk-case-top .eyebrow{font-size:9px;opacity:.7;flex:1}
.case-permalink{display:grid;place-items:center;width:34px;height:34px;border:1px solid #13372e33;border-radius:50%;transition:background .3s,color .3s}
.case-permalink:hover{background:var(--ink);color:var(--ivory)}
.case-permalink .ui-arrow{width:13px;height:13px}
.wk-case-logo{display:flex;align-items:center;gap:16px;height:56px;margin:28px 0 18px}
.wk-case-logo img{height:100%;width:auto;max-width:220px;object-fit:contain}
.wk-case-logo img[src$="huxberry.png"]{height:22px}
.wk-case-logo img[src$="loreal.svg"],.wk-case-logo img[src$="garnier.svg"]{height:30px}
.wk-case-logo img[src$="colgate.svg"]{height:40px}
.wk-case-logo span{font-size:20px;opacity:.4}
.wk-case-word{font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:30px;letter-spacing:-.05em}
.wk-case h3{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1.15;letter-spacing:-.035em;max-width:16ch}
.wk-case-metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0 22px;padding-top:22px;border-top:1px solid var(--line)}
.wk-case-metrics strong{display:block;font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:clamp(28px,2.8vw,42px);letter-spacing:-.055em;line-height:1.05}
.wk-case-metrics span{display:block;font-size:11px;line-height:1.5;opacity:.65;margin-top:8px}
.wk-case-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.wk-case-tags li{padding:7px 12px;border:1px solid #13372e30;border-radius:30px;font-size:11px}
.case-expand{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-expand summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:16px 0;font-size:13px;font-weight:500}
.case-expand summary::-webkit-details-marker{display:none}
.case-expand summary span{font-size:18px;transition:transform .3s}
.case-expand[open] summary span{transform:rotate(45deg)}
.case-expand p{font-size:13px;line-height:1.7;opacity:.8}
.case-expand ul{margin:14px 0 20px;padding-left:18px;font-size:13px;line-height:1.7;opacity:.8}
.case-expand li+li{margin-top:6px}

/* Films */
.wk-films{background:linear-gradient(180deg,#08281fb3,#08281fe6);overflow:clip}
.wk-film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}
.wk-film:first-child{grid-column:span 2;grid-row:span 2}
.wk-film-frame{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#0b2019;border:1px solid #f1ede31f}
.wk-film:first-child .wk-film-frame{aspect-ratio:auto;height:calc(100% - 64px);min-height:300px}
.wk-film video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.wk-film.is-playing video{object-fit:contain}
.wk-film:not(.is-playing):hover video{transform:scale(1.04)}
.film-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;transition:transform .35s;box-shadow:0 12px 30px -10px #0008}
.film-play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.wk-film:hover .film-play{transform:scale(1.08)}
.film-play[hidden]{display:none}
.wk-film h3{font-size:16px;letter-spacing:-.02em;margin-top:14px}
.wk-film p{font-size:11px;opacity:.6;margin-top:4px}

/* Scale: bars grow into place */

.wk-bars{--grow:1;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wk-bars li{display:grid;grid-template-columns:minmax(120px,190px) 1fr 110px;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.wk-bar-name{font-size:15px;font-weight:500}
.wk-bar{height:12px;border-radius:12px;background:#13372e14;overflow:hidden}
.wk-bar i{display:block;height:100%;width:calc(var(--w) * var(--grow) * 100%);min-width:6px;border-radius:12px;background:linear-gradient(90deg,var(--ink),#2c6b50)}
.wk-bars li:first-child .wk-bar i{background:linear-gradient(90deg,#8a6a35,var(--gold))}
.wk-bars strong{font-family:Manrope,Arial,sans-serif;font-weight:500;font-size:20px;letter-spacing:-.04em;text-align:right}
.scale-context{margin-top:26px;font-size:12px}
.scale-context summary{cursor:pointer;list-style:none;display:flex;gap:10px;opacity:.7}
.scale-context summary::-webkit-details-marker{display:none}
.scale-context p{margin-top:12px;line-height:1.7;opacity:.7;max-width:640px}

/* Closing */
.wk-cta{background:linear-gradient(180deg,#08281f99,#08281fe6 45%);padding-bottom:30px;overflow:clip}
.wk-cta .wk-heading h2{font-size:clamp(52px,8.4vw,130px)}
.wk-cta-actions{display:flex;align-items:center;gap:20px 40px;flex-wrap:wrap}
.wk-cta .hero-enquire{background:var(--gold);color:var(--ink);font-weight:500}
.wk-cta .hero-enquire:hover{background:var(--ivory)}
.wk-cta .line-link{color:var(--ivory)}
.wk-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:100px;padding-top:24px;border-top:1px solid #f1ede32e;font-size:9px}
.wk-footer>span{letter-spacing:.13em;font-size:7px}

@media(max-width:900px){
.wk-impact{grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-impact>div{padding-left:0!important;border-left:0!important}
.wk-impact>div:nth-child(even){padding-left:24px!important;border-left:1px solid #f1ede32e!important}
.wk-case{grid-template-columns:1fr;gap:30px}
.wk-case:nth-child(even) .wk-case-media{order:0}
.wk-film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-film:first-child .wk-film-frame{height:auto;aspect-ratio:16/10}
}
@media(max-width:600px){
.wk-heading{margin:34px 0 36px}
.wk-heading h2{font-size:13.5vw}
.wk-journey-stats li{padding:10px 14px}
.wk-impact{grid-template-columns:1fr}
.wk-impact>div{padding:24px 0!important;border-left:0!important}
.wk-impact strong{font-size:44px}
.wk-case-media{aspect-ratio:4/3;border-radius:14px}
.wk-case-metrics strong{font-size:28px}
.wk-film-grid{grid-template-columns:1fr}
.wk-film:first-child{grid-column:auto;grid-row:auto}
.wk-bars li{grid-template-columns:1fr auto;gap:10px 16px}
.wk-bar{grid-column:1/-1;grid-row:2}
.wk-bars strong{font-size:17px}
.wk-cta .wk-heading h2{font-size:15vw}
.wk-marquee li{height:70px;padding:0 22px}
}
@media(prefers-reduced-motion:reduce){.wk-marquee{-webkit-mask:none;mask:none}.wk-marquee ul{animation:none;flex-wrap:wrap;flex-shrink:1;justify-content:center}.wk-marquee ul+ul{display:none}.wk-case-body{opacity:1;transform:none;transition:none}}
.motion-off .wk-case-body{opacity:1;transform:none;transition:none}
@keyframes brand-roll{to{transform:translateX(-100%)}}

.wk-case-words{flex-wrap:wrap;row-gap:4px;height:auto;min-height:56px}.wk-case-words .wk-case-word{font-size:clamp(20px,2vw,26px)}