:root{--canvas:#fff;--ink:#252523;--muted:#62625c;--line:#deded9;--line-strong:#aaa9a2;--surface:#f6f6f4;--accent:#90606e;--accent-soft:#eadce1;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
:root[data-theme=dark]{--canvas:#151615;--ink:#f3f2ee;--muted:#b6b7b0;--line:#373a35;--line-strong:#62665e;--surface:#1e201d;--accent:#dfabbc;--accent-soft:#423039;color-scheme:dark}
body{transition:background-color .45s ease,color .45s ease}.header{gap:28px}.header nav{margin-left:auto}.theme-toggle{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:transparent;transition:background .3s,transform .5s var(--ease)}.theme-toggle:hover{background:var(--surface);transform:rotate(-12deg)}.theme-toggle svg{width:20px;height:20px;grid-area:1/1}.sun-icon{display:none}[data-theme=dark] .sun-icon{display:block}[data-theme=dark] .moon-icon{display:none}[data-theme=dark] .logo img{filter:none}[data-theme=dark] .studio-section{background:#101210}.skip-link{background:var(--canvas);color:var(--ink)}
.hero-line{display:block;overflow:hidden;padding:.07em 0;margin:-.07em 0;color:inherit}.hero-line-inner{display:block;color:inherit;transform-origin:0 100%}.hero-line em{font-style:normal;color:var(--accent)}.hero .eyebrow,.hero-bottom,.hero-rule{animation:soft-entry 1s var(--ease) both}.hero .eyebrow{animation-delay:.05s}.hero-bottom{animation-delay:.35s}.hero-rule{animation-delay:.48s}.hero-line-inner{animation:line-entry 1.2s var(--ease) both}.hero-line:nth-child(2) .hero-line-inner{animation-delay:.14s}
@keyframes line-entry{from{transform:translateY(110%) rotate(1.5deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}@keyframes soft-entry{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.motion-ready .reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1.15s var(--ease);transition-delay:var(--reveal-delay,0ms)}.motion-ready .reveal.in-view{opacity:1;transform:translateY(0)}
.project-image>img{transition:transform 1.1s var(--ease)}.project-card:hover .project-image>img{transform:scale(1.045)}.project-arrow{color:#252523;transition:transform .6s var(--ease),background .3s}.project-card:hover .project-arrow{transform:rotate(45deg);background:#fff}.joe-cover{color:#252523}.joe-cover .image-caption{transform:translateY(var(--drift,0px))}.joe-cover>img{transform:translateY(calc(var(--drift,0px) * -.4)) scale(1.025)}.project-card:hover .joe-cover>img{transform:translateY(calc(var(--drift,0px) * -.4)) scale(1.05)}
.circle{transition:background .4s,transform .6s var(--ease)}.round-link:hover .circle{transform:translateY(4px)}.text-link span,.contact-email span{display:inline-block;transition:transform .5s var(--ease)}.text-link:hover span,.contact-email:hover span{transform:translate(4px,-4px)}.header nav>a{position:relative}.header nav>a:not(.nav-contact):after{content:'';position:absolute;bottom:-7px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}.header nav>a:hover:after{transform:scaleX(1)}
.portfolio-tools{margin-bottom:30px}.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px}.portfolio-filters button{border:1px solid var(--line);background:transparent;border-radius:99px;padding:11px 18px;font-size:13px;min-height:44px;transition:background .25s,color .25s,border-color .25s}.portfolio-filters button:hover{border-color:var(--accent)}.portfolio-filters button.active{background:var(--ink);border-color:var(--ink);color:var(--canvas)}#portfolio-count{font-size:12px;color:var(--muted);margin:16px 0 0}.project-card[hidden]{display:none}.project-card{min-width:0}.tag{font-size:10px}.eyebrow{font-size:12px}.hero-rule{font-size:10px}.service-list details{overflow:hidden}.service-list .plus{transition:transform .6s var(--ease)}
.project-gallery{align-items:start}.project-gallery button{border:0;padding:0;background:var(--surface);cursor:zoom-in;overflow:hidden}.project-gallery img{transition:transform .8s var(--ease)}.project-gallery button:hover img{transform:scale(1.025)}.project-intro h1{overflow-wrap:anywhere}.video-card{margin:50px 0}.video-poster{display:block;position:relative;width:100%;border:0;padding:0;background:#101210;aspect-ratio:16/9;overflow:hidden}.video-poster img{width:100%;height:100%;object-fit:contain;transition:transform .9s var(--ease)}.video-poster:hover img{transform:scale(1.02)}.video-poster>span{position:absolute;left:24px;bottom:24px;border-radius:99px;padding:15px 22px;background:#fff;color:#252523;font-size:14px}.video-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.video-note{font-size:12px;color:var(--muted);margin-top:14px}.lightbox{background:var(--canvas);color:var(--ink);border:1px solid var(--line);padding:52px 20px 16px;max-width:94vw;max-height:94dvh}.lightbox::backdrop{background:#000c;backdrop-filter:blur(5px)}.lightbox img{max-width:85vw;max-height:76dvh;object-fit:contain;margin:auto}.lightbox>button{position:absolute;right:8px;top:5px;width:42px;height:42px;border:0;background:transparent;font-size:28px}.lightbox p{font-size:12px;text-align:center;margin:12px 0 0}.lightbox[open]{animation:soft-entry .35s var(--ease)}
.service-list details[data-expanded=false] .plus{transform:rotate(0)}
/* Keep navigation available on every route; solid theme surface maintains contrast. */
body>.header{position:sticky;top:0;z-index:30;width:100%;min-height:92px;padding-inline:max(56px,calc((100% - 1440px)/2));background:var(--canvas);box-shadow:0 4px 18px #00000005}
html{scroll-padding-top:115px}.skip-link{z-index:100}
@media(max-width:1000px){body>.header{padding-inline:32px}}
@media(max-width:700px){body>.header{position:sticky;min-height:82px;padding-inline:20px;max-height:85dvh;overflow-y:auto}html{scroll-padding-top:102px}}
@view-transition{navigation:auto}::view-transition-old(root){animation:page-out .18s ease both}::view-transition-new(root){animation:page-in .45s var(--ease) both}@keyframes page-out{to{opacity:0}}@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.header{gap:20px}.header nav{gap:20px}.hero-rule{font-size:9px}}
@media(max-width:700px){.header{gap:0}.header .logo{width:150px}.menu-toggle{margin-left:auto;gap:10px;order:1}.theme-toggle{margin-left:16px;order:2;width:42px;height:42px}.header nav{order:3;margin:0;flex-basis:100%}.hero-rule{font-size:8px}.hero .eyebrow{font-size:10px}.portfolio-filters{gap:8px}.portfolio-filters button{padding:10px 13px;font-size:12px}.hero-line:nth-child(2){overflow:visible}.hero-line:nth-child(2) .hero-line-inner{animation-name:soft-entry}.project-story{gap:25px}.video-card{margin:32px 0}.video-poster>span{left:12px;bottom:12px;padding:10px 16px;font-size:12px}.contact-email{overflow-wrap:anywhere}.project-next h2{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-ready .reveal{opacity:1;transform:none}.joe-cover .image-caption,.joe-cover>img{transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}