:root{--paper:#f5f7fc;--blue:#0754dc;--lime:#6eabff;--ink:#121d34;--line:#dce3ee;--pad:clamp(24px,6vw,110px)}
body{background:#fff;color:var(--ink)}
.header{background:#080909f5;height:82px;border-bottom:1px solid #ffffff20}
.header .company-logo{width:140px}.header nav{gap:28px}.header nav a{font-size:12px}.header nav a:hover,.header nav a.active{color:#85b4ff}.header-cta{border:1px solid #3c4860;border-radius:30px;padding:11px 19px}
.hero{background:#080909;padding-top:28px;position:relative}.hero-top{color:#8390a3;font-size:9px}.hero-top .eyebrow{letter-spacing:2px}.hero-body{display:flex;flex-direction:column;min-height:0}.hero-copy{text-align:center;padding:50px 0 0;width:100%}.overline{font-size:12px;color:#aeb9cb;letter-spacing:4px;margin:0 0 26px}h1{font-size:clamp(54px,7.8vw,120px);letter-spacing:-5px;width:fit-content;margin:0 auto;line-height:1.3;white-space:nowrap}.title-star{font-size:28px;right:-40px;top:0}.hero-en{font-size:10px;letter-spacing:10px;color:#73819a;margin:17px 0 26px}.hero-description{font-size:14px;line-height:1.9;color:#b6bdca;margin:0 0 25px}.hero-actions{display:flex;justify-content:center;align-items:center;gap:28px}.hero .button{padding:14px 22px;border-radius:30px;font-size:12px;gap:35px}.secondary-action{font-size:12px;color:#c5d0df;padding:14px 0}.secondary-action span{margin-left:16px}.hero-art{width:min(780px,95%);height:320px;margin:0 auto;display:flex;justify-content:center;align-items:center;padding:0;overflow:hidden}.hero-art img{width:145%;height:auto;max-width:none;margin:0;flex-shrink:0}.hero-bottom{border-color:#26303d;padding:24px 0;color:#8c9eb8;font-size:10px;letter-spacing:2px}.hero-bottom a{font-size:10px}
.section{padding-top:100px;padding-bottom:100px}.section-label{border-top:1px solid var(--line);padding-top:20px;margin-bottom:55px;color:#6e7d92}.section-label>span:first-child{color:var(--blue);font-size:10px;letter-spacing:1.8px}h2{font-size:clamp(32px,3.6vw,54px);line-height:1.5;letter-spacing:-1.5px}.section-heading>p{color:#708097;font-size:13px}.about{padding-bottom:55px}.about-grid{gap:9%;grid-template-columns:1fr 1fr}.about h2 .muted{color:var(--blue)}.about-right .intro-text{font-size:23px;color:#253752}.about-right p{color:#748096}.about-right img{max-height:220px;margin-top:28px}.founded{border-top:1px solid var(--line);padding-top:25px;margin-top:42px;gap:24px}.founded>span{color:var(--blue);font-size:52px;font-weight:700}.founded p{color:#758398}
.stats{background:#fff;color:var(--ink);padding:0 var(--pad) 90px;gap:20px}.stat,.stat:first-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;background:#f2f5fb;border:0;border-radius:4px;padding:32px 36px;position:relative;overflow:hidden}.stat>span{font-size:78px;color:var(--blue);letter-spacing:-4px;font-weight:700}.stat p{font-size:13px;margin:5px 0}.stat small{color:#8d9bb0;font-size:8px;letter-spacing:1px}.stat:after{content:'↗';position:absolute;right:26px;top:32px;color:#b8c9e3;font-size:23px}.stat .plus{font-size:40px}
.services{background:#f4f7fc}.services .section-label{border-color:#d4deeb}.expertise-switcher{display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;align-items:start;margin-top:50px}.service-tabs{display:flex;flex-direction:column;gap:10px}.service-tabs button{display:flex;align-items:center;gap:12px;text-align:left;padding:20px 18px;background:transparent;border:1px solid #d8e1ed;border-radius:4px;font-size:14px;color:#63728b;min-height:67px}.service-tabs button span{font-size:9px;color:#98a6ba}.service-tabs button b{margin-left:auto;font-weight:400}.service-tabs button[aria-selected=true]{background:var(--blue);color:#fff;border-color:var(--blue)}.service-tabs button[aria-selected=true] span{color:#bdd5ff}.service-tabs button:hover{border-color:var(--blue)}.service-panel[hidden]{display:none}.service-list{min-width:0}.service-content{display:grid;grid-template-columns:1fr 1fr;padding:0;gap:0;background:white;min-height:375px;border-radius:5px;overflow:hidden}.service-visual{height:100%;min-height:375px;border-radius:0;padding:30px 26px}.service-visual>span{font-size:clamp(28px,3.2vw,45px);line-height:1.15}.design-art{background:#125ce3;color:white}.design-art .orb{color:#5690f2;font-size:280px;right:-50px;top:100px}.event-art{background:#c8d9fc;color:#124589}.event-rings{border-color:#7ba7f7}.digital-art{background:#263755;color:white}.digital-orb{background:repeating-linear-gradient(0deg,#4a72b7 0 2px,transparent 2px 10px)}.merchandise-art{background:#dfe6ef;color:#24466f}.space-art{background:#b7d6ee;color:#19476f}.service-detail{padding:32px 28px}.panel-kicker{font-size:8px;letter-spacing:1.6px;color:#9babbe}.service-detail h3{font-size:25px;margin:18px 0 22px;font-weight:700}.service-detail>p{font-size:12px;color:#75849a;line-height:1.9}.service-detail ul{gap:8px}.service-detail li{font-size:10px;background:#f5f8fd;border-color:#e1e8f3;padding:8px 9px}.detail-foot{font-size:9px;color:#a2afbf}
.method{background:#fff;color:var(--ink)}.method .section-label{color:#6e7d92}.method .section-heading p{color:#708097}.method-image{background:#f4f7fc;border:1px solid #e3eaf3;border-radius:8px;margin:45px 0 0;padding:22px}.method-image img{width:100%;height:auto}.clients{background:#f4f7fc}.client-grid{border:0;background:transparent;gap:12px}.client-logo{height:112px;border:1px solid #e4eaf3;border-radius:4px;padding:20px;background:#fff}.client-logo img{max-width:125px;height:48px;width:75%;filter:none;opacity:1}.client-logo:hover{border-color:#a4bfe9}.source-note{color:#9aa9bd;font-size:9px}
.network{background:#101c32;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:65px;align-items:center}.network .section-label{grid-column:1/-1;border-color:#ffffff25;color:#9aaac0}.network .section-label>span:first-child{color:#75a9ff}.network-grid{display:contents}.network-copy{grid-column:1;grid-row:2}.network-copy h2{color:#fff}.network-copy>p{color:#a3b3cb}.network-stats{gap:38px}.network-stats strong{color:#81b1ff;font-weight:700}.network-date{color:#768eae}.text-button{font-size:10px;color:#99b5dd;border-color:#567093}.city-explorer{grid-column:2;grid-row:3;margin-top:22px;background:#ffffff04;border-color:#ffffff18;padding:24px}.city-header{color:#e3ebf7}.city-count{color:#7792b9}.city-filters button{color:#98afd0;border-color:#3a4e6c}.city-filters button.active,.city-filters button:hover{background:#2868d4;color:#fff;border-color:#2868d4}.cities{min-height:0;gap:14px 10px;grid-template-columns:repeat(5,1fr)}.city{color:#cad7eb;font-size:11px}.city.is-home{color:#81b1ff}.city-footnote{color:#718aaf;font-size:9px}.network-map{grid-row:2;grid-column:2;border:0;margin:0;padding:0}.network-map img{max-height:430px;object-fit:contain}.location-dot{background:#4f91fc}.network .network-copy{align-self:center}
.introduction{background:#edf3ff}.intro-bottom h2{font-size:clamp(36px,4.8vw,68px)}.contact-grid{grid-template-columns:1fr 1fr 1.25fr;gap:22px}.contact-item{background:#ffffff80;border-color:#d5e0f3;border-radius:4px;flex-direction:row;flex-wrap:wrap;column-gap:22px;padding:24px}.qr-placeholder{width:112px;border-color:#bdcce2;background:#f5f8ff;grid-row:1/3;font-size:10px}.contact-item h3{font-size:16px;margin:0}.contact-item p{font-size:11px;color:#7f90a8;flex-basis:100%;margin-top:15px}.contact-email{flex-direction:column;justify-content:center}.email-icon{height:100px;font-size:58px}.contact-email h3{margin-top:14px}.contact-email p{flex-basis:auto}.introduction .section-label{border-color:#d3def1}footer{background:#080e19}footer .company-logo{width:150px}footer p{color:#9eacc2}footer p>span{color:#647895}.footer-line{border-color:#ffffff15;color:#71839f}
@media(min-width:1700px){:root{--pad:max(100px,calc((100vw - 1420px)/2))}}
@media(max-width:1100px){.expertise-switcher{grid-template-columns:190px minmax(0,1fr);gap:22px}.service-content{grid-template-columns:1fr}.service-visual{height:230px;min-height:230px}.service-visual>span{font-size:36px}.design-art .orb{top:-20px}.service-detail{padding:26px}.network{column-gap:30px}.cities{grid-template-columns:repeat(4,1fr)}.contact-item{justify-content:center;text-align:center}.contact-item h3{flex-basis:100%;margin-top:18px}.stat,.stat:first-child{padding:26px}.hero-art{width:min(780px,95%);margin:0 auto}.network-stats>div{display:block}}
@media(max-width:760px){.header{height:72px}.header .company-logo{width:132px}.header nav{top:72px;background:#101a2d}.header nav a{font-size:14px}.hero{padding-top:21px}.hero-top .eyebrow{letter-spacing:1px;font-size:7px}.hero-copy{padding:48px 0 0}.overline{font-size:10px;letter-spacing:2px;margin-bottom:20px}h1{font-size:clamp(35px,10.2vw,70px);letter-spacing:-2px;line-height:1.6}.title-star{font-size:17px;right:-14px;top:-8px}.hero-en{font-size:7px;letter-spacing:4px;margin:13px 0 24px}.hero-description{font-size:11px;margin-bottom:25px}.hero-actions{gap:20px}.hero .button{font-size:10px;padding:11px 16px;gap:17px}.secondary-action{font-size:10px}.secondary-action span{margin-left:7px}.hero-art{width:100%;height:220px;margin:0;padding:0}.hero-art img{width:160%;margin:0}.hero-bottom{margin-top:0;letter-spacing:.5px;padding:20px 0}.hero-bottom>span{font-size:9px}.section{padding-top:60px;padding-bottom:60px}.section-label{margin-bottom:32px;padding-top:16px}.section-label>span:first-child{font-size:8px}h2{font-size:30px;letter-spacing:-1px}.about-grid{grid-template-columns:1fr;gap:30px}.about-right .intro-text{font-size:20px}.about-right p{font-size:12px}.about-right img{max-height:220px}.founded{margin-top:28px;padding-top:20px}.founded>span{font-size:42px}.stats{padding:0 var(--pad) 55px;gap:8px}.stat,.stat:first-child{padding:20px 12px;gap:6px}.stat>span{font-size:42px;letter-spacing:-2px}.stat .plus{font-size:22px}.stat p{font-size:9px}.stat small{font-size:6px;letter-spacing:0}.stat:after{display:none}.section-heading>p{font-size:11px}.expertise-switcher{display:block;margin-top:28px}.service-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}.service-tabs button{padding:13px 12px;min-height:49px;font-size:11px;gap:8px}.service-tabs button:last-child{grid-column:1/-1}.service-tabs button span{font-size:8px}.service-content{display:block}.service-visual{height:210px;min-height:210px;padding:24px}.service-detail{padding:26px 22px}.service-detail h3{font-size:23px;margin:12px 0 20px}.service-detail>p{font-size:12px}.service-detail li{font-size:10px}.method-image{padding:4px;margin-top:25px}.client-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.client-logo{height:75px;padding:12px 6px}.client-logo img{height:34px;max-width:80%;width:85%}.network{display:flex;flex-direction:column;align-items:stretch}.network-grid{display:contents}.network-copy{order:1}.network .section-label{order:0}.network-map{order:2;margin-top:30px;padding:0}.city-explorer{order:3;margin-top:24px;padding:20px 16px}.cities{grid-template-columns:repeat(4,1fr);gap:14px 8px}.network-stats>div{display:flex;gap:10px}.network-stats{gap:35px;margin-top:25px}.network-stats strong{font-size:50px}.network-date{font-size:9px}.city-filters{margin:20px 0}.intro-bottom h2{font-size:34px}.contact-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.contact-item{padding:22px 12px}.qr-placeholder{width:112px;max-width:100%;font-size:9px}.contact-item h3{font-size:14px;margin-top:16px}.contact-item p{font-size:10px;margin-top:9px}.contact-email{grid-column:1/-1}.email-icon{height:70px;font-size:46px}.contact-email h3{margin-top:6px}footer .company-logo{width:140px}}
@media(prefers-reduced-motion:no-preference){.service-tabs button,.client-logo{transition:background .2s,border-color .2s,color .2s}.hero-art img{animation:art-enter 1.2s ease-out both}@keyframes art-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}

/* V2 refinement: interactive CTAs, breathing room and map-derived accent. */
.header-cta,.secondary-action{display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.header-cta span,.secondary-action span{display:inline-block;transition:transform .2s}
.header-cta:hover,.header-cta:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 5px 20px #0754dc35;transform:translateY(-2px)}
.secondary-action{border:1px solid #465570;border-radius:30px;padding:13px 20px}
.secondary-action:hover,.secondary-action:focus-visible{background:#fff;color:#0754dc;border-color:#fff;box-shadow:0 5px 20px #ffffff15;transform:translateY(-2px)}
.header-cta:hover span,.header-cta:focus-visible span,.secondary-action:hover span,.secondary-action:focus-visible span{transform:translate(3px,-3px)}
.hero-top{gap:32px;align-items:center;padding:6px 0 10px}
.hero-top .edition{flex-shrink:0;letter-spacing:2px;line-height:1.9;padding:6px 0 6px 24px;white-space:nowrap}
.hero-art{height:420px;margin:20px auto 24px}
.method-image{background:transparent;border:0;border-radius:0;padding:0}
.network{--map-green:#4edb8b}
.network .section-label,.network .section-label>span:first-child,.network-copy>p,.network-stats strong,.network-date,.network .text-button,.network .city-count,.network .city-filters button,.network .city,.network .city.is-home,.network .city::before,.network .city-footnote{color:var(--map-green)}
.network .location-dot{background:var(--map-green)}
.network .text-button,.network .city-filters button{border-color:#4edb8b60}
.network .city-filters button.active,.network .city-filters button:hover{background:var(--map-green);border-color:var(--map-green);color:#102d1c}
@media(max-width:1100px){.header-cta{display:none}}
@media(max-width:760px){.hero-top{gap:18px;padding:4px 0 8px}.hero-art{height:280px;margin:14px auto 16px}.secondary-action{font-size:10px;padding:11px 14px}.hero-actions{gap:14px}.method-image{padding:0}}


/* Service network: black background, white heading, green accents. */
.network{background:#000}

/* Accessible two-slide hero carousel. */
.hero-carousel{position:relative;outline:none}
.hero-carousel:focus-visible{outline:2px solid #4f92ff;outline-offset:5px}
.hero-slide{display:none}
.hero-slide.is-active{display:grid;grid-template-rows:auto 560px;animation:hero-slide-in .42s ease both}
.hero-slide .hero-art{height:560px;margin:8px auto 18px}
.slide-city .hero-art img{width:112%;max-width:860px;max-height:390px;object-fit:contain}
.hero-carousel-controls{display:flex;justify-content:center;align-items:center;gap:22px;padding:0 0 14px}
.carousel-arrow{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid #62708a;background:transparent;color:#dce6f6;font:300 24px/1 "Source Han Sans SC",sans-serif;transition:background .2s,border-color .2s,color .2s,transform .2s}
.carousel-arrow:hover,.carousel-arrow:focus-visible{background:#0754dc;border-color:#0754dc;color:#fff;transform:scale(1.08)}
.carousel-dots{display:flex;align-items:center;justify-content:center;gap:9px}
.carousel-dot{width:7px;height:7px;border:0;border-radius:50%;padding:0;background:#78859a;transition:width .2s,background .2s}
.carousel-dot.is-active{width:24px;border-radius:6px;background:#4f92ff}
.carousel-dot:hover{background:#fff}
@keyframes hero-slide-in{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 .hero-slide.is-active{grid-template-rows:auto 280px}
 .hero-slide .hero-art{height:360px;margin:8px auto 12px}
 .slide-city .hero-art img{width:120%;max-height:335px}
 .hero-carousel-controls{padding:0 0 13px;gap:17px}
 .carousel-arrow{width:31px;height:31px}
}
@media(prefers-reduced-motion:reduce){.hero-slide.is-active{animation:none}.carousel-arrow,.carousel-dot{transition:none}}

/* Compact the hero banner while keeping the full source artwork visible. */
.hero-slide.is-active{grid-template-rows:auto 380px}
.hero-slide .hero-art{height:380px;margin:0 auto 12px}
.hero-slide .hero-art img{width:100%;height:100%;max-width:100%;max-height:100%;margin:0;object-fit:contain}
.slide-city .hero-art img{width:100%;max-width:760px;max-height:350px}
@media(max-width:760px){
 .hero-slide.is-active{grid-template-rows:auto 235px}
 .hero-slide .hero-art{height:235px;margin:0 auto 8px}
 .hero-slide .hero-art img{width:100%;max-width:100%;max-height:100%}
 .slide-city .hero-art img{width:100%;max-width:100%;max-height:220px}
}

/* Image-first hero: fit both full banners into the initial viewport. */
.hero{padding-top:20px}
.hero-top{padding:0 0 10px}
.hero-carousel{width:100%;margin:0 auto}
.hero-carousel-track{width:min(100%,1180px,calc((100svh - 300px)*1.77778));margin:0 auto;position:relative}
.hero-slide.is-active{display:block;animation:hero-slide-in .35s ease both}
.hero-slide .hero-art{width:100%;height:auto;max-width:none;aspect-ratio:3780/2126;margin:0 auto;overflow:hidden}
.hero-slide .hero-art img,.slide-city .hero-art img{display:block;width:100%;height:100%;max-width:100%;max-height:none;margin:0;object-fit:contain}
.hero-carousel-controls{position:relative;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0;width:min(100%,1180px,calc((100svh - 300px)*1.77778));margin:0 auto;pointer-events:none}
.hero-carousel-controls>*{pointer-events:auto}
.carousel-arrow{background:#101c32b8;border-color:#ffffff75;color:#fff}
.carousel-dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero-bottom{padding-top:12px;padding-bottom:18px}
@media(max-width:760px){
 .hero{padding-top:14px}
 .hero-top{padding-bottom:8px}
 .hero-top .eyebrow{font-size:7px}
 .hero-carousel-track,.hero-carousel-controls{width:min(100%,calc((100svh - 245px)*1.77778))}
 .hero-slide .hero-art{aspect-ratio:3780/2126}
 .hero-slide .hero-art img,.slide-city .hero-art img{width:100%;height:100%;object-fit:contain}
 .hero-carousel-controls{height:42px}
 .hero-bottom{padding-top:10px;padding-bottom:14px}
}

/* Reduce banner height further and show the Beijing art on a white canvas. */
.hero-carousel-track{width:min(100%,1180px,calc((100svh - 500px)*1.77778))}
.hero-carousel-controls{width:min(100%,1180px,calc((100svh - 500px)*1.77778))}
.hero-slide.is-active{grid-template-rows:auto min(400px,calc(100svh - 500px))}
.hero-slide .hero-art{height:min(400px,calc(100svh - 500px))}
.slide-city .hero-art{background:#fff}
.slide-city .hero-art img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:760px){
 .hero-carousel-track,.hero-carousel-controls{width:min(76vw,calc((100svh - 540px)*1.77778))}
 .hero-slide.is-active{grid-template-rows:auto min(190px,calc(100svh - 540px))}
 .hero-slide .hero-art{height:min(190px,calc(100svh - 540px))}
 .slide-city .hero-art img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
}


/* Full-bleed carousel canvas: keep controls and slides aligned to viewport edges. */
.hero-carousel-track,.hero-carousel-controls{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.hero-slide .hero-art{width:100%;background:#080909}
.hero-slide:not(.slide-city) .hero-art img{object-fit:cover}
.slide-city .hero-art{background:#fff}
.slide-city .hero-art img{object-fit:contain}
@media(max-width:760px){
 .hero-carousel-track,.hero-carousel-controls{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}


/* Draw both carousel arrows from identical strokes for optical alignment. */
.carousel-arrow{font-size:0;display:grid;place-items:center}
.carousel-arrow::before{content:"";display:block;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.carousel-prev::before{transform:translateX(1.5px) rotate(-135deg)}
.carousel-next::before{transform:translateX(-1.5px) rotate(45deg)}


/* Slightly taller full-bleed banner and inset navigation controls. */
.hero-slide.is-active{grid-template-rows:auto min(480px,calc((100svh - 500px)*1.2))}
.hero-slide .hero-art{height:min(480px,calc((100svh - 500px)*1.2))}
.hero-carousel-controls{padding-inline:clamp(28px,7vw,112px)}
@media(max-width:760px){
 .hero-slide.is-active{grid-template-rows:auto min(228px,calc((100svh - 540px)*1.2))}
 .hero-slide .hero-art{height:min(228px,calc((100svh - 540px)*1.2))}
 .hero-carousel-controls{padding-inline:clamp(22px,6vw,44px)}
}


/* Make the whole first screen the carousel canvas, with the header over glass. */
.header{position:fixed;top:0;left:0;right:0;width:100%;background:rgba(8,9,9,.5);border-bottom-color:#ffffff30;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hero{min-height:100svh;padding:108px var(--pad) 24px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.hero-top,.hero-bottom{position:relative;z-index:2}
.hero-carousel{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0}
.hero-carousel-track{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden}
.hero-slide.is-active{position:absolute;inset:0;display:block;height:100%;animation:hero-slide-in .35s ease both}
.hero-slide .hero-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;background:#080909}
.hero-slide .hero-art img{display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;object-position:center}
.slide-city .hero-art,.hero-slide.slide-city .hero-art{background:#fff}
.slide-city .hero-art img{object-fit:contain}
.hero-carousel-controls{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;padding-inline:clamp(28px,7vw,112px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.hero-carousel-controls>*{pointer-events:auto}
.carousel-dots{position:absolute;left:50%;top:auto;bottom:62px;transform:translateX(-50%)}
.hero-bottom{margin-top:auto;padding-top:14px;padding-bottom:0;border-top:1px solid #ffffff35}
.hero:has(.slide-city.is-active) .hero-top{color:#48566b}
.hero:has(.slide-city.is-active) .hero-bottom{color:#45536a;border-color:#9eacbf}
.hero:has(.slide-city.is-active) .hero-bottom a{color:#17233a}
@media(max-width:760px){
 .header{position:fixed;top:0}
 .hero{min-height:100svh;padding:91px var(--pad) 18px}
 .hero-top{font-size:7px}
 .hero-carousel-controls{padding-inline:clamp(22px,6vw,44px)}
 .carousel-dots{bottom:52px}
 .hero-bottom{padding-top:11px;padding-bottom:0}
}

/* The Beijing artwork sits on white and must not inherit the dark-slide blend. */
.hero-slide.slide-city .hero-art img{mix-blend-mode:normal}


/* Await client-supplied service images; double the current visual height. */
.service-visual.image-slot{height:750px;min-height:750px;padding:24px;background:#edf2f8;color:#64748b;display:flex;align-items:center;justify-content:center;text-align:center;gap:12px}
.service-visual.image-slot>span{font-size:17px;font-weight:400;letter-spacing:0;line-height:1.5}
.service-visual.image-slot>small{font-size:12px;letter-spacing:.3px}
@media(max-width:760px){.service-visual.image-slot{height:420px;min-height:420px;padding:20px}.service-visual.image-slot>span{font-size:15px}.service-visual.image-slot>small{font-size:11px}}


/* Service image display area follows the requested 1200:800 landscape ratio. */
.service-panel .service-content{display:flex;flex-direction:column;min-height:0}
.service-panel .service-visual.image-slot{width:100%;max-width:1200px;height:auto;min-height:0;aspect-ratio:1200/800;align-self:center}
.service-panel .service-detail{width:100%}
@media(max-width:760px){.service-panel .service-visual.image-slot{width:100%;max-width:none;height:auto;min-height:0;aspect-ratio:1200/800}}


/* Six service tabs use an even two-column layout on small screens. */
@media(max-width:760px){.service-tabs button:last-child{grid-column:auto}}




/* Client-supplied carousel, service, and contact images (2026-10-21). */
.hero-carousel-track{width:100%;max-width:none;position:relative}
.hero-slide .hero-art{width:100%;height:auto;max-width:none;aspect-ratio:16/9;margin:0;padding:0;overflow:hidden}
.hero-slide .hero-art img{display:block;width:100%;height:100%;max-width:100%;max-height:none;margin:0;object-fit:contain;object-position:center}
.hero-carousel-controls{width:100%;max-width:none;height:48px;margin:0 auto}
.service-panel .service-visual.service-image{width:100%;max-width:1200px;height:auto;min-height:0;aspect-ratio:1200/800;padding:0;overflow:hidden;align-self:center;background:#eef2f7}
.service-panel .service-visual.service-image img{display:block;width:100%;height:100%;object-fit:cover}
.contact-qr{width:112px;height:112px;object-fit:contain;background:#fff;border:1px solid #d5e0f3;border-radius:3px}
.contact-email a{color:inherit;text-decoration:none}
.contact-email a:hover,.contact-email a:focus-visible{color:var(--blue);text-decoration:underline}
@media(max-width:760px){.hero-slide .hero-art{width:100%;height:auto;aspect-ratio:16/9;margin:0}.hero-slide .hero-art img{width:100%;height:100%;object-fit:contain}.service-panel .service-visual.service-image{width:100%;max-width:none;height:auto;min-height:0;aspect-ratio:1200/800}.contact-qr{width:112px;height:112px}}

/* Preserve the complete 16:9 client banners; let the image set the hero height. */
.hero{min-height:0;padding:0;display:block;overflow:hidden}
.hero-top{position:absolute;z-index:4;top:104px;left:var(--pad);right:var(--pad);padding:6px 0 10px}
.hero-carousel{position:relative;inset:auto;z-index:0;width:100%;height:auto;margin:0}
.hero-carousel-track{position:relative;inset:auto;width:100%;height:auto;max-width:none;margin:0;overflow:hidden}
.hero-slide{display:none}
.hero-slide.is-active{position:relative;inset:auto;display:block;height:auto;animation:hero-slide-in .35s ease both}
.hero-slide .hero-art{position:relative;inset:auto;width:100%;height:auto;max-width:none;aspect-ratio:16/9;margin:0;padding:0;overflow:hidden;background:#080909}
.hero-slide .hero-art img{display:block;width:100%;height:100%;max-width:100%;max-height:none;margin:0;object-fit:contain;object-position:center}
.hero-slide.slide-city .hero-art{background:#fff}
.hero-carousel-controls{position:absolute;inset:0;z-index:3;width:100%;height:100%;max-width:none;margin:0;padding:0 clamp(28px,7vw,112px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.hero-carousel-controls>*{pointer-events:auto}
.carousel-dots{position:absolute;left:50%;top:auto;bottom:18px;transform:translateX(-50%)}
.hero-bottom{position:relative;z-index:2;margin:0;padding:14px var(--pad) 18px;border-top:1px solid #ffffff35}
@media(max-width:760px){
 .hero-top{top:82px;left:var(--pad);right:var(--pad);padding:4px 0 8px}
 .hero-slide .hero-art{width:100%;height:auto;aspect-ratio:16/9}
 .hero-slide .hero-art img{width:100%;height:100%;object-fit:contain}
 .hero-carousel-controls{padding:0 22px}
 .carousel-dots{bottom:10px}
 .hero-bottom{padding:12px var(--pad) 18px}
}

/* Restore the full-viewport carousel and fit each complete banner inside it. */
.hero{min-height:100svh;padding:108px var(--pad) 24px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden}
.hero-top,.hero-bottom{position:relative;z-index:2}
.hero-carousel{position:absolute;inset:0;z-index:0;width:100%;height:100%;margin:0}
.hero-carousel-track{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;overflow:hidden}
.hero-slide{display:none}
.hero-slide.is-active{position:absolute;inset:0;display:block;height:100%;animation:hero-slide-in .35s ease both}
.hero-slide .hero-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#080909}
.hero-slide .hero-art img{display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:contain;object-position:center}
.hero-slide.slide-city .hero-art{background:#fff}
.hero-carousel-controls{position:absolute;inset:0;z-index:3;width:100%;height:100%;max-width:none;margin:0;padding:0 clamp(28px,7vw,112px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.hero-carousel-controls>*{pointer-events:auto}
.carousel-dots{position:absolute;left:50%;top:auto;bottom:62px;transform:translateX(-50%)}
.hero-bottom{margin-top:auto;padding-top:14px;padding-bottom:0;border-top:1px solid #ffffff35}
@media(max-width:760px){
 .hero{min-height:100svh;padding:91px var(--pad) 18px}
 .hero-slide .hero-art,.hero-slide .hero-art img{width:100%;height:100%}
 .hero-carousel-controls{padding:0 22px}
 .carousel-dots{bottom:42px}
 .hero-bottom{padding-top:12px;padding-bottom:0}
}
/* Full-bleed first-screen canvas with mobile-safe image sizing. */
.hero-top{top:auto;left:auto;right:auto}
@media(max-width:760px){
 .hero-top{top:auto;left:auto;right:auto}
 .hero-slide:not(.slide-city) .hero-art img{width:200%;height:200%;max-width:none;max-height:none;object-fit:contain;filter:brightness(1.5);transform:none}
}

/* 2026-10-21: requested copy, contact layout, and second carousel banner. */
.about h2 .muted{color:var(--blue)}
.about-right>img{display:none}
.contact-item.contact-email{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;justify-content:stretch;gap:16px;text-align:center}
.contact-email .email-icon{width:40px;height:40px;display:grid;place-items:center;font-size:0;color:var(--blue)}
.contact-email .email-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-email .email-content{width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.contact-email .email-content h3{width:100%;margin:0;text-align:center}
.contact-email .email-content p{flex-basis:auto;margin:0;font-size:clamp(14px,1.2vw,18px);font-weight:600;white-space:nowrap}
@media(max-width:760px){
 .contact-item.contact-email{grid-column:1/-1;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:20px 14px}
 .contact-email .email-icon{width:30px;height:30px}
 .contact-email .email-content{gap:8px}
 .contact-email .email-content h3{margin:0;font-size:14px}
 .contact-email .email-content p{margin:0;font-size:14px}
}

/* Center the email copy against the whole card while keeping the icon at left. */
.contact-item.contact-email{position:relative;display:flex;justify-content:center;align-items:center;padding-left:24px;padding-right:24px}
.contact-email .email-icon{position:absolute;left:24px;top:50%;transform:translateY(-50%)}
.contact-email .email-content{width:100%;flex:1}
.contact-email .email-content p{font-size:clamp(16px,1.25vw,18px);color:#40516b}
@media(max-width:760px){.contact-item.contact-email{display:flex;grid-column:1/-1;padding:20px 20px}.contact-email .email-icon{left:18px;width:30px;height:30px}.contact-email .email-content p{font-size:16px}}

/* Keep the mail icon attached to the address at every card width. */
.contact-item.contact-email{display:flex;justify-content:center;align-items:center;padding:24px}
.contact-email .email-content{width:100%;flex:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.contact-email .email-content h3{width:100%;margin:0;text-align:center}
.contact-email .email-content p{display:flex;justify-content:center;flex-basis:auto;width:100%;margin:0}
.contact-email .email-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;color:#40516b;text-decoration:none;font-size:clamp(16px,1.25vw,18px);font-weight:600;white-space:nowrap}
.contact-email .email-icon{position:static;left:auto;top:auto;transform:none;display:block;width:22px;height:22px;flex:0 0 22px;font-size:0;color:var(--blue);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-email .email-link:hover,.contact-email .email-link:focus-visible{color:var(--blue);text-decoration:underline}
@media(max-width:760px){.contact-item.contact-email{display:flex;grid-column:1/-1;padding:20px 14px}.contact-email .email-content{gap:8px}.contact-email .email-content h3{font-size:14px}.contact-email .email-link{gap:8px;font-size:16px}.contact-email .email-icon{width:20px;height:20px;flex-basis:20px}}

@media(min-width:761px){.contact-email .email-content{gap:4px}}

/* Keep the email title and address together at the same spacing on every width. */
.contact-email .email-content{gap:4px}