.studio-footer {
  --studio-footer-gutter: 24px;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(210px, 29vh, 300px) var(--studio-footer-gutter) var(--studio-footer-gutter);
  color: #f1f1f1;
  background: #09090c;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: clamp(16px, 1vw, 20px);
  line-height: 1.14;
}

.studio-footer *,
.studio-footer *::before,
.studio-footer *::after {
  box-sizing: border-box;
}

.studio-footer::before {
  position: absolute;
  inset: -14% -8%;
  z-index: 0;
  content: "";
  background: radial-gradient(
    ellipse 88% 58% at 50% 0%,
    rgb(var(--brand-purple-rgb) / 0.16) 0%,
    rgb(var(--brand-purple-rgb) / 0.075) 34%,
    rgb(var(--brand-purple-rgb) / 0.025) 54%,
    transparent 74%
  );
  filter: blur(28px);
  pointer-events: none;
}

.studio-footer__matrix {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}

.studio-footer > :not(.studio-footer__matrix) {
  position: relative;
  z-index: 2;
}

.studio-footer a {
  color: inherit;
  text-decoration: none;
}

.studio-footer a:focus-visible {
  outline: 1px solid #f1f1f1;
  outline-offset: 4px;
}

.studio-footer__upper {
  display: grid;
  grid-template-columns: 20% 34% 26% 20%;
  min-height: clamp(195px, 24vh, 250px);
}

.studio-footer__contact { grid-column: 1; }
.studio-footer__navigation { grid-column: 2; }
.studio-footer__note { grid-column: 4; }

.studio-footer__block,
.studio-footer__navigation {
  min-width: 0;
}

.studio-footer__label {
  margin: 0 0 8px;
  color: #8b8b8b;
  font-family: "Suisse Intl", Arial, sans-serif;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
}

.studio-footer__email {
  display: inline-block;
}

.studio-footer__socials,
.studio-footer__nav-list {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.studio-footer__socials {
  gap: 8px;
  margin-top: clamp(30px, 3.3vh, 38px);
}

.studio-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  width: min(100%, 430px);
  gap: 8px clamp(28px, 4vw, 80px);
  margin-top: clamp(58px, 7vh, 72px);
}

.studio-footer__nav-list a:nth-child(odd) { grid-column: 1; }
.studio-footer__nav-list a:nth-child(even) { grid-column: 2; }

.studio-footer__note-copy {
  max-width: 390px;
  margin: clamp(58px, 7vh, 72px) 0 0;
  text-wrap: pretty;
}

.studio-footer__lower {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  width: auto;
  margin: 0;
}

.studio-footer > .studio-footer__lower {
  position: absolute;
  right: var(--studio-footer-gutter);
  bottom: var(--studio-footer-gutter);
  left: var(--studio-footer-gutter);
}

.studio-footer__wordmark {
  display: block;
  width: 100%;
  align-self: end;
  margin: 0;
  line-height: 0;
}

.studio-footer__wordmark img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

.studio-footer__socials a,
.studio-footer__nav-list a,
.studio-footer__email {
  position: relative;
  width: fit-content;
}

.studio-footer__socials a::after,
.studio-footer__nav-list a::after,
.studio-footer__email::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 380ms cubic-bezier(.16, 1, .3, 1);
}

.studio-footer__socials a:is(:hover, :focus-visible)::after,
.studio-footer__nav-list a:is(:hover, :focus-visible)::after,
.studio-footer__email:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (min-width: 761px) and (max-height: 780px) {
  .studio-footer {
    padding-top: clamp(145px, 25vh, 205px);
  }

  .studio-footer__upper { min-height: 175px; }
  .studio-footer__nav-list,
  .studio-footer__note-copy { margin-top: 42px; }
}

@media (max-width: 900px) {
  .studio-footer {
    min-height: 0;
    padding-top: 112px;
  }

  .studio-footer__upper {
    grid-template-columns: 1fr 1fr;
    gap: 76px 32px;
    min-height: 0;
  }

  .studio-footer__contact,
  .studio-footer__navigation,
  .studio-footer__note { grid-column: auto; }

  .studio-footer__note { grid-column: 1 / -1; }

  .studio-footer__nav-list,
  .studio-footer__note-copy { margin-top: 38px; }

  .studio-footer__note-copy { max-width: 520px; }

  .studio-footer > .studio-footer__lower {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: 1fr;
    gap: 46px 24px;
    margin-top: 110px;
  }

  .studio-footer__wordmark {
    grid-column: 1 / -1;
  }

}

@media (max-width: 560px) {
  .studio-footer {
    padding: 88px 24px 20px;
    font-size: 17px;
  }

  .studio-footer__upper {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .studio-footer__note { grid-column: auto; }

  .studio-footer__nav-list {
    grid-template-columns: 1fr 1fr;
    gap: 9px 24px;
  }

  .studio-footer__lower {
    grid-template-columns: 1fr;
    margin-top: 92px;
  }

  .studio-footer__wordmark {
    grid-column: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  .studio-footer__socials a::after,
  .studio-footer__nav-list a::after,
  .studio-footer__email::after { transition: none; }
}
