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

.contact-container{
    width:min(1280px,calc(100% - 48px));
    margin:auto;
}


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

.contact-hero{
    position:relative;

    height:500px;
    min-height:500px;

    display:grid;
    grid-template-columns:43% 57%;

    overflow:hidden;

    background:#fffaf2;
}


.contact-hero-copy{
    position:relative;
    z-index:5;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    background:
        radial-gradient(
            circle at 76% 45%,
            rgba(225,166,54,.10),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fffdf8,
            #fff5e3
        );
}


/* curved shape */

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

    position:absolute;

    z-index:-1;

    top:-175px;
    right:-105px;

    width:365px;
    height:760px;

    background:
        linear-gradient(
            160deg,
            #fffaf1,
            #fff5e3
        );

    border-radius:
        0 0 88% 72% /
        0 0 60% 48%;

    transform:
        rotate(10deg)
        skewY(-2deg);

    box-shadow:
        10px 0 0 #d89b2a,
        20px 0 0 rgba(239,190,88,.40);

    pointer-events:none;
}


.contact-hero-inner{
    width:min(500px,calc(100% - 70px));

    position:relative;
    z-index:3;
}


.contact-label{
    display:block;

    color:#b86b03;

    font-size:12px;
    font-weight:700;

    letter-spacing:1.2px;
}


.contact-small-rule{
    width:34px;
    height:2px;

    margin:13px 0 18px;

    background:#ca7a04;
}


.contact-hero h1{
    margin:0;

    color:#241a13;

    font:
        600 48px/1.03
        "Playfair Display",
        serif;

    letter-spacing:-1.4px;
}


.contact-hero h1 em{
    color:#b86b03;

    font-style:normal;
}


.contact-heading-rule{
    width:90px;

    display:flex;
    align-items:center;

    margin:23px 0;
}


.contact-heading-rule span{
    flex:1;

    height:1px;

    background:#c77b05;
}


.contact-heading-rule i{
    width:6px;
    height:6px;

    border:1px solid #c77b05;

    background:#fffaf2;

    transform:rotate(45deg);
}


.contact-hero p{
    max-width:425px;

    margin:0 0 27px;

    color:#625950;

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


/* BUTTON */

.contact-gold-btn{
    min-height:48px;

    padding:0 24px;

    border:0;
    border-radius:5px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:16px;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #b86a00,
            #d58c08
        );

    font-family:inherit;

    font-size:10.5px;
    font-weight:700;

    letter-spacing:.55px;

    cursor:pointer;

    box-shadow:
        0 11px 25px
        rgba(178,105,0,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.contact-gold-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 17px 33px
        rgba(178,105,0,.26);
}


.contact-gold-btn svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* HERO IMAGE */

.contact-hero-image{
    position:relative;

    height:500px;

    overflow:hidden;

    background:#eee;
}


.contact-hero-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1.3s
        cubic-bezier(.16,1,.3,1);
}


.contact-hero:hover
.contact-hero-image img{
    transform:scale(1.025);
}


/* =========================================================
   MAIN CONTACT AREA
========================================================= */

.contact-main{
    padding:42px 0 25px;

    background:#fffdf9;
}


.contact-main-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.75fr)
        minmax(300px,.95fr);

    gap:22px;

    align-items:stretch;
}


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

.contact-form-card{
    padding:28px;

    border:
        1px solid
        rgba(231,207,166,.65);

    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #fff8ee
        );

    box-shadow:
        0 12px 30px
        rgba(68,45,17,.05);
}


.contact-section-title h2{
    margin:0;

    color:#281d15;

    font:
        600 25px/1.1
        "Playfair Display",
        serif;
}


.contact-section-title > span{
    display:block;

    width:45px;
    height:2px;

    margin:13px 0 22px;

    background:#c77b05;
}


.contact-form-grid{
    display:grid;

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

    gap:16px;
}


.contact-field{
    position:relative;

    min-width:0;
}


.contact-field-icon{
    position:absolute;

    z-index:3;

    left:14px;
    top:50%;

    width:19px;
    height:19px;

    transform:
        translateY(-50%);

    color:#c47606;
}


.contact-field-icon svg{
    width:100%;
    height:100%;

    fill:none;

    stroke:currentColor;

    stroke-width:1.55;

    stroke-linecap:round;
    stroke-linejoin:round;
}


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

    border:
        1px solid
        #ead9bc;

    border-radius:6px;

    outline:none;

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

    color:#30261e;

    font-family:inherit;

    font-size:11px;

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


