/* Contact page (contact.html): static cards, no scripts. */
.contact-section { padding: 8px 0 72px; }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.contact-card {
    padding: 26px 24px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
}
.contact-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--color-gray-800, #1e293b); }
.contact-card p { margin: 0 0 12px; color: var(--color-gray-600, #475569); line-height: 1.55; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-card address { font-style: normal; color: var(--color-gray-600, #475569); line-height: 1.6; }

.contact-email { font-size: 18px; font-weight: 700; color: var(--brand-blue-dark, #0d47a1); text-decoration: none; overflow-wrap: anywhere; }
.contact-email:hover { text-decoration: underline; }

.contact-links { display: flex; gap: 10px; flex-wrap: wrap; }
.contact-links a {
    padding: 9px 18px;
    border: 1px solid var(--color-gray-300, #cbd5e1);
    border-radius: 999px;
    font-weight: 600;
    color: var(--color-gray-700, #334155);
    text-decoration: none;
}
.contact-links a:hover { background: var(--color-gray-50, #f8fafc); }

.contact-more { margin-top: 28px; color: var(--color-gray-500, #64748b); }

@media (max-width: 720px) {
    .contact-grid { grid-template-columns: 1fr; }
}