/* ============================================================
 * page-contact.css — /contact/ (mobile screen 2i · desktop pattern D6:
 * a single centred measure, with the form column narrower — reflow.md
 * says 560, see the build report: there is no 560 token, so the form
 * takes the nearest one, --cap-col-checkout).
 *
 * The form is the page's EXISTING Spectra (uagb) form block — kept whole so
 * it keeps working; this file restyles its labels, inputs, textarea and
 * submit into the design's field/button vocabulary. Spectra emits its own
 * per-block CSS at (0,2,0); `.cap-shell .cap-contact …` is (0,3,0) and wins
 * without an !important.
 *
 * Token-only; scoped `.cap-shell …`.
 * ============================================================ */

.cap-shell .cap-contact { padding-bottom: var(--cap-space-xl); }
.cap-shell .cap-contact__inner {
  padding-top: var(--cap-space-after-header);
  max-width: var(--cap-measure); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--cap-space-lg);
}

/* head */
.cap-shell .cap-contact__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-md); }
.cap-shell .cap-contact__head .cap-h1 { margin: 0; }

/* the form column */
.cap-shell .cap-contact__form { max-width: var(--cap-col-checkout); display: flex; flex-direction: column; gap: var(--cap-space-md); }

/* ─── the Spectra form, restyled ──────────────────────────── */
/* Spectra writes a per-block stylesheet (uag-css-228.css) at (0,3,0) that loads
   AFTER this file, and one of its rules is (0,5,1). Every override below is
   deliberately deeper than its counterpart so no !important is needed. */
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form { display: flex; flex-direction: column; gap: var(--cap-space-md); }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set { display: block; margin: 0; }
/* 2i (owner 2026-09-29, BOTH widths): no visible labels and no asterisks — each field's label is for screen readers only
   (contact.js ties it to its field), the placeholder carries the words on screen */
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-input-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-input,
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form input[type="text"],
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form input[type="email"],
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form textarea {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-field);
  letter-spacing: var(--cap-track-ui); line-height: var(--cap-leading-ui);
  color: var(--cap-color-text); background-color: var(--cap-color-surface);
  border: var(--cap-border-hairline) solid var(--cap-color-field-empty);
  border-radius: var(--cap-radius-pill);
  padding: var(--cap-btn-pad-field); margin: 0;
  appearance: none; -webkit-appearance: none; box-shadow: none;
  transition: border-color var(--cap-ease), box-shadow var(--cap-ease);
}
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-input::placeholder { color: var(--cap-color-muted); opacity: 1; }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-input:not(:placeholder-shown) { border-color: var(--cap-color-field-filled); }   /* filled (CD field states 26 Sep) — Spectra's fields are not .cap-input */
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-input:focus { border-color: var(--cap-color-field-focus); box-shadow: var(--cap-shadow-focus); outline: none; }
/* round 23 rule 10 (owner-approved): a field has NO hover — Spectra darkens a field under the pointer, so its hover re-states
   the resting look (empty / filled / focused); the error edge below stays */
