@font-face {
  font-family: Lighthaus;
  src: url("../fonts/Lighthaus-Regular-BhuLPPzQ.woff2")format("woff2"), url("../fonts/Lighthaus-Regular-Cu0qPI0z.woff")format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap
}

@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-Regular-B5jw9KDh.woff2")format("woff2"), url("../fonts/Manrope-Regular-7YlB9acO.woff")format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap
}

@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-Medium-RfWCML_O.woff2")format("woff2"), url("../fonts/Manrope-Medium-D_Ycukh7.woff")format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap
}

@font-face {
  font-family: Helvetica Neue;
  src: url("../fonts/HelveticaNeue-Regular-B8_-QJtD.woff2")format("woff2"), url("../fonts/HelveticaNeue-Regular-DL5iuH7l.woff")format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap
}

h1,
h2,
.hero-benefits h3,
.apartment-card h3,
.faq summary,
.stats b,
.routes b,
.site-menu__nav a,
.site-menu__phone {
  font-family: Lighthaus, Georgia, serif !important
}

:root {
  --ink: #16222b;
  --navy: #031534;
  --gold: #c9a45c;
  --paper: #f7f4ec;
  --page-gutter: 3.333vw;
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  min-width: 320px;
  margin: 0
}

body,
button,
input {
  font: inherit
}

a {
  color: inherit;
  text-decoration: none
}

button {
  border: 0
}

h1,
h2,
h3,
p {
  margin: 0
}

h1,
h2,
.hero-benefits h3,
.apartment-card h3,
.faq summary {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: Prata, Georgia, serif;
  font-weight: 400
}

h2 {
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1.28
}

.container {
  width: calc(100% - var(--page-gutter) * 2);
  margin-inline: auto
}

.section {
  padding-block: 100px
}

.button {
  background: var(--gold);
  color: #fff;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  display: inline-flex
}

.arrow {
  font-size: 20px
}

.image-slot {
  background: linear-gradient(135deg, #d9dddc, #92a5a4);
  min-height: 260px;
  position: relative;
  overflow: hidden
}

.image-slot:after {
  content: attr(data-image);
  color: #fff;
  letter-spacing: .08em;
  opacity: .72;
  font-size: 12px;
  position: fixed;
  bottom: 18px;
  left: 20px
}

.hero {
  color: #fff;
  background-color: #16222b;
  background-image: url("../images/hero/hero.webp");
  background-position: 50% -89px;
  background-repeat: no-repeat;
  background-size: 100% 115.67%;
  height: 915px;
  position: relative;
  overflow: hidden
}

.hero:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #16222beb 0%, #16222b80 35%, #16222b00 72%), linear-gradient(#16222b7a 0%, #16222b00 30%);
  position: absolute;
  inset: 0
}

.header {
  color: #fff;
  z-index: 99;
  align-items: center;
  gap: 40px;
  height: 80px;
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%)
}

.menu-button {
  color: #fff;
  cursor: pointer;
  background: 0 0;
  align-items: center;
  gap: 12px;
  display: flex
}

.burger {
  border-block: 1px solid;
  width: 24px;
  height: 12px
}

.logo {
  align-items: center;
  width: 214px;
  height: 41px;
  display: flex
}

.logo img {
  width: 100%;
  height: 100%;
  display: block
}

.logo .logo-mobile,
.header-phone img {
  display: none
}

.header-actions {
  align-items: center;
  gap: 40px;
  margin-left: auto;
  display: flex
}

.mobile-nav {
  display: none
}

.hero-copy {
  z-index: 2;
  padding-top: 153px;
  position: relative
}

.hero h1 {
  max-width: 773px;
  font-size: 64px;
  line-height: normal
}

.hero-copy p {
  max-width: 441px;
  margin: 20px 0 24px;
  font-size: 16px;
  line-height: 1.3
}

.hero-copy>.button {
  font-size: 18px;
  line-height: 1.3
}

.hero-benefits {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0d1d27a8;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  display: grid;
  position: absolute;
  bottom: 0
}

.hero-benefits article {
  padding: 40px var(--page-gutter);
  border: 1px solid #ffffff40;
  min-height: 151px
}

.hero-benefits h3 {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.3
}

.hero-benefits p {
  color: #fffc;
  font-size: 16px;
  line-height: 1.3
}

.split-about {
  grid-template-columns: minmax(0, 1fr) 668px;
  align-items: start;
  gap: 24px;
  display: grid
}

.photo-stack {
  gap: 24px;
  display: grid
}

.photo-stack img {
  object-fit: cover;
  width: 100%;
  height: 585px;
  display: block
}

.split-about__content {
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  display: flex;
  position: sticky;
  top: 40px
}

.split-about__content h2 {
  width: 593px;
  max-width: 100%;
  font-size: 52px;
  line-height: normal
}

.split-about__content>p,
.section-lead p {
  font-size: 18px;
  line-height: 1.3
}

.section-lead p {
  margin-top: 24px
}

.stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  display: grid
}

.stats div {
  flex-direction: column;
  gap: 4px;
  display: flex
}

.stats b {
  color: var(--gold);
  font-family: Prata, serif;
  font-size: 80px;
  font-weight: 400;
  line-height: 1.1
}

.stats small {
  font-size: 40px
}

.stats span {
  font-size: 16px;
  line-height: 1.3
}

.location {
  background: var(--ink);
  height: 1400px;
  position: relative;
  overflow: hidden
}

.location-bg {
  object-fit: fill;
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  inset: 0
}

.location-pin {
  width: 68px;
  height: 103px;
  position: absolute;
  top: 525px;
  left: 586px
}

.location-cards {
  justify-items: start;
  gap: 24px;
  padding-block: 100px;
  display: grid;
  position: relative
}

.glass-card {
  color: #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #16222ba3;
  width: 724px;
  padding: 40px
}

.glass-card h2 {
  font-size: 52px;
  line-height: normal
}

.glass-card p {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.3
}

.glass-card p+p {
  margin-top: 32px
}

.routes p {
  border-bottom: 1px solid #ffffff52;
  align-items: center;
  gap: 4px;
  padding-bottom: 12px;
  display: flex
}

.routes p+p {
  margin-top: 12px
}

.routes p:last-child {
  border-bottom: 0;
  padding-bottom: 0
}

.routes span {
  text-align: right;
  flex: 1;
  font-size: 16px
}

.routes b {
  text-transform: uppercase;
  white-space: nowrap;
  font-family: Prata, serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1
}

.section-lead {
  max-width: 680px
}

.wide-photo {
  height: 585px;
  margin-top: 24px
}

.infrastructure-placeholder {
  background: #e7e9ea;
  padding: 32px;
  position: relative
}

.infrastructure-placeholder p {
  width: 668px;
  max-width: 100%;
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.3
}

.feature-list {
  grid-template-columns: 1fr 1fr;
  gap: 24px 12px;
  margin-top: 24px;
  display: grid
}

.feature-list span {
  font-size: 18px
}

.feature-list span:before {
  content: "";
  vertical-align: middle;
  border-top: 1px solid;
  width: 32px;
  margin-right: 24px;
  display: inline-block
}

.video-hero {
  color: #fff;
  place-items: center;
  height: 900px;
  display: grid;
  position: relative;
  overflow: hidden
}

.video-hero>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.video-hero:after {
  content: "";
  background: radial-gradient(circle, #16222be0, #16222b14 58%);
  position: absolute;
  inset: 0
}

.video-hero__content {
  z-index: 1;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 657px;
  max-width: calc(100% - 32px);
  display: flex;
  position: relative
}

.video-hero__content h2 {
  font-size: 52px;
  line-height: normal
}

.video-hero__content p {
  width: 441px;
  max-width: 100%;
  font: 16px/1.3 Helvetica Neue, Arial, sans-serif
}

.video-play {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 12px;
  vertical-align: middle
}

.amenities-section {
  background: var(--navy)
}

.amenities-inner {
  padding: 100px 0 60px
}

.amenities-lead {
  padding-bottom: 96px
}

.amenities-lead h2 {
  width: 591px;
  max-width: 100%;
  font-size: 52px;
  line-height: normal
}

.amenities-lead p {
  color: #fffc;
  width: 549px;
  max-width: 100%
}

.amenity-row {
  border-top: 1px solid #f7f4ec52;
  grid-template-columns: minmax(0, 484px) minmax(0, 840px);
  justify-content: space-between;
  gap: 20px;
  min-height: 712px;
  padding-block: 60px;
  display: grid
}

.amenity-row>div {
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  display: flex
}

.amenity-copy {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  display: flex
}

.amenity-row h2 {
  font-size: 52px;
  line-height: normal
}

.amenity-row p {
  color: #fffc;
  font: 18px/1.3 Helvetica Neue, Arial, sans-serif
}

.amenity-row>img {
  aspect-ratio: 3/2;
  object-fit: cover;
  align-self: center;
  width: 100%;
  max-width: 840px;
  height: auto
}

.amenity-row .amenity-icon {
  object-fit: contain;
  width: 440px;
  max-width: 100%;
  height: 300px
}

.amenity-list {
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid
}

.amenity-list li {
  align-items: center;
  gap: 24px;
  font: 18px/1.3 Helvetica Neue, Arial, sans-serif;
  display: flex
}

.amenity-list li:before {
  content: "";
  border-top: 1px solid;
  flex: 0 0 32px;
  width: 32px
}

.eyebrow {
  color: #ffcd6b;
  font-size: 24px
}

.amenities-motion-ready .amenities-lead h2,
.amenities-motion-ready .amenities-lead p,
.amenities-motion-ready .amenity-row>div>* {
  opacity: 0;
  transition: opacity .85s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1);
  transform: translate(-32px, 24px)
}

.amenities-motion-ready .amenities-lead p {
  transition-delay: .12s
}

.amenities-motion-ready .amenity-row>div>:nth-child(2) {
  transition-delay: .1s
}

.amenities-motion-ready .amenity-row>div>:nth-child(3) {
  transition-delay: .2s
}

.amenities-motion-ready .amenity-row>img {
  clip-path: inset(0 0 0 100%);
  opacity: .35;
  transform-origin: 100%;
  transition: clip-path 1.15s cubic-bezier(.76, 0, .24, 1), opacity .7s, transform 1.4s cubic-bezier(.22, 1, .36, 1);
  transform: scale(1.06)
}

.amenities-motion-ready .amenities-lead.is-visible h2,
.amenities-motion-ready .amenities-lead.is-visible p,
.amenities-motion-ready .amenity-row.is-visible>div>* {
  opacity: 1;
  transform: translate(0, 0)
}

.amenities-motion-ready .amenity-row.is-visible>img {
  clip-path: inset(0);
  opacity: 1;
  transform: scale(1)
}

@media (prefers-reduced-motion:reduce) {

  .amenities-motion-ready .amenities-lead h2,
  .amenities-motion-ready .amenities-lead p,
  .amenities-motion-ready .amenity-row>div>*,
  .amenities-motion-ready .amenity-row>img {
    clip-path: none;
    opacity: 1;
    transition: none;
    transform: none
  }
}

.architecture-copy {
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
  display: flex
}

.architecture-copy h2 {
  width: 691px;
  max-width: 100%;
  font-size: 52px;
  line-height: normal
}

.architecture-copy p {
  width: 540px;
  max-width: 100%;
  font: 18px/1.3 Helvetica Neue, Arial, sans-serif
}

.architecture-gallery {
  background: var(--navy);
  display: block;
  position: relative
}

.architecture-gallery figure {
  height: 100svh;
  min-height: 620px;
  padding: max(0px, calc(var(--page-gutter) - 20px));
  isolation: isolate;
  margin: 0;
  position: sticky;
  top: 0;
  overflow: hidden;
  box-shadow: 0 -18px 45px #0315343d
}

.architecture-gallery figure:first-child {
  z-index: 1
}

.architecture-gallery figure:nth-child(2) {
  z-index: 2
}

.architecture-gallery figure:nth-child(3) {
  z-index: 3
}

.architecture-gallery figure:nth-child(4) {
  z-index: 4
}

.architecture-gallery figure:nth-child(5) {
  z-index: 5
}

.architecture-gallery figure:after {
  content: "";
  z-index: 1;
  opacity: var(--architecture-dim, 0);
  will-change: opacity;
  pointer-events: none;
  background: #031534;
  transition: opacity .1s linear;
  position: absolute;
  inset: 0
}

