/* =====================================================================
   clx-svc-zoho  —  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:minmax(0,1.12fr) minmax(0,.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;max-width:130px;object-fit:contain;opacity:.6;filter:grayscale(1);transition:opacity .2s,filter .2s;}
/* max-width caps long wordmarks. Elite Capital Group is a 6.3:1 mark, so
   sizing on height alone rendered it 201px against 88px for the rest.
   object-fit:contain keeps it undistorted; the cap is inert for the others. */
.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;}
/* Zoho licence pricing table — reuses .svc-table wholesale; only the free-tier
   sub-label and the as-of footnote are new. */
.clx-svc-page .svc-plans-free{font-size:13px;line-height:18px;color:#898D90;}
.clx-svc-page .svc-plans-note{font-family:'Cabin',sans-serif;font-size:14px;line-height:22px;color:#898D90;margin:18px 0 0;}
/* Verified-on badge. Vendor pricing ages, so the date is part of the table's
   credibility rather than fine print. */
.clx-svc-page .svc-plans-asof{margin:14px 0 20px;}
.clx-svc-page .svc-plans-asof span{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#FA4900;background:#FFF1EC;border:1px solid #FFD5C7;border-radius:999px;padding:7px 14px;}
.clx-svc-page .svc-plans-asof span::before{content:"";width:7px;height:7px;border-radius:50%;background:#FA4900;flex:none;}
/* .svc-sec-intro has margin:0, so an intro sitting directly above a table left
   the two touching. Not scoped to one section — it applies wherever the pattern
   occurs (plans and engagement today), so the next table does not need its own
   one-off rule. */
.clx-svc-page .svc-sec-intro + .svc-table{margin-top:24px;}
/* FAQ intro needs air on both sides — .svc-sec-intro is margin:0 and the
   accordion that follows brings none of its own. */
.clx-svc-page .svc-faq-intro{margin:14px 0 30px;}

/* ── Latest Zoho Updates: this month's releases as cards ─────────────────── */
.clx-svc-page .zupd-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.clx-svc-page .zupd-eyebrow{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#FA4900;}
.clx-svc-page .zupd-month{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#898D90;background:#F5F5F7;border-radius:999px;padding:5px 12px;}
.clx-svc-page .zupd-intro{margin-bottom:0;}
.clx-svc-page .zupd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:30px 0 0;padding-left:0;list-style:none;}
.clx-svc-page .zupd-card{margin:0;}
.clx-svc-page .zupd-link{display:flex;flex-direction:column;height:100%;gap:10px;border:1px solid #e6e6ee;border-radius:16px;background:#fff;padding:24px 22px;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;}
.clx-svc-page .zupd-link:hover{border-color:#FA4900;box-shadow:0 12px 30px -18px rgba(20,37,51,.35);transform:translateY(-2px);}
.clx-svc-page .zupd-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.clx-svc-page .zupd-chip{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#FA4900;background:#FFF1EC;border-radius:999px;padding:5px 11px;}
/* Cards can span two months when the newest is thin, so each carries its own
   month rather than relying on one label at the top of the section. */
.clx-svc-page .zupd-card-month{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#898D90;}
.clx-svc-page .zupd-card-t{font-family:'Cabin',sans-serif;font-size:17px;line-height:25px;font-weight:700;color:#142533;}
.clx-svc-page .zupd-card-d{font-family:'Cabin',sans-serif;font-size:14px;line-height:24px;color:#727272;}
@media (max-width:700px){
  .clx-svc-page .zupd-grid{grid-template-columns:1fr;}
  .clx-svc-page .zupd-link{padding:20px 18px;}
  .clx-svc-page .zupd-foot{flex-direction:column;}
}
.clx-svc-page .svc-plans .svc-eng-tblcap{margin-top:38px;}
/* Extra breathing room above the closing CTA — the caveat note sits directly
   above it, so the default rule margin read as cramped. */
.clx-svc-page .svc-plans-rule{margin-top:34px;}
.clx-svc-page .svc-plans-note a{color:#FA4900;text-decoration:underline;text-underline-offset:3px;}

/* ===== SECTION 4 — Core Offerings: concept card (crisp white + border) + LIVE orange inline icons + LIVE fonts ===== */
/* minmax(0,1fr) not 1fr: 1fr floors at min-content, so one card with an
   unshrinkable child (.svc-why-cta is nowrap) widens its own column and
   squeezes the others. Keeps all four columns equal whatever the labels say. */
.clx-svc-page .svc-offer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,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;}
/* Router cards (consulting / implementation / development) carry a link to their
   own page; the other five are owned by this hub and have none. Reuses the
   shipped .svc-why-cta so no card link component is needed — only the gap under
   the description is new. */
.clx-svc-page .svc-offer-card .svc-why-cta{margin-top:18px;}
@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 */
/* Row 1 holds the two banners and is sized by their 4:3 artwork; rows 2 and 3
   hold the stat cards and split whatever height is left. The source page used
   grid-auto-rows:1fr throughout, which forced all three rows equal and made the
   banner row's height a function of the BULLET COUNT in the left column rather
   than of the images (8 bullets here vs 7 on the source = 204px rows vs 177px).
   Sizing row 1 to the art means no crop and no dead space under the banners. */
.clx-svc-page .svc-why-right{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px;height:100%;}
/* The badge tile shares a grid ROW with the stat cards, so its height is set by
   the tallest card in that row, not by the image. At desktop that makes the tile
   ~214x204 — essentially SQUARE (1.05:1), not 4:3.

   An earlier fix here set aspect-ratio:4/3 to stop a 4:3 banner being cropped.
   That worked, but it made the tile 161px tall inside a 204px row and left 43px
   of dead space under each banner. Stretching to fill the row (the source page's
   behaviour) is correct; the artwork has to match the box instead.

   BANNERS ARE 4:3 (1200x900 min). The tile matches that ratio exactly, so
   object-fit:cover crops nothing. */
/* Banners are 1:1 (1254x1254). The tile previously took its height from the
   grid row, which is driven by the bullet list beside it — at mobile that made
   a 310x137 box (2.27:1) and object-fit:cover sliced 56% off the top and bottom,
   cutting the headline off both banners. Matching the artwork ratio means cover
   crops nothing at any width. Supply banners square. */
.clx-svc-page .svc-why-badge{border:1px solid #e6e6ee;border-radius:16px;background:#0b0a1f;overflow:hidden;position:relative;aspect-ratio:1/1;min-height:0;}
.clx-svc-page .svc-why-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* Placeholder state — shown until the artwork exists on disk, so the layout can
   be reviewed and the slot is obviously pending rather than silently absent. */
.clx-svc-page .svc-why-badge--ph{background:#fafafc;border-style:dashed;border-color:#c9c9d6;display:flex;align-items:center;justify-content:center;text-align:center;}
.clx-svc-page .svc-why-badge-ph{font-family:'Cabin',sans-serif;font-size:13px;line-height:20px;color:#898D90;padding:12px;}
.clx-svc-page .svc-why-badge-ph strong{display:block;font-size:15px;color:#142533;margin-bottom:4px;}
.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:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
/* CTA aligns to the paragraph's FIRST line rather than the block's centre —
   with a 3 line paragraph, centring floated it 26px down, mid text. */
.clx-svc-page .svc-why-foot .svc-why-cta{margin-top:2px;}
.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;}
  /* nowrap keeps the arrow on the label line at desktop, but a long CTA
     ("Explore client security & compliance") then cannot break and pushes the
     page into horizontal scroll at 360px. Let it wrap once the row has already
     gone vertical. */
  .clx-svc-page .svc-why-cta{margin-left:0;white-space:normal;}
}
@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;}
/* Industry tiles that link to their /industries/ page. The card is an <a>, so it
   needs the anchor defaults neutralised — the tile already carries its own hover
   state and must look identical to the unlinked tiles beside it. */
.clx-svc-page a.svc-ind-card{text-decoration:none;color:inherit;}
.clx-svc-page a.svc-ind-card:hover .svc-ind-name{color:#FA4900;}

/* ===== 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;}
  /* minmax(0,1fr) not 1fr: a plain fr track floors at min-content, so an
     unshrinkable child inflated the track to 393px inside a 350px container
     at 430px wide and pushed the page into horizontal scroll. */
  .clx-svc-page .svc-hero-g{grid-template-columns:minmax(0,1fr);gap:34px;}
  .clx-svc-page .svc-hero-left{min-width:0;}
  .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 — 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 .zoho-casestudies .axil-portfolio-area > .container.axil-masonary-wrapper{max-width:1140px !important;padding-left:20px !important;padding-right:20px !important;}
.clx-svc-page .zoho-casestudies .section-title .subtitle-2{color:#898D90 !important;max-width:none !important;text-align:center !important;padding:0 !important;}
.clx-svc-page .zoho-casestudies .section-title h2.title,
.clx-svc-page .zoho-casestudies .section-title .title{font-family:'Cabin',sans-serif !important;}
.clx-svc-page .zoho-casestudies .mesonry-list.grid-metro3{margin-top:32px !important;}
.clx-svc-page .zoho-casestudies .portfolio .thumb img{object-fit:cover !important;}
/* Full-viewport-width gray band: break out of the .clx-svc-page container. */
.clx-svc-page .zoho-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. */
/* Both slugs listed so the guard survives the rename from the working slug
   (zoho-redesign) to the live one (zoho-services). A slug-scoped rule that
   matches nothing fails silently — this one arrived from the clone still
   pointing at the Vibe page and was doing nothing here. */
body.page-zoho-redesign,
body.page-zoho-services{overflow-x:clip !important;overflow-y:visible !important;}

/* homepage.min.css ships `body.elementor-page .elementor-top-section >
   .elementor-container{max-width:var(--hp-max-w)}`, which leaks onto every
   service page on the homepage-CSS allowlist and caps the Elementor container. It is !important there, so this override must be too.
   That squeezes .svc-in to ~1044px instead of its designed 1140px. Scoped
   override so the family renders at its intended width. 2026-08-26. */
body.elementor-page .elementor-top-section:has(.clx-svc-page) > .elementor-container{max-width:none !important;}

/* ============================================================
   SECTION 2 — "why Clixlogix" : prose + hub-and-spoke diagram
   Flat marks in fixed slots on a flat plane; motion is in the
   connector pulses, so nothing turns edge on. 2026-08-26.
   ============================================================ */
.clx-svc-page .zho-why-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);
  gap:56px;align-items:center;
}
/* H2 inherits .svc-appr-h2 from the family (Cabin 500, clamp(32px,4.6vw,52px),
   letter-spacing -1.56px). Only the trailing gap is set here — overriding the
   size broke type parity with the sibling pages. */
.clx-svc-page .zho-why-copy .svc-appr-h2{margin:0 0 20px;text-wrap:balance;}
.clx-svc-page .zho-why-copy p{margin:0 0 16px;}
.clx-svc-page .zho-why-claim{font-weight:600;color:#142533 !important;}

/* ---- diagram ---- */
/* A rotating element's bounding box grows toward sqrt(2)x its size, so the
   254px orbit layer measures ~350px wide mid-spin and pushed the page into
   horizontal scroll at 390px (body scrollWidth 413 vs 390). The tiles themselves
   stay inside the circle, so clipping the section costs nothing visible — only
   the empty rotated corners are trimmed. `clip` rather than `hidden` so no
   scroll container is created. */
.clx-svc-page .zho-why{overflow-x:clip;}
.clx-svc-page .zho-why-viz{display:flex;justify-content:center;overflow-x:clip;}
.clx-svc-page .zho-hub{
  position:relative;width:100%;max-width:440px;aspect-ratio:1/1;
}
.clx-svc-page .zho-hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.clx-svc-page .zho-ring{
  fill:none;stroke:rgba(28,30,33,.07);stroke-width:1;
}

/* core */
.clx-svc-page .zho-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:130px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
/* Centre states OUR delivery, not Zoho's product architecture — this is a
   service page. No brand mark here by owner direction 2026-08-26. */
.clx-svc-page .zho-core-l1{
  font-size:17px;font-weight:700;line-height:1.05;color:#FA4900;letter-spacing:-.2px;
}
.clx-svc-page .zho-core-l2{
  font-size:11.5px;line-height:1.3;margin-top:4px;color:#6C7178;
  letter-spacing:.02em;
}

/* product slots */
/* The orbit layer carries spokes + tiles and rotates; each tile counter-rotates
   at the same duration so the logo stays upright while its position travels the
   circle. Flat marks never turn edge on, which is why this reads better than a
   3D ring. Both animations are linear and share a duration, so they stay locked. */
.clx-svc-page .zho-orbit{
  position:absolute;inset:0;
  animation:zho-spin 48s linear infinite;
}
/* Minimal, but the marks keep a surface to sit on: white card, soft shadow,
   no border. Stripping the background entirely left them floating. */
.clx-svc-page .zho-node{
  position:absolute;
  width:108px;height:50px;border-radius:10px;background:#fff;
  box-shadow:0 3px 12px rgba(28,30,33,.08);
  display:flex;align-items:center;justify-content:center;padding:8px 11px;
  animation:zho-counter 48s linear infinite;
}
@keyframes zho-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes zho-counter{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(-360deg); }
}
.clx-svc-page .zho-node img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
}

@media (max-width:1024px){
  .clx-svc-page .zho-why-grid{grid-template-columns:1fr;gap:40px;}
  .clx-svc-page .zho-why-viz{order:2;}
}
@media (max-width:560px){
  .clx-svc-page .zho-node{width:82px;height:40px;padding:6px 8px;border-radius:8px;}
  .clx-svc-page .zho-core{width:104px;}
  .clx-svc-page .zho-core-l1{font-size:15px;}
  .clx-svc-page .zho-core-l2{font-size:10.5px;max-width:70px;}
}
@media (prefers-reduced-motion:reduce){
  .clx-svc-page .zho-orbit,
  .clx-svc-page .zho-node{animation:none !important;}
  .clx-svc-page .zho-node{transform:translate(-50%,-50%);}
}