.contact-page {
  padding: 5rem 0;
  background: var(--light);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
}

.contact-map {
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 400px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  display: block;
}

.contact-details h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2rem;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-row-icon {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.2rem;
  color: var(--primary);
  font-size: 1.5rem;
}

/* social icons keep the tinted box */
.contact-social a {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 103, 34, 0.1);
  color: var(--primary);
  border-radius: 12px;
  font-size: 1.1rem;
}

.contact-row h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.contact-row a:not(.btn):hover {
  color: var(--primary);
}

.contact-row .btn {
  margin-top: 0.75rem;
}

.contact-social {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-social a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  transition: var(--transition);
}

.contact-social a:hover {
  background: var(--primary);
  color: white;
}

@media (max-width: 768px) {
  .contact-page {
    padding: 3rem 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}