/* ============================================================================================
   contact-overage.css — the Contact page (2026-09-22)

   Every page's linked CSS is held to 40 KB gzipped (scripts/verify.mjs, rule P2) and the shared
   sheet is at its line, so the contact page's own rules live here, linked from
   content/pages/contact.json's `stylesheets` with `data-overage`: the direct line under the lede,
   the reason pills and the message field. The field, tile and band recipes are the shared ones.
   This sheet loads before the shared one, so it outranks by specificity, not by order.
   ============================================================================================ */

/* the direct line: the office as an address block, its map and the inbox as quiet links on the band */
.demo-reach { display: grid; gap: var(--s-3); }
.demo-address { display: grid; gap: 2px; font-style: normal; color: rgba(255, 255, 255, .78); font-size: var(--fs-ui); line-height: var(--lh-body); }
.demo-address strong { color: #fff; font-weight: var(--fw-display); margin-bottom: 2px; }
.demo-reach-links { margin-top: var(--s-2); }
.demo-reach-links a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.demo-reach-links a:hover { text-decoration-color: var(--orange); }

/* the reason: a fieldset of pills, the native radio hidden from the eye only, the chosen pill filled in ink */
.lead-form .field--reasons { border: 0; margin: 0 0 var(--s-4); padding: 0; min-width: 0; }
.lead-form .field--reasons legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--fs-small); color: var(--body); }
.reason-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.reason-pill { position: relative; }
.reason-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reason-pill span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-full); font-size: var(--fs-ui-small); color: var(--ink); cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.reason-pill:hover span { background: var(--bg-2); }
.reason-pill input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.reason-pill input:focus-visible + span { outline: 2px solid var(--plum); outline-offset: 2px; }

/* the message runs the form's width under the fields */
.lead-form .field--message { margin-top: var(--s-3); }
.lead-form .field--message textarea { resize: vertical; min-height: 104px; }
.field-optional { color: var(--muted); }