/* ─── RESET & BASE ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
    body {
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      color: #1A1714;
      background: #ffffff;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }

    /* ─── VARIABLES ────────────────────────────────────────────── */
    :root {
      --gold: #8A8278;
      --gold-light: #B0A9A2;
      --gold-pale: #F4F3F1;
      --dark: #1A1A1A;
      --mid: #6A6560;
      --soft: #ECEAE8;
      --border: #E2DFDC;
      --white: #ffffff;
    }

    /* ─── TYPOGRAPHY HELPERS ───────────────────────────────────── */
    .eyebrow {
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 1px;
      background: currentColor;
      flex-shrink: 0;
    }
    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(30px, 4vw, 42px);
      font-weight: 300;
      color: var(--dark);
      line-height: 1.15;
      margin-bottom: 40px;
    }

    /* ─── NAVIGATION ───────────────────────────────────────────── */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      transition: box-shadow 0.3s ease;
    }
    #navbar.scrolled {
      box-shadow: 0 2px 20px rgba(0,0,0,0.07);
    }
    .nav-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 32px;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .nav-logo img {
      height: 50px;
      width: auto;
    }
    .nav-logo-fallback {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 3px;
      color: var(--dark);
    }
    .nav-logo-fallback span { color: var(--gold); }
    .nav-links {
      display: flex;
      gap: 0;
      list-style: none;
      flex-wrap: nowrap;
    }
    .nav-links li {
      display: flex;
      align-items: center;
    }
    .nav-links li + li::before {
      content: '';
      display: block;
      width: 1px;
      height: 12px;
      background: var(--border);
      flex-shrink: 0;
    }
    .nav-links a {
      font-size: 10.5px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--mid);
      transition: color 0.2s;
      white-space: nowrap;
      padding: 0 10px;
    }
    .nav-links a:hover { color: var(--gold); }
    .nav-cta {
      background: var(--dark);
      color: var(--white);
      font-family: 'Jost', sans-serif;
      font-size: 9px;
      font-weight: 400;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 8px 14px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .nav-cta:hover { background: var(--gold); }
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
    }
    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--dark);
      transition: all 0.3s;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 76px; left: 0; right: 0;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 24px 40px;
      z-index: 999;
      flex-direction: column;
      gap: 20px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--mid);
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }

    /* ─── HERO ─────────────────────────────────────────────────── */
    #hero {
      padding-top: 76px;
      background: var(--gold-pale);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 860px;
      margin: 0 auto;
      padding: 140px 40px 100px;
      text-align: center;
    }
    .hero-h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(48px, 7vw, 80px);
      font-weight: 300;
      color: var(--dark);
      line-height: 1.05;
      margin-bottom: 24px;
    }
    .hero-h1 em {
      font-style: italic;
      color: var(--gold);
    }
    .hero-p {
      font-size: 15px;
      color: var(--mid);
      line-height: 1.9;
      max-width: 500px;
      margin: 0 auto 40px;
    }
    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn-dark {
      background: var(--dark);
      color: var(--white);
      font-family: 'Jost', sans-serif;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 14px 32px;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
      display: inline-block;
    }
    .btn-dark:hover { background: var(--gold); }
    .btn-outline {
      background: transparent;
      color: var(--gold);
      font-family: 'Jost', sans-serif;
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 13px 32px;
      border: 1px solid var(--gold);
      cursor: pointer;
      transition: all 0.2s;
      display: inline-block;
    }
    .btn-outline:hover { background: var(--gold); color: var(--white); }
    .hero-stats {
      display: inline-grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--border);
      background: var(--white);
      margin-top: 56px;
      min-width: 360px;
    }
    .hero-stat {
      padding: 20px 16px;
      text-align: center;
      border-right: 1px solid var(--border);
    }
    .hero-stat:last-child { border-right: none; }
    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 30px;
      font-weight: 400;
      color: var(--gold);
    }
    .stat-lbl {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #A09488;
      margin-top: 4px;
    }

    /* ─── SECTIONS COMMON ──────────────────────────────────────── */
    .section { padding: 90px 40px; }
    .section-inner { max-width: 1280px; margin: 0 auto; }
    .section-alt { background: var(--gold-pale); }

    /* ─── SPECIALITY — LIVING LEGENDS ─────────────────────────── */
    .ll-card {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      border: 1px solid var(--border);
      overflow: hidden;
    }
    .ll-img {
      position: relative;
      min-height: 360px;
      background: var(--soft);
      overflow: hidden;
    }
    .ll-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
    }
    .ll-img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      background: #E8E0D4;
    }
    .ll-img-placeholder svg { opacity: 0.25; }
    .ll-img-placeholder span {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold);
    }
    .ll-content {
      padding: 48px 44px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--white);
    }
    .ll-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--gold);
      color: var(--white);
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 16px;
      margin-bottom: 22px;
      width: fit-content;
    }
    .ll-h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(28px, 3.5vw, 38px);
      font-weight: 300;
      color: var(--dark);
      margin-bottom: 16px;
    }
    .ll-p {
      font-size: 14px;
      color: var(--mid);
      line-height: 1.9;
      margin-bottom: 28px;
    }
    .ll-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .ll-tag {
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid #D8CEBC;
      padding: 5px 14px;
    }

    /* ─── COMMUNITIES ──────────────────────────────────────────── */
    .comm-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .comm-card {
      background: var(--white);
      border: 1px solid var(--border);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .comm-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    }
    .comm-img {
      height: 220px;
      background: var(--soft);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .comm-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .comm-img svg { opacity: 0.25; }
    .comm-body { padding: 24px 26px; }
    .comm-h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--dark);
      margin-bottom: 10px;
    }
    .comm-p {
      font-size: 13px;
      color: var(--mid);
      line-height: 1.85;
    }
    .comm-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--border);
      margin-top: 16px;
    }
    .comm-stat {
      padding: 14px 12px;
      text-align: center;
      border-right: 1px solid var(--border);
    }
    .comm-stat:last-child { border-right: none; }
    .comm-stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 18px;
      font-weight: 400;
      color: var(--gold);
    }
    .comm-stat-lbl {
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--mid);
      margin-top: 3px;
    }
    .comm-downloads {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 16px 26px 20px;
      border-top: 1px solid var(--border);
      background: var(--gold-pale);
    }
    .comm-dl-btn {
      font-size: 11px;
      letter-spacing: 1.2px;
      font-weight: 500;
      text-transform: uppercase;
      color: var(--white);
      border: 1px solid var(--gold);
      background: var(--gold);
      padding: 11px 18px;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: all 0.2s;
      cursor: pointer;
      border-radius: 2px;
    }
    .comm-dl-btn:hover { background: var(--dark); color: var(--white); border-color: var(--dark); }
    .comm-dl-btn svg { flex-shrink: 0; }

    /* ─── DEVELOPER PARTNERS ───────────────────────────────────── */
    #developers {
      padding: 56px 0;
      background: var(--white);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
    }
    .dev-header {
      text-align: center;
      margin-bottom: 40px;
      padding: 0 40px;
    }
    .dev-track-outer {
      overflow: hidden;
      position: relative;
    }
    .dev-track-outer::before,
    .dev-track-outer::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }
    .dev-track-outer::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
    .dev-track-outer::after  { right: 0; background: linear-gradient(to left, var(--white), transparent); }
    .dev-track {
      display: flex;
      align-items: center;
      gap: 56px;
      width: max-content;
      animation: devscroll 40s linear infinite;
    }
    .dev-track:hover { animation-play-state: paused; }
    @keyframes devscroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .dev-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 110px;
      opacity: 0.8;
      transition: opacity 0.3s;
      cursor: default;
    }
    .dev-item:hover { opacity: 1; }
    .dev-item img {
      height: 48px;
      width: auto;
      max-width: 160px;
      object-fit: contain;
    }
    .dev-item span {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--mid);
      white-space: nowrap;
    }

    /* ─── ABOUT ────────────────────────────────────────────────── */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }
    .about-img-wrap {
      position: relative;
    }
    .about-img-main {
      width: 100%;
      aspect-ratio: 3/4;
      overflow: hidden;
      background: var(--soft);
    }
    .about-img-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }
    .about-img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
    }
    .about-img-placeholder svg { opacity: 0.2; }
    .about-img-placeholder span {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold);
    }
    .about-accent {
      position: absolute;
      bottom: -20px;
      right: -20px;
      width: 120px;
      height: 120px;
      border: 2px solid var(--gold);
      opacity: 0.3;
      pointer-events: none;
    }
    .about-p {
      font-size: 14px;
      color: var(--mid);
      line-height: 1.95;
      margin-bottom: 20px;
    }
    .about-sig {
      border-left: 3px solid var(--gold);
      padding-left: 22px;
      margin-top: 32px;
    }
    .about-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-weight: 400;
      color: var(--dark);
    }
    .about-title {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold);
      margin-top: 6px;
    }

    /* ─── TEAM ─────────────────────────────────────────────────── */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
    }
    .team-card {
      background: var(--white);
      border: 1px solid var(--border);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .team-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    }
    .team-card.featured {
      border-color: var(--gold);
    }
    .team-img {
      width: 100%;
      aspect-ratio: 3/4;
      overflow: hidden;
      background: var(--soft);
      position: relative;
    }
    .team-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }
    .team-img-placeholder {
      width: 100%;
      height: 100%;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .team-img-placeholder svg { opacity: 0.2; }
    .team-info { padding: 16px; }
    .team-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px;
      font-weight: 400;
      color: var(--dark);
      margin-bottom: 5px;
    }
    .team-role {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gold);
    }
    .team-featured-badge {
      display: block;
      background: var(--gold);
      color: var(--white);
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 4px 10px;
      margin-bottom: 8px;
      width: fit-content;
    }

    /* ─── GOOGLE REVIEWS ───────────────────────────────────────── */
    #reviews { background: var(--gold-pale); }
    .reviews-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .reviews-header .eyebrow {
      justify-content: center;
    }
    .reviews-header .eyebrow::before { display: none; }
    .overall-rating {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 48px;
    }
    .rating-big {
      font-family: 'Cormorant Garamond', serif;
      font-size: 56px;
      font-weight: 300;
      color: var(--dark);
      line-height: 1;
    }
    .rating-stars {
      display: flex;
      gap: 4px;
    }
    .star {
      color: #B8972A;
      font-size: 20px;
    }
    .rating-count {
      font-size: 13px;
      color: var(--mid);
      margin-top: 4px;
    }
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .review-card {
      background: var(--white);
      border: 1px solid var(--border);
      padding: 28px;
    }
    .review-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .review-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 14px;
      font-weight: 500;
      flex-shrink: 0;
    }
    .review-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--dark);
    }
    .review-date {
      font-size: 12px;
      color: var(--mid);
      margin-top: 2px;
    }
    .review-stars { margin-bottom: 12px; }
    .review-text {
      font-size: 13px;
      color: var(--mid);
      line-height: 1.8;
    }
    .reviews-cta {
      text-align: center;
      margin-top: 40px;
    }
    .reviews-loading {
      text-align: center;
      padding: 60px;
      color: var(--mid);
      font-size: 14px;
    }
    .reviews-error {
      text-align: center;
      padding: 40px;
      color: var(--mid);
      font-size: 14px;
    }
    .reviews-config-notice {
      background: var(--white);
      border: 1px solid var(--border);
      border-left: 3px solid var(--gold);
      padding: 20px 24px;
      font-size: 13px;
      color: var(--mid);
      line-height: 1.7;
    }
    .reviews-config-notice strong { color: var(--dark); font-weight: 500; }

    /* ─── CONTACT ──────────────────────────────────────────────── */
    #contact { background: var(--dark); }
    #contact .eyebrow { color: var(--gold-light); }
    #contact .eyebrow::before { background: var(--gold-light); }
    #contact .section-title { color: #F0EAE0; }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: start;
    }
    .contact-info { display: flex; flex-direction: column; gap: 32px; }
    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .contact-icon {
      width: 40px;
      height: 40px;
      border: 1px solid #3A3530;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .contact-icon svg { color: var(--gold); }
    .contact-lbl {
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #5A5148;
      margin-bottom: 4px;
    }
    .contact-val {
      font-size: 14px;
      color: #C8B890;
    }
    .contact-val a { color: #C8B890; }
    .contact-val a:hover { color: var(--gold-light); }
    .contact-form-wrap {
      background: rgba(255,255,255,0.04);
      border: 1px solid #2A2420;
      padding: 40px;
    }
    .form-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-weight: 300;
      color: #F0EAE0;
      margin-bottom: 28px;
    }
    .form-group { margin-bottom: 18px; }
    .form-group label {
      display: block;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #5A5148;
      margin-bottom: 8px;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      background: rgba(255,255,255,0.05);
      border: 1px solid #2A2420;
      color: #C8B890;
      font-family: 'Jost', sans-serif;
      font-size: 14px;
      padding: 12px 16px;
      outline: none;
      transition: border-color 0.2s;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: #443D38; }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { border-color: var(--gold); }
    .form-group textarea { height: 110px; resize: none; }
    .form-group select option { background: #1A1714; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .btn-submit {
      width: 100%;
      background: var(--gold);
      color: var(--white);
      font-family: 'Jost', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 15px;
      border: none;
      cursor: pointer;
      margin-top: 8px;
      transition: background 0.2s;
    }
    .btn-submit:hover { background: #B8A07E; }

    /* ─── FOOTER ───────────────────────────────────────────────── */
    footer {
      background: #0D0B09;
      padding: 28px 40px;
    }
    .footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .footer-copy {
      font-size: 12px;
      color: #3A3530;
    }
    .footer-links {
      display: flex;
      gap: 24px;
    }
    .footer-links a {
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #3A3530;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--gold); }

    /* ─── FLOATING WHATSAPP ────────────────────────────────────── */
    .wa-float {
      position: fixed;
      bottom: 32px;
      right: 32px;
      z-index: 900;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }
    .wa-tooltip {
      background: var(--dark);
      color: var(--white);
      font-size: 12px;
      padding: 8px 14px;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(10px);
      transition: all 0.3s;
      pointer-events: none;
    }
    .wa-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
    .wa-btn {
      width: 58px;
      height: 58px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(37,211,102,0.4);
      transition: transform 0.2s;
    }
    .wa-btn:hover { transform: scale(1.08); }
    .wa-btn svg { width: 28px; height: 28px; fill: white; }

    /* ─── RESPONSIVE ───────────────────────────────────────────── */

    /* ════════════════════════════════════════════════════════════
       RESPONSIVE — complete mobile/tablet system
       ════════════════════════════════════════════════════════════ */

    /* ── Large tablet ≤1100px ── */
    @media (max-width: 1100px) {
      .nav-inner { padding: 0 32px; }
      .team-grid { grid-template-columns: repeat(3, 1fr); }
      .comm-grid { grid-template-columns: repeat(2, 1fr); }
      .section-inner { padding: 0 32px; }
    }

    /* ── Tablet landscape ≤900px ── */
    @media (max-width: 900px) {
      .hero-inner { padding: 120px 32px 80px; }
      .hero-h1 { font-size: clamp(40px, 6vw, 64px); }
      .hero-stats { min-width: 280px; }
      .ll-card { grid-template-columns: 1fr; }
      .ll-img { min-height: 300px; }
      .ll-img-placeholder { min-height: 300px; }
      .about-grid { grid-template-columns: 1fr; gap: 40px; }
      .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .team-grid { grid-template-columns: repeat(3, 1fr); }
      .reviews-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── Tablet portrait ≤768px ── */
    @media (max-width: 768px) {
      /* Prevent ALL horizontal overflow */
      html, body { overflow-x: hidden; max-width: 100%; }
      *, *::before, *::after { max-width: 100%; }
      section, .section, .section-inner,
      .comm-card, .ll-card, .ll-content { overflow-x: hidden !important; }

      /* Layout & spacing */
      .section { padding: 56px 20px; }
      .section-inner { padding: 0; }
      .nav-inner { padding: 0 20px; }
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .nav-hamburger { display: flex; }
      .mobile-menu { padding: 20px; }
      footer { padding: 20px; }
      .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }

      /* Hero */
      .hero-inner { padding: 100px 20px 72px; }
      .hero-h1 { font-size: clamp(36px, 9vw, 52px); }
      .hero-p { font-size: 14px; }
      .hero-btns { justify-content: center; flex-wrap: wrap; }
      .hero-stats { min-width: 0; width: 100%; max-width: 100%; }
      .hero-stat { padding: 14px 8px; }

      /* Typography */
      .section-title { font-size: clamp(26px, 6vw, 36px); }
      .ll-badge { font-size: 10px; padding: 6px 12px; }
      .ll-content { padding: 28px 20px; }

      /* Communities */
      .comm-grid { grid-template-columns: 1fr; }
      .comm-stats { grid-template-columns: repeat(3, 1fr); }
      .comm-card { overflow: hidden; }

      /* Team */
      .team-grid { grid-template-columns: repeat(2, 1fr); }

      /* Reviews */
      .reviews-grid { grid-template-columns: 1fr; }

      /* Contact form */
      .contact-form-wrap { padding: 24px 20px; }
      .form-row { grid-template-columns: 1fr; }

      /* ── UTILITY: single-col grids ── */
      .m1 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        min-height: auto !important;
      }
      /* ── UTILITY: 2-col on mobile (from 4-col) ── */
      .m2 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      /* ── Tab nav bars: scrollable ── */
      .mob-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
      }
      .mob-tabs::-webkit-scrollbar { display: none; }
      .mob-tabs button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 11px 12px !important;
        font-size: 9px !important;
        letter-spacing: 1.2px !important;
      }

      /* ── Community panels: reduced padding ── */
      #llpanel-overview, #llpanel-villas, #llpanel-apartments,
      #llpanel-masterplan, #llpanel-enquire,
      #wpanel-overview, #wpanel-amenities, #wpanel-location, #wpanel-downloads,
      #mspanel-overview, #mspanel-clusters, #mspanel-masterplan, #mspanel-enquire {
        padding: 20px 16px !important;
        overflow-x: hidden !important;
      }

      /* ── Community photo grids inside panels ── */
      .m1 > div[style*="display:grid"],
      #llpanel-villas [style*="grid-template-columns:2fr"],
      #llpanel-apartments [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }

      /* ── Off-plan grid ── */
      #offplanGrid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }

      /* ── Blog grid ── */
      #blogGrid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }

      /* ── Market update ── */
      #market_reports_grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }
      #mu_stats_bar {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
      }

      /* ── List property section ── */
      #list-property { padding: 56px 20px !important; }

      /* ── About section director cards: stack photo above text ── */
      #about [style*="display:flex;"][style*="gap:0"],
      #about [style*="display:flex; "][style*="gap:0"] {
        flex-direction: column !important;
      }
      #about [style*="width:260px"],
      #about [style*="min-width:260px"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 240px !important;
      }

      /* ── Wilds amenities 3-col → 1-col ── */
      #wpanel-amenities [style*="grid-template-columns:repeat(3"],
      #wpanel-amenities [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      /* ── Masaar clusters list ── */
      #mspanel-clusters [style*="justify-content:space-between"] {
        flex-wrap: wrap !important;
        gap: 4px !important;
      }

      /* ── Living Legends apartment photo grids ── */
      [style*="grid-template-columns:2fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
      }

      /* ── Photo thumbnail strips (6-col → 3-col) ── */
      [style*="grid-template-columns:repeat(6,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      /* ── Developer logo scroll: keep working ── */
      .dev-track { max-width: none; }

      /* ── WhatsApp button ── */
      .wa-float { bottom: 16px; right: 16px; }
      .wa-btn { width: 52px; height: 52px; }
    }

    /* ── Small mobile ≤480px ── */
    @media (max-width: 480px) {
      .section { padding: 44px 16px; }
      .section-inner { padding: 0; }
      .hero-inner { padding: 88px 16px 56px; }
      .hero-h1 { font-size: clamp(30px, 10vw, 44px); }
      .hero-stats { max-width: 100%; }
      .stat-num { font-size: 22px; }
      .stat-lbl { font-size: 9px; }
      .team-grid { grid-template-columns: repeat(2, 1fr); }
      .comm-downloads { padding: 12px 16px 16px; gap: 6px; }
      .comm-dl-btn { font-size: 9px; padding: 7px 10px; }
      .nav-inner { height: 64px; }
      .mobile-menu { top: 64px; }
      .ll-content { padding: 22px 16px; }
      .contact-form-wrap { padding: 20px 16px; }
      .review-card { padding: 20px; }
      #list-property { padding: 44px 16px !important; }
    }

    /* ── Tablet only (769–1024px) ── */
    @media (max-width: 1024px) and (min-width: 769px) {
      #offplanGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
      #blogGrid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
      .m1 { grid-template-columns: 1fr !important; gap: 32px !important; }
      .team-grid { grid-template-columns: repeat(3, 1fr); }
      #market_reports_grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
  </style>
  <!-- Schema.org LocalBusiness — helps Google show address, phone, reviews in search -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "RealEstateAgent",
    "name": "UNIQ Real Estate Broker",
    "image": "https://uniqrealty.co/images/logo.png",
    "url": "https://uniqrealty.co",
    "telephone": "+971507788073",
    "email": "info@uniqrealty.co",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Shop C27, Andalusia Courtyard Mall",
      "addressLocality": "Living Legends, Dubailand",
      "addressRegion": "Dubai",
      "addressCountry": "AE"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 25.0522,
      "longitude": 55.3076
    },
    "openingHours": "Mo-Sa 09:00-18:00",
    "priceRange": "AED",
    "description": "UNIQ Real Estate specialises in gated community properties in Dubai and Sharjah — Living Legends, The Wilds, Masaar. Buy, sell, rent and property management services.",
    "sameAs": [
      "https://www.instagram.com/uniq.realty/"
    ],
    "hasMap": "https://maps.app.goo.gl/Za2ZA7btBGLvpmD96",
    "currenciesAccepted": "AED",
    "areaServed": ["Dubai", "Sharjah", "Abu Dhabi"]
  }
  </script>

