.sp-hero { position: relative; overflow: hidden; padding: 118px 0 100px; background: #050267 url('../img/service-bg-1.jpg') center/cover; color: #fff; }
.sp-hero:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,2,103,.95), rgba(5,2,103,.58)); }
.sp-hero .mh-container { position: relative; z-index: 1; }
.sp-breadcrumb { margin: 0 0 24px; color: rgba(255,255,255,.78); font-family: Poppins, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.sp-breadcrumb a { color: #fff; }
.sp-hero h1 { max-width: 710px; margin: 0; color: #fff; font-size: clamp(43px,6vw,72px); font-weight: 800; letter-spacing: -.06em; line-height: .98; }
.sp-hero h1 span { color: #dc3d28; }
.sp-hero p { max-width: 580px; margin: 22px 0 0; color: rgba(255,255,255,.86); font-size: 18px; line-height: 1.65; }
.sp-directory { padding: 102px 0; background: #f8f8f8; }
.sp-directory .mh-section-head { margin-bottom: 45px; }
.sp-directory .mh-services { grid-template-columns: repeat(3, 1fr); }
.sp-directory .mh-service { min-height: 268px; }
.sp-directory .mh-service h3 { font-size: 23px; }
.sp-directory .mh-service p { max-width: 245px; }
.sp-process { padding: 100px 0; }
.sp-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 50px; border: 1px solid rgba(5,2,103,.1); border-radius: 9px; overflow: hidden; }
.sp-process-step { position: relative; min-height: 235px; padding: 34px 30px; background: #fff; }
.sp-process-step + .sp-process-step { border-left: 1px solid rgba(5,2,103,.1); }
.sp-process-no { display: block; color: #dc3d28; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.sp-process-step h3 { margin: 34px 0 10px; color: #050267; font-size: 22px; font-weight: 800; }
.sp-process-step p { margin: 0; color: #555; font-size: 15px; line-height: 1.6; }
.sp-clients { position: relative; overflow: hidden; padding: 110px 0; background: #050267; }
.sp-clients:before { content: ''; position: absolute; inset: 0; background: radial-gradient(760px 320px at 85% 8%, rgba(220,61,40,.16), transparent 62%), radial-gradient(640px 300px at 6% 94%, rgba(255,255,255,.07), transparent 60%); }
.sp-clients .mh-container { position: relative; z-index: 1; }
.sp-clients .mh-kicker { color: #fff; }
.sp-clients .mh-title { color: #fff; }
.sp-clients .mh-title span { color: #dc3d28; }
.sp-clients .mh-copy { max-width: 590px; color: rgba(255,255,255,.74); }
.sp-logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 54px; }
.sp-logo { position: relative; display: grid; flex: 0 1 235px; min-height: 150px; place-items: center; padding: 28px 24px; border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.2); transition: transform .28s ease, box-shadow .28s ease; }
.sp-logo:after { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 4px 4px; background: #dc3d28; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.sp-logo:hover { transform: translateY(-7px); box-shadow: 0 28px 52px rgba(0,0,0,.3); }
.sp-logo:hover:after { transform: scaleX(1); }
.sp-logo img { display: block; max-width: 80%; max-height: 78px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.sp-logo:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.05); }
.sp-cta { padding: 76px 0; background: #f8f8f8; }
.sp-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 45px 52px; border-left: 4px solid #dc3d28; border-radius: 0 8px 8px 0; background: #fff; box-shadow: 0 15px 32px rgba(5,2,103,.08); }
.sp-cta h2 { max-width: 700px; margin: 0; color: #050267; font-size: clamp(29px,3.8vw,42px); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
@media (max-width: 860px) { .sp-directory .mh-services { grid-template-columns: repeat(2, 1fr); } .sp-process-grid { grid-template-columns: 1fr; } .sp-process-step + .sp-process-step { border-left: 0; border-top: 1px solid rgba(5,2,103,.1); } .sp-logo { flex-basis: 210px; } }
@media (max-width: 620px) { .sp-hero { padding: 82px 0 72px; } .sp-hero p { font-size: 16px; } .sp-directory, .sp-process, .sp-clients { padding: 70px 0; } .sp-directory .mh-services { grid-template-columns: 1fr; } .sp-logo { flex-basis: 100%; min-height: 122px; } .sp-cta { padding: 50px 0; } .sp-cta-inner { display: block; padding: 33px 26px; } .sp-cta .mh-button { margin-top: 25px; } }