/* ============================================================
   GiveWise — MOTION SYMBOLS v2 (2026-11-09)
   A crafted family of PCMB subject MEDALLIONS: filled discs in
   the subject colours with a fine gold ring, an inlay ring and a
   bold cream glyph inside (inline SVG sprite in each page).
   They simply float — gentle independent drift, nothing else.
   No text, no chips, no tap tricks. Pages: blog, programmes.
   ============================================================ */

/* ---------- floating medallions ---------- */
.msym{
  position:absolute;z-index:3;display:block;
  width:var(--s,60px);height:var(--s,60px);
  animation:msymFloat var(--d,6s) ease-in-out var(--dl,0s) infinite alternate;
}
.msym svg{
  display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 10px 15px rgba(24,38,52,.30));
}

@keyframes msymFloat{
  from{transform:translate3d(0,1px,0) rotate(calc(var(--r,2deg) * -1))}
  to{transform:translate3d(2px,-7px,0) rotate(var(--r,2deg))}
}

/* ---------- BLOG: constellation in the hero's quiet space ---------- */
.msym-cluster{position:relative;height:164px;max-width:540px;margin-top:30px}

/* ---------- PROGRAMMES: symbol sky above the subjects grid ---------- */
.msym-sky{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px 18px;
  margin:36px 0 4px;
}
.msym-group{position:relative;height:134px}

@media (max-width:900px){
  .msym-sky{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .msym-cluster{height:150px;margin-top:24px}
}

/* ---------- reduced motion: everything rests ---------- */
@media (prefers-reduced-motion: reduce){
  .msym{animation:none}
}