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; }
+    }
+  }
+}

css/components/_features.scss

@@ -0,0 +1,178 @@
+// Availability note, Google map embed, homeowner documents, lightbox
+
+.availability-note {
+  border-left: 3px solid $gold;
+  padding: 4px 0 4px 16px;
+  margin: 22px 0;
+  color: $gray;
+  font-style: italic;
+
+  a { color: darken($gold, 10%); font-weight: 700; }
+}
+
+// Google map embed (Kannapolis)
+.map-embed {
+  margin-top: 40px;
+  position: relative;
+  width: 100%;
+  padding-top: 42%;
+  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);
+
+  iframe {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  @media (max-width: $s-break) { padding-top: 75%; }
+}
+
+// Homeowner documents
+.doc-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  max-width: 900px;
+  margin: 28px auto 0;
+
+  @media (max-width: $s-break) { grid-template-columns: 1fr; }
+}
+
+.doc-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  background: $white;
+  border: 1px solid rgba(171, 153, 109, 0.35);
+  border-radius: 6px;
+  text-decoration: none;
+  color: $black;
+  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.4);
+  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.45);
+    border-color: $gold;
+    text-decoration: none;
+    color: $black;
+  }
+}
+
+.doc-icon {
+  flex: 0 0 auto;
+  width: 46px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(171, 153, 109, 0.14);
+  color: darken($gold, 10%);
+
+  svg { width: 24px; height: 24px; }
+}
+
+.doc-text { display: flex; flex-direction: column; }
+.doc-title { @include Libre; font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
+.doc-meta { font-size: 12.5px; color: $gray; }
+.doc-note {
+  text-align: center;
+  color: $gray;
+  margin-top: 24px;
+  font-size: 15px;
+
+  a { color: darken($gold, 10%); font-weight: 700; }
+}
+
+// Lightbox
+.gallery-track.zoomable { cursor: zoom-in; }
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(20, 18, 18, 0.92);
+  padding: 24px;
+
+  &[hidden] { display: none; }
+
+  &-figure {
+    margin: 0;
+    max-width: 92vw;
+    max-height: 88vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &-img {
+    max-width: 92vw;
+    max-height: 80vh;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+    cursor: pointer;
+  }
+
+  &-caption {
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 13px;
+    margin-top: 12px;
+    text-align: center;
+    max-width: 700px;
+  }
+
+  &-close,
+  &-arrow {
+    position: absolute;
+    border: none;
+    background: rgba(255, 255, 255, 0.12);
+    color: $white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background 0.2s;
+
+    &:hover { background: rgba(255, 255, 255, 0.28); }
+  }
+
+  &-close {
+    top: 18px;
+    right: 18px;
+    width: 48px;
+    height: 48px;
+
+    svg { width: 26px; height: 26px; }
+  }
+
+  &-arrow {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 54px;
+    height: 54px;
+
+    svg { width: 28px; height: 28px; }
+
+    &.prev { left: 20px; }
+    &.next { right: 20px; }
+
+    @media (max-width: $xs-break) {
+      width: 44px;
+      height: 44px;
+      &.prev { left: 8px; }
+      &.next { right: 8px; }
+    }
+  }
+}

css/components/_gallery.scss

@@ -0,0 +1,78 @@
+// Image gallery / carousel
+.gallery {
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
+
+  &-track {
+    position: relative;
+    width: 100%;
+    height: 460px;
+
+    @media (max-width: $m-break) { height: 360px; }
+    @media (max-width: $xs-break) { height: 260px; }
+  }
+
+  &-img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 0.6s ease;
+
+    &.is-active { opacity: 1; }
+  }
+
+  &-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.85);
+    color: $black;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    transition: background 0.2s, transform 0.15s;
+
+    &:hover { background: $white; }
+    &:active { transform: translateY(-50%) scale(0.92); }
+
+    svg { width: 22px; height: 22px; }
+
+    &.prev { left: 14px; }
+    &.next { right: 14px; }
+  }
+
+  &-dots {
+    position: absolute;
+    bottom: 14px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    z-index: 3;
+  }
+
+  &-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    border: none;
+    padding: 0;
+    background: rgba(255, 255, 255, 0.55);
+    cursor: pointer;
+    transition: background 0.2s, transform 0.2s;
+
+    &.is-active { background: $gold; transform: scale(1.25); }
+  }
+}

css/components/_hero.scss

