/* ============================================================
   contact-redesign.css
   Supplements companies-redesign.css (loaded together on the Contact page)
   with the patterns Companies doesn't have: a centered text-only hero,
   a contact-details/photo grid and circular social icon buttons.
   Still scoped entirely within .t2a-cmp — reuses its variables, buttons,
   section/title/form primitives as-is.
   ============================================================ */

/* Centered hero variant (.t2a-cmp-hero--center) now lives in
   companies-redesign.css — shared with AboutUs and Pricing. */

/* ============================================================
   CONTACT DETAILS — info block + office photo
   ============================================================ */
.t2a-cmp .t2a-cmp-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
}
.t2a-cmp .t2a-cmp-contact-info { display: flex; flex-direction: column; gap: 26px; }
.t2a-cmp .t2a-cmp-contact-info__title { font-size: 40px; font-weight: 800; color: var(--cmp-ink); margin: 0; letter-spacing: -0.5px; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-contact-info__address { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.65; }
.t2a-cmp .t2a-cmp-contact-info__company { font-weight: 700; color: var(--cmp-ink); font-size: 18px; }
.t2a-cmp .t2a-cmp-contact-info__meta { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.t2a-cmp .t2a-cmp-contact-info__meta-label { color: #7b8aa5; }
.t2a-cmp .t2a-cmp-contact-info__meta-value { font-weight: 600; color: var(--cmp-ink); }
.t2a-cmp .t2a-cmp-contact-photo { border-radius: var(--cmp-radius-lg); overflow: hidden; box-shadow: 0 18px 48px rgba(22, 36, 61, 0.16); }
.t2a-cmp .t2a-cmp-contact-photo img { width: 100%; height: auto; }

/* ============================================================
   SOCIAL — circular icon buttons
   ============================================================ */
.t2a-cmp .t2a-cmp-social-grid { display: flex; gap: 22px; justify-content: center; }
.t2a-cmp .t2a-cmp-social-icon {
  width: 58px; height: 58px; border-radius: 50%; background: var(--cmp-bg-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(22, 36, 61, 0.10);
  transition: background 0.2s ease, transform 0.2s ease;
}
.t2a-cmp .t2a-cmp-social-icon svg path { fill: var(--cmp-blue); transition: fill 0.2s ease; }
.t2a-cmp .t2a-cmp-social-icon:hover { background: var(--cmp-blue); transform: translateY(-3px); }
.t2a-cmp .t2a-cmp-social-icon:hover svg path { fill: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .t2a-cmp .t2a-cmp-contact-grid { grid-template-columns: 1fr; gap: 36px; }
}