.architecture-gallery img {
  z-index: -2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.architecture-gallery figcaption {
  z-index: 2;
  background: var(--navy);
  color: #fff;
  padding: 20px;
  font: 24px/1 Lighthaus, Georgia, serif;
  display: inline-block;
  position: relative
}

@media (prefers-reduced-motion:reduce) {
  .architecture-gallery figure {
    height: 758px;
    min-height: 0;
    position: relative;
    top: auto
  }

  .architecture-gallery figure:first-child {
    height: 793px
  }
}

.new-buildings {
  background: var(--navy) url("../images/scenarios-background.webp") center top/cover no-repeat;
  color: #fff;
  overflow: hidden
}

.new-buildings__intro {
  min-height: 442px;
  padding: 100px var(--page-gutter) 40px;
  flex-direction: column;
  gap: 24px;
  display: flex
}

.new-buildings__eyebrow {
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff0a;
  border: 1px solid #ffffff1f;
  align-self: flex-start;
  padding: 20px;
  font: 24px Lighthaus, Georgia, serif
}

.new-buildings__intro>div {
  flex-direction: column;
  gap: 16px;
  display: flex
}

.new-buildings__intro h2 {
  width: 591px;
  max-width: 100%;
  font-size: 52px;
  line-height: normal
}

.new-buildings__intro p {
  color: #fffc;
  width: 549px;
  max-width: 100%;
  font: 18px/1.3 Helvetica Neue, Arial, sans-serif
}

.new-buildings__facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid
}

.new-buildings__facts article {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff0a;
  border: 1px solid #ffffff1f;
  flex-direction: column;
  gap: 12px;
  min-height: 165px;
  padding: 40px;
  display: flex
}

.new-buildings__facts strong {
  color: #ffcd6b;
  text-transform: uppercase;
  font: 24px/1.3 Lighthaus, Georgia, serif
}

.new-buildings__facts p {
  color: #fffc;
  font: 16px/1.3 Manrope, Arial, sans-serif
}

.new-buildings__gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: min(61.25vw, 882px);
  display: grid
}

.new-buildings__gallery>div {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: grid;
  overflow: hidden
}

.new-buildings__gallery figure {
  min-width: 0;
  min-height: 0;
  margin: 0;
  position: relative;
  overflow: hidden
}

.new-buildings__gallery img {
  object-fit: cover;
  width: 100%;
  height: 100%
}

.new-buildings__gallery figcaption {
  background: var(--navy);
  text-transform: uppercase;
  padding: 20px;
  font: 20px Lighthaus, Georgia, serif;
  position: absolute;
  top: 40px;
  left: 40px
}

@media (width<=900px) {
  .new-buildings__intro {
    min-height: 0;
    padding: 64px 16px 40px
  }

  .new-buildings__intro h2 {
    font-size: 42px
  }

  .new-buildings__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .new-buildings__facts article {
    min-height: 150px;
    padding: 32px 24px
  }

  .new-buildings__gallery {
    grid-template-columns: 1fr;
    height: auto
  }

  .new-buildings__gallery>figure {
    height: 620px
  }

  .new-buildings__gallery>div figure {
    height: 380px
  }
}

@media (width<=620px) {
  .new-buildings__eyebrow {
    padding: 16px;
    font-size: 18px
  }

  .new-buildings__intro h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .new-buildings__intro p {
    font-size: 15px
  }

  .new-buildings__facts {
    grid-template-columns: 1fr
  }

  .new-buildings__facts article {
    min-height: 0;
    padding: 28px 16px
  }

  .new-buildings__gallery>figure {
    height: 480px
  }

  .new-buildings__gallery>div figure {
    height: 300px
  }

  .new-buildings__gallery figcaption {
    padding: 16px;
    font-size: 18px;
    top: 16px;
    left: 16px
  }
}

.interior-hero {
  color: #fff;
  height: 900px;
  position: relative;
  overflow: hidden
}

.interior-hero>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.interior-hero:after {
  content: "";
  background: linear-gradient(90deg, #031534cc, #0315340a 65%);
  position: absolute;
  inset: 0
}

.interior-hero__copy {
  z-index: 1;
  top: 60px;
  left: var(--page-gutter);
  width: 559px;
  max-width: calc(100% - var(--page-gutter) * 2);
  position: absolute
}

.interior-hero__copy h2 {
  margin-bottom: 24px;
  font-size: 52px;
  line-height: 1
}

.interior-hero__copy p {
  width: 520px;
  max-width: 100%;
  margin-top: 16px;
  font: 18px/1.3 Helvetica Neue, Arial, sans-serif
}

.interior-hero__actions {
  gap: 16px;
  margin-top: 32px;
  display: flex
}

.button--outline {
  color: #fff;
  background: 0 0;
  border: 1px solid #fff
}

.interior-hero__card {
  z-index: 1;
  top: 40px;
  right: var(--page-gutter);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #031534a3;
  width: 387px;
  padding: 40px;
  position: absolute
}

.interior-hero__card h3 {
  margin-bottom: 20px;
  font-size: 24px
}

.interior-hero__card p {
  font: 16px/1.35 Helvetica Neue, Arial, sans-serif
}

.apartments-section {
  background: var(--navy) url("../images/bg-2.png") center;
  color: #fff;
  padding: 100px 0 40px
}

.apartments-section>.apartments-heading {
  width: calc(100% - var(--page-gutter) * 2);
  margin-inline: auto
}

.apartments-section>.apartments-content {
  width: min(calc(100% - var(--page-gutter) * 2), 1600px);
  margin-right: auto;
  margin-left: var(--page-gutter);
  border-block: 1px solid #f7f4ec52;
}

.apartments-heading {
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 40px;
  display: flex
}

.apartments-heading>div {
  flex-direction: column;
  gap: 16px;
  width: 591px;
  display: flex
}

.apartments-heading h2 {
  font-size: 52px;
  line-height: normal
}

.apartments-heading p {
  color: #fffc;
  width: 549px;
  max-width: 100%;
  font: 18px/1.3 Helvetica Neue, Arial, sans-serif
}

.apartments-content {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-block: 40px;
  display: grid
}

.apartment-types {
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  display: flex
}

.apartment-types>button {
  color: inherit;
  text-align: left;
  text-transform: uppercase;
  opacity: .24;
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
  font: 24px/1 Lighthaus, Georgia, serif;
  transition: opacity .25s, color .25s, padding .25s, border-color .25s
}

.apartment-types>button.is-active {
  border-left: 2px solid var(--gold);
  opacity: 1;
  padding-left: 16px
}

.apartment-types .button {
  margin-top: auto
}

.apartment-details,
.apartment-photos {
  flex-direction: column;
  gap: 32px;
  display: flex
}

.apartment-price {
  font-size: 24px
}

.apartment-price strong {
  font: 52px/1.3 Lighthaus, Georgia, serif
}

.apartment-details>p:not(.apartment-price),
.apartment-details li {
  color: #fffc
}

.apartment-details ul {
  gap: 24px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: grid
}

.apartment-details li,
.management__services li,
.resort-proof__copy li {
  position: relative;
  padding-left: 28px;
}

.apartment-details li::before,
.management__services li::before,
.resort-proof__copy li::before {
  content: "";
  position: absolute;
  top: .15em;
  left: 0;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 10 4 4 8-8' stroke='%23c9a45c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.apartment-details > .photo-zoom,
.apartment-photos > .photo-zoom {
  object-fit: cover;
  width: 100%;
  height: 370px
}

.dark-section,
.faq,
footer {
  background: var(--navy);
  color: #fff
}

.gallery-grid {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
  display: grid
}

.gallery-grid .tall {
  grid-row: span 2;
  min-height: 620px
}

.architecture {
  padding-top: 100px
}

.panorama {
  height: 760px;
  margin-top: 40px
}

.center-lead {
  text-align: center;
  max-width: 760px;
  margin: auto
}

.center-lead p {
  margin-top: 24px
}

.cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  display: grid
}

.apartment-card {
  border: 1px solid #16222b2e
}

.apartment-card .image-slot {
  height: 430px
}

.apartment-card>div:last-child {
  padding: 24px
}

.apartment-card h3 {
  margin: 10px 0 22px;
  font-size: 24px
}

.apartment-card span {
  color: #68747a
}

.value {
  background: var(--paper);
  padding: 100px 0
}

.value-grid {
  grid-template-columns: 1.8fr 1fr;
  gap: 24px;
  display: grid
}

.value-grid>div>p {
  max-width: 800px;
  margin: 24px 0;
  font-size: 18px;
  line-height: 1.3
}

.mini-cards article {
  border: 1px solid #16222b2e;
  padding: 32px
}

.mini-cards i {
  color: var(--gold);
  font-style: normal
}

.mini-cards h3 {
  margin: 24px 0 12px;
  font-size: 22px
}

.lead-form {
  background: var(--navy);
  color: #fff;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  display: flex
}

.lead-form h3 {
  font-size: 26px
}

.lead-form input:not([type=checkbox]),
.footer-form input:not([type=checkbox]) {
  color: #fff;
  background: #ffffff0f;
  border: 1px solid #ffffff26;
  padding: 16px 20px
}

.lead-form small,
footer small {
  color: #ffffff9e
}

.usage-scenarios {
  background: var(--navy) url("../images/bg-2.png") center;
  color: #fff;
  height: 827px;
  padding: 100px 0 60px;
  position: relative;
  overflow: hidden
}

.usage-scenarios>h2 {
  text-align: center;
  width: 686px;
  max-width: 100%;
  margin: 0 auto;
  font-size: 52px;
  line-height: normal
}

.usage-scenarios__content {
  width: min(calc(100% - var(--page-gutter) * 2), 1440px);
  flex-direction: column;
  align-items: center;
  gap: 40px;
  display: flex;
  position: absolute;
  bottom: 60px;
  right: 50%;
  transform: translate(50%)
}

.usage-scenarios__cards {
  grid-template-columns: repeat(3, minmax(0, 437px));
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  display: grid
}

.usage-scenarios__cards article {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
  background: #f7f4ec0f;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 307px;
  padding: 40px;
  display: flex;
  position: relative
}

.usage-scenarios__cards article>img {
  object-fit: contain;
  width: 64px;
  height: 64px
}

.usage-scenarios__cards article>div {
  flex-direction: column;
  gap: 16px;
  width: 100%;
  display: flex
}

.usage-scenarios__cards h3 {
  text-transform: uppercase;
  margin: 0;
  font: 24px Lighthaus, Georgia, serif
}

.usage-scenarios__cards p {
  color: #fffc;
  font: 18px/1.3 Manrope, Arial, sans-serif
}

.usage-scenarios__cards .is-featured {
  border: 2px solid var(--gold);
  padding: 38px
}

.usage-scenarios__cards .is-featured>span {
  background: var(--gold);
  white-space: nowrap;
  padding: 16px 20px;
  font-size: 18px;
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translate(-50%)
}

.usage-scenarios__actions {
  gap: 16px;
  display: flex
}

.usage-scenarios__calculation {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #f7f4ec0a;
  border: 1px solid #f7f4eca3;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 18px;
  transition: color .25s, background-color .25s, border-color .25s, transform .25s;
  display: flex
}

.usage-scenarios__calculation img {
  width: 20px;
  height: 20px
}

.management {
  background: var(--navy) url("../images/bg-2.png") center;
  color: #fff;
  padding: 100px 0 60px
}

.management__inner {
  width: calc(100% - var(--page-gutter) * 2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 46.4vw);
  align-items: start;
  gap: 40px;
  display: grid
}

.management__intro {
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  min-width: 0;
  display: flex;
  position: sticky;
  top: 24px
}

.management__intro>div:first-child {
  width: 100%
}

.management h2 {
  width: 100%;
  margin-bottom: 16px;
  font-size: 52px;
  line-height: normal
}

.management__intro p,
.management__services li,
.management__steps p {
  color: #fffc;
  font: 18px/1.3 Manrope, Arial, sans-serif
}

.management__services {
  width: 100%
}

.management__services h3 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 500
}

.management__services ul {
  gap: 20px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  display: grid
}

.management__services li {
  align-items: center;
  gap: 12px;
  display: flex
}


.management__steps {
  gap: 24px;
  min-width: 0;
  display: grid
}

