/* ==========================================================================
   pages/contact.css — Contact page only
   Uses standard container + section-card system
   ========================================================================== */

.contact-page{
  padding-bottom: 72px;
}

/* Contact cards layout */
.contact-grid{
  display: grid;
  gap: 16px;
  margin-top: 12px;

  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* 3-up on large screens */
.contact-grid > *{
  grid-column: span 4;
}

/* 2-up on tablets */
@media (max-width: 980px){
  .contact-grid > *{
    grid-column: span 6;
  }
}

/* 1-up on small screens */
@media (max-width: 640px){
  .contact-grid{
    gap: 14px;
  }

  .contact-grid > *{
    grid-column: span 12;
  }
}

/* Card text rhythm */
.contact-title{
  margin: 0 0 6px;
}

.contact-text{
  margin: 0;
  color: rgba(170,180,195,.9);
}

/* Actions inside cards */
.contact-actions{
  margin-top: 10px;
}

/* Footer note under cards */
.contact-note{
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;

  color: rgba(170,180,195,.9);
  font-size: 14px;
}

.contact-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(215,188,161,.65);
}