/* =========================================================
   RAIN SPREE
   HOMEPAGE HERO
   ========================================================= */

.rs-hero {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(198, 178, 241, .28),
            transparent 34%
        ),
        linear-gradient(
            100deg,
            #ffffff 0%,
            #fbf9ff 45%,
            #f5f0fb 100%
        );

    border-top: 1px solid rgba(52, 116, 55, .12);
}


/* =========================================================
   INNER
   ========================================================= */

.rs-hero__inner {
    width: calc(100% - 64px);
    max-width: 1400px;
    min-height: 540px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);

    align-items: center;

    gap: 40px;

    box-sizing: border-box;
}


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

.rs-hero__content {
    position: relative;
    z-index: 3;

    padding: 55px 0;
}


.rs-hero__eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 18px;
    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(255,255,255,.82);

    border: 1px solid rgba(111,72,180,.12);

    color: #6542a5;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

    box-shadow:
        0 5px 18px rgba(70,40,100,.06);
}


/* =========================================================
   TITLE
   ========================================================= */

.rs-hero__title {
    max-width: 680px;

    margin: 0 0 22px;

    color: #29472d;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(48px, 5.2vw, 78px);

    font-weight: 600;

    line-height: .96;

    letter-spacing: -.8px;
}


.rs-hero__title span {
    display: block;

    color: #7045b6;
}


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

.rs-hero__description {
    max-width: 590px;

    margin: 0 0 25px;

    color: #4f5750;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   VALUES
   ========================================================= */

.rs-hero__values {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 0;

    margin-bottom: 30px;
}


.rs-hero__values span {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 0 17px;

    color: #29472d;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .7px;
}


.rs-hero__values span:first-child {
    padding-left: 0;
}


.rs-hero__values span + span {
    border-left: 1px solid rgba(41,71,45,.18);
}


.rs-hero__values i {
    color: #347437;
    font-size: 17px;
}


.rs-hero__values span:nth-child(2) i {
    color: #7045b6;
}


.rs-hero__values span:nth-child(3) i {
    color: #d49b18;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.rs-hero__buttons {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 14px;
}


.rs-hero__button {
    min-height: 46px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 999px;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.rs-hero__button:hover {
    transform: translateY(-2px);
}


.rs-hero__button--primary {
    background: #347437;
    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(52,116,55,.18);
}


.rs-hero__button--primary:hover {
    background: #285e2c;
    color: #ffffff;
}


.rs-hero__button--secondary {
    background: #ffffff;

    color: #347437;

    border: 1px solid #347437;
}


.rs-hero__button--secondary:hover {
    background: #f4faf2;
}


/* =========================================================
   VISUAL
   ========================================================= */

.rs-hero__visual {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 500px;

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

    overflow: visible;
}


.rs-hero__visual-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    right: -50px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(180,153,224,.28) 0%,
            rgba(180,153,224,.08) 45%,
            transparent 70%
        );

    pointer-events: none;
}


