/* Voice follows Network's page rhythm and card proportions. */
@media (min-width: 901px) {
  #main > .hero { padding-top: clamp(5px, .875vh, 10px); }
}
.voice-service-grid { margin-top: 38px; }
.voice-service-card { scroll-margin-top: 100px; }
.voice-service-card > span[id] { scroll-margin-top: 110px; }
@media (hover: hover) and (pointer: fine) {
  #matrix .rda-network-category:hover { background-color: #004300; transform: scale(1.3); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 640px) {
  #matrix .rda-network-category:hover { max-width: calc((100vw - 24px) / 1.3); }
}
#planning-guidance .rda-guidance-grid { width: 80%; margin: 0 auto; gap: 14.4px; }
#planning-guidance .rda-guidance-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22.4px 24px;
  border-radius: 11.2px;
  text-decoration: none;
}
#planning-guidance .rda-guidance-card h3 { font-size: 17.6px; line-height: 1.25; margin: 0; color: var(--ink); }
#planning-guidance .rda-guidance-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; background-color: #004300; }
@media (hover: hover) and (pointer: fine) {
  #planning-guidance .rda-guidance-card:hover { background-color: #004300; transform: scale(1.3); }
}
@media (max-width: 640px) {
  #planning-guidance .rda-guidance-grid { gap: 11.2px; }
  #planning-guidance .rda-guidance-card { padding: 19.2px 17.6px; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 640px) {
  #planning-guidance .rda-guidance-card:hover { max-width: calc((100vw - 24px) / 1.3); }
}

.voice-service-grid > .voice-service-card:last-child { grid-column: 1 / -1; width: calc((100% - 18px) / 2); justify-self: center; transform-origin: center; }
@media (max-width: 640px) { .voice-service-grid > .voice-service-card:last-child { width: 100%; } }
.voice-hero .network-hero-scene::before { clip-path: ellipse(35% 38% at 50% 46%); background: radial-gradient(ellipse at 42% 36%,#9bc78614,#0d482716 62%,#d6efcb08); }
.voice-hero .network-hero-slide { inset: 22% 23% 29%; justify-content: center; }


/* Match the other heroes' visual presence while respecting the available width. */
.voice-hero .network-hero-scene { width: min(484px, 100%); }
.voice-hero-cloud { overflow: visible; }
.voice-cloud-body, .voice-cloud-layer { transform-box: view-box; transform-origin: 50% 46.4%; animation-play-state: paused; }
.voice-cloud-body { animation: none; }
.voice-cloud-layer-middle, .voice-cloud-layer-outer, .voice-wave-incoming { animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: paused; }
.voice-cloud-layer-middle { animation-name: voice-reply-middle; }
.voice-cloud-layer-outer { animation-name: voice-reply-outer; }
.voice-sound-wave-1 > .voice-wave-incoming { animation-name: voice-incoming-near; }
.voice-sound-wave-2 > .voice-wave-incoming { animation-name: voice-incoming-middle; }
.voice-sound-wave-3 > .voice-wave-incoming { animation-name: voice-incoming-far; }
.voice-hero.is-enhanced[data-paused="false"] :is(.voice-cloud-layer-middle, .voice-cloud-layer-outer, .voice-wave-incoming) { animation-play-state: running; }
/* Listen from above, leave a pause, then answer through the outer cloud echoes. */
@keyframes voice-incoming-far { 0% { transform: translateY(5px); opacity: 0; } 4% { opacity: 1; } 22%,100% { transform: translateY(28px); opacity: 0; } }
@keyframes voice-incoming-middle { 0%,9% { transform: translateY(5px); opacity: 0; } 13% { opacity: 1; } 31%,100% { transform: translateY(28px); opacity: 0; } }
@keyframes voice-incoming-near { 0%,18% { transform: translateY(5px); opacity: 0; } 22% { opacity: 1; } 40%,100% { transform: translateY(28px); opacity: 0; } }
@keyframes voice-reply-middle { 0%,48% { transform: scale(1); opacity: .55; } 50% { transform: scale(.995); opacity: .65; } 58% { transform: scale(1.005); opacity: 1; } 70% { transform: scale(1.018); opacity: .5; } 72% { transform: scale(.998); opacity: .65; } 79% { transform: scale(1.005); opacity: .95; } 91% { transform: scale(1.018); opacity: .5; } 95%,100% { transform: scale(1); opacity: .55; } }
@keyframes voice-reply-outer { 0%,52% { transform: scale(1); opacity: .5; } 54% { transform: scale(.995); opacity: .55; } 62% { transform: scale(1.005); opacity: 1; } 74% { transform: scale(1.018); opacity: .5; } 76% { transform: scale(.998); opacity: .55; } 83% { transform: scale(1.005); opacity: .95; } 95% { transform: scale(1.018); opacity: .5; } 99%,100% { transform: scale(1); opacity: .5; } }
.rda-site-visual .rda-infographic { background: linear-gradient(135deg,#004300df,#061c13ed); }
.rda-site-visual .rda-visual-copy p { color: #d1e4c9 !important; }
.rda-site-visual .rda-infographic-thumb { background: #061c13; }
.rda-site-visual .rda-visual-actions a:first-child { color: #07321c !important; }
@media (prefers-reduced-motion: reduce) { #matrix .rda-readable-card:hover, #planning-guidance .rda-readable-card:hover { transform: none; } :is(.voice-cloud-body, .voice-cloud-layer, .voice-wave-incoming) { animation: none !important; } }
@media print { :is(.voice-cloud-body, .voice-cloud-layer, .voice-wave-incoming) { animation: none; } }

/* Incoming voice passes behind the head and resolves at the handset earpiece. */
.voice-earpiece-wave { animation: voice-earpiece-arrival 6s linear infinite; animation-play-state: paused; transform-origin: 173px 112px; }
.voice-hero.is-enhanced[data-paused="false"] .voice-earpiece-wave { animation-play-state: running; }
@keyframes voice-earpiece-arrival {
  0%,24% { opacity: 0; transform: translate(17px,73px) scale(.9); }
  26% { opacity: 1; }
  32% { transform: translate(31px,51px) scale(.9); }
  37% { transform: translate(30px,29px) scale(.9); }
  41% { transform: translate(11px,4px) scale(.85); }
  43% { opacity: 1; transform: translate(0,0) scale(.8); }
  46%,100% { opacity: 0; transform: translate(-14px,14px) scale(.72); }
}
@media (prefers-reduced-motion: reduce) { .voice-earpiece-wave { animation: none !important; } }
@media print { .voice-earpiece-wave { animation: none !important; } }
