/* ==========================================
   Contact Hero
========================================== */

.contact-hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:82vh;
    padding:180px 0 120px;
    overflow:hidden;

    background:
    linear-gradient(
        rgba(15,23,42,.75),
        rgba(15,23,42,.78)
    ),
    url("../images/contact/contact-hero.jpg")
    center center/cover no-repeat;
}

.contact-hero-overlay{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top right,
    rgba(201,169,97,.12),
    transparent 45%);
    pointer-events:none;
}

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

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

.breadcrumb{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:28px;
    font-size:.95rem;
    color:rgba(255,255,255,.75);
}

.breadcrumb a{
    color:rgba(255,255,255,.85);
    text-decoration:none;
    transition:.3s;
}

.breadcrumb a:hover{
    color:var(--color-accent);
}

.page-label{
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-bottom:28px;

    font-size:.85rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--color-accent);
}

.page-label::before{
    content:"";
    width:42px;
    height:2px;
    background:var(--color-accent);
}

.contact-hero h1{
    font-family:var(--heading-font);
    font-size:clamp(3rem,6vw,5rem);
    line-height:1.08;
    font-weight:700;
    color:#fff;
    margin-bottom:30px;
    max-width:900px;
}

.hero-description{
    max-width:650px;
    font-size:1.18rem;
    line-height:1.9;
    color:rgba(255,255,255,.88);
}

/* ==========================================
   Responsive
========================================== */

@media (max-width:992px){

    .contact-hero{
        min-height:70vh;
        padding:150px 0 90px;
    }

}

@media (max-width:768px){

    .contact-hero{
        text-align:center;
        min-height:65vh;
        padding:140px 0 80px;
    }

    .contact-hero-content{
        margin:auto;
    }

    .breadcrumb{
        justify-content:center;
        flex-wrap:wrap;
    }

    .page-label{
        justify-content:center;
    }

    .page-label::before{
        display:none;
    }

    .hero-description{
        margin:auto;
        font-size:1.05rem;
    }

}


/* ==========================================
   Contact Introduction
========================================== */

.contact-intro {
    background: var(--color-white);
}

.contact-intro-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 5rem;
    align-items: center;
    margin-top: 4rem;
}

.contact-intro-content .lead {
    font-size: 1.35rem;
    line-height: 1.9;
    color: var(--color-charcoal);
    margin-bottom: 2rem;
    font-weight: 400;
}

.contact-intro-content p:last-child {
    color: var(--color-slate);
    line-height: 1.9;
}

.contact-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.service-pill {
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
    color: var(--color-charcoal);
    transition: all .35s ease;
}

.service-pill:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

/* Responsive */

@media (max-width:991px){

    .contact-intro-grid{
        grid-template-columns:1fr;
        gap:3rem;
    }

}

@media (max-width:600px){

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

}

/* =====================================================
   Contact Section
===================================================== */

.contact-section{
    background:#fff;
}

.contact-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}

/* Left Side */

.contact-details h2{
    margin:18px 0 24px;
    max-width:580px;
}

.contact-details .section-intro{
    max-width:560px;
    margin-bottom:48px;
}

.contact-card{
    display:flex;
    flex-direction:column;
    gap:32px;
    margin-bottom:48px;
}

.contact-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.contact-icon{
    width:58px;
    height:58px;
    border:1px solid var(--border-color);
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    color:var(--accent-color);
    background:#fff;
}

.contact-item h4{
    margin-bottom:10px;
    font-size:1.1rem;
}

.contact-item p{
    color:var(--muted-text);
    line-height:1.8;
    margin-bottom:10px;
}

.contact-item a{
    display:block;
    color:var(--primary-color);
    margin-bottom:6px;
    text-decoration:none;
    transition:.3s;
}

.contact-item a:hover{
    color:var(--accent-color);
}

.contact-actions{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}


/* Form */

.contact-form-wrapper{
    background:#fff;
    border:1px solid var(--border-color);
    border-radius:20px;
    padding:48px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.form-group{
    margin-bottom:24px;
}

.form-group label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:var(--primary-color);
}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid var(--border-color);

    border-radius:12px;

    background:#fff;

    font-family:inherit;

    font-size:16px;

    transition:.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

    outline:none;

    border-color:var(--accent-color);

    box-shadow:0 0 0 4px rgba(183,148,81,.12);

}

.form-group textarea{
    resize:vertical;
}

.contact-form .btn{
    width:100%;
    justify-content:center;
}


/* Responsive */

@media(max-width:992px){

    .contact-layout{
        grid-template-columns:1fr;
        gap:64px;
    }

}

@media(max-width:768px){

    .contact-form-wrapper{
        padding:32px;
    }

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

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

    .contact-actions .btn{
        width:100%;
        justify-content:center;
    }

}


