/* ==========================================================================
   B VISUAL — contact.css
   Page-specific rules for the Contact main content only.
   No new font-size declarations — every size comes from applying
   .t-display/.t-head/.t-sub/.t-body/.t-micro in the markup. This file only
   sets colour, spacing, layout and interactive-state treatment.
   No box-shadow anywhere, including on fields — focus uses the global
   :focus-visible outline (tokens.css); invalid state uses a border-colour
   change, same technique.
   No red/danger token exists in tokens.css, so invalid state is carried by
   --paper (max available contrast against --ink) plus the visible message
   text, never by colour alone.
   ========================================================================== */

.contact-head { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Grid — form + direct-contact aside
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s10) var(--s10);
  align-items: start;
  margin-top: var(--s12);
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s8); }
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}



/* --------------------------------------------------------------------------
   Service chips — toggleable, not a native multi-select
   -------------------------------------------------------------------------- */

.chip-group { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  border: var(--hairline);
  padding: 10px var(--s3);
  color: var(--bone);
  background: transparent;
  transition: background-color var(--d-ui) var(--e-out),
              border-color var(--d-ui) var(--e-out),
              color var(--d-ui) var(--e-out);
}
.chip:hover { border-color: var(--purple); }
.chip[aria-pressed="true"] {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--paper);
}

/* Honeypot uses .visually-hidden (tokens.css) directly in the markup — not
   display:none, since a naive bot parser that skips display:none would
   still find and fill the field, which is the point of the trap. It is
   additionally taken out of the tab order and hidden from assistive tech
   via tabindex="-1" / aria-hidden on the markup, so a sighted or
   screen-reader user tabbing through never lands on it. */

/* --------------------------------------------------------------------------
   Submit + inline error notice
   -------------------------------------------------------------------------- */

.form__submit {
  align-self: flex-start;
  margin-top: var(--s2);
  padding-block: 16px;
  min-width: 200px;
}
.form__submit:disabled { opacity: .55; cursor: not-allowed; }
.form__submit:disabled:hover { background: var(--lime); }

.form__notice {
  color: var(--paper);
  border-top: var(--hairline);
  padding-top: var(--s4);
}
.form__notice a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; transition: color var(--d-ui) var(--e-out); }
.form__notice a:hover { color: var(--purple); }

/* --------------------------------------------------------------------------
   Success state — replaces the form in place
   -------------------------------------------------------------------------- */

.contact-result { max-width: var(--measure); }
.contact-result[hidden] { display: none; }
.contact-result__title { color: var(--paper); margin-top: var(--s3); }
.contact-result__body { color: var(--bone); margin-top: var(--s5); }
.contact-result__body a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; transition: color var(--d-ui) var(--e-out); }
.contact-result__body a:hover { color: var(--purple); }

/* --------------------------------------------------------------------------
   Direct-contact aside
   -------------------------------------------------------------------------- */

.contact-aside { display: flex; flex-direction: column; gap: var(--s2); }
.contact-aside__link {
  color: var(--paper);
  transition: color var(--d-ui) var(--e-out);
}
.contact-aside__link:hover { color: var(--purple); }
.contact-aside__phone { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Reassurance strip
   -------------------------------------------------------------------------- */

.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: var(--hairline);
  color: var(--mute);
}