@media (hover: hover) {
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set:hover .uagb-forms-input { background-color: var(--cap-color-surface); border-color: var(--cap-color-field-empty); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set:hover .uagb-forms-input:not(:placeholder-shown) { border-color: var(--cap-color-field-filled); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set:hover select.uagb-forms-input:has(option[value=""]:checked) { border-color: var(--cap-color-field-empty); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set:hover .uagb-forms-input:focus { border-color: var(--cap-color-field-focus); }
}
/* the Subject pick-list at EVERY width (was phone-only, owner 2026-10-01): a <select> is never ":placeholder-shown", so
   the filled rule above gave the empty Subject the darker filled edge and ink text — while "Subject" is still showing it
   takes the empty edge and the placeholder grey, with the down arrow on the right like the phone */
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form select.uagb-forms-input { height: var(--cap-space-field-h);   /* Spectra forces min-height 0 !important */ padding-right: var(--cap-mp-select-pad-right); background-image: var(--cap-mp-select-arrow); background-repeat: no-repeat; background-position: right var(--cap-space-md) center; color: var(--cap-color-text); cursor: pointer; }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form select.uagb-forms-input:has(option[value=""]:checked) { color: var(--cap-color-muted); border-color: var(--cap-color-field-empty); }
/* the textarea keeps a field radius, not a pill (states.md · Fields) */
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form textarea.uagb-forms-input {
  border-radius: var(--cap-radius-md); line-height: var(--cap-leading-small); resize: vertical;
}

/* submit — the design's primary pill, full width */
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-main-submit-button-wrap { margin: 0; display: block; text-align: left; width: 100%; }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-main-submit-button-wrap .uagb-forms-main-submit-button,
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-main-submit-button-wrap .uagb-forms-main-submit-button.wp-block-button__link {
  display: flex; width: 100%; align-items: center; justify-content: center;
  font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-btn);
  letter-spacing: var(--cap-track-btn); text-transform: uppercase; line-height: var(--cap-leading-ui);
  padding: var(--cap-btn-pad-l); border-radius: var(--cap-radius-pill);
  border: var(--cap-border-hairline) solid transparent;
  background-color: var(--cap-color-text); color: var(--cap-color-bg);
  cursor: pointer; text-decoration: none; box-shadow: none;
  transition: background-color var(--cap-ease), color var(--cap-ease);
}
@media (hover: hover) { .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-main-submit-button-wrap .uagb-forms-main-submit-button:hover { background-color: var(--cap-color-primary); color: var(--cap-color-bg); } }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-submit-button-text { font: inherit; letter-spacing: inherit; }

/* Spectra's own success / error strips → the design's message look */
.cap-shell .cap-contact [class*="uagb-forms-success-message"],
.cap-shell .cap-contact [class*="uagb-forms-failure-message"] {
  font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-msg);
  color: var(--cap-color-text); background: var(--cap-color-bg-deep);
  padding: var(--cap-space-sm) var(--cap-space-md); border-radius: var(--cap-radius-msg);
}

/* the email line + the "faster answers" card. Square, hairline, white: the
   corner rule keeps radius for interactive objects only — an info panel is square. */
.cap-shell .cap-contact__aside { max-width: var(--cap-col-checkout); display: flex; flex-direction: column; gap: var(--cap-space-md); }
.cap-shell .cap-contact__box { background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); padding: var(--cap-space-card-pad); }
.cap-shell .cap-contact__email { display: flex; flex-direction: column; gap: var(--cap-space-xs); }
.cap-shell .cap-contact__help { display: flex; flex-direction: column; gap: var(--cap-space-sm); align-items: flex-start; }

/* the head's lede and the order hint under the message box (2i, owner ruling 2026-09-28; the phone sizes below) */
.cap-shell .cap-contact__lede { margin: 0; color: var(--cap-color-text-secondary); }
.cap-shell .cap-contact__hint { margin: var(--cap-space-sm) 0 0; padding-left: var(--cap-space-md); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-hint); letter-spacing: var(--cap-track-label); text-transform: uppercase; line-height: var(--cap-leading-well-caption); color: var(--cap-color-caption); }
/* the two lines under the button (2i, owner ruling 2026-09-28): the privacy line and the mail link; they go with the form */
.cap-shell .cap-contact__after { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-3); text-align: center; }
.cap-shell .cap-contact__line { margin: 0; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-meta); letter-spacing: var(--cap-track-feature); text-transform: uppercase; line-height: normal; color: var(--cap-color-caption); }
.cap-shell .cap-contact__line a { color: var(--cap-color-primary); text-decoration: none; }
@media (hover: hover) { .cap-shell .cap-contact__line a:hover { color: var(--cap-color-text); } }
.cap-shell .cap-contact__form:has(.uagb-forms-main-form[style*="none"]) .cap-contact__after { display: none; }   /* Spectra hides the form on its answer */