/*====================================================
Office Location
====================================================*/

.office-location{
    background:var(--surface-color);
}

.location-layout{
    display:grid;
    grid-template-columns:1.35fr 1fr;
    gap:72px;
    align-items:start;
}

/* Left */

.location-map h2{
    margin:18px 0 24px;
}

.location-map .section-intro{
    max-width:620px;
    margin-bottom:40px;
}

.map-wrapper{
    overflow:hidden;
    border-radius:22px;
    border:1px solid var(--border-color);
    height:520px;
}

.map-wrapper iframe{
    width:100%;
    height:100%;
    border:0;
}


/* Right */

.location-info{
    display:flex;
    flex-direction:column;
    gap:32px;
}

.location-card,
.hours-card{

    background:#fff;

    border:1px solid var(--border-color);

    border-radius:20px;

    padding:38px;

}

.info-block{
    margin-bottom:36px;
}

.info-block:last-child{
    margin-bottom:0;
}

.info-block h3{
    margin-bottom:12px;
    font-size:1.2rem;
}

.info-block p{
    color:var(--muted-text);
    line-height:1.8;
}

.hours-card h3{
    margin:18px 0 30px;
}

.hours-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.hours-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:18px;

    border-bottom:1px solid var(--border-color);

}

.hours-row:last-child{
    border-bottom:none;
}

.hours-row span{
    color:var(--muted-text);
}

.hours-row strong{
    font-weight:700;
    color:var(--primary-color);
}

.response-box{

    margin-top:34px;

    padding:24px;

    background:#fafafa;

    border-left:4px solid var(--accent-color);

    border-radius:12px;

}

.response-box h4{
    margin-bottom:12px;
}

.response-box p{
    color:var(--muted-text);
    line-height:1.7;
}


/* Responsive */

@media(max-width:992px){

    .location-layout{
        grid-template-columns:1fr;
        gap:60px;
    }

    .map-wrapper{
        height:420px;
    }

}

@media(max-width:768px){

    .location-card,
    .hours-card{
        padding:30px;
    }

    .hours-row{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .map-wrapper{
        height:340px;
    }

}

/*====================================================
Frequently Asked Questions
====================================================*/

.contact-faq{
    background:#fff;
}

.contact-faq .section-header{
    max-width:760px;
    margin:0 auto 70px;
}

.faq-wrapper{
    max-width:900px;
    margin:0 auto;
}

.faq-item{

    border:1px solid var(--border-color);

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

    background:#fff;

    transition:.35s;

}

.faq-item:hover{
    border-color:var(--accent-color);
}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:28px 32px;

    background:none;

    border:none;

    cursor:pointer;

    font-family:inherit;

    text-align:left;

    font-size:1.15rem;

    font-weight:600;

    color:var(--primary-color);

}

.faq-question i{

    transition:.35s;

    flex-shrink:0;

    color:var(--accent-color);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

}

.faq-answer p{

    padding:0 32px 28px;

    color:var(--muted-text);

    line-height:1.9;

}

.faq-item.active{

    border-color:var(--accent-color);

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

.faq-question:focus-visible{

    outline:2px solid var(--accent-color);

    outline-offset:-2px;

}

/* Responsive */

@media(max-width:768px){

    .faq-question{

        padding:22px 24px;

        font-size:1.05rem;

    }

    .faq-answer p{

        padding:0 24px 24px;

    }

}


/*====================================================
Contact CTA
====================================================*/

.contact-cta{

    background:#f8f8f6;

}

.contact-cta-panel{

    max-width:900px;

    margin:0 auto;

    padding:90px 70px;

    background:#fff;

    border:1px solid var(--border-color);

    border-radius:24px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

/* Decorative Accent */

.contact-cta-panel::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:90px;

    height:4px;

    background:var(--accent-color);

}

.contact-cta-panel h2{

    margin:20px auto 28px;

    max-width:700px;

}

.contact-cta-panel p{

    max-width:720px;

    margin:0 auto 48px;

    color:var(--muted-text);

    line-height:1.9;

    font-size:1.08rem;

}

.cta-services{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:48px;

}

.cta-services span{

    padding:10px 18px;

    border:1px solid var(--border-color);

    border-radius:999px;

    font-size:.95rem;

    font-weight:600;

    color:var(--primary-color);

    background:#fafafa;

    transition:.3s;

}

.cta-services span:hover{

    border-color:var(--accent-color);

    color:var(--accent-color);

    transform:translateY(-2px);

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


/* Responsive */

@media(max-width:992px){

    .contact-cta-panel{

        padding:70px 50px;

    }

}

@media(max-width:768px){

    .contact-cta-panel{

        padding:50px 28px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

        justify-content:center;

    }

    .cta-services{

        gap:12px;

    }

}