/* =====================================================
   RIVERSIDE ENERGY PARK — BRAND COLORS
===================================================== */

:root {

    --fs-blue: #062b54;
    --fs-blue-light: #0b467d;
    --fs-blue-dark: #011629;

    --fs-red: #4e9c3c;
    --fs-red-light: #72bf44;

    --fs-green: #4e9c3c;
    --fs-green-light: #72bf44;
    --fs-green-soft: #9bd56c;
    --fs-green-dark: #2d6e2e;

    --fs-white: #ffffff;

    --fs-dark: #020b16;
    --fs-dark-blue: #041528;

    --fs-text-muted: rgba(255, 255, 255, 0.68);
}
/* =====================================================
   RIVERSIDE FLOATING HEADER
===================================================== */

.gft-floating-header {
    position: fixed;

    top: 26px;
    left: 0;

    width: 100%;

    z-index: 1002;

    padding: 0 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    pointer-events: none;

    transition: 0.45s ease;
}


.gft-logo-wrap,
.gft-header-actions {
    pointer-events: auto;
}


/* =====================================================
   MENU OPEN STATE
===================================================== */

body:has(.gft-sidebar.active)
.gft-header-actions {

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(-8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


body:has(.gft-sidebar.active)
.gft-logo-wrap {

    opacity: 1;
    visibility: visible;

    position: relative;

    z-index: 1003;
}


.gft-floating-header.hide-header {
    transform:
        translateY(-125%);
}


/* =====================================================
   LOGO
===================================================== */

.gft-logo-wrap {
    display: inline-flex;

    align-items: center;

    text-decoration: none;

    transition:
        transform 0.35s ease;
}


.gft-logo-wrap img {
    width: 220px;

    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 30px
            rgba(74, 160, 57, 0.13)
        );

    transition:
        filter 0.35s ease,
        transform 0.35s ease;
}


.gft-logo-wrap:hover {
    transform:
        translateY(-2px);
}


.gft-logo-wrap:hover img {
    filter:
        drop-shadow(
            0 16px 38px
            rgba(114, 191, 68, 0.26)
        );
}


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

.gft-header-actions {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* =====================================================
   SHARED BUTTON STYLE
===================================================== */

.gft-donate-btn,
.gft-menu-btn {

    height: 54px;

    border-radius: 999px;

    display: inline-flex;

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

    gap: 9px;

    padding:
        0 21px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    backdrop-filter:
        blur(18px);

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

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


/* =====================================================
   DISCOVER RIVERSIDE BUTTON
===================================================== */

.gft-donate-btn {

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(114, 191, 68, 0.35);

    background:
        linear-gradient(
            135deg,
            #3f8734,
            #65ae40
        );

    box-shadow:
        0 16px 42px
        rgba(55, 130, 48, 0.25);
}


/* energy sheen */

.gft-donate-btn::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -40%;

    width: 35%;
    height: 300%;

    transform:
        rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.22),
            transparent
        );

    transition:
        left 0.55s ease;
}


.gft-donate-btn:hover::before {
    left: 120%;
}


.gft-donate-btn i,
.gft-donate-btn span {
    position: relative;

    z-index: 2;
}


.gft-donate-btn i {
    font-size: 17px;
}


.gft-donate-btn:hover {
    color: #ffffff;

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #59a63b,
            #77c84a
        );

    border-color:
        rgba(155, 213, 108, 0.55);

    box-shadow:
        0 22px 55px
        rgba(87, 167, 58, 0.32);
}


/* =====================================================
   MENU BUTTON
===================================================== */

.gft-menu-btn {
    cursor: pointer;

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.09),
            rgba(255,255,255,0.035)
        ),
        rgba(2, 11, 22, 0.76);
}


.gft-menu-btn:hover {
    color: #ffffff;

    transform:
        translateY(-3px);

    border-color:
        rgba(114,191,68,0.45);

    background:
        rgba(14,47,44,0.75);

    box-shadow:
        0 20px 50px
        rgba(63,143,55,0.15);
}


.gft-menu-btn i {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: grid;
    place-items: center;

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

    color: #ffffff;

    font-size: 17px;

    transition:
        transform 0.45s ease,
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}


.gft-menu-btn:hover i {
    color: #9bd56c;

    background:
        rgba(114,191,68,0.10);

    transform:
        rotate(135deg);

    box-shadow:
        0 0 20px
        rgba(114,191,68,0.10);
}


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

.gft-sidebar-overlay {
    position: fixed;

    inset: 0;

    z-index: 1000;

    background:
        rgba(0, 8, 15, 0.82);

    backdrop-filter:
        blur(11px);

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

    opacity: 0;

    visibility: hidden;

    transition:
        0.35s ease;
}


.gft-sidebar-overlay.active {
    opacity: 1;

    visibility: visible;
}


/* =====================================================
   SIDEBAR
===================================================== */

.gft-sidebar {

    position: fixed;

    top: 18px;
    right: 18px;
    bottom: 18px;

    width:
        min(
            390px,
            calc(100% - 36px)
        );

    z-index: 1001;

    padding:
        82px 24px 24px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border-radius: 30px;

    border:
        1px solid
        rgba(114,191,68,0.11);

    background:

        radial-gradient(
            circle at 8% 8%,
            rgba(14,70,104,0.28),
            transparent 36%
        ),

        radial-gradient(
            circle at 95% 92%,
            rgba(87,167,58,0.19),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #051d34 0%,
            #02101d 54%,
            #01080e 100%
        );

    box-shadow:
        0 45px 120px
        rgba(0,0,0,0.72),

        0 0 75px
        rgba(75,156,55,0.10);

    transform:
        translateX(
            calc(100% + 30px)
        );

    transition:
        0.55s
        cubic-bezier(.76,0,.24,1);
}


.gft-sidebar.active {
    transform:
        translateX(0);
}


/* INNER LINE */

.gft-sidebar::before {
    content: "";

    position: absolute;

    inset: 9px;

    border-radius: 23px;

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

    pointer-events: none;
}


/* ENERGY GLOW */

.gft-sidebar::after {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: -90px;
    bottom: -90px;

    border-radius: 50%;

    background:
        rgba(83, 170, 57, 0.20);

    filter:
        blur(40px);

    pointer-events: none;
}


/* =====================================================
   CLOSE
===================================================== */

.gft-close-btn {

    position: absolute;

    top: 22px;
    right: 22px;

    width: 44px;
    height: 44px;

    z-index: 5;

    border-radius: 50%;

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

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

    color: #ffffff;

    transition:
        0.35s ease;
}


.gft-close-btn:hover {

    color: #ffffff;

    background:
        #4e9c3c;

    border-color:
        transparent;

    transform:
        rotate(90deg);

    box-shadow:
        0 14px 38px
        rgba(78,156,60,0.28);
}


/* =====================================================
   SIDEBAR LINKS
===================================================== */

.gft-sidebar-links {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.gft-sidebar-links a {

    position: relative;

    min-height: 48px;

    display: flex;

    align-items: center;

    padding:
        0 52px 0 15px;

    overflow: hidden;

    border-radius: 11px;

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

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: -0.15px;

    border:
        1px solid transparent;

    transition:
        color 0.3s ease,
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
}


/* ENERGY LINE */

.gft-sidebar-links a::before {

    content: "";

    position: absolute;

    left: 14px;
    right: 52px;
    bottom: 5px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #72bf44,
            rgba(114,191,68,0.10)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.4s
        cubic-bezier(.2,.8,.2,1);
}


/* ROUND ARROW */

.gft-sidebar-links a::after {

    content: "↗";

    position: absolute;

    right: 11px;
    top: 50%;

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #9bd56c;

    background:
        rgba(114,191,68,0.09);

    border:
        1px solid
        rgba(114,191,68,0.13);

    opacity: 0;

    transform:
        translateY(-50%)
        scale(0.65);

    transition:
        opacity 0.3s ease,
        transform 0.35s ease;
}


.gft-sidebar-links a:hover {

    color: #ffffff;

    transform:
        translateX(5px);

    background:
        linear-gradient(
            90deg,
            rgba(78,156,60,0.11),
            rgba(78,156,60,0.025)
        );

    border-color:
        rgba(114,191,68,0.09);
}


.gft-sidebar-links a:hover::before {
    transform:
        scaleX(1);
}


.gft-sidebar-links a:hover::after {

    opacity: 1;

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


/* =====================================================
   SIDEBAR CTA
===================================================== */

.gft-sidebar-donate {

    position: relative;

    z-index: 2;

    margin-top: auto;

    width: 100%;

    min-height: 54px;

    border-radius: 999px;

    display: flex;

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

    gap: 10px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #387d31,
            #5ca940
        );

    border:
        1px solid
        rgba(155,213,108,0.22);

    box-shadow:
        0 20px 50px
        rgba(70,143,48,0.22);

    transition:
        0.35s ease;
}


.gft-sidebar-donate:hover {

    color: #ffffff;

    transform:
        translateY(-4px);

    background:
        linear-gradient(
            135deg,
            #59a63b,
            #76c94c
        );

    box-shadow:
        0 26px 65px
        rgba(93,175,61,0.30);
}


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

@media (max-width: 768px) {

    .gft-floating-header {
        top: 17px;

        padding:
            0 17px;
    }


    .gft-logo-wrap img {
        width: 155px;
    }


    .gft-header-actions {
        gap: 8px;
    }


    .gft-donate-btn {
        height: 45px;

        padding:
            0 14px;

        font-size: 10.5px;
    }


    .gft-donate-btn i {
        font-size: 15px;
    }


    .gft-menu-btn {
        width: 45px;
        height: 45px;

        padding: 0;
    }


    .gft-menu-btn span {
        display: none;
    }


    .gft-menu-btn i {
        width: auto;
        height: auto;

        background: transparent;

        font-size: 18px;
    }


    .gft-menu-btn:hover i {
        background: transparent;
    }


    .gft-sidebar {

        top: 11px;
        right: 11px;
        bottom: 11px;

        width:
            calc(100% - 22px);

        padding:
            75px 19px 20px;

        border-radius: 26px;
    }


    .gft-sidebar-links a {

        min-height: 45px;

        padding:
            0 48px 0 13px;

        font-size: 14px;
    }


    .gft-sidebar-donate {
        min-height: 51px;

        font-size: 12px;
    }

}

/* =====================================================
   RIVERSIDE HERO
===================================================== */

.gft-hero {
    min-height: 100vh;

    position: relative;

    overflow: hidden;

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

    background: #020b16;
}


/* =====================================================
   VIDEO — FULL HERO
===================================================== */

.gft-hero-video {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.gft-hero-video video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: 0.92;

    filter:
        saturate(0.88)
        contrast(1.05)
        brightness(0.88);

    transform:
        scale(1.03);
}


/* IMPORTANT:
   Remove the old left-side fade completely.
*/

.gft-hero-video::after {
    display: none;
}


/* =====================================================
   GENERAL DARK OVERLAY
===================================================== */

.gft-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(2,11,22,0.58) 0%,
            rgba(2,11,22,0.48) 45%,
            rgba(2,11,22,0.62) 100%
        );

    pointer-events: none;
}


