@font-face{font-family:Aeonik;src:url('/assets/fonts/Aeonik-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Aeonik;src:url('/assets/fonts/Aeonik-Medium.woff2') format('woff2');font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('/assets/fonts/NotoSansSC-VF.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--font-body:Aeonik,'Noto Sans SC',sans-serif;--font-display:var(--font-body);--type-label:12px;--type-body:clamp(16px,1.25vw,20px);--type-leading:1.55;--page-gutter:5vw}
:root{
 --type-display:clamp(56px,8vw,128px);
 --type-title:clamp(36px,4.5vw,72px);
 --type-section:clamp(30px,3vw,48px);
 --type-lead:clamp(24px,2.5vw,40px);
 --type-card:clamp(24px,2.25vw,36px);
 --type-meta:14px;--type-ui:14px;--type-caption:12px;
 --leading-title:1.05;--leading-body:1.55;--leading-meta:1.5;
 --space-unit:8px;--space-copy:24px;--space-section:48px;
 --cover-wide:37.5%;--cover-standard:62.5%;--cover-mobile:56.25%;
}
html[lang=zh-CN]{--type-leading:1.8}
body{font-family:var(--font-body)!important;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased}
body :where(*):not(dom):not(dom *){font-family:inherit!important}
button,input,select{font:inherit}
h1,h2,h3{font-weight:400;letter-spacing:-.035em}
html[lang=zh-CN] :is(h1,h2,h3){letter-spacing:-.02em}
#project-details-desc{font-size:var(--type-body);line-height:var(--type-leading);max-width:40ch}
#project-details-desc p+p{margin-top:1.25em}
.about-award-item-wrapper-text:last-child{font-size:clamp(15px,1.3vw,20px)!important;line-height:var(--type-leading)!important}
.career-source p{line-height:var(--type-leading)}
#about-who-team-name{font-size:clamp(16px,2vw,30px);line-height:1.2}
#about-who-team-job{font-size:clamp(12px,1vw,16px);line-height:1.5}
.language-switch{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:18px 24px;font-size:12px;line-height:20px;letter-spacing:.025em;color:#202126;pointer-events:auto}
.language-switch button{padding:4px 0;border:0;background:none;color:inherit;cursor:pointer;opacity:.5;white-space:nowrap}
.language-switch button[aria-pressed=true]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.language-switch button:hover{opacity:1}.language-switch span{opacity:.3}
#header-menu>.language-switch{background:#fff;border-radius:10px;margin-top:10px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .4s,visibility .3s}
#header-menu.--opened>.language-switch{opacity:1;visibility:visible;transform:none}
#header-menu-labs{padding:24px}
#header-menu-labs-inner{gap:14px}
#header-menu-labs-lucy{width:22px;height:22px;flex-shrink:0}
#header-menu-labs-texts{font-size:20px;line-height:1.2;height:1.2em;overflow:hidden}
#header-menu-labs-text,#header-menu-labs-text-clone{font-size:inherit!important;letter-spacing:-.02em;white-space:nowrap}
.language-switch button:focus-visible,[data-action=sound]:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.is-filmstrip .language-switch{position:fixed;z-index:9;top:86px;right:50px;color:var(--series-ink);padding:0;transition:color .5s}
.is-filmstrip .t{font-variant-numeric:tabular-nums}
.is-filmstrip #series-heading h1{font-weight:400;font-size:clamp(30px,3vw,48px);letter-spacing:-.04em;line-height:1.05}
.is-filmstrip #series-heading h1 span{font-size:11px;letter-spacing:.045em;line-height:3.2}
.is-filmstrip #n0{font-size:25px;font-weight:500;letter-spacing:-.04em}
.is-filmstrip #n0>span:nth-child(2){margin-right:8px}
.is-filmstrip #a{visibility:hidden;transition:visibility 0s 1.6s}
.is-filmstrip.mode-a #a{visibility:visible;transition-delay:0s}
.is-filmstrip .i-l,.is-filmstrip .i-r{display:none!important}
.is-filmstrip #n2,.is-filmstrip #n3{font-size:11px;line-height:1.5}
.is-filmstrip #series-controls{font-variant-numeric:tabular-nums}
.is-filmstrip #a-nif-w{font-size:clamp(42px,6vw,105px);letter-spacing:-.055em;line-height:.95}
.is-filmstrip #a-p{font-size:13px;line-height:1.9}
.is-filmstrip .a-nif>span{margin-left:0;letter-spacing:0}
.is-filmstrip.mode-a .language-switch{color:#d6ddd4}
.is-filmstrip #a-list{font-size:12px;line-height:1.65}
#series-audio{position:fixed;z-index:9;top:122px;right:50px;background:none;border:0;padding:0;color:var(--series-ink);font-size:11px;line-height:20px;cursor:pointer;opacity:0;pointer-events:none;transition:color .5s,opacity .4s}
:is(.mode-in,.mode-w) #series-audio{opacity:1;pointer-events:auto}
#series-audio:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){
 .is-filmstrip .language-switch{top:106px;right:22px;font-size:11px;gap:10px}
 #series-audio{top:140px;right:22px;font-size:10px}
 .is-filmstrip #series-heading{top:16vh;max-width:75vw}
 .is-filmstrip #series-heading h1{font-size:30px}
 .is-filmstrip #series-heading h1 span{font-size:9px;letter-spacing:.01em;line-height:2.5}
 .is-filmstrip #series-heading .series-gesture{max-width:200px;font-size:10px;line-height:1.5}
 .is-filmstrip #a-nif-w{font-size:43px}
 .is-filmstrip #a-p{display:block;padding-top:28px;font-size:11px;line-height:1.7;max-width:calc(100vw - 44px)}
 .is-filmstrip #n3{font-size:10px}
 .is-filmstrip.mode-in .e{right:50%;transform:translateX(50%);bottom:60px}
 .is-filmstrip.mode-in #n3{bottom:22px}
}

/* One English editorial scale across the outer site and the independent series.
   Preserve the native animated DOM and its scroll/transition geometry. */
html[lang=en] :is(#home-reel-title,#home-featured-title-wrapper,#home-goal-title,#projects-main-title-wrapper){font-size:var(--type-display);line-height:1.05;letter-spacing:-.045em}
html[lang=en] :is(#home-featured-title,#projects-main-title){font-size:inherit;line-height:1.05}
html[lang=en] #home-hero-title{font-size:var(--type-lead);line-height:1.15;letter-spacing:-.025em}
html[lang=en] :is(#project-details-title,#about-who-title-left,#about-who-title-right,.about-award-header-title){font-size:var(--type-title);line-height:1.1;letter-spacing:-.035em;font-weight:400}
html[lang=en] :is(.portfolio-group-heading h2,#about-clients-title){font-size:var(--type-section);line-height:1.15;letter-spacing:-.03em;font-weight:400}
html[lang=en] #projects-main-title-project-number{font-size:var(--type-lead);line-height:1.2;letter-spacing:0;font-variant-numeric:tabular-nums}
html[lang=en] :is(#home-reel-desc,#home-featured-desc,#project-details-desc,.portfolio-group-heading p){font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:0;font-weight:400}
html[lang=en] #project-details-desc{margin:32px 0;max-width:40ch}
html[lang=en] #project-details-desc p+p{margin-top:var(--space-copy)}
#project-details-left{width:66%}
#project-details-right{width:34%;padding-left:24px;margin-top:32px}
html[lang=en] #project-details-side-list{font-size:var(--type-meta);line-height:var(--leading-meta)}
html[lang=en] .project-details-side-list-title{font-size:var(--type-caption);line-height:1.5;letter-spacing:.06em;font-weight:500;margin:0 0 12px}
html[lang=en] .project-details-side-list-item{font-size:var(--type-meta);line-height:var(--leading-meta)}
html[lang=en] .project-details-side-list-item+.project-details-side-list-item{margin-top:12px;opacity:.65}
html[lang=en] .career-note{font-size:var(--type-meta);line-height:var(--leading-meta)}
html[lang=en] :is(.project-item-line-1,.project-status,.portfolio-group-number,.contact-eyebrow,.contact-methods dt){font-size:var(--type-caption);line-height:1.5;letter-spacing:.035em;font-weight:400}
html[lang=en] .project-item-line-2{font-size:var(--type-card);height:1.1em;line-height:1.1;letter-spacing:-.025em}
html[lang=en] .project-item-line-2-inner{bottom:0}
.project-item-meta{align-items:flex-start;flex-wrap:wrap;gap:8px 16px}
.project-item-meta .project-item-line-1{flex:1 1 180px}
/* A detail page has one return control in the site's left-hand header slot. */
body[data-journey-page=project] #header-logo{visibility:hidden;pointer-events:none}
#header-center-project-back-btn{left:var(--base-padding-x);right:auto;width:fit-content;padding:0 1.5em 0 1em}
#header-center-project-back-btn-text{display:block}
html[lang=en] :is(#header-right-talk-btn,#header-right-menu-btn,#header-center-project-back-btn,#project-details-launch-cta,#project-details-launch-cta-mobile,#project-details-header-info){font-size:var(--type-ui);line-height:1.2;font-weight:500;letter-spacing:0}
html[lang=en] #about-who-title-main-scroll{font-size:var(--type-ui);letter-spacing:0}
html[lang=en] .portfolio-career .about-award-item-wrapper-text{font-size:var(--type-body)!important;line-height:var(--leading-body)!important}
html[lang=en] .portfolio-career .about-award-item-wrapper-text:nth-child(2){font-size:var(--type-caption)!important;line-height:1.5!important}
html[lang=en] :is(.career-source p,.career-work-link){font-size:var(--type-meta);line-height:var(--leading-meta)}
html[lang=en] #about-who-team-name{font-size:var(--type-card)!important;line-height:1.2!important}
html[lang=en] #about-who-team-job{font-size:var(--type-caption)!important;line-height:1.5!important;letter-spacing:.035em}
/* English headings reserve room for the longer words and decorative icon. */
html[lang=en] #about-capability-title{font-size:clamp(44px,7.8vw,156px);line-height:1.15;letter-spacing:-.045em}
html[lang=en] #about-capability-title #about-capability-title-line-2{left:0;align-self:flex-end}
html[lang=en] .about-award-header-title{box-sizing:border-box;width:calc(100% - var(--page-gutter) - 72px);max-width:none;padding-right:0;line-height:1.2;overflow:visible;white-space:nowrap;word-break:normal;overflow-wrap:normal}
html[lang=en] .about-award-header-number{left:auto;right:var(--page-gutter);top:.6em}
html[lang=en] #about-who-title-left-2{height:1em;line-height:1;overflow:visible}
html[lang=en] #about-who-title-left-2 svg{width:auto;height:100%;overflow:visible}
@media(max-width:812px){html[lang=en] #about-capability-title{font-size:clamp(35px,8.8vw,70px)}html[lang=en] .about-award-header-title{width:calc(100% - var(--page-gutter) - 48px);font-size:clamp(30px,6.5vw,48px)}html[lang=en] .about-award-header-svg{width:1.75em;height:1.75em}}
html[lang=en] :is(#about-who-team-desc,#about-who-team-desc-text,#about-clients-desc){font-size:var(--type-meta);line-height:var(--leading-meta)}
html[lang=en] #end-section-title-link{font-size:var(--type-title);line-height:1.1;letter-spacing:-.035em}
html[lang=en] #portfolio-dialog.is-contact h1{font-size:var(--type-title);line-height:1.1;letter-spacing:-.035em}
html[lang=en] .contact-methods dd{font-size:var(--type-lead);line-height:1.25;letter-spacing:-.025em}
html[lang=en] .is-filmstrip #series-heading h1{font-size:var(--type-title);line-height:1.1;letter-spacing:-.035em;font-weight:400}
html[lang=en] .is-filmstrip #series-heading .series-description{font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:0;max-width:38ch}
html[lang=en] .is-filmstrip #series-heading .series-gesture{font-size:var(--type-meta);line-height:var(--leading-meta);letter-spacing:0}
html[lang=en] :is(#series-back,#series-audio,#series-controls button,.is-filmstrip .e){font-size:var(--type-ui)!important;line-height:1.5;font-weight:500;letter-spacing:0}
html[lang=en] :is(#series-time,.is-filmstrip #series-counter,.is-filmstrip #series-duration){font-size:var(--type-caption);line-height:1.5}
/* Media ratios are shared by role: panoramic features and regular catalogue cards. */
#home-featured .project-item .project-item-main,#projects-main .portfolio-group .project-series-feature .project-item-main,#projects-main #portfolio-art .project-item .project-item-main{padding-top:var(--cover-wide)}
#projects-main .portfolio-group .project-item:not(.project-series-feature) .project-item-main{padding-top:var(--cover-standard)}
#projects-main #portfolio-art .project-item .project-item-main{padding-top:var(--cover-wide)}
@media(max-width:812px){
 :root{--type-display:clamp(48px,12vw,72px);--type-title:clamp(32px,8vw,44px);--type-section:30px;--type-lead:24px;--type-card:24px;--type-body:16px;--type-meta:14px;--space-copy:20px}
 html[lang=en] #home-reel-title{font-size:clamp(40px,10.5vw,72px)}
 #project-details-left,#project-details-right{float:none;width:100%;padding-left:0;margin-top:0}
 #project-details-side-list{grid-template-columns:1fr}
 html[lang=en] #project-details-desc{margin:24px 0;max-width:40ch}
 html[lang=en] #project-details-right{margin-top:24px}
 html[lang=en] #project-details-side-list-services{max-width:32ch}
 #home-featured .project-item .project-item-main,#projects-main .portfolio-group .project-item .project-item-main,#projects-main .portfolio-group .project-item:not(.project-series-feature) .project-item-main,#projects-main .portfolio-group .project-series-feature .project-item-main,#projects-main #portfolio-art .project-item .project-item-main{padding-top:var(--cover-mobile)}
 html[lang=en] .is-filmstrip #series-heading{max-width:calc(100vw - 44px)}
 html[lang=en] .is-filmstrip #series-heading h1{margin-bottom:20px}
 html[lang=en] .is-filmstrip #series-heading .series-description{max-width:34ch}
 html[lang=en] .is-filmstrip #series-heading .series-gesture{margin-top:20px;max-width:34ch}
}

/* Shared site shell: the same control geometry in both runtime documents. */
:root{--page-gutter:clamp(20px,5vw,160px);--header-y:clamp(24px,3.5vw,64px);--base-padding-x:var(--page-gutter);--control-height:48px;--control-radius:999px;--control-bg:#f3f4f9;--control-ink:#191a20}
#header{padding:var(--header-y) var(--page-gutter);font-size:16px}
#header-center-project-back-btn{left:var(--page-gutter);top:var(--header-y)}
#header-right{gap:12px;align-items:center}
#header-right-talk-btn-placeholder{display:none}
#header-right-talk-btn{position:relative;left:auto;right:auto}
#header-right-talk-btn,#header-right-menu-btn{height:var(--control-height);padding:0 22px;width:auto}
#header-right-sound-btn{height:var(--control-height);width:var(--control-height);font-size:14px}
#header-center-project-back-btn,#series-back{height:var(--control-height);border:0;border-radius:var(--control-radius);background:var(--control-bg);color:var(--control-ink);padding:0 20px;gap:10px;align-items:center;font:500 14px/1.2 var(--font-body)!important;text-transform:uppercase;letter-spacing:0;box-sizing:border-box;text-decoration:none}
.is-filmstrip #series-back{top:var(--header-y);left:var(--page-gutter);color:var(--control-ink)}
#series-back:hover{background:#fff;text-decoration:none}
#series-back span{width:17px;font-size:18px}
#series-back svg{width:16px;height:16px;flex:none}
#header-menu{top:calc(var(--header-y) + var(--control-height) + 12px);right:var(--page-gutter)}
#project-details-launch-cta,#project-details-launch-cta-mobile{height:var(--control-height);padding:0 20px;gap:12px;font-size:14px;border-radius:var(--control-radius)}
#project-details-launch-cta-text,#project-details-launch-cta-mobile-text{font-size:14px!important;line-height:1.2}
.portfolio-dialog-close{width:var(--control-height);height:var(--control-height);font-size:20px}
html[lang=en] #header-menu .header-menu-link{font-size:24px;line-height:1.2}
html[lang=en] #header-menu .header-menu-link-inner{font-size:24px;line-height:1.2;height:1.2em}
html[lang=en] #header-menu :is(.header-menu-link-text,.header-menu-link-text-clone){font-size:inherit;line-height:inherit}
html[lang=en] #header-menu-labs-texts{font-size:24px;line-height:1.2}
body[data-journey-page=about] #header-logo{color:#f3f4f9}
#project-details .project-details-side-list-title,#project-details-header-info{color:#c2c3cc}
.is-filmstrip #series-heading{left:var(--page-gutter)}
.is-filmstrip #series-audio{right:var(--page-gutter);top:var(--header-y)!important;min-height:var(--control-height);padding:0 20px;border-radius:var(--control-radius);background:var(--control-bg);color:var(--control-ink)}
html[lang=en] .is-filmstrip #series-controls button{height:var(--control-height);padding:0 18px;border:0;border-radius:var(--control-radius);background:var(--control-bg);color:var(--control-ink);font-size:14px;line-height:1.2}
/* Every detail uses the same introduction / media composition. A one-item
   case only disables empty gallery travel; it does not get a different layout. */
@media(min-width:813px){
 #project-details #project-details-meta{width:38vw}
 #project-details #project-details-items-move-container{padding-left:49vw}
 .is-single-media .project-details-item:last-child{margin-right:5vw}
}
.is-single-media #project-details-header-info{display:none!important}
/* Only the combined art detail changes reading direction. Native media stay
   in the existing WebGL pool and retain their entry/exit and reveal effects. */
#project-details.is-art-vertical #project-details-meta,
#project-details.is-art-vertical #project-details-header-info{display:none!important}
#project-details.is-art-vertical #project-details-items-wrapper{top:0;height:100%;width:100%;overflow:visible}
#project-details.is-art-vertical #project-details-items-move-container{position:relative;display:block;box-sizing:border-box;padding:0;white-space:normal}
.is-art-vertical .project-details-item{position:absolute;margin:0!important}
.art-group{position:absolute;left:0;width:100%;pointer-events:none}
.art-group-copy{position:absolute;pointer-events:auto;will-change:opacity,transform}
.art-group-title{font:400 var(--type-section)/1.15 var(--font-body);letter-spacing:-.03em;margin:0;color:var(--project-details-color-text,#f3f4f9)}
.art-group-title-main{font-size:var(--type-title);line-height:1.1;letter-spacing:-.035em}
.art-group-subtitle{font:400 var(--type-body)/var(--leading-body) var(--font-body);margin:24px 0 -12px;color:inherit}
.art-group-desc{font:400 var(--type-body)/var(--leading-body) var(--font-body);margin-top:32px;max-width:40ch}
.art-group-desc p+p{margin-top:var(--space-copy)}
.art-group-desc .career-note{font-size:var(--type-meta);line-height:var(--leading-meta)}
.art-group-role{margin-top:24px;max-width:38ch;font:400 var(--type-meta)/var(--leading-meta) var(--font-body)}
.art-group-role .project-details-side-list-title{font-size:var(--type-caption);margin-bottom:8px}
.art-group-controls{position:absolute;display:flex;justify-content:center;align-items:center;gap:4px;pointer-events:auto}
.art-group-arrow{width:48px;height:48px;border:0;border-radius:var(--control-radius);background:var(--control-bg);color:var(--control-ink);display:grid;place-items:center;cursor:pointer}
.art-group-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.art-demo-cover{cursor:pointer}
.art-demo-cover:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:16px}
.art-group-dot{width:36px;height:48px;border:0;padding:0;background:none;color:inherit;display:grid;place-items:center;cursor:pointer}
.art-group-dot::after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .2s,transform .2s}
.art-group-dot.is-selected::after{opacity:1;transform:scale(1.15)}
.art-group-dot.is-labelled{width:auto;padding:0 10px;font:400 var(--type-caption)/1.4 var(--font-body);opacity:.5;white-space:nowrap}
.art-group-dot.is-labelled::after{display:none}
.art-group-dot.is-labelled.is-selected{opacity:1;text-decoration:underline;text-underline-offset:5px}
.art-group-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:812px){.art-group[data-art-group="island"] .art-group-controls{gap:2px}.art-group[data-art-group="island"] .art-group-dot{width:24px;flex:0 0 24px}}
.art-group-controls button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.art-reel-sound{margin-left:16px}
.art-reel-sound.is-muted svg{opacity:.4}
.art-reel-expand{margin-left:4px}
#portfolio-dialog.is-art-reel{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:56px 4vw;background:rgba(10,12,16,.98)}
#portfolio-dialog.is-art-reel .portfolio-dialog-content{display:grid;place-items:center;width:100%;max-width:none;height:100%;margin:0;padding:0;overflow:hidden}
.art-expanded-video{display:block;width:100%;max-height:calc(100dvh - 112px);object-fit:contain;border-radius:16px}
@media(max-width:812px){.art-group-desc{margin-top:24px}.art-group-title{font-size:var(--type-section)}.art-group-title-main{font-size:var(--type-title)}}
@media(max-width:812px){
 #header-right-menu-btn{width:48px;padding:0}
 #header-right-talk-btn{display:none}
 #project-details #project-details-items-wrapper{top:24px;height:calc(100% - 24px)}
 #project-details #project-details-meta{padding-bottom:0}
 #project-details .project-details-item:first-child{margin-top:0}
 #project-details #project-details-launch-cta-mobile{margin-top:24px}
 .is-filmstrip #series-heading{left:var(--page-gutter);max-width:calc(100vw - var(--page-gutter)*2)}
}

/* Detail pills mirror Contact: label travels, dot contracts, arrow enters. */
#header-center-project-back-btn,#project-details-launch-cta,#project-details-launch-cta-mobile{
 --control-motion:0;box-sizing:border-box;height:var(--control-height);min-height:48px;padding:0 22px;
 gap:7px;border:0;border-radius:var(--control-radius);overflow:hidden;isolation:isolate;
 background:var(--control-bg);color:var(--control-ink);font:500 14px/1.4 var(--font-body)!important;
 align-items:center;justify-content:center;text-decoration:none;transition:background-color .4s,color .4s;
}
#header-center-project-back-btn{width:fit-content;right:auto}
#project-details-launch-cta,#project-details-launch-cta-mobile{position:relative}
#header-center-project-back-btn-svg2,#project-details-header-back-background{display:none!important}
#header-center-project-back-btn #header-center-project-back-btn-text,
#project-details-launch-cta #project-details-launch-cta-text,
#project-details-launch-cta-mobile #project-details-launch-cta-mobile-text{
 display:block;margin:0;font:inherit!important;white-space:nowrap;transition:transform .3s cubic-bezier(.4,0,.1,1);
}
#header-center-project-back-btn #header-center-project-back-btn-text{order:2;transform:translate3d(calc(var(--control-motion) * -1.5em),0,0)!important}
#project-details-launch-cta #project-details-launch-cta-text,
#project-details-launch-cta-mobile #project-details-launch-cta-mobile-text{order:1;transform:translate3d(calc(var(--control-motion) * 1.5em),0,0)!important}
#header-center-project-back-btn #header-center-project-back-btn-dot,
#project-details-launch-cta #project-details-launch-cta-dot,
#project-details-launch-cta-mobile #project-details-launch-cta-mobile-dot{
 display:block!important;position:relative;flex:0 0 1em;width:1em;height:1em;background:transparent!important;
 transform:scale(calc(1 - var(--control-motion)))!important;transition:transform .1s cubic-bezier(.4,0,.1,1);
}
#header-center-project-back-btn-dot{order:1}
#project-details-launch-cta-dot,#project-details-launch-cta-mobile-dot{order:2}
#header-center-project-back-btn-dot::after,#project-details-launch-cta-dot::after,#project-details-launch-cta-mobile-dot::after{
 content:'';position:absolute;left:50%;top:50%;width:.3125em;height:.3125em;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);
}
#header-center-project-back-btn #header-center-project-back-btn-svg,
#project-details-launch-cta #project-details-launch-cta-arrow,
#project-details-launch-cta-mobile #project-details-launch-cta-mobile-arrow{
 position:absolute;top:calc(50% - .5em);width:1em;height:1em;background:transparent;color:inherit;
 opacity:var(--control-motion);transition:transform .3s cubic-bezier(.4,0,.1,1),opacity .15s;
}
#header-center-project-back-btn #header-center-project-back-btn-svg{left:auto;right:22px;transform:translate3d(calc((1 - var(--control-motion)) * 2.5em),0,0)!important}
#project-details-launch-cta #project-details-launch-cta-arrow,
#project-details-launch-cta-mobile #project-details-launch-cta-mobile-arrow{left:22px;right:auto;transform:translate3d(calc((1 - var(--control-motion)) * -2.5em),0,0)!important}
#project-details-launch-cta #project-details-launch-cta-arrow svg,
#project-details-launch-cta-mobile #project-details-launch-cta-mobile-arrow svg{width:100%;height:100%;color:inherit!important}
@media(hover:hover){
 #header-center-project-back-btn:hover,#project-details-launch-cta:hover,#project-details-launch-cta-mobile:hover{--control-motion:1}
}
#header-center-project-back-btn:focus-visible,#project-details-launch-cta:focus-visible,#project-details-launch-cta-mobile:focus-visible{
 --control-motion:1;background:var(--color-blue);color:#fff;outline:2px solid var(--color-off-white);outline-offset:4px;
}
/* Catalogue only: match About's dark reading sections; keep home untouched. */
#projects #projects-main{color:var(--color-off-white)}
#projects .portfolio-group-heading{border-top-color:rgba(240,241,250,.2)}
#projects .portfolio-group-heading p{color:#e1e1e9;opacity:1}
#projects .project-status{color:#b6b7c0;opacity:1}
#projects .project-item-line-2-icon,#projects-main-title-project-arrow{filter:invert(1)}

/* Shared shell: language-specific type remains separate from control geometry. */
html[lang=en] #about-who-title-main-logo{width:100%;height:auto;aspect-ratio:1000 / 200.957;max-height:none;max-width:none}
html[lang=en] #end-section-title{--font-size:var(--type-title);font-size:var(--font-size);line-height:1.3;letter-spacing:-.035em}
html[lang=en] #end-section-title-link{line-height:1.3}
html[lang=en] .end-section-title-link-line{height:auto;min-height:1.3em;line-height:1.3;bottom:0}
html[lang=en] .end-section-title-link-word{height:1.3em;line-height:1.3;overflow:hidden}
html[lang=en] .end-section-title-link-word .char-wrapper{top:0;line-height:1.3}
html[lang=en] :is(#end-section-title-top-decoration,#end-section-title-bottom-left-decoration,#end-section-title-bottom-right-decoration){display:none}
#header-right-talk-btn{background:#2a2c37;color:#fff}
#header-right-talk-btn:hover,#header-right-talk-btn:not(.--is-contact-active):hover,#header-right-talk-btn.--is-contact-active:hover,
#header-right-talk-btn:focus-visible,#header-right-menu-btn:hover,#header-right-menu-btn:focus-visible{background:#1a2ffb;color:#fff}
#header-right-menu-btn,#header-right-menu-btn.--opened{background:var(--control-bg);color:var(--control-ink)}
#header-right-talk-btn:focus-visible,#header-right-menu-btn:focus-visible,#header-right-sound-btn:focus-visible{outline:2px solid #aab2ff;outline-offset:4px}
#header-right-sound-btn{border-radius:50%}
.is-filmstrip #series-back{--control-motion:0;position:fixed;display:flex;isolation:isolate;overflow:hidden;gap:7px;padding:0 22px;height:48px;background:var(--control-bg);color:var(--control-ink);transition:background-color .4s,color .4s}
.is-filmstrip #series-back .series-back-label{display:block;width:auto;font:inherit;white-space:nowrap;transform:translate3d(calc(var(--control-motion) * -1.5em),0,0);transition:transform .3s cubic-bezier(.4,0,.1,1)}
.is-filmstrip #series-back .series-back-dot{position:relative;display:block;width:1em;height:1em;flex:0 0 1em;font:inherit;transform:scale(calc(1 - var(--control-motion)));transition:transform .1s cubic-bezier(.4,0,.1,1)}
.series-back-dot::after{content:'';position:absolute;width:.3125em;height:.3125em;top:50%;left:50%;background:currentColor;border-radius:50%;transform:translate(-50%,-50%)}
.is-filmstrip #series-back .series-back-arrow{position:absolute;top:calc(50% - .5em);right:22px;width:1em;height:1em;opacity:var(--control-motion);transform:translate3d(calc((1 - var(--control-motion)) * 2.5em),0,0);transition:transform .3s cubic-bezier(.4,0,.1,1),opacity .15s}
@media(hover:hover){.is-filmstrip #series-back:hover{--control-motion:1;background:#1a2ffb;color:#fff;text-decoration:none}}
.is-filmstrip #series-back:focus-visible{--control-motion:1;background:#1a2ffb;color:#fff;outline:2px solid #aab2ff;outline-offset:4px}
#catalogue-contours{position:absolute;top:320px;left:0;width:100%;height:auto;visibility:hidden;pointer-events:none}
#about-award-title{height:auto;aspect-ratio:1438 / 1252}
@media(max-width:812px){#about-award-title{width:900px;left:calc((100vw - 900px) / 2)}}
@media(max-width:812px){#catalogue-contours{top:180px;left:-50%;width:200%}}
.is-filmstrip #series-audio{top:var(--header-y)!important;right:var(--page-gutter);width:48px;height:48px;padding:12px;border-radius:50%;box-sizing:border-box;background:var(--control-bg);color:var(--control-ink);transition:background-color .4s,color .4s,opacity .4s;overflow:hidden}
.is-filmstrip #series-audio svg{display:block;width:100%;height:100%;transition:transform .3s;transform:scaleY(.06)}
.is-filmstrip #series-audio[aria-pressed=true] svg{transform:scaleY(1)}
.is-filmstrip #series-audio:hover,.is-filmstrip #series-audio:focus-visible{background:#1a2ffb;color:#fff;text-decoration:none}
@media(prefers-reduced-motion:reduce){.is-filmstrip #series-back *{transition:none!important}}

/* The name box belongs to its vector artwork, independently of root language. */
#about-who-title-main #about-who-title-main-logo[data-name-locale=zh]{width:50vw;height:auto;aspect-ratio:2;max-width:820px;max-height:none}
#about-who-title-main #about-who-title-main-logo[data-name-locale=en]{width:100%;height:auto;aspect-ratio:1000 / 200.957;max-width:none;max-height:none}
@media(max-width:812px){#about-who-title-main #about-who-title-main-logo[data-name-locale=zh]{width:76vw}}

/* Decorative English outlines: a native shader layer behind the catalogue header. */
#catalogue-title-art{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:1440 / 400;visibility:hidden;pointer-events:none}
@media(max-width:812px){#catalogue-title-art{top:40px;left:-30%;width:160%}}

/* Intrinsic card faces keep all copy and the inverted playing-card caption inside. */
@media(max-width:1024px){
 #about-capability-cards-wrapper{grid-column:1 / -1;width:100%;margin:3em 0 0}
 #about-capability-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;perspective:240vw}
 #about-capability-cards .about-capability-card{position:relative;top:auto;left:auto;float:none;width:100%;height:auto;aspect-ratio:auto;margin:0!important;font-size:16px}
 #about-capability-cards .about-capability-card-front{position:relative;box-sizing:border-box;min-height:440px;height:100%;padding:24px;gap:24px;overflow:hidden}
 #about-capability-cards .about-capability-card-header{gap:12px;flex:0 0 auto}
 #about-capability-cards .about-capability-card-header-text{font-size:clamp(18px,2.8vw,24px);line-height:1.45;letter-spacing:0;min-width:0}
 #about-capability-cards .about-capability-card-header-letter{font-size:40px;line-height:1.2;flex:0 0 auto;left:0}
 #about-capability-cards .about-capability-list{display:grid;gap:20px;flex:1;align-content:center}
 #about-capability-cards .about-capability-list-item{font-size:16px;line-height:1.6;margin:0}
 #about-capability-cards .about-capability-list-item:not(:last-child)::before{content:'';top:auto;bottom:-11px;left:0;width:100%;height:0;border-bottom:3px dotted rgba(26,47,251,.2);opacity:1}
}
@media(max-width:480px){
 #about-capability-cards{grid-template-columns:minmax(0,1fr);gap:24px}
 #about-capability-cards .about-capability-card-header-text{font-size:24px}
}



/* Release: homepage reel paused and registered-site footer. */
#home-reel-thumb-wrapper,#home-reel-container{display:none!important}
#home-reel{padding-bottom:clamp(48px,8vh,120px)}
#portfolio-icp{position:absolute;z-index:5;bottom:24px;left:var(--base-padding-x,5vw);display:inline-flex;align-items:center;min-height:28px;padding:2px 10px;border-radius:8px;background:rgba(16,18,27,.8);color:#fff;font:400 12px/1.5 var(--font-body);letter-spacing:0;text-decoration:none;white-space:nowrap;pointer-events:auto}
#portfolio-icp:hover{text-decoration:underline;text-underline-offset:3px}
#portfolio-icp:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:812px){#portfolio-icp{left:50%;bottom:150px;transform:translateX(-50%);font-size:11px}}