/* ClickBurst v3 — signature layer on top of v2: burst intro, stacked territories, giant CTA,
   lime progress + section counter, clip-path wipes, dark <-> lime inversions. Vanilla, no libraries. */
:root{--cb3-ink:#111111;--cb3-paper:#F4F1EA;--cb3-lime:#D8FF3E;--cb3-blue:#2457FF;--cb3-white:#FFFDF8;--cb3-ease:cubic-bezier(.16,1,.3,1);--cb3-in:cubic-bezier(.7,0,.2,1)}

/* ---------- 1. Signature burst intro (one intro only; < 1.5 s) ---------- */
html.cb3-nointro #intro{display:none!important}
html.cb3-intro #intro{background:var(--cb3-ink);overflow:hidden;transition:none!important;animation:cb3-introOut .42s var(--cb3-in) 1.02s both!important}
html.cb3-intro #intro.hide{visibility:hidden;opacity:1}
html.cb3-intro #intro:after{content:"";position:absolute;inset:0;background:var(--cb3-lime);transform:translateY(101%);animation:cb3-introBand .52s var(--cb3-in) .92s both;z-index:3;pointer-events:none}
html.cb3-intro .intro-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
html.cb3-intro .intro-kicker,html.cb3-intro .intro-enter{display:none!important}
html.cb3-intro .intro-logo{position:relative;z-index:2;width:72px;height:72px;animation:cb3-logoPop .5s cubic-bezier(.3,1.6,.5,1) both!important;filter:none!important}
html.cb3-intro .intro-wordmark{animation:none!important;margin-top:20px!important;transform:none!important}
html.cb3-intro .intro-wordmark span{animation:cb3-letter .42s var(--cb3-ease) both!important;animation-delay:calc(.16s + var(--i,0)*.026s)!important;filter:none!important}
html.cb3-intro .intro p{animation:cb3-fade .4s ease .5s both!important;margin-top:18px!important;font-size:13px!important;letter-spacing:.02em}
.cb3-ibang{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;pointer-events:none}
.cb3-ibang i{position:absolute;left:-1.5px;top:0;width:3px;height:64px;border-radius:3px;background:var(--cb3-lime);transform-origin:50% 0;transform:rotate(calc(var(--k)*30deg)) translateY(30px) scaleY(0);animation:cb3-ray .62s var(--cb3-ease) .12s both}
.cb3-ibang i:nth-child(3n+2){background:var(--cb3-white);height:40px}
.cb3-ibang i:nth-child(3n){background:var(--cb3-blue);height:30px;width:2px}
.cb3-ibang b{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border:1.5px solid var(--cb3-lime);border-radius:50%;transform:scale(.2);opacity:0;animation:cb3-ring .7s ease-out .14s both}
@keyframes cb3-logoPop{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.14) rotate(4deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes cb3-ray{0%{transform:rotate(calc(var(--k)*30deg)) translateY(26px) scaleY(0);opacity:1}45%{transform:rotate(calc(var(--k)*30deg)) translateY(44px) scaleY(1);opacity:1}100%{transform:rotate(calc(var(--k)*30deg)) translateY(150px) scaleY(.1);opacity:0}}
@keyframes cb3-ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@keyframes cb3-letter{from{opacity:0;transform:translateY(.55em) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes cb3-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cb3-introBand{0%{transform:translateY(101%)}55%{transform:translateY(0)}100%{transform:translateY(-101%)}}
@keyframes cb3-introOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}

/* ---------- 4. Lime progress bar + nav section counter ---------- */
html.cb3 .scroll-progress{height:3px!important;background:var(--cb3-lime)!important;box-shadow:0 1px 0 rgba(17,17,17,.28)!important;display:block}
.cb3-count{display:none}
@media (min-width:1180px) and (hover:hover){
  .cb3-count{display:inline-flex;color:var(--cb3-ink)!important;align-items:baseline;gap:5px;margin:0 14px 0 6px;font:700 11px/1 var(--display,"Space Grotesk",sans-serif);letter-spacing:.08em;color:inherit;white-space:nowrap;font-variant-numeric:tabular-nums;user-select:none}
  .cb3-count .n{display:inline-block;min-width:2ch;overflow:hidden;height:1em;position:relative}
  .cb3-count .n span{display:block;transition:transform .45s var(--cb3-ease)}
  .cb3-count .t{opacity:.45}
  .cb3-count .l{margin-left:8px;padding-left:9px;border-left:1px solid currentColor;font-weight:600;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;max-width:120px;overflow:hidden;text-overflow:ellipsis}
  .cb3-count .dot{width:6px;height:6px;border-radius:50%;background:var(--cb3-lime);box-shadow:0 0 0 1px rgba(17,17,17,.5);align-self:center;margin-right:3px}
}

/* ---------- 2. Territories as stacked cards ---------- */
html.cb3-stack #capabilities .cap-grid{display:block!important;border:0!important;transform:none!important;opacity:1!important;filter:none!important;padding-bottom:4vh}
html.cb3-stack #capabilities .cap{position:sticky!important;top:calc(var(--cb3-top,104px) + var(--ci,0)*16px);display:grid!important;grid-template-columns:150px minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,64px);min-height:0!important;height:auto;padding:clamp(28px,3.2vw,46px)!important;margin:0 0 22vh!important;border:1px solid var(--cb3-ink)!important;border-radius:26px!important;background:var(--cb3-paper)!important;color:var(--cb3-ink)!important;box-shadow:0 -18px 40px -26px rgba(17,17,17,.45);transform:none!important;transition:none!important;overflow:hidden!important;opacity:1!important;filter:none!important;transform-origin:50% 0;scale:var(--cb3-s,1);will-change:scale}
html.cb3-stack #capabilities .cap:last-child{margin-bottom:0!important}
html.cb3-stack #capabilities .cap:before,html.cb3-stack #capabilities .cap:after{display:none!important}
html.cb3-stack #capabilities .cap .cap-num{grid-column:1;grid-row:1;font:700 13px var(--display,"Space Grotesk",sans-serif)!important;letter-spacing:.1em;color:inherit!important;opacity:.7}
html.cb3-stack #capabilities .cap .cb2-ico{grid-column:1;grid-row:2;align-self:end;width:clamp(74px,7vw,104px)!important;height:auto!important;margin:0!important;position:static!important;transform:none!important}
html.cb3-stack #capabilities .cap h3{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0!important;font-size:clamp(46px,6vw,96px)!important;line-height:.86!important;letter-spacing:-.065em!important;color:inherit!important}
html.cb3-stack #capabilities .cap p{grid-column:3;grid-row:1;margin:0 0 20px!important;font-size:clamp(16px,1.35vw,20px)!important;line-height:1.35!important;color:inherit!important;opacity:.82;max-width:30ch}
html.cb3-stack #capabilities .cap ul{grid-column:3;grid-row:2;align-self:end;display:flex!important;flex-wrap:wrap;gap:8px;margin:0!important;padding:0!important;list-style:none}
html.cb3-stack #capabilities .cap li{margin:0!important;padding:7px 12px!important;border:1px solid currentColor;border-radius:999px;font-size:12px!important;font-weight:600;line-height:1!important;color:inherit!important;opacity:1!important;transform:none!important;background:none!important}
html.cb3-stack #capabilities .cap li:before{display:none!important}
html.cb3-stack #capabilities .cap:nth-child(2){background:var(--cb3-ink)!important;color:var(--cb3-white)!important;border-color:var(--cb3-ink)!important}
html.cb3-stack #capabilities .cap:nth-child(3){background:var(--cb3-lime)!important}
html.cb3-stack #capabilities .cap:nth-child(4){background:var(--cb3-white)!important}
html.cb3-stack #capabilities .cap:nth-child(5){background:var(--cb3-ink)!important;color:var(--cb3-white)!important;border-color:var(--cb3-ink)!important}
html.cb3-stack #capabilities .cap:nth-child(2) .cb2-ico .acc,html.cb3-stack #capabilities .cap:nth-child(5) .cb2-ico .acc{fill:var(--cb3-lime)!important}
html.cb3-stack #capabilities .cap:nth-child(3) .cb2-ico .acc{fill:var(--cb3-ink)!important}
html.cb3-stack #capabilities .cap .cb2-ico .ln{stroke:currentColor!important}
@media (max-width:860px){
  html.cb3-stack #capabilities .cap{grid-template-columns:1fr auto;grid-template-rows:auto auto auto auto;top:calc(var(--cb3-top,86px) + var(--ci,0)*10px);padding:22px 20px 22px!important;margin-bottom:9vh!important;border-radius:22px!important}
  html.cb3-stack #capabilities .cap .cap-num{grid-column:1;grid-row:1}
  html.cb3-stack #capabilities .cap .cb2-ico{grid-column:2;grid-row:1 / span 2;align-self:start;width:62px!important}
  html.cb3-stack #capabilities .cap h3{grid-column:1 / -1;grid-row:2;margin:26px 0 12px!important;font-size:clamp(38px,11.5vw,56px)!important}
  html.cb3-stack #capabilities .cap p{grid-column:1 / -1;grid-row:3;font-size:15px!important;margin-bottom:16px!important}
  html.cb3-stack #capabilities .cap ul{grid-column:1 / -1;grid-row:4;gap:6px}
  html.cb3-stack #capabilities .cap li{font-size:11px!important;padding:6px 10px!important}
  }

/* ---------- 3. Giant kinetic CTA (lime) ---------- */
.cb3-cta{position:relative;overflow:hidden;background:var(--cb3-lime);color:var(--cb3-ink);padding:clamp(70px,9vw,130px) 0 clamp(60px,8vw,110px);isolation:isolate}
.cb3-cta-top{display:flex;justify-content:space-between;gap:16px;width:min(1240px,calc(100% - 40px));margin:0 auto clamp(26px,4vw,50px);font:700 10px/1.2 var(--display,"Space Grotesk",sans-serif);letter-spacing:.18em;text-transform:uppercase}
.cb3-cta-top span:last-child{opacity:.6;text-align:right}
.cb3-cta-row{white-space:nowrap;line-height:.84;user-select:none}
.cb3-cta-track{display:inline-flex;gap:.3em;font:700 clamp(76px,15vw,250px)/.84 var(--display,"Space Grotesk",sans-serif);letter-spacing:-.075em;transform:translate3d(var(--x,0px),0,0);will-change:transform}
.cb3-cta-track span{display:inline-flex;align-items:center;gap:.3em}
.cb3-cta-row.o .cb3-cta-track{color:transparent;-webkit-text-stroke:2px var(--cb3-ink)}
.cb3-cta-row.o{margin-top:.04em}
.cb3-cta-track svg{width:.42em;height:.42em;fill:var(--cb3-ink);flex:0 0 auto}
.cb3-cta-row.o svg{fill:none;stroke:var(--cb3-ink);stroke-width:1}
.cb3-cta-mid{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(-70px,-5vw,-30px);z-index:2;pointer-events:none}
.cb3-mag{pointer-events:auto;position:relative;display:grid;place-items:center;width:clamp(150px,15vw,220px);aspect-ratio:1;border-radius:50%;background:var(--cb3-ink);color:var(--cb3-lime);text-decoration:none;transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .5s var(--cb3-ease),background .3s ease,color .3s ease;box-shadow:0 0 0 10px var(--cb3-lime),0 0 0 11px var(--cb3-ink)}
.cb3-mag.cb3-near{transition:transform .12s linear,background .3s ease,color .3s ease}
.cb3-mag-in{display:flex;flex-direction:column;align-items:center;gap:6px;font:700 clamp(19px,1.7vw,25px)/1 var(--display,"Space Grotesk",sans-serif);letter-spacing:-.04em;transform:translate3d(calc(var(--mx,0px)*.35),calc(var(--my,0px)*.35),0);transition:transform .5s var(--cb3-ease)}
.cb3-mag.cb3-near .cb3-mag-in{transition:transform .12s linear}
.cb3-mag-in small{font:700 9px/1 var(--display,"Space Grotesk",sans-serif);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.cb3-mag-arr{font-size:1.2em;transition:transform .35s var(--cb3-ease)}
.cb3-mag:hover{background:var(--cb3-blue);color:var(--cb3-white)}
.cb3-mag:hover .cb3-mag-arr{transform:translateX(6px) rotate(-45deg)}
.cb3-mag:focus-visible{outline:3px solid var(--cb3-blue);outline-offset:14px}
.cb3-mag:active{scale:.96}
.cb3-cta-alt{pointer-events:auto;font:700 12px/1 var(--display,"Space Grotesk",sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--cb3-ink);text-decoration:none;border-bottom:1.5px solid var(--cb3-ink);padding-bottom:5px}
.cb3-cta-alt:hover{color:var(--cb3-blue);border-color:var(--cb3-blue)}
.cb3-cta-lede{width:min(1240px,calc(100% - 40px));margin:clamp(30px,4vw,54px) auto 0;display:flex;justify-content:space-between;gap:18px;font:600 clamp(14px,1.2vw,17px)/1.35 var(--display,"Space Grotesk",sans-serif)}
.cb3-cta-lede span:last-child{max-width:36ch;text-align:right;opacity:.75}
@media (max-width:760px){
  .cb3-cta-top{flex-direction:column;gap:6px}.cb3-cta-top span:last-child{text-align:left}
  .cb3-cta-row.o .cb3-cta-track{-webkit-text-stroke-width:1.4px}
  .cb3-cta-mid{margin-top:26px}
  .cb3-mag{box-shadow:0 0 0 8px var(--cb3-lime),0 0 0 9px var(--cb3-ink)}
  .cb3-cta-lede{flex-direction:column}.cb3-cta-lede span:last-child{text-align:left}
}

/* ---------- 5. Clip-path wipe reveals (portfolio items) ---------- */
.cb3-w.cb3-w{clip-path:inset(0 100% 0 0);transition:clip-path .95s var(--cb3-in),transform .9s var(--cb3-ease),opacity .8s var(--cb3-ease),box-shadow .35s ease!important}
.cb3-w.cb3-w.cb3-win{clip-path:inset(0 0 0 0)}
.cb3-w img,.cb3-w video{transition:scale 1.3s var(--cb3-ease)}
.cb3-w:not(.cb3-win) img,.cb3-w:not(.cb3-win) video{scale:1.16}
.cb3-wbar{position:absolute;top:0;bottom:0;left:0;width:10px;margin-left:-10px;background:var(--cb3-lime);z-index:20;pointer-events:none;transition:left .95s var(--cb3-in),opacity .2s ease .9s}
.cb3-win>.cb3-wbar{left:100%;opacity:0}

/* ---------- 6. Dark <-> lime inversion (kinetic strip) ---------- */
.cb3-flood{position:absolute;inset:0;background:var(--cb3-ink);clip-path:inset(50% 0 50% 0);transition:clip-path .8s var(--cb3-in);z-index:0;pointer-events:none}
.cb2-kinetic>:not(.cb3-flood){position:relative;z-index:1}
.cb2-kinetic>.cb2-rule{position:absolute}
.cb2-kinetic .cb2-k-track,.cb2-kinetic .cb2-k-row--b,.cb2-kinetic .cb2-k-cap,.cb2-kinetic .cb2-rule-in,.cb2-kinetic .cb2-rule-n{transition:color .6s ease,background-color .6s ease,-webkit-text-stroke-color .6s ease}
.cb2-kinetic .cb2-k-o{transition:-webkit-text-stroke-color .6s ease}
.cb2-kinetic.cb3-inv .cb3-flood{clip-path:inset(0 0 0 0)}
.cb2-kinetic.cb3-inv .cb2-k-row:not(.cb2-k-row--b) .cb2-k-track{color:var(--cb3-lime)}
.cb2-kinetic.cb3-inv .cb2-k-row:not(.cb2-k-row--b) .cb2-k-o{-webkit-text-stroke-color:var(--cb3-paper)}
.cb2-kinetic.cb3-inv .cb2-k-row--b{background:var(--cb3-lime);color:var(--cb3-ink)}
.cb2-kinetic.cb3-inv .cb2-k-row--b .cb2-k-track,.cb2-kinetic.cb3-inv .cb2-k-row--b .cb2-k-w:not(.cb2-k-o){color:var(--cb3-ink)!important}
.cb2-kinetic.cb3-inv .cb2-k-row--b .cb2-k-o{-webkit-text-stroke-color:var(--cb3-ink)}
.cb2-kinetic.cb3-inv .cb2-k-row--b .cb2-k-s{fill:var(--cb3-ink)}
.cb2-kinetic.cb3-inv .cb2-k-cap,.cb2-kinetic.cb3-inv .cb2-rule-in{color:#a6a299}
.cb2-kinetic.cb3-inv .cb2-rule-n{color:var(--cb3-paper)}
.cb2-kinetic.cb3-inv .cb2-rule-spark{color:var(--cb3-lime)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.cb3-intro #intro{display:none!important}
  .cb3-w,.cb3-w.cb3-win{clip-path:none!important;transition:none!important}
  .cb3-w img,.cb3-w video{scale:1!important}
  .cb3-wbar{display:none!important}
  html.cb3-stack #capabilities .cap{scale:1!important}
  .cb3-cta-track{transform:none!important}
  .cb3-mag,.cb3-mag-in{transform:none!important;transition:none!important}
  .cb3-flood{transition:none!important}
  .cb2-kinetic *{transition:none!important}
}

.cb3-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Ganesh feedback 30 Oct 11:16 */
.cb2-grain{display:none!important}
.cb2-sound{display:none!important}
/* compact, distinctive cursor label: small lime ring with tiny text */
.cursor-follower.cbd-labelled{width:46px!important;height:46px!important}
.cursor-follower.cbd-labelled .cursor-follower-orbit{background:transparent!important;border:1.5px solid #D8FF3E!important;box-shadow:0 0 0 4px rgba(216,255,62,.18)}
.cursor-follower.cbd-labelled .cbd-cursor-label{color:#D8FF3E;font-size:7.5px;letter-spacing:.18em;mix-blend-mode:difference}
body.cbd-ring-labelled .cursor-ring{width:46px!important;height:46px!important;background:transparent!important;border:1.5px solid #D8FF3E!important;box-shadow:0 0 0 4px rgba(216,255,62,.18)}
body.cbd-ring-labelled .cursor-ring .cbd-cursor-label{color:#D8FF3E;font-size:7.5px}