/* =============================================
   CONTACT PAGE — Fully Responsive
   ============================================= */

.contact-hero {
  background:
    linear-gradient(160deg,rgba(6,18,12,0.76) 0%,rgba(22,45,27,0.82) 100%),
    url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1400&q=80') center/cover no-repeat;
}
.page-hero { padding: clamp(100px,14vw,140px) 0 clamp(48px,6vw,80px); }
.page-hero h1 { color: var(--white); margin-bottom: clamp(14px,2.5vw,20px); }
.page-hero p  { color: rgba(255,255,255,0.5); font-size: clamp(0.9rem,1.5vw,1.05rem); font-weight: 300; max-width: 520px; margin: 0 auto; line-height: 1.8; }

/* ---- CONTACT LAYOUT ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(20px,4vw,40px);
  align-items: start;
}

.contact-form-wrap {
  background: #0c1a11; border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px,4vw,44px);
  box-shadow: var(--shadow-sm);
}
.contact-form-wrap h3 { font-size: clamp(1.2rem,2.5vw,1.5rem); margin-bottom: clamp(18px,3vw,28px); color: var(--white); }
.required { color: #7f8f45; }

/* ---- SIDEBAR ---- */
.contact-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-top {
  background: #0a1710; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: clamp(16px,3vw,24px);
}
.sidebar-top p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.75; font-weight: 300; }

.sidebar-logo-wrap { display: inline-flex; align-items: center; margin-bottom: 10px; }
.sidebar-logo-wrap .site-logo { width: clamp(100px,16vw,152px); }

.contact-info-card {
  background: #0c1a11; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: clamp(14px,2.5vw,20px) clamp(16px,3vw,24px);
  display: flex; gap: 16px; align-items: flex-start;
  transition: var(--transition);
}
.contact-info-card:hover { border-color: rgba(47,107,74,0.32); box-shadow: var(--shadow-sm); }
.cic-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.cic-label { font-size: 0.7rem; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.cic-value { font-size: 0.9rem; font-weight: 600; color: #2f6b4a; }
.cic-desc  { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 8px; font-weight: 300; }
.cic-link  { font-size: 0.85rem; font-weight: 600; color: var(--orange-accent); transition: var(--transition); }
.cic-link:hover { color: #2f6b4a; }

/* ---- SUPPORT GRID ---- */
.support-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(10px,2vw,16px);
}
.support-item {
  background: #0c1a11; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: clamp(16px,2.5vw,24px) 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; transition: var(--transition);
}
.support-item:hover { border-color: rgba(47,107,74,0.35); background: rgba(47,107,74,0.08); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.si-icon { font-size: clamp(1.4rem,3vw,1.8rem); }
.support-item span { font-size: clamp(0.68rem,1.2vw,0.78rem); font-weight: 600; font-family: var(--font-condensed); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); line-height: 1.3; }

/* ---- BUILD CTA ---- */
.build-cta {
  background: #07130d; padding: clamp(48px,7vw,80px) 0;
  text-align: center; border-top: 1px solid var(--border);
}
.build-cta h2 { margin-bottom: 16px; }
.build-cta p  { color: var(--text-muted); max-width: 520px; margin: 0 auto; font-size: 1rem; font-weight: 300; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .support-grid   { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 600px) {
  .contact-form-wrap { padding: 22px 18px; }
  .support-grid { grid-template-columns: repeat(2,1fr); }
  .support-item:hover { transform: none; }
  .build-cta .btn { width: auto; }
}

@media (max-width: 380px) {
  .support-grid { grid-template-columns: repeat(2,1fr); }
}