.contact-body .container { width: min(1088px, calc(100% - 48px)); }
.contact-page { padding: 68px 0 104px; }
.contact-hero { text-align: center; }
.contact-hero h1 { margin: 14px 0 16px; font-size: 39px; line-height: 1.08; letter-spacing: -.04em; font-weight: 650; }
.contact-hero p { margin: 0; color: var(--muted); font-size: 18px; }
.contact-layout { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 672px) 320px; justify-content: center; align-items: start; gap: 32px; }
.contact-form { display: grid; gap: 22px; padding: 32px; border: 1px solid var(--border); border-radius: 10px; background: #11191e; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.field { display: grid; gap: 8px; }
.field label { color: var(--white); font-size: 14px; font-weight: 600; line-height: 1; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid #29343b; border-radius: 7px; background: #10181d; color: var(--white); font: inherit; font-size: 14px; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.field input, .field select { height: 37px; padding: 0 12px; }
.field textarea { min-height: 138px; padding: 11px 12px; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder, .field select:invalid { color: #90afc4; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(0, 199, 239, .8); box-shadow: 0 0 0 2px rgba(0, 199, 239, .12); background: #101b21; }
.field [aria-invalid="true"] { border-color: #e4535d; box-shadow: 0 0 0 2px rgba(228, 83, 93, .1); }
.select-wrap { position: relative; display: block; }
.select-wrap select { appearance: none; padding-right: 36px; cursor: pointer; }
.select-wrap svg { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; fill: none; stroke: #72848e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-footer { display: flex; align-items: center; gap: 16px; }
.contact-form .button { min-width: 150px; border: 0; }
.form-status { margin: 0; color: #65d9a6; font-size: 13px; line-height: 1.45; }
.draft-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.draft-note a { color: var(--cyan); overflow-wrap: anywhere; }
.contact-aside { display: grid; gap: 16px; }
.contact-card { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: rgba(17, 25, 30, .72); color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.contact-card:hover { border-color: rgba(0, 199, 239, .42); background: #111b20; transform: translateY(-1px); }
.mail-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; background: rgba(0, 199, 239, .1); color: var(--cyan); }
.mail-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-card strong, .contact-card small { display: block; }
.contact-card strong { margin: 2px 0 4px; font-size: 14px; }
.contact-card small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 14px; white-space: nowrap; }
.inquiry-note { margin: 0; padding: 17px 16px; border: 1px solid var(--border); border-radius: 10px; background: rgba(17, 25, 30, .55); color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: minmax(0, 672px); }
  .contact-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inquiry-note { grid-column: 1 / -1; }
  .contact-card small { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 640px) {
  .contact-body .container { width: min(100% - 32px, 1088px); }
  .contact-page { padding: 54px 0 76px; }
  .contact-hero h1 { font-size: 34px; }
  .contact-hero p { font-size: 16px; }
  .contact-layout { margin-top: 40px; gap: 24px; }
  .contact-form { padding: 22px; }
  .field-grid { grid-template-columns: 1fr; }
  .contact-aside { grid-template-columns: 1fr; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .contact-form .button { width: 100%; }
}