/* A continuous sequence: light → identity → moving image. */
:root{--cinema-border:rgba(243,240,233,.17)}
.hero{min-height:105svh;text-align:left;place-items:center start}
.hero-copy{text-align:left;width:100%}
.hero h1{margin:1.8rem 0 0;max-width:11ch;font-size:clamp(4rem,9.2vw,9.5rem);font-weight:500;letter-spacing:-.065em}
.hero h1 em{color:var(--white)}
.hero .kicker{color:#c6b9a9;font-weight:500;letter-spacing:.2em}
.hero-bg{background:radial-gradient(ellipse at 92% 46%,#a532125c,transparent 46%),radial-gradient(ellipse at 75% 4%,#77472c38,transparent 48%),#080808}
.hero-bg:after{inset:-30%;background:linear-gradient(119deg,transparent 52%,#ffad701b 56%,#fff2d321 56.3%,transparent 57%,transparent 60%,#ff6f2010 63%,transparent 68%);transform:rotate(-7deg)}
.hero-mark{right:-16%;width:min(86vw,88rem);opacity:.13;filter:sepia(1) saturate(2);transform:perspective(900px) rotateY(-32deg) rotateZ(-18deg) scale(var(--mark-scale,1));mix-blend-mode:screen}
.hero::after{opacity:.12;mask-image:linear-gradient(90deg,transparent 55%,black)}
.hero-foot{font-size:.875rem;font-weight:500;letter-spacing:.08em}
.nav{mix-blend-mode:normal;background:linear-gradient(#080808e8,transparent);padding-bottom:2.2rem}
.nav a{font-weight:500}.nav-logo{width:4.5rem}
.ink-split{text-shadow:1px 0 #ff541433,-1px 0 #5ecbdd22}
.vision{padding-block:clamp(6rem,10vw,10rem)}
.vision-text{line-height:1.04;font-weight:500}
.depth-story{height:180svh;--depth-progress:0}
.depth-stage{perspective:1000px;background:#080808}
.depth-stage:before{background:radial-gradient(ellipse at 62% 34%,#ad4b2936,transparent 48%),linear-gradient(145deg,transparent 35%,#ffd0a907 47%,transparent 49%)}
.depth-stage:after{opacity:.16;mask-image:linear-gradient(120deg,transparent 40%,black)}
.depth-guide{inset:9% 3%;transform:none;border-width:1px 0;border-color:#f3f0e916;box-shadow:none}
.depth-word{position:absolute;left:-1%;top:19%;font-size:clamp(6rem,23vw,26rem);font-weight:700;line-height:1.1;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px #f3f0e91b;pointer-events:none}
.logo-sculpture{z-index:2;will-change:transform;width:min(53vw,720px)}
.logo-sculpture i{background:linear-gradient(118deg,#f0b782,#8c2b0b 38%,#461705 64%,#ff8c45);transform:translateZ(calc(var(--slice) * 1.6px))}
.logo-sculpture i:last-child{background:linear-gradient(125deg,#ffffec 0%,#e9c7a4 19%,#ff6522 32%,#75270d 47%,#ffe3c2 49%,#fbf5e9 52%,#ef763f 70%,#9e300e 85%,#f7a773)}
.depth-caption{bottom:11vh;max-width:44rem;z-index:4}
.depth-caption .kicker{font-weight:500;color:#e9a483}
.depth-caption h2{font-weight:500;font-size:clamp(2.5rem,5.6vw,6rem);line-height:1.03;text-shadow:0 3px 35px #000}
.depth-tag{padding:.7rem .9rem;font-size:.875rem;font-weight:500;border:1px solid #fff2;background:#080808aa;box-shadow:none;letter-spacing:.08em;backdrop-filter:blur(16px);z-index:3}
.tag-one{top:14%;left:7%}.tag-three{top:32%;left:11%;color:#edab8e;background:#080808aa}.tag-two{top:68%;right:7%}
.depth-tag.active-beat{border-color:#ff8b5a99;background:#33170cdd;color:#fff0e3}
.scene-fragment{position:absolute;aspect-ratio:16/9;width:24vw;max-width:350px;overflow:hidden;border:1px solid #ffffff30;box-shadow:0 25px 70px #0009;will-change:transform;z-index:1}
.scene-fragment img{width:100%;height:100%;object-fit:cover;filter:saturate(.45) brightness(.6)}
.fragment-one{top:16%;right:-4%;transform:rotate(-12deg)}.fragment-two{top:47%;left:-7%;transform:rotate(9deg)}
.depth-meter{position:absolute;bottom:5%;left:var(--pad);right:var(--pad);height:1px;background:#ffffff20}
.depth-meter i{display:block;width:100%;height:1px;background:var(--orange);transform:scaleX(var(--depth-progress));transform-origin:left}
.cinema-story{height:145svh}
.cinema-frame{aspect-ratio:2.1;border:0;box-shadow:0 0 100px #d655151a;overflow:hidden;isolation:isolate}
.transition-still{width:100%;height:100%;object-fit:cover;filter:brightness(.38) saturate(.6)}
.cinema-frame:before{inset:0;width:auto;height:auto;border:0;background:linear-gradient(90deg,#0008,transparent,#0008);z-index:1}
.cinema-frame:after{display:none}.cinema-copy h2{font-weight:500;line-height:1.02}.cinema-copy .kicker{font-weight:500}
.work{position:relative;padding-bottom:7rem;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#21171088,transparent 60%),#080808;scroll-margin-top:4rem}
.work-title{padding:5rem var(--pad) 3rem;align-items:flex-end;flex-wrap:wrap}
.work-title .display{font-weight:500;font-size:clamp(4rem,9vw,9rem)}
.work-title .section-id{font-weight:500;letter-spacing:.12em;color:#bfb5aa}
.reel-total{color:#b8afa4;font-size:.875rem;letter-spacing:.13em;margin-bottom:.5rem}
.theater{position:relative;width:calc(100% - 2 * var(--pad));max-width:1500px;margin:0 auto;isolation:isolate}
.screen-halo{position:absolute;inset:8% -3% 12%;background-size:cover;background-position:center;filter:blur(65px);opacity:.2;z-index:-1;pointer-events:none}
.cinema-screen{position:relative;aspect-ratio:16/9;background:#020202;overflow:hidden;border:1px solid var(--cinema-border);box-shadow:0 35px 70px #0009;scroll-margin-top:7rem}
.screen-poster{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:filter .7s,transform 1.5s var(--ease)}
.cinema-screen:has(.screen-play):hover .screen-poster{filter:brightness(.86);transform:scale(1.015)}
.cinema-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.screen-play{position:absolute;inset:0;width:100%;border:0;background:linear-gradient(transparent 60%,#0008);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;font:500 .875rem Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.play-symbol{display:grid;place-items:center;width:5.5rem;height:5.5rem;padding-left:.2rem;border:1px solid #fff9;border-radius:50%;background:#08080845;backdrop-filter:blur(10px);font-size:1.2rem;transition:background .35s,transform .35s}
.screen-play:hover .play-symbol{background:var(--orange);border-color:var(--orange);transform:scale(1.08)}
.screen-play:focus-visible{outline-offset:-6px}
.screen-caption{position:relative;display:flex;justify-content:space-between;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--cinema-border);font-size:.875rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.6}
.screen-name{max-width:80%;color:#d7d0c5}.screen-count{color:#ab9a88;white-space:nowrap}
.reel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:2.5rem var(--pad) 1.2rem;color:#b8afa4;font-size:.875rem;letter-spacing:.06em}
.reel-toolbar>div{display:flex;gap:.5rem}
.reel-toolbar button{width:44px;height:44px;border:1px solid #ffffff30;background:transparent;color:var(--white);font-size:1.3rem;cursor:pointer;transition:background .3s}
.reel-toolbar button:hover:enabled{background:#ff5414;color:#080808;border-color:#ff5414}.reel-toolbar button:disabled{opacity:.25;cursor:default}
.film-reel{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:1rem var(--pad) 2rem;scrollbar-width:thin;scrollbar-color:#73503a #14110f}
.film-reel{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.reel-card,.screen-play,.reel-toolbar button{touch-action:manipulation}
.reel-card{flex:0 0 30%;min-width:240px;position:relative;padding:0;border:1px solid #ffffff26;background:#080808;color:var(--white);cursor:pointer;text-align:left;scroll-snap-align:start;transition:transform .45s var(--ease),border-color .3s;overflow:hidden;font-family:inherit}
.reel-card img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.6) saturate(.6);transition:filter .5s,transform .8s var(--ease)}
.reel-card:hover img,.reel-card[aria-pressed=true] img{filter:brightness(.92) saturate(.9)}
.reel-card:hover{transform:translateY(-6px)}.reel-card[aria-pressed=true]{border-color:var(--orange)}
.reel-card[aria-pressed=true]:before{content:"";position:absolute;z-index:2;top:0;left:0;width:100%;height:3px;background:var(--orange)}
.reel-label{display:flex;gap:1rem;align-items:baseline;padding:1rem;font-size:.875rem;line-height:1.4;letter-spacing:.04em}.reel-label>span:first-child{color:#c1a48c;font-variant-numeric:tabular-nums}.reel-label>span:last-child{margin-left:auto}
.services .display,.clients .display,.team .display{font-weight:500;line-height:1.04}
.services{padding-block:7rem}.services-head p{max-width:28rem}.team-intro p{max-width:25rem}
.client-grid{border:0;gap:1px;background:#ffffff14}.client{border:0;background:#080808}.client img{opacity:.85}
.team{background:linear-gradient(155deg,#17130f,#0c0c0b 55%)}
.signature h3{line-height:1.06;font-weight:500}.signature h3 span{margin-top:.25em}
.finale{background:radial-gradient(ellipse at 80% 10%,#ff9560,transparent 62%),var(--orange)}
.finale-logo{transform:perspective(800px) rotateY(-30deg) rotateZ(-20deg);bottom:3%;right:-8%;opacity:.12}
.finale h2{font-weight:500;line-height:1.02}
@media(min-width:1600px){.reel-card{flex-basis:24%}}
@media(max-width:800px){
 .hero{min-height:94svh;padding-top:8rem}.hero h1{font-size:clamp(3.5rem,12.7vw,6rem);max-width:11ch}.hero-mark{width:120vw;max-width:none;right:-50%;opacity:.13}.hero .kicker{max-width:22ch;line-height:1.7;font-size:.75rem}
 .nav-logo{width:3.8rem}.nav a{font-size:.75rem}.hero-foot{font-size:.75rem}
 .depth-story{height:160svh}.logo-sculpture{width:76vw}.depth-caption{bottom:12vh}.depth-caption h2{font-size:clamp(2.3rem,9vw,4rem)}.depth-word{top:25%;font-size:24vw}.scene-fragment{width:40vw}.fragment-one{top:19%;right:-13%}.fragment-two{left:-17%;top:44%}.tag-one{top:13%;left:6%}.tag-three{display:block;top:43%;left:4%;font-size:.75rem}.tag-two{top:59%;right:5%;font-size:.75rem}.depth-stage{perspective:850px}
 .cinema-story{height:120svh}.cinema-copy h2{font-size:clamp(3.5rem,14vw,6rem)}
 .work-title{padding-top:4rem;display:flex;gap:1.5rem}.reel-total{font-size:.75rem}.work-title .display{font-size:clamp(4rem,16vw,6rem)}
 .theater{width:calc(100% - 1.5rem)}.screen-caption{padding:1rem .25rem;font-size:.75rem;letter-spacing:.03em}.screen-name{max-width:75%}.play-symbol{width:3.8rem;height:3.8rem;font-size:1rem}.screen-play{gap:.6rem;font-size:.75rem}
 .reel-toolbar{padding-top:1.5rem}.film-reel{gap:.8rem}.reel-card{flex-basis:75%;min-width:210px}.reel-label{padding:.9rem;font-size:.8rem}.screen-halo{filter:blur(30px)}
 .work{padding-bottom:4rem}.services{padding-block:5rem}.vision-text{font-size:clamp(3rem,10vw,5rem)}.signature h3{font-size:clamp(2.7rem,10vw,5rem)}
}
@media(max-height:600px) and (orientation:landscape){.depth-caption{bottom:9vh}.depth-caption h2{font-size:2.3rem}.depth-caption .kicker{font-size:.75rem}.depth-tag{padding:.5rem;font-size:.75rem}.tag-three{left:6%;top:30%}.hero{padding-top:7rem}.hero h1{font-size:4rem}.cinema-copy h2{font-size:3.5rem}}
@media(hover:none){.reel-card:hover{transform:none}.screen-play:hover .play-symbol{transform:none}.person:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){
 .depth-story,.cinema-story{height:auto}.depth-stage,.cinema-sticky{min-height:760px;height:100svh;position:relative}
 .logo-sculpture{will-change:auto;transform:translate3d(8vw,-12vh,0) rotateX(-12deg) rotateY(-28deg) rotateZ(-9deg)}
 .scene-fragment{will-change:auto}.screen-poster,.play-symbol,.reel-card,.reel-card img{transition:none}.film-reel{scroll-behavior:auto}.hero-mark{transform:rotate(-15deg)}
 .depth-meter{display:none}.cinema-frame{width:90vw;transform:none}.hero h1{animation:none}
}