/* =========================================================
   BOREK STARY — CONTACT PAGE
   ========================================================= */

.contact-page,
.contact-page * {
    box-sizing: border-box;
}

.contact-page {
    --contact-green: #123f31;
    --contact-green-2: #1c654c;
    --contact-green-soft: #edf4ef;

    --contact-gold: #b29b5e;
    --contact-gold-soft: #e7ddc1;

    --contact-text: #18352b;
    --contact-muted: #64736b;

    --contact-border: #dfe7e2;
    --contact-background: #f8faf8;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(84, 125, 104, .09),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #fafcfb 45%,
            #f5f8f6 100%
        );

    color: var(--contact-text);
}


.contact-shell {
    width:
        min(
            1240px,
            calc(100% - 48px)
        );

    margin:
        0 auto;
}


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

.contact-hero {
    position: relative;

    overflow: hidden;

    padding:
        82px 0
        72px;

    border-bottom:
        1px solid
        var(--contact-border);

    background:
        linear-gradient(
            110deg,
            #fffefa,
            #f3f7f4
        );
}

.contact-hero::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -80px;

    width: 560px;
    height: 560px;

    border:
        1px solid
        rgba(178, 155, 94, .15);

    border-radius: 50%;

    pointer-events: none;
}

.contact-hero::after {
    content: "";

    position: absolute;

    top: -90px;
    right: 120px;

    width: 380px;
    height: 380px;

    border:
        1px solid
        rgba(49, 103, 79, .08);

    border-radius: 50%;

    pointer-events: none;
}


.contact-hero .contact-shell {
    position: relative;
    z-index: 3;
}


.contact-hero-eyebrow {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom:
        22px;

    color:
        #68766d;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}

.contact-hero-eyebrow i {
    width: 52px;
    height: 1px;

    background:
        var(--contact-gold);
}


.contact-hero h1 {
    margin:
        0;

    color:
        #0b2c21;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight:
        700;

    line-height:
        .98;

    letter-spacing:
        -.045em;
}


.contact-hero > .contact-shell > p {
    max-width:
        680px;

    margin:
        23px 0 0;

    color:
        #55685e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            18px,
            1.5vw,
            22px
        );

    line-height:
        1.5;
}

.contact-hero > .contact-shell > p span {
    display: block;

    color:
        var(--contact-green-2);
}


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

.contact-main {
    padding:
        72px 0
        90px;
}


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

.contact-primary-grid {
    display: grid;

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

    gap:
        24px;
}


/* =========================================================
   GENERIC CARD
   ========================================================= */

.contact-card {
    position: relative;

    min-height:
        100%;

    padding:
        38px;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        22px;

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

    box-shadow:
        0 18px 45px
        rgba(
            23,
            54,
            41,
            .055
        );
}


.contact-card-heading {
    display: flex;
    align-items: center;

    gap:
        17px;

    margin-bottom:
        33px;
}


.contact-card-icon {
    display: grid;
    place-items: center;

    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    border:
        1px solid
        rgba(
            30,
            99,
            75,
            .15
        );

    border-radius:
        13px;

    background:
        var(--contact-green-soft);

    color:
        var(--contact-green-2);
}

.contact-card-icon svg {
    width:
        23px;

    height:
        23px;
}


