@import url("line-awesome.min.css");

:root{
    --ink:      #0F1F16;
    --canopy:   #16281E;
    --canopy-2: #1D3427;
    --fern:     #3F5F49;
    --gold:     #C6A15B;
    --gold-soft:#DFC48C;
    --ivory:    #F4F0E3;
    --sage:     #A6B9A9;
    --paper:    #F6F2E8;
    --paper-2:  #EEE7D6;
  }

  html{ scroll-behavior:smooth; }
  body{
    background:var(--ink);
    color:var(--ivory);
    font-family:'Manrope',sans-serif;
    overflow-x:hidden;
  }
  ::selection{ background:var(--gold); color:var(--ink); }

  h1,h2,h3,h4,.display-font{
    font-family:'Fraunces',serif;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    font-family:'Manrope',sans-serif;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:.72rem;
    font-weight:700;
    color:var(--gold);
  }
  .mono{
    font-family:'JetBrains Mono',monospace;
  }
  a{ color:inherit; text-decoration:none;}

  /* ---------- Nav ---------- */
  .navbar-brand-mark{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-style:italic;
    letter-spacing:.02em;
  }
  .site-nav{
    background:rgba(15,31,22,.75);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(198,161,91,.18);
  }
  .site-nav .nav-link{
    color:var(--sage);
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:600;
    margin:0 .6rem;
  }
  .site-nav .nav-link:hover{ color:var(--gold-soft); }
  .btn-token{
    background:var(--gold);
    border:1px solid var(--gold);
    color:var(--ink);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.75rem;
    padding:.55rem 1.3rem;
    border-radius:2px;
    transition:all .25s ease;
  }
  .btn-token:hover{
    background:transparent;
    color:var(--gold-soft);
    border-color:var(--gold-soft);
  }
  .btn-token-outline{
    background:transparent;
    border:1px solid rgba(244,240,227,.4);
    color:var(--ivory);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.75rem;
    padding:.65rem 1.5rem;
    border-radius:2px;
    transition:all .25s ease;
  }
  .btn-token-outline:hover{
    border-color:var(--gold);
    color:var(--gold-soft);
  }