/* =====================================================
   SOFT RIVERSIDE GLOW
===================================================== */

.gft-hero-soft-glow {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 760px;
    height: 420px;

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(78,156,60,0.18) 0%,
            rgba(114,191,68,0.08) 36%,
            rgba(6,43,84,0.05) 58%,
            transparent 75%
        );

    filter: blur(45px);

    pointer-events: none;
}


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

.gft-hero .container {
    position: relative;

    z-index: 4;

    width: 100%;
}


.gft-hero-content {
    width: 100%;

    padding-top: 0;

    display: flex;

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

    text-align: center;
}


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

.gft-hero h1 {
    max-width: none;

    width: 100%;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(42px, 5.1vw, 78px);

    line-height: 1;

    font-weight: 600;

    letter-spacing: -3.5px;

    white-space: nowrap;

    text-shadow:
        0 14px 40px
        rgba(0,0,0,0.42);
}


.gft-hero h1 span {
    display: inline;

    background:
        linear-gradient(
            135deg,
            #9bd56c 0%,
            #72bf44 45%,
            #4e9c3c 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    filter:
        drop-shadow(
            0 7px 22px
            rgba(78,156,60,0.12)
        );
}


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

@media (max-width: 1100px) {

    .gft-hero h1 {
        font-size:
            clamp(42px, 5.3vw, 64px);
    }

}


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

@media (max-width: 768px) {

    .gft-hero {
        min-height: 70svh;

        align-items: center;

        padding:
            80px 0 45px;
    }


    .gft-hero-video video {
        object-position: center;

        opacity: 0.94;

        filter:
            saturate(0.90)
            contrast(1.03)
            brightness(0.90);
    }


    .gft-hero-overlay {
        background:
            rgba(2,11,22,0.58);
    }


    .gft-hero-soft-glow {
        width: 400px;
        height: 280px;

        opacity: 0.8;
    }


    .gft-hero-content {
        padding: 0 15px;
    }


    .gft-hero h1 {
        max-width: 620px;

        font-size:
            clamp(37px, 10vw, 53px);

        line-height: 1.02;

        letter-spacing: -2px;

        white-space: normal;
    }

}

/* =====================================================
   RIVERSIDE FOOTER — CORY-INSPIRED
===================================================== */

.gft-footer {
    position: relative;

    overflow: hidden;

    padding:
        95px 0 28px;

    background:
        #073c4e;

    color:
        #ffffff;

    border-top:
        1px solid rgba(255,255,255,0.10);
}


/* =====================================================
   LARGE INTRO
===================================================== */

.gft-footer-intro {
    padding-bottom:
        65px;

    margin-bottom:
        55px;

    border-bottom:
        1px solid rgba(255,255,255,0.14);
}


.gft-footer-intro > span {
    display: block;

    margin-bottom:
        18px;

    color:
        #c7d900;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.gft-footer-intro h2 {
    max-width:
        900px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(45px,5.8vw,82px);

    line-height:
        0.98;

    font-weight:
        400;

    letter-spacing:
        -4px;
}


.gft-footer-intro h2 strong {
    display: block;

    color:
        #c7d900;

    font-weight:
        400;
}


/* =====================================================
   FOOTER GRID
===================================================== */

.gft-footer-inner {
    display: grid;

    grid-template-columns:
        1.45fr
        0.75fr
        0.75fr
        1.1fr;

    gap:
        50px;

    align-items:
        start;
}


/* =====================================================
   BRAND
===================================================== */

.gft-footer-brand img {
    width:
        195px;

    height: auto;

    display: block;

    margin-bottom:
        22px;
}


.gft-footer-brand p {
    max-width:
        330px;

    margin: 0;

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

    font-size:
        13px;

    line-height:
        1.85;
}


/* =====================================================
   HEADINGS
===================================================== */

.gft-footer h4 {
    margin:
        0 0 22px;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.8px;

    text-transform:
        uppercase;
}


/* Cory-like lime underline */

.gft-footer h4::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin-top:
        9px;

    background:
        #c7d900;
}


/* =====================================================
   LINKS
===================================================== */

.gft-footer a {
    display: block;

    width:
        fit-content;

    margin-bottom:
        11px;

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

    text-decoration:
        none;

    font-size:
        12px;

    line-height:
        1.55;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.gft-footer a:hover {
    color:
        #c7d900;

    transform:
        translateX(4px);
}


/* =====================================================
   CONTACT
===================================================== */

.gft-contact-link {
    display:
        flex !important;

    align-items:
        flex-start;

    gap:
        10px;

    width:
        auto !important;

    margin-bottom:
        14px !important;
}


.gft-contact-link i {
    color:
        #c7d900;

    margin-top:
        3px;

    flex-shrink: 0;
}


.gft-contact-link span {
    color:
        rgba(255,255,255,0.68);
}


/* =====================================================
   BOTTOM
===================================================== */

.gft-footer-bottom {
    margin-top:
        65px;

    padding-top:
        24px;

    border-top:
        1px solid rgba(255,255,255,0.12);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    font-size:
        10px;
}


.gft-footer-bottom a {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin: 0;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        600;
}


.gft-footer-bottom a:hover {
    color:
        #c7d900;

    transform:
        translateY(-3px);
}


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

@media (max-width: 991px) {

    .gft-footer-inner {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            45px 35px;
    }

}


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

@media (max-width: 600px) {

    .gft-footer {
        padding:
            70px 0 24px;
    }


    .gft-footer-intro {
        padding-bottom:
            42px;

        margin-bottom:
            42px;
    }


    .gft-footer-intro h2 {
        font-size:
            clamp(39px,11vw,52px);

        letter-spacing:
            -2.5px;
    }


    /* KEEP TWO COLUMNS */

    .gft-footer-inner {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            40px 20px;
    }


    .gft-footer-brand img {
        width:
            140px;
    }


    .gft-footer-brand p {
        font-size:
            10px;

        line-height:
            1.7;
    }


    .gft-footer h4 {
        font-size:
            9px;
    }


    .gft-footer a {
        font-size:
            9px;
    }


    .gft-contact-link {
        gap:
            7px;
    }


    .gft-contact-link i {
        font-size:
            11px;
    }


    .gft-footer-bottom {
        margin-top:
            45px;

        flex-direction:
            column;

        align-items:
            flex-start;

        font-size:
            9px;
    }

}

/* =====================================================
   RIVERSIDE FLOATING WHATSAPP
===================================================== */

.gft-floating-whatsapp {

    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 58px;
    height: 58px;

    z-index: 998;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #ffffff !important;

    text-decoration: none;

    font-size: 25px;


    background:

        linear-gradient(
            rgba(2,11,22,0.76),
            rgba(2,11,22,0.76)
        ) padding-box,

        linear-gradient(
            135deg,

            #0b467d 0%,

            #4e9c3c 52%,

            #8fd25e 100%
        ) border-box;


    border:
        2px solid transparent;


    backdrop-filter:
        blur(16px);

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


    box-shadow:
        0 12px 38px
        rgba(7,59,92,0.18),

        0 5px 28px
        rgba(78,156,60,0.12);


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


.gft-floating-whatsapp i {

    transition:
        transform 0.35s ease,
        color 0.35s ease;
}


.gft-floating-whatsapp:hover {

    color:
        #ffffff !important;

    transform:
        translateY(-5px)
        scale(1.06);


    background:

        linear-gradient(
            rgba(44,105,44,0.32),
            rgba(2,11,22,0.83)
        ) padding-box,

        linear-gradient(
            135deg,

            #72bf44,

            #b1e07e
        ) border-box;


    box-shadow:
        0 18px 52px
        rgba(78,156,60,0.26),

        0 0 35px
        rgba(114,191,68,0.12);
}


.gft-floating-whatsapp:hover i {

    transform:
        rotate(-8deg)
        scale(1.09);
}


@media (max-width: 600px) {

    .gft-floating-whatsapp {

        right: 15px;
        bottom: 15px;

        width: 52px;
        height: 52px;

        font-size: 22px;
    }

}

/* =====================================================
   RIVERSIDE INTRO / ABOUT
   CORY-STYLE DARK TEAL
===================================================== */

.rp-intro-section {
    position: relative;

    overflow: hidden;

    padding:
        115px 0 110px;

    background:
        #073c4e;

    color:
        #ffffff;
}


/* =====================================================
   TOP INTRO
===================================================== */

.rp-intro-top {
    display: grid;

    grid-template-columns:
        minmax(0,1.6fr)
        minmax(280px,0.7fr);

    align-items: end;

    gap: 65px;

    padding-bottom:
        52px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.12);
}


/* =====================================================
   LABEL
===================================================== */

.rp-intro-label {
    display: inline-block;

    margin-bottom:
        18px;

    color:
        #b4d835;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


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

.rp-intro-heading h2 {
    max-width: 900px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(55px,6vw,90px);

    line-height: 0.95;

    font-weight: 400;

    letter-spacing: -4px;
}


.rp-intro-heading h2 span {
    display: block;

    color:
        #b4d835;
}


/* =====================================================
   TOP SUMMARY
===================================================== */

.rp-intro-summary p {
    margin: 0;

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

    font-size: 15px;

    line-height: 1.75;
}


/* =====================================================
   FEATURE GRID
===================================================== */

.rp-intro-feature {
    display: grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(380px,0.88fr);

    gap: 70px;

    align-items: center;

    padding-top:
        65px;
}


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

.rp-intro-image {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    background:
        #052f3e;
}


.rp-intro-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.rp-intro-image:hover img {
    transform:
        scale(1.035);
}


/* IMAGE OVERLAY */

.rp-intro-image-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(2,25,35,0.02) 35%,
            rgba(2,25,35,0.18) 60%,
            rgba(2,25,35,0.80) 100%
        );
}


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

