/* clx-cost-curves — Two-curves visual for the DE service-cards section.
   Restyled to match the Culture & Diversity "Powered by Difference, Driven
   by Belonging" animation visual language: transparent bg, Cabin everywhere,
   black text, FA4900 accent. Component-scoped to .clx-cost-curves. */

.clx-cost-curves {
  /* Site-standard peach mist gradient — matches .clx-belonging-* on
     /culture-and-diversity/ and .clx-intelligence-belt on DM, so all
     animated diagrams across the site share the same backdrop. */
  background: linear-gradient(180deg, #FFF6F1 0%, #FFFFFF 100%);
  border: none;
  border-radius: 20px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  /* Center the readout + chart together as a unit so the pair sits in
     the vertical middle of the peach panel. gap:0 keeps the readout
     flush to the chart so it reads as a helper line on top of the
     graph, not as a separate header row floating above it. */
  justify-content: center;
  gap: 0;
  width: 100%;
  height: auto;
  /* Bumped from 432px to 520px to match clx-intelligence-belt on DM —
     same row rhythm across DE / DM. Mobile scales down at line 545
     (.clx-cost-curves { min-height: 380px } stays as is). */
  min-height: 520px;
  overflow: visible;
  position: relative;
}

.clx-cost-curves__svg {
  width: 100%;
  /* No flex grow — let the SVG be its natural rendered height so the
     readout above stays anchored. justify-content:center on the
     parent handles the vertical placement. */
  flex: 0 0 auto;
  display: block;
  background: transparent;
}

/* Hide the eyebrow heading "Fig. — Cost per feature, indexed" and the
   caption "Five phases. Cumulative effect." */
.clx-cost-curves__eyebrow,
.clx-cost-curves__caption { display: none; }

.clx-cost-curves__meta {
  border-bottom: none;
  /* Right padding 10.3% so the readout's right edge aligns with the
     chart axis right edge (viewBox x=680 of 758 ≈ 89.7%). Without this
     the readout extends ~50px further right than the chart curves do.
     Bottom padding zeroed so the readout sits flush above the chart. */
  padding: 4px 10.3% 0 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
}

.clx-cost-curves__readout {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 22px;
}

.clx-cost-curves__rd-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.clx-cost-curves__rd-label {
  font-family: "Cabin", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #000;
  text-transform: uppercase;
}
.clx-cost-curves__rd-val {
  font-family: "Cabin", sans-serif;
  color: #000;
}
.clx-cost-curves__rd-row--accent .clx-cost-curves__rd-label,
.clx-cost-curves__rd-row--accent .clx-cost-curves__rd-val {
  color: #FA4900;
}

/* All in-chart text uses Cabin to match the .svc-card-desc body copy,
   sized up for legibility */
.clx-cost-curves__axis-lbl {
  font-family: "Cabin", sans-serif;
  font-size: 14px;
  font-weight: 400;
  fill: #000;
}
.clx-cost-curves__phase-num {
  font-family: "Cabin", sans-serif;
  font-size: 13px;
  font-weight: 400;
  fill: #000;
  transition: fill 200ms;
}
.clx-cost-curves__phase-name {
  font-family: "Cabin", sans-serif;
  font-size: 15px;
  font-weight: 400;
  fill: #000;
  transition: 200ms;
}
/* Axis titles — bold, slightly smaller than phase names, so the reader
   immediately reads "what is plotted" before scanning the numbers. */
.clx-cost-curves__axis-title {
  font-family: "Cabin", sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #142533;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.clx-cost-curves [data-cc-phase].is-active .clx-cost-curves__phase-num {
  fill: #FA4900;
  font-weight: 500;
}
.clx-cost-curves [data-cc-phase].is-active .clx-cost-curves__phase-name {
  fill: #000;
  font-weight: 600;
}

.clx-cost-curves__curve-lbl {
  font-family: "Cabin", sans-serif;
  font-size: 13px;
  font-weight: 400;
  fill: #000;
  letter-spacing: 0;
}
.clx-cost-curves__curve-lbl--accent {
  fill: #FA4900;
  font-weight: 500;
}

/* DE-only layout: 50/50 columns + vertical centering + breathing room.
   Scoped tightly to DE post ids so /services/ stays untouched.
   margin-bottom override: site-wide .svc-cards-heading { margin-bottom: 80px }
   creates a big gap between the cost-curves heading row and the next H3 on
   DE — pull it down so the new "Digital Engineering Services We Deliver"
   heading sits closer. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-heading,
body.page-id-60363 .svc-cards-heading,
body.page-digital-marketing .svc-cards-heading,
body:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .svc-cards-heading {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  margin-bottom: 24px;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-heading-text,
body.page-id-60363 .svc-cards-heading-text,
body.page-digital-marketing .svc-cards-heading-text,
body:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) .svc-cards-heading-text {
  grid-column: span 1;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) #services-cards,
body.page-id-60363 #services-cards,
body.page-digital-marketing #services-cards,
body:is(.page-it-consulting-service, .page-creative-design, .page-emerging-technologies) #services-cards {
  padding-top: 56px;
  /* mirrors .svc-cards-heading { margin-bottom: 80px } on /services/ —
     creates the same end-of-cards breathing room before the next section. */
  padding-bottom: 80px;
}

/* === Digital Engineering Services Grid layout ============================
   Tile sizes are intentional: 184×138 logo tiles match the OpenAI partner
   logo's intrinsic 1.34 aspect ratio so it fills edge-to-edge. Other logos
   (wider) sit centered inside via object-fit: contain. Stat tiles 184×176.
   These rules only fire on /digital-engineering/ because this stylesheet is
   conditionally enqueued for that page.
   ========================================================================= */

.svc-cards-grid {
  grid-template-columns: 1fr 1fr 360px;
  gap: 24px;
}

/* Pull header padding back so card titles fit on one line in the narrower
   left/middle columns (no icon area in this layout). */
.svc-cards-grid .svc-card .svc-card-header {
  padding-right: 20px;
}

