.contact-container{
  max-width: 64rem;
  margin: 15rem auto 15rem;
  padding: 0 1.25rem;
}
.contact-title{
  /* orange brand pop, Monument font already via .custom-font */
  color: #000000;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: .95;
  letter-spacing: .02em;
  margin: 0 0 1.25rem 0;
  text-transform: uppercase;
}
.contact-lead{
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: #333;
  max-width: 52rem;
  padding-bottom: 2rem;
}
.contact-subhead{
  font-family: 'MonumentExtendedUltrabold', sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  margin: 2.25rem 0 1rem;
  color: #000000;
}
.contact-social{
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.social-tile{
  width: 5rem; height: 5rem; display: inline-flex; align-items:center; justify-content:center;
  border: 1px solid #000000; color:#ffffff; text-decoration:none;
  background: #000000;
}
.social-tile:hover, .social-tile:focus{
  outline: none;
  border: 1px solid #0000005d;
  background-color: #2c2c2c6c;
}



.gradient-background2 {
  background: linear-gradient(300deg,#ffffff,#fff9f8,#ebbb84,#dd4b6b);
  background-size: 240% 240%;
  animation: gradient-animation 24s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}







@media (max-width: 640px){
  .contact-container{ margin-top: 10rem; }
  .contact-cta{ width: 100%; }
  .contact-cta-label, .contact-cta-arrow{ flex: 1 0 auto; justify-content: center; }
}










.contact-with-badge {
  position: relative;              /* allows absolute child positioning */
  padding-bottom: 6rem;            /* breathing room so badge doesn't overlap text on desktop */
}

.contact-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5rem;                     /* ~80px: tweak this to taste */
  height: auto;
  object-fit: contain;
  pointer-events: none;            /* so it doesn't block clicks on CTA if overlapping */
  opacity: 0.9;                    /* subtle, not screaming */
}

/* On small screens, make it smaller and pull it in so it doesn't get cut off */
@media (max-width: 640px){
  .contact-badge {
    width: 3.5rem;
    right: 1rem;
    bottom: 1rem;
    opacity: 0.8;
  }

  /* you already have a mobile rule, extend it here so content doesn't collide */
  .contact-with-badge {
    padding-bottom: 5rem;
  }
}