.contact-page { display: flex; flex-direction: column; gap: var(--space-5); }

.contact-header { display: flex; justify-content: center; }
.header-cell { max-width: 600px; text-align: center; margin-inline: auto; }

.contact-matrix .matrix-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }
.matrix-cell { background: var(--color-surface); border: var(--border-width) solid var(--color-border); padding: var(--space-3); min-width: 0; cursor: pointer; }
.matrix-cell.active { border-color: var(--color-accent); }

.contact-form-section { display: flex; justify-content: center; }
.form-container { max-width: 800px; width: 100%; }
#contactForm { display: flex; flex-direction: column; gap: var(--space-3); }
.input-row { display: flex; flex-direction: column; gap: var(--space-1); }
.form-instruction { font-size: var(--fs-sm); }
.submit-button { align-self: flex-start; }

.contact-info .info-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }

.contact-response .response-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }

.contact-notes .notes-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); }

.contact-cta { display: flex; justify-content: center; }
.cta-container { max-width: 500px; display: flex; flex-direction: column; gap: var(--space-3); }

@media (max-width: 900px) {
  .contact-matrix .matrix-grid,
  .contact-info .info-columns,
  .contact-response .response-grid,
  .contact-notes .notes-grid { grid-template-columns: 1fr; }

  .header-cell { max-width: 100%; }
  .form-container { max-width: 100%; }
  .cta-container { max-width: 100%; }
}