/* ============================================================
   JIIVE — CONTACT (v3 · gold period)
   One section: the opening statement (head on 1–6, lead and CTA
   on 8–12, the trust line across 1–12). Copy: CONTENT.md 4.5.
   The grievance officer's details were removed on 21 October 2026. Header, footer, buttons and the rail come from
   css/home.css so they match the homepage exactly; the grid,
   field label, section head and reveal come from css/page.css.
   Every value is a token from css/tokens.css.
   ============================================================ */

main:focus { outline: none; }

/* ---------- Opening statement ---------- */
.ct-hero {
  padding-top: calc(var(--size-header) + var(--space-section-tight));
}
.ct-hero .grid { align-items: start; }
.ct-head { grid-column: 1 / span 6; }
.ct-head h1 {
  margin-top: var(--space-md);
  font-size: var(--text-page-title);
  line-height: var(--leading-display);
  max-width: var(--measure-head);
}
/* the lead starts level with the headline, below the field label, so the two halves share a top edge */
.ct-aside {
  grid-column: 8 / -1;
  margin-top: calc(var(--text-field-label) + var(--space-md));
}
.ct-lead {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-lead);
  line-height: var(--leading-copy);
  color: var(--color-text-secondary);
}
.ct-aside .btn { margin-top: var(--space-lg); }

/* ---------- Trust line: one mono line between two hairlines ---------- */
.trust-line {
  grid-column: 1 / -1;
  margin: var(--space-block) 0 0;
  padding: var(--space-md) 0;
  border-top: var(--size-hairline) solid var(--color-border);
  border-bottom: var(--size-hairline) solid var(--color-border);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--text-mono-meta);
  letter-spacing: var(--tracking-meta);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
/* each reassurance stays on one line; the line breaks only at the separator */
.trust-item { white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .ct-head, .ct-aside { grid-column: 1 / -1; }
  .ct-aside { margin-top: var(--space-lg); }
}