/* ============================================================
   WHEELS ON FIRE — the CTA band, shared.

   "You ride. We got you all set up." closes ten pages, and it was written
   out five times: here in site.css and again inline in index, tours and
   bikes, which carry their own CSS. They had already drifted — different
   shades, different heading sizes — so a change to the band reached some
   pages and not others. This is the one copy.

   The motion is assets/parallax.js: data-parallax="12" on .cta-media and
   data-parallax-up="5" on .cta-inner. The two travel in opposite
   directions, so the words lift off the truck as you scroll rather than
   sitting flat on it — which is why the media carries a deep inset here,
   to cover that travel without showing its own edges.
   ============================================================ */
/* ---------- CTA ---------- */
.cta{position:relative;min-height:78svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
/* The truck is the picture, so the band is built to let it be seen: deeper
   inset to cover the longer parallax travel, the crop centred on the cab
   rather than pushed up off it, and a shade light enough at the top to read
   through. */
.cta-media{position:absolute;inset:-18% 0;z-index:0}
.cta-media img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
/* A flat 10% over the whole frame, and the rest on the type.
   Flat is the point: every localised veil we tried was visible, however gentle
   its falloff, because a darkening that covers part of a picture is a shape
   whether or not it has an edge. One even tint over the whole frame has no
   shape to find. The local contrast is then the headline's own shadow. */
.cta-shade{position:absolute;inset:0;z-index:1;background:rgba(12,10,9,.10)}
.cta-inner{position:relative;z-index:2;padding:100px var(--pad);
  text-shadow:0 1px 2px rgba(12,10,9,.55), 0 0 8px rgba(12,10,9,.45),
              0 0 22px rgba(12,10,9,.35), 0 0 60px rgba(12,10,9,.25)}
/* the button paints its own ground, so it does not want the shadow */
.cta-inner .btn{text-shadow:none}
/* a step under the display size: at full size the three lines covered the
   ford from bank to bank */
.cta h2{font-size:clamp(34px,5.6vw,92px)}
.cta h2 .l3{color:var(--cream)}
.cta h2 .dot{color:var(--red)}
.cta-actions{margin-top:34px;display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.cta-wa{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--cream-dim);border-bottom:1px solid var(--line-d);padding-bottom:3px}
.cta-wa:hover{color:var(--cream)}