.elementor-kit-5{--e-global-color-primary:#173A5E;--e-global-color-secondary:#0E2438;--e-global-color-text:#4A5A69;--e-global-color-accent:#F5921E;--e-global-color-cxgreen:#7AB24A;--e-global-color-cxblue:#2E9BD6;--e-global-color-cxgray:#A9B2B9;--e-global-color-cxnavymid:#1F4C77;--e-global-color-cxline:#DFE5EA;--e-global-color-cxoffwhite:#F5F7F9;--e-global-color-cxwhite:#FFFFFF;--e-global-typography-primary-font-family:"itc-avant-garde-gothic-pro";--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1.12em;--e-global-typography-primary-letter-spacing:-0.01em;--e-global-typography-secondary-font-family:"itc-avant-garde-gothic-pro";--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:0em;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:1.0625rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.75em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"itc-avant-garde-gothic-pro";--e-global-typography-accent-font-size:0.8rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.14em;font-family:"Poppins", Sans-serif;font-size:1.0625rem;font-weight:400;line-height:1.75em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-accent );font-family:"itc-avant-garde-gothic-pro", Sans-serif;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var( --e-global-color-cxwhite );box-shadow:0px 8px 24px -10px rgba(245,146,30,0.75);border-radius:2px 2px 2px 2px;padding:17px 32px 17px 32px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#E07F0C;color:var( --e-global-color-cxwhite );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-primary );}.elementor-kit-5 a:hover{color:var( --e-global-color-accent );}body{overflow-x:inherit !important;}.elementor a, .elementor a:link, .elementor a:focus, .elementor a:active, .elementor a:hover{text-decoration:inherit !important;}.elementor a:link, .elementor .smooth-hover a:link, {transition:inherit;}.elementor-kit-5 h1{font-family:"itc-avant-garde-gothic-pro", Sans-serif;font-size:4.4rem;font-weight:500;line-height:1.12em;letter-spacing:-0.01em;}.elementor-kit-5 h2{font-family:"itc-avant-garde-gothic-pro", Sans-serif;font-size:3.1rem;font-weight:500;line-height:1.12em;letter-spacing:-0.01em;}.elementor-kit-5 h3{font-family:"itc-avant-garde-gothic-pro", Sans-serif;font-size:1.12rem;font-weight:500;line-height:1.2em;letter-spacing:0em;}.elementor-kit-5 h4{font-family:"itc-avant-garde-gothic-pro", Sans-serif;font-size:1.25rem;font-weight:500;line-height:1.2em;letter-spacing:0em;}.elementor-kit-5 h5{font-family:"itc-avant-garde-gothic-pro", Sans-serif;font-size:1.05rem;font-weight:500;line-height:1.25em;letter-spacing:0em;}.elementor-kit-5 h6{font-family:"itc-avant-garde-gothic-pro", Sans-serif;font-size:0.92rem;font-weight:500;line-height:1.3em;letter-spacing:0em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1920px;}.e-con{--container-max-width:1920px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:991px){.elementor-kit-5{font-size:1.0625rem;}.elementor-kit-5 h1{font-size:3.2rem;}.elementor-kit-5 h2{font-size:2.4rem;}.elementor-kit-5 h3{font-size:1.12rem;}.elementor-kit-5 h4{font-size:1.2rem;}.elementor-kit-5 h5{font-size:1rem;}.elementor-kit-5 h6{font-size:0.9rem;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:0.78rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{font-size:1rem;}.elementor-kit-5 h1{font-size:2.6rem;}.elementor-kit-5 h2{font-size:2rem;}.elementor-kit-5 h3{font-size:1.1rem;}.elementor-kit-5 h4{font-size:1.15rem;}.elementor-kit-5 h5{font-size:1rem;}.elementor-kit-5 h6{font-size:0.9rem;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-size:0.76rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   THE COXE GROUP - SITE CSS
   All custom CSS lives here. Nowhere else.
   Rules from the handoff section 12 that a NATIVE control now
   covers have been deleted rather than carried over:
     - backdrop blur      -> Sticky Header Effects: blur_bg
     - sticky bg/border/shadow/shrink -> Sticky Header Effects
     - sticky menu colours -> Sticky Header Effects Pro
     - services radial glows -> OoohBoi pseudo-element controls
     - case-card scrim darkening -> Elementor overlay hover
   ============================================================ */

/* ---- 1. Avant Garde fallback stack.
        Elementor only ever emits: "itc-avant-garde-gothic-pro", Sans-serif
        There is no control for a custom fallback chain, so handoff section 1's
        Century Gothic / Poppins fallback has to live here. ---- */
:root { --cx-display: "itc-avant-garde-gothic-pro", "Century Gothic", "Poppins", sans-serif; }
h1, h2, h3, h4, h5, h6,
.cx-eyebrow .elementor-heading-title,
.cx-cred__num .elementor-heading-title,
.cx-step__n .elementor-heading-title,
.cx-quote__mark .elementor-heading-title,
.cx-quote__bq .elementor-heading-title,
.elementor-button,
.elementor-nav-menu--main .elementor-item { font-family: var(--cx-display); }

/* ---- 2. Header: the one nav item that exists in the menu but is
        hidden on desktop. Gives the mobile drawer a route to Contact
        once the orange button hides below 991px. ---- */
@media (max-width: 991px) {
  .nav-mobile-only a { color: var(--e-global-color-accent) !important; }
}

/* ---- 3. Eyebrow trailing hairline.
        OoohBoi's pseudo-element controls exist on CONTAINERS only; the
        Heading widget gets an overlay control instead, which can't do this. ---- */
.cx-eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 14px; }
.cx-eyebrow .elementor-heading-title::after {
  content: ""; flex: 1; height: 1px; max-width: 120px;
  background: linear-gradient(90deg, var(--e-global-color-cxline), transparent);
}
.cx-eyebrow--light .elementor-heading-title::after {
  background: linear-gradient(90deg, rgba(255,255,255,.35), transparent);
}