.rs-hero__visual img {
    position: relative;
    z-index: 2;

    display: block;

    width: 100%;
    max-width: 720px;

    height: 500px;

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

    border-radius: 32px 0 0 32px;

    box-shadow:
        0 25px 60px rgba(53,54,45,.13);
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.rs-hero__floating-card {
    position: absolute;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border-radius: 999px;

    background: rgba(255,255,255,.88);

    border: 1px solid rgba(255,255,255,.85);

    box-shadow:
        0 10px 25px rgba(40,50,40,.10);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: #29472d;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 700;
}


.rs-hero__floating-card i {
    color: #347437;
}


.rs-hero__floating-card--one {
    left: 5%;
    top: 20%;
}


.rs-hero__floating-card--two {
    right: 7%;
    top: 15%;
}


.rs-hero__floating-card--three {
    right: 5%;
    bottom: 15%;
}


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

@media (max-width: 1000px) {

    .rs-hero__inner {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 20px;

        text-align: center;
    }

    .rs-hero__content {
        padding: 45px 0 15px;
    }

    .rs-hero__title {
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(45px, 7vw, 64px);
    }

    .rs-hero__description {
        margin-left: auto;
        margin-right: auto;
    }

    .rs-hero__values {
        justify-content: center;
    }

    .rs-hero__values span:first-child {
        padding-left: 17px;
    }

    .rs-hero__buttons {
        justify-content: center;
    }

    .rs-hero__visual {
        min-height: 400px;
        justify-content: center;
    }

    .rs-hero__visual img {
        max-width: 760px;
        height: 400px;
        border-radius: 28px;
    }

}


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

@media (max-width: 700px) {

    .rs-hero__inner {
        width: calc(100% - 28px);
    }

    .rs-hero__content {
        padding: 32px 0 10px;
    }

    .rs-hero__eyebrow {
        margin-bottom: 14px;

        font-size: 9px;
        letter-spacing: 1.4px;
    }

    .rs-hero__title {
        font-size: 42px;
        line-height: .98;
    }

    .rs-hero__description {
        font-size: 12px;
        line-height: 1.6;
    }

    .rs-hero__values {
        justify-content: center;

        margin-bottom: 22px;
    }

    .rs-hero__values span {
        padding: 0 9px;

        font-size: 9px;
        letter-spacing: .3px;
    }

    .rs-hero__values i {
        font-size: 13px;
    }

    .rs-hero__buttons {
        gap: 9px;
    }

    .rs-hero__button {
        min-height: 42px;
        padding: 0 17px;

        font-size: 10px;
    }

    .rs-hero__visual {
        min-height: 290px;
    }

    .rs-hero__visual img {
        width: 100%;
        height: 290px;

        border-radius: 22px;
    }

    .rs-hero__floating-card {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .rs-hero__title {
        font-size: 36px;
    }

    .rs-hero__description {
        font-size: 11.5px;
    }

    .rs-hero__values {
        gap: 8px;
    }

    .rs-hero__values span {
        border: 0 !important;
        padding: 0 5px;
    }

    .rs-hero__button {
        width: 100%;
    }

    .rs-hero__visual {
        min-height: 240px;
    }

    .rs-hero__visual img {
        height: 240px;
    }

}
/*==================================================*
 * RAIN SPREE HERO
 * FROSTED WHITE GLASS — MATCH NEWSLETTER
 *==================================================*/

.rs-hero,
.rs-hero-banner,
.rs-home-hero {

    position: relative;

    background:
        rgba(255, 255, 255, 0.68) !important;

    border:
        1px solid rgba(255, 255, 255, 0.82) !important;

    border-radius:
        30px;

    box-shadow:
        0 18px 50px rgba(31, 94, 47, 0.08),
        0 4px 20px rgba(255, 255, 255, 0.25);

    backdrop-filter:
        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(125%);

    overflow:
        hidden;
}


/*==================================================*
 * FROSTED GLASS INNER EDGE
 *==================================================*/

.rs-hero::before,
.rs-hero-banner::before,
.rs-home-hero::before {

    content: "";

    position: absolute;

    inset: 1px;

    border:
        1px solid rgba(255, 255, 255, 0.48);

    border-radius:
        29px;

    pointer-events:
        none;

    z-index:
        1;
}


/*==================================================*
 * VERY SOFT WHITE GLASS HIGHLIGHT
 *==================================================*/

.rs-hero::after,
.rs-hero-banner::after,
.rs-home-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,.04) 45%,
            rgba(255,255,255,.10)
        );

    pointer-events:
        none;

    z-index:
        1;
}


/*==================================================*
 * KEEP HERO CONTENT ABOVE GLASS
 *==================================================*/

.rs-hero > *,
.rs-hero-banner > *,
.rs-home-hero > * {

    position: relative;

    z-index:
        2;
}


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

.rs-hero img,
.rs-hero-banner img,
.rs-home-hero img {

    position: relative;

    z-index:
        3;
}


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

@media (max-width: 768px) {

    .rs-hero,
    .rs-hero-banner,
    .rs-home-hero {

        border-radius:
            22px;

        background:
            rgba(255, 255, 255, 0.70) !important;

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }

    .rs-hero::before,
    .rs-hero-banner::before,
    .rs-home-hero::before {

        border-radius:
            21px;
    }

}

/* =========================================================
   RAIN SPREE — HERO FINAL GLASS PANEL
   Transparent section + enclosed glass inner
   Matches Newsletter
   ========================================================= */


/* HERO OUTER SECTION */

.rs-hero,
.rs-hero-banner,
.rs-home-hero {

    width: 100%;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: visible !important;
}


/* HERO INNER = THE ACTUAL GLASS PANEL */

.rs-hero__inner {

    position: relative;

    width: calc(100% - 56px);
    max-width: 1380px;

    min-height: 520px;

    margin: 18px auto;

    padding: 38px 42px;

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

    border:
        1px solid rgba(255, 255, 255, 0.88);

    border-radius:
        30px;

    box-shadow:
        0 18px 50px rgba(31, 94, 47, 0.08),
        0 5px 25px rgba(255, 255, 255, 0.30);

    backdrop-filter:
        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(125%);

    overflow: hidden;

    box-sizing: border-box;
}


/* INNER WHITE EDGE */

.rs-hero__inner::before {

    content: "";

    position: absolute;

    inset: 1px;

    border:
        1px solid rgba(255,255,255,.42);

    border-radius:
        29px;

    pointer-events:
        none;

    z-index: 0;
}


/* VERY SUBTLE GLASS LIGHT */

.rs-hero__inner::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.035) 50%,
            rgba(255,255,255,.10)
        );

    pointer-events:
        none;

    z-index: 0;
}


/* KEEP EVERYTHING ABOVE GLASS */

.rs-hero__inner > * {

    position: relative;

    z-index: 2;
}


