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

@@ -0,0 +1,99 @@
+// Section layout, headings, feature images, map, contact, footer
+
+.section {
+  padding-top: 72px;
+  padding-bottom: 72px;
+
+  @media (max-width: $s-break) { padding-top: 48px; padding-bottom: 48px; }
+}
+
+.eyebrow {
+  display: inline-block;
+  @include Libre;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  font-size: 12px;
+  color: $gold;
+  margin-bottom: 10px;
+
+  &.light { color: #d8c9a3; }
+}
+
+.section-title {
+  font-size: 36px;
+  margin: 0 0 16px;
+  line-height: 1.2;
+
+  @media (max-width: $s-break) { font-size: 28px; }
+}
+
+.section-subtitle {
+  color: $gray;
+  font-style: italic;
+  margin-bottom: 20px;
+}
+
+.section-lead {
+  max-width: 780px;
+  margin: 0 auto 8px;
+  color: $gray;
+  font-size: 17px;
+}
+
+.section-divider {
+  border: 0;
+  border-top: 1px solid rgba(171, 153, 109, 0.35);
+  margin: 0;
+}
+
+.feature-img {
+  width: 100%;
+  height: 440px;
+  object-fit: cover;
+  border-radius: 6px;
+  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
+
+  @media (max-width: $s-break) { height: 280px; }
+}
+
+// Community map
+.map-frame {
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(171, 153, 109, 0.3);
+  max-width: 900px;
+  margin: 0 auto;
+}
+.map-img { display: block; width: 100%; }
+
+// Contact
+.contact-section {
+  background: $black;
+  color: $white;
+
+  .section-title { color: $white; }
+  .section-lead { color: #cfcabd; }
+}
+.contact-btn {
+  margin-top: 18px;
+  background: $gold;
+  border-color: $gold;
+  color: $white;
+  @include Libre;
+  padding: 0.7rem 2rem;
+
+  &:hover { background: darken($gold, 10%); border-color: darken($gold, 10%); color: $white; }
+}
+
+// Footer
+.site-footer {
+  background: $cream;
+  text-align: center;
+  padding: 44px 0;
+  border-top: 1px solid rgba(171, 153, 109, 0.3);
+
+  .footer-logo { height: 70px; margin-bottom: 14px; }
+  .footer-tagline { @include Libre; color: $gray; margin-bottom: 6px; }
+  .footer-copy { color: $light-gray; font-size: 13px; margin: 0; }
+}