/* ==========================================================================
   Tilal Towers — Home1 Premium Experience
   Independent stylesheet. Does not import or extend styles.css.
   Architecture: Variables > Reset > Typography > Layout > Components >
                 Utilities > Responsive > Animations
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. VARIABLES                                                           */
/* ---------------------------------------------------------------------- */
:root {
  /* Color palette */
  --ink: #07090f;
  --ink-soft: #0c0f18;
  --surface: #12151f;
  --surface-raised: #171b28;
  --border: rgba(247, 245, 240, 0.08);
  --border-strong: rgba(247, 245, 240, 0.16);
  --white: #f8f6f1;
  --white-soft: rgba(248, 246, 241, 0.72);
  --muted: #9a9fb0;
  --gold: #cba25f;
  --gold-strong: #e0bd7f;
  --gold-tint: rgba(203, 162, 95, 0.12);
  --overlay: linear-gradient(180deg, rgba(5, 6, 10, 0.35) 0%, rgba(5, 6, 10, 0.72) 78%, rgba(5, 6, 10, 0.92) 100%);

  /* Typography */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Tajawal", "Segoe UI", Tahoma, sans-serif;

  --fs-hero: clamp(2.75rem, 4.4vw + 1rem, 4.5rem);
  --fs-h2: clamp(2rem, 2.4vw + 1rem, 3rem);
  --fs-h3: clamp(1.375rem, 0.9vw + 1rem, 1.75rem);
  --fs-lead: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.8125rem;

  /* Spacing */
  --space-section: clamp(5rem, 4vw + 3.5rem, 8.75rem);
  --space-block: clamp(2.5rem, 2vw + 1.5rem, 4.5rem);
  --space-card: clamp(1.5rem, 1vw + 1rem, 2.5rem);

  /* Layout */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 60px -20px rgba(0, 0, 0, 0.65);
  --shadow-gold: 0 14px 32px -14px rgba(203, 162, 95, 0.45);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-base: 350ms;
  --dur-slow: 550ms;

  /* Z-index scale */
  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-lightbox: 400;

  /* Navbar height at top (unscrolled) — used to clear hero content on mobile */
  --nav-h: 92px;
}

/* ---------------------------------------------------------------------- */
/* 2. RESET                                                               */
/* ---------------------------------------------------------------------- */
.home1 *,
.home1 *::before,
.home1 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home1 {
  margin: 0;
  background: radial-gradient(circle at top, #1a1f30 0%, var(--ink) 55%, #030409 100%);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.home1 img {
  max-width: 100%;
  display: block;
}

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

.home1 button:not(.btn) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.home1 button.btn {
  font: inherit;
  cursor: pointer;
}

.home1 ul {
  list-style: none;
}

.home1 :focus-visible {
  outline: 2px solid var(--gold-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 999;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------------------------------------------------------------------- */
/* 3. TYPOGRAPHY                                                          */
/* ---------------------------------------------------------------------- */
.home1 h1,
.home1 h2,
.home1 h3,
.home1 h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
}

.home1[dir="rtl"] h1,
.home1[dir="rtl"] h2,
.home1[dir="rtl"] h3,
.home1[dir="rtl"] h4,
.home1.lang-ar h1,
.home1.lang-ar h2,
.home1.lang-ar h3,
.home1.lang-ar h4 {
  font-family: var(--font-arabic);
  font-weight: 700;
  letter-spacing: 0;
}

.home1.lang-ar {
  font-family: var(--font-arabic), var(--font-body);
}

.home1 p {
  font-size: var(--fs-body);
  color: var(--white-soft);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-strong);
}

.home1[dir="rtl"] .eyebrow::before {
  order: 2;
}

/* Language visibility toggle */
.home1:not(.lang-ar) .lang-ar,
.home1.lang-ar .lang-en {
  display: none !important;
}

/* Letter-spacing breaks Arabic glyph joining — disable it in Arabic mode */
.home1.lang-ar .eyebrow,
.home1.lang-ar .brand,
.home1.lang-ar .footer-brand,
.home1.lang-ar .footer-heading,
.home1.lang-ar .btn,
.home1.lang-ar .hero-panel-tag {
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------- */
/* 4. LAYOUT                                                              */
/* ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: calc(var(--space-section) * 0.6);
}

.section-header {
  max-width: 720px;
  margin-bottom: var(--space-block);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

.section-title {
  font-size: var(--fs-h2);
  margin-block: 0.85rem 1rem;
}

.section-lead {
  font-size: var(--fs-lead);
  color: var(--white-soft);
  max-width: 62ch;
}

.section-header--center .section-lead {
  margin-inline: auto;
}

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin-block: var(--space-block);
}

/* Secondary page header (pages without a hero, e.g. Gallery) */
.page-header {
  padding-top: calc(6rem + var(--space-block));
  padding-bottom: calc(var(--space-block) * 0.6);
  text-align: center;
}

.page-header .eyebrow {
  justify-content: center;
}

.page-header .section-title {
  margin-inline: auto;
}

.page-header .section-lead {
  margin-inline: auto;
}

/* ---------------------------------------------------------------------- */
/* 5. BUTTONS                                                             */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  min-height: 44px;
  white-space: nowrap;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-strong), var(--gold));
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -14px rgba(203, 162, 95, 0.6);
}

