/* ============================================================
   Migrated from css/webflow.shared.css (Webflow export).
   Unused legacy classes were removed; framework (w-*) classes
   and every class still referenced in HTML/JS were preserved.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
  overflow-x: hidden !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden],
template {
  display: none;
}

a {
  background-color: #0000;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

small {
  font-size: 80%;
}

sub {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

[class^="w-icon-"],
[class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before,
.w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

pre.w-code-block code {
  all: inherit;
}

pre.w-code-block code > span {
  display: block !important;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 0 0 1px #0000001a,
    0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  width: auto !important;
  height: auto !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-embed:before,
.w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe,
.w-video object,
.w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button,
[type="button"],
[type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input,
.w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder,
.w-select::placeholder {
  color: #999;
}

.w-input:focus,
.w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled],
.w-select[disabled],
.w-input[readonly],
.w-select[readonly],
fieldset[disabled] .w-input,
fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled),
.w-select[disabled]:not(.w-input-disabled),
.w-input[readonly],
.w-select[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input,
fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input,
textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before,
.w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload-default.w-hidden,
.w-file-upload-uploading.w-hidden,
.w-file-upload-error.w-hidden,
.w-file-upload-success.w-hidden {
  display: none;
}

.w-icon-file-upload-icon,
.w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

@media screen and (max-width: 991px) {

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main,
  .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row,
  .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {

  .w-hidden-main,
  .w-hidden-medium,
  .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before,
.w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before,
.w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  width: auto;
  height: auto;
  font-size: inherit;
  line-height: inherit;
  padding: 0.2em 0.5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

@media (min-width: 768px) {

  .w-lightbox-view,
  .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group,
  .w-lightbox-group .w-lightbox-view,
  .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

}

.w-lightbox-inactive,
.w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before,
.w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before,
.w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol,
.w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after,
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after,
.w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: 0.6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image,
.w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div,
.w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption,
.w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video,
.w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe,
.w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div,
.w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,
.w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before,
.w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay,
.w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay,
.w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button,
.w--nav-dropdown-open,
.w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before,
.w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide,
.w-dyn-bind-empty,
.w-condition-invisible {
  display: none !important;
}

:root {
  --black: #292929;
  --gray: #222;
  --white: white;
  --pink: #ff4338;
  --st-regis-grey: #949494;
  --amen: #757575;
  --dark-grey: #b1a7a7;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

.w-form-formrecaptcha {
  margin-bottom: 8px;
}

.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: #333;
  font-family:
    Arial,
    Helvetica Neue,
    Helvetica,
    sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h2 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family:
    St Regis Sabon,
    sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

a {
  color: #292929;
  text-decoration: none;
}

.nav-cont .home-show {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
}

.nav-cont.contact {
  z-index: 10;
  border-bottom: 1px solid #70707080;
  position: relative;
}

.nav-cont.contact.fix {
  padding-left: 50px;
  padding-right: 50px;
}

.nav-cont.home {
  background-color: #fefefed9;
}

.nav-cont.off {
  top: -8vh;
}

.nav-contact.info {
  height: 6%;
}

.sr-logo {
  max-width: none;
  height: 100%;
  display: block;
}

.sr-logo.mobile {
  display: block;
}

.sr-logo.hide {
  display: none;
}

.sr-logo.showmobile.seb {
  height: 6vh;
}

.sr-logo.showmobile-white {
  opacity: 1;
}

.desktop-wrapper,
.desktop-wrapper.hide {
  display: block;
}

.container {
  position: relative;
}

.container.int {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
}

.bg-vid {
  height: 100vh;
  position: relative;
  overflow: visible;
}

.bg-vid.snap-anchor {
  height: 200vh;
}

.bg-vid.snap {
  height: 200vh;
  display: none;
}

.bg-vid.snap.show,
.bg-vid.snap.ipad {
  height: 100vh;
  display: flex;
}

.sr-vid.int {
  position: absolute;
  top: 0;
}

.sr-info {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  position: relative;
}

.sr-info._03 {
  z-index: 2;
  width: 50%;
  height: 100%;
  position: absolute;
}

.sr-info.ib {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.sr-info.landing.locale.mob {
  display: none;
}

.sr-info.landing.inquire.mobile {
  margin-top: 0;
}

.sr-heading.h2 {
  margin-top: 20px;
  font-size: 27px;
  line-height: 30px;
}

.sr-text {
  font-family:
    St Regis Sabon Roman,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.sr-text._460 {
  text-align: center;
  max-width: 340px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 16px;
}

.sr-text.it {
  margin-top: 40px;
  margin-bottom: 40px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-style: italic;
}

.sr-text.footer.disc.white,
.sr-text.footer.disc.white-legal {
  max-width: 927px;
  color: var(--gray);
  margin-bottom: 24px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.sr-text.footer._14-copy {
  color: #fff;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 16px;
  line-height: 18px;
}

.sr-text.footer._14-copy.mobs {
  display: none;
}

.sr-text.legal {
  color: #7a7272;
  text-align: center;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
  display: block;
}

.sr-text.legal._12 {
  margin-top: 11px;
  font-size: 12px;
}

.sr-text.legal.int {
  color: #292929;
  line-height: 16px;
}

.sr-text.legal.white {
  color: var(--gray);
  line-height: 16px;
}

.sr-text.legal.white:hover {
  color: #4d4d4d;
}

.sr-text.dev._12 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 14px;
  line-height: 1;
}

.sr-text.dev._14 {
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 18px;
  line-height: 26px;
}

.sr-text.dev._14.mobs {
  display: none;
}

.sr-text.dev.disc {
  max-width: 63%;
  margin-top: 0;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 10px;
  line-height: 1;
}

.sr-text.intfoot.dash {
  margin-left: 8px;
  margin-right: 8px;
}

.sr-text.dev {
  color: #292929;
  text-align: center;
  letter-spacing: 0.6px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
  line-height: 1;
}

.sr-text.dev.int {
  font-size: 12px;
}

.sr-text.footer {
  color: #292929;
  text-align: center;
  letter-spacing: 0.6px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
}

.sr-text.footer.disc {
  max-width: 63%;
  margin-top: 0;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 10px;
  line-height: 1;
}

.sr-text.footer.disc.int {
  max-width: 927px;
  margin-bottom: 24px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.sr-text.footer._12 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 14px;
  line-height: 1;
}

.sr-text.footer._14.mobs.show {
  display: block;
}

.sr-text.footer._14 {
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 18px;
  line-height: 26px;
}

.sr-text.footer._14.mobs {
  display: none;
}

.footer {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer.pad {
  background-image: url("/img/footer-bg.webp");
  background-position: 50% 0;
  background-size: cover;
  padding-top: 70px;
  padding-bottom: 56px;
}

.footer.pad.int {
  padding-top: 50vh;
}

.footer.pad.snap-anchor {
  padding-bottom: 120px;
  position: relative;
}

.footer.pad.section {
  height: auto;
}

.footer.pad {
  padding-top: 50px;
  padding-bottom: 50px;
}

.form-cont {
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 86vh;
  display: flex;
  position: relative;
}

.form-cont.download {
  justify-content: space-between;
  height: 100vh;
  padding-top: 24vh;
  padding-bottom: 24vh;
}

.form-cont.legal {
  justify-content: center;
  height: 100vh;
  padding-top: 30vh;
  padding-bottom: 8vh;
}

.form-cont.nav {
  justify-content: center;
  width: 100%;
  height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
}

.form-cont.ty {
  height: 100vh;
}

.form-cont.landing.mob {
  height: auto;
}

.form-text.int {
  margin-top: 4vh;
  margin-bottom: 1vh;
  font-family:
    Roos St Regis Display,
    sans-serif;
}

.left {
  text-transform: uppercase;
  width: 47%;
  position: absolute;
  top: 68px;
  bottom: 0;
  left: 0;
}

.form-cont-2.right {
  width: 50%;
  margin-left: 36px;
  display: block;
}

.form-cont-2.contact {
  width: 400px;
}

.form-cont-2.contact.int {
  width: 100%;
}

.form-cont-2.contact.int.vh {
  margin-top: 2vh;
}

.form-cont-2.int {
  width: 50%;
}

.form-cont-2.brokername.hide {
  display: none;
}

.form-block {
  width: 649px;
  height: auto;
  margin-top: 0;
  overflow: visible;
}

.form {
  z-index: 1;
  background-color: #fff;
  background-image: none;
  background-size: auto;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  width: 100%;
  padding-top: 0;
  display: flex;
  position: relative;
  bottom: auto;
}

.form.int {
  opacity: 1;
  background-color: #0000;
}

.la-box.int {
  background-color: #0000;
  width: 100%;
}

.la-box.hidden {
  background-color: #0000;
  width: 100%;
  display: none;
}

.formpiece.int {
  width: 100%;
}

.formpiece.vh {
  margin-top: 3vh;
}

.light {
  font-weight: 300;
}

.lafield.selector {
  background-color: var(--gray);
  color: #24272a59;
  text-align: left;
  text-transform: uppercase;
  border: 1px solid #b1a7a7;
  border-left: 1px #2427292e;
  border-right: 1px #2427292e;
  margin-top: 4px;
  margin-left: 0;
  padding-top: 5px;
  font-style: italic;
}

.lafield.selector.int._400-copy {
  width: 100%;
  padding-top: 10px;
  padding-right: 12px;
  line-height: 16px;
}

.lafield.selector.int-copy {
  color: #292929;
  text-transform: none;
  border-style: solid;
  border-color: #dedede;
  padding-top: 10px;
  padding-right: 12px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 16px;
  box-shadow: 1px 1px 10px 4px #00000014;
}

.lafield.selector.int-copy._400,
.lafield.selector.int-copy._400-copy {
  width: 100%;
  padding-top: 8px;
  padding-right: 12px;
}

.lafield.contact {
  text-transform: none;
  margin-top: 24px;
  margin-bottom: 22px;
}

.lafield.margin {
  text-transform: none;
  margin-top: 24px;
}

.lafield.margin.hide {
  display: none;
}

.lafield.int {
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
}

.lafield.selector {
  color: #24272a59;
  text-align: left;
  text-transform: uppercase;
  background-color: #fefefe;
  border: 1px solid #b1a7a7;
  border-left: 1px #2427292e;
  border-right: 1px #2427292e;
  margin-top: 4px;
  margin-left: 0;
  padding-top: 5px;
  font-style: italic;
}

.lafield.selector.int {
  color: #292929;
  text-transform: none;
  border-style: solid;
  border-color: #dedede;
  padding-top: 8px;
  padding-right: 12px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  box-shadow: 1px 1px 10px 4px #00000014;
}

.lafield.selector.int._400 {
  width: 100%;
  padding-top: 8px;
  padding-right: 12px;
}

.heading.hide {
  display: none;
}

.site {
  color: #222;
  max-width: 660px;
  margin-top: 40px;
  padding-left: 32px;
  padding-right: 32px;
  font-size: 20px;
  position: relative;
}

.logo-cont.contact {
  z-index: auto;
  width: 100%;
  margin-bottom: 0;
  position: relative;
}

.moreinfo::placeholder {
  color: #222;
}

.moreinfo.int {
  background-color: var(--white);
  border-color: #dedede;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 26px;
  box-shadow: 1px 1px 10px 4px #00000014;
}

.form-horizontal.flex.broker {
  align-items: flex-start;
  margin-bottom: 0;
}

.form-horizontal.flex {
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 13px;
}

.radio-button-field.right {
  margin-left: 10px;
  margin-right: 0;
  padding-left: 0;
  display: flex;
}

.radio-button.w--redirected-checked {
  background-color: var(--black);
  border-color: #fff;
}

.radio-button.int {
  border-color: #292929;
}

.logo-container {
  border-top: 3px solid #292929;
  justify-content: space-between;
  align-items: flex-start;
  width: 400px;
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 14px;
  display: flex;
}

.logo-container.int {
  margin-top: 4px;
}

.fortune-logo {
  height: 60px;
}

.mobile-crop {
  display: none;
}

.infinitynumber.clickable.landing {
  color: var(--pink);
}

.arrow-cont {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
}

.arrow {
  z-index: 2;
  width: 40px;
  margin-bottom: 20px;
  position: relative;
}

.hearcomment::placeholder {
  color: #222;
}

.hearcomment.int {
  background-color: var(--white);
  border-color: #dedede;
  margin-top: 0;
  box-shadow: 1px 1px 10px 4px #00000014;
}

.overlay {
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100vh;
  position: absolute;
}

.header-cont {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  gap: 28px;
}

.inquitre {
  cursor: pointer;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
}

.inquitre.white {
  opacity: 0.8;
  color: var(--gray);
}

.inquitre.white.landing {
  display: block;
}

.inquitre.white.landing.mobile {
  display: none;
}

.inquitre.landing.desktop {
  display: block;
}

.inquitre.landing.mobileonly {
  display: none;
}

.boatburger {
  z-index: 4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 44px;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  position: absolute;
}

.int-split-cont {
  background-color: #fff;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100vw;
  height: auto;
  padding: 0;
  display: flex;
  position: relative;
}

.int-split-cont.notop {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.int-split-cont.notop.landing-full {
  height: 780px;
  padding-bottom: 4vh;
}

.int-split-cont.landing-half {
  height: 30vh;
  padding: 10vh 0 5vh;
  display: flex;
  overflow: visible;
}

.int-split-cont.landing-full {
  height: 100vh;
  padding-top: 4vh;
  padding-bottom: 4px;
}

.int-split-cont.landing-full.amenities {
  padding-top: 8vh;
}

.int-split-cont.landing {
  height: 100vh;
  padding-top: 4vh;
  padding-bottom: 4vh;
  display: flex;
}

.int-img {
  object-fit: cover;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 99vh;
  padding: 3%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.int-img.left {
  align-items: flex-start;
}

.int-image {
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 80vh;
  display: block;
  position: relative;
}

.int-image._02 {
  object-position: 50% 50%;
}

.int-image._01 {
  object-fit: cover;
  object-position: 50% 20%;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.int-image._03 {
  object-fit: cover;
  object-position: 50% 100%;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  position: relative;
}

.int-img-cont {
  background-image: url("https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.int-img-cont._01ch {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/641a1fb45407abb0fe5fd0e7_01-wide-r2.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: none;
  max-height: none;
}

.int-img-cont._02 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/646f736cd4d822faf6051208_DBOX_StRegis_SunnyIslesBeach_Shoreline_Day_crossfade.webp");
  background-position: 50% 20%;
  background-size: cover;
}

.int-img-cont._03 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63b4611aa9a341709deda9f9_03r.webp");
  background-position: 50%;
  background-size: cover;
  height: 100vh;
}

.int-img-cont._04 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210e8cfe91867eceb6d1_04.webp");
  background-position: 34%;
  background-size: cover;
}

.int-img-cont._05 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/646f736dcb7bee19be978e36_DBOX_StRegis_SunnyIslesBeach_Hero_Dusk%201.webp");
  background-position: 50% 100%;
  background-size: cover;
}

.int-img-cont._06 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210d6a740df6e5664d63_06.webp");
  background-position: 70%;
  background-size: cover;
}

.int-img-cont._07 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210e0f3ddd80d78e018d_07.webp");
  background-position: 50%;
  background-size: cover;
}

.int-img-cont._09 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210e3b2823bdee388a59_09.webp");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.int-img-cont._7-5 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63b4a062f6d390a00f24420a_7.5CH.webp");
  background-position: 50% 30%;
  background-size: cover;
}

.int-img-cont._08 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210e2c0fce9a3e4d7976_08.webp");
  background-position: 50%;
  background-size: cover;
}

.int-img-cont.map {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210e79064871c38a2464_Map.webp");
  background-position: 40%;
  background-size: cover;
}

.int-img-cont._12 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210db8f034af84030ea7_12.webp");
  background-position: 50%;
  background-size: cover;
}

.int-img-cont._10 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210ec97e6af0e23a221e_10.webp");
  background-position: 50%;
  background-size: cover;
}

.int-img-cont._11 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210da7089c032c9fe7fb_11.webp");
  background-position: 50%;
  background-size: cover;
}

.int-img-cont._13 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63a6210f6ccbdb9a57689836_13.webp");
  background-position: 50% 100%;
  background-size: cover;
}

.int-img-cont.fixmob,
.int-img-cont._01ch-copy {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/639b518f8f68f723ddcf5055_01-w1.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: none;
  max-height: none;
}

.srsi-header {
  width: 30%;
  margin-bottom: 32px;
}

.srsi-header.ib {
  width: 209px;
}

.srsi-header.el {
  width: 179px;
}

.srsi-header.iv {
  width: 216px;
  margin-top: -20vh;
}

.srsi-header._7-5 {
  width: 203px;
}

.srsi-header._07 {
  width: 393px;
}

.srsi-header._06 {
  width: 196px;
}

.srsi-header._05 {
  width: 265px;
}

.srsi-header._04 {
  width: 310px;
}

.srsi-header._03 {
  width: 300px;
}

.srsi-header._09 {
  width: 368px;
}

.srsi-header._08 {
  width: 329px;
}

.srsi-header.map {
  width: 283px;
}

.srsi-header._12 {
  width: 281px;
}

.srsi-header._10 {
  width: 256px;
}

.srsi-header._11 {
  width: 249px;
}

.srsi-header.el-copy {
  width: 179px;
}

.srsi-header.landing-title {
  color: #ff4338;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 0;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 6em;
  font-weight: 400;
  display: flex;
}

.srsi-header.landing-title.right-aligned {
  text-align: right;
  justify-content: flex-start;
}

.sr-text-int {
  text-align: center;
  max-width: 520px;
  font-family:
    St Regis Sabon Roman,
    sans-serif;
  font-size: 18px;
  line-height: 1.4;
  font-style: normal;
  font-weight: 400;
  display: block;
}

.sr-text-int._460 {
  text-align: center;
  max-width: 340px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 16px;
}

.sr-text-int.it {
  margin-top: 40px;
  margin-bottom: 40px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-style: italic;
}

.sr-text-int.footer {
  color: var(--black);
  text-align: center;
  letter-spacing: 0.6px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
}

.sr-text-int.footer._12 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 14px;
  line-height: 1;
}

.sr-text-int.footer._14 {
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 18px;
  line-height: 26px;
}

.sr-text-int.footer._14.mobs {
  display: none;
}

.sr-text-int.footer.disc {
  max-width: 63%;
  margin-top: 0;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 10px;
  line-height: 1;
}

.sr-text-int.legal {
  color: #7a7272;
  text-align: center;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
  display: block;
}

.sr-text-int.legal._12 {
  margin-top: 11px;
  font-size: 12px;
}

.sr-text-int.dev {
  color: var(--black);
  text-align: center;
  letter-spacing: 0.6px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
  line-height: 1;
}

.sr-text-int.dev._12 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 14px;
  line-height: 1;
}

.sr-text-int.dev._14 {
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 18px;
  line-height: 26px;
}

.sr-text-int.dev._14.mobs {
  display: none;
}

.sr-text-int.dev.disc {
  max-width: 63%;
  margin-top: 0;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 10px;
  line-height: 1;
}

.sr-text-int.ellipse {
  text-align: center;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-style: italic;
  line-height: 22px;
}

.sr-text-int.ellipse.mob,
.sr-text-int.ellipse.mob-copy {
  display: none;
}

.sr-text-int.ib {
  max-width: 400px;
  font-family:
    Roos St Regis Display,
    sans-serif;
}

.sr-text-int.ib.mob,
.sr-text-int.ib.mob-copy {
  display: none;
}

.sr-text-int.quote {
  margin-top: 24px;
  margin-bottom: 24px;
}

.sr-text-int.iv {
  max-width: 400px;
  color: var(--gray);
  font-family:
    Roos St Regis Display,
    sans-serif;
}

.sr-text-int.legalpage {
  max-width: 480px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 18px;
}

.sr-text-int._03 {
  max-width: 430px;
}

.sr-text-int._03.mob {
  display: none;
}

.sr-text-int._03.desk.vh {
  font-size: 1.8vh;
  line-height: 2.1vh;
}

.sr-text-int._03.mob-copy {
  display: none;
}

.sr-text-int._04 {
  max-width: 400px;
}

.sr-text-int._04.mob,
.sr-text-int._04.mob-copy {
  display: none;
}

.sr-text-int._05 {
  max-width: 460px;
}

.sr-text-int._05.mob,
.sr-text-int._05.mob-copy {
  display: none;
}

.sr-text-int._06 {
  max-width: 460px;
}

.sr-text-int._06.mob,
.sr-text-int._06.mob-copy {
  display: none;
}

.sr-text-int._7-5 {
  max-width: 396px;
}

.sr-text-int._7-5.desk.vh {
  font-size: 1.8vh;
  line-height: 2.1vh;
}

.sr-text-int._7-5.mob,
.sr-text-int._7-5.mob-copy {
  display: none;
}

.sr-text-int._09 {
  max-width: 380px;
}

.sr-text-int._09.mob,
.sr-text-int._09.mob-copy {
  display: none;
}

.sr-text-int._12 {
  max-width: 360px;
}

.sr-text-int._12.mob {
  display: none;
}

.sr-text-int.map {
  max-width: 446px;
}

.sr-text-int.map.mob,
.sr-text-int.map.mob-copy {
  display: none;
}

.sr-text-int._10 {
  max-width: 400px;
}

.sr-text-int._10.mob,
.sr-text-int._10.mob-copy,
.sr-text-int._10.mob-copy {
  display: none;
}

.sr-text-int._13 {
  max-width: 400px;
}

.sr-text-int.iv-white {
  max-width: 420px;
  color: var(--gray);
  font-family:
    Roos St Regis Display,
    sans-serif;
}

.sr-text-int.iv-white.mob,
.sr-text-int.for.mob,
.sr-text-int.for.mob-copy {
  display: none;
}

.sr-text-int.chat {
  max-width: 530px;
}

.sr-text-int.chat.mobs,
.sr-text-int.chat.mobs-copy {
  display: none;
}

.sr-text-int.anas {
  max-width: 530px;
}

.sr-text-int.bul {
  max-width: 470px;
  margin-top: 0;
  margin-bottom: 12px;
  font-family:
    Roos St Regis Display,
    sans-serif;
}

.sr-text-int.bul.small {
  margin-top: -8px;
  font-size: 10px;
  line-height: 14px;
}

.sr-text-int.bul.mob {
  display: none;
}

.sr-text-int.iv-white {
  color: #fefefe;
  max-width: 420px;
  font-family:
    Roos St Regis Display,
    sans-serif;
}

.sr-text-int.iv-white.mob {
  display: none;
}

.sr-text-int._13-copy {
  max-width: 400px;
}

.sr-text-int.anas-copy {
  max-width: 530px;
}

.sr-text-int.landing-text-border {
  margin-top: 26px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.sr-text-int.landing-mobile {
  display: none;
}

.int-full-img.section {
  overflow: hidden;
}

.scrollouter.section.mob {
  display: none;
}

.sliderinner.l {
  justify-content: flex-start;
}

.footerlinkcont {
  margin-bottom: 56px;
}

.footerlink {
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 20px;
}

.footerlink.center {
  margin-left: 24px;
  margin-right: 24px;
}

.footerlink.last.fix {
  margin-left: 10px;
}

.addycont {
  margin-bottom: 56px;
}

.addyhorizontal {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.addyhorizontal.int {
  margin-bottom: 3vh;
}

.addyhorizontal.int.landing.mobile {
  display: none;
}

.paracont {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.slidercontent.right {
  align-items: center;
  padding-left: 0;
  display: flex;
  position: relative;
}

.horizontalslidercont.hide {
  display: none;
}

.mask {
  width: 100%;
  height: 100%;
  position: relative;
}

.squareslider.pointer {
  width: 40vw;
  overflow: hidden;
}

.int-image-slider._02 {
  object-position: 50% 50%;
}

.int-image-slider._01 {
  object-fit: cover;
  object-position: 50% 20%;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.int-image-slider._03 {
  object-fit: cover;
  object-position: 50% 100%;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  position: relative;
}

.int-slider-cont.last {
  order: 1;
  padding-left: 0%;
  padding-right: 3%;
}

.int-slider.pointer {
  background-color: #0000;
  width: 100%;
  max-height: none;
}

.int-slide-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}

.bg-vid-copy.snap-anchor {
  height: 100vh;
}

.scrollouter-copy.snap-anchor {
  height: 100vh;
}

.vidcont {
  background-image: linear-gradient(#000, #fff);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.vidcont.video-with-placeholder {
  background-image: linear-gradient(#000, #fff);
}

.vidcont.video-with-placeholder.landing {
  z-index: 1;
}

.embed-desk {
  z-index: 0.5;
  width: 100%;
  height: 100%;
  position: absolute;
}

.mobilefallback {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63922604d1faee3715c5b2f0_website01-FF.webp");
  background-position: 0 0;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.mobilefallback.video-placeholder {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63922604d1faee5894c5b2f6_Website_NY_01.webp");
}

.mobilefallback.video-placeholder.landing {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/6392299b79e35d446930e239_srsi-fallback.webp");
}

.cheatsnap.snap-anchor {
  top: -8vh;
}

.nestcopy.green {
  max-width: 300px;
  position: relative;
  bottom: auto;
}

.nestcopy.green.stretch {
  max-width: 430px;
}

.srsislider {
  width: 100vw;
  height: 100vh;
}

.srsislider._90 {
  height: 90vh;
  position: relative;
}

.srsislider.pointer {
  z-index: 1;
}

.srsislider.pointer.mob {
  display: none;
}

.green.arrival {
  object-fit: cover;
  object-position: 50% 100%;
  max-width: none;
  height: 70vh;
}

.greenoffset.green {
  padding-top: 5vh;
}

.slide-nav.green {
  margin-left: 40vw;
  padding-bottom: 1vw;
}

.slide-nav.green._60 {
  margin-left: 60vw;
}

.sliderimgcont {
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.rec-nav {
  z-index: 10;
  font-size: 12px;
}

.cheatsnap-100.snap-anchor {
  top: 100vh;
}

.section {
  width: 100%;
  height: auto;
}

.section._92 {
  height: 100vh;
  padding-top: 8vh;
}

.section.fp-auto-height {
  width: 100%;
  height: auto;
}

.section.landing-half,
.section.landing {
  height: auto;
}

.contactcont {
  background-color: #fff;
  background-image: none;
  background-size: auto;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  display: flex;
  position: relative;
  inset: 0%;
}

.contactcont.inter {
  padding-top: 8vh;
}

.contactcont.inter.landing {
  height: 100vh;
  min-height: 0;
}

.inquire.back {
  margin-top: 0;
  position: relative;
}

.blurbg {
  background-image: none;
  background-position:
    0 0,
    50%;
  background-size: cover, cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
}

.blurbg.nav {
  background-image:
    linear-gradient(#29292926, #29292926),
    url("/img/menu-bg.webp");
  background-position:
    0 0,
    50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.blurbg.landing {
  background-image: none;
  display: none;
}

.blurbg-beat {
  opacity: 1;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-image: none;
  background-size: auto;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
}

.blurbg-beat.legal {
  background-image: none;
}

.blurbg-beat.landing {
  display: none;
}

.down-load-cont {
  z-index: 1;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: relative;
}

.down-load-cont.top {
  margin-top: 10vh;
  margin-bottom: 60px;
}

.down-load-cont.legal {
  margin-top: 60px;
}

.navarch {
  color: var(--gray);
}

.navarch.white {
  opacity: 0.8;
}

.close {
  display: block;
  position: absolute;
}

.navwindow {
  z-index: 2;
  background-color: var(--gray);
  opacity: 1;
  background-image: none;
  background-size: auto;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin-top: 0;
  padding-top: 0;
  display: none;
  position: fixed;
  inset: 0%;
}

.navwindow.landing {
  display: none;
}

.navlink {
  color: var(--gray);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 3vh;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 28px;
  line-height: 30px;
}

.navlink.last {
  margin-bottom: 0;
}

.navlink.small {
  margin-bottom: 2vh;
  font-size: 20px;
  line-height: 20px;
}

.navlink.ipad,
.navlink.mobile {
  display: none;
}

.legalcont {
  z-index: 3;
  position: relative;
}

.legalcont.nav {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 971px;
  display: flex;
  position: absolute;
  bottom: 4vh;
}

.socialcont {
  position: absolute;
  bottom: 4vh;
  right: 4vw;
}

.social {
  width: 32px;
  height: 32px;
  margin-right: 0;
}

@media (min-width: 992px) {
  .social {
    width: 48px;
    height: 48px;
  }
}

.section-end.fp-auto-height {
  width: 100%;
  height: auto;
}

.scrollouter-left.section.mob {
  display: none;
}

.int-image-scale._02 {
  object-position: 50% 50%;
}

.int-image-scale._01 {
  object-fit: cover;
  object-position: 50% 20%;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

.int-image-scale._03 {
  object-fit: cover;
  object-position: 50% 100%;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  position: relative;
}

.sr-text-int-icon.it {
  margin-top: 40px;
  margin-bottom: 40px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-style: italic;
}

.sr-text-int-icon.footer {
  color: var(--black);
  text-align: center;
  letter-spacing: 0.6px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 16px;
}

.sr-text-int-icon.footer._12 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 14px;
  line-height: 1;
}

.sr-text-int-icon.footer._14 {
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 18px;
  line-height: 26px;
}

.sr-text-int-icon.footer._14.mobs {
  display: none;
}

.sr-text-int-icon.footer.disc {
  max-width: 63%;
  margin-top: 0;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 10px;
  line-height: 1;
}

.sr-text-int-icon.dev.disc {
  max-width: 63%;
  margin-top: 0;
  margin-bottom: 20px;
  font-family:
    Roos St Regis Text,
    sans-serif;
  font-size: 10px;
  line-height: 1;
}

.sr-text-int-icon.ib {
  max-width: 400px;
  font-family:
    Roos St Regis Display,
    sans-serif;
}

.sr-text-int-icon._03 {
  max-width: 410px;
}

.sr-text-int-icon._05 {
  max-width: 400px;
}

.sr-text-int-icon._06 {
  max-width: 413px;
}

.sr-text-int-icon.map {
  max-width: 430px;
}

.scale {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.scale.fix {
  width: 100%;
  height: 100%;
}

.scale-second {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.scale-second.fix {
  width: 100%;
  height: 100%;
}

.home {
  opacity: 1;
  height: 100%;
}

.home.w--current {
  height: 100%;
}

.secret {
  display: flex;
  position: relative;
}

.date {
  color: var(--black);
  letter-spacing: 0.8px;
  margin-bottom: 24px;
  font-family:
    Suisse Intl,
    sans-serif;
  line-height: 14px;
}

.secretinfin {
  display: flex;
  position: relative;
  overflow: hidden;
}

.secretinfin.landing {
  display: flex;
}

.footerbtmcont {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 6vh;
}

.poly {
  color: var(--amen);
  margin-left: 0;
  padding-bottom: 0;
}

.amenlistcont.open {
  opacity: 1;
  height: auto;
  max-height: 200px;
}

.boatburger-close {
  z-index: 4;
  opacity: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 9px;
  display: flex;
  position: absolute;
}

.capterscont.landing {
  display: flex;
}

.chaplink:hover,
.chaplink.w--current {
  color: var(--black);
}

.chaplink.last {
  margin-bottom: 0;
}

.section-hide.fp-auto-height {
  width: 100%;
  height: auto;
}

.legallink.w--current {
  position: absolute;
  bottom: 4vh;
}

.boatcont {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 32px;
  height: 8vh;
  display: flex;
}

.boatcont.landing {
  display: none;
}

.svgdesk {
  height: 0;
  display: flex;
}

.svgmobile {
  height: 0;
  display: none;
}

.srsislider-copy.pointer.mob,
.srsislider-copy.pointer.mob-copy {
  display: none;
}

.form-cont-3.right {
  margin-left: 36px;
  display: block;
}

.form-cont-3.contact {
  width: 400px;
}

.radio-button-2.w--redirected-checked {
  background-color: #292929;
  border-color: #fff;
}

.radio-button-2.int {
  border-color: #292929;
}

.caption {
  text-align: right;
  margin-top: 8px;
  font-family: Inter, sans-serif;
  font-size: 10px;
  line-height: 1;
}

.hearcomment-3::placeholder {
  color: #222;
}

.hearcomment-3.int {
  border-color: #dedede;
  margin-top: 0;
  box-shadow: 1px 1px 10px 4px #00000014;
}

.chaplink-2:hover,
.chaplink-2.w--current {
  color: #292929;
}

.chaplink-2.last {
  margin-bottom: 0;
}

.moreinfo-3::placeholder {
  color: #222;
}

.moreinfo-3.int {
  border-color: #dedede;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 26px;
  box-shadow: 1px 1px 10px 4px #00000014;
}

.section-copy.fp-auto-height {
  width: 100%;
  height: auto;
}

.nav-cont-hero .home {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 100%;
}

.nav-cont-hero.contact {
  z-index: 10;
  border-bottom: 1px solid #70707080;
  position: relative;
}

.nav-cont-hero.contact.fix {
  padding-left: 50px;
  padding-right: 50px;
}

.nav-cont-hero.home {
  background-color: #fefefed9;
}

.nav-cont-hero.landing {
  display: flex;
}

.home-show,
.home-show.w--current {
  opacity: 1;
  height: 100%;
}

.srsislider-daynight.pointer {
  z-index: 1;
  height: 100%;
}

.srsislider-daynight.pointer.mob {
  display: none;
}

.daynightslider.pointer {
  display: none;
}

.tallboiimg.landing {
  object-fit: cover;
  align-self: center;
  height: auto;
  position: static;
  transform: none;
}

.overflow {
  overflow: hidden;
}

.sp.landing.mobile {
  height: 100vh;
}

.link {
  text-align: center;
  margin-top: 5vh;
  padding-bottom: 5vh;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  text-decoration: underline;
  display: block;
  position: static;
}

.slider {
  width: 100%;
  height: 100%;
}

.slider.landing-slider {
  height: 70vh;
}

.slider-3 {
  width: 95%;
  height: 100%;
  margin-right: 30px;
  padding-right: 0;
}

.button {
  object-fit: cover;
  background-image: url("/img/icons/arrow.png");
  background-position: 0 0;
  background-size: contain;
}

.slide-22 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/65ddf76e62917a5d14f17119_SRR%20SIB_NW_WestPoolDeck_Credit%20Binyan.webp");
  background-position: 50%;
  background-size: cover;
}

.slide-23 {
  background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/664d204957cd4fa1c4b53139_SRRSIB_WestPoolDeck_SW_FINAL_5K.webp");
  background-position: 0%;
  background-size: cover;
}

@media screen and (min-width: 1440px) {
  .desktop-wrapper {
    background-position: 0 0;
    background-size: auto;
  }

  .sr-info {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .sr-text.footer.disc {
    font-size: 12px;
    line-height: 16px;
  }

  .sr-text.footer._14-copy {
    line-height: 20px;
  }

  .sr-text.dev.disc,
  .sr-text.footer.disc {
    font-size: 12px;
    line-height: 16px;
  }

  .footer.pad {
    padding-top: 76px;
  }

  .left {
    width: 39%;
    top: 63px;
  }

  .form {
    border-bottom-color: #1eb8d1;
  }

  .logo-container {
    max-width: 400px;
  }

  .arrow {
    width: 46px;
  }

  .int-img {
    padding: 3%;
  }

  .int-image._02 {
    object-position: 50% 10%;
  }

  .int-image._01 {
    object-fit: contain;
    max-height: 80vh;
  }

  .int-img-cont._01ch {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/641a1fb45407abb0fe5fd0e7_01-wide-r2.webp");
    background-position: 50%;
    background-size: cover;
    justify-content: flex-end;
    max-height: none;
  }

  .int-img-cont._02 {
    background-position: 50% 20%;
  }

  .int-img-cont._03 {
    background-position: 50%;
  }

  .int-img-cont._05,
  .int-img-cont._07 {
    background-position: 50% 0;
  }

  .int-img-cont._09 {
    background-position: 100%;
  }

  .int-img-cont._08 {
    background-position: 50% 0;
  }

  .int-img-cont.map {
    background-position: 40%;
  }

  .int-img-cont._12 {
    background-position: 50%;
  }

  .int-img-cont._10,
  .int-img-cont._11 {
    background-position: 50% 0;
  }

  .int-img-cont._13 {
    background-position: 50% 100%;
  }

  .int-img-cont.fixmob,
  .int-img-cont._01ch-copy {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/639b4fc0d50fbdff7846653c_01-wide.webp");
    background-position: 50%;
    background-size: cover;
    justify-content: flex-end;
    max-height: none;
  }

  .int-img-cont._02-copy {
    background-position: 50% 0;
  }

  .srsi-header.ib {
    width: 209px;
  }

  .srsi-header.el {
    width: 179px;
  }

  .srsi-header.iv {
    width: 216px;
  }

  .srsi-header.el-copy {
    width: 179px;
  }

  .sr-text-int.footer.disc,
  .sr-text-int.dev.disc {
    font-size: 12px;
    line-height: 16px;
  }

  .sr-text-int.quote {
    font-family:
      Roos St Regis Display,
      sans-serif;
  }

  .sr-text-int.legalpage {
    font-size: 16px;
    line-height: 20px;
  }

  .slidercontent.right {
    padding-left: 0;
  }

  .squareslider.pointer {
    max-height: 80vh;
  }

  .int-image-slider._02 {
    object-position: 50% 10%;
  }

  .int-slide-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .hide {
    display: none;
  }

  .nestcopy.green {
    max-width: 350px;
  }

  .green.arrival {
    object-fit: cover;
  }

  .blurbg {
    background-image: none;
    background-position:
      0 0,
      50%;
    background-size: cover, cover;
  }

  .blurbg-beat {
    background-image: none;
    background-position: 0 0;
    background-size: auto;
    background-attachment: scroll;
  }

  .int-image-scale._02 {
    object-position: 50% 10%;
  }

  .int-image-scale._01 {
    object-fit: contain;
    max-height: 80vh;
  }

  .sr-text-int-icon.footer.disc,
  .sr-text-int-icon.dev.disc {
    font-size: 12px;
    line-height: 16px;
  }

}

@media screen and (min-width: 1920px) {

  .sr-logo {
    height: 90%;
  }

  .sr-logo.showmobile,
  .sr-logo.showmobile-copy,
  .sr-logo.showmobile-white {
    height: 100%;
  }

  .sr-text._460 {
    max-width: 380px;
    margin-bottom: 40px;
    font-size: 20px;
  }

  .sr-text.footer {
    font-size: 20px;
  }

  .sr-text.footer._14 {
    line-height: 30px;
  }

  .sr-text.footer.disc.int,
  .sr-text.footer.disc.white,
  .sr-text.footer.disc.white-legal {
    max-width: 920px;
  }

  .sr-text.footer._14-copy {
    line-height: 20px;
  }

  .sr-text.dev._12 {
    font-size: 16px;
  }

  .sr-text.dev._14 {
    font-size: 24px;
    line-height: 30px;
  }

  .sr-text.dev.disc {
    max-width: 58%;
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text.dev,
  .sr-text.footer {
    font-size: 20px;
  }

  .sr-text.footer.disc {
    max-width: 58%;
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text.footer.disc.int {
    max-width: 920px;
  }

  .sr-text.footer._12 {
    font-size: 16px;
  }

  .sr-text.footer._14 {
    font-size: 24px;
    line-height: 30px;
  }

  .form-cont.ty {
    margin-top: 0;
  }

  .left {
    width: 30%;
    top: 0;
  }

  .form {
    height: 100%;
    margin-bottom: 0;
  }

  .form.int {
    height: auto;
  }

  .site {
    margin-bottom: 20px;
  }

  .arrow {
    width: 60px;
  }

  .int-split-cont.landing-half {
    padding-right: 0;
  }

  .int-img {
    padding: 3%;
  }

  .int-img-cont {
    max-height: 50vw;
  }

  .int-img-cont._02 {
    background-position: 50% 20%;
  }

  .int-img-cont._03 {
    background-position: 50%;
  }

  .int-img-cont._05,
  .int-img-cont._07 {
    background-position: 50% 0;
  }

  .int-img-cont._09 {
    background-position: 100%;
  }

  .int-img-cont._08 {
    background-position: 50% 0;
  }

  .int-img-cont.map {
    background-position: 60%;
  }

  .int-img-cont._12 {
    background-position: 50%;
  }

  .int-img-cont._10,
  .int-img-cont._11 {
    background-position: 50% 0;
  }

  .int-img-cont._13 {
    background-position: 50% 100%;
  }

  .int-img-cont.fixmob,
  .int-img-cont._01ch-copy {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/639b4fc0d50fbdff7846653c_01-wide.webp");
    background-position: 50%;
    background-size: cover;
  }

  .int-img-cont._02-copy {
    background-position: 50% 0;
  }

  .sr-text-int._460 {
    max-width: 380px;
    margin-bottom: 40px;
    font-size: 20px;
  }

  .sr-text-int.footer {
    font-size: 20px;
  }

  .sr-text-int.footer._12 {
    font-size: 16px;
  }

  .sr-text-int.footer._14 {
    font-size: 24px;
    line-height: 30px;
  }

  .sr-text-int.footer.disc {
    max-width: 58%;
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text-int.dev {
    font-size: 20px;
  }

  .sr-text-int.dev._12 {
    font-size: 16px;
  }

  .sr-text-int.dev._14 {
    font-size: 24px;
    line-height: 30px;
  }

  .sr-text-int.dev.disc {
    max-width: 58%;
    font-size: 14px;
    line-height: 18px;
  }

  .slidercontent.right {
    padding-left: 0;
  }

  .int-slider.pointer {
    max-height: none;
  }

  .int-slide-img {
    display: block;
  }

  .embed-desk {
    width: 100vw;
    height: 100vh;
  }

  .nestcopy.green {
    max-width: 440px;
  }

  .srsislider.pointer {
    width: 100vw;
  }

  .sr-text-int-icon.footer {
    font-size: 20px;
  }

  .sr-text-int-icon.footer._12 {
    font-size: 16px;
  }

  .sr-text-int-icon.footer._14 {
    font-size: 24px;
    line-height: 30px;
  }

  .sr-text-int-icon.footer.disc {
    max-width: 58%;
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text-int-icon.dev.disc {
    max-width: 58%;
    font-size: 14px;
    line-height: 18px;
  }

  .srsislider-daynight.pointer {
    width: 100%;
    height: 100%;
  }

  .slide {
    width: 100%;
  }
}

@media screen and (max-width: 991px) {

  .sr-logo {
    display: block;
  }

  .sr-logo.hide {
    display: none;
  }

  .desktop-wrapper {
    flex-direction: column;
    display: flex;
  }

  .desktop-wrapper.hide {
    display: none;
  }

  .bg-vid.snap.show.ipad {
    width: 100vw;
  }

  .bg-vid.snap.ipad {
    display: flex;
    position: absolute;
  }

  .sr-info {
    order: -1;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sr-info._03.ipad {
    align-items: center;
    width: 60%;
    height: 84%;
    padding-right: 0;
  }

  .sr-info.amen {
    padding-top: 6vh;
  }

  .sr-info.ib-copy {
    flex-direction: column;
    order: 1;
    justify-content: flex-start;
    align-items: center;
    height: 40vh;
    margin-top: 0;
    padding-top: 6vh;
  }

  .sr-info.ib-copy.landing-withslider {
    margin-bottom: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .sr-info.ib-copy.tablets {
    padding-top: 0;
  }

  .sr-text.footer.disc {
    max-width: 66%;
  }

  .sr-text.footer.disc.int.foot {
    max-width: 620px;
  }

  .sr-text.footer._14-copy.mobs {
    display: flex;
  }

  .sr-text.footer._14-copy.hide {
    display: none;
  }

  .sr-text.dev._14.mobs {
    display: flex;
  }

  .sr-text.dev._14.hide {
    display: none;
  }

  .sr-text.dev.disc,
  .sr-text.footer.disc {
    max-width: 66%;
  }

  .sr-text.footer._14.hide {
    display: none;
  }

  .sr-text.footer._14.hide-copy {
    display: none;
  }

  .sr-text.footer._14.mobs {
    display: flex;
  }

  .footer.pad.snap-anchor {
    height: 66vh;
  }

  .form-cont.landing {
    margin-top: 20px;
  }

  .form-text.int.landing {
    margin-top: 2vh;
    font-size: 16px;
  }

  .left {
    top: auto;
  }

  .form-cont-2.right {
    margin-left: 0;
    padding-right: 0;
  }

  .form-cont-2.contact {
    width: auto;
    padding-right: 0;
  }

  .form-block {
    width: 600px;
  }

  .form {
    background-image: none;
    width: 100%;
    height: auto;
    padding-top: 0;
    display: flex;
    top: 0;
    bottom: auto;
  }

  .site {
    font-size: 16px;
    bottom: auto;
  }

  .logo-container {
    width: 50%;
  }

  .infinitynumber.clickable.landing {
    color: var(--pink);
    font-size: 16px;
  }

  .arrow-cont {
    display: none;
  }

  .phone {
    color: var(--black);
    text-align: center;
    font-family:
      Roos St Regis Display,
      sans-serif;
    font-size: 18px;
  }

  .inquitre {
    display: flex;
  }

  .int-split-cont {
    flex-direction: column;
    padding: 0;
  }

  .int-img {
    width: 100%;
  }

  .int-img-cont._01ch-copy {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/641a1fb45407abb0fe5fd0e7_01-wide-r2.webp");
    background-position: 50%;
    width: 100%;
    height: 60vh;
  }

  .int-img-cont._02-copy {
    background-position: 50% 0;
    height: 70vh;
  }

  .srsi-header.ib,
  .srsi-header.el {
    margin-bottom: 3vh;
  }

  .srsi-header._13 {
    width: 200px;
  }

  .srsi-header.el-copy {
    margin-bottom: 3vh;
  }

  .sr-text-int.footer._14.mobs {
    display: flex;
  }

  .sr-text-int.footer._14.hide {
    display: none;
  }

  .sr-text-int.footer.disc {
    max-width: 66%;
  }

  .sr-text-int.dev._14.mobs {
    display: flex;
  }

  .sr-text-int.dev._14.hide {
    display: none;
  }

  .sr-text-int.dev.disc {
    max-width: 66%;
  }

  .sr-text-int.ellipse.desk {
    display: none;
  }

  .sr-text-int.ellipse.mob {
    display: flex;
  }

  .sr-text-int.ellipse.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: flex;
  }

  .sr-text-int.ib.mob {
    display: flex;
  }

  .sr-text-int.ib.desk-copy {
    max-width: 80%;
    font-size: 1.6vh;
    line-height: 1.8vh;
    display: none;
  }

  .sr-text-int.ib.mob-copy {
    max-width: 80%;
    font-size: 1.6vh;
    line-height: 2vh;
    display: flex;
  }

  .sr-text-int.ib.mob-copy.landing-copy {
    font-size: 16px;
    line-height: 20px;
  }

  .sr-text-int._03.mob {
    display: flex;
  }

  .sr-text-int._03.desk {
    display: none;
  }

  .sr-text-int._03.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: flex;
  }

  .sr-text-int._03.mob-copy.tablet {
    font-size: 16px;
    line-height: 20px;
  }

  .sr-text-int._04.desk {
    display: none;
  }

  .sr-text-int._04.mob,
  .sr-text-int._04.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: block;
  }

  .sr-text-int._05.desk {
    display: none;
  }

  .sr-text-int._05.mob {
    display: flex;
  }

  .sr-text-int._05.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: flex;
  }

  .sr-text-int._06.desk {
    display: none;
  }

  .sr-text-int._06.mob {
    display: block;
  }

  .sr-text-int._06.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: block;
  }

  .sr-text-int._06.mob-copy.tablets {
    font-size: 16px;
    line-height: 20px;
  }

  .sr-text-int._7-5.desk {
    display: none;
  }

  .sr-text-int._7-5.mob {
    display: flex;
  }

  .sr-text-int._7-5.mob-copy {
    max-width: 460px;
    font-size: 1.6vh;
    line-height: 2vh;
    display: flex;
  }

  .sr-text-int._09.desk {
    display: none;
  }

  .sr-text-int._09.mob {
    display: block;
  }

  .sr-text-int._09.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: block;
  }

  .sr-text-int._09.mob-copy.tablets {
    font-size: 16px;
    line-height: 20px;
  }

  .sr-text-int._12.desk-copy {
    font-size: 1.6vh;
    line-height: 2vh;
  }

  .sr-text-int.map.desk {
    display: none;
  }

  .sr-text-int.map.mob {
    display: block;
  }

  .sr-text-int.map.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: block;
  }

  .sr-text-int.map.mob-copy.tablets {
    font-size: 16px;
    line-height: 20px;
  }

  .sr-text-int._10.desk {
    display: none;
  }

  .sr-text-int._10.mob {
    display: block;
  }

  .sr-text-int._10.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: block;
  }

  .sr-text-int.for.desk {
    display: none;
  }

  .sr-text-int.for.mob {
    display: block;
  }

  .sr-text-int.for.mob-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: block;
  }

  .sr-text-int.chat.desk {
    display: none;
  }

  .sr-text-int.chat.mobs {
    display: flex;
  }

  .sr-text-int.chat.mobs-copy {
    font-size: 1.6vh;
    line-height: 2vh;
    display: flex;
  }

  .sr-text-int.bul.desk {
    font-size: 1.6vh;
  }

  .sr-text-int.iv-white.ipad {
    max-width: 340px;
    position: relative;
  }

  .sr-text-int._13-copy,
  .sr-text-int.arq-copy,
  .sr-text-int.anas-copy {
    font-size: 1.6vh;
    line-height: 2vh;
  }

  .scrollouter.section.desk-copy {
    width: 100vw;
    height: 100vh;
  }

  .slidercontent.right.ipad {
    justify-content: flex-end;
    padding-top: 3vh;
  }

  .int-slider-cont.ipad {
    width: 100%;
    height: 50vh;
    padding-top: 0%;
    padding-left: 14vh;
    padding-right: 14vh;
  }

  .embed-desk {
    display: none;
  }

  .embed-desk.landing,
  .mobilefallback.video-placeholder.landing {
    display: flex;
  }

  .srsislider.pointer {
    display: none;
  }

  .srsislider.pointer.section-copy {
    display: flex;
  }

  .srsislider.pointer.ipad {
    width: 100%;
    height: 27vh;
    display: flex;
  }

  .sliderimgcont._01.auto {
    width: 64vw;
    height: 27vh;
  }

  .sliderimgcont._02.auto {
    width: 100%;
    height: 27vh;
  }

  .sliderimgcont._01-01-copy {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/646f736d981a10d5589d6bf1_DBOX_StRegis_SunnyIslesBeach_SitePlan%201.webp");
    background-position: 15% 0;
  }

  .sliderimgcont._02-5.auto {
    width: 100%;
    height: 27vh;
  }

  .sliderimgcont.extra01.auto {
    width: 64vw;
    height: 27vh;
  }

  .sliderimgcont._02-extra.auto {
    width: 100%;
    height: 27vh;
  }

  .section {
    height: 100vh;
  }

  .section.copy,
  .section.landing-half,
  .contactcont {
    height: auto;
  }

  .blurbg {
    background-image: none;
  }

  .blurbg-beat {
    background-image: none;
    background-position: 0 0;
    background-size: cover;
  }

  .navarch {
    display: block;
  }

  .navwindow {
    opacity: 1;
    height: auto;
  }

  .navlink.ipad {
    display: flex;
  }

  .navlink.desk,
  .navlink.mobile {
    display: none;
  }

  .sr-text-int-icon.footer._14.mobs {
    display: flex;
  }

  .sr-text-int-icon.footer._14.hide {
    display: none;
  }

  .sr-text-int-icon.footer.disc {
    max-width: 66%;
  }

  .sr-text-int-icon.dev._14.hide {
    display: none;
  }

  .sr-text-int-icon.dev.disc {
    max-width: 66%;
  }

  .scale.ipad,
  .scale-second.auto {
    width: 100%;
  }

  .capterscont.hide {
    display: none;
  }

  .nav-final,
  .boatcont {
    display: flex;
  }

  .gridslider.ipad {
    width: 100vw;
    padding-left: 18vw;
    padding-right: 18vw;
  }

  .gridslider.ipad.extra {
    height: auto;
  }

  .message {
    color: var(--black);
    text-align: center;
    font-family:
      Roos St Regis Display,
      sans-serif;
    font-size: 18px;
  }

  .message.deskt {
    z-index: 1;
    color: #f1f1f1;
    text-transform: uppercase;
    max-width: 490px;
    font-family: garamond-premier-pro-display, sans-serif;
    font-size: 32px;
    line-height: 32px;
    position: relative;
  }

  .message.mobland {
    z-index: 1;
    color: #f1f1f1;
    text-transform: uppercase;
    max-width: 490px;
    font-family: garamond-premier-pro-display, sans-serif;
    font-size: 32px;
    line-height: 32px;
    display: none;
    position: relative;
  }

  .form-cont-3.right {
    margin-left: 0;
    padding-right: 0;
  }

  .form-cont-3.contact {
    width: auto;
  }

  .blurbg-beat-2.landing {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hearcomment-3.int {
    padding-bottom: 40px;
  }

  .int-img-2.ipad {
    height: 38vh;
  }

  .srsislider-daynight.pointer {
    display: none;
  }

  .srsislider-daynight.pointer.section-copy {
    display: flex;
  }

  .srsislider-daynight.pointer.ipad {
    width: 100%;
    height: 27vh;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .desktop-wrapper {
    display: flex;
  }

  .desktop-wrapper.hide {
    display: none;
  }

  .sr-info._03.ipad.landing {
    margin-left: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .form-block {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .form {
    display: flex;
  }

  .site {
    margin-top: 20px;
    position: relative;
    bottom: auto;
  }

  .logo-container {
    width: 70%;
  }

  .image {
    width: 10%;
    margin-top: 20px;
    margin-bottom: 80px;
    display: block;
    position: absolute;
    top: 0;
  }

  .phone {
    margin-top: 20px;
    font-family:
      Roos St Regis Display,
      sans-serif;
    font-size: 16px;
  }

  .int-img-cont._01ch-copy {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/641a1fb503d2d34fc28edfa3_01-vert-r1.webp");
  }

  .blurbg {
    background-image: none;
    background-position: 0 0;
    background-size: contain;
  }

  .message {
    margin-top: 20px;
    font-family:
      Roos St Regis Display,
      sans-serif;
    font-size: 16px;
  }

  .message.deskt {
    display: none;
  }

  .message.mobland {
    max-width: 320px;
    font-size: 22px;
    line-height: 22px;
    display: flex;
  }

}

@media screen and (max-width: 479px) {

  .nav-cont.contact {
    position: fixed;
  }

  .nav-cont.contact.fix {
    height: 11vw;
    padding: 20px;
  }

  .nav-cont.off {
    z-index: 20;
  }

  .sr-logo {
    height: 80%;
  }

  .sr-logo.showmobile {
    height: 100%;
    display: block;
  }

  .sr-logo.showmobile.fix {
    height: 4vh;
    display: block;
    left: 10px;
  }

  .sr-logo.hide {
    display: none;
  }

  .sr-logo.showmobile {
    height: 30px;
    display: block;
    position: absolute;
  }

  .sr-logo.showmobile.seb {
    height: 4vh;
    display: block;
    left: 10px;
  }

  .sr-logo.showmobile-copy {
    height: 100%;
    display: block;
  }

  .sr-logo.showmobile-copy.fix {
    height: 4vh;
    display: block;
    left: 10px;
  }

  .sr-logo.showmobile-white {
    height: 100%;
    display: block;
  }

  .sr-logo.showmobile-white.fix {
    height: 4vh;
    display: block;
    left: 10px;
  }

  .desktop-wrapper {
    display: block;
    overflow: hidden;
  }

  .desktop-wrapper.hide {
    display: block;
    overflow: visible;
  }

  .bg-vid.snap {
    position: static;
    overflow: visible;
  }

  .bg-vid.snap.show {
    height: 100vh;
    display: block;
    position: sticky;
    top: 0;
  }

  .bg-vid.snap.ipad {
    height: 100vh;
    display: block;
  }

  .bg-vid.fix {
    height: auto;
  }

  .sr-info {
    order: 1;
    justify-content: space-between;
    align-self: auto;
    height: 70vw;
    padding-top: 7vw;
    padding-bottom: 0;
    display: flex;
    position: static;
  }

  .sr-info._03 {
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 4vh;
    padding-left: 40px;
    padding-right: 40px;
  }

  .sr-info._03.landing.mob {
    width: 100%;
  }

  .sr-info.ib {
    justify-content: flex-start;
    padding-top: 7vw;
  }

  .sr-info.ib.landing {
    padding-top: 5vw;
  }

  .sr-info.top {
    justify-content: flex-start;
  }

  .sr-info.amen {
    height: 85vw;
  }

  .sr-info.ib-copy {
    justify-content: flex-start;
  }

  .sr-info.landing.amenities.mob {
    order: 2;
    height: 100vw;
  }

  .sr-info.landing.amenities.mob.mob1st {
    order: 1;
  }

  .sr-info.landing.locale.mob {
    width: 100%;
    height: 50%;
    display: block;
  }

  .sr-info.landing.locale.desk {
    display: none;
  }

  .sr-info.landing.inquire.mobile {
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }

  .sr-info.landing.half {
    height: 100%;
  }

  .sr-text.footer {
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text.footer._14.mobile {
    display: block;
  }

  .sr-text.footer._14.mobs,
  .sr-text.footer._14.hide {
    display: none;
  }

  .sr-text.footer.disc.white-legal {
    margin-bottom: 4vh;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 1.2vh;
    line-height: 1.5vh;
  }

  .sr-text.footer._14-copy {
    font-size: 1vh;
    line-height: 2vh;
    display: flex;
  }

  .sr-text.footer._14-copy.mobile {
    display: block;
  }

  .sr-text.footer._14-copy.mobs,
  .sr-text.footer._14-copy.hide {
    display: none;
  }

  .sr-text.dev._12 {
    max-width: 300px;
    line-height: 18px;
  }

  .sr-text.dev._14.mobile {
    display: block;
  }

  .sr-text.dev._14.hide {
    display: none;
  }

  .sr-text.dev.disc {
    line-height: 10px;
  }

  .sr-text.intfoot {
    text-align: center;
    font-family:
      Roos St Regis Display,
      sans-serif;
    font-size: 2vh;
    line-height: 2.4vh;
  }

  div.sr-text.intfoot.dash {
    display: none;
  }

  .sr-text.intfoot.foot {
    max-width: 320px;
    font-family:
      Roos St Regis Display,
      sans-serif;
  }

  .sr-text.dev,
  .sr-text.footer {
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text.footer.disc {
    line-height: 10px;
  }

  .sr-text.footer.disc.int {
    margin-bottom: 0;
  }

  .sr-text.footer.disc.int.foot {
    margin-bottom: 40px;
  }

  .sr-text.footer._12 {
    max-width: 300px;
    line-height: 18px;
  }

  .sr-text.footer._14.hide,
  .sr-text.footer._14.hide-copy {
    display: none;
  }

  .sr-text.footer._14.show {
    display: block;
  }

  .sr-text.footer._14 {
    display: flex;
  }

  .sr-text.footer._14.mobs {
    display: none;
  }

  .footer.pad.snap-anchor {
    height: auto;
    padding-bottom: 5vh;
    padding-left: 20px;
    padding-right: 20px;
  }

  .form-cont {
    width: 100%;
    height: auto;
    margin-top: 2vh;
    padding-top: 0;
    position: relative;
  }

  .form-cont.download {
    margin-top: 0;
  }

  .form-cont.legal {
    margin-top: 0;
    padding-top: 24vh;
    padding-left: 4vh;
    padding-right: 4vh;
  }

  .form-cont.nav {
    height: 100vh;
    margin-top: 0;
    padding-bottom: 10vh;
  }

  .form-cont.contact {
    justify-content: flex-start;
    height: 120vh;
    margin-top: 0;
    padding-top: 3vh;
  }

  .form-cont.ty {
    margin-top: 0;
    padding-top: 6vh;
  }

  .form-cont.landing.mob {
    flex: 0 auto;
    height: auto;
    margin-top: 0;
  }

  .form-text.int {
    max-width: 330px;
    margin-top: 2vh;
    margin-bottom: 1vh;
    font-size: 2vh;
    line-height: 2.2vh;
  }

  .form-cont-2.right {
    width: 48%;
  }

  .form-cont-2.right._100,
  .form-cont-2.contact {
    width: 100%;
  }

  .form-cont-2.contact.int.vh {
    margin-top: 0;
  }

  .form-cont-2.int {
    width: 48%;
  }

  .form-cont-2.int._100 {
    width: 100%;
  }

  .form-block {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .form {
    z-index: 2;
    max-width: none;
    height: 100vh;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    position: static;
    top: auto;
    overflow: scroll;
  }

  .form.int {
    height: auto;
    overflow: visible;
  }

  .la-box.int,
  .la-box.hidden {
    height: 3vh;
  }

  .formpiece.int {
    flex-direction: row;
    justify-content: space-between;
  }

  .formpiece.vh {
    flex-direction: column;
    margin-top: 0;
  }

  .lafield.selector.int._400,
  .lafield.selector.int._400-copy {
    font-size: 2vh;
  }

  .lafield.selector.int-copy {
    margin-top: 0;
    margin-bottom: 2vh;
    font-size: 2vh;
  }

  .lafield.selector.int-copy._400,
  .lafield.selector.int-copy._400-copy {
    font-size: 2vh;
  }

  .lafield.broker.int,
  .lafield.radio.int,
  .lafield.int {
    font-size: 2vh;
    line-height: 2.2vh;
  }

  .lafield.selector {
    padding-top: 6px;
    font-size: 16px;
    line-height: 16px;
  }

  .lafield.selector.int {
    margin-top: 0;
    font-size: 2vh;
  }

  .lafield.selector.int._400 {
    font-size: 2vh;
  }

  .site {
    text-align: center;
    max-width: 300px;
    bottom: auto;
  }

  .moreinfo.int {
    height: 5vh;
    margin-bottom: 2vh;
    padding-top: 12px;
    padding-bottom: 0;
    font-size: 1.8vh;
    line-height: 2.2vh;
  }

  .form-horizontal.flex {
    margin-top: 0;
    margin-bottom: 0;
  }

  .form-horizontal.flex.broker {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .form-horizontal.flex {
    margin-top: 8px;
  }

  .logo-container {
    width: 100%;
    max-width: 300px;
    padding-left: 0;
    padding-right: 0;
  }

  .logo-container.int {
    margin-bottom: 48px;
  }

  .fortune-logo {
    height: 44px;
  }

  .mobile-crop {
    display: none;
  }

  .hearcomment.int {
    height: 5vh;
    margin-bottom: 2vh;
    padding-top: 12px;
    padding-bottom: 0;
    font-size: 1.8vh;
    line-height: 2.2vh;
  }

  .inquitre {
    margin-left: 16px;
    margin-right: 4vw;
    font-size: 14px;
    line-height: 1;
    display: block;
  }

  .inquitre.white.landing {
    display: none;
  }

  .inquitre.white.landing.mobile,
  .inquitre.landing {
    display: block;
  }

  .inquitre.landing.desktop {
    display: none;
  }

  .inquitre.landing.mobileonly {
    display: block;
  }

  .int-split-cont {
    justify-content: flex-start;
    height: 100vh;
    padding: 11vw 10vw 7vw;
  }

  .int-split-cont.pad {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .int-split-cont.notop {
    flex-direction: column;
    padding-top: 0;
  }

  .int-split-cont.notop.landing-full {
    height: auto;
    display: block;
  }

  .int-split-cont.landing-half {
    height: 50vh;
    padding-top: 5vh;
    padding-left: 1vh;
    padding-right: 1vh;
  }

  .int-split-cont.landing-full.amenities {
    order: -1;
    height: auto;
  }

  .int-split-cont.landing {
    order: 0;
    height: auto;
  }

  .int-split-cont.landing.tallimage {
    order: 1;
    height: 100vh;
  }

  .int-img {
    object-fit: fill;
    background-image: none;
    background-size: auto;
    order: 0;
    justify-content: flex-start;
    height: auto;
    margin-top: 0;
    padding: 0%;
  }

  .int-image._01.hide {
    max-height: none;
    display: none;
  }

  .int-img-cont {
    width: 80vw;
    height: 50vh;
  }

  .int-img-cont._01ch {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/638fb8ecd2f03117d38980a6_01-ch.webp");
    background-position: 50% 100%;
    background-size: cover;
    width: 80vw;
    height: 50vh;
  }

  .int-img-cont._02 {
    width: 80vw;
    height: 50vh;
  }

  .int-img-cont._03,
  .int-img-cont._04,
  .int-img-cont._05,
  .int-img-cont._06 {
    height: 50vh;
  }

  .int-img-cont._07 {
    height: 30vh;
  }

  .int-img-cont._09.landing.mobile {
    height: 35vh;
  }

  .int-img-cont.fixmob {
    width: 80vw;
    height: 80vw;
  }

  .int-img-cont._01ch-copy {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/638fb8ecd2f03117d38980a6_01-ch.webp");
    background-position: 50% 100%;
    background-size: cover;
    width: 80vw;
    height: 50vh;
  }

  .int-img-cont._02-copy {
    width: 80vw;
    height: 50vh;
  }

  .int-img-cont.tallboi {
    height: 64vh;
  }

  .srsi-header.ib {
    width: 167.2px;
    margin-bottom: 7vw;
  }

  .srsi-header.el {
    width: 143.2px;
    margin-bottom: auto;
  }

  .srsi-header.iv {
    margin-top: 4vh;
  }

  .srsi-header._7-5 {
    width: 163px;
  }

  .srsi-header._07 {
    width: 315px;
    margin-bottom: 2vh;
  }

  .srsi-header._06 {
    width: 157px;
  }

  .srsi-header._06.vh {
    margin-bottom: 1vh;
  }

  .srsi-header._05 {
    width: 212px;
  }

  .srsi-header._04 {
    width: 248px;
    margin-bottom: 26px;
  }

  .srsi-header._03 {
    width: 240px;
  }

  .srsi-header._09 {
    width: 294.4px;
  }

  .srsi-header._08 {
    width: 263.2px;
  }

  .srsi-header.map {
    width: 226.4px;
  }

  .srsi-header._12 {
    width: 224.8px;
  }

  .srsi-header._10 {
    width: 204.8px;
  }

  .srsi-header._11 {
    width: 199.2px;
  }

  .srsi-header._13 {
    width: 214px;
    margin-bottom: 24px;
  }

  .srsi-header.el-copy {
    width: 143.2px;
    margin-bottom: auto;
  }

  .int-chapter.dev.desk {
    display: none;
  }

  .sr-text-int {
    font-size: 2.2vh;
    line-height: 2.8vh;
    display: flex;
  }

  .sr-text-int.footer {
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text-int.footer._12 {
    max-width: 300px;
    line-height: 18px;
  }

  .sr-text-int.footer._14.mobile {
    display: block;
  }

  .sr-text-int.footer._14.hide {
    display: none;
  }

  .sr-text-int.footer.disc {
    line-height: 10px;
  }

  .sr-text-int.dev {
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text-int.dev._12 {
    max-width: 300px;
    line-height: 18px;
  }

  .sr-text-int.dev._14.mobile {
    display: block;
  }

  .sr-text-int.dev._14.hide {
    display: none;
  }

  .sr-text-int.dev.disc {
    line-height: 10px;
  }

  .sr-text-int.ellipse.desk {
    display: none;
  }

  .sr-text-int.ellipse.mob,
  .sr-text-int.ellipse.mob-copy {
    font-size: 1.8vh;
    line-height: 2.1vh;
    display: flex;
  }

  .sr-text-int.ib {
    font-size: 14px;
    line-height: 16px;
  }

  .sr-text-int.ib.mob {
    font-size: 1.8vh;
    line-height: 2.1vh;
    display: flex;
  }

  .sr-text-int.ib.desk,
  .sr-text-int.ib.desk-copy {
    display: none;
  }

  .sr-text-int.ib.mob-copy {
    font-size: 1.8vh;
    line-height: 2.1vh;
    display: flex;
  }

  .sr-text-int.quote {
    font-size: 1.8vh;
    line-height: 2vh;
  }

  .sr-text-int.legalpage {
    font-size: 1.6vh;
    line-height: 2vh;
  }

  .sr-text-int._03.mob {
    display: flex;
  }

  .sr-text-int._03.desk {
    display: none;
  }

  .sr-text-int._03.mob-copy {
    display: flex;
  }

  .sr-text-int._04.desk {
    display: none;
  }

  .sr-text-int._04.mob,
  .sr-text-int._04.mob-copy {
    display: block;
  }

  .sr-text-int._05.desk {
    display: none;
  }

  .sr-text-int._05.mob,
  .sr-text-int._05.mob-copy {
    display: block;
  }

  .sr-text-int._06.desk {
    display: none;
  }

  .sr-text-int._06.mob {
    font-size: 1.6vh;
    display: block;
  }

  .sr-text-int._06.mob-copy {
    display: block;
  }

  .sr-text-int._7-5.desk {
    display: none;
  }

  .sr-text-int._7-5.mob,
  .sr-text-int._7-5.mob-copy {
    display: block;
  }

  .sr-text-int._09.desk {
    display: none;
  }

  .sr-text-int._09.mob,
  .sr-text-int._09.mob-copy {
    display: block;
  }

  .sr-text-int._12.desk {
    display: none;
  }

  .sr-text-int._12.mob {
    display: block;
  }

  .sr-text-int._12.desk-copy,
  .sr-text-int.map.desk {
    display: none;
  }

  .sr-text-int.map.mob,
  .sr-text-int.map.mob-copy {
    display: block;
  }

  .sr-text-int._10.desk {
    display: none;
  }

  .sr-text-int._10.mob,
  .sr-text-int._10.mob-copy,
  .sr-text-int._10.mob-copy {
    display: block;
  }

  .sr-text-int.for.desk {
    display: none;
  }

  .sr-text-int.for.mob,
  .sr-text-int.for.mob-copy {
    display: block;
  }

  .sr-text-int.chat.desk {
    display: none;
  }

  .sr-text-int.chat.mobs,
  .sr-text-int.chat.mobs-copy {
    display: block;
  }

  .sr-text-int.bul.desk {
    display: none;
  }

  .sr-text-int.bul.mob {
    display: flex;
  }

  .sr-text-int.iv-white.mob {
    max-width: 280px;
    margin-right: 0;
    display: flex;
  }

  .sr-text-int.iv-white.desk,
  .sr-text-int.iv-white.ipad {
    display: none;
  }

  .sr-text-int.landing-text-border {
    margin-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
  }

  .sr-text-int.landing-mobile {
    border-top: 1px solid #c36;
    padding-top: 20px;
    display: flex;
  }

  .sr-text-int.landing.mob,
  .scrollouter.section.desk {
    display: none;
  }

  .scrollouter.section.mob {
    height: 100vh;
    display: block;
  }

  .scrollouter.section.desk-copy {
    display: none;
  }

  .footerlinkcont {
    flex-direction: column;
    align-items: center;
    margin-bottom: 48px;
    display: flex;
  }

  .footerlink {
    margin-bottom: 16px;
  }

  .footerlink.last {
    margin-bottom: 0;
  }

  .addycont {
    margin-bottom: 48px;
  }

  .addyhorizontal {
    flex-direction: column;
    align-items: center;
  }

  .addyhorizontal.int {
    margin-bottom: 4vh;
  }

  .addyhorizontal.int.landing.mobile {
    display: block;
  }

  .paracont {
    height: 100vh;
    position: relative;
    overflow: visible;
  }

  .slidercontent.right {
    order: 1;
    margin-top: 0;
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .squareslider.pointer {
    width: 100%;
  }

  .int-slider-cont.last {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .hide {
    display: none;
  }

  .vidcont {
    background-color: #0000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 50vh;
  }

  .vidcont.video-with-placeholder {
    width: 100vw;
    display: flex;
  }

  .vidcont.video-with-placeholder.landing {
    background-image: none;
    height: 100vh;
    position: absolute;
    overflow: visible;
  }

  .embed-desk {
    height: 50vh;
    display: flex;
  }

  .embed-desk.landing {
    height: 100vh;
  }

  .mobilefallback {
    opacity: 1;
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63922604d1faee3715c5b2f0_website01-FF.webp");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 50vh;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
    position: absolute;
  }

  .mobilefallback.video-placeholder.landing {
    height: 100vh;
  }

  .srsislider._90 {
    height: 60vh;
  }

  .srsislider.pointer,
  .srsislider.pointer.section {
    display: none;
  }

  .srsislider.pointer.mob {
    height: 100vh;
    display: flex;
  }

  .srsislider.pointer.section-copy {
    display: none;
  }

  .srsislider.pointer.ipad {
    height: 28vh;
  }

  .green.arrival {
    width: 100%;
    height: auto;
  }

  .greenoffset.green {
    margin-left: 0;
    padding-top: 20vw;
  }

  .slide-nav.green,
  .slide-nav.green._60 {
    margin-left: 4vw;
  }

  .sliderimgcont._01.auto {
    width: 80vw;
    height: 28vh;
  }

  .sliderimgcont._01.auto.bedroom {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/641dcc39ad39ae2afb5613ba_DBOX_StRegis_SunnyIslesBeach_Residence_Interior_3301_MasterBedroom_4000px.webp");
  }

  .sliderimgcont._02.auto {
    height: 28vh;
  }

  .sliderimgcont._02.auto.kitchen {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/646f736ccb6d064f6708b6be_DBOX_StRegis_SunnyIslesBeach_Residence_Kitchen_5103%201.webp");
  }

  .sliderimgcont._01-01 {
    background-position: 25% 0;
    height: 100%;
  }

  .sliderimgcont._01-03 {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63b476bc4d88112aac8de9c5_03.webp");
    background-position: 50% 0;
    background-size: cover;
  }

  .sliderimgcont._01-05 {
    background-image: url("https://cdn.prod.website-files.com/620eac8d7d380e3ada1bca39/63b476bc13f9e7e22773764c_05.webp");
    background-position: 38%;
  }

  .sliderimgcont._01-01-copy {
    background-position: 25% 0;
    height: 100%;
  }

  .sliderimgcont._02-5.auto {
    height: 28vh;
  }

  .sliderimgcont.extra01.auto {
    width: 80vw;
    height: 28vh;
  }

  .sliderimgcont._02-extra.auto {
    height: 28vh;
  }

  .section {
    border: 1px #000;
    height: 100%;
  }

  .section.vh {
    padding-top: 0;
  }

  .section._100 {
    height: 100%;
  }

  .section.landing-half {
    height: auto;
  }

  .contactcont {
    height: 120vh;
    min-height: auto;
    position: relative;
    inset: 0%;
  }

  .contactcont.inter {
    justify-content: flex-start;
    height: 100vh;
    padding-top: 0;
    position: relative;
  }

  .contactcont.inter.landing {
    background-image: none;
    padding-top: 0;
  }

  .contactcont.press {
    height: auto;
  }

  .blurbg {
    background-image: none;
    background-position: 0 0;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
  }

  .blurbg.nav {
    height: 100vh;
  }

  .blurbg-beat {
    background-image: none;
    background-size: cover;
    height: 100%;
  }

  .blurbg-beat.landing {
    background-image: none;
  }

  .down-load-cont.top {
    margin-top: 0;
    margin-bottom: 8vh;
  }

  .down-load-cont.legal {
    margin-top: 20px;
  }

  .navarch {
    width: 8vw;
    height: 6vw;
    display: block;
  }

  .close {
    width: 8vw;
    height: 6vw;
  }

  .navwindow {
    opacity: 1;
    height: 100vh;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .navwindow.landing {
    display: none;
  }

  .navlink {
    margin-bottom: 2.5vh;
    font-size: 2.7vh;
    line-height: 1;
  }

  .navlink.small {
    font-size: 2vh;
    line-height: 2.4vh;
  }

  .navlink.ipad,
  .navlink.desk {
    display: none;
  }

  .navlink.mobile {
    display: flex;
  }

  .legalcont.nav {
    bottom: 5vh;
  }

  .scrollouter-left.section.desk {
    display: none;
  }

  .scrollouter-left.section.mob {
    height: 100vh;
    display: block;
  }

  .scrollouter-left.section.desk-copy {
    display: none;
  }

  .sr-text-int-icon.footer {
    font-size: 14px;
    line-height: 18px;
  }

  .sr-text-int-icon.footer._12 {
    max-width: 300px;
    line-height: 18px;
  }

  .sr-text-int-icon.footer._14.mobile {
    display: block;
  }

  .sr-text-int-icon.footer._14.hide {
    display: none;
  }

  .sr-text-int-icon.footer.disc {
    line-height: 10px;
  }

  .sr-text-int-icon.dev._14.mobile {
    display: block;
  }

  .sr-text-int-icon.dev._14.hide {
    display: none;
  }

  .sr-text-int-icon.dev.disc {
    line-height: 10px;
  }

  .scale {
    height: 100%;
  }

  .home {
    align-items: center;
    height: 9vw;
    display: flex;
  }

  .home.w--current {
    align-items: center;
    height: 9.5vw;
    display: flex;
  }

  .date {
    margin-top: 1vh;
    margin-bottom: 2vh;
    font-size: 1.8vh;
    line-height: 1;
  }

  .footerbtmcont {
    height: 100%;
    margin-top: 0;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
  }

  .poly {
    flex-direction: column;
    justify-content: center;
    display: flex;
  }

  .amenlistcont.open {
    opacity: 1;
    max-height: 200px;
  }

  .boatburger-close {
    opacity: 0;
    margin-right: 0;
  }

  .capterscont.landing {
    display: none;
  }

  .nav-final {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }

  .legallink.w--current {
    position: absolute;
    bottom: 4vh;
  }

  .boatcont {
    z-index: 1;
    height: 9vw;
    display: flex;
    position: relative;
  }

  .svgdesk {
    display: none;
  }

  .svgmobile {
    display: flex;
  }

  .gridslider.ipad {
    padding: 4vh 10vw;
  }

  .gridslider.ipad.extra {
    grid-template-rows: 1fr 1fr;
    height: auto;
  }

  .srsislider-copy.pointer,
  .srsislider-copy.pointer.section {
    display: none;
  }

  .srsislider-copy.pointer.mob {
    height: 100vh;
    display: flex;
  }

  .srsislider-copy.pointer.mob-copy {
    height: 100%;
    display: flex;
  }

  .form-cont-3.right,
  .form-cont-3.contact {
    width: 100%;
  }

  .hearcomment-3.int {
    height: 5vh;
    padding-bottom: 0;
    font-size: 1.8vh;
    line-height: 2.2vh;
  }

  .int-chapter-2.dev.desk {
    display: none;
  }

  .moreinfo-3.int {
    height: 5vh;
    padding-bottom: 0;
    font-size: 1.8vh;
    line-height: 2.2vh;
  }

  .section-copy.vh {
    padding-top: 0;
  }

  .int-chapter-2-copy.dev.desk {
    display: none;
  }

  .int-split-cont-copy.pad {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .int-split-cont-copy-copy.pad {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .nav-cont-hero.contact {
    position: fixed;
  }

  .nav-cont-hero.contact.fix {
    height: 11vw;
    padding: 20px;
  }

  .home-show {
    align-items: center;
    height: 9vw;
    display: flex;
  }

  .home-show.w--current {
    align-items: center;
    height: 9.5vw;
    display: flex;
  }

  .outercont {
    height: 130vh;
  }

  .srsislider-daynight.pointer,
  .srsislider-daynight.pointer.section {
    display: none;
  }

  .srsislider-daynight.pointer.mob {
    height: 100vh;
    display: flex;
  }

  .srsislider-daynight.pointer.section-copy {
    display: none;
  }

  .srsislider-daynight.pointer.ipad {
    height: 28vh;
  }

  .sp.landing.mobile {
    display: block;
  }

  .slider.landing-slider {
    height: 300px;
  }

  .slider-3 {
    width: 100%;
    height: 300px;
    margin-right: 0;
  }

  #w-node-_7aecbbcc-fb64-a5e8-4d7a-4935fa20b93c-fb09e86f,
  #w-node-_9d9da569-0625-7071-cd63-992d21713ebd-fb09e86f,
  #w-node-_9d9da569-0625-7071-cd63-992d21713ec9-fb09e86f,
  #w-node-a7aed5a2-fbf1-58db-0899-636c55860104-fb09e86f,
  #w-node-a7aed5a2-fbf1-58db-0899-636c55860106-fb09e86f,
  #w-node-_9d7503d8-c114-3cbe-5ea2-8600a81f4c5f-fb09e86f,
  #w-node-_9d7503d8-c114-3cbe-5ea2-8600a81f4c60-fb09e86f {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

.lang-dropdown {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.lang-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  padding: 4px 0;
}

.lang-dropdown-btn:hover,
.lang-dropdown:hover .lang-dropdown-btn {
  opacity: 1;
}

.dropdown-arrow {
  font-size: 6px;
  transition: transform 0.2s ease;
  line-height: 1;
}

.lang-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all 0.2s ease;
  z-index: 100;
  padding: 4px;
  margin-top: 6px;
}

.lang-dropdown:hover .lang-dropdown-menu,
.lang-dropdown:focus-within .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family:
    Roos St Regis Display,
    sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: #000;
  opacity: 0.5;
  border-radius: 4px;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
  white-space: nowrap;
}

.lang-option:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.04);
}

.lang-dropdown.white .lang-dropdown-btn {
  color: #fff;
}

.lang-dropdown.white .lang-dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

.lang-dropdown.white .lang-option {
  color: #000;
}


/* ============================================================
   SHARED GLOBAL STYLES — public/css/main.css
   ============================================================ */

