:root {
  --site-header-height: calc(74px + env(safe-area-inset-top, 0px));
  --site-nav-offset: var(--site-header-height);
  --housing-surface: #131f2d;
}

body { background: #101924; }
.home-page site-header, site-header {
  position: sticky;
  inset: auto;
  top: 0;
  background: #101924f2;
  transition: opacity 200ms ease;
}

.tower-immersive .home-page site-header {
  opacity: 0;
  pointer-events: none;
}

.site-bar {
  min-height: var(--site-header-height);
  grid-template-columns: minmax(152px, 1fr) auto minmax(104px, 1fr);
  gap: clamp(15px, 3vw, 46px);
  border-bottom-color: #fff9ee1f;
}

.site-bar .wordmark, .site-footer .wordmark {
  width: max-content;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: .025em;
  font-size: .84rem;
}

.wordmark .wordmark-secondary {
  margin-top: 4px;
  color: var(--champagne);
  font-size: .63rem;
  letter-spacing: .125em;
}

.site-bar .wordmark-icon, .site-footer .wordmark-icon { width: 31px; height: 31px; flex: none; }
.site-bar .site-menu { justify-self: center; }
.site-menu a[aria-current="location"], .site-mobile-menu a[aria-current="location"] { color: var(--champagne); }
.site-bar .site-language { min-height: 36px; grid-area: auto; justify-self: end; }
.site-language > :is(a, [aria-current]) { min-height: 32px; }
.site-mobile-menu { display: none; }

.home-page section:is(#housing, #investment, #visa, #contact) { scroll-margin-top: var(--site-header-height); }

.hero {
  --hero-photo-x: 50%;
  --hero-photo-y: 55%;
  --hero-gold: #f5d8ae;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(600px, calc(100svh - var(--site-header-height)));
  overflow: hidden;
  background: #174663;
}

.hero-photo, .hero::before, .hero::after, .hero-light-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo { object-fit: cover; object-position: var(--hero-photo-x) var(--hero-photo-y); }
.hero::after {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #071426df 0%, #0a1a30a1 29%, #0c22334a 48%, transparent 69%),
    linear-gradient(0deg, #08142482, transparent 40%);
}

.hero::before {
  content: "";
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 47%, #131f2d3d 65%, #131f2daa 86%, var(--housing-surface) 100%);
  opacity: var(--hero-sea-blend, .12);
  transition: opacity 360ms ease-out;
}

.hero-light-layer {
  z-index: 3;
  container-type: size;
  overflow: hidden;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-light-layer svg {
  position: absolute;
  left: var(--hero-photo-x);
  top: var(--hero-photo-y);
  width: max(100cqw, calc(100cqh * 1672 / 941));
  height: auto;
  aspect-ratio: 1672 / 941;
  transform: translate(calc(-1 * var(--hero-photo-x)), calc(-1 * var(--hero-photo-y)));
}

.hero-light-line {
  fill: none;
  stroke: var(--hero-gold);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-dasharray: .24 1.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px var(--hero-gold));
  opacity: 0;
}

#glass .hero-light-line { stroke-width: 1.35; }

.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 86px var(--gutter) clamp(56px, 11vh, 126px);
}

.hero h1 {
  max-width: 820px;
  font: 400 clamp(77px, 9.2vw, 144px)/.82 var(--display);
  letter-spacing: -.05em;
  text-shadow: 0 4px 26px #0714293d;
}

.hero h1 em { display: block; margin-top: .035em; color: var(--hero-gold); font-weight: 400; }
.hero-content > p {
  max-width: 41ch;
  margin-top: clamp(23px, 3.2vw, 40px);
  font-size: clamp(.99rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: #fff7ed;
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-actions .section-button { margin-top: 0; min-height: 47px; backdrop-filter: blur(10px); white-space: nowrap; }
.section-button.hero-primary { background: #efd3ab; color: #202b3a; border-color: #f0cf9d; }
.section-button.hero-primary span { color: #343844; }
.section-button.hero-primary:hover { background: #ffe6bf; }

.experience-title { font: 400 clamp(50px, 6vw, 94px)/.95 var(--display); letter-spacing: -.03em; }
.experience-label { color: var(--champagne); font-size: .68rem; letter-spacing: .12em; font-weight: 640; text-transform: uppercase; }
.housing { padding-top: clamp(46px, 6vw, 98px); background: var(--housing-surface); }
.housing-heading {
  display: flex;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
  margin: 0 auto clamp(27px, 4vw, 53px);
  max-width: 1650px;
  padding-inline: var(--gutter);
}

.housing-heading p, .contact-section p { color: #d5dce3; margin-top: 13px; line-height: 1.58; }
.housing-steps {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 680px;
  margin: 0;
  padding: 0 0 5px;
  color: #fbf1e3;
  list-style: none;
  font-size: .82rem;
  font-weight: 550;
}

.housing-steps li { display: flex; align-items: center; gap: 11px; }
.housing-steps li + li::before { content: "→"; color: var(--champagne); }
.housing-scene { position: relative; }
.housing .stage { height: min(88dvh, 830px); min-height: 480px; }
.tower-immersive .housing .stage { height: 100dvh; min-height: 0; }
.housing .floor-controls { top: clamp(18px, 4vh, 36px); }
.stage-project { display: none; }
.home-page .housing .intro { inset: auto auto clamp(25px, 5vh, 52px) var(--gutter); }
.home-page .housing .explore-button { position: relative; inset: auto; margin: 0; }
.housing .outside::before { background: linear-gradient(90deg, #0c152589, #10192b24 44%, transparent 67%), linear-gradient(0deg, #0c14218f, transparent 24%); }
.housing-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(20px, 2.1vw, 31px);
  color: #fff9ee;
  border: 1px solid #f4e9d935;
  border-radius: 14px;
  background: #142032eb;
  box-shadow: 0 15px 55px #06101c25;
}

.housing-panel h3 { font: 400 clamp(32px, 3.5vw, 50px)/.98 var(--display); margin: 0; }
.housing-panel p:not(.experience-label), .interior-info p:not(.experience-label) { color: #d5dce3; line-height: 1.6; font-size: .88rem; }
.housing-panel .section-button, .interior-info .section-button { justify-self: start; margin-top: 4px; text-align: left; }
.housing-facts { display: grid; gap: 9px; margin: 0; font-size: .82rem; }
.housing-facts div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0 0; border-top: 1px solid #fff9ee29; }
.housing-facts dt { color: #c4ccd8; }
.housing-facts dd { margin: 0; text-align: right; }
.tower-immersive .housing-panel { visibility: hidden; }

.interior-info {
  position: absolute;
  z-index: 3;
  bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
  left: var(--gutter);
  display: grid;
  gap: 9px;
  width: min(calc(100% - 2 * var(--gutter)), 360px);
  padding: clamp(16px, 2vw, 23px);
  border-radius: 13px;
  border: 1px solid #fff9ee35;
  background: #121d2aef;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.is-inside .interior-info { opacity: 1; transform: none; }
.contact-section {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
  padding: clamp(53px, 8vw, 122px) var(--gutter);
  background: radial-gradient(ellipse at 12% 90%, #24364a, transparent 52%), #131f2d;
}

.contact-section .section-button { margin: 0; }
site-footer { display: block; }
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 26px var(--gutter);
  background: #101924;
  border-top: 1px solid #fff9ee25;
  color: #d5dce3;
  font-size: .82rem;
}

@media (min-width: 961px) {
  .housing-panel { position: absolute; z-index: 4; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(30vw, 365px); }
}

@media (max-width: 960px) {
  .stage-project {
    display: block;
    position: absolute;
    z-index: 3;
    top: 20px;
    left: var(--gutter);
    padding: 8px 10px;
    border-radius: 6px;
    background: #111e30b8;
  }
  .housing-panel { margin: 0 var(--gutter) 0; transform: translateY(-3px); }
  .housing { padding-bottom: 27px; }
  .housing-heading { flex-direction: column; align-items: start; }
}

@media (max-width: 780px) {
  :root { --site-header-height: calc(64px + env(safe-area-inset-top, 0px)); }
  .site-bar { grid-template-columns: minmax(120px, 1fr) auto auto; gap: 8px; }
  .site-bar .site-menu { display: none; }
  .site-bar .site-language { grid-column: 3; grid-row: 1; padding-inline: 3px; }
  .site-language > :is(a, [aria-current]) { min-width: 28px; }
  .site-mobile-menu { display: block; grid-column: 2; grid-row: 1; }
  .site-mobile-menu summary {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 0 5px;
    cursor: pointer;
    list-style: none;
    font-size: .75rem;
    font-weight: 600;
  }
  .site-mobile-menu summary::-webkit-details-marker { display: none; }
  .site-mobile-menu summary svg { width: 19px; height: 19px; }
  .site-mobile-menu nav {
    position: absolute;
    right: var(--gutter);
    left: var(--gutter);
    top: calc(100% + 3px);
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid #fff9ee2c;
    border-radius: 11px;
    background: #141f30fc;
    box-shadow: 0 14px 30px #091525a9;
  }
  .site-mobile-menu nav a {
    padding: 11px;
    border-radius: 6px;
    text-decoration: none;
    font-size: .87rem;
  }
  .site-mobile-menu nav a:hover { background: #fff9ee14; }
  .hero {
    --hero-photo-x: 60%;
    --hero-photo-y: 50%;
    min-height: max(580px, calc(100svh - var(--site-header-height)));
  }
  .hero::after { background: linear-gradient(0deg, #081427f5, #0a1b31bb 21%, #0c223343 53%, transparent 72%); }
  .hero h1 { font-size: clamp(64px, 13vw, 96px); }
  .hero-content { padding: 160px var(--gutter) 43px; }
  .housing .stage { height: clamp(437px, 68dvh, 570px); min-height: 0; }
  .housing .outside::before { background: linear-gradient(180deg, #0e19285e, transparent 27%, transparent 76%, #0e1928d1); }
  .housing .floor-controls { top: 14px; }
  .contact-section { align-items: start; flex-direction: column; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(56px, 14.8vw, 72px); }
  .hero-actions { max-width: 390px; gap: 8px; }
  .hero-actions .section-button { font-size: .78rem; padding-inline: 12px; gap: 7px; min-height: 42px; }
  .housing-steps { align-items: start; font-size: .76rem; flex-direction: column; gap: 9px; }
  .housing-steps li + li::before { content: "↳"; }
  .site-footer .wordmark-icon { display: none; }
  .site-footer { gap: 8px; font-size: .71rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *, .housing *, .site-mobile-menu * { scroll-behavior: auto; }
  .hero::before { transition: none; }
  .hero-light-line { stroke-dasharray: none; }
}