.contact-page .contact-section { background: var(--soft-gray); }
.contact-page .contact-intro { max-width: 644px; margin: 0 auto 48px; text-align: center; }
.contact-page .contact-intro h1 { font-size: 48px; line-height: 1.15; }
.contact-page .contact-intro p { margin-top: 24px; }
.contact-page .contact-card {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding: 48px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.contact-page .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.contact-page .contact-field { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.contact-page .contact-field label { font-size: 16px; font-weight: 600; }
.contact-page .contact-optional { color: var(--text); font-weight: 400; }
.contact-page .contact-required { color: var(--blue); }
.contact-page .contact-required-note { grid-column: 1 / -1; font-size: 14px; }
.contact-page .contact-field :is(input, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--text) 30%, var(--white));
  border-radius: calc(var(--radius) / 2);
  color: var(--navy);
  background: var(--white);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.contact-page .contact-field textarea { min-height: 208px; resize: vertical; }
.contact-page .contact-field :is(input, textarea):focus {
  border-color: var(--blue);
  outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent);
  outline-offset: 2px;
}
.contact-page .contact-message, .contact-page .contact-actions, .contact-page .contact-alert { grid-column: 1 / -1; }
.contact-page .contact-actions { margin-top: 8px; }
.contact-page .contact-actions .button { max-width: 100%; white-space: normal; }
.contact-page .contact-alert { padding: 20px 24px; border-radius: 12px; background: #fff3f3; }
.contact-page .contact-alert p, .contact-page .contact-field-error { color: #9b3344; font-size: 14px; }
.contact-page .contact-alert ul { margin-top: 8px; color: #9b3344; font-size: 14px; }
.contact-page .contact-alert a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.contact-page .contact-field [aria-invalid="true"] { border-color: #9b3344; }
.contact-page .contact-success { text-align: center; border-top: 4px solid #397858; }
.contact-page .contact-success h2 { font-size: 30px; line-height: 1.2; }
.contact-page .contact-success p { max-width: 540px; margin: 24px auto 0; }

@media (hover: hover) {
  .contact-page .contact-actions .button:hover {
    background: linear-gradient(90deg, #0162B2 0%, #01366C 100%);
    filter: none;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .contact-page .contact-intro { margin-bottom: 32px; }
  .contact-page .contact-intro h1 { font-size: 36px; }
  .contact-page .contact-card { padding: 24px; }
  .contact-page .contact-form { grid-template-columns: minmax(0, 1fr); }
  .contact-page .contact-actions .button { width: 100%; }
  .contact-page .contact-success h2 { font-size: 26px; }
}