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/_board.scss

@@ -0,0 +1,78 @@
+// HOA board roster table (stacks into cards on mobile)
+.board-heading {
+  text-align: center;
+  font-size: 24px;
+  margin: 40px 0 24px;
+}
+
+.board-table {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  border-collapse: collapse;
+  background: $white;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
+
+  thead th {
+    background: $black;
+    color: $white;
+    @include Libre;
+    font-weight: 700;
+    text-align: left;
+    padding: 16px 22px;
+    font-size: 14px;
+    letter-spacing: 0.5px;
+  }
+
+  tbody td {
+    padding: 16px 22px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    vertical-align: middle;
+  }
+
+  tbody tr:nth-child(even) { background: $cream; }
+  tbody tr:hover { background: rgba(171, 153, 109, 0.12); }
+
+  td a { color: darken($gold, 10%); text-decoration: none; }
+  td a:hover { text-decoration: underline; }
+  td[data-label="Position"] { @include Libre; }
+
+  // Stacked cards on phones
+  @media (max-width: $xs-break) {
+    box-shadow: none;
+
+    thead { display: none; }
+    &, tbody, tr, td { display: block; width: 100%; }
+
+    tbody tr {
+      margin-bottom: 16px;
+      border: 1px solid rgba(171, 153, 109, 0.3);
+      border-radius: 6px;
+      overflow: hidden;
+      box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.4);
+
+      &:nth-child(even) { background: $white; }
+    }
+
+    tbody td {
+      border-top: none;
+      padding: 10px 18px;
+
+      &:first-child { padding-top: 16px; font-weight: 700; font-size: 17px; }
+      &:last-child { padding-bottom: 16px; }
+
+      &::before {
+        content: attr(data-label);
+        display: block;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 10px;
+        color: $gold;
+        margin-bottom: 2px;
+      }
+      &:first-child::before { content: ""; margin: 0; }
+    }
+  }
+}