/* =========================================
   HERO
   Reusable Hero / Slider Component

   Available modes:

   hero--screen
   hero--ratio
   hero--laptop
   hero--contained

   Example:

   <section class="hero hero--screen">
========================================= */


/*
 * HERO DESKTOP MODES
 *
 * image     — Single image hero
 * screen    — Full viewport hero
 * ratio     — Full-width 16:9 hero
 * laptop    — Laptop/display ratio hero
 * contained — Complete image inside centered slider
 * split     — Text left + image right
 */


/* =========================================
   HERO BASE
========================================= */

.hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--color-white);
}


/* =========================================
   HERO MODE 1
   SCREEN / VIEWPORT FIT
========================================= */

/*
   Best for:
   - Premium websites
   - Corporate websites
   - Foundation websites
   - Full visual impact

   The hero fills the available screen
   below the header.

   Desktop:
   header ≈ 94px

   Mobile:
   header ≈ 76px
*/

.hero--image {

    height: var(
        --hero-image-height,
        120px
    );

    min-height: 0;

    max-height: none;
}


.hero--screen {

    height: calc(100vh - 94px);

    min-height: 600px;

    max-height: 950px;
}


/* =========================================
   HERO MODE 2
   FULL-WIDTH 16:9
========================================= */

/*
   Best for:
   - When the complete 16:9 image
     should determine the hero height
   - Image-heavy websites
   - Photography / visual portfolios

   The hero itself follows the image ratio.
*/

.hero--ratio {

    aspect-ratio: 16 / 9;

    height: auto;

    min-height: 0;

    max-height: none;
}


/* =========================================
   HERO MODE 3
   LAPTOP / DISPLAY RATIO
========================================= */

/*
   This mode is intended for a hero designed
   specifically around a laptop / desktop
   display ratio.

   The ratio is kept as a CSS variable so
   you can change it easily for another client.

   Current default:
   16:9

   If another laptop uses 16:10, change:

   --hero-laptop-ratio: 16 / 10;
*/

.hero--laptop {

    --hero-laptop-ratio: 16 / 9;

    aspect-ratio: var(--hero-laptop-ratio);

    height: auto;

    min-height: 0;

    max-height: none;
}


/*
   Example for a 16:10 laptop:

   .hero--laptop {
       --hero-laptop-ratio: 16 / 10;
   }
*/


/* =========================================
   HERO MODE 4
   CONTAINED 16:9
========================================= */

/*
   Best for:
   - When the complete image must be visible
   - No image cropping
   - Smaller centered slider
   - Background visible around the image

   The hero itself acts as a presentation
   area, while the actual slider is a centered
   16:9 box.
*/

/* .hero--contained {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 620px;

    padding: 0px 0;

    background: var(--color-surface);
} */



.hero--contained {
    display: flex;

    align-items: center;
    justify-content: center;

    height: auto;
    min-height: 0;

    /* padding: 24px 0; */

    background: var(--color-surface);

    box-sizing: border-box;
}


/*
   Contained slider dimensions
*/

.hero--contained .hero-slider {

    position: relative;

    width: min(
        1200px,
        calc(100% - 48px)
    );

    aspect-ratio: 16 / 9;

    height: auto;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 20px;
}


/* =========================================
   SLIDER
========================================= */

.hero-slider {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;
}


/*
   In contained mode the slider must not
   use absolute positioning relative to
   the outer hero.
*/

.hero--contained .hero-slider {

    position: relative;

    inset: auto;
}


/* =========================================
   SLIDE
========================================= */

.hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 500ms ease,
        visibility 500ms ease;
}


.hero-slide.is-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 1;
}


/* =========================================
   HERO IMAGE
========================================= */

/* =========================================
   HERO IMAGE
========================================= */

.hero-slide > picture {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}


.hero-slide > picture > img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: var(
    --hero-image-position,
    center center
);
}


/* =========================================
   CONTAINED MODE IMAGE
========================================= */

/*
   IMPORTANT:

   In contained mode we want the complete
   16:9 image visible.

   Therefore use contain instead of cover.
*/

.hero--contained .hero-slide > picture > img {

    object-fit: contain;

    object-position: center center;

    background: var(--color-surface);
}


/* =========================================
   OVERLAY
========================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.40) 45%,
            rgba(0, 0, 0, 0.08) 80%,
            rgba(0, 0, 0, 0) 100%
        );

    pointer-events: none;
}


/*
   Slightly lighter overlay for contained
   presentations because the image itself
   is already visually contained.
*/

.hero--contained .hero-overlay {

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.60) 0%,
            rgba(0, 0, 0, 0.35) 45%,
            rgba(0, 0, 0, 0.05) 80%,
            rgba(0, 0, 0, 0) 100%
        );
}


/* =========================================
   CONTENT
========================================= */

