/* ============================================================
   SERVICES PAGE — FULL STYLE (ISOLATED FROM VISION)
   ============================================================ */


/* ------------------------------------------------------------
   1. PILL SHAPE SYSTEM (copied from vision behavior)
   ------------------------------------------------------------ */

/* FIRST pill — rounded top */
.sap-hero .vision-pill:first-of-type {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
}

/* LAST pill — rounded bottom */
.sap-hero .vision-last-pill {
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    margin-bottom: 0;
}


/* ------------------------------------------------------------
   2. HERO SPACING (match your current layout)
   ------------------------------------------------------------ */

.sap-hero .npd-hero-content {
    margin-bottom: 4rem;
}


/* ------------------------------------------------------------
   3. SCROLLING TEXT SPACING (so you don’t lose layout)
   ------------------------------------------------------------ */

.vision-scrolling {
    padding: 6rem 0;
}

@media (max-width: 900px) {
    .vision-scrolling {
        padding: 4rem 0;
    }
}

@media (max-width: 600px) {
    .vision-scrolling {
        padding: 3rem 0;
    }
}


/* ------------------------------------------------------------
   4. REMOVE OLD ALTERNATING SYSTEM
   ------------------------------------------------------------ */

/* ❌ Removed:
.sap-hero .vision-pill:nth-of-type(odd) {
    background: #ffffff;
}

.sap-hero .vision-pill:nth-of-type(even) {
    background: #f3f3f3;
}
*/


/* ============================================================
   SERVICES PAGE — ALTERNATING PILL COLOR OVERRIDE (PAGE LEVEL)
   ============================================================ */

.sap-hero .npd-step.pill-white {
    background-color: #f9f9f9 !important;
}

.sap-hero .npd-step.pill-gray {
    background-color: #ececec !important;
}

/* ============================================================
   SERVICES PAGE — FINAL PILL FIX (BOTTOM PILL CORRECTION)
   ============================================================ */

.sap-hero .vision-last-pill {
    border-bottom-left-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
    background-color: #f9f9f9 !important; /* NPD white */
    margin-bottom: 0 !important;
}

/* ============================================================
   SERVICES PAGE — FINAL BOTTOM PILL OVERRIDE
   ============================================================ */

.sap-hero .npd-step.step-4.vision-last-pill.pill-white {
    background-color: #f9f9f9 !important;
}

/* ============================================================
   SERVICES PAGE — DIRECT BOTTOM PILL OVERRIDE (FINAL FIX)
   ============================================================ */

.npd-step.step-4.vision-last-pill.pill-white {
    background-color: #f9f9f9 !important;
}