/* ================================================================
   Macring Hero Slider
   ================================================================ */

.macring-hero-slider {
    --mhs-red: #e03a1a;
    --mhs-navy: #0d1b2a;
    --mhs-deep: #020c1b;
    --mhs-white: #ffffff;
    --mhs-autoplay: 6200ms;
    --mhs-stats-h: 86px;
    --mhs-header-h: 80px;

    position: relative;
    width: 100%;
    height: calc(100vh - var(--mhs-header-h));
    height: calc(100svh - var(--mhs-header-h));
    overflow: hidden;
    background: var(--mhs-deep);
    color: var(--mhs-white);
    isolation: isolate;
    @media (max-width: 768px) {
        margin-bottom: 0px;
    }
}

.mhs__track,
.mhs__slide,
.mhs__bg,
.mhs__content {
    position: absolute;
    inset: 0;
}

.mhs__slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 680ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 680ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mhs__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mhs__bg {
    z-index: 0;
    overflow: hidden;
}

.mhs__bg-img,
.mhs__bg-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mhs__bg-img--base {
    z-index: 0;
}

.mhs__bg-img--detail {
    z-index: 1;
    top: -10.11%;
    height: 120.33%;
}

.mhs__bg-video {
    z-index: 2;
}

.mhs__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(
            90deg,
            rgba(13, 27, 42, 0.85) 0%,
            rgba(13, 27, 42, 0.50) 50%,
            rgba(13, 27, 42, 0) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2, 12, 27, 0.40) 0%,
            rgba(2, 12, 27, 0) 38%,
            rgba(2, 12, 27, 0) 68%,
            rgba(2, 12, 27, 0.40) 100%
        );
}

.mhs__content {
    z-index: 4;
}

.mhs__container {
    position: relative;
    width: min(100%, 1400px);
    height: 100%;
    margin: 0 auto;
    padding: 0 25px;
}

.mhs__inner {
    position: absolute;
    left: 25px;
    top: 50%;
    width: min(620px, calc(100% - 50px));
    transform: translateY(-50%);
}

.mhs__slide-number {
    position: absolute;
    top: 286px;
    right: 25px;
    z-index: 1;
    display: block;
    width: 226px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 80px;
    font-weight: 700;
    line-height: 80px;
    letter-spacing: 2.08px;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.app-container .macring-hero-slider .mhs__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.832px;
    color: var(--mhs-red);
}

.app-container .macring-hero-slider .mhs__eyebrow::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 1px;
    background: var(--mhs-red);
}

.app-container .macring-hero-slider h1.mhs__heading,
.app-container .macring-hero-slider h2.mhs__heading {
    margin: 0 0 20px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px;
    letter-spacing: 2.08px;
    color: rgba(255, 255, 255, 0.85);
}

.app-container .macring-hero-slider .mhs__heading p,
.app-container .macring-hero-slider .mhs__heading div,
.app-container .macring-hero-slider .mhs__heading span,
.app-container .macring-hero-slider .mhs__heading strong,
.app-container .macring-hero-slider .mhs__heading b {
    display: block;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.app-container .macring-hero-slider .mhs__heading strong,
.app-container .macring-hero-slider .mhs__heading b {
    font-weight: 700;
    font-style: normal;
    color: #ffffff;
}

.app-container .macring-hero-slider .mhs__description {
    max-width: 448px;
    margin: 0 0 32px;
}

.app-container .macring-hero-slider .mhs__description p {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.60);
}

.mhs__ctas {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.app-container .macring-hero-slider .mhs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease, background 180ms ease;
}

.app-container .macring-hero-slider .mhs__btn--primary {
    gap: 12px;
    padding: 14px 28px;
    background: var(--mhs-red);
    color: #ffffff;
}

.app-container .macring-hero-slider .mhs__btn--primary::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 12px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 5.75H12.75M8.25 10.75L12.75 5.75L8.25 0.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.app-container .macring-hero-slider .mhs__btn--primary:hover,
.app-container .macring-hero-slider .mhs__btn--primary:focus-visible {
    background: #c93518;
    color: #ffffff;
    outline: none;
}

.app-container .macring-hero-slider .mhs__btn--secondary {
    min-height: 44px;
    padding: 14px 0;
    background: transparent;
    color: #e8eaed;
}

