/* Original neutral brief palette, with a more defined glossy surface. */
#contact {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(220, 231, 237, .2) !important;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255, 255, 255, .065), transparent 62%),
    linear-gradient(155deg, rgba(255, 255, 255, .035), transparent 40%, rgba(255, 255, 255, .015)),
    rgba(22, 24, 28, .9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 -1px 0 rgba(255, 255, 255, .035),
    0 20px 52px rgba(0, 0, 0, .3) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  #contact {
    background:
      radial-gradient(ellipse at 10% 0%, rgba(255, 255, 255, .065), transparent 62%),
      linear-gradient(155deg, rgba(255, 255, 255, .035), transparent 40%, rgba(255, 255, 255, .015)),
      rgba(22, 24, 28, .6) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
  }
}

/* A quiet neutral highlight separates the form from the surrounding card. */
#contact .lead-form {
  border: 1px solid rgba(232, 238, 242, .22) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .075), transparent 65%),
    linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 12px 32px rgba(0, 0, 0, .16) !important;
}
#contact .lead-form:focus-within {
  border-color: rgba(232, 238, 242, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 12px 32px rgba(0, 0, 0, .18) !important;
}