/* ============================================================
   CONTACT PAGE — page stylesheet
   Top section (menu) renders as a chrome-less strip, identical to
   other product-page top sections. The CONTACT content section is
   a regular solid-bordered card with a two-column block grid.
   ============================================================ */

/* ---- TOP SECTION (menu only) ----
   Strip the .sc-card chrome (border / background / shadow) so the
   menu reads as a transparent strip — same pattern used on
   sc1page / scqubepage / scoptimapage. */
.section--contactmenu {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.section--contactmenu::before,
.section--contactmenu::after {
  display: none !important;
}
.section--contactmenu .section__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---- CONTACT CONTENT CARD ---- */
.section--contact .section__inner {
  --contact-pad-x: 80px;
  padding: 96px var(--contact-pad-x) 120px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.contact__heading {
  margin: 0;
  line-height: 1.05;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 80px;
  align-items: start;
}

.contact__col {
  display: flex;
  flex-direction: column;
  gap: 80px; /* spacing between blocks within a column */
}

.contact__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.contact__block-heading {
  margin: 0;
  /* match the SC-1 machine-header caption ("ALD/PVD Cluster"):
     weight 800 + tight -1.5px tracking. Size (48px) and dark colour
     already matched the secondary-caption base. */
  font-weight: var(--sc-weight-bold);
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(
    --sc-ink
  ); /* override secondary's grey watermark so the
                           CALL / EMAIL / VISIT labels read as dark. */
}

.contact__desc {
  margin: 0;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-regular);
  line-height: 1.45;
  color: var(--sc-ink);
}

/* accent-coloured detail (phone / email) — brand orange, bold-ish */
.contact__accent {
  display: inline-block;
  margin: 0;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-md);
  font-weight: var(--sc-weight-semibold);
  color: var(--sc-accent);
  text-decoration: none;
  transition: opacity 0.234s ease;
}
.contact__accent:hover {
  opacity: 0.78;
}
/* extra separation before a second email purpose (e.g. support) */
.contact__desc--spaced {
  margin-top: 12px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1400px) {
  .section--contact .section__inner {
    --contact-pad-x: 60px;
    padding: 80px var(--contact-pad-x) 100px;
    gap: 48px;
  }
  .contact__grid {
    column-gap: 60px;
    row-gap: 60px;
  }
  .contact__col {
    gap: 64px;
  }
}

@media (max-width: 1100px) {
  .section--contact .section__inner {
    --contact-pad-x: 40px;
    padding: 64px var(--contact-pad-x) 80px;
    gap: 40px;
  }
  .contact__grid {
    grid-template-columns: 1fr; /* stack columns */
    column-gap: 0;
    row-gap: 56px;
  }
  .contact__col {
    gap: 56px;
  }
}

@media (max-width: 720px) {
  .section--contact .section__inner {
    --contact-pad-x: 20px;
    padding: 40px var(--contact-pad-x) 56px;
    gap: 32px;
  }
  .contact__col {
    gap: 40px;
  }
  .contact__desc,
  .contact__accent {
    font-size: var(--sc-text-base);
  }
}
/* ---- HQ map (embedded, framed to match the site's media) ---- */
.contact__map {
  box-sizing: border-box;
  width: 100%; /* full inner width, stays clear of the solid border */
  padding: 8px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, var(--sc-gray) 0 16px, transparent 16px 26px),
    linear-gradient(90deg, var(--sc-gray) 0 16px, transparent 16px 26px),
    linear-gradient(0deg, var(--sc-gray) 0 16px, transparent 16px 26px),
    linear-gradient(0deg, var(--sc-gray) 0 16px, transparent 16px 26px);
  background-size:
    26px 1px,
    26px 1px,
    1px 26px,
    1px 26px;
  background-position:
    left top,
    left bottom,
    left top,
    right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
/* Google Maps iframe — injected by contact-map.js after consent */
.contact__map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
  filter: grayscale(100%);
}

/* click-to-load consent placeholder (shown until the visitor opts in) */
.contact__map-consent {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
  padding: 24px;
  text-align: center;
  background: var(--sc-surface);
}
.contact__map-consent-text {
  margin: 0;
  max-width: 420px;
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-base);
  line-height: 1.5;
  color: var(--sc-gray);
}
.contact__map-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: center;
}
.contact__map-btn {
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-base);
  font-weight: var(--sc-weight-semibold);
  color: var(--sc-white);
  background: var(--sc-accent);
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 10px 22px;
  cursor: pointer;
  transition: opacity 0.234s ease;
}
.contact__map-btn:hover {
  opacity: 0.85;
}
.contact__map-btn:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .contact__map iframe,
  .contact__map-consent {
    height: 300px;
  }
}