/* Discuss Your Project page-only CSS. Shared studio/contact form styles load from policy-pages.css. */

.contact-page {
  min-height: 72vh;
  padding: 92px 20px 110px !important;
  background:
    radial-gradient(circle at 10% 0, rgba(168, 199, 250, .56), transparent 34rem),
    radial-gradient(circle at 92% 10%, rgba(196, 181, 253, .36), transparent 36rem),
    linear-gradient(180deg, #fbfdff 0%, #fff 42%, #f8fbff 100%) !important;
}

.contact-wrapper {
  width: min(1120px, 100%) !important;
  margin: 0 auto !important;
}

.contact-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 28px;
  padding: 54px !important;
  border: 1px solid rgba(168, 199, 250, .68) !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 8% 0, rgba(168, 199, 250, .25), transparent 32%),
    radial-gradient(circle at 100% 14%, rgba(196, 181, 253, .18), transparent 28%),
    rgba(255, 255, 255, .94) !important;
  box-shadow: 0 30px 90px rgba(60, 64, 67, .15) !important;
}

.contact-card::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 30px;
  width: 104px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.3)),
    radial-gradient(circle at 32% 30%, rgba(11, 87, 208, .26) 0 12px, transparent 13px),
    radial-gradient(circle at 68% 68%, rgba(124, 77, 255, .18) 0 18px, transparent 19px);
  box-shadow: 0 18px 48px rgba(60, 64, 67, .12);
  pointer-events: none;
}

.contact-card > * {
  position: relative;
  z-index: 1;
}

.contact-card h1 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #1f1f1f !important;
  font-size: 64px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.contact-subtitle {
  max-width: 700px !important;
  margin: -12px 0 4px !important;
  color: #5f6368 !important;
  font-size: 19px !important;
  line-height: 1.65 !important;
}

.contact-subtitle::before {
  width: max-content;
  max-width: 100%;
  display: inline-flex !important;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(168, 199, 250, .78) !important;
  border-radius: 999px;
  background: #e8f0fe !important;
  color: #0b57d0 !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-compliance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

.contact-compliance-item {
  min-width: 0;
  padding: 18px !important;
  border: 1px solid rgba(168, 199, 250, .58) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 10px 26px rgba(60, 64, 67, .08) !important;
}

.contact-compliance-item strong {
  display: block;
  margin: 0 0 8px;
  color: #0b57d0 !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-compliance-item span {
  display: block;
  color: #1f1f1f !important;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.45;
}

.contact-form {
  display: grid !important;
  gap: 16px !important;
  margin-top: 4px;
}

.field-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 56px;
  padding: 0 18px !important;
  border: 1px solid #dadce0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #1f1f1f !important;
  box-shadow: none !important;
}

.contact-form textarea {
  min-height: 184px;
  padding-block: 16px !important;
  line-height: 1.55;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #0b57d0 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(11, 87, 208, .16) !important;
}

.file-upload-box {
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px dashed rgba(11, 87, 208, .42) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 0 0, rgba(168, 199, 250, .24), transparent 34%),
    #f8fbff !important;
  box-shadow: none !important;
}

.file-btn span {
  min-height: 54px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(168, 199, 250, .84) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: #0b57d0 !important;
  font-weight: 900;
}

.selected-file {
  margin: 0;
  color: #5f6368 !important;
  font-size: 14px;
  font-weight: 750;
}

.file-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.meta-item {
  min-width: 0;
  padding: 13px !important;
  border: 1px solid rgba(218, 220, 224, .72);
  border-radius: 16px !important;
  background: #fff !important;
}

.meta-item strong {
  display: block;
  color: #0b57d0 !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.meta-item span,
.meta-item.hint {
  color: #5f6368 !important;
  font-size: 13px;
  line-height: 1.45;
}

.contact-form button {
  width: max-content;
  min-width: 190px;
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 20% 0, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(115deg, #0b57d0 0%, #1a73e8 58%, #5b9cff 100%) !important;
  background-size: 140% 140% !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(26, 115, 232, .24) !important;
}

.contact-form button:hover {
  background-position: 100% 50% !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(26, 115, 232, .3) !important;
  transform: translateY(-1px);
}

.success-msg,
.error-msg {
  margin: 0 !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
}

@media (max-width: 900px) {
  .contact-page {
    padding: 72px 14px 84px !important;
  }

  .contact-card {
    padding: 34px 20px !important;
    border-radius: 24px !important;
  }

  .contact-card::after {
    display: none;
  }

  .contact-card h1 {
    font-size: 44px !important;
  }

  .contact-subtitle {
    font-size: 16px !important;
  }

  .contact-compliance-grid,
  .field-group,
  .file-meta {
    grid-template-columns: 1fr !important;
  }

  .contact-form button {
    width: 100%;
  }
}