/* Two hero-edge drawings; the existing content keeps its original geometry. */
.home-hero { isolation: isolate; overflow: clip; }
.home-hero > .relative { z-index: 1; }
.canopy-ribbons { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.canopy-ribbon { position: absolute; width: clamp(280px, 32vw, 560px); height: auto; overflow: visible; transform-origin: center; }
.canopy-ribbon--left { left: -12%; top: 22%; }
.canopy-ribbon--right { right: -9%; top: -16%; }
.canopy-ribbon__path { fill: var(--color-electric-blue); stroke: var(--canopy-olive); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.canopy-ribbons.is-drawn .canopy-ribbon--left { animation: canopy-ribbon-left 10s ease-in-out infinite; }
.canopy-ribbons.is-drawn .canopy-ribbon--right { animation: canopy-ribbon-right 11s ease-in-out .35s infinite; }
.canopy-ribbons.is-paused .canopy-ribbon { animation-play-state: paused; }
@keyframes canopy-ribbon-left { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(.6deg); } }
@keyframes canopy-ribbon-right { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(6px) rotate(-.5deg); } }
@media (min-width: 650px) and (max-width: 991px) {
  .canopy-ribbon { width: 43vw; }
  .canopy-ribbon--left { left: -24%; top: 32%; }
  .canopy-ribbon--right { right: -22%; top: -10%; }
}
@media (max-width: 649px) {
  .canopy-ribbon { width: 70vw; opacity: .65; }
  .canopy-ribbon--left { left: -46%; top: 38%; }
  .canopy-ribbon--right { right: -58%; top: -8%; }
}
@media (prefers-reduced-motion: reduce) {
  .canopy-ribbons .canopy-ribbon { animation: none !important; transform: none; }
  .canopy-ribbon__path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
}