/* Shared case-study layout; artwork and copy come from src/case-studies. */
.case-page{overflow-x:clip}.case-page :is(#story,.case-showcase){scroll-margin-top:160px}
@media(max-width:800px){.case-page:has(.has-mobile-menu) .case-breadcrumb{top:110px}}
.case-hero{position:relative;height:100svh;min-height:660px;overflow:hidden;isolation:isolate;background:var(--paper)}
.case-hero-background{position:absolute;inset:-14% -5%;z-index:0;transform:translate3d(0,0,0);transform-origin:center;pointer-events:none;will-change:transform}
.case-hero-background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.case-hero-wash{position:absolute;inset:0;z-index:1;background:rgb(255 255 255 / 50%);pointer-events:none}
.case-hero-content{position:relative;z-index:2;height:100%;color:var(--ink);text-align:center}
.case-breadcrumb{position:absolute;top:160px;font-size:14px;line-height:1.5;text-align:left}.case-breadcrumb a:hover{color:var(--orange)}
.case-title{position:absolute;top:50%;left:0;width:100%;padding-inline:var(--gutter);transform:translateY(-50%);font:600 clamp(84px,10.2vw,164px)/1.06 Sora,sans-serif;letter-spacing:-.065em;text-wrap:balance}
.case-title--long{font-size:clamp(64px,7.5vw,124px)}
.case-hero-copy{position:absolute;bottom:clamp(36px,7svh,88px);left:50%;transform:translateX(-50%);width:min(640px,calc(100% - var(--gutter)*2))}
.case-kicker{font:600 clamp(24px,2.2vw,36px)/1.2 Sora,sans-serif;letter-spacing:-.035em;margin-bottom:16px}.case-description{font-size:18px;line-height:1.65;color:#30333a;text-wrap:pretty}
@media(max-width:800px){.case-hero{min-height:720px}.case-breadcrumb{top:150px;font-size:12px}.case-title{font-size:clamp(64px,15vw,112px)}.case-title--long{font-size:clamp(48px,11.8vw,80px)}.case-hero-copy{bottom:40px}.case-kicker{font-size:24px}.case-description{font-size:16px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.case-hero-background{transform:none!important}}
.art-scene{position:relative;background:#0b0d12;color:var(--paper);overflow:clip;isolation:isolate}
.scene-window{position:relative;height:clamp(600px,51vw,780px);overflow:hidden;background-image:linear-gradient(#ffffff13 1px,transparent 1px),linear-gradient(90deg,#ffffff13 1px,transparent 1px);background-size:32px 32px}
.scene-word{position:absolute;inset:0;display:grid;place-items:center;font:600 clamp(140px,27vw,450px)/1 Sora,sans-serif;letter-spacing:-.09em;color:#ffffff04;-webkit-text-stroke:1px #ffffff0b;user-select:none;pointer-events:none}
.scene-grid{position:absolute;left:3%;top:50%;width:94%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;transform:translateY(-50%)}
.scene-tile{position:relative;display:block;aspect-ratio:1;border-radius:12px;perspective:900px;outline-offset:5px!important;user-select:none;-webkit-user-drag:none}
.scene-tile-visual{position:absolute;inset:0;display:block;border-radius:inherit;background:#22262f;box-shadow:0 18px 30px #0007;pointer-events:none;backface-visibility:hidden}
.scene-tile img{display:block;height:100%;width:100%;object-fit:cover;border-radius:inherit;-webkit-user-drag:none}
.scene-tile-visual::after{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-radius:inherit;transition:border-color .25s,box-shadow .25s}
.scene-tile:focus-visible .scene-tile-visual::after,.scene-tile.is-near .scene-tile-visual::after{border-color:#5067ff;box-shadow:0 0 0 4px #2038e224}
.scene-interactive .scene-grid{left:-5%;width:110%;gap:40px;will-change:transform}
.scene-interactive .scene-tile-visual{will-change:transform}
.case-story{padding-block:128px}.story-columns{display:grid;grid-template-columns:1fr 1fr;gap:96px}.case-page h2{font:600 clamp(36px,4.15vw,68px)/1.12 Sora,sans-serif;letter-spacing:-.04em}.story-copy{font-size:19px;line-height:1.7;color:var(--muted)}.story-copy p+p{margin-top:24px}.case-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:80px;padding-top:40px;border-top:1px solid var(--silver)}.metric-value{font-variant-numeric:tabular-nums;font:600 clamp(42px,5.2vw,80px)/1.15 Sora,sans-serif;letter-spacing:-.06em;color:var(--blue);margin-bottom:22px}.case-metric>p:nth-child(2){font-size:15px;line-height:1.5}
.case-artwork{margin:0;min-width:0}.case-art-link{position:relative;display:block;background:#d5d6d9;border-radius:24px;overflow:hidden}.case-art-link img{display:block;width:100%;height:auto}.art-expand{position:absolute;bottom:20px;right:20px;background:var(--blue);color:white;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font:400 24px Inter,sans-serif;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s,background-color .2s}.case-art-link:is(:hover,:focus-visible) .art-expand{opacity:1;transform:none}.case-art-link:hover .art-expand{background:var(--orange);color:var(--ink)}.case-artwork figcaption{display:flex;justify-content:space-between;gap:20px;padding-top:18px;color:var(--muted)}.case-artwork figcaption>span:last-child{font-size:12px;line-height:1.6;text-align:right;max-width:50%}.case-artwork .eyebrow{font-size:10px;line-height:1.6}
.case-outro{padding-block:88px;background:var(--blue);color:white;max-width:none}.case-back{display:flex;justify-content:space-between;align-items:center;gap:40px;font:600 clamp(40px,7vw,110px)/1.1 Sora,sans-serif;letter-spacing:-.05em}.case-back>span{transition:transform .25s}.case-back:hover>span{transform:translate(8px,-8px)}.case-outro-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #ffffff55;margin-top:72px;padding-top:32px}.case-outro .pill{border:1px solid #ffffff66}.case-footer{display:flex;justify-content:space-between;align-items:center;gap:32px;padding-block:48px}.case-footer>span{color:var(--muted);font-size:12px}
.art-dialog{padding:20px 28px;border:1px solid #ffffff35;background:#111318;color:white;border-radius:20px;width:min(1500px,96vw);max-width:none;max-height:94svh;overflow:auto}.art-dialog::backdrop{background:#08090dec;backdrop-filter:blur(14px)}.dialog-toolbar,.dialog-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:48px}.dialog-toolbar p{font:500 16px/1.4 Inter,sans-serif}.art-dialog button{border:1px solid #ffffff38;background:transparent;color:white;border-radius:999px;padding:12px 20px;cursor:pointer}.art-dialog button:hover{background:var(--blue);border-color:var(--blue)}.dialog-close{display:flex;gap:20px;align-items:center}.dialog-close span{font-size:20px}.dialog-image{width:100%;height:auto;max-height:calc(94svh - 156px);object-fit:contain;margin-block:14px;background:#0b0d12}.dialog-count{color:#bdc3d3}
.client-project{margin-bottom:100px}.client-project-art{display:block;border-radius:28px;overflow:hidden}.client-project-art img{width:100%;height:auto}.client-project-caption{display:flex;justify-content:space-between;gap:40px;margin-top:24px;align-items:end}.client-project h2{font:600 42px/1.2 Sora,sans-serif;letter-spacing:-.04em;margin-top:10px}.client-project h2 span{color:var(--blue);margin-left:20px}.client-project h2 a:hover{color:var(--blue)}.client-project-caption>p{max-width:430px;font-size:18px;line-height:1.6;color:var(--muted)}.collection-section-label{border-top:1px solid var(--silver);padding-top:28px;margin-bottom:40px;color:var(--muted)}
.client-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.client-projects .client-project{margin-bottom:0;min-width:0}.client-projects .client-project-caption{display:block}.client-projects .client-project-caption>p{max-width:none;margin-top:20px}
@media(min-width:801px){.client-projects .client-project h2{font-size:clamp(28px,2.5vw,36px)}}
@media(max-width:800px){.client-projects{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1100px){.story-columns{gap:48px}.scene-grid{gap:16px}.scene-window{height:clamp(510px,56vw,620px)}.case-artwork figcaption{display:block}.case-artwork figcaption>span{display:block}.case-artwork figcaption>span:last-child{max-width:none;text-align:left;margin-top:5px}.case-footer>.eyebrow{display:none}}
@media(max-width:800px){.scene-grid,.scene-interactive .scene-grid{position:relative;top:auto;left:auto;width:auto;margin:12px 24px 32px;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;transform:none!important}.scene-window{height:auto;perspective:none}.scene-word{font-size:48vw}.scene-tile{border-radius:8px}.case-story{padding-block:80px}.story-columns{grid-template-columns:1fr;gap:28px}.case-page h2{font-size:40px}.story-copy{font-size:17px;line-height:1.65}.case-metrics{grid-template-columns:1fr 1fr;gap:36px 24px;margin-top:48px;padding-top:28px}.metric-value{font-size:48px;margin-bottom:12px}.case-metric>p:nth-child(2){font-size:13px}.case-art-link{border-radius:16px}.art-expand{opacity:1;transform:none;width:36px;height:36px;font-size:20px;right:12px;bottom:12px}.case-artwork figcaption{padding-top:14px}.case-outro{padding-block:64px}.case-back{font-size:48px;gap:24px}.case-outro-bottom{margin-top:40px;align-items:start;flex-direction:column}.case-footer{flex-wrap:wrap;padding-block:36px}.case-footer .brand{width:100%}.art-dialog{padding:12px;border-radius:12px}.dialog-toolbar{gap:12px}.dialog-toolbar p{font-size:13px}.art-dialog button{font-size:12px;padding:10px 14px}.dialog-bottom{gap:12px}.dialog-count{font-size:10px}.client-project-caption{display:block}.client-project-caption>p{margin-top:20px;font-size:16px}.client-project h2{font-size:36px}.client-project{margin-bottom:64px}.client-project-art{border-radius:20px}}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.scene-grid,.scene-interactive .scene-grid{position:relative;top:auto;left:auto;width:94%;margin:40px auto;transform:none!important}.scene-window{height:auto}.scene-tile-visual{transform:none!important}.scene-grid,.scene-tile-visual{will-change:auto!important}.art-expand,.case-back>span{transition:none}}

.scene-colour-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene-grid{z-index:1}.art-scene{padding-block:24px}.scene-tile img{object-position:center}
.case-showcase{padding-block:12px 80px}
.showcase-heading{border-top:1px solid var(--silver);padding-top:40px;display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end;margin-bottom:28px}
.showcase-intro>p{color:var(--muted);font-size:18px;line-height:1.7}
.showcase-stage{position:relative}.showcase-layout{display:grid;gap:72px}.concept-slide{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:clamp(40px,4.4vw,80px);align-items:center;padding-block:24px;min-width:0}.concept-slide .case-artwork{perspective:1300px}.concept-copy{min-width:0;min-height:260px}.concept-copy h3{font:600 clamp(28px,2.7vw,44px)/1.18 Sora,sans-serif;letter-spacing:-.04em;margin-bottom:24px}.concept-copy>p:last-child{font-size:17px;line-height:1.75;color:var(--muted);max-width:380px}
.showcase-layout .case-art-link{transform:translate3d(var(--float-x,0px),var(--float-y,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;box-shadow:0 12px 26px -22px #18244866;transform-origin:center}.showcase-layout .case-art-link.is-floating{box-shadow:0 34px 46px -25px #18244866;will-change:transform}
.showcase-navigation{display:none}.showcase-position{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.showcase-pinned .showcase-stage{height:100svh;padding-top:var(--showcase-top,154px);padding-bottom:28px;display:flex;flex-direction:column;gap:16px;overflow:hidden;background:var(--paper)}
.showcase-pinned .showcase-layout{position:relative;flex:1;min-height:0;display:block;isolation:isolate}
.showcase-pinned .concept-slide{position:absolute;inset:0;will-change:transform;align-content:center;padding-block:8px}
.showcase-pinned .case-art-link{width:100%;max-width:calc(var(--concept-max-height,500px) * 1.775)}


.showcase-pinned .showcase-navigation{display:flex;justify-content:flex-end;align-items:center;gap:24px;color:var(--muted)}.showcase-navigation>div{display:flex;gap:10px}.showcase-navigation button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #c9cdd8;border-radius:50%;background:transparent;color:var(--ink);font-size:21px;cursor:pointer;transition:background .2s,border-color .2s}.showcase-navigation button:hover:enabled{background:var(--blue);border-color:var(--blue);color:white}.showcase-navigation button:disabled{opacity:.3;cursor:default}
@media(max-width:1100px){.showcase-heading{gap:40px}.concept-slide{gap:32px;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}.concept-copy h3{font-size:28px}.concept-copy>p:last-child{font-size:15px}}
@media(max-width:800px){.art-scene{padding-block:12px}.showcase-heading{grid-template-columns:1fr;gap:28px;margin-bottom:32px;padding-top:28px}.showcase-intro>p{font-size:17px}.showcase-layout{gap:48px}.concept-slide{grid-template-columns:1fr;gap:28px;padding-block:0}.concept-copy{min-height:0}.concept-copy h3{font-size:32px;margin-bottom:18px}.concept-copy>p:last-child{font-size:16px;max-width:none}.case-showcase{padding-bottom:64px}}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.showcase-layout .case-art-link{transform:none!important;transition:none;will-change:auto}.scene-colour-grid{display:none}}

/* Keep the introduction in the same pinned stage as the moving artwork. */
.showcase-pinned .showcase-heading{flex:none;padding-top:20px;margin-bottom:0;gap:clamp(32px,4vw,72px)}
.showcase-pinned .showcase-heading h2{font-size:clamp(28px,3vw,48px);line-height:1.12}
.showcase-pinned .showcase-intro>p{font-size:clamp(14px,1.1vw,17px);line-height:1.55}
.showcase-pinned .concept-copy{min-height:0}
.showcase-pinned .concept-copy h3{font-size:clamp(24px,2.4vw,40px);margin-bottom:18px}
.showcase-pinned .showcase-navigation{flex:none}
.metric-value{font-variant-numeric:tabular-nums}
.metric-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.metric-reels{display:inline-flex;align-items:baseline;line-height:1.15;letter-spacing:-.06em}
.metric-digit{display:inline-block;width:.65em;height:1.15em;overflow:hidden;vertical-align:bottom;letter-spacing:0}
.metric-reel{display:flex;flex-direction:column;will-change:transform}
.metric-reel>span{display:block;flex:0 0 1.15em;height:1.15em;text-align:center;line-height:1.15}

/* Gate: full-width artwork with a title/copy row underneath. */
.showcase-wide .concept-slide{grid-template-columns:minmax(0,1fr);gap:24px;align-content:center}
.showcase-wide .concept-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);min-height:0;align-items:start;text-align:left}
.showcase-wide .concept-copy h3{margin:0;font-size:clamp(26px,2.3vw,38px)}
.showcase-wide .concept-copy>p:last-child{max-width:none;font-size:16px;line-height:1.65}
.showcase-wide .case-art-link{width:100%;max-width:none;aspect-ratio:16/9}
.showcase-wide .case-art-link img{width:100%;height:100%;object-fit:contain}
.showcase-wide.showcase-pinned :is(.showcase-heading,.showcase-layout,.showcase-navigation){width:var(--showcase-width,100%);margin-inline:auto}
.showcase-wide.showcase-pinned .showcase-heading{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}
.showcase-wide.showcase-pinned .showcase-heading h2{font-size:clamp(26px,2.3vw,36px)}
.showcase-wide.showcase-pinned .showcase-intro>p{font-size:14px;line-height:1.55}
.showcase-wide.showcase-pinned .concept-slide{gap:24px;align-content:center}
.case-next-label{font-size:14px;line-height:1.5;margin-bottom:24px}
@media(max-width:800px){.showcase-wide .concept-copy{grid-template-columns:1fr;gap:16px}.showcase-wide .concept-copy h3{font-size:28px}.showcase-wide .concept-slide{gap:22px}}

/* Ms Khor: three pages per website direction, with full designs in the viewer. */
.case-ms-khor-studio .case-hero-background{inset:-2% -5% -14%}
.case-ms-khor-studio .case-hero-background img{object-position:77% center}
.case-ms-khor-studio .scene-grid{width:min(1280px,90%);left:max(5%,calc((100% - 1280px)/2));grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.case-ms-khor-studio .scene-tile{aspect-ratio:16/10}
.case-ms-khor-studio .scene-tile img{object-position:center top}
@media(max-width:800px){.case-ms-khor-studio .scene-grid{left:auto;width:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.case-ms-khor-studio .case-hero-background img{object-position:80% center}}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.case-ms-khor-studio .scene-grid{left:auto;width:min(1280px,90%);margin:40px auto}}

/* Client artwork grids reuse Ms Khor's contained interaction and image viewer. */
.art-scene--editorial .scene-grid{width:min(1280px,86%);left:max(7%,calc((100% - 1280px)/2));grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.art-scene--editorial .scene-tile{aspect-ratio:16/10}
.art-scene--editorial .scene-tile-visual{background:#f0f0f2;overflow:hidden}
.art-scene--editorial .scene-tile img{object-fit:contain}
.art-scene--editorial .scene-tile--page img{object-fit:cover;object-position:center top}
.art-scene--four .scene-grid{width:min(960px,78%);left:max(11%,calc((100% - 960px)/2));grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:801px){.art-scene--editorial .scene-window{height:clamp(600px,58vw,820px)}}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.art-scene--editorial .scene-grid{position:relative;left:auto;top:auto;width:min(1280px,86%);margin:48px auto;transform:none!important}.art-scene--editorial .scene-window{height:auto;min-height:360px}}
@media(max-width:800px){.art-scene--editorial .scene-grid{left:auto;width:auto;margin:24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.art-scene--editorial .scene-window{height:auto;min-height:0}.art-scene--editorial .scene-tile:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 6px);justify-self:center}}