/* Match About's deep teal, orange headings, and cool white text. */
.contact-page {
  --paper: #113c42;
  --ink: #f3f4f5;
  --muted: #68aca3;
  --line: #68aca340;
  --orange: #fd5911;
  color-scheme: dark;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.contact-page .brand img { filter: none; }

.contact-main {
  flex: 1;
  min-height: 85svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 5vw, 64px);
  padding: 142px 24px 54px;
}

.contact-main .footer-invitation { margin-bottom: 0; }

.contact-main h1 {
  color: var(--orange);
  font-size: clamp(64px, 10vw, 144px);
  line-height: 1.1;
  margin-bottom: 30px;
  text-wrap: balance;
}

.contact-main .footer-invitation > .email-copy {
  gap: 24px;
  padding-bottom: 8px;
  color: var(--muted);
  font-family: Oswald, sans-serif;
  font-size: clamp(17px, 2.3vw, 28px);
  font-weight: 400;
  letter-spacing: .25px;
  line-height: 1.5;
}

.contact-companies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: min(100%, 820px);
}

.contact-company {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 8px 0;
}

.contact-company-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 72px;
}

.contact-company-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.contact-company-logo .contact-logo-agency { width: 36px; }
.contact-company-logo .contact-wordmark-agency { width: 140px; }
.contact-company-logo .contact-logo-kwib { width: 132px; }
.contact-company-logo .contact-logo-linkup { width: 72px; }
.contact-company-logo .contact-wordmark-linkup { width: 100px; }

.contact-company-url {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 5px;
  font-family: Oswald, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .2px;
}

.contact-company-url > span { transition: transform .2s; }
.contact-company:hover .contact-company-url > span,
.contact-company:focus-visible .contact-company-url > span { transform: translate(2px, -2px); }
.contact-company:active .contact-company-url > span { transform: none; }

.contact-page .site-footer { padding-top: 24px; }
.contact-page .site-footer::before { display: none; }
.contact-page .footer-bottom { margin-top: 0; border-top: 0; }

@media (max-width: 600px) {
  .contact-main { min-height: auto; gap: 52px; padding: 140px 24px 56px; }
  .contact-main h1 { font-size: clamp(64px, 12vw, 80px); margin-bottom: 22px; }
  .contact-main .footer-invitation > .email-copy { gap: 12px; font-size: clamp(18px, 5.5vw, 22px); }
  .contact-companies { grid-template-columns: 1fr; gap: 28px; width: min(100%, 300px); }
  .contact-company { gap: 12px; }
  .contact-company-logo { height: 60px; }
  .contact-company-logo .contact-logo-agency { width: 32px; }
  .contact-company-logo .contact-wordmark-agency { width: 126px; }
  .contact-company-logo .contact-logo-kwib { width: 118px; }
  .contact-company-logo .contact-logo-linkup { width: 60px; }
  .contact-company-logo .contact-wordmark-linkup { width: 92px; }
  .contact-company-url { font-size: 17px; }
}