.hero-content {

    position: relative;

    z-index: 3;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    padding-top: var(
        --hero-content-padding-top,
        60px
    );

    padding-right: var(
        --hero-content-padding-right,
        0px
    );

    padding-bottom: var(
        --hero-content-padding-bottom,
        60px
    );

    padding-left: var(
        --hero-content-padding-left,
        0px
    );

    box-sizing: border-box;
}



/* =========================================
   CONTENT ALIGNMENT
========================================= */

.hero-content[data-align="left"] {
    align-items: flex-start;
    text-align: left;
}

.hero-content[data-align="center"] {
    align-items: center;
    text-align: center;
}

.hero-content[data-align="right"] {
    align-items: flex-end;
    text-align: right;
}




/*
   The contained hero content should stay
   inside the 16:9 slider.
*/

.hero--contained .hero-content {

    position: absolute;

    inset: 0;

    height: 100%;

    padding-top:
        var(--hero-content-padding-top, 60px);

    padding-right:
        var(--hero-content-padding-right, 0px);

    padding-bottom:
        var(--hero-content-padding-bottom, 60px);

    padding-left:
        var(--hero-content-padding-left, 0px);

    box-sizing: border-box;
}


/* =========================================
   EYEBROW
========================================= */

.hero-eyebrow {

    margin-top: var(
        --hero-eyebrow-margin-top,
        0px
    );

    margin-right: var(
        --hero-eyebrow-margin-right,
        0px
    );

    margin-bottom: var(
        --hero-eyebrow-margin-bottom,
        16px
    );

    margin-left: var(
        --hero-eyebrow-margin-left,
        0px
    );

    color: var(--color-white);

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* =========================================
   HEADING
========================================= */

.hero h1,
.hero h2,
.hero-heading {

    max-width:
        var(--hero-content-max-width, 720px);

    margin-top:
        var(--hero-heading-margin-top, 0px);

    margin-right:
        var(--hero-heading-margin-right, 0px);

    margin-bottom:
        var(--hero-heading-margin-bottom, 0px);

    margin-left:
        var(--hero-heading-margin-left, 0px);

    color: var(--color-white);

    font-size: clamp(
        2.5rem,
        5vw,
        4.5rem
    );

    line-height: 1.05;

    font-weight: 700;
}


/* =========================================
   DESCRIPTION
========================================= */

.hero-description {

    max-width: 620px;

    margin-top:
        var(--hero-description-margin-top, 24px);

    margin-right:
        var(--hero-description-margin-right, 0px);

    margin-bottom:
        var(--hero-description-margin-bottom, 0px);

    margin-left:
        var(--hero-description-margin-left, 0px);

    color: rgba(255, 255, 255, 0.92);

    font-size: 1.05rem;

    line-height: 1.7;
}


/* =========================================
   ACTIONS
========================================= */

.hero-actions {

    display: flex;

    flex-direction:
        var(--hero-actions-direction, row);

    flex-wrap:
        var(--hero-actions-wrap, nowrap);

    justify-content:
        var(--hero-actions-justify, flex-start);

    gap:
        var(--hero-actions-gap, 12px);

    margin-top:
        var(--hero-actions-margin-top, 30px);

    margin-right:
        var(--hero-actions-margin-right, 0px);

    margin-bottom:
        var(--hero-actions-margin-bottom, 0px);

    margin-left:
        var(--hero-actions-margin-left, 0px);
}


/* =========================================
   HERO CTA BUTTONS
========================================= */

.hero-actions .btn {

    display: inline-flex;

    align-items: center;

    

    justify-content:
        var(
            --hero-button-justify-content,
            center
        );

    text-align:
        var(
            --hero-button-text-align,
            center
        );

    box-sizing: border-box;

    text-decoration: none;

    cursor: pointer;

    appearance: none;

    background:
        var(
            --hero-button-background,
            transparent
        );

    color:
        var(
            --hero-button-color,
            inherit
        );

    border:
        var(
            --hero-button-border,
            1px solid transparent
        );

    border-radius:
        var(
            --hero-button-border-radius,
            0px
        );

    padding-top:
        var(
            --hero-button-padding-top,
            12px
        );

    padding-right:
        var(
            --hero-button-padding-right,
            24px
        );

    padding-bottom:
        var(
            --hero-button-padding-bottom,
            12px
        );

    padding-left:
        var(
            --hero-button-padding-left,
            24px
        );

    margin-top:
        var(
            --hero-button-margin-top,
            0px
        );

    margin-right:
        var(
            --hero-button-margin-right,
            0px
        );

    margin-bottom:
        var(
            --hero-button-margin-bottom,
            0px
        );

    margin-left:
        var(
            --hero-button-margin-left,
            0px
        );

    font-size:
        var(
            --hero-button-font-size,
            1rem
        );

    font-weight:
        var(
            --hero-button-font-weight,
            700
        );

    line-height:
        var(
            --hero-button-line-height,
            1.2
        );

    letter-spacing:
        var(
            --hero-button-letter-spacing,
            normal
        );

    text-transform:
        var(
            --hero-button-text-transform,
            none
        );

    transition:
        background-color 200ms ease,
        color 200ms ease,
        border-color 200ms ease,
        transform 200ms ease;
}


/* =========================================
   PRIMARY BUTTON
========================================= */

/* .hero-actions .btn-primary {
} */


/* =========================================
   SECONDARY BUTTON
========================================= */

/* .hero-actions .btn-secondary {
} */


/* =========================================
   BUTTON HOVER
========================================= */

.hero-actions .btn:hover {

    background:
        var(
            --hero-button-hover-background,
            var(--hero-button-background, transparent)
        );

    color:
        var(
            --hero-button-hover-color,
            var(--hero-button-color, inherit)
        );

    border:
        var(
            --hero-button-hover-border,
            var(--hero-button-border, transparent)
        );
}




/* =========================================
   CONTAINED MODE ARROWS
========================================= */

.hero--contained .hero-arrow-prev {

    left: 20px;
}


.hero--contained .hero-arrow-next {

    right: 20px;
}

/* =========================================
   CONTAINED MODE — ARROWS INSIDE IMAGE
========================================= */

.hero--contained .hero-arrow-prev {
    left: max(
        20px,
        calc((100% - min(1200px, calc(100% - 48px))) / 2 + 20px)
    );
}

.hero--contained .hero-arrow-next {
    right: max(
        20px,
        calc((100% - min(1200px, calc(100% - 48px))) / 2 + 20px)
    );
}


/* =========================================
   DOTS
========================================= */

.hero-dots {

    position: absolute;

    left: 50%;

    bottom: 24px;

    z-index: 5;

    display: flex;

    gap: 8px;

    transform: translateX(-50%);
}


.hero-dot {

    width: 9px;

    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.55);

    cursor: pointer;

    transition:
        width 200ms ease,
        background-color 200ms ease;
}