/* === Contact Section Component === */
.contact-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background-color: #fff;
  position: relative;
  inset: 0%;
  padding-top: 8vh;
  animation: contactFormFadeIn 0.6s ease both;
}

@keyframes contactFormFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.contact-form__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.contact-form__heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  margin: 0 0 2vh;
}

/* min-height:100vh on .contact-form gives the desktop hero-style centered
   look, but on short mobile viewports it forces a near-empty screen above
   the heading and pushes the footer a full screen-height further down than
   the (short) form content needs. Trade the full-height centering for
   normal top-loaded flow below 767px so the form and footer sit close
   together like the rest of the page. */
@media (max-width: 767px) {
  .contact-form {
    min-height: auto;
    padding-top: 14vh;
    padding-bottom: 8vh;
  }

  .contact-form__heading {
    font-size: 1.6rem;
  }

  /* Scale the form itself down to match — desktop's field spacing and
     label size were tuned for a 649px-wide block, not a full-width phone
     column, so both read oversized relative to the screen. */

  /* .contact-form__form has explicit padding-left/right:0 and every field
     under it is width:100%, so with no gutter here the labels and input
     underlines run edge-to-edge on mobile — border-box keeps the padding
     inside that 100% instead of overflowing it. !important is required:
     the base .contact-form__form rule (padding-left/right:0) sits later
     in this file, and at equal specificity a later unconditional rule
     beats an earlier media-scoped one regardless of viewport match. */
  .contact-form__form {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
  }

  .contact-form__field {
    margin-bottom: 16px;
  }

  .contact-form__label {
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 4px;
  }

  .contact-form__textarea {
    min-height: 64px;
    padding: 6px 10px 20px;
  }

  .contact-form__submit {
    font-size: 14px;
  }
}

