/* Block 05: alternating mobile steps with live, naturally wrapping text. */
.work-process picture { display: contents; }
.work-process picture > source,
.work-process__mobile-arrow,
.work-process__mobile-scale { display: none; }
@font-face { font-family: "IBM Plex Sans Mobile Process"; src: url("../assets/mobile/block-05-how-i-work/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Mobile Process"; src: url("../assets/mobile/block-05-how-i-work/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Mobile Process"; src: url("../assets/mobile/block-05-how-i-work/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@media (max-width: 767px) {
  .work-process { --process-unit: clamp(.923px,.2564102564vw,1.4px); max-width: none; height: auto; padding: calc(28 * var(--process-unit)) 6% calc(18 * var(--process-unit)); font-family: "IBM Plex Sans Mobile Process",sans-serif; background-size: 42px 42px; background-position: 0 0; }
  .work-process__eyebrow { position: static; font-size: calc(10 * var(--process-unit)); line-height: 1.3; letter-spacing: calc(1.5 * var(--process-unit)); }
  .work-process > h2 { position: static; margin-top: calc(7 * var(--process-unit)); font-size: calc(30 * var(--process-unit)); line-height: 1.02; letter-spacing: calc(-.65 * var(--process-unit)); }
  .work-process__intro { position: static; width: 68%; margin-top: calc(12 * var(--process-unit)); font-size: calc(13 * var(--process-unit)); line-height: 1.22; letter-spacing: calc(-.15 * var(--process-unit)); }
  .work-process__intro br, .work-process__face h3 br, .work-process__description br { display: none; }
  .work-process__note { left: auto; right: 4%; top: calc(121 * var(--process-unit)); width: 27%; height: auto; }
  .work-process__steps { position: relative; display: flex; flex-direction: column; gap: calc(8 * var(--process-unit)); margin-top: calc(20 * var(--process-unit)); }
  .work-process__step { position: relative; inset: auto; width: 56%; height: auto; }
  .work-process__step:nth-child(even) { align-self: flex-end; width: 54%; }
  .work-process__step::before { display: none; }
  .work-process__face { position: relative; inset: auto; padding: calc(12 * var(--process-unit)) calc(13 * var(--process-unit)); border-radius: calc(10 * var(--process-unit)); display: grid; grid-template-columns: 1fr auto; box-shadow: 0 calc(7 * var(--process-unit)) calc(14 * var(--process-unit)) #1730461a, inset 1px 1px 0 #ffffff40; }
  .work-process__step--03 .work-process__face { box-shadow: 0 calc(5 * var(--process-unit)) calc(17 * var(--process-unit)) #ff650033, inset 1px 1px 0 #ffffff40; }
  .work-process__number { position: static; width: calc(43 * var(--process-unit)); border-right: 1px solid #8397ac; font-size: calc(25 * var(--process-unit)); line-height: 1.1; letter-spacing: calc(-.4 * var(--process-unit)); }
  .work-process__step--03 .work-process__number { border-color: #ffffff80; }
  .work-process__icon { position: static; align-self: center; width: calc(25 * var(--process-unit)); height: calc(25 * var(--process-unit)); }
  .work-process__face h3 { position: static; grid-column: 1 / -1; margin-top: calc(9 * var(--process-unit)); font-size: calc(17 * var(--process-unit)); line-height: 1.15; letter-spacing: calc(-.3 * var(--process-unit)); white-space: normal; }
  .work-process .work-process__description { position: static; grid-column: 1 / -1; margin-top: calc(5 * var(--process-unit)); font-size: calc(12 * var(--process-unit)); line-height: 1.25; letter-spacing: calc(-.15 * var(--process-unit)); white-space: normal; }
  .work-process__label, .work-process__arrows { display: none; }
  .work-process__mobile-arrow { display: block; position: absolute; top: 54%; left: calc(100% + 7 * var(--process-unit)); width: calc(36 * var(--process-unit)); height: calc(54 * var(--process-unit)); object-fit: contain; }
  .work-process__step:nth-child(even) .work-process__mobile-arrow { left: auto; right: calc(100% + 7 * var(--process-unit)); transform: scaleX(-1); }
  .work-process__mobile-scale { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: calc(23 * var(--process-unit)) 0 0; padding: 0; list-style: none; gap: calc(4 * var(--process-unit)); color: #18304a; text-align: center; }
  .work-process__mobile-scale li { position: relative; }
  .work-process__mobile-scale li:not(:last-child)::after { content: ""; position: absolute; left: 72%; top: calc(8 * var(--process-unit)); width: 62%; border-top: 1px solid #8397ac; }
  .work-process__mobile-scale span { font-size: calc(13 * var(--process-unit)); line-height: 1.2; font-weight: 600; }
  .work-process__mobile-scale p { margin: calc(4 * var(--process-unit)) 0 0; font-size: calc(8 * var(--process-unit)); line-height: 1.2; text-transform: uppercase; }
  .work-process__footer { position: static; gap: 8px; margin-top: calc(27 * var(--process-unit)); }
  .work-process__footer img { width: calc(72 * var(--process-unit)); }
  .work-process__footer p { font-size: calc(7 * var(--process-unit)); line-height: 1.2; letter-spacing: calc(.15 * var(--process-unit)); }
}
@media (max-width: 767px) {
  /* Prepared CTA lettering is white; adapt its contrast to this light section. */
  .work-process__note { filter: invert(1) hue-rotate(180deg) saturate(1.6); }
}