.rp-intro-image-caption {
    position: absolute;

    z-index: 3;

    left: 35px;
    right: 35px;
    bottom: 34px;
}


.rp-intro-image-caption span {
    display: block;

    margin-bottom:
        10px;

    color:
        #c5df52;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.rp-intro-image-caption strong {
    display: block;

    max-width: 480px;

    color: #ffffff;

    font-size:
        clamp(27px,3vw,41px);

    line-height: 1.08;

    font-weight: 400;

    letter-spacing: -1.5px;
}


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

.rp-intro-content {
    max-width: 530px;
}


.rp-intro-small-title {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        18px;

    color:
        #b4d835;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.rp-intro-small-title::before {
    content: "";

    width: 34px;
    height: 1px;

    background:
        #b4d835;
}


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

.rp-intro-content h3 {
    margin:
        0 0 27px;

    color: #ffffff;

    font-size:
        clamp(38px,4vw,56px);

    line-height: 1;

    font-weight: 400;

    letter-spacing: -2.5px;
}


.rp-intro-content h3 span {
    color:
        #b4d835;
}


/* =====================================================
   TEXT
===================================================== */

.rp-intro-content p {
    margin:
        0 0 18px;

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

    font-size: 14px;

    line-height: 1.8;
}


.rp-intro-content
.rp-intro-lead {
    color:
        rgba(255,255,255,0.92);

    font-size: 16px;

    line-height: 1.75;
}


/* =====================================================
   COMPANY DETAILS
===================================================== */

.rp-intro-company {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top:
        30px;

    padding:
        19px 0;

    border-top:
        1px solid rgba(255,255,255,0.12);

    border-bottom:
        1px solid rgba(255,255,255,0.12);
}


