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

.contact-hero{

    padding:8rem 0 5rem;

    background:linear-gradient(
        180deg,
        #faf8f4 0%,
        #f3ede4 100%
    );

    text-align:center;

}

.contact-hero .container{

    max-width:760px;

}

.page-kicker{

    display:inline-block;

    padding:.5rem 1rem;

    margin-bottom:1.5rem;

    border-radius:999px;

    background:rgba(200,161,90,.12);

    color:var(--gold);

    font-size:.85rem;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

}

.contact-hero h1{

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

    line-height:1.05;

    color:var(--green);

    margin-bottom:2rem;

}

.contact-hero p{

    font-size:1.1rem;

    line-height:1.9;

    color:#666;

}


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

.contact-content{

    padding:6rem 0;

    background:white;

}


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

.contact-grid{

    display:grid;

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

    gap:2rem;

}


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

.contact-card{

    background:#faf8f4;

    padding:2.5rem;

    border-radius:24px;

    border:1px solid rgba(47,79,70,.08);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 20px 40px rgba(0,0,0,.08);

}

.contact-card h2{

    color:var(--green);

    margin-bottom:1rem;

}

.contact-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:2rem;

}

.contact-card a{

    color:var(--gold);

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.contact-card a:hover{

    color:var(--green);

}

.contact-icon-link {
    display: inline-flex;
    align-items: center;

    gap: 0.6rem;
}

.contact-icon-link img {
    width: 18px;
    height: 18px;

    display: block;

    object-fit: contain;

    flex-shrink: 0;
}


/*==================================================
QUOTE
==================================================*/

.contact-quote{

    padding:7rem 0;

    background:#faf8f4;

    text-align:center;

}

.contact-quote .container{

    max-width:800px;

}

.contact-quote .quote-feather{

    width:90px;

    display:block;

    margin:0 auto 2rem;

    animation:featherFloat 8s ease-in-out infinite;

}

.contact-quote blockquote{

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

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

    color:var(--green);

    font-style:italic;

    line-height:1.6;

}

.contact-quote span{

    display:block;

    margin-top:2rem;

    color:var(--gold);

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.9rem;

}

.contact-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-card a i {
    font-size: 1.1rem;
}


/*==================================================
ANIMATION
==================================================*/

@keyframes featherFloat{

0%{

transform:translateY(0) rotate(-3deg);

}

50%{

transform:translateY(-10px) rotate(3deg);

}

100%{

transform:translateY(0) rotate(-3deg);

}

}


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

@media(max-width:900px){

.contact-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-hero{

padding:6rem 0 4rem;

}

.contact-card{

padding:2rem;

}

.contact-quote{

padding:5rem 0;

}

.contact-quote .quote-feather{

width:70px;

}

}


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

.contact-form-section {
    padding: 7rem 0;

    background:
        linear-gradient(
            180deg,
            #faf8f4 0%,
            #f6f0e7 100%
        );
}


.contact-form-wrap {
    max-width: 820px;

    margin: 0 auto;
}


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

    margin:
        0 auto
        3rem;

    text-align: center;
}


.contact-form-intro h2 {
    margin:
        0.5rem 0
        1rem;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(2.4rem, 5vw, 3.6rem);

    color:
        var(--green);
}


.contact-form-intro p {
    line-height: 1.8;

    color:
        rgba(47, 79, 70, 0.72);
}


/* Form */

.contact-form {
    padding: 3rem;

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

    border:
        1px solid
        rgba(47, 79, 70, 0.10);

    border-radius: 20px;

    box-shadow:
        0 18px 50px
        rgba(47, 79, 70, 0.06);
}


.contact-form-row {
    display: grid;

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

    gap: 1.25rem;
}


.contact-field {
    display: flex;
    flex-direction: column;

    gap: 0.55rem;

    margin-bottom: 1.4rem;
}


.contact-field label {
    color:
        var(--green);

    font-size: 0.9rem;

    font-weight: 600;
}


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

    padding:
        0.95rem
        1rem;

    border:
        1px solid
        rgba(47, 79, 70, 0.16);

    border-radius: 10px;

    background:
        #fff;

    font: inherit;

    color:
        var(--green);

    outline: none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.contact-field textarea {
    resize: vertical;

    min-height: 170px;
}


.contact-field input:focus,
.contact-field textarea:focus {
    border-color:
        rgba(200, 161, 90, 0.70);

    box-shadow:
        0 0 0 3px
        rgba(200, 161, 90, 0.10);
}


.contact-submit {
    margin-top: 0.5rem;
}


/* Success / Error */

.contact-message {
    margin-bottom: 2rem;

    padding:
        1rem
        1.25rem;

    border-radius: 10px;

    text-align: center;
}


.contact-success {
    background:
        rgba(47, 79, 70, 0.08);

    color:
        var(--green);
}


.contact-error {
    background:
        rgba(160, 70, 70, 0.08);

    color:
        #8a3e3e;
}


/* Honeypot */

.contact-honeypot {
    position: absolute !important;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}


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

@media (max-width: 700px) {

    .contact-form-section {
        padding:
            5rem 0;
    }


    .contact-form {
        padding:
            2rem
            1.4rem;
    }


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

}

.contact-message {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    margin-bottom: 2rem;
    padding: 1.2rem 1.4rem;

    border-radius: 12px;

    text-align: center;
}

.contact-message strong {
    font-size: 1rem;
}

.contact-message span {
    font-size: 0.92rem;
}

.contact-success {
    color: var(--green);

    background:
        rgba(47, 79, 70, 0.08);

    border:
        1px solid rgba(47, 79, 70, 0.16);
}