/* ── CONTACT HERO ── */
#contact-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rem 4rem 4rem;
    background: linear-gradient(135deg, var(--pearl) 60%, rgba(26, 122, 110, .06) 100%);
    text-align: center
}

#contact-hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--charcoal);
    margin-bottom: 1rem
}

#contact-hero h1 em {
    color: var(--teal);
    font-style: italic
}

#contact-hero p {
    font-size: 1rem;
    color: var(--soft);
    max-width: 600px;
    margin: 0 auto
}

/* ── HOURS & CONTACT ── */
#hours {
    background: var(--white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
    padding: 6rem 4rem
}

.hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem
}

.hours-table tr {
    border-bottom: 1px solid rgba(26, 122, 110, .08)
}

.hours-table td {
    padding: 1rem .5rem;
    font-size: .9rem;
    font-weight: 300
}

.hours-table td:first-child {
    color: var(--charcoal);
    font-weight: 400
}

.hours-table td:last-child {
    color: var(--teal);
    text-align: right;
    font-weight: 500
}

.hours-table tr:hover {
    background: rgba(26, 122, 110, .04)
}

.appt-only {
    color: var(--gold) !important;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 2rem
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--pearl);
    border-radius: 4px;
    border: 1px solid rgba(26, 122, 110, .1);
    transition: all .3s;
    transform-style: preserve-3d
}

.contact-item:hover {
    transform: translateX(6px) translateZ(8px);
    box-shadow: 0 8px 24px rgba(26, 122, 110, .12);
    border-color: var(--teal)
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: var(--teal);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--white)
}

.contact-label {
    font-size: .75rem;
    color: var(--soft);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .2rem
}

.contact-val {
    font-size: .9rem;
    font-weight: 500;
    color: var(--charcoal)
}

.contact-val a {
    color: var(--charcoal);
    text-decoration: none
}

.contact-val a:hover {
    color: var(--teal)
}

/* ── MEDIA QUERIES ── */
@media (max-width: 992px) {
    #hours {
        gap: 3rem;
        padding: 5rem 3rem;
    }
}

@media (max-width: 768px) {
    #hours {
        grid-template-columns: 1fr;
        padding: 4rem 1.5rem;
        gap: 4rem;
    }
    
    .contact-items {
        margin-top: 1.5rem;
    }
}