html{scroll-padding-top:110px}
img{color:var(--muted)}
.hero-status{position:absolute;right:56px;bottom:80px;font-size:12px;color:#f3f1eb;z-index:1;max-width:250px}
.hero-images picture{display:contents}
.ai-art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 28px;align-items:start}
.ai-art-grid .photo-figure{max-width:none}
.ai-art-grid .photo-open img{width:100%;height:auto;object-fit:contain}
.ai-art-grid .photo-figure.wide{grid-column:1/-1;max-width:1200px}
.brand-ai-section{padding-bottom:90px}
.brand-ai-section+.brand-ai-section{padding-top:60px;border-top:1px solid var(--line)}
.ai-collection-media{aspect-ratio:4/5}
.ai-collection-media img{object-position:50% 30%}
.ai-collection-media.landscape{aspect-ratio:3/2}
.collection-lead{max-width:36em}
.retry-image{display:block;margin:12px auto;min-height:44px;padding:8px 18px;background:#f3f1eb;color:#151610;border-radius:24px}
.media-failed{opacity:.25}
.gallery-retry{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);min-height:44px;padding:8px 20px;border-radius:24px;background:var(--ink);color:var(--bg)}
.gallery-loading{bottom:12px}
.gallery-stage figcaption{text-align:center;max-width:100%;overflow-wrap:anywhere}
.gallery-open .experience-tools{display:none}
.experience-tools{position:static;width:max-content;margin:0 0 28px 24px;box-shadow:none}
.hero-scenes .scene{width:56px}
.hero-scenes .scene i{max-width:42px}
@media(hover:none){.work-item>a:hover .work-media img,.project:hover img{transform:none}.focus-pulse{display:none}}
@media(max-width:800px){
 html{scroll-padding-top:86px}
 .site-header{padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left))}
 .site-header nav{max-height:calc(100svh - 70px);overflow-y:auto;padding:12px 24px 24px}
 .site-header nav a{min-height:48px}
 .section-width{width:calc(100% - 40px)}
 .home-page .hero{height:100svh;min-height:580px;max-height:none}
 .home-page .hero-content{left:max(22px,env(safe-area-inset-left));right:22px;bottom:155px}
 .home-page .hero h1{font-size:clamp(52px,16vw,78px)}
 .home-page .hero-line{font-size:12px;letter-spacing:.03em;gap:10px;margin-bottom:18px}
 .home-page .hero-line:before{flex-basis:22px}
 .home-page .hero-motto{font-size:18px;max-width:100%;line-height:1.65}
 .home-page .hero-role{font-size:12px;gap:12px}
 .home-page .hero-actions{gap:12px;margin-top:24px}
 .home-page .hero-selector{left:20px;right:20px;bottom:72px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}
 .hero-scenes{flex-direction:row;gap:8px}
 .hero-scenes .scene{justify-content:center;min-height:48px}
 .hero-playback{margin:0;width:46px;height:46px}
 .home-page .scroll-cue{left:calc(50% - 22px);right:auto;bottom:max(14px,env(safe-area-inset-bottom))}
 .hero-status{left:24px;right:76px;bottom:120px;max-width:none;font-size:11px}
 .home-page .hero-image{animation-duration:24s}
 .home-page .hero-shade{background:linear-gradient(180deg,#07121b38,transparent 27%,#07121b18 43%,#07121bc9 83%,#07121bcc)}
 .page-intro{padding-top:115px;padding-bottom:36px}
 .project-intro{padding-top:110px;padding-bottom:30px}
 .page-intro h1{font-size:clamp(32px,8.6vw,46px)}
 .page-intro>p,.project-description{font-size:16px;line-height:1.9}
 .project-title-row h1{font-size:clamp(30px,8.2vw,44px);line-height:1.55}
 .project-title-row>p{font-size:14px}
 .work-meta h3{font-size:25px}.work-meta p{font-size:14px}
 .filters{gap:5px 2px}.filters button{font-size:14px;padding:10px 14px;min-height:46px}
 .filter-bar{margin-bottom:28px}.filter-count{font-size:13px}
 .brand-ai-section{padding-bottom:60px}
 .brand-ai-section+.brand-ai-section{padding-top:45px}
 .about-copy>p,.practice-copy>p,.capability p{font-size:16px;line-height:1.95}
 .about-heading h2,.bio-intro h2{font-size:29px}
 .contact>div>p{font-size:15px}
 .experience-tools{margin:0 0 max(24px,env(safe-area-inset-bottom)) 20px}
 .experience-tools button{min-height:44px;font-size:12px}
 .site-footer{gap:16px}
 .gallery-header{height:72px;padding:8px 16px 0}
 .gallery-header h2{font-size:18px;line-height:1.5;max-width:calc(100% - 60px)}
 .gallery-stage{display:block;height:calc(100% - 72px);padding:0 12px calc(72px + env(safe-area-inset-bottom));position:relative}
 .gallery-stage figure{height:100%;gap:12px}
 .gallery-image{height:calc(100% - 54px)}
 .gallery-stage figcaption{font-size:13px}
 .gallery-prev,.gallery-next{position:absolute;bottom:max(15px,env(safe-area-inset-bottom));width:48px;min-width:48px;height:48px;border:1px solid var(--line);border-radius:50%}
 .gallery-prev{left:calc(50% - 66px)}.gallery-next{right:calc(50% - 66px)}
 .gallery-close{min-width:48px}
 .gallery-loading{bottom:72px;font-size:12px}
 .gallery-retry{bottom:95px}
 .ai-art-grid{gap:30px 16px}
 .photo-figure figcaption{font-size:13px;gap:12px}
}
@media(max-width:520px){
 .ai-art-grid{grid-template-columns:1fr;gap:30px}
 .ai-art-grid .photo-figure.wide{grid-column:auto}
 .section-heading{gap:15px;flex-wrap:wrap}
 .section-heading h2{font-size:29px}
 .section-heading>div>p{font-size:14px}
 .section-heading>.text-link{font-size:13px;min-height:44px;margin-top:0}
 .button{font-size:14px;min-height:48px;padding:0 22px;gap:15px}
 .ai-collection-media{aspect-ratio:4/5}
}
@media(max-width:360px){.home-page .hero h1{font-size:52px}.home-page .hero-line{font-size:11px}.hero-role{letter-spacing:0}.section-width{width:calc(100% - 32px)}.home-page .hero-actions .button{padding:0 18px}.wechat-id{font-size:21px}}
@media(max-height:520px) and (orientation:landscape){.home-page .hero{min-height:520px}.home-page .hero-content{bottom:125px}.home-page .hero h1{font-size:52px}.home-page .hero-selector{left:auto;right:24px;bottom:30px}.home-page .scroll-cue{display:none}}

/* Show only the untouched QR area, with its white scanning margin. */
.contact-qr{position:relative;width:244px;max-width:100%;aspect-ratio:1;overflow:hidden;background:#fff}
.contact-qr img{position:absolute;width:133.73494%;max-width:none;height:auto;aspect-ratio:888/1131;left:-16.86747%;top:-42.16867%}
@media(max-width:800px){.contact-qr{width:240px;max-width:100%}}