.hero-dot.is-active {

    width: 26px;

    border-radius: 10px;

    background: var(--color-white);
}


/* =========================================
   HERO MODE 6
   SPLIT
========================================= */

/*
   Layout:

   ┌─────────────────────────────────────┐
   │                                     │
   │  CONTENT             IMAGE          │
   │                                     │
   │  Eyebrow             ┌──────────┐   │
   │  Heading             │          │   │
   │  Description         │  IMAGE   │   │
   │  CTA                 │          │   │
   │                      └──────────┘   │
   │                                     │
   └─────────────────────────────────────┘

   The entire composition is one slide.
*/

.hero--split,
.hero--split-reverse {

    height:
        calc(100vh - 94px);

    min-height:
        620px;

    max-height:
        850px;

    background:
        var(--color-surface);
}


/* =========================================
   SPLIT SLIDE
========================================= */




.hero--split .hero-slide,
.hero--split-reverse .hero-slide {

    display: flex;

    align-items: stretch;

    width: 100%;
    height: 100%;
}

/* =========================================
   SPLIT LAYOUT
========================================= */

.hero-split-layout {

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            var(--hero-split-content-width, 50%)
        )
        minmax(
            0,
            var(--hero-split-image-width, 50%)
        );

    gap:
        var(--hero-split-gap, 0px);

    align-items: stretch;

    box-sizing: border-box;
}


/* =========================================
   SPLIT REVERSE
   Image Left + Content Right
========================================= */

/* =========================================
   SPLIT REVERSE
   Image Left + Content Right
========================================= */

.hero--split-reverse .hero-split-layout {
    grid-template-columns:
        minmax(
            0,
            var(--hero-split-image-width, 50%)
        )
        minmax(
            0,
            var(--hero-split-content-width, 50%)
        );
}

.hero--split-reverse .hero-split-content {
    grid-column: 2;
    grid-row: 1;
}

.hero--split-reverse .hero-split-media {
    grid-column: 1;
    grid-row: 1;
}


/* =========================================
   SPLIT CONTENT
========================================= */



.hero--split .hero-split-content.hero-content--desktop,
.hero--split-reverse .hero-split-content.hero-content--desktop {

    position: relative;

    z-index: 3;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    min-width: 0;

    box-sizing: border-box;

    background:
        var(
            --hero-split-content-background,
            #ffffff
        );

    padding-top:
        var(--hero-content-padding-top, 60px);

    padding-right:
        var(--hero-content-padding-right, 0px);

    padding-bottom:
        var(--hero-content-padding-bottom, 60px);

    padding-left:
        var(--hero-content-padding-left, 80px);
}


/* =========================================
   SPLIT MEDIA
========================================= */

.hero-split-media {

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 620px;

    overflow: var(
        --hero-split-image-overflow,
        hidden
    );

    border-radius:
        var(
            --hero-split-image-radius,
            0px
        );
}


/* =========================================
   SPLIT IMAGE
========================================= */

/* =========================================
   SPLIT IMAGE
========================================= */

.hero-split-media > picture {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}


.hero-split-media > picture > img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        var(
            --hero-split-image-fit,
            cover
        );

    object-position:
        var(
            --hero-split-image-position,
            center center
        );
}


