#prog{position:fixed;left:0;top:0;height:3px;width:0;z-index:2147483000;background:linear-gradient(90deg,#6D4AE8,#6D4AE8);transition:width .1s linear;pointer-events:none}
.btn,.b1,.b2,.go,.cta a,.sendbtns a,#sn .ncta,.gm,.dir{position:relative;overflow:hidden}
.btn::after,.b1::after,.go::after,.cta a::after,.sendbtns a::after,#sn .ncta::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.btn:hover::after,.b1:hover::after,.go:hover::after,.cta a:hover::after,.sendbtns a:hover::after,#sn .ncta:hover::after{left:140%}
.phero,.hero{position:relative;overflow:hidden}
.phero::before,.phero::after,.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none;animation:fxfl 9s ease-in-out infinite alternate}
.phero::before,.hero::before{width:340px;height:340px;background:#6D4AE8;right:8%;top:-60px}
.phero::after,.hero::after{width:280px;height:280px;background:#6D4AE8;right:24%;bottom:-90px;animation-delay:-4s}
@keyframes fxfl{to{transform:translate(-40px,30px) scale(1.15)}}
.phero .w,.hero .w{position:relative;z-index:1}
.cta{position:relative;overflow:hidden}.cta::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12);right:-60px;top:-80px;animation:fxfl 8s ease-in-out infinite alternate;pointer-events:none}.cta>*{position:relative}
.still h2,.faqh,.sh h2{position:relative}
.still h2::after,.sh h2::after{content:"";display:block;height:3px;width:0;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,#6D4AE8,#6D4AE8);transition:width .9s .3s cubic-bezier(.22,.61,.36,1)}
.still .hd.in-v h2::after,.sh.in-v h2::after{width:64px}
@media(prefers-reduced-motion:reduce){.phero::before,.phero::after,.hero::before,.hero::after,.cta::before{animation:none}.btn::after,.b1::after,.go::after,.cta a::after{display:none}.still h2::after,.sh h2::after{transition:none}}

/* flat pass: no glow orbs, gradients or shine */
#prog{background:#6D4AE8}
.phero::before,.phero::after,.hero::before,.hero::after,.cta::before{display:none!important}
.btn::after,.b1::after,.go::after,.cta a::after,.sendbtns a::after,#sn .ncta::after{display:none!important}
.cta{background:linear-gradient(135deg,#6D4AE8 0%,#5B3DD1 100%)!important;animation:none!important;box-shadow:none!important}
.still h2::after,.sh h2::after{background:#6D4AE8}

/* compact CTA banner */
body .cta{max-width:1200px;min-height:200px;padding:34px 56px;border-radius:28px;gap:40px;flex-wrap:nowrap;background:linear-gradient(135deg,#6D4AE8 0%,#5B3DD1 100%);box-shadow:0 24px 50px -28px rgba(91,61,209,.65)}
body .cta::before{display:none}
body .cta>div:first-child{flex:1 1 auto;max-width:720px}
body .cta h3{font-size:clamp(22px,2.3vw,28px);margin-top:8px}
body .cta p{font-size:15px;line-height:1.55;max-width:680px;margin-top:8px;opacity:.82}body .cta p.tagl{margin-top:8px;font-style:italic;opacity:.65}
body .cta .bt{flex:none;display:flex;gap:12px;flex-wrap:wrap}body .cta .btn{padding:14px 28px;font-weight:600;white-space:nowrap}
@media(max-width:800px){body .cta{flex-direction:column;align-items:flex-start;min-height:0;padding:32px 24px;gap:24px;border-radius:24px}body .cta .bt,body .cta .btn{width:100%;justify-content:center}}

/* site-wide type scale (reference: About Us) */
body .phero h1,body .hero h1{font-size:clamp(32px,4.6vw,48px)!important;line-height:1.15;font-weight:800;letter-spacing:-.02em}
body .phero p,body .hero p{font-size:18px!important;line-height:1.68}
body .phero small,body .hero small{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
body .sec h2,body .pwrap .txt h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15;font-weight:700;letter-spacing:-.025em}
body .sec .sh p,body .sec .intro p,body .sec .two p{font-size:17px;line-height:1.75}
body .pc p,body .pc ul{font-size:17px;line-height:1.75}
body .sec h3:not(.cta h3){font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
body .pc p,body .pc ul,body .pc li{font-size:17px;line-height:1.75}

/* white buttons: visible hover */
.btn.b-w{transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn.b-w:hover{background:#6D4AE8;color:#fff;transform:translateY(-3px);box-shadow:0 12px 26px -8px rgba(109,74,232,.65)}
.cta .btn.b-w:hover{background:#14112B;color:#fff;box-shadow:0 12px 26px -8px rgba(20,17,43,.55)}

/* pills: large centered pills, rows spanning the page width */
body .chips,body .wide .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;max-width:none;margin-left:auto;margin-right:auto}
body .chips span,body .wide .chips span{display:inline-block;text-align:center;padding:9px 18px;font-size:14.5px;font-weight:500;line-height:1.3;border-radius:999px;box-shadow:0 2px 8px rgba(109,74,232,.06)}
@media(min-width:1000px){body .in>.chips,body .in>.wide .chips{position:relative;left:50%;transform:translateX(-50%);width:min(1280px,calc(100vw - 64px))}}
@media(max-width:600px){body .chips span,body .wide .chips span{padding:8px 14px;font-size:13.5px}}

/* process steps: number circle left, title above text, no overlap; full-width grid */
body .tl2{max-width:none;gap:28px 56px}
body .ts{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto 1fr;column-gap:18px;align-items:start}
body .ts .dot{grid-row:1/3;width:44px;height:44px}
body .ts h3{grid-column:2;margin:0 0 6px;font-size:19px;line-height:1.3}
body .ts p{grid-column:2;font-size:16px;line-height:1.65}
@media(max-width:900px){body .tl2{grid-template-columns:1fr}}

/* outcomes lists: full width, 3 columns */
body .sec:has(.outc) .sh{max-width:none}
body .outc{grid-template-columns:repeat(3,1fr);max-width:none;gap:14px 40px}
body .sec:has(.outc) .note{max-width:none;text-align:center}
@media(max-width:900px){body .outc{grid-template-columns:1fr}}

/* enquiry section: wider, no side gaps */
body .wdform{max-width:none;grid-template-columns:1fr 1.1fr;gap:64px}
@media(min-width:1100px){body .wdform{position:relative;left:50%;transform:translateX(-50%);width:min(1400px,calc(100vw - 64px))}}
@media(max-width:900px){body .wdform{grid-template-columns:1fr;gap:32px}}

/* 4 cards in one row */
body .cg4{grid-template-columns:repeat(4,1fr);gap:0 20px;max-width:none;margin:0 auto}
body .cg4>.cc{display:grid;grid-template-columns:1fr;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start;padding:28px 26px;margin:0}
body .cg4>.cc>i{margin-bottom:16px}
body .cg4>.cc>h3{margin:0 0 10px}
body .cg4>.cc>p{margin:0 0 16px}
body .cg4>.cc>ul{margin:0;columns:1}
@media(min-width:1100px){body .cg4{position:relative;left:50%;transform:translateX(-50%);width:min(1400px,calc(100vw - 64px))}}
@media(max-width:1099px){body .cg4{grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px}body .cg4>.cc{display:block;grid-row:auto}}
@media(max-width:640px){body .cg4{grid-template-columns:1fr}}
@media(min-width:1100px){body .cg4.cg4-flow>.cc{display:block;grid-row:auto}body .cg4.cg4-flow{grid-template-rows:none}}

/* two-group technology cards */
body .twocol{max-width:none;gap:24px;grid-template-columns:1fr 1fr}
body .twocol>div{background:#fff;border:1px solid #E4E0F5;border-radius:18px;padding:32px 36px;box-shadow:0 1px 3px rgba(15,23,42,.06)}
body .twocol h3{margin:0 0 18px;font-size:19px}
body .twocol .chips{justify-content:flex-start;gap:12px}
body .twocol .chips span{padding:11px 22px;font-size:15.5px}
body .twocol .note{text-align:left;max-width:none;margin:20px 0 0!important}
@media(max-width:900px){body .twocol{grid-template-columns:1fr}body .twocol>div{padding:24px 22px}}

/* process step lists: horizontal pills in the text column */
body .ts ul{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:12px 0 0;padding:0}
body .ts ul li{border:1px solid #E4E0F5;background:#fff;border-radius:999px;padding:6px 14px;font-size:14px;line-height:1.3;color:#14112B}
body .cg4.cg4-flow{gap:20px}

/* 4-up cards: compact content */
body .cg4>.cc{padding:22px 22px}
body .cg4>.cc>i{width:38px;height:38px;margin-bottom:12px}
body .cg4>.cc>h3{font-size:17px;line-height:1.3;margin-bottom:8px}
body .cg4>.cc>p{font-size:14px;line-height:1.55;margin-bottom:12px}
body .cg4>.cc>ul{padding-left:18px;font-size:13.5px;line-height:1.45}
body .cg4>.cc>ul li{margin:0 0 3px;font-size:13.5px}

/* section intros: full content width */
body .sec .sh,body .sec .intro{max-width:none}
body .sec .sh p,body .sec .intro p{max-width:none}
body .sec .intro b{color:#000;font-weight:800}
@media(min-width:1100px){body .cg4{margin-left:0;margin-right:0}}

/* 3-up variant of the compact card grid */
body .cg4.cg3c{grid-template-columns:repeat(3,1fr);gap:20px}
body .cg4.cg3c>.cc{display:block;grid-row:auto}
@media(max-width:1099px){body .cg4.cg3c{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){body .cg4.cg3c{grid-template-columns:1fr}}
@media(min-width:1100px){body .cg4:not(.cg4-flow)>.cc:nth-child(-n+4):not(:nth-last-child(-n+4)){margin-bottom:20px}}

/* circular process flow (stages around an oval, arrows clockwise) */
body .flow.flow-ring{display:block;position:relative;width:100%;max-width:none;height:560px;margin:24px auto 36px;--rx:min(500px,38vw);--ry:200px;--sz:108px}
body .flow-ring::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--rx)*2);height:calc(var(--ry)*2);margin:calc(var(--ry)*-1) 0 0 calc(var(--rx)*-1);border:2px dashed #CFC8EE;border-radius:50%}
body .flow-ring>span{position:absolute;width:var(--sz);height:var(--sz);margin:calc(var(--sz)/-2) 0 0 calc(var(--sz)/-2);left:calc(50% + cos(calc(var(--i)*360deg/var(--n) - 90deg))*var(--rx));top:calc(50% + sin(calc(var(--i)*360deg/var(--n) - 90deg))*var(--ry));border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;font-size:14.5px;line-height:1.2;box-shadow:0 4px 14px rgba(109,74,232,.12)}
body .flow-ring>svg{display:none}
body .flow-ring>.ar{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;--t:calc((var(--i) + .5)*360deg/var(--n) - 90deg);left:calc(50% + cos(var(--t))*var(--rx));top:calc(50% + sin(var(--t))*var(--ry));transform:rotate(atan2(var(--ry)*cos(var(--t)),var(--rx)*sin(var(--t))*-1));background:#6D4AE8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:700px){body .flow.flow-ring{height:400px;--rx:calc(50vw - 58px);--ry:140px;--sz:76px}body .flow-ring>span{font-size:12px;padding:2px}body .flow-ring>.ar{width:16px;height:16px;margin:-8px 0 0 -8px}}
body .flow-ring>span:last-of-type{background:#6D4AE8;color:#fff}

/* reviews: horizontal side-scroll with snap */
body .client-testi-grid{display:flex!important;flex-wrap:nowrap;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:8px 4px 22px;scrollbar-width:thin;scrollbar-color:#CFC8EE transparent}
body .client-testi-grid>*{flex:0 0 min(360px,84vw);scroll-snap-align:start}
body .client-testi-grid::-webkit-scrollbar{height:8px}
body .client-testi-grid::-webkit-scrollbar-thumb{background:#CFC8EE;border-radius:8px}

/* floating call + WhatsApp buttons: bottom-left on every page */
body .floating-actions,html>.floating-actions{position:fixed;left:20px;right:auto;bottom:110px;z-index:999;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.floating-actions .action-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 24px -6px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s,background .2s}
.floating-actions .action-btn:hover{transform:scale(1.12);box-shadow:0 14px 30px -4px rgba(0,0,0,.35)}
.floating-actions .call-btn{background:#10B981}.floating-actions .call-btn:hover{background:#059669}
.floating-actions .wa-btn{background:#25D366}.floating-actions .wa-btn:hover{background:#20BA5A}
.floating-actions .action-btn svg{width:26px;height:26px}
@media(max-width:640px){.floating-actions{left:12px!important;bottom:90px!important}.floating-actions .action-btn{width:46px;height:46px}.floating-actions .action-btn svg{width:23px;height:23px}}
body .hero-content p.hero-desc b{color:#14112B;font-weight:800}
.thanks a{color:#6D4AE8;font-weight:600;white-space:nowrap}

/* Services pages: black text (pages tagged <body class="t-black">) */
body.t-black .sec p,body.t-black .sec li,body.t-black .sec .note,body.t-black .sec .oi span,
body.t-black .sec h2,body.t-black .sec h3,body.t-black .sec h4,body.t-black .sec .eyeb+*,
body.t-black .sec .chips span,body.t-black .sec label,
body.t-black .sec .ai button,body.t-black .sec .ai .ans,body.t-black .sec .ai p{color:#000}
body.t-black .sec .cta p,body.t-black .sec .cta h3,body.t-black .sec .cta .eb{color:#fff}
body.t-black .sec .chips span:hover{color:#fff}
html:has(body.t-black) #sf .ab,html:has(body.t-black) #sf .fg>div>a,html:has(body.t-black) #sf .ct,html:has(body.t-black) #sf .fb,html:has(body.t-black) #sf .fb a{color:#000}
html:has(body.t-black) #sf .btn{color:#fff}
body.t-black .sec b,body.t-black .sec strong,body.t-black .sec p.q,body.t-black .sec .fbtn:not(.on){color:#000}
body.t-black .sec b{font-weight:800}
body.t-black .sec .cta b,body.t-black .sec .cta strong{color:#fff}
/* Policy pages (same t-black tag): the content sits in .pc cards, not .sec sections */
body.t-black .pc p,body.t-black .pc li,body.t-black .pc h2,body.t-black .pc h3,body.t-black .pc h4,
body.t-black .pc b,body.t-black .pc strong,body.t-black .pc span,body.t-black .pc a:not(.btn){color:#000}
body.t-black .pc b,body.t-black .pc strong{font-weight:800}
body.t-black .ms h3,body.t-black .ms p,body.t-black .ms li,body.t-black .pc .pill,body.t-black .pc .pill *{color:#000}
body.t-black .ms h3,body.t-black .pc .ms h3{color:#000!important}
/* Breadcrumb: white only when it sits on the dark header photo (Portfolio); black on the pale page (Terms, Privacy, Refund, FAQ) */
body.t-black .crumb span{color:#000!important}
body.t-black .crumb .sep{color:#9B97B5!important}
body.t-black .phero .crumb span,body.t-black .hero .crumb span{color:#fff!important}
body.t-black .phero .crumb .sep,body.t-black .hero .crumb .sep{color:rgba(255,255,255,.5)!important}

/* banner: second button = white outline on purple */
body .cta .btn.b-g,body .cta .btn.b-g2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85);box-shadow:none}
body .cta .btn.b-g:hover,body .cta .btn.b-g2:hover{background:#fff;color:#5B3DD1;border-color:#fff}

/* Remaining pages (Careers, FAQ, Portfolio, Contact, Gallery, Reviews, Client Area): black text.
   Dark/colored areas (headers, banners, stats band, footer button) are excluded. */
body.t-black :is(p,h1,h2,h3,h4,label,small,b,strong,figcaption):not(.phero *,.hero *,.cta *,.stats *,.sx *,#sn *,#sf *,.qe-overlay *,.eyeb,.eb,.go,.go *){color:#000}
body.t-black :is(.fa span,.prog-label span,.role span.y,.mtr span,.mbar span,.btns a,.mt span){color:#000}

/* Section labels: 13px everywhere (were 11px) */
body .eyeb,body .phero small,body .hero small,body .eb,body .sh .eyeb{font-size:13px}
/* Labels that page styles kept at 10-12px: bring them to 13px too */
body .cta .eb,body .sec .cta .eb{font-size:13px}
body .mh,body .eye,body .marq .mh{font-size:13px}
body .rows small,body .row small,body .card .rows small,body .cc.chal b{font-size:13px}
body #apm .eye,body .sec .eye,body .eye{font-size:13px}
body .office .oi small,body .oi small{font-size:13px}

/* Same hero (page header) height on every inner page, desktop only; phones keep content-driven height */
@media (min-width:901px){
body .phero,body .hero{box-sizing:border-box;height:540px!important;min-height:540px!important;max-height:540px;padding-top:96px!important;padding-bottom:40px!important;display:flex!important;align-items:center!important;overflow:hidden}
body .phero>.w,body .hero>.w,body .phero>.in,body .hero>.in{width:100%}
}