/* =========================================================
   LUMINA EDITORIAL HERO — 7bb773bf
   ========================================================= */

/*
 * Allow the Hero to escape Elementor's widget wrapper.
 */
.elementor-widget-lumina_hero_7bb773bf,
.elementor-widget-lumina_hero_7bb773bf > .elementor-widget-container {
    overflow: visible !important;
}

.lumina-hero-7bb773bf {
    --hero-max-width: 1400px;
    --divider-angle-offset: 120px;
    --hero-background: #faf9f6;
    --viewport-extension: 0px;

    position: relative;
    width: 100%;
    background-color: var(--hero-background);
    overflow: hidden;
}


/* =========================================================
   MAIN INNER LAYOUT
   ========================================================= */

.lumina-hero-inner-7bb773bf {
    position: relative;

    display: flex;
    align-items: stretch;

    width: 100%;
    max-width: var(--hero-max-width);
    min-height: 600px;

    margin: 0 auto;
}


/* =========================================================
   LEFT CONTENT COLUMN
   ========================================================= */

.lumina-hero-left-7bb773bf {
    position: relative;
    z-index: auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex: 0 0 var(--hero-content-split);
	width: var(--hero-content-split);
	max-width: var(--hero-content-split);
    min-width: 0;

    padding: 60px 40px 60px 20px;
    box-sizing: border-box;

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

.lumina-hero-content-7bb773bf {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 580px;
    min-width: 0;
}


/* =========================================================
   RIGHT IMAGE COLUMN
   ========================================================= */

/*
 * The image column overlaps the content column by
 * --divider-angle-offset.
 *
 * The clip-path creates the actual diagonal image boundary.
 */
.lumina-hero-right-7bb773bf {
    position: relative;
    z-index: 1;

    display: flex;
    align-self: stretch;

    flex: 0 0 calc(
        (100% - var(--hero-content-split)) +
        var(--divider-angle-offset)
    );

    width: calc(
        (100% - var(--hero-content-split)) +
        var(--divider-angle-offset)
    );

    max-width: calc(
        (100% - var(--hero-content-split)) +
        var(--divider-angle-offset)
    );

    min-width: 0;
    margin-left: calc(-1 * var(--divider-angle-offset));

    box-sizing: border-box;
    overflow: hidden;

    clip-path: polygon(
        var(--divider-angle-offset) 0,
        100% 0,
        100% 100%,
        0 100%
    );
}


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

.lumina-hero-img-wrap-7bb773bf {
    position: relative;

    display: flex;
    flex: 1 1 auto;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;
    box-sizing: border-box;

    overflow: hidden;
}

.lumina-hero-img-wrap-7bb773bf img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
    min-height: 100%;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   IMAGE WIDTH MODES
   ========================================================= */

/*
 * Elementor and its immediate widget container must permit
 * the Hero to extend outside the page's boxed content area.
 */
.elementor-widget-lumina_hero_7bb773bf,
.elementor-widget-lumina_hero_7bb773bf > .elementor-widget-container {
    overflow: visible;
}


/* =========================================================
   CONTAINER WIDTH MODE
   ========================================================= */

.lumina-hero-7bb773bf.lumina-hero-mode-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
}

.lumina-hero-7bb773bf.lumina-hero-mode-container
.lumina-hero-inner-7bb773bf {
    width: 100%;
    max-width: var(--hero-max-width);
    margin: 0 auto;
    overflow: hidden;
}


/* =========================================================
   EXTEND TO VIEWPORT EDGE MODE
   ========================================================= */

/*
 * Make the Hero itself full viewport width.
 *
 * The 50% / -50vw technique moves it out of its boxed
 * Elementor parent while keeping it centered on the viewport.
 */
.lumina-hero-7bb773bf.lumina-hero-mode-extend {
    position: relative;

    width: 100vw;
    max-width: 100vw;

    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    overflow: hidden;
}

/*
 * In Extend mode the inner layout also spans the viewport.
 * The left content padding preserves alignment with the
 * site's normal 1400px content container.
 */