/* ---- 4. Intro: orange emphasis inside the statement.
        Editors can move the <b> tags freely in the text field. ---- */
.cx-intro b { color: var(--e-global-color-accent); font-weight: 500; }

/* ---- 5. Credential band two-tone figures.
        Explicit per-item classes, NOT nth-child: Elementor wraps every widget
        and e_optimized_markup changes the wrapper count. ---- */
.cx-cred--green  .cx-hl { color: var(--e-global-color-cxgreen); }
.cx-cred--blue   .cx-hl { color: var(--e-global-color-cxblue); }
.cx-cred--orange .cx-hl { color: var(--e-global-color-accent); }
.cx-cred--gray   .cx-hl { color: var(--e-global-color-cxgray); }

/* ---- 6. Services: 3px accent bar wipes down the left edge on hover.
        Colour comes from the tile's own class, so it stays editable. ---- */
.cx-svc { position: relative; overflow: hidden; }
.cx-svc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cx-accent, var(--e-global-color-cxblue));
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.cx-svc:hover::before { transform: scaleY(1); }
.cx-svc--green  { --cx-accent: var(--e-global-color-cxgreen); }
.cx-svc--blue   { --cx-accent: var(--e-global-color-cxblue); }
.cx-svc--orange { --cx-accent: var(--e-global-color-accent); }
.cx-svc--navy   { --cx-accent: var(--e-global-color-cxnavymid); }
.cx-svc--gray   { --cx-accent: var(--e-global-color-cxgray); }
.cx-svc--cta::before { display: none; }

/* ---- 7. Process steps: hover lift ---- */
.cx-step { transition: background .45s, transform .45s; }
.cx-step:hover { background-color: rgba(255,255,255,.075); transform: translateY(-5px); }

/* ---- 8. Pill list. Used for the homepage disciplines and the client-roster
        regions. .cx-pills is the component name; .cx-disciplines is kept because
        the homepage already ships it. ---- */
.cx-disciplines ul,
.cx-pills ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cx-disciplines li,
.cx-pills li {
  font-family: var(--cx-display);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-cxline); border-radius: 100px;
  padding: 8px 15px; transition: border-color .3s, color .3s;
}
.cx-disciplines li:hover { border-color: var(--e-global-color-cxblue); color: var(--e-global-color-cxblue); }

/* ---- 9. Text links: underline expands from 28% to 100% ---- */
.cx-tlink .elementor-button { position: relative; }
.cx-tlink .elementor-button::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--e-global-color-accent);
  transform: scaleX(.28); transform-origin: left;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.cx-tlink .elementor-button:hover::after { transform: scaleX(1); }

/* ---- 10. Case cards: lift on hover. The scrim darkening is native
        (Elementor background-overlay hover state). ---- */
.cx-case { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.cx-case:hover { transform: translateY(-4px); }

/* ---- 11. Footer link hover ---- */
.cx-footer a:hover { color: var(--e-global-color-accent); }

/* ---- 12. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .elementor-motion-effects-element, .elementor-motion-effects-layer { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- 13. Service tile icons.
        The uploaded icons are STROKE-based with fill="none". Elementor recolours
        uploaded SVGs by setting fill, which does nothing here -- the stroke stayed
        #000000. Elementor does set `color` from the Secondary Colour control on
        .elementor-icon, so currentColor keeps this editable from the widget. ---- */
.cx-svc .elementor-icon svg { stroke: currentColor; fill: none; }

/* ---- 14. Raise specificity on the mobile-only nav item; Elementor's own
        menu rules were beating a bare .nav-mobile-only .elementor-kit-5. ---- */
.elementor-nav-menu li.nav-mobile-only { display: none !important; }
@media (max-width: 991px) {
  .elementor-nav-menu li.nav-mobile-only { display: block !important; }
}

/* ============================================================
   SERVICE PAGES (Strategy and siblings)
   Accent colours reuse the .cx-svc--* classes from rule 6, so one class
   on a block drives its icon, hover bar, bullets and index dot together.
   ============================================================ */

/* ---- 15. Breadcrumb ---- */
.cx-crumbs i { font-style: normal; color: rgba(255,255,255,.34); }
.cx-crumbs span { color: #fff; }
.cx-crumbs a { color: rgba(255,255,255,.6); transition: color .3s; }
.cx-crumbs a:hover { color: var(--e-global-color-accent); }

/* ---- 16. Intro statement: orange rule down the left edge ---- */
.cx-pstatement { border-left: 2px solid var(--e-global-color-accent); padding-left: 32px; }
.cx-pstatement b { color: var(--e-global-color-accent); font-weight: 500; }
@media (max-width: 767px) { .cx-pstatement { padding-left: 20px; } }

/* ---- 17. Sticky index rows: coloured dot + hairline, indents on hover ---- */
.cx-dindex__item .elementor-button {
  width: 100%; border-radius: 0; text-align: left;
  border-bottom: 1px solid var(--e-global-color-cxline);
  transition: color .3s, padding-left .3s;
}
/* The dot has to hang off the content wrapper, not the <a>: .elementor-button
   is inline-block, so width/height on its ::before are ignored. The wrapper
   is the flex row, so the dot becomes a real flex item there. */
.cx-dindex__item .elementor-button-content-wrapper { justify-content: flex-start; }
.cx-dindex__item .elementor-button-content-wrapper::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; flex: none;
  align-self: center; margin-right: 14px; transition: transform .3s;
  background: var(--cx-accent, var(--e-global-color-cxblue));
}
.cx-dindex__item .elementor-button:hover { padding-left: 10px; }
.cx-dindex__item .elementor-button:hover .elementor-button-content-wrapper::before { transform: scale(1.3); }

/* ---- 18. Detail block bullet lists ---- */
.cx-dblock__list ul { list-style: none; margin: 0; padding: 0; }
.cx-dblock__list li { position: relative; padding-left: 24px; margin-bottom: 12px; }
.cx-dblock__list li:last-child { margin-bottom: 0; }
.cx-dblock__list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--cx-accent, var(--e-global-color-cxblue));
}
.cx-dblock__note a { color: var(--e-global-color-primary); border-bottom: 2px solid var(--e-global-color-accent); padding-bottom: 1px; }
.cx-dblock__note a:hover { color: var(--e-global-color-accent); }

