/* Service category landing sections (/services/{slug}/, template #2582).
   Brand: navy #170D3D, teal #0AA3D6, purple #3A0CA3, text #5A5A72. Fonts: Heebo/Montserrat.
   Layout selectors are scoped under .svc-hero so they win over Elementor's `.e-con`
   container defaults (which force flex-direction:column). */

/* ============================ SVC – 01 Hero ============================ */
/* Brand navy hero + diagonal overlay (matches single-service / GC hero #2734),
   so the navy site header blends seamlessly into it. */
.svc-hero{
	position:relative;
	background:#170D3D;
	overflow:hidden;
}
/* THE DIAGONAL OVERLAY NOW LIVES IN ELEMENTOR, not here.
   Every `.svc-hero` container carries a native Background Overlay (attachment #1959, cover, centred,
   opacity 0.15), so it is editable in the editor: Style -> Background Overlay.

   It was moved because the rule that used to sit here could not work. Elementor 4.2.1 paints a
   container's overlay through the SAME pseudo-element:
       .e-con::before { content: var(--background-overlay); opacity: var(--overlay-opacity); }
   and elementor/frontend.css loads AFTER this stylesheet, so it won on both properties. Measured
   before the move: the three heroes that had an overlay configured rendered at opacity 0.5 instead of
   the .15 asked for here, and the three that did not had `--background-overlay` undefined, which made
   `content` compute to `none` so the diagonal never painted at all.

   CONSEQUENCE OF OWNING IT IN ELEMENTOR: a NEW hero container gets no diagonal until an overlay is set
   on it. If you add one, copy the settings from any existing `.svc-hero` container.

   The `.svc1-cta`, `.cs-challenge__card` (below) and `.ind-challenges` (industries.css) overlays still
   use this pseudo-element pattern and are very likely affected the same way — they are separate
   components and were deliberately left alone here. */
.svc-hero .svc-hero__inner{
	position:relative;z-index:1;
	max-width:1200px;margin:0 auto;padding:120px 40px 80px;
	display:flex;flex-direction:row;align-items:center;gap:56px;
}
.svc-hero .svc-hero__col{flex:1 1 50%;min-width:0;}
.svc-hero .svc-hero__text{flex:1 1 54%;}
.svc-hero .svc-hero__media{flex:1 1 46%;text-align:center;}

