/* Block 05 — depth is CSS only; live text stays on flat front faces. */
.work-process {
  --process-unit: min(0.0598086124402vw, 1px);
  position: relative; isolation: isolate; width: 100%; max-width: calc(1672 * var(--process-unit)); height: calc(941 * var(--process-unit)); margin-inline: auto;
  color: #111; background-color: #f3f8fb;
  background-image: linear-gradient(#e6edf37a calc(1 * var(--process-unit)), transparent calc(1 * var(--process-unit))), linear-gradient(90deg, #e6edf37a calc(1 * var(--process-unit)), transparent calc(1 * var(--process-unit)));
  background-size: calc(50 * var(--process-unit)) calc(49 * var(--process-unit)); background-position: 0 calc(4 * var(--process-unit)), calc(24 * var(--process-unit)) 0;
}
.work-process__eyebrow { position: absolute; left: calc(57 * var(--process-unit)); top: calc(43 * var(--process-unit)); margin: 0; color: #506078; font-size: calc(26 * var(--process-unit)); line-height: calc(32 * var(--process-unit)); letter-spacing: calc(2 * var(--process-unit)); text-transform: uppercase; font-weight: 600; }
.work-process > h2 { position: absolute; left: calc(54 * var(--process-unit)); top: calc(88 * var(--process-unit)); margin: 0; font-size: calc(82 * var(--process-unit)); line-height: calc(74 * var(--process-unit)); letter-spacing: calc(-2 * var(--process-unit)); font-weight: 700; }
.work-process__intro { position: absolute; left: calc(58 * var(--process-unit)); top: calc(255 * var(--process-unit)); margin: 0; color: #506078; font-size: calc(34 * var(--process-unit)); line-height: calc(42 * var(--process-unit)); letter-spacing: calc(-.3 * var(--process-unit)); }
.work-process__note { position: absolute; left: calc(1288 * var(--process-unit)); top: calc(1 * var(--process-unit)); width: calc(310 * var(--process-unit)); height: auto; }
.work-process__steps { margin: 0; padding: 0; list-style: none; }
.work-process__step {
  position: absolute; width: var(--step-width); height: var(--step-height); left: var(--step-left); top: var(--step-top);
  --step-surface: linear-gradient(120deg, #ffffff, #e9f1f6);
  --step-side: linear-gradient(90deg, #dce6ec, #a7b7c1);
  --step-border: #d7e2ea; --step-text: #111; --step-secondary: #506078;
}
.work-process__step::before { content: ""; position: absolute; right: calc(-19 * var(--process-unit)); top: calc(7 * var(--process-unit)); bottom: calc(4 * var(--process-unit)); width: calc(28 * var(--process-unit)); border-radius: 0 calc(14 * var(--process-unit)) calc(12 * var(--process-unit)) 0; background: var(--step-side); transform: skewY(20deg); transform-origin: left center; }
.work-process__face { position: absolute; inset: 0; border: calc(1 * var(--process-unit)) solid var(--step-border); border-radius: calc(15 * var(--process-unit)); background: var(--step-surface); color: var(--step-text); box-shadow: 0 calc(10 * var(--process-unit)) calc(12 * var(--process-unit)) calc(-8 * var(--process-unit)) #16242f55, inset calc(1 * var(--process-unit)) calc(1 * var(--process-unit)) 0 #ffffff40; }
.work-process__step--01 { --step-left: calc(48 * var(--process-unit)); --step-top: calc(508 * var(--process-unit)); --step-width: calc(308 * var(--process-unit)); --step-height: calc(287 * var(--process-unit)); --top-padding: calc(33 * var(--process-unit)); --title-top: calc(108 * var(--process-unit)); --description-top: calc(202 * var(--process-unit)); }
.work-process__step--02 { --step-left: calc(374 * var(--process-unit)); --step-top: calc(447 * var(--process-unit)); --step-width: calc(301 * var(--process-unit)); --step-height: calc(334 * var(--process-unit)); --top-padding: calc(39 * var(--process-unit)); --title-top: calc(116 * var(--process-unit)); --description-top: calc(220 * var(--process-unit)); }
.work-process__step--03 { --step-left: calc(688 * var(--process-unit)); --step-top: calc(385 * var(--process-unit)); --step-width: calc(305 * var(--process-unit)); --step-height: calc(375 * var(--process-unit)); --top-padding: calc(43 * var(--process-unit)); --title-top: calc(129 * var(--process-unit)); --description-top: calc(190 * var(--process-unit)); --step-surface: linear-gradient(120deg, #ff7000, #ff5900); --step-side: linear-gradient(90deg, #d64300, #ed6d18); --step-border: #ff822f; --step-text: #fff; --step-secondary: #fff; }
.work-process__step--04 { --step-left: calc(1007 * var(--process-unit)); --step-top: calc(311 * var(--process-unit)); --step-width: calc(301 * var(--process-unit)); --step-height: calc(422 * var(--process-unit)); --top-padding: calc(47 * var(--process-unit)); --title-top: calc(133 * var(--process-unit)); --description-top: calc(203 * var(--process-unit)); }
.work-process__step--05 { --step-left: calc(1325 * var(--process-unit)); --step-top: calc(219 * var(--process-unit)); --step-width: calc(306 * var(--process-unit)); --step-height: calc(499 * var(--process-unit)); --top-padding: calc(47 * var(--process-unit)); --title-top: calc(130 * var(--process-unit)); --description-top: calc(202 * var(--process-unit)); }
.work-process__step--02, .work-process__step--04 { --step-surface: linear-gradient(135deg, #303c44, #151e25 55%, #263239); --step-side: linear-gradient(90deg, #111c22, #46555e); --step-border: #65747e55; --step-text: #fff; --step-secondary: #eef2f5; }
.work-process__step--05::before { right: auto; left: calc(-20 * var(--process-unit)); transform: skewY(-32deg); transform-origin: right center; background: linear-gradient(90deg, #e9f0f4, #b8c7d1); }
.work-process__number { position: absolute; left: calc(34 * var(--process-unit)); top: var(--top-padding); font-size: calc(48 * var(--process-unit)); line-height: calc(54 * var(--process-unit)); letter-spacing: calc(-1 * var(--process-unit)); font-weight: 700; }
.work-process__icon { position: absolute; right: calc(35 * var(--process-unit)); top: calc(var(--top-padding) + calc(5 * var(--process-unit))); width: calc(52 * var(--process-unit)); height: calc(52 * var(--process-unit)); }
.work-process__face h3 { position: absolute; left: calc(34 * var(--process-unit)); top: var(--title-top); margin: 0; font-size: calc(38 * var(--process-unit)); line-height: calc(40 * var(--process-unit)); font-weight: 700; letter-spacing: calc(-.8 * var(--process-unit)); white-space: nowrap; }
.work-process__description { position: absolute; left: calc(34 * var(--process-unit)); right: calc(14 * var(--process-unit)); top: var(--description-top); margin: 0; color: var(--step-secondary); font-size: calc(26 * var(--process-unit)); line-height: calc(34 * var(--process-unit)); letter-spacing: calc(-.2 * var(--process-unit)); white-space: nowrap; }
.work-process__step--01 .work-process__description { font-size: calc(22.5 * var(--process-unit)); line-height: calc(30 * var(--process-unit)); }
.work-process__step--02 .work-process__description { font-size: calc(25 * var(--process-unit)); line-height: calc(32 * var(--process-unit)); }
.work-process__step--05 .work-process__description { font-size: calc(28 * var(--process-unit)); line-height: calc(35 * var(--process-unit)); }
.work-process__label { position: absolute; left: 0; right: 0; top: calc(100% + calc(25 * var(--process-unit))); margin: 0; color: #111c2d; font-size: calc(21 * var(--process-unit)); line-height: calc(26 * var(--process-unit)); font-weight: 600; text-transform: uppercase; text-align: center; white-space: nowrap; }
.work-process__step--03 .work-process__label { top: calc(100% + calc(31 * var(--process-unit))); }
.work-process__arrows { position: absolute; inset: 0; pointer-events: none; }
.work-process__arrow { position: absolute; width: calc(102 * var(--process-unit)); height: calc(66 * var(--process-unit)); }
.work-process__arrow--01 { left: calc(245 * var(--process-unit)); top: calc(433 * var(--process-unit)); }
.work-process__arrow--02 { left: calc(556 * var(--process-unit)); top: calc(371 * var(--process-unit)); }
.work-process__arrow--03 { left: calc(874 * var(--process-unit)); top: calc(307 * var(--process-unit)); }
.work-process__arrow--04 { left: calc(1184 * var(--process-unit)); top: calc(230 * var(--process-unit)); }
.work-process__arrow--05 { left: calc(1476 * var(--process-unit)); top: calc(142 * var(--process-unit)); }
.work-process__footer { position: absolute; left: calc(48 * var(--process-unit)); right: calc(48 * var(--process-unit)); top: calc(883 * var(--process-unit)); display: flex; align-items: center; justify-content: space-between; }
.work-process__footer img { width: calc(192 * var(--process-unit)); height: auto; }
.work-process__footer p { margin: 0; color: #506078; font-size: calc(21 * var(--process-unit)); line-height: calc(26 * var(--process-unit)); letter-spacing: calc(3 * var(--process-unit)); }