/* Third cell stretches to match the AI/ERP text cards' height. The 52px
   top margin matches the .svc-cards-grid > .svc-card top margin (icon
   overflow compensation), so the logo stack starts at the same vertical
   line as the AI / ERP card content instead of breaching above them. */
.svc-cards-grid .svc-card-aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin-top: 52px;
}

/* Logo grid: 2 cols × 3 rows of 170×128 tiles, 12px gap (height 408px). */
.svc-cards-grid .svc-card-aside .clx-logo-grid {
  grid-template-columns: 170px 170px;
  grid-template-rows: 128px 128px 128px;
  grid-auto-rows: 128px;
  gap: 12px;
  place-content: start stretch;
  flex: 0 0 auto;
  height: 408px;
}

/* Stats grid: 2x2 of 170×176 tiles, 12px gap. */
.svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats {
  grid-template-columns: 170px 170px;
  grid-template-rows: 176px 176px;
  grid-auto-rows: 176px;
  gap: 12px;
  place-content: end center;
  flex: 0 0 auto;
  height: 364px;
}

/* DM-only flex aside: row height adapts to whatever DM cards give it,
   tiles maintain 4:3 aspect (matches the partner-badge artwork) so
   logos fill their tile edge-to-edge regardless of cell size. Tile
   centers in its cell when cell aspect differs from 4:3. */
/* Aside flex: logo grid sits at top of column (aligned with card top edge),
   and the banner placeholder below it absorbs the remaining stretched
   height via flex:1 — so the aside reaches the bottom of the row without
   awkward whitespace. */
body.page-digital-marketing .svc-cards-grid .svc-card-aside {
  justify-content: flex-start !important;
}
body.page-digital-marketing .svc-cards-grid .svc-card-aside .clx-logo-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  flex: 0 0 auto !important;
  width: 100%;
  height: auto !important;
}
body.page-digital-marketing .svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  flex: 0 0 auto !important;
  width: 100%;
  height: auto !important;
}
body.page-digital-marketing .svc-cards-grid .clx-logo-tile {
  /* Keep the badge artwork aspect (4:3) so the logo fills the tile
     edge-to-edge with no internal letterbox. The aside's vertical
     overflow is absorbed by the surrounding flex container, not by
     stretching tiles taller than their content can fill. */
  width: auto !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  max-height: 100%;
  place-self: center;
  margin: 0;
}
body.page-digital-marketing .svc-cards-grid .svc-stat-black {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
}


/* Logo tile: fixed 170×128, no padding so logos fill edge-to-edge.
   Border + shadow inherit from the existing :is(.page-…) rule. */
.svc-cards-grid .clx-logo-tile {
  width: 170px;
  height: 128px;
  padding: 0;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Default logo image: capped + centered with breathing room (AI page
   default treatment, like google-ai-partner). Prevents wide/squat logos
   from looking oversized when scaled to fill the tile. */
.svc-cards-grid .clx-logo-tile img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 80px;
  object-fit: contain;
  object-position: center;
  padding: 0;
  border-radius: 0;
  display: block;
}

/* Banner-aspect images (1.34 aspect ratio, intrinsic 2400×1792) fill the
   tile edge-to-edge — the tile aspect (170×128 ≈ 1.33) matches them. */
.svc-cards-grid .clx-logo-tile:has(img[src*="openai-services-partner"]),
.svc-cards-grid .clx-logo-tile:has(img[src*="microsoft-partner-clixlogix"]),
.svc-cards-grid .clx-logo-tile:has(img[src*="erp-partner"]),
.svc-cards-grid .clx-logo-tile:has(img[src*="linux-foundation-member"]) {
  padding: 0;
  overflow: hidden;
}
.svc-cards-grid .clx-logo-tile img[src*="openai-services-partner"],
.svc-cards-grid .clx-logo-tile img[src*="microsoft-partner-clixlogix"],
.svc-cards-grid .clx-logo-tile img[src*="erp-partner"],
.svc-cards-grid .clx-logo-tile img[src*="linux-foundation-member"] {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 16px;
}

/* DM stats-slot logos all fill their tile (same behavior as the DE
   partner badges above). Page-scoped so the per-filename allowlist on
   DE stays the source of truth for that page. No border-radius on the
   IMG — the partner badges (SEMrush, Bing, HubSpot) have their own
   rounded corners drawn into the artwork; adding CSS radius on top
   clips into the badge edges. The tile itself still has 16px radius
   so the outer card stays rounded. */
body.page-digital-marketing .svc-cards-grid .clx-logo-tile img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}

/* "Before AI:", "With AI Assisted Delivery:", "Specialities:" labels —
   force bold in case an upstream reset weakens the <strong> default. */
.svc-cards-grid .svc-card-desc strong,
.svc-cards-grid .svc-card-specs-label {
  font-weight: 700 !important;
  color: #142533;
}

