/* Contact section only. Add all #contact section changes here. */

#contact.section-contact {
  --section-name: "contact";
  position: relative;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  align-items: center;
  padding: clamp(48px, 6vw, 92px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(47, 91, 154, 0.09), transparent 32%),
    radial-gradient(circle at 14% 78%, rgba(47, 143, 91, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
}

#contact.section-contact .manifesto-container {
  position: relative;
  z-index: 2;
  width: min(94vw, 1500px);
}

#contact.section-contact .contact-abstract-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.88;
}

#contact.section-contact .contact-abstract-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

#contact.section-contact .contact-ribbon {
  fill: none;
  stroke-linecap: round;
  stroke-width: 62;
  opacity: 0.34;
}

#contact.section-contact .contact-ribbon-a {
  stroke: rgba(47, 143, 91, 0.22);
}

#contact.section-contact .contact-ribbon-b {
  stroke: rgba(47, 91, 154, 0.18);
  stroke-width: 84;
}

#contact.section-contact .contact-ribbon-c {
  stroke: rgba(39, 245, 223, 0.14);
  stroke-width: 44;
}

#contact.section-contact .contact-orbit {
  fill: none;
  stroke-width: 1.2;
  stroke-dasharray: 12 16;
}

#contact.section-contact .contact-orbit-a {
  stroke: rgba(47, 143, 91, 0.24);
}

#contact.section-contact .contact-orbit-b {
  stroke: rgba(47, 91, 154, 0.20);
}

#contact.section-contact .contact-layout {
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.6vw, 48px);
  align-items: start;
}

#contact.section-contact .contact-copy {
  max-width: 980px;
}

#contact.section-contact .section-kicker {
  color: #2f8f5b;
}

#contact.section-contact .contact-copy p:not(.section-kicker) {
  max-width: 920px;
  margin-top: 18px;
  color: #49647f;
  font-size: clamp(1.18rem, 1.65vw, 2rem);
  font-weight: 720;
  line-height: 1.38;
}

#contact.section-contact .contact-form {
  width: min(100%, 1180px);
  gap: 16px;
  border: 1.5px solid rgba(36, 79, 120, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 252, 0.92));
  box-shadow: 0 22px 54px rgba(24, 58, 96, 0.09);
  padding: clamp(22px, 2.2vw, 34px);
}

#contact.section-contact .contact-form label {
  gap: 9px;
}

#contact.section-contact .contact-form span {
  color: #102536;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#contact.section-contact .contact-form input,
#contact.section-contact .contact-form textarea {
  border: 1.5px solid rgba(36, 79, 120, 0.30);
  border-radius: 12px;
  background: #ffffff;
  color: #102536;
  box-shadow: inset 0 1px 0 rgba(16, 37, 54, 0.035);
}

#contact.section-contact .contact-form input:hover,
#contact.section-contact .contact-form textarea:hover {
  border-color: rgba(36, 79, 120, 0.46);
}

#contact.section-contact .contact-form input:focus,
#contact.section-contact .contact-form textarea:focus {
  border-color: rgba(47, 143, 91, 0.78);
  box-shadow: 0 0 0 4px rgba(47, 143, 91, 0.14);
}

#contact.section-contact .contact-form input {
  min-height: 52px;
}

#contact.section-contact .contact-form textarea {
  min-height: 210px;
}

#contact.section-contact .contact-form button {
  width: 100%;
  justify-self: stretch;
  border-color: #153b63;
  background: #153b63;
  color: #ffffff;
}

@media (max-width: 980px) {
  #contact.section-contact {
    min-height: auto;
  }

  #contact.section-contact .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #contact.section-contact .contact-form {
    grid-template-columns: 1fr;
  }
}