@@ -0,0 +1,85 @@
+// Full-bleed video hero
+.hero {
+  position: relative;
+  height: calc(100vh - 92px);
+  min-height: 480px;
+  max-height: 820px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  @media (max-width: $m-break) { height: calc(100vh - 72px); }
+
+  &-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+  }
+
+  &-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(35, 31, 32, 0.35) 0%, rgba(35, 31, 32, 0.15) 40%, rgba(35, 31, 32, 0.6) 100%);
+    z-index: 1;
+  }
+
+  &-content {
+    position: relative;
+    z-index: 2;
+    color: $white;
+    padding: 0 20px;
+  }
+
+  &-eyebrow {
+    @include Libre;
+    text-transform: uppercase;
+    letter-spacing: 5px;
+    font-size: 13px;
+    margin-bottom: 12px;
+    color: #f2e9d6;
+  }
+
+  &-title {
+    font-size: 84px;
+    margin: 0 0 14px;
+    line-height: 1;
+    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
+
+    @media (max-width: $s-break) { font-size: 52px; }
+  }
+
+  &-sub {
+    @include Libre;
+    font-size: 20px;
+    margin-bottom: 28px;
+    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
+
+    @media (max-width: $s-break) { font-size: 16px; }
+  }
+
+  &-btn { font-size: 15px; padding: 0.7rem 2rem; }
+
+  &-scroll {
+    position: absolute;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+    color: $white;
+    opacity: 0.85;
+    animation: heroBounce 2s infinite;
+
+    svg { width: 34px; height: 34px; }
+  }
+}
+
+@keyframes heroBounce {
+  0%, 100% { transform: translate(-50%, 0); }
+  50% { transform: translate(-50%, 8px); }
+}

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;
             }
           }
   

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; }
+}

css/components/_slide.scss

