/* Myrtle Color Story (mck-home-who): ported from site/home/v2/style.css (WHO WE WORK WITH · Color Story, wb-).
   The active colour comes from each statement's data-color (set as --c by home-who.js). */
.mck-home-who { --display: "Sunset Serial", Georgia, serif; } /* Elementor containers set --display: flex */
.mck-home-who { --c: var(--yellow-soft); position: relative; background: var(--c); transition: background-color 1s var(--ease); padding-block: var(--section) 0; }
.mck-home-who .wb-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 110px); }
.mck-home-who .wb-side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: 110px 60px; }
.mck-home-who .wb-side .lead { margin-top: 24px; max-width: 40ch; }
.mck-home-who .wb-stage { position: relative; flex: 1; max-height: 380px; min-height: 220px; margin-top: 36px; }
.mck-home-who .wb-shape { position: absolute; left: 0; top: 50%; width: min(78%, 360px); max-height: 100%; object-fit: contain; object-position: left center; opacity: 0; transform: translateY(-50%) rotate(-24deg) scale(.6); transition: opacity .7s var(--ease), transform 1.1s var(--spring); }
.mck-home-who .wb-shape.is-on { opacity: 1; transform: translateY(-50%); }
.mck-home-who .wb-count { position: absolute; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 6px; font-family: var(--display); color: var(--ink); }
.mck-home-who .wb-count b { font-weight: 300; font-size: clamp(72px, 8vw, 128px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mck-home-who .wb-count span { font-size: 22px; color: var(--slate); }
.mck-home-who .wb-bars { display: flex; gap: 6px; margin-top: 26px; }
.mck-home-who .wb-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(18, 26, 33, .12); overflow: hidden; position: relative; }
.mck-home-who .wb-bars i::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.mck-home-who .wb-bars i.on::after { transform: none; }
.mck-home-who .wb-list { padding-block: 30vh 40vh; }
.mck-home-who .wb-list h3 { font-size: clamp(22px, 1.8vw, 27px); font-weight: 300; margin-bottom: 18vh; }
.mck-home-who .wb-item { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
.mck-home-who .wb-item .n { font: 500 13px var(--body); letter-spacing: .1em; color: var(--teal); }
.mck-home-who .wb-item p { margin-top: 16px; font: 300 clamp(28px, 2.9vw, 46px)/1.16 var(--display); letter-spacing: -.015em; color: var(--ink); opacity: var(--wb-dim, .2); transform: translateY(12px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.mck-home-who .wb-item.is-on p { opacity: 1; transform: none; }
.mck-home-who .wb-item .m-shape { display: none; }

@media (max-width: 1080px) {
  /* phones/tablets: one calm background, no color change while scrolling */
  .mck-home-who { background: var(--wb-m, var(--mist)); }
  .mck-home-who .wb-side { position: static; height: auto; padding-block: 0 24px; }
  .mck-home-who .wb-stage, .mck-home-who .wb-bars { display: none; }
  .mck-home-who .wb-list { padding-block: 24px 64px; }
  .mck-home-who .wb-list h3 { margin-bottom: 24px; }
  .mck-home-who .wb-item { min-height: 0; padding-block: 28px; border-top: 1px solid rgba(18, 26, 33, .1); display: grid; grid-template-columns: 1fr 64px; gap: 4px 20px; align-items: center; }
  .mck-home-who .wb-item .m-shape { display: block; grid-column: 2; grid-row: 1 / span 2; width: 64px; }
  .mck-home-who .wb-item p { opacity: 1; transform: none; font-size: clamp(22px, 4vw, 30px); }
  .mck-home-who .wb-grid { grid-template-columns: 1fr; }
}