/* #region CONTACT MAIN */

.contact-main {
    position: relative;

    overflow: hidden;

    background: var(--cream);

    padding:
        42px
        0
        52px;
}


/* =========================
BACKGROUND LEAF
========================= */

.contact-background-leaf {
    position: absolute;

    left: -70px;
    bottom: -40px;

    z-index: 0;

    width:
        clamp(340px, 30vw, 520px);

    height: auto;

    opacity: 0.12;

    pointer-events: none;

    user-select: none;
}


/* =========================
INNER
========================= */

.contact-main-inner {
    position: relative;

    z-index: 1;

    width: min(
        1180px,
        calc(100% - clamp(40px, 6vw, 90px))
    );

    margin: 0 auto;
}


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

.contact-page-heading {
    max-width: 760px;

    margin:
        0
        auto
        34px;

    text-align: center;
}


.contact-page-heading h2 {
    margin: 0;

    color: var(--burgundy);

    font-family: var(--heading-font);

    font-size:
        clamp(2.6rem, 4vw, 4rem);

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.02em;
}


.contact-page-divider {
    display: flex;

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

    gap: 10px;

    margin:
        14px
        0
        16px;
}


.contact-page-divider span {
    width:
        clamp(50px, 5vw, 78px);

    height: 1px;

    background: var(--rose);
}


.contact-page-divider img {
    display: block;

    width:
        clamp(30px, 2.5vw, 38px);

    height: auto;
}


.contact-page-heading > p {
    max-width: 660px;

    margin: 0 auto;

    color:
        rgba(51, 17, 18, 0.72);

    font-family: var(--body-font);

    font-size: 0.92rem;
    font-weight: 500;

    line-height: 1.65;
}


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

.contact-grid {
    display: grid;

    grid-template-columns:
        1.08fr
        0.92fr;

    gap: 20px;

    align-items: stretch;
}


/* =========================
FORM PANEL
========================= */

.contact-form-panel {
    padding:
        32px
        34px
        36px;

    border:
        1px solid rgba(133, 77, 80, 0.45);

    border-radius: 8px;

    background:
        rgba(251, 238, 221, 0.62);
}


.contact-eyebrow {
    margin:
        0
        0
        10px;

    color: var(--rose);

    font-family: var(--body-font);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.28em;

    text-transform: uppercase;
}


.contact-form-panel h3 {
    margin:
        0
        0
        14px;

    color: var(--burgundy);

    font-family: var(--heading-font);

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

    font-weight: 500;

    line-height: 1;
}


.contact-form-panel h3 span {
    display: block;
}


.contact-form-intro {
    max-width: 540px;

    margin:
        0
        0
        26px;

    color:
        rgba(51, 17, 18, 0.72);

    font-family: var(--body-font);

    font-size: 0.88rem;
    font-weight: 500;

    line-height: 1.6;
}


/* =========================
FORM
========================= */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.contact-field {
    display: flex;

    flex-direction: column;
}


.contact-field-row {
    display: grid;

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

    gap: 16px;
}


.contact-label-row {
    display: flex;

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

    gap: 12px;

    margin-bottom: 6px;
}


.contact-label-row label {
    color: var(--burgundy);

    font-family: var(--body-font);

    font-size: 0.82rem;
    font-weight: 600;
}


.contact-required,
.contact-optional {
    font-family: var(--body-font);

    font-size: 0.68rem;

    letter-spacing: 0.03em;
}


.contact-required {
    color: var(--rose);
}


.contact-optional {
    color:
        rgba(51, 17, 18, 0.55);
}


/* =========================
INPUTS
========================= */

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid rgba(133, 77, 80, 0.25);

    border-radius: 4px;

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

    color: var(--burgundy);

    font-family: var(--body-font);

    font-size: 0.84rem;

    outline: none;

    transition:
        border-color var(--transition),
        background var(--transition);
}


.contact-field input,
.contact-field select {
    min-height: 46px;

    padding:
        0
        13px;
}


.contact-field textarea {
    min-height: 145px;

    padding:
        13px;

    resize: vertical;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color:
        rgba(51, 17, 18, 0.4);
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--rose);

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


/* =========================
SUBMIT
========================= */

