/* Brand lock-up: a clear Chinese wordmark, without a second row of spaced text. */
.brand{gap:12px;align-items:center}.brand>span{display:block}.brand strong{line-height:1.15;font-weight:700;letter-spacing:.8px;white-space:nowrap}
.site-header .brand img{width:52px;height:48px}.site-header .brand strong{font-size:26px}
.brand--footer img{width:48px;height:44px}.brand--footer strong{font-size:22px}
.playback-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #bad9fb;border-radius:50%;background:#ffffffb8;color:#2584eb;flex-shrink:0}
.playback-button .ui-icon{width:15px;height:15px}
.hero-pagination{align-items:center}.hero-pagination .playback-button{width:28px;height:28px;margin-left:9px;padding:5px}
.hero-pagination .playback-button::after{display:none}
.hero-visual.slide-arrived .hero-art-parallax{animation:slideReveal .48s ease-out}
@keyframes slideReveal{from{opacity:.25;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
/* Six real projects in a horizontally scrollable, progressively enhanced track. */
.cases-section{min-height:0;height:auto}
.cases-grid{position:relative;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0 14px;max-width:none;margin:0;align-items:stretch}
.cases-grid::-webkit-scrollbar{display:none}
.case-card{min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column}
.case-card:hover{transform:translateY(-3px)}
.case-cover{padding:0;height:clamp(175px,12vw,220px);aspect-ratio:auto;background:none;display:block;flex-shrink:0;position:relative;overflow:hidden}
.case-cover img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s}
.case-cover:hover img{transform:scale(1.025)}
.case-copy{flex:1;display:flex;flex-direction:column;padding:20px 24px 18px}.case-copy .category{align-self:flex-start}.case-copy h3{font-size:22px;line-height:1.5}.case-copy>p{font-size:14px;line-height:1.8}
.case-bottom{margin-top:auto;padding-top:15px;font-size:12px}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.carousel-controls[hidden]{display:none}
.carousel-controls [data-case-prev] .ui-icon{transform:rotate(180deg)}
.carousel-controls .circle-button{width:34px;height:34px}
.carousel-pages{display:flex;align-items:center;gap:7px}
.carousel-pages button{width:7px;height:7px;background:#bdd8f5;border-radius:6px;transition:width .2s,background .2s}
.carousel-pages button[aria-pressed=true]{width:24px;background:#1578ff}
.carousel-count{font-size:12px;letter-spacing:1px;color:#7890ab;font-variant-numeric:tabular-nums}
.cases-section .section-action{margin-top:26px}
.detail-project-art{background:none;aspect-ratio:auto}.detail-project-art img{width:100%;height:auto;display:block;border-radius:10px}
@media(min-width:1100px){
 .hero{--hero-height:clamp(560px,43.5vw,740px)}
 .hero-copy{width:max(330px,calc(clamp(40px,4.066986vw,68px) * 7))}
 .hero h1{font-size:clamp(40px,4.066986vw,68px)}
 .hero-visual{width:clamp(450px,41vw,720px)}
 .cases-section{padding-bottom:42px}
}
@media(min-width:761px) and (max-width:1099px){
 .cases-grid{grid-auto-columns:calc((100% - 18px)/2);gap:18px}.case-cover{height:190px}
 .case-copy{padding:18px}.case-copy h3{font-size:18px}.case-copy>p{font-size:12px}
}
@media(max-width:760px){
 .brand{gap:8px}.site-header .brand img{width:38px;height:35px}.site-header .brand strong{font-size:21px;letter-spacing:.4px}
 .brand--footer img{width:37px;height:34px}.brand--footer strong{font-size:20px}
 .hero h1{font-size:32px}.hero-visual{width:84%;max-width:390px}
 .hero-pagination .playback-button{width:25px;height:25px}
 .cases-grid{grid-auto-columns:100%;gap:16px}.case-cover{height:185px}
 .case-copy{padding:18px 20px}.case-copy h3{font-size:20px}.case-copy>p{font-size:13px}
 .carousel-controls{gap:12px;margin-top:12px}.carousel-count{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.hero-visual.slide-arrived .hero-art-parallax{animation:none}.cases-grid{scroll-behavior:auto}}

/* Latest first-screen edits: quieter navigation and only the slide indicators. */
.main-nav>a,.nav-trigger{color:#3e3e3e}
.hero-assurances,.hero-pagination [data-hero-playback]{display:none}
@media(min-width:1100px){
 .hero h1{font-size:60px}
 .hero-copy{width:420px}
}