/* =========================================
   SPLIT VIDEO
========================================= */

.hero-split-media > .hero-video {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        var(
            --hero-split-image-fit,
            cover
        );

    object-position:
        var(
            --hero-split-image-position,
            center center
        );
}


/* =========================================
   SPLIT OVERLAY
========================================= */

.hero-split-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;
}


/* =========================================
   SPLIT HEADING
========================================= */

.hero--split .hero-heading,
.hero--split-reverse .hero-heading {

    max-width:
        var(--hero-content-max-width, 620px);

    color:
        var(--color-text);
}


/* =========================================
   SPLIT EYEBROW
========================================= */

.hero--split .hero-eyebrow,
.hero--split-reverse .hero-eyebrow {

    color:
        var(--color-primary);
}


/* =========================================
   SPLIT DESCRIPTION
========================================= */

.hero--split .hero-description,
.hero--split-reverse .hero-description {

    max-width: 620px;

    color:
        var(--color-text-light);
}


/* =========================================
   SPLIT ACTIONS
========================================= */

.hero--split .hero-actions,
.hero--split-reverse .hero-actions {

    margin-top: 30px;
}


/* =========================================
   SPLIT ARROWS
========================================= */



.hero--split .hero-arrow-prev,
.hero--split-reverse .hero-arrow-prev {
    left: 20px;
}


.hero--split .hero-arrow-next,
.hero--split-reverse .hero-arrow-next {
    right: 20px;
}



/* =========================================
   NORMAL HERO IMAGE WRAPPER
========================================= */

.hero-image-wrapper {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =========================================
   NORMAL HERO IMAGE
========================================= */

.hero-image-wrapper > picture {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}


.hero-image-wrapper > picture > img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        var(
            --hero-image-position,
            center center
        );
}


/* =========================================
   NORMAL HERO VIDEO
========================================= */

.hero-image-wrapper > .hero-video {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        var(
            --hero-image-position,
            center center
        );
}



.hero-content--mobile {
    display: none;
}


/* =========================================
   MOBILE STACKED
========================================= */

@media (max-width: 900px) {

    /* =====================================
   DESKTOP / MOBILE CONTENT VISIBILITY
===================================== */

.hero-content--desktop {
    display: none;
}

.hero-content--mobile {
    display: flex;
}

/* Split mode needs higher specificity */
.hero--mobile-stacked
.hero-split-content.hero-content--desktop,

.hero--mobile-stacked-reverse
.hero-split-content.hero-content--desktop {
    display: none;
}

.hero--mobile-stacked
.hero-split-content.hero-content--mobile,

.hero--mobile-stacked-reverse
.hero-split-content.hero-content--mobile {
    display: flex;
}

    .hero--mobile-stacked {

        height: auto;

        min-height: 0;

        max-height: none;

        overflow: hidden;
    }


    /* =====================================
       SLIDER
    ===================================== */

    .hero--mobile-stacked .hero-slider {

    position: relative;

    width: 100%;

    height: auto;

    display: grid;

    aspect-ratio: auto;

    overflow: visible;
    }



   /* =====================================
   MOBILE STACKED DOTS
   Dots sit immediately below image
===================================== */



    .hero--mobile-stacked .hero-dots {

        position: relative;

        left: auto;
        bottom: auto;

        z-index: 10;

        width: 100%;

        min-height: 40px;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        transform: none;

        box-sizing: border-box;

        padding: 8px 0;

        background: var(--color-surface);
    }



   /* =====================================
   MOBILE STACKED-REVERSE DOTS
   Dots sit immediately below image
===================================== */



    .hero--mobile-stacked-reverse .hero-dots {

        position: relative;

        left: auto;
        bottom: auto;

        z-index: 10;

        width: 100%;

        min-height: 40px;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        transform: none;

        box-sizing: border-box;

        padding: 8px 0;

        background: var(--color-surface);
    }






    /* =====================================
       SLIDE
    ===================================== */

    .hero--mobile-stacked .hero-slide {

        position: relative;

        inset: auto;

        grid-area: 1 / 1;

        width: 100%;

        height: auto;

        min-height: 0;

        display: flex;

        flex-direction: column;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }


    .hero--mobile-stacked
    .hero-slide.is-active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        z-index: 1;
    }


    /* =====================================
       SPLIT LAYOUT BECOMES STACKED
    ===================================== */

    .hero--mobile-stacked
    .hero-split-layout {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

        gap: 0;

        align-items: stretch;
    }


    /* =====================================
       MOBILE IMAGE
    ===================================== */

    .hero--mobile-stacked
    .hero-split-media,

    .hero--mobile-stacked
    .hero-image-wrapper {

        position: relative;

        inset: auto;

        width: 100%;

        height: auto;

        min-height: 0;

        aspect-ratio:
            var(
                --hero-mobile-ratio,
                4 / 5
            );

        flex-shrink: 0;

        overflow: hidden;

        order: 1;
    }


    .hero--mobile-stacked
