/* ============================================================
   SITE FOOTER
   The same two social buttons and privacy link close the home page and every
   case study, so the rules live here rather than in each page's own sheet.
   Everything is scoped under .site-foot: .left__footer is also the home
   page's left column, which keeps its own margin and must not be touched.
   ============================================================ */
.site-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  /* The band at the bottom of the window is fixed, so the page has to end
     above it — otherwise the last line sits under the frost. */
  padding: var(--section-gap, 100px) 40px calc(var(--page-fade, 0px) + 32px);
}

.site-foot .social {
  display: flex;
  gap: 10px;
}

/* .btn--outline's fill and edge on a square: the icon is the whole label,
   so there is nothing to set a width from. */
.site-foot .social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid #e0e0e0;
  /* Fallback radius — the @supports block below carries the real corner */
  border-radius: 12px;
  transition: background 0.3s ease;
}

.site-foot .social__btn:hover {
  background: #fafafa;
}

.site-foot .social__btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* After .social__btn's own radius, not before it: same specificity, so
   source order decides, and declared earlier only the radius would lose. */
@supports (corner-shape: squircle) {
  .site-foot .social__btn {
    border-radius: 22px;
    corner-shape: squircle;
  }
}

/* The gap above the link is the footer's own, not the column's */
.site-foot .left__footer {
  margin-top: 0;
  font-size: 0.8rem;
}

.site-foot .left__footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-foot .left__footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .site-foot {
    /* The page's own rhythm on top, a shorter gutter at the sides */
    padding: var(--section-gap, 64px) 20px calc(var(--page-fade, 0px) + 24px);
  }
}