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

    :root {
      --dark: #0a0a0a;
      --gold: #c9a86c;
      --gold2: #d4be8e;
      --ink: #1d417f;
      --muted: rgba(40, 36, 55, 0.58);
      --rule: rgba(0, 0, 0, 0.08);
      --cream: transparent;
      --blush: rgba(255, 255, 255, 0.04);
      --loader-bg: #ede9f5;
      /* extended tokens */
      --serif: 'Poppins', sans-serif;
      --sans: 'Poppins', sans-serif;
      --mono: 'Poppins', sans-serif;
      --ink-60: rgba(17, 17, 17, 0.60);
      --ink-12: rgba(17, 17, 17, 0.12);
      /* consistent vertical rhythm — applied as padding-TOP only on content
         sections so the gap between any two sections is a single value */
      --sec-space: clamp(48px, 5vw, 76px);

      /* ═══ purva-ui injected tokens (--pu-*) — alias the page's own tokens so
         every injected feature blends & auto-adapts to dark mode ═══ */
      --pu-accent: var(--gold);
      /* #c9a86c gold — primary CTA/active */
      --pu-accent-2: var(--gold2);
      /* #d4be8e lighter gold — hover */
      --pu-on-accent: #0f1c33;
      /* single dark ink for text/icons sitting ON gold */
      --pu-bg: #142c56;
      /* dialog bg — blends w/ the #1d417f glass nav */
      --pu-surface: rgba(255, 255, 255, 0.06);
      /* input/card surface on dark */
      --pu-text: rgba(255, 255, 255, 0.92);
      /* page is locked dark-mode — use explicit light text
                                                     (aliasing var(--ink) fails: its dark value lives on
                                                      body.dark-mode, so a :root alias captures the dark
                                                      light-mode value → invisible text) */
      --pu-muted: rgba(255, 255, 255, 0.62);
      /* secondary text on dark */
      --pu-border: rgba(255, 255, 255, 0.18);
      /* matches footer field/border in dark */
      --pu-error: #ff9a9a;
      /* legible red on dark backdrop */
      --pu-radius: 16px;
      /* dialog radius */
      --pu-radius-pill: 50px;
      /* button radius — mirrors .footer-submit */
      --pu-font-head: var(--serif);
      /* Montserrat */
      --pu-font-body: var(--sans);
      /* Poppins */
      --pu-overlay: rgba(8, 8, 12, 0.92);
      /* modal/lightbox scrim — mirrors .gal-lightbox */
      /* motion — adopt the page's dominant easing so injected motion matches */
      --pu-ease: cubic-bezier(0.16, 1, 0.3, 1);
      --pu-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
      --pu-dur-fast: 180ms;
      --pu-dur: 300ms;
      --pu-dur-slow: 520ms;
    }

    html {
      scroll-behavior: smooth;
      /* Contain any stray horizontal overflow. `hidden` is used (not `clip`) because
         `overflow:clip` is unreliable on iOS 16.0 and failed to contain the honeypot's
         off-screen overflow, expanding the layout viewport and clipping the fixed tab. */
      overflow-x: hidden;
      -webkit-tap-highlight-color: transparent;
      /* kill the mobile tap-flash (inherited by all) */
    }

    /* No blue tap-selection on interactive controls; keyboard :focus-visible outlines are untouched */
    a,
    button,
    [role="button"],
    label,
    .enquire-fab,
    .loc-filter-btn,
    .layout-tab,
    .igal-tab,
    .igal-dot,
    .faq-q,
    .sustain-row,
    .ami-nav,
    .igal-arrow,
    .glb-arrow,
    .pmap-pin,
    .tb-burger {
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
    }

    /* Force Poppins across the whole page */
    *,
    *::before,
    *::after {
      font-family: "Poppins", sans-serif !important;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: #1d417f;
      /* solid brand background — replaces the heritage-bg image */
      color: var(--ink);
      overflow-x: hidden;
      /* see note on html above */
    }

    /* ── DIAMOND DRIFT ANIMATION ────────────────────────────────── */
    /* Layer 1: image background */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -2;
      /* Sattva Amritya page background (dark mode overrides this below).
         No `fixed` attachment — the layer is already position:fixed/inset:0, so it
         stays put while scrolling; `fixed` here breaks the background on iOS Safari
         (it sizes to the whole document → zoomed/misaligned). */
      background: #1d417f;
      opacity: 1;
      pointer-events: none;
    }

    /* ── CURSOR GLOW ─────────────────────────────────────────────── */
    /* Layer 2: soft dark vignette for depth */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      background: none;
      opacity: 1;
      pointer-events: none;
    }

    /* All sections stack normally */
    section,
    nav,
    footer {
      position: relative;
      z-index: 1;
    }

    a{
        text-decoration: none;
    }
    /* loader — unused */
    #loader {
      display: none !important;
    }

    /* ═══════════════════════ TOPBAR ═══════════════════════ */
    #topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 60px;
      background: rgba(29, 65, 127, 0.42);
      backdrop-filter: blur(14px) saturate(1.3);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      border-bottom: 1px solid rgba(150, 180, 235, 0.15);
      transition: padding .5s ease, background .5s ease, border-color .5s ease,
        backdrop-filter .5s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Hidden by default — slides in only when scrolling up */
    #topbar.nav-hidden {
      transform: translateY(-100%);
      pointer-events: none;
    }

    #topbar.scrolled {
      padding: 14px 60px;
      background: rgba(29, 65, 127, 0.58);
      backdrop-filter: blur(20px) saturate(1.5);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      border-bottom: 1px solid rgba(150, 180, 235, 0.18);
    }

    .tb-brand {
      display: flex;
      align-items: center;
      text-decoration: none;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .7s ease 4.1s, transform .7s ease 4.1s;
    }

    .hero-unlocked .tb-brand {
      opacity: 1;
      transform: none;
    }

    .tb-logo-img {
      height: 40px;
      width: auto;
      object-fit: contain;
      filter: brightness(10);
    }

    .tb-brand-name {
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 400;
      letter-spacing: .16em;
      
      color: #fff;
    }

    .tb-nav {
      display: flex;
      align-items: center;
      gap: 22px;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .7s ease 4.2s, transform .7s ease 4.2s;
    }

    .hero-unlocked .tb-nav {
      opacity: 1;
      transform: translateY(0);
    }

    .tb-nav a {
      font-size: 14px;
      letter-spacing: .12em;
      color: rgba(255, 255, 255, .62);
      text-decoration: none;
      font-weight: 500;
      transition: color .25s ease;
    }

    .tb-nav a:hover {
      color: #fff;
    }

    .tb-cta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 9.5px;
      letter-spacing: .22em;
      
      color: #fff;
      text-decoration: none;
      font-weight: 400;
      padding: 10px 20px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 0;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .7s ease 4.3s, transform .7s ease 4.3s,
        border-color .35s ease, color .35s ease;
    }

    .tb-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.10);
      transform: translateX(-101%);
      transition: transform .38s cubic-bezier(.4, 0, .2, 1);
    }

    .tb-cta:hover::before {
      transform: translateX(0);
    }

    .tb-cta:hover {
      border-color: rgba(255, 255, 255, 0.70);
    }

    .hero-unlocked .tb-cta {
      opacity: 1;
      transform: none;
    }

    .tb-cta svg {
      transition: transform .35s cubic-bezier(.4, 0, .2, 1);
      position: relative;
      z-index: 1;
    }

    .tb-cta span {
      position: relative;
      z-index: 1;
    }

    .tb-cta:hover svg {
      transform: translateX(5px);
    }

    .tb-nav-vt {
      font-size: 9.5px;
      letter-spacing: .18em;
      text-transform: none;
      color: rgba(255, 255, 255, 0.82);
      text-decoration: none;
      font-weight: 400;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .7s ease 4.3s, transform .7s ease 4.3s, color .25s ease;
    }

    .tb-nav-vt:hover {
      color: #fff;
    }

    .hero-unlocked .tb-nav-vt {
      opacity: 1;
      transform: none;
    }

    /* Right-side group: nav + CTA together */
    .tb-right-group {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    /* ── Hamburger + mobile menu (shown ≤900px) ── */
    .tb-burger {
      display: none;
      position: relative;
      z-index: 2;
      width: 42px;
      height: 42px;
      padding: 10px;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: transparent;
      border: none;
      cursor: pointer;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .7s ease 4.2s, transform .7s ease 4.2s;
    }

    .hero-unlocked .tb-burger {
      opacity: 1;
      transform: none;
    }

    .tb-burger span {
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: #fff;
      transition: transform .38s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
    }

    body.menu-open .tb-burger span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    body.menu-open .tb-burger span:nth-child(2) {
      opacity: 0;
    }

    body.menu-open .tb-burger span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 495;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 32px 40px;
      background: rgba(20, 44, 88, 0.92);
      -webkit-backdrop-filter: blur(24px) saturate(1.4);
      backdrop-filter: blur(24px) saturate(1.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s .45s;
    }

    body.menu-open .mobile-menu {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: opacity .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
    }

    .mm-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 360px;
    }

    .mm-nav a {
      width: 100%;
      text-align: center;
      padding: 16px 10px;
      font-family: var(--sans);
      font-size: 1rem;
      font-weight: 300;
      letter-spacing: .2em;
      color: rgba(255, 255, 255, 0.82);
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.09);
      opacity: 0;
      transform: translateY(12px);
      transition: color .25s ease;
    }

    .mm-nav a:active,
    .mm-nav a:hover {
      color: #fff;
    }

    .mm-enquire {
      margin-top: 26px;
      padding: 15px 42px;
      cursor: pointer;
      border: none;
      background: var(--pu-accent);
      color: var(--pu-on-accent);
      font-family: var(--pu-font-body);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .24em;
      opacity: 0;
      transform: translateY(12px);
    }

    /* staggered reveal of the menu items */
    body.menu-open .mm-nav a,
    body.menu-open .mm-enquire {
      opacity: 1;
      transform: none;
      transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1), color .25s ease;
    }

    body.menu-open .mm-nav a:nth-child(1) {
      transition-delay: .10s;
    }

    body.menu-open .mm-nav a:nth-child(2) {
      transition-delay: .16s;
    }

    body.menu-open .mm-nav a:nth-child(3) {
      transition-delay: .22s;
    }

    body.menu-open .mm-nav a:nth-child(4) {
      transition-delay: .28s;
    }

    body.menu-open .mm-nav a:nth-child(5) {
      transition-delay: .34s;
    }

    body.menu-open .mm-nav a:nth-child(6) {
      transition-delay: .40s;
    }

    body.menu-open .mm-enquire {
      transition-delay: .46s;
    }

    /* Hide all FAQs after the first 3 */
    .faq-list .faq-item:nth-child(n+4) {
      display: none;
    }

    /* Show all FAQs when expanded */
    .faq-list.expanded .faq-item {
      display: block;
    }

    /* Button */
    .faq-more-wrap {
      text-align: center;
      margin-top: 30px;
    }

    .faq-more-btn {
      padding: 12px 28px;
      border: 1px solid #000;
      background: #fff;
      color: #000;
      cursor: pointer;
      font-size: 14px;
      transition: .3s;
          padding: 13px 36px;
    border-radius: 50px !important;
    }

    .faq-more-btn:hover {
      background: #000;
      color: #fff;
    }

    button#faqMore {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(255, 255, 255, 0.16);
      color: var(--ink);
      border-radius: 10px;
      font-family: 'Poppins', sans-serif;
    }

    .faq-more-btn {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(255, 255, 255, 0.16);
      color: var(--ink);
      border-radius: 10px;
      font-family: 'Poppins', sans-serif;
    }

    .download-lifestyle {
      display: flex;
      width: 100%;
      justify-content: center;
      padding-top: 30px;
    }

    .ty-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 9px 18px;
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .2em;
      text-decoration: none;
      cursor: pointer;
      transition: background .3s ease, border-color .3s ease, color .3s ease, transform .18s var(--ease);
      color: #fff;
      border: 1px solid #ffffff61;
      border-radius: 5px;
    }

    .ty-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    p.video-name {
      padding: 10px;
      position: absolute;
      bottom: 0px;
      text-align: center;
      display: flex;
      justify-content: center;
      width: 100%;
      background-color: #000000e8;
    }

    p.view-name {
      padding: 6px;
      position: absolute;
      bottom: 0pc;
      display: flex;
      justify-content: center;
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
    }

    a.ty-btn.ty-btn--ghost {
      display: none;
    }

    .sub-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 24px;
    }

    .sub-tab {
      padding: 10px 18px;
      border: 1px solid #d9d9d9;
      background: #fff;
      cursor: pointer;
      border-radius: 30px;
      transition: .3s;
    }

    .sub-tab.active {
      background: #111;
      color: #fff;
      border-color: #111;
    }

    /* Swap inline nav → hamburger on tablet/phone */
    @media (max-width: 900px) {
      #topbar {
        padding: 16px 22px;
      }

      a.ty-btn.ty-btn--ghost {
        display: none;
      }

      #topbar.scrolled {
        padding: 12px 22px;
      }

      .tb-logo-img {
        height: 39px;
      }

      .tb-right-group {
        display: none;
      }

      .tb-burger {
        display: flex;
      }
    }

    @media (min-width: 901px) {
      .mobile-menu {
        display: none;
      }

      /* never intercept taps on desktop */
    }


    /* ═══════════════════════ HERO ═══════════════════════ */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 700px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }
    .carousel-inner{
        margin-top: 5rem !important;
    }
    .hero-video-wrap {
      position: absolute;
      inset: 0;
      clip-path: inset(100% 0% 0% 0%);
      animation: banner-rise 1.6s cubic-bezier(0.16, 1, 0.3, 1) 4s forwards;
      will-change: clip-path;
    }

    .hero-unlocked .hero-video-wrap {
      clip-path: inset(0% 0% 0% 0%);
    }

    .hero-video-inner {
      position: absolute;
      inset: 0;
      /* -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%); */
      /* mask-image: linear-gradient(to bottom, black 72%, transparent 100%); */
    }

    .hero-bg-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    /* Mobile: shift the woman left so she doesn't sit under the hero text */
    @media (max-width: 768px) {
        .carousel-inner{
            margin-top: 4.5rem !important;
        }
      .hero-bg-img {
        object-position: 40% center;
      }
      .wb-theme .eoi-section .eoi-left {
    flex: 1 1 164px !important;
      }
          body>section#amenities{
            padding-top: 40px !important
          }
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(to bottom,
          rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .10) 40%,
          rgba(0, 0, 0, .22) 70%, rgba(0, 0, 0, .38) 100%);
    }

    .hero-vignette {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .14) 100%);
    }

    .hero-left-grad {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to right, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .03) 48%, transparent 66%),
        linear-gradient(to left, rgba(0, 0, 0, .06) 0%, transparent 44%);
    }

    .hero-fade-b {
      display: none;
    }

    /* Hero inner — left-aligned heading + details */
    .hero-inner {
      position: relative;
      z-index: 4;
      width: 100%;
      padding: 0 60px 240px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }

    .hero-left-col {
      max-width: 620px;
      margin-left: 0;
      text-align: left;
      display: none !important;
    }

    .hero-brand-name {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(.72rem, 1vw, .86rem);
      font-weight: 400;
      letter-spacing: .34em;
      color: rgba(255, 255, 255, 0.88);
      margin: 0 0 18px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .9s ease 4.4s, transform .9s ease 4.4s;
    }

    .hero-unlocked .hero-brand-name {
      opacity: 1;
      transform: none;
    }

    .hero-heading {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(2rem, 2.4vw, 3.6rem);
      font-weight: 300;
      text-align: center;
      line-height: 1.08;
      letter-spacing: -.025em;
      color: #fff;
      margin-top: 0;
    }

    .hero-heading em {
      font-style: italic;
      color: rgba(255, 255, 255, 0.88);
    }

    .h-line {
      display: block;
      overflow: hidden;
      padding-bottom: .06em;
    }

    .h-line-inner {
      display: block;
      opacity: 1;
      transform: none;
    }

    /* Hero letter-by-letter fade */
    .hero-char {
      display: inline;
      opacity: 0;
      animation: heroCharIn 0.45s ease forwards;
    }

    @keyframes heroCharIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* Hero details — below title in left col */
    .hero-details-block {
            margin-bottom: 30px;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .9s ease 4.8s, transform .9s ease 4.8s;
      margin-top: 28px;
    }

    .hero-unlocked .hero-details-block {
      opacity: 1;
      transform: none;
    }
    
    .hero-detail-row{
        text-align: center;
    }
    .hero-details {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;
    }

    .hero-detail-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, .92);
      font-weight: 300;
    }

    .hero-detail-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      flex-shrink: 0;
    }

    .hero-detail-sep {
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, .28);
    }

    .hero-price {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, 0.82);
      font-weight: 300;
    }

    /* Hero brand logo */
    .hero-brand-logo {
      display: block;
      height: clamp(64px, 7vw, 96px);
      width: auto;
      object-fit: contain;
      object-position: left center;
      filter: brightness(0) invert(1);
      /* render the navy+black logo as clean white on the dark hero */
      margin-top: 32px;
      margin-bottom: 28px;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .85s ease 4.8s, transform .85s ease 4.8s;
    }

    .hero-unlocked .hero-brand-logo {
      opacity: 1;
      transform: none;
    }

    /* Scroll hint — centered at bottom */
    .hero-scroll {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      opacity: 0;
      transition: opacity .9s ease 5.2s;
    }

    .hero-unlocked .hero-scroll {
      opacity: 1;
    }

    .scroll-txt {
      font-size: 8.5px;
      letter-spacing: .32em;
      color: rgba(255, 255, 255, .36);
      font-weight: 300;
      white-space: nowrap;
    }

    .scroll-stick {
      width: 1px;
      height: 38px;
      overflow: hidden;
      position: relative;
    }

    .scroll-stick::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent);
      animation: stickDrop 2s ease-in-out infinite;
    }

    @keyframes stickDrop {
      0% {
        transform: translateY(-100%);
      }

      60% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(100%);
      }
    }

    /* ═══════════════════════ SECTION CONTENT GLASS ═══════════════════════ */
    /* Subtle frosted card behind text content so pattern shows left/right */
    .sec-glass {
      position: relative;
      z-index: 1;
    }

    .sec-glass::before {
      content: '';
      position: absolute;
      inset: 0 -32px;
      background: rgba(224, 234, 250, 0.18);
      backdrop-filter: blur(1px);
      border-radius: 0;
      z-index: -1;
      pointer-events: none;
    }

    /* Wider variant for full sections */
    .sec-glass-wide {
      position: relative;
      background: rgba(222, 232, 250, 0.14);
    }

    /* ═══════════════════════ CONSISTENT SECTION RHYTHM ═══════════════════════
       One authoritative rule so the vertical gap ABOVE every section is identical
       on every screen. Each section contributes its top gap only (padding-bottom:0),
       and stray margins are zeroed — so the gap between any two adjacent sections
       equals exactly one --sec-space. Horizontal padding & the full-bleed hero are
       left untouched. !important is intentional: it overrides the many per-section
       ad-hoc paddings (and their media-query overrides) with a single source of truth. */
   
    body>footer {
      padding-top: var(--sec-space) !important;
      padding-bottom: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    body>footer {
      padding-bottom: 36px !important;
    }

    /* footer keeps its own base */

    /* Mobile: tighten three specific gaps a touch (selector matches the rule above's
       specificity + comes later, so it wins without extra weight) */
    @media (max-width: 768px) {

      body>section#video-gallery,
      body>section#featured {
        padding-top: 32px !important;
      }
    }

   

    /* Mobile: a bit more space above these four sections */
    @media (max-width: 768px) {

      body>section#location,
      body>section#plans,
      body>section#typology,
      body>section#gallery {
        padding-top: calc(var(--sec-space) + 22px) !important;
      }
    }

    /* ═══════════════════════ SHARED SECTION ═══════════════════════ */
    .sec-pad {
      padding: 60px 60px;
    }

    .sec-pad-sm {
      padding: 60px 60px;
    }

    .sec-title {
      font-family: var(--serif);
      font-size: clamp(24px, 5vw, 36px);
      font-weight: 300;
      line-height: 1.05;
      letter-spacing: -.03em;
      color: var(--ink);
      margin-bottom: 30px;
    }

    .sec-title::after {
      content: '';
      display: block;
      width: 72px;
      height: 2px;
      background: var(--ink);
      opacity: 0.55;
      margin: 10px auto 0;
    }

    .sec-title.light {
      color: #fff;
    }

    .sec-title em {
      font-style: normal;
      color: inherit;
    }

    .sec-body {
      font-size: 14.5px;
      line-height: 1.95;
      color: var(--muted);
      font-weight: 300;
    }

    .sec-header-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 56px;
    }

    .btn-text {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 10px;
      letter-spacing: .22em;
      
      color: inherit;
      text-decoration: none;
      font-weight: 400;
      border-bottom: 1px solid currentColor;
      padding-bottom: 3px;
      transition: gap .35s ease;
    }

    .btn-text:hover {
      gap: 20px;
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 15px 40px;
      border: 1px solid rgba(0, 0, 0, .2);
      color: var(--ink);
      text-decoration: none;
      font-size: 10px;
      letter-spacing: .22em;
      
      font-weight: 400;
      transition: all .35s ease;
    }

    .btn-outline:hover {
      background: var(--ink);
      color: #fff;
      border-color: var(--ink);
      gap: 22px;
    }

    .btn-outline.inv {
      border-color: rgba(255, 255, 255, .22);
      color: #fff;
    }

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

    /* Parallax image wrapper */
    .px-wrap {
      overflow: hidden;
    }

    .px-img {
      width: 100%;
      height: 120%;
      object-fit: cover;
      will-change: transform;
    }

    /* Legacy overview classes removed — replaced by .about-sec split layout */

    /* ═══════════════════════ PROJECT HIGHLIGHTS ═══════════════════════ */
    #highlights {
      position: relative;
      padding: 0;
      margin-top: 8px;
      background: transparent;
      /* let the page's colour background show through, like Overview */
      overflow: hidden;
    }

    .hl-header {
      text-align: center;
      padding: 0;
      margin-bottom: 48px;
    }

    .hl-body {
      max-width: 860px;
      margin: 0 auto;
      padding: 0;
      display: block;
    }

    .hl-items-col {
      display: flex;
      flex-direction: column;
    }

    .hl-item {
      display: flex;
      align-items: center;
      gap: 44px;
      padding: 40px 0 40px 0;
      border-bottom: 1px solid rgba(17, 17, 17, 0.07);
      cursor: default;
      position: relative;
      transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hl-item:first-child {
      border-top: 1px solid rgba(17, 17, 17, 0.07);
    }

    /* Gold bar — slides in from bottom on hover */
    .hl-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--gold);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hl-item:hover {
      padding-left: 0;
    }

    .hl-item:hover::before {
      transform: scaleY(0);
    }

    /* Number */
    .hl-num {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.24em;
      color: rgba(17, 17, 17, 0.22);
      font-weight: 400;
      flex-shrink: 0;
      width: 28px;
      transition: color 0.45s ease;
      user-select: none;
    }

    .hl-item:hover .hl-num {
      color: var(--gold);
    }

    /* Title */
    .hl-item-title {
      font-family: var(--serif);
      font-size: clamp(16px, 1.6vw, 22px);
      font-weight: 300;
      color: rgba(17, 17, 17, 0.50);
      margin: 0;
      letter-spacing: -0.02em;
      line-height: 1.35;
      text-wrap: pretty;
      flex: 1;
      transition: color 0.45s ease, letter-spacing 0.45s ease;
    }

    .hl-item:hover .hl-item-title {
      color: var(--ink);
      letter-spacing: 0;
    }

    /* Pointer line — hidden */
    .hl-item-pointer {
      display: none;
    }

    /* Image col — commented out in HTML */
    .hl-img-col {
      display: none;
    }



    /* ═══════════════════════ AMENITIES — BIG + SMALL IMAGE + LIST ═══════════════════════ */
    #amenities {
      position: relative;
      padding: 28px 0 64px;
      background: transparent;
      overflow: hidden;
    }

    .ami-scroll-track,
    .ami-grid {
      display: none;
    }

    .ami-header {
      text-align: center;
      padding: 0 60px;
      margin-bottom: 80px;
    }

    /* ── Flat drag carousel ── */
    .ami-carousel {
      position: relative;
      margin-top: clamp(60px, 10vh, 100px);
    }

    .ami-viewport {
      position: relative;
      max-width: 1080px;
      margin: 0 auto;
      overflow: hidden;
      padding: 12px 0;
    }

    .ami-track {
      display: flex;
      align-items: center;
      /* Fallback (JS not yet run / init failed on some browser): wrap the cards
         into a centered, visible grid so the section is NEVER blank. The coverflow
         single-row + transform behavior is enabled only once JS adds `.ami-ready`. */
      flex-wrap: wrap;
      justify-content: center;
      gap: clamp(20px, 3vw, 36px);
      transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
      cursor: grab;
      touch-action: pan-y;
      will-change: transform;
    }

    .ami-ready .ami-track {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }

    .ami-track.is-dragging {
      transition: none;
      cursor: grabbing;
    }

    .ami-card {
      position: relative;
      flex: 0 0 clamp(200px, 22vw, 300px);
      height: clamp(260px, 28vw, 370px);
      border-radius: 0;
      overflow: hidden;
      opacity: 0;
      transform: scale(0.82);
      transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
      pointer-events: none;
      user-select: none;
    }

    .ami-card-img {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }

    .ami-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 48px;
      /* Leave space for the label */
      background: rgba(0, 0, 0, 0.4);
      transition: opacity 0.6s ease;
    }

    .ami-card.is-active {
      opacity: 1;
      transform: scale(1.05);
      z-index: 2;
      pointer-events: auto;
      cursor: zoom-in;
    }

    .ami-card.is-active::after {
      opacity: 0;
    }

    .ami-card.is-adjacent {
      opacity: 0.5;
      transform: scale(0.86);
      pointer-events: auto;
      cursor: pointer;
    }

    .ami-card-label {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.7);
      /* Black overlay */
      color: #fff;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-align: center;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 2;
    }

    .ami-card-label {
      opacity: 1;
    }

    /* .ami-card.is-active .ami-card-label {
      opacity: 1;
    } */

    /* Prev / next arrows — bold stroke only, no fill */
    .ami-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: none;
      border: none;
      padding: 10px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.85);
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .ami-nav:hover {
      color: #fff;
    }

    .ami-nav svg {
      display: block;
      width: 20px;
      height: 34px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ami-nav-prev {
      left: clamp(8px, 5vw, 70px);
    }

    .ami-nav-next {
      right: clamp(8px, 5vw, 70px);
    }

    .ami-nav-prev:hover {
      transform: translateY(-50%) translateX(-3px);
    }

    .ami-nav-next:hover {
      transform: translateY(-50%) translateX(3px);
    }

    /* ── Amenities responsive (tablet + mobile) ── */
    @media (max-width: 900px) {
      .ami-header {
        margin-bottom: 44px;
        padding: 0 32px;
      }

      .ami-carousel {
        margin-top: clamp(28px, 5vh, 56px);
      }
    }

    @media (max-width: 600px) {
      #amenities {
        padding: 48px 0;
      }

      .ami-header {
        margin-bottom: 32px;
        padding: 0 24px;
      }

      .ami-carousel {
        margin-top: 24px;
      }

      .ami-card {
        flex-basis: clamp(210px, 66vw, 270px);
        height: clamp(270px, 78vw, 340px);
      }

      .ami-card-label {
        font-size: 13px;
      }

      .ami-nav-prev {
        left: 4px;
      }

      .ami-nav-next {
        right: 4px;
      }

      .ami-nav svg {
        width: 16px;
        height: 28px;
      }
    }

    /* Hide old elements */
    .ami-active-name,
    .ami-pill-row,
    .ami-pill-arrow,
    .ami-pill-track,
    .ami-pill-list,
    .ami-pill,
    .ami-pill-indicator {
      display: none !important;
    }

    .ami-split {
      display: grid;
      grid-template-columns: 0.45fr 0.55fr;
      height: clamp(500px, 65vh, 720px);
      gap: 0;
      padding: 0 60px;
    }

    /* Left: tall portrait image */
    .ami-img-col {
      position: relative;
      overflow: visible;
      margin-bottom: 60px;
    }

    .ami-img-col-inner {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 0;
    }

    .ami-img-col-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.25);
      z-index: 2;
      pointer-events: none;
    }

    .ami-img-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      clip-path: inset(100% 0 0 0);
      transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      transform: scale(1.6);
    }

    .ami-img-layer.ami-img-on {
      clip-path: inset(0 0 0 0);
    }

    .ami-img-layer.ami-img-exit {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.5s cubic-bezier(0.4, 0, 1, 1);
    }

    /* Small rectangular image — overlapping right edge */
    .ami-inset-wrap {
      position: absolute;
      top: 50%;
      right: clamp(-160px, -12vw, -116px);
      transform: translateY(-50%);
      width: clamp(140px, 15vw, 220px);
      height: clamp(180px, 20vw, 280px);
      border-radius: 0;
      overflow: hidden;
      z-index: 4;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    }

    .ami-inset-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center top;
      clip-path: inset(100% 0 0 0);
      transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
    }

    .ami-inset-layer.ami-img-on {
      clip-path: inset(0 0 0 0);
    }

    .ami-inset-layer.ami-img-exit {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.5s cubic-bezier(0.4, 0, 1, 1);
    }

    /* Right: scrollable list panel */
    .ami-right-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      /* left padding keeps the name clear of the overlapping inset image */
      padding: 0 clamp(32px, 4vw, 64px) 0 clamp(140px, 13vw, 200px);
      text-align: center;
    }

    .ami-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      position: relative;
    }

    .ami-big-name {
      font-family: var(--serif);
      font-size: clamp(24px, 2.8vw, 32px);
      font-weight: 300;
      letter-spacing: -0.01em;
      line-height: 1.15;
      color: var(--ink);
      transition: opacity 0.35s ease;
    }

    .ami-total-count {
      font-family: var(--sans);
      font-size: clamp(11px, 0.9vw, 13px);
      font-weight: 400;
      letter-spacing: 0.1em;
      color: rgba(17, 17, 17, 0.30);
      margin-top: 4px;
    }

    /* Nav arrows under image */
    .ami-img-arrows {
      position: absolute;
      bottom: -52px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
      z-index: 5;
    }

    .ami-list-arrow {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(17, 17, 17, 0.20);
      background: rgba(17, 17, 17, 0.03);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: border-color 0.28s ease, background 0.28s ease;
    }

    .ami-list-arrow:hover {
      border-color: var(--ink);
      background: var(--ink);
    }

    .ami-list-arrow svg {
      width: 14px;
      height: 14px;
      stroke: rgba(17, 17, 17, 0.55);
      stroke-width: 1.8;
      fill: none;
      transition: stroke 0.28s ease;
    }

    .ami-list-arrow:hover svg {
      stroke: #fff;
    }

    @media (max-width: 900px) {
      .ami-split {
        grid-template-columns: 1fr;
        height: auto;
        padding: 0 24px;
        gap: 32px;
      }

      .ami-img-col {
        min-height: 300px;
        border-radius: 0;
      }

      .ami-right-panel {
        padding: 0;
      }

      #amenities {
        padding: 60px 0;
      }
    }

    /* ═══════════════════════ LOCATION HIGHLIGHTS ═══════════════════════ */
    .location-sec {
      position: relative;
      margin-top: clamp(16px, 3vh, 36px);
      padding: clamp(28px, 4vh, 48px) clamp(24px, 5vw, 80px) clamp(32px, 4.5vh, 52px);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .loc-title {
      position: relative;
      z-index: 4;
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(24px, 5vw, 36px);
      font-weight: 300;
      letter-spacing: .08em;
      color: #fff;
      text-align: center;
    }

    .loc-title::after {
      content: '';
      display: block;
      width: 48px;
      height: 1px;
      background: rgba(255, 255, 255, 0.35);
      margin: 14px auto 0;
    }

    /* ── Stylized inline neighbourhood map ── */
    .loc-map {
      position: relative;
      width: min(820px, 100%);
      margin: 6px auto 0;
    }

    /* Map stage — fully transparent, so the page's own backdrop shows through;
       a soft stroke keeps the edge from looking abruptly clipped */
    .loc-map-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 10 / 7;
      border-radius: 0;
      overflow: hidden;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .loc-map-svg text {
      font-family: var(--sans);
    }

    .loc-map-svg,
    .loc-map-pins {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      transform: scale(1.14);
      transition: transform .9s cubic-bezier(.22, 1, .36, 1);
      transform-origin: 50% 46%;
    }

    .loc-map.is-live .loc-map-svg,
    .loc-map.is-live .loc-map-pins {
      transform: scale(1);
    }

    .loc-map-pins {
      pointer-events: none;
    }

    /* Center (project) marker pulse */
    @keyframes locPulse {
      0% {
        transform: scale(1);
        opacity: .55;
      }

      70% {
        transform: scale(2.8);
        opacity: 0;
      }

      100% {
        transform: scale(2.8);
        opacity: 0;
      }
    }

    .loc-center-pulse {
      transform-box: fill-box;
      transform-origin: center;
      animation: locPulse 2.6s ease-out infinite;
    }

    /* Category pins over the map */
    .loc-pin {
      position: absolute;
      transform: translate(-50%, -50%) scale(0.3);
      opacity: 0;
      transition: opacity .5s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
      pointer-events: auto;
      cursor: default;
    }

    .loc-map.is-live .loc-pin {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .loc-pin-dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .loc-pin-dot svg {
      width: 15px;
      height: 15px;
      stroke: #111;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .loc-pin-label {
      position: absolute;
      left: 50%;
      top: calc(100% + 6px);
      transform: translateX(-50%);
      white-space: nowrap;
      font-family: var(--sans);
      font-size: 9.5px;
      font-weight: 400;
      letter-spacing: .05em;
      
      color: rgba(255, 255, 255, 0.9);
      background: rgba(10, 6, 15, 0.72);
      padding: 3px 8px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      opacity: .82;
      transition: opacity .25s ease;
    }

    .loc-pin:hover {
      z-index: 5;
    }

    .loc-pin:hover .loc-pin-dot {
      transform: scale(1.18);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(255, 255, 255, 0.2);
    }

    .loc-pin:hover .loc-pin-label {
      opacity: 1;
    }

    /* Dense "All" view: keep dots, reveal names on hover only */
    .loc-map-pins.is-dense .loc-pin-label {
      opacity: 0;
    }

    .loc-map-pins.is-dense .loc-pin:hover .loc-pin-label {
      opacity: 1;
    }

    @media (max-width: 620px) {
      .loc-pin-label {
        display: none;
      }

      .loc-pin:hover .loc-pin-label {
        display: block;
      }
    }

    /* ── Real Google Map — zooms in as it scrolls into view ── */
    .loc-gmap {
      width: min(820px, 100%);
      margin: 48px auto 0;
      text-align: center;
    }

    .loc-gmap-label {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 300;
      letter-spacing: .18em;
      
      color: rgba(255, 255, 255, 0.5);
      margin: 0 0 16px;
    }

    .loc-gmap-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
      transform: scale(0.82);
      opacity: 0;
      transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .9s ease;
    }

    .loc-gmap-frame.is-live {
      transform: scale(1);
      opacity: 1;
    }

    .loc-gmap-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* ══════════ PREMIUM NEIGHBOURHOOD MAP ══════════ */
    .pmap {
      position: relative;
      width: min(700px, 100%);
      margin: 6px auto 0;
    }

    .pmap-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 100 / 62;
      border-radius: 0;
      overflow: hidden;
      /* background:
        radial-gradient(120% 120% at 50% 0%, rgba(29, 65, 127, 0.45) 0%, rgba(9, 16, 30, 0.97) 60%),
        #091423; */
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transform: scale(0.9);
      opacity: 0;
      transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .9s ease;
    }

    .pmap.is-live .pmap-stage {
      transform: scale(1);
      opacity: 1;
    }

    .pmap-base,
    .pmap-geo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .pmap-base {
      z-index: 1;
    }

    .pmap-geo {
      z-index: 2;
      pointer-events: none;
      overflow: visible;
    }

    .pmap-stage::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: radial-gradient(92% 82% at 50% 52%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.5) 100%);
    }

    /* distance rings + connectors */
    .pmap-ring {
      fill: none;
      stroke: rgba(255, 255, 255, 0.16);
      stroke-width: 1;
      stroke-dasharray: 3 7;
    }

    .pmap-conn {
      stroke: rgba(255, 255, 255, 0.22);
      stroke-width: 1;
      stroke-dasharray: 2 6;
      opacity: 0;
      transition: opacity .6s ease, stroke .4s ease, stroke-width .4s ease;
    }

    .pmap.is-live .pmap-conn {
      opacity: 1;
    }

    .pmap.is-live .pmap-conn.is-active {
      stroke: rgba(255, 255, 255, 0.9);
      stroke-width: 1.5;
      stroke-dasharray: none;
    }

    .pmap.is-live .pmap-conn.is-dim {
      opacity: .06;
    }

    /* centre marker */
    .pmap-core-ring {
      fill: none;
      stroke: #fff;
      stroke-width: 1.6;
    }

    .pmap-core-dot {
      fill: #fff;
    }

    .pmap-pulse {
      fill: none;
      stroke: #fff;
      stroke-width: 1.4;
      transform-box: fill-box;
      transform-origin: center;
      animation: pmapPulse 3s ease-out infinite;
    }

    .pmap-pulse.d2 {
      animation-delay: 1.5s;
    }

    @keyframes pmapPulse {
      0% {
        transform: scale(0.4);
        opacity: .7;
      }

      80%,
      100% {
        transform: scale(3.4);
        opacity: 0;
      }
    }

    .pmap-core-tag {
      position: absolute;
      left: 50%;
      top: 53%;
      z-index: 6;
      transform: translate(-50%, calc(-100% - 18px));
      text-align: center;
      white-space: nowrap;
      pointer-events: none;
    }

    .pmap-core-tag b {
      display: block;
      font-family: var(--serif);
      font-weight: 400;
      font-size: 15px;
      letter-spacing: .16em;
      color: #fff;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
    }

    .pmap-core-tag span {
      display: block;
      margin-top: 3px;
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: .3em;
      
      color: rgba(255, 255, 255, 0.6);
    }

    /* pins */
    .pmap-pins {
      position: absolute;
      inset: 0;
      z-index: 4;
    }

    .pmap-pin {
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      opacity: 0;
      transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .pmap.is-live .pmap-pin {
      opacity: 1;
    }

    .pmap.is-live .pmap-pin.is-faded {
      opacity: .22;
    }

    .pmap.is-live .pmap-pin.is-faded:hover {
      opacity: 1;
    }

    .pmap-pin-dot {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #17356a;
      border: 1px solid rgba(255, 255, 255, 0.5);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    .pmap-pin-dot svg {
      width: 16px;
      height: 16px;
      stroke: rgba(255, 255, 255, 0.92);
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .3s ease;
    }

    .pmap-pin-name {
      margin-top: 7px;
      font-family: var(--sans);
      font-size: 9.5px;
      font-weight: 400;
      letter-spacing: .06em;
      color: rgba(255, 255, 255, 0.85);
      white-space: nowrap;
      background: rgba(10, 9, 14, 0.72);
      padding: 3px 9px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.09);
      opacity: 0;
      transform: translateY(-3px);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }

    .pmap-pin:hover {
      z-index: 20;
    }

    .pmap-pin:hover .pmap-pin-dot,
    .pmap-pin.is-open .pmap-pin-dot {
      transform: scale(1.14);
      background: #fff;
      border-color: #fff;
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.18);
    }

    .pmap-pin:hover .pmap-pin-dot svg,
    .pmap-pin.is-open .pmap-pin-dot svg {
      stroke: #12100e;
    }

    /* names show on hover (desktop) or tap (mobile) */
    .pmap-pin:hover .pmap-pin-name,
    .pmap-pin.is-open .pmap-pin-name {
      opacity: 1;
      transform: translateY(0);
    }

    /* desktop + tablet have room → also reveal the matched pins' content on filter
       (phones stay tap-to-reveal so the labels don't crowd the small map) */
    @media (min-width: 768px) {
      .pmap-pin.is-highlight .pmap-pin-name {
        opacity: 1;
        transform: translateY(0);
      }

      .pmap-pin:hover {
        z-index: 30;
      }

      /* hovering brings a pin's label to the front to read it */
    }

    /* filter switch = brighten matched dots smoothly (transition already on .pmap-pin-dot),
       fade the rest — the category reads clearly with no crowded/overflowing labels */
    .pmap.is-live .pmap-pin.is-highlight .pmap-pin-dot {
      border-color: rgba(255, 255, 255, 0.92);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(255, 255, 255, 0.08);
    }

    /* popup card */
    .pmap-popup {
      position: absolute;
      z-index: 30;
      left: 0;
      top: 0;
      width: 216px;
      padding: 15px 16px 14px;
      background: rgba(16, 14, 20, 0.9);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(201, 168, 108, 0.42);
      border-radius: 0;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
      transform: translate(-50%, calc(-100% - 22px)) scale(0.96);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease, transform .32s cubic-bezier(.16, 1, .3, 1);
    }

    .pmap-popup.is-visible {
      opacity: 1;
      transform: translate(-50%, calc(-100% - 22px)) scale(1);
      pointer-events: auto;
    }

    .pmap-popup.flip-down {
      transform: translate(-50%, 22px) scale(0.96);
    }

    .pmap-popup.flip-down.is-visible {
      transform: translate(-50%, 22px) scale(1);
    }

    .pmap-popup::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -8px;
      transform: translateX(-50%) rotate(45deg);
      width: 14px;
      height: 14px;
      background: rgba(16, 14, 20, 0.9);
      border-right: 1px solid rgba(201, 168, 108, 0.42);
      border-bottom: 1px solid rgba(201, 168, 108, 0.42);
    }

    .pmap-popup.flip-down::after {
      bottom: auto;
      top: -8px;
      transform: translateX(-50%) rotate(225deg);
    }

    .pmap-pop-cat {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      font-family: var(--sans);
      font-size: 8.5px;
      letter-spacing: .2em;
      
      color: var(--gold2);
    }

    .pmap-pop-cat svg {
      width: 12px;
      height: 12px;
      stroke: var(--gold2);
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .pmap-pop-name {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      color: #fff;
      line-height: 1.25;
      margin-bottom: 11px;
    }

    .pmap-pop-stats {
      display: flex;
      gap: 18px;
    }

    .pmap-pop-stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pmap-pop-stat b {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      color: var(--gold2);
    }

    .pmap-pop-stat span {
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: .16em;
      
      color: rgba(255, 255, 255, 0.5);
    }

    /* map furniture */
    .pmap-compass {
      position: absolute;
      z-index: 5;
      top: 15px;
      right: 17px;
      width: 34px;
      height: 34px;
      opacity: .55;
    }

    .pmap-scale {
      position: absolute;
      z-index: 5;
      left: 18px;
      bottom: 15px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: .55;
    }

    .pmap-scale-bar {
      width: 58px;
      height: 1px;
      background: rgba(255, 255, 255, 0.6);
      position: relative;
    }

    .pmap-scale-bar::before,
    .pmap-scale-bar::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 1px;
      height: 4px;
      background: rgba(255, 255, 255, 0.6);
    }

    .pmap-scale-bar::before {
      left: 0;
    }

    .pmap-scale-bar::after {
      right: 0;
    }

    .pmap-scale span {
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, 0.6);
    }

    @media (max-width: 620px) {
      .pmap-stage {
        border-radius: 0;
      }

      .pmap-core-tag {
        z-index: 7;
      }

      .pmap-core-tag b {
        font-size: 12px;
      }

      .pmap-core-tag span {
        font-size: 7px;
        letter-spacing: .22em;
      }

      /* soft clearing behind the project label so nearby pins can't crowd it */
      .pmap-core-tag::before {
        content: '';
        position: absolute;
        z-index: -1;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        width: 176px;
        height: 84px;
        pointer-events: none;
        background: radial-gradient(ellipse at center,
            rgba(11, 10, 15, 0.90) 0%, rgba(11, 10, 15, 0.58) 40%, rgba(11, 10, 15, 0) 72%);
      }

      .pmap-pin-dot {
        width: 26px;
        height: 26px;
      }

      .pmap-pin-dot svg {
        width: 13px;
        height: 13px;
      }

      .pmap-popup {
        width: 186px;
      }
    }

    .loc-filter-strip {
      position: relative;
      z-index: 7;
      margin: 24px 0 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      background: rgba(18, 18, 18, 0.52);
      backdrop-filter: blur(28px) saturate(1.5);
      -webkit-backdrop-filter: blur(28px) saturate(1.5);
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 50px;
      padding: 6px 8px;
    }

    .loc-filter-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      height: 40px;
      min-width: 40px;
      border-radius: 20px;
      border: none;
      outline: none;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.60);
      cursor: pointer;
      padding: 0 11px;
      overflow: hidden;
      white-space: nowrap;
      transition:
        background 0.30s ease,
        color 0.30s ease,
        gap 0.42s cubic-bezier(.22, 1, .36, 1),
        padding 0.42s cubic-bezier(.22, 1, .36, 1);
    }

    .loc-filter-btn svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .loc-filter-btn-label {
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 400;
      letter-spacing: .15em;
      
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      transition:
        max-width 0.42s cubic-bezier(.22, 1, .36, 1),
        opacity 0.30s ease 0.12s;
      /* fade in as the tab widens → smooth, not abrupt */
    }

    /* hover = just a white highlight (no label expand, so nothing reflows). Only real
       hover devices get it; the label text appears on click/select (below). */
    @media (hover: hover) {
      .loc-filter-btn:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
      }
    }

    .loc-filter-btn.loc-selected {
      background: rgba(255, 255, 255, 0.90);
      color: #111;
      gap: 8px;
      padding: 0 16px;
    }

    .loc-filter-btn.loc-selected svg {
      stroke: #111;
    }

    .loc-filter-btn.loc-selected .loc-filter-btn-label {
      max-width: 130px;
      opacity: 1;
    }

    /* Hide new elements that don't exist in old layout */
    .loc-header-row,
    .loc-split,
    .loc-map-col,
    .loc-map-wrap,
    .loc-pip-group,
    .loc-accordion,
    .loc-row,
    .loc-place-idx {
      display: none !important;
    }

    /* ═══════════════════════ TYPOLOGY / CONFIGURATION ═══════════════════════ */
    .typology-sec {
      background: transparent;
      padding: 400px 60px 20px;
      margin-top: 0;
      text-align: center;
    }

    .typology-ornament {
      display: none;
    }

    .typology-table {
      width: 100%;
      max-width: 1100px;
      margin: 40px auto 0;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .typology-table thead tr {
      border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    }

    .typology-table th {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .02em;
      color: var(--ink);
      padding: 0 0 18px;
      text-align: center;
      width: 33.33%;
    }

    .typology-table td {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 300;
      color: var(--ink);
      padding: 14px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      text-align: center;
    }

    .typology-dl {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: .16em;
      
      color: var(--ink);
      text-decoration: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.28);
      padding-bottom: 2px;
      transition: color .22s, border-color .22s;
    }

    .typology-dl:hover {
      color: var(--muted);
      border-color: rgba(0, 0, 0, 0.18);
    }

    /* ═══════════════════════ LAYOUT PLANS ═══════════════════════ */
    .layouts-sec {
      background: transparent;
      padding: 672px 0 0;
      display: grid;
      grid-template-columns: 200px 1fr;
      border-top: none;
      max-width: 1320px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }

    .layouts-title-row {
      grid-column: 1 / -1;
      padding: 0 60px 48px;
      text-align: center;
    }

    .layouts-title-row .sec-title {
      font-size: clamp(24px, 5vw, 36px);
      margin: 0;
      text-align: center;
    }

    .layouts-title-row .sec-title::after {
      margin: 6px auto 0;
    }

    .layouts-body {
      display: contents;
    }

    .layouts-sidebar {
      padding: 0 20px 0 60px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-self: start;
      padding-top: 20px;
      min-height: 0;
    }

    .layouts-tabs {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }

    .layout-tab {
      padding: 18px 0;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: none;
      font-family: var(--sans);
      font-weight: 400;
      color: rgba(17, 17, 17, 0.35);
      cursor: pointer;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.10);
      background: transparent;
      text-align: left;
      transition: color .28s;
      position: relative;
    }

    .layout-tab::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--ink);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .28s ease;
    }

    .layout-tab:hover {
      color: var(--ink);
    }

    .layout-tab.active {
      color: var(--ink);
      font-weight: 400;
    }

    .layout-tab.active::after {
      transform: scaleX(1);
    }

    .layouts-main {
      padding: 0 60px 0 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
    }

    .layout-panel {
      display: none;
      width: 100%;
    }

    .layout-panel.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0;
    }

    .lp-sub-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
      margin-bottom: 0;
      width: 100%;
      max-width: 860px;
    }

    .lp-sub-tab {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: .12em;
      
      color: var(--muted);
      background: transparent;
      border: 1px solid rgba(17, 17, 17, 0.15);
      border-radius: 0;
      padding: 6px 14px;
      cursor: pointer;
      transition: color .22s, border-color .22s;
    }

    .lp-sub-tab:hover {
      color: var(--ink);
      border-color: rgba(17, 17, 17, 0.4);
    }

    .lp-sub-tab.active {
      color: var(--ink);
      border-color: var(--ink);
      font-weight: 400;
    }

    .layout-plan-wrap {
      background: transparent;
      border-radius: 0;
      height: 500px;
      overflow: hidden;
      position: relative;
      width: 100%;
      max-width: 720px;
    }

    #tab-master-plan .layout-plan-wrap {
      height: 480px;
      max-width: 960px;
    }

    #tab-floor-plan .layout-plan-wrap {
      height: 500px;
      max-width: 720px;
    }

    #tab-unit-plan .layout-plan-wrap {
      height: 400px;
      max-width: 600px;
    }

    .layout-plan-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      will-change: transform;
    }

    /* ═══════════════════════ GALLERY — SPLIT IMAGE + LIST ═══════════════════════ */
    .gallery-sec {
      background: transparent;
      padding: 100px 0 0;
      border-top: none;
      overflow: hidden;
    }

    .gal-sec-header {
      text-align: center;
      padding: 0 60px 18px;
    }

    .gal-tab-wrap,
    .gal-tab-bar,
    .gal-tab-btn {
      display: none;
    }

    .gal-panel,
    .gal-strip-wrap,
    .gal-strip,
    .gal-nav-arrow {
      display: none !important;
    }

    .gal-split {
      display: grid;
      grid-template-columns: 2.3fr 1fr;
      height: clamp(400px, 50vh, 560px);
    }

    .gal-split-img {
      position: relative;
      overflow: hidden;
      height: 100%;
      border-radius: 0;
    }

    .gal-split-img-layer {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      clip-path: inset(100% 0 0 0);
      transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .gal-split-img-layer.gal-img-active {
      clip-path: inset(0 0 0 0);
    }

    .gal-split-img-layer.gal-img-exit {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.5s cubic-bezier(0.4, 0, 1, 1);
    }

    .gal-split-list-panel {
      background: transparent;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: clamp(20px, 2.5vw, 36px) clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 36px) clamp(48px, 5.5vw, 84px);
      height: 100%;
      text-align: left;
    }

    .gal-tab-row {
      display: flex;
      flex-direction: row;
      gap: 6px;
      align-self: flex-start;
      margin-bottom: 22px;
      border-bottom: none;
    }

    .gal-tab-toggle {
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      font-family: var(--serif);
      font-size: clamp(13px, 1.1vw, 16px);
      font-weight: 400;
      letter-spacing: 0.05em;
      text-transform: none;
      color: rgba(17, 17, 17, 0.32);
      padding: 6px 16px 8px;
      cursor: pointer;
      text-align: center;
      transition: color 0.3s ease, border-color 0.3s ease;
    }

    .gal-tab-toggle:hover {
      color: rgba(17, 17, 17, 0.60);
    }

    .gal-tab-toggle--active {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }

    .gal-split-list {
      list-style: none;
      margin: 0;
      padding: 0;
      width: auto;
      display: none;
      text-align: left;
    }

    .gal-split-list--active {
      display: block;
    }

    .gal-split-list li {
      font-family: var(--serif);
      font-size: clamp(14px, 1.4vw, 18px);
      font-weight: 300;
      font-style: italic;
      letter-spacing: 0;
      line-height: 1.5;
      color: rgba(17, 17, 17, 0.22);
      cursor: pointer;
      transition: color 0.4s ease, font-size 0.4s ease;
      padding: 5px 0;
      border-bottom: none;
    }

    .gal-split-list li:hover {
      color: rgba(17, 17, 17, 0.50);
    }

    .gal-split-list li.gal-list-active {
      color: var(--ink);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(19px, 2vw, 28px);
    }

    /* ── Image Gallery — 3D coverflow wall ── */
    .gal-sec-header .sec-title {
      margin-bottom: 0;
    }

    .igal-tabs {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 30px;
    }

    .igal-tab {
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .04em;
      color: rgba(17, 17, 17, 0.34);
      padding: 4px 14px 6px;
      cursor: pointer;
      transition: color .3s ease, border-color .3s ease;
    }

    .igal-tab:hover {
      color: rgba(17, 17, 17, 0.6);
    }

    .igal-tab--active {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }

    .igal-hidden {
      display: none !important;
    }

    .igal-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: clamp(320px, 28vw, 420px);
      perspective: 1500px;
      margin: 0 auto;
      max-width: 1320px;
    }

    .igal-track {
      position: relative;
      width: 100%;
      height: 100%;
      /* perspective on the cards' direct parent + flat compositing (NOT preserve-3d):
         cards still show their rotateY tilt, but they stack by z-index instead of 3D
         depth — so the centre card (z-index:6) always paints over the side cards. With
         preserve-3d the side cards' forward-tilted edge would overlap the centre. */
      perspective: 1500px;
      transform-style: flat;
    }

    .igal-card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(320px, 34vw, 500px);
      aspect-ratio: 16 / 10;
      /* Landscape */
      border-radius: 0;
      overflow: hidden;
      cursor: pointer;
      transform: translate(-50%, -50%);
      /* same smooth easing/feel as the Amenities carousel */
      transition: transform .6s cubic-bezier(0.65, 0, 0.35, 1),
        opacity .6s ease,
        filter .6s ease;
      will-change: transform, opacity;
    }

    /* during a category swap, freeze cards so the new set is placed instantly
       (behind the faded track) → the crossfade shows them already positioned */
    .igal-track.igal-no-anim .igal-card {
      transition: none !important;
    }

    .igal-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    .igal-card[data-cpos="0"] {
      transform: translate(-50%, -50%) scale(1) rotateY(0deg);
      z-index: 6;
      opacity: 1;
      filter: brightness(1);
      /* z-index now governs stacking (track is flat) */
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34), 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .igal-card[data-cpos="1"] {
      transform: translate(calc(-50% + clamp(180px, 26vw, 340px)), -50%) scale(0.82) rotateY(-8deg);
      z-index: 5;
      opacity: .88;
      filter: brightness(.85);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    }

    .igal-card[data-cpos="-1"] {
      transform: translate(calc(-50% - clamp(180px, 26vw, 340px)), -50%) scale(0.82) rotateY(8deg);
      z-index: 5;
      opacity: .88;
      filter: brightness(.85);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    }

    .igal-card[data-cpos="2"] {
      transform: translate(calc(-50% + clamp(320px, 46vw, 580px)), -50%) scale(0.66) rotateY(-14deg);
      z-index: 3;
      opacity: 0;
      pointer-events: none;
    }

    .igal-card[data-cpos="-2"] {
      transform: translate(calc(-50% - clamp(320px, 46vw, 580px)), -50%) scale(0.66) rotateY(14deg);
      z-index: 3;
      opacity: 0;
      pointer-events: none;
    }

    .igal-card[data-cpos="3"] {
      transform: translate(calc(-50% + clamp(260px, 30vw, 430px)), -50%) scale(0.55) rotateY(-16deg);
      z-index: 2;
      opacity: 0;
      pointer-events: none;
    }

    .igal-card[data-cpos="-3"] {
      transform: translate(calc(-50% - clamp(260px, 30vw, 430px)), -50%) scale(0.55) rotateY(16deg);
      z-index: 2;
      opacity: 0;
      pointer-events: none;
    }

    /* Caption on the centre card */
    .igal-cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 30px 14px 14px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
      color: #fff;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .04em;
      text-align: center;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .5s ease .12s, transform .5s ease .12s;
    }

    .igal-card[data-cpos="0"] .igal-cap {
      opacity: 1;
      transform: translateY(0);
    }

    /* Arrows — match the Amenities nav (stroke-only chevron, no fill) */
    .igal-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: none;
      border: none;
      padding: 10px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .igal-arrow:hover {
      color: #fff;
    }

    .igal-arrow svg {
      display: block;
      width: 20px;
      height: 34px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* positioned from the centre so they sit outside the cards with a breathable gap */
    /* edge-anchored so the image + video galleries' arrows sit at the same screen offset */
    .igal-arrow--prev {
      left: clamp(44px, 5vw, 58px);
    }

    .igal-arrow--next {
      right: clamp(44px, 5vw, 58px);
    }

    .igal-arrow--prev:hover {
      transform: translateY(-50%) translateX(-3px);
    }

    .igal-arrow--next:hover {
      transform: translateY(-50%) translateX(3px);
    }

    /* Dots */
    .igal-dots {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 30px;
    }

    .igal-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(17, 17, 17, 0.15);
      border: none;
      cursor: pointer;
      transition: background .3s ease, transform .3s ease;
    }

    .igal-dot.active {
      background: var(--ink);
      transform: scale(1.3);
    }

    @media (max-width: 900px) {
      .igal-wrap {
        height: clamp(360px, 74vw, 470px);
      }

      .igal-card {
        width: clamp(170px, 48vw, 260px);
      }

      .igal-card[data-cpos="1"] {
        transform: translate(calc(-50% + 30vw), -50%) scale(0.9) rotateY(-28deg);
      }

      .igal-card[data-cpos="-1"] {
        transform: translate(calc(-50% - 30vw), -50%) scale(0.9) rotateY(28deg);
      }

      .igal-card[data-cpos="2"] {
        transform: translate(calc(-50% + 52vw), -50%) scale(0.78) rotateY(-40deg);
      }

      .igal-card[data-cpos="-2"] {
        transform: translate(calc(-50% - 52vw), -50%) scale(0.78) rotateY(40deg);
      }

      .igal-arrow svg {
        width: 16px;
        height: 28px;
      }
    }

    /* Video gallery header */
    .vidgal-header {
      text-align: center;
      padding: 0 60px 0;
    }

    .vidgal-header .sec-title {
      margin-bottom: 0;
    }

    @media (max-width: 900px) {
      .gal-split {
        grid-template-columns: 1fr;
        height: auto;
      }

      .gal-split-img {
        min-height: 300px;
        height: 300px;
      }

      .gal-split-list-panel {
        align-items: center;
        padding: 40px 24px;
        height: auto;
      }
    }

    /* ── Stacked card gallery ── */
    .lb-section {
      background: transparent;
      padding: 8px 0 40px;
      overflow: visible;
    }

    .lb-stack-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(28px, 4vw, 52px);
      padding: 24px 0 16px;
      overflow: visible;
    }

    .lb-stack-stage {
      position: relative;
      flex-shrink: 0;
      width: clamp(220px, 24vw, 340px);
      aspect-ratio: 3 / 4;
      overflow: visible;
      /* equal breathing room on both sides for the back cards */
      margin: 0 clamp(52px, 7vw, 90px);
    }

    .lb-stack-card {
      position: absolute;
      inset: 0;
      border-radius: 0;
      overflow: hidden;
      transition: transform 0.52s cubic-bezier(.16, 1, .3, 1),
        opacity 0.45s ease,
        box-shadow 0.45s ease;
      will-change: transform, opacity;
    }

    .lb-stack-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    /* Front card — fully visible, centred */
    .lb-stack-card[data-spos="0"] {
      transform: none;
      z-index: 3;
      opacity: 1;
      box-shadow: 0 20px 56px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.09);
    }

    /* Right back card — peeks right, slight clockwise tilt */
    .lb-stack-card[data-spos="1"] {
      transform: translate(28px, 8px) rotate(5deg);
      transform-origin: bottom center;
      z-index: 2;
      opacity: 0.78;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13);
    }

    /* Left back card — mirror: peeks left, anti-clockwise tilt */
    .lb-stack-card[data-spos="2"] {
      transform: translate(-28px, 8px) rotate(-5deg);
      transform-origin: bottom center;
      z-index: 2;
      opacity: 0.78;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13);
    }

    /* Off-screen cards */
    .lb-stack-card[data-spos="out"] {
      transform: scale(0.85);
      opacity: 0;
      pointer-events: none;
      z-index: 0;
    }

    .lb-arrow-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(17, 17, 17, 0.25);
      background: rgba(17, 17, 17, 0.04);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.28s ease, background 0.28s ease, transform 0.28s ease;
    }

    .lb-arrow-btn:hover {
      border-color: var(--ink);
      background: var(--ink);
      transform: scale(1.08);
    }

    .lb-arrow-btn svg {
      width: 16px;
      height: 16px;
      stroke: rgba(17, 17, 17, 0.65);
      stroke-width: 1.8;
      fill: none;
      transition: stroke 0.28s ease;
    }

    .lb-arrow-btn:hover svg {
      stroke: #fff;
    }

    .lb-counter {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: .14em;
      color: rgba(17, 17, 17, 0.38);
      text-align: center;
      padding-bottom: 24px;
    }

    /* ── Lightbox ── */
    .gal-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(8, 8, 12, 0.90);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .38s cubic-bezier(.16, 1, .3, 1);
      backdrop-filter: blur(6px);
    }

    .gal-lightbox.lb-on {
      opacity: 1;
      pointer-events: auto;
    }

    .gal-lb-inner {
      position: relative;
      width: min(940px, 90vw);
    }

    .gal-lb-inner iframe {
      width: 100%;
      aspect-ratio: 16/9;
      border: 0;
      border-radius: 0;
      display: block;
    }

    .gal-lb-close {
      position: absolute;
      top: -44px;
      right: 0;
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.75);
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: .18em;
      
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: color .22s;
    }

    .gal-lb-close:hover {
      color: #fff;
    }

    .gal-lb-close svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      stroke-width: 1.5;
      fill: none;
    }

    /* ═══════════════════════ SUSTAINABILITY ═══════════════════════ */
    #featured {
      padding: 56px 0;
      background: transparent;
      border-top: none;
      overflow: hidden;
    }

    .sustain-hd {
      padding: 0 60px 20px;
      border-bottom: none;
      text-align: center;
    }

    .sustain-hd .sec-title {
      text-align: center;
      font-size: clamp(24px, 5vw, 36px);
      margin: 0;
      white-space: nowrap;
    }

    .sustain-media-col {
      display: none;
    }

    /* ── Two-column layout: points left, image right — image box matches gallery ── */
    .sustain-grid {
      display: grid;
      grid-template-columns: 1fr 0.85fr;
      gap: 0 clamp(56px, 6vw, 96px);
      padding: 40px 60px 20px;
      max-width: 1180px;
      margin: 0 auto;
      /* centre the block on the page */
      align-items: center;
    }

    .sustain-img-side {
      grid-column: 2;
      grid-row: 1;
      height: clamp(360px, 48vh, 540px);
      border-radius: 0;
      overflow: hidden;
      align-self: center;
    }

    .sustain-img-side img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.4s ease;
    }

    .sustain-rows {
      grid-column: 1;
      grid-row: 1;
      list-style: none;
      padding: 0 0 0 clamp(40px, 8vw, 140px);
      margin: 0;
    }

    .sustain-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(17, 17, 17, 0.06);
    }

    .sustain-row:first-child {
      border-top: 1px solid rgba(17, 17, 17, 0.06);
    }

    .sr-row-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      position: relative;
      z-index: 1;
    }

    .sr-chevron {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      color: rgba(17, 17, 17, 0.35);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    }

    .sustain-row:hover .sr-chevron {
      color: var(--ink);
    }

    .sustain-row.sr-open .sr-chevron {
      transform: rotate(180deg);
      color: var(--ink);
    }

    /* Sweep on hover — disabled */
    .sustain-row::after {
      display: none;
    }

    /* Diamond icon */
    .sr-diamond {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: rgba(224, 234, 250, 0.90);
      border-radius: 50%;
      border: 1px solid rgba(150, 180, 235, 0.35);
      margin-right: 16px;
      margin-top: 2px;
      opacity: 0.7;
      transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s ease, border-color 0.4s ease;
      position: relative;
      z-index: 1;
    }

    .sr-diamond svg path {
      fill: rgba(17, 17, 17, 0.25);
      transition: fill 0.4s ease;
    }

    .sustain-row:hover .sr-diamond {
      transform: rotate(12deg);
      opacity: 1;
      border-color: rgba(17, 17, 17, 0.5);
    }

    .sustain-row:hover .sr-diamond svg path {
      fill: var(--ink);
    }

    .sr-right-col {
      flex: 1;
      position: relative;
      z-index: 1;
    }

    .sr-title {
      font-family: var(--serif);
      font-size: clamp(14px, 1.3vw, 17px);
      font-weight: 400;
      letter-spacing: -.01em;
      color: rgba(17, 17, 17, 0.48);
      line-height: 1.3;
      position: relative;
      padding-bottom: 3px;
      transition: color 0.45s ease;
    }

    .sr-title::after {
      display: none;
    }

    .sustain-row:hover .sr-title {
      color: var(--ink);
    }

    .sr-detail {
      display: none;
    }

    .sr-detail-list {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.6s cubic-bezier(.4, 0, .2, 1);
      font-family: var(--sans);
      font-size: clamp(13.5px, 1.2vw, 15.5px);
      line-height: 1.75;
      color: rgba(17, 17, 17, 0.75);
      font-weight: 300;
      position: relative;
      z-index: 1;
    }

    .sustain-row.sr-open .sr-detail-list {
      max-height: 360px;
      /* room for the content so it never clips mid-slide */
      padding-bottom: 14px;
    }

    .sr-detail-list li {
      padding-left: 14px;
      position: relative;
      text-wrap: pretty;
      margin-bottom: 0;
    }

    .sr-detail-list li::before {
      content: '—';
      position: absolute;
      left: 0;
      color: rgba(17, 17, 17, 0.22);
    }

    /* ── Sustainability responsive: stack on mobile, IMAGE FIRST then the tabs ── */
    @media (max-width: 768px) {
      .sustain-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 24px 14px;
      }

      .sustain-img-side {
        grid-column: 1;
        grid-row: 1;
        height: clamp(220px, 56vw, 340px);
      }

      .sustain-rows {
        grid-column: 1;
        grid-row: 2;
        padding-left: 0;
      }

      .sustain-row.sr-open .sr-detail-list {
        max-height: 460px;
      }
    }

    /* Hide inline timeline images — use sidebar image instead */
    .sr-tl-img {
      display: none;
    }

    .sr-img-col {
      display: none;
    }

    /* Legacy — hidden */
    .sustain-new-layout {
      display: none;
    }

    .sr-section-head {
      display: none;
    }

    .sr-layout {
      display: none;
    }

    .sr-content {
      display: none;
    }

    .sr-img-a {
      display: none;
    }

    .sr-img-b {
      display: none;
    }

    .ami-arr-btn {
      display: none;
    }




    /* ═══════════════════════ SUSTAINABILITY (legacy — hidden) ═══════════════════════ */
    .sustain-sec {
      display: none;
    }

    .sustain-left {
      display: none;
    }

    .sustain-right {
      display: none;
    }

    .sustain-img-clip {
      display: none;
    }

    .sustain-points {
      display: none;
    }

    .sp-item {
      display: none;
    }

    .sp-head {
      display: none;
    }

    .sp-num {
      display: none;
    }

    .sp-name {
      display: none;
    }

    .sp-bullets {
      display: none;
    }

    /* ═══════════════════════ FAQ ═══════════════════════ */
    .faq-sec {
      background: transparent;
      padding: 40px 60px 40px;
      text-align: center;
    }

    .faq-sec .sec-title {
      text-align: center;
    }

    .faq-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
    }

    .faq-intro {
      display: none;
    }

    .faq-list {
      width: 100%;
      max-width: 1000px;
    }

    .faq-list {}

    .faq-item {
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .faq-item:first-child {
      border-top: none;
    }

    .faq-q {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }

    .faq-q-txt {
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 400;
      color: var(--ink);
      letter-spacing: -.01em;
      padding-right: 20px;
    }

    .faq-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      stroke: var(--ink);
      fill: none;
      transition: transform .3s ease;
    }

    .faq-item.open .faq-icon {
      transform: rotate(180deg);
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .6s cubic-bezier(.4, 0, .2, 1);
    }

    .faq-a-inner {
      padding: 0 40px 24px 0;
      font-size: 15.5px;
      line-height: 1.85;
      color: #000 !important;
      font-weight: 300;
      text-align: left;
    }

    /* ═══════════════════════ VIDEO GALLERY — COVERFLOW CAROUSEL ═══════════════════════ */
    .vidgal-sec {
      padding: var(--sec-space) 0 10px;
      border-top: none;
      background: transparent;
      overflow: hidden;
    }

    .vidgal-carousel-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: clamp(300px, 38vw, 480px);
      perspective: 1200px;
      margin: 0 auto;
      max-width: 1400px;
    }

    .vidgal-carousel-track {
      position: relative;
      width: 100%;
      height: 100%;
      /* see .igal-track: perspective here + flat compositing so the centre video card
         (z-index:5) stacks above the rotateY side cards instead of depth-sorting */
      perspective: 1200px;
      transform-style: flat;
    }

    .vidgal-card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(320px, 42vw, 580px);
      aspect-ratio: 16/10;
      border-radius: 0;
      overflow: hidden;
      cursor: pointer;
      transform: translate(-50%, -50%);
      /* same smooth easing as the Image Gallery / Amenities carousels */
      transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.6s ease,
        box-shadow 0.6s ease,
        filter 0.6s ease;
      will-change: transform, opacity;
    }

    .vidgal-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      pointer-events: none;
    }

    /* Center card */
    .vidgal-card[data-cpos="0"] {
      transform: translate(-50%, -50%) scale(1) rotateY(0deg);
      z-index: 5;
      /* z-index now governs stacking (track is flat) */
      opacity: 1;
      filter: brightness(1);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    /* Right card */
    .vidgal-card[data-cpos="1"] {
      transform: translate(calc(-50% + clamp(180px, 26vw, 340px)), -50%) scale(0.82) rotateY(-8deg);
      z-index: 3;
      opacity: 0.85;
      filter: brightness(0.88);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    }

    /* Left card */
    .vidgal-card[data-cpos="-1"] {
      transform: translate(calc(-50% - clamp(180px, 26vw, 340px)), -50%) scale(0.82) rotateY(8deg);
      z-index: 3;
      opacity: 0.85;
      filter: brightness(0.88);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    }

    /* Far right (hidden) */
    .vidgal-card[data-cpos="2"] {
      transform: translate(calc(-50% + clamp(320px, 46vw, 580px)), -50%) scale(0.65) rotateY(-14deg);
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      filter: brightness(0.7);
    }

    /* Far left (hidden) */
    .vidgal-card[data-cpos="-2"] {
      transform: translate(calc(-50% - clamp(320px, 46vw, 580px)), -50%) scale(0.65) rotateY(14deg);
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      filter: brightness(0.7);
    }

    /* Play button overlay */
    .vidgal-play {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.12);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .vidgal-card[data-cpos="0"] .vidgal-play {
      opacity: 1;
    }

    .vidgal-play-btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
      transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    }

    .vidgal-play-btn svg {
      width: 18px;
      height: 18px;
      fill: #111;
      margin-left: 3px;
    }

    .vidgal-card[data-cpos="0"]:hover .vidgal-play-btn {
      transform: scale(1.12);
    }

    /* Arrow buttons — match the Amenities nav (stroke-only chevron, no fill) */
    .vidgal-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: none;
      border: none;
      padding: 10px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .vidgal-arrow:hover {
      color: #fff;
    }

    .vidgal-arrow svg {
      display: block;
      width: 20px;
      height: 34px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .vidgal-arrow--prev {
      left: clamp(44px, 5vw, 58px);
    }

    .vidgal-arrow--next {
      right: clamp(44px, 5vw, 58px);
    }

    .vidgal-arrow--prev:hover {
      transform: translateY(-50%) translateX(-3px);
    }

    .vidgal-arrow--next:hover {
      transform: translateY(-50%) translateX(3px);
    }

    /* Dots */
    .vidgal-dots {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 28px;
    }

    .vidgal-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(17, 17, 17, 0.15);
      border: none;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    .vidgal-dot.active {
      background: var(--ink);
      transform: scale(1.3);
    }

    @media (max-width: 900px) {
      .vidgal-sec {
        padding: 60px 0;
      }

      .vidgal-carousel-wrap {
        height: clamp(320px, 70vw, 440px);
      }
    }

    /* ═══════════════════════ FOOTER ═══════════════════════ */
    /* ═══════════════════════ PORTRAIT GALLERY SCROLL ═══════════════════════ */

    /* ═══════════════════════ ABOUT US ═══════════════════════ */
    .about-sec {
      position: relative;
      background: transparent;
      padding: 60px 0 60px;
      overflow: hidden;
    }

    /* Two-column: image left, panel right */
    .about-wrap {
      display: grid;
      grid-template-columns: auto auto;
      /* each column fits its content → no empty 1fr gap on the right */
      justify-content: center;
      /* keep the block centred on the page */
      column-gap: clamp(44px, 5vw, 88px);
      width: 100%;
      padding: 0 60px;
      align-items: center;
    }

    .about-inset-img {
      display: none;
    }

    /* Left: full-bleed image like amenities */
    .about-img-left {
      overflow: hidden;
      position: relative;
      aspect-ratio: 1200 / 1287;
      max-height: 910px;
      max-width: 479px;
      align-self: start;
      border-radius: 0;
      /* Feather the image's edges so it dissolves into the page instead of a hard rectangle.
         Uses the farthest-corner keyword — explicit percentage radii silently fail to render. */
      -webkit-mask-image: radial-gradient(ellipse farthest-corner at 50% 46%, #000 40%, rgba(0, 0, 0, 0.7) 68%, transparent 100%);
      mask-image: radial-gradient(ellipse farthest-corner at 50% 46%, #000 40%, rgba(0, 0, 0, 0.7) 68%, transparent 100%);
    }

    .about-img-left img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .about-img-left:hover img {
      transform: scale(1.04);
    }

    /* Right: SVG background panel */
    .about-right-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 0;
      /* no padding → text sits flush, vertically aligned to the image */
      text-align: justify;
      background: transparent;
    }

    /* Inset image */
    .about-inset-img {
      width: clamp(110px, 15vw, 180px);
      height: clamp(130px, 18vw, 220px);
      overflow: hidden;
      border-radius: 0;
      margin-bottom: 20px;
      flex-shrink: 0;
    }

    .about-inset-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    /* "Overview" title — centered header on top */
    .about-title {
      font-family: var(--serif);
      font-size: clamp(26px, 2.8vw, 38px);
      font-weight: 300;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--ink);
      margin-bottom: 40px;
      padding: 0 60px;
      text-align: center;
    }

    .about-title::after {
      content: '';
      display: block;
      width: 48px;
      height: 2px;
      background: var(--ink);
      opacity: 0.22;
      margin: 10px auto 0;
    }

    /* Scroll animations */
    .about-fade-up {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .about-fade-down {
      opacity: 0;
      transform: translateY(-36px);
      transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .about-fade-up.in,
    .about-fade-down.in {
      opacity: 1;
      transform: translateY(0);
    }

    /* Overview image: opens left-to-right like a book, text follows on the right */
    /* Clip-path lives on the inner <img>, not the observed wrapper — clipping the
       observed element itself would zero out its intersection ratio and it could
       never trigger its own reveal. */
    .about-img-reveal img {
      clip-path: inset(0 100% 0 0);
      opacity: 0;
      transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 1.6s ease-out,
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .about-img-reveal.in img {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }

    .about-title.about-fade-down {
      transition-delay: 0.55s;
    }

    .about-para.about-fade-up {
      transition-delay: 0.85s;
    }

    .about-sub.about-fade-up {
      transition-delay: 1.05s;
    }

    /* Main para */
    .about-para {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.88;
      color: #000 !important;
      margin-bottom: 14px;
      max-width: 46ch;
    }

    /* Sub para */
    .about-sub {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 300;
      line-height: 1.88;
      color: rgba(17, 17, 17, 0.72);
      margin-bottom: 0;
      max-width: 46ch;
    }

    /* ── Overview responsive: stack on mobile (image first, then text) ── */
    @media (max-width: 600px) {
      .about-wrap {
        grid-template-columns: 1fr;
        /* single column → image (markup-first) above, text below */
        justify-content: stretch;
        justify-items: center;
        row-gap: 26px;
        padding: 0 clamp(20px, 6vw, 40px);
      }

      .about-img-left {
        width: 100%;
        max-width: 420px;
      }

      .about-right-panel {
        align-items: stretch;
        width: 100%;
        max-width: 560px;
      }

      .about-para,
      .about-sub {
        max-width: 100%;
      }

      /* fill the column, never exceed the viewport */
      .about-title {
        margin-bottom: 26px;
        padding: 0 clamp(20px, 6vw, 40px);
      }
    }

    /* LEGACY HIDDEN */
    .about-right-col {
      display: none;
    }

    .about-left-col {
      display: none;
    }

    .about-center-col {
      display: none;
    }

    .about-img-right {
      display: none;
    }

    .about-img-col {
      display: none;
    }

    .about-right-col-old {
      grid-column: 3;
      grid-row: 3;
      display: flex;
      align-items: flex-start;
      padding: 0 0 clamp(32px, 4vh, 60px) clamp(20px, 3vw, 48px);
    }

    /* RERA strip below */
    .about-rera-strip {
      padding: 18px clamp(48px, 6vw, 100px);
      font-family: var(--sans);
      font-size: 9.5px;
      letter-spacing: .20em;
      
      color: rgba(17, 17, 17, 0.38);
      font-weight: 400;
      border-top: 1px solid rgba(0, 0, 0, 0.07);
    }

    footer {
      background: transparent;
      border-top: none;
      /* padding: var(--sec-space) 60px 36px; */
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .footer-inner {
      max-width: 520px;
      flex-shrink: 0;
      width: 100%;
    }

    .footer-right {
      text-align: center;
      flex-shrink: 0;
      max-width: 100%;
      margin-top: 20px;
    }

    /* Diamond decoration — right side of footer */
    .footer-diamond {
      position: absolute;
      right: clamp(40px, 8vw, 120px);
      top: 50%;
      translate: 0 -50%;
      width: clamp(280px, 32vw, 440px);
      height: clamp(280px, 32vw, 440px);
      object-fit: contain;
      opacity: 0.82;
      pointer-events: none;
      filter: drop-shadow(0 8px 32px rgba(201, 168, 108, 0.20)) drop-shadow(0 2px 8px rgba(100, 120, 180, 0.10));
      animation: diamond-idle 7s ease-in-out infinite;
      transform-origin: center center;
      will-change: transform;
    }

    .footer-logo-wrap {
      margin-bottom: 28px;
      display: flex;
      justify-content: center;
    }

    .footer-logo-img {
      height: 84px;
      width: auto;
      object-fit: contain;
    }

    .footer-brand-name {
      display: inline-block;
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 400;
      letter-spacing: .2em;
      
      color: #fff;
    }

    .footer-form-title {
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 300;
      color: var(--ink);
      letter-spacing: -.01em;
      margin-bottom: 24px;
    }

    .footer-fields {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 24px;
    }

    .footer-field {
      display: flex;
      align-items: baseline;
      gap: 5px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.20);
      padding-bottom: 10px;
    }

    .footer-field label {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      color: var(--ink);
      white-space: nowrap;
      min-width: 58px;
    }

    .footer-field input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      font-family: var(--sans);
      font-size: 13px;
      color: var(--ink);
    }

    .footer-field input::placeholder {
      color: rgba(0, 0, 0, 0.22);
    }

    .footer-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 13px 36px;
      border-radius: 50px;
      cursor: pointer;
      background: rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(0, 0, 0, 0.14);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      color: var(--ink);
      margin-bottom: 16px;
      transition: background .22s;
    }

    .footer-submit:hover {
      background: rgba(0, 0, 0, 0.11);
    }

    .footer-consent {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 20px;
    }

    .footer-consent input[type="checkbox"] {
      margin-top: 3px;
      flex-shrink: 0;
      accent-color: var(--ink);
    }

    .footer-consent-text {
      font-family: var(--sans);
      font-size: 10.5px;
      line-height: 1.7;
      color: rgba(0, 0, 0, 0.50);
    }

    .footer-consent-text a {
      color: rgba(0, 0, 0, 0.50);
      text-decoration: underline;
    }

    .footer-rera {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.40);
      border-top: none;
    }

    .footer-copy {
      font-family: var(--sans);
      font-size: 11px;
      color: rgba(0, 0, 0, 0.30);
      margin-top: 8px;
      font-weight: 300;
    }

    /* ── Footer form responsive ── */
    @media (max-width: 768px) {
      footer {
        padding:unset !important;
      } 
      #footerForm{
        padding:0 26px !important;
      }

      /* diamond recedes so it never crowds the centred form */
      .footer-diamond {
        width: clamp(200px, 56vw, 300px);
        height: auto;
        opacity: 0.30;
      }

      .footer-logo-img {
        height: 66px;
      }

      .footer-form-title {
        font-size: 24px;
        margin-bottom: 20px;
      }
    }

    @media (max-width: 480px) {
      footer {
        padding-left: 18px;
        padding-right: 18px;
      }

      .footer-diamond {
        display: none;
      }

      /* free the full width for the form */
      .footer-form-title {
        font-size: 22px;
      }

      .footer-fields {
        gap: 16px;
      }

      .footer-field {
        gap: 14px;
      }

      .footer-field label {
        min-width: 54px;
        font-size: 12.5px;
      }

      #footerForm .book-error {
        left: 68px;
      }

      /* stay aligned under the narrower input */
      .footer-consent-text {
        font-size: 10px;
        line-height: 1.6;
      }
    }

    /* ═══════════════════════ SCROLL REVEAL ═══════════════════════ */
    .reveal {
      opacity: 0;
      transform: translateY(52px);
      transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    /* Split-text reveals: container becomes transparent wrapper; inner spans animate */
    .reveal[data-split] {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* ── Section entrance animation ── */
    .sec-animate {
      opacity: 0;
      transform: translateY(48px);
      transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .sec-animate.in {
      opacity: 1;
      transform: none;
    }

    /* Heading clip-reveal — overflow:hidden wrapper set by JS */
    .s-line {
      display: block;
      overflow: hidden;
      padding-bottom: .04em;
    }

    .s-line-inner {
      display: block;
      transform: translateY(108%);
      opacity: 0;
      transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        opacity .5s ease;
    }

    .s-line-inner.in {
      transform: translateY(0);
      opacity: 1;
      padding-top: 1rem;
      text-align: center;
      font-size:15px;
      color: #000;
    }
    #amenities  .s-line-inner.in{
        padding-top: 0;
    }
    #amenities .ami-sub{
        margin-top: 0;
    }

    .d1 {
      transition-delay: .10s !important;
    }

    .d2 {
      transition-delay: .22s !important;
    }

    .d3 {
      transition-delay: .30s !important;
    }

    .d4 {
      transition-delay: .42s !important;
    }

    /* ═══ RESPONSIVE — Desktop 1280px–1920px ═══ */

    /* Hero padding scales with viewport */
    .hero-inner {
      padding: 0 60px 220px;
    }

    .hero-left-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: auto;
    }

    .hero-left-col {
      max-width: min(860px, 40vw);
    }

    /* About section */
    /* .about-sec {
      padding: var(--sec-space) 0 0;
    } */

    .about-inner {
      max-width: min(900px, 80vw);
    }

    /* Highlights */
    #highlights {
      padding: var(--sec-space) 0 0;
    }

    .hl-diagram {
      width: calc(100% - clamp(48px, 6vw, 120px));
    }

    @media (max-width: 1360px) {
      .layouts-title-row {
        grid-column: 1 / -1;
        text-align: center;
        padding: 0 60px 48px;
      }

      .layouts-body {
        grid-template-columns: 180px 1fr;
      }

      .layouts-sidebar {
        padding: 0 20px 0 60px;
      }

      .layouts-main {
        padding: 0 60px 0 20px;
      }
    }

    @media (max-width: 768px) {
      .layouts-body {
        grid-template-columns: 1fr;
      }

      .layouts-title-row {
        padding: 32px 32px 24px;
      }

      .layouts-sidebar {
        padding: 0 32px 24px;
      }

      .layouts-main {
        padding: 0 32px 40px;
      }
    }

    /* Sustainability grid */
    @media (max-width: 1360px) {
      .sr-layout {
        height: 480px;
      }

      .sr-content {
        padding: 40px 52px;
      }
    }

    /* Gallery */
    .gallery-sec {
      padding: var(--sec-space) 0 0;
    }

    /* full-width like .vidgal-sec so the nav arrows align between both galleries */

    /* FAQ */
    .faq-sec {
      padding: var(--sec-space) 60px 0;
    }

    /* Mobile: FAQ goes full-width (only a small readability gutter) */
    @media (max-width: 768px) {
      .faq-sec {
        padding-left: 16px;
        padding-right: 16px;
      }

      .faq-a-inner {
        padding-right: 24px;
      }
    }

    /* Topbar (desktop/laptop only — phones/tablets get the ≤900 rule with tighter padding) */
    @media (min-width: 901px) and (max-width: 1360px) {
      #topbar {
        padding: 20px 60px;
      }

      #topbar.scrolled {
        padding: 12px 60px;
      }
    }

    /* Typology */
    .typology-sec {
      padding: var(--sec-space) 60px 0;
    }

    /* ── Typology responsive: shrink type, add cell gutters, rebalance columns so
       "Configuration / SBUA (Sqft) / Floor plan & price" never collide ── */
    @media (max-width: 768px) {
      .typology-sec {
        padding-left: 22px;
        padding-right: 22px;
      }

      .typology-table {
        margin-top: 26px;
      }

      .typology-table th {
        font-size: 12px;
        padding: 0 8px 12px;
        line-height: 1.35;
      }

      .typology-table td {
        font-size: 12.5px;
        padding: 12px 8px;
      }

      .typology-table th:first-child,
      .typology-table td:first-child {
        width: 26%;
      }

      .typology-table th:nth-child(2),
      .typology-table td:nth-child(2) {
        width: 34%;
      }

      .typology-table th:last-child,
      .typology-table td:last-child {
        width: 40%;
      }

      .typology-dl {
        font-size: 9px;
        letter-spacing: .1em;
      }
    }

    @media (max-width: 400px) {
      .typology-sec {
        padding-left: 14px;
        padding-right: 14px;
      }

      .typology-table th {
        font-size: 11px;
        padding: 0 5px 10px;
      }

      .typology-table td {
        font-size: 11.5px;
        padding: 11px 5px;
      }

      .typology-dl {
        font-size: 8.5px;
        letter-spacing: .05em;
      }
    }

    /* 1920px — constrain max content width */
    @media (min-width: 1800px) {
      .hero-inner {
        padding-left: clamp(96px, 8vw, 160px);
      }

      .about-inner {
        max-width: 1100px;
      }

      .hl-diagram {
        max-width: 1400px;
      }
    }


    /* ═══════════════════════════════════════════════
     DARK MODE TOGGLE — NAV BUTTON
  ═══════════════════════════════════════════════ */
    .dm-toggle {
      position: relative;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.08);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .7s ease 4.3s, transform .7s ease 4.3s,
        background .3s ease, border-color .3s ease;
    }

    .hero-unlocked .dm-toggle {
      opacity: 1;
      transform: none;
    }

    .dm-toggle:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.55);
    }

    .dm-icon {
      position: absolute;
      width: 15px;
      height: 15px;
      stroke: rgba(255, 255, 255, 0.80);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
    }

    /* Moon shown in light mode; Sun shown in dark mode */
    .dm-moon {
      opacity: 1;
      transform: none;
    }

    .dm-sun {
      opacity: 0;
      transform: rotate(90deg) scale(0.5);
    }

    body.dark-mode .dm-moon {
      opacity: 0;
      transform: rotate(-90deg) scale(0.5);
    }

    body.dark-mode .dm-sun {
      opacity: 1;
      transform: none;
    }

    /* ═══════════════════════════════════════════════
     DARK MODE — GLOBAL OVERRIDES
  ═══════════════════════════════════════════════ */
    html.dark-mode {
      background: #1d417f;
    }

    body.dark-mode {
      --ink: rgba(255, 255, 255, 0.90);
      --muted: rgba(255, 255, 255, 0.65);
      --rule: rgba(255, 255, 255, 0.07);
      --ink-60: rgba(255, 255, 255, 0.60);
      --ink-12: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.90);
    }

    /* Sattva Amritya page background — solid brand colour */
    body.dark-mode::before {
      background: #1d417f;
      opacity: 1;
      filter: none;
    }

    body.dark-mode::after {
      background: none;
      opacity: 1;
      mix-blend-mode: normal;
    }

    /* Smooth global transitions when toggling */
    body.dark-mode,
    body.dark-mode * {
      transition-property: color, background-color, border-color, opacity, filter;
      transition-duration: 0.35s;
      transition-timing-function: ease;
    }

    /* Restore accordion + icon transitions (the blanket `body.dark-mode *` rule above
     resets transition-property to color/opacity, which strips max-height/transform and
     makes the FAQ + Sustainability panels snap open instantly). Higher specificity wins. */
    body.dark-mode .faq-a,
    body.dark-mode .sr-detail-list {
      transition: max-height .6s cubic-bezier(.4, 0, .2, 1);
    }

    body.dark-mode .faq-icon {
      transition: transform .3s ease;
    }

    /* same victims: the coverflow carousels + hero logo need their transform transition back,
     otherwise cards SNAP between positions instead of sliding (looked like a nav glitch) */
    body.dark-mode .igal-card {
      transition: transform .6s cubic-bezier(0.65, 0, 0.35, 1), opacity .6s ease, filter .6s ease;
    }

    body.dark-mode .vidgal-card {
      transition: transform .6s cubic-bezier(0.65, 0, 0.35, 1), opacity .6s ease, box-shadow .6s ease, filter .6s ease;
    }

    body.dark-mode .hero-brand-logo {
      transition: opacity .85s ease 4.8s, transform .85s ease 4.8s;
    }

    /* Restore the Overview book-reveal + fade timings (higher specificity than the blanket rule above) */
    body.dark-mode .about-img-reveal img {
      transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 1.6s ease-out,
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    body.dark-mode .about-fade-up,
    body.dark-mode .about-fade-down {
      transition-property: opacity, transform;
      transition-duration: 1.4s;
      transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Restore the Project Highlights book-reveal (same wipe as the Overview image) */
    body.dark-mode .hl-bar {
      transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 1.6s ease-out;
    }

    /* Restore the Amenities carousel slide + card scale transitions */
    body.dark-mode .ami-track {
      transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }

    body.dark-mode .ami-track.is-dragging {
      transition: none;
    }

    body.dark-mode .ami-card {
      transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    }

    /* Glass panels */
    body.dark-mode .sec-glass-wide {
      background: rgba(13, 26, 50, 0.78);
    }

    body.dark-mode .sec-glass::before {
      background: rgba(13, 26, 50, 0.70);
      backdrop-filter: blur(2px);
    }

    /* Video Gallery, Layout Plans & FAQ: no panel background, just the page backdrop */
    body.dark-mode .vidgal-sec.sec-glass-wide,
    body.dark-mode .layouts-sec.sec-glass-wide,
    body.dark-mode .faq-sec.sec-glass-wide {
      background: transparent;
    }

    body.dark-mode .layout-plan-wrap {
      background: transparent;
      border-color: transparent;
    }

    /* About */
    body.dark-mode .about-img-col::before {
      background: linear-gradient(to bottom, rgba(11, 22, 44, 0.60) 0%, transparent 100%);
    }

    body.dark-mode .about-para {
      color: rgba(255, 255, 255, 0.85);
    }
 .about-para {
      text-align: left;
    }
    body.dark-mode .about-sub {
      color: rgba(255, 255, 255, 0.85);
    }

    body.dark-mode .about-title {
      color: var(--ink);
    }

    body.dark-mode .about-title::after {
      background: rgba(255, 255, 255, 0.22);
    }

    /* Dividers / borders that use hardcoded rgba(0,0,0,...) */
    body.dark-mode .hl-item,
    body.dark-mode .hl-item:first-child {
      border-color: rgba(255, 255, 255, 0.07);
    }

    body.dark-mode .sustain-row,
    body.dark-mode .sustain-row:first-child {
      border-color: rgba(255, 255, 255, 0.07);
    }

    body.dark-mode .sustain-hd {
      border-bottom-color: rgba(255, 255, 255, 0.07);
    }

    body.dark-mode .faq-item,
    body.dark-mode .faq-item:first-child {
      border-color: rgba(255, 255, 255, 0.07);
    }

    body.dark-mode .typology-table thead tr {
      border-bottom-color: rgba(255, 255, 255, 0.13);
    }

    body.dark-mode .typology-table td {
      border-bottom-color: rgba(255, 255, 255, 0.05);
    }

    body.dark-mode .layout-tab {
      border-bottom-color: rgba(255, 255, 255, 0.07);
      color: rgba(255, 255, 255, 0.28);
    }

    body.dark-mode .layout-tab.active {
      color: var(--ink);
    }

    body.dark-mode .layout-tab.active::after {
      background: var(--ink);
    }

    body.dark-mode .about-rera-strip {
      border-top-color: rgba(255, 255, 255, 0.07);
      color: rgba(255, 255, 255, 0.32);
    }

    body.dark-mode .gal-tab-btn {
      border-bottom-color: rgba(255, 255, 255, 0.10);
      color: rgba(255, 255, 255, 0.35);
    }

    body.dark-mode .gal-tab-btn.gal-active {
      color: var(--ink);
    }

    body.dark-mode .gal-tab-btn.gal-active::after {
      background: var(--ink);
    }

    body.dark-mode .lp-sub-tab {
      border-color: rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.65);
    }

    body.dark-mode .lp-sub-tab.active {
      border-color: var(--ink);
      color: var(--ink);
    }

    body.dark-mode .loc-legend {
      border-bottom-color: rgba(255, 255, 255, 0.07);
    }

    body.dark-mode .igal-tab {
      color: rgba(255, 255, 255, 0.45);
    }

    body.dark-mode .igal-tab:hover {
      color: rgba(255, 255, 255, 0.75);
    }

    body.dark-mode .igal-tab--active {
      color: var(--ink);
      border-bottom-color: var(--ink);
    }

    body.dark-mode .ami-total-count {
      color: rgba(255, 255, 255, 0.55);
    }

    /* Highlights */
    body.dark-mode .hl-num {
      color: rgba(255, 255, 255, 0.20);
    }

    body.dark-mode .hl-item:hover .hl-num {
      color: var(--gold);
    }

    body.dark-mode .hl-item-title {
      color: rgba(255, 255, 255, 0.42);
    }

    body.dark-mode .hl-item:hover .hl-item-title {
      color: var(--ink);
    }

    /* Typology */
    body.dark-mode .typology-dl {
      color: var(--ink);
      border-bottom-color: rgba(255, 255, 255, 0.28);
    }

    /* Gallery arrows / counter */
    body.dark-mode .lb-arrow-btn {
      background: rgba(14, 28, 54, 0.82);
      border-color: rgba(255, 255, 255, 0.13);
    }

    body.dark-mode .lb-arrow-btn svg {
      stroke: rgba(255, 255, 255, 0.80);
    }

    body.dark-mode .lb-counter {
      color: rgba(255, 255, 255, 0.35);
    }

    /* FAQ */
    body.dark-mode .faq-q-txt {
      color: var(--ink);
    }

    body.dark-mode .faq-icon {
      stroke: var(--ink);
    }

    body.dark-mode .faq-a-inner {
      color: var(--muted);
    }

    /* Sustain rows */
    body.dark-mode .sr-title {
      color: var(--ink);
    }

    body.dark-mode .sr-title::after {
      background: rgba(255, 255, 255, 0.22);
    }

    body.dark-mode .sr-num {
      color: var(--muted);
    }

    body.dark-mode .sr-detail-list {
      color: var(--muted);
    }

    body.dark-mode .sr-chevron {
      color: rgba(255, 255, 255, 0.55);
    }

    body.dark-mode .sustain-row:hover .sr-chevron {
      color: var(--ink);
    }

    body.dark-mode .sr-diamond svg path {
      fill: rgba(255, 255, 255, 0.45);
    }

    body.dark-mode .sustain-row:hover .sr-diamond {
      border-color: rgba(255, 255, 255, 0.6);
    }

    body.dark-mode .sustain-row:hover .sr-diamond svg path {
      fill: var(--ink);
    }

    /* Footer / form */
    body.dark-mode footer {
      background: transparent;
    }

    body.dark-mode .footer-form-title {
      color: var(--ink);
    }

    body.dark-mode .footer-field {
      border-bottom-color: rgba(255, 255, 255, 0.18);
    }

    body.dark-mode .footer-field label {
      color: rgba(255, 255, 255, 0.75);
    }

    body.dark-mode .footer-field input {
      color: var(--ink);
    }

    body.dark-mode .footer-field input::placeholder {
      color: rgba(255, 255, 255, 0.22);
    }

    body.dark-mode .footer-submit {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(255, 255, 255, 0.16);
      color: var(--ink);
    }

    body.dark-mode .footer-submit:hover {
      background: rgba(255, 255, 255, 0.13);
    }

    body.dark-mode .footer-consent-text,
    body.dark-mode .footer-consent-text a {
      color: rgba(255, 255, 255, 0.40);
    }

    body.dark-mode .footer-rera {
      color: rgba(255, 255, 255, 0.32);
    }

    body.dark-mode .footer-copy {
      color: rgba(255, 255, 255, 0.22);
    }

    body.dark-mode .footer-logo-img {
      filter: brightness(0) invert(1) !important;
    }

    /* Sec-title underline */
    body.dark-mode .sec-title::after {
      background: rgba(255, 255, 255, 0.22);
    }

    body.dark-mode .sec-title {
      color: var(--ink);
    }

    /* ═══════════════════════ HIGHLIGHTS — EDITORIAL COLUMNS ═══════════════════════ */
    #highlights {
      padding: 60px 0 60px;
    }

    /* the heading now sits on the page backdrop (no image behind it); the elevation
     image backs only the points band below — see .hl-col-row */
    .hl-bars {
      display: none;
    }

    .hl-col-header {
      padding: 0 clamp(48px, 6vw, 100px);
      text-align: center;
    }

    /* ── Full image, confined to the right — same size as the Overview image ── */
    .hl-bars {
      position: absolute;
      /* anchored below the centered header; tracks the same vw-based section
       padding the header uses, plus a fixed buffer for the header's own
       (viewport-height-independent) box — so clearance never collapses */
      top: calc(clamp(32px, 3.4vw, 54px) + 190px);
      right: clamp(24px, 3.4vw, 56px);
      width: clamp(400px, 42vw, 560px);
      max-width: 46%;
      aspect-ratio: 1200 / 1286;
      max-height: 460px;
      height: auto;
      border-radius: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }

    /* Same left-to-right book-reveal wipe as the Overview image */
    .hl-bar {
      position: absolute;
      inset: 0;
      background-image: url('assets/images/Highlights.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      clip-path: inset(0 100% 0 0);
      opacity: 0;
      transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 1.6s ease-out;
    }

    .hl-bars.in .hl-bar {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }

    /* Points reveal alongside the image, same stagger convention as the Overview copy */
    .hl-pt0 {
      transition-delay: 0.55s;
    }

    .hl-pt1 {
      transition-delay: 0.67s;
    }

    .hl-pt2 {
      transition-delay: 0.79s;
    }

    .hl-pt3 {
      transition-delay: 0.91s;
    }

    .hl-pt4 {
      transition-delay: 1.03s;
    }

    .hl-pt5 {
      transition-delay: 1.15s;
    }

    /* Layout: centered header on the page backdrop, then a full-bleed image band */
    .hl-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 0 0 40px;
      /* no side padding → the band below can be full-bleed */
    }

    /* Header — centered on top, on the page backdrop (NOT over the image) */
    .hl-col-header {
      padding: 20px clamp(24px, 6vw, 60px) 34px;
      text-align: center;
      align-self: stretch;
    }

    .hl-col-header .sec-title {
      color: #fff;
      text-align: center;
      font-size: clamp(26px, 4.5vw, 36px);
      margin-bottom: 0;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    }

    .hl-col-header .sec-title::after {
      background: rgba(255, 255, 255, 0.7);
      margin: 8px auto 0;
    }

    /* Full-bleed image band: the elevation photo backs this area only; the 2×3
     points pack to the left over a scrim, the building reads on the right */
    .hl-col-row {
      display: grid;
      grid-template-columns: repeat(2, clamp(190px, 20vw, 260px));
      justify-content: start;
      align-content: center;
      gap: 0;
      width: 100%;
      margin: 0;
      position: relative;
      isolation: isolate;
      padding: clamp(44px, 6vw, 88px) clamp(24px, 6vw, 90px);
      background: url('assets/images/Highlights.jpg') right center / cover no-repeat;
      min-height: clamp(360px, 40vw, 480px);
    }

    .hl-col-row::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      /* background: linear-gradient(82deg, rgb(8 18 36 / 82%) 0%, rgb(8 18 36 / 45%) 50%, rgb(8 18 36 / 0%) 100%); */
      pointer-events: none;
    }

    /* Each box */
    .hl-col {
      border-right: 1px solid rgba(255, 255, 255, 0.22);
      border-bottom: 1px solid rgba(255, 255, 255, 0.22);
      padding: 14px 22px 16px;
      display: flex;
      flex-direction: column;
    }

    .hl-col:nth-child(2n) {
      border-right: none;
    }

    .hl-col:nth-child(n+5) {
      border-bottom: none;
    }

    /* No hover interaction */
    .hl-col::before {
      display: none;
    }

    /* Hide old elements */
    .hl-col-img,
    .hl-indicator {
      display: none;
    }

    /* Number + icon row */
    .hl-col-top {
      display: none;
    }

    .hl-col-num {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: .14em;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.70);
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }

    .hl-col-icon {
      display: none;
    }

    /* Description — clearly readable */
    .hl-col-text {
      font-family: var(--sans);
      font-size: clamp(12px, 1.1vw, 15px);
      font-weight: 300;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.65;
      letter-spacing: 0.01em;
      margin: 0;
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
      /* text-transform: lowercase; */
    }

    .hl-col-text .highlight-number {
      text-transform: none;
    }

    /* ── Project Highlights responsive ── */
    @media (max-width: 900px) {

      /* let the two columns flex so they never overflow narrower tablets */
      .hl-col-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background-position: center;
      }

      .hl-col-row::before {
        background: linear-gradient(90deg, rgba(8, 18, 36, 0.82) 0%, rgba(8, 18, 36, 0.66) 100%);
      }
    }

    @media (max-width: 600px) {

      /* tighten the gap between the heading and the image band (was margin 36 + pad 44) */
      .hl-col-header {
        margin-bottom: 0;
        padding-top: 6px;
        padding-bottom: 18px;
      }

      /* stack the points into one column; image sits behind with a stronger scrim */
      .hl-col-row {
        grid-template-columns: 1fr;
        padding: 34px 22px;
        min-height: 0;
        background-position: center;
      }

      .hl-col-row::before {
        background: rgba(8, 18, 36, 0.78);
      }

      .hl-col {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        padding: 15px 2px;
      }

      .hl-col:last-child {
        border-bottom: none;
      }
    }

    /* Hide old layout pieces */
    .hl-header {
      display: none;
    }

    .hl-body {
      display: none;
    }

    .hl-items-col {
      display: none;
    }

    .hl-item {
      display: none !important;
    }

    /* ═══════════════════════ LAYOUT PLANS — CENTRED TABS ═══════════════════════ */
    .layouts-sec {
      display: block !important;
      padding: 52px 0 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .layouts-title-row {
      text-align: center;
      padding: 0 0 32px;
    }

    .layouts-body {
      display: block;
    }

    /* Sidebar becomes centred tab bar */
    .layouts-sidebar {
      padding: 0 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      margin-bottom: 32px;
    }

    .layouts-tabs {
      display: inline-flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      gap: 0;
    }

    /* Tab — horizontal, matching gallery style */
    .layout-tab {
      padding: 16px 32px;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: none;
      font-family: var(--sans);
      font-weight: 400;
      color: rgba(17, 17, 17, 0.32);
      cursor: pointer;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
      border-radius: 0;
      background: transparent;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: color .32s ease;
    }

    .layout-tab::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(17, 17, 17, 0.04) 0%, rgba(17, 17, 17, 0.01) 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 0;
      pointer-events: none;
    }

    .layout-tab:hover {
      color: var(--ink);
    }

    .layout-tab:hover::before {
      transform: scaleX(1);
    }

    .layout-tab::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 20px;
      right: 20px;
      height: 2px;
      background: var(--ink);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .layout-tab.active {
      color: var(--ink);
      font-weight: 400;
    }

    .layout-tab.active::after {
      transform: scaleX(1);
    }

    .layout-tab.active::before {
      transform: scaleX(1);
    }

    /* Main panel — shrink-wraps the plan image so the gate scrim matches it exactly
     (no full-width dark/blur band on the sides) */
    .layouts-main {
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
    }

    .layout-panel.active {
      align-items: center;
      margin-top: 0;
    }

    /* Image wrap — uniform width, fit in one screen */
    .layout-plan-wrap {
      background: transparent;
      border-radius: 0;
      border: none;
      overflow: hidden;
    }

    #tab-master-plan .layout-plan-wrap,
    #tab-floor-plan .layout-plan-wrap,
    #tab-unit-plan .layout-plan-wrap {
      height: auto;
      /* Reserve area BEFORE the (lazy) plan image decodes. Without this the wrap is 0px
       tall on mobile, which starves both the reveal observer (stays opacity:0) and the
       lazy-loader (never triggers) → the plan never appears. */
      min-height: clamp(200px, 52vw, 320px);
      max-width: 100%;
      width: 100%;
      /* full width so the reserved box spans the column */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #tab-master-plan .layout-plan-wrap img,
    #tab-floor-plan .layout-plan-wrap img,
    #tab-unit-plan .layout-plan-wrap img {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      width: auto !important;
      /* natural size, capped by max-height → moderate, no distortion */
      height: auto !important;
      max-width: 100% !important;
      max-height: clamp(340px, 56vh, 540px) !important;
      margin: 0 !important;
      display: block;
    }

    .layout-panel.active {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      width: auto;
    }

    /* Sub-tabs — grey/black accent */
    .lp-sub-tab {
      border-color: rgba(17, 17, 17, 0.10);
      transition: color .28s, border-color .28s, background .28s;
    }

    .lp-sub-tab:hover {
      border-color: rgba(17, 17, 17, 0.4);
      color: var(--ink);
    }

    .lp-sub-tab.active {
      border-color: var(--ink);
      color: var(--ink);
      background: rgba(17, 17, 17, 0.04);
    }

    /* Dark mode */
    body.dark-mode .layout-tab {
      border-bottom-color: rgba(255, 255, 255, 0.07);
      color: rgba(255, 255, 255, 0.28);
    }

    body.dark-mode .layout-tab:hover,
    body.dark-mode .layout-tab.active {
      color: var(--ink);
    }

    body.dark-mode .layout-tab::before {
      background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    }

    body.dark-mode .layout-plan-wrap {
      background: transparent;
      border-color: transparent;
    }

    body.dark-mode .lp-sub-tab.active {
      background: rgba(255, 255, 255, 0.06);
    }

    /* Old gallery strip overrides removed — using split layout now */
    .lb-section,
    .lb-stack-wrap,
    .lb-counter,
    .lb-arrow-btn {
      display: none !important;
    }

    /* Dark mode tab overrides */
    body.dark-mode .gal-tab-btn {
      border-bottom-color: rgba(255, 255, 255, 0.07);
      color: rgba(255, 255, 255, 0.28);
    }

    body.dark-mode .gal-tab-btn:hover,
    body.dark-mode .gal-tab-btn.gal-active {
      color: var(--ink);
    }

    body.dark-mode .gal-tab-btn::before {
      background: linear-gradient(100deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    }

    /* ═══════════════════════ SUSTAINABILITY — COMPACT SINGLE-SCREEN ═══════════════════════ */
    #featured {
      padding: 10px 0 0;
    }

    .sustain-hd {
      padding: 0 60px 14px;
      border-bottom: none;
    }

    .sustain-hd .sec-title {
      font-size: clamp(24px, 5vw, 36px);
      margin-bottom: 8px;
    }

    .sustain-scroll-zone {
      display: none;
    }

    /* Grid: rows left, image right */
    .sr-tl-img {
      display: none;
    }

    .sr-img-col {
      display: none !important;
    }

    a.whatsapp-icon {
      position: fixed;
      z-index: 99;
      bottom: 0px;
      padding: 20px;
    }

    /* honeypot — visually hidden WITHOUT left:-9999px (that offset caused horizontal
       overflow → expanded the iOS layout viewport → clipped the fixed Enquire tab).
       This visually-hidden pattern keeps the field in the DOM/submission (not display:none)
       so bots still fill it, but it never overflows the page. */
    .pu-hp {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      margin: -1px !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      opacity: 0;
      pointer-events: none;
    }

    /* ── Sticky Enquire tab — EXACT codename-bliss reference approach: an <a> with
       writing-mode ON THE ELEMENT (anchors honor writing-mode reliably on iOS, unlike
       <button>). Plain position:fixed right:0, no GPU layer. Gold to blend with this page.
       rotate(180) makes the text read BOTTOM-TO-TOP (reference is top-to-bottom); the
       border-radius is flipped to 0 8px 8px 0 so after the rotate it rounds the
       page-facing (left) edge. Same size on every screen. ── */
    .enquire-fab {
      position: fixed;
      right: 0;
      top: 50%;
      z-index: 9999;
      transform: translateY(-50%) rotate(180deg);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      display: block;
      padding: 30px 6px;
      border: none;
      cursor: pointer;
      background: #0000007a;
      color: #fff;
      font-family: var(--pu-font-body);
      font-weight: 400;
      font-size: 14px;
      letter-spacing: .04em;
      border-radius: 0 8px 8px 0;
      text-decoration: none;
      transition: background .3s var(--pu-ease), transform .3s var(--pu-ease), opacity .35s var(--pu-ease);
      border: 1px solid #ffffffb5;
    }

    /* hover/active keep the rotate(180); +translateX nudges toward the page (screen-left) in the rotated frame */
    .enquire-fab:hover,
    .enquire-fab:focus-visible {
      background: var(--pu-accent-2);
      transform: translateY(-50%) rotate(180deg) translateX(3px);
    }

    .enquire-fab:active {
      transform: translateY(-50%) rotate(180deg) translateX(1px);
    }

    body.enq-open .enquire-fab,
    body.glb-open .enquire-fab,
    body.menu-open .enquire-fab {
      opacity: 0;
      pointer-events: none;
    }

    /* ── Enquire popup modal ── */
    .enq-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--pu-overlay);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--pu-dur) var(--pu-ease), visibility 0s var(--pu-dur);
    }

    .enq-modal.open {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--pu-dur) var(--pu-ease);
    }

    .enq-dialog {
      position: relative;
      width: 100%;
      max-width: 480px;
      max-height: 92vh;
      overflow: auto;
      background: var(--pu-bg);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: var(--pu-radius);
      padding: 46px 40px 34px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
      opacity: 0;
      transform: translateY(24px) scale(.985);
      transition: opacity var(--pu-dur) var(--pu-ease), transform var(--pu-dur) var(--pu-ease-spring);
    }

    .enq-modal.open .enq-dialog {
      opacity: 1;
      transform: none;
    }

    .enq-close {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 40px;
      height: 40px;
      background: none;
      border: none;
      font-size: 2rem;
      line-height: 1;
      color: var(--pu-muted);
      cursor: pointer;
      opacity: .85;
      transition: transform var(--pu-dur) var(--pu-ease), color var(--pu-dur) var(--pu-ease), opacity var(--pu-dur) var(--pu-ease);
    }

    .enq-close:hover {
      opacity: 1;
      color: var(--pu-accent);
      transform: rotate(90deg);
    }

    .book-title {
      font-family: var(--pu-font-head);
      font-weight: 300;
      font-size: clamp(1.25rem, 2.2vw, 1.7rem);
      color: var(--pu-text);
      text-align: center;
      letter-spacing: .02em;
      margin-bottom: 30px;
    }

    /* staggered content rise on open */
    @keyframes pu-rise {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .enq-modal.open .book-title,
    .enq-modal.open .book-row,
    .enq-modal.open .book-consent,
    .enq-modal.open .book-submit {
      animation: pu-rise var(--pu-dur) var(--pu-ease) backwards;
    }

    .enq-modal.open .book-title {
      animation-delay: 60ms;
    }

    .enq-modal.open .book-row:nth-of-type(1) {
      animation-delay: 100ms;
    }

    .enq-modal.open .book-row:nth-of-type(2) {
      animation-delay: 140ms;
    }

    .enq-modal.open .book-row:nth-of-type(3) {
      animation-delay: 180ms;
    }

    .enq-modal.open .book-consent {
      animation-delay: 220ms;
    }

    .enq-modal.open .book-submit {
      animation-delay: 260ms;
    }

    /* ── Popup form fields — clear boxed inputs + stacked labels (high contrast in the modal) ── */
    .enq-dialog .book-row {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 7px;
      border: none;
      padding: 0;
      margin-bottom: 22px;
      text-align: left;
    }

    .enq-dialog .book-label {
      font-family: var(--pu-font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .02em;
      color: var(--pu-muted);
    }

    .enq-dialog .book-input {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 14px;
      background: var(--pu-surface);
      border: 1px solid var(--pu-border);
      border-radius: 10px;
      color: #fff;
      font-family: var(--pu-font-body);
      font-size: 14px;
      outline: none;
      transition: border-color var(--pu-dur-fast) var(--pu-ease), background var(--pu-dur-fast) var(--pu-ease), box-shadow var(--pu-dur-fast) var(--pu-ease);
    }

    .enq-dialog .book-input::placeholder {
      color: rgba(255, 255, 255, 0.42);
    }

    /* ── Autofill handling ──
       POPUP (boxed inputs): paint over the browser's white autofill background with the dark
       input colour via an inset box-shadow so the dial code (+91) + number stay visible.
       Plain var — NOT color-mix — since iOS 16.0 may not support color-mix. */
    .book-input:-webkit-autofill,
    .book-input:-webkit-autofill:hover,
    .book-input:-webkit-autofill:focus,
    .book-input:-webkit-autofill:active,
    .enq-dialog .iti__tel-input:-webkit-autofill,
    .enq-dialog .iti__tel-input:-webkit-autofill:hover,
    .enq-dialog .iti__tel-input:-webkit-autofill:focus,
    .enq-dialog .iti__tel-input:-webkit-autofill:active {
      -webkit-text-fill-color: #fff !important;
      caret-color: #fff;
      -webkit-box-shadow: 0 0 0 1000px var(--pu-bg) inset !important;
      box-shadow: 0 0 0 1000px var(--pu-bg) inset !important;
    }

    /* FOOTER form: keep the field TRANSPARENT on autofill (no background paint) — only fix the
       text colour so it stays visible on the dark footer. */
    #footerForm .footer-field input:-webkit-autofill,
    #footerForm .footer-field input:-webkit-autofill:hover,
    #footerForm .footer-field input:-webkit-autofill:focus,
    #footerForm .footer-field input:-webkit-autofill:active,
    #footerForm .iti__tel-input:-webkit-autofill,
    #footerForm .iti__tel-input:-webkit-autofill:hover,
    #footerForm .iti__tel-input:-webkit-autofill:focus,
    #footerForm .iti__tel-input:-webkit-autofill:active {
      -webkit-text-fill-color: var(--ink) !important;
      caret-color: var(--ink);
      transition: background-color 600000s 0s;
      /* delay the white autofill bg ~forever → stays transparent */
    }

    .enq-dialog .book-input:focus {
      border-color: var(--pu-accent);
      background: rgba(255, 255, 255, 0.10);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pu-accent) 22%, transparent);
    }

    .enq-dialog .book-phone {
      width: 100%;
    }

    .enq-dialog .book-row.invalid .book-input {
      border-color: var(--pu-error);
    }

    .enq-dialog .book-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 10px 0 0;
      padding: 15px 40px;
      border-radius: var(--pu-radius-pill);
      cursor: pointer;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: var(--pu-text);
      font-family: var(--pu-font-body);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .08em;
      
    }

    .enq-dialog .book-submit:hover {
      background: rgba(255, 255, 255, 0.13);
    }

    .enq-dialog .book-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 4px 0 18px;
      cursor: pointer;
      user-select: none;
      text-align: left;
      font-family: var(--pu-font-body);
      font-size: 10.5px;
      line-height: 1.6;
      color: var(--pu-muted);
    }

    .enq-dialog .book-consent-check {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      margin-top: 2px;
      accent-color: var(--pu-text);
      cursor: pointer;
    }

    .enq-dialog .book-consent a {
      color: var(--pu-accent-2);
      text-decoration: underline;
    }

    .enq-dialog .book-error {
      left: 0;
      right: 0;
    }

    .book-form {
      text-align: center;
    }

    /* ── Inputs: press feedback + focus underline grow (both forms) ── */
    .book-submit {
      transition: background var(--pu-dur-fast) var(--pu-ease), border-color var(--pu-dur-fast) var(--pu-ease), color var(--pu-dur-fast) var(--pu-ease), transform var(--pu-dur-fast) var(--pu-ease);
    }

    .book-submit:active {
      transform: translateY(1px) scale(.99);
    }

    .book-submit.is-loading {
      color: transparent !important;
      pointer-events: none;
      position: relative;
    }

    .book-submit.is-loading::after {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 16px;
      height: 16px;
      border: 2px solid var(--pu-accent);
      border-top-color: transparent;
      border-radius: 50%;
      animation: pu-spin .6s linear infinite;
    }

    @keyframes pu-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* ── Validation: non-layout-shifting errors, consent error, success note ── */
    .book-row {
      position: relative;
    }

    .book-error {
      position: absolute;
      top: 100%;
      left: 78px;
      right: 0;
      margin-top: 3px;
      font-family: var(--pu-font-body);
      font-size: 11.5px;
      font-weight: 300;
      line-height: 1.25;
      color: var(--pu-error);
      letter-spacing: .01em;
      transition: opacity var(--pu-dur-fast) var(--pu-ease);
    }

    .book-error:empty {
      display: none;
    }

    .book-row.invalid {
      border-bottom-color: var(--pu-error) !important;
    }

    @keyframes pu-shake {

      0%,
      100% {
        transform: translateX(0)
      }

      20%,
      60% {
        transform: translateX(-3px)
      }

      40%,
      80% {
        transform: translateX(3px)
      }
    }

    .book-row.invalid .book-input {
      animation: pu-shake .35s var(--pu-ease);
    }

    .book-consent.invalid {
      color: var(--pu-error);
    }

    .book-consent.invalid .book-consent-check {
      outline: 2px solid var(--pu-error);
      outline-offset: 1px;
    }

    .book-consent-error {
      text-align: center;
      margin: 6px auto 4px;
      font-family: var(--pu-font-body);
      font-size: 11.5px;
      color: var(--pu-error);
    }

    .book-consent-error:empty {
      display: none;
    }

    .book-note {
      text-align: center;
      margin-top: 18px;
      font-family: var(--pu-font-body);
      font-size: 14px;
      font-weight: 400;
      color: var(--pu-accent);
      animation: pu-rise var(--pu-dur) var(--pu-ease);
    }

    .book-note-error {
      color: var(--pu-error);
    }

    /* footer form: error spans full field width (label col + gap = 78px already matches) */
    #footerForm .book-error {
      left: 78px;
    }

    #footerForm {
      text-align: center;
    }

    /* ── intl-tel-input blending (underline, transparent, theme colours) ── */
    .book-phone .iti {
      display: block;
      width: 100%;
      --iti-icon-color: var(--pu-muted);
      --iti-hover-color: color-mix(in srgb, var(--pu-accent) 14%, transparent);
    }

    /* footer: tighten the space between the flag/dial-code and the typed number */
    #footerForm .book-phone .iti {
      --iti-spacer-horizontal: 5px;
    }

    /* footer: transparent underline (row already has the border-bottom) */
    #footerForm .book-phone .iti__tel-input {
      width: 100%;
      background: transparent;
      border: none;
      color: var(--pu-text);
      font-family: var(--pu-font-body);
      font-size: 13px;
      padding: 0 2px;
      outline: none;
    }

    /* popup: boxed to match the other popup inputs */
    .enq-dialog .book-phone .iti__tel-input {
      width: 100%;
      box-sizing: border-box;
      background: var(--pu-surface);
      border: 1px solid var(--pu-border);
      border-radius: 10px;
      color: #fff;
      font-family: var(--pu-font-body);
      font-size: 14px;
      padding: 12px 14px;
      outline: none;
      transition: border-color var(--pu-dur-fast) var(--pu-ease), box-shadow var(--pu-dur-fast) var(--pu-ease);
    }

    .enq-dialog .book-phone .iti__tel-input:focus {
      border-color: var(--pu-accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pu-accent) 22%, transparent);
    }

    .book-phone .iti__selected-dial-code {
      color: var(--pu-text);
    }

    /* ── Country dropdown — themed to the dark form, contained so it never overflows ── */
    .iti {
      --iti-country-selector-bg: #1d417f;
      /* dark surface, a layer above the dialog */
      --iti-border-color: rgba(255, 255, 255, 0.14);
      --iti-hover-color: rgba(255, 255, 255, 0.09);
      /* hover + keyboard highlight */
      --iti-icon-color: var(--pu-muted);
    }

    .iti__dropdown-content {
      background: #1d417f;
      color: var(--pu-text);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 12px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
      overflow: hidden;
      width: max-content;
      /* size to content so names never wrap */
      min-width: 240px;
      max-width: min(320px, calc(100vw - 32px));
      /* but never wider than the viewport */
    }

    .iti__search-input,
    .iti__search-input:focus {
      background: rgba(255, 255, 255, 0.05);
      color: var(--pu-text);
      font-family: var(--pu-font-body);
      font-size: 14px;
      outline: none;
    }

    .iti__search-input::placeholder {
      color: var(--pu-muted);
    }

    .iti__country-list {
      max-height: 232px;
      overscroll-behavior: contain;
      color: var(--pu-text);
    }

    .iti__country {
      font-family: var(--pu-font-body);
      font-size: 14px;
      white-space: nowrap;
    }

    .iti__country-name {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .iti__dial-code {
      color: var(--pu-muted);
    }

    /* slim scrollbar so the list reads clean, not a chunky default bar */
    .iti__country-list::-webkit-scrollbar {
      width: 8px;
    }

    .iti__country-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
      border-radius: 8px;
    }

    .iti__country-list {
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }

    /* mobile fullscreen popup: drop the desktop box constraints so it fills as intended */
    .iti--fullscreen-popup .iti__dropdown-content {
      max-width: none;
      border-radius: 0;
      box-shadow: none;
    }

    /* ── Image-gallery lightbox (.glb) — arrows mirror the page's borderless chevrons ── */
    .glb {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 18px;
      padding: 8vh 6vw;
      background: var(--pu-overlay);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--pu-dur) var(--pu-ease), visibility 0s var(--pu-dur);
    }

    .glb.open {
      opacity: 1;
      visibility: visible;
      transition: opacity var(--pu-dur) var(--pu-ease);
    }

    .glb-figure {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .glb-img {
      max-width: 82vw;
      max-height: 76vh;
      object-fit: contain;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
      transition: opacity var(--pu-dur) var(--pu-ease), transform var(--pu-dur) var(--pu-ease);
    }

    .glb:not(.open) .glb-img {
      opacity: 0;
      transform: scale(.97);
    }

    .glb-cap {
      display: flex;
      gap: 16px;
      align-items: center;
      color: #fff;
      font-family: var(--pu-font-body);
      font-size: .9rem;
      letter-spacing: .06em;
    }

    /* clean white chrome — no fill, matches the page's white text */
    .glb-count {
      color: #fff;
      font-size: .78rem;
      letter-spacing: .16em;
    }

    .glb-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 48px;
      height: 48px;
      background: none;
      border: none;
      color: #fff;
      font-size: 2.4rem;
      line-height: 1;
      cursor: pointer;
      opacity: .85;
      transition: transform var(--pu-dur) var(--pu-ease), opacity var(--pu-dur) var(--pu-ease);
    }

    .glb-close:hover {
      opacity: 1;
      transform: rotate(90deg);
    }

    .glb-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: none;
      padding: 10px 14px;
      color: #fff;
      font-size: 2.6rem;
      line-height: 1;
      cursor: pointer;
      opacity: .85;
      transition: opacity var(--pu-dur) var(--pu-ease), transform var(--pu-dur) var(--pu-ease);
    }

    .glb-arrow:hover {
      opacity: 1;
    }

    .glb-prev {
      left: clamp(8px, 3vw, 44px);
    }

    .glb-next {
      right: clamp(8px, 3vw, 44px);
    }

    .glb-prev:hover {
      transform: translateY(-50%) translateX(-3px);
    }

    .glb-next:hover {
      transform: translateY(-50%) translateX(3px);
    }

    body.glb-open {
      overflow: hidden;
    }

    /* image-gallery centre card invites a click */
    #igalCarousel .igal-card[data-cpos="0"] {
      cursor: zoom-in;
    }

    /* ── Plans blur gate ── */
    .layouts-main {
      position: relative;
    }

    #plans:not(.plans-unlocked) .layout-plan-wrap img {
      filter: blur(3px);
      transform: scale(1.05);
      transition: filter var(--pu-dur-slow) var(--pu-ease), transform var(--pu-dur-slow) var(--pu-ease);
    }

    #plans.plans-unlocked .layout-plan-wrap img {
      cursor: zoom-in;
    }

    .lp-gate-overlay {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(7, 16, 32, .45);
      /* just a dark scrim for the button; no extra backdrop blur over the image */
      transition: opacity var(--pu-dur-slow) var(--pu-ease);
    }

    .lp-gate-btn {
      pointer-events: auto;
    }

    .sub-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 25px 0 40px;
    }

    .sub-tab {
      padding: 8px 18px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      color: rgba(255, 255, 255, .75);
      font-size: 13px;
      font-family: 'Poppins', sans-serif;
      border-radius: 30px;
      cursor: pointer;
      transition: .3s;
    }

    .sub-tab:hover {
      background: rgba(255, 255, 255, .15);
      color: #fff;
    }

    .sub-tab.active {
      background: #c9a86c;
      border-color: #c9a86c;
      color: #111;
      font-weight: 600;
    }

    #plans.plans-unlocked .lp-gate-overlay {
      opacity: 0;
      pointer-events: none;
    }

    .lp-gate-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      text-align: center;
    }

    /* matches the footer submit button — translucent white pill, subtle (no gold) */
    .lp-gate-btn {
      font-family: var(--pu-font-body);
      font-size: .76rem;
      letter-spacing: .22em;
      padding: 15px 42px;
      border-radius: 0;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #fff;
      transition: background var(--pu-dur) var(--pu-ease), border-color var(--pu-dur) var(--pu-ease), color var(--pu-dur) var(--pu-ease), transform var(--pu-dur-fast) var(--pu-ease);
    }

    .lp-gate-btn:hover {
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.28);
      transform: translateY(-2px);
    }

    .lp-gate-btn:active {
      transform: translateY(0) scale(.99);
    }

    @keyframes pu-gate-pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28);
      }

      70%,
      100% {
        box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
      }
    }

    .lp-gate-btn {
      animation: pu-gate-pulse 2.6s var(--pu-ease) 1s infinite;
    }

    .lp-gate-btn:hover,
    .lp-gate-btn:focus-visible {
      animation-play-state: paused;
    }

    /* ── Visible focus ring for keyboard users on injected controls ── */
    .enquire-fab:focus-visible,
    .lp-gate-btn:focus-visible,
    .glb-arrow:focus-visible,
    .book-submit:focus-visible {
      outline: 2px solid var(--pu-accent-2);
      outline-offset: 3px;
    }

    /* close buttons: no border/outline — subtle opacity cue on focus instead */
    .glb-close:focus-visible,
    .enq-close:focus-visible {
      outline: none;
      opacity: 1;
    }

    /* ══════════ PREMIUM NEIGHBOURHOOD MAP ══════════ */
    .pmap {
      position: relative;
      width: min(700px, 100%);
      margin: 6px auto 0;
    }

    .pmap-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 100 / 62;
      border-radius: 0;
      overflow: hidden;
      /* background:
        radial-gradient(120% 120% at 50% 0%, rgba(29, 65, 127, 0.45) 0%, rgba(9, 16, 30, 0.97) 60%),
        #091423; */
      border: 1px solid rgba(255, 255, 255, 0.22);
      box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transform: scale(0.9);
      opacity: 0;
      transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .9s ease;
    }

    .pmap.is-live .pmap-stage {
      transform: scale(1);
      opacity: 1;
    }

    .pmap-base,
    .pmap-geo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .pmap-base {
      z-index: 1;
    }

    .pmap-geo {
      z-index: 2;
      pointer-events: none;
      overflow: visible;
    }

    .pmap-stage::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      /* background: radial-gradient(92% 82% at 50% 52%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.5) 100%); */
    }

    /* distance rings + connectors */
    .pmap-ring {
      fill: none;
      stroke: rgba(255, 255, 255, 0.16);
      stroke-width: 1;
      stroke-dasharray: 3 7;
    }

    .pmap-conn {
      stroke: rgba(255, 255, 255, 0.22);
      stroke-width: 1;
      stroke-dasharray: 2 6;
      opacity: 0;
      transition: opacity .6s ease, stroke .4s ease, stroke-width .4s ease;
    }

    .pmap.is-live .pmap-conn {
      opacity: 1;
    }

    .pmap.is-live .pmap-conn.is-active {
      stroke: rgba(255, 255, 255, 0.9);
      stroke-width: 1.5;
      stroke-dasharray: none;
    }

    .pmap.is-live .pmap-conn.is-dim {
      opacity: .06;
    }

    /* centre marker */
    .pmap-core-ring {
      fill: none;
      stroke: #fff;
      stroke-width: 1.6;
    }

    .pmap-core-dot {
      fill: #fff;
    }

    .pmap-pulse {
      fill: none;
      stroke: #fff;
      stroke-width: 1.4;
      transform-box: fill-box;
      transform-origin: center;
      animation: pmapPulse 3s ease-out infinite;
    }

    .pmap-pulse.d2 {
      animation-delay: 1.5s;
    }

    @keyframes pmapPulse {
      0% {
        transform: scale(0.4);
        opacity: .7;
      }

      80%,
      100% {
        transform: scale(3.4);
        opacity: 0;
      }
    }

    .pmap-core-tag {
      position: absolute;
      left: 50%;
      top: 64.5%;
      z-index: 6;
      transform: translate(-50%, calc(-100% - 18px));
      text-align: center;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
    }

    .pmap-core-tag b {
      display: block;
      font-family: var(--serif);
      font-weight: 400;
      font-size: 15px;
      letter-spacing: .16em;
      color: #fff;
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
    }

    .pmap-core-tag span {
      display: block;
      margin-top: 3px;
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: .3em;
      
      color: rgba(255, 255, 255, 0.6);
    }

    /* google-maps style project popup — anchored above the core pin */
    .pmap-proj-pop {
      position: absolute;
      z-index: 8;
      left: 50%;
      top: 64.5%;
      transform: translate(-50%, calc(-100% - 34px));
      min-width: 216px;
      padding: 15px 42px 15px 18px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 14px 38px rgba(0, 0, 0, 0.3);
      text-align: left;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s ease;
    }

    .pmap.is-live .pmap-proj-pop {
      opacity: 1;
      pointer-events: auto;
    }

    .pmap.pop-closed .pmap-proj-pop {
      opacity: 0;
      pointer-events: none;
    }

    .pmap-proj-pop::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -7px;
      transform: translateX(-50%) rotate(45deg);
      width: 14px;
      height: 14px;
      background: #fff;
      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.10);
    }

    .pmap-proj-pop b {
      display: block;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 15px;
      color: #1e1c1a;
      line-height: 1.3;
    }

    .pmap-proj-pop i {
      display: block;
      font-style: normal;
      margin-top: 4px;
      font-family: var(--sans);
      font-size: 12.5px;
      color: #8a8178;
      line-height: 1.4;
    }

    .pmap-proj-pop a {
      display: inline-block;
      margin-top: 9px;
      font-family: var(--sans);
      font-size: 12.5px;
      color: #1a73e8;
      text-decoration: none;
    }

    .pmap-proj-pop a:hover {
      text-decoration: underline;
    }

    .pmap-pop-close {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 24px;
      height: 24px;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      color: #8a8178;
      font-size: 14px;
      line-height: 24px;
      text-align: center;
      font-family: var(--sans);
    }

    .pmap-pop-close:hover {
      color: #1e1c1a;
    }

    /* centre label yields to the popup; returns once the popup is dismissed */
    .pmap-core-tag {
      transition: opacity .4s ease;
    }

    .pmap.is-live:not(.pop-closed) .pmap-core-tag {
      opacity: 0;
      pointer-events: none;
    }

    /* pins */
    .pmap-pins {
      position: absolute;
      inset: 0;
      z-index: 4;
    }

    .pmap-pin {
      position: absolute;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      opacity: 0;
      transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .pmap.is-live .pmap-pin {
      opacity: 1;
    }

    .pmap.is-live .pmap-pin.is-faded {
      opacity: .22;
    }

    .pmap.is-live .pmap-pin.is-faded:hover {
      opacity: 1;
    }

    /* category filter: only the selected tab's pins are on the map */
    .pmap .pmap-pin.is-hidden {
      opacity: 0 !important;
      pointer-events: none;
    }

    .pmap-pin-dot {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      /* background: rgba(18, 16, 22, 0.82); */
      border: 1px solid rgba(255, 255, 255, 0.5);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
    }

    .pmap-pin-dot svg {
      width: 16px;
      height: 16px;
      stroke: rgba(255, 255, 255, 0.92);
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .3s ease;
    }

    .pmap-pin-name {
      margin-top: 7px;
      font-family: var(--sans);
      font-size: 9.5px;
      font-weight: 400;
      letter-spacing: .06em;
      color: rgba(255, 255, 255, 0.85);
      white-space: nowrap;
      background: rgb(23, 53, 105);
      padding: 3px 9px;
      border-radius: 20px;
      border: 1px solid #fff;
      opacity: 0;
      transform: translateY(-3px);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }

    /* opt-in: show this pin's label ABOVE the dot (dot then sits exactly on the anchor) */
    .pmap-pin.label-above .pmap-pin-name {
      position: absolute;
      bottom: calc(100% + 7px);
      left: 50%;
      margin-top: 0;
      transform: translate(-50%, 3px);
    }

    .pmap-pin.label-above:hover .pmap-pin-name,
    .pmap-pin.label-above.is-open .pmap-pin-name {
      transform: translate(-50%, 0);
    }

    .pmap-pin:hover {
      z-index: 20;
    }

    .pmap-pin:hover .pmap-pin-dot,
    .pmap-pin.is-open .pmap-pin-dot {
      transform: scale(1.14);
      background: #fff;
      border-color: #fff;
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.18);
    }

    .pmap-pin:hover .pmap-pin-dot svg,
    .pmap-pin.is-open .pmap-pin-dot svg {
      stroke: #12100e;
    }

    /* names show on hover (desktop) or tap (mobile) */
    .pmap-pin:hover .pmap-pin-name,
    .pmap-pin.is-open .pmap-pin-name {
      opacity: 1;
      transform: translateY(0);
    }

    /* desktop + tablet have room → also reveal the matched pins' content on filter
       (phones stay tap-to-reveal so the labels don't crowd the small map) */
    @media (min-width: 768px) {
      .pmap-pin.is-highlight .pmap-pin-name {
        opacity: 1;
        transform: translateY(0);
      }

      .pmap-pin.label-above.is-highlight .pmap-pin-name {
        transform: translate(-50%, 0);
      }

      .pmap-pin:hover {
        z-index: 30;
      }

      /* hovering brings a pin's label to the front to read it */
    }

    /* filter switch = brighten matched dots smoothly (transition already on .pmap-pin-dot),
       fade the rest — the category reads clearly with no crowded/overflowing labels */
    .pmap.is-live .pmap-pin.is-highlight .pmap-pin-dot {
      border-color: rgba(255, 255, 255, 0.92);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(255, 255, 255, 0.08);
    }

    /* popup card */
    .pmap-popup {
      position: absolute;
      z-index: 30;
      left: 0;
      top: 0;
      width: 216px;
      padding: 15px 16px 14px;
      background: rgba(16, 14, 20, 0.9);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(201, 168, 108, 0.42);
      border-radius: 0;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
      transform: translate(-50%, calc(-100% - 22px)) scale(0.96);
      opacity: 0;
      pointer-events: none;
      transition: opacity .28s ease, transform .32s cubic-bezier(.16, 1, .3, 1);
    }

    .pmap-popup.is-visible {
      opacity: 1;
      transform: translate(-50%, calc(-100% - 22px)) scale(1);
      pointer-events: auto;
    }

    .pmap-popup.flip-down {
      transform: translate(-50%, 22px) scale(0.96);
    }

    .pmap-popup.flip-down.is-visible {
      transform: translate(-50%, 22px) scale(1);
    }

    .pmap-popup::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -8px;
      transform: translateX(-50%) rotate(45deg);
      width: 14px;
      height: 14px;
      background: rgba(16, 14, 20, 0.9);
      border-right: 1px solid rgba(201, 168, 108, 0.42);
      border-bottom: 1px solid rgba(201, 168, 108, 0.42);
    }

    .pmap-popup.flip-down::after {
      bottom: auto;
      top: -8px;
      transform: translateX(-50%) rotate(225deg);
    }

    .pmap-pop-cat {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      font-family: var(--sans);
      font-size: 8.5px;
      letter-spacing: .2em;
      
      color: var(--gold2);
    }

    .pmap-pop-cat svg {
      width: 12px;
      height: 12px;
      stroke: var(--gold2);
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .pmap-pop-name {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      color: #fff;
      line-height: 1.25;
      margin-bottom: 11px;
    }

    .pmap-pop-stats {
      display: flex;
      gap: 18px;
    }

    .pmap-pop-stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pmap-pop-stat b {
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 400;
      color: var(--gold2);
    }

    .pmap-pop-stat span {
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: .16em;
      
      color: rgba(255, 255, 255, 0.5);
    }

    /* map furniture */
    .pmap-compass {
      position: absolute;
      z-index: 5;
      top: 15px;
      right: 17px;
      width: 34px;
      height: 34px;
      opacity: .55;
    }

    .pmap-scale {
      position: absolute;
      z-index: 5;
      left: 18px;
      bottom: 15px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: .55;
    }

    .pmap-scale-bar {
      width: 58px;
      height: 1px;
      background: rgba(255, 255, 255, 0.6);
      position: relative;
    }

    .pmap-scale-bar::before,
    .pmap-scale-bar::after {
      content: '';
      position: absolute;
      bottom: 0;
      width: 1px;
      height: 4px;
      background: rgba(255, 255, 255, 0.6);
    }

    .pmap-scale-bar::before {
      left: 0;
    }

    .pmap-scale-bar::after {
      right: 0;
    }

    .pmap-scale span {
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, 0.6);
    }

    /* tablets & below: wrap long pin labels so they never clip at the frame edge */
    @media (max-width: 900px) {
      .pmap-pin-name {
        white-space: normal;
        text-align: center;
        max-width: 170px;
        line-height: 1.4;
      }
    }

    @media (max-width: 620px) {
      .pmap-stage {
        border-radius: 0;
      }

      .pmap-core-tag {
        z-index: 7;
      }

      .pmap-core-tag b {
        font-size: 12px;
      }

      .pmap-core-tag span {
        font-size: 7px;
        letter-spacing: .22em;
      }

      /* soft clearing behind the project label so nearby pins can't crowd it */
      .pmap-core-tag::before {
        content: '';
        position: absolute;
        z-index: -1;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        width: 176px;
        height: 84px;
        pointer-events: none;
        background: radial-gradient(ellipse at center,
            rgba(11, 10, 15, 0.90) 0%, rgba(11, 10, 15, 0.58) 40%, rgba(11, 10, 15, 0) 72%);
      }

      /* phones: bigger tap area (transparent padding, dot stays 26px) */
      .pmap-pin {
        padding: 8px;
      }

      .pmap-pin-dot {
        width: 26px;
        height: 26px;
      }

      .pmap-pin-dot svg {
        width: 13px;
        height: 13px;
      }

      /* phones: let tapped labels wrap instead of clipping at the frame edge */
      .pmap-pin-name {
        white-space: normal;
        text-align: center;
        max-width: min(40vw, 150px);
        line-height: 1.4;
        margin-top: 5px;
        font-size: 9px;
      }

      .pmap-popup {
        width: 186px;
      }

      .pmap-proj-pop {
        min-width: 172px;
        padding: 11px 34px 11px 14px;
        transform: translate(-50%, calc(-100% - 26px));
        border-radius: 8px;
      }

      .pmap-proj-pop b {
        font-size: 13px;
      }

      .pmap-proj-pop i {
        font-size: 11px;
        margin-top: 3px;
      }

      .pmap-proj-pop a {
        font-size: 11px;
        margin-top: 7px;
      }

      .pmap-pop-close {
        top: 4px;
        right: 4px;
        font-size: 12px;
      }
    }

    .loc-filter-strip {
      position: relative;
      z-index: 7;
      margin: 24px 0 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      background: rgba(18, 18, 18, 0.52);
      backdrop-filter: blur(28px) saturate(1.5);
      -webkit-backdrop-filter: blur(28px) saturate(1.5);
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 50px;
      padding: 6px 8px;
    }

    .loc-filter-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      height: 40px;
      min-width: 40px;
      border-radius: 20px;
      border: none;
      outline: none;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.60);
      cursor: pointer;
      padding: 0 11px;
      overflow: hidden;
      white-space: nowrap;
      transition:
        background 0.30s ease,
        color 0.30s ease,
        gap 0.42s cubic-bezier(.22, 1, .36, 1),
        padding 0.42s cubic-bezier(.22, 1, .36, 1);
    }

    .loc-filter-btn svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .loc-filter-btn-label {
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 400;
      letter-spacing: .15em;
      
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      transition:
        max-width 0.42s cubic-bezier(.22, 1, .36, 1),
        opacity 0.30s ease 0.12s;
      /* fade in as the tab widens → smooth, not abrupt */
    }

    /* hover = just a white highlight (no label expand, so nothing reflows). Only real
       hover devices get it; the label text appears on click/select (below). */
    @media (hover: hover) {
      .loc-filter-btn:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
      }
    }

    .loc-filter-btn.loc-selected {
      background: rgba(255, 255, 255, 0.90);
      color: #111;
      gap: 8px;
      padding: 0 16px;
    }

    .loc-filter-btn.loc-selected svg {
      stroke: #111;
    }

    .loc-filter-btn.loc-selected .loc-filter-btn-label {
      max-width: 100%;
      opacity: 1;
    }

    /* Hide new elements that don't exist in old layout */
    .loc-header-row,
    .loc-split,
    .loc-map-col,
    .loc-map-wrap,
    .loc-pip-group,
    .loc-accordion,
    .loc-row,
    .loc-place-idx {
      display: none !important;
    }

    /* ── Mobile (page uses 900 / 620 breakpoints) ── */
    @media (max-width:900px) {
      .enq-dialog {
        padding: 38px 22px 26px;
      }
    }

    @media (max-width:620px) {
      .enq-modal {
        padding: 12px;
      }

      .enq-dialog {
        padding: 34px 18px 24px;
        border-radius: calc(var(--pu-radius) - 2px);
      }

      .enq-dialog .book-submit,
      #footerForm .book-submit {
        width: 100%;
      }

      .glb {
        padding: 8vh 4vw;
      }

      .glb-img {
        max-width: 92vw;
        max-height: 64vh;
      }

      .glb-arrow {
        font-size: 2rem;
        padding: 8px 10px;
      }

      .glb-close {
        top: 12px;
        right: 12px;
      }

      .lp-gate-btn {
        padding: 13px 30px;
        font-size: .7rem;
        letter-spacing: .16em;
      }

      #plans:not(.plans-unlocked) .layout-plan-wrap img {
        filter: blur(8px);
      }

      .book-error {
        left: 78px;
      }
    }

    .sub-tabs {
      position: relative;
      z-index: 100;
    }

    .sub-tab {
      position: relative;
      z-index: 101;
    }

    .layout-plan-wrap {
      position: relative;
      z-index: 1;
    }

    /* ── Reduced motion: neutralise all injected/looping animation ── */
    @media (prefers-reduced-motion: reduce) {

      .enquire-fab,
      .lp-gate-btn {
        animation: none !important;
      }

      .enq-dialog,
      .glb-img,
      .enq-modal.open .book-title,
      .enq-modal.open .book-row,
      .enq-modal.open .book-consent,
      .enq-modal.open .book-submit,
      .book-note {
        animation: none !important;
        transition-duration: .001ms !important;
      }

      .book-row.invalid .book-input {
        animation: none !important;
      }
    }

    /* ═══ Propstory lead integration — message + overlay styles ═══ */
    .enq_form .lead-msg {
      display: none;
      margin: 0 0 14px;
      padding: 12px 14px;
      border-radius: 6px;
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.55;
      text-align: center;
    }

    .enq_form .success_msg {
      color: #8fe6b4;
      border: 1px solid #fff;
    }

    .enq_form .error_msg,
    .enq_form .form_error {
      background: rgba(255, 90, 90, 0.14);
      color: #ff9a9a;
      border: 1px solid rgba(255, 90, 90, 0.42);
    }

    /* ── intl-tel-input v12 (jQuery plugin) — make the wrapper + input fill the row so the
       phone field matches every other input instead of shrink-wrapping to half width ── */
    .book-phone .intl-tel-input {
      display: block;
      width: 100%;
    }

    .book-phone .intl-tel-input > input,
    .book-phone .intl-tel-input > input[type="tel"],
    .book-phone .intl-tel-input > input[type="text"] {
      width: 100%;
      display: block;
    }

    .book-phone .intl-tel-input .flag-container {
      z-index: 2;
    }

    /* footer: the phone wrapper must flex to fill the row like the name/email inputs */
    #footerForm .footer-field .book-phone {
      flex: 1;
      min-width: 0;
    }

    /* dropdown arrow: light on the dark field */
    .book-phone .selected-flag .iti-arrow {
      border-top-color: rgba(255, 255, 255, 0.55);
    }

    .book-phone .selected-flag .iti-arrow.up {
      border-bottom-color: rgba(255, 255, 255, 0.55);
    }

    /* country dropdown — themed to the dark forms */
    .book-phone .country-list {
      background-color: #1d417f;
      border-color: rgba(255, 255, 255, 0.14);
      color: #fff;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    }

    .book-phone .country-list .country.highlight,
    .book-phone .country-list .country:hover {
      background-color: rgba(255, 255, 255, 0.09);
    }

    .book-phone .country-list .divider {
      border-bottom-color: rgba(255, 255, 255, 0.16);
    }

    .book-phone .country-list .dial-code {
      color: rgba(255, 255, 255, 0.55);
    }

    .overlay_with_high_zindex {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(7, 16, 32, 0.55);
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }

    .overlay_with_high_zindex .oh-spinner {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.25);
      border-top-color: #fff;
      animation: oh-spin 0.8s linear infinite;
    }

    @keyframes oh-spin {
      to {
        transform: rotate(360deg);
      }
    }


          .overview-lifestyle{
              justify-content: left;
          }
            .highlight-number {
              font-size: 25px;
    font-weight: 500;
    color: #c9a14a;
              /* Bold */
              color: #c9a14a;
              /* Gold (change as needed) */
            }

            @media (max-width: 768px) {

              .igal-wrap {
                height: 300px;
                overflow: hidden;
              }

              .igal-card {
                width: 85vw;
                aspect-ratio: 16 / 9;
              }

              .igal-card[data-cpos="0"] {
                transform: translate(-50%, -50%) scale(1);
              }

              .igal-card[data-cpos="1"] {
                transform: translate(calc(-50% + 38vw), -50%) scale(0.8) rotateY(-8deg);
              }

              .igal-card[data-cpos="-1"] {
                transform: translate(calc(-50% - 38vw), -50%) scale(0.8) rotateY(8deg);
              }

              .igal-card[data-cpos="2"],
              .igal-card[data-cpos="-2"],
              .igal-card[data-cpos="3"],
              .igal-card[data-cpos="-3"] {
                opacity: 0;
                pointer-events: none;
              }
            }

            @media (max-width: 768px) {
             
              .hero-inner {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: stretch;
                padding: 30px 20px;
                z-index: 2;
              }

              .hero-left-col {
                width: 100%;
                display: flex;
                flex-direction: column;
                height: 100%;
              }

              /* Heading at the top */
              .hero-heading {
                margin-top: 50px;
                font-size: 32px;
                line-height: 1.2;
                text-align: center;
              }

              /* Logo in the middle */
              .hero-brand-logo {
                /*width: 180px;*/
                margin: auto auto;
                display: block;
                margin-top: 30px;
              }

              /* Details at the bottom */
              .hero-details-block {
                margin-top: auto;
                text-align: center;
                padding-bottom: 30px;
              }

              .hero-details {
                display: flex;
                flex-direction: row;
                gap: 10px;
                align-items: center;
              }

              .hero-detail-sep {
                display: block;
              }

              .hero-left-col {
                max-width: 100%;
              }
            }
            

