.awh-root {
    position: relative !important;

    /* IMPORTANT:
       Place the element directly inside the full-width Hero section.
       No breakout math, so Bricks container padding cannot distort it. */
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: var(--awh-bg, #272011) !important;
}

.awh-root .awh-viewport {
    position: relative !important;

    /* Image/slider = 92%, right social strip = 8% */
    width: 92% !important;
    max-width: 92% !important;

    /* Original desktop design proportion: 92vw / 47.9167vw ≈ 1.92 */
    height: auto !important;
    aspect-ratio: 1.92 / 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

.awh-root .awh-stage {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}

.awh-root .awh-panel {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translate3d(100%, 0, 0);
    pointer-events: none !important;
}

.awh-root .awh-panel.is-active {
    opacity: 1 !important;
    visibility: visible !important;

    transform: translate3d(0, 0, 0);
    pointer-events: auto !important;
}

.awh-root .awh-panel.is-animate,
.awh-root .awh-panel.is-entering,
.awh-root .awh-panel.is-leaving {
    opacity: 1 !important;
    visibility: visible !important;
}

.awh-root .awh-panel.is-animate {
    transition:
        transform var(--awh-transition-duration, 1100ms) cubic-bezier(.22,.61,.36,1),
        opacity var(--awh-fade-duration, 900ms) ease !important;
}

/* ---------------------------------------------------------
   MODE: SLIDE + FADE
   --------------------------------------------------------- */

.awh-root[data-transition-type="slide-fade"] .awh-panel.is-entering {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

.awh-root[data-transition-type="slide-fade"] .awh-panel.is-leaving {
    transform: translate3d(-100%, 0, 0) !important;
    opacity: 0 !important;
}

/* ---------------------------------------------------------
   MODE: FADE ONLY
   No horizontal movement; panels cross-fade in place.
   --------------------------------------------------------- */

.awh-root[data-transition-type="fade"] .awh-panel {
    transform: none !important;
}

.awh-root[data-transition-type="fade"] .awh-panel.is-animate {
    transition:
        opacity var(--awh-fade-duration, 900ms) ease !important;
}

.awh-root[data-transition-type="fade"] .awh-panel.is-entering {
    transform: none !important;
    opacity: 1 !important;
}

.awh-root[data-transition-type="fade"] .awh-panel.is-leaving {
    transform: none !important;
    opacity: 0 !important;
}

/* ---------------------------------------------------------
   MODE: SLIDE ONLY
   --------------------------------------------------------- */

.awh-root[data-transition-type="slide"] .awh-panel.is-animate {
    transition:
        transform var(--awh-transition-duration, 1100ms) cubic-bezier(.22,.61,.36,1) !important;
}

.awh-root[data-transition-type="slide"] .awh-panel.is-entering {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

.awh-root[data-transition-type="slide"] .awh-panel.is-leaving {
    transform: translate3d(-100%, 0, 0) !important;
    opacity: 1 !important;
}

.awh-root .awh-image {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
}

.awh-root .awh-image img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    object-fit: var(--awh-image-fit, cover) !important;
    object-position: var(--awh-image-position, center center) !important;
}

.awh-root .awh-image::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    pointer-events: none !important;

    background: var(--awh-overlay-color, #272011) !important;
    opacity: var(--awh-overlay-opacity, 0) !important;
}

.awh-root .awh-content {
    position: absolute !important;
    z-index: 20 !important;

    left: var(--awh-left, 8%) !important;

    bottom: calc(
        var(--awh-bottom, 50px) +
        var(--awh-dot-size, 20px) +
        var(--awh-button-dot-gap, 25px)
    ) !important;

    width: var(--awh-content-width, 44%) !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.awh-root .awh-title {
    display: block !important;

    width: 100% !important;

    margin: 0 0 1.5vw !important;
    padding: 0 !important;

    color: var(--awh-title-color, #fff) !important;

    font-family: "League Spartan", Arial, sans-serif !important;
    font-size: var(--awh-title-size, clamp(2.5rem, 2.708333vw, 6.5rem)) !important;
    font-weight: var(--awh-title-weight, 800) !important;
    line-height: var(--awh-title-lh, 1.03) !important;

    text-transform: uppercase !important;
}

.awh-root .awh-text {
    display: block !important;

    width: 82% !important;

    margin: 0 0 var(--awh-text-button-gap, 15px) !important;
    padding: 0 !important;

    color: var(--awh-text-color, #fff) !important;

    font-family: "League Spartan", Arial, sans-serif !important;
    font-size: var(--awh-text-size, clamp(1rem, 1.09375vw, 2.625rem)) !important;
    font-weight: var(--awh-text-weight, 400) !important;
    line-height: var(--awh-text-lh, 1.45) !important;
}

.awh-root .awh-text p {
    margin: 0 !important;

    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

.awh-root .awh-button {
    display: inline-block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: var(--awh-button-color, #fff) !important;

    font-family: "League Spartan", Arial, sans-serif !important;
    font-size: var(--awh-button-size, clamp(.875rem, .833333vw, 2rem)) !important;
    font-weight: var(--awh-button-weight, 600) !important;
    line-height: var(--awh-button-lh, 1.1) !important;

    text-align: left !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.awh-root .awh-dots {
    position: absolute !important;
    z-index: 30 !important;

    left: var(--awh-left, 8%) !important;
    bottom: var(--awh-bottom, 50px) !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: var(--awh-dot-size, 20px) !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: var(--awh-dot-gap, 10px) !important;

    pointer-events: auto !important;
}

.awh-root .awh-dot {
    position: relative !important;
    z-index: 31 !important;

    display: block !important;

    flex: 0 0 var(--awh-dot-size, 20px) !important;

    width: var(--awh-dot-size, 20px) !important;
    min-width: var(--awh-dot-size, 20px) !important;
    max-width: var(--awh-dot-size, 20px) !important;

    height: var(--awh-dot-size, 20px) !important;
    min-height: var(--awh-dot-size, 20px) !important;
    max-height: var(--awh-dot-size, 20px) !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 2px solid var(--awh-dot-color, #fff) !important;
    border-radius: 50% !important;

    background: transparent !important;

    opacity: 1 !important;
    appearance: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    pointer-events: auto !important;
}

.awh-root .awh-dot.is-active {
    background: var(--awh-dot-color, #fff) !important;
}


@media (max-width: 74.999rem) {

    .awh-root {
        --awh-left: 2rem;
    }

    .awh-root .awh-viewport {
        width: 92% !important;
        max-width: 92% !important;

        aspect-ratio: auto !important;
        height: 38rem !important;
    }

    .awh-root .awh-content {
        width: min(40rem, 68%) !important;
    }
}

@media (max-width: 47.999rem) {

    .awh-root {
        --awh-left: 1.5rem;
    }

    .awh-root .awh-viewport {
        width: 92% !important;
        max-width: 92% !important;

        aspect-ratio: auto !important;
        height: 43rem !important;
    }

    .awh-root .awh-content {
        left: 1.5rem !important;

        width: calc(100% - 3rem) !important;
        max-width: none !important;
    }

    .awh-root .awh-title {
        width: 100% !important;

        font-size: clamp(2rem, 8vw, 2.6rem) !important;
        line-height: 1.02 !important;

        overflow: visible !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .awh-root .awh-text {
        width: 100% !important;

        font-size: 1.05rem !important;
        line-height: 1.45 !important;
    }

    .awh-root .awh-dots {
        left: 1.5rem !important;
    }
}