/**
 * Clixlogix — site-wide styles
 * Loaded on every page (homepage AND all inner pages).
 * Contains the rules that make every page share the same 1132px
 * content grid + the pitch-black themed footer with the Clixlogix
 * copyright row and social links.
 *
 * Homepage-only visual design stays in homepage.css — this file is
 * the minimum needed to make inner pages visually match the homepage
 * header / footer / container width.
 *
 * Parent theme bug: keystroke/style.css has `header { z-index: 9999 }`
 * which applies to EVERY <header> tag on the page — including the
 * <header class="clx-rev-card__head"> inside review cards, blog
 * cards, and any other content-component that semantically uses
 * <header>. Result: those nested headers paint over the fixed top
 * nav (z-index 1001). The reset below scopes z-index 9999 to only
 * the site's main header bar; nested <header> elements get the
 * default z-index: auto so they stack inside their card. */
.clx-rev-card__head,
.clx-rev-card > header,
article header,
.elementor article header,
.elementor-shortcode header,
.clx-blog-card header {
  z-index: auto !important;
}
 */

/* (Removed: previous html,body { overflow-x: hidden } guard. The off-canvas
   .side-nav was already constrained per-element in navbar-new.css, and the
   global rule was creating a black sliver to the right of the document
   in some browsers.) */

/* Override Elementor core's `html { scroll-behavior: smooth }` (shipped in
   wp-content/plugins/elementor/assets/css/frontend.min.css). Smooth-scroll
   animates every wheel tick with a ~250ms easing curve. On long pages with
   sticky sidebars + IntersectionObserver-driven highlights, rapid wheel
   ticks pile their easing tails on top of each other, producing visible
   scroll jitter / momentum jumps (most pronounced when wheel-scrolling
   upward through dense sections like ERP Project Investment ↔ Engagement
   Models). The !important is required because Elementor's selector has
   the same specificity (1 element) and loads after the theme by default —
   without !important the cascade order can flip and the override stops
   winning. If smooth jumps are wanted for in-page anchor links, scope it
   to the click handler in JS via element.scrollIntoView({behavior:'smooth'})
   rather than reintroducing the global CSS rule. */
html, body {
  scroll-behavior: auto !important;
}

/* =========================================================
   Restore Elementor's default column padding (10px) site-wide. Something
   on staging zeroes `.elementor-column-gap-default > .elementor-column >
   .elementor-element-populated { padding: 10px }` from frontend.min.css;
   local honours it. Force it back with !important so environments render
   the same vertical rhythm inside every Elementor column. Scoped rules
   on individual columns (section overrides in this file, per-post CSS,
   and the chapter-narrowing rules) still win because they are more
   specific. */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding: 10px !important;
}

/* =========================================================
   00. Case studies / portfolio grid — forces keystroke-project widget items
   into a 2-per-row layout inside any section marked with clx-casestudies-section.
   Available on every page so About Us + homepage render identically.
   ========================================================= */
.clx-casestudies-section {
  padding: 56px 0 !important;
  background: #F8F8F8 !important;
  border-top: none !important;
}
body.page .clx-casestudies-section .section-title,
body.page .clx-casestudies-section .section-title .title,
body.page .clx-casestudies-section .section-title h2,
body.page .clx-casestudies-section h2,
body.page .clx-casestudies-section h2.title,
body.page .clx-casestudies-section .axil-portfolio-area h2,
body.page .clx-casestudies-section .axil-portfolio-area .title {
  color: #142533 !important;
}
body.page .clx-casestudies-section .section-title .title {
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533 !important;
  margin: 0 0 16px !important;
}
body.page .clx-casestudies-section .section-title p,
body.page .clx-casestudies-section .section-title span,
body.page .clx-casestudies-section .axil-portfolio-area p {
  color: #6F7A82 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  max-width: 750px !important;
  margin: 0 auto 32px !important;
}
.clx-casestudies-section .section-title .sub-title,
.clx-casestudies-section .section-title .extra07-color {
  display: none !important;
}
body.page .clx-casestudies-section .axil-portfolio-area,
body.page .clx-casestudies-section .axil-portfolio-area.ax-section-gap,
body.page .clx-casestudies-section .ax-section-gap,
body.page .clx-casestudies-section .ax-section-gapTop,
body.page .clx-casestudies-section .ax-section-gapBottom,
body.page .clx-casestudies-section .bg-color-lightest,
body.page .clx-casestudies-section .axil-portfolio-area,
body.page .clx-casestudies-section .ax-section-gap,
body.page .clx-casestudies-section .background {
  padding: 0 !important;
  margin: 0 !important;
  background: inherit !important;
  background-color: inherit !important;
}
body.page .clx-casestudies-section .wow,
body.page .clx-casestudies-section .animated {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
  transition: none !important;
}
.clx-casestudies-section .axil-portfolio-area .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
/* Force 2-per-row masonry layout */
.clx-case-studies .portfolio-wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page .clx-casestudies-section .portfolio,
body.page .clx-casestudies-section .portfolio.portfolio-33-33,
body.page .clx-casestudies-section .mesonry-list.grid-metro3 .portfolio-33-33,
body.page .clx-casestudies-section .mesonry-list.grid-metro3 .resizer {
  width: 50% !important;
  max-width: 50% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 16px !important;
  float: none !important;
}
.clx-case-studies .portfolio .inner,
.clx-case-studies .portfolio .thumb {
  width: 100%;
}
.clx-case-studies .portfolio .thumb img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px;
  display: block;
}
/* Logos row: theme stock makes .repeating-hover-effect img position:absolute
   with no parent height, so at narrow widths the icons spill out of flow and
   visually overlap the next masonry-stacked card. Reserve a row height. */
.clx-casestudies-section .technologies-image {
  min-height: 32px;
  margin-top: 18px;
}
.clx-casestudies-section .repeating-hover-effect {
  min-height: 28px;
}
/* =========================================================
   Case Studies — small-breakpoint responsive fix (<=575px)
   Scope: .clx-casestudies-section across all page templates
   Desktop/tablet layout (>768px) is untouched.
   ========================================================= */