.management__steps article {
  background: #f7f4ec0f;
  height: 536px;
  padding: 40px;
  position: relative;
  overflow: hidden
}

.management__steps article>div {
  z-index: 1;
  flex-direction: column;
  gap: 16px;
  width: 484px;
  max-width: 100%;
  display: flex;
  position: relative
}

.management__steps h3 {
  text-transform: uppercase;
  margin: 0;
  font: 40px Lighthaus, Georgia, serif
}

.management__steps p {
  width: 484px;
  max-width: 100%
}

.management__steps article img {
  max-width: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%)
}

.management__steps article:first-child img {
  width: 536px;
  height: 465px;
  top: calc(50% + 35.5px)
}

.management__steps article:nth-child(2) img {
  width: 496px;
  height: 430px;
  top: calc(50% + 65px)
}

.management__steps article:nth-child(3) img {
  width: 775px;
  height: 672px;
  top: calc(50% + 47px)
}

.management__steps article:nth-child(4) img {
  width: 787px;
  height: 682px;
  top: 50%
}

.slogan-strip {
  background: var(--paper);
  height: 900px;
  position: relative;
  overflow: hidden
}

.slogan-strip__images {
  align-items: flex-start;
  gap: 20px;
  display: flex;
  position: absolute;
  top: 80px;
  left: 92px
}

.slogan-strip__images > .photo-zoom {
  object-fit: cover
}

.slogan-strip__images > .photo-zoom:first-child {
  width: 80px;
  height: 80px
}

.slogan-strip__images > .photo-zoom:nth-child(2) {
  width: 101px;
  height: 100px
}

.slogan-strip__images > .photo-zoom:nth-child(3) {
  width: 146px;
  height: 145px
}

.slogan-strip__images > .photo-zoom:nth-child(4) {
  width: 206px;
  height: 203px
}

.slogan-strip>p {
  white-space: nowrap;
  width: max-content;
  margin: 0;
  font: 70px/1 Lighthaus, Georgia, serif;
  position: absolute;
  top: 395px;
  left: 564px
}

.faq {
  padding: 100px 0
}

.faq-inner {
  width: min(100% - 80px, 1040px);
  margin: auto
}

.faq h2 {
  text-align: center;
  margin-bottom: 32px
}

.accordion {
  gap: 20px;
  display: grid
}

.accordion details {
  background: #ffffff0f;
  border: 1px solid #0000;
  padding: 32px
}

.accordion summary {
  cursor: pointer;
  justify-content: space-between;
  font-size: 22px;
  list-style: none;
  display: flex
}

.accordion summary span:after {
  content: "+"
}

.accordion details[open] summary span:after {
  content: "−"
}

.accordion details p {
  border-top: 1px solid #fff3;
  margin-top: 30px;
  padding-top: 30px;
  line-height: 1.4
}

.footer-grid {
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 60px 0 40px;
  display: grid
}

.footer-grid>div>p {
  margin: 24px 0;
  font-size: 18px;
  line-height: 1.35
}

.footer-form {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  display: grid
}

.footer-form button {
  grid-column: 1/-1;
  justify-self: start
}

.contact-card {
  background: #ffffff0f;
  gap: 24px;
  padding: 32px;
  display: grid
}

.contact-card p {
  font-size: 22px
}

.contact-card span {
  color: #fff9;
  margin-bottom: 4px;
  font-size: 16px;
  display: block
}

.socials {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  display: grid
}

.socials a {
  text-align: center;
  border: 1px solid #ffffff80;
  padding: 16px
}

.footer-map {
  background: #16222b;
  height: 300px;
  margin-top: 24px;
  overflow: hidden
}

.footer-map iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block
}

.video-modal {
  color: #fff;
  background: 0 0;
  border: 0;
  width: min(1120px, 100% - 48px);
  max-width: none;
  padding: 0;
  overflow: visible
}

.video-modal::backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #031534e0
}

.video-modal__inner {
  background: #000;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 80px #0008
}

.video-modal video {
  aspect-ratio: 16/9;
  background: #000;
  width: 100%;
  max-height: calc(100dvh - 96px);
  display: block
}

.video-modal__close {
  z-index: 2;
  color: #fff;
  cursor: pointer;
  background: #031534;
  border: 1px solid #fff8;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  transition: background-color .25s, transform .25s;
  position: absolute;
  top: -44px;
  right: 0
}

.video-modal__close span:before,
.video-modal__close span:after {
  content: "";
  border-top: 1px solid;
  width: 18px;
  position: absolute;
  top: 17px;
  left: 9px
}

.video-modal__close span:before {
  transform: rotate(45deg)
}

.video-modal__close span:after {
  transform: rotate(-45deg)
}

@media (hover:hover) {
  .video-modal__close:hover {
    background: #c9a45c;
    transform: rotate(90deg)
  }
}

@media (width<=620px) {
  .video-modal {
    width: calc(100% - 24px)
  }
}

.footer-bottom {
  color: #fff9;
  border-top: 1px solid #ffffff2e;
  justify-content: space-between;
  padding: 32px 0 40px;
  font-size: 14px;
  display: flex
}

@media (width<=900px) {
  .container {
    width: min(100% - 32px, 1360px)
  }

  .section {
    padding-block: 64px
  }

  .interior-hero {
    height: auto;
    min-height: 760px;
    padding: 48px 16px
  }

  .interior-hero__copy {
    max-width: 100%;
    position: relative;
    top: auto;
    left: auto
  }

  .interior-hero__copy h2,
  .management h2 {
    font-size: 34px
  }

  .interior-hero__card {
    width: auto;
    padding: 24px;
    inset: auto 16px 16px
  }

  .interior-hero__actions {
    flex-wrap: wrap
  }

  .management {
    padding: 64px 0 32px
  }

  .management__inner {
    grid-template-columns: 1fr
  }

  .management__intro {
    gap: 64px;
    min-height: 0;
    position: static
  }

  .management__steps article {
    min-height: 320px;
    padding: 24px
  }

  .slogan-strip {
    height: 620px
  }

  .slogan-strip__images {
    gap: 10px;
    top: 48px;
    left: 16px
  }

  .slogan-strip__images > .photo-zoom:nth-child(n) {
    width: 72px;
    height: 72px
  }

  .slogan-strip>p {
    white-space: normal;
    width: calc(100% - 32px);
    font-size: 46px;
    top: 300px;
    left: 16px
  }

  .header {
    gap: 18px
  }

  .logo {
    font-size: 13px
  }

  .header-actions>a:first-child {
    display: none
  }

  .hero {
    background-position: 50% -98px;
    height: 1000px
  }

  .hero-benefits {
    grid-template-columns: 1fr 1fr
  }

  .split-about,
  .value-grid,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .photo-stack {
    order: 2;
    grid-template-columns: repeat(2, 1fr)
  }

  .photo-stack img {
    height: 360px
  }

  .split-about__content {
    position: static
  }

  .cards {
    grid-template-columns: 1fr 1fr
  }

  .panorama {
    height: 520px
  }

  .amenity-row {
    grid-template-columns: 1fr;
    gap: 32px;
    height: auto;
    min-height: 0;
    padding: 64px 0
  }

  .amenity-row>div {
    gap: 40px;
    padding-bottom: 0
  }

  .amenity-row>img {
    height: 520px
  }

  .apartments-content {
    grid-template-columns: 1fr 1fr
  }

  .apartment-types {
    grid-column: 1/-1;
    grid-template-columns: repeat(4, 1fr);
    display: grid
  }

  .apartment-types .button {
    grid-column: 1/-1;
    justify-self: start
  }
}

@media (width<=620px) {
  h2 {
    font-size: 34px
  }

  .header-actions .button {
    display: none
  }

  .hero {
    background-position: 50% -86px;
    height: 880px
  }

  .hero-copy {
    padding-top: 144px
  }

  .hero h1 {
    font-size: 38px
  }

  .hero-benefits article {
    min-height: 120px;
    padding: 18px 16px
  }

  .hero-benefits article:first-child {
    border-left: 0;
  }

  .hero-benefits article:last-child {
    border-right: none;
  }

  .hero-benefits h3 {
    font-size: 14px
  }

  .hero-benefits p {
    font-size: 11px
  }

  .mobile-nav {
    z-index: 10;
    background: var(--navy);
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    position: absolute;
    top: 70px;
    left: 16px;
    right: 16px
  }

  .menu-open .mobile-nav {
    display: flex
  }

  .photo-stack,
  .gallery-grid,
  .cards,
  .mini-cards {
    grid-template-columns: 1fr
  }

  .photo-stack img {
    height: 360px
  }

  .stats {
    grid-template-columns: 1fr 1fr
  }

  .stats b {
    font-size: 52px
  }

  .glass-card {
    width: 100%;
    padding: 24px
  }

  .glass-card h2 {
    font-size: 32px
  }

  .feature-list {
    grid-template-columns: 1fr
  }

  .gallery-grid .tall {
    min-height: 400px
  }

  .apartment-card .image-slot {
    height: 360px
  }

  .value {
    padding: 64px 0
  }

  .faq-inner {
    width: calc(100% - 32px)
  }

  .accordion details {
    padding: 22px
  }

  .accordion summary {
    font-size: 17px
  }

  .footer-form {
    grid-template-columns: 1fr
  }

  .footer-bottom {
    gap: 16px;
    display: grid
  }

  .panorama {
    height: 420px
  }

  .video-hero {
    height: 720px
  }

  .video-hero__content h2,
  .amenities-lead h2,
  .amenity-row h2,
  .architecture-copy h2,
  .apartments-heading h2 {
    font-size: 34px
  }

  .amenities-inner {
    padding-top: 64px
  }

  .amenities-lead {
    padding-bottom: 48px
  }

  .amenity-row {
    padding: 48px 0
  }

  .amenity-row>img {
    aspect-ratio: 3/2;
    height: auto
  }

  .architecture-copy {
    max-width: calc(100% - 32px);
    margin-left: 16px
  }

  .architecture-gallery figure,
  .architecture-gallery figure:first-child {
    height: 100svh;
    min-height: 560px
  }

  .apartments-section {
    padding: 64px 16px 32px
  }

  .apartments-heading {
    flex-direction: column;
    gap: 24px
  }

  .apartments-content {
    grid-template-columns: 1fr
  }

  .apartment-types {
    grid-template-columns: 1fr 1fr
  }
}

@media (width<=620px) and (prefers-reduced-motion:reduce) {

  .architecture-gallery figure,
  .architecture-gallery figure:first-child {
    height: 420px;
    min-height: 0
  }
}

body.menu-open {
  overflow: hidden
}

.site-menu {
  z-index: 100;
  color: #f7f4ec;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: #16222b;
  flex-direction: column;
  min-height: 100dvh;
  padding: 28px 0 55px;
  transition: opacity .35s, visibility .35s;
  display: flex;
  position: fixed;
  inset: 0
}

.menu-open .site-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto
}

.site-menu__top,
.site-menu__content,
.site-menu__footer {
  width: calc(100% - var(--page-gutter) * 2);
  margin-inline: auto
}

.site-menu__close {
  color: inherit;
  cursor: pointer;
  background: 0 0;
  align-items: center;
  gap: 12px;
  padding: 0;
  font-size: 16px;
  line-height: 1.3;
  display: flex
}

.site-menu__close span {
  width: 24px;
  height: 24px;
  position: relative;
  overflow: hidden
}

.site-menu__close span:before,
.site-menu__close span:after {
  content: "";
  background: currentColor;
  width: 1.2px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 11px
}

.site-menu__close span:before {
  transform: rotate(45deg)
}

.site-menu__close span:after {
  transform: rotate(-45deg)
}

.site-menu__content {
  flex: 1;
  align-items: flex-start;
  gap: 80px;
  margin-top: 51px;
  padding-left: 524px;
  display: flex
}

.site-menu__nav {
  flex-direction: column;
  flex: 0 0 297px;
  align-items: flex-start;
  gap: 32px;
  padding-top: 7px;
  display: flex
}

.site-menu__nav a {
  text-transform: lowercase;
  opacity: .24;
  align-items: center;
  gap: 12px;
  font-family: Lighthaus, Georgia, serif;
  font-size: 32px;
  line-height: 1;
  transition: opacity .2s;
  display: flex;
  position: relative
}

.site-menu__nav a:before {
  content: "";
  background: var(--gold);
  opacity: 0;
  width: 2px;
  height: 40px;
  position: absolute;
  left: -20px
}

