.contact-page { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,6vw,90px); padding-block:55px 90px; align-items:start }
.contact-intro .eyebrow { color:var(--purple); margin:0 }
.contact-intro h1 { font-size:clamp(2.75rem,4.5vw,4rem); margin-block:18px 24px }
.contact-intro h1 em { display:block }
.contact-intro>p { font-size:1.25rem; color:var(--muted); max-width:38ch }
.contact-intro .contact-person { font-size:1.0625rem }
.contact-tip { border-top:1px solid var(--line); padding-top:26px; margin-top:34px; color:var(--muted) }
.contact-tip h2 { font-size:1.375rem; letter-spacing:-.02em; color:var(--ink); margin-bottom:14px }
.contact-tip p { font-size:1.0625rem; max-width:44ch }
.contact-panel { background:linear-gradient(145deg,#30273fe6,#202531e6); border:1px solid #6e598966; border-radius:18px; box-shadow:0 18px 50px #09061144; padding:32px; min-width:0 }
.contact-field { display:flex; flex-direction:column; gap:8px; margin-bottom:22px; min-width:0 }
.contact-field label { font-size:1rem; font-weight:650 }
.contact-field input,.contact-field textarea,.contact-field select { width:100%; min-width:0; background:#171720b3; color:var(--ink); border:1px solid #776784; border-radius:8px; padding:12px 14px; font:inherit; font-size:1.0625rem; line-height:1.5 }
.contact-field textarea { resize:vertical; min-height:170px }
.contact-field :is(input,textarea,select):focus-visible { outline:2px solid var(--purple); outline-offset:3px }
.contact-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.contact-page .field-note,.contact-privacy { color:var(--muted); font-size:.9375rem; line-height:1.6; margin:0 }
#verification-status { margin-block:10px 16px }
#spam-check { min-height:65px }
.contact-panel .button { width:100%; cursor:pointer }
.contact-panel .button:disabled { opacity:.55; cursor:default }
.contact-privacy { margin-top:18px }
.contact-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
#contact-status { margin:20px 0 0; padding:16px; border:1px solid var(--purple); border-radius:8px; background:var(--lavender); overflow-wrap:anywhere }
#contact-status[data-error=true] { border-color:#ed9dab; color:#ffccd5 }
.contact-panel:has(form[hidden]) #contact-status { margin:0 }
@media(max-width:960px) { .contact-page { grid-template-columns:1fr; max-width:760px; padding-top:28px } .contact-intro>p,.contact-tip p { max-width:none } .contact-tip { margin-top:22px } }
@media(max-width:540px) { .contact-pair { grid-template-columns:1fr; gap:0 } .contact-panel { padding:22px 18px } .contact-page { gap:24px } }