@media (max-width: 479px) {
  .contact-form {
    padding-top: 12vh;
    padding-bottom: 6vh;
  }

  .contact-form__heading {
    font-size: 1.4rem;
  }

  .contact-form__form {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .contact-form__field {
    margin-bottom: 14px;
  }

  .contact-form__label {
    font-size: 12px;
  }
}

.contact-form__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.contact-form__address {
  color: #222;
  text-align: center;
  max-width: 740px;
  margin-top: 4vh;
  margin-bottom: 1vh;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.contact-form__contacts {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 3vh;
}

.contact-form__phone {
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  color: #222;
}

.contact-form__divider {
  margin: 0 8px;
  color: #222;
}

.contact-form__email {
  font-size: 16px;
  line-height: 20px;
  text-decoration: none;
  color: #222;
}

.contact-form__form-block {
  width: 649px;
  max-width: 100%;
  height: auto;
  margin-top: 0;
  overflow: visible;
}

.contact-form__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
}

.contact-form__field {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

.contact-form__label {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
  color: #222;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.contact-form__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: #222;
  border: none;
  border-bottom: 1px solid #222;
  border-radius: 0;
  height: 24px;
  margin-top: 0;
  margin-bottom: 4px;
  padding-left: 0;
  background-color: transparent;
  outline: none;
}

.contact-form__input:focus {
  border-bottom-color: #000;
}

.contact-form__textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #dedede;
  border-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 8px 12px 26px;
  box-shadow: 1px 1px 10px 4px rgba(0,0,0,0.08);
  outline: none;
  resize: vertical;
  min-height: 80px;
}

.contact-form__textarea:focus {
  border-color: #222;
}

.contact-form__submit-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact-form__submit {
  border: none;
  border-bottom: 2px solid #292929;
  width: auto;
  height: auto;
  color: #292929;
  background-color: transparent;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  transition: opacity 0.2s;
}

.contact-form__submit:hover {
  opacity: 0.6;
}

.contact-form__submit[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

/* === Feedback Messages === */
.contact-form__success {
  display: none;
  text-align: center;
  padding: 20px;
}

.contact-form__success.is-visible {
  display: block;
}

.contact-form__success-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.contact-form__success-text {
  font-size: 16px;
  color: #555;
}

.contact-form__fail {
  display: none;
  text-align: center;
  padding: 12px;
  color: #c00;
  font-size: 14px;
}

.contact-form__fail.is-visible {
  display: block;
}

/* === Background Blur Decor === */
.contact-form__blur {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-form__blur-beat {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
}

/* === Hidden Honeypot === */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* === Hidden UTM field === */
.contact-form__utm {
  display: none;
}

/* === Navigation Component === */
.nav {
  position: relative;
}

/* Navwindow overlay — ensure flex centering matches Webflow layout */
.navwindow {
  justify-content: center;
  transition: opacity 0.3s ease;
}

/* Pinned to top/left/right explicitly (not just position:absolute) so they
   always cover the full .navwindow regardless of where their static position
   would fall in the flex column — with .navwindow's content scrollable, an
   absolutely-positioned sibling with no top/left falls back to its
   "hypothetical" flex position, which trails after the (possibly tall)
   .form-cont.nav instead of staying pinned to the container's own top edge.
   That left the area above it showing .navwindow's plain background-color
   (near-black) instead of the intended photo/blur layer. */
.navwindow .blurbg,
.navwindow .blurbg-beat {
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  position: absolute;
}

/* Menu-open animation: the backdrop (.navwindow) fades and the links/content
   inside (.form-cont.nav) rise up and fade in on a slight delay, both keyed
   off html.menu-open (toggled by main.js's openMenu()/closeMenu()).
   !important on the opacity/transform end-states is required: something
   outside this codebase (not a data-w-id'd element, so not an obvious
   Webflow IX2 interaction — never fully identified) reassigns .navwindow's
   inline opacity back to 1 a beat after close, which silently cancelled the
   close fade with plain (non-important) rules. !important still transitions
   smoothly — it only decides which value wins, so this is immune to that
   regardless of source or timing. Same technique already used for
   html:not(.menu-open) .boatburger above. */
html:not(.menu-open) .navwindow {
  opacity: 0 !important;
}

html.menu-open .navwindow {
  opacity: 1 !important;
}

.form-cont.nav {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

html:not(.menu-open) .form-cont.nav {
  opacity: 0 !important;
  transform: translateY(16px) !important;
}

html.menu-open .form-cont.nav {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0.05s;
}

.navwindow .blurbg.nav {
  background-image:
    linear-gradient(#29292926, #29292926),
    url("/img/menu-bg.webp");
}

/* .blurbg-beat intentionally has no background-image here — it must stay a
   plain blur layer (backdrop-filter comes from webflow.shared.css) so the
   menu-open overlay blurs like en/ru's contact pages instead of showing an
   opaque photo that masks the blur. */

/* .header has a higher z-index (60) than .navwindow (2), so it sits on top
   of the menu overlay by default. main.js adds .menu-open to <html> while
   the overlay is open — use it to hide the header bar during that state.
   !important is required: the "Original Webflow nav overrides" block below
   sets `.header { display: grid !important; }`, and !important always
   wins over a plain declaration regardless of selector specificity.
   The close button normally lives inside .header (.boatburger-close in
   .boatcont), so hiding it needs a standalone replacement — #menuCloseFixed,
   same pattern already used on index.html/projects.html. */
html.menu-open .header {
  display: none !important;
}

/* .project-hero__content sits at z-index:2 — the same value .navwindow
   itself uses — to stay above its own hero media/scrim layers underneath
   it (z-index 0/1). Since neither .project-hero nor any ancestor between
   it and <body> establishes its own stacking context, that z-index is
   compared directly against .navwindow's, and being later in DOM order
   wins ties: the hero title/tagline bled through the "opaque" menu overlay
   on every individual project page (elmler/sea-breeze/deluxe-palace/etc).
   Same fix pattern as .nav-cont/.nav-cont-hero above. */
html.menu-open .project-hero__content {
  visibility: hidden;
}

/* Same root cause as .project-hero__content above, but these don't even
   need a DOM-order tiebreak — .pd2-hero-arrow/.pd2-hero-dots sit at
   z-index:3, outright higher than .navwindow's z-index:2, so the hero
   slider's prev/next arrows and dots painted on top of the menu overlay
   regardless of DOM order. */
html.menu-open .pd2-hero-arrow,
html.menu-open .pd2-hero-dots {
  display: none !important;
}

/* Same bleed-through, further down the page: .pd2-carousel__arrow and
   .pd2-carousel__counter are also z-index:2, tying with .navwindow — if
   the user has scrolled to the spec/carousel section before opening the
   menu (.navwindow is position:fixed so it covers the viewport at any
   scroll offset), these paint on top of it too. */
html.menu-open .pd2-carousel__arrow,
html.menu-open .pd2-carousel__counter {
  display: none !important;
}

/* .whatsapp-float is intentionally z-index:9999 (needs to float above
   normal page content everywhere), but that also puts it above .navwindow
   (z-index:2), so it kept floating on top of the fullscreen menu overlay
   instead of being covered by it. */
html.menu-open .whatsapp-float {
  display: none !important;
}

/* Tuned to align with the hamburger icon's position in .header's own
   row (see .header's padding above) — this fixed X replaces the
   hamburger in the same spot once the fullscreen menu opens and the
   header hides. */
#menuCloseFixed {
  z-index: 1000 !important;
  position: fixed !important;
  top: 22px;
  right: 32px;
  display: none !important;
}

html.menu-open #menuCloseFixed {
  opacity: 1 !important;
  display: flex !important;
}

@media (max-width: 767px) {
  #menuCloseFixed {
    top: 14px !important;
    right: 12px !important;
  }
}

/* The hamburger icon (.boatburger) has its own data-w-id, so Webflow's
   bundled IX2 interaction engine tracks it independently of main.js. IX2
   only learns the menu closed when its own registered trigger element is
   clicked — #menuCloseFixed isn't one, so after main.js sets opacity back
   to 1, IX2 re-asserts opacity 0 on a later frame (its internal state still
   thinks the menu is open). Forcing the correct state here with !important
   wins regardless of that race, since plain inline styles (however many
   times something rewrites them) can never beat an !important rule. */
html:not(.menu-open) .boatburger {
  opacity: 1 !important;
  display: flex !important;
  pointer-events: auto !important;
}

html.menu-open .boatburger {
  opacity: 0 !important;
  display: none !important;
  pointer-events: none !important;
}

/* .boatburger-close: the X icon, both the one nested in .header/.boatcont
   and #menuCloseFixed (whose own opacity/display rules above take priority
   via ID specificity — these just cover the shared `opacity` state so both
   instances behave consistently). display:none only applied here when
   closed; main.js delays it further via setTimeout so the fade is visible
   before the element leaves layout. */
html.menu-open .boatburger-close {
  opacity: 1 !important;
}

html:not(.menu-open) .boatburger-close {
  opacity: 0 !important;
}

/* === Unified fixed header ===
   Replaces the old two-bar system (.nav-cont, solid/dark, + .nav-cont-hero,
   transparent/white, cross-faded between via opacity as html.scrolled-past-hero
   toggled) with a single always-present .header that transitions its own
   background/text color instead. That old system's actual failure mode was
   exactly what it looked like on mobile: two bars with slightly different
   padding (8px vs 16px top) opacity-crossfading over each other could show a
   visible jump/flicker at the swap point, and needed real coordination
   (:has(), matching opacity states on both sides) to avoid the "nav disappears"
   bug documented in git history. A single element with one padding value and
   a CSS custom property driving its own foreground color can't fall out of
   sync with a second element, because there is no second element.

   Default (no modifier): solid, for pages with no hero content behind the bar
   (contact.html/projects.html/whitecity.html) — transparency would just look
   broken with nothing but page background under it.

   .header--transparent: opts in on pages that DO have a full-bleed hero
   (index.html + the five .pd2-hero-slider project pages) — starts fully
   transparent/white-text over the hero, then fades to the same solid state
   once html.scrolled-past-hero is set. That class is still toggled by the
   exact same hero-bottom-based scroll listener as before (public/js/index.js
   for index.html, animations.js §8 for the .pd2-* pages) — only the selector
   those scripts look for changed, from .nav-cont-hero to .header--transparent. */
.header {
  --header-fg: #1a1a1a;
  top: 0 !important;
  left: 0;
  right: 0;
  transform: translateY(0) !important;
  align-items: center !important;
  height: 8vh !important;
  padding: 8px 32px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 24px;
  position: fixed !important;
  z-index: 60;
  background-color: #ffffffcc;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.header--transparent {
  --header-fg: #fff;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.scrolled-past-hero .header--transparent {
  --header-fg: #1a1a1a;
  background-color: #ffffffcc;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Every piece of text/iconography in the bar reads off the same custom
   property, so the whole header's foreground flips in one place rather than
   needing a dark/white pair of rules per element. .navarch (the hamburger
   icon) is flat black SVG art (img/icons/menu.svg) — brightness(0) invert(1)
   is the standard trick to render an opaque black raster/SVG pure white
   without needing a second white-icon asset, mirroring what the color
   custom property does for text. .flag-icon (the AZ/GB/RU flag graphics)
   intentionally keeps its own colors either way — flags don't have a
   "white" variant. */
.header .inquitre,
.header .sr-text,
.header .lang-dropdown-btn,
.header .dropdown-arrow {
  color: var(--header-fg);
  transition: color 0.3s ease;
}

.header .navarch {
  filter: none;
  transition: filter 0.3s ease;
}

.header--transparent .navarch {
  filter: brightness(0) invert(1);
}

html.scrolled-past-hero .header--transparent .navarch {
  filter: none;
}

/* The logo swaps between a dark and a white asset (img/logo/logo.png /
   logo-white.png — genuine prepared brand art, not just a color difference,
   so this crossfades two <img>s rather than reusing the invert() filter
   above) exactly the same way .navarch does: absolutely stack the white
   copy over the dark one inside .home-show and crossfade opacity. Only
   .header--transparent pages carry the second <img class="sr-logo--white">
   at all — plain .header pages (contact/projects/whitecity) only ever have
   the one dark logo, so these rules are simply inert there. .home-show's
   position:relative (needed as the containing block for .sr-logo--white
   below) is set further down, in the "Grid, not flex" rule that already
   owns all of .home-show's other positioning properties. */
.header .sr-logo--dark,
.header .sr-logo--white {
  transition: opacity 0.3s ease;
}

/* Not inset:0 — .sr-logo has explicit height:40px/width:auto (below), and
   a box with top/right/bottom/left all pinned to 0 resolves an explicit
   height/auto-width by anchoring to the top-left corner rather than
   centering, leaving the white logo stuck in .home-show's top-left instead
   of matching the dark logo's centered position. top/left 50% + a
   translate centers it regardless of its resolved size. */
.header .sr-logo--white {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.header--transparent .sr-logo--dark {
  opacity: 0;
}

.header--transparent .sr-logo--white {
  opacity: 1;
}

html.scrolled-past-hero .header--transparent .sr-logo--dark {
  opacity: 1;
}

html.scrolled-past-hero .header--transparent .sr-logo--white {
  opacity: 0;
}

/* Grid, not flex: webflow.shared.css centers .home-show with
   position:absolute; left:50%, completely unaware of how much room
   .header-cont's nav links/phone/lang-switcher actually need on the
   right. On common "medium" desktop widths (~992-1250px — e.g. a
   MacBook's default scaled resolution), .header-cont's content is wide
   enough to reach past the true center point and render on top of the
   logo. A 3-column grid (empty spacer / logo / nav) gives the logo and
   nav their own non-overlapping tracks: the logo stays visually
   centered whenever there's room, and only drifts off-center — never
   overlapped — once the nav column needs more than its fair share. */
.header .home-show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* relative, not static: needs to be a positioning context for
     .sr-logo--white's position:absolute centering above — static elements
     can't contain an absolutely-positioned descendant, which was the actual
     bug (the white logo's percentage offsets were resolving against
     .header's own box instead, landing it near the top-left of the whole
     bar instead of centered on the logo slot). Behaves identically to
     static for layout otherwise, since nothing here sets top/left/etc. on
     .home-show itself. */
  position: relative !important;
  left: auto !important;
  transform: none !important;
  grid-column: 2;
  justify-self: center;
  height: 8vh !important;
}
/* .home-show is grid-placed in the fixed middle column above, so
   .header-cont — the nav links/phone/lang-switcher/hamburger cluster —
   needs its own explicit column too, or grid auto-placement would drop
   it into column 1 (the empty spacer) instead of column 3. */
.header .header-cont {
  grid-column: 3;
  justify-self: end;
}
.sr-logo {
  height: 40px !important;
  width: auto !important;
}

@media (max-width: 991px) {
  .header {
    padding: 0 12px !important;
    height: 50px !important;
  }

  .header .home-show .sr-logo {
    height: 24px !important;
    width: auto !important;
  }

  .header .inquitre,
  .header .sr-text {
    display: none !important;
  }

  /* With the nav links/phone hidden, .header-cont only holds the lang
     switcher + hamburger — its 28px desktop gap (meant to space out a full
     link row) crowds that small cluster right up against the centered
     logo, so tighten both the outer gap and the switcher's own internal
     spacing to give the logo breathing room. */
  .header-cont {
    gap: 12px;
  }

  .lang-switcher {
    margin-right: 0 !important;
  }

  .lang-dropdown-btn {
    gap: 4px;
    font-size: 13px;
  }
}

@media (max-width: 479px) {
  .header .home-show .sr-logo {
    height: 20px !important;
  }

  /* webflow.shared.css's leftover fullpage-era `.home-show.w--current {
     height: 9.5vw }` shrinks this grid item well below .header's own
     50px height — harmless now that .home-show is a normal (non-absolute)
     grid item: .header's `align-items: center` centers it on the bar's
     midline regardless of its own height, the same as any other cell. */

  .header-cont {
    gap: 8px;
  }
}

/* === Mobile menu overlay (.navwindow) ===
   .navwindow is `inset: 0` with height:auto, which per spec still resolves
   to 100% of the viewport (top+bottom both non-auto forces the height). Its
   content (.form-cont.nav) is meant to be centered both ways — but on short
   viewports (phone landscape, or just a lot of nav links stacked on a small
   phone) the link list can be taller than the viewport, and centered content
   with no scrolling gets clipped equally off the top AND bottom with no way
   to reach the clipped part. `justify-content: safe center` (with plain
   `center` above as the fallback for browsers that don't support the `safe`
   keyword) keeps it centered whenever it fits, but behaves like flex-start
   instead of clipping once it doesn't — combined with overflow-y:auto as a
   backstop so that content is always fully reachable either way. Shrinking
   the link type scale on phones keeps the list small enough that it fits
   in one screen (centered, no scrolling needed) on ordinary portrait phones,
   and reserves the scroll fallback for landscape/very short screens only. */
@media (max-width: 991px) {
  .navwindow {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: safe center;
    padding: 56px 20px 24px;
    box-sizing: border-box;
  }

  .down-load-cont.top {
    margin-top: 0;
    margin-bottom: 32px;
  }

  .legalcont.nav {
    position: static;
    margin-top: 24px;
  }

  .socialcont {
    position: static;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
  }
}

@media (max-width: 767px) {
  .navlink {
    margin-bottom: 1.4vh;
    font-size: 19px;
    line-height: 21px;
  }

  .navlink.small {
    margin-bottom: 1vh;
    font-size: 14px;
    line-height: 16px;
  }

  .down-load-cont.top {
    margin-bottom: 20px;
  }
}

@media (max-width: 479px) {
  .navwindow {
    padding: 48px 20px 20px;
  }

  .navlink {
    margin-bottom: 1.1vh;
    font-size: 16px;
    line-height: 18px;
  }
}

.nav__window {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav__window.is-open {
  display: block;
  opacity: 1;
}

.nav__form-cont {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 12vh 5vw;
  overflow-y: auto;
}

.nav__links-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

.nav__links-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

.nav__link {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  transition: opacity 0.2s;
  padding: 4px 0;
}

.nav__link:hover {
  opacity: 0.7;
}

.nav__link--small {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.nav__link--current {
  opacity: 0.6;
  pointer-events: none;
}

.nav__social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.nav__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: opacity 0.2s;
}

.nav__social-link:hover {
  opacity: 0.7;
}

.nav__social-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.nav__blur-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 0;
}

.nav__blur-beat {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
}

/* Top bar */
.nav__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 8vh;
  min-height: 56px;
  padding: 8px 32px;
  background: rgba(0, 0, 0, 0.8);
}

.nav__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
}

.nav__logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.nav__header {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__header-link {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: opacity 0.2s;
  position: relative;
}

.nav__header-link:hover {
  opacity: 0.7;
}

.nav__header-link--current {
  opacity: 0.6;
  pointer-events: none;
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}

.nav__phone:hover {
  opacity: 0.7;
}

.nav__phone svg {
  flex-shrink: 0;
}

.nav__burger,
.nav__burger-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.nav__burger:hover,
.nav__burger-close:hover {
  opacity: 0.7;
}

.nav__burger-icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* === Footer Component === */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.footer__link {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: opacity 0.2s;
}

.footer__link:hover {
  opacity: 0.6;
}

.footer__link--current {
  opacity: 0.4;
  pointer-events: none;
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
}

.footer__contact-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__contact {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: #222;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer__contact:hover {
  opacity: 0.6;
}

.footer__address {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  color: #666;
  text-align: center;
  margin: 0;
}

.footer__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.footer__logo-img {
  height: 36px;
  width: auto;
  display: block;
}

.footer__copyright {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  color: #999;
  text-align: center;
  margin: 0 0 16px;
}

.footer__social {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: opacity 0.2s;
}

.footer__social-link:hover {
  opacity: 0.6;
}

.footer__social-link--hidden {
  display: none;
}

.footer__social-icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* === Global Typography (overrides webflow.shared.css) === */
body, p, a, li, ul, ol, span, div, td, th, caption, label, input, textarea, select, button, blockquote, .w-richtext, .w-richtext p, .w-richtext li, nav, footer, header, section, article, aside {
  font-family: 'Mulish', sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .w-richtext h1, .w-richtext h2, .w-richtext h3, .w-richtext h4, .w-richtext h5, .w-richtext h6 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

body {
  margin: 0;
  overflow-x: hidden;
}

a {
  color: inherit;
}

/* === Language Switcher (Global Component) === */
.lang-switcher {
  display: flex;
  align-items: center;
  margin-right: 16px;
}

.lang-dropdown {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.lang-dropdown__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  padding: 4px 0;
}

.lang-dropdown__btn:hover {
  opacity: 1;
}

.lang-dropdown__arrow {
  font-size: 6px;
  transition: transform 0.2s ease;
  line-height: 1;
}

.lang-dropdown:hover .lang-dropdown__arrow {
  transform: rotate(180deg);
}

.lang-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all 0.2s ease;
  z-index: 100;
  padding: 4px;
  margin-top: 6px;
}

.lang-dropdown:hover .lang-dropdown__menu,
.lang-dropdown:focus-within .lang-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown__option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: #000;
  opacity: 0.5;
  border-radius: 4px;
  transition: opacity 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.lang-dropdown__option:hover {
  opacity: 1;
  background: rgba(0,0,0,0.04);
}

.lang-dropdown--white .lang-dropdown__btn {
  color: #fff;
}

.lang-dropdown--white .lang-dropdown__menu {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
}

.lang-dropdown--white .lang-dropdown__option {
  color: #000;
}

.flag-icon {
  display: block;
  border-radius: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 11px;
}

/* === WhatsApp Float (Global) === */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float svg {
  width: 35px;
  height: 35px;
}

/* === Footer bottom positioning === */
.desktop-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
  margin-top: auto;
}

/* === Contact page gallery (client-editable via admin) === */
.contact-gallery {
  padding: 6vh 5vw;
}

.contact-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.contact-gallery__item {
  margin: 0;
}

.contact-gallery__item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.contact-gallery__item figcaption {
  margin-top: 8px;
  font-family: 'Mulish', sans-serif;
  font-size: 0.85rem;
  color: #555;
  text-align: center;
}

/* === Viewport utility === */
.u-vw-fix {
  width: calc(100 * var(--vw-unit, 1vw));
}

.u-vh-fix {
  height: calc(100 * var(--vh-unit, 1vh));
}

/* === Projects page: scrollytelling sections === */
.int-split-cont,
.int-img,
.sr-info,
.contactcont,
.form-cont.contact {
  min-height: auto;
}

.mobile-crop {
  display: none;
}

/* object-fit/background-size: contain (not cover) on all three
   ongoing-project images — the whole photo must be visible, not
   cropped to fill the box. Desktop used to be the odd one out here:
   the mobile breakpoint below already used background-size: contain. */
.int-img--cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The Elmlər photo is near-square (~1.12:1), not the usual 16:9 landscape
   crop, so at 100%/99vh it fills almost the entire split-section column
   edge to edge on desktop — reads as oversized next to the other
   ongoing-project photos. Scale it down a bit and let it center in the
   remaining space (margin: auto works here because .int-img is a flex
   column, so it overrides justify-content/align-items for this item). */
@media (min-width: 992px) {
  .int-img--cover {
    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 82%;
    margin: auto;
  }
}

.int-img-cont._03 {
  background-image: url('/img/agseher.webp');
  background-position: center;
  background-size: contain;
}

.int-img-cont.tallboi {
  background-image: url('/img/deluxe-residence.webp');
  background-position: center;
  background-size: contain;
  position: relative;
  overflow: hidden;
}

.section iframe[src*="google.com/maps"] {
  width: 100%;
  height: 370px;
  border: 0;
}

/* The Google Maps section sits directly between the last content section
   (Spa on index.html) and the footer with zero margin on either side, so
   it reads as jammed against both. Give it some breathing room. */
.section:has(> iframe[src*="google.com/maps"]) {
  padding: 60px 0;
}

.projects-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  color: #c8a97e;
  margin-bottom: 32px;
  line-height: 1.1;
  letter-spacing: 4px;
  padding-bottom: 20px;
  border-bottom: 1px solid #c8a97e;
}

