/* Home contact presentation, scoped to the only real contact form on Services. */
.contact-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  text-align: left;
  background: none;
  color: #071827;
  border: 0;
  border-bottom: 1px solid #071827;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 30px);
  padding: 0 0 13px;
  width: min(100%, 850px);
  max-width: 100%;
  transition: color .2s ease
}

.contact-toggle:hover,
.contact-toggle:focus-visible {
  color: #285875 !important;
  outline-offset: 6px
}

.contact-plus {
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transition: transform .35s ease
}

.contact-toggle[aria-expanded="true"] .contact-plus {
  transform: rotate(45deg)
}

.contact-panel {
  width: min(100%, 850px);
  padding: 34px 0 45px;
  animation: contactReveal .4s ease both
}

.contact-panel[hidden] {
  display: none !important
}

@keyframes contactReveal {
  from {
    opacity: 0;
    transform: translateY(-14px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.contact-intro {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 35px;
  max-width: 520px;
  color: #28495b
}

#contact-form {
  display: grid;
  gap: 29px
}

.contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px
}

#contact-form label,
#contact-form legend {
  font-size: 12px;
  letter-spacing: .045em;
  font-weight: 650
}

#contact-form input:not([type="radio"]),
#contact-form textarea {
  display: block;
  width: 100%;
  background: transparent;
  color: #061c2b;
  border: 0;
  border-bottom: 1px solid #426a7e;
  border-radius: 0;
  padding: 14px 0 13px;
  font: 400 16px/1.5 inherit;
  outline: none;
  resize: vertical;
  transition: border-color .2s
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: #41677b;
  opacity: .85
}

#contact-form input:focus-visible,
#contact-form textarea:focus-visible {
  border-color: #071827;
  border-bottom-width: 2px
}

.contact-types {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.contact-types legend {
  margin-bottom: 15px
}

.contact-types label {
  cursor: pointer;
  position: relative
}

.contact-types input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px
}

.contact-types span {
  display: block;
  border: 1px solid #4b829b;
  padding: 13px 16px;
  transition: background .2s, color .2s
}

.contact-types input:checked+span {
  background: #061c2b;
  color: #e9f5fb;
  border-color: #061c2b
}

.contact-types input:focus-visible+span {
  outline: 2px solid #071827;
  outline-offset: 3px
}

.contact-message {
  display: block
}

.contact-submit-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap
}

.contact-send {
  background: #061c2b;
  color: #eff7fa;
  border: 1px solid #061c2b;
  padding: 17px 24px;
  cursor: pointer;
  font: 600 13px/1.2 inherit;
  letter-spacing: .025em;
  transition: background .2s, color .2s
}

.contact-send:hover,
.contact-send:focus-visible {
  background: #edf4f5;
  color: #061c2b
}

.contact-submit-row p {
  font-size: 12px;
  line-height: 1.5;
  max-width: 330px;
  color: #28495b;
  margin: 0
}

.contact-feedback {
  margin: 0;
  font-size: 13px;
  line-height: 1.5
}

@media(max-width:650px) {
  .contact-fields {
    grid-template-columns: 1fr
  }

  .contact-types {
    gap: 8px
  }

  .contact-types span {
    padding: 11px 12px
  }

  .contact-panel {
    padding-top: 24px
  }

  .contact h2 {
    margin-bottom: 48px
  }
}

@media(prefers-reduced-motion:reduce) {
  .contact-panel {
    animation: none
  }

  .contact-plus {
    transition: none
  }
}




.pp-services-contact .contact-toggle { scroll-margin-top:120px; }
.pp-services-contact .contact-toggle[hidden] { display:none; }
.pp-services-contact .contact-types { display:block; }
.pp-services-contact .contact-honeypot { display:none; }
.pp-services-contact .contact-panel { text-align:left; }
.pp-services-contact .contact-intro { max-width:620px; }
.pp-services-contact .contact-send:disabled { opacity:.6; }
/* Author display rules on link-arrow must not defeat progressive fallback hiding. */
.pp-services-contact [data-contact-fallback][hidden] { display:none!important; }