/* This page extends the selected homepage design system in assets/site.css. */
.how-we-help-page .site-header { border-bottom: 0; }

.how-hero {
  display: flex;
  min-height: 560px;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(58px, 7vw, 92px) 30px;
  overflow: hidden;
  background: radial-gradient(circle at 88% 16%, rgb(24 158 159 / 19%) 0, transparent 24rem), #fff;
  color: var(--midnight);
}

.how-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(36px, 8vw, 110px);
  align-items: start;
}

.how-hero__copy .eyebrow { margin-bottom: 26px; }

.how-hero__copy h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2.7rem, 5.45vw, 5rem);
  font-weight: 850;
  letter-spacing: -.065em;
  line-height: .88;
}

.how-hero__copy h1 em { font-family: var(--sans); font-style: italic; font-weight: 850; }

.how-hero__summary { padding-top: 7px; }
.how-hero__summary p { margin-bottom: 30px; font-size: 1.075rem; line-height: 1.62; }

.how-hero__rule {
  display: grid;
  grid-template-columns: 1.25fr .6fr 2fr .7fr;
  gap: 7px;
  height: 6px;
  margin-top: clamp(38px, 5vw, 64px);
}

.how-hero__rule span:nth-child(1), .how-hero__rule span:nth-child(4) { background: var(--midnight); }
.how-hero__rule span:nth-child(2) { background: var(--brand-teal); }
.how-hero__rule span:nth-child(3) { background: var(--marigold); }

.how-focus {
  padding-block: clamp(52px, 5.5vw, 76px);
  background: #fff;
}

.how-section-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1000px;
}

.how-section-heading .eyebrow { margin-bottom: 14px; }
.how-section-heading h2 { max-width: 900px; font-weight: 820; }
.how-capacity .how-section-heading { max-width: none; }
.how-capacity .how-section-heading h2 {
  max-width: none;
  font-size: clamp(2.25rem, 3vw, 3.35rem);
  letter-spacing: -.052em;
  white-space: nowrap;
}

.how-program-list { margin-top: clamp(42px, 6vw, 76px); }
.how-focus .how-program-list { margin-top: clamp(30px, 4vw, 48px); }

.how-program-list article {
  display: grid;
  grid-template-columns: 76px minmax(240px, .7fr) minmax(300px, 1.3fr);
  gap: 32px;
  align-items: start;
  padding: 38px 0;
  border-bottom: 1px solid rgb(14 41 65 / 30%);
}

.how-program-list .service-number { margin-top: 3px; }
.how-program-list article > div { display: contents; }
.how-focus .how-program-list article { padding-block: 30px; }

.how-program-list h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 760;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.how-program-list p {
  grid-column: 3;
  max-width: 650px;
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.62;
}

.how-program-list p:last-child { margin-bottom: 0; }
.how-program-list article:last-child { border-bottom: 0; }

/* Same content structure as Capacity Building, with a brighter, teal-led treatment. */
.how-program-list--economic article { border-bottom-color: rgb(24 158 159 / 46%); }
.how-program-list--economic .service-number { color: var(--brand-teal); }
.how-program-list--economic h3 { color: var(--midnight); }
.how-program-list--economic article:nth-child(-n+2) { row-gap: 0; }
.how-program-list--economic article:nth-child(-n+2) p { margin-bottom: 0; }

.how-capacity { background: var(--soft); }

.how-focus-intro,
.how-capacity-intro {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 18px;
  max-width: 860px;
  padding-left: 54px;
}

.how-focus-intro { margin: clamp(32px, 4vw, 48px) 0 0; }
.how-capacity-intro { margin: clamp(44px, 6vw, 72px) 0 0; }

.how-focus-intro h3,
.how-capacity-intro h3 {
  grid-column: 2;
  margin: 0;
  font-size: clamp(1.55rem, 2.5vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.how-focus-intro p,
.how-capacity-intro p {
  grid-column: 2;
  max-width: 720px;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.62;
}

.how-closing { background: var(--brand-teal); color: var(--midnight); }
.how-closing .eyebrow { color: var(--midnight); }
.how-closing h2 { max-width: 700px; font-size: clamp(2.1rem, 3.85vw, 3.95rem); font-weight: 820; }

.button--closing {
  color: var(--midnight);
  border-color: #fff;
  background: #fff;
  box-shadow: 7px 7px 0 rgb(14 41 65 / 32%);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button--closing:hover { background: var(--marigold); box-shadow: 10px 10px 0 rgb(14 41 65 / 42%); transform: translate(-3px, -3px); }

@media (max-width: 900px) {
  .how-hero { min-height: auto; padding-top: 82px; }
  .how-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .how-hero__summary { max-width: 590px; }
  .how-section-heading { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .how-capacity .how-section-heading h2 { white-space: normal; }
  .how-focus-intro, .how-capacity-intro { padding-left: 42px; }
  .how-program-list article { grid-template-columns: 54px 1fr; }
  .how-program-list h3, .how-program-list p { grid-column: 2; }
}

@media (max-width: 600px) {
  .how-hero { padding-top: 68px; }
  .how-hero__copy h1 { font-size: clamp(2.3rem, 10.8vw, 3.2rem); }
  .how-hero__rule { margin-top: 58px; }
  .how-section-heading { grid-template-columns: 1fr; gap: 14px; }
  .how-focus-intro, .how-capacity-intro { margin-left: 0; padding-left: 0; }
  .how-focus-intro, .how-capacity-intro { grid-template-columns: 1fr; gap: 18px; }
  .how-focus-intro h3, .how-focus-intro p, .how-capacity-intro h3, .how-capacity-intro p { grid-column: auto; }
  .how-program-list article { grid-template-columns: 1fr; gap: 12px; }
  .how-program-list h3, .how-program-list p { grid-column: auto; }
}