/* Digital You CIC — homepage revisions from Sharon's feedback (8 Jul 2026).
   Layered over the frozen dycic.css (never edits it). Reversible.
   1) "How we help" boxes -> pastel shades, numbers removed (was blue-on-blue).
   2) "Who we work with" chips -> hover/focus tooltips with a short descriptor.
   Author: lukeduff.co.uk */

/* ---------- 1. How We Help: pastel cards, no numbers ---------- */
.elementor-10 .services .svc .num{ display:none !important; }

.elementor-10 .services .svc{
  background:#dbe9f7 !important;          /* default pastel blue */
  border:1px solid rgba(20,78,140,.10) !important;
  box-shadow:0 10px 26px rgba(9,32,60,.20) !important;
}
.elementor-10 .services .svc:hover{ background:#e7f0fb !important; transform:translateY(-4px); }

/* rotate four on-brand pastels across the 6 cards */
.elementor-10 .services .svc-grid > .svc:nth-child(1){ background:#d6f0f4 !important; } /* pastel turquoise */
.elementor-10 .services .svc-grid > .svc:nth-child(2){ background:#e7e0f3 !important; } /* pastel heather  */
.elementor-10 .services .svc-grid > .svc:nth-child(3){ background:#dbe9f7 !important; } /* pastel blue     */
.elementor-10 .services .svc-grid > .svc:nth-child(4){ background:#f1e9d8 !important; } /* pastel sand     */
.elementor-10 .services .svc-grid > .svc:nth-child(5){ background:#d6f0f4 !important; }
.elementor-10 .services .svc-grid > .svc:nth-child(6){ background:#e7e0f3 !important; }

/* dark text on the pastel cards (were white-on-blue) */
.elementor-10 .services .svc h3,
.elementor-10 .services .svc h3 .elementor-heading-title{ color:#103f73 !important; }
.elementor-10 .services .svc p{ color:#37689d !important; }

/* ---------- 2. Who We Work With: tooltip chips ---------- */
/* chips are html widgets now — make the pill span a proper block pill so
   padded backgrounds don't overlap across wrapped rows */
.elementor-10 .who .chips .elementor-widget-html{ overflow:visible; }
.elementor-10 .who .chips .elementor-widget-html .elementor-widget-container{ line-height:1; }
.elementor-10 .who .chips .chip{ display:inline-block; vertical-align:middle; line-height:1.25; white-space:nowrap; }
.elementor-10 .who .chips{ overflow:visible; align-items:center; row-gap:14px; }
.elementor-10 .chip[data-tip]{ position:relative; cursor:help; outline:none; }
.elementor-10 .chip[data-tip]:focus-visible{ box-shadow:0 0 0 3px rgba(22,190,207,.55); }

/* the bubble */
.elementor-10 .chip[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  min-width:170px; max-width:240px; padding:9px 13px;
  background:#103f73; color:#fff; font-size:13px; font-weight:600; line-height:1.35;
  text-align:center; border-radius:12px; box-shadow:0 10px 26px rgba(9,32,60,.34);
  opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:40; white-space:normal;
}
/* the little arrow */
.elementor-10 .chip[data-tip]::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%) translateY(4px);
  border:6px solid transparent; border-top-color:#103f73; opacity:0; transition:opacity .16s ease, transform .16s ease; z-index:41;
}
.elementor-10 .chip[data-tip]:hover::after,
.elementor-10 .chip[data-tip]:focus::after,
.elementor-10 .chip[data-tip]:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.elementor-10 .chip[data-tip]:hover::before,
.elementor-10 .chip[data-tip]:focus::before,
.elementor-10 .chip[data-tip]:focus-visible::before{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (hover:none){
  /* on touch, tap focuses the chip and shows the tip */
  .elementor-10 .chip[data-tip]{ cursor:pointer; }
}
@media (prefers-reduced-motion:reduce){
  .elementor-10 .chip[data-tip]::after,.elementor-10 .chip[data-tip]::before{ transition:none; }
}