/* =========================================================
   CROWN THEORY
   Contact Page Styles
   ========================================================= */


/* =========================================================
   1. CONTACT HERO
   ========================================================= */

.contact-hero {
    padding: 64px 0 88px;

    background-color: #F7F4EB;
}

.contact-hero-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    align-items: center;

    gap: 64px;
}

.contact-hero-content {
    max-width: 580px;
}

.contact-hero-content h1 {
    margin-bottom: 24px;

    color: #3D2314;

    font-size: 56px;
    line-height: 1.08;
}

.contact-hero-content p {
    margin-bottom: 30px;

    color: #6C625B;

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

.contact-hero-actions {
    display: flex;

    align-items: center;

    gap: 24px;
}


/* =========================================================
   2. CONTACT HERO IMAGE
   ========================================================= */

.contact-hero-image {
    height: 600px;

    background-color: #EEE9DE;

    border-radius: 24px;

    overflow: hidden;
}

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

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


/* =========================================================
   3. CONTACT OPTIONS
   ========================================================= */

.contact-options-section {
    padding: 48px 0;

    background-color: #E7ECE3;
}

.contact-options-grid {
    display: grid;

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

    gap: 18px;
}

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

    background-color: #F7F4EB;

    border: 1px solid #CAD4C5;
    border-radius: 16px;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.contact-option-card:hover {
    transform: translateY(-4px);

    background-color: #FFFFFF;

    border-color: #6B7F63;
}

.contact-option-number {
    display: block;

    margin-bottom: 24px;

    color: #D9A05B;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.contact-option-card h2 {
    margin-bottom: 10px;

    color: #3D2314;

    font-size: 23px;
}

.contact-option-card p {
    margin-bottom: 18px;

    color: #6C625B;

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


/* =========================================================
   4. CONTACT FORM SECTION
   ========================================================= */

.contact-form-section {
    padding: 96px 0;

    background-color: #FCFAF5;

    scroll-margin-top: 100px;
}

.contact-form-grid {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 72px;

    align-items: start;
}

.contact-form-content {
    max-width: 500px;
}

.contact-form-content h2 {
    margin-bottom: 20px;

    color: #3D2314;

    font-size: 43px;
}

.contact-form-content > p {
    margin-bottom: 28px;

    color: #6C625B;

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


/* =========================================================
   5. CONTACT DETAILS
   ========================================================= */

.contact-details-card {
    margin-bottom: 18px;

    padding: 24px;

    background-color: #E7ECE3;

    border: 1px solid #CAD4C5;
    border-radius: 16px;
}

.contact-detail {
    margin-bottom: 20px;
    padding-bottom: 20px;

    border-bottom: 1px solid #CAD4C5;
}

.contact-detail:last-child {
    margin-bottom: 0;
    padding-bottom: 0;

    border-bottom: none;
}

.contact-detail > span {
    display: block;

    margin-bottom: 5px;

    color: #6B7F63;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.contact-detail a,
.contact-detail strong {
    color: #3D2314;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.contact-detail a:hover {
    color: #6B7F63;
}

.contact-detail p {
    margin-top: 3px;

    color: #6C625B;

    font-size: 12px;
}


/* =========================================================
   6. SUPPORT CALLOUT
   ========================================================= */

.support-callout {
    padding: 22px;

    background-color: #F7F4EB;

    border: 1px solid #DDD6C8;
    border-radius: 14px;
}

.support-callout strong {
    display: block;

    margin-bottom: 7px;

    color: #3D2314;

    font-size: 14px;
}

.support-callout p {
    margin-bottom: 14px;

    color: #6C625B;

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


/* =========================================================
   7. CONTACT FORM CARD
   ========================================================= */

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

    background-color: #FFFFFF;

    border: 1px solid #DDD6C8;
    border-radius: 20px;
}

.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;
}

.contact-form-group {
    margin-bottom: 20px;
}

.contact-form-group label {
    display: block;

    margin-bottom: 8px;

    color: #3D2314;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.contact-optional {
    margin-left: 5px;

    color: #8A817A;

    font-size: 11px;
    font-weight: 400;
}


/* =========================================================
   8. FORM INPUTS
   ========================================================= */

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

    padding: 12px 14px;

    background-color: #F7F4EB;

    color: #3D2314;

    border: 1px solid #DDD6C8;
    border-radius: 10px;

    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.contact-form-group input,
.contact-form-group select {
    min-height: 50px;
}

.contact-form-group textarea {
    min-height: 170px;

    resize: vertical;
}

.contact-form-group input:hover,
.contact-form-group select:hover,
.contact-form-group textarea:hover {
    border-color: #6B7F63;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    background-color: #FFFFFF;

    border-color: #6B7F63;

    outline: 3px solid rgba(217, 160, 91, 0.35);
    outline-offset: 2px;
}


/* =========================================================
   9. AGREEMENT
   ========================================================= */

.contact-agreement {
    margin-bottom: 24px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #6C625B;

    font-size: 12px;
    line-height: 1.5;

    cursor: pointer;
}

.contact-agreement input {
    width: 17px;
    height: 17px;

    margin-top: 2px;

    flex-shrink: 0;

    accent-color: #6B7F63;
}


/* =========================================================
   10. SUBMIT BUTTON
   ========================================================= */

.contact-submit-button {
    width: 100%;

    min-height: 52px;
}

.contact-form-message {
    min-height: 20px;

    margin-top: 14px;

    color: #3D2314;

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}


/* =========================================================
   11. SECTION HEADINGS
   ========================================================= */

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

    margin-bottom: 48px;
}

.contact-section-heading h2 {
    margin-bottom: 14px;

    color: #3D2314;

    font-size: 44px;
}

.contact-section-heading p {
    max-width: 610px;

    color: #6C625B;

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

.centered-contact-heading {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* =========================================================
   12. BUSINESS INQUIRIES
   ========================================================= */

.business-contact-section {
    background-color: #F7F4EB;
}

.business-contact-grid {
    display: grid;

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

    gap: 24px;
}

.business-contact-card {
    padding: 30px;

    background-color: #FFFFFF;

    border: 1px solid #DDD6C8;
    border-radius: 16px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.business-contact-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 8px 22px rgba(61, 35, 20, 0.08);
}

.business-contact-label {
    display: inline-block;

    margin-bottom: 26px;

    padding: 7px 11px;

    background-color: #D9A05B;

    color: #3D2314;

    border-radius: 20px;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}

.business-contact-card h3 {
    margin-bottom: 12px;

    color: #3D2314;

    font-size: 25px;
}

.business-contact-card p {
    margin-bottom: 22px;

    color: #6C625B;

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


/* =========================================================
   13. COMMUNITY SECTION
   ========================================================= */

.contact-community-section {
    padding: 88px 0;

    background-color: #E7ECE3;
}

.contact-community-grid {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 72px;

    align-items: center;
}

.contact-community-content {
    max-width: 520px;
}

.contact-community-content h2 {
    margin-bottom: 18px;

    color: #3D2314;

    font-size: 42px;
}

.contact-community-content p {
    color: #5F665A;

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


/* =========================================================
   14. SOCIAL CARDS
   ========================================================= */

.contact-social-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

.contact-social-card {
    min-height: 130px;

    padding: 22px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background-color: #F7F4EB;

    border: 1px solid #CAD4C5;
    border-radius: 14px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

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

    background-color: #FFFFFF;

    border-color: #6B7F63;
}

.contact-social-card strong {
    margin-bottom: 5px;

    color: #3D2314;

    font-size: 17px;
}

.contact-social-card span {
    color: #6B7F63;

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   15. HELP SECTION
   ========================================================= */

.contact-help-section {
    padding: 96px 0;

    background-color: #FCFAF5;
}

.contact-help-grid {
    display: grid;

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

    gap: 18px;
}

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

    background-color: #F7F4EB;

    border: 1px solid #DDD6C8;
    border-radius: 16px;

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

.contact-help-card:hover {
    transform: translateY(-4px);

    border-color: #6B7F63;
}

.contact-help-card > span {
    display: block;

    margin-bottom: 22px;

    color: #D9A05B;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.contact-help-card strong {
    display: block;

    margin-bottom: 8px;

    color: #3D2314;

    font-size: 18px;
}

.contact-help-card p {
    color: #6C625B;

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


/* =========================================================
   16. FINAL CTA
   ========================================================= */

.contact-final-section {
    padding: 88px 0;

    background-color: #3D2314;

    text-align: center;
}

.contact-final-content {
    max-width: 780px;
}

.contact-final-section .eyebrow {
    color: #D9A05B;
}

.contact-final-section h2 {
    margin-bottom: 18px;

    color: #F7F4EB;

    font-size: 46px;
    line-height: 1.2;
}

.contact-final-section p {
    max-width: 620px;

    margin: 0 auto 30px;

    color: #D8CCC3;

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

.contact-final-actions {
    display: flex;

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

    gap: 24px;
}

.contact-light-link {
    padding-bottom: 4px;

    color: #F7F4EB;

    border-bottom: 2px solid #D9A05B;

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.contact-light-link:hover {
    color: #D9A05B;
}


/* =========================================================
   17. TABLET
   ========================================================= */

@media screen and (max-width: 1100px) {

    .contact-hero-grid,
    .contact-form-grid,
    .contact-community-grid {
        gap: 40px;
    }

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

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

}


/* =========================================================
   18. SMALL TABLET
   ========================================================= */

@media screen and (max-width: 850px) {

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

    .contact-hero-content,
    .contact-form-content,
    .contact-community-content {
        max-width: 100%;
    }

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

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

}


/* =========================================================
   19. MOBILE
   ========================================================= */

@media screen and (max-width: 650px) {

    .contact-hero {
        padding: 48px 0 64px;
    }

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

    .contact-hero-content p {
        font-size: 15px;
    }

    .contact-hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }

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

    .contact-options-grid,
    .contact-help-grid {
        grid-template-columns: 1fr;
    }

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

    .contact-form-content h2,
    .contact-section-heading h2,
    .contact-community-content h2 {
        font-size: 35px;
    }

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

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

        gap: 0;
    }

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

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

    .contact-final-section {
        padding: 64px 0;
    }

    .contact-final-section h2 {
        font-size: 36px;
    }

    .contact-final-actions {
        flex-direction: column;
    }

}


/* =========================================================
   20. SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 420px) {

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

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

    .contact-option-card,
    .business-contact-card,
    .contact-help-card {
        padding: 22px;
    }

    .contact-form-card {
        padding: 22px 18px;
    }

    .contact-social-card {
        min-height: 110px;
    }

    .contact-final-section h2 {
        font-size: 32px;
    }

}