.rp-intro-company > div:not(.rp-intro-company-line) {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.rp-intro-company span {
    color:
        rgba(255,255,255,0.48);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.rp-intro-company strong {
    color: #ffffff;

    font-size: 14px;

    font-weight: 600;
}


.rp-intro-company-line {
    width: 1px;
    height: 38px;

    background:
        rgba(255,255,255,0.16);
}


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

@media (max-width: 991px) {

    .rp-intro-section {
        padding:
            90px 0;
    }


    .rp-intro-top {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .rp-intro-summary {
        max-width: 600px;
    }


    .rp-intro-feature {
        grid-template-columns:
            1fr;

        gap: 48px;

        padding-top:
            52px;
    }


    .rp-intro-image {
        min-height:
            540px;
    }


    .rp-intro-content {
        max-width:
            650px;
    }

}


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

@media (max-width: 600px) {

    .rp-intro-section {
        padding:
            70px 0 65px;
    }


    .rp-intro-top {
        padding-bottom:
            32px;
    }


    .rp-intro-label {
        font-size:
            8px;
    }


    .rp-intro-heading h2 {
        font-size:
            clamp(42px,12vw,56px);

        letter-spacing:
            -2.7px;
    }


    .rp-intro-summary p {
        font-size:
            13px;
    }


    .rp-intro-feature {
        padding-top:
            40px;

        gap:
            38px;
    }


    .rp-intro-image {
        min-height:
            430px;
    }


    .rp-intro-image-caption {
        left: 22px;
        right: 22px;
        bottom: 23px;
    }


    .rp-intro-image-caption strong {
        font-size:
            28px;
    }


    .rp-intro-content h3 {
        font-size:
            clamp(35px,10vw,45px);

        letter-spacing:
            -2px;
    }


    .rp-intro-content
    .rp-intro-lead {
        font-size:
            15px;
    }


    .rp-intro-content p {
        font-size:
            13px;
    }


    .rp-intro-company {
        gap:
            15px;
    }


    .rp-intro-company > div:not(.rp-intro-company-line) {
        flex: 1;
    }

}


/* =====================================================
   RIVERSIDE — OUR APPROACH
   INTERACTIVE WAVE
===================================================== */

.rp-approach-section {
    position: relative;
    overflow: hidden;

    padding: 70px 0 85px;

    background: #073c4e;
    color: #ffffff;
}


/* =====================================================
   TOP
===================================================== */

.rp-approach-top {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.85fr);

    gap: 80px;

    align-items: start;

    margin-bottom: 35px;
}


/* LABEL */

.rp-approach-label {
    display: inline-block;

    margin-bottom: 14px;

    color: #d1dc00;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;
    text-transform: uppercase;
}


/* HEADING */

.rp-approach-heading h2 {
    max-width: 700px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(52px, 5.5vw, 82px);

    line-height: 0.96;

    font-weight: 400;

    letter-spacing: -4px;
}


.rp-approach-heading h2 span {
    display: block;

    color: #d1dc00;
}


/* COPY */

.rp-approach-copy {
    max-width: 520px;

    padding-top: 35px;
}


.rp-approach-copy p {
    margin: 0 0 18px;

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

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   WAVE JOURNEY
===================================================== */

.rp-wave-journey {
    position: relative;

    width: 100%;
    height: 500px;

    margin-top: 15px;
}


/* =====================================================
   SVG WAVE
===================================================== */

.rp-wave-svg {
    position: absolute;

    left: 0;
    top: 70px;

    width: 100%;
    height: 280px;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
}


.rp-wave-svg path {
    fill: none;

    stroke:
        url(#rpWaveGradient);

    stroke-width: 15;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 0 16px rgba(93,205,115,0.10)
        );
}


/* =====================================================
   POINTS
===================================================== */

.rp-wave-point {
    position: absolute;

    z-index: 5;

    width: 225px;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

    font-family: inherit;

    outline: none;

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


/* =====================================================
   POSITIONS — FOLLOWING THE WAVE
===================================================== */

.rp-wave-recover {
    left: 4%;
    top: 255px;
}


.rp-wave-generate {
    left: 29%;
    top: 155px;
}


.rp-wave-reduce {
    left: 55%;
    top: 185px;
}


.rp-wave-innovate {
    right: 4%;
    top: 120px;
}


/* =====================================================
   ICON
===================================================== */

.rp-wave-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background: #ffffff;

    color: #073c4e;

    border:
        4px solid #073c4e;

    font-size: 21px;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.13);

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


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

.rp-wave-title {
    display: block;

    margin-bottom: 8px;

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

    font-size: 24px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.6px;

    transition:
        color 0.35s ease,
        transform 0.35s ease,
        font-size 0.35s ease;
}


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

.rp-wave-description {
    display: block;

    max-width: 220px;

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

    font-size: 13px;

    line-height: 1.65;

    transition:
        color 0.35s ease,
        opacity 0.35s ease;
}


/* =====================================================
   DEFAULT / NON ACTIVE
===================================================== */

.rp-wave-point:not(.active) {
    opacity: 0.76;
}


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

.rp-wave-point:hover {
    opacity: 1;

    transform:
        translateY(-4px);
}


.rp-wave-point:hover
.rp-wave-icon {
    transform:
        scale(1.07);
}


/* =====================================================
   ACTIVE STATE
===================================================== */

.rp-wave-point.active {
    opacity: 1;

    transform:
        translateY(-7px);
}


/* ACTIVE ICON */

.rp-wave-point.active
.rp-wave-icon {
    color:
        #073c4e;

    background:
        #d1dc00;

    border-color:
        rgba(255,255,255,0.95);

    transform:
        scale(1.12);

    box-shadow:
        0 0 0 8px
        rgba(209,220,0,0.08),

        0 0 35px
        rgba(209,220,0,0.27);
}


/* ACTIVE TITLE */

.rp-wave-point.active
.rp-wave-title {
    color:
        #d1dc00;

    font-size: 28px;

    transform:
        translateX(3px);
}


/* ACTIVE DESCRIPTION */

.rp-wave-point.active
.rp-wave-description {
    color:
        rgba(255,255,255,0.90);
}


/* =====================================================
   SMALL DOT UNDER EACH POINT
===================================================== */

.rp-wave-point::after {
    content: "";

    display: block;

    width: 8px;
    height: 8px;

    margin-top: 17px;
    margin-left: 20px;

    border-radius: 50%;

    background:
        rgba(209,220,0,0.58);

    transition:
        width 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.rp-wave-point.active::after {
    width: 27px;

    border-radius: 999px;

    background:
        #d1dc00;

    box-shadow:
        0 0 15px
        rgba(209,220,0,0.24);
}


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

@media (max-width: 991px) {

    .rp-approach-section {
        padding:
            65px 0 75px;
    }


    .rp-approach-top {
        grid-template-columns:
            1fr;

        gap: 20px;

        margin-bottom: 25px;
    }


    .rp-approach-copy {
        max-width: 650px;

        padding-top: 0;
    }


    .rp-wave-journey {
        height: 540px;
    }


    .rp-wave-svg {
        top: 80px;

        height: 300px;
    }


    .rp-wave-point {
        width: 200px;
    }


    .rp-wave-recover {
        left: 2%;
        top: 290px;
    }


    .rp-wave-generate {
        left: 27%;
        top: 180px;
    }


    .rp-wave-reduce {
        left: 53%;
        top: 220px;
    }


    .rp-wave-innovate {
        right: 1%;
        top: 155px;
    }


    .rp-wave-title {
        font-size: 21px;
    }


    .rp-wave-point.active
    .rp-wave-title {
        font-size: 24px;
    }

}


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

@media (max-width: 600px) {

    .rp-approach-section {
        padding:
            55px 0 65px;
    }


    .rp-approach-top {
        display: block;

        margin-bottom: 0;
    }


    .rp-approach-heading h2 {
        max-width: 100%;

        font-size:
            clamp(41px,12vw,55px);

        line-height: 0.98;

        letter-spacing: -2.7px;
    }


    .rp-approach-copy {
        margin-top: 24px;

        padding-top: 0;
    }


    .rp-approach-copy p {
        font-size: 14px;

        line-height: 1.75;
    }


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

    .rp-wave-journey {
        height: auto;

        margin-top: 40px;

        display: flex;

        flex-direction: column;

        gap: 45px;

        padding-left: 65px;
    }


    /* REMOVE DESKTOP WAVE */

    .rp-wave-svg {
        display: none;
    }


    /* VERTICAL COLOURED LINE */

    .rp-wave-journey::before {
        content: "";

        position: absolute;

        left: 27px;
        top: 15px;
        bottom: 15px;

        width: 9px;

        border-radius: 999px;

        background:
            linear-gradient(
                180deg,
                #17a9d2 0%,
                #61c77f 52%,
                #d1dc00 100%
            );
    }


    .rp-wave-point {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        width: 100%;

        padding-left: 0;
    }


    .rp-wave-icon {
        position: absolute;

        left: -63px;
        top: 0;

        width: 48px;
        height: 48px;

        margin: 0;

        font-size: 18px;

        border:
            4px solid #073c4e;
    }


    .rp-wave-title {
        font-size: 22px;
    }


    .rp-wave-point.active
    .rp-wave-title {
        font-size: 25px;
    }


    .rp-wave-description {
        max-width: 315px;

        font-size: 13px;
    }


    .rp-wave-point::after {
        margin-left: 0;
    }

}

/* =====================================================
   RIVERSIDE ENERGY PARK
   WHITE IMAGE-TILE SECTION
===================================================== */

.rp-park-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 115px;

    background: #ffffff;

    color: #073c4e;
}


/* =====================================================
   HEADER
===================================================== */

.rp-park-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    gap: 70px;

    align-items: end;

    margin-bottom: 55px;
}


/* LABEL */

.rp-park-label {
    grid-column: 1 / -1;

    display: block;

    margin-bottom: -40px;

    color: #8da800;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


/* TITLE */

.rp-park-header h2 {
    max-width: 820px;

    margin: 0;

    color: #073c4e;

    font-size:
        clamp(52px, 5.8vw, 86px);

    line-height: 0.95;

    font-weight: 500;

    letter-spacing: -4px;
}


.rp-park-header h2 span {
    display: block;

    color: #91ad00;
}


/* DESCRIPTION */

.rp-park-header > p {
    max-width: 470px;

    margin: 0;

    color: rgba(7, 60, 78, 0.70);

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   GRID
===================================================== */

.rp-park-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: start;
}


/* =====================================================
   CARD BASE
===================================================== */

.rp-park-card {
    position: relative;

    overflow: hidden;

    min-height: 420px;

    background: #073c4e;

    cursor: default;
}


/* stagger like screenshot */

.rp-park-card:nth-child(2),
.rp-park-card:nth-child(5) {
    margin-top: 36px;
}


/* HEIGHTS */

.rp-park-card-tall {
    min-height: 505px;
}


.rp-park-card-medium {
    min-height: 445px;
}


.rp-park-card-stat {
    min-height: 445px;

    background:
        #073c4e;
}


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

.rp-park-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.75s
        cubic-bezier(.2, .8, .2, 1),

        filter 0.55s ease;
}


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

.rp-park-card-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(3, 35, 47, 0.04) 25%,
            rgba(3, 35, 47, 0.26) 52%,
            rgba(3, 35, 47, 0.91) 100%
        );

    transition:
        background 0.45s ease;
}


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

.rp-park-card-content {
    position: absolute;

    z-index: 3;

    left: 32px;
    right: 32px;
    bottom: 31px;

    color: #ffffff;

    transition:
        transform 0.45s ease;
}


/* SMALL LINE */

.rp-park-card-line {
    display: block;

    width: 52px;
    height: 3px;

    margin-bottom: 15px;

    background:
        #14a8d4;

    transition:
        width 0.4s ease,
        background 0.4s ease;
}


/* META */

.rp-park-card-small {
    display: block;

    margin-bottom: 9px;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* TITLE */

.rp-park-card h3 {
    max-width: 340px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(27px,2.5vw,38px);

    line-height: 1.03;

    font-weight: 600;

    letter-spacing: -1.5px;
}


/* DESCRIPTION */

.rp-park-card p {
    max-width: 340px;

    max-height: 0;

    margin: 0;

    overflow: hidden;

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

    font-size: 13px;

    line-height: 1.65;

    opacity: 0;

    transform:
        translateY(10px);

    transition:
        max-height 0.45s ease,
        margin 0.45s ease,
        opacity 0.4s ease,
        transform 0.4s ease;
}


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

.rp-park-card:hover img {
    transform:
        scale(1.06);

    filter:
        saturate(0.90);
}


.rp-park-card:hover
.rp-park-card-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(3,35,47,0.07) 15%,
            rgba(3,35,47,0.36) 47%,
            rgba(3,35,47,0.96) 100%
        );
}


.rp-park-card:hover
.rp-park-card-content {
    transform:
        translateY(-5px);
}


.rp-park-card:hover
.rp-park-card-line {
    width: 85px;

    background: #c7d900;
}


.rp-park-card:hover p {
    max-height: 100px;

    margin-top: 13px;

    opacity: 1;

    transform:
        translateY(0);
}


/* =====================================================
   75 MW CARD
===================================================== */

.rp-park-card-stat {
    background:
        linear-gradient(
            145deg,
            #073c4e,
            #095268
        );
}


/* decorative circles */

.rp-park-stat-bg {
    position: absolute;

    width: 330px;
    height: 330px;

    right: -90px;
    top: -100px;

    border-radius: 50%;

    border:
        1px solid
        rgba(199,217,0,0.24);
}


.rp-park-stat-bg::before,
.rp-park-stat-bg::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(199,217,0,0.12);
}


.rp-park-stat-bg::before {
    inset: 50px;
}


.rp-park-stat-bg::after {
    inset: 100px;
}


/* BIG NUMBER */

.rp-park-big-stat {
    margin-top: 8px;

    color: #ffffff;

    font-size:
        clamp(95px,9vw,145px);

    line-height: 0.84;

    font-weight: 500;

    letter-spacing: -8px;
}


.rp-park-big-stat span {
    color: #c7d900;

    font-size: 30px;

    letter-spacing: -1px;

    margin-left: 8px;
}


/* Stat paragraph visible */

.rp-park-card-stat p {
    max-height: 120px;

    margin-top: 20px;

    opacity: 0.80;

    transform: none;
}


