body[data-page="contact"] .screen { width: 100%; max-width: 920px; }
.contact-panel { width: 100%; max-width: 720px; margin: auto; color: var(--navy); }
.contact-panel h1 { margin: 0 0 10px; text-align: center; }
.contact-intro { margin: 0 auto 18px; max-width: 52ch; font-size: clamp(15px, 1.7vmin, 20px); line-height: 1.5; text-align: center; }
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.contact-required { grid-column: 1 / -1; margin: 0; color: #536575; font-size: 14px; }
.contact-field { display: grid; align-content: start; gap: 7px; min-width: 0; font-size: clamp(16px, 1.8vmin, 21px); font-weight: 650; }
.contact-field input, .contact-field textarea { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #bacbd6; border-radius: 12px; padding: 12px 14px; background: #fff; color: var(--navy); font: inherit; font-weight: 500; line-height: 1.4; }
.contact-field textarea { resize: vertical; min-height: 120px; }
.contact-field :is(input, textarea):focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.contact-error { color: var(--danger); line-height: 1.5; }
.contact-back { display: block; padding: 16px 0 4px; text-align: center; color: var(--blue); font-size: 16px; }
@media (min-width: 600px) {
  .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .contact-full { grid-column: 1 / -1; }
}