/* 13 — Footer, option B (Figma desktop 729:3312; mobile 729:3455) */
.site-footer {
  background: var(--surface-white);
  font-family: var(--font);
  color: var(--text-ink);
}
.site-footer__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 48px 48px 0; /* no gap under the panel — the wordmark comes straight out of it */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.site-footer__panel {
  width: 100%;
  box-sizing: border-box;
  background: var(--brand-primary);
  border-radius: var(--radius-16);
  padding: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  overflow: hidden;
}

/* content row */
.site-footer__content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  overflow: hidden;
}
.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  white-space: nowrap;
}
.site-footer__nav li { display: block; line-height: 0; }
.site-footer__nav a {
  display: inline-block;
  font: 400 16px/20px var(--font);
  letter-spacing: -0.64px;
  color: var(--text-inverse);
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease;
}
.site-footer__nav a:hover { color: var(--brand-accent); }
.site-footer__nav a[aria-current="page"] { color: var(--brand-accent); }

.site-footer__nav--primary { flex: 1 0 0; min-width: 1px; overflow: hidden; }
.site-footer__nav--primary a {
  font: 500 32px/36px var(--font); /* H4 */
  letter-spacing: -0.96px;
}

.site-footer__col {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  overflow: hidden;
}
.site-footer__legal { opacity: .7; }
.site-footer__legal a {
  font: 400 14px/18px var(--font);
  letter-spacing: -0.56px;
}

.site-footer__desc {
  margin: 0;
  flex-shrink: 0;
  align-self: stretch;
  white-space: nowrap; /* the motto stays on one line */
  font: 500 20px/24px var(--font);
  letter-spacing: -0.6px;
  color: var(--text-inverse);
  opacity: .85;
}

/* bottom row of the panel: "Proudly backed by" scandiweb (847:4147); the wordmark moved out of the panel — see .site-footer__mark */
.site-footer__brand-row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 48px;
}
.site-footer__brand {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  transition: opacity .25s ease;
}
.site-footer__brand:hover { opacity: .85; }
.site-footer__brand-img {
  display: block;
  width: 640.29px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 213.43 / 36;
}
.site-footer__backed {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
}
.site-footer__backed-label {
  margin: 0;
  font: 400 14px/18px var(--font);
  letter-spacing: -0.56px;
  color: var(--text-inverse);
  opacity: .7;
  text-align: right;
  white-space: nowrap;
}
.site-footer__backed-logo {
  display: block;
  line-height: 0;
  transition: opacity .25s ease;
}
.site-footer__backed-logo:hover { opacity: .8; }
.site-footer__backed-logo img { display: block; width: 107.3px; height: 16.1px; } /* 0.8× of the Figma size */

/* bottom row — inside the panel now; the copyright sits on the panel's bottom line */
.site-footer__bottom {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: -24px;
}
.site-footer__note,
.site-footer__copy {
  margin: 0;
  font: 400 12px/16px var(--font);
  letter-spacing: -0.48px;
  color: var(--text-inverse);
  opacity: .55;
}
.site-footer__note { width: 535.5px; max-width: 100%; }
.site-footer__copy { white-space: nowrap; }

/* giant "LegacyBridge" wordmark (Enerblock-style). It is pinned to the bottom of the viewport (sticky) and sits BEHIND the
   footer panel; the panel scrolls up over it and simply uncovers it — the reverse of the card-overlap pattern. No motion of its own. */
.site-footer__inner { position: relative; gap: 0; } /* transparent: the panel itself is the only thing covering the wordmark */
.site-footer__panel { position: relative; z-index: 2; }
.site-footer__mark {
  position: sticky; /* its sticky range starts at the panel's top edge, so it is never seen above the panel */
  bottom: 0;
  z-index: 1;
  /* full bleed: the line runs from screen edge to screen edge, whatever the footer's padding */
  width: 100vw;
  margin: 32px 0 0 calc(50% - 50vw);
  padding: 0 0 24px;
  color: var(--brand-primary);
  line-height: 0;
}
/* the wordmark runs right to left as an endless line (four copies, the track shifts by exactly half its width) */
.site-footer__mark-run { overflow: hidden; width: 100%; }
.site-footer__mark-track { display: flex; width: max-content; animation: site-footer-run 48s linear infinite; }
.site-footer__mark-svg { display: block; flex: none; width: 88vw; height: auto; padding-right: 6vw; }
/* the line shifts by exactly two of its four copies (2 × the svg width above). In vw, not -50%:
   Chrome cannot run a box-size-relative translate on the compositor, and -50% repainted the
   wordmark on the main thread every frame the footer was on screen. Keep in step with the widths. */