/* ---- 19. Expertise body sets in two columns, one on tablet down ---- */
.cx-expertise__body { column-count: 2; column-gap: 58px; }
.cx-expertise__body p { break-inside: avoid; }
@media (max-width: 991px) { .cx-expertise__body { column-count: 1; } }

/* ---- 20. Expertise stat tiles: same hover as the process steps ---- */
.cx-estat { transition: background .45s, transform .45s; }
.cx-estat:hover { background-color: rgba(255,255,255,.075); transform: translateY(-5px); }

/* ---- 21. Service-page detail grids size rows to their own content.
        Elementor always emits --e-con-grid-template-rows: repeat(N, 1fr) for a
        grid container -- unsetting the control just falls back to its default of
        2 -- which makes every row as tall as the tallest card on the page. The
        homepage services grid is deliberately left alone: its copy is
        length-matched so equal rows are correct there. ---- */
.cx-dblocks,
.cx-subitems,
.cx-pfacts,
.cx-deals__grid,
.cx-benefits__grid,
.cx-rail__track,
.cx-disciplines__grid,
.cx-facts__grid,
.cx-group__list,
.cx-related__grid { --e-con-grid-template-rows: none !important; }
/* !important is required: Elementor's per-element rule is
   .elementor-{id} .elementor-element.elementor-element-{id} (0,3,0), which
   outranks any sane class .elementor-kit-5 here. */

/* ---- 22. Nested sub-services inside a detail block.
        The accent bar inherits --cx-accent from the parent block, so a
        sub-item always matches the service it sits under. ---- */
.cx-subitem { border-left: 2px solid var(--cx-accent, var(--e-global-color-cxblue)); padding-left: 18px; }
.cx-subitem--empty p { color: var(--e-global-color-cxgray); font-style: italic; }

/* ---- 23. A detail block that spans the full grid width ---- */
.cx-dblock--wide { grid-column: 1 / -1; }

/* ---- 24. Note with a rule above it (used where a block has sub-items) ---- */
.cx-dblock__note--divided { border-top: 1px solid var(--e-global-color-cxline); }

/* ============================================================
   MERGERS & ACQUISITIONS PAGE
   Reuses the .cx-svc--* accent classes from rule 6, so a transaction
   card's left bar, joiner rule and tag colour all move together.
   ============================================================ */

/* ---- 25. Narrative: running copy set beside a sticky heading.
        The lead paragraph sizes up and goes navy to give the block an entry
        point; everything after it stays at body size. ---- */
.cx-narrative__body p:first-child { font-size: 1.12rem; color: var(--e-global-color-primary); }
.cx-narrative__body a {
  color: var(--e-global-color-primary);
  border-bottom: 2px solid var(--e-global-color-accent);
  padding-bottom: 1px;
}
.cx-narrative__body a:hover { color: var(--e-global-color-accent); }

/* ---- 26. Transaction cards: the logo lockup.
        Client logos arrive at wildly different aspect ratios, so they are
        capped by HEIGHT and centred rather than scaled to the card width.
        The Image widget exposes no max-height control, hence this rule. ---- */
.cx-deal__marks img {
  max-height: 62px;
  width: auto;
  max-width: min(100%, 230px);
  object-fit: contain;
  margin-inline: auto;
}

/* ---- 27. The "merger with" / "acquisition by" joiner: a centred label with a
        hairline running out either side. Its colour is set per card on the
        widget, so an editor can recolour a row without touching CSS. ---- */
.cx-deal__joiner .elementor-heading-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cx-deal__joiner .elementor-heading-title::before,
.cx-deal__joiner .elementor-heading-title::after {
  content: ""; height: 1px; flex: 1; max-width: 52px;
  background: var(--e-global-color-cxline);
}

/* ---- 28. The advisory role sits on the card floor, so roles line up across a
        row however long each description runs. ---- */
.cx-deal__role { margin-top: auto; }

/* ---- 29. Transaction cards get the same hover lift as the service tiles.
        .cx-svc already supplies the accent bar; this adds the raise. ---- */
.cx-deal,
.cx-benefit,
.cx-disc,
.cx-fact,
.cx-rcard {
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .45s;
}
.cx-deal:hover,
.cx-benefit:hover,
.cx-disc:hover,
.cx-fact:hover,
.cx-rcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -30px rgba(14,36,56,.42);
  border-color: transparent;
}
/* ============================================================
   OUR HISTORY PAGE
   ============================================================ */

/* ---- 30. Soft companion to the rule-6 accents, for hairlines that should read
        as the accent colour without competing with it. ---- */
.cx-svc--green  { --cx-accent-soft: rgba(122,178,74,.4); }
.cx-svc--blue   { --cx-accent-soft: rgba(46,155,214,.4); }
.cx-svc--orange { --cx-accent-soft: rgba(245,146,30,.4); }
.cx-svc--navy   { --cx-accent-soft: rgba(31,76,119,.4); }
.cx-svc--gray   { --cx-accent-soft: rgba(169,166,169,.4); }

