/* ==========================================================================
   Contact page (help-contact builder). Scoped under .pg-contact.
   ========================================================================== */

/* ---------- three ways: one sheet of stationery, three columns ---------- */
.pg-contact .ways {
  list-style: none; display: grid; background: var(--white);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .pg-contact .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-contact .way { display: flex; flex-direction: column; gap: .45rem; padding: clamp(26px, 3vw, 44px); min-width: 0; }
.pg-contact .way + .way { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .pg-contact .way + .way { border-top: 0; border-left: 1px solid var(--line); } }
.pg-contact .way__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .5rem; }
.pg-contact .way__ico {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 50%; background: var(--mint); color: var(--garden);
}
.pg-contact .way__ico .ico { width: 24px; height: 24px; }
.pg-contact .way__name { margin: 0; }
.pg-contact .way__detail { margin: 0; font-weight: 700; font-size: 1.08rem; color: var(--forest); overflow-wrap: anywhere; }
.pg-contact .way__text { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: 1.02rem; }
.pg-contact .way__btn { margin-top: auto; align-self: flex-start; }

.pg-contact .contact-ways__urgent { margin: 1.6rem 0 0; font-size: 1.02rem; color: var(--ink-soft); }
.pg-contact .contact-ways__urgent strong { color: var(--rose-deep); }
.pg-contact .contact-ways__urgent::before {
  content: ""; display: inline-block; vertical-align: .12em; width: 8px; height: 8px; margin-right: .6rem; border-radius: 50%; background: var(--rose-deep);
}
.pg-contact .contact-ways__urgent a { font-weight: 700; }

/* ---------- book a free call ---------- */
.pg-contact .contact-book__in { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .pg-contact .contact-book__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (min-width: 960px) { .pg-contact .contact-book__intro { padding-top: clamp(8px, 2vw, 28px); } }
.pg-contact .contact-book__points { margin-top: 1.8rem; }
.pg-contact .contact-form { gap: 1.4rem; }
.pg-contact .contact-form__either { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: .5rem; }
.pg-contact .contact-form__either legend { padding: 0; margin-bottom: .2rem; font-weight: 700; font-size: 1.05rem; color: var(--forest); }
.pg-contact .contact-form__either .hint { margin: 0 0 .4rem; }
.pg-contact .contact-form .opt { font-weight: 400; color: var(--ink-soft); }
.pg-contact .contact-form__promise { display: block; margin-top: .3rem; }
/* the whole label is the tap target: at least 44px tall */
.pg-contact .contact-form .check { min-height: 44px; align-content: center; }
.pg-contact .contact-form__send { display: grid; gap: .8rem; justify-items: start; padding-top: .4rem; }
.pg-contact .contact-form__send .hint { margin: 0; }
.pg-contact .form-done a { color: var(--forest); }

/* ---------- worried about someone ---------- */
.pg-contact .contact-referral__in { display: grid; gap: clamp(28px, 5vw, 96px); align-items: start; }
@media (min-width: 900px) { .pg-contact .contact-referral__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pg-contact .contact-referral__list { margin-bottom: 1.8rem; }
.pg-contact .contact-referral__list strong { color: var(--forest); }
.pg-contact .contact-referral__sub {
  margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 1.02rem;
}

/* ---------- mailing list ---------- */
.pg-contact .contact-mailing__in { display: grid; gap: 1.6rem clamp(32px, 6vw, 96px); align-items: end; }
@media (min-width: 900px) { .pg-contact .contact-mailing__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pg-contact .contact-mailing__in h2 { margin-bottom: .3em; }
.pg-contact .contact-mailing__text { color: var(--ink-soft); max-width: 30em; }
.pg-contact .contact-mailing__form { gap: .7rem; }
.pg-contact .contact-mailing__row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.pg-contact .contact-mailing__row .field { flex: 1 1 240px; }
.pg-contact .contact-mailing__row .btn { flex: 0 0 auto; min-height: 56px; }
.pg-contact .contact-mailing__form > .hint { margin: 0; }

/* tablets: one calm row per way, button on the right */
@media (min-width: 600px) and (max-width: 899px) {
  .pg-contact .way { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
  .pg-contact .way > :not(.way__btn) { grid-column: 1; }
  .pg-contact .way__btn { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: center; }
  .pg-contact .way__text { margin-bottom: 0; }
}
/* phones: the Call and WhatsApp buttons already carry the number, so the first
   screen keeps the Call button clear of the fixed Leave button (360x640, 390x667) */
@media (max-width: 600px) {
  .pg-contact .way__detail--num { display: none; }
  .pg-contact .way__text { margin-bottom: .8rem; }
}
@media (max-width: 520px) {
  .pg-contact .way__btn, .pg-contact .contact-referral .actions .btn,
  .pg-contact .contact-form__send .btn, .pg-contact .contact-mailing__row .btn { width: 100%; }
  /* the quiet ways keep their own width, so they stay out of the Leave this site corner */
  .pg-contact .way__btn.btn--soft { width: auto; }
}
/* small phones: a little less air in the hero, so the Call button clears Leave this site even while fonts load */
@media (max-width: 420px) {
  .pg-contact .phero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 16px; }
  .pg-contact .way__text { margin-bottom: .6rem; }
}
/* 19 Oct 2026: the mailing list links to the Collective's own sign-up form (Zoho) instead of a form that sent nothing */
.pg-contact .contact-mailing__go { margin: 0; }
.pg-contact .contact-mailing__go .ico { width: 18px; height: 18px; }