.elementor-kit-9{--e-global-color-primary:#2993B2;--e-global-color-secondary:#169BD3;--e-global-color-text:#003333;--e-global-color-accent:#FF9833;--e-global-color-51fcfc2:#E5F4FA;--e-global-color-d03abf6:#001E5F;--e-global-color-236e1d0:#FF9833;--e-global-color-3511831:#FFFFFF;--e-global-color-2fddd3b:#003333;--e-global-color-f6c9b41:#2894B3;--e-global-typography-primary-font-family:"Hanken Grotesk";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Hanken Grotesk";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Hanken Grotesk";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Hanken Grotesk";--e-global-typography-accent-font-weight:500;font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 p{margin-block-end:0px;}.elementor-kit-9 a{color:var( --e-global-color-primary );font-family:"Hanken Grotesk", Sans-serif;font-weight:700;}.elementor-kit-9 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h3{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h4{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h5{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 h6{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:80vw;}.e-con{--container-max-width:80vw;--container-default-padding-top:5px;--container-default-padding-right:5px;--container-default-padding-bottom:5px;--container-default-padding-left:5px;}.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;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */body{background-color:#ffffff;background-image:url("https://www.pensar.co.uk/wp-content/themes/pensar/images/pensar-dots-bg-2400-128.png");background-position:50% 0;background-size:100%}/* ============================================================
   PENSAR AI HUB / USE CASE FINDER  (no JavaScript)
   Elementor > Site Settings > Custom CSS
   Filtering is done with :target, so it needs no scripts at all.
   ============================================================ */
.ucf{
  --u-ink:#003333;
  --u-teal:#2993B2;
  --u-orange:#DD7413;
  --u-orange-bg:#FFF1E4;
  --u-panel:#FFFFFF;
  --u-edge:#C8E4E4;
  --u-card-edge:#D5E7E7;
  --u-rule:#E1EEEE;
  --u-chip-edge:#CDE3E3;
  --u-chip-ink:#466868;
  --u-chip-hover:#EEFAFA;
  --u-muted:#607B7B;
  --u-faint:#789090;

  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--u-ink);
  background:var(--u-panel);
  border:1px solid var(--u-edge);
  border-radius:28px;
  padding:1.1rem;
  box-shadow:0 24px 60px rgba(0,51,51,.08);
}
.ucf *{box-sizing:border-box}
.ucf a:focus-visible{outline:3px solid #AFE8E5;outline-offset:3px}

/* the empty anchors the filters key off. Scroll margin keeps the sticky
   header from covering the panel when one is targeted. */
.ucf-tgt{position:relative;height:0;scroll-margin-top:120px}

/* ---------- tools ---------- */
.ucf-tools{
  display:flex;flex-direction:column;gap:.9rem;
  padding:.35rem .35rem 1.2rem;border-bottom:1px solid #DCECEC;
}
.ucf-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ucf-chip{
  display:inline-block;flex:none;text-decoration:none;
  background:var(--u-panel);border:1px solid var(--u-chip-edge);border-radius:999px;
  padding:.66rem 1rem;line-height:1;white-space:nowrap;
  font-size:.8125rem;font-weight:700;color:var(--u-chip-ink);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.ucf-chip:hover,.ucf-chip:focus{
  border-color:var(--u-teal);color:var(--u-teal);background:var(--u-chip-hover);
}
.ucf-counts{font-size:.72rem;color:var(--u-faint);min-height:1em}
.ucf-count{display:none}

/* ---------- cards ---------- */
.ucf-grid{display:grid;gap:.75rem;margin-top:1rem}
.ucf-card{
  text-decoration:none;color:inherit;
  background:var(--u-panel);border:1px solid var(--u-card-edge);border-radius:20px;
  padding:1.25rem;min-height:205px;
  grid-template-rows:1fr auto;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ucf-card:hover{
  border-color:#7FC5D4;transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,51,51,.08);
}
.ucf-card__head{display:block}
.ucf-cat{
  display:block;font-size:.6875rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--u-teal);
}
.ucf-problem{
  display:block;max-width:440px;margin-top:.5rem;
  font-size:1.17rem;font-weight:700;line-height:1.28;color:var(--u-ink);
  text-wrap:balance;
}
.ucf-fix{
  display:grid;grid-template-columns:30px 1fr;align-items:start;gap:.7rem;
  margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--u-rule);
}
.ucf-badge{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--u-orange-bg);color:var(--u-orange);
  font-size:.8125rem;font-weight:700;line-height:1;
}
.ucf-fix__text{display:block}
.ucf-agent{
  display:block;margin-bottom:.1rem;font-size:.8125rem;font-weight:700;
  line-height:1.3;color:var(--u-ink);
}
.ucf-result{display:block;font-size:.78rem;font-weight:400;line-height:1.4;color:var(--u-muted)}

/* ---------- footer ---------- */
.ucf-foot{display:flex;justify-content:center;margin-top:1rem}
.ucf-showall{
  text-decoration:none;background:var(--u-panel);color:var(--u-teal);
  border:1px solid var(--u-chip-edge);border-radius:999px;padding:.6rem 1.2rem;
  font-size:.8125rem;font-weight:700;line-height:1;
  transition:background-color .18s ease,border-color .18s ease;
}
.ucf-showall:hover{border-color:var(--u-teal);background:var(--u-chip-hover)}