.contact-field input{
    height:48px;

    padding:
        0 14px
        0 45px;
}


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

    resize:vertical;

    padding:
        17px 14px
        14px 45px;
}


.contact-message-field{
    grid-column:1/-1;
}


.contact-message-field
.contact-field-icon{
    top:17px;

    transform:none;
}


.contact-field input:focus,
.contact-field textarea:focus{
    border-color:#d19a3c;

    background:#fff;

    box-shadow:
        0 0 0 3px
        rgba(198,123,5,.08);
}


.contact-submit{
    margin-top:18px;
}


/* =========================================================
   INFO CARDS
========================================================= */

.contact-info-list{
    display:grid;

    gap:10px;
}


.contact-info-card{
    padding:15px 18px;

    display:grid;

    grid-template-columns:
        48px 1fr;

    gap:15px;

    align-items:start;

    border:
        1px solid
        rgba(231,207,166,.65);

    border-radius:11px;

    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #fff8ef
        );

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.contact-info-card:hover{
    transform:
        translateY(-3px);

    border-color:#dda449;

    box-shadow:
        0 12px 28px
        rgba(76,49,15,.08);
}


.contact-info-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #b86a00,
            #d88e0c
        );
}


.contact-info-icon svg{
    width:20px;
    height:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.contact-info-card h3{
    margin:
        0 0 6px;

    color:#281d15;

    font:
        600 17px/1.1
        "Playfair Display",
        serif;
}


.contact-info-card p{
    margin:0;

    color:#5f574f;

    font-size:10.5px;
    line-height:1.65;
}


.contact-info-card a{
    color:inherit;
}


/* =========================================================
   BENEFITS
========================================================= */

.contact-benefits{
    padding:
        0 0
        25px;

    background:#fffdf9;
}


.contact-benefits-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    border:
        1px solid
        #ead6b6;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #fffdf9,
            #fff8ed
        );

    box-shadow:
        0 10px 26px
        rgba(76,51,20,.045);
}


.contact-benefit{
    position:relative;

    text-align:center;

    padding:
        22px 20px;

    border-right:
        1px solid
        #e2c58f;
}


.contact-benefit:last-child{
    border:0;
}


.contact-benefit > span{
    display:flex;

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

    min-height:44px;

    color:#c57806;
}


