.brand-with-logo {
  gap: 0.85rem;
}

.brand-logo {
  display: block;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(241, 210, 124, 0.2);
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 6px 18px rgba(210, 163, 64, 0.2));
}

.footer-brand {
  display: flex !important;
  align-items: center;
  gap: 0.9rem;
}

.footer-brand > div {
  display: grid;
  gap: 0.35rem;
}

.footer-logo {
  display: block;
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
  border: 1px solid rgba(241, 210, 124, 0.18);
  border-radius: 1rem;
  object-fit: cover;
  filter: drop-shadow(0 8px 24px rgba(210, 163, 64, 0.18));
}

#work::before {
  display: block;
  width: min(82vw, 620px);
  aspect-ratio: 1;
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  border: 1px solid rgba(241, 210, 124, 0.22);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(210, 163, 64, 0.12), transparent 62%),
    url('/tay-logo.png') center / contain no-repeat,
    linear-gradient(145deg, rgba(17, 24, 39, 0.96), rgba(5, 7, 13, 0.98));
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(210, 163, 64, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.04);
  content: "";
}

@media (max-width: 720px) {
  .brand-logo {
    width: 2.55rem;
    height: 2.55rem;
  }

  .footer-logo {
    width: 3.75rem;
    height: 3.75rem;
  }

  #work::before {
    width: min(94vw, 470px);
    margin-bottom: 3.5rem;
    border-radius: 1.35rem;
  }
}