.pdf-btn {
  display: inline-block;
  padding: 14px 36px;
  background: #c8a97e;
  color: #fff;
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 20px;
}

.pdf-btn:hover {
  background: #b8976a;
}

/* Secondary text link (gold, arrow icon) pointing from a project
   summary — on projects.html, or a project detail page's own hero —
   to that project's individual page. Deliberately lighter-weight than
   .pdf-btn (a solid button) since it's a secondary action. */
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: #c8a97e;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, gap 0.3s ease;
}

.project-link:hover {
  border-color: #c8a97e;
  gap: 10px;
}

.project-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* === Individual project detail pages ===
   Shared template for sea-breeze.html, whitecity.html, elmler.html,
   deluxe-palace.html, grand-palace.html, service-palace.html — one
   full-bleed hero (Curtain Wipe + Parallax Drift + Letter Cascade),
   a short intro, a Count-Up Stats row, and a CTA. Same restrained
   motion language as projects.html; see docs/DESIGN.md. */
.project-hero {
  position: relative;
  height: 85vh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #111;
}

/* The hero photo is always above the fold at load, so — unlike every
   other Curtain Wipe on the site — it can't use the IntersectionObserver
   .reveal/.is-revealed mechanism: an element clipped to 0 visible area
   by its own pre-reveal clip-path never reports as intersecting, which
   would permanently deadlock it (observed element clips itself to
   nothing → observer never fires → never un-clips). Triggered instead
   by a tiny load-triggered timer in animations.js ("Hero Curtain"). */
