/* Luxor Residence – digital twin for real estate.
   Layouts: desktop ≥ 1920 px (the base rules), wide 1200–1919, tablet 810–1199, phone < 810. */

/* Weights are declared one by one, as on the original page: text asked for a weight with no face of
   its own (the unit list's bold El Messiri) renders with the nearest declared one. */
@font-face { font-family: "El Messiri"; src: url("assets/fonts/el-messiri-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "El Messiri"; src: url("assets/fonts/el-messiri-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("assets/fonts/lexend-latin.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("assets/fonts/lexend-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("assets/fonts/lexend-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("assets/fonts/unbounded-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Wix Madefor Display"; src: url("assets/fonts/wix-madefor-display-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Backups for characters a font lacks: Arial resized to each font's proportions (values from the original page). */
@font-face { font-family: "El Messiri Fallback"; src: local("Arial"); ascent-override: 106.05%; descent-override: 56.61%; line-gap-override: 0%; size-adjust: 96.09%; }
@font-face { font-family: "Lexend Fallback"; src: local("Arial"); ascent-override: 90.26%; descent-override: 22.57%; line-gap-override: 0%; size-adjust: 110.79%; }
@font-face { font-family: "Unbounded Fallback"; src: local("Arial"); ascent-override: 73.13%; descent-override: 18.01%; line-gap-override: 0%; size-adjust: 136.07%; }
@font-face { font-family: "Wix Fallback"; src: local("Arial"); ascent-override: 96.09%; descent-override: 24.02%; line-gap-override: 0%; size-adjust: 104.9%; }

:root {
  --yellow: rgb(255, 214, 0);
  --ink: rgb(23, 23, 23);
  --cream: rgb(255, 249, 237);
  --messiri: "El Messiri", "El Messiri Fallback", sans-serif;
  --lexend: "Lexend", "Lexend Fallback", sans-serif;
  --unbounded: "Unbounded", "Unbounded Fallback", sans-serif;
  --wix: "Wix Madefor Display", "Wix Fallback", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 12 px base like the original: it sets the line box around inline items (the 3D frame, the unit button). */
body { font: 12px sans-serif; }
h1, h2, h3, p, ul { margin: 0; font-weight: inherit; }
img { display: block; }
a { text-decoration: none; color: inherit; }

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.show-below-1200 { display: none; }

/* ---------- Header ---------- */
.header { position: relative; width: 100%; height: 88px; overflow: hidden; flex: none; }
.brand {
  position: absolute;
  left: 100px;
  top: 49%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.brand p, .footer-brand p { font: 600 32px/1.2 var(--messiri); color: var(--ink); white-space: pre; }
.nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.nav-item { position: relative; flex: none; height: 40px; border-radius: 82px; }
.nav-home { width: 100px; }
.nav-location { width: 124px; }
.nav-amenities { width: 113px; }
.nav-price { width: 269px; }
.nav-item p {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  font: 400 16px/1.5 var(--lexend);
  color: rgb(118, 119, 121);
  white-space: pre;
}
.nav-item p.current { color: #000; text-decoration: underline; }

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 64px;
  width: 100%;
  padding: 100px 0;
  overflow: hidden;
}
.hero-text { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 1320px; }
.hero-title { width: 100%; font: 700 64px/1.22 var(--wix); color: var(--ink); text-align: center; }
.hero-lead { width: 100%; max-width: 60%; font: 400 20px/1.5 var(--messiri); color: var(--ink); text-align: center; }
.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1320px;
  overflow: hidden;
}
.pill-group { display: flex; justify-content: center; align-items: center; }
.pill { flex: none; display: flex; align-items: center; padding: 8px 30px; background: var(--yellow); border-radius: 82px; }
.pill p { font: 400 18px/1.5 var(--lexend); color: rgb(28, 28, 28); white-space: pre; }

/* ---------- 3D building ---------- */
.building {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 911px;
  overflow: hidden;
  background: var(--cream);
}
.embed-wrap { position: relative; flex: none; width: 100%; height: 911px; transition: all 0.5s ease-in-out; }
.embed-wrap iframe { width: 100%; height: 100%; border: 0; }
/* Set by main.js while a floor is picked on wide screens: the building slides right and fades on the left. */
.embed-wrap.is-shifted { transform: translateX(15%); }
.embed-fade { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; background: linear-gradient(90deg, #FFF9ED 25%, transparent); }

.unit-desktop { position: absolute; left: 120px; top: 50%; transform: translateY(-50%); z-index: 1; }
.unit-mobile { position: relative; width: 511px; }

/* The unit card (filled in by main.js) */
.unit-card { display: flex; flex-direction: column; align-items: center; }
.unit-card.is-desktop { padding: 60px 38px; background: #fff; border-radius: 15px; }
.unit-card.is-mobile { padding: 40px 24px; background: var(--cream); }
.unit-info { display: flex; flex-direction: column; gap: 36px; align-items: flex-start; }
.is-mobile .unit-info { gap: 28px; align-items: center; text-align: center; }
.unit-title { font: 700 24px/31.2px var(--lexend); }
.unit-list { padding: 0; list-style: none; font: 400 20px/36px var(--messiri); }
.is-mobile .unit-list { line-height: 28px; }
.unit-list b { font-weight: 700; }
.unit-list .unit-name { font-weight: 700; }
.unit-list .unit-price { padding-top: 36px; }
.is-mobile .unit-list .unit-price { padding-top: 28px; }
.unit-status { padding: 8px 30px; border: 0; border-radius: 82px; font-family: "Lexend"; font-size: 12px; color: #000; background: #ffd600; }
.unit-status.is-reserved { background: #ff8800; }

/* ---------- Immediate occupancy ---------- */
.content { display: flex; align-items: center; width: 100%; max-width: 1320px; padding: 100px 0; }
.occupancy { display: flex; align-items: center; gap: 100px; flex: 1 0 0; width: 1px; overflow: hidden; }
.occupancy-art { position: relative; flex: none; width: 583px; height: 819px; }
.occupancy-backdrop { position: absolute; left: 204px; top: 183px; width: 65%; height: 78%; background: rgb(249, 247, 245); }
.occupancy-img { position: absolute; left: 0; top: 0; height: 95%; aspect-ratio: 0.68886 / 1; object-fit: cover; }
.occupancy-text { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; flex: 1 0 0; width: 1px; z-index: 1; }
.occupancy-heading { display: flex; flex-direction: column; align-items: center; width: 316px; overflow: hidden; }
.occupancy-title { width: 100%; font: 700 24px/2.27 var(--lexend); color: #000; text-align: center; }
.occupancy-underline { flex: none; width: 316px; height: 8px; background: url("assets/underline.svg") no-repeat center / 316px 8px; }
.occupancy-lead { width: 100%; max-width: 80%; font: 400 20px/1.5 var(--messiri); color: #000; text-align: center; }

/* ---------- Gallery (a fixed strip, centred and cut off at the screen edges) ---------- */
.gallery { display: flex; align-items: flex-start; gap: 10px; padding: 0 0 100px; flex: none; }
.gallery img { flex: none; height: 295px; object-fit: cover; }
.g1 { width: 442px; }
.g2 { width: 257px; }
.g3 { width: 295px; }
.g4 { width: 523px; }
.g5 { width: 252px; height: 296px !important; }
.g6 { width: 443px; }

/* ---------- Call to action ---------- */
.cta-wrap { display: flex; justify-content: center; align-items: center; gap: 100px; width: 1320px; padding: 0 0 100px; overflow: hidden; }
.cta {
  display: flex;
  align-items: center;
  gap: 150px;
  width: 1320px;
  height: 320px;
  padding: 80px;
  overflow: hidden;
  background: radial-gradient(84.8% 85% at 80.2% 73.8%, rgb(214, 204, 194) 0%, rgb(207, 193, 177) 100%);
}
.cta-title { flex: none; width: 841px; font: 400 40px/1.3 var(--unbounded); color: #fff; }
.accent { color: var(--yellow); }
.learn {
  flex: none;
  display: flex;
  align-items: center;
  padding: 18px 30px;
  background: var(--yellow);
  border-radius: 82px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1.2, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.learn:hover { transform: scale(1.1); background-color: rgb(204, 170, 0); }
.learn p { font: 400 18px/1.5 var(--lexend); color: rgb(28, 28, 28); white-space: pre; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  padding: 100px 162px;
  background: rgb(61, 58, 53);
}
.footer-brand-row { display: flex; flex-direction: column; align-items: flex-start; gap: 50px; width: 100%; padding: 0 40px; }
.footer-brand { position: relative; flex: none; width: 179px; height: 38px; }
.footer-brand p { position: absolute; left: 5px; top: 0; font-size: 24px; color: #fff; text-align: center; }
.footer-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 40px; border-radius: 100px; }
.footer-social { flex: none; width: 184px; height: 52px; }
.footer-links { display: flex; align-items: center; gap: 12px; }
.footer-links p { font: 300 18px/1.5 var(--lexend); color: rgb(179, 179, 179); white-space: pre; }
.footer-links img { flex: none; width: 3px; height: 30px; }

/* ---------- Wide: 1200–1919 px ---------- */
@media (min-width: 1200px) and (max-width: 1919px) {
  .nav { gap: 0; left: auto; right: 100px; transform: translateY(-50%); }
  .hero-title { width: 70%; line-height: 1.1; }
  .hero-lead { max-width: 70%; width: 720px; }
  .pills { max-width: 70%; }
  .pill p { font-size: 14px; }
  .building { flex-direction: column; height: auto; }
  .embed-wrap { height: 607px; }
  .occupancy { gap: 45px; padding: 38px; }
  .occupancy-art, .cta, .cta-title { flex: 1 0 0; width: 1px; }
  .cta-title { font-size: 36px; line-height: 1.2; }
  .cta-wrap { width: 80%; }
}

/* ---------- Below 1200 px (tablet and phone) ---------- */
@media (max-width: 1199px) {
  .hide-below-1200 { display: none !important; }
  .show-below-1200 { display: block; }
  .brand { display: block; height: 38px; left: calc(50% - 111px); top: 24px; transform: none; width: 222px; }
  .brand p { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .hero-title { width: 80%; line-height: 1.1; }
  .hero-lead { max-width: 70%; width: 720px; }
  .pills { max-width: 80%; }
  .pill p { font-size: 12px; }
  .building { flex-direction: column; height: auto; }
  .unit-mobile { min-width: 100%; width: auto; }
  .occupancy-text { flex: none; order: 0; width: 100%; }
  .cta-wrap { width: 100%; }
  .learn p { font-size: 12px; }
  .footer-brand-row { align-items: center; }
  .footer-brand p { left: 50%; transform: translateX(-50%); }
  .footer-bar { flex-direction: column; }
}

/* ---------- Tablet: 810–1199 px ---------- */
@media (min-width: 810px) and (max-width: 1199px) {
  .hero-title { font-size: 48px; }
  .hero-lead { font-size: 16px; }
  .embed-wrap { height: 507px; }
  .occupancy { flex-direction: column; gap: 45px; padding: 38px; }
  .occupancy-art { order: 1; width: 100%; }
  .occupancy-lead { font-size: 16px; }
  .cta { gap: 60px; height: auto; padding: 30px; width: 80%; }
  .cta-title { flex: 1 0 0; width: 1px; font-size: 20px; }
  .learn { padding: 8px 24px; }
}

/* The picture block in the narrower layouts (1200–1919 and 810–1199) */
@media (min-width: 810px) and (max-width: 1919px) {
  .occupancy-backdrop { top: auto; bottom: 62px; left: 197px; width: 58%; height: 64%; }
  .occupancy-img { left: 46%; top: 47%; height: 79%; transform: translate(-50%, -50%); }
}

/* ---------- Phone: below 810 px ---------- */
@media (max-width: 809px) {
  .hide-phone { display: none !important; }
  .hero-title { font-size: 32px; }
  .hero-lead { font-size: 14px; }
  .pills { gap: 32px; }
  .embed-wrap { height: 256px; }
  .content { flex-direction: column; padding: 60px 0; }
  .occupancy { flex: none; flex-direction: column; gap: 45px; padding: 38px; width: 100%; }
  .occupancy-lead { font-size: 14px; }
  .cta { flex-direction: column; gap: 40px; height: auto; padding: 50px 30px; width: 80%; }
  .cta-title { width: 100%; font-size: 24px; text-align: center; }
  .learn { padding: 8px 30px; }
  .footer { padding: 100px 0; }
}