@view-transition{navigation:auto}::view-transition-old(root){animation:page-out .3s ease both}::view-transition-new(root){animation:page-in .6s cubic-bezier(.2,.7,.2,1) both}@keyframes page-out{to{opacity:0;transform:translateY(-24px)}}@keyframes page-in{from{opacity:0;transform:translateY(40px)}}
:root{--ink:#111;--paper:#fff;--muted:#aaa;--card:#f4f4f4;--gutter:clamp(24px,2.3vw,48px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Outfit,Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #559fc9;outline-offset:6px}img{max-width:100%;display:block}h1,h2,h3,h4,p{margin-top:0}p{line-height:1.5}h3,h4{font-weight:500}.skip-link{position:fixed;top:-80px;left:20px;padding:12px;background:#fff;z-index:100}.skip-link:focus{top:16px}.site-header{position:absolute;top:0;right:0;padding:40px 4%;z-index:10;color:#fff}.site-header nav{display:flex;gap:clamp(28px,4vw,72px);font-size:clamp(16px,1.4vw,24px);font-weight:400}.site-header a{padding:8px 0;position:relative}.site-header a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}.site-header a:hover:after{transform:scaleX(1)}.hero-track{height:125svh;background:#111}.hero{height:100svh;min-height:560px;position:sticky;top:0;overflow:hidden;background:#19232c}.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform,opacity}.hero-brand{position:absolute;bottom:24px;left:22%;width:56%;margin:0}.brand-crop{display:block;position:relative;width:100%;aspect-ratio:6.57;overflow:hidden}.brand-crop img{position:absolute;width:106.43%;height:249.33%;max-width:none;left:-3.54%;top:-72%}.scroll-cue{position:absolute;bottom:34px;right:3%;display:flex;align-items:center;gap:18px;color:#fff;font-size:14px}.scroll-cue b{font-size:28px;font-weight:300}.scroll-cue span{writing-mode:vertical-rl;font-size:12px;letter-spacing:.04em}.sloped{position:relative;clip-path:polygon(0 var(--edge,0px),100% 0,100% 100%,0 100%);padding-top:clamp(100px,10vw,172px)}.about{background:#111;color:#fff;margin-top:-25svh;padding-bottom:160px;z-index:2;--edge:3vw}.section-inner{padding:0 var(--gutter);max-width:1920px;margin:auto}.intro-reveal{font-size:clamp(34px,4.4vw,76px);line-height:1.055;font-weight:500;letter-spacing:-.025em;text-indent:5vw;margin:0 0 clamp(64px,5vw,90px)}.intro-reveal .word{transition:color .1s;color:rgba(255,255,255,.23)}.intro-reveal .word.lit{color:#fff}.background{display:grid;grid-template-columns:15% 45% 1fr;column-gap:2.2%;align-items:start}.background h3,.section-label,.awards h3{font-size:clamp(16px,1.3vw,22px);font-weight:500}.muted{color:#aaa;font-size:clamp(16px,1.3vw,22px);line-height:1.42}.muted p{line-height:1.42;margin:0 0 24px}.portrait{height:auto;width:52%;aspect-ratio:302/417;object-fit:cover;justify-self:center;margin:5px 0 0 10%}.experience{margin-top:60px}.section-label{margin-bottom:38px}.experience-row{display:grid;grid-template-columns:15% 52% 1fr;gap:2.2%;margin-bottom:60px}.experience-copy h4{font-size:clamp(17px,1.3vw,22px);margin-bottom:4px;font-weight:600}.company-period{font-size:clamp(16px,1.3vw,22px);margin-bottom:22px;font-weight:300}.company-logo{position:relative;width:min(90%,164px);height:36px;overflow:hidden;margin-top:5px}.company-logo img{position:absolute;max-width:none}.pingan{height:47px}.pingan img{width:127.68%;height:420.51%;left:-13.82%;top:-160.81%}.lexin img{width:123.3%;height:154.23%;left:-11.13%;top:-27.82%}.webank img{width:100%;height:185.71%;left:0;top:0}.tencent img{width:108.75%;height:224.49%;left:-3.97%;top:-61.62%}.alibaba img{width:128.54%;height:100%;left:-28.54%;top:0}.awards{display:grid;grid-template-columns:15% 1fr;gap:2.2%;margin-top:30px}.awards>div{display:flex;align-items:center;gap:28px;max-width:1040px}.awards img{height:clamp(65px,7vw,125px);width:auto;max-width:28%;object-fit:contain}.work{background:#fff;margin-top:-60px;padding-bottom:110px;z-index:3;--edge:3vw}.work-heading{text-align:center;margin:0 0 40px}.work-heading h2{font-size:clamp(32px,3.5vw,60px);font-weight:400;line-height:1.2;margin-bottom:6px;letter-spacing:-.025em}.work-heading p{font-size:clamp(16px,1.4vw,24px);margin:0}.work-list{padding:0 var(--gutter);max-width:1920px;margin:auto}.work-item{position:sticky;top:calc(28px + var(--i)*10px);padding-bottom:28px;perspective:1500px;transform-origin:center top;scroll-margin-top:75px}.work-card{display:grid;grid-template-columns:37% 63%;align-items:center;padding:clamp(18px,1.75vw,30px);border-radius:clamp(20px,2.1vw,36px);background:var(--card);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;transform-origin:center top;box-shadow:0 0 0 1px rgba(0,0,0,.015)}.card-copy{padding:20px clamp(16px,2.4vw,44px) 20px clamp(6px,1.2vw,21px)}.card-copy h3{font-size:clamp(26px,2.78vw,48px);font-weight:500;line-height:1.2;letter-spacing:-.025em;margin-bottom:18px}.card-copy p{font-size:clamp(18px,1.74vw,30px);line-height:1.3;margin-bottom:30px;font-weight:300}.view-case{display:inline-flex;gap:24px;align-items:center;font-size:15px;font-weight:400;border-bottom:1px solid #aaa;padding:4px 0 8px}.view-case span{font-size:20px}.card-image{aspect-ratio:999/706;overflow:hidden;border-radius:clamp(16px,1.74vw,30px)}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.work-item:nth-child(2) .card-image img{width:125.57%;max-width:none;transform:translateX(-4.45%)}@media(hover:hover) and (pointer:fine){.work-card:hover{transform:translateY(-10px);box-shadow:0 22px 55px #0002}.work-card:hover .card-image img{scale:1.025}}.work-card:active{transform:scale(.992)}.other-work{position:relative;background:white;padding:60px var(--gutter) 0;max-width:1920px;margin:auto}.other-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:70px}.other-grid article{background:#f9f9fb;border-radius:12px;padding:0 20px 24px;text-align:center}.other-grid img{width:70px;height:70px;object-fit:contain;margin:-30px auto 15px}.other-grid h3{font-size:24px;font-weight:500;margin-bottom:14px}.other-grid p{font-size:16px;text-align:left;line-height:1.4;margin:0}footer{background:#000;color:white;padding:clamp(64px,7.5vw,130px) 3.6%;display:flex;align-items:center;justify-content:space-between;gap:35px;position:relative;z-index:5}.footer-brand{width:40%;max-width:658px}.contact-links{display:flex;gap:30px;align-items:center}.contact-links a{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}.contact-links img{width:32px;height:32px}.contact-links a:hover{text-decoration:underline}.reveal{transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}.js .reveal:not(.visible){opacity:0;translate:0 28px}.case-page{background:#fff}.case-nav{display:flex;justify-content:space-between;align-items:center;padding:20px max(24px,8.68vw);font-size:16px;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);z-index:20;border-bottom:1px solid #eee}.case-nav a{padding:10px 0}.case-nav a:hover{text-decoration:underline}.case-main{max-width:1728px;margin:auto;padding:50px 8.68% 90px}.case-count{font-size:13px;letter-spacing:.1em;color:#777;margin-bottom:24px}.case-intro h1{font-family:Arial,sans-serif;font-size:clamp(28px,2.32vw,40px);font-weight:600;font-style:italic;line-height:1.2;letter-spacing:-.02em;margin-bottom:28px}.case-description{font-family:Arial,sans-serif;font-weight:300;font-size:clamp(17px,1.39vw,24px);line-height:1.5}.case-description p{margin-bottom:22px;line-height:1.5}.impact{margin:45px 0 28px}.impact h2{font-size:clamp(22px,1.85vw,32px);font-weight:400;margin-bottom:20px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.stats article{border-radius:12px;padding:24px 20px;background:#f9f9fb}.stats strong{display:block;font-size:clamp(38px,3.7vw,64px);font-weight:600;line-height:1}.stats h3{font-size:16px;font-weight:500;margin:7px 0 15px}.stats p{font-size:14px;font-weight:300;margin:0;line-height:1.3}.award-stat img{height:90px;max-width:100%;width:180px;object-fit:contain;margin-bottom:14px}.case-gallery{margin-top:25px}.detail-image{display:block;padding:0;border:0;background:transparent;width:100%;cursor:default}.detail-image img{width:100%;height:auto}.case-bottom{margin-top:60px;padding-top:30px;border-top:1px solid #ddd;display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:18px}.case-bottom a:last-child{text-align:right;max-width:60%}.case-bottom a:hover{text-decoration:underline}.leaving main{opacity:0;transform:translateY(-18px);transition:opacity .18s,transform .18s}
@media(min-width:1900px){.hero-photo{object-fit:cover}.case-main{padding-left:150px;padding-right:150px}}@media(max-width:1000px){.background{grid-template-columns:19% 51% 1fr;gap:3%}.portrait{width:100%;margin-left:0}.experience-row{grid-template-columns:19% 72%;gap:3%}.awards{grid-template-columns:19% 1fr;gap:3%}.awards>div{gap:15px}.card-copy{padding:12px 22px 12px 8px}.card-copy h3{font-size:28px}.card-copy p{font-size:19px}.other-grid{gap:14px}.other-grid article{padding:0 14px 20px}.other-grid h3{font-size:20px}.stats{gap:12px}.stats article{padding:20px 14px}.case-main{padding-left:5%;padding-right:5%}.footer-brand{width:45%}.contact-links{gap:20px}.contact-links a span{display:none}}
@media(max-width:700px){html{scroll-padding-top:25px}.site-header{padding:24px}.site-header nav{gap:28px;font-size:16px}.hero-track{height:115svh}.hero{min-height:500px}.hero-photo{object-position:50% 50%}.hero-brand{left:6%;width:88%;bottom:76px}.scroll-cue{bottom:22px;right:24px;left:24px;justify-content:space-between;font-size:14px}.scroll-cue span{writing-mode:horizontal-tb;font-size:14px}.about{margin-top:-15svh;padding-bottom:110px;--edge:5vw}.sloped{padding-top:90px}.intro-reveal{font-size:clamp(32px,7.8vw,52px);line-height:1.12;text-indent:30px;margin-bottom:54px}.background{grid-template-columns:1fr 100px;gap:20px}.background h3{grid-column:1/-1;margin:0}.background .muted{grid-column:1/-1;grid-row:3}.portrait{grid-column:2;grid-row:1/3;width:100px;margin:0;justify-self:end}.background h3{align-self:start;padding-right:120px;min-height:120px}.muted{font-size:17px}.muted p{line-height:1.5;margin-bottom:22px}.experience{margin-top:30px}.section-label{margin-bottom:38px}.experience-row{grid-template-columns:1fr;gap:18px;margin-bottom:44px}.company-logo{width:125px;height:28px}.pingan{height:38px}.experience-copy h4,.company-period{font-size:17px}.company-period{margin-bottom:18px}.awards{display:block;margin-top:45px}.awards>div{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.awards img{max-width:100%;width:100%;height:75px;object-fit:contain}.awards h3{margin-bottom:25px}.work{margin-top:-40px;padding-bottom:75px;--edge:5vw}.work-heading{margin-bottom:32px}.work-heading h2{font-size:32px}.work-item{position:relative;top:auto;padding-bottom:24px;scroll-margin-top:24px}.work-card{display:flex;flex-direction:column;padding:16px;border-radius:22px;gap:12px}.card-copy{padding:12px 7px 6px;order:2}.card-copy h3{font-size:29px;line-height:1.14;margin-bottom:15px}.card-copy p{font-size:18px;line-height:1.4;margin-bottom:20px}.card-image{order:1;aspect-ratio:999/706;width:100%;border-radius:15px}.view-case{font-size:15px;margin-bottom:8px;gap:18px}.other-work{padding-top:30px}.other-grid{grid-template-columns:1fr 1fr;gap:50px 16px;margin-top:60px}.other-grid h3{font-size:20px}.other-grid p{font-size:16px}.other-grid img{width:60px;height:60px}footer{padding:60px 24px;flex-direction:column;align-items:flex-start;gap:36px}.footer-brand{width:100%;max-width:360px}.contact-links{gap:35px}.contact-links a span{display:inline}.contact-links img{width:28px;height:28px}.case-nav{padding:12px 24px;font-size:15px}.case-main{padding:32px 24px 55px}.case-intro h1{font-size:30px;line-height:1.2}.case-description{font-size:17px}.stats{grid-template-columns:1fr 1fr;gap:12px}.stats h3{font-size:14px}.stats p{font-size:14px}.stats strong{font-size:44px}.award-stat img{height:72px}.case-gallery{margin-left:-12px;margin-right:-12px}.case-bottom{font-size:16px;margin-top:35px;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-track{height:100svh}.about{margin-top:0}.hero-photo{transform:none!important;opacity:1!important}.sloped{clip-path:none}.intro-reveal .word{color:#fff}.work-item{position:relative;top:auto}.js .reveal:not(.visible){opacity:1;translate:none}::view-transition-old(root),::view-transition-new(root){animation:none}}
/* Other Work: one link owns the surface, icon and interaction states. */
.other-grid{--app-icon:clamp(72px,5.44vw,94px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:calc(36px + var(--app-icon)*.36);align-items:stretch}
.other-grid .other-card-link{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:245px;padding:calc(var(--app-icon)*.64 + 12px) 20px 24px;border-radius:12px;background:#f9f9fb;color:#111;isolation:isolate;text-align:center;transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease;box-shadow:0 0 0 transparent}
.other-grid .other-card-link>img{position:absolute;top:calc(var(--app-icon)*-.36);left:50%;transform:translateX(-50%);width:var(--app-icon);height:var(--app-icon);object-fit:contain;margin:0}
.other-grid .other-card-link>h3{width:100%;font-size:clamp(22px,1.62vw,28px);font-weight:600;line-height:1.25;margin:0 0 12px;letter-spacing:-.02em}
.other-grid .other-card-link>p{width:100%;font-size:clamp(16px,1.04vw,18px);font-weight:300;line-height:1.4;text-align:left;margin:0;overflow-wrap:break-word}
.other-grid .other-card-link:focus-visible{background:#f1f1f5;outline:2px solid #787888;outline-offset:5px}
@media(hover:hover) and (pointer:fine){.other-grid .other-card-link:hover{transform:translateY(-5px);background:#f1f1f5;box-shadow:0 12px 28px rgba(22,22,40,.08)}}
.other-grid .other-card-link:active{transform:translateY(-1px);background:#e9e9ef;box-shadow:0 3px 10px rgba(22,22,40,.05)}
@media(max-width:1100px){.other-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px;--app-icon:80px}.other-grid .other-card-link{min-height:238px;padding-right:24px;padding-left:24px}.other-grid .other-card-link>h3{font-size:25px}}
@media(max-width:600px){.other-grid{grid-template-columns:1fr;--app-icon:76px;gap:58px;margin-top:64px}.other-grid .other-card-link{min-height:0;padding:calc(var(--app-icon)*.64 + 14px) 24px 26px}.other-grid .other-card-link>h3{font-size:24px;margin-bottom:12px}.other-grid .other-card-link>p{font-size:17px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.other-grid .other-card-link{transition:none}.other-grid .other-card-link:hover,.other-grid .other-card-link:active{transform:none}}

/* Opening logo reveal and a touch-friendly, gently pulsing scroll cue. */
.js .hero-brand{opacity:0;translate:0 12px;transition:opacity .85s ease,translate .85s cubic-bezier(.2,.7,.2,1)}
.js .hero-brand.intro-complete{opacity:var(--brand-scroll-opacity,1);translate:0 0}
.scroll-cue{width:48px;height:48px;justify-content:center;border-radius:50%}
.scroll-cue b{display:block;animation:scroll-pulse 1.8s ease-in-out infinite}
@keyframes scroll-pulse{0%,100%{opacity:1;transform:translateY(-3px)}50%{opacity:.3;transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.js .hero-brand{opacity:1;translate:none;transition:none}.scroll-cue b{animation:none}}

.js .home-page .site-header{opacity:0;visibility:hidden;translate:0 12px;transition:opacity .85s ease,translate .85s cubic-bezier(.2,.7,.2,1),visibility .85s}
.js .home-page .site-header.intro-complete{opacity:1;visibility:visible;translate:0 0}
@media(prefers-reduced-motion:reduce){.js .home-page .site-header{opacity:1;visibility:visible;translate:none;transition:none}}

/* Keep the first paint clean, before the deferred application starts. */
.js .hero-brand:not(.intro-complete),.js .home-page .site-header:not(.intro-complete){opacity:0;visibility:hidden}
.hero-brand.intro-complete{visibility:visible}


@media(max-width:600px){.background h3{grid-column:1;grid-row:1;min-height:0;padding:0;align-self:start}.background .portrait{grid-column:2;grid-row:1}.background .muted{grid-column:1/-1;grid-row:2}.hero{min-height:0;height:100svh}.hero-photo{display:block}}

.js .scroll-cue{opacity:0;visibility:hidden;transition:opacity .85s ease}.js .scroll-cue.intro-complete{opacity:1;visibility:visible}

.hero-photo[hidden],.hero-still[hidden]{display:none}.hero-still{display:block;width:100%;height:100%;object-fit:cover;object-position:center}