.project-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-hero__media.is-revealed {
  clip-path: inset(0 0% 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .project-hero__media {
    clip-path: none;
    transition: none;
  }
}

.project-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

.project-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 5vw 64px;
  color: #fff;
  max-width: 900px;
}

.project-hero__eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.05;
  margin-bottom: 16px;
  color: #fff;
}

.project-hero__tagline {
  font-family: 'Mulish', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  opacity: 0.92;
}

.project-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 40px 5vw 0;
  color: #6b6b6b;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-decoration: none;
  transition: color 0.3s ease, gap 0.3s ease;
}

.project-back:hover {
  color: #c8a97e;
  gap: 12px;
}

.project-back svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}

.project-detail {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 5vw 24px;
}

.project-detail__eyebrow {
  color: #c8a97e;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-align: center;
}

.project-detail__text {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.project-detail__text p + p {
  margin-top: 20px;
}

.project-stats {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 5vw 64px;
}

.project-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 32px;
  text-align: center;
  border-top: 1px solid #e5ddd0;
  border-bottom: 1px solid #e5ddd0;
  padding: 40px 0;
}

.project-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-stats__value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  color: #1a1a1a;
  /* some values wrap to two lines ("3.30–3.40 m") — a fixed gap in
     .project-stats__item isn't enough headroom for that, so the
     wrapped line collides with the label below it. */
  margin-bottom: 4px;
}