.contact-kicker {
    margin:
        0 0 7px;

    color:
        #759084;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.contact-card h2,
.contact-section-heading h2,
.contact-thanks h2 {
    margin:
        0;

    color:
        #12372a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        700;

    letter-spacing:
        -.035em;
}

.contact-card h2 {
    font-size:
        27px;
}


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

.contact-details {
    display: grid;

    gap:
        0;

    margin:
        0;

    font-style:
        normal;
}


.contact-detail-row {
    display: grid;

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

    gap:
        18px;

    padding:
        20px 0;

    border-top:
        1px solid
        #edf1ee;
}

.contact-detail-row:first-child {
    border-top:
        0;

    padding-top:
        0;
}


.contact-detail-label {
    padding-top:
        3px;

    color:
        #819088;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.contact-detail-row div {
    display: flex;
    flex-direction: column;

    align-items:
        flex-start;

    gap:
        4px;

    min-width:
        0;
}


.contact-detail-row strong {
    color:
        #193c2f;

    font-size:
        16px;

    font-weight:
        750;

    line-height:
        1.45;
}


.contact-detail-row span {
    line-height:
        1.55;
}


.contact-detail-row a {
    color:
        var(--contact-green-2);

    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1.45;

    text-decoration:
        none;

    transition:
        color .15s ease;
}

.contact-detail-row a:hover {
    color:
        #0d4634;

    text-decoration:
        underline;

    text-underline-offset:
        4px;
}


.contact-detail-row small {
    color:
        var(--contact-muted);

    font-size:
        12px;
}


/* =========================================================
   OFFICE
   ========================================================= */

.contact-card--office {
    background:
        linear-gradient(
            145deg,
            #143f31 0%,
            #0f3328 100%
        );

    color:
        #e9f1ed;

    border-color:
        transparent;
}

.contact-card--office
.contact-card-icon {
    border-color:
        rgba(
            255,
            255,
            255,
            .10
        );

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

    color:
        #c8d9d1;
}

.contact-card--office
.contact-kicker {
    color:
        #88aa9a;
}

.contact-card--office h2 {
    color:
        #fff;
}


.contact-office-content > p {
    margin:
        24px 0 0;

    color:
        #b9cbc2;

    font-size:
        14px;

    line-height:
        1.75;
}


.contact-office-highlight {
    padding:
        24px;

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

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            .055
        );
}

.contact-office-highlight span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #8eaa9d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}

.contact-office-highlight strong {
    display:
        block;

    color:
        #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    line-height:
        1.35;
}


