/* Home-only animated logo, version 5: "Drawn stroke" (see hero-motion.js).
   Her mark on the navy band in the brighter finish (option A, silver and blue): one solid stroke
   runs from the bottom of the left curve, up and around it, and draws the V; the round shape
   behind fills in and the base line lights. The finished mark is plain markup, so reduced
   motion, no JavaScript and print all show it at rest. The header logo is unchanged. */

.hero-a:has(.hero-logo-figure) > .motif { display: none; }
.hero-a .hero-logo-figure {
  align-self: center;
  display: flex;
  justify-content: center;
  margin: 0;
  padding-bottom: 40px;
}
.hero-a:has(.hero-logo-figure) + .section { padding-top: var(--section); }

.vk-stage {
  width: min(100%, 460px);
  aspect-ratio: 210 / 170;
  -webkit-tap-highlight-color: transparent;
}
.vk-mark { display: block; width: 100%; height: 100%; overflow: visible; }

/* The finished mark */
.vk-body { fill: url(#vk-body-fill); }
.vk-wing { fill: url(#vk-wing-fill); }
.vk-base { fill: url(#vk-base-fill); }

/* Held hidden until the script takes over. If the script never runs, the mark appears anyway. */
@media (prefers-reduced-motion: no-preference) {
  .vk-stage:not(.vk-ready) .vk-final { opacity: 0; animation: vk-fallback .01s linear 2.5s forwards; }
}
@keyframes vk-fallback { to { opacity: 1; } }

/* M: stacked under the copy */
@media (max-width: 1023px) {
  .hero-a .hero-logo-figure { padding-bottom: 48px; }
  .vk-stage { width: min(100%, 380px); }
}

/* S: phones */
@media (max-width: 767px) {
  .hero-a:has(.hero-logo-figure) .hero-copy { padding-bottom: 12px; }
  .hero-a .hero-logo-figure { padding-bottom: 32px; }
  .vk-stage { width: min(84vw, 320px); }
}

@media (forced-colors: active) {
  .vk-body, .vk-wing, .vk-base { fill: CanvasText; }
}
@media print {
  .hero-logo-figure { display: none; }
}