.site-menu__nav a:hover,
.site-menu__nav a:focus-visible,
.site-menu__nav a.is-active,
.site-menu__nav a.is-active:before {
  opacity: 1
}

.site-menu__nav img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px
}

.site-menu__preview {
  object-fit: cover;
  flex: none;
  width: auto;
  min-width: 0;
  max-width: 720px;
  height: clamp(240px, 100dvh - 300px, 480px);
  margin-left: auto
}

.site-menu__footer {
  align-items: center;
  min-height: 68px;
  display: flex
}

.site-menu__cta {
  background: var(--gold);
  align-items: center;
  gap: 16px;
  margin-right: 399px;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.3;
  display: flex
}

.site-menu__cta img {
  width: 12px;
  height: 12px
}

.site-menu__phone {
  white-space: nowrap;
  font-family: Lighthaus, Georgia, serif;
  font-size: 52px;
  line-height: 1.3
}

.site-menu__socials {
  gap: 20px;
  margin-left: auto;
  display: flex
}

.site-menu__socials a {
  border: 1px solid #f7f4eca3;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 152px;
  height: 56px;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.3;
  display: flex
}

.site-menu__socials img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px
}

@media (width<=1200px) {
  .site-menu__content {
    width: calc(100% - var(--page-gutter) * 2);
    justify-content: flex-end;
    gap: 48px;
    margin-inline: auto;
    padding-left: 0
  }

  .site-menu__nav {
    flex-basis: 260px;
    gap: 24px
  }

  .site-menu__preview {
    flex: 0 0 min(44vw, 459px);
    width: min(44vw, 459px);
    min-width: 0;
    height: min(33vw, 342px)
  }

  .site-menu__cta {
    margin-right: auto
  }

  .site-menu__phone {
    margin-left: 32px;
    font-size: 40px
  }

  .site-menu__socials {
    margin-left: 32px
  }

  .site-menu__socials a {
    width: auto
  }
}

@media (width<=900px) {

  .site-menu__top,
  .site-menu__content,
  .site-menu__footer {
    width: min(100% - 32px, 1360px)
  }

  .site-menu__content {
    gap: 32px;
    margin-top: 48px
  }

  .site-menu__preview {
    flex-basis: 44vw;
    width: 44vw;
    height: 24vw
  }

  .site-menu__footer {
    flex-wrap: wrap;
    gap: 20px
  }

  .site-menu__phone {
    margin-left: auto
  }

  .site-menu__socials {
    justify-content: flex-end;
    width: 100%;
    margin-left: 0
  }

  .site-menu__nav a {
    font-size: 24px
  }
}

@media (width<=620px) {
  .site-menu {
    padding: 24px 0
  }

  .site-menu__content {
    margin-top: 44px;
    display: flex
  }

  .site-menu__nav {
    flex-basis: auto;
    gap: 14px
  }

  .site-menu__nav a {
    font-size: 28px
  }

  .site-menu__preview {
    display: none
  }

  .site-menu__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .site-menu__phone {
    order: -1;
    margin-left: 0;
    font-size: 28px
  }

  .site-menu__cta {
    margin-right: 0
  }

  .site-menu__socials {
    justify-content: stretch;
    width: 100%
  }

  .site-menu__socials a {
    flex: 1
  }
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent
}

.button,
.site-menu__cta,
.site-menu__socials a,
.socials a,
.menu-button,
.site-menu__close,
.header-actions>a:first-child,
.contact-card a,
.mobile-nav a,
.faq summary {
  transition: color .25s, background-color .25s, border-color .25s, opacity .25s, transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s
}

.button .arrow,
.site-menu__cta img,
.site-menu__nav img {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  display: inline-block
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #ffcd6b
}

.button:disabled {
  cursor: default;
  opacity: .65
}

@media (hover:hover) {

  .button:not(:disabled):hover,
  .site-menu__cta:hover {
    background: #dfbd79;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px #0315342e
  }

  .button:not(:disabled):hover .arrow,
  .site-menu__cta:hover img {
    transform: translate(3px, -3px)
  }

  .button.button--outline:not(:disabled):hover {
    color: var(--navy);
    background: #fff;
    border-color: #fff
  }

  .menu-button:hover,
  .site-menu__close:hover,
  .header-actions>a:first-child:hover,
  .contact-card a:hover,
  .mobile-nav a:hover,
  .site-menu__phone:hover {
    color: #ffcd6b
  }

  .menu-button:hover .burger {
    transform: scaleX(.78)
  }

  .site-menu__close:hover span {
    transform: rotate(90deg)
  }

  .site-menu__nav a:hover img {
    transform: translate(3px, -3px)
  }

  .site-menu__socials a:hover,
  .socials a:hover {
    color: #ffcd6b;
    background: #ffcd6b1f;
    border-color: #ffcd6b;
    transform: translateY(-2px)
  }

  .faq summary:hover {
    color: #ffcd6b;
    transform: translate(4px)
  }

  .logo:hover {
    opacity: .78
  }
}

.burger,
.site-menu__close span,
.logo {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .25s
}

@media (prefers-reduced-motion:reduce) {

  .button,
  .site-menu__cta,
  .site-menu__socials a,
  .socials a,
  .menu-button,
  .site-menu__close,
  .faq summary,
  .button .arrow,
  .site-menu__cta img,
  .site-menu__nav img,
  .burger,
  .site-menu__close span,
  .logo {
    transition-duration: 0s
  }
}

@media (width<=900px) {
  .usage-scenarios {
    background-size: auto 100%;
    height: auto;
    padding: 64px 16px
  }

  .usage-scenarios>h2 {
    font-size: 42px
  }

  .usage-scenarios__content {
    width: 100%;
    margin-top: 96px;
    position: static;
    transform: none
  }

  .usage-scenarios__cards {
    grid-template-columns: 1fr
  }

  .usage-scenarios__cards article {
    min-height: 0
  }

  .usage-scenarios__actions {
    flex-wrap: wrap;
    justify-content: center
  }

  .management__intro {
    gap: 32px
  }

  .management__steps article {
    height: 536px;
    min-height: 0
  }
}

@media (width<=620px) {
  .usage-scenarios>h2 {
    font-size: 34px
  }

  .usage-scenarios__content {
    margin-top: 80px
  }

  .usage-scenarios__cards article {
    padding: 32px 24px
  }

  .usage-scenarios__cards .is-featured {
    padding: 30px 22px
  }

  .usage-scenarios__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%
  }

  .usage-scenarios__actions>* {
    width: 100%
  }

  .usage-scenarios__calculation {
    font-size: 16px
  }

  .management__steps article {
    height: 430px
  }

  .management__steps h3 {
    font-size: 32px
  }

  .management__steps article:first-child img {
    width: 430px;
    height: auto
  }

  .management__steps article:nth-child(2) img {
    width: 400px;
    height: auto
  }

  .management__steps article:nth-child(3) img {
    width: 600px;
    height: auto
  }

  .management__steps article:nth-child(4) img {
    width: 610px;
    height: auto
  }
}

@media (hover:hover) {
  .usage-scenarios__calculation:hover {
    color: #ffcd6b;
    background: #ffcd6b1f;
    border-color: #ffcd6b;
    transform: translateY(-2px)
  }
}

.value {
  background: var(--navy);
  color: #fff;
  border: 1px solid #f7f4ec52;
  padding: 100px 3.333vw 60px
}

.value-grid {
  grid-template-columns: minmax(0, 1fr) minmax(520px, .68fr);
  gap: 40px;
  width: 100%;
  margin: auto;
  display: grid
}

.value-copy {
  flex-direction: column;
  gap: 24px;
  display: flex
}

.value-copy>h2 {
  width: 593px;
  max-width: 100%;
  font-size: 52px;
  line-height: normal
}

.value-grid>.value-copy>p {
  width: 100%;
  max-width: none;
  margin: 0;
  font: 18px/1.3 Manrope, Arial, sans-serif
}

.value-copy>span {
  color: #ffffffa3;
  font-size: 18px
}

.mini-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  display: grid
}

.mini-cards article {
  background: #ffffff0f;
  border: 0;
  flex-direction: column;
  gap: 24px;
  min-height: 293px;
  padding: 32px;
  display: flex
}

.mini-cards article>img {
  object-fit: contain;
  width: 64px;
  height: 64px
}

.mini-cards article>div {
  flex-direction: column;
  gap: 16px;
  display: flex
}

.mini-cards h3 {
  text-transform: uppercase;
  margin: 0;
  font: 24px Lighthaus, Georgia, serif
}

.mini-cards p {
  color: #fffc;
  font: 16px/1.3 Manrope, Arial, sans-serif
}

.lead-form {
  background: #ffffff0f;
  align-self: stretch;
  gap: 20px;
  padding: 32px
}

.lead-form h3 {
  text-transform: uppercase;
  margin-bottom: 0;
  font: 24px Lighthaus, Georgia, serif
}

.lead-form input:not([type=checkbox]) {
  min-height: 57px
}

.lead-form .button {
  width: 100%;
  font-size: 18px
}

.lead-form small {
  margin-top: 0;
  font-size: 16px;
  line-height: normal
}

.resort-proof {
  width: calc(100% - var(--page-gutter) * 2);
  margin: auto;
  padding-top: 60px
}

.resort-proof__top {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 520px);
  gap: 40px;
  display: grid
}

.resort-proof__copy {
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  display: flex
}

.resort-proof__copy h2 {
  width: 800px;
  max-width: 100%;
  font-size: 52px;
  line-height: normal
}

.resort-proof__copy>p {
  width: 100%;
  font: 18px/1.3 Manrope, Arial, sans-serif
}

.resort-proof__copy ul {
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex
}

.resort-proof__copy li {
  color: #16222bcc;
  white-space: nowrap;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  display: flex
}


.review-card {
  background: #16222b0f;
  flex-direction: column;
  gap: 24px;
  min-height: 469px;
  padding: 32px;
  display: flex
}

.review-card__rating {
  align-items: center;
  gap: 16px;
  display: flex
}

.review-card__rating img {
  width: 204px;
  height: 32px
}

.review-card__rating span {
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  font: 24px Lighthaus, Georgia, serif
}

.review-card blockquote {
  text-transform: uppercase;
  margin: 0;
  font: 24px Lighthaus, Georgia, serif
}

.review-card>p {
  flex-direction: column;
  gap: 12px;
  margin: 0;
  display: flex
}

.review-card>p strong {
  font-size: 20px;
  font-weight: 400
}

.review-card>p span {
  color: #16222ba3
}

.review-card__footer {
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  display: flex
}

.review-card__dots {
  align-items: center;
  gap: 16px;
  height: 4px;
  display: flex
}

.review-card__dots button {
  cursor: pointer;
  background: #16222b52;
  width: 20px;
  height: 2px;
  padding: 0;
  transition: width .25s, height .25s, background-color .25s
}

.review-card__dots button.is-active {
  background: #16222b;
  width: 40px;
  height: 4px
}

.review-card__footer a {
  color: var(--gold);
  font-size: 18px
}

.resort-proof__gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  height: 758px;
  margin-top: 40px;
  display: grid
}

.resort-proof__gallery>img,
.resort-proof__gallery>div img {
  object-fit: cover;
  width: 100%;
  height: 100%
}

.resort-proof__gallery>div {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
  min-height: 0;
  display: grid
}

.faq {
  border-bottom: 1px solid #f7f4ec52;
  padding: 100px 0 60px
}

.faq-inner {
  width: min(100% - 80px, 1040px)
}

.faq h2 {
  margin-bottom: 32px;
  font-size: 52px;
  line-height: normal
}

.accordion {
  gap: 20px
}

.accordion details {
  background: #ffffff0f;
  padding: 32px
}

.accordion details[open] {
  border-color: #ffffff52
}

.accordion summary {
  gap: 40px;
  font-size: 24px;
  line-height: normal
}

.accordion details p {
  font: 18px/1.3 Manrope, Arial, sans-serif
}

footer {
  padding: 60px 3.333vw 40px
}

.footer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
  margin: auto;
  padding: 0;
  display: grid
}

.footer-main {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  display: flex
}

.footer-main h2 {
  width: 593px;
  max-width: 100%;
  font-size: 52px;
  line-height: normal
}

