/* === HEADER + PRELOADER (T02) === */

.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  transition: clip-path var(--dur) var(--ease);
}
.preloader.is-hidden {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}
.preloader__word { color: var(--color-navy); }

.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  mix-blend-mode: difference;
  color: var(--color-white);
}
.header__inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding-block: 16rem;
}
.header__logo { display: flex; flex-direction: column; gap: 0; }
.header__logo-line { line-height: 1.2; color: var(--color-white); }
.header__nav { display: none; }
.header__menu-btn {
  color: var(--color-white);
  min-width: 44rem; min-height: 44rem;
}

.nav-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--color-navy); color: var(--color-white);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 24rem; padding: 24rem;
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease);
}
.nav-overlay.is-open { transform: translateY(0); }
.nav-overlay__close { position: absolute; top: 16rem; right: 24rem; color: var(--color-white); min-width: 44rem; min-height: 44rem; }
.nav-overlay__list { display: flex; flex-direction: column; gap: 16rem; }
.nav-overlay__link { color: var(--color-white); display: inline-block; min-height: 44rem; }

@media (min-width: 768px) {
  .header__inner { padding-block: 32rem; }
  .header__nav { display: flex; align-items: center; gap: 40rem; }
  .header__nav-list { display: flex; gap: 32rem; }
  .header__menu-btn { display: none; }
}

/* === HERO + INTRO (T03) === */

.hero { position: relative; height: 100svh; min-height: 100vh; overflow: hidden; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; transform-origin: center 60%; will-change: transform; }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* Opus QA: legibility for header + title, like the reference's gradient overlay */
  background: linear-gradient(180deg, rgba(20,28,40,.7) 0%, rgba(20,28,40,.25) 12%, rgba(38,52,73,0) 24%, rgba(38,52,73,0) 60%, rgba(38,52,73,.55) 100%); }
.hero__caption { position: absolute; bottom: 16rem; right: 16rem; color: var(--color-white); opacity: .8; }
.hero__content { position: absolute; bottom: 32rem; left: 0; width: 100%; color: var(--color-white); }
.hero__title { margin-bottom: 8rem; }
.hero__sub { opacity: .9; }

.intro { padding-block: 64rem; }
.intro__head { text-align: center; margin-bottom: 40rem; }
.intro__cols { display: flex; flex-direction: column; gap: 16rem; margin-bottom: 40rem; }
.intro__col { color: var(--color-gray-400); max-width: 260rem; }
.intro__media { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.intro__img { width: 100%; height: 100%; object-fit: cover; }
.intro__caption { position: absolute; bottom: 12rem; right: 12rem; color: var(--color-white); font-size: 12rem; opacity: .8; }

@media (min-width: 768px) {
  .hero__content { bottom: 64rem; padding-inline: 64rem; }
  .intro { padding-block: 120rem; }
  .intro__cols { flex-direction: row; justify-content: center; gap: 120rem; }
  .intro__col { max-width: 340rem; text-align: center; }
}

/* === INFO GRID + AMENITIES (T04) === */

/* === SKETCH SECTIONS (T05) === */

/* === RESIDENCES (T06) === */

/* === RADIAL (T07) === */

/* === STATS + BRANDS (T08) === */

/* === ENQUIRE + FOOTER + MOBILE BAR (T09) === */