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

.contact-page {
    position: relative;
    z-index: 3;

    min-height: 100vh;

    background-color: #ffffff;
}


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

.contact-hero {
    position: relative;

    padding:
        calc(60px + var(--header-height))
        20px
        60px;

    overflow: hidden;

    background-color: var(--navy);
    border-top: 6px solid var(--orange);

    text-align: center;

    transform: translateZ(0);
    backface-visibility: hidden;
}

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

    position: absolute;
    inset: -4px;
    z-index: 0;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(231, 196, 113, 0.08),
            transparent 42%
        );

    pointer-events: none;
}

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

    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    z-index: 0;

    height: 16px;

    background-color: var(--navy);

    pointer-events: none;
}

.contact-hero .wide-container {
    position: relative;
    z-index: 1;
}

.contact-kicker {
    margin-bottom: 8px;

    color: var(--light-grey);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.4;

    text-transform: uppercase;
}

.contact-hero h1 {
    margin: 0;

    color: var(--gold);

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

    font-size:
        clamp(
            3rem,
            6vw,
            4.5rem
        );

    font-weight: 400;
    line-height: 1.05;
}


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

.contact-section {
    position: relative;
    z-index: 3;

    margin-top: -4px;

    padding: 90px 0;

    background-color: #ffffff;
}

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

    position: absolute;
    top: -8px;
    right: 0;
    left: 0;

    height: 10px;

    background-color: #ffffff;

    pointer-events: none;
}


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

.contact-card {
    position: relative;

    width: min(820px, 100%);
    max-width: 820px;

    margin: 0 auto;
    padding: 70px 70px 64px;

    overflow: hidden;

    background-color: #ffffff;

    border:
        1px solid
        rgba(0, 0, 0, 0.08);

    text-align: center;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.08);

    opacity: 1;

    transform: translateY(0);

    backface-visibility: hidden;
}

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

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background-color: var(--orange);

    pointer-events: none;
}

.contact-card .section-eyebrow {
    margin-bottom: 6px;
}

.contact-card .section-separator {
    margin-top: 24px;
    margin-bottom: 30px;
}

.contact-card h2 {
    margin: 0;

    color: var(--navy);

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

    font-size:
        clamp(
            2.2rem,
            5vw,
            2.8rem
        );

    font-weight: 400;
    line-height: 1.15;
}


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

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 90px;
    height: 90px;

    margin: 0 auto 30px;

    background-color: var(--orange);
    border-radius: 50%;

    color: #ffffff;

    box-shadow:
        0 14px 30px
        rgba(184, 134, 11, 0.2);

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.contact-icon svg {
    width: 40px;
    height: 40px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-card:hover
.contact-icon {
    background-color: var(--gold);
    color: var(--navy);

    transform:
        translateY(-3px)
        scale(1.03);
}


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

.contact-intro {
    max-width: 590px;

    margin:
        0 auto
        38px;

    color: #666666;

    font-size: 17px;
    line-height: 1.8;
}


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

.contact-methods {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    width: min(650px, 100%);

    margin:
        0 auto
        31px;

    background-color:
        var(--light-grey);

    border-top:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.08
        );
}

.contact-method {
    position: relative;

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

    min-width: 0;
    min-height: 138px;

    padding:
        24px
        26px;
}

.contact-method +
.contact-method {
    border-left:
        1px solid
        rgba(
            0,
            0,
            0,
            0.1
        );
}

.contact-method-label {
    margin:
        0 0 9px;

    color: #777777;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4;

    text-transform: uppercase;
}


/* ==================================================
   PHONE NUMBER
================================================== */

.contact-phone {
    display: inline-block;

    margin: 0;

    color: var(--orange);

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

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.35rem
        );

    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;

    text-decoration: none;

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

.contact-phone:hover {
    color: var(--gold);

    transform:
        translateY(-1px);
}


/* ==================================================
   EMAIL ADDRESS
================================================== */

/* ==================================================
   EMAIL ADDRESS
================================================== */

.contact-email {
    display: inline-block;

    max-width: 100%;

    color: var(--navy);

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

    font-size:
        clamp(
            1rem,
            1.75vw,
            1.3rem
        );

    font-weight: 400;
    line-height: 1.3;

    text-decoration: none;

    white-space: nowrap;

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

.contact-email:hover {
    color: var(--orange);

    transform: translateY(-1px);
}

.contact-email:hover {
    color: var(--orange);

    transform:
        translateY(-1px);
}


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

.contact-note {
    max-width: 580px;

    margin:
        0 auto
        34px;

    color: #666666;

    font-size: 14px;
    line-height: 1.7;
}


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

.contact-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;

    width: 100%;
}


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

