/* ==========================================================
   CONTACT + CAREERS (pageCss: contact)
   Text comes from src/_data/contact.json and careers.json.
   Both pages share this file: same intake shape, same cards.
   ========================================================== */
.contact-lead { max-width: 68rem; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

.contact-subhead {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* Checklists: short lines, marker in the rail green so the list reads
   as part of the site rather than as browser default bullets. */
.contact-list {
  list-style: none;
  max-width: 62ch;
  margin-bottom: 1rem;
}

.contact-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.45rem;
  color: var(--text-muted);
}

.contact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 2px;
  background: var(--accent);
}

.contact-list strong { color: var(--text); font-weight: 600; }

.page .contact-note {
  font-size: 0.9375rem;
  opacity: 0.85;
}

/* Three standing cards: who to talk to, procurement data, hiring. */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem 3rem;
  max-width: 68rem;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.contact-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.contact-card h2::before {           /* same short tab used on service names */
  content: "";
  display: block;
  width: 2.25rem;
  height: 4px;
  margin-bottom: 0.75rem;
  background: linear-gradient(90deg, var(--rail-start), var(--rail-end));
}

.page .contact-card p { font-size: 0.9375rem; }

.contact-direct {
  font-size: 1rem !important;
  line-height: 1.9;
}
.contact-direct a { font-weight: 600; }

/* Procurement identifiers, same shape as the footer's */
.contact-ids { margin-bottom: 1rem; font-size: 0.9375rem; }
.contact-ids div { display: flex; gap: 0.6rem; margin-bottom: 0.3rem; }
.contact-ids dt { font-weight: 700; min-width: 7rem; }
.contact-ids dd { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Ways to apply: buttons stack in one column at a shared width, each with a
   short blurb beside it. The rows share the list's two columns (subgrid),
   so the buttons line up whatever the widest label turns out to be.
   Stacks (button over blurb) on narrow screens. */
.apply-list {
  list-style: none;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.apply-list li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
}

.apply-list .btn { justify-content: center; }

.page .apply-list p {
  margin: 0;
  font-size: 0.9375rem;
}

@media (max-width: 34em) {
  .apply-list { grid-template-columns: 1fr; gap: 1.25rem; }
  .apply-list li { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Roles on the careers page */
.role-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.75rem 3rem;
  max-width: 68rem;
}

.role-list h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.page .role-list p { font-size: 0.9375rem; margin-bottom: 0; }

/* Mailing address: deliberately quiet. It is a business address for the
   record, not an invitation to turn up. */
.page .contact-mailing {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  font-size: 0.875rem;
  opacity: 0.75;
}
.contact-mailing span {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.15rem;
}