/* Arttech / curated client worlds. Presentation is separate from content. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .24s ease both}
::view-transition-new(root){animation:page-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-out{to{opacity:0;transform:translateY(-18px)}}
@keyframes page-in{from{opacity:0;transform:translateY(35px)}}
.client-asharq{--world:#203a32;--world-ink:#f0eadb;--accent:#ff743d}
.client-vice{--world:#e8e5db;--world-ink:#171917;--accent:#f14d22}
.client-mhealth{--world:#c0e7d5;--world-ink:#164936;--accent:#246f60}
.client-oud{--world:#302021;--world-ink:#eee3c1;--accent:#b8a975}
.client-gig{--world:#e5e1f2;--world-ink:#29245c;--accent:#7671a9}
.client-tv{--world:#20213d;--world-ink:#f0eee4;--accent:#c4aafa}
.motion-toggle{border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font-size:.65rem;letter-spacing:.045em;padding:7px 0;white-space:nowrap}
.motion-toggle:hover{opacity:.65}
.project-frame{background:var(--world);color:var(--world-ink)}
.showcase.is-pinned{height:780svh}
.showcase .frame-bottom{bottom:42px}
.frame-bottom>.client-logos{display:none}
.client-logos{display:flex;align-items:center;gap:16px}
.client-logos img{width:auto;height:52px;max-width:120px;object-fit:contain}
.frame-bottom .client-logos{margin-bottom:14px}
.frame-bottom .client-logos img{height:42px;max-width:110px}
.frame-bottom h3{margin:0;font-size:clamp(2.4rem,4.3vw,5.5rem)}
.frame-detail{padding-bottom:4px}
.logo-ghost{position:absolute;inset:8% 12% 21%;justify-content:center;opacity:.13;pointer-events:none;transform:translateY(calc(var(--drift,0)*-45px)) scale(calc(1.08 - var(--drift,0)*.05));z-index:0}
.logo-ghost img{width:90%;max-width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(2)}
.client-vice .logo-ghost{opacity:.09;inset:6% -5% 25%}
.client-vice .logo-ghost img{filter:none}
.client-gig .logo-ghost{opacity:.1}
.client-tv .logo-ghost img{width:44%;filter:grayscale(1) brightness(3)}
.frame-watermark{position:absolute;right:5%;bottom:22%;font:italic 9vw/1 Georgia,serif;opacity:.12;pointer-events:none}
.media-piece{margin:0;min-width:0}
.media-window{position:relative;overflow:hidden;background:#171917;isolation:isolate}
.media-window img,.media-window video{width:100%;height:100%;object-fit:cover}
.landscape>.media-window{aspect-ratio:16/9}
.portrait>.media-window{aspect-ratio:9/16}
.media-piece figcaption{font-size:.64rem;line-height:1.5;letter-spacing:.035em;margin-top:13px;opacity:.65}
.loop-tag{position:absolute;bottom:10px;right:10px;color:white;background:#1119;padding:5px 8px;border-radius:2px;font-size:.48rem;letter-spacing:.08em;pointer-events:none;opacity:0;transition:opacity .3s}
.media-piece:hover .loop-tag{opacity:1}
.curated-card{padding:6px;box-shadow:0 30px 60px #0005;transform-origin:center;transition:filter .4s;position:absolute}
.curated-card figcaption{font-size:.55rem;padding:0 5px 5px;margin-top:7px;opacity:.7}
.showcase .curated-art{top:22%;height:46%;left:3%;right:3%}
.curated-art .card-1{width:24%;left:7%;top:4%;z-index:1;transform:translate3d(calc(var(--drift,0)*-28px),calc(var(--drift,0)*42px),0) rotate(calc(-11deg - var(--drift,0)*5deg))}
.curated-art .card-1.portrait{width:15%;left:10%;top:-9%}
.curated-art .card-2{width:49%;left:25%;top:4%;z-index:2;transform:translate3d(0,calc(var(--drift,0)*-25px),0) rotate(calc(-3deg + var(--drift,0)*3deg))}
.curated-art .card-3{width:28%;left:67%;top:28%;z-index:3;transform:translate3d(calc(var(--drift,0)*30px),calc(var(--drift,0)*-48px),0) rotate(calc(11deg + var(--drift,0)*4deg))}
.curated-art.all-portrait .card-1{width:17%;left:20%;top:-10%}
.curated-art.all-portrait .card-2{width:19%;left:41%;top:-15%}
.curated-art.all-portrait .card-3{width:17%;left:64%;top:0}
.curated-art:hover .card-2{filter:brightness(1.06)}
.curated-art .art-hover{left:47%;top:35%;width:112px;height:112px}
.case-page main{padding-top:94px}
.case-opening{background:var(--world);color:var(--world-ink);padding:35px var(--pad) 70px;overflow:hidden}
.case-opening-top{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);padding-bottom:25px}
.back-work{font-size:.75rem}
.back-work:hover{transform:translateX(-3px)}
.case-heading{position:relative;padding:55px 0 40px}
.case-heading .client-logos{position:absolute;right:0;top:62px}
.case-heading .client-logos img{height:72px;max-width:155px}
.case-heading h1{font:500 clamp(4.5rem,8.7vw,11rem)/1.06 'Manrope',Arial,sans-serif;letter-spacing:-.075em;margin:0 190px 25px 0}
.case-heading h1 em{font-family:Georgia,serif;font-weight:400}
.client-asharq .case-heading h1 em{display:block}
.case-category{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.case-hero-media{position:relative;transform:scale(calc(.96 + var(--scene,0)*.04));transform-origin:center top;clip-path:inset(0 round 3px);overflow:hidden}
.case-hero-media>.media-piece .media-window{aspect-ratio:16/8.2}
.case-hero-media .media-window video{object-fit:cover}
.case-enter{position:absolute;right:30px;bottom:30px;background:var(--orange);color:white;width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2.2rem;gap:5px;transition:transform .3s}
.case-enter span{font-size:.52rem;letter-spacing:.03em}
.case-enter:hover{transform:rotate(-8deg) scale(1.05)}
.case-hero-collage{height:620px;position:relative;background:#ff5b30;overflow:hidden}
.case-hero-collage .media-piece{position:absolute;width:24%;top:8%;box-shadow:0 20px 45px #0004}
.case-hero-collage .piece-1{left:12%;transform:rotate(-12deg) translateY(calc(var(--scene,0)*-25px))}
.case-hero-collage .piece-2{left:38%;top:2%;transform:rotate(3deg);z-index:2}
.case-hero-collage .piece-3{left:65%;transform:rotate(12deg) translateY(calc(var(--scene,0)*30px))}
.case-prologue{padding:80px var(--pad) 100px;background:var(--cream);color:var(--ink)}
.case-prologue h2{font:500 clamp(3rem,6.2vw,7.4rem)/1.05 'Manrope',Arial,sans-serif;letter-spacing:-.065em;margin:70px 0 65px}
.case-prologue h2 em{font-family:Georgia,serif;color:var(--orange);font-weight:400}
.prologue-bottom{display:grid;grid-template-columns:1fr 1fr;gap:10vw;border-top:1px solid #1113;padding-top:30px}
.prologue-bottom ul{padding:0;margin:0;list-style:none;font-size:.74rem;line-height:2;color:#65675e}
.prologue-bottom p{font-size:1.15rem;line-height:1.65;margin:0;max-width:640px}
.theme-paper{--surface:#eeece4;--type:#1c221d;--soft:#63685d}
.theme-dark{--surface:#141815;--type:#eeece4;--soft:#a4ada1}
.theme-orange{--surface:#ff592b;--type:#181d17;--soft:#582813}
.theme-mint{--surface:#c0e7d5;--type:#164936;--soft:#466c5c}
.theme-lime{--surface:#d9ef91;--type:#171e14;--soft:#586435}
.theme-space{--surface:#101625;--type:#e4e4ef;--soft:#a3abbc}
.theme-wine{--surface:#391f23;--type:#eee3c1;--soft:#b9a786}
.theme-indigo{--surface:#242348;--type:#eeeafc;--soft:#b4afcf}
.chapter,.filmstrip-section{background:var(--surface);color:var(--type);position:relative;overflow:clip}
.chapter{padding:100px var(--pad) 120px}
.chapter-copy{display:grid;grid-template-columns:1.3fr 1fr;column-gap:9vw;align-items:end;position:relative;z-index:2}
.chapter-copy>.label{grid-column:1/-1;opacity:.62;line-height:1.6}
.chapter-copy h2{font:500 clamp(2.8rem,5vw,6rem)/1.05 'Manrope',Arial,sans-serif;letter-spacing:-.065em;margin:36px 0 45px}
.chapter-copy h2 em{font-family:Georgia,serif;font-weight:400}
.chapter-copy p{font-size:.92rem;line-height:1.7;max-width:480px;color:var(--soft);margin:0 0 45px;grid-column:2;grid-row:2}
.original-title{font-size:1.1rem;grid-column:1;grid-row:3;margin:-20px 0 40px;opacity:.65;text-align:left}
.chapter-media{position:relative}
.cinema-chapter .chapter-media{transform:scale(calc(.94 + var(--scene,0)*.06));clip-path:inset(0 round calc(25px - var(--scene,0)*25px));transform-origin:center}
.cinema-chapter .media-window{aspect-ratio:16/8.5}
.cinema-chapter .media-window video{object-fit:contain;background:var(--surface)}
.duet-chapter .chapter-media{display:grid;grid-template-columns:1.3fr 1fr;gap:4vw;align-items:start;padding-bottom:40px}
.duet-chapter .piece-1{transform:translateY(calc((1 - var(--scene,0))*35px)) rotate(calc((1 - var(--scene,0))*-2deg))}
.duet-chapter .piece-2{margin-top:20%;transform:translateY(calc((1 - var(--scene,0))*-30px)) rotate(calc((1 - var(--scene,0))*2deg))}
.duet-chapter .media-window{box-shadow:0 25px 55px #0002}
.filmstrip-section{padding:0;overflow:visible}
.filmstrip-sticky{padding:90px 0 35px;overflow:hidden}
.filmstrip-sticky>.chapter-copy{padding:0 var(--pad)}
.filmstrip-sticky .chapter-copy h2{font-size:clamp(2.8rem,4.6vw,5rem);margin:22px 0 30px}
.filmstrip-sticky .chapter-copy p{margin-bottom:30px;font-size:.85rem}
.filmstrip-track{display:flex;gap:30px;width:max-content;padding:0 var(--pad);transform:translate3d(var(--track-x,0px),0,0);align-items:start}
.filmstrip-track .portrait{width:clamp(180px,23vw,310px);flex:none}
.filmstrip-track .landscape{width:60vw;flex:none}
.filmstrip-track .media-piece:nth-child(even){padding-top:25px}
.filmstrip-track .media-window{box-shadow:0 20px 40px #0002}
.filmstrip-foot{margin:30px var(--pad) 0;display:flex;justify-content:space-between;position:relative;padding-bottom:20px;gap:20px}
.filmstrip-foot .label:last-of-type{opacity:.55}
.strip-progress{height:1px;background:color-mix(in srgb,currentColor 20%,transparent);position:absolute;bottom:0;left:0;right:0}
.strip-progress i{display:block;background:currentColor;height:100%;width:calc(10% + var(--strip-progress,0)*90%)}
.filmstrip-section.is-scroll-strip{height:var(--strip-height,230svh)}
.is-scroll-strip .filmstrip-sticky{position:sticky;top:0;height:100svh;padding-top:100px;display:flex;flex-direction:column}
.is-scroll-strip .filmstrip-viewport{flex:1;min-height:0;overflow:visible}
.is-scroll-strip .filmstrip-track .portrait{width:calc((100svh - 380px)*.5625);min-width:155px;max-width:310px}
.is-scroll-strip .filmstrip-track .landscape{width:calc((100svh - 390px)*1.777);min-width:400px;max-width:820px}
.is-scroll-strip .filmstrip-foot{margin-top:40px;flex:none}
.collage-chapter .chapter-media{height:660px;max-width:1150px;margin:auto}
.collage-chapter .media-piece{width:29%;position:absolute;top:0;box-shadow:0 20px 50px #0002}
.collage-chapter .piece-1{left:5%;transform:translateY(calc(var(--scene,0)*45px)) rotate(-10deg)}
.collage-chapter .piece-2{left:36%;top:30px;transform:translateY(calc(var(--scene,0)*-30px)) rotate(3deg);z-index:2}
.collage-chapter .piece-3{left:66%;top:40px;transform:translateY(calc(var(--scene,0)*40px)) rotate(11deg)}
.names-chapter .chapter-copy{margin-bottom:35px}
.programme-names{display:grid;grid-template-columns:1fr 1fr;column-gap:60px}
.programme-names>div{padding:25px 0;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);display:flex;align-items:center;gap:20px}
.programme-names strong{font-size:clamp(1.1rem,2vw,2rem);font-weight:500;line-height:1.3;flex:1}
.programme-names span{font-size:.7rem;opacity:.45}
.programme-names span:last-child{font-size:1.5rem}
.next-world{background:var(--world);color:var(--world-ink);padding:70px var(--pad);position:relative;overflow:hidden}
.next-world>a{display:flex;justify-content:space-between;align-items:center;padding:65px 0 45px;gap:30px}
.next-world h2{font:500 clamp(3rem,7vw,8rem)/1.1 'Manrope',Arial,sans-serif;letter-spacing:-.07em;margin:25px 0 0}
.next-world h2 em{font-family:Georgia,serif;font-weight:400}
.next-arrow{font-size:6vw;width:13vw;height:13vw;flex:none;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:transform .4s}
.next-world>a:hover .next-arrow{transform:rotate(45deg)}
.next-world>p{font-size:.8rem;opacity:.6}
.motion-paused .media-piece,.motion-paused .curated-card{will-change:auto}
.motion-paused .hero-symbol{animation-play-state:paused}
@media(max-width:600px){.case-opening .case-hero-media>.media-piece .media-window{aspect-ratio:16/9}}
.client-asharq .logo-ghost{inset:10% -3% 25%;opacity:.35}
.client-asharq .logo-ghost img{filter:none}
.reveal{opacity:1;transform:none}
.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(30px)}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .motion-ready .chapter-copy h2{transform:translateY(calc((1 - var(--chapter-entry,1))*55px));clip-path:inset(0 0 calc((1 - var(--chapter-entry,1))*100%) 0)}
 .motion-ready .chapter-copy p{transform:translateY(calc((1 - var(--chapter-entry,1))*30px));opacity:calc(.25 + var(--chapter-entry,1)*.75)}
}
@media(min-width:901px) and (max-height:760px){
 .showcase .curated-art{top:23%;height:37%}.curated-art .card-2{width:42%;left:29%}.curated-art .card-1.portrait{width:12%;left:16%}.curated-art .card-3{width:24%;left:67%}.curated-art.all-portrait .card-1{width:12%;left:27%}.curated-art.all-portrait .card-2{width:14%;left:43%}.curated-art.all-portrait .card-3{width:12%;left:62%}.frame-bottom .client-logos img{height:30px}.frame-bottom h3{font-size:3.8vw}.showcase .frame-bottom{bottom:30px}.is-scroll-strip .chapter-copy h2{font-size:3.4vw}.is-scroll-strip .chapter-copy p{font-size:.77rem}
}
@media(max-width:900px){
 .showcase .project-frame{min-height:820px;height:105svh}.showcase .frame-bottom{bottom:45px}.curated-art .card-1.portrait{width:19%;left:5%}.curated-art.all-portrait .card-1{width:23%;left:8%}.curated-art.all-portrait .card-2{width:26%;left:36%}.curated-art.all-portrait .card-3{width:23%;left:68%}.showcase .curated-art{top:23%;height:40%}.frame-bottom h3{font-size:6.6vw}.case-heading h1{font-size:10vw;margin-right:145px}.case-heading .client-logos img{height:55px;max-width:95px}.case-hero-collage{height:470px}.chapter-copy{grid-template-columns:1fr;gap:0}.chapter-copy p{grid-column:1;grid-row:auto;max-width:650px;font-size:1rem}.chapter-copy h2{font-size:7vw;margin-bottom:30px}.original-title{grid-row:auto;margin:0 0 25px}.chapter{padding:75px var(--pad)}.filmstrip-sticky{padding:75px 0 45px}.filmstrip-sticky .chapter-copy h2{font-size:7vw}.filmstrip-viewport{overflow-x:auto;padding-bottom:20px;scroll-snap-type:x proximity}.filmstrip-track{transform:none!important;padding-right:var(--pad)}.filmstrip-track .media-piece{scroll-snap-align:center}.filmstrip-track .portrait{width:35vw}.filmstrip-track .landscape{width:75vw}.filmstrip-track .media-piece:nth-child(even){padding-top:0}.filmstrip-foot .label:last-of-type{display:none}.collage-chapter .chapter-media{height:500px}.case-prologue{padding:65px var(--pad)}.case-prologue h2{font-size:7.8vw}.prologue-bottom{gap:35px}.prologue-bottom p{font-size:1rem}.programme-names{gap:0 30px}
}
@media(max-width:600px){
 .showcase .project-frame{min-height:780px;height:100svh;max-height:950px}.showcase .curated-art{top:22%;height:310px}.showcase .frame-top{top:34px}.frame-top .label:last-child{max-width:170px;text-align:right}.logo-ghost{inset:10% -15% 30%;opacity:.13}.showcase .frame-bottom{bottom:35px}.frame-bottom h3{font-size:10vw}.frame-bottom h3 em{display:inline}.frame-bottom .client-logos{margin-bottom:16px}.frame-bottom .client-logos img{height:36px;max-width:85px}.frame-detail{margin-top:20px}.frame-detail p{font-size:.8rem;margin-bottom:18px}.curated-art .card-1{width:38%;left:-8%;top:-8%}.curated-art .card-1.portrait{width:25%;left:-2%;top:-4%}.curated-art .card-2{width:72%;left:16%;top:10%}.curated-art .card-3{width:47%;left:54%;top:57%}.curated-card figcaption{font-size:.42rem;margin-top:4px;padding:0 2px 2px}.curated-card{padding:4px}.curated-art.all-portrait .card-1{width:30%;left:0;top:0}.curated-art.all-portrait .card-2{width:36%;left:30%;top:-7%}.curated-art.all-portrait .card-3{width:30%;left:70%;top:5%}.frame-watermark{font-size:24vw;bottom:33%;right:5%}.case-page main{padding-top:76px}.case-opening{padding:22px 22px 30px}.case-opening-top{gap:12px;padding-bottom:20px}.case-opening-top>.label{display:none}.case-heading{padding:30px 0}.case-heading .client-logos{position:relative;top:auto;right:auto;margin-bottom:24px}.case-heading .client-logos img{height:45px;max-width:100px}.case-heading h1{font-size:14vw;margin:0 0 25px}.case-category{font-size:.53rem;line-height:1.5;display:block}.case-hero-media{margin:0 -12px;transform:none}.case-hero-media>.media-piece .media-window{aspect-ratio:16/10}.case-hero-media .media-window video{object-fit:contain}.case-enter{width:65px;height:65px;right:10px;bottom:10px;font-size:1.7rem}.case-enter span{font-size:.39rem}.case-hero-collage{height:310px}.case-hero-collage .media-piece{width:32%;top:12%}.case-hero-collage .piece-1{left:0}.case-hero-collage .piece-2{left:33%;top:6%}.case-hero-collage .piece-3{left:69%}.case-prologue{padding:55px 22px 65px}.case-prologue h2{font-size:10vw;margin:50px 0 40px}.prologue-bottom{grid-template-columns:1fr;gap:26px}.prologue-bottom ul{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.62rem}.prologue-bottom p{font-size:1rem}.chapter{padding:65px 22px}.chapter-copy h2{font-size:10vw;line-height:1.08;margin:30px 0 25px}.chapter-copy p{font-size:.9rem;line-height:1.65;margin-bottom:35px}.chapter-copy>.label{font-size:.55rem;max-width:320px}.original-title{font-size:1rem}.cinema-chapter .chapter-media{transform:none;clip-path:none}.cinema-chapter .media-window{aspect-ratio:16/9}.duet-chapter .chapter-media{display:block;padding:0}.duet-chapter .media-piece{transform:none}.duet-chapter .piece-2{margin:35px 0 0 15%;width:85%}.media-piece figcaption{font-size:.6rem}.filmstrip-sticky{padding:65px 0 35px}.filmstrip-sticky .chapter-copy h2{font-size:10vw}.filmstrip-sticky .chapter-copy p{font-size:.9rem}.filmstrip-track{gap:16px}.filmstrip-track .portrait{width:64vw;max-width:320px}.filmstrip-track .landscape{width:85vw}.filmstrip-foot{margin-top:15px}.collage-chapter .chapter-media{height:370px;margin:10px -22px 0}.collage-chapter .media-piece{width:37%}.collage-chapter .piece-1{left:-7%;top:0}.collage-chapter .piece-2{left:29%;top:15px}.collage-chapter .piece-3{left:69%;top:25px}.programme-names{grid-template-columns:1fr}.programme-names>div{padding:20px 0}.programme-names strong{font-size:1.15rem}.next-world{padding:55px 22px}.next-world>a{padding:45px 0 30px;gap:20px}.next-world .client-logos img{height:38px;max-width:90px}.next-world h2{font-size:10vw}.next-arrow{width:65px;height:65px;font-size:2rem}.next-world h2 em{display:block}
}
@media(prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation:none}.case-hero-media,.chapter-media,.chapter-media .media-piece{transform:none!important}.filmstrip-track{transform:none!important}.logo-ghost{transform:none!important}.motion-ready .reveal:not(.visible){opacity:1;transform:none}
}