.project-stats__label {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #888;
}

.project-cta {
  text-align: center;
  padding: 24px 5vw 96px;
}

.project-cta .pdf-btn + .pdf-btn {
  margin-left: 16px;
}

@media screen and (max-width: 767px) {
  .project-hero {
    height: 70vh;
    min-height: 420px;
  }

  .project-detail__text {
    font-size: 15px;
  }

  .project-stats__value {
    font-size: 32px;
  }

  .project-cta .pdf-btn + .pdf-btn {
    margin-left: 0;
    margin-top: 12px;
    display: block;
  }
}

/* ============================================================
   === Project Detail Page v2 (docs/PROJECT-DESIGN.md) ===
   Reusable template for individual project pages, styled after
   swiss.raffle.az per docs/PROJECT-DESIGN.md. Scoped entirely under
   `.pd2-*` class names (own palette + typography, independent of the
   rest of the site) so it can be dropped into any project page without
   touching the older .project-detail/.project-stats/.project-cta
   classes still used by the other five project pages. First applied to
   deluxe-palace.html; reuse verbatim when the other pages get the same
   treatment.

   Palette (docs/PROJECT-DESIGN.md section 3):
     ink #15140F | paper #F7F4EC | stone #EAE6DA | brass #A98B5D
     brass-light #C9AE84 | charcoal-text #2A2823 | muted-text #8C877A
   Typography (section 4) — Google-Fonts-available substitutes for the
   two fonts not on Google Fonts: 'Commit Mono' -> 'IBM Plex Mono'
   (same "precise/technical" monospace read), 'Geist Sans' -> 'Inter'
   (same neutral grotesque body face). Both loaded only on pages that
   use this template — see the <head> of deluxe-palace.html.
   ============================================================ */