.hero-split-media > picture,

.hero--mobile-stacked
.hero-image-wrapper > picture {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;
}


.hero--mobile-stacked
.hero-split-media > picture > img,

.hero--mobile-stacked
.hero-image-wrapper > picture > img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position:
        var(
            --hero-mobile-image-position,
            center center
        );
}


/* =========================================
   MOBILE STACKED VIDEO
========================================= */

.hero--mobile-stacked
.hero-split-media > .hero-video,

.hero--mobile-stacked
.hero-image-wrapper > .hero-video {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position:
        var(
            --hero-mobile-image-position,
            center center
        );
}


    /* =====================================
       MOBILE OVERLAY
    ===================================== */

    .hero--mobile-stacked
    .hero-split-overlay,

    .hero--mobile-stacked
    .hero-overlay {

        position: absolute;

        inset: 0;

        z-index: 2;

        pointer-events: none;
    }


    /* =====================================
       MOBILE CONTENT
    ===================================== */

    .hero--mobile-stacked
    .hero-split-content.hero-content--mobile,

    .hero--mobile-stacked
    .hero-content--mobile,

    .hero--mobile-stacked-reverse
    .hero-split-content.hero-content--mobile,

    .hero--mobile-stacked-reverse
    .hero-content--mobile {

        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        box-sizing: border-box;

        padding-top:
            var(
                --hero-content-padding-top,
                40px
            );

        padding-right:
            var(
                --hero-content-padding-right,
                24px
            );

        padding-bottom:
            var(
                --hero-content-padding-bottom,
                40px
            );

        padding-left:
            var(
                --hero-content-padding-left,
                24px
            );

        background:
            var(
                --hero-content-background,
                #ffffff
            );
    }

    /* =====================================
        MOBILE STACKED CONTENT ORDER
        ===================================== */

        .hero--mobile-stacked
        .hero-split-content.hero-content--mobile,

        .hero--mobile-stacked
        .hero-content--mobile {

            order: 2;
        }


    /* =====================================
       MOBILE SPLIT CONTENT OVERRIDES
    ===================================== */

    .hero--mobile-stacked
    .hero-split-content.hero-content--mobile {

        justify-content: flex-start;
    }


    


    
}




/* =========================================
   MOBILE STACKED REVERSE
========================================= */

@media (max-width: 900px) {

    .hero--mobile-stacked-reverse {

        height: auto;

        min-height: 0;

        max-height: none;

        overflow: hidden;
    }


    /* =====================================
       SLIDER
    ===================================== */

    .hero--mobile-stacked-reverse
    .hero-slider {

        position: relative;

        width: 100%;

        height: auto;

        display: grid;
    }


    /* =====================================
       SLIDE
    ===================================== */

    .hero--mobile-stacked-reverse
    .hero-slide {

        position: relative;

        inset: auto;

        grid-area: 1 / 1;

        width: 100%;

        height: auto;

        min-height: 0;

        display: flex;

        flex-direction: column;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }


    .hero--mobile-stacked-reverse
    .hero-slide.is-active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        z-index: 1;
    }


    /* =====================================
       SPLIT LAYOUT
    ===================================== */

    .hero--mobile-stacked-reverse
    .hero-split-layout {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

        gap: 0;

        align-items: stretch;
    }


    /* =====================================
       CONTENT FIRST
    ===================================== */

    .hero--mobile-stacked-reverse
    .hero-split-content.hero-content--mobile {

        order: 1;

        position: relative;

        width: 100%;

        height: auto;

        min-height: 0;

        box-sizing: border-box;

        justify-content: flex-start;

        background:
            var(
                --hero-content-background,
                #ffffff
            );
    }

    /* .hero--mobile-stacked-reverse
.hero-split-content.hero-content--mobile {

    order: 1;
    justify-content: flex-start;
} */

.hero--mobile-stacked-reverse
.hero-split-content.hero-content--mobile,

.hero--mobile-stacked-reverse
.hero-content--mobile {

    order: 1;
    justify-content: flex-start;
}

    /* =====================================
       IMAGE SECOND
    ===================================== */

    .hero--mobile-stacked-reverse
    .hero-split-media,

    .hero--mobile-stacked-reverse
    .hero-image-wrapper {

        order: 2;

        position: relative;

        width: 100%;

        height: auto;

        min-height: 0;

        aspect-ratio:
            var(
                --hero-mobile-ratio,
                4 / 5
            );

        overflow: hidden;
    }


    .hero--mobile-stacked-reverse
.hero-split-media > picture,

.hero--mobile-stacked-reverse
.hero-image-wrapper > picture {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;
}


.hero--mobile-stacked-reverse
.hero-split-media > picture > img,

.hero--mobile-stacked-reverse
.hero-image-wrapper > picture > img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position:
        var(
            --hero-mobile-image-position,
            center center
        );
}


/* =========================================
   MOBILE STACKED-REVERSE VIDEO
========================================= */