.contact-call-button,
.contact-email-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 245px;

    padding:
        13px
        25px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;

    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;

    opacity: 1 !important;

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


/* ==================================================
   CALL BUTTON
================================================== */

.contact-call-button {
    background-color:
        var(--orange) !important;

    border:
        2px solid
        var(--orange) !important;

    color:
        #ffffff !important;
}

.contact-call-button:hover {
    background-color:
        var(--gold) !important;

    border-color:
        var(--gold) !important;

    color:
        var(--navy) !important;

    opacity: 1 !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px
        rgba(0, 0, 0, 0.1);
}


/* ==================================================
   EMAIL BUTTON
================================================== */

.contact-email-button {
    background-color:
        transparent !important;

    border:
        2px solid
        var(--navy) !important;

    color:
        var(--navy) !important;
}

.contact-email-button:hover {
    background-color:
        var(--navy) !important;

    border-color:
        var(--navy) !important;

    color:
        var(--gold) !important;

    opacity: 1 !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 24px
        rgba(0, 0, 0, 0.1);
}


/* ==================================================
   FOCUS STATES
================================================== */

.contact-call-button:focus-visible,
.contact-email-button:focus-visible,
.contact-phone:focus-visible,
.contact-email:focus-visible {
    outline:
        3px solid
        var(--gold);

    outline-offset: 4px;
}


/* ==================================================
   CONTACT CARD SCROLL REVEAL
================================================== */

.js-enabled
.contact-card.reveal-ready:not(.animate-in) {
    opacity: 0;

    transform:
        translateY(45px)
        scale(0.985);
}

.contact-card.reveal-ready {
    transition:
        opacity 1.2s ease,
        transform 1.45s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.contact-card.animate-in {
    opacity: 1;

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


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

@media (max-width: 1080px) {

    .contact-hero {
        padding:
            calc(
                54px +
                var(--header-height)
            )
            20px
            54px;
    }

    .contact-hero h1 {
        font-size:
            clamp(
                2.8rem,
                7vw,
                4rem
            );
    }

    .contact-section {
        padding:
            82px 0;
    }

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

        padding:
            64px
            54px
            58px;
    }

    .contact-intro {
        max-width: 560px;

        font-size: 16px;
    }

    .contact-methods {
        width: 100%;
    }

    .contact-phone {
        font-size:
            clamp(
                1.65rem,
                3.4vw,
                2.15rem
            );
    }

    .contact-email {
        font-size:
            clamp(
                1.1rem,
                2.3vw,
                1.45rem
            );
    }

}


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

@media (max-width: 820px) {

    .contact-hero {
        padding:
            calc(
                48px +
                var(--header-height)
            )
            18px
            48px;
    }

    .contact-kicker {
        font-size: 11px;
        letter-spacing: 0.19em;
    }

    .contact-hero h1 {
        font-size:
            clamp(
                2.6rem,
                8vw,
                3.6rem
            );
    }

    .contact-section {
        padding:
            72px 0;
    }

    .contact-card {
        width:
            calc(100% - 36px);

        max-width: 720px;

        padding:
            58px
            42px
            52px;
    }

    .contact-icon {
        width: 84px;
        height: 84px;

        margin-bottom: 28px;
    }

    .contact-icon svg {
        width: 37px;
        height: 37px;
    }

    .contact-card h2 {
        font-size:
            clamp(
                2rem,
                6vw,
                2.55rem
            );
    }

    .contact-intro {
        margin-bottom: 32px;

        font-size: 16px;
    }

    .contact-method {
        min-height: 126px;

        padding:
            22px
            18px;
    }

    .contact-phone {
        font-size:
            clamp(
                1.5rem,
                4vw,
                1.95rem
            );
    }

    .contact-email {
    font-size:
        clamp(
            0.95rem,
            2.4vw,
            1.2rem
        );
}

    .contact-note {
        margin-bottom: 31px;
    }

    .contact-call-button,
    .contact-email-button {
        min-width: 220px;
    }

}


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

@media (max-width: 640px) {

    .contact-hero {
        padding:
            calc(
                42px +
                var(--header-height)
            )
            16px
            42px;
    }

    .contact-hero::before {
        background:
            radial-gradient(
                circle at 50% 12%,
                rgba(
                    231,
                    196,
                    113,
                    0.09
                ),
                transparent 46%
            );
    }

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

        font-size: 10px;
        letter-spacing: 0.17em;
    }

    .contact-hero h1 {
        font-size:
            clamp(
                2.35rem,
                10vw,
                3.2rem
            );
    }

    .contact-section {
        padding:
            60px 0;
    }

    .contact-card {
        width:
            calc(100% - 28px);

        padding:
            48px
            24px
            44px;

        box-shadow:
            0 16px 38px
            rgba(0, 0, 0, 0.075);
    }

    .contact-icon {
        width: 78px;
        height: 78px;

        margin-bottom: 25px;
    }

    .contact-icon svg {
        width: 34px;
        height: 34px;
    }

    .contact-card .section-separator {
        margin-top: 20px;
        margin-bottom: 25px;
    }

    .contact-card h2 {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.4rem
            );
    }

    .contact-intro {
        margin-bottom: 29px;

        font-size: 15px;
        line-height: 1.75;
    }


    /* ==================================================
       MOBILE CONTACT METHODS
    ================================================== */

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

        margin-bottom: 27px;
    }

    .contact-method {
        min-height: 108px;

        padding:
            21px
            16px;
    }

    .contact-method +
    .contact-method {
        border-top:
            1px solid
            rgba(
                0,
                0,
                0,
                0.1
            );

        border-left: 0;
    }

    .contact-method-label {
        margin-bottom: 7px;

        font-size: 9px;
    }

    .contact-phone {
        font-size:
            clamp(
                1.7rem,
                8vw,
                2.1rem
            );
    }

    .contact-email {
    font-size:
        clamp(
            1rem,
            4.2vw,
            1.2rem
        );

    white-space: nowrap;
}

    .contact-note {
        margin-bottom: 29px;

        font-size: 14px;
    }


    /* ==================================================
       MOBILE CONTACT BUTTONS
    ================================================== */

    .contact-actions {
        display: grid;
        grid-template-columns:
            1fr;

        gap: 11px;

        width: 100%;
    }

    .contact-call-button,
    .contact-email-button {
        width: 100%;

        min-width: 0;
        max-width: none;

        padding:
            13px
            20px;
    }


    /* Keep same desktop-style reveal */

    .js-enabled
    .contact-card.reveal-ready:not(.animate-in) {
        opacity: 0;

        transform:
            translateY(36px)
            scale(0.985);
    }

}


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