/* HERO IMAGE */

.rs-hero__visual img {

    position: relative;

    z-index: 3;

}


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

@media (max-width: 768px) {

    .rs-hero__inner {

        width:
            calc(100% - 24px);

        min-height:
            auto;

        margin:
            12px auto;

        padding:
            26px 20px;

        border-radius:
            22px;

        background:
            rgba(255,255,255,.72);

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);
    }

    .rs-hero__inner::before {

        border-radius:
            21px;
    }

}

/* =========================================================
   RAIN SPREE — FINAL HERO
   SAME GLOBAL BACKGROUND + DARKER OVERLAY
   COMPACT ENCLOSED GLASS
   ========================================================= */


/* =========================================================
   HERO OUTER AREA
   ========================================================= */

.rs-hero,
.rs-hero-banner,
.rs-home-hero {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 12px 0;

    background:
        rgba(31, 55, 35, 0.10) !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    overflow: visible !important;
}


/* REMOVE OLD OUTER GLASS */

.rs-hero::before,
.rs-hero::after,
.rs-hero-banner::before,
.rs-hero-banner::after,
.rs-home-hero::before,
.rs-home-hero::after {

    display: none !important;

    content: none !important;
}


/* =========================================================
   HERO INNER GLASS PANEL
   ========================================================= */

.rs-hero__inner {

    position: relative;

    width:
        calc(100% - 56px);

    max-width:
        1180px;

    min-height:
        0;

    margin:
        0 auto;

    padding:
        28px 34px;

    display:
        grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr);

    align-items:
        center;

    gap:
        30px;

    box-sizing:
        border-box;

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

    border:
        1px solid rgba(255, 255, 255, 0.90);

    border-radius:
        28px;

    box-shadow:
        0 18px 45px rgba(31, 94, 47, 0.08),
        inset 0 1px 0 rgba(255,255,255,.65);

    backdrop-filter:
        blur(24px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(125%);

    overflow:
        hidden;

    z-index:
        2;
}


/* =========================================================
   INNER GLASS EDGE
   ========================================================= */

.rs-hero__inner::before {

    content:
        "";

    position:
        absolute;

    inset:
        1px;

    border:
        1px solid rgba(255,255,255,.40);

    border-radius:
        27px;

    pointer-events:
        none;

    z-index:
        0;
}


/* =========================================================
   SOFT GLASS HIGHLIGHT
   ========================================================= */

.rs-hero__inner::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.035) 50%,
            rgba(255,255,255,.10)
        );

    pointer-events:
        none;

    z-index:
        0;
}


/* =========================================================
   CONTENT ABOVE GLASS
   ========================================================= */

.rs-hero__inner > * {

    position:
        relative;

    z-index:
        2;
}


/* =========================================================
   COMPRESS HERO CONTENT
   ========================================================= */

.rs-hero__content {

    padding:
        20px 0 !important;
}


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

.rs-hero__visual {

    min-height:
        0 !important;

    height:
        360px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.rs-hero__visual img {

    width:
        100%;

    max-width:
        620px;

    height:
        360px;

    object-fit:
        cover;

    border-radius:
        24px;

}


/* =========================================================
   DESKTOP COMPACT TYPOGRAPHY
   ========================================================= */

.rs-hero__title {

    margin-bottom:
        18px;
}


.rs-hero__description {

    margin-bottom:
        20px;
}


.rs-hero__values {

    margin-bottom:
        22px;
}


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

@media (max-width: 1000px) {

    .rs-hero__inner {

        width:
            calc(100% - 40px);

        padding:
            28px;

        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .rs-hero__content {

        padding:
            18px 0 0 !important;

        text-align:
            center;
    }

    .rs-hero__description {

        margin-left:
            auto;

        margin-right:
            auto;
    }

    .rs-hero__values {

        justify-content:
            center;
    }

    .rs-hero__buttons {

        justify-content:
            center;
    }

    .rs-hero__visual {

        height:
            320px;
    }

    .rs-hero__visual img {

        height:
            320px;

        max-width:
            700px;
    }

}


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

@media (max-width: 700px) {

    .rs-hero {

        padding:
            8px 0;
    }

    .rs-hero__inner {

        width:
            calc(100% - 24px);

        padding:
            22px 18px;

        border-radius:
            22px;

        gap:
            10px;
    }

    .rs-hero__inner::before {

        border-radius:
            21px;
    }

    .rs-hero__content {

        padding:
            10px 0 !important;
    }

    .rs-hero__visual {

        height:
            250px;
    }

    .rs-hero__visual img {

        width:
            100%;

        height:
            250px;

        border-radius:
            18px;
    }

}


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

@media (max-width: 480px) {

    .rs-hero__inner {

        width:
            calc(100% - 16px);

        padding:
            18px 14px;
    }

    .rs-hero__visual {

        height:
            220px;
    }

    .rs-hero__visual img {

        height:
            220px;
    }

}