/* clx-svc-seo — deltas for the /seo-services/ page (cloned from clx-svc-erp).
   Base styling comes from the shared clx-svc-ai.css (.clx-svc-page / .svc-* /
   cx-4layer classes). Self-contained: loaded only on /seo-services/, adds nothing
   to site-wide.css. Only SEO-page overrides live here.
   Hero italic uses the shared brand orange (--svc-orange, #FA4900) as-is. */

/* Section 2 is the FIRST body section after the hero/marquee. Kill the base
   .svc-sec::before top separator + border-top, exactly as the AI/ERP first
   section (svc-approach) does — otherwise the marquee's line is doubled. */
.page-seo-services .svc-seo-intro::before{display:none;}
.page-seo-services .svc-seo-intro{border-top:none;padding-top:44px;}

/* Section 5 CTA band: DM gets its section background + padding from per-post
   Elementor CSS (.elementor-element-decta1 = #121212, 56px). This page has no
   such generated CSS, so supply it here. Everything else (columns, image bleed,
   heading, .clx-lc link) comes from the shared .clx-cta-section rules. */
/* Full-bleed dark band (DM's CTA spans the viewport). Scrollbar-safe negative
   margins push the #121212 to the edges; the inner .elementor-container keeps
   its boxed 1140 width, so the content still lines up with the rest of the page. */
.page-seo-services .svc-seo-cta.clx-cta-section{
  background:#121212 !important;
  padding:56px 0 0 !important;          /* bottom 0 so the photo bleeds to the edge, like DM */
  overflow:hidden !important;
  width:auto !important;
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
}
.page-seo-services .svc-seo-cta > .elementor-container{
  max-width:1140px !important;margin:0 auto !important;padding:0 20px !important;
  align-items:flex-end !important;      /* image column drops to the band bottom */
}
/* the photo bleeds left AND down to the bottom edge (DM behaviour) */
.page-seo-services .svc-seo-cta .clx-cta-action-col{align-items:flex-end !important;padding:0 !important;}
.page-seo-services .svc-seo-cta .clx-cta-arrow img{width:130% !important;margin-left:-15% !important;margin-bottom:-4px !important;display:block !important;}
/* keep the text column vertically centred against the taller image */
.page-seo-services .svc-seo-cta .elementor-column:not(.clx-cta-action-col) > .elementor-widget-wrap{justify-content:center !important;padding:0 0 40px !important;}
.page-seo-services .svc-seo-cta .clx-cta-text p{margin:10px 0 0;}
/* a parent-theme h2 rule out-specifies DM's .title.main-heading here, darkening
   the heading on the near-black band — force it white (5 classes + !important). */
