/* Rusnak additions on top of the template stylesheet (css/webflow.css stays the template's own).
 *
 * Footer ground: the template ended the footer on a 290px decorative wordmark. Ours is a living
 * ground from the brand's world instead: a chinook arch at sunset over the Rockies - the arched band
 * of clear, glowing sky under a dark cloud deck that every Calgarian knows, in the hero's sunset
 * palette. Clouds drift slowly; still for anyone who prefers reduced motion. */
.footer-ground {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #0b0806;
  isolation: isolate;
}
/* the clear band under the cloud: orange at the horizon, pale gold, then cool grey up high */
.footer-ground-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #d9803f 0%, #eeb467 16%, #f5d9a0 34%, #c9c7b4 56%, #5b5a52 74%, #0b0806 100%);
}
/* the cloud deck: covers everything above an upward arch (a masked-out ellipse at the bottom),
   underside lit by the sunset along the arch edge. The deck is static; only the cloud layer (::before)
   and the glow (::after) move, with transform/opacity on their own layers, so nothing repaints per frame.
   (v1 animated background-position under the mask: ~30% more main-thread work on every scroll.) */
.footer-ground-arch {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #0b0806 0%, #17110d 55%, #3a2317 88%, #7a4122 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 104%, transparent 97%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 78% at 50% 104%, transparent 97%, #000 100%);
}
.footer-ground-arch::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background:
    radial-gradient(ellipse 9% 30% at 10% 30%, rgba(60, 44, 34, 0.9), transparent 70%),
    radial-gradient(ellipse 11% 26% at 31% 18%, rgba(52, 38, 30, 0.9), transparent 70%),
    radial-gradient(ellipse 8% 22% at 44% 40%, rgba(64, 46, 34, 0.85), transparent 70%),
    radial-gradient(ellipse 9% 30% at 60% 30%, rgba(60, 44, 34, 0.9), transparent 70%),
    radial-gradient(ellipse 11% 26% at 81% 18%, rgba(52, 38, 30, 0.9), transparent 70%),
    radial-gradient(ellipse 8% 22% at 94% 40%, rgba(64, 46, 34, 0.85), transparent 70%);
  will-change: transform;
  animation: rusnak-clouds 90s linear infinite;
}
/* the lit underside of the cloud, following the arch */
.footer-ground-arch::after {
  content: "";
  position: absolute;
  left: -12%;
  width: 124%;
  top: 26%;
  height: 156%;
  border-radius: 50%;
  box-shadow: 0 -2px 0 rgba(255, 196, 140, 0.55), 0 -14px 34px -8px rgba(232, 128, 62, 0.7);
  will-change: opacity;
  animation: rusnak-glow 9s ease-in-out infinite alternate;
}
/* the Rockies on the western horizon (irregular ridge, midpoint displacement, seed 1883) */
.footer-ground-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: #0b0806;
  clip-path: polygon(0.0% 58%, 0.8% 62%, 1.6% 63%, 2.3% 66%, 3.1% 66%, 3.9% 61%, 4.7% 59%, 5.5% 58%, 6.2% 59%, 7.0% 59%, 7.8% 55%, 8.6% 56%, 9.4% 60%, 10.2% 58%, 10.9% 60%, 11.7% 61%, 12.5% 59%, 13.3% 62%, 14.1% 61%, 14.8% 62%, 15.6% 57%, 16.4% 61%, 17.2% 60%, 18.0% 63%, 18.8% 69%, 19.5% 67%, 20.3% 68%, 21.1% 70%, 21.9% 67%, 22.7% 66%, 23.4% 62%, 24.2% 62%, 25.0% 57%, 25.8% 59%, 26.6% 60%, 27.3% 57%, 28.1% 58%, 28.9% 59%, 29.7% 55%, 30.5% 55%, 31.2% 54%, 32.0% 48%, 32.8% 49%, 33.6% 49%, 34.4% 49%, 35.2% 50%, 35.9% 46%, 36.7% 48%, 37.5% 46%, 38.3% 45%, 39.1% 41%, 39.8% 44%, 40.6% 46%, 41.4% 48%, 42.2% 49%, 43.0% 57%, 43.8% 61%, 44.5% 62%, 45.3% 65%, 46.1% 64%, 46.9% 64%, 47.7% 63%, 48.4% 62%, 49.2% 66%, 50.0% 71%, 50.8% 71%, 51.6% 73%, 52.3% 69%, 53.1% 70%, 53.9% 70%, 54.7% 76%, 55.5% 79%, 56.2% 79%, 57.0% 84%, 57.8% 82%, 58.6% 80%, 59.4% 77%, 60.2% 74%, 60.9% 77%, 61.7% 77%, 62.5% 77%, 63.3% 75%, 64.1% 75%, 64.8% 75%, 65.6% 77%, 66.4% 75%, 67.2% 73%, 68.0% 77%, 68.8% 75%, 69.5% 75%, 70.3% 77%, 71.1% 82%, 71.9% 84%, 72.7% 83%, 73.4% 86%, 74.2% 82%, 75.0% 79%, 75.8% 79%, 76.6% 80%, 77.3% 80%, 78.1% 82%, 78.9% 82%, 79.7% 76%, 80.5% 75%, 81.2% 79%, 82.0% 83%, 82.8% 85%, 83.6% 85%, 84.4% 82%, 85.2% 77%, 85.9% 72%, 86.7% 71%, 87.5% 72%, 88.3% 70%, 89.1% 64%, 89.8% 59%, 90.6% 59%, 91.4% 59%, 92.2% 61%, 93.0% 57%, 93.8% 55%, 94.5% 56%, 95.3% 53%, 96.1% 57%, 96.9% 55%, 97.7% 53%, 98.4% 52%, 99.2% 54%, 100.0% 50%, 100% 100%, 0 100%);
}
@keyframes rusnak-clouds {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* the layer repeats at 50%, so the loop is seamless */
}
@keyframes rusnak-glow {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}
/* js/site.js adds .is-live only while the footer is on screen */
.footer-ground:not(.is-live) .footer-ground-arch::before,
.footer-ground:not(.is-live) .footer-ground-arch::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .footer-ground-arch::before, .footer-ground-arch::after { animation: none; }
}
/* near full-bleed: thin 10px margin to the viewport edge, whatever the container does
   (--vw = the page's real width without the scrollbar, set by js/site.js) */
.footer-logo-block.footer-ground {
  height: 290px;
  width: calc(var(--vw, 100vw) - 20px);
  margin-left: calc(50% - var(--vw, 100vw) / 2 + 10px);
  border-radius: 16px;
}
/* the template left 112px of empty footer under the legal line; trimmed to breathing room */
.footer-block { padding-bottom: 28px; }
.footer-bottom-block { margin-top: 28px; }
@media screen and (max-width: 767px) {
  .footer-logo-block.footer-ground { height: 150px; width: calc(var(--vw, 100vw) - 12px);
    margin-left: calc(50% - var(--vw, 100vw) / 2 + 6px); border-radius: 12px; }
  .footer-block { padding-bottom: 20px; }
  .footer-bottom-block { margin-top: 20px; }
}

/* "Where we operate": the template's world map ("Serving Greater London") -> southern Alberta with
 * Calgary and area lit (_art/map.py; 2x file, drawn at the original's 193px height). */
.about-card._02 { background-image: url("/assets/rusnak-map-img.png"); }