.programs-page .site-header { background: var(--paper); }
.programs-page main { display: flex; align-items: flex-start; padding: 165px 0 55px; }
.pipeline-section { width: 100%; margin: 0 var(--story-inset); }
.pipeline-section h1 { font-size: clamp(30px, 3vw, 46px); font-weight: 400; line-height: 1.2; letter-spacing: -.023em; margin: 0 0 65px; }
.pipeline { width: 100%; border-collapse: collapse; table-layout: fixed; }
.area-column { width: 39%; }
.phase-column { width: 15.25%; }
.pipeline thead th { font-size: 18px; color: var(--muted); padding: 0 10px 22px; font-weight: 400; text-align: center; border-bottom: 1px solid var(--hairline); }
.pipeline thead th:first-child { padding-left: 0; text-align: left; }
.pipeline thead th:nth-child(2) { color: var(--ink); }
.pipeline tbody th { padding: 38px 25px 38px 0; font-size: clamp(23px, 2.2vw, 31px); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; text-align: left; }
.pipeline tbody tr { border-bottom: 1px solid var(--hairline); }
.pipeline td { position: relative; text-align: center; padding: 0; }
.pipeline td::before { content: ''; position: absolute; height: 1px; left: 0; right: 0; top: 50%; background: #deded9; }
.pipeline td:last-child::before { right: 10px; }
.current-stage { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: #454744; }
.current-stage::after { content: ""; position: absolute; width: 6px; height: 6px; right: -3px; top: -2px; border-radius: 50%; background: #454744; }
.programs-page .site-footer { padding: 22px 0; font-size: 16px; }
@media (max-width: 1000px) and (min-width: 701px) {
  .pipeline-section { margin-inline: 5.5vw; }
  .area-column { width: 37%; }
  .phase-column { width: 15.75%; }
  .pipeline tbody th { font-size: 25px; }
}
@media (max-width: 700px) {
  .programs-page main { padding-top: 125px; padding-bottom: 35px; }
  .pipeline-section { margin-inline: 28px; }
  .pipeline-section h1 { font-size: 30px; margin-bottom: 36px; max-width: 520px; }
  .wide-break { display: none; }
  .pipeline, .pipeline tbody { display: block; }
  .pipeline colgroup { display: none; }
  .pipeline thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pipeline tbody tr { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 25px 0 30px; border-top: 1px solid var(--hairline); border-bottom: 0; }
  .pipeline tbody tr:last-child { border-bottom: 1px solid var(--hairline); }
  .pipeline tbody th { grid-column: 1 / -1; padding: 0 0 25px; font-size: 26px; max-width: 360px; }
  .pipeline td { min-height: 62px; padding-top: 29px; }
  .pipeline td::after { content: attr(data-phase); position: absolute; top: 0; left: 0; right: 0; font-size: 14px; line-height: 1; color: var(--muted); }
  .pipeline td.current::after { color: var(--ink); }
  .pipeline td::before { top: 45px; }
  .current-stage { top: 45px; }
  .programs-page .site-footer { font-size: 14px; padding: 18px 0; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .programs-page main { padding-top: 160px; padding-bottom: 28px; }
  .pipeline-section h1 { margin-bottom: 35px; font-size: 33px; }
  .pipeline tbody th { padding-block: 27px; }
}
@media (max-height: 700px) and (max-width: 700px) {
  .programs-page main { padding-top: 120px; padding-bottom: 20px; }
  .pipeline-section h1 { font-size: 24px; margin-bottom: 24px; }
  .pipeline tbody tr { padding: 15px 0 18px; }
  .pipeline tbody th { font-size: 22px; padding-bottom: 12px; }
  .pipeline td { min-height: 50px; }
  .programs-page .site-footer { padding: 14px 0; }
}
