.contact-page {
  max-width: var(--container-narrow);
  padding-block: var(--space-9);
}

.contact-form {
  display: grid;
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.contact-form button {
  justify-self: start;
}

.contact-form [hidden] {
  display: none;
}

.contact-confirmation {
  padding: clamp(var(--space-5), 5vw, var(--space-9));
  border: var(--border-width) solid var(--border);
  background: var(--surface-clean);
  overflow-wrap: anywhere;
}

.contact-confirmation__mark {
  display: block;
  color: var(--tree-gold);
  font-size: 2rem;
  margin-block-end: var(--space-4);
}

.contact-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.contact-errors {
  border-inline-start: 3px solid currentColor;
  padding-inline-start: var(--space-4);
}