/* =====================================================================
   clx-svc-vibe  —  Service-page redesign family (AI page is first consumer)
   Scoped component library. EVERY rule is scoped under `.clx-svc-page`
   so nothing leaks in/out. Loaded only on opted-in slugs via functions.php.
   NOTHING here goes into site-wide.css.

   This file: base layout scaffold + TOC overlay + HERO section.
   Later sections append below under the same `.clx-svc-page` scope.
   ===================================================================== */

.clx-svc-page{
  /* tokens */
  --svc-orange:#FA4900;
  --svc-orange-2:#ff7a33;
  --svc-orange-soft:#fff2e3;
  --svc-ink:#142533;
  --svc-ink-2:#33475a;
  --svc-muted:#757589;
  --svc-body:#727272;
  --svc-line:#ececf0;
  --svc-line-2:#e0e0e6;
  --svc-paper:#f7f7f8;

  font-family:'Cabin',system-ui,-apple-system,sans-serif;
  color:var(--svc-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.clx-svc-page *{box-sizing:border-box;}

/* ---- shell / section rhythm: 1140 container, 80px spacing, hairline dividers ---- */
.clx-svc-page .svc-in{max-width:1140px;margin:0 auto;padding:0 20px;}
/* section separators = a CENTERED, content-width hairline (like the concept, NOT full-bleed) */
.clx-svc-page .svc-sec{position:relative;padding:80px 0;}
.clx-svc-page .svc-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1100px,calc(100% - 40px));height:1px;background:var(--svc-line);}
.clx-svc-page .svc-hero::before,
.clx-svc-page .svc-approach::before{display:none;}   /* hero (first) + approach (marquee divides it) */

/* ---- shared section header bits (used by later sections) ---- */
.clx-svc-page .svc-kick{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--svc-orange);}
.clx-svc-page .svc-kick::before{content:"";width:24px;height:2px;background:var(--svc-orange);border-radius:2px;}
.clx-svc-page .svc-h2{font-family:'Cabin',sans-serif;font-size:clamp(32px,3.6vw,52px);line-height:1.08;letter-spacing:-.03em;font-weight:500;color:var(--svc-ink);margin:15px 0 20px;text-wrap:balance;}
.clx-svc-page .svc-lead{font-family:'Cabin',sans-serif;font-size:18px;color:var(--svc-body);margin:12px 0 0;line-height:28px;}

/* ---- hero buttons: REUSE the homepage hero button (.clxc-btn / .clxc-btn-ghost).
   That style is defined inline-only in inc/clx-directionc-hero.php (homepage), so it
   is mirrored here VERBATIM (CSS vars resolved to their homepage values) — not a new
   button style, just the homepage's, so the two stay consistent. Scoped to this page. ---- */
