/* The homepage hero has its own composition; the rest of the page keeps its container. */
.hero.home-composition-hero { isolation: isolate; overflow: hidden; background: #050c15; }
.home-hero-composition { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; background: #050c15; }
.home-hero-composition__stage { position: absolute; left: 50%; top: 50%; width: var(--home-scene-width, 100%); height: var(--home-scene-height, 100%); transform: translate(-50%, -50%); }
.home-hero-composition__poster, .home-hero-composition__video, .home-hero-composition__lights { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; }
.home-hero-composition__poster { object-fit: cover; }
.home-hero-composition__video { opacity: 0; object-fit: fill; }
.home-hero-composition.is-ready .home-hero-composition__video { opacity: 1; }
.home-hero-composition__light { position: absolute; left: 0; top: 0; width: 4.22721268%; height: 7.82396088%; max-width: none; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
    .home-hero-composition.is-ready .home-hero-composition__video { opacity: 0; }
}
.home-hero-layout { position: relative; }
.home-hero-visual { position: absolute; top: 48px; right: 12px; width: calc(50% - 24px); z-index: 2; --home-statistics-space: 140px; }
.home-hero-visual-space { aspect-ratio: 843 / 687; }
/* A consistent composition keeps the figures in place when the slide changes. */
.home-hero-visual .home-slide-artwork { position: relative; aspect-ratio: 843 / 687; }
.home-hero-visual .home-hero-devices { position: absolute; right: 0; bottom: -8%; width: 100%; height: calc(104% - var(--home-statistics-space)); object-fit: contain; object-position: right bottom; }
.home-hero-statistics { position: absolute; z-index: 2; inset: 0 -24px auto 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; color: #fff; text-align: center; pointer-events: none; }
.home-hero-statistic { position: relative; display: grid; grid-template-rows: 44px auto auto; row-gap: 5px; padding: 0 6px; transform: translateX(var(--home-light-offset, 0px)); }
.home-hero-statistic + .home-hero-statistic::before { content: ''; position: absolute; left: var(--home-divider-left, 0px); top: 12px; bottom: 0; width: 1px; background: rgba(67, 157, 230, .45); }
.home-hero-statistic dt { display: contents; }
.home-hero-statistic dt img { grid-row: 1; justify-self: center; width: 48px; height: 44px; object-fit: contain; }
.home-hero-statistic dt span { grid-row: 3; font-size: 14px; line-height: 1.2; font-weight: 400; }
.home-hero-statistic dd { grid-row: 2; margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; }
@media (min-width: 1200px) {
    /* Spread the composition across the screen instead of the normal content width. */
    .home-composition-hero .home-hero-layout,
    .home-composition-hero .slider-nav-container > .container { width: 94%; max-width: 1920px; }
    .home-composition-hero .home-slider-item .order-md-1 { width: 44%; padding-left: clamp(28px, 3vw, 64px); }
    .home-composition-hero .home-slider-item .order-md-2 { width: 56%; }
    .home-hero-visual { width: calc(56% - 24px); }
    .home-hero-visual-space,
    .home-hero-visual .home-slide-artwork { aspect-ratio: 843 / 620; }
    .home-hero-statistics { left: 0; right: 0; }
    .home-hero-statistics:not(.is-aligned) { visibility: hidden; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .home-hero-visual { --home-statistics-space: 100px; }
    .home-hero-statistics { left: 12px; right: -12px; }
    .home-hero-statistic { grid-template-rows: 30px auto auto; padding: 0 3px; }
    .home-hero-statistic dt img { width: 34px; height: 30px; }
    .home-hero-statistic dt span { font-size: 11px; }
    .home-hero-statistic dd { font-size: 24px; }
}
/* WP Rocket can defer Slick until the first interaction: retain a single-slide layout meanwhile. */
.home-composition-hero .home-slider:not(.slick-initialized) .home-slider-item:not(:first-child) { display: none; }
@media (max-width: 767px) {
    /* Match the artwork's lower blue edge while retaining a dark text area. */
    .home-hero-composition { background: #01122e; }
    .home-hero-visual { position: relative; top: auto; right: auto; width: 100%; display: flex; flex-direction: column; gap: 28px; margin-bottom: 24px; }
    .home-hero-visual-space { display: none; }
    .home-hero-statistics { position: relative; inset: auto; }
    .home-hero-visual .home-slide-artwork { aspect-ratio: 820 / 485; max-width: 440px; margin-inline: auto; }
    .home-hero-visual .home-hero-devices { width: 96%; height: 100%; bottom: 0; right: 2%; object-position: center; }
    .home-hero-statistic { grid-template-rows: 28px auto auto; row-gap: 4px; padding: 0 3px; }
    .home-hero-statistic dt img { width: 32px; height: 28px; }
    .home-hero-statistic dt span { font-size: 11px; }
    .home-hero-statistic dd { font-size: 23px; }
    /* The mobile scene retains the original 900px crop and top alignment. */
    .home-hero-composition__stage { top: 0; width: var(--home-scene-width, max(100%, 900px)); height: var(--home-scene-height, auto); aspect-ratio: 1514 / 818; transform: translateX(-50%); }
    .home-hero-composition::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(1,18,46,.06), rgba(1,18,46,.18) 240px, #01122e 520px); }
}