/* A quiet, sculptural orbit on warm paper. */
body #digital-roadmap {
  background:
    repeating-linear-gradient(0deg, #9d875003 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 32% 36%, #fffdf9 0%, transparent 60%),
    radial-gradient(ellipse at 68% 70%, #d6c49a38, transparent 55%), #efeae0;
}
body #digital-roadmap .digital-roadmap__aura { opacity: .18; }
body #digital-roadmap .digital-roadmap__aura::before,
body #digital-roadmap .digital-roadmap__aura::after { display: none; }
body #digital-roadmap .digital-roadmap__map { isolation: isolate; }
body #digital-roadmap .digital-roadmap__center {
  background: radial-gradient(ellipse at 35% 15%, #555045, transparent 60%), linear-gradient(145deg, #2d2b26, #11120f 80%);
  border: 1px solid #d7be87;
  box-shadow: 0 2rem 3rem -1rem #4a3a2855, 0 .35rem .5rem #3327192e, 0 0 0 5px #c7a76818, inset 0 2px 2px #ffefd344, inset 0 -5px 12px #0008;
}
body #digital-roadmap .digital-roadmap__center > i:nth-of-type(1) { inset: 5%; border-color: #ddc28d55; }
body #digital-roadmap .digital-roadmap__center > i:nth-of-type(2) { inset: 8%; border-color: #ddc28d22; }
body #digital-roadmap .digital-roadmap__center > i:nth-of-type(n+3) { display: none; }
body #digital-roadmap .digital-roadmap__face--front {
  background: linear-gradient(125deg, #fffefa, #f1ebdd);
  border-color: #c4ac795e;
  box-shadow: 0 1.3rem 2rem -.75rem #66503836, 0 2px 3px #6650380d, inset 0 1px #fff;
}
body #digital-roadmap .digital-roadmap__face--front small { color: #9c783c; font-weight: 550; }
body #digital-roadmap .digital-roadmap__face--front strong { font-family: 'Manrope', 'Segoe UI', sans-serif; }
body #digital-roadmap .digital-roadmap__node::before { display: none; }
.roadmap-art-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.roadmap-art-line {
  position: absolute;
  box-sizing: border-box;
  transform-origin: 0 0;
  height: 3rem;
  border-top: 1px solid #ac874952;
  border-radius: 50%;
  transition: border-color .4s, filter .4s;
}
.roadmap-art-line::after {
  content: '';
  position: absolute;
  inset: -1px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 15%, #e7c88b 45%, transparent 70%);
  background-size: 250% 100%;
  animation: roadmap-gold-light 12s linear infinite;
  opacity: .5;
}
.roadmap-art-line:nth-child(even)::after { animation-delay: -6s; }
body #digital-roadmap:has(.digital-roadmap__node--web:is(:hover,:focus)) .roadmap-art-line--web,
body #digital-roadmap:has(.digital-roadmap__node--social:is(:hover,:focus)) .roadmap-art-line--social,
body #digital-roadmap:has(.digital-roadmap__node--search:is(:hover,:focus)) .roadmap-art-line--search,
body #digital-roadmap:has(.digital-roadmap__node--content:is(:hover,:focus)) .roadmap-art-line--content,
body #digital-roadmap:has(.digital-roadmap__node--campaign:is(:hover,:focus)) .roadmap-art-line--campaign,
body #digital-roadmap:has(.digital-roadmap__node--care:is(:hover,:focus)) .roadmap-art-line--care {
  border-color: var(--service-ink, #b68a3b);
  filter: drop-shadow(0 0 3px var(--service-accent, #c69b5180));
}
@keyframes roadmap-gold-light { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@media(min-width:901px) {
  body #digital-roadmap .digital-roadmap__map::before {
    height: 87%; width: 76%; aspect-ratio: auto;
    border-color: #b9975e30;
    transform: translate(-50%,-50%) rotate(-18deg);
  }
  body #digital-roadmap .digital-roadmap__map::after {
    height: 82%; width: 64%; aspect-ratio: auto;
    border-color: #b9975e1c;
    transform: translate(-50%,-50%) rotate(22deg);
  }
  body #digital-roadmap .digital-roadmap__node { rotate: var(--art-tilt); transition: rotate .4s, transform .4s; }
  body #digital-roadmap .digital-roadmap__node--web { --art-tilt: -3deg; }
  body #digital-roadmap .digital-roadmap__node--search { --art-tilt: 3deg; }
  body #digital-roadmap .digital-roadmap__node--content { --art-tilt: -2deg; }
  body #digital-roadmap .digital-roadmap__node--social { --art-tilt: 2deg; }
  body #digital-roadmap .digital-roadmap__node--campaign { --art-tilt: 3deg; }
  body #digital-roadmap .digital-roadmap__node--care { --art-tilt: -3deg; }
  body #digital-roadmap .digital-roadmap__node:is(:hover,:focus) { rotate: 0deg; }
}
@media(max-width:900px) { .roadmap-art-lines { display: none; } }
@media(prefers-reduced-motion:reduce) {
  .roadmap-art-line::after { animation: none; }
  body #digital-roadmap .digital-roadmap__node,
  .roadmap-art-line { transition: none; }
}