/* Site footer.
   Figma: desktop node 4051-1056 (1440), mobile node 4071-6749 (390). */

/* Mobile first — Figma 390. The running-dog video sits under a gradient that
   fades from a near-transparent dark at the top to solid black at the bottom
   bar. The still shown before the first frame — and where the video can't play
   at all — is the video's own `poster`, same as the hero. background-color is
   the last resort if the poster fails too. */
.footer {
  background-color: var(--_colors---footer-black);
  flex-flow: column;
  padding: 120rem 16rem 32rem;
  display: flex;
  position: relative;
}

.footer-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.footer-overlay {
  background-image: linear-gradient(to top, #000 0%, #22222233 100%);
  position: absolute;
  inset: 0;
}

.footer-content {
  grid-column-gap: 96rem;
  grid-row-gap: 96rem;
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.footer-copy {
  grid-column-gap: 48rem;
  grid-row-gap: 48rem;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.footer-heading {
  font-family: var(--_colors---family-headings);
  font-feature-settings: "ss01" on, "liga" off;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 22rem;
  font-weight: 400;
  line-height: 30rem;
}

.footer-cta {
  grid-column-gap: 24rem;
  grid-row-gap: 24rem;
  flex-flow: column;
  align-items: flex-start;
  padding-top: 8rem;
  display: flex;
}

/* max-width holds the copy to the three lines the design breaks it into. */
.footer-cta-text {
  max-width: 270rem;
  margin-bottom: 0;
  font-size: 14rem;
  line-height: 22rem;
}

/* Fixed px, like the header CTA — the button keeps its 44px height at every
   width instead of riding the fluid rem scale. */
.footer-cta-button {
  color: var(--_colors---mono-100);
  font-family: var(--_colors---family-headings);
  height: 44px;
  max-height: 44px;
  padding: 13px 41px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.footer-bottom {
  border-top: 1px solid #88889666;
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
  flex-flow: column;
  display: flex;
}

.footer-bottom-links {
  grid-column-gap: 24rem;
  grid-row-gap: 24rem;
  align-items: flex-end;
  padding-top: 20rem;
  padding-bottom: 12rem;
  display: flex;
}

/* The stylesheet pads every `a` by 8rem top and bottom — the bottom bar is
   spaced by the design's own values instead. */
.footer-link,
.footer-linkedin {
  padding-top: 0;
  padding-bottom: 0;
}

.footer-link {
  font-family: var(--_colors---family-headings);
  font-size: 14rem;
  font-weight: 500;
  line-height: 18rem;
}

.footer-linkedin {
  color: var(--_colors---mono-100);
  align-items: center;
  display: flex;
}

.footer-linkedin svg {
  width: 24px;
  height: 24px;
  display: block;
}

.footer-copyright {
  grid-column-gap: 16rem;
  grid-row-gap: 16rem;
  color: var(--_colors---mono-600);
  font-family: var(--_colors---family-headings);
  font-size: 12rem;
  font-weight: 500;
  line-height: 20rem;
  display: flex;
}

/* Figma has no tablet frame — the headline takes the same step the other
   sections take in this band so it doesn't read as undersized. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .footer-heading {
    font-size: 32rem;
    line-height: 38rem;
  }
}

/* Figma 1440: headline left, CTA column right, both bottom-aligned.
   Below 1440 the fluid rem is keyed to a 1040 reference instead of 1440, so the
   1440 values are carried at ~0.72 here and restored in the block below. That
   keeps the two columns from squeezing each other on a 1024-1366 screen, and
   lands on the design's own numbers as the 1440 breakpoint takes over. */
@media screen and (min-width: 992px) {
  .footer {
    padding: 188rem 58rem 69rem;
  }

  .footer-content {
    grid-column-gap: 188rem;
    grid-row-gap: 188rem;
  }

  .footer-copy {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .footer-heading {
    max-width: 583rem;
    font-size: 34rem;
    line-height: 40rem;
  }

  .footer-cta {
    flex: none;
    width: 340rem;
  }

  .footer-cta-button {
    padding-left: 25px;
    padding-right: 25px;
  }

  .footer-bottom {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 14rem;
  }

  .footer-bottom-links {
    grid-column-gap: 12rem;
    grid-row-gap: 12rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footer-linkedin svg {
    width: 16px;
    height: 16px;
  }

  /* Desktop reads "All rights reserved  © Pointer 2026" — the reverse of mobile. */
  .footer-copyright {
    grid-column-gap: 12rem;
    grid-row-gap: 12rem;
    flex-flow: row-reverse;
    font-size: 14rem;
  }
}

/* Figma 1440 one-to-one — from here the rem scale matches the design width.
   The footer also stays pinned while the section above scrolls over it, as before. */
@media screen and (min-width: 1440px) {
  .footer {
    padding: 260rem 80rem 96rem;
    position: sticky;
    bottom: 0;
  }

  .footer-content {
    grid-column-gap: 260rem;
    grid-row-gap: 260rem;
  }

  .footer-heading {
    max-width: 807rem;
    font-size: 48rem;
    line-height: 56rem;
  }

  .footer-cta {
    width: 420rem;
  }

  .footer-bottom {
    padding-top: 20rem;
  }

  .footer-bottom-links {
    grid-column-gap: 16rem;
    grid-row-gap: 16rem;
  }
}