/* Motion direction: a physical editing desk, portrait frames, and kinetic type. */
:root{--bg:#0b0d0b;--surface:#151914;--accent:#d8fd67;--line:#30372a}
body{background:var(--bg)}
.site-header{height:88px;background:#10140fe8;border-bottom:1px solid #b9d28b26;box-shadow:none}
.brand{gap:14px}.brand-label{letter-spacing:.04em;font-size:19px}.brand-label small{font-size:8px;letter-spacing:.18em;line-height:2}
.header-cta{border-radius:40px;padding:13px 21px;border-color:#64784b;background:transparent}
.hero{position:relative;isolation:isolate;grid-template-columns:1.15fr 1fr;gap:28px;min-height:820px;padding-top:100px;padding-bottom:120px;background:radial-gradient(ellipse at 78% 40%,#70843d18,transparent 53%)}
.hero-copy{position:relative;z-index:3;pointer-events:none}.hero-copy a{pointer-events:auto}
.hero-particles,.hero-grid{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-grid{background:linear-gradient(90deg,transparent calc(100% - 1px),#c6e29508 0);background-size:12.5% 100%;mask-image:linear-gradient(transparent,#000 45%,transparent)}
.hero h1{font-size:clamp(72px,8.9vw,154px);letter-spacing:-.085em;line-height:.9;white-space:nowrap;font-weight:500}
.hero h1>span:first-of-type{display:inline-block;color:var(--accent);position:relative}
.hero h1>span:first-of-type:after{content:'';position:absolute;left:3%;bottom:-14px;width:93%;height:2px;background:var(--accent);transform:scaleX(.25);transform-origin:left;opacity:.45;animation:underline-edit 6s ease-in-out infinite}
.hero-star{display:none}.kicker{font-size:10px;letter-spacing:.19em;margin-bottom:38px}.small-orbit{width:9px;height:9px;border:0;background:var(--accent);box-shadow:0 0 20px #cfff5c77}.small-orbit:after{display:none}
.hero-desc{max-width:430px;font-size:16px;line-height:1.8;margin:38px 0 28px;color:#b3baac}
.btn{border-radius:3px;padding:19px 22px}.hero-foot{font-size:8px;letter-spacing:.13em;gap:20px;margin-top:38px}
.hero-stage{position:relative;min-width:0;height:570px;perspective:1200px;transform:translateY(calc(var(--hero-scroll,0) * -22px));z-index:2}
.hero-feature{position:absolute;width:65%;max-width:350px;height:480px;left:21%;top:20px;box-shadow:0 28px 80px #0009;border:1px solid #c7d8a755;border-radius:5px;transform:rotate(-6deg) rotateY(-8deg);transition:transform .6s cubic-bezier(.2,.65,.25,1),box-shadow .6s;background:#161b12}
.hero-feature:hover{transform:rotate(-2deg) rotateY(0) translateY(-8px);box-shadow:0 35px 85px #000b}
.hero-feature>img{object-fit:cover}.hero-feature .feature-top{font-size:8px;left:18px;right:18px}.hero-feature .feature-bottom{left:18px;right:18px;gap:12px}.hero-feature .play-circle{flex-basis:44px;height:44px;background:#d8fd67;color:#13170d;border:0;font-size:14px}.hero-feature .feature-caption strong{font-size:19px}.hero-feature .feature-arrow{display:none}
.floating-still{position:absolute;width:31%;height:255px;overflow:hidden;border:1px solid #b5c49740;border-radius:4px;box-shadow:0 20px 60px #0008;pointer-events:none;animation:frame-float 8s ease-in-out infinite}
.floating-still img{width:100%;height:100%;object-fit:cover}.floating-still span{position:absolute;left:12px;bottom:12px;font:8px monospace;letter-spacing:.1em;background:#10140ddd;padding:8px;color:#edf1e4}
.still-fashion{right:-3%;top:5px;transform:rotate(12deg);--frame-angle:12deg;animation-delay:-2s}.still-drink{left:0;bottom:5px;transform:rotate(-15deg);--frame-angle:-15deg;animation-delay:-5s}
.stage-orbit{position:absolute;left:-9%;top:0;width:115%;height:80%;border:1px solid #d8fd6730;border-radius:50%;transform:rotate(-35deg);pointer-events:none}.stage-orbit:before{content:'';position:absolute;top:12%;left:14%;width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 25px #d8fd6770}
.orbit-two{transform:rotate(35deg);height:65%;top:8%;opacity:.35}.stage-label{position:absolute;bottom:3px;right:2%;font:9px monospace;color:#a2ac93;letter-spacing:.13em;writing-mode:vertical-rl}
.edit-timeline{position:absolute;bottom:-32px;left:25%;width:65%;display:flex;gap:4px;height:38px;align-items:center;background:#141a11e8;border:1px solid #a8c07439;padding:8px;font:8px monospace;color:#b9c6a9;transform:rotate(-6deg)}
.edit-timeline i{height:100%;flex:1;background:#536436}.edit-timeline i:nth-child(3){flex:2;background:#96b455}.edit-timeline i:nth-child(4){background:#617c37}.edit-timeline i:nth-child(5){flex:1.4;background:#a5c46c}.edit-timeline b{position:absolute;top:-6px;bottom:-6px;width:1px;background:#f0ffc7;left:10%;animation:playhead 6s linear infinite}.edit-timeline b:before{content:'';position:absolute;top:0;left:-3px;width:7px;height:5px;background:#f0ffc7}
.hero-bottom{position:absolute;bottom:28px;left:5.2%;right:5.2%;border-top:1px solid #bdd09d25;padding-top:20px;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:.1em;color:#96a087}.hero-bottom a{color:#d8fd67}.hero-bottom a span{display:inline-block;margin-left:18px;font-size:18px}
.ticker{height:72px}.ticker-track{animation-duration:34s;font-size:18px}.ticker-group{gap:50px;padding-right:50px}.ticker-group span:nth-child(even){font-size:32px}
.work{padding-top:120px;background:radial-gradient(ellipse at 0 40%,#34402020,transparent 50%)}
.section-heading h2{font-size:clamp(62px,8vw,120px);font-weight:500}.section-heading h2 em{font-weight:400}.section-sub{font-size:13px;max-width:300px}.eyebrow{font:10px monospace;letter-spacing:.18em}
.filters{margin-top:58px;border-top:1px solid var(--line);padding-top:22px;margin-bottom:45px}.filter{border-radius:30px;padding:13px 22px;font-size:10px}
.project-grid{gap:90px 7%;align-items:start}.project-card{position:relative;min-width:0}.project-card:nth-child(even){margin-top:140px}
.project-visual{height:590px;background:radial-gradient(ellipse at 50% 70%,#6470472b,transparent 68%),#121610;border:1px solid #56654455;border-radius:5px;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease,border-color .35s}
.project-visual:hover{border-color:#9ebf61}.project-visual img{object-fit:contain;transform:scale(.94);transition:transform .8s cubic-bezier(.2,.7,.2,1)}.project-visual:hover>img{transform:scale(1)}
.card-play{height:65px;width:65px;background:#10180a70;border-color:#f2ffe0a0;backdrop-filter:blur(5px)}.card-chip{font:9px monospace;border:1px solid #b9d98d33;border-radius:2px}.card-length{font:10px monospace;color:#e8f5d5}
.card-details h3{font-size:clamp(25px,2.7vw,39px);font-weight:500}.card-details{margin-top:24px}.card-index{font-size:34px}.edit-notes{border-bottom:0}.work-note{margin-top:65px;max-width:460px}
.services{overflow:hidden;background:radial-gradient(ellipse at var(--glow-x,80%) var(--glow-y,20%),#6d873430,transparent 58%),#141a10;padding-top:120px;padding-bottom:95px}
.services:before{opacity:.22;background-size:80px 80px}.services .section-heading{position:relative;z-index:1;align-items:start;margin-bottom:80px}.services .section-heading .section-sub{margin-top:30px;max-width:230px}.services .section-heading h2{font-size:clamp(64px,8vw,120px)}
.service-sculpture{position:absolute;width:400px;height:400px;top:65px;right:20%;opacity:.7;pointer-events:none;perspective:900px;transform:translate3d(var(--cursor-shift-x,0px),calc(var(--section-progress,0) * -40px + var(--cursor-shift-y,0px)),0) rotateX(var(--cursor-rotate-x,0deg)) rotateY(var(--cursor-rotate-y,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.services:before{transform:translate3d(var(--cursor-shift-x,0px),var(--cursor-shift-y,0px),0);transition:transform .5s ease}
.sculpture-core{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(62deg) rotateZ(calc(-25deg + var(--section-progress,0) * 100deg));animation:sculpture-turn 24s linear infinite}
.sculpture-core i{position:absolute;inset:0;border:1px solid #d8fd6780;border-radius:50%;transform:rotateY(0deg)}.sculpture-core i:nth-child(2){transform:rotateY(30deg)}.sculpture-core i:nth-child(3){transform:rotateY(60deg)}.sculpture-core i:nth-child(4){transform:rotateY(90deg)}.sculpture-core i:nth-child(5){transform:rotateY(120deg)}.sculpture-core i:nth-child(6){transform:rotateY(150deg)}.sculpture-core span{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);font-size:150px;transform:rotateX(-62deg);text-shadow:0 0 50px #b8e35b66}
.service-grid{position:relative;z-index:1;gap:0;border-top:1px solid #a8bc7955;grid-template-columns:repeat(3,1fr)}
.service-grid article,.service-grid article+article{border:0;border-right:1px solid #82955e44;background:#11180cc9;box-shadow:none;border-radius:0;padding:38px 30px}.service-grid article:last-child{border-right:0}.service-grid h3{font-weight:500;font-size:30px}.service-grid p{font-size:13px}.service-grid article:hover{background:#243018eb}.service-no{top:50px;right:30px;font-family:monospace}
.service-cta{position:relative;z-index:1}.about{background:#0b0d0b;padding-block:100px 130px}.approach-ruler{display:flex;justify-content:space-between;gap:25px;font:9px monospace;color:#9ca88c;letter-spacing:.1em;margin-bottom:90px;border-block:1px solid #30372a;padding:20px 0}.about h2{font-weight:400;font-size:clamp(46px,5.9vw,88px)}.about h2 em{color:#d8fd67}.about-layout{grid-template-columns:1.25fr .75fr;gap:10%}.about-layout p{font-size:15px;line-height:1.9}
.contact{position:relative;isolation:isolate;overflow:hidden;background:#d8fd67;padding-block:100px 110px}.contact h2{position:relative;z-index:1;font-weight:500;font-size:clamp(65px,9vw,140px)}.contact h2 em{color:#314518}.contact>p,.contact-buttons{position:relative;z-index:1}.contact-orbit{position:absolute;right:-6%;top:0;width:550px;height:550px;border:1px solid #334d3033;border-radius:50%;display:grid;place-items:center;transform:rotate(-20deg);pointer-events:none}.contact-orbit:before,.contact-orbit:after{content:'';position:absolute;inset:30px;border:1px solid #334d3033;border-radius:50%;transform:rotateY(50deg)}.contact-orbit:after{transform:rotateX(60deg)}.contact-orbit span{font-size:350px;line-height:1;font-family:var(--font-head);color:#294b1420;transform:translateY(calc(var(--section-progress,0) * -45px))}
.site-footer{font:9px monospace;letter-spacing:.06em}.motion-reveal{animation:reveal-in .9s cubic-bezier(.2,.65,.2,1) both}.motion-reveal:nth-child(2){animation-delay:.12s}
@keyframes reveal-in{from{opacity:.2;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
@keyframes frame-float{0%,100%{transform:translateY(0) rotate(var(--frame-angle))}50%{transform:translateY(-18px) rotate(calc(var(--frame-angle) + 3deg))}}
@keyframes playhead{from{left:10%}to{left:90%}}
@keyframes underline-edit{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}
@keyframes sculpture-turn{to{rotate:0 0 1 360deg}}
@media(max-width:1100px){.hero{min-height:740px}.hero h1{font-size:clamp(70px,8.8vw,110px)}.hero-stage{height:500px}.hero-feature{height:420px;left:16%;width:72%}.floating-still{height:210px}.hero-desc{font-size:15px}.hero-foot{flex-direction:column;gap:8px}.project-visual{height:490px}.service-sculpture{right:15%;width:330px;height:330px}.service-grid article,.service-grid article+article{padding:30px 22px}}
@media(max-width:760px){.site-header{height:auto;min-height:112px}.brand-mark{width:42px;height:42px}.brand-label{font-size:17px}.hero{grid-template-columns:1fr;padding-top:55px;padding-bottom:115px;gap:45px;min-height:0}.hero h1{font-size:clamp(60px,13.3vw,98px);white-space:normal}.hero-desc{max-width:440px;font-size:15px}.hero-stage{width:min(100%,460px);height:500px;margin:0 auto}.hero-feature{width:64%;height:400px;left:22%;top:20px}.floating-still{width:30%;height:220px}.still-fashion{right:0;top:0}.still-drink{left:2%;bottom:30px}.stage-label{font-size:8px;right:0}.edit-timeline{bottom:0;left:25%;width:65%}.hero-foot{flex-direction:row;gap:20px}.hero-bottom{left:24px;right:24px;font-size:8px}.hero-bottom>span{max-width:150px;line-height:1.7}.ticker{height:60px}.ticker-track{font-size:14px}.ticker-group{gap:30px;padding-right:30px}.work{padding-top:85px}.section-heading h2{font-size:64px}.filters{margin-top:30px;margin-bottom:32px}.project-grid{gap:45px 20px}.project-card:nth-child(even){margin-top:70px}.project-visual{height:380px}.card-details h3{font-size:26px}.services{padding-top:85px}.services .section-heading h2{font-size:64px}.services .section-heading .section-sub{max-width:280px}.service-sculpture{width:250px;height:250px;top:85px;right:-70px;opacity:.38}.service-grid{grid-template-columns:1fr}.service-grid article,.service-grid article+article{border-right:0;border-bottom:1px solid #82955e44;padding:25px}.service-grid h3{margin:16px 0 10px}.service-grid p{max-width:100%}.approach-ruler{font-size:8px;line-height:1.8;margin-bottom:60px;gap:20px}.about{padding-block:70px 90px}.about-layout{display:block}.about h2{font-size:53px}.contact{padding-block:80px}.contact h2{font-size:66px}.contact-orbit{right:-300px;opacity:.65}.contact-buttons a{border-radius:3px}}
@media(max-width:540px){.project-grid{grid-template-columns:1fr}.project-card:nth-child(even){margin-top:0}.project-visual{height:480px}.hero-stage{height:450px}.hero-feature{height:360px;width:68%;left:19%}.floating-still{height:185px}.hero-feature .feature-caption strong{font-size:15px}.hero-feature .feature-caption small{font-size:7px}.hero-feature .feature-top{font-size:7px;gap:8px}.hero-feature .feature-bottom{left:12px;right:12px;gap:10px}.hero-feature .play-circle{height:35px;flex-basis:35px;font-size:11px}.hero-stage .stage-label{font-size:7px;bottom:55px}.hero-foot{font-size:7px}.hero .kicker{font-size:8px;gap:10px}.hero h1{font-size:clamp(56px,13.7vw,74px)}.hero-actions{gap:20px}.hero .btn{font-size:10px;padding:18px}.hero .text-link{font-size:9px}.section-heading h2,.services .section-heading h2{font-size:58px}.filter{padding:12px 14px;font-size:9px}.about h2{font-size:47px}.contact h2{font-size:clamp(48px,12vw,65px)}.project-visual{height:460px}.hero-bottom{font-size:7px}.hero-bottom a span{margin-left:8px}.service-sculpture{top:140px}}
@media(prefers-reduced-motion:reduce){.hero-particles{display:none}.hero-stage,.hero-feature,.project-visual,.contact-orbit span,.service-sculpture{transform:none!important}.hero-feature{left:20%}.motion-reveal{animation:none}.hero h1>span:after,.floating-still,.edit-timeline b,.sculpture-core{animation:none!important}.ticker{height:auto}.hero h1>span:after{transform:scaleX(.65)}.ticker-track{animation:none}.ticker-group{gap:10px 18px;padding:12px 18px}.service-sculpture{opacity:.3}}

/* Four real projects, arranged in a selectable orbit. */
.hero-stage{height:570px;perspective:1300px}
.hero-deck{position:absolute;inset:0;transform-style:preserve-3d}
.deck-card{position:absolute;left:21%;top:35px;width:65%;height:445px;max-width:350px;padding:0;border:1px solid #a3ba7766;border-radius:6px;background:#11170e;overflow:hidden;color:#fff;text-align:left;cursor:pointer;box-shadow:0 25px 55px #0008;transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .65s,box-shadow .65s;transform-origin:50% 65%;isolation:isolate}
.deck-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.deck-card:after{content:'';position:absolute;inset:0;background:linear-gradient(#0008,transparent 30%,transparent 55%,#000c);pointer-events:none;z-index:1}
.deck-card[data-slot="0"]{z-index:4;transform:translate(0,0) rotate(-6deg);filter:brightness(1)}
.deck-card[data-slot="1"]{z-index:3;transform:translate(38%,-8%) rotate(15deg) scale(.68);filter:brightness(.8)}
.deck-card[data-slot="2"]{z-index:1;transform:translate(-38%,-15%) rotate(-19deg) scale(.63);filter:brightness(.7)}
.deck-card[data-slot="3"]{z-index:2;transform:translate(-33%,30%) rotate(-17deg) scale(.65);filter:brightness(.8)}
.deck-card:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.deck-top{position:absolute;top:20px;left:18px;right:12px;z-index:2;font:8px monospace;letter-spacing:.06em}
.deck-caption{position:absolute;bottom:23px;left:18px;right:14px;display:flex;gap:12px;align-items:center;z-index:2}
.deck-caption strong{display:block;font:500 22px/1.1 var(--font-head);letter-spacing:-.05em}.deck-caption small{display:block;font:8px monospace;margin-top:8px;letter-spacing:.04em}
.deck-play{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;background:var(--accent);color:#17200c;font-size:14px}
.deck-controls{position:absolute;left:23%;bottom:0;display:flex;gap:9px;z-index:5}.deck-controls button{height:44px;width:44px;border:1px solid #92b55a66;background:#151e10;color:#bac7aa;font:11px monospace;cursor:pointer;border-radius:50%;transition:background .25s,color .25s}.deck-controls button[aria-pressed="true"]{background:var(--accent);color:#16200b;border-color:var(--accent)}
.deck-hint{position:absolute;bottom:-35px;left:8%;right:0;display:flex;justify-content:space-between;font:8px monospace;color:#acbd98;letter-spacing:.08em}
.work,.about,.contact{position:relative;isolation:isolate}.section-particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.ambient-glow{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 430px 330px at var(--ambient-x,70%) var(--ambient-y,35%),#b9ed4a18,transparent 75%)}
.work{background:radial-gradient(ellipse at 10% 25%,#34462038,transparent 50%),#0b100a}.about{background:radial-gradient(ellipse at 80% 75%,#485e263b,transparent 65%),#0c110a}.about:after{content:'';position:absolute;width:500px;height:500px;border:1px solid #b5dc6420;border-radius:50%;right:-200px;top:10%;z-index:-1;pointer-events:none;box-shadow:0 0 0 65px #b5dc6405,0 0 0 130px #b5dc6404}
.contact .ambient-glow{background:radial-gradient(ellipse 400px 300px at var(--ambient-x,70%) var(--ambient-y,35%),#426d2028,transparent 75%)}
.contact-orbit{transform:rotate(calc(-20deg + var(--section-progress,0) * 40deg));transition:transform .2s}.contact-orbit:before{animation:contact-ring 18s linear infinite}.contact-orbit:after{animation:contact-ring 24s linear reverse infinite}
@keyframes contact-ring{to{rotate:360deg}}
@media(max-width:1100px){.hero-stage{height:520px}.deck-card{height:400px;left:19%;width:68%}.deck-caption strong{font-size:19px}}
@media(max-width:760px){.hero-stage{height:510px;width:min(100%,460px)}.deck-card{height:370px;width:64%;left:20%;top:40px}.deck-card[data-slot="1"]{transform:translate(33%,-8%) rotate(15deg) scale(.68)}.deck-card[data-slot="2"]{transform:translate(-30%,-15%) rotate(-19deg) scale(.63)}.deck-card[data-slot="3"]{transform:translate(-27%,30%) rotate(-17deg) scale(.65)}.deck-controls{left:50%;transform:translateX(-50%);bottom:5px}.deck-hint{left:0;font-size:7px;bottom:-27px}.deck-top{font-size:7px;top:14px;left:12px}.deck-caption{left:12px;gap:8px}.deck-caption strong{font-size:17px}.deck-play{flex-basis:34px;height:34px;font-size:11px}.deck-caption small{font-size:7px}}
@media(max-width:540px){.hero-stage{height:460px}.deck-card{height:325px;width:67%;left:17%;top:38px}.deck-caption strong{font-size:16px}.deck-controls{bottom:0}.deck-hint{bottom:-30px}.deck-hint{font-size:0}.deck-hint:before{content:'CHOOSE 01–04 TO EXPLORE';font:8px monospace}.deck-hint span{font:8px monospace}}
@media(prefers-reduced-motion:reduce){.deck-card{transition:none}.section-particles{opacity:.5}.contact-orbit:before,.contact-orbit:after{animation:none}.ambient-glow{background-position:center}}

/* One-time entrances; content is visible by default if observation or JS fails. */
.motion-reveal{animation:portfolio-enter .7s cubic-bezier(.2,.65,.2,1) both;animation-delay:var(--reveal-delay,0s)}
.motion-reveal:nth-child(2){animation-delay:var(--reveal-delay,0s)}
@keyframes portfolio-enter{from{opacity:.15;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.motion-reveal{animation:none}}