/* ==========================================================================
   Tandem Contact Page Section-Specific Styles
   ========================================================================== */

/* Hero 3D Graphic styling */
.contact-hero-media {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
   width: 100%;
}

.contact-hero-media .has-glow {
   position: relative;
   width: 100%;
   max-width: 580px;
   display: flex;
   justify-content: center;
   align-items: center;
   --glow-size: 550px;
   --glow-blur: 80px;
   margin-top: calc(-1 * (var(--space-3xl) + var(--space-2xl)));
}

@media (max-width: 768px) {
   .contact-hero-media .has-glow {
      margin-top: 0px;
   }
}

.contact-hero-media img {
   width: 100%;
   height: auto;
   max-width: 500px;
   object-fit: contain;
   filter: drop-shadow(0 20px 50px rgba(var(--primary-purple-rgb), 0.25));
}

@media (max-width: 1280px) {
   .contact-hero-media img {
      max-width: 380px;
   }
}

@media (max-width: 768px) {
   .contact-hero-media img {
      max-width: 280px;
   }
}

/* --- 2. Category Cards Section --- */
.contact-cards-section {
   margin-top: calc(-1 * (var(--space-5xl) * 3 - var(--space-md)));
   /* pulled up more to overlap the envelope */
   position: relative;
   z-index: 4;
   /* Align with standard z-index scale (content layer) */
}

@media (max-width: 1280px) {
   .contact-cards-section {
      margin-top: calc(-1 * (var(--space-3xl) + var(--space-2xl)));
   }
}

@media (max-width: 768px) {
   .contact-cards-section {
      margin-top: var(--space-xl);
   }
}

/* --- 3. Form Section --- */
.contact-form-section .section-header {
   align-items: center;
   text-align: center;
   margin-bottom: var(--space-md);
   /* 2x smaller than var(--space-xl) */
}

.form-submit-wrapper {
   display: flex;
   justify-content: center;
   margin-top: var(--space-sm);
}