.contact-hero {
  background: var(--off-white);
  padding: 96px 80px 64px;
}
.contact-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 300; color: var(--blue-deep);
  line-height: 1.15; margin-bottom: 16px;
}
.contact-hero h1 em { font-style: normal; font-weight: 300; color: var(--blue-mid); }
.contact-hero p {
  font-size: 16px; font-weight: 300; line-height: 1.8;
  color: var(--gray-mid); max-width: 480px;
}

.contact-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; background: var(--gray-light);
}
.contact-form-wrap {
  background: var(--white); padding: 64px 56px;
}
.contact-form-wrap h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 300;
  color: var(--blue-deep); margin-bottom: 32px;
}
.contact-info-wrap {
  background: var(--blue-deep); padding: 64px 56px;
}
.contact-info-wrap h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 300;
  color: var(--white); margin-bottom: 36px;
}
.contact-detail { margin-bottom: 32px; }
.contact-detail label {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); display: block; margin-bottom: 8px;
}
.contact-detail p {
  font-size: 15px; font-weight: 300;
  color: rgba(255,255,255,0.85); line-height: 1.6;
}
.contact-detail a {
  color: rgba(255,255,255,0.85); text-decoration: none;
  transition: color var(--transition);
}
.contact-detail a:hover { color: var(--white); }

.social-links { display: flex; gap: 8px; margin-top: 40px; }
.social-btn {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); text-decoration: none; font-size: 15px;
  transition: all var(--transition);
}
.social-btn:hover {
  background: rgba(255,255,255,0.1); color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.map-placeholder {
  height: 200px; background: rgba(255,255,255,0.06);
  margin-top: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px; color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em; text-transform: uppercase;
}

@media (max-width: 1024px) {
  .contact-hero { padding: 64px 40px; }
  .contact-body { grid-template-columns: 1fr; }
  .contact-form-wrap, .contact-info-wrap { padding: 48px 40px; }
}
@media (max-width: 768px) {
  .contact-hero { padding: 48px 24px; }
  .contact-form-wrap, .contact-info-wrap { padding: 40px 24px; }
}