.contact-page { padding: 40px 0 80px; }
.contact-grid {
    display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start;
    max-width: 640px; margin: 0 auto;
}
.contact-info { text-align: center; }
.contact-info .contact-cards { align-items: stretch; }
.contact-info .contact-card { text-align: left; }
.contact-info .contact-note { text-align: left; }

/* Left column — info */
.contact-heading { font-size: 36px; margin-bottom: 12px; }
.contact-desc { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 32px; }

.contact-cards { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.contact-card {
    display: flex; gap: 16px; align-items: center;
    padding: 18px 20px; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.contact-card__icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(15,15,15,0.05); color: var(--accent);
}
.contact-card strong {
    display: block; font-size: 14px; color: var(--text-heading); margin-bottom: 2px;
}
.contact-card a, .contact-card span {
    font-size: 14px; color: var(--text-muted);
}
.contact-card a:hover { color: var(--accent); }

.contact-note {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 20px; border-radius: var(--radius);
    background: rgba(15,15,15,0.03); border: 1px solid rgba(15,15,15,0.08);
}
.contact-note svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.contact-note p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* Right column — form */
.contact-form-wrap {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 36px;
    box-shadow: var(--shadow-md);
}
.contact-form-wrap h2 { font-size: 22px; margin-bottom: 24px; }

.contact-alert {
    padding: 14px 18px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; margin-bottom: 20px;
}
.contact-alert.success {
    background: rgba(22,163,74,0.06); border: 1px solid rgba(22,163,74,0.15); color: var(--success);
}
.contact-alert.error {
    background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.15); color: var(--error);
}

.contact-form .form-group { margin-bottom: 18px; }
.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.btn-spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; gap: 36px; }
    .contact-form-wrap { padding: 24px; }
}