/* ============================================================
   10 · FINAL CTA  (marquee bands + centered call to action)
   Used by the homepage AND every subpage, so it must not depend
   on any other section stylesheet. @keyframes mslide lives in
   css/04-utilities.css.
   ============================================================ */

/* ---- marquee bands ---- */
.marq{display:flex;overflow:hidden;white-space:nowrap;padding:clamp(16px,3.4vw,26px) 0}
.mtrack{display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  padding-right:clamp(18px,3vw,40px);flex:0 0 auto;animation:mslide 26s linear infinite}
.marq.rev .mtrack{animation-direction:reverse}
.marq .mtrack span{font-family:Archivo;font-weight:800;font-size:clamp(24px,4.6vw,54px);
  letter-spacing:-.025em;color:#fff}
.marq .mk{width:clamp(18px,2.4vw,30px);height:auto;color:#fff;flex:0 0 auto}
.cta .marq{background:var(--navy)}

/* ---- centered CTA panel (blue section) ---- */
.sec.html.cta{padding:0;overflow:hidden}
.cta-mid{text-align:center;padding:clamp(52px,7vw,84px) 0}

/* NOTE: these need .sec.html.cta in front — a bare `.cta-mid h2` loses to
   `.sec.html h2` (02-typography.css), whose `margin:22px 0 20px` would kill
   the auto side-margins and pin the heading to the left edge. */
.sec.html.cta .cta-mid h2{color:#fff;margin:20px auto;max-width:20ch}
.sec.html.cta .cta-mid p{color:#E4EBFF;margin:0 auto 0;max-width:56ch;font-size:16.5px}
.cta-mid .mono{color:#D6DEFF}
.cta-mid .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0 26px}
.cta-mid .contact{display:block;margin-top:4px}

@media(max-width:720px){
  .cta-mid .btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .mtrack{animation:none}
}