/* ---- 31. Benefit tiles: the oversized display word sits over a hairline in its
        own accent, so the tile reads as one colour family top to bottom. ---- */
.cx-benefit__title .elementor-heading-title {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--cx-accent-soft, var(--e-global-color-cxline));
}

/* ---- 32. Milestone rail: the connecting line.
        Drawn as a background stripe on each milestone rather than on the
        track, so the line still reads once the rail wraps to two or three
        rows (nine milestones since 2026-10). Elementor already owns ::before
        on a container for its background overlay. 11px is the centre of the
        22px dot; milestones sit flush (column gap 0) so the stripes join. ---- */
.cx-mile {
  background-image: linear-gradient(var(--e-global-color-cxline), var(--e-global-color-cxline));
  background-size: 100% 1px;
  background-position: 0 11px;
  background-repeat: no-repeat;
}
/* Single column on phones: stacked milestones need no horizontal line. */
@media (max-width: 767px) { .cx-mile { background-image: none; } }

/* ---- 33. Milestone dot: ring in the widget's colour, white centre punched out
        of the rail line, solid core. Elementor recolours uploaded SVGs by
        setting fill, which would flood the whole mark -- these three rules pin
        each circle to its intended role while keeping the Icon widget's colour
        control the single source of truth. ---- */
.cx-mile__dot .elementor-icon { line-height: 0; }
.cx-mile__dot .elementor-icon svg { fill: none; overflow: visible; }
.cx-mile__dot .elementor-icon svg circle:first-child { fill: #FFFFFF; stroke: currentColor; }
.cx-mile__dot .elementor-icon svg circle:last-child  { fill: currentColor; stroke: none; }
.cx-mile .elementor-icon { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.cx-mile:hover .elementor-icon { transform: scale(1.18); }
/* ============================================================
   OUR CLIENTS PAGE
   ============================================================ */

/* ---- 34. Region pills inside a roster card pick up that card's accent on
        hover, instead of the fixed blue the homepage list uses. ---- */
.cx-pills li:hover {
  border-color: var(--cx-accent, var(--e-global-color-cxblue));
  color: var(--cx-accent, var(--e-global-color-cxblue));
}

/* ---- 35. Discipline tiles carry a title and nothing else, so the title is
        pinned to the card floor and every tile in a row agrees, however many
        lines the longest name wraps to. ---- */
.cx-disc .elementor-widget-heading { margin-top: auto; }
/* ============================================================
   OUR PEOPLE PAGE
   ============================================================ */

/* ---- 36. Sticky index rows are linked CONTAINERS here rather than buttons:
        Elementor 4 pushes button text through html_to_plain_text, so a styled
        count cannot live inside one. This reproduces rule 17's look with real
        widgets, and the count becomes its own editable field. ---- */
.cx-dindex__row {
  border-bottom: 1px solid var(--e-global-color-cxline);
  transition: padding-left .3s cubic-bezier(.22,.61,.36,1);
}
.cx-dindex__row:hover { padding-left: 10px; }
.cx-dindex__row:hover .cx-dindex__label .elementor-heading-title { color: var(--e-global-color-primary); }
.cx-dindex__row .elementor-icon { transition: transform .3s cubic-bezier(.22,.61,.36,1); line-height: 0; }
.cx-dindex__row:hover .elementor-icon { transform: scale(1.3); }
.cx-dindex__count { margin-left: auto; }

/* ---- 37. Person card. Elementor allows only ONE border colour per element, so
        the 3px accent cap lives here while the widget keeps the 1px hairline on
        the other three sides. The colour comes from the card's .cx-svc--* class. ---- */
.cx-person {
  border-top-width: 3px;
  border-top-color: var(--cx-accent, var(--e-global-color-cxblue));
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1);
}
.cx-person:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px -30px rgba(14,36,56,.42);
}
/* Deliberately NOT added to rule 29: that rule clears border-color on hover,
   which would wipe the accent cap. */

/* ---- 38. The bio link sits on the card floor so cards in a row line up, and
        its underline runs out when the whole card is hovered, not just the link. ---- */
.cx-person__bio { margin-top: auto; }
.cx-person__bio .elementor-button::after { background: var(--cx-accent, var(--e-global-color-accent)); }
.cx-person:hover .cx-person__bio .elementor-button::after { transform: scaleX(1); }

/* ---- 39. Group heading: the count is pushed to the far edge of the rule. ---- */
.cx-group__count { margin-left: auto; }

/* ---- 40. A pill list that follows body copy gets a hairline above it. ---- */
.cx-pills--divided { border-top: 1px solid var(--e-global-color-cxline); }
/* ============================================================
   OUR WORK / CASE STUDIES
   Archive template + single template. Every accent on these two
   pages is the practice-area term own "Accent Colour" field,
   resolved per card by JetEngine per-item dynamic CSS. Nothing
   below hard-codes a practice-area colour, so adding a seventh
   practice area needs no CSS at all.
   ============================================================ */

/* ---- 41. Case study card. The 3px accent cap, the tag colour and the rule
        colour are all set per card by the dynamic tag, so this supplies
        geometry and motion only. Deliberately NOT added to rule 29: that rule
        clears border-color on hover, which would wipe the accent cap -- the
        same trap rule 37 calls out. ---- */
