*,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 16px;
        scroll-behavior: smooth;
      }
      body {
        background: #f5f3ef;
        color: #1a1a1a;
        font-family: "DM Sans", sans-serif;
        font-weight: 300;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }
      :root {
        --gold: #b89b72;
        --beige: #ddd2c3;
        --bg: #f5f3ef;
        --white: #fff;
        --card: #fafaf8;
        --text: #1a1a1a;
        --muted: #787878;
        --border: rgba(0, 0, 0, 0.07);
        --E: cubic-bezier(0.22, 1, 0.36, 1);
      }

      ::selection {
        background-color: var(--gold); 
        color: var(--bg); 
      }

      /* PROGRESS */
      #PROG {
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        background: var(--gold);
        z-index: 10000;
        width: 0;
        pointer-events: none;
        transition: width 0.05s linear;
      }

      /* NAV */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1050;
        padding: 28px 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition:
          padding 0.6s var(--E),
          background 0.6s,
          border-color 0.6s;
        border-bottom: 1px solid transparent;
      }
      nav.s {
        padding: 14px 64px;
        background: rgba(245, 243, 239, 0.88);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-color: var(--border);
      }
      .nLogo {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 19px;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--text);
        text-decoration: none;
      }
      .nLinks {
        display: flex;
        align-items: center;
        gap: 38px;
      }
      .nLinks a {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 400;
        color: var(--text);
        text-decoration: none;
        position: relative;
        padding-bottom: 3px;
      }
      .nLinks a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--gold);
        transition: width 0.4s var(--E);
      }
      .nLinks a:hover::after {
        width: 100%;
      }
      .nCTA {
        background: var(--text) !important;
        color: #fff !important;
        padding: 11px 26px;
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: 0.14em;
        font-weight: 500;
        border: none;
        transition: background 0.4s !important;
      }
      .nCTA::after {
        display: none !important;
      }
      .nCTA:hover {
        background: var(--gold) !important;
      }

      /* ============ HERO VIDEO ============ */
      .heroVid {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        background: #0d0d0d;
      }
      #heroVideo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 65%;
      }
      .vidOverlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.18) 0%,
          rgba(0, 0, 0, 0.45) 100%
        );
      }
      .heroVidContent {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 64px 72px;
        z-index: 2;
      }
      .hvEye {
        font-size: 10px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 18px;
        opacity: 0;
        transform: translateY(16px);
      }
      .hvH {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: clamp(52px, 5.5vw, 82px);
        font-weight: 200;
        line-height: 1.06;
        letter-spacing: -0.02em;
        color: #fff;
        margin-bottom: 20px;
        overflow: hidden;
      }
      .hvH .ln {
        display: block;
        overflow: hidden;
      }
      .hvH .ln span {
        display: block;
        transform: translateY(110%);
      }
      .hvSub {
        font-size: 15px;
        line-height: 1.85;
        color: rgba(255, 255, 255, 0.65);
        max-width: 480px;
        margin-bottom: 40px;
        font-weight: 300;
        opacity: 0;
        transform: translateY(16px);
      }
      .hvActs {
        display: flex;
        gap: 18px;
        align-items: center;
        opacity: 0;
        transform: translateY(16px);
      }
      .bWh {
        background: rgba(255, 255, 255, 0.95);
        color: var(--text);
        padding: 14px 32px;
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 500;
        border: none;
        text-decoration: none;
        display: inline-block;
        transition:
          background 0.4s,
          transform 0.4s var(--E);
      }
      .bWh:hover {
        background: #fff;
        transform: translateY(-2px);
      }
      .bOutWh {
        color: rgba(255, 255, 255, 0.8);
        font-size: 11px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 400;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        padding-bottom: 4px;
        transition:
          color 0.4s,
          gap 0.4s,
          border-color 0.4s;
      }
      .bOutWh:hover {
        color: #fff;
        gap: 14px;
        border-color: rgba(255, 255, 255, 0.7);
      }
      .vidProgress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: rgba(255, 255, 255, 0.15);
        z-index: 3;
      }
      .vidProgressBar {
        height: 100%;
        background: var(--gold);
        width: 0;
        transition: width 0.1s linear;
      }
      .scrollHint {
        position: absolute;
        bottom: 28px;
        right: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        z-index: 3;
        opacity: 0;
        transition: opacity 0.6s;
      }
      .scrollHint span {
        font-size: 9px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        writing-mode: vertical-rl;
      }
      .scrollArrow {
        width: 1px;
        height: 48px;
        background: rgba(255, 255, 255, 0.3);
        position: relative;
        overflow: hidden;
      }
      .scrollArrow::after {
        content: "";
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gold);
        animation: sa 1.6s ease infinite;
      }
      @keyframes sa {
        0% {
          top: -100%;
        }
        100% {
          top: 100%;
        }
      }

      /* STATS */
      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: var(--white);
        border-bottom: 1px solid var(--border);
      }
      .stI {
        text-align: center;
        padding: 40px 20px;
        position: relative;
      }
      .stI + .stI::before {
        content: "";
        position: absolute;
        left: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background: var(--border);
      }
      .stN {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 54px;
        font-weight: 200;
        color: var(--text);
        line-height: 1;
        margin-bottom: 8px;
        letter-spacing: -0.02em;
      }
      .stN b {
        color: var(--gold);
        font-weight: 200;
      }
      .stL {
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 400;
      }

      /* GENERAL */
      section {
        padding: 130px 64px;
      }
      .sEye {
        font-size: 10px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 18px;
      }
      .sH {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: clamp(38px, 3.8vw, 56px);
        font-weight: 200;
        line-height: 1.14;
        letter-spacing: -0.025em;
        color: var(--text);
      }
      .rv {
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity 0.9s var(--E),
          transform 0.9s var(--E);
      }
      .rv.on {
        opacity: 1;
        transform: translateY(0);
      }
      .d1 {
        transition-delay: 0.1s;
      }
      .d2 {
        transition-delay: 0.2s;
      }
      .d3 {
        transition-delay: 0.3s;
      }
      .d4 {
        transition-delay: 0.4s;
      }

      /* PROPERTIES */
      .propH {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 80px;
      }
      .propGrid {
        display: flex;
        flex-direction: column;
        gap: 100px;
      }
      .pC {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
      }
      .pC.rev {
        direction: rtl;
      }
      .pC.rev > * {
        direction: ltr;
      }
      .pIW {
        border-radius: 20px;
        overflow: hidden;
        aspect-ratio: 16/11;
        position: relative;
      }
      .pIW img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.07);
        transition: transform 0.9s var(--E);
      }
      .pC:hover .pIW img {
        transform: scale(1);
      }
      .pOv {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 55%,
          rgba(0, 0, 0, 0.3)
        );
        opacity: 0;
        transition: opacity 0.5s;
      }
      .pC:hover .pOv {
        opacity: 1;
      }
      .pTag {
        display: inline-block;
        background: var(--card);
        border: 1px solid var(--border);
        padding: 5px 14px;
        border-radius: 999px;
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 18px;
        font-weight: 400;
      }
      .pN {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 36px;
        font-weight: 200;
        line-height: 1.15;
        margin-bottom: 10px;
        letter-spacing: -0.02em;
      }
      .pLoc {
        font-size: 11px;
        color: var(--gold);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 500;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .pD {
        font-size: 14px;
        line-height: 1.85;
        color: var(--muted);
        margin-bottom: 26px;
        font-weight: 300;
        max-width: 400px;
      }
      .pPr {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 28px;
        font-weight: 300;
        margin-bottom: 26px;
        letter-spacing: -0.02em;
      }
      .pFt {
        display: flex;
        gap: 20px;
        margin-bottom: 28px;
        flex-wrap: wrap;
      }
      .pFt span {
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.06em;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .pFt span::before {
        content: "";
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--gold);
        flex-shrink: 0;
      }
      .pCTA {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--text);
        text-decoration: none;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid rgba(26, 26, 26, 0.3);
        padding-bottom: 5px;
        transition:
          color 0.4s,
          border-color 0.4s,
          gap 0.4s;
      }
      .pCTA:hover {
        color: var(--gold);
        border-color: var(--gold);
        gap: 18px;
      }

      /* ABOUT */
      .aboutS {
        background: var(--white);
        overflow: hidden;
      }
      .aboutIn {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
      }
      .aboutImgs {
        position: relative;
        height: 580px;
      }
      .aIM {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 78%;
        border-radius: 20px;
        overflow: hidden;
      }
      .aIM img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 8s ease;
      }
      .aIA {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 50%;
        border-radius: 20px;
        overflow: hidden;
        border: 5px solid var(--white);
      }
      .aIA img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .aFloat {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.7);
        padding: 22px 30px;
        border-radius: 16px;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
      }
      .aFloat h3 {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 34px;
        font-weight: 200;
        color: var(--text);
        line-height: 1;
        letter-spacing: -0.02em;
      }
      .aFloat h3 b {
        color: var(--gold);
        font-weight: 200;
      }
      .aFloat p {
        font-size: 10px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 5px;
      }
      .aSig {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 18px;
        font-weight: 300;
        color: var(--text);
        margin-top: 32px;
        letter-spacing: 0.02em;
      }

      /* ============ PINNED HORIZONTAL GALLERY ============ */
      .galOuter {
        position: relative;
        background: var(--text);
      }
      .galSticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
      }
      .galTrackWrap {
        display: flex;
        align-items: stretch;
        will-change: transform;
      }
      .galPanel {
        flex-shrink: 0;
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
      }
      .galPanel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85;
        transition: opacity 0.6s;
      }
      .galPanel:hover img {
        opacity: 0.95;
      }
      .galPanelInfo {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 52px 72px;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.65) 0%,
          transparent 100%
        );
      }
      .galPanelNum {
        font-size: 10px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 10px;
      }
      .galPanelName {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 36px;
        font-weight: 200;
        color: #fff;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
      }
      .galPanelLoc {
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        font-weight: 400;
      }
      .galHeaderFixed {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 120px 72px 0;
        z-index: 10;
        pointer-events: none;
      }
      .galHeaderFixed .sEye {
        color: rgba(184, 155, 114, 0.8);
      }
      .galHeaderFixed .sH {
        color: #fff;
        font-size: clamp(44px, 4.5vw, 64px);
      }
      .galProgress {
        position: absolute;
        bottom: 32px;
        right: 72px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 10;
      }
      .galDots {
        display: flex;
        gap: 8px;
      }
      .galDot {
        width: 24px;
        height: 2px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 1px;
        transition:
          background 0.4s,
          width 0.4s;
      }
      .galDot.active {
        background: var(--gold);
        width: 40px;
      }
      .galCounter {
        font-size: 11px;
        letter-spacing: 0.14em;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 400;
      }
      .galDragHint {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        pointer-events: none;
        opacity: 0;
        animation: fadeHint 2s 1s forwards;
      }
      @keyframes fadeHint {
        0% {
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      .galDragHint span {
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 400;
      }
      .galScrollIndicator {
        position: absolute;
        left: 72px;
        bottom: 32px;
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 400;
        z-index: 10;
      }

      /* ============ AMENITIES — REDESIGNED ============ */
      .ameS {
        background: var(--bg);
        overflow: hidden;
      }
      .ameHeader {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: end;
        margin-bottom: 80px;
      }
      .ameGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--border);
      }
      .amC {
        background: var(--white);
        padding: 48px 40px;
        position: relative;
        overflow: hidden;
        min-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .amCover {
        position: absolute;
        inset: 0;
        z-index: 1;
        transform: translateY(100%);
        transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .amCover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .amCoverOverlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.72) 0%,
          rgba(0, 0, 0, 0.2) 60%,
          transparent 100%
        );
      }
      .amC:hover .amCover {
        transform: translateY(0);
      }
      .amContent {
        position: relative;
        z-index: 2;
        transition: color 0.4s;
      }
      .amC:hover .amContent .amN {
        color: #fff;
      }
      .amC:hover .amContent .amD {
        color: rgba(255, 255, 255, 0.65);
      }
      .amC:hover .amContent .amIco {
        color: rgba(255, 255, 255, 0.9);
      }
      .amC:hover .amContent .amNum {
        color: rgba(184, 155, 114, 0.7);
      }
      .amC:hover .amContent .amArrow {
        border-color: rgba(255, 255, 255, 0.25);
        color: #fff;
        transform: rotate(45deg);
      }
      .amNum {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: var(--beige);
        letter-spacing: 0.14em;
        margin-bottom: 32px;
        transition: color 0.4s;
        display: block;
      }
      .amIco {
        color: var(--gold);
        margin-bottom: 16px;
        display: block;
        transition: color 0.5s;
      }
      .amN {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 20px;
        font-weight: 300;
        margin-bottom: 8px;
        letter-spacing: -0.01em;
        color: var(--text);
        transition: color 0.5s;
      }
      .amD {
        font-size: 13px;
        line-height: 1.75;
        color: var(--muted);
        font-weight: 300;
        transition: color 0.5s;
      }
      .amArrow {
        position: absolute;
        top: 36px;
        right: 36px;
        width: 36px;
        height: 36px;
        border: 1px solid var(--border);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        transition: all 0.5s var(--E);
        z-index: 2;
      }
      .amC:hover .amArrow {
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
        transform: rotate(45deg);
      }

      /* ============ TESTIMONIALS — REDESIGNED ============ */ /* ============ TESTIMONIALS — REDESIGNED ============ */
      .testiS {
        background: var(--text);
        padding: 130px 0;
      }
      .testiHeader {
        padding: 0 64px;
        margin-bottom: 72px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      .testiHeader .sH {
        color: #fff;
      }
      .testiHeader .sEye {
        color: rgba(184, 155, 114, 0.8);
      }
      .testiScroll {
        display: flex;
        gap: 2px;
        overflow: hidden;
      }
      .testiTrack {
        display: flex;
        gap: 2px;
        transition: transform 0.8s var(--E);
      }
      .tC {
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        padding: 52px 48px;
        position: relative;
        overflow: hidden;
        width: 520px;
        transition: background 0.4s;
      }
      .tC:hover {
        background: rgba(255, 255, 255, 0.07);
      }
      .tQmark {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 96px;
        font-weight: 200;
        color: rgba(184, 155, 114, 0.15);
        line-height: 1;
        position: absolute;
        top: 24px;
        right: 36px;
        letter-spacing: -0.04em;
      }
      .tSt {
        color: var(--gold);
        font-size: 11px;
        letter-spacing: 4px;
        margin-bottom: 28px;
      }
      .tTx {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 17px;
        font-weight: 200;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 36px;
        letter-spacing: -0.01em;
      }
      .tDivider {
        width: 32px;
        height: 1px;
        background: var(--gold);
        margin-bottom: 28px;
      }
      .tAu {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .tAv {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .tAv img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .tNm {
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        letter-spacing: 0.02em;
      }
      .tRl {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.35);
        margin-top: 3px;
        letter-spacing: 0.06em;
      }
      .testiNav {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .testiNavBtn {
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        background: none;
        color: rgba(255, 255, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s;
      }
      .testiNavBtn:hover {
        border-color: var(--gold);
        color: var(--gold);
      }
      .testiCount {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 0.1em;
        font-weight: 400;
        min-width: 36px;
        text-align: center;
      }

      /* PROCESS PINS */
      .pinS {
        position: relative;
      }
      .pinWrap {
        display: flex;
      }
      .pinLeft {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 50%;
        flex-shrink: 0;
        overflow: hidden;
      }
      .pinLeft img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: opacity 0.5s;
      }
      .pinRight {
        width: 50%;
        padding: 0 64px;
      }
      .pinStep {
        padding: 100px 0;
        border-bottom: 1px solid var(--border);
      }
      .pinStep:last-child {
        border: none;
      }
      .pinNum {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 72px;
        font-weight: 200;
        color: rgba(184, 155, 114, 0.15);
        line-height: 1;
        margin-bottom: 14px;
        letter-spacing: -0.04em;
      }
      .pinH {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 28px;
        font-weight: 300;
        margin-bottom: 14px;
        line-height: 1.2;
        letter-spacing: -0.02em;
      }
      .pinP {
        font-size: 14px;
        line-height: 1.9;
        color: var(--muted);
        font-weight: 300;
      }

      /* CTA */
      .ctaS {
        background: var(--text);
        padding: 160px 64px;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .ctaBg {
        position: absolute;
        inset: 0;
      }
      .ctaBg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.18;
      }
      .ctaIn {
        position: relative;
        z-index: 2;
      }
      .ctaEye {
        font-size: 10px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 24px;
      }
      .ctaH {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: clamp(52px, 7vw, 92px);
        font-weight: 200;
        line-height: 1.04;
        color: #fff;
        margin-bottom: 36px;
        letter-spacing: -0.03em;
      }
      .ctaSub {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.45);
        margin-bottom: 52px;
        font-weight: 300;
        line-height: 1.8;
      }
      .ctaActs {
        display: flex;
        justify-content: center;
        gap: 16px;
      }
      .bGold {
        background: var(--gold);
        color: #fff;
        padding: 15px 40px;
        border-radius: 999px;
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 500;
        border: none;
        text-decoration: none;
        display: inline-block;
        transition:
          background 0.4s,
          transform 0.4s var(--E);
      }
      .bGold:hover {
        background: #a08055;
        transform: translateY(-2px);
      }
      .bGh {
        color: rgba(255, 255, 255, 0.6);
        padding: 15px 24px;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-weight: 400;
        text-decoration: none;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 999px;
        transition: all 0.4s;
      }
      .bGh:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.4);
      }

      /* FOOTER — LUXURY REDESIGN */
      footer {
        background: var(--text);
        color: #fff;
        overflow: hidden;
      }
      .ftStatement {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
        padding: 100px 64px 80px;
      }
      .ftStatEye {
        font-size: 10px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 500;
        margin-bottom: 20px;
      }
      .ftStatH {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: clamp(40px, 4vw, 64px);
        font-weight: 200;
        line-height: 1.1;
        color: #fff;
        letter-spacing: -0.025em;
      }
      .ftStatImgs {
        display: flex;
        gap: 12px;
        margin-bottom: 28px;
      }
      .ftSImg {
        flex: 1;
        height: 140px;
        border-radius: 12px;
        overflow: hidden;
      }
      .ftSImgShift {
        margin-top: 24px;
      }
      .ftSImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.7;
        transition: opacity 0.4s;
      }
      .ftSImg:hover img {
        opacity: 1;
      }
      .ftStatSub {
        font-size: 14px;
        line-height: 1.85;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 300;
        max-width: 440px;
        margin-bottom: 28px;
      }
      .ftStatCTA {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 500;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        padding-bottom: 5px;
        transition:
          gap 0.4s,
          border-color 0.4s,
          color 0.4s;
      }
      .ftStatCTA:hover {
        color: var(--gold);
        border-color: var(--gold);
        gap: 16px;
      }
      .ftDivider {
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 0 64px;
      }
      .ftMain {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 80px;
        padding: 72px 64px;
      }
      .ftBrand .ftLogo {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 8px;
      }
      .ftBrand .ftTag {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
        letter-spacing: 0.08em;
        font-weight: 300;
        line-height: 1.8;
        margin-bottom: 28px;
      }
      .ftContact {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 28px;
      }
      .ftContactLine {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        font-weight: 300;
        letter-spacing: 0.02em;
        transition: color 0.3s;
      }
      .ftContactLine:hover {
        color: var(--gold);
      }
      .ftSoc {
        display: flex;
        gap: 10px;
      }
      .ftSocI {
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.4);
        transition: all 0.4s;
        text-decoration: none;
      }
      .ftSocI:hover {
        border-color: var(--gold);
        color: var(--gold);
      }
      .ftLinks {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
      }
      .ftColH {
        font-size: 10px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 20px;
      }
      .ftCol ul {
        list-style: none;
      }
      .ftCol li {
        margin-bottom: 10px;
      }
      .ftCol li a {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.4);
        text-decoration: none;
        transition: color 0.3s;
        font-weight: 300;
      }
      .ftCol li a:hover {
        color: #fff;
      }
      .ftNlDesc {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.35);
        font-weight: 300;
        line-height: 1.7;
        margin-bottom: 14px;
      }
      .nlF {
        display: flex;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.04);
      }
      .nlF input {
        flex: 1;
        padding: 12px 18px;
        background: none;
        border: none;
        outline: none;
        font-size: 12px;
        font-family: "DM Sans", sans-serif;
        color: #fff;
      }
      .nlF input::placeholder {
        color: rgba(255, 255, 255, 0.25);
      }
      .nlF button {
        background: var(--gold);
        color: #fff;
        border: none;
        padding: 12px 20px;
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        transition: background 0.3s;
        font-family: "DM Sans", sans-serif;
        font-weight: 500;
        white-space: nowrap;
      }
      .nlF button:hover {
        background: #a08055;
      }
      .ftAwards {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 18px;
      }
      .ftAward {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.2);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding-left: 10px;
        border-left: 1px solid rgba(184, 155, 114, 0.3);
      }
      .ftBot {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding: 24px 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .ftCp {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.25);
        font-weight: 300;
      }
      .ftLg {
        display: flex;
        gap: 24px;
      }
      .ftLg a {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.25);
        text-decoration: none;
        font-weight: 300;
        transition: color 0.3s;
      }
      .ftLg a:hover {
        color: rgba(255, 255, 255, 0.6);
      }

      /* ============ HAMBURGER ============ */
      .nHam {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        z-index: 1100;
        position: relative;
      }
      .nHam span {
        display: block;
        width: 24px;
        height: 1.5px;
        background: var(--text);
        border-radius: 2px;
        transition:
          transform 0.4s var(--E),
          opacity 0.3s,
          width 0.4s var(--E);
      }
      .nHam.open span {
        background: #1a1a1a;
      }
      .nHam.open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
      }
      .nHam.open span:nth-child(2) {
        opacity: 0;
        width: 0;
      }
      .nHam.open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
      }

      /* ============ MOBILE NAV OVERLAY ============ */
      .mNav {
        position: fixed;
        inset: 0;
        background: var(--bg);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-12px);
        transition:
          opacity 0.45s var(--E),
          transform 0.45s var(--E);
      }
      .mNav.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
      }
      .mNavInner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
      }
      .mNavLink {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: clamp(28px, 8vw, 48px);
        font-weight: 200;
        color: var(--text);
        text-decoration: none;
        letter-spacing: -0.02em;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
        width: 80%;
        text-align: center;
        transition: color 0.3s;
      }
      .mNavLink:hover {
        color: var(--gold);
      }
      .mNavCTA {
        margin-top: 16px;
        background: var(--text);
        color: #fff !important;
        border-radius: 999px;
        padding: 14px 40px !important;
        border: none;
        font-size: 12px !important;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 500;
        font-family: "DM Sans", sans-serif;
        width: auto !important;
      }
      .mNavFoot {
        position: absolute;
        bottom: 32px;
        font-size: 11px;
        color: var(--muted);
        letter-spacing: 0.08em;
        text-align: center;
      }

      /* ============ RESPONSIVE ============ */

      /* --- Large desktop: keep video fully visible --- */
      @media (min-width: 1025px) {
        #heroVideo {
          object-position: center 60%;
        }
      }

      /* --- Tablet: 1024px --- */
      @media (max-width: 1024px) {
        nav {
          padding: 22px 40px;
        }
        nav.s {
          padding: 14px 40px;
        }
        section {
          padding: 100px 40px;
        }
        .heroVidContent {
          padding: 48px 40px;
        }
        .scrollHint {
          right: 40px;
        }
        .stats {
          grid-template-columns: repeat(2, 1fr);
        }
        .stI:nth-child(3)::before {
          display: none;
        }
        .stI:nth-child(3) {
          border-top: 1px solid var(--border);
        }
        .stI:nth-child(4) {
          border-top: 1px solid var(--border);
        }
        .propH {
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
          margin-bottom: 56px;
        }
        .pC {
          gap: 48px;
        }
        .pN {
          font-size: 28px;
        }
        .aboutIn {
          gap: 48px;
        }
        .aboutImgs {
          height: 460px;
        }
        .ameHeader {
          gap: 40px;
        }
        .ameGrid {
          grid-template-columns: repeat(2, 1fr);
        }
        .testiHeader {
          padding: 0 40px;
        }
        .pinRight {
          padding: 0 40px;
        }
        .ftStatement {
          padding: 80px 40px 60px;
          gap: 48px;
        }
        .ftDivider {
          margin: 0 40px;
        }
        .ftMain {
          padding: 56px 40px;
          gap: 48px;
          grid-template-columns: 220px 1fr;
        }
        .ftLinks {
          grid-template-columns: repeat(2, 1fr);
          gap: 32px;
        }
        .ftBot {
          padding: 20px 40px;
        }
        .galPanelInfo {
          padding: 40px 40px;
        }
        .galHeaderFixed {
          padding: 80px 40px 0;
        }
        .galScrollIndicator {
          left: 40px;
        }
        .galProgress {
          right: 40px;
        }
        .ctaS {
          padding: 120px 40px;
        }
      }

      /* --- Mobile: 768px --- */
      @media (max-width: 768px) {
        /* Nav */
        nav {
          padding: 18px 24px;
        }
        nav.s {
          padding: 14px 24px;
        }
        .nLinks {
          display: none;
        }
        .nHam {
          display: flex;
        }

        /* Hero */
        .heroVid {
          height: 70vh;
          height: 70dvh;
        }
        #heroVideo {
          object-position: center 72%;
        }
        .heroVidContent {
          padding: 32px 24px;
        }
        .hvH {
          font-size: clamp(36px, 9vw, 52px);
        }
        .hvSub {
          font-size: 14px;
          max-width: 100%;
        }
        .hvActs {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }
        .scrollHint {
          display: none;
        }

        /* Stats — visible right below hero */
        .stats {
          grid-template-columns: repeat(2, 1fr);
        }
        .stN {
          font-size: 38px;
        }
        .stI {
          padding: 24px 12px;
        }
        .stI + .stI::before {
          top: 20%;
          height: 60%;
        }

        /* Properties */
        .propH {
          margin-bottom: 40px;
        }
        .propGrid {
          gap: 64px;
        }
        .pC,
        .pC.rev {
          grid-template-columns: 1fr;
          direction: ltr;
          gap: 24px;
        }
        .pC.rev > * {
          direction: ltr;
        }
        .pIW {
          aspect-ratio: 16/10;
        }
        .pN {
          font-size: 24px;
        }
        .pD {
          max-width: 100%;
        }

        /* About */
        .aboutIn {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .aboutImgs {
          height: 320px;
        }
        .aIM {
          width: 65%;
          height: 75%;
        }
        .aIA {
          width: 48%;
          height: 48%;
        }
        .aFloat {
          padding: 14px 20px;
        }
        .aFloat h3 {
          font-size: 24px;
        }

        /* Process */
        .pinS .pinWrap {
          flex-direction: column;
        }
        .pinLeft {
          position: relative;
          height: 55vw;
          width: 100%;
          flex-shrink: 0;
        }
        .pinRight {
          width: 100%;
          padding: 0 24px;
        }
        .pinStep {
          padding: 56px 0;
        }
        .pinNum {
          font-size: 48px;
        }

        /* Gallery */
        .galHeaderFixed {
          padding: 70px 24px 0;
        }
        .galPanelInfo {
          padding: 32px 24px;
        }
        .galPanelName {
          font-size: 24px;
        }
        .galScrollIndicator {
          left: 24px;
          bottom: 20px;
        }
        .galProgress {
          right: 24px;
          bottom: 20px;
        }
        .galScrollIndicator {
          font-size: 9px;
        }

        /* Amenities */
        .ameHeader {
          grid-template-columns: 1fr;
          gap: 20px;
          margin-bottom: 40px;
        }
        .ameGrid {
          grid-template-columns: 1fr;
        }
        .amC {
          min-height: 220px;
          padding: 36px 28px;
        }

        /* Testimonials */
        .testiS {
          padding: 80px 0;
        }
        .testiHeader {
          padding: 0 24px;
          margin-bottom: 48px;
          flex-direction: column;
          align-items: flex-start;
          gap: 24px;
        }
        .tC {
          width: calc(100vw - 48px);
        }
        .tTx {
          font-size: 15px;
        }

        /* CTA */
        .ctaS {
          padding: 100px 24px;
        }
        .ctaActs {
          flex-direction: column;
          align-items: center;
          gap: 12px;
        }
        .bGold,
        .bGh {
          width: 100%;
          max-width: 280px;
          text-align: center;
        }

        /* Footer */
        .ftStatement {
          grid-template-columns: 1fr;
          padding: 64px 24px 48px;
          gap: 40px;
        }
        .ftStatImgs {
          display: none;
        }
        .ftDivider {
          margin: 0 24px;
        }
        .ftMain {
          grid-template-columns: 1fr;
          padding: 48px 24px;
          gap: 48px;
        }
        .ftLinks {
          grid-template-columns: repeat(2, 1fr);
          gap: 28px;
        }
        .ftBot {
          padding: 18px 24px;
          flex-direction: column;
          gap: 14px;
          text-align: center;
        }
        .ftLg {
          flex-wrap: wrap;
          justify-content: center;
          gap: 12px;
        }
      }

      /* --- Small Mobile: 480px --- */
      @media (max-width: 480px) {
        nav {
          padding: 16px 20px;
        }
        section {
          padding: 60px 20px;
        }
        .heroVid {
          height: 68vh;
          height: 68dvh;
        }
        #heroVideo {
          object-position: center 75%;
        }
        .heroVidContent {
          padding: 32px 20px;
        }
        .hvH {
          font-size: clamp(30px, 10vw, 44px);
        }
        .stats {
          grid-template-columns: 1fr 1fr;
        }
        .stN {
          font-size: 32px;
        }
        .stI {
          padding: 20px 10px;
        }
        .pN {
          font-size: 22px;
        }
        .pPr {
          font-size: 22px;
        }
        .aboutImgs {
          height: 260px;
        }
        .aFloat {
          padding: 10px 16px;
          white-space: normal;
          max-width: 140px;
        }
        .aFloat h3 {
          font-size: 20px;
        }
        .pinStep {
          padding: 40px 0;
        }
        .pinNum {
          font-size: 38px;
        }
        .pinH {
          font-size: 22px;
        }
        .amC {
          padding: 28px 22px;
        }
        .ctaS {
          padding: 80px 20px;
        }
        .testiHeader {
          padding: 0 20px;
        }
        .tC {
          width: calc(100vw - 40px);
        }
        .tC {
          padding: 36px 28px;
        }
        .tTx {
          font-size: 14px;
        }
        .ftStatement {
          padding: 48px 20px 40px;
        }
        .ftDivider {
          margin: 0 20px;
        }
        .ftMain {
          padding: 40px 20px;
        }
        .ftLinks {
          grid-template-columns: 1fr 1fr;
          gap: 20px;
        }
        .ftBot {
          padding: 16px 20px;
        }
      }