/* clx-sol — /our-solutions/ scoped delta layer.
 * Chassis + palette cloned from clx-es. References the shared --svc-* tokens
 * defined on .clx-svc-page (clx-svc-ai.css). ZERO dependency on site-wide.css
 * and ZERO lines added to it. Enqueued only on /our-solutions/ and on
 * solution_category archives.
 *
 * Build state: SCAFFOLD. Section styles land as parts land.
 */

/* ================= proof row (under the hero) =================
   COPIED VERBATIM from the homepage proof row (inc/clx-directionc-hero.php,
   .clxc-proof / .clxc-cell / .clxc-n / .clxc-t). Every value below is lifted
   from there, including the homepage's own token values, so the two rows stay
   identical: --o #FA4900, --dark #142533, --muted #898D90, --line #E8E8E8.
   Do NOT retune this block in isolation. If the homepage row changes, change
   both. Type is Cabin throughout, inherited from .clx-svc-page. */
.clx-svc-page .sol-proof-strip { padding: 30px 0 6px; }
/* .clxc-proof */
.clx-svc-page .sol-proof {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 0;
  border: 1px solid #E8E8E8; border-radius: 14px;
  overflow: hidden; background: #fff;
}
/* .clxc-cell */
.clx-svc-page .sol-cell { padding: 20px 24px; border-right: 1px solid #E8E8E8; }
.clx-svc-page .sol-cell:last-child { border-right: none; }
/* .clxc-n — ink numeral, orange unit */
.clx-svc-page .sol-n {
  font-family: 'Cabin', sans-serif;
  font-size: clamp(24px, 2.4vw, 30px); font-weight: 700;
  color: #142533; letter-spacing: -.5px;
}
.clx-svc-page .sol-n em { color: #FA4900; font-style: normal; }
/* .clxc-t */
.clx-svc-page .sol-t { font-family: 'Cabin', sans-serif; font-size: 13px; color: #898D90; margin-top: 2px; }
/* homepage breakpoints, verbatim: 2 up then 1 up, rules redrawn each time */
@media (max-width: 900px) {
  .clx-svc-page .sol-proof { grid-template-columns: repeat(2, 1fr); }
  .clx-svc-page .sol-cell:nth-child(2) { border-right: none; }
  .clx-svc-page .sol-cell:nth-child(1),
  .clx-svc-page .sol-cell:nth-child(2) { border-bottom: 1px solid #E8E8E8; }
}
@media (max-width: 560px) {
  .clx-svc-page .sol-proof { grid-template-columns: 1fr; }
  .clx-svc-page .sol-cell { border-right: none; border-bottom: 1px solid #E8E8E8; }
  .clx-svc-page .sol-cell:last-child { border-bottom: none; }
}

/* Every .svc-sec paints a hairline rule at its top (clx-svc-ai.css
   .svc-sec::before). Directly under the proof card, which already closes itself
   with a full border, that reads as a stray second line. Drop it for whichever
   section follows the proof row. Adjacent sibling, so it stays correct if the
   section order changes. */
.clx-svc-page .sol-proof-strip + .svc-sec::before { display: none; }

/* ---- one typeface across the whole page ----
   Everything in this sheet is Cabin. The shared clx-svc-card.css still sets
   'DM Sans' on two of its internals (the stat label and the outcome line), and
   those cards render in Section 2 here. Override on this page only, keyed to
   .clx-sol-page, so /digital-engineering/, /erp-services/, /enterprise-software/
   and /services/ keep the mixed ramp they already ship with. */
.clx-svc-page.clx-sol-page .clx-svc-card__outcome-text,
.clx-svc-page.clx-sol-page .clx-svc-card__stats .clx-eb-lbl {
  font-family: 'Cabin', sans-serif;
}

/* ---- S2 panels on mobile ----
   css-bundles/core.css @768 restyles every .svc-card for the ICON card layout
   used elsewhere: text-align:center on the card, justify-content:center plus a
   60px right padding on the header (clearing an icon), and a centred, !important
   link foot. These 2 panels carry no icon, so all of that landed wrong: the copy
   read centre aligned, the header sat inside phantom icon padding, and the long
   CTA label wrapped with the arrow stranded on its own line.
   Realigned for this section only. The icon cards on /digital-engineering/ and
   /enterprise-software/ keep the shared treatment. */
@media (max-width: 768px) {
  .clx-svc-page .sol-two-grid .svc-card { text-align: left; }
  .clx-svc-page .sol-two-grid .svc-card-header {
    padding-right: 0; justify-content: flex-start;
  }
  .clx-svc-page .sol-two-grid .clx-svc-card__outcome { text-align: left; }
  .clx-svc-page .sol-two-grid .svc-card-link-wrap {
    text-align: left !important; align-self: flex-start !important;
  }
}

/* CTA underline. core.css sets `text-decoration: underline !important` with
   text-underline-offset:9px against line-height:1. On a label that wraps, the
   first line's underline is painted 9px down, straight THROUGH the second line,
   and the ::after arrow is underlined too because a parent's text-decoration
   paints across every descendant. Both are visible on "EXPLORE ENTERPRISE
   SOFTWARE" and "SEE ALL 47 BLUEPRINTS".
   The shared markup gives no element around the label alone, so the underline
   cannot be confined to the text. It is removed and replaced with a border on
   the link, which stops at the flex gap and never crosses the arrow. */
.clx-svc-page .sol-two-grid .svc-card-link {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none !important;
  line-height: 1.25;
}
.clx-svc-page .sol-two-grid .svc-card-link::after {
  margin-left: 0; flex: none;
}

/* ---- mobile TOC floating button label ----
   The FAB itself is styled in the shared clx-svc-ai.css, but its EXPANDING
   CURRENT-SECTION LABEL is not: .svc-toc-fab-cur is defined separately in each
   page's own sheet (clx-es.css, clx-svc-erp.css, clx-svc-seo.css). This sheet
   never carried it, so on mobile the label rendered unstyled and spilled out of
   the 48px circle across the page content.
   Ported verbatim from clx-es.css so the button behaves identically to the
   sibling pages. If this ever moves into the shared sheet, delete this block. */
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  line-height: 1.1; max-width: 0; opacity: 0; overflow: hidden;
  white-space: nowrap; text-align: left;
  transition: max-width .34s cubic-bezier(.4,0,.2,1), opacity .26s ease, padding .34s ease;
}
.clx-svc-page .svc-toc-fab.has-cur {
  width: auto; border-radius: 21px; padding: 0 13px 0 2px; gap: 6px; justify-content: flex-start;
}
.clx-svc-page .svc-toc-fab.has-cur > svg { flex: none; margin-left: 6px; }
.clx-svc-page .svc-toc-fab.has-cur .svc-toc-fab-cur { max-width: 148px; opacity: 1; padding-left: 5px; }
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .n {
  font-size: 8px; font-weight: 700; letter-spacing: .1em; opacity: .78; text-transform: uppercase;
}
.clx-svc-page .svc-toc-fab .svc-toc-fab-cur .t {
  font-size: 11.5px; font-weight: 600; letter-spacing: -.1px;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}

/* ================= S2 — Two Ways ================= */
.clx-svc-page .sol-two-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; margin-top: 34px;
}
/* Closing block. Left aligned and full container width, matching every other
   block of copy on the page (.svc-sec-intro sets no measure cap either). The
   lead line keeps the ink weight it had as a single line; the supporting
   paragraph drops to body grey so the two read as statement then explanation. */
.clx-svc-page .sol-two-close {
  margin: 30px 0 0; max-width: none; text-align: left;
}
.clx-svc-page .sol-two-close-lead {
  font-family: 'Cabin', sans-serif; font-size: 18px; line-height: 28px;
  font-weight: 600; color: #142533; margin: 0;
}
/* Carries .svc-sec-intro in the markup so it is the SAME type as the section
   intro in the right column (Cabin 18/28, weight 400, #727272) rather than a
   near miss re-declared here. This rule only adds the spacing above it. */
.clx-svc-page .sol-two-close-body { margin: 10px 0 0; }

/* ================= S3 — Four Maturity Levels =================
   Stacked full width head. The shared .svc-sec-h2 / .svc-sec-intro already run
   the full container, so these only set the spacing between them. Kept as their
   own classes so this section's rhythm can move without touching Section 2. */
.clx-svc-page .sol-sec-h2--full { max-width: none; }
.clx-svc-page .sol-sec-intro--full { max-width: none; margin: 14px 0 0; }

/* Level cards: 2x2 on desktop. The bodies run 2 to 3 sentences, so 4 across
   would set a ~14 word measure and read as a column of fragments. Numbered <ol>
   because the levels are a sequence, not a set. */
.clx-svc-page .sol-lvl-grid {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.clx-svc-page .sol-lvl {
  position: relative;
  background: #FAFAFB;
  border: 1px solid var(--svc-line, rgba(20,37,51,.10));
  border-radius: 14px; padding: 26px 26px 28px;
}
/* Orange rule up the leading edge, marking progression through the sequence. */
.clx-svc-page .sol-lvl::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--svc-orange, #FA4900);
}
.clx-svc-page .sol-lvl-n {
  display: block;
  font-family: 'Cabin', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--svc-orange, #FA4900);
}
.clx-svc-page .sol-lvl-t {
  font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 21px;
  line-height: 1.2; color: #142533; margin: 8px 0 10px;
}
.clx-svc-page .sol-lvl-d {
  font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 26px;
  color: #727272; margin: 0;
}
.clx-svc-page .sol-sec-cta { margin-top: 28px; }

/* ================= S3.5 — Personas =================
   The section reuses the AI page's shipped .svc-persona card wholesale. Only
   the bullet block is overridden: the shared .svc-persona-foci is a 2 column
   grid with white-space:nowrap, which leaves ~140px per bullet inside a 3 up
   card. That fits the AI page's 2 word labels and clips these longer ones.
   One wrapping column instead. Scoped to .sol-personas so the AI page keeps its
   2 column block. 5 bullets also sit evenly in 1 column, where 2 columns would
   leave a ragged last row. */
.clx-svc-page .sol-personas .svc-persona-foci { grid-template-columns: 1fr; gap: 9px; }
.clx-svc-page .sol-personas .svc-persona-foci span { white-space: normal; }
/* ================= S6 — Why Companies Choose =================
   Reuses the AI page's .svc-why-grid / .svc-why-list / .svc-why-item bullets.
   That grid is 1.1fr / .9fr because the AI page puts bullets left and a badge
   plus stat sidebar right. This section is 8 bullets and no sidebar, so it needs
   two equal columns of 4. Everything else is inherited. */
.clx-svc-page .sol-why-grid { grid-template-columns: 1fr 1fr; gap: 22px 56px; }
@media (max-width: 900px) {
  .clx-svc-page .sol-why-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* Scaffold only: marks a section whose content has not arrived yet, so an empty
   region cannot be mistaken for a broken one. Delete with the last placeholder. */
.clx-svc-page .sol-pending-note {
  margin: 30px 0 0; padding: 18px 20px;
  border: 1px dashed rgba(250,73,0,.35); border-radius: 12px;
  background: #fff9f5;
  font-family: 'Cabin', sans-serif; font-size: 15px; line-height: 1.6;
  color: #c2410c;
}

/* ================= S5 — Solutions by Industry =================
   Section is built entirely on the shipped .svc-ind-grid / .svc-ind-card /
   .svc-rule / .svc-why-foot set from clx-svc-ai.css. The only thing needed here
   is the anchor reset: every other page renders those tiles as visual-only
   <div>s, ours are links because routing is the point of the section. Mirrors
   the a.svc-persona reset the shared sheet already carries. */
.clx-svc-page a.svc-ind-card { text-decoration: none; color: inherit; }

/* CLICK AFFORDANCE. On the sibling pages these tiles are inert, so nothing in
   the shared style signals "target". Ours route, so each carries a trailing
   arrow — the same glyph .svc-why-cta and the blueprint tiles already use, so
   the page reads one idiom for "this goes somewhere". Muted at rest so 17 of
   them do not shout, orange and nudged 4px on hover. Pure CSS, no markup. */
.clx-svc-page a.svc-ind-card::after {
  content: "\2192";
  margin-left: auto; padding-left: 12px;
  font-size: 17px; line-height: 1; color: #b9bcc4;
  transition: color .16s, transform .16s;
}
.clx-svc-page a.svc-ind-card:hover::after {
  color: var(--svc-orange, #FA4900);
  transform: translateX(4px);
}
.clx-svc-page a.svc-ind-card:hover .svc-ind-name { color: var(--svc-orange, #FA4900); }
.clx-svc-page a.svc-ind-card .svc-ind-name { transition: color .16s; }
/* The name sits between icon and arrow; let it take the slack so the arrow
   pins right rather than floating next to short labels like "BFSI". */
.clx-svc-page a.svc-ind-card .svc-ind-name { flex: 1 1 auto; }
/* Keyboard parity: the tiles are links, so a visible focus ring is required. */
.clx-svc-page a.svc-ind-card:focus-visible {
  outline: 2px solid var(--svc-orange, #FA4900); outline-offset: 3px;
}

/* EVEN TILE HEIGHT. Labels run from "BFSI" to "Healthcare, Life Sciences and
   Wellness", so some wrap to 2 lines and used to make their whole grid row
   taller than its neighbours. Pin every tile to the 2 line height so the grid
   is uniform whatever the label length. 84px = 20px padding x2 + two 16px lines
   at 1.3, which is also taller than the 40px icon, so the icon never sets it. */
.clx-svc-page .sol-industries .svc-ind-card { min-height: 84px; }
/* Reclaim text width so the labels hold one line: tighter icon, tighter gap,
   tighter arrow gutter. A 4 up tile now gives the label ~150px instead of
   ~141px, which is what the 20 character cap in industries-data.php is set
   against. text-wrap:balance is the safety net for narrow viewports. */
.clx-svc-page .sol-industries .svc-ind-card { gap: 12px; padding-left: 18px; padding-right: 16px; }
.clx-svc-page .sol-industries .svc-ind-ic { width: 34px; height: 34px; }
.clx-svc-page .sol-industries .svc-ind-ic svg { width: 28px; height: 28px; }
.clx-svc-page .sol-industries a.svc-ind-card::after { padding-left: 8px; font-size: 16px; }
.clx-svc-page .sol-industries .svc-ind-name { text-wrap: balance; }

/* TIER C — the 3 industries with no archive behind them yet. They open the
   scoping form rather than a term page. Muted fill and a lighter border set
   them apart from the 20 that route to real listings, without dropping them
   out of the grid rhythm. Arrow stays: they do go somewhere. */
.clx-svc-page a.svc-ind-card--ask {
  background: #FAFAFB;
  border-style: dashed;
  border-color: #dcdce8;
}
.clx-svc-page a.svc-ind-card--ask:hover {
  background: #fff7f3;
  border-style: solid;
  border-color: var(--svc-orange, #FA4900);
}

/* The mid page CTA band reuses the shipped .svc-costmap set wholesale
   (clx-svc-ai.css), same as the AI, ERP and Enterprise Software pages. No local
   rules needed; .sol-cta-band is a hook only. */

/* ---- inline prose hyperlink ----
   Orange underline, matching the site convention rather than a new look:
   #FA4900 with 1.5px thickness is what the homepage CTA link uses
   (homepage.css .clx-about-cta .elementor-button-text) and what site-wide.css
   uses for .plu__stat .lab .plu__sp.

   OFFSET IS 3px, NOT the homepage's 9px. 9px is tuned for a standalone
   uppercase CTA sitting on its own line. Inside a paragraph at line-height 1.55
   a 9px offset drops the rule onto the descenders of the line below, so the
   inline variant already in site-wide.css (3px) is the one matched here.

   !important on text-decoration because css-bundles/core.css sets
   `text-decoration: underline !important` with `text-underline-offset: 9px` on
   broad anchor selectors; without matching weight the offset loses and the rule
   paints through the following line. Same defect already fixed once on the card
   CTAs in this sheet. */
.clx-svc-page .sol-prose-link {
  color: var(--svc-orange, #FA4900);
  text-decoration: underline !important;
  text-decoration-color: var(--svc-orange, #FA4900);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px !important;
  transition: opacity .16s;
}
.clx-svc-page .sol-prose-link:hover,
.clx-svc-page .sol-prose-link:focus-visible { opacity: .75; }

/* ---- hero right edge clipping fix ----
   MEASURED, not guessed (headless Chrome, 430px viewport):

     .svc-in        350px content box   (390 - 20/20 padding)
     .svc-hero-g    350px, grid-template-columns:1fr below 1024px
     used track     392.86px            <-- 43px WIDER than the grid
     .svc-hero-left 392.86px            <-- stretched to the oversized track
     .clx-zoho-wrap 392.86px  min-width:auto

   Below 1024px the hero collapses to ONE column, so the copy and the form share
   a single track. `1fr` has an automatic minimum of min-content, and
   .clx-zoho-wrap carries the default `min-width:auto`, so the form's min-content
   (392.86px) sets the floor for the whole track. The copy column is then
   stretched to match and runs 43px past the viewport, which is why the sub
   headline cut mid word and the ghost button lost its right edge. The copy was
   never the cause; hiding the form snaps the left column straight back to 350px.

   `min-width:0` on the two form wrappers lets the track shrink to the grid.
   Verified after the change: track 350px, left column 350px, card 334px, and the
   only element still crossing the viewport is .svc-mtrack, the logo marquee,
   which overflows by design inside its own overflow:hidden band.

   SCOPED TO THIS PAGE'S BODY, deliberately. The hero renders in a SIBLING
   wrapper (.clx-svc-page.clx-svc-hero-only), not inside .clx-sol-page, so a
   .clx-sol-page scoped rule matches nothing here.

   NOTE: /enterprise-software/ measures identically (same 392.86px track), so it
   carries the same defect. Not fixed from here. Promoting this to clx-svc-ai.css
   would change a shipped page as a side effect of this build. */
body.page-our-solutions .clx-svc-page .svc-hero-form,
body.page-our-solutions .clx-svc-page .svc-hero-form .clx-zoho-wrap {
  min-width: 0;
}

/* ---- position:sticky enabler, this page only ----
   The PARENT theme (keystroke/assets/css/style.min.css) sets:
       html { overflow: hidden; overflow-y: auto }
       body { overflow: hidden }
   `body { overflow: hidden }` turns body into a scroll container that never
   scrolls, which freezes EVERY position:sticky descendant. That is why the
   blueprint rail would not travel no matter how it was tuned.

   Fixed with `overflow-x: clip` rather than reverting to `visible`: `hidden` on
   one axis forces the other to compute as `auto` and re-creates the scroll
   container, whereas `clip` does not, so horizontal clipping is preserved and
   sticky works. site-wide.css line 30 records that a previous
   `html,body { overflow-x: hidden }` guard was removed for breaking the
   off-canvas nav, so the horizontal clip is deliberately kept.

   Scoped to this page's body classes. This sheet only loads on /our-solutions/
   and the solution_category archives, but the selector is explicit so it can
   never leak. */
body.page-our-solutions,
body.tax-solution_category {
  overflow-x: clip;
  overflow-y: visible;
}

/* Case studies band: white, not the shared grey.
   shared/casestudies.css sets `.clx-casestudies-section { background:#F8F8F8
   !important }` for every page that uses the widget. This page alternates its
   own bands, and the grey landed directly under the white Blueprints section,
   reading as an unintended step. Whitened the same way /services/, /partnership/
   and /our-team/ already do it: page scoped selector, matching !important so it
   actually wins. */
body.page-our-solutions .clx-casestudies-section {
  background: #FFFFFF !important;
}
/* 4 pinned studies as 2 rows of 2, so the last row is the enterprise pair.
   The widget ships portfolio-33-33 (3 up), which would put 3 on row 1 and strand
   Odoo alone on row 2. */
@media (min-width: 768px) {
  body.page-our-solutions .clx-casestudies-section .portfolio-33-33 {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
}

/* ================= S13 — Final CTA layout =================
   The ES page lays this section out as a 2 column Elementor row, form in an
   elementor-col-58 and the Get In Touch card block in the remainder. Cloning
   only the markup left both blocks stacked full width, which broke the form
   card's proportions. Rebuilt as a grid on this section's .svc-in, same 58/42
   split, collapsing to one column on tablet. */
.clx-svc-page .sol-final-cta > .svc-in {
  display: grid; grid-template-columns: 58fr 42fr; gap: 40px; align-items: start;
}
@media (max-width: 900px) {
  .clx-svc-page .sol-final-cta > .svc-in { grid-template-columns: 1fr; gap: 28px; }
}

/* Air between the blogs strip and the footer. The shortcode emits
   .clx-blogs-grid with no trailing space of its own; on the sibling pages the
   gap comes from an "EXPLORE ALL BLOGS" CTA block that sits after the cards,
   which this page does not have. */
body.page-our-solutions .clx-blogs-grid { margin-bottom: 72px; }

/* ================= S8 — Product Blueprints (vertical rail) =================
   Clusters stack in a fixed left column, the selected cluster's tiles render to
   the right. Chosen over the shared .svc-tab row because that component is a
   horizontal flex at ~280px per tab and every existing use stops at 2; twelve
   would wrap to three rows. A rail has no wrapping maths and still reads as a
   list at 12 or 13.

   REUSED, not rebuilt: .svc-tabpanel supplies show/hide + the fade, and the
   tiles are .clx-blog-card from homepage.css, the same card the
   /solution-category/ archives render. Only the rail and the panel grid are new. */
/* LAYOUT SEPARATION. The section head and the cluster browser were 34px apart,
   which read as one block: the section intro (right column) sat immediately
   above the panel header (also right hand), so it was unclear whether the intro
   described the section or the open cluster. A full width rule closes the head,
   and the browser starts well clear of it. */
.clx-svc-page .sol-blueprints .sol-bp-rule { margin: 40px 0 0; }
.clx-svc-page .sol-rail-wrap {
  display: grid; grid-template-columns: 212px 1fr; gap: 36px;
  margin-top: 44px; align-items: start;
}
/* STICKY RAIL — travels with the reader through the whole section, so the count
   header and the cluster list stay on screen while a panel of up to 8 cards
   scrolls past (the Mobility panel alone runs ~1,800px).
   align-self:start is required, not cosmetic: a stretched grid item is exactly
   as tall as its row, leaving sticky nothing to travel within. Start-aligned,
   the box shrinks to content while the GRID AREA stays full height, and that
   area is the containing block sticky moves inside.
   max-height + overflow keeps it usable if clusters are added past what fits a
   short viewport; the scrollbar is hidden so it never shows on a rail that fits. */
.clx-svc-page .sol-rail {
  position: sticky; top: calc(var(--sol-pin, 100px) + 20px); align-self: start;
  max-height: calc(100vh - var(--sol-pin, 100px) - 40px); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff;
  border: 1px solid var(--svc-line, rgba(20,37,51,.10));
  border-radius: 16px; padding: 8px;
}
.clx-svc-page .sol-rail::-webkit-scrollbar { display: none; }
/* The count header stays put when the list itself has to scroll. */
.clx-svc-page .sol-rail-head {
  position: sticky; top: 0; z-index: 1; background: #fff;
  border-radius: 10px;
}
.clx-svc-page .sol-rail-head {
  font-family: 'Cabin', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #9aa1a8;
  padding: 10px 12px 12px;
}
.clx-svc-page .sol-rail-item {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 2px solid transparent;
  margin-left: -1px;              /* sit the marker on the rail hairline */
  padding: 11px 10px 11px 16px;
  font-family: 'Cabin', sans-serif;
  transition: color .16s, border-color .16s, background .16s;
}
.clx-svc-page .sol-rail-label { font-size: 15px; line-height: 1.3; color: #6B7280; transition: color .16s, font-weight .16s; }
.clx-svc-page .sol-rail-n {
  flex: none; min-width: 22px; text-align: center;
  font-size: 12px; line-height: 20px; color: #9aa1a8;
  background: #F1F1F3; border-radius: 999px; padding: 0 6px;
  transition: background .16s, color .16s;
}
.clx-svc-page .sol-rail-item:hover .sol-rail-label { color: #1C1E21; }
.clx-svc-page .sol-rail-item:hover { background: #FAFAFB; }
.clx-svc-page .sol-rail-item.is-active {
  border-left-color: var(--svc-orange, #FA4900);
  background: #fff9f5;
}
.clx-svc-page .sol-rail-item.is-active .sol-rail-label { color: #142533; font-weight: 700; }
.clx-svc-page .sol-rail-item.is-active .sol-rail-n {
  background: var(--svc-orange, #FA4900); color: #fff;
}
.clx-svc-page .sol-rail-item:focus-visible {
  outline: 2px solid var(--svc-orange, #FA4900); outline-offset: -2px;
}
/* Mobile control, desktop uses the rail. */
.clx-svc-page .sol-rail-select-wrap { display: none; }

/* Panel header: glyph tile, cluster name, cluster line, then a meta row. Names
   the open cluster so the panel is self describing once the rail scrolls away. */
.clx-svc-page .sol-panel-head {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 26px;
  border-bottom: 1px solid var(--svc-line, rgba(20,37,51,.10));
}
.clx-svc-page .sol-panel-ic {
  flex: none; width: 64px; height: 64px; border-radius: 16px;
  background: #fff2e3; color: var(--svc-orange, #FA4900);
  display: flex; align-items: center; justify-content: center;
}
.clx-svc-page .sol-panel-ic svg { width: 30px; height: 30px; display: block; }
/* Cluster name. Deliberately a step BELOW the section H2 (clamp 32-52px) so the
   two never compete: the H2 names the section, this names the open panel. */
.clx-svc-page .sol-panel-t {
  font-family: 'Cabin', sans-serif; font-weight: 600;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -.5px;
  color: #142533; margin: 0 0 8px;
}
/* Small orange eyebrow above the cluster name, so the panel header is obviously
   a subsection of Product Blueprints rather than a second section heading. */
.clx-svc-page .sol-panel-copy::before {
  content: "Blueprint family";
  display: block; margin-bottom: 6px;
  font-family: 'Cabin', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--svc-orange, #FA4900);
}
.clx-svc-page .sol-panel-d {
  font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 25px;
  color: #727272; margin: 0 0 10px;
}
.clx-svc-page .sol-panel-meta {
  display: flex; flex-wrap: wrap; gap: 20px; margin: 0;
  font-family: 'Cabin', sans-serif; font-size: 13px; color: #9aa1a8;
}
/* Per card index within the open cluster. */
.clx-svc-page .sol-bp-count {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: #b9bcc4; letter-spacing: .04em;
}

/* Panel grid. 2 up, NOT 3. The shared .clx-blog-thumb is aspect-ratio 4/3 at
   full card width, so 3 up inside the ~840px panel rendered each image at about
   260x195 — too small to read and too tight against its neighbour. 2 up gives
   roughly 400x300 and room to breathe. */
.clx-svc-page .sol-bp-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px;
}
/* IMAGE RATIO. The shared .clx-blog-thumb is aspect-ratio 4/3 (1.33:1), sized
   for the blog card. Every solutions featured image is 640x359, i.e. 1.78:1, so
   object-fit:cover was scaling to fill the height and cropping about a quarter
   of the width off each side — faces, devices and text in the artwork were being
   sliced. Matching the box to the source ratio removes the crop entirely
   (16/9 = 1.778 against the source 1.783, so under half a percent is lost). */
.clx-svc-page .sol-bp-card .clx-blog-thumb { aspect-ratio: 16 / 9; }

/* The shared card sets no description type; these are the only card level rules.
   FULL excerpt is in the markup (they run 387 to 525 chars). It is clamped to 4
   lines visually and the Read more toggle drops the clamp, so nothing is cut
   from the DOM and the text stays selectable and indexable. */
.clx-svc-page .sol-bp-d {
  font-family: 'Cabin', sans-serif; font-size: 14px; line-height: 1.55;
  color: #727272; margin: 8px 0 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
.clx-svc-page .sol-bp-card.is-open .sol-bp-d {
  -webkit-line-clamp: unset; overflow: visible;
}
/* Sits directly under its own text, hugging it, not stretched across the card.
   inline-flex so the underline is only as wide as the words. */
.clx-svc-page .sol-bp-text { display: block; }
.clx-svc-page .sol-bp-more {
  display: inline-flex; align-self: flex-start;
  margin: 6px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--svc-orange, #FA4900);
  text-decoration: underline; text-underline-offset: 3px;
}
.clx-svc-page .sol-bp-more:hover { color: #d83f00; }
.clx-svc-page .sol-bp-more:focus-visible {
  outline: 2px solid var(--svc-orange, #FA4900); outline-offset: 2px; border-radius: 2px;
}
/* The shared .clx-blog-foot is space-between for a card with 2 feet items.
   This card has one, so push it right. */
.clx-svc-page .sol-bp-foot { justify-content: flex-end; }

/* Below 900 the rail goes horizontal and the panel takes the full container, so
   2 up still holds; only the narrowest breakpoint drops to 1. */
/* Below 900 the rail cannot hold a column: it becomes a horizontal strip that
   scrolls, with the panel underneath. */
@media (max-width: 900px) {
  /* display:block, not a 1 column grid. A grid item's containing block is its own
     row, so a sticky select inside a collapsed grid has nothing to travel within.
     In normal flow it sticks against the whole wrapper, which is as tall as the
     open panel. */
  .clx-svc-page .sol-rail-wrap { display: block; }
  /* The rail is replaced by a native select below 900px. A 12 item horizontal
     scroller hid most clusters behind a fade and gave no sense more existed. */
  .clx-svc-page .sol-rail { display: none; }
  /* Sticky, matching the desktop rail: the cluster control stays reachable
     while a panel of up to 8 cards scrolls past. Sits directly under the pinned
     site bars, using the same measured --sol-pin the rail uses. */
  .clx-svc-page .sol-rail-select-wrap {
    display: block;
    position: sticky; top: calc(var(--sol-pin, 100px) + 8px);
    z-index: 5;
    background: #fff;
    margin: 0 0 22px;
    padding: 10px 0 12px;
    box-shadow: 0 10px 16px -12px rgba(20,37,51,.28);
  }
  .clx-svc-page .sol-rail-select-label {
    display: block; margin: 0 0 8px;
    font-family: 'Cabin', sans-serif; font-weight: 700; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--svc-orange, #FA4900);
  }
  .clx-svc-page .sol-rail-select {
    -webkit-appearance: none; appearance: none;
    width: 100%; padding: 14px 44px 14px 16px;
    font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 16px;
    color: #142533; background-color: #fff;
    border: 1px solid var(--svc-line, rgba(20,37,51,.10)); border-radius: 12px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FA4900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
  }
  .clx-svc-page .sol-rail-select:focus-visible {
    outline: 2px solid var(--svc-orange, #FA4900); outline-offset: 2px;
  }
}
@media (max-width: 640px) {
  .clx-svc-page .sol-bp-grid { grid-template-columns: 1fr; }
  /* Stacked head: the shared .svc-sd-grid keeps a 32px gap when it collapses,
     which reads as a disconnect between the heading and its own intro. */
  .clx-svc-page .sol-two-head { gap: 12px; }
  .clx-svc-page .sol-sec-intro--full { margin-top: 10px; }
  /* The shared card carries 60px side padding, which leaves ~240px of content on
     a 360px screen and pushes the form off centre. */
  .clx-svc-page .sol-final-cta .clx-form-card { padding: 28px 20px 26px; }
  .clx-svc-page .sol-final-cta .clx-getintouch { padding: 24px 20px 28px; }
  /* 64px glyph + 20px gap leaves ~250px of text on a 360px screen, which breaks
     the cluster name onto 3 lines. Shrink the tile and let the copy take the row. */
  .clx-svc-page .sol-panel-head { gap: 14px; }
  .clx-svc-page .sol-panel-ic { width: 48px; height: 48px; border-radius: 12px; }
  .clx-svc-page .sol-panel-ic svg { width: 24px; height: 24px; }
  .clx-svc-page .sol-panel-copy { flex: 1 1 100%; }
  /* the meta row's 20px gap wraps awkwardly at this width */
  .clx-svc-page .sol-panel-meta { gap: 4px 16px; }
}

/* ================= S8 — Case Studies ================= */

/* ================= S9 — FAQs ================= */
.clx-svc-page .sol-faq-list { margin-top: 30px; border-top: 1px solid var(--svc-line, rgba(20,37,51,.10)); }
.clx-svc-page .sol-faq-item { border-bottom: 1px solid var(--svc-line, rgba(20,37,51,.10)); }
.clx-svc-page .sol-faq-q {
  cursor: pointer; list-style: none;
  font-family: 'Cabin', sans-serif; font-weight: 600; font-size: 18px;
  line-height: 1.4; color: #142533; padding: 18px 40px 18px 0; position: relative;
}
.clx-svc-page .sol-faq-q::-webkit-details-marker { display: none; }
.clx-svc-page .sol-faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 15px;
  font-size: 24px; font-weight: 400; color: var(--svc-orange, #FA4900); line-height: 1;
}
.clx-svc-page .sol-faq-item[open] .sol-faq-q::after { content: "\2013"; }
.clx-svc-page .sol-faq-a { padding: 0 40px 20px 0; }
.clx-svc-page .sol-faq-a p {
  font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 1.6;
  color: #727272; margin: 0;
}
.clx-svc-page .sol-faq-pending { color: #c2410c; font-style: italic; }

/* ================= S10 — Final CTA ================= */
.clx-svc-page .sol-form-stub {
  margin-top: 28px; padding: 34px;
  border: 1px dashed rgba(250,73,0,.35); border-radius: 16px; background: #fff9f5;
}
.clx-svc-page .sol-form-note {
  font-family: 'Cabin', sans-serif; font-size: 15px; line-height: 1.6;
  color: #c2410c; margin: 0;
}

/* ================= responsive ================= */
@media (max-width: 1024px) {
  .clx-svc-page .sol-two-grid { grid-template-columns: 1fr; }
  .clx-svc-page .sol-lvl-grid { grid-template-columns: 1fr; }
}