/* GC — Contact CTA (`.gc-connect`) — the global contact band above the footer.
   131 URLs across ten page types: service pages, service categories, case studies, /portfolio/ and its
   filter archives, industry pages, /industries/, city pages, country pages and /about/. Content comes
   from the Global Components options page (`gcn_*`); see inc/contact-cta.php.

   Brand: navy #170D3D, teal #0AA3D6, purple #3A0CA3, text #5A5A72, band ground #F4F6FD.
   Fonts: Heebo/Montserrat.

   WHY THIS IS ITS OWN FILE and not a block in service-sections.css, which is where a shared band
   would normally go: this band lands on /portfolio/ and the 41 case-study filter archives, and
   service-sections.css carries 49 rules against `.cs-card`, `.cs-relc-card` and `.svc-pf-card` —
   all three of which those pages render. Loading it there to reach the band would have put those
   rules into competition with case-study.css at equal specificity, decided by enqueue order. That is
   the failure service-sections.css warns about in its own header. The cost of standing alone is the
   handful of restated declarations immediately below — and those were found by DIFFING COMPUTED
   STYLES between a page that loads service-sections.css and one that does not
   (scratchpad gcn-39-selfcontained.mjs), because reading the two files missed `display:flex`.

   The card header's gradient and the button's colours are real Elementor controls on the widgets, not
   rules here, so the colour scheme stays editable in the panel — and so Elementor cannot replace them
   with a Kit global on the next save. See the note above `.gc-connect__cardbtn`.
*/

/* ---- borrowed base, restated ------------------------------------------------------------------
   The band renders two SaifTec Feature List instances (`cards` for the reassurance row, `chips` for
   the checklist) whose base styling lives in service-sections.css, which does not load on every page
   type this band reaches. Everything else in those two base blocks is fully overridden further down;
   these are the declarations that would actually go missing. Scoped under `.gc-connect` so load
   order between the two files can never matter. */
/* `margin:0` and not just `padding:0`: without service-sections.css the <ul> keeps the theme's
   24px bottom margin, which put an extra gap under the reassurance row. The band positions this
   list with `.gc-connect__feats{margin-top:30px}` on the widget, so the list itself wants none. */
.gc-connect .svc1-featlist{list-style:none;margin:0;padding:0;}
/* Restated at the base value rather than zeroed. The item is transparent and borderless EXCEPT for
   the hairline `border-right` divider, and a radius still shapes that border's ends — so dropping it
   would change the dividers on the pages that already render them. */
.gc-connect .svc1-featlist__item{border-radius:16px;}
.gc-connect .svc1-featlist__icon{display:inline-flex;align-items:center;justify-content:center;}
.gc-connect .svc1-featlist__icon :is(img,svg){object-fit:contain;display:block;}
/* `display:flex` is the one that bites. The band sets `flex-direction:column` and `gap:14px` further
   down, and both are inert on a block container — so on /portfolio/ and the filter archives the
   checklist rows sat 20px apart instead of 34px. Caught by diffing computed styles between a page
   that loads service-sections.css and one that does not, not by reading the two files. */
.gc-connect .svc1-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;}
/* The chips tick is redrawn below, but `content` and `position` are what make the pseudo-element
   exist at all. */
