/* Shared service-page styles - Bootstrap 3 compatible */
.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}

/* Hero: no distracting hover motion; keep the introduction stable */
.services-hero{padding:68px 0 64px;background:#efefef;border-bottom:1px solid #e6eaf0}
.services-hero h1{margin:0 0 20px;font-size:46px;line-height:1.12;font-weight:700;color:#172033}
.services-hero .lead{max-width:900px;margin:0;font-size:19px;line-height:1.7;color:#5b6675}

.service-overview{padding:58px 0 48px}
.service-overview h2,.service-details h2,.service-process h2{margin:0 0 16px;font-size:30px;line-height:1.25;color:#172033}
.service-overview .intro{max-width:900px;font-size:16px;line-height:1.8;color:#5f6b7a}

/* Service / solution cards: lift + shadow + accent reveal */
.service-list{padding:0 0 24px}
.service-item{position:relative;height:100%;margin-bottom:28px;padding:26px 24px;border:1px solid #e4e8ee;background:#fff;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease,background-color .3s ease}
.service-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#337ab7;transform:scaleY(0);transform-origin:bottom;transition:transform .3s ease}
.service-item h3{margin:0 0 10px;font-size:19px;line-height:1.35;color:#202a3b;transition:color .25s ease}
.service-item p{margin:0 0 14px;font-size:15px;line-height:1.75;color:#667085}
.service-item ul{margin:0;padding-left:18px;color:#667085}
.service-item li{margin:0 0 6px;font-size:15px;line-height:1.65}

/* Detail / benefit blocks: emphasis without moving the content */
.service-details{padding:48px 0;background:#efefef;border-top:1px solid #edf0f4;border-bottom:1px solid #edf0f4}
.detail-block{position:relative;margin-bottom:30px;padding:0 0 0 18px;border-left:2px solid #e1e6ec;transition:border-color .3s ease,background-color .3s ease,padding-left .3s ease}
.detail-block:last-child{margin-bottom:0}
.detail-block h3{margin:0 0 10px;font-size:20px;color:#202a3b;transition:color .25s ease}
.detail-block p,.detail-block li{font-size:15px;line-height:1.75;color:#667085}
.detail-block ul{margin:0;padding-left:20px}

/* Process: sequential content gets an animated progress line, not a card lift */
.service-process{padding:56px 0 42px}
.process-item{position:relative;min-height:112px;margin-bottom:24px;padding:22px 12px 22px 0;border-top:1px solid #e1e6ec;transition:border-color .3s ease}
.process-item:before{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:#337ab7;transition:width .35s ease}
.process-item h3{margin:0 0 8px;font-size:18px;color:#202a3b;transition:color .25s ease,transform .25s ease}
.process-item p{margin:0;font-size:15px;line-height:1.75;color:#667085}

/* Final conversion area: polished button interaction, stable section */
.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 .25s ease,border-color .25s ease,color .25s ease,box-shadow .3s ease,transform .25s ease}
.final-cta .btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.22)}
.final-cta .btn:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,.16)}
.final-cta .btn:focus-visible{outline:3px solid rgba(255,255,255,.45);outline-offset:3px}

/* Purposeful hover states only on devices that actually support hover. */
@media (hover:hover) and (pointer:fine){
 .category-banner a:hover{color:#fff}
 .category-banner a:hover:after{right:0}

 .service-item:hover{border-color:#c7d7e8;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);box-shadow:0 12px 28px rgba(23,32,51,.10);transform:translateY(-3px)}
 .service-item:hover:before{transform:scaleY(1)}
 .service-item:hover h3{color:#286090}

 .detail-block:hover{border-left-color:#337ab7;background:rgba(255,255,255,.42);padding-left:22px}
 .detail-block:hover h3{color:#286090}

 .process-item:hover{border-top-color:#c7d7e8}
 .process-item:hover:before{width:56px}
 .process-item:hover h3{color:#286090;transform:translateX(3px)}
}

/* Keyboard users receive a clear, non-motion focus treatment. */
.category-banner a:focus-visible,.final-cta .btn:focus-visible{outline:3px solid rgba(51,122,183,.35);outline-offset:3px}

/* Responsive */
@media (max-width:991px){.services-hero h1{font-size:40px}}
@media (max-width:767px){
 .category-banner{padding:16px 0}
 .services-hero{padding:45px 0 48px}.services-hero h1{font-size:32px}.services-hero .lead{font-size:17px}
 .service-overview{padding:44px 0 34px}.service-overview h2,.service-details h2,.service-process h2{font-size:27px}
 .service-item{padding:22px 20px}
 .service-details{padding:42px 0}
 .service-process{padding:45px 0 28px}.process-item{min-height:0;padding-right:0}
 .final-cta{padding:48px 0}.final-cta h2{font-size:28px}
}

/* Accessibility: reduce motion without removing essential hover/focus contrast. */
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
 .service-item:hover{transform:none}
 .detail-block:hover{padding-left:18px}
 .process-item:hover h3{transform:none}
 .final-cta .btn:hover{transform:none}
}