@font-face { font-family: Florentia; src: url("assets/florentia-regular.ttf") format("truetype"); font-display: swap; font-weight: 400; }
@font-face { font-family: Roboto; src: url("assets/roboto-variable.ttf") format("truetype"); font-display: swap; font-style: normal; font-weight: 100 900; }
@font-face { font-family: Bellarina; src: url("assets/bellarina.otf") format("opentype"); font-display: swap; font-weight: 400; }
:root {
  --gold: #9b893d;
  --white: #fff;
  --body-font: Roboto, Arial, Helvetica, sans-serif;
  --display-font: Florentia, Georgia, 'Times New Roman', serif;
  --script-font: Bellarina, 'Brush Script MT', 'Segoe Script', cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #11312c; color: var(--white); font-family: var(--body-font); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; text-underline-offset: .18em; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.landing { position: relative; min-height: 700px; height: 100svh; overflow: hidden; background: #9fc1da; container-type: size; }
.photo { position: absolute; left: 33.9%; top: -9.1%; width: 75.2%; height: 114.3%; overflow: hidden; }
.photo::after { content: ''; position: absolute; inset: 53% 0 0; background: linear-gradient(transparent, rgba(23, 26, 24, .34)); pointer-events: none; }
.photo picture, .photo__image { display: block; width: 100%; height: 100%; }
.photo__image { object-fit: cover; object-position: center 48%; }
.residence-logo { position: absolute; z-index: 1; width: min(27.9vw, 535px); aspect-ratio: 535 / 255; right: 29.5%; bottom: 10.2%; }
.residence-logo__emblem { position: absolute; top: 0; left: 50%; width: 25.6%; height: 50%; transform: translateX(-50%); filter: brightness(0) saturate(100%) invert(65%) sepia(25%) saturate(766%) hue-rotate(3deg) brightness(93%) contrast(84%); }
.residence-logo__wordmark { position: absolute; left: 0; bottom: 0; width: 100%; height: 47.8%; }
.information { position: absolute; inset: 0; pointer-events: none; }
.desktop-curve { position: absolute; width: 49.2%; height: 111%; max-width: none; left: -3%; top: -9.2%; }
.information__content { position: absolute; inset: 0 auto 0 0; width: 44%; pointer-events: auto; }
.message { position: absolute; top: 19.9%; left: 7.8%; width: 83%; text-align: center; }
.message h1 { margin: 0; color: #fff; font-family: var(--display-font); font-size: clamp(42px, 3.84vw, 74px); font-weight: 400; line-height: .99; letter-spacing: -.035em; }
.coming-soon { position: relative; margin: -.08em 0 0; color: var(--gold); font-family: var(--script-font); font-size: clamp(75px, 7vw, 137px); font-weight: 400; line-height: 1.08; transform: rotate(-2.31deg); }
.contacts { position: absolute; top: 58.8%; left: 4%; width: 89%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; text-align: center; }
.contact { min-width: 0; font-style: normal; font-size: clamp(11px, .77vw, 15px); line-height: 1.14; overflow-wrap: anywhere; }
.contact h2 { margin: 0 0 1.9em; color: var(--gold); font-size: clamp(18px, 1.23vw, 24px); font-weight: 700; line-height: 1.1; }
.contact p { margin: 0 0 1.55em; }
.partners { position: absolute; width: clamp(160px, 13.35vw, 256px); height: auto; bottom: 10.3%; left: 50%; transform: translateX(-50%); }
.apartments-banner {
  position: absolute;
  z-index: 2;
  left: 32.1875vw;
  top: 41.111111%;
  display: block;
  width: min(28.125vw, 50cqh, 540px);
  aspect-ratio: 18 / 5;
  overflow: hidden;
  container-type: inline-size;
  background: #d1c5a3;
  color: #fff;
}
.apartments-banner:hover, .apartments-banner:focus-visible { text-decoration: none; }
.apartments-banner:focus-visible { outline: 3px solid #11312c; outline-offset: 4px; box-shadow: 0 0 0 4px #fff; }
.apartments-banner__photo { position: absolute; left: 50%; top: -54.666667%; width: 54.814815%; height: 183.333333%; max-width: none; object-fit: fill; }
.apartments-banner__gold { position: absolute; left: -2.407407%; top: -37%; width: 60.740741%; aspect-ratio: 328 / 236; background: url("assets/banner-gold.svg") center / contain no-repeat; }
.apartments-banner__text { position: absolute; left: 5.555556%; top: 23.333333%; font-family: var(--display-font); font-size: 5.217037cqw; font-weight: 400; line-height: 1.02; letter-spacing: .208685cqw; white-space: nowrap; }
.apartments-banner__arrow { position: absolute; left: 43.6221%; top: 56.607%; width: 7.444815%; aspect-ratio: 40.202 / 36.0193; transform: rotate(-8.96deg); background: url("assets/banner-arrow.svg") center / contain no-repeat; }
@media (min-width: 1024px) and (max-height: 760px) {
  .landing { min-height: 650px; }
  .message { top: 17%; }
  .contacts { top: 56%; }
  .partners { bottom: 5%; }
}
@media (max-width: 1023px) {
  .landing { min-height: 100svh; height: auto; overflow: visible; background: #11312c; container-type: normal; }
  .photo { position: relative; inset: auto; width: 100%; height: clamp(330px, 53svh, 660px); }
  .photo__image { object-position: 65% 68%; }
  .photo::after { inset: 40% 0 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.65)); }
  .residence-logo { width: clamp(245px, 50%, 535px); right: 50%; bottom: 2%; transform: translateX(50%); }
  .information { position: relative; inset: auto; margin-top: -5.2vw; padding: 8.5vw 5vw 13vw; overflow: hidden; border-radius: 50% 50% 0 0 / 5.2vw 5.2vw 0 0; background: linear-gradient(158deg, #d1ae62 0%, #d4ad60 30%, #e5d4a6 71%, #f4efdf 100%); }
  .desktop-curve { display: none; }
  .information__content { position: relative; inset: auto; width: 100%; }
  .message { position: relative; top: auto; left: auto; width: 100%; margin: 0 auto 3.3rem; }
  .message h1 { font-size: clamp(38px, 7.1vw, 70px); letter-spacing: -.025em; }
  .desktop-only { display: none; }
  .coming-soon { margin-top: -.03em; font-size: clamp(70px, 11.6vw, 120px); }
  .contacts { position: relative; top: auto; left: auto; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 2vw, 2rem); }
  .contact { font-size: clamp(13px, 1.75vw, 20px); line-height: 1.28; }
  .contact h2 { font-size: clamp(20px, 2.8vw, 32px); margin-bottom: .75em; }
  .contact p { margin-bottom: 1.1em; }
  .partners { position: relative; bottom: auto; left: auto; transform: none; width: clamp(220px, 30vw, 322px); margin: 2.5rem auto 0; }
}
@media (max-width: 767px) {
  .photo { height: clamp(320px, 48svh, 520px); }
  .residence-logo { width: min(64%, 350px); bottom: 1.5%; }
  .information { margin-top: -7vw; padding: 14vw 6vw 14vw; border-radius: 50% 50% 0 0 / 7vw 7vw 0 0; }
  .message { margin-bottom: 3rem; }
  .message h1 { font-size: clamp(37px, 9.5vw, 58px); }
  .coming-soon { font-size: clamp(76px, 19vw, 120px); }
  .contacts { display: flex; flex-direction: column; align-items: center; gap: 2.15rem; }
  .contact { width: min(100%, 320px); font-size: 16px; line-height: 1.36; }
  .contact h2 { font-size: 23px; margin-bottom: .65em; }
  .contact p { margin-bottom: .9em; }
  .partners { width: min(65%, 260px); margin-top: 3.5rem; }
}
@media (max-width: 380px) {
  .photo { height: 45svh; min-height: 285px; }
  .message h1 { font-size: 34px; }
  .coming-soon { font-size: 72px; }
}
@media (max-width: 1023px) {
  .message { margin-bottom: 2rem; }
  .apartments-banner { position: relative; left: auto; top: auto; width: min(82.04%, 540px); margin: 0 0 2.25rem 13.23%; }
}
@media (min-width: 1024px) {
  .information__content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2.4cqh, 26px); padding-block: clamp(24px, 5cqh, 54px); }
  .information__content > * { flex-shrink: 0; }
  .message { position: relative; top: auto; left: auto; margin: 0; }
  .message h1 { font-size: clamp(38px, min(3.84vw, 6.85cqh), 74px); }
  .coming-soon { font-size: clamp(70px, min(7vw, 12.7cqh), 137px); }
  .apartments-banner { position: relative; top: auto; left: auto; max-width: 89%; }
  .contacts { position: relative; top: auto; left: auto; }
  .contact h2 { margin-bottom: clamp(12px, 2cqh, 1.9em); }
  .contact p { margin-bottom: 1.2em; }
  .partners { position: relative; bottom: auto; left: auto; transform: none; width: min(13.35vw, 23.7cqh, 256px); }
}