.gc-connect .svc1-chips__item::before{content:"";position:absolute;}
/* An emptied repeater renders the widget's placeholder — keep it looking deliberate. */
.gc-connect .svc1-featlist--empty{padding:18px;border:1px dashed #b9c4d8;border-radius:10px;color:#5A5A72;font-size:14px;}

/* ---- empty-field gates ------------------------------------------------------------------------
   Elementor's heading widget returns before printing anything when its title is blank, so the tell is
   an EMPTY `.elementor-widget-container`, not an empty `.elementor-heading-title` — matching only the
   latter leaves the widget's own margin behind. Both are matched, plus the text-editor and the button,
   which print empty chrome the same way.

   These exist as `.saiftec-about`-scoped rules in about.css and the band DEPENDED on them. Restated
   against the band, because a global field someone clears would otherwise leave an empty box on all
   131 URLs rather than collapsing. */
.gc-connect .elementor-widget-heading:has(.elementor-widget-container:empty),
.gc-connect .elementor-widget-text-editor:has(.elementor-widget-container:empty),
.gc-connect .elementor-widget-heading:has(.elementor-heading-title:empty),
.gc-connect .elementor-widget-button:has(.elementor-button-text:empty){display:none;}

/* ============================ the band ============================ */
.gc-no-connect .gc-connect{display:none;}
.gc-connect{background:#F4F6FD;}
.gc-connect .gc-connect__inner{
	max-width:1280px;margin:0 auto;padding:76px 24px;
	display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:44px;align-items:start;
}

/* ---- left column ---- */
/* The dotted world map watermark. `mask` rather than `background-image`: the file carries an explicit
   fill (an SVG loaded as a background has no colour context, so currentColor would resolve to black),
   and as a mask it takes a theme colour and is still one cached request for 3,690 circles. It is
   decoration only — no pins and no routes. That mattered when the band was About-only and it matters
   more now: it renders ON the city and country pages, so a map implying coverage would contradict the
   readiness-gated list of places those very pages publish. */
.gc-connect .gc-connect__left{position:relative;gap:0;padding:0;}
/* Kept behind the heading block and well clear of the cards: at full width and .14 it showed through
   the paragraph and the card row, which is the one thing a watermark must not do. */
.gc-connect .gc-connect__left::before{
	content:"";position:absolute;z-index:0;pointer-events:none;
	top:-24px;right:0;width:min(430px,58%);aspect-ratio:928 / 488;
	background:#3A0CA3;opacity:.075;
	-webkit-mask:var(--gcn-map, none) no-repeat center / contain;
	mask:var(--gcn-map, none) no-repeat center / contain;
}
.gc-connect .gc-connect__left>*{position:relative;z-index:1;}

/* Eyebrow pill */
.gc-connect .gc-connect__eyebrow{width:auto;align-self:flex-start;}
.gc-connect__eyebrow .elementor-icon-box-wrapper{
	display:flex;align-items:center;gap:9px;
	background:rgba(58,12,163,.09);border-radius:999px;padding:9px 18px;
}
.gc-connect__eyebrow .elementor-icon-box-icon{margin:0;}
/* Elementor renders a Font Awesome pick as an inline <svg> whose `fill` is its own, so setting
   `color` alone leaves the glyph black — `fill:currentColor` is what actually recolours it. */
.gc-connect__eyebrow .elementor-icon{font-size:13px;color:#3A0CA3;}
.gc-connect__eyebrow .elementor-icon svg{fill:currentColor;width:13px;height:13px;}
.gc-connect__eyebrow .elementor-icon-box-title{margin:0;}
.gc-connect__eyebrow .elementor-icon-box-title span{
	font-family:"Heebo",sans-serif;font-weight:700;font-size:12.5px;
	letter-spacing:.12em;text-transform:uppercase;color:#3A0CA3;
}
.gc-connect__eyebrow .elementor-icon-box-description{display:none;}

.gc-connect__title .elementor-heading-title{
	margin:22px 0 0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:46px;line-height:1.14;color:#170D3D;
}
/* The heading's optional highlighted words. A class, not an inline style: the field is edited in
   wp-admin and KSES keeps `span class` while it strips `style` from a non-administrator's input. */
.gc-connect__title .gc-connect__accent{color:#3A0CA3;}
.gc-connect__lede,.gc-connect__lede p{
	margin:18px 0 0;max-width:56ch;font-size:16.5px;line-height:1.72;color:#5A5A72;
}

/* Reassurance row: icon left, bold line over lighter line, hairline dividers between.
   FLEX with content-sized items, not four equal grid columns: the labels are deliberately uneven
   ("Free / Consultation" against "Fast Response / Within 1 Business Day"), and equal columns forced
   the longest one to a third line while three columns sat half empty. */
.gc-connect .gc-connect__feats{margin-top:30px;}
.gc-connect .gc-connect__feats .svc1-featlist{
	display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-top:0;
	grid-template-columns:none;
}
.gc-connect .gc-connect__feats .svc1-featlist__item{
	background:transparent;border:0;box-shadow:none;
	flex:0 1 auto;padding:2px 20px;
	display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;
	column-gap:12px;row-gap:0;align-items:center;text-align:left;
	border-right:1px solid #DDE1F0;
}
.gc-connect .gc-connect__feats .svc1-featlist__item:first-child{padding-left:0;}
.gc-connect .gc-connect__feats .svc1-featlist__item:last-child{border-right:0;padding-right:0;}
.gc-connect .gc-connect__feats .svc1-featlist__icon{
	grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;
	background:rgba(10,163,214,.12);color:#0AA3D6;
}
.gc-connect .gc-connect__feats .svc1-featlist__icon :is(img,svg){width:21px;height:21px;}
.gc-connect .gc-connect__feats .svc1-featlist__title{
	margin:0;align-self:end;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:14.5px;line-height:1.25;color:#170D3D;text-align:left;
}
.gc-connect .gc-connect__feats .svc1-featlist__text{
	margin:0;align-self:start;font-size:13.5px;line-height:1.3;color:#5A5A72;text-align:left;
}

.gc-connect__ways .elementor-heading-title{
	margin:34px 0 0;padding-top:26px;border-top:1px solid #DDE1F0;
	font-family:"Heebo",sans-serif;font-weight:700;font-size:17px;color:#170D3D;
}

/* Instant-contact cards */
.gc-connect .gc-connect__channels{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;padding:0;
}
.gc-connect .gc-connect__ch{
	position:relative;gap:10px;
	background:#fff;border:1px solid #E3E7F5;border-radius:14px;padding:18px 16px 40px;
	box-shadow:0 4px 16px rgba(23,13,61,.05);
	transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.gc-connect .gc-connect__ch:hover{
	border-color:#3A0CA3;transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(58,12,163,.3);
}
.gc-connect__ch-icon{line-height:0;}
.gc-connect .gc-connect__ch-icon :is(img,svg){
	width:40px;height:40px;padding:9px;box-sizing:border-box;object-fit:contain;display:block;
	margin:0 auto 0 0;border-radius:11px;background:rgba(10,163,214,.12);
}
.gc-connect__ch-title .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:16px;line-height:1.3;color:#170D3D;
}
/* Stretched link — same pattern as `.loc-tile__name a`: the title is the real anchor (so the card
   has an accessible name) and its ::after covers the card.
 *
 * `position:static` on the widgets is load-bearing. An absolutely positioned `::after` sizes against
 * the nearest POSITIONED ancestor, and Elementor gives every `.elementor-widget` `position:relative`,
 * so `inset:0` resolved against the heading widget's line box instead of the card — a 217x19 overlay
 * on a 230px-tall card, which is why only the title text was clickable. Making the widgets static
 * hands the job to `.gc-connect__ch`, which is the `position:relative` this always assumed. */
.gc-connect .gc-connect__ch .elementor-widget{position:static;}
.gc-connect__ch-title .elementor-heading-title a{color:inherit;text-decoration:none;}
.gc-connect__ch-title .elementor-heading-title a::after{content:"";position:absolute;inset:0;z-index:2;}
.gc-connect__ch-title .elementor-heading-title a:focus-visible{outline:2px solid #3A0CA3;outline-offset:3px;}
.gc-connect__ch-text,.gc-connect__ch-text p{margin:0;font-size:13.5px;line-height:1.55;color:#5A5A72;}
/* Arrow, drawn rather than placed: it is decoration and must not be another tab stop. */
.gc-connect .gc-connect__ch::after{
	content:"";position:absolute;right:16px;bottom:14px;width:18px;height:18px;
	background:#3A0CA3;transition:transform .2s ease;
	-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'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></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'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
}
.gc-connect .gc-connect__ch:hover::after{transform:translateX(4px);}

/* ---- right column: the quote card ---- */
.gc-connect .gc-connect__right{padding:0;}
.gc-connect .gc-connect__card{
	gap:0;padding:0;overflow:hidden;
	background:#fff;border-radius:20px;
	box-shadow:0 30px 60px -34px rgba(23,13,61,.4);
}
.gc-connect .gc-connect__cardhead{
	gap:0;padding:34px 30px 30px;text-align:center;align-items:center;
}
/* The white ring around the icon. The plane itself carries its teal in the file — Elementor renders
   an <img> here and CSS cannot reach inside one. */
.gc-connect__cardicon{line-height:0;}
.gc-connect .gc-connect__cardicon :is(img,svg){
	width:76px;height:76px;padding:22px;box-sizing:border-box;object-fit:contain;display:block;
	margin:0 auto;border-radius:50%;background:#fff;
	box-shadow:0 0 0 9px rgba(255,255,255,.18);
}
.gc-connect__cardtitle .elementor-heading-title{
	margin:22px 0 0;font-family:"Heebo",sans-serif;font-weight:700;
	font-size:22px;line-height:1.32;color:#fff;text-align:center;
}
.gc-connect .gc-connect__cardrule{margin-top:16px;}

.gc-connect .gc-connect__cardbody{gap:0;padding:28px 30px 32px;}
.gc-connect__cardtext,.gc-connect__cardtext p{
	margin:0;font-size:14.5px;line-height:1.65;color:#5A5A72;text-align:center;
}
/* The checklist reuses the Feature List `chips` style, which is built for navy: white translucent
   pills with an amber warning glyph. Restated here as plain lines with the teal check this design
   uses — the same check glyph `.svc-hero__bullet` draws, so the page has one tick, not two. */
.gc-connect .gc-connect__checks .svc1-chips{flex-direction:column;gap:14px;margin:24px 0 0;}
.gc-connect .gc-connect__checks .svc1-chips__item{
	background:transparent;border:0;border-radius:0;padding:0 0 0 32px;
	font-family:"Heebo",sans-serif;font-weight:500;font-size:14.5px;line-height:1.4;color:#170D3D;
}
.gc-connect .gc-connect__checks .svc1-chips__item::before{
	left:0;top:1px;transform:none;width:20px;height:20px;border-radius:50%;
	background:rgba(10,163,214,.14);
	-webkit-mask:none;mask:none;
}
/* The tick sits in its own layer so the well behind it keeps its own colour. */
.gc-connect .gc-connect__checks .svc1-chips__item{position:relative;}
.gc-connect .gc-connect__checks .svc1-chips__item::after{
	content:"";position:absolute;left:5px;top:6px;width:10px;height:10px;background:#0AA3D6;
	-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.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>");
}

/* Geometry and type only. The COLOURS live on the widget (Style → Button), not here, and must stay
   there: Elementor's per-element rule is `.elementor-321 .elementor-element.elementor-element-XXX
   .elementor-button` — four classes, (0,4,0) — so it outranks anything this file can reasonably say.
   A colour written here was silently replaced by the Kit's global the first time the page was saved
   in wp-admin. Same applies to the hero and closing-CTA buttons. */
.gc-connect .gc-connect__cardbtn{margin-top:28px;width:100%;}
.gc-connect .gc-connect__cardbtn .elementor-button{
	display:flex;width:100%;justify-content:center;border-radius:12px;
	font-family:"Heebo",sans-serif;font-weight:700;font-size:16px;padding:17px 24px;
}

@media (max-width:1100px){
	.gc-connect .gc-connect__inner{grid-template-columns:minmax(0,1fr);gap:36px;}
	.gc-connect .gc-connect__right{max-width:520px;width:100%;}
	.gc-connect .gc-connect__left::before{width:min(460px,80%);right:-10px;}
	.gc-connect__title .elementor-heading-title{font-size:38px;}
}
@media (max-width:820px){
	/* The reassurance row is flex and wraps on its own once the content stops fitting — no column
	   count to restate here. Only the row gap needs to exist for when it does wrap. */
	.gc-connect .gc-connect__feats .svc1-featlist{row-gap:20px;}
	.gc-connect .gc-connect__feats .svc1-featlist__item{padding:2px 14px;}
	.gc-connect .gc-connect__channels{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:600px){
	.gc-connect .gc-connect__inner{padding:56px 20px;}
	.gc-connect__title .elementor-heading-title{font-size:30px;}
	/* Stacked: the hairline dividers only make sense while the items sit side by side. */
	.gc-connect .gc-connect__feats .svc1-featlist__item{flex:1 1 100%;border-right:0;padding:2px 0;}
	.gc-connect .gc-connect__cardhead{padding:28px 22px 24px;}
	.gc-connect .gc-connect__cardbody{padding:24px 22px 28px;}
}

/* ---- per-page-type hooks ----------------------------------------------------------------------
   Same convention as `.svc1-process`: the treatment above is shared, and a page type adds only its
   own ground colour here. Each document's band carries `gc-connect <pt>-connect`, so a type whose
   preceding section clashes with #F4F6FD can be retinted without touching the other nine.

   The ground of the section ABOVE the band was measured on each page type (2026-08-08,
   gcn-36-shots.mjs) and is recorded here so the next person does not have to re-derive it:

     svc1-connect    #F6F8FC  .svc1-related          <- 2 units from the default. No seam at all.
     svc-connect     #EDEFFF  .svc-faq-sec
     cs-connect      #FFFFFF  .cs-techfaq (transparent over white)
     ind-connect     #FFFFFF  .ind-techfaq
     ind1-connect    #FFFFFF  .ind1-duo--tech
     loc-connect     #EDEFFF  .loc-social
     lochub-connect  #FFFFFF  .svc1-process lochub-process
     ab-connect      #170D3D  .ab-cta (navy)
     csa-connect     #170D3D  the navy closing strip

   Only the service page needed a change: #F6F8FC against #F4F6FD is a difference of 2 in each
   channel, so the band had no top edge at all and read as more of the section above it. #EDEFFF is
   what the retired `gc-quote` band used on this page type, so this restores exactly the separation
   service pages had before the swap rather than inventing a new colour. */
.gc-connect.svc1-connect{background:#EDEFFF;}
.gc-connect.svc-connect{}       /* service categories, after .svc-faq-sec */
.gc-connect.cs-connect{}        /* case studies, after .cs-techfaq */
.gc-connect.ind-connect{}       /* /industries/, after .ind-techfaq */
.gc-connect.ind1-connect{}      /* industry pages, after .ind1-duo--tech */
.gc-connect.loc-connect{}       /* city pages, after .loc-social */
.gc-connect.lochub-connect{}    /* country pages, after .lochub-process (#FFF) */
.gc-connect.ab-connect{}        /* /about/, after .ab-cta */
.gc-connect.csa-connect{}       /* /portfolio/ + filter archives, after the navy closing strip */