@font-face{font-family:Gertrude;src:url('/fonts/GertrudeFeb-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Gertrude Book;src:url('/fonts/GertrudeFeb-Book.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Gertrude;src:url('/fonts/GertrudeFeb-Bold.woff2') format('woff2');font-weight:700;font-display:swap}@font-face{font-family:Gertrude Hairline;src:url('/fonts/GertrudeFeb-Hairline.woff2') format('woff2');font-display:swap}
:root{font-size:calc(100vw / 1920);--paper:#f8f8f8;--muted:#8f8f8f}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:130rem}body{margin:0;background:var(--paper);color:#000;font-family:Gertrude,sans-serif;font-size:24rem}h1,h2,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;padding:0;background:none}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3rem solid #ff794a;outline-offset:5rem}img{display:block}header{position:fixed;top:0;left:0;width:100%;height:106rem;z-index:10;transition:background .2s,box-shadow .2s}header.scrolled{background:rgb(248 248 248 / .94);backdrop-filter:blur(13rem);box-shadow:0 3rem 20rem #00000005}.brand{position:absolute;left:94rem;top:33rem;font:52.149rem/.8 'Gertrude Book',sans-serif;letter-spacing:-3.129rem}.actions{position:absolute;top:2rem;left:471rem;display:flex;align-items:flex-start;flex-direction:column;gap:2rem}.actions button,.actions a{height:33rem;border-radius:60rem;font-size:20rem;line-height:26rem;display:flex;align-items:center;justify-content:center;white-space:nowrap}.hire{width:184rem;background:rgb(163 163 163 / .2)}.actions .support{width:145rem;height:34rem;background:#ff794a;box-shadow:0 4.322rem 32.418rem #1f5a9c0f}.social-jump{width:110rem;background:#00c8ff;box-shadow:0 4.322rem 32.418rem #1f5a9c0f}.about-link{position:absolute;left:797rem;top:0.273rem;display:flex;gap:6rem;align-items:flex-start}.portrait{width:159rem;height:104rem;object-fit:cover;border-radius:6rem;margin-top:1.727rem}.about-copy{width:119rem}.about-copy strong{font-size:20rem;line-height:26rem;display:block;white-space:nowrap}.about-copy p{font-size:12rem;line-height:15.6rem;letter-spacing:-.24rem;color:#adacaa;margin-top:-4.273rem}.tabs{position:absolute;right:50rem;top:6rem;padding:10rem;display:flex;gap:20rem;align-items:center;border-radius:60rem;background:#eee}.tabs button{font-size:52rem;line-height:60rem;padding:10rem 28rem;border-radius:48rem;background:var(--paper);color:#8f8f8f;opacity:.3;white-space:nowrap}.tabs button[aria-pressed=true]{background:#fff;color:#111;opacity:1}main{padding:538rem 50rem 0}.hero{font-weight:400;font-size:301.605rem;line-height:245.42rem;letter-spacing:-6.0321rem;height:212rem;white-space:nowrap;margin-bottom:43rem}.projects{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10rem}.project{position:relative;height:603rem;background:#fff;border-radius:6rem;overflow:hidden;grid-column:span 3}.project-next{grid-column:span 4;background:#d6e6e3}.project-dog{grid-column:span 2}.card-title{position:absolute;left:24rem;top:16rem;font-size:46rem;font-weight:400;line-height:62.695rem;z-index:2}.tag{position:absolute;left:421rem;top:23rem;font:400 24rem/30rem Gertrude,sans-serif;color:var(--muted);border:1rem solid var(--muted);padding:9rem 19rem;border-radius:24rem;z-index:2}.project-dog .tag,.project-four .tag{left:301rem}.project-four .tag{left:607rem}.card-description{position:absolute;left:24rem;bottom:24rem;width:322rem;font-size:24rem;line-height:32rem;color:var(--muted);z-index:2}.project-dog .card-description{width:460rem;color:var(--muted)}.next-art{position:absolute;left:363rem;top:90rem;width:848rem;height:513rem;overflow:hidden;transform:scaleX(-1)}.next-art img{position:absolute;width:138.27%;height:152.37%;left:-18.91%;top:-23.75%;max-width:none}.dog-art{position:absolute;left:117rem;top:119rem;width:365rem;height:365rem;overflow:hidden}.dog-art img{width:365rem;height:365rem;object-fit:cover}.card-open{position:absolute;inset:0;z-index:3}.card-open:hover{box-shadow:none}.arrow{position:absolute;width:50rem;height:50rem;right:24rem;top:23rem}.arrow .circle{width:50rem;height:50rem}.arrow .shaft{position:absolute;left:50%;top:50%;width:11.04rem;height:12.94rem;transform:translate(-50%,-50%) rotate(44.36deg)}.project-dog .arrow{top:24rem}.empty{grid-column:1/-1;height:603rem;display:grid;place-content:center;color:var(--muted);font-size:46rem}.work,.likes{position:relative;background:#fff;border-radius:6rem;height:603rem;margin-top:10rem}.work h2,.likes h2,.about-pair h2{font-weight:400;font-size:46rem;line-height:62.695rem;position:absolute;left:24rem;top:16rem}.career{position:absolute;left:24rem;top:199rem;display:flex;gap:10rem}.job{width:320rem}.service{position:relative;width:320rem;height:320rem;border-radius:8rem;overflow:hidden;background:var(--service-bg)}.service-art{position:absolute;inset:0}.service-art img{position:absolute}.service-tov .service-art img{width:54.87%;height:73.15%;left:23.62%;top:15%}.service-landing .service-art img{width:87.34%;height:55.62%;left:6.33%;top:22.19%}.service-3d .service-art img{width:100%;height:100%;left:0;top:0}.service-sound .service-art img{width:100%;height:100%;left:0;top:0}.service-title{position:absolute;top:20rem;left:20rem;font-size:24rem;line-height:32rem}.info{position:absolute;right:20rem;top:20rem;width:24rem;height:24rem}.info img{width:24rem;height:24rem}.service-controls{position:absolute;left:20rem;bottom:16rem;display:flex;gap:20rem}.service-controls button,.service-controls img{width:40rem;height:40rem}.service-controls button:disabled{cursor:default}.job p{font-size:18rem;line-height:19.8rem;color:var(--muted);margin-top:10rem}.job p+p{margin-top:10.2rem}.about-pair{display:grid;grid-template-columns:1fr 1fr;gap:10rem;margin-top:10rem}.about-pair article{position:relative;background:#fff;border-radius:6rem;height:603rem}.interests{position:absolute;left:24rem;bottom:24rem;display:flex;gap:0}.interests span{font-size:46rem;line-height:62.695rem}.interests span:nth-child(1){width:366rem}.interests span:nth-child(2){width:397rem}.interests span:nth-child(3){width:300rem}footer{position:relative;margin:310rem 50rem 0;height:893rem}.about-page footer{margin-top:300rem}.contact-row{height:250.029rem;display:flex;align-items:center;justify-content:space-between}.contact-row>p{font-size:32rem;line-height:42.667rem}.socials{display:flex;gap:15.153rem;align-items:center}.socials button{transition:transform .2s}.socials button:hover{transform:translateY(-6rem)}.socials img{width:250.029rem;height:250.029rem}.socials button:nth-child(2) img{width:242.452rem}.statement{position:absolute;top:414rem;left:0;width:1522rem;font-size:69.333rem;line-height:80rem}.footer-bottom{position:absolute;top:737rem;left:0;right:0;height:96rem;display:flex;align-items:flex-end;justify-content:space-between;font:24rem/32rem 'Gertrude Book',sans-serif}.tongue{position:absolute;left:844.333rem;top:0;font:107.188rem/.9 'Gertrude Hairline',sans-serif;letter-spacing:-2.1438rem}.skip{position:fixed;left:20px;top:-100px;font-size:18px;z-index:50;background:white;padding:10px}.skip:focus{top:10px}dialog{font-size:24px;border:0;background:var(--paper);border-radius:12px;padding:36px;max-width:min(500px,90vw);color:#111}dialog::backdrop{background:#0005;backdrop-filter:blur(4px)}dialog h2{font-size:32px;font-weight:400;margin-bottom:16px}dialog p{font-size:20px;line-height:1.4;color:#777}.close{position:absolute;right:12px;top:4px;font-size:30px} [hidden]{display:none!important}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.job .service-title{font-size:24rem;line-height:32rem;color:#111;margin:0}.service-sound .service-art img{width:72.72%;height:72.72%;left:13.02%;top:16.34%}

/* Small, reversible motion; the arrow remains centered at rest. */
.actions button,.actions a,.tabs button,.info,.service-controls button,.close{transition:transform .22s ease,filter .22s ease,box-shadow .22s ease}
.next-art img,.dog-art img{transition:transform .45s cubic-bezier(.2,.65,.3,1);transform-origin:center}
.arrow .shaft{transition:transform .3s cubic-bezier(.2,.65,.3,1)}
.arrow .circle{transition:transform .3s ease}
.card-open{transition:box-shadow .25s ease}
@media(hover:hover) and (pointer:fine){
 .actions button:hover,.actions a:hover{transform:translateY(-2rem);filter:brightness(1.04);box-shadow:0 5rem 14rem #0000000c}
 .tabs button:hover{transform:translateY(-2rem);opacity:1}
 .info:hover,.service-controls button:not(:disabled):hover,.close:hover{transform:scale(1.1)}
 .project:hover .next-art img,.project:hover .dog-art img{transform:scale(1.045)}
 .project:hover .arrow .shaft{transform:translate(calc(-50% + 3rem),calc(-50% - 3rem)) rotate(44.36deg)}

}
.project:has(.card-open:focus-visible) .next-art img,.project:has(.card-open:focus-visible) .dog-art img{transform:scale(1.045)}
.project:has(.card-open:focus-visible) .arrow .shaft{transform:translate(calc(-50% + 3rem),calc(-50% - 3rem)) rotate(44.36deg)}
.actions button:active,.actions a:active,.tabs button:active,.socials button:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
 .next-art img,.dog-art img,.arrow .circle,.actions button,.actions a,.tabs button,.socials button,.info,.service-controls button,.close{transform:none!important}
 .arrow .shaft{transform:translate(-50%,-50%) rotate(44.36deg)!important}
}

/* Figma 1607:5470 — a page-scrolling menu capsule. */
header{position:fixed;left:50rem;top:0;width:calc(100% - 100rem);height:112rem;background:#fff;border-radius:0 0 54rem 54rem;overflow:hidden}
.brand{left:-44rem;width:471rem;text-align:center}
.actions{left:427rem}.actions .hire{margin-left:6rem}
.about-link{left:753rem}.tabs{right:6rem}
.about-page .tabs{gap:10rem}.about-page .tabs button{font-size:36rem;padding-inline:20rem}
.arrow{overflow:hidden;border-radius:50%}
.arrow .circle{transform:none!important;transition:none}
.arrow-window{position:absolute;inset:0;overflow:hidden;border-radius:50%;color:#000;transition:color .2s ease}
.arrow .shaft{position:absolute;display:block;left:50%;top:50%;width:11.04rem;height:12.94rem;background:currentColor;mask:url('/assets/dc736.svg') center/contain no-repeat;transform:translate(-50%,-50%) rotate(44.36deg);transition:transform .4s cubic-bezier(.22,.65,.3,1)}
.arrow .shaft-copy{transform:translate(calc(-50% - 40rem),calc(-50% + 40rem)) rotate(44.36deg)}
@media(hover:hover) and (pointer:fine){
 .project:hover .arrow-window{color:#00c8ff}
 .project:hover .arrow .shaft{transform:translate(calc(-50% + 40rem),calc(-50% - 40rem)) rotate(44.36deg)}
 .project:hover .arrow .shaft-copy{transform:translate(-50%,-50%) rotate(44.36deg)}
}
.project:has(.card-open:focus-visible) .arrow-window{color:#00c8ff}
.project:has(.card-open:focus-visible) .arrow .shaft{transform:translate(calc(-50% + 40rem),calc(-50% - 40rem)) rotate(44.36deg)}
.project:has(.card-open:focus-visible) .arrow .shaft-copy{transform:translate(-50%,-50%) rotate(44.36deg)}
@media(prefers-reduced-motion:reduce){.arrow .shaft{transform:translate(-50%,-50%) rotate(44.36deg)!important}.arrow .shaft-copy{display:none}}

body:not(.about-page) .tabs{gap:6rem}

/* Main page, browser Figma export 1584:3925, 2 November. */
header .brand{left:59rem;width:auto;font-family:'Gertrude Book',sans-serif}
header .actions{left:415rem}header .hire{margin-left:0}
header .about-link{left:741rem}
header .about-copy p{line-height:16rem}
header .portrait{object-position:center 75%}
body:not(.about-page) .hero{margin-bottom:42rem}
.project-next{background:#dbeeff}
.project-needle .card-title,.project-pensioners .card-title{line-height:44rem}
.project-needle .tag{background:white}.project-pensioners .tag{left:607rem}
.needle-art{position:absolute;left:403rem;top:0;width:502rem;height:603rem;overflow:hidden;border-radius:6rem}
.needle-art img{position:absolute;width:120.12%;height:100%;left:-20.12%;object-fit:fill}
.pensioners-art{position:absolute;left:225rem;top:0;width:680rem;height:603rem;overflow:hidden}
.pensioners-art img{width:680rem;height:680rem;max-width:none}
.needle-art img,.pensioners-art img{transition:transform .45s cubic-bezier(.2,.65,.3,1);transform-origin:center}
@media(hover:hover) and (pointer:fine){.project:hover .needle-art img,.project:hover .pensioners-art img{transform:scale(1.045)}}
.project:has(.card-open:focus-visible) .needle-art img,.project:has(.card-open:focus-visible) .pensioners-art img{transform:scale(1.045)}
footer{margin:301rem 50rem 0;height:530rem}
.contact-row{height:264rem;align-items:flex-start}
.contact-row>p{font-size:69.333rem;line-height:80rem;width:640rem}
.socials{gap:8.36rem}
.socials img,.socials button:nth-child(2) img{width:264rem;height:264rem}
.footer-bottom{top:419rem;height:108rem;font:24rem/32rem Gertrude,sans-serif;align-items:flex-start}
.footer-brand,.footer-year{margin-top:36rem}
.footer-actions{position:absolute;left:416rem;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:3rem}
.footer-actions button,.footer-actions a{display:flex;align-items:center;gap:8rem;height:33rem;padding:0 10rem;background:#a3a3a333;border-radius:60rem;font:20rem/26rem Gertrude,sans-serif;transition:transform .22s ease}
.footer-actions span{font:20rem/1 Gertrude,sans-serif}
.footer-bottom .tongue{left:1284rem;top:3rem;font-family:Gertrude,sans-serif}
@media(hover:hover) and (pointer:fine){.footer-actions button:hover,.footer-actions a:hover{transform:translateY(-2rem)}}
@media(prefers-reduced-motion:reduce){.needle-art img,.pensioners-art img,.footer-actions button,.footer-actions a{transform:none!important}}

.socials{gap:6.36rem}.socials img,.socials button:nth-child(2) img{width:264.98rem;height:264.98rem}

/* Section anchors keep all projects visible; the active item follows scrolling. */
.tabs a[data-section]{font:52rem/60rem Gertrude,sans-serif;padding:10rem 28rem;border-radius:48rem;background:var(--paper);color:#8f8f8f;opacity:.3;white-space:nowrap;transition:transform .22s ease,opacity .22s ease}
.tabs a[data-section][aria-current=location]{background:#fff;color:#111;opacity:1}
@media(hover:hover) and (pointer:fine){.tabs a[data-section]:hover{transform:translateY(-2rem);opacity:1}}
.tabs a[data-section]:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.tabs a[data-section]{transform:none!important}}

/* Shared polish: rolling labels and viewport-centered introduction. */
header{border-radius:0 0 54rem 54rem}
header .about-copy strong{font-weight:400}
header .about-copy p{margin-top:0;line-height:16rem}
main{padding-top:max(170rem,calc(50svh - 106rem))}
footer,.about-page footer{margin-top:200rem}
.footer-bottom .tongue{font-family:'Gertrude Hairline',sans-serif;font-weight:400}
.roll-button{position:relative;overflow:hidden;isolation:isolate}
.roll-content,.roll-copy{display:flex;align-items:center;justify-content:center;gap:inherit;transition:transform 350ms ease;pointer-events:none}
.roll-copy{position:absolute;inset:0;transform:translateY(110%)}
.roll-shine{position:absolute;inset:0;transform:translateX(130%);background:linear-gradient(279deg,#c4c4c466,transparent 77%);transition:transform 350ms ease;pointer-events:none}
.actions>*,.footer-actions>*,.profile-tag,.return-projects,.tabs>[data-section],.socials>button{transition:transform 350ms ease,background 180ms ease,color 180ms ease}
.portrait-stack{position:relative;display:block;width:159rem;height:104rem;overflow:hidden;border-radius:6rem;margin-top:1.727rem;flex-shrink:0}
header .portrait-stack .portrait{width:159rem;height:104rem;margin:0;transition:transform 350ms ease}
.portrait-play{position:absolute;inset:0;transform:translateY(100%);transition:transform 350ms ease}
.moustache{position:absolute;width:82rem;height:34rem;left:50%;top:65%;transform:translate(-50%,-50%);pointer-events:none}
.profile-view .profile-photo,.profile-view .profile-photo.show-full-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-view .profile-previous{z-index:1;pointer-events:none}
.profile-view .profile-photo:not(.profile-previous){z-index:2}
.profile-status{z-index:3}
@media(hover:hover) and (pointer:fine){
 .roll-button:hover .roll-content{transform:translateY(-140%)}
 .roll-button:hover .roll-copy{transform:translateY(0)}
 .roll-button:hover .roll-shine{transform:translateX(12%)}
 .actions>.roll-button:hover,.footer-actions>.roll-button:hover,.profile-tag.roll-button:hover,.tabs>.roll-button:hover,.socials>.roll-button:hover{transform:scale(1.1)}
 .about-link:hover .portrait-stack>.portrait{transform:translateY(-100%)}
 .about-link:hover .portrait-play{transform:translateY(0)}
 .about-link:hover .about-copy .roll-content{transform:translateY(-140%)}
 .about-link:hover .about-copy .roll-copy{transform:translateY(0)}
}
.roll-button:focus-visible .roll-content{transform:translateY(-140%)}
.roll-button:focus-visible .roll-copy{transform:translateY(0)}
.about-link:focus-visible .portrait-stack>.portrait{transform:translateY(-100%)}
.about-link:focus-visible .portrait-play{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
 .roll-button,.roll-content,.roll-copy,.roll-shine,.portrait-play,header .portrait-stack .portrait{transition:none!important;animation:none!important}
 .roll-button:hover .roll-content,.roll-button:focus-visible .roll-content,.about-link:hover .about-copy .roll-content{transform:none}
 .roll-copy,.roll-shine{display:none}
 .roll-button:hover{transform:none!important}
}

.about-copy .roll-content,.about-copy .roll-copy{justify-content:flex-start}

/* Keep the circle in place while only its icon rolls through the window. */
.socials>button{position:relative;width:264.98rem;height:264.98rem;flex-shrink:0;transition:transform 350ms ease}
.socials>button>.social-circle{position:absolute;inset:0;pointer-events:none}
.social-window{position:absolute;inset:0;overflow:hidden;border-radius:50%;pointer-events:none}
.social-window img{position:absolute;inset:0;transition:transform 350ms ease}
.social-window .social-back{transform:translateY(110%)}
header .portrait-play .portrait{object-position:center;object-fit:cover}
@media(hover:hover) and (pointer:fine){
 .socials>button:hover{transform:scale(1.04)}
 .socials>button:hover .social-front{transform:translateY(-110%)}
 .socials>button:hover .social-back{transform:translateY(0)}
}
.socials>button:focus-visible{transform:scale(1.04)}
.socials>button:focus-visible .social-front{transform:translateY(-110%)}
.socials>button:focus-visible .social-back{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
 .socials>button:hover,.socials>button:focus-visible{transform:none}
 .socials>button:hover .social-front,.socials>button:focus-visible .social-front{transform:none}
 .social-window .social-back{display:none}
}

/* Navigation rolls its label while the control keeps its size and position. */
.tabs>.roll-button,.tabs>.roll-button:is(:hover,:focus-visible,:active){transform:none}

/* Fixed owner-specified gutters; fluid design units use the width between them. */
:root{--page-gutter:50px;font-size:calc((var(--layout-width,100vw) - 2 * var(--page-gutter)) / 1820)}
header{left:var(--page-gutter);right:var(--page-gutter);width:auto}
main{padding-inline:var(--page-gutter)}
footer{margin-inline:var(--page-gutter)}

/* Gallery hay — Figma 1584:3925, offsets relative to the card. */
.needle-art{left:380rem;top:103rem;width:500rem;height:468rem;overflow:visible;border-radius:0}
.needle-art img{inset:0;width:100%;height:100%;object-fit:contain}

.project-needle .arrow{background:#f8f8f8}
.project-needle .arrow>.circle{visibility:hidden}