.cx-ccard { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1); }
.cx-ccard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(14,36,56,.42); }
.cx-ccard a { color: inherit; }
/* currentColor means ONE dynamic colour drives the label and its dot together. */
.cx-ccard__tag .elementor-heading-title { display: flex; align-items: center; gap: 10px; }
.cx-ccard__tag .elementor-heading-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: currentColor; flex: none;
}
.cx-ccard__more { margin-top: auto; }
.cx-ccard__rule .elementor-divider-separator {
  transform: scaleX(.3); transform-origin: left;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.cx-ccard:hover .cx-ccard__rule .elementor-divider-separator { transform: scaleX(1); }

/* ---- 42. Practice-area filter chips. Only JetSmartFilters own documented
        style hooks are touched here -- the same ones its widget already
        exposes as style controls -- so this survives plugin updates. The real
        checkbox stays in the DOM and keeps doing the work; only its box is
        hidden, so filtering remains the plugin job, not ours. ---- */
.cx-chips .jet-checkboxes-list-wrapper { display: flex; flex-wrap: wrap; gap: 9px; border: 0; padding: 0; margin: 0; }
.cx-chips .jet-checkboxes-list__row { margin: 0; }
.cx-chips .jet-checkboxes-list__decorator { display: none; }
.cx-chips .jet-checkboxes-list__input { position: absolute; opacity: 0; pointer-events: none; }
.cx-chips .jet-checkboxes-list__button {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--cx-display);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-cxline); border-radius: 100px;
  padding: 10px 18px; cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}
.cx-chips .jet-checkboxes-list__button:hover { border-color: var(--e-global-color-primary); }
.cx-chips .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
  background: var(--e-global-color-primary);
  border-color: var(--e-global-color-primary);
  color: #fff;
}
/* The Remove Filters widget is the All/clear chip. It reveals itself only
   while a filter is active, which is the behaviour we want -- do not force it
   visible, that would fight the plugin own state class. */
.cx-chip--all .jet-remove-all-filters__button {
  font-family: var(--cx-display);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--e-global-color-primary); background: transparent;
  border: 1px solid var(--e-global-color-cxline); border-radius: 100px;
  padding: 10px 18px; cursor: pointer;
  transition: border-color .3s, color .3s;
}
.cx-chip--all .jet-remove-all-filters__button:hover { border-color: var(--e-global-color-accent); color: var(--e-global-color-accent); }

/* ---- 43. Card cells stretch so every card in a row shares its height. ---- */
.cx-cases .jet-listing-grid__item { display: flex; }
.cx-cases .jet-listing-grid__item > * { width: 100%; }

/* ---- 44. Observations panel. Sticky is plain CSS, not Elementor Motion
        Effects sticky, which is JS and would compete with the sticky header. ---- */
.cx-obs { position: sticky; top: 132px; counter-reset: cxobs; }
@media (max-width: 991px) { .cx-obs { position: static; } }
/* Collapse the whole panel when a case study has no observations, rather
   than leaving an empty navy shell behind. */
.cx-obs:not(:has(.cx-obs__row)) { display: none; }
.cx-obs__row { counter-increment: cxobs; transition: background-color .4s; }
.cx-obs__row:hover { background-color: rgba(255,255,255,.08); }
/* The number is generated, never stored, so rows renumber themselves when the
   client reorders or deletes one. Its colour is the practice area colour, set
   on the widget so it stays an ordinary colour picker. */
.cx-obs__n .elementor-heading-title::before { content: counter(cxobs, decimal-leading-zero); }

/* ---- 45. Single hero practice-area pill: same currentColor trick as rule 41,
        so the dot needs no control of its own. ---- */
.cx-ptag__dot .elementor-heading-title {
  width: 8px; height: 8px; border-radius: 2px; background: currentColor;
  font-size: 0; line-height: 0;
}

/* ---- 46. Case study body copy. The lead paragraph takes the same orange rule
        the service pages use, so an article opens the way a page does. ---- */
.cx-prose p:first-child {
  font-size: 1.2rem; line-height: 1.7;
  color: var(--e-global-color-primary);
  border-left: 2px solid var(--e-global-color-accent);
  padding-left: 28px; margin-bottom: 1.5em;
}
.cx-prose ul, .cx-prose ol { margin: 0 0 1.15em; padding-left: 22px; }
.cx-prose li { margin-bottom: 10px; }
@media (max-width: 767px) { .cx-prose p:first-child { padding-left: 20px; } }

/* ---- 47. Outline button used in the single-page footer actions. ---- */
.cx-btn-outline .elementor-button:hover {
  background-color: var(--e-global-color-primary);
  border-color: var(--e-global-color-primary);
  color: #fff;
}
/* ---- 48. CHIP DOTS -- GENERATED FROM TERM COLOURS.
        This block is the ONE place a practice-area colour is repeated, because
        JetSmartFilters renders term IDs but not term meta, so the chip markup
        carries no colour to read. The term Accent Colour field is still the
        source of truth -- these lines are generated from it. If a colour changes
        or a seventh practice area is added, regenerate/extend this block only;
        everything else on the page picks the new colour up on its own. ---- */
