@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('/assets/css/public-shell.css?v=15.0.0');

/* V11 keeps the V9 website and applies the preferred kinetic style only to banners. */
:root{
  --banner-night:#0d0716;
  --banner-blue:#225eff;
  --banner-cyan:#43dcff;
  --banner-violet:#a75fff;
  --banner-peach:#ffae83;
}

/* The contact strip matches the banner; the navigation remains the V9 white bar. */
.contact-band,
.legal-contact{background:var(--banner-night)!important}
.contact-band p{color:#c8bfd2!important}
.site-header,
.site-header.scrolled{background:#fff!important;color:#0b1a38!important}

/* Home-page kinetic banner. */
.hero{
  min-height:930px;
  height:auto;
  max-height:none;
  padding-top:206px;
  padding-bottom:104px;
  grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr);
  gap:3vw;
  background:
    radial-gradient(circle at 86% 16%,rgba(167,95,255,.20),transparent 32%),
    radial-gradient(circle at 58% 78%,rgba(34,94,255,.17),transparent 28%),
    var(--banner-night);
}
.hero:before{
  inset:128px 0 0;
  background-image:radial-gradient(circle,rgba(255,255,255,.62) 1.35px,transparent 1.55px);
  background-size:92px 92px;
  opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,#000 0 72%,transparent 98%);
  mask-image:linear-gradient(90deg,#000 0 72%,transparent 98%);
}
.hero:after{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  right:-260px;
  bottom:-280px;
  border-radius:50%;
  background:rgba(67,220,255,.13);
  filter:blur(100px);
}
.hero-copy{min-height:570px;justify-content:center}
.hero-slide-copy{animation:bannerTextIn .72s cubic-bezier(.2,.75,.2,1) both}
.hero-slide-copy h1,
.hero-slide-copy .hero-slide-heading,
.hero h1{
  max-width:900px;
  margin:0 0 32px;
  font-family:"Space Grotesk",Manrope,system-ui,sans-serif;
  font-size:clamp(62px,7.3vw,112px);
  font-weight:500;
  line-height:.91;
  letter-spacing:-6.5px;
  text-wrap:balance;
}
.hero .eyebrow{color:var(--banner-cyan);letter-spacing:2.2px}
.hero-slide-copy p{max-width:620px!important;margin-bottom:34px!important;color:#bcb3c9!important;font-size:17px!important;line-height:1.75!important}
.hero-actions{gap:13px;flex-wrap:wrap}
.wa-hero,
.wa-outline{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 20px;border:1px solid rgba(255,255,255,.34);border-radius:999px;font-size:12px;font-weight:800;transition:.25s}
.wa-hero:hover,
.wa-outline:hover{background:#fff;color:var(--banner-night);border-color:#fff}
.hero-dots{gap:8px;margin-top:30px}
.hero-dots button{width:8px;height:8px;background:rgba(255,255,255,.25);transition:.3s}
.hero-dots button.active{width:42px;background:linear-gradient(90deg,var(--banner-peach),var(--banner-violet))}

.hero-visual{height:640px;isolation:isolate;perspective:1100px}
.flow-ribbon{position:absolute;inset:-70px -30px -50px 0;z-index:0;overflow:hidden;pointer-events:none;filter:drop-shadow(0 35px 55px rgba(0,0,0,.28))}
.flow-ribbon:before{
  content:"";
  position:absolute;
  width:350px;
  height:520px;
  right:25px;
  top:100px;
  border:66px solid transparent;
  border-radius:50%;
  background:linear-gradient(155deg,var(--banner-peach),#e984a2 35%,var(--banner-violet) 66%,#5c7dff) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transform:rotate(-24deg);
  animation:bannerFloat 7s ease-in-out infinite;
}
.flow-ribbon:after{
  content:"";
  position:absolute;
  width:74px;
  height:560px;
  right:284px;
  top:-94px;
  border-radius:999px;
  background:linear-gradient(180deg,#f7b68d,var(--banner-peach) 40%,var(--banner-violet));
  transform:rotate(-24deg);
  animation:bannerFloat 7s ease-in-out infinite;
}
.flow-spark{position:absolute;width:12px;height:12px;right:105px;top:94px;border-radius:50%;background:#fff;box-shadow:0 0 0 10px rgba(255,255,255,.08),0 0 35px var(--banner-cyan);animation:bannerPulse 2.4s ease-in-out infinite}
.hero-glow{background:linear-gradient(135deg,var(--banner-violet),var(--banner-blue));filter:blur(150px);opacity:.22}
.orbit{border-color:rgba(255,255,255,.10)}
.hero .metric{background:linear-gradient(145deg,rgba(42,32,54,.88),rgba(21,16,32,.82));border-color:rgba(255,255,255,.13);box-shadow:0 35px 90px rgba(0,0,0,.38)}
.hero .main-metric{width:385px;height:345px;border-radius:32px;transform:translate(-50%,-50%) rotate(-4deg)}
.hero .metric-value{font-family:"Space Grotesk",Manrope,sans-serif;font-weight:600}
.hero .chart i{background:linear-gradient(var(--banner-peach),var(--banner-violet) 55%,var(--banner-blue));animation:bannerBars 3.6s ease-in-out infinite alternate}
.hero .float-card{border-radius:22px;animation:bannerCardFloat 5.4s ease-in-out infinite}
.hero .float-card.bottom{animation-delay:-2.2s}
.hero-managed-images{inset:42px 5px;z-index:6}
.hero-managed-images img{border-radius:32px;object-fit:cover;border:1px solid rgba(255,255,255,.14)}
.hero-managed-images:has(img.active)~.flow-ribbon{opacity:.18}

/* Matching banner treatment on service, blog, SEO-audit and policy pages. */
.service-hero,
.audit-hero,
.blog-hero,
.legal-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,rgba(167,95,255,.22),transparent 35%),
    radial-gradient(circle at 24% 70%,rgba(34,94,255,.17),transparent 30%),
    var(--banner-night)!important;
}
.service-hero:before,
.audit-hero:before,
.blog-hero:before,
.legal-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.58) 1.2px,transparent 1.4px);background-size:86px 86px;opacity:.25;pointer-events:none}
.service-hero>*,
.audit-hero>*,
.blog-hero>*,
.legal-hero>*{position:relative;z-index:1}
.service-hero h1,
.audit-hero h1,
.blog-hero h1,
.legal-hero h1{font-family:"Space Grotesk",Manrope,system-ui,sans-serif;font-weight:500;line-height:.94;letter-spacing:-5px}
.service-symbol{border-color:rgba(255,255,255,.12);background:radial-gradient(circle,rgba(167,95,255,.12),transparent 65%)}
.service-symbol:before{
  content:"";
  position:absolute;
  width:62%;
  height:62%;
  border:52px solid transparent;
  border-radius:50%;
  background:linear-gradient(145deg,var(--banner-peach),var(--banner-violet),var(--banner-blue)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transform:rotate(-20deg);
  animation:bannerFloat 7s ease-in-out infinite;
}
.service-symbol span{z-index:2}

@keyframes bannerTextIn{from{opacity:0;transform:translateY(30px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes bannerFloat{0%,100%{transform:rotate(-24deg) translateY(0)}50%{transform:rotate(-22deg) translateY(-18px)}}
@keyframes bannerPulse{0%,100%{transform:scale(.85);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@keyframes bannerCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes bannerBars{to{filter:brightness(1.22);transform:scaleY(.94);transform-origin:bottom}}

@media(max-width:1240px){.hero-slide-copy h1,.hero-slide-copy .hero-slide-heading,.hero h1{font-size:clamp(60px,7vw,91px)}}
@media(max-width:1050px){
  .hero{grid-template-columns:1fr;padding-top:196px}
  .hero-copy{max-width:900px;min-height:auto}
  .hero-visual{width:100%;max-width:720px;height:580px;margin:45px auto 0}
}
@media(max-width:760px){
  .hero{min-height:auto;padding:178px 22px 78px}
  .hero:before{inset:124px 0 0;background-size:58px 58px;opacity:.28}
  .hero-slide-copy h1,.hero-slide-copy .hero-slide-heading,.hero h1{font-size:clamp(50px,14.7vw,68px);line-height:.93;letter-spacing:-3.7px}
  .hero-slide-copy p{font-size:15px!important}
  .hero-actions{align-items:stretch;flex-direction:column;max-width:330px}
  .hero-actions .button,.wa-hero{width:100%}
  .hero-visual{height:480px;margin-top:35px}
  .flow-ribbon{inset:-30px -90px -20px -40px;transform:scale(.83)}
  .hero .main-metric{width:300px;height:290px;padding:23px}
  .hero .metric-value{margin-top:32px;font-size:42px}
  .hero .float-card.top{right:-4px;top:20px}
  .hero .float-card.bottom{left:-4px;bottom:18px}
  .service-hero h1,.audit-hero h1,.blog-hero h1,.legal-hero h1{letter-spacing:-3px}
}
@media(max-width:520px){.hero-visual{height:440px}.flow-ribbon{right:-145px;transform:scale(.73)}}
@media(prefers-reduced-motion:reduce){.flow-ribbon:before,.flow-ribbon:after,.flow-spark,.hero .float-card,.hero .chart i,.service-symbol:before{animation:none!important}}

/* Selected Work: eye-catching, but restrained and businesslike. */
#work{background:linear-gradient(180deg,#07132c 0%,#0a1730 100%)}
#work .project{
  background:linear-gradient(155deg,#102447,#0a1934 72%);
  border:1px solid rgba(141,177,232,.18);
  box-shadow:0 18px 46px rgba(1,8,23,.22);
  transition:transform .28s,border-color .28s,box-shadow .28s;
}
#work .project:hover{transform:translateY(-6px);border-color:rgba(105,171,255,.42);box-shadow:0 26px 60px rgba(1,8,23,.34)}
#work .project-art{background-color:#132542}
#work .project-art{height:172px!important;padding:17px!important}
#work .art-1{background:radial-gradient(circle at 22% 18%,rgba(69,142,221,.55),transparent 42%),linear-gradient(145deg,#18365d,#0e213d)}
#work .art-2{background:radial-gradient(circle at 78% 20%,rgba(51,166,176,.42),transparent 42%),linear-gradient(145deg,#17384a,#0d2638)}
#work .art-3{background:radial-gradient(circle at 24% 82%,rgba(111,91,183,.46),transparent 44%),linear-gradient(145deg,#2b3157,#151e3b)}
#work .project-logo-frame{box-sizing:border-box;width:100%;height:116px;min-width:0;min-height:0;padding:10px 14px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.72);border-radius:14px;box-shadow:0 16px 38px rgba(0,0,0,.22);line-height:0}
#work .project-logo-frame img{display:block!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;flex:none}
#work .project-pattern{position:absolute;inset:18%;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.035),0 0 0 58px rgba(255,255,255,.02)}
#work .project-pattern i{position:absolute;width:9px;height:9px;border-radius:50%;background:#74daf4;box-shadow:0 0 18px rgba(116,218,244,.65)}
#work .project-pattern i:nth-child(1){left:9%;top:26%}#work .project-pattern i:nth-child(2){right:8%;top:46%;background:#a990ed}#work .project-pattern i:nth-child(3){left:47%;bottom:5%;background:#67ddb5}
#work .project-meta>span{color:#8fa8cc}
#work .project-meta p{color:#9bacbf}
#work .project-meta strong{color:#72d8f6}
@media(max-width:650px){#work .project-art{height:150px!important;padding:14px!important}#work .project-logo-frame{height:102px;padding:9px 12px}}