/* Styles retained only for the approved opening and its header. */
:root{color-scheme: dark; --ink: #fff; --muted: #aaaebc; --blue: #174bff; --line: #ffffff24; --header: 94px; --font: Inter,Arial,sans-serif;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth; scroll-padding-top: 90px; background: rgb(0, 0, 0);}
body{margin: 0px; background: rgb(0, 0, 0); color: var(--ink); font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased;}
button, a{-webkit-tap-highlight-color: transparent;}
button{font: inherit;}
button, a{touch-action: manipulation;}
button{color: inherit; cursor: pointer;}
a{color: inherit; text-decoration: none;}
button{border: 0px; background: none;}

img{max-width: 100%; display: block;}
p{line-height: 1.6;}
h1, h2, p{margin-top: 0px;}
h1, h2{font-weight: 300; letter-spacing: -0.055em; line-height: 1.03;}
h2{font-size: clamp(38px, 4.1vw, 70px); margin-bottom: 24px;}



.announcement{height: 38px; display: flex; align-items: center; justify-content: center; gap: 9px; background: rgb(16, 16, 21); font-size: 12px; position: absolute; top: 0px; left: 0px; width: 100%; z-index: 30;}
.announcement span{font-weight: 600;}
.site-header{height: var(--header); position: fixed; left: 0px; right: 0px; top: 38px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 38px; padding: 0px 42px; transition: top 0.3s, background 0.3s, transform 0.3s;}
.site-header.scrolled{top: 0px; background: rgba(5, 5, 9, 0.79); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06);}
.brand{flex-shrink: 0;}
.brand img{width: 94px; height: auto;}
.site-header nav{display: flex; gap: clamp(28px, 5vw, 96px); margin-right: auto;}
.site-header nav button{padding: 18px 0px; font-size: 15px; font-weight: 500;}
.nav-actions{display: flex; align-items: center; gap: 26px;}
.nav-product{font-size: 13px; color: rgb(176, 176, 184);}
.nav-product b{color: rgb(255, 255, 255); font-weight: 500;}
.icon-button{width: 36px; height: 36px; display: grid; place-items: center; padding: 7px;}
.icon-button svg{width: 23px; height: 23px; fill: none; stroke: currentcolor; stroke-width: 1.4;}
.pill{display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 50px; padding: 0px 24px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.208); transition: background 0.2s, transform 0.2s;}

.pill.primary{background: var(--blue); border-color: var(--blue);}

.menu-toggle{display: none;}
.chapter{position: relative; height: 150vh; background: rgb(0, 0, 0);}
.chapter.hero{height: 190vh;}
.scene{height: 100svh; position: sticky; top: 0px; overflow: hidden; background: rgb(0, 0, 0); isolation: isolate;}

.hero .scene-media{object-position: center center; opacity: 0.9;}
.hero-shade{position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.133) 20%, transparent 40%, rgb(0, 0, 0) 100%); z-index: -1;}

.hero-copy{position: absolute; top: 55%; left: 4%; right: 4%; text-align: center; transform: translateY(-15%);}
.eyebrow{text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 500; margin-bottom: 16px;}
.hero h1{font-size: clamp(64px, 8.6vw, 148px); margin-bottom: 12px; line-height: 1;}
.hero h1 span{background: linear-gradient(120deg, rgb(99, 132, 255), rgb(20, 38, 253) 72%) text; color: transparent;}
.hero-line{font-size: clamp(22px, 2.8vw, 46px); font-weight: 300; letter-spacing: -0.045em; margin-bottom: 22px;}
.text-button{display: inline-flex; gap: 10px; align-items: center; padding: 10px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.314); font-size: 14px;}

.hero-details{position: absolute; left: 42px; top: 160px; display: flex; gap: 10px;}
.hero-details span{font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; max-width: 95px; border-left: 1px solid rgba(255, 255, 255, 0.44); padding-left: 10px; line-height: 1.5;}
.scroll-cue{position: absolute; bottom: 24px; left: 0px; right: 0px; text-align: center; text-transform: uppercase; font-size: 10px; letter-spacing: 0.16em; display: grid; justify-content: center; gap: 12px;}
.scroll-cue span{height: 32px; width: 1px; background: linear-gradient(rgb(255, 255, 255), transparent); margin: auto;}
.scene-copy{position: absolute; left: 5%; top: 16%; max-width: 570px;}
.scene-copy > p:not(.eyebrow){font-size: 17px; max-width: 430px; color: rgb(196, 197, 204);}
.bottom-stats{position: absolute; bottom: 9%; left: 5%; display: flex; gap: 65px;}
.bottom-stats strong{font-size: 54px; font-weight: 300; letter-spacing: -0.05em;}
.bottom-stats strong span{font-size: 18px; margin-left: 5px;}
.bottom-stats p{font-size: 13px; color: rgb(173, 174, 185); margin: 9px 0px 0px;}







.scene-copy, .hero-copy, .bottom-stats{will-change: transform, opacity;}
@media (max-width: 850px){:root{--header: 72px;}
.announcement{font-size: 10px; height: 28px;}
.site-header{top: 28px; padding: 0px 22px; gap: 20px;}
.brand img{width: 75px;}
.site-header nav, .nav-product, .nav-actions > .pill{display: none;}
.nav-actions{gap: 10px;}
.menu-toggle{display: grid;}
.hero .scene-media{object-position: center center; width: 180%; max-width: none; left: -40%;}
.hero-copy{top: auto; bottom: 17%; transform: none;}
.hero h1{font-size: clamp(50px, 10.7vw, 88px);}
.hero-line{font-size: 30px;}
.hero-copy .eyebrow{font-size: 10px;}
.hero-details{left: 24px; top: 118px;}
.scene-copy{top: 15%; left: 7%; right: 7%; max-width: none;}
.scene-copy > p:not(.eyebrow){font-size: 15px; max-width: 300px;}
.scene-copy .eyebrow{font-size: 10px;}
h2{font-size: clamp(36px, 8.8vw, 55px);}
.bottom-stats{left: 7%; right: 7%; bottom: 16%; gap: 20px; justify-content: space-between;}
.bottom-stats strong{font-size: 38px;}
.bottom-stats strong span{font-size: 12px;}
.bottom-stats p{font-size: 11px;}



.scroll-cue{bottom: 88px;}



.chapter{height: 135vh;}
.chapter.hero{height: 170vh;}}
.hero-copy{top: 49%; left: 5%; right: auto; text-align: left; transform: translateY(-15%);}
.hero h1{font-size: clamp(76px, 8vw, 138px); line-height: 0.96;}
.hero-line{font-size: clamp(24px, 2.3vw, 40px);}
.hero .hero-art{object-position: center center; opacity: 1;}
.hero-shade{background: linear-gradient(rgba(0, 0, 0, 0.133), transparent 70%, rgba(0, 0, 0, 0.533));}
.hero-statement{position: absolute; left: 5%; bottom: 15%; font-size: clamp(46px, 6vw, 98px); font-weight: 300; letter-spacing: -0.055em; line-height: 1.02; opacity: 0; pointer-events: none;}