</head>
<body>

  <!-- ═══ NAVIGATION ════════════════════════════════════════════ -->
  <nav id="navbar">
    <div class="nav-inner">
      <a href="#hero" class="nav-logo">
        <img src="images/logo.png" alt="UNIQ Real Estate"
             onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
        <div class="nav-logo-fallback" style="display:none"><span>UNIQ</span> Real Estate</div>
      </a>
      <ul class="nav-links">
        <li><a href="#hero">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#speciality">Living Legends</a></li>
        <li><a href="#communities">Communities</a></li>
        <li><a href="#off-plan">Off Plan</a></li>
        <li><a href="#fitout-calculator">Fit Out</a></li>
        <li><a href="#roi-calc">ROI Calc</a></li>
        <li><a href="#team">Our Team</a></li>
        <li><a href="#mortgages">Mortgages</a></li>
        <li><a href="#list-property">List Property</a></li>
        <li><a href="#market-update">Market</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#reviews">Reviews</a></li>
      </ul>
      <a href="#contact" class="nav-cta">Enquire Now</a>
      <div class="nav-hamburger" onclick="toggleMenu()" aria-label="Open menu">
        <span></span><span></span><span></span>
      </div>
    </div>
  </nav>

  <!-- Mobile Menu -->
  <div class="mobile-menu" id="mobileMenu">
    <a href="#hero" onclick="toggleMenu()">Home</a>
    <a href="#about" onclick="toggleMenu()">About Us</a>
    <a href="#speciality" onclick="toggleMenu()">Living Legends</a>
    <a href="#communities" onclick="toggleMenu()">Communities</a>
    <a href="#off-plan" onclick="toggleMenu()">Off Plan</a>
    <a href="#fitout-calculator" onclick="toggleMenu()">Fit Out</a>
    <a href="#roi-calc" onclick="toggleMenu()">ROI Calculator</a>
    <a href="#team" onclick="toggleMenu()">Our Team</a>
    <a href="#mortgages" onclick="toggleMenu()">Mortgages</a>
    <a href="#list-property" onclick="toggleMenu()">List Property</a>
    <a href="#market-update" onclick="toggleMenu()">Market Update</a>
    <a href="#blog" onclick="toggleMenu()">Blog</a>
    <a href="#reviews" onclick="toggleMenu()">Reviews</a>
    <a href="#contact" onclick="toggleMenu()">Enquire Now</a>
  </div>

  <!-- ═══ HERO ══════════════════════════════════════════════════ -->
  <section id="hero">
    <div class="hero-inner">
      <div class="eyebrow" style="justify-content:center;">Dubai's Gated Community Experts</div>
      <h1 class="hero-h1">
        Discover Your<br>
        <em>Perfect Home</em><br>
        in Dubai
      </h1>
      <p class="hero-p">
        UNIQ Real Estate specialises exclusively in Dubai and Sharjah's most prestigious gated communities. Built on 40 years of ownership experience, we deliver market knowledge that only comes from truly living it.
      </p>
      <div class="hero-btns">
        <a href="#communities" class="btn-dark">Explore Communities</a>
        <a href="#contact" class="btn-outline">Get in Touch</a>
      </div>
      <div class="hero-stats">
        <div class="hero-stat">
          <div class="stat-num">40+</div>
          <div class="stat-lbl">Yrs Experience</div>
        </div>
        <div class="hero-stat">
          <div class="stat-num">5</div>
          <div class="stat-lbl">Communities</div>
        </div>
        <div class="hero-stat">
          <div class="stat-num">AED 2.375B+</div>
          <div class="stat-lbl">Transactions</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ LIVING LEGENDS SPECIALITY ════════════════════════════ -->
  <section id="speciality" class="section">
    <div class="section-inner">
      <div class="eyebrow" style="justify-content:center;">Our Signature Speciality</div>
      <h2 class="section-title" style="text-align:center;">Unrivalled Expertise<br>in Living Legends</h2>

      <!-- Hero image + overlay -->
      <div style="position:relative;width:100%;height:400px;overflow:hidden;border:1px solid var(--border);margin-bottom:0;">
        <img src="images/villa/villa13_25e4b8103c.jpg"
             alt="Living Legends, Dubai" id="llHeroImg"
             style="width:100%;height:100%;object-fit:cover;object-position:center;">
        <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(10,8,6,0.75) 0%,rgba(10,8,6,0.2) 55%,transparent 100%);pointer-events:none;"></div>
        <div style="position:absolute;top:0;left:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 44px;max-width:500px;">
          <div class="ll-badge" style="margin-bottom:12px;">★ Our #1 Speciality</div>
          <h3 style="font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.5vw,42px);font-weight:300;color:#fff;line-height:1.2;margin-bottom:8px;">Living Legends</h3>
          <p style="font-size:13px;color:rgba(255,255,255,0.8);line-height:1.6;">Dubailand · Dubai · Gated Master Community</p>
        </div>
      </div>

      <!-- Stats bar -->
      <div class="m2" style="display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-top:none;background:var(--white);">
        <div style="padding:18px 20px;text-align:center;border-right:1px solid var(--border);">
          <div style="font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold);">4 Types</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Villa Categories</div>
        </div>
        <div style="padding:18px 20px;text-align:center;border-right:1px solid var(--border);">
          <div style="font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold);">4–6 Bed</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Stand-Alone Villas</div>
        </div>
        <div style="padding:18px 20px;text-align:center;border-right:1px solid var(--border);">
          <div style="font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold);">AED 5M+</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Starting Price</div>
        </div>
        <div style="padding:18px 20px;text-align:center;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold);">Prime</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Gated Community</div>
        </div>
      </div>

      <!-- Tab nav -->
      <div class="mob-tabs" style="display:flex;border:1px solid var(--border);border-top:none;background:var(--soft);">
        <button onclick="llTab('overview')" id="lltab-overview"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid var(--gold);background:var(--white);color:var(--dark);cursor:pointer;font-weight:500;">
          Overview
        </button>
        <button onclick="llTab('villas')" id="lltab-villas"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">
          Villas
        </button>
        <button onclick="llTab('apartments')" id="lltab-apartments"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">
          Apartments
        </button>
        <button onclick="llTab('masterplan')" id="lltab-masterplan"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">
          Master Plan
        </button>
        <button onclick="llTab('enquire')" id="lltab-enquire"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">
          Enquire
        </button>
      </div>

      <!-- Tab panels -->
      <div style="border:1px solid var(--border);border-top:none;background:var(--white);">

        <!-- OVERVIEW -->
        <div id="llpanel-overview" style="padding:32px 36px;display:block;">
          <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:36px;">
            <div>
              <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;">About the Community</div>
              <p style="font-size:13px;color:var(--mid);line-height:1.9;margin-bottom:16px;">
                No agency knows Living Legends like UNIQ. From its tree-lined boulevards to its premium villa clusters and landmark apartment towers, we have brokered more transactions here than anyone in the market.
              </p>
              <p style="font-size:13px;color:var(--mid);line-height:1.9;">
                Whether you are buying, upgrading within the community, or investing — our team's unparalleled local knowledge gives you a decisive advantage. Living Legends is a fully-gated master community in Dubailand featuring stand-alone villas and apartment towers with world-class amenities.
              </p>
            </div>
            <div>
              <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">Community Highlights</div>
              <div style="display:flex;flex-direction:column;gap:0;">
                <div style="display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--dark);">
                  <span style="color:var(--gold);">◈</span> Fully gated & secured master community
                </div>
                <div style="display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--dark);">
                  <span style="color:var(--gold);">◈</span> Stand-alone villas with private plots
                </div>
                <div style="display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--dark);">
                  <span style="color:var(--gold);">◈</span> Community pools, parks & jogging tracks
                </div>
                <div style="display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--dark);">
                  <span style="color:var(--gold);">◈</span> Retail, F&amp;B &amp; community facilities
                </div>
                <div style="display:flex;align-items:center;gap:12px;padding:11px 0;font-size:12px;color:var(--dark);">
                  <span style="color:var(--gold);">◈</span> Prime Dubailand location, near Global Village, Al Barari &amp; The Wilds
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;padding-top:20px;border-top:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap;">
            <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Living%20Legends%20villas." target="_blank" rel="noopener"
               style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px 22px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
              WhatsApp Us About Living Legends
            </a>
            <button onclick="llTab('villas')"
               style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px 22px;display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;">
              View Villa Types →
            </button>
          </div>
        </div>

        <!-- VILLAS -->
        <div id="llpanel-villas" style="display:none;">

          <!-- Villa type selector -->
          <div style="display:flex;border-bottom:1px solid var(--border);background:var(--soft);overflow-x:auto;">
            <button onclick="llVilla('A')" id="llv-A"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px 24px;border:none;border-bottom:2px solid var(--gold);background:var(--white);color:var(--dark);cursor:pointer;font-weight:600;white-space:nowrap;">
              Type A — 6 Bed
            </button>
            <button onclick="llVilla('B')" id="llv-B"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px 24px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;">
              Type B — 6 Bed
            </button>
            <button onclick="llVilla('C')" id="llv-C"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px 24px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;">
              Type C — 5 Bed
            </button>
            <button onclick="llVilla('D')" id="llv-D"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:12px 24px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;">
              Type D — 4 Bed
            </button>
          </div>

          <!-- TYPE A -->
          <div id="llvp-A" style="display:block;">

            <!-- Cover Hero -->
            <!-- Hero -->
            <div style="width:100%;height:300px;overflow:hidden;position:relative;">
              <img src="images/type_a_cover.jpg" alt="Type A Villa — Living Legends" style="width:100%;height:100%;object-fit:cover;object-position:center 75%;display:block;">
              <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.30) 50%,rgba(0,0,0,0.08) 100%);pointer-events:none;"></div>
              <div style="position:absolute;bottom:20px;left:28px;">
                <div style="font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.80);margin-bottom:4px;text-shadow:0 1px 6px rgba(0,0,0,0.6);">Living Legends · Villa</div>
                <div style="font-family:'Cormorant Garamond',serif;font-size:28px;color:#fff;font-weight:600;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,0.7);">Type A</div>
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:5px;text-shadow:0 1px 6px rgba(0,0,0,0.6);">6 Bedrooms · All Ensuite · Stand-Alone</div>
              </div>
            </div>

            <!-- Specs panel -->
            <div style="padding:20px 28px 18px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;">
              <div style="display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;">
                <div>
                  <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                    <div style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;">Type A</div>
                    <div style="font-size:11px;color:var(--mid);">Premium · All Ensuite</div>
                  </div>
                  <div style="display:flex;gap:24px;flex-wrap:wrap;">
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">BUA</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">6,463 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Plot Size</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">10,000 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Price Range</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:600;">AED 10M – 16M</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Type</div><div style="font-size:13px;font-family:'Jost',sans-serif;color:var(--dark);">Stand-Alone</div></div>
                  </div>
                </div>
              </div>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20a%20Type%20A%20Villa%20in%20Living%20Legends." target="_blank" rel="noopener"
                 style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:11px 20px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;">
                Enquire — Type A
              </a>
            </div>

            <!-- Gallery + Floor Plan side by side -->
            <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--border);align-items:start;">

              <!-- Left: photo gallery -->
              <div style="padding:20px 24px;border-right:1px solid var(--border);">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:10px;">Interior Photos</div>
                <div data-gallery="type-a" style="display:flex;flex-direction:column;gap:6px;">
                  <div style="display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:110px 110px;gap:6px;">
                    <div style="grid-row:1/3;overflow:hidden;border:1px solid var(--border);"><img src="images/type_a_1.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/type_a_2.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/type_a_3.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/type_a_4.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/type_a_5.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                  </div>
                  <div id="type-a-more" data-display="grid" style="display:none;grid-template-columns:repeat(5,1fr);gap:6px;">
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_6.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_7.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_8.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_9.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_10.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_11.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_12.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_13.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_14.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                    <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/type_a_15.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                  </div>
                  <button onclick="lbToggle('type-a-more',this)" data-label="＋ 10 more photos" style="background:none;border:1px solid var(--border);color:var(--mid);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px;cursor:pointer;font-family:'Jost',sans-serif;width:100%;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--gold)';this.style.color='var(--gold)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--mid)'">＋ 10 more photos</button>
                </div>
              </div>

              <!-- Right: Floor Plan -->
              <div style="padding:20px 24px;">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:10px;">Floor Plan — Ground & First Floor</div>
                <div style="border:1px solid var(--border);overflow:hidden;">
                  <div style="padding:8px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;">
                    <a href="images/floorplan_typeA.jpg" download="Living-Legends-Type-A-Floorplan.jpg"
                       style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);text-decoration:none;">
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                      Download
                    </a>
                  </div>
                  <!-- Split portrait image into side-by-side landscape layout -->
                  <div style="display:flex;width:100%;">
                    <div style="flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border);">
                      <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);padding:6px 10px;border-bottom:1px solid var(--border);background:#fff;">Ground Floor</div>
                      <div style="aspect-ratio:1/1;background:url('images/floorplan_typeA.jpg') center top/100% 200% no-repeat;"></div>
                    </div>
                    <div style="flex:1;display:flex;flex-direction:column;">
                      <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);padding:6px 10px;border-bottom:1px solid var(--border);background:#fff;">First Floor</div>
                      <div style="aspect-ratio:1/1;background:url('images/floorplan_typeA.jpg') center bottom/100% 200% no-repeat;"></div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>

          <!-- TYPE B -->
          <div id="llvp-B" style="display:none;">
            <!-- Hero placeholder -->
            <div style="width:100%;height:260px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--soft) 0%,#e8e2da 100%);display:flex;align-items:center;justify-content:center;">
              <div style="text-align:center;">
                <div style="font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Living Legends · Villa</div>
                <div style="font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--dark);font-weight:600;line-height:1;">Type B</div>
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:6px;">6 Bedrooms · Stand-Alone</div>
              </div>
            </div>
            <!-- Specs panel -->
            <div style="padding:20px 28px 18px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;">
              <div style="display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;">
                <div>
                  <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                    <div style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;">Type B</div>
                    <div style="font-size:11px;color:var(--mid);">Stand-Alone Villa</div>
                  </div>
                  <div style="display:flex;gap:24px;flex-wrap:wrap;">
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">BUA</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">4,192 – 4,460 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Plot Size</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">6,500 – 9,500 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Price Range</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:600;">AED 7M – 7.5M</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Type</div><div style="font-size:13px;font-family:'Jost',sans-serif;color:var(--dark);">Stand-Alone</div></div>
                  </div>
                </div>
              </div>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20a%20Type%20B%20Villa%20in%20Living%20Legends." target="_blank" rel="noopener"
                 style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:11px 20px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;">
                Enquire — Type B
              </a>
            </div>
            <!-- Gallery + Floor Plan -->
            <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--border);">
              <div style="padding:20px 24px;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:180px;background:var(--soft);">
                <div style="text-align:center;"><div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);">Photos Coming Soon</div></div>
              </div>
              <div style="padding:20px 24px;">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:10px;">Floor Plan — Ground & First Floor</div>
                <div style="border:1px solid var(--border);overflow:hidden;"><div style="padding:8px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:flex-end;"><a href="images/floorplan_typeB.jpg" download="Living-Legends-Type-B-Floorplan.jpg" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);text-decoration:none;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download</a></div><img src="images/floorplan_typeB.jpg" alt="Type B Floor Plan" style="width:100%;display:block;"></div>
              </div>
            </div>
          </div>

          <!-- TYPE C -->
          <div id="llvp-C" style="display:none;">
            <!-- Hero placeholder -->
            <div style="width:100%;height:260px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--soft) 0%,#e8e2da 100%);display:flex;align-items:center;justify-content:center;">
              <div style="text-align:center;">
                <div style="font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Living Legends · Villa</div>
                <div style="font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--dark);font-weight:600;line-height:1;">Type C</div>
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:6px;">5 Bedrooms · Stand-Alone</div>
              </div>
            </div>
            <!-- Specs panel -->
            <div style="padding:20px 28px 18px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;">
              <div style="display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;">
                <div>
                  <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                    <div style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;">Type C</div>
                    <div style="font-size:11px;color:var(--mid);">Stand-Alone Villa</div>
                  </div>
                  <div style="display:flex;gap:24px;flex-wrap:wrap;">
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">BUA</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">3,635 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Plot Size</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">5,000 – 8,500 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Price Range</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:600;">AED 5.7M – 7.8M</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Type</div><div style="font-size:13px;font-family:'Jost',sans-serif;color:var(--dark);">Stand-Alone</div></div>
                  </div>
                </div>
              </div>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20a%20Type%20C%20Villa%20in%20Living%20Legends." target="_blank" rel="noopener"
                 style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:11px 20px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;">
                Enquire — Type C
              </a>
            </div>
            <!-- Gallery + Floor Plan -->
            <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--border);">
              <div style="padding:20px 24px;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:180px;background:var(--soft);">
                <div style="text-align:center;"><div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);">Photos Coming Soon</div></div>
              </div>
              <div style="padding:20px 24px;">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:10px;">Floor Plan — Ground & First Floor</div>
                <div style="border:1px solid var(--border);overflow:hidden;"><div style="padding:8px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:flex-end;"><a href="images/floorplan_typeC.jpg" download="Living-Legends-Type-C-Floorplan.jpg" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);text-decoration:none;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download</a></div><img src="images/floorplan_typeC.jpg" alt="Type C Floor Plan" style="width:100%;display:block;"></div>
              </div>
            </div>
          </div>

          <!-- TYPE D -->
          <div id="llvp-D" style="display:none;">
            <!-- Hero placeholder -->
            <div style="width:100%;height:260px;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--soft) 0%,#e8e2da 100%);display:flex;align-items:center;justify-content:center;">
              <div style="text-align:center;">
                <div style="font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Living Legends · Villa</div>
                <div style="font-family:'Cormorant Garamond',serif;font-size:36px;color:var(--dark);font-weight:600;line-height:1;">Type D</div>
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:6px;">4 Bedrooms · Stand-Alone</div>
              </div>
            </div>
            <!-- Specs panel -->
            <div style="padding:20px 28px 18px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;">
              <div style="display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;">
                <div>
                  <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                    <div style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;">Type D</div>
                    <div style="font-size:11px;color:var(--mid);">Stand-Alone Villa</div>
                  </div>
                  <div style="display:flex;gap:24px;flex-wrap:wrap;">
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">BUA</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">2,874 – 2,897 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Plot Size</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--dark);font-weight:600;">4,500 – 6,500 sqft</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Price Range</div><div style="font-size:15px;font-family:'Cormorant Garamond',serif;color:var(--gold);font-weight:600;">AED 5M – 5.5M</div></div>
                    <div style="background:var(--soft);padding:10px 16px;min-width:90px;"><div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:4px;">Type</div><div style="font-size:13px;font-family:'Jost',sans-serif;color:var(--dark);">Stand-Alone</div></div>
                  </div>
                </div>
              </div>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20a%20Type%20D%20Villa%20in%20Living%20Legends." target="_blank" rel="noopener"
                 style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:11px 20px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;">
                Enquire — Type D
              </a>
            </div>
            <!-- Gallery + Floor Plan -->
            <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--border);">
              <div style="padding:20px 24px;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:180px;background:var(--soft);">
                <div style="text-align:center;"><div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);">Photos Coming Soon</div></div>
              </div>
              <div style="padding:20px 24px;">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:10px;">Floor Plan — Ground & First Floor</div>
                <div style="border:1px solid var(--border);overflow:hidden;"><div style="padding:8px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:flex-end;"><a href="images/floorplan_typeD.jpg" download="Living-Legends-Type-D-Floorplan.jpg" style="display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);text-decoration:none;"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>Download</a></div><img src="images/floorplan_typeD.jpg" alt="Type D Floor Plan" style="width:100%;display:block;"></div>
              </div>
            </div>
          </div>

        </div><!-- end villas panel -->

        <!-- APARTMENTS -->
        <div id="llpanel-apartments" style="display:none;">

          <!-- Hero intro strip -->
          <div style="padding:36px 36px 28px;border-bottom:1px solid var(--border);">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">Living Legends · Apartment Towers</div>
            <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:600;color:var(--dark);line-height:1.2;margin-bottom:14px;">12 Legendary Towers.<br>One Iconic Address.</div>
            <p style="font-size:13px;color:var(--mid);line-height:1.9;max-width:680px;">
              Living Legends is home to 12 residential towers — each named after a legendary figure — offering studios through to grand penthouses within the same exclusive gated master community. With a 9-hole golf course, resort-style pools and lush landscaped gardens on the doorstep, these apartments offer a lifestyle that is truly unmatched at this price point in Dubai.
            </p>
          </div>

          <!-- Unit size reference bar -->
          <div style="padding:0;background:var(--soft);border-top:1px solid var(--border);border-bottom:3px solid var(--gold);display:flex;flex-wrap:wrap;">
            <div style="flex:1;min-width:120px;padding:18px 24px;border-right:1px solid var(--border);text-align:center;">
              <div style="font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--dark);font-weight:600;line-height:1.1;">Studio</div>
              <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:5px;">up to 850 sq ft</div>
            </div>
            <div style="flex:1;min-width:120px;padding:18px 24px;border-right:1px solid var(--border);text-align:center;">
              <div style="font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--dark);font-weight:600;line-height:1.1;">1 Bedroom</div>
              <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:5px;">up to 1,200 sq ft</div>
            </div>
            <div style="flex:1;min-width:120px;padding:18px 24px;border-right:1px solid var(--border);text-align:center;">
              <div style="font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--dark);font-weight:600;line-height:1.1;">2 Bedroom</div>
              <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:5px;">up to 1,550 sq ft</div>
            </div>
            <div style="flex:1;min-width:120px;padding:18px 24px;border-right:1px solid var(--border);text-align:center;">
              <div style="font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--dark);font-weight:600;line-height:1.1;">3 Bedroom</div>
              <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:5px;">up to 1,850 sq ft</div>
            </div>
            <div style="flex:1;min-width:120px;padding:18px 24px;text-align:center;position:relative;">
              <div style="font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--dark);font-weight:600;line-height:1.1;">Penthouse</div>
              <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:5px;">up to 4,000 sq ft</div>
            </div>
          </div>

          <!-- ── COMPLETED TOWERS ── -->
          <div style="padding:36px 36px 0;background:#fff;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:24px;">
              <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);">Completed Towers</div>
              <div style="height:1px;flex:1;background:var(--border);"></div>
              <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#4a7c59;display:flex;align-items:center;gap:5px;">
                <span style="width:6px;height:6px;background:#4a7c59;border-radius:50%;display:inline-block;"></span> Ready to Move In
              </div>
            </div>

            <!-- HERCULES — full width row -->
            <div style="border:1px solid var(--border);margin-bottom:16px;overflow:hidden;">
              <!-- Header bar — click to expand/collapse -->
              <div onclick="llTowerToggle('hercules')" style="display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:#fff;border-left:3px solid var(--gold);cursor:pointer;user-select:none;transition:background 0.15s;" onmouseover="this.style.background='var(--soft)'" onmouseout="this.style.background='#fff'">
                <div style="display:flex;align-items:center;gap:14px;">
                  <div style="background:#27ae60;color:#fff;font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:2px;">✓ Handed Over</div>
                  <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);font-weight:600;">Hercules</div>
                  <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);">Flagship Tower · Penthouses Available</div>
                </div>
                <div style="display:flex;align-items:center;gap:20px;">
                  <span style="font-size:10px;color:var(--mid);letter-spacing:1px;">Studio · 1BR · 2BR · 3BR · PH</span>
                  <div id="hercules-arrow" style="color:var(--gold);font-size:16px;transition:transform 0.3s;">▾</div>
                </div>
              </div>
              <!-- Expandable panel -->
              <div id="hercules-panel" style="display:none;">
                <div class="m1" style="display:grid;grid-template-columns:280px 1fr;min-height:260px;">
                  <!-- Left: unit sizes -->
                  <div style="background:var(--soft);padding:24px;border-right:1px solid var(--border);">
                    <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Unit Sizes</div>
                    <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">Studio</span><span>up to 850 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">1 Bedroom</span><span>up to 1,200 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">2 Bedroom</span><span>up to 1,550 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">3 Bedroom</span><span>up to 1,850 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--gold);">Penthouse</span><span style="color:var(--gold);">up to 4,000 sq ft</span></div>
                    </div>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Hercules%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener"
                       style="background:var(--gold);color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:10px 16px;display:inline-block;text-decoration:none;font-family:'Jost',sans-serif;">
                      Enquire Now
                    </a>
                  </div>
                  <!-- Right: photo grid -->
                  <div style="background:var(--soft);padding:16px;display:flex;flex-direction:column;gap:12px;">

                    <!-- General interiors -->
                    <div data-gallery="hercules" style="display:flex;flex-direction:column;gap:8px;">
                      <div style="display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:170px 170px;gap:8px;">
                        <div style="grid-row:1/3;overflow:hidden;border:1px solid var(--border);"><img src="images/hercules_facade.webp" style="width:100%;height:100%;object-fit:cover;object-position:center top;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/hercules_1.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/hercules_2.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/hercules_3.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/hercules_4.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                      </div>
                      <div id="hercules-more" data-display="grid" style="display:none;grid-template-columns:repeat(3,1fr);gap:8px;">
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_5.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_6.webp" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_7.webp" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                      </div>
                      <button onclick="lbToggle('hercules-more',this)" data-label="＋ 3 more photos" style="background:none;border:1px solid var(--border);color:var(--mid);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px;cursor:pointer;font-family:'Jost',sans-serif;width:100%;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--gold)';this.style.color='var(--gold)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--mid)'">＋ 3 more photos</button>
                    </div>

                    <!-- Penthouse -->
                    <div style="border-top:1px solid var(--border);padding-top:12px;">
                      <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Penthouse</div>
                      <div data-gallery="hercules-penthouse" style="display:flex;flex-direction:column;gap:8px;">
                        <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:6px;">
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_1.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_3.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_7.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_13.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_20.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_27.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        </div>
                        <div id="hercules-penthouse-more" data-display="grid" style="display:none;grid-template-columns:repeat(6,1fr);gap:6px;">
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_2.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_4.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_5.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_6.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_8.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_9.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_10.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_11.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_12.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_14.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_15.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_16.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_17.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_18.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_19.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_21.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_22.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_23.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_24.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_25.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_26.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_28.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_29.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_30.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_31.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_32.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                          <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/hercules_penthouse_33.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        </div>
                        <button onclick="lbToggle('hercules-penthouse-more',this)" data-label="＋ 27 more penthouse photos" style="background:none;border:1px solid var(--border);color:var(--mid);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px;cursor:pointer;font-family:'Jost',sans-serif;width:100%;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--gold)';this.style.color='var(--gold)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--mid)'">＋ 27 more penthouse photos</button>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>

            <!-- CLEOPATRA — full width row -->
            <div style="border:1px solid var(--border);margin-bottom:16px;overflow:hidden;">
              <div onclick="llTowerToggle('cleopatra')" style="display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:#fff;border-left:3px solid var(--gold);cursor:pointer;user-select:none;transition:background 0.15s;" onmouseover="this.style.background='var(--soft)'" onmouseout="this.style.background='#fff'">
                <div style="display:flex;align-items:center;gap:14px;">
                  <div style="background:#27ae60;color:#fff;font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:2px;">✓ Handed Over</div>
                  <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);font-weight:600;">Cleopatra</div>
                  <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);">Ready to Move In</div>
                </div>
                <div style="display:flex;align-items:center;gap:20px;">
                  <span style="font-size:10px;color:var(--mid);letter-spacing:1px;">Studio · 1BR · 2BR · 3BR</span>
                  <div id="cleopatra-arrow" style="color:var(--gold);font-size:16px;transition:transform 0.3s;">▾</div>
                </div>
              </div>
              <div id="cleopatra-panel" style="display:none;">
                <div class="m1" style="display:grid;grid-template-columns:280px 1fr;min-height:240px;">
                  <div style="background:var(--soft);padding:24px;border-right:1px solid var(--border);">
                    <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Unit Sizes</div>
                    <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">Studio</span><span>up to 850 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">1 Bedroom</span><span>up to 1,200 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">2 Bedroom</span><span>up to 1,550 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">3 Bedroom</span><span>up to 1,850 sq ft</span></div>
                    </div>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Cleopatra%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener"
                       style="background:var(--gold);color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:10px 16px;display:inline-block;text-decoration:none;font-family:'Jost',sans-serif;">
                      Enquire Now
                    </a>
                  </div>
                  <div style="background:var(--soft);padding:16px;">
                    <div data-gallery="cleopatra" style="display:flex;flex-direction:column;gap:8px;">
                      <div style="display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:170px 170px;gap:8px;">
                        <div style="grid-row:1/3;overflow:hidden;border:1px solid var(--border);"><img src="images/cleopatra_facade.webp" style="width:100%;height:100%;object-fit:cover;object-position:center top;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/cleopatra_1.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/cleopatra_2.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/cleopatra_3.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/cleopatra_4.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                      </div>
                      <div id="cleopatra-more" data-display="grid" style="display:none;grid-template-columns:repeat(3,1fr);gap:8px;">
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/cleopatra_6.webp" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/cleopatra_7.webp" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/cleopatra_5.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                      </div>
                      <button onclick="lbToggle('cleopatra-more',this)" data-label="＋ 3 more photos" style="background:none;border:1px solid var(--border);color:var(--mid);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px;cursor:pointer;font-family:'Jost',sans-serif;width:100%;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--gold)';this.style.color='var(--gold)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--mid)'">＋ 3 more photos</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- MARCO POLO — full width row -->
            <div style="border:1px solid var(--border);margin-bottom:0;overflow:hidden;">
              <div onclick="llTowerToggle('marcopolo')" style="display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:#fff;border-left:3px solid var(--gold);cursor:pointer;user-select:none;transition:background 0.15s;" onmouseover="this.style.background='var(--soft)'" onmouseout="this.style.background='#fff'">
                <div style="display:flex;align-items:center;gap:14px;">
                  <div style="background:#27ae60;color:#fff;font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:2px;">✓ Handed Over</div>
                  <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);font-weight:600;">Marco Polo</div>
                  <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);">Ready to Move In</div>
                </div>
                <div style="display:flex;align-items:center;gap:20px;">
                  <span style="font-size:10px;color:var(--mid);letter-spacing:1px;">Studio · 1BR · 2BR</span>
                  <div id="marcopolo-arrow" style="color:var(--gold);font-size:16px;transition:transform 0.3s;">▾</div>
                </div>
              </div>
              <div id="marcopolo-panel" style="display:none;">
                <div class="m1" style="display:grid;grid-template-columns:280px 1fr;min-height:220px;">
                  <div style="background:var(--soft);padding:24px;border-right:1px solid var(--border);">
                    <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Unit Sizes</div>
                    <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px;">
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">Studio</span><span>up to 850 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">1 Bedroom</span><span>up to 1,200 sq ft</span></div>
                      <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--dark);border-bottom:1px solid var(--border);padding-bottom:8px;"><span style="color:var(--mid);">2 Bedroom</span><span>up to 1,550 sq ft</span></div>
                    </div>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Marco%20Polo%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener"
                       style="background:var(--gold);color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:10px 16px;display:inline-block;text-decoration:none;font-family:'Jost',sans-serif;">
                      Enquire Now
                    </a>
                  </div>
                  <div style="background:var(--soft);padding:16px;">
                    <div data-gallery="marcopolo" style="display:flex;flex-direction:column;gap:8px;">
                      <div style="display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:170px 170px;gap:8px;">
                        <div style="grid-row:1/3;overflow:hidden;border:1px solid var(--border);"><img src="images/marco_polo_sinbad.webp" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/marco_polo_1.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/marco_polo_2.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/marco_polo_3.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);"><img src="images/marco_polo_4.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                      </div>
                      <div id="marcopolo-more" data-display="grid" style="display:none;grid-template-columns:repeat(5,1fr);gap:8px;">
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_5.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_6.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_7.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_8.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_9.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_10.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_11.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_12.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                        <div style="overflow:hidden;border:1px solid var(--border);aspect-ratio:4/3;"><img src="images/marco_polo_13.jpg" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
                      </div>
                      <button onclick="lbToggle('marcopolo-more',this)" data-label="＋ 9 more photos" style="background:none;border:1px solid var(--border);color:var(--mid);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px;cursor:pointer;font-family:'Jost',sans-serif;width:100%;transition:all 0.2s;" onmouseover="this.style.borderColor='var(--gold)';this.style.color='var(--gold)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--mid)'">＋ 9 more photos</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <!-- ── OFF PLAN TOWERS ── -->
          <div style="padding:28px 36px 0;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;">
              <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);">Off Plan Towers</div>
              <div style="height:1px;flex:1;background:var(--border);"></div>
              <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);">Under Construction</div>
            </div>
            <div class="m1" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">

              <!-- Aladdin — off plan but same design as Hercules/Cleopatra -->
              <div style="background:#111;color:#fff;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;border-bottom:1px solid rgba(255,255,255,0.06);">
                  <img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;">
                  <div style="position:absolute;top:10px;left:10px;background:#c0392b;color:#fff;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:2px;font-family:'Jost',sans-serif;box-shadow:0 2px 8px rgba(0,0,0,0.5);">🏗 Under Construction</div>
                  <div style="position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.75));padding:8px 12px;font-size:9px;color:rgba(255,255,255,0.6);">Same design &amp; finishes as Hercules &amp; Cleopatra</div>
                </div>
                <div style="padding:16px 18px 14px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;margin-bottom:3px;">Aladdin</div>
                  <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);margin-bottom:10px;">Off Plan · Same Design as Hercules</div>
                  <div style="display:flex;flex-direction:column;gap:4px;margin-bottom:12px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:4px;"><span style="color:rgba(255,255,255,0.5);">Studio</span><span style="color:rgba(255,255,255,0.7);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:4px;"><span style="color:rgba(255,255,255,0.5);">1 Bedroom</span><span style="color:rgba(255,255,255,0.7);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:4px;"><span style="color:rgba(255,255,255,0.5);">2 Bedroom</span><span style="color:rgba(255,255,255,0.7);">1,450 – 1,550 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.5);">3 Bedroom</span><span style="color:rgba(255,255,255,0.7);">from 1,800 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Aladdin%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener"
                     style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.7);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.3);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Caesar -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;"><img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"><div style="position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:'Jost',sans-serif;">🏗 Under Construction</div></div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Caesar</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Caesar%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Sinbad -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;">
                  <img src="images/marco_polo_sinbad.webp" alt="Sinbad Tower" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;">
                  <div style="position:absolute;top:10px;left:10px;background:#c0392b;color:#fff;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:2px;font-family:'Jost',sans-serif;box-shadow:0 2px 8px rgba(0,0,0,0.5);">🏗 Under Construction</div>
                </div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Sinbad</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Sinbad%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Ali Baba -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;"><img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"><div style="position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:'Jost',sans-serif;">🏗 Under Construction</div></div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Ali Baba</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Ali%20Baba%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Napoleon -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;"><img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"><div style="position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:'Jost',sans-serif;">🏗 Under Construction</div></div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Napoleon</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Napoleon%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Cinderella -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;"><img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"><div style="position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:'Jost',sans-serif;">🏗 Under Construction</div></div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Cinderella</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Cinderella%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Rapunzel -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;"><img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"><div style="position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:'Jost',sans-serif;">🏗 Under Construction</div></div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Rapunzel</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Rapunzel%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Queen Sheba -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;"><img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"><div style="position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:'Jost',sans-serif;">🏗 Under Construction</div></div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Queen Sheba</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Queen%20Sheba%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

              <!-- Shakespeare -->
              <div style="background:#111;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,0.06);">
                <div style="aspect-ratio:16/7;overflow:hidden;position:relative;"><img src="images/under_construction.jpg" alt="Under Construction" style="width:100%;height:100%;object-fit:cover;object-position:center;display:block;"><div style="position:absolute;top:8px;left:8px;background:#c0392b;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:'Jost',sans-serif;">🏗 Under Construction</div></div>
                <div style="padding:14px 16px 13px;">
                  <div style="font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;margin-bottom:2px;">Shakespeare</div>
                  <div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.5);margin-bottom:9px;">Off Plan · Under Construction</div>
                  <div style="display:flex;flex-direction:column;gap:3px;margin-bottom:11px;">
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">Studio</span><span style="color:rgba(255,255,255,0.6);">450 – 850 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;border-bottom:1px solid rgba(255,255,255,0.06);padding-bottom:3px;"><span style="color:rgba(255,255,255,0.4);">1 Bedroom</span><span style="color:rgba(255,255,255,0.6);">up to 1,200 sq ft</span></div>
                    <div style="display:flex;justify-content:space-between;font-size:10px;"><span style="color:rgba(255,255,255,0.4);">2 Bedroom</span><span style="color:rgba(255,255,255,0.6);">1,450 – 1,550 sq ft</span></div>
                  </div>
                  <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Shakespeare%20Tower%2C%20Living%20Legends." target="_blank" rel="noopener" style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(176,148,100,0.6);text-decoration:none;border-bottom:1px solid rgba(176,148,100,0.25);padding-bottom:2px;">Enquire →</a>
                </div>
              </div>

            </div>
          </div>

          <!-- Bottom CTA -->
          <div style="padding:32px 36px 36px;margin-top:32px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;">
            <div>
              <div style="font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--dark);margin-bottom:4px;">Looking for a specific tower or unit?</div>
              <div style="font-size:12px;color:var(--mid);">We have active listings across all towers. Speak to us for current availability and pricing.</div>
            </div>
            <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Living%20Legends%20apartments." target="_blank" rel="noopener"
               style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 24px;display:inline-block;text-decoration:none;white-space:nowrap;">
              WhatsApp Us
            </a>
          </div>

        </div>

        <!-- ENQUIRE -->
        <div id="llpanel-enquire" style="padding:32px 36px;display:none;">
          <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;">
            <div>
              <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Get in Touch</div>
              <p style="font-size:13px;color:var(--mid);line-height:1.9;margin-bottom:24px;">
                Our team has unmatched knowledge of every villa in Living Legends. Whether you're buying, selling or investing — speak to us directly for an honest, expert opinion.
              </p>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Living%20Legends." target="_blank" rel="noopener"
                   style="background:#25D366;color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;max-width:260px;">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                  WhatsApp Mohamed Husnain
                </a>
                <a href="tel:+971507788073"
                   style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;max-width:260px;">
                  Call +971 50 778 8073
                </a>
              </div>
            </div>
            <div style="background:var(--soft);border:1px solid var(--border);padding:24px;">
              <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">Quick Price Guide</div>
              <div style="display:flex;flex-direction:column;gap:0;">
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px;">
                  <span style="color:var(--dark);">Type A — 6 Bed (Renovated)</span>
                  <span style="color:var(--gold);font-weight:500;">AED 10M – 16M</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px;">
                  <span style="color:var(--dark);">Type B — 6 Bed</span>
                  <span style="color:var(--gold);font-weight:500;">AED 7M – 7.5M</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:12px;">
                  <span style="color:var(--dark);">Type C — 5 Bed (Renovated)</span>
                  <span style="color:var(--gold);font-weight:500;">AED 5.7M – 7.8M</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;font-size:12px;">
                  <span style="color:var(--dark);">Type D — 4 Bed</span>
                  <span style="color:var(--gold);font-weight:500;">AED 5M – 5.5M</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- MASTER PLAN -->
        <div id="llpanel-masterplan" style="display:none;padding:0;">
          <div style="padding:20px 24px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">
            <div>
              <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Living Legends · Dubailand</div>
              <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Community Master Plan</div>
            </div>
            <a href="images/masterplan_preview.jpg" download="Living-Legends-Masterplan.jpg"
               style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:10px 18px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px;">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Download
            </a>
          </div>
          <!-- Static masterplan image -->
          <img src="images/masterplan_preview.jpg"
               alt="Living Legends Community Master Plan — Dubailand, Dubai"
               style="display:block;width:100%;height:auto;border-top:1px solid var(--border);"
               draggable="false">
          <div style="padding:10px 24px;background:var(--soft);border-top:1px solid var(--border);">
            <div style="font-size:11px;color:var(--mid);">Villa clusters, roads and amenities are indicative. Contact our team for plot availability.</div>
          </div>
        </div>

      </div><!-- end tab panels -->

      <!-- Living Legends JS -->
      <script>
      (function(){
        var tabs = ['overview','villas','apartments','masterplan','enquire'];
        window.llTowerToggle = function(id){
          var panel = document.getElementById(id+'-panel');
          var arrow = document.getElementById(id+'-arrow');
          if(!panel) return;
          var open = panel.style.display !== 'none';
          panel.style.display = open ? 'none' : 'block';
          if(arrow) arrow.style.transform = open ? 'rotate(0deg)' : 'rotate(180deg)';
        };
        window.llTab = function(name){
          tabs.forEach(function(t){
            document.getElementById('llpanel-'+t).style.display = t===name ? 'block' : 'none';
            var btn = document.getElementById('lltab-'+t);
            btn.style.borderBottomColor = t===name ? 'var(--gold)' : 'transparent';
            btn.style.background        = t===name ? 'var(--white)' : 'transparent';
            btn.style.color             = t===name ? 'var(--dark)'  : 'var(--mid)';
          });
          // When switching to villas, ensure Type A is shown
          if(name==='villas') llVilla('A');
        };
        var vtypes = ['A','B','C','D'];
        window.llVilla = function(type){
          vtypes.forEach(function(v){
            document.getElementById('llvp-'+v).style.display = v===type ? 'block' : 'none';
            var btn = document.getElementById('llv-'+v);
            btn.style.borderBottomColor = v===type ? 'var(--gold)' : 'transparent';
            btn.style.background        = v===type ? 'var(--white)' : 'transparent';
            btn.style.color             = v===type ? 'var(--dark)'  : 'var(--mid)';
            btn.style.fontWeight        = v===type ? '600' : '500';
          });
        };
      })();
      </script>

    </div>
  </section>

  <!-- ═══ FEATURED LISTINGS ════════════════════════════════════ -->
  <section id="listings" class="section section-alt">
    <div class="section-inner" style="text-align:center;">

      <!-- Header -->
      <div class="eyebrow" style="justify-content:center;">Active Properties</div>
      <h2 class="section-title">Browse Our Properties</h2>
      <p style="font-size:17px;color:var(--mid);max-width:560px;margin:0 auto 48px;line-height:1.8;">Explore our full portfolio of villas, apartments and townhouses in Living Legends and across Dubai — always live and up to date on Bayut and Property Finder.</p>

      <!-- CTA Buttons with logos -->
      <div style="display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;">

        <!-- Property Finder button -->
        <a href="https://www.propertyfinder.ae/en/agent/mohamed-husnain-suleman-209013" target="_blank" rel="noopener"
           style="display:flex;align-items:center;gap:16px;background:#fff;color:var(--dark);padding:20px 36px;text-decoration:none;border:2px solid var(--border);transition:border-color 0.2s;min-width:280px;justify-content:center;"
           onmouseover="this.style.borderColor='#EF5E4E'" onmouseout="this.style.borderColor='var(--border)'">
          <img src="images/propertyfinder-logo.svg" alt="Property Finder" style="height:28px;width:auto;display:block;">
          <span style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);border-left:1px solid var(--border);padding-left:16px;white-space:nowrap;">View Listings &rarr;</span>
        </a>

        <!-- Bayut button -->
        <a href="https://www.bayut.com/brokers/husnain-suleman-690093.html" target="_blank" rel="noopener"
           style="display:flex;align-items:center;gap:16px;background:#fff;color:var(--dark);padding:20px 36px;text-decoration:none;border:2px solid var(--border);transition:border-color 0.2s;min-width:280px;justify-content:center;"
           onmouseover="this.style.borderColor='#2ea44f'" onmouseout="this.style.borderColor='var(--border)'">
          <img src="images/bayut-logo.jpg" alt="Bayut" style="height:44px;width:44px;object-fit:contain;display:block;">
          <span style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);border-left:1px solid var(--border);padding-left:16px;white-space:nowrap;">View Listings &rarr;</span>
        </a>

      </div>

      <!-- Trust badge -->
      <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:56px;">
        <div style="background:var(--white);border:1px solid var(--border);padding:14px 28px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);">✓ Bayut Verified Agent</div>
        <div style="background:var(--white);border:1px solid var(--border);padding:14px 28px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);">✓ Property Finder Listed</div>
        <div style="background:var(--white);border:1px solid var(--border);padding:14px 28px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);">✓ RERA Licensed Broker</div>
      </div>

    </div>

    <!-- Stats bar — full width dark -->
    <div style="background:var(--dark);padding:44px 40px;">
      <div class="m2" style="display:grid;grid-template-columns:repeat(4,1fr);max-width:900px;margin:0 auto;gap:0;">
        <div style="text-align:center;border-right:1px solid rgba(255,255,255,0.08);padding:0 20px;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--gold);">94+</div>
          <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:6px;">Active Listings</div>
        </div>
        <div style="text-align:center;border-right:1px solid rgba(255,255,255,0.08);padding:0 20px;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--gold);">For Sale</div>
          <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:6px;">Villas &amp; Apartments</div>
        </div>
        <div style="text-align:center;border-right:1px solid rgba(255,255,255,0.08);padding:0 20px;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--gold);">For Rent</div>
          <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:6px;">Villas &amp; Apartments</div>
        </div>
        <div style="text-align:center;padding:0 20px;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--gold);">Off-Plan</div>
          <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:6px;">New Developments</div>
        </div>
      </div>
    </div>

  </section>

  <!-- ═══ COMMUNITIES ═══════════════════════════════════════════ -->
  <section id="communities" class="section section-alt">
    <div class="section-inner">
      <div class="eyebrow">Where We Operate</div>
      <h2 class="section-title">Our Featured Communities</h2>
      <div class="comm-grid">

        <!-- ═══ THE WILDS — Full-Width Interactive Card ═══ -->
        <div class="comm-card wilds-card" id="wildsCard" style="grid-column:1/-1;overflow:visible;border:none;background:transparent;box-shadow:none;transform:none;">

          <!-- Image Slider -->
          <div style="position:relative;width:100vw;left:50%;transform:translateX(-50%);height:480px;overflow:hidden;border:1px solid var(--border);background:#1c1c1a;">
            <div id="wildsSlider" style="display:flex;height:100%;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);">
              <img src="images/wilds/wilds_2.webp" alt="The Wilds" style="min-width:100%;height:100%;object-fit:cover;flex-shrink:0;">
              <img src="images/wilds/wilds_3.webp" alt="The Wilds" style="min-width:100%;height:100%;object-fit:cover;flex-shrink:0;">
              <img src="images/wilds/wilds_4.webp" alt="The Wilds" style="min-width:100%;height:100%;object-fit:cover;flex-shrink:0;">
              <img src="images/wilds/wilds_5.webp" alt="The Wilds" style="min-width:100%;height:100%;object-fit:cover;flex-shrink:0;">
            </div>

            <!-- Overlay gradient + logo + tagline -->
            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,0.75) 0%,rgba(10,8,6,0.35) 45%,transparent 100%);pointer-events:none;"></div>
            <div style="position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px 40px;">
              <div style="margin-bottom:14px;line-height:1;">
                <div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-bottom:2px;">THE</div>
                <div style="font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:300;color:#fff;letter-spacing:3px;text-transform:uppercase;">WILDS</div>
              </div>
              <div style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Let Nature Nurture</div>
              <div style="font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;color:#fff;line-height:1.3;margin-bottom:6px;">A 400,000 sqm Living Ecosystem</div>
              <div style="font-size:12px;color:rgba(255,255,255,0.75);line-height:1.6;">By Aldar Properties · Dubailand, Dubai</div>
            </div>

            <!-- Slider controls -->
            <button onclick="wildsSlide(-1)" aria-label="Previous" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.2);color:#fff;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;border-radius:2px;transition:background 0.2s;">&#8249;</button>
            <button onclick="wildsSlide(1)"  aria-label="Next"     style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.2);color:#fff;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;border-radius:2px;transition:background 0.2s;">&#8250;</button>

            <!-- Slide dots -->
            <div id="wildsDots" style="position:absolute;bottom:14px;right:20px;display:flex;gap:6px;">
              <span class="wd" style="width:6px;height:6px;border-radius:50%;background:#fff;opacity:1;cursor:pointer;" onclick="wildsGoTo(0)"></span>
              <span class="wd" style="width:6px;height:6px;border-radius:50%;background:#fff;opacity:0.35;cursor:pointer;" onclick="wildsGoTo(1)"></span>
              <span class="wd" style="width:6px;height:6px;border-radius:50%;background:#fff;opacity:0.35;cursor:pointer;" onclick="wildsGoTo(2)"></span>
              <span class="wd" style="width:6px;height:6px;border-radius:50%;background:#fff;opacity:0.35;cursor:pointer;" onclick="wildsGoTo(3)"></span>
            </div>
          </div>

          <!-- Stats bar -->
          <div class="m2" style="display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-top:none;background:var(--white);">
            <div style="padding:18px 20px;text-align:center;border-right:1px solid var(--border);">
              <div style="font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);">3–6 Bed</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Villas &amp; Mansions</div>
            </div>
            <div style="padding:18px 20px;text-align:center;border-right:1px solid var(--border);">
              <div style="font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);">400K sqm</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Living Ecosystem</div>
            </div>
            <div style="padding:18px 20px;text-align:center;border-right:1px solid var(--border);">
              <div style="font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);">Q2 2029</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Handover</div>
            </div>
            <div style="padding:18px 20px;text-align:center;">
              <div style="font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold);">LEED</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Platinum Certified</div>
            </div>
          </div>

          <!-- Tab nav -->
          <div class="mob-tabs" style="display:flex;border:1px solid var(--border);border-top:none;background:var(--soft);">
            <button onclick="wildsTab('overview')" id="wtab-overview"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid var(--gold);background:var(--white);color:var(--dark);cursor:pointer;font-weight:500;">
              Overview
            </button>
            <button onclick="wildsTab('amenities')" id="wtab-amenities"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">
              Amenities
            </button>
            <button onclick="wildsTab('location')" id="wtab-location"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">
              Location
            </button>
            <button onclick="wildsTab('downloads')" id="wtab-downloads"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">
              Downloads
            </button>
          </div>

          <!-- Tab panels -->
          <div style="border:1px solid var(--border);border-top:none;background:var(--white);">

            <!-- OVERVIEW -->
            <div id="wpanel-overview" style="padding:28px 32px;display:block;">
              <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;">
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About The Community</div>
                  <p style="font-size:13px;color:var(--mid);line-height:1.8;margin-bottom:16px;">Homes where your front door opens onto a 400,000 sqm living ecosystem. Designed in harmony with Mother Nature, with amenities thoughtfully integrated into the landscape — making The Wilds the UAE's first truly nature-immersed LEED Platinum community.</p>
                  <p style="font-size:13px;color:var(--mid);line-height:1.8;">Cassia Villas offer 3, 4 &amp; 5-bedroom homes with lush greenery, nature trails and wildlife habitats. The Cassia Mansions introduce grand 6-bedroom residences with signature architecture. And The Wilds Residences bring 1–3 bedroom homes and duplexes directly into the heart of this living ecosystem.</p>
                </div>
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">Home Types</div>
                  <div style="display:flex;flex-direction:column;gap:10px;">
                    <div style="padding:12px 16px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);">
                      <strong>Cassia Villas</strong><br><span style="color:var(--mid);">3, 4 &amp; 5-bedroom — from AED 5.1M</span>
                    </div>
                    <div style="padding:12px 16px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);">
                      <strong>Cassia Mansions</strong><br><span style="color:var(--mid);">6-bedroom signature mansions</span>
                    </div>
                    <div style="padding:12px 16px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);">
                      <strong>Wilds Residences</strong><br><span style="color:var(--mid);">1, 2 &amp; 3-bedroom + duplexes</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style="margin-top:22px;padding-top:20px;border-top:1px solid var(--border);display:flex;gap:12px;flex-wrap:wrap;">
                <a href="https://world.aldar.com/uae/dubai/wilds" target="_blank" rel="noopener"
                   style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:11px 20px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:background 0.2s;">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4M8 12h8"/></svg>
                  3D Tour — Full Community
                </a>
                <a href="https://world.aldar.com/uae/dubai/thewildsresidences" target="_blank" rel="noopener"
                   style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:11px 20px;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:background 0.2s;">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4M8 12h8"/></svg>
                  3D Tour — Residences (Apartments)
                </a>
              </div>
            </div>

            <!-- AMENITIES -->
            <div id="wpanel-amenities" style="padding:28px 32px;display:none;">
              <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;">60,000 sqm Reserved for Experiences</div>
              <div class="m1" style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🌿</span>
                  <span>Nature Trails &amp; Wildlife Habitats</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🏛️</span>
                  <span>The Nest Signature Pavilion</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🏊</span>
                  <span>Pools &amp; Wellness Facilities</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🌳</span>
                  <span>400,000 sqm Central Park Ecosystem</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🚴</span>
                  <span>Cycling &amp; Jogging Tracks</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">⭐</span>
                  <span>LEED Platinum Sustainability</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🛍️</span>
                  <span>Retail &amp; F&amp;B Outlets</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🏫</span>
                  <span>Schools &amp; Community Facilities</span>
                </div>
                <div style="padding:14px 16px;background:var(--soft);font-size:12px;color:var(--dark);display:flex;align-items:flex-start;gap:10px;">
                  <span style="color:var(--gold);font-size:16px;line-height:1;">🔒</span>
                  <span>24/7 Gated Security</span>
                </div>
              </div>
            </div>

            <!-- LOCATION -->
            <div id="wpanel-location" style="padding:28px 32px;display:none;">
              <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:28px;">
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">Travel Times</div>
                  <div style="display:flex;flex-direction:column;gap:0;">
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;">
                      <span style="color:var(--dark);">Dubai International Airport</span>
                      <span style="color:var(--gold);font-weight:500;letter-spacing:1px;">25 min</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;">
                      <span style="color:var(--dark);">Dubai Mall</span>
                      <span style="color:var(--gold);font-weight:500;letter-spacing:1px;">25 min</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;">
                      <span style="color:var(--dark);">Global Village</span>
                      <span style="color:var(--gold);font-weight:500;letter-spacing:1px;">15 min</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;">
                      <span style="color:var(--dark);">IMG Worlds of Adventure</span>
                      <span style="color:var(--gold);font-weight:500;letter-spacing:1px;">12 min</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:12px;">
                      <span style="color:var(--dark);">Cityland Mall</span>
                      <span style="color:var(--gold);font-weight:500;letter-spacing:1px;">12 min</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:12px;">
                      <span style="color:var(--dark);">Dubai Outlet Mall</span>
                      <span style="color:var(--gold);font-weight:500;letter-spacing:1px;">15 min</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">Neighbourhood</div>
                  <div style="font-size:12px;color:var(--mid);line-height:1.8;margin-bottom:16px;">Located in the heart of Dubailand, south of Dubai. Adjacent to Majan Development and the prestigious Al Barari Community — one of Dubai's most established nature-rich neighbourhoods.</div>
                  <div style="font-size:12px;color:var(--mid);line-height:1.8;">The Wilds sits within a growing corridor of master-planned communities, with easy access to Emirates Road (E611) and Mohammed Bin Zayed Road (E311).</div>
                </div>
              </div>
            </div>

            <!-- DOWNLOADS -->
            <div id="wpanel-downloads" style="padding:28px 32px;display:none;">
              <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;">Project Documents</div>
              <div style="display:flex;flex-wrap:wrap;gap:10px;">
                <a href="brochures/TheWilds_Factsheet.pdf" download class="comm-dl-btn">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                  The Wilds Factsheet
                </a>
                <a href="brochures/CassiaVillas_Factsheet.pdf" download class="comm-dl-btn">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                  Cassia Villas Factsheet
                </a>
                <a href="brochures/Cassia_Floorplans.pdf" download class="comm-dl-btn">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                  Cassia Floorplans
                </a>
                <a href="brochures/TheWilds.pdf" download class="comm-dl-btn">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                  Full Brochure
                </a>
              </div>
              <div style="margin-top:20px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;color:var(--mid);">
                Want to enquire about The Wilds? &nbsp;
                <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20The%20Wilds%20by%20Aldar." target="_blank" rel="noopener"
                   style="color:var(--gold);font-weight:500;text-decoration:none;">WhatsApp us directly →</a>
              </div>
            </div>

          </div><!-- end tab panels -->

          <!-- Wilds JS: slider + tabs -->
          <script>
          (function(){
            var cur = 0, total = 4;
            var slider = document.getElementById('wildsSlider');
            var dots   = document.querySelectorAll('#wildsDots .wd');

            function goTo(n){
              cur = (n + total) % total;
              slider.style.transform = 'translateX(-' + (cur * 100) + '%)';
              dots.forEach(function(d,i){ d.style.opacity = i===cur ? '1' : '0.35'; });
            }
            window.wildsSlide = function(dir){ goTo(cur + dir); };
            window.wildsGoTo  = goTo;

            // Auto-advance every 5s
            var timer = setInterval(function(){ goTo(cur+1); }, 5000);
            slider.parentElement.addEventListener('mouseenter',function(){ clearInterval(timer); });
            slider.parentElement.addEventListener('mouseleave',function(){ timer = setInterval(function(){ goTo(cur+1); }, 5000); });

            // Tabs
            var panels = ['overview','amenities','location','downloads'];
            window.wildsTab = function(name){
              panels.forEach(function(p){
                document.getElementById('wpanel-'+p).style.display = p===name ? 'block' : 'none';
                var btn = document.getElementById('wtab-'+p);
                btn.style.borderBottomColor = p===name ? 'var(--gold)' : 'transparent';
                btn.style.background        = p===name ? 'var(--white)' : 'transparent';
                btn.style.color             = p===name ? 'var(--dark)'  : 'var(--mid)';
              });
            };
          })();
          </script>

        </div>
        <!-- ═══ end The Wilds ═══ -->

        <div class="comm-card">
          <div class="comm-img">
            <img src="images/falcon/6895b8d1a05eee2fce71e308_Falcon_City_banner_2.avif"
                 alt="Falcon City of Wonders, Dubai">
          </div>
          <div class="comm-body">
            <h3 class="comm-h3">Falcon City of Wonders</h3>
            <p class="comm-p">A magnificent master-planned development drawing inspiration from the world's most iconic landmarks. A community that blends unique architectural wonder with everyday luxury living.</p>
          </div>
        </div>

        <div class="comm-card">
          <div class="comm-img">
            <img src="images/villa/682d7d97e2d5f03ddb848b47_dhcm_banner_the_villa_1920x930_01.avif"
                 alt="The Villa, Dubai">
          </div>
          <div class="comm-body">
            <h3 class="comm-h3">The Villa</h3>
            <p class="comm-p">Spacious family villas with generous plot sizes, elegant streetscapes and a distinguished suburban lifestyle. The Villa offers a peaceful haven with everything a growing family could need.</p>
          </div>
        </div>

        <!-- ═══ MASAAR — Full-Width Interactive Card ═══ -->
        <div class="comm-card" id="masaarCard" style="grid-column:1/-1;overflow:visible;border:none;background:transparent;box-shadow:none;transform:none;">

          <!-- Hero image -->
          <div style="position:relative;width:100%;height:400px;overflow:hidden;border:1px solid var(--border);">
            <img src="images/masaar/masaar-4.jpg"
                 alt="Masaar, Sharjah"
                 style="width:100%;height:100%;object-fit:cover;object-position:center;"
                 onerror="this.src='images/masaar/masaar-3.jpg';this.onerror=null;">
            <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(10,14,10,0.75) 0%,rgba(10,14,10,0.20) 65%,transparent 100%);pointer-events:none;"></div>
            <div style="position:absolute;top:0;left:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;padding:34px 38px;max-width:460px;">
              <div style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Arada · Sharjah</div>
              <div style="font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:#fff;line-height:1.15;margin-bottom:6px;">Masaar</div>
              <div style="font-size:12px;color:rgba(255,255,255,0.75);line-height:1.6;">A forested wellness community enveloped by 50,000+ trees · Sharjah, UAE</div>
            </div>
          </div>

          <!-- Stats bar -->
          <div class="m2" style="display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-top:none;background:var(--white);">
            <div style="padding:16px 18px;text-align:center;border-right:1px solid var(--border);">
              <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);">6 Clusters</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Sendian · Kaya · Robinia · Azalea · Sequoia · Saro</div>
            </div>
            <div style="padding:16px 18px;text-align:center;border-right:1px solid var(--border);">
              <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);">2–6 Bed</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Villas &amp; Townhouses</div>
            </div>
            <div style="padding:16px 18px;text-align:center;border-right:1px solid var(--border);">
              <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);">50,000+</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Trees &amp; Green Trails</div>
            </div>
            <div style="padding:16px 18px;text-align:center;">
              <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold);">Sharjah</div>
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:3px;">Wellness Community</div>
            </div>
          </div>

          <!-- Tab nav -->
          <div class="mob-tabs" style="display:flex;border:1px solid var(--border);border-top:none;background:var(--soft);">
            <button onclick="msTab('overview')" id="mstab-overview"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid var(--gold);background:var(--white);color:var(--dark);cursor:pointer;font-weight:500;">Overview</button>
            <button onclick="msTab('clusters')" id="mstab-clusters"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">Clusters</button>
            <button onclick="msTab('masterplan')" id="mstab-masterplan"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">Master Plan</button>
            <button onclick="msTab('enquire')" id="mstab-enquire"
              style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;">Enquire</button>
          </div>

          <!-- Tab panels -->
          <div style="border:1px solid var(--border);border-top:none;background:var(--white);">

            <!-- OVERVIEW -->
            <div id="mspanel-overview" style="padding:28px 32px;display:block;">
              <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;">
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About The Community</div>
                  <p style="font-size:13px;color:var(--mid);line-height:1.8;margin-bottom:14px;">Masaar is Sharjah's most ambitious wellness community — a forested sanctuary where over 50,000 trees line every street, trail and park. Developed by Arada, the community is structured across six distinctive clusters, each with its own character, property types and landscaped surroundings.</p>
                  <p style="font-size:13px;color:var(--mid);line-height:1.8;">From entry-level townhouses in Sendian to the signature Sequoia villas, Masaar offers a rare combination of natural living, competitive pricing and strong rental demand — all within easy reach of Dubai via Emirates Road.</p>
                </div>
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">The 6 Clusters</div>
                  <div style="display:flex;flex-direction:column;gap:8px;">
                    <div style="padding:10px 14px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);display:flex;justify-content:space-between;align-items:center;">
                      <strong>Sendian</strong><span style="color:var(--mid);font-size:11px;">Villas &amp; Townhouses</span>
                    </div>
                    <div style="padding:10px 14px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);display:flex;justify-content:space-between;align-items:center;">
                      <strong>Kaya</strong><span style="color:var(--mid);font-size:11px;">Villas &amp; Townhouses</span>
                    </div>
                    <div style="padding:10px 14px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);display:flex;justify-content:space-between;align-items:center;">
                      <strong>Robinia</strong><span style="color:var(--mid);font-size:11px;">Villas &amp; Townhouses</span>
                    </div>
                    <div style="padding:10px 14px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);display:flex;justify-content:space-between;align-items:center;">
                      <strong>Azalea</strong><span style="color:var(--mid);font-size:11px;">Villas &amp; Townhouses</span>
                    </div>
                    <div style="padding:10px 14px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);display:flex;justify-content:space-between;align-items:center;">
                      <strong>Sequoia</strong><span style="color:var(--mid);font-size:11px;">Villas &amp; Townhouses</span>
                    </div>
                    <div style="padding:10px 14px;background:var(--soft);border-left:3px solid var(--gold);font-size:12px;color:var(--dark);display:flex;justify-content:space-between;align-items:center;">
                      <strong>Saro</strong><span style="color:var(--mid);font-size:11px;">Villas &amp; Townhouses</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style="margin-top:22px;padding-top:18px;border-top:1px solid var(--border);">
                <a href="https://wa.me/971507788073?text=Hi%2C%20I%27m%20interested%20in%20Masaar%2C%20Sharjah"
                   target="_blank" rel="noopener"
                   style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:11px 22px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.554 4.116 1.527 5.845L0 24l6.303-1.508A11.954 11.954 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.892 0-3.67-.502-5.207-1.381l-.374-.22-3.743.895.929-3.635-.243-.386A9.956 9.956 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/></svg>
                  WhatsApp — Ask About Masaar
                </a>
              </div>
            </div>

            <!-- CLUSTERS -->
            <div id="mspanel-clusters" style="display:none;">
              <!-- Cluster sub-tabs -->
              <div style="display:flex;overflow-x:auto;border-bottom:1px solid var(--border);background:var(--soft);padding:0 16px;gap:4px;scrollbar-width:none;">
                <button onclick="msCluster('sendian')" id="msc-sendian"
                  style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 18px;border:none;border-bottom:2px solid var(--gold);background:var(--white);color:var(--dark);cursor:pointer;font-weight:600;white-space:nowrap;flex-shrink:0;">Sendian</button>
                <button onclick="msCluster('kaya')" id="msc-kaya"
                  style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 18px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;flex-shrink:0;">Kaya</button>
                <button onclick="msCluster('robinia')" id="msc-robinia"
                  style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 18px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;flex-shrink:0;">Robinia</button>
                <button onclick="msCluster('azalea')" id="msc-azalea"
                  style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 18px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;flex-shrink:0;">Azalea</button>
                <button onclick="msCluster('sequoia')" id="msc-sequoia"
                  style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 18px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;flex-shrink:0;">Sequoia</button>
                <button onclick="msCluster('saro')" id="msc-saro"
                  style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:11px 18px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--mid);cursor:pointer;font-weight:500;white-space:nowrap;flex-shrink:0;">Saro</button>
              </div>

              <!-- Cluster panels (placeholders — populated when brochures uploaded) -->

              <!-- SENDIAN -->
              <div id="mscp-sendian" style="display:block;">
                <!-- Hero image with overlay -->
                <div style="position:relative;width:100%;height:280px;overflow:hidden;background:var(--soft);">
                  <img src="images/masaar/masaar6.jpg" alt="Sendian"
                       style="width:100%;height:100%;object-fit:cover;display:block;">
                  <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(5,10,5,0.78) 0%,rgba(5,10,5,0.2) 60%,transparent 100%);pointer-events:none;"></div>
                  <div style="position:absolute;top:0;left:0;bottom:0;padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end;max-width:480px;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
                      <span style="background:#2D6A4F;color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;">Delivered</span>
                      <span style="color:rgba(255,255,255,0.6);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;">Phase 1</span>
                    </div>
                    <div style="font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:#fff;line-height:1.1;margin-bottom:6px;">Sendian</div>
                    <div style="font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:1px;">2–5 Bed · Villas & Townhouses</div>
                  </div>
                </div>

                <!-- Thumbnail gallery -->
                <div style="display:flex;gap:4px;padding:4px;background:var(--dark);">
                  <img src="images/masaar/masaar5.jpg" alt="Sendian" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar4.jpg" alt="Sendian" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar2.jpg" alt="Sendian" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar3.jpg" alt="Sendian" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
                </div>

                <!-- Content grid: about + features -->
                <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--border);">
                  <div style="padding:24px 28px;border-right:1px solid var(--border);">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About Sendian</div>
                    <p style="font-size:13px;color:var(--mid);line-height:1.85;margin:0;">At Masaar's very first community, Sendian, you'll find yourself out of the house more, spending time with your favourite people, creating moments to cherish. From two-bedroom townhouses to majestic five-bedroom Park Villas, all units come with smart home features and direct park access.</p>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Sendian%20at%20Masaar%2C%20Sharjah"
                       target="_blank" rel="noopener"
                       style="margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;text-decoration:none;">
                      Enquire About Sendian
                    </a>
                  </div>
                  <div style="padding:24px 28px;">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">Key Features</div>
                    <div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Close to entertainment and retail zone</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Direct access to parks from every home</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Easy access to 5km cycling path</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Garden access to forested green spine</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Modern design with floor-to-ceiling windows</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Smart home features as standard</div>
                  </div>
                </div>

                <!-- Property type cards -->
                <div style="padding:24px 28px;">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Property Types</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;">
                    <div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/Sendian-th2.jpg" alt="2 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">2 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">1,847 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/Sendian-th3.jpg" alt="3 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">3 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,201 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/Sendian-th4.jpg" alt="4 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,505 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/Sendian-v4.jpg" alt="4 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">3,988 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/Sendian-v5.jpg" alt="5 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">5 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">4,914 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>
                <!-- Floor Plans Section -->
                <div style="padding:24px 28px;border-top:1px solid var(--border);">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Floor Plans</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;">
                    <div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__2_bed_townhouse.jpg" alt="2 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">2 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">1,847 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__3_bed_townhouse.jpg" alt="3 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,201 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__3_bed_corner_townhouse.jpg" alt="3 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,275 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__4_bed_townhouse.jpg" alt="4 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,505 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__4_bed_corner_townhouse.jpg" alt="4 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,916 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__4_bed_semi_detached_villa.jpg" alt="4 Bed Semi-Detached Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Semi-Detached Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,046 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__4_bed_villa.jpg" alt="4 Bed Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,988 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sendian__5_bed_villa.jpg" alt="5 Bed Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,914 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>

                <!-- Sendian Cluster Master Plan -->
                <div style="border-top:1px solid var(--border);padding:24px 28px;">
                  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
                    <div>
                      <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Sendian · Phase 1</div>
                      <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Cluster Master Plan &amp; Unit Typology</div>
                    </div>
                    <a href="images/masaar/sendian_masterplan.jpg" download="Sendian-Masterplan.jpg"
                       style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                      Download
                    </a>
                  </div>
                  <img src="images/masaar/sendian_masterplan.jpg" alt="Sendian Cluster Master Plan and Unit Typology"
                       style="width:100%;height:auto;display:block;border:1px solid var(--border);">
                </div>
              </div>

              <!-- KAYA -->
              <div id="mscp-kaya" style="display:none;">
                <!-- Hero image with overlay -->
                <div style="position:relative;width:100%;height:280px;overflow:hidden;background:var(--soft);">
                  <img src="images/masaar/masaar5.jpg" alt="Kaya"
                       style="width:100%;height:100%;object-fit:cover;display:block;">
                  <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(5,10,5,0.78) 0%,rgba(5,10,5,0.2) 60%,transparent 100%);pointer-events:none;"></div>
                  <div style="position:absolute;top:0;left:0;bottom:0;padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end;max-width:480px;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
                      <span style="background:#2D6A4F;color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;">Delivered</span>
                      <span style="color:rgba(255,255,255,0.6);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;">Phase 2</span>
                    </div>
                    <div style="font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:#fff;line-height:1.1;margin-bottom:6px;">Kaya</div>
                    <div style="font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:1px;">2–5 Bed · Villas & Townhouses</div>
                  </div>
                </div>

                <!-- Thumbnail gallery -->
                <div style="display:flex;gap:4px;padding:4px;background:var(--dark);">
                  <img src="images/masaar/masaar6.jpg" alt="Kaya" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar4.jpg" alt="Kaya" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar1.jpg" alt="Kaya" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar3.jpg" alt="Kaya" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
                </div>

                <!-- Content grid: about + features -->
                <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--border);">
                  <div style="padding:24px 28px;border-right:1px solid var(--border);">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About Kaya</div>
                    <p style="font-size:13px;color:var(--mid);line-height:1.85;margin:0;">The second community in Masaar, Kaya is a place of safety, tranquility and security. Nature comes first — from trees integrated into every home to lush greenery at your back door. Designed with families in mind, Kaya offers 2 to 5-bedroom townhouses and signature villas.</p>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Kaya%20at%20Masaar%2C%20Sharjah"
                       target="_blank" rel="noopener"
                       style="margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;text-decoration:none;">
                      Enquire About Kaya
                    </a>
                  </div>
                  <div style="padding:24px 28px;">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">Key Features</div>
                    <div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Trees integrated into design of every home</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Easy access to forested green spine</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Easy access to 5km cycling path</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Modern design with floor-to-ceiling windows</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Smart home features as standard</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>European cooker, hood and washing machine included</div>
                  </div>
                </div>

                <!-- Property type cards -->
                <div style="padding:24px 28px;">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Property Types</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;">
                    <div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/kaya-th2.jpg" alt="2 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">2 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">1,884 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/kaya-th3.jpg" alt="3 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">3 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,499 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/kaya-th4.jpg" alt="4 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,565 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/kaya-v4.jpg" alt="4 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">4,003 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/kaya-v5.jpg" alt="5 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">5 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">5,482 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>
                <!-- Floor Plans Section -->
                <div style="padding:24px 28px;border-top:1px solid var(--border);">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Floor Plans</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;">
                    <div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__2_bed_townhouse.jpg" alt="2 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">2 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">1,884 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__3_bed_townhouse.jpg" alt="3 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,499 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__3_bed_corner_towhnouse_small.jpg" alt="3 Bed Corner TH (Small)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner TH (Small)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,282 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__3_bed_corner_townhouse_big.jpg" alt="3 Bed Corner TH (Large)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner TH (Large)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,601 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__4_bed_townhouse.jpg" alt="4 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,565 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__4_bed_corner_townhouse.jpg" alt="4 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,981 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__4_bed_villa_without_pool.jpg" alt="4 Bed Villa (No Pool)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa (No Pool)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,003 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__4_bed_villa_with_pool.jpg" alt="4 Bed Villa With Pool" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa With Pool</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,006 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__5_bed_villa.jpg" alt="5 Bed Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">5,482 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/kaya__5_bed_signature.jpg" alt="5 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">6,117 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>

                <!-- Kaya Cluster Master Plan -->
                <div style="border-top:1px solid var(--border);padding:24px 28px;">
                  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
                    <div>
                      <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Kaya · Phase 2</div>
                      <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Cluster Master Plan &amp; Unit Typology</div>
                    </div>
                    <a href="images/masaar/kaya_masterplan.jpg" download="Kaya-Masterplan.jpg"
                       style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                      Download
                    </a>
                  </div>
                  <img src="images/masaar/kaya_masterplan.jpg" alt="Kaya Cluster Master Plan and Unit Typology"
                       style="width:100%;height:auto;display:block;border:1px solid var(--border);">
                </div>
              </div>

              <!-- ROBINIA -->
              <div id="mscp-robinia" style="display:none;">
                <!-- Hero image with overlay -->
                <div style="position:relative;width:100%;height:280px;overflow:hidden;background:var(--soft);">
                  <img src="images/masaar/masaar4.jpg" alt="Robinia"
                       style="width:100%;height:100%;object-fit:cover;display:block;">
                  <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(5,10,5,0.78) 0%,rgba(5,10,5,0.2) 60%,transparent 100%);pointer-events:none;"></div>
                  <div style="position:absolute;top:0;left:0;bottom:0;padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end;max-width:480px;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
                      <span style="background:#2D6A4F;color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;">Delivered</span>
                      <span style="color:rgba(255,255,255,0.6);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;">Phase 3</span>
                    </div>
                    <div style="font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:#fff;line-height:1.1;margin-bottom:6px;">Robinia</div>
                    <div style="font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:1px;">2–5 Bed · Villas & Townhouses</div>
                  </div>
                </div>

                <!-- Thumbnail gallery -->
                <div style="display:flex;gap:4px;padding:4px;background:var(--dark);">
                  <img src="images/masaar/masaar6.jpg" alt="Robinia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar5.jpg" alt="Robinia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar2.jpg" alt="Robinia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar7.jpg" alt="Robinia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
                </div>

                <!-- Content grid: about + features -->
                <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--border);">
                  <div style="padding:24px 28px;border-right:1px solid var(--border);">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About Robinia</div>
                    <p style="font-size:13px;color:var(--mid);line-height:1.85;margin:0;">Robinia is a secluded paradise surrounded by lush, dense woodland. From sleek two-bedroom townhouses to premium five-bedroom villas, each home is exquisitely designed to optimise wellness and healthy living. Designed around traditional Sanskrit Vastu Shastra principles.</p>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Robinia%20at%20Masaar%2C%20Sharjah"
                       target="_blank" rel="noopener"
                       style="margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;text-decoration:none;">
                      Enquire About Robinia
                    </a>
                  </div>
                  <div style="padding:24px 28px;">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">Key Features</div>
                    <div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Surrounded by densest woodland in Masaar</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Easy access to 7km jogging track</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Trees integrated into design of every home</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Smart home features as standard</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>European cooker, hood and washing machine included</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Two covered parking spaces</div>
                  </div>
                </div>

                <!-- Property type cards -->
                <div style="padding:24px 28px;">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Property Types</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;">
                    <div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/RobiniaTH2.jpg" alt="2 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">2 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">1,962 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/RobiniaTH3.jpg" alt="3 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">3 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,591 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/RobiniaTH4.jpg" alt="4 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,655 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/RobiniaV4.jpg" alt="4 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">4,176 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/RobiniaV5.jpg" alt="5 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">5 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">5,982 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>
                <!-- Floor Plans Section -->
                <div style="padding:24px 28px;border-top:1px solid var(--border);">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Floor Plans</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;">
                    <div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__2_bed_th.jpg" alt="2 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">2 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">1,962 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__3_bed_middle_th.jpg" alt="3 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,591 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__3_bed_corner_th_small.jpg" alt="3 Bed Corner TH (Small)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner TH (Small)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,352 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__3_bed_corner_th_big.jpg" alt="3 Bed Corner TH (Large)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner TH (Large)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,691 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__4_bed_th.jpg" alt="4 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,655 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__4_bed_corner_th.jpg" alt="4 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,156 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__4_bed_villa_without_pool.jpg" alt="4 Bed Villa (No Pool)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa (No Pool)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,176 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__4_bed_villa_with_pool.jpg" alt="4 Bed Villa With Pool" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa With Pool</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,129 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__5_bed_villa.jpg" alt="5 Bed Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">5,982 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/robinia__5_bed_signature.jpg" alt="5 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">—</div>
                    </div>
                  </div>
                  </div>
                </div>

                <!-- Robinia Cluster Master Plan -->
                <div style="border-top:1px solid var(--border);padding:24px 28px;">
                  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
                    <div>
                      <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Robinia · Phase 3</div>
                      <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Cluster Master Plan &amp; Unit Typology</div>
                    </div>
                    <a href="images/masaar/robinia_masterplan.jpg" download="Robinia-Masterplan.jpg"
                       style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                      Download
                    </a>
                  </div>
                  <img src="images/masaar/robinia_masterplan.jpg" alt="Robinia Cluster Master Plan and Unit Typology"
                       style="width:100%;height:auto;display:block;border:1px solid var(--border);">
                </div>
              </div>

              <!-- AZALEA -->
              <div id="mscp-azalea" style="display:none;">
                <!-- Hero image with overlay -->
                <div style="position:relative;width:100%;height:280px;overflow:hidden;background:var(--soft);">
                  <img src="images/masaar/Azalea-at-Masaar-hero-490x220.jpg" alt="Azalea"
                       style="width:100%;height:100%;object-fit:cover;display:block;">
                  <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(5,10,5,0.78) 0%,rgba(5,10,5,0.2) 60%,transparent 100%);pointer-events:none;"></div>
                  <div style="position:absolute;top:0;left:0;bottom:0;padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end;max-width:480px;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
                      <span style="background:#B5711A;color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;">Under Construction</span>
                      <span style="color:rgba(255,255,255,0.6);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;">Phase 4</span>
                    </div>
                    <div style="font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:#fff;line-height:1.1;margin-bottom:6px;">Azalea</div>
                    <div style="font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:1px;">2–6 Bed · Villas & Townhouses</div>
                  </div>
                </div>

                <!-- Thumbnail gallery -->
                <div style="display:flex;gap:4px;padding:4px;background:var(--dark);">
                  <img src="images/masaar/masaar6.jpg" alt="Azalea" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar5.jpg" alt="Azalea" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar2.jpg" alt="Azalea" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar1.jpg" alt="Azalea" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
                </div>

                <!-- Content grid: about + features -->
                <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--border);">
                  <div style="padding:24px 28px;border-right:1px solid var(--border);">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About Azalea</div>
                    <p style="font-size:13px;color:var(--mid);line-height:1.85;margin:0;">The fourth district at Masaar, Azalea offers a premium lifestyle in one of the most popular communities in the UAE. A wide range of sizes from surprisingly spacious two-bedroom townhouses all the way up to six-bedroom signature villas. Walking distance to international school.</p>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Azalea%20at%20Masaar%2C%20Sharjah"
                       target="_blank" rel="noopener"
                       style="margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;text-decoration:none;">
                      Enquire About Azalea
                    </a>
                  </div>
                  <div style="padding:24px 28px;">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">Key Features</div>
                    <div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Walking distance to international school</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Easy access to 7km jogging track</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Trees integrated into design of every home</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Modern design with floor-to-ceiling windows</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Smart home features as standard</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>European cooker, hood and washing machine included</div>
                  </div>
                </div>

                <!-- Property type cards -->
                <div style="padding:24px 28px;">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Property Types</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;">
                    <div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/AzaleaTH2.jpg" alt="2 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">2 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">1,965 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/AzaleaTH3.jpg" alt="3 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">3 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,348 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/AzaleaTH4.jpg" alt="4 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,661 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/AzaleaV5.jpg" alt="5 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">5 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">6,560 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/AzaleaV6.jpg" alt="6 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">6 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">8,580 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>
                <!-- Floor Plans Section -->
                <div style="padding:24px 28px;border-top:1px solid var(--border);">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Floor Plans</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;">
                    <div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__2_bed_townhouse.jpg" alt="2 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">2 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">1,965 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__3_bed_townhouse.jpg" alt="3 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,348 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__3_bed_corner_townhouse.jpg" alt="3 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,349 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__4_bed_townhouse.jpg" alt="4 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,661 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__4_bed_corner_townhouse.jpg" alt="4 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,156 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__4_bed_villa_without_pool.jpg" alt="4 Bed Villa (No Pool)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa (No Pool)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,530 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__4_bed_villa_with_pool.jpg" alt="4 Bed Villa With Pool" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa With Pool</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,211 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__5_bed_signature.jpg" alt="5 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">6,560 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/azalea__6_bedroom_signature.jpg" alt="6 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">6 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">8,580 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>

                <!-- Azalea Cluster Master Plan -->
                <div style="border-top:1px solid var(--border);padding:24px 28px;">
                  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
                    <div>
                      <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Azalea · Phase 4</div>
                      <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Cluster Master Plan &amp; Unit Typology</div>
                    </div>
                    <a href="images/masaar/azalea_masterplan.jpg" download="Azalea-Masterplan.jpg"
                       style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                      Download
                    </a>
                  </div>
                  <img src="images/masaar/azalea_masterplan.jpg" alt="Azalea Cluster Master Plan and Unit Typology"
                       style="width:100%;height:auto;display:block;border:1px solid var(--border);">
                </div>
              </div>

              <!-- SEQUOIA -->
              <div id="mscp-sequoia" style="display:none;">
                <!-- Hero image with overlay -->
                <div style="position:relative;width:100%;height:280px;overflow:hidden;background:var(--soft);">
                  <img src="images/masaar/Sequoia-490x220.jpg" alt="Sequoia"
                       style="width:100%;height:100%;object-fit:cover;display:block;">
                  <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(5,10,5,0.78) 0%,rgba(5,10,5,0.2) 60%,transparent 100%);pointer-events:none;"></div>
                  <div style="position:absolute;top:0;left:0;bottom:0;padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end;max-width:480px;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
                      <span style="background:#B5711A;color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;">Under Construction</span>
                      <span style="color:rgba(255,255,255,0.6);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;">Phase 6</span>
                    </div>
                    <div style="font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:#fff;line-height:1.1;margin-bottom:6px;">Sequoia</div>
                    <div style="font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:1px;">2–6 Bed · Villas & Townhouses</div>
                  </div>
                </div>

                <!-- Thumbnail gallery -->
                <div style="display:flex;gap:4px;padding:4px;background:var(--dark);">
                  <img src="images/masaar/Sequoia-hero.jpg" alt="Sequoia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar6.jpg" alt="Sequoia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar5.jpg" alt="Sequoia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar4.jpg" alt="Sequoia" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
                </div>

                <!-- Content grid: about + features -->
                <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--border);">
                  <div style="padding:24px 28px;border-right:1px solid var(--border);">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About Sequoia</div>
                    <p style="font-size:13px;color:var(--mid);line-height:1.85;margin:0;">A peaceful enclave hidden within the woodland, Sequoia is the sixth phase at Masaar. Only a limited number of homes remain in this popular master-community. Premium townhouses and exclusive Forest Signature Villas with smart home features as standard.</p>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Sequoia%20at%20Masaar%2C%20Sharjah"
                       target="_blank" rel="noopener"
                       style="margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;text-decoration:none;">
                      Enquire About Sequoia
                    </a>
                  </div>
                  <div style="padding:24px 28px;">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">Key Features</div>
                    <div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Peaceful woodland enclave</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Walking distance to international school</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Easy access to 7km jogging track</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Trees integrated into every home</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Smart home features as standard</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>European appliances included</div>
                  </div>
                </div>

                <!-- Property type cards -->
                <div style="padding:24px 28px;">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Property Types</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;">
                    <div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/SequoiaTH-2.jpg" alt="2 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">2 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">1,965 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/SequoiaTH-3.jpg" alt="3 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">3 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,348 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/SequoiaTH-4.jpg" alt="4 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,661 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/Sequoia-hero.jpg" alt="5–6 BR Signature Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">5–6 BR Signature Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">6,684–9,235 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>
                <!-- Floor Plans Section -->
                <div style="padding:24px 28px;border-top:1px solid var(--border);">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Floor Plans</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;">
                    <div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__2_bedroom_townhouse.jpg" alt="2 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">2 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">1,965 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__3_bedroom_townhouse.jpg" alt="3 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,348 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__3_bedroom_corner_townhouse.jpg" alt="3 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,349 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__4_bedroom_townhouse.jpg" alt="4 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,661 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__4_bedroom_corner_townhouse.jpg" alt="4 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,156 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__4_bedroom_villa_without_pool.jpg" alt="4 Bed Villa (No Pool)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa (No Pool)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,540 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__4_bedroom_villa_with_pool.jpg" alt="4 Bed Villa With Pool" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa With Pool</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,402 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__5_bedroom_signature_villa.jpg" alt="5 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">6,684 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/sequoia__6_bedroom_signature_villa.jpg" alt="6 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">6 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">9,235 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>

                <!-- Sequoia Cluster Master Plan -->
                <div style="border-top:1px solid var(--border);padding:24px 28px;">
                  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
                    <div>
                      <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Sequoia · Phase 6</div>
                      <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Cluster Master Plan &amp; Unit Typology</div>
                    </div>
                    <a href="images/masaar/sequoia_masterplan.jpg" download="Sequoia-Masterplan.jpg"
                       style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                      Download
                    </a>
                  </div>
                  <img src="images/masaar/sequoia_masterplan.jpg" alt="Sequoia Cluster Master Plan and Unit Typology"
                       style="width:100%;height:auto;display:block;border:1px solid var(--border);">
                </div>
              </div>

              <!-- SARO -->
              <div id="mscp-saro" style="display:none;">
                <!-- Hero image with overlay -->
                <div style="position:relative;width:100%;height:280px;overflow:hidden;background:var(--soft);">
                  <img src="images/masaar/Saro-news-2-490x220.jpg" alt="Saro"
                       style="width:100%;height:100%;object-fit:cover;display:block;">
                  <div style="position:absolute;inset:0;background:linear-gradient(to right,rgba(5,10,5,0.78) 0%,rgba(5,10,5,0.2) 60%,transparent 100%);pointer-events:none;"></div>
                  <div style="position:absolute;top:0;left:0;bottom:0;padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-end;max-width:480px;">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
                      <span style="background:#8A3A2A;color:#fff;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;">Under Construction</span>
                      <span style="color:rgba(255,255,255,0.6);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;">Phase 7 — Final Phase</span>
                    </div>
                    <div style="font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:#fff;line-height:1.1;margin-bottom:6px;">Saro</div>
                    <div style="font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:1px;">2–6 Bed · Villas & Townhouses</div>
                  </div>
                </div>

                <!-- Thumbnail gallery -->
                <div style="display:flex;gap:4px;padding:4px;background:var(--dark);">
                  <img src="images/masaar/masaar6.jpg" alt="Saro" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar5.jpg" alt="Saro" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar4.jpg" alt="Saro" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1"><img src="images/masaar/masaar2.jpg" alt="Saro" style="width:calc(25% - 4px);aspect-ratio:16/9;object-fit:cover;cursor:pointer;transition:opacity 0.2s;" onclick="this.parentElement.previousElementSibling.src=this.src" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
                </div>

                <!-- Content grid: about + features -->
                <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--border);">
                  <div style="padding:24px 28px;border-right:1px solid var(--border);">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">About Saro</div>
                    <p style="font-size:13px;color:var(--mid);line-height:1.85;margin:0;">Saro is the seventh and final phase of Masaar — the last opportunity to own in this iconic forest community. Located on the north side of the masterplan, Saro offers premium townhouses and Forest Signature Villas. Smart home features as standard for every home.</p>
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I'm%20interested%20in%20Saro%20at%20Masaar%2C%20Sharjah"
                       target="_blank" rel="noopener"
                       style="margin-top:18px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;text-decoration:none;">
                      Enquire About Saro
                    </a>
                  </div>
                  <div style="padding:24px 28px;">
                    <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;">Key Features</div>
                    <div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Final phase — last opportunity to invest</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Walking distance to international school</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Easy access to 7km jogging track</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Trees integrated into every home</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>Smart home features as standard</div><div style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mid);padding:5px 0;border-bottom:1px solid var(--border);"><span style="color:var(--gold);flex-shrink:0;">✓</span>European appliances included</div>
                  </div>
                </div>

                <!-- Property type cards -->
                <div style="padding:24px 28px;">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Property Types</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;">
                    <div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/saro-th-2.jpg" alt="2 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">2 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">1,965 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/saro-th-3.jpg" alt="3 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">3 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,348 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/saro-th-4.jpg" alt="4 BR Townhouse" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Townhouse</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">2,661 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/saro-v4.jpg" alt="4 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">4 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">3,540 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/saro-v5.jpg" alt="5 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">5 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">6,684 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;transition:transform 0.2s,box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 24px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="position:relative;overflow:hidden;height:180px;background:var(--soft);">
                      <img src="images/masaar/saro-v6.jpg" alt="6 BR Villa" style="width:100%;height:100%;object-fit:cover;display:block;" onerror="this.style.display='none'">
                    </div>
                    <div style="padding:12px 14px;background:var(--white);">
                      <div style="font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--dark);margin-bottom:3px;">6 BR Villa</div>
                      <div style="font-size:11px;color:var(--gold);letter-spacing:1px;">9,235 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>
                <!-- Floor Plans Section -->
                <div style="padding:24px 28px;border-top:1px solid var(--border);">
                  <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Floor Plans</div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;">
                    <div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__2_bedroom_townhouse.jpg" alt="2 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">2 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">1,965 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__3_bedroom_townhouse.jpg" alt="3 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,348 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__3_bedroom_corner_townhouse.jpg" alt="3 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">3 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,349 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__4_bedroom_townhouse.jpg" alt="4 Bed Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">2,661 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__4_bedroom_corner_townhouse.jpg" alt="4 Bed Corner Townhouse" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Corner Townhouse</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,156 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__4_bed_villa_without_pool.jpg" alt="4 Bed Villa (No Pool)" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa (No Pool)</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">3,540 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__4_bed_villa_with_pool.jpg" alt="4 Bed Villa With Pool" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">4 Bed Villa With Pool</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">4,402 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__5_bedroom_signature.jpg" alt="5 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">5 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">6,684 sq.ft.</div>
                    </div>
                  </div><div style="border:1px solid var(--border);overflow:hidden;">
                    <img src="images/masaar/saro__6_bedroom_signature.jpg" alt="6 Bed Signature Villa" style="width:100%;height:160px;object-fit:cover;display:block;" onerror="this.parentElement.style.display='none'">
                    <div style="padding:10px 12px;background:var(--soft);">
                      <div style="font-size:11px;font-weight:600;color:var(--dark);">6 Bed Signature Villa</div>
                      <div style="font-size:10px;color:var(--mid);margin-top:2px;">9,235 sq.ft.</div>
                    </div>
                  </div>
                  </div>
                </div>

                <!-- Saro Cluster Master Plan -->
                <div style="border-top:1px solid var(--border);padding:24px 28px;">
                  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
                    <div>
                      <div style="font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Saro · Phase 7</div>
                      <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Cluster Master Plan &amp; Unit Typology</div>
                    </div>
                    <a href="images/masaar/saro_masterplan.jpg" download="Saro-Masterplan.jpg"
                       style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                      Download
                    </a>
                  </div>
                  <img src="images/masaar/saro_masterplan.jpg" alt="Saro Cluster Master Plan and Unit Typology"
                       style="width:100%;height:auto;display:block;border:1px solid var(--border);">
                </div>
              </div>

                        </div>

            <!-- MASTER PLAN -->
            <div id="mspanel-masterplan" style="display:none;padding:0;">
              <div style="padding:20px 28px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;">
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Masaar · Sharjah · By Arada</div>
                  <div style="font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--dark);">Community Master Plan</div>
                </div>
                <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                  <div style="font-size:11px;color:var(--mid);">Click a cluster to explore</div>
                  <a href="images/masaar/masaar_masterplan.jpg" download="Masaar-Masterplan.jpg"
                     style="font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;background:var(--dark);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Download
                  </a>
                </div>
              </div>

              <!-- Static masterplan viewer — labels fixed, no zoom/pan -->
              <div id="ms-mp-viewport" style="position:relative;width:100%;background:#e8f0e0;">
                <img id="ms-mp-img"
                     src="images/masaar/masaar_masterplan.jpg"
                     alt="Masaar Community Master Plan — Al Suyoh, Sharjah"
                     style="display:block;width:100%;height:auto;"
                     draggable="false">

                <!-- Cluster hotspot overlay — % positions match real Arada map -->
                <div style="position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;">

                  <!-- Kaya — top-left of site (map occupies left 57% of image) -->
                  <button onclick="msTab('clusters');setTimeout(function(){msCluster('kaya')},50)"
                    style="position:absolute;top:25%;left:13%;pointer-events:all;background:rgba(26,23,20,0.85);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(176,169,162,0.5);cursor:pointer;transition:all 0.2s;white-space:nowrap;backdrop-filter:blur(4px);border-radius:2px;"
                    onmouseover="this.style.background='rgba(138,130,120,1)';this.style.transform='scale(1.05)'"
                    onmouseout="this.style.background='rgba(26,23,20,0.85)';this.style.transform='scale(1)'">
                    <span style="color:#8A8278;margin-right:4px;">●</span> Kaya
                  </button>

                  <!-- Sendian — upper centre of site -->
                  <button onclick="msTab('clusters');setTimeout(function(){msCluster('sendian')},50)"
                    style="position:absolute;top:30%;left:24%;pointer-events:all;background:rgba(26,23,20,0.85);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(176,169,162,0.5);cursor:pointer;transition:all 0.2s;white-space:nowrap;backdrop-filter:blur(4px);border-radius:2px;"
                    onmouseover="this.style.background='rgba(138,130,120,1)';this.style.transform='scale(1.05)'"
                    onmouseout="this.style.background='rgba(26,23,20,0.85)';this.style.transform='scale(1)'">
                    <span style="color:#8A8278;margin-right:4px;">●</span> Sendian
                  </button>

                  <!-- Robinia — west/left side, lower than Kaya -->
                  <button onclick="msTab('clusters');setTimeout(function(){msCluster('robinia')},50)"
                    style="position:absolute;top:60%;left:8%;pointer-events:all;background:rgba(26,23,20,0.85);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(176,169,162,0.5);cursor:pointer;transition:all 0.2s;white-space:nowrap;backdrop-filter:blur(4px);border-radius:2px;"
                    onmouseover="this.style.background='rgba(138,130,120,1)';this.style.transform='scale(1.05)'"
                    onmouseout="this.style.background='rgba(26,23,20,0.85)';this.style.transform='scale(1)'">
                    <span style="color:#8A8278;margin-right:4px;">●</span> Robinia
                  </button>

                  <!-- Sequoia — center-east, right of Sendian, same level -->
                  <button onclick="msTab('clusters');setTimeout(function(){msCluster('sequoia')},50)"
                    style="position:absolute;top:33%;left:38%;pointer-events:all;background:rgba(26,23,20,0.85);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(176,169,162,0.5);cursor:pointer;transition:all 0.2s;white-space:nowrap;backdrop-filter:blur(4px);border-radius:2px;"
                    onmouseover="this.style.background='rgba(138,130,120,1)';this.style.transform='scale(1.05)'"
                    onmouseout="this.style.background='rgba(26,23,20,0.85)';this.style.transform='scale(1)'">
                    <span style="color:#8A8278;margin-right:4px;">●</span> Sequoia
                  </button>

                  <!-- Azalea — east side, below Sequoia -->
                  <button onclick="msTab('clusters');setTimeout(function(){msCluster('azalea')},50)"
                    style="position:absolute;top:50%;left:40%;pointer-events:all;background:rgba(26,23,20,0.85);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(176,169,162,0.5);cursor:pointer;transition:all 0.2s;white-space:nowrap;backdrop-filter:blur(4px);border-radius:2px;"
                    onmouseover="this.style.background='rgba(138,130,120,1)';this.style.transform='scale(1.05)'"
                    onmouseout="this.style.background='rgba(26,23,20,0.85)';this.style.transform='scale(1)'">
                    <span style="color:#8A8278;margin-right:4px;">●</span> Azalea
                  </button>

                  <!-- Saro — south-center, below Robinia & Azalea -->
                  <button onclick="msTab('clusters');setTimeout(function(){msCluster('saro')},50)"
                    style="position:absolute;top:72%;left:22%;pointer-events:all;background:rgba(26,23,20,0.85);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:1px solid rgba(176,169,162,0.5);cursor:pointer;transition:all 0.2s;white-space:nowrap;backdrop-filter:blur(4px);border-radius:2px;"
                    onmouseover="this.style.background='rgba(138,130,120,1)';this.style.transform='scale(1.05)'"
                    onmouseout="this.style.background='rgba(26,23,20,0.85)';this.style.transform='scale(1)'">
                    <span style="color:#8A8278;margin-right:4px;">●</span> Saro
                  </button>

                  <!-- Legend -->
                  <div style="position:absolute;bottom:14px;right:14px;pointer-events:none;background:rgba(26,23,20,0.78);color:rgba(255,255,255,0.75);font-family:'Jost',sans-serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;backdrop-filter:blur(4px);">
                    Masaar · Al Suyoh · Sharjah
                  </div>
                </div>
              </div>

              <!-- Map is static — no zoom/pan JS needed -->

              <div style="padding:10px 28px;background:var(--soft);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;">
                <div style="font-size:11px;color:var(--mid);">Click any cluster to explore unit types and details</div>
                <div style="font-size:11px;color:var(--mid);">Masaar by Arada · Al Suyoh, Sharjah</div>
              </div>
            </div>

            <!-- ENQUIRE -->
            <div id="mspanel-enquire" style="padding:28px 32px;display:none;">
              <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;">
                <div>
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">Talk to a Masaar Specialist</div>
                  <p style="font-size:13px;color:var(--mid);line-height:1.8;margin-bottom:20px;">Our team has direct knowledge of all six clusters — resale stock, off-plan availability and rental yields. Whether you're buying to live or invest, we'll match you with the right unit.</p>
                  <div style="display:flex;flex-direction:column;gap:10px;">
                    <a href="https://wa.me/971507788073?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20Masaar%2C%20Sharjah"
                       target="_blank" rel="noopener"
                       style="background:#25D366;color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;width:fit-content;">
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.554 4.116 1.527 5.845L0 24l6.303-1.508A11.954 11.954 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.892 0-3.67-.502-5.207-1.381l-.374-.22-3.743.895.929-3.635-.243-.386A9.956 9.956 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/></svg>
                      WhatsApp Us
                    </a>
                    <a href="tel:+971507788073"
                       style="background:var(--dark);color:#fff;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:13px 22px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;width:fit-content;">
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.63A2 2 0 012 1h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                      Call Us
                    </a>
                  </div>
                </div>
                <div style="background:var(--soft);padding:20px;border:1px solid var(--border);">
                  <div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;">Quick Cluster Guide</div>
                  <div style="display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dark);">
                    <div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);"><span>Sendian</span><span style="color:var(--mid);">Villas &amp; TH · 2–5 Bed</span></div>
                    <div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);"><span>Kaya</span><span style="color:var(--mid);">Villas &amp; TH · 2–5 Bed</span></div>
                    <div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);"><span>Robinia</span><span style="color:var(--mid);">Villas &amp; TH · 2–5 Bed</span></div>
                    <div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);"><span>Azalea</span><span style="color:var(--mid);">Villas &amp; TH · 2–6 Bed</span></div>
                    <div style="display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);"><span>Sequoia</span><span style="color:var(--mid);">Villas &amp; TH · 2–6 Bed</span></div>
                    <div style="display:flex;justify-content:space-between;padding:7px 0;"><span>Saro</span><span style="color:var(--mid);">Villas &amp; TH · 2–6 Bed</span></div>
                  </div>
                </div>
              </div>
            </div>

          </div><!-- /tab panels -->

          <script>
          (function(){
            var msTabs = ['overview','clusters','masterplan','enquire'];
            window.msTab = function(name){
              msTabs.forEach(function(t){
                document.getElementById('mspanel-'+t).style.display = t===name?'block':'none';
                var b=document.getElementById('mstab-'+t);
                b.style.borderBottomColor=t===name?'var(--gold)':'transparent';
                b.style.background=t===name?'var(--white)':'transparent';
                b.style.color=t===name?'var(--dark)':'var(--mid)';
                b.style.fontWeight=t===name?'600':'500';
              });
              if(name==='clusters') msCluster('sendian');
            };
            var msClusters=['sendian','kaya','robinia','azalea','sequoia','saro'];
            window.msCluster = function(name){
              msClusters.forEach(function(c){
                document.getElementById('mscp-'+c).style.display=c===name?'block':'none';
                var b=document.getElementById('msc-'+c);
                b.style.borderBottomColor=c===name?'var(--gold)':'transparent';
                b.style.background=c===name?'var(--white)':'transparent';
                b.style.color=c===name?'var(--dark)':'var(--mid)';
                b.style.fontWeight=c===name?'600':'500';
              });
            };
          })();
          </script>

        </div><!-- /masaarCard -->

      </div>
    </div>
  </section>

  <!-- Masaar floor plan lightbox -->
  <div id="ms-lightbox" onclick="if(event.target===this)this.style.display='none'"
       style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;flex-direction:column;align-items:center;justify-content:center;">
    <div style="position:relative;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;">
      <img id="ms-lb-img" src="" alt="" style="max-width:95vw;max-height:80vh;object-fit:contain;display:block;border:2px solid rgba(255,255,255,0.15);">
      <div style="margin-top:14px;display:flex;gap:16px;align-items:center;">
        <div id="ms-lb-label" style="color:#fff;font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:1px;"></div>
        <a id="ms-lb-dl" href="" download="" style="background:var(--gold);color:#fff;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:9px 22px;text-decoration:none;display:inline-block;">↓ Download</a>
      </div>
    </div>
    <button onclick="document.getElementById('ms-lightbox').style.display='none'"
            style="position:absolute;top:18px;right:24px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;opacity:0.7;line-height:1;">✕</button>
  </div>
  <script>
  (function(){
    // Enhance all masaar floor plan cards with download btn + lightbox
    function enhanceMasaarCards(){
      var section = document.querySelector('#ms-lightbox');
      if(!section) return;
      var cards = document.querySelectorAll('[src*="images/masaar/"]');
      cards.forEach(function(img){
        var wrapper = img.parentElement;
        if(wrapper.dataset.msEnhanced) return;
        wrapper.dataset.msEnhanced = '1';
        wrapper.style.position = 'relative';
        wrapper.style.cursor = 'pointer';
        // get label
        var labelEl = wrapper.querySelector('[style*="font-weight:600"]');
        var sizeEl = wrapper.querySelector('[style*="color:var(--mid)"]');
        var label = (labelEl ? labelEl.textContent : img.alt);
        var size = (sizeEl ? ' · ' + sizeEl.textContent : '');
        // download button
        var dlBtn = document.createElement('a');
        dlBtn.href = img.src;
        dlBtn.download = label.replace(/\s+/g,'_') + '.jpg';
        dlBtn.title = 'Download floor plan';
        dlBtn.innerHTML = '↓';
        dlBtn.style.cssText = 'position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.65);color:#fff;font-family:Jost,sans-serif;font-size:14px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;text-decoration:none;opacity:0;transition:opacity .2s;border-radius:2px;z-index:2;';
        wrapper.appendChild(dlBtn);
        // hover show button
        wrapper.addEventListener('mouseenter', function(){ dlBtn.style.opacity='1'; });
        wrapper.addEventListener('mouseleave', function(){ dlBtn.style.opacity='0'; });
        // click image → lightbox
        img.addEventListener('click', function(e){
          e.stopPropagation();
          var lb = document.getElementById('ms-lightbox');
          document.getElementById('ms-lb-img').src = img.src;
          document.getElementById('ms-lb-img').alt = label;
          document.getElementById('ms-lb-label').textContent = label + size;
          var dlA = document.getElementById('ms-lb-dl');
          dlA.href = img.src;
          dlA.download = label.replace(/\s+/g,'_') + '.jpg';
          lb.style.display = 'flex';
        });
        // prevent download btn click from triggering lightbox
        dlBtn.addEventListener('click', function(e){ e.stopPropagation(); });
      });
    }
    // Run on tab switch (cards may not exist in DOM until tab is shown)
    var origMsCluster = window.msCluster;
    window.msCluster = function(name){
      if(origMsCluster) origMsCluster(name);
      setTimeout(enhanceMasaarCards, 50);
    };
    var origMsTab = window.msTab;
    window.msTab = function(name){
      if(origMsTab) origMsTab(name);
      setTimeout(enhanceMasaarCards, 50);
      // Re-fit the masterplan viewer when its panel becomes visible
      // masterplan is now static — no reset needed
    };
    // Also run on load
    document.addEventListener('DOMContentLoaded', function(){ setTimeout(enhanceMasaarCards, 200); });
    // keyboard close
    document.addEventListener('keydown', function(e){ if(e.key==='Escape') document.getElementById('ms-lightbox').style.display='none'; });
  })();
  </script>

  <!-- ═══ FIT OUT & RENOVATIONS ═══════════════════════════════ -->
  <div id="roi-calculator"></div>
  <section id="fitout" class="section section-alt">
    <div class="section-inner">

      <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:64px;">
        <div>
          <div class="eyebrow">Fit Out &amp; Renovations</div>
          <h2 class="section-title" style="text-align:left;margin-bottom:20px;">Transform a Property.<br>Multiply Its Value.</h2>
          <p style="font-size:15px;color:var(--mid);line-height:1.85;margin-bottom:28px;">Dubai has thousands of dated, run-down properties sitting below their true market value. We identify them, acquire them, transform them — and either sell the finished asset at a profit or place a tenant at a premium rent. Whether you want to invest alongside us or hand us your own property to renovate, we manage the entire process.</p>
          <div style="display:flex;gap:14px;flex-wrap:wrap;">
            <a href="https://wa.me/971507788073?text=Hi%2C%20I%27d%20like%20to%20discuss%20a%20fit%20out%20or%20renovation%20project." target="_blank" rel="noopener"
              style="display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:#fff;text-decoration:none;padding:13px 24px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;">
              Discuss a Project
            </a>
            <a href="#fitout-calculator"
              style="display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--dark);text-decoration:none;padding:13px 24px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;">
              Calculate Your ROI →
            </a>
          </div>
        </div>

        <!-- How it works -->
        <div>
          <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:24px;">Our Process</div>
          <div style="display:flex;flex-direction:column;gap:0;">
            <div style="display:flex;gap:18px;padding-bottom:22px;">
              <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
                <div style="width:32px;height:32px;background:var(--dark);color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:16px;display:flex;align-items:center;justify-content:center;">1</div>
                <div style="width:1px;flex:1;background:var(--border);margin-top:6px;"></div>
              </div>
              <div style="padding-top:4px;">
                <div style="font-size:13px;font-weight:600;color:var(--dark);margin-bottom:4px;">Property Sourcing</div>
                <div style="font-size:13px;color:var(--mid);line-height:1.65;">We identify undervalued properties — distressed sales, dated units, probate sales — where renovation potential is highest relative to acquisition cost.</div>
              </div>
            </div>
            <div style="display:flex;gap:18px;padding-bottom:22px;">
              <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
                <div style="width:32px;height:32px;background:var(--dark);color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:16px;display:flex;align-items:center;justify-content:center;">2</div>
                <div style="width:1px;flex:1;background:var(--border);margin-top:6px;"></div>
              </div>
              <div style="padding-top:4px;">
                <div style="font-size:13px;font-weight:600;color:var(--dark);margin-bottom:4px;">Design &amp; Planning</div>
                <div style="font-size:13px;color:var(--mid);line-height:1.65;">Our fit-out team designs to market demand — not personal taste. We know exactly what finishes command premium rents or resale prices in each community.</div>
              </div>
            </div>
            <div style="display:flex;gap:18px;padding-bottom:22px;">
              <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;">
                <div style="width:32px;height:32px;background:var(--dark);color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:16px;display:flex;align-items:center;justify-content:center;">3</div>
                <div style="width:1px;flex:1;background:var(--border);margin-top:6px;"></div>
              </div>
              <div style="padding-top:4px;">
                <div style="font-size:13px;font-weight:600;color:var(--dark);margin-bottom:4px;">Full Fit Out &amp; Renovation</div>
                <div style="font-size:13px;color:var(--mid);line-height:1.65;">From kitchen and bathroom upgrades to full apartment and villa fit-outs — flooring, painting, fixtures, built-in furniture. Managed and supervised by our team end-to-end.</div>
              </div>
            </div>
            <div style="display:flex;gap:18px;">
              <div style="width:32px;height:32px;background:var(--gold);color:#fff;font-family:'Cormorant Garamond',serif;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">4</div>
              <div style="padding-top:4px;">
                <div style="font-size:13px;font-weight:600;color:var(--dark);margin-bottom:4px;">Sell or Let at Premium</div>
                <div style="font-size:13px;color:var(--mid);line-height:1.65;">Once complete, we list and sell the property at the improved value — or place a quality tenant at a significantly higher rent than the un-renovated equivalent.</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Service tiles -->
      <div class="m1" style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:48px;">

        <div style="background:var(--white);border:1px solid var(--border);padding:28px 24px;">
          <div style="width:38px;height:38px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
          </div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Apartments &amp; Villas</div>
          <div style="font-size:15px;font-weight:500;color:var(--dark);margin-bottom:10px;">Complete Fit Out</div>
          <div style="font-size:12px;color:var(--mid);line-height:1.65;">End-to-end transformation of empty or dated apartments and villas. Flooring, painting, kitchen, bathrooms, built-ins, lighting — handed over ready to rent or sell.</div>
        </div>

        <div style="background:var(--white);border:1px solid var(--border);padding:28px 24px;">
          <div style="width:38px;height:38px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
          </div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Kitchen &amp; Bath</div>
          <div style="font-size:15px;font-weight:500;color:var(--dark);margin-bottom:10px;">Targeted Upgrades</div>
          <div style="font-size:12px;color:var(--mid);line-height:1.65;">Kitchen and bathroom renovations deliver the highest ROI per dirham spent. We upgrade fixtures, tiles, worktops and cabinetry to luxury spec at trade cost.</div>
        </div>

        <div style="background:var(--white);border:1px solid var(--border);padding:28px 24px;">
          <div style="width:38px;height:38px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
          </div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Run-Down Properties</div>
          <div style="font-size:15px;font-weight:500;color:var(--dark);margin-bottom:10px;">Buy, Renovate, Sell</div>
          <div style="font-size:12px;color:var(--mid);line-height:1.65;">We source discounted properties, renovate to market-leading spec and resell at profit. Bring us your budget and we'll find and manage the entire opportunity.</div>
        </div>


      </div>

      <!-- Stats -->
      <div class="m1" style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;">
        <div style="background:var(--soft);border:1px solid var(--border);padding:28px;text-align:center;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:300;color:var(--dark);line-height:1;">15–40%</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:8px;">Typical Value Uplift After Renovation</div>
        </div>
        <div style="background:var(--dark);padding:28px;text-align:center;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:300;color:var(--gold);line-height:1;">8–12 wks</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-top:8px;">Average Project Completion</div>
        </div>
        <div style="background:var(--soft);border:1px solid var(--border);padding:28px;text-align:center;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:300;color:var(--dark);line-height:1;">End-to-End</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:8px;">Fully Managed — You Do Nothing</div>
        </div>
      </div>


      <!-- ── RENOVATION ROI CALCULATOR ── -->
      <div id="fitout-calculator"></div>
      <div style="margin-top:56px;border-top:1px solid var(--border);padding-top:56px;">
        <div style="text-align:center;margin-bottom:40px;">
          <div class="eyebrow" style="justify-content:center;">Renovation Calculator</div>
          <h3 style="font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3vw,40px);font-weight:300;color:var(--dark);margin:0 0 12px;">How Much Could Your Renovation Make?</h3>
          <p style="font-size:14px;color:var(--mid);max-width:500px;margin:0 auto;line-height:1.8;">Enter your purchase price, renovation budget and expected sale price — we'll calculate your profit, ROI and annualised return instantly.</p>
        </div>

        <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:2px;">

          <!-- Inputs -->
          <div style="background:var(--dark);padding:36px 32px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;">Your Numbers</div>
            <div style="display:flex;flex-direction:column;gap:20px;">

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Purchase Price (AED)</label>
                <input type="text" id="fo_purchase" value="800,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcFitOut()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Renovation / Fit-Out Budget (AED)</label>
                <input type="text" id="fo_reno" value="120,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcFitOut()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Expected Sale Price (AED)</label>
                <input type="text" id="fo_sale" value="1,100,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcFitOut()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Project Duration (months)</label>
                <div style="display:flex;align-items:center;gap:12px;">
                  <input type="range" id="fo_months" min="1" max="18" value="3" step="1"
                    style="flex:1;accent-color:var(--gold);" oninput="calcFitOut();document.getElementById('fo_months_val').textContent=this.value+' mths'">
                  <span id="fo_months_val" style="color:var(--gold);font-size:16px;font-family:'Cormorant Garamond',serif;min-width:54px;">3 mths</span>
                </div>
              </div>


            </div>
          </div>

          <!-- Results -->
          <div style="background:var(--soft);border:1px solid var(--border);padding:36px 32px;display:flex;flex-direction:column;justify-content:space-between;">
            <div>
              <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;">Your Projected Returns</div>

              <!-- 4 metric tiles -->
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:2px;">
                <div style="background:var(--dark);padding:20px 18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">Value Uplift</div>
                  <div id="fo_uplift" style="font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:var(--gold);">+37.5%</div>
                </div>
                <div style="background:var(--dark);padding:20px 18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">ROI on Investment</div>
                  <div id="fo_roi" style="font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:#fff;">17.4%</div>
                </div>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:24px;">
                <div style="background:var(--dark);padding:18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Net Profit</div>
                  <div id="fo_net_profit" style="font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;">AED 162,000</div>
                </div>
                <div style="background:var(--dark);padding:18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Annualised ROI</div>
                  <div id="fo_annual_roi" style="font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;">69.5% p.a.</div>
                </div>
              </div>

              <!-- Breakdown -->
              <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:24px;">
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:13px;color:var(--mid);">Total Investment (all-in)</span>
                  <span id="fo_total_inv" style="font-size:14px;color:var(--dark);font-family:'Cormorant Garamond',serif;font-weight:600;">AED 938,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:13px;color:var(--mid);">Value Added by Renovation</span>
                  <span id="fo_value_added" style="font-size:14px;color:var(--gold);font-family:'Cormorant Garamond',serif;">AED 300,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center;">
                  <span style="font-size:14px;font-weight:600;color:var(--dark);">Net Profit After All Costs</span>
                  <span id="fo_net_profit2" style="font-size:22px;color:var(--dark);font-family:'Cormorant Garamond',serif;">AED 162,000</span>
                </div>
              </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
              <button onclick="foDownloadPDF()"
                style="display:flex;align-items:center;justify-content:center;gap:8px;background:var(--dark);border:none;color:var(--gold);padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;cursor:pointer;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Download Report
              </button>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I%27ve%20used%20the%20renovation%20calculator%20and%20would%20like%20to%20discuss%20a%20fit%20out%20project." target="_blank" rel="noopener"
                style="display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--dark);text-decoration:none;padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;">
                Discuss Project
              </a>
            </div>
          </div>

        </div>
        <p style="font-size:11px;color:var(--mid);margin:12px 0 0;line-height:1.6;">* Estimates only. DLD fees 4%, agency fees 2% buy + 2% sell applied automatically. Actual costs may vary — always obtain contractor quotes.</p>
      </div>

    </div>
  </section>

  <!-- ═══ OFF-PLAN PROPERTIES ════════════════════════════════ -->
  <section id="off-plan" class="section">
    <div class="section-inner">

      <!-- Header -->
      <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:56px;">
        <div>
          <div class="eyebrow">Off-Plan Investment</div>
          <h2 class="section-title" style="text-align:left;margin-bottom:0;">Buy Before It's Built.<br>Profit Before You Move In.</h2>
        </div>
        <div>
          <p style="font-size:15px;color:var(--mid);line-height:1.85;margin:0 0 20px;">Dubai's off-plan market offers some of the most compelling investment opportunities in the world — lower entry prices, flexible developer payment plans, and the potential for significant capital appreciation between purchase and handover. We guide buyers through every step, from selecting the right project to completing the transfer.</p>
          <a href="https://wa.me/971507788073?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20off-plan%20properties%20in%20Dubai." target="_blank" rel="noopener"
            style="display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-decoration:none;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:3px;">
            Speak to an Off-Plan Specialist →
          </a>
        </div>
      </div>

      <!-- Why Off-Plan — stat strip -->
      <div class="m1" style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:56px;">
        <div style="background:var(--soft);padding:32px 28px;text-align:center;border:1px solid var(--border);">
          <div style="font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:300;color:var(--dark);line-height:1;">10–30%</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:8px;">Typical Capital Growth</div>
        </div>
        <div style="background:var(--dark);padding:32px 28px;text-align:center;">
          <div style="font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:300;color:var(--gold);line-height:1;">0%</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-top:8px;">Capital Gains Tax</div>
        </div>
        <div style="background:var(--soft);padding:32px 28px;text-align:center;border:1px solid var(--border);">
          <div style="font-family:'Cormorant Garamond',serif;font-size:42px;font-weight:300;color:var(--dark);line-height:1;">60/40</div>
          <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-top:8px;">Typical Payment Plan</div>
        </div>
      </div>

      <!-- Project cards -->
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;">
        <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--dark);">Current Off-Plan Projects</div>
        <div style="height:1px;flex:1;background:var(--border);margin:0 24px;"></div>
        <div style="font-size:11px;color:var(--mid);">More projects added regularly</div>
      </div>

      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:56px;" id="offplanGrid">

        <!-- Emaar Golf Heights -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/emaar-golf-heights.jpg" alt="Golf Heights Dubai Hills" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#1a6e35;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Off Plan</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Emaar</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Residential Tower · Dubai Hills Estate</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Golf Heights</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 1.2M</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q4 2027</div>
              </div>
            </div>
            <a href="off-plan/emaar-golf-heights.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- DAMAC Safa Two -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/damac-safa-two.jpg" alt="DAMAC Safa Two Dubai" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#b35a00;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">🏗 Under Construction</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">DAMAC</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Super Tower · Al Safa, Dubai</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Safa Two</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 950K</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q2 2027</div>
              </div>
            </div>
            <a href="off-plan/damac-safa-two.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- Binghatti Skyrise -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/binghatti-skyrise.jpg" alt="Binghatti Skyrise Business Bay" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#1a6e35;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Off Plan</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Binghatti</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Luxury Tower · Business Bay</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Skyrise</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 800K</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q1 2027</div>
              </div>
            </div>
            <a href="off-plan/binghatti-skyrise.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- Sobha Hartland II -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/sobha-hartland-ii.jpg" alt="Sobha Hartland II MBR City" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#1a6e35;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Off Plan</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Sobha</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Waterfront · MBR City, Dubai</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Hartland II</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 1.3M</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q3 2027</div>
              </div>
            </div>
            <a href="off-plan/sobha-hartland-ii.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- Nakheel Palm Jebel Ali -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/nakheel-palm-jebel-ali.jpg" alt="Palm Jebel Ali Villas" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#1a6e35;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Off Plan</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Nakheel</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Beachfront Villas · Palm Jebel Ali</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Palm Jebel Ali Villas</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 8M</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q4 2027</div>
              </div>
            </div>
            <a href="off-plan/nakheel-palm-jebel-ali.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- DAMAC Lagoons Venice -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/damac-lagoons-venice.jpg" alt="DAMAC Lagoons Venice" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#b35a00;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">🏗 Under Construction</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">DAMAC</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Villa Community · DAMAC Lagoons</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Lagoons — Venice</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 2.5M</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q2 2027</div>
              </div>
            </div>
            <a href="off-plan/damac-lagoons-venice.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- Ellington Ocean House -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/ellington-ocean-house.jpg" alt="Ellington Ocean House Palm Jumeirah" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#1a6e35;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Off Plan</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Ellington</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Ultra-Luxury · Palm Jumeirah</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Ocean House</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 5.5M</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q1 2028</div>
              </div>
            </div>
            <a href="off-plan/ellington-ocean-house.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- Emaar The Heights -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/emaar-the-heights.jpg" alt="Emaar The Heights Country Club" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#1a6e35;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Off Plan</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Emaar</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Townhouses & Villas · Dubai Hills</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">The Heights Country Club</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 3.5M</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q4 2027</div>
              </div>
            </div>
            <a href="off-plan/emaar-the-heights.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- Aldar Yas Island -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--white);">
          <div style="aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,#1a1612,#2d2520);">
            <img src="images/offplan/aldar-yas-island.jpg" alt="Aldar Yas Island Abu Dhabi" style="width:100%;height:100%;object-fit:cover;display:block;opacity:0.8;" onerror="this.style.display='none'">
            <div style="position:absolute;top:10px;left:10px;background:#1a6e35;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Off Plan</div>
            <div style="position:absolute;top:10px;right:10px;background:rgba(10,8,6,0.75);color:var(--gold);font-size:8px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-family:'Jost',sans-serif;">Aldar</div>
          </div>
          <div style="padding:22px 20px 20px;">
            <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);margin-bottom:6px;">Residential · Yas Island, Abu Dhabi</div>
            <div style="font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--dark);margin-bottom:12px;">Yas Island Residences</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;">
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">From</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">AED 900K</div>
              </div>
              <div style="background:var(--soft);padding:10px 12px;">
                <div style="font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin-bottom:3px;">Handover</div>
                <div style="font-size:14px;font-weight:500;color:var(--dark);">Q2 2027</div>
              </div>
            </div>
            <a href="off-plan/aldar-yas-island.html" style="display:block;text-align:center;background:var(--dark);color:#fff;text-decoration:none;padding:11px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;">View Project</a>
          </div>
        </div>

        <!-- Register Interest Card -->
        <div style="border:1px solid var(--border);overflow:hidden;background:var(--dark);display:flex;flex-direction:column;justify-content:center;padding:36px 32px;min-height:300px;">
          <div style="font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;">Coming Soon</div>
          <div style="font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;color:#fff;line-height:1.3;margin-bottom:16px;">More Projects<br>Added Regularly</div>
          <p style="font-size:13px;color:rgba(255,255,255,0.55);line-height:1.7;margin-bottom:28px;">Register your interest and we'll notify you first when new off-plan launches match your criteria — budget, location and unit type.</p>
          <a href="https://wa.me/971507788073?text=Hi%2C%20I%27d%20like%20to%20register%20my%20interest%20in%20off-plan%20properties%20in%20Dubai." target="_blank" rel="noopener"
            style="display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--dark);text-decoration:none;padding:13px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;font-weight:600;">
            Register Interest
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ ROI CALCULATOR ══════════════════════════════════════ -->
  <section id="roi-calc" class="section">
    <div class="section-inner">

      <!-- Header -->
      <div style="text-align:center;margin-bottom:48px;">
        <div class="eyebrow" style="justify-content:center;">Property ROI Calculator</div>
        <h2 class="section-title">Calculate Your Return on Investment</h2>
        <p style="font-size:15px;color:var(--mid);max-width:560px;margin:0 auto;line-height:1.85;">Three ways to invest in Dubai property. Enter your numbers — see your returns, yields and profit instantly.</p>
      </div>

      <!-- Tab nav -->
      <div class="mob-tabs" style="display:flex;background:var(--dark);margin-bottom:2px;">
        <button id="roi_btn_reno" onclick="roiSetMode('reno')"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:15px 28px;border:none;background:var(--gold);color:var(--dark);cursor:pointer;font-weight:600;white-space:nowrap;flex-shrink:0;transition:all 0.2s;">
          Renovation &amp; Flip
        </button>
        <button id="roi_btn_rent" onclick="roiSetMode('rent')"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:15px 28px;border:none;background:transparent;color:rgba(255,255,255,0.55);cursor:pointer;font-weight:500;white-space:nowrap;flex-shrink:0;transition:all 0.2s;">
          Buy to Rent
        </button>
        <button id="roi_btn_offplan" onclick="roiSetMode('offplan')"
          style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;padding:15px 28px;border:none;background:transparent;color:rgba(255,255,255,0.55);cursor:pointer;font-weight:500;white-space:nowrap;flex-shrink:0;transition:all 0.2s;">
          Off-Plan Investment
        </button>
      </div>

      <!-- ══════════ RENO TAB ══════════ -->
      <div id="roi_reno_fields">
        <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:2px;">

          <!-- Inputs -->
          <div style="background:var(--dark);padding:36px 32px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;">Your Numbers</div>
            <div style="display:flex;flex-direction:column;gap:20px;">

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Purchase Price (AED)</label>
                <input type="text" id="reno_purchase" value="800,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcROI()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Renovation / Fit-Out Budget (AED)</label>
                <input type="text" id="reno_cost" value="120,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcROI()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Expected Sale Price (AED)</label>
                <input type="text" id="reno_sale" value="1,100,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcROI()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Renovation Duration (months)</label>
                <select id="reno_months" onchange="calcROI()"
                  style="width:100%;background:#1a1610;border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:15px;padding:12px 16px;outline:none;box-sizing:border-box;appearance:none;">
                  <option value="2">2 months</option>
                  <option value="3">3 months</option>
                  <option value="4" selected>4 months</option>
                  <option value="6">6 months</option>
                  <option value="9">9 months</option>
                  <option value="12">12 months</option>
                </select>
              </div>

            </div>

            <div style="margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.08);font-size:11px;color:rgba(255,255,255,0.35);line-height:1.6;">
              DLD fee (4%) and agency fees (2% buy + 2% sell) are automatically included in the cost calculation.
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;" class="m1">
              <button onclick="roiDownloadPDF()"
                style="display:flex;align-items:center;justify-content:center;gap:8px;background:var(--dark);border:1px solid var(--gold);color:var(--gold);padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Download PDF
              </button>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I've%20used%20the%20ROI%20calculator%20and%20would%20like%20to%20discuss%20a%20renovation%20project." target="_blank" rel="noopener"
                style="display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--dark);text-decoration:none;padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;">
                Discuss Project
              </a>
            </div>
          </div>

          <!-- Results -->
          <div id="roi_reno_results" style="background:var(--soft);border:1px solid var(--border);padding:36px 32px;display:flex;flex-direction:column;justify-content:space-between;">
            <div>
              <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;">Your Projected Returns</div>

              <!-- 4 metric tiles -->
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:2px;">
                <div style="background:var(--dark);padding:20px 18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">Value Uplift</div>
                  <div id="reno_uplift_pct" style="font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:var(--gold);">+37.5%</div>
                </div>
                <div style="background:var(--dark);padding:20px 18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">ROI on Investment</div>
                  <div id="reno_roi_pct" style="font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:#fff;">17.4%</div>
                </div>
              </div>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:24px;">
                <div style="background:var(--dark);padding:18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Net Profit</div>
                  <div id="reno_net_profit" style="font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;">AED 162,000</div>
                </div>
                <div style="background:var(--dark);padding:18px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Annualised ROI</div>
                  <div id="reno_annual_roi" style="font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;">69.5% p.a.</div>
                </div>
              </div>

              <!-- Breakdown -->
              <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:24px;">
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Purchase Price</span>
                  <span id="reno_r_purchase" style="font-size:12px;font-weight:500;color:var(--dark);">AED 800,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Renovation Budget</span>
                  <span id="reno_r_cost" style="font-size:12px;font-weight:500;color:var(--dark);">AED 120,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Total Investment (all-in)</span>
                  <span id="reno_r_total_inv" style="font-size:12px;font-weight:600;color:var(--dark);">AED 962,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Sale Price</span>
                  <span id="reno_r_sale" style="font-size:12px;font-weight:500;color:var(--dark);">AED 1,100,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Value Added by Renovation</span>
                  <span id="reno_r_value_added" style="font-size:12px;font-weight:500;color:var(--gold);">AED 300,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;">
                  <span style="font-size:14px;font-weight:600;color:var(--dark);">Net Profit After All Costs</span>
                  <span id="reno_r_net_profit" style="font-size:22px;color:var(--dark);font-family:'Cormorant Garamond',serif;">AED 162,000</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div><!-- end reno tab -->

      <!-- ══════════ BUY TO RENT TAB ══════════ -->
      <div id="roi_rent_fields" style="display:none;">
        <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:2px;">

          <!-- Inputs -->
          <div style="background:var(--dark);padding:36px 32px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;">Your Numbers</div>

            <!-- Finance mode -->
            <div style="margin-bottom:24px;">
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:10px;">Finance Method</div>
              <div style="display:flex;border:1px solid rgba(176,148,100,0.3);overflow:hidden;">
                <button id="roi_cash_btn" onclick="roiFinanceMode('cash')"
                  style="flex:1;padding:10px;border:none;background:var(--gold);color:var(--dark);font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-weight:600;">
                  Cash Purchase
                </button>
                <button id="roi_mortgage_btn" onclick="roiFinanceMode('mortgage')"
                  style="flex:1;padding:10px;border:none;background:transparent;color:rgba(255,255,255,0.5);font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-weight:500;">
                  Mortgage Buyer
                </button>
              </div>
            </div>

            <div style="display:flex;flex-direction:column;gap:18px;">

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Property Price (AED)</label>
                <input type="text" id="roi_price" value="1,500,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcROI()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Annual Rent (AED)</label>
                <input type="text" id="roi_rent" value="90,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcROI()">
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Annual Service Charge (AED)</label>
                <input type="text" id="roi_service" value="15,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);calcROI()">
              </div>

              <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div>
                  <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Annual Growth %</label>
                  <input type="number" id="roi_growth" value="5" min="0" max="30" step="0.5" onchange="calcROI()"
                    style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;">
                </div>
                <div>
                  <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Hold Period (years)</label>
                  <select id="roi_years" onchange="calcROI()"
                    style="width:100%;background:#1a1610;border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:14px;padding:11px 12px;outline:none;box-sizing:border-box;appearance:none;">
                    <option value="1">1 year</option>
                    <option value="3">3 years</option>
                    <option value="5" selected>5 years</option>
                    <option value="7">7 years</option>
                    <option value="10">10 years</option>
                  </select>
                </div>
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Agency Fee on Purchase (%)</label>
                <select id="roi_agency" onchange="calcROI()"
                  style="width:100%;background:#1a1610;border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:14px;padding:11px 12px;outline:none;box-sizing:border-box;appearance:none;">
                  <option value="2" selected>2% (standard)</option>
                  <option value="1">1%</option>
                  <option value="0">0% (direct/developer)</option>
                </select>
              </div>

              <!-- Mortgage inputs (hidden by default) -->
              <div id="roi_mortgage_fields" style="display:none;flex-direction:column;gap:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.1);">
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;">Mortgage Details</div>
                <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                  <div>
                    <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Down Payment (%)</label>
                    <input type="number" id="roi_dp" value="20" min="20" max="50" step="5" onchange="calcROI()"
                      style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;">
                  </div>
                  <div>
                    <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Interest Rate (% p.a.)</label>
                    <input type="number" id="roi_rate" value="4.5" min="2" max="10" step="0.25" onchange="calcROI()"
                      style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;">
                  </div>
                </div>
                <div>
                  <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Loan Term (years)</label>
                  <select id="roi_term" onchange="calcROI()"
                    style="width:100%;background:#1a1610;border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:14px;padding:11px 12px;outline:none;box-sizing:border-box;appearance:none;">
                    <option value="15">15 years</option>
                    <option value="20">20 years</option>
                    <option value="25" selected>25 years</option>
                  </select>
                </div>
                <div style="background:rgba(176,148,100,0.1);border:1px solid rgba(176,148,100,0.3);padding:14px 16px;">
                  <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:4px;">Monthly Payment (EMI)</div>
                  <div id="roi_emi" style="font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--gold);">AED 7,200/mo</div>
                  <div style="margin-top:6px;font-size:11px;color:rgba(255,255,255,0.4);">Loan Amount: <span id="roi_loan_amt" style="color:rgba(255,255,255,0.65);">AED 1,200,000</span></div>
                </div>
              </div>

            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px;" class="m1">
              <button onclick="roiDownloadPDF()"
                style="display:flex;align-items:center;justify-content:center;gap:8px;background:var(--dark);border:1px solid var(--gold);color:var(--gold);padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Download PDF
              </button>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I%27d%20like%20to%20discuss%20a%20buy-to-rent%20investment%20in%20Dubai." target="_blank" rel="noopener"
                style="display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--dark);text-decoration:none;padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;">
                Speak to an Agent
              </a>
            </div>
          </div>

          <!-- Results -->
          <div id="roi_rent_results" style="background:var(--soft);border:1px solid var(--border);padding:36px 32px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;">Your Investment Returns</div>

            <!-- 4 metric tiles -->
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:2px;">
              <div style="background:var(--dark);padding:20px 18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">Gross Yield</div>
                <div id="roi_gross_yield" style="font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:var(--gold);">6.0%</div>
              </div>
              <div style="background:var(--dark);padding:20px 18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">Net Yield</div>
                <div id="roi_net_yield" style="font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:#fff;">5.0%</div>
              </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:24px;">
              <div style="background:var(--dark);padding:18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Net Rental Income</div>
                <div id="roi_net_income" style="font-family:'Cormorant Garamond',serif;font-size:18px;color:#fff;">AED 75,000</div>
              </div>
              <div style="background:var(--dark);padding:18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Cash-on-Cash Return</div>
                <div id="roi_coc" style="font-family:'Cormorant Garamond',serif;font-size:18px;color:#fff;">4.2%</div>
              </div>
            </div>

            <!-- Breakdown rows -->
            <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:20px;">
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Entry Costs (DLD + Agency)</span>
                <span id="roi_entry_cost" style="font-size:12px;font-weight:500;color:var(--dark);">AED 90,000</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Total Rent over <span id="roi_period_lbl">5</span> years</span>
                <span id="roi_total_rent" style="font-size:12px;font-weight:500;color:var(--dark);">AED 375,000</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Capital Value at Resale</span>
                <span id="roi_resale" style="font-size:12px;font-weight:500;color:var(--dark);">AED 1,914,422</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Capital Gain</span>
                <span id="roi_capgain" style="font-size:12px;font-weight:500;color:var(--gold);">AED 414,422</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;">
                <span id="roi_profit_label" style="font-size:14px;font-weight:600;color:var(--dark);">Total Profit (Rent + Capital)</span>
                <span id="roi_total_profit" style="font-size:22px;color:var(--dark);font-family:'Cormorant Garamond',serif;">AED 699,422</span>
              </div>
            </div>

            <!-- Mortgage-specific result rows (hidden by default) -->
            <div id="roi_mortgage_rows" style="display:none;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--border);">
              <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;">Mortgage Breakdown</div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Monthly EMI</span>
                <span id="roi_r_emi" style="font-size:12px;font-weight:500;color:var(--dark);">AED 7,200/mo</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Loan Term</span>
                <span id="roi_r_term" style="font-size:12px;font-weight:500;color:var(--dark);">25 yrs</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Total Mortgage Paid</span>
                <span id="roi_r_total_mortgage" style="font-size:12px;font-weight:500;color:var(--dark);">AED 2,160,000</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Monthly Cash Flow</span>
                <span id="roi_r_cashflow" style="font-size:12px;font-weight:600;">—</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;">
                <span style="font-size:12px;color:var(--mid);">Cash-on-Cash (Mortgage)</span>
                <span id="roi_r_coc_mtg" style="font-size:12px;font-weight:600;color:var(--gold);">—</span>
              </div>
            </div>

          </div>
        </div>
      </div><!-- end rent tab -->

      <!-- ══════════ OFF-PLAN TAB ══════════ -->
      <div id="roi_offplan_fields" style="display:none;">
        <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:2px;">

          <!-- Inputs -->
          <div style="background:var(--dark);padding:36px 32px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;">Your Numbers</div>

            <div style="display:flex;flex-direction:column;gap:18px;">

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Off-Plan Purchase Price (AED)</label>
                <input type="text" id="op_price" value="1,200,000" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:18px;padding:12px 16px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);opSyncPrice();calcROI()">
              </div>

              <div class="m1" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                <div>
                  <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Down Payment (%)</label>
                  <input type="number" id="op_dp" value="20" min="5" max="50" step="5" onchange="calcROI()"
                    style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;">
                </div>
                <div>
                  <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">During Construction (%)</label>
                  <input type="number" id="op_during" value="40" min="0" max="80" step="5" onchange="calcROI()"
                    style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;">
                </div>
              </div>
              <div style="font-size:10px;color:rgba(255,255,255,0.35);">On Handover: <span id="op_handover_pct">40%</span> — balances automatically</div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Handover Timeline (months)</label>
                <input type="number" id="op_months_input" value="36" min="12" max="84" step="6" onchange="calcROI()"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;">
              </div>
              <input type="hidden" id="op_months" value="36">

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Expected Price Growth by Handover (%)</label>
                <input type="number" id="op_growth_input" value="25" min="0" max="100" step="1" oninput="opSyncGrowth();calcROI()"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;">
                <input type="hidden" id="op_growth" value="25">
                <div style="font-size:10px;color:rgba(255,255,255,0.35);margin-top:4px;">Or enter expected handover value directly:</div>
              </div>

              <div>
                <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Expected Price at Handover (AED) — optional</label>
                <input type="text" id="op_price_at_handover" placeholder="Leave blank to auto-calculate" inputmode="numeric"
                  style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:15px;padding:11px 12px;outline:none;box-sizing:border-box;"
                  oninput="roiFmt(this);opSyncPrice();calcROI()">
              </div>

              <!-- Exit mode -->
              <div>
                <div style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:10px;">Exit Strategy</div>
                <div style="display:flex;border:1px solid rgba(176,148,100,0.3);overflow:hidden;">
                  <button id="op_exit_sell_btn" onclick="opSetExit('sell')"
                    style="flex:1;padding:10px;border:none;background:var(--gold);color:var(--dark);font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-weight:600;">
                    Sell at Handover
                  </button>
                  <button id="op_exit_rent_btn" onclick="opSetExit('rent')"
                    style="flex:1;padding:10px;border:none;background:transparent;color:rgba(255,255,255,0.5);font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-weight:500;">
                    Rent After Handover
                  </button>
                </div>
              </div>

              <!-- Rent exit inputs (hidden by default) -->
              <div id="op_rent_inputs" style="display:none;flex-direction:column;gap:14px;">
                <div>
                  <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Expected Annual Rent (AED)</label>
                  <input type="text" id="op_annual_rent" value="80,000" inputmode="numeric"
                    style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;"
                    oninput="roiFmt(this);calcROI()">
                </div>
                <div>
                  <label style="font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:8px;">Annual Service Charge (AED)</label>
                  <input type="text" id="op_service" value="12,000" inputmode="numeric"
                    style="width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(176,148,100,0.3);color:#fff;font-family:'Jost',sans-serif;font-size:16px;padding:11px 12px;outline:none;box-sizing:border-box;"
                    oninput="roiFmt(this);calcROI()">
                </div>
              </div>

            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px;" class="m1">
              <button onclick="roiDownloadPDF()"
                style="display:flex;align-items:center;justify-content:center;gap:8px;background:var(--dark);border:1px solid var(--gold);color:var(--gold);padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Download PDF
              </button>
              <a href="https://wa.me/971507788073?text=Hi%2C%20I%27m%20interested%20in%20an%20off-plan%20investment%20in%20Dubai." target="_blank" rel="noopener"
                style="display:flex;align-items:center;justify-content:center;background:var(--gold);color:var(--dark);text-decoration:none;padding:13px;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;font-weight:600;">
                Speak to an Agent
              </a>
            </div>
          </div>

          <!-- Results -->
          <div id="roi_offplan_results" style="background:var(--soft);border:1px solid var(--border);padding:36px 32px;">
            <div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:28px;">Projected Returns</div>

            <!-- 4 metric tiles -->
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:2px;">
              <div style="background:var(--dark);padding:20px 18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">Value at Handover</div>
                <div id="op_handover_val" style="font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--gold);">AED 1,500,000</div>
              </div>
              <div style="background:var(--dark);padding:20px 18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">Appreciation</div>
                <div id="op_appreciation" style="font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:#fff;">+AED 300,000</div>
              </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:24px;">
              <div style="background:var(--dark);padding:18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Net Profit</div>
                <div id="op_net_profit" style="font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;">AED 228,000</div>
              </div>
              <div style="background:var(--dark);padding:18px;">
                <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;">Annual ROI</div>
                <div id="op_annual_roi" style="font-family:'Cormorant Garamond',serif;font-size:20px;color:#fff;">7.6% p.a.</div>
              </div>
            </div>

            <!-- Breakdown rows -->
            <div style="display:flex;flex-direction:column;gap:8px;margin-bottom:20px;">
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Purchase Price</span>
                <span id="op_r_purchase" style="font-size:12px;font-weight:500;color:var(--dark);">AED 1,200,000</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">DLD Fee (4%)</span>
                <span id="op_r_dld" style="font-size:12px;color:#c07070;">AED 48,000</span>
              </div>
              <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                <span style="font-size:12px;color:var(--mid);">Agency Fee (2%)</span>
                <span id="op_r_agency" style="font-size:12px;color:#c07070;">AED 24,000</span>
              </div>
              <div id="op_sell_breakdown">
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Resale Agent Fee (2%)</span>
                  <span id="op_r_resale_fee" style="font-size:12px;color:#c07070;">AED 30,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Handover Value</span>
                  <span id="op_r_handover_val" style="font-size:12px;font-weight:500;color:var(--gold);">AED 1,500,000</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;">
                  <span style="font-size:14px;font-weight:600;color:var(--dark);">Net Profit at Handover</span>
                  <span id="op_r_net_profit" style="font-size:22px;color:var(--dark);font-family:'Cormorant Garamond',serif;">AED 198,000</span>
                </div>
              </div>
              <div id="op_rent_breakdown" style="display:none;">
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Annual Rental Income</span>
                  <span id="op_r_rent" style="font-size:12px;font-weight:500;color:var(--dark);">—</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Annual Net Rental Income</span>
                  <span id="op_r_net_rent" style="font-size:12px;font-weight:500;color:var(--gold);">—</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Gross Yield on Cost</span>
                  <span id="op_gross_yield" style="font-size:12px;font-weight:600;color:var(--dark);">—</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border);">
                  <span style="font-size:12px;color:var(--mid);">Net Yield on Cost</span>
                  <span id="op_net_yield" style="font-size:12px;font-weight:600;color:var(--gold);">—</span>
                </div>
                <div style="display:flex;justify-content:space-between;padding-bottom:8px;">
                  <span style="font-size:12px;color:var(--mid);">Yield on Market Value</span>
                  <span id="op_yield_on_mkt" style="font-size:12px;font-weight:500;color:var(--dark);">—</span>
                </div>
              </div>
            </div>

            <!-- Off-plan advantage callout -->
            <div style="background:var(--dark);padding:18px;margin-top:8px;">
              <div style="font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:6px;">Your Capital Today</div>
              <div style="font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;color:var(--gold);" id="op_deposit_amt">AED 240,000</div>
              <div style="font-size:10px;color:rgba(255,255,255,0.4);margin-top:4px;">
                Controls an asset worth <span id="op_handover_val_small" style="color:rgba(255,255,255,0.65);">AED 1,500,000</span> · ROI on deposit: <strong id="op_roi_on_deposit" style="color:var(--gold);">82.5%</strong>
              </div>
            </div>

            <div style="font-size:11px;color:var(--mid);margin-top:12px;line-height:1.6;">
              Total all-in cost: <strong id="op_total_paid">AED 1,272,000</strong>
            </div>
          </div>

        </div>
      </div><!-- end offplan tab -->

      <p style="font-size:11px;color:var(--mid);margin:14px 0 0;line-height:1.6;text-align:center;">* These calculations are illustrative estimates only. DLD fees 4%, agency fees applied automatically. Values not guaranteed — always seek independent financial advice.</p>

    </div>
  </section><!-- end roi-calc -->

  <!-- jsPDF for client-side PDF generation -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

  <script>
  /* ── ROI CALCULATOR ─────────────────────────────────────── */
  var roiMode = 'reno'; // 'reno' | 'rent'

  function roiSetMode(mode) {
    roiMode = mode;
    var btns = ['rent','reno','offplan'];
    btns.forEach(function(m) {
      var btn = document.getElementById('roi_btn_'+m);
      if (btn) {
        btn.style.background = (m === mode) ? 'var(--gold)' : 'transparent';
        btn.style.color      = (m === mode) ? 'var(--dark)' : 'rgba(255,255,255,0.55)';
      }
      var fields = document.getElementById('roi_'+m+'_fields');
      var results = document.getElementById('roi_'+m+'_results');
      if (fields)  fields.style.display  = (m === mode) ? (m==='reno'?'block':'flex') : 'none';
      if (results) results.style.display = (m === mode) ? 'block' : 'none';
    });
    calcROI();
  }

  function roiFmt(el) {
    var pos = el.selectionStart;
    var raw = el.value.replace(/[^0-9]/g, '');
    var oldLen = el.value.length;
    if (raw === '') { el.value = ''; return; }
    var formatted = parseInt(raw, 10).toLocaleString('en-US');
    el.value = formatted;
    var diff = formatted.length - oldLen;
    el.setSelectionRange(pos + diff, pos + diff);
  }

  function roiVal(id) {
    var el = document.getElementById(id);
    if (!el) return 0;
    return parseFloat(el.value.replace(/,/g, '')) || 0;
  }

  function fmt(n) { return 'AED ' + Math.round(n).toLocaleString('en-US'); }
  function pct(n) { return (n >= 0 ? '+' : '') + n.toFixed(1) + '%'; }

  function calcROI() {
    if (roiMode === 'reno') {
      var purchase = roiVal('reno_purchase');
      var renoCost = roiVal('reno_cost');
      var salePrice = roiVal('reno_sale');
      var months   = parseFloat(document.getElementById('reno_months').value) || 4;

      var totalInv  = purchase + renoCost;
      var valueAdded = salePrice - purchase;
      var netProfit  = salePrice - totalInv;
      var roiPct     = totalInv > 0 ? (netProfit / totalInv * 100) : 0;
      var upliftPct  = purchase > 0 ? ((salePrice - purchase) / purchase * 100) : 0;
      var annualROI  = months > 0 ? (roiPct / months * 12) : 0;

      // Update results
      document.getElementById('reno_uplift_pct').textContent  = '+' + upliftPct.toFixed(1) + '%';
      document.getElementById('reno_roi_pct').textContent      = roiPct.toFixed(1) + '%';
      document.getElementById('reno_net_profit').textContent   = fmt(netProfit);
      document.getElementById('reno_annual_roi').textContent   = annualROI.toFixed(1) + '% p.a.';
      document.getElementById('reno_r_purchase').textContent   = fmt(purchase);
      document.getElementById('reno_r_cost').textContent       = fmt(renoCost);
      document.getElementById('reno_r_total_inv').textContent  = fmt(totalInv);
      document.getElementById('reno_r_sale').textContent       = fmt(salePrice);
      document.getElementById('reno_r_value_added').textContent= fmt(valueAdded);
      document.getElementById('reno_r_net_profit').textContent = fmt(netProfit);

    } else if (roiMode === 'offplan') {
      calcOffPlan();
      return;
    } else {
      var price      = roiVal('roi_price');
      var rent       = roiVal('roi_rent');
      var service    = roiVal('roi_service');
      var growth     = parseFloat(document.getElementById('roi_growth').value)  || 0;
      var years      = parseFloat(document.getElementById('roi_years').value)   || 1;
      var agency_pct = parseFloat(document.getElementById('roi_agency').value)  || 2;
      if (!price || !rent) return;

      var dld_fee     = price * 0.04;
      var agency_fee  = price * agency_pct / 100;
      var entry_cost  = dld_fee + agency_fee;
      var total_inv   = price + entry_cost;

      var net_rent     = rent - service;
      var gross_yield  = rent / price * 100;
      var net_yield    = net_rent / price * 100;
      var total_rent   = net_rent * years;
      var resale       = price * Math.pow(1 + growth / 100, years);
      var cap_gain     = resale - price;

      document.getElementById('roi_entry_cost').textContent   = fmt(entry_cost);
      document.getElementById('roi_gross_yield').textContent  = gross_yield.toFixed(1) + '%';
      document.getElementById('roi_net_yield').textContent    = net_yield.toFixed(1) + '%';
      document.getElementById('roi_period_lbl').textContent   = years;
      document.getElementById('roi_total_rent').textContent   = fmt(total_rent);
      document.getElementById('roi_resale').textContent       = fmt(resale);
      document.getElementById('roi_capgain').textContent      = fmt(cap_gain);

      if (roiFinance === 'mortgage') {
        var dp_pct    = parseFloat(document.getElementById('roi_dp').value) || 20;
        var rate_pa   = parseFloat(document.getElementById('roi_rate').value) || 4.5;
        var term_yrs  = parseFloat(document.getElementById('roi_term').value) || 25;
        var dp_amt    = price * dp_pct / 100;
        var loan      = price - dp_amt;
        var r         = rate_pa / 100 / 12;
        var n         = term_yrs * 12;
        var emi       = r > 0 ? loan * (r * Math.pow(1+r,n)) / (Math.pow(1+r,n)-1) : loan / n;
        var ann_mortgage = emi * 12;
        var net_cashflow_monthly = (net_rent - ann_mortgage) / 12;
        var cash_deployed = dp_amt + entry_cost;
        var coc_return   = (net_rent - ann_mortgage) / cash_deployed * 100;
        var total_mortgage_paid = emi * Math.min(years, term_yrs) * 12;
        var total_profit = total_rent - total_mortgage_paid + cap_gain - entry_cost;

        document.getElementById('roi_net_income').textContent   = fmt(net_rent - ann_mortgage);
        document.getElementById('roi_coc').textContent          = coc_return.toFixed(1) + '%';
        document.getElementById('roi_total_profit').textContent = fmt(total_profit);
        document.getElementById('roi_profit_label').textContent = 'Net Profit After Mortgage';

        // Mortgage-specific fields
        document.getElementById('roi_emi').textContent         = fmt(Math.round(emi)) + '/mo';
        document.getElementById('roi_loan_amt').textContent    = fmt(loan);
        document.getElementById('roi_r_emi').textContent       = fmt(Math.round(emi)) + '/mo';
        document.getElementById('roi_r_term').textContent      = term_yrs;
        document.getElementById('roi_r_total_mortgage').textContent = fmt(Math.round(emi * n));
        var cf = document.getElementById('roi_r_cashflow');
        cf.textContent = (net_cashflow_monthly >= 0 ? '+' : '') + fmt(Math.round(net_cashflow_monthly)) + '/mo';
        cf.style.color = net_cashflow_monthly >= 0 ? 'var(--gold)' : '#e07070';
        document.getElementById('roi_r_coc_mtg').textContent   = coc_return.toFixed(1) + '%';

        // Top tiles
        document.getElementById('roi_net_yield').textContent   = (coc_return).toFixed(1) + '%';
        document.getElementById('roi_gross_yield').textContent = gross_yield.toFixed(1) + '%';
      } else {
        var total_profit = total_rent + cap_gain - entry_cost;
        document.getElementById('roi_net_income').textContent   = fmt(net_rent);
        document.getElementById('roi_coc').textContent          = (net_rent / total_inv * 100).toFixed(1) + '%';
        document.getElementById('roi_total_profit').textContent = fmt(total_profit);
        document.getElementById('roi_profit_label').textContent = 'Total Profit (Rent + Capital)';
      }
    }
  }

  var roiFinance = 'cash';
  function roiFinanceMode(mode) {
    roiFinance = mode;
    var isMtg = mode === 'mortgage';
    document.getElementById('roi_cash_btn').style.background    = isMtg ? 'transparent' : 'var(--gold)';
    document.getElementById('roi_cash_btn').style.color         = isMtg ? 'rgba(255,255,255,0.5)' : 'var(--dark)';
    document.getElementById('roi_mortgage_btn').style.background= isMtg ? 'var(--gold)' : 'transparent';
    document.getElementById('roi_mortgage_btn').style.color     = isMtg ? 'var(--dark)' : 'rgba(255,255,255,0.5)';
    document.getElementById('roi_mortgage_fields').style.display= isMtg ? 'flex' : 'none';
    document.getElementById('roi_mortgage_rows').style.display  = isMtg ? 'flex' : 'none';
    calcROI();
  }

  var UNIQ_LOGO_B64 = 'data:image/jpeg;base64,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MacA8yGvyBsAAcOW7bgrfi8GV2uYtixA4+zjKbS5rSgCusa44NBn9AAAPj7FJNYe5SDQAAABBP5FKtkVK2FSthUrYV9rHJQUABXctx85eTee0FAAAAZXSeyEWT2UR9ffx9gGGs74UPf3/ZKDnzGs8JAOTrGU1cE4BlfdJ8FDpYOgAAAY7YwmfXwp9BBOAcOc2MRS1ui6zm7QA8yGwhJgIJ/gyevjkAOTP6uAnA4+zwzelilAFdY/Jju2+FDcTSn2D//aAAwDAQACAAMAAAAh88888886+888888888888888888888888888888888888888888888888888888888888qu508888888888888888888888888888888888888888888888888888888888q49Z2888888888888888888888888888888888888888888888888888888888qpsfu+88888888888888888888888888888888888888888888888888888888qp88u070888888888888888888888888888888888888888888888888888888qp888u/J+88888888888888888888888888888888888888888888888888888qp88888Nu08888888888888888488888888888888888888848888888888888qp888888+228888sA88884U88880888888Ac888g088884QwwQQ08888888888qp88808888W88888A8888oU8888QY88888A8888AU888sEE8MMEA8888888888qt+vMV8888W88888A8888oU8888EAU8888A8888AU888oc888888E88888888+/+w/3V8888W88888A8888oU8888UoYc888A8888AU884Ec888888g08884+nc17588XV8888W88888A8888oU8888U8YAU88A8888AU884U8888888I084Pa1tO8qp88XV8888W88888A8888oU8888U88sYc8A8888AU888E8888488Ac8+ue8888qp88XV8888W88888Ic888oQ8888U8888IQA8888AU888Yc88sA48EU8++88888qp88XV8888W88888I8888oc8888U8888IIA8888AU888k00888YwM88++88888qp88XV8888W888888Y4wgkc8888U88888II8888AU888sMAY8oAAQ88++88888qp88XV8888W888888cIAM888884Y88888880888MU8888s8EMMMMU88++88888qp88XV8888W88888888888888888888888888888888888888888888++88888qp88XV8888W88888888888888888888888888888888888888888888++88888qp88XV8888W88888888888888888888888888888888888888888888++88888qp88XV8888W88888Qk8okc88wc88o8888oE88Qo08cM84w88oEc4kM8++88888qp88XV8888W88888Ew8ooU88Ek88o8888ooU8cY88o88oY88oU8ooU8++88888quwwVV8888W88888QY8oU884Ec08o8888oU8804c8o88IMk8oU8oU884/88888q//AP8A97zzzdbzzzzwShyxDDzjzxTzCDzzzjDTwgDzyjyzTyjyhzyjDTz/2gAMAwEAAgADAAAAEPPPPPPPKkfPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPK0OPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPK0Lx/vPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPKwbKgsfPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPKwfPOTEvPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPKwfPPPjY8vPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPKwfPPPLGEm/PPPPPPPPPPPPPPPOPPPPPPPPPPPPPPPPPPPPPNPPPPPPPPPPPPPKwfPPPPPDWlvPPPKANPPPKAPPPPHPPPPPPIHPPOKPPPPPOKEJIAOPPPPPPPPPPKwfPPPPPPAF/PPPKAFPPPKAPPPPAGPPPPPAPPPKKPPPPPIHDPLCAFPPPPPPPPPKxdasPPPPAF/PPPKAFPPPKAPPPPBENPPPPAPPPKKPPPOEFPPPP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';

  /* ── PDF REPORT ──────────────────────────────────────────── */
  function roiDownloadPDF() {
    try {
    if (!window.jspdf) { alert('PDF library not loaded. Please check your internet connection and refresh the page.'); return; }
    var { jsPDF } = window.jspdf;
    var doc = new jsPDF({ unit: 'mm', format: 'a4' });
    var W = 210, margin = 20, cw = W - margin * 2;
    var bgDark=[10,8,6], cardDark=[28,24,20], gold=[176,148,100], dark=[26,26,26], mid=[107,101,96], border=[217,211,202], soft=[245,242,238];

    if (roiMode === 'offplan') { roiDownloadOffPlanPDF(); return; }

    var titleText = roiMode === 'reno' ? 'Renovation & Flip Analysis' : 'Property Investment Analysis';
    var today = new Date().toLocaleDateString('en-GB', {day:'2-digit',month:'long',year:'numeric'});

    // ── HEADER ──────────────────────────────────────────────
    doc.setFillColor(...bgDark); doc.rect(0,0,W,40,'F');
    doc.setFillColor(255,255,255); doc.rect(margin-4,4,50,32,'F');
    doc.setDrawColor(...gold); doc.setLineWidth(0.5); doc.rect(margin-4,4,50,32);
    doc.addImage(UNIQ_LOGO_B64, 'JPEG', margin, 9, 40, 20);
    doc.setFont('helvetica','bold'); doc.setFontSize(14); doc.setTextColor(...gold);
    doc.text(titleText, W - margin, 17, { align: 'right' });
    doc.setFont('helvetica','normal'); doc.setFontSize(8); doc.setTextColor(180,170,155);
    doc.text('www.uniqrealty.co  |  +971 50 778 8073', W - margin, 24, { align: 'right' });
    doc.text('Report generated: ' + today, W - margin, 30, { align: 'right' });
    doc.setDrawColor(...gold); doc.setLineWidth(0.6); doc.line(0,40,W,40);

    var y = 52;
    var bw = cw / 4;

    // ── HELPER FUNCTIONS ────────────────────────────────────
    function metricBox(x, label, value) {
      doc.setFillColor(...cardDark); doc.rect(x, y, bw-3, 28, 'F');
      doc.setDrawColor(...gold); doc.setLineWidth(0.4); doc.rect(x, y, bw-3, 28);
      doc.setFont('helvetica','normal'); doc.setFontSize(7); doc.setTextColor(...gold);
      doc.text(label, x+(bw-3)/2, y+10, { align:'center' });
      doc.setFont('helvetica','bold'); doc.setFontSize(13); doc.setTextColor(255,255,255);
      doc.text(value, x+(bw-3)/2, y+21, { align:'center' });
    }

    function sectionHeader(title) {
      y += 6;
      doc.setFillColor(...bgDark); doc.rect(margin-2, y, cw+4, 8, 'F');
      doc.setFont('helvetica','bold'); doc.setFontSize(7.5); doc.setTextColor(...gold);
      doc.text(title.toUpperCase(), margin+2, y+5.5);
      y += 13;
    }

    function dataRow(label, value, highlight) {
      doc.setFont('helvetica','normal'); doc.setFontSize(9); doc.setTextColor(...mid);
      doc.text(label, margin, y);
      doc.setFont('helvetica','bold');
      doc.setTextColor(...(highlight ? gold : dark));
      doc.text(value, W - margin, y, { align: 'right' });
      doc.setDrawColor(...border); doc.setLineWidth(0.25);
      doc.line(margin, y + 2.5, W - margin, y + 2.5);
      y += 9;
    }

    function totalRow(label, value) {
      y += 4;
      doc.setFillColor(...bgDark); doc.rect(margin-2, y-5, cw+4, 14, 'F');
      doc.setFont('helvetica','bold'); doc.setFontSize(11); doc.setTextColor(255,255,255);
      doc.text(label, margin + 2, y + 3);
      doc.setFontSize(14); doc.setTextColor(255,255,255);
      doc.text(value, W - margin - 2, y + 3, { align: 'right' });
      y += 18;
    }

    // ── RENO MODE ───────────────────────────────────────────
    if (roiMode === 'reno') {
      var purchase  = roiVal('reno_purchase');
      var renoCost  = roiVal('reno_cost');
      var salePrice = roiVal('reno_sale');
      var months    = parseFloat(document.getElementById('reno_months').value) || 4;
      var totalInv  = purchase + renoCost;
      var netProfit = salePrice - totalInv;
      var roiPct    = totalInv > 0 ? (netProfit / totalInv * 100) : 0;
      var uplift    = purchase > 0 ? ((salePrice - purchase) / purchase * 100) : 0;
      var annROI    = months > 0 ? (roiPct / months * 12) : 0;

      metricBox(margin,        'Value Uplift',  '+'+uplift.toFixed(1)+'%');
      metricBox(margin+bw,     'ROI',           roiPct.toFixed(1)+'%');
      metricBox(margin+bw*2,   'Net Profit',    'AED '+Math.round(netProfit).toLocaleString('en-US'));
      metricBox(margin+bw*3,   'Annual ROI',    annROI.toFixed(1)+'% p.a.');
      y += 36;

      sectionHeader('Project Inputs');
      dataRow('Purchase Price (all-in)',    'AED '+Math.round(purchase).toLocaleString('en-US'));
      dataRow('Renovation / Fit-Out Cost',  'AED '+Math.round(renoCost).toLocaleString('en-US'));
      dataRow('Project Duration',           months+' months');
      dataRow('Total Investment',           'AED '+Math.round(totalInv).toLocaleString('en-US'), true);

      sectionHeader('Return Summary');
      dataRow('Expected Sale Price',        'AED '+Math.round(salePrice).toLocaleString('en-US'));
      dataRow('Value Added by Renovation',  'AED '+Math.round(salePrice-purchase).toLocaleString('en-US'), true);
      totalRow('Net Profit',                'AED '+Math.round(netProfit).toLocaleString('en-US'));

    // ── RENT MODE ───────────────────────────────────────────
    } else {
      var price    = roiVal('roi_price');
      var rent     = roiVal('roi_rent');
      var service  = roiVal('roi_service');
      var growth   = parseFloat(document.getElementById('roi_growth').value) || 0;
      var years    = parseFloat(document.getElementById('roi_years').value) || 1;
      var agency_pct = parseFloat(document.getElementById('roi_agency').value) || 2;
      var net_rent = rent - service;
      var dld_fee  = price * 0.04;
      var agency_fee = price * agency_pct / 100;
      var total_inv = price + dld_fee + agency_fee;
      var resale   = price * Math.pow(1 + growth/100, years);
      var totalProfit = net_rent * years + resale - price;

      metricBox(margin,        'Gross Yield',   (rent/price*100).toFixed(1)+'%');
      metricBox(margin+bw,     'Net Yield',     (net_rent/price*100).toFixed(1)+'%');
      metricBox(margin+bw*2,   'Annual Income', 'AED '+Math.round(net_rent).toLocaleString('en-US'));
      metricBox(margin+bw*3,   'Holding Period',years+' yrs');
      y += 36;

      sectionHeader('Property Details');
      dataRow('Purchase Price',             'AED '+Math.round(price).toLocaleString('en-US'));
      dataRow('Annual Rental Income',       'AED '+Math.round(rent).toLocaleString('en-US'));
      dataRow('Annual Service Charge',      'AED '+Math.round(service).toLocaleString('en-US'));
      dataRow('Net Annual Income',          'AED '+Math.round(net_rent).toLocaleString('en-US'), true);
      dataRow('DLD Fee (4%)',               'AED '+Math.round(dld_fee).toLocaleString('en-US'));
      dataRow('Agency Fee ('+agency_pct+'%)',  'AED '+Math.round(agency_fee).toLocaleString('en-US'));
      dataRow('Capital Growth p.a.',        growth+'%');
      dataRow('Holding Period',             years+' years');

      sectionHeader('Projected Returns Over '+years+' Year'+(years>1?'s':''));
      dataRow('Total Rental Income',        'AED '+Math.round(net_rent*years).toLocaleString('en-US'));
      dataRow('Estimated Resale Value',     'AED '+Math.round(resale).toLocaleString('en-US'));
      dataRow('Capital Gain',               'AED '+Math.round(resale-price).toLocaleString('en-US'), true);
      totalRow('Total Profit (Rent + Capital)', 'AED '+Math.round(totalProfit).toLocaleString('en-US'));
    }

    // ── DISCLAIMER ──────────────────────────────────────────
    doc.setFont('helvetica','italic'); doc.setFontSize(7); doc.setTextColor(180,174,168);
    var disc = 'This report is for illustrative purposes only and does not constitute financial or investment advice. All figures are estimates and are not guaranteed. Always obtain independent professional advice before making investment decisions.';
    var lines = doc.splitTextToSize(disc, cw);
    doc.text(lines, margin, y + 4);

    // ── FOOTER ──────────────────────────────────────────────
    doc.setFillColor(...bgDark); doc.rect(0, 287, W, 10, 'F');
    doc.setFont('helvetica','normal'); doc.setFontSize(7.5); doc.setTextColor(180,170,155);
    doc.text('UNIQ Real Estate Broker  |  RERA Licensed  |  www.uniqrealty.co  |  +971 50 778 8073', W/2, 293.5, { align: 'center' });

    doc.save('UNIQ-Investment-Analysis-'+new Date().toISOString().slice(0,10)+'.pdf');
    } catch(e) { alert('PDF error: ' + e.message); console.error(e); }
  }

  document.addEventListener('DOMContentLoaded', function() { roiSetMode('reno'); calcFitOut(); });

  /* ── OFF-PLAN CALCULATOR ─────────────────────────────── */
  var opExit = 'sell';

  function opSyncPrice() {
    var price = roiVal('op_price');
    var g = parseFloat(document.getElementById('op_growth_input').value) || parseFloat(document.getElementById('op_growth').value) || 25;
    if (price) {
      var expected = Math.round(price * (1 + g/100));
      document.getElementById('op_price_at_handover').value = expected.toLocaleString('en-US');
    }
  }
  function opSyncGrowth() {
    var price = roiVal('op_price');
    var handoverPrice = roiVal('op_price_at_handover');
    if (price && handoverPrice) {
      var g = Math.round((handoverPrice - price) / price * 100);
      document.getElementById('op_growth').value = Math.min(80, Math.max(0, g));
      document.getElementById('op_growth_input').value = g;
      var gv = document.getElementById('op_growth_val'); if(gv) gv.textContent = g + '%';
      calcROI();
    }
  }

  function opSetExit(mode) {
    opExit = mode;
    document.getElementById('op_exit_sell_btn').style.background = mode==='sell' ? 'var(--gold)' : 'transparent';
    document.getElementById('op_exit_sell_btn').style.color      = mode==='sell' ? 'var(--dark)' : 'rgba(255,255,255,0.5)';
    document.getElementById('op_exit_rent_btn').style.background = mode==='rent' ? 'var(--gold)' : 'transparent';
    document.getElementById('op_exit_rent_btn').style.color      = mode==='rent' ? 'var(--dark)' : 'rgba(255,255,255,0.5)';
    document.getElementById('op_rent_inputs').style.display   = mode==='rent' ? 'flex' : 'none';
    document.getElementById('op_sell_breakdown').style.display = mode==='sell' ? 'block' : 'none';
    document.getElementById('op_rent_breakdown').style.display = mode==='rent' ? 'block' : 'none';
    calcROI();
  }

  function calcOffPlan() {
    var price      = roiVal('op_price');
    var dp_pct     = parseFloat(document.getElementById('op_dp').value)     || 20;
    var during_pct = parseFloat(document.getElementById('op_during').value) || 40;
    var months     = parseFloat(document.getElementById('op_months_input') ? document.getElementById('op_months_input').value : null) || parseFloat(document.getElementById('op_months').value) || 36;
    var growth_pct = parseFloat(document.getElementById('op_growth_input').value) || parseFloat(document.getElementById('op_growth').value) || 25;
    if (!price) return;
    // Use manual handover price if entered, otherwise calculate from growth %
    var manualHandoverPrice = roiVal('op_price_at_handover');
    if (manualHandoverPrice && manualHandoverPrice > price) {
      growth_pct = (manualHandoverPrice - price) / price * 100;
    }

    var handover_pct = Math.max(0, 100 - dp_pct - during_pct);
    document.getElementById('op_handover_pct').textContent = handover_pct + '%';

    var dp_amt       = price * dp_pct / 100;
    var during_amt   = price * during_pct / 100;
    var handover_amt = price * handover_pct / 100;
    var total_paid   = dp_amt + during_amt + handover_amt; // = price
    var dld_fee      = price * 0.04;
    var agency_fee   = price * 0.02;
    var total_inv    = price + dld_fee + agency_fee;

    var handover_val  = price * (1 + growth_pct / 100);
    var appreciation  = handover_val - price;
    var resale_fee    = handover_val * 0.02;
    var net_profit_sell = handover_val - total_inv - resale_fee;
    var roi_on_deposit  = dp_amt > 0 ? (net_profit_sell / dp_amt * 100) : 0;
    var annual_roi      = months > 0 ? (net_profit_sell / total_inv * 100 / months * 12) : 0;

    // Update payment plan display
    document.getElementById('op_deposit_amt').textContent = fmt(dp_amt);
    document.getElementById('op_total_paid').textContent  = fmt(total_paid + dld_fee + agency_fee);

    // Metrics
    document.getElementById('op_handover_val').textContent  = fmt(handover_val);
    document.getElementById('op_appreciation').textContent  = '+' + fmt(appreciation);
    document.getElementById('op_net_profit').textContent    = fmt(net_profit_sell);
    document.getElementById('op_annual_roi').textContent    = annual_roi.toFixed(1) + '% p.a.';

    // Sell breakdown
    document.getElementById('op_r_purchase').textContent    = fmt(price);
    document.getElementById('op_r_dld').textContent         = fmt(dld_fee);
    document.getElementById('op_r_agency').textContent      = fmt(agency_fee);
    document.getElementById('op_r_resale_fee').textContent  = fmt(resale_fee);
    document.getElementById('op_r_handover_val').textContent= fmt(handover_val);
    document.getElementById('op_r_net_profit').textContent  = fmt(net_profit_sell);

    // vs Ready
    var vsD = document.getElementById('op_vs_deposit'); if(vsD) vsD.textContent = fmt(dp_amt);
    document.getElementById('op_roi_on_deposit').textContent= roi_on_deposit.toFixed(1) + '%';
    var hSmall = document.getElementById('op_handover_val_small');
    if(hSmall) hSmall.textContent = fmt(handover_val);

    // Rent breakdown
    if (opExit === 'rent') {
      var annual_rent = roiVal('op_annual_rent');
      var svc_charge  = roiVal('op_service');
      var net_rent    = annual_rent - svc_charge;
      var gross_yield = total_inv > 0 ? (annual_rent / total_inv * 100) : 0;
      var net_yield   = total_inv > 0 ? (net_rent    / total_inv * 100) : 0;
      var yield_on_mkt= handover_val > 0 ? (net_rent / handover_val * 100) : 0;
      document.getElementById('op_gross_yield').textContent   = gross_yield.toFixed(1) + '%';
      document.getElementById('op_net_yield').textContent     = net_yield.toFixed(1) + '%';
      document.getElementById('op_r_rent').textContent        = fmt(annual_rent);
      document.getElementById('op_r_net_rent').textContent    = fmt(net_rent);
      document.getElementById('op_yield_on_mkt').textContent  = yield_on_mkt.toFixed(1) + '%';
    }
  }

  /* ── FIT OUT SECTION CALCULATOR ───────────────────────── */
  function calcFitOut() {
    var purchase  = roiVal('fo_purchase');
    var renoCost  = roiVal('fo_reno');
    var salePrice = roiVal('fo_sale');
    var months    = parseFloat(document.getElementById('fo_months').value) || 3;
    if (!purchase || !salePrice) return;

    var totalInv  = purchase + renoCost;
    var netProfit = salePrice - totalInv;
    var uplift    = purchase > 0 ? ((salePrice - purchase) / purchase * 100) : 0;
    var roiPct    = totalInv > 0 ? (netProfit / totalInv * 100) : 0;
    var annROI    = months > 0 ? (roiPct / months * 12) : 0;
    var valueAdded= salePrice - purchase;

    document.getElementById('fo_uplift').textContent    = '+' + uplift.toFixed(1) + '%';
    document.getElementById('fo_roi').textContent       = roiPct.toFixed(1) + '%';
    document.getElementById('fo_net_profit').textContent   = fmt(netProfit);
    document.getElementById('fo_annual_roi').textContent   = annROI.toFixed(1) + '% p.a.';
    document.getElementById('fo_total_inv').textContent    = fmt(totalInv);
    document.getElementById('fo_value_added').textContent  = fmt(valueAdded);
    document.getElementById('fo_net_profit2').textContent  = fmt(netProfit);
  }

  function foDownloadPDF() {
    try {
    if (!window.jspdf) { alert('PDF library not loaded. Please check your internet connection and refresh the page.'); return; }
    var { jsPDF } = window.jspdf;
    var doc = new jsPDF({ unit: 'mm', format: 'a4' });
    var W = 210, margin = 18, cw = W - margin * 2;
    var bgDark=[10,8,6], cardDark=[28,24,20], gold=[176,148,100], dark=[26,26,26], mid=[107,101,96], border=[217,211,202], soft=[245,242,238];

    var purchase  = roiVal('fo_purchase');
    var renoCost  = roiVal('fo_reno');
    var salePrice = roiVal('fo_sale');
    var months    = parseFloat(document.getElementById('fo_months').value) || 3;
    var totalInv  = purchase + renoCost;
    var netProfit = salePrice - totalInv;
    var uplift    = purchase > 0 ? ((salePrice - purchase) / purchase * 100) : 0;
    var roiPct    = totalInv > 0 ? (netProfit / totalInv * 100) : 0;
    var annROI    = months > 0 ? (roiPct / months * 12) : 0;

    var today = new Date().toLocaleDateString('en-GB',{day:'2-digit',month:'long',year:'numeric'});
    // ── HEADER ──
    doc.setFillColor(...bgDark); doc.rect(0,0,W,40,'F');
    doc.setFillColor(255,255,255); doc.rect(margin-4,4,50,32,'F');
    doc.setDrawColor(...gold); doc.setLineWidth(0.5); doc.rect(margin-4,4,50,32);
    doc.addImage(UNIQ_LOGO_B64, 'JPEG', margin, 9, 40, 20);
    doc.setFont('helvetica','bold'); doc.setFontSize(14); doc.setTextColor(...gold);
    doc.text('Renovation & Fit-Out Analysis', W-margin, 17, { align:'right' });
    doc.setFont('helvetica','normal'); doc.setFontSize(8); doc.setTextColor(180,170,155);
    doc.text('www.uniqrealty.co  |  +971 50 778 8073', W-margin, 24, { align:'right' });
    doc.text('Report generated: '+today, W-margin, 30, { align:'right' });
    doc.setDrawColor(...gold); doc.setLineWidth(0.6); doc.line(0,40,W,40);

    var y = 52;
    var bw = cw/4;
    function mBox(x, lbl, val) {
      doc.setFillColor(...cardDark); doc.rect(x,y,bw-3,28,'F');
      doc.setDrawColor(...gold); doc.setLineWidth(0.4); doc.rect(x,y,bw-3,28);
      doc.setFontSize(7); doc.setFont('helvetica','normal'); doc.setTextColor(...gold);
      doc.text(lbl, x+(bw-3)/2, y+10, {align:'center'});
      doc.setFontSize(13); doc.setFont('helvetica','bold'); doc.setTextColor(255,255,255);
      doc.text(val, x+(bw-3)/2, y+21, {align:'center'});
    }
    mBox(margin,      'Value Uplift',  '+'+uplift.toFixed(1)+'%');
    mBox(margin+bw,   'ROI',           roiPct.toFixed(1)+'%');
    mBox(margin+bw*2, 'Net Profit',    'AED '+Math.round(netProfit).toLocaleString('en-US'));
    mBox(margin+bw*3, 'Annual ROI',    annROI.toFixed(1)+'% p.a.');
    y += 36;

    function sHdr(t) {
      y += 6;
      doc.setFillColor(...bgDark); doc.rect(margin-2, y, cw+4, 8, 'F');
      doc.setFont('helvetica','bold'); doc.setFontSize(7.5); doc.setTextColor(...gold);
      doc.text(t.toUpperCase(), margin+2, y+5.5);
      y += 13;
    }
    function dRow(lbl, val, highlight) {
      doc.setFont('helvetica','normal'); doc.setFontSize(9); doc.setTextColor(...mid);
      doc.text(lbl, margin, y);
      doc.setFont('helvetica','bold'); doc.setTextColor(...(highlight ? gold : dark));
      doc.text(val, W-margin, y, {align:'right'});
      doc.setDrawColor(...border); doc.setLineWidth(0.25); doc.line(margin,y+2.5,W-margin,y+2.5); y+=9;
    }

    sHdr('Project Details');
    dRow('Purchase Price (all-in)',   'AED '+Math.round(purchase).toLocaleString('en-US'));
    dRow('Renovation / Fit-Out Cost', 'AED '+Math.round(renoCost).toLocaleString('en-US'));
    dRow('Total Investment',          'AED '+Math.round(totalInv).toLocaleString('en-US'), true);
    dRow('Project Duration',          months+' months');

    sHdr('Return Analysis');
    dRow('Expected Sale Price',       'AED '+Math.round(salePrice).toLocaleString('en-US'));
    dRow('Value Added',               'AED '+Math.round(salePrice-purchase).toLocaleString('en-US'), true);
    dRow('ROI on Investment',         roiPct.toFixed(1)+'%');
    dRow('Annualised ROI',            annROI.toFixed(1)+'% p.a.');

    y += 4;
    doc.setFillColor(...bgDark); doc.rect(margin-2, y-5, cw+4, 14, 'F');
    doc.setFont('helvetica','bold'); doc.setFontSize(11); doc.setTextColor(255,255,255);
    doc.text('Net Profit', margin+2, y+3);
    doc.setFontSize(14); doc.setTextColor(...gold);
    doc.text('AED '+Math.round(netProfit).toLocaleString('en-US'), W-margin-2, y+3, {align:'right'});
    y += 18;

    doc.setFont('helvetica','italic'); doc.setFontSize(7); doc.setTextColor(180,180,180);
    var disc = 'This report is for illustrative purposes only. Figures are estimates and do not constitute financial or investment advice. Sale prices are not guaranteed. Always obtain professional advice before proceeding.';
    doc.text(doc.splitTextToSize(disc, cw), margin, y);

    doc.setFillColor(...bgDark); doc.rect(0,287,W,10,'F');
    doc.setFont('helvetica','normal'); doc.setFontSize(7.5); doc.setTextColor(180,170,155);
    doc.text('UNIQ Real Estate Broker  |  RERA Licensed  |  www.uniqrealty.co  |  +971 50 778 8073', W/2, 293.5, {align:'center'});
    doc.save('UNIQ-Renovation-Analysis-'+new Date().toISOString().slice(0,10)+'.pdf');
    } catch(e) { alert('PDF error: ' + e.message); console.error(e); }
  }

  /* ── OFF-PLAN PDF ────────────────────────────────────── */
  function roiDownloadOffPlanPDF() {
    var { jsPDF } = window.jspdf;
    var doc = new jsPDF({ unit: 'mm', format: 'a4' });
    var W = 210, margin = 18, cw = W - margin * 2;
    var bgDark=[10,8,6], cardDark=[28,24,20], gold=[176,148,100], dark=[26,26,26], mid=[107,101,96], border=[217,211,202], soft=[245,242,238];

    var price      = roiVal('op_price');
    var dp_pct     = parseFloat(document.getElementById('op_dp').value)     || 20;
    var during_pct = parseFloat(document.getElementById('op_during').value) || 40;
    var months     = parseFloat(document.getElementById('op_months_input') ? document.getElementById('op_months_input').value : null) || parseFloat(document.getElementById('op_months').value) || 36;
    var growth_pct = parseFloat(document.getElementById('op_growth_input').value) || parseFloat(document.getElementById('op_growth').value) || 25;
    var manualHP   = roiVal('op_price_at_handover');
    if (manualHP && manualHP > price) growth_pct = (manualHP - price) / price * 100;
    var handover_pct = Math.max(0, 100 - dp_pct - during_pct);
    var dp_amt       = price * dp_pct / 100;
    var dld_fee      = price * 0.04;
    var agency_fee   = price * 0.02;
    var total_inv    = price + dld_fee + agency_fee;
    var handover_val = price * (1 + growth_pct / 100);
    var resale_fee   = handover_val * 0.02;
    var net_profit   = handover_val - total_inv - resale_fee;
    var roi_deposit  = dp_amt > 0 ? (net_profit / dp_amt * 100) : 0;
    var annual_roi   = months > 0 ? (net_profit / total_inv * 100 / months * 12) : 0;
    var exit_label   = opExit === 'rent' ? 'Rent After Handover' : 'Sell at Handover';
    var today2 = new Date().toLocaleDateString('en-GB',{day:'2-digit',month:'long',year:'numeric'});

    // ── HEADER ──
    doc.setFillColor(...bgDark); doc.rect(0,0,W,40,'F');
    doc.setFillColor(255,255,255); doc.rect(margin-4,4,50,32,'F');
    doc.setDrawColor(...gold); doc.setLineWidth(0.5); doc.rect(margin-4,4,50,32);
    doc.addImage(UNIQ_LOGO_B64, 'JPEG', margin, 9, 40, 20);
    doc.setFont('helvetica','bold'); doc.setFontSize(14); doc.setTextColor(...gold);
    doc.text('Off-Plan Investment Analysis', W-margin, 17, {align:'right'});
    doc.setFont('helvetica','normal'); doc.setFontSize(8); doc.setTextColor(180,170,155);
    doc.text('www.uniqrealty.co  |  +971 50 778 8073', W-margin, 24, {align:'right'});
    doc.text('Report: '+today2+'  |  Exit: '+exit_label, W-margin, 30, {align:'right'});
    doc.setDrawColor(...gold); doc.setLineWidth(0.6); doc.line(0,40,W,40);

    var y = 52;
    var bw = cw/4;

    function mBoxOP(x, lbl, val) {
      doc.setFillColor(...cardDark); doc.rect(x,y,bw-3,28,'F');
      doc.setDrawColor(...gold); doc.setLineWidth(0.4); doc.rect(x,y,bw-3,28);
      doc.setFontSize(7); doc.setFont('helvetica','normal'); doc.setTextColor(...gold);
      doc.text(lbl, x+(bw-3)/2, y+10, {align:'center'});
      doc.setFontSize(10); doc.setFont('helvetica','bold'); doc.setTextColor(255,255,255);
      doc.text(val, x+(bw-3)/2, y+21, {align:'center'});
    }
    mBoxOP(margin,     'Purchase Price',    'AED '+Math.round(price).toLocaleString('en-US'));
    mBoxOP(margin+bw,  'Down Payment',      dp_pct+'%  /  AED '+Math.round(dp_amt).toLocaleString('en-US'));
    mBoxOP(margin+bw*2,'Value at Handover', 'AED '+Math.round(handover_val).toLocaleString('en-US'));
    mBoxOP(margin+bw*3,'Net Profit',        'AED '+Math.round(net_profit).toLocaleString('en-US'));
    y += 36;

    function sHdrOP(t) {
      y += 6;
      doc.setFillColor(...bgDark); doc.rect(margin-2, y, cw+4, 8, 'F');
      doc.setFont('helvetica','bold'); doc.setFontSize(7.5); doc.setTextColor(...gold);
      doc.text(t.toUpperCase(), margin+2, y+5.5);
      y += 13;
    }
    function dRowOP(lbl, val, hi) {
      doc.setFont('helvetica','normal'); doc.setFontSize(9); doc.setTextColor(...mid);
      doc.text(lbl, margin, y);
      doc.setFont('helvetica','bold'); doc.setTextColor(...(hi ? gold : dark));
      doc.text(val, W-margin, y, {align:'right'});
      doc.setDrawColor(...border); doc.setLineWidth(0.25); doc.line(margin,y+2.5,W-margin,y+2.5); y+=9;
    }

    sHdrOP('Payment Plan & Project Details');
    dRowOP('Purchase Price',                    'AED '+Math.round(price).toLocaleString('en-US'));
    dRowOP('Down Payment ('+dp_pct+'%)',         'AED '+Math.round(dp_amt).toLocaleString('en-US'), true);
    dRowOP('During Construction ('+during_pct+'%)','AED '+Math.round(price*during_pct/100).toLocaleString('en-US'));
    dRowOP('On Handover ('+handover_pct+'%)',    'AED '+Math.round(price*handover_pct/100).toLocaleString('en-US'));
    dRowOP('Handover Timeline',                  months+' months ('+(months/12).toFixed(1)+' yrs)');
    dRowOP('Expected Price Growth',              '+'+growth_pct+'%');
    dRowOP('DLD Fee (4%)',                       'AED '+Math.round(dld_fee).toLocaleString('en-US'));
    dRowOP('Agency Fee (2%)',                    'AED '+Math.round(agency_fee).toLocaleString('en-US'));
    dRowOP('Total All-In Investment',            'AED '+Math.round(total_inv).toLocaleString('en-US'), true);

    if (opExit === 'sell') {
      sHdrOP('Exit: Sell at Handover');
      dRowOP('Estimated Value at Handover',      'AED '+Math.round(handover_val).toLocaleString('en-US'), true);
      dRowOP('Resale Agent Fee (2%)',            'AED '+Math.round(resale_fee).toLocaleString('en-US'));
      dRowOP('Price Appreciation',              '+AED '+Math.round(handover_val-price).toLocaleString('en-US'), true);
      dRowOP('ROI on Total Investment',          (net_profit/total_inv*100).toFixed(1)+'%');
      dRowOP('ROI on Down Payment Only',         roi_deposit.toFixed(1)+'%', true);
      dRowOP('Annualised ROI',                   annual_roi.toFixed(1)+'% p.a.');
    } else {
      var ann_rent2 = roiVal('op_annual_rent');
      var svc_chg2  = roiVal('op_service');
      var net_rent2 = ann_rent2 - svc_chg2;
      sHdrOP('Exit: Rent After Handover');
      dRowOP('Estimated Value at Handover',      'AED '+Math.round(handover_val).toLocaleString('en-US'), true);
      dRowOP('Annual Rental Income',             'AED '+Math.round(ann_rent2).toLocaleString('en-US'));
      dRowOP('Annual Service Charge',            'AED '+Math.round(svc_chg2).toLocaleString('en-US'));
      dRowOP('Annual Net Income',                'AED '+Math.round(net_rent2).toLocaleString('en-US'), true);
      dRowOP('Gross Yield on Cost',              (ann_rent2/total_inv*100).toFixed(1)+'%');
      dRowOP('Net Yield on Cost',                (net_rent2/total_inv*100).toFixed(1)+'%', true);
    }

    var mainFigure = opExit==='sell' ? 'AED '+Math.round(net_profit).toLocaleString('en-US') : 'AED '+Math.round(roiVal('op_annual_rent')-roiVal('op_service')).toLocaleString('en-US');
    var mainLabel  = opExit==='sell' ? 'Net Profit at Handover' : 'Annual Net Rental Income';

    // ── KEY FIGURE TOTAL ROW ──
    y += 4;
    doc.setFillColor(...bgDark); doc.rect(margin-2, y-5, cw+4, 14, 'F');
    doc.setFont('helvetica','bold'); doc.setFontSize(11); doc.setTextColor(255,255,255);
    doc.text(mainLabel, margin+2, y+3);
    doc.setFontSize(14); doc.setTextColor(...gold);
    doc.text(mainFigure, W-margin-2, y+3, {align:'right'});
    y += 18;

    // ── OFF-PLAN CALLOUT BOX ──
    doc.setFillColor(...soft); doc.rect(margin,y,cw,14,'F');
    doc.setDrawColor(...border); doc.setLineWidth(0.3); doc.rect(margin,y,cw,14);
    doc.setFillColor(...gold); doc.rect(margin,y,3,14,'F');
    doc.setFont('helvetica','normal'); doc.setFontSize(8); doc.setTextColor(...mid);
    doc.text('Off-Plan Advantage: Control AED '+Math.round(price).toLocaleString('en-US')+' asset with only AED '+Math.round(dp_amt).toLocaleString('en-US')+' deployed today', margin+7, y+6);
    doc.setFont('helvetica','bold'); doc.setTextColor(...gold);
    doc.text('ROI on capital deployed: '+roi_deposit.toFixed(1)+'%   |   Annualised: '+annual_roi.toFixed(1)+'% p.a.', margin+7, y+11);
    y += 20;

    doc.setFont('helvetica','italic'); doc.setFontSize(7); doc.setTextColor(180,180,180);
    doc.text(doc.splitTextToSize('This report is for illustrative purposes only. Off-plan values and handover dates are subject to developer terms. Price appreciation is not guaranteed. Always obtain independent advice before making investment decisions.', cw), margin, y);

    doc.setFillColor(...bgDark); doc.rect(0,287,W,10,'F');
    doc.setFont('helvetica','normal'); doc.setFontSize(7.5); doc.setTextColor(180,170,155);
    doc.text('UNIQ Real Estate Broker  |  RERA Licensed  |  www.uniqrealty.co  |  +971 50 778 8073', W/2, 293.5, {align:'center'});

    doc.save('UNIQ-OffPlan-Analysis-'+new Date().toISOString().slice(0,10)+'.pdf');
    // (old dark header below — replaced)
    var _unused_skip = true; if (!_unused_skip) {
    doc.setFont('helvetica','bold'); doc.setFontSize(26); doc.setTextColor(255,255,255);
    doc.text('UNIQ', margin, 22);
    doc.setFontSize(9); doc.setTextColor(176,148,100); doc.setFont('helvetica','normal');
    doc.text('REAL ESTATE', margin, 29);
    doc.setFont('helvetica','bold'); doc.setFontSize(11); doc.setTextColor(176,148,100);
    doc.text('OFF-PLAN INVESTMENT ANALYSIS', W-margin, 18, { align:'right' });
    doc.setFont('helvetica','normal'); doc.setFontSize(8); doc.setTextColor(200,190,180);
    doc.text('www.uniqrealty.co  |  info@uniqrealty.co  |  +971 50 778 8073', W-margin, 26, { align:'right' });
    doc.setDrawColor(176,148,100); doc.setLineWidth(0.8); doc.line(margin,40,W-margin,40);

    var today = new Date().toLocaleDateString('en-GB',{day:'2-digit',month:'long',year:'numeric'});
    doc.setFontSize(8); doc.setTextColor(107,101,96); doc.setFont('helvetica','normal');
    doc.text('Report generated: ' + today, margin, 47);
    doc.setFillColor(176,148,100); doc.roundedRect(W-margin-52,42,52,8,1,1,'F');
    doc.setFontSize(7); doc.setTextColor(10,8,6); doc.setFont('helvetica','bold');
    doc.text(exit_label, W-margin-26, 47.2, { align:'center' });

    var y = 58;
    var bw = cw/4;
    function mBox(x, lbl, val, hi) {
      if (hi) { doc.setFillColor(176,148,100); } else { doc.setFillColor(245,242,238); }
      doc.rect(x,y-4,bw-2,26,'F');
      doc.setDrawColor(176,148,100); doc.setLineWidth(0.4); doc.rect(x,y-4,bw-2,26);
      doc.setFontSize(7); doc.setFont('helvetica','normal');
      doc.setTextColor(hi?10:107, hi?8:101, hi?6:96);
      doc.text(lbl, x+(bw-2)/2, y+2, {align:'center'});
      doc.setFontSize(11); doc.setFont('helvetica','bold'); doc.setTextColor(10,8,6);
      doc.text(val, x+(bw-2)/2, y+15, {align:'center'});
    }
    mBox(margin,     'Purchase Price',   'AED '+Math.round(price).toLocaleString('en-US'), false);
    mBox(margin+bw,  'Down Payment',     dp_pct+'% = AED '+Math.round(dp_amt).toLocaleString('en-US'), true);
    mBox(margin+bw*2,'Value at Handover','AED '+Math.round(handover_val).toLocaleString('en-US'), false);
    mBox(margin+bw*3,'Net Profit',       'AED '+Math.round(net_profit).toLocaleString('en-US'), false);
    y += 34;

    function sHdr(t) {
      doc.setFillColor(245,242,238); doc.rect(margin,y,cw,8,'F');
      doc.setFontSize(8); doc.setTextColor(176,148,100); doc.setFont('helvetica','bold');
      doc.text(t, margin+4, y+5.5); y += 12;
    }
    function dRow(lbl, val, r, g, b) {
      doc.setFont('helvetica','normal'); doc.setFontSize(9); doc.setTextColor(107,101,96);
      doc.text(lbl, margin, y);
      doc.setFont('helvetica','bold');
      if (r!==undefined){doc.setTextColor(r,g,b);}else{doc.setTextColor(10,8,6);}
      doc.text(val, W-margin, y, {align:'right'});
      doc.setDrawColor(220,215,210); doc.setLineWidth(0.3);
      doc.line(margin,y+2,W-margin,y+2); y += 9;
    }

    sHdr('PAYMENT PLAN & PROJECT DETAILS');
    dRow('Purchase Price (off-plan launch)', 'AED '+Math.round(price).toLocaleString('en-US'));
    dRow('Down Payment ('+dp_pct+'%)',        'AED '+Math.round(dp_amt).toLocaleString('en-US'));
    dRow('During Construction ('+during_pct+'%)','AED '+Math.round(price*during_pct/100).toLocaleString('en-US'));
    dRow('On Handover ('+handover_pct+'%)',   'AED '+Math.round(price*handover_pct/100).toLocaleString('en-US'));
    dRow('Handover Timeline',                months+' months ('+(months/12).toFixed(1)+' years)');
    dRow('Expected Price Growth by Handover', '+'+growth_pct+'%');
    y += 4;

    sHdr('FULL COST BREAKDOWN');
    dRow('Purchase Price',          'AED '+Math.round(price).toLocaleString('en-US'));
    dRow('DLD Registration Fee (4%)','AED '+Math.round(dld_fee).toLocaleString('en-US'), 200,80,80);
    dRow('Agency Fee on Purchase (2%)','AED '+Math.round(agency_fee).toLocaleString('en-US'), 200,80,80);
    dRow('Total Investment (all-in)','AED '+Math.round(total_inv).toLocaleString('en-US'), 176,148,100);
    y += 4;

    if (opExit === 'sell') {
      sHdr('EXIT: SELL AT HANDOVER');
      dRow('Estimated Value at Handover',  'AED '+Math.round(handover_val).toLocaleString('en-US'));
      dRow('Resale Agent Fee (2%)',        'AED '+Math.round(resale_fee).toLocaleString('en-US'), 200,80,80);
      dRow('Price Appreciation',           '+AED '+Math.round(handover_val-price).toLocaleString('en-US'), 176,148,100);
      dRow('ROI on Total Investment',      (net_profit/total_inv*100).toFixed(1)+'%');
      dRow('ROI on Down Payment Only',     roi_deposit.toFixed(1)+'%', 176,148,100);
      dRow('Annualised ROI',               annual_roi.toFixed(1)+'% p.a.');
    } else {
      var ann_rent = roiVal('op_annual_rent');
      var svc_chg  = roiVal('op_service');
      var net_rent = ann_rent - svc_chg;
      sHdr('EXIT: RENT AFTER HANDOVER');
      dRow('Estimated Value at Handover',  'AED '+Math.round(handover_val).toLocaleString('en-US'));
      dRow('Annual Rental Income',         'AED '+Math.round(ann_rent).toLocaleString('en-US'));
      dRow('Annual Service Charge',        'AED '+Math.round(svc_chg).toLocaleString('en-US'));
      dRow('Annual Net Rental Income',     'AED '+Math.round(net_rent).toLocaleString('en-US'), 176,148,100);
      dRow('Gross Yield on Cost',          (ann_rent/total_inv*100).toFixed(1)+'%');
      dRow('Net Yield on Cost',            (net_rent/total_inv*100).toFixed(1)+'%', 176,148,100);
    }
    y += 4;

    // Net profit highlight
    doc.setFillColor(10,8,6); doc.rect(margin,y-4,cw,14,'F');
    doc.setFont('helvetica','bold'); doc.setFontSize(9); doc.setTextColor(255,255,255);
    doc.text(opExit==='sell' ? 'NET PROFIT AT HANDOVER' : 'ANNUAL NET RENTAL INCOME', margin+4, y+4.5);
    doc.setFontSize(13); doc.setTextColor(176,148,100);
    var mainFigure = opExit==='sell' ? 'AED '+Math.round(net_profit).toLocaleString('en-US') : 'AED '+Math.round(roiVal('op_annual_rent')-roiVal('op_service')).toLocaleString('en-US');
    doc.text(mainFigure, W-margin-4, y+5, {align:'right'});
    y += 22;

    doc.setFillColor(245,242,238); doc.rect(margin,y,cw,22,'F');
    doc.setFont('helvetica','normal'); doc.setFontSize(8); doc.setTextColor(107,101,96);
    doc.text('Off-Plan Advantage: You control an AED '+Math.round(price).toLocaleString('en-US')+' asset by deploying only AED '+Math.round(dp_amt).toLocaleString('en-US')+' today.', margin+6, y+7);
    doc.setFont('helvetica','bold'); doc.setTextColor(176,148,100);
    doc.text('ROI on capital deployed today: '+roi_deposit.toFixed(1)+'%   |   Annualised: '+annual_roi.toFixed(1)+'% p.a.', margin+6, y+15);
    y += 28;

    doc.setDrawColor(176,148,100); doc.setLineWidth(0.5); doc.line(margin,y,W-margin,y); y += 6;
    doc.setFont('helvetica','italic'); doc.setFontSize(7.5); doc.setTextColor(107,101,96);
    var disc = 'This report is for illustrative purposes only. Off-plan property values, handover dates and payment plans are subject to developer terms. Price appreciation is not guaranteed. DLD fees, agency commissions and completion timelines may vary. Always obtain independent advice before making investment decisions.';
    var lines = doc.splitTextToSize(disc, cw);
    doc.text(lines, margin, y);

    } // end _unused_skip
  }
  </script>

  <!-- ═══ DEVELOPER PARTNERS ══════════════════════════════════ -->
  <section id="developers" style="background:#fff;padding:64px 0 56px;">
    <div style="text-align:center;margin-bottom:44px;padding:0 40px;">
      <div class="eyebrow" style="justify-content:center;">Partners with Dubai's Leading Developers</div>
      <h2 class="section-title" style="margin-bottom:0;">Our Developer Partners</h2>
    </div>

    <!-- Marquee strip -->
    <style>
      .dev-marquee-outer { overflow:hidden; position:relative; }
      .dev-marquee-outer::before,
      .dev-marquee-outer::after {
        content:''; position:absolute; top:0; bottom:0; width:140px; z-index:2; pointer-events:none;
      }
      .dev-marquee-outer::before { left:0; background:linear-gradient(to right,#fff 40%,transparent); }
      .dev-marquee-outer::after  { right:0; background:linear-gradient(to left,#fff 40%,transparent); }
      .dev-marquee-track {
        display:flex; align-items:center; width:max-content;
        animation: devMarquee 38s linear infinite;
      }
      .dev-marquee-track:hover { animation-play-state:paused; }
      @keyframes devMarquee {
        0%   { transform:translateX(0); }
        100% { transform:translateX(-50%); }
      }
      .dev-logo-cell {
        display:flex; align-items:center; justify-content:center;
        padding:0 56px; height:96px; border-right:1px solid #ede9e2; flex-shrink:0;
      }
      .dev-logo-cell img {
        height:40px; width:auto; max-width:190px; object-fit:contain; display:block;
        opacity:0.85; transition:opacity 0.25s;
      }
      .dev-logo-cell img:hover { opacity:1; }

/* === CLS Prevention === */
img {
  max-width: 100%;
  height: auto;
}
img[loading="lazy"] {
  content-visibility: auto;
}