@font-face{font-family:Inter;src:url('/assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
body[data-page=works]{background:#0e0f11;color:#e3e5f1;font-family:Inter,Arial,sans-serif;text-transform:lowercase}body[data-page=works] #main{position:relative;z-index:1;background:#0e0f11;padding-top:72px;overflow:hidden}body[data-page=works] .projects-intro h1,body[data-page=works] .projects-intro p,body[data-page=works] .project-feature h2,body[data-page=works] .project-feature h3,body[data-page=works] .project-feature p{margin:0}.projects-intro{max-width:960px;margin:auto;padding:64px 0;display:grid;grid-template-columns:380px 500px;gap:80px}.projects-intro>div{grid-column:2}.projects-intro h1{font:500 40px/44px Inter;letter-spacing:-.4px}.projects-intro h1 span{color:#e3e5f180}.projects-intro p{margin-top:20px!important;color:#91939d;font:400 14px/20px Inter;letter-spacing:.16px;max-width:480px}.project-stage{height:486px;position:relative;perspective:1600px;outline-offset:-4px}.project-deck{position:relative;height:100%;transform-style:preserve-3d}.project-slide{position:absolute;left:50%;top:0;margin:0;width:min(1152px,calc(100vw - 64px));height:486px;border-radius:24px;overflow:hidden;background:#94e5f2;transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .75s;backface-visibility:hidden;box-shadow:0 24px 60px #0003}.project-slide img{width:100%;height:100%;object-fit:cover}.project-slide[data-position="0"]{transform:translateX(-50%) translateZ(0);opacity:1;z-index:3}.project-slide[data-position="-1"]{transform:translateX(-147%) translateZ(-180px) rotateY(12deg) scale(.88);opacity:.12;z-index:1}.project-slide[data-position="1"]{transform:translateX(47%) translateZ(-180px) rotateY(-12deg) scale(.88);opacity:.12;z-index:1}.project-slide[data-slide="1"] img{transform:scale(1.18);transform-origin:25% 50%}.project-slide[data-slide="2"] img{transform:scale(1.18);transform-origin:75% 50%}.slider-controls{position:absolute;z-index:4;right:max(48px,calc((100vw - 1056px)/2));bottom:20px;display:flex;align-items:center;gap:12px;color:#e3e5f1;font:12px/18px Inter;background:#0e0f11d9;padding:6px;border-radius:30px}.slider-controls button{width:36px;height:36px;border:0;border-radius:50%;background:#1c1e21;color:#e3e5f1;font-size:20px;cursor:pointer}.slider-controls button:hover{background:#82f277;color:#0e0f11}.project-details{max-width:960px;margin:auto;padding:40px 0 96px;display:grid;grid-template-columns:380px 500px;gap:80px}.project-eyebrow{font:12px/18px Inter;color:#91939d}.project-details h2{font:500 24px/28px Inter;letter-spacing:-.24px;margin-top:12px!important}.project-tags{display:flex;gap:8px;margin-top:20px}.project-tags span{background:#1c1e21;border-radius:20px;padding:6px 12px;font:12px/18px Inter;color:#91939d}.project-visit{display:inline-block;margin-top:24px;color:#82f277;font:14px/20px Inter}.project-details h3{font:500 16px/24px Inter}.project-details>div:nth-child(2) p{font:14px/21px Inter;color:#91939d;margin-top:8px!important}.project-details h3:not(:first-child){margin-top:24px!important}body[data-page=works] .works-catalog{max-width:960px;margin:0 auto;padding:0 0 96px;background:#0e0f11}body[data-page=works] .catalog-labels,body[data-page=works] .work-row{display:grid;grid-template-columns:240px 220px 1fr 42px;align-items:center;min-height:46px;padding:12px 0;gap:0;border:0;border-bottom:1px solid #34363c;font:400 14px/20px Inter;letter-spacing:-.28px;background:#0e0f11;color:#e3e5f1;text-decoration:none}body[data-page=works] .catalog-labels{color:#e3e5f14d}body[data-page=works] .work-plus{font:20px/20px Inter;justify-self:center}body[data-page=works] .editorial-start:hover{color:#0e0f11;background:#82f277}
@media(max-width:1050px){.projects-intro,.project-details{width:calc(100% - 48px);grid-template-columns:1fr 1.3fr;gap:48px}body[data-page=works] .works-catalog{width:calc(100% - 48px)}body[data-page=works] .catalog-labels,body[data-page=works] .work-row{grid-template-columns:22% 23% 1fr 32px}.project-stage,.project-slide{height:42.1875vw;min-height:240px}}
@media(max-width:650px){.projects-intro{display:block;padding:48px 0}.projects-intro h1{font-size:32px;line-height:36px}.project-slide{width:calc(100vw - 32px);border-radius:16px}.project-details{grid-template-columns:1fr;gap:32px;padding:32px 0 64px}.slider-controls{right:28px;bottom:12px}.project-tags{flex-wrap:wrap}body[data-page=works] .catalog-labels,body[data-page=works] .work-row{grid-template-columns:1fr 1.4fr 24px}body[data-page=works] .work-description,body[data-page=works] .catalog-labels>span:nth-child(3){display:none}body[data-page=works] .works-catalog{padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){.project-slide{transition:none}}
body[data-page=works]{padding-top:0}body[data-page=works] .projects-intro{margin-top:0}
body[data-page=works] .work-name,body[data-page=works] .work-type,body[data-page=works] .work-description{font:400 14px/20px Inter;letter-spacing:-.28px}body[data-page=works] .work-plus{font:20px/20px Inter}
@media(min-width:1051px){.projects-intro h1{white-space:nowrap}}

/* Project list typography and interactions match Figma 577:20941. */
body[data-page=works] .catalog-labels{color:rgba(255,255,255,.3);border-bottom:0}
body[data-page=works] .work-row{height:46px;min-height:46px;padding:11px 0;letter-spacing:0;color:#91939d}
body[data-page=works] .work-name,body[data-page=works] .work-type,body[data-page=works] .work-description{font:400 14px/21px Inter;letter-spacing:0}
body[data-page=works] .work-name{color:#e3e5f1;transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s}
body[data-page=works] .work-type,body[data-page=works] .work-description{color:#91939d}
body[data-page=works] a.work-row:hover,body[data-page=works] a.work-row:focus-visible{background:#0e0f11;color:#91939d}
body[data-page=works] a.work-row:is(:hover,:focus-visible) .work-name{transform:translateX(6px);color:#82f277}
body[data-page=works] .work-plus{justify-self:end;padding-right:8px}
.project-row-arrow{position:relative;display:grid;place-items:center;width:20px;height:20px}
.project-row-arrow img{position:absolute;max-width:none;transition:opacity .2s}
.project-row-arrow .arrow-green{opacity:0}
a.work-row:is(:hover,:focus-visible) .arrow-green{opacity:1}
a.work-row:is(:hover,:focus-visible) .arrow-muted{opacity:0}
@media(prefers-reduced-motion:reduce){body[data-page=works] .work-name,.project-row-arrow img{transition:none}}

body[data-page=works] .work-plus{transform:none;transition:none}
body[data-page=works] .project-row-arrow{transform:translateX(0);transition:transform .3s cubic-bezier(.22,1,.36,1)}
body[data-page=works] a.work-row:is(:hover,:focus-visible) .work-plus{transform:none}
body[data-page=works] a.work-row:is(:hover,:focus-visible) .project-row-arrow{transform:translateX(-4px)}
body[data-page=works] .project-row-arrow img{transform:none;rotate:none}
@media(prefers-reduced-motion:reduce){body[data-page=works] .project-row-arrow{transition:none}}

/* Cover the full page width above the footer reveal, including catalog gutters. */
body[data-page=works] .projects-catalog-surface{position:relative;width:100%;background:#0e0f11;display:flow-root}
body[data-page=works] div.work-row:hover .work-name{color:#e3e5f1;transform:none}

/* One shared recent-project section, replacing the carousel. */
body[data-page=works] .projects-recent-surface{background:#0e0f11;display:flow-root;position:relative;}
body[data-page=works] .projects-recent-surface .recent-project{width:calc(100% - 48px);max-width:1152px;margin:0 auto;padding-top:0;}
body[data-page=works] .projects-recent-surface .recent-project-preview{margin:0;border-radius:24px;}
body[data-page=works] .projects-recent-surface .recent-project-details{max-width:960px;margin:40px auto 0;grid-template-columns:380px 500px;gap:80px;border-bottom:0;padding-bottom:96px;}
@media(max-width:1050px){body[data-page=works] .projects-recent-surface .recent-project-details{grid-template-columns:1fr 1.3fr;gap:40px;}}
@media(max-width:680px){body[data-page=works] .projects-recent-surface .recent-project-preview{border-radius:16px;}body[data-page=works] .projects-recent-surface .recent-project-details{grid-template-columns:1fr;gap:24px;margin-top:32px;padding-bottom:64px;}}

/* Projects hero — Figma 582:22544. */
.projects-intro{padding-top:64px;padding-bottom:64px;align-items:start;}
.projects-hero-smile{grid-column:1;grid-row:1;width:160px;height:160px;object-fit:contain;display:block;}
.projects-intro>div{grid-column:2;grid-row:1;}
@media(max-width:650px){.projects-intro{display:flex;flex-direction:column;gap:24px;padding:48px 0;}.projects-hero-smile{width:120px;height:120px;}}

body[data-page=works] .projects-rotation{display:grid;}
body[data-page=works] .projects-rotation .recent-project{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease,visibility 1s;}
body[data-page=works] .projects-rotation .recent-project:first-child,body[data-page=works] .projects-rotation .recent-project.is-current{opacity:1;visibility:visible;pointer-events:auto;}
body[data-page=works] .projects-rotation.has-rotation .recent-project:first-child:not(.is-current){opacity:0;visibility:hidden;pointer-events:none;}
body[data-page=works] .projects-rotation [data-project] .recent-preview-backdrop{left:-40.2778%;top:-25.3086%;filter:blur(40px);}
body[data-page=works] .projects-rotation [data-project=symbolic] .recent-preview-browser{width:89.2361%;left:5.2951%;top:5.9671%;}
body[data-page=works] .projects-rotation [data-project=toffee] .recent-preview-browser{width:92.3113%;left:3.875%;top:11.3169%;}
@media(prefers-reduced-motion:reduce){body[data-page=works] .projects-rotation .recent-project{transition:none;}}

/* One section changes its content in place. */
body[data-page=works] .projects-rotation{display:block;}
body[data-page=works] .projects-rotation .recent-project{opacity:1;visibility:visible;pointer-events:auto;}
body[data-page=works] .projects-rotation .recent-project-details{min-height:330px;box-sizing:border-box;transition:opacity .55s ease,filter .55s ease,transform .7s cubic-bezier(.22,1,.36,1);}
body[data-page=works] .projects-rotation .recent-preview-browser{transition:opacity .55s ease,filter .55s ease,scale .8s cubic-bezier(.22,1,.36,1);}
body[data-page=works] .projects-rotation .recent-preview-backdrop{transition:opacity .55s ease;}
body[data-page=works] .projects-rotation.is-morphing .recent-preview-browser{opacity:0;filter:blur(14px);scale:.96;}
body[data-page=works] .projects-rotation.is-morphing .recent-preview-backdrop{opacity:.25;}
body[data-page=works] .projects-rotation.is-morphing .recent-project-details{opacity:0;filter:blur(5px);transform:translateY(8px);}
body[data-page=works] .projects-rotation .recent-project-link[hidden]{display:none;}
body[data-page=works] .projects-rotation [data-project=taobot] .recent-preview-backdrop{left:-28.6458%;top:-15.8436%;filter:none;}
body[data-page=works] .projects-rotation [data-project=taobot] .recent-preview-browser{width:92.3611%;left:3.81944%;top:11.5226%;}
@media(prefers-reduced-motion:reduce){body[data-page=works] .projects-rotation .recent-preview-browser,body[data-page=works] .projects-rotation .recent-project-details,body[data-page=works] .projects-rotation .recent-preview-backdrop{transition:none;}}

/* Phone catalog, Figma 615:33783: Name, Industry, link arrow. */
@media(max-width:680px){
 body[data-page=works] .catalog-labels,body[data-page=works] .work-row{grid-template-columns:minmax(0,1fr) minmax(0,160px) 42px;height:46px;min-height:46px;}
 body[data-page=works] .work-name,body[data-page=works] .catalog-labels>span:nth-child(2){grid-column:1;grid-row:1;min-width:0;}
 body[data-page=works] .work-type,body[data-page=works] .catalog-labels>span:first-child{grid-column:2;grid-row:1;min-width:0;}
 body[data-page=works] .work-plus,body[data-page=works] .catalog-labels>span:last-child{grid-column:3;grid-row:1;}
 body[data-page=works] .work-description,body[data-page=works] .catalog-labels>span:nth-child(3){display:none;}
 body[data-page=works] .work-name,body[data-page=works] .work-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 body[data-page=works] .work-type{padding-right:8px;}
}
@media(max-width:360px){body[data-page=works] .catalog-labels,body[data-page=works] .work-row{grid-template-columns:minmax(0,1fr) minmax(0,140px) 32px;}}