/* Service "What We Do" diagram rebuilt in HTML so the orbs follow the Clutch palette
   and drift slowly. Box keeps the original image ratio (1540 x 847). */
.clutch-service-diagram { position: relative; aspect-ratio: 1540 / 847; container-type: inline-size; overflow: visible; isolation: isolate; }
.clutch-service-diagram p { margin: 0; }
.csd-orb { position: absolute; border-radius: 50%; filter: blur(1.6cqw); will-change: transform; }
.csd-orb-left  { left: -1.5%; top: 0.5%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle at 72% 22%, #9ddfdc 0%, #54b2c4 38%, #35699d 78%, #2c4f85 100%); }
.csd-orb-right { left: 57%; top: 23%; width: 43%; aspect-ratio: 1;
  background: radial-gradient(circle at 28% 78%, #146f86 0%, #3a9bb0 40%, #9ddfdc 85%, #c9eeee 100%); }
.csd-core { position: absolute; left: 36.1%; top: 22.2%; width: 28.6%; aspect-ratio: 1; border-radius: 50%; background: #16171d; }
.csd-group { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; font-family: var(--font-family-base); }
.csd-left  { left: 25.2%; top: 28%; transform: translateX(-50%); width: 22%; color: #fff; gap: 1.2cqw; }
.csd-right { left: 74.8%; top: 48.5%; transform: translateX(-50%); width: 22%; color: #16171d; gap: 1.2cqw; }
.csd-center { left: 50.4%; top: 38.5%; transform: translateX(-50%); width: 20%; color: #fff; gap: 1.6cqw; }
.csd-title { font-size: 3.6cqw; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.csd-right .csd-title { font-size: 3.75cqw; }
.csd-sub, .csd-body { font-size: 1.5cqw; font-weight: 500; letter-spacing: .08em; line-height: 1.55; }
.csd-body { font-size: 1.7cqw; }
.csd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55cqw .7cqw; font-size: 1.3cqw; font-weight: 500; letter-spacing: .06em; }
.csd-chips span:not(.csd-break) { display: inline-block; padding: .35cqw .8cqw; line-height: 1.5; color: #fff; background: #16171d; }
.csd-right .csd-chips span:not(.csd-break) { background: var(--color-primary); }
.csd-break { flex-basis: 100%; height: 0; }
.csd-wordmark { height: 2.75cqw; gap: .85cqw; display: flex; align-items: center; }
.csd-wordmark::before, .csd-wordmark::after { background: #fff; }
.csd-wordmark::before { width: 13.0769cqw; }
.csd-wordmark::after { width: 3.4012cqw; }
:root[data-theme=dark] .csd-core { background: #0f1015; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
:root[data-theme=dark] .clutch-service-diagram { opacity: .9; }
/* Motion: only the two gradient orbs drift; text and the core stay still. */
.csd-orb-left  { animation: csd-drift-left 18s ease-in-out -4s infinite; }
.csd-orb-right { animation: csd-drift-right 22s ease-in-out -11s infinite; }
@keyframes csd-drift-left  { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(1.6cqw, -1.4cqw, 0) scale(1.05); } }
@keyframes csd-drift-right { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-1.8cqw, 1.2cqw, 0) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .csd-orb { animation: none; } }