[hidden]{display:none!important}:root{--site-font:Arial,Helvetica,sans-serif;--heading-size:76px;--section-space:72px;--button-radius:4px;--logo-size:44px;--motion-duration:.6s}body{font-family:var(--site-font);font-size:16px}.eyebrow{font-size:12px;letter-spacing:.14em}.button{border-radius:var(--button-radius);font-size:14px;transition:transform .2s,filter .2s}.button:hover{transform:translateY(-2px)}.button:active{transform:scale(.97)}.section{padding-top:var(--section-space);padding-bottom:var(--section-space)}h1{font-size:var(--heading-size);line-height:1.06;letter-spacing:-.045em}.brand-mark{width:var(--logo-size);height:var(--logo-size)}.brand-mark img{width:230%;left:-72%;top:-87%}.header-inner{height:98px}.header-inner nav a,.header-cta{font-size:14px}.brand small{font-size:10px}.brand{font-size:24px}.showreel-hero{padding-top:24px}.cinema-surface{position:relative;height:580px;isolation:isolate;background:var(--panel);overflow:hidden;border:1px solid var(--line);border-radius:5px}.hero-poster,#hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.cinema-shade{position:absolute;inset:0;background:linear-gradient(90deg,#081012eb 0%,#0b1118b5 42%,#08101238 78%),linear-gradient(0deg,#0c1319bb,transparent 35%);z-index:-1}.hero-content{padding:65px 6%;max-width:760px;color:#fff}.hero-content .eyebrow{color:#d3dddf;font-size:12px;max-width:330px}.hero-content h1{font-size:clamp(48px,5.3vw,var(--heading-size));max-width:630px;line-height:1.06}.hero-content p:not(.eyebrow){font-size:18px;line-height:1.6;max-width:390px;color:#d2dcdf;margin:24px 0}.watch-showreel{position:absolute;right:7%;top:48%;display:flex;gap:18px;align-items:center;background:none;border:0;color:white;font-size:14px;font-weight:600}.play-circle{display:grid;place-items:center;width:76px;height:76px;border:1.5px solid #ffffffc0;border-radius:50%;font-size:23px;background:#14222588;backdrop-filter:blur(8px);padding-left:3px}.watch-showreel:hover .play-circle{background:var(--cyan);color:#101719;border-color:var(--cyan)}.film-controls{position:absolute;bottom:22px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff45;padding-top:17px;color:#e1e5e6;font-size:12px;gap:15px}.film-controls>span{letter-spacing:.12em;font:12px 'Courier New'}.film-controls>div{display:flex;gap:12px}.film-controls button{background:#0c151999;color:white;border:1px solid #fff5;border-radius:30px;font-size:12px;padding:6px 13px}.film-controls a{font-size:11px}.marketing-section{display:grid;grid-template-columns:.9fr 1.2fr;gap:8%;align-items:center}.marketing-section h2{font-size:clamp(34px,3.1vw,46px)}.marketing-section .lead{font-size:16px}.marketing-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.marketing-pillars>a{padding-left:24px;border-left:1px solid var(--line)}.marketing-pillars h3{font-size:20px;line-height:1.2;letter-spacing:-.025em;margin:20px 0 14px}.marketing-pillars p{font-size:14px;color:var(--muted);line-height:1.6}.service-icon{font-family:Arial,sans-serif}.brand-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:26px;padding-bottom:30px}.brand-section .eyebrow{margin-bottom:20px}.marquee{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}.marquee::-webkit-scrollbar{display:none}.marquee-track{display:flex;width:max-content;gap:24px;padding-right:24px}.client-logo{flex-shrink:0;width:200px;height:65px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);color:var(--muted);font:17px 'Courier New',monospace;letter-spacing:.17em}.client-logo img{max-height:58px;max-width:170px;object-fit:contain}.films-section .section-head h2{font-size:45px}.films-section .lead{font-size:15px;margin-top:12px;max-width:600px}.film-card{width:365px;flex-shrink:0;text-align:left;padding:0;background:none;border:0;color:var(--ink);font:inherit}.film-cover{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--panel);border-radius:5px}.film-cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--motion-duration)}.film-cover>.play-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;font-size:18px}.film-card:hover img{transform:scale(1.05)}.film-index{position:absolute;bottom:13px;right:16px;font:12px 'Courier New';color:#fff;background:#10191daa;padding:3px 8px;border-radius:20px}.film-caption{padding-top:18px}.film-caption>span{font:12px 'Courier New';text-transform:uppercase;color:var(--cyan)}.film-caption h3{font-size:27px;margin:10px 0}.film-caption small{color:var(--muted);font-size:12px}.rail-controls{display:flex;gap:10px}.rail-controls button{border:1px solid var(--line);border-radius:30px;background:none;color:var(--ink);padding:9px 16px;font-size:14px}.rail-controls button:hover{border-color:var(--cyan)}.service-list small{font-size:12px}.service-tile p,.process-grid p{font-size:16px}.service-tile a{font-size:14px}.footer-invite h2{font-size:clamp(36px,4vw,58px);max-width:750px}.footer-bottom{flex-wrap:wrap}.footer-bottom>div,.footer-bottom>span,.footer-bottom>a{font-size:13px}.socials{display:flex;gap:20px}.socials a{display:grid;place-items:center;width:34px;height:34px}.socials a:hover{color:var(--cyan)}#floating-contact{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:grid;gap:10px;z-index:40}.float-contact{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#00cfe8;color:#fff;border:1px solid #ffffff40;box-shadow:0 5px 20px #0005;transition:transform .2s}.float-contact:hover{transform:translateY(-3px)}.float-contact.whatsapp{background:#25d366;color:#fff}.float-contact:focus-visible{outline:3px solid #fff;outline-offset:4px}.float-contact svg{display:block;flex-shrink:0}body:has(dialog[open]) #floating-contact{display:none}label{font-size:14px}.form-note,.form-status{font-size:13px}.contact-details{overflow-wrap:anywhere}.contact-form input::placeholder,.contact-form textarea::placeholder{font-size:14px}#project-content>video,#project-content>iframe{aspect-ratio:auto;min-height:320px;max-height:72vh;object-fit:contain;background:#000}#project-content>iframe{aspect-ratio:16/9}.intro-active{overflow:hidden}#studio-intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;color:var(--ink)}.intro-skip{position:absolute;top:30px;right:30px;color:var(--ink);border:1px solid var(--line);background:none;border-radius:30px;padding:10px 20px;font-size:14px;z-index:1}.intro-center{text-align:center;animation:logo-reveal 1.6s both}.intro-center>img{width:min(350px,70vw);height:min(350px,70vw);object-fit:cover;object-position:50% 47%;mix-blend-mode:lighten;margin:auto}.intro-center>p{font:30px Arial;letter-spacing:.2em}.intro-center>p span{display:block;font:11px Arial;letter-spacing:.5em;margin-top:14px}.intro-center>video{width:100vw;height:100vh;object-fit:contain}.intro-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--cyan);transform-origin:left;animation:intro-progress 2.5s ease-out both}.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--motion-duration),transform var(--motion-duration)}.reveal.in-view{opacity:1;transform:none}.motion-off *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.motion-off .reveal{opacity:1;transform:none}.preview-mode #floating-contact{position:fixed}@keyframes logo-reveal{from{opacity:0;transform:scale(.88);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes intro-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}@view-transition{navigation:auto}::view-transition-old(root){animation:page-out .18s both}::view-transition-new(root){animation:page-in .28s both}@keyframes page-out{to{opacity:0}}@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.cinema-surface{height:560px}.hero-content{max-width:650px}.hero-content h1{font-size:60px}.watch-showreel{right:5%;top:56%;flex-direction:column;gap:9px}.marketing-section{grid-template-columns:1fr;gap:35px}.marketing-section>div:first-child{max-width:670px}.marketing-section .lead{max-width:650px}.marketing-pillars{gap:30px}.header-inner nav{gap:20px}.film-card{width:330px}}@media(max-width:760px){.wrap{width:90%}.header-inner{height:82px}.header-inner nav{top:82px}.showreel-hero{padding-top:14px}.cinema-surface{height:620px;border-radius:4px}.hero-content{padding:38px 7%}.hero-content h1{font-size:clamp(43px,11vw,60px)}.hero-content .eyebrow{font-size:11px;max-width:260px}.hero-content p:not(.eyebrow){font-size:16px;margin:20px 0;max-width:270px}.cinema-shade{background:linear-gradient(0deg,#09151bdd,transparent 35%),linear-gradient(90deg,#09121bcc,#0d19277a)}.watch-showreel{right:7%;top:auto;bottom:100px;flex-direction:row;font-size:13px}.play-circle{width:58px;height:58px;font-size:18px}.film-controls{bottom:18px;left:7%;right:7%;flex-wrap:wrap;font-size:11px}.film-controls>a{display:none}.film-controls>span{font-size:10px}.film-controls button{padding:6px 10px;font-size:11px}.section{padding-top:calc(var(--section-space)*.72);padding-bottom:calc(var(--section-space)*.72)}.marketing-section h2{font-size:35px}.marketing-pillars{grid-template-columns:1fr;gap:25px}.marketing-pillars>a{display:grid;grid-template-columns:40px 1fr;gap:0 18px;border-left:0;border-top:1px solid var(--line);padding:20px 0 0}.marketing-pillars h3{margin:8px 0 12px;font-size:21px}.marketing-pillars p{grid-column:2;font-size:15px}.brand-section .eyebrow{font-size:11px}.client-logo{width:165px;font-size:14px;height:55px}.films-section .section-head{gap:20px}.films-section .section-head h2{font-size:37px}.film-card{width:min(78vw,350px)}.marquee-track{gap:16px;padding-right:16px}.film-caption h3{font-size:25px}.rail-controls button{font-size:13px;padding:8px 15px}.footer-invite{align-items:start;flex-direction:column}.footer-invite h2{font-size:39px}.footer-bottom>div{width:auto}.footer-bottom>span{width:100%;font-size:12px}.footer-bottom .brand{font-size:22px}#floating-contact{right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));gap:9px}.float-contact{width:45px;height:45px}.contact-form{padding:24px}.contact-grid h1{font-size:49px}#project-content>video{min-height:200px;max-height:72vh}.eyebrow{font-size:12px}.header-inner nav a{font-size:17px}.intro-skip{top:20px;right:20px}.button{font-size:14px}.brand small{font-size:9px}.menu-toggle{font-size:13px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*,::view-transition-old(root),::view-transition-new(root){animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* One uninterrupted showreel, from the opening reveal to its homepage frame. */
#hero-film{pointer-events:none}#hero-film::-webkit-media-controls{display:none!important}
.hero-embed{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:-3;pointer-events:none}
.film-caption-bar{position:absolute;bottom:22px;left:6%;right:6%;display:flex;justify-content:space-between;gap:16px;color:#e1e5e6;font:11px 'Courier New',monospace;letter-spacing:.12em}
.intro-cinema .hero-content,.intro-cinema .cinema-shade,.intro-cinema .film-caption-bar{opacity:0}
.intro-progress{animation-duration:var(--intro-duration,2.5s)}

/* Opposite, seamless production and client trains. */
.client-train,.works-train{overflow:hidden;scrollbar-width:none}
.client-train-track,.works-train-track{display:flex;width:max-content;will-change:transform}
.client-train-track{animation:none}
.works-train-track{animation:none}
.train-group{display:flex;flex:none;width:max-content;gap:24px;padding-right:24px}
.works-train:focus-within .works-train-track,.train-paused .works-train-track,body:has(dialog[open]) .works-train-track{animation-play-state:paused}
@keyframes client-train-loop{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--train-distance)),0,0)}}
@keyframes work-train-loop{from{transform:translate3d(calc(-1 * var(--train-distance)),0,0)}to{transform:translate3d(0,0,0)}}
/* Transparent entry layer leaves the full-screen showreel visible immediately. */
#video-entry{position:fixed;inset:0;z-index:110;pointer-events:none;background:transparent}
#video-entry .intro-skip{pointer-events:auto;background:#ffffff12;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.marketing-section{position:relative;background:var(--bg);border-radius:24px 24px 0 0}
.marketing-section.marketing-entering{z-index:101;box-shadow:0 -24px 65px #0005;transition:none}
.header-inner .header-cta{border:1px solid #ffffff3d;border-radius:999px;padding:14px 24px;background:linear-gradient(135deg,#ffffff21,#ffffff08);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);box-shadow:inset 0 1px 0 #ffffff2b,0 6px 25px #0002;color:var(--ink);gap:15px;transition:background .25s,transform .25s}
.header-inner .header-cta:hover{background:#ffffff25;transform:translateY(-2px)}
.header-inner .header-cta:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media(max-width:760px){.train-group{gap:16px;padding-right:16px}.film-caption-bar{left:7%;right:7%;bottom:18px;font-size:10px}.header-inner .header-cta{display:flex;font-size:11px;padding:10px 13px;gap:5px}.header-inner{gap:12px}.header-inner .brand{font-size:19px}.header-inner .brand-mark{width:34px;height:34px}.header-inner .brand small{font-size:7px}.menu-toggle{margin-left:auto}.marketing-section{border-radius:18px 18px 0 0}}
@media(prefers-reduced-motion:reduce){.client-train,.works-train{overflow-x:auto}.client-train-track,.works-train-track{animation:none;transform:none}.train-group[aria-hidden=true]{display:none}}
@media(max-width:380px){.header-inner{gap:8px}.header-inner .brand{font-size:16px;gap:8px}.header-inner .brand small{font-size:6px}.header-inner .brand-mark{width:30px;height:30px;flex-shrink:0}.header-inner .header-cta{white-space:nowrap;font-size:10px;padding:10px;gap:4px;flex-shrink:0}.header-inner .menu-toggle{white-space:nowrap;padding:8px;font-size:11px}.film-caption-bar{letter-spacing:.06em;font-size:9px}}
/* Keep video above the surface background while its fixed opening frame animates. */
#hero-film,.hero-embed{z-index:0}.cinema-shade{z-index:1;pointer-events:none}.hero-content{position:relative;z-index:2}.film-caption-bar{z-index:2}

.client-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.client-heading .eyebrow{margin:0}.client-heading button{flex-shrink:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:11px Arial,sans-serif;padding:7px 12px}.client-heading button:hover{color:var(--ink);border-color:var(--cyan)}.client-train .train-group[aria-hidden=true],.works-train .train-group[aria-hidden=true]{display:flex}.client-train,.works-train{overflow:hidden}

/* Supplied cyan wave artwork, kept in one viewport-sized layer on every page. */
body.wave-background{isolation:isolate;min-height:100svh}
body.wave-background::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#00141980,#00000010),var(--site-background-image);background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.wave-background .marketing-section{background:color-mix(in srgb,var(--bg) 48%,transparent)}
.wave-background .expertise{background:color-mix(in srgb,var(--panel) 68%,transparent)}
.wave-background .service-tile,.wave-background .contact-form,.wave-background .founder{background:color-mix(in srgb,var(--panel) 86%,transparent);border:1px solid #ffffff18}
.wave-background .header-inner{border-bottom-color:#ffffff30}
.wave-background .brand-section{border-color:#ffffff30}

/* Edge-to-edge, viewport-height showreel with navigation over the picture. */
.showreel-hero.wrap{width:100%;max-width:none;margin:0;padding:0}
.showreel-hero .cinema-surface{width:100%;height:100vh;height:100svh;min-height:0;aspect-ratio:auto;border:0;border-radius:0;display:flex;align-items:center}
.showreel-hero #hero-film{width:100%;height:100%;object-fit:cover;object-position:center;background:#000}
.showreel-hero .hero-content{width:100%;max-width:900px;padding:125px 6% 100px}
.immersive-home #header{position:absolute;inset:0 0 auto;z-index:30;background:linear-gradient(#0009,transparent)}
.immersive-home .header-inner{border-bottom:0}
.immersive-home .header-inner nav a{color:#fff;text-shadow:0 1px 8px #0009}
.immersive-home .header-inner nav a[aria-current]{color:var(--cyan)}
.immersive-home .brand{color:#fff;text-shadow:0 1px 8px #0009}
.showreel-hero .film-caption-bar{bottom:max(26px,env(safe-area-inset-bottom));right:100px}
@media(max-width:760px){
 .showreel-hero .hero-content{padding:110px 7% 105px}
 .showreel-hero .hero-content h1{font-size:clamp(38px,10vw,60px)}
 .showreel-hero .film-caption-bar{bottom:max(24px,env(safe-area-inset-bottom));right:80px;letter-spacing:.04em}
 .immersive-home .header-inner .menu-toggle{color:#fff;border-color:#ffffff55;background:#0003}
}
@media(max-height:560px){
 .showreel-hero .hero-content{padding:95px 6% 60px;max-width:760px}
 .showreel-hero .hero-content h1{font-size:clamp(28px,5vw,48px)}
 .showreel-hero .hero-content .eyebrow{margin-bottom:12px}
 .showreel-hero .hero-content p:not(.eyebrow){font-size:14px;margin:12px 0}
 .showreel-hero .hero-content .button{padding:10px 18px}
}

.brand-mark.custom-logo img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center}

/* Cyan portfolio filters and a responsive gallery of published work. */
.view-all-work{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:10px 18px;border:1px solid #00ffff70;border-radius:999px;color:#00ffff;font-size:14px;white-space:nowrap;background:#00ffff0a;transition:background .2s,color .2s}
.view-all-work:hover{background:#00ffff;color:#003333}
.films-section .rail-controls{flex-wrap:wrap;align-items:center}
.portfolio-page{padding-top:64px;padding-bottom:100px;--portfolio-accent:#00ffff}
.portfolio-back{font-size:14px;color:var(--muted);display:inline-block;margin-bottom:44px}.portfolio-back:hover{color:var(--portfolio-accent)}
.portfolio-heading .eyebrow{margin-bottom:18px}.portfolio-heading h1{font-size:clamp(58px,8vw,112px)}.portfolio-heading h1 span{color:var(--portfolio-accent)}.portfolio-heading .lead{max-width:640px;margin-top:22px}
.portfolio-toolbar{margin:50px 0 30px;padding:24px 0 0;border-top:1px solid #ffffff25}.work-filters{display:flex;gap:10px;flex-wrap:wrap}
.work-filters button{display:inline-flex;gap:12px;align-items:center;border:1px solid #ffffff30;background:#001f2480;color:var(--ink);border-radius:999px;padding:12px 18px;font-size:14px;text-align:left;line-height:1.4}
.work-filters button span{font-size:12px;opacity:.75}.work-filters button:hover{border-color:var(--portfolio-accent)}.work-filters button[aria-pressed=true]{background:var(--portfolio-accent);border-color:var(--portfolio-accent);color:#003333}
#work-count{margin-top:22px;font-size:14px;color:var(--muted)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}.portfolio-grid .film-card{width:100%;min-width:0;display:block}.portfolio-grid .film-card[hidden],.portfolio-empty[hidden]{display:none!important}.portfolio-grid .film-cover{border:1px solid #ffffff20;border-radius:10px;aspect-ratio:16/10}.portfolio-grid .film-caption h3{font-size:clamp(23px,2.4vw,32px);overflow-wrap:anywhere}.portfolio-grid .film-caption>span{color:var(--portfolio-accent);font-size:13px}.portfolio-grid .film-caption small{font-size:13px}.portfolio-empty{padding:50px 0;color:var(--muted)}
@media(max-width:1100px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.films-section .section-head{align-items:start;flex-wrap:wrap}}
@media(max-width:600px){.portfolio-page{padding-top:32px;padding-bottom:72px}.portfolio-back{margin-bottom:30px}.portfolio-toolbar{margin-top:32px}.portfolio-grid{grid-template-columns:1fr;gap:32px}.work-filters{gap:8px}.work-filters button{padding:10px 14px}.films-section .rail-controls{gap:8px}.view-all-work{padding:9px 15px}.portfolio-grid .film-caption h3{font-size:28px}}
