{"id":3002,"date":"2026-06-20T22:37:58","date_gmt":"2026-06-20T22:37:58","guid":{"rendered":"https:\/\/localhost\/digi\/?page_id=3002"},"modified":"2026-06-20T23:07:22","modified_gmt":"2026-06-20T23:07:22","slug":"what-we-do-2","status":"publish","type":"page","link":"https:\/\/digi.alphanzo.com\/?page_id=3002","title":{"rendered":"What we do"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3002\" class=\"elementor elementor-3002\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b0f1c9 e-con-full e-flex e-con e-parent\" data-id=\"5b0f1c9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0188085 elementor-widget elementor-widget-html\" data-id=\"0188085\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n   DT Solutions &mdash; \"What We Do\" page fragment (WordPress-safe)\n   Drop into a Custom HTML block \/ page template. Self-contained:\n   all CSS is scoped under #dts-page so it cannot leak into or be\n   overridden by your theme. Requires the assets\/ folder (Lottie\n   JSON files) to sit alongside wherever this fragment is served\n   from &mdash; paste your Media Library URLs into DTS_ANIMATIONS near\n   the bottom <script> tag (see the setup steps just above it).\n============================================================ -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/lottie-web\/5.12.2\/lottie.min.js\"><\/script>\n<style>\n#dts-page {\n  \/* ---- color tokens ---- *\/\n  --ink: #02040c;\n  --ink-1: #060b1e;\n  --ink-2: #0a1230;\n  --ink-3: #0e1a42;\n  --azure: #2563ff;\n  --azure-bright: #4d7fff;\n  --cyan: #22d3ee;\n  --violet: #8b5cf6;\n  --amber: #f5a524;\n  --paper: #f7f8fb;\n\n  --white: #ffffff;\n  --text-1: rgba(247,248,251,0.92);\n  --text-2: rgba(247,248,251,0.62);\n  --text-3: rgba(247,248,251,0.40);\n\n  --line: rgba(247,248,251,0.09);\n  --line-soft: rgba(247,248,251,0.055);\n  --panel: rgba(247,248,251,0.035);\n  --panel-hover: rgba(247,248,251,0.06);\n\n  --glow-azure: 0 0 1px rgba(37,99,255,0);\n  --ease: cubic-bezier(0.16,1,0.3,1);\n\n  --font-display: 'Space Grotesk', sans-serif;\n  --font-body: 'Inter', sans-serif;\n  --font-mono: 'IBM Plex Mono', monospace;\n}\n\n#dts-page *, #dts-page *::before, #dts-page *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n#dts-page { }\n\n@media (prefers-reduced-motion: reduce) {\n#dts-page *, #dts-page *::before, #dts-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }\n}\n\n#dts-page {\n  background: var(--ink);\n  color: var(--text-1);\n  font-family: var(--font-body);\n  overflow-x: hidden;\n  -webkit-font-smoothing: antialiased;\n  font-size: 16px;\n  line-height: 1.5;\n  position: relative;\n}\n\n#dts-page ::selection { background: rgba(37,99,255,0.35); color: #fff; }\n\n#dts-page a { color: inherit; }\n\n#dts-page button { font-family: inherit; }\n#dts-page button:focus-visible, #dts-page a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }\n\n\/* ============================================================\n   SIGNATURE: SIGNAL LINE &mdash; animated trace running the page edge\n============================================================ *\/\n#dts-page .signal-rail {\n  position: absolute;\n  left: 0; top: 0;\n  width: 3px;\n  height: 100%;\n  z-index: 40;\n  pointer-events: none;\n  background: var(--line-soft);\n}\n#dts-page .signal-rail::before {\n  content: '';\n  position: absolute;\n  left: -3px; top: -45%;\n  width: 9px;\n  height: 45%;\n  background: linear-gradient(180deg, transparent, var(--cyan) 40%, var(--azure-bright) 65%, var(--violet) 85%, transparent);\n  filter: drop-shadow(0 0 14px rgba(34,211,238,1)) drop-shadow(0 0 30px rgba(77,127,255,0.7));\n  animation: signal-travel 5.5s ease-in-out infinite;\n}\n@keyframes signal-travel {\n  0% { top: -45%; }\n  55% { top: 100%; }\n  100% { top: 100%; }\n}\n@media (max-width: 880px) { #dts-page .signal-rail { display: none; } }\n\n\/* ============================================================\n   AMBIENT FIELD CANVAS\n============================================================ *\/\n#dts-page #dts-field-canvas {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  opacity: 0.55;\n}\n\n\/* ============================================================\n   SHARED\n============================================================ *\/\n#dts-page .section { position: relative; z-index: 1; padding: 132px 0; overflow: hidden; }\n#dts-page .container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }\n@media (max-width: 560px) {\n  #dts-page .section { padding: 84px 0; }\n  #dts-page .container { padding: 0 22px; }\n}\n\n#dts-page .eyebrow {\n  font-family: var(--font-mono);\n  font-size: 11.5px;\n  font-weight: 500;\n  letter-spacing: 0.08em;\n  color: var(--cyan);\n  margin-bottom: 22px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n#dts-page .eyebrow::before {\n  content: '';\n  width: 6px; height: 6px;\n  border-radius: 50%;\n  background: var(--cyan);\n  box-shadow: 0 0 10px var(--cyan);\n  flex-shrink: 0;\n}\n\n#dts-page h1, #dts-page h2, #dts-page h3, #dts-page h4 { font-family: var(--font-display); }\n\n#dts-page .reveal {\n  opacity: 0;\n  transform: translateY(28px);\n  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);\n}\n#dts-page .reveal.visible { opacity: 1; transform: none; }\n#dts-page .reveal-delay-1 { transition-delay: 0.08s; }\n#dts-page .reveal-delay-2 { transition-delay: 0.16s; }\n#dts-page .reveal-delay-3 { transition-delay: 0.24s; }\n#dts-page .reveal-delay-4 { transition-delay: 0.32s; }\n#dts-page .reveal-delay-5 { transition-delay: 0.40s; }\n#dts-page .reveal-delay-6 { transition-delay: 0.48s; }\n\n#dts-page .section-divider {\n  width: 100%; height: 1px;\n  background: linear-gradient(90deg, transparent, var(--line), transparent);\n}\n\n\/* ============================================================\n   HERO\n============================================================ *\/\n#dts-page #hero {\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0;\n  perspective: 1800px;\n}\n#dts-page .hero-bg {\n  position: absolute;\n  inset: -10% -10%;\n  background:\n    radial-gradient(ellipse 75% 60% at 68% 35%, rgba(37,99,255,0.28) 0%, transparent 68%),\n    radial-gradient(ellipse 50% 45% at 85% 70%, rgba(139,92,246,0.20) 0%, transparent 62%),\n    radial-gradient(ellipse 60% 50% at 12% 75%, rgba(34,211,238,0.14) 0%, transparent 62%),\n    radial-gradient(ellipse 40% 35% at 50% 10%, rgba(77,127,255,0.16) 0%, transparent 60%);\n}\n#dts-page .hero-bg::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(247,248,251,0.025) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(247,248,251,0.025) 1px, transparent 1px);\n  background-size: 64px 64px;\n  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 60% 35%, black 0%, transparent 75%);\n  mask-image: radial-gradient(ellipse 60% 50% at 60% 35%, black 0%, transparent 75%);\n}\n\n\/* ---- Smoke layer: huge slow-drifting blurred color clouds ---- *\/\n#dts-page .hero-smoke {\n  position: absolute;\n  inset: -20%;\n  z-index: 0;\n  pointer-events: none;\n  overflow: hidden;\n  filter: blur(70px);\n  opacity: 0.4;\n}\n#dts-page .smoke-blob {\n  position: absolute;\n  border-radius: 50%;\n  will-change: transform;\n}\n#dts-page .smoke-1 {\n  width: 56vw; height: 56vw;\n  top: -10%; left: 5%;\n  background: radial-gradient(circle, rgba(37,99,255,0.55) 0%, transparent 70%);\n  animation: smoke-drift-1 26s ease-in-out infinite;\n}\n#dts-page .smoke-2 {\n  width: 46vw; height: 46vw;\n  top: 30%; right: -5%;\n  background: radial-gradient(circle, rgba(139,92,246,0.5) 0%, transparent 70%);\n  animation: smoke-drift-2 32s ease-in-out infinite;\n}\n#dts-page .smoke-3 {\n  width: 40vw; height: 40vw;\n  bottom: -15%; left: 20%;\n  background: radial-gradient(circle, rgba(34,211,238,0.45) 0%, transparent 70%);\n  animation: smoke-drift-3 22s ease-in-out infinite;\n}\n@keyframes smoke-drift-1 {\n  0%, 100% { transform: translate(0, 0) scale(1); }\n  33% { transform: translate(5%, 8%) scale(1.12); }\n  66% { transform: translate(-4%, -5%) scale(0.94); }\n}\n@keyframes smoke-drift-2 {\n  0%, 100% { transform: translate(0, 0) scale(1); }\n  50% { transform: translate(-8%, 6%) scale(1.15); }\n}\n@keyframes smoke-drift-3 {\n  0%, 100% { transform: translate(0, 0) scale(1); }\n  40% { transform: translate(6%, -7%) scale(1.1); }\n  75% { transform: translate(-5%, 4%) scale(0.92); }\n}\n@media (prefers-reduced-motion: reduce) {\n  #dts-page .smoke-blob { animation: none !important; }\n}\n\n\/* ---- Floating 3D geometric elements ---- *\/\n#dts-page .hero-floaters {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n  perspective: 1000px;\n}\n#dts-page .floater {\n  position: absolute;\n  will-change: transform;\n}\n#dts-page .floater-ring {\n  width: 110px; height: 110px;\n  border: 2px solid rgba(34,211,238,0.3);\n  border-radius: 50%;\n  top: 6%; left: 2%;\n  box-shadow: 0 0 40px rgba(34,211,238,0.2), inset 0 0 30px rgba(34,211,238,0.08);\n  animation: float-spin-1 14s ease-in-out infinite;\n}\n#dts-page .floater-ring::after {\n  content: '';\n  position: absolute;\n  inset: 16px;\n  border: 1px solid rgba(139,92,246,0.25);\n  border-radius: 50%;\n}\n#dts-page .floater-cube {\n  width: 56px; height: 56px;\n  bottom: 4%; left: 1%;\n  background: linear-gradient(135deg, rgba(77,127,255,0.22), rgba(139,92,246,0.12));\n  border: 1px solid rgba(77,127,255,0.35);\n  border-radius: 14px;\n  box-shadow: 0 20px 40px -10px rgba(37,99,255,0.35);\n  animation: float-spin-2 11s ease-in-out infinite;\n}\n#dts-page .floater-dot-cluster {\n  top: 4%; right: 4%;\n  width: 70px; height: 70px;\n  animation: float-spin-3 16s ease-in-out infinite;\n}\n#dts-page .floater-dot-cluster span {\n  position: absolute;\n  width: 5px; height: 5px;\n  border-radius: 50%;\n  background: var(--cyan);\n  box-shadow: 0 0 10px var(--cyan);\n}\n#dts-page .floater-dot-cluster span:nth-child(1) { top: 0; left: 30%; }\n#dts-page .floater-dot-cluster span:nth-child(2) { top: 40%; left: 0; }\n#dts-page .floater-dot-cluster span:nth-child(3) { top: 60%; left: 70%; }\n#dts-page .floater-dot-cluster span:nth-child(4) { top: 90%; left: 35%; }\n@keyframes float-spin-1 {\n  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }\n  50% { transform: translate3d(14px,-22px,40px) rotate(180deg); }\n}\n@keyframes float-spin-2 {\n  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }\n  50% { transform: translate3d(-10px,18px,30px) rotate(-140deg); }\n}\n@keyframes float-spin-3 {\n  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }\n  50% { transform: translate3d(10px,14px,20px) rotate(90deg); }\n}\n@media (max-width: 980px) {\n  #dts-page .hero-floaters { display: none; }\n}\n\n#dts-page .hero-grid {\n  display: grid;\n  grid-template-columns: 1.05fr 0.95fr;\n  gap: 64px;\n  align-items: center;\n  min-height: 100vh;\n  padding: 140px 48px 80px;\n  max-width: 1280px;\n  margin: 0 auto;\n  width: 100%;\n  position: relative;\n  z-index: 2;\n}\n\n#dts-page .hero-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  border: 1px solid rgba(34,211,238,0.25);\n  background: rgba(34,211,238,0.06);\n  padding: 7px 16px 7px 10px;\n  border-radius: 100px;\n  font-family: var(--font-mono);\n  font-size: 11.5px;\n  font-weight: 500;\n  letter-spacing: 0.03em;\n  color: var(--cyan);\n  margin-bottom: 36px;\n}\n#dts-page .hero-badge-dot {\n  width: 6px; height: 6px;\n  border-radius: 50%;\n  background: var(--cyan);\n  box-shadow: 0 0 14px var(--cyan), 0 0 26px rgba(34,211,238,0.6);\n  animation: pulse-dot 2s ease-in-out infinite;\n}\n@keyframes pulse-dot {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.45; transform: scale(0.7); }\n}\n\n#dts-page .hero-h1 {\n  font-size: clamp(54px, 7.2vw, 104px);\n  font-weight: 700;\n  line-height: 0.98;\n  letter-spacing: -0.03em;\n  margin-bottom: 28px;\n  color: var(--white);\n}\n#dts-page .hero-h1 .accent {\n  background: linear-gradient(120deg, var(--cyan) 0%, var(--azure-bright) 55%, var(--violet) 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  filter: drop-shadow(0 0 24px rgba(77,127,255,0.3));\n}\n\n#dts-page .hero-desc {\n  font-size: 18px;\n  line-height: 1.6;\n  color: var(--text-2);\n  margin-bottom: 40px;\n  max-width: 500px;\n}\n\n#dts-page .hero-pills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-bottom: 44px;\n}\n#dts-page .hero-pill {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 12.5px;\n  font-weight: 500;\n  padding: 8px 14px;\n  border-radius: 7px;\n  border: 1px solid var(--line);\n  background: var(--panel);\n  color: var(--text-2);\n}\n#dts-page .hero-pill::before {\n  content: '';\n  width: 5px; height: 5px;\n  border-radius: 50%;\n  background: var(--azure-bright);\n}\n\n#dts-page .hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }\n\n#dts-page .hero-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  background: linear-gradient(135deg, var(--azure) 0%, var(--azure-bright) 40%, #4338ca 100%);\n  color: #fff;\n  font-size: 14.5px;\n  font-weight: 600;\n  padding: 15px 26px;\n  border-radius: 10px;\n  text-decoration: none;\n  letter-spacing: 0.01em;\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,0.12) inset,\n    0 0 30px rgba(77,127,255,0.55),\n    0 0 70px rgba(37,99,255,0.4),\n    0 12px 34px rgba(0,0,0,0.5);\n  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);\n  cursor: pointer;\n  border: none;\n  position: relative;\n}\n#dts-page .hero-cta:hover {\n  transform: translateY(-3px) scale(1.015);\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,0.18) inset,\n    0 0 44px rgba(77,127,255,0.75),\n    0 0 100px rgba(139,92,246,0.5),\n    0 18px 44px rgba(0,0,0,0.55);\n}\n#dts-page .hero-cta svg { width: 16px; height: 16px; transition: transform 0.25s; }\n#dts-page .hero-cta:hover svg { transform: translateX(3px); }\n\n#dts-page .hero-secondary-link {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text-2);\n  text-decoration: none;\n  border-bottom: 1px solid var(--line);\n  padding-bottom: 2px;\n  transition: color 0.2s, border-color 0.2s;\n}\n#dts-page .hero-secondary-link:hover { color: var(--text-1); border-color: var(--text-2); }\n\n\/* Hero visual stage *\/\n#dts-page .hero-stage {\n  position: relative;\n  z-index: 2;\n  transform-style: preserve-3d;\n}\n#dts-page .hero-stage-glow {\n  position: absolute;\n  inset: -90px;\n  background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(37,99,255,0.42) 0%, rgba(139,92,246,0.18) 45%, transparent 72%);\n  z-index: 0;\n  pointer-events: none;\n  filter: blur(2px);\n  animation: hero-glow-pulse 4.5s ease-in-out infinite;\n}\n@keyframes hero-glow-pulse {\n  0%, 100% { opacity: 0.85; transform: scale(1); }\n  50% { opacity: 1; transform: scale(1.04); }\n}\n\n\/* Stacked depth cards behind the main frame for layered-3D feel *\/\n#dts-page .hero-stage-deck {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n}\n#dts-page .hero-stage-deck::before,\n#dts-page .hero-stage-deck::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: 28px;\n  border: 1px solid rgba(77,127,255,0.18);\n  background: linear-gradient(160deg, rgba(37,99,255,0.07), rgba(139,92,246,0.04));\n}\n#dts-page .hero-stage-deck::before {\n  transform: translate3d(18px, 22px, -60px) rotate(3deg);\n  opacity: 0.55;\n}\n#dts-page .hero-stage-deck::after {\n  transform: translate3d(34px, 42px, -120px) rotate(6deg);\n  opacity: 0.3;\n}\n\n#dts-page .hero-stage-frame {\n  position: relative;\n  border-radius: 28px;\n  overflow: hidden;\n  background: linear-gradient(160deg, rgba(37,99,255,0.14), rgba(139,92,246,0.07));\n  border: 1px solid rgba(77,127,255,0.32);\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,0.06) inset,\n    0 70px 120px -20px rgba(0,0,0,0.65),\n    0 0 70px -8px rgba(37,99,255,0.55),\n    0 0 140px -20px rgba(139,92,246,0.4);\n  aspect-ratio: 1;\n  transform: rotateY(-8deg) rotateX(4deg);\n  transition: transform 0.4s ease-out;\n  will-change: transform;\n}\n#dts-page .hero-stage:hover .hero-stage-frame {\n  transform: rotateY(-3deg) rotateX(2deg) scale(1.01);\n}\n#dts-page .hero-stage-frame::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 55%);\n  z-index: 2;\n  pointer-events: none;\n}\n#dts-page .hero-stage-frame::after {\n  content: '';\n  position: absolute;\n  left: 0; right: 0; bottom: 0;\n  height: 45%;\n  background: linear-gradient(to top, var(--ink) 0%, transparent 100%);\n  z-index: 1;\n  pointer-events: none;\n}\n#dts-page #hero-lottie { width: 100%; height: 100%; position: relative; z-index: 0; }\n\n#dts-page .hero-stage-tag {\n  position: absolute;\n  bottom: 22px; left: 22px;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-2);\n  background: rgba(2,4,12,0.55);\n  border: 1px solid var(--line);\n  padding: 7px 12px;\n  border-radius: 100px;\n  backdrop-filter: blur(8px);\n}\n#dts-page .hero-stage-tag span.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }\n\n\/* Scroll indicator *\/\n#dts-page .scroll-indicator {\n  position: absolute;\n  bottom: 36px; left: 50%;\n  transform: translateX(-50%);\n  display: flex; flex-direction: column; align-items: center; gap: 8px;\n  opacity: 0.35;\n  animation: bounce-scroll 2.2s ease-in-out infinite;\n  z-index: 2;\n}\n@keyframes bounce-scroll {\n  0%, 100% { transform: translateX(-50%) translateY(0); }\n  50% { transform: translateX(-50%) translateY(7px); }\n}\n#dts-page .scroll-indicator span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }\n#dts-page .scroll-indicator svg { width: 14px; height: 14px; }\n\n@media (max-width: 980px) {\n  #dts-page .hero-grid { grid-template-columns: 1fr; padding-top: 120px; gap: 48px; }\n  #dts-page .hero-stage { max-width: 420px; margin: 0 auto; }\n}\n\n\/* ============================================================\n   SECTION 2 &mdash; QUICK BENEFITS\n============================================================ *\/\n#dts-page #benefits {\n  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-1) 100%);\n  border-top: 1px solid var(--line);\n  border-bottom: 1px solid var(--line);\n  padding: 0;\n}\n#dts-page .benefits-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n}\n#dts-page .benefit-card {\n  padding: 56px 44px;\n  border-right: 1px solid var(--line);\n  transition: background 0.35s var(--ease);\n  position: relative;\n}\n#dts-page .benefit-card:last-child { border-right: none; }\n#dts-page .benefit-card:hover { background: rgba(37,99,255,0.045); }\n#dts-page .benefit-index {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  color: var(--text-3);\n  margin-bottom: 28px;\n  display: block;\n}\n#dts-page .benefit-card h3 {\n  font-size: 19px;\n  font-weight: 600;\n  margin-bottom: 12px;\n  letter-spacing: -0.01em;\n  color: var(--white);\n}\n#dts-page .benefit-card p {\n  font-size: 14.5px;\n  line-height: 1.65;\n  color: var(--text-2);\n  max-width: 320px;\n}\n@media (max-width: 880px) {\n  #dts-page .benefits-grid { grid-template-columns: 1fr; }\n  #dts-page .benefit-card { border-right: none; border-bottom: 1px solid var(--line); }\n}\n\n\/* ============================================================\n   TICKER\n============================================================ *\/\n#dts-page .ticker-wrap {\n  overflow: hidden;\n  border-bottom: 1px solid var(--line);\n  background: rgba(37,99,255,0.025);\n  padding: 16px 0;\n}\n#dts-page .ticker-track {\n  display: flex;\n  width: max-content;\n  animation: ticker-slide 32s linear infinite;\n}\n@keyframes ticker-slide {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n#dts-page .ticker-item {\n  display: flex; align-items: center; gap: 12px;\n  padding: 0 36px;\n  font-family: var(--font-mono);\n  font-size: 11.5px;\n  letter-spacing: 0.05em;\n  color: var(--text-3);\n  white-space: nowrap;\n}\n#dts-page .ticker-item span { color: var(--azure-bright); font-size: 14px; }\n\n\/* ============================================================\n   SECTION 3 &mdash; CLIENT JOURNEY\n============================================================ *\/\n#dts-page #journey { background: var(--ink-1); }\n\n#dts-page .journey-header {\n  max-width: 640px;\n  margin: 0 auto 76px;\n  text-align: center;\n}\n#dts-page .journey-header h2 {\n  font-size: clamp(38px, 4.6vw, 64px);\n  font-weight: 700;\n  letter-spacing: -0.025em;\n  margin-bottom: 18px;\n  color: var(--white);\n}\n#dts-page .journey-header p {\n  font-size: 16.5px;\n  line-height: 1.65;\n  color: var(--text-2);\n}\n\n#dts-page .journey-body {\n  display: grid;\n  grid-template-columns: 0.85fr 1.15fr;\n  gap: 56px;\n  align-items: center;\n}\n\n#dts-page .journey-stage { position: relative; perspective: 1400px; }\n#dts-page .journey-stage-frame {\n  border-radius: 24px;\n  overflow: hidden;\n  background: var(--panel);\n  border: 1px solid var(--line);\n  box-shadow: 0 50px 90px -30px rgba(0,0,0,0.55), 0 0 60px -14px rgba(37,99,255,0.3);\n  aspect-ratio: 1;\n  position: relative;\n  padding: 24px;\n  transform: rotateY(5deg) rotateX(-2deg);\n  transition: transform 0.4s ease-out;\n  will-change: transform;\n}\n#dts-page .journey-stage:hover .journey-stage-frame {\n  transform: rotateY(0deg) rotateX(0deg) scale(1.01);\n}\n#dts-page #journey-lottie { width: 100%; height: 100%; }\n\n#dts-page .journey-cards { display: flex; flex-direction: column; gap: 14px; }\n\n#dts-page .journey-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 18px;\n  padding: 22px 24px;\n  border-radius: 14px;\n  border: 1px solid var(--line);\n  background: var(--panel);\n  transition: border-color 0.3s, background 0.3s, transform 0.3s;\n}\n#dts-page .journey-item:hover {\n  border-color: rgba(37,99,255,0.35);\n  background: var(--panel-hover);\n  transform: translateX(4px);\n}\n#dts-page .journey-number {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  color: var(--cyan);\n  flex-shrink: 0;\n  width: 28px;\n  padding-top: 2px;\n}\n#dts-page .journey-item-text h4 {\n  font-size: 15px;\n  font-weight: 600;\n  margin-bottom: 6px;\n  color: var(--white);\n  letter-spacing: -0.005em;\n}\n#dts-page .journey-item-text p {\n  font-size: 13.5px;\n  line-height: 1.55;\n  color: var(--text-2);\n}\n\n@media (max-width: 980px) {\n  #dts-page .journey-body { grid-template-columns: 1fr; }\n  #dts-page .journey-stage { max-width: 360px; margin: 0 auto; }\n}\n\n\/* Stat bar *\/\n#dts-page .stat-bar {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  border: 1px solid var(--line);\n  border-radius: 20px;\n  overflow: hidden;\n  margin-top: 64px;\n}\n#dts-page .stat-item {\n  padding: 36px 28px;\n  text-align: center;\n  border-right: 1px solid var(--line);\n}\n#dts-page .stat-item:last-child { border-right: none; }\n#dts-page .stat-number {\n  font-family: var(--font-display);\n  font-size: 38px;\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  background: linear-gradient(135deg, var(--white), var(--cyan));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 6px;\n  filter: drop-shadow(0 0 18px rgba(34,211,238,0.35));\n}\n#dts-page .stat-label {\n  font-family: var(--font-mono);\n  font-size: 11px;\n  color: var(--text-3);\n  letter-spacing: 0.04em;\n}\n@media (max-width: 700px) {\n  #dts-page .stat-bar { grid-template-columns: repeat(2, 1fr); }\n  #dts-page .stat-item:nth-child(2) { border-right: none; }\n}\n\n\/* ============================================================\n   SECTION 4 &mdash; SERVICE AREAS\n============================================================ *\/\n#dts-page #services { background: var(--ink-2); position: relative; perspective: 1800px; }\n#dts-page .services-bg {\n  position: absolute; inset: -15%;\n  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,92,246,0.08) 0%, transparent 60%);\n  pointer-events: none;\n  overflow: hidden;\n}\n#dts-page .services-bg::before,\n#dts-page .services-bg::after {\n  content: '';\n  position: absolute;\n  border-radius: 50%;\n  filter: blur(80px);\n  opacity: 0.35;\n}\n#dts-page .services-bg::before {\n  width: 44vw; height: 44vw;\n  top: -10%; right: -10%;\n  background: radial-gradient(circle, rgba(139,92,246,0.5) 0%, transparent 70%);\n  animation: smoke-drift-2 30s ease-in-out infinite;\n}\n#dts-page .services-bg::after {\n  width: 38vw; height: 38vw;\n  bottom: -10%; left: -8%;\n  background: radial-gradient(circle, rgba(37,99,255,0.45) 0%, transparent 70%);\n  animation: smoke-drift-3 24s ease-in-out infinite;\n}\n#dts-page .services-header { text-align: center; margin-bottom: 88px; position: relative; z-index: 1; }\n#dts-page .services-header h2 {\n  font-size: clamp(40px, 5vw, 68px);\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  margin-bottom: 18px;\n  color: var(--white);\n  line-height: 1;\n}\n#dts-page .services-header p {\n  font-size: 17.5px;\n  line-height: 1.65;\n  color: var(--text-2);\n  max-width: 580px;\n  margin: 0 auto;\n}\n\n#dts-page .services-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 22px;\n  position: relative;\n  z-index: 1;\n}\n\n#dts-page .service-card {\n  border-radius: 22px;\n  border: 1px solid var(--line);\n  background: var(--panel);\n  overflow: hidden;\n  position: relative;\n  transition: border-color 0.35s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);\n  transform-style: preserve-3d;\n}\n#dts-page .service-card:hover {\n  border-color: var(--card-accent, rgba(37,99,255,0.4));\n  transform: translateY(-10px) rotateX(3deg) rotateY(-2deg) scale(1.015);\n  box-shadow:\n    0 44px 80px -20px rgba(0,0,0,0.6),\n    0 0 0 1px var(--card-accent, rgba(37,99,255,0.3)) inset,\n    0 0 90px -6px var(--card-glow, rgba(37,99,255,0.5));\n}\n\n#dts-page .service-card-stage {\n  width: 100%;\n  height: 240px;\n  position: relative;\n  overflow: hidden;\n  background: radial-gradient(ellipse 90% 90% at 50% 30%, var(--card-glow, rgba(37,99,255,0.22)) 0%, transparent 72%);\n  padding: 22px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n#dts-page .service-lottie-frame {\n  width: 100%;\n  height: 100%;\n  border-radius: 14px;\n  overflow: hidden;\n  background: var(--paper);\n  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 50px -4px var(--card-glow, rgba(37,99,255,0.35)), 0 28px 56px -16px rgba(0,0,0,0.6);\n  position: relative;\n  transition: box-shadow 0.35s var(--ease);\n}\n#dts-page .service-card:hover .service-lottie-frame {\n  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 0 70px -2px var(--card-glow, rgba(37,99,255,0.55)), 0 32px 64px -16px rgba(0,0,0,0.65);\n}\n#dts-page .service-lottie-el { width: 100%; height: 100%; }\n\n#dts-page .service-card-body { padding: 26px 30px 34px; position: relative; }\n\n#dts-page .service-tag {\n  display: inline-flex; align-items: center; gap: 7px;\n  font-family: var(--font-mono);\n  font-size: 11px;\n  letter-spacing: 0.04em;\n  color: var(--card-accent, var(--cyan));\n  margin-bottom: 14px;\n}\n#dts-page .service-tag::before { content: '\\25B8'; }\n\n#dts-page .service-card h3 {\n  font-size: 21px;\n  font-weight: 600;\n  letter-spacing: -0.015em;\n  margin-bottom: 11px;\n  color: var(--white);\n}\n#dts-page .service-card p {\n  font-size: 14px;\n  line-height: 1.65;\n  color: var(--text-2);\n  margin-bottom: 22px;\n}\n\n#dts-page .service-link {\n  display: inline-flex; align-items: center; gap: 8px;\n  font-size: 13px; font-weight: 600;\n  color: var(--card-accent, var(--azure-bright));\n  text-decoration: none;\n  cursor: pointer;\n  transition: gap 0.25s var(--ease);\n}\n#dts-page .service-link:hover { gap: 13px; }\n#dts-page .service-link svg { width: 13px; height: 13px; }\n\n#dts-page .service-card.accent-blue { --card-accent: var(--azure-bright); --card-glow: rgba(37,99,255,0.3); }\n#dts-page .service-card.accent-violet { --card-accent: var(--violet);       --card-glow: rgba(139,92,246,0.3); }\n#dts-page .service-card.accent-cyan { --card-accent: var(--cyan);         --card-glow: rgba(34,211,238,0.3); }\n#dts-page .service-card.accent-amber { --card-accent: var(--amber);        --card-glow: rgba(245,165,36,0.3); }\n\n@media (max-width: 880px) { #dts-page .services-grid { grid-template-columns: 1fr; } }\n\n\/* ============================================================\n   SECTION 5 &mdash; ENGAGEMENT MODELS\n============================================================ *\/\n#dts-page #models { background: var(--ink-1); overflow: hidden; }\n#dts-page .models-header { text-align: center; margin-bottom: 68px; }\n#dts-page .models-header h2 {\n  font-size: clamp(38px, 4.6vw, 64px);\n  font-weight: 700;\n  letter-spacing: -0.025em;\n  margin-bottom: 16px;\n  color: var(--white);\n}\n#dts-page .models-header p {\n  font-size: 16.5px;\n  color: var(--text-2);\n  max-width: 560px;\n  margin: 0 auto;\n  line-height: 1.65;\n}\n#dts-page .models-body {\n  display: grid;\n  grid-template-columns: 0.85fr 1.15fr;\n  gap: 56px;\n  align-items: center;\n  perspective: 1400px;\n}\n#dts-page .models-stage-frame {\n  border-radius: 24px;\n  overflow: hidden;\n  border: 1px solid var(--line);\n  background: var(--panel);\n  aspect-ratio: 1;\n  position: relative;\n  padding: 20px;\n  box-shadow: 0 50px 90px -30px rgba(0,0,0,0.5), 0 0 60px -14px rgba(139,92,246,0.28);\n  transform: rotateY(-5deg) rotateX(-2deg);\n  transition: transform 0.4s ease-out;\n  will-change: transform;\n}\n#dts-page .models-body:hover .models-stage-frame {\n  transform: rotateY(0deg) rotateX(0deg) scale(1.01);\n}\n#dts-page #models-lottie { width: 100%; height: 100%; }\n\n#dts-page .models-table { display: flex; flex-direction: column; }\n#dts-page .model-row {\n  display: grid;\n  grid-template-columns: 190px 1fr;\n  align-items: center;\n  padding: 18px 18px;\n  border-radius: 12px;\n  transition: background 0.25s;\n  gap: 24px;\n}\n#dts-page .model-row:hover { background: var(--panel); }\n#dts-page .model-label {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--white);\n  letter-spacing: -0.005em;\n}\n#dts-page .model-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }\n#dts-page .model-divider { height: 1px; background: var(--line); margin: 2px 0; }\n\n@media (max-width: 980px) {\n  #dts-page .models-body { grid-template-columns: 1fr; }\n  #dts-page .models-stage-frame { max-width: 360px; margin: 0 auto; }\n  #dts-page .model-row { grid-template-columns: 1fr; gap: 4px; }\n}\n\n\/* ============================================================\n   SECTION 6 &mdash; SCENARIOS\n============================================================ *\/\n#dts-page #scenarios { background: var(--ink); position: relative; overflow: hidden; }\n#dts-page .scenarios-bg {\n  position: absolute; inset: -15%;\n  background: radial-gradient(ellipse 70% 60% at 50% 80%, rgba(34,211,238,0.05) 0%, transparent 60%);\n  pointer-events: none;\n  overflow: hidden;\n}\n#dts-page .scenarios-bg::before {\n  content: '';\n  position: absolute;\n  width: 42vw; height: 42vw;\n  top: 10%; left: -12%;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(37,99,255,0.32) 0%, transparent 70%);\n  filter: blur(90px);\n  opacity: 0.4;\n  animation: smoke-drift-1 28s ease-in-out infinite;\n}\n#dts-page .scenarios-bg::after {\n  content: '';\n  position: absolute;\n  width: 36vw; height: 36vw;\n  bottom: -10%; right: -8%;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(34,211,238,0.3) 0%, transparent 70%);\n  filter: blur(90px);\n  opacity: 0.4;\n  animation: smoke-drift-3 26s ease-in-out infinite;\n}\n#dts-page .scenarios-header { text-align: center; margin-bottom: 68px; }\n#dts-page .scenarios-header h2 {\n  font-size: clamp(38px, 4.6vw, 64px);\n  font-weight: 700;\n  letter-spacing: -0.025em;\n  margin-bottom: 16px;\n  color: var(--white);\n}\n#dts-page .scenarios-header p {\n  font-size: 16.5px;\n  color: var(--text-2);\n  max-width: 600px;\n  margin: 0 auto;\n  line-height: 1.65;\n}\n#dts-page .scenarios-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 18px;\n  perspective: 1200px;\n}\n#dts-page .scenario-card {\n  padding: 34px 30px;\n  border-radius: 18px;\n  border: 1px solid var(--line);\n  background: var(--panel);\n  position: relative;\n  overflow: hidden;\n  transition: border-color 0.3s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease);\n  transform-style: preserve-3d;\n}\n#dts-page .scenario-card::before {\n  content: '';\n  position: absolute; top: 0; left: 0; right: 0; height: 2px;\n  background: linear-gradient(90deg, transparent, var(--azure-bright), transparent);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n#dts-page .scenario-card:hover {\n  border-color: rgba(37,99,255,0.35);\n  transform: translateY(-6px) rotateX(2deg);\n  box-shadow: 0 30px 50px -20px rgba(0,0,0,0.5), 0 0 50px -10px rgba(37,99,255,0.3);\n}\n#dts-page .scenario-card:hover::before { opacity: 1; }\n#dts-page .scenario-index {\n  font-family: var(--font-mono);\n  font-size: 11.5px;\n  color: var(--text-3);\n  margin-bottom: 18px;\n  display: block;\n}\n#dts-page .scenario-card h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 9px; color: var(--white); }\n#dts-page .scenario-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }\n@media (max-width: 880px) { #dts-page .scenarios-grid { grid-template-columns: 1fr; } }\n\n\/* ============================================================\n   SECTION 7 &mdash; HOW WE CONNECT\n============================================================ *\/\n#dts-page #connect { background: var(--ink-2); position: relative; overflow: hidden; }\n#dts-page .connect-lottie-bg {\n  position: absolute; inset: 0;\n  opacity: 0.16;\n  z-index: 0;\n  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 75% 50%, black 30%, transparent 75%);\n  mask-image: radial-gradient(ellipse 55% 70% at 75% 50%, black 30%, transparent 75%);\n}\n#dts-page #connect-lottie-bg { width: 100%; height: 100%; filter: saturate(0.7) brightness(0.9); }\n#dts-page .connect-lottie-bg::after {\n  content: '';\n  position: absolute; inset: 0;\n  background: linear-gradient(100deg, var(--ink-2) 0%, var(--ink-2) 30%, transparent 60%);\n}\n#dts-page .connect-content {\n  position: relative; z-index: 1;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 80px;\n  align-items: center;\n}\n#dts-page .connect-header h2 {\n  font-size: clamp(38px, 4.6vw, 64px);\n  font-weight: 700;\n  letter-spacing: -0.025em;\n  margin-bottom: 18px;\n  line-height: 1.08;\n  color: var(--white);\n}\n#dts-page .connect-header p { font-size: 16px; line-height: 1.65; color: var(--text-2); margin-bottom: 36px; }\n#dts-page .connect-paths { display: flex; flex-direction: column; gap: 14px; }\n#dts-page .connect-path {\n  display: flex; align-items: flex-start; gap: 16px;\n  padding: 20px 22px;\n  border-radius: 14px;\n  border: 1px solid var(--line);\n  background: var(--panel);\n  transition: border-color 0.3s, background 0.3s;\n}\n#dts-page .connect-path:hover { border-color: rgba(37,99,255,0.3); background: var(--panel-hover); }\n#dts-page .connect-path-index {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  color: var(--cyan);\n  flex-shrink: 0;\n  width: 24px;\n  padding-top: 2px;\n}\n#dts-page .connect-path h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; color: var(--white); }\n#dts-page .connect-path p { font-size: 13px; color: var(--text-2); line-height: 1.5; }\n\n@media (max-width: 980px) { #dts-page .connect-content { grid-template-columns: 1fr; gap: 48px; } }\n\n\/* ============================================================\n   BUTTONS (shared primary\/secondary)\n============================================================ *\/\n#dts-page .btn-primary {\n  display: inline-flex; align-items: center; gap: 10px;\n  background: linear-gradient(135deg, var(--azure) 0%, var(--azure-bright) 40%, #4338ca 100%);\n  color: #fff;\n  font-size: 14.5px; font-weight: 600;\n  padding: 15px 28px;\n  border-radius: 11px;\n  text-decoration: none;\n  letter-spacing: 0.01em;\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,0.12) inset,\n    0 0 28px rgba(77,127,255,0.5),\n    0 0 64px rgba(37,99,255,0.36),\n    0 12px 32px rgba(0,0,0,0.45);\n  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);\n  cursor: pointer;\n  border: none;\n}\n#dts-page .btn-primary:hover {\n  transform: translateY(-3px) scale(1.015);\n  box-shadow:\n    0 0 0 1px rgba(255,255,255,0.18) inset,\n    0 0 42px rgba(77,127,255,0.7),\n    0 0 90px rgba(139,92,246,0.46),\n    0 18px 40px rgba(0,0,0,0.5);\n}\n#dts-page .btn-primary svg { width: 16px; height: 16px; }\n\n#dts-page .btn-secondary {\n  display: inline-flex; align-items: center; gap: 10px;\n  background: transparent;\n  color: var(--text-1);\n  font-size: 14.5px; font-weight: 600;\n  padding: 15px 28px;\n  border-radius: 11px;\n  text-decoration: none;\n  letter-spacing: 0.01em;\n  border: 1px solid var(--line);\n  transition: background 0.25s, border-color 0.25s;\n  cursor: pointer;\n}\n#dts-page .btn-secondary:hover { background: var(--panel); border-color: rgba(247,248,251,0.22); }\n\n\/* ============================================================\n   SECTION 8 &mdash; CTA\n============================================================ *\/\n#dts-page #cta { background: var(--ink-1); padding: 110px 0; position: relative; }\n#dts-page .cta-inner { text-align: center; max-width: 720px; margin: 0 auto; position: relative; }\n#dts-page .cta-glow {\n  position: absolute;\n  width: 640px; height: 320px;\n  background: radial-gradient(ellipse, rgba(37,99,255,0.36) 0%, rgba(139,92,246,0.14) 45%, transparent 72%);\n  left: 50%; top: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  filter: blur(4px);\n  animation: hero-glow-pulse 5s ease-in-out infinite;\n}\n#dts-page .cta-inner h2 {\n  font-size: clamp(42px, 5.6vw, 72px);\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  margin-bottom: 20px;\n  line-height: 1.06;\n  color: var(--white);\n}\n#dts-page .cta-inner p { font-size: 17px; line-height: 1.65; color: var(--text-2); margin-bottom: 44px; }\n#dts-page .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }\n\n\/* ============================================================\n   FOOTER\n============================================================ *\/\n#dts-page footer {\n  border-top: 1px solid var(--line);\n  background: var(--ink);\n  padding: 56px 0 40px;\n  position: relative; z-index: 1;\n}\n#dts-page .footer-inner {\n  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;\n}\n#dts-page .footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text-1); }\n#dts-page .footer-copy { font-size: 13px; color: var(--text-3); }\n#dts-page .footer-links { display: flex; gap: 28px; }\n#dts-page .footer-links a { font-size: 13px; color: var(--text-2); text-decoration: none; transition: color 0.2s; }\n#dts-page .footer-links a:hover { color: var(--text-1); }\n<\/style>\n\n<div id=\"dts-page\">\n<canvas id=\"dts-field-canvas\"><\/canvas>\n<div class=\"signal-rail\"><\/div>\n\n<!-- ============================================================\n   SECTION 1 &mdash; HERO\n============================================================ -->\n<section id=\"hero\">\n  <div class=\"hero-bg\"><\/div>\n  <div class=\"hero-smoke\">\n    <div class=\"smoke-blob smoke-1\"><\/div>\n    <div class=\"smoke-blob smoke-2\"><\/div>\n    <div class=\"smoke-blob smoke-3\"><\/div>\n  <\/div>\n  <div class=\"hero-floaters\">\n    <div class=\"floater floater-ring\"><\/div>\n    <div class=\"floater floater-cube\"><\/div>\n    <div class=\"floater floater-dot-cluster\">\n      <span><\/span><span><\/span><span><\/span><span><\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"hero-grid\">\n    <div class=\"hero-content\">\n      <div class=\"hero-badge reveal\">\n        <span class=\"hero-badge-dot\"><\/span>\n        DT Solutions &middot; Service Overview\n      <\/div>\n      <h1 class=\"hero-h1 reveal reveal-delay-1\">\n        One partner.<br>\n        <span class=\"accent\">Every way you need support.<\/span>\n      <\/h1>\n      <p class=\"hero-desc reveal reveal-delay-2\">\n        DT Solutions helps organizations strengthen teams, projects, and business capacity &mdash; through talent solutions, consulting support, project delivery, and managed engagements, connected into one continuous model.\n      <\/p>\n      <div class=\"hero-pills reveal reveal-delay-3\">\n        <span class=\"hero-pill\">Talent for critical needs<\/span>\n        <span class=\"hero-pill\">Support for active priorities<\/span>\n        <span class=\"hero-pill\">Flexible engagement models<\/span>\n      <\/div>\n      <div class=\"hero-actions reveal reveal-delay-4\">\n        <button class=\"hero-cta\">\n          Explore The Work We Support\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n          <\/svg>\n        <\/button>\n        <a href=\"#connect\" class=\"hero-secondary-link\">See how it connects<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"hero-stage reveal reveal-delay-2\">\n      <div class=\"hero-stage-glow\"><\/div>\n      <div class=\"hero-stage-deck\"><\/div>\n      <div class=\"hero-stage-frame\">\n        <div id=\"hero-lottie\"><\/div>\n        <div class=\"hero-stage-tag\"><span class=\"dot\"><\/span>Engagement in motion<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n\n  <div class=\"scroll-indicator\">\n    <span>Scroll<\/span>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path d=\"M8 3v10M4 9l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n    <\/svg>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n   SECTION 2 &mdash; QUICK BENEFITS\n============================================================ -->\n<section id=\"benefits\">\n  <div class=\"benefits-grid\">\n    <div class=\"benefit-card reveal reveal-delay-1\">\n      <span class=\"benefit-index\">01<\/span>\n      <h3>Talent for critical needs<\/h3>\n      <p>Access skilled professionals across technology, business, project, and operational functions &mdash; placed where the need is sharpest.<\/p>\n    <\/div>\n    <div class=\"benefit-card reveal reveal-delay-2\">\n      <span class=\"benefit-index\">02<\/span>\n      <h3>Support for active priorities<\/h3>\n      <p>Add capacity where teams need momentum, structure, or specialized expertise to keep critical priorities moving forward.<\/p>\n    <\/div>\n    <div class=\"benefit-card reveal reveal-delay-3\">\n      <span class=\"benefit-index\">03<\/span>\n      <h3>Flexible ways to engage<\/h3>\n      <p>Choose models that fit your timeline, scope, and delivery environment &mdash; from individual placements to managed service structures.<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- TICKER -->\n<div class=\"ticker-wrap\">\n  <div class=\"ticker-track\" id=\"ticker\"><\/div>\n<\/div>\n\n<!-- ============================================================\n   SECTION 3 &mdash; CLIENT JOURNEY\n============================================================ -->\n<section id=\"journey\" class=\"section\">\n  <div class=\"container\">\n    <div class=\"journey-header\">\n      <div class=\"eyebrow\" style=\"justify-content:center;\">Client Journey<\/div>\n      <h2 class=\"reveal reveal-delay-1\">Where we fit in<\/h2>\n      <p class=\"reveal reveal-delay-2\">Organizations come to DT Solutions when priorities are active, timelines are tight, or internal teams need added expertise and capacity.<\/p>\n    <\/div>\n\n    <div class=\"journey-body\">\n      <div class=\"journey-stage reveal\">\n        <div class=\"journey-stage-frame\">\n          <div id=\"journey-lottie\"><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"journey-cards\">\n        <div class=\"journey-item reveal reveal-delay-1\">\n          <div class=\"journey-number\">01<\/div>\n          <div class=\"journey-item-text\">\n            <h4>Workforce gaps<\/h4>\n            <p>Skilled professionals for urgent roles, specialized needs, or planned hiring demand.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"journey-item reveal reveal-delay-2\">\n          <div class=\"journey-number\">02<\/div>\n          <div class=\"journey-item-text\">\n            <h4>Project pressure<\/h4>\n            <p>Added coordination and hands-on help for timelines, deliverables, and active initiatives.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"journey-item reveal reveal-delay-3\">\n          <div class=\"journey-number\">03<\/div>\n          <div class=\"journey-item-text\">\n            <h4>Operational workload<\/h4>\n            <p>External capacity when day-to-day business needs exceed internal bandwidth.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"journey-item reveal reveal-delay-4\">\n          <div class=\"journey-number\">04<\/div>\n          <div class=\"journey-item-text\">\n            <h4>Specialized expertise<\/h4>\n            <p>Focused knowledge across technology, business, public-sector, regulated, or transformation environments.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"journey-item reveal reveal-delay-5\">\n          <div class=\"journey-number\">05<\/div>\n          <div class=\"journey-item-text\">\n            <h4>Structured delivery needs<\/h4>\n            <p>Defined-scope support through managed capacity, project services, or formal engagement models.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"stat-bar\">\n      <div class=\"stat-item reveal reveal-delay-1\">\n        <div class=\"stat-number\">4<\/div>\n        <div class=\"stat-label\">CORE SERVICE AREAS<\/div>\n      <\/div>\n      <div class=\"stat-item reveal reveal-delay-2\">\n        <div class=\"stat-number\">6+<\/div>\n        <div class=\"stat-label\">ENGAGEMENT MODELS<\/div>\n      <\/div>\n      <div class=\"stat-item reveal reveal-delay-3\">\n        <div class=\"stat-number\">&infin;<\/div>\n        <div class=\"stat-label\">SCALABLE CAPACITY<\/div>\n      <\/div>\n      <div class=\"stat-item reveal reveal-delay-4\">\n        <div class=\"stat-number\">1<\/div>\n        <div class=\"stat-label\">TRUSTED PARTNER<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n   SECTION 4 &mdash; SERVICE AREAS\n============================================================ -->\n<section id=\"services\" class=\"section\">\n  <div class=\"services-bg\"><\/div>\n  <div class=\"container\">\n    <div class=\"services-header\">\n      <div class=\"eyebrow\" style=\"justify-content:center;\">Connected Service Areas<\/div>\n      <h2 class=\"reveal reveal-delay-1\">What we do<\/h2>\n      <p class=\"reveal reveal-delay-2\">DT Solutions supports clients through connected service areas built around talent, consulting, project needs, and flexible delivery structures.<\/p>\n    <\/div>\n\n    <div class=\"services-grid\">\n      <div class=\"service-card accent-blue reveal reveal-delay-1\">\n        <div class=\"service-card-stage\">\n          <div class=\"service-lottie-frame\"><div id=\"svc-lottie-1\" class=\"service-lottie-el\"><\/div><\/div>\n        <\/div>\n        <div class=\"service-card-body\">\n          <div class=\"service-tag\">Talent Solutions<\/div>\n          <h3>Talent Solutions<\/h3>\n          <p>Contract, permanent, executive, and specialized hiring support for business-critical roles across technology, business, and operational functions.<\/p>\n          <span class=\"service-link\">\n            Learn more\n            <svg viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"service-card accent-violet reveal reveal-delay-2\">\n        <div class=\"service-card-stage\">\n          <div class=\"service-lottie-frame\"><div id=\"svc-lottie-2\" class=\"service-lottie-el\"><\/div><\/div>\n        <\/div>\n        <div class=\"service-card-body\">\n          <div class=\"service-tag\">Consulting<\/div>\n          <h3>Consulting &amp; Specialized Services<\/h3>\n          <p>Advisory, operational, technology, and business-focused support for complex client needs across regulated, transformation, and specialized environments.<\/p>\n          <span class=\"service-link\">\n            Learn more\n            <svg viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"service-card accent-cyan reveal reveal-delay-3\">\n        <div class=\"service-card-stage\">\n          <div class=\"service-lottie-frame\"><div id=\"svc-lottie-3\" class=\"service-lottie-el\"><\/div><\/div>\n        <\/div>\n        <div class=\"service-card-body\">\n          <div class=\"service-tag\">Project &amp; Delivery<\/div>\n          <h3>Project &amp; Delivery Support<\/h3>\n          <p>Structured support for initiatives that need coordination, execution, and measurable progress &mdash; from planning through delivery.<\/p>\n          <span class=\"service-link\">\n            Learn more\n            <svg viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"service-card accent-amber reveal reveal-delay-4\">\n        <div class=\"service-card-stage\">\n          <div class=\"service-lottie-frame\"><div id=\"svc-lottie-4\" class=\"service-lottie-el\"><\/div><\/div>\n        <\/div>\n        <div class=\"service-card-body\">\n          <div class=\"service-tag\">Managed Engagements<\/div>\n          <h3>Managed &amp; Flexible Engagements<\/h3>\n          <p>SOW, managed capacity, and flexible service models shaped around scope, timelines, and client priorities &mdash; structured for accountability and continuity.<\/p>\n          <span class=\"service-link\">\n            Learn more\n            <svg viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n   SECTION 5 &mdash; ENGAGEMENT MODELS\n============================================================ -->\n<section id=\"models\" class=\"section\">\n  <div class=\"container\">\n    <div class=\"models-header\">\n      <div class=\"eyebrow\" style=\"justify-content:center;\">How We Engage<\/div>\n      <h2 class=\"reveal reveal-delay-1\">What we do<\/h2>\n      <p class=\"reveal reveal-delay-2\">DT Solutions adapts each engagement around the work to be done, the timeline involved, and the level of structure required.<\/p>\n    <\/div>\n\n    <div class=\"models-body\">\n      <div class=\"reveal\">\n        <div class=\"models-stage-frame\">\n          <div id=\"models-lottie\"><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"models-table reveal reveal-delay-2\">\n        <div class=\"model-row\">\n          <div class=\"model-label\">Individual talent<\/div>\n          <div class=\"model-desc\">Specialized professionals added to existing teams for defined roles, skill gaps, or critical hiring needs.<\/div>\n        <\/div>\n        <div class=\"model-divider\"><\/div>\n        <div class=\"model-row\">\n          <div class=\"model-label\">Team-based support<\/div>\n          <div class=\"model-desc\">Coordinated groups assembled for larger workstreams, multi-skill requirements, or expanding project demand.<\/div>\n        <\/div>\n        <div class=\"model-divider\"><\/div>\n        <div class=\"model-row\">\n          <div class=\"model-label\">Project support<\/div>\n          <div class=\"model-desc\">Hands-on help for initiatives with timelines, deliverables, stakeholders, and defined scope.<\/div>\n        <\/div>\n        <div class=\"model-divider\"><\/div>\n        <div class=\"model-row\">\n          <div class=\"model-label\">Managed capacity<\/div>\n          <div class=\"model-desc\">Ongoing coverage for functions, programs, or service areas that require steady external support.<\/div>\n        <\/div>\n        <div class=\"model-divider\"><\/div>\n        <div class=\"model-row\">\n          <div class=\"model-label\">SOW-based delivery<\/div>\n          <div class=\"model-desc\">Structured engagements aligned to agreed scope, outputs, timelines, and accountability.<\/div>\n        <\/div>\n        <div class=\"model-divider\"><\/div>\n        <div class=\"model-row\">\n          <div class=\"model-label\">Hybrid models<\/div>\n          <div class=\"model-desc\">Combined approaches that blend talent, consulting, and delivery support as needs evolve.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n   SECTION 6 &mdash; SCENARIOS\n============================================================ -->\n<section id=\"scenarios\" class=\"section\">\n  <div class=\"scenarios-bg\"><\/div>\n  <div class=\"container\">\n    <div class=\"scenarios-header\">\n      <div class=\"eyebrow\" style=\"justify-content:center;\">Where We Fit<\/div>\n      <h2 class=\"reveal reveal-delay-1\">Common scenarios we support<\/h2>\n      <p class=\"reveal reveal-delay-2\">Clients bring DT Solutions in for moments that demand more capacity, more structure, or more specialized skill than internal teams have on hand.<\/p>\n    <\/div>\n\n    <div class=\"scenarios-grid\">\n      <div class=\"scenario-card reveal reveal-delay-1\">\n        <span class=\"scenario-index\">01<\/span>\n        <h4>Hiring under pressure<\/h4>\n        <p>When a critical role needs to be filled fast, without compromising on quality or fit.<\/p>\n      <\/div>\n      <div class=\"scenario-card reveal reveal-delay-2\">\n        <span class=\"scenario-index\">02<\/span>\n        <h4>Scaling a team quickly<\/h4>\n        <p>When growth, a new initiative, or a surge in demand requires capacity faster than hiring alone allows.<\/p>\n      <\/div>\n      <div class=\"scenario-card reveal reveal-delay-3\">\n        <span class=\"scenario-index\">03<\/span>\n        <h4>Delivering a defined project<\/h4>\n        <p>When an initiative has a clear scope and deadline, and needs dedicated hands to see it through.<\/p>\n      <\/div>\n      <div class=\"scenario-card reveal reveal-delay-4\">\n        <span class=\"scenario-index\">04<\/span>\n        <h4>Covering an operational gap<\/h4>\n        <p>When day-to-day functions need steady external coverage while internal teams stay focused.<\/p>\n      <\/div>\n      <div class=\"scenario-card reveal reveal-delay-5\">\n        <span class=\"scenario-index\">05<\/span>\n        <h4>Navigating change or transformation<\/h4>\n        <p>When modernization, change, or process improvement requires focused expertise and structure.<\/p>\n      <\/div>\n      <div class=\"scenario-card reveal reveal-delay-6\">\n        <span class=\"scenario-index\">06<\/span>\n        <h4>Accessing niche expertise<\/h4>\n        <p>When specialized skills are needed beyond the current team's capacity or reach.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n   SECTION 7 &mdash; HOW WE CONNECT\n============================================================ -->\n<section id=\"connect\" class=\"section\">\n  <div class=\"connect-lottie-bg\">\n    <div id=\"connect-lottie-bg\"><\/div>\n  <\/div>\n  <div class=\"container\">\n    <div class=\"connect-content\">\n      <div class=\"connect-header\">\n        <div class=\"eyebrow\">How It Comes Together<\/div>\n        <h2 class=\"reveal reveal-delay-1\">What we do<\/h2>\n        <p class=\"reveal reveal-delay-2\">DT Solutions connects talent, consulting, project work, and managed services around how each client engagement needs to be structured &mdash; starting where the need is and expanding as required.<\/p>\n        <button class=\"btn-primary reveal reveal-delay-3\">\n          Start a Conversation\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n        <\/button>\n      <\/div>\n\n      <div class=\"connect-paths\">\n        <div class=\"connect-path reveal reveal-delay-1\">\n          <div class=\"connect-path-index\">01<\/div>\n          <div>\n            <h4>Talent where skills are needed<\/h4>\n            <p>Individual professionals or specialized resources aligned to roles, teams, and workload demands.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"connect-path reveal reveal-delay-2\">\n          <div class=\"connect-path-index\">02<\/div>\n          <div>\n            <h4>Consulting where direction is needed<\/h4>\n            <p>Focused guidance for planning, advisory needs, operational improvement, regulated work, or specialized priorities.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"connect-path reveal reveal-delay-3\">\n          <div class=\"connect-path-index\">03<\/div>\n          <div>\n            <h4>Project support where structure is needed<\/h4>\n            <p>Hands-on coordination for defined initiatives, timelines, deliverables, and stakeholder requirements.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"connect-path reveal reveal-delay-4\">\n          <div class=\"connect-path-index\">04<\/div>\n          <div>\n            <h4>Managed services where continuity matters<\/h4>\n            <p>Ongoing coverage for functions, programs, or service areas that require consistent oversight.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"connect-path reveal reveal-delay-5\">\n          <div class=\"connect-path-index\">05<\/div>\n          <div>\n            <h4>Flexible alignment across priorities<\/h4>\n            <p>Engagements can begin with one path and expand as scope, complexity, or business demand changes.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================================\n   SECTION 8 &mdash; CTA\n============================================================ -->\n<section id=\"cta\">\n  <div class=\"container\">\n    <div class=\"cta-inner\">\n      <div class=\"cta-glow\"><\/div>\n      <div class=\"eyebrow reveal\" style=\"justify-content:center;\">Connect with DT Solutions<\/div>\n      <h2 class=\"reveal reveal-delay-1\">Ready to find the right fit?<\/h2>\n      <p class=\"reveal reveal-delay-2\">Connect with DT Solutions to discuss the best fit across talent, consulting, project services, managed capacity, or structured engagement models &mdash; shaped around your actual priorities.<\/p>\n      <div class=\"cta-actions reveal reveal-delay-3\">\n        <button class=\"btn-primary\">\n          Start a Conversation\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n        <\/button>\n        <button class=\"btn-secondary\">Explore Services<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<\/div>\n\n<script>\n\/\/ ============================================================\n\/\/ SMOOTH SCROLL \u2014 for in-page anchor links (e.g. \"See how it connects\")\n\/\/ Scoped to #dts-page so it only affects this fragment's own links.\n\/\/ ============================================================\ndocument.querySelectorAll('#dts-page a[href^=\"#\"]').forEach(link => {\n  link.addEventListener('click', (e) => {\n    const targetId = link.getAttribute('href').slice(1);\n    const target = document.getElementById(targetId);\n    if (target) {\n      e.preventDefault();\n      target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n  });\n});\n\n\/\/ ============================================================\n\/\/ AMBIENT FIELD CANVAS\n\/\/ ============================================================\n(function() {\n  const canvas = document.getElementById('dts-field-canvas');\n  const ctx = canvas.getContext('2d');\n  const dtsRoot = document.getElementById('dts-page');\n  let W, H, particles = [];\n  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function resize() {\n    W = canvas.width = dtsRoot.offsetWidth;\n    H = canvas.height = dtsRoot.scrollHeight;\n  }\n  function Particle() { this.reset(); }\n  Particle.prototype.reset = function() {\n    this.x = Math.random() * W;\n    this.y = Math.random() * H;\n    this.r = Math.random() * 1.4 + 0.3;\n    this.alpha = Math.random() * 0.35 + 0.08;\n    this.vx = (Math.random() - 0.5) * 0.12;\n    this.vy = (Math.random() - 0.5) * 0.12;\n    const palette = ['37,99,255','34,211,238','139,92,246'];\n    this.color = palette[Math.floor(Math.random() * palette.length)];\n  };\n  Particle.prototype.update = function() {\n    this.x += this.vx; this.y += this.vy;\n    if (this.x < 0 || this.x > W || this.y < 0 || this.y > H) this.reset();\n  };\n  function init() {\n    resize();\n    particles = [];\n    const count = Math.floor((W * H) \/ 22000);\n    for (let i = 0; i < count; i++) particles.push(new Particle());\n  }\n  function draw() {\n    ctx.clearRect(0, 0, W, H);\n    particles.forEach(p => {\n      p.update();\n      ctx.beginPath();\n      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n      ctx.fillStyle = `rgba(${p.color},${p.alpha})`;\n      ctx.fill();\n    });\n    for (let i = 0; i < particles.length; i++) {\n      for (let j = i + 1; j < particles.length; j++) {\n        const dx = particles[i].x - particles[j].x;\n        const dy = particles[i].y - particles[j].y;\n        const dist = Math.sqrt(dx * dx + dy * dy);\n        if (dist < 110) {\n          ctx.beginPath();\n          ctx.moveTo(particles[i].x, particles[i].y);\n          ctx.lineTo(particles[j].x, particles[j].y);\n          ctx.strokeStyle = `rgba(37,99,255,${0.05 * (1 - dist \/ 110)})`;\n          ctx.lineWidth = 0.5;\n          ctx.stroke();\n        }\n      }\n    }\n    if (!reduceMotion) requestAnimationFrame(draw);\n  }\n  window.addEventListener('resize', () => init());\n  init();\n  draw();\n})();\n\n\/\/ ============================================================\n\/\/ PARALLAX ON SCROLL \u2014 smoke blobs and floaters drift at\n\/\/ different speeds than the page scroll for a sense of depth.\n\/\/ Uses translate3d (GPU-accelerated) and rAF-throttled scroll\n\/\/ reads to stay smooth; skipped entirely if the user prefers\n\/\/ reduced motion.\n\/\/ ============================================================\n(function() {\n  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (reduceMotion) return;\n\n  const dtsRoot = document.getElementById('dts-page');\n  const smokeLayer = dtsRoot.querySelector('.hero-smoke');\n  const floaterLayer = dtsRoot.querySelector('.hero-floaters');\n  if (!smokeLayer && !floaterLayer) return;\n  let ticking = false;\n\n  function onScroll() {\n    if (ticking) return;\n    ticking = true;\n    requestAnimationFrame(() => {\n      const heroEl = document.getElementById('hero');\n      const heroRect = heroEl ? heroEl.getBoundingClientRect() : null;\n      const scrollFactor = heroRect ? Math.max(0, -heroRect.top) : 0;\n\n      if (smokeLayer) smokeLayer.style.transform = `translate3d(0, ${scrollFactor * 0.12}px, 0)`;\n      if (floaterLayer) floaterLayer.style.transform = `translate3d(0, ${scrollFactor * -0.08}px, 0)`;\n      ticking = false;\n    });\n  }\n  window.addEventListener('scroll', onScroll, { passive: true });\n})();\n\n\/\/ ============================================================\n\/\/ SCROLL REVEAL\n\/\/ ============================================================\nconst revealEls = document.querySelectorAll('.reveal');\nconst revealObserver = new IntersectionObserver((entries) => {\n  entries.forEach(e => {\n    if (e.isIntersecting) {\n      e.target.classList.add('visible');\n      revealObserver.unobserve(e.target);\n    }\n  });\n}, { threshold: 0.12 });\nrevealEls.forEach(el => revealObserver.observe(el));\n\n\/\/ ============================================================\n\/\/ TICKER\n\/\/ ============================================================\nconst tickerItems = [\n  'Talent Solutions', 'Consulting & Specialized Services',\n  'Project & Delivery Support', 'Managed & Flexible Engagements',\n  'Workforce Gaps', 'Project Pressure', 'Operational Workload',\n  'Specialized Expertise', 'Structured Delivery', 'Scaling Teams'\n];\nconst ticker = document.getElementById('ticker');\nconst repeat = [...tickerItems, ...tickerItems].map(t =>\n  `<div class=\"ticker-item\"><span>\\u25C6<\/span>${t}<\/div>`\n).join('');\nticker.innerHTML = repeat + repeat;\n\n\/\/ ============================================================\n\/\/ LOTTIE LOADING \u2014 fixed, WordPress-ready\n\/\/\n\/\/ Root cause of the original bug: the page tried to fetch JSON from\n\/\/ an absolute filesystem path (\/mnt\/user-data\/uploads\/...) that only\n\/\/ exists on the machine that built this file. In a browser that path\n\/\/ 404s and the server's HTML error page gets returned instead of JSON\n\/\/ \u2014 which is exactly the \"unexpected character at line 1 column 1\"\n\/\/ SyntaxError (it's parsing the \"<\" of an HTML doc, not real JSON).\n\/\/\n\/\/ WORDPRESS SETUP \u2014 do this once:\n\/\/ 1. Go to Media Library \u2192 Add New, upload all the .json files from\n\/\/    the assets\/ folder (WordPress allows .json uploads by default in\n\/\/    most setups; if it's rejected, your host has disabled JSON\n\/\/    uploads \u2014 ask your admin to add 'json' to the allowed mime types,\n\/\/    or zip the files and use a plugin like \"WP Add Mime Types\").\n\/\/ 2. After uploading, click each file in the Media Library and copy\n\/\/    its \"File URL\" (looks like https:\/\/yoursite.com\/wp-content\/\n\/\/    uploads\/2026\/06\/hero-final.json).\n\/\/ 3. Paste each URL into DTS_ANIMATIONS below, replacing the\n\/\/    placeholder paths. Every entry must be a full https:\/\/ URL \u2014\n\/\/    relative paths will not resolve correctly on a WordPress page.\n\/\/\n\/\/ Animations are lazy-loaded only when their section scrolls into\n\/\/ view, since several of these files are 1MB+, and fail gracefully\n\/\/ per-animation (one missing file won't break the rest of the page).\n\/\/ ============================================================\nconst DTS_ANIMATIONS = {\n  'hero-lottie':       'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/hero-final.json',\n  'journey-lottie':    'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/Where_We_Fit_in_the_Client_Journey-2.json',\n  'svc-lottie-1':      'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/TalentSolutions.json',\n  'svc-lottie-2':      'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/Consulting___Specialized_Services.json',\n  'svc-lottie-3':      'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/Project___Delivery_Support.json',\n  'svc-lottie-4':      'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/The_Work_We_Support-2.json',\n  'models-lottie':     'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/HOW_SUPPORT_TAKES_SHAPE.json',\n  'connect-lottie-bg': 'https:\/\/digitalteksolutions.com\/wp-content\/uploads\/2026\/06\/CONNECTED_DELIVERY_MODEL.json'\n};\n\nfunction initLottieLazy(containerId, opts = {}) {\n  const el = document.getElementById(containerId);\n  if (!el) return;\n  const url = DTS_ANIMATIONS[containerId];\n  if (!url) return;\n\n  const start = () => {\n    if (el.dataset.loaded) return;\n    el.dataset.loaded = '1';\n    try {\n      if (typeof lottie === 'undefined') {\n        console.warn('lottie-web did not load &mdash; check that the cdnjs <script> tag is reachable.');\n        return;\n      }\n      const anim = lottie.loadAnimation({\n        container: el,\n        renderer: 'svg',\n        loop: opts.loop !== false,\n        autoplay: true,\n        path: url,\n        rendererSettings: { preserveAspectRatio: 'xMidYMid slice' }\n      });\n      anim.addEventListener('data_failed', () => {\n        console.warn('Lottie data failed to load:', containerId, url);\n        el.classList.add('lottie-fallback');\n      });\n    } catch (err) {\n      console.warn('Lottie init failed:', containerId, err);\n    }\n  };\n\n  const section = el.closest('section') || el;\n  const lazyObserver = new IntersectionObserver((entries) => {\n    entries.forEach(e => {\n      if (e.isIntersecting) {\n        start();\n        lazyObserver.disconnect();\n      }\n    });\n  }, { threshold: 0.15, rootMargin: '200px 0px' });\n  lazyObserver.observe(section);\n}\n\ninitLottieLazy('hero-lottie');\ninitLottieLazy('journey-lottie');\ninitLottieLazy('svc-lottie-1');\ninitLottieLazy('svc-lottie-2');\ninitLottieLazy('svc-lottie-3');\ninitLottieLazy('svc-lottie-4');\ninitLottieLazy('models-lottie');\ninitLottieLazy('connect-lottie-bg');\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DT Solutions &middot; Service Overview One partner. Every way you need support. DT Solutions helps organizations strengthen teams, projects, and business capacity &mdash; through talent solutions, consulting support, project delivery, and managed engagements, connected into one continuous model. Talent for critical needs Support for active priorities Flexible engagement models Explore The Work We Support See [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3002","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages\/3002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3002"}],"version-history":[{"count":25,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages\/3002\/revisions"}],"predecessor-version":[{"id":3035,"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=\/wp\/v2\/pages\/3002\/revisions\/3035"}],"wp:attachment":[{"href":"https:\/\/digi.alphanzo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}