.services-staircase {
     position: relative;
     overflow: hidden;
     padding: 50px 0 50px;
     background: #f8f3ef;
     color: #06254b;
     background-image: url(../images/why-bg.jpg);
     background-position: right;
     background-repeat: no-repeat;
     background-size: cover;
 }

 .services-staircase .dot-pattern.top {
     top: 208px;
     right: 0;
     left: 16%;
 }

 .services-staircase .dot-pattern {
     position: absolute;
     width: 130px;
     height: 130px;
     z-index: 2;
     background-image: radial-gradient(#545855 1.5px, transparent 1.5px);
     background-size: 14px 14px;
     background-repeat: repeat;
     opacity: 0.7;
 }

 .services-staircase::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0px;
     background: linear-gradient(0deg, rgb(233 239 255 / 31%) 0%, rgb(233 239 255 / 91%) 35%, rgb(233 239 255 / 0%) 100%);
 }

 .services-staircase .container {
     position: relative;
     z-index: 5;
 }

 .services-staircase .services-main-layout {
     display: grid;
     grid-template-columns: 32% 55%;
     align-items: center;
     min-height: 720px;
 }


 .services-staircase .services-intro {
     position: relative;
     z-index: 10;
     padding-right: 35px;
 }

 .services-staircase .services-intro .stair-label {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 12px;
     margin-bottom: 22px;
     color: #012836;
     font-size: 13px;
     font-weight: 800;
     letter-spacing: 3px;
 }

 .services-staircase .services-intro .stair-label span {
     display: block;
     width: 45px;
     height: 2px;
     background: #012836;
 }

 .services-staircase .services-intro h2 {
     margin: 0;
     font-size: 49px;
     line-height: 1.08;
     letter-spacing: -1.8px;
     font-weight: 700;
     color: #012836;
 }

 .services-staircase .services-intro h2 strong {
     display: block;
     margin-top: 4px;
     font-weight: 700;
     background: -webkit-linear-gradient(#ffe26b, #604403);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-style: normal;
 }

 .services-staircase .services-description {
     max-width: 480px;
     margin: 25px 0 35px;
     color: #52647a;
     font-size: 16px;
     line-height: 1.75;
 }

 .services-staircase .service-highlight {
     display: flex;
     align-items: center;
     gap: 20px;
     max-width: 430px;
     margin-bottom: 23px;
 }

 .services-staircase .highlight-icon {
     flex: 0 0 64px;
     width: 64px;
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: linear-gradient(0deg, rgb(145 116 0) 0%, rgb(218 172 66) 35%, #f0f08a 100%);
     color: #0e0d0d;
     border: 1px solid #fff;
     font-size: 24px;
     box-shadow:
         0 8px 20px rgba(6, 37, 75, .06);
 }

 .services-staircase .service-highlight h3 {
     margin: 0 0 5px;
     color: #002f41;
     font-size: 18px;
     font-weight: 700;
 }

 .services-staircase .service-highlight p {
     margin: 0;
     color: #607086;
     font-size: 14px;
     line-height: 1.5;
 }

 .services-staircase .services-btn {
     width: 260px;
     height: 56px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 8px 0 28px;
     margin-top: 28px;
     border-radius: 50px;
     background: #023244;
     color: #ffffff;
     text-decoration: none;
     font-size: 14px;
     font-weight: 700;
     transition: .35s ease;
 }

 .services-staircase .services-btn b {
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: #ffffff;
     color: #f4511e;
     font-size: 22px;
     transition: .35s ease;
 }

 .services-staircase .services-btn:hover {
     color: #ffffff;
     transform: translateY(-3px);
     box-shadow:
         0 12px 25px rgba(6, 45, 91, .2);
 }

 .services-staircase .services-btn:hover b {
     transform: translateX(4px);
 }

 .services-staircase .staircase-area {
     position: relative;
     width: 100%;
     max-width: 760px;
     height: 700px;
     margin: 0 auto;
 }

 .services-staircase .stair-block {
     --step-width: 578px;
     --step-height: 105px;
     --top-depth: 51px;
     --side-depth: 24px;
     position: absolute;
     width: var(--step-width);
     height: var(--step-height);
     perspective: 1000px;
     transition:
         transform .45s cubic-bezier(.2, .8, .2, 1);
 }


 .services-staircase .stair-front {
     position: relative;
     width: 100%;
     height: 100%;
     display: grid;
     grid-template-columns: 50px 1fr 60px;
     align-items: center;
     padding: 0 28px;
     box-sizing: border-box;
     border-radius: 2px;
     box-shadow:
         0 18px 25px rgba(6, 37, 75, .16);
     z-index: 3;
 }

 .services-staircase .stair-front::before {
     content: "";
     position: absolute;
     left: 0;
     top: -24px;
     width: calc(100% + var(--side-depth));
     height: 25px;
     background: inherit;
     clip-path: polygon(0 100%, 12% 0, 100% 0, 96% 100%);
     filter: brightness(1.12);
     z-index: -1;
 }

 .services-staircase .stair-front::after {
     content: "";
     position: absolute;
     top: calc(var(--top-depth) * -1);
     right: calc(var(--side-depth) * -1);
     width: var(--side-depth);
     height: calc(100% + var(--top-depth));
     background: #031b38;
     clip-path: polygon(0 var(--top-depth), 210% 0, 141% 77%, 0 100%);
     z-index: -2;
 }


 .services-staircase .stair-front::after {
     content: "";
     position: absolute;
     top: calc(var(--top-depth) * -1);
     right: calc(var(--side-depth) * -1);
     width: var(--side-depth);
     height: calc(100% + var(--top-depth));
     background: #031b38;
     clip-path:
         polygon(0 var(--top-depth),
             217% 0,
             128% 68%,
             0 100%);
     z-index: -2;
 }

 .services-staircase .stair-01 .stair-front,
 .services-staircase .stair-03 .stair-front,
 .services-staircase .stair-05 .stair-front {
     background: #002f41;
     color: #ffffff;
 }

 .services-staircase .stair-02 .stair-front,
 .services-staircase .stair-04 .stair-front {
     background: #ffffff;
     color: #062d5b;
 }

 .services-staircase .stair-02 .stair-front::after,
 .services-staircase .stair-04 .stair-front::after {
     background: #cfc9c6;
 }

 .services-staircase .stair-01 {
     left: -3%;
     bottom: 35px;
     z-index: 1;
 }

 .services-staircase .stair-02 {
     left: 9%;
     bottom: 160px;
     z-index: 2;
 }

 .services-staircase .stair-03 {
     left: 21%;
     bottom: 285px;
     z-index: 3;
 }

 .services-staircase .stair-04 {
     left: 33%;
     bottom: 410px;
     z-index: 4;
 }

 .services-staircase .stair-05 {
     left: 45%;
     bottom: 535px;
     z-index: 5;
 }

 .services-staircase .stair-number {
     font-size: 32px;
     font-weight: 700;
     padding-right: 18px;
     border-right:
         1px solid rgba(255, 255, 255, .3);
 }


 .services-staircase .stair-02 .stair-number,
 .services-staircase .stair-04 .stair-number {
     border-color:
         rgba(6, 37, 75, .2);
 }

 .services-staircase .stair-info {
     padding-left: 24px;
 }

 .services-staircase .stair-info h3 {
     margin: 0;
     font-size: 20px;
     font-weight: 600;
     letter-spacing: -.5px;
     margin-bottom: 8px;
 }

 .services-staircase .stair-03 h3,
 .services-staircase .stair-01 h3,
 .services-staircase .stair-05 h3 {
     color: #eae6ad;
 }

 .services-staircase .stair-info p {
     font-size: 15px;
 }


 .services-staircase .stair-icon {
     width: 46px;
     height: 46px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #cca917;
     border-radius: 50%;
     color: #a68413;
     font-size: 21px;
     transition: .35s ease;
 }

 .services-staircase .stair-finish {
     position: absolute;
     right: -1%;
     top: 0;
     width: 300px;
     height: 72px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 25px;
     box-sizing: border-box;
     background: #ff4f1f;
     color: #ffffff;
     z-index: 20;
     box-shadow:
         12px 15px 0 rgba(6, 37, 75, .12),
         0 20px 30px rgba(6, 37, 75, .16);
 }

 .services-staircase .stair-finish::before {
     content: "";
     position: absolute;
     top: -17px;
     left: 0;
     width: 105%;
     height: 17px;
     background: #ff7047;
     clip-path:
         polygon(0 100%,
             5% 0,
             100% 0,
             95% 100%);
 }

 .services-staircase .stair-finish::after {
     content: "";
     position: absolute;
     top: 0;
     right: -15px;
     width: 15px;
     height: 72px;
     background: #d93813;
     clip-path:
         polygon(0 0,
             100% 6%,
             100% 94%,
             0 100%);
 }

 .services-staircase .stair-finish span {
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
     line-height: 1.5;
 }


 .services-staircase .stair-finish b {
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid #ffffff;
     border-radius: 50%;
     font-size: 20px;
 }


 .services-staircase .stair-growth-arrow {
     position: absolute;
     right: 35px;
     bottom: 35px;
     width: 170px;
     height: 280px;
     border-right: 5px solid #002e41;
     border-top: 5px solid transparent;
     border-radius: 0 100% 0 0;
     transform: rotate(39deg);
     transform-origin: bottom right;
     z-index: 0;
 }

 .services-staircase .stair-growth-arrow::after {
     content: "";
     position: absolute;
     right: 55px;
     top: 49px;
     width: 0;
     height: 0;
     border-left: 12px solid #002e41;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
     transform: rotate(-18deg);
 }

 .services-staircase .stair-tagline {
     position: absolute;
     right: 0;
     bottom: 55px;
     width: 190px;
     transform: rotate(-7deg);
     color: #88909b;
     font-size: 19px;
     font-style: italic;
     line-height: 1.25;
     z-index: 2;
 }

 .services-staircase .stair-tagline span,
 .services-staircase .stair-tagline strong {
     display: block;
 }

 .services-staircase .stair-tagline strong {
     color: #88909b;
     font-weight: 500;
 }

 .services-staircase .stair-tagline::after {
     content: "";
     display: block;
     width: 110px;
     height: 2px;
     margin-top: 8px;
     background: #f4511e;
     transform:
         rotate(-3deg);
 }

 .services-staircase .stair-chart {
     position: absolute;
     right: 0;
     bottom: 0;
     display: flex;
     align-items: flex-end;
     gap: 5px;
     z-index: 2;
 }

 .services-staircase .stair-chart span {
     display: block;
     width: 7px;
     background: #f5b323;
     position: relative;
 }

 .services-staircase .stair-chart span::after {
     content: "";
     position: absolute;
     top: -5px;
     left: -2px;
     width: 11px;
     height: 2px;
     background: #f5b323;
 }

 .services-staircase .stair-chart span:nth-child(1) {
     height: 18px;
 }

 .services-staircase .stair-chart span:nth-child(2) {
     height: 32px;
 }

 .services-staircase .stair-chart span:nth-child(3) {
     height: 25px;
 }

 .services-staircase .stair-chart span:nth-child(4) {
     height: 48px;
 }

 .services-staircase .stair-chart span:nth-child(5) {
     height: 63px;
 }

 .services-staircase .stair-chart span:nth-child(6) {
     height: 82px;
 }

 .services-staircase .stair-bottom {
     display: none;
 }

 @media (max-width: 1199px) {
     .services-staircase .services-main-layout {
         grid-template-columns: 40% 60%;
     }

     .services-staircase .services-intro h2 {
         font-size: 42px;
     }

     .services-staircase .staircase-area {
         transform: scale(.88);
         transform-origin: center right;
         margin-left: -50px;
     }

 }



 @media (max-width: 990px) {

     .services-staircase {
         padding: 60px 0 70px;
     }

     .services-staircase .services-main-layout {
         display: block;
         min-height: 0;
     }

     /* ---------- Intro (unchanged from your code) ---------- */
     .services-staircase .services-intro {
         text-align: left;
     }

     .services-staircase .services-intro .stair-label {
         justify-content: flex-start;
     }

     .services-staircase .services-intro h2 {
         font-size: 38px;
         letter-spacing: -1.3px;
     }

     .services-staircase .services-description {
         font-size: 15px;
         margin-left: 0;
     }

     .services-staircase .service-highlight {
         gap: 15px;
     }

     .services-staircase .highlight-icon {
         flex-basis: 52px;
         width: 52px;
         height: 52px;
         font-size: 20px;
     }

     /* .services-staircase .service-highlight h4 {
         font-size: 16px;
     } */

     .services-staircase .service-highlight p {
         font-size: 13px;
     }

     .services-staircase .services-btn {
         width: 235px;
     }

     /* ---------- Staircase area: simple vertical stack ---------- */
     .services-staircase .staircase-area {
         display: flex;
         flex-direction: column;
         width: 100%;
         max-width: none;
         height: auto;
         margin: 40px 0 0;
         /* top: room for the 3D top face of 1st box
           right: room for the 3D side face of every box */
         padding: 30px 26px 0 0;
         box-sizing: border-box;
         transform: none;
         overflow: visible;
     }

     /* ---------- Each box: same width, same left edge ---------- */
     .services-staircase .stair-block {
         --top-depth: 44px;
         --side-depth: 24px;
         position: relative;
         left: auto;
         bottom: auto;
         z-index: auto;
         width: 100%;
         height: auto;
         margin: 0 0 40px;
         /* equal gap between all boxes */
         perspective: none;
     }

     /* keep 01 -> 05 order top to bottom, finish card last */
     .services-staircase .stair-01 {
         order: 1;
     }

     .services-staircase .stair-02 {
         order: 2;
     }

     .services-staircase .stair-03 {
         order: 3;
     }

     .services-staircase .stair-04 {
         order: 4;
     }

     .services-staircase .stair-05 {
         order: 5;
     }

     .services-staircase .stair-front {
         height: auto;
         min-height: 92px;
         grid-template-columns: 56px 1fr 42px;
         padding: 16px 16px;
     }

     /* 3D top face follows the box width */
     .services-staircase .stair-front::before {
         width: calc(100% + var(--side-depth));
         height: 21px;
         top: -20px;
     }

     .services-staircase .stair-number {
         font-size: 25px;
         padding-right: 12px;
     }

     .services-staircase .stair-info {
         padding-left: 14px;
     }

     .services-staircase .stair-info h3 {
         font-size: 17px;
         margin-bottom: 6px;
     }

     .services-staircase .stair-info p {
         font-size: 13px;
         line-height: 1.45;
         margin: 0;
     }

     .services-staircase .stair-icon {
         width: 38px;
         height: 38px;
         font-size: 17px;
     }

     /* ---------- Finish card: full width, below the last box ---------- */
     .services-staircase .stair-finish {
         position: relative;
         order: 6;
         right: auto;
         top: auto;
         width: 100%;
         height: 62px;
         margin-top: 4px;
     }

     .services-staircase .stair-finish::after {
         height: 62px;
     }

     .services-staircase .stair-finish b {
         width: 35px;
         height: 35px;
     }

     /* decorative items are hidden on mobile (same as before) */
     .services-staircase .stair-growth-arrow,
     .services-staircase .stair-tagline,
     .services-staircase .stair-chart {
         display: none;
     }
 }

 /* ---------- Very small phones ---------- */
 @media (max-width: 480px) {

     .services-staircase .staircase-area {
         padding-right: 22px;
     }

     .services-staircase .stair-block {
         --side-depth: 14px;
     }

     .services-staircase .stair-front {
         grid-template-columns: 46px 1fr 36px;
         padding: 14px 12px;
     }

     .services-staircase .stair-number {
         font-size: 22px;
         padding-right: 10px;
     }

     .services-staircase .stair-info h3 {
         font-size: 16px;
     }

     .services-staircase .stair-icon {
         width: 34px;
         height: 34px;
         font-size: 15px;
     }
 }

 @media (min-width: 654px) and (max-width: 990px) {
     .services-staircase .stair-block {
         --side-depth: 29px;
     }
 }

 @media (min-width: 1200px) and (max-width: 1399px) {
     .services-staircase .services-intro .stair-label {
         font-size: 11px;
     }

     .services-staircase .services-intro h2 {
         font-size: 35px;
     }

     .services-staircase .dot-pattern {
         opacity: 0.3;
     }

     .services-staircase .stair-block {
         --step-width: 500px;
         --step-height: 100px;
         --top-depth: 51px;
         --side-depth: 27px;
         position: absolute;
         width: var(--step-width);
         height: var(--step-height);
         perspective: 1000px;
         transition: transform .45s cubic-bezier(.2, .8, .2, 1);
     }

     .services-staircase .stair-info h3 {
         font-size: 16px;
     }

     .services-staircase .stair-info p {
         font-size: 13px;
     }

     .services-staircase .stair-number {
         font-size: 25px;
     }

     .services-staircase .stair-icon {
         width: 35px;
         height: 35px;
         left: 33px;
     }

     .services-staircase .stair-02 {
         bottom: 150px;
     }

     .services-staircase .stair-03 {
         bottom: 264px;
     }

     .services-staircase .stair-04 {
         bottom: 378px;
     }

     .services-staircase .stair-05 {
         bottom: 490px;
     }

     .services-staircase .stair-front::before {
         height: 25px;
         clip-path: polygon(0 100%, 7% 0, 100% 0, 95% 100%);
     }

     .services-staircase .services-description {
         max-width: 500px;
         color: #20272f;
         font-size: 15px;
         line-height: 1.7;
     }

     /* .services-staircase .service-highlight h4 {
         font-size: 15px;
     } */

     .services-staircase .highlight-icon {
         flex: 0 0 45px;
         width: 45px;
         height: 45px;
         font-size: 15px;
     }
 }

 @media (min-width: 1700px) and (max-width: 1900px) {
     .services-staircase .stair-block {
         --step-width: 600px;
         --step-height: 125px;
         --top-depth: 51px;
         --side-depth: 25px;
     }

     .services-staircase .stair-02 {
         bottom: 176px;
     }

     .services-staircase .stair-03 {
         bottom: 310px;
     }

     .services-staircase .stair-04 {
         bottom: 447px;
     }

     .services-staircase .stair-05 {
         bottom: 583px;
     }

     .services-staircase .stair-info h3 {
         font-size: 22px;
     }

     .services-staircase .stair-info p {
         font-size: 17px;
         line-height: 1.5;
     }

     .services-staircase {
         padding: 100px 0 50px;
     }

     .services-staircase .staircase-area {
         max-width: 1000px;
     }

     .services-staircase .services-intro .stair-label {
         font-size: 14px;
     }

     .services-staircase .services-description {
         font-size: 18px;
     }

     /* .services-staircase .service-highlight h4 {
         font-size: 20px;
     } */

     .services-staircase .service-highlight p {
         margin: 0;
         color: #1c2127;
         font-size: 17px;
     }

     .services-staircase .services-btn {
         font-size: 16px;
     }
 }

 @media (min-width: 1901px) and (max-width: 3000px) {
     .services-staircase .stair-block {
         --step-width: 702px;
         --step-height: 130px;
         --top-depth: 53px;
         --side-depth: 30px;
     }

     .services-staircase .stair-02 {
         bottom: 180px;
     }

     .services-staircase .stair-03 {
         bottom: 326px;
     }

     .services-staircase .stair-04 {
         bottom: 470px;
     }

     .services-staircase .stair-05 {
         bottom: 615px;
     }

     .services-staircase .stair-info h3 {
         font-size: 22px;
     }

     .services-staircase .stair-info p {
         font-size: 18px;
         line-height: 1.5;
     }

     .services-staircase {
         padding: 100px 0 50px;
     }

     .services-staircase .staircase-area {
         max-width: 1300px;
     }

     .services-staircase .services-intro .stair-label {
         font-size: 16px;
     }

     .services-staircase .services-description {
         font-size: 20px;
     }
/* 
     .services-staircase .service-highlight h4 {
         font-size: 22px;
     } */

     .services-staircase .service-highlight p {
         margin: 0;
         color: #1c2127;
         font-size: 18px;
     }

     .services-staircase .services-btn {
         font-size: 18px;
     }
 }

 .stair-03 .stair-icon,
 .stair-05 .stair-icon,
 .stair-01 .stair-icon {
     border: 1px solid #ffffff;
     color: #fff;

 }

 .stair-04 .stair-icon,
 .stair-02 .stair-icon {
     border: 1px solid #685400;
     color: #685400;

 }