.app-container .macring-hero-slider .mhs__btn--secondary:hover,
.app-container .macring-hero-slider .mhs__btn--secondary:focus-visible {
    color: #ffffff;
    outline: none;
}

.mhs__nav {
    position: absolute;
    right: max(32px, calc((100vw - 1200px) / 2 + 25px));
    bottom: 112px;
    z-index: 8;
    display: flex;
    align-items: center;
}

.mhs__arrow {
    display: none;
}

.mhs__dots {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.mhs__dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.4px;
    width: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.mhs__dot-label {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 10.4px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.832px;
    color: rgba(255, 255, 255, 0.25);
    transition: color 180ms ease;
}

.mhs__dot:hover .mhs__dot-label,
.mhs__dot.is-active .mhs__dot-label {
    color: rgba(255, 255, 255, 0.90);
}

.mhs__dot-progress {
    position: relative;
    display: block;
    width: 40px;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}

.mhs__dot.is-running .mhs__dot-progress::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: var(--mhs-red);
    transform-origin: left center;
    animation: mhs-progress var(--mhs-autoplay) linear forwards;
}

@keyframes mhs-progress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.mhs__stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    height: var(--mhs-stats-h);
    background: rgba(2, 12, 27, 0.75);
}

.mhs__stats-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: 100%;
}

.mhs__stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 20px 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.mhs__stat:last-child {
    border-right: 0;
}

.mhs__stat-number {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 25.6px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0.256px;
    color: #ffffff;
}

.mhs__stat-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: 10.4px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.832px;
    color: rgba(255, 255, 255, 0.40);
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .macring-hero-slider {
        --mhs-header-h: 68px;
    }

    .mhs__inner {
        top: 270px;
    }

    .mhs__slide-number {
        right: 20px;
    }

    .mhs__nav {
        right: 20px;
    }

    .mhs__stat {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 767px) {
    .macring-hero-slider {
        --mhs-stats-h: 184px;
    }

    .mhs__bg-img--detail {
        left: -58%;
        width: 180%;
        object-position: center;
    }

    .mhs__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(13, 27, 42, 0.92) 0%,
                rgba(13, 27, 42, 0.70) 62%,
                rgba(13, 27, 42, 0.18) 100%
            ),
            linear-gradient(
                180deg,
                rgba(2, 12, 27, 0.35) 0%,
                rgba(2, 12, 27, 0) 48%,
                rgba(2, 12, 27, 0.52) 100%
            );
    }

    .mhs__inner {
        left: 24px;
        width: calc(100% - 48px);
    }

    .mhs__slide-number {
        top: 108px;
        right: 24px;
        width: auto;
        font-size: 56px;
        line-height: 56px;
    }

    .app-container .macring-hero-slider h1.mhs__heading,
    .app-container .macring-hero-slider h2.mhs__heading {
        font-size: 54px;
        line-height: 56px;
        letter-spacing: 1.2px;
    }

    .app-container .macring-hero-slider .mhs__description {
        max-width: 340px;
    }

    .app-container .macring-hero-slider .mhs__description p {
        font-size: 15px;
        line-height: 24px;
    }

    .mhs__nav {
        right: 24px;
        bottom: calc(var(--mhs-stats-h) + 28px);
    }

    .mhs__stats-inner {
        grid-auto-flow: row;
        grid-auto-columns: initial;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    .mhs__stat {
        min-height: 92px;
        padding: 18px 16px;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mhs__stat:nth-child(2n) {
        border-right: 0;
    }

    .mhs__stat:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .mhs__stat-label {
        white-space: normal;
    }
}

@media (max-width: 479px) {
    .app-container .macring-hero-slider h1.mhs__heading,
    .app-container .macring-hero-slider h2.mhs__heading {
        font-size: 46px;
        line-height: 48px;
    }

    .mhs__ctas {
        gap: 18px;
    }

    .app-container .macring-hero-slider .mhs__btn {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .app-container .macring-hero-slider .mhs__btn--primary {
        padding-left: 22px;
        padding-right: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mhs__slide {
        transition: none;
    }

    .mhs__dot.is-running .mhs__dot-progress::after {
        animation: none;
        transform: scaleX(1);
    }
}