/* About page (/about/) — page-specific layout on top of service-sections.css.
 *
 * Scoped to `.saiftec-about`, a body class added by inc/about.php, because WordPress emits only a
 * numeric `page-id-{ID}` class and that drifts between environments.
 *
 * TWO ELEMENTOR TRAPS APPLY THROUGHOUT, both already documented in service-sections.css:
 *  - elementor/frontend.css loads AFTER this file and sizes `.e-con` children through custom
 *    properties, so every layout selector here is at least (0,2,0) and uses grid;
 *  - `.e-con{height:var(--height);overflow:var(--overflow)}` beats an equal-specificity rule, so
 *    height/overflow are set through the custom properties, not the plain properties.
 * Track widths use `minmax(0,1fr)` rather than `1fr`: a nowrap figure in a plain `1fr` track pushes
 * into its neighbour.
 */

/* Full-bleed Elementor content with no Astra page padding. */
.saiftec-about .site-content .ast-container,
.saiftec-about #primary{padding-left:0;padding-right:0;max-width:100%;}
.saiftec-about #primary{margin:0;}

/* ============================ Section head (shared) ============================ */
/* Eyebrow + heading + intro, used at the top of every About section. Mirrors `.ind-*` so the two
   landing pages stay typographically identical without importing industries.css. */
.ab-eyebrow .elementor-heading-title{
	margin:0 0 10px;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;
	letter-spacing:.14em;text-transform:uppercase;color:#3A0CA3;
}
.ab-heading .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:34px;
	line-height:1.22;color:#170D3D;
}
.ab-intro,.ab-intro p{
	margin:14px auto 0;max-width:760px;font-size:16px;line-height:1.7;color:#5A5A72;
}
/* 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 (which prints an empty container the same way). Every optional field on this page
   therefore collapses cleanly instead of leaving a gap. */
.saiftec-about .elementor-widget-heading:has(.elementor-widget-container:empty),
.saiftec-about .elementor-widget-text-editor:has(.elementor-widget-container:empty),
.saiftec-about .elementor-widget-heading:has(.elementor-heading-title:empty){display:none;}

/* ============================ AB-00 Hero ============================ */
/* Structure and navy ground come from `.svc-hero` in service-sections.css, verbatim, so the About
   hero is the same component as the Services and Industries heroes. Only the eyebrow, the bold
   sub-headline and the second button are added here. */
.ab-hero .ab-hero__eyebrow .elementor-heading-title{
	margin:0 0 12px;font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;
	letter-spacing:.14em;text-transform:uppercase;color:#0AA3D6;
}
.ab-hero .ab-hero__subhead .elementor-heading-title{
	margin:0 0 14px;font-family:"Heebo",sans-serif;font-weight:600;font-size:20px;
	line-height:1.45;color:rgba(255,255,255,.92);
}
.ab-hero .ab-hero__ctas{
	flex-direction:row;flex-wrap:wrap;gap:14px;padding:0;margin-top:6px;width:auto;
}
/* Second button is the quiet one: outlined on the navy, so the primary still reads as primary. Only
   the border is here; the fill and label colours are on the widget (see the note further down). */
.ab-hero .ab-hero__cta2 .elementor-button{
	border:1.5px solid rgba(255,255,255,.45);
}
.ab-hero .ab-hero__cta2 .elementor-button:hover{border-color:#fff;}
/* A button widget bound to an empty label still renders its chrome — collapse the whole widget. */
.saiftec-about .elementor-widget-button:has(.elementor-button-text:empty){display:none;}

/* ============================ AB-01 Our Story ============================ */
.ab-no-story .ab-story{display:none;}
.ab-story{background:#ffffff;}
.ab-story .ab-story__inner{
	max-width:1200px;margin:0 auto;padding:88px 24px;
	display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.95fr);
	gap:38px;align-items:start;
}
/* The illustration is shorter than the copy beside it; centring it in the track stops it being
   stranded against the top of a tall row. */
.ab-story .ab-story__media{align-self:center;}
.ab-story .ab-story__text .ab-eyebrow .elementor-heading-title,
.ab-story .ab-story__text .ab-heading .elementor-heading-title{text-align:left;}
.ab-story .ab-heading .elementor-heading-title{font-size:30px;}
.ab-story__body,.ab-story__body p{
	margin:16px 0 0;font-size:15px;line-height:1.75;color:#5A5A72;
}
.ab-story__body p+p{margin-top:12px;}
.ab-story__img img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 24px 50px -28px rgba(23,13,61,.45);}

