/* Pearl sphere study: one continuous surface, advanced only by page scroll. */
:root{--aqua:#d2c6ea;--teal:#6b607f;--ink:#28272e;--night:#24232c;--paper:#f5f4f6;--muted:#716d79}
html{scroll-behavior:auto}::selection{background:#ded4ed;color:#2a2632}.reading-progress{background:#a496b9}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:#8d7aae}
.scroll-experience.experience{height:auto;min-height:760px;overflow:visible;isolation:isolate;background:#f6f5f8;color:#292732}
.js .scroll-experience.experience{height:290svh;min-height:0}
.experience-frame{position:relative;height:100svh;min-height:760px;overflow:hidden;background:#f6f5f8}
.js .experience-frame{position:sticky;top:0;min-height:640px}
.worlds-stop{position:absolute;top:calc(100% - 100svh);left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:0}
.scroll-experience .experience-grain{background:radial-gradient(ellipse at 72% 43%,#eeeaf366,transparent 48%),linear-gradient(125deg,#fafafa,#f4f3f6 70%,#f8f7f9);opacity:1}
.scroll-experience .site-header{color:#34313b;padding-top:29px}
.scroll-experience .wordmark{font-weight:500}.scroll-experience .wordmark small{color:#79727f}.scroll-experience .brand-star{color:#8c7ba4}
.scroll-experience .desktop-nav{background:#fff7;border-color:#534c6a18;backdrop-filter:blur(24px);box-shadow:0 3px 25px #302b3903}
.scroll-experience .desktop-nav a:hover{background:#aaa0bc19}.scroll-experience .language{border-color:#6d647c35;background:#fff6}.scroll-experience .language:hover{background:#e9e3f0}
.scroll-experience .contact-link{background:#37323f;color:#fcfaff}.scroll-experience .contact-link:hover{background:#60546e}
.scroll-experience .sphere-intro,.scroll-experience.is-revealed .sphere-intro{position:absolute;inset:0;z-index:5;display:none;visibility:visible;opacity:1;transition:none;pointer-events:none}
.js .scroll-experience .sphere-intro{display:block}
.scroll-experience .sphere-stage{inset:0;left:0;top:0;width:100%;height:100%;transform:none;transition:none;z-index:0;pointer-events:none}
.scroll-experience .sphere-stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.scroll-experience .sphere-halo{inset:auto;left:var(--orb-x,70%);top:var(--orb-y,48%);width:calc(var(--orb-base-diameter,460px)*1.25);height:calc(var(--orb-base-diameter,460px)*1.25);border-radius:50%;background:radial-gradient(ellipse,#e5d9ee38,#ebe6f224 48%,transparent 70%);filter:blur(22px);transform:translate(-50%,-50%);opacity:var(--shadow-opacity,1);transition:none}
.sphere-shadow{position:absolute;left:var(--orb-x,70%);top:var(--orb-shadow-y,75%);width:calc(var(--orb-base-diameter,460px)*.75);height:calc(var(--orb-base-diameter,460px)*.085);border-radius:50%;background:radial-gradient(ellipse,#7165792b,#a89ab313 47%,transparent 72%);filter:blur(12px);transform:translate(-50%,-50%) scaleX(var(--shadow-scale,1));opacity:var(--shadow-opacity,1)}
.scroll-experience .sphere-fallback{inset:auto;left:var(--orb-x,70%);top:var(--orb-y,48%);width:var(--orb-diameter,460px);height:var(--orb-diameter,460px);aspect-ratio:1;background:radial-gradient(ellipse at 30% 21%,#fff 0,#fdfaff 3%,#fff0 19%),radial-gradient(ellipse at 77% 35%,#fff9 0,#fff0 26%),radial-gradient(ellipse at 35% 74%,#cbe8fa99,#fff0 40%),conic-gradient(from 45deg,#f5e1eb,#d5e7f5,#e1d8f0,#d4cae8,#f3dce8,#f5e1eb);border:2px solid #eee1ef;border-radius:50%;box-shadow:inset 10px 3px 12px #fff9,inset -8px -7px 9px #fff9,0 0 18px #e9d4e980;transition:none;transform:translate(-50%,-50%);-webkit-mask-image:radial-gradient(circle,transparent var(--hole,0%),black calc(var(--hole,0%) + 1%));mask-image:radial-gradient(circle,transparent var(--hole,0%),black calc(var(--hole,0%) + 1%))}
.scroll-experience .webgl-ready .sphere-fallback{display:none}
.scroll-experience .intro-copy{z-index:3;left:var(--gutter);top:50%;bottom:auto;max-width:53%;transform:translateY(-44%);transition:none;pointer-events:auto;will-change:opacity,transform}
.scroll-experience .intro-copy>.eyebrow{color:#716979;letter-spacing:.13em;font-size:11px;margin-bottom:28px}
.scroll-experience .status-dot{background:#ae93c0;box-shadow:none}
.scroll-experience h1{font-weight:430;letter-spacing:-.064em;font-size:clamp(63px,6.7vw,108px);line-height:1.04}
.scroll-experience .title-light{color:#898093;font-weight:350}
.scroll-experience .intro-description{color:#79717f;font-size:16px;line-height:1.75;margin-top:27px}
.scroll-experience .enter-world{display:inline-flex;width:auto;gap:29px;margin-top:32px;min-height:54px;border:1px solid #80728e3d;padding:0 13px 0 23px;background:#fff8;color:#484051;font-size:14px;backdrop-filter:blur(12px)}
.scroll-experience .enter-world:hover{background:#fff;border-color:#9384a7;transform:translateY(-2px)}
.scroll-experience .button-orb{width:29px;height:29px;background:radial-gradient(circle at 30% 22%,#fff,#d9d5f3 35%,#d3e7f5 58%,#efdaeb 88%);box-shadow:inset 0 0 4px #fff,0 1px 6px #cfc5d766}
.scroll-experience .intro-bottom{color:#837889;left:var(--gutter);right:var(--gutter);bottom:32px;align-items:center;letter-spacing:.11em;z-index:4;transition:none;pointer-events:auto}
.scroll-invitation{display:flex;align-items:center;gap:14px;font-size:10px;color:#685d74;letter-spacing:.14em}
.scroll-track{width:19px;height:29px;border:1px solid #a89cb755;border-radius:15px;position:relative;background:#fff4}
.scroll-track i{position:absolute;left:8px;top:7px;width:1px;height:7px;background:#877596;transform:translateY(var(--scroll-cue-y,0px))}
.scroll-experience .skip-intro{color:#7e718a;border-color:#a799b246;font-size:12px;min-height:44px;display:flex;align-items:center;padding:8px 0}
.scroll-experience .skip-intro:hover{color:#3f334e}
.js .scroll-experience.experience .worlds,.scroll-experience.experience .worlds{visibility:visible;opacity:1;transform:none;transition:none;pointer-events:none;inset:138px var(--gutter) 33px;will-change:clip-path,opacity;z-index:3}
.scroll-experience.experience.is-revealed .worlds{pointer-events:auto}
.scroll-experience .worlds-heading{color:#33303a;margin-bottom:27px}
.scroll-experience .worlds-heading>.eyebrow{color:#8a7a9d;font-size:10px}
.scroll-experience .worlds-heading h2{font-weight:420}
.scroll-experience .replay{color:#7a6d88;border-color:#9f90b84d;display:none;align-items:center;font-size:12px;transition:color .2s}
.js .scroll-experience .replay{display:inline-flex}
.scroll-experience .replay:hover{color:#362840}
.scroll-experience.experience .world-card{transition:none!important;transition-delay:0s!important;color:#f5f4f6;border-radius:8px;box-shadow:0 0 0 1px #56445d0b,0 16px 30px #382e400b;will-change:transform,opacity}
.scroll-experience .world-copy>.eyebrow{color:#e1d9e9}
.scroll-experience .worlds-bottom{color:#87798e}
.scroll-experience .worlds-bottom>a{color:#6b5b7c}
/* Subtle palette alignment; project photography retains its own colours. */
.company-link:hover{color:#77618f;border-color:#77618f}.dialog-close:hover{background:#ece4f3}.connect{background:#e8e3ed}.connect .eyebrow{color:#766285}.connect-heading>p,.connect-links small{color:#73677c}.connect-links a{border-color:#b4a9c0}.connect-links span{color:#82718d}.pi-values>span{color:#736380;border-color:#c9bdd1}.network,footer{background:#2b2830}.network .eyebrow{color:#b8a7c9}.network-grid p{color:#c1b5cc}.network-grid>div{border-color:#9e8ca842}
@media(min-width:1700px){.scroll-experience .sphere-stage{inset:0;width:100%;height:100%}}
@media(max-width:1150px) and (min-width:901px){.scroll-experience h1{font-size:6.6vw}.scroll-experience .intro-copy{max-width:55%}.scroll-experience .intro-description{font-size:14px;max-width:340px}}
@media(max-width:900px){
 .js .experience-frame{min-height:min(690px,100svh)}
 .scroll-experience .site-header{padding-top:24px}
 .scroll-experience .sphere-stage{inset:0;width:100%;height:100%;transform:none}
 .scroll-experience .intro-copy{top:auto;bottom:105px;left:24px;right:24px;max-width:none;transform:none}
 .scroll-experience .intro-copy>.eyebrow{font-size:8px;letter-spacing:.12em;margin-bottom:18px}
 .scroll-experience h1{font-size:clamp(42px,11.7vw,66px);line-height:1.02;letter-spacing:-.058em}
 .scroll-experience .intro-description{font-size:13px;line-height:1.65;margin-top:18px}
 .scroll-experience .enter-world{margin-top:22px;min-height:49px;font-size:12px;gap:25px;padding-left:20px}
 .scroll-experience .button-orb{width:26px;height:26px}
 .scroll-experience .intro-bottom{bottom:23px;align-items:center;gap:10px;font-size:8px;letter-spacing:.045em}
 .scroll-experience .intro-bottom>span:first-child{display:none}
 .scroll-invitation{font-size:9px;gap:10px;letter-spacing:.08em}
 .scroll-experience .skip-intro{font-size:11px}
 .js .scroll-experience.experience .worlds,.scroll-experience.experience .worlds{inset:108px 20px 24px}
 .scroll-experience .worlds-heading{margin-bottom:22px}
 .scroll-experience .worlds-heading h2{font-size:26px;line-height:1.22}
 .scroll-experience .worlds-heading>.eyebrow{font-size:9px}
 .scroll-experience .worlds-heading .replay{font-size:10px;min-height:36px;top:-8px}
 .scroll-experience .world-card{min-height:145px}
 .scroll-experience .world-copy>p:not(.eyebrow){display:none}
 .scroll-experience .world-copy>a{min-height:44px}
 .scroll-experience .worlds-bottom{font-size:8px}
 html[lang="zh-HK"] .scroll-experience h1{font-size:clamp(43px,11.8vw,66px);line-height:1.18}
 html[lang="zh-HK"] .scroll-experience .worlds-heading h2{font-size:24px}
}
@media(max-width:380px){.scroll-experience .intro-copy{bottom:98px}.scroll-experience .intro-description{font-size:12px}.scroll-experience .worlds-heading h2{font-size:24px}html[lang="zh-HK"] .scroll-experience .worlds-heading h2{font-size:21px}.scroll-experience .world-copy h3{font-size:26px}}
@media(max-width:900px) and (max-height:740px) and (orientation:portrait){
 .scroll-experience .world-card{min-height:0}
 .scroll-experience .worlds-heading{margin-bottom:15px}
 .scroll-experience .worlds-bottom{margin-top:12px}
}
@media(max-width:900px) and (max-height:620px) and (orientation:portrait){
 .scroll-experience .site-header{padding-top:16px;padding-bottom:16px}
 .scroll-experience .intro-copy{bottom:85px}
 .scroll-experience .intro-copy>.eyebrow{margin-bottom:12px}
 .scroll-experience h1,html[lang="zh-HK"] .scroll-experience h1{font-size:36px;line-height:1.1}
 .scroll-experience .intro-description{margin-top:12px}
 .scroll-experience .enter-world{margin-top:16px;min-height:44px}
 .scroll-experience .world-copy>.eyebrow{display:none}
 .scroll-experience .world-copy h3{font-size:23px}
 .scroll-experience .world-copy>a{margin-top:3px}
}
@media(max-height:730px) and (min-width:901px){.scroll-experience .intro-copy{top:49%}.scroll-experience h1{font-size:clamp(60px,6vw,88px)}.scroll-experience .intro-copy>.eyebrow{margin-bottom:22px}.scroll-experience .intro-description{margin-top:22px}.scroll-experience .enter-world{margin-top:24px}.scroll-experience .worlds-heading h2{font-size:34px}.scroll-experience .worlds-heading{margin-bottom:22px}.scroll-experience .world-card{min-height:385px}}
/* The same composition reflows into two columns on a horizontal phone. */
.scroll-experience.sphere-horizontal .intro-copy{top:50%;bottom:auto;left:var(--gutter);right:auto;max-width:53%;transform:translateY(-44%)}
@media(max-width:900px) and (orientation:landscape){
 .scroll-experience.sphere-horizontal h1{font-size:clamp(36px,6.7vw,66px)}
 .scroll-experience.sphere-horizontal .intro-copy>.eyebrow{font-size:8px}
}
@media(max-height:600px) and (orientation:landscape){
 .js .experience-frame{height:100svh;min-height:100svh}
 .scroll-experience .site-header{padding:14px var(--gutter)}
 .scroll-experience .wordmark{font-size:15px}.scroll-experience .brand-star{font-size:27px}.scroll-experience .wordmark small{font-size:8px;margin-top:4px}
 .scroll-experience .desktop-nav{display:none}
 .scroll-experience.sphere-horizontal .intro-copy{top:51%;max-width:47%}
 .scroll-experience.sphere-horizontal h1,html[lang="zh-HK"] .scroll-experience.sphere-horizontal h1{font-size:clamp(30px,4.7vw,46px);line-height:1.05}
 .scroll-experience .intro-copy>.eyebrow{font-size:7px;margin-bottom:14px}
 .scroll-experience .intro-description{font-size:11px;line-height:1.5;margin-top:14px}
 .scroll-experience .enter-world{min-height:40px;font-size:11px;margin-top:17px;padding-left:17px;gap:22px}
 .scroll-experience .button-orb{width:24px;height:24px}
 .scroll-experience .intro-bottom{bottom:12px;font-size:8px}
 .scroll-experience .scroll-invitation{font-size:8px}.scroll-experience .skip-intro{font-size:10px}
 .js .scroll-experience.experience .worlds,.scroll-experience.experience .worlds{inset:80px var(--gutter) 15px}
 .scroll-experience .worlds-heading{margin-bottom:13px;gap:3px}
 .scroll-experience .worlds-heading h2,html[lang="zh-HK"] .scroll-experience .worlds-heading h2{font-size:23px;line-height:1.1}
 .scroll-experience .worlds-heading>.eyebrow{font-size:8px}
 .scroll-experience .world-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;gap:12px}
 .scroll-experience .world-card{min-height:0}
 .scroll-experience .world-copy{top:auto;bottom:11px;left:15px;right:15px;transform:none}
 .scroll-experience .world-copy>.eyebrow,.scroll-experience .world-copy>p:not(.eyebrow){display:none}
 .scroll-experience .world-copy h3{font-size:clamp(18px,2.5vw,23px)}
 .scroll-experience .world-copy>a{min-height:44px;font-size:10px;margin-top:4px;padding:9px 0 6px}
 .scroll-experience .world-top{top:8px;right:8px}.scroll-experience .world-top>span{display:none}
 .scroll-experience .world-project{width:44px;height:44px}
 .scroll-experience .worlds-bottom{font-size:8px;margin-top:11px}.scroll-experience .worlds-bottom>a{font-size:10px;max-width:none}
}
@media(prefers-reduced-motion:reduce){.js .scroll-experience.experience{height:auto;min-height:100svh}.js .experience-frame{position:relative;height:100svh;min-height:760px}.scroll-experience .sphere-intro{display:none!important}.scroll-experience .worlds{opacity:1!important;clip-path:none!important;pointer-events:auto!important}.scroll-experience .world-card{opacity:1!important;transform:none!important}.scroll-experience .replay{display:none!important}.worlds-stop{top:0}}