.footer-grid>.footer-main>p {
  margin: 8px 0 0;
  font: 18px/1.3 Manrope, Arial, sans-serif
}

.footer-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%
}

.footer-form input:not([type=checkbox]) {
  min-height: 57px
}

.consent-field {
  color: #ffffffa3;
  cursor: pointer;
  align-items: flex-start;
  gap: 12px;
  font: 14px/1.35 Manrope, Arial, sans-serif;
  display: flex
}

.consent-field input[type=checkbox] {
  appearance: none;
  cursor: pointer;
  background: 0 0;
  border: 1px solid #ffffff85;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0
}

.consent-field input[type=checkbox]:checked {
  border-color: var(--gold);
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 8 3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat
}

.consent-field input[type=checkbox]:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #fff
}

.consent-field a {
  color: #fff;
  text-underline-offset: 3px;
  text-decoration: underline
}

.footer-form .consent-field {
  grid-column: 1/-1
}

.footer-form .button {
  grid-column: 1/-1;
  font-size: 18px
}

.footer-main>small {
  width: 100%;
  font-size: 18px;
  line-height: 1.3
}

.footer-legal {
  color: #ffffffa3;
  border-top: 1px solid #f7f4ec52;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 16px;
  padding-top: 20px;
  font-size: 18px;
  display: flex;
  margin-top: auto;
}

.footer-legal p {
  margin: 0;
  line-height: 1.3
}

.footer-legal nav {
  flex-wrap: wrap;
  gap: 15px;
  display: flex
}

.footer-contacts {
  flex-direction: column;
  gap: 24px;
  display: flex
}

.contact-card {
  background: #ffffff0f;
  gap: 24px;
  padding: 32px
}

.contact-card>p {
  align-items: center;
  gap: 18px;
  margin: 0;
  display: flex
}

.contact-card>p>img {
  flex: 0 0 32px;
  width: 32px
}

.contact-card>p>span {
  color: #ffffffa3;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  margin: 0;
  font-size: 18px;
  display: flex
}

.contact-card strong,
.contact-card>p a {
  color: #fff;
  font-size: 20px;
  font-weight: 400
}

.socials {
  gap: 20px
}

.socials a {
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 16px 20px;
  font-size: 18px;
  display: flex
}

.socials img {
  width: 32px;
  height: 32px
}

.footer-map {
  height: 477px;
  margin-top: 0
}

@media (width<=900px) {
  .value {
    padding: 64px 16px
  }

  .value-grid,
  .resort-proof__top,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .resort-proof {
    width: calc(100% - 32px)
  }

  .resort-proof__copy li {
    white-space: normal
  }

  footer {
    padding: 60px 16px 40px
  }
}

@media (width<=620px) {

  .value-copy>h2,
  .resort-proof__copy h2,
  .faq h2,
  .footer-main h2 {
    font-size: 34px
  }

  .mini-cards,
  .resort-proof__gallery,
  .footer-form {
    grid-template-columns: 1fr
  }

  .resort-proof__gallery {
    height: auto
  }

  .resort-proof__gallery>img {
    height: 520px
  }

  .resort-proof__gallery>div img {
    height: 300px
  }

  .review-card__rating {
    flex-direction: column;
    align-items: flex-start
  }

  .review-card blockquote {
    font-size: 20px
  }

  .faq-inner {
    width: calc(100% - 32px)
  }

  .accordion summary {
    font-size: 18px
  }

  .footer-form .button {
    grid-column: auto
  }

  .footer-legal {
    font-size: 16px
  }
}

.lead-modal {
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #16222ba3;
  border: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  position: fixed;
  inset: 0;
  overflow: hidden
}

.lead-modal::backdrop {
  background: 0 0
}

.lead-modal__panel {
  background: var(--navy);
  flex-direction: column;
  gap: 24px;
  width: 636px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 40px;
  display: flex;
  position: absolute;
  top: calc(50% - 46px);
  left: 50%;
  transform: translate(-50%, -50%)
}

.lead-modal__heading {
  flex-direction: column;
  gap: 16px;
  display: flex;
  align-items: center;
}

.lead-modal__heading h2 {
  font-size: 40px;
  line-height: normal
}

.lead-modal__heading p {
  font-size: 16px;
  line-height: normal;
  text-align: center;
}

.lead-modal__fields {
  flex-direction: column;
  gap: 20px;
  display: flex
}

.lead-modal input:not([type=checkbox]) {
  color: #fff;
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  width: 100%;
  min-height: 57px;
  padding: 16px 20px;
  font-size: 18px
}

.lead-modal input:not([type=checkbox])::placeholder {
  color: #ffffffa3
}

.lead-modal__panel>.button {
  width: 100%;
  font-size: 18px
}

.lead-modal__panel>small {
  color: #ffffffa3;
  font-size: 18px;
  line-height: normal
}

.lead-modal__back {
  background: var(--gold);
  color: var(--paper);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  transition: background-color .25s, transform .25s;
  display: flex;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%)
}

.lead-modal__back img {
  width: 24px;
  height: 24px
}

@media (hover:hover) {
  .lead-modal__back:hover {
    background: #dfbd79;
    transform: translate(-50%)translateY(-3px)
  }
}

@media (width<=620px) {
  .lead-modal {
    overflow: auto
  }

  .lead-modal__panel {
    width: calc(100% - 32px);
    max-width: none;
    margin: 32px auto 112px;
    padding: 24px;
    position: relative;
    top: auto;
    left: auto;
    transform: none
  }

  .lead-modal__heading h2 {
    font-size: 30px
  }

  .lead-modal__panel>small {
    font-size: 16px
  }

  .lead-modal__back {
    position: fixed;
    bottom: 24px
  }
}

.resort-proof {
  padding-bottom: 60px
}

a[href=\#infra],
.slogan-strip[hidden] {
  display: none
}

.apartment-details,
.apartment-photos {
  transition: opacity .18s, transform .18s
}

.apartments-content.is-switching .apartment-details,
.apartments-content.is-switching .apartment-photos {
  opacity: 0;
  transform: translateY(10px)
}

.footer-legal nav a {
  transition: color .25s, transform .25s;
  position: relative
}

.footer-legal nav a:after {
  content: "";
  transform-origin: 100%;
  border-bottom: 1px solid;
  transition: transform .3s;
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  transform: scaleX(0)
}

@media (hover:hover) {
  .apartment-types>button:hover {
    color: #ffcd6b;
    opacity: 1
  }

  .footer-legal nav a:hover {
    color: #ffcd6b;
    transform: translateY(-2px)
  }

  .footer-legal nav a:hover:after {
    transform-origin: 0;
    transform: scaleX(1)
  }

  .review-card__dots button:hover {
    background: #c9a45c
  }
}

@media (width<=900px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden
  }

  .container {
    width: calc(100% - 32px)
  }

  .header {
    width: calc(100% - 32px);
    padding-top: 20px
  }

  .header-actions>a:not(.menu-button) {
    display: none
  }

  .split-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px
  }

  .split-about__content {
    order: 1;
    width: 100%;
    min-width: 0
  }

  .photo-stack {
    order: 2;
    min-width: 0
  }

  .location-cards,
  .value-grid,
  .resort-proof__top,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .resort-proof__copy,
  .review-card {
    width: 100%;
    min-width: 0;
    max-width: 100%
  }

  .apartments-content,
  .management__inner {
    grid-template-columns: 1fr
  }

  .management__intro {
    min-height: 0
  }
}

@media (width<=620px) {

  h1,
  h2 {
    overflow-wrap: anywhere
  }

  .button {
    max-width: 100%;
    min-height: 54px
  }

  .header {
    justify-content: space-between;
    gap: 0;
    width: calc(100% - 32px);
    height: 44px;
    padding: 0;
    top: 16px
  }

  .header .logo {
    width: 112px;
    height: 44px;
    position: static;
    transform: none
  }

  .logo-desktop {
    display: none !important
  }

  .logo .logo-mobile {
    width: 112px;
    height: 44px;
    display: block
  }

  .menu-button {
    order: 2;
    width: 32px;
    height: 32px;
    margin-left: auto;
    padding: 0;
    font-size: 0;
    display: block
  }

  .burger {
    border-width: 2px;
    width: 32px;
    height: 8px;
    display: block
  }

  .header-actions {
    display: none
  }

  .hero {
    background-image: url("../images/hero/hero-mobile.webp");
    background-position: 50% -91px;
    background-size: 100% 115.67%;
    height: 928px;
    min-height: 928px
  }

  .hero:before {
    background: linear-gradient(90deg, #16222bd1, #16222b33), linear-gradient(#16222b52, #0000 32%)
  }

  .hero-copy {
    width: calc(100% - 32px);
    padding-top: 153px
  }

  .hero-copy h1 {
    max-width: 358px;
    font-family: Lighthaus, Georgia, serif;
    font-size: 40px;
    line-height: normal
  }

  .hero-copy>p {
    max-width: 358px;
    margin: 16px 0 20px;
    font-size: 14px;
    line-height: 1.3
  }

  .hero-copy>.button {
    min-height: 0;
    padding: 16px 20px;
    font-size: 14px
  }

  .hero-copy>.button .arrow {
    font-size: 20px
  }

  .hero-benefits {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #16222ba3;
    grid-template-rows: repeat(2, 140px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: 280px;
    top: 648px;
    bottom: auto
  }

  .hero-benefits article {
    border-color: #525252;
    min-height: 0;
    padding: 16px
  }

  .hero-benefits h3 {
    margin: 0 0 12px;
    font-family: Lighthaus, Georgia, serif;
    font-size: 16px;
    line-height: 1.3
  }

  .hero-benefits p {
    font-size: 14px;
    line-height: 1.3
  }

  .split-about {
    width: calc(100% - 32px);
    padding: 40px 0 64px
  }

  .split-about__content {
    gap: 24px
  }

  .split-about h2 {
    font-size: 40px;
    line-height: 1.04
  }

  .split-about__content>p {
    font-size: 16px;
    line-height: 1.35
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 8px
  }

  .stats b {
    font-size: 30px
  }

  .stats span {
    font-size: 12px
  }

  .photo-stack {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 16px;
    width: calc(100% + 16px);
    padding: 0 16px 8px 0;
    display: flex;
    overflow-x: auto
  }

  .photo-stack::-webkit-scrollbar {
    display: none
  }

  .photo-stack img {
    object-fit: cover;
    scroll-snap-align: start;
    flex: 0 0 279px;
    width: 279px;
    height: 230px
  }

  .location {
    background-position: 50%;
    height: 1033px;
    min-height: 833px;
    padding: 64px 0
  }

  .location-pin {
    display: none
  }

  .location-cards {
    gap: 16px;
    width: calc(100% - 32px);
    position: relative;
    inset: auto;
    transform: none
  }

  .glass-card {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    width: 100%;
    padding: 16px
  }

  .glass-card h2 {
    font-size: 40px;
    line-height: 1.04
  }

  .glass-card p {
    font-size: 14px;
    line-height: 1.35
  }

  .routes {
    gap: 16px
  }

  .routes b {
    font-size: 24px
  }

  .routes span {
    font-size: 13px
  }

  .video-hero {
    background-position: 50%;
    min-height: 900px
  }

  .video-hero__content {
    justify-self: stretch;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 16px;
    padding: 64px 0
  }

  .video-hero__content h2 {
    font-size: 40px;
    line-height: 1.04
  }

  .video-hero__content p {
    width: 100%
  }

  .amenities-inner {
    width: calc(100% - 32px);
    padding: 40px 0 0
  }

  .amenities-lead {
    gap: 20px;
    padding-bottom: 24px
  }

  .amenities-lead h2,
  .amenity-row h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .amenities-lead p,
  .amenity-copy p,
  .amenity-row li {
    font-size: 14px;
    line-height: 1.4
  }

  .amenity-row {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
    padding: 24px 0;
    display: grid
  }

  .amenity-row>div:first-child {
    gap: 12px;
    padding: 0
  }

  .amenity-row .amenity-icon {
    object-fit: contain;
    width: min(310px, 100%);
    height: 151px
  }

  .amenity-row>img {
    aspect-ratio: 3/2;
    object-fit: cover;
    width: 100%;
    height: auto
  }

  .amenity-list {
    gap: 16px
  }

  .architecture {
    padding-top: 0
  }

  .architecture-copy {
    width: calc(100% - 32px);
    max-width: none;
    margin: 0 auto;
    padding: 40px 0 24px
  }

  .architecture-copy h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .architecture-copy p {
    font-size: 14px;
    line-height: 1.4
  }

  .architecture-gallery figure,
  .architecture-gallery figure:first-child {
    height: 404px;
    min-height: 0;
    position: sticky;
    top: 0
  }

  .architecture-gallery figure img {
    object-fit: cover;
    height: 100%
  }

  .interior-hero {
    min-height: 820px;
    padding: 40px 16px
  }

  .interior-hero__copy {
    width: 100%;
    max-width: 358px
  }

  .interior-hero__copy h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .interior-hero__copy p {
    font-size: 15px
  }

  .interior-hero__card {
    width: auto;
    padding: 24px;
    bottom: 40px;
    left: 16px;
    right: 16px
  }

  .interior-hero__actions {
    flex-direction: column;
    align-items: stretch
  }

  .interior-hero__actions .button {
    width: 100%
  }

  .apartments-section {
    padding: 64px 0;
    overflow: hidden
  }

  .apartments-section>.apartments-heading,
  .apartments-section>.apartments-content {
    width: calc(100% - 32px);
    margin-inline: auto
  }

  .apartments-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }

  .apartments-heading h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .apartments-heading .button {
    width: 100%
  }

  .apartments-content {
    gap: 32px;
    margin-top: 40px
  }

  .apartment-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
  }

  .apartment-types button {
    font-size: 18px
  }

  .apartment-details h3 {
    font-size: 32px
  }

  .apartment-photos {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 16px;
    display: flex;
    overflow-x: auto
  }

  .apartment-photos::-webkit-scrollbar {
    display: none
  }

  .apartment-photos > .photo-zoom {
    scroll-snap-align: start;
    flex: 0 0 280px;
    width: 280px;
    height: 320px
  }

  .usage-scenarios {
    padding: 64px 16px
  }

  .usage-scenarios>h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .usage-scenarios__content {
    margin-top: 64px
  }

  .usage-scenarios__cards {
    grid-template-columns: 1fr
  }

  .usage-scenarios__cards article {
    min-height: 0;
    padding: 28px 24px
  }

  .usage-scenarios__actions {
    flex-direction: column;
    align-items: stretch
  }

  .usage-scenarios__actions>* {
    width: 100%
  }

  .management {
    padding: 64px 0;
    overflow: hidden
  }

  .management__inner {
    gap: 48px
  }

  .management h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .management__intro {
    gap: 32px
  }

  .management__intro p,
  .management__services li,
  .management__steps p {
    font-size: 15px
  }

  .management__steps article {
    height: 430px;
    padding: 24px
  }

  .management__steps h3 {
    font-size: 30px
  }

  .value {
    padding: 64px 16px
  }

  .value-grid {
    gap: 48px
  }

  .value-copy>h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .value-grid>.value-copy>p {
    font-size: 15px
  }

  .mini-cards {
    grid-template-columns: 1fr
  }

  .lead-form {
    padding: 24px
  }

  .resort-proof {
    width: calc(100% - 32px);
    padding: 64px 0
  }

  .resort-proof__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px
  }

  .resort-proof__copy h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .resort-proof__copy>p,
  .resort-proof__copy li {
    font-size: 15px
  }

  .review-card {
    min-height: 430px;
    padding: 24px
  }

  .resort-proof__gallery {
    grid-template-columns: 1fr;
    gap: 16px;
    height: auto
  }

  .resort-proof__gallery>img {
    height: 420px
  }

  .resort-proof__gallery>div {
    gap: 16px
  }

  .resort-proof__gallery>div img {
    height: 260px
  }

  .faq {
    padding: 64px 0
  }

  .faq-inner {
    width: calc(100% - 32px)
  }

  .faq h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .accordion details {
    padding: 20px
  }

  .accordion summary {
    gap: 20px;
    font-size: 18px
  }

  .accordion details p {
    font-size: 15px
  }

  footer {
    padding: 48px 16px 32px
  }

  .footer-grid {
    gap: 48px
  }

  .footer-main h2 {
    font-size: 34px;
    line-height: 1.06
  }

  .footer-grid>.footer-main>p,
  .footer-main>small {
    font-size: 15px
  }

  .footer-form {
    grid-template-columns: 1fr
  }

  .footer-form .button {
    grid-column: auto
  }

  .contact-card {
    gap: 20px;
    padding: 24px
  }

  .contact-card strong,
  .contact-card>p a {
    font-size: 19px
  }

  .contact-card>p>span {
    font-size: 15px
  }

  .socials {
    grid-template-columns: 1fr
  }

  .footer-map {
    height: 320px
  }

  .footer-legal {
    gap: 24px;
    padding-top: 32px;
    font-size: 14px
  }

  .site-menu__preview {
    display: none
  }

  .site-menu__panel {
    width: 100%;
    padding: 24px 16px
  }

  .site-menu__nav a {
    font-size: 30px
  }
}