.btn-ghost {
  background: rgba(248, 246, 241, 0.04);
  color: var(--white);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  transform: translateY(-3px);
  background: rgba(248, 246, 241, 0.08);
  border-color: var(--gold-strong);
}

.btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* ---------------------------------------------------------------------- */
/* 6. NAVBAR                                                              */
/* ---------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
  padding-block: 1.35rem;
  transition: padding var(--dur-base) var(--ease), background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  border-bottom: 1px solid transparent;
}

.nav--scrolled {
  padding-block: 0.85rem;
  background: rgba(7, 9, 15, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* On mobile the navbar sits directly over the hero image with no solid
   backdrop until scroll — a permanent soft scrim keeps it legible and
   visible from first paint, before the compact/scrolled state kicks in. */
@media (max-width: 980px) {
  .nav {
    background: linear-gradient(180deg, rgba(5, 6, 10, 0.6) 0%, rgba(5, 6, 10, 0) 100%);
  }

  .nav--scrolled {
    background: rgba(7, 9, 15, 0.92);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  font-weight: 600;
}

.brand img {
  height: 34px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}

.nav-links a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white-soft);
  padding-block: 0.3rem;
  transition: color var(--dur-fast) var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--gold-strong);
  transition: width var(--dur-base) var(--ease);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  color: var(--white);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.is-active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-switch {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.lang-switch button {
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  min-height: 32px;
}

.lang-switch button.active {
  background: var(--gold);
  color: var(--ink);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--white);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 8, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
  z-index: var(--z-drawer);
}

.drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(340px, 84vw);
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  z-index: calc(var(--z-drawer) + 1);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease);
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.home1[dir="rtl"] .drawer {
  transform: translateX(-100%);
}

.drawer.open,
.home1[dir="rtl"] .drawer.open {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.drawer-close {
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  border-radius: var(--radius-sm);
}

.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.drawer-links a {
  font-size: 1.05rem;
  font-weight: 500;
}

.drawer-links a.is-active {
  color: var(--gold-strong);
}

.drawer-lang {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
}

/* ---------------------------------------------------------------------- */
/* 7. HERO                                                                */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
}

.hero-media {
  position: absolute;
  top: -140px;
  left: 0;
  right: 0;
  bottom: -140px;
  background-image: var(--overlay), url("../selected/Amwaj%20Waves.jpg");
 /*background-image: var(--overlay), url("../selected/ChatGPT%20Image%20Jul%2015%2C%202026%20at%2001_09_53%20PM.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 720px) {
  .hero-media {
    background-position: center top;
  }
}

/* Page hero — inner-page banner reusing the homepage hero background */
.page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(22rem, 38vw, 32rem);
  padding-block: var(--space-block);
}