.lumina-hero-7bb773bf.lumina-hero-mode-extend
.lumina-hero-inner-7bb773bf {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
}

.lumina-hero-7bb773bf.lumina-hero-mode-extend
.lumina-hero-left-7bb773bf {
    padding-left: max(
        20px,
        calc((100vw - var(--hero-max-width)) / 2 + 20px)
    );
}

/* =========================================================
   TYPOGRAPHY AND CONTENT
   ========================================================= */

.lumina-hero-eyebrow-7bb773bf {
    margin: 0 0 20px;

    color: #555;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lumina-hero-headline-7bb773bf {
    margin: 0 0 30px;

    color: #222;
    font-family: "Playfair Display", serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
}

.lumina-hero-divider-7bb773bf {
    width: 40px;
    height: 2px;

    margin: 0 0 30px;

    background-color: #6d8471;
}

.lumina-hero-desc-7bb773bf {
    margin: 0 0 40px;

    color: #555;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.lumina-hero-cta-7bb773bf {
    display: inline-block;
    align-self: flex-start;

    padding: 15px 30px;
    border: 0;
    box-sizing: border-box;

    background-color: #3e4a42;
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        opacity 0.3s ease;
}

.lumina-hero-cta-7bb773bf:hover,
.lumina-hero-cta-7bb773bf:focus {
    background-color: #2c352f;
    color: #fff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
    .lumina-hero-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-container,
    .lumina-hero-7bb773bf.lumina-hero-mode-extend {
        overflow: hidden;
    }

    .lumina-hero-inner-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-container
    .lumina-hero-inner-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-extend
    .lumina-hero-inner-7bb773bf {
        flex-direction: column;
        min-height: 0;

        overflow: hidden;

        --viewport-extension: 0px;
    }

    .lumina-hero-left-7bb773bf {
        order: 2;

        flex: 1 1 auto;

        width: 100%;
        max-width: 100%;

        justify-content: center;

        padding: 60px 30px;
    }

    .lumina-hero-content-7bb773bf {
        max-width: 100%;
    }

    /*
     * Reset desktop diagonal and extension behavior after
     * the Hero switches to its stacked layout.
     */
    .lumina-hero-right-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-container
    .lumina-hero-right-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-extend
    .lumina-hero-right-7bb773bf {
        order: 1;

        flex: 0 0 400px;

        width: 100%;
        max-width: 100%;

        height: 400px;
        min-height: 400px;

        margin-left: 0;
        margin-right: 0;

        padding: 0;

        clip-path: none;
        overflow: hidden;
    }

    .lumina-hero-img-wrap-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-container
    .lumina-hero-img-wrap-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-extend
    .lumina-hero-img-wrap-7bb773bf {
        position: relative;

        flex: 1 1 auto;

        width: 100%;
        max-width: 100%;

        height: 100%;
        min-height: 100%;

        margin: 0;
        padding: 0;
    }
}


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

@media (max-width: 767px) {
    .lumina-hero-left-7bb773bf {
        padding: 45px 20px;
    }

    .lumina-hero-right-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-container
    .lumina-hero-right-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-extend
    .lumina-hero-right-7bb773bf {
        flex-basis: 320px;

        height: 320px;
        min-height: 320px;
    }

    .lumina-hero-headline-7bb773bf {
        font-size: 38px;
    }

    .lumina-hero-desc-7bb773bf {
        font-size: 16px;
    }
}


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

@media (max-width: 480px) {
    .lumina-hero-right-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-container
    .lumina-hero-right-7bb773bf,
    .lumina-hero-7bb773bf.lumina-hero-mode-extend
    .lumina-hero-right-7bb773bf {
        flex-basis: 280px;

        height: 280px;
        min-height: 280px;
    }

    .lumina-hero-headline-7bb773bf {
        font-size: 32px;
    }

    .lumina-hero-cta-7bb773bf {
        width: 100%;
    }
}