*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#f7f8f2;color:#203b2b}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #77b77c;outline-offset:5px}.design-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 4%;background:#e4eadf;color:#34523c;font-size:11px;letter-spacing:1px;gap:15px}.design-bar nav{display:flex;gap:4px}.design-bar nav a{padding:6px 16px;border-radius:20px;letter-spacing:0}.design-bar [aria-current=page]{color:#fff;background:#24543c}.design-bar small{opacity:.7}header{height:100px;display:flex;align-items:center;justify-content:space-between;max-width:1500px;margin:auto;padding:0 5%;gap:30px}.brand{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.6px;font-weight:650}.brand small{display:block;font-size:9px;letter-spacing:2.5px;font-weight:500}.mark{display:grid;place-items:center;background:#22563b;color:#fff;width:36px;height:36px;font-size:30px;line-height:1;border-radius:4px}header nav{display:flex;gap:32px;font-size:13px}.signin{font-size:13px;border-bottom:1px solid;padding-bottom:4px}.hero{position:relative;max-width:1600px;margin:auto;min-height:650px;display:grid;grid-template-columns:48% 52%;align-items:center;padding:0 5%}.hero-copy{z-index:2;padding:44px 0 65px}.eyebrow,.section-label{font-size:10px;letter-spacing:2px;font-weight:600}.eyebrow i{display:inline-block;width:7px;height:7px;background:#5c9d63;margin-right:12px}.edition{display:none}h1{font-size:clamp(42px,4.5vw,72px);line-height:1.35;font-weight:500;letter-spacing:-2px;margin:29px 0 23px}h1 em,h2 em{font-style:normal;color:#427a4f;font-family:"Songti SC","Noto Serif CJK SC",serif;font-weight:400}.intro{color:#68796c;font-size:16px;line-height:1.95}.actions{display:flex;align-items:center;gap:25px;margin-top:32px}.primary{display:inline-flex;gap:35px;justify-content:space-between;align-items:center;background:#245a3d;color:#fff;padding:16px 23px;border-radius:3px;font-size:14px;transition:background .2s,transform .2s}.primary:hover{background:#34774d;transform:translateY(-2px)}.secondary{font-size:13px;border-bottom:1px solid #8ea18c;padding:8px 0}.secondary span{margin-left:14px}.micro{font-size:11px;color:#7c897c;margin-top:17px}.hero-note{display:none}.hero-art{margin:0;position:relative;align-self:stretch;display:flex;align-items:center}.hero-art img{width:148%;max-width:none;margin-left:-44%;mix-blend-mode:multiply;object-fit:contain;pointer-events:none}.art-caption{position:absolute;bottom:34px;left:0;right:0;display:flex;justify-content:space-between;font-size:9px;line-height:1.6;letter-spacing:1px;color:#738374}.art-tag{position:absolute;right:0;top:17%;font-family:Georgia,serif;font-style:italic;font-size:13px;padding:10px 14px;border-bottom:1px solid #adc4ac}.dot{display:inline-block;width:6px;height:6px;background:#4a8757;border-radius:50%;margin-right:7px}.vertical-note{position:absolute;right:14px;top:35%;writing-mode:vertical-rl;letter-spacing:2px;font-size:8px;color:#829080}.proof-strip{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0 5%;padding:26px 0;border-top:1px solid #ccd7c6;border-bottom:1px solid #ccd7c6}.proof-strip b{font-size:12px;font-weight:500}.proof-strip small{display:block;font-size:10px;color:#83907f;margin-top:4px}.proof-strip>a{font-size:12px}.proof-strip>a span{margin-left:35px}.workflow{padding:100px 8%;max-width:1500px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 0 45px}h2{font-weight:500;font-size:38px;line-height:1.5;letter-spacing:-1px;margin:0}.section-heading p{font-size:13px;color:#7b8779}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #c9d2c4}.steps article{padding:27px 38px 0 0}.steps article+article{padding-left:38px;border-left:1px solid #d8ded2}.steps article>span{font-size:10px;letter-spacing:1px;color:#7b967c}h3{font-weight:500;font-size:23px;margin:18px 0 12px}.steps p{font-size:13px;color:#71806f;max-width:280px}.evidence{margin:0 5%;padding:60px 6%;background:#e5ecde;display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:center}.case-copy h2{font-size:29px;margin:20px 0}.case-copy p{font-size:13px;color:#697c67;max-width:430px}.case-link{font-size:13px;border-bottom:1px solid}.case-copy small{display:block;color:#7b8878;font-size:10px;margin-top:20px}.case-number{font-size:105px;letter-spacing:-6px;line-height:1.2}.case-number>span{font-size:50px;color:#7ca17b}.case-number small{display:block;font-size:10px;letter-spacing:2px;margin-top:15px}.research{max-width:800px;text-align:center;margin:auto;padding:110px 30px}.research h2{font-size:34px;margin:25px 0}.research p{max-width:490px;margin:0 auto 30px;color:#7c8878;font-size:13px}footer{display:flex;justify-content:space-between;padding:30px 5%;border-top:1px solid #d6dfce;font-size:12px}footer small{font-size:9px;margin-left:12px;letter-spacing:1px}
/* 02: an architectural studio, generous contrast and an asymmetric framed image. */
body[data-style=studio]{background:#102e24;color:#eff3e7}body[data-style=studio] .design-bar{background:#081f17;color:#bcd4b6}body[data-style=studio] .design-bar [aria-current=page]{background:#b8d88c;color:#102e24}body[data-style=studio] header{border-bottom:1px solid #395045}body[data-style=studio] .mark{background:#b9d393;color:#173c2b}body[data-style=studio] .hero{grid-template-columns:46% 54%;gap:4%;padding-top:48px;padding-bottom:65px;min-height:680px;overflow:hidden}body[data-style=studio] .eyebrow{color:#9cbc8e}body[data-style=studio] .edition{display:block;color:#86a98a;font-size:10px;letter-spacing:3px;margin-top:26px}body[data-style=studio] h1{font-size:clamp(40px,4.6vw,70px);line-height:1.3;margin-top:20px}body[data-style=studio] h1 em{color:#c4da9b}body[data-style=studio] .intro{color:#aac0ac}body[data-style=studio] .hero-art{min-height:530px;background:#f5f7ee;align-self:center;transform:rotate(-2deg);box-shadow:18px 18px 0 #284a36;overflow:hidden}body[data-style=studio] .hero-art img{width:160%;margin-left:-57%;mix-blend-mode:multiply}body[data-style=studio] .art-caption{left:20px;right:20px;bottom:16px;color:#3d6047}body[data-style=studio] .art-tag{top:15px;right:20px;color:#2c5739}body[data-style=studio] .hero-note{display:flex;align-items:center;gap:20px;margin-top:40px;font-size:10px;color:#acc0a9}body[data-style=studio] .note-num{font:24px Georgia,serif;color:#d0e0b8}body[data-style=studio] .hero-note small{color:#809f88}body[data-style=studio] .primary{background:#c6dc9c;color:#123225}body[data-style=studio] .micro{color:#8fa58b}body[data-style=studio] .proof-strip{border-color:#405641}body[data-style=studio] .evidence{background:#234532}body[data-style=studio] .case-copy p,body[data-style=studio] .steps p,body[data-style=studio] .research p{color:#abc0a7}body[data-style=studio] h2 em{color:#b4cc91}
/* 03: soft product-led clarity, central type and a panoramic model window. */
body[data-style=lab]{background:#eef4e8;color:#21452d}body[data-style=lab] header{max-width:1200px;height:92px}body[data-style=lab] .hero{display:flex;flex-direction:column;min-height:0;padding-top:12px;max-width:1300px}body[data-style=lab] .hero-copy{text-align:center;padding:20px 0 0;max-width:900px}body[data-style=lab] h1{font-size:clamp(36px,4.5vw,65px);line-height:1.2;margin:24px 0 20px;letter-spacing:-2px}body[data-style=lab] h1 br{display:none}body[data-style=lab] h1 em{font-family:inherit;font-weight:600;color:#497c46}body[data-style=lab] .intro{font-size:15px;margin:10px 0}body[data-style=lab] .intro br{display:none}body[data-style=lab] .actions{justify-content:center;margin-top:25px}body[data-style=lab] .primary{border-radius:40px;padding:15px 24px;background:#3a7045}body[data-style=lab] .hero-art{display:block;align-self:center;height:350px;overflow:hidden;width:90%;border-radius:200px 200px 12px 12px;background:#fff;margin-top:20px;border:1px solid #d7e2ca}body[data-style=lab] .hero-art img{width:100%;height:100%;margin:0;object-fit:cover;object-position:center 52%;mix-blend-mode:multiply}body[data-style=lab] .art-caption{left:26px;right:26px;bottom:15px}body[data-style=lab] .art-tag{display:none}body[data-style=lab] .vertical-note{display:none}body[data-style=lab] .proof-strip{margin-top:38px}body[data-style=lab] .steps{border:0;gap:20px}body[data-style=lab] .steps article{background:#fff;border:0;border-radius:18px;padding:30px}body[data-style=lab] .evidence{border-radius:24px;background:#dbe8d0}
@media(max-width:760px){.design-bar{flex-wrap:wrap;justify-content:center}.design-bar>span,.design-bar>small{display:none}.design-bar nav a{padding:6px 12px}header{height:85px;gap:12px}.brand{font-size:16px}header nav{display:none}.hero,body[data-style=studio] .hero{display:flex;flex-direction:column;min-height:0;gap:0;padding:0 6%}.hero-copy{padding:30px 0 0;width:100%}h1,body[data-style=studio] h1{font-size:40px;letter-spacing:-1px}.intro{font-size:14px}.actions{gap:16px}.primary{padding:14px 16px;gap:20px;font-size:13px}.hero-art{align-self:center;height:340px;width:100%;margin-top:15px}.hero-art img{width:145%;margin-left:-35%}.art-caption{font-size:8px;bottom:10px}.art-tag{top:10px;font-size:10px}.vertical-note{display:none}.proof-strip{flex-wrap:wrap;gap:20px;margin-top:25px}.proof-strip>span{width:44%}.proof-strip>a{width:44%;font-size:11px}.proof-strip>a span{margin-left:10px}.workflow{padding:60px 6%}.section-heading{display:block}.section-heading p{margin-top:24px}h2{font-size:30px}.steps{grid-template-columns:1fr}.steps article,.steps article+article{padding:22px 0;border-left:0;border-bottom:1px solid #cad5c3}.evidence{grid-template-columns:1fr;padding:35px 7%}.case-number{font-size:75px;margin-top:25px}.case-copy h2{font-size:25px}.research{padding:65px 6%}.research h2{font-size:28px}footer{font-size:10px;gap:20px}body[data-style=studio] .hero-art{min-height:320px;height:320px;width:94%;margin:30px 0}body[data-style=studio] .hero-note{display:none}body[data-style=lab] .hero-copy{text-align:left}body[data-style=lab] .hero-copy h1{font-size:38px;line-height:1.35}body[data-style=lab] h1 br{display:block}body[data-style=lab] .actions{justify-content:flex-start}body[data-style=lab] .hero-art{width:100%;height:270px;border-radius:100px 100px 12px 12px}body[data-style=lab] .hero-art img{width:145%;max-width:none;margin-left:-40%;object-fit:cover}.hero{overflow:hidden}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary{transition:none}}