/* Whole-page paper background — covers the gaps between sections (the
   .project-back row, any margin collapse) so nothing flashes pure white
   between the explicitly-painted .pd2-* sections below. */
.pd2-page {
  background: #F7F4EC;
}

.pd2-intro,
.pd2-stats,
.pd2-concept,
.pd2-break,
.pd2-specs,
.pd2-architecture,
.pd2-location,
.pd2-cta {
  background: #F7F4EC;
}

.pd2-intro {
  width: 80%;
  margin: 0 auto;
  padding: 64px 0 8px;
  text-align: center;
}

.pd2-intro__text {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: #2A2823;
}

.pd2-stats {
  padding: 40px 0 72px;
}

.pd2-stats__grid {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid #EAE6DA;
  border-bottom: 1px solid #EAE6DA;
  padding: 40px 0;
}

.pd2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.pd2-stat__icon {
  width: 32px;
  height: 32px;
  color: #A98B5D;
}

.pd2-stat__value {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: #15140F;
}

.pd2-stat__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8C877A;
}

.pd2-concept {
  width: 80%;
  margin: 0 auto;
  padding: 56px 0;
  text-align: center;
}

.pd2-concept__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #A98B5D;
  margin-bottom: 18px;
}

.pd2-concept__headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.2;
  font-weight: 500;
  color: #15140F;
  margin-bottom: 20px;
}

.pd2-concept__headline em {
  font-style: italic;
  color: #A98B5D;
}

.pd2-concept__body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #2A2823;
}

/* Full-bleed image "breather" between text sections — reuses the site's
   established Parallax Drift mechanic (.js-parallax-bg) rather than
   inventing a new motion just for this template. */
.pd2-break {
  height: 46vw;
  min-height: 320px;
  max-height: 560px;
  overflow: hidden;
  position: relative;
}

.pd2-break__media {
  position: absolute;
  inset: -8% 0;
  background-size: cover;
  background-position: center;
}

.pd2-specs {
  padding: 64px 0;
}

.pd2-specs__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #A98B5D;
  text-align: center;
  margin-bottom: 40px;
}

.pd2-specs__grid {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.pd2-table {
  width: 100%;
  border-collapse: collapse;
  background: #EAE6DA;
}

.pd2-table caption {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  color: #15140F;
  padding: 0 0 14px;
  caption-side: top;
}

.pd2-table tr {
  border-bottom: 1px solid #dcd6c6;
}

.pd2-table tr:last-child {
  border-bottom: none;
}

.pd2-table th,
.pd2-table td {
  text-align: left;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  vertical-align: top;
}

.pd2-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8C877A;
  width: 45%;
}

.pd2-table td {
  color: #2A2823;
}

/* === Gallery carousel (sits opposite the spec table) — single-slide
   crossfade + prev/next arrows, same mechanic as the Hero Slider
   (animations.js §6 pattern, reused generically for §9) but styled for
   a light/paper section instead of sitting over a dark photo. Slides
   are <button>s so clicking one opens the shared Lightbox Gallery at
   that index (same PD2_GALLERY array as the gallery strip below) —
   arrows only advance the carousel, they never open the lightbox. */
.pd2-carousel {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: #EAE6DA;
}

.pd2-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.pd2-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.6s ease;
}

.pd2-carousel__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.pd2-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 244, 236, 0.85);
  border: 1px solid rgba(21, 20, 15, 0.15);
  color: #15140F;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.pd2-carousel__arrow:hover {
  background: #F7F4EC;
  border-color: #A98B5D;
}

.pd2-carousel__arrow svg {
  width: 16px;
  height: 16px;
}

.pd2-carousel__arrow--prev {
  left: 14px;
}

.pd2-carousel__arrow--next {
  right: 14px;
}

.pd2-carousel__counter {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  right: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #F7F4EC;
  background: rgba(21, 20, 15, 0.55);
  padding: 4px 9px;
}

.pd2-architecture,
.pd2-location {
  width: 80%;
  margin: 0 auto;
  padding: 56px 0;
}

.pd2-architecture h2,
.pd2-location h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  color: #15140F;
  margin-bottom: 18px;
  text-align: center;
}

.pd2-architecture p,
.pd2-location p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #2A2823;
  text-align: center;
}

.pd2-location__map {
  margin-top: 32px;
  border: 1px solid #EAE6DA;
}

.pd2-location__map iframe {
  width: 100%;
  height: 340px;
  border: 0;
  display: block;
}

.pd2-cta {
  background: #15140F;
  text-align: center;
  padding: 80px 5vw;
}

.pd2-cta h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 500;
  color: #F7F4EC;
  margin-bottom: 12px;
}

.pd2-cta p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #C9AE84;
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.pd2-cta__info {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.pd2-cta__info-item {
  text-align: center;
  min-width: 160px;
}

.pd2-cta__info-icon {
  width: 22px;
  height: 22px;
  color: #A98B5D;
  margin-bottom: 10px;
}

.pd2-cta__info-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8C877A;
  margin-bottom: 6px;
}

.pd2-cta__info-value {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #F7F4EC;
}

.pd2-cta__info-link {
  text-decoration: none;
  color: #F7F4EC;
  transition: color 0.3s ease;
}

.pd2-cta__info-link:hover {
  color: #C9AE84;
}

.pd2-cta__divider {
  width: 40px;
  height: 1px;
  background: #A98B5D;
  margin: 0 auto 32px;
}

.pd2-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pd2-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 15px 30px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pd2-btn--primary {
  background: #A98B5D;
  color: #15140F;
  border: 1px solid #A98B5D;
}

.pd2-btn--primary:hover {
  background: #C9AE84;
  border-color: #C9AE84;
}

.pd2-btn--ghost {
  background: transparent;
  color: #F7F4EC;
  border: 1px solid #4a483f;
}

.pd2-btn--ghost:hover {
  border-color: #C9AE84;
  color: #C9AE84;
}

/* ============================================================
   === Project Detail Page v2 — Hero Slider ===
   Extends .project-hero to support more than one background photo.
   Scoped to .pd2-hero-slider specifically — the plain single-image
   .project-hero__media used by the other five project pages is
   untouched (still opacity:1 by default, no .is-active concept). The
   first .project-hero__media keeps the existing Hero Curtain clip-path
   reveal (animations.js still adds .is-revealed to every
   .project-hero__media on load); which slide is actually visible is a
   *separate* concern layered on top via .is-active (opacity + z-index),
   so the two mechanisms never fight over the same property. */
/* Full first-viewport hero on load — overrides the shared .project-hero
   85vh/70vh rules (both defined earlier in this file, so plain source
   order wins here with no !important needed). Applies at every
   breakpoint deliberately: this hero is meant to read as a full-screen
   opener, same as index.html's video hero, not scale down on mobile. */
.pd2-hero-slider {
  height: 100vh;
  min-height: 100vh;
}

.pd2-hero-slider .project-hero__media {
  opacity: 0;
  transition: clip-path 1.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
}

.pd2-hero-slider .project-hero__media.is-active {
  opacity: 1;
  z-index: 1;
}

.pd2-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 20, 15, 0.35);
  border: 1px solid rgba(247, 244, 236, 0.4);
  color: #F7F4EC;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.pd2-hero-arrow:hover {
  background: rgba(21, 20, 15, 0.6);
  border-color: #C9AE84;
}

.pd2-hero-arrow svg {
  width: 18px;
  height: 18px;
}

.pd2-hero-arrow--prev {
  left: 5vw;
}

.pd2-hero-arrow--next {
  right: 5vw;
}

.pd2-hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.pd2-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(247, 244, 236, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.pd2-hero-dot.is-active {
  background: #C9AE84;
  transform: scale(1.3);
}

/* === Concept image tile row + "view all" trigger === */
.pd2-concept__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 40px;
}

.pd2-concept__tile {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.pd2-concept__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.pd2-concept__tile:hover img {
  transform: scale(1.06);
}

.pd2-concept__viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #A98B5D;
  transition: gap 0.3s ease, color 0.3s ease;
}

.pd2-concept__viewall:hover {
  gap: 12px;
  color: #15140F;
}

/* === Photo gallery strip === */
.pd2-gallery {
  background: #F7F4EC;
  padding: 56px 0 72px;
}

.pd2-gallery__eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #A98B5D;
  text-align: center;
  margin-bottom: 28px;
}

.pd2-gallery__strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 0 5vw 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.pd2-gallery__strip::-webkit-scrollbar {
  height: 5px;
}

.pd2-gallery__strip::-webkit-scrollbar-thumb {
  background: #dcd6c6;
}

.pd2-gallery__thumb {
  flex: 0 0 auto;
  width: 260px;
  height: 180px;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
}

.pd2-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.pd2-gallery__thumb:hover img {
  transform: scale(1.06);
}

/* === Lightbox modal (shared "BaseModal" chrome per PROJECT-DESIGN.md) === */
.pd2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(21, 20, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.pd2-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.pd2-lightbox__img {
  max-width: 86vw;
  max-height: 82vh;
  object-fit: contain;
  transform: scale(0.96);
  transition: transform 0.3s ease;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.pd2-lightbox.is-open .pd2-lightbox__img {
  transform: scale(1);
}

.pd2-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(247, 244, 236, 0.4);
  color: #F7F4EC;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.pd2-lightbox__close:hover {
  border-color: #C9AE84;
  color: #C9AE84;
}

.pd2-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(247, 244, 236, 0.4);
  color: #F7F4EC;
  cursor: pointer;
}

.pd2-lightbox__arrow:hover {
  border-color: #C9AE84;
  color: #C9AE84;
}

.pd2-lightbox__arrow svg {
  width: 20px;
  height: 20px;
}

.pd2-lightbox__arrow--prev {
  left: 24px;
}

.pd2-lightbox__arrow--next {
  right: 24px;
}

.pd2-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #C9AE84;
}

/* === Architecture section image === */
.pd2-architecture__media {
  margin-top: 32px;
  overflow: hidden;
}

.pd2-architecture__media img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 767px) {
  .pd2-hero-arrow {
    width: 36px;
    height: 36px;
  }

  .pd2-concept__tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .pd2-gallery__thumb {
    width: 200px;
    height: 140px;
  }

  .pd2-lightbox__arrow {
    width: 38px;
    height: 38px;
  }

  .pd2-lightbox__arrow--prev {
    left: 8px;
  }

  .pd2-lightbox__arrow--next {
    right: 8px;
  }

  .pd2-lightbox__close {
    top: 12px;
    right: 12px;
  }
}

@media screen and (max-width: 767px) {
  .pd2-intro,
  .pd2-stats__grid,
  .pd2-concept,
  .pd2-specs__grid,
  .pd2-architecture,
  .pd2-location {
    width: 90%;
  }

  .pd2-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .pd2-specs__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pd2-carousel,
  .pd2-carousel__track {
    min-height: 280px;
  }

  .pd2-intro__text {
    font-size: 16px;
  }

  .pd2-break {
    height: 60vw;
  }
}

/* === Projects page: top-level page title + completed-projects grid === */
/* .header is `position: fixed` with `height: 8vh` (see the "Unified fixed
   header" rule above) and overlaps page content rather
   than pushing it down, so the first block on the page has to clear it
   itself. A flat 80px doesn't reliably clear an 8vh bar across viewport
   heights (it undershoots on anything taller than ~1000px, clipping
   the title under the nav) — max() against the nav's own vh unit does. */
.page-title {
  padding: max(140px, calc(8vh + 56px)) 5vw 0;
  text-align: center;
}

.page-title .projects-eyebrow {
  display: inline-block;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.completed-projects {
  padding: 60px 5vw 80px;
  text-align: center;
  width: 100%;
}

.completed-projects .projects-eyebrow {
  display: inline-block;
  margin-bottom: 32px;
}

.completed-projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin: 40px auto 0;
  max-width: 1200px;
}

.completed-projects__item {
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

.completed-projects__item img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #fafafa;
  display: block;
}

.completed-projects__body {
  padding: 24px;
}

.completed-projects__body .srsi-header {
  font-size: 28px;
  margin-bottom: 12px;
}

.completed-projects__desc {
  font-family: 'Mulish', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 16px;
}

.completed-projects__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.completed-projects__facts li {
  position: relative;
  padding-left: 14px;
}

.completed-projects__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: #c8a97e;
}

/* === Reveal-Rise (scroll-reveal animation utility, projects page) ===
   One fade+rise+settle treatment, reused everywhere on this page (page
   title, each ongoing-project split section, the floor-plan block, and
   the completed-projects cards) instead of a different effect per
   section — restraint reads as more luxurious than variety here.
   Toggled by public/js/projects.js via IntersectionObserver adding
   .is-revealed the first time an element scrolls into view. */
.reveal {
  opacity: 0;
  transform: translateY(48px) scale(0.97);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

.completed-projects__item.reveal:nth-child(1) {
  transition-delay: 0s;
}

.completed-projects__item.reveal:nth-child(2) {
  transition-delay: 0.15s;
}

.completed-projects__item.reveal:nth-child(3) {
  transition-delay: 0.3s;
}

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

  .reveal,
  .letter-cascade__char,
  .int-split-cont.reveal .int-img-cont,
  .int-split-cont.reveal .int-img--cover {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* === Letter Cascade (headline entrance) ===
   Splits the two eyebrow headlines ("Davam Edən Layihələr",
   "Tamamlanmış Layihələr") into per-character spans via JS
   (public/js/projects.js, section 4b) and staggers their fade+rise off
   the same .is-revealed trigger the parent .reveal element already
   gets — the headline arrives as a cascade of letters instead of one
   flat block, a signature "editorial" title moment. */
.letter-cascade__word {
  display: inline-block;
  white-space: nowrap;
}

.letter-cascade__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 16ms);
}

.letter-cascade.is-revealed .letter-cascade__char {
  opacity: 1;
  transform: none;
}

/* === Curtain Wipe (ongoing-project image entrance) ===
   The photo/background panel in each ongoing-project split section
   wipes into view via clip-path instead of just fading with the rest
   of the block — a deliberate, directional reveal (like drawing back a
   curtain) rather than a passive fade, on the same .is-revealed
   trigger as the section around it. */
.int-split-cont.reveal .int-img-cont,
.int-split-cont.reveal .int-img--cover {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.int-split-cont.reveal.is-revealed .int-img-cont,
.int-split-cont.reveal.is-revealed .int-img--cover {
  clip-path: inset(0 0% 0 0);
}

/* === Parallax Drift ===
   Continuous scroll-linked motion, independent of the one-shot reveal
   above — driven every frame by public/js/projects.js (section 5,
   "Parallax Drift"). .js-parallax-bg elements get their
   background-position nudged; .js-parallax-img elements are
   pre-scaled to 115% (so there's always image outside the visible
   crop to reveal) and get translateY nudged. */
.js-parallax-bg,
.js-parallax-img {
  will-change: transform, background-position;
}

.js-parallax-img {
  transform: scale(1.15);
}

/* === Tilt Card + Shine Sweep + image zoom (completed-projects hover) ===
   Layered, independent hover systems on separate elements so they
   never fight over the same `transform`:
     .completed-projects__item   — cursor-tracked 3D tilt (JS, mousemove)
     .completed-projects__img-wrap::after — diagonal light sweep (CSS)
     .completed-projects__img-wrap img    — 6% zoom (CSS)
   plus the pre-existing gold underline-grow on the title. */
.completed-projects__item {
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.completed-projects__item:hover {
  box-shadow: 0 32px 60px rgba(0, 0, 0, 0.14);
}

.completed-projects__img-wrap {
  position: relative;
  overflow: hidden;
  display: block;
}

.completed-projects__img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}

.completed-projects__item:hover .completed-projects__img-wrap::after {
  transform: translateX(120%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.completed-projects__img-wrap img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.completed-projects__item:hover .completed-projects__img-wrap img {
  transform: scale(1.06);
}

.completed-projects__body .srsi-header {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}

.completed-projects__body .srsi-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 32px;
  background: #c8a97e;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.completed-projects__item:hover .completed-projects__body .srsi-header::after {
  width: 100%;
}

/* === Count-Up Stats ===
   Numeric facts (apartment/floor/block counts) animate from 0 to their
   real value once their card reveals — driven by
   public/js/projects.js (section 6, "Count-Up Stats"). */
.count-up {
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 767px) {
  .int-split-cont {
    height: auto;
    min-height: auto;
    padding: 0 5vw;
  }

  .int-img {
    height: auto;
    min-height: auto;
    padding: 0;
    overflow: visible;
  }

  /* .js-parallax-img (Elmlər) is permanently pre-scaled to 1.15x (see
     the Parallax Drift rule above) so there's always image outside the
     visible crop for the scroll-driven translateY to reveal — on desktop
     an ancestor clips that overscan back down to the box. .int-img's own
     overflow:visible above (needed so the background-image split
     sections aren't clipped oddly on mobile) let this one's 1.15x
     scale-up bleed straight through the new side margins. Clip only this
     variant back down so the image actually sits inside its frame. */
  .int-img:has(.js-parallax-img) {
    overflow: hidden !important;
  }

  .int-img img,
  .int-img .int-img-cont img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .int-img-cont {
    width: 100%;
    height: auto;
    min-height: 40vw;
    background-size: contain;
  }

  .int-img-cont.tallboi {
    height: auto;
    min-height: 50vw;
  }

  .sr-info {
    height: auto;
    min-height: auto;
    padding: 4vw 0;
  }

  .sr-text-int {
    font-size: 2.8vw;
    line-height: 4vw;
    max-width: 100%;
  }

  .srsi-header {
    width: 50%;
    max-width: 200px;
    margin-bottom: 3vw;
  }

  .srsi-header.ib {
    width: 50%;
    max-width: 180px;
  }

  .projects-eyebrow {
    font-size: 8vw;
  }

  .contactcont,
  .form-cont.contact {
    height: auto;
    min-height: 0;
  }

  .section iframe[src*="google.com/maps"] {
    height: 260px;
  }

  /* Override FullPage forced heights on mobile so sections flow naturally */
  #fullpage {
    height: auto !important;
    overflow: visible !important;
  }
  #fullpage .section {
    height: auto !important;
    min-height: auto !important;
  }
}

