/* ==========================================================================
   CONTACT PAGE — Wise Design System
   ========================================================================== */

.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-3xl); max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-xl); }
.contact-info { display: flex; flex-direction: column; gap: var(--s-lg); }
.contact-info-card { background: var(--w-canvas); border-radius: var(--r-xl); padding: var(--s-xl); display: flex; align-items: flex-start; gap: var(--s-lg); }
.contact-info-card .info-icon { width: 40px; height: 40px; background: var(--w-canvas-soft); color: var(--w-ink); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-card h3 { font-size: 16px; font-weight: 600; color: var(--w-ink); margin-bottom: var(--s-xs); }
.contact-info-card p { font-size: 14px; color: var(--w-body); line-height: 1.43; }
.contact-form-card { background: var(--w-canvas); border-radius: var(--r-xl); padding: var(--s-2xl); }
.contact-form-card h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--w-ink); margin-bottom: var(--s-xl); }
.form-group { margin-bottom: var(--s-lg); }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--w-ink); margin-bottom: var(--s-xs); }
.form-input { width: 100%; padding: var(--s-md) var(--s-lg); background: var(--w-canvas); color: var(--w-ink); border: 1px solid var(--w-ink); border-radius: var(--r-md); font-size: 16px; font-weight: 400; line-height: 1.5; font-family: inherit; transition: border-color 0.2s ease; outline: none; }
.form-input:focus { border-color: var(--w-primary); }
.form-input::placeholder { color: var(--w-mute); }
textarea.form-input { min-height: 140px; resize: vertical; }
.form-cta-row { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; }
@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } .contact-form-card { padding: var(--s-xl); } }