*{box-sizing:border-box}html{scroll-padding-top:76px}body{margin:0;background:#f6f5f3;color:#28262c;font-family:Arial,"Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #746780;outline-offset:6px}header{height:76px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#f6f5f3d9;backdrop-filter:blur(20px);position:fixed;inset:0 0 auto;z-index:20;border-bottom:1px solid #24202b0c}.brand{font-size:23px;letter-spacing:-1px}.brand b{font-weight:400;color:#88818f}.brand span{display:inline-block;font-size:8px;letter-spacing:2px;margin-left:20px;color:#8e8894}nav{display:flex;gap:38px;font-size:12px}.pill{font-size:12px;border:1px solid #d4d0d7;border-radius:30px;padding:11px 21px}.progress{position:fixed;left:0;top:75px;height:2px;background:#93869e;transform-origin:left;width:100%;transform:scaleX(0);z-index:30}section{position:relative;min-height:100svh;overflow:hidden;scroll-margin-top:0}.hero{height: max(800px,100svh);background:radial-gradient(ellipse at 50% 60%,#e3deeb,transparent 58%),#f6f5f3;text-align:center;padding-top:125px}.eyebrow{font-size:10px!important;letter-spacing:3px;line-height:1.5!important;color:#89828e;margin-bottom:26px!important}h1{font-size:clamp(48px,5.4vw,86px);letter-spacing:-4px;margin:12px 0;font-weight:500}h2{font-size:clamp(38px,4.3vw,70px);letter-spacing:-2.5px;line-height:1.24;font-weight:500;margin:0 0 28px}.intro{color:#807985;font-size:15px;letter-spacing:3px}.hero-word{position:absolute;top:43%;width:100%;font-size:17.5vw;letter-spacing:-1.2vw;color:#d5cfe0;font-weight:600;white-space:nowrap}.hero-product{position:absolute;top:29%;left:25%;width:50%;height:63%;object-fit:contain;filter:drop-shadow(0 30px 26px #655a7920);will-change:transform}.hero-bottom{position:absolute;bottom:30px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;color:#79717e}.hero-bottom a span{padding-left:22px}.feature,.structure,.sound{display:grid;grid-template-columns:45% 55%;align-items:center;padding:100px 8%;gap:1%}.copy{z-index:2}.copy>p:not(.eyebrow){font-size:15px;color:#8b8490;line-height:2}.visual{height:75vh;display:flex;align-items:center;justify-content:center}.visual img{width:115%;height:100%;object-fit:contain;will-change:transform}.section-note{position:absolute;bottom:35px;left:8%;font-size:9px;color:#99919f;letter-spacing:2px}.form{background:#efedf1}.canopy{background:#e5e1ea;grid-template-columns:55% 45%}.canopy .copy{grid-column:2;grid-row:1;padding-left:15%}.canopy .visual{grid-column:1;grid-row:1;transform:translateX(-12%)}.cushion{background:#f4f2f0}.control{background:#e5e2eb}.control .visual img{width:135%;max-width:none}.sound{background:radial-gradient(ellipse at 70% 50%,#413c50,#24222c 70%);color:#eeeaf4}.sound h2{font-size:clamp(36px,4vw,64px)}small{font-size:10px;color:#908896;line-height:1.7}.orbit{position:relative;height:75vh}.orbit svg{position:absolute;width:125%;height:100%;left:-10%;color:#9b8ca8;opacity:.35}.orbit img{position:absolute;width:90%;height:90%;left:8%;top:5%;object-fit:contain}.structure{background:#f0edf3}.exploded{width:115%;pointer-events:none}.colors{text-align:center;padding:110px 5% 60px;background:radial-gradient(ellipse at center,#e3deeb,transparent 60%),#f8f7f5}.colors h2{font-size:clamp(32px,4vw,60px)}.color-stage{height:52vh}.color-stage img{width:100%;height:100%;object-fit:contain;transition:opacity .2s,transform .5s}.swatches{display:flex;justify-content:center;gap:18px;margin:18px 0}.swatches button{height:25px;width:25px;border:4px solid #f7f5f7;border-radius:50%;background:var(--swatch);cursor:pointer;box-shadow:0 0 0 1px transparent}.swatches button[aria-pressed=true]{box-shadow:0 0 0 1px #807487}#color-name{font-size:12px}.gallery{padding:120px 6%;background:#eeecef}.gallery-title{text-align:center;margin-bottom:65px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}figure{margin:0;background:#e5e1e9;overflow:hidden}figure img{width:100%;height:45vh;object-fit:cover;transition:transform .8s}figure:hover img{transform:scale(1.07)}figcaption{padding:25px;font-size:11px;letter-spacing:2px;color:#797180}.closing{text-align:center;padding:120px 5% 60px;background:radial-gradient(ellipse at center,#ded7e9,transparent 60%)}.closing img{display:block;height:48vh;width:100%;object-fit:contain;margin:0 auto 30px}.dark-button{display:inline-block;background:#302b36;color:white;padding:16px 30px;border-radius:30px;font-size:12px}.back{display:block;margin-top:25px;font-size:11px;color:#89818e}footer{padding:35px 5%;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dedbe2}footer p,footer>span{font-size:10px;color:#918996}.js .reveal{opacity:0;transform:translateY(35px);transition:opacity 1s,transform 1s}.js .reveal.visible{opacity:1;transform:none}@media(max-width:700px){header{height:64px}.progress{top:63px}.brand{font-size:20px}.brand span,nav{display:none}.hero{height:100svh;min-height:680px;padding-top:135px}.hero-word{top:49%;font-size:19vw}.hero-product{left:5%;width:90%;top:32%;height:57%}.hero-bottom>span:first-child{display:none}.feature,.structure,.sound{display:flex;flex-direction:column;padding:100px 7% 65px;gap:25px;justify-content:center}.copy{width:100%}h2{letter-spacing:-1px}.visual{width:100%;height:48vh}.visual img{width:100%}.canopy .copy{padding:0}.canopy .visual{transform:none}.control .visual img{width:110%}.orbit{width:100%;height:50vh}.exploded{width:110%;height:45vh}.colors{padding-top:100px}.gallery{padding:100px 6% 60px}.gallery-grid{grid-template-columns:1fr;gap:20px}figure img{height:40vh;object-fit:contain}.closing h2{font-size:34px}footer{gap:20px;flex-wrap:wrap}footer>span{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}}

/* Product-first composition: larger renders, quieter supporting typography. */
@media(min-width:701px){
 .hero{min-height:820px;height:100svh;text-align:left;padding:0}
 .hero-copy{position:absolute;left:7%;top:35%;z-index:3;max-width:38%}
 .hero-copy h1{font-size:clamp(48px,5.2vw,82px)}
 .hero-copy .eyebrow{letter-spacing:2px;font-size:9px!important}
 .hero-copy .intro{font-size:14px;letter-spacing:2px}
 .hero-product{left:30%;top:7%;width:76%;height:91%;object-position:center}
 .hero-word{top:auto;bottom:8%;left:4%;width:92%;font-size:16vw;opacity:.55}
 .hero-bottom{z-index:4}
 .feature,.structure,.sound{grid-template-columns:36% 64%;padding:80px 6%;gap:0}
 .visual{height:88vh;min-height:650px}
 .visual img{width:135%;height:115%;max-width:none;flex-shrink:0}
 .canopy{grid-template-columns:64% 36%}
 .canopy .copy{padding-left:0}
 .canopy .visual{transform:translateX(-9%)}
 .canopy .visual img{width:125%;height:110%}
 .control .visual img{width:145%;height:120%}
 .orbit{height:90vh}
 .orbit img{width:116%;height:108%;left:-7%;top:-4%}
 .colors{padding-top:100px}
 .color-stage{height:72vh;min-height:580px}
 .closing img{height:70vh;min-height:550px}
 .gallery-grid{grid-template-columns:1fr 1fr}
 .gallery-grid figure:last-child{grid-column:1 / -1}
 .gallery-grid figure:last-child img{height:75vh;object-fit:contain}
 figure img{height:60vh}
}
@media(max-width:700px){
 .hero{min-height:800px;padding-top:105px}
 .hero-copy{position:relative;z-index:3}
 .hero-copy h1{font-size:48px}
 .hero-copy .eyebrow{margin-bottom:18px!important;font-size:9px!important}
 .hero-product{left:-15%;width:130%;top:30%;height:65%}
 .hero-word{top:54%;left:-3%;width:106%;font-size:21vw}
 .visual{height:62vh;min-height:420px}
 .visual img{width:125%;height:110%;max-width:none;flex-shrink:0}
 .control .visual img{width:140%}
 .orbit{height:65vh}
 .orbit img{width:120%;left:-10%;height:100%;top:0}
 .color-stage{height:62vh;min-height:420px;margin:0 -16%}
 .closing img{height:62vh;width:125%;max-width:none;margin-left:-12.5%}
}
/* Motion direction: cinematic entrance, staggered details, scroll-linked movement. */
@keyframes product-arrive{from{opacity:0;translate:8% 14%;rotate:-17deg;scale:1.2;filter:blur(12px) drop-shadow(0 30px 26px #655a7920)}to{opacity:1;translate:0 0;rotate:0deg;scale:1;filter:blur(0) drop-shadow(0 30px 26px #655a7920)}}
@keyframes title-arrive{from{opacity:0;translate:0 38px;filter:blur(7px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes word-arrive{from{opacity:0;translate:0 50px;letter-spacing:0}to{opacity:.55;translate:0 0;letter-spacing:-1.2vw}}
@keyframes detail-arrive{from{opacity:0;translate:65px 55px;rotate:7deg;scale:.88}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@keyframes orbit-breathe{0%,100%{scale:.92;opacity:.25}50%{scale:1.08;opacity:.65}}
@keyframes orbit-turn{from{rotate:-12deg}to{rotate:12deg}}
@keyframes cue{0%,100%{translate:0 -3px;opacity:.45}50%{translate:0 5px;opacity:1}}
@keyframes tone-arrive{from{opacity:.2;translate:24px 0;rotate:4deg;scale:.95}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
@media(prefers-reduced-motion:no-preference){
 .motion-ready .hero-product{animation:product-arrive 1.9s cubic-bezier(.16,1,.3,1) both}
 .motion-ready .hero-word{animation:word-arrive 1.7s cubic-bezier(.16,1,.3,1) both}
 .motion-ready .hero-copy>*{animation:title-arrive 1.1s cubic-bezier(.16,1,.3,1) both}
 .motion-ready .hero-copy .eyebrow{animation-delay:.25s}
 .motion-ready .hero-copy h1{animation-delay:.5s}
 .motion-ready .hero-copy .intro{animation-delay:.75s}
 .motion-ready .hero-bottom{animation:title-arrive 1s .95s both}
 .hero-bottom a span{display:inline-block;animation:cue 2s infinite}
 .motion-ready section:not(.hero) .visual img,.motion-ready .exploded,.motion-ready .orbit img,.motion-ready .closing>img{opacity:0}
 .motion-ready section.in-view .visual img,.motion-ready .in-view .exploded,.motion-ready .in-view .orbit img,.motion-ready .closing.in-view>img{animation:detail-arrive 1.5s cubic-bezier(.16,1,.3,1) both}
 .motion-ready .reveal{opacity:1;transform:none;transition:none}
 .motion-ready .reveal>*{opacity:0;translate:0 30px;transition:opacity .9s,translate 1.1s cubic-bezier(.16,1,.3,1)}
 .motion-ready .reveal.visible>*{opacity:1;translate:0 0}
 .motion-ready .reveal.visible>:nth-child(2){transition-delay:.12s}
 .motion-ready .reveal.visible>:nth-child(3){transition-delay:.24s}
 .motion-ready .reveal.visible>:nth-child(4){transition-delay:.36s}
 .orbit svg{animation:orbit-turn 12s ease-in-out infinite alternate;animation-play-state:paused}
 .orbit svg ellipse,.orbit svg circle{transform-origin:center;animation:orbit-breathe 5s ease-in-out infinite;animation-play-state:paused}
 .orbit svg ellipse:nth-child(2){animation-delay:-1.4s}
 .orbit svg circle{animation-delay:-2.8s}
 .orbit svg ellipse:last-child{animation-delay:-4s}
 .sound.active .orbit svg,.sound.active .orbit svg *{animation-play-state:running}
 .motion-ready .gallery figure{opacity:0;translate:0 65px;transition:opacity 1s,translate 1.2s cubic-bezier(.16,1,.3,1)}
 .motion-ready .gallery.in-view figure{opacity:1;translate:0 0}
 .gallery figure:nth-child(2){transition-delay:.16s}
 .gallery figure:nth-child(3){transition-delay:.3s}
 .colors.in-view>h2,.colors.in-view>.eyebrow,.closing.in-view>h2,.closing.in-view>.eyebrow{animation:title-arrive 1s both}
 .color-stage img.changing{animation:tone-arrive .65s cubic-bezier(.16,1,.3,1) both}
 .dark-button,.pill{transition:translate .3s,box-shadow .3s}
 .dark-button:hover,.pill:hover{translate:0 -3px;box-shadow:0 10px 25px #302b3620}
}

/* Canopy: full-bleed crop; keep the source's left and bottom cut edges off-screen. */
@media(min-width:701px){
 .canopy{display:block;height:100svh;min-height:720px;padding:0;isolation:isolate}
 .canopy .copy{position:absolute;left:63%;right:5%;top:34%;padding:0}
 .canopy .visual{position:absolute;left:-9vw;bottom:-12vw;width:74vw;height:74vw;min-height:0;transform:none;display:block}
 .canopy .visual img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;transform-origin:bottom left}
 .canopy .section-note{left:auto;right:6%;bottom:30px}
}
@media(max-width:700px){
 .canopy{display:block;min-height:900px;height:110svh;padding:0}
 .canopy .copy{position:relative;padding:100px 7% 0}
 .canopy .visual{position:absolute;left:-22vw;bottom:-19vw;width:125vw;height:125vw;min-height:0;transform:none;display:block}
 .canopy .visual img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;transform-origin:bottom left}
 .canopy .section-note{display:none}
}
@media(prefers-reduced-motion:no-preference){
 .motion-ready .canopy.in-view .visual img{animation:canopy-arrive 1.6s cubic-bezier(.16,1,.3,1) both}
 @keyframes canopy-arrive{from{opacity:0;scale:1.08}to{opacity:1;scale:1}}
}