.contact-page { padding: 90px 10vw 110px; border-top: 1px solid var(--line); background: var(--night); }
.contact-intro { max-width: 760px; margin-bottom: 70px; }
.contact-intro h1 { margin: 0; font: normal clamp(76px, 11vw, 160px)/.78 var(--display); letter-spacing: .015em; text-transform: uppercase; }
.contact-intro h1 span { color: var(--acid); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 7vw; }
.contact-form { display: grid; gap: 24px; }
.form-field { display: grid; gap: 9px; }
.form-field label { color: var(--acid); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 0; padding: 14px 15px; background: transparent; color: var(--cream); font: 14px/1.5 var(--sans); }
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: 1px solid var(--acid); border-color: var(--acid); }
.form-submit { justify-self: start; border: 1px solid var(--acid); padding: 13px 18px; background: var(--acid); color: var(--deep); font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.contact-details { display: grid; align-content: start; gap: 34px; }
.contact-details h2 { margin: 0 0 12px; color: var(--acid); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.contact-details p { margin: 0; color: rgba(232,226,210,.78); font-size: 16px; }
.contact-details a { color: var(--coral); text-decoration: underline; text-underline-offset: 5px; }
.contact-map { width: 100%; min-height: 310px; border: 1px solid var(--line); filter: saturate(.75) contrast(1.05); }
@media (min-width: 801px) {
  html, body { height: 100%; overflow: hidden; }
  .contact-page { height: calc(100vh - 91px); min-height: 0; padding: 8px 10vw 18px; overflow: hidden; }
  .contact-intro { margin-bottom: 18px; }
  .contact-intro h1 { font-size: clamp(58px, 8vw, 120px); }
  .contact-layout { height: calc(100% - 125px); min-height: 0; gap: 5vw; }
  .contact-form { min-height: 0; grid-template-rows: 52px 52px minmax(58px, 1fr) 32px; gap: clamp(6px, 1.2vh, 14px); }
  .form-field { min-height: 0; grid-template-rows: auto 1fr; }
  .form-field input { height: 100%; padding: clamp(6px, 1vh, 12px); }
  .form-field textarea { height: 100%; min-height: 50px; padding: clamp(6px, 1vh, 12px); }
  .contact-details { min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(8px, 1.5vh, 18px); }
  .contact-map { min-height: 0; height: 100%; }
}
@media (min-width: 801px) and (max-height: 800px) {
  .contact-page { padding-top: 0; padding-bottom: 18px; }
  .contact-intro { margin-bottom: 12px; }
  .contact-intro h1 { font-size: clamp(72px, 8vw, 120px); }
  .contact-layout { height: calc(100% - 105px); gap: 5vw; }
  .contact-form { gap: 14px; }
  .form-field { gap: 5px; }
  .form-field input, .form-field textarea { padding: 9px 12px; }
  .form-field textarea { min-height: 105px; }
  .contact-details { gap: 18px; }
  .contact-details h2 { margin-bottom: 6px; }
  .contact-details p { font-size: 14px; }
  .contact-map { height: 160px; min-height: 160px; max-height: 160px; }
}
@media (min-width: 801px) and (max-height: 700px) {
  .contact-page { padding-top: 0; padding-bottom: 6px; }
  .contact-intro { margin-bottom: 8px; }
  .contact-intro h1 { font-size: clamp(50px, 6vw, 76px); }
  .contact-layout { height: calc(100% - 125px); }
  .contact-form { grid-template-rows: 38px 38px minmax(44px, 1fr) 26px; gap: 3px; }
  .form-field { gap: 3px; }
  .form-field label { font-size: 9px; }
  .form-field input, .form-field textarea { padding: 3px 8px; }
  .form-field textarea { min-height: 44px; }
  .form-submit { padding: 5px 12px; }
  .contact-details { gap: 3px; }
  .contact-details h2 { margin-bottom: 3px; }
  .contact-details p { font-size: 12px; }
  .contact-map { height: 90px; min-height: 90px; max-height: 90px; }
}
@media (max-width: 800px) {
  .contact-page { padding: 70px 6vw 80px; }
  .contact-intro { margin-bottom: 55px; }
  .contact-layout { display: block; }
  .contact-details { margin-top: 65px; }
  .contact-map { min-height: 280px; }
}
@media (min-width: 801px) {
  .contact-page { padding-top: 0 !important; }
  .contact-intro { margin-top: 0; }
}
@media (min-width: 801px) and (max-height: 800px) {
  .contact-map { height: 160px !important; min-height: 160px !important; max-height: 160px !important; }
}