.services-page {
        background: #fff;
        overflow: hidden
    }

    /* Breadcrumb / navigation: restrained text interaction */
    .category-banner {
        padding: 20px 0;
        background: #172033;
        color: #fff
    }

        .category-banner .mini-nav {
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #cdd5df
        }

        .category-banner a {
            position: relative;
            display: inline-block;
            color: #cdd5df;
            text-decoration: none;
            transition: color .25s ease
        }

            .category-banner a:after {
                content: "";
                position: absolute;
                left: 0;
                right: 100%;
                bottom: -3px;
                height: 1px;
                background: #fff;
                transition: right .25s ease
            }

    .services-hero {
        padding: 68px 0 74px;
        background: linear-gradient(135deg, #172033 0%, #26344d 100%);
        border-bottom: 1px solid #e6eaf0
    }

        .services-hero .eyebrow {
            display: inline-block;
            margin-bottom: 18px;
            padding: 6px 12px;
            border: 1px solid #dfe5ec;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #586474;
            background: #fff
        }

        .services-hero h1 {
            margin: 0 0 20px;
            font-size: 46px;
            line-height: 1.12;
            font-weight: 700;
            color: #fff
        }

        .services-hero .lead {
            /*max-width: 900px;*/
            margin: 0;
            font-size: 19px;
            line-height: 1.7;
            color: #d7dde6
        }

    .services-intro {
        padding: 58px 0 28px
    }

    .section-kicker {
        margin-bottom: 12px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #718096
    }

    .section-title {
        margin: 0 0 16px;
        font-size: 32px;
        line-height: 1.25;
        font-weight: 700;
        color: #172033
    }

    .section-copy {
        max-width: 900px;
        margin: 0 0 30px;
        font-size: 16px;
        line-height: 1.75;
        color: #667085
    }

    .service-grid {
        padding: 20px 0 55px
    }

        .service-grid [class*="col-"] {
            display: flex;
            flex-direction: column;
            margin-bottom: 30px
        }

    .service-card {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 225px;
        margin: 0;
        padding: 28px;
        background: #fff;
        border: 1px solid #e4e8ee;
        color: inherit;
        text-decoration: none !important;
        transition: box-shadow .25s ease,border-color .25s ease,transform .25s ease
    }

        .service-card:hover, .service-card:focus {
            border-color: #cbd3de;
            box-shadow: 0 10px 28px rgba(23,32,51,.09);
            transform: translateY(-2px);
            color: inherit;
            outline: none
        }

        .service-card:focus-visible {
            box-shadow: 0 0 0 3px rgba(51,122,183,.22),0 10px 28px rgba(23,32,51,.09)
        }

        .service-card h2 {
            margin: 0 0 12px;
            font-size: 21px;
            line-height: 1.4;
            color: #202a3b
        }

        .service-card p {
            margin: 0 0 14px;
            font-size: 14px;
            line-height: 1.7;
            color: #667085
        }

    .learn {
        margin-top: auto;
        font-size: 13px;
        font-weight: 700;
        color: #337ab7;
        transition: color .2s ease
    }

    .service-card:hover .learn, .service-card:focus .learn {
        color: #23527c
    }

    .capabilities {
        padding: 55px 0;
        background: #efefef;
        border-top: 1px solid #edf0f4;
        border-bottom: 1px solid #edf0f4
    }

    .capability {
        margin-bottom: 25px
    }

        .capability h3 {
            margin: 0 0 8px;
            font-size: 18px;
            color: #202a3b
        }

        .capability p {
            margin: 0;
            font-size: 14px;
            line-height: 1.7;
            color: #667085
        }

    .delivery {
        padding: 58px 0
    }

        .delivery [class*="col-"] {
            margin-bottom: 20px
        }

    .step {
        position: relative;
        min-height: 120px;
        padding: 22px 10px 20px 0
    }

        .step h3 {
            margin: 0 0 8px;
            font-size: 18px;
            color: #202a3b
        }

        .step p {
            margin: 0;
            font-size: 14px;
            line-height: 1.7;
            color: #667085
        }

    .final-cta {
        padding: 64px 0;
        background: #172033;
        text-align: center
    }

        .final-cta h2 {
            margin: 0 0 18px;
            font-size: 34px;
            line-height: 1.25;
            color: #fff
        }

        .final-cta p {
            max-width: 780px;
            margin: 0 auto 28px;
            font-size: 16px;
            line-height: 1.75;
            color: #d7dde6
        }

        .final-cta .btn {
            transition: background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease
        }

            .final-cta .btn:hover, .final-cta .btn:focus {
                transform: translateY(-1px);
                box-shadow: 0 5px 14px rgba(0,0,0,.18)
            }

            .final-cta .btn:focus-visible {
                outline: 3px solid rgba(255,255,255,.45);
                outline-offset: 2px
            }

    @media (max-width:991px) {
        .services-hero {
            padding: 55px 0 60px
        }

            .services-hero h1 {
                font-size: 38px
            }
    }

    @media (max-width:767px) {
        .services-hero {
            padding: 45px 0 50px
        }

            .services-hero h1 {
                font-size: 32px
            }

            .services-hero .lead {
                font-size: 17px
            }

        .section-title {
            font-size: 27px
        }

        .services-intro {
            padding: 45px 0 20px
        }

        .service-grid {
            padding: 15px 0 35px
        }

            .service-grid [class*="col-"] {
                display: block;
                margin-bottom: 22px
            }

        .service-card {
            min-height: 0;
            padding: 24px
        }

        .capabilities, .delivery {
            padding: 45px 0
        }

        .final-cta {
            padding: 48px 0
        }

            .final-cta h2 {
                font-size: 28px
            }

        .step {
            min-height: 0;
            padding-top: 16px;
            padding-bottom: 16px
        }
    }

/* ============================================================
    Section-specific interaction system
    Bootstrap 3 compatible; no universal card transform.
    ============================================================ */

     /* 1. Service / solution cards: lift + controlled accent */
     .service-card,
     .service-card-rich {
         position: relative;
         overflow: hidden;
     }

         .service-card:before,
         .service-card-rich:before {
             content: "";
             position: absolute;
             left: 0;
             top: 0;
             width: 3px;
             height: 0;
             background: #337ab7;
             transition: height .25s ease;
         }

         .service-card:hover:before,
         .service-card:focus:before,
         .service-card-rich:hover:before,
         .service-card-rich:focus-within:before {
             height: 100%;
         }

         .service-card:hover,
         .service-card:focus {
             transform: translateY(-3px);
             box-shadow: 0 10px 26px rgba(23,32,51,.10);
             border-color: #c9d4df;
         }

         .service-card-rich:hover,
         .service-card-rich:focus-within {
             transform: translateY(-3px);
             box-shadow: 0 12px 30px rgba(23,32,51,.11);
             border-color: #c9d4df;
         }

         .service-card .learn:after {
             content: " \2192";
             display: inline-block;
             transition: transform .2s ease;
         }

         .service-card:hover .learn:after,
         .service-card:focus .learn:after {
             transform: translateX(4px);
         }

     /* 2. Technology / capability blocks: highlight instead of lift */
     .capability {
         position: relative;
         padding: 18px 20px;
         border: 1px solid transparent;
         border-radius: 3px;
         transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
     }

         .capability:hover,
         .capability:focus-within {
             border-color: #dce4ec;
             background: #fff;
             box-shadow: 0 6px 18px rgba(23,32,51,.06);
         }

         .capability h3 {
             transition: color .2s ease;
         }

         .capability:hover h3,
         .capability:focus-within h3 {
             color: #337ab7;
         }

     /* 3. Portfolio/project pattern when such components exist */
     .project-card,
     .portfolio-card {
         position: relative;
         overflow: hidden;
     }

         .project-card img,
         .portfolio-card img {
             transition: transform .4s ease;
         }

         .project-card:hover img,
         .project-card:focus-within img,
         .portfolio-card:hover img,
         .portfolio-card:focus-within img {
             transform: scale(1.035);
         }

         .project-card .overlay,
         .portfolio-card .overlay {
             opacity: 0;
             transition: opacity .3s ease;
         }

         .project-card:hover .overlay,
         .project-card:focus-within .overlay,
         .portfolio-card:hover .overlay,
         .portfolio-card:focus-within .overlay {
             opacity: 1;
         }

         .project-card .view-project:after,
         .portfolio-card .view-project:after {
             content: " \2192";
             display: inline-block;
             transition: transform .2s ease;
         }

         .project-card:hover .view-project:after,
         .project-card:focus-within .view-project:after,
         .portfolio-card:hover .view-project:after,
         .portfolio-card:focus-within .view-project:after {
             transform: translateX(4px);
         }

     /* 4. Blog/article pattern */
     .blog-card,
     .article-card {
         overflow: hidden;
     }

         .blog-card img,
         .article-card img {
             transition: transform .4s ease;
         }

         .blog-card:hover img,
         .blog-card:focus-within img,
         .article-card:hover img,
         .article-card:focus-within img {
             transform: scale(1.03);
         }

         .blog-card h3 a,
         .article-card h3 a {
             transition: color .2s ease;
         }

         .blog-card:hover h3 a,
         .blog-card:focus-within h3 a,
         .article-card:hover h3 a,
         .article-card:focus-within h3 a {
             color: #337ab7;
         }

         .blog-card .read-more:after,
         .article-card .read-more:after {
             content: " \2192";
             display: inline-block;
             transition: transform .2s ease;
         }

         .blog-card:hover .read-more:after,
         .blog-card:focus-within .read-more:after,
         .article-card:hover .read-more:after,
         .article-card:focus-within .read-more:after {
             transform: translateX(4px);
         }

     /* 5. Buttons / CTAs: purpose-based, restrained */
     .btn {
         transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
     }

     .btn-primary:hover,
     .btn-primary:focus {
         box-shadow: 0 4px 12px rgba(51,122,183,.20);
         transform: translateY(-1px);
     }

     .btn-default:hover,
     .btn-default:focus {
         color: #337ab7;
         border-color: #b9c7d6;
         box-shadow: 0 3px 9px rgba(23,32,51,.07);
     }

     .btn-about:hover,
     .btn-about:focus {
         box-shadow: 0 4px 12px rgba(242,140,40,.22);
         transform: translateY(-1px);
     }

     .btn .fa,
     .btn [class*="icon-"] {
         transition: transform .2s ease;
     }

     .btn:hover .fa,
     .btn:focus .fa,
     .btn:hover [class*="icon-"],
     .btn:focus [class*="icon-"] {
         transform: translateX(2px);
     }

     /* 7. Feature / benefit sections: accent emphasis */
     .feature-card,
     .benefit-card {
         transition: border-color .25s ease, background-color .25s ease;
     }

         .feature-card:hover,
         .feature-card:focus-within,
         .benefit-card:hover,
         .benefit-card:focus-within {
             border-color: #d5dfe9;
             background: #fbfcfd;
         }

         .feature-card .icon,
         .benefit-card .icon,
         .feature-card i,
         .benefit-card i {
             transition: color .25s ease, transform .25s ease;
         }

         .feature-card:hover .icon,
         .feature-card:hover i,
         .feature-card:focus-within .icon,
         .feature-card:focus-within i,
         .benefit-card:hover .icon,
         .benefit-card:hover i,
         .benefit-card:focus-within .icon,
         .benefit-card:focus-within i {
             color: #337ab7;
             transform: scale(1.06);
         }

     /* 8. Statistics / metrics: highlight, no large movement */
     .stat,
     .stat-card,
     .metric-card {
         transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
     }

         .stat:hover,
         .stat-card:hover,
         .metric-card:hover,
         .stat:focus-within,
         .stat-card:focus-within,
         .metric-card:focus-within {
             background: #fbfcfe;
             border-color: #d8e1ea;
             box-shadow: 0 5px 16px rgba(23,32,51,.06);
         }

         .stat strong,{
             transition: color .25s ease;
         }

         .stat:hover strong,{
             color: #337ab7;
         }

     /* 9. Testimonials: softer elevation */
     .testimonial,
     .testimonial-card,
     .quote-card {
         transition: box-shadow .3s ease, border-color .3s ease;
     }

         .testimonial:hover,
         .testimonial-card:hover,
         .quote-card:hover,
         .testimonial:focus-within,
         .testimonial-card:focus-within,
         .quote-card:focus-within {
             box-shadow: 0 8px 24px rgba(23,32,51,.08);
             border-color: #d5dde6;
         }

         .testimonial .quote-icon,
         .testimonial-card .quote-icon,
         .quote-card .quote-icon {
             transition: color .25s ease, opacity .25s ease;
         }

         .testimonial:hover .quote-icon,
         .testimonial-card:hover .quote-icon,
         .quote-card:hover .quote-icon {
             color: #337ab7;
             opacity: .9;
         }

     /* 10. Team/profile cards: image treatment + social reveal */
     .team-member {
         overflow: hidden;
     }

         .team-member img {
             transition: transform .4s ease;
         }

         .team-member:hover img,
         .team-member:focus-within img {
             transform: scale(1.025);
         }

         .team-member .social,
         .team-member .social-links {
             opacity: .72;
             transition: opacity .25s ease, transform .25s ease;
         }

         .team-member:hover .social,
         .team-member:focus-within .social,
         .team-member:hover .social-links,
         .team-member:focus-within .social-links {
             opacity: 1;
             transform: translateY(-2px);
         }

         .team-member h4 {
             transition: color .2s ease;
         }

         .team-member:hover h4,
         .team-member:focus-within h4 {
             color: #337ab7;
         }

     /* 11. Contact / CTA: background stays stable; controls respond */
     .final-cta,
     .cta-section {
         position: relative;
     }

         .final-cta .btn,
         .cta-section .btn {
             position: relative;
             z-index: 1;
         }

         .cta-section .icon,
         .final-cta .icon {
             transition: opacity .25s ease, transform .25s ease;
         }

         .cta-section:hover .icon,
         .final-cta:hover .icon {
             opacity: .95;
             transform: scale(1.04);
         }

     /* General interactive link micro-interaction */
     a {
         transition: color .2s ease;
     }

         a.arrow-link:after,
         a.link-arrow:after {
             content: " \2192";
             display: inline-block;
             transition: transform .2s ease;
         }

         a.arrow-link:hover:after,
         a.arrow-link:focus:after,
         a.link-arrow:hover:after,
         a.link-arrow:focus:after {
             transform: translateX(4px);
         }

         /* Explicit keyboard accessibility */
         a:focus-visible,
         button:focus-visible,
         input:focus-visible,
         select:focus-visible,
         textarea:focus-visible {
             outline: 3px solid rgba(51,122,183,.28);
             outline-offset: 2px;
         }

     /* Do not animate non-interactive structural sections by default. */

     /* Reduced motion */
     @media (prefers-reduced-motion: reduce) {
         *,
         *:before,
         *:after {
             scroll-behavior: auto !important;
             transition-duration: .01ms !important;
             animation-duration: .01ms !important;
             animation-iteration-count: 1 !important;
         }
     }