/* ==========================================================
VALIRINA ATELIER — HERO
Elementor Free

CURRENT VERSION

DESKTOP / TABLET

- rounded background: 98vw
- usable content: 95%
- no max-width
- desktop: 20% text / 80% visual
- compact feedback
- modern rounded stars
- standardized section spacing

MOBILE

- no top spacing
- no background panel
- image itself = 95vw
- larger soft gradient at bottom
- title + CTA over bottom of image
- normal Valirina title colors
- black CTA / white text
- description hidden
- feedback hidden
- standardized bottom spacing

SECTION SPACING

Desktop:      35px bottom
Tablet:       30px bottom
Mobile:       24px bottom
Small mobile: 20px bottom
========================================================== */


/* ==========================================================
01 — VARIABLES
========================================================== */

.valirina-hero {

    /* COLORS */

    --hero-primary:
        #1d1c1a;

    --hero-secondary:
        #625d57;

    --hero-muted:
        #817b74;

    --hero-accent:
        #ad772d;

    --hero-star-color:
        #bf8433;

    --hero-background:
        #fbf8f2;

    --hero-white:
        #ffffff;


    /* FONT */

    --hero-editorial-font:
        "Cormorant Garamond",
        Georgia,
        serif;


    /* WIDTH SYSTEM — DESKTOP */

    --hero-panel-width:
        98vw;

    --hero-content-side-space:
        2.5%;


    /* OUTER */

    --hero-outer-padding-top:
        10px;

    --hero-outer-padding-bottom:
        35px;


    /* PANEL */

    --hero-panel-radius:
        34px;

    --hero-panel-padding-top:
        20px;

    --hero-panel-padding-bottom:
        20px;


    /* COLUMNS */

    --hero-columns-gap:
        42px;


    /* HEIGHT */

    --hero-min-height:
        clamp(610px, 74vh, 780px);


    /* LEFT */

    --hero-left-padding-top:
        44px;

    --hero-left-padding-bottom:
        24px;


    /* TITLE */

    --hero-title-size:
        54px;

    --hero-title-weight:
        620;

    --hero-title-line-height:
        .96;

    --hero-title-letter-spacing:
        -.04em;


    /* DESCRIPTION */

    --hero-description-size:
        14.5px;

    --hero-description-line-height:
        1.55;

    --hero-title-description-gap:
        18px;


    /* CTA */

    --hero-description-button-gap:
        18px;

    --hero-button-height:
        46px;

    --hero-button-padding-x:
        21px;

    --hero-button-font-size:
        13px;

    --hero-button-radius:
        999px;


    /* FEEDBACK */

    --hero-feedback-gap:
        14px;

    --hero-avatar-size:
        38px;

    --hero-avatar-overlap:
        -10px;

    --hero-star-size:
        18px;

    --hero-star-gap:
        1px;

    --hero-feedback-text-size:
        14px;

    --hero-feedback-content-gap:
        1px;

    --hero-feedback-text-indent:
        2px;


    /* IMAGE */

    --hero-image-radius:
        22px;


    /* MOTION */

    --hero-transition:
        180ms;
}


/* ==========================================================
02 — RESET
========================================================== */

.valirina-hero,
.valirina-hero *,
.valirina-hero *::before,
.valirina-hero *::after {

    box-sizing:
        border-box;
}


/* ==========================================================
03 — OUTER HERO
========================================================== */

.valirina-hero {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    width:
        100vw !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    padding:
        var(--hero-outer-padding-top)
        0
        var(--hero-outer-padding-bottom)
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    overflow-x:
        clip !important;

    --width:
        100% !important;

    --content-width:
        100% !important;

    --container-widget-width:
        100% !important;

    --container-widget-flex-grow:
        1 !important;
}


/* ==========================================================
04 — ROOT ELEMENTOR INNER
========================================================== */

.valirina-hero > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;

    --width:
        100% !important;

    --content-width:
        100% !important;

    --container-widget-width:
        100% !important;
}


/* ==========================================================
05 — HERO BACKGROUND PANEL — DESKTOP
========================================================== */

.valirina-hero
.hero-inner {

    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 4fr) !important;

    align-items:
        stretch !important;

    width:
        var(--hero-panel-width) !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    min-height:
        var(--hero-min-height) !important;

    margin:
        0 auto !important;

    padding:
        var(--hero-panel-padding-top)
        var(--hero-content-side-space)
        var(--hero-panel-padding-bottom)
        var(--hero-content-side-space) !important;

    gap:
        var(--hero-columns-gap) !important;

    background:
        var(--hero-background) !important;

    border:
        0 !important;

    border-radius:
        var(--hero-panel-radius) !important;

    box-shadow:
        none !important;

    overflow:
        hidden !important;

    align-self:
        center !important;

    flex:
        0 0 auto !important;

    --width:
        98% !important;

    --content-width:
        100% !important;

    --container-widget-width:
        100% !important;
}