@media (width<=1200px) and (width>=901px) {
  .split-about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
    gap: 24px
  }

  .split-about__content h2 {
    font-size: clamp(40px, 4vw, 52px)
  }

  .stats {
    gap: 16px
  }

  .stats b {
    font-size: 52px
  }

  .stats small {
    font-size: 28px
  }

  .amenity-row {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    min-height: 0
  }

  .amenity-row h2 {
    font-size: 42px
  }

  .amenity-row .amenity-icon {
    width: min(100%, 320px);
    height: 220px
  }

  .amenity-list li {
    gap: 16px;
    font-size: 16px
  }

  .value-grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 44%);
    gap: 32px
  }

  .value-copy>h2,
  .management h2 {
    font-size: 44px
  }

  .mini-cards {
    grid-template-columns: 1fr
  }

  .mini-cards article {
    min-height: 0
  }

  .resort-proof__top {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 44%);
    gap: 32px
  }

  .review-card {
    min-width: 0;
    padding: 24px
  }

  .review-card blockquote {
    font-size: 20px
  }
}

@media (width<=620px) {
  .apartments-heading>div {
    width: 100%
  }

  .apartment-price strong {
    font-size: 40px
  }

  .review-card__footer {
    flex-wrap: wrap;
    gap: 24px
  }

  .contact-card,
  .contact-card>p,
  .contact-card>p>span {
    min-width: 0
  }

  .contact-card a,
  .footer-legal a {
    overflow-wrap: anywhere
  }

  .footer-legal nav {
    gap: 16px 20px
  }

  .lead-modal__panel {
    max-height: calc(100dvh - 32px);
    overflow-y: auto
  }

  .site-menu {
    overflow-y: auto
  }

  .site-menu__content {
    flex: none
  }

  .site-menu__footer {
    margin-top: auto
  }
}

@media (width<=380px) {
  .hero-copy h1 {
    font-size: 36px
  }

  .hero-benefits h3 {
    font-size: 14px
  }

  .hero-benefits p {
    font-size: 12px
  }

  .stats b {
    font-size: 26px
  }

  .stats span {
    font-size: 11px
  }
}

/* Full-bleed hero video; the existing image remains a loading fallback. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  z-index: 1;
}

.hero-benefits {
  z-index: 2;
}


/* Consolidated: style.css */


/* The original Helvetica Neue asset has no Cyrillic glyphs.
   Use one complete local font for both Cyrillic text and numerals. */
@font-face {
    font-family: "Helvetica Neue";
    src: url("../fonts/Manrope-Regular-B5jw9KDh.woff2") format("woff2"),
         url("../fonts/Manrope-Regular-7YlB9acO.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

#infra {
    width: 100%;
    padding-inline: var(--page-gutter);
    background-color: var(--paper);
    background-image: linear-gradient(#f7f4eceb, #f7f4eceb), url("../images/bg.png");
    background-position: center top;
    background-size: auto, 1440px auto;
    background-repeat: repeat;
}

@media (max-width: 767px) {
    #infra {
        padding-inline: 16px;
        background-size: auto, 720px auto;
    }
}

#infra .feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

#infra .feature-list > span {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 48px) / 4);
    gap: 20px;
    min-width: 0;
    min-height: 176px;
    padding: 24px;
    border: 1px solid #c9a45c55;
    background: #fffdf8;
    font-size: 16px;
    line-height: 1.4;
}

#infra .feature-list > span::before {
    content: none;
}

#infra .infra-feature-icon {
    display: block;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--gold);
}

@media (max-width: 1000px) {
    #infra .feature-list > span {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 767px) {
    #infra .feature-list {
        gap: 12px;
        margin-top: 24px;
    }

    #infra .feature-list > span {
        flex-basis: calc((100% - 12px) / 2);
        gap: 16px;
        padding: 16px;
        font-size: 14px;
        min-height: 160px;
    }

}

@media (max-width: 359px) {
    #infra .feature-list > span {
        flex-basis: 100%;
    }
}

.wide-photo.infrastructure-placeholder {
    height: auto;
    padding: 0;
    background: transparent;
}

.infrastructure-placeholder > img {
    display: block;
    width: 100%;
    height: auto;
}

.resort-proof__gallery {
    display: flex;
    overflow: hidden;
}

.resort-proof__gallery > img,
.resort-proof__gallery > div {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

.resort-proof__gallery > div {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.resort-proof__gallery > div img {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
}

@media (max-width: 900px) {
    .interior-hero {
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: auto;
        min-height: 820px;
        padding: 40px 16px;
    }

    .interior-hero__copy,
    .interior-hero__card {
        position: relative;
        inset: auto;
        transform: none;
    }

    .interior-hero__copy {
        flex: 0 0 auto;
    }

    .interior-hero__card {
        flex: 0 0 auto;
        margin-top: 0;
    }
}

@media (max-width: 620px) {

    .resort-proof__gallery {
        flex-direction: column;
        overflow: visible;
    }

    .resort-proof__gallery > img,
    .resort-proof__gallery > div,
    .resort-proof__gallery > div img {
        flex: none;
        width: 100%;
    }

    .apartment-types {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        align-items: stretch;
    }

    .apartment-types > button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 50px;
        padding: 10px 12px;
        border: 1px solid rgba(247, 244, 236, 0.32);
        color: #fff;
        opacity: 0.62;
        text-align: center;
        font-size: 14px;
        line-height: 1.15;
    }

    .apartment-types > button.is-active {
        padding-left: 12px;
        border: 1px solid var(--gold);
        background: var(--gold);
        color: #fff;
        opacity: 1;
    }

    .apartment-types .button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 56px;
        margin-top: 6px;
    }
}

/* Draw arrows with CSS so iOS cannot replace the Unicode glyph with an emoji. */
.arrow {
    display: inline-block;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    position: relative;
}

.arrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    position: absolute;
    top: 1px;
    right: 1px;
}

.arrow::after {
    content: "";
    width: 15px;
    border-top: 1.5px solid currentColor;
    position: absolute;
    left: 0;
    bottom: 3px;
    transform: rotate(-45deg);
    transform-origin: left center;
}

.button .arrow {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: url("../images/menu/button-arrow.svg") center / 14px 14px no-repeat;
}

.button .arrow::before,
.button .arrow::after {
    content: none;
}

.site-menu__cta img {
    width: 14px;
    height: 14px;
}

.amenities-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 24px;
    max-width: none;
}

.amenities-lead > h2,
.amenities-lead > p {
    flex: 0 0 calc((100% - 24px) / 2);
    width: calc((100% - 24px) / 2);
    min-width: 0;
    margin: 0;
}

.amenities-photos {
    display: flex;
    flex: 0 0 100%;
    gap: 24px;
    margin-top: 32px;
}

.amenities-photos img {
    display: block;
    width: calc((100% - 24px) / 2);
    min-width: 0;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.amenity-row.gastronomy {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: stretch;
    gap: clamp(32px, 3.3vw, 64px);
    min-height: 0;
}

.gastronomy > .gastronomy-heading,
.gastronomy > .gastronomy-details {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 0;
}

.gastronomy-heading > h2,
.gastronomy-description {
    min-width: 0;
}

.gastronomy > .gastronomy-heading {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 3.3vw, 64px);
}

.gastronomy-heading > h2 {
    max-width: 100%;
    font-size: clamp(24px, 3vw, 44px);
    line-height: 1.2;
}

.gastronomy > .gastronomy-details {
    flex: 1;
    align-items: stretch;
    gap: clamp(28px, 3vw, 56px);
}