.btn-sage{
    background:var(--sage);
    border:1px solid var(--sage);
    color:var(--ink);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.75rem;
    padding:.55rem 1.3rem;
    border-radius:2px;
    transition:all .25s ease;
  }
  /* ---------- Signature vine progress (desktop only) ---------- */
  .vine-rail{
    position:fixed;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    width:14px;
    height:46vh;
    z-index:1050;
    display:none;
  }
  @media (min-width:992px){ .vine-rail{ display:block; } }
  .vine-rail svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .vine-track{ stroke:rgba(166,185,169,.28); stroke-width:1.4; fill:none; }
  .vine-fill{ stroke:var(--gold); stroke-width:1.4; fill:none; stroke-dasharray:1000; stroke-dashoffset:1000; }
  .vine-bud{
    position:absolute; left:50%; width:9px; height:9px; margin-left:-4.5px; margin-top:-4.5px;
    background:var(--gold); border-radius:50%;
    box-shadow:0 0 0 4px rgba(198,161,91,.18);
    transition:top .06s linear;
  }
  .vine-label{
    position:absolute; right:26px; white-space:nowrap;
    font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold-soft); opacity:0; transition:opacity .25s ease;
    font-weight:700; pointer-events:none;
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(180deg, rgba(9,17,12,.55) 0%, rgba(9,17,12,.35) 35%, rgba(8,15,11,.85) 82%, #0F1F16 100%),
               url('../images/hero-corridor.jpg') center 20% / cover no-repeat;
  }
  .hero-inner{ padding-bottom:5.5rem; }
  .hero-kicker{
    color:var(--gold-soft);
    letter-spacing:.28em;
    text-transform:uppercase;
    font-size:.75rem;
    font-weight:700;
  }
  .hero h1{
    font-size:clamp(2.4rem, 5.4vw, 3.6rem);
    line-height:1.04;
    font-weight:500;
    color:var(--ivory);
    max-width:25ch;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--gold-soft);
    font-weight:500;
  }
  .hero-sub{
    color:var(--sage);
    font-size:1.05rem;
    max-width:38ch;
    margin-top:1.1rem;
  }
  .stat-strip{
    border-top:1px solid rgba(244,240,227,.18);
    margin-top:2.6rem;
    padding-top:1.6rem;
  }
  .stat-num{
    font-family:'Fraunces',serif;
    font-size:clamp(1.6rem,3vw,2.4rem);
    color:var(--gold);
    font-weight:500;
  }
  .stat-label{
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--sage);
  }
  .scroll-cue{
    position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
    font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage);
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--gold), transparent); animation:scrollpulse 1.8s ease-in-out infinite; }
  @keyframes scrollpulse{ 0%,100%{opacity:.3} 50%{opacity:1} }

  /* ---------- Section shells ---------- */
  section{ position:relative; }
  .section-dark{ background:var(--ink); }
  .section-canopy{ background:var(--canopy); }
  .section-paper{ background:var(--paper); color:#1D2A21; }
  .section-paper .eyebrow{ color:#8A6D34; }
  .pad{ padding:6.5rem 0; }
  @media (max-width:767px){ .pad{ padding:4rem 0; } }

  .rule{
    width:56px; height:2px; background:var(--gold); border:none; margin:0 0 1.4rem;
  }
  .section-paper .rule{ background:#8A6D34; }

  .lede{
    font-family:'Fraunces',serif;
    font-size:clamp(1.5rem,2.6vw,2.3rem);
    font-weight:500;
    line-height:1.25;
  }
  .section-paper .lede{ color:#16241B; }

  /* ---------- Legacy handoff ---------- */
  .handoff-frame{
    position:relative;
    border-radius:2px;
    overflow:hidden;
    aspect-ratio: 4/5;
  }
  .handoff-frame img{ width:100%; height:100%; object-fit:cover; }
  .handoff-frame::after{
    content:"";
    position:absolute; inset:0;
    border:1px solid rgba(198,161,91,.5);
    margin:14px;
    pointer-events:none;
  }
  .stat-mini{ border-left:2px solid var(--fern); padding-left:1rem; }

  /* ---------- Highlights ---------- */
  .highlight-card{
    background:var(--canopy-2);
    border:1px solid rgba(198,161,91,.16);
    padding:2.1rem 1.7rem;
    height:100%;
    transition:border-color .25s ease, transform .25s ease;
  }
  .highlight-card:hover{ border-color:rgba(198,161,91,.55); transform:translateY(-4px); }
  .highlight-num{
    font-family:'JetBrains Mono',monospace;
    color:var(--gold);
    font-size:.75rem;
    letter-spacing:.1em;
  }
  .highlight-card h3{
    font-size:1.3rem;
    margin:.9rem 0 .6rem;
    color:var(--ivory);
    font-weight:500;
  }
  .highlight-card p{ color:var(--sage); font-size:.92rem; margin:0; }

  /* ---------- Well connected / map ---------- */
  .connected-photo{
    position:relative;
    min-height:560px;
    background:linear-gradient(180deg, rgba(9,17,12,.15), rgba(9,17,12,.9)),
               url('../images/maze-aerial.jpg') center / cover no-repeat;
    display:flex; align-items:flex-end;
  }
  .distance-tier{
    border-top:1px solid rgba(244,240,227,.14);
    padding:1.1rem 0;
  }
  .distance-tier:first-child{ border-top:none; }
  .distance-tier .tier-label{
    font-family:'JetBrains Mono',monospace;
    color:var(--gold);
    font-size:.85rem;
    min-width:110px;
    display:inline-block;
  }
  .chip{
    display:inline-block;
    border:1px solid rgba(166,185,169,.35);
    color:var(--sage);
    font-size:.78rem;
    padding:.28rem .7rem;
    border-radius:20px;
    margin:.2rem .3rem .2rem 0;
  }
  .map-card{
    background:var(--paper-2);
    border-radius:2px;
    padding:.8rem;
  }
  .map-card img{ width:100%; display:block; border-radius:1px; }

  /* ---------- Unit plans ---------- */
  .unit-tabs .nav-link{
    background:transparent;
    border:1px solid rgba(198,161,91,.35);
    color:var(--ivory);
    font-family:'Fraunces',serif;
    font-size:1.05rem;
    padding:.6rem 1.6rem;
    border-radius:2px;
    margin-right:.6rem;
  }
  .unit-tabs .nav-link.active{
    background:var(--gold);
    color:var(--ink);
    border-color:var(--gold);
    font-weight:600;
  }
  .unit-card{
    background:var(--canopy-2);
    border:1px solid rgba(198,161,91,.16);
    padding:1.6rem;
  }
  .unit-card img{ width:100%; border:1px solid rgba(244,240,227,.1); background:#F6F2E8; }
  .spec-row{
    display:flex; justify-content:space-between; padding:.55rem 0;
    border-bottom:1px dashed rgba(244,240,227,.16);
    font-size:.92rem;
  }
  .spec-row:last-child{ border-bottom:none; }
  .spec-row .v{ font-family:'JetBrains Mono',monospace; color:var(--gold-soft); }

  /* ---------- Thoughtful details ---------- */
  .detail-photo{ overflow:hidden; }
  .detail-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
  .detail-photo:hover img{ transform:scale(1.04); }

  /* ---------- Pricing / token ---------- */
  .price-table{ width:100%; border-collapse:collapse; }
  .price-table th{
    text-align:left; font-family:'Manrope'; text-transform:uppercase; letter-spacing:.1em;
    font-size:.72rem; color:#8A6D34; padding:.8rem .6rem; border-bottom:2px solid #C6A15B;
  }
  .price-table td{
    padding:1rem .6rem; border-bottom:1px solid rgba(0,0,0,.08); font-size:.98rem;
  }
  .price-table td.v, .price-table td.p{ font-family:'JetBrains Mono',monospace; }
  .price-table tr:hover{ background:rgba(198,161,91,.08); }

  .token-card{
    border:1px solid rgba(198,161,91,.35);
    padding:2.2rem;
    height:100%;
    position:relative;
  }
  .token-card.gold{ background:linear-gradient(160deg,#1D3427,#16281E); }
  .token-card.platinum{ background:linear-gradient(160deg,#233c2e,#16281E); }
  .token-badge{
    display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.7rem;
    letter-spacing:.14em; text-transform:uppercase; padding:.3rem .7rem; border:1px solid var(--gold);
    color:var(--gold-soft); margin-bottom:1.1rem;
  }
  .token-card h3{ font-size:1.7rem; margin-bottom:.3rem; }
  .token-price{ font-family:'JetBrains Mono',monospace; font-size:1.5rem; color:var(--gold); margin-bottom:1.2rem; }
  .token-card ul{ list-style:none; padding:0; margin:0; }
  .token-card ul li{
    padding:.5rem 0 .5rem 1.4rem; position:relative; color:var(--sage); font-size:.92rem;
    border-top:1px solid rgba(244,240,227,.1);
  }
  .token-card ul li:first-child{ border-top:none; }
  .token-card ul li::before{
    content:"✦"; position:absolute; left:0; color:var(--gold); font-size:.72rem; top:.65rem;
  }

  /* ---------- Refreshing living closer ---------- */
  .closer{
    position:relative;
    min-height:80vh;
    display:flex; align-items:center;
    background:linear-gradient(180deg, rgba(8,15,11,.35), rgba(8,15,11,.55) 60%, #0F1F16 100%),
               url('../images/pool-woman.jpg') center 25% / cover no-repeat;
  }
  .closer h2{ font-size:clamp(2rem,4.6vw,3.6rem); font-weight:500; max-width:14ch; }

  /* ---------- Footer ---------- */
  footer{ background:#0A150F; border-top:1px solid rgba(198,161,91,.2); }
  footer a:hover{ color:var(--gold-soft); }
  .rera-box{
    border:1px solid rgba(198,161,91,.3);
    padding:1.2rem 1.4rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.78rem;
    color:var(--sage);
    line-height:1.9;
  }
  .disclaimer{ font-size:.74rem; color:#6E7E72; line-height:1.7; }

  .leaf-divider{
    display:flex; align-items:center; justify-content:center; gap:.8rem;
    color:var(--gold); margin:0 auto 1.4rem;
  }
  .leaf-divider .l{ width:36px; height:1px; background:rgba(198,161,91,.5); }

  /* ---------- Scroll-reveal animation ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  .reveal-stagger.is-visible .reveal-child{ opacity:1; transform:translateY(0); }
  .reveal-child{
    opacity:0; transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal-stagger.is-visible .reveal-child:nth-child(1){ transition-delay:.03s; }
  .reveal-stagger.is-visible .reveal-child:nth-child(2){ transition-delay:.11s; }
  .reveal-stagger.is-visible .reveal-child:nth-child(3){ transition-delay:.19s; }
  .reveal-stagger.is-visible .reveal-child:nth-child(4){ transition-delay:.27s; }
  .reveal-stagger.is-visible .reveal-child:nth-child(5){ transition-delay:.35s; }
  .reveal-stagger.is-visible .reveal-child:nth-child(6){ transition-delay:.43s; }

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-child{ opacity:1 !important; transform:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- Hero entrance ---------- */
  .hero-kicker, .hero h1, .hero-sub, .hero-cta, .stat-strip{
    opacity:0; transform:translateY(18px);
    animation:heroIn .9s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .hero h1{ animation-delay:.12s; }
  .hero-sub{ animation-delay:.26s; }
  .hero-cta{ animation-delay:.38s; }
  .stat-strip{ animation-delay:.5s; }
  @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){
    .hero-kicker, .hero h1, .hero-sub, .hero-cta, .stat-strip{ opacity:1; transform:none; animation:none; }
  }
.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.8); /* 80% opacity black */
}

/* Custom Dark Modal Styles */
.custom-dark-modal .modal-content {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333;
}

.custom-dark-modal .modal-header, 
.custom-dark-modal .modal-footer {
    border-color: #333;
}

.custom-dark-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Makes white X */
}

/* Form inputs in dark modal */
.custom-dark-modal .form-control {
    background-color: #2b2b2b;
    border-color: #444;
    color: #fff;
}

.custom-dark-modal .form-control:focus {
    background-color: #333;
    color: #fff;
}
.priBtn{background: var(--sage);color:#000;border:solid 1px var(--secondary);padding:10px 20px;border-radius:5px;}


/* CSS */
.mbtn {
  appearance: button;
  background-color: var(--sage);
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  text-decoration:none;
  width:auto;
}

.mbtn:after {
  background-clip: padding-box;
  background-color: var(--fern);
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.mbtn,
.mbtn:focus {
  user-select: auto;
}

.mbtn:hover:not(:disabled) {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.mbtn:disabled {
  cursor: auto;
}

.mbtn:active {
  border-width: 4px 0 0;
  background: none;
}
  @media (max-width: 767px) {
.footer-enquiryBtn {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    display: flex;
    z-index: 99;
    text-align: center;
    padding: 4px 2px;
    width: 100%;
    background: #FFF;
    border-radius: 0;
    justify-content: center;
  }
  .footer-enquiryBtn a {
    font-size: 13px;
    color: #fff;
    text-align: center;
    display: block;
    width: calc(50% - 4px);
    padding: 8px 5px;
    margin: 0 2px;
    border-radius: 4px;
    border: 1px solid rgb(0 0 0 / 15%);
    border-left: 0;
    background-color: var(--ink);
    color: #FFF;
    text-decoration: none;
}
  }