@@ -1,89 +0,0 @@
-.slides {
-    position: relative;
-
-    &.vineyard {
-      min-height: 300px;
-      img {
-        height: 300px;
-      }
-    }
-
-    &.house {
-      min-height: 400px;
-      img {
-        height: 400px;
-      }
-    }
-
-    
-
-    img {
-      border-radius: 5px;
-      object-fit: cover;
-      opacity: 1;
-      transition: .15s;
-      width: 100%;
-
-      &::selection {
-        background: rgba(255,255,255,0);
-      }
-
-      &.out {
-        opacity: 0;
-      }
-    }
-
-    .slides-arrow {
-      align-items: center;
-      background: $white;
-      border-radius: 5px;
-      cursor: pointer;
-      display: flex;
-      height: 50px;
-      justify-content: center;
-      left: -25px;
-      opacity: 1;
-      position: absolute;
-      right: auto;
-      top: 50%;
-      transform: translateY(-50%);
-      transition: .15s;
-      width: 50px;
-
-      &.out {
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      svg {
-        background-color: $light-gray;
-        border-radius: 3px;
-        color: $white;
-        height: 32px;
-        padding: 4px;
-        pointer-events: none;
-        transition: .1s;
-        width: 32px;
-      }
-      
-      &:last-child {
-        left: auto;
-        right: -25px;
-      }
-
-      &:hover {
-        svg {
-          background-color: darken($light-gray, 5%);
-          border-radius: 4px;
-          transform: scale(1.15);
-        }
-      }
-
-      &:active {
-        svg {
-          background-color: darken($light-gray, 10%);
-          transform: scale(1.1);
-        }
-      }
-    }
-  }

css/main.css

@@ -1,58 +1,85 @@
+/* ============================================================
+   Pine Creek — main stylesheet
+   Palette: gold #AB996D · black #231F20 · gray #585858
+            light-gray #bebebe · cream #F7F4EE · white #fff
+   Fonts: Libre Baskerville (headings) · Lato (body)
+   NOTE: css/main.scss is the source. No build tooling is present
+   locally, so this compiled file is edited directly and kept in
+   sync with the SCSS by hand.
+   ============================================================ */
+
+:root {
+  --gold: #AB996D;
+  --gold-dark: #8a7a52;
+  --black: #231F20;
+  --gray: #585858;
+  --light-gray: #bebebe;
+  --cream: #F7F4EE;
+  --white: #ffffff;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  font-family: "Lato", sans-serif;
+  background-color: var(--white);
+  color: var(--black);
+  margin: 0;
+  overflow-x: hidden;
+  line-height: 1.65;
+}
+
+html { scroll-behavior: smooth; }
+
+p, a, li, span, div, td, th { font-family: "Lato", sans-serif; }
+h1, h2, h3, h4, h5, h6 { font-family: "Libre Baskerville", serif; }
+
+img { max-width: 100%; }
+
+/* ---------- Buttons ---------- */
 .btn {
   font-family: "Libre Baskerville", serif;
   font-size: 14px;
+  letter-spacing: 0.3px;
+  padding: 0.55rem 1.5rem;
+  border-radius: 2px;
 }
+.btn + .btn { margin-left: 0.5rem; }
 
 .btn-primary {
-  background-color: #AB996D;
-  border-color: #AB996D;
+  background-color: var(--gold);
+  border-color: var(--gold);
 }
 .btn-primary:hover {
-  background-color: #917f54;
-  border-color: #917f54;
+  background-color: var(--gold-dark);
+  border-color: var(--gold-dark);
 }
-.btn-primary:active, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus {
+.btn-primary:active, .btn-primary:focus,
+.btn-primary:not(:disabled):not(.disabled):active,
+.btn-primary:not(:disabled):not(.disabled):active:focus {
   background-color: #81714a;
   border-color: #81714a;
   box-shadow: 0 0 0 0.2rem rgba(129, 113, 74, 0.5);
 }
 
-body {
-  font-family: "Lato", sans-serif;
-  background-color: #ffffff;
-  color: #231F20;
-  margin: 0;
-  overflow-x: hidden;
-}
-
-p, a, li, span, div {
-  font-family: "Lato", sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Libre Baskerville", serif;
-}
-
-.page-content {
-  padding: 110px 0 0 0;
-  position: relative;
-  top: -32px;
-}
-.page-content .hero-text h1 {
-  font-size: 64px;
-  margin-top: 0;
-}
-
+/* ============================================================
+   NAVIGATION
+   ============================================================ */
 nav.main-nav {
-  background: #ffffff;
+  background: var(--white);
   border-bottom-left-radius: 100% 64px;
   border-bottom-right-radius: 100% 64px;
   box-shadow: 0 4px 5px 0px rgba(0, 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 0.25s, padding 0.25s;
+}
+nav.main-nav.scrolled {
+  padding: 8px 0 20px;
+  box-shadow: 0 6px 14px 0px rgba(0, 0, 0, 0.18);
 }
 nav.main-nav .mobile-nav {
   align-items: center;
@@ -61,15 +88,11 @@ nav.main-nav .mobile-nav {
 }
 nav.main-nav .mobile-nav .mobile-nav--logo {
   display: none;
-  max-width: 100px;
-}
-nav.main-nav .mobile-nav .mobile-nav--logo img {
-  width: 100%;
+  max-width: 96px;
 }
+nav.main-nav .mobile-nav .mobile-nav--logo img { width: 100%; }
 @media (max-width: 991px) {
-  nav.main-nav .mobile-nav .mobile-nav--logo {
-    display: block;
-  }
+  nav.main-nav .mobile-nav .mobile-nav--logo { display: block; }
 }
 nav.main-nav .mobile-nav .hamburger {
   cursor: pointer;
@@ -80,37 +103,26 @@ nav.main-nav .mobile-nav .hamburger {
   z-index: 1;
 }
 nav.main-nav .mobile-nav .hamburger > div {
-  background-color: #231F20;
+  background-color: var(--black);
   border-radius: 2px;
-  height: 5px;
+  height: 4px;
   margin-bottom: 5px;
   transition: 0.25s;
   width: 30px;
 }
-nav.main-nav .mobile-nav .hamburger > div:last-child {
-  margin-bottom: 0;
-}
-nav.main-nav .mobile-nav .hamburger:hover > div {
-  background-color: #585858;
-}
+nav.main-nav .mobile-nav .hamburger > div:last-child { margin-bottom: 0; }
+nav.main-nav .mobile-nav .hamburger:hover > div { background-color: var(--gold); }
 @media (max-width: 991px) {
-  nav.main-nav .mobile-nav .hamburger {
-    display: block;
-  }
+  nav.main-nav .mobile-nav .hamburger { display: block; }
 }
 nav.main-nav .mobile-nav .hamburger.in div:first-child {
-  position: relative;
-  top: 1px;
-  transform: rotate(45deg);
+  position: relative; top: 1px; transform: rotate(45deg);
 }
 nav.main-nav .mobile-nav .hamburger.in div:nth-child(2) {
-  transform: translate(-17px);
-  width: 40px;
+  transform: translate(-17px); width: 40px; opacity: 0;
 }
 nav.main-nav .mobile-nav .hamburger.in div:last-child {
-  bottom: 1px;
-  position: relative;
-  transform: rotate(-45deg);
+  bottom: 8px; position: relative; transform: rotate(-45deg);
 }
 nav.main-nav ul {
   align-items: center;
@@ -121,8 +133,9 @@ nav.main-nav ul {
 }
 @media (max-width: 991px) {
   nav.main-nav ul {
-    background-color: #ffffff;
+    background-color: var(--white);
     flex-direction: column;
+    justify-content: center;
     height: 100%;
     left: 100%;
     padding: 24px;
@@ -130,10 +143,9 @@ nav.main-nav ul {
     top: 0;
     transition: 0.25s;
     width: 100%;
+    z-index: 5;
   }
-  nav.main-nav ul.in {
-    left: 0;
-  }
+  nav.main-nav ul.in { left: 0; }
 }
 nav.main-nav ul li {
   font-family: "Libre Baskerville", serif;
@@ -142,7 +154,7 @@ nav.main-nav ul li {
 }
 nav.main-nav ul li a {
   font-family: "Libre Baskerville", serif;
-  color: #231F20;
+  color: var(--black);
   display: inline-block;
   font-size: 11px;
   letter-spacing: 1px;
@@ -150,116 +162,485 @@ nav.main-nav ul li a {
   text-decoration: none;
   text-transform: uppercase;
   width: 100%;
+  transition: color 0.2s;
 }
+nav.main-nav ul li a:hover { color: var(--gold); }
 @media (max-width: 991px) {
-  nav.main-nav ul li a {
-    font-size: 14px;
-    padding-bottom: 16px;
-    width: 50%;
-  }
-}
-nav.main-nav ul li:nth-child(-n+3) a {
-  text-align: left;
+  nav.main-nav ul li a { font-size: 16px; padding-bottom: 22px; width: 50%; }
 }
+nav.main-nav ul li:nth-child(-n+3) a { text-align: left; }
+nav.main-nav ul li:nth-last-child(-n+3) a { text-align: right; }
 @media (max-width: 991px) {
-  nav.main-nav ul li:nth-child(-n+3) a {
-    text-align: left;
-  }
-}
-nav.main-nav ul li:nth-last-child(-n+3) a {
-  text-align: right;
+  nav.main-nav ul li:nth-child(-n+3) a,
+  nav.main-nav ul li:nth-last-child(-n+3) a { text-align: center; }
 }
+nav.main-nav ul li.main-nav--logo a img { margin: 0 14px; height: 52px; width: auto; }
 @media (max-width: 991px) {
-  nav.main-nav ul li:nth-last-child(-n+3) a {
-    text-align: left;
-  }
-}
-nav.main-nav ul li.main-nav--logo a img {
-  margin: 0 8px;
-}
-@media (max-width: 991px) {
-  nav.main-nav ul li.main-nav--logo {
-    display: none;
-  }
-}
-@media (max-width: 991px) {
-  nav.main-nav {
-    border-radius: 0;
-    padding: 24px 0;
-  }
+  nav.main-nav ul li.main-nav--logo { display: none; }
+  nav.main-nav { border-radius: 0; padding: 18px 0; }
 }
 
-.slides {
-  position: relative;
+/* ============================================================
+   LAYOUT / SECTIONS
+   ============================================================ */
+.page-content { padding-top: 92px; }
+@media (max-width: 991px) { .page-content { padding-top: 72px; } }
+
+.section { padding-top: 72px; padding-bottom: 72px; }
+@media (max-width: 767px) { .section { padding-top: 48px; padding-bottom: 48px; } }
+
+.eyebrow {
+  display: inline-block;
+  font-family: "Libre Baskerville", serif;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  font-size: 12px;
+  color: var(--gold);
+  margin-bottom: 10px;
 }
-.slides.vineyard {
-  min-height: 300px;
+.eyebrow.light { color: #d8c9a3; }
+
+.section-title { font-size: 36px; margin: 0 0 16px; line-height: 1.2; }
+.section-subtitle { color: var(--gray); font-style: italic; margin-bottom: 20px; }
+.section-lead {
+  max-width: 780px;
+  margin: 0 auto 8px;
+  color: var(--gray);
+  font-size: 17px;
 }
-.slides.vineyard img {
-  height: 300px;
+@media (max-width: 767px) { .section-title { font-size: 28px; } }
+
+.section-divider {
+  border: 0;
+  border-top: 1px solid rgba(171, 153, 109, 0.35);
+  margin: 0;
 }
-.slides.house {
-  min-height: 400px;
-}
-.slides.house img {
-  height: 400px;
-}
-.slides img {
-  border-radius: 5px;
-  object-fit: cover;
-  opacity: 1;
-  transition: 0.15s;
+
+.feature-img {
   width: 100%;
+  height: 440px;
+  object-fit: cover;
+  border-radius: 6px;
+  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
 }
-.slides img::selection {
-  background: rgba(255, 255, 255, 0);
-}
-.slides img.out {
-  opacity: 0;
-}
-.slides .slides-arrow {
-  align-items: center;
-  background: #ffffff;
-  border-radius: 5px;
-  cursor: pointer;
+@media (max-width: 767px) { .feature-img { height: 280px; } }
+
+/* ============================================================
+   HERO
+   ============================================================ */
+.hero {
+  position: relative;
+  height: calc(100vh - 92px);
+  min-height: 480px;
+  max-height: 820px;
+  overflow: hidden;
   display: flex;
-  height: 50px;
+  align-items: center;
   justify-content: center;
-  left: -25px;
-  opacity: 1;
+  text-align: center;
+}
+@media (max-width: 991px) { .hero { height: calc(100vh - 72px); } }
+
+.hero-video {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(35,31,32,0.35) 0%, rgba(35,31,32,0.15) 40%, rgba(35,31,32,0.6) 100%);
+  z-index: 1;
+}
+.hero-content {
+  position: relative;
+  z-index: 2;
+  color: var(--white);
+  padding: 0 20px;
+}
+.hero-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 5px;
+  font-size: 13px;
+  font-family: "Libre Baskerville", serif;
+  margin-bottom: 12px;
+  color: #f2e9d6;
+}
+.hero-title {
+  font-size: 84px;
+  margin: 0 0 14px;
+  line-height: 1;
+  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
+}
+.hero-sub {
+  font-size: 20px;
+  font-family: "Libre Baskerville", serif;
+  margin-bottom: 28px;
+  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
+}
+.hero-btn { font-size: 15px; padding: 0.7rem 2rem; }
+@media (max-width: 767px) {
+  .hero-title { font-size: 52px; }
+  .hero-sub { font-size: 16px; }
+}
+.hero-scroll {
+  position: absolute;
+  bottom: 24px; left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  color: var(--white);
+  opacity: 0.85;
+  animation: heroBounce 2s infinite;
+}
+.hero-scroll svg { width: 34px; height: 34px; }
+@keyframes heroBounce {
+  0%, 100% { transform: translate(-50%, 0); }
+  50% { transform: translate(-50%, 8px); }
+}
+
+/* ============================================================
+   GALLERY (carousel)
+   ============================================================ */
+.gallery {
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
+}
+.gallery-track {
+  position: relative;
+  width: 100%;
+  height: 460px;
+}
+@media (max-width: 991px) { .gallery-track { height: 360px; } }
+@media (max-width: 575px) { .gallery-track { height: 260px; } }
+.gallery-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+.gallery-img.is-active { opacity: 1; }
+
+.gallery-arrow {
   position: absolute;
-  right: auto;
   top: 50%;
   transform: translateY(-50%);
-  transition: 0.15s;
-  width: 50px;
+  width: 44px; height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.85);
+  color: var(--black);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+  transition: background 0.2s, transform 0.15s;
 }
-.slides .slides-arrow.out {
-  opacity: 0;
-  pointer-events: none;
+.gallery-arrow:hover { background: var(--white); }
+.gallery-arrow:active { transform: translateY(-50%) scale(0.92); }
+.gallery-arrow svg { width: 22px; height: 22px; }
+.gallery-arrow.prev { left: 14px; }
+.gallery-arrow.next { right: 14px; }
+
+.gallery-dots {
+  position: absolute;
+  bottom: 14px; left: 0; right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  z-index: 3;
 }
-.slides .slides-arrow svg {
-  background-color: #bebebe;
-  border-radius: 3px;
-  color: #ffffff;
-  height: 32px;
-  padding: 4px;
-  pointer-events: none;
-  transition: 0.1s;
-  width: 32px;
+.gallery-dot {
+  width: 9px; height: 9px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.55);
+  cursor: pointer;
+  transition: background 0.2s, transform 0.2s;
 }
-.slides .slides-arrow:last-child {
-  left: auto;
-  right: -25px;
+.gallery-dot.is-active { background: var(--gold); transform: scale(1.25); }
+
+/* ============================================================
+   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;
 }
-.slides .slides-arrow:hover svg {
-  background-color: #b1b1b1;
-  border-radius: 4px;
-  transform: scale(1.15);
+.map-img { display: block; width: 100%; }
+
+/* ============================================================
+   HOA BOARD TABLE
+   ============================================================ */
+.board-heading {
+  text-align: center;
+  font-size: 24px;
+  margin: 40px 0 24px;
 }
-.slides .slides-arrow:active svg {
-  background-color: #a5a5a5;
-  transform: scale(1.1);
+.board-table {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  border-collapse: collapse;
+  background: var(--white);
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
+}
+.board-table thead th {
+  background: var(--black);
+  color: var(--white);
+  font-family: "Libre Baskerville", serif;
+  font-weight: 700;
+  text-align: left;
+  padding: 16px 22px;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+}
+.board-table tbody td {
+  padding: 16px 22px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  vertical-align: middle;
+}
+.board-table tbody tr:nth-child(even) { background: var(--cream); }
+.board-table tbody tr:hover { background: rgba(171, 153, 109, 0.12); }
+.board-table td a { color: var(--gold-dark); text-decoration: none; }
+.board-table td a:hover { text-decoration: underline; }
+.board-table td[data-label="Position"] { font-family: "Libre Baskerville", serif; }
+
+/* Stack into cards on small screens */
+@media (max-width: 575px) {
+  .board-table { box-shadow: none; }
+  .board-table thead { display: none; }
+  .board-table, .board-table tbody, .board-table tr, .board-table td { display: block; width: 100%; }
+  .board-table 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);
+  }
+  .board-table tbody tr:nth-child(even) { background: var(--white); }
+  .board-table tbody td { border-top: none; padding: 10px 18px; }
+  .board-table tbody td:first-child { padding-top: 16px; font-weight: 700; font-size: 17px; }
+  .board-table tbody td:last-child { padding-bottom: 16px; }
+  .board-table tbody td::before {
+    content: attr(data-label);
+    display: block;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 10px;
+    color: var(--gold);
+    margin-bottom: 2px;
+  }
+  .board-table tbody td:first-child::before { content: ""; margin: 0; }
 }
 
-/*# sourceMappingURL=main.css.map */
+/* ============================================================
+   CONTACT
+   ============================================================ */
+.contact-section {
+  background: var(--black);
+  color: var(--white);
+}
+.contact-section .section-title { color: var(--white); }
+.contact-section .section-lead { color: #cfcabd; }
+.contact-btn {
+  margin-top: 18px;
+  background: var(--gold);
+  border-color: var(--gold);
+  color: var(--white);
+  font-family: "Libre Baskerville", serif;
+  padding: 0.7rem 2rem;
+}
+.contact-btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
+
+/* ============================================================
+   FOOTER
+   ============================================================ */
+.site-footer {
+  background: var(--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 {
+  font-family: "Libre Baskerville", serif;
+  color: var(--gray);
+  margin-bottom: 6px;
+}
+.footer-copy { color: var(--light-gray); font-size: 13px; margin: 0; }
+
+/* ============================================================
+   CUSTOM-HOMES AVAILABILITY NOTE
+   ============================================================ */
+.availability-note {
+  border-left: 3px solid var(--gold);
+  padding: 4px 0 4px 16px;
+  margin: 22px 0;
+  color: var(--gray);
+  font-style: italic;
+}
+.availability-note a { color: var(--gold-dark); font-weight: 700; }
+
+/* ============================================================
+   GOOGLE MAP EMBED (Kannapolis)
+   ============================================================ */
+.map-embed {
+  margin-top: 40px;
+  position: relative;
+  width: 100%;
+  padding-top: 42%;
+  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);
+}
+.map-embed iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+@media (max-width: 767px) { .map-embed { padding-top: 75%; } }
+
+/* ============================================================
+   HOMEOWNER DOCUMENTS
+   ============================================================ */
+.doc-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  max-width: 900px;
+  margin: 28px auto 0;
+}
+@media (max-width: 767px) { .doc-grid { grid-template-columns: 1fr; } }
+.doc-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  background: var(--white);
+  border: 1px solid rgba(171, 153, 109, 0.35);
+  border-radius: 6px;
+  text-decoration: none;
+  color: var(--black);
+  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.4);
+  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
+}
+.doc-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.45);
+  border-color: var(--gold);
+  text-decoration: none;
+  color: var(--black);
+}
+.doc-icon {
+  flex: 0 0 auto;
+  width: 46px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(171, 153, 109, 0.14);
+  color: var(--gold-dark);
+}
+.doc-icon svg { width: 24px; height: 24px; }
+.doc-text { display: flex; flex-direction: column; }
+.doc-title {
+  font-family: "Libre Baskerville", serif;
+  font-size: 16px;
+  line-height: 1.3;
+  margin-bottom: 3px;
+}
+.doc-meta { font-size: 12.5px; color: var(--gray); }
+.doc-note { text-align: center; color: var(--gray); margin-top: 24px; font-size: 15px; }
+.doc-note a { color: var(--gold-dark); font-weight: 700; }
+
+/* ============================================================
+   LIGHTBOX
+   ============================================================ */
+.gallery-track.zoomable { cursor: zoom-in; }
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(20, 18, 18, 0.92);
+  padding: 24px;
+}
+.lightbox[hidden] { display: none; }
+.lightbox-figure {
+  margin: 0;
+  max-width: 92vw;
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.lightbox-img {
+  max-width: 92vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+}
+.lightbox-caption {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 13px;
+  margin-top: 12px;
+  text-align: center;
+  max-width: 700px;
+}
+.lightbox-close,
+.lightbox-arrow {
+  position: absolute;
+  border: none;
+  background: rgba(255, 255, 255, 0.12);
+  color: var(--white);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+.lightbox-close:hover,
+.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.28); }
+.lightbox-close {
+  top: 18px; right: 18px;
+  width: 48px; height: 48px;
+}
+.lightbox-close svg { width: 26px; height: 26px; }
+.lightbox-arrow {
+  top: 50%;
+  transform: translateY(-50%);
+  width: 54px; height: 54px;
+}
+.lightbox-arrow svg { width: 28px; height: 28px; }
+.lightbox-arrow.prev { left: 20px; }
+.lightbox-arrow.next { right: 20px; }
+@media (max-width: 575px) {
+  .lightbox-arrow { width: 44px; height: 44px; }
+  .lightbox-arrow.prev { left: 8px; }
+  .lightbox-arrow.next { right: 8px; }
+}

css/main.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["main.scss","components/_nav.scss","components/_slide.scss"],"names":[],"mappings":"AAsBA;EAPE;EASA;;;AAGF;EACE,kBA3BK;EA4BL,cA5BK;;AA8BL;EACE;EACA;;AAGF;EAIE;EACA;EACA;;;AAIJ;EA5BE;EA+BA,kBA/CM;EAgDN,OA7CM;EA8CN;EACA;;;AAGF;EArCE;;;AAyCF;EA5CE;;;AAgDF;EACE;EACA;EACA;;AAGE;EACE;EACA;;;ACvEN;EACI,YDCI;ECAJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EARF;IASI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,kBDjCF;ECkCE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE,kBDjDL;;ACqDC;EA3BF;IA4BI;;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAMR;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI,kBDrFA;ICsFA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AAIJ;EDvFJ;EC0FM;EACA;;AAEA;ED7FN;ECgGQ,OD1GF;EC2GE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAZF;IAaI;IACA;IACA;;;AAKF;EACE;;AAEA;EAHF;IAII;;;AAMJ;EACE;;AAEA;EAHF;IAII;;;AAOF;EACE;;AAIJ;EAPF;IAQI;;;AAMR;EAjKJ;IAkKQ;IACA;;;;ACnKR;EACI;;AAEA;EACE;;AACA;EACE;;AAIJ;EACE;;AACA;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA,YFnCE;EEoCF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE,kBFtDK;EEuDL;EACA,OF1DA;EE2DA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;EACA;;AAKF;EACE;EACA","file":"main.css"}

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';