/* Breadcrumb */
.svc-hero__crumbs{margin-bottom:18px;font-size:14px;}
.svc-hero__crumbs,.svc-hero__crumbs a,.svc-hero__crumbs .elementor-breadcrumbs{color:rgba(255,255,255,.6);}
.svc-hero__crumbs a:hover{color:#0AA3D6;}

/* Title + subtitle (white on navy) */
.svc-hero__title .elementor-heading-title{
	margin:0 0 16px;
	font-family:"Heebo",sans-serif;font-weight:700;
	font-size:44px;line-height:1.15;color:#ffffff;
}
.svc-hero__subtitle{margin:0 0 26px;}
.svc-hero__subtitle,.svc-hero__subtitle p{
	font-size:17px;line-height:1.65;color:rgba(255,255,255,.82);margin:0;
}

/* Benefit bullets — 2×2, teal check-circle */
.svc-hero .svc-hero__bullets{
	display:flex;flex-direction:row;flex-wrap:wrap;gap:14px 28px;margin-bottom:30px;
}
.svc-hero .svc-hero__bullet{flex:1 1 42%;min-width:200px;}
.svc-hero__bullet .elementor-heading-title{
	position:relative;margin:0;padding-left:32px;
	font-size:15px;line-height:1.4;font-weight:600;color:#ffffff;
	font-family:"Montserrat",sans-serif;
}
.svc-hero__bullet .elementor-heading-title::before{
	content:"";position:absolute;left:0;top:-1px;width:22px;height:22px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230AA3D6'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size:contain;background-repeat:no-repeat;
}

/* CTA */
.svc-hero__cta .elementor-button{
	background:#0AA3D6;color:#fff;border-radius:8px;
	font-family:"Heebo",sans-serif;font-weight:600;font-size:16px;
	padding:15px 30px;transition:background .2s ease,transform .2s ease;
}
.svc-hero__cta .elementor-button:hover{background:#ffffff;color:#170D3D;transform:translateY(-2px);}

/* Media */
.svc-hero__media .svc-hero__img img{max-width:100%;height:auto;display:inline-block;}

/* Responsive */
/* The top padding is HEADER CLEARANCE, not decoration. The global header (#2249) is
   `position:absolute` on every page — see its custom_css — so it occupies no layout space and this
   padding is the only thing keeping the breadcrumb and H1 off the logo.

   It used to drop 120px -> 56px here while the header only shrank 153px -> 125px, so from 600px to
   1024px the breadcrumb rendered ON TOP of the logo on nine of the twelve page types. Measured.

   The clearance cannot be derived from viewport width, because the logo is sized as a PERCENTAGE of
   its column and the column width jumps at each breakpoint — so header height is non-monotonic and
   peaks at 153px in two separate bands (>=1025px and 700-767px):

       width   1440  1025 | 1024   900   800   768 | 767   700   600   450   360
       logo w   225   225 |  170   147   128   122 | 225   225   197   141   107
       header   153   153 |  125   114   104   101 | 153   153   138   110    93

   Worst-case logo bottom is 133px and content sits ~24px below this padding, so 132px clears every
   band with ~23px to spare. Reduced at <=480px, where the logo bottom is never above ~95px.

   If the logo ever gains a max-width, re-measure and this can come down. */
@media (max-width:1024px){
	.svc-hero .svc-hero__inner{gap:36px;padding:132px 24px 56px;}
	.svc-hero__title .elementor-heading-title{font-size:36px;}
}
@media (max-width:880px){
	/* `flex-direction:column` alone NEVER APPLIED here. Elementor styles the same element with
	   `.e-con{flex-direction:var(--flex-direction)}` — also (0,2,0) — and its stylesheet loads after
	   the theme's, so at equal specificity Elementor won and the hero stayed `row` at every width
	   down to 390px. Measured: at 768-880px it rendered as two squeezed ~330px columns. Below 767px
	   it only looked correct by accident, because Elementor sets `--flex-wrap:wrap` there and the
	   row wrapped.

	   Setting the custom property Elementor's own rule consumes is the fix — same approach as
	   `--height` in case-study.css:135 and `--flex-wrap` in location.css:725 — but it has to WIN
	   first. Elementor emits, in uploads/elementor/css/post-2552.css:

	       .elementor-2552 .elementor-element.elementor-element-2a33cf9{--flex-direction:row;…}

	   That is (0,3,0) and, critically, it sits OUTSIDE any media query, so it applies at every
	   width. A doubled class would only reach (0,3,0) and tie — and Elementor's per-post CSS loads
	   after the theme's, so a tie still loses. `.e-con` plus the doubled class reaches (0,4,0),
	   which wins outright without !important. The longhand stays as a fallback. */
	.svc-hero .e-con.svc-hero__inner.svc-hero__inner{--flex-direction:column;flex-direction:column;align-items:flex-start;}
	.svc-hero .svc-hero__col,.svc-hero .svc-hero__text,.svc-hero .svc-hero__media{flex:1 1 100%;width:100%;}
	.svc-hero .svc-hero__media{order:-1;text-align:left;}
	.svc-hero__media .svc-hero__img img{max-width:320px;}
}
@media (max-width:480px){
	/* Logo bottom never exceeds ~95px below 480px, so the clearance above can relax. */
	.svc-hero .svc-hero__inner{padding-top:112px;}
	.svc-hero__title .elementor-heading-title{font-size:29px;}
	.svc-hero .svc-hero__bullet{flex:1 1 100%;}
}

/* ============================ SVC – 03 Services (tabs) ============================ */
.svc-services{background:#F1F6FA;}
.svc-services .svc-services__inner{max-width:1200px;margin:0 auto;padding:84px 24px;}
.svc-services .svc-services__head{text-align:center;max-width:760px;margin:0 auto 38px;align-items:center;}
.svc-services__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:34px;line-height:1.2;color:#170D3D;margin:0 0 14px;}
.svc-services__subtext,.svc-services__subtext p{color:#5A5A72;font-size:17px;line-height:1.6;margin:0;}

/* Tab nav (injected by service-sections.js) */
.svc-tabs__nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px;}
.svc-tabs__tab{font-family:"Heebo",sans-serif;cursor:pointer;padding:12px 22px;border-radius:999px;border:1px solid #d7e3ee;background:#fff;color:#170D3D;font-weight:600;font-size:15px;line-height:1;transition:background .18s ease,color .18s ease,border-color .18s ease;}
.svc-tabs__tab:hover{border-color:#0AA3D6;color:#0AA3D6;}
.svc-tabs__tab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(10,163,214,.3);}
.svc-tabs__tab.is-active{background:#0AA3D6;border-color:#0AA3D6;color:#fff;}

/* Panels (Service Tab Panel loop item). Scoped under .svc-tabs to beat Elementor's
   .e-con default (flex-direction:column). */
.svc-tabs .svc-tab-panel{display:flex;flex-direction:row;gap:44px;align-items:center;background:#fff;border-radius:20px;padding:40px 44px;box-shadow:0 12px 40px rgba(17,17,51,.07);}
.svc-tabs .svc-tab-panel__body{flex:1 1 54%;display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.svc-tabs .svc-tab-panel__media{flex:1 1 46%;text-align:center;}
.svc-tab-panel__icon{flex:0 0 auto;width:60px;height:60px;background:#EAF7FC;border-radius:14px;}
.svc-tab-panel__icon .elementor-widget-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.svc-tab-panel__icon :is(img,svg){width:34px;height:34px;object-fit:contain;}
.svc-tab-panel__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:26px;line-height:1.25;color:#170D3D;margin:0;}
.svc-tab-panel__desc,.svc-tab-panel__desc p{color:#5A5A72;font-size:16px;line-height:1.65;margin:0;}
.svc-tab-panel__link .elementor-heading-title{margin:0;line-height:normal;}
.svc-tab-panel__link .elementor-heading-title a{display:inline-block;background:#0AA3D6;color:#fff;border-radius:8px;font-family:"Heebo",sans-serif;font-weight:600;font-size:15px;padding:12px 26px;text-decoration:none;transition:background .2s ease;}
.svc-tab-panel__link .elementor-heading-title a:hover{background:#170D3D;color:#fff;}
.svc-tab-panel__img img{max-width:100%;height:auto;border-radius:14px;}

/* Tab visibility: JS hides inactive panels. Without JS, all panels show stacked. */
.svc-tabs .elementor-loop-container{gap:24px;}
.svc-tabs .e-loop-item[hidden]{display:none;}

@media (max-width:880px){
	.svc-services .svc-services__inner{padding:60px 24px;}
	.svc-tabs .svc-tab-panel{flex-direction:column;padding:28px;gap:24px;}
	.svc-tabs .svc-tab-panel__body,.svc-tabs .svc-tab-panel__media{flex:1 1 100%;width:100%;}
	.svc-tabs .svc-tab-panel__media{order:-1;}
	.svc-services__title .elementor-heading-title{font-size:27px;}
}

/* ============================ SVC – 13 FAQ (accordion) ============================ */
.svc-faqs .elementor-loop-container{gap:0;max-width:860px;margin:0 auto;}
.svc-faqs .e-loop-item{border-bottom:1px solid #e6ebf1;}
.svc-faq{padding:0;}
.svc-faq__q .elementor-heading-title{
	position:relative;margin:0;padding:14px 44px 14px 0;cursor:pointer;
	font-family:"Heebo",sans-serif;font-size:17px;font-weight:600;line-height:1.4;color:#170D3D;
	transition:color .15s ease;
}
.svc-faq__q:hover .elementor-heading-title{color:#0AA3D6;}
.svc-faq__q .elementor-heading-title::after{
	content:"";position:absolute;right:8px;top:16px;width:11px;height:11px;
	border-right:2px solid #0AA3D6;border-bottom:2px solid #0AA3D6;
	transform:rotate(45deg);transition:transform .2s ease;
}
.svc-faq.is-open .svc-faq__q .elementor-heading-title::after{transform:rotate(-135deg);top:21px;}
.svc-faq__q:focus-visible{outline:none;}
.svc-faq__q:focus-visible .elementor-heading-title{color:#0AA3D6;}
.svc-faq__a{padding:0 44px 24px 0;}
.svc-faq__a[hidden]{display:none;}
.svc-faq__a-inner,.svc-faq__a-inner p{color:#5A5A72;font-size:16px;line-height:1.7;margin:0 0 .6em;}
.svc-faq__a-inner p:last-child{margin-bottom:0;}

/* ================== SVC – 09 Testimonials + SVC – 10 Portfolio ================== */
.svc-tst-sec .svc-tst-sec__inner,
.svc-pf-sec .svc-pf-sec__inner{max-width:1200px;margin:0 auto;padding:84px 24px;}
.svc-tst-sec .svc-tst-sec__head,
.svc-pf-sec .svc-pf-sec__head{text-align:center;max-width:760px;margin:0 auto 40px;align-items:center;}
.svc-sec__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:34px;line-height:1.2;color:#170D3D;margin:0 0 14px;}
.svc-sec__subtext,.svc-sec__subtext p{color:#5A5A72;font-size:17px;line-height:1.6;margin:0;}
.svc-tst .elementor-loop-container,
.svc-pf .elementor-loop-container{gap:28px;}
@media (max-width:880px){
	.svc-tst-sec .svc-tst-sec__inner,.svc-pf-sec .svc-pf-sec__inner{padding:60px 24px;}
	.svc-sec__title .elementor-heading-title{font-size:27px;}
}

/* Compact portfolio card — dedicated loop item "Portfolio Card — Compact" (#3164),
   used ONLY by the service-page portfolio grid (.svc-pf). Home / Portfolio keep #2722. */
.svc-pf .elementor-loop-container{gap:26px;}
.svc-pf-card{
	display:flex;flex-direction:column;height:100%;
	background:#fff;border-radius:18px;overflow:hidden;
	box-shadow:0 12px 40px rgba(17,17,51,.08);
	transition:transform .25s ease,box-shadow .25s ease;
}
.svc-pf-card:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(17,17,51,.15);}
.svc-pf-card__title .elementor-heading-title{
	font-family:"Heebo",sans-serif;font-weight:700;font-size:19px;line-height:1.3;color:#170D3D;
	margin:0;padding:22px 24px 14px;
}
/* Scrollable screenshot: the full-height image sits in a fixed-height window and
   slides up on hover to reveal the rest of the page (like scrolling the site).
   translateY %% is relative to the image's own height; min(0, …) means short
   (landscape) images simply don't move. */
.svc-pf-card__cover{position:relative;width:100%;height:230px;overflow:hidden;background:#eef2f7;}
.svc-pf-card__cover .elementor-widget-container{height:auto;line-height:0;}
.svc-pf-card__cover img{width:100%;height:auto !important;display:block;transition:transform 5s ease;}
.svc-pf-card:hover .svc-pf-card__cover img{transform:translateY(min(0px, calc(230px - 100%)));}
.svc-pf-card__cta{margin-top:auto;padding:18px 24px 24px;}
.svc-pf-card__cta .elementor-button{
	background:#0AA3D6;color:#fff;border-radius:8px;
	font-family:"Heebo",sans-serif;font-weight:600;font-size:14px;padding:11px 22px;
	transition:background .2s ease;
}
.svc-pf-card__cta .elementor-button:hover{background:#170D3D;}
@media (prefers-reduced-motion:reduce){
	.svc-pf-card__cover img,.svc-pf-card:hover .svc-pf-card__cover img{transition:none;transform:none;}
	.svc-pf-card{transition:none;}
	.svc-pf-card:hover{transform:none;}
}

/* ==================== Hide-if-empty gates ==================== */
/* Category with no service posts -> hide the Services tabs section. */
.saiftec-no-services .svc-services{display:none;}
/* Category with no matching FAQs -> hide the whole FAQ section. */
.saiftec-no-faqs .svc-faq-sec{display:none;}
/* FAQ accent card paragraph. The category template uses a V4 e-paragraph here, whose value is a
   nested html-v3 structure that an ACF dynamic tag cannot bind to; the single-service template uses a
   text-editor so the string can come from a field, and a text-editor inherits the body ink instead of
   the atomic widget's light default. This restores the contrast against the teal card. */
.svc-faq-card__text,
.svc-faq-card__text p{color:rgba(255,255,255,.92);font-size:16px;line-height:1.6;margin:0;}
/* Hide any hero bullet whose ACF text is empty (unseeded categories). */
.svc-hero__bullet .elementor-heading-title:empty{display:none;}

/* ---- the case-study slider beside Common Questions ------------------------------------------
 * Replaced the "Other questions?" card in the FAQ row on the category archive. Widths, gap and the
 * stacking breakpoint are Elementor controls on the containers; only what Elementor cannot express
 * lives here.
 */
/* The slider column is 470px in Elementor; these two lines make that a FLOOR rather than a target, so
   the pair wraps to two lines the moment both columns cannot have their minimum. That is what keeps
   the card the same size on every desktop width — a percentage split gave a 324px card at 1025px,
   narrower than the 390px phone card, while the FAQ column beside it still had slack. */
.svc-faq-sec > .e-con-inner{flex-wrap:wrap;}
.svc-faq-cases{flex:0 1 auto;min-width:min(470px,100%);}
/* The FAQ column takes whatever is left, down to a width its questions can still be read at. */
.svc-faq-sec > .e-con-inner > :first-child{flex:1 1 440px;min-width:min(440px,100%);}
/* A Swiper track is one very wide flex row, so without this the column's min-content width would be
   the whole track and the row would never fit. */
.svc-faq-cases .svc-faq-cases__slider,
.svc-faq-cases .swiper{min-width:0;max-width:100%;}
.svc-faq-cases .svc-eyebrow .elementor-heading-title{text-align:left;}
/* Once wrapped, cap the card near the width it was designed at. Left full width it would span the
   whole inner container and its 16:9 cover alone would be over 500px tall, which reads as a
   different component from the one on /portfolio/. */
@media (max-width:1024px){
	.svc-faq-cases{max-width:620px;margin-left:auto;margin-right:auto;}
}

/* ============================ SVC – 04 Tech Stack (navy) ============================ */
.svc-tech .svc-tech__inner{max-width:1200px;margin:0 auto;padding:84px 24px;display:flex;flex-direction:row;align-items:center;gap:56px;}
.svc-tech .svc-tech__text{flex:1 1 44%;}
.svc-tech .svc-tech__logos{flex:1 1 56%;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.svc-tech__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:32px;line-height:1.2;color:#fff;margin:0 0 16px;}
.svc-tech__desc,.svc-tech__desc p{color:rgba(255,255,255,.8);font-size:16px;line-height:1.65;margin:0 0 24px;}
.svc-tech__cta .elementor-button{background:#0AA3D6;color:#fff;border-radius:8px;font-family:"Heebo",sans-serif;font-weight:600;font-size:15px;padding:13px 26px;transition:background .2s ease;}
.svc-tech__cta .elementor-button:hover{background:#fff;color:#170D3D;}
.svc-tech__logo{background:#fff;border-radius:12px;aspect-ratio:3/2;}
.svc-tech__logo .elementor-widget-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:14px;}
.svc-tech__logo :is(img,svg){max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
/* Gate */
.saiftec-no-tech .svc-tech{display:none;}
/* Tablet + mobile: stack the columns and show logos 2 per row. */
@media (max-width:1024px){
	.svc-tech .svc-tech__inner{flex-direction:column;align-items:flex-start;padding:60px 24px;gap:32px;}
	.svc-tech .svc-tech__text,.svc-tech .svc-tech__logos{flex:1 1 100%;width:100%;}
	.svc-tech .svc-tech__logos{grid-template-columns:repeat(2,1fr);}
	.svc-tech__title .elementor-heading-title{font-size:26px;}
}

/* ============================ SVC – 07 Benefits (accordion) ============================ */
.svc-benefits .svc-benefits__inner{max-width:1200px;margin:0 auto;padding:84px 24px;display:flex;flex-direction:row;align-items:flex-start;gap:56px;}
.svc-benefits .svc-benefits__intro-col{flex:1 1 42%;display:flex;flex-direction:column;gap:18px;}
.svc-benefits .svc-benefits__acc{flex:1 1 58%;display:flex;flex-direction:column;gap:14px;}
.svc-benefits__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:32px;line-height:1.2;color:#170D3D;margin:0;}
.svc-benefits__intro,.svc-benefits__intro p{color:#5A5A72;font-size:17px;line-height:1.6;margin:0;}
.svc-benefits__img img{max-width:100%;height:auto;border-radius:16px;margin-top:6px;}

/* Accordion item */
.svc-benefit{background:#fff;border:1px solid #e6ebf1;border-radius:14px;overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease;}
.svc-benefit.is-open{border-color:#cfe7f3;box-shadow:0 14px 34px rgba(17,17,51,.08);}
.svc-benefits .svc-benefit__head{display:flex;flex-direction:row;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;position:relative;}
.svc-benefit__head::after{
	content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-7px;
	border-right:2px solid #0AA3D6;border-bottom:2px solid #0AA3D6;transform:rotate(45deg);transition:transform .2s ease;
}
.svc-benefit.is-open .svc-benefit__head::after{transform:rotate(-135deg);margin-top:-3px;}
.svc-benefit__icon{flex:0 0 auto;width:44px;height:44px;background:#EAF7FC;border-radius:11px;}
.svc-benefit__icon .elementor-widget-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.svc-benefit__icon :is(img,svg){width:26px;height:26px;object-fit:contain;}
.svc-benefit__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:#170D3D;margin:0;padding-right:24px;}
.svc-benefit__body{padding:0 22px 20px 80px;}
.svc-benefit__body[hidden]{display:none;}
.svc-benefit__text,.svc-benefit__text p{color:#5A5A72;font-size:15px;line-height:1.65;margin:0;}

.saiftec-no-benefits .svc-benefits{display:none;}
@media (max-width:880px){
	.svc-benefits .svc-benefits__inner{flex-direction:column;align-items:stretch;padding:60px 24px;gap:32px;}
	.svc-benefits .svc-benefits__intro-col,.svc-benefits .svc-benefits__acc{flex:1 1 100%;width:100%;}
	.svc-benefits__heading .elementor-heading-title{font-size:26px;}
	.svc-benefit__body{padding-left:22px;}
}

/* GC — Testimonials CSS moved to testimonials.css (loads on home + service, wherever the component is used). */

/* ============================ SVC – 08 Industries (carousel) ============================ */
.svc-industries .svc-industries__inner{max-width:1200px;margin:0 auto;padding:84px 24px;display:flex;flex-direction:row;align-items:center;gap:48px;}
.svc-industries .svc-industries__intro{flex:1 1 34%;display:flex;flex-direction:column;gap:16px;}
.svc-industries .svc-industries__col{flex:1 1 66%;min-width:0;}
.svc-industries__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:34px;line-height:1.2;color:#170D3D;margin:0;}
.svc-industries__text,.svc-industries__text p{color:#5A5A72;font-size:16px;line-height:1.7;margin:0;}
/* Industry card: portrait image + linked title pill pinned to the bottom */
.svc-industries .svc-ind-card{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:#eef2f7;}
.svc-industries .svc-ind-card__img{position:absolute;inset:0;margin:0;}
.svc-industries .svc-ind-card__img .elementor-widget-container{height:100%;}
.svc-ind-card__img img{width:100%;height:100%;object-fit:cover;display:block;}
.svc-ind-card__label{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;}
.svc-ind-card__label .elementor-button{width:100%;justify-content:center;background:#fff;color:#170D3D;border-radius:12px;font-family:"Heebo",sans-serif;font-weight:700;font-size:16px;padding:14px 12px;box-shadow:0 10px 26px rgba(17,17,51,.22);transition:background .2s ease,color .2s ease;}
.svc-ind-card__label .elementor-button:hover{background:#0AA3D6;color:#fff;}
.svc-ind__carousel .elementor-swiper-button{color:#170D3D;}
.svc-ind__carousel .swiper-pagination-bullet-active{background:#0AA3D6;}
.saiftec-no-industries .svc-industries{display:none;}
@media (max-width:880px){
	.svc-industries .svc-industries__inner{flex-direction:column;align-items:stretch;padding:60px 24px;gap:30px;}
	.svc-industries .svc-industries__intro,.svc-industries .svc-industries__col{flex:1 1 100%;width:100%;}
	.svc-industries__title .elementor-heading-title{font-size:27px;}
}

/* GC — Lead Form CSS moved to leadform.css (loads on Home + service via inc/leadform.php,
   wherever the shared component renders). */

/* SVC1 – 02 Overview REMOVED by user decision (2026-07-23) — it duplicated the Features list
   (post_content carries the same "What is included" copy). Section, fields, and gate deleted. */

/* ============================ SVC1 – 03 Features / What's Included ============================ */
/* Light band; cards rendered by the SaifTec Feature List widget (ACF repeater `service_features`).
   Gate: .svc1-no-features (toggle off / empty repeater) hides the section. */
/* Premium two-column "Everything Included": left marketing (badge, split heading, description,
   illustration, trust metrics) + right accordion. Brand-scoped tokens — flip --inc-accent to
   #2563EB for the royal-blue brief variant; everything else follows. */
.svc1-inc{
	--inc-navy:#170D3D; --inc-accent:#0AA3D6; --inc-accent-2:#3A0CA3;
	--inc-ink:#5A5A72; --inc-line:#e8edf5;
	background:#F8FAFC;position:relative;overflow:hidden;
}
/* soft floating gradient decorations */
.svc1-inc::before,.svc1-inc::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.5;z-index:0;}
.svc1-inc::before{width:420px;height:420px;top:-140px;right:-120px;background:radial-gradient(circle,rgba(10,163,214,.18),transparent 70%);}
.svc1-inc::after{width:380px;height:380px;bottom:-160px;left:-120px;background:radial-gradient(circle,rgba(58,12,163,.14),transparent 70%);}
.svc1-inc .svc1-inc__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:96px 24px;display:flex;flex-direction:row;align-items:flex-start;gap:64px;}
.svc1-inc .svc1-inc__left{flex:0 0 40%;min-width:0;display:flex;flex-direction:column;gap:20px;}
.svc1-inc .svc1-inc__right{flex:1 1 60%;min-width:0;}
/* badge pill */
.svc1-inc__badge .elementor-heading-title{display:inline-flex;align-items:center;gap:8px;background:rgba(10,163,214,.10);color:var(--inc-accent);font-family:"Heebo",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin:0;}
.svc1-inc__badge .elementor-heading-title::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");}
/* split heading */
.svc1-inc__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:800;font-size:44px;line-height:1.12;color:var(--inc-navy);margin:0;}
.svc1-inc__title-accent .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:800;font-size:44px;line-height:1.12;margin:2px 0 0;background:linear-gradient(90deg,var(--inc-accent),var(--inc-accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--inc-accent);width:max-content;max-width:100%;}
.svc1-inc__title-accent .elementor-heading-title::after{content:"";display:block;width:72px;height:4px;border-radius:4px;margin-top:16px;background:linear-gradient(90deg,var(--inc-accent),var(--inc-accent-2));}
.svc1-inc__desc,.svc1-inc__desc p{color:var(--inc-ink);font-size:17px;line-height:1.75;margin:0;}
/* illustration */
.svc1-inc__illus{margin:6px 0 4px;}
.svc1-inc__illus img{width:100%;height:auto;border-radius:20px;box-shadow:0 30px 60px rgba(17,17,51,.14);display:block;}
/* trust metrics */
.svc1-inc__metrics{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:4px;}
.svc1-inc__metric .elementor-heading-title{position:relative;display:inline-flex;align-items:center;margin:0;padding-left:26px;font-family:"Heebo",sans-serif;font-weight:600;font-size:14.5px;color:var(--inc-navy);}
.svc1-inc__metric .elementor-heading-title:empty{display:none;}
.svc1-inc__metric .elementor-heading-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:19px;height:19px;background:var(--inc-accent);border-radius:50%;-webkit-mask:no-repeat center/12px;mask:no-repeat center/12px;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");}

/* ---- right column: accordion ---- */
.svc1-inc-acc{display:flex;flex-direction:column;gap:14px;}
.svc1-inc-item{background:#fff;border:1px solid var(--inc-line);border-radius:18px;box-shadow:0 8px 24px rgba(17,17,51,.05);overflow:hidden;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;}
.svc1-inc-item:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(17,17,51,.10);}
.svc1-inc-item.is-open{border-color:transparent;box-shadow:0 18px 40px rgba(37,37,80,.12);background:linear-gradient(180deg,rgba(10,163,214,.055),rgba(255,255,255,0) 60%);position:relative;}
.svc1-inc-item.is-open::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--inc-accent),var(--inc-accent-2));}
.svc1-inc-item__head{width:100%;display:flex;align-items:center;gap:16px;padding:20px 22px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;}
/* Astra fills EVERY <button> with --ast-global-color-1 via `button:focus, button:hover, ...` at
   specificity (0,1,1), which outranks the (0,1,0) rule above. Clicking a row therefore left it
   focused and painted the whole header solid teal, with the title still navy on top of it. Scoping
   the reset to .svc1-inc-acc gets (0,2,0) so it wins, without touching any real button on the site. */
.svc1-inc-acc .svc1-inc-item__head:hover,
.svc1-inc-acc .svc1-inc-item__head:focus,
.svc1-inc-acc .svc1-inc-item__head:active{background:transparent;border:0;color:inherit;box-shadow:none;}
/* That same Astra rule set also sets outline:0 on button:focus, removing the row's only keyboard
   affordance. Put a ring back for keyboard users only, so pointer clicks stay visually unchanged. */
.svc1-inc-acc .svc1-inc-item__head:focus-visible{outline:2px solid var(--inc-accent);outline-offset:-3px;}
.svc1-inc-item__icon{flex:0 0 auto;width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,rgba(10,163,214,.14),rgba(58,12,163,.12));display:flex;align-items:center;justify-content:center;transition:transform .25s ease;}
.svc1-inc-item:hover .svc1-inc-item__icon,.svc1-inc-item.is-open .svc1-inc-item__icon{transform:scale(1.06);}
.svc1-inc-item__icon :is(img,svg){width:28px;height:28px;object-fit:contain;display:block;}
.svc1-inc-item__labels{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.svc1-inc-item__title{font-family:"Heebo",sans-serif;font-weight:700;font-size:18px;line-height:1.3;color:var(--inc-navy);}
.svc1-inc-item__sub{font-size:14px;line-height:1.4;color:var(--inc-ink);}
.svc1-inc-item__chev{flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--inc-accent);border-bottom:2px solid var(--inc-accent);transform:rotate(45deg);transition:transform .3s ease;margin-left:8px;}
.svc1-inc-item.is-open .svc1-inc-item__chev{transform:rotate(-135deg);}
/* collapsible panel: open by default (no-JS), collapsed once JS marks the accordion .is-js */
.svc1-inc-item__panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease,visibility .3s ease;}
.svc1-inc-item__panel-inner{overflow:hidden;min-height:0;padding:0 22px 22px 90px;}
.svc1-inc-acc.is-js .svc1-inc-item__panel{grid-template-rows:0fr;visibility:hidden;}
.svc1-inc-acc.is-js .svc1-inc-item.is-open .svc1-inc-item__panel{grid-template-rows:1fr;visibility:visible;}
.svc1-inc-item__text{color:var(--inc-ink);font-size:15.5px;line-height:1.7;margin:0 0 14px;}
.svc1-inc-item__cta{display:inline-flex;align-items:center;gap:7px;font-family:"Heebo",sans-serif;font-weight:700;font-size:14.5px;color:#fff;background:linear-gradient(90deg,var(--inc-accent),var(--inc-accent-2));padding:11px 22px;border-radius:999px;text-decoration:none;box-shadow:0 8px 20px rgba(10,163,214,.28);transition:transform .2s ease,box-shadow .2s ease;}
.svc1-inc-item__cta::after{content:"\2192";}
.svc1-inc-item__cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,163,214,.36);color:#fff;}

/* reveal-on-scroll (added by JS via .svc1-reveal; static + visible without JS / reduced-motion) */
.svc1-inc.svc1-reveal .svc1-inc__left,
.svc1-inc.svc1-reveal .svc1-inc__illus,
.svc1-inc.svc1-reveal .svc1-inc-item{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease;}
.svc1-inc.svc1-reveal .is-in{opacity:1;transform:none;}
.svc1-inc.svc1-reveal .svc1-inc-item:nth-child(2){transition-delay:.06s;}
.svc1-inc.svc1-reveal .svc1-inc-item:nth-child(3){transition-delay:.12s;}
.svc1-inc.svc1-reveal .svc1-inc-item:nth-child(4){transition-delay:.18s;}
.svc1-inc.svc1-reveal .svc1-inc-item:nth-child(5){transition-delay:.24s;}
.svc1-inc.svc1-reveal .svc1-inc-item:nth-child(6){transition-delay:.30s;}
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
	.svc1-inc__illus img{animation:svc1float 7s ease-in-out infinite;}
	@keyframes svc1float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}
@media (max-width:980px){
	.svc1-inc .svc1-inc__inner{flex-direction:column;gap:40px;padding:72px 24px;}
	.svc1-inc .svc1-inc__left,.svc1-inc .svc1-inc__right{flex:1 1 auto;width:100%;}
	.svc1-inc__title .elementor-heading-title,.svc1-inc__title-accent .elementor-heading-title{font-size:36px;}
}
@media (max-width:600px){
	.svc1-inc__title .elementor-heading-title,.svc1-inc__title-accent .elementor-heading-title{font-size:30px;}
	.svc1-inc-item__head{padding:16px 16px;gap:13px;min-height:48px;}
	.svc1-inc-item__icon{width:46px;height:46px;}
	.svc1-inc-item__panel-inner{padding:0 16px 18px 16px;}
}
@media (prefers-reduced-motion:reduce){
	.svc1-inc *,.svc1-inc-item,.svc1-inc-item__panel{transition:none!important;animation:none!important;}
	.svc1-inc.svc1-reveal .svc1-inc__left,.svc1-inc.svc1-reveal .svc1-inc__illus,.svc1-inc.svc1-reveal .svc1-inc-item{opacity:1;transform:none;}
}
.svc1-featlist{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
/* 1 backs a half-width column, e.g. Challenges stacked beside Solutions on the industry pages. */
.svc1-featlist--cols-1{grid-template-columns:1fr;}
.svc1-featlist--cols-2{grid-template-columns:repeat(2,1fr);}
.svc1-featlist--cols-4{grid-template-columns:repeat(4,1fr);}
/* 5 and 6 back the dense industry-page grids (e.g. 12 solutions as 6×2). */
.svc1-featlist--cols-5{grid-template-columns:repeat(5,1fr);}
.svc1-featlist--cols-6{grid-template-columns:repeat(6,1fr);}
.svc1-featlist__item{background:#fff;border-radius:16px;padding:28px 26px;box-shadow:0 10px 30px rgba(17,17,51,.07);display:flex;flex-direction:column;gap:10px;}
.svc1-featlist__icon{display:inline-flex;width:52px;height:52px;border-radius:12px;background:rgba(10,163,214,.10);align-items:center;justify-content:center;}
.svc1-featlist__icon :is(img,svg){width:30px;height:30px;object-fit:contain;display:block;}
.svc1-featlist__title{font-family:"Heebo",sans-serif;font-weight:700;font-size:18px;line-height:1.35;color:#170D3D;margin:0;}
.svc1-featlist__text{color:#5A5A72;font-size:15px;line-height:1.65;margin:0;}
.svc1-featlist--empty{padding:18px;border:1px dashed #b9c4d8;border-radius:10px;color:#5A5A72;font-size:14px;}
.svc1-no-features .svc1-features{display:none;}

/* Section eyebrows (tech / benefits / portfolio / FAQ). These were static UPPERCASE strings typed into
   Elementor; now that they come from ACF the stored value is readable Title Case, so the uppercasing
   lives here. text-transform only, deliberately: every other property still comes from the widget's
   own settings, so the rendered result is identical to the hand-typed version it replaced. */
.svc-eyebrow .elementor-heading-title{text-transform:uppercase;}

/* ============================ GC / SVC1 – 04 Process (numbered steps) ============================ */
/* Global Component: steps live once on the Global Components options page (`gcp_*`), rendered by the
   SaifTec Feature List widget (source=options, style=steps). Gate: .svc1-no-process. */
.svc1-process .svc1-process__inner{max-width:1200px;margin:0 auto;padding:84px 24px;display:flex;flex-direction:column;gap:14px;}
.svc1-process__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:34px;line-height:1.2;color:#170D3D;margin:0;text-align:center;}
.svc1-process__intro,.svc1-process__intro p{color:#5A5A72;font-size:16px;line-height:1.7;margin:0 auto;max-width:720px;text-align:center;}
.svc1-featlist--steps{counter-reset:svc1step;}
.svc1-featlist--steps .svc1-featlist__item{counter-increment:svc1step;background:transparent;box-shadow:none;border:1px solid rgba(23,13,61,.10);position:relative;padding-top:70px;}
.svc1-featlist--steps .svc1-featlist__item::before{content:counter(svc1step,decimal-leading-zero);position:absolute;top:22px;left:26px;font-family:"Heebo",sans-serif;font-weight:800;font-size:26px;line-height:1;color:#fff;background:#0AA3D6;border-radius:12px;padding:9px 12px;}
.svc1-no-process .svc1-process{display:none;}

/* ---- SVC1 process treatment ----------------------------------------------------------------------
   Scoped to .svc1-process and NOT to .svc1-featlist--steps, because the same global gcp_steps rows
   also render inside .ind-process (the Industries hub), which keeps the plainer card above. Every
   selector here is at least (0,2,0) so it outranks the shared .svc1-featlist--steps rules without
   !important.
   One accent token: the brief asked for the site's theme navy in place of the reference's blue.

   OPTED IN so far: service pages, `svc1-process ind1-process` (industry terms), and as of 2026-08-03
   `svc1-process loc-process` (city pages). A page type adopts this by adding `svc1-process` to its
   band and naming its children `svc1-process__*` — but note that a page-type stylesheet loading
   AFTER this one can silently beat these rules at equal specificity, which is what the retired
   `.loc-process .svc1-featlist…` timeline did. Check for that when opting a fourth type in. */
.svc1-process{--pr-navy:#170d3dfa;--pr-ink:#5A5A72;--pr-line:rgba(23,13,61,.10);}
.svc1-process .svc1-process__inner{gap:0;}
.svc1-process__eyebrow .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--pr-navy);margin:0;text-align:center;}
.svc1-process .svc1-process__heading .elementor-heading-title{font-size:40px;font-weight:800;margin:10px 0 0;}
.svc1-process .svc1-process__intro,
.svc1-process .svc1-process__intro p{font-size:17px;margin:14px auto 0;}
/* Short rule under the intro, matching the reference's centred divider. */
.svc1-process .svc1-process__intro::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--pr-navy);margin:22px auto 0;}

/* 4 + 3 layout: flex-wrap rather than grid so the trailing row of 3 centres itself. */
.svc1-process .svc1-process__list{position:relative;margin-top:44px;}
.svc1-process .svc1-featlist{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 30px;grid-template-columns:none;margin:0;}
.svc1-process .svc1-featlist__item{flex:0 0 calc(25% - 22.5px);min-width:0;position:relative;background:#fff;border:1px solid var(--pr-line);border-radius:18px;box-shadow:0 10px 30px rgba(17,17,51,.06);padding:26px 22px 30px;text-align:center;align-items:center;gap:0;overflow:visible;}
/* Rounded accent under each card, as in the reference. */
.svc1-process .svc1-featlist__item::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--pr-navy);}
/* The number badge: a circle top-left, inside the card. Replaces the shared square badge. */
.svc1-process .svc1-featlist--steps .svc1-featlist__item::before{content:counter(svc1step,decimal-leading-zero);position:absolute;top:20px;left:20px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;background:var(--pr-navy);color:#fff;font-family:"Heebo",sans-serif;font-weight:800;font-size:15px;line-height:1;letter-spacing:.02em;}
.svc1-process .svc1-featlist--steps .svc1-featlist__item{padding-top:26px;}
.svc1-process .svc1-featlist__icon{width:64px;height:64px;border-radius:17px;background:rgba(23,13,61,.055);margin:14px auto 0;}
.svc1-process .svc1-featlist__icon :is(img,svg){width:30px;height:30px;}
.svc1-process .svc1-featlist__title{margin:18px 0 0;font-size:18px;}
.svc1-process .svc1-featlist__title::after{content:"";display:block;width:26px;height:3px;border-radius:3px;background:var(--pr-navy);margin:11px auto 0;}
.svc1-process .svc1-featlist__text{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--pr-ink);}

/* Chevron connectors, sitting in the gutter between cards. The item's own ::before is the number
   badge and its ::after is the bottom accent, so the connector hangs off the last child (__text).
   Shown on every card except the last of each row: the 4th and the 7th. */
.svc1-process .svc1-featlist__text::after{content:"";position:absolute;top:50%;left:calc(100% + 15px);width:36px;height:36px;margin-top:-18px;margin-left:-18px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(17,17,51,.10);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23170d3d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");background-repeat:no-repeat;background-position:center;background-size:17px 17px;}
.svc1-process .svc1-featlist__item:nth-child(4) .svc1-featlist__text::after,
.svc1-process .svc1-featlist__item:last-child .svc1-featlist__text::after{content:none;}
/* Dashed track behind the two rows, the reference's connecting frame. */
.svc1-process .svc1-process__list::before{content:"";position:absolute;z-index:0;left:-46px;right:-46px;top:96px;bottom:26px;border:2px dashed rgba(23,13,61,.13);border-radius:44px;pointer-events:none;}
.svc1-process .svc1-featlist{position:relative;z-index:1;}

/* ---- CTA bar under the steps (gcp_cta_*) ---- */
/* GRID, not flex, on purpose. Elementor's frontend.min.css is enqueued AFTER this stylesheet, so at
   equal specificity its `.e-con` rules win and it drives child sizing through custom properties
   (--width:100%, --flex-grow) rather than plain longhands: a `flex:1 1 auto` here silently did
   nothing and the nested copy container took the full row, wrapping both buttons onto their own
   lines. Grid tracks size the children from the outside, so the widget's own width:100% resolves
   against its track and no Elementor internals need overriding. */
.svc1-process .svc1-process__cta{margin-top:54px;background:rgba(23,13,61,.05);border-radius:22px;padding:26px 30px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:22px;}
.svc1-process .svc1-process__cta-ico img{width:64px;height:64px;padding:18px;box-sizing:border-box;border-radius:50%;background:var(--pr-navy);display:block;}
.svc1-process .svc1-process__cta-copy{display:flex;flex-direction:column;gap:3px;}
.svc1-process .svc1-process__cta-title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:21px;line-height:1.3;color:var(--pr-navy);margin:0;text-align:left;}
.svc1-process .svc1-process__cta-text,
.svc1-process .svc1-process__cta-text p{color:var(--pr-ink);font-size:15.5px;line-height:1.5;margin:0;text-align:left;}
/* border:0 explicitly: Astra colours every button's border with its teal accent, and although it also
   zeroes the width, leaving the colour in place means a stray #0AA3D6 sits one width-change away from
   appearing in a band that is meant to be entirely theme navy. */
.svc1-process .svc1-process__cta-phone .elementor-button,
.svc1-process .svc1-process__cta-btn .elementor-button{font-family:"Heebo",sans-serif;font-weight:700;font-size:15.5px;border:0;border-radius:999px;padding:15px 26px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.svc1-process .svc1-process__cta-phone .elementor-button{background:#fff;color:var(--pr-navy);box-shadow:0 8px 22px rgba(17,17,51,.09);}
.svc1-process .svc1-process__cta-phone .elementor-button::before{content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/></svg>");}
.svc1-process .svc1-process__cta-btn .elementor-button{background:var(--pr-navy);color:#fff;box-shadow:0 10px 26px rgba(23,13,61,.24);}
.svc1-process .svc1-process__cta-btn .elementor-button::after{content:"\2192";}
.svc1-process .svc1-process__cta-phone .elementor-button:hover,
.svc1-process .svc1-process__cta-btn .elementor-button:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(23,13,61,.28);}
.svc1-no-gcpcta .svc1-process .svc1-process__cta{display:none;}

@media (max-width:1024px){
	.svc1-process .svc1-featlist__item{flex:0 0 calc(50% - 15px);}
	/* The connectors and the dashed track only read as a flow on a 4-up row. */
	.svc1-process .svc1-featlist__text::after{content:none;}
	.svc1-process .svc1-process__list::before{display:none;}
	.svc1-process .svc1-process__heading .elementor-heading-title{font-size:32px;}
}
@media (max-width:767px){
	.svc1-process .svc1-featlist__item{flex:0 0 100%;}
	.svc1-process .svc1-process__heading .elementor-heading-title{font-size:27px;}
	.svc1-process .svc1-process__cta{grid-template-columns:minmax(0,1fr);justify-items:stretch;padding:24px 22px;gap:16px;}
	.svc1-process .svc1-process__cta-phone .elementor-button,
	.svc1-process .svc1-process__cta-btn .elementor-button{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
	.svc1-process .svc1-process__cta-phone .elementor-button,
	.svc1-process .svc1-process__cta-btn .elementor-button{transition:none;}
}

/* ============================ SVC1 – 10 Related Services ============================ */
/* Reference-style cards, accent #3A0CA3: pill kicker + centered heading/subtext; each card =
   icon badge + auto number (CSS counter) + title + desc + check bullets + full-width button +
   purple bottom edge. Loop Grid (query svc1_related) over "Service Card — Related". */
.svc1-related{background:#f6f8fc;}
.svc1-related .svc1-related__inner{max-width:1200px;margin:0 auto;padding:84px 24px;display:flex;flex-direction:column;gap:12px;}
.svc1-related__kicker{text-align:center;}
.svc1-related__kicker .elementor-heading-title{display:inline-block;background:rgba(58,12,163,.08);color:#3A0CA3;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:8px 18px;border-radius:999px;margin:0;}
.svc1-related__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:36px;line-height:1.2;color:#170D3D;margin:0;text-align:center;}
.svc1-related__subtext,.svc1-related__subtext p{color:#5A5A72;font-size:16px;line-height:1.7;margin:0 auto;text-align:center;max-width:640px;}
.svc1-related__grid{margin-top:16px;}
.svc1-related__grid .elementor-loop-container{counter-reset:svc1rel;align-items:stretch;}
.svc1-related .e-loop-item{counter-increment:svc1rel;height:100%;}
.svc1-related .svc1-rel-card{background:#fff;border-radius:16px;border-bottom:4px solid #3A0CA3;box-shadow:0 12px 34px rgba(17,17,51,.08);padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;height:100%;}
/* top row: icon badge left, big number right */
.svc1-rel-card .svc1-rel-card__top{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;padding:0;}
.svc1-rel-card__top::after{content:counter(svc1rel,decimal-leading-zero);font-family:"Heebo",sans-serif;font-weight:800;font-size:26px;line-height:1;color:#3A0CA3;border-bottom:3px solid #3A0CA3;padding-bottom:6px;opacity:.85;}
.svc1-rel-card__icon .elementor-widget-container{width:64px;height:64px;border-radius:50%;background:rgba(58,12,163,.08);display:flex;align-items:center;justify-content:center;}
.svc1-rel-card__icon :is(img,svg){width:36px;height:36px;object-fit:contain;display:block;}
/* right-side illustration (Hero Right Image), reference-style */
.svc1-rel-card .svc1-rel-card__img{align-self:flex-end;width:82%;margin:2px 0 6px;}
.svc1-rel-card__img img{width:100%;height:140px;object-fit:cover;border-radius:12px;display:block;}
.svc1-rel-card__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:20px;line-height:1.3;color:#170D3D;margin:0;}
.svc1-rel-card__title .elementor-heading-title a{color:inherit;}
.svc1-rel-card__desc,.svc1-rel-card__desc p{color:#5A5A72;font-size:15px;line-height:1.65;margin:0;}
/* check bullets */
.svc1-rel-card__bullet .elementor-heading-title{position:relative;margin:0;padding-left:26px;font-family:"Heebo",sans-serif;font-weight:500;font-size:14.5px;line-height:1.55;color:#170D3D;}
.svc1-rel-card__bullet .elementor-heading-title::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:#3A0CA3;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='8.5 12.5 11 15 15.5 9.5'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='8.5 12.5 11 15 15.5 9.5'/></svg>");}
/* button pinned to bottom */
.svc1-rel-card .svc1-rel-card__btn{margin-top:auto;padding-top:6px;}
.svc1-rel-card__btn .elementor-button{width:100%;justify-content:center;background:#3A0CA3;color:#fff;border-radius:10px;font-family:"Heebo",sans-serif;font-weight:700;font-size:15px;padding:13px 18px;transition:background .2s ease;}
.svc1-rel-card__btn .elementor-button::after{content:"\2192";margin-left:8px;}
.svc1-rel-card__btn .elementor-button:hover{background:#2d0980;color:#fff;}
.svc1-no-related .svc1-related{display:none;}

/* ============================ SVC1 – 12 CTA band ============================ */
/* Navy band bound to the per-service CTA fields (service_cta_*). Gate: .svc1-no-cta. */
.svc1-cta{background:#170D3D;position:relative;overflow:hidden;}
.svc1-cta::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("/wp-content/uploads/2026/02/digital-marketing-agency-hero-img-bg-overlay-2.svg");background-size:cover;background-position:center;opacity:.12;}
.svc1-cta .svc1-cta__inner{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:72px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.svc1-cta__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:32px;line-height:1.25;color:#fff;margin:0;}
.svc1-cta__text,.svc1-cta__text p{color:rgba(255,255,255,.85);font-size:16px;line-height:1.7;margin:0;max-width:640px;}
.svc1-cta__btn .elementor-button{background:#0AA3D6;color:#fff;border-radius:10px;font-family:"Heebo",sans-serif;font-weight:700;font-size:16px;padding:16px 34px;}
.svc1-cta__btn .elementor-button:hover{background:#0b8fbd;}
.svc1-no-cta .svc1-cta{display:none;}

/* ============================ CASE STUDY (single, template #2718) ============================
 * Seven bands, rebuilt 2026-08-04: hero, challenge + preview, solution, outcomes,
 * technology + FAQ, testimonial + related, contact.
 *
 * RULES DELETED WITH THEIR MARKUP, not left behind:
 *   .cs-meta-sec      the meta strip moved into the hero
 *   .cs-approach      the process column was removed (requested)
 *   .cs-showcase      technology split away from preview to pair with the FAQ instead
 *   .cs-success-cta   the global contact section replaced the band
 *   .cs-related-sec   folded into .cs-proof__stories (its __heading rule survives, retargeted)
 *   .cs-rel-card      loop item #3535 is no longer referenced by any template
 * Dead rules at equal specificity are what silently beat `.svc1-process` last week.
 *
 * TWO ELEMENTOR TRAPS APPLY THROUGHOUT. Elementor's stylesheet loads AFTER this one and sizes
 * `.e-con` children through custom properties, so every band's layout selector is at least (0,2,0)
 * and uses grid; and `minmax(0,1fr)` rather than `1fr` everywhere, because a nowrap figure in a plain
 * `1fr` track pushes into its neighbour (which is how "+118%" ran into "2x" on the city pages).
 * ============================================================================================ */

/* ---------------------------------------------------------------- CS-01 Hero */
.cs-hero__eyebrow .elementor-heading-title{
	font-family:"Heebo",sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.14em;
	text-transform:uppercase;color:#0AA3D6;margin:0 0 10px;
}
/* The teal one-liner under the H1 — hero_headline, a field that until now rendered nowhere. */
.cs-hero__lede .elementor-heading-title{
	font-family:"Heebo",sans-serif;font-weight:600;font-size:19px;line-height:1.45;
	color:#0AA3D6;margin:0 0 16px;
}
.cs-hero .svc-hero__subtitle{margin:0 0 22px;}

/* Meta strip, inline variant. Scoped under .cs-hero at (0,2,0) on purpose: case-study.css also
   carries a `.cs-meta` rule for the [cs_meta_panel] shortcode's white card, and at equal specificity
   whichever stylesheet happens to load second would decide whether the hero row has a white box
   behind it. */
.cs-hero .cs-meta{
	background:none;border:0;box-shadow:none;padding:0;border-radius:0;
	display:flex;flex-wrap:wrap;gap:16px 32px;margin:0 0 26px;
}
.cs-hero .cs-meta__item{flex:0 1 auto;min-width:150px;max-width:290px;}
.cs-hero .cs-meta__icon{color:#0AA3D6;}
.cs-hero .cs-meta__label{color:rgba(255,255,255,.55);}
.cs-hero .cs-meta__value,.cs-hero .cs-meta__value a{color:#fff;}
.cs-meta__more{color:#8a90a6;font-weight:500;}
.cs-hero .cs-meta__more{color:rgba(255,255,255,.55);font-weight:500;}
.cs-hero .cs-meta__value a:hover{color:#0AA3D6;}

/* Boxed variant, for the same widget used outside a dark hero. */
.cs-meta.cs-meta--panel{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 28px;
	background:#fff;border:1px solid #e8edf5;border-radius:16px;
	box-shadow:0 10px 30px rgba(17,17,51,.06);padding:22px 30px;
}
.cs-meta__item{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.cs-meta__icon{width:22px;height:22px;color:#0AA3D6;flex:0 0 auto;margin-top:2px;}
.cs-meta__icon :is(img,svg){width:100%;height:100%;object-fit:contain;display:block;}
.cs-meta__body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cs-meta__label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8a90a6;font-weight:600;}
.cs-meta__value,.cs-meta__value a{font-family:"Heebo",sans-serif;font-weight:600;font-size:15.5px;color:#170D3D;line-height:1.35;overflow-wrap:break-word;}
.cs-meta__value a:hover{color:#0AA3D6;}
.cs-meta--empty{padding:18px;border:1px dashed #b9c4d8;border-radius:10px;color:#5A5A72;}

/* Two hero buttons: the live site (primary) and the enquiry (outlined).
 *
 * Elementor lays a container out through CUSTOM PROPERTIES: `flex-direction:var(--flex-direction)`,
 * with `--flex-direction:column` set by `.e-con.e-flex`. That selector is (0,2,0) and its stylesheet
 * loads after this one, so a (0,2,0) rule here ties and LOSES. The class is duplicated to reach
 * (0,3,0) — the same trick that beat Pro's mega-menu CSS — and the property is set as well as the
 * longhand, because the longhand alone is overwritten by the `var()` reference.
 *
 * Everything else below that targets a container is scoped to at least (0,2,0) for the related
 * reason: bare `.e-con` is (0,1,0) and still loads after this file. */
.cs-hero .cs-hero__actions.cs-hero__actions{
	--display:flex;--flex-direction:row;--flex-wrap:wrap;--align-items:center;--gap:14px;--row-gap:14px;--column-gap:14px;
	display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;
}
/* The glyph is a flex item of the button, so it wraps to its own line without this. */
.cs-hero .cs-hero__actions .elementor-button{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;}
.cs-hero .cs-hero__btn--site .elementor-button{
	background:#0AA3D6;color:#fff;border:1px solid #0AA3D6;border-radius:8px;
	font-family:"Heebo",sans-serif;font-weight:600;font-size:16px;padding:15px 28px;
	transition:background .2s ease,transform .2s ease;
}
.cs-hero .cs-hero__btn--site .elementor-button:hover{background:#0b8fbd;border-color:#0b8fbd;color:#fff;transform:translateY(-2px);}
.cs-hero .cs-hero__btn--site .elementor-button::after{content:"\2197";margin-left:8px;font-weight:700;}
.cs-hero .cs-hero__btn--cta .elementor-button{
	background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:8px;
	font-family:"Heebo",sans-serif;font-weight:600;font-size:16px;padding:15px 28px;
}
.cs-hero .cs-hero__btn--cta .elementor-button:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px);}
.cs-no-site .cs-hero__btn--site{display:none;}

/* ------------------------------------------- CS-02 Challenge card + Project preview */
.cs-context .cs-context__inner{
	max-width:1160px;margin:0 auto;padding:56px 24px 40px;
	display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);align-items:start;gap:34px;
}
/*
 * CONTAINER PADDING ON THE BAND CONTAINERS IS ELEMENTOR'S, NOT OURS.
 *
 * Elementor writes `--padding-top` on the element, and `.e-con` maps it with
 * `--padding-block-start:var(--padding-top)`. Setting `--padding-block-start` (or a plain `padding`
 * longhand) from here therefore lands DOWNSTREAM of the control and silently wins at any
 * specificity, which is how three padding values set in the editor rendered as zero with the text
 * flush against a navy edge. Every column in the six bands below keeps `min-width:0` — grid tracks
 * need it — and nothing else, so Elementor's own 10px default shows through until someone sets a
 * value. Two deliberate exceptions: the `.cs-proof__*` side gutters, which draw the divider, and the
 * `.cs-relc-card__*` parts of loop item #5186, whose 78px cover has no room for a 10px inset and
 * which is not a client-styled surface.
 */
.cs-context__inner .cs-context__left,.cs-context__inner .cs-context__right{min-width:0;}
.cs-context__inner .cs-context__right{--display:flex;--flex-direction:column;--gap:6px;display:flex;flex-direction:column;gap:6px;}

.cs-context__left .cs-challenge__card{--border-radius:20px;background:#170D3D;border-radius:20px;padding:34px 32px;position:relative;overflow:hidden;}
/* Elementor owns `.e-con::before`, so this overlay is painted on the CARD (a plain div) and not on
   the band container. Moving it to a container is what silently killed the svc-hero overlay. */
.cs-challenge__card::before{
	content:"";position:absolute;inset:0;pointer-events:none;
	background-image:url("/wp-content/uploads/2026/02/digital-marketing-agency-hero-img-bg-overlay-2.svg");
	background-size:cover;background-position:center;opacity:.10;
}
.cs-challenge__card>*{position:relative;z-index:1;}
.cs-challenge__eyebrow .elementor-heading-title{color:#0AA3D6;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;}
.cs-challenge__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:24px;line-height:1.3;color:#fff;margin:0 0 12px;}
/* Optional heading: collapse the whole widget when the shared label is blank, rather than leaving a
   heading-sized gap above the paragraph. */
.cs-challenge__heading:has(.elementor-heading-title:empty){display:none;}
.cs-challenge__text,.cs-challenge__text p{color:rgba(255,255,255,.88);font-size:16px;line-height:1.75;margin:0;}

/* Pain-point chips: amber warning glyph, on navy. */
.svc1-chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0;padding:0;}
.svc1-chips__item{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-family:"Heebo",sans-serif;font-weight:500;font-size:14px;border-radius:10px;padding:11px 16px 11px 40px;}
.svc1-chips__item::before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:#F5A623;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");}
/* One per line inside the narrow card — wrapped chips of uneven width read as a broken grid. */
.cs-challenge__chips .svc1-chips{flex-direction:column;gap:10px;}

.cs-context__right .cs-preview__eyebrow .elementor-heading-title{color:#3A0CA3;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0;}
.cs-context__right .cs-preview__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:24px;line-height:1.3;color:#170D3D;margin:4px 0 14px;}

.cs-gallery{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2px;}
.cs-gallery--count-1{grid-template-columns:minmax(0,1fr);}
/* Lead screenshot full width, the rest paired beneath it. */
.cs-context__right .cs-gallery__item:first-child{grid-column:1/-1;}
.cs-gallery__item{margin:0;border-radius:14px;overflow:hidden;background:#fff;}
.cs-gallery__item img{width:100%;height:auto;display:block;}
.cs-gallery--empty{padding:18px;border:1px dashed #b9c4d8;border-radius:10px;color:#5A5A72;}

/* Before / After — off on every case study today, kept because the field is still there. */
.cs-ba{display:flex;flex-direction:column;gap:20px;margin:0 0 18px;}
.cs-ba__imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.cs-ba__col{margin:0;}
.cs-ba__col figcaption{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8a90a6;margin-bottom:6px;}
.cs-ba__col img{width:100%;height:auto;display:block;border-radius:12px;}

/* Gates. Either column can vanish; the survivor takes the full width. */
.cs-no-challenge .cs-context__left{display:none;}
.cs-no-challenge .cs-context .cs-context__inner{grid-template-columns:minmax(0,1fr);}
.cs-no-ba .cs-context__ba{display:none;}
.cs-no-preview .cs-preview__gallery,
.cs-no-preview .cs-context__right .cs-preview__eyebrow,
.cs-no-preview .cs-context__right .cs-preview__heading{display:none;}
.cs-no-preview.cs-no-ba .cs-context__right{display:none;}
.cs-no-preview.cs-no-ba .cs-context .cs-context__inner{grid-template-columns:minmax(0,1fr);}
.cs-no-challenge.cs-no-preview.cs-no-ba .cs-context{display:none;}

/* ------------------------------------------------------- CS-03 Solution
 * Band backgrounds are set per band in Elementor (the client uses the global Section Background on
 * the context and proof bands), so nothing here paints one. */
.cs-solution .cs-solution__inner{
	max-width:1160px;margin:0 auto;padding:64px 24px;
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center;gap:44px;
}
.cs-solution__inner .cs-solution__body{--display:flex;--flex-direction:column;--gap:12px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.cs-solution__eyebrow .elementor-heading-title{color:#0AA3D6;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0;}
.cs-solution__text,.cs-solution__text p{color:#5A5A72;font-size:16px;line-height:1.75;margin:0;}

/* Checklist. Same chips markup as the pain points, so the tick has to beat the amber warning glyph:
   (0,2,1) against (0,1,1). */
.cs-solution__checks .svc1-chips{flex-direction:column;gap:9px;margin:10px 0 0;}
.cs-solution__checks .svc1-chips__item{
	background:#fff;border:1px solid #e8edf5;color:#170D3D;font-size:14.5px;
	padding:12px 16px 12px 42px;box-shadow:0 6px 16px rgba(17,17,51,.04);
}
.cs-solution__checks .svc1-chips__item::before{
	width:17px;height:17px;left:15px;background:#0AA3D6;
	-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* Media column: screenshot, with the four feature cards overlapping its lower edge.
   Pulled up with a negative margin rather than absolutely positioned — an absolute overlay sized by
   text it does not control is the failure mode that misaligned the city-page badges. */
.cs-solution__inner .cs-solution__media{--display:block;min-width:0;display:block;}
.cs-solution__img img{width:100%;height:auto;display:block;}
.cs-solution__cards{position:relative;z-index:1;margin:-40px 12px 0;}
.cs-solution__cards .svc1-featlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;}
/* Grid, not a row of three flex items: the widget emits icon, title and text as SIBLINGS with no
   wrapper, so `flex-direction:row` lays the text out BESIDE the title instead of under it. */
.cs-solution__cards .svc1-featlist__item{
	background:#fff;border:1px solid #e8edf5;border-radius:14px;padding:14px 16px;
	box-shadow:0 16px 36px rgba(17,17,51,.14);
	display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:11px;row-gap:2px;align-items:start;
}
.cs-solution__cards .svc1-featlist__icon{grid-row:1/span 2;width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:rgba(10,163,214,.12);display:flex;align-items:center;justify-content:center;}
.cs-solution__cards .svc1-featlist__icon :is(img,svg){width:19px;height:19px;object-fit:contain;color:#0AA3D6;}
.cs-solution__cards .svc1-featlist__title{font-family:"Heebo",sans-serif;font-weight:700;font-size:14px;line-height:1.3;color:#170D3D;margin:0;}
.cs-solution__cards .svc1-featlist__text{font-size:12.5px;line-height:1.45;color:#5A5A72;margin:3px 0 0;}
.cs-no-solimage .cs-solution__media{display:none;}
.cs-no-solimage .cs-solution .cs-solution__inner{grid-template-columns:minmax(0,1fr);}
.cs-no-solution .cs-solution{display:none;}

/* ------------------------- CS-04 Outcomes + More Success Stories, side by side ---
 * One band, two columns: what changed on the left, the proof on the right. The right column stacks the
 * client testimonial ABOVE the stories rather than beside them — three columns across 1160px leaves
 * about 370px each, which will not carry four outcome cards.
 * -------------------------------------------------------------------------------- */
.cs-proof .cs-results__inner{
	max-width:1160px;margin:0 auto;padding:64px 24px;
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.03fr);align-items:start;gap:0;
}
.cs-results__inner .cs-proof__col{
	--display:flex;--flex-direction:column;--gap:6px;
	min-width:0;display:flex;flex-direction:column;gap:6px;
}
/* The rule between the columns, drawn as a border rather than an element so it cannot be left behind
   when a gate hides one side. */
.cs-results__inner .cs-proof__what{padding-right:46px;}
.cs-results__inner .cs-proof__stories{padding-left:46px;border-left:1px solid #e4e9f2;}

.cs-results__eyebrow .elementor-heading-title{color:#0AA3D6;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0;text-align:center;}
.cs-results__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:28px;line-height:1.25;color:#170D3D;margin:0 0 6px;text-align:center;position:relative;padding-bottom:14px;}
/* Short accent rule under the column heading. */
.cs-results__heading .elementor-heading-title::after{
	content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
	width:52px;height:3px;border-radius:2px;background:#0AA3D6;
}

/* Numeric metric cards — shown only by a case study that has real figures. */
.cs-metrics-grid,.cs-metrics-grid--cols-3,.cs-metrics-grid--cols-4,.cs-metrics-grid--cols-6{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:14px;}
.cs-metric{background:linear-gradient(160deg,#211547,#170D3D);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;box-shadow:0 14px 34px rgba(17,17,51,.16);}
/* `color` is explicit because the icon is now inlined as SVG and drawn with currentColor: without
   it the glyph would take whatever text colour the surrounding band happens to set, which differs
   between the navy case-study card and the white About card. Teal matches the tile tint on both. */
.cs-metric__icon{width:40px;height:40px;border-radius:10px;background:rgba(10,163,214,.16);color:#0AA3D6;display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
.cs-metric__icon :is(img,svg){width:22px;height:22px;object-fit:contain;}
.cs-metric__value{font-family:"Heebo",sans-serif;font-weight:800;font-size:34px;line-height:1.05;color:#fff;background:linear-gradient(90deg,#0AA3D6,#7c5cff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cs-metric__label{font-size:14px;color:rgba(255,255,255,.72);line-height:1.4;}
.cs-metrics--empty{padding:18px;border:1px dashed #b9c4d8;border-radius:10px;color:#5A5A72;grid-column:1/-1;}

/* Worded outcome cards — the renderer for a project with no defensible numbers.
   2-up, not 4: they now live in a ~500px column, where four tracks would be 110px each. */
.cs-results__outcomes .svc1-featlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;}
.cs-proof .cs-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.cs-results__outcomes .svc1-featlist__item{
	background:#fff;border:1px solid #e8edf5;border-radius:16px;padding:24px 22px;
	box-shadow:0 10px 26px rgba(17,17,51,.05);display:flex;flex-direction:column;gap:10px;
}
.cs-results__outcomes .svc1-featlist__icon{width:44px;height:44px;border-radius:11px;background:rgba(10,163,214,.12);display:flex;align-items:center;justify-content:center;}
.cs-results__outcomes .svc1-featlist__icon :is(img,svg){width:23px;height:23px;object-fit:contain;color:#0AA3D6;}
.cs-results__outcomes .svc1-featlist__title{font-family:"Heebo",sans-serif;font-weight:700;font-size:16px;line-height:1.35;color:#170D3D;margin:0;}
.cs-results__outcomes .svc1-featlist__text{font-size:14px;line-height:1.6;color:#5A5A72;margin:0;}

/* Gates. Either column can vanish; the survivor drops the rule and takes the full width. */
.cs-no-results .cs-results__grid{display:none;}
.cs-no-outcomes .cs-results__outcomes{display:none;}
.cs-no-resultsband .cs-proof__what{display:none;}
.cs-no-resultsband .cs-proof .cs-results__inner{grid-template-columns:minmax(0,1fr);}
.cs-no-resultsband .cs-results__inner .cs-proof__stories{padding-left:0;border-left:0;}
.cs-no-quote.cs-no-related .cs-proof__stories{display:none;}
.cs-no-quote.cs-no-related .cs-proof .cs-results__inner{grid-template-columns:minmax(0,1fr);}
.cs-no-quote.cs-no-related .cs-results__inner .cs-proof__what{padding-right:0;}
/* Nothing on either side: the band goes. */
.cs-no-resultsband.cs-no-quote.cs-no-related .cs-results{display:none;}

/* --------------------------------------- CS-05 Technology + FAQ, side by side */
.cs-techfaq .cs-techfaq__inner{
	max-width:1160px;margin:0 auto;padding:64px 24px;
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;gap:46px;
}
.cs-techfaq__inner .cs-techfaq__col{--display:flex;--flex-direction:column;--gap:6px;min-width:0;display:flex;flex-direction:column;gap:6px;}
.cs-tech__eyebrow .elementor-heading-title,.cs-faq__eyebrow .elementor-heading-title{color:#3A0CA3;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0;}
.cs-tech__heading .elementor-heading-title,.cs-faq__heading .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:26px;line-height:1.28;color:#170D3D;margin:4px 0 6px;}
.cs-tech__intro,.cs-tech__intro p,.cs-faq__intro,.cs-faq__intro p{color:#5A5A72;font-size:15.5px;line-height:1.7;margin:0 0 8px;}
.cs-tech__intro:has(p:empty),.cs-faq__intro:has(p:empty){display:none;}

.cs-techlogos{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.cs-techlogo{display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff;border:1px solid #e8edf5;border-radius:14px;padding:16px 18px;min-width:104px;box-shadow:0 8px 22px rgba(17,17,51,.05);transition:transform .2s ease,box-shadow .2s ease;}
.cs-techlogo:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(17,17,51,.10);}
/* BOTH dimensions, not `width:auto`. These logos are simple-icons SVGs carrying a viewBox and no
   width/height, so an <img> pointing at one has an intrinsic RATIO but no intrinsic SIZE — `width:auto`
   resolves to 0 and the tile renders as a bare label. `.ind-tech-logo__img` sets both for the same
   reason; the whole set is square (24x24), so a square box crops nothing. */
.cs-techlogo__img{display:flex;align-items:center;justify-content:center;height:34px;}
.cs-techlogo__img :is(img,svg){width:34px;height:34px;object-fit:contain;display:block;}
.cs-techlogo__ph{width:40px;height:40px;border-radius:50%;background:rgba(58,12,163,.10);color:#3A0CA3;font-family:"Heebo",sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;}
.cs-techlogo__name{font-family:"Heebo",sans-serif;font-weight:600;font-size:13px;color:#170D3D;text-align:center;}
.cs-techlogos--empty{padding:18px;border:1px dashed #b9c4d8;border-radius:10px;color:#5A5A72;}

.cs-faq__grid{margin-top:6px;}
.cs-faq__all{margin-top:14px;}
/* `display:inline-flex` + `nowrap`: the arrow is a flex item of the button, and the button's default
   `flex-wrap` drops it onto a second line, doubling the button's height. */
.cs-faq__all .elementor-button{background:transparent;color:#3A0CA3;border:1px solid #ded5fb;border-radius:8px;font-family:"Heebo",sans-serif;font-weight:700;font-size:14.5px;padding:12px 22px;display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;}
.cs-faq__all .elementor-button:hover{background:#3A0CA3;border-color:#3A0CA3;color:#fff;}
.cs-faq__all .elementor-button::after{content:"\2192";margin-left:8px;}

.cs-no-tech .cs-techfaq__tech{display:none;}
.cs-no-faq .cs-techfaq__faq{display:none;}
.cs-no-tech .cs-techfaq .cs-techfaq__inner,
.cs-no-faq .cs-techfaq .cs-techfaq__inner{grid-template-columns:minmax(0,1fr);}
.cs-no-tech.cs-no-faq .cs-techfaq{display:none;}
.cs-no-faqall .cs-faq__all{display:none;}

/* ---------------- The proof column: client testimonial (gated) above More Success Stories ----
 * `.cs-social` and `.cs-social__col` are GONE with their band — the two columns merged into
 * `.cs-proof` above. Rules for markup that no longer exists are deleted rather than left to win a
 * specificity tie later.
 * ------------------------------------------------------------------------------------------- */
/*
 * NAVY PANEL, and it is not decoration.
 *
 * Loop item #2888 is the service pages' testimonial card and it is built for a DARK surface: a
 * translucent white fill (rgba(233,233,233,.28)) with white quote text and a pale blue author name.
 * On the service pages it sits inside the navy `.gc-testimonials` band, which is what makes it legible.
 * Dropped onto this light band the card rendered white-on-near-white — invisible. Tailored Coverings
 * has no testimonial yet, so this only surfaced on a sibling case study that does.
 *
 * The fix is to give the card the surface it expects rather than to recolour it, because recolouring
 * would mean it no longer matches the service page — which is the whole point of reusing #2888.
 * Flat colour, no `::before` overlay: Elementor owns `.e-con::before`.
 */
.cs-results__inner .cs-proof__quote{
	--display:flex;--flex-direction:column;--gap:4px;
	--padding-block-start:28px;--padding-block-end:28px;--padding-inline-start:28px;--padding-inline-end:28px;
	--background-color:#170D3D;--border-radius:18px;
	display:flex;flex-direction:column;gap:4px;
	background:#170D3D;border-radius:18px;padding:28px;margin-bottom:30px;
}
/* On navy the column heading has to invert, and its accent rule is not wanted here. */
.cs-proof__quote .cs-quote__heading .elementor-heading-title{color:#fff;padding-bottom:0;}
.cs-proof__quote .cs-quote__heading .elementor-heading-title::after{display:none;}
.cs-quote__eyebrow .elementor-heading-title{color:#0AA3D6;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0;}
.cs-quote__heading .elementor-heading-title,
.cs-proof__stories .cs-related-sec__heading .elementor-heading-title{
	font-family:"Heebo",sans-serif;font-weight:700;font-size:26px;line-height:1.28;color:#170D3D;
	margin:4px 0 14px;text-align:left;
}
/* The card itself is loop item #2888, styled by testimonials.css — the same card the service pages
   render. Nothing about its look is redeclared here; only the column it sits in. */
.cs-quote__grid{margin-top:4px;}
.cs-quote__grid .elementor-loop-container{gap:0;}

.cs-proof__stories .cs-relc__grid{margin-top:2px;}
.cs-proof__stories .cs-relc__grid .elementor-loop-container{gap:14px;}
/* Card, cover and body are all Elementor containers, so all three are scoped past `.e-con`. Without
   it the card falls back to `display:flex; flex-direction:column`, the cover loses its column track,
   and a 2304px-wide screenshot renders at full width — which is how one card came out 3289px tall. */
.cs-relc__grid .cs-relc-card{--display:grid;
	display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:14px;
	background:#fff;border:1px solid #e8edf5;border-radius:14px;padding:12px;
	box-shadow:0 8px 22px rgba(17,17,51,.05);transition:transform .2s ease,box-shadow .2s ease;
}
.cs-relc__grid .cs-relc-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(17,17,51,.12);}
/* Width follows the grid track (`width:100%`), height is fixed. Pinning the cover to 104px meant the
   narrow-screen rule could shrink the track to 80px while the cover stayed 104px and slid 24px under
   the card body — the text sat on top of the thumbnail. One source of truth for the width now. */
.cs-relc__grid .cs-relc-card__cover{
	--display:block;--padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0;
	width:100%;height:78px;flex:0 0 auto;
	border-radius:10px;overflow:hidden;background:#eef2f7;padding:0;
}
.cs-relc__grid .cs-relc-card__cover .elementor-widget-image,
.cs-relc__grid .cs-relc-card__cover .elementor-widget-container{width:100%;height:100%;line-height:0;}
/* Pixel dimensions, not `height:100%`. The percentage has to resolve through the Elementor widget
   wrapper and its container, and one auto height anywhere in that chain lets a full-page screenshot
   (some hero images here are 999x2560) render at its natural height — 440px inside a 78px box. */
.cs-relc__grid .cs-relc-card__cover img{width:100%;height:78px;object-fit:cover;object-position:50% 0;display:block;}
.cs-relc__grid .cs-relc-card__body{--display:flex;--flex-direction:column;--gap:4px;--padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0;min-width:0;display:flex;flex-direction:column;gap:4px;}
.cs-relc-card__title .elementor-heading-title{font-family:"Heebo",sans-serif;font-weight:700;font-size:15.5px;line-height:1.3;color:#170D3D;margin:0;}
.cs-relc-card__title a{color:inherit;}
.cs-relc-card__title a:hover{color:#0AA3D6;}
.cs-relc-card__sum,.cs-relc-card__sum p{
	font-size:13px;line-height:1.5;color:#5A5A72;margin:0;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cs-relc-card__metrics .cs-card__metrics{margin:2px 0 0;gap:4px;}
.cs-relc-card__metrics .cs-card__metric-value{font-size:14px;}
.cs-relc-card__metrics .cs-card__metric-label{font-size:12.5px;}
/* A metric label must wrap between words or not at all. In a ~180px card body the theme's inherited
   break-word turned "Qualified leads" into "Qualifie / d leads"; the city-page badges needed the same
   three declarations for the same reason. */
.cs-relc-card__metrics .cs-card__metric-label,
.cs-relc-card__metrics .cs-card__metric-value{overflow-wrap:normal;word-break:normal;hyphens:none;}
.cs-related__all{margin-top:14px;}
.cs-related__all .elementor-button{background:transparent;color:#0AA3D6;padding:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;}
.cs-related__all .elementor-button:hover{color:#170D3D;background:transparent;}
.cs-related__all .elementor-button::after{content:"\2192";margin-left:7px;}

/* The design puts a circular arrow on each story card. Drawn in CSS, like the pin and arrow in the
   mega menu: it is an affordance for the link already on the card title, not content, so it stays out
   of the markup and out of the accessibility tree. */
.cs-relc__grid .cs-relc-card{position:relative;}
.cs-relc__grid .cs-relc-card__body{padding-right:44px;}
.cs-relc__grid .cs-relc-card::after{
	content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);
	width:30px;height:30px;border-radius:50%;background:#eef4ff;
	-webkit-mask:none;mask:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A0CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
	background-repeat:no-repeat;background-position:center;background-size:15px 15px;
	transition:background-color .2s ease,transform .2s ease;
}
.cs-relc__grid .cs-relc-card:hover::after{background-color:#dfe8ff;transform:translateY(-50%) translateX(2px);}

/* Gates for the proof column itself. */
.cs-no-quote .cs-proof__quote{display:none;}
.cs-no-related .cs-relc__grid,
.cs-no-related .cs-proof__stories .cs-related-sec__heading,
.cs-no-related .cs-related__all{display:none;}
.cs-no-relatedall .cs-related__all{display:none;}

/* ------------------------------------------------------------- Responsive */
@media (max-width:1024px){
	.cs-results__outcomes .svc1-featlist{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:960px){
	.cs-context .cs-context__inner,
	.cs-solution .cs-solution__inner,
	.cs-techfaq .cs-techfaq__inner,
	.cs-proof .cs-results__inner{grid-template-columns:minmax(0,1fr);gap:34px;}
	.cs-hero__lede .elementor-heading-title{font-size:17.5px;}
	.cs-solution__cards{margin:-30px 8px 0;}
	/* Stacked: the vertical rule becomes a horizontal one between the two halves. */
	.cs-results__inner .cs-proof__what{padding-right:0;}
	.cs-results__inner .cs-proof__stories{padding-left:0;border-left:0;border-top:1px solid #e4e9f2;padding-top:30px;}
	.cs-no-resultsband .cs-results__inner .cs-proof__stories{border-top:0;padding-top:0;}
}
@media (max-width:760px){
	.cs-challenge__card{padding:28px 22px;}
	.cs-challenge__heading .elementor-heading-title{font-size:21px;}
	.cs-results__heading .elementor-heading-title{font-size:25px;}
	.cs-tech__heading .elementor-heading-title,
	.cs-faq__heading .elementor-heading-title,
	.cs-quote__heading .elementor-heading-title,
	.cs-proof__stories .cs-related-sec__heading .elementor-heading-title{font-size:23px;}
	.cs-context__right .cs-gallery,.cs-ba__imgs{grid-template-columns:minmax(0,1fr);}
	.cs-context__right .cs-gallery__item:first-child{grid-column:auto;}
	.cs-metrics-grid,.cs-metrics-grid--cols-4,.cs-metrics-grid--cols-6{grid-template-columns:repeat(2,minmax(0,1fr));}
	.cs-metric__value{font-size:28px;}
	/* Cards below the screenshot rather than over it: at this width they would cover most of it. */
	.cs-solution__cards{margin:16px 0 0;}
	.cs-solution__cards .svc1-featlist__item{box-shadow:0 8px 20px rgba(17,17,51,.07);}
	.cs-hero__actions{gap:10px;}
	.cs-hero .cs-hero__btn--site .elementor-button,.cs-hero .cs-hero__btn--cta .elementor-button{font-size:15px;padding:13px 22px;}
}
@media (max-width:520px){
	.cs-solution__cards .svc1-featlist{grid-template-columns:minmax(0,1fr);}
	.cs-results__outcomes .svc1-featlist,
	.cs-proof .cs-metrics-grid,
	.cs-metrics-grid{grid-template-columns:minmax(0,1fr);}
	.cs-relc__grid .cs-relc-card{grid-template-columns:80px minmax(0,1fr);gap:12px;}
	.cs-relc__grid .cs-relc-card__cover,
	.cs-relc__grid .cs-relc-card__cover img{height:62px;}
	/* The arrow is a decoration, and on a phone its 44px reservation is the difference between a
	   metric label fitting on one line and breaking. Tapping the title still works. */
	.cs-relc__grid .cs-relc-card::after{display:none;}
	.cs-relc__grid .cs-relc-card__body{padding-right:0;}
	.cs-hero .cs-meta{gap:14px 22px;}
	.cs-hero .cs-meta__item{min-width:130px;}
}
@media (max-width:900px){
	.svc1-flow{flex-wrap:wrap;gap:24px 0;}
	.svc1-flow__step{flex:1 1 33%;min-width:33%;}
	.svc1-flow__step:not(:last-child)::after{display:none;}
	.cs-challenge__card{padding:32px 24px;}
}
@media (max-width:560px){
	.svc1-flow__step{flex:1 1 50%;min-width:50%;}
}
@media (max-width:640px){
	.svc1-related__heading .elementor-heading-title{font-size:27px;}
	.svc1-cta__heading .elementor-heading-title{font-size:26px;}
}
/* 6-up and 5-up step down earlier than the narrower grids: at 6 columns the cards are already
   tight on a 1200px container, so they drop to 4 before the shared 1024px breakpoint. */
@media (max-width:1200px){
	.svc1-featlist--cols-6{grid-template-columns:repeat(4,1fr);}
	.svc1-featlist--cols-5{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1024px){
	.svc1-featlist,.svc1-featlist--cols-4,
	.svc1-featlist--cols-5,.svc1-featlist--cols-6{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
	.svc1-featlist,.svc1-featlist--cols-2,.svc1-featlist--cols-4{grid-template-columns:1fr;}
	/* The dense grids stay 2-up on phones — 12 one-per-row cards is an unusable scroll. */
	.svc1-featlist--cols-5,.svc1-featlist--cols-6{grid-template-columns:repeat(2,1fr);}
	.svc1-features .svc1-features__inner{padding:56px 24px;}
	.svc1-features__heading .elementor-heading-title{font-size:27px;}
}

/* ---------------------------------------------------------------------------
 * .ind-tech-logo — shared technology logo tile
 *
 * The tile rendered by loop item #3689 over the `technology` taxonomy. Moved here from
 * industries.css on 2026-08-02 for the same reason `.gc-logostrip` below lives here: the city pages
 * adopted the identical loop item, industries.css only loads on /industries/, and a tile that
 * silently arrives unstyled on a second page type is the failure this file exists to prevent. The
 * per-page GRID (how many columns, what gap) stays with each page; only the tile is shared.
 *
 * The class keeps its `ind-` prefix on purpose — renaming it would mean re-saving #3689 and every
 * template that references the tile, for no gain.
 * ------------------------------------------------------------------------ */
.ind-tech-logo{
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;
	background:#F7F8FC;border:1px solid #ECECF3;border-radius:12px;padding:20px 14px;
	transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.ind-tech-logo:hover{border-color:#3A0CA3;transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(58,12,163,.25);}
.ind-tech-logo__img :is(img,svg){width:40px;height:40px;object-fit:contain;display:block;}
.ind-tech-logo__name .elementor-heading-title{
	margin:0;font-family:"Montserrat",sans-serif;font-weight:600;font-size:13px;color:#170D3D;text-align:center;
}

/* ---------------------------------------------------------------------------
 * .loc-tile — compact term tile (icon over label, whole tile clickable)
 *
 * The tile rendered by loop items #3857 (service) and #3858 (industry). Moved here from
 * location.css on 2026-08-07 for exactly the reason `.ind-tech-logo` above was moved: the About
 * page adopted loop item #3858 for "Industries We Serve", and location.css only loads in a
 * location context, so the tile arrived there unstyled. The per-page GRID stays with each page;
 * only the tile is shared. The `loc-` prefix is kept so #3857/#3858 and every template that
 * references them need no re-save.
 * ------------------------------------------------------------------------ */
.loc-tile{
	position:relative;
	display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
	gap:9px;height:100%;text-align:center;text-decoration:none;
	background:#F9FAFC;border:1px solid #ECECF3;border-radius:10px;padding:18px 12px;
	transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.e-loop-item:hover .loc-tile,.loc-tile:hover{
	background:#ffffff;border-color:#3A0CA3;transform:translateY(-3px);
	box-shadow:0 14px 30px -16px rgba(58,12,163,.26);
}
.loc-tile__icon{line-height:0;}
.loc-tile__icon :is(img,svg){width:26px;height:26px;object-fit:contain;display:block;}
.loc-tile__name .elementor-heading-title{
	margin:0;font-family:"Montserrat",sans-serif;font-weight:600;
	font-size:12.5px;line-height:1.35;color:#170D3D;
}
/* Stretched link: the term name is a real anchor (accessible link text), and its ::after overlay
   makes the whole tile clickable. Elementor containers don't accept a dynamic link, so this is the
   correct pattern rather than wrapping the tile in markup we can't control.
 *
 * `position:static` on the widget is what makes the overlay actually stretch, and without it this
 * pattern silently does almost nothing. An absolutely positioned `::after` sizes itself against the
 * nearest POSITIONED ancestor, and Elementor gives EVERY `.elementor-widget` `position:relative` —
 * so `inset:0` was resolving against the heading widget's own line box. Measured on a city page:
 * a 138x34 overlay on a 160x102 tile, i.e. only the label text was clickable, never the icon or the
 * padding. Fixed 2026-08-07; the comment above had claimed the whole tile worked since August. */
.loc-tile .elementor-widget{position:static;}
.loc-tile__name a{color:inherit;text-decoration:none;}
.loc-tile__name a::after{content:"";position:absolute;inset:0;z-index:1;}
.loc-tile:focus-within{border-color:#3A0CA3;}
.loc-tile__name a:focus-visible{outline:2px solid #3A0CA3;outline-offset:3px;}

/* ---------------------------------------------------------------------------
 * .svc1-flow — SaifTec Feature List, "Horizontal flow" style (icon + label)
 *
 * RESTORED 2026-08-07. The base rules had been deleted with the case-study markup they served,
 * leaving only the two `@media` overrides further down this file — dead rules with no base, which
 * is the failure mode the case-study header comment warns about. The About page uses this style
 * for "Why Businesses Choose Saiftec" and "What We Do", so the base lives here with the widget's
 * other shared styles; each page supplies its own column count and ground colour.
 *
 * The icon inherits `color` (the widget's Style tab exposes it), so a currentColor SVG takes the
 * section's accent without a recoloured copy of the file.
 * ------------------------------------------------------------------------ */
.svc1-flow{
	list-style:none;margin:0;padding:0;
	display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.svc1-flow__step{
	display:flex;flex-direction:column;align-items:center;gap:10px;
	flex:1 1 0;min-width:0;text-align:center;
}
.svc1-flow__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:46px;height:46px;border-radius:12px;flex:0 0 auto;
	background:rgba(10,163,214,.12);color:#0AA3D6;
}
.svc1-flow__icon :is(img,svg){width:24px;height:24px;object-fit:contain;display:block;}
.svc1-flow__label{
	font-family:"Montserrat",sans-serif;font-weight:600;
	font-size:12.5px;line-height:1.35;color:#170D3D;
}

/* ---------------------------------------------------------------------------
 * .gc-logostrip — shared partner/credential logo row
 *
 * Relayouts the SaifTec Feature List "cards" markup into a horizontal logo strip: logo left,
 * name + optional role stacked to its right. Lives here (the stylesheet every section-built page
 * type loads) rather than in one page type's CSS, because the partner bar is a GLOBAL component —
 * the location pages and the industry pages render the same `gpt_items` rows.
 *
 * `.loc-partners` is matched alongside it so the location markup keeps working unchanged; its
 * card-and-label chrome stays in location.css.
 * ------------------------------------------------------------------------ */
.gc-logostrip .svc1-featlist,
.loc-partners .svc1-featlist{
	display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
	justify-content:space-between;gap:18px 26px;margin:0;grid-template-columns:none;
}
.gc-logostrip .svc1-featlist__item,
.loc-partners .svc1-featlist__item{
	flex:0 1 auto;position:relative;background:none;border:0;box-shadow:none;padding:0;
	display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;align-items:center;
}
.gc-logostrip .svc1-featlist__icon,
.loc-partners .svc1-featlist__icon{
	width:34px;height:34px;flex:0 0 auto;border-radius:8px;background:none;grid-row:1 / span 2;
}
.gc-logostrip .svc1-featlist__icon :is(img,svg),
.loc-partners .svc1-featlist__icon :is(img,svg){width:34px;height:34px;object-fit:contain;display:block;}
.gc-logostrip .svc1-featlist__title,
.loc-partners .svc1-featlist__title{
	font-family:"Montserrat",sans-serif;font-weight:600;font-size:14px;line-height:1.25;color:#170D3D;
}
.gc-logostrip .svc1-featlist__text,
.loc-partners .svc1-featlist__text{font-size:12px;line-height:1.25;color:#5A5A72;}
.gc-logostrip .svc1-featlist__title,
.gc-logostrip .svc1-featlist__text,
.loc-partners .svc1-featlist__title,
.loc-partners .svc1-featlist__text{flex:0 0 100%;}
/* No logo uploaded yet → don't reserve an empty 34px gutter. */
.gc-logostrip .svc1-featlist__item:not(:has(.svc1-featlist__icon)){grid-template-columns:1fr;}


/* --- inline icon SVGs --- */
/* saiftec_icon_markup() inlines an SVG when it can be vouched for, otherwise it emits the
   same <img> as before. Both are sized by the `:is(img,svg)` rules above, so swapping an
   icon from PNG to SVG never changes layout.
   An inline SVG whose source set uses stroke="currentColor" (e.g. Lucide) follows the
   surrounding `color`, so a section can recolour its icons with one declaration instead of
   shipping a second copy of the file. */
.svc1-featlist__ico{display:block;}
.saiftec-icon{display:block;}