/* ==========================================================================
   Footer — link columns, oversized gradient wordmark, legal line
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--c-night);
  color: #fff;
}

.footer-top {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  padding-top: var(--sec-pad);
}

/* 1920: brand 251px · gap 179px · columns separated by 120px */
@media (min-width: 1280px) {
  .footer-top {
    display: flex;
    align-items: flex-start;
    gap: clamp(2.5rem, 15.51vw - 118.9px, 179px);
  }
}

.footer-brand {
  max-width: 251px;
  flex: none;
}

.footer-brand p {
  margin-top: 14px;
  color: #dcebf5;
  font-size: clamp(1rem, 0.97rem + 0.129vw, 1.125rem);
  line-height: 1.55;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
}

@media (min-width: 768px) {
  .footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 36px clamp(2rem, 9.82vw - 68.6px, 7.5rem);
  }
}

.footer-col h3 {
  color: var(--c-gold-light);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.987rem + 0.324vw, 1.375rem);
  line-height: 1.2;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.footer-col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: clamp(1.0625rem, 0.987rem + 0.324vw, 1.375rem);
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.25s var(--ease-soft);
}

.footer-col a img {
  width: 22px;
  height: 22px;
  flex: none;
}

.footer-col a span {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease-out);
}

.footer-col a:hover {
  color: var(--c-gold-light);
}

.footer-col a:hover span {
  background-size: 100% 1px;
}

@media (max-width: 767.98px) {
  .footer-col a {
    white-space: normal;
    word-break: break-word;
  }
}

/* Oversized wordmark — outlined SVG that always spans the full content width.
   Measured on the 1920 frame (1420px wide): it overlaps the link columns by
   ~67px (keeps the 466px footer height at full width) and ends 21px above
   the divider. Both are expressed as fractions of
   the content width, so the proportions hold at every viewport. */
.footer-wordmark {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--container-w) * -0.0472);
  margin-bottom: calc(var(--container-w) * 0.0148);
  pointer-events: none;
  user-select: none;
}

.footer-wordmark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.1;
}

/* Fade the top of the letters into the background, as in the design */
.footer-wordmark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -7%;
  bottom: 0;
  background: linear-gradient(180deg, var(--c-night), rgba(30, 43, 42, 0));
}

.footer-bottom {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 30px;
  padding-bottom: calc(var(--sec-pad) + env(safe-area-inset-bottom, 0px));
  color: #dcebf5;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
}