.page--contact {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-body);
  font-stretch: var(--type-stretch-body);
  line-height: var(--type-line-body);
  letter-spacing: 0;
  --contact-gutter: var(--space-page-gutter);
  --contact-column-gap: var(--space-case-study-column-gap);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.page--contact a {
  color: inherit;
  text-decoration: none;
}

.page--contact img,
.page--contact video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--soft);
}

.page--contact button,
.page--contact input,
.page--contact textarea,
.page--contact select {
  font: inherit;
}

.page--contact h1,
.page--contact h2,
.page--contact h3,
.page--contact p {
  margin: 0;
}

.page--contact .page {
  overflow: visible;
}

.page--contact .page-hero--contact-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  padding: var(--pad) var(--contact-gutter) 72px;
}

.page--contact .page-hero--contact-template > .page-hero__copy {
  width: 100%;
  height: auto;
  padding: 0;
}

.page--contact .page-hero--contact-template > .page-hero__media {
  display: none;
}

.page--contact .page-hero__lead {
  display: grid;
  align-content: start;
  gap: 22px;
}

.page--contact .page-hero__identity {
  display: grid;
  gap: 6px;
}

.page--contact .page-hero__title-label {
  max-width: var(--measure-editorial-heading);
  color: var(--ink);
  font-size: var(--type-size-section-heading);
  font-family: var(--font-family-display);
  font-weight: var(--type-weight-wordmark);
  font-stretch: var(--type-stretch-wordmark);
  line-height: var(--type-line-wordmark);
  text-transform: uppercase;
}

.contact-page-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--contact-column-gap);
  align-items: start;
  padding: 0 var(--contact-gutter) var(--space-section-pad-y);
}

.contact-page-intro {
  display: grid;
  align-content: start;
  gap: 40px;
  min-width: 0;
}

.contact-page-intro h2 {
  max-width: 18ch;
  margin: 0;
  font-size: var(--type-size-display-wide);
  font-family: var(--font-family-display);
  font-weight: var(--type-weight-display);
  font-stretch: var(--type-stretch-display);
  line-height: var(--type-line-display);
  text-transform: uppercase;
}

.contact-page-intro__content > p {
  max-width: 44rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--type-size-copy-lead);
  line-height: 1.35;
}

.contact-page-details {
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--ink);
  font-size: var(--type-size-copy-support);
  line-height: 1.35;
}

.contact-page-details a {
  width: fit-content;
  color: var(--ink);
}

.contact-page-details a:hover {
  color: var(--muted);
}

.contact-page-address {
  max-width: 22rem;
  margin: 22px 0 0;
  color: var(--muted);
}

.contact-page-meta {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--tiny);
  font-family: var(--font-family-ui);
  font-weight: var(--type-weight-meta);
  line-height: 1.35;
  text-transform: uppercase;
}

.contact-page-form {
  width: 100%;
  min-width: 0;
}

.contact-map-section {
  padding: 132px 0 0;
}

.contact-map {
  position: relative;
  width: 100%;
  height: clamp(340px, 48vw, 620px);
  overflow: hidden;
  background: var(--soft);
  border-top: 1px solid var(--line);
}

.contact-map__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: var(--contact-gutter);
  color: var(--ink);
  background: linear-gradient(135deg, rgba(245, 243, 239, 0.96), rgba(230, 226, 218, 0.86));
}

.contact-map.is-loaded .contact-map__fallback {
  display: none;
}

.contact-map__fallback p {
  max-width: 24rem;
  color: var(--muted);
  font-size: var(--type-size-copy-lead);
}

.contact-map__fallback a,
.contact-map__directions {
  width: fit-content;
  color: var(--ink);
  font-size: var(--type-size-link-utility);
  font-family: var(--font-family-ui);
  font-weight: var(--type-weight-meta);
  line-height: 1.35;
  text-transform: uppercase;
}

.contact-map__fallback a:hover,
.contact-map__directions:hover {
  color: var(--muted);
}

.contact-map__directions {
  position: absolute;
  right: var(--contact-gutter);
  bottom: var(--contact-gutter);
  z-index: 1;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  background: rgba(245, 243, 239, 0.86);
  backdrop-filter: blur(14px);
}

.contact-map__directions:hover {
  background: var(--ink);
  color: var(--paper);
}

.contact-map .gm-style {
  font-family: var(--font-family-ui);
}

.contact-map-window {
  display: grid;
  gap: 7px;
  min-width: 190px;
  color: var(--ink);
  font-family: var(--font-family-ui);
  font-size: var(--type-size-copy-support);
  line-height: 1.35;
}

.contact-map-window strong {
  font-family: var(--font-family-display);
  font-weight: var(--type-weight-title);
  text-transform: uppercase;
}

.contact-map-window span {
  color: var(--muted);
}

.contact-map-window a {
  width: fit-content;
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--type-size-link-utility);
  text-transform: uppercase;
}

.contact-map-window a:hover {
  color: var(--muted);
}

.contact-map .gm-style-cc,
.contact-map .gmnoprint {
  filter: grayscale(1);
}

@media (max-width: 1080px) {
  .contact-page-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .page--contact .page-hero--contact-template {
    grid-template-columns: 1fr;
    padding-bottom: 54px;
  }

  .contact-page-intro h2 {
    max-width: none;
  }

  .contact-map {
    height: clamp(300px, 72vw, 520px);
  }

  .contact-map__directions {
    right: var(--contact-gutter);
    bottom: 22px;
  }
}