/* Image-led work pass. Keep the agency typography and grain; let films meet. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.chapter{padding-block:0;background:#090909}
.chapter-head{display:block;margin-bottom:0;padding-block:64px 32px}
.chapter-head>div{display:block}
.social-header-title>div{display:block}
.social-gallery{position:relative}
.gallery-controls{display:flex;align-items:center;gap:24px;padding-block:20px;color:#d9dad3;font-size:12px}
.gallery-hint{white-space:nowrap}.hint-touch{display:none}
.gallery-position{font-variant-numeric:tabular-nums;white-space:nowrap;color:#a6a7a1}
.gallery-scrubber{flex:1;min-width:40px;display:flex;align-items:center}
.gallery-range{--progress:0%;appearance:none;width:100%;height:24px;margin:0;cursor:ew-resize;background:transparent;touch-action:pan-y}
.gallery-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#afff41 var(--progress),#ffffff35 var(--progress))}
.gallery-range::-webkit-slider-thumb{appearance:none;width:12px;height:12px;margin-top:-5px;border:2px solid #090909;border-radius:50%;background:#afff41}
.gallery-range::-moz-range-track{height:2px;background:#ffffff35}.gallery-range::-moz-range-progress{height:2px;background:#afff41}
.gallery-range::-moz-range-thumb{width:8px;height:8px;border:2px solid #090909;border-radius:50%;background:#afff41}
.gallery-range:focus-visible{outline:2px solid #afff41;outline-offset:4px}
.gallery-arrows{display:flex;gap:4px}
.gallery-arrows button{width:44px;height:40px;display:grid;place-items:center;border:1px solid #ffffff35;background:transparent;color:#f2f2ed;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.gallery-arrows button:hover:not(:disabled){background:#afff41;border-color:#afff41;color:#090909}
.gallery-arrows button:disabled{opacity:.25;cursor:default}.gallery-arrows svg{width:20px;height:20px}
.project-rail{--rail-height:clamp(420px,78svh,860px);gap:4px;padding:0;scroll-padding-inline:0;scroll-snap-type:none;scrollbar-width:none}
.project-rail::-webkit-scrollbar{display:none}.project-rail.dragging,.project-rail.is-moving{scroll-snap-type:none}
.project-rail:focus-visible{outline:2px solid #afff41;outline-offset:-2px}
.project-card{position:relative;scroll-snap-align:none;flex-shrink:0}
.project-card .media{height:var(--rail-height)}
.project-card figcaption{position:absolute;inset:auto 0 0;display:block;padding:48px 20px 20px;background:linear-gradient(transparent,#0009);pointer-events:none}
.project-card figcaption h3{font-size:14px;font-weight:400;line-height:1.4}
.project-card:focus-visible{outline:2px solid #afff41;outline-offset:-3px}
.film-pair,.tv-pair,.ooh-support{width:100%;max-width:none;gap:4px;margin:0}
.film-pair{grid-template-columns:minmax(0,256fr) minmax(0,81fr);align-items:start}
.film-action .media{max-height:none;height:auto;aspect-ratio:16/9}
.film-breath{display:block;width:100%;max-width:none;justify-self:stretch}
.film-breath .media{height:auto;aspect-ratio:9/16}
.screen,.film-pair figure,.tv-pair figure,.ooh-support figure{position:relative}
.screen .media{height:auto;aspect-ratio:16/9}
.film-pair video,.tv-pair video,.ooh-support video,.screen video{object-fit:contain}
.chapter .screen figcaption,.chapter .film-pair figcaption,.chapter .tv-pair figcaption,.chapter .ooh-support figcaption{position:absolute;inset:auto 0 0;display:block;width:100%;max-width:none;margin:0;padding:48px 20px 20px;background:linear-gradient(transparent,#0009);pointer-events:none}
.chapter figcaption h3{font-size:14px;line-height:1.4;font-weight:400}
.chapter .screen figcaption{padding-inline:max(24px,calc((100% - 1200px)/2))}
.tv-pair{margin-top:4px;grid-template-columns:1fr 1fr}
.tatcha-final-screen{margin-bottom:4px}
.ooh-support{grid-template-columns:minmax(0,256fr) minmax(0,81fr) minmax(0,256fr);align-items:start}
.murad-support{display:block}
.ooh-support .media{height:auto}
.ooh-support .reference{display:block;position:relative;min-width:0;width:100%;max-width:none;margin:0;padding:0;border:0}
.reference-player{width:100%;aspect-ratio:16/9}
.reference-player iframe{display:block;width:100%;height:100%;aspect-ratio:16/9;border:0}
.ooh-support .reference-credit{position:absolute;inset:0 0 auto;margin:0;padding:16px 20px 40px;max-width:none;background:linear-gradient(#000a,transparent);color:#fff;font-size:12px;line-height:1.4;pointer-events:none}
.reference-credit a{pointer-events:auto;text-decoration:none}.reference-credit a:hover{text-decoration:underline}
@media(hover:none),(pointer:coarse){.hint-desktop{display:none}.hint-touch{display:inline}}
@media(max-width:800px){
 .chapter-head{padding-block:48px 24px}.gallery-controls{gap:16px;padding-block:16px}
 .project-rail{--rail-height:72svh}
 .chapter .film-pair figcaption,.chapter .tv-pair figcaption,.chapter .ooh-support figcaption{padding:40px 12px 12px}
 .ooh-support .reference-credit{padding:12px 12px 32px;font-size:11px}
}
@media(max-width:520px){
 .social-header-track{height:96svh}.social-header-pin{height:64svh}
 .social-header-title{top:5svh}
 .gallery-controls{gap:12px;font-size:11px}.gallery-hint{font-size:11px}
 .gallery-arrows{gap:0}.gallery-arrows button{width:36px;height:36px}
 .gallery-position{font-size:10px}.gallery-range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-6px}
 .project-rail{--rail-height:min(72svh,calc(82vw * 16/9))}
 .project-card figcaption{padding:40px 16px 16px}.project-card figcaption h3{font-size:13px}
 .film-pair{grid-template-columns:1fr}
 .chapter .film-pair figcaption{padding:40px 16px 16px}.film-pair figcaption h3{font-size:13px}
 .tv-pair{grid-template-columns:1fr;gap:4px}
 .ooh-support{grid-template-columns:1fr;gap:4px}
 .murad-support .media{width:100%;aspect-ratio:9/16}
 .chapter .screen figcaption,.chapter .ooh-support figcaption{padding:40px 16px 16px}
 .ooh-support .reference-credit{padding:12px 16px 32px}
}
@media(prefers-reduced-motion:reduce){
 .social-header-track,.social-header-pin{height:auto}
 .gallery-arrows button{transition:none}
}

/* Bare project imagery; retain only an external credit below the reference. */
.social-header-pin .comparison-frame:after{display:none}
.ooh-support .reference-credit{position:static;padding:8px 12px;background:none;color:#a6a7a1;font-size:11px}
.reference-player{position:relative;overflow:hidden;background:#090909}
.reference-player .reference-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.reference-player iframe{position:relative;opacity:0;pointer-events:none}
.reference-playing iframe{opacity:1}
/* Allow for glyph bearings inside each rolling mask. */
.move-letter{padding-inline:.08em;margin-inline:-.08em}

/* Social opens on the work itself. No scale or title fade on scroll. */
.social-header-track{height:auto}
.social-header-pin{position:relative;top:0;height:auto;aspect-ratio:16/9;padding:0;overflow:clip}
.social-header-pin .render-comparison{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;transform:none;transform-origin:center}
.social-header-pin .comparison-frame{width:100%;height:100%;aspect-ratio:auto}
.social-header-pin .comparison-canvas{object-fit:fill}
.social-header-title{position:absolute;inset:7svh 0 auto;opacity:1;transform:none;z-index:4;text-shadow:0 2px 24px #0006}
.social-header-title h2{font-size:clamp(52px,7.3vw,104px);line-height:.98;letter-spacing:-.055em;color:#fff}
.social-header-pin:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(125deg,#0008,transparent 52%)}
.social-header-pin .comparison-range{z-index:3}
.social-gallery{display:flex;flex-direction:column;overflow:hidden}
.social-gallery .project-rail{order:1;width:100%;padding-bottom:0}
.gallery-controls{order:2;width:100%;padding-block:15px;gap:24px}
.gallery-arrows button{border:0;width:34px;height:30px}
.gallery-range::-webkit-slider-thumb{width:24px;height:4px;margin-top:-1px;border:0;border-radius:0}
.gallery-range::-moz-range-thumb{width:24px;height:4px;border:0;border-radius:0}
.gallery-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:72px;height:72px;margin:-36px 0 0 -36px;border:1px solid #ffffff80;border-radius:50%;background:#09090980;backdrop-filter:blur(5px);color:white;font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:0;will-change:transform}
.gallery-cursor-arrows{font-size:26px;line-height:1}
@media(hover:hover) and (pointer:fine){.has-pointer .project-rail,.has-pointer .project-rail.dragging{cursor:none}}
@media(max-width:700px){
 .social-header-track{height:auto}
 .social-header-pin{position:relative;height:auto}
 .social-header-title{inset:20px 0 auto}
 .social-header-title h2{font-size:clamp(30px,7.7vw,48px)}
 .gallery-controls{gap:12px;padding-block:12px}
}
@media(prefers-reduced-motion:reduce){
 .social-header-track{height:auto}
 .social-header-pin{position:relative;height:auto;padding:0;overflow:clip}
 .social-header-title{position:absolute;padding-bottom:0}
 .social-header-pin .render-comparison{transform:none!important}
 .gallery-cursor{display:none}
}
.motion-paused .gallery-cursor{display:none}

/* Real screen footage needs its full landscape context. */
.ooh-support{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"murad murad" "location reference";align-items:start}
.ooh-support .location-support{grid-area:location}
.ooh-support .murad-support{grid-area:murad}
.ooh-support .reference{grid-area:reference}
.ooh-support .murad-support .media{width:100%;height:auto;aspect-ratio:16/9}
@media(max-width:700px){.ooh-support{grid-template-columns:1fr;grid-template-areas:"murad" "location" "reference"}}

/* Small pauses between chapters; keep each project composition connected. */
.social{padding-top:clamp(24px,2.5vw,40px)}
.chapter-head{padding-block:80px 40px}
@media(max-width:800px){.chapter-head{padding-block:56px 28px}}
.title-pointer-word{display:inline-block;white-space:nowrap}
.title-pointer-slot,.title-pointer-glyph{display:inline-block}
/* Entrance masks retire after their reveal; reactive glyphs need free edges. */
.entrance-complete .word-mask{overflow:visible}
.move-cell{display:block;overflow:visible}
.move-running .move-cell,.move-running .move-reel{will-change:transform}
.motion-paused .move-cell{transform:none!important}
@media(prefers-reduced-motion:reduce){.move-cell{transform:none!important}}

/* Authored transparent CIRCLE2 artwork, sized outside the glyph bounds. */
.marked-word .idea-image{inset:-12% -8%;width:116%;height:124%;pointer-events:none}
.idea-image>img,.idea-image>canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.idea-image.shape-ready>img{visibility:hidden}

/* A restrained halo follows the composited letters, never their old positions. */
.hero-ae-canvas{filter:drop-shadow(0 0 7px #ffffff20)}

/* Wait for the first authored frame instead of flashing the completed title. */
.hero-ae-pending .hero-ae-poster{opacity:0}