.page-title { text-align: center; font-size: clamp(32px, 4vw, 56px); font-weight: 800; letter-spacing: -.02em; margin: 30px 0 60px; text-transform: uppercase; }

.contact-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; padding-bottom: 60px; }
.get-in-touch h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 18px; }
.get-in-touch p { color: #bdbdbd; line-height: 1.7; max-width: 480px; margin: 0 0 30px; }
.contact-info { display: grid; gap: 14px; margin-top: 20px; }
.contact-info-item { display: flex; align-items: center; gap: 16px; color: #dcdcdc; }
.contact-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.contact-deco { margin-top: 60px; width: 300px; height: 300px; position: relative; opacity: .7; }
.contact-deco::before { content: ''; position: absolute; left: 0; top: 0; width: 150px; height: 300px; border: 1px solid var(--line); border-left: 0; }
.contact-deco::after { content: ''; position: absolute; left: 150px; top: 0; width: 150px; height: 300px; border: 1px solid var(--line); border-radius: 0 150px 150px 0; border-left: 0; }

.contact-form { background: var(--primary); border-radius: 36px; padding: 40px; display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field label { display: block; color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.form-field input, .form-field textarea { width: 100%; border: 0; border-radius: 999px; background: #e8e8e8; padding: 14px 20px; font-family: inherit; font-size: 15px; color: #222; outline: none; }
.form-field textarea { border-radius: 24px; min-height: 160px; resize: vertical; }
.form-submit { justify-self: end; margin-top: 4px; }

@media (max-width: 960px) {
    .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
    .contact-deco { display: none; }
    .page-title { margin: 20px 0 36px; }
}
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .contact-form { padding: 26px 18px; border-radius: 24px; gap: 16px; }
    .form-field label { font-size: 15px; }
    .form-field input, .form-field textarea { padding: 12px 16px; font-size: 14px; }
    .get-in-touch h2 { font-size: 28px; }
    .get-in-touch p { font-size: 14px; }
    .contact-info-item { font-size: 14px; }
    .page-title { font-size: clamp(28px, 9vw, 44px); margin: 16px 0 28px; }
}