.feature-hotspot{position: absolute; right: 24%; top: 40%; display: flex; align-items: center; gap: 12px; font-size: 12px; text-align: left;}
.hotspot-plus{display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; font-size: 24px; background: rgba(2, 4, 20, 0.4); backdrop-filter: blur(12px); transition: background 0.25s, transform 0.25s;}
.feature-hotspot:hover .hotspot-plus{background: var(--blue); transform: scale(1.12);}
.feature-hotspot > span:last-child{max-width: 90px; line-height: 1.4; text-shadow: rgb(0, 0, 0) 0px 1px 10px;}
































































































































































































































@media (min-width: 1800px){.scene-copy{top: 16%;}
.scene-copy h2{font-size: 78px;}
.scene-copy > p:not(.eyebrow){font-size: 21px;}



}
@media (max-width: 1050px){.scene-copy h2{font-size: 44px;}













}
@media (max-width: 700px){.hero .hero-art{width: 155%; height: 82%; left: -52%; top: 7%; object-fit: cover; object-position: 66% center;}
.hero-copy{inset: auto 7% 19%; transform: none; text-align: left;}
.hero h1{font-size: clamp(54px, 14vw, 84px);}
.hero-line{font-size: 25px;}
.hero-copy .text-button{font-size: 12px;}
.hero-shade{background: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.533) 60%, rgb(0, 0, 0) 90%);}
.hero-statement{left: 7%; bottom: 22%; font-size: 50px;}
.scene-copy{top: 14%; left: 7%; right: 7%; max-width: none;}
.scene-copy h2{font-size: clamp(35px, 9.2vw, 47px);}
.scene-copy > p:not(.eyebrow){font-size: 14px; line-height: 1.6; max-width: 330px;}
.scene-copy .eyebrow{font-size: 9px; margin-bottom: 14px;}


.feature-hotspot{right: 16%; top: 52%; font-size: 10px;}
.hotspot-plus{width: 34px; height: 34px; font-size: 20px;}
.feature-hotspot > span:last-child{max-width: 65px;}
.bottom-stats{bottom: 18%;}
.bottom-stats strong{font-size: 31px;}
.bottom-stats p{font-size: 10px;}





































































































































.footer-top .brand img{width: 74px;}



































}
.hero .hero-orbit{opacity: 0; object-fit: cover; object-position: center center; z-index: -2;}


.menu-open .announcement{z-index: 41;}
.menu-open .site-header{background: rgb(5, 7, 10);}

.scene-copy{transition: opacity 0.15s, translate 0.2s;}






@media (max-width: 700px){.hero .hero-orbit{width: 155%; height: 82%; left: -52%; top: 7%; object-position: 66% center;}
.scene-copy > p:not(.eyebrow){font-size: 15px;}





.text-button{font-size: 12px; min-height: 36px;}































}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
*{animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;}
.chapter, .chapter.hero{height: 100svh;}
.scene{position: relative;}

.hero-statement, .hero-orbit{display: none;}}


@media (max-width: 700px){




.scene-copy > p:not(.eyebrow){font-size: 16px;}
}
@media (max-width: 700px){

}




@media (max-width: 700px){



}
@media (max-height: 650px){.scene{height: 780px;}
.chapter, .chapter.hero{height: 1200px;}}




@media (max-width: 700px){



}
@media (max-width: 700px){


}


.cinematic .chapter.hero{height: 360svh;}









.hero .hero-art, .hero .hero-orbit{left: 0px; top: 11%; width: 100%; height: 84%; max-width: none; object-fit: contain; object-position: center center; transform: none;}
.hero .hero-orbit{transition: opacity 0.18s;}
.hero-copy{top: 39%; left: 7%; right: auto; transform: none;}
.hero-shade{background: none; pointer-events: none;}
.hero-details{left: 7%;}
.hero h1{font-size: clamp(70px, 7.4vw, 140px);}
.hero-line{font-size: clamp(24px, 2.3vw, 40px);}
.hero-statement{display: none;}






.scene-copy, .hero-copy{will-change: auto;}
@media (max-width: 850px){.hero .hero-art, .hero .hero-orbit{left: -85%; top: 12%; width: 200%; height: 49%; object-fit: contain; object-position: center center;}
.hero-copy{inset: auto 7% 15%; transform: none;}
.hero h1{font-size: clamp(52px, 13vw, 88px);}
.hero-line{font-size: 25px; margin-bottom: 8px;}
.hero-copy .eyebrow{margin-bottom: 10px;}
.hero-details{display: none;}
.hero .scroll-cue{bottom: 86px; font-size: 8px; gap: 7px;}
.hero .scroll-cue span{height: 20px;}



}
@media (prefers-reduced-motion: reduce){.hero-copy{transform: none !important; opacity: 1 !important;}
.scene-copy{opacity: 1 !important; translate: none !important;}
.scene{opacity: 1 !important;}}
:root{--header: 80px; --stage-height: calc(100svh - var(--header));}
html{scroll-padding-top: var(--header);}
body{overflow-x: clip;}
.announcement{display: none;}
.site-header, .site-header.scrolled{top: 0px; height: var(--header); background: rgba(5, 5, 7, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.043); backdrop-filter: blur(16px);}
main{padding-top: var(--header);}
.chapter, .chapter.hero{height: auto; min-height: var(--stage-height); scroll-margin-top: var(--header);}
.chapter > .scene{position: relative; top: auto; height: max(720px,var(--stage-height)); visibility: visible; opacity: 1; pointer-events: auto;}
.scene-copy{translate: none; transform: none; opacity: 1; max-width: 42%; top: 11%; left: 6%;}
.scene-copy h2{font-size: clamp(38px, 4vw, 70px);}
.scene-copy > p:not(.eyebrow){font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6;}