/* CTA banner heading: force white. The site-wide
   `body:not(.home) h2.title.main-heading { color: #142533 !important }`
   rule beats the existing .clx-cta-section white rule because it sits later
   in the file with equal specificity. Adding a body.page-id prefix bumps
   specificity so this wins regardless of source order. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cta-section h2.title.main-heading,
body.page-id-60363 .clx-cta-section h2.title.main-heading,
body.page-digital-marketing .clx-cta-section h2.title.main-heading {
  color: #FFFFFF !important;
}

/* Engagement-models banner: bg transparent on DE so the section's gray
   shows through, with the 4 stat boxes flipped to white. Restored after
   accidental revert. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element-deeng1 .clx-eng-banner,
body.page-id-60363 .elementor-element-deeng1 .clx-eng-banner,
body.page-digital-marketing .elementor-element-deeng1 .clx-eng-banner {
  background: transparent !important;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element-deeng1 .clx-eng-banner .clx-eb-stat,
body.page-id-60363 .elementor-element-deeng1 .clx-eng-banner .clx-eb-stat,
body.page-digital-marketing .elementor-element-deeng1 .clx-eng-banner .clx-eb-stat {
  background: #FFFFFF !important;
}


/* Engagement table breathing room — DE table now uses the HWW markup
   (.clx-eng-table-6, no anchor id), so the AI-page rule for
   #engagement-table-wrap doesn't apply. Re-apply the same 2vw gap on the
   new selector. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-table-6,
body.page-id-60363 .clx-eng-table-6,
body.page-digital-marketing .clx-eng-table-6 {
  margin-top: 2vw;
}

/* CTA inside the engagement table — match the AI-page convention
   (.clx-eng-table-ai .clx-lc { font-size: 14px }) so the link reads at
   the same scale as on /ai-software-application-development/. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-table-6 .clx-lc,
body.page-id-60363 .clx-eng-table-6 .clx-lc,
body.page-digital-marketing .clx-eng-table-6 .clx-lc {
  font-size: 14px;
}

/* Right-align every CTA inside the engagement table (the only <p> in each
   cell wraps the .clx-lc link). */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-table-6 tbody td > p,
body.page-id-60363 .clx-eng-table-6 tbody td > p,
body.page-digital-marketing .clx-eng-table-6 tbody td > p {
  text-align: right;
  margin-bottom: 0;
}

/* Teams section padding — section was inserted with 100px top padding via
   the migration, which reads as too much against the orange CTA banner above.
   Pull it down to match the site's 56/56 major-section rhythm. */
.elementor-element-deteams1 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* Teams section: heading on the left, intro on the right, vertically
   aligned. Collapses to a single column on phones. Implicitly scoped to
   /digital-engineering/ — this stylesheet is only enqueued on that page. */
.clx-de-teams-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1132px;
  margin: 0 auto 40px;
  padding: 0 20px;
}
/* Force 32px on the teams heading — site-wide
   `body:not(.home) h2.title.main-heading { font-size: 52px !important }`
   would otherwise force 52px and overflow the half-column. */
.clx-de-teams-head h2,
.clx-de-teams-head h2.title.main-heading {
  margin: 0;
  font-size: 32px !important;
  line-height: 1.15 !important;
}
.clx-de-teams-head p { margin: 0; }
/* Hide the forced line break on phones so the heading wraps naturally
   to whatever fits the narrower column. */