.page-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: var(--overlay), url("../selected/Amwaj%20Waves.jpg");
  /*background-image: var(--overlay), url("../selected/ChatGPT%20Image%20Jul%2015%2C%202026%20at%2001_09_53%20PM.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

@media (max-width: 720px) {
  .page-hero-media {
    background-position: center top;
  }
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  width: 100%;
}

.hero-copy .eyebrow {
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: var(--fs-hero);
  margin-bottom: 1.4rem;
}

.hero-title em {
  font-style: normal;
  color: var(--gold-strong);
}

.hero-text {
  font-size: var(--fs-lead);
  max-width: 46ch;
  margin-bottom: 2.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.75rem;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.hero-facts span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--white-soft);
}

.hero-facts span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-strong);
  flex-shrink: 0;
}

.hero-panel {
  background: rgba(18, 21, 31, 0.72);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 1.1rem;
}

.hero-panel-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hero-panel-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-strong);
}

.hero-panel-title {
  font-size: var(--fs-h3);
}

.hero-panel-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 50%, transparent);
}

.hero-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-small);
}

.hero-stat-row span:first-child {
  color: var(--muted);
}

.hero-stat-row strong {
  font-weight: 600;
  text-align: end;
}

.hero-panel-note {
  font-size: var(--fs-small);
  color: var(--white-soft);
}

/* ---------------------------------------------------------------------- */
/* 8. ABOUT / VIRTUAL TOUR SHOWCASE                                       */
/* ---------------------------------------------------------------------- */
.tour-showcase {
  max-width: 1080px;
  margin-inline: auto;
}

.tour-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.tour-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.tour-preview:hover img,
.tour-preview:focus-visible img {
  transform: scale(1.04);
}

.tour-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 10, 0.15) 0%, rgba(5, 6, 10, 0.35) 60%, rgba(5, 6, 10, 0.75) 100%);
  transition: background var(--dur-base) var(--ease);
}

.tour-preview:hover .tour-preview-overlay,
.tour-preview:focus-visible .tour-preview-overlay {
  background: linear-gradient(180deg, rgba(5, 6, 10, 0.25) 0%, rgba(5, 6, 10, 0.4) 60%, rgba(5, 6, 10, 0.8) 100%);
}

.tour-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(248, 246, 241, 0.14);
  border: 1px solid rgba(248, 246, 241, 0.4);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.tour-preview:hover .tour-play-btn,
.tour-preview:focus-visible .tour-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--gold);
}

.tour-play-btn svg {
  width: 32px;
  height: 32px;
  fill: var(--white);
  margin-inline-start: 4px;
}

.tour-preview:hover .tour-play-btn svg,
.tour-preview:focus-visible .tour-play-btn svg {
  fill: var(--ink);
}

.tour-preview-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  font-size: var(--fs-small);
  color: var(--white-soft);
  text-align: center;
}

/* Tour video modal */
.tour-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(3, 4, 8, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

.tour-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.tour-modal-box {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.tour-modal-box video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.tour-modal-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  color: var(--white);
  border-radius: 50%;
}

/* ---------------------------------------------------------------------- */
/* 9. APARTMENT TYPES                                                     */
/* ---------------------------------------------------------------------- */
.apartments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-card);
}

.apartment-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.apartment-card:hover,
.apartment-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.apartment-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.apartment-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.apartment-card:hover .apartment-media img {
  transform: scale(1.05);
}

.apartment-body {
  padding: 1.5rem;
  text-align: center;
}

.apartment-body h3 {
  font-size: 1.25rem;
}

.apartments-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-block);
}

.btn-icon {
  flex-shrink: 0;
}

.btn-brochure {
  background: linear-gradient(135deg, var(--gold-strong), var(--gold), var(--gold-strong));
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.btn-brochure:hover,
.btn-brochure:focus-visible {
  background-position: 100% 50%;
}

/* ---------------------------------------------------------------------- */
/* 9b. RESIDENCE → GALLERY PARALLAX BACKGROUND                           */
/* ---------------------------------------------------------------------- */
/* Wraps the Apartment Types + Gallery CTA sections in one shared, fixed-
   feeling background image. The bg layer is oversized (top/bottom bleed)
   and nudged with a JS-driven transform on scroll so it appears to move
   slower than the foreground content — a classic parallax read without
   background-attachment: fixed, which is unreliable on iOS Safari. */
.parallax-section {
  position: relative;
  overflow: hidden;
}

/* Fixed-position clip/mask layer — sized to the section's real (unbled)
   bounds and never transformed, so the fade always lines up with the
   visible edges no matter how far the parallax layer inside it has
   shifted. The mask fades to fully transparent at both ends, which
   reveals the true page background underneath (not an approximated
   color), guaranteeing a seamless blend. */
.parallax-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 clamp(200px, 26vw, 360px),
    #000 calc(100% - clamp(200px, 26vw, 360px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 clamp(200px, 26vw, 360px),
    #000 calc(100% - clamp(200px, 26vw, 360px)),
    transparent 100%
  );
}