@media (max-width: 575px) {

  /* Heading: prevent mid-word break, scale down */
  body.page .clx-casestudies-section .section-title .title,
  body .clx-casestudies-section .section-title .title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Kill masonry absolute positioning, stack cards */
  body.page .clx-casestudies-section .mesonry-list.grid-metro3 {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  body.page .clx-casestudies-section .mesonry-list.grid-metro3 .resizable,
  body.page .clx-casestudies-section .mesonry-list.grid-metro3 .portfolio {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Card shell: uniform white card */
  body.page .clx-casestudies-section .portfolio .inner {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 18px rgba(20, 24, 40, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Image edge-to-edge at top of card */
  body.page .clx-casestudies-section .portfolio .thumb {
    order: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  body.page .clx-casestudies-section .portfolio .thumb img,
  body.page .clx-casestudies-section .portfolio .thumb img.wp-post-image {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* Text section below image */
  body.page .clx-casestudies-section .portfolio .port-overlay-info {
    order: 1 !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    padding: 18px 20px 20px !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.page .clx-casestudies-section .portfolio .hover-action {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Title */
  body.page .clx-casestudies-section .portfolio .hover-action .title,
  body.page .clx-casestudies-section .portfolio .port-title {
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: #14243a !important;
    margin: 0 !important;
  }

  /* Category tags */
  body.page .clx-casestudies-section .portfolio .category-info,
  body.page .clx-casestudies-section .portfolio .categorie {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  body.page .clx-casestudies-section .portfolio .category-info .category,
  body.page .clx-casestudies-section .portfolio span.category {
    color: #6b7280 !important;
  }

  /* Tech logos: divider on top, wrap, smaller */
  body.page .clx-casestudies-section .portfolio .technologies-image,
  body.page .clx-casestudies-section .portfolio .technologies-image.d-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
    border-top: 1px solid #eef0f4 !important;
  }
  body.page .clx-casestudies-section .portfolio .technologies-image img {
    height: 22px !important;
    width: auto !important;
    max-width: 60px !important;
    object-fit: contain !important;
  }
}

/* Extra-tight (Galaxy Fold ~341px) */
@media (max-width: 360px) {
  body.page .clx-casestudies-section .section-title .title,
  body .clx-casestudies-section .section-title .title {
    font-size: 24px !important;
  }
  body.page .clx-casestudies-section .portfolio .thumb img {
    height: 180px !important;
  }
  body.page .clx-casestudies-section .portfolio .port-overlay-info {
    padding: 16px 16px 18px !important;
  }
}


/* =========================================================
   0. Featured Blogs grid — same look as the homepage Featured Blogs section.
   Available on every page so we can drop the blogs widget into About Us etc.
   ========================================================= */
.clx-blogs-section {
  padding: 56px 0 !important;
  background: #F8F8F8 !important;
}
.clx-blogs-heading .elementor-heading-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533 !important;
  margin: 0 0 16px !important;
}
.clx-blogs-sub {
  font-size: 18px !important;
  line-height: 28px !important;
  font-family: 'Cabin', sans-serif !important;
  color: #6F7A82 !important;
  max-width: 720px;
  margin: 0 0 32px !important;
}
.clx-blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.clx-blog-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  height: 100%;
}
.clx-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.18);
}
.clx-blog-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EFEFEF;
}
.clx-blog-thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  pointer-events: none;
}
.clx-blog-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.clx-blog-card:hover .clx-blog-thumb img { transform: scale(1.06); }
.clx-blog-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.clx-blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.clx-blog-cat { color: #FA4900; }
.clx-blog-date {
  color: #999999;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
}
.clx-blog-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #D8D8D8;
}
.clx-blog-title {
  font-size: 20px !important;
  line-height: 28px !important;
  font-family: 'Cabin', sans-serif !important;
  font-weight: 600 !important;
  color: #142533 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Reset typography inheritance on blog-card sub-elements —
   `body:not(.home) .elementor-widget-text-editor` sets font-size: 18px on
   inner pages (including how-we-work), which cascades into .clx-blog-meta
   (was 12px), .clx-blog-cat, .clx-blog-date and "blows out" the card
   density. Force the card's native sizes so it matches the homepage
   render identically across pages. */
.clx-blogs-section .elementor-widget-text-editor,
.clx-blogs-section .elementor-widget-text-editor p:not(.clx-blogs-sub) {
  font-size: inherit !important;
  line-height: inherit !important;
}
.clx-blogs-section .clx-blog-meta,
.clx-blogs-section .clx-blog-cat {
  font-family: 'Cabin', sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}
.clx-blogs-section .clx-blog-date {
  font-family: 'Cabin', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: #999999 !important;
}
.clx-blog-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #F0F0F0;
  display: flex;
  justify-content: flex-end;
}
/* Global CTA link style */
.clx-lc,
.clx-lc:hover,
.clx-lc:focus,
.clx-lc:active,
.clx-lc:visited {
  color: #FA4900 !important;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: inline-block;
  text-decoration: underline !important;
  text-decoration-color: #FA4900 !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 9px;
}
.clx-lc::after {
  content: '\2192';
  display: inline-block;
  margin-left: 14px;
  text-decoration: none;
  font-size: 1.15em;
  font-weight: 900;
  -webkit-text-stroke: 1px #FA4900;
  line-height: 1;
  vertical-align: -1px;
}
.clx-blog-foot .clx-lc { font-size: 14px !important; }
.clx-blogs-cta-wrap {
  text-align: right;
  margin-top: 32px;
}
@media (max-width: 1024px) {
  body.page .clx-blogs-section { padding-left: 16px !important; padding-right: 16px !important; }
  body.page .clx-blogs-heading .elementor-heading-title { font-size: 30px !important; line-height: 38px !important; letter-spacing: -0.6px !important; }
  body.page .clx-blogs-sub { font-size: 16px !important; line-height: 26px !important; margin: 0 0 24px !important; }
  body.page .clx-blogs-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  body.page .clx-blog-body { padding: 18px !important; gap: 12px !important; }
  body.page .clx-blog-title { font-size: 18px !important; line-height: 26px !important; }
}


/* =========================================================
   0b. Inner-page hero — all pages except the homepage use the
   .top-section.about-top-banner hero (section element 8ae4ef7).
   Padding-top is reduced from 85 → 56 to make room for the breadcrumb
   widget that now sits inside the hero column as the first widget
   (post-migration: breadcrumb-into-hero, 2026-04). The 408px floor is
   carried by .clx-page-hero / .clx-inner-hero rules below.
   ========================================================= */
body:not(.home) .elementor-element.elementor-element-8ae4ef7 {
  padding: 56px 0px 50px 0px !important;
}
/* Lock all inner-page heroes to the same minimum band height (408px)
   so the peach band is consistent across about-us, partnership, c&d,
   mission, our-team, how-we-work, and client-security. Content centers
   inside the band via the existing widget-wrap align-content: center. */
body:not(.home) .clx-page-hero {
  min-height: 408px;
  /* Peach band on the section's own background. Same fix as
     .clx-services-hero (was a ::before z-index:-1 that got occluded
     by body's white bg on about-us / how-we-work / our-team /
     partnership / client-security / culture-and-diversity / mission. */
  background-image: linear-gradient(to bottom, #FFEFE6 0, #FFEFE6 408px, transparent 408px) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
}
/* Restore widget margins on inner pages — homepage.css strips them globally */
body.elementor-page.page-about-us .elementor-widget,
body.elementor-page.page-client-security .elementor-widget,
body.elementor-page.page-mission .elementor-widget,
body.elementor-page.page-how-we-work .elementor-widget,
body.elementor-page.page-partnership .elementor-widget,
body.elementor-page.page-culture-and-diversity .elementor-widget,
body.elementor-page.page-our-team .elementor-widget {
  margin-bottom: 20px !important;
}
body.elementor-page.page-about-us .elementor-widget:last-child,
body.elementor-page.page-client-security .elementor-widget:last-child,
body.elementor-page.page-mission .elementor-widget:last-child,
body.elementor-page.page-how-we-work .elementor-widget:last-child,
body.elementor-page.page-partnership .elementor-widget:last-child,
body.elementor-page.page-culture-and-diversity .elementor-widget:last-child,
body.elementor-page.page-our-team .elementor-widget:last-child {
  margin-bottom: 0 !important;
}
/* Re-zero widget margins in AI section where we need tight spacing */
body.elementor-page.page-about-us .clx-au-howai-outer .elementor-widget {
  margin-bottom: 0 !important;
}

/* Inner page hero — match services 408px peach height.
   Hero is pinned to the peach strip height so content never spills below
   the peach band, regardless of per-page heading length. */
.clx-inner-hero {
  position: relative;
  background: transparent !important;
  overflow: visible;
  min-height: 408px;
}
.clx-inner-hero > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.clx-inner-hero:not(.elementor-motion-effects-element-type-background) {
  background-color: transparent !important;
}
.clx-inner-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 408px;
  background: #FFEFE6;
  z-index: -1;
}
/* Client-security governance & incident bullets — match About page
   "How AI Powers Our Workflows" icon-list bullet style: 38px orange circular
   badge with CSS-counter number, DM Sans 15/26 text, bold dark lead. */
body.page-client-security {
  counter-reset: sec-step;
}
/* Restart counter at the Incident Response grid so it numbers 1..5 */
.page-client-security .clx-incident-grid {
  counter-reset: sec-step !important;
}
/* Incident grid: 3 cols × 2 rows with shared row heights.
   Source order is 1..5 for counter, placement controlled via grid-area. */
.page-client-security .clx-incident-grid > .elementor-container,
.page-client-security .clx-incident-grid .elementor-column,
.page-client-security .clx-incident-grid .elementor-element-populated,
.page-client-security .clx-incident-grid .elementor-widget-wrap {
  display: contents !important;
}
.page-client-security .clx-incident-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  /* Match the 24px gap used by the compliance .svc-badge-grid */
  column-gap: 24px !important;
  row-gap: 24px !important;
  max-width: 1132px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* 20px top padding mirrors the gov-shield spacing below the intro paragraph;
     56px bottom mirrors the about-us parent-section padding around the CTA. */
  padding: 20px 0 56px 0 !important;
}
/* Grid auto-flow fills row by row → natural reading order 1, 2, 3 then 4, 5, Discover */
.page-client-security .clx-incident-grid {
  grid-auto-flow: row !important;
}
/* CTA sits in col 3 row 3 (directly below Discover) */
.page-client-security .clx-incident-grid .clx-cs-cta-button-1,
.page-client-security .clx-incident-grid .clx-cs-cta-button-2 {
  grid-column: 3 !important;
  grid-row: 3 !important;
  align-self: start !important;
}
/* CTA spacing matches about-us CTAs: 20px below (same as page-level widget margin) */
body.elementor-page.page-client-security .clx-incident-grid .elementor-widget.clx-cs-cta-button-1 {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
/* Discover paragraph + CTA span the full column width (no left indent) so
   they align with the bullet widgets above. Override per-post widget-container
   margins + the 93.927% width constraint Elementor injects on these widgets. */
.page-client-security .clx-incident-grid .clx-cs-discover-text,
.page-client-security .clx-incident-grid .clx-cs-cta-button-1,
.page-client-security .clx-incident-grid .clx-cs-discover-card,
.page-client-security .clx-incident-grid .clx-cs-cta-button-2 {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.page-client-security .clx-incident-grid .clx-cs-discover-text > .elementor-widget-container,
.page-client-security .clx-incident-grid .clx-cs-cta-button-1 > .elementor-widget-container,
.page-client-security .clx-incident-grid .clx-cs-discover-card > .elementor-widget-container,
.page-client-security .clx-incident-grid .clx-cs-cta-button-2 > .elementor-widget-container {
  margin: 0 !important;
}
/* Gray card treatment on Discover paragraph — matches about-us light section bg */
.page-client-security .clx-incident-grid .clx-cs-discover-text .elementor-widget-container,
.page-client-security .clx-incident-grid .clx-cs-discover-card .elementor-widget-container {
  background: #F8F8F8 !important;
  border-radius: 20px !important;
  padding: 24px 28px !important;
}
/* Top-rated Discover text in col 3 row 2 */
.page-client-security .clx-incident-grid .clx-cs-discover-card {
  grid-column: 3 !important;
  grid-row: 2 !important;
  align-self: start !important;
}
.page-client-security .clx-incident-grid .elementor-widget {
  margin: 0 !important;
}
/* Match about-us spacing: first content section sits directly below hero
   with no extra margin (per-post CSS sets 35px top/bottom — zero it). */
.page-client-security .clx-cs-mgmt-section,
.page-partnership .clx-partnership-hero-arcs,
.page-mission .clx-split-row,
.page-how-we-work .elementor-element-c80772b,
.page-culture-and-diversity .clx-cd-hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* "Values We Stay True To" heading + intro quote sections get the same gray
   bg as the values grid below for a unified values block. Collapse section
   margins + tune internal padding so the block reads as one gray band with
   the same vertical rhythm as other inner-page sections (56px top/bottom). */
.page-mission .clx-mvv-values-section {
  background: #F8F8F8 !important;
  background-color: #F8F8F8 !important;
}
/* Note: applies to both 0ed59a4 and 46b3020 (both have .clx-mvv-values-section).
   On 0ed59a4 the margin-top: 0 is later overridden to 56px by the per-ID rule
   below — preserved for backward compatibility. */
.page-mission .clx-mvv-values-section,
.page-mission .clx-mission-values-section,
.page-mission .clx-team-callout-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Breathing room between the preceding white section and the gray band */
.page-mission .elementor-element-0ed59a4 {
  margin-top: 56px !important;
  margin-bottom: 0 !important;
}
/* Internal padding rhythm inside the gray block — matches about-us "How AI
   Powers" spacing: 56px between major blocks, tight between heading + intro. */
.page-mission .elementor-element-0ed59a4 {
  padding: 56px 0 16px 0 !important;
}
.page-mission .elementor-element-46b3020 {
  padding: 0 0 56px 0 !important;
}
.page-mission .clx-mission-values-section {
  padding: 0 0 56px 0 !important;
}
.page-mission .clx-team-callout-section {
  padding: 0 0 56px 0 !important;
}
/* Mission sections 9f52fa5 / 0e9d555 / 46b3020: image + text 50/50 —
   vertically center align each pair so quotes align with the image. */
.page-mission .clx-mvv-stat-row > .elementor-container {
  align-items: center !important;
}
.page-mission .clx-mvv-stat-row .elementor-element-populated {
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Mission values grid: align the orange // prefix to the top of a wrapping
   title instead of flex-center (so long titles line up at the first line). */
.page-mission .clx-mission-values-section .clx-process-step h4 {
  align-items: flex-start !important;
}
.page-mission .clx-mission-values-section .clx-process-step .clx-sl2 {
  flex: 0 0 auto !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
}
/* Card description: normal weight (not bold). */
.page-mission .clx-mission-values-section .clx-process-step p,
.page-mission .clx-mission-values-section .clx-process-step p * {
  font-weight: 400 !important;
}
/* Service tabs on mission page: normal-weight description + medium links */
.page-mission .clx-service-tabs .clx-sc-desc,
.page-mission .clx-service-tabs .clx-sc-desc * {
  font-weight: 400 !important;
}
.page-mission .clx-service-tabs .clx-sc-link {
  font-weight: 500 !important;
}
/* Intro paragraphs above the services tabs — normal weight, not bold */
.page-mission .clx-mission-services-intro p,
.page-mission .clx-mission-services-intro p * {
  font-weight: 400 !important;
}
/* Normalise the 3 mission block images (mission_2, Voision2, values2) to the
   same max height so they read as a consistent triptych. */
.page-mission .clx-mvv-stat-icon img {
  max-height: 260px !important;
  height: 260px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
/* "Discover Clixlogix's full range…" — full-width left-aligned paragraph
   inside the incident grid (the legacy dark callout wrapper has been
   removed from the post; only the inner widget rules remain). */
.page-client-security .clx-cs-discover-text {
  width: 100% !important;
  max-width: 100% !important;
}
.page-client-security .clx-cs-discover-text,
.page-client-security .clx-cs-discover-text p,
.page-client-security .clx-cs-discover-text .elementor-widget-container {
  text-align: center !important;
}
/* Security Management section (bfee720) — split into 2-col grid:
   image on left, heading/intro + committed-partner stacked on right, both
   columns vertically centered relative to each other. */
/* Clear the peach strip: the 408px ::before hero strip can bleed ~70px into
   the next section. Pad bfee720's top so its content clears the peach. */
.page-client-security .clx-cs-mgmt-section,
.page-partnership .clx-partnership-hero-arcs,
.page-mission .clx-split-row,
.page-culture-and-diversity .clx-cd-hero {
  padding-top: 60px !important;
  padding-bottom: 30px !important;
}
.page-culture-and-diversity .clx-cd-strategy-text p,
.page-culture-and-diversity .clx-cd-strategy-text p:last-child,
.page-culture-and-diversity .clx-cd-strategy-text-col p:last-child {
  line-height: inherit !important;
  text-align: center !important;
}

.page-culture-and-diversity .clx-cd-strategy-section > .elementor-container {
  align-items: stretch !important;
  min-height: 432px !important;
}
.page-culture-and-diversity .clx-cd-strategy-text-col > .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 28px !important;
}
.page-culture-and-diversity .clx-cd-strategy-img-col > .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 0 !important;
}
.page-culture-and-diversity .clx-cd-strategy-img-col .elementor-widget-wrap {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.page-culture-and-diversity .clx-cd-weave-img {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}
.page-culture-and-diversity .clx-cd-weave-img > .elementor-widget-container,
.page-culture-and-diversity .clx-cd-weave-img .elementor-image {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}
.page-culture-and-diversity .clx-cd-weave-img img {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 432px !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  display: block !important;
}
/* Culture & Diversity numbered-list items — match client-security's
   IP-protection icon-box look: 38px orange circle + counter number, then
   DM Sans 15/26 body. Counter resets on the shared wrap so numbering
   continues across both side-by-side icon-lists (1..6). */
.clx-numbered-list-wrap {
  counter-reset: cd-num !important;
}
.clx-numbered-list .elementor-icon-list-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.clx-numbered-list .elementor-icon-list-item {
  counter-increment: cd-num !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.clx-numbered-list .elementor-icon-list-item > a,
.clx-numbered-list .elementor-icon-list-item > span.elementor-icon-list-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.clx-numbered-list .elementor-icon-list-icon {
  display: none !important;
}
.clx-numbered-list .elementor-icon-list-item::before {
  content: counter(cd-num) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #E8491D !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}
.clx-numbered-list .elementor-icon-list-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  color: #1C1E21 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* "Equality in Action" wrapper inner section — bullets left (60%),
   image right (40%), vertically centered, image has rounded corners. */
.page-culture-and-diversity .clx-numbered-list-wrap .elementor-inner-section .elementor-container {
  align-items: center !important;
}
.page-culture-and-diversity .clx-cd-equality-img {
  margin: 0 !important;
}
.page-culture-and-diversity .clx-cd-equality-img img {
  width: 100% !important;
  height: auto !important;
  border-radius: 20px !important;
  display: block !important;
}
/* Mission quote widget: small quote icon + text styled like the about-us
   "We always bring our A game" h2 (color #000, 1.5rem, text-transform none,
   weight default bold). Keeps the original Elementor HTML structure. */
body.page-mission .clx-mvv-pillar .elementor-widget-container img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: middle !important;
  --smush-placeholder-width: 24px !important;
}
body.page-mission .clx-mvv-pillar p b {
  font-size: 1rem !important;
  font-weight: 700 !important;
}
body.page-mission .clx-mvv-pillar p:has(img.inv-comma) {
  display: inline !important;
  margin: 0 !important;
}
body.page-mission .clx-mvv-pillar p:has(img.inv-comma) + p {
  display: inline !important;
  margin: 0 !important;
}
.page-mission .clx-mvv-pillar b[style*="2.5rem"] {
  font-size: 1rem !important;
}
.page-mission .clx-mvv-pillar .elementor-drop-cap {
  font-size: inherit !important;
  font-weight: inherit !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}
.page-mission .clx-mvv-pillar,
.page-mission .clx-mvv-pillar p,
.page-mission .clx-mvv-pillar span,
.page-mission .clx-mvv-pillar em,
.page-mission .clx-mvv-pillar i,
.page-mission .clx-mvv-pillar b {
  color: #000 !important;
  font-size: 1.5rem !important;
  text-transform: none !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
/* Image is absolute-positioned on the left; text widgets flow in a flex
   column on the right, vertically centered relative to the image. */
.page-client-security .clx-cs-mgmt-section > .elementor-container > .elementor-column > .elementor-element-populated,
.page-partnership .clx-partnership-hero-arcs > .elementor-container > .elementor-column > .elementor-element-populated {
  position: relative !important;
  padding: 0 0 0 calc(45% + 28px) !important;
  min-height: 432px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.page-client-security .clx-cs-mgmt-image,
.page-partnership .clx-plu-animation {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 45% !important;
  margin: 0 !important;
}
/* Collapse every source of extra gap between the two Security Management
   paragraphs. The global `.page-client-security .elementor-widget` rule sets
   a 20px margin-bottom with higher specificity, so we match `.elementor-widget`
   in the selector to win the cascade. */
body.elementor-page.page-client-security .elementor-widget.clx-cs-mgmt-intro,
body.elementor-page.page-partnership .elementor-widget.clx-why-paragraphs {
  margin: 0 0 16px 0 !important;
}
body.elementor-page.page-client-security .elementor-widget.clx-cs-committed-partner {
  margin: 0 !important;
}
body.elementor-page.page-client-security .clx-cs-mgmt-intro > .elementor-widget-container,
body.elementor-page.page-partnership .clx-why-paragraphs > .elementor-widget-container,
body.elementor-page.page-client-security .clx-cs-committed-partner > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
body.elementor-page.page-client-security .clx-cs-mgmt-intro p,
body.elementor-page.page-client-security .clx-cs-mgmt-intro h2,
body.elementor-page.page-client-security .clx-cs-committed-partner p {
  margin: 0 !important;
}
/* Rebuild paragraph spacing inside the intro: small gap between h2 and body. */
body.elementor-page.page-client-security .clx-cs-mgmt-intro h2 {
  margin-bottom: 12px !important;
}
.page-client-security .clx-cs-mgmt-intro,
.page-partnership .clx-why-paragraphs {
  grid-area: text1 !important;
  align-self: start !important;
  text-align: left !important;
  margin: 0 !important;
}
.page-client-security .clx-cs-mgmt-image,
.page-partnership .clx-plu-animation {
  grid-area: image !important;
  align-self: start !important;
  justify-self: center !important;
  margin: 0 !important;
}
.page-client-security .clx-cs-committed-partner {
  grid-area: text2 !important;
  align-self: start !important;
  text-align: left !important;
  margin: 0 !important;
}
.page-client-security .clx-cs-mgmt-image .elementor-widget-container,
.page-client-security .clx-cs-mgmt-image a,
.page-client-security .clx-cs-mgmt-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.page-client-security .clx-cs-mgmt-image img {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  max-height: 432px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 20px !important;
  display: block !important;
}
/* Arcs section wrapper — kill the Elementor column-populated 10px top
   padding so the title sits flush with the section's #F8F8F8 top edge
   (combined with the inline section padding-top: 0). */
.page-partnership .clx-partnerships-arcs-row > .elementor-container > .elementor-column > .elementor-element-populated {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Recent Client Success Stories section on partnership — homepage paints
   .clx-casestudies-section with #F8F8F8, but on partnership it should be
   white so the gray↔white alternation reads correctly after the gray
   Service Expertise section above it. */
.page-partnership .clx-casestudies-section {
  background: #FFFFFF !important;
}
/* Technology Partnership Impact Delivered block (heading + 3 testimonials)
   — match the gray #F8F8F8 of the Capabilities/Service Expertise section
   above so this block reads as one continuous gray panel. Zero the margins
   between the testimonial sections so the 2vw rhythm gap doesn't create
   white seams between adjacent gray sections. */
.page-partnership .clx-impact-heading,
.page-partnership .clx-impact-card-1,
.page-partnership .clx-impact-card-2,
.page-partnership .clx-impact-card-3 {
  background: #F8F8F8 !important;
}
.page-partnership .clx-impact-card-1,
.page-partnership .clx-impact-card-2,
.page-partnership .clx-impact-card-3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.page-partnership .clx-impact-heading {
  padding-bottom: 24px !important;
}
.page-partnership .clx-impact-card-3 {
  padding-bottom: 16px !important;
}
.page-partnership .clx-contact-section {
  margin-top: 0 !important;
}
@media (min-width: 768px) {
  .page-partnership .clx-impact-card-1,
  .page-partnership .clx-impact-card-2 {
    padding-bottom: 16px !important;
  }
}
/* Mobile: testimonial photo touches the quote text below it because the
   columns stack tight; restore 24px breathing space below the photo. */
@media (max-width: 767px) {
  .page-partnership .clx-testimonial-card .clx-testimonial-photo,
  .page-partnership .clx-testimonial-card .clx-testimonial-photo-col {
    margin-bottom: 24px !important;
  }
  /* Mobile: tame the giant 5em stat number + impact paragraph spacing
     inside testimonial stat columns so they don't crash into the quote
     text above and look balanced on narrow screens. */
  .page-partnership .clx-impact-stat-1,
  .page-partnership .clx-impact-stat-2,
  .page-partnership .clx-impact-stat-3 {
    margin-top: 24px !important;
  }
  .page-partnership .clx-impact-stat-1 .elementor-widget-container > div:first-child,
  .page-partnership .clx-impact-stat-2 .elementor-widget-container > div:first-child,
  .page-partnership .clx-impact-stat-3 .elementor-widget-container > div:first-child {
    padding-bottom: 12px !important;
    line-height: 1 !important;
  }
  .page-partnership .clx-impact-stat-1 .elementor-widget-container > div:first-child span,
  .page-partnership .clx-impact-stat-2 .elementor-widget-container > div:first-child span,
  .page-partnership .clx-impact-stat-3 .elementor-widget-container > div:first-child span {
    font-size: 3.5em !important;
    line-height: 1 !important;
  }
  .page-partnership .clx-impact-stat-1 p,
  .page-partnership .clx-impact-stat-2 p,
  .page-partnership .clx-impact-stat-3 p {
    margin-top: 8px !important;
    line-height: 1.55 !important;
  }
  .page-partnership .clx-impact-stat-1 p span,
  .page-partnership .clx-impact-stat-2 p span,
  .page-partnership .clx-impact-stat-3 p span {
    font-size: 1em !important;
  }
  .page-partnership .clx-impact-stat-1 p span span,
  .page-partnership .clx-impact-stat-2 p span span,
  .page-partnership .clx-impact-stat-3 p span span {
    font-size: 1.6rem !important;
  }
}

/* Capabilities heading + intro that sits at the top of the gray Service
   Expertise (tabs) section — give the intro paragraph room before the
   tabs widget below it. Bumped specificity to win against the page-wide
   widget margin-restoration rule. */
body.elementor-page.page-partnership .elementor-widget.clx-tabs-intro {
  margin-bottom: 32px !important;
}
.page-partnership .clx-tabs-intro h2 {
  margin: 0 0 16px !important;
}
.page-partnership .clx-tabs-intro p {
  margin: 0 !important;
}

/* Paragraph rendered immediately below the partnership challenges table —
   match the standard page body paragraph typography (DM Sans 18/28
   #898D90) so it reads as normal body copy. */
.page-partnership .clx-table-after {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: #898D90 !important;
  margin: 24px 0 0 0 !important;
}
/* Learn More CTA wrapper — right-align to match the standalone-CTA pattern
   used across about-us (EXPLORE ALL SOLUTIONS etc.). */
.page-partnership .clx-table-after-cta {
  text-align: right !important;
  margin: 16px 0 0 0 !important;
}

/* "Who We Partner With" cards — same glassmorphic feel as the team cards
   under "Team Involved in Execution Phase" on how-we-work, but built around
   each icon-box widget: 16px gap between cards, white-tint blur background,
   subtle border, rounded corners, hover lift, centered icon + title + body. */
@media (min-width: 768px) {
  .clx-partner-grid > .elementor-container {
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
}
.clx-partner-card > .elementor-element-populated {
  margin: 0 !important;
  --e-column-margin-left: 0 !important;
  --e-column-margin-right: 0 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  text-align: center !important;
  height: 100% !important;
}
.clx-partner-card > .elementor-element-populated:hover {
  border-color: rgba(232, 97, 26, 0.25) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.clx-partner-card .elementor-icon-box-wrapper {
  text-align: center !important;
}
.clx-partner-card .elementor-icon-box-icon {
  margin: 0 auto 14px !important;
}
/* ai-software icon SVG sources have less viewBox padding than partnership's,
   so they render visually larger inside the same 3vw wrapper. Constrain
   ai-software icons to match partnership's rendered size. */
.page-ai-software-application-development .clx-partner-card .elementor-icon-box-icon img,
.page-ai-software-application-development .clx-partner-card .elementor-icon-box-icon svg {
  max-width: 32px !important;
  max-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
}
/* Bump the 9 Intelligence & Data Layer card icons (aidl2cd01-09) to 40px —
   Material Symbols at 32px feel undersized compared to Advanced Caps icons
   because Material's viewBox includes more internal padding around glyphs.
   Scoped to just these widget IDs so Advanced Caps icons stay at 32px. */
.page-ai-software-application-development .elementor-widget[data-id^="aidl2cd"] .elementor-icon-box-icon img,
.page-ai-software-application-development .elementor-widget[data-id^="aidl2cd"] .elementor-icon-box-icon svg,
.page-ai-software-application-development .elementor-widget[data-id^="aisol2cd"] .elementor-icon-box-icon img,
.page-ai-software-application-development .elementor-widget[data-id^="aisol2cd"] .elementor-icon-box-icon svg,
.page-ai-software-application-development .elementor-widget[data-id^="aiarc2cd"] .elementor-icon-box-icon img,
.page-ai-software-application-development .elementor-widget[data-id^="aiarc2cd"] .elementor-icon-box-icon svg {
  max-width: 38px !important;
  max-height: 38px !important;
  width: 38px !important;
  height: 38px !important;
}
/* erp-services page: pin primary service-card icons to 32px to match the
   AI page's clx-partner-card cap (AI is the design reference). Without
   this cap the 3vw font-size scales freely with viewport (~42px at
   1413px) and diverges from AI. */
body.page-erp-services .clx-partner-grid .elementor-icon-box-icon img,
body.page-erp-services .clx-partner-grid .elementor-icon-box-icon svg {
  max-width: 32px !important;
  max-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
}
/* erp-services page: pin the 5 "Advanced ERP" service icons (ERP Mobile
   Apps, ERP BI & Reporting, GenAI Enabled ERP Assistance, Agentic
   Automation for ERP, ERP + IoT & Connected Operations) to 32px. These
   sit outside .clx-partner-grid in sections 0cf5b78 + 2705fd0 and use
   2.5vw (~35px at 1413px), so this rule normalizes them too. */
body.page-erp-services .elementor-element-0cf5b78 .elementor-icon-box-icon img,
body.page-erp-services .elementor-element-0cf5b78 .elementor-icon-box-icon svg,
body.page-erp-services .elementor-element-2705fd0 .elementor-icon-box-icon img,
body.page-erp-services .elementor-element-2705fd0 .elementor-icon-box-icon svg {
  max-width: 32px !important;
  max-height: 32px !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
}
.clx-partner-card .elementor-icon-box-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1C1E21 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.2px !important;
}
.clx-partner-card .elementor-icon-box-description {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  margin: 0 !important;
}
/* AI Data Layer cards (Intelligence & Data Layer 9-card grid) use image-box
   widgets instead of icon-box because their icons are raster 3D PNGs, not
   SVGs (icon-box's selected_icon field only renders SVG/font icons).
   Mirror the icon-box card treatment: centered icon at top, then title,
   then description below. Services-page .svc-card top-right hanging icon
   pattern doesn't fit here — those cards are ~700px wide, ours are ~280px
   (1/3 col), so a 138px icon hanging top-right would consume half the
   width and crush the title. */
.page-ai-software-application-development .clx-partner-card .elementor-image-box-wrapper {
  text-align: center !important;
}
.page-ai-software-application-development .clx-partner-card .elementor-image-box-img {
  width: 100% !important;
  margin: 0 0 16px !important;
  display: block !important;
  text-align: center !important;
}
.page-ai-software-application-development .clx-partner-card .elementor-image-box-img img {
  width: 138px !important;
  height: 138px !important;
  max-width: 138px !important;
  max-height: 138px !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .page-ai-software-application-development .clx-partner-card .elementor-image-box-img img {
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
  }
}
@media (max-width: 767px) {
  .page-ai-software-application-development .clx-partner-card .elementor-image-box-img img {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }
}
.page-ai-software-application-development .clx-partner-card .elementor-image-box-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1C1E21 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.2px !important;
}
.page-ai-software-application-development .clx-partner-card .elementor-image-box-description {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  margin: 0 !important;
}
/* Stretch all 3 cards in a row to equal height */
.clx-partner-grid > .elementor-container {
  align-items: stretch !important;
}
/* Arcs section bullets — same flex+badge pattern as the cad163c bullets
   under "What Clixlogix Brings to the Table" so the 5-phase list reads
   identically: 38px ember circle badge + bold lead phrase + dash + body. */
.page-partnership .clx-pa-bullets p {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 0 20px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
}
.page-partnership .clx-pa-bullets p:last-child {
  margin-bottom: 0 !important;
}
.page-partnership .clx-pa-bullets .clx-bullet-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  background: #E8491D;
  color: #FFFFFF !important;
  border-radius: 50%;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-top: 4px;
}
.page-partnership .clx-pa-bullets .clx-bullet-body {
  flex: 1 1 auto;
}
.page-partnership .clx-pa-bullets .clx-bullet-body strong {
  font-weight: 700 !important;
  color: #1C1E21 !important;
}

/* Partnership "Lighting Up" component — replaces the static Mask-Group-45
   image inside partnership's bfee720 left column (d6084e5). 20×20 dot grid
   (400 dots), 75% lit via deterministic shuffle, dots brighten + scale to
   ember on a 7s loop with a 5s wave delay across rows+cols. Headline
   "+75%" + Deloitte caption. CSS only, transform-only animation,
   prefers-reduced-motion safe. Per Claude Design handoff. */
.plu {
  width: 100%;
  height: 100%;
  min-height: 632px;
  background: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Stretch the partnership left column (d6084e5) to fill the full height of
   the bfee720 text column on its right, so the .plu animation block grows
   along with the body copy instead of capping at the default 432px. The
   shared client-security rule sets the widget-container to `height: auto`,
   which collapses height: 100% on .plu — override here. */
/* Vertically center the .plu animation block within the text column.
   d6084e5 sizes to its content (.plu min-height: 632px) and is anchored to
   the vertical midpoint of the populated-wrap via top:50% + translateY,
   so it stays centered regardless of how tall the text content grows. */
.page-partnership .clx-plu-animation {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  height: auto !important;
}
@media (max-width: 1024px) {
  .page-partnership .clx-partnership-hero-arcs > .elementor-container > .elementor-column > .elementor-element-populated {
    padding-left: 0 !important;
    min-height: 0 !important;
  }
  .page-partnership .clx-plu-animation {
    position: static !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 24px 0 !important;
  }
  .page-partnership .clx-plu-animation .plu {
    min-height: 480px !important;
  }
}
/* Restore paragraph spacing inside afd461a on partnership — the shared
   client-security rule zeros all <p> margins (because that section has only
   one paragraph), but partnership has 3 paragraphs that need breathing
   room between them. Override with a 16px bottom gap on each paragraph. */
body.elementor-page.page-partnership .clx-why-paragraphs p {
  margin: 0 0 16px 0 !important;
}
body.elementor-page.page-partnership .clx-why-paragraphs p:last-child {
  margin-bottom: 0 !important;
}
body.elementor-page.page-partnership .clx-why-paragraphs h2 {
  margin: 0 0 16px 0 !important;
}
/* Partnership "What Clixlogix Brings to the Table" bullet typography —
   match the about-us icon-list bullet style: DM Sans 15/26, color #898D90,
   regular weight, with bold lead phrase via <strong>. Scoped to the
   bullet paragraphs ONLY (2nd <p> onwards) so the intro paragraph keeps
   its inherited page-body typography. */
.clx-brings-to-table p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  margin: 0 0 18px 0 !important;
}
.clx-brings-to-table p:last-child {
  margin-bottom: 0 !important;
}
.clx-brings-to-table p strong {
  font-weight: 700 !important;
  color: #1C1E21 !important;
}
.clx-brings-to-table p {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
.clx-brings-to-table .clx-bullet-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex-shrink: 0 !important;
  background: #E8491D;
  color: #FFFFFF !important;
  border-radius: 50%;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-top: 4px;
}
.clx-brings-to-table .clx-bullet-body {
  flex: 1 1 auto;
}
.clx-brings-to-table h2 {
  margin: 0 0 16px 0 !important;
}
/* ai-software page: vertically center the bullets list column relative to
   the right-side 8-box logo stack + stats. Bullets text stays left-aligned;
   only the block as a whole moves to the vertical middle. */
.page-ai-software-application-development .elementor-column:has(> .elementor-element-populated .clx-brings-to-table) > .elementor-element-populated,
.page-erp-services .elementor-column:has(> .elementor-element-populated .clx-brings-to-table) > .elementor-element-populated,
.page-erp-services .elementor-column:has(> .elementor-element-populated .clx-bullets-ph1) > .elementor-element-populated {
  justify-content: center !important;
}
/* Direct column-id targeting for ERP Why-Clixlogix section —
   match the existing left-column align-content/align-items pattern
   (line 8300) on the right column too so logos+stats vertically
   center against the bullets. */
body.page-erp-services .elementor-element-cbe69dd > .elementor-widget-wrap.elementor-element-populated,
body.page-erp-services .elementor-element-f7f39e7 > .elementor-widget-wrap.elementor-element-populated {
  align-content: center !important;
  align-items: center !important;
}
/* Partnership bullets section — single Elementor column whose
   .elementor-widget-wrap becomes a CSS Grid on desktop:
     intro (full width)
     bullets (left 60%)  | placeholder 1 (right 40%)
                         | placeholder 2 (right 40%)
   On mobile/tablet (<= 1024px) the grid collapses to natural source order
   (intro -> ph1 -> bullets -> ph2), which is what the user wants. */
@media (min-width: 1025px) {
  .page-partnership .clx-bullets-grid-col > .elementor-element-populated {
    display: grid !important;
    grid-template-columns: 60% 40% !important;
    grid-template-areas:
      'intro intro'
      'bullets ph1'
      'bullets ph2' !important;
    column-gap: 28px !important;
    /* row-gap removed — universal .clx-bullets-ph1 + .clx-bullets-ph2
       margin-top now handles the gap consistently across pages. */
  }
  .page-partnership .clx-bullets-grid-col .clx-bullets-intro    { grid-area: intro;   }
  .page-partnership .clx-bullets-grid-col .clx-brings-to-table  { grid-area: bullets; }
  .page-partnership .clx-bullets-grid-col .clx-bullets-ph1      { grid-area: ph1;     }
  .page-partnership .clx-bullets-grid-col .clx-bullets-ph2      { grid-area: ph2;     }
}
/* Placeholder cards — each grows to fill its grid cell so on desktop the
   two boxes share the full height of the bullets column. */
.clx-bullets-ph1,
.clx-bullets-ph2 {
  display: flex !important;
  align-self: stretch;
}
/* Universal vertical spacing between ph1 (logo grid) and ph2 (stats row)
   when they're adjacent siblings (ai-software-application-development
   layout). On partnership, grid row-gap also handles spacing but this
   gives consistent ~20px gap regardless of layout container. */
.clx-bullets-ph1 + .clx-bullets-ph2 {
  margin-top: 20px;
}
.page-partnership .clx-bullets-ph1 > .elementor-widget-container,
.page-partnership .clx-bullets-ph2 > .elementor-widget-container {
  flex: 1 1 auto !important;
  display: flex !important;
  width: 100% !important;
}
/* ph2 stats grid — fills the widget cell with a 2x2 stat tile grid; tiles
   stretch to share the available height equally. Override the global
   .svc-stats-row default 24px top margin since it's no longer following
   a heading on this page. */
.clx-ph2-stats {
  flex: 1 1 auto !important;
  width: 100% !important;
  margin-top: 0 !important;
  align-content: stretch !important;
  align-items: stretch !important;
}
.clx-ph2-stats .svc-stat-black {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center !important;
  text-align: center !important;
}
.clx-ph2-stats .svc-stat-black .svc-stat-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.clx-ph2-stats .svc-stat-black .svc-stat-top {
  width: 100% !important;
  justify-content: center !important;
  padding: 0 !important;
}
.page-partnership .clx-bullets-aside-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 220px;
  background: #F5F6F8;
  border: 1px dashed #C7CACE;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #898D90;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* ph1 partner logo grid — 2x2 white cards mirroring the black stat tile
   spacing/border-radius/padding from ph2, with each logo centered and
   capped to a sensible max so AWS/Google/Shopify/Odoo all read at a
   similar visual weight despite different intrinsic dimensions. */
.clx-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  align-content: stretch;
}
.clx-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #E8EBED;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  min-height: 120px;
}
.clx-logo-tile img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Custom partner badges (NVIDIA Inception, OpenAI Services Partner,
   Microsoft AI Solution Architect) are banner-style images — fill the
   tile fully (cover) and drop the tile's inner padding so the badge
   graphic occupies the full slot. */
.page-ai-software-application-development .clx-logo-tile:has(img[src*="nvidia-inception"]),
.page-ai-software-application-development .clx-logo-tile:has(img[src*="openai-services-partner"]),
.page-ai-software-application-development .clx-logo-tile:has(img[src*="microsoft-ai-solution-architect"]) {
  padding: 0 !important;
  overflow: hidden;
}
.page-ai-software-application-development .clx-logo-tile img[src*="nvidia-inception"],
.page-ai-software-application-development .clx-logo-tile img[src*="openai-services-partner"],
.page-ai-software-application-development .clx-logo-tile img[src*="microsoft-ai-solution-architect"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}
/* erp-services GenAI tabs — replaces the old 4-card grid for "Where
   GenAI Adds Value Inside Your ERP". Pattern modeled on the
   .clx-eng-tabs widget on /how-we-work/ but namespaced .clx-erp-genai-*
   so it can hold a screenshot panel below the tab nav. Auto-advances
   every 8s on idle (JS), pauses on user click. */
.clx-erp-genai-tabs-wrap {
  width: 100%;
  margin: 24px 0 0;
}
.clx-erp-genai-tabs__hint {
  font-family: 'JetBrains Mono', 'DM Sans', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #8E8E93;
  text-align: center;
  margin: 0 auto 12px;
  text-transform: uppercase;
}
.clx-erp-genai-tabs {
  display: flex;
  gap: 18px;
  max-width: 1140px;
  margin: 0 auto 28px;
  padding: 0 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.clx-erp-genai-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  font: inherit;
  color: inherit;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.clx-erp-genai-tab::after {
  content: '';
  position: absolute;
  left: 38px;
  right: 4px;
  bottom: 0;
  height: 2px;
  background: #FA4900;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(.6, .01, .25, 1);
}
.clx-erp-genai-tab.is-active::after { transform: scaleX(1); }
.clx-erp-genai-tab__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EFEFEF;
  color: #B0B0B0;
  font-family: 'Cabin', sans-serif;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.clx-erp-genai-tab__label {
  font-family: 'Cabin', sans-serif;
  font-size: 15px;
  color: #6B7280;
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.2s ease, font-weight 0.2s ease;
}
.clx-erp-genai-tab__cue { display: none; }  /* removed — eats horizontal space */
.clx-erp-genai-tab:hover .clx-erp-genai-tab__label { color: #1C1E21; }
.clx-erp-genai-tab.is-active .clx-erp-genai-tab__num { background: #E8491D; color: #FFFFFF; }
.clx-erp-genai-tab.is-active .clx-erp-genai-tab__label { color: #1C1E21; font-weight: 700; }
.clx-erp-genai-tab.is-active .clx-erp-genai-tab__cue { display: none; }

.clx-erp-genai-panels { position: relative; }
.clx-erp-genai-panel[hidden] { display: none; }
.clx-erp-genai-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  background: #F8F8F8;
  border: 1px solid #E8E8E8;
  border-radius: 14px;
  padding: 20px;
  max-width: 1140px;
  margin: 0 auto;
}
.clx-erp-genai-panel__media {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #E8E8E8;
}
.clx-erp-genai-panel__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.clx-erp-genai-panel__copy { padding: 4px 6px 8px; }
.clx-erp-genai-panel__title {
  font-family: 'Cabin', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1C1E21;
  margin: 0 0 10px;
  line-height: 1.25;
}
.clx-erp-genai-panel__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #3D5266;
  margin: 0 0 14px;
}
.clx-erp-genai-panel__impact {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1C1E21;
  margin: 0;
  padding: 12px 14px;
  background: #FFF6F1;
  border-left: 3px solid #FA4900;
  border-radius: 0 6px 6px 0;
}
.clx-erp-genai-panel__impact-arrow {
  color: #FA4900;
  font-weight: 700;
  margin-right: 6px;
}
@media (min-width: 901px) and (max-width: 1280px) {
  .clx-erp-genai-tab__label { font-size: 14px; }
  .clx-erp-genai-tabs { gap: 14px; }
  .clx-erp-genai-tab { gap: 8px; }
}
@media (max-width: 900px) {
  .clx-erp-genai-tabs { gap: 12px; }
  .clx-erp-genai-tab__label { font-size: 13px; }
  .clx-erp-genai-tabs__hint { font-size: 10px; }
  .clx-erp-genai-panel__title { font-size: 19px; }
}
@media (max-width: 600px) {
  .clx-erp-genai-tab__label { display: none; }  /* show numbers only on phone */
  .clx-erp-genai-tab::after { left: 0; }
  .clx-erp-genai-tabs { gap: 14px; }
}

/* erp-services Core + Extended ERP Modules grids: explicit vertical
   gap between row sections (each row is a separate Elementor section,
   so .elementor-container row-gap doesn't apply across them). Bump
   from 1vw default to 24px so card rows have visible breathing room. */
body.page-erp-services .elementor-element.elementor-element-c21144f,
body.page-erp-services .elementor-element.elementor-element-2ce9cef,
body.page-erp-services .elementor-element.elementor-element-1a72cec,
body.page-erp-services .elementor-element.elementor-element-e9f4662,
body.page-erp-services .elementor-element.elementor-element-f60fb8c,
body.page-erp-services .elementor-element.elementor-element-9ccbeaf {
  margin-top: 24px !important;
}
/* Within each row — bump column-gap so cards have horizontal breathing
   room too (default rule is 16px, push to 24px for these grids). */
body.page-erp-services .elementor-element-c1a7939 > .elementor-container,
body.page-erp-services .elementor-element-c21144f > .elementor-container,
body.page-erp-services .elementor-element-2ce9cef > .elementor-container,
body.page-erp-services .elementor-element-1a72cec > .elementor-container,
body.page-erp-services .elementor-element-8a14dc8 > .elementor-container,
body.page-erp-services .elementor-element-e9f4662 > .elementor-container,
body.page-erp-services .elementor-element-f60fb8c > .elementor-container,
body.page-erp-services .elementor-element-9ccbeaf > .elementor-container {
  column-gap: 24px !important;
}

/* erp-services "ERP System Design Expertise" section: breathing room
   above the heading + breathing room above the banner so the section
   sits cleanly between the industries CTA and "Unmatched ERP Coverage". */
body.page-erp-services .elementor-element.elementor-element-erparchhd1 {
  margin-top: 48px !important;
}
body.page-erp-services .elementor-element.elementor-element-erpsysbnr1 {
  margin-top: 32px !important;
}
@media (max-width: 767px) {
  body.page-erp-services .elementor-element.elementor-element-erparchhd1 {
    margin-top: 32px !important;
  }
  body.page-erp-services .elementor-element.elementor-element-erpsysbnr1 {
    margin-top: 24px !important;
  }
}
/* Override image positioning + soften scrim so the architecture photo
   reads across the full banner width instead of being hidden behind
   the dark gradient on the left. !important on size props guards against
   any inline width/height attribute or Smush lazyload aspect-ratio css var. */
body.page-erp-services .elementor-element-erpsysbnr1 .clx-ai-sysdesign-banner__media,
body.page-erp-services .elementor-element-erpsysbnr1 .clx-ai-sysdesign-banner__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
body.page-erp-services .elementor-element-erpsysbnr1 .clx-ai-sysdesign-banner__media img {
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* Soften scrim on ERP banner so the architecture image reads across
   more of the banner width (was hidden behind dark gradient on the
   left ~75%). Text on the left still readable since 0-35% stays solid. */
body.page-erp-services .elementor-element-erpsysbnr1 .clx-ai-sysdesign-banner__scrim {
  background: linear-gradient(
    90deg,
    #212529 0%,
    rgba(33, 37, 41, 0.92) 30%,
    rgba(33, 37, 41, 0.55) 55%,
    rgba(33, 37, 41, 0.15) 80%,
    rgba(33, 37, 41, 0.00) 100%
  ) !important;
}
/* erp-services 4-logo grid: all 4 fill edge-to-edge (Zoho 16:9,
   Microsoft Solutions Partner 4:3, Odoo via erp-partner 4:3, ERP
   Architect 16:9). object-fit: cover crops to the tile aspect. */
.page-erp-services .clx-logo-tile:has(img[src*="zoho-logo"]),
.page-erp-services .clx-logo-tile:has(img[src*="microsoft-partner-clixlogix"]),
.page-erp-services .clx-logo-tile:has(img[src*="erp-partner"]),
.page-erp-services .clx-logo-tile:has(img[src*="erp-architect"]) {
  padding: 0 !important;
  overflow: hidden;
}
.page-erp-services .clx-logo-tile img[src*="zoho-logo"],
.page-erp-services .clx-logo-tile img[src*="microsoft-partner-clixlogix"],
.page-erp-services .clx-logo-tile img[src*="erp-partner"],
.page-erp-services .clx-logo-tile img[src*="erp-architect"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}
.page-partnership .clx-plu-animation > .elementor-widget-container {
  height: auto !important;
  width: 100% !important;
  display: block !important;
}
.page-partnership .clx-plu-animation .plu {
  width: 100% !important;
  height: auto !important;
  min-height: 632px !important;
}
.plu__stat {
  flex: 0 0 auto;
  padding: clamp(20px, 4vw, 32px) clamp(12px, 2vw, 18px) clamp(6px, 1vw, 10px);
  text-align: center;
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
}
.plu__stat .big {
  font-size: 46px;
  color: #FA4900;
  letter-spacing: -1px;
  line-height: 1;
}
.plu__stat .lab {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #1C1E21 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
  margin-top: 8px;
}
.plu__stat .lab .plu__sp {
  color: #FA4900;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.plu__fieldWrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
}
/* Fade overlays in screen pixels — independent of SVG viewBox/scaling so the
   fade is always visible regardless of slice/meet aspect choice. Top + bottom
   bands soften the transition into the stat / cap text; left + right bands
   soften the field's outer edges. Pointer-events disabled so they don't
   block any future interactions. */
.plu__fieldWrap::before,
.plu__fieldWrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 3;
}
.plu__fieldWrap::before {
  top: 0;
  height: 14%;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
}
.plu__fieldWrap::after {
  bottom: 0;
  height: 14%;
  background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
}
.plu__fieldWrap > .plu__fade-x {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  pointer-events: none;
  z-index: 3;
}
.plu__fieldWrap > .plu__fade-x.--left {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0) 100%);
}
.plu__fieldWrap > .plu__fade-x.--right {
  right: 0;
  background: linear-gradient(-90deg, #fff 0%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0) 100%);
}
.plu__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.plu__cap {
  flex: 0 0 auto;
  padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 18px) clamp(20px, 4vw, 32px);
  text-align: center;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #1C1E21 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
}
/* Source line on the .plu caption — match how-we-work .clx-ig__note style:
   DM Sans 15/26, regular weight 400, color #898D90. */
.plu__cap .plu__source {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* Force each cap line onto its own row — using span+display:block instead
   of <br> so the line break survives Elementor's mobile render path,
   which strips <br> tags. */
.plu__cap .plu__cap-line {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .plu__field * {
    animation: none !important;
  }
}

/* Belonging "Constellation" animation — replaces the static Mask-Group-44-2
   image inside the bfee720 left column. ~40 dots drift on individual orbits
   for 18s, briefly snap onto a single ring (the alignment moment), then
   disperse. Pure CSS + SVG, transform-only animation, respects
   prefers-reduced-motion. Implemented per Claude Design handoff
   (Option 01 — Constellation, Recommended). */
.clx-belonging-constellation {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 432px;
  background: linear-gradient(180deg, #FFF6F1 0%, #FFFFFF 100%);
  border-radius: 20px;
  overflow: hidden;
}
.clx-belonging-constellation svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.clx-belonging-constellation .o1-dot {
  fill-opacity: 0.95;
  animation: clxBelongingDrift 18s ease-in-out infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
@keyframes clxBelongingDrift {
  0%   { transform: translate(var(--dx0, 0px), var(--dy0, 0px)); }
  35%  { transform: translate(var(--dx1, 0px), var(--dy1, 0px)); }
  50%  { transform: translate(0, 0); }
  65%  { transform: translate(var(--dx2, 0px), var(--dy2, 0px)); }
  100% { transform: translate(var(--dx0, 0px), var(--dy0, 0px)); }
}
.clx-belonging-constellation .o1-ring {
  fill: none;
  stroke: #FA4900;
  stroke-width: 1.2;
  stroke-dasharray: 3 6;
  opacity: 0;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: clxBelongingRing 18s ease-in-out infinite;
}
@keyframes clxBelongingRing {
  0%, 40%   { opacity: 0;   transform: scale(0.9); }
  50%       { opacity: 0.8; transform: scale(1); }
  60%, 100% { opacity: 0;   transform: scale(1.05); }
}
.clx-belonging-constellation .clx-belonging-label {
  position: absolute;
  left: 24px;
  bottom: 18px;
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  color: #1C1E21;
}
.clx-belonging-constellation .clx-belonging-label span {
  color: #FA4900;
}
@media (prefers-reduced-motion: reduce) {
  .clx-belonging-constellation .o1-dot,
  .clx-belonging-constellation .o1-ring {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .clx-belonging-constellation .o1-ring {
    opacity: 0.6 !important;
  }
}

/* Belonging "Woven Threads" animation — replaces the static Mask-Group-45-1
   image inside the Strategy section's right column (f41e971). Six tonal
   threads weave horizontally on a 14s loop with a centered fading
   "interwoven" word. Pure CSS + SVG, dash-offset animation, respects
   prefers-reduced-motion. Per Claude Design handoff (Option 02). */
.clx-belonging-weave {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 432px;
  background: linear-gradient(180deg, #FFF6F1 0%, #FFFFFF 100%);
  border-radius: 20px;
  overflow: hidden;
}
.clx-belonging-weave svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.clx-belonging-weave svg path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 280 1200;
  animation: clxBelongingWeave 14s linear infinite;
}
@keyframes clxBelongingWeave {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1480; }
}
.clx-belonging-weave-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.clx-belonging-weave-word span {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -0.5px;
  color: #1C1E21;
  opacity: 0;
  animation: clxBelongingWeaveWord 14s ease-in-out infinite;
}
@keyframes clxBelongingWeaveWord {
  0%, 15%   { opacity: 0; transform: translateY(8px); }
  30%, 70%  { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(-8px); }
}
.clx-belonging-weave .clx-belonging-label {
  position: absolute;
  left: 24px;
  bottom: 18px;
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  color: #1C1E21;
}
.clx-belonging-weave .clx-belonging-label span {
  color: #FA4900;
}
@media (prefers-reduced-motion: reduce) {
  .clx-belonging-weave svg path,
  .clx-belonging-weave-word span {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Strategy section: vertically center the weave animation in its column,
   matching how the constellation is centered in bfee720. The image's old
   width/aspect/border-radius rules don't apply since it's now an html
   widget, so target f41e971's widget-container directly. */
.page-culture-and-diversity .clx-cd-weave-img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}
.page-culture-and-diversity .clx-cd-weave-img > .elementor-widget-container {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mirror the client-security bfee720 2-col visual on culture-and-diversity.
   Data is a flat column with text-editor → image → text-editor; CSS absolute-
   positions the image on the left (45%) and pads the populated wrap so the
   text widgets flow on the right (55% - 28px). Page-scoped so the shipped
   pattern on client-security stays untouched. */
.page-culture-and-diversity .clx-cd-hero > .elementor-container > .elementor-column > .elementor-element-populated {
  position: relative !important;
  padding: 0 0 0 calc(45% + 28px) !important;
  min-height: 432px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.page-culture-and-diversity .clx-cd-hero-img {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 45% !important;
  margin: 0 !important;
}
.page-culture-and-diversity .clx-cd-hero-img .elementor-widget-container,
.page-culture-and-diversity .clx-cd-hero-img a,
.page-culture-and-diversity .clx-cd-hero-img img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.page-culture-and-diversity .clx-cd-hero-img img {
  aspect-ratio: 1 / 1 !important;
  max-height: 432px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 20px !important;
  display: block !important;
}
@media (max-width: 1024px) {
  .page-culture-and-diversity .clx-cd-hero > .elementor-container > .elementor-column > .elementor-element-populated {
    padding-left: 0 !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
  .page-culture-and-diversity .clx-cd-hero-img {
    position: static !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 24px 0 16px 0 !important;
  }
  .page-culture-and-diversity .clx-cd-mobile-reset {
    margin-top: 0 !important;
  }
}

/* Stack on tablet/mobile */
@media (max-width: 1024px) {
  .page-client-security .clx-cs-mgmt-section > .elementor-container > .elementor-column > .elementor-element-populated,
  .page-partnership .clx-partnership-hero-arcs > .elementor-container > .elementor-column > .elementor-element-populated {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "text1"
      "image"
      "text2" !important;
  }
}
/* 2-col wrapper: left = bullets, right = shield animation (matches
   about-us "How AI Powers Our Workflows" 50/50 split). */
.page-client-security .clx-gov-shield {
  padding: 20px 0 !important;
}
/* Ensure the rotating orbit dots in the shield SVG aren't clipped by
   the Elementor wrapper chain — orbit-4 sits at viewBox y=5 with r=13,
   which means parts of the dot extend ~8px outside the 0-400 viewBox
   in every direction as it rotates. The SVG sets overflow:visible
   inline but the parent chain needs to allow that overflow visually.
   Plus we add 16px padding on the wrap so the orbit dots have actual
   visual canvas to render into outside the SVG's box. */
.page-client-security .clx-gov-shield,
.page-client-security .clx-gov-shield > .elementor-container,
.page-client-security .clx-gov-shield .elementor-column,
.page-client-security .clx-gov-shield .elementor-element-populated,
.page-client-security .clx-gov-shield .elementor-widget,
.page-client-security .clx-gov-shield .elementor-widget-container,
.page-client-security .clx-gov-shield .clx-shield-wrap,
.page-client-security .clx-gov-shield .clx-shield {
  overflow: visible !important;
}
.page-client-security .clx-gov-shield .clx-shield-wrap {
  padding: 20px !important;
}
.page-client-security .clx-gov-shield > .elementor-container {
  align-items: center !important;
}
.page-client-security .clx-gov-shield .elementor-column:first-child .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  /* 4px left padding so the leftmost edge of the orange bullet circles
     isn't flush with the column edge (visually reads as 'clipped' even
     though nothing is actually cut off). */
  padding: 4px 0 4px 4px !important;
}
.page-client-security .clx-gov-shield .elementor-column:has(> .elementor-widget-wrap:not(.elementor-element-populated)) {
  display: none !important;
}
body.elementor-page.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-widget.elementor-widget-icon-box {
  margin: 0 !important;
  counter-increment: sec-step !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-widget-icon-box > .elementor-widget-container {
  padding: 0 !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #E8491D !important;
  flex-shrink: 0 !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-icon .elementor-icon {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-icon svg {
  display: none !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-icon::after {
  content: counter(sec-step) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-content {
  flex: 1 1 auto !important;
  width: auto !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #898D90 !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-title,
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-title > span {
  display: inline !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  color: #1C1E21 !important;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-title::after {
  content: ' \2013 ';
  white-space: pre;
}
.page-client-security :is(.clx-gov-shield, .clx-incident-grid) .elementor-icon-box-description {
  display: inline !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
}

/* About page — both columns center-aligned vertically */
.page-about-us .clx-au-stats-section > .elementor-container {
  align-items: center !important;
}
.page-about-us .clx-au-stat-card-col > .elementor-element-populated {
  margin-top: 0 !important;
}
.page-about-us .clx-au-stat-card-col .svc-stat-black {
  padding: 20px 20px 16px !important;
  text-align: center !important;
}
.page-about-us .clx-au-stat-card-col .svc-stat-top {
  justify-content: center !important;
}
.page-about-us .clx-au-stat-card-col .svc-stats-row {
  margin-top: 0 !important;
}
/* Full Spectrum tabbed section — constrain to 1132px on about-us */
.page-about-us .clx-au-tabs-section > .elementor-container {
  max-width: 1132px !important;
  margin: 0 auto !important;
}

/* CEO quote dark card — sheen effect matching contact form, triggers in viewport */
.page-about-us .clx-au-ceo-quote-section {
  position: relative !important;
  overflow: hidden !important;
}
.page-about-us .clx-au-ceo-quote-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 1;
}
.page-about-us .clx-au-ceo-quote-section.clx-in-view::before {
  animation: clx-sheen 6s ease-in-out infinite;
}
/* Team section dark banner — sheen effect */
.page-about-us .clx-au-team-banner-section {
  position: relative !important;
  overflow: hidden !important;
}
.page-about-us .clx-au-team-banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 1;
}
.page-about-us .clx-au-team-banner-section.clx-in-view::before {
  animation: clx-sheen 6s ease-in-out infinite;
}
@keyframes clx-sheen {
  0%   { left: -150%; opacity: 0; }
  10%  { opacity: 1; }
  50%  { left: 150%; opacity: 1; }
  60%  { opacity: 0; }
  100% { left: 150%; opacity: 0; }
}
/* Good Faith section — match continent card spacing (15px each side = 30px gap) */
.page-about-us .clx-au-ceo-quote-section > .elementor-container > .elementor-column > .elementor-element-populated,
.page-about-us .clx-au-core-values-row > .elementor-container > .elementor-column > .elementor-element-populated {
  margin: 15px !important;
}
/* Vertical gap between CEO quote row and testimonial row — match horizontal 30px */
body.page-about-us .clx-au-ceo-quote-section {
  margin: 15px !important;
}
body.page-about-us .clx-au-core-values-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Testimonial images — blog-card style: aspect-ratio box + cover.
   -1 / -2 / -3 = the three quote portraits (Arpita / Akhilesh /
   Shivangi). Set on each widget via _css_classes in Elementor data;
   the -3 class was wired up by the 2026-05-28 migration. */
.page-about-us .clx-au-core-values-row .clx-au-testimonial-photo-1,
.page-about-us .clx-au-core-values-row .clx-au-testimonial-photo-2,
.page-about-us .clx-au-core-values-row .clx-au-testimonial-photo-3 {
  width: calc(100% + 56px) !important;
  max-width: calc(100% + 56px) !important;
  margin-left: -28px !important;
  margin-right: -28px !important;
  margin-top: -32px !important;
  margin-bottom: 20px !important;
}
.page-about-us .clx-au-core-values-row .clx-au-testimonial-photo-1 .elementor-widget-container,
.page-about-us .clx-au-core-values-row .clx-au-testimonial-photo-2 .elementor-widget-container,
.page-about-us .clx-au-core-values-row .clx-au-testimonial-photo-3 .elementor-widget-container {
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}
body.page-about-us .clx-au-testimonial-photo-1 img,
body.page-about-us .clx-au-testimonial-photo-2 img,
body.page-about-us .clx-au-testimonial-photo-3 img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  border-radius: 20px 20px 0 0 !important;
  margin: 0 !important;
}

/* Quote icons in testimonial widgets — small */
body.page-about-us .clx-au-testimonial-quote-1 .elementor-widget-container img,
body.page-about-us .clx-au-testimonial-quote-2 .elementor-widget-container img,
body.page-about-us .clx-au-testimonial-quote-3 .elementor-widget-container img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: middle !important;
  --smush-placeholder-width: 24px !important;
}
/* The <b> wrapper around the quote image inflates it via font-size */
body.page-about-us .clx-au-testimonial-quote-1 p b,
body.page-about-us .clx-au-testimonial-quote-2 p b,
body.page-about-us .clx-au-testimonial-quote-3 p b {
  font-size: 1rem !important;
  font-weight: 700 !important;
}
/* Merge quote-icon paragraph with quote-text paragraph (same line) */
body.page-about-us .clx-au-testimonial-quote-1 p:has(img.inv-comma),
body.page-about-us .clx-au-testimonial-quote-2 p:has(img.inv-comma),
body.page-about-us .clx-au-testimonial-quote-3 p:has(img.inv-comma) {
  display: inline !important;
  margin: 0 !important;
}
body.page-about-us .clx-au-testimonial-quote-1 p:has(img.inv-comma) + p,
body.page-about-us .clx-au-testimonial-quote-2 p:has(img.inv-comma) + p,
body.page-about-us .clx-au-testimonial-quote-3 p:has(img.inv-comma) + p {
  display: inline !important;
  margin: 0 !important;
}
.page-about-us .clx-au-testimonial-quote-1 b[style*="2.5rem"],
.page-about-us .clx-au-testimonial-quote-2 b[style*="2.5rem"],
.page-about-us .clx-au-testimonial-quote-3 b[style*="2.5rem"] {
  font-size: 1rem !important;
}
/* Disable drop cap in testimonial widgets */
.page-about-us .clx-au-testimonial-quote-1 .elementor-drop-cap,
.page-about-us .clx-au-testimonial-quote-2 .elementor-drop-cap,
.page-about-us .clx-au-testimonial-quote-3 .elementor-drop-cap {
  font-size: inherit !important;
  font-weight: inherit !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: inherit !important;
}
/* Testimonial quote text — gray */
.page-about-us .clx-au-testimonial-quote-1 p,
.page-about-us .clx-au-testimonial-quote-2 p,
.page-about-us .clx-au-testimonial-quote-3 p,
.page-about-us .clx-au-testimonial-quote-1 em,
.page-about-us .clx-au-testimonial-quote-2 em,
.page-about-us .clx-au-testimonial-quote-3 em,
.page-about-us .clx-au-testimonial-quote-1 i,
.page-about-us .clx-au-testimonial-quote-2 i,
.page-about-us .clx-au-testimonial-quote-3 i {
  color: #7A7A7A !important;
}
.page-about-us .clx-au-testimonial-quote-1 span[style*="#ffffff"],
.page-about-us .clx-au-testimonial-quote-2 span[style*="#ffffff"],
.page-about-us .clx-au-testimonial-quote-3 span[style*="#ffffff"] {
  color: #7A7A7A !important;
}
/* Contact form section — every sub-page that hosts this section follows
   another section that already supplies its own 56px bottom padding (or
   equivalent), so the contact card itself needs zero top padding. The
   homepage keeps the original 80/0 design via the base rule in
   homepage.css; everywhere else uses 0/56 for a consistent rhythm. Mobile
   keeps 16px side padding to match the page-wide responsive rule. */
body:not(.home) .clx-contact-section {
  padding: 0 0 56px 0 !important;
}
@media (max-width: 1024px) {
  body:not(.home) .clx-contact-section {
    padding: 0 16px 56px 16px !important;
  }
}

/* Team section — tighten spacing between lines */
.page-about-us .clx-au-team-text-1 p,
.page-about-us .clx-au-team-text-2 p {
  margin: 0 !important;
  line-height: 1.3 !important;
}
.page-about-us .team-section-text {
  line-height: 1.3 !important;
}

/* Testimonial name — match CEO name font */
.page-about-us .clx-au-testimonial-quote-1 p:first-child,
.page-about-us .clx-au-testimonial-quote-2 p:first-child,
.page-about-us .clx-au-testimonial-quote-3 p:first-child {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.page-about-us .clx-au-testimonial-quote-1 p:first-child b,
.page-about-us .clx-au-testimonial-quote-2 p:first-child b,
.page-about-us .clx-au-testimonial-quote-3 p:first-child b,
.page-about-us .clx-au-testimonial-quote-1 p:first-child span,
.page-about-us .clx-au-testimonial-quote-2 p:first-child span,
.page-about-us .clx-au-testimonial-quote-3 p:first-child span {
  color: #1C1E21 !important;
  font-weight: 700 !important;
}

/* Core values cards — gray card style, larger images */
.page-about-us .clx-au-core-values-row .clx-au-core-value-1 > .elementor-element-populated,
.page-about-us .clx-au-core-values-row .clx-au-core-value-2 > .elementor-element-populated,
.page-about-us .clx-au-core-values-row .clx-au-core-value-3 > .elementor-element-populated {
  background: #F8F8F8 !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  min-height: 232px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s !important;
  overflow: hidden !important;
}
.page-about-us .clx-au-core-values-row .clx-au-core-value-1 img,
.page-about-us .clx-au-core-values-row .clx-au-core-value-2 img,
.page-about-us .clx-au-core-values-row .clx-au-core-value-3 img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin-bottom: 16px !important;
}
/* Reset widget-initial width constraints on the images */
.page-about-us .clx-au-core-values-row .elementor-widget-image.elementor-widget__width-initial {
  width: 100% !important;
  max-width: 100% !important;
}
.page-about-us .clx-au-core-values-row .elementor-widget-image .elementor-widget-container {
  width: 100% !important;
}
.page-about-us .clx-au-core-values-row .clx-au-core-value-1 > .elementor-element-populated:hover,
.page-about-us .clx-au-core-values-row .clx-au-core-value-2 > .elementor-element-populated:hover,
.page-about-us .clx-au-core-values-row .clx-au-core-value-3 > .elementor-element-populated:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(232, 78, 15, 0.25) !important;
}

/* Continent card rows — match Journey timeline 15px each side = 30px gap */
.page-about-us .clx-au-continents-row-1 > .elementor-container > .elementor-column > .elementor-element-populated,
.page-about-us .clx-au-continents-row-2 > .elementor-container > .elementor-column > .elementor-element-populated {
  margin: 15px !important;
}

/* Continent cards — tech-card styling (no badge, no cutout) */
.page-about-us .clx-au-locations-section .clx-au-tech-card > .elementor-element-populated {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.page-about-us .clx-au-locations-section .clx-au-tech-card .elementor-widget {
  max-width: 100% !important;
  width: 100% !important;
}
.page-about-us .clx-au-locations-section .clx-au-tech-card .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}
.page-about-us .clx-au-locations-section .clx-au-continent-card-1 > .elementor-element-populated,
.page-about-us .clx-au-locations-section .clx-au-continent-card-2 > .elementor-element-populated,
.page-about-us .clx-au-locations-section .clx-au-continent-card-3 > .elementor-element-populated,
.page-about-us .clx-au-locations-section .clx-au-continent-card-4 > .elementor-element-populated,
.page-about-us .clx-au-locations-section .clx-au-continent-card-5 > .elementor-element-populated {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  padding: 32px 28px 32px 28px !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s !important;
}
.page-about-us .clx-au-locations-section .clx-au-continent-card-1 > .elementor-element-populated:hover,
.page-about-us .clx-au-locations-section .clx-au-continent-card-2 > .elementor-element-populated:hover,
.page-about-us .clx-au-locations-section .clx-au-continent-card-3 > .elementor-element-populated:hover,
.page-about-us .clx-au-locations-section .clx-au-continent-card-4 > .elementor-element-populated:hover,
.page-about-us .clx-au-locations-section .clx-au-continent-card-5 > .elementor-element-populated:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(232, 78, 15, 0.25) !important;
}
/* Europe & Asia cards have inner 2-col sections for city lists — reset their spacing */
.page-about-us .clx-au-locations-section .clx-au-eu-cities-row,
.page-about-us .clx-au-locations-section .clx-au-as-cities-row {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}
.page-about-us .clx-au-locations-section .clx-au-eu-cities-row > .elementor-container,
.page-about-us .clx-au-locations-section .clx-au-as-cities-row > .elementor-container {
  padding: 0 !important;
  margin: 0 !important;
}
.page-about-us .clx-au-locations-section .clx-au-eu-cities-row .elementor-column > .elementor-element-populated,
.page-about-us .clx-au-locations-section .clx-au-as-cities-row .elementor-column > .elementor-element-populated {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-height: 0 !important;
}

/* Zero default widget margin/padding inside continent cards */
.page-about-us .clx-au-locations-section .clx-au-continent-card-1 .elementor-widget,
.page-about-us .clx-au-locations-section .clx-au-continent-card-2 .elementor-widget,
.page-about-us .clx-au-locations-section .clx-au-continent-card-3 .elementor-widget,
.page-about-us .clx-au-locations-section .clx-au-continent-card-4 .elementor-widget,
.page-about-us .clx-au-locations-section .clx-au-continent-card-5 .elementor-widget {
  margin-bottom: 0 !important;
}
.page-about-us .clx-au-locations-section .clx-au-continent-card-1 .elementor-widget-container,
.page-about-us .clx-au-locations-section .clx-au-continent-card-2 .elementor-widget-container,
.page-about-us .clx-au-locations-section .clx-au-continent-card-3 .elementor-widget-container,
.page-about-us .clx-au-locations-section .clx-au-continent-card-4 .elementor-widget-container,
.page-about-us .clx-au-locations-section .clx-au-continent-card-5 .elementor-widget-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* Continent heading — 30px bold like tech-card, same line-height + margin */
.page-about-us .clx-au-locations-section h3 {
  font-family: 'Cabin', sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 2.2 !important;
  letter-spacing: -0.9px !important;
  color: #1C1E21 !important;
  margin: 0 0 20px 0 !important;
  position: relative;
  padding-left: 26px;
}
.page-about-us .clx-au-locations-section h3::before {
  content: '//';
  position: absolute;
  left: 0;
  top: 0;
  color: #FF6A1C;
  font-weight: 700;
}
/* City list — tech-card benefit style with orange triangle */
.page-about-us .clx-au-locations-section .elementor-icon-list-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}
.page-about-us .clx-au-locations-section .elementor-icon-list-item {
  display: flex !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
}
.page-about-us .clx-au-locations-section .elementor-icon-list-icon {
  display: none !important;
}
.page-about-us .clx-au-locations-section .elementor-icon-list-item::before {
  content: '\25B8';
  color: #FF6A1C;
  flex-shrink: 0;
  margin-top: 1px;
}
.page-about-us .clx-au-locations-section .elementor-icon-list-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
}
/* "Number of Clients" label — bold benefits-label style. The 5 elements
   are da2bb48/b15c759/f56c1d3/d96dfc5/6a3d092 — keeping ID-based since
   they're nested inside the named .clx-au-locations-section anchor and
   never get re-cloned independently. */
.page-about-us .clx-au-locations-section .clx-au-location-text p {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  margin: 0 0 8px 0 !important;
}
/* Stat number list — first item is the big orange number, second is
   "as of ...". The 4 stat-list IDs (fe88c03/5204301/b2399cc/32143d2)
   plus 76b15a8 stay ID-based since they're leaf widgets nested inside
   the named .clx-au-locations-section anchor. */
.page-about-us .clx-au-locations-section .clx-au-location-list .elementor-icon-list-items {
  margin: 0 !important;
}
.page-about-us .clx-au-locations-section .clx-au-location-list .elementor-icon-list-item {
  margin: 0 !important;
}
.page-about-us .clx-au-locations-section .clx-au-location-list .elementor-icon-list-text,
.page-about-us .clx-au-locations-section .clx-au-location-list-text-only .elementor-icon-list-text {
  color: #898D90 !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 26px !important;
}
.page-about-us .clx-au-locations-section .clx-stat-sup {
  color: #9CA3AF !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  font-family: 'DM Sans', sans-serif !important;
  margin-left: 6px !important;
  vertical-align: super !important;
  line-height: 1 !important;
}

/* Map with orange pins overlay */
.page-about-us .clx-map-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}
.page-about-us .clx-map-img {
  display: block;
  width: 100%;
  height: auto;
}
.page-about-us .clx-map-pin {
  position: absolute;
  width: clamp(14px, 2.5vw, 32px);
  height: clamp(14px, 2.5vw, 32px);
  background: url('assets/homepage/circle-3d-icon-1.png') no-repeat center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(255, 106, 28, 0.55)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.page-about-us .clx-map-pin::before,
.page-about-us .clx-map-pin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #FF6A1C;
  animation: clx-map-wave 2.4s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
.page-about-us .clx-map-pin::after {
  animation-delay: 1.2s;
}
@keyframes clx-map-wave {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* Tab content — normal weight */
.page-about-us .clx-au-tabs-section .clx-sc-desc,
.page-about-us .clx-au-tabs-section .elementor-tab-content p {
  font-weight: 400 !important;
}

/* "Want an Expert?" CTA banner — black bg + white text. Single shared
   .clx-cta-section class on the section in all 3 pages (about-us, c+d,
   partnership) replaces the old 9-page-class :is() chain. */
.clx-cta-section,
.clx-cta-section:not(.elementor-motion-effects-element-type-background) {
  background-color: #121212 !important;
}
.clx-cta-section h2,
.clx-cta-section h2.title.main-heading,
.clx-cta-section .elementor-widget-text-editor h3,
.clx-cta-section .clx-cta-text p,
.clx-cta-section span,
.clx-cta-section .elementor-heading-title {
  color: #FFFFFF !important;
}
/* About page — Transparency section bg + spacing matches services. Note:
   9381047 (karma column) doesn't currently exist in data; rules kept as
   forward-compat in case the karma diagram is re-added later. */
.page-about-us .clx-au-transparency-section {
  background: #F8F8F8 !important;
  padding: 56px 0 !important;
}
.page-about-us .clx-au-transparency-section > .elementor-container {
  align-items: stretch !important;
}
.page-about-us .elementor-element.clx-au-karma-col img {
  width: 100%;
  display: block;
  transform: translateX(10%) scale(1.5);
}
.page-about-us .clx-au-karma-col > .elementor-widget-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.page-about-us .clx-au-journey-section {
  padding: 0 0 56px 0 !important;
  margin: 0 !important;
}
.page-about-us .clx-au-journey-section .stratum-horizontal-timeline {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Show 3.3 cards so last one peeks, hinting scroll */
.page-about-us .stratum-horizontal-timeline-item {
  flex: 0 0 30% !important;
  max-width: 30% !important;
}
@media (max-width: 768px) {
  /* Mobile: show 1.2 cards */
  .page-about-us .stratum-horizontal-timeline-item {
    flex: 0 0 80% !important;
    max-width: 80% !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet: show 2.3 cards */
  .page-about-us .stratum-horizontal-timeline-item {
    flex: 0 0 42% !important;
    max-width: 42% !important;
  }
}
/* Timeline arrow heads — replace FA icon with CSS chevron */
.page-about-us .stratum-horizontal-timeline-item__point-content {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
}
.page-about-us .stratum-horizontal-timeline-item__point-content--icon i {
  display: none !important;
}
.page-about-us .stratum-horizontal-timeline-item__point-content--icon::after {
  content: '' !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-right: 3px solid #FF6A1C !important;
  border-bottom: 3px solid #FF6A1C !important;
  transform: rotate(-45deg) !important;
  margin-left: -3px !important;
}
.page-about-us .clx-au-stats-section {
  margin: 35px 0 0 0 !important;
  padding: 56px 0 0 0 !important;
}
.page-about-us .clx-au-transparency-section:not(.elementor-motion-effects-element-type-background),
.page-about-us .clx-au-transparency-section > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #F8F8F8 !important;
}
/* Fix text in Transparency section — all text matches body text style.
   cfbb1ea is a leaf widget kept ID-based (no separate semantic class
   warranted). e9b848a "discover more reasons" rules removed — element
   doesn't exist in current Elementor data. */
.page-about-us .clx-au-transparency-section span,
.page-about-us .clx-au-transparency-section p,
.page-about-us .elementor-element.clx-au-cta-text span,
.page-about-us .elementor-element.clx-au-cta-text p {
  color: #898D90 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
}
/* "Know More" CTA — match EXPLORE ALL SOLUTIONS style */
.page-about-us .elementor-element.clx-au-cta-link a {
  color: #FA4900 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: underline !important;
  text-decoration-color: #FA4900 !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 9px;
}
.page-about-us .elementor-element.clx-au-cta-link a::after {
  content: '\2192';
  display: inline-block;
  margin-left: 14px;
  font-size: 1.15em;
  font-weight: 900;
  -webkit-text-stroke: 1px #FA4900;
  transition: transform 0.2s;
}
.page-about-us .elementor-element.clx-au-cta-link a:hover::after {
  transform: translateX(5px);
}
/* Remove the old underline tag */
.page-about-us .elementor-element.clx-au-cta-link u {
  text-decoration: none;
}

/* AI section — icon-list styled like homepage .clx-benefit-item */
.page-about-us .clx-au-stat-list .elementor-icon-list-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  counter-reset: ai-step !important;
}
.page-about-us .clx-au-stat-list .elementor-icon-list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #898D90 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  text-align: center !important;
}
.page-about-us .clx-au-stat-list .elementor-icon-list-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #E8491D !important;
  flex-shrink: 0 !important;
}
.page-about-us .clx-au-stat-list .elementor-icon-list-icon svg {
  display: none !important;
}
.page-about-us .clx-au-stat-list .elementor-icon-list-item {
  counter-increment: ai-step !important;
}
.page-about-us .clx-au-stat-list .elementor-icon-list-icon::after {
  content: counter(ai-step) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
}
.page-about-us .clx-au-stat-list .elementor-icon-list-text {
  font-size: 15px !important;
  line-height: 26px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #898D90 !important;
}
.page-about-us .clx-au-stat-list .elementor-icon-list-text strong {
  color: #1C1E21 !important;
  font-weight: 600 !important;
}
/* The "How AI Powers Our Workflows?" inner column has content_position:center
   in its Elementor settings, which gives its widget-wrap flex `align-items:
   center` — that centres the icon-list widget block horizontally. Force the
   widget to span the full column AND explicitly left-align every layer, so
   neither the block nor any inner text reads as centred. */
body.page-about-us .clx-au-stat-list,
body.page-about-us .clx-au-stat-list > .elementor-widget-container,
body.page-about-us .clx-au-stat-list .elementor-icon-list-items {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  text-align: left !important;
}
body.page-about-us .clx-au-stat-list .elementor-icon-list-item,
body.page-about-us .clx-au-stat-list .elementor-icon-list-text {
  text-align: left !important;
  justify-content: flex-start !important;
}
/* Override the parent column's flex centring so the widget anchors at the
   left edge of the column populated wrap. */
body.page-about-us .elementor-element-9da0f97 > .elementor-widget-wrap.elementor-element-populated,
body.page-about-us .elementor-element-9da0f97 .elementor-widget-wrap {
  align-items: flex-start !important;
  align-content: flex-start !important;
}

/* How-we-work phase deliverable lists — same numbered-circle bullet treatment
   as the about-us "How AI Powers Our Workflows?" list (id 1440020). Each list
   resets its own counter so 1..N starts fresh per phase. */
.page-how-we-work .clx-hww-iconlist .elementor-icon-list-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  counter-reset: clx-phase-step !important;
}
.page-how-we-work .clx-hww-iconlist .elementor-icon-list-item {
  display: flex !important;
  gap: 8px !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #898D90 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  counter-increment: clx-phase-step !important;
}
.page-how-we-work .clx-hww-iconlist .elementor-icon-list-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #E8491D !important;
  flex-shrink: 0 !important;
}
.page-how-we-work .clx-hww-iconlist .elementor-icon-list-icon svg {
  display: none !important;
}
.page-how-we-work .clx-hww-iconlist .elementor-icon-list-icon::after {
  content: counter(clx-phase-step) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
}
.page-how-we-work .clx-hww-iconlist .elementor-icon-list-text {
  font-size: 15px !important;
  line-height: 26px !important;
  font-family: 'DM Sans', sans-serif !important;
  color: #898D90 !important;
}
.page-how-we-work .clx-hww-iconlist .elementor-icon-list-text strong {
  color: #1C1E21 !important;
  font-weight: 600 !important;
}

/* FAQ accordion answers inherited font-weight: 700 from the
   pp-advanced-accordion's default typography on the tab-content area.
   Reset to normal weight so they read as body copy. */
.page-how-we-work .pp-accordion-tab-content,
.page-how-we-work .pp-accordion-tab-content p,
.page-how-we-work .pp-accordion-tab-content span,
.page-how-we-work .pp-accordion-tab-content li {
  font-weight: 400 !important;
}
.page-how-we-work .pp-accordion-tab-content strong,
.page-how-we-work .pp-accordion-tab-content b {
  font-weight: 600 !important;
}

/* COLUMN width fix: per-post Elementor CSS has
   `.elementor-element-be1182d { width: 2%; }` on the column that holds
   the Training Materials icon-box — a broken authoring value (likely the
   editor slider was dragged to 2% by accident). The generic `:is(...)`
   deliverables rule wasn't winning specificity. Force the column to full
   width with a dedicated high-specificity selector so its icon-box has
   room to render as a bullet. Covers the analogous Phase 7 columns and
   the Training col regardless of media query context. */
body.page-how-we-work .elementor-54504 .elementor-element.elementor-element-be1182d,
body.page-how-we-work .elementor-element.elementor-element-be1182d.elementor-element-be1182d {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
body.page-how-we-work .elementor-54504 .elementor-element.elementor-element-be1182d > .elementor-element-populated,
body.page-how-we-work .elementor-element.elementor-element-be1182d > .elementor-element-populated {
  margin: 0 !important;
  padding: 0 !important;
  --e-column-margin-left: 0 !important;
  --e-column-margin-right: 0 !important;
}

/* "Training Materials and KT Documentation" (icon-box 0bbb00b) still
   wasn't picking up my generic Phase 7 deliverable bullet styling — per
   Elementor per-post CSS its specificity was higher on the orange circle
   background. Force the specific widget with a doubled-class selector +
   all its ::after counter + inline title/description treatment so it
   matches the other three bullets in section 2e86edd. */
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: center !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b > .elementor-widget-container {
  padding: 0 !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-icon {
  background: #E8491D !important;
  background-color: #E8491D !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-icon .elementor-icon,
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-icon svg {
  display: none !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-icon::after {
  content: counter(clx-deliv-step) !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-title {
  display: inline !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  color: #1C1E21 !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-title > span {
  display: inline !important;
  font: inherit !important;
  color: inherit !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-title::after {
  content: ' \2013 ' !important;
  white-space: pre !important;
  color: #898D90 !important;
  font-weight: 400 !important;
}
.page-how-we-work .elementor-element.elementor-element-0bbb00b.elementor-element-0bbb00b .elementor-icon-box-description {
  display: inline !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
}

/* Defensive override: per-post CSS for every Phase 7 deliverable icon-box
   sets `gap: 25px`, `align-items: start`, and a 35px `line-height` on the
   title — values that fight my generic bullet rules and visually break
   the 4th item ("Training Materials and KT Documentation"). Pin every
   bit explicitly with extra specificity. Also kill the per-widget right
   padding (25px) and re-hide the icon SVG inside .elementor-icon. */
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-wrapper,
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-element-0bbb00b .elementor-icon-box-wrapper,
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-element-e820700 .elementor-icon-box-wrapper,
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-element-e5f2cb4 .elementor-icon-box-wrapper,
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-element-6c6979c .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: center !important;
}
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-element .elementor-icon-box-title,
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-title {
  margin-block-end: 0 !important;
  margin: 0 !important;
  line-height: 26px !important;
  display: inline !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1C1E21 !important;
}
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-title > span {
  display: inline !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-title::after {
  content: ' \2013 ' !important;
  white-space: pre !important;
  color: #898D90 !important;
  font-weight: 400 !important;
}
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-description {
  line-height: 26px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  display: inline !important;
  margin: 0 !important;
}
/* Strip per-widget right padding + reset content area */
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-element > .elementor-widget-container {
  padding: 0 !important;
}
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-content {
  flex: 1 !important;
  text-align: left !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
}
/* Kill the SVG icon AND any black background tint per-post CSS applies */
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-icon .elementor-icon,
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-icon svg {
  display: none !important;
  background: transparent !important;
  fill: transparent !important;
}
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-icon {
  background: #E8491D !important;
  background-color: #E8491D !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.page-how-we-work .elementor-element.elementor-element-2e86edd .elementor-icon-box-icon::after {
  content: counter(clx-deliv-step) !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* "Deliverables of scope analysis:" — the 3 icon-box widgets below this
   heading (section 32abf0d: aa97dc2, 2eed756, 7d4e7c4) are restacked as a
   vertical numbered list using the exact same bullet pattern as the
   about-us "How AI Powers Our Workflows?" list: 38px orange circle with a
   counter-driven number, DM Sans 15/26 text on the right. Title and
   description flow inline with an en dash between them. */
.page-how-we-work .clx-hww-iconbox {
  padding: 20px 0 !important;
  margin: 0 !important;
}
.page-how-we-work .clx-hww-iconbox > .elementor-container {
  flex-direction: column !important;
  gap: 20px !important;
  counter-reset: clx-deliv-step !important;
}
.page-how-we-work .clx-hww-iconbox > .elementor-container > .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
  counter-increment: clx-deliv-step !important;
}
.page-how-we-work .clx-hww-iconbox > .elementor-container > .elementor-column > .elementor-element-populated {
  padding: 0 !important;
  margin: 0 !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-widget {
  margin: 0 !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: center !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  background: #E8491D !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-icon .elementor-icon,
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-icon svg,
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-icon img {
  display: none !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-icon::after {
  content: counter(clx-deliv-step) !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1 !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-content {
  flex: 1 !important;
  text-align: left !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
}
/* Inline title — en dash — description flow on a single run of text */
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-title {
  display: inline !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  color: #1C1E21 !important;
  margin: 0 !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-title::after {
  content: ' \2013 ' !important;
  white-space: pre !important;
  color: #898D90 !important;
  font-weight: 400 !important;
}
/* Strip the 1-2vw margin-top from sections that host the deliverable
   tables (LLM Scope / Sizing / Estimation / Cost / RACI) — that gap was
   stacking above the new eyebrow + headline pattern, making the tables
   look like they had abrupt extra space at the top. */
.page-how-we-work .clx-hww-table-section {
  margin-top: 0 !important;
}

/* Shared "data table" treatment — used by every deliverable table on
   the how-we-work page (LLM scope, LLM sizing, Estimation, LLM cost,
   RACI matrix). Replaces the old orange-title-bar + peach-header style
   with the same clean white card + Cabin 15/600 centered headers +
   DM Sans 15/26 body used by the engagement models tables. */
.page-how-we-work .clx-data-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  margin: 0 0 8px;
}
.page-how-we-work .clx-data-table .clx-data-eyebrow {
  font-family: 'JetBrains Mono', 'DM Sans', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #8E8E93;
  text-transform: uppercase;
  margin: 0 0 6px;
  text-align: left;
}
.page-how-we-work .clx-data-table .clx-data-title {
  font-family: 'Cabin', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: #1C1E21;
  margin: 0 0 14px;
  text-align: left;
}
.page-how-we-work .clx-data-table > table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto;
  margin: 0;
  border: 1px solid #D8D8D8;
  background: #FFFFFF;
}
.page-how-we-work .clx-data-table table thead th {
  font-family: 'Cabin', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  color: #1C1E21 !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 16px 14px !important;
  background: #F8F8F8 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-left: 1px solid #EAEAEA !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}
.page-how-we-work .clx-data-table table thead th:first-child { border-left: 0 !important; }
.page-how-we-work .clx-data-table table tbody td,
.page-how-we-work .clx-data-table table tbody th {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #5C5C66 !important;
  font-weight: 400 !important;
  padding: 18px 16px !important;
  vertical-align: top !important;
  text-align: left !important;
  background: #FFFFFF !important;
  text-transform: none !important;
  border-left: 1px solid #EAEAEA !important;
  border-top: 1px solid #EAEAEA !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  word-break: normal;
  overflow-wrap: break-word;
}
.page-how-we-work .clx-data-table table tbody tr > *:first-child {
  border-left: 0 !important;
  font-family: 'Cabin', sans-serif !important;
  font-weight: 600 !important;
  color: #1C1E21 !important;
  background: #FFFFFF !important;
}
/* Total row in <tfoot> — thicker separator above, subtle gray bg, bold
   total value. Used by the Cost Estimation Worksheet "Estimate" row. */
.page-how-we-work .clx-data-table table tfoot td,
.page-how-we-work .clx-data-table table tfoot th {
  font-family: 'Cabin', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  color: #1C1E21 !important;
  background: #F8F8F8 !important;
  padding: 16px !important;
  vertical-align: middle !important;
  text-align: left !important;
  text-transform: none !important;
  border-top: 2px solid #D8D8D8 !important;
  border-left: 1px solid #EAEAEA !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}
.page-how-we-work .clx-data-table table tfoot tr > *:first-child {
  border-left: 0 !important;
}
.page-how-we-work .clx-data-table a { color: #FA4900; }
@media (max-width: 1024px) {
  .page-how-we-work .clx-data-table > table { min-width: 680px; }
  .page-how-we-work .clx-data-table table thead th { padding: 12px 10px !important; font-size: 14px !important; line-height: 20px !important; }
  .page-how-we-work .clx-data-table table tbody td,
  .page-how-we-work .clx-data-table table tbody th { padding: 14px 12px !important; font-size: 14px !important; line-height: 22px !important; }
}

/* Shared eyebrow + headline pattern used inside text-editor widgets
   (LLM scope title, Team Involved heading, and any other "sample
   deliverable" style inline heading). Matches the tech-platforms
   micro-label + Cabin 22/600 scale already on the site. */
.page-how-we-work .clx-heading-eyebrow {
  font-family: 'JetBrains Mono', 'DM Sans', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #8E8E93;
  text-transform: uppercase;
  margin: 0 0 6px !important;
  text-align: left;
}
.page-how-we-work .clx-heading-title {
  font-family: 'Cabin', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: #1C1E21;
  margin: 0 0 14px !important;
  text-align: left;
}

/* "Team Involved" cards — match the services-page `.svc-sprint-card`
   aesthetic exactly (16px radius, 20px padding, same transition + hover
   treatment). 3-col Elementor row (02b0316) with two populated columns
   (d89ef42, e5de40b) and one empty (395de6b). */
@media (min-width: 768px) {
  .page-how-we-work .clx-hww-engagement-section > .elementor-container {
    column-gap: 16px !important;
  }
  /* 10% downscale across the board: 2-col Scope Analysis cards go 40→36%
     (cap 324px), 3-col Solutioning + Estimation rows go 33.333→30%. Leaves
     a small right-side margin so the row reads as intentionally contained
     rather than full-bleed. */
  .page-how-we-work .elementor-element-02b0316 .elementor-element-d89ef42,
  .page-how-we-work .elementor-element-02b0316 .elementor-element-e5de40b {
    width: 36% !important;
    max-width: 324px !important;
    flex: 0 1 36% !important;
  }
  .page-how-we-work .elementor-element-545e195 .elementor-element-a8c7f8a,
  .page-how-we-work .elementor-element-545e195 .elementor-element-c0b22c4,
  .page-how-we-work .elementor-element-545e195 .elementor-element-e591510,
  .page-how-we-work .elementor-element-306f872 .elementor-element-d92a798,
  .page-how-we-work .elementor-element-306f872 .elementor-element-38f1b46,
  .page-how-we-work .elementor-element-306f872 .elementor-element-391b735,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-95d03c4,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-7087116,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-aa23601,
  .page-how-we-work .elementor-element-a8749fe .elementor-element-6248240,
  .page-how-we-work .elementor-element-f859213 .elementor-element-c9ace8b,
  .page-how-we-work .elementor-element-f859213 .elementor-element-81217a2,
  .page-how-we-work .elementor-element-f859213 .elementor-element-da44e57,
  .page-how-we-work .elementor-element-389d296 .elementor-element-41967b5,
  .page-how-we-work .elementor-element-389d296 .elementor-element-71301c3,
  .page-how-we-work .elementor-element-389d296 .elementor-element-b4e4f26,
  .page-how-we-work .elementor-element-b7806b0 .elementor-element-3c5bb6b,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-79aea1f,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-2cdc7f8,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-bf8ae9a {
    width: 30% !important;
    max-width: 30% !important;
    flex: 0 0 30% !important;
  }
  /* Cols 2 + 3 on Solutioning team had `margin: 0 0 0 6%` in the per-post
     CSS (legacy layout hack), which shoved them rightward and clipped the
     card width. Same thing on Estimation team. Kill that margin AND zero
     the Elementor column margin vars so all three cards sit in their
     equal-width slots. */
  .page-how-we-work .elementor-element-545e195 .elementor-element-c0b22c4 > .elementor-element-populated,
  .page-how-we-work .elementor-element-545e195 .elementor-element-e591510 > .elementor-element-populated,
  .page-how-we-work .elementor-element-306f872 .elementor-element-38f1b46 > .elementor-element-populated,
  .page-how-we-work .elementor-element-306f872 .elementor-element-391b735 > .elementor-element-populated,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-7087116 > .elementor-element-populated,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-aa23601 > .elementor-element-populated,
  .page-how-we-work .elementor-element-f859213 .elementor-element-81217a2 > .elementor-element-populated,
  .page-how-we-work .elementor-element-f859213 .elementor-element-da44e57 > .elementor-element-populated,
  .page-how-we-work .elementor-element-389d296 .elementor-element-71301c3 > .elementor-element-populated,
  .page-how-we-work .elementor-element-389d296 .elementor-element-b4e4f26 > .elementor-element-populated,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-2cdc7f8 > .elementor-element-populated,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-bf8ae9a > .elementor-element-populated {
    margin: 0 !important;
    --e-column-margin-left: 0 !important;
    --e-column-margin-right: 0 !important;
  }
}
@media (max-width: 767px) {
  .page-how-we-work .elementor-element-02b0316 .elementor-element-d89ef42,
  .page-how-we-work .elementor-element-02b0316 .elementor-element-e5de40b,
  .page-how-we-work .elementor-element-545e195 .elementor-element-a8c7f8a,
  .page-how-we-work .elementor-element-545e195 .elementor-element-c0b22c4,
  .page-how-we-work .elementor-element-545e195 .elementor-element-e591510,
  .page-how-we-work .elementor-element-306f872 .elementor-element-d92a798,
  .page-how-we-work .elementor-element-306f872 .elementor-element-38f1b46,
  .page-how-we-work .elementor-element-306f872 .elementor-element-391b735,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-95d03c4,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-7087116,
  .page-how-we-work .elementor-element-d92bef2 .elementor-element-aa23601,
  .page-how-we-work .elementor-element-a8749fe .elementor-element-6248240,
  .page-how-we-work .elementor-element-f859213 .elementor-element-c9ace8b,
  .page-how-we-work .elementor-element-f859213 .elementor-element-81217a2,
  .page-how-we-work .elementor-element-f859213 .elementor-element-da44e57,
  .page-how-we-work .elementor-element-389d296 .elementor-element-41967b5,
  .page-how-we-work .elementor-element-389d296 .elementor-element-71301c3,
  .page-how-we-work .elementor-element-389d296 .elementor-element-b4e4f26,
  .page-how-we-work .elementor-element-b7806b0 .elementor-element-3c5bb6b,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-79aea1f,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-2cdc7f8,
  .page-how-we-work .elementor-element-b61df74 .elementor-element-bf8ae9a {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}
.page-how-we-work .elementor-element-02b0316 .elementor-element-395de6b,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-0221adb,
.page-how-we-work .elementor-element-a8749fe .elementor-element-a98bf0b,
.page-how-we-work .elementor-element-a8749fe .elementor-element-d040c32,
.page-how-we-work .elementor-element-a8749fe .elementor-element-ec89c1c,
.page-how-we-work .elementor-element-f859213 .elementor-element-7399604,
.page-how-we-work .elementor-element-389d296 .elementor-element-bf0b071,
.page-how-we-work .elementor-element-b7806b0 .elementor-element-32735f5,
.page-how-we-work .elementor-element-b7806b0 .elementor-element-2be23dc,
.page-how-we-work .elementor-element-b7806b0 .elementor-element-90c79cd,
.page-how-we-work .elementor-element-b61df74 .elementor-element-2d2177e {
  display: none !important;
}
.page-how-we-work .elementor-element-02b0316 .elementor-element-d89ef42 > .elementor-element-populated,
.page-how-we-work .elementor-element-02b0316 .elementor-element-e5de40b > .elementor-element-populated,
.page-how-we-work .elementor-element-545e195 .elementor-element-a8c7f8a > .elementor-element-populated,
.page-how-we-work .elementor-element-545e195 .elementor-element-c0b22c4 > .elementor-element-populated,
.page-how-we-work .elementor-element-545e195 .elementor-element-e591510 > .elementor-element-populated,
.page-how-we-work .elementor-element-306f872 .elementor-element-d92a798 > .elementor-element-populated,
.page-how-we-work .elementor-element-306f872 .elementor-element-38f1b46 > .elementor-element-populated,
.page-how-we-work .elementor-element-306f872 .elementor-element-391b735 > .elementor-element-populated,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-95d03c4 > .elementor-element-populated,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-7087116 > .elementor-element-populated,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-aa23601 > .elementor-element-populated,
.page-how-we-work .elementor-element-a8749fe .elementor-element-6248240 > .elementor-element-populated,
.page-how-we-work .elementor-element-f859213 .elementor-element-c9ace8b > .elementor-element-populated,
.page-how-we-work .elementor-element-f859213 .elementor-element-81217a2 > .elementor-element-populated,
.page-how-we-work .elementor-element-f859213 .elementor-element-da44e57 > .elementor-element-populated,
.page-how-we-work .elementor-element-389d296 .elementor-element-41967b5 > .elementor-element-populated,
.page-how-we-work .elementor-element-389d296 .elementor-element-71301c3 > .elementor-element-populated,
.page-how-we-work .elementor-element-389d296 .elementor-element-b4e4f26 > .elementor-element-populated,
.page-how-we-work .elementor-element-b7806b0 .elementor-element-3c5bb6b > .elementor-element-populated,
.page-how-we-work .elementor-element-b61df74 .elementor-element-79aea1f > .elementor-element-populated,
.page-how-we-work .elementor-element-b61df74 .elementor-element-2cdc7f8 > .elementor-element-populated,
.page-how-we-work .elementor-element-b61df74 .elementor-element-bf8ae9a > .elementor-element-populated {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px 20px 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}
/* The three decorative circles sit as a centered row above the title.
   Original Elementor sizing was full-column-width (~280px) — fine when
   they stacked vertically but huge in a horizontal row. Cap them to
   ~80px so three fit nicely in the 360px-wide card. */
.page-how-we-work :is(.elementor-element-02b0316, .elementor-element-545e195, .elementor-element-306f872, .elementor-element-d92bef2, .elementor-element-a8749fe, .elementor-element-f859213, .elementor-element-389d296, .elementor-element-b7806b0, .elementor-element-b61df74) .elementor-widget-image {
  width: 61px !important;
  max-width: 61px !important;
  flex: 0 0 61px !important;
  margin: 0 9px 14px 0 !important;
  position: relative;
}
.page-how-we-work :is(.elementor-element-02b0316, .elementor-element-545e195, .elementor-element-306f872, .elementor-element-d92bef2, .elementor-element-a8749fe, .elementor-element-f859213, .elementor-element-389d296, .elementor-element-b7806b0, .elementor-element-b61df74) .elementor-widget-image:last-of-type {
  margin-right: 0 !important;
}
.page-how-we-work :is(.elementor-element-02b0316, .elementor-element-545e195, .elementor-element-306f872, .elementor-element-d92bef2, .elementor-element-a8749fe, .elementor-element-f859213, .elementor-element-389d296, .elementor-element-b7806b0, .elementor-element-b61df74) .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
/* Title + description take the full row width below the avatars and
   centre-align so the card reads as a tidy avatar-name-description block. */
.page-how-we-work .elementor-element-02b0316 .elementor-element-d89ef42 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-02b0316 .elementor-element-e5de40b > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-545e195 .elementor-element-a8c7f8a > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-545e195 .elementor-element-c0b22c4 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-545e195 .elementor-element-e591510 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-306f872 .elementor-element-d92a798 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-306f872 .elementor-element-38f1b46 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-306f872 .elementor-element-391b735 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-95d03c4 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-7087116 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-aa23601 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-a8749fe .elementor-element-6248240 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-f859213 .elementor-element-c9ace8b > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-f859213 .elementor-element-81217a2 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-f859213 .elementor-element-da44e57 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-389d296 .elementor-element-41967b5 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-389d296 .elementor-element-71301c3 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-389d296 .elementor-element-b4e4f26 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-b7806b0 .elementor-element-3c5bb6b > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-b61df74 .elementor-element-79aea1f > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-b61df74 .elementor-element-2cdc7f8 > .elementor-element-populated > .elementor-inner-section,
.page-how-we-work .elementor-element-b61df74 .elementor-element-bf8ae9a > .elementor-element-populated > .elementor-inner-section {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}
.page-how-we-work .elementor-element-02b0316 .elementor-element-d89ef42 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-02b0316 .elementor-element-e5de40b > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-545e195 .elementor-element-a8c7f8a > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-545e195 .elementor-element-c0b22c4 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-545e195 .elementor-element-e591510 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-306f872 .elementor-element-d92a798 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-306f872 .elementor-element-38f1b46 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-306f872 .elementor-element-391b735 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-95d03c4 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-7087116 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-d92bef2 .elementor-element-aa23601 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-a8749fe .elementor-element-6248240 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-f859213 .elementor-element-c9ace8b > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-f859213 .elementor-element-81217a2 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-f859213 .elementor-element-da44e57 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-389d296 .elementor-element-41967b5 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-389d296 .elementor-element-71301c3 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-389d296 .elementor-element-b4e4f26 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-b7806b0 .elementor-element-3c5bb6b > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-b61df74 .elementor-element-79aea1f > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-b61df74 .elementor-element-2cdc7f8 > .elementor-element-populated:hover,
.page-how-we-work .elementor-element-b61df74 .elementor-element-bf8ae9a > .elementor-element-populated:hover {
  border-color: rgba(232, 97, 26, 0.25) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* Role title */
.page-how-we-work :is(.elementor-element-02b0316, .elementor-element-545e195, .elementor-element-306f872, .elementor-element-d92bef2, .elementor-element-a8749fe, .elementor-element-f859213, .elementor-element-389d296, .elementor-element-b7806b0, .elementor-element-b61df74) h5 {
  font-family: 'Cabin', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1C1E21 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.2px;
  text-align: center !important;
}
/* Role description */
.page-how-we-work :is(.elementor-element-02b0316, .elementor-element-545e195, .elementor-element-306f872, .elementor-element-d92bef2, .elementor-element-a8749fe, .elementor-element-f859213, .elementor-element-389d296, .elementor-element-b7806b0, .elementor-element-b61df74) p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* =========================================================
   Our-team icon-list bullets — mirror the page-client-security
   "Intellectual Property Protection" bullet look. Orange 38px
   circle with CSS-counter number, DM Sans 15/26 text, hide the
   default SVG icon. Applies to every team-insights section
   (Software Engineering / Digital Marketing / Design / BA /
   Project Management / Consulting / Operations / Support).
   ========================================================= */
body.page-our-team .clx-team-bio {
  counter-reset: ot-step !important;
}
.page-our-team .clx-team-bio .elementor-icon-list-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.page-our-team .clx-team-bio .elementor-icon-list-item {
  counter-increment: ot-step !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}
.page-our-team .clx-team-bio .elementor-icon-list-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #E8491D !important;
  flex-shrink: 0 !important;
  position: relative;
}
.page-our-team .clx-team-bio .elementor-icon-list-icon svg,
.page-our-team .clx-team-bio .elementor-icon-list-icon img {
  display: none !important;
}
.page-our-team .clx-team-bio .elementor-icon-list-icon::after {
  content: counter(ot-step, decimal-leading-zero);
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
.page-our-team .clx-team-bio .elementor-icon-list-text {
  flex: 1 1 auto !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  padding-top: 4px !important;
}
/* Increase vertical space between top-level numbered bullets. */
.page-our-team .clx-team-bio > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wrap > .elementor-widget-icon-list .elementor-icon-list-items {
  gap: 18px !important;
}
/* Tighten the gap between a top-level numbered bullet and the nested
   inner-section that holds its sub-bullets (was inheriting Elementor's
   default inner-section margin). */
.page-our-team .clx-team-bio .elementor-inner-section {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-our-team .clx-team-bio .elementor-inner-section > .elementor-container > .elementor-column > .elementor-element-populated {
  padding: 0 !important;
}
/* Nested icon-lists (inside Elementor inner-sections used as side-by-side
   sub-bullet columns like "Entry/Mid/Senior Engineer"). Use the original
   small orange arrow icon at full size — no numbered orange circle — and
   tighten the stack so they read as a compact sub-list. */
.page-our-team .clx-team-bio .elementor-inner-section .elementor-icon-list-items {
  gap: 8px !important;
}
.page-our-team .clx-team-bio .elementor-inner-section .elementor-icon-list-item {
  counter-increment: none !important;
  align-items: center !important;
  gap: 10px !important;
}
.page-our-team .clx-team-bio .elementor-inner-section .elementor-icon-list-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.page-our-team .clx-team-bio .elementor-inner-section .elementor-icon-list-icon::after {
  content: none !important;
}
.page-our-team .clx-team-bio .elementor-inner-section .elementor-icon-list-icon svg,
.page-our-team .clx-team-bio .elementor-inner-section .elementor-icon-list-icon img {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
}
body.page-our-team.page-our-team .clx-team-bio .elementor-inner-section ul.elementor-icon-list-items li.elementor-icon-list-item span.elementor-icon-list-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  padding-top: 0 !important;
  letter-spacing: normal !important;
}

/* =========================================================
   Our-team Delivery Flow section (c16a66b) — Elementor
   section has background #F5F6F8 which spans full viewport
   natively (no 100vw breakout hack). The inner HTML widget's
   .clx-delivery-flow is transparent and inherits the band.
   ========================================================= */
body.page-our-team .clx-delivery-band > .elementor-container > .elementor-column > .elementor-element-populated {
  padding: 0 !important;
}
body.page-our-team .clx-delivery-flow {
  background: transparent !important;
}
/* Force Case Studies section to white on our-team so it reads as a clean
   break after the gray Delivery Flow band above it. homepage.css sets
   .clx-casestudies-section bg to #F8F8F8 globally; our-team needs it
   white for bg alternation (white → gray → white). */
body.page-our-team .clx-casestudies-section {
  background: #FFFFFF !important;
}
/* Breathing room between Joy's testimonial (last section before the gray
   Delivery Flow band) and the band itself — 32px bottom padding on Joy's
   row, so the card doesn't butt up against the gray band edge. */
body.page-our-team .clx-team-bio-card-last {
  padding-bottom: 32px !important;
}
body.page-our-team .clx-delivery-band {
  padding-top: 32px !important;
}
/* Force the Delivery Flow section heading to match the on-page
   "Key Teams and Expertise" h2.title.main-heading: Cabin 52/60/500,
   letter-spacing -1.56px, color #142533. */
body.page-our-team .clx-delivery-flow .clx-delivery-flow__heading {
  font-family: 'Cabin', sans-serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533 !important;
}
/* Force the Delivery Flow intro paragraph to match the on-page
   "Team Clixlogix is dedicated..." paragraph: Cabin 18/28/400/#727272. */
body.page-our-team .clx-delivery-flow .clx-delivery-flow__intro {
  font-family: 'Cabin', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  color: #727272 !important;
}
/* Discovery pill — match how-we-work "Success Rate / Compounded" stacked
   labels: DM Sans 15/26/600/#1C1E21, no pill chrome, no uppercase, no
   letter-spacing. Both lines on the pill use the same treatment. */
body.page-our-team .clx-delivery-flow .clx-delivery-flow__caption {
  text-align: center !important;
  display: block !important;
  width: auto !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-our-team .clx-delivery-flow .clx-delivery-flow__discovery-pill,
body.page-our-team .clx-delivery-flow .clx-delivery-flow__discovery-meta {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 26px !important;
  color: #1C1E21 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* =========================================================
   Our-team "Development Teams Overview" cards — mirror the
   how-we-work Business Analyst card treatment. 3 team-grid
   sections (2397f0e, b8d7564, 3d238dd) each with 3 team columns
   plus one empty 4th column that gets hidden.
   ========================================================= */
/* Hide the empty 4th columns inside the team-grid sections.
   Migrated 2026-04 to .clx-team-grid-empty-col semantic class on the 2
   live empty-4th-column elements (was 9 IDs, 7 of which were dead refs). */
.page-our-team .clx-team-grid-empty-col {
  display: none !important;
}

/* Adesh testimonial card (section c75feb9 / column 0dc3c4d) — minimal
   clean look: uniform 24px padding, tighter border-radius, softer border,
   neutralise the peach hover tint, and shrink the engineer photo. */
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-card > .elementor-element-populated {
  padding: 24px !important;
  border: 1px solid #E8EBED !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-card > .elementor-element-populated:hover {
  background: #FFFFFF !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-photo,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-photo .elementor-widget-container {
  height: 360px !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-photo img {
  width: 100% !important;
  height: 360px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}
/* Culture & Diversity "Commitments To Our People" cards — glassmorphic
   card styling mirroring the our-team Search Engine Team card: white-tinted
   blur background, 16px radius, subtle border, centered h5 + body. Each of
   the 6 columns carries .clx-commitment-card so the testimonial column
   (which lives in the same row) keeps its own outlined-card style. */
.page-culture-and-diversity .clx-commitment-card > .elementor-element-populated {
  margin: 0 !important;
  --e-column-margin-left: 0 !important;
  --e-column-margin-right: 0 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px 20px 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  text-align: center !important;
}
.page-culture-and-diversity .clx-commitment-card > .elementor-element-populated:hover {
  border-color: rgba(232, 97, 26, 0.25) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.page-culture-and-diversity .clx-commitment-card .elementor-widget-image {
  text-align: center !important;
  margin: 0 auto 14px !important;
}
.page-culture-and-diversity .clx-commitment-card .elementor-widget-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  border-radius: 12px !important;
}
/* 16px gap between commitment cards in both rows, matching our-team .clx-team-grid */
@media (min-width: 768px) {
  .page-culture-and-diversity .clx-cd-commitment-grid-1 > .elementor-container,
  .page-culture-and-diversity .clx-cd-commitment-grid-2 > .elementor-container {
    column-gap: 16px !important;
    row-gap: 16px !important;
  }
  .page-culture-and-diversity .clx-cd-commitment-grid-1 > .elementor-container > .elementor-column,
  .page-culture-and-diversity .clx-cd-commitment-grid-2 > .elementor-container > .elementor-column.clx-commitment-card {
    width: calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
    flex: 0 0 calc(25% - 12px) !important;
  }
  /* Testimonial spans two card-widths plus the gap between them */
  .page-culture-and-diversity .clx-cd-commitment-grid-2 > .elementor-container > .elementor-column.clx-testimonial-card {
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
  }
}
.page-culture-and-diversity .clx-commitment-card h5 {
  font-family: 'Cabin', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1C1E21 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.2px;
  text-align: center !important;
}
.page-culture-and-diversity .clx-commitment-card h5 span {
  color: #1C1E21 !important;
}
.page-culture-and-diversity .clx-commitment-card p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  margin: 0 !important;
  text-align: center !important;
}
.page-culture-and-diversity .clx-commitment-card .elementor-widget-text-editor .elementor-widget-container {
  text-align: center !important;
}

/* Culture & Diversity Awards & Recognition — wrap the heading row + 6 award
   rows in a single continuous #F8F8F8 gray panel matching the homepage
   service-section bg (per Clixlogix design system). Zero out per-row top
   margins so the gray reads as one panel; add a single 56px pad at the top
   of the heading row and 56px below the last row before the CTA section. */
.page-culture-and-diversity .clx-cd-award-panel {
  background: #F8F8F8 !important;
  margin: 0 !important;
}
/* Gray panel: 35px white gap above (matches the rest of the page rhythm),
   but flush into the black CTA below — no white seam between gray and
   black. The gray's internal padding-bottom: 56px gives the last award
   room to breathe before the color change. */
.page-culture-and-diversity .clx-cd-award-panel-heading {
  margin-top: 35px !important;
  padding-top: 56px !important;
  padding-bottom: 16px !important;
}
.page-culture-and-diversity .clx-cd-award-panel-last {
  padding-top: 16px !important;
  padding-bottom: 56px !important;
  margin-bottom: 0 !important;
}
body.page-culture-and-diversity .clx-cd-cta {
  margin-top: 0 !important;
}
/* Middle 5 award rows — internal 16px padding rhythm. */
.page-culture-and-diversity .clx-cd-award-panel:not(.clx-cd-award-panel-heading):not(.clx-cd-award-panel-last) {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Culture & Diversity awards rows — vertically center the image, body copy,
   and year so they share a baseline; center-align the body, right-align the
   year, and ensure the body inherits regular weight (no auto-bolding).
   Override the 33/33/33 column widths so the body copy gets the breathing
   room it needs (20/60/20). */
.page-culture-and-diversity .clx-award-row > .elementor-container {
  align-items: center !important;
}
@media (min-width: 768px) {
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(1) {
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
  }
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(2) {
    width: 60% !important;
    max-width: 60% !important;
    flex: 0 0 60% !important;
  }
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(3) {
    width: 15% !important;
    max-width: 15% !important;
    flex: 0 0 15% !important;
  }
}
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column > .elementor-element-populated {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}
/* Breathing room on the body column so it isn't kissing the logo or the year */
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(2) > .elementor-element-populated {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.page-culture-and-diversity .clx-award-row .elementor-widget-text-editor p,
.page-culture-and-diversity .clx-award-row .elementor-widget-text-editor p span {
  font-weight: 400 !important;
}
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(2) .elementor-widget-text-editor,
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(2) .elementor-widget-text-editor p {
  text-align: center !important;
}
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(2) .elementor-widget-text-editor p {
  margin: 0 !important;
}
/* Logo on the right edge of col 1, year on the left edge of col 3, so the
   visual gap from logo→body and body→year is purely the body column's
   28px L/R padding — i.e. equal on both sides. */
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(1) .elementor-widget-image {
  text-align: right !important;
}
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(3) .elementor-widget-text-editor,
.page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(3) .elementor-widget-text-editor p {
  text-align: center !important;
}
/* Mobile: stack image / description / year vertically, all centered. */
@media (max-width: 767px) {
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column > .elementor-element-populated {
    padding: 8px 16px !important;
    text-align: center !important;
  }
  /* Override the desktop nth-child(1) right-align logo + nth-child(3)
     left-align year rules (specificity 0,5,1) — match that specificity. */
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(1) .elementor-widget-image,
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(3) .elementor-widget-text-editor,
  .page-culture-and-diversity .clx-award-row > .elementor-container > .elementor-column:nth-child(3) .elementor-widget-text-editor p,
  .page-culture-and-diversity .clx-award-row .elementor-widget-image,
  .page-culture-and-diversity .clx-award-row .elementor-widget-text-editor,
  .page-culture-and-diversity .clx-award-row .elementor-widget-text-editor p {
    text-align: center !important;
  }
  .page-culture-and-diversity .clx-award-row .elementor-widget-image img {
    margin: 0 auto !important;
  }
}

/* Culture & Diversity "Ready to join a diverse..." CTA — section is a clone
   of about-us c721c93 (same element IDs); styling comes from the existing
   :is(.page-about-us, .page-culture-and-diversity, .page-partnership) c721c93 rules above. */

/* Culture & Diversity testimonial — vertical stack (photo on top, quote +
   name below) wrapped in the same outlined card as the our-team Adesh card.
   Same 24px card padding, same border + radius + white bg, same gap
   between photo and quote/name. align-content/justify-content overrides
   beat the per-post Elementor CSS that would otherwise vertically center
   the stack and push the photo away from the top edge. */
.page-culture-and-diversity .clx-testimonial-card > .elementor-element-populated {
  padding: 24px !important;
  border: 1px solid #E8EBED !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
}
.page-culture-and-diversity .clx-testimonial-card > .elementor-element-populated:hover {
  background: #FFFFFF !important;
}
.page-culture-and-diversity .clx-testimonial-photo {
  margin: 0 0 16px 0 !important;
}
.page-culture-and-diversity .clx-testimonial-photo,
.page-culture-and-diversity .clx-testimonial-photo .elementor-widget-container {
  height: auto !important;
  width: 100% !important;
}
.page-culture-and-diversity .clx-testimonial-photo img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 12px !important;
  display: block !important;
  margin: 0 !important;
}
/* Vertically center the quote+name group in the empty space below the
   photo. Switch the .elementor-element-populated from flex to grid so we
   can pin the photo to row 1 and group quote+name in row 3, with 1fr
   spacers in rows 2 and 4 that share the leftover height equally — the
   quote+name pair lands centered in the area below the photo regardless
   of card height. (flex margin-auto didn't bite because the per-post
   Elementor CSS sets align-items:center on the wrap, which collapses the
   auto-margin centering behavior.) */
.page-culture-and-diversity .clx-testimonial-card > .elementor-element-populated {
  display: grid !important;
  grid-template-rows: auto 1fr auto auto 1fr !important;
  align-content: stretch !important;
  justify-content: stretch !important;
  min-height: 100% !important;
  height: 100% !important;
}
.page-culture-and-diversity .clx-testimonial-card > .elementor-element-populated > .clx-testimonial-photo {
  grid-row: 1 !important;
  margin-top: 0 !important;
}
.page-culture-and-diversity .clx-testimonial-card > .elementor-element-populated > .clx-testimonial-quote {
  grid-row: 3 !important;
  margin-top: 0 !important;
}
.page-culture-and-diversity .clx-testimonial-card > .elementor-element-populated > .clx-testimonial-name {
  grid-row: 4 !important;
  margin-bottom: 0 !important;
}
/* Hide the 5-star rating image between the quote and name — not needed
   in the minimal about-us-style testimonial layout. */
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-rating {
  display: none !important;
}
/* Merge quote-icon paragraph with quote-body paragraph (inline flow
   exactly like the about-us Arpita/Akhilesh testimonial). */
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-quote p:has(img.inv-comma),
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-quote p:has(img.inv-comma) + p {
  display: inline !important;
  margin: 0 !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-quote p img.inv-comma {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  vertical-align: middle !important;
  margin: 0 6px 0 0 !important;
}
/* Testimonial body (Adesh) — same gray as Arpita/Akhilesh testimonials. */
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-quote p,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-quote em,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-quote i {
  color: #7A7A7A !important;
}
/* Testimonial name/role block — match about-us Arpita/Akhilesh card
   (DM Sans 18/1.5, name #1C1E21 bold, role #7A7A7A, orange @). */
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name p:first-child {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  font-family: 'DM Sans', sans-serif !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name p:first-child b,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name p:first-child span {
  color: #1C1E21 !important;
  font-weight: 700 !important;
}
body:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .elementor-element.clx-testimonial-name p b {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name p,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name em,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name i {
  color: #7A7A7A !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name span[style*="#ffffff"] {
  color: #7A7A7A !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name p span[style*="#ff6a1c"],
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-name p span[style*="#FF6A1C"] {
  color: #ff6a1c !important;
}
/* Role paragraph (second p) — lighter regular weight, same Cabin 18/28
   inherited from theme. Explicit weight override to fight any inherited
   bold from other rules targeting `.elementor-widget-container * { }`. */
body:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .elementor-element.clx-testimonial-name p:nth-child(2),
body:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .elementor-element.clx-testimonial-name p:nth-child(2) span {
  font-weight: 400 !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-photo-col > .elementor-element-populated,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-text-col > .elementor-element-populated {
  padding: 0 !important;
  margin: 0 !important;
  --e-column-margin-left: 0 !important;
  --e-column-margin-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-row > .elementor-container {
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: nowrap !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-photo-col,
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-text-col {
  display: flex !important;
  align-self: center !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-text-col > .elementor-element-populated > .elementor-widget-wrap {
  align-content: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
}
:is(.page-our-team, .page-culture-and-diversity, .page-partnership) .clx-testimonial-text-col .elementor-widget-text-editor {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
}

/* "Explore more about our Software Engineering expertise" block and the
   matching Digital Marketing block — strip the peach rounded-card
   background, zero any drop-cap, and render the "MORE ABOUT …" link
   as a standard .clx-lc CTA. Columns: 9681824 (Dev), 4308985 (Digital
   Marketing). */
.page-our-team .clx-see-more-block > .elementor-element-populated {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
:is(body.page-our-team, body.page-ai-software-application-development, body.page-erp-services) .clx-see-more-para .elementor-widget-container p {
  color: #727272 !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  text-align: left !important;
  margin: 0 0 15px !important;
}
:is(body.page-our-team, body.page-ai-software-application-development, body.page-erp-services) .clx-see-more-para span,
:is(body.page-our-team, body.page-ai-software-application-development, body.page-erp-services) .clx-see-more-para span[style] {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}
:is(body.page-our-team, body.page-ai-software-application-development) .elementor-element.clx-see-more-para .elementor-widget-container p {
  color: #727272 !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 28px !important;
  text-align: left !important;
  margin: 0 0 15px !important;
}
:is(body.page-our-team, body.page-ai-software-application-development) .elementor-element.clx-see-more-para.clx-see-more-para span,
:is(body.page-our-team, body.page-ai-software-application-development) .elementor-element.clx-see-more-para.clx-see-more-para span[style] {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}
/* CTA — orange underlined uppercase link with arrow, right-aligned. */
:is(.page-our-team, .page-ai-software-application-development, .page-erp-services) .clx-team-section-cta .elementor-widget-container p {
  text-align: right !important;
  margin: 0 !important;
}
:is(.page-our-team, .page-ai-software-application-development, .page-erp-services) .clx-team-section-cta .elementor-widget-container a {
  color: #FA4900 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-decoration-color: #FA4900 !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 9px !important;
  display: inline-block !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
:is(.page-our-team, .page-ai-software-application-development, .page-erp-services) .clx-team-section-cta .elementor-widget-container a span {
  text-decoration: inherit !important;
  color: inherit !important;
}
:is(.page-our-team, .page-ai-software-application-development, .page-erp-services) .clx-team-section-cta .elementor-widget-container a::after {
  content: '\2192';
  display: inline-block;
  margin-left: 14px;
  text-decoration: none;
  font-size: 1.15em;
  font-weight: 900;
  -webkit-text-stroke: 1px #FA4900;
  line-height: 1;
  vertical-align: -1px;
  transition: transform 0.25s ease;
}
:is(.page-our-team, .page-ai-software-application-development, .page-erp-services) .clx-team-section-cta .elementor-widget-container a:hover::after {
  transform: translateX(5px);
}

@media (min-width: 768px) {
  .page-our-team .clx-team-grid > .elementor-container {
    column-gap: 16px !important;
    row-gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  /* :not() exclusions for 7 dead column IDs removed 2026-04 — they no
     longer exist in the page's Elementor data so the exclusions were
     no-ops. The 2 live empty-4th-column IDs are hidden via display:none
     above, so this selector now correctly applies to all visible columns. */
  .page-our-team .clx-team-grid > .elementor-container > .elementor-column {
    width: calc(33.3333% - 11px) !important;
    max-width: calc(33.3333% - 11px) !important;
    flex: 0 0 calc(33.3333% - 11px) !important;
  }
}
@media (max-width: 767px) {
  /* Mobile: stack cards full-width with 24px row-gap so they breathe.
     Without the row-gap the desktop rule's 16px gap doesn't apply at
     this breakpoint (different @media), and Elementor's flex container
     defaults to 0 gap. */
  .page-our-team .clx-team-grid > .elementor-container {
    row-gap: 24px !important;
    flex-wrap: wrap !important;
  }
  .page-our-team .clx-team-grid > .elementor-container > .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}
.page-our-team .clx-team-grid > .elementor-container > .elementor-column > .elementor-element-populated {
  margin: 0 !important;
  --e-column-margin-left: 0 !important;
  --e-column-margin-right: 0 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px 20px 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}
.page-our-team .clx-team-grid > .elementor-container > .elementor-column > .elementor-element-populated:hover {
  border-color: rgba(232, 97, 26, 0.25) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.page-our-team .clx-team-grid .elementor-widget-image {
  width: 61px !important;
  max-width: 61px !important;
  flex: 0 0 61px !important;
  margin: 0 9px 14px 0 !important;
  position: relative;
}
.page-our-team .clx-team-grid .elementor-widget-image:last-of-type {
  margin-right: 0 !important;
}
.page-our-team .clx-team-grid .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
.page-our-team .clx-team-grid .elementor-column > .elementor-element-populated > .elementor-inner-section {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}
.page-our-team .clx-team-grid h5 {
  font-family: 'Cabin', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1C1E21 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.2px;
  text-align: center !important;
}
.page-our-team .clx-team-grid p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Replace parent-theme's #scrollUp (white box + rotateY 3D pseudo + peach
   tint bleed-through + fragile "top" label that clips on mobile) with a
   simple solid circular button — dark ink background, inline-SVG up-arrow,
   subtle shadow, soft lift on hover. Applies to every page via site-wide. */
/* Bottom-right floating-widget stack (closest to corner -> outward):
     SalesIQ chat launcher (~64x64 at bottom: 14 right: 14, theirs)
   ↑ scrollUp                (48x48 at bottom: 96 right: 20, ours)
   ↑ mobile TOC FAB          (auto      at bottom: 160 right: 20, ours; desktop-hidden)
   24px gap between each. SalesIQ position is set in their console
   (Brand -> Appearance -> Position = bottom-right). Our two buttons
   stack above. */
#scrollUp,
#scrollUp:hover,
#scrollUp:focus {
  width: 48px !important;
  height: 48px !important;
  right: 20px !important;
  bottom: 96px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #1C1E21 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'><path d='M10 15 V5 M5 10 L10 5 L15 10' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  color: transparent !important;
  display: block !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
#scrollUp:hover {
  background-color: #FA4900 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(232, 73, 29, 0.28) !important;
}
/* Strip the parent theme's decorative pseudo elements (blue blur + rotateY
   3D layer + arrow triangle over the "top" label). */
#scrollUp::before,
#scrollUp::after,
#scrollUp span.text,
#scrollUp span.text::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 767px) {
  #scrollUp,
  #scrollUp:hover,
  #scrollUp:focus {
    width: 44px !important;
    height: 44px !important;
    right: 16px !important;
    bottom: 110px !important; /* clear of SalesIQ launcher (~80px tall at bottom:14) plus 16px breathing */
    background-size: 16px 16px !important;
  }
}
/* "Deliverables of scope analysis:" heading — remove the 2vw top margin
   that was stacking above the heading so it sits tight to the AI pre-sales
   paragraph above it. */
.page-how-we-work .elementor-element-9001b03,
.page-how-we-work .elementor-element-1115957,
.page-how-we-work .elementor-element-6763dd7,
.page-how-we-work .elementor-element-285d08d,
.page-how-we-work .elementor-element-b53e6de,
.page-how-we-work .elementor-element-5ade1a4,
.page-how-we-work .elementor-element-6bc4ffb,
.page-how-we-work .elementor-element-9ed5594,
.page-how-we-work .elementor-element-51fce13,
.page-how-we-work .elementor-element-3faf317,
.page-how-we-work .elementor-element-6011c8c,
.page-how-we-work .elementor-element-6d505e3,
.page-how-we-work .elementor-element-f859213,
.page-how-we-work .elementor-element-5ccc7f1,
.page-how-we-work .elementor-element-9142d84,
.page-how-we-work .elementor-element-389d296,
.page-how-we-work .elementor-element-83c5a25,
.page-how-we-work .elementor-element-2a719cf,
.page-how-we-work .elementor-element-b61df74,
.page-how-we-work .elementor-element-2e86edd {
  margin-top: 0 !important;
}
/* Consistent bottom buffer below the Phase 7 team cards (last team row
   in the chapter) before the Recent Client Success Stories section
   begins — matches the rhythm between earlier phase content blocks. */
.page-how-we-work .elementor-element-b61df74 {
  margin-bottom: 32px !important;
}
/* Phase 4 Client Onboarding (a8749fe) and Phase 6 Project Execution
   (b7806b0) both have an overflow team-card row sitting below the main
   3-card row. Match the between-rows gap to the between-cards column gap
   so the grid feels uniform regardless of which row a card lives in. */
.page-how-we-work .elementor-element-a8749fe,
.page-how-we-work .elementor-element-b7806b0 {
  margin-top: 16px !important;
}
.page-how-we-work .elementor-element-8586aec {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

/* Compact spacing below every Deliverables / Team Involved chapter
   heading. Each heading widget gets margin-bottom 0, the inline title
   margin trimmed to 4px, and the section that immediately follows
   (cards / bullets / tables) loses its 2vw section margin-top so the
   heading sits tight against its content block. */
.page-how-we-work .clx-heading-title {
  margin: 0 0 6px !important;
}
.page-how-we-work .elementor-element-8586aec,
.page-how-we-work .elementor-element-00315e9,
.page-how-we-work .elementor-element-0a5eb9e,
.page-how-we-work .elementor-element-c626848,
.page-how-we-work .elementor-element-8d4394c,
.page-how-we-work .elementor-element-28a9785,
.page-how-we-work .elementor-element-cda6fe4,
.page-how-we-work .elementor-element-5c8c249,
.page-how-we-work .elementor-element-2a240e2,
.page-how-we-work .elementor-element-4e2eb67,
.page-how-we-work .elementor-element-72dbf42,
.page-how-we-work .elementor-element-10acf14,
.page-how-we-work .elementor-element-a58979c,
.page-how-we-work .elementor-element-c0a3ef9 {
  margin-bottom: 0 !important;
}
.page-how-we-work .elementor-element-8586aec > .elementor-widget-container,
.page-how-we-work .elementor-element-00315e9 > .elementor-widget-container,
.page-how-we-work .elementor-element-0a5eb9e > .elementor-widget-container,
.page-how-we-work .elementor-element-c626848 > .elementor-widget-container,
.page-how-we-work .elementor-element-8d4394c > .elementor-widget-container,
.page-how-we-work .elementor-element-28a9785 > .elementor-widget-container,
.page-how-we-work .elementor-element-cda6fe4 > .elementor-widget-container,
.page-how-we-work .elementor-element-5c8c249 > .elementor-widget-container,
.page-how-we-work .elementor-element-2a240e2 > .elementor-widget-container,
.page-how-we-work .elementor-element-4e2eb67 > .elementor-widget-container,
.page-how-we-work .elementor-element-72dbf42 > .elementor-widget-container,
.page-how-we-work .elementor-element-10acf14 > .elementor-widget-container,
.page-how-we-work .elementor-element-a58979c > .elementor-widget-container,
.page-how-we-work .elementor-element-c0a3ef9 > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
/* Tighten bullets-section padding-top (was 20 0) so it sits closer to
   the heading above it. */
.page-how-we-work .clx-hww-iconbox {
  padding: 8px 0 !important;
}
/* "This phase allows our clients to evaluate Clixlogix as a team for the
   first time..." paragraph (widget 7e3910a, section 5d699c9) and the AI
   pre-sales paragraph (widget e5af86f, section e90a084) — zero the 1vw
   section margin-top so both paragraphs sit flush with the bullet list
   above and the heading below. */
.page-how-we-work .elementor-element-5d699c9,
.page-how-we-work .elementor-element-e90a084 {
  margin-top: 0 !important;
}
.page-how-we-work .clx-hww-iconbox .elementor-icon-box-description {
  display: inline !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  margin: 0 !important;
}

/* AI section — kill ALL gaps between paragraph and inner bullets|video */
.page-about-us .clx-au-howai-outer .elementor-widget {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.page-about-us .clx-au-howai-text {
  margin-bottom: 4px !important;
}
.page-about-us .clx-au-howai-inner,
.page-about-us .clx-au-howai-inner.elementor-inner-section {
  margin: 0 !important;
  padding: 0 !important;
}
.page-about-us .clx-au-howai-inner > .elementor-container {
  margin: 0 !important;
  padding: 0 !important;
}
.page-about-us .clx-au-howai-inner .elementor-element-populated {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-about-us .clx-au-howai-inner .elementor-column > .elementor-element-populated {
  padding: 0 10px !important;
}
/* Crop white space from sphere video */
.page-about-us .clx-au-howai-video .elementor-wrapper {
  overflow: hidden !important;
}
.page-about-us .clx-au-howai-video video {
  object-fit: cover !important;
  transform: scale(1.35) !important;
}
.page-about-us .clx-au-howai-section {
  margin-top: 0 !important;
}

/* AI section — tighten heading to paragraph */
.page-about-us .clx-au-howai-text {
  margin-bottom: 4px !important;
}

/* Ways We Work */

.page-about-us .clx-au-faq-text {
  margin-bottom: 0 !important;
}
.page-about-us .clx-au-faq-section {
  margin-top: 10px !important;
}
.page-about-us .clx-au-faq-section h3 {
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
}
.page-about-us .clx-au-faq-section p {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
  color: var(--e-global-color-text) !important;
}

/* About page — "proud to work" section: white bg, dark text (was black bg/white text) */
.page-about-us .clx-au-hero-heading,
.page-about-us .clx-au-hero-heading:not(.elementor-motion-effects-element-type-background),
.page-about-us .clx-au-hero-heading > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #FFFFFF !important;
}
.page-about-us .clx-au-hero-heading h2 {
  color: #000 !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  line-height: 1em !important;
}

.page-about-us .clx-au-stats-section,
.page-about-us .clx-au-stats-section:not(.elementor-motion-effects-element-type-background),
.page-about-us .clx-au-stats-section > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: transparent !important;
  background: transparent !important;
}
/* Restore Elementor default widget spacing on services page hero area.
   homepage.css strips all widget margin-bottom to 0 globally, but services
   page widgets need their default spacing. */
/* Was scoped to .page-services; broadened to apply on any service page
   that opts in by assigning .clx-services-hero-area to its hero
   sections (e.g. ai-software-application-development). */
.clx-services-hero-area .elementor-widget {
  margin-bottom: 20px;
}
/* Mobile: the inner 4-col grids inside .clx-services-hero-area (each
   .elementor-col-25) lack a tablet/mobile size override, so they stay
   side-by-side at 25% even on a 375px viewport — the contained images
   spill past the right edge. Force column stacking + image fit at
   ≤767px so the AI / services hero blocks reflow cleanly. */
@media (max-width: 767px) {
  .clx-services-hero-area .elementor-inner-section .elementor-column.elementor-col-25 {
    width: 100% !important;
  }
  .clx-services-hero-area .elementor-inner-section .elementor-widget-image img {
    max-width: 100% !important;
    height: auto !important;
  }
}
/* Column wrap padding-top: 10 → 0 (matches About column wrap)
   Section padding-top is set in the .clx-services-hero rule below
   (with the ::before peach-band rule). */
.clx-services-hero > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated {
  padding-top: 0 !important;
}
/* AI Software page uses the custom clx_chapter_sidebar widget for TOC,
   so suppress the plugin-injected Easy Table of Contents that the EZ TOC
   plugin auto-inserts on every page (the plugin's own _ez-toc-disabled
   post meta wasn't sufficient to prevent injection in our setup). */
body.page-ai-software-application-development #ez-toc-container,
body.page-erp-services #ez-toc-container {
  display: none !important;
}
/* Industries section: replicate homepage's "Our Industry Expertise"
   card styling (gray bg, rounded, hover orange border + lift) on the
   icon-only widgets. Icon size matches Advanced Capabilities at 32px. */
.clx-ai-industries-grid > .elementor-container {
  column-gap: 16px !important;
  row-gap: 16px !important;
}
/* The 4 industries sections each render as a single row of 3 cards, so the
   gap between rows is the gap between sections — not row-gap inside a
   container. Force each section to contribute exactly 16px below itself
   (matching the 16px column-gap), and zero the last so it doesn't add
   trailing space before the callout/CTA. The FIRST industries section
   keeps its inline 1vw margin-top so the intro→first-row gap matches the
   page's standard pattern (Core Offerings, Teams, Advanced Caps all use
   1vw between H2/intro and the first card row). */
section.elementor-section.clx-ai-industries-grid {
  margin-bottom: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
section.elementor-section.clx-ai-industries-grid + section.elementor-section.clx-ai-industries-grid {
  margin-top: 0 !important;
}
body.page-ai-software-application-development section.elementor-section.clx-ai-industries-grid:last-of-type {
  margin-bottom: 0 !important;
}
/* The Industries-callout column (783c3db) is nested inside an inner
   section, which means it inherits the global 10px .elementor-element-
   populated padding ON TOP OF the outer column's 10px — making the text
   look indented vs the unnested H2 intro paragraph above (01ece14).
   Per-post CSS sets it to 0 but without !important, the 3-class global
   rule wins. Force the nested populated to zero to match the outer
   column's effective inset. */
body.page-ai-software-application-development .elementor-element.elementor-element-783c3db > .elementor-element-populated {
  padding: 0 !important;
}
/* Same nesting issue for the new Industries grid column (aiindcol01):
   it sits inside bebf814 (66% width), and the global 10px populated
   padding crushes the 4 image-box cards even further. Zero it so the
   CSS-grid in homepage.css gets the full inner column width to work with. */
body.page-ai-software-application-development .elementor-element.elementor-element-aiindcol01 > .elementor-element-populated {
  padding: 0 !important;
}
/* Override homepage's 4-column grid → 3 columns on this page. The Industries
   labels here ("Real Estate & Property Management", "Education & eLearning
   Providers") run 30+ chars vs homepage's ~25-char max, and the parent
   column is only 66% width, so 4 columns wrap titles. 3×4 keeps the same
   homepage card visual at a card width that fits these longer labels. */
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wrap,
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  grid-template-columns: repeat(3, 1fr) !important;
}
/* Force Industries icons to 32px to match Advanced Capabilities icons.
   Elementor's per-post CSS for image-box widgets emits a 5-class-deep
   selector setting `.elementor-image-box-img { width: 30% }` from the
   default image_space setting — that 30% on ~220px cards renders icons
   at ~66px, dwarfing the rest of the page's 32px icon convention. The
   homepage.css 2-class !important rule should beat it but this scoped
   higher-specificity override removes any cascade ambiguity. */
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
  width: 32px !important;
  margin: 0 !important;
}
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-img img,
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-img svg {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
}
/* Drop the homepage's grayscale + brightness + opacity filter on Industries
   icons so they render in their native SVG color (already gray, since the
   SVG files are named *-gry-ion.svg) — matching the Advanced Capabilities
   icon treatment which renders in native color with no filter. Same for
   hover: drop the orange-flip filter so icons stay consistent with Advanced
   Caps' icon-doesn't-change-on-hover behavior. The card itself still gets
   the bg-white + orange-border + lift hover from homepage.css. */
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-img img,
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-img svg,
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section .elementor-widget-image-box:hover .elementor-image-box-img img,
:is(body.page-ai-software-application-development, body.page-erp-services) .clx-industries-grid-section .elementor-widget-image-box:hover .elementor-image-box-img svg {
  filter: none !important;
}
.clx-ai-industries-grid > .elementor-container > .elementor-column > .elementor-element-populated {
  background: #F8F8F8 !important;
  border: 1px solid #EAEAEA !important;
  border-radius: 20px !important;
  padding: 22px !important;
  min-height: 120px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.clx-ai-industries-grid > .elementor-container > .elementor-column > .elementor-element-populated:hover {
  background: #FFFFFF !important;
  border-color: #FA4900 !important;
  transform: translateY(-2px);
}
.clx-ai-industries-grid .elementor-widget-icon .elementor-icon img,
.clx-ai-industries-grid .elementor-widget-icon .elementor-icon svg {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
  display: block;
  filter: grayscale(100%) brightness(0.8) opacity(0.7);
  transition: filter 0.25s ease;
}
.clx-ai-industries-grid > .elementor-container > .elementor-column > .elementor-element-populated:hover .elementor-icon img,
.clx-ai-industries-grid > .elementor-container > .elementor-column > .elementor-element-populated:hover .elementor-icon svg {
  filter: none;
}
/* Teams We Support cards use the global .svc-card pattern (matches services
   "Inside Our AI Powered Delivery System" cards). The 3D illustration
   icon-area is dropped; instead we put a small inline SVG glyph in
   Clixlogix orange at the top of each card. */
.clx-team-svc-card .clx-team-glyph {
  color: #FA4900;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clx-team-svc-card .clx-team-glyph svg {
  display: block;
  width: 40px;
  height: 40px;
}
/* Center the card header + title; prevent the title from being squashed
   in the narrow column. */
.clx-team-svc-card .svc-card-header {
  justify-content: center !important;
  padding-right: 0 !important;
  text-align: center !important;
}
/* Equal-height Teams cards regardless of description/bullets length —
   stretch each .svc-card to the height of its tallest sibling row.
   height:100% has to propagate through every Elementor wrapper layer
   (column-populated → widget-wrap → widget-html → widget-container)
   before it can reach the .svc-card itself. */
.clx-team-svc-card.svc-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.clx-team-svc-card .svc-card-specs {
  margin-bottom: 0;
}
body .clx-team-svc-card .svc-card-desc,
body .clx-team-svc-card p.svc-card-desc {
  text-align: left !important;
}
.elementor-widget-html:has(.clx-team-svc-card),
.elementor-widget-html:has(.clx-team-svc-card) > .elementor-widget-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.elementor-column:has(.clx-team-svc-card) > .elementor-element-populated,
.elementor-column:has(.clx-team-svc-card) > .elementor-element-populated > .elementor-widget-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.clx-team-svc-card .svc-card-header h3,
.clx-team-svc-card .svc-card-title {
  font-size: 20px !important;
  line-height: 1.3 !important;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  margin-top: 0;
  text-align: center !important;
  width: 100%;
}
/* Breathing room above the interactive 4-layer component, separating it
   from the H3 framework intro paragraph that ends "...compresses
   uncertainty early and compounds reliability over time." */
body.page-ai-software-application-development .elementor-element.elementor-element-bcf4lay1 {
  margin-top: 48px !important;
}
@media (max-width: 767px) {
  body.page-ai-software-application-development .elementor-element.elementor-element-bcf4lay1 {
    margin-top: 32px !important;
  }
}
/* Banner widget removed entirely (was paired with the old [ez-toc] sidebar
   widget; replaced by the clx_chapter_sidebar floating sidebar). The
   sidebar column 0dc7b1b is now empty — collapse it to 0 width so main
   content (bebf814) takes the full container width on desktop. */
@media (min-width: 1280px) {
  body.page-ai-software-application-development .elementor-element.elementor-element-0dc7b1b,
  body.page-erp-services .elementor-element.elementor-element-0dc7b1b {
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
  }
  body.page-ai-software-application-development .elementor-element.elementor-element-bebf814,
  body.page-erp-services .elementor-element.elementor-element-bebf814 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Service pages (services, ai-software, low-code, erp-services, etc.):
   hide the empty peach wrapper (8ae4ef7) when the hero content section
   (73af05d) exists as a sibling — meaning 8ae4ef7 is just an empty CSS
   wrapper, not the actual hero. On about-us pages where 73af05d doesn't
   exist, 8ae4ef7 stays visible because :has() doesn't match. */
.elementor-element.elementor-element-8ae4ef7:has(~ .elementor-element-73af05d) {
  display: none !important;
}
.clx-services-hero,
.clx-services-hero > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  /* Was 80px; reduced to 56 to match About-family hero breadcrumb offset
     (48px from hero top, same as .clx-page-hero). 2026-04 cleanup —
     migrated from .elementor-element-73af05d to semantic class. */
  padding-top: 56px !important;
  height: auto !important;
  overflow: visible;
  position: relative;
}
/* Peach band as section's own background (was a ::before with z-index:-1
   which got occluded by body's white bg — would have needed a stacking
   context that ended up trapping children). Gradient stops at 408px so
   the rest of the section is transparent. */
.clx-services-hero {
  background-image: linear-gradient(to bottom, #FFEFE6 0, #FFEFE6 408px, transparent 408px) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
}
.clx-services-hero::before {
  content: none;
}
/* Align H1 with form card top by removing the 20px top margin
   that Elementor's post CSS puts on the H1 widget (e762cdf). */
.elementor-element.elementor-element-73af05d .elementor-element-e762cdf > .elementor-widget-container {
  margin-top: 0px !important;
}
/* Consistent right padding on the left column so H1 and subhead
   both have the same gap from the form card edge. */
.elementor-element.elementor-element-73af05d .elementor-element-4275704 > .elementor-element-populated {
  padding-right: 1em !important;
}
.elementor-element.elementor-element-73af05d + .elementor-top-section {
  margin-top: 0;
}
/* Trust bar — consistent gap from hero content, not from peach edge */
.elementor-element.elementor-element-aeef6ca {
  margin-top: 1.5em !important;
}
/* Sections below the trust bar — consistent spacing + H3 constrained
   so it doesn't run under the overflowing form card. */
/* Permanent fix: sections after the hero form render ON TOP of any overflow */
.elementor-element.elementor-element-aeef6ca,
.elementor-element.elementor-element-35230b7 {
  position: relative;
  z-index: 3;
  background: #fff;
}
.elementor-element.elementor-element-35230b7 {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}
/* /latest-zoho-updates/ inherits section IDs aeef6ca and 35230b7 from a
   /services/-page clone, but on this page we want zero margin + peach
   bg so the 360° section visually continues from the hero peach band.
   Page-id-59755 scoping keeps the original /services/ behaviour intact. */
.page-id-59755 .elementor-element.elementor-element-aeef6ca,
.page-id-59755 .elementor-element.elementor-element-35230b7 {
  background: #FFEFE6 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* /latest-zoho-updates/ — gray page bg so the glassmorphic .clx-zoho-card
   cards (rgba white) read clearly against the surrounding chapter section
   (which has no own bg and inherits from the page). Sections that set
   their own bg (peach hero, white blogs section, gray GTI section) are
   unaffected. */
body.page-id-59755 {
  background-color: #F8F8F8;
}
/* iOS Safari rubber-band scroll past the footer paints `html` background,
   which is default white — leaving a bright strip below the dark footer.
   Match `html` to the footer bg so overscroll reads dark continuously.
   Body bg (which can be per-page) still paints over `html` above the
   footer in normal flow. */
html {
  background-color: #353131;
}
/* Hide Google reCAPTCHA v3 floating badge site-wide.
   Per Google ToS this is allowed when an explicit reCAPTCHA notice is
   displayed inline in the form (we render the standard notice text
   under each form). The badge clutters the bottom-right corner where
   the scroll-up + SalesIQ widgets sit, so removing it cleans up the
   stack. */
.grecaptcha-badge,
body .grecaptcha-badge,
[class*="grecaptcha-"],
iframe[src*="recaptcha"],
iframe[title*="reCAPTCHA"],
iframe[title*="recaptcha"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
  position: absolute !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 0 !important;
  height: 0 !important;
}
/* Case studies section sits as a full-width white band on this page,
   so it visually frames the 2x3 success-stories grid against the page gray. */
.page-id-59755 .elementor-element.elementor-element-62d5458 {
  background-color: #FFFFFF !important;
}
/* zoho-updates side cta — pin HTML widget 33d07ce into the right
   gutter directly below the floating chapter sidebar (.clx-mf-sidebar).
   The chapter_sidebar widget narrows section 74765ef's container to
   max-width 860px so the right ~280px is free for the fixed sidebar;
   we share that same gutter for the CTA. Visibility mirrors the
   sidebar's `.is-visible` toggle (script inside the HTML widget uses
   a MutationObserver to copy the class onto `.clx-zoho-side-cta`).
   Below 1280px the CTA renders in normal flow at the end of col 0. */
@media (min-width: 1280px) {
  .page-id-59755 .elementor-element.elementor-element-bebf814 {
    width: 100% !important;
  }
  .page-id-59755 .elementor-element.elementor-element-0dc7b1b {
    display: none !important;
  }
  /* Hard cap the chapter sidebar so its bottom edge can't reach
     the fixed "Want a Zoho audit?" CTA card below (which sits at
     top:412 in this gutter). The cap stays put regardless of how
     many months the TOC lists — the list scrolls internally with
     a visible thin scrollbar, and JS keeps the currently-active
     month auto-scrolled into view. Fade gradients at top/bottom
     hint at hidden content. */
  .page-id-59755 .clx-mf-sidebar {
    max-height: 252px !important;       /* ~4 month rows + heading, ends ~20px above CTA top */
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
    /* Soft fade at top + bottom edges to visually cue overflow.
       Mask shrinks the visible content; scroll position controls
       which edges are masked. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .page-id-59755 .clx-mf-sidebar::-webkit-scrollbar { width: 6px; }
  .page-id-59755 .clx-mf-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
  }
  .page-id-59755 .clx-mf-sidebar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
  /* Restore original CTA card position (sticky right-gutter at
     top:412). This sits BELOW the (capped) sidebar with breathing
     room. Visibility still mirrors sidebar's .is-visible class via
     the widget's MutationObserver.
     pointer-events: none on the OUTER wrapper prevents the fixed
     240×214 widget rect from eating clicks on whatever sits beneath
     it (notably the right ~half of the "Book my 15-min consult"
     button in the hero on viewports ≥1280px). The inner
     .clx-zoho-side-cta re-enables pointer-events when .is-visible,
     so the audit card is fully clickable when actually shown. */
  .page-id-59755 .elementor-element.elementor-element-33d07ce {
    position: fixed !important;
    right: max(24px, calc((100vw - 1140px) / 2)) !important;
    top: 412px !important;
    width: 240px !important;
    max-width: 240px !important;
    z-index: 90 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  .page-id-59755 .elementor-element.elementor-element-33d07ce .clx-zoho-side-cta.is-visible {
    pointer-events: auto;
  }
  .page-id-59755 .clx-zoho-side-cta {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(.6,.01,.25,1);
  }
  .page-id-59755 .clx-zoho-side-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}
/* Case studies grid — force 2-per-row × 3-row layout site-wide for
   any keystroke-project widget tagged with `clx-case-studies`. The
   default `portfolio-33-33` width rule lives in style.css scoped to
   `.home-page-css`, which only the homepage body carries. Lifting
   the same `width: 50%` rule onto `.clx-case-studies` makes /services/,
   /latest-zoho-updates/, /erp-services/, and any other page using
   this widget share the homepage's 2-up grid. */
.clx-case-studies .mesonry-list.grid-metro3 .portfolio-33-33 {
  width: 50% !important;
  min-width: 50% !important;
}
.clx-case-studies .mesonry-list.grid-metro3 .portfolio-33-33 .thumb {
  width: 100%;
}
/* zoho-updates card parity — match the canonical glassmorphic
   .svc-card spec used for DE/DM/IT-Consulting cards: translucent
   white surface with backdrop blur, soft warm-tinted border, layered
   inset highlight, hover lifts the bg opacity + adds orange tinted
   border. Page-scoped to avoid bleeding into other sections. */
.page-id-59755 .clx-zoho-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  border-radius: 20px !important;
  padding: 32px 28px 28px !important;
  margin-bottom: 20px !important;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s !important;
}
.page-id-59755 .clx-zoho-card:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(232, 78, 15, 0.25) !important;
}
/* Prevent a sticky orange border on the last-interacted card. Browsers
   apply :focus-within when a link inside the card has focus — e.g. after
   clicking "Link to the Full Story" the new tab opens but focus stays
   on the card here, painting the hover-style orange border indefinitely.
   Force the focus-within state back to the resting border. */
.page-id-59755 .clx-zoho-card:focus-within:not(:hover) {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: none !important;
}

/* ---- /latest-zoho-updates/ — mobile / tablet responsive cleanup ---- */
@media (max-width: 767px) {
  /* Cards: shrink inner padding so text doesn't wrap one word per line */
  .page-id-59755 .clx-zoho-card {
    padding: 18px !important;
    margin-bottom: 14px !important;
  }
  /* Card content widgets — strip lingering desktop padding from cloned
     widget settings so text fills the narrowed column. */
  .page-id-59755 .clx-zoho-card .elementor-widget-text-editor,
  .page-id-59755 .clx-zoho-card .elementor-widget-image {
    padding: 0 !important;
  }
  /* Force the inner column + widget wrappers to full card width — the
     cloned card data carries `padding_mobile: 5vw` on the column which,
     stacked with the 18px card padding above, was leaving a visible
     empty-gutter on the right side and forcing mid-word text wrap. */
  .page-id-59755 .clx-zoho-card > .elementor-container,
  .page-id-59755 .clx-zoho-card .elementor-column,
  .page-id-59755 .clx-zoho-card .elementor-column-wrap,
  .page-id-59755 .clx-zoho-card .elementor-widget-wrap {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-id-59755 .clx-zoho-card .elementor-widget {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Centered logo at the top of each card renders too large on mobile —
     cap so the card title sits in the top half without dwarfing the logo. */
  .page-id-59755 .clx-zoho-card .elementor-widget-image img {
    max-width: 80px !important;
    height: auto !important;
  }
  /* Hero H1 — step font down so the title doesn't wrap to 5+ lines */
  .page-id-59755 .elementor-element.elementor-element-e762cdf .elementor-heading-title {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
  /* Mobile TOC FAB — collapse to icon-only and shrink padding */
  .clx-mf-fab__label { display: none !important; }
  .clx-mf-fab {
    padding: 10px !important;
    width: 44px !important;
    height: 44px !important;
    justify-content: center !important;
  }
}
/* Tablet only (768–1024): the fixed top bar (~30px) + main nav (~60–70px)
   stack to ~100px and paint over the breadcrumb + eyebrow + clip the top
   of the H1. Pad the hero so its content clears the full fixed-header
   height. On mobile (<768) the bars are smaller and the design already
   provides enough flow gap — keep the hero padding light. */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-id-59755 .elementor-element.elementor-element-73af05d {
    padding-top: 120px !important;
  }
}
@media (max-width: 767px) {
  .page-id-59755 .elementor-element.elementor-element-73af05d {
    padding-top: 40px !important;
  }
}
/* Customer-logo strip in hero — the prod-cloned widget renders the logos
   in a near-invisible light grey on the peach band. Brighten + lock the
   strip to the 1140px content container so the leftmost logo stops
   getting clipped by the section's left edge. */
.page-id-59755 .elementor-element.elementor-element-35230b7 img,
.page-id-59755 .elementor-element.elementor-element-aeef6ca img {
  filter: brightness(0.55) saturate(60%) !important;
  opacity: 0.85 !important;
}
.page-id-59755 .elementor-element.elementor-element-35230b7 > .elementor-container,
.page-id-59755 .elementor-element.elementor-element-aeef6ca > .elementor-container {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Consistent section spacing on services page */
/* Handled by global .elementor-top-section rule above */
.page-services .clx-industries-section {
  background: #fff !important;
}
/* Solutions decorative blob — overlaps from black into gray section above.
   Nudged up from the original -275px so it clears the "Explore by Solution
   Type" heading without floating too far up into the section above. */
.page-services .clx-sol-deco {
  top: -305px !important;
}
/* IT consulting: the heading section above the deco's wrap is taller
   than /services/ (vcenter-aligned title+intro pair, longer intro
   paragraph). Pull the 3D triangle further up so it clears the
   heading band and reads as decoration above, not inside, the section. */
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-sol-deco {
  top: -380px !important;
}
.page-services .clx-industries-cta-row {
  padding: 24px 0 0 !important;
}
.elementor-element.elementor-element-35230b7 h3 {
  max-width: 500px;
}
/* =========================================================
   Glassmorphic card effect — shared across all card types
   Frosted translucent bg, subtle light border, backdrop blur.
   Applied to homepage cards and services page cards.
   ========================================================= */
.clx-tech-card,
.clx-process-step,
.clx-tp-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.clx-tech-card:hover,
.clx-process-step:hover,
.clx-tp-card:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(232, 78, 15, 0.25) !important;
}
.svc-card:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(232, 78, 15, 0.25) !important;
}

/* Tech card badge (3D icon corner) — dark glass with polished depth */
.clx-tech-card-badge {
  background: linear-gradient(145deg, rgba(20,20,20,0.95), rgba(0,0,0,0.98)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Blog cards — glassmorphic effect */
.clx-blog-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
.clx-blog-card:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(232, 78, 15, 0.25) !important;
}

/* Industry cards — subtle glass without backdrop blur (white-on-white blur creates gray haze) */
.clx-industries-grid-section .elementor-widget-image-box {
  background: rgba(248, 248, 248, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.clx-industries-grid-section .elementor-widget-image-box:hover {
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 1);
  border-color: #FA4900 !important;
}

/* Whole-tile-clickable: when an industry tile has link.url set, Elementor
   wraps the image and title in separate <a> tags with a non-linked gap.
   Expand the image <a> via ::after to cover the entire wrapper so clicks
   anywhere on the tile navigate. Placeholder tiles (no link.url → no <a>)
   are unaffected because :has() requires the inner <a> to exist. */
.clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-wrapper:has(> .elementor-image-box-img > a) {
  position: relative;
  cursor: pointer;
}
.clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-img > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.clx-industries-grid-section .elementor-widget-image-box .elementor-image-box-content {
  position: relative;
  z-index: 2;
}

/* Solutions cards — polished dark glass (matches tech badge treatment) */
.clx-sol-card {
  background: linear-gradient(145deg, rgba(40,40,40,0.9), rgba(15,15,15,0.95)) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.clx-sol-card:hover {
  background: linear-gradient(145deg, rgba(60,60,60,0.9), rgba(30,30,30,0.95)) !important;
  border-color: rgba(232, 78, 15, 0.4) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Tech platform cards — keep smaller size, adjust translucency */
.clx-tp-card {
  background: rgba(239, 239, 239, 0.45) !important;
}
.clx-tp-card:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: #FA4900 !important;
}

/* =========================================================
   Service Cards Grid — 2-column card layout with 3D icon overflow
   ========================================================= */
.svc-cards-section {
  padding: 0;
}
/* Full-width gray bg on the Elementor section that contains the cards shortcode */
.elementor-element[data-id="582bee8"] {
  background: #F8F8F8 !important;
}
/* IT consulting sec[4] hosts the capability-step chart which has its own
   peach-gradient inner panel; the surrounding section reads cleaner white. */
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .elementor-element[data-id="582bee8"] {
  background: #FFFFFF !important;
}
.svc-cards-heading {
  max-width: 1132px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-bottom: 80px;
}
.svc-cards-heading-text {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
}
.svc-heading-title {
  font-family: 'Cabin', sans-serif;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533;
  margin-bottom: 24px;
}
.svc-heading-desc {
  font-size: 18px;
  line-height: 28px;
  color: #898D90;
  margin-bottom: 16px;
}
blockquote.svc-quote {
  margin: 0 0 16px 0;
  padding: 0 0 0 20px;
  border-left: 3px solid #E8611A;
}
/* Stat cards — black rounded, stacked: sphere → number → label */
.svc-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.svc-stat-black {
  background: linear-gradient(145deg, rgba(20,20,20,0.95), rgba(0,0,0,0.98));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.1);
}
.svc-stat-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 0;
}
.svc-stat-top::before {
  content: '';
  width: 22px;
  height: 22px;
  min-width: 22px;
  background-image: url('assets/homepage/circle-3d-icon-1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.svc-stat-num {
  font-family: 'Cabin', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -1.2px;
}
.svc-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
}

.svc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px 24px;
  max-width: 1132px;
  margin: 0 auto;
  padding: 0 20px;
}
.svc-card {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 32px 28px 28px;
  position: relative;
  overflow: visible;
  min-height: auto;
  display: flex;
  flex-direction: column;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.svc-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-right: 100px;
}
.svc-card-title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  color: #1a2236;
  font-family: 'Cabin', sans-serif;
  line-height: 1.4;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.svc-card-title .svc-prefix {
  color: #E8611A;
  font-weight: 700;
  margin-right: 6px;
}
/* Service card icon — no background, just icon with orange glow */
.svc-card-icon {
  position: absolute;
  top: -52px;
  right: 0;
  width: 138px;
  height: 138px;
  z-index: 2;
}
.svc-card-icon img,
.svc-card-icon img.lazyload,
.svc-card-icon img[data-src] {
  width: 138px !important;
  height: 138px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  filter: drop-shadow(0px 12px 20px rgba(232, 120, 20, 0.45));
}
.svc-card-desc {
  color: #898D90;
  font-size: 15px;
  line-height: 26px;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 16px;
  padding-right: 0;
}
.svc-card-link-wrap {
  margin-top: auto;
  align-self: flex-end;
}
.svc-card-link {
  color: #FA4900 !important;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  text-decoration: underline !important;
  text-decoration-color: #FA4900 !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 9px;
  line-height: 1;
}
.svc-card-link::after {
  content: '\2192';
  display: inline-block;
  margin-left: 14px;
  text-decoration: none;
  font-size: 1.15em;
  font-weight: 900;
  -webkit-text-stroke: 1px #FA4900;
  transition: transform 0.2s;
}
.svc-card-link:hover::after {
  transform: translateX(5px);
}
.svc-card-divider {
  display: none;
}
.svc-card-specs-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 26px;
  font-family: 'DM Sans', sans-serif;
  color: #898D90;
  margin-bottom: 8px;
}
.svc-card-specs {
  columns: 1;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.svc-card-specs li {
  font-size: 15px;
  line-height: 26px;
  font-family: 'DM Sans', sans-serif;
  color: #898D90;
  margin-bottom: 6px;
  break-inside: avoid;
  display: flex;
  align-items: baseline;
}
.svc-card-specs li::before {
  content: '\25B8';
  color: #E8611A;
  margin-right: 8px;
  flex-shrink: 0;
  font-size: 8px;
}
/* Linked specialities (e.g. SEO & Search Discovery → /seo-company/)
   render in the canonical inline-link ember (#FF6A1C — the same color
   /client-security/ uses on inline <a><u>...</u></a> anchors), with a
   permanent same-color underline. Hover deepens to brand #FA4900. */
.svc-card-specs li a {
  color: #FF6A1C;
  text-decoration: underline;
  text-decoration-color: #FF6A1C;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.svc-card-specs li a:hover {
  color: #FA4900;
  text-decoration-color: #FA4900;
}

/* Center the last card if it's alone in its row */
/* Service cards inside the grid get top margin for icon clearance */
.svc-cards-grid > .svc-card {
  margin-top: 52px;
}
.svc-cards-heading .svc-card {
  margin-top: 52px;
}
.svc-cards-grid .svc-card:last-child:nth-child(3n+1) {
  grid-column: 2 / 3;
}

@media (max-width: 1024px) {
  .svc-cards-heading {
    grid-template-columns: 1fr !important;
  }
  .svc-cards-heading-text {
    grid-column: span 1 !important;
  }
  .svc-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .svc-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-cards-grid .svc-card:last-child:nth-child(3n+1) { grid-column: auto; }
}
@media (max-width: 768px) {
  .svc-cards-grid { grid-template-columns: 1fr; }
  .svc-card-specs { columns: 1; }
  .svc-stats-row { grid-template-columns: 1fr; }
  .svc-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Logo marquee — match homepage sizing and fade */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-200px * 6)); }
}
#logo-slider .slider {
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  overflow: hidden;
}
#logo-slider {
  height: auto !important;
}
#logo-slider .slider {
  height: auto !important;
}
#logo-slider .slider .slide-track {
  height: auto !important;
  width: calc(200px * 12) !important;
  display: flex;
  animation: scroll 40s linear infinite;
}
#logo-slider .slider:hover .slide-track {
  animation-play-state: paused;
}
#logo-slider .slider .slide {
  width: 200px !important;
  height: auto !important;
  padding: 10px 30px !important;
}
#logo-slider .slider .slide img {
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: filter .3s ease, opacity .3s ease;
}
.elementor-element.elementor-element-7b1b280 {
  margin-top: 2em !important;
  margin-bottom: 0 !important;
}

/* §3 client-logo marquee on /digital-marketing/: per-logo height
   tuning so all 6 brands read at uniform visual weight despite very
   different source aspect ratios. Mirrors the trust-bar tactic from
   §2 (~line 5256) but selects by img[src*=filename] because the
   marquee duplicates each logo for seamless looping.

   Source aspect ratios:
     MilHousing   569×161  (~3.53:1)
     LILoadTowels 1028×218 (~4.72:1)
     GlassDoc     794×84   (~9.45:1) ← very wide wordmark, gets shorter cap
     SilkHouseDXB 558×124  (~4.5:1)
     GBoots       435×94   (~4.63:1)
     PinkDiam     2901×608 (~4.77:1)

   Without this tuning the wide wordmarks (GlassDoc, PinkDiam) dominate
   slide width while chunkier logos (MilHousing) feel undersized. */
body.page-digital-marketing #logo-slider .slide img {
  height: clamp(28px, 3vw, 40px) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
body.page-digital-marketing #logo-slider .slide img[src*="GlassDoclogo_apr"] {
  height: clamp(20px, 2vw, 28px) !important;
}
body.page-digital-marketing #logo-slider .slide img[src*="PinkDiamlogo"] {
  height: clamp(26px, 2.8vw, 36px) !important;
}
body.page-digital-marketing #logo-slider .slide img[src*="MilHousing_logo"] {
  height: clamp(30px, 3.2vw, 42px) !important;
}

/* Inner pages' trust bar (section 7b1b280 — Clutch / UpWork / GoodFirms /
   Trustpilot logos).
   - Desktop: simple flex row, logos evenly spaced, no card, no shadow.
   - Mobile (≤1024px): homepage-style — each logo becomes its own small
     white pill and the row scrolls horizontally with snap. Matches the
     mobile treatment of `.clx-ratings-section` in homepage.css (~line 4015). */
.elementor-element.elementor-element-7b1b280 > .elementor-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: clamp(32px, 4vw, 56px) !important;
  /* Keep logos in the left half of the section so they don't slide
     under the floating form card (.clx-zoho-wrap) that overhangs from
     the hero into this section on /services/, /digital-engineering/,
     /erp-services/, /low-code-development/, /ai-software-application-development/.
     Desktop only — mobile rule below resets this for the scroll strip. */
  padding-right: clamp(360px, 42%, 560px) !important;
}
.elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column {
  width: auto !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.elementor-element.elementor-element-7b1b280 .elementor-widget-image {
  text-align: center !important;
}
.elementor-element.elementor-element-7b1b280 .elementor-widget-image img {
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  display: block;
}
/* Per-logo height tuning so all 4 read at the same visual weight.
   Column order (from Elementor data): 1=Clutch, 2=Upwork, 3=GoodFirms, 4=Trustpilot.
   Trustpilot has the star stacked above its wordmark so it needs more vertical
   room; GoodFirms is very wide so it gets less; Clutch is chunky so it gets less. */
.elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column:nth-child(1) .elementor-widget-image img { height: clamp(20px, 1.8vw, 26px) !important; } /* Clutch */
.elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column:nth-child(2) .elementor-widget-image img { height: clamp(24px, 2.1vw, 30px) !important; } /* Upwork */
.elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column:nth-child(3) .elementor-widget-image img { height: clamp(18px, 1.5vw, 22px) !important; } /* GoodFirms */
.elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column:nth-child(4) .elementor-widget-image img { height: clamp(36px, 3.2vw, 46px) !important; } /* Trustpilot */

/* DE-specific safety net: same trust bar markup + same per-post CSS as
   /services/ + /ai-software-application-development/, but on /digital-
   engineering/ the row was rendering vertically stacked. Some other
   DE-only rule (overflow:clip on .elementor-top-section, body
   max-width:100vw, etc.) is interfering with the flex row. Force
   flex-direction: row + nowrap + overflow-x: auto with body.page-id
   specificity so it wins over any other DE-scoped rule. */
body.page-id-60226 .elementor-element.elementor-element-7b1b280 > .elementor-container,
body.page-id-60363 .elementor-element.elementor-element-7b1b280 > .elementor-container,
body.page-qa-software-testing .elementor-element.elementor-element-7b1b280 > .elementor-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  align-items: center !important;
  gap: clamp(20px, 3vw, 56px) !important;
}
body.page-id-60226 .elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column,
body.page-id-60363 .elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column,
body.page-qa-software-testing .elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 130px !important;
  max-width: none !important;
  scroll-snap-align: start;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  .elementor-element.elementor-element-7b1b280 > .elementor-container {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    max-width: 92vw !important;
    margin: 0 auto !important;
    padding: 6px 0 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .elementor-element.elementor-element-7b1b280 > .elementor-container::-webkit-scrollbar {
    display: none;
  }
  .elementor-element.elementor-element-7b1b280 > .elementor-container > .elementor-column {
    flex: 0 0 auto !important;
    width: 160px !important;
    min-width: 160px !important;
    padding: 16px 18px !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    scroll-snap-align: center;
  }
  .elementor-element.elementor-element-7b1b280 .elementor-widget-image img {
    max-height: 28px !important;
    max-width: 100% !important;
  }
}
/* Trust strip row: ★ | 4.8/5 | "How leading brands rate our digital
   engineering expertise."  All on a single horizontal row at desktop,
   each column shrunk to fit its content with 16px gap. At <=767px the
   existing @media block stacks them vertically (rating above caption).
   The previous fix had unintentionally stacked them at desktop too. */
.elementor-element.elementor-element-91c9831 > .elementor-container {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
}
.elementor-element.elementor-element-91c9831 > .elementor-container > .elementor-element-e82644d,
.elementor-element.elementor-element-91c9831 > .elementor-container > .elementor-element-78db2d6 {
  width: auto !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
}
.elementor-element.elementor-element-91c9831 .elementor-element-e82644d > .elementor-widget-wrap,
.elementor-element.elementor-element-91c9831 .elementor-element-78db2d6 > .elementor-widget-wrap,
.elementor-element.elementor-element-91c9831 .elementor-element-78db2d6.elementor-column[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated {
  align-content: center !important;
  align-items: center !important;
}
/* Caption "How leading brands..." — left-aligned, constrained width,
   vertically centered with the star/rating block */
.elementor-element.elementor-element-388bde4 {
  white-space: normal !important;
  max-width: 280px;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #475467 !important;
}

/* Remove READ CLIENT REVIEWS from all service pages */
.elementor-element.elementor-element-374cfac {
  display: none !important;
}
/* Star + 4.8/5 aligned horizontally, "Avg. rating" as small footnote with asterisk */
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-wrapper {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-icon {
  margin-right: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-icon .elementor-icon {
  display: flex !important;
  align-items: center !important;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-icon svg {
  width: 38px !important;
  height: 38px !important;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-content {
  display: flex;
  flex-direction: column;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-description {
  font-size: 10px !important;
  color: rgba(0,0,0,0.4) !important;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.elementor-element.elementor-element-4be85f1 .elementor-icon-box-description::before {
  content: '*';
}

/* Form card — extends below the hero section into the trust bar so its
   bottom aligns with READ CLIENT REVIEWS. Extra padding-bottom stretches
   the card; submit button pushed to the bottom via flex. */
.clx-zoho-wrap {
  position: relative;
  z-index: 2;
}
.clx-zoho-card {
  padding: 2.5em !important;
}

/* Form card — balanced layout with consistent spacing */
.clx-zoho-wrap { padding: 10px !important; }
.clx-zoho-head .form-title {
  margin-bottom: 4px !important;
  font-size: 1.5rem !important;
  text-align: center;
}
.clx-zoho-head .form-subtitle {
  margin-bottom: 1.5em !important;
  font-size: 0.85rem !important;
  text-align: center;
}
.clx-field { margin-top: 14px !important; }
.clx-label { margin-bottom: 6px !important; }
.clx-zoho-card textarea { min-height: 56px !important; }
.clx-zoho-card input::placeholder,
.clx-zoho-card textarea::placeholder {
  font-size: 12px !important;
  color: #B5B8BC !important;
  opacity: 1 !important;
  font-style: italic !important;
}

/* Submit button — full width, centered */
.clx-actions {
  margin-top: 20px !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}
.clx-submit {
  width: 100% !important;
  text-align: center !important;
  padding: 14px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
}
.clx-secure {
  display: none !important;
}

/* Consent — breathing room */
.clx-consent {
  margin-top: 16px !important;
}
.clx-zoho-card .clx-consent label {
  font-size: 11px !important;
  line-height: 1.4 !important;
}
/* Contact form (clx-form across service pages) — small inline
   checkbox + label. Sits between the attachment row and the
   submit button. */
.clx-form .clx-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px !important;
}
.clx-form .clx-consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  cursor: pointer;
}
.clx-form .clx-consent label {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

/* Footer contact form ([clx_contact_footer]) on white .clx-form-card:
   custom-rendered checkbox so the tick is high-contrast (browser
   `accent-color` rendered as washed-out light orange and was almost
   invisible to users). Same pattern as the hero card but flipped to
   dark border + orange tick on white. Lives in site-wide.css (not
   inline in the shortcode) so it applies regardless of when the
   inline <style> would be parsed on slow mobile renders. */
.clx-form-card .clx-consent {
  display: block !important;
  position: relative;
  margin-top: 12px;
}
.clx-form-card .clx-consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.clx-form-card .clx-consent label {
  display: inline-block;
  position: relative;
  padding-left: 22px;
  font-size: 12px;
  line-height: 1.45;
  color: #1a1a1a !important;
  cursor: pointer;
  user-select: none;
}
.clx-form-card .clx-consent label::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 1.5px solid #1a1a1a;
  border-radius: 3px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 2px;
}
.clx-form-card .clx-consent label::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 2px;
  top: 4px;
  background: #FA4900;
  clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 16%, 79% 0, 43% 62%);
  transform: scale(0);
  transform-origin: center;
  transition: transform .12s ease-in-out;
}
.clx-form-card .clx-consent input[type="checkbox"]:checked + label::after {
  transform: scale(1);
}
.clx-form-card .clx-consent input[type="checkbox"]:focus-visible + label::before {
  outline: 2px solid rgba(250, 73, 0, .5);
  outline-offset: 3px;
}

/* Footer trust badges — centered, balanced */
.clx-footer {
  margin-top: 16px !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.1);
}
/* (Removed: legacy 7b1b280 trust-bar rules — the new rules at line
   ~5208 above style the section as a homepage-style ratings card with
   per-breakpoint horizontal-scroll behavior baked in. Keeping the
   margin-top here for backward compat.) */
.elementor-element.elementor-element-7b1b280 {
  margin-top: 1em !important;
}
/* (Removed: an older @media 480 rule forced each trust-bar column to
   width: 100% / flex: 0 0 100%, which stacked the badges vertically on
   phone — overriding the nowrap + overflow-x: auto + min-width: 140px
   set in the @media 767 block above. Keep horizontal scroll all the
   way down to the smallest phone widths.) */

/* =========================================================
   0c. Hero eyebrow gradient — replicates the homepage "A.I. First" orange
   gradient effect on all inner-page hero eyebrows (the italic <em><strong>
   label above the H1). Excluded: homepage (has its own via .clx-hero-label),
   blog, and contact page.
   ========================================================= */
body:not(.home):not(.page-contact-us) .elementor-heading-title.elementor-size-default em strong {
  background: linear-gradient(90deg, #ff9900 0%, #f57e07 40%, #ef4e07 75%, #fa4900 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* =========================================================
   0d. Hero H1 — match homepage "Software Product Development &
   Digital Transformation Company" styling: Cabin, 500, 62px, #142533.
   Targets h1.elementor-size-small which all inner pages use.
   Excluded: homepage (styled via .clx-hero-title in homepage.css).
   ========================================================= */
body:not(.home) h1.elementor-heading-title.elementor-size-small {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 500 !important;
  font-size: 62px !important;
  line-height: 66px !important;
  color: #142533 !important;
  letter-spacing: -1.86px;
}
/* All inner page section headings — match services/homepage standard */
body:not(.home) h2.title.main-heading {
  font-family: 'Cabin', sans-serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533 !important;
}
/* Mobile: section transitions on inner pages compress to ~15px above each
   h2 main-heading, which reads as cramped between consecutive card grids.
   Add an explicit breathing buffer so each section reads as its own block. */
@media (max-width: 767px) {
  body:not(.home) .elementor-widget-text-editor h2.title.main-heading {
    margin-top: 40px !important;
  }
}
/* Inner page sub-headings (h2/h3 without .main-heading) — match card title style */
body:not(.home) .elementor-widget-text-editor h2:not(.title):not(.main-heading),
body:not(.home) .elementor-widget-text-editor h3:not(.title):not(.main-heading) {
  font-family: 'Cabin', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;
  color: #1a2236 !important;
}
/* Override dark text for black CTA banner section.
   Migrated 2026-04 from per-ID (.elementor-element-c721c93 + dead
   .elementor-element-c721c92) to semantic .clx-cta-section. The
   page-class :is() prefix is retained so the rule keeps the same
   specificity it had pre-migration and continues to win against
   the inner-page text-editor color rule above. */
body:is(.page-about-us, .page-culture-and-diversity, .page-partnership) .clx-cta-section .elementor-widget-text-editor h2,
body:is(.page-about-us, .page-culture-and-diversity, .page-partnership) .clx-cta-section .elementor-widget-text-editor h2.title.main-heading,
body:is(.page-about-us, .page-culture-and-diversity, .page-partnership) .clx-cta-section .elementor-widget-text-editor h3 {
  color: #FFFFFF !important;
}
/* Inner page body text — match services standard */
body:not(.home) .elementor-widget-text-editor {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #898D90;
}
/* Counter widgets — styled as dark stat cards matching services page */
body:not(.home) .elementor-widget-counter > .elementor-widget-container {
  border: none !important;
  margin: 6px !important;
  padding: 0 !important;
}
body:not(.home) .elementor-widget-counter .elementor-counter {
  background: linear-gradient(145deg, rgba(20,20,20,0.95), rgba(0,0,0,0.98)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.1);
  text-align: center;
}
body:not(.home) .elementor-widget-counter .elementor-counter-number-wrapper {
  justify-content: center !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
body:not(.home) .elementor-widget-counter .elementor-counter-number-wrapper::before {
  content: '';
  width: 22px;
  height: 22px;
  min-width: 22px;
  background-image: url('assets/homepage/circle-3d-icon-1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
body:not(.home) .elementor-widget-counter .elementor-counter-number-wrapper span {
  font-family: 'Cabin', sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1 !important;
  letter-spacing: -1.2px !important;
}
body:not(.home) .elementor-counter-title,
body:not(.home) .elementor-widget-counter .elementor-counter-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: #fff !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
}

/* =========================================================
   1. Body content container width — handled per-section via Elementor's
   native content_width setting (written into _elementor_data), not via
   site-wide CSS overrides.

   Two specific exceptions scoped by section element ID:
   - About Us hero (8ae4ef7): force 1132px
   - About Us CTA "Have a project in mind?" (bdea02a): dark bg stays full width
     (widget internal div), inner Bootstrap container clamps to 1132px

   Global rule: all boxed sections across the site get 1132px container.
   ========================================================= */
body .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1132px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body .elementor-element.elementor-element-8ae4ef7 > .elementor-container {
  max-width: 1132px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body .elementor-element.elementor-element-35de5e4 .axil-call-to-action.callaction-style-2 .container {
  max-width: 1132px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   2. Footer — pitch black background
   ========================================================= */
body footer.axil-footer,
body footer.axil-footer.footer-default,
body footer.axil-footer.footer-style-3,
body footer.axil-footer.bg-color-extra09,
body .axil-footer.axil-footer-style-3,
body .axil-call-to-action.callaction-style-2.bg-color-extra09 {
  background-color: #000000 !important;
}
body footer.axil-footer .copyright-default,
body footer.axil-footer .footer-top {
  background-color: #000000 !important;
}


/* =========================================================
   3. Footer — Follow Us row: divider + single-row aligned social links
   ========================================================= */
body footer.axil-footer .footer-top.ax-section-gap {
  padding: 72px 0 38px !important;
}
body footer.axil-footer .footer-top .container > .row + .row {
  border-top: 1px solid #2A2A2A;
  margin-top: 8px;
  padding-top: 24px;
}
body footer.axil-footer .footer-top .footer-widget-item {
  margin-bottom: 0 !important;
}
body footer.axil-footer .footer-top .footer-widget-item p:last-child,
body footer.axil-footer .footer-top .footer-widget-item ul:last-child {
  margin-bottom: 0 !important;
}
body footer.axil-footer .footer-widget-item h5.title {
  color: #FFFFFF !important;
  margin-bottom: 18px !important;
}
body footer.axil-footer .ft-social-share {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
body footer.axil-footer .ft-social-share li,
body footer.axil-footer .ft-social-share li.clutch-box {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  white-space: nowrap !important;
  list-style: none !important;
  line-height: 1 !important;
}
body footer.axil-footer .ft-social-share li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  flex-shrink: 0;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: color .25s ease;
}
body footer.axil-footer .ft-social-share li > a:hover {
  color: #FA4900 !important;
  transform: none !important;
}
body footer.axil-footer .ft-social-share li > a i,
body footer.axil-footer .ft-social-share li > a .fa,
body footer.axil-footer .ft-social-share li > a .fab,
body footer.axil-footer .ft-social-share li > a .fas,
body footer.axil-footer ul.ft-social-share.d-flex.justify-content-center.liststyle.flex-wrap li i,
body footer.axil-footer ul.ft-social-share.d-flex.justify-content-center.liststyle.flex-wrap li:hover i {
  font-size: 16px !important;
  line-height: 1 !important;
  color: inherit !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: inherit !important;
}
body footer.axil-footer .ft-social-share li.clutch-box > a {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
}
body footer.axil-footer .ft-social-share li.clutch-box > a span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
body footer.axil-footer .ft-social-share li.clutch-box img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  display: block;
}
@media (max-width: 1024px) {
  body footer.axil-footer .ft-social-share {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px 20px !important;
  }
  body footer.axil-footer .ft-social-share li {
    justify-content: center !important;
  }
}


/* =========================================================
   4. Footer copyright row — single horizontal line with dividers
   ========================================================= */
body footer.axil-footer .copyright-default {
  padding: 22px 0 24px !important;
  border-top: 1px solid #2A2A2A !important;
  border-bottom: 9px solid #FA4900 !important;
}
body footer.axil-footer .clx-copyright-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  font-family: 'Cabin', sans-serif;
  font-size: 14px;
  color: #FFFFFF;
}
body footer.axil-footer .clx-cr-item {
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}
body footer.axil-footer .clx-cr-divider {
  width: 1px;
  height: 16px;
  background: #3A3A3A;
  display: inline-block;
}
body footer.axil-footer .clx-cr-dmca {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}
body footer.axil-footer .clx-cr-dmca img {
  height: 22px;
  width: auto;
  display: block;
}
@media (max-width: 1024px) {
  body footer.axil-footer .clx-copyright-row {
    gap: 10px 16px;
    font-size: 12px;
  }
  body footer.axil-footer .clx-cr-divider { display: none; }
  body footer.axil-footer .clx-cr-dmca img { height: 18px; }
}


/* =========================================================
   5. Footer container alignment — match body 1132px width
   ========================================================= */
body .axil-footer .container,
body .axil-footer.footer-default .container,
body .axil-footer .footer-top .container,
body .axil-footer .copyright-default .container,
body footer.axil-footer .container {
  max-width: 1132px !important;
  width: 100% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   "How Our Service Lines Work Together" — Timeline Section
   ========================================================= */
.svc-timeline-section {
  padding: 0;
}
/* Full-width gray bg on the Elementor section containing the timeline */
#services-timeline {
  background: #F8F8F8 !important;
}
/* =========================================================
   GLOBAL SECTION SPACING — services page
   One rule to govern all vertical gaps between top-level sections.
   80px between unrelated sections. 0px between sub-sections in the
   same group (e.g. solutions-header + solutions-grid + solutions-cta,
   or industries-header + industries-grid + industries-cta).
   Sub-sections within the same group share a class prefix so the
   adjacent sibling combinator zeros their gap automatically.
   ========================================================= */
/* =========================================================
   GLOBAL SECTION SPACING — services page
   Applies ONLY to sections after the hero area (582bee8 onwards).
   Hero area (8ae4ef7, 73af05d, aeef6ca, 35230b7) keeps its own
   rules untouched — those sections have form overflow and trust
   bar spacing that can't follow a simple padding rule.

   Every content section gets 56px top+bottom padding for consistent
   vertical rhythm. Sub-sections within the same group collapse to 0.
   ========================================================= */
.page-services .elementor-element[data-id="582bee8"],
.page-services .clx-solutions-section,
.page-services .clx-industries-section,
.page-services #services-timeline,
.page-services .clx-tp-section,
.page-services .clx-security-section,
.page-services .clx-trust-partner-section,
.page-services .clx-casestudies-section,
.page-services .clx-blogs-section,
.page-services .elementor-element[data-id="66a0d1c"],
.page-services .elementor-element[data-id="e8ef87e"],
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) #services-timeline,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-tp-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-casestudies-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-blogs-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .elementor-element[data-id="66a0d1c"],
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .elementor-element[data-id="e8ef87e"],
.page-digital-marketing .clx-solutions-section,
.page-digital-marketing .clx-industries-section,
.page-digital-marketing #services-timeline,
.page-digital-marketing .clx-tp-section,
.page-digital-marketing .clx-casestudies-section,
.page-digital-marketing .clx-blogs-section,
.page-digital-marketing .elementor-element[data-id="66a0d1c"],
.page-digital-marketing .elementor-element[data-id="e8ef87e"],
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-solutions-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-industries-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) #services-timeline,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-tp-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-casestudies-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-blogs-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .elementor-element[data-id="66a0d1c"],
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .elementor-element[data-id="e8ef87e"],
.clx-security-section,
.clx-trust-partner-section,
.clx-secsec-section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
/* DE + DM: the SECURITY · OWNERSHIP · ASSURANCE banner lives in
   .clx-secsec-section, which directly follows .clx-security-header.
   Both sections normally carry 56px top + bottom padding, plus the
   dark banner inside has its own 64px internal top padding — so the
   white space above the banner stacks to 56+56 = 112px before the
   banner background even begins. Zero the top of clx-secsec-section
   so the banner sits one section gap (56px) below the heading
   block, matching the rhythm between every other section pair. */
body:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-secsec-section,
body.page-digital-marketing  .clx-secsec-section,
body:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-secsec-section {
  padding-top: 0 !important;
}
/* Section backgrounds — alternating white/#F8F8F8 rhythm */
.page-services .elementor-element[data-id="582bee8"] { background: #F8F8F8 !important; }
.page-services #services-timeline { background: #F8F8F8 !important; }
.page-services .clx-tp-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-tp-section,
.page-digital-marketing .clx-tp-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-tp-section { background: #fff !important; }
.page-services section.clx-casestudies-section.elementor-top-section {
  background: #F8F8F8 !important;
}
.page-services .clx-blogs-section { background: #fff !important; }
.page-services .clx-security-section { background: #fff !important; }
body.elementor-page.page-services .clx-security-section .elementor-widget {
  margin-bottom: 20px !important;
}
/* Security badge grid — matches service card styling */
.svc-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
}
.svc-badge-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 24px 20px;
  text-align: left;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.svc-badge-card:hover {
  border-color: rgba(232, 97, 26, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.svc-badge-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 16px;
}
.svc-badge-name {
  font-family: 'Cabin', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  color: #1a2236;
  line-height: 1.4;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.svc-badge-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #898D90;
  font-weight: 400;
}
/* Force normal weight on compliance card body text + intro paragraph */
body.page-client-security .clx-compliance-section .svc-badge-card,
body.page-client-security .clx-compliance-section .svc-badge-desc,
body.page-client-security .clx-compliance-section .svc-badge-card *:not(.svc-badge-name),
body.page-client-security .clx-compliance-heading,
body.page-client-security .clx-compliance-heading p {
  font-weight: 400 !important;
}
body.page-client-security .clx-compliance-section .svc-badge-name {
  font-weight: 800 !important;
}
/* Compliance heading h2 — use Cabin 500 to match homepage/about section headings */
body.page-client-security .clx-compliance-heading h2 {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 500 !important;
}
/* Compliance section default section padding */
body.elementor-page.page-client-security .clx-compliance-section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* =====================================================================
   MOBILE / TABLET — client-security page
   Stack 2-col layouts, single-col grids, smaller images
   ===================================================================== */
@media (max-width: 1024px) {
  /* Security Management section — image stacks above text instead of left-absolute */
  .page-client-security .clx-cs-mgmt-section,
  .page-partnership .clx-partnership-hero-arcs {
    padding: 32px 16px !important;
  }
  .page-client-security .clx-cs-mgmt-section > .elementor-container > .elementor-column > .elementor-element-populated,
  .page-partnership .clx-partnership-hero-arcs > .elementor-container > .elementor-column > .elementor-element-populated {
    position: static !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: block !important;
  }
  .page-client-security .clx-cs-mgmt-image,
  .page-partnership .clx-plu-animation {
    position: static !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
  }
  .page-client-security .clx-cs-mgmt-image img,
  .page-partnership .clx-plu-animation img {
    max-height: 320px !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Governance shield — stack bullets above shield */
  .page-client-security .clx-gov-shield > .elementor-container {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .page-client-security .clx-gov-shield .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-client-security .clx-shield-wrap {
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* Incident grid — single column on mobile */
  .page-client-security .clx-incident-grid {
    grid-template-columns: 1fr !important;
    column-gap: 16px !important;
    row-gap: 20px !important;
    padding: 0 16px 32px 16px !important;
  }
  .page-client-security .clx-incident-grid .clx-cs-discover-text,
  .page-client-security .clx-incident-grid .clx-cs-cta-button-1,
  .page-client-security .clx-incident-grid .clx-cs-discover-card,
  .page-client-security .clx-incident-grid .clx-cs-cta-button-2 {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Compliance section — tighter padding, badge grid handled by existing rule */
  .page-client-security .clx-compliance-section {
    padding: 32px 16px !important;
  }
}
/* Compliance / security badge cards — one per row on phones */
@media (max-width: 768px) {
  .page-client-security .clx-compliance-section .svc-badge-grid,
  .page-services .clx-security-section .svc-badge-grid,
  .page-services .svc-badge-grid {
    grid-template-columns: 1fr !important;
  }
}
/* How-we-work Proven Track Record section — vertically center align text + animation */
.page-how-we-work .elementor-element-c80772b > .elementor-container {
  align-items: center !important;
}
/* Horizontally center the stats block under the line animation */
.page-how-we-work .clx-tr-stats {
  justify-content: center !important;
}
/* Tighten Consistency Thread timing to match the other two infographics:
   line draws in 2s (was 4s), nodes tap every 300ms (was 700ms), stats fade
   at 2s (was 3.4s). Total runtime ~2.2s — inline with A3 and B2. */
.page-how-we-work .clx-tr-line {
  animation-duration: 2s !important;
}
.page-how-we-work .clx-tr-node.n1 { animation-delay: 0.1s !important; }
.page-how-we-work .clx-tr-node.n2 { animation-delay: 0.4s !important; }
.page-how-we-work .clx-tr-node.n3 { animation-delay: 0.7s !important; }
.page-how-we-work .clx-tr-node.n4 { animation-delay: 1.0s !important; }
.page-how-we-work .clx-tr-node.n5 { animation-delay: 1.3s !important; }
.page-how-we-work .clx-tr-node.n6 { animation-delay: 1.6s !important; }
.page-how-we-work .clx-tr-node.n7 { animation-delay: 1.9s !important; }
.page-how-we-work .clx-tr-stats {
  animation-delay: 2s !important;
}
/* Match about-us icon-list <strong> treatment EXACTLY for all bold labels
   on how-we-work (Track Record stats, A3 panel labels, B2 caption, B2 step
   labels). Reference rule from site-wide.css line ~1056:
   `.page-about-us .clx-au-stat-list .elementor-icon-list-text strong
       { color: #1C1E21 !important; font-weight: 600 !important; }`
   Parent text uses `font-family: 'DM Sans'; font-size: 15px; line-height: 26px`.
   So weight is 600 (browser synthesises since DM Sans 600 isn't explicitly
   loaded — both pages render the same faux-bold this way). */
body.page-how-we-work .clx-tr-lbl-main,
body.page-how-we-work .clx-tr-lbl-sub,
body.page-how-we-work .clx-ig--a3 .clx-ig__lbl,
body.page-how-we-work .clx-ig--b2 .clx-ig__cap,
body.page-how-we-work .clx-ig--b2 .clx-ig__cap *,
body.page-how-we-work .clx-ig--b2 .clx-ig__step .lbl {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #1C1E21 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.page-how-we-work .clx-tr-lbl-main,
body.page-how-we-work .clx-tr-lbl-sub,
body.page-how-we-work .clx-ig--a3 .clx-ig__lbl {
  text-align: center !important;
}
body.page-how-we-work .clx-tr-lbl-main { margin-top: 12px !important; }
body.page-how-we-work .clx-tr-lbl-sub  { margin-top: 0 !important; }
/* Infographic 1 (A3) height trim — shrink viz box, padding, number size,
   and inter-panel gap. Keeps the same form + animation, total height drops
   by ~60-80px. */
body.page-how-we-work .clx-ig--a3 .clx-ig__inner { gap: 10px !important; }
body.page-how-we-work .clx-ig--a3 .clx-ig__pane {
  padding: 14px 18px !important;
  gap: 14px !important;
}
body.page-how-we-work .clx-ig--a3 .clx-ig__viz {
  width: 72px !important;
  height: 72px !important;
}
body.page-how-we-work .clx-ig--a3 .clx-ig__num { font-size: 28px !important; }
body.page-how-we-work .clx-ig--a3 .clx-ig__num span { font-size: 0.55em !important; }
body.page-how-we-work .clx-ig--a3 .clx-ig__lbl { margin-top: 4px !important; }
body.page-how-we-work .clx-ig--a3 .clx-ig__note { margin-top: 2px !important; }
/* B2 caption + step labels centered against the staircase visual */
body.page-how-we-work .clx-ig--b2 .clx-ig__cap,
body.page-how-we-work .clx-ig--b2 .clx-ig__step .lbl {
  text-align: center !important;
}
/* Reserve the same label box height for every step so "Team extension"
   (wraps to 2 lines on narrow grids) aligns with "Full partner" (1 line) —
   STEP 01..04 sub-labels below then sit on the same baseline. */
body.page-how-we-work .clx-ig--b2 .clx-ig__step .lbl {
  min-height: 52px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
/* Panel description notes + B2 step sub-labels use the same about-us
   icon-list body text style: DM Sans 15/26, color #898D90, weight 400. */
body.page-how-we-work .clx-ig--a3 .clx-ig__note,
body.page-how-we-work .clx-ig--b2 .clx-ig__step .sub {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 4px !important;
}
body.page-how-we-work .clx-ig--b2 .clx-ig__step .sub {
  text-align: center !important;
}
/* Body paragraphs on how-we-work — match the opening paragraph "When you
   outsource a technology engagement…" (widget afd461a): color #7A7A7A,
   weight normal, inherit the theme default font-family and font-size so
   the three paragraphs here (signal is clear, What this demands, At
   Clixlogix) read at the exact same scale as the opener. Strong stays bold
   ink. */
.page-how-we-work .elementor-element-4f6fe4f,
.page-how-we-work .elementor-element-4f6fe4f p,
.page-how-we-work .elementor-element-f1b18d1,
.page-how-we-work .elementor-element-f1b18d1 p,
.page-how-we-work .elementor-element-b42c5d5,
.page-how-we-work .elementor-element-b42c5d5 p {
  color: #7A7A7A !important;
  font-weight: 400 !important;
}
.page-how-we-work .elementor-element-4f6fe4f strong,
.page-how-we-work .elementor-element-f1b18d1 strong,
.page-how-we-work .elementor-element-b42c5d5 strong {
  color: #1C1E21 !important;
  font-weight: 700 !important;
}
/* Section 3fdcf7e (the closing "Below we break down" row): zero its extra
   top padding so it doesn't create an abrupt gap under the text+B2 row. */
.page-how-we-work .elementor-element-3fdcf7e {
  padding-top: 0 !important;
}
/* PDF CTA sections (SE + DM) — strip peach bg that's set via per-post CSS
   on columns inside af93592 and c293b5c. */
.page-how-we-work .elementor-element-af93592,
.page-how-we-work .elementor-element-af93592 .elementor-column,
.page-how-we-work .elementor-element-af93592 .elementor-widget-wrap,
.page-how-we-work .elementor-element-af93592 .elementor-element-populated,
.page-how-we-work .elementor-element-c293b5c,
.page-how-we-work .elementor-element-c293b5c .elementor-column,
.page-how-we-work .elementor-element-c293b5c .elementor-widget-wrap,
.page-how-we-work .elementor-element-c293b5c .elementor-element-populated {
  background: transparent !important;
  background-color: transparent !important;
}
/* Kill the per-post column centering (align/justify: center) on the columns
   that host the PDF-download body + CTA pairs — widgets stay full-width,
   text left-aligns, CTAs keep their inline right-align. */
.page-how-we-work .elementor-element-e7ad499 > .elementor-widget-wrap,
.page-how-we-work .elementor-element-e7ad499 > .elementor-element-populated,
.page-how-we-work .elementor-element-1a17d33 > .elementor-widget-wrap,
.page-how-we-work .elementor-element-1a17d33 > .elementor-element-populated {
  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
}
.page-how-we-work .elementor-element-9a2e5c2,
.page-how-we-work .elementor-element-70fef81,
.page-how-we-work .elementor-element-437ed13,
.page-how-we-work .elementor-element-906ecd9 {
  width: 100% !important;
  max-width: 100% !important;
}
/* Service Engagement Models chapter — gray #F8F8F8 bg on the heading, tabs,
   and every section that belongs to the engagement models block, matching
   the about-us "Full Spectrum" / .clx-service-section treatment. Sections
   stack flush so the gray reads as one continuous chapter. */
.page-how-we-work .elementor-element-3fdcf7e,
.page-how-we-work .clx-eng-tabs-section,
.page-how-we-work .elementor-element-02d02c3,
.page-how-we-work .elementor-element-af93592,
.page-how-we-work .elementor-element-b83797f,
.page-how-we-work .elementor-element-c293b5c {
  background: #F8F8F8 !important;
  background-color: #F8F8F8 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Pad only the first and last sections of the chapter so the gray block has
   56px of breathing room above the heading and below the last CTA, but the
   inner sections stay flush. */
.page-how-we-work .elementor-element-3fdcf7e {
  padding: 56px 0 24px 0 !important;
}
.page-how-we-work .elementor-element-c293b5c {
  padding-bottom: 56px !important;
}
/* "Moving Forward, Clixlogix's Methodology" heading — match the vertical
   rhythm of the "Service Engagement Models" chapter heading (56px above,
   24px below) so both chapter titles breathe the same way. */
.page-how-we-work .elementor-element-6b2483d {
  padding: 56px 0 8px 0 !important;
  margin: 0 !important;
}
/* Kill the 2vw margin-top on the phase-cards section below the Moving
   Forward intro so the intro paragraph sits close to the first phase
   card instead of floating above a large gap. */
.page-how-we-work .elementor-element-49f5d87 {
  margin-top: 0 !important;
}
/* "Unlock..." and "Choose..." PDF intro paragraphs — inherit the exact same
   typography as the "Below we break down..." paragraph (widget b42c5d5):
   theme default font-family/size, color #7A7A7A, weight 400. Nested spans
   from the legacy drop-cap markup get normalized so nothing inflates. */
.page-how-we-work .elementor-element-9a2e5c2,
.page-how-we-work .elementor-element-9a2e5c2 .elementor-widget-container,
.page-how-we-work .elementor-element-9a2e5c2 p,
.page-how-we-work .elementor-element-9a2e5c2 p span,
.page-how-we-work .elementor-element-437ed13,
.page-how-we-work .elementor-element-437ed13 .elementor-widget-container,
.page-how-we-work .elementor-element-437ed13 p,
.page-how-we-work .elementor-element-437ed13 p span {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: #7A7A7A !important;
  font-weight: 400 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}
/* Belt-and-braces: cover every descendant of the two PDF intro widgets in
   case a theme/page rule flips text-align back to center on an inner
   wrapper we did not enumerate above. */
body.page-how-we-work .elementor-element-9a2e5c2 *,
body.page-how-we-work .elementor-element-437ed13 * {
  text-align: left !important;
}
/* The real culprit: the widgets had Elementor's custom-width set to 93.927%
   (per-post CSS) which makes them narrower than their parent column. Inside
   `.elementor-widget-wrap.elementor-element-populated` (a flex column),
   a narrower item collapses toward center with the column's default
   align-items, so the paragraph reads as visually centered even though
   text-align is left.
   Force both intro widgets to fill their column width so the left edge of
   the text lines up with the left edge of the PDF chapter column. */
body.page-how-we-work .elementor-element-9a2e5c2,
body.page-how-we-work .elementor-element-437ed13 {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
  --container-widget-flex-grow: 1 !important;
  margin-left: 0 !important;
  align-self: stretch !important;
}
/* Column-level flex + padding: the per-post CSS gives these two columns
   `padding: 3vw 3vw 2vw 3vw` + `margin: 0em 1em 0em 0em` on their
   .elementor-element-populated inner box, which pushes the widget content
   inward so it reads as floating in the middle of the column. Keep the
   top padding so the intro paragraph has breathing room above it (same
   rhythm as the other text widgets on the page), but strip left/right
   padding and left/right margin so the paragraph's left edge aligns with
   the column's left edge. */
body.page-how-we-work .elementor-element-e7ad499 > .elementor-widget-wrap,
body.page-how-we-work .elementor-element-e7ad499 > .elementor-element-populated,
body.page-how-we-work .elementor-element-1a17d33 > .elementor-widget-wrap,
body.page-how-we-work .elementor-element-1a17d33 > .elementor-element-populated {
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  --e-column-margin-right: 0 !important;
  --e-column-margin-left: 0 !important;
}
.page-how-we-work .elementor-element-9a2e5c2 strong,
.page-how-we-work .elementor-element-437ed13 strong {
  color: #1C1E21 !important;
  font-weight: 700 !important;
}
/* Make sure the intro widgets follow the same widget-container padding/margin
   reset as b42c5d5 so they sit at the same scale */
.page-how-we-work .elementor-element-9a2e5c2 > .elementor-widget-container,
.page-how-we-work .elementor-element-437ed13 > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
/* All 2-col sections on how-we-work: text column and diagram column are
   vertically centered against each other as one block (same rhythm across
   Proven Track Record, Getting The Engagement Right, and the combined
   signal+AtClixlogix / Staircase row). */
.page-how-we-work .elementor-element-c80772b > .elementor-container,
.page-how-we-work .elementor-element-bfee720 > .elementor-container,
.page-how-we-work .clx-hww-engagement-b2 > .elementor-container {
  align-items: center !important;
}
/* Mobile stack for the new 2-col section */
@media (max-width: 1024px) {
  .page-how-we-work .clx-hww-engagement-b2 > .elementor-container {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .page-how-we-work .clx-hww-engagement-b2 .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }
}
.page-how-we-work .elementor-element-bfee720 .clx-ig--a3 {
  max-width: 432px !important;
  margin: 0 auto !important;
}
.page-how-we-work .elementor-element-bfee720 .clx-ig__pane {
  padding: 18px 20px !important;
  gap: 18px !important;
}
.page-how-we-work .elementor-element-bfee720 .clx-ig__viz {
  width: 88px !important;
  height: 88px !important;
}
.page-how-we-work .elementor-element-bfee720 .clx-ig__num {
  font-size: 38px !important;
}
/* Stack on mobile (already covered by homepage-wide 1024 rule for c80772b) */
@media (max-width: 1024px) {
  .page-how-we-work .elementor-element-bfee720 > .elementor-container {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .page-how-we-work .elementor-element-bfee720 .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1024px) {
  .page-how-we-work .elementor-element-c80772b > .elementor-container {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .page-how-we-work .elementor-element-c80772b .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Mission hero — H1 wraps to 2-3 lines on mobile and overflows the fixed
   408px peach ::before strip. Stretch the strip to fill the hero height
   so the heading + subtitle stay inside the peach band on small screens. */
@media (max-width: 1024px) {
  .clx-inner-hero::before {
    height: 100% !important;
  }
  /* Center-align all hero text on mobile across every inner-page hero
     (8ae4ef7 carries .clx-inner-hero) and the services content hero
     (73af05d — still scoped to .page-services since no shared class). */
  .clx-inner-hero .elementor-heading-title,
  .clx-inner-hero .elementor-widget-heading,
  .clx-inner-hero .elementor-widget-text-editor,
  .clx-inner-hero .elementor-widget-text-editor p,
  .clx-services-hero .elementor-heading-title,
  .clx-services-hero .elementor-widget-heading,
  .clx-services-hero .elementor-widget-text-editor,
  .clx-services-hero .elementor-widget-text-editor p {
    text-align: center !important;
  }
  /* Per-post CSS pushes the hero column (27dfd50) down 120px on mobile;
     reset to a comfortable top padding instead. */
  .clx-inner-hero .elementor-element-27dfd50 > .elementor-element-populated {
    padding-top: 32px !important;
  }
  .clx-inner-hero .elementor-widget-wrap {
    align-content: flex-start !important;
    align-items: flex-start !important;
  }
}
@media (max-width: 600px) {
  .page-client-security .clx-incident-grid .elementor-icon-box-wrapper {
    gap: 12px !important;
  }
  .page-client-security .clx-shield-wrap {
    max-width: 260px !important;
  }
}

/* =====================================================================
   MOBILE / TABLET — mission page
   Stack the 3 quote sections vertically, single-col values grid
   ===================================================================== */
@media (max-width: 1024px) {
  /* Quote sections (mission, vision, values intro) — stack image above text */
  .page-mission .clx-mvv-stat-row > .elementor-container {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .page-mission .clx-mvv-stat-row .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }
  .page-mission .clx-mvv-stat-icon img {
    max-height: 200px !important;
    height: auto !important;
  }

  /* Values grid — 2 cols on tablet */
  .page-mission .clx-mission-values-section .clx-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .page-mission .clx-mission-values-section,
  .page-mission .clx-team-callout-section,
  .page-mission .clx-mvv-values-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 600px) {
  /* Values grid — single col on phones */
  .page-mission .clx-mission-values-section .clx-process-grid {
    grid-template-columns: 1fr !important;
  }
  .page-mission .clx-process-step {
    min-height: 0 !important;
    padding: 24px 20px !important;
  }
  .page-mission .clx-process-num {
    font-size: 64px !important;
  }
}
/* Blog section on client-security uses white bg (contact form above it is gray) */
body.elementor-page.page-client-security .clx-blogs-section {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}
@media (max-width: 768px) {
  .svc-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-services .clx-trust-partner-section { background: #F8F8F8 !important; }
.page-services .clx-contact-section { background: #F8F8F8 !important; }
body.elementor-page.page-services .clx-trust-partner-section .elementor-widget {
  margin-bottom: 20px !important;
}
.clx-trust-partner-section .elementor-heading-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533 !important;
  margin-bottom: 0 !important;
}
.clx-trust-partner-section .clx-trust-image img {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.clx-trust-partner-section .elementor-inner-section > .elementor-container {
  gap: 32px !important;
  align-items: center !important;
}
.clx-trust-partner-section .elementor-inner-section {
  margin-bottom: 12px !important;
}
:is(.page-services, .page-erp-services, .page-ai-software-application-development, .page-digital-engineering, .page-digital-marketing, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element[data-id="66a0d1c"] { background: #fff !important; }
/* FAQ heading — match homepage sizing */
:is(.page-services, .page-erp-services, .page-ai-software-application-development, .page-digital-engineering, .page-digital-marketing, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element[data-id="66a0d1c"] h2 {
  font-family: 'Cabin', sans-serif !important;
  font-size: 52px !important;
  font-weight: 500 !important;
  line-height: 60px !important;
  letter-spacing: -1.56px !important;
  color: #142533 !important;
  margin-bottom: 24px !important;
  margin-top: 0 !important;
}
/* FAQ accordion — orange circle with CSS +/− matching homepage */
:is(.page-services, .page-about-us, .page-digital-engineering, .page-digital-marketing, .page-erp-services, .page-ai-software-application-development, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .stratum-advanced-accordion__expand-icon {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #FA4900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
:is(.page-services, .page-about-us, .page-digital-engineering, .page-digital-marketing, .page-erp-services, .page-ai-software-application-development, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .stratum-advanced-accordion__expand-icon span,
:is(.page-services, .page-about-us, .page-digital-engineering, .page-digital-marketing, .page-erp-services, .page-ai-software-application-development, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .stratum-advanced-accordion__expand-icon i {
  display: none !important;
}
:is(.page-services, .page-about-us, .page-digital-engineering, .page-digital-marketing, .page-erp-services, .page-ai-software-application-development, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .stratum-advanced-accordion__expand-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 2px !important;
  background: #fff !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 1px;
}
:is(.page-services, .page-about-us, .page-digital-engineering, .page-digital-marketing, .page-erp-services, .page-ai-software-application-development, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .stratum-advanced-accordion__expand-icon::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 2px !important;
  height: 14px !important;
  background: #fff !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
:is(.page-services, .page-about-us, .page-digital-engineering, .page-digital-marketing, .page-erp-services, .page-ai-software-application-development, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .active-accordion .stratum-advanced-accordion__expand-icon::after {
  transform: translate(-50%, -50%) scaleY(0) !important;
  opacity: 0 !important;
}
.page-services .clx-industries-section { background: #fff !important; }
/* DE + IT consulting (DE-cloned): industries gray, timeline white (inverted from /services/) */
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-industries-section { background: #F8F8F8 !important; }
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) #services-timeline,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) #services-timeline { background: #FFFFFF !important; }
/* DM: timeline section now hosts the [clx_dm_platforms_grid] shortcode
   which paints its own gray surface — push the wrapping Elementor
   section to gray too so the band extends edge-to-edge instead of
   showing white margins outside the 1140px container. */
.page-digital-marketing #services-timeline { background: #F8F8F8 !important; }

/* DM: section bgs flatten to white. Inherits the alternating gray rhythm
   from DE-cloned data, but the page reads cleaner when the marketing
   sections (industries / casestudies / blogs / contact / engagement
   banner deeng1) drop the gray fill entirely. Override the data-side
   bg=#F8F8F8 set on those sections plus the global rules at lines 36
   (clx-casestudies-section) and 286 (clx-blogs-section). */
.page-digital-marketing .clx-industries-section,
.page-digital-marketing .clx-casestudies-section,
.page-digital-marketing .clx-blogs-section,
.page-digital-marketing .clx-contact-section { background: #FFFFFF !important; }

/* "Digital Engineering Solutions We Build" — three stacked sections
   (header / grid / CTA) carried over from the DE clone but irrelevant
   on the marketing page. Hide all three on DM only; DE keeps them. */
body.page-digital-marketing .elementor-element[data-id="b0fc160"],
body.page-digital-marketing .elementor-element[data-id="5ba57b8"],
body.page-digital-marketing .elementor-element[data-id="b36e7bf"] {
  display: none !important;
}
/* deeng1 (engagement banner) keeps its #F8F8F8 section bg from the
   data side — the white .clx-eb-stat cards inside need a non-white
   surrounding to read as cards. Matches DE behavior exactly. */

/* Sub-sections within the same group — collapse gaps between them */
.page-services .clx-solutions-section + .clx-solutions-section,
.page-services .clx-industries-section + .clx-industries-section,
.page-services .clx-tp-section + .clx-tp-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-section + .clx-solutions-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-section + .clx-industries-section,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-tp-section + .clx-tp-section,
.page-digital-marketing .clx-solutions-section + .clx-solutions-section,
.page-digital-marketing .clx-industries-section + .clx-industries-section,
.page-digital-marketing .clx-tp-section + .clx-tp-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-solutions-section + .clx-solutions-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-industries-section + .clx-industries-section,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-tp-section + .clx-tp-section {
  padding-top: 0 !important;
}
/* First sub-section in a group — reduce bottom padding since next sub-section follows */
.page-services .clx-solutions-section:first-of-type,
.page-services .clx-industries-section:first-of-type,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-section:first-of-type,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-section:first-of-type,
.page-digital-marketing .clx-solutions-section:first-of-type,
.page-digital-marketing .clx-industries-section:first-of-type,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-solutions-section:first-of-type,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-industries-section:first-of-type {
  padding-bottom: 24px !important;
}
.page-services .clx-tp-section:first-of-type,
:is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-tp-section:first-of-type,
.page-digital-marketing .clx-tp-section:first-of-type,
:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-tp-section:first-of-type {
  padding-bottom: 0 !important;
}
.svc-timeline-inner {
  max-width: 1132px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
}

/* Sprint Kanban board — 4 columns with shared header bar */
.svc-sprint-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.svc-sprint-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.svc-sprint-card:hover {
  border-color: rgba(232, 97, 26, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.svc-sprint-label {
  font-family: 'Cabin', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #142533;
  margin-bottom: 2px;
}
.svc-sprint-duration {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #898D90;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.svc-sprint-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-pill {
  display: block;
  height: 28px;
  line-height: 28px;
  border-radius: 14px;
  padding: 0 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-pill em {
  font-style: normal;
  opacity: 0.75;
  margin-left: 4px;
  font-size: 11px;
}
.svc-pill-1 { background: #E8611A; }
.svc-pill-2 { background: rgba(232, 97, 26, 0.80); }
.svc-pill-3 { background: rgba(232, 97, 26, 0.60); }
.svc-pill-4 { background: rgba(232, 97, 26, 0.45); }
.svc-pill-5 { background: rgba(232, 97, 26, 0.30); color: #142533; }
.svc-pill-ai {
  background: #142533 !important;
  color: #fff !important;
  border: 1px dashed rgba(232, 97, 26, 0.5);
}

.svc-sprint-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-style: italic;
  color: #898D90;
  text-align: center;
  margin: 24px 0 0;
}

/* PMO Comparison — two-column */
.svc-pmo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.svc-pmo-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.svc-pmo-with {
  border: 2px solid #E8611A;
}
.svc-pmo-title {
  font-family: 'Cabin', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #142533;
  margin: 0 0 20px;
}

/* PMO boxes — fragmented layout */
.svc-pmo-fragmented {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
  padding: 20px;
  border: 1px dashed #ccc;
  border-radius: 12px;
}
.svc-pmo-box-bad {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #991B1B;
}

/* PMO boxes — unified hub layout */
.svc-pmo-unified {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  position: relative;
}
.svc-pmo-hub {
  background: #E8611A;
  color: #fff;
  font-family: 'Cabin', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(232, 97, 26, 0.3);
  flex-shrink: 0;
}
.svc-pmo-box-good {
  background: #F8F8F8;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #142533;
}

/* PMO points */
.svc-pmo-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.svc-pmo-points li {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}
.svc-pmo-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.svc-pmo-pain li { color: #991B1B; }
.svc-pmo-pain li::before { background: #991B1B; }
.svc-pmo-benefit li { color: #166534; }
.svc-pmo-benefit li::before { background: #166534; }

/* Closing text + stat */
.svc-timeline-closing {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #898D90;
  text-align: left;
  max-width: none;
  margin: 48px 0 16px;
}
.svc-timeline-stat {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #898D90;
  text-align: left;
  margin-bottom: 24px;
}
.svc-timeline-cta {
  text-align: right;
}
.svc-stat-highlight {
  color: #898D90;
  font: inherit;
}

/* Responsive */
@media (max-width: 768px) {
  .svc-sprint-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Case studies — white bg, padding handled by global rule */
.page-services .clx-casestudies-section {
  background: #FFFFFF !important;
}

/* =========================================================
   RESPONSIVE — TABLET (768–1024px)
   Applies to both homepage and services page via class selectors.
   ========================================================= */
@media (max-width: 1024px) {
  /* Global section spacing */
  .page-services .elementor-element[data-id="582bee8"],
  .page-services .clx-solutions-section,
  .page-services .clx-industries-section,
  .page-services #services-timeline,
  .page-services .clx-tp-section,
  .page-services .clx-trust-partner-section,
  .page-services .clx-security-section,
  .page-services .clx-casestudies-section,
  .page-services .clx-blogs-section,
  .page-services .clx-contact-section,
  .page-services .elementor-element[data-id="66a0d1c"],
  .page-services .elementor-element[data-id="e8ef87e"],
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) #services-timeline,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-tp-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-casestudies-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-blogs-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-contact-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .elementor-element[data-id="66a0d1c"],
  .page-digital-marketing .clx-solutions-section,
  .page-digital-marketing .clx-industries-section,
  .page-digital-marketing #services-timeline,
  .page-digital-marketing .clx-tp-section,
  .page-digital-marketing .clx-casestudies-section,
  .page-digital-marketing .clx-blogs-section,
  .page-digital-marketing .clx-contact-section,
  .page-digital-marketing .elementor-element[data-id="66a0d1c"],
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-solutions-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-industries-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) #services-timeline,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-tp-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-casestudies-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-blogs-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-contact-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .elementor-element[data-id="66a0d1c"],
  .clx-secsec-section,
  .clx-security-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Hero */
  .elementor-element.elementor-element-73af05d::before {
    height: 300px;
  }
  .elementor-element.elementor-element-73af05d {
    padding-top: 60px !important;
  }
  .elementor-element.elementor-element-73af05d .elementor-element-4275704 > .elementor-element-populated {
    padding-right: 0 !important;
  }

  /* Section headings */
  .svc-heading-title {
    font-size: 38px !important;
    line-height: 44px !important;
    letter-spacing: -1px !important;
  }

  /* Service cards */
  .svc-cards-grid > .svc-card,
  .svc-cards-heading .svc-card {
    margin-top: 32px;
  }
  .svc-card-icon {
    width: 100px;
    height: 100px;
    top: -38px;
  }
  .svc-card-icon img,
  .svc-card-icon img.lazyload,
  .svc-card-icon img[data-src] {
    width: 100px !important;
    height: 100px !important;
  }
  .svc-card-header {
    padding-right: 80px;
  }

  /* Sprint kanban board */
  .svc-sprint-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Security badges */
  .svc-badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Trust partner inner section */
  .clx-trust-partner-section .elementor-inner-section > .elementor-container {
    flex-direction: column !important;
  }
  .clx-trust-partner-section .elementor-inner-section .elementor-column {
    width: 100% !important;
  }
  .clx-trust-partner-section .clx-trust-image img {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
  }

  /* Blog grid — softer transition */
  .clx-blogs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Logo marquee */
  #logo-slider .slider .slide {
    width: 180px !important;
    padding: 10px 24px !important;
  }
  #logo-slider .slider .slide-track {
    width: calc(180px * 12) !important;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE (<768px)
   ========================================================= */
@media (max-width: 768px) {
  /* Global section spacing */
  .page-services .elementor-element[data-id="582bee8"],
  .page-services .clx-solutions-section,
  .page-services .clx-industries-section,
  .page-services #services-timeline,
  .page-services .clx-tp-section,
  .page-services .clx-trust-partner-section,
  .page-services .clx-security-section,
  .page-services .clx-casestudies-section,
  .page-services .clx-blogs-section,
  .page-services .clx-contact-section,
  .page-services .elementor-element[data-id="66a0d1c"],
  .page-services .elementor-element[data-id="e8ef87e"],
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) #services-timeline,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-tp-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-casestudies-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-blogs-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .clx-contact-section,
  :is(.page-digital-engineering, .page-emerging-technologies, .page-qa-software-testing) .elementor-element[data-id="66a0d1c"],
  .page-digital-marketing .clx-solutions-section,
  .page-digital-marketing .clx-industries-section,
  .page-digital-marketing #services-timeline,
  .page-digital-marketing .clx-tp-section,
  .page-digital-marketing .clx-casestudies-section,
  .page-digital-marketing .clx-blogs-section,
  .page-digital-marketing .clx-contact-section,
  .page-digital-marketing .elementor-element[data-id="66a0d1c"],
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-solutions-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-industries-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) #services-timeline,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-tp-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-casestudies-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-blogs-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .clx-contact-section,
  :is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .elementor-element[data-id="66a0d1c"],
  .clx-secsec-section,
  .clx-security-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* 1. Hero — peach bg must cover stacked content */
  .elementor-element.elementor-element-73af05d::before {
    height: 100% !important;
  }
  .elementor-element.elementor-element-73af05d {
    padding-top: 32px !important;
  }

  /* Section headings */
  .svc-heading-title {
    font-size: 28px !important;
    line-height: 38px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 16px;
  }
  .svc-heading-desc {
    font-size: 16px;
    line-height: 24px;
  }
  body:not(.home) h1.elementor-heading-title.elementor-size-small {
    font-size: 32px !important;
    line-height: 32px !important;
  }

  /* 2. Trust bar — centered, star + 4.8/5 closer, caption tighter */
  .elementor-element.elementor-element-91c9831 > .elementor-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center;
  }
  .elementor-element.elementor-element-91c9831 .elementor-column {
    width: auto !important;
  }
  .elementor-element.elementor-element-4be85f1 .elementor-icon-box-wrapper {
    gap: 6px !important;
  }
  .elementor-element.elementor-element-4be85f1 .elementor-icon-box-title {
    font-size: 1.4rem !important;
  }
  .elementor-element.elementor-element-388bde4 {
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  /* 4. Stat cards — bigger text, centered */
  .svc-stat-black {
    text-align: center;
  }
  .svc-stat-num {
    font-size: 48px !important;
  }
  .svc-stat-top {
    justify-content: center;
  }
  .svc-stat-label {
    font-size: 16px;
    line-height: 24px;
  }

  /* 5. Service cards — center align links on all cards */
  .svc-card {
    padding: 24px 20px 20px;
    text-align: center;
  }
  .svc-card-header {
    padding-right: 60px;
    justify-content: center;
  }
  .svc-card-icon {
    width: 80px;
    height: 80px;
    top: -28px;
  }
  .svc-card-icon img,
  .svc-card-icon img.lazyload,
  .svc-card-icon img[data-src] {
    width: 80px !important;
    height: 80px !important;
  }
  .svc-card-specs {
    text-align: left;
  }
  /* Bullets stay left-aligned on mobile. Earlier this used
     justify-content: center which centered short items but let long
     items wrap-and-left-align — creating mixed alignment within the
     same list. */
  .svc-card-specs li {
    justify-content: flex-start;
    text-align: left;
  }
  .svc-card-link-wrap {
    text-align: center !important;
    align-self: center !important;
  }
  .svc-cards-grid > .svc-card,
  .svc-cards-heading .svc-card {
    margin-top: 30px;
  }

  /* 6. Sprint kanban — horizontal scroll */
  .svc-sprint-row {
    grid-template-columns: repeat(4, 280px) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .svc-sprint-card {
    scroll-snap-align: start;
    padding: 16px;
  }

  /* Solutions decorative blob */
  .clx-sol-deco {
    display: none !important;
  }

  /* Timeline */
  .svc-timeline-inner {
    padding: 0 16px;
  }
  .svc-timeline-cta {
    text-align: center !important;
  }

  /* Trust partner */
  .clx-trust-partner-section .elementor-inner-section > .elementor-container {
    gap: 20px !important;
  }
  .clx-trust-partner-section .clx-trust-image img {
    max-height: 200px;
  }

  /* Security badges */
  .svc-badge-card {
    padding: 16px;
  }
  .svc-badge-card img {
    width: 132px;
    height: 50px;
  }

  /* Section headings — all at 28px */
  .clx-security-section h2.title.main-heading,
  .clx-trust-partner-section .elementor-heading-title,
  .page-services .elementor-element[data-id="66a0d1c"] h2 {
    font-size: 28px !important;
    line-height: 38px !important;
  }

  /* Blog grid */
  .clx-blogs-grid {
    grid-template-columns: 1fr !important;
  }

  /* 3. Logo marquee — match homepage mobile */
  #logo-slider .slider .slide {
    width: 150px !important;
    padding: 8px 20px !important;
  }
  #logo-slider .slider .slide img {
    height: 30px !important;
  }
  #logo-slider .slider .slide-track {
    width: calc(150px * 12) !important;
  }

  /* Cards heading margin */
  .svc-cards-heading {
    margin-bottom: 32px;
  }

  /* 7. Tech platform cards — center icons, fix popup bg on mobile */
  .clx-tp-cards {
    justify-content: center !important;
  }
  .clx-tp-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #EFEFEF !important;
  }
  .clx-tp-card:hover {
    background: #fff !important;
  }
  .clx-tp-card-popup {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    z-index: 50 !important;
    border: 2px solid #FA4900 !important;
    border-radius: 14px !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* All CTAs center on mobile */
  .svc-timeline-cta,
  .clx-industries-cta-wrap,
  .clx-solutions-cta-wrap {
    text-align: center !important;
  }
}

/* =========================================================
   Timeline cards — fixed height with Read More toggle
   ========================================================= */
.stratum-horizontal-timeline-item__card-title {
  font-family: 'Cabin', sans-serif !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;
  color: #1a2236 !important;
}
.stratum-horizontal-timeline-item__card-description,
.stratum-horizontal-timeline-item__card-description p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
}
.stratum-horizontal-timeline-item__card-description {
  max-height: 100px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}
.stratum-horizontal-timeline-item__card-description::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
  transition: opacity 0.3s;
}
.stratum-horizontal-timeline-item__card-description.is-expanded {
  max-height: 600px;
}
.stratum-horizontal-timeline-item__card-description.is-expanded::after {
  opacity: 0;
}
.clx-read-more-btn {
  display: block;
  margin-top: 8px;
  margin-left: auto;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #E8611A;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.clx-read-more-btn:hover {
  text-decoration: underline;
}

/* CTA banner — force white text (must be last to win specificity), no
   bottom padding so the arrow image flushes the section bottom. All
   three pages share .clx-cta-section / .clx-cta-action-col / .clx-cta-arrow
   so the rules collapse to a single chain. */
body .clx-cta-section,
.clx-cta-section h2.title.main-heading,
.clx-cta-section .elementor-widget-text-editor h3,
.clx-cta-section p,
.clx-cta-section span {
  color: #FFFFFF !important;
}
.clx-cta-section {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}
.clx-cta-section .clx-cta-action-col {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px 0 0 !important;
}
.clx-cta-section .clx-cta-arrow {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
  margin-bottom: -5px !important;
  text-align: center !important;
}
.clx-cta-section .clx-cta-action-col > .elementor-widget-wrap {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  /* Center the REQUEST A PROJECT ESTIMATE button within its column
     (was flex-start, which left-aligned it inside the column and
     made it look offset to the right of the section visually). */
  justify-content: center !important;
}
.clx-cta-section .clx-cta-arrow img {
  width: 130% !important;
  height: auto !important;
  display: block !important;
  margin-left: -15% !important;
  border-radius: 12px !important;
}

/* CTA banner: push the CTA button to the bottom-right of the right
   column so it anchors to the section's black-bg floor instead of
   stacking tight under the desc. Applies on every page using the
   shared .clx-cta-section (DE, IT, DM, creative-design, about-us,
   culture-and-diversity, partnership, erp-services). The button is
   always the LAST text-editor widget inside the non-action column;
   margin-top:auto pushes it to the bottom, inline text-align:right
   on its <p> keeps it at the right end. */
.clx-cta-section .elementor-column:not(.clx-cta-action-col),
.clx-cta-section .elementor-column:not(.clx-cta-action-col) > .elementor-widget-wrap {
  align-self: stretch !important;
}
.clx-cta-section .elementor-column:not(.clx-cta-action-col) > .elementor-widget-wrap {
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: stretch !important;
}
.clx-cta-section .elementor-column:not(.clx-cta-action-col) .elementor-widget-text-editor:last-child {
  margin-top: auto !important;
}

/* =========================================================
   AI System Editorial Banner — sits between the "A.I. System
   Design Expertise" intro paragraph and the Intelligence &
   Data Layer card grid. Source: Claude Design export,
   AI System Editorial Banner.html. Full-bleed photo with a
   left-anchored navy scrim (no glass, no blur), single
   #FA4900 accent rule under the eyebrow.
   Scoped under .clx-ai-sysdesign-banner — won't leak.
   ========================================================= */

/* Wrapper widget — tight 16px above + below; CSS is the only spacing source
   (widget's data-side _margin was removed so it can't double up). */
.page-ai-software-application-development .elementor-element-aisysbnr01 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.page-ai-software-application-development .elementor-element-aisysbnr01 .elementor-widget-container {
  padding: 0 !important;
}

.clx-ai-sysdesign-banner {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
  background: #212529;  /* charcoal — replaces design's #1a2236 navy per your "no blue" pref */
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #FFFFFF;
  isolation: isolate;
  border-radius: 16px;  /* matches other glass cards on the page */
}
.clx-ai-sysdesign-banner *,
.clx-ai-sysdesign-banner *::before,
.clx-ai-sysdesign-banner *::after { box-sizing: border-box; }

.clx-ai-sysdesign-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.clx-ai-sysdesign-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
.clx-ai-sysdesign-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    #212529 0%,
    rgba(33, 37, 41, 0.94) 32%,
    rgba(33, 37, 41, 0.72) 50%,
    rgba(33, 37, 41, 0.20) 75%,
    rgba(33, 37, 41, 0.00) 100%
  );
}
.clx-ai-sysdesign-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 480px;
  padding: 64px 48px 64px 64px;
  max-width: 1200px;
}
.clx-ai-sysdesign-banner__copy {
  max-width: 560px;
}
.clx-ai-sysdesign-banner__eyebrow {
  display: inline-block;
  font-family: 'Cabin', 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 22px;
  padding: 0 0 10px;
  border-bottom: 2px solid #FA4900;
}
/* Heading needs body.page .elementor prefix to beat homepage.css's
   body.page .elementor h3 { color: var(--hp-dark) !important } at 0,2,2. */
body.page .elementor .clx-ai-sysdesign-banner h3.clx-ai-sysdesign-banner__heading,
body.page .elementor .clx-ai-sysdesign-banner .clx-ai-sysdesign-banner__heading {
  font-family: 'Cabin', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
  color: #FFFFFF !important;
  margin: 0 0 20px !important;
  text-wrap: pretty;
}
/* Font-family overrides — homepage.css has body.elementor-page
   .elementor-section * { font-family: var(--hp-font) !important } at 0,2,2.
   Match prefix so DM Sans body / Cabin eyebrow + trust-num override Cabin
   default for everything in elementor sections. */
body.elementor-page .elementor-section .clx-ai-sysdesign-banner__eyebrow,
body.elementor-page .elementor-section .clx-ai-sysdesign-banner__trust-num {
  font-family: 'Cabin', 'DM Sans', sans-serif !important;
}
body.elementor-page .elementor-section .clx-ai-sysdesign-banner__body,
body.elementor-page .elementor-section .clx-ai-sysdesign-banner__trust-label {
  font-family: 'DM Sans', sans-serif !important;
}
.clx-ai-sysdesign-banner p.clx-ai-sysdesign-banner__body,
.clx-ai-sysdesign-banner .clx-ai-sysdesign-banner__body {
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  margin: 0 0 28px !important;
  max-width: 520px;
}
/* Force the separator rule to render — WP/theme often hides or restyles
   <hr>. Spec all the box props with !important. */
.clx-ai-sysdesign-banner hr.clx-ai-sysdesign-banner__rule,
.clx-ai-sysdesign-banner .clx-ai-sysdesign-banner__rule {
  display: block !important;
  height: 1px !important;
  width: 100%;
  max-width: 520px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 0 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.clx-ai-sysdesign-banner__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  max-width: 560px;
}
.clx-ai-sysdesign-banner__trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.clx-ai-sysdesign-banner__trust-num {
  font-family: 'Cabin', 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.3px;
  color: #FFFFFF;
}
.clx-ai-sysdesign-banner__trust-num em {
  font-style: normal;
  color: #FA4900;
}
.clx-ai-sysdesign-banner__trust-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .4px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}
/* Narrow-context fallback — banner sits inside a 66% column on this page,
   so its inner padding/headline cramps before hitting the actual tablet
   breakpoint. Tighten padding + headline size between 960 and 1100px. */
@media (max-width: 1100px) {
  .clx-ai-sysdesign-banner__inner {
    padding: 56px 40px 56px 48px;
  }
  body.page .elementor .clx-ai-sysdesign-banner h3.clx-ai-sysdesign-banner__heading,
  body.page .elementor .clx-ai-sysdesign-banner .clx-ai-sysdesign-banner__heading {
    font-size: 30px !important;
  }
}
/* Tablet — keep the SAME horizontal-left scrim (no vertical bottom block).
   The dark area stays anchored to the left text region, image fully
   visible on the right. */
@media (max-width: 960px) {
  .clx-ai-sysdesign-banner {
    min-height: 420px;
  }
  .clx-ai-sysdesign-banner__scrim {
    background: linear-gradient(
      90deg,
      #212529 0%,
      rgba(33, 37, 41, 0.94) 38%,
      rgba(33, 37, 41, 0.72) 55%,
      rgba(33, 37, 41, 0.20) 78%,
      rgba(33, 37, 41, 0.00) 100%
    );
  }
  .clx-ai-sysdesign-banner__inner {
    min-height: 420px;
    padding: 48px;
  }
  .clx-ai-sysdesign-banner__heading {
    font-size: 30px;
  }
}
@media (max-width: 640px) {
  .clx-ai-sysdesign-banner {
    min-height: 440px;
  }
  .clx-ai-sysdesign-banner__inner {
    padding: 32px 24px 36px;
    min-height: 440px;
  }
  .clx-ai-sysdesign-banner__heading {
    font-size: 24px;
  }
  .clx-ai-sysdesign-banner__body {
    font-size: 15px;
  }
  .clx-ai-sysdesign-banner__trust {
    gap: 20px;
  }
}

/* =========================================================
   --aside variant — narrow vertical slot inside .svc-card-aside
   on /digital-engineering/ (and later /digital-marketing/).
   Image fills the box, scrim anchored to bottom so all copy
   reads against the dark bottom band. Trust stats stack vertically.
   ========================================================= */
.clx-ai-sysdesign-banner--aside {
  position: relative;
  display: flex;            /* banner is its own flex column so inner can stretch */
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 12px;         /* matches the 12px gap between partner-logo tiles above */
  border-radius: 12px;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__inner {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;           /* fills the full banner height so flex-end can pin the copy to the bottom */
  display: flex;
  align-items: flex-end;
  min-height: 0;
  padding: 28px 24px;
  max-width: 100%;
  width: 100%;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__copy {
  max-width: 100%;
  width: 100%;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__media,
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__scrim {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  aspect-ratio: auto !important;
}
/* Uniform full-height scrim — no gradient, no bands. Single dark wash
   over the whole image so the banner reads as one flat surface. */
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__scrim {
  background: rgba(33, 37, 41, 0.72);
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__eyebrow {
  font-size: 11px;
  margin-bottom: 14px;
  padding-bottom: 8px;
}
body.page .elementor .clx-ai-sysdesign-banner--aside h3.clx-ai-sysdesign-banner__heading,
body.page .elementor .clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__heading {
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}
.clx-ai-sysdesign-banner--aside p.clx-ai-sysdesign-banner__body,
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__body {
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
  max-width: 100%;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__rule {
  max-width: 100% !important;
  margin-bottom: 14px !important;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__trust {
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__trust-num {
  font-size: 18px;
}
.clx-ai-sysdesign-banner--aside .clx-ai-sysdesign-banner__trust-label {
  font-size: 10px;
}

/* =========================================================
   Architecture Decisions section — bullets (60%) + V2
   Layered Stack animation (40%) side-by-side. Animation
   from Claude Design export "AI Architecture Animations -
   Options.html" (V2Stack), converted to vanilla HTML/CSS/JS.
   Scoped under .clx-arch-row + .clx-arch-anim.
   ========================================================= */
.clx-arch-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.clx-arch-row__bullets { min-width: 0; }

/* ---------------------------------------------------------------
   ERP "AI adoption safeguards" — Approval Ledger animation.
   Sits in .clx-arch-row__anim slot. Compact compliance log: 6 rows,
   each = one safeguard, cycling PENDING → CHECKING → APPROVED.
   Header bar fills as rows clear. 12s loop. Reduced-motion freezes
   on 6/6 cleared. From Claude Design export "AI Safeguards -
   Approval Ledger.html". Scoped under .clx-erp-safeguards-ledger.
   --------------------------------------------------------------- */
.clx-erp-safeguards-ledger {
  /* Token block — same palette as .clx-arch-anim. Declared here too
     so the ledger doesn't depend on .clx-arch-anim being a sibling
     for variable resolution. */
  --clx-arch-label: #142533;
  --clx-arch-label-secondary: #898D90;
  --clx-arch-mute: #898D90;
  --clx-arch-line: #E8E8E8;
  --clx-arch-row-bg: #F8F8F8;
  --clx-arch-accent: #E8611A;
  --clx-arch-accent-dark: #C94E10;
  --loop: 12s;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  max-width: 460px;
  margin: 0 0 0 auto;  /* anchor right within column so it reaches design width */
}
.clx-erp-safeguards-ledger__viz {
  position: relative;
  aspect-ratio: 380 / 340;  /* taller — gives each row ~52px breathing room */
  background: #fff;
  border: 1px solid var(--clx-arch-line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.clx-erp-safeguards-ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--clx-arch-line);
  background: var(--clx-arch-row-bg);
}
.clx-erp-safeguards-ledger__head-label {
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
}
.clx-erp-safeguards-ledger__head-progress {
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--clx-arch-label);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.clx-erp-safeguards-ledger__bar {
  width: 72px;
  flex: 0 0 72px;
  height: 4px;
  background: var(--clx-arch-line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.clx-erp-safeguards-ledger__bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--clx-arch-accent);
  animation: clxLdgrBar var(--loop) cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes clxLdgrBar {
  0%      { width: 0; }
  6%      { width: 0; }
  10%     { width: 16.6%; }
  24%     { width: 33.3%; }
  38%     { width: 50%; }
  52%     { width: 66.6%; }
  66%     { width: 83.3%; }
  80%, 92% { width: 100%; }
  98%, 100% { width: 0; }
}
.clx-erp-safeguards-ledger__count b {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  color: var(--clx-arch-accent);
  display: inline-block;
  min-width: 6px;
}
.clx-erp-safeguards-ledger__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.clx-erp-safeguards-ledger__row {
  flex: 1;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--clx-arch-line);
  position: relative;
  overflow: hidden;
  animation: clxLdgrRowBg var(--loop) ease-in-out infinite;
}
.clx-erp-safeguards-ledger__row:last-child { border-bottom: none; }
@keyframes clxLdgrRowBg {
  0%, 8%   { background: #fff; }
  10%, 18% { background: #FFF6F1; }
  22%, 100% { background: #fff; }
}
.clx-erp-safeguards-ledger__row:nth-child(2) { animation-delay: calc(var(--loop) * .14); }
.clx-erp-safeguards-ledger__row:nth-child(3) { animation-delay: calc(var(--loop) * .28); }
.clx-erp-safeguards-ledger__row:nth-child(4) { animation-delay: calc(var(--loop) * .42); }
.clx-erp-safeguards-ledger__row:nth-child(5) { animation-delay: calc(var(--loop) * .56); }
.clx-erp-safeguards-ledger__row:nth-child(6) { animation-delay: calc(var(--loop) * .70); }
.clx-erp-safeguards-ledger__id {
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
}
.clx-erp-safeguards-ledger__name {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--clx-arch-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge style is driven by data-state attribute set from JS — avoids
   browser inconsistencies with `content` keyframe animations. */
.clx-erp-safeguards-ledger__badge {
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid var(--clx-arch-line);
  background: #fff;
  color: var(--clx-arch-mute);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.clx-erp-safeguards-ledger__badge[data-state="checking"] {
  color: var(--clx-arch-accent);
  border-color: var(--clx-arch-accent);
  background: #fff;
}
.clx-erp-safeguards-ledger__badge[data-state="approved"] {
  color: #fff;
  border-color: var(--clx-arch-accent);
  background: var(--clx-arch-accent);
}
.clx-erp-safeguards-ledger__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--clx-arch-line);
  border-radius: 8px;
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--clx-arch-label);
}
.clx-erp-safeguards-ledger__rail-label {
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
  white-space: nowrap;
}
.clx-erp-safeguards-ledger__rail-now {
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--clx-arch-label);
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .clx-erp-safeguards-ledger { max-width: 100%; }
  .clx-erp-safeguards-ledger__viz { max-height: 300px; }
  .clx-erp-safeguards-ledger__name { font-size: 14px; }
  .clx-erp-safeguards-ledger__id { font-size: 11px; }
  .clx-erp-safeguards-ledger__badge { font-size: 10px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .clx-erp-safeguards-ledger__row,
  .clx-erp-safeguards-ledger__bar::after { animation: none !important; }
  .clx-erp-safeguards-ledger__row { background: #fff !important; }
  .clx-erp-safeguards-ledger__badge {
    color: #fff !important;
    border-color: var(--clx-arch-accent) !important;
    background: var(--clx-arch-accent) !important;
  }
  .clx-erp-safeguards-ledger__bar::after { width: 100% !important; }
}
.clx-arch-row__anim { min-width: 0; display: flex; justify-content: center; align-items: center; }
@media (max-width: 960px) {
  .clx-arch-row { grid-template-columns: 1fr; gap: 28px; }
  .clx-arch-row__anim { order: 2; }
}

/* V2 Layered Stack animation slot */
/* CSS custom properties scoped to .clx-arch-anim — drive both SVG fills/strokes
   (via var() in inline attributes) and DOM color values. Aligned with site
   palette: --hp-dark, --hp-text, --hp-orange, --hp-border, --hp-light-bg. */
.clx-arch-anim {
  --clx-arch-label: #142533;
  --clx-arch-label-secondary: #898D90;
  --clx-arch-mute: #898D90;
  --clx-arch-line: #E8E8E8;
  --clx-arch-row-bg: #F8F8F8;
  --clx-arch-accent: #E8611A;
  --clx-arch-accent-dark: #C94E10;

  width: 100%;
  max-width: 380px;
  background: transparent;
  position: relative;
  font-family: 'Cabin', 'DM Sans', system-ui, sans-serif;
  box-shadow: none !important;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding-top: 0;
}
.clx-arch-anim__svg {
  display: block;
  max-height: 380px;
  width: 100%;
}
/* Bottom block: status + counter row, then a benefit caption beneath */
.clx-arch-anim__bottom {
  padding: 12px 0 0;
  pointer-events: none;
}
.clx-arch-anim__statusline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.clx-arch-anim__status {
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  color: var(--clx-arch-label);
  font-weight: 500;
  transition: opacity 600ms ease;
}
.clx-arch-anim__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.clx-arch-anim__counter {
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--clx-arch-accent);
  font-variant-numeric: tabular-nums;
}
.clx-arch-anim__unit {
  font-family: 'Cabin', sans-serif;
  font-size: 11px;
  color: #898D90;
  margin-left: 4px;
}
/* Caption is a soft peach pill — site's #FFE9E2 hero/badge tint, with the
   left edge squared off to carry an orange accent that ties to the v2
   highlight in the SVG. State-tinted: neutral grey on nominal, peach on
   swap/settled. */
.clx-arch-anim__caption {
  display: inline-block;
  font-family: 'Cabin', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--clx-arch-label);
  background: #FFE9E2;
  padding: 6px 12px 6px 14px;
  border-radius: 999px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-left: 3px solid var(--clx-arch-accent);
  margin: 10px 0 0;
  min-height: 1.6em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.25s ease, color 0.25s ease, border-left-color 0.25s ease;
}
.clx-arch-anim[data-state="nominal"]  .clx-arch-anim__caption,
.clx-arch-anim[data-state="nominal2"] .clx-arch-anim__caption {
  background: #F1F4F6;
  border-left-color: #9eabb5;
}
.clx-arch-anim[data-state="swap"]    .clx-arch-anim__caption,
.clx-arch-anim[data-state="settled"] .clx-arch-anim__caption {
  background: #FFE9E2;
  border-left-color: var(--clx-arch-accent);
}

/* Animated parts — driven by [data-state] attribute on .clx-arch-anim */
.clx-arch-anim__layer-original {
  transform: translateX(0);
  transition: transform 1500ms cubic-bezier(.65,.05,.36,1), opacity 1200ms ease;
}
.clx-arch-anim__layer-replacement {
  transform: translateX(300px);
  transition: transform 1500ms cubic-bezier(.65,.05,.36,1);
}
.clx-arch-anim__layer-replacement-stroke {
  transition: stroke 1200ms ease;
}
.clx-arch-anim__cursor {
  transform: translateY(80px);
  transition: transform 1500ms cubic-bezier(.65,.05,.36,1);
}

/* State: swap — original slides off, replacement slides in, cursor moves */
.clx-arch-anim[data-state="swap"] .clx-arch-anim__layer-original {
  transform: translateX(-300px);
}
.clx-arch-anim[data-state="swap"] .clx-arch-anim__layer-replacement {
  transform: translateX(0);
}
.clx-arch-anim[data-state="swap"] .clx-arch-anim__layer-replacement-stroke,
.clx-arch-anim[data-state="settled"] .clx-arch-anim__layer-replacement-stroke {
  stroke: var(--clx-arch-accent) !important;
}
.clx-arch-anim[data-state="swap"] .clx-arch-anim__cursor,
.clx-arch-anim[data-state="settled"] .clx-arch-anim__cursor,
.clx-arch-anim[data-state="nominal2"] .clx-arch-anim__cursor {
  transform: translateY(180px);
}

/* State: settled — original hidden, replacement at rest */
.clx-arch-anim[data-state="settled"] .clx-arch-anim__layer-original {
  transform: translateX(-300px);
  opacity: 0;
}
.clx-arch-anim[data-state="settled"] .clx-arch-anim__layer-replacement {
  transform: translateX(0);
}
/* State: nominal2 — replacement is now permanent baseline */
.clx-arch-anim[data-state="nominal2"] .clx-arch-anim__layer-original {
  transform: translateX(-300px);
  opacity: 0;
}
.clx-arch-anim[data-state="nominal2"] .clx-arch-anim__layer-replacement {
  transform: translateX(0);
}

/* Reduced motion — disable all transitions */
@media (prefers-reduced-motion: reduce) {
  .clx-arch-anim__layer-original,
  .clx-arch-anim__layer-replacement,
  .clx-arch-anim__layer-replacement-stroke,
  .clx-arch-anim__cursor {
    transition: none !important;
  }
  .clx-arch-anim__svg circle animate { display: none; }
}

/* =========================================================
   AI Platforms & Infrastructure tool cards — glassmorphic
   treatment matching .svc-badge-card on services page.
   Applied to .clx-ai-tool-card (Elementor column class) on
   the ai-software page. Tools: 6 Foundational Models,
   6 Orchestration, 5 Vector DBs, 4 ML Frameworks, 3 MLOps,
   5 Inference. ~29 cards total, 3 per row.
   ========================================================= */
/* Match .svc-badge-card surface treatment exactly so the AI tool cards
   read as the same family as the services security badges. */
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card > .elementor-element-populated {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 20px !important;
  padding: 24px 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.25s ease;
  height: 100% !important;
  /* Override Elementor's per-post align-items: flex-start so children center */
  align-content: stretch !important;
  align-items: stretch !important;
}
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card > .elementor-element-populated:hover {
  border-color: rgba(232, 97, 26, 0.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* Force every widget inside the card to span the full card width so logo
   centering + text alignment apply to the visible content area, not a
   narrower flex-start child. */
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget {
  width: 100% !important;
}

/* Logo zone — fixed 60px height area, centered horizontally + vertically */
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-image,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-image .elementor-widget-container {
  width: 100% !important;
  text-align: center !important;
}
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-image {
  margin-bottom: 16px !important;
}
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-image .elementor-widget-container {
  min-height: 72px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-image img {
  width: 150px !important;
  height: 60px !important;
  max-width: 150px !important;
  max-height: 60px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  /* Knock out white background pixels in logo PNGs that don't ship with
     proper alpha. Multiply blends light pixels into the card surface so
     they read as transparent without affecting dark logo strokes/letters. */
  mix-blend-mode: multiply;
  background: transparent !important;
}

/* Text alignment — left, matches .svc-badge-card. Applies to ALL inner
   text editors and any inline span/p children (some text editors wrap
   content in <span style="font-weight: 400">) */
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor,
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor .elementor-widget-container,
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor p,
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor span,
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor h3,
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor h4 {
  text-align: center !important;
}

/* Tool NAME styling intentionally removed — tool titles were removed from
   each card, so the only widget left in the first nested section is the
   description. The remaining h4/h3/b/strong/span selectors below still
   apply if a title is ever reintroduced; the p selector was striking the
   description and rendering it as a giant heading. */
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card > .elementor-element-populated > .elementor-section:nth-of-type(1) .elementor-widget-text-editor h4,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card > .elementor-element-populated > .elementor-section:nth-of-type(1) .elementor-widget-text-editor h3,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card > .elementor-element-populated > .elementor-section:nth-of-type(1) .elementor-widget-text-editor h4 b,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card > .elementor-element-populated > .elementor-section:nth-of-type(1) .elementor-widget-text-editor h4 strong,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card > .elementor-element-populated > .elementor-section:nth-of-type(1) .elementor-widget-text-editor h4 span {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;
  color: #1a2236 !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}

/* Tool DESCRIPTION — match System & Operations Layer card description
   (.clx-partner-card .elementor-icon-box-description) exactly. Tool name
   was removed earlier so the only remaining text widget is the description.
   Targets every possible nesting point because the name section was
   removed and Elementor sometimes promotes the remaining section to be
   the only one (so :nth-of-type rules can be brittle). */
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor .elementor-widget-container,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor p,
body:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-widget-text-editor span {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 26px !important;
  color: #898D90 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* Inner section wrappers Elementor renders around text widgets — strip
   their default margins/padding so cards have consistent vertical rhythm. */
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-inner-section {
  margin: 0 !important;
}
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-inner-section > .elementor-container {
  padding: 0 !important;
}
:is(.page-ai-software-application-development, .page-erp-services) .clx-ai-tool-card .elementor-inner-section > .elementor-container > .elementor-column > .elementor-element-populated {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Card-row spacing — every section that contains tool cards gets the same
   margin-top, so vertical gaps between rows are consistent. */
:is(.page-ai-software-application-development, .page-erp-services) section.elementor-section:has(> .elementor-container > .elementor-column.clx-ai-tool-card) {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}
/* Stretch all 3 cards in a row to equal height */
:is(.page-ai-software-application-development, .page-erp-services) section.elementor-section:has(> .elementor-container > .elementor-column.clx-ai-tool-card) > .elementor-container {
  align-items: stretch !important;
  gap: 16px !important;
}

/* =========================================================
   Engagement Models banner — replaces the standalone AI engineers
   image with a 2-column block (copy + 4 stat tiles on the left,
   photo + floating chip on the right). Inherits page H3/p
   typography; reuses 20px card radius and brand orange #FA4900.
   Scoped under .clx-eng-banner so it cannot leak.
   ========================================================= */
.clx-eng-banner {
  background: #ffffff;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: stretch;
  font-family: inherit;
  color: inherit;
  margin-top: 2vw;
}
.clx-eng-banner .clx-eb-left {
  display: flex;
  flex-direction: column;
}
.clx-eng-banner .clx-eb-h {
  margin: 0 0 14px;
}
.clx-eng-banner .clx-eb-h em {
  font-style: normal;
  color: inherit;
}
/* Bumped-specificity copy of the sub rule so homepage.css's
   body.page .elementor h3 (0,2,2) and body.elementor-page .elementor-section *
   (0,2,1) cannot win over it on inner pages. */
body.page .elementor .clx-eng-banner .clx-eb-sub {
  margin: 0 0 24px !important;
  color: #4A4A4A !important;
}
.clx-eng-banner .clx-eb-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
body.page .elementor .clx-eng-banner .clx-eb-stat {
  background: rgba(248, 248, 248, .95);
  border-radius: 20px;
  padding: 18px 20px;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Bumped-specificity stat number rule. homepage.css forces
   body.page .elementor h3 { color, font-family } at (0,2,2). Need (0,3,x)
   or higher to win. Mirrors the existing `body.page .elementor` prefix
   pattern used by the System Design banner heading. */
body.page .elementor .clx-eng-banner .clx-eb-num {
  margin: 0 !important;
  color: #FA4900 !important;
  font-family: 'Cabin', sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -1.2px !important;
  text-align: center !important;
}
body.page .elementor .clx-eng-banner .clx-eb-lbl {
  margin: 8px 0 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: #1C1E21 !important;
  text-align: center !important;
}
.clx-eng-banner .clx-eb-photo {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #EADBCD;
  height: 100%;
  min-height: 0;
}
.clx-eng-banner .clx-eb-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default center — the previous 65% offset shifted the focal point
     right of center which clipped the laptop screen edge awkwardly. */
  object-position: center center;
  display: block;
}
.clx-eng-banner .clx-eb-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: 88%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .18);
  z-index: 3;
}
.clx-eng-banner .clx-eb-chip p,
.clx-eng-banner .clx-eb-chip span {
  margin: 0;
}
.clx-eng-banner .clx-eb-chip__dot {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Light ember tint + crisp inline SVG arrow centered. Replaces the
     prior ↗ Unicode glyph approach which left the arrow floating
     up-left because of the glyph's natural metric bias. SVG ensures
     pixel-perfect centering at any DPI. */
  background-color: rgba(250, 73, 0, .12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FA4900' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11L11 5'/><path d='M6 5h5v5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  /* Hide the inline ↗ text node from the markup — SVG bg now carries
     the visual. Markup stays unchanged so any future a11y/text
     rendering still has the glyph for screen readers. */
  font-size: 0;
  color: transparent;
}
/* QA partner-logo strip — fill the tile edge-to-edge for the SAFE
   certification badge (background is white and the badge is a small
   stamp inside it — at the default 80% max-width it renders nearly
   invisible). Scoped to QA page so DE/ET pages aren't affected. */
body.page-qa-software-testing .svc-cards-grid .clx-logo-tile:has(img[src*="safe6-certified"]) {
  padding: 0;
  overflow: hidden;
}
body.page-qa-software-testing .svc-cards-grid .clx-logo-tile img[src*="safe6-certified"] {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 16px;
}

/* QA engagement comparison table — pin each cell's GET IN TOUCH link
   block to the bottom-right of its cell, so cell descriptions can vary
   in length without the CTA jumping around. Page-scoped (QA only).
   Description text flows from top as before; the <p> holding the link
   is absolutely positioned in the cell's reserved bottom area. */
body.page-qa-software-testing .clx-eng-table-6 tbody td {
  position: relative;
  padding-bottom: 56px;
}
body.page-qa-software-testing .clx-eng-table-6 tbody td > p:last-child {
  position: absolute;
  bottom: 16px;
  right: 18px;
  left: 18px;
  margin: 0;
  text-align: right;
}

/* QA page only — center the image pill horizontally instead of the
   default left-pinned position, and keep the text on a single line so
   the chip sizes to its content (instead of wrapping inside the
   default 88% max-width clamp). Scoped via body.page-qa-software-testing
   so DE / AI / other pages keep their original left-pin alignment. */
body.page-qa-software-testing .clx-eng-banner .clx-eb-chip {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  max-width: none;
  white-space: nowrap;
}
/* On very narrow viewports the chip would overflow the photo box —
   let it wrap back to a tight 2-line layout under 480px. */
@media (max-width: 480px) {
  body.page-qa-software-testing .clx-eng-banner .clx-eb-chip {
    white-space: normal;
    max-width: 88%;
  }
}

@media (max-width: 900px) {
  .clx-eng-banner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .clx-eng-banner .clx-eb-photo {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 540px) {
  .clx-eng-banner .clx-eb-stats {
    grid-template-columns: 1fr;
  }
}
/* Engagement table breathing room — matches the page's 2vw section rhythm
   so the table sits below the engagement banner with consistent spacing. */
:is(.page-ai-software-application-development, .page-erp-services) #engagement-table-wrap {
  margin-top: 2vw;
}

/* ============================================================
   AI page — Trade Five Minutes / A.I. Cost Map banner.
   Mirrors the partnership "Want An Expert..." banner. Image is
   bottom-anchored at ~83% of banner height to match partnership
   proportions in the AI page's narrower content column.
   Reuses .clx-lc for the CTA (orange + arrow).
   Scoped under .clx-trade-section / .clx-trade-banner — no leak.
   ============================================================ */
.clx-trade-section {
  background: #121212 !important;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 2vw;
}
.clx-trade-section .elementor-container {
  padding: 0 !important;
  max-width: 100% !important;
  display: block !important;
}
/* Strip every wrapper between the section and the HTML widget so the
   image actually kisses the section's bottom edge. Elementor adds default
   padding on the section, .elementor-element-populated, .elementor-widget-wrap,
   the html widget container, etc. — clear them all. */
.clx-trade-section,
.clx-trade-section > .elementor-container,
.clx-trade-section .elementor-column,
.clx-trade-section .elementor-element-populated,
.clx-trade-section .elementor-widget-wrap,
.clx-trade-section .elementor-widget-html,
.clx-trade-section .elementor-widget-html > .elementor-widget-container {
  padding: 0 !important;
}
.clx-trade-section .elementor-widget-html,
.clx-trade-section .elementor-widget-html > .elementor-widget-container {
  margin: 0 !important;
}
.clx-trade-banner {
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: end;
  color: #fff;
}
.clx-trade-banner .clx-tb-img {
  align-self: end;
  line-height: 0;
}
.clx-trade-banner .clx-tb-img img {
  display: block;
  width: 380px;
  height: auto;
  max-width: none;
}
.clx-trade-banner .clx-tb-text {
  padding: 20px 32px 20px 16px;
  align-self: center;
}
body.page .elementor .clx-trade-banner .clx-tb-h,
.clx-trade-banner .clx-tb-h {
  color: #ffffff !important;
  margin: 0 0 14px;
}
/* Lock both .clx-tb-h (trade banner) and .clx-eb-h (engagement banner)
   headings to identical Cabin 32/600 so they read as a matched set
   regardless of theme/page H3 defaults that vary by widget context. */
body.page .elementor .clx-trade-banner .clx-tb-h,
body.page .elementor .clx-eng-banner .clx-eb-h {
  font-family: 'Cabin', sans-serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;
}
.clx-trade-banner .clx-tb-sub {
  color: #ffffff !important;
  margin: 0 0 22px;
}
.clx-trade-banner .clx-tb-cta-wrap {
  text-align: right;
}
@media (max-width: 760px) {
  .clx-trade-banner {
    grid-template-columns: 1fr;
  }
  .clx-trade-banner .clx-tb-img img {
    width: 240px;
    margin: 0 auto;
  }
  .clx-trade-banner .clx-tb-text {
    padding: 8px 24px 24px;
    text-align: center;
  }
  .clx-trade-banner .clx-tb-cta-wrap {
    text-align: center;
  }
}

/* ---------------------------------------------------------
   AI Software & Application Development — page fixes
   --------------------------------------------------------- */

/* 1) "Your A.I. Cost Map In 5 Minutes" banner: align the bottom edge of
      the people image with the bottom of the black banner background. */
.clx-trade-section {
  display: flex !important;
  align-items: flex-end !important;
}
.clx-trade-section > .elementor-container {
  width: 100%;
  display: flex !important;
  align-items: flex-end !important;
}
.clx-trade-section .elementor-element-a1trcol,
.clx-trade-section .elementor-element-03fe9df,
.clx-trade-section .elementor-element-erpcostc1 {
  align-self: flex-end !important;
}
.clx-trade-section .elementor-element-a1trcol > .elementor-widget-wrap,
.clx-trade-section .elementor-element-03fe9df > .elementor-widget-wrap,
.clx-trade-section .elementor-element-erpcostc1 > .elementor-widget-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: flex-end !important;
}
.clx-trade-section .clx-trade-banner {
  align-items: end !important;
}
.clx-trade-section .clx-tb-img {
  display: flex;
  align-items: flex-end;
  line-height: 0;
}
.clx-trade-section .clx-tb-img img {
  display: block;
  vertical-align: bottom;
  margin-bottom: 0 !important;
}

/* 2) "Why Companies Choose Clixlogix for A.I. Development": vertically
      center the 7 numbered bullets so they line up with the 8 tabs on
      the right (4 logo banners + 4 stat cards). */
.elementor-element-cbe69dd > .elementor-widget-wrap.elementor-element-populated {
  align-content: center !important;
  align-items: center !important;
}

/* =========================================================
   Creative & Design — sec[4] heading + Da Vinci animation
   2-column .svc-cards-heading: text left, SVG stage right.
   Scoped to .page-creative-design so IT Consulting's
   existing 3-col grid + 52px H2 stay untouched.
   Animation classes (.s1-*, .tx, .tx-mono, .bp-grid,
   .sk-*, .stage-svg) are brand-new and only ever match
   on this page (markup lives only in widget 7ab7974 of
   the Creative & Design page).
   ========================================================= */
.page-creative-design .svc-cards-heading {
  max-width: 1080px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 40px;
}
.page-creative-design .svc-cards-heading-text {
  grid-column: auto;
  min-width: 0;
}
.page-creative-design .svc-heading-kicker {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #FA4900;
  margin: 0 0 14px;
}
/* Title + paragraph typography inherit the global .svc-heading-title /
   .svc-heading-desc rules (52px H2 / 18px body) — only the layout is
   overridden on this page. */

.svc-heading-stage {
  --chalk: #142533;
  --chalk-dim: #7A8B9A;
  --chalk-faint: #E1E6EB;
  --artifact-fill: #F4F6F8;
  --ember: #FA4900;
  --loop-1: 18s;
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 430;
  background: transparent;
  overflow: visible;
}
.stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.s1-elem {
  animation-duration: var(--loop-1);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.5,.05,.4,1);
}
.s1-stroke { stroke: var(--chalk); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s1-stroke-dim { stroke: var(--chalk-dim); fill: none; stroke-linecap: round; }
.bp-grid line { stroke: var(--chalk-faint); stroke-width: 1; stroke-dasharray: 1 5; opacity: 1; }
.sk-dim { stroke: var(--chalk-dim); fill: none; stroke-linecap: round; }
.sk-faint { stroke: var(--chalk-faint); fill: none; }
.tx { fill: var(--chalk); font-family: 'Cabin', sans-serif; font-weight: 700; }
.tx-mono { fill: var(--chalk-dim); font-family: 'DM Mono', ui-monospace, monospace; font-weight: 400; }

@keyframes s1-pA { 0%,3%{stroke-dashoffset:var(--len,1000);opacity:0} 10%{opacity:1} 15%{stroke-dashoffset:0;opacity:1} 72%{stroke-dashoffset:0;opacity:1} 78%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes s1-pB { 0%,18%{stroke-dashoffset:var(--len,1000);opacity:0} 25%{opacity:1} 30%{stroke-dashoffset:0;opacity:1} 72%{stroke-dashoffset:0;opacity:1} 78%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes s1-pC { 0%,28%{stroke-dashoffset:var(--len,1000);opacity:0} 34%{opacity:1} 38%{stroke-dashoffset:0;opacity:1} 72%{stroke-dashoffset:0;opacity:1} 78%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes s1-pD { 0%,40%{stroke-dashoffset:var(--len,1000);opacity:0} 46%{opacity:1} 50%{stroke-dashoffset:0;opacity:1} 72%{stroke-dashoffset:0;opacity:1} 78%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes s1-pE { 0%,50%{stroke-dashoffset:var(--len,1000);opacity:0} 56%{opacity:1} 60%{stroke-dashoffset:0;opacity:1} 72%{stroke-dashoffset:0;opacity:1} 78%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes s1-pF { 0%,58%{opacity:0;transform:translateY(2px)} 66%{opacity:1;transform:translateY(0)} 72%{opacity:1;transform:translateY(0)} 78%,100%{opacity:0;transform:translateY(0)} }
.s1-a { animation-name: s1-pA; }
.s1-b { animation-name: s1-pB; }
.s1-c { animation-name: s1-pC; }
.s1-d { animation-name: s1-pD; }
.s1-e { animation-name: s1-pE; }
.s1-f { animation-name: s1-pF; }

.s1-center {
  fill: var(--ember);
  opacity: 0;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: s1Center var(--loop-1) ease-out infinite;
}
@keyframes s1Center { 0%{opacity:0;transform:scale(.4)} 2%{opacity:1;transform:scale(1.4)} 5%,72%{opacity:1;transform:scale(1)} 78%,100%{opacity:0;transform:scale(1)} }

.s1-sweep {
  fill: var(--ember);
  opacity: 0;
  transform-origin: left center;
  transform-box: fill-box;
  animation: s1Sweep var(--loop-1) cubic-bezier(.3,0,.3,1) infinite;
}
@keyframes s1Sweep { 0%,64%{opacity:0;transform:scaleX(0)} 66%{opacity:.32;transform:scaleX(0)} 72%{opacity:.32;transform:scaleX(1)} 74%{opacity:0;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(1)} }

.s1-final { opacity: 0; animation: s1Final var(--loop-1) ease-out infinite; }
@keyframes s1Final { 0%,72%{opacity:0} 76%{opacity:1} 94%{opacity:1} 100%{opacity:0} }

.s1-tick { stroke: var(--ember); stroke-width: 1.4; stroke-linecap: round; }
.s1-foot-method { font-family: 'Cabin', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1.6px; fill: var(--chalk); text-transform: uppercase; }
.s1-foot-l { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; fill: var(--chalk-dim); }
.s1-foot-r { font-family: 'Cabin', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 1.4px; fill: var(--ember); text-transform: uppercase; }

.s1-blob-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: s1BlobBreathe 4s ease-in-out infinite;
}
@keyframes s1BlobBreathe { 0%,100%{transform:scale(.95)} 50%{transform:scale(1.05)} }

.s1-blob-drift {
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  animation: s1BlobDrift 11s ease-in-out infinite;
}
@keyframes s1BlobDrift { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(-4%,2.5%) scale(1.06)} 50%{transform:translate(3.5%,-4%) scale(.96)} 75%{transform:translate(-1.5%,4.5%) scale(1.03)} }

.s1-blob-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: s1BlobGlowPulse 9s ease-in-out infinite;
}
@keyframes s1BlobGlowPulse { 0%,100%{transform:scale(.95);opacity:.7} 50%{transform:scale(1.08);opacity:1} }

@media (max-width: 960px) {
  .page-creative-design .svc-cards-heading {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 560px) {
  .stage-svg .tx { font-size: 14px; }
  .stage-svg .tx-mono { font-size: 13px; }
  .stage-svg text.s1-foot-method,
  .stage-svg text.s1-foot-l,
  .stage-svg text.s1-foot-r { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .s1-elem, .s1-center, .s1-sweep, .s1-final,
  .s1-blob-core, .s1-blob-drift, .s1-blob-glow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .s1-sweep { display: none; }
  .s1-final { opacity: 1; }
}