/* Back Rhodes Multimedia, back-road motif: Topo (chosen by Paxton, Sep 24, 2026).
   "Back roads dont have lines": no painted lines anywhere, no dashes, no center lines, no round caps.
   Arkansas hill country drawn as a trail map: fine contour lines behind the dark bands and page banners,
   one solid cream route (the logo's road color, without its paint) with waypoints, and Four Stops as a
   gravel road. Loads after css/site.css; every color comes from palette tokens. The contours are invented terrain: decoration, not a map of any real place.
   The logo is untouched. The highway motif it replaced is in archive/highway-motif-2026-09-24/.
   Generator and design sources: see NOTES.md round 8. */

:root {
  --topo-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='800' viewBox='0 0 1400 800' fill='none' stroke='%23000' stroke-linejoin='round'%3E%3Cpath stroke-opacity='.6' stroke-width='.8' d='M0 484l40-10 20-9 25-20 35-41 2 6-7 30-10 26-15 29-25 40-14 15-11 8-15 8-25 9m1400-91l-15 8-60 39-15 6-10 2-20-3-60-30-30-8-20-1-20 4-17 9-5 10 2 10 3 5 12 10 24 10 51 14 25 3 45 0 55 10 25-1 30-6m-1168-305l26 0 7 5-4 5-41 22-28 18-27 25-30 34 0-13 9-31 9-20 11-15 12-10 18-10zm-232 143l22-33 38-68 20-28 30-29 16-10 19-8 30-6 70-7 35-2 25 2 30 7 60 24 60 12 13 3 6 5-13 5-81 12-65 16-45 15-35 18-25 21-24 28-62 100-43 60-16 15-20 13-20 9-25 8m1400-182l-55 66-15 12-20 10-15 3-15 0-80-21-25-3-25 1-25 4-15 6-13 14-2 15 3 15 5 10 17 16 20 9 65 17 30 5 85 10 40-1 40-6m-1400-277l20-38 25-30 45-40 45-29 35-15 35-9 50-1 45 3 115 23 65 16 45 14 35 16 40 28 60 54 30 25 109 75 21 20 7 10 4 10 0 5-4 5-17 3-59-8-46-11-25-9-35-16-115-65-25-11-20-5-25-4-25-1-60 8-35 9-28 10-27 13-25 16-25 22-25 26-86 108-33 35-19 15-22 12-20 8-30 7m1400-304l-21 52-19 35-25 31-25 20-20 7-20 3-105-12-45 0-30 4-19 7-11 10-10 20-4 25 2 15 3 10 18 30 21 20 25 10 72 15 98 15 35-1 80-12m-1400-350l21-27 34-30 70-49 55-34 40-19 30-10 25-1 30 5 35 10 65 24 105 24 30 11 30 17 40 32 67 70 34 30 37 25 78 45 34 25 27 25 43 51 10 8 35-8 25-3 10-3 10-7 26-28 14-8 15-4 25-2 60 1 95 10 25-3 20-7 15-9 14-13 22-30 15-30 22-65 12-23m-1400 362l25-6 23-8 22-11 21-14 37-35 97-106 35-30 34-24 36-20 35-13 40-10 35-3 35 4 35 12 132 75 32 15 31 11 80 21 85 27 20 1 40-10 10 0 37 30 48 28 45 40 15 8 15 5 85 17 65 11 30 3 40-3 80-15m-1400-397l24-22 87-60 99-79 15-8 15-4 15-1 20 2 80 22 92 13 38 8 40 12 35 15 40 25 35 31 40 44 54 70 15 15 19 15 33 20 89 45 20 8 40 7 45 22 15 3 40-10 25-3 90 3 85 8 25-1 25-9 12-8 13-11 20-29 13-30 22-72 12-23 13-18m-1400 408l50-16 43-24 25-20 67-64 40-36 40-30 50-33 35-19 31-13 29-8 30-3 30 4 30 10 137 72 48 21 110 31 85 31 60 10 25 9 45 22 55 40 25 10 120 23 75 6 25-1 20-3 70-19m-1400-435l20-15 75-48 32-27 60-60 18-12 20-9 20-3 25 3 70 22 35 7 105 6 40 4 27 7 23 9 20 10 20 14 36 32 94 99 35 30 35 25 30 18 87 38 68 41 15 6 15 2 50 2 165 15 25-2 20-7 18-12 13-15 10-15 9-20 20-71 10-27 15-25 20-22m-1400 448l50-20 43-23 21-15 61-52 40-30 40-25 75-43 35-19 30-13 25-7 20-1 30 3 35 12 130 60 45 18 110 31 110 42 75 18 30 16 50 36 25 11 115 22 110 6 20-1 20-4 55-22m-1183-658l-22 7-25 15-20 19-48 54-22 22-25 19-55 36m257-172l23 6 60 22 35 8 45 4 130 0 34 5 26 9 20 11 18 15 122 126 38 34 37 28 40 25 120 70 35 13 50 10 135 14 30-3 20-9 15-13 15-25 9-25 18-65 16-35 22-29 30-24m-1400 522l40-29 79-50 61-43 35-21 35-15 130-49 35-9 35-3 45 4 45 10 130 48 145 43 65 25 70 37 50 20 45 23 30 9 80 14 90 4 60 10 20 1 20-2 20-6 15-7 20-14m-1183 106l18-2 22 2m-90-800l-28 25-50 60-20 20-24 20-45 31m303-156l42 16 40 9 40 3 135 0 35 4 25 9 20 11 20 16 121 127 39 35 35 26 40 26 120 69 35 14 45 9 125 12 25-3 20-8 15-14 13-21 29-90 17-35 25-30 36-29m-1400 567l15-10 34-38 23-20 93-63 40-23 40-17 135-42 35-8 35-2 50 3 45 9 130 47 170 50 45 19 60 36 20 10 75 27 30 9 60 10 105 5 65 14 20 2 35-3 20-6 20-9m-1233 77l28-14 30-5 35 4 43 15m-174-800l-46 65-21 25-27 25-35 26m335-141l30 10 35 6 40 1 130 0 35 6 25 8 20 12 21 17 118 125 33 30 33 26 35 23 130 76 39 15 41 9 115 7 25-4 20-11 11-11 12-20 28-80 18-35 15-20 14-15 42-34m-1400 630l25 11 25-1 53-16 12-6 13-9 6-10-1-10-8-6-35-8-13-6-9-10-1-15 7-15 20-20 34-25 52-32 35-18 40-13 130-35 30-5 30-1 50 3 45 9 155 54 160 43 35 14 60 36 20 9 105 35 50 9 105 4 25 5 60 16 60 4 13 3 12 6m-1271 29l16-17 15-11 25-8 25-2 25 2 25 6 75 30m39-800l26 5 30 2 150 1 35 6 25 9 20 12 24 20 116 125 30 28 30 23 35 23 135 78 35 13 40 8 35 2 70 1 20-4 20-11 11-11 10-15 32-80 20-35 27-31 50-42m-18-127l18 13m-1400 0l20 5 35-1 10 1 5 4 2 8-2 10-6 15-16 25-23 25-25 22m374 673l-32-10-72-31-65-24-10-6-20-18-10-6-55-14-9-6-3-5-1-10 5-10 8-10 24-20 41-25 40-19 40-12 120-28 30-5 25-1 45 2 50 9 205 67 45 11 85 18 30 12 77 41 108 37 40 7 85 2 35 4 70 22 50 12 13 6 14 10m-741-800l29 14 27 21 29 30 94 106 31 29 34 25 165 90 20 7 25 6 30 3 30 2 30-2 20-4 20-9 15-12 15-21 32-65 19-30 24-29 50-51 13-20 2-15-2-5-10-10-46-40-44-20m-652 800l-26-7-25-3-145-4-30-3-30-6-40-15-42-22-22-15-25-25-16-11-22-9-53-14-11-6-3-5 0-5 2-5 9-10 23-15 35-14 55-12 90-13 35-2 50 4 75 12 55 14 175 50 110 18 35 12 75 34 100 38 35 6 75 1 30 3 30 8 48 21m-621-800l23 16 25 24 112 130 28 25 27 20 33 19 135 70 45 11 60 5 20-1 20-5 15-7 15-12 19-25 45-80 21-28 43-47 11-20 1-10-4-10-11-15-20-20-20-14-54-26m-589 800l-27-12-35-7-35-3-115-4-34-4-31-8-31-12-26-15-11-10-19-25-22-15-26-11-55-16-15-7-5-6 5-10 15-10 25-9 50-8 80-5 30 2 50 8 75 6 40 6 70 15 135 37 115 16 35 11 145 62 25 8 30 5 65-1 30 3 25 5 31 14m-561-800l35 37 96 118 29 28 30 23 40 23 125 59 35 9 45 8 25 2 20-1 15-4 15-8 15-13 15-21 41-70 19-26 37-44 11-20 1-10-3-10-10-15-14-15-22-15-68-35m-532 800l-25-16-35-13-40-5-95-5-40-4-32-7-13-5-15-10-4-10 4-10 20-16 30-17 26-12 24-8 25-4 25-1 35 2 37 6 128 31 35 4 65 3 30 4 50 16 120 55 25 9 30 4 80-1 20 3 22 7m-973-165l26-4 30 1 13 3 11 5 6 5 1 5-4 5-12 3-15 1-20-3-25-6-12-5-4-5zm470-635l71 100 31 40 29 30 31 25 44 25 120 51 80 18 30 3 15-1 16-6 14-10 15-16 47-74 51-70 6-15-2-15-8-15-19-18-56-32-24-11-35-7-75 3-31-5m-350 800l-24-28-15-11-15-7-35-8-85-7-19-4-10-5-2-5 3-5 13-6 25-7 30-3 35 3 55 12 30 3 35 0 95-6 45 4 30 7 35 14 42 19 58 31 24 9m-294-800l4 20 8 20 33 60 34 45 16 15 20 16 25 14 26 10 34 7 60 4 20 4 25 8 45 22 15 5 15 2 20-4 15-10 15-16 20-26 36-51 15-25 4-20-4-15-11-13-15-11-25-13-25-10-20-4-15 0-55 12-20 0-15-4-15-8-49-34m-236 800l0-10 5-12 6-8 13-10 31-13 35-4 35 3 35 11 38 18 38 25m-209-800l-1 10 2 15 12 35 22 40 23 32 24 23 26 17 25 9 30 4 33-5 33-15 23-20 6-10 4-15-3-25-7-20-9-15-24-30-33-30m-186 800l7-15 17-15 24-10 30-3 25 3 30 9 25 12 28 19m178-735l14-4 15-1 20 4 15 6 10 5 12 10 6 10 1 10-3 15-7 15-14 21-25 31-25 23-10 6-15 3-17-4-17-15-11-20-3-25 5-25 15-30 15-20zm-333-65l-6 20 4 25 11 30 18 31 20 24 20 16 20 10 25 4 25-5 10-5 14-10 15-20 6-22 0-23-8-25-17-25-27-25m-130 800l8-10 14-10 16-5 19-2 20 2 16 5 19 9 18 11m231-705l16-4 12 4 8 10 0 15-10 19-15 16-15 8-10 1-5-4-5-10 1-20 9-22zm-317-95l-12 10-6 15 0 20 6 21 13 24 17 20 15 10 20 5 20-3 17-12 7-10 4-10 3-20-5-20-11-20-20-19-19-11m-49 800l13-4 10-1 26 5'/%3E%3Cpath stroke-width='1.3' d='M0 369l25-54 20-31 30-35 36-29 29-16 30-8 30-3 75 0 40 2 35 6 70 21 80 14 40 13 30 17 37 29 69 65 8 10 4 10-2 5-6 2-15 0-15-4-30-12-85-42-30-10-30-5-35-1-45 4-50 9-40 11-25 9-20 11-20 14-20 19-30 36-76 109-32 35-17 13-20 12-20 8-25 6m1400-240l-21 36-26 35-23 24-20 13-15 4-20 2-100-16-30 0-30 2-20 6-14 10-8 15-2 15 4 25 11 20 14 15 25 12 80 18 90 13 40 0 65-9m-1400-420l63-39 27-20 22-20 48-53 20-18 20-13 20-7 20-3 25 2 75 25 40 8 35 3 95 1 45 4 37 11 33 21 30 27 93 97 27 25 30 23 45 29 150 87 20 9 25 5 190 20 20-1 20-7 16-10 14-15 9-15 9-20 19-70 13-34 20-30 25-22m-1400 485l99-54 86-65 45-26 155-72 30-10 30-3 35 4 45 12 40 14 105 44 100 28 40 13 115 47 60 18 20 11 43 30 27 11 100 18 75 4 70 6 20-2 15-4 45-24m-806-674l26 5 20 6 20 10 19 14 31 30 105 115 30 27 30 22 160 92 35 14 35 7 40 2 50-1 25-5 20-11 12-12 10-15 34-75 22-35 27-30 55-51m-61-109l16 9 30 25 15 8m-1400 0l20 8 6 5 2 10-8 20-20 24m594 691l-34-2-125-1-30-3-30-6-36-13-73-35-25-15-25-20-16-10-15-6-45-11-14-8-2-5 1-10 12-15 28-20 45-22 45-13 110-21 30-4 25-1 45 3 55 10 225 68 120 24 30 11 80 38 105 38 35 5 75 1 35 4 25 6 45 18 44 15m-582-800l23 45 49 75 31 36 35 30 34 19 36 14 169 51 31 5 15-2 15-7 14-11 11-13 83-122 7-20-3-15-10-15-17-13-45-26-25-10-15-4-20-1-55 5-20 0-25-6-30-15m-288 800l-3-15 0-15 5-10 11-8 20-10 26-7 24-4 25-2 35 4 41 12 54 25 50 30'/%3E%3C/svg%3E");      /* seamless contour tile, 1400 x 800, every fifth line heavier */
  --topo-size: 1750px 1000px;     /* drawn at 1.25x */
  --route-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C70 11 110 5 197 5' fill='none' stroke='%23000' stroke-width='4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --route-banner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='80' viewBox='0 0 2400 80' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 19.5l16 0 16 .5 16 1 16 1.5 18 2.5 18 2.5 76 12.5 18 2.5 18 2.5 20 2 20 2 20 1 22 .5 16 0 18 0 74-1.5 38 0 20 0 22 .5 70 3 26 .5 16 .5 14 0 26-1 16-1 16-1.5 16-1.5 16-2 30-5 70-12 18-2.5 16-2.5 16-1.5 16-1.5 16-1 16 0 14 0 16 0 16 1 16 1 28 3 74 8 20 2 20 1.5 20 1 20 1 22 .5 26 .5m24 0l26 .5 22 .5 20 1 20 1 20 1.5 20 2 74 8 28 3 16 1 16 1 16 0 14 0 16 0 16-1 16-1.5 16-1.5 16-2.5 18-2.5 70-12 30-5 16-2 16-1.5 16-1.5 16-1 26-1 14 0 16 .5 26 .5 70 3 22 .5 20 0 38 0 74-1.5 18 0 16 0 22 .5 20 1 20 2 20 2 18 2.5 18 2.5 76 12.5 18 2.5 18 2.5 16 1.5 16 1 16 .5 16 0'/%3E%3Ccircle cx='1200' cy='40' r='8'/%3E%3Ccircle cx='1200' cy='40' r='3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* ---------- dark bands: contour lines (the diagonal road band and its center line are gone) ---------- */
.roadlines { background-image: var(--canopy, none); position: relative; isolation: isolate; }   /* keeps the timber canopy light */
.roadlines::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--on-dark); opacity: .08;
  -webkit-mask-image: var(--topo-map); mask-image: var(--topo-map);
  -webkit-mask-size: var(--topo-size); mask-size: var(--topo-size);
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
/* each band shows a different stretch of country */
.statement.roadlines::before { -webkit-mask-position: -610px -260px; mask-position: -610px -260px; }
.why.roadlines::before { -webkit-mask-position: -980px -540px; mask-position: -980px -540px; }
.audit-cost.roadlines::before { -webkit-mask-position: -300px -700px; mask-position: -300px -700px; }