/* =====================================================================
   THE FILTERING.  No :has() anywhere: Chrome does not reliably
   re-evaluate :has() when the URL hash changes, which left the wrong
   chip highlighted. Everything below keys off :target and ~ only.
   ===================================================================== */

/* default: the first six, one from each area */
.ucf-card{display:none}
.ucf-card:nth-child(-n+6){display:grid}

/* default: "All areas" is the active chip and shows the 6-of-48 count */
.ucf-tools .ucf-chip--all,
.ucf-tools .ucf-chip--all:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}
.ucf-count--all{display:inline}
.ucf-showall{display:inline-block}

/* as soon as anything is targeted, clear the default state */
.ucf-tgt:target ~ .ucf-grid .ucf-card{display:none}
.ucf-tgt:target ~ .ucf-tools .ucf-chip--all,
.ucf-tgt:target ~ .ucf-tools .ucf-chip--all:hover{
  background:var(--u-panel);border-color:var(--u-chip-edge);color:var(--u-chip-ink);
}
.ucf-tgt:target ~ .ucf-tools .ucf-count--all{display:none}
.ucf-tgt:target ~ .ucf-foot .ucf-showall{display:none}

/* "Show all" expands to the full list, with All areas still active */
#ucf-more:target ~ .ucf-grid .ucf-card{display:grid}
#ucf-more:target ~ .ucf-tools .ucf-count--more{display:inline}
#ucf-more:target ~ .ucf-tools .ucf-chip--all,
#ucf-more:target ~ .ucf-tools .ucf-chip--all:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}

/* Sales & marketing */
#ucf-sales:target ~ .ucf-grid .ucf-card--sales{display:grid}
#ucf-sales:target ~ .ucf-tools .ucf-count--sales{display:inline}
#ucf-sales:target ~ .ucf-tools .ucf-chip--sales,
#ucf-sales:target ~ .ucf-tools .ucf-chip--sales:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}
/* Customer service */
#ucf-customerservice:target ~ .ucf-grid .ucf-card--customerservice{display:grid}
#ucf-customerservice:target ~ .ucf-tools .ucf-count--customerservice{display:inline}
#ucf-customerservice:target ~ .ucf-tools .ucf-chip--customerservice,
#ucf-customerservice:target ~ .ucf-tools .ucf-chip--customerservice:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}
/* Operations */
#ucf-operations:target ~ .ucf-grid .ucf-card--operations{display:grid}
#ucf-operations:target ~ .ucf-tools .ucf-count--operations{display:inline}
#ucf-operations:target ~ .ucf-tools .ucf-chip--operations,
#ucf-operations:target ~ .ucf-tools .ucf-chip--operations:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}
/* Finance */
#ucf-finance:target ~ .ucf-grid .ucf-card--finance{display:grid}
#ucf-finance:target ~ .ucf-tools .ucf-count--finance{display:inline}
#ucf-finance:target ~ .ucf-tools .ucf-chip--finance,
#ucf-finance:target ~ .ucf-tools .ucf-chip--finance:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}
/* People */
#ucf-people:target ~ .ucf-grid .ucf-card--people{display:grid}
#ucf-people:target ~ .ucf-tools .ucf-count--people{display:inline}
#ucf-people:target ~ .ucf-tools .ucf-chip--people,
#ucf-people:target ~ .ucf-tools .ucf-chip--people:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}
/* IT & knowledge */
#ucf-it:target ~ .ucf-grid .ucf-card--it{display:grid}
#ucf-it:target ~ .ucf-tools .ucf-count--it{display:inline}
#ucf-it:target ~ .ucf-tools .ucf-chip--it,
#ucf-it:target ~ .ucf-tools .ucf-chip--it:hover{
  background:var(--u-teal);border-color:var(--u-teal);color:#fff;
}

/* ---------- responsive ---------- */
@media (min-width:768px){
  .ucf{padding:1.4rem}
  .ucf-tools{flex-direction:row;justify-content:space-between;align-items:center}
  .ucf-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .ucf{border-radius:20px;padding:.9rem}
  .ucf-card{min-height:0;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .ucf *{transition:none!important}
  .ucf-card:hover{transform:none}
}

/* popup centring fix */
/* Elementor sets .dialog-widget-content to position:absolute with a pixel
   left/top computed in JS when the popup opens, and never recalculates it.
   The overlay is already flex + centred, so dropping the absolute
   positioning lets it centre properly and re-centre on resize. */
#elementor-popup-modal-8424 .dialog-widget-content,
#elementor-popup-modal-8429 .dialog-widget-content,
#elementor-popup-modal-1120 .dialog-widget-content{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
margin:auto !important;
max-height:calc(100vh - 72px);
}
#elementor-popup-modal-8424 .dialog-message,
#elementor-popup-modal-8429 .dialog-message,
#elementor-popup-modal-1120 .dialog-message{
max-height:calc(100vh - 72px);
overflow-y:auto;
}/* End custom CSS */