@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tenor-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tenor-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1e1c24;
  --muted: #62606a;
  --line: #dcdce0;
  --pink: #ff2ea8;
  --pink-text: #bc006f;
  --lime: #c8ff20;
  --cyan: #00d6e8;
  --blue: #5546e9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.65 Manrope, Arial, sans-serif; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.header {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px max(5vw, 24px);
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: .14em; line-height: 1.1; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .21em; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; color: var(--ink); background: #fff; border: 2px solid var(--pink); border-radius: 50%; font: 25px/1 'Tenor Sans', sans-serif; letter-spacing: 0; }
.header nav { display: flex; gap: 30px; }
.header nav a, .header-link { font-size: 13px; font-weight: 700; text-decoration: none; }
.header nav a:hover, .header-link:hover { color: var(--pink-text); }
.header-link { padding: 10px 17px; border: 1px solid var(--ink); border-radius: 999px; white-space: nowrap; }
.header-link span { margin-left: 12px; color: var(--pink-text); }

.hero { min-height: 650px; display: grid; grid-template-columns: 52% 48%; color: var(--ink); background: #fff; }
.hero-copy { display: flex; flex-direction: column; align-items: start; padding: 75px 7vw 38px max(5vw,24px); }
.eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.hero .eyebrow::before { display: inline-block; width: 9px; height: 9px; margin-right: 10px; background: var(--lime); border: 1px solid var(--ink); border-radius: 50%; content: ''; }
.hero h1, h2, .room-card h3, .detail-grid h3, .availability h3 { font-family: 'Tenor Sans', sans-serif; font-weight: 400; }
.hero h1, h2 { line-height: 1.13; letter-spacing: -.055em; }
.hero h1 { max-width: 650px; margin: 30px 0 21px; font-size: clamp(62px, 5.8vw, 86px); }
.hero h1 em, h2 em { color: var(--ink); font-style: normal; font-weight: 400; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.hero-copy > p:not(.eyebrow) { max-width: 460px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.button { display: inline-flex; min-width: 244px; align-items: center; justify-content: space-between; gap: 38px; margin-top: 30px; padding: 16px 24px; color: var(--ink); background: #fff; border: 2px solid var(--pink); border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.button span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; background: var(--lime); border-radius: 50%; }
.button:hover { box-shadow: 4px 4px 0 var(--lime); transform: translateY(-2px); }
.hero-bottom { display: flex; width: 100%; gap: 22px; flex-wrap: wrap; margin-top: auto; padding-top: 21px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.hero-art { position: relative; overflow: hidden; background: #fff; border-left: 1px solid var(--line); }
.window { position: absolute; inset: 13% 20% 12% 18%; border: 3px solid var(--ink); border-radius: 49% 49% 0 0; }
.window::after { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); content: ''; }
.sun { position: absolute; z-index: 1; top: 20%; right: 21%; width: 105px; height: 105px; border: 4px solid var(--lime); border-radius: 50%; }
.leaf { position: absolute; z-index: 2; border: 3px solid var(--pink); border-radius: 0 100% 0 100%; transform-origin: bottom left; }
.leaf-one { bottom: 23%; left: 8%; width: 92px; height: 47px; transform: rotate(-32deg); }
.leaf-two { bottom: 13%; left: 24%; width: 125px; height: 64px; border-color: var(--blue); transform: rotate(18deg); }
.leaf-three { top: 19%; right: 10%; width: 80px; height: 40px; border-color: var(--cyan); transform: rotate(42deg); }
.leaf-four { right: 9%; bottom: 29%; width: 75px; height: 38px; border-color: var(--pink); transform: rotate(-24deg); }
.art-caption { position: absolute; z-index: 3; right: 34px; bottom: 26px; color: var(--ink); font: 18px/1.3 'Tenor Sans', sans-serif; }

.section { padding: 98px max(5vw,24px); }
.section-top { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 40px; }
.section-top > p { max-width: 375px; color: var(--muted); }
h2 { margin: 15px 0; font-size: clamp(48px, 4.8vw, 70px); }
.rooms { background: #fff; border-top: 1px solid var(--line); }
.room-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.room-card { position: relative; display: flex; min-height: 345px; flex-direction: column; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.room-card::before { position: absolute; top: 29px; right: 29px; width: 15px; height: 15px; border: 3px solid var(--lime); border-radius: 50%; content: ''; }
.room-card:nth-child(2)::before { border-color: var(--cyan); }
.room-card:nth-child(3)::before { border-color: var(--pink); }
.room-card .card-index { color: var(--pink-text); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.room-card h3 { margin: 31px 0 8px; font-size: 43px; line-height: 1.13; letter-spacing: -.055em; }
.room-card p { color: var(--muted); font-size: 14px; }
.room-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); }
.room-card-footer b { color: var(--ink); font-weight: 800; }
.room-card-footer button { padding: 8px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--pink); font-weight: 800; }
.room-card-footer button:hover { text-decoration: underline; }

.details { display: grid; grid-template-columns: 34% 1fr; gap: 50px; padding: 100px max(5vw,24px); background: #fff; border-top: 1px solid var(--line); }
.details h2 { font-size: clamp(47px, 4.5vw, 64px); }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.detail-grid article { padding-top: 17px; border-top: 2px solid var(--ink); }
.detail-grid article:nth-child(1) { border-top-color: var(--pink); }
.detail-grid article:nth-child(2) { border-top-color: var(--cyan); }
.detail-grid article:nth-child(3) { border-top-color: var(--blue); }
.detail-grid article span { color: var(--ink); font: 30px/1.1 'Tenor Sans', sans-serif; }
.detail-grid h3 { margin: 25px 0 8px; font-size: 25px; line-height: 1.2; }
.detail-grid p { color: var(--muted); font-size: 14px; }

.booking { display: grid; grid-template-columns: 34% 1fr; gap: 55px; background: #fff; border-top: 1px solid var(--line); }
.booking-heading > p:last-child { max-width: 370px; color: var(--muted); }
#booking-form { min-width: 0; padding: 31px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.fields label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 800; }
.fields input, .fields select { width: 100%; min-height: 49px; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #aaaab0; border-radius: 10px; }
.fields input:focus, .fields select:focus { border-color: var(--blue); outline: 2px solid var(--cyan); }
.availability { min-height: 160px; margin: 20px 0; padding: 21px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 13px; font-size: 14px; }
.availability h3 { margin: 0 0 7px; color: var(--ink); font-size: 25px; line-height: 1.2; }
.availability .quote { color: var(--pink-text); font-weight: 800; }
.resource-choice { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--ink); border-top: 1px solid var(--line); }
.resource-choice input { accent-color: var(--blue); }
.contact-fields { margin-top: 18px; }
.submit { margin-top: 20px; }
.submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.form-status { min-height: 24px; color: var(--ink); font-size: 14px; }

.closing { display: flex; align-items: center; gap: 52px; padding: 70px max(5vw,24px); color: var(--ink); background: #fff; border-top: 1px solid var(--line); }
.closing-mark { display: grid; width: 84px; height: 84px; flex: 0 0 auto; place-items: center; border: 3px solid var(--lime); border-radius: 50%; font: 54px/1 'Tenor Sans', sans-serif; }
.closing h2 { font-size: clamp(44px, 4.5vw, 62px); }
footer { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: 33px max(5vw,24px); color: var(--muted); background: #fff; border-top: 1px solid var(--line); font-size: 12px; }
footer a { color: var(--ink); text-decoration-color: var(--pink); text-decoration-thickness: 2px; }

@media (max-width: 900px) {
  .header nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 590px; }
  .hero-art { min-height: 370px; }
  .room-grid { grid-template-columns: 1fr 1fr; }
  .details, .booking { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section-top { display: block; }
  .room-grid, .detail-grid, .fields { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .header { min-height: 69px; }
  .brand { font-size: 16px; }
  .header-link { padding: 8px 11px; font-size: 11px; }
  .hero-copy { min-height: 540px; padding: 63px 20px 30px; }
  .hero h1 { font-size: clamp(50px, 10vw, 66px); }
  .hero-art { min-height: 300px; }
  .sun { width: 170px; height: 170px; }
  .section, .details { padding: 65px 20px; }
  .section-top { display: block; }
  h2, .details h2 { font-size: clamp(40px, 9vw, 52px); }
  .room-grid, .detail-grid, .fields { grid-template-columns: 1fr; }
  .room-card { min-height: 290px; }
  .booking { gap: 14px; }
  #booking-form { padding: 21px; }
  .closing { gap: 20px; padding: 45px 20px; }
  .closing-mark { width: 66px; height: 66px; font-size: 42px; }
  .closing h2 { font-size: 40px; }
  footer { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}