/* ===================================================
   earthity — contact.css: rules only the contact page uses.
   Load after base.css. Split from the former site.css (2026-09-11).
   =================================================== */

/* ===================================================
   CONTACT — page wrapper for /contact/.
   Everything else (h1 size, label, input, button) is
   pure design-system: t-display-02, mb-06, c-secondary,
   eu-field-group, eu-field--filled, eu-textarea,
   eu-btn--primary, mt-06. CSP form-action needs
   api.sheetmonkey.io added before prod ship.
   =================================================== */
.contact-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-06) var(--spacing-13);
}
.contact-page__header {
  margin-bottom: var(--spacing-09);
}
.contact-page__lead {
  max-width: 56ch;
}
/* Single-column on mobile/tablet (form, then HQ below). 2-column on
   desktop with HQ pinned to the left and form on the right. HTML order
   is form-then-HQ so the mobile reading flow lands on the form first. */
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .contact-page__grid {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    grid-template-areas: "hq form";
    gap: var(--spacing-10);
    align-items: center;
  }
  .contact-page__grid > .contact-page__form-col { grid-area: form; }
  .contact-page__grid > .contact-page__hq { grid-area: hq; }
}
.contact-form__required {
  color: var(--red-60);
  margin-left: 2px;
}

/* Send-button row: button on the left, post-submit toast to its right.
   Mobile stacks the toast under the button. */
.contact-form__send-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-05);
  margin-top: var(--spacing-06);
}
.contact-form__send { white-space: nowrap; padding-inline: var(--spacing-05); justify-content: center; }
@media (max-width: 640px) {
  .contact-form__send-row { flex-direction: column; align-items: flex-end; }
}

/* Arrow is its own span so it can slide right on hover independently of
   the label, and the label can swap ("Sending…", "Sent.") without
   disturbing the arrow. Hidden once the form enters success state. */
.contact-form__send-arrow {
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.contact-form__send:hover:not(:disabled) .contact-form__send-arrow,
.contact-form__send:focus-visible:not(:disabled) .contact-form__send-arrow {
  transform: translateX(0.35em);
}
#contact-form.is-success .contact-form__send-arrow { display: none; }
.contact-page__hq {
  /* Mobile / tablet: HQ stacks below the form, separated by a divider. */
  margin-top: var(--spacing-08);
  padding-top: var(--spacing-08);
  border-top: 1px solid var(--gray-20);
}
.contact-page__hq-label {
  margin-bottom: var(--spacing-02);
}
@media (min-width: 880px) {
  .contact-page__hq {
    /* Desktop: HQ sits in the left sidebar column, top-aligned with form. */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}