/* clx-cs-filter — Case Studies filter panel (tabs + checkbox panels).
   Loaded only on the new Case Studies page. Visual language follows the
   Industries hub (clx-mv): orange line icons on a soft tint, hairline rules,
   grey count pills that turn orange when active. */

/* The filter box is wider than the 1044px content column (up to 1400px),
   centred on it, so six service columns fit without crowding. */
.clx-csf{
  --o:#FA4900; --o-soft:#fff2e3; --o-wash:#fff9f5;
  --ink:#142533; --ink-2:#33475a; --muted:#757589;
  --line:#ececf0; --pill:#F1F1F3;
  --csf-w:min(1400px, calc(100vw - 48px));
  position:relative;z-index:60;margin:28px 0 36px;
  width:var(--csf-w);margin-left:calc((100% - var(--csf-w)) / 2);
}
.elementor-widget.clx-csf-host{position:relative;z-index:60}

/* ---- Tabs ---------------------------------------------------------------- */
.clx-csf__tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#FAFAFB;border:1px solid var(--line);border-radius:14px 14px 0 0;overflow:hidden}
.clx-csf__tabs:not(:has(.clx-csf__tab.is-active)){border-radius:14px}
.clx-csf__tab{position:relative;display:flex;align-items:center;gap:12px;padding:14px 24px;background:transparent;border:0;border-right:1px solid var(--line);font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;transition:background .15s}
.clx-csf__tab:last-child{border-right:0}
.clx-csf__tab::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-2px);margin-left:auto;flex:none;transition:transform .2s}
.clx-csf__tab:hover:not([disabled]){background:#fff}
.clx-csf__tab.is-active{background:#fff;box-shadow:inset 0 -2px 0 var(--o)}
.clx-csf__tab.is-active::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--o)}
.clx-csf__tab[disabled]{color:#a3a3ad;cursor:not-allowed}
.clx-csf__tab[disabled]::after{display:none}
.clx-csf__tic{flex:none;width:30px;height:30px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;transition:all .15s}
.clx-csf__tic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.clx-csf__tab.is-active .clx-csf__tic{background:var(--o-soft);border-color:var(--o-soft);color:var(--o)}
.clx-csf__tab[disabled] .clx-csf__tic{opacity:.6}
.clx-csf__n{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--o);color:#fff;font-size:12px;line-height:22px;text-align:center;font-weight:700}
.clx-csf__n:empty{display:none}
.clx-csf__soon{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--pill);border-radius:999px;padding:3px 9px}

/* ---- Panel ---------------------------------------------------------------- */
.clx-csf__panel{position:relative;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:28px 64px 18px 32px;box-shadow:0 10px 30px -18px rgba(20,37,51,.18)}
.clx-csf__close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.clx-csf__close::before,.clx-csf__close::after{content:"";position:absolute;left:9px;top:15px;width:14px;height:1.6px;background:var(--muted)}
.clx-csf__close::before{transform:rotate(45deg)}.clx-csf__close::after{transform:rotate(-45deg)}
.clx-csf__close:hover{background:var(--pill)}

/* Services sit in five fixed columns divided by hairlines. */
.clx-csf__flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start}
.clx-csf__col{padding:0 20px;border-left:1px solid var(--line);min-height:100%}
.clx-csf__col:first-child{padding-left:0;border-left:0}
.clx-csf__col:last-child{padding-right:0}
/* Fewer, wider columns as the screen narrows, so names are never squeezed. */
@media (max-width:1399px){.clx-csf__flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}.clx-csf__col:nth-child(3n+1){padding-left:0;border-left:0}}
.clx-csf__group{margin:0 0 20px}
/* A heading never sits alone at the foot of a column, and a service row (with
   its collapsed sub-services) never splits across two. */
.clx-csf__opt--head{break-after:avoid;break-inside:avoid}
.clx-csf__item{break-inside:avoid}

