/* Brand banners v2 — product pixels remain unchanged, motion belongs to the environment. */
:root{--brand-cobalt:#1646ed;--brand-cyan:#48d5ff;--brand-midnight:#061c5c;--brand-silver:#e8edf5}
.announcement{background:linear-gradient(110deg,#031547,#163dce 55%,#041746);position:relative;overflow:hidden;color:#fff}
.announcement:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#74dfff40 50%,transparent 65%);transform:translateX(-110%)}
.brand strong{color:#1644ca}
:root[data-theme=dark] .brand strong{color:#80b4ff}
.motion-toggle{font:inherit;font-size:12px;border:1px solid var(--line);padding:8px 12px;background:var(--surface);color:var(--ink);cursor:pointer;min-height:40px}
.campaign-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);background:#061c5c;color:white;overflow:hidden}
.campaign-copy{padding:clamp(40px,6vw,95px) 35px clamp(35px,5vw,80px) var(--pad);align-self:center;position:relative;z-index:1}
.campaign-copy .eyebrow{color:#a9dfff;font-size:11px;letter-spacing:.17em;margin-bottom:30px}
.campaign-copy h1{font-size:clamp(64px,7.1vw,108px);line-height:1.08;margin-bottom:30px}
.campaign-copy h1 em{color:#8bddff;white-space:nowrap}
.campaign-lead{font-size:clamp(16px,1.4vw,20px);line-height:1.75;color:#e0eaff}
.campaign-copy .actions{margin-top:32px;gap:22px}
.campaign-copy .btn,.brand-closing .btn{background:white;border-color:white;color:#092578}
.campaign-copy .text-link{color:white}
.campaign-status{font-size:11px;letter-spacing:.13em;margin-top:48px;color:#d8eaff}
.campaign-status span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#71e2ff;margin-right:10px}
.campaign-fine{font-size:12px;margin-top:8px;color:#afc4e8}
.campaign-stage{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:610px;display:flex;align-items:center;justify-content:center;padding:32px 20px 90px;background:#072276}
.campaign-stage .campaign-environment{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.stage-silver{background:#e3eaf4}
.product-frame{position:relative;width:min(75%,390px);padding:5px;background:linear-gradient(135deg,#fff,#7e98bb,#eef7ff);box-shadow:0 22px 60px #00103066;border-radius:4px;z-index:1}
.product-view{width:100%;aspect-ratio:1122/1402;background:#e8edf4}
.product-view .original-product{display:block;position:static;width:100%;height:100%;object-fit:contain;object-position:center;max-height:none;animation:none;transform:none}
.product-tabs{display:flex;gap:4px;position:absolute;bottom:40px;left:50%;transform:translateX(-50%);background:#001142c9;border:1px solid #7396e7;padding:4px;border-radius:40px;z-index:3;white-space:nowrap}
.product-tabs button{border:0;border-radius:30px;background:transparent;color:#e8f3ff;padding:9px 17px;font-size:12px;min-height:38px}
.product-tabs button[aria-selected=true]{background:white;color:#123883}
.stage-caption{position:absolute;bottom:15px;left:12px;right:12px;text-align:center;color:#e5efff;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.stage-silver .stage-caption{color:#1f3765}
.campaign-orbit{pointer-events:none;position:absolute;width:90%;height:85%;border:1px solid #70cfff75;border-radius:50%;transform:rotate(-18deg);z-index:0;box-shadow:0 0 55px #157cff30}
.brand-ribbon{background:linear-gradient(110deg,#f1f4fa,#cbd6e8,#fbfcff);border-bottom:1px solid #aebbd2}
.brand-ribbon p{color:#102e69}
.campaign-signature{margin:0 var(--pad);grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line)}
.campaign-signature .campaign-stage{min-height:620px}
.campaign-signature .signature-copy{padding:45px}
.live-spectrum{display:flex;grid-column:1/-1;min-height:142px;overflow:hidden;border-radius:4px}
.live-spectrum a{display:flex;align-items:end;justify-content:center;min-width:0;flex:1;background:var(--family-color);text-decoration:none;padding:10px 2px;transition:flex .35s}
.live-spectrum a:hover,.live-spectrum a:focus-visible{flex:1.8}
.live-spectrum span{font-size:10px;background:#071323d9;color:white;padding:5px 7px;border-radius:3px;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.03em}
.brand-closing{position:relative;overflow:hidden;background:radial-gradient(ellipse at 15% 20%,#104ee7,transparent 55%),linear-gradient(130deg,#061333,#152ca6);color:white;border:0}
.brand-closing em{color:#83ddff}
.brand-closing>p:not(.eyebrow){color:#d0dfff}
.brand-closing .eyebrow{color:#b5ddff}
.campaign-launch{position:relative;isolation:isolate;overflow:hidden;min-height:260px}
.launch-environment{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.65}
.campaign-launch:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#051340e8,#03133595);z-index:-1}
.campaign-launch .btn{flex-shrink:0}
body[data-page="about.html"] .page-intro,body[data-page="products.html"] .page-intro,.studio-intro{background:linear-gradient(120deg,var(--paper) 45%,var(--silver));border-bottom:1px solid var(--line);position:relative}
body[data-page="about.html"] .page-intro:after,body[data-page="products.html"] .page-intro:after,.studio-intro:after{content:"";display:block;position:absolute;bottom:0;left:var(--pad);height:3px;width:100px;background:linear-gradient(90deg,#1446ff,#54dfff)}
.split-story>.campaign-stage{align-self:stretch}
.product-row{border-bottom:1px solid var(--line)}
.product-row .eyebrow{color:var(--blue)}
.product-row:nth-child(2n){background:var(--soft)}
.product-row>img{object-fit:contain!important}
.shade-page{border-top:3px solid #2356ef}
@media(prefers-reduced-motion:no-preference){
@keyframes brand-light{0%,25%{transform:translateX(-110%)}75%,100%{transform:translateX(110%)}}
@keyframes brand-breathe{from{transform:scale(1)}to{transform:scale(1.04) translateY(-4px)}}
@keyframes brand-orbit{from{transform:rotate(-18deg) scale(.97);opacity:.4}to{transform:rotate(10deg) scale(1.02);opacity:.9}}
}
html[data-banner-motion=off] *,html[data-banner-motion=off] *:before,html[data-banner-motion=off] *:after{animation:none!important;transition:none!important}
html[data-banner-motion=off] .reveal{opacity:1!important;transform:none!important}
@media(max-width:1000px){.campaign-copy h1{font-size:68px}.campaign-stage{min-height:570px}.campaign-signature .signature-copy{padding:30px}.campaign-signature .campaign-stage{min-height:560px}}
@media(max-width:700px){.campaign-hero{grid-template-columns:1fr}.campaign-copy{padding:42px var(--pad) 38px}.campaign-copy h1{font-size:clamp(54px,12vw,82px);margin-bottom:24px}.campaign-copy .eyebrow{margin-bottom:22px;font-size:10px}.campaign-lead{font-size:16px}.campaign-status{margin-top:30px}.campaign-stage{min-height:0;aspect-ratio:4/5;padding:25px 20px 85px}.product-frame{width:auto;height:100%;max-width:80%;aspect-ratio:1122/1402}.product-view{height:100%;width:100%;aspect-ratio:auto}.campaign-signature{grid-template-columns:1fr}.campaign-signature .campaign-stage{min-height:0;aspect-ratio:4/5;padding-bottom:45px}.campaign-signature .signature-copy{padding:35px 24px}.campaign-signature h2{font-size:52px}.live-spectrum{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));min-height:200px}.live-spectrum a{min-height:100px;padding:8px 2px}.live-spectrum span{font-size:9px}.brand-ribbon{gap:12px}.brand-ribbon p{font-size:11px}.split-story>.campaign-stage{min-height:0;aspect-ratio:4/5;padding-bottom:45px}.campaign-launch{flex-direction:column;align-items:flex-start;gap:25px;padding-block:45px}.brand-closing h2{font-size:clamp(52px,13vw,74px)}.motion-toggle{font-size:11px}.campaign-copy .actions{gap:20px}.campaign-copy .btn{padding:13px 19px}}
@media(prefers-reduced-motion:reduce){.campaign-environment,.campaign-orbit,.announcement:after{animation:none!important;transform:none!important}.live-spectrum a{transition:none}.reveal{opacity:1!important;transform:none!important}}

/* V3: active catalog colors, frameless alpha products, purposeful supporting content. */
.campaign-stage.active-color-stage{min-height:660px;padding:65px 30px 115px}
.active-color-stage .product-frame{width:100%;max-width:760px;height:auto;aspect-ratio:auto;padding:0;background:transparent;box-shadow:none;border-radius:0}
.active-color-stage .product-view{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(140px,.85fr);align-items:center;gap:10px;background:transparent;aspect-ratio:auto;height:auto}
.active-color-stage .product-view .original-product{width:100%;height:510px;object-fit:contain;max-height:none;background:transparent;filter:drop-shadow(0 20px 16px #00000030)}
.stage-kicker{position:absolute;top:27px;left:30px;right:30px;font-size:10px;letter-spacing:.15em;color:#bddaff;display:flex;justify-content:space-between;gap:15px}
.featured-shade{color:#fff;padding:15px 0;position:relative;z-index:2}
.featured-number{font-size:11px;letter-spacing:.15em;color:#bbd9ff}
.featured-shade h3{font-family:var(--serif);font-size:clamp(28px,3vw,45px);line-height:1.08;margin:17px 0 22px;max-width:6ch}
.featured-swatch{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.06em}
.featured-swatch>span{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--swatch);border:1px solid #ffffff70}
.featured-shade p{font-size:12px;line-height:1.8;margin:20px 0 24px;color:#cbdcf7}
.featured-shade a{font-size:12px;color:white;text-underline-offset:7px}
.stage-silver .featured-shade,.stage-silver .featured-number,.stage-silver .featured-shade p,.stage-silver .featured-shade a,.stage-silver .stage-kicker{color:#10275b}
.active-color-stage .product-tabs{bottom:43px;width:max-content;max-width:calc(100% - 24px);gap:2px}
.active-color-stage .product-tabs button{display:flex;align-items:center;gap:6px;padding:9px 10px;font-size:10px;min-height:40px}
.active-color-stage .product-tabs button span{width:10px;height:10px;border-radius:50%;background:var(--tab-swatch);border:1px solid #a1b5d9;flex-shrink:0}
.active-color-stage .campaign-orbit{width:78%;height:75%;opacity:.45}
.campaign-signature .active-color-stage{min-height:650px;padding-bottom:55px}
.split-story>.active-color-stage{padding-bottom:55px}
@media(min-width:1600px){.active-color-stage .product-view .original-product{height:590px}.campaign-stage.active-color-stage{min-height:750px}}
@media(max-width:1000px) and (min-width:701px){.campaign-stage.active-color-stage{padding-inline:15px}.active-color-stage .product-view{grid-template-columns:minmax(0,1fr) 125px;gap:0}.featured-shade h3{font-size:30px}.active-color-stage .product-tabs button{font-size:9px;padding-inline:7px}}
@media(max-width:700px){
.campaign-stage.active-color-stage,.campaign-signature .active-color-stage,.split-story>.active-color-stage{aspect-ratio:auto;min-height:0;padding:58px 20px 100px}
.active-color-stage .product-view{grid-template-columns:minmax(0,1.25fr) minmax(115px,.85fr);gap:10px}
.active-color-stage .product-view .original-product{height:390px;max-height:none}
.featured-shade h3{font-size:32px;margin:15px 0 20px}
.featured-shade p{font-size:11px;margin:18px 0 20px}
.featured-shade a{font-size:11px}.featured-number{font-size:10px}
.stage-kicker{left:20px;right:20px;font-size:9px;top:23px}
.active-color-stage .product-tabs button{font-size:9px;padding:8px 7px;gap:4px}
.active-color-stage .product-tabs{bottom:36px}
.campaign-signature .active-color-stage,.split-story>.active-color-stage{padding-bottom:40px}
.active-color-stage .stage-caption{font-size:9px}
}
@media(max-width:350px){.active-color-stage .product-view{grid-template-columns:minmax(0,1fr) 110px;gap:6px}.active-color-stage .product-view .original-product{height:340px}.featured-shade h3{font-size:28px}.active-color-stage .product-tabs button{padding-inline:5px;font-size:8px}}

/* V4: a single anchored bottle; motion belongs to the brand signature. */
.campaign-stage.signature-motion-stage{min-height:700px;padding:200px 32px 85px;background:radial-gradient(ellipse at 45% 84%,#356abc 0,transparent 45%),linear-gradient(145deg,#06163e,#093fb2)}
.signature-motion-stage .campaign-environment,.signature-motion-stage .campaign-orbit{display:none}
.signature-motion-stage:before{content:"";position:absolute;inset:auto 0 55px;height:1px;background:linear-gradient(90deg,transparent,#89c9ff70,transparent)}
.signature-motion-stage .stage-kicker{z-index:3}
.gel-signature{position:absolute;top:35px;left:5%;width:90%;height:210px;object-fit:contain;pointer-events:none}
.signature-motion-stage .product-frame{max-width:590px}
.signature-motion-stage .product-view{grid-template-columns:minmax(0,1.2fr) minmax(120px,.85fr);gap:24px}
.signature-motion-stage .product-view .original-product{height:420px;max-width:100%;object-fit:contain;transform:none!important;animation:none!important}
.signature-controls{position:absolute;bottom:29px;left:24px;right:24px;display:flex;justify-content:center;gap:10px}
.signature-controls button{border:1px solid #9ecbff75;background:#071e57b3;border-radius:30px;color:#eef7ff;font:inherit;font-size:11px;padding:10px 16px;min-height:42px;cursor:pointer}
.signature-controls button:disabled{opacity:.65;cursor:default}
.signature-controls button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.signature-motion-stage .stage-caption{bottom:8px;font-size:8px;letter-spacing:.08em}
.signature-motion-stage .featured-shade h3{font-size:clamp(30px,3.3vw,49px)}
@media(prefers-reduced-motion:no-preference){
 html[data-banner-motion=on] .signature-playing .gel-signature{animation:signature-reveal 3.2s cubic-bezier(.25,.5,.3,1) both}
 @keyframes signature-reveal{0%{clip-path:inset(0 100% 0 0);opacity:.5}90%,100%{clip-path:inset(0 0 0 0);opacity:1}}
}
@media(min-width:1600px){.campaign-stage.signature-motion-stage{min-height:780px;padding-top:210px}.signature-motion-stage .product-view .original-product{height:485px}.gel-signature{height:235px}}
@media(max-width:1000px) and (min-width:701px){.campaign-hero{grid-template-columns:.9fr 1.1fr}.campaign-stage.signature-motion-stage{padding-inline:18px}.signature-motion-stage .product-view{gap:8px;grid-template-columns:minmax(0,1fr) 110px}.signature-motion-stage .featured-shade h3{font-size:31px}.signature-motion-stage .product-view .original-product{height:365px}}
@media(max-width:700px){.campaign-stage.signature-motion-stage{min-height:0;padding:175px 24px 90px}.gel-signature{top:24px;height:175px;left:3%;width:94%}.signature-motion-stage .product-view{grid-template-columns:minmax(0,1.25fr) minmax(108px,.85fr);gap:15px}.signature-motion-stage .product-view .original-product{height:355px}.signature-motion-stage .featured-shade h3{font-size:32px}.signature-controls{bottom:30px}.signature-motion-stage .stage-kicker{top:18px;font-size:8px}}
@media(max-width:350px){.campaign-stage.signature-motion-stage{padding:148px 16px 90px}.gel-signature{height:150px;top:20px}.signature-motion-stage .product-view .original-product{height:300px}.signature-motion-stage .featured-shade h3{font-size:27px}.signature-motion-stage .product-view{gap:8px}.signature-controls button{font-size:10px;padding-inline:12px}}