.contact-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.contact-form { display: grid; gap: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); padding: clamp(22px, 4vw, 40px); min-width: 0; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.contact-form .field { display: grid; gap: var(--space-2); min-width: 0; }
.contact-form label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.contact-form input, .contact-form textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary); }
.contact-actions { display: flex; align-items: center; gap: var(--space-4); }
.contact-side { display: grid; gap: 14px; min-width: 0; }
.side-card { display: grid; gap: var(--space-3); justify-items: start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(20px, 3vw, 28px); }
.side-card h2 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.side-card p { color: var(--color-text-soft); font-size: 0.95rem; }
@media (max-width: 980px) {
  .contact-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .contact-row { grid-template-columns: minmax(0, 1fr); }
}

/* harness:contact.html#contact-form */
#contact-form button, #contact-form input, #contact-form select, #contact-form textarea { font: inherit; }
#contact-form .cf-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
#contact-form .cf-form { display: grid; gap: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); padding: clamp(22px, 4vw, 40px); min-width: 0; }
#contact-form .cf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
#contact-form .cf-field { display: grid; gap: var(--space-2); min-width: 0; }
#contact-form label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
#contact-form input, #contact-form textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
#contact-form textarea { resize: vertical; min-height: 9rem; }
#contact-form input:focus-visible, #contact-form textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary); }
#contact-form .cf-actions { display: flex; align-items: center; gap: var(--space-4); }
#contact-form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#contact-form .cf-side { display: grid; gap: var(--space-4); min-width: 0; }
#contact-form .cf-card { display: grid; gap: var(--space-3); justify-items: start; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: clamp(20px, 3vw, 28px); }
#contact-form .cf-card h2 { font-size: var(--text-xl); letter-spacing: -0.02em; }
#contact-form .cf-card p { color: var(--color-text-soft); font-size: var(--text-base); }
@media (max-width: 980px) {
  #contact-form .cf-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  #contact-form .cf-row { grid-template-columns: minmax(0, 1fr); }
}
/* /harness:contact.html#contact-form */