:root{color-scheme:dark;--bg:#060807;--white:#f5f5f2;--green:#00e65c;--muted:#bbbeba}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:6px}header{position:absolute;top:28px;left:4%;right:4%;z-index:5;display:flex;align-items:center;justify-content:space-between}.menu-toggle{width:62px;height:62px;border:1px solid #ffffff30;border-radius:50%;background:#06080736;display:grid;align-content:center;justify-content:center;gap:7px}.menu-toggle span{height:1px;background:white;width:25px}.socials{display:flex;gap:12px}.socials a,.socials button{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;padding:11px}.socials button:disabled{opacity:.65}.socials svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}.hero{position:relative;min-height:820px;height:100svh;isolation:isolate;display:flex;align-items:center;padding:115px 5.6% 210px;overflow:hidden}.hero-background{position:absolute;inset:0;z-index:-3}.hero-background>svg,.hero-background>picture,.hero-background img,.hero-background video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.hero-background::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#020606cf,transparent 80%),linear-gradient(0deg,#030605b0,transparent 60%)}.hero-copy{width:min(650px,60%)}.brand-logo{width:min(510px,100%);display:block;margin-bottom:30px;aspect-ratio:490/218}.brand-logo img{width:100%;height:100%;object-fit:contain}.brand-logo svg{width:100%;height:100%}h1{font-size:clamp(18px,1.8vw,27px);font-weight:400;letter-spacing:.25em;line-height:1.65;margin:0}h1 span{display:block}.accent{display:block;width:58px;height:3px;background:var(--green);margin:19px 0}.categories{display:flex;align-items:center;gap:19px;font-size:12px;letter-spacing:.25em;white-space:nowrap;margin:22px 0 36px}.categories b{color:var(--green);font-weight:400}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:54px;padding:0 26px;border:1px solid #e6e8e5;border-radius:3px;font-size:12px;letter-spacing:.18em;font-weight:600;background:#0002;transition:background .2s,border-color .2s}.cta.primary{border-color:var(--green)}.cta:hover{background:#ffffff12;border-color:var(--green)}.chevron{width:7px;height:7px;border-right:1px solid;border-top:1px solid;transform:rotate(45deg)}.scroll-cue{position:absolute;right:5.5%;bottom:222px;font-size:11px;letter-spacing:.3em;display:flex;flex-direction:column;align-items:center;gap:13px}.scroll-cue:after{content:'';height:34px;width:1px;background:#eee}.film-shell{position:absolute;bottom:0;left:0;right:0;padding:28px 0 24px;background:#020403bd}.film-shell:before,.film-shell:after{content:'';position:absolute;height:14px;left:0;right:0;background:repeating-linear-gradient(90deg,transparent 0 14px,#65696650 14px 27px,transparent 27px 35px);pointer-events:none}.film-shell:before{top:6px}.film-shell:after{bottom:6px}.film-track{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 calc(50% - 112px);touch-action:pan-x pan-y;cursor:grab}.film-track::-webkit-scrollbar{display:none}.film-track.dragging{cursor:grabbing;scroll-snap-type:none}.film-item{flex:0 0 224px;height:140px;scroll-snap-align:center;padding:0;border:1px solid transparent;background:#111;border-radius:4px;overflow:hidden;transition:border-color .25s,opacity .25s;opacity:.78}.film-item[aria-current=true]{border-color:var(--green);opacity:1}.film-item svg,.film-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.film-progress{position:absolute;bottom:0;left:14%;right:14%;height:1px;background:#8f969b60;transform:translateY(11px);z-index:2}.film-progress i{position:absolute;left:50%;top:-6px;width:3px;height:15px;background:var(--green)}.editorial{position:relative;isolation:isolate;min-height:660px;display:flex;align-items:center;padding:90px 9.7%;overflow:hidden}.editorial-art{position:absolute;inset:0;z-index:-2}.editorial-art svg,.editorial-art img{width:100%;height:100%;object-fit:cover}.editorial:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#020403e8 0%,#020403b8 35%,transparent 80%)}.editorial-copy{max-width:430px}.eyebrow{color:var(--green);font-size:12px;letter-spacing:.32em;margin:0 0 24px;font-weight:500}h2,.page-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(45px,5.3vw,72px);line-height:.98;letter-spacing:-.03em;margin:0}h2 span{display:block}.editorial p:not(.eyebrow){font-size:17px;line-height:1.65;color:#e1e3e0;margin:0 0 27px;max-width:390px}.page{min-height:100svh;padding:160px 8% 80px}.page .page-title{max-width:850px;margin-bottom:35px}.page-copy{max-width:620px;line-height:1.8;color:var(--muted)}.portfolio-list{margin:60px 0;display:flex;flex-direction:column;gap:55px;max-width:1000px}.project-link{display:grid;grid-template-columns:minmax(0,2fr) 1fr;gap:35px;align-items:center}.project-link svg,.project-link img{width:100%;aspect-ratio:1.6;object-fit:cover}.project-link h2{font-size:36px}.project-link p{color:var(--muted);font-size:12px;letter-spacing:.2em}.project-photo{max-width:1100px;margin:40px auto}.project-photo svg,.project-photo img{width:100%;display:block;aspect-ratio:1.6;object-fit:contain}dialog{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;border:0;margin:0;padding:100px 12%;background:#070b09f8;color:white}dialog::backdrop{background:#000a}.close{position:absolute;top:32px;right:5%;font-size:34px;width:48px;height:48px;border:1px solid #ffffff30;border-radius:50%;background:transparent}nav{display:flex;flex-direction:column;gap:18px;margin:45px 0}nav a{font:clamp(32px,5vw,64px)/1.1 Georgia,serif;width:fit-content}nav a:hover{color:var(--green)}.menu-caption{font-size:12px;letter-spacing:.25em;color:var(--muted)}.skip{position:fixed;left:20px;top:-100px;z-index:99;background:#000;padding:16px}.skip:focus{top:15px}.video-toggle{position:absolute;right:4%;bottom:182px;z-index:3;background:#0009;border:1px solid #ffffff40;border-radius:50%;width:44px;height:44px}.status{border-left:2px solid var(--green);padding-left:20px;color:var(--muted);line-height:1.7;max-width:560px}
@media(min-width:1500px){.hero-copy{margin-left:3%}.hero-background>svg{object-position:center}}@media(max-width:650px){header{top:18px;left:6%;right:4%}.menu-toggle{width:46px;height:46px;gap:6px}.menu-toggle span{width:20px}.socials{gap:0}.socials a,.socials button{width:40px;height:44px;padding:10px}.hero{height:calc(100svh + 105px);min-height:750px;padding:105px 6.7% 240px;align-items:flex-start}.hero-copy{width:100%}.brand-logo{width:85%;max-width:360px;margin:0 0 22px}h1{font-size:clamp(17px,4.5vw,24px);line-height:1.45;letter-spacing:.2em;max-width:355px}h1 span:last-child{max-width:340px}.categories{font-size:10px;letter-spacing:.2em;gap:12px;margin:18px 0 24px}.accent{width:38px;margin:18px 0}.cta{font-size:11px;min-height:48px;padding:0 21px;gap:28px}.hero-background::after{background:linear-gradient(180deg,#020708b0 0%,#02070660 48%,transparent 73%),linear-gradient(90deg,#0008,transparent)}.film-shell{padding:23px 0 22px}.film-track{gap:12px;padding:0 calc(50% - 90px)}.film-item{flex-basis:180px;height:115px}.film-shell:before,.film-shell:after{height:11px}.scroll-cue{bottom:184px;font-size:10px;right:7%}.scroll-cue:after{height:27px}.editorial{min-height:560px;padding:58px 7% 55px;align-items:flex-start}.editorial-copy{max-width:295px}.eyebrow{font-size:10px;letter-spacing:.26em;margin-bottom:20px}h2{font-size:46px}.editorial p:not(.eyebrow){font-size:16px;line-height:1.55;max-width:265px}.editorial:after{background:linear-gradient(90deg,#020403de,#02040380 55%,#02040315)}.editorial-art{left:-30%;right:-40%}.page{padding:130px 7% 60px}.project-link{display:block}.project-link h2{margin-top:16px;font-size:32px}dialog{padding:110px 9%}.video-toggle{bottom:170px;right:22%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Interaction layer. The established layout, type and palette stay unchanged. */
html{scrollbar-gutter:stable}body.menu-open{overflow:hidden}body.modal-locked{position:fixed;width:100%;overflow:hidden}.cta{transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}.cta:hover{transform:translateY(-2px);box-shadow:0 5px 18px #0003}.cta:active{transform:translateY(0) scale(.985)}.menu-toggle{transition:background .2s,transform .2s}.menu-toggle:hover{background:#ffffff0c;transform:scale(1.04)}.socials a{transition:opacity .2s,transform .2s}.socials a:hover{transform:translateY(-2px)}
.hero-copy> *{animation:hero-enter .7s cubic-bezier(.2,.7,.2,1) both}.hero-copy h1{animation-delay:80ms}.hero-copy .accent{animation-delay:140ms;transform-origin:left;animation-name:accent-enter}.hero-copy .categories{animation-delay:180ms}.hero-copy .cta{animation-delay:220ms}.hero-copy .cta:hover{animation-fill-mode:backwards}.reveal{opacity:0;transform:translateY(15px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}.reveal.revealed{opacity:1;transform:translateY(0)}.editorial-copy .accent.revealed{animation:accent-enter .6s ease both;transform-origin:left}.project-link svg,.project-link img{transition:transform .5s ease,opacity .4s}.project-link:hover svg,.project-link:hover img{transform:scale(1.008)}
@keyframes hero-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes accent-enter{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:scaleX(1)}}
#menu[open]{animation:menu-enter .22s ease-out}#menu nav a{transition:color .2s,transform .25s}#menu nav a:hover{transform:translateX(5px)}@keyframes menu-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
::view-transition-old(root){animation:route-out .16s ease both}::view-transition-new(root){animation:route-in .2s ease both}@keyframes route-out{to{opacity:0}}@keyframes route-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.film-shell{box-shadow:0 -9px 30px #0005,inset 0 1px #ffffff0b;background:linear-gradient(#070a08e8,#020403ed)}.film-shell:before,.film-shell:after{background:repeating-linear-gradient(90deg,transparent 0 14px,#575c5855 15px 26px,transparent 27px 35px);filter:drop-shadow(0 1px 1px #000)}.film-track{position:relative;scroll-snap-type:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;user-select:none;padding-top:12px;padding-bottom:8px;margin-top:-12px;margin-bottom:-8px;-webkit-overflow-scrolling:touch}.film-item{position:relative;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s,opacity .3s;transform-origin:center bottom;cursor:pointer;box-shadow:0 3px 8px #0008}.film-item img,.film-item svg{transition:transform .65s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden}.film-item[aria-current=true]{box-shadow:0 0 0 1px #00e65c30,0 4px 12px #0009}.film-item:active{transform:translateY(-2px) scale(1.015);border-color:var(--green)}.film-track.dragging .film-item{pointer-events:none;transition:none}.film-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:48px;background:#080c0ad9;border:1px solid #ffffff38;border-radius:3px;font-size:32px;line-height:1;box-shadow:0 3px 14px #0006;transition:opacity .2s,background .2s,border-color .2s}.film-prev{left:12px}.film-next{right:12px}.film-arrow:hover{border-color:var(--green);background:#101812}.film-arrow:disabled{opacity:0;pointer-events:none}.film-progress i{transition:left .16s ease;box-shadow:0 0 6px #00e65c26}
@media(hover:hover) and (pointer:fine){.film-item:hover,.film-item:focus-visible{z-index:2;transform:translateY(-5px) scale(1.035);opacity:1;border-color:var(--green);box-shadow:0 5px 20px #000b,0 0 12px #00e65c20}.film-item:hover img,.film-item:hover svg{transform:scale(1.035)}}
.gallery{padding:0;background:#030605f7;overflow:hidden;overscroll-behavior:contain;touch-action:pan-y;isolation:isolate}.gallery[open]{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:minmax(0,1fr) 60px;align-items:center;gap:0;padding:72px 24px 16px;animation:menu-enter .18s ease-out}.gallery::backdrop{background:#030504ed}.gallery-close,.gallery-prev,.gallery-next{z-index:3;width:48px;height:48px;background:#080c0ad9;border:1px solid #ffffff40;border-radius:50%;font-size:30px;display:grid;place-items:center;transition:border-color .2s,background .2s,transform .2s}.gallery-close{position:absolute;right:28px;top:20px}.gallery-prev,.gallery-next{justify-self:center}.gallery button:hover{border-color:var(--green);background:#ffffff0c}.gallery button:active{transform:scale(.95)}.gallery button:disabled{visibility:hidden}.gallery-stage{position:relative;align-self:stretch;min-height:0;min-width:0;touch-action:pan-y}.gallery-image{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.gallery-image>img,.gallery-image>svg{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.gallery-image>svg{width:100%;height:100%}.gallery-caption{grid-column:2;display:flex;justify-content:space-between;align-items:center;gap:16px;color:#c5c9c6;font-size:12px;letter-spacing:.13em}.gallery-count{white-space:nowrap;font-variant-numeric:tabular-nums}.gallery-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.15em;padding:16px;background:#050807df;z-index:4}.gallery-loading[hidden]{display:none}.gallery-loading span{height:2px;width:100%;background:var(--green);display:block;margin-top:12px;animation:loading-pulse 1s ease-in-out infinite alternate;transform-origin:left}@keyframes loading-pulse{from{opacity:.25;transform:scaleX(.3)}to{opacity:1;transform:scaleX(1)}}.gallery-error{color:var(--muted);text-align:center;font-size:16px;line-height:1.7}.gallery-error button{display:block;margin:20px auto;background:none;border:1px solid #ffffff50;padding:12px 20px}
@media(max-width:650px){.film-arrow{width:36px;height:44px}.film-prev{left:5px}.film-next{right:5px}.gallery[open]{grid-template-columns:45px minmax(0,1fr) 45px;grid-template-rows:minmax(0,1fr) 55px;padding:78px 4px 16px}.gallery-stage{grid-column:1/-1;grid-row:1}.gallery-prev,.gallery-next{grid-row:1;align-self:center;background:#050807b0;width:40px;height:44px;border-radius:3px}.gallery-prev{grid-column:1}.gallery-next{grid-column:3}.gallery-caption{grid-column:1/-1;padding:0 16px}.gallery-close{top:20px;right:20px}.film-item:focus-visible{outline-offset:2px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero-copy>*{animation:none}.film-progress i{transition:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.film-arrow{min-width:44px}.gallery-image>svg{overflow:hidden}

/* One moving film object. The viewport reserves lift space without altering layout. */
.film-shell{height:192px;padding:0;background:transparent;box-shadow:none}
.film-shell::before,.film-shell::after{display:none}
.film-shell .film-track{display:block;height:232px;margin:-40px 0 0;padding:40px 0 0;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scroll-snap-type:none;touch-action:pan-y;overscroll-behavior-x:none}
.film-reel{display:flex;width:max-content;height:192px;padding:28px 0 24px;background:linear-gradient(#070a08f2,#020403f5);box-shadow:inset 0 1px #ffffff0b}
.film-cell{position:relative;flex:0 0 240px;width:240px;height:140px;padding-right:16px}
.film-cell::before,.film-cell::after{content:'';position:absolute;left:0;width:100%;height:14px;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 8px,#575c5855 9px 20px,transparent 21px 30px);filter:drop-shadow(0 1px 1px #000)}
.film-cell::before{top:-22px}.film-cell::after{bottom:-18px}
.film-shell .film-item,.film-shell .film-item:hover,.film-shell .film-item:active,.film-shell .film-item:focus-visible{display:block;width:224px;height:140px;position:relative;padding:0;border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;opacity:1;transform:none;transition:none}
.film-shell .film-item img,.film-shell .film-item svg,.film-shell .film-item:hover img,.film-shell .film-item:hover svg{transform:none;transition:none}
.film-photo{display:block;position:absolute;inset:0;border-radius:4px;overflow:hidden;background:transparent;outline:1px solid transparent;outline-offset:-1px;opacity:.78;transform:translateY(0) scale(1);transform-origin:center center;transition:transform .34s cubic-bezier(.2,.75,.2,1),box-shadow .34s ease,outline-color .25s,opacity .25s;pointer-events:none}
.film-item[aria-current=true] .film-photo{outline-color:var(--green);opacity:1}
.film-shell .film-item:focus-visible .film-photo{outline:2px solid var(--green);opacity:1}
.film-shell .film-item:active .film-photo{transform:translateY(-4px) scale(1.03);opacity:1;box-shadow:0 0 12px #00e65c28}
@media(hover:hover) and (pointer:fine){.film-shell:not(.reel-moving) .film-item:hover{z-index:5}.film-shell:not(.reel-moving) .film-item:hover .film-photo{transform:translateY(-15px) scale(1.1);opacity:1;outline-color:var(--green);box-shadow:0 8px 18px #0008,0 0 15px #00e65c38}}
.film-shell.reel-moving .film-photo,.film-shell .film-track.dragging .film-photo{transform:translateY(0) scale(1);box-shadow:none}.film-shell .film-track.dragging .film-item{pointer-events:auto}
.film-arrow{z-index:8}
@media(max-width:650px){.film-shell{height:160px}.film-shell .film-track{height:200px}.film-reel{height:160px;padding:23px 0 22px}.film-cell{width:192px;flex-basis:192px;height:115px;padding-right:12px}.film-shell .film-item,.film-shell .film-item:hover,.film-shell .film-item:active,.film-shell .film-item:focus-visible{width:180px;height:115px}.film-cell::before,.film-cell::after{height:11px;background:repeating-linear-gradient(90deg,transparent 0 6px,#575c5855 7px 16px,transparent 17px 24px)}.film-cell::before{top:-17px}.film-cell::after{bottom:-16px}}
@media(prefers-reduced-motion:reduce){.film-shell:not(.reel-moving) .film-item:hover .film-photo,.film-shell .film-item:active .film-photo{transform:none}}

/* Original transparent artwork and a dial driven by actual reel displacement. */
.brand-logo img{border:0;background:transparent;box-shadow:none}
.scroll-cue::after{display:none}
.camera-dial{width:38px;height:38px;display:block;position:relative;border:1px solid #ffffff26;border-radius:50%;padding:3px;background:#05080736}
.camera-dial-rotor{display:block;width:100%;height:100%;border-radius:50%;position:relative;background:repeating-conic-gradient(from 0deg,#eee 0deg 3deg,#3b403e 3deg 12deg);box-shadow:0 1px 3px #0008;will-change:transform}
.camera-dial-rotor::before{content:'';position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#343a37,#101512 75%);border:1px solid #d9e1dc66}
.camera-dial-rotor::after{content:'';position:absolute;width:2px;height:5px;top:5px;left:calc(50% - 1px);background:var(--green);border-radius:1px}
@media(hover:hover) and (pointer:fine){.film-shell:not(.reel-moving) .film-item:hover .film-photo{box-shadow:0 8px 18px #0008,0 0 3px 1px #00e65cb3,0 0 13px #00e65c66,0 0 25px #00e65c26}}
@media(max-width:650px){.camera-dial{width:32px;height:32px;padding:2px}.hero-background video,.hero-background picture img{object-position:65% center}}

/* Placement-only framing; gallery/contain images do not receive this class. */
.placement-image{object-position:var(--frame-x) var(--frame-y)!important;transform:scale(var(--frame-z));transform-origin:var(--frame-x) var(--frame-y)}
@media(max-width:650px){.placement-image{object-position:var(--frame-mx) var(--frame-my)!important;transform:scale(var(--frame-mz));transform-origin:var(--frame-mx) var(--frame-my)}}

@media(max-width:760px){.v-photo .placement-image,.choice-preview .placement-image{object-position:var(--frame-mx) var(--frame-my)!important;transform:scale(var(--frame-mz));transform-origin:var(--frame-mx) var(--frame-my)}}

/* Optional complete-photo mobile editorial; desktop and cropped placements unchanged. */
@media(max-width:650px){.editorial.editorial-mobile-full{display:block;min-height:0;padding:0}.editorial-mobile-full .editorial-art{position:relative;inset:auto;z-index:auto;width:100%;height:auto}.editorial-mobile-full .editorial-art picture{display:block}.editorial-mobile-full .editorial-art img{display:block;width:100%;height:auto;object-fit:contain;transform:none!important}.editorial-mobile-full:after{display:none}.editorial-mobile-full .editorial-copy{max-width:none;padding:36px 7% 45px}}

/* Override framing uses the visible mobile section, not the legacy widened background. */
@media(max-width:650px){.editorial-mobile-override .editorial-art{left:0;right:0}}
