/* ============================
       SERVICE PAGES – ONE STYLE
       ============================ */
 .spWrap {
   padding: 26px 0 10px;
 }

 .spTop {
   margin-bottom: 22px;
 }

 .spTopCard {
   display: grid;
   grid-template-columns: 1.4fr 1fr;
   gap: 18px;
   padding: 22px;
   border-radius: 26px;
   border: 1px solid rgba(15, 23, 42, .10);
   background:
     radial-gradient(800px 320px at 10% 0%, rgba(246, 183, 7, .16), transparent 60%),
     radial-gradient(700px 260px at 90% 0%, rgba(0, 163, 255, .14), transparent 60%),
     #fff;
   box-shadow: 0 18px 60px rgba(15, 23, 42, .12);
 }

 .spKicker {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   border-radius: 999px;
   background: rgba(15, 23, 42, .06);
   border: 1px solid rgba(15, 23, 42, .10);

 }

 .spTitle {
   margin: 12px 0 6px;
   font-size: clamp(26px, 3vw, 40px);

   letter-spacing: -.02em;
 }

 .spSub {
   color: rgba(15, 23, 42, .75);

   max-width: 75ch;
 }

 .spMiniBadges {
   margin-top: 14px;
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }

 .spMini {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   border-radius: 999px;
   background: #fff;
   border: 1px solid rgba(15, 23, 42, .10);

   box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
 }

 .spCallout {
   padding: 16px;
   border-radius: 20px;
   background: linear-gradient(180deg, #001a23, #002935);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .10);
   box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
 }

 .spCallout h3 {
   margin: 0 0 6px;

 }

 .spCallout p {
   margin: 0 0 12px;
   opacity: .90;

 }

 .spCallActions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
 }

 .spBtn {
   padding: 10px 14px;
   border-radius: 999px;

   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .spBtnDark {
   background: #fff;
   color: #001a23;
 }

 .spBtnGold {
   background: #f6b707;
   color: #061318;
 }

 .spBtnWhats {
   background: #25d366;
   color: #061318;
 }

 .spInfoRow {
   margin-top: 12px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
 }

 .spInfo {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 12px;
   border-radius: 18px;
   background: #fff;
   border: 1px solid rgba(15, 23, 42, .10);
 }

 .spInfo i {
   margin-top: 2px;
   color: #cd2029;
 }

 .spInfo b {
   display: block;

 }

 .spInfo span {
   display: block;
   font-size: 12px;
   color: rgba(15, 23, 42, .65);

 }

 .spGrid {
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.85fr);
   gap: 24px;
   align-items: start;
 }

 /* large laptop */
 @media (max-width: 1199px) {
   .spGrid {
     grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
     gap: 20px;
   }
 }

 /* tablet landscape / small laptop */
 @media (max-width: 991px) {
   .spGrid {
     grid-template-columns: 1fr;
     gap: 20px;
   }

   .spMain,
   .spSide {
     width: 100%;
     min-width: 0;
   }
 }

 /* mobile */
 @media (max-width: 767px) {
   .spGrid {
     gap: 16px;
   }
 }

 /* small mobile */
 @media (max-width: 575px) {
   .spGrid {
     gap: 14px;
   }
 }

 .spBlock {

   padding: 18px;

   margin-bottom: 16px;
 }

 .spH3 {
   margin: 0 0 10px;

   display: flex;
   align-items: center;
   gap: 10px;
 }

 .spH3 i {
   color: #19bdf5;
 }

 .spList {
   padding-left: 18px;
   margin: 0;

   color: rgba(15, 23, 42, .88);
 }

 .spList li {
   margin-bottom: 8px;
 }

 .spSteps {
   display: grid;
   gap: 10px;
 }

 .spStep {
   padding: 12px 14px;
   border-radius: 16px;
   border: 1px solid rgba(15, 23, 42, .10);
   background: rgba(15, 23, 42, .03);
   display: flex;
   gap: 10px;
   align-items: flex-start;
 }

 .spStep b {
   width: 74px;
   flex: 0 0 74px;

   color: #001a23;
 }

 .spStep span {

   color: rgba(15, 23, 42, .88);
 }

 .spFaq {
   display: grid;
   gap: 10px;
 }

 .spQa {
   border-radius: 16px;
   border: 1px solid rgba(15, 23, 42, .10);
   background: #fff;
   overflow: hidden;
 }

 .spQa summary {
   padding: 12px 14px;
   cursor: pointer;

   list-style: none;
 }

 .spQa summary::-webkit-details-marker {
   display: none;
 }

 .spQa div {
   padding: 0 14px 12px;
   color: rgba(15, 23, 42, .84);

 }

 .spSideCard {
   background: #fff;
   border-radius: 10px;
   padding: 15px;
   border: 1px solid rgba(15, 23, 42, .10);
   box-shadow: 0 16px 50px rgba(15, 23, 42, .10);
   margin-bottom: 16px;
 }

 .spSideDark {
   background: linear-gradient(180deg, #001a23, #002935);
   color: #fff;
   border-color: rgba(255, 255, 255, .10);
 }

 .spSideTitle {
   margin: 0 0 10px;

   display: flex;
   align-items: center;
   gap: 10px;
 }

 .spSideTitle i {
   color: #f6b707;
 }

 .spSideText {
   margin: 0 0 10px;

   opacity: .92;
 }

 .spCheck {
   padding-left: 18px;
   margin: 0;

 }

 .spCheck li {
   margin-bottom: 8px;
 }

 .spSideLink {
   display: inline-flex;
   align-items: center;
   gap: 8px;

   text-decoration: none;
   color: inherit;
 }

 .spRelated {
   display: grid;
   gap: 10px;
 }

 .spRel {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 12px 14px;
   border-radius: 16px;
   border: 1px solid rgba(15, 23, 42, .10);
   background: rgba(15, 23, 42, .03);
   text-decoration: none;
   color: #0f172a;

 }

 .spRel small {
   display: block;

   color: rgba(15, 23, 42, .65);
 }

 @media (max-width: 992px) {
   .spTopCard {
     grid-template-columns: 1fr;
   }

   .spGrid {
     grid-template-columns: 1fr;
   }

   .spInfoRow {
     grid-template-columns: 1fr;
   }
 }


 /* =========================
   SERVICE PAGE IMAGE PANEL
   ========================= */

 .spImageCard {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   border: 1px solid rgba(15, 23, 42, .12);
   box-shadow: 0 18px 55px rgba(15, 23, 42, .18);
   min-height: 260px;
 }

 .spImageCard img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .spImageOverlay {
   position: absolute;
   inset: 0;
   padding: 16px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background:
     linear-gradient(180deg,
       rgba(0, 0, 0, .15),
       rgba(0, 0, 0, .55));
   color: #fff;
 }

 .spImageTag {
   align-self: flex-start;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .15);
   backdrop-filter: blur(6px);

   font-size: 14px;
 }

 .spImageMeta {
   display: grid;
   gap: 8px;

 }

 .spImageMeta div {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
 }

 .spImageMeta i {
   color: #f6b707;
 }




 .spLead {
   margin: 0 0 14px;
   font-size: 15px;
   line-height: 1.75;
   color: rgba(15, 23, 42, .72);
 }

 .spSplitGrid {
   display: grid;
   grid-template-columns: 1.02fr 1.15fr;
   gap: 22px;
   align-items: center;
 }

 .spSplitGrid.imageLeft .spSplitMedia {
   order: 1;
 }

 .spSplitGrid.imageLeft .spSplitContent {
   order: 2;
 }

 .spSplitMedia,
 .spHighlightMedia,
 .spGenericImage {
   border-radius: 22px;
   overflow: hidden;
   box-shadow: 0 20px 55px rgba(15, 23, 42, .14);
 }

 .spSplitMedia img,
 .spHighlightMedia img,
 .spGenericImage img,
 .spCardThumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .spFeaturePoints {
   display: grid;
   gap: 12px;
   margin-top: 18px;
 }

 .spFeaturePoint {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 14px 16px;
   border-radius: 16px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 1));
   border: 1px solid rgba(15, 23, 42, .08);
   box-shadow: 0 10px 25px rgba(15, 23, 42, .06);
 }

 .spFeaturePoint i {
   color: #cd2029;
   margin-top: 3px;
 }

 .spCardsGrid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
   margin-top: 14px;
 }

 .spInfoCard {
   position: relative;
   padding: 18px;
   border-radius: 20px;
   background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .98));
   border: 1px solid rgba(15, 23, 42, .08);
   box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
   overflow: hidden;
 }

 .spCardThumb {
   height: 160px;
   border-radius: 16px;
   overflow: hidden;
   margin-bottom: 14px;
 }

 .spCardIcon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #fff5dd, #ffe7cf);
   color: #cd2029;
   font-size: 18px;
 }

 .spCardBadge {
   position: absolute;
   top: 14px;
   right: 14px;
   padding: 6px 10px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 700;
   background: rgba(15, 23, 42, .06);
   color: #0f172a;
 }

 .spInfoCard h4 {
   margin: 10px 0 8px;
   font-size: 18px;
   color: #0f172a;
 }

 .spInfoCard p {
   margin: 0;
   font-size: 14px;
   line-height: 1.75;
   color: rgba(15, 23, 42, .72);
 }

 .spTimeline {
   display: grid;
   gap: 14px;
   margin-top: 16px;
 }

 .spTimelineItem {
   display: grid;
   grid-template-columns: 68px 1fr;
   gap: 14px;
 }

 .spTimelineNo {
   border-radius: 18px;
   background: linear-gradient(180deg, #cd2029, #7a0f14);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 800;
 }

 .spTimelineBody {
   padding: 16px 18px;
   border-radius: 18px;
   background: rgba(15, 23, 42, .03);
   border: 1px solid rgba(15, 23, 42, .08);
 }

 .spTimelineBody h4 {
   margin: 0 0 6px;
   font-size: 17px;
 }

 .spTimelineBody p {
   margin: 0;
   line-height: 1.75;
   color: rgba(15, 23, 42, .74);
 }

 .spFaqGrid {
   display: grid;
   gap: 14px;
 }

 .spQaCard {
   border-radius: 20px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 1));
   border: 1px solid rgba(15, 23, 42, .08);
   box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
   overflow: hidden;
 }

 .spQaCard summary {
   list-style: none;
   display: grid;
   grid-template-columns: 56px 1fr 30px;
   gap: 14px;
   align-items: center;
   padding: 18px;
   cursor: pointer;
 }

 .spQaCard summary::-webkit-details-marker {
   display: none;
 }

 .spQaIndex {
   width: 44px;
   height: 44px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #fff5dd, #ffe7cf);
   color: #cd2029;
   font-weight: 800;
 }

 .spQaQuestion {
   font-size: 16px;
   font-weight: 700;
   color: #0f172a;
 }

 .spQaIcon {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #cd2029;
 }

 .spQaCard[open] .spQaIcon i {
   transform: rotate(45deg);
 }

 .spQaAnswer {
   padding: 0 18px 18px 88px;
   color: rgba(15, 23, 42, .78);
   line-height: 1.8;
 }

 @media (max-width: 992px) {

   .spSplitGrid,
   .spCardsGrid {
     grid-template-columns: 1fr;
   }

   .spTimelineItem {
     grid-template-columns: 54px 1fr;
   }

   .spQaAnswer {
     padding: 0 16px 16px 16px;
   }
 }

 .spRelatedGrid {
   display: grid;
   gap: 14px;
 }

 .spRelCard {
   display: block;
   border-radius: 16px;
   overflow: hidden;
   background: #fff;
   border: 1px solid rgba(15, 23, 42, .08);
   text-decoration: none;
   color: inherit;
   transition: .25s ease;
 }

 .spRelCard:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
 }

 .spRelCardThumb {
   aspect-ratio: 16 / 10;
   overflow: hidden;
 }

 .spRelCardThumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .spRelCardBody {
   padding: 14px;
 }

 .spRelCardTitle {
   font-weight: 700;
   line-height: 1.4;
 }

 .spRelCardSubtitle {
   margin-top: 6px;
   font-size: 13px;
   color: #6b7280;
   line-height: 1.5;
 }

 .spRelatedGrid {
   display: grid;
   gap: 14px;
 }

 .spRelCard {
   display: block;
   overflow: hidden;
   border-radius: 16px;
   background: #fff;
   border: 1px solid rgba(15, 23, 42, .08);
   text-decoration: none;
   color: inherit;
   transition: transform .25s ease, box-shadow .25s ease;
 }

 .spRelCard:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 28px rgba(15, 23, 42, .10);
 }

 .spRelCardThumb {
   width: 100%;
   aspect-ratio: 16/10;
   overflow: hidden;
   background: #f8fafc;
 }

 .spRelCardThumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .spRelCardBody {
   padding: 14px;
 }

 .spRelCardTitle {
   font-size: 15px;
   font-weight: 700;
   line-height: 1.45;
   color: #111827;
 }

 .spRelCardSubtitle {
   margin-top: 6px;
   font-size: 13px;
   line-height: 1.55;
   color: #6b7280;
 }



 .spFlowWrap {
   width: 100%;
 }

 .spFlowWrap.hasMedia::after,
 .spFlowContent::after {
   content: "";
   display: block;
   clear: both;
 }

 .spFloatMedia {
   width: min(42%, 450px);
   margin: 4px 0 16px;
   border-radius: 18px;
   overflow: hidden;
   /* box-shadow:0 14px 34px rgba(15,23,42,0.12); */
   background: #f8fafc;
 }

 .spFloatMedia img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
 }

 .spFlowWrap.media-left .spFloatMedia {
   float: left;
   margin-right: 24px;
 }

 .spFlowWrap.media-right .spFloatMedia {
   float: right;
   margin-left: 24px;
 }

 .spFlowWrap.noMedia .spFlowContent {
   width: 100%;
 }

 .spFlowContent {
   font-size: 16px;
   line-height: 1.8;
   color: #1f2937;
 }

 .spContentHtml p {
   margin: 0 0 14px;
 }

 .spRelSectionOnly img {
   width: 100%;
 }

 @media (max-width: 570px) {

   .spFloatMedia {
     width: 100%;

   }
 }