@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#101110;--ink:#f1f2ec;--muted:#9c9f98;--line:#30332c;--accent:#c5ff59;--lime:#c5ff59;--dark:#090b09}body{background:#101110;color:var(--ink)}h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif}::selection{background:var(--accent);color:#101110}header{position:sticky;top:12px;z-index:20;height:68px;margin:12px auto 0;width:90%;border:1px solid #ffffff1d;border-radius:50px;padding:0 25px;background:#121411dd;backdrop-filter:blur(20px);max-width:1300px}.brand em{color:#101110;background:var(--accent)}nav a{transition:color .2s}nav a:hover{color:var(--accent)}.nav-contact{border:0;background:var(--accent);color:#101110;padding:11px 18px;border-radius:40px}.nav-contact:hover{color:#101110;background:#e0ffac}.hero{max-width:1500px;padding-top:20px;padding-bottom:24px}.hero-stage{position:relative;border:1px solid #ffffff15;border-radius:30px;overflow:hidden;padding:35px 36px 0;background:radial-gradient(ellipse at 78% 40%,#3d285855,transparent 55%),#151713;isolation:isolate}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:65px 65px;z-index:-1;mask-image:linear-gradient(black,transparent)}.orb{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(95px);opacity:.23;pointer-events:none;z-index:-1;animation:orbDrift 14s ease-in-out infinite alternate}.orb-one{background:#dc4a16;right:-120px;top:160px}.orb-two{background:#a3f629;right:260px;bottom:-300px;animation-delay:-7s}.hero-top .eyebrow{color:#b2b5a8;font-size:9px}.edition{color:#7d8474;font-size:9px}.hero-content{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:640px;gap:10px}.hero-kicker{font-size:12px;color:#b0b5a7;margin-top:32px}h1{font-size:clamp(55px,6.8vw,96px);line-height:.99;letter-spacing:-5px;margin-top:24px;position:relative;z-index:3}h1 span{font-family:'Space Grotesk',sans-serif;font-style:normal;color:var(--accent);font-weight:500}.hero-copy>p{max-width:350px;font-size:13px;color:#a4aa9a;line-height:1.7;margin-top:24px}.hero-actions{margin:26px 0 35px;justify-content:flex-start}.pill{border-color:#585c50;color:var(--ink);transition:background .25s,color .25s,transform .25s}.pill.primary{background:var(--accent);color:#101110;border-color:var(--accent)}.pill.primary span{font-size:20px}.hero-art{position:relative;height:560px;perspective:1000px;transform:translate3d(var(--parallax-x,0px),var(--parallax-y,0px),0);transition:transform .5s ease-out}.floating-art{position:absolute;width:60%;padding:0;border:1px solid #ffffff30;border-radius:18px;overflow:hidden;background:#101110;box-shadow:0 20px 70px #0008;transition:filter .3s}.floating-art img{width:100%;height:auto}.art-front{left:5%;top:90px;transform:rotate(-12deg);animation:floatFront 7s ease-in-out infinite}.art-back{right:-1%;top:25px;transform:rotate(12deg);animation:floatBack 8s ease-in-out infinite}.floating-art:hover{filter:brightness(1.2);z-index:4}.orbit-label{position:absolute;top:0;left:6%;font-size:11px;letter-spacing:1.6px;color:var(--accent);transform:rotate(-8deg)}.art-note{position:absolute;bottom:4px;right:-3px;font-size:13px;line-height:1.45;transform:rotate(-6deg);background:var(--accent);color:#17200d;padding:20px 30px;border-radius:13px;z-index:5;box-shadow:0 8px 30px #0004}.art-note span{display:block;font-size:38px;line-height:1.1;margin-bottom:6px}.hero-foot{display:flex;justify-content:space-between;gap:16px;padding:22px 0;border-top:1px solid #ffffff16;font-size:8px;letter-spacing:1.4px;color:#9aa18e}.hero-foot a{color:var(--accent);display:flex;gap:16px}.hero-foot a span{display:inline-block;animation:bob 1.8s infinite}.strip{padding:28px 0;border-top:0;overflow:hidden;color:#909585;justify-content:space-around}.strip b{color:var(--accent)}.section{padding-top:90px;padding-bottom:90px}.eyebrow{color:var(--accent)}h2{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-2.5px;font-size:clamp(38px,4.4vw,64px)}.outline-text{color:#8b9481}.section-head p,.project p{color:#9c9f98}.filter{border-color:#343b2c;color:#a8ad9d;transition:all .25s}.filter[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#14190e}.filter:hover{border-color:var(--accent)}.project-grid{gap:45px 28px}.project-visual{border-radius:17px;height:450px;transition:transform .4s,border-color .3s;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border:1px solid #ffffff12;will-change:transform}.project-visual img{filter:drop-shadow(0 15px 22px #0002)}.project-visual:hover img{transform:scale(1.045)}.project-visual .open{width:44px;height:44px;background:#101110;color:var(--accent);transition:background .3s,color .3s,transform .3s}.project-visual:hover .open{background:var(--accent);color:#111;transform:rotate(45deg)}.project-meta h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:23px}.category{font-size:9px}.video-section{position:relative;overflow:hidden;border-top:1px solid #ffffff0d;border-bottom:1px solid #ffffff0d;background:radial-gradient(ellipse at 90% 0,#31431b33,transparent 45%),#090c08}.video-section h2 span{font-family:'Space Grotesk',sans-serif;font-style:normal}.video-card button{border-radius:15px;border:1px solid #ffffff18;transition:border-color .3s,transform .3s}.video-card button:hover{border-color:var(--accent);transform:translateY(-5px)}.play{background:var(--accent);color:#111;transition:transform .3s,box-shadow .3s}.video-card button:hover .play{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 13px #c5ff591c}.video-card h3{font-family:'Space Grotesk',sans-serif;font-size:21px}.about-copy>p,.about-copy>p:first-child{color:#a8ae9e}.about-copy>p:first-child{color:#f1f2ec}.services div{transition:padding .3s,color .3s}.services div:hover{padding-left:12px;color:var(--accent)}.contact{margin:0 3vw;border-radius:25px;background:radial-gradient(ellipse at 80% 120%,#d5ff97,transparent 60%),var(--accent);color:#17210e;position:relative;overflow:hidden}.contact:after{content:'✳';font-size:400px;position:absolute;right:12%;top:-125px;opacity:.055;pointer-events:none;animation:spin 50s linear infinite}.contact h2{font-size:clamp(42px,5vw,74px);position:relative;z-index:1}.contact h2 em{font-style:normal}.contact p{color:#455b2a}.contact .eyebrow{color:#35471e}.contact .pill{background:#17210e;color:#efffdc;position:relative;z-index:1}.contact .pill:hover{background:#2a3d18}.footer-row{padding:8px 0 0}.modal{background:#191c16;color:var(--ink);border:1px solid #ffffff26;border-radius:18px}.modal-bar{background:#191c16}.modal-info,.modal-caption{color:#a8ae9e}.modal-info strong{color:var(--accent)}.modal-images img{background:#282e22;border-radius:12px}.close{color:var(--ink)}.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--accent);transform:scaleX(var(--scroll,0));transform-origin:left;z-index:100}.cursor-glow{position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,#c5ff5907,transparent 65%);pointer-events:none;z-index:1;transform:translate(-1000px,-1000px)}.reveal-ready{opacity:0;transform:translateY(32px);transition:opacity .7s,transform .7s;transition-delay:var(--delay,0ms)}.reveal-ready.is-visible{opacity:1;transform:translateY(0)}.hero-copy{animation:enter .9s ease both}.hero-art{animation:enter 1.1s ease both}.section.flash h2{animation:headingFlash .6s ease}
@keyframes floatFront{50%{transform:translateY(-18px) rotate(-9deg)}}@keyframes floatBack{50%{transform:translateY(15px) rotate(15deg)}}@keyframes orbDrift{to{transform:translate(-80px,-60px) scale(1.2)}}@keyframes bob{50%{transform:translateY(5px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes enter{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}@keyframes headingFlash{50%{color:var(--accent)}}
@media(max-width:1000px){.hero-stage{padding:28px 25px 0}.hero-content{min-height:590px}.hero-art{height:470px}.art-front{top:110px}.art-note{bottom:0;font-size:11px;padding:15px 20px}.hero-actions{flex-direction:row;align-items:center}.hero-foot{font-size:7px}.project-visual{height:370px}}
@media(max-width:600px){header{top:8px;width:92%;height:59px;padding:0 17px}.hero{padding:16px 4vw 20px}.hero-stage{border-radius:22px;padding:24px 20px 0}.hero-top .eyebrow{font-size:8px;letter-spacing:1px}.hero-content{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0}.hero-kicker{margin-top:26px;font-size:10px}h1{font-size:58px;letter-spacing:-3.5px;line-height:1;margin-top:18px}.hero-copy>p{font-size:12px;max-width:280px;margin-top:22px}.hero-actions{margin:22px 0 5px}.hero-art{height:360px;width:100%;max-width:370px;margin:20px auto 0}.floating-art{width:53%;border-radius:12px}.art-front{left:10%;top:43px}.art-back{right:6%;top:6px}.orbit-label{top:0;left:3%;font-size:8px}.art-note{bottom:16px;right:0;font-size:10px;padding:12px 18px}.art-note span{font-size:28px}.hero-foot{font-size:7px;letter-spacing:.7px;padding:16px 0}.hero-foot>span:last-child{display:none}.strip{font-size:9px;padding:12px 0 22px;gap:16px}.strip>span{width:auto}.strip>span:first-child{display:none}.section{padding-top:58px;padding-bottom:55px}h2{font-size:39px;letter-spacing:-1.9px}.section-head p{font-size:12px}.project-visual{height:365px;border-radius:13px}.project-meta h3{font-size:21px}.project-grid{gap:34px}.contact{margin:0 4vw;border-radius:20px;padding:40px 0}.contact h2{font-size:41px;letter-spacing:-2px}.contact p{font-size:13px}.contact:after{right:-140px}.cursor-glow{display:none}.modal{width:95vw}.modal-bar{gap:10px}.hero-foot a{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready{opacity:1;transform:none}.hero-art,.project-visual{transform:none!important}.cursor-glow{display:none}}
/* Stronger text contrast on dark surfaces. */
:root{--muted:#c8cec2}
.hero-top .eyebrow,.edition,.hero-kicker,.hero-copy>p,.hero-foot,.strip,.hero-caption,.section-head p,.project p,.project-meta .year,.video-section .section-head p,.video-card p,.about-copy>p,.modal-info,.modal-caption,.footer-row{color:#c8cec2}
.outline-text{color:#dde3d5}
.filter{color:#e0e5da;border-color:#69725f}
.category,.eyebrow,.services small{color:#c5ff59}
.about-copy>p:first-child{color:#f5f7ef}
.modal-info strong{color:#c5ff59}
.contact .eyebrow,.contact p{color:#293b19}
.hero-foot a{color:#c5ff59}
.project[data-type="banner"] .project-visual{height:250px;padding:20px;background:#d8dfce}
.project[data-type="banner"] .project-visual img{width:100%;height:auto;max-height:100%;object-fit:contain}
.project[data-type="banner"] .project-meta h3{font-size:21px}
.project-visual.multi{gap:0}
@media(max-width:600px){.project[data-type="banner"] .project-visual{height:190px;padding:12px}.project[data-type="banner"] .project-meta h3{font-size:20px}}
.mockups-section{border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 5% 40%,#31392338,transparent 60%)}
.mockup-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 26px}
.mockup-card{min-width:0}.mockup-card .project-visual{height:auto;aspect-ratio:1.5;padding:0;background:#e2e2e2;border-radius:18px}
.mockup-card .project-visual img{width:100%;height:100%;max-width:none;object-fit:contain;filter:none}
.mockup-card .category{margin-top:19px;line-height:1.7}
.mockup-card h3{font:500 24px 'Space Grotesk',sans-serif;margin-top:8px;letter-spacing:-.6px}
.mockup-card p{font-size:13px;line-height:1.7;color:#c8cec2;margin-top:10px;max-width:490px}
.mockup-card:first-child .project-visual{aspect-ratio:1.78}
@media(max-width:600px){nav{gap:12px;font-size:10px}.mockup-grid{grid-template-columns:1fr;gap:30px}.mockup-card h3{font-size:22px}.mockup-card .project-visual{border-radius:13px}}
/* Annotation updates: video headings, marker and continuous services strip. */
#video-grid .video-card h3{color:#ffffff}
#videos .section-head h2 .play-highlight{position:relative;display:inline-block;isolation:isolate;color:#c5ff59;font-style:normal;padding:0 .06em;margin-left:-.06em}
.play-highlight::before{content:'';position:absolute;inset:7% -.04em 0;z-index:-1;background:#c5ff59;transform:scaleX(0);transform-origin:left;border-radius:.07em}
.play-highlight.marker-active{animation:markerInk 1.1s ease forwards}
.play-highlight.marker-active::before{animation:markerSweep 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes markerSweep{0%,12%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes markerInk{0%,25%{color:#c5ff59}65%,100%{color:#142008}}
.strip.marquee{display:block;width:100%;padding:27px 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;width:max-content;animation:servicesScroll 26s linear infinite}
.marquee-group{display:flex;flex-shrink:0;align-items:center;gap:55px;padding-right:55px;white-space:nowrap}
.marquee-group>span{display:inline-flex;gap:20px;align-items:center;width:auto!important;font-size:12px;color:#d6ddcc;letter-spacing:1px}
.marquee-group b{color:#c5ff59;font-size:22px}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes servicesScroll{to{transform:translateX(-50%)}}
@media(max-width:600px){.strip.marquee{padding:19px 0}.marquee-group{gap:30px;padding-right:30px}.marquee-group>span{font-size:10px}.marquee-group>span:first-child{display:inline-flex}.marquee-track{animation-duration:23s}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;max-width:100%;width:auto}.marquee-group{flex-wrap:wrap;gap:16px;padding-right:0;white-space:normal}.marquee-group[aria-hidden=true]{display:none}.play-highlight::before{transform:scaleX(1)}#videos .section-head h2 .play-highlight{color:#142008}}
.animated-title .title-word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em;font:inherit;color:inherit}
.animated-title .title-word{display:inline-block;font:inherit;color:inherit;font-style:inherit}
.title-playing .title-word{animation:titleWordEnter .85s cubic-bezier(.18,.75,.2,1) both;animation-delay:var(--word-delay,0ms)}
#mockups .title-playing .title-word{animation-name:titleWordFocus}
#sobre .title-playing .title-word{animation-name:titleWordIntroduce}
@keyframes titleWordEnter{from{opacity:0;transform:translateY(110%) rotate(3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes titleWordFocus{from{opacity:0;filter:blur(7px);transform:translateY(75%) scale(.92)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes titleWordIntroduce{from{opacity:0;transform:translateX(-22px) translateY(45%)}to{opacity:1;transform:translateX(0) translateY(0)}}
@media(prefers-reduced-motion:reduce){.animated-title .title-word{animation:none!important;opacity:1;transform:none;filter:none}}

/* Spacious footer */
footer.wrap{padding-top:42px;padding-bottom:42px}.footer-row{min-height:48px;padding:22px 0 0;border-top:1px solid var(--line);font-size:13px;line-height:1.7;gap:28px;color:#b6bbaf}.footer-links{gap:30px;flex-wrap:wrap}.footer-links a{display:inline-flex;align-items:center;min-height:44px}.footer-links a:hover{color:var(--accent)}
@media(max-width:600px){footer.wrap{padding-top:30px;padding-bottom:32px}.footer-row{padding-top:22px;gap:16px;font-size:12px}.footer-links{gap:26px}}

/* One entrance per heading, without underline decoration. */
.title-playing .title-word{animation-duration:1.15s}
.animated-title{position:relative;width:fit-content}
.play-highlight.marker-active{animation:markerInk 1.1s ease forwards}
.play-highlight.marker-active::before{animation:markerSweep 1.1s cubic-bezier(.2,.7,.2,1) forwards}
#videos .section-head h2 .play-highlight .title-word{color:inherit}
@media(prefers-reduced-motion:reduce){.play-highlight.marker-active,.play-highlight.marker-active::before{animation:none!important}.animated-title .title-word{animation:none!important}}

/* Dark art frames with a pointer-following light. */
.project-visual,.mockup-card .project-visual{background:#20231e!important;isolation:isolate;border:1px solid #ffffff16;transition:transform .4s,border-color .25s,box-shadow .25s}
.project-visual::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(320px circle at var(--light-x,50%) var(--light-y,50%),#c5ff5926,transparent 72%);opacity:0;transition:opacity .3s}
.project-visual .open{z-index:2}
@media(hover:hover) and (pointer:fine){.project-visual:hover{border-color:#c5ff5970;box-shadow:0 0 28px #c5ff5914,inset 0 0 24px #c5ff590a}.project-visual:hover::after{opacity:1}}
.project-visual:focus-visible{border-color:var(--accent);box-shadow:0 0 24px #c5ff5920}

/* Slow ambient light behind every artwork; pointer light stays above. */
.project-visual::before{content:'';position:absolute;left:-25%;top:-25%;width:150%;height:150%;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at center,#c5ff5959 0%,#c5ff5929 22%,transparent 57%);animation:artAmbient var(--ambient-duration,29s) ease-in-out var(--ambient-delay,-8s) infinite alternate;will-change:transform}
.project-visual>img{position:relative;z-index:1}
.project-visual::after{z-index:2}.project-visual .open{z-index:3}
@keyframes artAmbient{0%{transform:translate(var(--ambient-x1,-28%),var(--ambient-y1,-18%)) scale(.85)}36%{transform:translate(var(--ambient-x2,25%),var(--ambient-y2,12%)) scale(1.08)}72%{transform:translate(var(--ambient-x3,-8%),var(--ambient-y3,29%)) scale(.94)}100%{transform:translate(var(--ambient-x4,22%),var(--ambient-y4,-25%)) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.project-visual::before{animation:none;transform:translate(10%,-10%);will-change:auto}}

/* The ambient light itself follows the pointer, always behind the image. */
.project-visual::after{content:none!important}
.project-visual::before{transition:transform .45s ease-out}
@media(hover:hover) and (pointer:fine){.project-visual.light-follow::before{animation:none;transform:translate(var(--pointer-shift-x,0%),var(--pointer-shift-y,0%)) scale(1)}}

/* Resting light: lower-left corner, with pointer interaction retained. */
.project-visual::before{animation:none;transform:translate(-33.333%,33.333%) scale(1);will-change:auto}
@media(prefers-reduced-motion:reduce){.project-visual::before{transform:translate(-33.333%,33.333%) scale(1)}}

/* Mockups fill uniform frames with their own light backgrounds. */
.mockup-card .project-visual{display:block;width:100%;height:auto;aspect-ratio:16/10;padding:0;background:#fff!important;border:0;box-shadow:none;transform:none}
.mockup-card .project-visual::before,.mockup-card .project-visual::after{content:none!important}
.mockup-card .project-visual img{display:block;width:100%;height:100%;padding:0;object-fit:cover;object-position:center;filter:none;transform:none}
.mockup-card .project-visual:hover{border:0;box-shadow:none;transform:none}
.mockup-card .project-visual:hover img{transform:none}

/* Video showcase: one widescreen feature, then four portrait films. */
#video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:42px 24px;align-items:start}
#video-grid .video-card{min-width:0;grid-column:auto}
#video-grid .video-card:not(.vertical){grid-column:1/-1;width:min(100%,960px);justify-self:center;margin-bottom:18px}
#video-grid .video-card button{display:block;width:100%;height:auto;padding:0;aspect-ratio:16/9;background:#060806;border:1px solid #ffffff18;border-radius:16px;overflow:hidden}
#video-grid .video-card.vertical button{height:auto;aspect-ratio:9/16}
#video-grid .video-card img{display:block;width:100%;height:100%;object-fit:cover;padding:0}
#video-grid .video-card h3{font-size:20px;line-height:1.3;margin-top:17px}
#video-grid .video-card:not(.vertical) h3{font-size:28px}
#video-grid .video-card .category{display:block;margin-top:10px;line-height:1.6;font-size:9px}
#video-grid .video-card p{margin-top:9px;font-size:12px;line-height:1.7}
#video-grid .video-card:not(.vertical) p{max-width:690px;font-size:14px}
#video-grid .play{width:52px;height:52px;font-size:16px}
#video-grid .video-card:not(.vertical) .play{width:72px;height:72px;font-size:24px}
@media(max-width:900px){#video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}}
@media(max-width:600px){#video-grid{gap:30px 14px}#video-grid .video-card:not(.vertical){margin-bottom:2px}#video-grid .video-card h3{font-size:17px}#video-grid .video-card:not(.vertical) h3{font-size:23px}#video-grid .video-card .category{font-size:8px}#video-grid .video-card p{font-size:11px}#video-grid .video-card button{border-radius:12px}#video-grid .video-card:not(.vertical) .play{width:56px;height:56px;font-size:19px}}

/* Additional landscape films share a row below the lead film. */
#video-grid .video-card:not(.vertical){grid-column:span 2;width:100%;margin-bottom:0}
#video-grid .video-card:first-child{grid-column:1/-1;width:min(100%,960px);justify-self:center;margin-bottom:18px}
#video-grid .video-card:not(.vertical):not(:first-child) h3{font-size:23px}
@media(max-width:900px){#video-grid .video-card:not(.vertical){grid-column:1/-1}}