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

    :root {
      --gold: #C9A84C;
      --gold-light: #E8C97A;
      --gold-dim: #7A6030;
      --gold-glow: rgba(201, 168, 76, 0.2);
      --ink: #07070A;
      --ink-soft: #0E0E12;
      --ink-mid: #13131A;
      --cream: #F0EBE0;
      --cream-dim: #D8D0C0;
      --muted: #7A7468;
      --border: rgba(201, 168, 76, 0.14);
      --border-hover: rgba(201, 168, 76, 0.4);
      --serif: 'Cormorant Garamond', serif;
      --sans: 'DM Sans', sans-serif;
    }

    html {
      font-size: 16px;
      scroll-behavior: smooth
    }

    body {
      background: var(--ink);
      color: var(--cream);
      font-family: var(--sans);
      font-weight: 300;
      overflow-x: hidden;

    }

    /* ── CURSOR ── */
    #cur {
      position: fixed;
      width: 7px;
      height: 7px;
      background: var(--gold);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .25s, height .25s, opacity .25s;
      mix-blend-mode: normal
    }

    #cur-r {
      position: fixed;
      width: 34px;
      height: 34px;
      border: 1px solid rgba(201, 168, 76, .5);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: width .4s, height .4s, opacity .4s, border-color .4s
    }

    #cur-label {
      position: fixed;
      pointer-events: none;
      z-index: 9997;
      font-size: .55rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0;
      transform: translate(-50%, -50%) translateY(26px);
      transition: opacity .3s;
      white-space: nowrap
    }

    body:not(:hover) #cur {
      opacity: 0
    }

    /* ── PROGRESS ── */
    #prog {
      position: fixed;
      top: 0;
      left: 0;
      height: 1.5px;
      background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-light));
      z-index: 10000;
      width: 0;
      transition: width .08s linear;
      pointer-events: none
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 30px 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all .7s cubic-bezier(.25, .46, .45, .94)
    }

    nav.scrolled {
      background: rgba(7, 7, 10, .93);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      padding: 18px 64px;
      border-bottom: 1px solid var(--border)
    }

    .nav-logo {
      font-family: var(--serif);
      font-size: 1.7rem;
      font-weight: 300;
      letter-spacing: .22em;
      color: var(--gold);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .nav-logo span {
      color: var(--cream);
      font-weight: 200
    }

    .nav-logo-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold);
      margin: 0 6px;
      opacity: .6
    }

    .nav-links {
      display: flex;
      gap: 36px;
      align-items: center
    }

    .nav-links a {
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .55);
      text-decoration: none;
      transition: color .3s;
      position: relative;
      padding-bottom: 2px
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width .35s cubic-bezier(.25, .46, .45, .94)
    }

    .nav-links a:hover {
      color: var(--gold)
    }

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

    .nav-right {
      display: flex;
      align-items: center;
      gap: 18px
    }

    .lang-toggle {
      display: flex;
      gap: 2px;
      border: 1px solid var(--border);
      padding: 4px
    }

    .lang-btn {
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .35);
      background: none;
      border: none;
      ;
      transition: all .3s;
      font-family: var(--sans);
      padding: 5px 10px
    }

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

    .nav-cta {
      font-size: .68rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      background: transparent;
      color: var(--gold);
      padding: 11px 26px;
      border: 1px solid rgba(201, 168, 76, .5);
      ;
      transition: all .35s;
      font-family: var(--sans);
      font-weight: 400;
      text-decoration: none
    }

    .nav-cta:hover {
      background: var(--gold);
      color: var(--ink)
    }

    /* ── HERO ── */
    #hero {
      position: relative;
      height: 100vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden
    }

    #hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 0
    }

    .hero-photo {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center center
    }

    .hero-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to right, rgba(7, 7, 10, .92) 0%, rgba(7, 7, 10, .65) 45%, rgba(7, 7, 10, .2) 100%)
    }

    .hero-overlay2 {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to top, rgba(7, 7, 10, .9) 0%, transparent 55%)
    }

    .hero-content {
      position: relative;
      z-index: 3;
      padding: 0 64px 80px;
      width: 100%
    }

    .hero-top-content {
      position: absolute;
      top: 50%;
      left: 64px;
      transform: translateY(-50%);
      z-index: 3;
      max-width: 680px
    }

    .hero-eyebrow {
      font-size: .65rem;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px;
      opacity: 0;
      display: flex;
      align-items: center;
      gap: 14px
    }

    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 36px;
      height: 1px;
      background: var(--gold)
    }

    .hero-title {
      font-family: var(--serif);
      font-size: clamp(3.8rem, 7.5vw, 7rem);
      font-weight: 300;
      line-height: 1.02;
      letter-spacing: -.02em;
      opacity: 0
    }

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

    .hero-title .line {
      display: block;
      overflow: hidden
    }

    .hero-subtitle {
      font-size: 1.05rem;
      font-weight: 200;
      color: rgba(240, 235, 224, .6);
      line-height: 1.9;
      margin-top: 30px;
      max-width: 480px;
      opacity: 0
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      margin-top: 44px;
      opacity: 0;
      align-items: center;
      flex-wrap: wrap
    }

    .btn-gold {
      font-size: .7rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      background: var(--gold);
      color: var(--ink);
      padding: 16px 40px;
      border: 1px solid var(--gold);
      ;
      transition: all .4s cubic-bezier(.25, .46, .45, .94);
      font-family: var(--sans);
      font-weight: 500;
      text-decoration: none;
      display: inline-block;
      position: relative;
      overflow: hidden
    }

    .btn-gold::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--gold-light);
      transform: translateX(-101%);
      transition: transform .4s cubic-bezier(.25, .46, .45, .94)
    }

    .btn-gold:hover::before {
      transform: translateX(0)
    }

    .btn-gold span {
      position: relative;
      z-index: 1
    }

    .btn-ghost {
      font-size: .7rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      background: transparent;
      color: rgba(240, 235, 224, .8);
      padding: 16px 40px;
      border: 1px solid rgba(240, 235, 224, .2);
      ;
      transition: all .4s;
      font-family: var(--sans);
      font-weight: 300;
      text-decoration: none;
      display: inline-block
    }

    .btn-ghost:hover {
      border-color: var(--gold);
      color: var(--gold)
    }

    .hero-scroll {
      position: absolute;
      bottom: 36px;
      right: 64px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .6rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .35);
      opacity: 0;
      writing-mode: vertical-rl;
      text-orientation: mixed
    }

    .hero-scroll-line {
      width: 1px;
      height: 60px;
      background: rgba(240, 235, 224, .15);
      position: relative;
      overflow: hidden
    }

    .hero-scroll-line::after {
      content: '';
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gold);
      animation: scrolldown 2s ease infinite
    }

    @keyframes scrolldown {
      0% {
        top: -100%
      }

      100% {
        top: 100%
      }
    }

    .hero-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%
    }

    .hero-stats {
      display: flex;
      gap: 48px
    }

    .hero-stat-num {
      font-family: var(--serif);
      font-size: 2.6rem;
      font-weight: 300;
      color: var(--gold);
      line-height: 1
    }

    .hero-stat-label {
      font-size: .6rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .38);
      margin-top: 5px
    }

    .hero-locations {
      display: flex;
      gap: 20px;
      opacity: 0
    }

    .hero-loc {
      font-size: .62rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .35);
      border: 1px solid rgba(240, 235, 224, .1);
      padding: 6px 14px;
      transition: all .3s;

    }

    .hero-loc:hover {
      border-color: rgba(201, 168, 76, .4);
      color: var(--gold)
    }

    /* ── GENERAL ── */
    section {
      position: relative
    }

    .pad {
      padding: 140px 64px
    }

    .eyebrow {
      font-size: .62rem;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .eyebrow::before {
      content: '';
      display: block;
      width: 28px;
      height: 1px;
      background: var(--gold)
    }

    .h1 {
      font-family: var(--serif);
      font-size: clamp(2.6rem, 5vw, 4.5rem);
      font-weight: 300;
      line-height: 1.08;
      letter-spacing: -.01em
    }

    .h1 em {
      font-style: italic;
      color: var(--gold)
    }

    .h2 {
      font-family: var(--serif);
      font-size: clamp(2rem, 3.5vw, 3.2rem);
      font-weight: 300;
      line-height: 1.1;
      letter-spacing: -.01em
    }

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

    .gold-rule {
      width: 50px;
      height: 1px;
      background: var(--gold);
      opacity: .45;
      margin: 36px 0
    }

    .sec-num {
      font-family: var(--serif);
      font-size: 9rem;
      font-weight: 300;
      color: rgba(201, 168, 76, .035);
      position: absolute;
      top: 50px;
      right: 50px;
      line-height: 1;
      pointer-events: none;
      user-select: none;
      letter-spacing: -.05em
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .95s cubic-bezier(.25, .46, .45, .94), transform .95s cubic-bezier(.25, .46, .45, .94)
    }

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

    .rl {
      opacity: 0;
      transform: translateX(-28px);
      transition: opacity .95s cubic-bezier(.25, .46, .45, .94), transform .95s cubic-bezier(.25, .46, .45, .94)
    }

    .rl.in {
      opacity: 1;
      transform: translateX(0)
    }

    .rr {
      opacity: 0;
      transform: translateX(28px);
      transition: opacity .95s cubic-bezier(.25, .46, .45, .94), transform .95s cubic-bezier(.25, .46, .45, .94)
    }

    .rr.in {
      opacity: 1;
      transform: translateX(0)
    }

    /* ── ABOUT ── */
    #about {
      background: var(--ink-soft)
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 96px;
      align-items: center;
      margin-top: 72px
    }

    .about-visual {
      position: relative;
      height: 640px
    }

    .about-img-main {
      position: absolute;
      right: 0;
      top: 0;
      width: 78%;
      height: 88%;
      overflow: hidden
    }

    .about-img-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(.8) contrast(1.05)
    }

    .about-img-main::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(7, 7, 10, .3), transparent 60%)
    }

    .about-img-accent {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 46%;
      height: 50%;
      background: rgba(201, 168, 76, .07);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      backdrop-filter: blur(8px)
    }

    .about-accent-quote {
      font-family: var(--serif);
      font-size: 1rem;
      font-style: italic;
      color: rgba(201, 168, 76, .65);
      line-height: 1.7;
      text-align: center
    }

    .about-text p {
      font-size: .95rem;
      line-height: 2;
      color: rgba(240, 235, 224, .55);
      margin-bottom: 18px
    }

    .about-pillars {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 40px
    }

    .pillar {
      border: 1px solid var(--border);
      padding: 22px;
      position: relative;
      overflow: hidden;
      transition: border-color .4s, background .4s;

    }

    .pillar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(201, 168, 76, .06), transparent);
      opacity: 0;
      transition: opacity .4s
    }

    .pillar:hover {
      border-color: var(--border-hover);
      background: rgba(201, 168, 76, .03)
    }

    .pillar:hover::before {
      opacity: 1
    }

    .pillar-n {
      font-family: var(--serif);
      font-size: 1.8rem;
      font-weight: 300;
      color: rgba(201, 168, 76, .18);
      line-height: 1
    }

    .pillar-t {
      font-size: .68rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .7);
      margin-top: 8px
    }

    /* ── STORY STRIP (Cinematic Horizontal) ── */
    #story {
      background: var(--ink)
    }

    .story-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden
    }

    .story-track {
      display: flex;
      height: 100vh;
      will-change: transform
    }

    .story-panel {
      flex-shrink: 0;
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden
    }

    .story-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.05);
      transition: transform 1.2s ease
    }

    .story-panel.active img {
      transform: scale(1)
    }

    .story-veil {
      position: absolute;
      inset: 0;
      z-index: 1
    }

    .sv1 {
      background: linear-gradient(120deg, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .5) 50%, rgba(7, 7, 10, .2) 100%)
    }

    .sv2 {
      background: linear-gradient(240deg, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .5) 50%, rgba(7, 7, 10, .15) 100%)
    }

    .sv3 {
      background: linear-gradient(180deg, rgba(7, 7, 10, .8) 0%, rgba(7, 7, 10, .3) 50%, rgba(7, 7, 10, .85) 100%)
    }

    .story-body {
      position: absolute;
      z-index: 2;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0 64px 80px
    }

    .story-top {
      position: absolute;
      top: 50%;
      left: 64px;
      transform: translateY(-50%);
      z-index: 2;
      max-width: 640px
    }

    .story-ch {
      font-size: .6rem;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: .8
    }

    .story-ch::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--gold);
      display: block
    }

    .story-h {
      font-family: var(--serif);
      font-size: clamp(3rem, 5.5vw, 5.5rem);
      font-weight: 300;
      line-height: 1.04;
      color: var(--cream)
    }

    .story-h em {
      font-style: italic;
      color: var(--gold)
    }

    .story-p {
      font-size: .95rem;
      line-height: 1.9;
      color: rgba(240, 235, 224, .58);
      margin-top: 22px;
      max-width: 460px
    }

    .story-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 30px;
      font-size: .68rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px solid rgba(201, 168, 76, .35);
      padding-bottom: 2px;
      transition: gap .3s, border-color .3s
    }

    .story-link:hover {
      gap: 18px;
      border-color: var(--gold)
    }

    .story-link::after {
      content: '→';
      font-size: 1rem
    }

    /* Bottom bar on each panel */
    .story-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(201, 168, 76, .1);
      padding-top: 20px
    }

    .story-panel-num {
      font-family: var(--serif);
      font-size: 4rem;
      font-weight: 300;
      color: rgba(201, 168, 76, .08);
      line-height: 1
    }

    .story-bar-facts {
      display: flex;
      gap: 36px
    }

    .story-fact {
      text-align: right
    }

    .story-fact-n {
      font-family: var(--serif);
      font-size: 1.6rem;
      font-weight: 300;
      color: var(--gold);
      line-height: 1
    }

    .story-fact-l {
      font-size: .58rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .35);
      margin-top: 4px
    }

    /* Progress dots */
    #story-dots {
      position: fixed;
      right: 36px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 200;
      display: flex;
      flex-direction: column;
      gap: 10px;
      display: none
    }

    #story-dots.visible {
      display: flex
    }

    .sdot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(240, 235, 224, .2);
      transition: all .4s;

    }

    .sdot.active {
      background: var(--gold);
      transform: scale(1.6)
    }

    /* ── PROPERTIES ── */
    #properties {
      background: var(--ink-soft)
    }

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

    .props-grid {
      display: grid;
      grid-template-columns: 1.55fr 1fr 1fr;
      gap: 3px
    }

    .prop-card {
      position: relative;
      overflow: hidden;

    }

    .prop-card:first-child {
      grid-row: span 2
    }

    .prop-card-img {
      width: 100%;
      height: 100%;
      min-height: 340px;
      display: block;
      position: relative;
      overflow: hidden
    }

    .prop-card:first-child .prop-card-img {
      min-height: 680px
    }

    .prop-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .8s cubic-bezier(.25, .46, .45, .94);
      display: block
    }

    .prop-card:hover .prop-card-img img {
      transform: scale(1.06)
    }

    .prop-veil {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(7, 7, 10, .95) 0%, rgba(7, 7, 10, .2) 50%, transparent 100%);
      transition: background .5s;
      z-index: 1
    }

    .prop-card:hover .prop-veil {
      background: linear-gradient(to top, rgba(7, 7, 10, .98) 0%, rgba(7, 7, 10, .35) 60%, rgba(7, 7, 10, .1) 100%)
    }

    .prop-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 28px;
      z-index: 2
    }

    .prop-tag {
      font-size: .56rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      background: var(--gold);
      color: var(--ink);
      padding: 4px 12px;
      display: inline-block;
      margin-bottom: 11px;
      font-weight: 500
    }

    .prop-name {
      font-family: var(--serif);
      font-size: 1.35rem;
      font-weight: 300;
      margin-bottom: 5px;
      line-height: 1.2
    }

    .prop-card:first-child .prop-name {
      font-size: 2rem
    }

    .prop-loc {
      font-size: .68rem;
      color: rgba(240, 235, 224, .45);
      letter-spacing: .06em;
      margin-bottom: 14px
    }

    .prop-price {
      font-family: var(--serif);
      font-size: 1.1rem;
      font-weight: 300;
      color: var(--gold)
    }

    .prop-card:first-child .prop-price {
      font-size: 1.55rem
    }

    .prop-meta {
      display: flex;
      gap: 18px;
      margin-top: 10px;
      font-size: .65rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .35)
    }

    .prop-meta-sep {
      opacity: .3
    }

    .prop-card-hover {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 2;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(240, 235, 224, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity .4s, background .4s
    }

    .prop-card:hover .prop-card-hover {
      opacity: 1
    }

    .prop-card:hover .prop-card-hover:hover {
      background: var(--gold)
    }

    .prop-card-hover svg {
      width: 16px;
      height: 16px;
      stroke: rgba(240, 235, 224, .6);
      fill: none;
      stroke-width: 1.5
    }

    /* ── SERVICES ── */
    #services {
      background: var(--ink)
    }

    .svc-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      margin-top: 56px
    }

    .svc-tab {
      font-size: .68rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 14px 28px;
      border: none;
      background: none;
      color: rgba(240, 235, 224, .38);
      ;
      font-family: var(--sans);
      font-weight: 400;
      transition: all .3s;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      flex-shrink: 0
    }

    .svc-tab.active {
      color: var(--gold);
      border-bottom-color: var(--gold)
    }

    .svc-tab:hover:not(.active) {
      color: rgba(240, 235, 224, .65)
    }

    .svc-panel {
      display: none;
      margin-top: 56px
    }

    .svc-panel.active {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 2px;
      animation: fade .5s ease
    }

    @keyframes fade {
      from {
        opacity: 0;
        transform: translateY(12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .svc-card {
      background: rgba(255, 255, 255, .015);
      border: 1px solid var(--border);
      padding: 44px 36px 40px;
      position: relative;
      overflow: hidden;
      ;
      transition: all .45s cubic-bezier(.25, .46, .45, .94)
    }

    .svc-card::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-dim), var(--gold));
      transition: width .45s cubic-bezier(.25, .46, .45, .94)
    }

    .svc-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(201, 168, 76, .05), transparent);
      opacity: 0;
      transition: opacity .45s
    }

    .svc-card:hover {
      background: rgba(201, 168, 76, .03);
      transform: translateY(-5px)
    }

    .svc-card:hover::before {
      width: 100%
    }

    .svc-card:hover::after {
      opacity: 1
    }

    .svc-icon {
      width: 38px;
      height: 38px;
      margin-bottom: 26px;
      opacity: .65
    }

    .svc-icon svg {
      width: 100%;
      height: 100%;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.15
    }

    .svc-name {
      font-family: var(--serif);
      font-size: 1.5rem;
      font-weight: 300;
      margin-bottom: 12px;
      line-height: 1.2
    }

    .svc-desc {
      font-size: .82rem;
      line-height: 1.8;
      color: rgba(240, 235, 224, .46)
    }

    .svc-arr {
      position: absolute;
      bottom: 24px;
      right: 24px;
      width: 30px;
      height: 30px;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .4s
    }

    .svc-card:hover .svc-arr {
      background: var(--gold);
      border-color: var(--gold)
    }

    .svc-arr svg {
      width: 12px;
      height: 12px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 2;
      transition: stroke .4s
    }

    .svc-card:hover .svc-arr svg {
      stroke: var(--ink)
    }

    /* ── DISTRICTS MAP ── */
    #districts {
      background: var(--ink-soft);
      padding: 140px 0
    }

    .dist-head {
      padding: 0 64px;
      margin-bottom: 72px
    }

    .dist-stage {
      position: relative;
      width: 100%
    }

    .dist-map-wrap {
      position: relative;
      width: 100%;
      height: 680px
    }

    #gmap {
      width: 100%;
      height: 100%;
      filter: saturate(0) brightness(.35) contrast(1.1);
      transition: filter .6s
    }

    #gmap.loaded {
      filter: saturate(.12) brightness(.4) contrast(1.15) hue-rotate(10deg)
    }

    .dist-map-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2
    }

    /* Custom district dots over map */
    .dist-dot-layer {
      position: absolute;
      inset: 0;
      z-index: 5
    }

    .d-dot {
      position: absolute;
      ;
      transform: translate(-50%, -50%)
    }

    .d-dot-inner {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--gold);
      border: 2px solid rgba(201, 168, 76, .4);
      transition: all .4s;
      position: relative
    }

    .d-dot-inner::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px solid rgba(201, 168, 76, .2);
      animation: dping 2s ease infinite
    }

    .d-dot-inner::after {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: 50%;
      border: 1px solid rgba(201, 168, 76, .1);
      animation: dping 2s ease .5s infinite
    }

    @keyframes dping {
      0% {
        opacity: .6;
        transform: scale(1)
      }

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

    .d-dot.active .d-dot-inner,
    .d-dot:hover .d-dot-inner {
      background: var(--gold-light);
      width: 16px;
      height: 16px;
      margin: -2px
    }

    .d-label {
      position: absolute;
      white-space: nowrap;
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .7);
      top: 22px;
      left: 50%;
      transform: translateX(-50%);
      transition: color .3s;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .8)
    }

    .d-dot.active .d-label,
    .d-dot:hover .d-label {
      color: var(--gold)
    }

    /* Info panel */
    .dist-panel {
      position: absolute;
      right: 64px;
      top: 50%;
      transform: translateY(-50%) translateX(16px);
      width: 330px;
      background: rgba(7, 7, 10, .96);
      border: 1px solid var(--border);
      padding: 40px;
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      opacity: 0;
      transition: opacity .5s, transform .5s;
      z-index: 10
    }

    .dist-panel.show {
      opacity: 1;
      transform: translateY(-50%) translateX(0)
    }

    .dp-name {
      font-family: var(--serif);
      font-size: 2.1rem;
      font-weight: 300;
      color: var(--gold);
      margin-bottom: 3px;
      line-height: 1
    }

    .dp-sub {
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .35);
      margin-bottom: 24px
    }

    .dp-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 0;
      border-bottom: 1px solid rgba(201, 168, 76, .06)
    }

    .dp-row:last-of-type {
      border-bottom: none
    }

    .dp-label {
      font-size: .65rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .42)
    }

    .dp-val {
      font-family: var(--serif);
      font-size: 1.1rem;
      font-weight: 300;
      color: var(--cream)
    }

    .dp-desc {
      font-size: .8rem;
      line-height: 1.75;
      color: rgba(240, 235, 224, .48);
      margin-top: 18px
    }

    .dp-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 14px
    }

    .dp-tag {
      font-size: .58rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid rgba(201, 168, 76, .2);
      padding: 3px 9px;
      color: rgba(201, 168, 76, .65)
    }

    .dist-hint {
      position: absolute;
      bottom: 20px;
      left: 64px;
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .25);
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 5
    }

    .dist-hint::before {
      content: '';
      width: 18px;
      height: 1px;
      background: rgba(240, 235, 224, .15);
      display: block
    }

    /* ── MARKET INTEL ── */
    #market {
      background: var(--ink)
    }

    .market-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
      margin-top: 72px
    }

    .market-chart {
      background: rgba(255, 255, 255, .015);
      border: 1px solid var(--border);
      padding: 44px;
      position: relative;
      overflow: hidden
    }

    .market-chart-title {
      font-size: .6rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 28px
    }

    #priceChart {
      width: 100%;
      height: 230px;
      display: block
    }

    .market-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px
    }

    .mstat {
      background: rgba(255, 255, 255, .015);
      border: 1px solid var(--border);
      padding: 36px 28px;
      transition: background .4s;

    }

    .mstat:hover {
      background: rgba(201, 168, 76, .04)
    }

    .mstat-n {
      font-family: var(--serif);
      font-size: 3rem;
      font-weight: 300;
      color: var(--gold);
      line-height: 1
    }

    .mstat-suffix {
      font-family: var(--serif);
      font-size: 1.4rem;
      color: rgba(201, 168, 76, .5)
    }

    .mstat-l {
      font-size: .62rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .36);
      margin-top: 8px
    }

    .mstat-trend {
      font-size: .68rem;
      color: rgba(120, 200, 100, .75);
      margin-top: 7px
    }

    .mstat-trend::before {
      content: '↑ '
    }

    .market-table {
      grid-column: span 2;
      background: rgba(255, 255, 255, .015);
      border: 1px solid var(--border);
      padding: 44px
    }

    .mt-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      font-size: .6rem;
      letter-spacing: .22em;
      text-transform: uppercase
    }

    .mt-header-left {
      color: var(--gold)
    }

    .mt-header-right {
      color: rgba(240, 235, 224, .28)
    }

    .mt-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid rgba(201, 168, 76, .05);
      transition: padding-left .3s, background .3s;

    }

    .mt-row:last-child {
      border-bottom: none
    }

    .mt-row:hover {
      padding-left: 10px
    }

    .mt-district {
      font-family: var(--serif);
      font-size: 1.1rem;
      font-weight: 300;
      min-width: 130px
    }

    .mt-price {
      font-size: .76rem;
      color: rgba(240, 235, 224, .46)
    }

    .mt-roi {
      font-size: .72rem;
      color: rgba(120, 200, 100, .8)
    }

    .mt-bar-wrap {
      width: 90px;
      height: 2px;
      background: rgba(255, 255, 255, .06);
      border-radius: 2px;
      overflow: hidden
    }

    .mt-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--gold-dim), var(--gold));
      border-radius: 2px;
      width: 0;
      transition: width 1.6s cubic-bezier(.25, .46, .45, .94)
    }

    /* ── INVEST ── */
    #invest {
      background: var(--ink-soft)
    }

    .inv-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
      margin-top: 72px
    }

    .inv-card {
      border: 1px solid var(--border);
      padding: 48px 36px;
      position: relative;
      overflow: hidden;
      transition: all .45s cubic-bezier(.25, .46, .45, .94);

    }

    .inv-card.feat {
      background: linear-gradient(135deg, rgba(201, 168, 76, .09), rgba(201, 168, 76, .02));
      border-color: rgba(201, 168, 76, .35)
    }

    .inv-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(201, 168, 76, .07), transparent);
      opacity: 0;
      transition: opacity .45s
    }

    .inv-card:hover::after {
      opacity: 1
    }

    .inv-card:hover {
      transform: translateY(-7px)
    }

    .inv-type {
      font-size: .58rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 24px
    }

    .inv-label {
      font-family: var(--serif);
      font-size: 1.55rem;
      font-weight: 300;
      margin-bottom: 14px
    }

    .inv-roi {
      font-family: var(--serif);
      font-size: 3.8rem;
      font-weight: 300;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 6px
    }

    .inv-roi-sub {
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .36)
    }

    .inv-list {
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .inv-item {
      font-size: .8rem;
      color: rgba(240, 235, 224, .5);
      padding-left: 14px;
      position: relative
    }

    .inv-item::before {
      content: '—';
      position: absolute;
      left: 0;
      color: var(--gold-dim);
      opacity: .7
    }

    /* ── WHY ── */
    #why {
      background: var(--ink)
    }

    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 110px;
      align-items: center;
      margin-top: 72px
    }

    .why-feats {
      display: flex;
      flex-direction: column;
      gap: 44px
    }

    .wf {
      display: flex;
      gap: 26px;
      align-items: flex-start;
      padding-bottom: 44px;
      border-bottom: 1px solid rgba(201, 168, 76, .07)
    }

    .wf:last-child {
      border-bottom: none;
      padding-bottom: 0
    }

    .wf-n {
      font-family: var(--serif);
      font-size: 3.2rem;
      font-weight: 300;
      color: rgba(201, 168, 76, .12);
      line-height: 1;
      min-width: 58px
    }

    .wf-title {
      font-family: var(--serif);
      font-size: 1.35rem;
      font-weight: 300;
      margin-bottom: 8px
    }

    .wf-desc {
      font-size: .84rem;
      line-height: 1.85;
      color: rgba(240, 235, 224, .46)
    }

    .why-visual {
      position: relative;
      height: 680px
    }

    #cityCanvas {
      width: 100%;
      height: 100%;
      display: block
    }

    .why-badge {
      position: absolute;
      background: rgba(7, 7, 10, .9);
      border: 1px solid var(--border);
      padding: 20px 26px;
      backdrop-filter: blur(14px)
    }

    .wb-top {
      top: 36px;
      right: -24px
    }

    .wb-bot {
      bottom: 72px;
      left: -24px
    }

    .wb-n {
      font-family: var(--serif);
      font-size: 2.1rem;
      font-weight: 300;
      color: var(--gold);
      line-height: 1
    }

    .wb-l {
      font-size: .6rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .42);
      margin-top: 4px
    }

    /* ── JOURNEY ── */
    #journey {
      background: var(--ink-soft)
    }

    .jrn-tabs {
      display: flex;
      gap: 3px;
      margin-top: 56px
    }

    .jrn-tab {
      flex: 1;
      background: rgba(255, 255, 255, .02);
      border: 1px solid var(--border);
      padding: 20px 24px;
      ;
      transition: all .35s;
      text-align: center
    }

    .jrn-tab.active {
      background: rgba(201, 168, 76, .08);
      border-color: rgba(201, 168, 76, .35)
    }

    .jrn-tab-title {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 300;
      margin-bottom: 4px;
      transition: color .3s
    }

    .jrn-tab.active .jrn-tab-title {
      color: var(--gold)
    }

    .jrn-tab-sub {
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .3)
    }

    .jrn-steps {
      display: none;
      margin-top: 56px;
      grid-template-columns: repeat(5, 1fr);
      gap: 0
    }

    .jrn-steps.active {
      display: grid;
      animation: fade .5s ease
    }

    .jrn-step {
      padding: 36px 26px;
      border: 1px solid var(--border);
      position: relative;
      overflow: hidden;
      transition: background .4s
    }

    .jrn-step:hover {
      background: rgba(201, 168, 76, .03)
    }

    .jrn-step::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-dim), var(--gold));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .65s cubic-bezier(.25, .46, .45, .94)
    }

    .jrn-step:hover::before {
      transform: scaleX(1)
    }

    .jrn-sn {
      font-family: var(--serif);
      font-size: 2.8rem;
      font-weight: 300;
      color: rgba(201, 168, 76, .1);
      line-height: 1;
      margin-bottom: 18px
    }

    .jrn-st {
      font-family: var(--serif);
      font-size: .95rem;
      font-weight: 300;
      margin-bottom: 9px;
      color: var(--cream)
    }

    .jrn-sd {
      font-size: .76rem;
      line-height: 1.75;
      color: rgba(240, 235, 224, .42)
    }

    .jrn-time {
      display: inline-block;
      margin-top: 14px;
      font-size: .58rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold-dim);
      border: 1px solid rgba(201, 168, 76, .18);
      padding: 3px 8px
    }

    .jrn-step:not(:last-child)::after {
      content: '→';
      position: absolute;
      right: -10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(201, 168, 76, .15);
      font-size: .9rem;
      z-index: 1
    }

    /* ── RESIDENCY ── */
    #residency {
      background: var(--ink)
    }

    .res-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
      margin-bottom: 72px
    }

    .res-img {
      width: 100%;
      height: 420px;
      overflow: hidden;
      position: relative
    }

    .res-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(.75)
    }

    .res-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(7, 7, 10, .4), transparent)
    }

    .res-cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px
    }

    .res-card {
      border: 1px solid var(--border);
      padding: 34px 22px;
      position: relative;
      overflow: hidden;
      transition: all .45s;
      ;
      text-align: center
    }

    .res-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 0;
      background: var(--gold);
      transition: height .45s
    }

    .res-card:hover {
      background: rgba(201, 168, 76, .04)
    }

    .res-card:hover::before {
      height: 36px
    }

    .res-ico {
      font-size: 2rem;
      color: rgba(201, 168, 76, .28);
      margin-bottom: 18px;
      line-height: 1
    }

    .res-title {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 300;
      margin-bottom: 9px;
      line-height: 1.3
    }

    .res-desc {
      font-size: .74rem;
      line-height: 1.72;
      color: rgba(240, 235, 224, .42)
    }

    /* ── TESTIMONIALS ── */
    #testimonials {
      background: var(--ink-soft);
      overflow: hidden
    }

    .test-wrap {
      overflow: hidden;
      margin-top: 56px;
      position: relative
    }

    .test-wrap::before,
    .test-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      width: 180px;
      height: 100%;
      z-index: 2;
      pointer-events: none
    }

    .test-wrap::before {
      left: 0;
      background: linear-gradient(to right, var(--ink-soft), transparent)
    }

    .test-wrap::after {
      right: 0;
      background: linear-gradient(to left, var(--ink-soft), transparent)
    }

    .test-track {
      display: flex;
      gap: 24px;
      animation: scrolltest 45s linear infinite
    }

    @keyframes scrolltest {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    .test-track:hover {
      animation-play-state: paused
    }

    .test-card {
      flex-shrink: 0;
      width: 420px;
      border: 1px solid var(--border);
      padding: 38px;
      background: rgba(255, 255, 255, .015);
      transition: border-color .4s
    }

    .test-card:hover {
      border-color: rgba(201, 168, 76, .3)
    }

    .test-stars {
      color: var(--gold);
      font-size: .78rem;
      letter-spacing: 3px;
      margin-bottom: 18px
    }

    .test-quote {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.8;
      font-style: italic;
      color: rgba(240, 235, 224, .72);
      margin-bottom: 22px
    }

    .test-author {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .test-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold-dim), var(--gold));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: .82rem;
      color: var(--ink);
      font-weight: 400;
      flex-shrink: 0
    }

    .test-name {
      font-size: .76rem;
      font-weight: 500;
      letter-spacing: .04em
    }

    .test-origin {
      font-size: .68rem;
      color: rgba(240, 235, 224, .35);
      margin-top: 2px
    }

    /* ── BLOG ── */
    #blog {
      background: var(--ink)
    }

    .blog-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 3px;
      margin-top: 72px
    }

    .blog-card {
      ;
      overflow: hidden
    }

    .blog-inner {
      height: 100%;
      border: 1px solid var(--border);
      transition: border-color .4s
    }

    .blog-card:hover .blog-inner {
      border-color: rgba(201, 168, 76, .3)
    }

    .blog-img {
      position: relative;
      overflow: hidden
    }

    .blog-card:first-child .blog-img {
      height: 300px
    }

    .blog-card:not(:first-child) .blog-img {
      height: 170px
    }

    .blog-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .7s cubic-bezier(.25, .46, .45, .94)
    }

    .blog-card:hover .blog-img img {
      transform: scale(1.05)
    }

    .blog-cat-badge {
      position: absolute;
      top: 18px;
      left: 18px;
      font-size: .55rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      background: var(--gold);
      color: var(--ink);
      padding: 4px 10px;
      font-weight: 500;
      z-index: 1
    }

    .blog-body {
      padding: 26px
    }

    .blog-date {
      font-size: .62rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .3);
      margin-bottom: 9px
    }

    .blog-title {
      font-family: var(--serif);
      font-size: 1.3rem;
      font-weight: 300;
      line-height: 1.3;
      margin-bottom: 10px;
      transition: color .3s
    }

    .blog-card:first-child .blog-title {
      font-size: 1.75rem
    }

    .blog-card:hover .blog-title {
      color: var(--gold)
    }

    .blog-excerpt {
      font-size: .78rem;
      line-height: 1.72;
      color: rgba(240, 235, 224, .46);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .blog-read {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      font-size: .64rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
      transition: gap .3s
    }

    .blog-read:hover {
      gap: 13px
    }

    .blog-read::after {
      content: '→'
    }

    /* ── CONTACT ── */
    #contact {
      background: var(--ink-soft)
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: start;
      margin-top: 72px
    }

    .contact-info-title {
      font-family: var(--serif);
      font-size: 1.9rem;
      font-weight: 300;
      margin-bottom: 20px;
      line-height: 1.3
    }

    .contact-body {
      font-size: .88rem;
      line-height: 1.9;
      color: rgba(240, 235, 224, .5);
      margin-bottom: 36px
    }

    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-bottom: 28px
    }

    .cd-row {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .cd-icon {
      width: 38px;
      height: 38px;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .cd-icon svg {
      width: 14px;
      height: 14px;
      stroke: var(--gold);
      fill: none;
      stroke-width: 1.5
    }

    .cd-text {
      font-size: .82rem;
      color: rgba(240, 235, 224, .55);
      line-height: 1.55
    }

    .wa-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(37, 211, 102, .08);
      border: 1px solid rgba(37, 211, 102, .22);
      color: rgba(37, 211, 102, .85);
      padding: 13px 24px;
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-decoration: none;
      transition: all .35s;
      ;
      font-family: var(--sans)
    }

    .wa-btn:hover {
      background: rgba(37, 211, 102, .16)
    }

    .wa-btn svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
      flex-shrink: 0
    }

    /* Map section */
    .contact-map-wrap {
      position: relative;
      height: 300px;
      margin-top: 36px;
      overflow: hidden;
      border: 1px solid var(--border)
    }

    .contact-map-wrap iframe {
      width: 100%;
      height: 100%;
      border: none;
      filter: saturate(0) brightness(.35) contrast(1.1)
    }

    .contact-map-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(14, 14, 18, .3), transparent 30%, transparent 70%, rgba(14, 14, 18, .3));
      border: 1px solid var(--border)
    }

    /* Form */
    .form-wrap {
      display: flex;
      flex-direction: column;
      gap: 18px
    }

    .fg {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .fg label {
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .38)
    }

    .fg input,
    .fg select,
    .fg textarea {
      width: 100%;
      background: rgba(255, 255, 255, .025);
      border: 1px solid var(--border);
      padding: 13px 16px;
      color: var(--cream);
      font-family: var(--sans);
      font-size: .86rem;
      font-weight: 300;
      outline: none;
      transition: border-color .35s;
      -webkit-appearance: none
    }

    .fg select {
      ;
      color: rgba(240, 235, 224, .55)
    }

    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
      border-color: rgba(201, 168, 76, .45)
    }

    .fg textarea {
      resize: vertical;
      min-height: 110px
    }

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

    .form-submit {
      background: var(--gold);
      color: var(--ink);
      border: 1px solid var(--gold);
      padding: 15px 38px;
      font-family: var(--sans);
      font-size: .7rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 500;
      ;
      transition: all .4s;
      align-self: flex-start;
      position: relative;
      overflow: hidden
    }

    .form-submit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(7, 7, 10, .12);
      transform: translateX(-101%);
      transition: transform .4s
    }

    .form-submit:hover::before {
      transform: translateX(0)
    }

    .form-submit:hover {
      color: var(--cream)
    }

    /* ── FOOTER ── */
    footer {
      background: rgba(3, 3, 5, 1);
      padding: 56px 64px;
      border-top: 1px solid var(--border)
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 56px;
      margin-bottom: 56px
    }

    .foot-brand {
      font-family: var(--serif);
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: .22em;
      color: var(--gold);
      margin-bottom: 18px
    }

    .foot-brand span {
      color: var(--cream);
      font-weight: 200
    }

    .foot-tag {
      font-size: .8rem;
      line-height: 1.8;
      color: rgba(240, 235, 224, .36);
      max-width: 270px;
      margin-bottom: 24px
    }

    .foot-social {
      display: flex;
      gap: 10px
    }

    .fsoc {
      width: 32px;
      height: 32px;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .3s;
      text-decoration: none
    }

    .fsoc:hover {
      border-color: rgba(201, 168, 76, .45)
    }

    .fsoc svg {
      width: 13px;
      height: 13px;
      stroke: rgba(240, 235, 224, .35);
      fill: none;
      stroke-width: 1.5;
      transition: stroke .3s
    }

    .fsoc:hover svg {
      stroke: var(--gold)
    }

    .foot-col h4 {
      font-size: .6rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(240, 235, 224, .3);
      margin-bottom: 18px
    }

    .foot-col a {
      display: block;
      font-size: .78rem;
      color: rgba(240, 235, 224, .46);
      text-decoration: none;
      margin-bottom: 9px;
      transition: color .3s
    }

    .foot-col a:hover {
      color: var(--gold)
    }

    .foot-bottom {
      border-top: 1px solid var(--border);
      padding-top: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .foot-copy {
      font-size: .66rem;
      color: rgba(240, 235, 224, .22)
    }

    .foot-legal {
      display: flex;
      gap: 22px
    }

    .foot-legal a {
      font-size: .66rem;
      color: rgba(240, 235, 224, .22);
      text-decoration: none;
      transition: color .3s
    }

    .foot-legal a:hover {
      color: var(--gold)
    }

    /* ── RESPONSIVE ── */
    @media(max-width:1024px) {
      nav {
        padding: 20px 28px
      }

      nav.scrolled {
        padding: 14px 28px
      }

      .nav-links {
        display: none
      }

      .pad {
        padding: 80px 28px
      }

      .hero-top-content {
        left: 28px
      }

      .hero-content {
        padding: 0 28px 60px
      }

      .hero-stats {
        gap: 28px
      }

      .about-grid,
      .why-grid,
      .contact-grid,
      .res-intro {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .about-visual,
      .why-visual {
        height: 320px
      }

      .props-grid,
      .blog-grid {
        grid-template-columns: 1fr
      }

      .prop-card:first-child {
        grid-row: auto
      }

      .prop-card:first-child .prop-card-img {
        min-height: 340px
      }

      .blog-card:first-child .blog-img {
        height: 220px
      }

      .res-cards {
        grid-template-columns: 1fr 1fr
      }

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

      .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px
      }

      .dist-map-wrap {
        height: 420px
      }

      .dist-panel {
        right: 20px;
        width: 260px;
        padding: 24px
      }

      .jrn-steps {
        grid-template-columns: 1fr
      }

      .jrn-tabs {
        flex-direction: column
      }

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

      .market-table {
        grid-column: auto
      }

      .dist-head {
        padding: 0 28px
      }

      .hero-scroll {
        right: 24px
      }
    }

    @media(max-width:480px) {
      .hero-stats {
        flex-wrap: wrap;
        gap: 16px 24px;
      }

      .hero-stat-num {
        font-size: 1.8rem;
      }

      .hero-stat-label {
        font-size: .5rem;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .foot-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      footer {
        padding: 36px 20px;
      }

      .foot-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
      }

      .test-card {
        width: 280px;
        padding: 24px;
      }

      .test-quote {
        font-size: .85rem;
      }

      .test-wrap::before,
      .test-wrap::after {
        width: 60px;
      }

      .hero-locations {
        flex-wrap: wrap;
        gap: 8px;
      }

      .hero-loc {
        font-size: .55rem;
        padding: 4px 10px;
      }

      .res-cards {
        grid-template-columns: 1fr;
      }

      .sec-num {
        font-size: 5rem;
        right: 20px;
        top: 20px;
      }

      .dist-panel {
        position: relative;
        right: auto;
        width: 100%;
        margin-top: 20px;
      }

      .dist-map-wrap {
        height: 300px;
      }

      .prop-nav {
        padding: 15px 16px;
      }

      .btn-back {
        font-size: 0.75rem;
        padding: 6px 12px;
      }

      .prop-hero-info {
        left: 16px;
        bottom: 160px;
      }

      .prop-title {
        font-size: 1.8rem !important;
      }

      .features-grid {
        grid-template-columns: 1fr !important;
      }

      .map-header {
        padding: 10px;
        gap: 10px;
      }

      .map-search {
        top: 120px;
        width: 95%;
        left: 2.5%;
      }

      .map-controls {
        right: 10px;
      }

      .map-control-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
      }

      .property-card-mini {
        min-width: 160px;
      }
    }