.product-story{position: relative; background: rgb(0, 0, 0);}
.travel-stage{position: relative; background: rgb(0, 0, 0); isolation: isolate;}
.travel-atmosphere{position: absolute; inset: 0px; overflow: hidden; pointer-events: none; z-index: 0;}
.travel-glow{position: absolute; inset: -12%; background: radial-gradient(at 32% 50%, rgba(17, 41, 85, 0.5), transparent 49%); opacity: 0.3;}
.travel-underlay{position: absolute; left: -15%; top: 2%; width: 88%; height: 84%; max-width: none; object-fit: contain; opacity: 0; filter: brightness(0.8); mask-image: linear-gradient(90deg, transparent 5%, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 48%, transparent 72%); transform-origin: 50% 50%; will-change: transform, opacity;}
.travelling-product{position: absolute; z-index: 1; left: 72%; top: 4%; height: 88%; aspect-ratio: 840 / 1468; transform: translateX(-50%); pointer-events: none; will-change: transform;}
.travel-poster, .travel-poster img, .travelling-product canvas{position: absolute; inset: 0px; display: block; width: 100%; height: 100%; object-fit: contain;}
.travelling-product canvas{opacity: 0;}
.travelling-product canvas.ready{opacity: 1;}
.travelling-product{mask-image: linear-gradient(transparent, rgb(0, 0, 0) 3%, rgb(0, 0, 0) 94%, transparent); mask-size: 100% 100%;}
html:not(.travel-enabled) .travelling-product{height: calc(var(--stage-height) * .88);}
html:not(.travel-enabled) .story-clarity{background: rgb(7, 10, 17);}
.product-story .story-panel{background: transparent; position: relative; z-index: 2; min-height: var(--stage-height); height: var(--stage-height);}
.product-story .story-panel > .scene{background: transparent; height: 100%; overflow: hidden;}
.product-story .hero-copy{inset: 36% auto auto 7%; text-align: left; transform: none; max-width: 45%;}
.product-story .hero h1{font-size: clamp(62px, 7.3vw, 136px); line-height: 1; white-space: nowrap;}
.product-story .line-clip{display: block; overflow: hidden; padding: 0.07em 0.06em 0.12em 0px; margin: -0.07em -0.06em -0.12em 0px;}
.product-story .line-text{display: block; will-change: transform, opacity;}
.product-story .hero h1 .line-clip, .product-story .hero h1 .line-text{color: rgb(255, 255, 255); background: none;}
.product-story .hero h1 .title-accent{color: transparent; background: linear-gradient(120deg, rgb(99, 132, 255), rgb(20, 38, 253) 72%) text;}
.product-story .hero-line{font-size: clamp(24px, 2.3vw, 40px);}
.product-story .hero-details{left: 7%; top: 7%;}
.product-story .scroll-cue{bottom: 5%; left: 7%; right: auto; text-align: left; justify-content: start;}
.product-story .scroll-cue span{margin-left: 0px; height: 28px;}
.product-story .scene-copy{top: 26%; left: 7%; max-width: 40%;}
.product-story .scene-copy h2{font-size: clamp(38px, 4.1vw, 70px);}
.product-story .scene-copy > p:not(.eyebrow){max-width: 430px;}
.product-story .bottom-stats{left: 7%; right: auto; width: max-content; justify-content: flex-start; bottom: 16%; gap: clamp(22px, 3.5vw, 65px);}
.product-story .bottom-stats strong{font-size: clamp(29px, 3.2vw, 54px);}
.product-story .feature-hotspot{right: 7%; top: auto; bottom: 13%; z-index: 3;}
.travel-footer{display: none;}
.travel-enabled .product-story{height: calc(var(--stage-height) * 3.2);}
.travel-enabled .travel-stage{position: sticky; top: var(--header); height: var(--stage-height); overflow: hidden;}
.travel-enabled .product-story .story-panel{position: absolute; inset: 0px; min-height: 0px; pointer-events: none; will-change: transform;}
.travel-enabled .story-panel a, .travel-enabled .story-panel button{pointer-events: auto;}
.travel-enabled:not(.travel-paused) .story-clarity .line-text, .travel-enabled:not(.travel-paused) .story-clarity .eyebrow, .travel-enabled:not(.travel-paused) .story-clarity .scene-copy > p:not(.eyebrow), .travel-enabled:not(.travel-paused) .story-clarity .bottom-stats > div, .travel-enabled:not(.travel-paused) .story-clarity .feature-hotspot{opacity: 0;}
.travel-enabled .story-panel > .scene{will-change: transform;}
.travel-enabled .travel-footer{display: flex; position: absolute; z-index: 4; bottom: 3%; left: 7%; right: 7%; align-items: center; justify-content: space-between; font-size: 11px; letter-spacing: 0.06em; color: rgb(170, 183, 215); opacity: 0; pointer-events: none;}
.travel-footer a{padding: 12px 0px; pointer-events: auto; color: rgb(229, 234, 255); border-bottom: 1px solid rgba(255, 255, 255, 0.208);}
.travel-paused .product-story{height: auto;}
.travel-paused .travel-stage{position: relative; height: auto; overflow: visible;}
.travel-paused .product-story .story-panel{position: relative; inset: auto; height: var(--stage-height); min-height: 660px; pointer-events: auto; transform: none !important;}
.travel-paused .travelling-product{height: calc(var(--stage-height) * .86); top: 25px; transform: translateX(-50%) !important;}
.travel-paused .story-clarity{background: rgb(7, 10, 17);}
.travel-paused .story-clarity .scene-copy{max-width: 65%;}
.travel-paused .travel-footer{display: none;}
.travel-paused .story-clarity .feature-hotspot{right: 7%;}
.travel-paused .story-panel{mask-image: none !important;}
.travel-paused .story-panel > .scene{transform: none !important;}

