.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0;
  color: var(--mutedStrong);
}

.footerMeta {
  display: grid;
  gap: 6px;
}

.footerMeta strong {
  color: var(--ink);
}

.footerLinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: flex-end;
}

.footerLinkedIn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
}

.footerLinkedInLogo {
  width: 75px;
  height: 75px;
  object-fit: contain;
}

@media (max-width: 980px) {
  .footer {
    flex-direction: column;
  }

  .footerLinks {
    justify-content: flex-start;
  }
}

.footerSection.brandGreenFooter {
  background: var(--primary-green);
}

.brandGreenFooter .footer,
.brandGreenFooter .footerMeta,
.brandGreenFooter .footerMeta strong,
.brandGreenFooter .footerLinks,
.brandGreenFooter .footerLinks a {
  color: var(--primary-white);
}

.brandGreenFooter .footerMeta span {
  color: color-mix(in srgb, var(--primary-white) 72%, transparent);
}

.brandGreenFooter .footerLinkedIn {
  position: relative;
}

.brandGreenFooter .footerLinkedInLogo {
  filter: brightness(0) invert(1);
}

@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .brandGreenFooter .footerLinkedInLogo {
    filter: none;
    opacity: 0;
  }

  .brandGreenFooter .footerLinkedIn::before {
    position: absolute;
    inset: 0;
    background: var(--primary-white);
    content: "";
    -webkit-mask: url("../images/LI-Logo.png") center / contain no-repeat;
    mask: url("../images/LI-Logo.png") center / contain no-repeat;
  }
}

.footerSection.brandGreenFooter {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  padding-top: clamp(76px, 9vw, 116px);
  padding-bottom: 32px;
  overflow: visible !important;
}

.footerSection.brandGreenFooter::before {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  display: block !important;
  width: 100vw;
  max-width: none;
  background: var(--primary-green) !important;
  content: "" !important;
  transform: translateX(-50%);
  pointer-events: none;
}

.brandGreenFooter .sectionInner {
  position: relative;
  z-index: 1;
  min-height: 100%;
}

.brandGreenFooter .footer {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(420px, 1.4fr);
  gap: clamp(56px, 9vw, 140px);
  align-items: start;
  min-height: 330px;
}

.footerBrandBlock {
  display: grid;
  align-content: start;
  gap: 24px;
  max-width: 430px;
}

.footerBrandLogo {
  position: relative;
  display: inline-flex;
  width: clamp(190px, 20vw, 260px);
  height: clamp(56px, 5.86vw, 76px);
  overflow: hidden;
}

.footerLogoImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 100px 0 var(--primary-white));
  transform: translateY(-100px);
}

.footerTagline {
  max-width: 420px;
  margin: 0;
  color: color-mix(in srgb, var(--primary-white) 82%, transparent);
}

.footerCompanyDetails {
  display: grid;
  gap: 7px;
  padding-top: 12px;
  color: var(--primary-white);
}

.footerCompanyDetails strong {
  color: var(--primary-white);
}

.footerCompanyDetails span {
  color: color-mix(in srgb, var(--primary-white) 68%, transparent);
}

.footerNavigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.footerNavColumn {
  display: grid;
  align-content: start;
  gap: 13px;
}

.footerNavTitle {
  margin: 0 0 8px;
  color: #84dcce;
}

.footerNavColumn a {
  width: fit-content;
  color: color-mix(in srgb, var(--primary-white) 82%, transparent);
  transition: color 160ms ease;
}

.footerNavColumn a:hover,
.footerNavColumn a:focus-visible {
  color: var(--primary-white);
  outline: none;
}

/* Keep the accessible LinkedIn text in the link, but present the official wordmark visually. */
.footerNavColumn a[href*="linkedin.com"] {
  display: inline-flex;
  align-items: center;
  width: 92px;
  height: 24px;
  overflow: hidden;
  color: transparent !important;
}

.footerNavColumn a[href*="linkedin.com"]::before {
  display: block;
  width: 92px;
  height: 24px;
  background: url("../images/LI-Logo.png") left center / contain no-repeat;
  content: "";
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 160ms ease;
}

@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .footerNavColumn a[href*="linkedin.com"]::before {
    background: var(--primary-white);
    filter: none;
    -webkit-mask: url("../images/LI-Logo.png") left center / contain no-repeat;
    mask: url("../images/LI-Logo.png") left center / contain no-repeat;
  }
}

.footerNavColumn a[href*="linkedin.com"]:hover::before,
.footerNavColumn a[href*="linkedin.com"]:focus-visible::before {
  opacity: 1;
}

.footerNavColumn a[href*="linkedin.com"]:focus-visible {
  border-radius: 3px;
  outline: 2px solid color-mix(in srgb, var(--primary-white) 72%, transparent);
  outline-offset: 4px;
}

.footerBottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-self: end;
  width: 100%;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--primary-white) 18%, transparent);
  color: color-mix(in srgb, var(--primary-white) 58%, transparent);
}

@media (max-width: 900px) {
  .brandGreenFooter .footer {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .footerNavigation {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .footerSection.brandGreenFooter {
    min-height: 560px;
    padding-top: 68px;
  }

  .footerNavigation {
    grid-template-columns: 1fr 1fr;
  }

  .footerNavColumn:first-child {
    grid-column: 1 / -1;
  }

  .footerBottom {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footerNavColumn a {
    transition: none;
  }

  .footerNavColumn a[href*="linkedin.com"]::before {
    transition: none;
  }
}

.footerNavTitle {
  color: var(--blue-600);
}
.brandGreenFooter,
.footerSection.brandGreenFooter {
  background: var(--primary-green) !important;
  color: var(--primary-white);
}
.brandGreenFooter .footerTagline,
.brandGreenFooter .footerCompanyDetails span,
.brandGreenFooter .footerNavColumn a,
.brandGreenFooter .footerBottom {
  color: color-mix(in srgb, var(--primary-white) 82%, transparent);
}
.brandGreenFooter .footerCompanyDetails strong,
.brandGreenFooter .footerNavColumn a:hover,
.brandGreenFooter .footerNavColumn a:focus-visible {
  color: var(--primary-white);
}
.brandGreenFooter .footerNavTitle {
  color: var(--aqua-500);
}
.brandGreenFooter .footerBottom {
  border-color: var(--green-400);
}