.parallax-bg {
  position: absolute;
  top: -140px;
  left: 0;
  right: 0;
  bottom: -140px;
  /*background-image: var(--overlay), url("../selected/Amwaj%20Waves.jpg");*/
  background-image: var(--overlay), url("../selected/ChatGPT%20Image%20Jul%2015%2C%202026%20at%2001_09_53%20PM.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Extra darkening on the image itself near the edges, layered underneath
   the mask above, so the photo's own texture visibly recedes before the
   mask's transparency takes over — no abrupt hand-off between "photo"
   and "flat gradient". */
.parallax-bg::before,
.parallax-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(220px, 30vw, 400px);
  pointer-events: none;
}

.parallax-bg::before {
  top: 0;
  background: linear-gradient(180deg, var(--ink) 0%, transparent 100%);
}

.parallax-bg::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--ink) 0%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .parallax-bg,
  .hero-media {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------- */
/* 10. GALLERY                                                            */
/* ---------------------------------------------------------------------- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-block);
}

/* Google Maps-style filter chips: rounded pill buttons matching the
   .btn-ghost "Open in Google Maps" treatment, with a gold "selected" state. */
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(248, 246, 241, 0.04);
  color: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease), transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.filter-btn:hover,
.filter-btn:focus-visible {
  background: rgba(248, 246, 241, 0.08);
  border-color: var(--gold-strong);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(203, 162, 95, 0.45);
}

.filter-btn.active {
  background: var(--gold);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}

.filter-btn.active:hover,
.filter-btn.active:focus-visible {
  background: var(--gold-strong);
  border-color: transparent;
  color: var(--ink);
}

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

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: opacity 250ms var(--ease), transform 400ms var(--ease), box-shadow var(--dur-base) var(--ease);
}

.gallery-item.is-hidden {
  opacity: 0;
  transform: scale(0.94);
}

.gallery-item.is-removed {
  display: none;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms var(--ease);
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 6, 10, 0.65) 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.gallery-item:hover,
.gallery-item:focus-visible {
  box-shadow: var(--shadow-md);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.06);
}

.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  opacity: 1;
}

.gallery-item-label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.gallery-item:hover .gallery-item-label,
.gallery-item:focus-visible .gallery-item-label {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 4, 8, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-figure {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);
  transition: transform var(--dur-base) var(--ease);
}

.lightbox.active .lightbox-figure {
  transform: scale(1);
}

.lightbox-image {
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.lightbox-caption {
  margin-top: 1rem;
  color: var(--white-soft);
  font-size: var(--fs-small);
  text-align: center;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(248, 246, 241, 0.08);
  border: 1px solid var(--border-strong);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--gold);
  color: var(--ink);
}

.lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
}

.lightbox-prev {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-counter {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------- */
/* 11. AMENITIES                                                          */
/* ---------------------------------------------------------------------- */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-card);
}

.amenity-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

.amenity-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.amenity-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.amenity-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amenity-media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-strong);
  background: linear-gradient(135deg, var(--surface-raised), var(--surface));
}

.amenity-media--icon svg {
  width: 54px;
  height: 54px;
}

.amenity-body {
  padding: 1.5rem 1.6rem;
}

.amenity-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}

.amenity-body p {
  font-size: var(--fs-small);
}

.sustain-strip {
  margin-top: var(--space-block);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding: var(--space-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gold-tint), transparent 60%);
}

.sustain-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.sustain-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(203, 162, 95, 0.08);
  color: var(--gold-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sustain-icon svg {
  width: 20px;
  height: 20px;
}

.sustain-item h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--white);
  font-family: var(--font-heading);
}

.sustain-item p {
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------- */
/* 12. LOCATION                                                           */
/* ---------------------------------------------------------------------- */
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
}

.location-list {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.location-list li {
  display: flex;
  gap: 0.75rem;
  font-size: var(--fs-body);
  color: var(--white-soft);
}

.location-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--gold-strong);
}

