/* Dedicated project inquiry page, sharing the landing's visual identity. */
.contact-page { padding-block: 64px 88px; background: linear-gradient(180deg, #fdfdfe, #ffffff); border-bottom: 1px solid var(--line); }
.contact-page .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); }
.contact-back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: -12px 0 32px; color: #6d737c; font-size: 11px; }
.contact-back:hover { color: var(--teal); }
.contact-page h1 { max-width: 18ch; margin: 0 0 28px; font-size: clamp(38px, 4vw, 58px); font-weight: 650; line-height: 1.12; letter-spacing: -.05em; }
.contact-page-intro > p { max-width: 47ch; margin-bottom: 36px; color: #424653; font-size: 15px; line-height: 1.85; }
.contact-discussion { padding-top: 28px; border-top: 1px solid var(--line); }
.contact-discussion h2 { margin-bottom: 24px; font-size: 14px; line-height: 1.5; font-weight: 550; letter-spacing: -.01em; }
.contact-discussion ul { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; }
.contact-discussion li { position: relative; padding-left: 18px; }
.contact-discussion li::before { position: absolute; top: 8px; left: 0; width: 4px; height: 4px; content: ''; border-radius: 50%; background: #6d737c; }
.contact-discussion strong { display: block; margin-bottom: 5px; color: #282b30; font-size: 12px; font-weight: 550; }
.contact-discussion li > span { display: block; color: #6d737c; font-size: 11px; line-height: 1.7; }
.contact-form-panel { padding: 36px; border: 1px solid #e4e7ec; border-radius: 10px; background: white; box-shadow: 0 12px 40px #282b3005; }
.contact-form-panel h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.035em; margin-bottom: 12px; }
.contact-form-panel > p { margin-bottom: 28px; color: #6d737c; font-size: 12px; line-height: 1.7; }
.contact-page .contact form { gap: 22px 18px; }
.contact-page .contact label { position: relative; display: block; color: #424653; font-size: 12px; font-weight: 500; line-height: 1.5; }
.field-optional { color: #6d737c; font-size: 10px; font-weight: 400; }
.contact-page .contact input, .contact-page .contact textarea { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid #e4e7ec; border-radius: 5px; background: #fdfdfe; color: #282b30; font-size: 16px; line-height: 1.5; }
.contact-page .contact input::placeholder, .contact-page .contact textarea::placeholder { color: #6d737c; font-size: 12px; }
.contact-page .contact input:focus, .contact-page .contact textarea:focus { outline: 2px solid #6d737c; outline-offset: 2px; }
.contact-page .contact .offer-select { display: block; width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; margin-top: 8px; border: 1px solid #e4e7ec; border-radius: 5px; background: #fdfdfe; color: #282b30; font: inherit; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; cursor: pointer; }
.contact-page .contact .offer-select:focus { outline: 2px solid #6d737c; outline-offset: 2px; }
.contact-page .contact .offer-select:required:invalid { color: #6d737c; }
.contact-page .contact textarea { min-height: 160px; }
.contact-page .contact .btn { min-height: 50px; margin-top: 2px; }
.contact-page .contact .btn:disabled { cursor: not-allowed; opacity: .6; transform: none; }
.contact-page .contact .contact-noscript { margin: 0; color: #6d737c; font-size: 11px; line-height: 1.8; }
.contact-page .contact small { color: #6d737c; font-size: 10px; line-height: 1.7; }
@media (max-width: 1000px) {
  .contact-page .contact { gap: 40px; }
  .contact-form-panel { padding: 28px; }
  .contact-page .contact form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .contact-page { padding-block: 40px 56px; }
  .contact-page .contact { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .contact-page h1 { font-size: clamp(36px, 7vw, 48px); }
  .contact-back { margin-bottom: 24px; }
  .contact-page-intro > p { max-width: 58ch; }
  .contact-discussion ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 480px) {
  .contact-page { padding-block: 32px 48px; }
  .contact-form-panel { padding: 24px; }
  .contact-form-panel h2 { font-size: 22px; }
  .contact-discussion ul { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .contact-page .contact textarea { min-height: 150px; }
  .contact-page .contact small { font-size: 11px; }
}

/* Field feedback is associated with each control for assistive technologies. */
.contact-page .contact .field-hint { display: block; margin-top: 6px; color: #6d737c; font-size: 10px; font-weight: 400; line-height: 1.6; }
.contact-page .contact .field-error { display: block; margin-top: 7px; color: #a23f36; font-size: 11px; font-weight: 400; line-height: 1.6; }
.contact-page .contact input[aria-invalid="true"], .contact-page .contact textarea[aria-invalid="true"] { border-color: #b35b4e; background: #fffaf8; }
.contact-page .contact input[aria-invalid="true"]:focus, .contact-page .contact textarea[aria-invalid="true"]:focus { outline-color: #b35b4e; }
.contact-page .contact .offer-select[aria-invalid="true"] { border-color: #b35b4e; background: #fffaf8; }
.contact-page .contact .offer-select[aria-invalid="true"]:focus { outline-color: #b35b4e; }
.field-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.message-count { flex-shrink: 0; margin-top: 6px; color: #6d737c; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.contact-page .contact .form-status { margin: 0; padding: 12px 14px; border: 1px solid #e1dfd0; border-radius: 5px; background: #f8f7f1; color: #756746; font-size: 12px; line-height: 1.7; }
.contact-page .contact .form-status[data-state="error"] { border-color: #ead5cd; background: #fff8f5; color: #a23f36; }
.contact-page .contact .contact-privacy { margin: -5px 0 0; color: #6d737c; font-size: 10px; line-height: 1.8; }
.contact-privacy a { color: #424653; text-decoration: underline; text-underline-offset: 3px; }
.contact-privacy a:hover { color: var(--teal); }

/* Native country selector remains accessible; its visible value stays compact. */
.phone-field { min-width: 0; }
.contact-page .contact .phone-control { display: flex; align-items: stretch; min-width: 0; margin-top: 8px; border: 1px solid #e4e7ec; border-radius: 5px; background: #fdfdfe; }
.phone-country { position: relative; flex: 0 0 108px; min-width: 0; border-right: 1px solid #e4e7ec; }
.phone-country-display { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 100%; padding: 12px 14px; color: #424653; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-country select { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; font: inherit; }
.contact-page .contact .phone-control input { flex: 1 1 0; width: 0; min-width: 0; margin: 0; border: 0; background: transparent; border-radius: 0 5px 5px 0; }
.contact-page .contact .phone-control input:focus { outline: none; }
.phone-control:focus-within { outline: 2px solid #6d737c; outline-offset: 2px; }
.phone-country:focus-within { border-radius: 4px 0 0 4px; outline: 2px solid #6d737c; outline-offset: -2px; }
.phone-control:has(input[aria-invalid="true"]) { border-color: #b35b4e; background: #fffaf8; }
.phone-control:has(input[aria-invalid="true"]):focus-within { outline-color: #b35b4e; }
@media (max-width: 380px) {
  .phone-country { flex-basis: 94px; }
  .phone-country-display { padding-inline: 10px; font-size: 11px; }
  .contact-page .contact .phone-control input { padding-inline: 10px; }
}