/* =====================================================
   CORNER DETAIL
===================================================== */

.rp-park-card::after {
    content: "";

    position: absolute;

    z-index: 4;

    top: 17px;
    right: 17px;

    width: 10px;
    height: 10px;

    border-top:
        1px solid rgba(255,255,255,0.50);

    border-right:
        1px solid rgba(255,255,255,0.50);

    opacity: 0;

    transform:
        translate(-8px,8px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


.rp-park-card:hover::after {
    opacity: 1;

    transform:
        translate(0,0);
}


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

@media (max-width: 991px) {

    .rp-park-section {
        padding:
            90px 0;
    }


    .rp-park-header {
        grid-template-columns:
            1fr;

        gap: 24px;

        margin-bottom: 45px;
    }


    .rp-park-label {
        grid-column: auto;

        margin-bottom: -6px;
    }


    .rp-park-header > p {
        max-width: 620px;
    }


    .rp-park-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .rp-park-card:nth-child(2),
    .rp-park-card:nth-child(5) {
        margin-top: 0;
    }


    .rp-park-card:nth-child(even) {
        margin-top: 30px;
    }

}


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

@media (max-width: 600px) {

    .rp-park-section {
        padding:
            70px 0;
    }


    .rp-park-header {
        margin-bottom:
            38px;
    }


    .rp-park-label {
        font-size:
            8px;
    }


    .rp-park-header h2 {
        font-size:
            clamp(42px,12vw,56px);

        letter-spacing:
            -2.7px;
    }


    .rp-park-header > p {
        font-size:
            13px;
    }


    /*
       Keep two columns like your usual mobile
       preference, but make them compact.
    */

    .rp-park-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 12px;
    }


    .rp-park-card,
    .rp-park-card-tall,
    .rp-park-card-medium,
    .rp-park-card-stat {
        min-height: 315px;

        margin-top: 0 !important;
    }


    /* slight masonry alternation */

    .rp-park-card:nth-child(even) {
        margin-top: 22px !important;
    }


    .rp-park-card-content {
        left: 16px;
        right: 16px;
        bottom: 18px;
    }


    .rp-park-card-line {
        width: 35px;
        height: 2px;

        margin-bottom: 10px;
    }


    .rp-park-card-small {
        margin-bottom: 7px;

        font-size: 6px;
    }


    .rp-park-card h3 {
        font-size:
            clamp(19px,5.5vw,25px);

        letter-spacing:
            -1px;
    }


    .rp-park-card p {
        font-size:
            10.5px;

        line-height:
            1.5;
    }


    .rp-park-big-stat {
        font-size:
            clamp(62px,18vw,90px);

        letter-spacing:
            -5px;
    }


    .rp-park-big-stat span {
        display: block;

        margin:
            7px 0 0;

        font-size: 18px;

        letter-spacing: 0;
    }


    /* On touch screens keep copy visible */

    .rp-park-card p {
        max-height: 100px;

        margin-top: 10px;

        opacity: 0.78;

        transform: none;
    }

}
/* =====================================================
   HOW ENERGY RECOVERY WORKS
   CORY-INSPIRED BLUE SECTION
===================================================== */

.rp-process-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 110px;

    background: #12a8d5;

    color: #073c4e;
}


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

.rp-process-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 75px;
}


/* =====================================================
   LABEL
===================================================== */

.rp-process-label {
    display: inline-block;

    margin-bottom: 17px;

    color: #073c4e;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


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

.rp-process-heading h2 {
    max-width: 850px;

    margin: 0;

    color: #073c4e;

    font-size:
        clamp(54px, 6vw, 88px);

    line-height: 0.94;

    font-weight: 500;

    letter-spacing: -4.2px;
}


.rp-process-heading h2 span {
    display: block;

    color: #ffffff;
}


/* =====================================================
   INTRO
===================================================== */

.rp-process-intro {
    max-width: 500px;
}


.rp-process-intro p {

    color: #073c4e;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.75;

}


/* =====================================================
   PROCESS TRACK
===================================================== */

.rp-process-track {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 0;

    padding-top: 38px;
}


/* =====================================================
   CONNECTING LINE
===================================================== */

.rp-process-line {
    position: absolute;

    left: 6%;
    right: 6%;

    top: 66px;

    height: 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #073c4e 0%,
            #147f8c 30%,
            #75c85f 68%,
            #c7d900 100%
        );
}


/* =====================================================
   STEPS
===================================================== */

.rp-process-step {
    position: relative;

    z-index: 3;

    padding:
        0 18px;

    min-width: 0;
}


/* alternating visual movement */

.rp-process-step:nth-child(odd) {
    padding-top: 0;
}


.rp-process-step:nth-child(even) {
    padding-top: 50px;
}


/* =====================================================
   MARKER
===================================================== */

.rp-process-marker {
    position: relative;

    width: 58px;
    height: 58px;

    margin-bottom: 22px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #ffffff;

    color: #073c4e;

    border:
        5px solid #12a8d5;

    font-size: 21px;

    box-shadow:
        0 0 0 1px rgba(7,60,78,0.10);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease;
}


/* dot under marker */

.rp-process-marker::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -18px;

    width: 8px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background: #c7d900;

    opacity: 0;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* =====================================================
   STEP NUMBER
===================================================== */

