/* =========================================
   SITE FOOTER
========================================= */

.site-footer {
  flex-shrink:
    0;

  margin-top:
    0;

  color:
    #e5e7eb;

  background-color:
    var(--navy);
}


.site-footer-inner {
  display:
    grid;

  grid-template-columns:
    2fr
    1fr
    1fr
    1fr;

  gap:
    36px;

  max-width:
    1200px;

  margin:
    0 auto;

  padding:
    42px 24px 34px;
}


/* =========================================
   BRAND
========================================= */

.site-footer-brand {
  max-width:
    340px;
}


.site-footer-logo {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    12px;

  color:
    #ffffff;

  text-decoration:
    none;
}


.site-footer-logo-wrap {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  flex-shrink:
    0;

  padding:
    4px;

  background-color:
    #ffffff;

  border-radius:
    9px;
}


.site-footer-logo-icon {
  display:
    block;

  width:
    28px;

  height:
    28px;

  object-fit:
    contain;
}


.site-footer-logo-text {
  color:
    #ffffff;

  font-size:
    1.35rem;

  font-weight:
    850;
}


.site-footer-logo-text span {
  color:
    var(--orange);
}


.site-footer-tagline {
  margin:
    0;

  color:
    #cbd5e1;

  font-size:
    0.9rem;

  line-height:
    1.6;
}


/* =========================================
   FOOTER COLUMNS
========================================= */

.site-footer-column {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    9px;
}


.site-footer-column h3 {
  margin:
    0 0 5px;

  color:
    #ffffff;

  font-size:
    0.9rem;

  font-weight:
    800;
}


.site-footer-column a {
  color:
    #cbd5e1;

  font-size:
    0.86rem;

  text-decoration:
    none;

  transition:
    color 0.15s ease;
}


.site-footer-column a:hover {
  color:
    var(--orange);
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.site-footer-bottom {
  padding:
    16px 24px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  text-align:
    center;
}


.site-footer-bottom p {
  margin:
    0;

  color:
    #94a3b8;

  font-size:
    0.78rem;
}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .site-footer {
    margin-top:
      32px;
  }


  .site-footer-inner {
    grid-template-columns:
      1fr
      1fr;

    gap:
      28px 24px;

    padding:
      32px 20px 28px;
  }


  .site-footer-brand {
    grid-column:
      1 / -1;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media screen and (max-width: 480px) {

  .site-footer-inner {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  .site-footer-brand {
    grid-column:
      auto;
  }

}