.work-steps { --section-padding-block: var(--space-16); background: var(--color-surface); overflow: clip; }
.work-steps__scene { position: relative; margin-block-start: 0.8125rem; }
.work-steps__wheel { --wheel-size: 40rem; position: absolute; z-index: 2; inset-inline-start: -25.4375rem; inset-block-start: 0; inline-size: var(--wheel-size); block-size: var(--wheel-size); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.work-steps__wheel[hidden] { display: none; }
.work-steps__sphere { display: block; inline-size: 100%; block-size: 100%; pointer-events: none; transform-origin: center; will-change: transform; }
.work-steps__wheel-number { position: absolute; z-index: 2; inset-inline-start: 50%; inset-block-start: 50%; opacity: 0; transform: translate(-50%, -50%); will-change: transform, opacity; }
.work-steps__wheel-number[aria-hidden="true"] { pointer-events: none; }

.work-steps__edge { position: absolute; z-index: 1; pointer-events: none; inset-block: 0; inset-inline-start: -5.4375rem; inline-size: 8.75rem; background: linear-gradient(90deg, var(--color-surface), transparent); }
.work-steps__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32.4375rem; align-items: center; gap: var(--space-12); padding-inline-end: 3.375rem; min-block-size: 40rem; }
.work-steps__panel[hidden] { display: none; }
.work-steps__copy { display: flex; align-items: center; gap: 2.375rem; padding-inline-start: 16.75rem; min-inline-size: 0; }
.work-steps__number { flex-shrink: 0; min-inline-size: 7.25rem; font-family: var(--font-heading); font-size: clamp(var(--fs-number-min), 4.444444vw, var(--fs-number-max)); font-weight: var(--font-weight-bold); line-height: 1.3; letter-spacing: -0.04em; color: var(--color-services-background); text-align: center; }
.work-steps__text { min-inline-size: 0; }
.work-steps__title { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: clamp(var(--fs-secondary-min), 2.5vw, var(--fs-secondary-max)); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: -0.02em; text-transform: uppercase; }
.work-steps__description { margin: 0; color: var(--color-case-description); font-size: var(--fs-body-large); line-height: var(--line-height-control); }
.work-steps__image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 519 / 640; object-fit: cover; border-radius: var(--radius-feature); }
.work-steps__navigation { display: flex; flex-wrap: wrap; gap: 0 var(--space-7); margin-block-start: var(--space-6); margin-inline-start: 8.4375rem; }
.work-steps__navigation[hidden] { display: none; }
.work-steps[data-steps-ready] .work-steps__panel { animation: whiteway-step-in var(--dur-panel) var(--ease-standard); }
@keyframes whiteway-step-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@media (width < 75rem) {
    .work-steps__panel { grid-template-columns: minmax(0, 1fr) 42%; padding-inline-end: 0; gap: var(--space-8); min-block-size: 32rem; }
    .work-steps__copy { padding-inline-start: 5rem; gap: var(--space-4); flex-wrap: wrap; }
    .work-steps__wheel { inset-inline-start: -34rem; }
    .work-steps__navigation { margin-inline-start: 0; }
}
@media (width < 48rem) {
    .work-steps { --section-padding-block: var(--space-8); }
    .work-steps__scene { margin-block-start: var(--space-5); }
    .work-steps__panel { grid-template-columns: minmax(0,1fr); min-block-size: 0; gap: var(--space-4); }
    .work-steps__copy { padding-inline-start: 0; gap: var(--space-3); flex-wrap: nowrap; min-block-size: 0; }
    .work-steps__number { min-inline-size: 3rem; font-size: var(--fs-heading-min); line-height: var(--line-height-heading); }
    .work-steps__description { font-size: var(--fs-body); }
    .work-steps__image { aspect-ratio: 16 / 10; max-block-size: 15rem; border-radius: var(--radius-content); }
    .work-steps__wheel, .work-steps__edge { display: none; }
    .work-steps__navigation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--space-2); margin-block-start: var(--space-3); }
    .work-steps__navigation[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .work-steps[data-steps-ready] .work-steps__panel { animation: none; } }