.hero--mobile-stacked-reverse
.hero-split-media > .hero-video,

.hero--mobile-stacked-reverse
.hero-image-wrapper > .hero-video {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position:
        var(
            --hero-mobile-image-position,
            center center
        );
}


    /* =====================================
       OVERLAY
    ===================================== */

    .hero--mobile-stacked-reverse
    .hero-split-overlay,

    .hero--mobile-stacked-reverse
    .hero-overlay {

        position: absolute;

        inset: 0;

        pointer-events: none;
    }


    
}







/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {


    .hero--image {
    height: var(
        --hero-mobile-image-height,
        100px
    );
}


    /* -------------------------------------
       SCREEN MODE
    ------------------------------------- */

    .hero--screen {

        height: calc(100svh - 76px);

        min-height: 560px;

        max-height: none;
    }


    /* -------------------------------------
       16:9 MODE
    ------------------------------------- */

    .hero--ratio {

        aspect-ratio: 16 / 9;

        height: auto;

        min-height: 0;

        max-height: none;
    }


    /* -------------------------------------
       LAPTOP MODE
    ------------------------------------- */

    .hero--laptop {

        height: auto;

        min-height: 0;

        max-height: none;
    }


    /* -------------------------------------
       CONTAINED MODE
    ------------------------------------- */

    .hero--contained {

        min-height: auto;

        padding: 24px 0;
    }


    .hero--contained .hero-slider {

        width: calc(100% - 32px);

        aspect-ratio: 16 / 9;

        max-width: none;
    }


    /* -------------------------------------
       CONTENT
    ------------------------------------- */

    .hero-content {

        padding-top: 40px;

        padding-bottom: 40px;
    }


    .hero--contained .hero-content {

        padding-top: 32px;

        padding-bottom: 32px;
    }


    /* -------------------------------------
       IMAGE
    ------------------------------------- */

    .hero--mobile-stacked
    .hero-image-wrapper img,
    .hero--mobile-stacked-reverse
    .hero-image-wrapper img {

        object-position:
            var(
                --hero-mobile-image-position,
                center center
            );
    }


    /* -------------------------------------
       OVERLAY
    ------------------------------------- */

    .hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.18) 0%,
                rgba(0, 0, 0, 0.55) 65%,
                rgba(0, 0, 0, 0.75) 100%
            );
    }


    /* -------------------------------------
       CONTAINED OVERLAY
    ------------------------------------- */

    .hero--contained .hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.12) 0%,
                rgba(0, 0, 0, 0.45) 65%,
                rgba(0, 0, 0, 0.70) 100%
            );
    }


    /* -------------------------------------
       HEADING
    ------------------------------------- */

    .hero h1,
    .hero h2 {

        font-size: clamp(
            2rem,
            8vw,
            3rem
        );
    }


    /* -------------------------------------
       DESCRIPTION
    ------------------------------------- */

    .hero-description {

        font-size: 0.95rem;

    
    margin-top: var(--hero-description-margin-top, 24px);

    }


    




    .hero--mobile-stacked.hero--screen,
    .hero--mobile-stacked.hero--split,
    .hero--mobile-stacked.hero--split-reverse,

    .hero--mobile-stacked-reverse.hero--screen,
    .hero--mobile-stacked-reverse.hero--split,
    .hero--mobile-stacked-reverse.hero--split-reverse {

        height: auto;
        min-height: 0;
        max-height: none;
    }






}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {
    
    .hero--image {
        height: var(
            --hero-mobile-image-height,
            100px
        );
    }

    .hero--screen {

        min-height: 520px;
    }


    .hero--contained {

        padding: 16px 0;
    }


    .hero--contained .hero-slider {

        width: calc(100% - 24px);
    }


    .hero-content {

        padding-top: 30px;

        padding-bottom: 30px;
    }


    .hero--contained .hero-content {

        padding:
            24px 20px;
    }


    .hero h1,
    .hero h2 {

        font-size: clamp(
            1.8rem,
            9vw,
            2.5rem
        );
    }


    .hero-description {

      
    margin-top: var(--hero-description-margin-top, 24px);


        font-size: 0.9rem;
    }


    .hero-actions {

        margin-top: 22px;

        gap: 10px;
    }

}






/* =========================================
   HERO ARROWS
========================================= */

.hero-arrow {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 30;

    width: var(--hero-arrow-desktop-size);
    height: var(--hero-arrow-desktop-size);

    display: var(--hero-arrows-desktop-display);

    align-items: center;
    justify-content: center;

    padding: 0;

    background:
        var(--hero-arrow-desktop-background);

    color:
        var(--hero-arrow-desktop-color);

    border:
        var(--hero-arrow-desktop-border);

    border-radius:
        var(--hero-arrow-desktop-radius);

    font-size:
        var(--hero-arrow-desktop-font-size);

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        opacity 180ms ease;
}

.hero-arrow-prev,
.hero-arrow-next {
    padding-bottom: 4px;
}
/* =========================================
   PREVIOUS
========================================= */

