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

@@ -4,6 +4,7 @@ $white: #ffffff;
 $gray: #585858;
 $light-gray: #bebebe;
 $black: #231F20;
+$cream: #F7F4EE;
 
 // breakpoints
 $xs-break: 575px;
@@ -19,10 +20,17 @@ $l-break: 1199px;
   font-family: 'Lato', sans-serif;
 }
 
+* { box-sizing: border-box; }
+
 //btns
 .btn {
   @include Libre;
   font-size: 14px;
+  letter-spacing: 0.3px;
+  padding: 0.55rem 1.5rem;
+  border-radius: 2px;
+
+  & + .btn { margin-left: 0.5rem; }
 }
 
 .btn-primary {
@@ -46,20 +54,20 @@ $l-break: 1199px;
 
 body {
   @include Lato;
-  
+
   background-color: $white;
   color: $black;
   margin: 0;
   overflow-x: hidden;
+  line-height: 1.65;
 }
 
 // Enable native smooth-scrolling for in-page anchor navigation
-// This complements the JS smooth-scroll and works when JS is unavailable
 html {
   scroll-behavior: smooth;
 }
 
-p, a, li, span, div {
+p, a, li, span, div, td, th {
   @include Lato;
 }
 
@@ -67,18 +75,17 @@ h1, h2, h3, h4, h5, h6 {
   @include Libre;
 }
 
-.page-content {
-  padding: 110px 0 0 0;
-  position: relative;
-  top: -32px;
+img { max-width: 100%; }
 
-  .hero-text {
-    h1 {
-      font-size: 64px;
-      margin-top: 0;
-    }
-  }
+.page-content {
+  padding-top: 92px;
+
+  @media (max-width: $m-break) { padding-top: 72px; }
 }
 
 @import 'components/nav';
-@import 'components/slide';
+@import 'components/hero';
+@import 'components/sections';
+@import 'components/gallery';
+@import 'components/board';
+@import 'components/features';