/* Motion is a second expression of the interlocking mark: two parts, one form. */
:root{--motion-settle:cubic-bezier(.16,1,.3,1);--motion-long:800ms;--stage-size:clamp(320px,29vw,440px)}
.header{position:sticky;inset-block-start:0;background:var(--ink);border-color:var(--dark-line);z-index:20}.reading-progress{position:fixed;inset-block-start:0;inset-inline-start:0;height:3px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;z-index:40;pointer-events:none}.hero{background:var(--ink);padding-block-start:27px}.hero.hero-live .hero-copy{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:40px;padding-block:30px 40px}.hero-live h1{font-size:clamp(54px,6.65vw,108px);line-height:1.04;white-space:nowrap}.hero-live .hero-aside{margin-block-start:32px;max-width:430px;min-width:0;padding-inline-start:0;border:0}.hero-live .hero-aside p:first-child{font-size:16px;line-height:1.7}.hero-live .hero-aside .muted{font-size:12px;margin-block:13px 23px}.hero-live .hero-aside .button{padding:15px 21px}.hero-live .presence svg{inset-block-end:-11px;height:14px}.hero-live .hero-bottom{padding-block:10px 18px}.hero-live .hero-note{display:flex;align-items:center;gap:10px}.motion-toggle{display:flex;align-items:center;gap:7px;background:none;color:var(--light-muted);padding:7px 0;font-size:10px}.motion-toggle>span{font-family:var(--mono);font-size:12px;color:var(--signal)}.motion-toggle:hover{color:var(--paper)}
.design-console{position:relative;min-width:0;perspective:1200px}.console-top{display:flex;justify-content:space-between;font:9px var(--mono);color:var(--light-muted);padding-block:0 13px}.console-top>span:first-child{color:var(--signal)}.design-stage{position:relative;height:var(--stage-size);max-height:400px;min-height:340px;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform 350ms var(--motion-settle);background:var(--ink);border:1px solid var(--dark-line);overflow:hidden}.stage-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.stage-scene[hidden]{display:none}.identity-scene{background:var(--ink);color:var(--signal)}.identity-scene:before,.identity-scene:after{content:'';position:absolute;inset:24px;border:1px solid var(--dark-line);pointer-events:none}.identity-scene:after{inset:44px;border-color:var(--dark-line);opacity:.45}.identity-mark{width:62%;height:62%;overflow:visible;position:relative;z-index:1;animation:mark-float 7s ease-in-out infinite;filter:drop-shadow(14px 16px 0 var(--black))}.identity-mark path{transform-box:fill-box;transform-origin:center;transition:transform var(--motion-long) var(--motion-settle);fill:var(--signal)}.identity-mark .form-a{animation:form-a-arrive 1.3s var(--motion-settle) both}.identity-mark .form-b{animation:form-b-arrive 1.3s var(--motion-settle) both}.is-separated .identity-mark .form-a{animation:none;transform:translate(-4px,-4px)}.is-separated .identity-mark .form-b{animation:none;transform:translate(4px,4px)}.form-diagram-label{position:absolute;font:9px var(--mono);color:var(--light-muted);inset-inline-start:24px;inset-block-end:22px;z-index:2}.form-diagram-label:last-of-type{inset-inline-start:auto;inset-inline-end:24px}.stage-action{position:absolute;inset-inline-end:17px;inset-block-start:16px;z-index:3;padding:8px 11px;border:1px solid var(--light-muted);border-radius:var(--pill);background:var(--ink);color:var(--paper);font-size:10px}.stage-action:hover{background:var(--signal);color:var(--ink);border-color:var(--signal)}.website-scene{background:var(--black)}.website-scene img{width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:brightness(.66)}.website-scene .scene-brand{position:absolute;inset-inline:25px;inset-block-end:35px;font-size:clamp(40px,4vw,68px);font-weight:800;letter-spacing:-.065em;line-height:.97}.website-scene .scene-brand small{display:block;font:9px var(--mono);letter-spacing:.06em;margin-block-end:14px}.product-scene{background:var(--paper);padding:20px}.product-scene img{object-fit:contain;height:100%;width:100%;filter:drop-shadow(0 12px 18px #0002)}.scene-caption{position:absolute;inset-inline:20px;inset-block-end:12px;color:var(--muted);font:8px var(--mono);text-align:center}.design-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-block-end:1px solid var(--dark-line);margin-block-start:18px}.design-tabs button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 7px;background:none;color:var(--light-muted);font-size:12px;border-block-end:2px solid transparent}.design-tabs button>span{font:9px var(--mono);opacity:.65}.design-tabs button[aria-selected=true]{color:var(--signal);border-color:var(--signal)}.design-tabs button:hover{color:var(--paper)}.console-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-block-start:14px;min-height:28px}.console-bottom p{font-size:10px;color:var(--light-muted)}.console-bottom a{font-size:10px;color:var(--paper);white-space:nowrap}.console-bottom a:hover{color:var(--signal)}
.button-signal span,.header-cta span,.text-link span{transition:transform 250ms var(--motion-settle)}.button-signal:hover span,.header-cta:hover span,.text-link:hover span{transform:translate(3px,-3px)}.brand-statement-visual svg{transition:transform 700ms var(--motion-settle)}.brand-statement:hover .brand-statement-visual svg{transform:rotate(8deg)}.footer-signature span{transition:letter-spacing 650ms var(--motion-settle)}.footer-signature:hover span{letter-spacing:-.067em}.page-intro.dark,.contact{background:var(--ink)}.expanded-footer{background:var(--ink);border-block-start:1px solid var(--dark-line)}.process{background:var(--ink)}.portfolio-art>img{transition:transform 750ms var(--motion-settle)}.portfolio-entry>a:hover .portfolio-art>img{transform:scale(1.025)}.is-list .portfolio-entry>a:hover .portfolio-art>img{transform:none}
@keyframes mark-float{0%,100%{transform:translateY(3px) rotate(-4deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes form-a-arrive{from{transform:translate(-14px,-14px);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes form-b-arrive{from{transform:translate(14px,14px);opacity:0}to{transform:translate(0,0);opacity:1}}
html.motion-paused .identity-mark{animation-play-state:paused}html.motion-paused .identity-mark path{animation-duration:0s}html.motion-paused .design-stage{transform:none!important}html.motion-paused .showcase-track{transform:none!important}
@media(max-width:1100px){.hero.hero-live .hero-copy{gap:25px}.hero-live h1{font-size:6.4vw}.hero-live .hero-aside p:first-child{font-size:14px}.design-stage{min-height:310px}.design-tabs button{font-size:11px}.console-bottom{gap:8px}.console-bottom p{font-size:9px}}
@media(max-width:800px){.hero.hero-live .hero-copy{grid-template-columns:1fr;gap:45px}.hero-live h1{font-size:10.5vw}.hero-live .hero-aside{display:block;max-width:100%;margin-block-start:30px}.hero-live .hero-aside p:first-child{font-size:16px}.hero-live .hero-aside .muted{font-size:13px}.design-console{max-width:600px;width:100%;margin-inline:auto}.design-stage{height:420px}.identity-mark{width:53%;height:70%}.website-scene .scene-brand{font-size:60px}.console-bottom p,.console-bottom a{font-size:11px}.hero.hero-live .hero-copy{padding-block-end:32px}.hero-live .hero-note{display:block}.hero-top{align-items:center}}
@media(max-width:600px){.hero.hero-live .hero-copy{padding-block-start:30px;gap:35px}.hero-live h1{font-size:10.8vw}.hero-live .hero-aside{margin-block-start:28px}.hero-live .hero-aside p:first-child{font-size:14px}.hero-live .hero-aside .muted{font-size:12px}.hero-top .studio-label{font-size:9px;gap:6px}.motion-toggle{font-size:9px;gap:5px}.motion-toggle>span{font-size:10px}.hero-live .hero-top{gap:10px}.design-stage{height:340px;min-height:0}.identity-mark{width:63%;height:65%}.identity-scene:before{inset:19px}.identity-scene:after{inset:35px}.console-top{font-size:8px}.console-bottom p{font-size:9px;max-width:160px}.console-bottom a{font-size:10px}.design-tabs button{font-size:12px}.stage-action{font-size:9px}.website-scene .scene-brand{font-size:45px}.product-scene{padding:6px}.scene-caption{font-size:7px}.form-diagram-label{font-size:8px}.header{position:relative}}
@media(prefers-reduced-motion:reduce){.identity-mark,.identity-mark path{animation:none}.design-stage{transform:none!important}.identity-mark{filter:none}.stage-scene,.brand-statement-visual svg,.footer-signature span{transition:none}.brand-statement:hover .brand-statement-visual svg,.home-work-card:hover .home-work-art img,.portfolio-entry>a:hover .portfolio-art>img{transform:none}}