/* Open editorial composition, inspired by product-led brand websites. */
.hero-composition{isolation:isolate;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:auto auto auto auto auto;gap:0 5vw;padding:38px 5vw 26px;background:#edeeeb;color:#202620;align-items:start}
.hero-composition>div:first-child{display:contents}
.hero-composition::before{content:'';position:absolute;pointer-events:none;inset:0;background:radial-gradient(ellipse at 70% 52%,#fff9,transparent 68%);z-index:-1}
.hero-composition::after{display:none}
.hero-composition .eyebrow{grid-column:1/-1;font-size:10px;letter-spacing:.16em;color:#62695f;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.hero-composition .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:#e95132}
.hero-composition h1{grid-column:1/-1;font-size:clamp(48px,5.9vw,86px);font-weight:500;line-height:1.18;letter-spacing:-.055em;margin:0 0 34px;max-width:100%;position:relative;z-index:2}
.hero-composition h1>span:first-child{display:block}.hero-composition h1>span:not(:first-child){display:inline}.hero-composition h1 em{font-style:normal;color:#e24a2c}
.hero-composition p{grid-column:1;grid-row:3;margin:35px 0 0;padding-top:22px;border-top:1px solid #acb3a9;max-width:340px;font-size:14px;line-height:1.95;color:#626b60}
.hero-composition .hero-actions{grid-column:1;grid-row:4;align-self:start;display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin:26px 0 60px}
.hero-composition .button{background:#242e27;color:#fff;border-radius:999px;padding:17px 21px;font-size:13px;gap:24px;transition:background .2s,transform .2s}
.hero-composition .button>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#242e27}.hero-composition .button:hover{background:#e24a2c;transform:translateY(-2px)}
.hero-composition .text-link{color:#394238;border-color:#a8b0a4;font-size:12px}
.hero-composition .visual{grid-column:2;grid-row:3/5;width:100%;position:relative;mix-blend-mode:multiply;margin:-95px 0 0;padding:0}
.hero-products{position:relative;height:440px}
.hero-product{position:absolute;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-origin:50% 85%}
.hero-composition .hero-product img{width:100%;height:100%;object-fit:contain;border:0;border-radius:0;background:none;box-shadow:none;mix-blend-mode:multiply}
.hero-product-secondary{width:56%;height:85%;left:-9%;top:0;transform:rotate(-13deg)}
.hero-product-main{width:76%;height:110%;right:-6%;top:-12%;transform:rotate(10deg)}
.hero-product-secondary:hover{transform:rotate(-8deg) translateY(-9px)}.hero-product-main:hover{transform:rotate(5deg) translateY(-9px)}
.hero-product:focus-visible{outline:2px solid #e24a2c;outline-offset:5px}
.hero-composition .visual-note{border-top:1px solid #b4bbae;padding-top:13px;margin:0;font-size:8px;color:#64705d;letter-spacing:.08em;gap:15px}
.hero-composition .hero-bottom{grid-column:1/-1;grid-row:5;border-top:1px solid #bfc5ba;padding-top:20px;margin-top:22px;color:#64705d;font-size:10px;gap:16px}.hero-composition .hero-bottom b{color:#273023}
html[dir="rtl"] .hero-composition .hero-product-secondary{left:auto;right:-9%}html[dir="rtl"] .hero-composition .hero-product-main{right:auto;left:-6%}
html:not([lang="zh"]) .hero-composition h1{font-size:clamp(44px,5.5vw,76px);max-width:1060px}
@media(min-width:701px) and (max-width:1050px){.hero-composition h1{font-size:58px}.hero-products{height:380px}.hero-composition .visual{margin-top:-50px}.hero-composition p{max-width:310px;font-size:13px}.hero-composition .hero-actions{gap:16px}.hero-composition .button{font-size:12px;padding:14px 17px}}
@media(max-width:700px){.hero-composition{grid-template-columns:1fr;padding-top:30px}.hero-composition .eyebrow{font-size:8px;margin-bottom:20px}.hero-composition h1,html:not([lang="zh"]) .hero-composition h1{font-size:clamp(35px,9.3vw,48px);margin-bottom:20px;line-height:1.22}.hero-composition h1>span{display:block!important}.hero-composition .visual{grid-column:1;grid-row:3;margin:0}.hero-products{height:310px;margin-top:10px}.hero-product-secondary{left:0;width:57%;height:92%;top:0}.hero-product-main{right:-1%;width:74%;height:110%;top:-6%}.hero-composition .visual-note{font-size:7px}.hero-composition p{grid-column:1;grid-row:4;margin-top:25px;border-top:0;padding-top:0;max-width:none;font-size:13px}.hero-composition .hero-actions{grid-column:1;grid-row:5;margin:22px 0 10px;gap:18px}.hero-composition .hero-bottom{grid-row:6;flex-wrap:wrap;font-size:9px;line-height:1.7}.hero-composition .button{padding:13px 16px;font-size:12px;gap:15px}.hero-composition .text-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-product,.hero-composition .button{transition:none}.hero-product:hover,.hero-composition .button:hover{transform:none}}

@media(min-width:701px){.hero-product-secondary{top:7%}}

/* Three distinct materials, with the insulated bag in the foreground. */
.hero-product-secondary{width:50%;height:78%;left:-10%;top:2%;transform:rotate(-12deg);z-index:1}
.hero-product-third{width:49%;height:77%;right:-7%;top:0;transform:rotate(12deg);z-index:1}
.hero-product-main{width:58%;height:98%;right:17%;top:12%;transform:rotate(-2deg);z-index:2}
.hero-product-main:hover{transform:rotate(0deg) translateY(-9px)}.hero-product-third:hover{transform:rotate(7deg) translateY(-9px)}
html[dir="rtl"] .hero-composition .hero-product-secondary{right:-10%;left:auto}html[dir="rtl"] .hero-composition .hero-product-main{left:17%;right:auto}html[dir="rtl"] .hero-composition .hero-product-third{left:-7%;right:auto}
@media(max-width:700px){.hero-products{height:330px}.hero-product-secondary{left:-5%;top:0;width:52%;height:76%}.hero-product-third{right:-5%;top:0;width:51%;height:76%}.hero-product-main{right:18%;top:14%;width:60%;height:92%}}
@media(prefers-reduced-motion:reduce){.hero-product:hover{transform:none}}
.hero-product{mix-blend-mode:multiply}
.hero-product-secondary{left:-5%;width:42%;height:76%;top:5%}
.hero-product-third{right:-1%;width:40%;height:75%;top:3%}
.hero-product-main{right:27%;width:44%;height:90%;top:18%}
html[dir="rtl"] .hero-composition .hero-product-secondary{right:-5%}html[dir="rtl"] .hero-composition .hero-product-main{left:27%}html[dir="rtl"] .hero-composition .hero-product-third{left:-1%}
@media(max-width:700px){.hero-product-secondary{left:-4%;width:43%;height:74%}.hero-product-third{right:-2%;width:42%;height:74%}.hero-product-main{right:26%;width:46%;height:90%;top:16%}}
@media(max-width:700px){.hero-products{height:280px}.hero-product-secondary{left:2%;width:38%;transform:rotate(-8deg)}.hero-product-third{right:2%;width:38%;transform:rotate(8deg)}.hero-product-main{right:28%;width:42%}html[dir="rtl"] .hero-composition .hero-product-secondary{right:2%}html[dir="rtl"] .hero-composition .hero-product-third{left:2%}html[dir="rtl"] .hero-composition .hero-product-main{left:28%}}
/* Soft material light with a tighter, asymmetrical product grouping. */
.hero-composition{background:#f2f1eb;background-image:radial-gradient(ellipse 48% 70% at 83% 67%,#dce5dc 0%,#dce5dc00 83%),radial-gradient(ellipse 58% 80% at 48% 0%,#faf5e9 0%,#faf5e900 82%)}
.hero-composition::before{background:radial-gradient(ellipse 28% 40% at 66% 40%,#fff9,transparent 100%)}
.hero-composition .visual{margin-top:-60px}
.hero-products{height:450px}
.hero-product-secondary{left:-1%;top:0;width:44%;height:83%;transform:rotate(-10deg);z-index:1}
.hero-product-third{right:0;top:3%;width:43%;height:82%;transform:rotate(9deg);z-index:1}
.hero-product-main{right:26%;top:13%;width:48%;height:96%;transform:rotate(-3deg);z-index:2}
html[dir="rtl"] .hero-composition .hero-product-secondary{right:-1%;left:auto}html[dir="rtl"] .hero-composition .hero-product-third{left:0;right:auto}html[dir="rtl"] .hero-composition .hero-product-main{left:26%;right:auto}
@media(min-width:701px) and (max-width:1050px){.hero-products{height:390px}.hero-composition .visual{margin-top:-30px}}
@media(max-width:700px){.hero-composition .visual{margin-top:0}.hero-products{height:290px;margin-top:0}.hero-product-secondary{left:2%;top:0;width:40%;height:80%;transform:rotate(-7deg)}.hero-product-third{right:2%;top:2%;width:39%;height:79%;transform:rotate(7deg)}.hero-product-main{right:26%;top:12%;width:48%;height:96%}html[dir="rtl"] .hero-composition .hero-product-secondary{right:2%}html[dir="rtl"] .hero-composition .hero-product-third{left:2%}}
.hero-composition{background-image:radial-gradient(ellipse 52% 80% at 91% 75%,#d1dfd3 0%,#d1dfd300 80%),radial-gradient(ellipse 48% 70% at 4% 98%,#eee0d1 0%,#eee0d100 85%),radial-gradient(ellipse 58% 80% at 48% 0%,#fcf6e6 0%,#fcf6e600 82%)}
/* Asymmetric product constellation: large insulated centre, upper-right canvas. */
@media(min-width:701px){
.hero-composition .visual{margin-top:-155px}
.hero-products{height:545px}
.hero-product-main{width:64%;height:99%;right:20%;top:5%;transform:rotate(-5deg);z-index:3}
.hero-product-third{width:38%;height:66%;right:-1%;top:-5%;transform:rotate(13deg);z-index:1}
.hero-product-secondary{width:38%;height:65%;left:-5%;top:34%;transform:rotate(-14deg);z-index:2}
html[dir="rtl"] .hero-composition .hero-product-main{left:20%;right:auto}
html[dir="rtl"] .hero-composition .hero-product-third{left:-1%;right:auto}
html[dir="rtl"] .hero-composition .hero-product-secondary{right:-5%;left:auto}
}
@media(min-width:701px) and (max-width:1050px){.hero-composition .visual{margin-top:-100px}.hero-products{height:465px}.hero-product-main{width:61%;right:20%}.hero-product-secondary{left:-3%;width:37%}.hero-product-third{right:0;width:37%}}
@media(max-width:700px){.hero-products{height:320px}.hero-product-main{width:60%;height:100%;right:21%;top:4%;transform:rotate(-4deg);z-index:3}.hero-product-third{width:34%;height:64%;right:2%;top:0;transform:rotate(11deg)}.hero-product-secondary{width:34%;height:64%;left:2%;top:32%;transform:rotate(-11deg)}html[dir="rtl"] .hero-composition .hero-product-main{left:21%;right:auto}}

/* Coordinated stage: calm at rest, responsive as one composition. */
.hero-composition{background:#f3f3ee;background-image:radial-gradient(ellipse 68% 90% at 90% 70%,#e4eae1 0%,#e4eae100 82%),radial-gradient(ellipse 70% 80% at 20% 0%,#f8f4e9 0%,#f8f4e900 85%)}
.hero-composition::before{background:none}
.hero-products{--mx:0;--my:0;perspective:1100px}
.hero-product{translate:calc(var(--mx)*7px) calc(var(--my)*5px);transition:translate .55s cubic-bezier(.22,.7,.2,1),transform .55s cubic-bezier(.22,.7,.2,1),filter .4s;will-change:auto}
.hero-product-main{translate:calc(var(--mx)*16px) calc(var(--my)*10px)}
.hero-product-third{translate:calc(var(--mx)*5px) calc(var(--my)*4px)}
.hero-composition .hero-product img{animation:muyao-stage-arrive .9s cubic-bezier(.16,1,.3,1) both}
.hero-composition .hero-product-secondary img{animation-delay:.08s}.hero-composition .hero-product-main img{animation-delay:.16s}.hero-composition .hero-product-third img{animation-delay:.24s}
@keyframes muyao-stage-arrive{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(hover:hover) and (pointer:fine){
.hero-product-main:hover,.hero-product-main:focus-visible{transform:rotate(-1deg) scale(1.055);z-index:5}
.hero-product-secondary:hover,.hero-product-secondary:focus-visible{transform:rotate(-7deg) scale(1.065);z-index:5}
.hero-product-third:hover,.hero-product-third:focus-visible{transform:rotate(6deg) scale(1.065);z-index:5}
.hero-products:has(.hero-product:hover) .hero-product:not(:hover){filter:saturate(.85)}
}
@media(min-width:1051px){.hero-product-third{right:0;top:-7%;width:40%}.hero-product-secondary{left:-3%;top:32%;width:40%}.hero-product-main{right:20%;top:7%;width:64%}}
@media(max-width:700px){.hero-product{translate:none}.hero-composition .hero-product img{animation-duration:.65s}}
@media(prefers-reduced-motion:reduce){.hero-product,.hero-product-main,.hero-product-third{translate:none;transition:none}.hero-composition .hero-product img{animation:none}.hero-product:hover{transform:none}}
/* White product stage: composed, upright, with a shared visual baseline. */
.hero-composition{background:#fff;background-image:radial-gradient(ellipse 40% 52% at 81% 63%,#eef2ee 0%,#eef2ee00 82%),radial-gradient(ellipse 32% 44% at 52% 17%,#fbf6ed 0%,#fbf6ed00 85%)}
.hero-composition::before{display:none}
.hero-products::before{content:'';position:absolute;left:7%;right:1%;bottom:10%;height:12%;background:radial-gradient(ellipse,#31423612,transparent 68%);pointer-events:none}
@media(min-width:701px){.hero-composition .visual{margin-top:-120px}.hero-products{height:515px}.hero-product-main{width:60%;height:98%;right:21%;top:7%;transform:rotate(0deg);z-index:3}.hero-product-secondary{width:42%;height:76%;left:-3%;top:19%;transform:rotate(-5deg);z-index:1}.hero-product-third{width:40%;height:77%;right:-1%;top:15%;transform:rotate(5deg);z-index:1}html[dir="rtl"] .hero-composition .hero-product-main{left:21%;right:auto}html[dir="rtl"] .hero-composition .hero-product-secondary{right:-3%;left:auto}html[dir="rtl"] .hero-composition .hero-product-third{left:-1%;right:auto}}
@media(min-width:701px) and (max-width:1050px){.hero-composition .visual{margin-top:-65px}.hero-products{height:440px}}
@media(max-width:700px){.hero-products{height:300px}.hero-product-main{width:56%;height:99%;right:22%;top:3%;transform:rotate(0deg)}.hero-product-secondary{width:39%;height:77%;left:1%;top:14%;transform:rotate(-4deg)}.hero-product-third{width:37%;height:77%;right:1%;top:12%;transform:rotate(4deg)}html[dir="rtl"] .hero-composition .hero-product-main{left:22%;right:auto}html[dir="rtl"] .hero-composition .hero-product-secondary{right:1%;left:auto}html[dir="rtl"] .hero-composition .hero-product-third{left:1%;right:auto}}
@media(hover:hover) and (pointer:fine){.hero-product-main:hover,.hero-product-main:focus-visible{transform:translateY(-7px) scale(1.035)}.hero-product-secondary:hover,.hero-product-secondary:focus-visible{transform:rotate(-2deg) translateY(-6px) scale(1.035)}.hero-product-third:hover,.hero-product-third:focus-visible{transform:rotate(2deg) translateY(-6px) scale(1.035)}}

.hero-composition .hero-product{cursor:default}