@media screen and (max-width: 479px) {
  .int-split-cont {
    height: auto;
    min-height: auto;
    padding: 0 5vw;
  }

  .int-img {
    height: auto;
    min-height: auto;
    padding: 0;
    overflow: visible;
  }

  .sr-info {
    height: auto;
    min-height: auto;
    padding: 3vw 0;
  }

  .sr-text-int {
    font-size: 3.2vw;
    line-height: 4.4vw;
    max-width: 100%;
  }

  .srsi-header {
    width: 55%;
    max-width: 160px;
    margin-bottom: 2vw;
  }

  .int-img-cont {
    width: 100%;
    height: auto;
    min-height: 35vw;
  }

  .int-img-cont.tallboi {
    height: auto;
    min-height: 40vw;
  }

  #fullpage {
    height: auto !important;
    overflow: visible !important;
  }
  #fullpage .section {
    height: auto !important;
    min-height: auto !important;
  }

  .section iframe[src*="google.com/maps"] {
    height: 220px;
  }

  /* Make the slider visible so Webflow JS can initialize it
     (webflow.shared.css hides .srsislider.pointer at this breakpoint) */
  .srsislider.pointer {
    display: block !important;
  }

  /* webflow.shared.css sets `.sr-text-int { display: flex }` at this same
     breakpoint (meant for some other flex-row component elsewhere on the
     site) — for any projects-page paragraph that holds plain text + a <br>
     + a "Plana Baxın" .pdf-btn link (.sr-text-int.ib and .sr-text-int._05
     both do), that turns the text and the button into side-by-side flex
     items, and default align-items:stretch then stretches the button to
     match the wrapped paragraph's full height instead of sizing to its own
     content. :has() targets any .sr-text-int variant that contains a
     .pdf-btn (rather than enumerating every modifier class), forcing block
     display so the button sits in normal inline flow below the text. */
  .sr-text-int:has(.pdf-btn) {
    display: block;
  }

  .pdf-btn {
    display: inline-block;
    width: auto;
    height: auto;
  }
}

/* === Projects page: floor-plan carousel === */
.plan-section {
  padding: 40px 20px;
}

.plan-section__inner {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.plan-section__nav {
  padding-top: 40px;
  margin-bottom: 30px;
}

.plan-title {
  margin: 0 auto;
  text-align: center;
}

.plan-counter {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
}

.plan-slider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.plan-image-wrap {
  display: inline-block;
  max-width: 100%;
}

.plan-slide {
  display: none;
}

.plan-slide.active {
  display: block;
}

.plan-slide img {
  max-width: 100%;
  height: auto;
  max-height: 600px;
  display: block;
  margin: 0 auto;
}

.plan-nav-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #c8a97e;
  color: #c8a97e;
  width: 60px;
  height: 60px;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.plan-nav-btn:hover {
  background: #c8a97e;
  color: #fff;
}

.plan-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.plan-nav-btn svg {
  display: block;
}

/* On mobile, .plan-slider-row's flex layout gave the two 60px round nav
   buttons + 2x40px gap a fixed ~200px cut of the row before the floor-plan
   image got whatever was left — on a 375px-wide phone that left the image
   only ~130px wide, far too small to make out room labels or tap the
   individual unit hotspots. Overlaying the buttons on the image's own edges
   instead lets the image claim (almost) the full row width. */
@media (max-width: 767px) {
  .plan-section {
    padding: 24px 12px;
  }

  .plan-section__nav {
    padding-top: 24px;
    margin-bottom: 16px;
  }

  .plan-slider-row {
    position: relative;
    gap: 0;
  }

  .plan-image-wrap {
    width: 100%;
  }

  .plan-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 2;
  }

  #plan-prev {
    left: 4px;
  }

  #plan-next {
    right: 4px;
  }
}

/* === Projects page: floor-plan hover highlight + PDF overlay ===
   Native <map>/<area> elements can't be styled, so each mapped <img>
   in the floor-plan carousel gets a canvas for the hover highlight
   and a transparent hit-layer for pointer events (see public/js/projects.js). */
.plan-map-canvas {
  position: absolute;
  cursor: pointer;
  pointer-events: none;
}

.plan-map-hitlayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}

.plan-pdf-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  flex-direction: column;
}

.plan-pdf-overlay.is-open {
  display: flex;
}

.plan-pdf-overlay__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 50px;
  background: #000;
  padding: 0 20px;
  flex-shrink: 0;
}

.plan-pdf-overlay__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.plan-pdf-overlay__frame {
  width: 100%;
  flex: 1;
  border: none;
}

/* === Footer: mobile spacing ===
   .footer.pad / .footer.pad.snap-anchor / .addycont (webflow.shared.css)
   carry desktop-scaled padding (50-120px) that stays fixed regardless of
   viewport — on a short phone screen that reads as a lot of dead air
   around text that's already sized down by webflow.shared.css's own
   mobile rules. Trim the padding/margins to match. */
@media (max-width: 767px) {
  .footer.pad {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .footer.pad.snap-anchor {
    padding-bottom: 64px;
  }

  .addycont {
    margin-bottom: 24px;
  }

  /* Address/phone/email text and the logo block below it still carry
     desktop-scale font-size and margins (the logo alone had 40-48px of
     margin above/below plus a 44px-tall image) — shrink both so the
     footer's total height tracks the phone screen instead of the
     desktop layout it was tuned for. */
  .sr-text.intfoot,
  .sr-text.intfoot.foot {
    font-size: 13px;
    line-height: 18px;
  }

  .logo-container.int {
    margin-top: 16px;
    margin-bottom: 20px;
    padding-top: 8px;
  }

  .fortune-logo {
    height: 30px;
  }

  .sr-text.footer.disc.int.foot {
    margin-bottom: 16px;
    font-size: 11px;
  }
}

@media (max-width: 479px) {
  .footer.pad {
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .footer.pad.snap-anchor {
    padding-bottom: 48px;
  }

  .addycont {
    margin-bottom: 16px;
  }

  .sr-text.intfoot,
  .sr-text.intfoot.foot {
    font-size: 12px;
    line-height: 16px;
  }

  .logo-container.int {
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .fortune-logo {
    height: 24px;
  }

  .sr-text.footer.disc.int.foot {
    margin-bottom: 12px;
    font-size: 10px;
  }
}
/* .contactcont's decorative .blurbg/.blurbg-beat overlays (webflow.shared.css)
   are position:absolute + height:100vh with no explicit top, so their
   static position trails the actual (shorter) form content and the 100vh
   box runs well past .contactcont's own bottom edge into the footer below.
   .blurbg-beat carries backdrop-filter:blur(20px), which blurs whatever
   renders underneath it — including the footer's top edge — smearing away
   the stitched-seam detail in the footer background image even though nothing
   about the footer's own CSS is wrong. Clipping .contactcont to its own
   bounds contains the overlay to the section it was meant to decorate. */
.contactcont {
  overflow: hidden;
}

/* ============================================================
   Homepage (index.html) sections
   ============================================================
   index.html originally carried a large page-specific <style> block
   (hero logo mask, .slider-3 gallery sizing, hero-split positioning, etc.)
   that got dropped along with the auto-generated Webflow IX2 rules during
   the refactor to a single responsive tree — it wasn't IX2 junk, it was
   real hand-written CSS the homepage depends on. Restored here. */

/* .slidehero (the Sea Breeze hero-split full-bleed photo) is display:none
   by default in webflow.shared.css — it's only ever shown via a Webflow
   IX2 "reveal" interaction, which (like .header's opacity/.slidehero's
   own history on this page) never reliably completes. Force it visible. */
/* .slidehero has no sizing of its own in webflow.shared.css (only the
   display:none forced visible above) — it rendered at its natural
   intrinsic size (1672x941) in normal document flow below .scaleimg's own
   100vh box, i.e. .scaleimg's cropped cover-fit background plus this
   full-size uncropped copy of the same photo directly under it, looking
   like the same image twice. Pin it to fill .scaleimg exactly instead. */
.slidehero {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.scaleimg {
  position: relative;
  overflow: hidden;
  background-image: url('/img/gpt-02.webp') !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Suppress Webflow's placeholder background so there's no black flash
   while the intro video loads/decodes; show the poster frame instead. */
.mobilefallback.video-placeholder.landing {
  background-image: none !important;
}

.vidcont.video-with-placeholder.landing,
.embed-desk.landing {
  background-image: url('/img/intro-poster.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Logo "cutout" effect over the intro video: a dark scrim with the Deluxe
   Residence logo mask-excluded from it (so the video shows bright through
   the logo shape), plus a frosted-glass blur halo behind it. */
.intro-logo-cutout {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  -webkit-mask-image: url('/img/logo/logo.svg'), linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  -webkit-mask-repeat: no-repeat, repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-size: 560px auto, cover;
  mask-image: url('/img/logo/logo.svg'), linear-gradient(#000, #000);
  mask-composite: exclude;
  mask-repeat: no-repeat, repeat;
  mask-position: center, center;
  mask-size: 860px auto, cover;
  transition: opacity 1.2s ease;
}

.intro-logo-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  max-width: 65vw;
  z-index: 5;
  pointer-events: none;
  border-radius: 50%;
  background: transparent;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  -webkit-mask-image: url('/img/logo/logo.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/img/logo/logo.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: opacity 1.2s ease;
}

/* Centered heading style for the hero sections' .srsi-header.ib, replacing
   Webflow's narrow left-aligned default (209px, no text styling of its
   own). Uses the Google-Fonts-loaded Cormorant Garamond rather than the
   original's unloaded Typekit family, matching the rest of the site. */
div.srsi-header.ib {
  width: 100% !important;
  max-width: 420px !important;
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 700;
  color: #292929;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.18em;
  font-size: 20px;
  line-height: 1.3;
}

/* .slider-3 (Aquapark/Restaurant/Tennis/Fitness/Spa image galleries) */
.slider-3.w-slider {
  background: none !important;
}

.slider-3 .w-slider-mask {
  overflow: hidden !important;
}

.slider-3 .slide-22,
.slider-3 .slide-23 {
  overflow: hidden !important;
  background-image: none !important;
  background-color: transparent !important;
}

.slider-3 .int-slide-img {
  display: block !important;
  width: 100% !important;
}

@media (min-width: 992px) {
  .int-split-cont.notop {
    min-height: 100vh !important;
    height: 100vh !important;
  }

  .int-split-cont.notop .int-img {
    height: 99vh !important;
    overflow: hidden !important;
  }

  .slider-3.w-slider {
    height: 100% !important;
  }

  .slider-3 .w-slider-mask,
  .slider-3 .w-slide {
    height: 100% !important;
  }

  .slider-3 .slide-22 img,
  .slider-3 .slide-23 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
}

@media (max-width: 991px) {
  .int-split-cont.notop .int-img {
    height: auto !important;
    overflow: visible !important;
  }

  .slider-3.w-slider {
    height: auto !important;
  }

  .slider-3 .w-slider-mask,
  .slider-3 .w-slide {
    height: auto !important;
  }

  .slider-3 .slide-22 img,
  .slider-3 .slide-23 img {
    width: 100% !important;
    height: auto !important;
    object-fit: unset !important;
    display: block !important;
  }
}

@media (max-width: 767px) {
  #restid .int-img {
    padding-top: 5vw !important;
  }

  .slider-3.w-slider {
    height: auto !important;
    min-height: 50vw !important;
  }

  .slider-3 .w-slider-mask,
  .slider-3 .w-slide {
    height: auto !important;
    min-height: 50vw !important;
  }

  .slider-3 .slide-22 img,
  .slider-3 .slide-23 img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Height is intentionally auto, not a fixed vh, all the way down this
     chain (slider -> mask -> slide -> sliderimgcont -> img): with a
     fixed height and object-fit:contain, the img letterboxes inside a
     box taller than its own rendered content, leaving visible empty
     .w-slider-mask space above/below the photo. Letting every level
     size to the img's own intrinsic aspect ratio (width:100%, height:
     auto) makes the mask exactly as tall as the visible image, no gap. */
  .srsislider.pointer.w-slider {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 5vw 40px !important;
    background: #fafafa !important;
  }

  .srsislider.pointer.w-slider .w-slider-mask,
  .srsislider.pointer.w-slider .w-slide {
    height: auto !important;
  }

  /* .sliderimgcont is hardcoded to width:100vw/height:100vh in
     webflow.shared.css (viewport-relative, not relative to its own
     ancestors) — once the slider itself is inset with side margins
     above and sized to the image's own height, those fixed vw/vh values
     would overflow past the now-narrower/shorter frame. Pin both to the
     img's own auto-sized box instead. */
  .srsislider.pointer.w-slider .sliderimgcont {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* object-fit: contain (not cover) so the whole photo is always visible
     on mobile, matching the "fully visible, never cropped" treatment
     used on every other image on this page. height:auto (intrinsic
     aspect ratio) instead of a fixed height is what removes the
     letterbox gap above — the image now defines the box's height. */
  .srsislider.pointer.w-slider img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* .sliderimgcont._01/._02/etc. still carry unused leftover
     background-image rules from the original Webflow template (stock
     St Regis Sunny Isles Beach renders) in webflow.shared.css. Normally
     invisible since the real <img> covers the box, but any gap between
     the img's box and the container (like the collapsed-height bug this
     rule set replaces) lets that stock photo show through. Kill it here
     so the container can never show anything but the real project photo. */
  .srsislider.pointer.w-slider .sliderimgcont {
    background-image: none !important;
  }

  /* This section (and every other #section id — nav menu links, and
     scrollIntoView from the JS reveal observer, both land exactly at a
     section's own top edge) sits directly under the fixed .header
     (50px tall here), so content starting flush at the top
     of the section — like this heading — renders the first ~50px behind
     the nav instead of below it. scroll-margin-top shifts where any
     scroll/anchor lands, without adding visible empty space when the page
     is simply scrolled through normally. */
  .section {
    scroll-margin-top: 60px;
  }

  .sr-info._03 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 4vw !important;
    align-items: flex-start !important;
  }

  .slidehero {
    display: none !important;
  }

  /* 50vw (~190px on a 375px phone) read thin/cramped for what's meant to
     be a full-bleed hero photo — closer to a strip than the striking
     full-width image it is on desktop. Give it real presence instead. */
  .int-full-img {
    height: auto !important;
    min-height: 90vw !important;
  }

  .scaleimg {
    height: auto !important;
    min-height: 90vw !important;
  }

  .scaleimg img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .intro-logo-cutout {
    -webkit-mask-size: min(70vw, 400px) auto, cover !important;
    mask-size: min(70vw, 400px) auto, cover !important;
  }

  .intro-logo-blur {
    width: min(70vw, 500px) !important;
    height: auto !important;
    max-height: 180px !important;
  }
}

@media (max-width: 479px) {
  .gridslider.ipad {
    display: grid !important;
  }

  .gridslider.ipad .srsislider.pointer.ipad {
    display: flex !important;
    height: 28vh !important;
  }

  .sr-info._03 {
    padding: 3vw !important;
  }

  .intro-logo-cutout {
    -webkit-mask-size: min(70vw, 400px) auto, cover !important;
    mask-size: min(70vw, 400px) auto, cover !important;
  }

  .intro-logo-blur {
    width: min(70vw, 350px) !important;
    max-height: 180px !important;
  }
}

/* Webflow IX2 "before" state for the homepage's scroll-triggered reveals
   (Sea Breeze hero-split text/image zoom, site-plan image zoom). This is
   the actual original CSS Webflow exported for these — not a custom
   replacement — restored verbatim (previously mistaken for pure
   auto-generated cruft and dropped along with the rest of the IX2 style
   block during the refactor, which was the real cause of the animations
   only visibly changing on an actual click: the *trigger* JS below
   (index.js) fires a synthetic click on scroll, and webflow.schunk*.js
   (still loaded) reads these exact [data-w-id] to run its own compiled
   interaction — but without this initial-state CSS there was nothing
   for it to visibly animate *from*, so the click-fired transition and a
   real manual click looked identical. `html.w-mod-js` is added by the
   small Webflow touch/JS-detection snippet still in the page; `:not(
   .w-mod-ix)` is removed by Webflow's own IX2 runtime once it finishes
   initializing, at which point these "before" rules stop applying and
   its own transition takes over. Only rules for data-w-id values that
   actually exist in this file's markup are kept (the original export
   also covered the since-removed .ipadwrapper duplicate tree). */
@media (min-width: 992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="3bdae477-095c-4b98-92fa-7ce7b7bfde02"] {
    opacity: 0;
  }

  html.w-mod-js:not(.w-mod-ix) [data-w-id="0757dd94-e720-2991-fed9-69cc2ccf821e"] {
    transform: translate3d(0, 0, 0) scale3d(1.075, 1.075, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="3bdae477-095c-4b98-92fa-7ce7b7bfde02"] {
    opacity: 0;
  }

  html.w-mod-js:not(.w-mod-ix) [data-w-id="0757dd94-e720-2991-fed9-69cc2ccf821e"] {
    transform: translate3d(0, 0, 0) scale3d(1.075, 1.075, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  }

  html.w-mod-js:not(.w-mod-ix) [data-w-id="c76d6cb8-e1d7-4d1b-2389-f43a4c7e2713"] {
    transform: translate3d(0, 0, 0) scale3d(1.15, 1.15, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  }
}

@media (max-width: 767px) and (min-width: 480px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="c76d6cb8-e1d7-4d1b-2389-f43a4c7e2713"] {
    transform: translate3d(0, 0, 0) scale3d(1.15, 1.15, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  }
}

@media (max-width: 479px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="3bdae477-095c-4b98-92fa-7ce7b7bfde02"] {
    opacity: 0;
  }

  html.w-mod-js:not(.w-mod-ix) [data-w-id="0757dd94-e720-2991-fed9-69cc2ccf821e"] {
    transform: translate3d(0, 0, 0) scale3d(1.075, 1.075, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  }

  html.w-mod-js:not(.w-mod-ix) [data-w-id="65f504f3-f55a-4c11-c511-5eb19a956d27"] {
    transform: translate3d(0vw, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  }

  html.w-mod-js:not(.w-mod-ix) [data-w-id="c76d6cb8-e1d7-4d1b-2389-f43a4c7e2713"] {
    transform: translate3d(0, 0, 0) scale3d(1.15, 1.15, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
  }
}