/* ============================================================
   Digital You CIC — custom iconography + micro-interactions
   ------------------------------------------------------------
   - Page-13 "four barriers": turn the number pills into circular
     brand-icon badges (Devices / Connectivity / Skills / Confidence)
     via masked data-URI SVGs (source: build/assets/brand/dycic-icons.svg).
   - Subtle micro-interactions on icon badges + cards so the site
     feels alive without being busy. All motion respects
     prefers-reduced-motion.
   Loaded site-wide AFTER frozen + per-page sheets. Reversible.
   Author: lukeduff.co.uk
   ============================================================ */

/* -------- page-13 barrier icon badges --------
   The pastel treatment hides the .num pills (display:none). We repurpose
   that badge slot as a solid brand-colour circle carrying a custom icon,
   giving the clean pastel cards a brand element back. */
.elementor-13 .services .svc .num{
  display:inline-flex !important;
  width:56px;height:56px;padding:0;border-radius:50%;
  align-items:center;justify-content:center;
  position:relative;overflow:hidden;margin-bottom:18px;
  transition:transform .25s ease, box-shadow .25s ease;
}
/* hide the decorative digit (the barrier title names it) */
.elementor-13 .services .svc .num .elementor-heading-title{
  font-size:0 !important;line-height:0 !important;
}
/* the brand icon, tinted to the badge's text colour */
.elementor-13 .services .svc .num::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:30px;height:30px;background-color:currentColor;
  -webkit-mask:var(--dy-ic) no-repeat center / contain;
          mask:var(--dy-ic) no-repeat center / contain;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* recolour n3 (was pale) to blue so a white icon reads on the light card */
