/* Finesse Media — Contact section, cream card look (matches the price guide). Build 20260928-24.
   Loads after styles.css and themes.css. The section background still follows the visitor's
   chosen color palette; the form card always stays cream so it reads clearly on any palette. */
#contact .contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
#contact .contact-grid h2 { font-size: clamp(52px, 5.4vw, 86px); line-height: 1.02; }
#contact .contact-intro { font-size: 17px; line-height: 1.65; margin-top: 26px; }
#contact .contact-email { font-size: 19px; }
#contact .contact-meta { font-size: 15px; line-height: 1.6; max-width: 420px; }

/* The cream card */
#contact .contact-card {
  background: #f6f0e6; color: #1a1612;
  border-radius: 16px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  color-scheme: light;
}
#contact #inquiry-form { max-width: none; display: flex; flex-direction: column; gap: 8px; }
#contact #inquiry-form label {
  display: block; margin: 12px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #2a231b;
}
#contact #inquiry-form label:first-child { margin-top: 0; }
#contact #inquiry-form input,
#contact #inquiry-form select,
#contact #inquiry-form textarea {
  box-sizing: border-box; width: 100%; margin: 0;
  padding: 0 16px; height: 52px;
  border: 1px solid #cfc3b0; border-radius: 8px;
  background: #ffffff; color: #1a1612;
  font: inherit; font-size: 16px; line-height: 1.4;
}
#contact #inquiry-form select { padding: 0 12px; cursor: pointer; }
#contact #inquiry-form option { background: #ffffff; color: #1a1612; }
#contact #inquiry-form textarea { height: auto; min-height: 128px; padding: 14px 16px; resize: vertical; }
#contact #inquiry-form input::placeholder,
#contact #inquiry-form textarea::placeholder { color: #8a7f71; opacity: 1; }
#contact #inquiry-form input:focus-visible,
#contact #inquiry-form select:focus-visible,
#contact #inquiry-form textarea:focus-visible {
  outline: none; border-color: #8a6d3b; box-shadow: 0 0 0 3px rgba(138, 109, 59, .25);
}
#contact #inquiry-form .gold-button {
  width: 100%; min-height: 58px; margin: 16px 0 0;
  justify-content: center; gap: 10px;
  border: 0; border-radius: 8px;
  background: #1a1612; color: #f6f0e6;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
}
#contact #inquiry-form .gold-button span { color: inherit; }
#contact #inquiry-form .gold-button:hover { background: #2e2720; }
#contact #inquiry-form .gold-button:focus-visible { outline: 2px solid #8a6d3b; outline-offset: 3px; }
#contact #inquiry-form .form-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #6b6053; text-align: center; }

/* After "Prepare my inquiry": the ready message and its two actions, inside the card */
#contact #inquiry-result {
  margin: 16px 0 0; padding: 20px;
  border: 1px solid #cfc3b0; border-radius: 10px;
  background: #ffffff; color: #1a1612;
}
#contact #inquiry-result[hidden] { display: none; }
#contact #inquiry-result > p:first-child { margin: 0 0 14px; font-family: var(--serif); font-size: 28px; line-height: 1.1; color: #1a1612; }
#contact #inquiry-result .text-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin: 0 10px 10px 0; padding: 0 18px;
  border: 1.5px solid #1a1612; border-radius: 8px;
  background: transparent; color: #1a1612;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
#contact #inquiry-result #send-inquiry { background: #1a1612; color: #f6f0e6; }
#contact #inquiry-result .text-link:focus-visible { outline: 2px solid #8a6d3b; outline-offset: 3px; }
#contact #copy-status { margin: 4px 0 0; text-align: left; }
#contact #inquiry-fallback { margin-top: 10px; height: auto; min-height: 140px; padding: 12px 14px; }

@media (max-width: 1050px) {
  #contact .contact-grid { grid-template-columns: 1fr; gap: 44px; align-items: start; }
}
@media (max-width: 700px) {
  #contact .contact-grid h2 { font-size: 50px; }
  #contact .contact-intro { font-size: 16px; }
  #contact .contact-email { font-size: 17px; }
  #contact .contact-card { padding: 24px 18px; border-radius: 12px; }
  #contact #inquiry-result .text-link { width: 100%; margin-right: 0; }
}