/* Local concept only: blue leads, silver and midnight support. */
.hero.hero-array{height:790px;position:relative;isolation:isolate;overflow:hidden}
.hero-array .hero-color{inset:24px 32px 32px;border-radius:28px;background:linear-gradient(115deg,#eef3f3 8%,#e2edf2 57%,#e5e9ef 100%);z-index:-1}
.hero.hero-array h1{position:absolute;top:146px;left:88px;width:530px;padding:0;margin:0;text-align:left;font-size:70px;line-height:1.12;letter-spacing:-.035em;z-index:3}
.hero-array .hero-title-line{white-space:nowrap}
.hero.hero-array .hero-bottom{position:absolute;top:370px;left:92px;right:auto;bottom:auto;width:440px;text-align:left;margin:0}
.hero.hero-array .hero-bottom p{font-size:20px;line-height:1.65;margin:0;max-width:39ch;text-align:left}
.hero.hero-array .hero-bottom .hero-cta{position:static;display:inline-flex;transform:none;margin:32px 0 0;min-width:0;font-size:16px;padding:16px 25px}
.hero-trio{position:absolute;left:600px;top:88px;width:790px;height:600px;perspective:1200px}
.trio-piece{position:absolute;aspect-ratio:1;animation:trio-arrive 1.45s cubic-bezier(.16,1,.3,1) both}
.trio-piece span{display:block;width:100%;height:100%;background:url('/landing/assets/hero-colors-20261012.webp') no-repeat;background-size:300% 100%;filter:drop-shadow(0 25px 20px #20354420)}
.trio-silver{width:330px;left:0;top:36px;transform:rotate(-16deg);z-index:1;animation-delay:.12s}
.trio-silver span{background-position:50% center}
.trio-silver span{position:relative}
/* Opaque electrochromic cover, registered to the silver sprite's camera capsule. */
.trio-silver span::after{content:"";position:absolute;left:43.35%;top:17.2%;width:13.35%;height:22.1%;border-radius:999px;background:#191c1d;pointer-events:none}
.trio-black{width:305px;right:0;top:235px;transform:rotate(13deg);z-index:1;animation-delay:.22s}
.trio-black span{background-position:0 center}
.trio-blue{width:490px;left:137px;top:91px;transform:rotate(-7deg);z-index:2}
.trio-blue span{background-position:100% center;filter:drop-shadow(0 35px 26px #2035442c)}
@keyframes trio-arrive{from{opacity:0;translate:0 38px}to{opacity:1;translate:0 0}}
@media(max-width:1023px){
.hero.hero-array{height:auto;min-height:830px;padding:60px 24px 66px;display:flex;flex-direction:column;align-items:center}
.hero-array .hero-color{inset:12px 16px 20px;border-radius:24px}
.hero.hero-array h1{position:relative;top:auto;left:auto;width:auto;text-align:center;font-size:clamp(40px,7.2vw,70px);padding:0;line-height:1.14}
.hero-trio{position:relative;left:auto;top:auto;width:min(100%,660px);height:auto;aspect-ratio:1.5;margin:24px auto 12px}
.trio-silver{width:44%;left:0;top:0}
.trio-black{width:41%;right:0;top:35%}
.trio-blue{width:64%;left:19%;top:11%}
.hero.hero-array .hero-bottom{position:relative;top:auto;left:auto;width:min(100%,470px);text-align:center;margin:0}
.hero.hero-array .hero-bottom p{text-align:center;font-size:17px;line-height:1.6;max-width:none}
.hero.hero-array .hero-bottom .hero-cta{margin:24px auto 0}
}
@media(max-width:540px){.hero.hero-array{min-height:0;padding:48px 28px 56px}.hero.hero-array h1{font-size:40px}.hero-trio{width:calc(100% + 24px);margin:32px -12px 22px;aspect-ratio:1.25}.trio-black{top:37%}.trio-blue{top:15%}.hero.hero-array .hero-bottom p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.trio-piece{animation:none}}
/* Revision 2: editorial scale contrast from the supplied composition. */
.hero.hero-array{height:920px}
.hero-array .hero-color{inset:24px 32px 24px;background:#d0d0d0}
.hero.hero-array h1{top:76px;left:86px;font-size:68px;width:590px}
.hero.hero-array .hero-bottom{top:665px;left:92px;width:490px;z-index:4}
.hero.hero-array .hero-bottom p{font-size:18px;max-width:43ch}
.hero-trio{inset:24px 32px 24px;width:auto;height:auto;overflow:hidden;border-radius:28px;perspective:none}
.trio-black{width:890px;right:0;top:0;transform:none;z-index:1;animation-delay:0s}
.trio-black span{background-image:url('/landing/assets/hero-black-closeup-20261012.png');background-size:100% 100%;background-position:center;filter:none}
.trio-silver{width:245px;left:64px;top:328px;transform:rotate(-13deg);z-index:2;animation-delay:.15s}
.trio-blue{width:265px;left:327px;top:277px;transform:rotate(12deg);z-index:2;animation-delay:.25s}
.trio-blue span,.trio-silver span{filter:drop-shadow(0 18px 15px #20354418)}
@media(max-width:1023px){
.hero.hero-array{height:auto;min-height:0;padding:56px 28px 60px}
.hero.hero-array h1{position:relative;top:auto;left:auto;width:100%;text-align:left;font-size:clamp(38px,6.8vw,64px)}
.hero-array .hero-color{inset:12px 16px 20px}
.hero-trio{position:relative;inset:auto;flex:none;width:calc(100% + 24px);height:auto;aspect-ratio:1.38;margin:28px -12px 24px;border-radius:0}
.trio-black{width:77%;right:0;top:-5%}
.trio-silver{width:23%;left:1%;top:43%}
.trio-blue{width:25%;left:25%;top:33%}
.hero.hero-array .hero-bottom{position:relative;top:auto;left:auto;width:100%;margin:0;text-align:left}
.hero.hero-array .hero-bottom p{text-align:left;font-size:16px;max-width:43ch}
.hero.hero-array .hero-bottom .hero-cta{margin:24px 0 0}
}
@media(max-width:540px){.hero.hero-array h1{font-size:36px}.hero-trio{aspect-ratio:1.1}.trio-black{width:90%;right:-8%;top:0}.trio-silver{top:48%}.trio-blue{top:38%;left:24%}}
/* Revision 3: wider composition, airy blue and connected secondary products. */
.hero.hero-array{height:780px}
.hero-array .hero-color{background:linear-gradient(110deg,#e0edef,#e4e8f0 46%,#eae4ee 70%,#eedfd9)}
.hero.hero-array h1{top:65px;left:86px;width:calc(100% - 172px);font-size:74.8px;white-space:nowrap}
.hero.hero-array h1 br{display:none}
.hero.hero-array .hero-title-line + .hero-title-line{margin-left:.2em}
.hero.hero-array .hero-bottom{top:545px}
.trio-black{top:-15px;mix-blend-mode:multiply}
.trio-black span{filter:brightness(1.23077)}
.trio-silver{width:294px;left:74px;top:244px;z-index:2}
.trio-blue{width:318px;left:283px;top:195px;z-index:3}
@media(max-width:1023px){
.hero.hero-array{height:auto;padding-top:48px}
.hero.hero-array h1{top:auto;left:auto;width:100%;font-size:clamp(22px,5vw,48px);white-space:nowrap}
.hero-trio{aspect-ratio:1.5;margin-top:24px}
.trio-black{width:80%;top:-5%;right:0}
.trio-silver{width:27.6%;left:1%;top:45%}
.trio-blue{width:30%;left:21%;top:33%}
.hero.hero-array .hero-bottom{top:auto}
}
@media(max-width:540px){
.hero.hero-array{padding-left:24px;padding-right:24px}
.hero.hero-array h1{font-size:clamp(18px,4.7vw,25px);letter-spacing:-.035em}
.hero-trio{aspect-ratio:1.15}
.trio-black{width:90%;right:-8%;top:0}
.trio-silver{top:48%}
.trio-blue{top:37%;left:21%}
}
/* Revision 4: align the secondary pair and copy to the annotated layout. */
@media(min-width:1024px){
.trio-silver{left:104px;top:204px}
.trio-blue{left:313px;top:155px}
.hero.hero-array .hero-bottom{left:86px;top:545px;width:560px}
.hero.hero-array .hero-bottom p{max-width:none;line-height:1.65}
}
@media(max-width:1023px){
.hero.hero-array{padding:44px 32px 56px}
.hero.hero-array h1{font-size:clamp(32px,6.2vw,58px);line-height:1.13;white-space:normal}
.hero.hero-array .hero-title-line{display:block;white-space:nowrap}
.hero.hero-array .hero-title-line + .hero-title-line{margin-left:0}
.hero-trio{width:calc(100% + 32px);margin:20px -16px 26px;aspect-ratio:1.4;border-radius:0 0 20px 20px}
.trio-black{width:83%;right:0;top:-4%}
.trio-silver{width:29%;left:1%;top:35%}
.trio-blue{width:31%;left:22%;top:25%}
.hero.hero-array .hero-bottom{width:100%;top:auto;left:auto}
.hero.hero-array .hero-bottom p{font-size:16px;line-height:1.65;max-width:46ch}
.hero.hero-array .hero-bottom .hero-cta{min-height:50px;margin-top:22px}
}
@media(max-width:540px){
.hero.hero-array{padding:42px 32px 52px}
.hero.hero-array h1{font-size:clamp(29px,7.8vw,38px)}
.hero-trio{aspect-ratio:1.15;margin-top:16px;margin-bottom:24px}
.trio-black{width:92%;right:0;top:0}
.trio-silver{width:30%;left:0;top:36%}
.trio-blue{width:32%;left:21%;top:26%}
.hero.hero-array .hero-bottom .hero-cta{width:100%;justify-content:center;padding:14px 16px;font-size:15px}
}

/* Gentle secondary-product float; independent of the entrance and rotation. */
.trio-silver span,.trio-blue span{animation:hero-soft-float 6s ease-in-out infinite;animation-delay:1.6s;--float-rise:-7px}
.trio-blue span{animation-duration:6.8s;animation-delay:2s}
@keyframes hero-soft-float{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--float-rise))}}
@media(max-width:1023px){.trio-silver span,.trio-blue span{--float-rise:-4px}}
@media(prefers-reduced-motion:reduce){.trio-silver span,.trio-blue span{animation:none}}

/* Mobile composition: match the annotated product positions. */
@media(max-width:540px){
.hero-trio{overflow:visible}
.trio-black{top:-19%;overflow:hidden;border-radius:0 0 20px 20px}
.trio-silver{top:24%}
.trio-blue{left:16%;top:-3%}
}