/* ============================================================
   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. ✅ ALTERNATING COLORS (THE MAIN FIX)
   ------------------------------------------------------------ */

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

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