/* ==========================================================
06 — HERO INNER ELEMENTOR WRAPPER
========================================================== */

.valirina-hero
.hero-inner > .e-con-inner {

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 4fr) !important;

    align-items:
        stretch !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    min-height:
        calc(
            var(--hero-min-height)
            -
            var(--hero-panel-padding-top)
            -
            var(--hero-panel-padding-bottom)
        ) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        var(--hero-columns-gap) !important;
}


/* ==========================================================
07 — COLUMNS
========================================================== */

.valirina-hero
.hero-left,

.valirina-hero
.hero-visual {

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    flex:
        none !important;

    flex-basis:
        auto !important;

    align-self:
        stretch !important;

    margin:
        0 !important;

    --width:
        100% !important;

    --content-width:
        100% !important;
}


/* ==========================================================
08 — LEFT COLUMN
========================================================== */

.valirina-hero
.hero-left {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    height:
        100% !important;

    min-height:
        100% !important;

    padding:
        var(--hero-left-padding-top)
        0
        var(--hero-left-padding-bottom)
        0 !important;

    background:
        transparent !important;
}


.valirina-hero
.hero-left > .e-con-inner {

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;
}


/* ==========================================================
09 — HERO TITLE
========================================================== */

.valirina-hero
.hero-title {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-title
.elementor-widget-container {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-title
.elementor-heading-title {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--hero-primary) !important;

    font-family:
        var(--hero-editorial-font) !important;

    font-size:
        var(--hero-title-size) !important;

    font-weight:
        var(--hero-title-weight) !important;

    font-style:
        normal !important;

    line-height:
        var(--hero-title-line-height) !important;

    letter-spacing:
        var(--hero-title-letter-spacing) !important;

    text-align:
        left !important;

    text-transform:
        none !important;

    word-break:
        normal !important;

    overflow-wrap:
        normal !important;

    hyphens:
        none !important;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


/* ==========================================================
10 — TITLE ACCENT
========================================================== */

.valirina-hero
.hero-title
.elementor-heading-title span {

    color:
        var(--hero-accent) !important;

    font-family:
        inherit !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    font-style:
        inherit !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;
}


/* ==========================================================
11 — DESCRIPTION
========================================================== */

.valirina-hero
.hero-description {

    display:
        block !important;

    width:
        100% !important;

    margin:
        var(--hero-title-description-gap)
        0
        0
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-description
.elementor-widget-container {

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-description,

.valirina-hero
.hero-description p {

    color:
        var(--hero-secondary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--hero-description-size) !important;

    font-weight:
        400 !important;

    line-height:
        var(--hero-description-line-height) !important;

    letter-spacing:
        0 !important;

    text-align:
        left !important;
}


.valirina-hero
.hero-description p {

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
12 — CTA
========================================================== */

.valirina-hero
.hero-cta {

    display:
        inline-block !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    margin:
        var(--hero-description-button-gap)
        0
        0
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-cta
.elementor-widget-container {

    display:
        inline-flex !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-cta
.elementor-button {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        9px !important;

    width:
        auto !important;

    height:
        var(--hero-button-height) !important;

    min-height:
        var(--hero-button-height) !important;

    padding:
        0
        var(--hero-button-padding-x) !important;

    border:
        1px
        solid
        var(--hero-primary) !important;

    border-radius:
        var(--hero-button-radius) !important;

    background:
        var(--hero-primary) !important;

    color:
        var(--hero-white) !important;

    font-family:
        inherit !important;

    font-size:
        var(--hero-button-font-size) !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;

    transition:
        background var(--hero-transition) ease,
        color var(--hero-transition) ease,
        border-color var(--hero-transition) ease !important;
}


.valirina-hero
.hero-cta
.elementor-button-text {

    color:
        inherit !important;

    font:
        inherit !important;
}


/* ==========================================================
13 — CTA HOVER
========================================================== */

@media (hover:hover) and (pointer:fine) {

    .valirina-hero
    .hero-cta
    .elementor-button:hover {

        background:
            var(--hero-white) !important;

        color:
            var(--hero-primary) !important;

        border-color:
            var(--hero-primary) !important;

        transform:
            none !important;

        box-shadow:
            none !important;
    }
}


/* ==========================================================
14 — FEEDBACK
========================================================== */

.valirina-hero
.hero-feedback {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    width:
        auto !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    flex:
        0 0 auto !important;

    margin:
        auto
        0
        0
        0 !important;

    padding:
        28px
        0
        0
        0 !important;

    gap:
        var(--hero-feedback-gap) !important;

    background:
        transparent !important;
}


.valirina-hero
.hero-feedback > .e-con-inner {

    display:
        inline-flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    width:
        auto !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        var(--hero-feedback-gap) !important;
}


/* ==========================================================
15 — AVATAR GROUP
========================================================== */

.valirina-hero
.hero-feedback-avatars,

.valirina-hero
.hero-feedback-avatars > .e-con-inner {

    display:
        inline-flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        0 !important;
}


/* ==========================================================
16 — AVATARS
========================================================== */

.valirina-hero
.feedback-avatar {

    display:
        block !important;

    flex:
        0 0 var(--hero-avatar-size) !important;

    width:
        var(--hero-avatar-size) !important;

    min-width:
        var(--hero-avatar-size) !important;

    max-width:
        var(--hero-avatar-size) !important;

    height:
        var(--hero-avatar-size) !important;

    min-height:
        var(--hero-avatar-size) !important;

    max-height:
        var(--hero-avatar-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.feedback-avatar:not(:first-child) {

    margin-left:
        var(--hero-avatar-overlap) !important;
}


.valirina-hero
.feedback-avatar
.elementor-widget-container {

    display:
        block !important;

    width:
        var(--hero-avatar-size) !important;

    height:
        var(--hero-avatar-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.feedback-avatar img {

    display:
        block !important;

    width:
        var(--hero-avatar-size) !important;

    max-width:
        none !important;

    height:
        var(--hero-avatar-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        2px
        solid
        var(--hero-background) !important;

    border-radius:
        50% !important;

    object-fit:
        cover !important;

    box-shadow:
        none !important;
}


/* ==========================================================
17 — FEEDBACK CONTENT
========================================================== */

.valirina-hero
.hero-feedback-content,

.valirina-hero
.hero-feedback-content > .e-con-inner {

    display:
        inline-flex !important;

    flex-direction:
        column !important;

    flex-wrap:
        nowrap !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    gap:
        var(--hero-feedback-content-gap) !important;
}


/* ==========================================================
18 — STARS
========================================================== */

.valirina-hero
.hero-feedback-stars {

    display:
        block !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    height:
        var(--hero-star-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-feedback-stars
.elementor-widget-container {

    display:
        block !important;

    width:
        calc(
            (var(--hero-star-size) * 5)
            +
            (var(--hero-star-gap) * 4)
        ) !important;

    height:
        var(--hero-star-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        0 !important;
}


.valirina-hero
.hero-feedback-stars p {

    position:
        relative !important;

    display:
        block !important;

    width:
        calc(
            (var(--hero-star-size) * 5)
            +
            (var(--hero-star-gap) * 4)
        ) !important;

    height:
        var(--hero-star-size) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    line-height:
        0 !important;

    overflow:
        hidden !important;
}


/* ==========================================================
19 — ROUNDED STAR SHAPE
========================================================== */

.valirina-hero
.hero-feedback-stars p::before {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        100%;

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

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='1.15' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(24 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(48 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(72 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(96 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3C/g%3E%3C/svg%3E");

    -webkit-mask-repeat:
        no-repeat;

    -webkit-mask-position:
        left center;

    -webkit-mask-size:
        100% 100%;

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='1.15' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(24 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(48 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(72 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3Cpath transform='translate(96 0)' d='M12 2.8l2.8 5.67 6.26.91-4.53 4.41 1.07 6.23L12 17.08l-5.6 2.94 1.07-6.23-4.53-4.41 6.26-.91L12 2.8z'/%3E%3C/g%3E%3C/svg%3E");

    mask-repeat:
        no-repeat;

    mask-position:
        left center;

    mask-size:
        100% 100%;
}


/* ==========================================================
20 — FEEDBACK TEXT
========================================================== */

.valirina-hero
.hero-feedback-text {

    display:
        block !important;

    width:
        auto !important;

    max-width:
        max-content !important;

    margin:
        0 !important;

    padding:
        0
        0
        0
        var(--hero-feedback-text-indent) !important;
}


.valirina-hero
.hero-feedback-text
.elementor-widget-container {

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-feedback-text p {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--hero-secondary) !important;

    font-family:
        inherit !important;

    font-size:
        var(--hero-feedback-text-size) !important;

    font-weight:
        500 !important;

    line-height:
        1.08 !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
21 — VISUAL — DESKTOP
========================================================== */

.valirina-hero
.hero-visual {

    position:
        relative !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        stretch !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border-radius:
        var(--hero-image-radius) !important;

    overflow:
        hidden !important;

    background:
        transparent !important;
}


.valirina-hero
.hero-visual > .e-con-inner {

    display:
        flex !important;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* ==========================================================
22 — IMAGE — DESKTOP
========================================================== */

.valirina-hero
.hero-image,

.valirina-hero
.hero-image
.elementor-widget-container {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.valirina-hero
.hero-image a,

.valirina-hero
.hero-image picture {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;
}


.valirina-hero
.hero-image img {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        var(--hero-image-radius) !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;
}


/* ==========================================================
23 — TABLET
========================================================== */

@media (max-width:1024px) and (min-width:768px) {

    .valirina-hero {

        --hero-outer-padding-bottom:
            30px;

        --hero-panel-radius:
            28px;

        --hero-panel-padding-top:
            18px;

        --hero-panel-padding-bottom:
            18px;

        --hero-columns-gap:
            30px;

        --hero-min-height:
            600px;

        --hero-left-padding-top:
            32px;

        --hero-title-size:
            44px;

        --hero-title-description-gap:
            16px;

        --hero-description-button-gap:
            17px;

        --hero-description-size:
            14px;

        --hero-image-radius:
            18px;

        --hero-avatar-size:
            34px;

        --hero-star-size:
            16px;

        --hero-star-gap:
            .8px;

        --hero-feedback-text-size:
            13px;

        --hero-feedback-gap:
            12px;
    }


    .valirina-hero
    .hero-inner,

    .valirina-hero
    .hero-inner > .e-con-inner {

        grid-template-columns:
            minmax(0,28fr)
            minmax(0,72fr) !important;
    }


    .valirina-hero
    .hero-feedback,

    .valirina-hero
    .hero-feedback > .e-con-inner {

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        gap:
            8px !important;
    }
}


/* ==========================================================
24 — MOBILE
IMAGE = 95% WIDTH
========================================================== */

@media (max-width:767px) {

    .valirina-hero {

        padding-top:
            0 !important;

        padding-bottom:
            24px !important;

        margin-top:
            0 !important;

        --hero-title-size:
            31px;

        --hero-title-line-height:
            .98;

        --hero-title-letter-spacing:
            -.03em;

        --hero-button-height:
            40px;

        --hero-button-padding-x:
            18px;

        --hero-button-font-size:
            12px;

        --hero-image-radius:
            18px;
    }


    /* REMOVE DESKTOP PANEL */

    .valirina-hero
    .hero-inner {

        position:
            relative !important;

        display:
            block !important;

        width:
            100vw !important;

        max-width:
            none !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        overflow:
            visible !important;
    }


    .valirina-hero
    .hero-inner > .e-con-inner {

        position:
            relative !important;

        display:
            block !important;

        width:
            100vw !important;

        max-width:
            none !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        gap:
            0 !important;
    }


    /* ======================================================
       IMAGE AREA = 95VW
    ====================================================== */

    .valirina-hero
    .hero-visual {

        position:
            relative !important;

        z-index:
            1 !important;

        display:
            block !important;

        width:
            95vw !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        border:
            0 !important;

        border-radius:
            var(--hero-image-radius) !important;

        background:
            transparent !important;

        overflow:
            hidden !important;
    }


    .valirina-hero
    .hero-visual > .e-con-inner {

        display:
            block !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .valirina-hero
    .hero-image,

    .valirina-hero
    .hero-image
    .elementor-widget-container {

        display:
            block !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .valirina-hero
    .hero-image img {

        display:
            block !important;

        width:
            100% !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            0 !important;

        aspect-ratio:
            4 / 5 !important;

        object-fit:
            cover !important;

        object-position:
            center center !important;

        border-radius:
            var(--hero-image-radius) !important;
    }


    /* ======================================================
       LARGER / SOFTER BOTTOM TRANSITION
    ====================================================== */

    .valirina-hero
    .hero-visual::after {

        content:
            "";

        position:
            absolute;

        z-index:
            2;

        left:
            0;

        right:
            0;

        bottom:
            0;

        height:
            68%;

        pointer-events:
            none;

        background:
            linear-gradient(
                to bottom,
                rgba(251,248,242,0) 0%,
                rgba(251,248,242,.03) 16%,
                rgba(251,248,242,.12) 30%,
                rgba(251,248,242,.32) 47%,
                rgba(251,248,242,.60) 66%,
                rgba(251,248,242,.82) 83%,
                rgba(251,248,242,.95) 100%
            );
    }


    /* ======================================================
       TITLE + CTA OVER IMAGE
    ====================================================== */

    .valirina-hero
    .hero-left {

        position:
            absolute !important;

        z-index:
            4 !important;

        left:
            50% !important;

        bottom:
            30px !important;

        transform:
            translateX(-50%) !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            flex-end !important;

        width:
            calc(95vw - 36px) !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        text-align:
            center !important;
    }


    .valirina-hero
    .hero-left > .e-con-inner {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            center !important;

        justify-content:
            flex-end !important;

        width:
            100% !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        gap:
            0 !important;
    }


    /* HIDE DESCRIPTION + FEEDBACK */

    .valirina-hero
    .hero-description,

    .valirina-hero
    .hero-feedback {

        display:
            none !important;
    }


    /* MOBILE TITLE */

    .valirina-hero
    .hero-title {

        display:
            block !important;

        width:
            100% !important;

        max-width:
            330px !important;

        margin:
            0 auto !important;

        padding:
            0 !important;

        text-align:
            center !important;
    }


    .valirina-hero
    .hero-title
    .elementor-heading-title {

        color:
            var(--hero-primary) !important;

        font-family:
            var(--hero-editorial-font) !important;

        font-size:
            var(--hero-title-size) !important;

        font-weight:
            var(--hero-title-weight) !important;

        line-height:
            var(--hero-title-line-height) !important;

        letter-spacing:
            var(--hero-title-letter-spacing) !important;

        text-align:
            center !important;

        text-shadow:
            none !important;
    }


    .valirina-hero
    .hero-title
    .elementor-heading-title span {

        color:
            var(--hero-accent) !important;
    }


    /* MOBILE CTA */

    .valirina-hero
    .hero-cta {

        display:
            block !important;

        width:
            auto !important;

        max-width:
            max-content !important;

        margin:
            14px auto 0 !important;

        padding:
            0 !important;
    }


    .valirina-hero
    .hero-cta
    .elementor-widget-container {

        display:
            inline-flex !important;

        width:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    .valirina-hero
    .hero-cta
    .elementor-button {

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        height:
            var(--hero-button-height) !important;

        min-height:
            var(--hero-button-height) !important;

        padding:
            0
            var(--hero-button-padding-x) !important;

        background:
            var(--hero-primary) !important;

        border:
            1px
            solid
            var(--hero-primary) !important;

        border-radius:
            var(--hero-button-radius) !important;

        color:
            var(--hero-white) !important;

        font-size:
            var(--hero-button-font-size) !important;

        font-weight:
            600 !important;

        box-shadow:
            none !important;
    }


    .valirina-hero
    .hero-cta
    .elementor-button-text {

        color:
            var(--hero-white) !important;
    }


    .valirina-hero
    .hero-cta
    .elementor-button:hover {

        background:
            var(--hero-primary) !important;

        border-color:
            var(--hero-primary) !important;

        color:
            var(--hero-white) !important;
    }
}


/* ==========================================================
25 — SMALL MOBILE
========================================================== */

@media (max-width:390px) {

    .valirina-hero {

        padding-bottom:
            20px !important;

        --hero-title-size:
            28px;

        --hero-button-height:
            38px;

        --hero-button-padding-x:
            16px;

        --hero-button-font-size:
            11.5px;

        --hero-image-radius:
            15px;
    }


    .valirina-hero
    .hero-left {

        bottom:
            24px !important;

        width:
            calc(95vw - 28px) !important;
    }


    .valirina-hero
    .hero-title {

        max-width:
            285px !important;
    }


    .valirina-hero
    .hero-cta {

        margin-top:
            12px !important;
    }


    .valirina-hero
    .hero-visual::after {

        height:
            72%;

        background:
            linear-gradient(
                to bottom,
                rgba(251,248,242,0) 0%,
                rgba(251,248,242,.04) 15%,
                rgba(251,248,242,.14) 31%,
                rgba(251,248,242,.36) 49%,
                rgba(251,248,242,.64) 68%,
                rgba(251,248,242,.85) 85%,
                rgba(251,248,242,.96) 100%
            );
    }
}


/* ==========================================================
26 — ELEMENTOR SAFETY — DESKTOP
========================================================== */

@media (min-width:768px) {

    .valirina-hero
    .hero-inner,

    .valirina-hero
    .hero-left,

    .valirina-hero
    .hero-feedback,

    .valirina-hero
    .hero-feedback-avatars,

    .valirina-hero
    .hero-feedback-content,

    .valirina-hero
    .hero-visual {

        left:
            auto !important;

        right:
            auto !important;

        transform:
            none !important;
    }
}


/* ==========================================================
27 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

    .valirina-hero *,
    .valirina-hero *::before,
    .valirina-hero *::after {

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }
}