.brand-mark {
  background: transparent;
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.monogram {
  width: min(260px, 72%);
  height: auto;
  opacity: 0.14;
}

.monogram img,
.sub-monogram img {
  width: 100%;
  height: auto;
}

.monogram img {
  opacity: 0.16;
}

/* Top-page monogram: ripple first, then a restrained blue-silver reveal. */
.hero-monogram {
  top: 58px;
  left: 70%;
  width: min(213px, 62%);
  aspect-ratio: 1;
  opacity: 1;
  animation: monogram-silver-in 1.45s ease-out 5s both;
}

.hero-monogram img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-monogram-base {
  opacity: 0.13 !important;
}

.hero-monogram-gold {
  opacity: 0;
  filter: blur(1.6px) brightness(.64) saturate(.5);
  animation: blue-silver-focus 2.8s cubic-bezier(.22, .7, .2, 1) 5.35s forwards;
}

@keyframes monogram-silver-in {
  from {
    opacity: 0;
    transform: translate(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
}

@keyframes blue-silver-focus {
  0% {
    opacity: .05;
    filter: blur(1.6px) brightness(.64) saturate(.5) drop-shadow(0 2px 6px rgba(8,25,39,.2));
  }
  45% {
    opacity: .35;
    filter: blur(.65px) brightness(.76) saturate(.63) drop-shadow(0 2px 7px rgba(8,25,39,.3)) drop-shadow(0 0 5px rgba(171,192,203,.06));
  }
  100% {
    opacity: .74;
    filter: blur(0) brightness(.91) contrast(1.03) saturate(.76) drop-shadow(0 2px 8px rgba(8,25,39,.4)) drop-shadow(0 0 8px rgba(183,203,213,.09));
  }
}

.sub-monogram img {
  opacity: 0.28;
}

.sub-monogram {
  width: 190px;
  height: auto;
}

.footer-brand .brand-mark {
  background: transparent;
}

.nowrap-title {
  white-space: nowrap;
}

@media (width <= 900px) {
  .hero-monogram {
    top: 50px;
    left: 68%;
  }
}

@media (width <= 600px) {
  .hero-monogram {
    top: 44px;
    left: 65%;
    width: min(199px, 60%);
  }

  .strength-title h2 .nowrap-title {
    font-size: 28px;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-monogram {
    animation: none;
  }

  .hero-monogram-gold {
    animation: none;
    opacity: .74;
    filter: brightness(.91) contrast(1.03) saturate(.76) drop-shadow(0 2px 8px rgba(8,25,39,.4));
  }
}