/* Final homepage balance: keep all supporting cards neutral and legible. */
.starting-grid article{background:#fafafa!important;color:#111!important}
.starting-grid article h3{color:#111!important}.starting-grid article p{color:#666!important}.starting-grid article a{color:#111!important}.starting-grid article .starting-number{color:#6d68e7!important}
.service-list details,.faq-list details{background:#fff!important;color:#111!important}.service-list details summary,.service-list details h3,.faq-list details summary{color:#111!important}.service-list details p,.faq-list details p{color:#666!important}
.service-list details[open],.faq-list details[open]{background:#fafafa!important}
.work-card{background:#fff!important;color:#111!important}.work-card .work-caption h3,.work-card .work-url{color:#111!important}.work-card .work-caption>span,.work-card>p{color:#666!important}
.package-card:not(.package-coming-soon){background:#fff!important;color:#111!important}.package-card h2,.package-card li{color:#111!important}.package-card .package-label,.package-card .package-intro,.package-card .package-cost-note,.package-card .package-price>span{color:#666!important}

/* The product visual sits directly in the hero rather than on a separate violet panel. */
.product-build{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.build-desktop{border:6px solid #111113!important;border-radius:22px!important;background:#fff!important;box-shadow:12px 16px 0 rgb(0 0 0 / .2)!important}
@media(max-width:650px){.build-desktop{border-width:4px!important;border-radius:15px!important;box-shadow:8px 10px 0 rgb(0 0 0 / .2)!important}}

/* Replace the orbit with a compact build-status signal inside the product-system board. */
.pulse-node-main::before{
  content:'IN PROGRESS'!important;
  inset:20px 18px auto auto!important;
  width:auto!important;
  height:28px!important;
  padding:0 11px!important;
  display:flex!important;
  align-items:center!important;
  border:1px solid rgb(255 255 255 / .3)!important;
  border-radius:999px!important;
  color:rgb(255 255 255 / .9)!important;
  background:linear-gradient(90deg,rgb(255 255 255 / .12),rgb(255 255 255 / .04))!important;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .04)!important;
  font-size:.55rem!important;
  font-style:normal!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  animation:pulse-status-sweep 3.6s ease-in-out infinite!important;
}
.pulse-node-main::after{
  content:'';
  position:absolute;
  left:-72px;
  top:57px;
  width:72px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / .3),#fff,rgb(255 255 255 / .3),transparent);
  will-change:transform;
  animation:pulse-status-meter 2.7s linear infinite;
}
@keyframes pulse-status-sweep{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(-8px);opacity:1}}
@keyframes pulse-status-meter{to{transform:translate3d(390px,0,0)}}
@media(prefers-reduced-motion:reduce){.pulse-node-main::before,.pulse-node-main::after{animation:none!important}}

/* Give the two content-heavy home sections their own calm surfaces. */
.services,.selected-work{
  position:relative;
  overflow:hidden;
  margin-top:38px!important;
  margin-bottom:38px!important;
  padding:72px 64px!important;
  border:1px solid #e4e4e6;
  border-radius:30px;
  background:#15151a!important;
  color:#fff;
  box-shadow:0 22px 56px rgb(17 17 19 / .13);
}
.services::before,.selected-work::before{
  content:''!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  background-size:150% 150%!important;
  animation:section-aurora 16s ease-in-out infinite!important;
}
.services::before{
  background:
    radial-gradient(circle at 87% 22%,rgb(124 117 255 / .78),transparent 34%),
    radial-gradient(circle at 15% 100%,rgb(226 90 133 / .5),transparent 40%),
    linear-gradient(125deg,#141419 0%,#1c1b30 56%,#242148 100%)!important;
}
.selected-work::before{
  background:
    radial-gradient(circle at 86% 16%,rgb(115 210 173 / .48),transparent 30%),
    radial-gradient(circle at 9% 78%,rgb(109 104 231 / .58),transparent 36%),
    linear-gradient(125deg,#101315 0%,#15182a 56%,#23204b 100%)!important;
}
.services::after,.selected-work::after{
  content:'';
  position:absolute;
  z-index:0;
  left:64px;
  right:64px;
  top:0;
  height:2px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,#e25a85,#6d68e7,#73d2ad,#6d68e7,#e25a85);
  background-size:220% 100%;
  opacity:.7;
  animation:section-signal 9s linear infinite;
}
.services .section-heading,.services .pricing-teaser,.services .services-layout,
.selected-work .section-heading,.selected-work .owned-work-intro,.selected-work .work-grid,.selected-work .work-section-action{position:relative;z-index:1}
.services .section-heading h2,.selected-work .section-heading h2{color:#fff!important}
.services .section-heading .eyebrow,.selected-work .section-heading .eyebrow{color:#d3d1ff!important}
.services .pricing-teaser,.selected-work .owned-work-intro{color:#d3d2da!important}
.services .pricing-teaser a{color:#fff!important;border-color:rgb(255 255 255 / .7)!important}
.services .section-heading{margin-bottom:18px}.services .pricing-teaser{margin-bottom:42px}
.selected-work .section-heading{margin-bottom:20px}.selected-work .owned-work-intro{margin-bottom:44px}
@keyframes section-signal{to{background-position:220% 0}}
@keyframes section-aurora{0%,100%{background-position:0% 0%}50%{background-position:100% 65%}}
@media(max-width:900px){.services,.selected-work{padding:58px 38px!important;border-radius:26px}.services::after,.selected-work::after{left:38px;right:38px}}
@media(max-width:650px){.services,.selected-work{width:calc(100% - 24px);padding:46px 22px!important;margin-top:24px!important;margin-bottom:24px!important;border-radius:22px}.services::after,.selected-work::after{left:22px;right:22px}.services .pricing-teaser,.selected-work .owned-work-intro{margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){.services::after,.selected-work::after{animation:none!important}}

/* Keep linked sections clear of the fixed navigation. */
#services,#work,#approach,#contact{scroll-margin-top:132px}

/* The work section returns to a simple white pause before the dark approach section. */
.selected-work{
  overflow:visible;
  margin-top:0!important;
  margin-bottom:0!important;
  padding:110px 0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  box-shadow:none!important;
}
.selected-work::before,.selected-work::after{display:none!important}
.selected-work .section-heading h2{color:#111!important}
.selected-work .section-heading .eyebrow{color:#555!important}
.selected-work .owned-work-intro{color:#666!important}
@media(max-width:650px){.selected-work{width:100%;padding:76px 22px!important}}

/* Let the service rows belong to the dark services panel instead of reading as white blocks. */
.services .service-list details{
  background:rgb(255 255 255 / .075)!important;
  border-color:rgb(255 255 255 / .15)!important;
  box-shadow:none!important;
}
.services .service-list details:hover,.services .service-list details[open]{
  background:rgb(255 255 255 / .13)!important;
  border-color:rgb(255 255 255 / .28)!important;
  box-shadow:0 12px 30px rgb(0 0 0 / .16)!important;
}
.services .service-list details summary{background:transparent!important;color:#fff!important}
.services .service-list details h3,.services .service-list .number,.services .service-list .toggle{color:#fff!important}
.services .service-list .service-content,.services .service-list details p,.services .service-list details h4,.services .service-list details li{color:#d9d8e0!important}
.services .service-list .service-fit strong{color:#fff!important}
.services .service-list .tags span{background:rgb(255 255 255 / .08)!important;border-color:rgb(255 255 255 / .16)!important;color:#f1f0f5!important}

/* Keep the original service-column position, with more breathing room in each row. */
.services .services-layout{width:100%!important}
.services .service-list{width:100%!important;max-width:970px!important;margin-left:auto!important}
.services .service-list summary{padding-inline:30px!important}
.services .service-list details[open] summary{padding-inline:30px!important}
.services .service-list .service-content{padding-right:54px!important;padding-left:74px!important}
.services .service-list details{
  background:
    linear-gradient(105deg,rgb(255 255 255 / .09),rgb(255 255 255 / .02)),
    linear-gradient(112deg,#24232c 0%,#302d53 53%,#5d55ba 100%)!important;
}
.services .service-list details:hover,.services .service-list details[open]{
  background:
    linear-gradient(105deg,rgb(255 255 255 / .13),rgb(255 255 255 / .04)),
    linear-gradient(112deg,#2a2935 0%,#3d3971 52%,#7468e7 100%)!important;
}
@media(max-width:650px){.services .service-list summary,.services .service-list details[open] summary{padding-inline:18px!important}.services .service-list .service-content{padding-right:24px!important;padding-left:46px!important}}

/* Keep expanded services as one tidy surface. */
.services .service-list details,.services .service-list details:last-child{
  margin-bottom:8px!important;
  border:1px solid rgb(255 255 255 / .14)!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
.services .service-list details summary{border:0!important;box-shadow:none!important}
.services .service-list details[open] summary{border-bottom:1px solid rgb(255 255 255 / .18)!important;box-shadow:none!important}
.services .service-list .service-content{
  max-width:none!important;
  background:rgb(9 9 13 / .16)!important;
  padding-top:28px!important;
  padding-bottom:32px!important;
}
.services .service-list details{
  background:linear-gradient(110deg,#1f2027 0%,#29283c 58%,#403b76 100%)!important;
}
.services .service-list details:hover,.services .service-list details[open]{
  background:linear-gradient(110deg,#242530 0%,#302e49 56%,#504994 100%)!important;
}

/* Bring the contact card into the same darker product-card family. */
.contact{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 88% 12%,rgb(109 104 231 / .55),transparent 34%),
    radial-gradient(circle at 9% 100%,rgb(226 90 133 / .28),transparent 38%),
    linear-gradient(118deg,#15151a 0%,#1c1b2d 56%,#2b2755 100%)!important;
  border:1px solid rgb(255 255 255 / .12)!important;
  border-radius:30px!important;
  box-shadow:0 22px 56px rgb(17 17 19 / .16)!important;
  color:#fff!important;
}
.contact .eyebrow{color:#d2d0ff!important}.contact h2{color:#fff!important}.contact p{color:#d4d2dc!important}.contact .email-link{background:#fff!important;color:#111!important;border:0!important}
.contact::before,.contact::after{display:none!important}
@media(max-width:650px){.contact{border-radius:22px!important}}

/* Make the three starting-point cards read as deliberate panels. */
.starting-grid article{
  border:2px solid rgb(17 17 19 / .2)!important;
  box-shadow:0 12px 28px rgb(17 17 19 / .06)!important;
}
.starting-grid article:hover{border-color:rgb(17 17 19 / .38)!important;box-shadow:0 18px 36px rgb(17 17 19 / .11)!important}
.starting-grid article+article{border-left-width:0!important}
@media(max-width:650px){.starting-grid article+article{border-left-width:2px!important}}

/* Performance pass: keep the product build and ticker, remove large paint-heavy background loops. */
.hero,.hero::before,.hero::after,.services::before,.services::after,
.starting-points::before,.starting-points::after,.approach::before,.approach::after,
.product-pulse::before{animation:none!important;filter:none!important}
.services::after{animation:section-signal 14s linear infinite!important;will-change:background-position}