.rp-process-stage {
    display: block;

    margin-bottom: 11px;

    color: rgba(7, 60, 78, 0.75);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


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

.rp-process-step h3 {
    max-width: 170px;

    color: #073c4e;

    font-size: clamp(20px, 1.7vw, 27px);

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: -0.7px;

    margin: 0 0 14px;

    transition:
        color 0.35s ease;
}


/* =====================================================
   COPY
===================================================== */

.rp-process-step p {
    max-width: 175px;

    margin: 0;

    color: #07475b;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.65;
}


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

.rp-process-step:hover
.rp-process-marker {

    transform:
        translateY(-7px);

    background: #c7d900;

    color: #073c4e;

    box-shadow:
        0 10px 30px
        rgba(7,60,78,0.14);
}


.rp-process-step:hover
.rp-process-marker::after {

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(3px);
}


.rp-process-step:hover h3 {
    color: #ffffff;
}


/* =====================================================
   BOTTOM MESSAGE
===================================================== */

.rp-process-bottom {
    display: flex;

    align-items: center;

    gap: 22px;

    max-width: 760px;

    margin-top: 80px;

    padding-top: 28px;

    border-top:
        1px solid rgba(7,60,78,0.25);
}


.rp-process-bottom-icon {
    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #073c4e;

    background: #c7d900;

    font-size: 21px;
}


.rp-process-bottom p {
    margin: 0;

    color:
        rgba(7,60,78,0.82);

    font-size: 15px;

    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .rp-process-section {
        padding:
            90px 0;
    }


    .rp-process-header {
        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 55px;
    }


    .rp-process-intro {
        max-width: 650px;
    }


    .rp-process-track {
        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap:
            55px 25px;
    }


    .rp-process-line {
        display: none;
    }


    .rp-process-step,
    .rp-process-step:nth-child(even) {
        padding:
            0 15px 0 0;
    }


    .rp-process-step {
        border-top:
            2px solid rgba(7,60,78,0.16);

        padding-top:
            24px !important;
    }

}


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

@media (max-width: 600px) {

    .rp-process-section {
        padding:
            70px 0;
    }


    .rp-process-header {
        margin-bottom:
            42px;
    }


    .rp-process-label {
        font-size: 8px;
    }


    .rp-process-heading h2 {
        font-size:
            clamp(42px,12vw,56px);

        letter-spacing:
            -2.7px;
    }


    .rp-process-intro p {
        font-size: 13px;
    }


    /*
       HORIZONTAL SWIPE ON MOBILE
    */

    .rp-process-track {
        display: flex;

        gap: 14px;

        overflow-x: auto;

        scroll-snap-type:
            x mandatory;

        padding:
            10px 5px 20px 0;

        scrollbar-width: none;
    }


    .rp-process-track::-webkit-scrollbar {
        display: none;
    }


    .rp-process-step,
    .rp-process-step:nth-child(even) {

        flex:
            0 0 72%;

        min-height:
            315px;

        padding:
            26px 24px !important;

        scroll-snap-align:
            start;

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

        border:
            1px solid rgba(255,255,255,0.22);
    }


    .rp-process-marker {
        width: 52px;
        height: 52px;

        border-color:
            #12a8d5;
    }


    .rp-process-stage {
        margin-top: 22px;

        font-size: 8px;
    }


    .rp-process-step h3 {
        max-width: 230px;

        font-size: 27px;
    }


    .rp-process-step p {
        max-width: 240px;

        font-size: 13px;
    }


    .rp-process-bottom {
        margin-top: 45px;

        gap: 15px;
    }


    .rp-process-bottom-icon {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }


    .rp-process-bottom p {
        font-size: 13px;
    }

}
/* =========================================================
   RIVERSIDE ENERGY PARK
   WHITE EDITORIAL SECTION
========================================================= */

.rep-park-section {
    position: relative;

    background: #ffffff;

    padding: 105px 0 100px;

    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.rep-park-header {
    width: min(900px, 92%);

    margin: 0 auto 65px;

    text-align: center;
}


/* SMALL LABEL */

.rep-park-label {
    position: relative;

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

    margin-bottom: 22px;

    color: #00506a;

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

    letter-spacing: 3px;
    text-transform: uppercase;
}


/* LITTLE GREEN DETAIL */

.rep-park-label::before {
    content: "";

    width: 32px;
    height: 2px;

    margin-right: 13px;

    background: #bfdc00;
}


/* MAIN TITLE */

.rep-park-header h2 {
    margin: 0;

    color: #003f56;

    font-size: clamp(48px, 5.4vw, 82px);
    font-weight: 500;

    line-height: 0.98;
    letter-spacing: -3.5px;
}


/* COLOURED SECOND LINE */

.rep-park-header h2 span {
    display: block;

    color: #11a9cf;
}


/* DESCRIPTION */

.rep-park-header p {
    max-width: 720px;

    margin: 28px auto 0;

    color: #455d66;

    font-size: 16px;
    font-weight: 500;

    line-height: 1.75;
}


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

.rep-park-visual {
    position: relative;

    width: 100%;
    height: 510px;

    margin-bottom: 70px;

    overflow: hidden;

    border-radius: 0 70px 0 70px;
}


.rep-park-visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1.1s cubic-bezier(.2,.7,.2,1),
        filter 0.7s ease;
}


/* SUBTLE HOVER */

.rep-park-visual:hover img {
    transform: scale(1.025);
}


/* SMALL DARK CAPTION */

.rep-park-image-caption {
    position: absolute;

    left: 0;
    bottom: 0;

    min-width: 380px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px 30px;

    background: #003f56;

    color: #ffffff;

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

    letter-spacing: 1.4px;
    text-transform: uppercase;
}


.rep-park-caption-line {
    width: 38px;
    height: 1px;

    background: #bfdc00;
}


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

.rep-park-focus {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    max-width: 1180px;

    margin: 0 auto;
}


/* INDIVIDUAL ITEM */

.rep-park-focus-item {
    position: relative;

    padding: 5px 55px 10px;

    text-align: center;
}


/* DIVIDERS */

.rep-park-focus-item:not(:last-child) {
    border-right: 1px solid #d8e0e3;
}


/* NUMBER */

.rep-park-number {
    display: block;

    margin-bottom: 18px;

    color: #11a9cf;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* ICON */

.rep-park-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 22px;

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

    border: 1px solid #d5e2e6;
    border-radius: 50%;

    color: #004b63;

    font-size: 23px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}


/* TITLE */

.rep-park-focus-item h3 {
    margin: 0 0 14px;

    color: #003f56;

    font-size: 24px;
    font-weight: 600;

    line-height: 1.15;
}


/* DESCRIPTION */

.rep-park-focus-item p {
    max-width: 290px;

    margin: 0 auto;

    color: #536a72;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.7;
}


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

.rep-park-focus-item:hover .rep-park-icon {
    background: #bfdc00;

    border-color: #bfdc00;

    color: #003f56;

    transform: translateY(-5px);
}


.rep-park-focus-item:hover h3 {
    color: #0ba6cb;
}


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

@media (max-width: 991px) {

    .rep-park-section {
        padding: 85px 0;
    }


    .rep-park-header {
        margin-bottom: 50px;
    }


    .rep-park-header h2 {
        font-size: clamp(44px, 7vw, 65px);

        letter-spacing: -2.5px;
    }


    .rep-park-visual {
        height: 430px;

        border-radius: 0 50px 0 50px;
    }


    .rep-park-focus-item {
        padding: 5px 30px;
    }

}


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

@media (max-width: 767px) {

    .rep-park-section {
        padding: 70px 0 65px;
    }


    /* HEADER */

    .rep-park-header {
        width: 94%;

        margin-bottom: 40px;
    }


    .rep-park-label {
        font-size: 9px;

        letter-spacing: 2.2px;
    }


    .rep-park-label::before {
        width: 24px;
    }


    .rep-park-header h2 {
        font-size: clamp(38px, 11vw, 52px);

        line-height: 1;

        letter-spacing: -2px;
    }


    .rep-park-header p {
        margin-top: 22px;

        padding: 0 8px;

        font-size: 15px;

        line-height: 1.7;
    }


    /* IMAGE */

    .rep-park-visual {
        height: 340px;

        margin-bottom: 50px;

        border-radius: 0 35px 0 35px;
    }


    .rep-park-image-caption {
        min-width: auto;

        width: auto;

        padding: 15px 20px;

        gap: 10px;

        font-size: 9px;
    }


    .rep-park-caption-line {
        width: 20px;
    }


    /* FOCUS */

    .rep-park-focus {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .rep-park-focus-item {
        padding: 35px 25px;
    }


    .rep-park-focus-item:not(:last-child) {
        border-right: none;

        border-bottom: 1px solid #d8e0e3;
    }


    .rep-park-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 18px;
    }


    .rep-park-focus-item h3 {
        font-size: 22px;
    }


    .rep-park-focus-item p {
        max-width: 330px;

        font-size: 14px;
    }

}

/* =====================================================
   RIVERSIDE — THE CIRCULAR ECONOMY
===================================================== */

.rp-circular-section {
    position: relative;

    overflow: hidden;

    padding:
        105px 0 110px;

    background:
        #073c4e;

    color:
        #ffffff;
}


/* =====================================================
   BACKGROUND CIRCLES
===================================================== */

.rp-circular-bg-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.rp-circle-one {
    width: 600px;
    height: 600px;

    left: -360px;
    top: -180px;

    border:
        1px solid rgba(255,255,255,0.045);
}


.rp-circle-two {
    width: 420px;
    height: 420px;

    right: -240px;
    bottom: -200px;

    border:
        1px solid rgba(199,217,0,0.10);
}


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

.rp-circular-layout {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(420px,0.95fr)
        minmax(0,1.05fr);

    gap:
        95px;

    align-items: center;
}


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

.rp-circular-visual {
    display: flex;

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

    min-height: 580px;
}


/* =====================================================
   RESOURCE LOOP
===================================================== */

.rp-resource-loop {
    position: relative;

    width: 480px;
    height: 480px;

    max-width: 100%;
}


/* OUTER RING */

.rp-resource-ring {
    position: absolute;

    inset: 48px;

    border-radius: 50%;

    border:
        18px solid rgba(255,255,255,0.07);

    border-top-color:
        #19a9d2;

    border-right-color:
        #62c77c;

    border-bottom-color:
        #c7d900;

    border-left-color:
        #72c8ad;

    transform:
        rotate(18deg);

    box-shadow:
        0 0 45px rgba(95,200,115,0.07);

    transition:
        transform 1s ease;
}


.rp-resource-loop:hover
.rp-resource-ring {
    transform:
        rotate(42deg);
}


/* =====================================================
   LOOP ITEMS
===================================================== */

.rp-loop-item {
    position: absolute;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: #ffffff;

    text-align: center;
}


.rp-loop-top {
    left: 50%;
    top: 0;

    transform:
        translateX(-50%);
}


.rp-loop-right {
    right: -5px;
    top: 50%;

    transform:
        translateY(-50%);
}


.rp-loop-bottom {
    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);
}


.rp-loop-left {
    left: -7px;
    top: 50%;

    transform:
        translateY(-50%);
}


/* ICON */

.rp-loop-icon {
    width: 62px;
    height: 62px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #ffffff;

    color:
        #073c4e;

    border:
        6px solid #073c4e;

    font-size:
        21px;

    box-shadow:
        0 9px 30px rgba(0,0,0,0.15);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.rp-loop-item:hover
.rp-loop-icon {
    transform:
        scale(1.1);

    background:
        #c7d900;
}


/* ITEM TEXT */

.rp-loop-item strong {
    color:
        rgba(255,255,255,0.84);

    font-size: 13px;

    font-weight: 600;
}


/* =====================================================
   CENTER
===================================================== */

.rp-loop-center {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 220px;
    height: 220px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

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

    background:
        #063544;

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

    box-shadow:
        0 25px 60px rgba(0,0,0,0.13);

    text-align: center;
}


.rp-loop-center span {
    color:
        rgba(255,255,255,0.55);

    font-size: 16px;

    line-height: 1.1;
}


.rp-loop-center strong {
    color:
        #c7d900;

    font-size: 31px;

    line-height: 1;

    font-weight: 500;

    letter-spacing:
        -1.4px;
}


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

.rp-circular-content {
    max-width:
        650px;
}


/* LABEL */

.rp-circular-label {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom:
        18px;

    color:
        #c7d900;

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        1.7px;

    text-transform: uppercase;
}


.rp-circular-label::before {
    content: "";

    width: 34px;
    height: 2px;

    background:
        #c7d900;
}


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

.rp-circular-content h2 {
    max-width: 680px;

    margin:
        0 0 30px;

    color:
        #ffffff;

    font-size:
        clamp(48px,5.3vw,76px);

    line-height:
        0.97;

    font-weight:
        400;

    letter-spacing:
        -3.8px;
}


.rp-circular-content h2 span {
    display: block;

    color:
        #c7d900;
}


/* =====================================================
   COPY
===================================================== */

.rp-circular-content > p {
    max-width: 590px;

    margin:
        0 0 18px;

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

    font-size: 15px;

    font-weight: 500;

    line-height:
        1.8;
}


.rp-circular-content
.rp-circular-lead {
    color:
        rgba(255,255,255,0.92);

    font-size: 17px;
}


.rp-circular-lead strong {
    color:
        #ffffff;

    font-weight: 700;
}


/* =====================================================
   IMPORTANT MESSAGE
===================================================== */

.rp-circular-message {
    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 18px;

    align-items: center;

    margin-top:
        35px;

    padding:
        23px 0;

    border-top:
        1px solid rgba(255,255,255,0.14);

    border-bottom:
        1px solid rgba(255,255,255,0.14);
}


.rp-circular-message-icon {
    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #c7d900;

    color:
        #073c4e;

    font-size:
        20px;
}


.rp-circular-message p {
    margin: 0;

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

    font-size: 13px;

    line-height: 1.7;
}


.rp-circular-message strong {
    display: block;

    margin-bottom:
        3px;

    color:
        #ffffff;

    font-size: 14px;
}


/* =====================================================
   RESOURCE HIERARCHY
   WHITE CONTRAST SECTION
===================================================== */

.rp-hierarchy {
    position: relative;

    z-index: 3;

    margin-top: 85px;

    /* full white panel */
    padding: 55px 55px 50px;

    background: #ffffff;

    color: #073c4e;

    border-radius: 0 55px 0 55px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.08);
}


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