.gastronomy-description p {
    font-size: 16px;
    line-height: 1.55;
    color: #ffffffb8;
}

.gastronomy-description p + p {
    margin-top: 20px;
}

.amenity-row.gastronomy > .gastronomy-photo {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 853 / 1280;
    object-fit: contain;
    align-self: start;
}

.gastronomy-details > .amenity-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0;
    justify-content: space-between;
    counter-reset: gastronomy-place;
}

.gastronomy .amenity-list li {
    position: relative;
    counter-increment: gastronomy-place;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 0 24px 68px;
    border-bottom: 1px solid #f7f4ec33;
    font-size: 16px;
    line-height: 1.4;
}

.gastronomy .amenity-list li::before {
    content: counter(gastronomy-place, decimal-leading-zero);
    position: absolute;
    top: 24px;
    left: 0;
    width: auto;
    border: 0;
    color: var(--gold);
    font: 400 32px/1.1 Lighthaus, Georgia, serif;
}

.gastronomy .amenity-list strong {
    font-family: Lighthaus, Georgia, serif;
    font-size: clamp(22px, 1.8vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--paper);
}

.gastronomy .amenity-list span {
    font-size: 16px;
    line-height: 1.5;
    color: #ffffffa6;
}

.new-buildings {
    display: flex;
    flex-direction: column;
    min-height: 900px;
    background-color: var(--navy);
    background-image:
        linear-gradient(90deg, rgba(3, 21, 52, .92) 0%, rgba(3, 21, 52, .75) 32%, rgba(3, 21, 52, .18) 70%),
        linear-gradient(0deg, rgba(3, 21, 52, .82), transparent 45%),
        url("../images/10-11.webp");
    background-position: center, center, center 55%;
    background-size: cover;
    background-repeat: no-repeat;
}

.new-buildings__intro {
    flex-grow: 1;
    min-height: clamp(480px, 39vw, 640px);
    justify-content: center;
}

.new-buildings__facts {
    display: flex;
    flex-wrap: wrap;
}

.new-buildings__facts article {
    container-type: inline-size;
    flex: 1 1 20%;
    min-width: 0;
    min-height: 0;
    padding: 32px 24px;
    background: rgba(3, 21, 52, .5);
}

.new-buildings__facts strong {
    font-size: min(20px, 6cqw);
    line-height: 1.4;
}

.new-buildings__facts strong > span {
    display: block;
    white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1100px) {
    .new-buildings__facts article {
        flex-basis: 33.333%;
    }
}

.architecture[hidden],
.amenity-row[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .location {
        height: auto;
        min-height: 0;
        padding: 64px 0;
    }

    .location-cards {
        position: relative;
        inset: auto;
        transform: none;
        padding-block: 0;
    }

    body :is(h1, h2, h3, h4, h5, h6) {
        min-width: 0;
        max-width: 100%;
        word-break: normal !important;
        overflow-wrap: normal !important;
        -webkit-hyphens: none !important;
        hyphens: none !important;
    }

    body :is(h1, h2) {
        font-size: clamp(20px, 5.6vw, 34px) !important;
        line-height: 1.15 !important;
    }

    body :is(h3, h4, h5, h6) {
        font-size: clamp(16px, 4.2vw, 22px) !important;
        line-height: 1.25 !important;
    }

    .new-buildings__facts article {
        flex-basis: 100%;
        padding: 28px 16px;
    }

    .new-buildings {
        background-image:
            linear-gradient(180deg, rgba(3, 21, 52, .66), rgba(3, 21, 52, .72) 65%, var(--navy) 100%),
            url("../images/10-11.webp");
        background-position: center top;
        background-size: 100% 560px, auto 560px;
    }

    .new-buildings__intro {
        min-height: 440px;
    }

    .gastronomy .amenity-list li {
        padding: 20px 0 20px 48px;
    }

    .gastronomy .amenity-list li::before {
        top: 20px;
        font-size: 26px;
    }

    .amenity-row.gastronomy {
        grid-template-columns: minmax(0, 1fr);
    }

    .gastronomy > .gastronomy-heading,
    .gastronomy > .gastronomy-details {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        flex-basis: auto;
        flex-direction: column;
        gap: 24px;
    }

    .amenities-lead {
        gap: 20px 0;
    }

    .amenities-lead > h2,
    .amenities-lead > p {
        flex-basis: 100%;
        width: 100%;
    }

    .amenities-photos {
        flex-direction: column;
        gap: 16px;
        margin-top: 4px;
    }

    .amenities-photos img {
        width: 100%;
    }
}

/* Mobile spacing and type scale follow the compact heading sizes. */
@media (max-width: 767px) {
    body main p,
    body footer p,
    body .gastronomy-description p,
    body .gastronomy .amenity-list span,
    body .management__services li,
    body .resort-proof__copy li {
        font-size: 14px;
        line-height: 1.5;
    }

    body main .hero-benefits p,
    .stats span,
    .new-buildings__facts p {
        font-size: 12px;
        line-height: 1.4;
    }

    .section,
    .split-about,
    .location,
    .apartments-section,
    .usage-scenarios,
    .management,
    .value,
    .resort-proof,
    .faq {
        padding-block: 40px;
    }

    .split-about__content,
    .management__intro,
    .apartments-heading,
    .video-hero__content {
        gap: 20px;
    }

    .management__inner,
    .value-grid,
    .resort-proof__top,
    .footer-grid {
        gap: 28px;
    }

    .glass-card p + p,
    .gastronomy-description p + p {
        margin-top: 20px;
    }

    .amenities-inner {
        padding-top: 40px;
    }

    .gastronomy .amenity-list strong,
    .accordion summary {
        font-size: 18px;
        line-height: 1.3;
    }

    .hero {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        background-position: center top;
        background-size: cover;
    }

    .hero-copy {
        padding-top: 120px;
        padding-bottom: 64px;
    }

    .hero-benefits {
        position: relative;
        inset: auto;
        height: auto;
        grid-template-rows: auto;
    }

    .hero-benefits article {
        padding: 16px;
    }

    .video-hero {
        height: auto;
        min-height: 480px;
    }

    .video-hero__content {
        padding-block: 48px;
    }

    .interior-hero {
        display: flex;
        flex-direction: column;
        gap: 48px;
        height: auto;
        min-height: 600px;
        padding: 40px 16px;
    }

    .interior-hero__copy,
    .interior-hero__card {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
    }

    .interior-hero__card {
        margin-top: auto;
        padding: 20px;
    }

    .interior-hero__copy h2 {
        margin-bottom: 16px;
    }

    .interior-hero__actions {
        margin-top: 24px;
        gap: 12px;
    }

    .new-buildings {
        min-height: 0;
    }

    .new-buildings__intro {
        min-height: 380px;
        padding: 40px 16px;
        gap: 20px;
    }

    .new-buildings__eyebrow {
        padding: 12px 16px;
        font-size: 16px;
    }

    .new-buildings__facts article {
        padding-block: 20px;
    }

    .new-buildings__facts strong {
        font-size: min(18px, 6cqw);
    }

    .apartments-content,
    .usage-scenarios__content {
        margin-top: 28px;
        gap: 24px;
    }

    .usage-scenarios__cards article,
    .lead-form,
    .review-card,
    .contact-card {
        padding: 20px;
    }

    .management__steps article {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: auto;
        min-height: 0;
        padding: 20px;
    }

    .management__steps article:nth-child(n) > img {
        position: static;
        inset: auto;
        transform: none;
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        margin-top: auto;
    }

    .review-card {
        min-height: 0;
    }

    .resort-proof__gallery > img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    footer {
        padding-block: 40px 24px;
    }

    .button {
        font-size: 14px;
        min-height: 48px;
    }
}

.management-step-illustration {
    display: contents;
}

@media (max-width: 767px) {
    .management__steps .management-step-illustration {
        display: block;
        width: 100%;
        height: 210px;
    }

    .management__steps article .management-step-illustration > img {
        display: block;
        position: static;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        margin: 0;
    }
}