.contact-submit {
    width: 100%;

    margin-top: 4px;

    font-family: var(--body-font);

    font-size: 0.76rem;
    font-weight: 600;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* =========================
RIGHT PANEL
========================= */

.contact-info-panel {
    overflow: hidden;

    border:
        1px solid rgba(133, 77, 80, 0.28);

    border-radius: 8px;

    background: var(--cream-dark);
}


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

.contact-image-wrap {
    width: 100%;

    height:
        clamp(260px, 25vw, 340px);

    overflow: hidden;
}


.contact-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


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

.contact-info-content {
    padding:
        26px
        30px
        30px;
}


.contact-info-section + .contact-info-section {
    margin-top: 26px;
}


.contact-info-heading {
    margin: 0;

    color: var(--burgundy);

    font-family: var(--body-font);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.24em;

    text-transform: uppercase;
}


.contact-info-heading-line {
    width: 100%;
    height: 1px;

    margin:
        10px
        0
        18px;

    background:
        rgba(133, 77, 80, 0.3);
}


/* =========================
THINGS TO KNOW
========================= */

.contact-info-item {
    display: grid;

    grid-template-columns:
        38px
        1fr;

    gap: 14px;

    align-items: start;
}


.contact-info-item + .contact-info-item {
    margin-top: 18px;
}


.contact-method-icon-wrap {
    position: relative;

    flex:
        0
        0
        32px;

    width: 32px;
    height: 32px;
}


.contact-method-icon {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        opacity var(--transition);
}


.contact-method-icon-default {
    opacity: 1;
}


.contact-method-icon-hover {
    opacity: 0;
}


.contact-method:hover
.contact-method-icon-default {
    opacity: 0;
}


.contact-method:hover
.contact-method-icon-hover {
    opacity: 1;
}


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

.contact-method {
    display: flex;

    align-items: center;

    gap: 13px;

    color:
        rgba(51, 17, 18, 0.76);

    text-decoration: none;

    font-family: var(--body-font);

    font-size: 0.8rem;
    font-weight: 500;

    transition:
        color var(--transition);
}


.contact-method + .contact-method {
    margin-top: 12px;
}


.contact-method img {
    display: block;

    width: 32px;
    height: 32px;

    object-fit: contain;
}


.contact-method:hover {
    color: var(--rose);
}

/* #endregion */


/* #region CONTACT RESPONSIVE */


/* =========================================================
   1025PX AND BELOW
   ========================================================= */

@media (max-width: 1025px) {

    .contact-main {
        padding:
            38px
            0
            46px;
    }


    .contact-main-inner {
        width: calc(100% - 56px);
    }


    /* =========================
       BACKGROUND LEAF
       ========================= */

    .contact-background-leaf {
        left: -90px;
        bottom: -50px;

        width: 380px;

        opacity: 0.09;
    }


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

    .contact-page-heading {
        margin-bottom: 30px;
    }


    .contact-page-heading h2 {
        font-size:
            clamp(
                2.4rem,
                4.2vw,
                3.5rem
            );
    }


    .contact-page-heading > p {
        max-width: 620px;

        font-size: 0.88rem;
    }


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

    .contact-grid {
        grid-template-columns:
            1.05fr
            0.95fr;

        gap: 18px;
    }


    /* =========================
       FORM PANEL
       ========================= */

    .contact-form-panel {
        padding:
            28px
            28px
            32px;
    }


    .contact-form-panel h3 {
        font-size:
            clamp(
                1.9rem,
                3vw,
                2.6rem
            );
    }


    .contact-form-intro {
        margin-bottom: 22px;

        font-size: 0.84rem;
    }


    .contact-form {
        gap: 14px;
    }


    .contact-field-row {
        gap: 14px;
    }


    /* =========================
       INFO PANEL
       ========================= */

    .contact-image-wrap {
        height: 280px;
    }


    .contact-info-content {
        padding:
            24px
            24px
            26px;
    }


    .contact-info-section + .contact-info-section {
        margin-top: 22px;
    }


    .contact-info-item {
        grid-template-columns:
            34px
            1fr;

        gap: 12px;
    }


    .contact-method {
        font-size: 0.76rem;
    }

}


/* =========================================================
   768PX AND BELOW
   ========================================================= */

@media (max-width: 768px) {

    .contact-main {
        padding:
            34px
            0
            40px;
    }


    .contact-main-inner {
        width: calc(100% - 40px);
    }


    /* =========================
       BACKGROUND LEAF
       ========================= */

    .contact-background-leaf {
        left: -110px;
        bottom: -55px;

        width: 330px;

        opacity: 0.07;
    }


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

    .contact-page-heading {
        max-width: 560px;

        margin-bottom: 26px;
    }


    .contact-page-heading h2 {
        font-size:
            clamp(
                2.1rem,
                6vw,
                3rem
            );
    }


    .contact-page-divider {
        gap: 9px;

        margin:
            12px
            0
            14px;
    }


    .contact-page-divider span {
        width: 58px;
    }


    .contact-page-divider img {
        width: 32px;
    }


    .contact-page-heading > p {
        max-width: 520px;

        font-size: 0.84rem;

        line-height: 1.55;
    }


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

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

        max-width: 620px;

        margin: 0 auto;

        gap: 20px;
    }


    /* =========================
       FORM PANEL
       ========================= */

    .contact-form-panel {
        padding:
            26px
            26px
            30px;
    }


    .contact-eyebrow {
        font-size: 0.66rem;

        letter-spacing: 0.24em;
    }


    .contact-form-panel h3 {
        font-size:
            clamp(
                1.9rem,
                6vw,
                2.5rem
            );
    }


    .contact-form-intro {
        max-width: 100%;

        font-size: 0.82rem;
    }


    /* =========================
       FORM
       ========================= */

    .contact-field input,
    .contact-field select {
        min-height: 44px;
    }


    .contact-field textarea {
        min-height: 135px;
    }


    /* =========================
       INFO PANEL
       ========================= */

    .contact-image-wrap {
        height: 260px;
    }


    .contact-info-content {
        padding:
            24px
            26px
            28px;
    }


    .contact-method {
        font-size: 0.78rem;
    }

}


