/* Contact Us — measured off tprsglass.com/contact-us/ at a 1290px container.
   Every office row is 360px tall: copy beside a 310px map embed. */
.contact-intro {
  padding-block: 45px 72px;
  background: var(--color-surface);
}

.contact-intro__body {
  max-width: 950px;
  margin-inline: auto;
}

.contact-intro__body p {
  max-width: none;
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.647;
  text-align: justify;
}

.contact-offices {
  padding-block: 20px 140px;
  background: var(--color-surface);
}

.contact-row {
  display: grid;
  align-items: start;
  min-height: 360px;
}

/* heading | Pondicherry | map */
.contact-row--lead {
  grid-template-columns: 658px 329px minmax(0, 1fr);
}

/* Dharwad | map | Bangalore | map.
   The gutter matters here: without it the first map's right edge lands exactly
   on the second address block. Live leaves ~23px between them by insetting the
   map inside its column; a 24px column gap gets the same separation and keeps
   the maps at live's ~306px. */
.contact-row--pair {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
}

/* Chennai | map */
.contact-row--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.contact-lead__heading {
  margin-top: 19px;
  max-width: 559px;
  color: var(--color-text-dark);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.9375rem);
  font-weight: var(--fw-medium);
  line-height: 1.07;
}

.contact-lead__text {
  max-width: 559px;
  margin-top: 18px;
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.647;
}

.contact-lead__cta {
  margin-top: 45px;
}

/* office blocks */
.office {
  padding-top: 25px;
}

.office__place {
  max-width: none;
  color: var(--color-text-dark);
  font-size: 1.4163rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.6px;
}

.office__address,
.office__line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: none;
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.647;
}

.office__address {
  margin-top: 25px;
}

.office__line {
  align-items: center;
  margin-top: 10px;
}

.office__line a {
  color: var(--color-text);
}

.office__line a:hover,
.office__line a:focus-visible {
  color: var(--color-navy);
}

.office .field-icon {
  position: static;
  flex: 0 0 16px;
  margin-top: 5px;
  color: var(--color-navy);
}

.office__line .field-icon {
  margin-top: 0;
}

/* map embeds */
.office__map {
  align-self: start;
  margin-top: 50px;
  height: 310px;
  overflow: hidden;
}

.office__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* the three named contacts, then General Enquiries below them */
.contact-people {
  padding-block: 20px;
  background: var(--color-surface);
}

.contact-people__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 430px));
  gap: 0;
}

.contact-people__grid--general {
  margin-top: 50px;
}

.person__dept {
  max-width: 366px;
  color: var(--color-text-dark);
  font-size: 1.1875rem;
  font-weight: var(--fw-regular);
  line-height: 1.47;
}

.person__name {
  max-width: 366px;
  margin-bottom: 45px;
  color: var(--color-text-dark);
  font-size: 1.4163rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.contact-enquiry {
  padding-block: 100px 140px;
  background: var(--color-surface);
  scroll-margin-top: 90px;
}

/* the live fixed column widths only fit above the theme's 1279px breakpoint */
@media (max-width: 1279px) {
  .contact-row--lead,
  .contact-row--pair,
  .contact-row--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
  }

  .contact-row {
    margin-bottom: 40px;
  }

  .office__map {
    margin-top: 0;
  }

  .contact-people__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .contact-offices {
    padding-block: 20px 64px;
  }

  .contact-enquiry {
    padding-block: 48px 64px;
  }
}

@media (max-width: 767px) {
  .contact-intro {
    padding-block: 32px 48px;
  }
}