body{background: #252024;}
.main-aura{background: #252024; font-size: 18px; line-height: 24px; color: #fff; font-family: "proxima-nova",sans-serif;}
.pa{position: absolute;}
.d-none{display: none;}
.img-fluid{max-width: 100%;}

.display-1, .display-2{font-family: 'neulis_neueregular'; font-weight: 600;}
.display-1{font-size: 88px; line-height: 104px;}
.display-2{font-size: 64px; line-height: 1.13;}

h1, h2, h3 {color: #fff; font-family: 'neulis_neuebold' !important; font-weight: 700; margin: 0;}
h4, h5{color: #fff}
h1{font-size: 48px; line-height: 1.25; font-weight: 700;}
h2{font-size: 40px; line-height: 1.2; font-weight: 700;}
h3{font-size: 32px; line-height: 1.25; font-weight: 700;}

h4{font-family: "proxima-nova",sans-serif !important; font-size: 24px; line-height: 32px; font-weight: 700; color: #fff;}
.font-24{font-size: 24px; line-height: 32px; font-weight: 400;}
.font-16{font-size: 16px; line-height: 20px; font-weight: 400;}
.font-14{font-size: 14px; line-height: 16px; font-weight: 400;}
/*font-family: "proxima-nova",sans-serif;*/

.animationParent {opacity: 1; -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}
.main-aura .animationChild{opacity: 0; -moz-transform: translateY(80px); -webkit-transform: translateY(80px); transform: translateY(80px); -moz-transition: opacity 0.9s ease-out, transform 0.9s ease-out; -webkit-transition: opacity 0.9s ease-out, transform 0.9s ease-out; transition: opacity 0.9s ease-out, transform 0.9s ease-out; will-change: opacity, transform;}
.main-aura .animationChild.visible{opacity: 1; -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}
.color-temperature-panel--text:nth-child(4) .animationChild{-moz-transition-delay: 0.15s; -webkit-transition-delay: 0.15s; transition-delay: 0.15s;}

.italic{font-style: italic;}
.font-700{font-weight: 700; font-family: 'neulis_neuebold' !important;}
.font-600{font-weight: 600; font-family: 'neulis_neueregular' !important;}
.font-500{font-weight: 500; font-family: 'neulis_neuemedium' !important;}
.font-400{font-weight: 400;}
.text-gradient{display: inline-block; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; color: transparent !important;}
.text-gradient--cool{background-image: linear-gradient(90deg, #92D6E2 0%, #CCBF2E 22.45%, #EB7923 44.91%, #ED1558 67.36%, #54565A 89.82%); background-size: 200% 100%; background-position: 0 50%;}
.text-gradient--warm{background-image: linear-gradient(90deg, #CCBF2E 0%, #EB7923 50%, #ED1558 100%);}
.text-gradient--fade{background-image: linear-gradient(180deg, #FFFFFE 0%, #252024 100%);}

.width-1496{max-width: 1496px; margin: 0 auto;}

.hero-inner{position: relative; z-index: 1;}
.hero-img{position: relative;}
.hero-states{position: relative; width: 100%; height: calc(100vh - 88px); min-height: 800px;}
.hero-state{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; -moz-transition: opacity 1.2s ease-in-out; -webkit-transition: opacity 1.2s ease-in-out; transition: opacity 1.2s ease-in-out; pointer-events: none;}
.hero-state.is-active{opacity: 1;}
.hero-text{padding: 0 16px; color: #101010; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; margin-top: 140px; opacity: 0; visibility: hidden; pointer-events: none; -moz-transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out; -webkit-transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out; transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;}
.hero-section[data-hero-state="white"] .hero-text,
.hero-section[data-hero-state="yellow"] .hero-text,
.hero-section[data-hero-state="blue"] .hero-text{opacity: 1; visibility: visible; pointer-events: auto;}
.hero-text .display-2{color: inherit; font-size: 3.4vw;}
.hero-text .btn-fine{margin-top: 64px;}
@media (prefers-reduced-motion: reduce){
.hero-state,
.hero-text{-moz-transition: none; -webkit-transition: none; transition: none;}
}

.poor-lighting-section{position: relative;}
.poor-lighting-inner{max-width: 1920px; margin: 0 auto; position: relative;}
.poor-lighting-visual{position: relative; width: 100%;}
.poor-lighting-bg{position: relative; width: 100%; margin: 0 auto; aspect-ratio: 1920 / 880; max-height: 880px;}
.poor-lighting-scene{display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; -moz-transition: opacity 1.5s ease-in-out; -webkit-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; pointer-events: none;}
.poor-lighting-scene img{display: block; width: 100%; height: 100%; object-fit: contain; object-position: center top;}
.poor-lighting-scene--on{opacity: 0;}
.poor-lighting-section.is-lit .poor-lighting-scene--off{opacity: 0;}
.poor-lighting-section.is-lit .poor-lighting-scene--on{opacity: 1;}
.poor-lighting-copy{position: absolute; left: 0; right: 0; top: 47.727%; z-index: 2; display: flex; justify-content: center; padding: 0 16px; opacity: 0.2; pointer-events: none; -moz-transition: opacity 1.5s ease-in-out; -webkit-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out;}
.poor-lighting-section.is-lit .poor-lighting-copy{opacity: 1;}
.poor-lighting-text{margin: 0; width: 100%; max-width: 475px; text-align: center; display: inline-block;}
.poor-lighting-text.text-gradient--fade{background-image: linear-gradient(180deg, #FFFFFE 0%, #252024 100%);}
.poor-lighting-text-main,
.poor-lighting-text-sub{display: block; background: none; -webkit-background-clip: initial; background-clip: initial;}
.poor-lighting-text-main{font-size: 40px; line-height: 48px; letter-spacing: 0;}
.poor-lighting-text-sub{font-size: 48px; line-height: 60px; letter-spacing: 0;}
@media (prefers-reduced-motion: reduce){
.poor-lighting-scene,
.poor-lighting-copy{-moz-transition: none; -webkit-transition: none; transition: none;}
}

.brightness-box{padding: 80px 0 0; max-width: 640px; width: 100%; margin: 0 auto;}

.color-temperature{width: 100%; padding: 148px 0 0;}
.color-temperature-grid{display: grid; grid-template-columns: 1fr 1fr; width: 100%;}
.color-temperature-panel--text{display: flex; align-items: center; padding: clamp(48px, 6vw, 130px) clamp(24px, 5vw, 130px);}
.color-temperature-grid > .color-temperature-panel--text:nth-child(1){justify-content: flex-end;}
.color-temperature-grid > .color-temperature-panel--text:nth-child(4){justify-content: flex-start;}
.color-temperature-panel-inner{max-width: 600px; width: 100%;}
.color-temperature-panel--image{display: flex; align-items: stretch; min-height: 0;}
.color-temperature-panel--image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.color-temperature-list{list-style: none; margin: 0; padding: 0;}
.color-temperature-list li{display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-left: 0;}
.color-temperature-list li:first-child{margin-top: 0;}
.color-temperature-list li::before{content: ''; position: static; flex-shrink: 0; width: 6px; height: 6px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #fff;}

.light-tab-section{padding-top: 140px;}
.light-tab-box{display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;}
.light-tab-text{width: 600px; flex-shrink: 0;}
.light-tab-text-list{padding-top: 80px;}
.light-tab-text-item{margin-top: 24px; padding: 24px 16px; position: relative; cursor: pointer; border: 1px solid transparent; border-left: 1px solid transparent; transition: border-color 0.45s ease, padding-top 0.45s ease, padding-bottom 0.45s ease;}
.light-tab-text-item:first-child{margin-top: 0;}
.light-tab-text-item::after{content: ''; position: absolute; inset: 0; padding: 1px; background: linear-gradient(90deg, #92D6E2 0%, #CCBF2E 22.45%, #EB7923 44.91%, #ED1558 67.36%, #54565A 89.82%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; z-index: 2;}
.light-tab-text-item:hover:not(.active)::after{opacity: 1;}
.light-tab-text-item.active::after{opacity: 0;}
.light-tab-text-item.active{border-left: 1px solid #fff; padding-top: 0; padding-bottom: 0;}
.light-tab-title,
.light-tab-description{position: relative; z-index: 1;}
.light-tab-title{color: #54565A; font-family: 'neulis_neuebold' !important; font-weight: 700; transition: color 0.45s ease;}
.light-tab-text-item:hover:not(.active) .light-tab-title{color: #fff;}
.light-tab-active-mark{position: absolute; left: -4px; top: 50%; width: 8px; height: 124px; margin-top: -62px; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.45s ease;}
.light-tab-text-item.active .light-tab-active-mark{opacity: 1;}
.light-tab-active-ellipse{position: absolute; left: 0; top: 0; width: 8px; height: 124px; background: #fff; border-radius: 50%; filter: blur(25px); -webkit-filter: blur(25px);}
.light-tab-text-item.active .light-tab-title{color: #fff;}
.light-tab-description{display: block; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; color: #9C9D9F; font-size: 18px; line-height: 24px; font-weight: 400; transition: opacity 0.45s ease, max-height 0.45s ease, margin-top 0.45s ease;}
.light-tab-text-item.active .light-tab-description{max-height: 200px; margin-top: 16px; opacity: 1;}
.light-tab-img{position: relative; width: 710px; flex: 1 1 auto; max-width: 710px; transition: min-height 0.45s ease;}
.light-tab-img-item{position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.5s ease; z-index: 0; pointer-events: none;}
.light-tab-img-item.active{opacity: 1; z-index: 1; pointer-events: auto;}
.light-tab-img-item.active.is-fading-out,
.light-tab-img-item.is-fading-out{opacity: 0; z-index: 1; pointer-events: none;}
.light-tab-img-item.active.is-fading-in,
.light-tab-img-item.is-fading-in{opacity: 1; z-index: 2; pointer-events: none;}
.light-tab-img-item img{display: block; width: 100%; height: auto;}
.light-tab-text h1.font-500{font-weight: 500 !important; font-family: 'neulis_neuemedium' !important;}
.light-tab-text h1 .text-gradient--fade{display: block;}

.light-bar-section{background: url(../images/new/finesse-aura/light-rays-bg.jpg) center top no-repeat; background-size: cover; margin-top: 140px;}
.light-bar-box{display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 168px 0;}
.light-bar-box img{-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.light-bar-item-2{display: flex; flex-direction: column; gap: 40px;}
.light-bar-item-top{display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;}
.light-bar-item-bottom{display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;}

.finesse-aura-section{position: relative; width: 100vw; max-width: 1920px; margin: 0 auto; max-height: 1050px; overflow: hidden;}
.finesse-aura-img{position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; aspect-ratio: 1920 / 1050;}
.finesse-aura-img img{max-height: 100%; object-fit: contain; object-position: center center;}
.finesse-aura-section .wrap{position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center;}
.finesse-aura-box{width: 100%; display: flex; justify-content: center; }
.finesse-aura-item{width: 100%; max-width: 520px; text-align: center; color: #fff; padding: 250px 0;}
.finesse-aura-item > img{display: block; width: 100%; max-width: clamp(200px, 24vw, 320px); height: auto; margin: 0 auto;}
.finesse-aura-item-text h1{color: #fff; font-size: clamp(28px, 3vw, 48px); line-height: 1.2;}
.finesse-aura-item ul{list-style: none; padding: 0; display: inline-flex; flex-direction: column; gap: 8px;}
.finesse-aura-item ul li{display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: clamp(16px, 1.6vw, 18px); line-height: 24px; color: #fff; text-align: left;}
.finesse-aura-item ul li::before{content: ''; flex-shrink: 0; width: 24px; height: 24px; background: url(../images/new/finesse-aura/check.png) center center no-repeat; background-size: contain;}
.main-aura .finesse-aura-item .btn-fine-primary:hover,
.main-aura .finesse-aura-item .btn-fine-primary:focus{background: #fff; color: #54565A; border-color: #fff;}

.btn-fine{font-family: "proxima-nova",sans-serif !important; font-size: 18px; line-height: 24px; font-weight: 400; padding: 10px 24px; color: #54565A; border-radius: 22px 0; display: inline-flex; align-items: center; text-decoration: none; transition: all 0.3s ease;}
.btn-fine span{vertical-align: middle; background-position: 0 0; background-repeat: no-repeat; width: 0; height: 24px; transition: all 0.3s ease;}
.btn-fine:hover span, .btn-fine:focus span{width: 24px; margin-left: 4px; transition: width 0.3s ease-in-out;}
.btn-fine-primary{border: 1px solid #54565A; background: #54565A; color: #fff;}
.btn-fine-primary span{background-image: url("../images/new/finesse/btn-arrow.svg");}
.btn-fine-primary:hover, .btn-fine-primary:focus{border: 1px solid #54565A; background: transparent; color: #54565A; text-decoration: none;}

@media screen and (max-height: 690px){
.hero-states{min-height: auto;}
.hero-text .display-2{font-size: 8vw;}
}

@media screen and (max-width: 1550px){
.hero-text{margin-top: 110px;}
.hero-text .btn-fine{margin-top: 40px;}
.finesse-aura-item{padding: 15vw 0;}
}

@media screen and (max-width: 1440px){
.hero-text .display-2{font-size: 4vw;}
.finesse-aura-item{max-width: 460px;}
.finesse-aura-item-text h1{font-size: clamp(24px, 3.2vw, 40px);}
}

@media screen and (max-width: 1280px){
.finesse-aura-item{max-width: 400px;}
.light-bar-box{padding-bottom: 100px;}
.light-tab-text{width: 500px;}
}

@media screen and (max-width: 1024px){
.hero-text .display-2{font-size: 5vw;}
.hero-text .btn-fine{margin-top: 32px;}
.poor-lighting-section{overflow: hidden;}
.poor-lighting-inner{padding: 0; max-width: 100%;}
.poor-lighting-visual{width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden;}
.poor-lighting-bg{aspect-ratio: 960 / 880; max-height: none; min-height: 0; height: auto; width: 110%; position: relative; left: 50%; transform: translateX(-50%);}
.poor-lighting-scene,
.poor-lighting-scene--off,
.poor-lighting-scene--on{position: absolute; inset: 0; width: 100%; height: 100%;}
.poor-lighting-scene img{object-fit: contain; object-position: center top;}
.poor-lighting-text-main{font-size: clamp(32px, 3.9vw, 40px); line-height: clamp(38px, 4.7vw, 48px);}
.poor-lighting-text-sub{font-size: clamp(36px, 4.7vw, 48px); line-height: clamp(44px, 5.9vw, 60px);}
.brightness-box, .light-tab-text-list{padding-top: 60px;}
.color-temperature, .light-tab-section{padding-top: 80px;}
.light-bar-box{padding: 80px 0; gap: 24px;}
.light-bar-item-2, .light-bar-item-top, .light-bar-item-bottom{gap: 24px;}
}

@media screen and (max-width: 991px){
.finesse-aura-section{aspect-ratio: auto; max-height: none; width: 100%; margin-left: 0; margin-right: 0;}
.finesse-aura-section .wrap{height: auto; display: block;}
.finesse-aura-item{padding: 15vw 0 10vw 0;}
.finesse-aura-item-text{max-width: 480px; margin: 0 auto;}
.light-tab-box{flex-direction: column;}
.light-tab-text, .light-tab-img{width: 100%; max-width: 100%;}
.color-temperature-grid{grid-template-columns: 1fr;}
.color-temperature-grid > .color-temperature-panel:nth-child(1){order: 2;}
.color-temperature-grid > .color-temperature-panel:nth-child(2){order: 1;}
.color-temperature-grid > .color-temperature-panel:nth-child(3){order: 3;}
.color-temperature-grid > .color-temperature-panel:nth-child(4){order: 4;}
.color-temperature-grid > .color-temperature-panel--text:nth-child(1),
.color-temperature-grid > .color-temperature-panel--text:nth-child(4){justify-content: center; text-align: center;}
.color-temperature-panel--text{padding: 48px 24px;}
.color-temperature-panel-inner .color-temperature-list{display: table; margin-left: auto; margin-right: auto; text-align: left;}
.color-temperature-panel--image img{height: auto; object-fit: contain;}
}

@media screen and (max-width: 767px){
.m-font-18{font-size: 18px; line-height: 24px;}
.m-font-16{font-size: 16px; line-height: 20px;}
.hero-text .display-2{font-size: 8vw;}
.hero-text .btn-fine{margin-top: 24px;}
.poor-lighting-text{max-width: min(92%, 475px);}
.poor-lighting-text-main{font-size: clamp(28px, 7.2vw, 28px); line-height: clamp(34px, 8.6vw, 34px);}
.poor-lighting-text-sub{font-size: clamp(32px, 8.4vw, 32px); line-height: clamp(40px, 10.4vw, 40px);}
.brightness-box, .light-tab-text-list{padding-top: 40px;}
.color-temperature-panel--text{padding: 24px 16px;}
.light-tab-text-item{margin-top: 16px; padding: 16px;}
.light-bar-box{flex-wrap: wrap; gap: 24px;}
.light-bar-item-1, .light-bar-item-3{order: 1;}
.light-bar-box, .light-bar-item-2, .light-bar-item-top, .light-bar-item-bottom{gap: 16px;}
.light-bar-item-1, .light-bar-item-3, .light-bar-item-top-1, .light-bar-item-top-2, .light-bar-item-bottom-1, .light-bar-item-bottom-2{width: calc(50% - 8px);}
.light-bar-item-top-1, .light-bar-item-top-2, .light-bar-item-bottom-1, .light-bar-item-bottom-2{order: 2;}
.light-bar-box img{width: 100%;}
.light-bar-item-2{width: 100%;}
.finesse-aura-item > img{max-width: 220px;}
.finesse-aura-item-text h1{font-size: 24px;}
.finesse-aura-item ul li{font-size: 16px; line-height: 22px;}

}

@media screen and (max-width: 650px){
.hero-text{margin-top: 90px;}
.poor-lighting-copy{top: 50%;}
.poor-lighting-text-main{font-size: 20px; line-height: 24px;}
.poor-lighting-text-sub{font-size: 24px; line-height: 28px;}
.finesse-aura-img{position: relative;}
.finesse-aura-item{padding: 0 0 48px; margin-top: -100px;}
.finesse-aura-item-text h1{max-width: 300px; margin: 16px auto 0;}
}