.contact-benefit svg{
    width:32px;
    height:32px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.contact-benefit h3{
    margin:
        8px 0
        7px;

    color:#2d2219;

    font-size:11px;
}


.contact-benefit p{
    max-width:180px;

    margin:auto;

    color:#645c54;

    font-size:9.5px;
    line-height:1.6;
}


/* =========================================================
   LOCATION
========================================================= */

.contact-location{
    padding:
        0 0
        26px;

    background:#fffdf9;
}


.contact-location-grid{
    display:grid;

    grid-template-columns:
        2fr 1fr;

    min-height:330px;

    overflow:hidden;

    border:
        1px solid
        #ead6b6;

    border-radius:11px;

    background:#fff;

    box-shadow:
        0 10px 28px
        rgba(72,48,19,.05);
}


.contact-map{
    min-height:330px;
}


.contact-map iframe{
    width:100%;
    height:100%;

    min-height:330px;

    border:0;

    display:block;
}


/* HOURS */

.contact-hours-card{
    padding:25px;

    background:
        linear-gradient(
            150deg,
            #fffdf9,
            #fff7e8
        );
}


.contact-hours-block{
    padding-bottom:22px;

    border-bottom:
        1px solid
        #ead8ba;
}


.contact-hours-block h2,
.contact-social-block h2{
    margin:0;

    color:#281d15;

    font:
        600 20px/1.1
        "Playfair Display",
        serif;
}


.hours-rule{
    width:40px;
    height:2px;

    margin:
        12px 0
        17px;

    background:#c77b05;
}


.hours-row{
    display:flex;

    justify-content:space-between;

    gap:15px;

    margin:
        10px 0;

    color:#564e46;

    font-size:10px;
}


.hours-row strong{
    color:#30271f;

    font-weight:600;

    white-space:nowrap;
}


/* SOCIAL */

.contact-social-block{
    padding-top:22px;
}


.contact-social-block p{
    margin:
        9px 0
        15px;

    color:#655d55;

    font-size:9.5px;
    line-height:1.55;
}


.contact-socials{
    display:flex;

    gap:10px;
}


.contact-socials a{
    width:34px;
    height:34px;

    border:
        1px solid
        #d7942c;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#b96c04;

    font-size:11px;
    font-weight:700;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.contact-socials a:hover{
    transform:translateY(-3px);

    background:#c77b05;

    color:#fff;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.contact-bottom-cta{
    padding:
        0 0
        34px;

    background:#fffdf9;
}


.contact-bottom-inner{
    min-height:92px;

    padding:
        18px 30px;

    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:22px;

    border:
        1px solid
        rgba(232,205,160,.55);

    border-radius:11px;

    background:
        linear-gradient(
            100deg,
            #fff8ea,
            #fff0d5
        );
}


.contact-bottom-icon{
    width:58px;
    height:58px;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #ad6200,
            #d58b0b
        );

    box-shadow:
        0 10px 22px
        rgba(173,98,0,.18);
}


.contact-bottom-icon svg{
    width:27px;
    height:27px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.contact-bottom-inner h2{
    margin:
        0 0
        5px;

    color:#281d15;

    font:
        600 20px/1.1
        "Playfair Display",
        serif;
}


.contact-bottom-inner p{
    margin:0;

    color:#615950;

    font-size:10.5px;
}


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

@media(max-width:1000px){

    .contact-hero{
        grid-template-columns:
            48% 52%;
    }


    .contact-hero h1{
        font-size:41px;
    }


    .contact-main-grid{
        grid-template-columns:
            1.4fr .9fr;
    }


    .contact-benefits-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .contact-benefit:nth-child(2){
        border-right:0;
    }


    .contact-benefit:nth-child(1),
    .contact-benefit:nth-child(2){
        border-bottom:
            1px solid
            #e2c58f;
    }

}


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

@media(max-width:760px){

    .contact-container{
        width:
            calc(100% - 26px);
    }


    /* HERO */

    .contact-hero{
        height:auto;
        min-height:auto;

        display:flex;
        flex-direction:column;
    }


    .contact-hero-image{
        order:1;

        height:270px;
    }


    .contact-hero-copy{
        order:2;

        justify-content:flex-start;
    }


    .contact-hero-copy::after{
        display:none;
    }


    .contact-hero-inner{
        width:100%;

        padding:
            32px 18px
            38px;
    }


    .contact-hero h1{
        font-size:37px;
    }


    /* MAIN */

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


    .contact-form-card{
        padding:20px;
    }


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


    .contact-message-field{
        grid-column:auto;
    }


    .contact-submit{
        width:100%;
    }


    /* BENEFITS */

    .contact-benefits-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    /* LOCATION */

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


    .contact-map{
        min-height:280px;
    }


    .contact-map iframe{
        min-height:280px;
    }


    /* CTA */

    .contact-bottom-inner{
        grid-template-columns:
            auto 1fr;
    }


    .contact-bottom-inner
    .contact-gold-btn{
        grid-column:1/-1;

        width:100%;
    }

}


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

@media(max-width:480px){

    .contact-hero-image{
        height:230px;
    }


    .contact-hero h1{
        font-size:33px;
    }


    .contact-form-card{
        padding:17px;
    }


    .contact-info-card{
        grid-template-columns:
            43px 1fr;

        padding:14px;
    }


    .contact-info-icon{
        width:39px;
        height:39px;
    }


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


    .contact-benefit{
        border-right:0;

        border-bottom:
            1px solid
            #e2c58f;
    }


    .contact-benefit:last-child{
        border-bottom:0;
    }


    .contact-hours-card{
        padding:20px;
    }


    .hours-row{
        font-size:9px;
    }


    .contact-bottom-inner{
        padding:18px;
    }


    .contact-bottom-inner h2{
        font-size:17px;
    }

}

.contact-success-message{
    margin-bottom:18px;
    padding:14px 16px;

    border:1px solid #b8d7b1;
    border-radius:7px;

    background:#effaeb;
    color:#31712b;

    font-size:13px;
    line-height:1.5;
}

.contact-error-message{
    margin-bottom:18px;
    padding:14px 16px;

    border:1px solid #efb8b8;
    border-radius:7px;

    background:#fff1f1;
    color:#a23535;

    font-size:12px;
}

.contact-error-message p{
    margin:4px 0;
}