:root {
        --blue: #0f294c;
        --blue-light: #e8f7ff;
        --text: #262c29;
        --body: #5c5c5c;
        --border: #d9d9d9;
        --white: #fff;
        --container: 1196px;
    }
    .container {
        /* width: min(var(--container), calc(100% - 48px)); */
        margin-inline: auto
    }

    h1,
    h2,
    h3,
    p {
        margin: 0
    }

    h1,
    h2,
    h3,
    .serif {
        font-family: "EB Garamond", serif;
        color: var(--text);
        font-weight: 400
    }

    h2 {
        font-size: 50px;
        line-height: 1.2;
        letter-spacing: -.68px
    }

    .eyebrow {
        font-family: "EB Garamond", serif;
        font-style: italic;
        font-size: 24px;
        color: var(--text)
    }

    .wrapper__container {
        width: 83%;
        max-width: 1920px;
        margin: 0 auto;
    }

    .wrapper__container__1195 {
        max-width: 1195px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }


    /* Header */

    /* Hero */
    .hero {
        min-height: 947px;
        background-image:
            linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, 0) 75%),
            url('../images/banner.webp');
        background-position: center;
        background-size: cover;
        display: flex;
        align-items: flex-start;
    }

    .hero-content {
        padding-top: 158px;
        color: #fff;
        max-width: 654px
    }

    .hero h1 {
        font-size: 50px;
        line-height: 1.16;
        color: #fff;
        font-weight: 500;
        max-width: 626px
    }

    .hero-subtitle {
        font-family: "EB Garamond", serif;
        font-size: 32px;
        line-height: 1.3;
        margin-top: 12px
    }

    .hero-copy {
        margin-top: 24px
    }

    .hero-copy p {
        color: #fff;
        font-size: 18px;
        line-height: 25px
    }

    .hero-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 24px;
        margin: 16px 0
    }

    .hero-list ul {
        margin: 0;
        padding-left: 27px
    }

    .hero-list li {
        font-weight: 700;
        margin-bottom: 8px
    }

    .hero-buttons {
        display: flex;
        gap: 24px;
        margin-top: 24px
    }

    /* Generic sections */
    .section {
        padding: 100px 0;
        background: linear-gradient(180deg, #fff 0%, #fff 48%, var(--blue-light) 90%, #fff 100%)
    }

    .section.soft {
        background: linear-gradient(180deg, var(--blue-light) 16%, rgba(229, 246, 255, 0) 90%)
    }

    .copy p {
        margin-bottom: 10px
    }

    .copy strong {
        font-weight: 700
    }

    .media-card {
        height: 378px;
        border: 1px solid var(--border);
        border-radius: 32px;
        overflow: hidden;
        background: #fff
    }

    .media-card img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .stats {
        display: flex;
        gap: 24px;
        margin-top: 24px
    }

    .stat {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 24px;
        min-height: 182px;
        padding: 23px;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .stat:first-child {
        width: 245px
    }

    .stat:last-child {
        width: 313px
    }

    .stat-label {
        font-size: 16px;
        color: var(--text)
    }

    .stat-value {
        font-family: "EB Garamond", serif;
        font-weight: 700;
        font-size: 32px;
        color: var(--body)
    }

    /* Opportunity */
    .opportunity-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 58px;
        align-items: start
    }

    .check-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 32px;
        padding: 28px 24px
    }

    .check-card h3 {
        font-size: 32px;
        margin-bottom: 28px
    }



    /* Support */
    .support {
        background: var(--blue);
        color: #fff;
        padding: 100px 0
    }

    .support h2,
    .support .eyebrow {
        color: #fff
    }

    .support-intro {
        max-width: 598px;
        margin-top: 40px;
        color: #cacaca
    }

    .support-intro p {
        margin-bottom: 10px
    }

    .support-box {
        background: #fff;
        border-radius: 24px;
        padding: 18px;
        margin-top: 76px
    }

    .support-stage {
        display: grid;
        grid-template-columns: 310px 1fr;
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 18px
    }

    .stage-label {
        padding: 24px;
        background: var(--blue);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center
    }

    .stage-label.light {
        background: var(--blue-light);
        color: var(--text)
    }

    .stage-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 20px;
        object-fit: contain
    }

    .stage-title {
        font-family: "EB Garamond", serif;
        font-weight: 700;
        font-size: 28px;
        line-height: 1.05;
        text-transform: uppercase
    }

    .stage-title {
        max-width: 150px;
    }

    .stage-desc {
        font-size: 18px;
        color: #cacaca;
        margin-top: 18px;
        border-top: 1px solid #AAAAAA;
        padding-top: 12px;
        position: relative;
    }

    .stage-desc::before {
        content: "";
        position: absolute;
        left: calc(50% - 31px);
        top: 0;
        width: 42px;
        height: 1px;
        background: #153D74;
    }

    .stage-content {
        padding: 4px 12px
    }

    .support-row {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
        align-items: center
    }

    .support-row:last-child {
        border-bottom: 0
    }

    .support-name {
        text-align: center;
        font-family: "EB Garamond", serif;
        font-size: 26px;
        line-height: 30px;
        color: var(--text)
    }

    .support-points {
        display: grid;
        gap: 12px
    }

    .support-point {
        display: flex;
        gap: 6px;
        align-items: center;
        font-size: 16px;
        color: #5C5C5C;
        line-height: 26px;
    }

    .mini-check {
        width: 21px;
        height: 21px;
        flex: 0 0 21px;
        border-radius: 50%;
        color: var(--blue);
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 700
    }

    /* FAQ */
    .faq-section {
        padding: 60px 0 100px
    }

    .faq-title {
        text-align: center;
        margin-bottom: 50px
    }

    .faq-list {
        border-top: 1px solid rgba(0, 0, 0, .2)
    }

    .faq-item {
        border-bottom: 1px solid rgba(0, 0, 0, .2)
    }

    .faq-question {
        width: 100%;
        border: 0;
        background: none;
        padding: 22px 46px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        font-family: "EB Garamond", serif;
        font-size: 23px;
        color: var(--body);
        text-transform: uppercase;
        cursor: pointer
    }

    .faq-icon {
        font-size: 30px;
        line-height: 1;
        font-family: Arial;
        font-weight: 400
    }

    .faq-answer {
        padding: 0 46px 24px;
        font-size: 18px;
        line-height: 25px;
        display: none;
        max-width: 1050px;
        font-weight: 400;
        line-height: 25.26px;
        color: #5C5C5C;
    }

    .faq-item.active .faq-answer {
        display: block
    }

    .faq-item.active .faq-icon {
        font-size: 0
    }

    .faq-item.active .faq-icon:after {
        content: "_";
        font-size: 30px
    }

    /* CTA */
    .cta {
        padding: 70px 24px 100px;
        text-align: center;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--blue-light) 90%);
        border-bottom: 1px solid var(--border)
    }

    .cta h2 {
        max-width: 760px;
        margin: 0 auto 20px
    }

    .cta-copy {
        max-width: 800px;
        margin: 0 auto 40px
    }

    .cta-buttons {
        display: flex;
        justify-content: center;
        gap: 55px
    }

    .disclaimer {
        font-size: 14px;
        max-width: 715px;
        margin: 40px auto 0
    }

    /* Footer */
    .footer {
        background: var(--blue);
        color: #cacaca;
        padding: 113px 0
    }

    .footer-top {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 80px
    }

    .footer-logo {
        width: 93px;
        height: 56px;
        object-fit: contain;
        margin-bottom: 25px
    }

    .footer-title {
        font-family: "EB Garamond", serif;
        font-size: 23px;
        line-height: 29px;
        color: #fff
    }

    .socials {
        display: flex;
        gap: 11px;
        margin-top: 28px
    }

    .socials img {
        width: 30px;
        height: 30px;
        object-fit: contain
    }

    .footer-links {
        display: grid;
        grid-template-columns: 131px 230px 263px;
        gap: 55px
    }

    .footer-col {
        display: grid;
        align-content: start;
        gap: 13px;
        font-size: 18px
    }

    .footer-contact-title {
        font-size: 21px;
        color: #d9d9d9
    }

    .phone {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .phone img {
        width: 15px;
        height: 16px
    }

    .qr {
        width: 105px;
        height: 60px;
        object-fit: contain;
        margin-top: 30px
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, .15);
        margin-top: 75px;
        padding-top: 38px;
        display: flex;
        justify-content: space-between;
        font-size: 15px
    }

    .footer-bottom-links {
        display: flex;
        gap: 20px
    }

    .hero-list ul li {
        font-size: 18px;
        color: #fff;
        list-style-type: disc;
        line-height: 25px;
    }

    .hero-list ul li:not(:last-child) {
        margin-bottom: 8px;
    }

    .fb__50 {
        font-size: 50px;
        line-height: 58px;
    }

    .fb__16 {
        font-size: 16px;
        line-height: 26px;
        font-family: "europa";
    }

    .fb__18 {
        font-size: 18px;
        line-height: 25px;
        font-family: "europa";
    }

    .copy p {
        font-size: 18px;
        line-height: 25px;
        font-family: "europa";
    }

    .mb__24 {
        margin-bottom: 24px;
    }

    .mb__28 {
        margin-bottom: 28px;
    }

    .mb__16 {
        margin-bottom: 16px;
    }

    .mb__40 {
        margin-bottom: 40px;
    }

    .fw__400 {
        font-weight: 400;
    }

    .fw__500 {
        font-weight: 500;
    }

    .fw-600,
    .fw__600 {
        font-weight: 600;
    }

    .fw__700 {
        font-weight: 700;
    }

    .ls__68 {
        letter-spacing: -0.68px;
    }

    .fc__5C5C5C {
        color: var(--body);
    }

    .fc__fff {
        color: #fff;
    }

    .py__100 {
        padding: 100px 0px;
    }

    .btn {
        padding: 15px 21px;
        font-size: 16px;
        font-weight: 400;
    }

    .btn.white-btn {
        color: #0F294C;
        border: 2px solid #0F294C !important;
    }

    .pos__rel {
        position: relative;
    }

    .text__uppercase {
        text-transform: uppercase;
    }

    .mw__1196 {
        max-width: 1196px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .wrapper__1220 {
        max-width: 1250px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 15px;
    }

    .wrapper__sos__2__left {
        max-width: 627px;
        width: 100%;
        padding-right: 90px;
    }

    .wrapper__sos__2__right {
        max-width: calc(100% - 627px);
        width: 100%;
    }

    .video__card video {
        width: 100%;
        border-radius: 22px;
    }

    .custom__row {
        display: flex;
        flex-wrap: wrap;
    }

    .img__fluid {
        max-width: 100%;
        width: auto;
    }

    .video__card {
        box-shadow: 0px 4px 10px 0px #E8F7FF;
        border-radius: 22px;
    }

    .video__card .caption {
        position: absolute;
        bottom: 11px;
        left: 23px;
    }

    .wrapper__sos__3__left {
        max-width: 635px;
        width: 100%;
        padding-right: 38px;
    }

    .wrapper__sos__3__right {
        max-width: calc(100% - 635px);
        width: 100%;
    }

    .check__ul li {
        font-size: 16px;
        font-weight: 400;
        color: var(--body);
        position: relative;
        display: flex;
        align-items: center;
        column-gap: 6px;
    }

    .check__ul li::before {
        content: "";
        background-image: url(../images/reicon_tick-circle.svg);
        background-repeat: no-repeat;
        width: 21px;
        height: 21px;
        min-width: 21px;
        background-size: 21px auto;
        display: inline-block;
    }

    .check__ul li:not(:last-child) {
        margin-bottom: 22px;
    }

    .wrapper__sos__3 .custom__row {
        align-items: flex-end;
    }

    .wrapper__sos__4__grid__left {
        max-width: 655px;
        width: 100%;
        padding-right: 58px;
    }

    .wrapper__sos__4__grid__right {
        max-width: calc(100% - 655px);
        width: 100%;
    }

    .wrapper__sos__6__grid__left {
        max-width: 710px;
        width: 100%;
        padding-right: 132px;
    }

    .wrapper__sos__6__grid__right {
        max-width: calc(100% - 710px);
        width: 100%;
    }

    .wrapper__6__right .check__ul {
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid #D4ECFF;
    }

    .wrapper__sos__7__grid__left {
        max-width: 636px;
        width: 100%;
        padding-right: 58px;
    }

    .wrapper__sos__7__grid__right {
        max-width: calc(100% - 636px);
        width: 100%;
    }

    .wrapper__sos__7__grid {
        align-items: flex-end;
    }

    .wrapper__sos__5 .copy p {
        color: #fff;
        max-width: 597px;
        width: 100%;
    }

    .support__left {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }



    /* Responsive */
    @media (max-width:1100px) {
        .nav-wrap {
            gap: 25px
        }

        .nav {
            gap: 16px
        }

        .hero-content {
            padding-top: 120px
        }

        .support-row {
            grid-template-columns: 170px 1fr
        }

        .footer-top {
            grid-template-columns: 250px 1fr;
            gap: 40px
        }

        .footer-links {
            grid-template-columns: 1fr 1fr 1.2fr;
            gap: 30px
        }
    }

    @media (max-width:820px) {
        :root {
            --container: 100%
        }

        .container {
            width: min(100% - 32px, 680px)
        }

        h2 {
            font-size: 38px;
            line-height: 1.12
        }


        .hero {
            min-height: auto;
            padding: 80px 0;
            background-position: 62% center
        }

        .hero-content {
            padding: 0px;
            max-width: 100%
        }

        .hero h1 {
            font-size: 42px
        }

        .hero-subtitle {
            font-size: 27px
        }

        .hero-list {
            grid-template-columns: 1fr;
            gap: 0
        }

        .section,
        .support {
            padding: 70px 0
        }

        .opportunity-grid {
            grid-template-columns: 1fr;
            gap: 40px;
            padding-bottom: 60px
        }

        .media-card {
            height: 300px
        }

        .stats {
            flex-direction: column
        }

        .stat:first-child,
        .stat:last-child {
            width: 100%
        }

        .support-box {
            padding: 10px;
            margin-top: 40px
        }

        .support-stage {
            grid-template-columns: 1fr
        }

        .stage-label {
            padding: 30px 20px
        }

        .support-row {
            grid-template-columns: 1fr;
            gap: 15px;
            padding: 22px 10px
        }

        .support-name {
            text-align: left
        }

        .faq-section {
            padding: 50px 0 70px
        }

        .faq-question {
            padding: 20px 16px;
            font-size: 20px;
            gap: 15px
        }

        .faq-answer {
            padding: 0 16px 22px;
            font-size: 16px
        }

        .wrapper__sos__2__left,
        .wrapper__sos__2__right,
        .wrapper__sos__3__left,
        .wrapper__sos__3__right,
        .wrapper__sos__4__grid__left,
        .wrapper__sos__4__grid__right,
        .wrapper__sos__6__grid__left,
        .wrapper__sos__6__grid__right,
        .wrapper__sos__7__grid__left,
        .wrapper__sos__7__grid__right {
            max-width: 100%;
            padding: 0px;
        }

        .wrapper__sos__2 .custom__row,
        .wrapper__sos__3 .custom__row,
        .wrapper__sos__4__grid.custom__row,
        .wrapper__sos__6__grid.custom__row,
        .wrapper__sos__7__grid {
            row-gap: 40px;
        }

    }

    @media (max-width:480px) {
        .hero h1 {
            font-size: 36px
        }

        .hero-subtitle {
            font-size: 24px
        }

        .eyebrow {
            font-size: 21px
        }

        .hero-buttons .btn,
        .cta-buttons .btn {
            width: 100%
        }

        .hero-buttons,
        .cta-buttons {
            flex-direction: column;
            gap: 12px;
            align-items: stretch
        }
    }