@media (max-width: 430px) {

    .contact-hero {
        padding:
            calc(
                36px +
                var(--header-height)
            )
            14px
            36px;
    }

    .contact-kicker {
        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .contact-section {
        padding:
            52px 0;
    }

    .contact-card {
        width:
            calc(100% - 22px);

        padding:
            42px
            18px
            38px;
    }

    .contact-icon {
        width: 72px;
        height: 72px;

        margin-bottom: 23px;
    }

    .contact-icon svg {
        width: 31px;
        height: 31px;
    }

    .contact-intro {
        font-size: 14px;
    }

    .contact-method {
        min-height: 103px;

        padding:
            19px
            12px;
    }

    .contact-phone {
        font-size:
            clamp(
                1.6rem,
                8vw,
                1.9rem
            );
    }

    .contact-email {
    font-size:
        clamp(
            0.88rem,
            4vw,
            1.05rem
        );

    white-space: nowrap;
}

    .contact-note {
        font-size: 13px;
    }

    .contact-call-button,
    .contact-email-button {
        font-size: 12px;
        letter-spacing: 0.08em;
    }

}


/* ==================================================
   TOUCH DEVICES
================================================== */

@media (hover: none) {

    .contact-card:hover
    .contact-icon {
        background-color:
            var(--orange);

        color:
            #ffffff;

        transform:
            none;
    }

    .contact-phone:hover {
        color:
            var(--orange);

        transform:
            none;
    }

    .contact-email:hover {
        color:
            var(--navy);

        transform:
            none;
    }

    .contact-call-button:hover {
        background-color:
            var(--orange) !important;

        border-color:
            var(--orange) !important;

        color:
            #ffffff !important;

        box-shadow:
            none;

        transform:
            none;
    }

    .contact-email-button:hover {
        background-color:
            transparent !important;

        border-color:
            var(--navy) !important;

        color:
            var(--navy) !important;

        box-shadow:
            none;

        transform:
            none;
    }

}


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

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

    .contact-card,
    .contact-card.reveal-ready:not(.animate-in),
    .contact-icon,
    .contact-phone,
    .contact-email,
    .contact-call-button,
    .contact-email-button {
        opacity: 1;

        transform: none;

        transition: none;
    }

}