/* ---- Options -------------------------------------------------------------- */
.clx-csf__opt{display:flex;align-items:center;gap:10px;padding:5px 0;margin:0;cursor:pointer;font-size:14px;line-height:1.35;color:var(--ink-2)}
.clx-csf__name{flex:1;min-width:0}
/* Linked service names (see $box in clx-cs-filter.php) look like the rest. */
.clx-csf a.clx-csf__name,.clx-csf a.clx-csf__name:hover,.clx-csf a.clx-csf__name:focus{color:inherit;text-decoration:none}
.clx-csf a.clx-csf__name:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:3px}
.clx-csf__opt input:checked ~ .clx-csf__name{color:var(--ink);font-weight:600}

/* Pick box: a drawn square in place of the browser checkbox. Grey outline,
   orange outline on hover, solid orange with a white tick when picked. */
.clx-csf__opt input:not(.clx-csf__sr){appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:1.5px solid #c9ccd6;border-radius:5px;background:#fff;display:grid;place-content:center;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.clx-csf__opt input:not(.clx-csf__sr)::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .12s ease-out}
.clx-csf__opt input:not(.clx-csf__sr):checked{background:var(--o);border-color:var(--o)}
.clx-csf__opt input:not(.clx-csf__sr):checked::before{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.clx-csf__opt input:not(.clx-csf__sr):focus-visible{box-shadow:0 0 0 3px rgba(250,73,0,.22)}

/* Hover: the whole row is the target. It lights up, the box outline turns
   orange, the name darkens and the count circle tints. Rows keep their text
   aligned by pulling the hover padding back with a negative margin. */
.clx-csf__opt:not(.clx-csf__opt--head){margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px;transition:background .15s}
.clx-csf__opt:not(.clx-csf__opt--head):hover{background:#FAFAFB}
.clx-csf__opt:hover input:not(.clx-csf__sr):not(:checked){border-color:var(--o)}
.clx-csf__opt:hover .clx-csf__name{color:var(--ink)}
.clx-csf__opt:has(input:checked):not(.clx-csf__opt--head){background:var(--o-wash)}

/* Case study count: a muted circle, the number sitting on top. Orange when ticked. */
.clx-csf__count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--pill);color:var(--ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.clx-csf__opt:hover .clx-csf__count{background:#ffe6cc;color:var(--o)}
.clx-csf__opt input:checked ~ .clx-csf__count{background:var(--o);color:#fff}

/* Group heading (an L3), one line: icon tile, bold name, count circle, and a
   hairline below. The checkbox is visually hidden; the whole heading is the
   control, and the tile turns solid orange when the group is ticked. */
.clx-csf__opt--head{align-items:center;padding:0 0 11px;margin:0 0 8px;border-bottom:1px solid var(--line);color:var(--ink)}
.clx-csf__sr{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.clx-csf__opt--head .clx-csf__name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.clx-csf__gic{position:relative;flex:none;width:32px;height:32px;border-radius:9px;background:var(--o-soft);color:var(--o);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,box-shadow .15s}
.clx-csf__opt--head{cursor:pointer}
.clx-csf__opt--head:hover .clx-csf__gic{background:#ffe6cc;box-shadow:0 0 0 1.5px var(--o)}
.clx-csf__opt--head:hover .clx-csf__name{color:var(--o)}
/* Heading pick box: a tick badge on the icon tile's corner when the group is picked. */
.clx-csf__gic::after{content:"";position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;background:#fff;border:1.5px solid var(--o);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23FA4900' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center}
.clx-csf__opt--head:has(input:checked) .clx-csf__gic::after{opacity:1;transform:scale(1)}
.clx-csf__opt--head:has(input:checked) .clx-csf__gic{background:var(--o);color:#fff}
.clx-csf__opt--head:has(input:checked) .clx-csf__count{background:var(--o);color:#fff}
.clx-csf__opt--head:has(input:focus-visible) .clx-csf__gic{outline:2px solid var(--o);outline-offset:2px}
.clx-csf__gic svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Sub-services: collapsed behind a quiet arrow, indented one step per level. */
.clx-csf__row{display:flex;align-items:center;gap:2px}
.clx-csf__row .clx-csf__opt{flex:1;min-width:0}
.clx-csf__twist{flex:none;width:22px;height:22px;border:0;border-radius:6px;background:transparent;cursor:pointer;position:relative}
.clx-csf__twist::before{content:"";position:absolute;left:8px;top:6px;width:5px;height:5px;border-right:1.5px solid #9a9aa8;border-bottom:1.5px solid #9a9aa8;transform:rotate(45deg);transition:transform .2s}
.clx-csf__item.is-open>.clx-csf__row .clx-csf__twist::before{transform:rotate(-135deg);top:9px}
.clx-csf__twist:hover{background:var(--pill)}
.clx-csf__twist:hover::before{border-color:var(--o)}
.clx-csf__twist:focus-visible{outline:2px solid var(--o);outline-offset:1px}
.clx-csf__sub{display:none;margin:2px 0 4px 7px;padding-left:18px;border-left:1px solid var(--line)}
.clx-csf__item.is-open>.clx-csf__sub{display:block}

/* Industries: a four column grid of icon rows. */
.clx-csf__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 24px}
.clx-csf__opt.clx-csf__opt--ind{margin:0;padding:7px 10px;border-radius:10px}
.clx-csf__iic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--o-soft);color:var(--o);display:flex;align-items:center;justify-content:center}
.clx-csf__iic svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Region silhouettes are filled shapes, not line icons. */
.clx-csf__iic--map svg{width:20px;height:20px;fill:currentColor;stroke:none}

/* ---- Selected filters, result count and Clear all ------------------------- */
.clx-csf__summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.clx-csf__result{font-weight:700;margin-right:8px;color:var(--ink)}
.clx-csf__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 14px;border:1px solid #ffd9c2;border-radius:999px;background:var(--o-wash);font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.clx-csf__chip::after{content:"\00d7";font-size:16px;line-height:1;color:var(--o)}
.clx-csf__chip:hover{border-color:var(--o)}
.clx-csf__clear{border:0;background:none;padding:6px 4px;font:inherit;font-size:14px;color:var(--o);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---- Filters in the H1: "Case Studies in [SEO ×] [PPC ×] [Clear all]" ---- */
.clx-csv2 .clx-portfolio-hero h1.elementor-heading-title:has(.clx-csv2-chip){display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px}
.clx-csv2-h1row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.clx-csv2-h1row h1{margin:0!important}
.clx-csv2-chip{user-select:none}
.clx-csv2-lead{white-space:nowrap;margin-right:4px}
.clx-csv2-chip,.clx-csv2-clear{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 14px 0 18px;border-radius:999px;font-family:"DM Sans",sans-serif;font-size:17px;font-weight:600;letter-spacing:0;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.clx-csv2-chip{background:#FA4900;border:1px solid #FA4900;color:#fff}
.clx-csv2-chip::after{content:"";width:12px;height:12px;flex:none;background:
  linear-gradient(45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%),
  linear-gradient(-45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%)}
.clx-csv2-chip:hover{background:#e04200;border-color:#e04200}
.clx-csv2-clear{background:#fff;border:1px solid #d9d9e0;color:#142533;padding:0 18px}
.clx-csv2-clear:hover{border-color:#FA4900;color:#FA4900}
.clx-csv2-chip:focus-visible,.clx-csv2-clear:focus-visible{outline:2px solid #FA4900;outline-offset:2px}
@media (max-width:767px){
  .clx-csv2-chip,.clx-csv2-clear{height:34px;font-size:14px;padding:0 10px 0 14px}
}

/* ---- No matches: an option that would leave nothing is greyed out ---- */
.clx-csf__opt.is-empty{cursor:default;opacity:.55}
.clx-csf__opt.is-empty:hover{background:transparent}
.clx-csf__opt.is-empty input:not(.clx-csf__sr){cursor:default;border-color:#dcdde3!important;background:#f7f7f9}
.clx-csf__opt.is-empty .clx-csf__name{color:var(--muted)!important}
.clx-csf__opt.is-empty .clx-csf__gic{background:var(--pill);color:var(--muted);box-shadow:none!important}
.clx-csf__none{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:1px}

/* ---- Filter prompt (short screens and phones, panel collapsed) ---- */
.clx-csf__hint{display:none;width:100%;align-items:center;gap:14px;margin:0;padding:12px 14px 12px 20px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s}
/* Attached under the tab row as one unit: the tabs lose their bottom corners. */
.clx-csf.is-hint:not(:has(.clx-csf__tab.is-active)) .clx-csf__hint{display:flex}
.clx-csf.is-hint:not(:has(.clx-csf__tab.is-active)) .clx-csf__tabs{border-radius:14px 14px 0 0}
.clx-csf__hint:hover{background:var(--o-wash)}
.clx-csf__hic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--o-soft);color:var(--o);display:flex;align-items:center;justify-content:center}
.clx-csf__hic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.clx-csf__htext{flex:1;min-width:0;color:var(--ink-2)}
.clx-csf__htext strong{color:var(--ink)}
.clx-csf__hcta{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;background:var(--o);color:#fff;font-size:14px;font-weight:700;animation:clx-csf-nudge 1.6s ease-in-out .8s 2}
.clx-csf__hcta::after{content:"";width:6px;height:6px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translateY(-2px)}
@keyframes clx-csf-nudge{0%,100%{box-shadow:0 0 0 0 rgba(250,73,0,.35)}50%{box-shadow:0 0 0 8px rgba(250,73,0,0)}}
@media (prefers-reduced-motion:reduce){.clx-csf__hcta{animation:none}}
@media (max-width:767px){.clx-csf__hint{font-size:14px}.clx-csf__htext{font-size:13.5px}}

/* ---- Group heading row (heading + phone-only accordion arrow) ---- */
.clx-csf__ghead{display:flex;align-items:flex-start;gap:4px}
.clx-csf__ghead .clx-csf__opt--head{flex:1;min-width:0}
.clx-csf__gtwist{display:none}
/* Phone sheet parts, hidden on desktop. */
.clx-csf__sheethead,.clx-csf__sheetfoot{display:none}

@media (max-width:767px){
  /* Groups become accordions: services show only when the group is opened. */
  .clx-csf__group:not(.is-gopen) > .clx-csf__item{display:none}
  .clx-csf__gtwist{display:block;flex:none;width:36px;height:36px;margin-top:-2px;border:0;border-radius:8px;background:transparent;position:relative;cursor:pointer}
  .clx-csf__gtwist::before{content:"";position:absolute;left:13px;top:12px;width:7px;height:7px;border-right:2px solid #757589;border-bottom:2px solid #757589;transform:rotate(45deg);transition:transform .2s}
  .clx-csf__group.is-gopen .clx-csf__gtwist::before{transform:rotate(-135deg);top:16px}
  .clx-csf__group{margin:0 0 6px}
  .clx-csf__opt--head{border-bottom:0;padding-bottom:6px;margin-bottom:0}
  .clx-csf__group + .clx-csf__group{border-top:1px solid var(--line);padding-top:10px}

  /* The sheet: the whole filter becomes a full screen layer. */
  .clx-csf.is-sheet{position:fixed;inset:0;z-index:100000;width:auto!important;margin:0!important;background:#fff;display:flex;flex-direction:column}
  .clx-csf.is-sheet .clx-csf__sheethead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
  .clx-csf__sheett{font-size:18px;font-weight:700;color:var(--ink)}
  .clx-csf__sheetclose{width:40px;height:40px;border:0;border-radius:50%;background:var(--pill);position:relative;cursor:pointer}
  .clx-csf__sheetclose::before,.clx-csf__sheetclose::after{content:"";position:absolute;left:12px;top:19px;width:16px;height:2px;background:var(--ink)}
  .clx-csf__sheetclose::before{transform:rotate(45deg)}.clx-csf__sheetclose::after{transform:rotate(-45deg)}
  .clx-csf.is-sheet .clx-csf__tabs{flex:none;border-radius:0;border-left:0;border-right:0}
  .clx-csf.is-sheet .clx-csf__panel{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;border:0;border-radius:0;box-shadow:none;padding:12px 16px 16px}
  .clx-csf.is-sheet .clx-csf__close{display:none}
  .clx-csf.is-sheet .clx-csf__hint{display:none!important}
  .clx-csf.is-sheet .clx-csf__sheetfoot{display:block;flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
  .clx-csf__sheetdone{width:100%;height:48px;border:0;border-radius:12px;background:var(--o);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
  html.clx-csf-lock,html.clx-csf-lock body{overflow:hidden}
}

/* ---- "↓ N case studies below" bar ---- */
.clx-csv2-below{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:9000;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 16px;border:0;border-radius:999px;background:#142533;color:#fff;font:inherit;font-size:15px;font-weight:600;box-shadow:0 10px 28px -8px rgba(20,37,51,.45);cursor:pointer;opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .2s,transform .2s}
.clx-csv2-below.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.clx-csv2-below:hover{background:#FA4900}
.clx-csv2-below:focus-visible{outline:2px solid #FA4900;outline-offset:3px}
.clx-csv2-below__arrow{width:22px;height:22px;border-radius:50%;background:#FA4900;position:relative;flex:none}
.clx-csv2-below:hover .clx-csv2-below__arrow{background:#fff}
.clx-csv2-below__arrow::before{content:"";position:absolute;left:8px;top:5px;width:5px;height:5px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.clx-csv2-below:hover .clx-csv2-below__arrow::before{border-color:#FA4900}
@media (prefers-reduced-motion:reduce){.clx-csv2-below{transition:none}}

/* ---- About block (2 to 3 line intro on single-service pages) ---- */
.clx-csv2__about{padding:8px 0 64px}
.clx-csv2__about-t{font-size:20px;font-weight:700;color:#142533;margin:0 0 10px}
.clx-csv2__about p{max-width:none;margin:0;font-size:16px;line-height:1.7;color:#33475a}
/* Learn about line: the site CTA (.clx-lc, core bundle), right aligned. */
.clx-csv2__about p.clx-csv2__learn{margin:18px 0 0;text-align:right}

/* Empty state for a zero-result link. */
.clx-csf__empty{margin:8px 0 64px;padding:40px 24px;text-align:center;border:1px solid var(--line, #ececf0);border-radius:14px;color:#757589;font-size:15px}
.clx-csf__empty p{margin:0}
.clx-csf__empty-t{font-size:18px;font-weight:700;color:#142533;margin-bottom:6px!important}
.clx-csf__empty a{color:#FA4900;text-decoration:underline;text-underline-offset:3px}

/* Grid while a new selection loads. */
.clx-csv2__grid.is-loading{opacity:.45;pointer-events:none;transition:opacity .15s}

@media (max-width:1199px) and (min-width:768px){
  .clx-csf__flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clx-csf__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  .clx-csf{--csf-w:100%}
  .clx-csf__tab{padding:12px 10px;font-size:14px;gap:8px;justify-content:center}
  .clx-csf__tab::after,.clx-csf__soon,.clx-csf__tic{display:none}
  .clx-csf__panel{padding:18px 16px 10px}
  .clx-csf__close{top:8px;right:8px}
  .clx-csf__flow{grid-template-columns:1fr}
  .clx-csf__col{padding:0;border-left:0}
  .clx-csf__grid{grid-template-columns:1fr}
}