.travel-paused .scroll-cue{opacity: 1 !important;}
.travel-paused .travel-underlay{display: none;}
.travel-paused .travel-glow{opacity: 0.3 !important; transform: none !important;}
.travel-paused .line-text{will-change: auto;}
.product-story .feature-hotspot .hotspot-plus{transition: background 0.2s, border-color 0.2s, transform 0.2s;}
.product-story .feature-hotspot:hover .hotspot-plus, .product-story .feature-hotspot:focus-visible .hotspot-plus{background: rgb(23, 75, 255); border-color: rgb(113, 147, 255); transform: rotate(90deg);}






















































@media (min-width: 1800px){.product-story .hero-copy{left: 9%;}
.product-story .scene-copy, .product-story .hero-details, .product-story .bottom-stats{left: 9%;}
.travelling-product{left: 70%;}}
@media (max-width: 1000px){.site-header{padding-inline: 24px; gap: 24px;}
.site-header nav{gap: 25px;}
.nav-product{display: none;}
.product-story .hero h1{font-size: clamp(48px, 7.3vw, 76px);}
.product-story .scene-copy h2{font-size: 42px;}
.product-story .scene-copy p{font-size: 16px;}
.product-story .feature-hotspot > span:last-child{display: none;}
.product-story .bottom-stats{gap: 22px;}
.product-story .bottom-stats strong{font-size: 32px;}
.product-story .bottom-stats strong span{font-size: 12px;}}
@media (max-width: 700px){:root{--header: 64px;}
.site-header, .site-header.scrolled{padding-inline: 20px;}
.site-header .brand img{width: 72px;}
.product-story .story-panel > .scene{height: 100%;}
.travelling-product{left: 50%; top: 1%; height: 56%; max-width: 90%;}
.travel-underlay{left: -34%; top: 6%; width: 120%; height: 58%; mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 67%);}
.travel-glow{background: radial-gradient(at 35% 32%, rgba(17, 41, 85, 0.44), transparent 45%);}
html:not(.travel-enabled) .travelling-product{height: calc(var(--stage-height) * .56);}
.travel-enabled:not(.travel-paused) .story-panel{mask-image: linear-gradient(transparent var(--copy-start,57%),#000 calc(var(--copy-start,57%) + 3%));}
.product-story .hero-copy{inset: auto 7% 9%; max-width: none;}
.product-story .hero h1{font-size: clamp(40px, 11.8vw, 66px); line-height: 0.98; margin-bottom: 9px;}
.product-story .hero h1 br{display: none;}
.product-story .hero h1 span{display: block;}
.product-story .hero-line{font-size: 26px; margin-bottom: 10px;}
.product-story .hero-copy .eyebrow{font-size: 10px; margin-bottom: 10px;}
.product-story .hero-details{display: none;}
.product-story .scroll-cue{bottom: 2.5%; left: auto; right: 7%; font-size: 9px; gap: 6px;}
.product-story .scroll-cue span{display: none;}
.product-story .scene-copy{inset: 54% 7% auto; max-width: none;}
.product-story .scene-copy h2{font-size: clamp(28px, 7.5vw, 40px); line-height: 1.06; margin-bottom: 12px;}
.product-story .scene-copy > p:not(.eyebrow){font-size: 14px; line-height: 1.5; max-width: 360px; margin-bottom: 0px;}
.product-story .scene-copy .eyebrow{font-size: 9px; margin-bottom: 10px;}
.product-story .bottom-stats{left: 7%; right: 7%; bottom: 8%; gap: 14px; justify-content: flex-start;}
.product-story .bottom-stats strong{font-size: 28px;}
.product-story .bottom-stats strong span{font-size: 11px;}
.product-story .bottom-stats p{font-size: 9px; margin-top: 5px;}
.product-story .feature-hotspot{right: 8%; top: auto; bottom: 8%;}
.hotspot-plus{width: 36px; height: 36px; font-size: 22px;}
.travel-enabled .travel-footer{left: 7%; right: 7%; bottom: 1%; font-size: 9px;}
.travel-label{display: none;}
.travel-footer a{margin-left: auto;}
.travel-paused .product-story .story-panel{min-height: 660px;}
.travel-paused .travelling-product{height: 360px;}
.travel-paused .story-clarity .scene-copy{max-width: none; top: 20%; bottom: auto;}
.travel-paused .story-clarity .bottom-stats{bottom: 28%;}
.chapter > .scene{height: auto; min-height: var(--stage-height); padding: 50px 7% 48px; display: flex; flex-direction: column; gap: 20px;}
.chapter:not(.story-panel) .scene-copy{position: relative; top: auto; left: auto; right: auto; max-width: none; margin-bottom: 0px; order: 0;}
.chapter:not(.story-panel) .scene-copy h2{font-size: 36px; line-height: 1.07; margin-bottom: 18px;}
.chapter:not(.story-panel) .scene-copy > p:not(.eyebrow){font-size: 16px; max-width: none;}
.chapter:not(.story-panel) .scene-copy .eyebrow{font-size: 10px;}



















































}
@media (max-height: 680px) and (min-width: 701px){.product-story .hero-copy{top: 27%;}
.product-story .hero h1{font-size: clamp(50px, 6.4vw, 82px);}
.product-story .hero-line{font-size: 25px;}
.product-story .scene-copy{top: 12%;}
.product-story .scene-copy h2{font-size: 38px;}
.product-story .scene-copy p{font-size: 15px;}
.product-story .bottom-stats{bottom: 15%;}
.travelling-product{height: 90%; top: 1%;}
.product-story .feature-hotspot{bottom: 14%;}
.product-story .hero-details{top: 3%;}}
@media (max-height: 720px) and (max-width: 700px){.travelling-product{height: 47%;}
.product-story .hero-copy{bottom: 8%;}
.product-story .hero h1{font-size: 39px;}
.product-story .hero-line{font-size: 23px;}
.product-story .scene-copy{bottom: 22%;}
.product-story .scene-copy h2{font-size: 27px;}
.product-story .scene-copy .eyebrow{display: none;}
.product-story .scene-copy > p:not(.eyebrow){font-size: 13px;}
.product-story .bottom-stats{bottom: 8%;}
.product-story .bottom-stats strong{font-size: 25px;}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
.product-story .story-panel{transform: none !important;}
.travel-stage{height: auto;}
.travelling-product{will-change: auto;}
.chapter > .scene{position: relative;}
.story-clarity .scene-copy{max-width: 65%;}
.story-clarity{background: rgb(7, 10, 17);}}
@media (max-height: 720px) and (max-width: 700px){.product-story .scene-copy{top: 51%; bottom: auto;}}
@media (max-height: 500px) and (min-width: 701px){.product-story .hero-copy{top: 16%;}
.product-story .hero-details, .product-story .scroll-cue{display: none;}
.product-story .hero-copy .eyebrow{font-size: 9px; margin-bottom: 12px;}
.product-story .hero h1{font-size: 43px; margin-bottom: 12px;}
.product-story .hero-line{font-size: 20px; margin-bottom: 10px;}
.product-story .hero-copy .text-button{font-size: 11px; min-height: 30px;}
.product-story .scene-copy{top: 12%; max-width: 44%;}
.product-story .scene-copy .eyebrow{font-size: 8px; margin-bottom: 9px;}
.product-story .scene-copy h2{font-size: 28px; margin-bottom: 10px; line-height: 1.03;}
.product-story .scene-copy > p:not(.eyebrow){font-size: 12px; line-height: 1.4; max-width: 290px;}
.product-story .bottom-stats{bottom: 13%; gap: 22px;}
.product-story .bottom-stats strong{font-size: 24px;}
.product-story .bottom-stats p{font-size: 9px; margin-top: 5px;}
.travel-enabled .travel-footer{bottom: 0px; font-size: 8px;}
.product-story .feature-hotspot{bottom: 13%;}
.hotspot-plus{width: 30px; height: 30px; font-size: 20px;}}
@media (max-width: 700px){.travel-paused .story-clarity .scene-copy{max-width: none;}}
@font-face { font-family: "XLED Display"; src: url("assets/RobotoCondensed-Italic.ttf") format("truetype"); font-style: italic; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "XLED Heavy"; src: url("assets/ArchivoBlack.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
:root{--stage-height: 100svh; --header: 70px; --gold: #efb851;}
main{padding-top: 0px;}
.site-header, .site-header.scrolled{height: 70px;}
.reference-active .site-header, .reference-active .site-header.scrolled{background: transparent; backdrop-filter: none; border-color: transparent;}
.reference-active .site-header.scrolled{background: rgba(5, 5, 7, 0.96); border-bottom-color: rgba(255, 255, 255, 0.07);}
.reference-active .brand img{filter: brightness(0) invert(1);}
.reference-active .site-header .pill.primary{background: rgba(8, 9, 10, 0.44); border: 1px solid rgba(255, 255, 255, 0.314); color: rgb(255, 255, 255);}
.reference-active .site-header nav button{font-size: 12px;}
.reference-active .nav-product{font-size: 11px;}
.travel-enabled .product-story{height: calc(100svh * 4.6);}
.travel-enabled .travel-stage{height: 100svh; top: 0px; background: rgb(7, 7, 7);}
.travel-atmosphere{z-index: 0; background: rgb(6, 6, 6);}
.travel-atmosphere > img{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; max-width: none; will-change: transform; transform-origin: 60% 48%;}
.reference-mesh-background{opacity: 0;}
.product-story .travelling-product{z-index: 3; left: 70%; top: 0px; height: 100%; mask-image: none; max-width: none; will-change: transform; isolation: isolate;}
.travelling-product:has(canvas.ready) .travel-poster{opacity: 0;}
.travel-poster{clip-path: polygon(25.2% 9%, 72.5% 4%, 75% 5%, 77% 87%, 83% 90%, 81% 94.9%, 19% 94.9%, 18% 90%, 25% 86%);}
.product-story .story-panel{z-index: 2; mask-image: none !important;}
.product-story .story-panel > .scene{padding: 0px; display: block; overflow: visible; transform-origin: 58% 50%; will-change: transform, opacity;}
.product-story .hero-copy, .product-story .scene-copy, .product-story .feature-copy{position: absolute; inset: 28% auto auto 2.5%; width: 55%; max-width: none; transform: none; text-align: left;}
.product-story .hero-copy{top: 27%; width: 54.5%; text-align: right;}
.product-story .hero h1, .product-story .scene-copy h2, .product-story .feature-copy h2{font-family: "XLED Display", Impact, Arial, sans-serif; font-style: italic; font-weight: 900; font-size: clamp(65px, 10.8vw, 240px); line-height: 0.83; letter-spacing: -0.055em; color: rgb(255, 255, 255); margin: 0px; white-space: nowrap;}
.product-story .line-clip{overflow: visible; padding: 0px; margin: 0px; display: block;}
.product-story .line-text{display: block; transform: none !important; opacity: 1 !important; background: none !important; color: rgb(255, 255, 255) !important;}
.product-story .hero h1 .line-clip{color: rgb(255, 255, 255); background: none;}
.hero-caption{position: absolute; left: 3%; bottom: 7%; font-size: 11px; color: rgb(212, 212, 212); line-height: 1.4; max-width: 32%;}
.hero-caption .eyebrow{font-size: 10px; letter-spacing: 0.12em; margin-bottom: 8px; color: rgb(255, 255, 255);}
.hero-caption > p:not(.eyebrow){font-size: 11px; line-height: 1.4; margin-bottom: 7px;}
.hero-caption .text-button{font-size: 11px; padding: 5px 0px; min-height: 30px;}
.product-story .scroll-cue{left: auto; right: 3%; bottom: 5%; font-size: 9px; align-items: center; justify-content: end; gap: 8px;}
.product-story .scroll-cue span{height: 20px;}
.product-story .scene-copy{top: 27%; left: 3%; width: 58%;}
.product-story .scene-copy .eyebrow{font-size: clamp(9px, 1.1vw, 15px); font-weight: 600; margin-bottom: 18px; color: rgb(255, 255, 255); letter-spacing: 0.09em;}
.product-story .scene-copy h2{font-size: clamp(55px, 8.7vw, 185px); line-height: 0.91; letter-spacing: -0.05em;}
.product-story .scene-copy .clarity-description{font-size: clamp(11px, 1.1vw, 17px); line-height: 1.5; margin: 22px 0px 0px; color: rgb(231, 231, 231); max-width: 75%;}
.product-story .bottom-stats{left: 3%; right: auto; bottom: 7%; gap: 30px; max-width: 55%; color: rgb(255, 255, 255);}
.product-story .bottom-stats strong{font-size: clamp(24px, 2.7vw, 42px); font-weight: 500; letter-spacing: -0.06em;}
.product-story .bottom-stats strong span{font-size: 12px;}
.product-story .bottom-stats p{font-size: 10px; color: rgb(211, 211, 211); margin-top: 5px;}
.product-story .feature-hotspot{right: 3%; bottom: 7%; font-size: 10px; max-width: 15%;}
.product-story .feature-hotspot .hotspot-plus{width: 40px; height: 40px; background: rgba(8, 8, 8, 0.5); flex-shrink: 0;}
.product-story .feature-hotspot:hover .hotspot-plus, .product-story .feature-hotspot:focus-visible .hotspot-plus{background: rgb(97, 69, 16); border-color: var(--gold);}
.travel-enabled:not(.travel-paused) .story-clarity .eyebrow, .travel-enabled:not(.travel-paused) .story-clarity .scene-copy > p:not(.eyebrow), .travel-enabled:not(.travel-paused) .story-clarity .feature-hotspot{opacity: 1;}
.product-story .feature-copy{top: 29%; text-align: right; width: 54.5%;}
.product-story .feature-copy .eyebrow{font-family: Inter, Arial, sans-serif; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; margin-bottom: 20px;}
.product-story .feature-copy h2{font-size: clamp(62px, 10.4vw, 228px);}
.floating-features{position: absolute; right: 2.5%; top: 31%; width: 18%; display: grid; gap: 16px; z-index: 5;}
.floating-features > button, .floating-features > a{display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 20px 16px; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(32, 33, 35, 0.75); border-radius: 14px; backdrop-filter: blur(12px); box-shadow: rgba(0, 0, 0, 0.267) 0px 12px 40px; pointer-events: auto; color: rgb(255, 255, 255); transition: background 0.2s, border-color 0.2s;}
.floating-features small{font-size: 8px; letter-spacing: 0.12em; color: rgb(185, 185, 185);}
.floating-features strong{font-size: clamp(12px, 1.2vw, 18px); font-weight: 500; line-height: 1.2;}
.floating-features span{font-size: 10px; color: rgb(208, 208, 208); line-height: 1.3;}
.floating-features > button:hover, .floating-features > a:hover, .floating-features > :focus-visible{background: rgba(64, 53, 31, 0.863); border-color: rgb(234, 190, 90);}
.feature-stage-cta{position: absolute; bottom: 5%; left: 3%; padding: 10px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); font-size: 12px; pointer-events: auto;}
.product-halo{position: absolute; z-index: 2; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.88); border-radius: 26px; box-shadow: rgba(255, 255, 255, 0.533) 0px 0px 18px, rgba(255, 255, 255, 0.2) 0px 0px 16px inset; opacity: 0;}
.travel-enabled .travel-footer{display: none;}
.travel-enabled:not(.travel-paused) .story-features > .scene{transform: translateX(105%);}
.travel-paused .product-story{height: auto;}
.travel-paused .travel-stage{height: auto; position: relative; overflow: hidden;}
.travel-paused .product-story .story-panel{height: 100svh; min-height: 640px; background: transparent;}
.travel-paused .product-story .story-clarity, .travel-paused .product-story .story-features{background: rgb(8, 9, 12);}
.travel-paused .product-story .travelling-product{top: 0px; height: 100svh; filter: none !important;}
.travel-paused .reference-hero-background{height: 100svh; opacity: 1 !important; transform: none !important;}
.travel-paused .reference-mesh-background, .travel-paused .product-halo{display: none;}
.travel-paused .product-story .story-panel > .scene{transform: none !important; opacity: 1 !important;}
.travel-paused .floating-features > *{opacity: 1 !important; transform: none !important;}
.travel-paused .story-clarity .scene-copy{max-width: none;}
@media (min-aspect-ratio: 2 / 1){.product-story .hero h1, .product-story .feature-copy h2{font-size: 19svh;}
.product-story .hero-copy, .product-story .feature-copy{width: 54%;}
.product-story .scene-copy h2{font-size: 17svh;}}
@media (max-width: 1100px) and (min-width: 701px){.floating-features{gap: 10px;}
.floating-features > button, .floating-features > a{padding: 14px 10px; gap: 5px; border-radius: 10px;}
.floating-features span{font-size: 8px;}
.product-story .feature-copy .eyebrow{font-size: 9px;}
.product-story .feature-hotspot > span:last-child{display: none;}}
@media (max-width: 700px), (max-width: 1000px) and (orientation: portrait){:root{--header: 64px;}
.site-header, .site-header.scrolled{height: 64px;}
.reference-active .site-header{background: rgba(0, 0, 0, 0.333);}
.travel-enabled .product-story{height: calc(100svh * 4.8);}
.travel-atmosphere > img{object-position: 40% center;}
.product-story .hero-copy, .product-story .feature-copy{left: 5%; top: 16%; width: 83%; text-align: left; max-width: none;}
.product-story .hero h1, .product-story .feature-copy h2{font-size: 14.5vw; line-height: 0.87; letter-spacing: -0.045em;}
.product-story .hero h1 .line-clip:first-child{text-align: right; padding-right: 9%;}
.product-story .travelling-product{left: 59%; height: 61%; top: 34%;}
.hero-caption{left: 6%; bottom: 8%; max-width: 40%;}
.hero-caption > p:not(.eyebrow){display: none;}
.hero-caption .eyebrow{font-size: 9px;}
.hero-caption .text-button{font-size: 10px;}
.product-story .scroll-cue{right: 6%; bottom: 2.5%; font-size: 8px;}
.product-story .scene-copy{left: 6%; top: 16%; width: 88%; right: auto; max-width: none;}
.product-story .scene-copy .eyebrow{font-size: 8px; margin-bottom: 12px; display: block;}
.product-story .scene-copy h2{font-size: 11.3vw; line-height: 0.93;}
.product-story .scene-copy .clarity-description{display: none;}
.product-story .bottom-stats{left: 6%; bottom: 5%; right: auto; gap: 18px; max-width: 84%; width: auto; justify-content: flex-start;}
.product-story .bottom-stats strong{font-size: 25px;}
.product-story .bottom-stats strong span{font-size: 10px;}
.product-story .bottom-stats p{font-size: 8px;}
.product-story .feature-hotspot{right: 6%; bottom: 5%; max-width: none;}
.product-story .feature-hotspot .hotspot-plus{width: 36px; height: 36px;}
.product-story .feature-copy{top: 15%;}
.product-story .feature-copy .eyebrow{font-size: 9px; margin-bottom: 16px;}
.product-story .feature-copy h2{font-size: 12.6vw;}
.floating-features{right: 5%; width: 44%; top: 41%; gap: 10px;}
.floating-features > button, .floating-features > a{padding: 14px 11px; gap: 7px; border-radius: 10px;}
.floating-features strong{font-size: 12px;}
.floating-features span{font-size: 9px;}
.floating-features small{font-size: 7px;}
.feature-stage-cta{left: 6%; bottom: 5%; font-size: 11px;}
.product-halo{border-radius: 16px;}
.travel-paused .product-story .travelling-product{height: 61svh; top: 34svh;}
.travel-paused .product-story .story-clarity .scene-copy{top: 20%; max-width: none;}
.travel-paused .product-story .story-clarity .bottom-stats{bottom: 20%;}
.travel-paused .floating-features{width: 88%; top: 43%; left: 6%;}}
@media (max-height: 720px) and (max-width: 700px){.product-story .hero-copy{top: 17%;}
.product-story .hero h1{font-size: 13.5vw;}
.hero-caption{bottom: 7%;}
.product-story .feature-copy{top: 16%;}
.product-story .feature-copy h2{font-size: 11.8vw;}
.floating-features{top: 42%; gap: 8px;}
.floating-features > button, .floating-features > a{padding: 11px 10px; gap: 4px;}
.floating-features span{font-size: 8px;}}
@media (max-height: 500px) and (min-width: 701px){.site-header, .site-header.scrolled{height: 48px;}
.site-header .brand img{width: 65px;}
.nav-actions > .pill{min-height: 32px; font-size: 10px;}
.product-story .hero-copy{top: 27%;}
.product-story .hero h1{font-size: 18.2svh;}
.product-story .scene-copy{top: 23%; width: 57%;}
.product-story .scene-copy h2{font-size: 16svh;}
.product-story .scene-copy .eyebrow{font-size: 8px; margin-bottom: 10px;}
.product-story .scene-copy .clarity-description{display: none;}
.hero-caption{bottom: 5%;}
.hero-caption > p:not(.eyebrow){display: none;}
.hero-caption .eyebrow{margin-bottom: 2px;}
.product-story .bottom-stats{bottom: 5%; gap: 25px;}
.product-story .bottom-stats strong{font-size: 20px;}
.product-story .bottom-stats p{font-size: 8px;}
.product-story .feature-copy{top: 28%;}
.product-story .feature-copy h2{font-size: 17svh;}
.product-story .feature-copy .eyebrow{font-size: 8px; margin-bottom: 12px;}
.floating-features{top: 23%; gap: 8px;}
.floating-features > button, .floating-features > a{padding: 10px; gap: 4px;}
.floating-features small{font-size: 6px;}
.floating-features strong{font-size: 10px;}
.floating-features span{font-size: 8px;}
.feature-stage-cta{font-size: 10px; bottom: 4%;}}
.product-story .hero h1, .product-story .scene-copy h2, .product-story .feature-copy h2{font-family: "XLED Heavy", "Arial Black", Arial, sans-serif; font-weight: 400; font-style: italic; font-size: min(21svh, 12.3vw); line-height: 0.81; letter-spacing: -0.04em;}
.product-story .line-text{display: inline-block; width: max-content; max-width: none; transform-origin: left center; transform: scaleX(var(--line-stretch,1)) !important;}
.product-story .hero-copy, .product-story .feature-copy{left: 2.5%; width: 54.5%; top: 21%; text-align: right;}
.product-story .hero-copy .line-text, .product-story .feature-copy .line-text{transform-origin: right center;}
.product-story .hero-copy .line-clip, .product-story .feature-copy .line-clip{display: flex; justify-content: flex-end;}
.product-story .scene-copy{top: 25%; width: 59%;}
.product-story .scene-copy h2{font-size: min(21svh, 12.3vw); line-height: 0.84;}
.product-story .feature-copy{top: 19%;}
.product-story .feature-copy .eyebrow{margin-bottom: 16px;}
@media (max-width: 700px), (max-width: 1000px) and (orientation: portrait){.product-story .hero-copy, .product-story .feature-copy{left: 6%; top: 16%; width: 82%; text-align: left;}
.product-story .hero h1, .product-story .feature-copy h2{font-size: min(15.2vw, 8svh); line-height: 0.89;}
.product-story .hero-copy .line-clip, .product-story .feature-copy .line-clip{justify-content: flex-start;}
.product-story .hero-copy .line-text, .product-story .feature-copy .line-text{transform-origin: left center;}
.product-story .hero-copy .line-clip:first-child{justify-content: flex-end; padding: 0px;}
.product-story .hero-copy .line-clip:first-child .line-text{transform-origin: right center;}
.product-story .scene-copy{left: 6%; top: 16%; width: 86%;}
.product-story .scene-copy h2{font-size: min(13.8vw, 7.8svh); line-height: 0.94;}
.product-story .feature-copy{top: 16%;}
.product-story .feature-copy h2{font-size: min(13.1vw, 7.6svh);}
.travel-atmosphere > img{object-fit: fill;}}
@media (max-height: 500px) and (min-width: 701px){.product-story .scene-copy{top: 21.5%;}
.product-story .feature-copy{top: 19%;}
.product-story .scene-copy .eyebrow{margin-bottom: 12px;}}
.product-story .story-panel{scroll-margin-top: 0px;}
.motion-still{display: none;}
.travel-paused .reference-active .site-header{background: rgba(5, 5, 7, 0.96); backdrop-filter: blur(16px);}
.travel-paused .motion-still{display: block; position: absolute; left: 73%; top: 0px; height: 100%; width: auto; max-width: none; transform: translateX(-50%); pointer-events: none; z-index: 0;}
.travel-paused .story-panel .scene-copy, .travel-paused .story-panel .feature-copy{z-index: 1;}
@media (max-width: 700px), (max-width: 1000px) and (orientation: portrait){.travel-paused .motion-still{left: 60%; top: 34%; height: 61%;}
.travel-paused .story-clarity .motion-still{height: 54%;}
.travel-paused .story-features .motion-still{left: 34%; top: 38%; height: 49%;}
.travel-paused .product-story .story-clarity .scene-copy{top: 16%;}
.travel-paused .product-story .story-clarity .bottom-stats{bottom: 5%;}
.travel-paused .floating-features{width: 44%; top: 41%; left: auto; right: 5%;}}
@media (min-width: 701px) and (max-width: 1000px) and (orientation: portrait){.product-story .hero-copy, .product-story .feature-copy, .product-story .scene-copy{top: 14%;}
.product-story .scene-copy .eyebrow, .product-story .feature-copy .eyebrow{font-size: 12px;}
.floating-features strong{font-size: 18px;}
.floating-features span{font-size: 13px;}
.floating-features small{font-size: 10px;}
.hero-caption .eyebrow, .hero-caption .text-button{font-size: 13px;}
.product-story .bottom-stats strong{font-size: 32px;}
.product-story .bottom-stats p{font-size: 11px;}}
.travel-paused .product-story .story-panel{height: calc(100svh - var(--header)); min-height: 640px;}
.travel-paused .product-story .story-panel > .scene{height: 100%; min-height: 0px;}
.travel-paused .product-story .travelling-product, .travel-paused .reference-hero-background{height: calc(100svh - var(--header));}
@media (max-width: 700px), (max-width: 1000px) and (orientation: portrait){.travel-paused .product-story .story-panel{min-height: 600px;}
.travel-paused .product-story .travelling-product{height: calc((100svh - var(--header)) * .61); top: calc((100svh - var(--header)) * .34);}}
@media (max-height: 500px) and (min-width: 701px){:root{--header: 48px;}}
.gold-light-field{position: absolute; inset: 0px; mix-blend-mode: screen; pointer-events: none; transform-origin: 60% 53%; will-change: transform, opacity;}
.gold-rays{position: absolute; inset: 0px; width: 100%; height: 100%; max-width: none; object-fit: fill; transform-origin: 60% 53%; opacity: 0.9; animation: 1.8s cubic-bezier(0.12, 0.7, 0.25, 1) 0s 1 normal both paused gold-arrival;}
.gold-rays-echo{opacity: 0; animation: 5.5s linear 1.5s infinite normal none paused gold-sweep;}
.motion-visible .gold-rays{animation-play-state: running;}
@keyframes gold-arrival { 
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.18); opacity: 0.88; }
}
@keyframes gold-sweep { 
  0% { transform: scale(1.05); opacity: 0; }
  24% { opacity: 0.24; }
  72% { opacity: 0.16; }
  100% { transform: scale(1.65); opacity: 0; }
}
.reference-hero-background{filter: brightness(0.58);}
@media (min-width: 1001px), (min-width: 701px) and (orientation: landscape){.product-story .hero-copy{top: calc(var(--composition-top) + var(--composition-height) * .21);}
.product-story .scene-copy{top: calc(var(--composition-top) + var(--composition-height) * .20);}
.product-story .feature-copy{top: calc(var(--composition-top) + var(--composition-height) * .17);}
.product-story .feature-copy{width: 51.5%;}
.product-story .hero h1, .product-story .scene-copy h2, .product-story .feature-copy h2{font-size: min(calc(var(--composition-height) * .21),12.3vw);}
.floating-features{top: calc(var(--composition-top) + var(--composition-height) * .25);}
.product-story .bottom-stats{bottom: 7%;}
.hero-caption{bottom: 7%;}
.travel-paused .product-story .hero-copy, .travel-paused .product-story .feature-copy{top: 24%;}
.travel-paused .product-story .scene-copy{top: 23%;}
.travel-paused .product-story .hero h1, .travel-paused .product-story .scene-copy h2, .travel-paused .product-story .feature-copy h2{font-size: min(19svh, 12.3vw);}
.travel-paused .floating-features{top: 29%;}
.travel-paused .product-story .travelling-product, .travel-paused .motion-still{top: var(--header); height: calc(100svh - var(--header) * 2);}}
.travel-paused .gold-light-field{height: calc(100svh - var(--header)); transform: none !important; opacity: 0.8 !important;}
.travel-paused .gold-rays{animation: auto ease 0s 1 normal none running none; transform: scale(1.18); opacity: 0.8;}
.travel-paused .gold-rays-echo{display: none;}
@media (prefers-reduced-motion: reduce){.gold-rays{animation: auto ease 0s 1 normal none running none; transform: scale(1.18);}
.gold-rays-echo{display: none;}}
@media (min-width: 1001px), (min-width: 701px) and (orientation: landscape){.travel-paused .product-story .travelling-product, .travel-paused .motion-still{height: min(calc(100svh - var(--header) * 2),64vw); top: calc((100svh - min(calc(100svh - var(--header) * 2),64vw)) / 2);}
.travel-paused .story-features .motion-still{left: 67%;}}
:root{--accent: #efb851; --ink: #fff; --panel: #141516; --muted: #b9b9bd; --line: #ffffff24;}
body{background: rgb(8, 9, 10);}
.site-header .pill.primary, .pill.primary{background: rgb(239, 184, 81); color: rgb(20, 16, 10); border: 1px solid rgb(239, 184, 81);}
.site-header .brand img{filter: brightness(0) invert(1);}
.pill{border-color: rgba(255, 255, 255, 0.27);}









































































































































































































































.footer-top .brand img{filter: brightness(0) invert(1);}















@media (max-width: 1100px){













}
@media (max-width: 900px){






























































}
@media (max-width: 550px){

































































































}















@media (max-width: 550px){



}

















































































































































@media (max-width: 1000px){






















}
@media (max-width: 550px){
























}



















@media (max-width: 550px){

}
@media (max-height: 720px) and (max-width: 700px){
}