/* ---------- inner page banners: contours, and the route with a waypoint for this page ---------- */
.page-hero { isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--on-dark); opacity: .09;
  /* the contours clear out behind the crumbs and the title and rise around the edges */
  -webkit-mask-image: var(--topo-map), radial-gradient(ellipse 46% 62% at 50% 36%, transparent 38%, #000 100%);
  mask-image: var(--topo-map), radial-gradient(ellipse 46% 62% at 50% 36%, transparent 38%, #000 100%);
  -webkit-mask-size: var(--topo-size), 100% 100%; mask-size: var(--topo-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-position: calc(50% - 140px) 62%, 0 0; mask-position: calc(50% - 140px) 62%, 0 0;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.page-hero::after {
  left: 0; right: 0; bottom: 30px; height: 80px; z-index: -1; pointer-events: none;
  background: var(--yellow);
  -webkit-mask-image: var(--route-banner); mask-image: var(--route-banner);
  -webkit-mask-size: 2400px 80px; mask-size: 2400px 80px;
  -webkit-mask-position: 50% 0; mask-position: 50% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* ---------- fixed backdrop (Paxton, Sep 29, after tektrendz.com): the contours hold still on screen and
   the page scrolls over them, so each dark band is a window onto one landscape. Masks have no
   "attachment: fixed", so the contour layer itself is position: fixed, and the band clips it
   (clip-path clips fixed descendants, overflow does not). Works on iPhone, where background-attachment
   fixed does not. Nothing moves on its own, so reduced motion needs no change. ---------- */
.roadlines, .page-hero { clip-path: inset(0); }
.roadlines::before, .page-hero::before { position: fixed; }

/* the route opens out from this page's waypoint as the page loads */
.js .page-hero::after { clip-path: inset(0 50% 0 50%); animation: topo-open 1.8s .25s cubic-bezier(.45,.1,.2,1) forwards; }
@keyframes topo-open { to { clip-path: inset(0 0 0 0); } }

/* ---------- home hero: "found." gets a short solid route stroke, one bend, drawn in ---------- */
.road-mark::after {
  left: -.03em; right: -.03em; bottom: -.1em; height: .26em;
  background: var(--yellow);
  -webkit-mask-image: var(--route-mark); mask-image: var(--route-mark);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.js .hero .road-mark::after {
  transform: none; clip-path: inset(0 100% 0 0);
  animation: topo-draw 1.1s 1.5s cubic-bezier(.45,.1,.2,1) forwards;
}
@keyframes topo-draw { to { clip-path: inset(0 0 0 0); } }

/* ---------- ticker: a waypoint between services (same spacing as the old dashes) ---------- */
.ticker li::after {
  width: 9px; height: 9px; margin: 0 48.5px; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 2px var(--on-dark-muted);   /* grey, not yellow: it sits beside the hero button (Sep 28) */
}

/* ---------- bullets: small solid marks ---------- */
.checks li::before, .prose ul li::before {
  left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
}
.prose ul li::before { top: 12px; }

/* ---------- who we build for: a waypoint where each group's rule starts ---------- */
.biz li::before {
  left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 2px var(--yellow);
}

/* ---------- free audit steps (CTA band): numbered waypoints joined by the route ---------- */
.cta-band ol li::before { border-radius: 50%; }
.cta-band ol li:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 45px; bottom: 7px; width: 2px; border-radius: 1px;
  background: var(--asphalt); opacity: .4;
}

/* ---------- Four Stops: waypoints on one winding route over the hills ---------- */
.route {
  --leg-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 56C10 57 17 71 31 70S50 46 64 39S88 34 100 34' fill='none' stroke='%23000' stroke-width='10' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --leg-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 34C13 34 21 21 35 21S57 55 74 62S94 62 100 62' fill='none' stroke='%23000' stroke-width='10' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --leg-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C11 62 18 51 29 51S45 73 59 73S84 41 100 40' fill='none' stroke='%23000' stroke-width='10' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --leg-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 66C34 66 62 50 100 50' fill='none' stroke='%23000' stroke-width='10' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --leg-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50C14 50 22 61 38 61S70 43 100 38' fill='none' stroke='%23000' stroke-width='10' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* each waypoint sits at its own height (px from the top of its stop), so the road climbs and drops */
.route .stop { --wy: 51px; }
.route .stop:nth-child(1) { --wy: 56px; }
.route .stop:nth-child(2) { --wy: 34px; }
.route .stop:nth-child(3) { --wy: 62px; }
.route .stop:nth-child(4) { --wy: 40px; }
.route .stop .mile {
  top: calc(var(--wy) - 23px); width: 46px; height: 46px; border-width: 2.5px; z-index: 1;
  font: 600 18px/1 var(--label); letter-spacing: 0;
}
.bg-paper .route .stop .mile { background: var(--paper); }

/* the strip of hill country the route crosses (this was the asphalt road) */
.route::before {
  left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge)); top: -80px; height: 270px; pointer-events: none;
  background: var(--ink); opacity: .075;
  -webkit-mask-image: var(--topo-map), linear-gradient(transparent, #000 32%, #000 62%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: var(--topo-map), linear-gradient(transparent, #000 32%, #000 62%, transparent), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-size: var(--topo-size), 100% 100%, 100% 100%; mask-size: var(--topo-size), 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat; mask-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-position: -420px -300px, 0 0, 0 0; mask-position: -420px -300px, 0 0, 0 0;
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
}
.js .route::before, .js .route.is-in::before { clip-path: none; transition: none; }

/* legs: each stop draws the road on to the next waypoint (a 100px tall box, stretched sideways;
   the stroke keeps its width) */
.route .stop::before, .route .stop:first-child::after {
  content: ""; position: absolute; top: 0; height: 100px; pointer-events: none;
  background: var(--asphalt);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.route .stop::before { left: 23px; width: calc(100% + 40px); -webkit-mask-image: var(--leg-2); mask-image: var(--leg-2); }   /* default leg, so an added stop never paints a solid block */
.route .stop:nth-child(1)::before { -webkit-mask-image: var(--leg-1); mask-image: var(--leg-1); }
.route .stop:nth-child(2)::before { -webkit-mask-image: var(--leg-2); mask-image: var(--leg-2); }
.route .stop:nth-child(3)::before { -webkit-mask-image: var(--leg-3); mask-image: var(--leg-3); }
/* the road comes in from the page edge and runs on past the last stop, fading at both ends */
.route .stop:first-child::after {
  left: calc(-1 * var(--edge)); width: calc(var(--edge) + 23px); top: calc(var(--wy) - 50px);
  -webkit-mask-image: var(--leg-in), linear-gradient(90deg, transparent 10%, #000 85%);
  mask-image: var(--leg-in), linear-gradient(90deg, transparent 10%, #000 85%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.route .stop:last-child::before {
  width: calc(100% - 23px + var(--edge)); top: calc(var(--wy) - 50px);
  -webkit-mask-image: var(--leg-out), linear-gradient(90deg, #000 35%, transparent 92%);
  mask-image: var(--leg-out), linear-gradient(90deg, #000 35%, transparent 92%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* drawn in order when the route scrolls into view, easing into each stop */
.js .route .stop::before, .js .route .stop:first-child::after {
  clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.45,.1,.4,1);
}
.js .route.is-in .stop::before, .js .route.is-in .stop:first-child::after { clip-path: inset(0 0 0 0); }
.js .route .stop:nth-child(1)::before { transition-delay: .35s; }
.js .route .stop:nth-child(2)::before { transition-delay: .95s; }
.js .route .stop:nth-child(3)::before { transition-delay: 1.55s; }
.js .route .stop:nth-child(4)::before { transition-delay: 2.15s; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  /* the stops wrap into rows here, so the waypoints stand on their own, as the road did before */
  .route::before, .route .stop::before, .route .stop:first-child::after { display: none; }
  .route .stop:nth-child(n) { --wy: 45px; }
}
@media (max-width: 760px) {
  :root { --topo-size: 1400px 800px; }
  .ticker li::after { margin: 0 36.5px; }
  .page-hero::after { bottom: 8px; }
}

/* ---------- reduced motion: everything drawn, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero .road-mark::after, .js .page-hero::after,
  .js .route .stop::before, .js .route .stop:first-child::after { clip-path: none !important; }
}

/* Paxton, Sep 24: no logo yellow as road lines. Roads and the "found." underline take the logo's road color
   (paper, the road body without its paint); yellow stays for buttons and small marks. */
.road-mark::after { background: var(--paper); }
.page-hero::after { background: var(--paper); opacity: .78; }

/* Four Stops: the route drawn as a gravel back road, wide enough to read as a road on the map */
.route .stop::before, .route .stop:first-child::after { background: color-mix(in srgb, var(--rule) 70%, var(--asphalt)); }
.bg-paper .route .stop::before, .bg-paper .route .stop:first-child::after { background: color-mix(in srgb, var(--rule) 55%, var(--asphalt)); }