/* Original pattern background preserved */
.contact-page {
  min-height: 100vh;
  background: #000000;
}
.contact-bg {
  position: fixed;
  z-index: 0;
  top: 98px;
  left: 50%;
  width: 1440px;
  height: 603px;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center;
  opacity: 0.3;
  max-width: none;
  pointer-events: none;
}
@media (min-width: 600px) and (max-width: 1024px) {
  .contact-bg {
    top: var(--shumi-bg-top-md, 8px);
    width: var(--shumi-bg-width-md, 200%);
    height: auto;
  }
}
@media (max-width: 599px) {
  .contact-bg {
    top: var(--shumi-bg-top-sm, 56px);
    width: var(--shumi-bg-width-sm, 200%);
    height: auto;
  }
}

.contact-page {
  min-height: 100vh;
}

.contact-main {
  position: relative;
  width: min(100% - 48px, 640px);
  margin: 0 auto;
  padding: 28px 0 64px;
}

.contact-back {
  position: relative;
  top: auto;
  left: auto;
  margin-bottom: 24px;
}

.contact-header {
  margin-bottom: 24px;
}

.contact-title {
  margin: 0;
  padding-left: 14px;
  border-left: 6px solid var(--accent);
  color: var(--cream);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 400;
  line-height: 1.3;
}

.contact-lead {
  margin: 12px 0 0;
  color: var(--dust);
  font-size: 16px;
  line-height: 1.7;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 22px 22px;
  background: var(--paper);
  transform: rotate(-0.6deg);
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field__label {
  color: var(--ink);
  font-size: 14px;
}

.contact-field__optional {
  margin-left: 8px;
  color: #6b665c;
  font-size: 12px;
}

.contact-field__input,
.contact-field__textarea,
.contact-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: #fffdf8;
  color: var(--ink);
  font-family: var(--font-maruko);
  font-size: 16px;
}

.contact-submit {
  align-self: flex-start;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  background: var(--accent);
  color: var(--cream);
  font-family: var(--font-maruko);
  cursor: pointer;
}

.contact-status {
  margin: 0;
  color: #4d4942;
  font-size: 14px;
}

.contact-status.is-error {
  color: var(--danger);
}

@media (max-width: 599px) {
  .contact-main {
    width: min(100% - 32px, 540px);
  }

  .contact-form {
    transform: none;
  }

  .contact-submit {
    width: 100%;
  }
}