.color-hero{min-width:0;width:100%;padding:12px 0 24px;scroll-margin-top:115px}
.color-stage{position:relative;height:490px;isolation:isolate}
.color-stage:before{content:"";position:absolute;inset:6% 7% 13%;border-radius:50% 50% 12px 12px;background:linear-gradient(140deg,#fff9,#e3eaf380);border:1px solid #fff;box-shadow:inset 0 0 50px #fff9;z-index:-2}
.color-stage:after{content:"";position:absolute;left:15%;right:15%;bottom:4%;height:12%;border-radius:50%;background:linear-gradient(#fff,#e2e8ee);box-shadow:0 15px 28px #243f6510;z-index:-1}
.color-edition{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.2em;color:#6e8198}
.color-image-stack{position:absolute;inset:18% 8% 2%;filter:drop-shadow(0 18px 16px #27364c25)}
.color-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease;pointer-events:none}.color-image.is-visible{opacity:1}
.color-options{position:absolute;inset:0}.color-option{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;border:0;background:none;padding:10px;cursor:pointer;color:#344760;min-width:56px;min-height:48px}
.color-dot{width:22px;height:22px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #102b4820,0 4px 8px #203e4918;outline:1px solid transparent;outline-offset:5px;transition:outline-color .2s,transform .2s}
.color-option[aria-pressed=true] .color-dot{outline-color:#244977;transform:scale(1.08)}.color-option:focus-visible{outline:2px solid #0868c9;border-radius:12px}.color-name{font-size:12px;white-space:nowrap;opacity:0;transition:opacity .2s}.color-option:hover .color-name,.color-option:focus-visible .color-name,.color-option[aria-pressed=true] .color-name{opacity:1}
.color-caption{text-align:center;position:relative;z-index:1}.color-status{font-size:11px;letter-spacing:.14em;color:#547197}.color-caption p{font-size:18px;margin:12px 0;color:#203951}.color-caption small{display:block;font-size:12px;line-height:1.8;color:#718195}
.hero .hero-product-label{font-size:clamp(26px,2.3vw,32px);font-weight:650;line-height:1.4;letter-spacing:.02em;color:#172e48;margin:0 0 22px}.hero h1 .hero-title-line{white-space:nowrap}
.spectrum-story{height:240svh;background:linear-gradient(#fafbfd,#edf2f7);--gather:1;--finish:1}.spectrum-sticky{position:sticky;top:84px;height:calc(100svh - 84px);min-height:530px;overflow:clip;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px}
.spectrum-heading{text-align:center;z-index:2}.spectrum-heading h2{font-size:clamp(28px,3.4vw,44px);margin:14px 0;line-height:1.25}.spectrum-heading p{font-size:14px;letter-spacing:.2em;color:#6c7f98}
.spectrum-stage{position:relative;width:min(100%,1050px);flex:1;min-height:230px;max-height:440px;isolation:isolate}.spectrum-pair{position:absolute;inset:0 20%;z-index:1}.spectrum-pair img{position:absolute;width:60%;height:90%;object-fit:contain;filter:drop-shadow(0 18px 15px #30476720)}
.spectrum-blue{left:0;top:12%;transform:translateX(calc((1 - var(--gather)) * -65%))}.spectrum-white{right:0;top:0;transform:translateX(calc((1 - var(--gather)) * 65%))}
.spectrum-background{position:absolute;inset:0;opacity:calc(1 - var(--finish) * .65)}.spectrum-ghost{position:absolute;width:24%;height:70%;object-fit:contain;left:calc(var(--slot) * 19% - 1%);top:4%;opacity:calc(var(--appear,1) * .23);transform:translateY(calc((1 - var(--appear,1)) * 38px)) scale(calc(.9 + var(--appear,1) * .1))}
.spectrum-copy{text-align:center;z-index:2;opacity:calc(.2 + var(--finish) * .8);transform:translateY(calc((1 - var(--finish)) * 12px));padding-top:16px}.spectrum-copy p{font-size:20px;margin:0 0 10px}.spectrum-copy small{display:block;font-size:11px;color:#78899c;margin-top:14px}
.spectrum-static{height:auto}.spectrum-static .spectrum-sticky{position:relative;top:0;height:auto;min-height:0;padding:48px 20px}.spectrum-static .spectrum-stage{flex:auto;height:350px}
@media(min-width:801px) and (max-width:1100px){.color-stage{height:520px}.color-image-stack{inset:18% 9% 2%}}
@media(max-width:800px){.color-stage{height:440px}.color-hero{padding-top:24px}.color-image-stack{inset:3% 12% 20%}.color-stage:before{inset:0 7% 22%}.color-stage:after{bottom:17%}.color-options{top:auto;bottom:-3px;display:flex;justify-content:safe center;overflow-x:auto;gap:3px;padding:10px 5px;scrollbar-width:thin}.color-option{position:relative;inset:auto;transform:none;flex:0 0 54px;min-width:54px;padding:8px 3px;gap:8px}.color-name{opacity:1;font-size:11px}.color-dot{width:21px;height:21px}.color-edition{top:-10px;font-size:9px}.color-caption{margin-top:16px}.color-caption p{font-size:16px}.color-caption small{font-size:11px}.spectrum-sticky{top:76px;height:calc(100svh - 100px);min-height:480px}.spectrum-pair{inset:0 3%}.spectrum-stage{max-height:330px}.spectrum-ghost{top:4%;height:48%;width:28%;left:calc(var(--slot) * 18% - 1%)}.spectrum-blue{transform:translateX(calc((1 - var(--gather)) * -20%))}.spectrum-white{transform:translateX(calc((1 - var(--gather)) * 20%))}.spectrum-copy p{font-size:18px}.spectrum-heading h2{font-size:28px}.spectrum-static .spectrum-stage{height:290px}.hero .hero-product-label{font-size:clamp(23px,4.6vw,28px);margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.color-image,.color-dot,.color-name{transition:none}.spectrum-story{height:auto}.spectrum-sticky{position:relative;top:0;height:auto;min-height:0;padding:40px 20px}.spectrum-stage{flex:auto;height:330px}.spectrum-pair img,.spectrum-copy,.spectrum-ghost{transform:none!important}.spectrum-copy{opacity:1}.spectrum-ghost{opacity:.23}}