.contact-page { background: #f8f6f2; font-family: "Microsoft New Tai Lue", Arial, sans-serif; }
.contact-page .nav-bar nav a.active { color: #7d6554; }

.contact-hero { width: 100%; aspect-ratio: 1920 / 500; overflow: hidden; background: #29231f; }
.contact-hero img { width: 100%; height: 100%; object-fit: cover; }

.breadcrumb { min-height: 76px; display: flex; align-items: center; gap: 13px; color: #6f6861; font: 400 .75rem/1.3 "Microsoft New Tai Lue", Arial, sans-serif; }
.breadcrumb a { width: 22px; height: 22px; display: grid; place-items: center; color: #c0c1be; transition: color .2s ease; }
.breadcrumb a:hover { color: #7c6858; }
.breadcrumb svg { width: 17px; height: 17px; fill: currentColor; }

.contact-main { display: grid; grid-template-columns: 883px 596px; gap: 201px; padding-top: 62px; padding-bottom: 96px; border-top: 1px solid #e2ddd6; }
.message-panel h1, .contact-details h2 { margin-bottom: 27px; color: #171715; font: 400 2.25rem/1.18 "Microsoft New Tai Lue", Arial, sans-serif; letter-spacing: 0; }
.message-panel > p { margin: 0 0 4px; color: #5c5752; font: 400 .875rem/1.55 "Microsoft New Tai Lue", Arial, sans-serif; }
.message-panel > strong { display: block; color: #332f2b; font: 600 .875rem/1.5 "Muli", "Microsoft New Tai Lue", Arial, sans-serif; }

.message-form { display: grid; grid-template-columns: repeat(2, 432px); column-gap: 19px; row-gap: 22px; margin-top: 62px; }
.message-form label { display: grid; gap: 12px; color: #4f4a45; font: 400 .875rem/1.3 "Microsoft New Tai Lue", Arial, sans-serif; }
.message-form input, .message-form textarea { width: 100%; border: 1px solid transparent; outline: 0; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.message-form input { height: 46px; padding: 0 14px; font: 400 .875rem/1.4 "Microsoft New Tai Lue", Arial, sans-serif; }
.message-form textarea { min-height: 150px; padding: 13px 14px; resize: vertical; font: 400 .875rem/1.55 "Microsoft New Tai Lue", Arial, sans-serif; }
.message-form input:focus, .message-form textarea:focus { border-color: #92745f; box-shadow: 0 0 0 3px rgb(146 116 95 / 12%); }
.message-form .message-field, .message-form button, .form-status { grid-column: 1 / -1; }
.message-form button { height: 50px; border: 0; background: #645044; color: #fff; font: 600 .8125rem/1 "Muli", "Microsoft New Tai Lue", Arial, sans-serif; letter-spacing: 0; transition: background .2s ease; }
.message-form button:hover, .message-form button:focus-visible { background: #8b6b56; outline: 0; }
.form-status { min-height: 20px; margin: -7px 0 0; color: #6f5949; font: 400 .875rem/1.4 "Microsoft New Tai Lue", Arial, sans-serif; }

.contact-details h2 { margin-bottom: 24px; }
.contact-details address { display: grid; gap: 14px; color: #4e4944; font: normal 400 .875rem/1.55 "Microsoft New Tai Lue", Arial, sans-serif; }
.contact-details address > a, .contact-details address > span { display: grid; grid-template-columns: 21px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.contact-details address img { width: auto; height: auto; max-width: none; margin-top: 0; object-fit: none; }
.contact-details address strong { margin-right: 3px; font-family: "Muli", "Microsoft New Tai Lue", Arial, sans-serif; font-weight: 600; }
.contact-details .address-line { grid-template-columns: 21px minmax(0, 1fr); }
.contact-details > img { width: 100%; aspect-ratio: 596 / 402; margin-top: 39px; object-fit: cover; }

.contact-map { padding-bottom: 112px; }
.contact-map img { width: 100%; aspect-ratio: 1680 / 564; border-radius: 20px; object-fit: cover; }

@media (max-width: 1700px) {
  .contact-main { grid-template-columns: minmax(0, 1.48fr) minmax(340px, 1fr); gap: 9%; }
  .message-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .contact-hero { min-height: 330px; }
  .contact-main { grid-template-columns: 1fr 42%; gap: 6%; }
  .message-form { margin-top: 42px; }
  .message-panel h1, .contact-details h2 { font-size: 32px; }
}

@media (max-width: 760px) {
  .contact-hero { aspect-ratio: auto; height: 62vw; min-height: 260px; }
  .contact-hero img { object-position: center; }
  .contact-main { grid-template-columns: 1fr; gap: 65px; padding-top: 45px; }
  .message-form { grid-template-columns: 1fr; }
  .message-form .message-field, .message-form button, .form-status { grid-column: auto; }
  .contact-details > img { margin-top: 28px; }
  .contact-map { padding-bottom: 70px; }
  .contact-map img { min-height: 260px; border-radius: 12px; }
}