.contact-section {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25));
}



.section__inner--narrow {

  max-width: 36rem;

}



.contact-form {

  display: grid;

  gap: var(--space-2);

}



.contact-field {

  display: grid;

  gap: 0.4rem;

}



.contact-field__label {

  font-family: var(--font-body);

  font-size: var(--text-xs);

  font-weight: 600;

  letter-spacing: var(--tracking-label);

  text-transform: uppercase;

  color: var(--steel);

}



.contact-field input,

.contact-field textarea {

  width: 100%;

  padding: 0.75rem 0.85rem;

  border: 1px solid var(--line);

  background: var(--surface-strong);

  color: var(--ink);

  font-family: var(--font-body);

  font-size: var(--text-md);

  line-height: 1.4;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.contact-field input:focus,

.contact-field textarea:focus {

  outline: none;

  border-color: rgba(13, 148, 136, 0.55);

  box-shadow: 0 0 0 3px var(--accent-soft);

}



.contact-field textarea {

  resize: vertical;

  min-height: 8rem;

}



.contact-form__actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--space-2);

  margin-top: var(--space-1);

}



.contact-mailto {

  font-size: var(--text-sm);

  font-weight: 600;

  color: var(--accent-deep);

}



.contact-mailto:hover {

  color: var(--ink);

}



.contact-status {

  min-height: 1.4em;

  font-size: var(--text-sm);

  color: var(--ink-soft);

}



.contact-status.is-success {

  color: var(--accent-deep);

  font-weight: 600;

}



.contact-status.is-error {

  color: #9f1239;

  font-weight: 500;

}



.contact-status.is-sending {

  color: var(--steel);

}



.contact-form button:disabled {

  opacity: 0.65;

  cursor: wait;

}