/* Different compositions for the homepage's different stories. */
.framework-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.framework-intro .copy { max-width: 660px; margin: 24px auto 0; }
.framework-section .read-flow { position: relative; border: 0; --stage-gap: 38px; gap: var(--stage-gap); margin-top: 60px; }
.framework-section .stage:not(:last-child)::before { content: ''; position: absolute; top: 25px; left: 25px; width: calc(100% + var(--stage-gap)); height: 1px; background: #68847b; }
.framework-section .stage { position: relative; padding: 0; border: 0; }
.framework-section .stage > span { position: relative; z-index: 1; display: grid; place-items: center; width: 50px; height: 50px; background: #193d39; border: 1px solid #91a38e; border-radius: 50%; color: #e6d7b9; }
.framework-section .stage:last-child > span { background: #d3ddc0; color: #193d39; }
.framework-section .stage::after { display: none; }
.framework-section .stage h3 { margin-top: 24px; }
.commercial-layout { display: block; }
.commercial-layout > div:first-child { position: relative; padding-right: 40%; }
.commercial-layout h2 { font-size: clamp(40px, 4.8vw, 64px); }
.commercial-layout h2 br { display: none; }
.commercial-layout h2 em { display: block; }
.commercial-layout .copy { max-width: 620px; }
.commercial-layout .commercial-note { position: absolute; right: 0; top: 34px; width: 30%; margin: 0; border: 0; padding: 25px 0; border-top: 3px solid var(--accent); font: 400 26px/1.45 Georgia, serif; }
.commercial-layout .agreement-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 38px; padding-top: 30px; border-top: 1px solid #c9cebf; }
.commercial-layout .agreement-steps > div { display: block; border: 0; padding: 0; }
.commercial-layout .agreement-steps > div > span { display: block; margin-bottom: 18px; }
.commercial-layout .agreement-steps h3 { font-size: 21px; }
.approach-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 100px; align-items: center; }
.approach-intro { grid-column: 2; grid-row: 1; }
.approach-intro .copy { margin-top: 24px; }
.approach-section .principles { grid-column: 1; grid-row: 1; display: block; margin: 0; padding: 12px 32px; background: #eef0e6; border-radius: 4px; }
.approach-section .principle { display: grid; grid-template-columns: 135px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid #c8d1c0; }
.approach-section .principle:first-child { border: 0; }
.approach-section .principle h3 { margin: 0; font-size: 18px; }
.approach-section .principle p { font-size: 15px; }
.capabilities-intro { max-width: 760px; margin-bottom: 38px; }
.capabilities-intro .copy { max-width: 650px; margin-top: 22px; }
.capabilities-section .build-grid { display: block; margin: 0; counter-reset: capability; }
.capabilities-section .build-card { display: grid; grid-template-columns: 60px 1fr 1.1fr; gap: 30px; align-items: baseline; padding: 26px 0; }
.capabilities-section .build-card::before { counter-increment: capability; content: '0' counter(capability); font: 12px 'IBM Plex Mono', monospace; color: var(--blue); }
.capabilities-section .build-card h3 { margin: 0; }
@media (max-width: 940px) {
  .framework-section .read-flow { grid-template-columns: repeat(4, 1fr); --stage-gap: 22px; }
  .framework-section .stage h3 { font-size: 20px; }
  .approach-layout { gap: 38px; }
  .approach-section .principle { display: block; }
  .approach-section .principle h3 { margin-bottom: 10px; }
  .commercial-layout .agreement-steps { gap: 26px; }
}
@media (max-width: 700px) {
  .framework-intro { text-align: left; }
  .framework-section .read-flow { display: block; margin-top: 32px; }
  .framework-section .stage:not(:last-child)::before { left: 21px; top: 22px; width: 1px; height: 100%; }
  .framework-section .stage { position: relative; min-height: 110px; padding: 0 0 28px 68px; }
  .framework-section .stage > span { position: absolute; top: 0; left: 0; width: 44px; height: 44px; }
  .framework-section .stage h3 { margin: 0 0 10px; padding-top: 9px; }
  .framework-section .stage:last-child { padding-bottom: 0; }
  .commercial-layout > div:first-child { padding-right: 0; }
  .commercial-layout .commercial-note { position: static; width: auto; margin-top: 25px; font-size: 23px; padding: 22px 0 0; }
  .commercial-layout .agreement-steps { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .commercial-layout .agreement-steps > div { display: grid; grid-template-columns: 24px 1fr; gap: 18px; }
  .approach-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .approach-section .principles { padding: 0 24px; }
  .capabilities-section .build-card { grid-template-columns: 28px 1fr; gap: 12px; }
  .capabilities-section .build-card p { grid-column: 2; }
}