/* ==========================================================================
   Thriving Sons — Contact (page-specific styles)
   Reuses tokens, base, components (eyebrow, buttons), header and footer.
   ========================================================================== */

.contact-hero {
  padding-block: var(--ts-space-5) var(--ts-space-4);
}
.contact-hero__inner { display: grid; gap: var(--ts-space-3); justify-items: start; max-width: 46rem; }
.contact-hero__title {
  font-family: var(--ts-font-display);
  font-size: clamp(2.25rem, 1.4rem + 4.2vw, 3.75rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ts-charcoal);
}
.contact-hero__copy {
  max-width: 38rem;
  font-size: var(--ts-text-lead);
  line-height: 1.55;
  color: var(--ts-charcoal);
}
@media (min-width: 48rem) { .contact-hero { padding-block: 5rem 3.5rem; } }
@media (min-width: 72rem) { .contact-hero { padding-block: 6rem 4rem; } }

/* --- Two pathway cards --- */
.pathways { padding-block: 0 var(--ts-space-6); }
@media (min-width: 48rem) { .pathways { padding-block: 0 6rem; } }

.pathways__list {
  display: grid;
  gap: var(--ts-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pathway {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: var(--ts-space-4) 1.5rem;
  border: 1px solid rgba(176, 141, 62, 0.6);
  border-radius: 2px;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.pathway__title {
  font-family: var(--ts-font-display);
  font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  font-weight: var(--ts-title-weight);
  font-variation-settings: var(--ts-title-variation);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pathway__action { display: grid; gap: var(--ts-space-2); justify-items: start; align-content: start; margin-top: 0.5rem; }
.pathway__action .btn { width: 100%; }
.pathway__note { max-width: 24rem; font-size: 0.9375rem; line-height: 1.55; }

/* Card 1: white, charcoal button */
.pathway--general { background: var(--ts-white); color: var(--ts-charcoal-soft); }
.pathway--general .pathway__title { color: var(--ts-charcoal); }

/* Card 2: charcoal, cream button (clearly different, same gold outline) */
.pathway--family { background: var(--ts-charcoal); color: var(--ts-cream-muted); border-color: rgba(205, 176, 106, 0.7); }
.pathway--family .pathway__title { color: var(--ts-cream); }
.pathway--family :focus-visible { outline-color: var(--ts-gold-soft); }

@media (min-width: 40rem) {
  .pathway { padding: var(--ts-space-5) var(--ts-space-4); }
  .pathway__action .btn { width: auto; }
}

/* Two balanced columns; headings, text and buttons line up across both cards */
@media (min-width: 56rem) {
  .pathways__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: var(--ts-space-4);
    row-gap: 0;
  }
  .pathway { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.75rem; }
}