/* Contact: a quiet form with explicit filling, sending, error and success states. */
.contact-trap, .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-contact .contact-layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(36px, 7vw, 100px);
}
.page-contact .contact-info .page-intro {
  border: 0;
  padding: 0;
  margin: 0 0 48px;
}
.page-contact .contact-info .page-intro h1 {
  font-size: clamp(48px, 5.7vw, 82px) !important;
  margin-bottom: 20px !important;
}
.page-contact .contact-info > .eyebrow { font-size: 12px; }
.page-contact .contact-info > a {
  margin-top: 6px;
  margin-bottom: 30px;
  font-size: clamp(16px, 1.45vw, 20px);
}
.page-contact .contact-info > p { font-size: 15px; }
.page-contact .contact-form-panel {
  padding: 32px;
  border: 1px solid #ffffff20;
  background: #111316;
  border-radius: 14px;
}
.form-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.page-contact .form-heading h2 { font-size: 23px; letter-spacing: -.035em; }
#form-progress-label { color: #aeb5c0; font-size: 12px; }
.form-completion { height: 2px; margin: 20px 0 28px; background: #ffffff14; overflow: hidden; }
.form-completion span {
  display: block;
  height: 100%;
  background: #dfe6ef;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.7,.25,1);
}
.contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  padding: 0;
  margin: 0;
  min-width: 0;
  border: 0;
}
.contact-fields .form-group { margin: 0; min-width: 0; }
.contact-fields .form-group:nth-of-type(5) { grid-column: 1 / -1; }
.contact-fields .form-label { font-size: 14px; color: #d6dbe3; line-height: 1.5; }
.page-contact #contact-form .form-input,
.page-contact #contact-form .form-textarea {
  padding: 12px 14px !important;
  min-height: 49px;
  background: #0c0e10 !important;
  border: 1px solid #3d424a !important;
  border-radius: 8px;
  transition: border-color .25s, background .25s;
}
.page-contact #contact-form .is-complete .form-input,
.page-contact #contact-form .is-complete .form-textarea { border-color: #8993a2 !important; }
.page-contact #contact-form textarea { min-height: 142px; }
.page-contact #contact-form textarea::placeholder { color: #919aa7; }
.page-contact #inquiry-privacy { margin: 22px 0; font-size: 12px !important; color: #aeb5bf; }
.page-contact #contact-form #submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  border-radius: 8px;
  background: #e6e9ef;
  color: #14161a;
  font-size: 15px;
  font-weight: 600;
  transition: background .25s;
}
#submit-btn .submit-arrow { width: 19px; height: 19px; transition: transform .25s; }
#submit-btn:hover .submit-arrow { transform: translate(2px,-2px); }
#submit-btn:disabled { cursor: wait; }
.submit-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #14161a40;
  border-top-color: #14161a;
  border-radius: 50%;
}
.is-sending .submit-spinner { display: block; animation: contact-spin .75s linear infinite; }
.is-sending .submit-arrow { display: none; }
#form-status { min-height: 22px; margin: 14px 0 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.message-error #form-status { color: #efb0b0; }
.contact-success { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 45px 8px; }
.contact-success:focus { outline: none; }
.page-contact .contact-success h2 { font-size: clamp(28px,3vw,37px); letter-spacing: -.04em; }
.contact-success p { max-width: 34ch; font-size: 15px; }
.success-mark { width: 70px; height: 70px; margin-bottom: 8px; stroke: #e5ebf3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.success-mark path { stroke-width: 2.4; }
.send-another { min-height: 44px; margin-top: 10px; padding: 10px 18px; border: 1px solid #747e8c; border-radius: 8px; color: #e5e9ef; background: transparent; font-size: 14px; }
.message-sent .form-heading, .message-sent .form-completion, .message-sent #inquiry-privacy, .message-sent #form-status { display: none; }
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion:no-preference) {
  .message-sent .contact-success { animation: contact-arrive .5s both; }
  .message-sent .success-mark circle { stroke-dasharray: 183; animation: circle-draw .7s ease both; }
  .message-sent .success-mark path { stroke-dasharray: 45; animation: check-draw .4s .4s ease both; }
  @keyframes circle-draw { from { stroke-dashoffset: 183; } to { stroke-dashoffset: 0; } }
  @keyframes check-draw { from { stroke-dashoffset: 45; } to { stroke-dashoffset: 0; } }
  @keyframes contact-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (max-width:960px) {
  .page-contact .contact-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .page-contact .contact-info .page-intro { margin-bottom: 28px; }
}
@media (max-width:540px) {
  .page-contact .contact-form-panel { padding: 25px 20px; }
  .contact-fields { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .form-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .contact-success { padding-block: 28px; }
}
@media (prefers-reduced-motion:reduce) {
  .form-completion span, #submit-btn .submit-arrow { transition: none; }
  .submit-spinner { animation: none; }
}