@media (max-width: 767px) {
    .stats {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .stats > div {
        flex: 1 1 0;
        min-width: 0;
        gap: 10px;
    }

    .stats b {
        display: block;
        height: 1.2em;
        font-size: clamp(24px, 6.5vw, 36px);
        line-height: 1.2;
        white-space: nowrap;
    }

    .stats b small {
        font-size: .5em;
        line-height: 1;
        vertical-align: baseline;
    }

    .stats span {
        font-size: 12px;
        line-height: 1.4;
    }
}

.hero-benefits {
    --benefit-border: #ffffff40;
    border-block: 1px solid var(--benefit-border);
}

.hero-benefits > article {
    border: 0;
}

.hero-benefits > article + article {
    border-left: 1px solid var(--benefit-border);
}

@media (max-width: 900px) {
    .hero-benefits > article:nth-child(odd) {
        border-left: 0;
    }

    .hero-benefits > article:nth-child(n + 3) {
        border-top: 1px solid var(--benefit-border);
    }
}

@media (max-width: 620px) {
    .hero-benefits {
        --benefit-border: #525252;
    }
}
.new-buildings__facts {
    --facts-border: #ffffff1f;
    border-block: 1px solid var(--facts-border);
    margin-bottom: 1px;
}

.new-buildings__facts > article {
    border: 0;
}

.new-buildings__facts > article + article {
    border-left: 1px solid var(--facts-border);
}

@media (min-width: 768px) and (max-width: 1100px) {
    .new-buildings__facts > article:nth-child(3n + 1) {
        border-left: 0;
    }

    .new-buildings__facts > article:nth-child(n + 4) {
        border-top: 1px solid var(--facts-border);
    }
}

@media (max-width: 767px) {
    .new-buildings__facts > article + article {
        border-left: 0;
        border-top: 1px solid var(--facts-border);
    }
}

/* Consolidated: assets/apartments-content.css */
.apartments-content {
  min-height: 804px;
}

.apartments-content img {
  background: #102440;
}

@media (max-width: 900px) {
  .apartments-content {
    min-height: 0;
  }

  .apartment-details {
    min-height: 760px;
  }
}

@media (max-width: 620px) {
  .apartment-details {
    height: auto;
    min-height: 0;
    gap: 20px;
  }

  .apartment-details ul {
    margin: 12px 0 0;
  }

  .apartment-details > .photo-zoom {
    flex: 0 0 370px;
    height: 370px;
  }

  .apartment-photos {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    height: 220px;
    min-height: 220px;
    overflow: hidden;
  }

  .apartment-photos > .photo-zoom {
    flex: 0 0 calc((100% - 12px) / 2);
    width: calc((100% - 12px) / 2);
    min-width: 0;
    height: 220px;
    object-fit: cover;
  }
}


/* Consolidated: assets/floating-call.css */
.floating-call{position:fixed;right:max(28px,env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));z-index:90;display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--gold,#c9a45c);border-radius:50%;background:var(--navy,#031534);color:var(--gold,#c9a45c);box-shadow:0 6px 24px #03153440;text-decoration:none;transition:background-color .2s,color .2s,transform .2s}
.floating-call svg{width:27px;height:27px}.floating-call:hover{background:var(--gold,#c9a45c);color:var(--navy,#031534);transform:translateY(-3px)}.floating-call:focus-visible{outline:3px solid var(--gold,#c9a45c);outline-offset:5px}.menu-open .floating-call{visibility:hidden}
@media(max-width:767px){.floating-call{width:56px;height:56px;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}.floating-call svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.floating-call{transition:none}}

/* Consolidated: assets/slogan-scroll.css */
/* Scroll scene: static, readable composition is the default without JavaScript. */
.slogan-strip{height:auto;min-height:560px;padding:90px var(--page-gutter,32px);overflow:hidden;background:var(--paper);}
.slogan-strip .slogan-strip__images{position:relative;top:auto;left:auto;display:flex;align-items:center;gap:20px;}
.slogan-strip .slogan-strip__images > .photo-zoom:nth-child(n){width:clamp(70px,14vw,206px);height:clamp(70px,14vw,206px);object-fit:cover;}
.slogan-strip>p{position:relative;top:auto;left:auto;width:auto;max-width:1200px;margin:60px 0 0;font:clamp(32px,4.86vw,70px)/1.15 Lighthaus,Georgia,serif;white-space:normal;}
.slogan-strip.is-scroll-scene{padding:0;min-height:0;overflow:visible;}
.slogan-strip__viewport{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;}
.slogan-strip.is-scroll-scene .slogan-strip__images{position:absolute;inset:0;display:block;pointer-events:none;}
.slogan-strip.is-scroll-scene .slogan-strip__images > .photo-zoom:nth-child(n){position:absolute;top:0;left:0;width:240px;height:240px;max-width:none;transform-origin:0 0;will-change:transform;}
.slogan-strip__text{position:absolute;z-index:2;top:48%;left:0;width:max-content;max-width:none;margin:0;font:clamp(40px,4.86vw,80px)/1.15 Lighthaus,Georgia,serif;white-space:nowrap;will-change:transform;color:var(--ink);}
@media(max-width:767px){
 .slogan-strip{min-height:0;padding:64px 16px;}
 .slogan-strip .slogan-strip__images{gap:10px;}
 .slogan-strip .slogan-strip__images > .photo-zoom:nth-child(n){width:calc((100vw - 62px)/4);height:calc((100vw - 62px)/4);}
 .slogan-strip>p{margin-top:36px;font-size:32px;}
 .slogan-strip__text{font-size:34px;top:47%;}
}
/* Unlike hidden, clip does not create a scroll container that breaks sticky. */
@supports (overflow:clip){
 html:has(.slogan-strip.is-scroll-scene):not(:has(body.menu-open)),
 body:has(.slogan-strip.is-scroll-scene):not(.menu-open){overflow-x:clip;}
}


/* Consolidated: assets/location-map.css */
.location-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #16222b;
}

.location-map [class*="ground-pane"],
.footer-map [class*="ground-pane"] {
  filter: grayscale(1) sepia(.18) hue-rotate(155deg) saturate(.85) brightness(.58) contrast(1.12);
}

.location-map [class*="map-copyrights-promo"],
.footer-map [class*="map-copyrights-promo"] {
  display: none !important;
}

.location-bg {
  z-index: 1;
  transition: opacity .35s ease;
}

.location-map.is-ready + .location-bg {
  pointer-events: none;
  opacity: 0;
}

.footer-map {
  position: relative;
  overflow: hidden;
  background: #16222b;
}

.location-pin {
  display: none;
}

.location-cards {
  z-index: 3;
  pointer-events: none;
}

.location-marker {
  --marker-color: #f7f4ec;
  color: #f7f4ec;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  display: flex;
  transform: translate(-13px, -13px);
  white-space: nowrap;
}

.location-marker__dot {
  background: var(--marker-color);
  border: 4px solid #16222b;
  border-radius: 50%;
  box-shadow: 0 4px 18px #03153480, 0 0 0 1px #f7f4ec70;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

.location-marker__label {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #16222bd9;
  border: 1px solid #f7f4ec45;
  padding: 9px 12px;
  font: 500 13px/1.15 Manrope, Arial, sans-serif;
  letter-spacing: .01em;
}

.location-marker--main {
  --marker-color: #ffcd6b;
  z-index: 5;
}

.location-marker--main .location-marker__dot {
  box-shadow: 0 5px 22px #03153499, 0 0 0 5px #ffcd6b40;
  flex-basis: 32px;
  width: 32px;
  height: 32px;
}

.location-marker--main .location-marker__label {
  color: #16222b;
  background: #ffcd6b;
  border-color: #ffcd6b;
  font-weight: 600;
}

.location-marker--left {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 13px), -13px);
}

.location-marker--station .location-marker__label {
  transform: translateY(31px);
}

@media (width <= 620px) {
  .location-marker {
    gap: 6px;
  }

  .location-marker__dot {
    border-width: 3px;
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .location-marker__label {
    padding: 7px 9px;
    font-size: 10px;
  }

  .location-marker--main .location-marker__dot {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
  }

  .location-marker--left {
    transform: translate(calc(-100% + 10px), -10px);
  }

  .location-marker--station .location-marker__label {
    transform: translateY(25px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .location-bg {
    transition: none;
  }
}

/* Photo enlargement controls share the site's gold accent. */
.photo-zoom { position: relative; display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; color: var(--gold); overflow: hidden; }
.apartments-content .photo-zoom > img,
.slogan-strip .photo-zoom > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-zoom__icon { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; pointer-events: none; }
.photo-zoom__icon::before { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.photo-zoom__icon::after { content: ""; position: absolute; top: 15px; left: 15px; width: 8px; height: 1.5px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
.slogan-strip .photo-zoom__icon { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); }
.slogan-strip.is-scroll-scene .photo-zoom { pointer-events: auto; }
.slogan-strip__text { pointer-events: none; }
.photo-zoom:hover .photo-zoom__icon { color: #dfbd79; }
.photo-zoom:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.photo-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px 24px 24px; border: 0; background: #031534ed; }
.photo-viewer[open] { display: flex; align-items: center; justify-content: center; }
.photo-viewer::backdrop { background: #031534d9; }
.photo-viewer > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.photo-viewer__close { position: absolute; top: 12px; right: 20px; width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); background: var(--navy, #031534); font: 32px/1 Arial, sans-serif; cursor: pointer; }
.photo-viewer__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
html:has(.photo-viewer[open]) { overflow: hidden; }
@media (max-width: 620px) { .apartments-content .photo-zoom__icon { top: 10px; right: 10px; } }

/* Shared motion rhythm: quiet interactions, spacious editorial entrances. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
@keyframes resort-enter {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: resort-enter 1.2s var(--motion-ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero-copy > :nth-child(3) { animation-delay: .24s; }
  .hero-benefits article { animation: resort-enter 1.1s var(--motion-ease) .3s both; }
  .hero-benefits article:nth-child(2) { animation-delay: .38s; }
  .hero-benefits article:nth-child(3) { animation-delay: .46s; }
  .hero-benefits article:nth-child(4) { animation-delay: .54s; }
  .button, .site-menu__cta, .socials a, .site-menu__socials a,
  .menu-button, .site-menu__close, .floating-call, .faq summary {
    transition-duration: .45s;
    transition-timing-function: var(--motion-ease);
  }
  .button .arrow, .site-menu__cta img, .site-menu__nav img,
  .burger, .site-menu__close span { transition-duration: .5s; }
  .site-menu { transition: opacity .5s ease, visibility .5s; }
  .site-menu__nav a {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .6s ease, translate .7s var(--motion-ease), color .35s ease;
  }
  .menu-open .site-menu__nav a { opacity: 1; translate: 0 0; }
  .menu-open .site-menu__nav a:nth-child(2) { transition-delay: .045s; }
  .menu-open .site-menu__nav a:nth-child(3) { transition-delay: .09s; }
  .menu-open .site-menu__nav a:nth-child(4) { transition-delay: .135s; }
  .menu-open .site-menu__nav a:nth-child(5) { transition-delay: .18s; }
  .menu-open .site-menu__nav a:nth-child(6) { transition-delay: .225s; }
  .lead-modal[open] .lead-modal__panel,
  .video-modal[open] .video-modal__inner { animation: resort-enter .55s var(--motion-ease) both; }
  .apartment-details, .apartment-photos {
    transition: opacity .26s ease, transform .45s var(--motion-ease);
  }
  .apartments-content.is-switching .apartment-details,
  .apartments-content.is-switching .apartment-photos { transform: translateY(5px); }
  .faq details::details-content {
    interpolate-size: allow-keywords;
    content-visibility: hidden;
    height: 0;
    opacity: 0;
    overflow: clip;
    transition: height .45s var(--motion-ease), opacity .35s ease, content-visibility .45s allow-discrete;
  }
  .faq details[open]::details-content { content-visibility: visible; height: auto; opacity: 1; }
}
.header-phone, .site-menu__phone, .usage-scenarios__calculation,
.review-card__footer a, .consent-field a, .footer-legal a {
  text-underline-offset: 5px;
  transition: color .35s ease, opacity .35s ease, text-decoration-color .35s ease;
}
.lead-form input, .footer-form input, .lead-modal input {
  transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.lead-form input:focus, .footer-form input:focus, .lead-modal input:focus {
  border-color: #c9a45c;
  box-shadow: 0 2px 0 #c9a45c;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .usage-scenarios__cards > article, .mini-cards > *, .new-buildings__facts > * {
    transition: translate .6s var(--motion-ease), box-shadow .6s ease;
  }
  .usage-scenarios__cards > article:hover, .mini-cards > :hover,
  .new-buildings__facts > :hover { translate: 0 -4px; box-shadow: 0 16px 32px #03153414; }
  .resort-proof__gallery img { transition: filter .65s ease; }
  .resort-proof__gallery img:hover { filter: brightness(1.06); }
  .usage-scenarios__calculation:hover, .review-card__footer a:hover,
  .consent-field a:hover { color: #dfbd79; }
  .button:not(:disabled):active, .site-menu__cta:active { transform: translateY(0); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .faq details::details-content { transition: none; }
}
@media print {
  .amenities-motion-ready .amenities-lead h2,
  .amenities-motion-ready .amenities-lead p,
  .amenities-motion-ready .amenity-row > div > *,
  .amenities-motion-ready .amenity-row > img { opacity: 1; transform: none; clip-path: none; }
}
/* Contact Form 7 keeps the original form layout. */
@media (width <= 620px) {
  .site-menu {
    background: var(--navy);
    height: 100dvh;
    min-height: 0;
    padding: 20px 0 max(24px, env(safe-area-inset-bottom));
    gap: 32px;
    overflow-y: auto;
  }
  .site-menu__top, .site-menu__content, .site-menu__footer {
    width: calc(100% - 32px);
    flex-shrink: 0;
  }
  .site-menu__close { min-height: 44px; }
  .site-menu__content {
    justify-content: flex-start;
    margin-top: 0;
    padding: 0;
  }
  .site-menu__nav {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0;
    gap: 12px;
  }
  .site-menu__nav a {
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    font-size: clamp(24px, 6.4vw, 30px);
    line-height: 1.2;
  }
  .site-menu__nav img { width: 24px; height: 24px; flex: 0 0 24px; }
  .site-menu__footer { flex-wrap: nowrap; align-items: stretch; gap: 16px; margin-top: auto; }
  .site-menu__phone { margin: 0; font-size: clamp(24px, 6.7vw, 32px); }
  .site-menu__cta { width: 100%; min-height: 56px; margin: 0; justify-content: space-between; }
  .site-menu__socials { width: 100%; margin: 0; gap: 16px; }
  .site-menu__socials a { flex: 1 1 0; min-width: 0; width: 0; height: 56px; padding: 12px; }
}

.thanks-modal[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-block: 24px;
  overflow-y: auto;
}
.thanks-modal .lead-modal__panel {
  position: static;
  flex-shrink: 0;
  margin: 0;
  transform: none;
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
}
.thanks-modal .lead-modal__back {
  position: static;
  flex-shrink: 0;
  margin: 0;
  transform: none;
}
@media (hover: hover) {
  .thanks-modal .lead-modal__back:hover { transform: translateY(-3px); }
}

.wpcf7:has(> .lead-form), .wpcf7:has(> .footer-form), .wpcf7:has(> .lead-modal__panel) { display: contents; }
.wpcf7-form-control-wrap { min-width: 0; display: block; }
.wpcf7-form-control-wrap input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.consent-field .wpcf7-form-control-wrap, .consent-field .wpcf7-acceptance, .consent-field .wpcf7-list-item { display: contents; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px; grid-column: 1 / -1; font-size: 14px; }
.wpcf7-not-valid-tip { font-size: 13px; margin-top: 6px; color: #ffb4a8; }
.wpcf7 form.sent .wpcf7-response-output { display: none; }
.wpcf7 button:disabled { opacity: .65; cursor: wait; }


/* Shared artwork on desktop and mobile; preserve its intrinsic 3:2 ratio. */
.management__steps article {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    min-height: 536px;
}

.management__steps .management-step-illustration {
    display: block;
    width: 100%;
    max-width: 510px;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: auto auto 0;
}

.management__steps article:nth-child(n) .management-step-illustration > img {
    display: block;
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    margin: 0;
}

@media (max-width: 767px) {
    .management__steps article {
        min-height: 0;
        gap: 20px;
    }
    .management__steps .management-step-illustration {
        max-width: 420px;
    }
}

/* Skip link for keyboard users (all templates). */
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; padding: 12px; background: white; color: var(--navy); }
.skip-link:focus { top: 12px; }