.cx-chips .jet-checkboxes-list__button::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: var(--e-global-color-cxgray);
  transition: background-color .3s;
}
.cx-chips .jet-checkboxes-list__input[value="10"] + .jet-checkboxes-list__button::before { background: #7AB24A; } /* Human Resources */
.cx-chips .jet-checkboxes-list__input[value="8"] + .jet-checkboxes-list__button::before { background: #7AB24A; } /* Marketing */
.cx-chips .jet-checkboxes-list__input[value="12"] + .jet-checkboxes-list__button::before { background: #1F4C77; } /* Mergers &amp; Acquisitions */
.cx-chips .jet-checkboxes-list__input[value="11"] + .jet-checkboxes-list__button::before { background: #2E9BD6; } /* Operations */
.cx-chips .jet-checkboxes-list__input[value="7"] + .jet-checkboxes-list__button::before { background: #2E9BD6; } /* Strategy */
.cx-chips .jet-checkboxes-list__input[value="9"] + .jet-checkboxes-list__button::before { background: #F5921E; } /* Transition */
/* On the active chip the fill is navy, so the dot goes white to stay legible. */
.cx-chips .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button::before { background: #fff; }
/* The All/clear chip carries the same dot in navy. */
.cx-chip--all .jet-remove-all-filters__button { display: inline-flex; align-items: center; gap: 9px; }
.cx-chip--all .jet-remove-all-filters__button::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: var(--e-global-color-primary);
}
/* ---- END 48 ---- */

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* ---- 49. Request Information form (Formidable Forms).
   Formidable exposes its whole look as custom properties on
   .with_frm_style, so the form is themed by re-pointing those at the
   site palette instead of overriding each of its rules. Scoped to
   .cx-form so any other form keeps the Formidable default. ---- */
.cx-form .with_frm_style {
  --font-size: .72rem;
  --label-color: #173A5E;
  --weight: 700;
  --label-padding: 0 0 10px 0;
  --required-color: #F5921E;
  --field-font-size: 1rem;
  --field-height: 54px;
  --field-pad: 14px 18px;
  --field-margin: 26px;
  --text-color: #173A5E;
  --bg-color: #FFFFFF;
  --bg-color-active: #FFFFFF;
  --border-color: #DFE5EA;
  --border-color-active: #2E9BD6;
  --border-radius: 3px;
  --box-shadow: none;
  --check-font-size: 1rem;
  --check-label-color: #4A5A69;
  --border-color-error: #C8402F;
  --error-text: #C8402F;
  --error-bg: #FBECE9;
  --error-border: #F0C4BC;
  --error-font-size: .92rem;
  --success-bg-color: #F5F7F9;
  --success-border-color: #DFE5EA;
  --success-text-color: #173A5E;
  --success-font-size: 1.0625rem;
  --submit-font-size: .8rem;
  --submit-weight: 700;
  --submit-bg-color: #F5921E;
  --submit-border-color: #F5921E;
  --submit-text-color: #FFFFFF;
  --submit-border-radius: 2px;
  --submit-padding: 17px 32px;
  --submit-margin: 8px;
  --submit-hover-bg-color: #E07F0C;
  --submit-hover-border-color: #E07F0C;
  --submit-hover-color: #FFFFFF;
  --submit-active-bg-color: #E07F0C;
  --submit-active-border-color: #E07F0C;
  --submit-active-color: #FFFFFF;
}
.cx-form .with_frm_style .frm_primary_label {
  font-family: var(--cx-display);
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.4;
}
.cx-form .with_frm_style input[type=text],
.cx-form .with_frm_style input[type=email],
.cx-form .with_frm_style input[type=tel],
.cx-form .with_frm_style textarea {
  font-family: "Poppins", sans-serif;
  transition: border-color .3s, box-shadow .3s;
}
.cx-form .with_frm_style input[type=text]:focus,
.cx-form .with_frm_style input[type=email]:focus,
.cx-form .with_frm_style input[type=tel]:focus,
.cx-form .with_frm_style textarea:focus {
  box-shadow: 0 0 0 3px rgba(46,155,214,.18);
}
.cx-form .with_frm_style textarea {
  line-height: 1.6;
  resize: vertical;
}
.cx-form .with_frm_style .frm_opt_container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.cx-form .with_frm_style .frm_radio label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
}
.cx-form .with_frm_style .frm_radio label input[type=radio] {
  margin: 0;
}
.cx-form .with_frm_style .frm_radio input[type=radio]:checked {
  border-color: #173A5E;
}
.cx-form .with_frm_style .frm_radio input[type=radio]:checked:before {
  background-color: #173A5E;
}
.cx-form .with_frm_style .frm_radio input[type=radio]:focus {
  box-shadow: 0 0 0 3px rgba(46,155,214,.25) !important;
}
/* Formidable hard-codes the submit button's resting state rather than
   reading its own --submit-* properties, so it is set explicitly here
   to match the kit's global button. */
.cx-form .with_frm_style .frm_submit button.frm_button_submit {
  font-family: var(--cx-display);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1;
  color: #FFFFFF;
  background: #F5921E;
  border: 1px solid #F5921E;
  border-radius: 2px;
  padding: 17px 32px;
  margin: 8px 0 0;
  box-shadow: 0 8px 24px -10px rgba(245,146,30,.75);
  transition: background-color .3s, border-color .3s, transform .3s;
}
.cx-form .with_frm_style .frm_submit button.frm_button_submit:hover,
.cx-form .with_frm_style .frm_submit button.frm_button_submit:focus,
.cx-form .with_frm_style .frm_submit button.frm_button_submit:active {
  background: #E07F0C;
  border-color: #E07F0C;
  color: #FFFFFF;
}
.cx-form .with_frm_style .frm_submit button.frm_button_submit:hover {
  transform: translateY(-2px);
}
.cx-form .with_frm_style .frm_submit button.frm_button_submit:focus-visible {
  outline: 2px solid #173A5E;
  outline-offset: 3px;
}
.cx-form .with_frm_style .frm_message,
.cx-form .with_frm_style .frm_error_style {
  border-radius: 3px;
  padding: 22px 26px;
}
.cx-form .with_frm_style .frm_message {
  border-left: 2px solid #7AB24A;
}
.cx-form .with_frm_style .frm_message p {
  margin: 0;
}

/* ---- 50. Contact panel: e-mail and phone are links inside an Icon
   List, which has no control for a hover transition. ---- */
.cx-contact .elementor-icon-list-item > a .elementor-icon-list-text {
  transition: color .3s;
}

/* ============================================================
   BLOG
   Archive template + article template. Both reuse the case study
   card, archive and article classes (rules 41-46); only what the
   blog does differently lives here.
   ============================================================ */

/* ---- 51. Blog card. Case study cards take their 3px cap colour from the
        practice-area term; blog categories carry no colour field, so the
        cap is the brand blue. !important for the reason given in rule 21. ---- */
.cx-bcard { border-top-color: #2E9BD6 !important; }
.cx-bcard .cx-bcard__excerpt .elementor-heading-title {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 52. Article side panel. Sticky for the same reason as rule 44. ---- */
.cx-aside { position: sticky; top: 132px; }
@media (max-width: 991px) { .cx-aside { position: static; } }
.cx-aside__terms a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); transition: color .3s, border-color .3s; }
.cx-aside__terms a:hover { color: var(--e-global-color-accent); border-color: var(--e-global-color-accent); }

/* ---- 53. Article byline: a hairline separates author and date. ---- */
.cx-bmeta > .elementor-widget + .elementor-widget { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.3); }

/* ---- 54. Article body. Imported articles carry their own sub-headings,
        links and emphasis, which case studies never needed. ---- */
.cx-prose h2, .cx-prose h3 {
  font-family: var(--cx-display); font-weight: 500; color: var(--e-global-color-primary);
  line-height: 1.2; margin: 1.9em 0 .7em;
}
.cx-prose h2 { font-size: 1.7rem; }
.cx-prose h3 { font-size: 1.3rem; }
.cx-prose h2 strong, .cx-prose h3 strong { font-weight: inherit; }
.cx-prose a {
  color: var(--e-global-color-primary);
  border-bottom: 1px solid var(--e-global-color-accent);
  transition: color .3s;
}
.cx-prose a:hover { color: var(--e-global-color-accent); }
.cx-prose strong, .cx-prose b { color: var(--e-global-color-primary); font-weight: 600; }
.cx-prose { overflow-wrap: break-word; }

/* ---- 55. Hero category pill hugs its label. A full-width container has no
        "fit content" width control, so the pill would otherwise stretch the
        full width of the hero column. !important as in rule 21. ---- */
.cx-ptag--fit { width: auto !important; align-self: flex-start; }

/* ---- 56. Service tiles: the whole tile is the link.
        The Icon Box widget only links its icon and title. Stretching the
        title link over the tile (rule 6 already makes .cx-svc the positioning
        context) makes the full box clickable without a second link in the
        markup. Tiles with no link set are unaffected. ---- */
.cx-svc .elementor-icon-box-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cx-svc .elementor-icon-box-title a { color: inherit; transition: color .3s; }
.cx-svc:hover .elementor-icon-box-title a { color: var(--cx-accent, var(--e-global-color-cxblue)); }
.cx-svc:has(.elementor-icon-box-title a:focus-visible) { outline: 2px solid var(--e-global-color-primary); outline-offset: 3px; }

/* ---- 57. Button labels never wrap. There is no Elementor control for
        white-space, so it lives here. Rules 58+ give the longer labels the
        room they need where a column is narrow. ---- */
.elementor-button, .cx-form .with_frm_style .frm_submit button.frm_button_submit { white-space: nowrap; }

/* ---- 58. Sidebar index rows are the exception to rule 57. They are a list
        of section titles, some 40+ characters long, in a 320px column, so
        they keep wrapping rather than being cut off. ---- */
.cx-dindex__item .elementor-button { white-space: normal; }

/* ---- 59. Buttons tighten as the space around them narrows, so a label that
        fits at full width still fits in a side column or on a phone. The kit
        button padding and tracking have no per-breakpoint "compact" control
        that applies to every button at once. Text links (.cx-tlink) and index
        rows carry their own padding and are left alone. ---- */
@media (max-width: 1400px) {
  .elementor-widget-button:not(.cx-tlink):not(.cx-dindex__item) .elementor-button { padding-left: 24px; padding-right: 24px; letter-spacing: .1em; }
}
@media (max-width: 767px) {
  .elementor-widget-button:not(.cx-tlink):not(.cx-dindex__item) .elementor-button,
  .cx-form .with_frm_style .frm_submit button.frm_button_submit { padding-left: 20px; padding-right: 20px; letter-spacing: .08em; }
}
@media (max-width: 359px) {
  .elementor-widget-button:not(.cx-tlink):not(.cx-dindex__item) .elementor-button { padding-left: 16px; padding-right: 16px; letter-spacing: .05em; font-size: .72rem; }
}

/* ---- 60. Between the tablet and tablet-extra breakpoints (992-1200px) the
        page is still two-column but the columns are at their narrowest, so
        the navy intro panel gives some of its side padding back to its
        button, and the header button drops to its compact size.
        !important as in rule 21. ---- */
@media (min-width: 992px) and (max-width: 1200px) {
  .cx-pintro__panel { padding-left: 40px !important; padding-right: 40px !important; }
  .cx-header-btn .elementor-button { padding-left: 18px; padding-right: 18px; letter-spacing: .08em; }
}

/* ============================================================
   BIO PAGES
   Built on the article layout (rules 46, 52, 54).
   ============================================================ */

/* ---- 61. Pull quotes inside article copy. The Text Editor widget has no
        blockquote style controls. ---- */
.cx-prose blockquote {
  margin: 2em 0; padding: 4px 0 4px 28px;
  border-left: 2px solid var(--e-global-color-cxblue);
}
.cx-prose blockquote p,
.cx-prose blockquote p:first-child {
  font-family: var(--cx-display); font-size: 1.28rem; line-height: 1.5; font-weight: 400;
  color: var(--e-global-color-primary);
  border: 0; padding: 0; margin: 0;
}
@media (max-width: 767px) { .cx-prose blockquote { padding-left: 20px; } .cx-prose blockquote p, .cx-prose blockquote p:first-child { font-size: 1.12rem; } }

/* ---- 62. Mobile menu. The widget's Full Width option stretches the panel
        edge to edge; the panel is as tall as its items. Item size and
        spacing are the widget's own dropdown controls. ---- */
@media (max-width: 991px) {
  .cx-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { padding: 8px 0 20px; }
}


/* ---- 63. Sticky Header Effects recolours every menu link white once the
        page has scrolled (its Menu Style option, applied under .she-header
        with !important at six-class specificity). That is right for the bar
        but also hits the drop-down, whose links sit on white, so they
        vanished. Drop-down links keep the widget's own colours in the sticky
        state; the .elementor-kit-5 is deliberately long enough to outrank the
        plugin's. ---- */
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li a.elementor-item,
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li a.elementor-sub-item { color: #4A5A69 !important; }
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li a.elementor-item:hover,
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li a.elementor-item:focus,
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li a.elementor-item.elementor-item-active,
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li a.elementor-sub-item:hover,
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li a.elementor-sub-item.elementor-item-active { color: #173A5E !important; }
.cx-header.she-header .elementor-widget-nav-menu.cx-nav .elementor-nav-menu--dropdown li.nav-mobile-only a.elementor-item { color: #F5921E !important; }

/* ---- 64. Transaction card whose only mark is an announcement image rather
        than a logo (RATIO | Helix). Rule 26 caps logos at 62px tall, which
        would turn a photo into a thumbnail, so this one gets more height. ---- */
.cx-deal__mark--photo img { max-height: 132px; max-width: 100%; border-radius: 3px; }
/* ---- 65. (retired 2026-10-06) Home services grid: the Communication card was
        removed, so the "Not sure where to start?" tile sits back in the grid
        as the eighth tile and no longer needs the full-width band. ---- */


/* ============================================================
   RESPONSIVE FIXES (2026-10-13 sweep)
   Breakpoints: mobile <=767, tablet 768-991, tablet-extra 992-1200,
   desktop >=1201. Containers carry desktop + tablet values only, so the
   992-1200 band inherits desktop sizes that no longer fit.
   ============================================================ */

/* ---- 66. Conversation CTA (every page). Desktop columns are 52% + 40% with
        a 70px gap, which exceeds the row once the content box drops below
        ~875px (viewports 992-1041). The button column then wrapped under the
        copy, right-aligned in a 40% box, with 88px padding either side of the
        break. Columns shrink instead. Tablet (<=991) still stacks via its own
        100% widths. ---- */
@media (min-width: 992px) {
  .cx-cta { flex-wrap: nowrap !important; }
}

/* ---- 67. Home quote panel. The inner container is a fixed 64rem; between 992
        and 1218px that is wider than the section's content box, so it overflowed
        the 8% side padding and the quote mark (offset -50px) was clipped at the
        viewport edge. ---- */
.cx-quote__inner { max-width: 100%; }

/* ---- 68. Footer columns. Desktop widths 30/18/18/22 plus three 58px gaps only
        fit above ~1726px, so Contact wrapped under the logo on every desktop and
        tablet-extra viewport, leaving the right third empty. One row of four from
        992px up; a percentage gap keeps the row inside its box at every width and
        Contact gets room for the e-mail address. !important as in rule 21. ---- */
@media (min-width: 992px) {
  .cx-footer .elementor-element-cxfootgrid { flex-wrap: nowrap !important; column-gap: 4% !important; }
  .cx-footer .elementor-element-cxfootbrand { width: 26% !important; }
  .cx-footer .elementor-element-cxfootsvc,
  .cx-footer .elementor-element-cxfootabt { width: 17% !important; }
  .cx-footer .elementor-element-cxfootcon { width: 28% !important; }
}

/* ---- 69. Expertise panel (History, Clients, People). Same trap as rule 66:
        28% + 62% columns plus a 92px gap overflow the content box between 992
        and ~1040px, so the body dropped under the heading at 62% width with the
        two-column copy squeezed into it. Columns shrink instead. ---- */
@media (min-width: 992px) {
  .cx-expertise { flex-wrap: nowrap !important; }
}
/* In that band the body column is ~530px wide, so rule 19's two text
   columns fall to ~235px each (25 characters a line). One column until the
   desktop breakpoint. */
@media (min-width: 992px) and (max-width: 1200px) {
  .cx-expertise__body { column-count: 1; }
}

/* ---- 70. Footer bottom row on phones. Three items (copyright, colour bar,
        credit) in a space-between row with no mobile direction set, so the
        colour bar landed beside the credit on a second line, off-grid from the
        copyright. Stacked, left-aligned, bar between the two lines of text. ---- */
@media (max-width: 767px) {
  .cx-footer .cx-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cx-footer .cx-footer__bottom > * { width: auto; }
  .cx-footer .cx-footer__bottom .elementor-widget-text-editor { text-align: left; }
}

/* ---- 71. Service-page detail grid between 992 and 1200px. The sticky index
        keeps its 28% column, so the two-column card grid is left with ~470px:
        each card is ~220px and the bullet lists wrap every two or three words.
        One column in that band (cards ~500-620px); the tablet stack below 992
        and the desktop pair above 1200 are unchanged. !important as in rule 21. ---- */
@media (min-width: 992px) and (max-width: 1200px) {
  .cx-dblocks { --e-con-grid-template-columns: repeat(1, 1fr) !important; }
}/* End custom CSS */