/* pages/contact.html + homepage #contact.contact-embed */

.contact-page .nav a[href="contact.html"],
.contact-page .nav a[href="/contact-us"] {
  color: #ececec;
}

.contact-layout-container {
  max-width: 72rem;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-header {
  width: 100%;
  margin: 0 0 2rem;
  box-sizing: border-box;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-header :is(h1, h2) {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3vw, 2rem);
  letter-spacing: -0.02em;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-header p {
  margin: 0 0 0.85rem;
  max-width: none;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-header p:last-of-type {
  margin-bottom: 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: start;
}

.contact-layout__aside > p:first-of-type {
  margin-top: 0;
}

.contact-layout__aside .contact-extra {
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-extra {
  margin-top: 2rem;
  margin-bottom: 0;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-form {
  position: relative;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 100%;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .form-field label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #ececec;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .required-mark {
  color: #89ae47;
  font-weight: 700;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .form-field input,
:is(.contact-page, .contact-embed, .blog-pitch-modal) .form-field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1a1a1a;
  color: #ececec;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.45;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .form-field textarea {
  resize: vertical;
  min-height: 8rem;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .form-field input:focus,
:is(.contact-page, .contact-embed, .blog-pitch-modal) .form-field textarea:focus {
  outline: none;
  border-color: rgba(137, 174, 71, 0.6);
  box-shadow: 0 0 0 2px rgba(137, 174, 71, 0.2);
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-form-note {
  margin: 0;
  font-size: 0.875rem;
  color: #9b9b9b;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-form-status {
  margin: 0;
  min-height: 1.45em;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #9b9b9b;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-form-status:empty {
  display: none;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-form-status--success {
  color: #b8d96a;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-form-status--error {
  color: #e8a598;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-form-honeypot {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-submit {
  align-self: flex-start;
  margin-top: 0.25rem;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-aside-paired {
  margin: 1.25rem 0 0;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-aside-paired
  + .contact-aside-paired {
  margin-top: 1rem;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-paired-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #acc853;
  font-size: 1.125rem;
  font-weight: 600;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-paired-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: #1a1a1a;
  color: #9b9b9b;
  flex-shrink: 0;
  line-height: 0;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-paired-link:hover .contact-paired-icon {
  color: #89ae47;
  border-color: rgba(137, 174, 71, 0.45);
  background: rgba(137, 174, 71, 0.08);
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-paired-link:focus-visible {
  outline: 2px solid #89ae47;
  outline-offset: 2px;
  border-radius: 4px;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-paired-icon svg {
  display: block;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-social li {
  margin: 0;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: #1a1a1a;
  color: #9b9b9b;
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-social-link:hover {
  color: #89ae47;
  border-color: rgba(137, 174, 71, 0.45);
  background: rgba(137, 174, 71, 0.08);
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-social-link:focus-visible {
  outline: 2px solid #89ae47;
  outline-offset: 2px;
}

:is(.contact-page, .contact-embed, .blog-pitch-modal) .contact-social-link svg {
  display: block;
}