.clx-svc-page .clxc-btn{display:inline-flex;align-items:center;justify-content:center;background:#FA4900;color:#fff;text-decoration:none;font-family:'Cabin',sans-serif;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;padding:10px 22px;border-radius:8px;box-shadow:0 6px 16px rgba(250,73,0,.22);transition:background .25s ease,transform .2s ease,box-shadow .2s ease;text-align:center;}
.clx-svc-page .clxc-btn:hover{background:#e0440b;transform:translateY(-2px);box-shadow:0 14px 30px rgba(250,73,0,.36);color:#fff;}
.clx-svc-page .clxc-btn:active{background:#a83c08;transform:translateY(0);box-shadow:0 8px 18px rgba(250,73,0,.32);}
.clx-svc-page .clxc-btn-ghost{background:#fff;color:#111120;border:1.5px solid #e6e6ee;box-shadow:0 6px 16px rgba(20,20,40,.06);}
.clx-svc-page .clxc-btn-ghost:hover{background:#fff;border-color:#FA4900;color:#FA4900;transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,20,40,.10);}
.clx-svc-page .clxc-btn-ghost:active{transform:translateY(0);box-shadow:0 4px 12px rgba(20,20,40,.08);}

/* =====================================================================
   TOC — floating overlay in the RIGHT auto-margin.
   Content stays full 1140; TOC reserves no space and only shows when the
   right margin can hold it (viewport >= ~1548px). No content narrowing.
   ===================================================================== */
.clx-svc-page .svc-toc{
  position:fixed;top:50%;transform:translateY(-50%);
  /* sit inside the right auto-margin: right edge ~24px from viewport */
  right:24px;width:184px;max-height:82vh;overflow:auto;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid var(--svc-line-2);border-radius:14px;padding:16px;
  box-shadow:0 14px 34px rgba(20,20,40,.1);z-index:40;display:none;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
@media (min-width:1548px){ .clx-svc-page .svc-toc{display:block;} }
.clx-svc-page .svc-toc.is-visible{opacity:1;visibility:visible;}
.clx-svc-page .svc-toc .svc-toc-h{font-family:'Cabin',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--svc-muted);margin-bottom:10px;display:flex;align-items:center;gap:7px;}
.clx-svc-page .svc-toc .svc-toc-h::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--svc-orange);}
.clx-svc-page .svc-toc a{display:flex;gap:9px;font-size:13px;color:var(--svc-muted);padding:6px 8px;border-radius:7px;align-items:baseline;transition:.15s;text-decoration:none;}
.clx-svc-page .svc-toc a .i{font-family:'Cabin',sans-serif;font-size:11px;font-weight:600;opacity:.7;}
.clx-svc-page .svc-toc a:hover{background:var(--svc-paper);color:var(--svc-ink);}
.clx-svc-page .svc-toc a.on{background:var(--svc-orange-soft);color:#b5390a;font-weight:600;}

/* =====================================================================
   HERO
   ===================================================================== */
.clx-svc-page .svc-hero{padding:44px 0 40px;border-top:none;}
.clx-svc-page .svc-crumbs{margin-bottom:22px;}
.clx-svc-page .svc-hero-g{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start;}   /* top-align both columns: eyebrow sits right under the breadcrumb regardless of copy length or form height (no centering push-down) */
/* Normalize the Elementor column/container padding around the scoped hero. The AI page's
   column was built with padding zeroed; ERP + low-code + the L3 hero-swap pages inherited
   Elementor's default 10px column padding (and a 20px container gap on low-code), which
   offset the hero 10px down and in from the sides. Strip it so every service-page hero
   sits at the identical top offset and full width. */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated:has(.svc-hero){padding:0 !important;}
.clx-svc-page .svc-hero-left{display:flex;flex-direction:column;justify-content:center;}
.clx-svc-page .svc-hero-top{margin-bottom:0;}

.clx-svc-page .svc-eyebrow{
  font-family:'Cabin',sans-serif;font-size:22px;font-weight:700;line-height:36px;
  background:linear-gradient(90deg,#ff9900 0%,#f57e07 40%,#ef4e07 75%,#fa4900 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  display:inline-block;padding-bottom:2px;
}
.clx-svc-page .svc-h1{font-family:'Cabin',sans-serif;font-size:clamp(34px,4.6vw,62px);line-height:1.065;letter-spacing:-.03em;font-weight:500;color:var(--svc-ink);margin:14px 0 0;text-wrap:balance;}
.clx-svc-page .svc-hero-sub{font-family:'Cabin',sans-serif;font-size:clamp(17px,1.5vw,22px);color:var(--svc-ink);line-height:1.55;margin:20px 0 0;max-width:540px;}
.clx-svc-page .svc-hero-sub em{color:var(--svc-orange);font-style:italic;font-weight:700;}
.clx-svc-page .svc-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}

/* rating strip — text-based platform names (concept style, no logos) */
.clx-svc-page .svc-rating{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:34px;padding-top:22px;border-top:1px solid var(--svc-line);}
.clx-svc-page .svc-rate{display:flex;align-items:center;gap:11px;}
.clx-svc-page .svc-rate .svc-stars{color:#f5a623;font-size:16px;letter-spacing:2px;line-height:1;}
.clx-svc-page .svc-rate .svc-rnum{font-family:'Cabin',sans-serif;font-size:24px;font-weight:800;color:var(--svc-ink);letter-spacing:-.5px;line-height:1;}
.clx-svc-page .svc-rate .svc-rnum span{color:var(--svc-muted);font-size:15px;font-weight:600;}
.clx-svc-page .svc-rate .svc-ravg{font-size:13px;color:var(--svc-muted);font-weight:600;line-height:1.2;}
.clx-svc-page .svc-rplat{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.clx-svc-page .svc-rplat .svc-rcap{font-size:12.5px;color:var(--svc-muted);letter-spacing:.2px;}
.clx-svc-page .svc-platnames{display:flex;align-items:center;gap:18px;font-size:13.5px;font-weight:700;color:var(--svc-ink);}
.clx-svc-page .svc-platnames span{position:relative;}
.clx-svc-page .svc-platnames span+span::before{content:"";position:absolute;left:-9px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--svc-muted);transform:translateY(-50%);}

/* hero right column = REAL zoho form (unchanged design), resized to fit the column.
   zoho-form.css pins the card to min-height:673px which drags the left-column
   rating down; kill that + tighten spacing so it sits ~concept height. */
.clx-svc-page .svc-hero-form{display:flex;align-items:stretch;}
.clx-svc-page .svc-hero-form .clx-zoho-wrap{width:100%;margin:0;}
.clx-svc-page .svc-hero-form .clx-zoho-card{
  width:100%;max-width:none;margin:0;
  min-height:0 !important;            /* was 673px — the height culprit */
  padding:1.5em !important;
}
.clx-svc-page .svc-hero-form .clx-zoho-head{margin-bottom:.5em;}
.clx-svc-page .svc-hero-form .clx-field{margin-top:10px !important;}
.clx-svc-page .svc-hero-form textarea{min-height:52px !important;}
.clx-svc-page .svc-hero-form .clx-actions{margin-top:14px !important;}
.clx-svc-page .svc-hero-form .clx-footer{margin-top:10px !important;}

/* client-logo marquee — concept style, hairline separators TOP and BOTTOM */
.clx-svc-page .svc-marquee-band{margin-top:40px;padding:22px 0;border-top:1px solid var(--svc-line);border-bottom:1px solid var(--svc-line);}
.clx-svc-page .svc-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.clx-svc-page .svc-mtrack{display:flex;align-items:center;gap:60px;width:max-content;animation:svc-marq 34s linear infinite;}
.clx-svc-page .svc-mtrack img{height:32px;width:auto;object-fit:contain;opacity:.6;filter:grayscale(1);transition:opacity .2s,filter .2s;}
.clx-svc-page .svc-mtrack img:hover{opacity:1;filter:grayscale(0);}
@keyframes svc-marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .clx-svc-page .svc-mtrack{animation:none;} }

/* =====================================================================
   SECTION 3 — A Better Approach (live copy; fonts replicated, no site-wide.css)
   ===================================================================== */
/* EXACT live computed values (headless Chrome on /ai-software-application-development/):
   h2 = Cabin 52px/60 w500 -1.56px #142533 · h3 = Cabin 36px/50.4 w700 #142533
   body = Cabin 18px/28 w400 #727272. No site-wide.css dependency. */
.clx-svc-page .svc-approach{border-top:none;padding-top:44px;}   /* no separator + tighter top gap (was 80px) so content peeks above the fold */
.clx-svc-page .svc-appr-h2{font-family:'Cabin',sans-serif;font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.15;letter-spacing:-1.56px;color:#142533;margin:0 0 6px;}
.clx-svc-page .svc-appr-framework{margin-top:48px;}   /* sub-section spacing (no divider rule) */
.clx-svc-page .svc-appr-h3{font-family:'Cabin',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,36px);line-height:1.4;letter-spacing:0;color:#142533;margin:0 0 14px;}
.clx-svc-page .svc-appr-intro{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:18px;align-items:start;}
.clx-svc-page .svc-appr-intro p,
.clx-svc-page .svc-appr-framework p{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;font-weight:400;color:#727272;margin:0;}   /* left-aligned, full width */
.clx-svc-page .svc-appr-framework p{margin-bottom:14px;}
.clx-svc-page .svc-appr-intro a,
.clx-svc-page .svc-appr-framework a{color:#FA4900;text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.clx-svc-page .svc-appr-framework p strong{color:#142533;font-weight:700;}
.clx-svc-page .svc-rule{border:0;border-top:1px solid var(--svc-line);margin:40px 0;}
.clx-svc-page .svc-appr-approach{margin-top:28px;}
/* our-approach block: let each tab's description run full width (block caps it at 600px) */
.clx-svc-page .cx-4layer__panelHead p{max-width:none;}
@media (max-width:800px){
  .clx-svc-page .svc-appr-intro{grid-template-columns:1fr;gap:14px;}
}

/* ===== shared section heading + intro (LIVE values: h2 Cabin 52/60 w500 -1.56; intro Cabin 18/28 #727272) ===== */
.clx-svc-page .svc-sec-h2{font-family:'Cabin',sans-serif;font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.15;letter-spacing:-1.56px;color:#142533;margin:0 0 12px;}
.clx-svc-page .svc-sec-intro{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;font-weight:400;color:#727272;margin:0;}

/* ===== SECTION 4 — Core Offerings: concept card (crisp white + border) + LIVE orange inline icons + LIVE fonts ===== */
.clx-svc-page .svc-offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px;list-style:none;padding-left:0;margin-bottom:0;}
.clx-svc-page .svc-offer-card{background:#fff;border:1px solid #e6e6ee;border-radius:16px;padding:34px 28px;text-align:center;transition:transform .18s,box-shadow .18s,border-color .18s;}
.clx-svc-page .svc-offer-card:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-offer-ic{width:44px;height:44px;margin:0 auto 22px;color:#FA4900;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-offer-ic svg{width:38px;height:38px;display:block;stroke:currentColor;}
.clx-svc-page .svc-offer-t{font-family:'Cabin',sans-serif;font-size:18px;font-weight:700;line-height:1.3;color:#142533;margin:0 0 10px;}
.clx-svc-page .svc-offer-d{font-family:'Cabin',sans-serif;font-size:15px;line-height:26px;font-weight:400;color:#898D90;margin:0;}
@media (max-width:1080px){.clx-svc-page .svc-offer-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.clx-svc-page .svc-offer-grid{grid-template-columns:1fr;}}

/* ===== SECTION 5 — Why Companies Choose (concept layout; live circles/fonts; concept stats) ===== */
.clx-svc-page .svc-why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:36px;align-items:stretch;}
/* left: 7 bullets — live #E8491D circles (Cabin 14/600 white) + live body font */
.clx-svc-page .svc-why-list{display:flex;flex-direction:column;justify-content:space-between;gap:22px;}
.clx-svc-page .svc-why-item{display:flex;gap:16px;align-items:flex-start;}
.clx-svc-page .svc-why-num{flex:none;width:38px;height:38px;border-radius:50%;background:#E8491D;color:#fff;font-family:'Cabin',sans-serif;font-size:14px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-why-body{font-family:'Cabin',sans-serif;font-size:15px;line-height:26px;font-weight:400;color:#898D90;padding-top:6px;}
.clx-svc-page .svc-why-body strong{color:#142533;font-weight:700;}
/* right: 2 full-bleed banners (top row) + 4 dark stat cards; fills the left column's height */
.clx-svc-page .svc-why-right{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;height:100%;}
.clx-svc-page .svc-why-badge{border:1px solid #e6e6ee;border-radius:16px;background:#fff;overflow:hidden;position:relative;min-height:110px;}
.clx-svc-page .svc-why-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.clx-svc-page .svc-why-stat{background:linear-gradient(145deg,rgba(20,20,20,.97),rgba(0,0,0,.99));border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:110px;}
.clx-svc-page .svc-why-orb{width:22px;height:22px;border-radius:50%;margin-bottom:12px;background:radial-gradient(circle at 34% 30%,#ffd98a 0%,#ff9f27 42%,#ef6a0c 78%,#c9500a 100%);box-shadow:0 2px 6px rgba(239,106,12,.5),inset 0 -2px 4px rgba(120,40,0,.5),inset 0 2px 3px rgba(255,255,255,.4);}
.clx-svc-page .svc-why-statnum{font-family:'Cabin',sans-serif;font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff;}
.clx-svc-page .svc-why-statlabel{font-family:'Cabin',sans-serif;font-size:14px;line-height:1.35;color:#fff;margin-top:6px;}
/* foot: live intro + right-aligned live-style CTA */
.clx-svc-page .svc-why-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.clx-svc-page .svc-why-foottext{font-family:'Cabin',sans-serif;font-size:18px;line-height:24px;font-weight:400;color:#757589;margin:0;max-width:760px;}
.clx-svc-page .svc-why-cta{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#FA4900;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;margin-left:auto;}
.clx-svc-page .svc-why-cta-t{text-decoration:underline;text-underline-offset:6px;}
.clx-svc-page .svc-why-cta::after{content:"\2192";text-decoration:none;transition:transform .2s;}
.clx-svc-page .svc-why-cta:hover{color:#FA4900;}
.clx-svc-page .svc-why-cta:hover::after{transform:translateX(5px);}
@media (max-width:900px){
  .clx-svc-page .svc-why-grid{grid-template-columns:1fr;gap:32px;}
  .clx-svc-page .svc-why-foot{flex-direction:column;align-items:flex-start;}
  .clx-svc-page .svc-why-cta{margin-left:0;}
}
@media (max-width:520px){
  .clx-svc-page .svc-why-right{grid-template-columns:1fr;}
}

/* ===== SECTION 7 — Teams We Support (concept persona box + live glyph + live fonts + concept dotted bullets) ===== */
.clx-svc-page .svc-teams-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px;}
/* persona cards link to the page's hero lead form — reset link styling */
.clx-svc-page a.svc-persona{text-decoration:none;color:inherit;}
.clx-svc-page a.svc-persona:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-persona{border:1px solid #e6e6ee;border-radius:16px;background:#fff;padding:32px 28px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;}
.clx-svc-page .svc-persona:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-persona-ic{width:44px;height:44px;color:#FA4900;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-persona-ic svg{width:34px;height:34px;stroke:currentColor;display:block;}
.clx-svc-page .svc-persona-t{font-family:'Cabin',sans-serif;font-size:20px;font-weight:800;line-height:1.3;color:#142533;margin:0 0 12px;}
.clx-svc-page .svc-persona-d{font-family:'Cabin',sans-serif;font-size:15px;line-height:26px;font-weight:400;color:#898D90;margin:0 0 22px;}
.clx-svc-page .svc-persona-label{font-family:'Cabin',sans-serif;font-size:13px;font-weight:700;letter-spacing:.4px;color:#898D90;margin:0 0 14px;}   /* uniform gap above bullets (no auto bottom-align) */
.clx-svc-page .svc-persona-foci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;}
.clx-svc-page .svc-persona-foci span{position:relative;padding-left:16px;font-family:'Cabin',sans-serif;font-size:13px;line-height:1.45;color:#33475a;}
.clx-svc-page .svc-persona-foci span::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:#FA4900;}
@media (max-width:900px){.clx-svc-page .svc-teams-grid{grid-template-columns:1fr;}}

/* ===== SECTION 8 — Industries (concept ind-card + live orange icons); reuses .svc-why-foot ===== */
.clx-svc-page .svc-ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:36px;}
.clx-svc-page .svc-ind-card{display:flex;align-items:center;gap:16px;border:1px solid #e6e6ee;border-radius:14px;padding:20px 22px;background:#fff;transition:transform .16s,box-shadow .16s,border-color .16s;}
.clx-svc-page .svc-ind-card:hover{border-color:#FA4900;box-shadow:0 10px 26px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .svc-ind-ic{width:40px;height:40px;flex:none;color:#FA4900;display:flex;align-items:center;justify-content:center;}
.clx-svc-page .svc-ind-ic svg{width:32px;height:32px;stroke:currentColor;display:block;}
.clx-svc-page .svc-ind-name{font-family:'Cabin',sans-serif;font-size:16px;font-weight:700;line-height:1.3;color:#142533;}

/* ===== SECTION 9 — A.I. System Design: concept dark banner + live fonts + white/orange stats ===== */
.clx-svc-page .svc-sysbanner{position:relative;margin-top:32px;border-radius:20px;background:linear-gradient(135deg,#182a3a 0%,#0f1c27 55%,#0a141c 100%);border:1px solid rgba(255,255,255,.08);padding:52px 56px;overflow:hidden;}
.clx-svc-page .svc-sysbanner-media{position:absolute;inset:0;z-index:0;}
.clx-svc-page .svc-sysbanner-media img{width:100%;height:100%;object-fit:cover;object-position:65% 40%;display:block;}
.clx-svc-page .svc-sysbanner-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(9,17,24,.85) 0%,rgba(10,20,28,.62) 52%,rgba(10,20,28,.40) 100%);}
.clx-svc-page .svc-sysbanner-in{position:relative;z-index:1;}
.clx-svc-page .svc-sysbanner-eyebrow{display:inline-block;font-family:'Cabin',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#fff;}
.clx-svc-page .svc-sysbanner-eyebrow::after{content:"";display:block;height:2px;border-radius:2px;background:#FA4900;margin-top:12px;}   /* full eyebrow-width orange line */
.clx-svc-page .svc-sysbanner-h{font-family:'Cabin',sans-serif;font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.3px;color:#fff;margin:14px 0 0;}

.clx-svc-page .svc-sysbanner-body{font-family:'DM Sans',sans-serif;font-size:16px;line-height:27px;font-weight:400;color:rgba(255,255,255,.86);margin:16px 0 0;max-width:760px;}
.clx-svc-page .svc-sysbanner-rule{border:0;border-top:1px solid rgba(255,255,255,.15);margin:28px 0;}
.clx-svc-page .svc-sysbanner-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.clx-svc-page .svc-sysbanner-stat{display:flex;flex-direction:column;}
.clx-svc-page .svc-sysbanner-stat .num{font-family:'Cabin',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.3px;color:#fff;line-height:1;white-space:nowrap;}   /* live hierarchy: 22px */
.clx-svc-page .svc-sysbanner-stat .num em{color:#FA4900;font-style:normal;}
.clx-svc-page .svc-sysbanner-stat .lbl{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:10px;}
@media (max-width:640px){.clx-svc-page .svc-sysbanner{padding:36px 26px;}.clx-svc-page .svc-sysbanner-stats{gap:28px;}}

/* ===== Reusable tabs (numbered nav — matches site .clx-eng-nav) + card-grid panels + hint ===== */
.clx-svc-page .svc-tabs-wrap{margin-top:36px;}
.clx-svc-page .svc-sysdesign .svc-tabs-wrap{margin-top:52px;}   /* extra space after the banner */
.clx-svc-page .svc-tabhint{font-family:'JetBrains Mono','DM Sans',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8E8E93;margin:0 0 12px;}
.clx-svc-page .svc-tabs{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:6px;}
.clx-svc-page .svc-tab{position:relative;display:flex;align-items:center;gap:16px;padding:6px 0 10px;cursor:pointer;background:none;border:0;font-family:inherit;user-select:none;}
.clx-svc-page .svc-tab::after{content:"";position:absolute;left:52px;right:0;bottom:0;height:2px;background:#FA4900;transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.6,.01,.25,1);}
.clx-svc-page .svc-tab.is-active::after{transform:scaleX(1);}
.clx-svc-page .svc-tnum{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#EFEFEF;color:#B0B0B0;font-family:'Cabin',sans-serif;font-size:14px;font-weight:600;flex-shrink:0;transition:background .2s,color .2s;}
.clx-svc-page .svc-tlabel{font-family:'Cabin',sans-serif;font-size:19px;color:#6B7280;font-weight:400;line-height:1.3;transition:color .2s,font-weight .2s;}
.clx-svc-page .svc-tcue{font-family:'Cabin',sans-serif;font-size:18px;color:#FA4900;font-weight:600;margin-left:4px;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s;}
.clx-svc-page .svc-tab:not(.is-active):hover .svc-tcue{opacity:1;transform:translateX(0);}
.clx-svc-page .svc-tab:hover .svc-tlabel{color:#1C1E21;}
.clx-svc-page .svc-tab.is-active .svc-tnum{background:#E8491D;color:#fff;}
.clx-svc-page .svc-tab.is-active .svc-tlabel{color:#1C1E21;font-weight:700;}
.clx-svc-page .svc-tab.is-active .svc-tcue{display:none;}
.clx-svc-page .svc-tabpanel{display:none;}
.clx-svc-page .svc-tabpanel.is-active{display:block;animation:svc-fade .3s ease;}
.clx-svc-page .svc-tabpanel-intro{font-family:'Cabin',sans-serif;font-size:18px;line-height:28px;font-weight:400;color:#727272;margin:18px 0 0;max-width:none;}
.clx-svc-page .svc-tabpanel .svc-offer-grid{margin-top:26px;}
@keyframes svc-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (max-width:640px){.clx-svc-page .svc-tabs{gap:22px;}.clx-svc-page .svc-tlabel{font-size:16px;}}

/* Mobile: keep the capability tabs side-by-side (no wrap) AND sticky to the
   top of the viewport as the user scrolls through the offerings section.
   Horizontal scroll if labels don't fit; page bg painted so tab strip stays
   readable over cards scrolling underneath. */
@media (max-width:768px){
  .clx-svc-page .svc-offer .svc-tabs-wrap{position:relative;}
  .clx-svc-page .svc-offer .svc-tabs{
    position:sticky;top:102px;z-index:20;
    background:#fff;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:12px 0;
    margin:0 -20px;
    padding-left:20px;padding-right:20px;
    box-shadow:0 6px 12px -8px rgba(20,37,51,.15);
  }
  .clx-svc-page .svc-offer .svc-tabs::-webkit-scrollbar{display:none;}
  .clx-svc-page .svc-offer .svc-tab{flex:0 0 auto;white-space:nowrap;}
}
/* smallest phones: two hero buttons can't sit side-by-side without clipping —
   stack them full-width so neither the copy nor the button overflows. */
@media (max-width:400px){
  .clx-svc-page .svc-actions{flex-direction:column;}
  .clx-svc-page .svc-actions .clxc-btn{width:100%;flex:0 0 auto;}
}

/* ===== SECTION 11 — Platforms (reuses homepage .clx-tp-* component; CSS/JS in platforms-assets.php) ===== */
.clx-svc-page .svc-platforms-wrap{margin-top:36px;}
.clx-svc-page .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;}

/* ---- responsive ---- */

/* tablet & down: stack the hero; cap + centre the form so it isn't oversized */
@media (max-width:1024px){
  .clx-svc-page .svc-sec{padding:56px 0;}
  .clx-svc-page .svc-hero{padding:28px 0 44px;}
  .clx-svc-page .svc-hero-g{grid-template-columns:1fr;gap:34px;}
  .clx-svc-page .svc-hero-left{order:1;}
  .clx-svc-page .svc-hero-form{order:2;justify-content:center;}
  .clx-svc-page .svc-hero-form .clx-zoho-card{max-width:560px;margin:0 auto;}
  .clx-svc-page .svc-hero-sub{max-width:none;}
}

/* phones */
@media (max-width:600px){
  .clx-svc-page .svc-in{padding:0 16px;}
  .clx-svc-page .svc-sec{padding:44px 0;}
  .clx-svc-page .svc-hero{padding:20px 0 36px;}
  .clx-svc-page .svc-eyebrow{font-size:18px;line-height:28px;}
  .clx-svc-page .svc-hero-form .clx-zoho-card{max-width:none;}
  .clx-svc-page .svc-actions{width:100%;}
  /* min-width:0 lets the two buttons shrink instead of forcing a few px of
     horizontal overflow; flex-basis 0 makes them share the row evenly. */
  .clx-svc-page .svc-actions .clxc-btn{flex:1 1 0;min-width:0;justify-content:center;padding-left:12px;padding-right:12px;}
  .clx-svc-page .svc-rating{gap:12px;}
  .clx-svc-page .svc-marquee-band{margin-top:28px;padding:16px 0;}
  .clx-svc-page .svc-mtrack{gap:36px;}
  .clx-svc-page .svc-mtrack img{height:26px;}
}

/* trim the platforms section's bottom padding so the CTA band sits close under it */
.clx-svc-page .svc-platforms{padding-bottom:40px;}

/* ============================================================
   SECTION 11b — "Your A.I. Cost Map In 5 Minutes" CTA band
   Full-bleed (edge-to-edge, concept) + flat black + bottom-flush
   image (live). Content column stays 1140.
   ============================================================ */
/* Contained to the 1140 content width, rounded card (concept .costmap) —
   NOT full-bleed. */
.clx-svc-page .svc-costmap{padding:0 20px 44px;}
.clx-svc-page .svc-costmap-in{
  max-width:1140px;margin:0 auto;
  background:#0e0e0f;border-radius:24px;overflow:hidden;   /* near-black rounded card */
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
}
.clx-svc-page .svc-costmap-media{align-self:stretch;min-height:100%;line-height:0;}
.clx-svc-page .svc-costmap-media img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center bottom;
}
.clx-svc-page .svc-costmap-text{
  align-self:center;padding:48px 56px;display:flex;flex-direction:column;
}
.clx-svc-page .svc-costmap-h{
  font-family:'Cabin',sans-serif;font-size:clamp(30px,3vw,44px);line-height:1.12;
  letter-spacing:-.5px;font-weight:700;color:#fff;margin:0;text-wrap:balance;
}
.clx-svc-page .svc-costmap-sub{
  font-family:'Cabin',sans-serif;font-size:18px;line-height:1.5;
  color:rgba(255,255,255,.78);margin:22px 0 0;max-width:420px;
}
.clx-svc-page .svc-costmap-cta{margin:34px 0 0;text-align:right;}
@media (max-width:760px){
  .clx-svc-page .svc-costmap{margin-top:-24px;}
  .clx-svc-page .svc-costmap-in{grid-template-columns:1fr;}
  .clx-svc-page .svc-costmap-media img{aspect-ratio:16/10;height:auto;}
  .clx-svc-page .svc-costmap-text{padding:32px 28px;}
}

/* ============================================================
   SECTION 12 — A.I. Engineering Engagement Models
   Concept layout (eng-intro 2-col, 5-col grouped card grid, tables),
   page card look (.svc-offer-card), live typography.
   ============================================================ */
/* intro: copy left, image+chip right */
.clx-svc-page .svc-eng-intro{display:grid;grid-template-columns:1fr .8fr;gap:36px;align-items:stretch;margin:34px 0 34px;}
.clx-svc-page .svc-eng-intro-copy{display:flex;flex-direction:column;}
/* subhead — matched to the architecture "after launch" headline */
.clx-svc-page .svc-eng-subhead{font-family:'Cabin',sans-serif;font-size:18px;font-weight:700;line-height:1.4;color:#142533;letter-spacing:-.3px;margin:0 0 6px;}
/* When a lead paragraph precedes it (ERP, SEO) the flex column gave it no
   breathing room and the subhead sat flush against the copy above. Pages where
   the subhead comes first (AI, low code) are unaffected by :not(:first-child). */
.clx-svc-page .svc-eng-subhead:not(:first-child){margin-top:22px;}
.clx-svc-page .svc-eng-subsub{font-family:'Cabin',sans-serif;font-size:16px;line-height:1.55;color:#727272;margin:0;}
.clx-svc-page .svc-eng-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:auto;padding-top:26px;}
.clx-svc-page .svc-eng-stat{border:1px solid var(--svc-line-2);border-radius:14px;padding:20px 12px;background:var(--svc-paper);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.clx-svc-page .svc-eng-stat .n{font-family:'Cabin',sans-serif;font-size:clamp(22px,2vw,26px);font-weight:800;color:#142533;letter-spacing:-.5px;line-height:1.1;text-wrap:balance;}
.clx-svc-page .svc-eng-stat .l{font-family:'Cabin',sans-serif;font-size:13px;color:#727272;margin-top:8px;line-height:1.35;text-wrap:balance;}
/* image + chip */
.clx-svc-page .svc-eng-imgwrap{position:relative;border-radius:18px;overflow:hidden;min-height:260px;background:var(--svc-paper);}
.clx-svc-page .svc-eng-imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.clx-svc-page .svc-eng-chip{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:12px;padding:12px 16px;box-shadow:0 10px 30px -12px rgba(20,37,51,.4);}
.clx-svc-page .svc-eng-chip .dot{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#F57E07,#FA4900);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;}
.clx-svc-page .svc-eng-chip span:last-child{font-family:'Cabin',sans-serif;font-size:14px;font-weight:600;color:#142533;line-height:1.35;}

/* card grid: concept 5-col grouped layout */
.clx-svc-page .svc-eng-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:auto 1fr;gap:8px 14px;align-items:stretch;margin:28px 0 0;}
.clx-svc-page .svc-eng-grouphdr{grid-column:2 / 4;grid-row:1;display:flex;align-items:center;gap:8px;font-family:'Cabin',sans-serif;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--svc-orange);padding:0 2px;}
.clx-svc-page .svc-eng-grouphdr::after{content:"";flex:1;height:1px;background:var(--svc-orange);opacity:.4;}
.clx-svc-page .m-c1{grid-column:1;}.clx-svc-page .m-c2{grid-column:2;}.clx-svc-page .m-c3{grid-column:3;}.clx-svc-page .m-c4{grid-column:4;}.clx-svc-page .m-c5{grid-column:5;}
/* card look = page .svc-offer-card, but left-aligned, tighter, with a foot */
.clx-svc-page .svc-eng-model{grid-row:2;display:flex;flex-direction:column;text-align:left;padding:20px 18px;min-width:0;}
.clx-svc-page .svc-eng-model.is-grouped{border-color:var(--svc-orange);}
.clx-svc-page .svc-eng-mt{font-family:'Cabin',sans-serif;font-size:16px;font-weight:700;line-height:1.25;letter-spacing:-.2px;color:#142533;margin:0 0 8px;overflow-wrap:anywhere;}
.clx-svc-page .svc-eng-ms{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.55;color:#898D90;margin:0;overflow-wrap:anywhere;}
.clx-svc-page .svc-eng-foot{margin-top:auto;padding-top:14px;display:flex;justify-content:flex-end;border-top:1px solid var(--svc-line);}
.clx-svc-page .svc-eng-ms{margin-bottom:16px;}
.clx-svc-page .svc-eng-cta{display:inline-flex;align-items:center;gap:7px;color:var(--svc-orange);font-family:'DM Sans',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;white-space:nowrap;}
.clx-svc-page .svc-eng-cta span{transition:transform .2s;}
.clx-svc-page .svc-eng-cta:hover{color:var(--svc-orange);}
.clx-svc-page .svc-eng-cta:hover span{transform:translateX(4px);}

/* table caption = simple h3 */
.clx-svc-page .svc-eng-tblcap{font-family:'Cabin',sans-serif;font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.3px;color:#142533;margin:48px 0 18px;}
/* site standard gray table (matches live .clx-eng-table-ai / .clx-llm-table) */
.clx-svc-page .svc-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.clx-svc-page .svc-table table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;margin:0;border:1px solid #D8D8D8;background:#fff;}
.clx-svc-page .svc-table thead th{font-family:'Cabin',sans-serif;font-size:15px;font-weight:600;line-height:22px;color:#1C1E21;text-align:left;vertical-align:middle;padding:16px 18px;background:#F8F8F8;border-left:1px solid #EAEAEA !important;border-top:0 !important;border-right:0 !important;border-bottom:0 !important;}
.clx-svc-page .svc-table thead th:first-child{border-left:0 !important;}
.clx-svc-page .svc-table tbody td{font-family:'DM Sans',sans-serif;font-size:15px;line-height:26px;color:#5C5C66;font-weight:400;padding:18px;vertical-align:top;text-align:left;background:#fff;border-left:1px solid #EAEAEA !important;border-top:1px solid #EAEAEA !important;border-right:0 !important;border-bottom:0 !important;overflow-wrap:break-word;}
.clx-svc-page .svc-table tbody td:first-child{border-left:0 !important;font-weight:600;color:#1C1E21;font-family:'Cabin',sans-serif;}

/* --- responsive --- */
@media (max-width:960px){
  .clx-svc-page .svc-eng-intro{grid-template-columns:1fr;gap:22px;}
  .clx-svc-page .svc-eng-imgwrap{min-height:220px;}
  /* Auto-placement follows DOM order, where the group header comes FIRST — so it
     landed above card 1 and labelled the wrong card. Reorder so it still heads the
     grouped pair (m-c2 / m-c3), as it does on desktop. */
  .clx-svc-page .svc-eng-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto;}
  /* grid-row must be released too: an explicitly-placed item ignores `order`,
     so with the base `grid-row:1` still in force the header stayed pinned to the
     first row no matter what order it was given. */
  .clx-svc-page .svc-eng-grouphdr{grid-column:1 / -1;grid-row:auto;order:2;}
  .clx-svc-page .svc-eng-model{grid-row:auto;grid-column:auto !important;}
  .clx-svc-page .m-c1{grid-column:1 / -1 !important;order:1;}
  .clx-svc-page .m-c2{order:3;}
  .clx-svc-page .m-c3{order:4;}
  .clx-svc-page .m-c4{order:5;}
  .clx-svc-page .m-c5{order:6;}
}
@media (max-width:620px){
  .clx-svc-page .svc-eng-stats{grid-template-columns:repeat(2,1fr);}
  .clx-svc-page .svc-eng-grid{grid-template-columns:1fr;}
  .clx-svc-page .svc-eng-tblcap{font-size:20px;}
}

/* engagement footer CTA: separator + text left + right-aligned link */
.clx-svc-page .svc-eng-estimate{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:44px;padding-top:32px;border-top:1px solid var(--svc-line);}
@media (max-width:620px){.clx-svc-page .svc-eng-estimate{flex-direction:column;align-items:flex-start;}}

/* ============================================================
   SECTION 13 — A.I. System Security & Compliance
   Concept layout (dark rounded banner, image-left/copy-right, tabbed
   pillars) with LIVE type/color mapping. Scoped, self-contained.
   ============================================================ */
.clx-svc-page .svc-secbanner{display:grid;grid-template-columns:.82fr 1fr;background:#0e0e0f;border-radius:24px;overflow:hidden;color:#fff;}
.clx-svc-page .svc-secbanner-media{position:relative;min-height:100%;background:#1a1a1c;}
.clx-svc-page .svc-secbanner-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.clx-svc-page .svc-secbanner-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,15,0) 55%,rgba(14,14,15,.95) 100%),linear-gradient(0deg,rgba(14,14,15,.35),rgba(14,14,15,0) 40%);}
.clx-svc-page .svc-secbanner-copy{padding:48px 52px;min-width:0;}
/* live type/color */
.clx-svc-page .svc-secbanner-eyebrow{display:inline-block;font-family:'Cabin',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--svc-orange);margin-bottom:14px;}
.clx-svc-page .svc-secbanner-eyebrow::after{content:"";display:block;height:2px;border-radius:2px;background:var(--svc-orange);margin-top:12px;}
.clx-svc-page .svc-secbanner-h{font-family:'Cabin',sans-serif;font-size:clamp(26px,2.5vw,32px);font-weight:700;line-height:1.18;letter-spacing:-.3px;color:#fff;margin:0 0 16px;}
.clx-svc-page .svc-secbanner-body{font-family:'Cabin',sans-serif;font-size:16px;line-height:1.6;color:rgba(255,255,255,.86);margin:0;max-width:560px;}
.clx-svc-page .svc-secbanner-rule{border:none;height:1px;background:rgba(255,255,255,.18);margin:24px 0 20px;}
/* tabs — concept underline layout, live colors */
.clx-svc-page .svc-sectabs{display:flex;gap:26px;flex-wrap:wrap;position:relative;}
.clx-svc-page .svc-sectab{background:none;border:none;cursor:pointer;font-family:'Cabin',sans-serif;display:flex;align-items:baseline;gap:7px;padding:0 0 12px;color:rgba(255,255,255,.5);border-bottom:2px solid transparent;transition:.18s;}
.clx-svc-page .svc-sectab .n{font-family:'Cabin',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;}
.clx-svc-page .svc-sectab .nm{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.clx-svc-page .svc-sectab:hover{color:rgba(255,255,255,.82);}
.clx-svc-page .svc-sectab.is-active{color:#fff;border-bottom-color:var(--svc-orange);}
/* panels */
.clx-svc-page .svc-secpanels{margin-top:24px;}
.clx-svc-page .svc-secpanel{display:block;}
.clx-svc-page .svc-secpanel[hidden]{display:none;}
.clx-svc-page .svc-secpanel h3{font-family:'Cabin',sans-serif;font-size:20px;font-weight:700;line-height:1.25;color:#fff;margin:0 0 16px;}
.clx-svc-page .svc-secpanel h3 .sub{font-weight:400;color:rgba(255,255,255,.6);font-size:15px;}
.clx-svc-page .svc-secitems{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;}
.clx-svc-page .svc-secitem{display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:2px solid rgba(250,73,0,.55);}
.clx-svc-page .svc-secitem .lbl{font-family:'Cabin',sans-serif;font-size:13.5px;font-weight:600;color:#fff;}
.clx-svc-page .svc-secitem .note{font-family:'DM Sans',sans-serif;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);}
.clx-svc-page .svc-secimpact{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-family:'Cabin',sans-serif;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82);display:flex;gap:11px;}
.clx-svc-page .svc-secimpact::before{content:"";flex:none;width:9px;height:9px;margin-top:5px;border-radius:50%;background:var(--svc-orange);box-shadow:0 0 0 4px rgba(250,73,0,.22);}
@media (max-width:860px){
  .clx-svc-page .svc-secbanner{grid-template-columns:1fr;}
  .clx-svc-page .svc-secbanner-media{min-height:240px;}
  .clx-svc-page .svc-secbanner-copy{padding:32px 26px;}
  .clx-svc-page .svc-secitems{grid-template-columns:1fr;}
  .clx-svc-page .svc-sectabs{gap:18px;}
}
.clx-svc-page .svc-table td em{color:var(--svc-orange);font-style:normal;font-weight:600;}

/* ============================================================
   SECTION 14 — The Standards Your CISO Will Ask For (compact logo grid)
   ============================================================ */
.clx-svc-page .svc-cert-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 16px;margin:36px 0 0;}
/* no boxes — logos sit clean; label uses the standard card-title heading */
.clx-svc-page .svc-cert-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;text-align:center;}
.clx-svc-page .svc-cert-logo{width:auto;height:60px;max-width:100%;object-fit:contain;}
.clx-svc-page .svc-cert-label{font-family:'Cabin',sans-serif;font-size:18px;font-weight:700;color:#142533;line-height:1.3;}
.clx-svc-page .svc-cert-foot{margin-top:36px;padding-top:32px;border-top:1px solid var(--svc-line);}
@media (min-width:900px){.clx-svc-page .svc-cert-foot{flex-wrap:nowrap;align-items:center;}.clx-svc-page .svc-cert-foot .svc-why-foottext{flex:1 1 0;min-width:0;max-width:none;}}

@media (max-width:1024px){.clx-svc-page .svc-cert-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.clx-svc-page .svc-cert-grid{grid-template-columns:repeat(2,1fr);}}

/* ------------------------------------------------------------------
   homepage.css (loaded for the cloned bottom widgets) applies
   `body.page .elementor h1-h6 { color: var(--hp-dark) !important }`,
   which greys out headings on OUR dark-background sections. Re-assert
   white with a more specific selector (3 classes > their 2). Bounded:
   only headings bleed — no p/link/font rules in that homepage block.
   ------------------------------------------------------------------ */
body.page .clx-svc-page .svc-costmap-h,
body.page .clx-svc-page .svc-secbanner-h,
body.page .clx-svc-page .svc-sysbanner-h,
body.page .clx-svc-page .svc-secpanel h3{color:#fff !important;}

/* ============================================================
   Mobile TOC — FAB + bottom sheet (shown < 1548px, where the
   desktop right-margin overlay is hidden). Scoped, self-contained.
   ============================================================ */
/* FAB sits bottom-LEFT (the site's live-chat widget is bottom-right) and stays
   hidden until scrolled into the chapter range. Smaller on phones so it isn't
   a second big floating widget competing with the chat launcher. */
.clx-svc-page .svc-toc-fab{position:fixed;left:18px;right:auto;bottom:18px;z-index:60;width:48px;height:48px;border-radius:50%;border:none;background:var(--svc-orange);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(250,73,0,.42);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s ease,visibility .22s ease,transform .22s ease,box-shadow .18s ease;}
.clx-svc-page .svc-toc-fab.is-visible{opacity:1;visibility:visible;transform:none;}
.clx-svc-page .svc-toc-fab:hover{box-shadow:0 16px 34px rgba(250,73,0,.5);}
@media (max-width:600px){ .clx-svc-page .svc-toc-fab{width:42px;height:42px;left:14px;bottom:14px;} .clx-svc-page .svc-toc-fab svg{width:17px;height:17px;} }
@media (min-width:1548px){ .clx-svc-page .svc-toc-fab{display:none;} }
.clx-svc-page .svc-toc-sheet{position:fixed;inset:0;z-index:70;display:none;}
.clx-svc-page .svc-toc-sheet.is-open{display:block;}
.clx-svc-page .svc-toc-backdrop{position:absolute;inset:0;background:rgba(10,14,20,.5);opacity:0;transition:opacity .2s;}
.clx-svc-page .svc-toc-sheet.is-open .svc-toc-backdrop{opacity:1;}
.clx-svc-page .svc-toc-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;padding:14px 16px calc(20px + env(safe-area-inset-bottom));max-height:72vh;overflow:auto;transform:translateY(100%);transition:transform .28s cubic-bezier(.4,.2,.2,1);box-shadow:0 -12px 40px rgba(10,14,20,.3);}
.clx-svc-page .svc-toc-sheet.is-open .svc-toc-panel{transform:translateY(0);}
.clx-svc-page .svc-toc-panel-h{display:flex;align-items:center;justify-content:space-between;font-family:'Cabin',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--svc-muted);padding:4px 4px 12px;border-bottom:1px solid var(--svc-line);}
.clx-svc-page .svc-toc-close{background:none;border:none;font-size:26px;line-height:1;color:var(--svc-muted);cursor:pointer;padding:0 6px;}
.clx-svc-page .svc-toc-panel-links{display:grid;gap:2px;padding-top:8px;}
.clx-svc-page .svc-toc-panel-links a{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--svc-ink);padding:11px 8px;border-radius:9px;text-decoration:none;}
.clx-svc-page .svc-toc-panel-links a .i{font-family:'Cabin',sans-serif;font-size:12px;font-weight:600;color:var(--svc-muted);}
.clx-svc-page .svc-toc-panel-links a.on{background:var(--svc-orange-soft);color:#b5390a;font-weight:600;}
.clx-svc-page .svc-toc-panel-links a.on .i{color:#b5390a;}

/* tables: keep columns readable on small screens — scroll instead of cramming */
.clx-svc-page .svc-table table{min-width:620px;}

/* Sticky-header offset: in-page anchor jumps (hero Capabilities/Results, TOC,
   contact CTAs) must land ON the section heading, not under the 122px fixed
   header (49px top-bar + 73px nav). */
.clx-svc-page .svc-sec[id],
.clx-svc-page #lead-form,
#case-studies, #contact, #faq, #blogs{scroll-margin-top:130px;}

/* svc-appr-stats-row — 4-col stat row below the intro. Typography values
   mirror the homepage clxc-proof numeric tokens (Cabin ink, orange <em> unit)
   used on /our-solutions/. Row layout because the tokens sit under a 2-col
   intro; on mobile it stacks 2-up then 1-up. Source line is footnoted
   (12px italic, light gray). NO new tokens invented. */
.clx-svc-page .svc-appr-stats-row { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.clx-svc-page .svc-appr-stat { padding: 0; }
.clx-svc-page .svc-appr-n {
  font-family: 'Cabin', sans-serif;
  font-size: clamp(30px, 2.8vw, 38px); font-weight: 700;
  color: #142533; letter-spacing: -.5px; line-height: 1.1;
}
.clx-svc-page .svc-appr-n em { color: #FA4900; font-style: normal; }
.clx-svc-page .svc-appr-d { font-family: 'Cabin', sans-serif; font-size: 14px; color: #142533; line-height: 1.5; margin: 8px 0 6px; }
.clx-svc-page .svc-appr-src { font-family: 'Cabin', sans-serif; font-size: 11px; color: #AEB4BB; font-style: italic; margin: 0; line-height: 1.4; }
@media (max-width: 900px) {
  .clx-svc-page .svc-appr-stats-row { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 560px) {
  .clx-svc-page .svc-appr-stats-row { grid-template-columns: 1fr; gap: 22px; }
}

/* ==================================================================
   svc-appr-framework — stacked layout: intro (full width) | animation
   (full width) | 3-col descriptions positioned directly under each
   .cm__steps rail cell above (heading + description share a column).
   Description grid uses the same repeat(3,minmax(0,1fr)) template
   as .cm__steps so they line up exactly.
   ================================================================== */
.clx-svc-page .svc-appr-fw-intro { font-family:'Cabin',sans-serif; font-size:17px; line-height:1.6; color:#142533; margin:24px 0 28px; }
.clx-svc-page .svc-appr-fw-anim { margin: 0 0 20px; }
.clx-svc-page .svc-appr-fw-descs { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin: 0; }
.clx-svc-page .svc-appr-fw-d { font-family:'Cabin',sans-serif; font-size:14px; line-height:1.55; color:#142533; margin:0; padding: 0 2px; }
@media (max-width: 900px) {
  .clx-svc-page .svc-appr-fw-descs { grid-template-columns: 1fr; gap: 18px; }
}

/* ==================================================================
   Containment Method - Scattered Points animation.
   Copied verbatim from Claude Design project "Clixlogix website",
   file "Containment Method - Scattered Points (drop-in).html". Kept
   under .clx-svc-page scope so it never leaks off this page.
   ================================================================== */
.clx-svc-page .cm{--cm-orange:#FA4900;--cm-navy:#142533;--cm-body:#6C7A85;--cm-rule:#E7EAEC;--cm-dim:#BFC6CA;
  container-type:inline-size;font-family:'Cabin',system-ui,sans-serif}
.clx-svc-page .cm__stage{position:relative;width:100%;aspect-ratio:620/300;min-height:180px;max-height:340px;margin-inline:auto}
.clx-svc-page .cm__stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.clx-svc-page .cm__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(14px,2cqw,22px)}
.clx-svc-page .cm__step{border-top:2px solid var(--cm-rule);padding-top:9px;min-width:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:clamp(9.5px,1.05cqw,11.5px);
  letter-spacing:.09em;text-transform:uppercase;color:var(--cm-dim);
  transition:color .35s ease,border-color .35s ease}
.clx-svc-page .cm__step b{display:block;font-family:'Cabin',system-ui,sans-serif;font-size:clamp(12px,1.35cqw,15px);
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--cm-dim);margin-top:3px;transition:color .35s ease}
.clx-svc-page .cm__step.is-on{color:var(--cm-orange);border-top-color:var(--cm-orange)}
.clx-svc-page .cm__step.is-on b{color:var(--cm-navy)}
.clx-svc-page .cm__step.is-past{color:var(--cm-body);border-top-color:#F4CDBB}
.clx-svc-page .cm__step.is-past b{color:var(--cm-body)}
@container (max-width:420px){
  .clx-svc-page .cm__steps{grid-template-columns:1fr;gap:0}
  .clx-svc-page .cm__step{border-top:none;border-left:2px solid var(--cm-rule);padding:4px 0 4px 12px}
  .clx-svc-page .cm__step.is-on{border-left-color:var(--cm-orange)}
  .clx-svc-page .cm__step.is-past{border-left-color:#F4CDBB}
  .clx-svc-page .cm__step b{display:inline;margin-left:6px}
}
@media (prefers-reduced-motion:reduce){.clx-svc-page .cm__step{transition:none}}

/* ===== Case Studies (vibe) — match AI page layout ===================
   Isotope inits via an inline boot script inside parts/case-studies.php,
   so the flex overrides that were forcing a fallback grid are gone —
   Isotope handles positioning. Remaining page-level deltas from AI page:
   the .svc-in wrapper caps too narrow, the container inside was too wide,
   and the subtitle color drifted from the theme default. */
.clx-svc-page .vibe-casestudies .axil-portfolio-area > .container.axil-masonary-wrapper{max-width:1140px !important;padding-left:20px !important;padding-right:20px !important;}
.clx-svc-page .vibe-casestudies .section-title .subtitle-2{color:#898D90 !important;max-width:none !important;text-align:center !important;padding:0 !important;}
.clx-svc-page .vibe-casestudies .section-title h2.title,
.clx-svc-page .vibe-casestudies .section-title .title{font-family:'Cabin',sans-serif !important;}
.clx-svc-page .vibe-casestudies .mesonry-list.grid-metro3{margin-top:32px !important;}
.clx-svc-page .vibe-casestudies .portfolio .thumb img{object-fit:cover !important;}
/* Full-viewport-width gray band: break out of the .clx-svc-page container. */
.clx-svc-page .vibe-casestudies{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}

/* ===== Contact — 2-col layout matching AI page (form 58 / getintouch 42).
   Elementor column classes need explicit flex layout since we render outside
   Elementor's frontend renderer. Full-viewport section bg via same 100vw
   breakout used above. .clx-getintouch rules ship in homepage.css. */
.clx-svc-page .clx-contact-section{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:#F8F8F8;padding:60px 0;}
.clx-svc-page .clx-contact-section > .elementor-container{max-width:1140px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;}
.clx-svc-page .clx-contact-section .elementor-col-58{flex:0 0 calc(58% - 20px);max-width:calc(58% - 20px);}
.clx-svc-page .clx-contact-section .elementor-col-42{flex:0 0 calc(42% - 20px);max-width:calc(42% - 20px);}
@media (max-width:900px){
  .clx-svc-page .clx-contact-section .elementor-col-58,
  .clx-svc-page .clx-contact-section .elementor-col-42{flex:0 0 100%;max-width:100%;}
}

/* Sticky position:sticky fails when any ancestor has overflow != visible.
   The theme's critical CSS (inc/critical/service-legacy.css) sets
   body{overflow:hidden} which clips vertical scroll for sticky descendants.
   Restore overflow-y:visible on this page only (keep overflow-x:hidden so
   the 100vw case-studies/contact breakouts don't induce a horizontal
   scrollbar). Scoped by the page slug's body class. */
body.page-vibe-coding-cleanup-services{overflow-x:clip !important;overflow-y:visible !important;}