.page-seo-services .svc-seo-cta .clx-cta-text .title.main-heading{color:#fff !important;}

/* MOBILE: once the two columns stack, the desktop left-bleed (width:130% +
   margin-left:-15%) leaves the image shoved off the left and clipped. Centre it
   instead — full width, no negative offset, still flush to the bottom edge. */
@media (max-width:767px){
  .page-seo-services .svc-seo-cta .clx-cta-action-col{justify-content:center !important;}
  .page-seo-services .svc-seo-cta .clx-cta-arrow{text-align:center !important;}
  .page-seo-services .svc-seo-cta .clx-cta-arrow img{width:100% !important;max-width:420px !important;margin-left:auto !important;margin-right:auto !important;margin-bottom:-4px !important;}
}

/* Section 6 Teams: 4 personas in ONE row. Cards are <a> here, so reset link
   colour/underline. Tighter padding + type so a ~250px card still reads. */
.page-seo-services .svc-teams-grid--4{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important;}
.page-seo-services .svc-teams-grid--4 .svc-persona{text-decoration:none;color:inherit;padding:26px 20px;min-width:0;}
.page-seo-services .svc-teams-grid--4 .svc-persona:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.page-seo-services .svc-teams-grid--4 .svc-persona-d{font-size:14px;line-height:23px;}
/* chips: the shipped 2-col + nowrap overflows at this width — stack and wrap */
.page-seo-services .svc-teams-grid--4 .svc-persona-foci{grid-template-columns:1fr !important;gap:8px !important;}
.page-seo-services .svc-teams-grid--4 .svc-persona-foci span{white-space:normal !important;font-size:12.5px;}
@media (max-width:1100px){
  .page-seo-services .svc-teams-grid--4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:640px){
  .page-seo-services .svc-teams-grid--4{grid-template-columns:1fr !important;}
}

/* Why Clixlogix follows the full-bleed black agent panel, so the base
   .svc-sec::before hairline reads as a stray line under the dark band. */
.page-seo-services .svc-why::before{display:none;}
.page-seo-services .svc-why{border-top:none;}

/* Partner badges.
   The tile stretches to the left column's height, so its aspect is variable and
   object-fit:cover always crops the artwork by an unpredictable amount. These
   badges are finished branded banners that must not be cut, so they are
   CONTAINED. The tile is painted in each badge's own colour (inline), which
   means the contain letterboxing is invisible — the tile reads as one solid
   block — and a thin neutral border defines the edge. That border works on any
   palette, light or dark, so future badges need no special handling.
   Tile height/aspect itself is untouched. */
/* Partner badges sit directly above the four stat cards, so they take the SAME
   dark treatment — otherwise two white tiles float on top of a dark grid.
   One uniform colour for both badges (not per-logo), copied from .svc-why-stat.
   The artwork is contained so branded banners are never cropped, and because
   the tile is dark like the badges themselves the fit is seamless. */
.page-seo-services .svc-why-badge{
  background:linear-gradient(145deg,rgba(20,20,20,.97),rgba(0,0,0,.99)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.page-seo-services .svc-why-badge img{
  object-fit:contain !important;
  padding:14px !important;
}

/* ===== Section 3 — Core AI SEO Offerings =====
   ERP layout verbatim: full-width H2 + intro + the shipped .svc-offer-grid
   (4-col, with its own breakpoints). Only three additions, all forced by the
   spec's card template — no layout of my own. */

/* cards are <a> here (ERP used <div>) — reset link colour/underline only */
.page-seo-services .svc-offer-grid .svc-offer-card{display:block;position:relative;text-decoration:none;color:inherit;}

/* Reseller CTA card — 5% brand tint (spec) */
.page-seo-services .svc-offer-card--cta{background:rgba(250,73,0,.05);border-color:rgba(250,73,0,.25);}
.page-seo-services .svc-offer-ctaline{display:inline-block;margin-top:14px;font-family:'Cabin',sans-serif;font-size:14px;font-weight:700;color:#FA4900;}

/* stretched-link card (card 4) — whole card clickable, inline link stays clickable */
.page-seo-services .svc-offer-stretch{color:inherit;text-decoration:none;}
.page-seo-services .svc-offer-stretch::after{content:"";position:absolute;inset:0;z-index:1;}
.page-seo-services .svc-offer-inlink{position:relative;z-index:2;color:#FA4900;text-decoration:underline;}

/* Section 2 — opener: two-column intro (¶1 left, ¶2+¶3 right), mirrors the
   AI/ERP approach intro. Paragraph spacing for the stacked right-column paras
   (.svc-sec-intro is margin:0 by default). */
.page-seo-services .svc-seo-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:26px;}
.page-seo-services .svc-seo-intro-col .svc-sec-intro + .svc-sec-intro{margin-top:18px;}
.page-seo-services .svc-seo-intro-col .svc-sec-intro strong{color:#142533;font-weight:600;}
@media (max-width:900px){
  .page-seo-services .svc-seo-intro-grid{grid-template-columns:1fr;gap:22px;}
}

/* ERP engagement value-band — the team image is PORTRAIT (896x1200), so give the image
   column a narrower, taller (~3:4) shape instead of the landscape default, and let the
   copy column stretch to match with the stats pinned to the bottom. */
.clx-svc-page .svc-eng-erp .svc-eng-intro{grid-template-columns:1fr .52fr;align-items:stretch;}
.clx-svc-page .svc-eng-erp .svc-eng-intro-copy{justify-content:flex-start;gap:16px;}
.clx-svc-page .svc-eng-erp .svc-eng-lead{max-width:56ch;}   /* keep original .svc-sec-intro font (Cabin 18/28) */
.clx-svc-page .svc-eng-erp .svc-eng-stats{margin-top:6px;}
.clx-svc-page .svc-eng-erp .svc-eng-imgwrap{min-height:420px;}
.clx-svc-page .svc-eng-erp .svc-eng-imgwrap img{object-position:50% 22%;}
@media(max-width:900px){
  .clx-svc-page .svc-eng-erp .svc-eng-intro{grid-template-columns:1fr;}
  .clx-svc-page .svc-eng-erp .svc-eng-imgwrap{min-height:360px;}
}

/* ERP investment — "What Shapes Your ERP Cost" as a 2-col card grid (was a 10-row table;
   halves the vertical scroll while keeping the same copy). */
.clx-svc-page .svc-inv-factors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.clx-svc-page .svc-inv-fcard{border:1px solid #EAEAEA;border-radius:12px;padding:18px 20px;background:#fff;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.clx-svc-page .svc-inv-fcard:hover{border-color:#FA4900;box-shadow:0 12px 28px -18px rgba(20,37,51,.4);transform:translateY(-2px);}
.clx-svc-page .svc-inv-ft{position:relative;padding-left:18px;font-family:'Cabin',sans-serif;font-weight:700;font-size:15px;color:#142533;margin:0 0 7px;line-height:1.3;}
.clx-svc-page .svc-inv-ft::before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#ff7a33,#FA4900);}
.clx-svc-page .svc-inv-fd{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.55;color:#5C5C66;margin:0;padding-left:18px;}
@media(max-width:720px){.clx-svc-page .svc-inv-factors{grid-template-columns:1fr;}}

/* delivered-value banner — stack all pillar panels in ONE grid cell so the banner height
   stays constant across tabs (kills the resize/reflow + text tail); only the active panel
   shows. Also re-focus the landscape image on the team + laptop in its tall column. */
.clx-svc-page .svc-dv .svc-secpanels{display:grid;}
.clx-svc-page .svc-dv .svc-secpanel{grid-area:1 / 1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease;}
.clx-svc-page .svc-dv .svc-secpanel.is-active{opacity:1;visibility:visible;pointer-events:auto;}
.clx-svc-page .svc-dv .svc-secpanel[hidden]{display:grid !important;}   /* keep in the cell for height */
.clx-svc-page .svc-dv .svc-secbanner-media img{object-position:87% 28%;}

/* ERP investment — full-width "relative platform cost" callout below the Project Sizes
   table: chips ordered low→high on a gradient track, with the </≤ operators visible. */
.clx-svc-page .svc-inv-foot{margin:16px 0 0;padding:18px 22px;background:#FAFAFB;border:1px solid #EAEAEA;border-left:3px solid #FA4900;border-radius:10px;max-width:none;}
.clx-svc-page .svc-inv-foot-head{font-family:'Cabin',sans-serif;font-weight:700;font-size:14.5px;color:#142533;margin:0 0 12px;}
.clx-svc-page .svc-inv-costbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.clx-svc-page .svc-inv-cost-end{font-family:'Cabin',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#8A8A93;white-space:nowrap;flex:none;}
.clx-svc-page .svc-inv-cost-track{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;flex-wrap:wrap;min-width:280px;padding:9px 16px;border-radius:999px;background:linear-gradient(90deg,#EAF7EE 0%,#FFF4E7 55%,#FFE6DA 100%);border:1px solid #F0E7E0;}
.clx-svc-page .svc-inv-cost-chip{font-family:'Cabin',sans-serif;font-weight:600;font-size:13.5px;color:#142533;background:#fff;border:1px solid #E4E4EA;border-radius:8px;padding:6px 13px;white-space:nowrap;box-shadow:0 1px 3px rgba(20,37,51,.06);}
.clx-svc-page .svc-inv-cost-op{font-family:'DM Sans',sans-serif;font-weight:700;color:#FA4900;font-size:14px;flex:none;}
.clx-svc-page .svc-inv-foot-note{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;color:#8A8A93;margin:12px 0 0;}
@media(max-width:720px){
  .clx-svc-page .svc-inv-costbar{flex-direction:column;align-items:stretch;gap:8px;}
  .clx-svc-page .svc-inv-cost-end{text-align:center;}
  .clx-svc-page .svc-inv-cost-track{justify-content:center;}
}

/* ERP Platforms section — single-logo panel treatment (mirrors the low-code page, whose
   .svc-plat-solo CSS isn't loaded here). The .clx-tp-* tab chrome comes from the AI
   component's platforms-assets.php, included by the part. */
.clx-svc-page .svc-platforms .svc-platforms-wrap{margin-top:36px;}
.clx-svc-page .svc-platforms .svc-plat-solo{display:flex;align-items:center;justify-content:flex-start;min-height:104px;border:1px solid #ececf1;border-radius:14px;background:#fff;padding:22px 28px;margin:0 0 22px;}
.clx-svc-page .svc-platforms .svc-plat-solo img{max-height:64px;max-width:260px;width:auto;height:auto;object-fit:contain;display:block;}
.clx-svc-page .svc-platforms .svc-tp-panel-sub{font-family:'Cabin',sans-serif;font-size:15px;line-height:1.55;color:#727272;margin:6px 0 18px;max-width:640px;}

/* Tool cards run larger here than on the AI page. The shared .clx-tp-card is
   116x72 with 18px side padding, leaving only an 80x44 content box — a 450x150
   logo lands ~27px tall in it. Scoped to .svc-platforms so the AI page and
   homepage keep their own size. */
.clx-svc-page .svc-platforms .clx-tp-cards{gap:16px;}
.clx-svc-page .svc-platforms .clx-tp-card{width:152px;height:92px;padding:12px 16px;border-radius:15px;}
@media (max-width:600px){
  .clx-svc-page .svc-platforms .clx-tp-cards{gap:12px;}
  .clx-svc-page .svc-platforms .clx-tp-card{width:calc(50% - 6px);height:88px;padding:10px 12px;}
}

/* ============================================================================
   ENGAGEMENT MODELS — four models, not the five the shared component assumes.
   Grid retuned to 4 columns and the group header moved over columns 3-4, which
   are the two "SEO Team Augmentation" cards. Scoped to .svc-eng-seo so the AI /
   ERP / low-code pages keep their 5-column layout.
   ========================================================================= */
.clx-svc-page .svc-eng-seo .svc-eng-grid{grid-template-columns:repeat(4,1fr);}
.clx-svc-page .svc-eng-seo .svc-eng-grouphdr{grid-column:3 / 5;}
/* Landscape 16:9 team image (ERP's is portrait), so the column runs shorter and
   the crop favours the upper half where the people are. */
.clx-svc-page .svc-eng-seo .svc-eng-imgwrap{min-height:300px;}
.clx-svc-page .svc-eng-seo .svc-eng-imgwrap img{object-position:50% 38%;}
.clx-svc-page .svc-eng-seo .svc-eng-lead{max-width:60ch;}
@media (max-width:960px){
  /* My 3-class base rule out-specifies the shared 2-class ≤960 rule, so the grid
     stayed 4-up on mobile and the cards crushed. Restate the column drop here. */
  .clx-svc-page .svc-eng-seo .svc-eng-grid{grid-template-columns:1fr 1fr;}
  .clx-svc-page .svc-eng-seo .svc-eng-grouphdr{grid-column:1 / -1;}
  /* The shared mobile order assumes one standalone card ahead of the group; here
     two stand ahead of it, so the header has to fall after m-c2. */
  .clx-svc-page .svc-eng-seo .m-c1{grid-column:auto !important;order:1;}
  .clx-svc-page .svc-eng-seo .m-c2{grid-column:auto !important;order:2;}
  .clx-svc-page .svc-eng-seo .svc-eng-grouphdr{order:3;}
  .clx-svc-page .svc-eng-seo .m-c3{grid-column:auto !important;order:4;}
  .clx-svc-page .svc-eng-seo .m-c4{grid-column:auto !important;order:5;}
}
@media (max-width:620px){
  .clx-svc-page .svc-eng-seo .svc-eng-grid{grid-template-columns:1fr;}
}

/* SEDM diagram — align its frame + boxes to the AI "System Design Approach" (cx-4layer):
   a peach PANEL stage (cx-4layer .cx-4layer__panel) so the white pill "cards" pop, with
   the pills restyled toward .cx-4layer__comp (white fill, peachy border, rounder, larger
   label). Overrides the ported widget's own inline styles via higher specificity so the
   widget itself stays verbatim. */
.clx-svc-page .clx-erp-spine .opt__stage{
  background:rgba(255,239,230,.5);        /* cx-4layer panel peach */
  border:1px solid rgba(250,73,0,.12);    /* cx-4layer panel border */
  border-radius:20px;
}
/* sub-step pills → cx-4layer card treatment */
.clx-svc-page .clx-erp-spine .s1-bullet-pill{stroke:#F4DDCF;stroke-width:1.2;rx:5px;}
.clx-svc-page .clx-erp-spine .s1-bullet-fill{rx:5px;}
.clx-svc-page .clx-erp-spine .s1-bullet-text{font-size:11px;fill:var(--ink);}
/* artifact boxes → same peachy card border (ember tick kept) */
.clx-svc-page .clx-erp-spine .s1-art{stroke:#F4DDCF;stroke-width:1.3;}
/* mobile pills too */
.clx-svc-page .clx-erp-spine .s1m__pill{border-color:#F4DDCF !important;}
.clx-svc-page .svc-value-item{padding-left:16px;border-left:2px solid var(--svc-orange,#FA4900);}
.clx-svc-page .svc-value-label{display:block;font-family:'Cabin',sans-serif;font-weight:700;font-size:16.5px;line-height:1.3;color:var(--svc-ink,#142533);margin-bottom:7px;}
.clx-svc-page .svc-value-text{font-family:'Cabin',sans-serif;font-size:15px;line-height:1.58;color:#6B7280;margin:0;}

/* scroll box — bounded height so the header + module column FREEZE (sticky) while rows
   scroll inside. scrollbar-gutter reserves the vertical bar so it can't induce a
   horizontal one; the table stays at container width, so no horizontal scroll on desktop.
   Horizontal scroll only appears below ~720px (table min-width). */
/* page-level sticky: no inner scroll box. body overflow-x:clip (scoped to this page only,
   loaded via clx-svc-erp.css) blocks page-level horizontal scroll WITHOUT creating a
   scroll container, so the header can pin against the page. --cvg-sticky-top clears the
   fixed nav on desktop; 0 on tablet/mobile where the nav isn't fixed. */
body.wp-singular{overflow-x:clip;overflow-y:visible;}
/* ERP page fills the full 1140 content width (no side inset) — scoped HERE (loads only on
   the ERP slugs) so the shared AI/low-code pages keep their 20px inset. Mobile keeps a
   16px gutter so content never touches the screen edge on phones. */
.clx-svc-page .svc-in{padding-left:0;padding-right:0;}
/* ...but keep the HERO inset (20px) like the AI/low-code heroes — only the body sections
   (coverage matrix etc.) need the full-width treatment. Keeps all service heroes aligned. */
.clx-svc-page.clx-svc-hero-only .svc-in{padding-left:20px;padding-right:20px;}
@media(max-width:720px){.clx-svc-page .svc-in{padding-left:16px;padding-right:16px;}}


/* ==== Agentic/GenAI rich components (safeguards ledger animation + image tabs) —
   copied from site-wide.css so the redesign stays self-contained (unique BEM names,
   no collisions). Markup + inline JS ported in blocks/*.html. ==== */
.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;
}
.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;
}
/* ---------------------------------------------------------------
   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 -
   --------------------------------------------------------------- */
  /* 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 */
}
  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;
}
  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);
}
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
}
  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;
}
  width: 72px;
  flex: 0 0 72px;
  height: 4px;
  background: var(--clx-arch-line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
  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;
}
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  color: var(--clx-arch-accent);
  display: inline-block;
  min-width: 6px;
}
  flex: 1;
  display: flex;
  flex-direction: column;
}
  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;
}
  font-family: 'Cabin', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--clx-arch-mute);
  text-transform: uppercase;
}
  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. */
  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;
}
  color: var(--clx-arch-accent);
  border-color: var(--clx-arch-accent);
  background: #fff;
}
  color: #fff;
  border-color: var(--clx-arch-accent);
  background: var(--clx-arch-accent);
}
  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);
}
  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;
}
  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;
}
    color: #fff !important;
    border-color: var(--clx-arch-accent) !important;
    background: var(--clx-arch-accent) !important;
/* ===== "What we commit to" — uses the .clx-brings-to-table pattern
   (numbered orange circles) — same chrome as the bullets under "Why
   Companies Choose Clixlogix" on /ai-software-application-development/.
   No new bullet style needed here; only the wrapper spacing + CTA. ===== */
body.page-id-13359 .career-commitments-inline {
  margin: 24px 0 0;
}
/* Normalize ALL body paragraph text on the career page to the canonical
   inner-page services style (DM Sans 18/28 #898D90 — same as the "Most
   A.I. initiatives struggle…" paragraph on /ai-software-application-development/).
   Beats the parent theme's .page-career p overrides (which force 20-22px).
   Covers:
     - .elementor-widget-text-editor <p> (hero paragraph + Life At copy)
     - .svc-card-desc inside .clx-blog-card doorway tiles
   Leaves alone:
     - .clx-brings-to-table p (numbered bullets keep their own size)
     - .career-bottom-cta p (white CTA chrome)
*/
body.page-id-13359 section .elementor-widget-text-editor p,
body.page-id-13359 section .elementor-widget-text-editor .elementor-widget-container p,
body.page-id-13359 .clx-blog-card .svc-card-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #898D90 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (prefers-reduced-motion: reduce){
    color: #fff !important;
    border-color: var(--clx-arch-accent) !important;
    background: var(--clx-arch-accent) !important;
  }
}

@media (max-width: 960px) {
  .clx-arch-row { grid-template-columns: 1fr; gap: 28px; }
  .clx-arch-row__anim { order: 2; }
}

/* ==== AI Safeguards — Approval Ledger animation (Claude Design "AI Safeguards - Approval
   Ledger.html"). Pure-CSS status cycling: badge text via ::before content keyframes, so it
   RESETS cleanly every 12s loop (fixes the old JS-driven desync). JS only ticks the N/6
   counter. Self-contained (no site-wide.css dependency). ==== */
  --loop:12s;
  --clx-arch-label:#142533; --clx-arch-mute:#898D90; --clx-arch-line:#E8E8E8;
  --clx-arch-row-bg:#F8F8F8; --clx-arch-accent:#FA4900;
  font-family:'DM Sans',sans-serif; width:100%; max-width:440px; margin:0;
}
@media (max-width:768px){
}

/* ---------------------------------------------------------------------------
   TOC FAB live section label — on 12"/13" laptops + smaller (where the side
   TOC is hidden, <1548px) the FAB expands into a pill that broadcasts the
   current section as you scroll. Circular (icon-only) until a section is active.
   --------------------------------------------------------------------------- */
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  line-height:1.1;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-align:left;
  transition:max-width .34s cubic-bezier(.4,0,.2,1),opacity .26s ease,padding .34s ease;
}
.clx-svc-page .svc-toc-fab.has-cur{width:auto;border-radius:21px;padding:0 13px 0 2px;gap:6px;justify-content:flex-start;}
.clx-svc-page .svc-toc-fab.has-cur > svg{flex:none;margin-left:6px;}
.clx-svc-page .svc-toc-fab.has-cur .svc-toc-fab-cur{max-width:148px;opacity:1;padding-left:5px;}
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .n{font-size:8px;font-weight:700;letter-spacing:.1em;opacity:.78;text-transform:uppercase;}
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .t{font-size:11.5px;font-weight:600;letter-spacing:-.1px;max-width:140px;overflow:hidden;text-overflow:ellipsis;}

/* ============================================================================
   SECTION 13 — PLAN YOUR SEO INVESTMENT WITH CONFIDENCE
   Palette held to what the page already uses: white / #FAFAFB cards, #EAEAEA
   hairlines, #142533 ink, #FA4900 as ACCENT ONLY (eyebrows, left rules, dots,
   bars). No tinted panels, no secondary orange, no gradients into new hues.
   Callout blocks reuse the page's existing pattern (paper + 3px orange left).
   Layout is compacted: each formula card is two columns (formula | worked
   examples) rather than stacked, which is the bulk of the height saving.
   ========================================================================= */
.clx-svc-page .svc-inv-seo .seo-pb-frame{font-family:'Cabin',sans-serif;font-size:16px;line-height:1.6;color:#727272;margin:0 0 18px;max-width:74ch;}

/* --- keyword difficulty tiers --- */
.clx-svc-page .svc-inv-seo .seo-pb-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px;}
.clx-svc-page .svc-inv-seo .seo-pb-tier{border:1px solid #EAEAEA;border-radius:14px;background:#fff;padding:18px 18px;min-width:0;}
.clx-svc-page .svc-inv-seo .seo-pb-tier-eyebrow{display:block;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#FA4900;margin-bottom:6px;}
.clx-svc-page .svc-inv-seo .seo-pb-tier-eyebrow i{font-style:normal;opacity:.55;}
.clx-svc-page .svc-inv-seo .seo-pb-tier-name{font-family:'Cabin',sans-serif;font-size:16px;font-weight:700;line-height:1.3;color:#142533;margin:0 0 6px;}
.clx-svc-page .svc-inv-seo .seo-pb-tier-desc{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;color:#898D90;margin:0;}

/* --- formula cards: two columns, formula | worked examples --- */
.clx-svc-page .svc-inv-seo .seo-fxcard{background:#FAFAFB;border:1px solid #EAEAEA;border-radius:14px;padding:18px 22px;margin:0 0 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:26px;align-items:center;}
.clx-svc-page .svc-inv-seo .seo-tlcard{background:#FAFAFB;border:1px solid #EAEAEA;border-radius:14px;padding:18px 22px;margin:0 0 14px;}
.clx-svc-page .svc-inv-seo .seo-fxcard-step{grid-column:1 / -1;display:block;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#FA4900;margin-bottom:12px;}
.clx-svc-page .svc-inv-seo .seo-fxcard-step i{font-style:normal;opacity:.55;}
.clx-svc-page .svc-inv-seo .seo-fx{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:0;}
/* stacked numerator over denominator, textbook style */
.clx-svc-page .svc-inv-seo .seo-fx-frac{display:inline-flex;flex-direction:column;align-items:center;text-align:center;}
.clx-svc-page .svc-inv-seo .seo-fx-frac em{font-style:normal;font-family:'Cabin',sans-serif;font-size:19px;font-weight:700;color:#142533;padding:0 10px 6px;}
.clx-svc-page .svc-inv-seo .seo-fx-frac i{font-style:normal;font-family:'Cabin',sans-serif;font-size:16px;font-weight:600;color:#727272;padding:6px 10px 0;border-top:2px solid #142533;}
.clx-svc-page .svc-inv-seo .seo-fx-eq{font-family:'Cabin',sans-serif;font-size:22px;font-weight:700;color:#142533;}
.clx-svc-page .svc-inv-seo .seo-fx-line{font-family:'Cabin',sans-serif;font-size:18px;font-weight:700;color:#142533;text-align:center;line-height:1.45;}
.clx-svc-page .svc-inv-seo .seo-fx-egs{list-style:none;margin:0;padding:0 0 0 26px;border-left:1px solid #EAEAEA;display:grid;gap:8px;}
.clx-svc-page .svc-inv-seo .seo-fx-egs li{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.55;color:#5C5C66;padding:0;}
.clx-svc-page .svc-inv-seo .seo-fx-egs li::before{content:none;}
.clx-svc-page .svc-inv-seo .seo-fx-egs b{color:#142533;font-weight:700;}

/* --- parity timeline --- */
.clx-svc-page .svc-inv-seo .seo-tl{background:#fff;border:1px solid #EAEAEA;border-radius:12px;padding:18px 16px 16px;}
.clx-svc-page .svc-inv-seo .seo-tl-ruler{display:grid;grid-template-columns:repeat(12,1fr);margin-bottom:10px;}
.clx-svc-page .svc-inv-seo .seo-tl-ruler span{font-family:'DM Sans',sans-serif;font-size:11px;color:#A0A4A8;text-align:center;}
.clx-svc-page .svc-inv-seo .seo-tl-body{position:relative;display:grid;grid-template-columns:repeat(12,1fr);row-gap:14px;}
.clx-svc-page .svc-inv-seo .seo-tl-zone{position:absolute;top:-3px;bottom:-3px;border-radius:6px;background:rgba(250,73,0,.06);border-left:1px dashed rgba(250,73,0,.4);border-right:1px dashed rgba(250,73,0,.4);pointer-events:none;}
.clx-svc-page .svc-inv-seo .seo-tl-zone.z2{background:rgba(20,37,51,.04);border-color:rgba(20,37,51,.25);}
/* one accent colour, tiers separated by weight rather than a second hue */
.clx-svc-page .svc-inv-seo .seo-tl-bar{position:relative;z-index:1;display:flex;align-items:center;height:44px;padding:0 12px;border-radius:8px;color:#fff;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#FA4900;}
.clx-svc-page .svc-inv-seo .seo-tl-bar:nth-of-type(2){background:rgba(250,73,0,.78);}
.clx-svc-page .svc-inv-seo .seo-tl-bar:nth-of-type(3){background:rgba(250,73,0,.58);}
.clx-svc-page .svc-inv-seo .seo-tl-zonekeys{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;padding-top:12px;border-top:1px solid #F0F0F0;}
.clx-svc-page .svc-inv-seo .seo-tl-zonekey{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:#727272;}
.clx-svc-page .svc-inv-seo .seo-tl-zonekey i{width:14px;height:10px;border-radius:3px;background:rgba(250,73,0,.14);border:1px dashed rgba(250,73,0,.5);}
.clx-svc-page .svc-inv-seo .seo-tl-zonekey.z2 i{background:rgba(20,37,51,.06);border-color:rgba(20,37,51,.3);}
.clx-svc-page .svc-inv-seo .seo-tl-zonekey b{color:#142533;font-weight:700;}
.clx-svc-page .svc-inv-seo .seo-tl-note{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;color:#898D90;margin:12px 0 0;}

/* --- year 2 compound value: horizontal, so each card is one line tall --- */
/* compound cards sit inside the Step 3 card, under a full-width caption */
.clx-svc-page .svc-inv-seo .seo-cmp-wrap{grid-column:1 / -1;margin-top:16px;padding-top:14px;border-top:1px solid #EAEAEA;}
.clx-svc-page .svc-inv-seo .seo-cmp-cap{display:block;font-family:'DM Sans',sans-serif;font-size:12.5px;color:#898D90;margin-bottom:10px;}
.clx-svc-page .svc-inv-seo .seo-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;}
.clx-svc-page .svc-inv-seo .seo-cmp-card{border:1px solid #EAEAEA;border-radius:12px;background:#fff;padding:16px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;min-width:0;}
.clx-svc-page .svc-inv-seo .seo-cmp-label{grid-column:1 / -1;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#898D90;margin-bottom:6px;}
.clx-svc-page .svc-inv-seo .seo-cmp-label i{font-style:normal;opacity:.55;}
.clx-svc-page .svc-inv-seo .seo-cmp-value{font-family:'Cabin',sans-serif;font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;color:#142533;}
.clx-svc-page .svc-inv-seo .seo-cmp-sub{grid-column:2;font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.4;color:#898D90;}
.clx-svc-page .svc-inv-seo .seo-cmp-mult{grid-column:2;font-family:'Cabin',sans-serif;font-size:13.5px;font-weight:700;color:#FA4900;}

/* --- callout blocks: the page's existing paper + orange-left pattern --- */
.clx-svc-page .svc-inv-seo .seo-pb-close,
.clx-svc-page .svc-inv-seo .seo-nolock{background:#FAFAFB;border:1px solid #EAEAEA;border-radius:10px;padding:18px 22px;}
.clx-svc-page .svc-inv-seo .seo-pb-close{font-family:'Cabin',sans-serif;font-size:16px;line-height:1.6;font-weight:600;color:#142533;margin:0;}
.clx-svc-page .svc-inv-seo .seo-nolock{margin:0 0 18px;display:flex;flex-direction:column;gap:4px;}
.clx-svc-page .svc-inv-seo .seo-nolock strong{font-family:'Cabin',sans-serif;font-size:17px;font-weight:700;color:#142533;letter-spacing:-.2px;}
.clx-svc-page .svc-inv-seo .seo-nolock span{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.55;color:#727272;}

/* --- cost factor tiles (8, no prose) --- */
.clx-svc-page .svc-inv-seo .seo-fac-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 8px;}
.clx-svc-page .svc-inv-seo .seo-fac{border:1px solid #EAEAEA;border-radius:12px;background:#fff;padding:12px 14px 11px;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:center;min-width:0;}
/* icon carries no tinted tile — matches .svc-ind-ic / .svc-offer-ic on this page */
.clx-svc-page .svc-inv-seo .seo-fac-ic{grid-row:1;width:22px;height:22px;color:#FA4900;display:inline-flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-inv-seo .seo-fac-ic svg{width:18px;height:18px;display:block;}
.clx-svc-page .svc-inv-seo .seo-fac-name{grid-row:1;font-family:'Cabin',sans-serif;font-size:14px;font-weight:700;line-height:1.25;color:#142533;margin:0;}
.clx-svc-page .svc-inv-seo .seo-fac-slider{grid-column:1 / -1;position:relative;display:block;height:5px;border-radius:3px;margin:9px 0 6px;background:linear-gradient(90deg,#EAEAEA 0%,#FA4900 100%);}
.clx-svc-page .svc-inv-seo .seo-fac-slider i{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #FA4900;transform:translate(-50%,-50%);}
.clx-svc-page .svc-inv-seo .seo-fac-ends{grid-column:1 / -1;display:flex;justify-content:space-between;gap:8px;}
.clx-svc-page .svc-inv-seo .seo-fac-ends b{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:500;line-height:1.25;color:#A0A4A8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.clx-svc-page .svc-inv-seo .seo-fac-ends b:last-child{text-align:right;}

/* trailing note (band bar removed) */
.clx-svc-page .svc-inv-seo .svc-inv-foot-note{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.6;color:#898D90;margin:12px 0 0;}

@media (max-width:960px){
  .clx-svc-page .svc-inv-seo .seo-pb-tiers{grid-template-columns:1fr;}
  .clx-svc-page .svc-inv-seo .seo-fac-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .clx-svc-page .svc-inv-seo .seo-fxcard{grid-template-columns:1fr;row-gap:14px;}
  .clx-svc-page .svc-inv-seo .seo-fx-egs{padding:14px 0 0;border-left:0;border-top:1px solid #EAEAEA;}
  .clx-svc-page .svc-inv-seo .seo-fxcard,
  .clx-svc-page .svc-inv-seo .seo-tlcard{padding:18px 16px;}
}
@media (max-width:620px){
  .clx-svc-page .svc-inv-seo .seo-cmp{grid-template-columns:1fr;}
  .clx-svc-page .svc-inv-seo .seo-fac-grid{grid-template-columns:1fr;}
  .clx-svc-page .svc-inv-seo .seo-fx{gap:14px;}
  .clx-svc-page .svc-inv-seo .seo-fx-frac em{font-size:17px;}
  .clx-svc-page .svc-inv-seo .seo-fx-frac i{font-size:14px;}
  .clx-svc-page .svc-inv-seo .seo-fx-line{font-size:16px;}
  .clx-svc-page .svc-inv-seo .seo-cmp-value{font-size:26px;}
  /* the 12-month ruler cannot compress further; scroll it as one unit */
  .clx-svc-page .svc-inv-seo .seo-tl{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .clx-svc-page .svc-inv-seo .seo-tl-ruler,
  .clx-svc-page .svc-inv-seo .seo-tl-body{min-width:520px;}
}

/* --- Steps 1-3 as tabs (collapses three stacked cards into one panel height) --- */
.clx-svc-page .svc-inv-seo .seo-steps{margin:0 0 14px;}
/* nav: the shared .svc-tabs gap is 56px; keep that rhythm here */
.clx-svc-page .svc-inv-seo .seo-steps-nav{gap:56px;margin-bottom:14px;}
/* all panels share ONE grid cell => stage is always as tall as the tallest,
   so cycling steps cannot reflow the page. No JS measurement involved. */
.clx-svc-page .svc-inv-seo .seo-steps-panels{display:grid;}
.clx-svc-page .svc-inv-seo .seo-steps-panels,
.clx-svc-page .svc-inv-seo .seo-steps-panel{min-width:0;max-width:100%;}
.clx-svc-page .svc-inv-seo .seo-steps-panel{grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity .22s ease;}
.clx-svc-page .svc-inv-seo .seo-steps-panel.is-active{visibility:visible;opacity:1;}
.clx-svc-page .svc-inv-seo .seo-steps-panel{margin-bottom:0;}


/* --- timeline bar draw-in. Bars are full width by DEFAULT so they survive a
       script that never runs; .is-armed (added by JS) collapses them, .is-drawn
       plays them back in. Reduced motion never arms. --- */
.clx-svc-page .svc-inv-seo .seo-tl-body .seo-tl-bar{clip-path:inset(0 0 0 0);}
.clx-svc-page .svc-inv-seo .seo-tl-body.is-armed .seo-tl-bar{clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.22,.61,.36,1);}
.clx-svc-page .svc-inv-seo .seo-tl-body.is-armed.is-drawn .seo-tl-bar{clip-path:inset(0 0 0 0);}
.clx-svc-page .svc-inv-seo .seo-tl-body.is-armed .seo-tl-bar:nth-of-type(2){transition-delay:.16s;}
.clx-svc-page .svc-inv-seo .seo-tl-body.is-armed .seo-tl-bar:nth-of-type(3){transition-delay:.32s;}
.clx-svc-page .svc-inv-seo .seo-tl-body.is-armed .seo-tl-zone{opacity:0;transition:opacity .45s ease .6s;}
.clx-svc-page .svc-inv-seo .seo-tl-body.is-armed.is-drawn .seo-tl-zone{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .clx-svc-page .svc-inv-seo .seo-tl-body .seo-tl-bar{clip-path:inset(0 0 0 0)!important;transition:none!important;}
  .clx-svc-page .svc-inv-seo .seo-tl-body .seo-tl-zone{opacity:1!important;}
}

/* --- worked examples, aligned to the formula terms above them --- */
.clx-svc-page .svc-inv-seo .seo-wx{border-top:1px solid #EAEAEA;}
.clx-svc-page .svc-inv-seo .seo-wx-head,
.clx-svc-page .svc-inv-seo .seo-wx-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:10px 14px;align-items:baseline;padding:9px 0;}
.clx-svc-page .svc-inv-seo .seo-wx-row + .seo-wx-row,
.clx-svc-page .svc-inv-seo .seo-wx-row{border-top:1px solid #F2F2F4;}
.clx-svc-page .svc-inv-seo .seo-wx-head{padding-top:12px;}
.clx-svc-page .svc-inv-seo .seo-wx-head span{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#A0A4A8;}
.clx-svc-page .svc-inv-seo .seo-wx-head span i{font-style:normal;color:#FA4900;font-weight:700;margin-right:2px;}
.clx-svc-page .svc-inv-seo .seo-wx-row b{font-family:'Cabin',sans-serif;font-size:14px;font-weight:700;color:#142533;}
.clx-svc-page .svc-inv-seo .seo-wx-row span{font-family:'DM Sans',sans-serif;font-size:14px;color:#5C5C66;}
.clx-svc-page .svc-inv-seo .seo-wx-row span i{font-style:normal;font-size:12px;color:#A0A4A8;}
.clx-svc-page .svc-inv-seo .seo-wx-row em{font-style:normal;font-family:'Cabin',sans-serif;font-size:16px;font-weight:800;color:#FA4900;}
.clx-svc-page .svc-inv-seo .seo-wx-note{font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.55;color:#898D90;margin:10px 0 0;}
@media (max-width:620px){
  .clx-svc-page .svc-inv-seo .seo-wx-head{display:none;}
  .clx-svc-page .svc-inv-seo .seo-wx-row{grid-template-columns:1fr auto;row-gap:2px;}
  .clx-svc-page .svc-inv-seo .seo-wx-row b{grid-column:1 / -1;}
  .clx-svc-page .svc-inv-seo .seo-wx-row em{grid-column:2;text-align:right;}
}

/* --- steps nav on small viewports: the 3 tabs wrapped raggedly (36px circle +
       label + 56px gap overflows a phone). Keep them on ONE line and let the row
       scroll horizontally instead of wrapping. Scoped to this section's nav so
       Section 3's tabs are untouched. --- */
.clx-svc-page .svc-inv-seo .seo-steps-nav .svc-tlabel{white-space:nowrap;}
@media (max-width:640px){
  /* 3-column stepper: number chip over label, centred, equal thirds. "Parity
     Timeline" is too wide to sit beside a 28px circle on a phone, so the label
     drops UNDER the number and may wrap to two lines within its own column. All
     three fit, nothing scrolls, nothing clips. */
  .clx-svc-page .svc-inv-seo .seo-steps-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:16px;border-bottom:1px solid #EAEAEA;}
  .clx-svc-page .svc-inv-seo .seo-steps-nav .svc-tab{flex-direction:column;align-items:center;text-align:center;gap:7px;padding:12px 6px;min-width:0;}
  .clx-svc-page .svc-inv-seo .seo-steps-nav .svc-tnum{width:30px;height:30px;font-size:12px;}
  .clx-svc-page .svc-inv-seo .seo-steps-nav .svc-tlabel{font-size:12.5px;line-height:1.25;white-space:normal;}
  /* underline spans the whole column under the active tab */
  .clx-svc-page .svc-inv-seo .seo-steps-nav .svc-tab::after{left:0;right:0;bottom:-1px;}
}

/* inline anchor links in the Payback closing block */
.clx-svc-page .svc-inv-seo .seo-inl{color:#FA4900;font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.clx-svc-page .svc-inv-seo .seo-inl:hover{color:#c93b00;text-decoration:underline;}