.contact-page { display: flex; flex-direction: column; }
.contact-page [data-convella-footer] { margin-top: auto; }
.contact-content { width: min(600px, calc(100% - 40px)); margin: 64px auto 80px; }
.contact-intro { text-align: center; }
.contact-intro h1 { margin: 0; font-size: clamp(38px, 5vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
.contact-intro p { margin: 22px 0 32px; color: var(--muted); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.contact-form { position: relative; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 12px 36px rgba(23, 32, 51, .04); }
.contact-form label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.contact-form input, .contact-form textarea { display: block; width: 100%; min-width: 0; margin-bottom: 22px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--foreground); font: inherit; font-size: 16px; line-height: 1.5; }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #7b879b; opacity: 1; }
.contact-page :is(a, button, input, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.contact-submit { width: 100%; padding: 14px 18px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; font: inherit; font-weight: 750; }
.contact-submit:hover { background: var(--accent-dark); }
.contact-submit:disabled { opacity: .65; cursor: wait; }
.contact-status { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.contact-status:empty { margin: 0; }
.contact-status.is-error { color: #b42318; }
.contact-status.is-success { color: #16724b; }
.contact-status a, .contact-form noscript a { text-decoration: underline; text-underline-offset: 3px; }
.contact-help { margin: 26px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; text-align: center; }
.contact-help a { color: var(--accent-dark); font-weight: 600; }
.contact-help a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-skip-link { position: absolute; z-index: 20; top: 12px; left: 16px; padding: 12px 18px; transform: translateY(-160%); border-radius: 8px; background: var(--panel); color: var(--accent-dark); }
.contact-skip-link:focus { transform: translateY(0); }
@media (max-width: 600px) {
  .contact-content { margin-top: 40px; margin-bottom: 56px; }
  .contact-form { padding: 24px 20px; }
  .contact-intro p { font-size: 17px; }
}