:root {--contact-ink:var(--cream);--contact-input:var(--night-2);--contact-border:#81948a;--contact-accent:var(--lemon);--contact-button-ink:var(--lemon-ink);}
/* Contact form controls inherit the site's typography and palette. */
.web-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: 100%; margin-block: 28px 36px; font-family: var(--sans, var(--font-sans, inherit)); }
.web-contact label { display: grid; gap: 9px; font-size: 16px; line-height: 1.5; }
.web-contact .contact-full { grid-column: 1 / -1; }
.web-contact input:not([type="hidden"]):not([type="checkbox"]), .web-contact textarea { width: 100%; min-width: 0; border: 1px solid var(--contact-border); border-radius: 10px; padding: 13px 15px; color: var(--contact-ink); background: var(--contact-input); font: inherit; font-size: 16px; caret-color: var(--contact-accent); }
.web-contact textarea { min-height: 160px; resize: vertical; }
.web-contact :is(input,textarea,button):focus-visible { outline: 2px solid var(--contact-accent); outline-offset: 4px; }
.web-contact button { justify-self: start; min-height: 48px; padding: 13px 25px; border: 0; border-radius: 999px; background: var(--contact-accent); color: var(--contact-button-ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.web-contact button:hover { filter: brightness(1.08); }
.web-contact button:disabled { opacity: .65; cursor: wait; }
.web-contact .contact-note, .web-contact [data-contact-status] { margin: 0; font-size: 14px; line-height: 1.6; color: var(--contact-ink); max-width: 65ch; }
.web-contact [data-contact-status]:empty { display: none; }
@media (max-width: 580px) { .web-contact { grid-template-columns: 1fr; } }