/* Contact page: operator block and form; colours come from tokens.css. */
.contact-cols { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 900px) { .contact-cols { grid-template-columns: 1fr 1.4fr; align-items: start; } }

.contact .card { padding: 1.5rem; background: var(--backdrop); }
@media (min-width: 640px) { .contact .card { padding: 2rem; } }
.contact-operator > * + *, .contact-form > * + * { margin-top: 1rem; }
.contact-operator address { line-height: 1.7; overflow-wrap: anywhere; }
.contact-operator address a { display: flex; align-items: center; min-height: 44px; color: var(--accent-deep); }
.contact-operator address a:hover { color: var(--ink); }
.contact-note { font-size: 0.9rem; color: var(--muted); }

.contact-form form > * + * { margin-top: 1rem; }
.form-flash { padding: 0.8rem 1rem; border: 1px solid var(--accent-deep); border-radius: var(--radius); color: var(--accent-deep); font-weight: 600; }
.contact-form .btn { width: 100%; cursor: pointer; font-family: inherit; }
@media (min-width: 640px) { .contact-form .btn { width: auto; } }

/* The honeypot stays in the DOM for bots but out of sight and out of the tab order. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 0.85rem; color: var(--muted); }
.form-note a { color: var(--accent-deep); }