.rp-hierarchy-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 45px;

    padding-bottom: 28px;

    border-bottom:
        1px solid rgba(7, 60, 78, 0.14);
}


.rp-hierarchy-heading span {
    color: #91a900;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.rp-hierarchy-heading strong {
    color: #073c4e;

    font-size:
        clamp(27px, 2.8vw, 40px);

    font-weight: 500;

    letter-spacing: -1.5px;
}


/* =====================================================
   HIERARCHY TRACK
===================================================== */

.rp-hierarchy-track {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 0;

    padding-top: 8px;
}


/* CONNECTING LINE */

.rp-hierarchy-track::before {
    content: "";

    position: absolute;

    left: 5%;
    right: 5%;

    top: 22px;

    height: 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #16a8d2 0%,
            #55c4a5 30%,
            #7bc868 58%,
            #c7d900 80%,
            #d7dfe1 100%
        );
}


/* =====================================================
   EACH STEP
===================================================== */

.rp-hierarchy-step {
    position: relative;

    z-index: 2;

    padding: 0 22px;
}


/* DOT */

.rp-hierarchy-dot {
    display: block;

    width: 34px;
    height: 34px;

    margin-bottom: 20px;

    border-radius: 50%;

    background: #ffffff;

    border: 8px solid #073c4e;

    box-shadow:
        0 0 0 1px rgba(7, 60, 78, 0.15);
}


/* NUMBER */

.rp-hierarchy-step small {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(7, 60, 78, 0.42);

    font-size: 8px;

    font-weight: 700;
}


/* TITLE */