.hero-arrow-prev {
    left:
        var(--hero-arrow-desktop-left);
}


/* =========================================
   NEXT
========================================= */

.hero-arrow-next {
    right:
        var(--hero-arrow-desktop-right);
}


/* =========================================
   HOVER
========================================= */

.hero-arrow:hover {
    background:
        var(--hero-arrow-desktop-hover-background);

    color:
        var(--hero-arrow-desktop-hover-color);

    transform:
        translateY(-50%) scale(1.05);
}


/* =========================================
   FOCUS
========================================= */

.hero-arrow:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}



/* =========================================
   HERO DOTS
========================================= */

.hero-dots {
    position: absolute;

    left: 50%;

    bottom:
        var(--hero-dot-desktop-bottom);

    transform: translateX(-50%);

    z-index: 30;

    display:
        var(--hero-dots-desktop-display);

    align-items: center;
    justify-content: center;

    gap:
        var(--hero-dot-desktop-gap);
}


/* =========================================
   INDIVIDUAL DOT
========================================= */

.hero-dot {
    width:
        var(--hero-dot-desktop-size);

    height:
        var(--hero-dot-desktop-size);

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
        var(--hero-dot-desktop-color);

    cursor: pointer;

    transition:
        width 180ms ease,
        background-color 180ms ease,
        opacity 180ms ease;
}


/* =========================================
   ACTIVE DOT
========================================= */

.hero-dot.is-active {
    width:
        var(--hero-dot-desktop-active-width);

    background:
        var(--hero-dot-desktop-active-color);
}


/* =========================================
   DOT FOCUS
========================================= */

.hero-dot:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}



@media (max-width: 900px) {

    .hero--mobile-stacked .hero-arrow,
    .hero--mobile-stacked-reverse .hero-arrow,
    .hero--mobile-overlay-content .hero-arrow {
        display:
            var(
                --hero-arrows-mobile-display,
                none
            );

        width:
            var(
                --hero-arrow-mobile-size,
                40px
            );

        height:
            var(
                --hero-arrow-mobile-size,
                40px
            );

        background:
            var(
                --hero-arrow-mobile-background,
                rgba(0,0,0,0.28)
            );

        color:
            var(
                --hero-arrow-mobile-color,
                #ffffff
            );

        border:
            var(
                --hero-arrow-mobile-border,
                1px solid rgba(255,255,255,0.45)
            );

        border-radius:
            var(
                --hero-arrow-mobile-radius,
                50%
            );

        font-size:
            var(
                --hero-arrow-mobile-font-size,
                24px
            );

        top:
            calc(
                var(--hero-mobile-media-height, 400px) / 2
            );

        transform:
            translateY(-50%);
    }


    .hero--mobile-stacked .hero-arrow-prev,
    .hero--mobile-stacked-reverse .hero-arrow-prev,
    .hero--mobile-overlay-content .hero-arrow-prev {
        left: var(--hero-arrow-mobile-left, 12px);
    }

    .hero--mobile-stacked .hero-arrow-next,
    .hero--mobile-stacked-reverse .hero-arrow-next,
    .hero--mobile-overlay-content .hero-arrow-next {
        right: var(--hero-arrow-mobile-right, 12px);
    }


}




@media (max-width: 900px) {

    .hero--mobile-stacked .hero-dots,
    .hero--mobile-stacked-reverse .hero-dots {

        position: absolute;

        left: 50%;

        top:
            calc(
                var(--hero-mobile-media-height, 400px)
                - 18px
            );

        bottom: auto;

        transform:
            translateX(-50%);

        z-index: 20;

        width: auto;

        min-height: 0;

        display:
            var(
                --hero-dots-mobile-display,
                flex
            );

        align-items: center;

        justify-content: center;

        gap:
            var(
                --hero-dot-mobile-gap,
                7px
            );

        padding: 0;

        background: transparent;

        box-sizing: border-box;
    }


    .hero--mobile-stacked .hero-dot,
    .hero--mobile-stacked-reverse .hero-dot {

        width:
            var(
                --hero-dot-mobile-size,
                8px
            );

        height:
            var(
                --hero-dot-mobile-size,
                8px
            );

        background:
            var(
                --hero-dot-mobile-color,
                rgba(0,0,0,0.30)
            );
    }


    .hero--mobile-stacked .hero-dot.is-active,
    .hero--mobile-stacked-reverse .hero-dot.is-active {

        width:
            var(
                --hero-dot-mobile-active-width,
                22px
            );

        background:
            var(
                --hero-dot-mobile-active-color,
                #000000
            );
    }
}



/* =========================================
   MOBILE OVERLAY CONTENT
   Content over image / video
========================================= */

/* =========================================
   MOBILE OVERLAY CONTENT
   Content over image / video
========================================= */