a#faqMores eoi-popup {
    text-decoration: none;
    padding: 13px 36px;
    border-radius: 50px;
}
    .eoi-section {
  padding: 80px 80px;
    background: transparent;
    padding-bottom: 80px !important;
}

.eoi-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
}

.eoi-left,
.eoi-right {
  flex: 1;
  min-width: 320px;
}

.eoi-tag {
  display: inline-block;
  padding: 8px 18px;
  background: #e8f2ff;
  color: #1d417f;
  font-size: 14px;
  font-weight: 600;
  border-radius: 30px;
  margin-bottom: 20px;
}
h2.about-title.about-fade-down.in{
    font-size:28px;
}
.eoi-left h2 {
  font-size: 20px;
  color: #fff;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 20px;
}

.eoi-left p {
  color: #ffffffbd;
  font-size: 13px;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 35px;
}

.eoi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1d417f;
  color: #fff;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  transition: .3s ease;
}

.eoi-btn:hover {
  background: #2e6bb8;
  color: #fff;
}

.eoi-right {
  /*background: #fff;*/
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.eoi-right h3 {
  color: #1d417f;
  margin-bottom: 25px;
  font-size: 28px;
}

.eoi-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}

.eoi-benefits li {
  padding: 14px 0;
  font-size: 13px;
  color: #fff;
  border-bottom: 1px solid #eee;
}

