@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:optional;src:url('assets/space-grotesk-latin.woff2') format('woff2')}
/* One shared amount of breathing room, including the non-scrolling pages. */
:root{--studio-footer-height:clamp(160px,18svh,210px);--studio-footer-height:clamp(160px,18dvh,210px);--studio-inset:38px}
.studio-footer{height:var(--studio-footer-height);min-height:var(--studio-footer-height);display:flex;align-items:center;justify-content:space-between;gap:32px;margin:80px 0 0;padding:24px 0;border-top:1px solid #394048;font-size:14px;line-height:32px}
.footer-studio{display:grid;grid-auto-rows:24px;line-height:24px;align-content:center}
.footer-studio p{margin:0}.footer-location{color:var(--muted)}
.footer-email>a,.email-link{font-kerning:none;font-variant-ligatures:none}
.email-copy-letter{display:inline-block;white-space:pre}
.email-copy-wave .email-copy-letter{animation:emailCopyWave .65s cubic-bezier(.22,1,.36,1) var(--letter-delay) both}
@keyframes emailCopyWave{0%,100%{color:inherit;transform:translateY(0);text-shadow:none}28%{color:var(--yellow);transform:translateY(-.12em);text-shadow:0 0 .35em rgba(255,230,0,.75)}48%{color:#fff;transform:translateY(-.06em);text-shadow:0 0 .25em rgba(255,255,255,.5)}}
@media(prefers-reduced-motion:reduce){.email-copy-wave .email-copy-letter{animation:none}}
.footer-email{display:flex;align-items:center;gap:6px;white-space:nowrap}
.footer-copy{position:relative;flex:none;height:16px;min-height:16px;width:auto;min-width:0;padding:0 7px;border:1px solid #65717b;background:transparent;color:var(--white);border-radius:999px;font-size:11px;line-height:14px;text-decoration:none;text-align:left;transition:background-color .2s,color .2s}
.footer-instagram>.instagram-icon{width:14px;height:14px}
.footer-instagram>svg:last-child{width:10px;height:10px}
.footer-copy.is-copied{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
@media(hover:hover) and (pointer:fine){.footer-copy:not(.is-copied):hover{border-color:var(--white);color:var(--white)}}
.footer-copy::after{content:'';position:absolute;inset:-14px 0}
.footer-instagram{display:inline-flex;align-items:center;gap:4px;min-height:24px;justify-self:start;white-space:nowrap}
.footer-instagram svg,.footer-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.footer-nav{display:flex;align-items:center;gap:clamp(24px,3.4vw,64px)}
.footer-nav a{display:flex;align-items:center;gap:14px;min-height:44px;font-size:clamp(28px,3.5vw,56px);line-height:1.2;letter-spacing:-.03em}
.footer-nav svg{width:.48em;height:.48em;stroke-width:1.5;transition:transform .35s var(--ease)}
@media(hover:hover) and (pointer:fine){.footer-nav a:hover svg{transform:rotate(-45deg)}}
.footer-nav a:focus-visible svg{transform:rotate(-45deg)}
.footer-nav a[aria-current]{color:var(--yellow)}
.footer-nav a[aria-current] svg{transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.footer-nav svg{transition:none}}
@media(hover:hover) and (pointer:fine){.footer-instagram:hover,.footer-email>a:hover,.footer-nav a:hover{color:var(--yellow)}}
.studio-footer-screen.screen{height:var(--studio-footer-height);min-height:var(--studio-footer-height);display:flex;align-items:flex-end;padding:0 var(--studio-inset);background:transparent}
.studio-footer-screen .studio-footer{width:100%;margin:0}
.at-studio-footer .page-controls{visibility:hidden;pointer-events:none}
.crew-page .studio-footer,.contact-page>.studio-footer{position:absolute;bottom:0;left:var(--studio-inset);right:var(--studio-inset);z-index:3;margin:0}
.detail-page .studio-footer{margin-left:var(--studio-inset);margin-right:var(--studio-inset)}
@media(max-width:700px){:root{--studio-inset:24px;--studio-footer-height:160px}.studio-footer{margin-top:48px;padding:6px 0;font-size:13px;gap:8px;flex-direction:column;align-items:flex-start;justify-content:center}.footer-studio{grid-auto-rows:22px;line-height:22px}.footer-instagram{min-height:22px;line-height:22px}.footer-copy{min-height:16px;line-height:14px;font-size:11px}.footer-email{gap:4px}.footer-nav{gap:24px}.footer-nav a{gap:10px;font-size:25px}.footer-instagram svg,.footer-nav svg{width:16px;height:16px}}
@media(max-width:380px){.studio-footer{font-size:13px;gap:12px}.footer-email{gap:4px}.footer-nav{gap:20px}.footer-nav a{gap:8px;font-size:23px}.footer-nav svg{width:14px;height:14px}}
@media(max-width:700px){.footer-instagram>.instagram-icon{width:12px;height:12px}.footer-instagram>svg:last-child{width:9px;height:9px}}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:optional;src:url('assets/space-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+20C6,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#0b0f14;--white:#eaf0f4;--muted:#a3afb9;--pink:#ff2e93;--yellow:#ffe600;--scroll-gutter:0px;--scrollbar-width:22px;--dock-width:132px;--frame-top:8vh;--frame-bottom:clamp(150px,19vh,190px);--ease:cubic-bezier(.22,1,.36,1);--z-identity:4;--z-controls:2;--z-backdrop:3;--z-header:4;--z-skip:5;--z-scroll:6;color-scheme:dark}
:root{--menu-top:12px;--menu-right:22px;--menu-inset:28px;--menu-band:80px}
*{box-sizing:border-box;scrollbar-width:none;scrollbar-gutter:auto}
*::-webkit-scrollbar{display:none;width:0;height:0}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--white);font-family:'Space Grotesk',system-ui,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--pink);color:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button{border:0;border-radius:0;background:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:7px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;top:18px;left:24px;z-index:var(--z-skip);padding:12px 16px;background:var(--yellow);color:var(--ink);transform:translateY(-160%)}
.skip-link:focus{transform:none}
#experience{position:relative;z-index:1;width:calc(100% - var(--scroll-gutter));height:100svh;height:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior-y:contain;outline:none}
.screen{position:relative;width:100%;height:100%;min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:var(--ink)}
.molten-backdrop{position:absolute;inset:0;z-index:0;background:#111315;pointer-events:none;overflow:hidden}
.molten-backdrop canvas{display:block;width:100%;height:100%;pointer-events:none}
.molten-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,12,15,.6),transparent 22%,transparent 62%,rgba(9,12,15,.82));pointer-events:none}
.intro,.film{isolation:isolate;background:transparent}
.film-window{position:absolute;inset:var(--frame-top) 7.2% var(--frame-bottom);overflow:hidden;border-radius:28% 24% 30% 22% / 42% 36% 40% 34%;background:var(--ink);isolation:isolate;animation:organicWindow 22s ease-in-out infinite}
.film:nth-child(3) .film-window{animation-delay:-9s}
.film-video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.film-window--image .project-cover-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.video-fallback{position:absolute;bottom:100px;left:32px;color:var(--white);font-size:12px;z-index:1}
.identity{position:fixed;inset:0 var(--scroll-gutter) 0 0;display:flex;align-items:center;justify-content:center;z-index:var(--z-identity);pointer-events:none}
.stage{position:relative;width:min(92%,1280px);aspect-ratio:1427/400;animation:none;transform-origin:center}
.identity[data-position="travelling"] .stage{will-change:transform}
.stage svg{display:block;overflow:visible;animation:logoReveal .9s var(--ease) both}
.identity.logo-ready .tu{animation:none;transform:translateX(-158px)}
.identity.logo-ready .af{animation:none;transform:translateX(158px)}
.shape-stack{position:absolute;left:48.49%;top:50%;width:13.5%;aspect-ratio:1;transform:translate(-50%,-50%)}
.slot,.lyr{position:absolute;inset:0}
.slot{opacity:0;transition:transform .7s var(--ease),opacity .1s ease}
.slot.on{opacity:1}
.site-header{position:fixed;inset:0 var(--scroll-gutter) auto 0;z-index:var(--z-header);display:flex;align-items:center;justify-content:space-between;padding:20px 38px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.has-scrolled .site-header{opacity:1;visibility:visible;transform:none}
.has-scrolled .site-header,.has-scrolled .page-controls{color:var(--white)}
.has-scrolled .hamburger i{background:var(--white)}
.menu-open .menu-toggle{color:var(--white)}
.menu-open .hamburger i{background:var(--white)}
.home-link{display:flex;align-items:center;min-height:44px}
.logo-dock{width:var(--dock-width);height:44px}
.svg-definitions{position:absolute;overflow:hidden;pointer-events:none}
.home-link img{display:block;width:100px;height:auto;filter:url(#logo-knockout)}
.menu-toggle{position:relative;z-index:1;display:flex;gap:17px;align-items:center;min-height:44px;padding:0 0 0 12px;transition:color .2s}
.header-logo{background:transparent;box-shadow:none;width:var(--dock-width);height:44px;position:relative}
.header-logo .stage{position:absolute;left:50%;top:50%;width:1427px;flex:none;animation:none;transform:translate(-50%,-50%) scale(var(--header-logo-scale,.0925))}
.header-logo .stage svg{animation:none}
.header-logo .tu,.header-logo .af{animation:none}
.hamburger{position:relative;width:30px;height:24px;display:block}
.hamburger i{position:absolute;left:0;width:30px;height:2px;top:7px;background:var(--white);transition:transform .35s var(--ease),width .32s var(--ease),left .32s var(--ease),background .25s}
.hamburger i:last-child{top:16px;width:22px;left:8px}
@media(hover:hover) and (pointer:fine){.menu-toggle:hover .hamburger i{background:var(--yellow)}}
@media(hover:hover) and (pointer:fine){
 body:not(.menu-open) .menu-toggle:is(:hover,:focus-visible){color:var(--yellow)}
 body:not(.menu-open) .menu-toggle:is(:hover,:focus-visible) .hamburger i{width:38px;left:-8px;background:currentColor}
 body:not(.menu-open) .menu-toggle:is(:hover,:focus-visible) .hamburger i:last-child{width:30px;left:0}
}
@media(prefers-reduced-motion:reduce){.menu-toggle,.menu-toggle .hamburger i{transition:none!important}}
.menu-open .hamburger i{transform:translateY(4.5px) rotate(45deg)}
.menu-open .hamburger i:last-child{width:30px;left:0;transform:translateY(-4.5px) rotate(-45deg)}
.menu-panel{position:absolute;right:var(--menu-right);top:var(--menu-top);width:min(430px,calc(100vw - 44px));max-height:calc(100svh - 2 * var(--menu-top));max-height:calc(100dvh - 2 * var(--menu-top));padding:var(--menu-band) var(--menu-inset) 12px;background:var(--ink);color:var(--white);border:1px solid #2b333d;transform-origin:top right;animation:menuIn .32s var(--ease) both;overflow-y:auto;scrollbar-width:none}
.menu-home{position:absolute;right:calc(var(--menu-inset) + 48px);top:calc((var(--menu-band) - 44px)/2);display:grid;place-items:center;width:44px;height:44px;transition:color .2s}
.menu-home svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:miter}
.menu-home:focus-visible{color:var(--yellow)}
.menu-social{position:absolute;left:var(--menu-inset);top:calc((var(--menu-band) - 44px)/2);display:inline-flex;align-items:center;gap:5px;height:44px;max-width:calc(100% - 2 * var(--menu-inset) - 108px);font-size:14px;line-height:1.4}
.menu-social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.menu-social .instagram-icon{width:18px;height:18px}
.menu-social:focus-visible{color:var(--yellow)}
.menu-home-tooltip{position:fixed;left:0;top:0;z-index:9;pointer-events:none;color:var(--white);padding:12px 16px;background:#14191f;font-size:15px;line-height:1.35}
@media(hover:hover) and (pointer:fine){.menu-home:hover,.menu-social:hover{color:var(--yellow)}}
.menu-open .menu-toggle{position:absolute;top:calc(var(--menu-top) + (var(--menu-band) - 44px)/2 + 1px);right:calc(var(--menu-right) + var(--menu-inset) - 6px);width:44px;height:44px;padding:0;justify-content:center;transition:color .2s}
.menu-open .site-header::after,.menu-open .works-header::after,.menu-open .crew-header::after{content:'';width:44px;height:44px;flex:none}
.menu-panel .menu-arrow{display:flex;align-items:center;justify-content:center;width:30px;flex:none}
.menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 0;border-top:1px solid #2b333d;font-size:clamp(2.8rem,5vw,4rem);font-weight:400;letter-spacing:-.04em;line-height:1.16;text-align:left;transition:color .2s,transform .3s var(--ease)}
.menu-item:focus-visible{color:var(--yellow)}
@media(hover:hover) and (pointer:fine){.menu-item:hover{color:var(--yellow)}}
.menu-item[aria-disabled=true]{cursor:default}
.menu-arrow{font-size:25px;letter-spacing:0;transition:transform .3s var(--ease);transform-origin:center}
.menu-item:focus-visible .menu-arrow{transform:translateX(3px) rotate(45deg)}
@media(hover:hover) and (pointer:fine){.menu-item:hover .menu-arrow{transform:translateX(3px) rotate(45deg)}}
.menu-backdrop{position:fixed;inset:0;z-index:var(--z-backdrop);background:rgba(3,7,12,.45)}
.page-controls{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:38px;right:calc(38px + var(--scroll-gutter));z-index:var(--z-controls);display:flex;align-items:center;justify-content:center;pointer-events:none}
.page-controls button,.page-controls a{pointer-events:auto}
.scroll-next{display:flex;align-items:center;gap:18px;min-height:44px;padding:0;background:none;text-align:right;transition:color .2s}
.next-copy{display:grid;gap:2px}.next-label{color:var(--muted);font-size:11px;line-height:1.4}.next-title{font-size:14px;line-height:1.4}
.scroll-next svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.25;flex:none;transition:transform .3s var(--ease)}
.scroll-next:hover,.scroll-next:focus-visible{color:var(--yellow)}
.scroll-next:hover svg,.scroll-next:focus-visible svg{transform:translate(2px,2px)}
.film-controls{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:14px 48px;pointer-events:auto;user-select:text;-webkit-user-select:text}
.film-controls[hidden]{display:none}
.project-link{display:flex;align-items:baseline;justify-content:flex-start;justify-self:start;gap:12px;max-width:620px;text-decoration:none;font-size:clamp(28px,3.2vw,46px);line-height:1.1;letter-spacing:-.04em;transition:color .2s}
.project-link svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.15;transition:transform .3s var(--ease)}
.project-link:hover,.project-link:focus-visible{color:var(--yellow)}
.project-link:hover svg,.project-link:focus-visible svg{transform:translate(3px,-3px)}
.project-description{height:4.8em;margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--muted);text-wrap:pretty;overflow-wrap:break-word;cursor:text}
.film-pager{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-height:48px;border-top:1px solid #394048;padding-top:8px}
.film-position{display:flex;align-items:center;gap:24px}.film-count{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
#film-current{color:var(--white)}.count-divider{margin:0 6px}
.film-progress{display:flex;width:108px;gap:4px}.film-progress>span{height:2px;flex:1;background:#394048;transition:background-color .25s}.film-progress .is-current{background:var(--yellow)}.film-progress .is-past{background:var(--white)}
.film .film-window{bottom:clamp(210px,25vh,250px)}
.page-controls>.scroll-next{position:absolute;right:0;bottom:0}
.motion-paused .stage,.motion-paused .stage *{animation-play-state:paused!important}
.motion-paused .film-window{animation-play-state:paused}
.menu-open #experience{overflow-y:hidden}
.scroll-gutter{position:fixed;inset:0 0 0 auto;width:var(--scrollbar-width);z-index:var(--z-scroll);background:transparent;touch-action:none;user-select:none;cursor:pointer}
.scroll-gutter:focus-visible{outline:1px solid #e6b0c6;outline-offset:-3px}
.scroll-track{position:absolute;inset:16px 0;margin:auto;width:4px;background:#26303a;border-radius:4px}
.scroll-thumb{position:absolute;top:0;left:0;width:4px;min-height:36px;height:33.333%;border-radius:4px;background:#bd8a9f;will-change:transform;transition:background .2s}
.scroll-gutter:hover .scroll-thumb,.scroll-gutter:focus-visible .scroll-thumb,.scroll-dragging .scroll-thumb{background:#ff2e93}
.scroll-gutter[aria-disabled=true]{cursor:default}
.scroll-dragging #experience{scroll-snap-type:none;scroll-behavior:auto}
.scroll-dragging{cursor:grabbing}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes logoReveal{from{opacity:0}to{opacity:1}}
/* Only the clipping contour changes. The video has no animated position or scale. */
@keyframes organicWindow{0%,100%{border-radius:28% 24% 30% 22% / 42% 36% 40% 34%}27%{border-radius:22% 32% 24% 30% / 34% 44% 32% 43%}53%{border-radius:33% 23% 31% 25% / 45% 31% 43% 35%}78%{border-radius:25% 30% 22% 33% / 36% 42% 34% 44%}}
@media(min-width:1800px){.stage{width:min(92%,1600px)}}
@media(max-width:600px){:root{--scrollbar-width:18px;--dock-width:120px;--frame-top:11vh;--frame-bottom:215px}.site-header{padding:13px 24px}.home-link img{width:86px}.page-controls{left:24px;right:calc(24px + var(--scroll-gutter));bottom:max(20px,env(safe-area-inset-bottom))}:root{--menu-top:10px;--menu-right:12px;--menu-inset:24px;--menu-band:76px}.menu-panel{width:calc(100vw - var(--scroll-gutter) - 24px)}.film-window{left:4%;right:4%;bottom:var(--frame-bottom);border-radius:min(24vw,16vh)}.stage{width:94%}.scroll-track{inset:12px 0;width:3px}.scroll-thumb{width:3px}}
@media(max-height:600px) and (min-width:601px){:root{--frame-top:65px;--frame-bottom:135px}.film .film-window{bottom:195px}}
@media(max-height:420px){:root{--menu-band:64px}.menu-panel .menu-item{font-size:34px;padding:13px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.menu-panel,.film,.film::before,.film-window{animation:none}.stage,.stage svg,.slot.on,.slot.on .m,.slot.on .gh1,.slot.on .gh2{animation:none}.tu{animation:none;transform:translateX(-158px)}.af{animation:none;transform:translateX(158px)}}

/* Decorative film loops never expose Safari native playback chrome. */
video:not([controls])::-webkit-media-controls,video:not([controls])::-webkit-media-controls-enclosure,video:not([controls])::-webkit-media-controls-panel,video:not([controls])::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.motion-loop-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-select:none}
html.image-loop-mode video:not([controls]){display:none!important}
html.native-video-test video:not([controls]){pointer-events:none}
html.native-video-test video:not([controls],[data-playback-mode="native-video"]){visibility:hidden}
@media(hover:none) and (pointer:coarse){video:not([controls]){display:none!important}}

@media(max-width:800px){.film-controls{gap:12px 28px}.project-link{font-size:28px}.project-description{font-size:13px;line-height:1.5;height:6em}.film .film-window{bottom:240px}}
@media(max-width:600px){.film-controls{grid-template-columns:1fr;gap:12px}.project-link{font-size:28px;line-height:1.2;align-items:center;max-width:none}.project-link svg{width:22px;height:22px}.project-description{height:7.5em;max-width:none}.film-pager{min-height:44px;padding-top:6px}.film-position{gap:14px}.film-progress{width:66px;gap:3px}.scroll-next{gap:10px}.next-title{font-size:12px;max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-label{font-size:11px}.scroll-next svg{width:18px;height:18px}.film .film-window{bottom:280px}}
@media(max-height:600px) and (min-width:801px){.project-link{font-size:26px}.project-description{font-size:12px}.film .film-window{bottom:190px}}