@media (max-width: 767px) {
  .clx-de-teams-h2-break { display: none; }
}
@media (max-width: 767px) {
  .clx-de-teams-head {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
  /* Cap heading at a phone-friendly size — beats the inline
     style="font-size:2em" because !important + class selector
     vs an inline rule without !important. */
  .clx-de-teams-head h2,
  .clx-de-teams-head h2.title.main-heading {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
  .clx-de-teams-head p {
    font-size: 15px !important;
    line-height: 24px !important;
  }
}

/* Cards grid (.clx-de-teams-grid) is rendered with inline
   style="grid-template-columns:repeat(3,minmax(0,1fr))" so a plain
   class rule wouldn't override. !important on a class selector beats
   non-important inline. Collapse to 2-up at <=1024 and 1-up at <=600. */
@media (max-width: 1024px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-de-teams-grid,
  body.page-id-60363 .clx-de-teams-grid,
  body.page-digital-marketing .clx-de-teams-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
}
@media (max-width: 600px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-de-teams-grid,
  body.page-id-60363 .clx-de-teams-grid,
  body.page-digital-marketing .clx-de-teams-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-team-svc-card,
  body.page-id-60363 .clx-team-svc-card,
  body.page-digital-marketing .clx-team-svc-card {
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Nudge the rc-meta caption to the very bottom of the snippet so it sits
   below the x-axis labels instead of overlapping them. */
.svc-tl-anim .rc-meta { bottom: -4px !important; left: 60px !important; }

/* Breathing room below the timeline intro paragraph before the first
   alternating block. */
.svc-timeline-inner > .svc-heading-desc {
  margin-bottom: 56px;
}

/* === DE timeline blocks: 3 alternating animation/text rows ============== */
.svc-tl-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1132px;
  margin: 0 auto 80px;
  padding: 0 20px;
}
.svc-tl-block:last-child { margin-bottom: 0; }
/* Default order: animation | text */
.svc-tl-block--left  > .svc-tl-anim { order: 1; }
.svc-tl-block--left  > .svc-tl-text { order: 2; }
/* Reversed: text | animation */
.svc-tl-block--right > .svc-tl-text { order: 1; }
.svc-tl-block--right > .svc-tl-anim { order: 2; }

/* Center the text block's contents vertically inside its grid cell so the
   heading sits aligned with the middle of the adjacent animation. */
.svc-tl-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tighten heading→paragraph rhythm + breathing room top/bottom of the
   text column (per design spec). Applied to both alternations for symmetry. */
.svc-tl-block--left  .svc-tl-text,
.svc-tl-block--right .svc-tl-text {
  gap: 18px;
  padding-block: 8px;
}
.svc-tl-block--left  .svc-tl-text p,
.svc-tl-block--right .svc-tl-text p {
  max-width: 46ch;
}

.svc-tl-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;
  color: #142533;
  margin: 0 0 14px;
}
.svc-tl-p {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #4D5660;
  margin: 0;
}

/* Animation slot. Empty (placeholder) state shows a dashed card; once a
   snippet fills it (.svc-tl-anim--filled), drop chrome so the snippet's
   own aspect-ratio + background drive the look. */
.svc-tl-anim {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #FAFAFA;
  border: 1px dashed rgba(250, 73, 0, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-tl-anim--filled {
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.svc-tl-anim-placeholder {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 37, 51, 0.5);
}

/* Stack timeline blocks (animation above, text below) at <=1024px.
   At desktop the grid is 1fr 1fr; at tablet+phone we go single column
   so the animation is wide enough to read and the text sits right under
   it instead of squeezed beside it. */
@media (max-width: 1024px) {
  .svc-tl-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
    margin-bottom: 48px;
    padding: 0 16px;
    align-items: stretch;
  }
  /* Force consistent order on every block regardless of left/right
     alternation: animation always on top, text below. */
  .svc-tl-block--left  > .svc-tl-anim,
  .svc-tl-block--right > .svc-tl-anim { order: 1 !important; width: 100% !important; max-width: 100%; }
  .svc-tl-block--left  > .svc-tl-text,
  .svc-tl-block--right > .svc-tl-text {
    order: 2 !important;
    padding-block: 0 !important;
    text-align: left;
    max-width: 100%;
    width: 100%;
  }
  .svc-tl-block--left  > .svc-tl-text p,
  .svc-tl-block--right > .svc-tl-text p { max-width: none; }
  .svc-tl-h { font-size: 26px !important; }
}
/* Phone-only tightenings */
@media (max-width: 600px) {
  .svc-tl-block { gap: 16px; margin-bottom: 32px; padding: 0 16px; }
  .svc-tl-h { font-size: 22px !important; }
  .svc-tl-p { font-size: 15px; line-height: 24px; }
  /* Animation snippets cap their own min-height at the same breakpoint
     to avoid the 280px stage min-height creating empty letterbox space
     under a 228px-tall SVG (at ~360px viewport). */
  .svc-tl-anim .rc-stage,
  .svc-tl-anim .sp-stage,
  .svc-tl-anim .gv-stage { min-height: 0 !important; }
}

/* Tablet/mobile collapse to single column */
@media (max-width: 900px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-heading,
  body.page-id-60363 .svc-cards-heading,
  body.page-digital-marketing .svc-cards-heading {
    grid-template-columns: minmax(0, 1fr);
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) #services-cards,
  body.page-id-60363 #services-cards,
  body.page-digital-marketing #services-cards {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .clx-cost-curves { min-height: 380px; }
  .clx-cost-curves__meta { padding: 8px 8px 12px; gap: 16px; }
}

/* =====================================================================
   2026-05-04 — DE responsive hardening pass
   Scoped to body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing)(local) + body.page-id-60363 (staging)
   Scoped to body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing)(local) + body.page-digital-marketing (staging)
   so changes don't leak into other pages on the same theme.
   Tasks: hero clamp, hero stack, service cards 4/2/1, mid-word breaks,
   comparison columns stack, SVG fluid, table scroll affordance,
   logo slider clip, tap targets, breadcrumb scroll, hero form mobile.
   ===================================================================== */

/* --- Hero <h1>: fluid type, no mid-word break.
   Cap matches the existing services rule body:not(.home) h1.elementor-
   heading-title.elementor-size-small { font-size: 62px } so DE doesn't
   exceed the peach BG height at desktop (was previously running up to
   72px and spilling out of the hero column on wide viewports).
   Targets h1 ONLY — the hero also has <p class="elementor-heading-
   title"> eyebrow + sub-headline elements that should keep their
   default sizes. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area h1.elementor-heading-title,
body.page-id-60363 .clx-services-hero-area h1.elementor-heading-title,
body.page-digital-marketing .clx-services-hero-area h1.elementor-heading-title {
  font-size: clamp(2rem, 1rem + 3.6vw, 3.875rem) !important;
  line-height: 1.1 !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Section h2 main-headings + .svc-heading-title: fluid clamp from
   ~32px on phone up to 52px on desktop. Replaces the awkward 52px →
   28px jump that made mobile headings look tiny vs desktop. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) h2.title.main-heading,
body.page-id-60363 h2.title.main-heading,
body.page-digital-marketing h2.title.main-heading,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-heading-title,
body.page-id-60363 .svc-heading-title,
body.page-digital-marketing .svc-heading-title,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-blogs-heading .elementor-heading-title,
body.page-id-60363 .clx-blogs-heading .elementor-heading-title,
body.page-digital-marketing .clx-blogs-heading .elementor-heading-title,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-heading .elementor-heading-title,
body.page-id-60363 .clx-industries-heading .elementor-heading-title,
body.page-digital-marketing .clx-industries-heading .elementor-heading-title,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-security-heading .elementor-heading-title,
body.page-id-60363 .clx-security-heading .elementor-heading-title,
body.page-digital-marketing .clx-security-heading .elementor-heading-title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -1px !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: none;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area em,
body.page-id-60363 .clx-services-hero-area em,
body.page-digital-marketing .clx-services-hero-area em,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area strong,
body.page-id-60363 .clx-services-hero-area strong,
body.page-digital-marketing .clx-services-hero-area strong {
  font-size: inherit;
  line-height: inherit;
}

/* CTA section + solutions/industries closer bands */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cta-section h2,
body.page-id-60363 .clx-cta-section h2,
body.page-digital-marketing .clx-cta-section h2,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-cta-row h2,
body.page-id-60363 .clx-solutions-cta-row h2,
body.page-digital-marketing .clx-solutions-cta-row h2,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-cta-row h2,
body.page-id-60363 .clx-industries-cta-row h2,
body.page-digital-marketing .clx-industries-cta-row h2 {
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3rem) !important;
  line-height: 1.2 !important;
  word-break: normal !important;
  overflow-wrap: break-word;
}

/* --- Hero 2-col → stack at <=1199.
   IMPORTANT: use `>` (direct child combinator) so the rule only flips
   the hero top-section's own container, NOT any descendant nested
   sections that also have `.elementor-container`. Without `>`, the
   selector cascaded into inner section 7b1b280 (the Clutch / UpWork /
   GoodFirms / Trustpilot trust bar) and turned its row layout into a
   column — which is why DE rendered the trust badges stacked
   vertically while /services/ + /ai-software-application-development/
   (no DE-scoping) rendered them as a row.
   Same fix applied to the .elementor-column width override below. */
@media (max-width: 1199.98px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area > .elementor-container,
  body.page-id-60363 .clx-services-hero-area > .elementor-container,
  body.page-digital-marketing .clx-services-hero-area > .elementor-container {
    flex-direction: column;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area > .elementor-container > .elementor-column,
  body.page-id-60363 .clx-services-hero-area > .elementor-container > .elementor-column,
  body.page-digital-marketing .clx-services-hero-area > .elementor-container > .elementor-column {
    width: 100% !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area .clx-form,
  body.page-id-60363 .clx-services-hero-area .clx-form,
  body.page-digital-marketing .clx-services-hero-area .clx-form {
    margin-top: 32px;
  }
}

/* --- Service cards mid-word break fix only.
   IMPORTANT: do NOT override .svc-cards-grid grid-template-columns at
   desktop on DE — the page uses an intentional "1fr 1fr 360px" layout
   (defined earlier in this file, line ~151) where the third 360px
   column is .svc-card-aside (logo grid + stat tiles). A 4-up override
   here would push the sidebar into the next row and overlap the cards.
   At narrow widths the @media rules further down do collapse the grid. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card,
body.page-id-60363 .svc-card,
body.page-digital-marketing .svc-card {
  max-width: 100%;
  min-width: 0;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card-title,
body.page-id-60363 .svc-card-title,
body.page-digital-marketing .svc-card-title,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card h2,
body.page-id-60363 .svc-card h2,
body.page-digital-marketing .svc-card h2,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card h3,
body.page-id-60363 .svc-card h3,
body.page-digital-marketing .svc-card h3,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card h4,
body.page-id-60363 .svc-card h4,
body.page-digital-marketing .svc-card h4 {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: manual;
}

/* --- Team service cards mini-grid + comparison columns stack on phone ---------- */
@media (max-width: 767.98px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-team-svc-card,
  body.page-id-60363 .clx-team-svc-card,
  body.page-digital-marketing .clx-team-svc-card,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card-aside,
  body.page-id-60363 .svc-card-aside,
  body.page-digital-marketing .svc-card-aside {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100%;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card-aside .row > [class*="col-"],
  body.page-id-60363 .svc-card-aside .row > [class*="col-"],
  body.page-digital-marketing .svc-card-aside .row > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100%;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-stats-row,
  body.page-id-60363 .svc-stats-row,
  body.page-digital-marketing .svc-stats-row {
    grid-template-columns: 1fr !important;
  }
}

/* --- SVG charts inside Elementor HTML widgets: fluid ---------- */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cost-curves svg,
body.page-id-60363 .clx-cost-curves svg,
body.page-digital-marketing .clx-cost-curves svg,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-tl-anim svg,
body.page-id-60363 .svc-tl-anim svg,
body.page-digital-marketing .svc-tl-anim svg,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-banner svg,
body.page-id-60363 .clx-eng-banner svg,
body.page-digital-marketing .clx-eng-banner svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* --- Engagement-model table: horizontal scroll affordance + min-width ---------- */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-table-6,
body.page-id-60363 .clx-eng-table-6,
body.page-digital-marketing .clx-eng-table-6 {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-table-6 table,
body.page-id-60363 .clx-eng-table-6 table,
body.page-digital-marketing .clx-eng-table-6 table {
  min-width: 720px;
}
@media (max-width: 600px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-table-6::before,
  body.page-id-60363 .clx-eng-table-6::before,
  body.page-digital-marketing .clx-eng-table-6::before {
    content: "Swipe to compare \2192";
    display: block;
    font-size: 12px;
    color: #888;
    padding: 4px 8px 8px;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.02em;
  }
}

/* --- Trust-logos slider: clip on its own section, not on body ---------- */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) #logo-slider,
body.page-id-60363 #logo-slider,
body.page-digital-marketing #logo-slider,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .logo-slider,
body.page-id-60363 .logo-slider,
body.page-digital-marketing .logo-slider {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .slide-track,
body.page-id-60363 .slide-track,
body.page-digital-marketing .slide-track {
  will-change: transform;
}

/* --- Tap targets >= 44x44 on mobile ---------- */
@media (max-width: 767.98px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .social-share a,
  body.page-id-60363 .social-share a,
  body.page-digital-marketing .social-share a,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .contact-social-share a,
  body.page-id-60363 .contact-social-share a,
  body.page-digital-marketing .contact-social-share a,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .axil-footer .social-share a,
  body.page-id-60363 .axil-footer .social-share a,
  body.page-digital-marketing .axil-footer .social-share a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-burger,
  body.page-id-60363 .clx-burger,
  body.page-digital-marketing .clx-burger {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
}

/* --- Breadcrumb: scroll horizontally on phone instead of wrapping ---------- */
@media (max-width: 600px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .axil-breadcrumb-area .breadcrumb,
  body.page-id-60363 .axil-breadcrumb-area .breadcrumb,
  body.page-digital-marketing .axil-breadcrumb-area .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Hero Zoho form: fits viewport, single column on phone ---------- */
@media (max-width: 600px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area .clx-form,
  body.page-id-60363 .clx-services-hero-area .clx-form,
  body.page-digital-marketing .clx-services-hero-area .clx-form {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    border-radius: 12px;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area .clx-form .row > [class*="col-"],
  body.page-id-60363 .clx-services-hero-area .clx-form .row > [class*="col-"],
  body.page-digital-marketing .clx-services-hero-area .clx-form .row > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100%;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-services-hero-area .clx-form button[type="submit"],
  body.page-id-60363 .clx-services-hero-area .clx-form button[type="submit"],
  body.page-digital-marketing .clx-services-hero-area .clx-form button[type="submit"] {
    width: 100%;
  }
}

/* --- Top utility bar: hide secondary phones + social icons on phone ---------- */
@media (max-width: 767.98px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .side-nab-top .sidebar-share-icons,
  body.page-id-60363 .side-nab-top .sidebar-share-icons,
  body.page-digital-marketing .side-nab-top .sidebar-share-icons,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .side-nab-top .social-share,
  body.page-id-60363 .side-nab-top .social-share,
  body.page-digital-marketing .side-nab-top .social-share {
    display: none;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .side-nab-top .row,
  body.page-id-60363 .side-nab-top .row,
  body.page-digital-marketing .side-nab-top .row {
    flex-wrap: wrap;
    gap: 8px;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .side-nab-top .logo img,
  body.page-id-60363 .side-nab-top .logo img,
  body.page-digital-marketing .side-nab-top .logo img {
    max-width: 140px;
    height: auto;
  }
}

/* --- Industries / Solutions / Cost-curves stat boxes: 1-col on phone ---------- */
@media (max-width: 600px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-grid-section .elementor-container,
  body.page-id-60363 .clx-industries-grid-section .elementor-container,
  body.page-digital-marketing .clx-industries-grid-section .elementor-container,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-grid-section .elementor-container,
  body.page-id-60363 .clx-solutions-grid-section .elementor-container,
  body.page-digital-marketing .clx-solutions-grid-section .elementor-container {
    flex-wrap: wrap;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-industries-grid-section .elementor-column,
  body.page-id-60363 .clx-industries-grid-section .elementor-column,
  body.page-digital-marketing .clx-industries-grid-section .elementor-column,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-solutions-grid-section .elementor-column,
  body.page-id-60363 .clx-solutions-grid-section .elementor-column,
  body.page-digital-marketing .clx-solutions-grid-section .elementor-column {
    width: 100% !important;
  }
}

/* --- Tools sub-grid inside cards (icon strip) ---------- */
@media (max-width: 600px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card .technologies-image,
  body.page-id-60363 .svc-card .technologies-image,
  body.page-digital-marketing .svc-card .technologies-image,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card .repeating-hover-effect,
  body.page-id-60363 .svc-card .repeating-hover-effect,
  body.page-digital-marketing .svc-card .repeating-hover-effect {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}

/* --- CTA section "Want An Expert to Look at Your Project?" (decta1):
   on mobile, hide the right-side image (widget f2b5d6d) and bump
   section vertical padding so the heading + form button breathe.
   Also center-align the CTA link (text-editor 23015bd has inline
   style="text-align: right" which is intentional on desktop). */
@media (max-width: 767.98px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element.elementor-element-f2b5d6d,
  body.page-id-60363 .elementor-element.elementor-element-f2b5d6d,
  body.page-digital-marketing .elementor-element.elementor-element-f2b5d6d {
    display: none !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element.elementor-element-decta1,
  body.page-id-60363 .elementor-element.elementor-element-decta1,
  body.page-digital-marketing .elementor-element.elementor-element-decta1 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    min-height: 280px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element.elementor-element-decta1 .elementor-container,
  body.page-id-60363 .elementor-element.elementor-element-decta1 .elementor-container,
  body.page-digital-marketing .elementor-element.elementor-element-decta1 .elementor-container {
    align-items: center !important;
  }
  /* Center the CTA link text on mobile (overrides inline
     style="text-align: right" on the <p> wrapper inside the editor). */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element.elementor-element-23015bd,
  body.page-id-60363 .elementor-element.elementor-element-23015bd,
  body.page-digital-marketing .elementor-element.elementor-element-23015bd,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-element.elementor-element-23015bd p,
  body.page-id-60363 .elementor-element.elementor-element-23015bd p,
  body.page-digital-marketing .elementor-element.elementor-element-23015bd p,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cta-text,
  body.page-id-60363 .clx-cta-text,
  body.page-digital-marketing .clx-cta-text,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cta-text p,
  body.page-id-60363 .clx-cta-text p,
  body.page-digital-marketing .clx-cta-text p {
    text-align: center !important;
  }
}

/* --- Page-level horizontal-overflow guard scoped to DE.
   Layered defense: clip at html, body, main, and section level.
   `overflow-x: clip` is Safari-friendly (doesn't break position:sticky). */
html:has(body.page-id-60226),
html:has(body.page-id-60363),
html:has(body.page-qa-software-testing) { overflow-x: clip !important; }
html:has(body.page-digital-marketing) { overflow-x: clip !important; }
body.page-id-60226,
body.page-id-60363,
body.page-qa-software-testing,
body.page-digital-marketing {
  overflow-x: clip !important;
  overflow-y: visible;
  max-width: 100vw;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) main.page-wrappper,
body.page-id-60363 main.page-wrappper,
body.page-digital-marketing main.page-wrappper {
  overflow-x: clip;
  max-width: 100vw;
}
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor.elementor-60226,
body.page-id-60363 .elementor.elementor-60363,
body.page-digital-marketing .elementor,
body.page-qa-software-testing .elementor,
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-top-section,
body.page-id-60363 .elementor-top-section,
body.page-digital-marketing .elementor-top-section {
  max-width: 100vw;
}

/* The off-canvas .side-nav drawer is position:fixed; width:100vw; right:-100vw
   in the parent theme, and -120vw via navbar-new.css. In some browser
   scrollbar combos the drawer bleeds back into the viewport and triggers
   horizontal scroll. When NOT opened, force it well off-screen so it
   contributes nothing to the document scroll width on DE. */
body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) html:not(.side-nav-opened) .side-nav,
body.page-id-60363 html:not(.side-nav-opened) .side-nav,
body.page-digital-marketing html:not(.side-nav-opened) .side-nav,
body.page-qa-software-testing html:not(.side-nav-opened) .side-nav,
html:not(.side-nav-opened) body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .side-nav,
html:not(.side-nav-opened) body.page-id-60363 .side-nav,
html:not(.side-nav-opened) body.page-digital-marketing .side-nav {
  visibility: hidden;
  pointer-events: none;
  right: -200vw !important;
  width: 0 !important;
  max-width: 0 !important;
}

/* =====================================================================
   2026-05-04 — Round 2: actual narrow-viewport overflow fixes
   The DE-only "1fr 1fr 360px" service cards layout uses a sidebar
   (.svc-card-aside) with fixed 170×128 logo tiles + 170×176 stat tiles.
   On Samsung S25 (~360–412px viewport) two 170px tiles + 12px gap
   = 352px which exceeds the 328–380px content area and creates
   horizontal scroll. Same for the OPS layer / partner cards.
   Also force every Elementor section's container to wrap children
   on tablet+phone so columns can stack instead of clipping.
   ===================================================================== */

@media (max-width: 1024px) {
  /* DE-specific 3-col (1fr 1fr 360px) cards layout collapses to
     a normal flowing grid on tablet+ */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid,
  body.page-id-60363 .svc-cards-grid,
  body.page-digital-marketing .svc-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-aside,
  body.page-id-60363 .svc-cards-grid .svc-card-aside,
  body.page-digital-marketing .svc-cards-grid .svc-card-aside {
    grid-column: 1 / -1;
    margin-top: 0;
    height: auto;
  }
  /* Logo + stats grids: drop fixed pixel widths/heights, scale fluidly */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-aside .clx-logo-grid,
  body.page-id-60363 .svc-cards-grid .svc-card-aside .clx-logo-grid,
  body.page-digital-marketing .svc-cards-grid .svc-card-aside .clx-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    height: auto !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats,
  body.page-id-60363 .svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats,
  body.page-digital-marketing .svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    height: auto !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .clx-logo-tile,
  body.page-id-60363 .svc-cards-grid .clx-logo-tile,
  body.page-digital-marketing .svc-cards-grid .clx-logo-tile {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 170 / 128;
  }
}

@media (max-width: 600px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid,
  body.page-id-60363 .svc-cards-grid,
  body.page-digital-marketing .svc-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-aside .clx-logo-grid,
  body.page-id-60363 .svc-cards-grid .svc-card-aside .clx-logo-grid,
  body.page-digital-marketing .svc-cards-grid .svc-card-aside .clx-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats,
  body.page-id-60363 .svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats,
  body.page-digital-marketing .svc-cards-grid .svc-card-aside .svc-stats-row.clx-ph2-stats {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Card padding tighter at phone */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card,
  body.page-id-60363 .svc-card,
  body.page-digital-marketing .svc-card {
    padding: 20px 16px 18px !important;
  }
  /* Card icon scales down */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-icon,
  body.page-id-60363 .svc-cards-grid .svc-card-icon,
  body.page-digital-marketing .svc-cards-grid .svc-card-icon {
    width: 64px !important;
    height: 64px !important;
    top: -22px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-icon img,
  body.page-id-60363 .svc-cards-grid .svc-card-icon img,
  body.page-digital-marketing .svc-cards-grid .svc-card-icon img {
    width: 64px !important;
    height: 64px !important;
  }

  /* Top-level section columns stack on phone (don't touch inner sections;
     they have their own intentional layouts). */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .elementor-top-section > .elementor-container > .elementor-top-column,
  body.page-id-60363 .elementor-top-section > .elementor-container > .elementor-top-column,
  body.page-digital-marketing .elementor-top-section > .elementor-container > .elementor-top-column {
    width: 100% !important;
  }

  /* Cost-curves SVG wrapper: respect viewport instead of fixed 432 min-height */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cost-curves,
  body.page-id-60363 .clx-cost-curves,
  body.page-digital-marketing .clx-cost-curves {
    min-height: 0 !important;
    padding: 8px 0 !important;
    overflow-x: clip;
  }
  /* Cost-curves readout meta row: nowrap + white-space:nowrap on the
     labels was overflowing at narrow widths. Wrap onto multiple rows. */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cost-curves__meta,
  body.page-id-60363 .clx-cost-curves__meta,
  body.page-digital-marketing .clx-cost-curves__meta {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px 18px !important;
    padding: 4px 16px 12px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cost-curves__readout,
  body.page-id-60363 .clx-cost-curves__readout,
  body.page-digital-marketing .clx-cost-curves__readout {
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cost-curves__rd-row,
  body.page-id-60363 .clx-cost-curves__rd-row,
  body.page-digital-marketing .clx-cost-curves__rd-row {
    white-space: normal !important;
    flex-wrap: wrap;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cost-curves__rd-label,
  body.page-id-60363 .clx-cost-curves__rd-label,
  body.page-digital-marketing .clx-cost-curves__rd-label,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-cost-curves__rd-val,
  body.page-id-60363 .clx-cost-curves__rd-val,
  body.page-digital-marketing .clx-cost-curves__rd-val {
    font-size: 11px !important;
  }

  /* Timeline animation cards: tighter aspect, no surplus height. Force
     explicit display + width on each chain so nothing collapses (the
     Govern animation in particular was rendering empty at narrow
     widths because the gv-wrap had no width set and gv-stage was
     relying on aspect-ratio + an inherited width that occasionally
     resolved to 0 inside flex column layout). */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-tl-anim,
  body.page-id-60363 .svc-tl-anim,
  body.page-digital-marketing .svc-tl-anim {
    width: 100% !important;
    max-width: 100%;
    display: block !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .sp-wrap,
  body.page-id-60363 .sp-wrap,
  body.page-digital-marketing .sp-wrap,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .gv-wrap,
  body.page-id-60363 .gv-wrap,
  body.page-digital-marketing .gv-wrap,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .rc-stage,
  body.page-id-60363 .rc-stage,
  body.page-digital-marketing .rc-stage {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .sp-stage,
  body.page-id-60363 .sp-stage,
  body.page-digital-marketing .sp-stage,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .gv-stage,
  body.page-id-60363 .gv-stage,
  body.page-digital-marketing .gv-stage,
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .rc-stage,
  body.page-id-60363 .rc-stage,
  body.page-digital-marketing .rc-stage {
    min-height: 220px !important;
    width: 100% !important;
    aspect-ratio: 600 / 380 !important;
    display: block !important;
  }

  /* Engagement banner: stack two-col layout, reset fixed photo height */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-banner,
  body.page-id-60363 .clx-eng-banner,
  body.page-digital-marketing .clx-eng-banner {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-banner .clx-eb-photo,
  body.page-id-60363 .clx-eng-banner .clx-eb-photo,
  body.page-digital-marketing .clx-eng-banner .clx-eb-photo {
    /* Source image is portrait 3:4 (3584×4800). 16/10 landscape
       container cropped most of the photo's vertical content,
       crushing the laptop screen and producing rough edges where the
       cover-fit clipped mid-glyph. 4:5 keeps the container portrait-
       leaning so the image fits with minimal vertical crop. */
    aspect-ratio: 4 / 5;
    height: auto !important;
    min-height: 0 !important;
    /* Add bottom padding so the .clx-eb-chip pill (positioned
       absolutely at bottom:16px) sits BELOW the image instead of
       overlaying the people in the photo. */
    padding-bottom: 60px;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-banner .clx-eb-chip,
  body.page-id-60363 .clx-eng-banner .clx-eb-chip,
  body.page-digital-marketing .clx-eng-banner .clx-eb-chip {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: none !important;
    border-top: 1px solid var(--ib-line, #E1E6EB);
  }
  /* Image only fills the area ABOVE the chip slot, not the full
     container height (which now includes the 60px chip slot). */
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .clx-eng-banner .clx-eb-photo img,
  body.page-id-60363 .clx-eng-banner .clx-eb-photo img,
  body.page-digital-marketing .clx-eng-banner .clx-eb-photo img {
    inset: 0 0 60px 0 !important;
    height: auto !important;
  }
}

/* Extra-narrow guard (< 380px — Samsung Fold etc.) */
@media (max-width: 380px) {
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-cards-grid .svc-card-aside .clx-logo-grid,
  body.page-id-60363 .svc-cards-grid .svc-card-aside .clx-logo-grid,
  body.page-digital-marketing .svc-cards-grid .svc-card-aside .clx-logo-grid {
    grid-template-columns: 1fr !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-tl-h,
  body.page-id-60363 .svc-tl-h { font-size: 20px !important; }
  body.page-digital-marketing .svc-tl-h { font-size: 20px !important; }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-tl-block,
  body.page-id-60363 .svc-tl-block { padding: 0 8px; }
  body.page-digital-marketing .svc-tl-block { padding: 0 8px; }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-card,
  body.page-id-60363 .svc-card,
  body.page-digital-marketing .svc-card {
    padding: 18px 14px 16px !important;
  }
  body:is(.page-id-60226, .page-it-consulting-service, .page-creative-design, .page-emerging-technologies, .page-qa-software-testing) .svc-stats-row.clx-ph2-stats .svc-stat-num,
  body.page-id-60363 .svc-stats-row.clx-ph2-stats .svc-stat-num,
  body.page-digital-marketing .svc-stats-row.clx-ph2-stats .svc-stat-num {
    font-size: 36px !important;
  }
}

/* === Mobile bumps for the 3 timeline animations on /digital-engineering/ ==
   discovery (rc-*), cycles (sp-*), govern (gv-*). Each uses a ~600-unit
   wide viewBox; on a 360px viewport the SVG content scales to 0.6× so
   8–14px source units render as 5–8px — unreadable. Bump source font
   sizes ~2× so rendered text lands at ~12–14px. Same pattern as the
   clx-intelligence-belt mobile CSS on DM. */
@media (max-width: 720px) {
  /* === discovery (Risk Cloud) === */
  .svc-tl-anim .rc-axis-label  { font-size: 22px !important; }
  .svc-tl-anim .rc-q           { font-size: 32px !important; }
  .svc-tl-anim .rc-q-sm        { font-size: 26px !important; }
  .svc-tl-anim .rc-chip-text   { font-size: 22px !important; }
  .svc-tl-anim .rc-commit-label{ font-size: 22px !important; }
  .svc-tl-anim .rc-meta        { font-size: 17px !important; }

  /* === cycles (Sprint) === */
  .svc-tl-anim .sp-col-label   { font-size: 18px !important; letter-spacing: 0.6px !important; }
  .svc-tl-anim .sp-zone        { font-size: 16px !important; letter-spacing: 0.8px !important; }
  .svc-tl-anim .sp-ship-text   { font-size: 17px !important; }
  .svc-tl-anim .sp-prod-label  { font-size: 17px !important; letter-spacing: 0.8px !important; }
  .svc-tl-anim .sp-lg          { font-size: 17px !important; }

  /* === govern (Gates) === */
  .svc-tl-anim .gv-phase-label { font-size: 17px !important; letter-spacing: 0.7px !important; }
  .svc-tl-anim .gv-phase-num   { font-size: 17px !important; }
  .svc-tl-anim .gv-audit-label { font-size: 17px !important; letter-spacing: 0.7px !important; }
}

/* Smaller phones — pull the bump back a touch so the longer labels
   ("Architecture", "Cost projection", "Cross-functional review") don't
   overrun their tight SVG bounding boxes on ~320–375px viewports. */
@media (max-width: 420px) {
  .svc-tl-anim .rc-axis-label  { font-size: 18px !important; }
  .svc-tl-anim .rc-q           { font-size: 26px !important; }
  .svc-tl-anim .rc-q-sm        { font-size: 22px !important; }
  .svc-tl-anim .rc-chip-text   { font-size: 18px !important; }
  .svc-tl-anim .rc-commit-label{ font-size: 18px !important; }

  .svc-tl-anim .sp-col-label   { font-size: 15px !important; }
  .svc-tl-anim .sp-zone        { font-size: 13px !important; }
  .svc-tl-anim .sp-ship-text   { font-size: 14px !important; }
  .svc-tl-anim .sp-prod-label  { font-size: 14px !important; }
  .svc-tl-anim .sp-lg          { font-size: 14px !important; }

  .svc-tl-anim .gv-phase-label { font-size: 14px !important; }
  .svc-tl-anim .gv-phase-num   { font-size: 14px !important; }
  .svc-tl-anim .gv-audit-label { font-size: 14px !important; }
}