.contact-layout { max-width: 1180px; margin: 0 auto; padding: 64px 32px 88px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }
.contact-intro h1 { font-size: clamp(2.5rem,5vw,4rem); line-height: 1.1; margin: 0 0 24px; letter-spacing: -.04em; }
.contact-intro p { max-width: 36ch; margin: 0 0 24px; }
.contact-form { padding: 32px; background: white; border: 1px solid var(--ink); }
.contact-form h2 { font-size: 1.625rem; margin: 0 0 8px; }
.contact-form > p { margin: 0 0 24px; }
.contact-form label { display: block; font-weight: 700; margin: 24px 0 8px; }
.contact-form input, .contact-form textarea { display: block; width: 100%; min-height: 48px; padding: 12px; border: 2px solid var(--ink); border-radius: 0; font: inherit; color: var(--ink); background: white; }
.contact-form textarea { resize: vertical; }
.contact-form :is(input, textarea):focus-visible { outline: 3px solid var(--people); outline-offset: 3px; }
.contact-form .field-hint { font-size: 1rem; color: var(--muted); margin: -2px 0 8px; }
.contact-form .contact-privacy { margin: 24px 0; font-size: 0.9375rem; }
.contact-form #contact-status { margin: 24px 0 0; }
#contact-status:empty { display: none; }
#contact-status:focus { outline: 3px solid var(--people); outline-offset: 6px; }
@media(max-width:760px) { .contact-layout { grid-template-columns: 1fr; gap: 24px; padding: 40px 20px; } .contact-form { padding: 24px; } }
@media(max-width:380px) { .contact-form { padding: 16px; } }