/* Hero art: a one-line drawing of Canada under the search, a sunrise behind it, a truck crossing the country. */
.hx-frame .hx-ticks { order: 2; }
.hx-frame .hxf-nophoto { order: 3; display: block; width: 100%; margin-top: 0; }
.hxa2 { position: relative; width: min(100%, 1120px); margin: 40px auto 0; padding: 0; }
.hxa2-sun { position: absolute; inset: -40px -6% 0; pointer-events: none;
  background: radial-gradient(42% 70% at 74% 100%, rgba(255,206,160,.42) 0%, rgba(255,214,184,.16) 45%, rgba(255,214,184,0) 75%),
              radial-gradient(38% 60% at 26% 100%, rgba(170,200,255,.30) 0%, rgba(170,200,255,0) 72%); }
.hxa2-draw { position: relative; }
.hxa2 .sky { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.hxa2 .sky path, .hxa2 .sky circle { fill: none; stroke: #1A2442; stroke-opacity: .5; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .9s ease, stroke-opacity .9s ease; }
.hxa2 .sky-c.warm path, .hxa2 .sky-c.warm circle { stroke: var(--blue-d); stroke-opacity: .95; }
.hxa2 .sky path.go, .hxa2 .sky circle.go { transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1), stroke .9s ease, stroke-opacity .9s ease; }
.hxa2-ground { height: 1px; background: linear-gradient(90deg, rgba(26,36,66,0) 0%, rgba(26,36,66,.55) 10%, rgba(26,36,66,.55) 90%, rgba(26,36,66,0) 100%); }
.hxa2-truck { position: absolute; left: 0; bottom: 0; width: 3.6%; min-width: 22px; height: auto; overflow: visible; opacity: 0; transition: opacity .6s; will-change: transform; }
.hxa2-truck path, .hxa2-truck circle { fill: #F7F9FD; stroke: #1A2442; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.hxa2-truck .t-stripe { fill: none; stroke: var(--blue); stroke-width: 2; }
.hxa2-truck circle { fill: #fff; }
.hxa2.run .hxa2-truck { opacity: 1; }
@media (max-width: 760px) {
  .hxa2 { margin-top: 28px; }
  .hxa2 .sky path, .hxa2 .sky circle { stroke-width: 2.6; }
  .hxa2-truck path, .hxa2-truck circle { stroke-width: 1.6; }
}
/* the sunrise fades out on every side: no edges */
.hxa2-sun { inset: -70px -10% -36px; -webkit-mask-image: radial-gradient(60% 70% at 50% 70%, #000 35%, transparent 100%); mask-image: radial-gradient(60% 70% at 50% 70%, #000 35%, transparent 100%); }
.hx-frame:has(.hxa2) .hx-in { padding-bottom: clamp(28px, 3vw, 44px); }
.hxa2-sun { inset: -70px -10% 0; -webkit-mask-image: radial-gradient(58% 80% at 50% 78%, #000 30%, transparent 72%); mask-image: radial-gradient(58% 80% at 50% 78%, #000 30%, transparent 72%); }