:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #fff; background: #152729; }
* { box-sizing: border-box; }
body { margin: 0; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,29,31,.95) 0%, rgba(10,29,31,.85) 38%, rgba(10,29,31,.47) 70%, rgba(10,29,31,.22) 100%), url("background.jpg") center center / cover no-repeat; }
.page { width: min(100% - 112px, 1280px); margin: 0 auto; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 42px; padding: 42px 0 28px; }
header { display: flex; align-items: center; }
.logo { display: block; width: 208px; height: auto; }
main { align-self: center; padding: 24px 0 36px; }
.eyebrow { color: #acdeda; font-size: 12px; font-weight: 700; letter-spacing: .18em; margin: 0 0 26px; }
h1 { font-size: clamp(48px, 6.8vw, 92px); line-height: 1.06; font-weight: 400; letter-spacing: -.055em; margin: 0 0 30px; }
h1 span { color: #83c9c1; }
.intro { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.4; margin: 0 0 12px; }
.message { color: #e1ebe9; font-size: 17px; line-height: 1.65; margin: 0; }
.contacts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.contact { text-decoration: none; display: flex; flex-direction: column; gap: 9px; padding: 18px 22px; border: 1px solid #acc9c5; border-radius: 3px; min-height: 89px; color: #fff; transition: background-color .15s, border-color .15s; }
.label { font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.value { display: flex; align-items: center; justify-content: space-between; gap: 26px; font-size: 17px; font-weight: 500; }
.arrow { font-size: 21px; line-height: 1; }
.phone { background: #83c9c1; border-color: #83c9c1; color: #132e2d; }
.phone:hover { background: #a9dcd6; border-color: #a9dcd6; }
.email, .booking { background: rgba(10,29,31,.28); }
.email:hover, .booking:hover { background: rgba(131,201,193,.2); border-color: #fff; }
a:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
footer { border-top: 1px solid rgba(225,235,233,.28); padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; color: #d8e5e2; font-size: 12px; line-height: 1.6; }
address { font-style: normal; }
footer p { margin: 0; }
.separator { margin: 0 7px; }
@media (max-width: 700px) {
  body::before { background-image: linear-gradient(180deg, rgba(10,29,31,.79), rgba(10,29,31,.90)), url("background.jpg"); background-position: 62% center; }
  .page { width: calc(100% - 48px); padding: 30px 0 22px; gap: 34px; }
  .logo { width: 170px; }
  main { padding: 12px 0 20px; }
  .eyebrow { font-size: 10px; letter-spacing: .13em; margin-bottom: 24px; }
  h1 { font-size: clamp(43px, 10.4vw, 64px); margin-bottom: 24px; }
  .intro { font-size: 22px; }
  .message { font-size: 16px; }
  .contacts { flex-direction: column; margin-top: 28px; gap: 12px; }
  .contact { width: 100%; padding: 16px 18px; min-height: 83px; }
  .value { gap: 12px; font-size: 16px; }
  footer { flex-direction: column; gap: 8px; font-size: 11px; }
}
@media (max-width: 359px) {
  .page { width: calc(100% - 36px); }
  .value { font-size: 14px; }
  address span:last-child { display: block; }
  .separator { display: none; }
  .desktop-break { display: none; }
}
@media (prefers-reduced-motion: reduce) { .contact { transition: none; } }