:root { scroll-behavior: smooth; }
  body { background: #FAF9F5; }

  /* ---- Reveal on scroll ---- */
  .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-delay-1 { transition-delay: .08s; }
  .reveal-delay-2 { transition-delay: .16s; }
  .reveal-delay-3 { transition-delay: .24s; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ---- Fine hairline texture ---- */
  .blueprint-grid {
    background-image:
      linear-gradient(rgba(27,33,31,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(27,33,31,0.05) 1px, transparent 1px);
    background-size: 44px 44px;
  }

  /* ---- Nav ---- */
  #navbar { transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease; }
  #navbar.scrolled { box-shadow: 0 1px 0 rgba(27,33,31,0.08); }
  #navbar img {width: 100%;height: 40px;}


  /* ---- Property card hover ---- */
  .prop-card .prop-img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
  .prop-card:hover .prop-img { transform: scale(1.08); }
  .prop-card { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1); }
  .prop-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(27,33,31,0.28); }
  .prop-card.hidden-card { display: none; }

  .pillar-img { transition: transform 1s cubic-bezier(.22,.61,.36,1); }
  .pillar:hover .pillar-img { transform: scale(1.06); }
  .pillar { transition: box-shadow .4s ease; }
  .pillar:hover { box-shadow: 0 24px 48px -20px rgba(27,33,31,0.28); }

  /* ---- Signature: Deed / ticket card for featured project ---- */
  .deed-card {
    background: #FFFEFB;
    border: 1px solid #DDD6C7;
    position: relative;
  }
  .deed-perforation {
    background-image: radial-gradient(circle, #FAF9F5 3px, transparent 3.2px);
    background-size: 100% 18px;
    background-position: center;
    width: 1px;
  }
  .deed-perforation::before, .deed-perforation::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    background: #FAF9F5;
    border-radius: 999px;
    left: -10.5px;
  }
  .deed-perforation::before { top: -11px; }
  .deed-perforation::after { bottom: -11px; }
  .vertical-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.28em;
  }

  .deed-perforation-h {
    background-image: radial-gradient(circle, #FAF9F5 3px, transparent 3.2px);
    background-size: 18px 100%; background-position: center; height: 1px; position: relative;
  }
  .deed-perforation-h::before, .deed-perforation-h::after {
    content: ''; position: absolute; width: 22px; height: 22px;
    background: #FAF9F5; border-radius: 999px; top: -10.5px;
  }
  .deed-perforation-h::before { left: -11px; }
  .deed-perforation-h::after { right: -11px; }

  /* Marquee ribbon */
  .ribbon-track { animation: ribbon-scroll 26s linear infinite; }
  @keyframes ribbon-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Select carets */
  select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23565F5B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; }

  ::selection { background: #B08D4F; color: #FAF9F5; }

  a, button { outline-offset: 3px; }
  a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #B08D4F; }


  /* About Us Section */

  .fig-frame { position: relative; }
  .fig-frame::before {
    content: attr(data-fig);
    position: absolute;
    top: -1.6rem; left: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #565F5B;
  }

  .fig-corner { position: absolute; width: 14px; height: 14px; border: 1.5px solid #B08D4F; opacity: .9; }
  .fig-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .fig-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  .team-photo { filter: grayscale(0.85); transition: filter .5s ease, transform .5s ease; }
  .team-card:hover .team-photo { filter: grayscale(0); transform: scale(1.04); }

  /* Toggle switch for saved-search view */
  .view-toggle button.active { background: #1B211F; color: #FAF9F5; }

  /* Property Details */
  #jumpnav a.active { color: #1B211F; border-color: #B08D4F; }
  .bank-seal { border: 1px solid #DDD6C7; transition: border-color .3s ease, transform .3s ease; }
  .bank-seal:hover { border-color: #B08D4F; transform: translateY(-2px); }
  .amenity-tile { border: 1px solid #DDD6C7; transition: border-color .3s ease, background-color .3s ease; }
  .amenity-tile:hover { border-color: #B08D4F; background-color: #FFFEFB; color: #B08D4F;}
  .plan-tab.active { background: #1B211F; color: #FAF9F5; }
  .plan-panel { display: none; }
  .plan-panel.active { display: grid; }
  .gallery-item { cursor: zoom-in; overflow: hidden; }
  .gallery-img { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
  .gallery-item:hover .gallery-img { transform: scale(1.08); }
  #lightbox { transition: opacity .3s ease; }
  #lightbox.hidden-lb { opacity: 0; pointer-events: none; }

  @media(max-width:560px){
    #navbar img {
        height: 32px;
        width: 100%;
    }
  }