/* An editorial brand story with a moving network of the company's real factories. */
.brandkh{display:block;min-height:0;padding:105px 0 90px;background:radial-gradient(ellipse at 100% 0,#314d5966,transparent 58%),radial-gradient(ellipse at 0 80%,#d4a65c0e,transparent 48%),#101d30;isolation:isolate}
.brandkh::before{width:620px;height:620px;top:-310px;right:-230px;left:auto;border:1px solid #e7c88e12;box-shadow:0 0 0 80px #e7c88e05,0 0 0 160px #e7c88e03;background:none;opacity:1}
.brandkh::after{display:none}.brandkh .bk-float{display:none}
.brandkh .bk-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px 65px;align-items:center}
.brandkh .bk-copy{max-width:none;color:#fff}
.brandkh .detail-eyebrow{color:#c7ad7d;margin-bottom:24px}
.brandkh .bk-tag{color:#e9ce9d;background:#edc87c0a;border-color:#edc87c30;padding:7px 13px;font-size:10px;letter-spacing:.16em}
.brandkh .bk-title{font-size:clamp(44px,5vw,70px);line-height:1.08;letter-spacing:-.045em;max-width:10ch;margin:23px 0;color:#f8f4eb}
html[lang|="zh"] .brandkh .bk-title{max-width:7em}
.brandkh .bk-lead{max-width:46ch;font-size:14px;line-height:1.95;color:#b7c4d4}
.brandkh .bk-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:30px 0;padding:0;isolation:isolate}
.brandkh .bk-steps::before,.brandkh .bk-steps::after{content:'';position:absolute;top:18px;left:15px;right:14%;height:1px;z-index:-1;pointer-events:none;background:#eac78325}
.brandkh .bk-steps::after{background:linear-gradient(90deg,transparent,#f6d994,transparent);background-size:40% 100%;background-repeat:no-repeat;animation:studio-step-flow 5s linear infinite}
.brandkh .bk-steps li{display:flex;align-items:flex-start;flex-direction:column;gap:12px;font-size:11px;line-height:1.65;color:#cbd3df;font-weight:400}
.brandkh .bk-steps b{width:37px;height:37px;border-radius:12px;background:#17273d;color:#f0d29e;border:1px solid #e8c48244;box-shadow:0 0 0 5px #101d30;font-size:12px;animation:studio-step-glow 6s ease-in-out infinite}
.brandkh .bk-steps li:nth-child(2) b{animation-delay:-4s}.brandkh .bk-steps li:nth-child(3) b{animation-delay:-2s}
.brandkh .bk-btns{gap:10px}.brandkh .bk-btns .btn{font-size:11px;padding:17px 21px}
.brandkh .bk-btns .btn-dark{background:#eec77e;color:#17213b;box-shadow:0 12px 35px -20px #eec77e77}
.brandkh .bk-btns .btn-white{background:#ffffff05;border:1px solid #ffffff24;color:#e0e7ee}
.brandkh .bk-btns .btn-white::before{background:#ffffff15}


.brand-studio{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:58px 18px 18px;border:1px solid #ffffff19;border-radius:29px;
  background:radial-gradient(ellipse at 50% 0,#e8d1a118,transparent 55%),linear-gradient(160deg,#22374e,#15233a 70%);box-shadow:inset 0 1px 0 #ffffff0c,0 30px 75px -30px #050b1888}
.brand-studio::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(#a7bbcc1c .7px,transparent .7px) 0 0/19px 19px;mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%)}
.studio-topline{position:absolute;left:22px;right:18px;top:16px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#e3e9f1;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.studio-topline>span{display:flex;align-items:center;gap:8px}.studio-topline>span::before{content:'';width:6px;height:6px;background:#eec77e;border-radius:50%;box-shadow:0 0 12px #eec77e88}
.studio-motion{display:grid;place-items:center;border-radius:50%;width:28px;height:28px;border:1px solid #ffffff24;background:#ffffff06;color:#d1ddeb;font-size:11px;line-height:1}
.studio-motion:hover,.studio-motion:focus-visible{background:#eec77e;color:#17213b;border-color:#eec77e}
.studio-hub{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:92px;height:92px;border-radius:24px;background:linear-gradient(145deg,#fffdf5,#e8e0d1);border:1px solid #fff7;box-shadow:0 15px 35px -15px #020b1b99,0 0 40px -8px #eec77e40}
.studio-hub img{width:54px;height:54px;object-fit:contain}.studio-hub>span{font-size:8px;font-weight:600;letter-spacing:.05em;color:#33415a;margin-top:1px}
.studio-hub-ring{position:absolute;inset:-11px;border:1px dashed #eec77e5c;border-radius:32px;animation:studio-ring 30s linear infinite;pointer-events:none}
.studio-links{display:block;width:calc(100% - 40px);height:42px;margin:6px 0 -2px;overflow:visible;pointer-events:none}
.studio-link-base{stroke:#eec77e3d;stroke-width:1;fill:none;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.studio-link-flow{stroke:#f3d295;stroke-width:2;fill:none;stroke-dasharray:14 190;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:studio-connection 4s linear infinite;filter:drop-shadow(0 0 4px #eec77e88)}
.studio-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.studio-card{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#ffffff0e,#ffffff05);border:1px solid #ffffff1c;color:#fff;
  box-shadow:0 20px 35px -22px #030914cc;animation:studio-float 7s ease-in-out infinite;animation-delay:var(--float-delay);transition:border-color .4s,box-shadow .4s,background .4s}
.studio-stage{position:relative;display:grid;place-items:center;aspect-ratio:1.2;padding:12px 10px 6px;background:radial-gradient(ellipse at 50% 60%,#eec77e26,transparent 65%)}
.studio-stage::after{content:'';position:absolute;left:18%;right:18%;bottom:8px;height:10px;border-radius:50%;background:#02071466;filter:blur(6px)}
.studio-photo{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px #02071470);transition:transform .6s var(--ease)}
.studio-card-caption{display:grid;grid-template-columns:1fr 18px;gap:2px;padding:4px 14px 0}
.studio-card-caption b{font-family:var(--display);font-size:15px;letter-spacing:-.01em;line-height:1.2;color:#fbf3e2}
.studio-card-caption small{grid-column:1;font-size:10px;color:#a9b6c7;line-height:1.5}
.studio-card-caption i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:15px;color:#eec77e;transition:transform .4s}
.studio-stats{display:flex;gap:6px;padding:11px 14px 14px}
.studio-stats span{flex:1;display:grid;padding:6px 8px;border-radius:9px;background:#ffffff08;border:1px solid #ffffff10;font-size:9px;color:#9fb0c4;line-height:1.3}
.studio-stats b{font-family:var(--display);font-size:13px;color:#f2d08f;font-weight:700}
.studio-card:hover,.studio-card:focus-visible{border-color:#eec77e99;background:linear-gradient(180deg,#ffffff16,#ffffff08);box-shadow:0 26px 40px -20px #020917e6,0 0 0 1px #eec77e44;outline:none}
.studio-card:focus-visible{outline:2px solid #eec77e;outline-offset:3px}
.studio-card:hover .studio-photo,.studio-card:focus-visible .studio-photo{transform:scale(1.06) translateY(-3px)}.studio-card:hover i{transform:translate(2px,-2px)}

@keyframes studio-connection{to{stroke-dashoffset:-204}}
@keyframes studio-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes studio-ring{to{rotate:360deg}}
@keyframes studio-step-flow{from{background-position:-70% 0}to{background-position:170% 0}}
@keyframes studio-step-glow{0%,65%,100%{border-color:#e8c48244;box-shadow:0 0 0 5px #101d30}30%{border-color:#efd19b;box-shadow:0 0 0 5px #101d30,0 0 20px -5px #edcb8b66}}
.brandkh .studio-card,.brandkh .studio-link-flow,.brandkh .studio-hub-ring,.brandkh .bk-steps::after,.brandkh .bk-steps b{animation-play-state:paused}
.brandkh[data-studio-motion=playing] .studio-card,.brandkh[data-studio-motion=playing] .studio-link-flow,.brandkh[data-studio-motion=playing] .studio-hub-ring,.brandkh[data-studio-motion=playing] .bk-steps::after,.brandkh[data-studio-motion=playing] .bk-steps b{animation-play-state:running}

@media(max-width:1100px){
  .brandkh{padding-block:80px}.brandkh .bk-grid{gap:45px 30px}.brandkh .bk-title{font-size:52px}.brandkh .bk-lead{font-size:13px}.brandkh .bk-btns .btn{font-size:10px;padding:15px 16px}
  .brand-studio{padding:54px 12px 12px}.studio-cards{gap:8px}.studio-card-caption{padding:4px 10px 0}.studio-card-caption b{font-size:13px}.studio-stats{flex-direction:column;padding:9px 10px 11px;gap:4px}
}
@media(max-width:800px){
  .brandkh .bk-grid{grid-template-columns:1fr;gap:35px}.brandkh .bk-title{max-width:16ch;font-size:56px}.brandkh .bk-lead{max-width:58ch;font-size:14px}.brandkh .bk-steps{max-width:480px}
  .brand-studio{max-width:620px;margin:auto;padding:58px 16px 16px}.studio-stats{flex-direction:row}
}
@media(max-width:640px){
  .brandkh{padding:64px 0}.brandkh .bk-title{font-size:46px;max-width:11ch}.brandkh .bk-lead{font-size:13px}.brandkh .bk-tag{font-size:9px}.brandkh .bk-steps{gap:12px;margin:27px 0}.brandkh .bk-steps li{font-size:10px}.brandkh .bk-btns .btn{flex:1 1 auto;font-size:10px;padding:15px 16px}
  .brand-studio{border-radius:22px;padding:52px 12px 12px}.studio-topline{font-size:9px;left:15px;right:14px;letter-spacing:.06em}.studio-motion{width:26px;height:26px}
  .studio-hub{width:76px;height:76px;border-radius:20px}.studio-hub img{width:44px;height:44px}.studio-links{display:none}
  .studio-cards{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .studio-card{display:grid;grid-template-columns:118px 1fr;grid-template-rows:auto 1fr;align-items:center}
  .studio-stage{grid-row:1/3;aspect-ratio:1.15;padding:8px}.studio-card-caption{padding:12px 12px 0 4px}.studio-stats{padding:8px 12px 12px 4px}
}
@media(prefers-reduced-motion:reduce){.studio-photo{transition:none}.studio-card:hover .studio-photo,.studio-card:focus-visible .studio-photo{transform:none}}