.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-frame-fallback {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--gold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.map-frame-fallback:hover,
.map-frame-fallback:focus-visible {
  transform: translateY(-2px);
  background: var(--gold-strong);
}

.map-frame-fallback svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------- */
/* 13. CTA                                                                */
/* ---------------------------------------------------------------------- */
.cta-band {
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 4vw, 4.5rem);
  background: linear-gradient(135deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.25rem;
}

.cta-copy {
  max-width: 640px;
}

.cta-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.cta-contacts a {
  font-size: var(--fs-small);
  color: var(--white-soft);
  transition: color var(--dur-fast) var(--ease);
}

.cta-contacts a:hover {
  color: var(--gold-strong);
}

.cta-actions {
  display: flex;
  justify-content: center;
}

.btn-xl {
  padding: 1.35rem 3.25rem;
  font-size: 1.1875rem;
  box-shadow: 0 22px 46px -16px rgba(203, 162, 95, 0.55);
}

.btn-xl:hover,
.btn-xl:focus-visible {
  box-shadow: 0 26px 52px -14px rgba(203, 162, 95, 0.65);
}

/* ---------------------------------------------------------------------- */
/* 14. FOOTER                                                             */
/* ---------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-block);
  margin-top: var(--space-section);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: var(--space-block);
}

.footer-brand {
  font-family: var(--font-heading);
  letter-spacing: 0.16em;
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

.footer-brand-desc {
  font-size: var(--fs-small);
  max-width: 40ch;
}

.footer-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: var(--fs-small);
  color: var(--white-soft);
  transition: color var(--dur-fast) var(--ease);
}

.footer-links a:hover {
  color: var(--gold-strong);
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.social-link svg {
  width: 17px;
  height: 17px;
  fill: var(--white);
}

.social-link:hover {
  background: var(--gold);
  transform: translateY(-3px);
}

.social-link:hover svg {
  fill: var(--ink);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: var(--space-block);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer-bottom a:hover {
  color: var(--gold-strong);
}

/* ---------------------------------------------------------------------- */
/* 15. INQUIRY MODAL                                                      */
/* ---------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(3, 4, 8, 0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  width: min(480px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-card);
  position: relative;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-base) var(--ease);
  max-height: 88vh;
  overflow-y: auto;
}

.modal-overlay.active .modal-box {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  border-radius: 50%;
}

.modal-close:hover {
  background: var(--gold-tint);
}

.modal-title {
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
  padding-right: 2rem;
}

.modal-lead {
  font-size: var(--fs-small);
  margin-bottom: 1.75rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--white-soft);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--white);
  background: var(--ink-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--gold-strong);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.modal-success {
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
}

.modal-success.show {
  display: flex;
}

.modal-success-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.modal-success p {
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------- */
/* 16. SCROLL REVEAL / ANIMATIONS                                         */
/* ---------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .home1 *,
  .home1 *::before,
  .home1 *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------- */
/* 17. RESPONSIVE                                                         */
/* ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .apartments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .nav-links,
  .nav-actions .lang-switch {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hero: guarantee content never sits above/under the fixed navbar, and
     centers vertically within whatever space remains below it. min-height
     (not height) lets the section grow taller than one screen on the
     shortest phones instead of clipping or overlapping content.
     The top clearance lives on .hero-inner (not .hero) so .hero-media
     — an absolutely positioned inset:0 child — stays full-bleed behind
     the fixed navbar instead of being pushed down with it. */
  .hero {
    align-items: center;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: var(--nav-h);
  }

  .location-grid {
    grid-template-columns: 1fr;
  }

  .sustain-strip {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 720px) {
  .apartments-grid,
  .amenities-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  /* Apartments/Amenities/Gallery: 2-column grid instead of 1-per-row on
     phones. Grid's default stretch alignment keeps every card in a row
     equal height automatically; tighter gap/padding keeps the layout from
     feeling cramped at 2 columns on the narrowest phones. */
  .apartments-grid,
  .amenities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .apartment-body {
    padding: 1.1rem 1rem;
  }

  .apartment-body h3 {
    font-size: 1.0625rem;
  }

  .amenity-body {
    padding: 1.1rem 1rem;
  }

  .amenity-body h3 {
    font-size: 1.0625rem;
  }

  .amenity-body p {
    font-size: 0.8125rem;
  }

  /* Guarantee the brand lockup never overflows/clips the hamburger
     toggle on the narrowest phones. */
  .brand {
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    gap: 0.5rem;
  }

  .brand img {
    height: 28px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-facts {
    flex-direction: column;
    gap: 0.75rem;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
  }

  .btn-xl {
    width: 100%;
    padding: 1.2rem 1.5rem;
    font-size: 1.0625rem;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------- */
/* 18. FLOATING WHATSAPP BUTTON                                           */
/* ---------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.whatsapp-float-icon {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 20px 40px -14px rgba(37, 211, 102, 0.55);
  outline: none;
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .whatsapp-float-icon {
    width: 27px;
    height: 27px;
  }
}