/* Product-led layout refinement: visual rhythm, readable type, complete imagery. */
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root{--muted:#6e6e73}
.hero{padding-top:66px;background:linear-gradient(180deg,#fff 0%,#fff 45%,#f5f5f7 100%)}
.hero h1{font-size:clamp(48px,6.1vw,86px);font-weight:650;letter-spacing:-.065em}
.hero-sub{font-size:19px;letter-spacing:.02em;margin-top:22px}
.hero-product{width:min(760px,76vw);margin-top:48px;margin-bottom:32px}
.hero-bottom{padding-bottom:30px}
.works-intro{padding-top:100px;padding-bottom:46px;align-items:center}
.section-heading h2{font-size:clamp(40px,4.2vw,60px);letter-spacing:-.055em;font-weight:650;line-height:1.2}
.section-desc{font-size:15px;line-height:1.9}
.project-overview{padding:0 max(6vw,calc((100vw - 1280px)/2)) 65px;background:white}
#overview-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.overview-item{display:block;min-width:0;border-top:1px solid #e7e7ea;padding:21px 0;transition:color .2s}
.overview-thumb{display:block;background:#f5f5f7;aspect-ratio:1.18;border-radius:14px;overflow:hidden;margin-bottom:16px}
.overview-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.overview-item:nth-child(4) img,.overview-item:nth-child(5) img{object-fit:contain;mix-blend-mode:multiply}
.overview-item:hover img{transform:scale(1.06)}
.overview-item>span:last-child{display:flex;align-items:baseline;gap:12px;font-size:14px;line-height:1.6}
.overview-item b{margin-left:auto;font-weight:400;color:#86868b;transition:transform .2s}
.overview-item:hover{color:var(--blue)}.overview-item:hover b{color:var(--blue);transform:translate(2px,-2px)}
.overview-item small{font-size:9px;color:#8e8e93}
.overview-hint{font-size:11px;color:#86868b;margin-top:25px;text-align:right}
.overview-hint span{padding-left:12px}
.project-nav{height:57px}.mobile-project-select{display:none}
.project{padding:92px max(5vw,calc((100vw - 1320px)/2)) 0;background:#fff}
.project h2{font-size:clamp(42px,4.7vw,68px);font-weight:650;line-height:1.18;letter-spacing:-.06em}
.project-kind{margin-top:16px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.project .eyebrow{color:#86868b;letter-spacing:.15em}
.project .lead{font-size:16px;line-height:1.85}
.project-head{padding:0 20px}
.project-stage{width:100%;margin-top:40px;background:var(--bg);border-radius:24px;overflow:hidden}
.project-picture img{height:auto;aspect-ratio:1.78;object-fit:contain!important}
.project-picture:hover img{transform:scale(1.01)}
.project-info{padding:22px 4px 50px;width:100%;max-width:none}
.project-info p{font-size:10px;letter-spacing:.02em}
.view-switch{background:#f0f0f2;padding:4px}.view-switch button{padding:9px 16px;font-size:11px}
.project-actions{margin-top:25px}.project-actions .pill{font-size:13px;padding:11px 21px}
.project-actions .text-link{font-size:13px}
.dark{background:#090a0d}.dark .project-kind{color:#f5f5f7}.dark .project-stage{background:#090a0d}.dark .project-info{border-bottom:0}
#projector{padding-top:95px;padding-bottom:12px;margin-top:36px}
#projector .project-head{max-width:900px}
#projector h2{font-size:clamp(48px,5.6vw,80px)}
#projector .project-stage{margin-top:44px;border-radius:18px}
#projector .project-picture img{aspect-ratio:1.85}
#v8{padding-top:100px;background:#f5f5f7}
#v8 .project-stage{background:#f5f5f7}
#v8 .project-picture img{aspect-ratio:1.95}
#v8 .view-switch{background:#e8e8eb}
#t5 .project-head{display:grid;grid-template-columns:1fr 1fr;column-gap:55px;text-align:left;max-width:none;padding-inline:0}
#t5 .project-head .eyebrow{grid-column:1/-1}
#t5 .project-kind{grid-column:1}
#t5 .project-head h2{grid-column:1;grid-row:3/5;margin-bottom:0}
#t5 .lead{grid-column:2;grid-row:3;align-self:end;margin:20px 0 0}
#t5 .project-actions{grid-column:2;grid-row:4;justify-content:flex-start;align-self:start;margin-top:18px}
#t5 .project-stage{background:#f5f5f7}
#t5 .project-picture img{aspect-ratio:1.9}
.approach{margin-top:25px;padding-top:100px;padding-bottom:100px}
.approach h2{font-size:clamp(38px,4.5vw,64px);font-weight:650;line-height:1.2}
.principles h3{font-size:23px;font-weight:600;letter-spacing:-.04em}.principles p{font-size:14px;line-height:1.9}
.sketch-image{border-radius:22px}
.about{padding-block:110px}.about h2{font-size:38px;line-height:1.25;font-weight:650}.about-copy>p:not(.eyebrow){line-height:1.9;font-size:15px}
.contact h2{font-weight:650;line-height:1.2;font-size:clamp(38px,4.7vw,66px)}
#case-dialog{background:#fff;width:min(1440px,96vw);max-height:94dvh;border-radius:20px}
.case-header{padding-bottom:34px}.case-header h2{font-weight:650;line-height:1.2}
.case-narrative{padding-bottom:40px}.case-narrative p{font-size:13px;line-height:1.9}
.case-gallery{grid-template-columns:minmax(0,1fr);gap:32px;padding-inline:2%;padding-bottom:50px}
.case-gallery button{width:100%;background:#f5f5f7;border-radius:8px;align-self:start;text-align:left}
.case-gallery button:first-child{grid-column:auto}
.case-gallery img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#f5f5f7}
.case-gallery button>span{padding:14px 16px;font-size:11px;gap:10px}
.case-next{background:#f5f5f7}.case-next h3{font-weight:600}
.about{display:block;max-width:1050px}.about-copy{max-width:850px}.about-copy>p:not(.eyebrow){max-width:650px}.about dl{padding-top:26px;border-top:1px solid #e7e7ea;gap:90px;margin-top:35px}
.resume-header{border-bottom:1px solid #e7e7ea;margin:0 7%;padding:75px 0 35px}.resume-header .case-meta{flex-wrap:wrap;gap:14px 28px}
.resume-sections{padding:40px 7% 60px;display:grid;grid-template-columns:1fr 1.6fr;gap:45px 55px}.resume-sections h3{font-size:23px;margin:12px 0 24px;font-weight:600}.resume-sections section>p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.9;margin-top:12px}.resume-row{display:flex;justify-content:space-between;gap:20px;font-size:13px;margin-top:24px}.resume-row span{white-space:nowrap;font-size:11px;color:var(--muted)}.resume-row strong{font-weight:600}.resume-tools{color:var(--ink)!important}
@media(max-width:600px){.about dl{gap:20px}.resume-header{padding-top:80px}.resume-sections{display:block}.resume-sections section+section{margin-top:35px}.resume-sections h3{font-size:22px;margin-bottom:20px}.resume-row{gap:15px;font-size:12px}.resume-row span{font-size:10px}}
@media(min-width:1000px){
 #water,#cycling,#disinfect{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.55fr);column-gap:55px;align-items:center;padding-top:85px}
 #water .project-head,#cycling .project-head,#disinfect .project-head{text-align:left;padding:0;margin:0}
 #water .project-head h2,#cycling .project-head h2,#disinfect .project-head h2{font-size:clamp(40px,4vw,60px)}
 #water .project-actions,#cycling .project-actions,#disinfect .project-actions{justify-content:flex-start;gap:20px;flex-wrap:wrap}
 #water .project-stage,#cycling .project-stage,#disinfect .project-stage{margin:0}
 #water .project-picture img,#cycling .project-picture img,#disinfect .project-picture img{aspect-ratio:1.15}
 #water .project-info,#cycling .project-info,#disinfect .project-info{grid-column:1/-1;margin-top:20px;border-bottom:1px solid #e7e7ea;padding-bottom:46px}
 #cycling .project-head{grid-column:2;grid-row:1}
 #cycling .project-stage{grid-column:1;grid-row:1}
 #cycling{grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr)}
}
@media(max-width:999px){
 #overview-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
 .overview-thumb{aspect-ratio:1.5;margin-bottom:10px}.overview-item>span:last-child{font-size:12px}
 .project{padding-top:65px}.project h2{font-size:52px}.project-stage{border-radius:20px}
 .project.clean .project-picture img{height:auto}
 #t5 .project-head{column-gap:25px}#t5 h2{font-size:46px}#t5 .lead{font-size:14px}
 .project-info{padding-bottom:36px}
}
@media(max-width:600px){
 .hero{padding-top:48px}.hero h1{font-size:49px;font-weight:650;letter-spacing:-.06em}
 .hero-sub{font-size:14px;letter-spacing:0}.hero-product{width:90vw;margin-top:32px;margin-bottom:25px}
 .hero-bottom{padding-bottom:25px}.screen-caption strong{font-size:24px;font-weight:600}
 .works-intro{padding:60px 24px 28px}.section-heading h2{font-size:36px}.section-desc{font-size:13px;margin-top:20px}
 .project-overview{padding:0 24px 38px}
 #overview-items{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding-bottom:0}
 .overview-item{padding:17px 0}
 .overview-item>span:last-child{font-size:11px;gap:8px}.overview-hint{font-size:10px;margin-top:12px;text-align:left}
 .project-nav{height:51px;padding:0 24px;gap:20px}.project-nav>div{display:none}
 .mobile-project-select{display:flex;align-items:center;gap:16px;flex:1;min-width:0;font-size:11px;color:#86868b}
 .mobile-project-select select{font:inherit;font-size:12px;font-weight:600;color:#1d1d1f;background:transparent;border:0;max-width:185px;padding:8px 16px 8px 0;cursor:pointer}
 .nav-count{display:block;margin-left:0;font-size:10px}
 .project{padding:48px 20px 0}.project-head{padding:0 4px}.project h2{font-size:37px;line-height:1.22;margin-top:17px}
 .project-kind{font-size:12px;margin-top:12px}.project .lead{font-size:13px;line-height:1.85}
 .project-stage{margin-top:29px;border-radius:16px}
 .project-picture img,.project.clean .project-picture img{height:auto;aspect-ratio:1.35;object-fit:contain!important}
 .project-info{padding:18px 0 34px;gap:15px}.project-info p{font-size:9px;text-align:center;line-height:1.8}
 .project-actions{gap:20px}.project-actions .pill{font-size:12px;padding:11px 19px}.project-actions .text-link{font-size:12px}
 .view-switch{max-width:100%}.view-switch button{font-size:10px;padding:9px 13px}
 #projector{padding-top:56px;margin-top:8px}#projector h2{font-size:43px}#projector .project-stage{margin-top:30px}
 #projector .project-picture img{aspect-ratio:1.4}#v8{padding-top:55px}#v8 .project-picture img{aspect-ratio:1.35}
 #t5 .project-head{display:block;text-align:center}#t5 h2{font-size:37px}#t5 .lead{margin:0 auto;font-size:13px}#t5 .project-actions{justify-content:center;margin-top:22px}#t5 .project-picture img{aspect-ratio:1.35}
 .approach{padding:65px 24px;margin-top:0}.approach h2{font-size:34px}.principles h3{font-size:21px}.principles p{font-size:13px;line-height:1.9}
 .about{padding:65px 24px}.about h2{font-size:30px}.about-copy>p:not(.eyebrow){font-size:13px}
 .contact{padding:65px 24px}.contact h2{font-size:34px}.email-copy{font-size:13px}
 #case-dialog{width:100vw;max-height:100dvh;border-radius:0}.case-header{padding-bottom:28px}.case-header h2{font-size:32px}.case-header>p{font-size:14px}
 .case-gallery{grid-template-columns:1fr;padding:0 0 30px;gap:20px}.case-gallery button{border-radius:0}.case-gallery button:first-child{grid-column:auto}.case-gallery button>span{font-size:11px;padding:13px 16px}
}