/* Mission / Vision cards */
.ab-story .ab-story__cards{gap:18px;padding:0;}
/* (0,2,0): `padding` and `gap` on a container are `.e-con{padding:var(--padding-…);gap:var(--gap)}`
   in Elementor's stylesheet, which is (0,1,0) but loads after this file — a bare `.ab-mv` rule loses
   both and the card collapses to Elementor's 10px default. Colour and radius are not `.e-con`
   properties, which is why only the spacing went missing. */
.ab-story .ab-mv{
	background:#F9FAFC;border:1px solid #ECECF3;border-radius:14px;padding:22px 20px;gap:10px;
	transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.ab-story .ab-mv:hover{border-color:#3A0CA3;transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(58,12,163,.28);}
/* The Mission and Vision icons come through Elementor's IMAGE widget, which emits an `<img>` — CSS
   cannot reach inside it, so these two icons carry their purple in the file (see ab-12-icons.php).
   Everything else on this page inlines its SVG through the Feature List widget and inherits colour. */
.ab-mv__icon{line-height:0;text-align:left;}
/* `margin-right:auto` rather than text-align: Elementor's image widget centres the img itself, and
   a block-level img with auto side margins ignores the parent's text-align. (0,3,0) because
   Elementor's own `.elementor-widget-image img{display:inline-block}` is (0,2,0) and loads later —
   at equal specificity the img stays inline and the centring wins. */
.saiftec-about .ab-mv__icon :is(img,svg){
	width:38px;height:38px;padding:8px;box-sizing:border-box;object-fit:contain;display:block;
	margin:0 auto 0 0;border-radius:11px;background:rgba(58,12,163,.10);
}
.ab-mv__title .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:#170D3D;
}
.ab-mv__text,.ab-mv__text p{margin:0;font-size:14px;line-height:1.65;color:#5A5A72;}

@media (max-width:1100px){
	.ab-story .ab-story__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;}
	.ab-story .ab-story__cards{grid-column:1 / -1;flex-direction:row;}
	.ab-story .ab-story__cards>*{flex:1 1 0;min-width:0;}
}
@media (max-width:780px){
	.ab-story .ab-story__inner{grid-template-columns:minmax(0,1fr);padding:64px 20px;}
	.ab-story .ab-story__cards{flex-direction:column;}
}

/* ============================ AB-02 Why Businesses Choose Saiftec ============================ */
/* Label block + the shared GC — Why Choose Us rows through the Feature List "flow" style. */
.ab-no-why .ab-why{display:none;}
.ab-why{background:#F7F8FC;border-top:1px solid #ECECF3;border-bottom:1px solid #ECECF3;}
.ab-why .ab-why__inner{
	max-width:1200px;margin:0 auto;padding:30px 24px;
	display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;align-items:center;
}
.ab-why .ab-why__label{gap:2px;padding:0;}
.ab-why__label-a .elementor-heading-title,
.ab-why__label-b .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:12.5px;
	letter-spacing:.12em;text-transform:uppercase;line-height:1.45;
}
.ab-why__label-a .elementor-heading-title{color:#0AA3D6;}
.ab-why__label-b .elementor-heading-title{color:#170D3D;}
/* Divider between the label and the row, on the label side so it survives the row wrapping. */
.ab-why .ab-why__label{border-right:1px solid #E1E3EF;padding-right:26px;}
.ab-why .svc1-flow{gap:14px;}
.ab-why .svc1-flow__icon{width:40px;height:40px;border-radius:11px;}
.ab-why .svc1-flow__icon :is(img,svg){width:21px;height:21px;}
.ab-why .svc1-flow__label{font-size:12px;}

@media (max-width:1000px){
	.ab-why .ab-why__inner{grid-template-columns:minmax(0,1fr);gap:20px;padding:30px 20px;}
	.ab-why .ab-why__label{border-right:0;padding-right:0;}
	.ab-why .svc1-flow{flex-wrap:wrap;row-gap:22px;}
	.ab-why .svc1-flow__step{flex:1 1 30%;min-width:30%;}
}
@media (max-width:560px){
	.ab-why .svc1-flow__step{flex:1 1 46%;min-width:46%;}
}

/* ============================ AB-03 What We Do ============================ */
.ab-no-do .ab-do{display:none;}
.ab-do{background:#ffffff;}
.ab-do .ab-do__inner{max-width:1200px;margin:0 auto;padding:80px 24px;}
.ab-do .ab-do__head{text-align:center;margin-bottom:46px;}
/* One row of capabilities. `flex-wrap` plus a percentage basis rather than a fixed column count,
   so adding or removing a row in the repeater re-flows instead of overflowing. */
.ab-do .svc1-flow{flex-wrap:wrap;gap:30px 10px;}
.ab-do .svc1-flow__step{flex:1 1 10%;min-width:104px;}
.ab-do .svc1-flow__icon{width:52px;height:52px;border-radius:14px;background:rgba(58,12,163,.09);color:#3A0CA3;}
.ab-do .svc1-flow__icon :is(img,svg){width:26px;height:26px;}
.ab-do .svc1-flow__label{font-size:12.5px;}
@media (max-width:1100px){.ab-do .svc1-flow__step{flex:1 1 18%;min-width:18%;}}
@media (max-width:780px){
	.ab-do .ab-do__inner{padding:60px 20px;}
	.ab-do .svc1-flow__step{flex:1 1 30%;min-width:30%;}
}
@media (max-width:520px){.ab-do .svc1-flow__step{flex:1 1 46%;min-width:46%;}}

/* ============================ AB-04 Process ============================ */
/* Reuses GC — Process (options gcp_*) and the Feature List "steps" style, restyled into the same
   horizontal timeline the Industries page uses. Repeated here rather than shared with
   industries.css because that file does not load on this page; the two are deliberately identical.
   The column count follows the repeater: `auto-fit` means adding an eighth step re-flows rather
   than orphaning it, which is what a fixed `repeat(6,1fr)` does on /industries/ today. */
.ab-no-process .ab-process{display:none;}
.ab-process{background:#F9FAFC;}
.ab-process .ab-process__inner{max-width:1200px;margin:0 auto;padding:80px 24px;}
.ab-process .ab-process__head{text-align:center;margin-bottom:50px;}
.ab-process .svc1-featlist{
	position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
	gap:18px;margin-top:0;
}
/* Connecting line behind the number circles. */
.ab-process .svc1-featlist::before{
	content:"";position:absolute;top:27px;left:8%;right:8%;height:2px;z-index:0;
	background:linear-gradient(90deg,rgba(58,12,163,.28),rgba(10,163,214,.28));
}
.ab-process .svc1-featlist--steps .svc1-featlist__item{
	background:transparent;border:0;box-shadow:none;padding:0;
	text-align:center;align-items:center;gap:8px;position:relative;z-index:1;
}
.ab-process .svc1-featlist--steps .svc1-featlist__item::before{
	position:static;top:auto;left:auto;
	display:inline-flex;align-items:center;justify-content:center;
	width:54px;height:54px;border-radius:50%;padding:0;margin:0 auto 12px;
	background:#3A0CA3;color:#fff;font-size:18px;
	box-shadow:0 0 0 6px #F9FAFC;
}
.ab-process .svc1-featlist__icon{width:40px;height:40px;border-radius:11px;background:rgba(10,163,214,.12);color:#0AA3D6;}
.ab-process .svc1-featlist__icon :is(img,svg){width:22px;height:22px;}
.ab-process .svc1-featlist__title{font-size:15.5px;color:#170D3D;text-align:center;}
.ab-process .svc1-featlist__text{font-size:13px;color:#5A5A72;text-align:center;line-height:1.55;}
@media (max-width:1100px){
	.ab-process .svc1-featlist{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:34px 18px;}
	.ab-process .svc1-featlist::before{display:none;}
}
@media (max-width:600px){
	.ab-process .svc1-featlist{grid-template-columns:repeat(2,minmax(0,1fr));}
	.ab-process .ab-process__inner{padding:60px 20px;}
}

/* ============================ AB-05 Technology ============================ */
.ab-no-tech .ab-tech{display:none;}
.ab-tech{background:#ffffff;border-top:1px solid #F0F1F7;}
.ab-tech .ab-tech__inner{max-width:1200px;margin:0 auto;padding:74px 24px;}
.ab-tech .ab-tech__head{text-align:center;margin-bottom:34px;}
/* The logo strip's only label. It stays an <h2> so the document outline still has a heading for the
   section, and is styled down to the small centred label the design asks for. */
.ab-tech .ab-heading .elementor-heading-title{
	font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;
	letter-spacing:.14em;text-transform:uppercase;color:#3A0CA3;line-height:1.4;
}
/* Flex, not grid, and deliberately so. The row is driven by however many technologies the page
   picks, and `repeat(auto-fit,minmax(N,1fr))` computes a fixed column count from the container
   width — pick eleven logos and the eleventh drops onto a row of its own. Flex items with a small
   basis fit as many as the width allows and grow to share it, and a genuinely over-long list wraps
   to a centred second row rather than leaving an orphan hanging on the left.
   (0,3,0) — Elementor writes a per-element `grid-template-columns` from the widget's Columns
   control into the page's own stylesheet, which loads after this one. */
.saiftec-about .ab-tech .elementor-grid{
	display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px;
	grid-template-columns:none;
}
/* `> .e-loop-item`, NOT `> *`. Elementor's Loop Grid injects a `<style>` element as the grid's
   FIRST CHILD (the loop item's own CSS). It is `display:none` by default, so it costs nothing in a
   grid — but a `> *` rule that sets `display:flex` un-hides it, and the stylesheet's own text then
   renders as a 400px-tall column at the head of the row.
   `display:flex` on each loop item so the tile inside fills the stretched track: a longer label
   like "WooCommerce" wraps to two lines, and without this its tile is taller than the rest. */
.saiftec-about .ab-tech .elementor-grid>.e-loop-item{flex:1 1 84px;max-width:140px;display:flex;}
.saiftec-about .ab-tech .elementor-grid>.e-loop-item>*{flex:1 1 auto;}
.ab-tech .ind-tech-logo{padding:14px 6px;gap:8px;}
.ab-tech .ind-tech-logo__img :is(img,svg){width:30px;height:30px;}
.ab-tech .ind-tech-logo__name .elementor-heading-title{font-size:11.5px;line-height:1.3;}
@media (max-width:780px){
	.ab-tech .ab-tech__inner{padding:56px 20px;}
	.saiftec-about .ab-tech .elementor-grid{gap:10px;}
	.saiftec-about .ab-tech .elementor-grid>.e-loop-item{flex:1 1 76px;}
}

/* ============================ AB-06 Our Impact + Core Values ============================ */
.ab-no-impact .ab-impact{display:none;}
.ab-no-stats .ab-impact__card{display:none;}
.ab-no-values .ab-values__card{display:none;}
.ab-impact{background:#F7F8FC;}
.ab-impact .ab-impact__inner{
	max-width:1200px;margin:0 auto;padding:80px 24px;
	display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:28px;align-items:stretch;
}
.ab-impact .ab-impact__card,
.ab-impact .ab-values__card{
	background:#ffffff;border:1px solid #ECECF3;border-radius:18px;padding:30px 28px;gap:0;
	box-shadow:0 20px 44px -34px rgba(23,13,61,.4);
}
.ab-card__label .elementor-heading-title{
	margin:0 0 22px;font-family:"Heebo",sans-serif;font-weight:700;font-size:12.5px;
	letter-spacing:.14em;text-transform:uppercase;color:#3A0CA3;text-align:center;
}
/* The Metric Cards widget is styled for the NAVY case-study band — a dark gradient tile with
   translucent-white labels. Restyle it for a white card. Every selector is (0,3,0) so it beats the
   widget's own (0,1,0)/(0,2,0) rules whichever stylesheet loads second. */
.ab-impact .ab-impact__card .cs-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:0;}
.ab-impact .ab-impact__card .cs-metric{
	background:#F7F8FC;background-image:none;border:1px solid #ECECF3;border-radius:14px;
	padding:20px 14px;gap:4px;align-items:center;text-align:center;box-shadow:none;
}
.ab-impact .ab-impact__card .cs-metric__icon{width:38px;height:38px;margin:0 auto 8px;background:rgba(58,12,163,.10);color:#3A0CA3;}
.ab-impact .ab-impact__card .cs-metric__icon :is(img,svg){width:20px;height:20px;}
.ab-impact .ab-impact__card .cs-metric__value{font-size:30px;}
.ab-impact .ab-impact__card .cs-metric__label{font-size:13px;color:#5A5A72;}

/* Core values: 2x2 borderless cards inside the white card. */
.ab-impact .ab-values__card .svc1-featlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px;margin-top:0;}
.ab-impact .ab-values__card .svc1-featlist__item{
	background:transparent;border:0;box-shadow:none;padding:0;
	display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;
	column-gap:12px;row-gap:4px;align-items:start;text-align:left;
}
.ab-impact .ab-values__card .svc1-featlist__icon{
	grid-row:1 / span 2;width:38px;height:38px;border-radius:11px;
	background:rgba(10,163,214,.12);color:#0AA3D6;
}
.ab-impact .ab-values__card .svc1-featlist__icon :is(img,svg){width:20px;height:20px;}
.ab-impact .ab-values__card .svc1-featlist__title{margin:0;font-size:15px;line-height:1.3;color:#170D3D;text-align:left;}
.ab-impact .ab-values__card .svc1-featlist__text{margin:0;font-size:13.5px;line-height:1.6;color:#5A5A72;text-align:left;}

@media (max-width:900px){
	.ab-impact .ab-impact__inner{grid-template-columns:minmax(0,1fr);padding:60px 20px;}
}
@media (max-width:520px){
	.ab-impact .ab-values__card .svc1-featlist{grid-template-columns:minmax(0,1fr);}
}

/* ============================ AB-07 Industries We Serve ============================ */
.ab-no-industries .ab-industries{display:none;}
.ab-industries{background:#ffffff;}
.ab-industries .ab-industries__inner{max-width:1200px;margin:0 auto;padding:74px 24px;}
.ab-industries .ab-industries__head{text-align:center;margin-bottom:34px;}
/* Same treatment as the technology strip: a real <h2>, styled as the design's small label. */
.ab-industries .ab-heading .elementor-heading-title{
	font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;
	letter-spacing:.14em;text-transform:uppercase;color:#3A0CA3;line-height:1.4;
}
/* (0,3,0) for the same reason as the technology grid: Elementor's per-element column rule loads later. */
.saiftec-about .ab-industries .elementor-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
/* The shared `.loc-tile` skin declares `padding:18px 12px;border-radius:10px` at (0,1,0), and both
   of those are `.e-con` custom-property rules in Elementor's stylesheet, which loads later and wins
   at equal specificity — the tile ends up with Elementor's 10px padding and square corners. Restated
   at (0,3,0) here, scoped to this page: the location pages have shipped with the flat tile for
   months and changing them is not this page's business. Fixing it at the source would be a
   one-character change (`.loc-tile.loc-tile`) whenever that design is next revisited. */
.saiftec-about .ab-industries .loc-tile{padding:18px 10px;border-radius:10px;}
@media (max-width:1000px){.saiftec-about .ab-industries .elementor-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:700px){
	.ab-industries .ab-industries__inner{padding:56px 20px;}
	.saiftec-about .ab-industries .elementor-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
}
@media (max-width:440px){.saiftec-about .ab-industries .elementor-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ============================ AB-08 Closing CTA ============================ */
/* Navy band. Built here rather than reusing `.cs-success-cta`, whose rules were deleted with the
   case-study rebuild — the `.ind-cta` band on /industries/ still references that dead class and
   renders unstyled as a result. */
.ab-no-cta .ab-cta{display:none;}
.ab-cta{position:relative;background:#170D3D;overflow:hidden;}
.ab-cta .ab-cta__inner{
	position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:52px 24px;
	display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
}
.ab-cta .ab-cta__text{gap:8px;padding:0;}
.ab-cta__heading .elementor-heading-title{
	margin:0;font-family:"Heebo",sans-serif;font-weight:700;font-size:29px;line-height:1.25;color:#ffffff;
}
.ab-cta__text-body,.ab-cta__text-body p{
	margin:0;font-size:15px;line-height:1.65;color:rgba(255,255,255,.78);max-width:660px;
}
/* Colours are on the widgets (Style → Button) for the reason given at the quote-card button below. */
.ab-cta .ab-cta__btns{flex-direction:row;flex-wrap:wrap;gap:14px;padding:0;width:auto;}
.ab-cta .ab-cta__btns .elementor-button{
	border-radius:10px;
	font-family:"Heebo",sans-serif;font-weight:700;font-size:15px;padding:15px 28px;
}
@media (max-width:900px){
	.ab-cta .ab-cta__inner{grid-template-columns:minmax(0,1fr);padding:44px 20px;}
	.ab-cta__heading .elementor-heading-title{font-size:25px;}
}

/* AB-09 Contact CTA — MOVED 2026-08-08.
 * The band became the site-wide `.gc-connect` component (131 URLs across ten page types), so its 224
 * lines now live in assets/contact-cta.css, which loads wherever the band renders. about.css is
 * enqueued on /about/ only and could never have served it.
 *
 * The four empty-field collapse rules near the top of THIS file stay: the other nine About bands use
 * them. contact-cta.css restates its own copies scoped to `.gc-connect`.
 */


/* ============================ Responsive: section heads ============================ */
@media (max-width:780px){
	.ab-heading .elementor-heading-title{font-size:27px;}
}