.eoi-benefits li:last-child {
  border-bottom: none;
}

@media (max-width:991px) {
  .eoi-wrapper {
    flex-direction: column;
  }

  .eoi-left h2 {
    font-size: 32px;
  }

  .eoi-right {
    width: 100%;
  }
}

@media (max-width:576px) {
  .eoi-section {
    padding: 50px 0;
  }
  .eoi-left{
      padding: 40px;
    padding-bottom: 0px;
  }
  .eoi-right{
    padding-top: 0px;
  }

  .eoi-left h2 {
    font-size: 20px;
    color:#ffffffb8;
  }

  .eoi-left p,
  .eoi-benefits li {
    font-size: 15px;
  }

  .eoi-btn {
    width: 100%;
  }
}
      #amenities .ami-header { text-align: center; }
      .ami-sub {
        margin: 14px auto 0;
        max-width: 840px;
        font-family: var(--sans);
        font-size: clamp(.95rem, 1.4vw, 1.15rem);
        font-weight: 300;
        color: var(--ink);
      }
      .ami-intro {
        max-width: 720px;
        margin: 26px auto 0;
        text-align: center;
        font-family: var(--sans);
        font-size: .95rem;
        font-weight: 300;
        line-height: 1.9;
        color: rgba(255, 255, 255, 0.72);
      }
      .ami-intro p { margin: 0 0 8px; }
      .ami-cats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.12);
        max-width: 1100px;
        margin: 48px auto 0;
      }
      .ami-cat {
        background: rgba(13, 26, 50, 0.55);
        padding: 30px 26px 34px;
      }
      .ami-cat h3 {
        font-family: var(--serif);
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: .04em;
        color: #fff;
        margin: 0 0 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      }
      .ami-cat ul { list-style: none; margin: 0; padding: 0; }
      .ami-cat li {
        font-family: var(--sans);
        font-size: .88rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.78);
        padding: 7px 0;
      }
      .ami-more-wrap { text-align: center; margin-top: 40px; }
      @media (max-width: 900px) {
        .ami-cats { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 520px) {
        .ami-cats { grid-template-columns: 1fr; }
      }

        .layouts-sub {
          margin: 12px auto 0;
          font-family: var(--sans);
          font-size: clamp(.95rem, 1.4vw, 1.12rem);
          font-weight: 300;
          color: var(--ink);
          text-align: center;
        }
        .layouts-lead {
          max-width: 720px;
          margin: 16px auto 0;
          font-family: var(--sans);
          font-size: .92rem;
          font-weight: 300;
          line-height: 1.85;
          color: rgba(255, 255, 255, 0.72);
          text-align: center;
        }
        .layouts-lead strong { color: #fff; font-weight: 500; }


    :root,
    html.wb-theme,
    body.wb-theme {
      /* blue palette */
      --blue: #1d417f;
      --blue-mid: #2e6bb8;
      --blue-soft: #eef3fb;
      --blue-line: rgba(29, 65, 127, 0.16);

      /* base text/rules → dark on light */
      --ink: #1d417f;
      --muted: rgba(16, 35, 63, 0.60);
      --rule: rgba(29, 65, 127, 0.10);
      --ink-60: rgba(16, 35, 63, 0.60);
      --ink-12: rgba(29, 65, 127, 0.12);

      /* purva-ui tokens → light dialog, blue accent */
      --pu-accent: #1d417f;
      --pu-accent-2: #2e6bb8;
      --pu-on-accent: #ffffff;
      --pu-bg: #ffffff;
      --pu-surface: #f4f7fc;
      --pu-text: #10233f;
      --pu-muted: rgba(16, 35, 63, 0.62);
      --pu-border: rgba(29, 65, 127, 0.22);
      --pu-overlay: rgba(12, 26, 51, 0.72);
    }

    /* ── Page ground ── */
    html.wb-theme { background: #ffffff; }

    body.wb-theme {
      background-color: #ffffff !important;
     
    }

    body.wb-theme::before { background: #f4f7fc !important; opacity: 1 !important; filter: none !important; }
    body.wb-theme::after  { background: none !important; }

    /* ── Topbar ── */
    .wb-theme #topbar {
      background: #fff !important;
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      backdrop-filter: blur(14px) saturate(1.3);
      border-bottom: 1px solid var(--blue-line) !important;
    }
    .wb-theme #topbar.scrolled {
      background: rgba(255, 255, 255, 0.93) !important;
      border-bottom: 1px solid rgba(29, 65, 127, 0.20) !important;
    }
    .wb-theme .tb-brand-name { color: var(--blue); }
    .wb-theme .tb-logo-img { filter: none; }
    .wb-theme .tb-nav a { color: rgb(29 65 127); }
    .wb-theme .tb-nav a:hover { color: var(--blue); }
    .wb-theme .tb-nav-vt { color: rgba(29, 65, 127, 0.78); }
    .wb-theme .tb-nav-vt:hover { color: var(--blue); }
    .wb-theme .tb-cta { color: var(--blue); border-color: rgba(29, 65, 127, 0.32); }
    .wb-theme .tb-cta::before { background: rgba(29, 65, 127, 0.08); }
    .wb-theme .tb-cta:hover { border-color: rgba(29, 65, 127, 0.65); }
    .wb-theme .tb-burger span { background: var(--blue); }

    /* ── Mobile menu ── */
    .wb-theme .mobile-menu {
      background: rgba(255, 255, 255, 0.96) !important;
      -webkit-backdrop-filter: blur(24px) saturate(1.4);
      backdrop-filter: blur(24px) saturate(1.4);
    }
    .wb-theme .mm-nav a { color: #1d417f; border-bottom-color: rgba(29, 65, 127, 0.10); font-weight: 500; }
    .wb-theme .mm-nav a:hover, .wb-theme .mm-nav a:active { color: var(--blue); }

    /* ── Section titles that were forced white on the page backdrop ── */
    .wb-theme .hl-col-header .sec-title {
      color: var(--blue) !important;
      text-shadow: none !important;
    }
    .wb-theme .hl-col-header .sec-title::after { background: rgba(29, 65, 127, 0.55); }
    .wb-theme .sec-title.light { color: var(--blue); }
    .wb-theme .sec-title.light::after { background: rgba(29, 65, 127, 0.4); }

    /* ── Generic buttons ── */
    .wb-theme .faq-more-btn,
    .wb-theme button#faqMore,
    .wb-theme .faq-more-btn.eoi-popup,
    .wb-theme .faq-more-btn.lifestyle {
      background: var(--blue-soft);
      border: 1px solid rgba(29, 65, 127, 0.22);
      color: var(--blue);
    }
    .wb-theme .faq-more-btn:hover,
    .wb-theme button#faqMore:hover {
      background: var(--blue);
      border-color: var(--blue);
      color: #fff;
    }
    .wb-theme .ty-btn { color: var(--blue); border-color: rgba(29, 65, 127, 0.40); }
    .wb-theme .ty-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
    .wb-theme .btn-outline.inv { color: var(--blue); border-color: rgba(29, 65, 127, 0.30); }
    .wb-theme .btn-outline.inv:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

    /* ── Amenities category cards (in-body <style>) ── */
    .wb-theme .ami-cats {
      background: var(--blue-line);
      border: 1px solid var(--blue-line);
    }
    .wb-theme .ami-cat { background: var(--blue); }
    .wb-theme .ami-cat h3 { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.22); }
    .wb-theme .ami-cat li { color: rgba(255, 255, 255, 0.82); }
    .wb-theme .ami-intro { color: var(--muted); }

    /* ── Layout Plans lead copy ── */
    .wb-theme .layouts-lead { color: var(--muted); }
    .wb-theme .layouts-lead strong { color: var(--blue); }
    .wb-theme .layouts-sub { color: var(--ink); }
    .wb-theme .ami-sub { color: var(--ink); }

    /* ── Project Highlights — numbered list over a dimmed project render.
         Two columns of evenly-ruled rows; big faded numeral, then stat + note. ── */
    .wb-theme #highlights {
      position: relative;
      background: #12294f;
      background-image:
      linear-gradient(rgb(12 30 60 / 61%), rgb(12 30 60 / 98%)), url(../images/newhighlight.jpeg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .wb-theme #highlights .hl-inner {
      position: relative;
      z-index: 2;
      padding: 0 5rem !important;
    }
    .wb-theme #highlights .hl-col-header {
      text-align: center;
    }
    .wb-theme #highlights .hl-col-header .sec-title { color: #ffffff !important; text-shadow: none !important; }
    .wb-theme #highlights .hl-col-header .sec-title::after { background: rgba(255, 255, 255, 0.6) !important; }

    /* kill the floating elevation photo + its scrim */
    .wb-theme #highlights .hl-bars,
    .wb-theme #highlights .hl-bar { display: none !important; }

    .wb-theme #highlights .hl-col-row {
      position: relative;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0 clamp(32px, 5vw, 72px) !important;
      min-height: 0 !important;
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
      margin: 0 auto !important;
      max-width: 1080px;
      width: 100%;
    }
    .wb-theme #highlights .hl-col-row::before,
    .wb-theme #highlights .hl-col-row::after { display: none !important; }

    /* numbered list: each item ruled top & bottom, no fill, no box */
    .wb-theme #highlights .hl-col {
      position: relative;
      z-index: 1;
      border: 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
      background: transparent !important;
      padding: 25px 20px !important;
      min-height: 0 !important;
      display: grid;
      grid-template-columns: 54px 1fr;
      align-items: start;
      column-gap: 20px;
    }
    .wb-theme #highlights .hl-col:nth-child(1),
    .wb-theme #highlights .hl-col:nth-child(2) {
      border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    .wb-theme #highlights .hl-col-top {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .wb-theme #highlights .hl-col-icon { display: none !important; }
    .wb-theme #highlights .hl-col-num {
      display: block;
      font-family: var(--serif);
      font-size: clamp(24px, 3vw, 32px) !important;
      font-weight: 400 !important;
      line-height: 1 !important;
      letter-spacing: .01em !important;
      color: #fff !important;
      text-shadow: none !important;
    }

    .wb-theme #highlights .hl-col-text,
    .wb-theme #highlights .hl-col-text p {
      color: rgba(255, 255, 255, 0.62) !important;
      font-size: 13px !important;
      font-weight: 300 !important;
      line-height: 1.6 !important;
      margin: 0 !important;
      text-shadow: none !important;
    }
    .wb-theme #highlights .hl-col-text br { display: none; }
    .wb-theme #highlights .highlight-number {
      display: block;
      color: #ffffff !important;
      font-size: clamp(15px, 1.7vw, 17px) !important;
      font-weight: 600 !important;
      line-height: 1.35 !important;
      margin-bottom: 6px;
      letter-spacing: .01em;
    }

    @media (max-width: 760px) {
      .wb-theme #highlights .hl-col-row { grid-template-columns: 1fr !important; }
      .wb-theme #highlights .hl-col:nth-child(2) { border-top: 0 !important; }
    }
    @media (max-width: 420px) {
      .wb-theme #highlights .hl-col { grid-template-columns: 44px 1fr; column-gap: 16px; }
      .wb-theme #highlights .hl-col-num { font-size: 22px !important; }
    }

    /* ── Project Overview (EOI) band ── */
    .wb-theme .eoi-left h2 { color: var(--blue); }
    .wb-theme .eoi-left p { color: rgba(16, 35, 63, 0.70); }
    .wb-theme .eoi-tag { background: #e8f2ff; color: var(--blue); }
    .wb-theme .eoi-btn { background: var(--blue); color: #fff; }
    .wb-theme .eoi-btn:hover { background: var(--blue-mid); }
    .wb-theme .eoi-right {
      background: #ffffff;
      border: 1px solid var(--blue-line);
      box-shadow: 0 15px 35px rgba(29, 65, 127, 0.10);
    }
    .wb-theme .eoi-right h3 { color: var(--blue); }
    .wb-theme .eoi-benefits li { color: rgba(16, 35, 63, 0.80); border-bottom-color: rgba(29, 65, 127, 0.10); }
    @media (max-width: 576px) {
      .wb-theme .eoi-left h2 { color: var(--blue); }
    }

    /* ── Footer ── */
    .wb-theme .footer-brand-name { color: var(--blue); }
    .wb-theme .footer-submit {
      background: var(--blue);
      border: 1px solid var(--blue);
      color: #fff;
    }
    .wb-theme .footer-submit:hover { background: var(--blue-mid); border-color: var(--blue-mid); }

    /* ── Sticky "Get a Callback" tab ── */
    .wb-theme .enquire-fab {
      background: var(--blue);
      border: 1px solid var(--blue);
      color: #fff;
    }
    .wb-theme .enquire-fab:hover,
    .wb-theme .enquire-fab:focus-visible { background: var(--blue-mid); }

    /* ── Enquire dialog / forms ── */
    .wb-theme .enq-dialog {
      border-color: var(--blue-line);
      box-shadow: 0 30px 80px rgba(12, 26, 51, 0.28);
    }
    .wb-theme .enq-dialog .book-input,
    .wb-theme .enq-dialog .book-phone .iti__tel-input {
      color: #10233f;
    }
    .wb-theme .enq-dialog .book-input::placeholder { color: rgba(16, 35, 63, 0.40); }
    .wb-theme .enq-dialog .book-input:focus { background: #eef3fb; }
    .wb-theme .book-input:-webkit-autofill,
    .wb-theme .book-input:-webkit-autofill:hover,
    .wb-theme .book-input:-webkit-autofill:focus,
    .wb-theme .enq-dialog .iti__tel-input:-webkit-autofill,
    .wb-theme .enq-dialog .iti__tel-input:-webkit-autofill:hover,
    .wb-theme .enq-dialog .iti__tel-input:-webkit-autofill:focus {
      -webkit-text-fill-color: #10233f !important;
      caret-color: #10233f;
      -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
      box-shadow: 0 0 0 1000px #ffffff inset !important;
    }
    .wb-theme .enq-dialog .book-submit,
    .wb-theme .book-form .book-submit {
      background: var(--blue);
      border: 1px solid var(--blue);
      color: #fff;
    }
    .wb-theme .enq-dialog .book-submit:hover { background: var(--blue-mid); }

    /* phone country dropdown → light */
    .wb-theme .iti { --iti-country-selector-bg: #ffffff; --iti-border-color: rgba(29, 65, 127,0.16); --iti-hover-color: rgba(29, 65, 127,0.08); --iti-icon-color: var(--pu-muted); }
    .wb-theme .iti__dropdown-content,
    .wb-theme .book-phone .country-list {
      background: #ffffff;
      background-color: #ffffff;
      color: #10233f;
      border: 1px solid rgba(29, 65, 127, 0.16);
      box-shadow: 0 18px 50px rgba(12, 26, 51, 0.22);
    }
    .wb-theme .iti__search-input,
    .wb-theme .iti__search-input:focus { background: #f4f7fc; color: #10233f; }
    .wb-theme .book-phone .country-list .country.highlight,
    .wb-theme .book-phone .country-list .country:hover { background-color: rgba(29, 65, 127, 0.08); }
    .wb-theme .book-phone .country-list .divider { border-bottom-color: rgba(29, 65, 127, 0.14); }
    .wb-theme .iti__country-list::-webkit-scrollbar-thumb { background: rgba(29, 65, 127, 0.20); }
    .wb-theme .iti__country-list { scrollbar-color: rgba(29, 65, 127, 0.20) transparent; }
    .wb-theme .book-phone .selected-flag .iti-arrow { border-top-color: rgba(29, 65, 127, 0.55); }
    .wb-theme .book-phone .selected-flag .iti-arrow.up { border-bottom-color: rgba(29, 65, 127, 0.55); }

    /* ── Plans gate + sub-tabs ── */
    .wb-theme .lp-gate-btn {
      background: var(--blue);
      border: 1px solid var(--blue);
      color: #fff;
    }
    .wb-theme .lp-gate-btn:hover { background: var(--blue-mid); border-color: var(--blue-mid); }
    .wb-theme .sub-tab {
      background: var(--blue-soft);
      border: 1px solid rgba(29, 65, 127, 0.18);
      color: rgba(29, 65, 127, 0.75);
    }
    .wb-theme .sub-tab:hover { background: rgba(29, 65, 127, 0.10); color: var(--blue); }
    .wb-theme .sub-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

    /* ── Layout & Design — plan nav tabs styled as real buttons ── */
    .wb-theme #plans .layouts-tabs { gap: 10px !important; flex-wrap: wrap !important; }
    .wb-theme #plans .layout-tab {
      background: #eef3fb !important;
      border: 1px solid rgba(29, 65, 127, 0.25) !important;
      border-radius: 8px !important;
      padding: 12px 26px !important;
      color: #000 !important;
      font-weight: 500 !important;
    }
    .wb-theme #plans .layout-tab:hover {
      background: rgba(29, 65, 127, 0.12) !important;
      color: #000 !important;
    }
    .wb-theme #plans .layout-tab.active {
      background: var(--blue) !important;
      border-color: var(--blue) !important;
      color: #ffffff !important;
    }
    .wb-theme #plans .layout-tab::before,
    .wb-theme #plans .layout-tab::after { display: none !important; }

    /* ── Gallery coverflow arrows (sit over the white page, not an image) ── */
    .wb-theme .igal-arrow { color: rgba(29, 65, 127, 0.55); }
    .wb-theme .igal-arrow:hover { color: var(--blue); }
    .wb-theme .igal-tab--active { color: var(--blue); border-bottom-color: var(--blue); }

    /* ── Success / error messages inside forms ── */
    .wb-theme .enq_form .success_msg {  color: #17356a; border-color: #fff; }
    .wb-theme .enq_form .error_msg,
    .wb-theme .enq_form .form_error { background: rgba(214, 60, 60, 0.10); color: #b02a2a; border-color: rgba(214, 60, 60, 0.35); }

    /* ═══════════════════════════════════════════════════════════════
       SAFETY NET — force readable dark text on the white sections.
       Deliberately scoped: the hero, the blue Highlights band and the
       navy amenity cards keep their light text (handled above).
       ═══════════════════════════════════════════════════════════════ */

    /* Overview / About */
    .wb-theme #about .about-title,
    .wb-theme #about ,
    .wb-theme #about .about-sub,
    .wb-theme #about h2,
    .wb-theme #about h3,
    .wb-theme #about li,
    .wb-theme #about span:not(.highlight-number) { color: var(--ink) !important; }

    /* Project Overview (EOI) — left copy on the white background */
    .wb-theme .eoi-section .hl-col-header .sec-title { color: var(--blue) !important; text-shadow: none !important; }
    .wb-theme .eoi-left h2 { color: var(--blue) !important; }
    .wb-theme .eoi-left p,
    .wb-theme .eoi-left p span,
    .wb-theme .eoi-left li { color: rgba(16, 35, 63, 0.82) !important; }

    /* Section headings + intros that sit on the white page */
    .wb-theme .sec-title,
    .wb-theme .gal-sec-header .sec-title,
    .wb-theme .layouts-title-row .sec-title,
    .wb-theme .faq-sec .sec-title,
    .wb-theme .ami-header .sec-title,
    .wb-theme .about-title { color: var(--ink) !important; }
    .wb-theme .ami-sub,
    .wb-theme .ami-header .ami-sub,
    .wb-theme .layouts-sub,
    .wb-theme .layouts-lead { color: var(--muted) !important; }
    .wb-theme .layouts-lead strong { color: var(--blue) !important; }

    /* FAQ */
    .wb-theme .faq-q-txt { color: var(--ink) !important; }
    .wb-theme .faq-icon { stroke: var(--blue) !important; }
    .wb-theme .faq-a-inner,
   
    .wb-theme .faq-item { border-color: rgba(29, 65, 127, 0.12) !important; }

    /* Gallery */
    .wb-theme .igal-tab { color: rgba(29, 65, 127, 0.45) !important; }
    .wb-theme .igal-tab:hover { color: rgba(29, 65, 127, 0.75) !important; }
    .wb-theme .igal-tab--active { color: var(--blue) !important; border-bottom-color: var(--blue) !important; }
    .wb-theme .igal-arrow { color: var(--blue) !important; }
    .wb-theme .igal-arrow svg { stroke: var(--blue) !important; }
    .wb-theme .igal-dot { background: rgba(29, 65, 127, 0.18) !important; }
    .wb-theme .igal-dot.active { background: var(--blue) !important; }

    /* Bottom forms — footer + popup: dark labels, dark input text, visible lines */
    .wb-theme #footerForm label,
    .wb-theme #footerForm .book-label,
    .wb-theme .footer-field label,
    .wb-theme .enq-dialog .book-label { color: var(--ink) !important; }
    .wb-theme #footerForm input,
    .wb-theme .footer-field input,
    .wb-theme .enq-dialog .book-input,
    .wb-theme .book-phone .iti__tel-input,
    .wb-theme .book-phone input[type="tel"] { color: #10233f !important; }
    .wb-theme #footerForm input::placeholder,
    .wb-theme .footer-field input::placeholder,
    .wb-theme .enq-dialog .book-input::placeholder { color: rgba(16, 35, 63, 0.38) !important; }
    .wb-theme .footer-field,
    .wb-theme #footerForm .book-row { border-bottom-color: rgba(29, 65, 127, 0.22) !important; }
    .wb-theme .footer-form-title,
    .wb-theme .book-title,
    .wb-theme .modal-title-text { color: var(--ink) !important; }
    .wb-theme .footer-consent,
    .wb-theme .footer-consent-text,
    .wb-theme .footer-consent-text a,
    .wb-theme .footer-consent span,
    .wb-theme .book-consent,
    .wb-theme .book-consent span,
    .wb-theme .footer-rera,
    .wb-theme .footer-copy,
    .wb-theme footer p { color: rgba(16, 35, 63, 0.62) !important; }
    .wb-theme .footer-consent a,
    .wb-theme .book-consent a { color: var(--blue-mid) !important; }
    .wb-theme .footer-submit,
    .wb-theme .footer-submit.book-submit,
    .wb-theme button.footer-submit,
    .wb-theme #footerForm .book-submit {
      background: var(--blue) !important;
      border: 1px solid var(--blue) !important;
      color: #fff !important;
    }

    /* Phone dial-code / flag text in both forms */
    .wb-theme .book-phone .iti__selected-dial-code,
    .wb-theme .book-phone .selected-dial-code,
    .wb-theme .iti__dial-code { color: rgba(16, 35, 63, 0.66) !important; }
    .wb-theme .iti__country,
    .wb-theme .iti__country-name,
    .wb-theme .book-phone .country-list .country { color: #10233f !important; }

    /* ══════════ REGISTER YOUR INTEREST — image split on white ══════════ */
    .wb-theme .rgi-sec {
      background: #ffffff;
      padding: clamp(48px, 7vw, 88px) clamp(20px, 6vw, 80px);
    }
    .wb-theme .rgi-sec .rgi-wrap {
      max-width: 1140px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      border: 1px solid rgba(29, 65, 127, 0.14);
      box-shadow: 0 26px 64px rgba(29, 65, 127, 0.12);
      background: #ffffff;
      overflow: hidden;
    }

    .wb-theme .rgi-sec .rgi-media {
      position: relative;
      min-height: 100%;
      background: #17356a;
    }
    .wb-theme .rgi-sec .rgi-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .wb-theme .rgi-sec .rgi-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(23, 53, 106, 0.12) 0%, rgba(23, 53, 106, 0.55) 100%);
    }
    .wb-theme .rgi-sec .rgi-media-tag {
      position: absolute;
      left: 20px;
      bottom: 20px;
      z-index: 2;
      font-family: var(--sans);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.22em;
      color: #ffffff;
      background: rgba(29, 65, 127, 0.55);
      backdrop-filter: blur(4px);
      padding: 8px 14px;
    }

    .wb-theme .rgi-sec .rgi-body {
      padding: clamp(38px, 4.5vw, 64px) clamp(28px, 4.2vw, 60px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .wb-theme .rgi-sec .rgi-cta { align-self: center; }
    .wb-theme .rgi-sec .rgi-body .sec-title {
      text-align: center !important;
      margin-bottom: 0 !important;
    }
    .wb-theme .rgi-sec .rgi-body .sec-title::after { margin-left: auto !important; margin-right: auto !important; }
    .wb-theme .rgi-sec .sec-title,
    .wb-theme .rgi-sec .sec-title .s-line-inner { color: #1d417f !important; }
    .wb-theme .rgi-sec .sec-title::after { background: #1d417f !important; opacity: 1 !important; }

    .wb-theme .rgi-sec .rgi-lead {
      margin: 6px 0 0;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 300;
      color: rgba(16, 35, 63, 0.62);
    }

    .wb-theme .rgi-sec .rgi-grid {
      list-style: none;
      margin: 44px 0 46px;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 26px;
    }
    .wb-theme .rgi-sec .rgi-grid li {
      position: relative;
      padding-left: 24px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.42;
      color: rgba(16, 35, 63, 0.85);
    }
    .wb-theme .rgi-sec .rgi-grid li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      width: 13px;
      height: 13px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d417f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .wb-theme .rgi-sec .rgi-cta .faq-more-btn {
      background: #1d417f !important;
      border: 1px solid #1d417f !important;
      color: #ffffff !important;
    }
    .wb-theme .rgi-sec .rgi-cta .faq-more-btn:hover {
      background: #2e6bb8 !important;
      border-color: #2e6bb8 !important;
      color: #ffffff !important;
    }

    @media (max-width: 860px) {
      .wb-theme .rgi-sec .rgi-wrap { grid-template-columns: 1fr; }
      .wb-theme .rgi-sec .rgi-media { min-height: 220px; }
      .wb-theme .rgi-sec .rgi-body .sec-title { text-align: center !important; }
      .wb-theme .rgi-sec .rgi-body .sec-title::after { margin-left: auto !important; margin-right: auto !important; }
    }
    @media (max-width: 460px) {
      .wb-theme .rgi-sec .rgi-grid { grid-template-columns: 1fr; }
    }

    /* ══════════ UNIFIED CTA BUTTONS ══════════
       Every call-to-action button matches the "Download Master plan"
       (.lp-gate-btn) treatment: solid blue, white text, square corners. */
    .wb-theme .faq-more-btn,
    .wb-theme button#faqMore,
    .wb-theme .faq-more-btn.eoi-popup,
    .wb-theme .faq-more-btn.lifestyle,
    .wb-theme .mm-enquire,
    .wb-theme .nav-menu-cta,
    .wb-theme .footer-submit,
    .wb-theme .footer-submit.book-submit,
    .wb-theme button.footer-submit,
    .wb-theme #footerForm .book-submit,
    .wb-theme .enq-dialog .book-submit,
    .wb-theme .book-submit {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.2;
      font-family: var(--pu-font-body) !important;
      font-size: .76rem !important;
      letter-spacing: .22em !important;
      padding: 15px 42px !important;
      border-radius: 0 !important;
      background: var(--blue) !important;
      border: 1px solid var(--blue) !important;
      color: #fff !important;
      cursor: pointer;
      transition: background .3s var(--pu-ease), border-color .3s var(--pu-ease), color .3s var(--pu-ease), transform .18s var(--pu-ease);
    }

    .wb-theme .faq-more-btn:hover,
    .wb-theme button#faqMore:hover,
    .wb-theme .faq-more-btn.eoi-popup:hover,
    .wb-theme .faq-more-btn.lifestyle:hover,
    .wb-theme .mm-enquire:hover,
    .wb-theme .nav-menu-cta:hover,
    .wb-theme .footer-submit:hover,
    .wb-theme button.footer-submit:hover,
    .wb-theme #footerForm .book-submit:hover,
    .wb-theme .enq-dialog .book-submit:hover,
    .wb-theme .book-submit:hover {
      background: var(--blue-mid) !important;
      border-color: var(--blue-mid) !important;
      color: #fff !important;
    }

    .wb-theme .faq-more-btn:active,
    .wb-theme .mm-enquire:active,
    .wb-theme .book-submit:active {
      transform: translateY(1px) scale(.99);
    }

    /* floating side tab — keep its vertical shape, square the corners */
    .wb-theme .enquire-fab {
      border-radius: 0 !important;
      background: var(--blue) !important;
      color: #fff !important;
      border: 1px solid #fff !important;
    }
    .wb-theme .enquire-fab:hover {
      background: var(--blue-mid) !important;
    }

    /* ══════════ UNIFIED SECTION HEADINGS ══════════
       Every section title matches the "Overview" (.about-title) treatment,
       with the same underline the Project Highlights heading uses. */
    .wb-theme .about-title,
    .wb-theme h2.about-title,
    .wb-theme h2.about-title.about-fade-down.in,
    .wb-theme .sec-title,
    .wb-theme .ami-header .sec-title,
    .wb-theme .layouts-title-row .sec-title,
    .wb-theme .gal-sec-header .sec-title,
    .wb-theme .faq-sec .sec-title,
    .wb-theme .eoi-section .hl-col-header .sec-title,
    .wb-theme .eoi-section .hl-col-header h2.sec-title,
    .wb-theme #highlights .hl-col-header .sec-title,
    .wb-theme #highlights .hl-col-header h2.sec-title {
      font-family: var(--serif) !important;
      font-size: 31px !important;
      font-weight: 500 !important;
      letter-spacing: -0.03em !important;
      line-height: 1.15 !important;
      text-align: center !important;
      text-shadow: none !important;
    }

    @media (max-width: 560px) {
      .wb-theme .about-title,
      .wb-theme h2.about-title.about-fade-down.in,
      .wb-theme .sec-title,
      .wb-theme .ami-header .sec-title,
      .wb-theme .layouts-title-row .sec-title,
      .wb-theme .gal-sec-header .sec-title,
      .wb-theme .faq-sec .sec-title,
      .wb-theme .eoi-section .hl-col-header .sec-title,
      .wb-theme #highlights .hl-col-header .sec-title {
        font-size: 25px !important;
      }
    }

    /* the JS line-splitter wraps heading text in .s-line-inner, and
       ".s-line-inner.in { font-size:20px }" then shrinks every split
       heading — force the inner span back to the heading's own size */
    .wb-theme .about-title .s-line-inner,
    .wb-theme .about-title .s-line-inner.in,
    .wb-theme .sec-title .s-line-inner,
    .wb-theme .sec-title .s-line-inner.in,
    .wb-theme .ami-header .sec-title .s-line-inner.in,
    .wb-theme .layouts-title-row .sec-title .s-line-inner.in,
    .wb-theme .gal-sec-header .sec-title .s-line-inner.in,
    .wb-theme .faq-sec .sec-title .s-line-inner.in,
    .wb-theme .eoi-section .hl-col-header .sec-title .s-line-inner.in,
    .wb-theme #highlights .hl-col-header .sec-title .s-line-inner.in {
      font-size: inherit !important;
    }

    /* the shared underline — Project Highlights style (72px bar) */
    .wb-theme .about-title::after,
    .wb-theme .sec-title::after,
    .wb-theme .ami-header .sec-title::after,
    .wb-theme .layouts-title-row .sec-title::after,
    .wb-theme .gal-sec-header .sec-title::after,
    .wb-theme .faq-sec .sec-title::after,
    .wb-theme .eoi-section .hl-col-header .sec-title::after,
    .wb-theme #highlights .hl-col-header .sec-title::after {
      content: '' !important;
      display: block !important;
      width: 72px !important;
      height: 2px !important;
      background: #1d417f !important;
      opacity: 1 !important;
      margin: 14px auto 0 !important;
    }

    /* colour: brand blue on the white page, white on the blue Highlights band */
    .wb-theme .about-title,
    .wb-theme .about-title .s-line-inner,
    .wb-theme .sec-title,
    .wb-theme .sec-title .s-line-inner,
    .wb-theme .ami-header .sec-title,
    .wb-theme .ami-header .sec-title .s-line-inner,
    .wb-theme .layouts-title-row .sec-title,
    .wb-theme .layouts-title-row .sec-title .s-line-inner,
    .wb-theme .gal-sec-header .sec-title,
    .wb-theme .gal-sec-header .sec-title .s-line-inner,
    .wb-theme .faq-sec .sec-title,
    .wb-theme .faq-sec .sec-title .s-line-inner,
    .wb-theme .eoi-section .hl-col-header .sec-title,
    .wb-theme .eoi-section .hl-col-header .sec-title .s-line-inner {
      color: #1d417f !important;
    }

    /* headings that sit on the blue Highlights band stay white */
    .wb-theme #highlights .hl-col-header .sec-title,
    .wb-theme #highlights .hl-col-header .sec-title .s-line-inner {
      color: #ffffff !important;
    }
    .wb-theme #highlights .hl-col-header .sec-title::after {
      background: #ffffff !important;
      opacity: 0.6 !important;
    }

    /* ══════════ LOCATION HIGHLIGHTS ══════════ */
    .wb-theme .loc-sec {
      padding: clamp(56px, 8vw, 88px) clamp(20px, 6vw, 80px);
      background: #ffffff;
    }
    .wb-theme .loc-header {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .wb-theme .loc-sub {
      margin: 0 auto;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(16, 35, 63, 0.66);
    }
    .wb-theme .loc-wrap {
      margin: 40px auto 0;
      display: grid;
      gap: clamp(28px, 4vw, 52px);
      align-items: stretch;
    }
    .wb-theme .loc-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }
    .wb-theme .loc-list li {
      padding: 18px 0;
      border-bottom: 1px solid rgba(29, 65, 127, 0.14);
    }
    .wb-theme .loc-list li:first-child { padding-top: 0; }
    .wb-theme .loc-list li:last-child { border-bottom: none; padding-bottom: 0; }
    .wb-theme .loc-stat {
      display: block;
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 400;
      letter-spacing: -0.02em;
      color: #1d417f;
    }
    .wb-theme .loc-label {
      display: block;
      margin-top: 4px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 300;
      color: rgba(16, 35, 63, 0.66);
    }
    .wb-theme .loc-map {
      position: relative;
      min-height: 340px;
      border: 1px solid rgba(29, 65, 127, 0.16);
      box-shadow: 0 18px 44px rgba(29, 65, 127, 0.10);
      overflow: hidden;
    }
    .wb-theme .loc-map iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    @media (max-width: 860px) {
      .wb-theme .loc-wrap { grid-template-columns: 1fr; }
      .wb-theme .loc-list { text-align: center; }
      .wb-theme .loc-map { min-height: 300px; }
    }

    /* ══════════ AMENITY IMAGE SLIDER ══════════ */
    .wb-theme #amenities .ami-header { margin-bottom: 0 !important; }
    .wb-theme #amenities .amn-tabs {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: clamp(28px, 4vw, 40px) auto 0;
    }
 
    .wb-theme #amenities .amn-tab {
      font-family: var(--sans);
      font-size: 13.5px;
      letter-spacing: .16em;
      padding: 11px 26px;
      border: 1px solid rgba(29, 65, 127, 0.24);
      background: #fff;
      color: rgba(29, 65, 127, 0.72);
      cursor: pointer;
      transition: background .25s, color .25s, border-color .25s;
    }
    .wb-theme #amenities .amn-tab:hover { border-color: rgba(29, 65, 127, 0.5); }
    .wb-theme #amenities .amn-tab.is-active {
      background: #1d417f;
      border-color: #1d417f;
      color: #fff;
    }

    .wb-theme #amenities .amn-slider-wrap {
      position: relative;
      max-width: 1280px;
      margin: clamp(22px, 3vw, 34px) auto 0;
      padding: 0 clamp(16px, 5vw, 64px);
    }
    .wb-theme #amenities .amn-panel { display: none; }
    .wb-theme #amenities .amn-panel.is-active { display: block; }

    .wb-theme #amenities .amn-track {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 14px;
      scrollbar-width: thin;
      scrollbar-color: rgba(29, 65, 127, 0.35) transparent;
    }
    .wb-theme #amenities .amn-track::-webkit-scrollbar { height: 6px; }
    .wb-theme #amenities .amn-track::-webkit-scrollbar-thumb { background: rgba(29, 65, 127, 0.3); }

    .wb-theme #amenities .amn-card {
      position: relative;
      margin: 0;
      flex: 0 0 clamp(150px, 18vw, 188px);
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 30px 18px 24px;
      background: #fff;
      border: 1px solid rgba(29, 65, 127, 0.14);
      text-align: center;
      transition: border-color .25s, box-shadow .25s;
    }
    .wb-theme #amenities .amn-card:hover {
      border-color: rgba(29, 65, 127, 0.42);
      box-shadow: 0 12px 28px rgba(29, 65, 127, 0.10);
    }
    .wb-theme #amenities .amn-card img {
      width: 56px;
      height: 56px;
      object-fit: contain;
      display: block;
      transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    }
    .wb-theme #amenities .amn-card:hover img { transform: translateY(-3px) scale(1.06); }
    .wb-theme #amenities .amn-card figcaption {
      color: #1d417f;
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: .03em;
      line-height: 1.4;
    }

    .wb-theme #amenities .amn-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(29, 65, 127, 0.25);
      background: #fff;
      color: #1d417f;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      z-index: 5;
      transition: background .2s, color .2s, border-color .2s;
    }
    .wb-theme #amenities .amn-arrow:hover {
      background: #1d417f;
      border-color: #1d417f;
      color: #fff;
    }
    .wb-theme #amenities .amn-prev { left: clamp(-6px, 1vw, 12px); }
    .wb-theme #amenities .amn-next { right: clamp(-6px, 1vw, 12px); }

    @media (max-width: 640px) {
      .wb-theme #amenities .amn-arrow { display: none; }
      .wb-theme #amenities .amn-slider-wrap { padding: 0 16px; }
      .wb-theme #amenities .amn-card { flex-basis: 40vw; }
    }

    /* ══════════ FOOTER RERA / DISCLAIMER — full-bleed blue band ══════════ */
    /* drop the footer's own bottom padding so the blue band ends at the page edge */
    .wb-theme body > footer,
    .wb-theme footer#contact {
      padding-bottom: 0 !important;
    }
    .wb-theme footer .footer-right {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      max-width: 100vw;
      margin: 48px 0 0;
      padding: 26px clamp(20px, 6vw, 60px);
      background: #1d417f;
      text-align: center;
    }
    .wb-theme footer .footer-right .footer-rera {
      border-top: none;
    }
    .wb-theme footer .footer-right .footer-rera span,
    .wb-theme footer .footer-right .footer-copy,
    .wb-theme footer .footer-right p {
      color: rgba(255, 255, 255, 0.85) !important;
    }
    .wb-theme footer .footer-right .footer-copy a,
    .wb-theme footer .footer-right .footer-credit a {
      color: #ffffff !important;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .wb-theme footer .footer-right .footer-credit {
      margin-top: 12px;
      font-size: 11px;
      opacity: 0.9;
    }

    /* ══════════ GALLERY — blue background, white text ══════════ */
    .wb-theme #gallery.gallery-sec { background: #1d417f; }

    /* uniform 3rem bottom spacing on these sections */
    .wb-theme #amenities,
    .wb-theme #plans.layouts-sec,
    .wb-theme #gallery.gallery-sec {
      padding-bottom: 3rem !important;
    }

    .wb-theme #gallery .gal-sec-header .sec-title,
    .wb-theme #gallery .gal-sec-header .sec-title .s-line-inner {
      color: #ffffff !important;
    }
    .wb-theme #gallery .gal-sec-header .sec-title::after {
      background: #ffffff !important;
      opacity: 0.6 !important;
    }

    /* ══════════ LOCATION — map + content split (white) ══════════ */
    .wb-theme #location.loc-sec {
      background: #ffffff;
      padding: clamp(52px, 8vw, 0px) clamp(12px, 2vw, 30px);
    }
    .wb-theme #location .loc-title-standalone {
      text-align: center;
      margin: 0 auto clamp(24px, 4vw, 40px);
    }
    .wb-theme #location .loc-wrap {
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: stretch;
    }
    .wb-theme #location .loc-map {
      position: relative;
      min-height: 400px;
      border: 1px solid rgba(29, 65, 127, 0.16);
      box-shadow: 0 18px 44px rgba(29, 65, 127, 0.10);
      overflow: hidden;
    }
    .wb-theme #location .loc-map iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    .wb-theme #location .loc-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
    .wb-theme #location .loc-body .sec-title { margin-bottom: 0 !important; }
    .wb-theme #location .sec-title,
    .wb-theme #location .sec-title .s-line-inner { color: #1d417f !important; }
    .wb-theme #location .sec-title::after { background: #1d417f !important; opacity: 1 !important; }

    .wb-theme #location .loc-lead {
      margin: 10px auto 0;
      max-width: 460px;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(16, 35, 63, 0.62);
    }

    /* ── accordion ── */
    .wb-theme #location .loc-acc {
      margin: 28px 0 0;
      text-align: left;
    }
    .wb-theme #location .loc-acc-item {
      border-bottom: 1px solid rgba(29, 65, 127, 0.14);
    }
    .wb-theme #location .loc-acc-item:first-child {
      border-top: 1px solid rgba(29, 65, 127, 0.14);
    }
    .wb-theme #location .loc-acc-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 17px 2px;
      background: none;
      border: 0;
      cursor: pointer;
      font-family: var(--serif);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: #1d417f;
      text-align: left;
    }
    .wb-theme #location .loc-acc-ic {
      flex: none;
      width: 18px;
      height: 18px;
      fill: none;
      stroke: #1d417f;
      stroke-width: 1.8;
      transition: transform 0.3s ease;
    }
    .wb-theme #location .loc-acc-item.open .loc-acc-ic { transform: rotate(180deg); }
    .wb-theme #location .loc-acc-a {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s ease;
    }
    .wb-theme #location .loc-acc-a p {
      margin: 0 0 18px;
      font-family: var(--sans);
      font-size: 12.5px;
      font-weight: 300;
      line-height: 1.65;
      color: rgba(16, 35, 63, 0.66);
    }

    @media (max-width: 860px) {
      .wb-theme #location .loc-wrap { grid-template-columns: 1fr; }
      .wb-theme #location .loc-map { min-height: 300px; order: 2; }
      .wb-theme #location .loc-body { order: 1; }
      .wb-theme #location .loc-acc { max-width: 460px; margin-left: auto; margin-right: auto; }
    }

    /* ── Gallery section ── */
    .wb-theme #gallery .igal-tab { color: rgba(255, 255, 255, 0.55) !important; }
    .wb-theme #gallery .igal-tab:hover { color: rgba(255, 255, 255, 0.85) !important; }
    .wb-theme #gallery .igal-tab--active {
      color: #ffffff !important;
      border-bottom-color: #ffffff !important;
    }
    .wb-theme #gallery .igal-arrow { color: #ffffff !important; }
    .wb-theme #gallery .igal-arrow svg { stroke: #ffffff !important; }
    .wb-theme #gallery .igal-dot { background: rgba(255, 255, 255, 0.28) !important; }
    .wb-theme #gallery .igal-dot.active { background: #ffffff !important; }

    /* "Request Full Gallery" button → white on the blue band */
    .wb-theme #gallery .faq-more-btn,
    .wb-theme #gallery .faq-more-btn.lifestyle {
      background: #ffffff !important;
      border: 1px solid #ffffff !important;
      color: #1d417f !important;
    }
    .wb-theme #gallery .faq-more-btn:hover,
    .wb-theme #gallery .faq-more-btn.lifestyle:hover {
      background: rgba(255, 255, 255, 0.85) !important;
      border-color: rgba(255, 255, 255, 0.85) !important;
      color: #1d417f !important;
    }
 
    /* ══════════ HERO — full-width banner (Bootstrap carousel markup, no Bootstrap CSS) ══════════ */
    .wb-theme #hero.hero {
      height: auto !important;
      min-height: 0 !important;
      display: block !important;
      overflow: hidden;
      background: transparent;
    }
    .wb-theme #hero .container-fluid,
    .wb-theme #hero .carousel,
    .wb-theme #hero .carousel.slide,
    .wb-theme #hero .carousel-inner,
    .wb-theme #hero .carousel-item,
    .wb-theme #hero picture {
      display: block;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
    }
    .wb-theme #hero .carousel-item img,
    .wb-theme #hero picture img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* ══════════ NAV — pipe separators between menu items ══════════ */
    .wb-theme .tb-nav a:not(:last-child)::after {
      content: "|";
      display: inline-block;
      margin-left: 22px;
      color: rgb(29 65 127);
      font-weight: 300;
      pointer-events: none;
    }

    /* Amenities intro line — brand blue */
    .wb-theme #amenities .ami-sub,
    .wb-theme #amenities .ami-sub .s-line-inner {
      color: #1d417f !important;
    }

    /* ══════════ MOBILE STICKY CTA BAR ══════════ */
    .msticky { display: none; }

    @media (max-width: 768px) {
        #highlights{
            margin-top: 5rem;
        }
      .msticky {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        background: #ffffff;
        border-top: 1px solid rgba(29, 65, 127, 0.16);
        box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.10);
      }
      .msticky-btn {
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 8px;
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        
        text-decoration: none;
        border: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .msticky-btn svg { width: 17px; height: 17px; flex: none; }
      .msticky-call { background: #ffffff; color: #1d417f; }
      .msticky-enq { background: #1d417f; color: #ffffff; }

      /* keep the side tab + WhatsApp bubble clear of the bar */
      .enquire-fab { display: none !important; }
      a.whatsapp-icon { bottom: 52px !important; }

      /* stop the bar covering the last strip of the footer */
      body { padding-bottom: 52px; }
    }

    @media (max-width: 768px) {
      body.menu-open .msticky { display: none; }
    }

    #nl-badge-frame{
        display: none !important;   
    }
    /* ══════════ ACCORDIONS — blue question bar, white answer w/ top rule ══════════ */
    /* FAQ accordion */
    /* the JS line-splitter wraps each .faq-item in clipping spans that were
       reserving blank vertical space for the hidden/collapsed items — neutralise
       the wrappers so the list only takes the height of what's visible */
    .wb-theme .faq-list .s-line { overflow: visible !important; padding-bottom: 0 !important; }
    .wb-theme .faq-list .s-line-inner { transform: none !important; opacity: 1 !important; }
    .wb-theme .faq-item:not(.open) .faq-a { max-height: 0 !important; }
    .wb-theme .faq-wrap { margin-top: 24px !important; }
    .wb-theme .faq-more-wrap { margin-top: 14px !important; }

    .wb-theme .faq-sec .faq-item,
    .wb-theme .faq-sec .faq-item:first-child {
      border: 0 !important;
      margin-bottom: 8px;
    }
    .wb-theme .faq-sec .faq-q {
      background: #1d417f !important;
      padding: 16px 22px !important;
    }
    .wb-theme .faq-sec .faq-q-txt { color: #ffffff !important; }
    .wb-theme .faq-sec .faq-icon { stroke: #ffffff !important; }
    .wb-theme .faq-sec .faq-a-inner {
      background: #ffffff;
      border-top: 1px solid rgba(29, 65, 127, 0.22);
      margin: 0 !important;
      padding: 20px 22px !important;
      font-size: 15px !important;
      line-height: 1.75 !important;
      color: #000 !important;
    }

    /* Location accordion */
    .wb-theme #location .loc-acc-item,
    .wb-theme #location .loc-acc-item:first-child {
      border: 0 !important;
      margin-bottom: 8px;
    }
    .wb-theme #location .loc-acc-q {
      background: #1d417f !important;
      color: #ffffff !important;
      padding: 15px 18px !important;
    }
    .wb-theme #location .loc-acc-ic { stroke: #ffffff !important; }
    .wb-theme #location .loc-acc-a ul {
      list-style: none;
      margin: 0;
      padding: 14px 18px;
      background: #ffffff;
      border-top: 1px solid rgba(29, 65, 127, 0.22);
    }
    .wb-theme #location .loc-acc-a li {
      display: grid;
      grid-template-columns: 1fr 92px;
      align-items: baseline;
      gap: 12px;
      padding: 8px 0;
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 400;
      line-height: 1.5;
      color: #000;
    }
    .wb-theme #location .loc-acc-a li span:first-child { min-width: 0; }
    .wb-theme #location .loc-acc-a li span:last-child {
      text-align: left;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      white-space: nowrap;
    }

    /* ══════════ LAYOUT & DESIGN — plans left, pricing table right ══════════ */
    .wb-theme #plans .layouts-body {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(28px, 4vw, 56px);
      align-items: center;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 60px);
    }
    .wb-theme #plans.show-pricing .layouts-body {
      grid-template-columns: 1.15fr 1fr;
    }
    /* Pricing table appears only on the Unit plan tab */
    .wb-theme #plans .lp-right { display: none; }
    .wb-theme #plans.show-pricing .lp-right { display: block; }
    .wb-theme #plans .lp-left { min-width: 0; }
    .wb-theme #plans .lp-left .layouts-sidebar {
      padding: 0 !important;
      margin-bottom: 22px;
      width: 100% !important;
    }
    .wb-theme #plans .lp-left .layouts-main {
      padding: 0 !important;
      width: 100%;
    }
    .wb-theme #plans .lp-right { min-width: 0; }

    .wb-theme #plans .lp-pricing {
      border: 1px solid rgba(29, 65, 127, 0.20);
      background: #ffffff;
    }
    .wb-theme #plans .lp-pricing-head {
      background: #1d417f;
      color: #ffffff;
      font-family: var(--sans);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-align: center;
      padding: 15px 16px;
    }
    .wb-theme #plans .lp-pricing-scroll { overflow-x: auto; }
    .wb-theme #plans .lp-pricing-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--sans);
    }
    .pt-0{
      padding-top: 0;
    }
    .wb-theme #plans .lp-pricing-table th {
      padding: 14px 10px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.09em;
      color: #1d417f;
      text-align: center;
      border-bottom: 1px solid rgba(29, 65, 127, 0.20);
      white-space: nowrap;
    }
    .wb-theme #plans .lp-pricing-table td {
      padding: 14px 10px;
      font-size: 13px;
      font-weight: 400;
      color: rgba(16, 35, 63, 0.82);
      text-align: center;
      border-bottom: 1px solid rgba(29, 65, 127, 0.12);
      white-space: nowrap;
    }
    .wb-theme #plans .lp-pricing-table tbody tr:last-child td { border-bottom: 0; }
    .wb-theme #plans .lp-pricing-table td:first-child { color: #1d417f; font-weight: 500; }
    .wb-theme #plans .lp-unlock {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #1d417f;
      color: #ffffff;
      border: 0;
      cursor: pointer;
      font-family: var(--sans);
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 9px 13px;
      transition: background 0.25s ease;
    }
    .wb-theme #plans .lp-unlock svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: #ffffff;
      stroke-width: 2;
    }
    .wb-theme #plans .lp-unlock:hover { background: #2e6bb8; }

    @media (max-width: 860px) {
      .wb-theme #plans .layouts-body { grid-template-columns: 1fr; }
      .wb-theme #plans .lp-right { margin-top: 8px; }
    }

    .wb-theme #plans .lp-left .layouts-tabs { flex-wrap: wrap !important; }
    .wb-theme #plans .lp-left .layout-tab { padding: 13px 18px; }
    .wb-theme #plans .lp-left .layout-plan-wrap { min-height: clamp(220px, 30vw, 340px); }