@media (max-width: 900px) {

    .hero--mobile-overlay-content {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }


    /* =====================================
       SLIDER
    ===================================== */

    .hero--mobile-overlay-content
    .hero-slider {

        position: relative;

        width: 100%;
        height: auto;

        aspect-ratio:
            var(
                --hero-mobile-ratio,
                4 / 5
            );

        overflow: hidden;
    }


    /* =====================================
       SLIDE
    ===================================== */

    .hero--mobile-overlay-content
    .hero-slide {

        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        min-height: 0;
    }


    /* =====================================
       NORMAL HERO MEDIA
    ===================================== */

    .hero--mobile-overlay-content
    .hero-image-wrapper {

        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        min-height: 0;

        aspect-ratio: auto;

        overflow: hidden;
    }


    /* =====================================
       SPLIT MEDIA
    ===================================== */

    .hero--mobile-overlay-content
    .hero-split-layout {

        position: relative;

        width: 100%;
        height: 100%;
    }


    .hero--mobile-overlay-content
    .hero-split-media {

        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        min-height: 0;

        aspect-ratio: auto;

        overflow: hidden;
    }


    /* =====================================
       IMAGE
    ===================================== */

    .hero--mobile-overlay-content
    .hero-image-wrapper > picture,

    .hero--mobile-overlay-content
    .hero-split-media > picture {

        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;
    }


    .hero--mobile-overlay-content
    .hero-image-wrapper > picture > img,

    .hero--mobile-overlay-content
    .hero-split-media > picture > img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position:
            var(
                --hero-mobile-image-position,
                center center
            );
    }


    /* =====================================
       VIDEO
    ===================================== */

    .hero--mobile-overlay-content
    .hero-image-wrapper > .hero-video,

    .hero--mobile-overlay-content
    .hero-split-media > .hero-video {

        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position:
            var(
                --hero-mobile-image-position,
                center center
            );
    }


    /* =====================================
       MOBILE CONTENT OVER MEDIA
    ===================================== */

    .hero--mobile-overlay-content
    .hero-content--mobile,

    .hero--mobile-overlay-content
    .hero-split-content.hero-content--mobile {

        position: absolute;

        z-index: 3;

        width: min(
            100%,
            var(
                --hero-content-max-width,
                100%
            )
        );

        height: auto;

        min-height: 0;

        box-sizing: border-box;

        background:
            var(
                --hero-content-background,
                transparent
            );

        pointer-events: auto;
    }


    /* =====================================
       POSITION — TOP
    ===================================== */

    .hero--mobile-overlay-content[data-mobile-position="top-left"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="top-left"]
    .hero-split-content.hero-content--mobile {

        top: 0;
        left: 0;
    }


    .hero--mobile-overlay-content[data-mobile-position="top-center"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="top-center"]
    .hero-split-content.hero-content--mobile {

        top: 0;
        left: 50%;

        transform:
            translateX(-50%);
    }


    .hero--mobile-overlay-content[data-mobile-position="top-right"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="top-right"]
    .hero-split-content.hero-content--mobile {

        top: 0;
        right: 0;
    }


    /* =====================================
       POSITION — CENTER
    ===================================== */

    .hero--mobile-overlay-content[data-mobile-position="center-left"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="center-left"]
    .hero-split-content.hero-content--mobile {

        top: 50%;
        left: 0;

        transform:
            translateY(-50%);
    }


    .hero--mobile-overlay-content[data-mobile-position="center"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="center"]
    .hero-split-content.hero-content--mobile {

        top: 50%;
        left: 50%;

        transform:
            translate(
                -50%,
                -50%
            );
    }


    .hero--mobile-overlay-content[data-mobile-position="center-right"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="center-right"]
    .hero-split-content.hero-content--mobile {

        top: 50%;
        right: 0;

        transform:
            translateY(-50%);
    }


    /* =====================================
       POSITION — BOTTOM
    ===================================== */

    .hero--mobile-overlay-content[data-mobile-position="bottom-left"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="bottom-left"]
    .hero-split-content.hero-content--mobile {

        bottom: 0;
        left: 0;
    }


    .hero--mobile-overlay-content[data-mobile-position="bottom-center"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="bottom-center"]
    .hero-split-content.hero-content--mobile {

        bottom: 0;
        left: 50%;

        transform:
            translateX(-50%);
    }


    .hero--mobile-overlay-content[data-mobile-position="bottom-right"]
    .hero-content--mobile,

    .hero--mobile-overlay-content[data-mobile-position="bottom-right"]
    .hero-split-content.hero-content--mobile {

        bottom: 0;
        right: 0;
    }


    /* =====================================
       DESKTOP CONTENT HIDDEN
    ===================================== */

    .hero--mobile-overlay-content
    .hero-content--desktop,

    .hero--mobile-overlay-content
    .hero-split-content.hero-content--desktop {

        display: none;
    }


    /* =====================================
       DOTS
    ===================================== */

    .hero--mobile-overlay-content
    .hero-dots {

        position: absolute;

        left: 50%;
        bottom: 16px;

        z-index: 5;

        transform:
            translateX(-50%);
    }

}