.contact-page { width: min(1160px, calc(100% - 64px)); margin: 0 auto; padding: 72px 0 88px; }
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; align-items: start; }
.contact-intro h1 { margin: 0; font-size: 56px; line-height: 1.08; font-weight: 700; }
.contact-intro h1 span { color: var(--home-blue); }
.contact-intro > p { font-size: 18px; line-height: 1.65; max-width: 31ch; color: var(--home-secondary); margin: 28px 0; }
.contact-email { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; color: var(--home-ink); font-weight: 600; font-size: 18px; text-decoration: underline; text-underline-offset: 6px; }
.contact-intro .contact-note { font-size: 14px; padding: 24px 0; margin-top: 28px; border-block: 1px solid var(--home-rule); max-width: 37ch; }
.contact-compose { min-width: 0; }
.contact-compose > h2 { font-size: 28px; margin: 0 0 28px; font-weight: 600; }
.contact-form { display: grid; gap: 24px; position: relative; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-field { min-width: 0; }
.contact-field label { display: block; font-size: 15px; font-weight: 600; color: var(--home-ink); margin-bottom: 9px; }
.contact-field label span { color: var(--home-secondary); font-size: 13px; font-weight: 400; }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; min-height: 48px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 12px 14px; background: var(--home-paper); color: var(--home-ink); font: inherit; font-size: 16px; line-height: 1.5; caret-color: var(--home-blue); }
.contact-field select { padding-right: 32px; }
.contact-field textarea { display: block; resize: vertical; min-height: 190px; }
.contact-field [aria-invalid="true"] { border-color: var(--danger); }
.contact-field-error, .contact-error { color: var(--danger); font-size: 14px; line-height: 1.6; }
.contact-field-error { margin: 8px 0 0; }
.contact-error { padding: 14px 0; margin: 0 0 20px; border-block: 1px solid var(--danger); }
.contact-field-note { font-size: 13px; color: var(--home-secondary); margin: 8px 0 0; }
.contact-honeypot { display: none; }
.contact-submit { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--home-rule); padding-top: 24px; }
.contact-submit button { flex: 0 0 auto; }
.contact-submit p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--home-secondary); }
.contact-submit a, .contact-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact-submit button:disabled { background: var(--home-tint); color: var(--home-secondary); border-color: var(--home-rule); cursor: not-allowed; }
.contact-success { display: flex; align-items: start; gap: 20px; padding-block: 28px; border-block: 1px solid var(--home-rule); }
.contact-success > span { color: var(--home-blue); margin-top: 4px; }
.contact-success h2 { font-size: 30px; margin: 0 0 14px; }
.contact-success p { font-size: 17px; line-height: 1.65; color: var(--home-secondary); margin: 0; }
.contact-security { max-width: 100%; }
@media (max-width: 1000px) { .contact-layout { gap: 48px; } .contact-intro h1 { font-size: 46px; } .contact-fields { grid-template-columns: 1fr; } .contact-submit { align-items: start; flex-direction: column; gap: 16px; } }
@media (max-width: 700px) { .contact-page { width: calc(100% - 40px); padding-block: 40px 64px; } .contact-layout { grid-template-columns: 1fr; gap: 40px; } .contact-intro h1 { font-size: 42px; } .contact-intro > p { margin-block: 20px; max-width: 45ch; } .contact-intro .contact-note { padding-block: 20px; margin-top: 20px; max-width: none; } .contact-compose > h2 { font-size: 26px; } .contact-fields { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 420px) { .contact-fields { grid-template-columns: 1fr; } .contact-page { width: calc(100% - 32px); } }