Enhance Pine Creek marketing site: real media, galleries, HOA info

Content & media
- Replace placeholder slides with optimized real estate photos (img/gallery)
- Rebuild hero video from the HD intro clip + drone "common area" clips
  (gate -> vineyard -> home front -> Vineyard sign -> pavilion -> fountain),
  cutting the private backyard segment; add mobile variant + poster
- Add "Community & Common Areas" aerial gallery and a community map
- Galleries split strictly by style: Vineyard = Tuscan homes only,
  Custom Homes = non-Tuscan estates

HOA / Homeowner Information
- Real board roster (sourced from pinecreekhoa.com) in a responsive table
- Homeowner Information document library (CC&Rs, Vineyard covenants, safety
  rules, architectural review form, delinquency policy, event reimbursement)
  linking the live PDFs; Premier Management Company reference
- Real general contact email

Design & UX
- Modern full-screen video hero with overlay, sticky nav, refined typography
- Click-to-zoom lightbox for all galleries (keyboard + swipe)
- Google Maps embed in the Kannapolis section
- Favicon set generated from the Pine Creek emblem (svg/png/ico)
- Positive reframe of the Custom Homes copy + lot-availability note
- SEO/Open Graph meta, lazy-loaded images, responsive board/doc layouts

Housekeeping
- SCSS source kept in sync (new partials: hero, sections, gallery, board,
  features); remove stale placeholders, old.index.php, and map artifact
- Add .gitignore (.DS_Store, .claude/, css map); fix docs (index.php -> index.html)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

css/components/_nav.scss

@@ -4,11 +4,17 @@ nav.main-nav {
     border-bottom-right-radius: 100% 64px;
     box-shadow: 0 4px 5px 0px rgba(0,0,0,.16);
     display: flex;
-    padding: 16px 0 32px;
+    padding: 12px 0 28px;
     position: fixed;
     width: 100%;
-    z-index: 1;
-  
+    z-index: 20;
+    transition: box-shadow .25s, padding .25s;
+
+    &.scrolled {
+      padding: 8px 0 20px;
+      box-shadow: 0 6px 14px 0px rgba(0,0,0,.18);
+    }
+
     .mobile-nav {
       align-items: center;
       display: flex;
@@ -50,7 +56,7 @@ nav.main-nav {
     
         &:hover {
           &> div {
-            background-color: $gray;
+            background-color: $gold;
           }
         }
     
@@ -67,6 +73,7 @@ nav.main-nav {
           & div:nth-child(2) {
             transform: translate(-17px);
             width: 40px;
+            opacity: 0;
           }
           & div:last-child {
             bottom: 1px;
@@ -108,7 +115,7 @@ nav.main-nav {
   
         a {
           @include Libre;
-  
+
           color: $black;
           display: inline-block;
           font-size: 11px;
@@ -117,10 +124,13 @@ nav.main-nav {
           text-decoration: none;
           text-transform: uppercase;
           width: 100%;
-  
+          transition: color .2s;
+
+          &:hover { color: $gold; }
+
           @media (max-width: $m-break) {
-            font-size: 14px;
-            padding-bottom: 16px;
+            font-size: 16px;
+            padding-bottom: 22px;
             width: 50%;
           }
         }
@@ -148,7 +158,9 @@ nav.main-nav {
         &.main-nav--logo {
           a {
             img {
-              margin: 0 8px;
+              margin: 0 14px;
+              height: 52px;
+              width: auto;
             }
           }