@keyframes site-footer-run { from { transform: translateX(0); } to { transform: translateX(-176vw); } }
@keyframes site-footer-run-m { from { transform: translateX(0); } to { transform: translateX(-480vw); } }
/* the pair of calls to action sits over the line, dead centre — never stacked, the wordmark runs behind them */
.site-footer__mark-ctas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 12px)); z-index: 2; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.site-footer__mark-cta, .site-footer__mark-contact { line-height: 20px; }
/* desktop: ~1.67× the standard button (12/32 · 16/24 → 20/54 · 27/40), radius scaled to match */
@media (min-width: 768px) {
  .site-footer__mark-cta, .site-footer__mark-contact { padding: 20px 54px; border-radius: 20px; font-size: 27px; line-height: 40px; letter-spacing: -0.04em; }
}
/* on the dark wordmark the primary button would vanish: accent by default, white on hover */
.site-footer__mark-cta.btn-primary { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-primary); }
.site-footer__mark-cta.btn-primary:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-primary); }
@media (prefers-reduced-motion: reduce) { .site-footer__mark-track { animation: none; } }

/* desktop: one 4-column grid for both rows, so the copyright sits under column 2 and "Proudly backed by" in the bottom-right corner */
@media (min-width: 768px) {
  .site-footer__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 184px; /* +120px of air between the big links and the small print */
    align-items: start;
  }
  .site-footer__content, .site-footer__bottom { display: contents; }
  .site-footer__nav--one { grid-column: 1; grid-row: 1; }
  .site-footer__nav--two { grid-column: 2; grid-row: 1; }
  .site-footer__col { grid-column: 3; grid-row: 1; }
  .site-footer__desc { grid-column: 4; grid-row: 1; white-space: normal; }
  .site-footer__note { grid-column: 1; grid-row: 2; align-self: end; width: auto; }
  .site-footer__copy { grid-column: 2; grid-row: 2; align-self: end; }
  .site-footer__brand-row { grid-column: 4; grid-row: 2; width: auto; justify-self: end; align-self: end; }
}


/* tablet */
@media (max-width: 1100px) {
  .site-footer__content { flex-wrap: wrap; gap: 32px; }
  .site-footer__nav--primary { flex: 1 0 100%; }
  .site-footer__desc { width: 100%; }

}

/* ---------- mobile (375) ---------- */
@media (max-width: 767px) {
  /* Figma 729:3455 (mobile footer component): 24/16 outer, 32/24 panel, 32 gaps, H3 nav, full-width button, 49px wordmark */
  .site-footer__inner { padding: 24px 16px 0; gap: 16px; }
  .site-footer__panel { border-radius: var(--radius-12); padding: 32px 24px; gap: 32px; }

  /* the two big lists sit side by side, three links each; the rest stacks under them */
  /* Figma 1029:66874: two hugging columns pushed to the edges of the content width, 8px between links */
  .site-footer__content { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: 32px; row-gap: 32px; align-items: start; }
  .site-footer__nav--one { grid-column: 1; }
  .site-footer__nav--two { grid-column: 2; justify-self: end; }
  .site-footer__col { grid-column: 1 / -1; }
  .site-footer__desc { display: none; } /* no motto on mobile */
  .site-footer__nav--primary { flex: none; width: auto; gap: 8px; }
  .site-footer__nav--primary a { font: 500 24px/28px var(--font); letter-spacing: -0.48px; } /* H4 mobile */
  .site-footer__col { flex: none; width: auto; gap: 24px; }
  .site-footer__nav--secondary,
  .site-footer__legal { gap: 12px; white-space: normal; }
  .site-footer__desc { width: 100%; align-self: auto; }

  /* Figma 847:4198: logo fills the panel content width (295 at 375), aspect kept; backed block below, left-aligned, gap 12 */
  .site-footer__brand-row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .site-footer__backed { flex-direction: row; align-items: baseline; gap: 12px; } /* "Proudly backed by" + logo share one baseline */
  .site-footer__backed-label { line-height: 16px; }
  .site-footer__backed-logo { align-self: baseline; }
  .site-footer__backed-logo img { vertical-align: baseline; }
  .site-footer__desc { white-space: normal; }
  /* mobile: the wordmark is wider than the screen (like Enerblock's), centred, so the letters stay big */
  /* mobile: the wordmark fits the screen width edge to edge */
  .site-footer__mark { padding: 0 0 24px; margin-top: 8px; }
  .site-footer__mark-svg { width: 240vw; padding-right: 12vw; }
  .site-footer__mark-track { animation-name: site-footer-run-m; animation-duration: 32s; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 0; }
  .site-footer__copy { align-self: flex-start; text-align: left; }

  .site-footer__backed-label { text-align: left; }

  .site-footer__bottom { flex-direction: column; gap: 16px; }
  .site-footer__note { width: 100%; }
  .site-footer__copy { white-space: normal; }
}

/* column 4: the motto, then the capability pages (one link each from every page, for visitors and crawlers) */
.site-footer__col--platform .site-footer__nav--platform { white-space: normal; }
@media (min-width: 768px) {
  .site-footer__col.site-footer__col--platform { grid-column: 4; grid-row: 1; }
}
@media (max-width: 767px) {
  .site-footer__col--platform .site-footer__desc { display: none; }
}