/* =========================================================
   GLOBAL
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    width: 100%;
    height: 100%;

    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    font-family: 'Nunito', sans-serif;

    background: #eef3f7;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


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

#video-preloader {
    position: fixed;

    inset: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    overflow: hidden;

    background: #ffffff;

    z-index: 20000;
}


#preloader-video {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    background: #ffffff;

    z-index: 1;
}


/* =========================================================
   OPTIONAL FINAL FRAME
========================================================= */

#video-end-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url('video-end.webp');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0;

    visibility: hidden;

    z-index: 2;
}


#video-end-background.active {
    opacity: 1;

    visibility: visible;
}


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

.video-end-overlay {
    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;
    height: 100%;

    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.65s ease,
        visibility 0.65s ease;
}


.video-end-overlay.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* SUBTLE SCREEN TINT */

.video-end-overlay::before {
    content: "";

    position: fixed;

    inset: 0;

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

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   LIGHT / FROSTED PANEL
========================================================= */

.end-screen-panel {
    position: relative;

    flex: 0 1 auto;

    width: min(520px, 100%);

    margin: auto;

    padding:
        28px
        40px
        34px;

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

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

    backdrop-filter:
        blur(10px);

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

    border-radius: 30px;

    box-shadow:
        0 18px 55px
        rgba(27, 73, 155, 0.14);

    text-align: center;

    opacity: 0;

    transform:
        translateY(22px)
        scale(0.98);

    transition:
        opacity 0.7s ease 0.12s,
        transform 0.7s ease 0.12s;
}


.video-end-overlay.active
.end-screen-panel {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


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

.end-logo {
    display: block;

    width: min(285px, 76%);

    height: auto;

    max-height: 155px;

    object-fit: contain;

    margin:
        0
        auto
        16px;
}


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

.video-end-content {
    width: 100%;

    max-width: 440px;

    margin: 0 auto;
}


.video-end-content h1 {
    margin:
        0
        0
        9px;

    color: #2355ad;

    font-size:
        clamp(22px, 2.1vw, 28px);

    line-height: 1.18;

    font-weight: 900;
}


.end-description {
    max-width: 410px;

    margin:
        0
        auto
        20px;

    color: #3f4650;

    font-size:
        clamp(13px, 1.15vw, 15px);

    line-height: 1.5;

    font-weight: 500;
}


/* =========================================================
   FORMS
========================================================= */

.video-subscribe-form,
.subscribe-form {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 12px;
}


.video-subscribe-form input,
.video-subscribe-form button,
.subscribe-form input,
.subscribe-form button {
    display: block;

    width: 100%;

    min-width: 0;

    margin: 0;

    font-family: inherit;
}


/* INPUT */

.video-subscribe-form input,
.subscribe-form input {
    min-height: 52px;

    padding:
        13px
        20px;

    border:
        2px solid
        #cfe1eb;

    border-radius: 999px;

    outline: none;

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

    color: #333333;

    /*
       Keep at 16px to prevent unwanted
       iPhone form zoom.
    */

    font-size: 16px;

    line-height: 1.2;

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


.video-subscribe-form input::placeholder,
.subscribe-form input::placeholder {
    color: #87949e;

    opacity: 1;
}


.video-subscribe-form input:focus,
.subscribe-form input:focus {
    border-color: #2355ad;

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(35, 85, 173, 0.10);
}


/* BUTTON */

.video-subscribe-form button,
.subscribe-form button {
    min-height: 52px;

    padding:
        13px
        20px;

    border: 0;

    border-radius: 999px;

    background: #2355ad;

    color: #ffffff;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 800;

    cursor: pointer;

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


.video-subscribe-form button:hover,
.subscribe-form button:hover {
    background: #173f88;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(27, 73, 155, 0.20);
}


.video-subscribe-form button:focus-visible,
.subscribe-form button:focus-visible,
.close-btn:focus-visible {
    outline:
        3px solid
        rgba(35, 85, 173, 0.35);

    outline-offset: 3px;
}


.video-subscribe-form button:disabled,
.subscribe-form button:disabled {
    opacity: 0.7;

    cursor: wait;

    transform: none;

    box-shadow: none;
}


/* FORM MESSAGE */

.form-message {
    display: none;

    margin-top: 4px;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   ORIGINAL HERO
========================================================= */

.hero-background {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    background-image:
        url('hero-banner.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================================
   DESKTOP HOTSPOT
========================================================= */

@media (min-width: 769px) {

    .banner-trigger-btn {
        position: absolute;

        bottom: 13%;

        left: 48%;

        transform:
            translateX(-50%);

        width: 36%;

        height: 75px;

        padding: 0;

        background: transparent;

        border: 0;

        cursor: pointer;

        z-index: 10;
    }

}


/* =========================================================
   ORIGINAL POPUP
========================================================= */

.popup-overlay {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    overflow-y: auto;

    background:
        rgba(43, 85, 133, 0.50);

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

    backdrop-filter:
        blur(4px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.popup-overlay.active {
    opacity: 1;

    visibility: visible;
}


.popup-modal {
    position: relative;

    width: min(440px, 100%);

    margin: auto;

    padding:
        40px
        35px
        35px;

    background: #ffffff;

    border-radius: 28px;

    box-shadow:
        0 25px 50px
        rgba(27, 73, 155, 0.30);

    text-align: center;

    transform:
        scale(0.94)
        translateY(15px);

    transition:
        transform 0.3s ease;
}


.popup-overlay.active
.popup-modal {
    transform:
        scale(1)
        translateY(0);
}


.close-btn {
    position: absolute;

    top: 10px;

    right: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    padding: 0;

    background: transparent;

    border: 0;

    color: #88a1b3;

    font-size: 30px;

    line-height: 1;

    font-weight: 700;

    cursor: pointer;
}


.popup-modal h2 {
    margin:
        0
        0
        12px;

    color: #2355ad;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 900;
}


.popup-modal p {
    margin:
        0
        0
        24px;

    color: #444444;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 500;
}


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

@media
(min-width: 769px)
and
(max-width: 1100px) {

    .end-screen-panel {
        width: min(480px, 90vw);

        padding:
            26px
            34px
            30px;
    }


    .end-logo {
        width: min(260px, 70%);
    }

}


/* =========================================================
   MOBILE
   Dedicated portrait video:
   preloader-mobile.mp4
========================================================= */

@media (max-width: 768px) {

    /*
       Portrait video has been designed specifically
       for mobile, so keep it centered.
    */

    #preloader-video {
        object-fit: cover;

        object-position: center center;
    }


    .hero-background {
        background-image:
            url('hero-banner-mobile.jpg');
    }


    .banner-trigger-btn {
        position: absolute;

        bottom: 35%;

        left: 50%;

        transform:
            translateX(-50%);

        width: 100%;

        height: 55px;

        padding: 0;

        background: transparent;

        border: 0;

        cursor: pointer;

        z-index: 10;
    }


    /* END SCREEN */

    .video-end-overlay {
        align-items: flex-start;

        padding:
            max(14px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(14px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
    }


    /* PANEL */

    .end-screen-panel {
        width: 100%;

        max-width: 420px;

        margin: auto;

        padding:
            22px
            22px
            25px;

        border-radius: 24px;
    }


    /* LOGO */

    .end-logo {
        width: min(235px, 75%);

        max-height: 125px;

        margin-bottom: 12px;
    }


    /* HEADING */

    .video-end-content h1 {
        font-size:
            clamp(21px, 6vw, 25px);

        margin-bottom: 8px;
    }


    /* DESCRIPTION */

    .end-description {
        max-width: 330px;

        margin-bottom: 16px;

        font-size: 14px;

        line-height: 1.42;
    }


    /* FORM */

    .video-subscribe-form {
        gap: 10px;
    }


    /* POPUP */

    .popup-modal {
        width: 100%;

        max-width: 420px;

        padding:
            38px
            22px
            26px;

        border-radius: 24px;
    }

}


/* =========================================================
   SMALL MOBILE
   320px / 360px / 375px devices
========================================================= */

@media (max-width: 390px) {

    .video-end-overlay {
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }


    .end-screen-panel {
        padding:
            18px
            16px
            20px;

        border-radius: 20px;
    }


    .end-logo {
        width: min(205px, 72%);

        max-height: 105px;

        margin-bottom: 9px;
    }


    .video-end-content h1 {
        font-size: 20px;
    }


    .end-description {
        font-size: 13px;

        margin-bottom: 13px;
    }


    .video-subscribe-form input,
    .video-subscribe-form button {
        min-height: 48px;

        padding:
            11px
            16px;
    }


    .video-subscribe-form button {
        font-size: 16px;
    }

}


/* =========================================================
   SHORT DESKTOP / TABLET
========================================================= */

@media
(min-width: 769px)
and
(max-height: 760px) {

    .video-end-overlay {
        padding: 14px;
    }


    .end-screen-panel {
        max-width: 470px;

        padding:
            18px
            32px
            21px;
    }


    .end-logo {
        width: 205px;

        max-height: 95px;

        margin-bottom: 7px;
    }


    .video-end-content h1 {
        font-size: 21px;

        margin-bottom: 5px;
    }


    .end-description {
        margin-bottom: 10px;

        font-size: 13px;

        line-height: 1.35;
    }


    .video-subscribe-form {
        gap: 8px;
    }


    .video-subscribe-form input,
    .video-subscribe-form button {
        min-height: 44px;

        padding:
            9px
            16px;
    }

}


/* =========================================================
   MOBILE LANDSCAPE / SHORT MOBILE

   Even though ≤768px devices receive the mobile
   video source, the content remains protected
   when the phone rotates to landscape.
========================================================= */

@media (max-height: 560px) {

    .video-end-overlay {
        display: block;

        padding:
            max(10px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }


    .end-screen-panel {
        width: min(500px, 100%);

        margin: 0 auto;

        padding:
            14px
            24px
            16px;

        border-radius: 20px;
    }


    .end-logo {
        width: 170px;

        max-height: 78px;

        margin-bottom: 4px;
    }


    .video-end-content h1 {
        font-size: 19px;

        margin-bottom: 4px;
    }


    .end-description {
        max-width: 390px;

        margin-bottom: 8px;

        font-size: 12px;

        line-height: 1.3;
    }


    .video-subscribe-form {
        gap: 7px;
    }


    .video-subscribe-form input,
    .video-subscribe-form button {
        min-height: 42px;

        padding:
            8px
            15px;
    }


    .video-subscribe-form button {
        font-size: 15px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}