/* Why CPL: service promises and client experience, based on Peter's answers. */
.inner-page--why .hero.why-page-hero {
  display: block;
}
.inner-page--why .why-page-hero > .container {
  width: 100%;
  min-width: 0;
}
.inner-page--why :is(.cpl-promises, .cpl-working, .cpl-costs) {
  padding: clamp(64px, 7vw, 104px) 0;
  background: #fff !important;
}
.inner-page--why .cpl-costs { background: #f7f5f1 !important; padding-bottom: 112px; }
.cpl-detail-heading { max-width: 860px; margin-bottom: 44px; }
.inner-page--why .cpl-detail-heading h2 {
  font-size: clamp(2.15rem, 4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 0 0 24px;
}
.cpl-detail-heading h2 span { color: var(--color-coral); }
.cpl-detail-heading > p { max-width: 760px; font-size: 1.12rem; line-height: 1.75; color: var(--color-text-muted); }
.cpl-promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cpl-promise { padding: clamp(26px, 2.5vw, 38px); border: 1px solid #dfe6ec; border-radius: 22px; background: #f7fbfd; }
.cpl-promise--lead { background: #0b1d63; color: #fff; border-color: #0b1d63; }
.cpl-detail-number { display: block; font-family: var(--font-heading); font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--color-coral); }
.cpl-promise-kicker { display: block; margin: 30px 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.cpl-promise h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.15; margin-bottom: 20px; }
.cpl-promise--lead h3 { color: #fff; }
.cpl-promise p, .cpl-promise li, .cpl-cost-grid p { font-size: 1rem; line-height: 1.75; }
.cpl-promise ul { padding-left: 20px; margin: 24px 0 0; }
.cpl-promise li + li { margin-top: 14px; }
.cpl-promise li::marker { color: var(--color-coral); }
.cpl-working { border-top: 1px solid #e7e9ef; }
.cpl-working-list { list-style: none; padding: 0; margin: 0; }
.cpl-working-list > li { display: grid; grid-template-columns: 80px minmax(190px, .7fr) minmax(0, 1.3fr); gap: 30px; padding: 38px 0; border-top: 1px solid #dfe6ec; }
.cpl-working-list h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.2; }
.cpl-working-list p { font-size: 1.06rem; line-height: 1.8; margin: 0; }
.cpl-working-list .cpl-working-outcome { border-left: 3px solid var(--color-coral); padding-left: 20px; margin-top: 24px; color: var(--color-text-muted); }
.cpl-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.cpl-cost-grid article { background: #fff; border-radius: 22px; padding: clamp(28px, 3vw, 44px); }
.cpl-cost-label { display: block; text-transform: uppercase; font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: #167797; margin-bottom: 18px; }
.cpl-cost-grid h3 { font-size: clamp(1.6rem, 2.3vw, 2rem); margin-bottom: 22px; }
.cpl-cost-terms { font-size: .85rem; color: var(--color-text-muted); margin-top: 24px; }
@media (max-width: 1000px) {
  .cpl-promise-grid { grid-template-columns: 1fr; }
  .cpl-promise { padding: 30px; }
  .cpl-promise-kicker { margin-top: 20px; }
  .cpl-working-list > li { grid-template-columns: 60px 1fr; gap: 18px; }
  .cpl-working-list > li > div { grid-column: 2; }
}
@media (max-width: 600px) {
  .cpl-detail-heading { margin-bottom: 30px; }
  .cpl-promise-grid, .cpl-cost-grid { grid-template-columns: 1fr; gap: 20px; }
  .cpl-promise { padding: 26px; }
  .cpl-detail-number { font-size: 2.7rem; }
  .cpl-working-list > li { grid-template-columns: 64px 1fr; padding: 30px 0; gap: 16px; }
  .cpl-working-list > li > div { grid-column: 1 / -1; }
  .cpl-working-list h3 { align-self: center; margin: 0; }
}