/* =========================================================
   480PX AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    .contact-main {
        padding:
            30px
            0
            34px;
    }


    .contact-main-inner {
        width: calc(100% - 30px);
    }


    /* =========================
       BACKGROUND LEAF
       ========================= */

    .contact-background-leaf {
        left: -120px;
        bottom: -40px;

        width: 280px;

        opacity: 0.05;
    }


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

    .contact-page-heading {
        margin-bottom: 22px;
    }


    .contact-page-heading h2 {
        font-size:
            clamp(
                1.9rem,
                8vw,
                2.4rem
            );
    }


    .contact-page-divider {
        gap: 8px;

        margin:
            10px
            0
            12px;
    }


    .contact-page-divider span {
        width: 42px;
    }


    .contact-page-divider img {
        width: 28px;
    }


    .contact-page-heading > p {
        max-width: 330px;

        font-size: 0.8rem;

        line-height: 1.5;
    }


    /* =========================
       FORM PANEL
       ========================= */

    .contact-form-panel {
        padding:
            22px
            16px
            24px;

        border-radius: 6px;
    }


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

        font-size: 0.62rem;

        letter-spacing: 0.2em;
    }


    .contact-form-panel h3 {
        margin-bottom: 12px;

        font-size:
            clamp(
                1.8rem,
                8vw,
                2.2rem
            );
    }


    .contact-form-intro {
        margin-bottom: 20px;

        font-size: 0.78rem;

        line-height: 1.5;
    }


    /* =========================
       FORM
       ========================= */

    .contact-form {
        gap: 13px;
    }


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

        gap: 13px;
    }


    .contact-label-row {
        gap: 8px;

        margin-bottom: 5px;
    }


    .contact-label-row label {
        font-size: 0.78rem;
    }


    .contact-required,
    .contact-optional {
        font-size: 0.62rem;
    }


    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        font-size: 0.8rem;
    }


    .contact-field input,
    .contact-field select {
        min-height: 43px;

        padding:
            0
            11px;
    }


    .contact-field textarea {
        min-height: 125px;

        padding: 11px;
    }


    .contact-submit {
        font-size: 0.7rem;

        letter-spacing: 0.13em;
    }


    /* =========================
       INFO PANEL
       ========================= */

    .contact-info-panel {
        border-radius: 6px;
    }


    .contact-image-wrap {
        height: 210px;
    }


    .contact-info-content {
        padding:
            20px
            16px
            22px;
    }


    .contact-info-section + .contact-info-section {
        margin-top: 20px;
    }


    .contact-info-heading {
        font-size: 0.68rem;

        letter-spacing: 0.2em;
    }


    .contact-info-heading-line {
        margin:
            8px
            0
            15px;
    }


    .contact-info-item {
        grid-template-columns:
            32px
            1fr;

        gap: 11px;
    }


    .contact-info-item + .contact-info-item {
        margin-top: 15px;
    }


    .contact-method-icon-wrap,
    .contact-method img {
        width: 30px;
        height: 30px;
    }


    .contact-method {
        gap: 11px;

        font-size: 0.74rem;

        line-height: 1.4;
    }


    .contact-method + .contact-method {
        margin-top: 10px;
    }

}


/* #endregion CONTACT RESPONSIVE */

/* #region DIVIDER TEMPLATE */
/* #endregion */