/* A spacious editorial orbit, scoped to the online-world section. */
body #digital-roadmap {
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  padding: clamp(5rem, 8vw, 7rem) max(1.25rem, 4vw) 4rem;
  gap: 2.5rem;
  grid-template-rows: auto auto;
  background: radial-gradient(ellipse at 50% 58%, #d7bf8b30, transparent 58%), linear-gradient(145deg, #faf8f3, #e9e4d9);
  color: #25211a;
}
body #digital-roadmap .digital-roadmap__header { margin: 0 auto; }
body #digital-roadmap .eyebrow { margin: 0 0 .85rem; letter-spacing: .16em; }
body #digital-roadmap #digital-roadmap-title { font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important; margin: 0 auto 1rem; }
body #digital-roadmap .digital-roadmap__header > p:last-child { max-width: 70ch; font-size: .9375rem; line-height: 1.7; }
body #digital-roadmap .digital-roadmap__aura { top: 60%; opacity: .45; }
body #digital-roadmap .digital-roadmap__center {
  box-sizing: border-box;
  padding: 2.5rem;
  border-radius: 50%;
  border: 1px solid #d8bc7f;
  background: radial-gradient(circle at 30% 20%, #454035, #1b1915 45%, #0e0e0d 85%);
  box-shadow: 0 1.5rem 4rem #55432224, 0 0 0 .45rem #c8a76514, inset 0 1px 1px #fff5, inset 0 -.5rem 2rem #0005;
}
body #digital-roadmap .digital-roadmap__center :is(small,strong,span) { position: relative; z-index: 2; }
body #digital-roadmap .digital-roadmap__center small { font-size: .8rem; font-weight: 500; letter-spacing: .16em; color: #d5bd8c; }
body #digital-roadmap .digital-roadmap__center strong {
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
  font-size: clamp(1.875rem, 2.65vw, 2.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .005em;
  margin: .9rem 0;
  color: #fcf7eb;
}
body #digital-roadmap .digital-roadmap__center span { font-size: .75rem; line-height: 1.6; letter-spacing: .04em; color: #c3b8a4; }
body #digital-roadmap .digital-roadmap__center > i { border-color: #ddc28d35; animation-duration: 45s; }
body #digital-roadmap .digital-roadmap__center > i:nth-of-type(1) { inset: 5%; }
body #digital-roadmap .digital-roadmap__center > i:nth-of-type(2) { inset: 8%; }
body #digital-roadmap .digital-roadmap__center > i:nth-of-type(3) { inset: 11%; }
body #digital-roadmap .digital-roadmap__center > i:nth-of-type(4) { inset: 14%; }
body #digital-roadmap .digital-roadmap__center > i::after { width: .25rem; box-shadow: 0 0 .4rem #e5c67c55; }
body #digital-roadmap .digital-roadmap__face { box-sizing: border-box; padding: 1.25rem 1.4rem; border-radius: .65rem; border-color: #a98c5445; }
body #digital-roadmap .digital-roadmap__face--front {
  background: linear-gradient(135deg, #fffdf8fa, #f0ebdffa);
  box-shadow: 0 .6rem 1.5rem #6955320c, inset 0 1px #fff;
}
body #digital-roadmap .digital-roadmap__face--front strong { font-size: 1.25rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; margin: .5rem 0 0; }
body #digital-roadmap .digital-roadmap__face small { font-size: .7rem; letter-spacing: .1em; }
body #digital-roadmap .digital-roadmap__face--front::after { margin-top: .8rem; font-size: .6rem; letter-spacing: .08em; }
body #digital-roadmap .digital-roadmap__face--back { min-height: 12.5rem; background: #211d16; border-color: #d1b37899; }
body #digital-roadmap .digital-roadmap__face--list li { font-size: .7rem; line-height: 1.45; }
body #digital-roadmap .digital-roadmap__node:is(:hover,:focus) .digital-roadmap__card { transform: scale(1.06); filter: drop-shadow(0 1rem 1.5rem #39270c25); }
body #digital-roadmap .digital-roadmap__node:focus-visible { outline: 2px solid #967139; outline-offset: 5px; border-radius: .65rem; }
@media(min-width:901px) {
  body #digital-roadmap .digital-roadmap__map { width: min(100%, 72rem); height: 43rem; margin: 0 auto; }
  body #digital-roadmap .digital-roadmap__map::before,
  body #digital-roadmap .digital-roadmap__map::after { width: auto; height: 86%; aspect-ratio: 1; border-color: #aa85463d; background: transparent; }
  body #digital-roadmap .digital-roadmap__map::after { height: 72%; border-style: solid; border-color: #aa854629; }
  body #digital-roadmap .digital-roadmap__node { width: 25%; min-height: 9rem; }
  body #digital-roadmap .digital-roadmap__card { min-height: 9rem; }
  body #digital-roadmap .digital-roadmap__center { width: clamp(19rem, 30vw, 22rem); height: auto; min-height: 0; aspect-ratio: 1; }
  body #digital-roadmap .digital-roadmap__node--search,
  body #digital-roadmap .digital-roadmap__node--care { top: 18%; }
  body #digital-roadmap .digital-roadmap__node--content,
  body #digital-roadmap .digital-roadmap__node--campaign { bottom: 18%; }
}
@media(max-width:900px) {
  body #digital-roadmap .digital-roadmap__map {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-areas: 'center center' 'web social' 'search content' 'campaign care';
    gap: 1rem; width: min(100%, 42rem);
  }
  body #digital-roadmap .digital-roadmap__center { width: min(80vw, 20rem); min-height: 0; aspect-ratio: 1; margin-bottom: 1.5rem; }
  body #digital-roadmap .digital-roadmap__center strong { font-size: 2rem; }
  body #digital-roadmap .digital-roadmap__node,
  body #digital-roadmap .digital-roadmap__card { min-height: 9rem; }
  body #digital-roadmap .digital-roadmap__face { padding: 1rem; }
  body #digital-roadmap .digital-roadmap__face--front strong { font-size: 1.125rem; }
}
@media(max-width:400px) {
  body #digital-roadmap .digital-roadmap__map { grid-template-columns: 1fr; grid-template-areas: 'center' 'web' 'social' 'search' 'content' 'campaign' 'care'; }
}
@media(prefers-reduced-motion:reduce) {
  body #digital-roadmap .digital-roadmap__node:is(:hover,:focus) .digital-roadmap__card { transform: none; }
  body #digital-roadmap .digital-roadmap__center > i { animation: none; }
}