.design-sample{padding-top:38px}
.study-toolbar{position:fixed;left:0;right:0;top:0;height:38px;z-index:120;background:#f1f5fa;border-bottom:1px solid #d6e1ed;display:flex;align-items:center;justify-content:center;gap:27px;font-size:11px;color:#536e8f}
.study-toolbar>span{font-weight:600;color:#193d67}.study-toolbar nav{display:flex;gap:6px}.study-toolbar nav a{padding:1px 12px;border-radius:4px}.study-toolbar a[aria-current]{color:#fff;background:#1d588f}
.design-sample .site-header{top:38px}
.design-sample .hero{background:linear-gradient(110deg,#f3f8ff,#fff 42%,#e8f3ff);overflow:hidden}
.design-sample .hero-inner{grid-template-columns:1fr 1.12fr;gap:8px;min-height:515px;padding-block:31px}
.design-sample .hero-copy{z-index:4}.design-sample .hero h1{font-size:clamp(28px,2.65vw,38px)}
.study-hero{position:relative;right:auto;top:auto;aspect-ratio:1672/941;width:calc(100% + 52px);margin-left:-12px;height:auto;pointer-events:auto;isolation:isolate}
.study-hero:after{content:"";display:block;position:absolute;inset:0;background:linear-gradient(90deg,#f8fbff 0%,transparent 3%),linear-gradient(0deg,#f3f8ff,transparent 9%);z-index:2;pointer-events:none}
.study-hero-image{width:100%;height:100%;object-fit:fill;display:block;mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(0deg,transparent,#000 5%,#000 99%,transparent);mask-composite:intersect}
.glass-label{position:absolute;z-index:3;color:#11345f;line-height:1.35;pointer-events:none;width:20%;padding:0;transform-origin:0 0;transform:skewY(var(--glass-angle));--glass-angle:0deg}
.glass-label strong{display:block;font-size:clamp(10px,1.1vw,16px);font-weight:650;line-height:1.15;white-space:nowrap;text-shadow:0 1px 2px #fff}
.glass-label small{display:block;font-size:clamp(5px,.55vw,8px);font-family:Arial,sans-serif;color:#426790;line-height:1;margin-top:1px;white-space:nowrap}
/* Match each title band's bottom edge in the accepted 1672×941 glass bitmap.
   Skew preserves upright vertical stems while the text baseline follows the plane. */
.glass-strategy{left:6.5%;top:4.5%;--glass-angle:13.13deg}
.glass-capital{left:69.5%;top:14.5%;--glass-angle:-13.47deg}
.glass-talent{left:6.5%;top:52%;--glass-angle:2.10deg}
.glass-digital{left:72%;top:54.2%;--glass-angle:-2.69deg}
.study-photons{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;stroke:none}
.study-hero .motion-toggle{bottom:-4px;right:6%;font-size:9px}
.design-sample .process-track{display:flex;align-items:center;gap:0;justify-content:space-between;margin-bottom:27px}
.design-sample .process-track button{flex:0 1 178px;width:178px;min-width:0;min-height:86px;max-width:178px;padding:12px 10px;gap:12px;transform:none}
.design-sample .process-track button>span:last-child{min-width:0}
.design-sample .process-track button strong{font-size:14px;white-space:nowrap}.design-sample .process-track button small{font-size:11px}
.design-sample .process-track .node-icon{width:46px;height:46px;outline-width:3px}
.design-sample .process-track .node-icon svg{width:24px;height:24px}
.design-sample .process-track button:after{display:none!important}
.design-sample .process-track button[aria-selected=true]:before{left:calc(50% - 9px);bottom:-27px;border-width:0 9px 9px;border-bottom-color:#1c5a95}
.process-connector{display:flex;align-items:center;justify-content:center;position:relative;flex:1;min-width:18px;max-width:110px;margin-inline:8px;height:24px;color:#4a8ac7;pointer-events:none}
.process-connector i{display:block;width:100%;height:2px;background:linear-gradient(90deg,transparent,#a5c6e7 35%,#4286c7)}
.process-connector:before{content:"";position:absolute;left:0;right:55%;top:11px;height:2px;background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 8px)}
.process-connector b{font-size:25px;font-weight:400;line-height:1;margin-left:-3px;margin-top:-2px}
.design-sample .process-panel{grid-template-columns:54% 46%;min-height:355px}
.design-sample .process-scene{background:#102f53;min-height:355px;isolation:isolate}
.scene-media{position:absolute;inset:0 0 0 24%;overflow:hidden;z-index:0}
.scene-media #process-image{position:relative;width:100%;height:100%;object-fit:cover;object-position:61% center;max-width:none;opacity:1}
.design-sample .process-scene:after{background:linear-gradient(90deg,#082541 0%,#0c2d4d 26%,#103250eb 38%,#14385865 49%,transparent 61%);z-index:1}
.design-sample .scene-content{padding:31px 28px;min-height:355px;z-index:2;pointer-events:none}
.design-sample .scene-title{width:45%;gap:12px;align-items:flex-start}
.design-sample .scene-title>span{font-size:45px;line-height:1.1;color:#8db5e09e}
.design-sample .scene-title h3{font-size:22px;line-height:1.45;white-space:nowrap}
.design-sample .scene-title small{font-size:8px;letter-spacing:1px;white-space:normal;max-width:160px;line-height:1.65;margin-bottom:4px}
.design-sample .scene-content>p{width:43%;max-width:300px;font-size:13px;line-height:1.95;margin-top:22px;color:#edf5ff}
.design-sample .scene-caption{font-size:8px;letter-spacing:1.3px}
.design-sample .process-groups{padding:26px 23px}
.design-sample .process-groups>section:first-child{padding-right:18px}.design-sample .process-groups>section{padding-left:18px}
.design-sample .process-groups h4{font-size:14px;min-height:56px}.design-sample .process-groups li{font-size:12px;min-height:3.7em;line-height:1.85;margin-bottom:11px}
.design-sample .industry-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 24px;padding:0;border:0;background:transparent;box-shadow:none;max-width:1120px;margin:30px auto 0}
.design-sample .industry-item{border:1px solid #dce5f0;border-radius:11px;padding:10px 10px 20px;background:#fff;transition:transform .25s,box-shadow .25s,background .25s;overflow:hidden}
.design-sample .industry-item:after{display:none!important}
.design-sample .industry-photo{width:100%;aspect-ratio:1.5;margin-bottom:13px;border-radius:7px;box-shadow:none}
.design-sample .industry-photo-6{background-image:url(assets/catering-calm-v3.png);background-position:center;background-size:cover}
.design-sample .industry-item strong{font-size:17px;line-height:1.6;letter-spacing:.5px}
.design-sample .industry-item small{font-size:12px;margin-top:3px;color:#66809e}
.design-sample .case-hint{font-size:11px;margin-top:10px}
.design-sample .industry-item:hover,.design-sample .industry-item[aria-expanded=true]{background:#f0f6ff;box-shadow:0 12px 25px #16416a0f;transform:translateY(-3px)}
.design-sample .industry-section .discreet-note{max-width:1120px;margin:22px auto 0}
/* B deliberately explores a wider illustration and a more compact card body. */
.sample-b .process-panel{display:block}
.sample-b .process-scene,.sample-b .scene-content{min-height:320px}
.sample-b .scene-media{left:20%}.sample-b .scene-media #process-image{object-fit:cover;object-position:center 54%}
.sample-b .process-scene:after{background:linear-gradient(90deg,#0a2948 0%,#0d2e50 24%,#103657d9 34%,#153d6440 45%,transparent 56%)}
.sample-b .scene-content{padding:39px}.sample-b .scene-title{width:30%}.sample-b .scene-title>span{font-size:52px}.sample-b .scene-title h3{font-size:26px}
.sample-b .scene-content>p{width:29%;max-width:340px;font-size:14px}
.sample-b .process-groups{padding:27px 39px;gap:38px}.sample-b .process-groups>section{padding:0!important;border:0}.sample-b .process-groups h4{min-height:0;padding-bottom:13px;font-size:15px}
.sample-b .process-groups ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:16px}.sample-b .process-groups li{min-height:3.7em;margin:0;font-size:12px}
.sample-b .industry-item{display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto auto auto;column-gap:17px;align-content:center;align-items:center;text-align:left;padding:14px;min-height:154px}
.sample-b .industry-photo{grid-row:1/4;aspect-ratio:1;align-self:stretch;margin:0;background-size:450% 300%;min-height:118px}
.sample-b .industry-photo-6{background-size:cover}.sample-b .industry-item strong{font-size:16px;align-self:end;line-height:1.7}.sample-b .industry-item small{font-size:11px;margin:0}.sample-b .case-hint{font-size:10px;margin-top:3px;align-self:start}
/* C follows the original site's row-label rhythm without introducing new case claims. */
.sample-c .industry-grid{column-gap:24px;row-gap:32px;padding-left:103px;position:relative;max-width:1220px}
.sample-c .industry-item{overflow:visible;padding:0 0 17px;border-color:transparent;border-bottom-color:#d8e5f2;border-radius:7px 7px 0 0}
.sample-c .industry-photo{aspect-ratio:1.6;border-radius:8px}
.sample-c .industry-item:nth-child(3n + 1):before{position:absolute;left:-103px;top:2px;font-size:15px;line-height:1.8;color:#24466e;font-weight:600;border-top:2px solid #468fd4;padding-top:13px;width:77px;white-space:pre-line;text-align:left}
.sample-c .industry-item:nth-child(1):before{content:"研发与制造\A RESEARCH"}.sample-c .industry-item:nth-child(4):before{content:"科技与消费\A BUSINESS"}.sample-c .industry-item:nth-child(7):before{content:"服务与运营\A OPERATIONS"}
.sample-c .process-scene:after{background:linear-gradient(90deg,#0a2948 0%,#113453 25%,#153d5de6 36%,#173f5b3b 49%,transparent 58%)}
@media(min-width:1800px){.design-sample .hero-inner{min-height:560px}.design-sample .container{width:min(1380px,calc(100% - 160px))}.design-sample .section{padding-block:60px}.design-sample .process-track button{max-width:180px}.process-connector{max-width:140px}}
@media(max-width:1200px) and (min-width:761px){
 .design-sample .hero-inner{min-height:470px;grid-template-columns:1fr 1fr;gap:0}.design-sample .hero h1{font-size:28px}.study-hero{width:calc(100% + 30px);margin-left:-5px}
 .design-sample .process-track button{width:135px;max-width:135px;min-height:108px;flex-direction:column;gap:8px;padding:10px 4px}.design-sample .process-track button strong{font-size:12px}.design-sample .process-track button small{display:none}
 .process-connector{margin-inline:5px;min-width:15px}.design-sample .process-panel{display:block}.design-sample .process-scene,.design-sample .scene-content{min-height:340px}.design-sample .process-groups{padding:26px 30px}
 .design-sample .process-groups li{font-size:13px;min-height:3.7em}.design-sample .process-groups h4{font-size:15px;min-height:56px}.design-sample .scene-content>p{font-size:14px;width:41%}.design-sample .scene-title h3{font-size:25px}
 .design-sample .industry-grid{gap:21px 20px}.design-sample .industry-item strong{font-size:15px}.design-sample .industry-item small{font-size:11px}.sample-b .industry-item{grid-template-columns:1fr;text-align:center;padding:10px 10px 18px;min-height:0}.sample-b .industry-photo{grid-row:auto;aspect-ratio:1.5;min-height:0;background-size:300% 300%;margin-bottom:11px}.sample-b .industry-photo-6{background-size:cover}
 .sample-b .scene-content>p{width:33%;font-size:13px}.sample-c .industry-grid{padding-left:82px}.sample-c .industry-item:nth-child(3n + 1):before{left:-82px;width:65px;font-size:12px}
}
@media(min-width:761px) and (max-width:1000px){.design-sample .hero-inner{display:block;padding-block:35px}.study-hero{width:100%;max-width:760px;margin:25px auto 0}.glass-label strong{font-size:16px}.glass-label small{font-size:7px}}
@media(max-width:760px){
 .study-toolbar{gap:13px;font-size:9px;padding-inline:10px}.study-toolbar>span{display:none}.study-toolbar nav a{padding-inline:9px}
 .design-sample .hero-inner{display:block;padding-top:32px;padding-bottom:24px;min-height:0}.design-sample .hero h1{font-size:clamp(25px,5.6vw,37px)}
 .study-hero{aspect-ratio:1672/941;width:calc(100% + 30px);margin:18px -15px 10px}
 .glass-label strong{font-size:clamp(10px,3vw,16px)}.glass-label small{display:none}.study-hero .motion-toggle{bottom:-6px}
 .design-sample .process-track{margin-bottom:20px;gap:0}.design-sample .process-track button{flex-direction:column;max-width:68px;width:auto;min-height:99px;gap:9px;padding:10px 3px 8px}
 .design-sample .process-track .node-icon{height:38px;width:38px;outline-width:2px}.design-sample .process-track .node-icon svg{width:21px;height:21px}
 .design-sample .process-track button strong{font-size:9px;white-space:normal;line-height:1.6;min-height:30px}.design-sample .process-track button>span:last-child{gap:0;min-height:30px}.design-sample .process-track button small{display:none}
 .process-connector{min-width:7px;margin-inline:2px;height:18px;align-self:flex-start;margin-top:25px}.process-connector b{font-size:18px}.process-connector:before{top:8px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px)}
 .design-sample .process-track button[aria-selected=true]:before{bottom:-20px;border-width:0 7px 8px;left:calc(50% - 7px)}
 .design-sample .process-panel{display:block}.design-sample .process-scene{display:flex;flex-direction:column;min-height:0}.scene-media,.sample-b .scene-media{position:relative;inset:auto;width:100%;aspect-ratio:1.78;order:0}
 .scene-media #process-image{width:100%;height:100%;object-fit:cover;object-position:center}.design-sample .process-scene:after{display:none}
 .design-sample .scene-content,.sample-b .scene-content{min-height:225px;padding:23px 24px;background:linear-gradient(120deg,#0b2948,#164b78);order:1}
 .design-sample .scene-title,.sample-b .scene-title{width:100%;align-items:center;gap:14px}.design-sample .scene-title>span,.sample-b .scene-title>span{font-size:42px}.design-sample .scene-title h3,.sample-b .scene-title h3{font-size:22px}.design-sample .scene-title small{font-size:8px;max-width:none;white-space:normal}
 .design-sample .scene-content>p,.sample-b .scene-content>p{width:100%;max-width:none;font-size:12px;line-height:1.9;margin-top:16px}.design-sample .scene-caption{padding-top:15px}
 .design-sample .process-groups{padding:23px 17px;gap:0}.design-sample .process-groups h4{font-size:12px;min-height:57px}.design-sample .process-groups li{font-size:11px;min-height:5.55em;margin-bottom:8px}
 .sample-b .process-groups>section:first-child{padding-right:13px!important;border-right:1px solid #e2edfc}.sample-b .process-groups>section:last-child{padding-left:13px!important}.sample-b .process-groups ul{display:block;margin-top:19px}.sample-b .process-groups li{margin-bottom:8px}
 .design-sample .industry-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin-top:23px;padding-left:0}.design-sample .industry-item{padding:7px 7px 15px}.design-sample .industry-photo{margin-bottom:10px;aspect-ratio:1.5}.design-sample .industry-item strong{font-size:13px}.design-sample .industry-item small{font-size:10px;line-height:1.8}.design-sample .case-hint{font-size:10px;margin-top:7px}
 .sample-b .industry-item{display:flex;text-align:center;min-height:0}.sample-b .industry-photo{background-size:300% 300%;min-height:0;width:100%}.sample-b .industry-photo-6{background-size:cover}
 .sample-c .industry-item:nth-child(3n + 1):before{display:none}.sample-c .industry-item{padding:0 0 14px}.sample-c .industry-grid{column-gap:14px;row-gap:22px}
}
@media(max-width:360px){.design-sample .hero h1{font-size:24px}.glass-label strong{font-size:10px}.glass-digital{top:54.8%}.design-sample .process-track button strong{font-size:8px}.design-sample .process-track .node-icon{width:33px;height:33px}.process-connector{margin-inline:1px;min-width:5px}.design-sample .process-groups{padding-inline:12px}.design-sample .process-groups li{font-size:10px}}

/* v7: keep the accepted artwork intact; give the copy first visual priority.
   Center the intrinsic grid row, then align both columns to its top. */
@media(min-width:1001px){
 .design-sample .hero-inner{align-content:center;align-items:start}
 .study-hero{width:92%;margin-left:auto;margin-top:0}
}