:root{--ease-fluid:cubic-bezier(.22,1,.36,1);--ease-surface:cubic-bezier(.25,.65,.3,1)}
.motion-item{transition:opacity .65s var(--ease-surface),translate .8s var(--ease-fluid);transition-delay:0ms}
.motion-enabled .motion-item:not(.motion-in){opacity:0;translate:0 var(--arrival-y,20px)}
.motion-enabled .motion-item.motion-in{opacity:1;translate:0 0;transition-delay:var(--arrival-delay,0ms)}
.motion-item:focus-within{opacity:1!important;translate:0 0!important}
.menu{transition:opacity .28s var(--ease-surface),transform .45s var(--ease-fluid),visibility .28s,background-color .3s,color .3s}
.menu>a,.menu>.nav-socials{opacity:0;translate:0 -6px;transition:opacity .22s ease,translate .4s var(--ease-fluid),background-color .3s,color .3s}
.menu.open>a,.menu.open>.nav-socials{opacity:1;translate:0 0;transition-delay:calc(var(--menu-order,0)*30ms)}
.menu>a:nth-child(2){--menu-order:1}.menu>a:nth-child(3){--menu-order:2}.menu>a:nth-child(4){--menu-order:3}.menu>a:nth-child(5){--menu-order:4}.menu>a:nth-child(6){--menu-order:5}.menu>.nav-socials{--menu-order:6}
.action,.chip,.google-badge,.book,.dialog-close,.nav-social,.footer-social-icon{transition:background-color .35s var(--ease-surface),color .35s,border-color .35s,box-shadow .4s var(--ease-surface),transform .4s var(--ease-fluid)}
.button-arrow{transition:transform .45s var(--ease-fluid)}
.service-art,.service-heading,.service-card .service-body ul,.support-card .service-body p{transition:transform .55s var(--ease-fluid)}
.service-card .service-body .action,.support-card .service-body .action{transition:opacity .32s ease,transform .5s var(--ease-fluid),background-color .35s,color .35s}
.service-body{transition:grid-template-rows .45s var(--ease-fluid)}
.portfolio-row .project-card>img,.work-image img,.client-work img{transition:transform .65s var(--ease-fluid),filter .4s var(--ease-surface)}
.client-card{transition:background-color .45s var(--ease-surface),box-shadow .45s,border-color .45s,transform .5s var(--ease-fluid)}
.client-work{transition:opacity .4s var(--ease-surface),box-shadow .4s}
.faq-list summary{transition:color .3s,background-color .3s}
.faq-answer{display:flow-root}
.faq-symbol:after{transition:transform .4s var(--ease-fluid)}
.reel-controls{left:24px;right:auto;justify-content:flex-start}
@media(hover:hover) and (pointer:fine){
 .portfolio-row .project-card:hover>img{transform:scale(.992)}
 .client-card:hover{transform:translateY(-3px)}
 .footer-social-icon:hover{transform:translateY(-2px);background:var(--surface)}
}
@media(max-width:700px){
 .motion-enabled .motion-item:not(.motion-in){translate:0 12px}
 .motion-item{transition-duration:.5s,.65s}
 .showreel .reel-controls{left:16px;right:16px;justify-content:flex-start}
 .showreel-in-view .motion-toggle:not(.footer-visible){bottom:calc(78px + env(safe-area-inset-bottom))}
 .client-card{transition:background-color .4s,border-color .4s,box-shadow .4s}
}
@supports(transition-behavior:allow-discrete){
 dialog{opacity:0;transform:translateY(12px) scale(.99);transition:opacity .25s ease,transform .4s var(--ease-fluid),display .25s allow-discrete,overlay .25s allow-discrete}
 dialog[open]{animation:none;opacity:1;transform:none}
 .film-viewer,.artwork-viewer{transform:none;transition:opacity .25s ease,display .25s allow-discrete,overlay .25s allow-discrete}
 dialog::backdrop{background:#0000;backdrop-filter:blur(0);transition:background-color .25s,backdrop-filter .25s,display .25s allow-discrete,overlay .25s allow-discrete}
 dialog[open]::backdrop{background:#0007;backdrop-filter:blur(8px)}
 .film-viewer[open]::backdrop{background:#000c}
 @starting-style{dialog[open]{opacity:0;transform:translateY(12px) scale(.99)}.film-viewer[open],.artwork-viewer[open]{transform:none}dialog[open]::backdrop{background:#0000;backdrop-filter:blur(0)}}
}
@media(prefers-reduced-motion:reduce){
 .motion-item,.motion-enabled .motion-item{opacity:1!important;translate:none!important;transition:none!important}
 .menu,.menu>a,.menu>.nav-socials,.action,.chip,.google-badge,.book,.dialog-close,.button-arrow,.service-art,.service-heading,.service-body,.service-card .service-body ul,.support-card .service-body p,.client-card,.client-work,.client-work img,.work-image img,.faq-symbol:after,dialog,dialog::backdrop{transition:none!important;animation:none!important}
}
.motion-paused .motion-item{opacity:1!important;translate:none!important;transition:none!important}

/* Keep save menus away from public portfolio media without blocking scrolling. */
img,video{-webkit-touch-callout:none;-webkit-user-drag:none}
.project-overview,.project-caption,.work-caption{user-select:none;-webkit-user-select:none}
/* Screen-filling film with a small, independently positioned control bar. */
.film-viewer,.film-viewer:fullscreen{width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#090909;overflow:hidden}
.film-viewer video,.film-viewer:fullscreen video{display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;background:#090909}
.film-viewer video:focus-visible{outline:1px solid #ffffff70;outline-offset:-4px}
.film-viewer .film-close{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff20;border-radius:50%;background:#141414b3;color:#fff;font:300 28px/1 'DM Sans',sans-serif;transition:background-color .2s,border-color .2s}
.film-viewer .film-close:hover{background:#303030;border-color:#ffffff60}
.film-controls{position:absolute;z-index:2;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:auto;max-width:760px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:6px 12px;border:1px solid #ffffff14;border-radius:14px;background:#171717c9;backdrop-filter:blur(10px);color:#fff;transition:opacity .25s ease,translate .25s ease}
.film-controls button{width:auto;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#eee;font:500 12px/1 'DM Sans',sans-serif;white-space:nowrap;transition:background-color .2s,color .2s}
.film-controls button:hover{background:#ffffff12;color:#fff}
.film-controls button:focus-visible,.film-viewer .film-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.film-controls button[hidden]{display:none}
.film-controls input{width:100%;min-width:0;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;accent-color:#eee;cursor:pointer;-webkit-appearance:none;appearance:none}
.film-controls input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:#ffffff45}
.film-controls input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:0;border-radius:50%;background:#eee}
.film-controls input::-moz-range-track{height:3px;border:0;border-radius:2px;background:#ffffff45}
.film-controls input::-moz-range-progress{height:3px;border-radius:2px;background:#eee}
.film-controls input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#eee}
.film-controls input:focus-visible{outline:1px solid #ffffff80;outline-offset:2px;border-radius:6px}
.film-controls input:focus:not(:focus-visible){outline:none}
.film-time{font:400 11px/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;color:#ccc}
.film-controls-idle .film-controls{opacity:0;translate:0 6px;pointer-events:none}
.film-controls-idle .film-controls:focus-within{opacity:1;translate:none;pointer-events:auto}
@media(max-width:700px){
 .film-controls{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) auto auto;gap:0 6px;padding:2px 10px 4px;border-radius:12px}
 .film-controls input{grid-column:1/-1;height:32px;min-height:32px}
 .film-controls button{padding-inline:8px}
 .film-time{padding-left:2px}
}
@media(max-height:500px) and (min-width:480px){
 .film-controls{grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;padding:2px 10px}
 .film-controls input{grid-column:auto;height:44px;min-height:44px}
 .film-viewer .film-close{top:max(8px,env(safe-area-inset-top))}
}
@media(prefers-reduced-motion:reduce){.film-controls,.film-controls button,.film-viewer .film-close{transition:none}}

/* Dense, inset glass and a soft unfurl for the shared navigation. */
:root{--nav-glass:rgb(20 20 20 / .88);--nav-glass-open:rgb(20 20 20 / .96);--nav-glass-edge:#ffffff20;--nav-glass-shadow:#00000024}
:root[data-theme=dark]{--nav-glass:rgb(242 242 242 / .9);--nav-glass-open:rgb(242 242 242 / .97);--nav-glass-edge:#ffffffb3;--nav-glass-shadow:#00000030}
.pill,.menu{background:var(--nav-glass);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 0 0 1px var(--nav-glass-edge),inset 0 1px 0 #ffffff18,0 8px 28px var(--nav-glass-shadow)}
.pill{transition:background-color .5s var(--ease-surface),color .35s,box-shadow .5s var(--ease-surface)}
.header:has(.menu.open) .pill,.menu.open{background:var(--nav-glass-open);box-shadow:inset 0 0 0 1px var(--nav-glass-edge),inset 0 1px 0 #ffffff20,0 12px 36px var(--nav-glass-shadow)}
.menu{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-14px) scale(.96,.94);transform-origin:top right;transition:opacity .28s cubic-bezier(.4,0,.6,1),transform .42s cubic-bezier(.4,0,.2,1),visibility 0s linear .42s,background-color .45s,color .35s,box-shadow .45s}
.menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition:opacity .38s var(--ease-surface),transform .62s cubic-bezier(.18,.85,.22,1),visibility 0s,background-color .45s,color .35s,box-shadow .45s}
.menu>a,.menu>.nav-socials{opacity:0;translate:0 -9px;transition:opacity .18s ease,translate .3s cubic-bezier(.4,0,.2,1),background-color .3s,color .3s;transition-delay:0s}
.menu.open>a,.menu.open>.nav-socials{opacity:1;translate:0 0;transition:opacity .38s ease,translate .55s var(--ease-fluid),background-color .3s,color .3s;transition-delay:calc(90ms + var(--menu-order,0)*42ms),calc(90ms + var(--menu-order,0)*42ms),0s,0s}
.menu>.nav-socials{--menu-order:6}
.hamburger i{transition:transform .52s cubic-bezier(.18,.85,.22,1),background-color .35s}
@media(prefers-reduced-motion:reduce){.pill,.menu,.menu>a,.menu>.nav-socials,.hamburger i{transition:none!important}}

/* Active artwork stands forward; neighbouring projects remain visible. */
@media(hover:hover) and (pointer:fine) and (min-width:701px){
 .portfolio-row .project-card>img,.work-tile .work-image{transition:transform .38s var(--ease-fluid),filter .3s,box-shadow .3s}
 .portfolio-row .project-card.artwork-active>img,.portfolio-row .project-card:hover>img{transform:scale(1.025);filter:brightness(1.06);box-shadow:0 8px 26px #0003,0 0 0 2px var(--ink)}
 .portfolio-row:has(.artwork-active) .project-card:not(.artwork-active)>img{filter:brightness(.78);transform:scale(.985)}
 .work-tile.artwork-active .work-image{transform:scale(1.025);filter:brightness(1.06);box-shadow:0 8px 26px #0003,0 0 0 2px var(--ink)}
}
@media(prefers-reduced-motion:reduce){
 .portfolio-row .project-card.artwork-active>img,.portfolio-row .project-card:hover>img,.work-tile.artwork-active .work-image{transform:none}
}

/* Leave room inside the scrolling rail for scaled artwork and its outline. */
@media(hover:hover) and (pointer:fine) and (min-width:701px){
 .portfolio-row{padding-block:24px;margin-top:-24px;margin-bottom:-24px}
 .portfolio-row+.portfolio-row{margin-top:8px}
}