/* Option 2 for "How we work": light, colourful timeline and multi-tone icon rows */
.variant-b .fd:not(.fd--rest) { background: #f7f2fb; border-top: 1px solid #ece3f4; }
.variant-b .fd--rest { background: #fff; }

/* the steps become a timeline on a soft lilac band */
.variant-b .fd-band { background: linear-gradient(180deg, #f4ecfb 0%, #ece0f7 100%); color: var(--ink); padding: 72px 64px 84px; }
.variant-b .fd-band .fd-block-label { color: var(--rp); }
.variant-b .fd-band .fd-block-label::after { background: rgba(89, 30, 117, .2); }
.variant-b .fd-steps { position: relative; padding-top: 34px; }
.variant-b .fd-steps::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 9px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #591E75, #8b4fa8 55%, #c79be0);
}
.variant-b .fd-band .fd-flip:not(.fd-flip--out) { position: relative; }
.variant-b .fd-band .fd-flip:not(.fd-flip--out)::before {
  content: ''; position: absolute; top: -34px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: #fff; border: 4px solid var(--rp); box-shadow: 0 0 0 5px rgba(89, 30, 117, .14); z-index: 2;
}
.variant-b .fd-band .fd-flip:not(.fd-flip--out):not(:last-child)::after { display: none; }
.variant-b .fd-band .fd-flip:not(.fd-flip--out) .fd-flip-front {
  background: #fff; border: 1px solid #dcc9ec; border-top: 4px solid var(--rp); box-shadow: 0 8px 22px rgba(89, 30, 117, .1);
}
.variant-b .fd-band .fd-flip:not(.fd-flip--out):hover .fd-flip-front { background: #fff; border-color: var(--rp); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(89, 30, 117, .18); }
.variant-b .fd-step-icon { color: var(--rp); }
.variant-b.home .fd-band .fd-flip:not(.fd-flip--out) .fd-flip-title { color: var(--rp); }
.variant-b .fd-band .fd-flip:not(.fd-flip--out) .fd-flip-front::after { background: linear-gradient(135deg, #cfb2e6 0 50%, #ece0f7 50% 100%); }
.variant-b .fd-band .fd-flip:not(.fd-flip--out) .fd-flip-back { background: linear-gradient(145deg, #6d2a8d, #4b1765); border-color: transparent; }
.variant-b.home .fd-band .fd-flip:not(.fd-flip--out) .fd-flip-text { color: #fff; }
.variant-b .fd-band .fd-flip:not(.fd-flip--out) .fd-flip-back::after { background: linear-gradient(135deg, #b98fd6 0 50%, #ece0f7 50% 100%); }

/* outcome rows: white cards with multi-tone icon chips */
.variant-b .fd-rows { background: transparent; border: 0; overflow: visible; display: grid; gap: 12px; }
.variant-b .fd-row { background: #fff !important; border: 1px solid #e6dcef; border-radius: 10px; transition: box-shadow .25s, border-color .25s, transform .25s; }
.variant-b .fd-row:hover { border-color: #c9a9e0; box-shadow: 0 8px 22px rgba(89, 30, 117, .1); transform: translateY(-1px); }
.variant-b .fd-row.open { border-color: var(--rp); box-shadow: 0 10px 26px rgba(89, 30, 117, .14); }
.variant-b .fd-row-icon { width: 46px; height: 46px; border-radius: 12px; }
.variant-b .fd-row:nth-child(1) .fd-row-icon { background: #f3e3fb; color: #7a1fa8; }
.variant-b .fd-row:nth-child(2) .fd-row-icon { background: #e3e8fb; color: #3347b3; }
.variant-b .fd-row:nth-child(3) .fd-row-icon { background: #e2f1f6; color: #17708a; }
.variant-b .fd-row:nth-child(4) .fd-row-icon { background: #e4f3e9; color: #1f7a45; }
.variant-b .fd-row:nth-child(5) .fd-row-icon { background: #f6e8e0; color: #a4501c; }
.variant-b .fd-row:nth-child(6) .fd-row-icon { background: #fbe4ec; color: #b0235a; }
.variant-b .fd-row:nth-child(7) .fd-row-icon { background: #ece1f6; color: var(--rp); }
.variant-b .fd-row-head:hover .fd-row-icon, .variant-b .fd-row.open .fd-row-icon { background: var(--rp); color: #fff; }
.variant-b .fd-row-tag { font-weight: 600; }
.variant-b .fd-row-head { padding: 18px 24px; }
.variant-b .fd-row-body-inner { padding-left: calc(24px + 46px + 22px + 170px + 22px); }
.variant-b .fd-link { color: var(--rp); }

@media (max-width: 900px) {
  .variant-b .fd-band { padding: 52px 24px 56px; }
  .variant-b .fd-steps { padding-top: 0; }
  .variant-b .fd-steps::before, .variant-b .fd-band .fd-flip:not(.fd-flip--out)::before { display: none; }
}
@media (max-width: 700px) { .variant-b .fd-row-body-inner { padding-left: 18px; } }

/* One shade across the whole How we work section */
.variant-b .fd, .variant-b .fd--rest, .variant-b .fd-band { background: #f7f2fb; }
.variant-b .fd--rest { border-top: 0; }
.variant-b .fd-band { background-image: none; }
.variant-b .fd:not(.fd--rest) { padding-bottom: 56px; }
.variant-b .fd-band { padding-top: 24px; padding-bottom: 48px; }
.variant-b .fd--rest { padding-top: 56px; }

/* Swap: How we work is white, and the section above it (Our impact) takes the light purple */
.variant-b .fd, .variant-b .fd--rest, .variant-b .fd-band { background: #fff; background-image: none; }
.variant-b .fd:not(.fd--rest) { border-top: 0; }
.variant-b .proof { background: #f7f2fb; }
.variant-b .fd:not(.fd--rest) { background: #fff; background-image: none; }

/* Knowledge layer: light purple, so it differs from the white How we work section above it */
.variant-b .kl { background: #f7f2fb; border-top: 0; }
.variant-b .kl .fd-data-item, .variant-b .kl .kl-offer { background: #fff; }