:root {
      --ink: #2b2b2b;
      --ink2: #161616;
      --bg: #f4f0e9;
      --soft: #ebe4d9;
      --soft2: #e2dace;
      --muted: #707070;
      --line: rgba(43, 43, 43, .14);
      --line-w: rgba(255, 255, 255, .16);
      --gold: #f47c20;
      --gold-soft: #f9a64d;
      --radius: 6px;
      --display: 'Poppins', sans-serif;
      --label: 'Poppins', sans-serif;
      --body: 'Inter', sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: var(--body);
      color: var(--ink);
      background: var(--bg);
      line-height: 1.7;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

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

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

    ul {
      list-style: none
    }

    .container {
      width: min(1240px, 92%);
      margin: 0 auto
    }

    .eyebrow {
      font-family: var(--label);
      font-weight: 600;
      font-size: .74rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      display: inline-flex;
      align-items: center;
      gap: 12px
    }

    .eyebrow::before {
      content: "";
      width: 26px;
      height: 2px;
      background: var(--gold)
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--display);
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: -.01em
    }

    h2 {
      font-size: clamp(1.75rem, 3.2vw, 2.55rem);
      margin: .55rem 0 1.1rem;
      color: var(--ink)
    }

    h2 em {
      font-style: normal;
      color: var(--gold)
    }

    /* centered section titles render fully in the brand orange (matches site) */
    .center h2 {
      color: var(--gold);
      font-weight: 600
    }

    .center h2 em {
      color: var(--ink)
    }

    .section {
      padding: 110px 0
    }

    .section.soft {
      background: var(--soft)
    }

    .section.dark {
      background: var(--ink);
      color: #ffffff
    }

    .section.dark h2,
    .section.dark h3 {
      color: #fff
    }

    .section.dark .eyebrow {
      color: var(--gold-soft)
    }

    .section.dark .eyebrow::before {
      background: var(--gold-soft)
    }

    .lead {
      max-width: 920px;
      color: var(--muted);
      font-size: 1.06rem
    }

    .section.dark .lead {
      color: #ffffff
    }

    .center {
      text-align: center
    }

    .center .eyebrow {
      justify-content: center
    }

    .center .lead {
      margin-left: auto;
      margin-right: auto
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-family: var(--label);
      font-weight: 600;
      font-size: .76rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: 15px 30px;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: .28s;
      white-space: nowrap
    }

    .btn-gold {
      background: var(--gold);
      color: #fff
    }

    .btn-gold:hover {
      background: var(--gold);
      transform: translateY(-2px)
    }

    .btn-dark {
      background: var(--ink);
      color: #fff
    }

    .btn-dark:hover {
      background: #000;
      transform: translateY(-2px)
    }

    .btn-ghost {
      border-color: rgba(255, 255, 255, .45);
      color: #fff;
      background: transparent
    }

    .btn-ghost:hover {
      background: #fff;
      color: var(--ink)
    }

    .btn-ghost-dark {
      border-color: var(--line);
      color: var(--ink);
      background: transparent
    }

    .btn-ghost-dark:hover {
      background: var(--ink);
      color: #fff
    }

    .btn:focus-visible {
      outline: 2px solid var(--gold-soft);
      outline-offset: 3px
    }

    /* nav */
    header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 60;
      transition: .35s;
      padding: 22px 0
    }

    header.scrolled {
      background: rgba(13, 13, 13, .96);
      backdrop-filter: blur(12px);
      padding: 12px 0;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .4)
    }

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

    .logo {
      display: flex;
      align-items: center
    }

    .logo img {
      display: block;
      height: 52px;
      width: auto;
      transition: .35s
    }

    header.scrolled .logo img {
      height: 44px
    }

    .nav-links {
      display: flex;
      gap: 34px;
      font-family: var(--label);
      font-size: .74rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .82)
    }

    .nav-links a {
      position: relative;
      padding: 4px 0
    }

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

    .nav-links a:hover {
      color: #fff
    }

    .nav-links a:hover::after {
      width: 100%
    }

    .nav .btn {
      padding: 12px 24px
    }


    /* hero */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      color: #fff;
      overflow: hidden;
      background: #0d0d0d
    }

    .hero-slides {
      position: absolute;
      inset: 0
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center
    }

    .hero-slides::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .2) 100%), linear-gradient(0deg, rgba(0, 0, 0, .6), transparent 55%)
    }

    /* desktop: no dark overlay on the banner image */
    @media (min-width:861px) {
      .hero-slides::after {
        background: none
      }

      /* hide MELUHA corner logo, Enquire Now sits at top right */
      .nav .nav-meluha-logo {
        display: none
      }
    }

    .hero-inner {
      position: relative;
      width: min(1240px, 92%);
      margin: 0 auto;
      padding-top: 90px;
      padding-bottom: 90px
    }

    .hero-loc {
      font-family: var(--label);
      font-weight: 800;
      font-size: .76rem;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--gold-soft);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px
    }

    .hero-loc::before {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--gold-soft)
    }

    .hero h1 {
      font-size: clamp(2.4rem, 6.5vw, 5rem);
      font-weight: 700;
      letter-spacing: .01em;
      line-height: 1.02
    }

    .hero-tag {
      font-family: var(--display);
      font-style: normal;
      font-weight: 500;
      font-size: clamp(1.15rem, 2.2vw, 1.7rem);
      color: #efe9df;
      margin-top: 10px
    }

    .hero-config {
      font-family: var(--label);
      font-size: .82rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #ffffff;
      font-weight: 600;
      margin: 24px 0 6px
    }

    .hero-highlight {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--gold-soft);
      letter-spacing: .1em;
      margin: 10px 0 4px
    }

    .hero-rera {
      font-size: .74rem;
      letter-spacing: .1em;
      color: #ffffff;
      font-weight: 400;
      text-transform: uppercase
    }

    .hero-cta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 34px
    }

    .hero-controls {
      position: absolute;
      right: max(4%, calc((100% - 1240px)/2));
      bottom: 24px;
      display: flex;
      gap: 10px;
      z-index: 3
    }

    .hero-controls button {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .4);
      background: rgba(0, 0, 0, .25);
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      transition: .25s
    }

    .hero-controls button:hover {
      background: #fff;
      color: var(--ink)
    }

    .hero-dots {
      position: absolute;
      left: max(4%, calc((100% - 1240px)/2));
      bottom: 32px;
      display: flex;
      gap: 10px;
      z-index: 3
    }

    .hero-dots span {
      width: 30px;
      height: 3px;
      background: rgba(255, 255, 255, .35);
      cursor: pointer;
      transition: .3s
    }

    .hero-dots span.on {
      background: var(--gold-soft)
    }

    /* stats strip */
    .stats {
      background: var(--ink);
      color: #fff
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr)
    }

    .stats-grid div {
      padding: 46px 22px;
      text-align: center;
      border-right: 1px solid var(--line-w)
    }

    .stats-grid div:last-child {
      border-right: none
    }

    .stats-grid b {
      font-family: var(--display);
      font-weight: 600;
      font-size: 2.4rem;
      display: block;
      color: var(--gold-soft);
      line-height: 1
    }

    .stats-grid small {
      font-family: var(--label);
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #9c998f;
      display: block;
      margin-top: 12px
    }

    /* quick enquiry bar */
    .qbar {
      background: var(--gold);
      color: #fff;
      padding: 30px 0;
      display: none
    }

    .qbar-in {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr 1fr auto;
      gap: 20px;
      align-items: end
    }

    .qbar h3 {
      font-family: var(--display);
      font-weight: 600;
      font-size: 1.3rem;
      color: #fff;
      line-height: 1.2;
      text-align: center
    }

    .qbar h3 span {
      display: block;
      font-family: var(--label);
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .8);
      font-weight: 600;
      margin-top: 4px
    }

    .qbar input,
    .qbar select {
      width: 100%;
      padding: 18px 20px;
      border: 1px solid rgba(255, 255, 255, .4);
      border-radius: 3px;
      font-family: var(--body);
      font-size: .92rem;
      background: #fff;
      color: #ffffff;
      transition: .2s
    }

    .qbar input::placeholder,
    .qbar select::placeholder {
      color: rgba(0, 0, 0, .5)
    }

    .qbar input:focus,
    .qbar select:focus {
      outline: none;
      border-color: rgb(255, 255, 255);
      background: rgba(255, 255, 255, .18)
    }

    .qbar .field {
      margin-bottom: 0
    }

    .qbar .field label {
      display: block;
      font-family: var(--label);
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgb(255, 255, 255);
      margin-bottom: 8px
    }

    .qbar .btn {
      width: 100%
    }

    /* about */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center
    }

    .about-img {
      aspect-ratio: 4/5;
      border-radius: var(--radius);
      background-size: cover;
      background-position: center;
      position: relative
    }

    .about-img .badge {
      position: absolute;
      right: -20px;
      bottom: 30px;
      background: var(--ink);
      color: #fff;
      padding: 24px 30px;
      text-align: center
    }

    .about-img .badge b {
      font-family: var(--display);
      font-size: 2.4rem;
      color: var(--gold-soft);
      display: block;
      line-height: 1
    }

    .about-img .badge small {
      font-family: var(--label);
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #bdbab2
    }

    .about-spec {
      display: flex;
      gap: 30px;
      flex-wrap: wrap;
      margin: 26px 0 6px;
      padding: 22px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .about-spec div b {
      font-family: var(--display);
      font-size: 1.5rem;
      display: block;
      line-height: 1
    }

    .about-spec div small {
      font-family: var(--label);
      font-size: .64rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .about-points {
      margin: 22px 0 30px;
      display: grid;
      gap: 12px
    }

    .about-points li {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      font-size: .98rem;
      color: #3a3a3a
    }

    .about-points li::before {
      content: "✦";
      color: var(--gold);
      flex-shrink: 0;
      font-size: .8rem;
      margin-top: 3px
    }

    /* signature features */
    .feat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 54px
    }

    /* mobile slider pagination dots (hidden on desktop) */
    .slider-dots {
      display: none
    }

    .feat-card {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      min-height: 340px;
      display: flex;
      align-items: flex-end;
      color: #fff;
      background-size: cover;
      background-position: center;
      /* paint the background into its own GPU layer so it doesn't
         drift/jitter vertically during scroll on mobile */
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }

    .feat-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, .35) 100%);
      transition: .4s
    }

    .feat-card:hover::after {
      background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .2) 70%, rgba(0, 0, 0, .4) 100%)
    }

    .feat-card .fc {
      position: relative;
      z-index: 2;
      padding: 30px
    }

    .feat-card .num {
      font-family: var(--display);
      font-weight: 600;
      font-size: .95rem;
      letter-spacing: .04em;
      color: var(--gold-soft);
      display: block;
      margin-bottom: 8px
    }

    .feat-card h3 {
      font-size: 1.3rem;
      font-weight: 600;
      color: #fff
    }

    .feat-card p {
      font-size: .9rem;
      color: rgba(255, 255, 255, .82);
      margin-top: 8px;
      max-width: 340px
    }

    /* amenities */
    .amen-top {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 60px;
      align-items: end;
      margin-bottom: 50px
    }

    .amen-img {
      aspect-ratio: 16/10;
      border-radius: var(--radius);
      background-size: cover;
      background-position: center
    }

    .amen-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px
    }

    .amen-col h4 {
      font-family: var(--label);
      font-size: .72rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold-soft);
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--line-w)
    }

    .amen-col li {
      font-size: .93rem;
      color: #ffffff;
      padding: 7px 0;
      display: flex;
      gap: 10px
    }

    .amen-col li::before {
      content: "—";
      color: var(--gold);
      flex-shrink: 0
    }

    /* location */
    .loc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: start
    }

    .loc-img {
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 1/1;
      background-size: cover;
      background-position: center
    }

    .loc-acc {
      margin: 8px 0 26px;
      border-top: 1px solid var(--line)
    }

    .loc-item {
      border-bottom: 1px solid var(--line)
    }

    .loc-q {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 2px;
      font-family: var(--label);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink);
      transition: color .2s
    }

    .loc-q:hover {
      color: var(--gold)
    }

    .loc-q em {
      font-style: normal;
      font-family: var(--display);
      font-size: 1.1rem;
      letter-spacing: 0;
      color: var(--gold);
      margin-left: 10px
    }

    /* Location toggle — side chevron that swings down when open */
    .loc-q::after {
      content: "\203A";
      margin-left: auto;
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 1;
      color: var(--gold);
      transform: rotate(90deg);
      transition: transform .3s, color .3s
    }

    .loc-item.open .loc-q::after {
      transform: rotate(270deg);
      color: var(--ink)
    }

    .loc-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease
    }

    .loc-a ul {
      padding: 2px 2px 16px
    }

    .loc-a li {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: .92rem;
      padding: 8px 0;
      border-top: 1px solid var(--line)
    }

    .loc-a li:first-child {
      border-top: none
    }

    .loc-a li b {
      font-family: var(--label);
      font-size: .78rem;
      color: var(--gold);
      white-space: nowrap
    }

    .map-frame {
      overflow: hidden;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: 50px;
      height: 60vh;
      min-height: 420px;
      border-top: 1px solid var(--line)
    }

    .map-frame iframe {
      width: 100%;
      height: 100%;
      border: 0;
      filter: grayscale(.3)
    }

    /* specifications accordion */
    .spec-layout {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 56px;
      align-items: stretch
    }

    #specifications .spec-q {
      color: var(--ink);
      font-weight: 700;
    }

    #specifications .spec-a li {
      color: #3a3a3a
    }

    .spec-photo {
      border-radius: var(--radius);
      background-size: cover;
      background-position: center;
      min-height: 520px;
      position: sticky;
      top: 96px;
      align-self: start;
      height: calc(100vh - 160px);
      max-height: 680px
    }

    .spec-acc {
      max-width: 920px;
      margin: 50px auto 0
    }

    .spec-content .spec-acc {
      max-width: none;
      margin: 34px 0 0
    }

    .spec-item {
      border-bottom: 1px solid var(--line-w)
    }

    .spec-q {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      font-family: var(--display);
      font-weight: 500;
      font-size: 1.12rem;
      color: #fff;
      padding: 24px 50px 24px 0;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: baseline;
      gap: 18px
    }

    .spec-q .sn {
      font-family: var(--label);
      font-size: .7rem;
      letter-spacing: .12em;
      color: var(--gold-soft)
    }

    /* Specifications toggle — circular outlined plus button */
    .spec-q::after {
      content: "+";
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--gold-soft);
      border-radius: 50%;
      font-size: 1.15rem;
      font-weight: 300;
      line-height: 1;
      color: var(--gold-soft);
      transition: transform .3s, background .3s, color .3s
    }

    .spec-item.open .spec-q::after {
      transform: translateY(-50%) rotate(45deg);
      background: var(--gold-soft);
      color: var(--ink)
    }

    .spec-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease
    }

    .spec-a ul {
      padding: 0 0 26px 38px;
      columns: 2;
      column-gap: 40px
    }

    .spec-a li {
      font-size: .92rem;
      color: #ffffff;
      padding: 5px 0;
      break-inside: avoid
    }

    /* floor plans */
    .tabs {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin: 40px 0 36px;
      flex-wrap: wrap
    }

    .tab-btn {
      font-family: var(--label);
      font-weight: 600;
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 13px 28px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: transparent;
      cursor: pointer;
      transition: .25s
    }

    .tab-btn.active {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink)
    }

    .plan-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px
    }

    .plan-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      transition: .3s;
      display: flex;
      flex-direction: column;
      /* composite the card so it doesn't jitter vertically while
         swiping the slider on mobile (keeps the hover lift intact) */
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }

    .plan-card:hover {
      box-shadow: 0 26px 60px rgba(0, 0, 0, .12);
      transform: translateY(-5px)
    }

    .plan-thumb {
      aspect-ratio: 4/3;
      background: var(--soft2);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .plan-thumb .lock {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: repeating-linear-gradient(45deg, #efeae1, #efeae1 14px, #e7e1d6 14px, #e7e1d6 28px);
      color: #8c8a82
    }

    .plan-thumb .lock span {
      font-size: 1.8rem;
      color: var(--gold)
    }

    .plan-thumb .lock p {
      font-family: var(--label);
      font-size: .66rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #9b988f
    }

    .plan-tag {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--ink);
      color: #fff;
      font-family: var(--label);
      font-size: .6rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: 7px 12px
    }

    .plan-body {
      padding: 26px 26px 28px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .plan-body h3 {
      font-size: 1.25rem;
      font-weight: 600
    }

    .plan-body .size {
      font-family: var(--label);
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      margin: 4px 0 14px
    }

    .plan-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 16px;
      font-size: .86rem;
      color: var(--muted);
      margin-bottom: 20px
    }

    .plan-meta b {
      color: var(--ink);
      font-weight: 600
    }

    .plan-body .btn {
      margin-top: auto
    }

    .plan-note {
      text-align: center;
      font-size: .78rem;
      color: var(--muted);
      margin-top: 24px
    }

    /* gallery */
    .gal-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 220px;
      gap: 14px;
      margin-top: 46px
    }

    .gal-item {
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      background-size: cover;
      background-position: center;
      /* keep the image painted in its own layer to stop vertical
         drift/jitter while scrolling or swiping on mobile */
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }

    .gal-item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 55%);
      opacity: 0;
      transition: .35s
    }

    .gal-item:hover::after {
      opacity: 1
    }

    .gal-item span {
      position: absolute;
      left: 18px;
      bottom: 16px;
      z-index: 2;
      font-family: var(--label);
      font-size: .64rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #fff;
      opacity: 0;
      transform: translateY(8px);
      transition: .35s
    }

    .gal-item:hover span {
      opacity: 1;
      transform: none
    }

    .gal-item:nth-child(1) {
      grid-column: span 2;
      grid-row: span 2
    }

    .gal-item:nth-child(6) {
      grid-column: span 2
    }

    .gal-hide {
      display: none !important
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: rgba(8, 8, 8, .94);
      display: none;
      align-items: center;
      justify-content: center
    }

    .lightbox.on {
      display: flex
    }

    .lightbox img {
      max-width: 90%;
      max-height: 85%;
      border-radius: 4px
    }

    .lightbox .lb-close {
      position: absolute;
      top: 24px;
      right: 30px;
      background: none;
      border: none;
      color: #fff;
      font-size: 2.4rem;
      cursor: pointer;
      line-height: 1
    }

    .lightbox .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .3);
      color: #fff;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      font-size: 1.3rem;
      cursor: pointer
    }

    .lightbox .lb-prev {
      left: 30px
    }

    .lightbox .lb-next {
      right: 30px
    }

    /* developer */
    .dev-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center
    }

    .dev-img {
      aspect-ratio: 4/3;
      border-radius: var(--radius);
      background-size: cover;
      background-position: center
    }

    .dev-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin: 28px 0 30px
    }

    .dev-stats b {
      font-family: var(--display);
      font-size: 2.3rem;
      color: var(--gold);
      display: block;
      line-height: 1
    }

    .dev-stats small {
      font-family: var(--label);
      font-size: .64rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .dev-badges {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 10px
    }

    .dev-badges span {
      font-family: var(--label);
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 9px 16px
    }

    /* CTA band */
    .cta-band {
      position: relative;
      padding: 130px 0;
      color: #fff;
      text-align: center;
      background-size: cover;
      background-position: center;
      background-attachment: fixed
    }

    .cta-band::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(8, 8, 8, .66)
    }

    .cta-band .container {
      position: relative;
      z-index: 2
    }

    .cta-band h2 {
      color: #fff
    }

    .cta-band p {
      color: #d8d4cb;
      max-width: 980px;
      margin: 0 auto 14px
    }

    .cta-band .rera-chip {
      display: inline-block;
      font-family: var(--label);
      font-size: .66rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #cbb692;
      border: 1px solid rgba(203, 182, 146, .5);
      border-radius: 999px;
      padding: 8px 18px;
      margin: 8px 0 30px
    }

    /* main form */
    .form-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center
    }

    .lead-form {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 44px;
      box-shadow: 0 30px 70px rgba(0, 0, 0, .1)
    }

    .lead-form h3 {
      font-size: 1.45rem;
      font-weight: 600;
      margin-bottom: 4px
    }

    .lead-form>p {
      font-size: .9rem;
      color: var(--muted);
      margin-bottom: 26px
    }

    .field {
      margin-bottom: 26px
    }

    .field label {
      display: block;
      font-family: var(--label);
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: 3px;
      font-family: var(--body);
      font-size: .95rem;
      background: #ffffff;
      transition: .2s
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--gold);
      background: #fff
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px
    }

    .form-note {
      font-size: .74rem;
      color: #9a988f;
      margin-top: 14px
    }

    .cta-stack {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 30px;
      align-items: flex-start
    }

    .trust {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 18px;
      font-size: .8rem;
      color: var(--muted)
    }

    /* FAQ */
    .faq-list {
      margin-top: 46px;
      max-width: 880px;
      margin-left: auto;
      margin-right: auto
    }

    .faq-item {
      border-bottom: 1px solid var(--line)
    }

    .faq-q {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      font-family: var(--display);
      font-weight: 500;
      font-size: 1.08rem;
      padding: 22px 46px 22px 0;
      cursor: pointer;
      position: relative;
      color: var(--ink)
    }

    /* FAQ toggle — downward chevron that flips up when open */
    .faq-q::after {
      content: "\25BE";
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
      color: var(--gold);
      transition: transform .3s, color .3s
    }

    .faq-item.open .faq-q::after {
      transform: translateY(-50%) rotate(180deg);
      color: var(--ink)
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s ease
    }

    .faq-a p {
      padding: 0 0 26px;
      color: var(--muted);
      font-size: .96rem;
      max-width: 760px
    }

    /* footer */
    footer {
      background: #0a0a0a;
      color: #8f8d86;
      padding: 20px 0 36px;
      font-size: .9rem
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 54px;
      padding-bottom: 46px;
      border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .foot-grid h4 {
      font-family: var(--label);
      font-size: .7rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold-soft);
      margin-bottom: 18px
    }

    .foot-grid a:hover {
      color: #fff
    }

    .foot-grid li {
      padding: 5px 0
    }

    .foot-logo {
      margin-bottom: 18px
    }

    .foot-logo img {
      display: block;
      height: 78px;
      width: auto
    }

    .foot-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      padding-top: 26px;
      font-size: .75rem;
      color: #6b6a64
    }

    /* mobile bar */

    /* hero price highlight */
    .hero-price {
      color: var(--gold-soft)
    }

    /* MELUHA logo — mirrors logo.png behaviour */
    .nav-meluha-logo {
      display: block;
      height: 52px;
      width: auto;
      transition: .35s
    }

    header.scrolled .nav-meluha-logo {
      height: 44px
    }

    /* mobile sidebar enquire CTA (hidden on desktop) */
    .sidebar-cta {
      display: none
    }

    .mobile-bar {
      display: none;
      position: fixed;
      inset: auto 0 0 0;
      z-index: 65;
      background: var(--ink);
      border-top: 1px solid rgba(255, 255, 255, .12)
    }

    .mobile-bar a {
      flex: 1;
      text-align: center;
      padding: 15px 6px;
      font-family: var(--label);
      font-size: .66rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #fff
    }

    .mobile-bar a+a {
      border-left: 1px solid rgba(255, 255, 255, .12)
    }

    .mobile-bar a.hot {
      background: var(--gold)
    }

    /* reveal */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .8s ease, transform .8s ease
    }

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

    @media (prefers-reduced-motion:reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none
      }

      html {
        scroll-behavior: auto
      }
    }

    /* responsive */
    @media(max-width:1024px) {
      .stats-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      /* mobile: order stats by value — highest on left */
      .stats-grid div {
        border-right: none
      }

      .stats-grid div:nth-child(4) {
        order: 1
      }

      /* 50,000 Clubhouse */
      .stats-grid div:nth-child(2) {
        order: 2
      }

      /* 546 Residences */
      .stats-grid div:nth-child(5) {
        order: 3
      }

      /* 60+ Amenities */
      .stats-grid div:nth-child(3) {
        order: 4
      }

      /* 22 Floors */
      .stats-grid div:nth-child(6) {
        order: 5
      }

      /* 5.18 Acres */
      .stats-grid div:nth-child(1) {
        order: 6
      }

      /* 4 Towers */

      .feat-grid,
      .plan-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .amen-cols {
        grid-template-columns: repeat(2, 1fr)
      }

      .gal-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .qbar-in {
        grid-template-columns: 1fr 1fr;
        gap: 12px
      }

      .qbar h3 {
        grid-column: span 2
      }

      .qbar .btn {
        grid-column: span 2
      }
    }

    @media(max-width:860px) {

      .nav-links,
      .nav>.btn {
        display: none
      }

      .about-grid,
      .loc-grid,
      .form-wrap,
      .dev-grid,
      .amen-top {
        grid-template-columns: 1fr;
        gap: 42px
      }

      /* About image shows on desktop only */
      .about-img {
        display: none
      }

      /* Hero "Download Brochure" hidden on mobile */
      .hero-brochure {
        display: none
      }

      /* Mobile: hero text sits at the top below the navbar */
      .hero {
        align-items: flex-start
      }

      .spec-layout {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .spec-photo {
        position: static;
        height: auto;
        min-height: 320px
      }

      .about-img .badge {
        right: 20px
      }

      .spec-a ul {
        columns: 1
      }

      .section {
        padding: 78px 0
      }

      .cta-band {
        background-attachment: scroll
      }

      .mobile-bar {
        display: flex
      }

      .qbar {
        display: block
      }

      footer {
        padding-bottom: 92px
      }

      .foot-grid {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:560px) {
      .hero-slides::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .35) 30%, transparent 55%)
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .feat-grid,
      .plan-grid,
      .amen-cols,
      .gal-grid,
      .dev-stats,
      .form-row {
        grid-template-columns: 1fr
      }

      /* Gallery becomes a swipe slider on mobile */
      .gal-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        grid-auto-rows: auto;
        gap: 12px;
        margin-top: 32px;
        padding-bottom: 14px;
        scrollbar-width: none
      }

      .gal-grid::-webkit-scrollbar {
        display: none
      }

      .gal-item {
        flex: 0 0 82%;
        height: 250px;
        scroll-snap-align: center;
        /* anchor the image to its top + remove any transform offset
           so it renders at its default position on load */
        background-position: center top;
        background-attachment: scroll;
        transform: none
      }

      /* show the gallery at its natural position immediately —
         no reveal translateY / fade transform on initial load */
      #galGrid.reveal {
        opacity: 1;
        transform: none
      }

      .gal-item:nth-child(1),
      .gal-item:nth-child(6) {
        grid-column: auto;
        grid-row: auto
      }

      /* touch has no hover — keep label + scrim visible */
      .gal-item::after,
      .gal-item span {
        opacity: 1;
        transform: none
      }

      .qbar-in {
        grid-template-columns: 1fr
      }

      .qbar h3,
      .qbar .btn {
        grid-column: span 1
      }
    }

    /* ===== walkthrough video ===== */
    .video-wrap {
      position: relative;
      max-width: 960px;
      margin: 46px auto 0;
      aspect-ratio: 16/9;
      border-radius: var(--radius);
      overflow: hidden;
      background-size: cover;
      background-position: center;
      cursor: pointer
    }

    .video-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .32);
      transition: .3s;
      z-index: 1
    }

    .video-wrap:hover::after {
      background: rgba(0, 0, 0, .18)
    }

    .video-wrap.playing {
      cursor: default
    }

    .video-wrap.playing::after {
      display: none
    }

    .video-play {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: none;
      cursor: pointer
    }

    .video-play span {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      background: var(--gold);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      padding-left: 6px;
      box-shadow: 0 14px 44px rgba(244, 124, 32, .5);
      transition: .25s
    }

    .video-wrap:hover .video-play span {
      transform: scale(1.08)
    }

    .video-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      z-index: 3
    }

    /* ===== amenities accordion (base: desktop unaffected) ===== */
    .amen-q {
      margin: 0
    }

    /* =========================================================
       MOBILE OPTIMISATION — applies only to <= 860px
       ========================================================= */
    @media (max-width:860px) {

      /* mobile banner — Meluha_LP_BANNER_mobile image */
      .hero-slide {
        background-image: url('images/Meluha_LP_BANNER_mobile.jpg') !important
      }

      /* hide location suffix on the 3 BHK line */
      .hero-loc-suffix {
        display: none
      }

      /* Sq.Ft line in white */
      .hero-sqft {
        color: #fff
      }

      /* "From" and "Sq.Ft" words smaller */
      .sqft-unit {
        font-size: 15px
      }

      /* price in brand orange, larger */
      .hero-price {
        color: var(--gold-soft);
        font-size: 1.45rem;
        font-weight: 700
      }

      /* 1 — mobile hero text hierarchy */
      .hero h1 {
        font-size: 2.4rem;
        font-weight: 800;
        line-height: 1.0;
        letter-spacing: .01em;
        margin-bottom: 6px
      }

      .hero-loc {
        font-size: .7rem;
        letter-spacing: .22em;
        margin-bottom: 12px
      }

      .hero-tag {
        font-size: 1rem;
        font-weight: 400;
        color: rgba(255, 255, 255, .9);
        margin-top: 4px;
        line-height: 1.4
      }

      .hero-highlight {
        font-size: 1.45rem;
        font-weight: 800;
        letter-spacing: .02em;
        margin: 8px 0 2px;
        line-height: 1.2
      }

      .hero-config:not(.hero-highlight) {
        font-size: .88rem;
        font-weight: 600;
        letter-spacing: .14em;
        margin: 6px 0 2px
      }

      .hero-rera {
        font-size: .68rem;
        letter-spacing: .1em;
        opacity: .85;
        margin-top: 8px
      }

      .hero-cta {
        margin-top: 20px;
        gap: 10px
      }

      .hero-inner {
        padding-top: 110px;
        padding-bottom: 40px
      }

      /* 2,3,4 — hero lead form (quick-enquiry bar): centred, padded, matched radii */
      .qbar {
        padding: 36px 0
      }

      .qbar-in {
        grid-template-columns: 1fr;
        justify-items: stretch;
        text-align: left;
        max-width: 420px;
        margin: 0 auto
      }

      .qbar-in input,
      .qbar-in select,
      .qbar .btn {
        border-radius: 8px;
        width: 100%
      }

      /* 5,6 — all CTA buttons: larger, bolder, tighter padding */
      .btn {
        font-size: .84rem;
        font-weight: 700;
        padding: 13px 22px
      }

      /* 7,8 — stats: lighter numbers + premium interior dividers only
         (1px gap filled by divider colour → middle vertical line +
          horizontal lines between rows; NO border on the outer edges,
          so there is no line above the first row) */
      .stats-grid {
        gap: 1px;
        background: rgba(255, 255, 255, .18)
      }

      .stats-grid div {
        background: var(--ink);
        border: none;
        border-radius: 0;
        padding: 22px 10px
      }

      .stats-grid b {
        font-weight: 500
      }

      /* 9 — about spec (Configuration / Sq.Ft / Floors) larger */
      .about-spec div b {
        font-size: 1.5rem
      }

      .about-spec div small {
        font-size: .82rem
      }

      /* 10,11 — section eyebrows to black */
      #about .eyebrow,
      #features .eyebrow {
        color: #000
      }

      /* 12 — about descriptive text larger */
      .about-points li {
        font-size: 1rem
      }

      /* 13 — gallery: less top breathing room on mobile */
      #gallery {
        padding-top: 5px
      }

      /* 13b — footer text white */
      footer,
      .foot-bottom,
      .foot-bottom span {
        color: #fff
      }

      /* 14 — feature card paragraphs white */
      #features .feat-card p {
        color: #fff
      }

      /* 15 — USP / feature grid -> swipe slider */
      .feat-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding-bottom: 12px;
        scrollbar-width: none
      }

      .feat-grid::-webkit-scrollbar {
        display: none
      }

      .feat-card {
        flex: 0 0 84%;
        scroll-snap-align: center;
        min-height: 320px
      }

      /* 16 — Everyday Elevated -> accordion */
      .amen-top {
        margin-bottom: 28px
      }

      .amen-cols {
        display: block
      }

      .amen-col {
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 8px;
        margin-bottom: 12px;
        overflow: hidden
      }

      .amen-col .amen-q {
        position: relative;
        padding: 15px 44px 15px 16px;
        margin: 0;
        border-bottom: none;
        cursor: pointer;
        color: var(--gold)
      }

      .amen-col .amen-q::after {
        content: "+";
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.4rem;
        font-weight: 300;
        color: var(--gold-soft)
      }

      .amen-col.open .amen-q::after {
        content: "\2013"
      }

      .amen-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease
      }

      .amen-col.open .amen-a {
        max-height: 620px
      }

      .amen-a ul {
        padding: 0 16px 14px
      }

      /* 17 — Floor Plans -> swipe slider */
      .plan-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 12px;
        scrollbar-width: none
      }

      .plan-grid::-webkit-scrollbar {
        display: none
      }

      .plan-card {
        flex: 0 0 85%;
        scroll-snap-align: center
      }

      /* slider grids need relative positioning for overlay arrows */
      .feat-grid,
      .plan-grid {
        position: relative
      }

      /* overlay arrow buttons on left/right of the visible card */
      .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--gold-soft);
        font-size: 2rem;
        line-height: 1;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .5)
      }

      .slider-arrow.prev {
        left: 14px
      }

      .slider-arrow.next {
        right: 14px
      }

      /* 17b — slider dots for the feature + floor-plan sliders */
      .slider-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 18px
      }

      .slider-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px
      }

      .slider-dots button {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .2);
        cursor: pointer;
        transition: width .3s ease, background .3s ease
      }

      .slider-dots button.on {
        width: 22px;
        border-radius: 4px;
        background: var(--gold-soft)
      }

      /* 18 — location toggles as bordered cards */
      .loc-acc {
        border-top: none
      }

      .loc-item {
        border: 1px solid var(--line);
        border-radius: 8px;
        margin-bottom: 10px;
        overflow: hidden
      }

      .loc-q {
        padding: 15px 16px;
        font-size: .82rem
      }

      .loc-a ul {
        padding: 0 16px 12px
      }

      /* 19 — shorter map */
      .map-frame {
        height: 300px;
        min-height: 0
      }

      /* 20 — smaller walkthrough play button */
      .video-play span {
        width: 58px;
        height: 58px;
        font-size: 1.2rem
      }

      /* 21 — show only 6 FAQs */
      .faq-list .faq-item:nth-child(n+7) {
        display: none
      }

      /* 22 — about image above content */
      .about-img {
        display: block;
        order: -1;
        min-height: 280px;
        margin-bottom: 6px
      }

      .about-img .badge {
        right: 16px
      }

      /* Developer image: move to top of section on mobile */
      .dev-img {
        order: -1
      }

      /* 23 — compact final enquiry form */
      .lead-form {
        padding: 24px
      }

      /* 24 — hide Schedule Visit button */
      .schedule-visit {
        display: none
      }

      /* 27 — sticky bar: logo + single CTA only */
      /* sidebar enquire CTA */
      .sidebar-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        writing-mode: vertical-rl;
        text-orientation: mixed;
        background: var(--gold);
        color: #fff;
        font-family: var(--label);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        padding: 20px 10px;
        border-radius: 6px 0 0 6px;
        z-index: 64;
        white-space: nowrap;
        box-shadow: -3px 0 14px rgba(0, 0, 0, .22)
      }

      .mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 16px
      }

      .mobile-bar .mb-logo {
        flex: 0 0 auto;
        padding: 0;
        border: none
      }

      .mobile-bar .mb-logo img {
        height: 34px;
        width: auto
      }

      .mobile-bar a.hot {
        flex: 0 0 auto;
        padding: 11px 22px;
        border-radius: 8px
      }
    }