.rp-hierarchy-step strong {
    display: block;

    color:
        rgba(7, 60, 78, 0.75);

    font-size: 17px;

    font-weight: 600;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =====================================================
   ACTIVE — RIVERSIDE'S ROLE
===================================================== */

.rp-hierarchy-active
.rp-hierarchy-dot {
    background: #c7d900;

    border-color: #073c4e;

    box-shadow:
        0 0 0 8px rgba(199, 217, 0, 0.11);
}


.rp-hierarchy-active strong {
    color: #073c4e;

    font-size: 21px;
}


.rp-hierarchy-active em {
    display: block;

    margin-top: 8px;

    color: #8fa900;

    font-size: 9px;

    font-style: normal;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


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

.rp-hierarchy-step:hover strong {
    color: #10a7cf;

    transform:
        translateY(-2px);
}


.rp-hierarchy-step:hover
.rp-hierarchy-dot {
    background: #c7d900;
}


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

@media (max-width: 991px) {

    .rp-hierarchy {
        margin-top: 70px;

        padding:
            45px 35px 40px;

        border-radius:
            0 40px 0 40px;
    }


    .rp-hierarchy-track {
        grid-template-columns:
            repeat(5, minmax(120px, 1fr));

        overflow-x: auto;

        padding-bottom: 15px;

        scrollbar-width: none;
    }


    .rp-hierarchy-track::-webkit-scrollbar {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .rp-hierarchy {
        margin-top: 55px;

        padding:
            35px 22px 30px;

        border-radius:
            0 30px 0 30px;
    }


    .rp-hierarchy-heading {
        display: block;

        margin-bottom: 30px;

        padding-bottom: 22px;
    }


    .rp-hierarchy-heading strong {
        display: block;

        margin-top: 8px;

        font-size: 28px;
    }


    .rp-hierarchy-track {
        display: flex;

        gap: 12px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        padding:
            5px 3px 15px 0;
    }


    .rp-hierarchy-track::before {
        display: none;
    }


    .rp-hierarchy-step {
        flex:
            0 0 145px;

        min-height: 135px;

        padding: 18px;

        scroll-snap-align: start;

        background: #f5f7f7;

        border:
            1px solid rgba(7, 60, 78, 0.10);
    }


    .rp-hierarchy-dot {
        width: 26px;
        height: 26px;

        margin-bottom: 13px;

        border-width: 6px;
    }


    .rp-hierarchy-step strong {
        font-size: 14px;
    }


    .rp-hierarchy-active {
        background:
            #f5f8e8;

        border-color:
            rgba(199, 217, 0, 0.35);
    }


    .rp-hierarchy-active strong {
        font-size: 16px;
    }

}


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

@media (max-width: 991px) {

    .rp-circular-section {
        padding:
            90px 0;
    }


    .rp-circular-layout {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .rp-circular-visual {
        min-height:
            500px;
    }


    .rp-circular-content {
        max-width:
            700px;
    }


    .rp-hierarchy {
        margin-top:
            75px;
    }

}


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

@media (max-width: 600px) {

    .rp-circular-section {
        padding:
            70px 0;
    }


    .rp-circular-layout {
        gap:
            35px;
    }


    /* CIRCLE */

    .rp-circular-visual {
        min-height:
            390px;
    }


    .rp-resource-loop {
        width:
            340px;

        height:
            340px;
    }


    .rp-resource-ring {
        inset:
            42px;

        border-width:
            13px;
    }


    .rp-loop-icon {
        width:
            49px;

        height:
            49px;

        border-width:
            5px;

        font-size:
            17px;
    }


    .rp-loop-item strong {
        font-size:
            10px;
    }


    .rp-loop-center {
        width:
            155px;

        height:
            155px;
    }


    .rp-loop-center span {
        font-size:
            12px;
    }


    .rp-loop-center strong {
        font-size:
            23px;
    }


    /* CONTENT */

    .rp-circular-label {
        font-size:
            8px;
    }


    .rp-circular-content h2 {
        font-size:
            clamp(40px,11vw,54px);

        letter-spacing:
            -2.5px;
    }


    .rp-circular-content > p {
        font-size:
            14px;
    }


    .rp-circular-content
    .rp-circular-lead {
        font-size:
            15px;
    }


    .rp-circular-message {
        grid-template-columns:
            48px 1fr;

        gap:
            14px;
    }


    .rp-circular-message-icon {
        width:
            46px;

        height:
            46px;
    }


    /* =================================================
       HIERARCHY MOBILE — HORIZONTAL SWIPE
    ================================================= */

    .rp-hierarchy {
        margin-top:
            65px;
    }


    .rp-hierarchy-heading {
        display: block;

        margin-bottom:
            30px;
    }


    .rp-hierarchy-heading strong {
        display: block;

        margin-top:
            8px;

        font-size:
            27px;
    }


    .rp-hierarchy-track {
        display: flex;

        gap:
            12px;

        overflow-x:
            auto;

        scroll-snap-type:
            x mandatory;

        padding:
            5px 5px 15px 0;

        scrollbar-width:
            none;
    }


    .rp-hierarchy-track::-webkit-scrollbar {
        display: none;
    }


    .rp-hierarchy-track::before {
        display: none;
    }


    .rp-hierarchy-step {
        flex:
            0 0 145px;

        min-height:
            125px;

        padding:
            18px;

        scroll-snap-align:
            start;

        border:
            1px solid rgba(255,255,255,0.12);
    }


    .rp-hierarchy-dot {
        width:
            24px;

        height:
            24px;

        margin-bottom:
            13px;

        border-width:
            5px;
    }


    .rp-hierarchy-step strong {
        font-size:
            14px;
    }


    .rp-hierarchy-active {
        background:
            rgba(199,217,0,0.06);

        border-color:
            rgba(199,217,0,0.30);
    }

}

/* =====================================================
   RIVERSIDE — FINAL CONTENT SECTION
===================================================== */

.rf-final-section {
    position: relative;

    overflow: hidden;
}


/* =====================================================
   UPPER DEEP TEAL
===================================================== */

.rf-final-main {
    position: relative;

    padding:
        105px 0 95px;

    background:
        #073c4e;

    color:
        #ffffff;
}


/* =====================================================
   HEADER
===================================================== */

.rf-final-header {
    max-width:
        930px;

    margin:
        0 auto 70px;

    text-align:
        center;
}


.rf-final-label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #c7d900;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;
}


.rf-final-label::before,
.rf-final-label::after {
    content: "";

    width:
        30px;

    height:
        2px;

    background:
        #c7d900;
}


/* TITLE */

.rf-final-header h2 {
    margin: 0;

    color:
        #ffffff;

    font-size:
        clamp(52px,6vw,88px);

    line-height:
        0.95;

    font-weight:
        400;

    letter-spacing:
        -4px;
}


.rf-final-header h2 span {
    display:
        block;

    color:
        #c7d900;
}


/* INTRO */

.rf-final-header p {
    max-width:
        720px;

    margin:
        28px auto 0;

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

    font-size:
        16px;

    font-weight:
        500;

    line-height:
        1.75;
}


/* =====================================================
   FEATURE GRID
===================================================== */

.rf-final-feature {
    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(380px,0.85fr);

    gap:
        70px;

    align-items:
        center;
}


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

.rf-final-image {
    position:
        relative;

    min-height:
        600px;

    overflow:
        hidden;

    background:
        #052f3e;

    border-radius:
        0 70px 0 70px;
}


.rf-final-image img {
    position:
        absolute;

    inset: 0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.8s ease;
}


.rf-final-image:hover img {
    transform:
        scale(1.04);
}


/* OVERLAY */

.rf-final-image-overlay {
    position:
        absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(3,28,38,0.04) 35%,
            rgba(3,28,38,0.18) 60%,
            rgba(3,28,38,0.86) 100%
        );
}


/* CAPTION */

.rf-final-image-caption {
    position:
        absolute;

    z-index:
        3;

    left:
        34px;

    right:
        34px;

    bottom:
        34px;
}


.rf-final-image-caption span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #c7d900;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.rf-final-image-caption strong {
    display:
        block;

    max-width:
        500px;

    color:
        #ffffff;

    font-size:
        clamp(28px,3vw,42px);

    line-height:
        1.05;

    font-weight:
        400;

    letter-spacing:
        -1.7px;
}


/* =====================================================
   STORY
===================================================== */

.rf-final-story {
    max-width:
        550px;
}


.rf-final-story-label {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        18px;

    color:
        #c7d900;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.rf-final-story-label::before {
    content: "";

    width:
        32px;

    height:
        2px;

    background:
        #c7d900;
}


/* STORY HEADING */

.rf-final-story h3 {
    margin:
        0 0 26px;

    color:
        #ffffff;

    font-size:
        clamp(40px,4.3vw,62px);

    line-height:
        0.98;

    font-weight:
        400;

    letter-spacing:
        -2.7px;
}


.rf-final-story h3 span {
    display:
        block;

    color:
        #c7d900;
}


/* COPY */

.rf-final-story p {
    margin:
        0 0 17px;

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

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.8;
}


.rf-final-story
.rf-final-lead {
    color:
        rgba(255,255,255,0.93);

    font-size:
        16px;
}


/* =====================================================
   LOCATION
===================================================== */

.rf-final-location {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        30px;

    padding:
        23px 0;

    border-top:
        1px solid rgba(255,255,255,0.14);

    border-bottom:
        1px solid rgba(255,255,255,0.14);
}


.rf-location-icon {
    width:
        54px;

    height:
        54px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #c7d900;

    color:
        #073c4e;

    font-size:
        20px;
}


.rf-final-location > div:last-child {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.rf-final-location span {
    color:
        rgba(255,255,255,0.45);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.rf-final-location strong {
    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        600;
}


.rf-final-location small {
    color:
        rgba(255,255,255,0.58);

    font-size:
        11px;
}


/* =====================================================
   FOUR-COLUMN GRID
===================================================== */

.rf-final-grid {
    display:
        grid;

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

    margin-top:
        85px;

    border-top:
        1px solid rgba(255,255,255,0.14);

    border-bottom:
        1px solid rgba(255,255,255,0.14);
}


/* ITEM */

.rf-final-item {
    min-height:
        300px;

    padding:
        30px 28px;

    border-right:
        1px solid rgba(255,255,255,0.13);

    transition:
        background 0.35s ease;
}


.rf-final-item:last-child {
    border-right:
        none;
}


.rf-final-item:hover {
    background:
        rgba(255,255,255,0.04);
}


/* INDEX */

.rf-final-index {
    display:
        block;

    margin-bottom:
        25px;

    color:
        #c7d900;

    font-size:
        9px;

    font-weight:
        700;
}


/* ICON */

.rf-final-icon {
    width:
        52px;

    height:
        52px;

    margin-bottom:
        20px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

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

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

    color:
        #ffffff;

    font-size:
        19px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


.rf-final-item:hover
.rf-final-icon {
    background:
        #c7d900;

    color:
        #073c4e;

    transform:
        translateY(-5px);
}


/* TITLE */

.rf-final-item h3 {
    max-width:
        220px;

    margin:
        0 0 14px;

    color:
        #ffffff;

    font-size:
        24px;

    line-height:
        1.06;

    font-weight:
        500;

    letter-spacing:
        -1px;
}


/* COPY */

.rf-final-item p {
    max-width:
        250px;

    margin: 0;

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

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.7;
}


/* =====================================================
   BRIGHT BLUE BAND
===================================================== */

.rf-final-band {
    padding:
        65px 0;

    background:
        #12a8d5;

    color:
        #073c4e;
}


/* BAND INNER */

.rf-final-band-inner {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(350px,0.85fr);

    gap:
        75px;

    align-items:
        center;
}


/* SMALL LABEL */

.rf-final-band-heading > span {
    display:
        block;

    margin-bottom:
        14px;

    color:
        #073c4e;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


/* BIG BAND TITLE */

.rf-final-band-heading h3 {
    max-width:
        760px;

    margin: 0;

    color:
        #073c4e;

    font-size:
        clamp(41px,4.6vw,68px);

    line-height:
        0.98;

    font-weight:
        400;

    letter-spacing:
        -3px;
}


.rf-final-band-heading h3 strong {
    display:
        block;

    color:
        #ffffff;

    font-weight:
        400;
}


/* BAND COPY */

.rf-final-band-copy p {
    max-width:
        500px;

    margin:
        0 0 25px;

    color:
        rgba(7,60,78,0.82);

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.75;
}


/* CTA */

.rf-final-btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        22px;

    min-width:
        220px;

    padding:
        16px 27px;

    border-radius:
        999px;

    background:
        #c7d900;

    color:
        #073c4e;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}


.rf-final-btn:hover {
    transform:
        translateY(-4px);

    background:
        #073c4e;

    color:
        #ffffff;
}


.rf-final-btn i {
    transition:
        transform 0.35s ease;
}


.rf-final-btn:hover i {
    transform:
        translateX(5px);
}


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

@media (max-width: 991px) {

    .rf-final-main {
        padding:
            90px 0 80px;
    }


    .rf-final-feature {
        grid-template-columns:
            1fr;

        gap:
            48px;
    }


    .rf-final-image {
        min-height:
            520px;
    }


    .rf-final-story {
        max-width:
            700px;
    }


    .rf-final-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .rf-final-item:nth-child(2) {
        border-right:
            none;
    }


    .rf-final-item:nth-child(1),
    .rf-final-item:nth-child(2) {
        border-bottom:
            1px solid rgba(255,255,255,0.13);
    }


    .rf-final-band-inner {
        grid-template-columns:
            1fr;

        gap:
            30px;
    }

}


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

@media (max-width: 600px) {

    .rf-final-main {
        padding:
            70px 0 65px;
    }


    /* HEADER */

    .rf-final-header {
        margin-bottom:
            45px;
    }


    .rf-final-label {
        font-size:
            8px;
    }


    .rf-final-header h2 {
        font-size:
            clamp(40px,11.5vw,54px);

        letter-spacing:
            -2.5px;
    }


    .rf-final-header p {
        font-size:
            14px;
    }


    /* IMAGE */

    .rf-final-image {
        min-height:
            400px;

        border-radius:
            0 35px 0 35px;
    }


    .rf-final-image-caption {
        left:
            21px;

        right:
            21px;

        bottom:
            22px;
    }


    .rf-final-image-caption strong {
        font-size:
            27px;
    }


    /* STORY */

    .rf-final-story h3 {
        font-size:
            clamp(36px,10vw,47px);

        letter-spacing:
            -2px;
    }


    .rf-final-story
    .rf-final-lead {
        font-size:
            15px;
    }


    .rf-final-story p {
        font-size:
            13px;
    }


    /* GRID */

    .rf-final-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        margin-top:
            60px;
    }


    .rf-final-item {
        min-height:
            280px;

        padding:
            24px 18px;
    }


    .rf-final-item:nth-child(2n) {
        border-right:
            none;
    }


    .rf-final-item:nth-child(1),
    .rf-final-item:nth-child(2) {
        border-bottom:
            1px solid rgba(255,255,255,0.13);
    }


    .rf-final-icon {
        width:
            46px;

        height:
            46px;
    }


    .rf-final-item h3 {
        font-size:
            20px;
    }


    .rf-final-item p {
        font-size:
            10.5px;
    }


    /* BLUE BAND */

    .rf-final-band {
        padding:
            50px 0;
    }


    .rf-final-band-heading h3 {
        font-size:
            clamp(36px,10vw,48px);

        letter-spacing:
            -2px;
    }


    .rf-final-band-copy p {
        font-size:
            13px;
    }


    .rf-final-btn {
        min-width:
            200px;

        padding:
            14px 22px;
    }

}