.contact-office-note {
    display:
        grid;

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

    gap:
        13px;

    margin-top:
        27px;

    padding-top:
        23px;

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

.contact-office-note > span {
    display: grid;
    place-items: center;

    width:
        28px;

    height:
        28px;

    border-radius:
        50%;

    background:
        rgba(
            201,
            181,
            124,
            .12
        );

    color:
        #d2bd80;
}

.contact-office-note p {
    margin:
        0;

    color:
        #d1ddd7;

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   BANKING
   ========================================================= */

.contact-banking {
    margin-top:
        78px;
}


.contact-section-heading {
    max-width:
        670px;

    margin-bottom:
        32px;
}

.contact-section-heading h2 {
    font-size:
        clamp(
            34px,
            3vw,
            47px
        );
}

.contact-section-heading > p:last-child {
    margin:
        14px 0 0;

    color:
        var(--contact-muted);

    font-size:
        15px;

    line-height:
        1.7;
}


.contact-bank-grid {
    display: grid;

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

    gap:
        18px;
}


.contact-bank-card {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        410px;

    padding:
        30px;

    overflow:
        hidden;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        19px;

    background:
        #fff;

    box-shadow:
        0 15px 36px
        rgba(
            21,
            48,
            37,
            .045
        );
}


.contact-bank-card--primary {
    border-color:
        rgba(
            178,
            155,
            94,
            .43
        );

    background:
        linear-gradient(
            150deg,
            #fffef9,
            #f8faf7
        );
}


.contact-bank-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        30px;
}


.contact-bank-number {
    color:
        #c2ad73;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        17px;

    font-style:
        italic;
}


.contact-bank-badge {
    padding:
        7px 11px;

    border:
        1px solid
        rgba(
            33,
            91,
            68,
            .10
        );

    border-radius:
        999px;

    background:
        #f1f6f3;

    color:
        #537164;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.contact-bank-card h3 {
    min-height:
        62px;

    margin:
        0 0 16px;

    color:
        #173a2d;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    line-height:
        1.3;

    letter-spacing:
        -.025em;
}


.contact-bank-description {
    min-height:
        48px;

    margin:
        -6px 0 17px;

    color:
        var(--contact-muted);

    font-size:
        13px;

    line-height:
        1.6;
}


.contact-account {
    margin:
        6px 0 24px;

    padding:
        19px;

    border:
        1px solid
        #e4e9e6;

    border-radius:
        13px;

    background:
        #f8faf9;
}

.contact-account span {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #84918a;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}

.contact-account strong {
    display:
        block;

    color:
        #143f31;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size:
        clamp(
            14px,
            1.1vw,
            17px
        );

    font-weight:
        700;

    line-height:
        1.55;

    letter-spacing:
        .025em;

    font-variant-numeric:
        tabular-nums;
}


.contact-bank-meta {
    display:
        grid;

    gap:
        13px;

    margin:
        0;
}

.contact-bank-meta > div {
    display:
        grid;

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

    gap:
        12px;
}

.contact-bank-meta dt {
    color:
        #8a958f;

    font-size:
        10px;

    font-weight:
        700;
}

.contact-bank-meta dd {
    margin:
        0;

    color:
        #425c50;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.5;
}


.contact-bank-footnote {
    margin:
        auto 0 0;

    padding-top:
        22px;

    color:
        #76867e;

    font-size:
        11px;

    line-height:
        1.6;
}


.contact-bank-recipient {
    display:
        grid;

    grid-template-columns:
        165px
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        18px;

    padding:
        22px 26px;

    border:
        1px solid
        var(--contact-border);

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            .67
        );
}

.contact-bank-recipient > span {
    color:
        #85938c;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}

.contact-bank-recipient strong {
    color:
        #27483a;

    font-size:
        13px;

    line-height:
        1.5;
}

.contact-bank-recipient p {
    margin:
        0;

    color:
        #6c7c74;

    font-size:
        12px;
}


/* =========================================================
   THANK YOU
   ========================================================= */

.contact-thanks {
    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    margin-top:
        72px;

    padding:
        40px 45px;

    border:
        1px solid
        rgba(
            178,
            155,
            94,
            .28
        );

    border-radius:
        22px;

    background:
        linear-gradient(
            110deg,
            #fffdf6,
            #f6f9f6
        );
}


.contact-thanks-mark {
    position:
        relative;

    width:
        72px;

    height:
        72px;

    border:
        1px solid
        rgba(
            178,
            155,
            94,
            .55
        );

    border-radius:
        50%;
}

.contact-thanks-mark span {
    position:
        absolute;

    top:
        18px;

    left:
        50%;

    width:
        1px;

    height:
        37px;

    background:
        #aa9253;

    transform:
        translateX(-50%);
}

.contact-thanks-mark i {
    position:
        absolute;

    top:
        28px;

    left:
        50%;

    width:
        22px;

    height:
        1px;

    background:
        #aa9253;

    transform:
        translateX(-50%);
}


.contact-thanks h2 {
    font-size:
        30px;
}

.contact-thanks > div:last-child > p:last-child {
    max-width:
        750px;

    margin:
        12px 0 0;

    color:
        #62746b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    line-height:
        1.75;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .contact-bank-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .contact-bank-card:first-child {
        grid-column:
            1 / -1;
    }

    .contact-bank-card:first-child {
        min-height:
            auto;
    }

}


@media (max-width: 820px) {

    .contact-shell {
        width:
            min(
                100% - 30px,
                1240px
            );
    }

    .contact-hero {
        padding:
            58px 0
            52px;
    }

    .contact-main {
        padding:
            48px 0
            70px;
    }

    .contact-primary-grid {
        grid-template-columns:
            1fr;
    }

    .contact-banking {
        margin-top:
            58px;
    }

    .contact-bank-recipient {
        grid-template-columns:
            1fr;

        gap:
            7px;
    }

}


@media (max-width: 620px) {

    .contact-card {
        padding:
            26px 22px;

        border-radius:
            17px;
    }

    .contact-card-heading {
        align-items:
            flex-start;
    }

    .contact-card h2 {
        font-size:
            23px;
    }

    .contact-detail-row {
        grid-template-columns:
            1fr;

        gap:
            7px;
    }

    .contact-detail-label {
        padding-top:
            0;
    }

    .contact-bank-grid {
        grid-template-columns:
            1fr;
    }

    .contact-bank-card:first-child {
        grid-column:
            auto;
    }

    .contact-bank-card {
        min-height:
            auto;

        padding:
            25px 22px;
    }

    .contact-bank-card h3 {
        min-height:
            0;
    }

    .contact-bank-description {
        min-height:
            0;
    }

    .contact-bank-footnote {
        margin-top:
            24px;
    }

    .contact-account strong {
        font-size:
            14px;
    }

    .contact-thanks {
        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            30px 25px;
    }

    .contact-thanks-mark {
        width:
            58px;

        height:
            58px;
    }

    .contact-thanks-mark span {
        top:
            14px;

        height:
            31px;
    }

    .contact-thanks-mark i {
        top:
            23px;
    }

}