/* ============================================================
   BlueSystm — footer.css
   The site footer ("drifting trade band"), from Design's
   design_handoff_footer/footer.css.

   Linked by every page rather than pasted into each one, so the
   footer is literally the same rules everywhere — same reason the
   navbar is copied from home verbatim. Depends on tokens.css. No JS.

   EVERY rule is qualified with .site-footer, which the handoff's
   stylesheet does not do. Each page carries its own <style> block
   AFTER this file, and the pages do not agree about links: home and
   how-it-works set `a:not([class]) { color: var(--blue) }`, about and
   contact set `a { color: var(--blue) }`. A bare `.footer-col a` ties
   with the first of those on specificity and loses on source order, so
   the column links came out cobalt on two pages and grey on the other
   two. The extra class buys the margin that keeps the footer identical
   everywhere. Keep it when porting changes back from Design.
   ============================================================ */

.site-footer {
  background: var(--bg);
  padding: 56px 0 28px;
  margin-top: var(--sp-5);
}

/* ── Trade band ─────────────────────────────────────────── */
.site-footer .footer-band {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* The track holds the six cards TWICE and slides exactly half its own
   width, so the second set lands where the first started.

   Spacing is margin-right on the cards, not `gap`, and the track has no
   horizontal padding — both on purpose. Twelve cards separated by `gap`
   are 12 cards + 11 gaps wide, so half of that is 6 cards + 5.5 gaps:
   half a gap short of a full set, and the band visibly jumps every loop.
   A trailing margin on each card makes the unit (card + 16px) tile
   evenly, and the shift stays exact at any card width — which matters,
   because the breakpoints below resize them. */
.site-footer .footer-band-track {
  display: flex;
  width: max-content;
  animation: footerDrift 44s linear infinite;
  will-change: transform;
}
.site-footer .footer-band-track:hover { animation-play-state: paused; }

@keyframes footerDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly one card set + one gap */
}

.site-footer .footer-band-card {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 300px;
  height: 200px;
  margin-right: 16px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.site-footer .footer-band-card__label {
  position: absolute;
  left: 20px;
  bottom: 16px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #fff;
}

/* ── Body ───────────────────────────────────────────────── */
.site-footer .footer-body { padding: 0 40px; }

.site-footer .footer-lede {
  max-width: var(--container);
  margin: 48px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
/* The lede belongs to the band: it is the line that tells you what the strip
   above it is for. Home has neither — no band, and so no lede, and its footer
   opens straight on the divider. The other three keep both. */
.site-footer .footer-lede h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 800;
  letter-spacing: var(--ls-snug);
  color: var(--dark);
}
.site-footer .footer-lede a {
  font-size: var(--fs-body);
  font-weight: 600;
  white-space: nowrap;
  color: var(--blue);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.35);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
/* The colour is restated on :hover because about.html and contact.html
   carry a page-level `a:hover { color: var(--blue-hover) }`. Without it
   the same link darkens on two pages and not the other two. */
.site-footer .footer-lede a:hover { color: var(--blue); border-bottom-color: var(--blue); }

.site-footer .footer-nav {
  max-width: var(--container);
  margin: 44px auto 0;
  padding-top: 36px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 44px;
  align-items: start;
}
/* Those 44px are clearance from the band. Home has none — it runs a trades
   marquee higher up the page — so there the margin stacks onto the footer's
   own padding and leaves 100px of nothing above the divider. The padding is
   the whole gap there; the divider is the first thing in the footer. */
.site-footer--no-band .footer-nav { margin-top: 0; }

/* On home the divider follows the closing CTA directly, and three separate
   pieces of spacing were stacking between them: this footer's own top margin
   and padding, plus the FAQ section's bottom padding — 143px of blank page.
   The section's is zeroed where it is declared; these two are the rest.
   40px is what is left, which clears the card's --e3 shadow without leaving
   a hole. Pages with a band are untouched: the band wants the room. */
.site-footer--no-band {
  margin-top: 0;
  padding-top: 40px;
}

.site-footer .footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
/* the logo PNG is a square with transparent padding — the negative margins
   pull the visible wordmark back onto the baseline grid */
.site-footer .footer-brand img { height: 126px; width: auto; margin: -46px 0 -46px -14px; }
.site-footer .footer-brand p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--body);
  max-width: 280px;
}

.site-footer .footer-col { display: flex; flex-direction: column; gap: 13px; }
.site-footer .footer-col h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--body);
  margin-bottom: 4px;
}
.site-footer .footer-col a {
  font-size: var(--fs-small);
  color: var(--body);
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-footer .footer-col a:hover { color: var(--blue); }

.site-footer .footer-legal {
  max-width: var(--container);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.site-footer .footer-legal p { font-size: 13px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-footer .footer-nav { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .site-footer .footer-band-card { width: 220px; height: 150px; }
}
@media (max-width: 600px) {
  .site-footer .footer-body { padding: 0 var(--sp-5); }
  .site-footer .footer-nav { grid-template-columns: 1fr; gap: var(--sp-5); }
  .site-footer .footer-band-card { width: 180px; height: 124px; }
  .site-footer .footer-lede h3 { font-size: var(--fs-h4); }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-band-track { animation: none; }
}