@media (max-width: 699px) {
  .cap-shell .cap-contact__inner { padding-top: var(--cap-space-lg); gap: var(--cap-space-lg); }
  .cap-shell .cap-contact__head { gap: var(--cap-space-gap-7); }
  /* 2i, 28 Sep sheet (CD's markup at 388): the fields 10 apart, each 48 (13 / 18 pads, 17 / .06em on a 20 line), the
     label for screen readers only at every width (above); the message box 16-cornered, 110 high; the button 15 /
     18 in a 48 pill, 14 under the message; the two lines 14 under the button, 6 apart; the white card 24 under, 20 pads */
  .cap-shell .cap-contact__form { gap: var(--cap-space-gap-7); }   /* the fields 24 under the lede (the inner column's gap) */
  .cap-shell .cap-contact__lede { margin: 0; font-size: var(--cap-type-base); font-weight: 400; line-height: var(--cap-leading-article); color: var(--cap-color-text-secondary); }
  .cap-shell .cap-contact__hint { margin: var(--cap-space-gap-5) 0 0; padding-left: var(--cap-space-field-cell-x); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-hint-phone); letter-spacing: var(--cap-track-label); text-transform: uppercase; line-height: var(--cap-leading-well-caption); color: var(--cap-color-caption); }
  .cap-shell .cap-contact__after { margin-top: 0; }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-form-hidden-data,
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form [class^="uagb-form-reacaptcha-error"]:empty { display: none; }   /* no empty flex rows between the message and the button */
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form { gap: var(--cap-space-gap-5); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-input,
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form input[type="text"],
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form input[type="email"],
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form select,
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form textarea { font-size: var(--cap-type-input); line-height: var(--cap-leading-input); letter-spacing: var(--cap-track-ui); padding: var(--cap-btn-pad-field); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-input::placeholder { color: var(--cap-color-caption); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form select.uagb-forms-input:has(option[value=""]:checked) { color: var(--cap-color-caption); }   /* the phone's placeholder grey */
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form textarea.uagb-forms-input { border-radius: var(--cap-radius-md); height: var(--cap-mp-contact-textarea-min); min-height: var(--cap-mp-contact-textarea-min); line-height: var(--cap-leading-input); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-main-submit-button-wrap { margin-top: var(--cap-space-xs); }
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-main-submit-button-wrap .uagb-forms-main-submit-button,
  .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-main-submit-button-wrap .uagb-forms-main-submit-button.wp-block-button__link { font-size: var(--cap-type-btn-large); line-height: var(--cap-leading-btn-large); padding: var(--cap-mp-contact-btn-pad); border: 0; color: var(--cap-color-on-ink); }
  /* Spectra's answer, in the form's place: the cream strip with the ink ✔ disc */
  .cap-shell .cap-contact [class*="uagb-forms-success-message"]:not(.uagb-forms-submit-message-hide) { display: flex; align-items: center; gap: var(--cap-space-gap-5); padding: var(--cap-space-gap-5) var(--cap-space-md); border-radius: 0; font-size: var(--cap-type-card-value); line-height: normal; }
  .cap-shell .cap-contact [class*="uagb-forms-success-message"]:not(.uagb-forms-submit-message-hide)::before { content: "✔"; flex: none; width: var(--cap-mp-contact-check); height: var(--cap-mp-contact-check); border-radius: var(--cap-radius-pill); background: var(--cap-color-text); color: var(--cap-color-bg-deep); display: grid; place-content: center; font-style: normal; font-size: var(--cap-type-eyebrow-card); }
  .cap-shell .cap-contact__box { padding: var(--cap-space-panel-pad); }
  .cap-shell .cap-contact__help .cap-eyebrow { font-size: var(--cap-type-eyebrow); line-height: normal; }
  .cap-shell .cap-contact__help .cap-lede { font-size: var(--cap-type-card-value); line-height: var(--cap-leading-lede); }
  .cap-shell .cap-contact__help .cap-link { margin-top: var(--cap-space-xs); padding-bottom: calc(var(--cap-space-gap-1) + var(--cap-border-hairline)); line-height: normal; }
}
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-submit-button:focus-visible { outline: var(--cap-focus-ring); outline-offset: var(--cap-focus-ring-offset); box-shadow: none; }   /* the site's focus ring — the form plugin's own button style had removed it (behaviour sweep 2026-09-27) */

/* ─── the error state (the 2j board, owner 2026-09-27; assets/js/contact.js marks the field) ───
   The field's edge and its label turn carmine and stay so while hovered or focused; the alert box (.cap-alert) sits right
   under the failed field. Deeper than the hover / focus rules above, so no !important. */
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set .uagb-forms-input[aria-invalid="true"],
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set .uagb-forms-input[aria-invalid="true"]:focus { border-color: var(--cap-color-error); }
@media (hover: hover) { .cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set:hover .uagb-forms-input[aria-invalid="true"] { border-color: var(--cap-color-error); } }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .uagb-forms-field-set:has([aria-invalid="true"]) .uagb-forms-input-label { color: var(--cap-color-error); }
.cap-shell .cap-contact .uagb-forms__outer-wrap .uagb-forms-main-form .cap-contact__error { margin-top: var(--cap-space-gap-6); }
/* the lines under "Send message" below 1280 (owner 2026-10-01): each its own 44 row, centred, no hairlines — like the
   reading confirmation's "Wrong address?" rows — and each link's tap band the row's full height */
@media (max-width: 1279px) {
  .cap-shell .cap-contact__after { gap: 0; }
  .cap-shell .cap-contact__line { line-height: var(--cap-tap-min); }
  .cap-shell .cap-contact__line a { position: relative; -webkit-tap-highlight-color: transparent; }
  .cap-shell .cap-contact__line a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--cap-tap-min)); height: var(--cap-tap-min); transform: translate(-50%, -50%); }
}

/* the "Contact" eyebrow: the standard purple eyebrow at every width (owner 2026-10-01; it was grey) */
.cap-shell .cap-contact__head .cap-eyebrow { font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); color: var(--cap-color-primary); }

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone — the
   token's pair (--cap-space-footer-gap). Appended last so it wins over the page's earlier end spacing. */
.cap-shell .cap-contact { padding-bottom: var(--cap-space-footer-gap); }