/* Digital You CIC — PREMIUM POLISH LAYER.
   Adds depth, brand gradients and breathing room on top of the frozen dycic.css and all
   override sheets. Keeps Sharon's approved pastel card language (gradients stay WITHIN each
   pastel/brand family — no garish colour). Nothing here edits a frozen file. Late load
   (prio 700) + specificity via body.elementor-page-{id}. Reversible: delete this file +
   dycic-load-polish.php. Author: lukeduff.co.uk

   Design system introduced here:
     radius   cards 22px · large panels (route/case/form/pkg-create) 28px
     shadow   card rest  0 16px 38px rgba(9,32,60,.14) ·  hover 0 28px 60px rgba(9,32,60,.22)
              pastel-on-dark  rest 0 18px 42px rgba(6,24,48,.26) · hover 0 30px 64px .36
     motion   lift -7px, cubic-bezier(.2,.7,.2,1) .3s
     gradients brand-family only (turq / blue / heather / sun) */

:root{
  --grad-turq:linear-gradient(135deg,#1fc6d6 0%,#0e8f9d 100%);
  --grad-blue:linear-gradient(135deg,#1c63ad 0%,#103f73 100%);
  --grad-heather:linear-gradient(135deg,#8a72c4 0%,#5f4a92 100%);
  --grad-sun:linear-gradient(120deg,#1fc6d6 0%,#4f86c9 52%,#8a72c4 100%);
  --ease-lift:cubic-bezier(.2,.7,.2,1);
}

/* ===================================================== 1. CARD DEPTH (all pages) */
/* light-background cards: deeper resting shadow, unified radius, smooth lift */
.you-card,.ins-card,.pkg,.offer-item,.form-card,.legal-note{
  border-radius:22px!important;
  box-shadow:0 16px 38px rgba(9,32,60,.13)!important;
  transition:transform .3s var(--ease-lift),box-shadow .3s ease!important;
}
.you-card:hover,.ins-card:hover,.pkg:hover,.offer-item:hover{
  transform:translateY(-7px)!important;
  box-shadow:0 28px 60px rgba(9,32,60,.22)!important;
}
.route,.casecard,.form-card,.pkg-create,.m-visual .ph{border-radius:28px!important}

/* pastel service cards on the dark bands: bigger radius, richer shadow, smoother lift */
.services .svc,.values .svc{
  border-radius:22px!important;
  box-shadow:0 18px 42px rgba(6,24,48,.26)!important;
  transition:transform .3s var(--ease-lift),box-shadow .3s ease!important;
}
.services .svc:hover,.values .svc:hover{
  transform:translateY(-7px)!important;
  box-shadow:0 30px 64px rgba(6,24,48,.36)!important;
}

/* subtle in-family gradient on the pastel cards (turq/heather/blue/sand rotation, shared by
   home, What-We-Do, Digital-Inclusion, Mission&Values — all use the same pastel order) */
body.elementor-page-10 .svc-grid>.svc:nth-child(4n+1),
body.elementor-page-12 .svc-grid>.svc:nth-child(4n+1),
body.elementor-page-13 .svc-grid>.svc:nth-child(4n+1),
body.elementor-page-46 .svc-grid>.svc:nth-child(4n+1){background:linear-gradient(158deg,#e4f7fa 0%,#c9ecf1 100%)!important}
body.elementor-page-10 .svc-grid>.svc:nth-child(4n+2),
body.elementor-page-12 .svc-grid>.svc:nth-child(4n+2),
body.elementor-page-13 .svc-grid>.svc:nth-child(4n+2),
body.elementor-page-46 .svc-grid>.svc:nth-child(4n+2){background:linear-gradient(158deg,#efe8fa 0%,#ddd1f0 100%)!important}
body.elementor-page-10 .svc-grid>.svc:nth-child(4n+3),
body.elementor-page-12 .svc-grid>.svc:nth-child(4n+3),
body.elementor-page-13 .svc-grid>.svc:nth-child(4n+3),
body.elementor-page-46 .svc-grid>.svc:nth-child(4n+3){background:linear-gradient(158deg,#e7f1fc 0%,#cfe1f5 100%)!important}
body.elementor-page-10 .svc-grid>.svc:nth-child(4n+4),
body.elementor-page-12 .svc-grid>.svc:nth-child(4n+4),
body.elementor-page-13 .svc-grid>.svc:nth-child(4n+4),
body.elementor-page-46 .svc-grid>.svc:nth-child(4n+4){background:linear-gradient(158deg,#f6efdd 0%,#ecdcbe 100%)!important}

/* ===================================================== 2. GRADIENT ICON BADGES */
/* home credibility blobs: flat circles -> gradient chips + glow */
body.elementor-page-10 .cred-item .blob{color:#fff!important;box-shadow:0 8px 20px rgba(9,32,60,.22)!important}
body.elementor-page-10 .cred-item .blob.b1{background:var(--grad-turq)!important}
body.elementor-page-10 .cred-item .blob.b2{background:var(--grad-heather)!important}
body.elementor-page-10 .cred-item .blob.b3{background:var(--grad-blue)!important}
body.elementor-page-10 .cred-item .blob.b4{background:linear-gradient(135deg,#2aa7bf,#5f4a92)!important}
/* training tick badges -> turquoise gradient */
.tick{background:var(--grad-turq)!important;box-shadow:0 6px 14px rgba(14,143,157,.30)!important}

/* ===================================================== 3. PRIMARY CTA BUTTONS */
/* content-scoped (.elementor-{id} excludes the header template) — gradient fill + lift.
   Leaves white / outline / blue / heather variants untouched. */
.elementor-10 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-11 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-12 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-13 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-14 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-15 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-16 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-17 .btn:not(.white):not(.outline):not(.blue):not(.heather),
.elementor-46 .btn:not(.white):not(.outline):not(.blue):not(.heather){
  background:var(--grad-turq)!important;color:#08343a!important;
  box-shadow:0 10px 24px rgba(14,143,157,.34)!important;
}
.elementor-10 .btn:not(.white):not(.outline):hover,
.elementor-11 .btn:not(.white):not(.outline):hover,
.elementor-12 .btn:not(.white):not(.outline):hover,
.elementor-13 .btn:not(.white):not(.outline):hover,
.elementor-14 .btn:not(.white):not(.outline):hover,
.elementor-15 .btn:not(.white):not(.outline):hover,
.elementor-16 .btn:not(.white):not(.outline):hover,
.elementor-17 .btn:not(.white):not(.outline):hover,
.elementor-46 .btn:not(.white):not(.outline):hover{
  transform:translateY(-2px);box-shadow:0 16px 32px rgba(14,143,157,.44)!important;
}

/* ===================================================== 4. DARK BANDS -> RADIAL DEPTH */
body.elementor-page-10 .services,
body.elementor-page-11 .services,
body.elementor-page-12 .services,
body.elementor-page-13 .services{
  background:radial-gradient(125% 95% at 80% 0%,#1e69b4 0%,#103f73 58%)!important;
}
body.elementor-page-10 .contact{background:radial-gradient(120% 95% at 76% 8%,#1e69b4 0%,#144e8c 60%)!important}
body.elementor-page-13 .casecard{background:radial-gradient(120% 130% at 15% 0%,#1e69b4 0%,#103f73 62%)!important}

/* ===================================================== 5. ROUTE / GET-INVOLVED / PKG */
/* flat-until-hover -> resting shadow + gradient */
.route{box-shadow:0 22px 50px rgba(9,32,60,.22)!important}
body.elementor-page-10 .route.org{background:radial-gradient(120% 120% at 18% 0%,#1e69b4 0%,#103f73 62%)!important}
body.elementor-page-10 .route.fund{background:linear-gradient(140deg,#8a72c4 0%,#5f4a92 100%)!important}
/* featured (middle) pricing tier lifts on For-Organisations */
body.elementor-page-15 .pkg-grid>.pkg:nth-child(2){transform:translateY(-8px);box-shadow:0 30px 64px rgba(9,32,60,.20)!important}

/* ===================================================== 6. SPACING & RHYTHM */
/* more air in the grids */
.svc-grid,.you-grid,.ins-grid,.offer-grid,.pkg-grid{gap:26px!important}
/* the cramped home credibility band gets room to breathe */
body.elementor-page-10 .cred-band{padding:36px 0 76px!important}
body.elementor-page-10 .cred-band .inner{gap:26px!important}
/* deeper dark service bands */
body.elementor-page-10 .services,
body.elementor-page-12 .services,
body.elementor-page-13 .services{padding-top:112px!important;padding-bottom:120px!important}
/* roomier training menu items */
.offer-item{padding:26px 26px!important}
/* unify the inconsistent "where next" / mid CTA band rhythm */
.midband{padding-top:80px!important;padding-bottom:80px!important}

/* ===================================================== 7. HERO TEXT SAFETY */
/* the lighter photo scrim needs a soft text-shadow so headings stay crisp at the edges */
.hero h1,.hero p.lead,.hero .lead p{text-shadow:0 2px 22px rgba(9,32,60,.55),0 1px 3px rgba(9,32,60,.35)}
.hero .pill{text-shadow:0 1px 8px rgba(9,32,60,.5);background:rgba(16,63,115,.30);backdrop-filter:blur(3px)}

/* ===================================================== 8. PREMIUM FOOTER */
/* brand-gradient hairline on top, softer canvas, roomier grid */
.dy-footer{position:relative;background:linear-gradient(180deg,#f7fafd 0%,#eef3f9 100%)!important;padding-top:72px!important;padding-bottom:34px!important}
.dy-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#16becf 0%,#4f86c9 45%,#7961aa 75%,#e8b93c 100%)}
.dy-foot-grid{gap:56px!important}
.dy-footer a{transition:color .15s}
.dy-footer a:hover{color:#0e8f9d}
.dy-foot-base{border-top:1px solid rgba(20,78,140,.10);margin-top:44px!important;padding-top:26px!important;opacity:.92}

/* ===================================================== 9. MID CTA BANDS — subtle glow */
.midband{position:relative;overflow:hidden}
.midband::after{content:"";position:absolute;left:50%;bottom:-180px;transform:translateX(-50%);
  width:640px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(22,190,207,.10) 0%,rgba(22,190,207,0) 70%)}

/* ===================================================== 10. INSIGHT / BLOG CARDS — gradient accent */
.ins-card{position:relative;overflow:hidden}
.ins-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--grad-sun)}

/* ===================================================== 11a. INLINE PHOTO BANDS */
/* the three community photos placed via Elementor on pages 13 / 15 / 16 */
.elementor-element-6914f64 img,
.elementor-element-1d57867 img,
.elementor-element-6b2f9a5 img{
  border-radius:24px;box-shadow:0 24px 54px rgba(9,32,60,.20);
  width:100%;max-width:880px;aspect-ratio:2/1;object-fit:cover;
}
.elementor-element-6914f64,
.elementor-element-1d57867,
.elementor-element-6b2f9a5{margin-top:38px}

/* ===================================================== 11c. ROUTE-CARD MOTIF vs TEXT (mobile) */
/* at phone widths the decorative burst (.ray, abs top-right) collided with the card heading
   (30px overlap) and first body lines. Shrink + fade it and keep the heading clear. */
@media(max-width:680px){
  body.elementor-page-10 .route .ray{width:52px;right:14px;top:14px;opacity:.32}
  body.elementor-page-10 .route h3{padding-right:64px}
}

/* ===================================================== 11b. INTRO-SPLIT GAP FIX */
/* pages 13/14: the sheet says .intro-split{gap:56px} but Elementor's element-level container
   CSS wins and computes gap:0 — photo sat flush against the text (0px). Enforce it. */
body.elementor-page-13 .intro-split,
body.elementor-page-14 .intro-split{gap:56px!important}
@media(max-width:900px){
  body.elementor-page-13 .intro-split,
  body.elementor-page-14 .intro-split{gap:34px!important}
}

/* ===================================================== 11. CONTACT PAGE DEPTH */
body.elementor-page-17 .contactpage{background:linear-gradient(180deg,#f4f7fb 0%,#eaf1f8 100%)!important}
body.elementor-page-17 .form-card{box-shadow:0 30px 70px rgba(9,32,60,.18)!important}

/* =====================================================================================
   12. HIGH-LEVEL POLISH SWEEP — rays-motif texture, rhythm, depth on the flat/thin sections
   ===================================================================================== */

/* --- 12a. rays watermark behind the flat text sections (About/Resources/Mission "believe",
   Inclusion/Training "sustain") — turns template-y white walls into brand-textured panels --- */
body.elementor-page-11 .believe,
body.elementor-page-16 .believe,
body.elementor-page-46 .believe,
body.elementor-page-13 .sustain,
body.elementor-page-14 .sustain{position:relative;overflow:hidden}
body.elementor-page-11 .believe::before,
body.elementor-page-16 .believe::before,
body.elementor-page-46 .believe::before,
body.elementor-page-13 .sustain::before,
body.elementor-page-14 .sustain::before{
  content:"";position:absolute;right:-110px;top:-90px;width:360px;height:360px;
  background:url(../../uploads/2026/06/dycic-sun-rays.svg) no-repeat center/contain;
  opacity:.07;transform:rotate(10deg);pointer-events:none;z-index:0;
}
body.elementor-page-11 .believe-inner,
body.elementor-page-16 .believe-inner,
body.elementor-page-46 .believe-inner,
body.elementor-page-13 .sustain-inner,
body.elementor-page-14 .sustain-inner{position:relative;z-index:1}

/* --- 12b. thin CTA bands ("Explore our support" p12, mid-CTA bands) get the rays + glow so
   they read as designed sections, not two lonely buttons --- */
.midband,.elementor-12 .explore{position:relative;overflow:hidden}
.elementor-12 .explore::before{
  content:"";position:absolute;left:-90px;bottom:-100px;width:300px;height:300px;
  background:url(../../uploads/2026/06/dycic-sun-rays.svg) no-repeat center/contain;
  opacity:.07;transform:rotate(-8deg);pointer-events:none;z-index:0;
}
.elementor-12 .explore-inner{position:relative;z-index:1}

/* --- 12c. Contact: balance the tall form — vertically centre the left column + rays motif --- */
body.elementor-page-17 .contactpage .grid{align-items:center!important}
body.elementor-page-17 .contactpage{position:relative;overflow:hidden}
body.elementor-page-17 .contactpage::before{
  content:"";position:absolute;left:-120px;bottom:-120px;width:380px;height:380px;
  background:url(../../uploads/2026/06/dycic-sun-rays.svg) no-repeat center/contain;
  opacity:.06;transform:rotate(6deg);pointer-events:none;z-index:0;
}
body.elementor-page-17 .contactpage .grid{position:relative;z-index:1}

/* --- 12d. About founder monogram placeholders: from "photo missing" to intentional brand tiles
   (brand gradient + rays glow + inner light) so they hold their own at hero scale --- */
body.elementor-page-11 .ph.mono{
  background:radial-gradient(125% 125% at 18% 0%,#1e69b4 0%,#103f73 62%)!important;
  box-shadow:0 24px 50px rgba(13,56,102,.24),inset 0 2px 40px rgba(255,255,255,.10)!important;
}
body.elementor-page-11 .ph.mono .mono-initials,
body.elementor-page-11 .ph.mono h3{text-shadow:0 4px 24px rgba(9,32,60,.35)}

/* --- 12e. lift the homepage community strip off flat white with a whisper of tint + rhythm --- */
.dycic-comm{background:linear-gradient(180deg,#ffffff 0%,#f4f8fc 100%)!important}
body.elementor-page-10 .cred-band{padding-top:30px!important}

/* --- 12f. stronger ghost/outline buttons on the dark heroes (were thin + low-signal) --- */
.hero .btn.outline,.hero .btn.white{backdrop-filter:blur(2px)}
.hero .btn.outline{box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)!important}
.hero .btn.outline:hover{background:rgba(255,255,255,.16)!important;box-shadow:inset 0 0 0 2px #fff!important}

/* --- 12g. deepen the flat white content cards a touch more (blog/insight, package, offer) --- */
.ins-card,.pkg{box-shadow:0 18px 44px rgba(9,32,60,.12)!important}
.ins-card:hover,.pkg:hover{box-shadow:0 30px 64px rgba(9,32,60,.20)!important}

/* ===================================================== 13. A11Y: SOLID FALLBACKS UNDER GRADIENTS
   The background:<gradient>!important shorthands above wipe background-color, so contrast
   tools (and any CSS-image failure) fall through to page white behind light text.
   Re-assert each gradient's base colour as a solid underneath. Zero visual change. */
body.elementor-page-10 .services,
body.elementor-page-11 .services,
body.elementor-page-12 .services,
body.elementor-page-13 .services{background-color:#103f73!important}
body.elementor-page-10 .contact{background-color:#144e8c!important}
body.elementor-page-13 .casecard{background-color:#103f73!important}
body.elementor-page-10 .route.org{background-color:#103f73!important}
body.elementor-page-10 .route.fund{background-color:#5f4a92!important}
body.elementor-page-11 .ph.mono{background-color:#103f73!important}