.contactPage .staticPage__wrap {
  max-width: 980px;
}

.contactForm {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.contactGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contactField {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contactField span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.contactField input,
.contactField select,
.contactField textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(9, 9, 12, 0.85);
  color: #fff;
  padding: 10px 12px;
  font-size: 14px;
}

.contactField textarea {
  resize: vertical;
  min-height: 120px;
}

.contactField small {
  color: #ff8a8a;
  font-size: 12px;
}

.contactField--full {
  grid-column: 1 / -1;
}

.contactSubmit {
  margin-top: 14px;
  min-width: 180px;
}

.contactAlert {
  margin-top: 12px;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  font-size: 14px;
}

.contactAlert--success {
  background: rgba(0, 168, 107, 0.12);
  border-color: rgba(0, 168, 107, 0.5);
  color: #c8ffe8;
}

.contactAlert--error {
  background: rgba(229, 9, 20, 0.12);
  border-color: rgba(229, 9, 20, 0.5);
  color: #ffd6d9;
}

@media (max-width: 760px) {
  .contactForm {
    padding: 16px;
  }

  .contactGrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contactField--full {
    grid-column: auto;
  }
}