*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#10100f;color:#f5f1eb;font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}::selection{background:#f08039;color:#111}.skip{position:absolute;left:-9999px;top:10px;background:#fff;color:#111;padding:12px;z-index:99}.skip:focus{left:10px}.nav{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(22px,5vw,88px);gap:25px}.brand{display:flex;align-items:center;gap:10px;font:800 25px 'Manrope',sans-serif;letter-spacing:-1.6px}.brand img{width:34px;height:34px;object-fit:contain}.brand-dot{color:#ed793d}.nav nav{display:flex;gap:36px;padding:12px 24px;border:1px solid #ffffff20;border-radius:40px;background:#ffffff08;backdrop-filter:blur(18px)}.nav nav a,.nav-link{font-size:12px;font-weight:600;letter-spacing:.03em}.nav nav a:hover,.nav-link:hover{color:#ff9b5d}.nav-link span{color:#ef8243;margin-left:6px}.hero{height:min(920px,100svh);min-height:660px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 85% 53%,#51240f 0%,#221810 28%,#10100f 64%)}.hero-grain{position:absolute;inset:0;z-index:-1;opacity:.26;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}.hero-orbit{position:absolute;border:1px solid #ed8c4938;border-radius:50%;pointer-events:none;transform:rotate(-29deg);z-index:-1}.orbit-a{width:68vw;height:68vw;max-width:1100px;max-height:1100px;right:-15%;top:-15%;box-shadow:inset 0 0 90px #ef6e1815,0 0 70px #ff6a1010}.orbit-b{width:48vw;height:48vw;max-width:760px;max-height:760px;right:-5%;top:8%;border-color:#ffb57928;animation:orbit 20s ease-in-out infinite alternate}.hero-inner{position:relative;z-index:2;padding:clamp(190px,25vh,270px) clamp(22px,8vw,150px) 90px}.eyebrow,.section-top,.project-index,.art-caption,.hero-bottom,.footer-top{font-size:10px;font-weight:700;letter-spacing:.19em}.eyebrow{display:flex;align-items:center;gap:11px;color:#f1c5a8}.eyebrow-right{color:#a18d80;margin-left:22px}.live-dot{height:7px;width:7px;background:#f28b4e;border-radius:50%;box-shadow:0 0 18px #ff8d46}.hero h1{font:800 clamp(70px,10.7vw,176px)/.93 'Manrope',sans-serif;letter-spacing:-.092em;margin:27px 0 26px;max-width:1200px}.outline{color:transparent;-webkit-text-stroke:1.5px #f4e6d8}.hero-lede{font-size:clamp(15px,1.4vw,20px);line-height:1.6;max-width:470px;color:#c5b8ae}.hero-actions{display:flex;align-items:center;gap:32px;margin-top:34px}.primary{display:inline-flex;align-items:center;gap:35px;background:#f1e9df;color:#171411;border-radius:100px;padding:17px 19px 17px 26px;font-weight:700;font-size:13px;transition:transform .3s,background .3s}.primary:hover{transform:translateY(-4px);background:#ffad77}.primary span{font-size:20px}.hero-side{font-size:11px;line-height:1.7;color:#9c8b80}.hero-bottom{position:absolute;bottom:36px;left:clamp(22px,5vw,88px);right:clamp(22px,5vw,88px);display:flex;justify-content:space-between;color:#c6aa97}.hero-mark{position:absolute;right:-3%;bottom:-18%;font:800 min(48vw,740px)/1 'Manrope',sans-serif;color:#ffffff04;pointer-events:none}.hero-mark span{font-size:.35em;color:#ed78351b}.intro{padding:100px clamp(22px,8vw,150px) 110px;background:#eeeae4;color:#171716}.section-top{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #2225;padding-top:17px}.intro-row{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-top:75px}.intro h2{font:800 clamp(56px,8vw,118px)/.97 'Manrope',sans-serif;letter-spacing:-.085em;margin:0}.intro h2 em,.manifesto h2 em,footer h2 em{font-weight:500;font-family:Georgia,serif}.intro p{max-width:290px;font-size:15px;line-height:1.7;color:#5c5a56}.project{display:grid;grid-template-columns:45% 55%;min-height:760px;overflow:hidden}.project-content{padding:110px clamp(26px,6vw,110px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.project-index{opacity:.65;margin-bottom:42px}.project-name{display:flex;align-items:center;gap:13px;font-size:16px;font-weight:700}.project-name img{width:48px;height:48px;object-fit:cover;border-radius:12px;box-shadow:0 12px 30px #0003}.project h2{font:800 clamp(49px,5.6vw,90px)/1.04 'Manrope',sans-serif;letter-spacing:-.075em;margin:34px 0 20px}.project h2 i{font-family:Georgia,serif;font-weight:400}.project-content>p{font-size:15px;line-height:1.75;max-width:390px;opacity:.75}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 45px}.chips span{font-size:11px;border:1px solid currentColor;border-radius:30px;padding:9px 13px;opacity:.72}.project-cta{border-bottom:1px solid currentColor;padding-bottom:13px;font-size:13px;font-weight:700;display:flex;justify-content:space-between;gap:45px}.project-cta:hover{opacity:.6}.project-cta span{font-size:18px}.twidddle{background:#e6d9da;color:#302327}.subx{background:#161718;color:#f2f1ec}.prism{background:#e5e7e0;color:#212a25}.project-art{min-height:760px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;overflow:hidden}.art-twidddle{background:radial-gradient(circle at 50% 55%,#efb3c6,#c57e9d 65%,#a45e7f)}.art-subx{background:radial-gradient(circle at 50% 55%,#5b412b,#2c2b29 64%,#202121)}.art-prism{background:radial-gradient(circle at 45% 50%,#c0c9a5,#91a78d 65%,#718976)}.halo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;border:1px solid #fff6;box-shadow:0 0 0 80px #ffffff0c,0 0 0 160px #ffffff07}.phone{position:absolute;width:clamp(180px,22vw,310px);aspect-ratio:942/2048;padding:9px;border:2px solid #343333;border-radius:clamp(26px,3vw,43px);background:#171717;box-shadow:0 35px 65px #0005,0 6px 12px #0004;overflow:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.phone img{height:100%;width:100%;object-fit:cover;border-radius:clamp(18px,2.3vw,34px)}.phone-back{transform:translate(36%,-5%) rotate(14deg) scale(.85);opacity:.92}.phone-front{transform:translate(-29%,5%) rotate(-9deg)}.project-art:hover .phone-front{transform:translate(-32%,1%) rotate(-5deg)}.project-art:hover .phone-back{transform:translate(39%,-8%) rotate(10deg) scale(.85)}.art-caption{position:absolute;bottom:32px;left:34px;color:#fff9}.manifesto{padding:105px clamp(22px,8vw,150px) 115px;background:#c86e43;color:#231812}.manifesto-kicker{font-size:15px;margin:85px 0 30px}.manifesto h2{font:800 clamp(50px,7vw,115px)/1.07 'Manrope',sans-serif;letter-spacing:-.075em;margin:0;max-width:1400px}.manifesto-foot{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:75px}.manifesto-foot p{max-width:430px;font-size:15px;line-height:1.8}.manifesto-foot a{font-weight:700;border-bottom:1px solid;padding-bottom:12px;font-size:13px}footer{background:#121211;padding:85px clamp(22px,8vw,150px) 40px}.footer-top{display:flex;justify-content:space-between;border-top:1px solid #ffffff30;padding-top:20px;color:#b4a8a0}footer h2{font:800 clamp(65px,10vw,160px)/.97 'Manrope',sans-serif;letter-spacing:-.085em;margin:90px 0 110px}.footer-bottom{border-top:1px solid #ffffff30;padding-top:25px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:#a99c91}.footer-bottom .brand{color:#fff}.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}@keyframes orbit{to{transform:rotate(10deg) scale(1.08)}}@media(max-width:950px){.nav nav{gap:18px}.nav-link{display:none}.project{grid-template-columns:1fr}.project-content{min-height:590px;padding:85px 7vw}.project-art{min-height:680px}.phone{width:260px}.intro-row{align-items:start;flex-direction:column;gap:20px}.intro p{max-width:460px}.hero h1{font-size:clamp(65px,11vw,110px)}}@media(max-width:600px){.nav{padding:20px}.nav nav{gap:14px;padding:10px 14px}.nav nav a{font-size:10px}.brand{font-size:20px}.brand img{width:28px;height:28px}.hero{min-height:700px;height:100svh}.hero-inner{padding:210px 23px 80px}.hero h1{font-size:clamp(56px,13vw,82px);letter-spacing:-.09em}.eyebrow-right{display:none}.hero-lede{font-size:15px}.hero-side{display:none}.hero-bottom{font-size:8px}.intro{padding:80px 23px}.intro h2{font-size:60px}.project-content{padding:80px 26px;min-height:570px}.project h2{font-size:60px}.project-art{min-height:550px}.phone{width:205px}.art-caption{font-size:8px;left:18px}.manifesto{padding:80px 23px}.manifesto h2{font-size:52px}.manifesto-foot{flex-direction:column;align-items:start}.section-top{font-size:8px}footer{padding:80px 23px 35px}footer h2{font-size:70px}.footer-bottom{flex-wrap:wrap}.footer-bottom .brand{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
/* Cinematic direction — progressive enhancement over the original studio concept. */
:root{--scroll-progress:0;--hero-shift:0px;--beam-shift:0px}
body{overflow-x:hidden}
.nav{position:absolute;transition:background .4s ease}
.hero{background:radial-gradient(ellipse at 80% 48%,#7b3919 0%,#3a2017 21%,#181513 46%,#0b0c0c 76%)}
.hero:before{content:"";position:absolute;inset:-25%;z-index:-1;background:conic-gradient(from 235deg at 74% 52%,transparent 0deg,#f287421b 35deg,transparent 80deg,#f8b16e18 142deg,transparent 200deg);animation:lightSweep 19s ease-in-out infinite alternate;pointer-events:none}
.cinema-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#0a0b0b5c,transparent 74%),radial-gradient(ellipse at 50% 50%,transparent 30%,#0506069c 100%)}
.cinema-beam{position:absolute;right:-10%;top:-50%;width:65%;height:190%;z-index:0;opacity:.75;transform:translate3d(0,var(--beam-shift),0) rotate(19deg);background:linear-gradient(90deg,transparent 25%,#f78b2610 45%,#ffc27828 50%,#f17b2612 53%,transparent 76%);filter:blur(38px);mix-blend-mode:screen;pointer-events:none}
.hero-inner{transform:translate3d(0,var(--hero-shift),0);will-change:transform}
.hero h1{position:relative;text-shadow:0 18px 90px #0008}
.hero h1 .outline{-webkit-text-stroke:1.3px #fff4e5;filter:drop-shadow(0 0 35px #ff873525)}
.hero-orbit{opacity:.68}
.hero-vertical{position:absolute;right:38px;top:43%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.36em;color:#e8b79477;z-index:3}
.hero-bottom{z-index:3}
.scene-transition{background:#10100f;color:#b99b86;min-height:106px;padding:0 clamp(22px,8vw,150px);display:flex;align-items:center;gap:28px;font-size:10px;font-weight:700;letter-spacing:.22em}
.scene-transition div{height:1px;background:linear-gradient(90deg,#e88852,#ffffff18);flex:1}
.intro{position:relative;overflow:hidden}
.intro:after{content:"";position:absolute;width:50vw;height:50vw;border-radius:50%;background:#e6b69a29;filter:blur(110px);right:-23vw;bottom:-30vw;pointer-events:none}
.project{position:relative;min-height:820px}
.project-content{position:relative;z-index:2}
.project-art{min-height:820px;perspective:1300px;--scene-progress:0;--scene-shift:0px;--scene-rotation:0deg}
.project-art:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 100px #00000024,inset 0 0 15px #00000012}
.scene-grid{position:absolute;inset:-30%;opacity:.17;background-image:linear-gradient(#ffffff27 1px,transparent 1px),linear-gradient(90deg,#ffffff27 1px,transparent 1px);background-size:65px 65px;transform:perspective(650px) rotateX(63deg) translateY(27%) scale(1.4);mask-image:linear-gradient(transparent 12%,black 82%);pointer-events:none}
.scene-glow{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#ffffff46 0%,#ffffff0b 35%,transparent 65%);filter:blur(52px);opacity:.8;transform:translate3d(0,var(--scene-shift),0)}
.halo{transform:translate3d(0,calc(var(--scene-shift) * .35),0);transition:box-shadow .4s ease}
.phone{will-change:transform;transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s ease;box-shadow:0 50px 90px #0007,0 12px 22px #0005}
.phone-front{transform:translate(-29%,calc(5% + var(--scene-shift))) rotate(calc(-9deg + var(--scene-rotation)))}
.phone-back{transform:translate(36%,calc(-5% - var(--scene-shift))) rotate(calc(14deg - var(--scene-rotation))) scale(.85)}
.project-art:hover .phone-front{transform:translate(-33%,calc(1% + var(--scene-shift))) rotate(calc(-5deg + var(--scene-rotation)))}
.project-art:hover .phone-back{transform:translate(40%,calc(-8% - var(--scene-shift))) rotate(calc(10deg - var(--scene-rotation))) scale(.85)}
.art-counter{position:absolute;top:34px;right:35px;font-size:11px;font-weight:700;letter-spacing:.25em;color:#fff9}
.project h2{letter-spacing:-.085em}
.project-content:after{content:"";position:absolute;bottom:0;left:clamp(26px,6vw,110px);right:clamp(26px,6vw,110px);height:1px;background:currentColor;opacity:.12}
.project-cta{transition:gap .3s ease,opacity .3s ease}.project-cta:hover{gap:60px}
.manifesto{position:relative;overflow:hidden;background:radial-gradient(ellipse at 90% 10%,#ee9d64,#cb7549 38%,#a94c30 100%)}
.manifesto:before{content:"";position:absolute;width:80vw;height:80vw;border:1px solid #fff4;border-radius:50%;top:-55vw;right:-27vw;box-shadow:0 0 0 10vw #ffffff08,0 0 0 20vw #ffffff05;pointer-events:none}
footer{position:relative;overflow:hidden}footer:after{content:"";position:absolute;right:-25vw;bottom:-70vw;width:90vw;height:90vw;border-radius:50%;background:#ad4e271c;filter:blur(100px);pointer-events:none}
.scroll-progress{position:fixed;z-index:99;top:0;left:0;width:100%;height:2px;pointer-events:none;background:#ff985c;transform-origin:left;transform:scaleX(var(--scroll-progress));box-shadow:0 0 15px #ff985c77}
@keyframes lightSweep{from{transform:rotate(-9deg) translateX(-3%)}to{transform:rotate(12deg) translateX(5%)}}
@media(max-width:950px){.project,.project-art{min-height:0}.project-art{min-height:680px}.hero-vertical{display:none}}
@media(max-width:600px){.hero{background:radial-gradient(ellipse at 90% 39%,#512915 0%,#211712 39%,#0b0c0c 80%)}.scene-transition{min-height:74px;gap:12px;font-size:8px}.project-art{min-height:550px}.scene-grid{background-size:45px 45px}.art-counter{right:20px;top:23px}.cinema-beam{width:100%;right:-40%}}
@media(prefers-reduced-motion:reduce){.hero-inner,.scene-glow,.halo{transform:none!important}.phone-front{transform:translate(-29%,5%) rotate(-9deg)!important}.phone-back{transform:translate(36%,-5%) rotate(14deg) scale(.85)!important}.hero:before{animation:none!important}}

/* V3: cinematic chapter system */
:root{--cursor-x:50vw;--cursor-y:50vh}
body{overflow-x:hidden}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#09090942,transparent 60%),linear-gradient(0deg,#09090970,transparent 22%)}
.hero-inner,.hero-bottom{z-index:3}
.hero-inner{transform:translateY(var(--hero-shift,0px))}
.cursor-aura{position:fixed;z-index:15;inset:0;pointer-events:none;opacity:.35;background:radial-gradient(450px circle at var(--cursor-x) var(--cursor-y),#ffb17112,transparent 70%);mix-blend-mode:screen}
.chapter-rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;pointer-events:none;transition:opacity .35s ease}
body.show-chapters .chapter-rail{opacity:1;pointer-events:auto}
.rail-title{font-size:9px;letter-spacing:.18em;color:#a6a09b;margin-bottom:8px}
.chapter-rail a{display:flex;align-items:center;justify-content:flex-end;gap:13px;min-width:120px;color:#9d9892;font-size:10px;letter-spacing:.08em;transition:color .25s,transform .25s}
.chapter-rail a span{border:1px solid #ffffff40;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font-size:9px;background:#121110b8;backdrop-filter:blur(12px)}
.chapter-rail a b{font-weight:500;display:none}
.chapter-rail a.active{color:#ffad7c;transform:translateX(-3px)}
.chapter-rail a.active span{border-color:#ffad7c;background:#ffad7c22;box-shadow:0 0 20px #ff9e6233}
.chapter-rail a.active b,.chapter-rail a:hover b{display:block}
.chapter-cut{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(380px,60vh,680px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:65px 24px;background:#11110f}
.chapter-cut:before{content:"";position:absolute;inset:-30%;z-index:-1;opacity:.75;background:radial-gradient(ellipse at 50% 80%,#c6764638,transparent 48%),repeating-linear-gradient(105deg,transparent 0 115px,#ffffff06 116px,transparent 117px);transform:translateY(var(--cut-shift,0px))}
.cut-prism:before{background:radial-gradient(ellipse at 50% 80%,#a86cbb39,transparent 48%),repeating-linear-gradient(105deg,transparent 0 115px,#ffffff06 116px,transparent 117px)}
.chapter-cut:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#10100f 0%,transparent 30%,transparent 70%,#10100f 100%)}
.chapter-cut>span,.chapter-cut>strong{position:relative;z-index:1}
.chapter-cut span{font-size:10px;font-weight:700;letter-spacing:.26em;color:#c4a795}
.chapter-cut strong{font:800 clamp(46px,8vw,128px)/.99 'Manrope',sans-serif;letter-spacing:-.085em;color:#f6ede5}
.chapter-cut strong i{font-style:normal;color:transparent;-webkit-text-stroke:1px #f6ede5a0}
.project-art{overflow:hidden}
.project-art .phone{backface-visibility:hidden}
.project .project-content{transition:filter .4s ease}
@media(max-width:1000px){.chapter-rail{right:12px}.chapter-rail a{min-width:auto}.chapter-rail a b,.chapter-rail a.active b{display:none}}
@media(max-width:700px){.chapter-rail,.cursor-aura{display:none}.chapter-cut{min-height:340px;gap:20px}.chapter-cut strong{font-size:clamp(38px,10vw,70px)}}
@media(prefers-reduced-motion:reduce){.cursor-aura{display:none}.chapter-cut:before{transform:none!important}.hero-inner{transform:none!important}}

/* V4: scroll-directed camera choreography, built on V3 visual language. */
.project-art{--front-x:-29%;--front-y:5%;--front-rotate:-9deg;--front-scale:1;--back-x:36%;--back-y:-5%;--back-rotate:14deg;--back-scale:.85;--camera-lift:0px;--light-x:50%;--light-y:50%;}
.project-art .phone{transition:box-shadow .4s ease;transform-origin:50% 55%;}
.project-art .phone-front,.project-art:hover .phone-front{transform:translate3d(var(--front-x),calc(var(--front-y) + var(--camera-lift)),0) rotate(var(--front-rotate)) scale(var(--front-scale));}
.project-art .phone-back,.project-art:hover .phone-back{transform:translate3d(var(--back-x),calc(var(--back-y) - var(--camera-lift)),0) rotate(var(--back-rotate)) scale(var(--back-scale));}
.project-art .halo{transform:translate3d(0,calc(var(--camera-lift) * -.3),0) scale(var(--halo-scale,1));transition:none;}
.project-art .scene-glow{background:radial-gradient(circle at var(--light-x) var(--light-y),#ffffff6b 0%,#ffffff17 31%,transparent 67%);transform:translate3d(0,calc(var(--camera-lift) * .4),0);}
.project-art .scene-grid{transform:translate3d(0,calc(var(--camera-lift) * -.2),0);}
.project-art .phone:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff26;}
.project-art.is-in-view .phone-front{box-shadow:0 62px 100px #0008,0 12px 26px #0006;}
.project-art .art-caption{z-index:5;}
@media(max-width:950px){.project-art{--front-x:-24%;--back-x:30%;}}
@media(prefers-reduced-motion:reduce){.project-art .phone-front,.project-art:hover .phone-front{transform:translate(-29%,5%) rotate(-9deg)!important}.project-art .phone-back,.project-art:hover .phone-back{transform:translate(36%,-5%) rotate(14deg) scale(.85)!important}.project-art .halo,.project-art .scene-glow,.project-art .scene-grid{transform:none!important}}

/* V5 — chapter-to-chapter cinematic continuity */
:root{--chapter-wash:0;scroll-behavior:smooth}
.chapter-cut{--chapter-progress:0;--chapter-focus:0;--chapter-slide:40px;--chapter-veil:.6;min-height:clamp(420px,74vh,820px);perspective:1100px}
.chapter-cut:before{opacity:calc(.35 + var(--chapter-focus) * .55);transform:translate3d(0,var(--cut-shift,0px),0) scale(calc(1.08 - var(--chapter-focus) * .08));will-change:transform,opacity}
.chapter-cut strong{transform:translate3d(0,var(--chapter-slide),0) scale(calc(.93 + var(--chapter-focus) * .07));opacity:calc(.45 + var(--chapter-focus) * .55);will-change:transform,opacity}
.chapter-cut>span:first-child{transform:translateY(calc(var(--chapter-slide) * -.3));opacity:calc(.4 + var(--chapter-focus) * .6)}
.chapter-cut>span:last-child{opacity:calc(.25 + var(--chapter-focus) * .75)}
.chapter-cut:after{background:linear-gradient(180deg,#10100f 0%,#10100f00 32%,#10100f00 70%,#10100f 100%),linear-gradient(90deg,#10100f80,transparent 28%,transparent 72%,#10100f80)}
.chapter-cut .chapter-line{position:absolute;left:50%;bottom:16%;width:1px;height:clamp(35px,8vh,75px);background:#ffffff25;overflow:hidden;z-index:2}
.chapter-cut .chapter-line:after{content:"";display:block;width:100%;height:100%;background:#f6a16d;transform:translateY(calc(-100% + var(--chapter-progress) * 100%))}
.project{position:relative;isolation:isolate}
.project:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 65% 65% at 65% 50%,var(--section-glow,#c86c4620),transparent 75%);opacity:var(--project-presence,.65);transition:opacity .18s linear}
.twidddle{--section-glow:#e28a8a24}.subx{--section-glow:#f0a45e1c}.prism{--section-glow:#ad7ddd25}
.project-art{--scene-focus:1;filter:saturate(calc(.78 + var(--scene-focus) * .22));transition:filter .18s linear}
.project-content{transform:translateY(var(--copy-drift,0px));will-change:transform}
.project .project-cta{transition:background .25s,color .25s,transform .25s,border-color .25s}
.project .project-cta:hover{transform:translateY(-3px)}
.scroll-progress{z-index:100}
@media(max-width:700px){.chapter-cut{min-height:clamp(380px,62vh,560px)}.chapter-cut .chapter-line{bottom:9%}.project-content{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.chapter-cut:before,.chapter-cut strong,.chapter-cut>span{transform:none!important;opacity:1!important}.chapter-cut .chapter-line:after{transform:none!important}.project-content{transform:none!important}.project-art{filter:none!important}}

/* V6 — production polish: responsive behavior, focus states and rendering costs */
html{scroll-padding-top:88px}
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:2px solid #ffb47f;outline-offset:5px}
.nav{z-index:90}
.nav a,.chapter-rail a,.project-cta{touch-action:manipulation}
.project-art{contain:layout paint;isolation:isolate}
.project-art .phone{will-change:auto}
.project-art.is-in-view .phone{will-change:transform}
.project-content{will-change:auto}
.chapter-cut strong{will-change:auto}
.chapter-cut:before{will-change:auto}
.hero-inner{will-change:auto}
@media (hover:none){.cursor-aura{display:none}.project-cta:hover{transform:none}.project-art:hover .phone-front{box-shadow:0 62px 100px #0008,0 12px 26px #0006}}
@media (max-width:950px){.nav{gap:14px}.project-art{min-height:620px}.project{overflow:hidden}.project-content{transform:none!important}}
@media (max-width:700px){
 .hero{min-height: min(900px,100svh)}
 .hero-inner{padding-top:clamp(130px,20vh,220px)}
 .hero h1{overflow-wrap:normal}
 .project-art{min-height:520px;perspective:900px}
 .project-art .phone{max-width:75vw}
 .project-content{position:relative;z-index:6}
 .chapter-cut{padding-inline:20px}
 .chapter-cut strong{max-width:95vw;overflow-wrap:break-word}
 .cursor-aura{display:none}
}
@media (max-width:390px){.project-art{min-height:440px}.project-art .phone{max-width:70vw}.hero-side{display:none}.scene-transition{letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1!important;transform:none!important}}
.page-inactive .cinema-beam,.page-inactive .hero-orbit,.page-inactive .hero-grain{animation-play-state:paused!important}

/* V7 — cinematic hero: purely decorative, CSS-driven, no third-party footage. */
.hero{--hero-pointer-x:0px;--hero-pointer-y:0px}
.hero-stage{position:absolute;z-index:0;inset:0 0 0 42%;overflow:hidden;pointer-events:none;transform:translate3d(var(--hero-pointer-x),var(--hero-pointer-y),0);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.stage-aura{position:absolute;width:min(74vw,950px);aspect-ratio:1;right:-21%;top:0%;border-radius:50%;background:radial-gradient(circle,#ffae5948 0%,#dd642d28 20%,#9e401315 43%,transparent 70%);filter:blur(22px);animation:stageBreathe 8s ease-in-out infinite alternate}
.stage-ring{position:absolute;right:-11%;top:9%;width:min(57vw,750px);aspect-ratio:1;border-radius:50%;border:1px solid #ffba8550;box-shadow:0 0 32px #ff8e3216,inset 0 0 40px #ff8e3212;animation:stageRotate 34s linear infinite}
.stage-ring:before,.stage-ring:after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px dashed #ffbc7730}
.stage-ring:after{inset:21%;border-style:solid;border-color:#ffb47426}
.stage-ring-two{right:1%;top:20%;width:min(40vw,520px);border-color:#ffd4a12b;animation-direction:reverse;animation-duration:25s}
.stage-core{position:absolute;right:13%;top:38%;width:min(18vw,220px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 32%,#ffe0a2 0%,#e98a40 10%,#a84a20 31%,#381b12 61%,transparent 74%);box-shadow:0 0 75px 15px #ff87382d,0 0 170px 55px #fa712114;animation:stageFloat 7s ease-in-out infinite alternate}
.stage-trace{position:absolute;height:1px;width:100%;left:0;top:33%;background:linear-gradient(90deg,transparent,#ffae673d 35%,#ffd9a5b0 62%,transparent);transform:rotate(-26deg);transform-origin:center;animation:stageTrace 10s ease-in-out infinite alternate}
.stage-trace-two{top:71%;transform:rotate(24deg);opacity:.55;animation-delay:-5s}
.stage-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe5b9;box-shadow:0 0 15px 4px #ff8b49a8;animation:stageTwinkle 4s ease-in-out infinite alternate}
.stage-spark-one{right:32%;top:22%}.stage-spark-two{right:8%;top:64%;animation-delay:-2s}.stage-spark-three{right:49%;top:73%;animation-delay:-1s}
.stage-label{position:absolute;right:8%;bottom:16%;font:600 10px 'DM Sans',sans-serif;letter-spacing:.26em;color:#ffb47c8c}
.hero-inner .eyebrow{animation:heroRise .85s .1s both}
.hero-inner h1{animation:heroRise 1.15s .22s both}
.hero-inner .hero-lede{animation:heroRise 1s .43s both}
.hero-inner .hero-actions{animation:heroRise 1s .6s both}
.hero .outline{background:linear-gradient(105deg,#f4e6d8 12%,#fff5dc 35%,#ffac70 50%,#f4e6d8 70%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1px #f4e6d87a;animation:heroSheen 8s ease-in-out 1.2s infinite}
.hero .primary{position:relative;overflow:hidden;isolation:isolate}
.hero .primary:after{content:"";position:absolute;inset:-70% auto -70% -50%;width:32%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:rotate(20deg);animation:ctaGleam 6s ease-in-out 2s infinite;pointer-events:none}
@keyframes stageBreathe{to{transform:scale(1.15) translate(-2%,2%);opacity:.75}}
@keyframes stageRotate{to{transform:rotate(360deg)}}
@keyframes stageFloat{to{transform:translate(-13px,-21px) scale(1.06)}}
@keyframes stageTrace{to{opacity:.24;translate:0 30px}}
@keyframes stageTwinkle{to{opacity:.18;transform:scale(.4)}}
@keyframes heroRise{from{opacity:0;transform:translateY(34px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes heroSheen{0%,28%{background-position:100% 0}60%,100%{background-position:0 0}}
@keyframes ctaGleam{0%,70%{left:-50%}90%,100%{left:140%}}
@media(max-width:950px){.hero-stage{left:30%;opacity:.72}.stage-ring{width:76vw}.stage-ring-two{width:54vw}.stage-core{width:24vw}}
@media(max-width:600px){.hero-stage{inset:0 0 25% 0;opacity:.38}.stage-ring{right:-50%;top:18%;width:105vw}.stage-ring-two{right:-28%;top:30%;width:70vw}.stage-core{right:4%;top:46%;width:36vw}.stage-aura{right:-55%;top:18%;width:125vw}.stage-label{display:none}.hero-inner{z-index:3}.hero .outline{-webkit-text-stroke:1px #f4e6d8}}
@media(prefers-reduced-motion:reduce){.hero-stage{transition:none!important}.hero-inner .eyebrow,.hero-inner h1,.hero-inner .hero-lede,.hero-inner .hero-actions{opacity:1!important;filter:none!important;transform:none!important}}

/* V8: atmospheric fire embers; canvas is decorative and does not intercept input. */
.hero-embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.95;mix-blend-mode:screen}
@media(max-width:600px){.hero-embers{opacity:.72}}
@media(prefers-reduced-motion:reduce){.hero-embers{display:none}}

/* V9 — original, unaltered Rubifox emblem as the cinematic focal point */
.hero .hero-orbit,.hero .hero-mark,.hero .hero-vertical,.hero-stage{display:none!important}
.fox-stage{position:absolute;inset:0 0 0 46%;z-index:1;pointer-events:none;overflow:hidden;transform:translate3d(var(--hero-pointer-x,0px),var(--hero-pointer-y,0px),0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fox-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 62% 53%,#fa803b3b 0%,#b447192a 22%,#6d2b0c18 43%,transparent 70%);filter:blur(30px);animation:foxHaze 8s ease-in-out infinite alternate}
.fox-backlight{position:absolute;width:min(43vw,600px);aspect-ratio:1;top:22%;right:7%;border-radius:50%;background:radial-gradient(circle,#ffae5d52 0%,#f17c3030 25%,#f0712310 50%,transparent 72%);filter:blur(35px);animation:foxLight 7s ease-in-out infinite alternate}
.fox-emblem{position:absolute;width:clamp(260px,29vw,480px);height:auto;top:48%;right:12%;transform:translateY(-50%);object-fit:contain;filter:drop-shadow(0 0 12px #ffa45a65) drop-shadow(0 0 58px #ff6c3052) drop-shadow(0 28px 40px #000a);animation:foxLevitate 7s ease-in-out infinite alternate}
.fox-reflection{position:absolute;right:12%;top:80%;width:42%;height:10%;background:radial-gradient(ellipse,#ff853f3d 0%,transparent 72%);filter:blur(20px);animation:foxLight 7s ease-in-out infinite alternate}
.fox-signature{position:absolute;bottom:15%;right:9%;color:#e8a6789c;font-size:9px;font-weight:700;letter-spacing:.25em}
.hero-inner{position:relative;z-index:4}
.hero h1 .outline,.hero .outline{background:linear-gradient(112deg,#e9c7aa 0%,#fff0df 28%,#f8b77b 56%,#e7c2a5 100%)!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-stroke:0!important;color:transparent!important;filter:none!important;text-shadow:none!important;animation:none!important}
@keyframes foxLevitate{to{transform:translateY(calc(-50% - 16px)) rotate(1deg);filter:drop-shadow(0 0 22px #ffb06888) drop-shadow(0 0 80px #ff6c3066) drop-shadow(0 28px 40px #000a)}}
@keyframes foxHaze{to{opacity:.7;transform:scale(1.12)}}
@keyframes foxLight{to{opacity:.7;transform:scale(1.1)}}
@media(max-width:1100px){.fox-stage{left:44%;opacity:.85}.fox-emblem{right:0%;width:34vw}}
@media(max-width:700px){.fox-stage{inset:0;opacity:.33}.fox-emblem{top:43%;right:-18%;width:85vw}.fox-backlight{right:-38%;top:16%;width:100vw}.fox-signature,.fox-reflection{display:none}.hero-inner{z-index:5}}
@media(prefers-reduced-motion:reduce){.fox-emblem{animation:none!important}.fox-haze,.fox-backlight,.fox-reflection{animation:none!important}.fox-stage{transform:none!important;transition:none!important}}

/* V9.1: dimensional treatment around the original, untouched logo image. */
.fox-stage{inset:0 0 0 47%;overflow:visible}
.fox-haze{background:radial-gradient(ellipse at 59% 53%,#fb8c3833 0%,#a94a1823 27%,transparent 68%);filter:blur(43px)}
.fox-backlight{width:min(35vw,490px);top:23%;right:13%;background:radial-gradient(circle,#ffbb734d 0%,#e5782b23 37%,transparent 72%);filter:blur(52px)}
.fox-floor{position:absolute;right:7%;bottom:7%;width:76%;height:16%;background:radial-gradient(ellipse,#e77c3c30 0%,#f39a4320 25%,transparent 70%);filter:blur(23px);transform:scaleY(.55)}
.fox-rim{position:absolute;right:14%;top:23%;width:min(36vw,510px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,transparent 42%,#ff87321a 56%,transparent 73%);filter:blur(30px);animation:foxHaze 10s ease-in-out infinite alternate}
.fox-rim-tight{right:20%;top:30%;width:min(26vw,370px);opacity:.65;animation-delay:-4s}
.fox-object{position:absolute;top:49%;right:19%;width:clamp(230px,23vw,365px);aspect-ratio:1;transform:translateY(-50%);animation:foxObjectFloat 8s ease-in-out infinite alternate;isolation:isolate}
.fox-object-shadow{position:absolute;inset:14%;border-radius:50%;background:#170e0b7a;filter:blur(27px);transform:translate(12px,17px);z-index:-1}
.fox-object .fox-emblem{position:absolute;inset:0;width:100%;height:100%;top:auto;right:auto;transform:none;object-fit:contain;animation:none}
.fox-emblem-bloom{opacity:.65;filter:blur(16px) drop-shadow(0 0 20px #ff8438) drop-shadow(0 0 45px #ff732d)!important;transform:scale(1.04)!important}
.fox-emblem-main{filter:brightness(.73) contrast(1.17) drop-shadow(2px 3px 1px #140b09) drop-shadow(7px 11px 7px #0009) drop-shadow(-3px -3px 5px #ffaf6875)!important}
.fox-specular{position:absolute;inset:0;pointer-events:none;opacity:.26;mix-blend-mode:screen;background:linear-gradient(125deg,transparent 22%,#ffd0a04d 41%,transparent 53%);mask-image:url('assets/logo.png');-webkit-mask-image:url('assets/logo.png');mask-size:contain;-webkit-mask-size:contain;mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;animation:foxSpecular 9s ease-in-out infinite alternate}
.fox-reflection{right:19%;top:80%;width:52%;height:8%;opacity:.7;filter:blur(26px)}
.fox-signature{right:15%;bottom:13%}
@keyframes foxObjectFloat{to{transform:translateY(calc(-50% - 13px)) rotate(.6deg)}}
@keyframes foxSpecular{to{opacity:.45;background-position:70px 0}}
@media(max-width:1100px){.fox-stage{left:45%}.fox-object{right:9%;width:clamp(210px,28vw,330px)}}
@media(max-width:700px){.fox-stage{inset:0;opacity:.26;overflow:hidden}.fox-object{right:-12%;top:38%;width:68vw}.fox-rim{right:-35%;top:13%;width:100vw}.fox-backlight{right:-25%;top:13%;width:95vw}.fox-floor,.fox-signature{display:none}}
@media(prefers-reduced-motion:reduce){.fox-object,.fox-rim,.fox-specular{animation:none!important}}

/* V9.2: isolated metallic rendering of the approved fox artwork. */
.metallic-stage{inset:0 0 0 46%;overflow:hidden;isolation:isolate}
.metallic-stage .fox-haze{background:radial-gradient(ellipse at 60% 52%,#d66a293c 0%,#a23b1520 33%,transparent 70%);filter:blur(42px)}
.metallic-backlight{position:absolute;width:70%;aspect-ratio:1;right:4%;top:12%;border-radius:50%;background:radial-gradient(circle,#fa8c3950 0%,#f27c2524 28%,transparent 70%);filter:blur(36px);animation:metallicGlow 7s ease-in-out infinite alternate}
.metallic-object{position:absolute;width:clamp(330px,36vw,580px);aspect-ratio:435/480;right:4%;top:50%;transform:translateY(-50%);animation:metallicFloat 8s ease-in-out infinite alternate;filter:drop-shadow(0 0 24px #ef783957) drop-shadow(0 35px 28px #0008)}
.metallic-object img{display:block;width:100%;height:100%;object-fit:contain}
.metallic-floor{position:absolute;bottom:12%;right:10%;width:67%;height:13%;border-radius:50%;background:radial-gradient(ellipse,#ffac5b61,transparent 70%);filter:blur(24px);transform:scaleY(.4);animation:metallicGlow 7s ease-in-out infinite alternate}
.metallic-stage .fox-signature{right:14%;bottom:13%}
@keyframes metallicFloat{to{transform:translateY(calc(-50% - 14px)) rotate(.7deg)}}
@keyframes metallicGlow{to{opacity:.6;transform:scale(1.1)}}
@media(max-width:1100px){.metallic-stage{left:43%}.metallic-object{right:-5%;width:46vw}}
@media(max-width:700px){.metallic-stage{inset:0;opacity:.28}.metallic-object{width:88vw;right:-28%;top:40%}.metallic-backlight{width:105%;right:-34%;top:14%}.metallic-floor,.metallic-stage .fox-signature{display:none}}
@media(prefers-reduced-motion:reduce){.metallic-object,.metallic-backlight,.metallic-floor{animation:none!important}}

/* V9.3: 15% smaller fox, farther right, more dimensional ground light. */
.metallic-object{width:clamp(280px,30.6vw,493px);right:0%;top:49%;filter:drop-shadow(0 0 17px #ef783942) drop-shadow(0 29px 24px #0009)}
.metallic-stage .fox-haze{background:radial-gradient(ellipse at 67% 54%,#d66a292e 0%,#a23b1519 32%,transparent 67%);filter:blur(49px)}
.metallic-backlight{width:61%;right:2%;top:17%;background:radial-gradient(circle,#fa8c393a 0%,#f27c2519 30%,transparent 70%);filter:blur(43px)}
.metallic-floor{bottom:9%;right:2%;width:76%;height:18%;background:radial-gradient(ellipse at 50% 48%,#ffbc767a 0%,#ff89364b 21%,#d656201c 46%,transparent 75%);filter:blur(23px);transform:scaleY(.35);opacity:.85}
.metallic-floor::after{content:"";position:absolute;inset:37% 12%;background:linear-gradient(90deg,transparent,#ffc28391,transparent);filter:blur(11px)}
@media(max-width:1100px){.metallic-object{width:39vw;right:-4%}.metallic-floor{right:-3%;width:79%}}
@media(max-width:700px){.metallic-object{width:74.8vw;right:-24%;top:40%}.metallic-backlight{width:95%;right:-29%;top:18%}.metallic-floor{display:none}}
@media(prefers-reduced-motion:reduce){.metallic-object{animation:none!important}}