/* Five connected implementation phases; all text stays ordinary selectable HTML. */
.pv-puzzle { --puzzle-start: #173449; --puzzle-end: #255968; }
.pv-puzzle .pv-framework__heading { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 30px; }
.pv-puzzle .pv-framework__heading span { color: #b8d4d1; font-size: 18px; }
.pv-puzzle .pv-framework__heading strong { margin: 0; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; }
.pv-process .pv-puzzle__pieces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 0; margin: 0 !important; padding: 0 !important; list-style: none; }
.pv-puzzle__pieces > li { position: relative; min-width: 0; padding: 0; }
.pv-puzzle__pieces > li:nth-child(2) { --puzzle-start: #214456; --puzzle-end: #2a666d; }
.pv-puzzle__pieces > li:nth-child(3) { --puzzle-start: #255361; --puzzle-end: #2d7979; }
.pv-puzzle__pieces > li:nth-child(4) { --puzzle-start: #24636a; --puzzle-end: #2e7a7b; }
.pv-puzzle__pieces > li:nth-child(5) { --puzzle-start: #256f72; --puzzle-end: #2f7c77; }
.pv-puzzle__piece { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 148px; gap: 12px; padding: 18px 23px 20px 31px; }
.pv-puzzle__shape { position: absolute; z-index: 0; top: 0; left: 0; width: 109.09091%; max-width: none; height: 100%; overflow: visible; filter: drop-shadow(0 8px 12px #00000016); }
.pv-puzzle__pieces > li:last-child .pv-puzzle__shape { width: 100%; }
.pv-puzzle__shape path,
.pv-puzzle__mobile-shape path { stroke: #b7d2c7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pv-puzzle__shade-start { stop-color: var(--puzzle-start); }
.pv-puzzle__shade-end { stop-color: var(--puzzle-end); }
.pv-puzzle__mobile-shape { display: none; }
.pv-puzzle__piece .pv-process__number { position: relative; z-index: 1; color: #cbe5da; font: 500 30px/1 var(--font-display); letter-spacing: -.06em; }
.pv-page .pv-puzzle__piece h3 { position: relative; z-index: 1; margin: 0; min-height: 2.5em; color: #fff; font-size: clamp(18px, 1.65vw, 22px); line-height: 1.25; font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.pv-page .pv-puzzle__description { margin: 25px 0 0; padding: 0 23px 0 12px; color: #d0dedf; font-size: 14px; line-height: 1.75; scroll-margin-top: 120px; }
.pv-puzzle .pv-framework__foundation { margin-top: 40px; }

@media (max-width: 1100px) {
  .pv-puzzle__piece { min-height: 160px; padding-inline: 28px 17px; }
  .pv-page .pv-puzzle__piece h3 { font-size: 18px; }
  .pv-page .pv-puzzle__description { padding-right: 17px; font-size: 14px; }
}

/* At smaller widths the same five pieces interlock vertically, without horizontal scrolling. */
@media (max-width: 960px) {
  .pv-puzzle .pv-framework__heading { flex-wrap: wrap; gap: 5px 12px; margin-bottom: 30px; }
  .pv-process .pv-puzzle__pieces { display: block; max-width: 600px; margin-inline: auto !important; }
  .pv-puzzle__pieces > li { padding: 32px 35px 35px; }
  .pv-puzzle__pieces > li:first-child { padding-top: 30px; }
  .pv-puzzle__pieces > li:last-child { padding-bottom: 28px; }
  .pv-puzzle__shape { display: none; }
  .pv-puzzle__mobile-shape { position: absolute; z-index: 0; top: 0; left: 0; display: block; width: 100%; max-width: none; height: 109.09091%; overflow: visible; }
  .pv-puzzle__pieces > li:last-child .pv-puzzle__mobile-shape { height: 100%; }
  .pv-puzzle__piece { display: grid; grid-template-columns: 43px minmax(0, 1fr); align-items: center; justify-content: start; min-height: 0; gap: 20px; padding: 0; }
  .pv-puzzle__piece .pv-process__number { font-size: 34px; }
  .pv-page .pv-puzzle__piece h3 { min-height: 0; color: #fff; font-size: 22px; text-wrap: initial; overflow-wrap: normal; }
  .pv-page .pv-puzzle__description { position: relative; z-index: 1; margin: 14px 0 0; padding: 0 0 0 63px; color: #e6eeeb; font-size: 16px; line-height: 1.65; }
  .pv-puzzle .pv-framework__foundation { margin-top: 36px; }
}
@media (max-width: 480px) {
  .pv-puzzle .pv-framework__heading { display: block; text-align: left; }
  .pv-puzzle .pv-framework__heading span { font-size: 18px; }
  .pv-puzzle .pv-framework__heading strong { display: block; margin-top: 5px; font-size: 36px; }
  .pv-puzzle__pieces > li,
  .pv-puzzle__pieces > li:first-child { padding: 30px 24px 30px; }
  .pv-puzzle__piece { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .pv-puzzle__piece .pv-process__number { font-size: 29px; }
  .pv-page .pv-puzzle__piece h3 { font-size: 20px; line-height: 1.3; }
  .pv-page .pv-puzzle__description { padding-left: 0; margin-top: 15px; font-size: 15px; line-height: 1.7; }
}