/* One card system for the whole site: frosted glass, tinted, with depth · Oct 29 2026
   Loaded last on every page. Tints rotate lime, violet, teal. */
:root{--g-lime:184,230,46;--g-violet:108,92,231;--g-teal:24,180,180}

/* ---------- light sections ---------- */
:is(.ic-card,.ind-card,.fact,.pc,.mm-card,.stat,.cs-steps>div,.wk-card,.tier:not(.feature),.ft-grid .ft){--t:var(--g-lime)}
:is(.ic-card,.ind-card,.fact,.pc,.mm-card,.stat,.cs-steps>div,.wk-card,.tier:not(.feature),.ft-grid .ft):nth-child(3n+2){--t:var(--g-violet)}
:is(.ic-card,.ind-card,.fact,.pc,.mm-card,.stat,.cs-steps>div,.wk-card,.tier:not(.feature),.ft-grid .ft):nth-child(3n){--t:var(--g-teal)}

:is(.ic-card,.ind-card,.fact,.pc,.mm-card,.stat,.cs-steps>div,.wk-card,.tier:not(.feature),.ft-grid .ft){
  background:linear-gradient(165deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.78) 55%,rgba(var(--t),.13) 100%) !important;
  border:1.5px solid rgba(255,255,255,.95) !important;
  border-radius:28px !important;
  box-shadow:0 28px 60px -30px rgba(var(--t),.55),0 2px 8px -2px rgba(18,16,46,.06),inset 0 1px 0 #fff !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s !important}
:is(.ic-card,.ind-card,.pc,.mm-card,.wk-card,.tier:not(.feature),.ft-grid .ft):hover{transform:translateY(-5px);box-shadow:0 40px 80px -30px rgba(var(--t),.7),0 2px 8px -2px rgba(18,16,46,.06),inset 0 1px 0 #fff !important}
/* retire the old accent bars and corner blobs */
.ic-card::after,.ft-grid .ft::before,.ft-grid .ft::after{display:none !important}
/* give light bands a little color for the glass to sit on */
.ax-light,.ax-gray,.band-mist{position:relative}

/* ---------- dark sections: dark frosted glass ---------- */
:is(.band-ink,.band-dark,.ax-dark) :is(.ic-card,.ind-card,.fact,.pc,.mm-card,.stat,.cs-steps>div,.ft-grid .ft,.tier:not(.feature)){
  background:linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 60%,rgba(var(--t),.10) 100%) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 30px 70px -30px rgba(var(--t),.45),inset 0 1px 0 rgba(255,255,255,.14) !important;
  color:#F5F5F7}
:is(.band-ink,.band-dark,.ax-dark) :is(.ic-card,.ind-card,.fact,.pc,.mm-card,.stat,.cs-steps>div,.ft-grid .ft,.tier:not(.feature)) :is(h3,h4,b,strong){color:#fff !important;-webkit-text-fill-color:#fff}
:is(.band-ink,.band-dark,.ax-dark) :is(.ic-card,.ind-card,.fact,.pc,.mm-card,.stat,.cs-steps>div,.ft-grid .ft,.tier:not(.feature)) :is(p,small,li,span:not(.ic):not(.tag):not(.ind-ic)){color:#C9C7E0 !important}
:is(.band-ink,.band-dark,.ax-dark) .ic-card a{color:#C9EE5A !important}
:is(.band-ink,.band-dark,.ax-dark) :is(.ic-card,.ind-card,.pc,.ft-grid .ft):hover{box-shadow:0 40px 80px -28px rgba(var(--t),.6),inset 0 1px 0 rgba(255,255,255,.18) !important;border-color:rgba(var(--t),.45) !important}

/* ---------- Work grid: brand-tinted until you hover ---------- */
.wk-grid{gap:26px !important}
.wk-card{overflow:hidden;padding:10px !important}
.wk-media{border-radius:20px;overflow:hidden;isolation:isolate}
.wk-media :is(img,video,.wk-live){filter:none;transition:transform .6s ease !important}
/* work cards: lime frame, wobble + sparkle on hover */
.wk-media{box-shadow:inset 0 0 0 2px #B8E62E;transition:box-shadow .35s ease;transform-origin:50% 60%}
.wk-card:hover .wk-media,.wk-card:focus-visible .wk-media{box-shadow:inset 0 0 0 2px #B8E62E,0 0 22px -4px rgba(184,230,46,.75);animation:wkWobble .7s cubic-bezier(.36,.07,.19,.97) both}
@keyframes wkWobble{0%{transform:rotate(0) scale(1)}20%{transform:rotate(-1.1deg) scale(1.01)}40%{transform:rotate(.9deg) scale(1.01)}60%{transform:rotate(-.5deg) scale(1.005)}80%{transform:rotate(.25deg)}100%{transform:rotate(0) scale(1)}}
.wk-media .spk{position:absolute;z-index:3;width:var(--s,10px);height:var(--s,10px);pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0 14%,#D4F55A 32%,#8DBA14 56%,rgba(141,186,20,0) 74%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 2px rgba(120,170,10,.9))}
.wk-card:hover .wk-media .spk,.wk-card:focus-visible .wk-media .spk{animation:wkSpark 1.6s ease-in-out var(--d,0s) infinite}
@keyframes wkSpark{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}30%{opacity:1;transform:translate(calc(var(--dx)*.4),calc(var(--dy)*.4)) scale(1) rotate(45deg)}70%{opacity:.7}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3) rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.wk-card:hover .wk-media{animation:none}.wk-media .spk{display:none}}
.wk-card:hover .wk-media img{transform:scale(1.04)}
.wk-media .wk-play,.wk-media .wk-price{z-index:2}
.wk-meta{padding:18px 12px 12px !important;gap:2px !important}
.wk-meta small,.wk-meta em{display:none !important}
.wk-meta b{font-size:20px !important}
.wk-tag{background:rgba(var(--t),.16) !important;color:#12102E !important}

/* case-study numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.num{--t:var(--g-lime);padding:30px 28px;border-radius:28px;background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(255,255,255,.78) 55%,rgba(var(--t),.14));border:1.5px solid rgba(255,255,255,.95);box-shadow:0 28px 60px -30px rgba(var(--t),.55),inset 0 1px 0 #fff}
.num:nth-child(3n+2){--t:var(--g-violet)}.num:nth-child(3n){--t:var(--g-teal)}
.num b{display:block;font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.05em;line-height:1;background:linear-gradient(135deg,#3B2FC9,#6C5CE7 55%,#14A3A3);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.num span{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:#55536E}
@media (max-width:860px){.nums{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.nums{grid-template-columns:1fr}}
/* More-work rails: true color, lime frame */
.work-grid .slide .frame{position:relative;isolation:isolate;overflow:hidden;box-shadow:0 0 0 2px #B8E62E;transition:box-shadow .35s ease}
.work-grid .slide:hover .frame{box-shadow:0 0 0 2px #B8E62E,0 0 22px -4px rgba(184,230,46,.75)}