.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: auto; height: auto; display: inline-flex; align-items: center; color: #817970; letter-spacing: .04em; 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 .captcha-field, .message-form button, .form-status { grid-column: 1 / -1; }
.captcha-control { display: flex; align-items: center; gap: 14px; }
.captcha-control strong { min-width: 116px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid #d8d0c8; background: #eee9e2; color: #493e36; font: 600 17px/1 Georgia, "Times New Roman", serif; letter-spacing: .08em; user-select: none; }
.message-form .captcha-control input { width: 150px; flex: 0 0 150px; }
.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 iframe { display: block; width: 100%; aspect-ratio: 1680 / 564; border: 0; border-radius: 20px; background: #ebe7e1; }

@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 .captcha-field, .message-form button, .form-status { grid-column: auto; }
  .captcha-control { align-items: stretch; }
  .captcha-control strong { flex: 1; }
  .message-form .captcha-control input { width: 44%; flex-basis: 44%; }
  .contact-details > img { margin-top: 28px; }
  .contact-map { padding-bottom: 70px; }
  .contact-map iframe { min-height: 260px; border-radius: 12px; }
}