.elementor-13 .services .n3{background:var(--blue) !important;color:#fff !important}
.elementor-13 .n1{--dy-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222.4%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2218%22%20x2%3D%2214%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E")}
.elementor-13 .n2{--dy-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2011.5a11%2011%200%200%201%2015%200%22%2F%3E%3Cpath%20d%3D%22M7.7%2014.8a6.4%206.4%200%200%201%208.6%200%22%2F%3E%3Cpath%20d%3D%22M10.7%2018a2.1%202.1%200%200%201%202.6%200%22%2F%3E%3C%2Fsvg%3E")}
.elementor-13 .n3{--dy-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.2%2017.5h5.6%22%2F%3E%3Cpath%20d%3D%22M10%2020.5h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-3.6%2010.8c.7.5%201.1%201.3%201.1%202.2h5c0-.9.4-1.7%201.1-2.2A6%206%200%200%200%2012%203Z%22%2F%3E%3C%2Fsvg%3E")}
.elementor-13 .n4{--dy-ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%228.5%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M4%2020.5a5.5%205.5%200%200%201%2011%200%22%2F%3E%3Cpath%20d%3D%22M18.5%203.5l.85%201.9%201.9.85-1.9.85-.85%201.9-.85-1.9-1.9-.85%201.9-.85Z%22%2F%3E%3C%2Fsvg%3E")}

/* barrier badge micro-interaction */
.elementor-13 .services .svc:hover .num{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 22px rgba(20,78,140,.28)}
.elementor-13 .services .svc:hover .num::after{transform:scale(1.12)}

/* -------- page-12 "What We Do" service icon badges --------
   The pastel service cards have no badge element, so we inject a
   circular brand-colour badge (with a colour-baked custom icon) via
   ::before. Icons: strategy / assessments / training / partnership /
   social value / impact. Source: build/assets/brand/dycic-icons.svg */
.elementor-12 .services .svc-grid > .svc::before{
  content:"";display:block;flex:0 0 auto;position:relative;
  width:56px;height:56px;border-radius:50%;margin-bottom:18px;
  background-repeat:no-repeat;background-position:center;background-size:30px 30px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.elementor-12 .services .svc-grid > .svc:nth-child(1)::before{background-color:var(--turquoise);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23144e8c%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M15.6%208.4l-2.1%205.1-5.1%202.1%202.1-5.1%205.1-2.1Z%22%2F%3E%3C%2Fsvg%3E")}
.elementor-12 .services .svc-grid > .svc:nth-child(2)::before{background-color:var(--heather);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224.5%22%20width%3D%2214%22%20height%3D%2216.5%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222.6%22%20width%3D%226%22%20height%3D%223.6%22%20rx%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M8.6%2013l2.2%202.2%204.4-4.6%22%2F%3E%3C%2Fsvg%3E")}
.elementor-12 .services .svc-grid > .svc:nth-child(3)::before{background-color:var(--blue);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%209%2012%205l9.5%204L12%2013%202.5%209Z%22%2F%3E%3Cpath%20d%3D%22M6.5%2011v4.3c0%20.9%202.5%202.2%205.5%202.2s5.5-1.3%205.5-2.2V11%22%2F%3E%3Cpath%20d%3D%22M21.5%209v4.4%22%2F%3E%3C%2Fsvg%3E")}
.elementor-12 .services .svc-grid > .svc:nth-child(4)::before{background-color:var(--turquoise);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23144e8c%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.3%22%20y%3D%228.4%22%20width%3D%2210.4%22%20height%3D%227.2%22%20rx%3D%223.6%22%2F%3E%3Crect%20x%3D%2210.3%22%20y%3D%228.4%22%20width%3D%2210.4%22%20height%3D%227.2%22%20rx%3D%223.6%22%2F%3E%3C%2Fsvg%3E")}
.elementor-12 .services .svc-grid > .svc:nth-child(5)::before{background-color:var(--heather);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206.8c1.1-1.7%204-1.2%204%201.1%200%201.7-2.2%203.2-4%204.4-1.8-1.2-4-2.7-4-4.4%200-2.3%202.9-2.8%204-1.1Z%22%2F%3E%3Cpath%20d%3D%22M3.8%2014.4c1.4-.9%203-.7%204.4.2l1.9%201.2a3.4%203.4%200%200%200%203.8%200l1.9-1.2c1.4-.9%203-.9%204.4%200%22%2F%3E%3C%2Fsvg%3E")}
.elementor-12 .services .svc-grid > .svc:nth-child(6)::before{background-color:var(--blue);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16%22%2F%3E%3Crect%20x%3D%225.4%22%20y%3D%2212%22%20width%3D%223.2%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2210.4%22%20y%3D%228.4%22%20width%3D%223.2%22%20height%3D%229.6%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2215.4%22%20y%3D%225%22%20width%3D%223.2%22%20height%3D%2213%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")}
.elementor-12 .services .svc:hover::before{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 22px rgba(0,0,0,.28)}

/* crisp brand sun-rays motif on the page-12 services band */
.elementor-12 .services::after{
  background:url(../../uploads/2026/06/dycic-sun-rays.svg) no-repeat center / contain !important;
  width:340px !important;height:190px !important;opacity:.22 !important;
  transform:none !important;right:-40px !important;top:-30px !important;
}

/* -------- credibility-band icon pop (home) -------- */
.elementor-10 .cred-item .blob{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s}
.elementor-10 .cred-item .blob svg{transition:transform .3s ease}
.elementor-10 .cred-item:hover .blob{transform:translateY(-3px) scale(1.05)}
.elementor-10 .cred-item:hover .blob svg{transform:scale(1.08)}

/* -------- crisp brand sun-rays motif (replaces pixelated PNG) -------- */
.elementor-13 .services::after{
  background:url(../../uploads/2026/06/dycic-sun-rays.svg) no-repeat center / contain !important;
  width:340px !important;height:190px !important;opacity:.22 !important;
  transform:none !important;right:-40px !important;top:-30px !important;
}

/* subtle sun-rays accent above the "Why Digital You?" eyebrow (home) */
.elementor-10 .elementor-element-b376de5{position:relative}
.elementor-10 .elementor-element-b376de5::before{
  content:"";display:block;width:70px;height:36px;margin:0 auto 14px;
  background:url(../../uploads/2026/06/dycic-sun-rays.svg) no-repeat center / contain;
  animation:dy-rays-rise .9s ease both;
}

@keyframes dy-rays-rise{
  from{opacity:0;transform:translateY(8px) scale(.9)}
  to{opacity:1;transform:none}
}

/* -------- respect reduced motion -------- */
@media (prefers-reduced-motion: reduce){
  .elementor-13 .services .svc .num,
  .elementor-13 .services .svc .num::after,
  .elementor-12 .services .svc-grid > .svc::before,
  .elementor-10 .cred-item .blob,
  .elementor-10 .cred-item .blob svg,
  .elementor-10 .elementor-element-b376de5::before{transition:none !important;animation:none !important}
}