.github/copilot-instructions.md

@@ -3,15 +3,15 @@
 This is a small static-ish website whose source lives at the repository root. Keep suggestions focused, minimal, and specific to the existing patterns.
 
 - Entry / what to edit
-  - `index.php` is the site's entry point (contains the HTML structure, nav, hero, and sections). Edit content/structure here.
+  - `index.html` is the site's single page (nav, hero, sections, HOA board table, contact, footer). Edit content/structure here.
-  - `css/` contains SCSS source and compiled CSS. `css/main.scss` imports partials from `css/components/` (e.g. `_nav.scss`, `_slide.scss`).
+  - `css/main.css` is the **served** stylesheet and is edited directly. `css/main.scss` + `css/components/` partials (`_nav.scss`, `_hero.scss`, `_sections.scss`, `_gallery.scss`, `_board.scss`) are the SCSS source, kept in sync by hand. No build tooling is present locally; if you have Dart Sass, compile with `sass css/main.scss css/main.css`.
-  - `js/main.js` is the single client-side script — it controls the hamburger/nav, slides, and a light client-side prompt-based auth.
+  - `js/main.js` is the single client-side script — it controls the hamburger/nav, smooth-scroll, and the photo galleries (array-based fade carousel with arrows, dots, autoplay, and swipe).
 
 - Architecture & patterns (observable)
   - No framework/tooling files found (no package.json, build scripts). The project is organized as plain HTML/CSS/JS served from `index.php`.
   - SCSS pattern: variables at top of `main.scss` (colors, breakpoints), mixins for fonts (`Libre`, `Lato`), and partials under `css/components/` imported by `main.scss`.
   - JS pattern: single-file imperative DOM manipulation (`document.getElementById`, `querySelector`, event handlers). Use `const`/`let`, short arrow functions and maintain global-scope structure similar to `js/main.js`.
-  - Static assets: images in `img/` follow numeric patterns (e.g. `vineyard-0.jpg`, `house-0.jpg`) used by slide logic in `main.js`.
+  - Static assets: optimized photos live in `img/gallery/` (referenced explicitly in `index.html`); the hero video is `img/hero.mp4` / `img/hero-mobile.mp4` with `img/hero-poster.jpg`.
 
 - Development / preview notes (inferred)
   - No CI or build discovered. To preview locally you can serve the folder with a simple server. A safe, minimal option: run `php -S localhost:8000` from the project root and open `http://localhost:8000/`.
@@ -19,8 +19,7 @@ This is a small static-ish website whose source lives at the repository root. Ke
 
 - Conventions and gotchas to follow when changing code
   - Keep CSS partials modular. Add new component styles under `css/components/` and import them in `css/main.scss` rather than editing compiled `css/main.css` directly.
-  - JS uses simple DOM IDs/classes; prefer selecting elements by the same IDs/classes and follow the existing event-handler pattern (assign functions to `onclick`, small helpers like `toggleNav`, `openNav`, `closeNav`).
+  - JS uses simple DOM IDs/classes; prefer selecting elements by the same IDs/classes and follow the existing event-handler pattern (small helpers like `toggleNav`, `closeNav`, `scrollToTarget`, and the `.gallery` initializer).
-  - The project contains a client-side “light auth” in `js/main.js` that checks literal passwords (`'12345'`, `'abcde'`). Treat this as insecure; if asked to modify auth, recommend server-side changes and note security concerns.
 
 - When merging or editing `.github/copilot-instructions.md`
   - Preserve any human-authored guidance already present. If adding new items, keep them concise and cite files (e.g. `index.php`, `css/main.scss`, `css/components/_nav.scss`, `js/main.js`).

.gitignore

@@ -0,0 +1,9 @@
+# macOS
+.DS_Store
+**/.DS_Store
+
+# Local preview / tooling
+.claude/
+
+# SCSS build artifacts
+css/*.css.map

README.md

@@ -1,9 +1,43 @@
 # pine-creek-hoa
 
-Pine Creek website
+Public marketing website for the **Pine Creek** community in Kannapolis, NC.
 
-This is the next generation Public Website for the Pine Creek Community in Kannapolis, NC
+It is a fully static site (HTML/CSS/JS) designed to be hosted at no cost on
+**Cloudflare Pages**, and is responsive for desktop, tablet, and mobile.
 
-It is designed to be static in nature to host at no cost using cloudflare pages, and responsive in design to support clients on desktop, mobile, and tablet.
+## Structure
 
-Current Shell Includes overall design language and placeholder graphics.
+- `index.html` — the entire single-page site (nav, hero, sections, HOA board, contact, footer).
+- `css/main.css` — compiled, **served** stylesheet. Edited directly (no build tooling required).
+- `css/main.scss` + `css/components/*` — SCSS source, kept in sync with `main.css`.
+- `js/main.js` — mobile nav, smooth-scroll, and the photo galleries.
+- `img/` — images and the hero video (`hero.mp4`, `hero-mobile.mp4`, `hero-poster.jpg`),
+  optimized estate/vineyard photos in `img/gallery/`, and `community-map.jpg`.
+
+## Local preview
+
+Any static file server works, e.g.:
+
+```sh
+# Python
+python3 -m http.server 8080
+# or Docker (nginx)
+docker run --rm -p 8080:80 -v "$PWD":/usr/share/nginx/html:ro nginx:alpine
+```
+
+Then open http://localhost:8080/
+
+## Editing styles
+
+`css/main.css` is what the browser loads, so changes can be made there directly.
+If you have the Dart Sass CLI installed and prefer the SCSS source, recompile with:
+
+```sh
+sass css/main.scss css/main.css
+```
+
+## Updating the HOA board
+
+The board roster lives in a `<table class="board-table">` inside the
+`#home-owners` section of `index.html`. Replace the placeholder name/email cells
+with the real values (5 members: Name, Position, Email).

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,10 +4,16 @@ 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;
@@ -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;
@@ -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;
+            font-size: 16px;
-            padding-bottom: 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;
+  background-color: var(--gold);
-  border-color: #AB996D;
+  border-color: var(--gold);
 }
 .btn-primary:hover {
-  background-color: #917f54;
+  background-color: var(--gold-dark);
-  border-color: #917f54;
+  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;
+   NAVIGATION
-  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;
-}
-
 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;
+  max-width: 96px;
-}
-nav.main-nav .mobile-nav .mobile-nav--logo img {
-  width: 100%;
 }
+nav.main-nav .mobile-nav .mobile-nav--logo img { width: 100%; }
 @media (max-width: 991px) {
-  nav.main-nav .mobile-nav .mobile-nav--logo {
+  nav.main-nav .mobile-nav .mobile-nav--logo { display: block; }
-    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 {
+nav.main-nav .mobile-nav .hamburger > div:last-child { margin-bottom: 0; }
-  margin-bottom: 0;
+nav.main-nav .mobile-nav .hamburger:hover > div { background-color: var(--gold); }
-}
-nav.main-nav .mobile-nav .hamburger:hover > div {
-  background-color: #585858;
-}
 @media (max-width: 991px) {
-  nav.main-nav .mobile-nav .hamburger {
+  nav.main-nav .mobile-nav .hamburger { display: block; }
-    display: block;
-  }
 }
 nav.main-nav .mobile-nav .hamburger.in div:first-child {
-  position: relative;
+  position: relative; top: 1px; transform: rotate(45deg);
-  top: 1px;
-  transform: rotate(45deg);
 }
 nav.main-nav .mobile-nav .hamburger.in div:nth-child(2) {
-  transform: translate(-17px);
+  transform: translate(-17px); width: 40px; opacity: 0;
-  width: 40px;
 }
 nav.main-nav .mobile-nav .hamburger.in div:last-child {
-  bottom: 1px;
+  bottom: 8px; position: relative; transform: rotate(-45deg);
-  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 {
+  nav.main-nav ul.in { left: 0; }
-    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 {
+  nav.main-nav ul li a { font-size: 16px; padding-bottom: 22px; width: 50%; }
-    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: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 {
+  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: center; }
-  }
-}
-nav.main-nav ul li:nth-last-child(-n+3) a {
-  text-align: right;
 }
+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 {
+  nav.main-nav ul li.main-nav--logo { display: none; }
-    text-align: left;
+  nav.main-nav { border-radius: 0; padding: 18px 0; }
-  }
-}
-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;
-  }
 }
 
-.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 {
+.eyebrow.light { color: #d8c9a3; }
-  min-height: 300px;
+
+.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 {
+@media (max-width: 767px) { .section-title { font-size: 28px; } }
-  height: 300px;
+
+.section-divider {
+  border: 0;
+  border-top: 1px solid rgba(171, 153, 109, 0.35);
+  margin: 0;
 }
-.slides.house {
+
-  min-height: 400px;
+.feature-img {
-}
-.slides.house img {
-  height: 400px;
-}
-.slides img {
-  border-radius: 5px;
-  object-fit: cover;
-  opacity: 1;
-  transition: 0.15s;
   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 {
+@media (max-width: 767px) { .feature-img { height: 280px; } }
-  background: rgba(255, 255, 255, 0);
+
-}
+/* ============================================================
-.slides img.out {
+   HERO
-  opacity: 0;
+   ============================================================ */
-}
+.hero {
-.slides .slides-arrow {
+  position: relative;
-  align-items: center;
+  height: calc(100vh - 92px);
-  background: #ffffff;
+  min-height: 480px;
-  border-radius: 5px;
+  max-height: 820px;
-  cursor: pointer;
+  overflow: hidden;
   display: flex;
-  height: 50px;
+  align-items: center;
   justify-content: center;
-  left: -25px;
+  text-align: center;
-  opacity: 1;
+}
+@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: 44px; height: 44px;
-  width: 50px;
+  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 {
+.gallery-arrow:hover { background: var(--white); }
-  opacity: 0;
+.gallery-arrow:active { transform: translateY(-50%) scale(0.92); }
-  pointer-events: none;
+.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 {
+.gallery-dot {
-  background-color: #bebebe;
+  width: 9px; height: 9px;
-  border-radius: 3px;
+  border-radius: 50%;
-  color: #ffffff;
+  border: none;
-  height: 32px;
+  padding: 0;
-  padding: 4px;
+  background: rgba(255, 255, 255, 0.55);
-  pointer-events: none;
+  cursor: pointer;
-  transition: 0.1s;
+  transition: background 0.2s, transform 0.2s;
-  width: 32px;
 }
-.slides .slides-arrow:last-child {
+.gallery-dot.is-active { background: var(--gold); transform: scale(1.25); }
-  left: auto;
+
-  right: -25px;
+/* ============================================================
+   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 {
+.map-img { display: block; width: 100%; }
-  background-color: #b1b1b1;
+
-  border-radius: 4px;
+/* ============================================================
-  transform: scale(1.15);
+   HOA BOARD TABLE
+   ============================================================ */
+.board-heading {
+  text-align: center;
+  font-size: 24px;
+  margin: 40px 0 24px;
 }
-.slides .slides-arrow:active svg {
+.board-table {
-  background-color: #a5a5a5;
+  width: 100%;
-  transform: scale(1.1);
+  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 {
@@ -51,15 +59,15 @@ body {
   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 {
+img { max-width: 100%; }
-  padding: 110px 0 0 0;
-  position: relative;
-  top: -32px;
 
-  .hero-text {
+.page-content {
-    h1 {
+  padding-top: 92px;
-      font-size: 64px;
+
-      margin-top: 0;
+  @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';

docs/README.md

@@ -0,0 +1,19 @@
+# Homeowner Documents
+
+The Homeowner Information section of `index.html` currently links to the live
+PDFs hosted on **pinecreekhoa.com** (they could not be downloaded automatically
+because that site sits behind a browser-isolation proxy, but they open fine in a
+normal browser).
+
+When this site takes over the `pinecreekhoa.com` domain, make the documents
+self-hosted so the links keep working:
+
+1. Save these six PDFs from the current site into this `docs/` folder:
+   - `PineCreekCCR.pdf` — Pine Creek Neighborhood Covenants
+   - `vineyardccr.pdf` — The Vineyard Supplemental Covenants
+   - `Pine-Creek-Safety-Rules.pdf` — Safety Rules & Regulations
+   - `HOAApprovalForm.pdf` — Architectural Review Approval Form
+   - `Pine Creek Delinquency Policy.pdf` — Delinquency Policy
+   - `Pine-Creek-Request-for-Reimbursement-of-Costs-for-Community-Event.pdf` — Community Event Reimbursement Form
+2. In `index.html`, change each `.doc-card` `href` from
+   `https://www.pinecreekhoa.com/<file>` to `docs/<file>`.

favicon.svg

@@ -0,0 +1,219 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <rect width="100" height="100" rx="18" fill="#231F20"/>
+  <g transform="translate(-22.04,22.17) scale(0.2156)" fill="#AB996D">
+    <path d="M389.2,128.5c-0.3,0.6-10.6,1.5-12.2,0.9c-1.6-0.5-3.2-0.6-4.8-0.3c-2.5,0.3-4.9,0.5-7.4,0.5
+	c-5.1,0-5.5,0.8-0.9,1.5c1.6,0.2,16.4,2.6,17.1,3.2c0.9,0.6,1.9,1,3,1c1,0,1.9,0.3,1.9,0.8s-1,0.6-2.5,0.4s-2.5-0.1-2.5,0.3
+	s-0.5,0.6-1,0.6s-1-0.7-1-1.5l-0.9,1.7l-0.6-1.7c-0.9,0.9-15.2-0.3-16-0.6c-1.7-0.5-1.8,0.7-0.1,1.2c0.7,0.2,0.2,0.3-1.1,0.1
+	c-1.7-0.2-2.2,0-1.7,0.7s0.2,0.8-0.7,0.5c-2.1-0.9-3.7-0.8-3.7,0.2c0,1.4-2.7,1.2-3.4-0.3c-0.4-1-1.4-1.3-3.5-1.1
+	c-1.6,0.1-2.9-0.1-2.9-0.3l-2.2-0.9c-2-0.5-3.4,1.5-4,5.7c-0.4,2.5-1.2,98.8-1,101.4l-8,0.3c1.1-3.8,0.3-100.4,0.4-103.2
+	c0-2.9,0.1-6.1-5.4-5.2c-4.1,1.6-19.4,3.3-30.9,2.7c-13.1-2.2-6.9-3.1-0.5-2.5c2.8,0.9,11.8-0.4,8.2-0.1c16.5-4-0.9-4.2-1.8-4.4
+	s-6.3,1.2-7.1,1.4c-1,0.3-1.5,0-1.5-0.8c0-1-0.9-1.2-6.3-1.1c-4.9,0.1-6-0.1-4.8-0.7c1.6-0.8,0.8-2.7-0.9-2c-0.5,0.2-1.9-0.3-3-1.2
+	s-2.3-1.5-2.7-1.4s-0.7-0.4-0.7-1c0-1.5-3.1-3.1-4.9-2.7c-0.8,0.2-2.5-0.6-4-2.1c-2.5-2.2-2.5-2.4-0.6-2c1.2,0.3,3.3,0.6,4.8,0.8
+	s3.5,0.5,4.3,0.7c1,0.2,2-0.1,2.8-0.7c1-0.8,1.7-0.8,4.3-0.1c1.7,0.5,3.4,0.6,5.1,0.3c2.1-0.6,1.3-0.9-2.2-0.7
+	c-1.4,0-2.8-0.4-3.9-1.3c-1.3-1-3.6-3.2-4.6-2.7c-1.5,0.8-4.7,0.2-3.9-0.7c0.3-0.3-0.9-1.1-2.6-1.7s-1.3-5.9-0.9-5.9
+	s-0.1-0.7-1.2-1.5c-1-0.7-1.7-1.7-2-2.9c0-1.2,0.1-1.2,1.2-0.2c2,1.9,9,8.3,13,7.4c2-0.4,18.1,0.1,20.7-4.5c1.7-3-20.4-2.5-21.7-1.6
+	c-1.1,0.7-2.2-2.4-2.2-3.2c0-0.3,0.5-0.8,1-1c1-0.4-2.5-2-4.1-2.5c-0.5-0.1-1.1-1.6-1.4-3.2l-0.6-3l4.1,2.8c2.4,1.6,5,2.9,7.8,3.8
+	c3.2,0.9,11.8-1.1,12.3-2c0.4-0.7-9-2.9-10-2.7c-3.9-1.9-2.5-0.6-4.1-3.8c0.9-0.4-1.5-1.8-3.3-1.5c-2.2,0.4-2.6-2.3-2.6-3.4
+	c0-1.9-4.8-4.4-4.1-6.2l2.8-0.1c5,3.5,14.6,6.3,24.9,3.2c0.6-0.2,5,0.5-0.9-0.7c-0.5,0.2-1.2-0.1-1.4-0.6c-0.3-0.5,0.1-1.1,0.9-1.3
+	s1.4-0.7,1.4-1.2s-6.2,0-7.1,0.2c-1.9,0.5-13.5-5.5-11.9-6.2c2.1-0.9,1.1-1.8-1.1-1c-1.8,0.7-2,0.6-1.5-0.3c0.3-0.4,0.1-1-0.3-1.3
+	c-0.1-0.1-0.2-0.1-0.3-0.1c-0.7-0.2-0.5-0.4,0.4-0.4s1.6-0.5,1.6-1.1s-0.5-0.9-1.2-0.7c-0.7,0.2-1.4-0.1-1.8-0.7
+	c-1.1-2,0.6-2.3,3.9-0.6c1.3,0.7,2.6,1.3,4,1.7c1.1,0.3,2.2,0.7,3.3,1.3c2.9,1.4,10.6,1.9,15.3,3.6c-0.3-0.3,3,0,4,0
+	c1.5,0,1.3-1.8-0.7-2.8c-1.2-0.6-10.6-4.2-10.6-4.7s-1.2-1-2.7-1.1s-2.7-0.6-2.7-1.2s-1-1.1-2.2-1.2s-2-0.5-1.7-0.8s0.1-0.6-0.5-0.6
+	s-0.8-0.3-0.5-0.7l15.1,3c0.7-0.3-0.5-3.9-1.5-4.6c-0.8-0.5-6.9-0.7-6.7-1.2s-0.3-1.1-1.2-1.4c-1.5-0.4-1.6-0.5-0.3-1.1
+	s1.2-0.7-0.3-0.7s-1.6-0.2-0.5-1.4c1.6-1.7,14.2,2.9,14.9,4.6c2.8,0.2-7.2-6.9-6.4-6.9c2,0.5,4,1.3,5.8,2.5c1.3,0.9,2.3,0.9,2.3,0.6
+	s5.7,1.4,7.2,1.8c1.7,0.4,0.5-2.3,2.1-2.8c3.1-1-0.3-3.7-3.4-3.7c-1.4,0-3.6,1.2-4.5,0.3s-1.7-1.4-1.8-1.2s-1.1-0.1-2.2-0.5
+	c-1.8-0.7-1.8-0.8-0.2-0.8c2.2,0,1.9-2.8-0.6-4.8c-0.9-0.7-1.2-1.3-0.7-1.3s0.7-0.5,0.3-1.2c-0.6-1.1-0.5-1.1,1.2-0.2
+	c1,0.6,2.8,1.7,4,2.4c6.7,4.4,15.1,6.3,16.5,4.9c0.5-0.6,0.5-2.3-0.6-2c-0.9,0.2-1.6,0.2-1.6-0.2s-5.2-1.5-6.2-1.7s-2-0.9-2-1.7
+	c0-1.3-3.7-0.8-5.9-0.4c-0.5,0.1-0.5-0.2,0.2-0.7c0.9-0.6,0.6-1.2-1.3-2.4c-1.4-0.9-2.2-1.9-1.9-2.3s0.1-0.7-0.6-0.7
+	c-0.9,0-0.9-0.2-0.2-0.7s2-0.1,4.4,1.4c3.7,2.3,6.9,2.7,8.3,1.7c0.9-0.6-1-3.2-2.7-3.2c-2.2,0-3.9-4.7-2.7-6.2
+	c-0.8-1,2.9,0.4,6.1,1.5c2,0.7,5-1.4,7.2-1.2c3.9,0.4,2.3-0.8,1.8-2.2c-0.4-1.1-0.9-1.3-1.6-0.8c-0.6,0.4-5.3,0.3-6.5,0.3
+	c-2,0-0.7,0.5-0.2-1.5s7.6-2.5,5-2.5l-0.8-2.6c1.2,0.5,2.4,0.8,3.7,1.1c1.5,0,0.2-2.4-1.3-2.4c-0.8,0-1.4-0.4-1.2-0.8
+	s1.2-0.2,0.1-0.4s4.8-1.6,4.8-2.4l0.3-1.2c3.8-2.7,4.3-5.8,2.8-5.1l4-2.7c0.6,0,1,0.4,1.1,1l2,2c-1.1,0.2-1.7,0.7-1.4,1.1
+	c0.4,0.4,0.9,0.5,1.4,0.3c0.5-0.2,1.1,0.2,1.5,0.9c0.5,0.8,1.4,1.3,2.3,1.2c2.4-0.1,2.4,2.6-0.1,4.5c-1.7,1.2-1.7,1.4-0.4,1.1
+	c1.1-0.3,1.7-0.1,1.7,0.5s0.9,0.9,2.8,0.8l2.2,2c-0.8,0.4-1.1,1.1-0.7,1.5s-0.6,1.1-2.3,1.6s-3,1.1-3,1.4s-0.7,0.9-1.6,1.5
+	c-1.4,1-1.2,1,1.9,0.9c1.9-0.1,3.3-0.3,3.1-0.5s1.4-1,3.4-1.8c3.5-1.3,3.7-1.3,3.3-0.1c-0.3,0.7-1,1.2-1.8,1.3
+	c-0.8,0-1.4,0.7-1.4,1.4c0,1-0.5,1.3-1.4,1.1c-1.2-0.3-3.8,2-2.6,3.5l4.4,0.5c1.9-0.1,6.2-1,6-1.2s-0.5,0.2,0.5-0.3
+	c1.6-0.7,1.8-0.6,1.4,0.8c-0.5,1.8,1.5,3.3,4.8,3.6c4.2,0.4,2.9,0.9-2.1,0.8c-2.8-0.1-3.8,3.4-8.8,2.8l-1.5,0.8c-1.1,0-2,0.9-2,2
+	c0,0.1,0,0.1,0,0.2v0.7h6.2l1.3,0.9c4.4,0.2,9.8-2.7,10-1.8c0.8,2.8,3.9,1,4.3,1.4s0.1,0.7-0.5,0.7s-1,0.6-0.5,1.7
+	c0.7,1.9-0.3,2.2-3.4,1c-1.5-0.5-1.8-0.5-1.3,0.4c0.3,0.6-9.9,2-10.5,2.5c-1.5,1.2,1,2,4.5,1.3c2.2-0.4,8-2.5,11-0.7
+	c-0.2,1,6.7,0,7.6,1.8c-2.7,1-5.9,0.9-6.6,2.2c-1.2,2.2-6.4,0.4-7.3,5l0.8,2.1c0,0.6-0.5,1.1-1.1,1.2c-0.6,0-0.8,0.3-0.4,0.7
+	c0.6,0.4,1.4,0.6,2.1,0.3c0.8-0.2,2.3,0.4,3.5,0.9l1.6-1.8c1.9-1.6,4.3,0.2,7.4-1.9c6.3-2.7,5.3,1.2,9.2,0.7
+	c1.1,1.2-11.6,6.6-13.4,6.7c-1.5,0-1.5,0.1-0.2,0.7c1.3,0.5,1.3,0.7,0,0.8c-0.8,0.1-1.5,0.1-2.3,0c-0.5-0.1-1.3,0.7-1,1.2l-7.6,1.9
+	c-2.7,1.9-1.7,3.9,14.6,1.4c2.6-0.6,5.1-1.5,7.5-2.7c4.1-2,4,0.8,4,1.8c0,0.2-0.8,0.9-1.7,1.4s-1.3,0.8-0.7,0.6s1.1,0.3,1.2,1
+	c0.1,1-0.1,1.2-1.1,0.6c-1.7-1-2.9-0.1-1.4,1.1c0.8,0.7,0.7,0.9-0.5,0.9c-0.9,0-1.6,0.3-1.6,0.7s-0.7,0.7-1.5,0.7
+	c0,0-8.8,0.3-9.7,1.8s-3,0.6-3.9-0.3c-1.2-1.1-1,4.9,3.5,3.6c1.5-0.4,0.3-2.5,3.9-2.2s9.2,2.7,10.2,1.6s11.2-2.2,11.7-3
+	s2.1-3.4,2.8-2.4s0.5,5.8-1.5,6.4c-3.5,1.5-6.8,3.2-10,5.3c-1.9,1.4-4.2,2.1-6.6,1.9c-2.6-0.3-8.2,1.5-8.2,1.5s-1.1,2.4,0,2.7
+	s8.9,1.6,10,1.2s1.5-0.7,3.5-1.6s4.6-3.4,5.2-3.4c1.1-0.2,2.3-0.4,3.4-0.7c0.6,1.2,4.1,1.4,5.1,0.3c1.2-1.3,2.2-0.7,1.7,1.1
+	c-0.4,1.3-1,1.7-2.3,1.4c-1-0.3-2.1,0.2-2.5,1.1c-1,2.3-2.9,3.3-4.3,2.3c-0.9-0.6-1-0.5-0.5,0.5s0.4,1.2-0.9,0.9
+	c-1.4-0.1-2.8,0.3-3.9,1.2c-1.3,1-2.9,1.5-4.5,1.7c-1.2,0-2.2,0.3-2.2,0.6c0,1.2,8.8,2,10.3,0.9c0.4-0.3,0.9-0.5,1.4-0.6
+	c0.4,0,3.1-1.1,3.9-1.3c-0.4,0.8-0.6,1.6-0.6,2.5l-2.5,1.5l-5.2,3.7l-11.3,0.2l4.4,3.4c1.1,0.2,2.2,0.2,3.3,0
+	c1.8-0.3,3.6-0.5,5.4-0.6l5.4-2.8c3.8-1,14.2-1.1,9.9,2.4c-1.5,1.2-3.8,3.3-6.4,2.2s-5.3,3.7-11,4.5s-8.2,1-10.7,0.9
+	s2.8,2.1,8.5,2.2s6.9,3.8,10.5,2.5s9.5-2.1,10.8-1.8s3.6,1.4-0.8,2.4s-6.6,2.6-10.4,2.8s-9.5-0.4-8.5,0.7s-4.4,0.2-3.1,1.2
+	s5.9,1.2,7.9,1.2S389.2,128.5,389.2,128.5 M325.9,130c1.9-0.5,1.9-0.7,0.5-0.9c-1-0.1-1.7-0.6-1.7-1s-0.4-0.5-1.2-0.1
+	c-1.3,0.7-2.9,0.7-6.1-0.2c-1.5-0.4-1.8-0.3-1.3,0.6c0.3,0.4,0.2,1-0.3,1.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.8,0.2-0.7,0.4,0.3,0.4
+	C320.7,130.6,324,130.5,325.9,130 M293.1,88.1c1.9-0.5,1.9-0.7,0.4-0.9c-1-0.1-1.7-0.6-1.7-1s-0.4-0.5-1.2,0
+	c-1.3,0.7-2.9,0.7-6.1-0.2c-1.5-0.4-1.8-0.3-1.3,0.6c0.3,0.4,0.2,1-0.2,1.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.8,0.2-0.7,0.4,0.3,0.4
+	C287.9,88.7,291.1,88.7,293.1,88.1 M382.2,122.2c2.1-0.3,2.3-1.5,0.2-1.5c-0.8,0-1.5-0.3-1.5-0.6c0-1-7.2-0.5-8.8,0.5
+	c-1.1,0.7-1.6,0.7-2.7-0.3s-1.3-1.1-0.8,0c0.3,0.7,0.1,1.2-0.5,1.2s-1.1,0.3-1.1,0.7C367.1,122.7,378.3,122.8,382.2,122.2
+	 M377.2,103.2c2.1-0.3,2.3-1.5,0.2-1.5c-0.8,0-1.5-0.3-1.5-0.6c0-0.9-7.2-0.5-8.8,0.5c-1.1,0.7-1.6,0.7-2.7-0.3
+	c-1.3-1.1-1.3-1.1-0.8,0c0.3,0.7,0.1,1.2-0.5,1.2s-1.1,0.3-1.1,0.7C362.1,103.6,373.3,103.7,377.2,103.2 M294,125
+	c1-0.5,0.3-0.8-2.9-1.4c-3.4-0.6-4.4-0.6-5,0.1s-1.1,0.7-2.3,0c-0.8-0.5-1.8-0.7-2.7-0.6c-0.6,0.1,0.3,0.8,2.2,1.4
+	c2.5,0.8,3.7,0.9,4.6,0.4c0.7-0.6,1.7-0.6,2.4,0C291.8,125.8,292.2,125.8,294,125 M363,124.5c1-0.4,0.3-0.8-2.9-1.4
+	c-3.4-0.6-4.4-0.6-5,0.1s-1.1,0.7-2.3,0c-0.8-0.5-1.8-0.7-2.7-0.6c-0.6,0.2,0.3,0.8,2.2,1.4c2.5,0.8,3.7,0.9,4.6,0.4
+	c0.7-0.6,1.7-0.6,2.5,0C360.8,125.3,361.2,125.3,363,124.5 M342.8,16.7c1-0.5,0.3-0.8-2.9-1.4c-3.4-0.6-4.4-0.6-5,0.1
+	c-0.6,0.7-1.1,0.7-2.3,0c-0.8-0.5-1.8-0.7-2.7-0.6c-0.7,0.1,0.3,0.8,2.2,1.4c2.5,0.8,3.7,0.9,4.6,0.4c0.7-0.6,1.7-0.6,2.4,0
+	C340.6,17.4,341,17.5,342.8,16.7 M353.1,132.7c1-0.4,0.3-0.8-2.9-1.4c-3.4-0.6-4.4-0.6-5,0.1s-1.1,0.7-2.3,0
+	c-0.8-0.5-1.8-0.7-2.7-0.6c-0.6,0.1,0.3,0.8,2.2,1.4c2.5,0.8,3.7,0.9,4.6,0.4c0.7-0.5,1.7-0.5,2.4,0.1
+	C350.9,133.5,351.3,133.6,353.1,132.7 M311.7,61.2c8.9,0.5,14.9-2.9,7.8-4.4c-0.9-0.2-1.6,0.2-1.7,0.9c-0.1,0.9-0.8,1-2.3,0.6
+	c-1.2-0.3-2.2-0.3-2.3,0.1s-0.5,0.4-1,0.1c-0.5-0.3-1.1-0.3-1.5,0c-0.9,0.6-3.6-0.6-4.4-1.9c-0.4-0.6-0.6-0.6-0.8,0s0.4,1.2,1.1,1.5
+	s1,0.9,0.6,1.2s-1.1,0.2-1.7-0.4c-0.7-0.6-1.7-0.8-2.5-0.6c-1.3,0.3-1.2,0.4,0.4,0.8s1.6,0.5,0.3,0.8
+	C301.4,60.4,304.2,60.9,311.7,61.2 M364.1,85.8c8.9,0.5,14.9-2.9,7.8-4.4c-0.9-0.2-1.6,0.2-1.7,0.9c-0.1,0.9-0.8,1-2.3,0.6
+	c-1.2-0.3-2.2-0.3-2.3,0.1s-0.5,0.4-1,0.1c-0.5-0.3-1.1-0.3-1.5,0c-0.8,0.6-3.6-0.6-4.4-1.9c-0.4-0.6-0.6-0.6-0.8,0s0.4,1.2,1.1,1.5
+	s1,0.9,0.6,1.2s-1.1,0.2-1.7-0.4c-0.7-0.6-1.7-0.8-2.5-0.6c-1.3,0.3-1.2,0.4,0.4,0.8s1.7,0.5,0.3,0.8
+	C353.8,84.9,356.6,85.4,364.1,85.8 M298,117c8.9,0.1,14.7-3.6,7.5-4.8c-0.9-0.2-1.6,0.2-1.7,0.9c-0.1,0.9-0.7,1.1-2.3,0.7
+	c-1.2-0.3-2.2-0.2-2.3,0.2s-0.5,0.5-1,0.2c-0.5-0.3-1.1-0.3-1.5,0c-0.8,0.6-3.6-0.4-4.5-1.7c-0.4-0.6-0.6-0.6-0.8,0s0.5,1.1,1.2,1.5
+	s1.1,0.9,0.7,1.2s-1.1,0.2-1.7-0.3c-0.7-0.5-1.7-0.7-2.6-0.4c-1.3,0.3-1.2,0.5,0.4,0.7s1.7,0.4,0.4,0.8
+	C287.6,116.5,290.4,116.8,298,117"/>
+    <path d="M260.5,175c-0.2,0.4-7.8,1.1-8.9,0.6c-1.1-0.3-2.3-0.4-3.5-0.2c-1.8,0.2-3.6,0.4-5.4,0.4c-3.7,0-4,0.6-0.7,1.1
+	c1.2,0.2,11.9,1.9,12.4,2.3c0.7,0.4,1.4,0.7,2.2,0.7c0.7,0,1.4,0.2,1.4,0.6s-0.8,0.4-1.8,0.3s-1.8,0-1.8,0.2s-0.3,0.4-0.7,0.4
+	s-0.7-0.5-0.7-1.1l-0.7,1.2l-0.5-1.2c-0.6,0.6-11.1-0.2-11.6-0.4c-1.2-0.3-1.3,0.5-0.1,0.9c0.5,0.2,0.1,0.2-0.8,0.1
+	c-1.3-0.2-1.6,0-1.3,0.5s0.1,0.6-0.5,0.4c-1.5-0.7-2.7-0.6-2.7,0.1c0,1.1-2,0.9-2.5-0.2c-0.3-0.7-1-0.9-2.6-0.9
+	c-1.2,0.1-2.1,0-2.1-0.2L226,180c-1.5-0.4-2.5,1.1-2.9,4.1c-0.3,1.8-0.9,71.9-0.7,73.8l-5.8,0.2c0.8-2.7,0.2-73.1,0.3-75.1
+	s0.1-4.4-3.9-3.8c-3,1.2-14.1,2.4-22.5,2c-9.6-1.6-5-2.3-0.3-1.8c2,0.6,8.6-0.3,6-0.1c12-2.9-0.6-3-1.3-3.2s-4.6,0.9-5.2,1
+	s-1.1,0-1.1-0.6c0-0.8-0.6-0.9-4.6-0.8c-3.6,0-4.4-0.1-3.5-0.5c1.2-0.6,0.6-1.9-0.6-1.4c-0.4,0.2-1.4-0.2-2.2-0.9
+	c-0.5-0.5-1.2-0.8-1.9-1c-0.3,0.1-0.5-0.3-0.5-0.8c0-1.1-2.2-2.3-3.6-1.9c-0.6,0.2-1.8-0.5-2.9-1.5c-1.8-1.6-1.9-1.7-0.4-1.4
+	c0.9,0.2,2.4,0.4,3.5,0.6s2.5,0.3,3.1,0.5c0.7,0.1,1.4-0.1,2-0.5c0.7-0.6,1.2-0.6,3.2-0.1c1.2,0.4,2.5,0.5,3.7,0.2
+	c1.6-0.4,0.9-0.6-1.6-0.5c-1,0-2-0.3-2.8-0.9c-0.9-0.8-2.6-2.3-3.3-1.9c-1.1,0.6-3.4,0.2-2.8-0.5c0.2-0.2-0.6-0.8-1.9-1.2
+	s-1-4.3-0.6-4.3s-0.1-0.5-0.9-1.1c-0.7-0.5-1.3-1.2-1.5-2.1c0-0.9,0.1-0.9,0.9-0.2c1.5,1.4,6.6,6,9.5,5.4c1.4-0.3,13.2,0.1,15.1-3.2
+	c1.3-2.2-14.8-1.8-15.8-1.1c-0.8,0.5-1.6-1.8-1.6-2.4c0-0.2,0.3-0.5,0.7-0.7c0.8-0.3-1.8-1.5-3-1.8c-0.4-0.1-0.8-1.1-1-2.4l-0.4-2.2
+	l3,2c1.8,1.2,3.7,2.1,5.6,2.8c2.4,0.7,8.6-0.8,9-1.4s-6.6-2.1-7.3-2c-2.9-1.4-1.8-0.4-3-2.8c0.7-0.3-1.1-1.3-2.4-1.1
+	c-1.6,0.2-1.9-1.7-1.9-2.5c0-1.4-3.5-3.2-3-4.5l2-0.1c3.6,2.6,10.6,4.6,18.1,2.3c0.4-0.1,3.7,0.3-0.6-0.5c-0.4,0.1-0.8-0.1-1-0.4
+	c-0.2-0.4,0.1-0.8,0.6-1s1-0.5,1-0.9s-4.5,0-5.1,0.2c-1.4,0.4-9.8-4-8.7-4.5c1.5-0.6,0.8-1.3-0.8-0.7c-1.3,0.5-1.5,0.4-1.1-0.2
+	c0.2-0.3,0.1-0.7-0.2-0.9c-0.1,0-0.1-0.1-0.2-0.1c-0.5-0.1-0.4-0.3,0.3-0.3s1.1-0.4,1.1-0.8s-0.4-0.7-0.9-0.5
+	c-0.5,0.1-1-0.1-1.3-0.5c-0.8-1.5,0.5-1.7,2.8-0.4c0.9,0.5,1.9,1,2.9,1.3c0.8,0.2,1.6,0.5,2.4,0.9c2.1,1,7.7,1.4,11.1,2.6
+	c-0.2-0.2,2.2,0,2.9,0c1.1,0,0.9-1.3-0.5-2c-0.9-0.4-7.7-3.1-7.7-3.4s-0.9-0.7-2-0.8s-2-0.5-2-0.9s-0.7-0.8-1.6-0.9
+	s-1.4-0.4-1.2-0.6s0-0.5-0.4-0.5s-0.6-0.2-0.4-0.5l11,2.2c0.5-0.2-0.4-2.8-1.1-3.3s-5-0.5-4.8-0.8s-0.2-0.8-0.9-1
+	c-1.1-0.3-1.1-0.4-0.2-0.8s0.9-0.5-0.2-0.5s-1.1-0.2-0.4-1c1.1-1.3,10.4,2.1,10.9,3.4c2,0.1-5.2-5-4.7-5c1.5,0.4,2.9,1,4.2,1.8
+	c1,0.7,1.7,0.7,1.7,0.4s4.2,1,5.3,1.3s0.3-1.7,1.5-2.1c2.3-0.7-0.2-2.7-2.5-2.7c-1,0-2.6,0.8-3.2,0.2s-1.2-1-1.3-0.9s-0.8,0-1.6-0.3
+	c-1.3-0.5-1.3-0.6-0.2-0.6c1.6,0,1.4-2.1-0.4-3.5c-0.7-0.5-0.9-1-0.5-1s0.5-0.4,0.2-0.9c-0.4-0.8-0.3-0.8,0.9-0.1
+	c0.7,0.4,2,1.2,2.9,1.7c4.9,3.2,11.1,4.6,12,3.6c0.4-0.4,0.4-1.7-0.5-1.4c-0.7,0.2-1.2,0.1-1.2-0.1s-3.8-1.1-4.6-1.2
+	s-1.4-0.7-1.4-1.3c0-1-2.7-0.6-4.3-0.3c-0.4,0.1-0.3-0.1,0.1-0.5c0.6-0.5,0.4-0.9-1-1.8c-1-0.6-1.6-1.4-1.4-1.7s0.1-0.5-0.4-0.5
+	s-0.7-0.2-0.1-0.5s1.5-0.1,3.2,1c2.7,1.7,5.1,1.9,6.1,1.3c0.6-0.4-0.8-2.3-2-2.3c-1.6,0-2.8-3.4-2-4.5c-0.6-0.7,2.1,0.3,4.4,1.1
+	c1.5,0.5,3.6-1,5.3-0.9c2.8,0.3,1.7-0.6,1.3-1.6c-0.3-0.8-0.6-0.9-1.2-0.6s-3.9,0.2-4.8,0.2c-1.4,0-0.5,0.4-0.1-1.1s5.5-1.8,3.7-1.8
+	l-0.6-1.9c0.9,0.3,1.8,0.6,2.7,0.8c1.1,0,0.1-1.8-1-1.8c-0.6,0-1-0.3-0.9-0.6s0.9-0.1,0.1-0.3s3.5-1.2,3.5-1.8l0.2-0.9
+	c2.8-2,3.1-4.2,2-3.7l2.9-2c0.4,0,0.8,0.3,0.8,0.8l1.4,1.5c-0.8,0.2-1.2,0.5-1,0.8c0.3,0.2,0.7,0.3,1,0.2c0.3-0.2,0.8,0.2,1,0.7
+	c0.4,0.6,1,0.9,1.7,0.9c1.8-0.1,1.7,1.9-0.1,3.2c-1.2,0.9-1.3,1-0.3,0.8c0.8-0.2,1.2-0.1,1.2,0.4s0.7,0.7,2.1,0.6l1.6,1.4
+	c-0.6,0.3-0.8,0.8-0.5,1.1s-0.5,0.8-1.7,1.2s-2.2,0.8-2.2,1s-0.5,0.7-1.1,1.1c-1,0.7-0.9,0.8,1.4,0.7c1.4-0.1,2.4-0.2,2.3-0.4
+	s1-0.7,2.5-1.3c2.6-1,2.7-1,2.4-0.1c-0.2,0.5-0.8,0.9-1.4,0.9c-0.6,0-1,0.4-1,1c0,0.7-0.3,1-1,0.8c-0.9-0.2-2.7,1.4-1.9,2.5l3.2,0.3
+	c1.4-0.1,4.5-0.8,4.4-0.9s-0.3,0.1,0.4-0.2c1.2-0.5,1.3-0.4,1,0.6c-0.3,1.3,1.1,2.4,3.5,2.7c3,0.3,2.1,0.7-1.5,0.6
+	c-2.1,0-2.8,2.5-6.4,2l-1.1,0.6c-0.8,0-1.5,0.7-1.4,1.5c0,0,0,0.1,0,0.1v0.5h4.5l1,0.7c3.2,0.1,7.1-1.9,7.3-1.3c0.6,2,2.9,0.7,3.1,1
+	s0.1,0.5-0.4,0.5s-0.7,0.4-0.4,1.2c0.5,1.4-0.2,1.6-2.5,0.7c-1.1-0.4-1.3-0.4-0.9,0.3c0.2,0.4-7.2,1.5-7.6,1.8
+	c-1.1,0.9,0.8,1.4,3.3,1c1.6-0.3,5.8-1.8,8-0.5c-0.1,0.7,4.9,0,5.5,1.3c-2,0.8-4.3,0.7-4.8,1.6c-0.9,1.6-4.6,0.3-5.3,3.6l0.6,1.6
+	c0,0.5-0.3,0.8-0.8,0.9c-0.4,0-0.6,0.2-0.3,0.5c0.4,0.3,1,0.4,1.5,0.2c0.9,0,1.8,0.2,2.5,0.7l1.2-1.3c1.4-1.2,3.1,0.1,5.4-1.4
+	c4.6-2,3.8,0.9,6.7,0.5c0.8,0.9-8.4,4.8-9.7,4.8c-1.1,0-1.1,0.1-0.2,0.5s1,0.5,0,0.6c-0.6,0-1.1,0-1.7,0c-0.3,0-0.9,0.5-0.8,0.9
+	l-5.5,1.4c-1.9,1.4-1.2,2.9,10.7,1c2-0.3,4-0.9,5.8-1.8c3-1.4,2.9,0.6,2.9,1.3c0,0.2-0.6,0.6-1.2,1s-0.9,0.6-0.5,0.4
+	s0.8,0.2,0.9,0.8c0.1,0.8-0.1,0.9-0.8,0.5c-1.2-0.7-2.1-0.1-1.1,0.8c0.6,0.5,0.5,0.7-0.4,0.7c-0.6,0-1.2,0.2-1.2,0.5
+	s-0.5,0.5-1.1,0.5c0,0-6.4,0.3-7.1,1.3s-2.2,0.4-2.9-0.2c-0.9-0.8-0.7,3.6,2.5,2.6c1.1-0.3,0.2-1.8,2.9-1.6s6.7,1.9,7.4,1.2
+	s8.1-1.6,8.5-2.2s1.5-2.5,2-1.7s0.4,4.2-1.1,4.6c-2.5,1.1-5,2.4-7.3,3.9c-1.4,1-3.1,1.5-4.8,1.4c-1.9-0.2-6,1.1-6,1.1s-0.8,1.7,0,2
+	s6.5,1.2,7.3,0.9s1.1-0.5,2.5-1.2s3.3-2.5,3.8-2.5c0.8-0.1,1.6-0.3,2.5-0.5c0.5,0.8,3,1,3.7,0.3c0.9-1,1.6-0.5,1.2,0.8
+	c-0.3,1-0.7,1.2-1.7,1.1c-0.7-0.2-1.5,0.1-1.8,0.8c-0.8,1.7-2.1,2.4-3.1,1.7c-0.7-0.5-0.7-0.4-0.3,0.4s0.3,0.9-0.6,0.6
+	c-1-0.1-2,0.2-2.8,0.9c-1,0.7-2.1,1.1-3.3,1.2c-0.9,0-1.6,0.2-1.6,0.5c0,0.9,6.4,1.4,7.5,0.7c0.3-0.2,0.6-0.4,1-0.4
+	c0.3,0,2.2-0.8,2.8-0.9c-0.3,0.6-0.4,1.2-0.5,1.8l-1.8,1.1l-3.8,2.7l-8.2,0.1l3.2,2.5c0.8,0.1,1.6,0.1,2.4,0
+	c1.3-0.2,2.6-0.4,3.9-0.4l4-2c2.8-0.8,10.4-0.8,7.2,1.7c-1.1,0.9-2.8,2.4-4.7,1.6s-3.8,2.7-8,3.2c-2.6,0.4-5.2,0.7-7.8,0.7
+	c-1.8-0.1,2,1.6,6.2,1.6s5,2.8,7.6,1.8s6.9-1.5,7.9-1.3s2.6,1.1-0.6,1.8s-4.8,1.9-7.5,2s-6.9-0.3-6.2,0.5s-3.2,0.1-2.3,0.9
+	s4.3,0.9,5.7,0.9s0.9,1,0.9,1 M214.4,176.3c1.4-0.4,1.4-0.5,0.3-0.7c-0.7-0.1-1.3-0.4-1.3-0.7s-0.3-0.4-0.9,0
+	c-1,0.5-2.1,0.5-4.4-0.1c-1.1-0.3-1.3-0.2-0.9,0.4c0.2,0.3,0.1,0.7-0.2,1c-0.1,0-0.1,0.1-0.2,0.1c-0.6,0.2-0.5,0.3,0.2,0.3
+	C210.6,176.8,213,176.7,214.4,176.3 M190.5,145.6c1.4-0.4,1.4-0.5,0.3-0.7c-0.7-0.1-1.3-0.4-1.3-0.7s-0.3-0.4-0.9,0
+	c-0.9,0.5-2.1,0.5-4.4-0.2c-1.1-0.3-1.3-0.2-0.9,0.4c0.2,0.3,0.1,0.7-0.2,0.9c-0.1,0-0.1,0.1-0.2,0.1c-0.6,0.2-0.5,0.3,0.2,0.3
+	C186.7,146.1,189.1,146,190.5,145.6 M255.4,170.5c1.5-0.2,1.7-1.1,0.2-1.1c-0.6,0-1.1-0.2-1.1-0.5c0-0.7-5.2-0.4-6.4,0.4
+	c-0.8,0.5-1.2,0.5-2-0.3s-1-0.8-0.6,0c0.2,0.5,0.1,0.9-0.4,0.9s-0.8,0.2-0.8,0.5C244.4,170.8,252.5,170.9,255.4,170.5 M251.8,156.6
+	c1.5-0.2,1.7-1.1,0.2-1.1c-0.6,0-1.1-0.2-1.1-0.5c0-0.7-5.2-0.4-6.4,0.4c-0.8,0.5-1.2,0.5-2-0.2s-1-0.8-0.6,0
+	c0.2,0.5,0.1,0.9-0.4,0.9s-0.8,0.2-0.8,0.5C240.8,156.9,248.9,157,251.8,156.6 M191.1,172.6c0.8-0.4,0.2-0.6-2.1-1
+	c-2.5-0.4-3.2-0.4-3.7,0.1s-0.8,0.5-1.7,0c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1c1.8,0.6,2.7,0.7,3.4,0.3
+	c0.5-0.4,1.3-0.4,1.8,0C189.5,173.2,189.8,173.2,191.1,172.6 M241.4,172.3c0.8-0.3,0.2-0.6-2.1-1c-2.4-0.5-3.2-0.4-3.7,0
+	s-0.8,0.5-1.7,0c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1c1.8,0.6,2.7,0.7,3.4,0.3c0.5-0.4,1.3-0.4,1.8,0
+	C239.7,172.8,240,172.8,241.4,172.3 M226.7,93.6c0.8-0.3,0.2-0.6-2.1-1c-2.5-0.5-3.2-0.4-3.7,0.1s-0.8,0.5-1.7,0
+	c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1c1.8,0.6,2.7,0.7,3.4,0.3c0.5-0.4,1.3-0.4,1.8,0C225,94.2,225.3,94.2,226.7,93.6
+	 M234.2,178.1c0.8-0.3,0.2-0.6-2.1-1c-2.4-0.5-3.2-0.4-3.7,0.1s-0.8,0.5-1.7,0c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1
+	c1.8,0.6,2.7,0.7,3.4,0.3c0.5-0.4,1.3-0.4,1.8,0C232.5,178.7,232.8,178.7,234.2,178.1 M204,126.1c6.5,0.4,10.8-2.1,5.6-3.2
+	c-0.7-0.2-1.2,0.1-1.3,0.6s-0.6,0.8-1.7,0.4c-0.9-0.2-1.6-0.2-1.7,0.1s-0.4,0.3-0.7,0.1c-0.3-0.2-0.8-0.2-1.1,0
+	c-0.6,0.4-2.6-0.4-3.2-1.3c-0.2-0.4-0.4-0.4-0.6,0s0.3,0.8,0.8,1.1s0.7,0.7,0.5,0.9s-0.8,0.1-1.2-0.3c-0.5-0.4-1.2-0.6-1.9-0.4
+	c-0.9,0.2-0.9,0.3,0.2,0.6s1.2,0.3,0.2,0.6C196.5,125.5,198.5,125.8,204,126.1 M242.2,143.9c6.5,0.4,10.8-2.1,5.6-3.2
+	c-0.7-0.1-1.2,0.1-1.3,0.6s-0.6,0.7-1.7,0.4c-0.9-0.2-1.6-0.2-1.7,0.1s-0.4,0.3-0.7,0.1c-0.3-0.2-0.8-0.2-1.1,0
+	c-0.6,0.4-2.6-0.4-3.2-1.4c-0.3-0.4-0.4-0.4-0.6,0s0.3,0.8,0.8,1.1s0.7,0.7,0.4,0.9s-0.8,0.1-1.2-0.3c-0.5-0.4-1.2-0.6-1.9-0.4
+	c-0.9,0.2-0.9,0.3,0.2,0.6s1.2,0.4,0.2,0.6C234.7,143.3,236.7,143.7,242.2,143.9 M194,166.8c6.5,0.1,10.7-2.6,5.5-3.5
+	c-0.7-0.1-1.2,0.2-1.2,0.7s-0.5,0.8-1.6,0.5c-0.9-0.2-1.6-0.1-1.7,0.1s-0.4,0.3-0.7,0.1c-0.3-0.2-0.8-0.2-1.1,0
+	c-0.6,0.5-2.6-0.3-3.2-1.2c-0.3-0.4-0.5-0.4-0.6,0s0.3,0.8,0.9,1.1s0.8,0.6,0.5,0.9s-0.8,0.2-1.3-0.2c-0.5-0.4-1.2-0.5-1.9-0.3
+	c-0.9,0.2-0.9,0.3,0.3,0.5s1.2,0.3,0.3,0.6C186.5,166.4,188.6,166.6,194,166.8"/>
+    <path d="M490,174.9c-0.2,0.4-7.7,1.1-8.9,0.6c-1.1-0.3-2.3-0.4-3.5-0.2c-1.8,0.2-3.6,0.4-5.4,0.4c-3.7,0-4,0.6-0.7,1.1
+	c1.2,0.2,12,1.9,12.4,2.3c0.7,0.4,1.4,0.7,2.2,0.7c0.7,0,1.4,0.2,1.4,0.5s-0.7,0.5-1.8,0.3s-1.8,0-1.8,0.2s-0.3,0.4-0.7,0.4
+	s-0.7-0.5-0.7-1.1l-0.7,1.2l-0.5-1.2c-0.6,0.6-11.1-0.2-11.6-0.4c-1.2-0.3-1.4,0.5-0.1,0.9c0.5,0.2,0.1,0.2-0.8,0.1
+	c-1.3-0.2-1.6,0-1.3,0.5s0.1,0.6-0.5,0.4c-1.5-0.6-2.7-0.6-2.7,0.1c0,1.1-2,0.9-2.5-0.2c-0.3-0.7-1-0.9-2.6-0.8
+	c-1.2,0.1-2.1,0-2.1-0.2l-1.6-0.6c-1.5-0.4-2.5,1.1-3,4.1c-0.3,1.8-0.9,71.9-0.7,73.8L446,258c0.8-2.7,0.2-73.1,0.3-75.1
+	s0.1-4.4-3.9-3.8c-3,1.2-14.1,2.4-22.5,2c-9.5-1.6-5-2.2-0.3-1.8c2,0.6,8.6-0.3,6-0.1c12-2.9-0.6-3-1.3-3.2s-4.5,0.9-5.2,1
+	s-1.1,0-1.1-0.6c0-0.8-0.6-0.9-4.6-0.8c-3.6,0-4.4-0.1-3.5-0.5c1.2-0.6,0.6-1.9-0.6-1.4c-0.4,0.2-1.4-0.2-2.2-0.9
+	c-0.6-0.5-1.2-0.8-1.9-1c-0.3,0.1-0.5-0.3-0.5-0.7c0-1.1-2.2-2.3-3.6-1.9c-0.6,0.2-1.8-0.5-3-1.5c-1.8-1.6-1.9-1.7-0.4-1.4
+	c0.8,0.2,2.4,0.4,3.5,0.6s2.5,0.3,3.1,0.5c0.7,0.1,1.4-0.1,2-0.5c0.7-0.6,1.2-0.6,3.2-0.1c1.2,0.4,2.5,0.5,3.8,0.2
+	c1.5-0.4,0.9-0.6-1.6-0.5c-1,0-2-0.3-2.8-0.9c-0.9-0.8-2.6-2.3-3.3-1.9c-1.1,0.6-3.4,0.2-2.8-0.5c0.2-0.2-0.6-0.8-1.9-1.2
+	s-1-4.3-0.6-4.3s-0.1-0.5-0.9-1.1c-0.7-0.5-1.3-1.2-1.5-2.1c0-0.9,0.1-0.9,0.9-0.2c1.5,1.4,6.6,6,9.5,5.4c1.4-0.3,13.2,0.1,15.1-3.2
+	c1.3-2.2-14.8-1.8-15.8-1.1c-0.8,0.5-1.6-1.8-1.6-2.4c0-0.2,0.3-0.6,0.7-0.7c0.8-0.3-1.8-1.5-3-1.8c-0.4-0.1-0.8-1.1-1-2.4l-0.4-2.2
+	l3,2c1.8,1.2,3.7,2.1,5.7,2.8c2.4,0.7,8.6-0.8,9-1.5c0.3-0.5-6.6-2.1-7.3-1.9c-2.9-1.4-1.8-0.4-3-2.8c0.7-0.3-1.1-1.3-2.4-1.1
+	c-1.6,0.3-1.9-1.7-1.9-2.5c0-1.4-3.5-3.2-3-4.5l2-0.1c3.6,2.6,10.6,4.6,18.1,2.3c0.5-0.1,3.7,0.3-0.6-0.5c-0.4,0.1-0.8-0.1-1-0.4
+	c-0.2-0.4,0.1-0.8,0.6-1s1-0.5,1-0.8s-4.5,0-5.1,0.2c-1.4,0.4-9.8-4-8.7-4.5c1.5-0.6,0.8-1.3-0.8-0.7c-1.3,0.5-1.5,0.4-1.1-0.2
+	c0.2-0.3,0.1-0.7-0.2-0.9c-0.1,0-0.1-0.1-0.2-0.1c-0.5-0.1-0.4-0.3,0.3-0.3s1.1-0.4,1.1-0.8s-0.4-0.7-0.9-0.5
+	c-0.5,0.1-1-0.1-1.3-0.5c-0.8-1.5,0.5-1.7,2.8-0.4c1,0.5,2,0.9,3.1,1.2c0.8,0.2,1.6,0.5,2.4,0.9c2.1,1,7.7,1.4,11.2,2.6
+	c-0.2-0.2,2.2,0,2.9,0c1.1,0,0.9-1.3-0.5-2c-0.9-0.4-7.7-3-7.7-3.4s-0.9-0.7-2-0.8s-2-0.4-2-0.9s-0.8-0.8-1.6-0.9s-1.4-0.4-1.2-0.6
+	s0-0.4-0.4-0.4s-0.6-0.2-0.4-0.5l11,2.2c0.5-0.2-0.4-2.9-1.1-3.3s-5-0.5-4.9-0.8s-0.2-0.8-0.9-1c-1.1-0.3-1.1-0.4-0.2-0.8
+	s0.9-0.5-0.2-0.5s-1.1-0.2-0.4-1c1.1-1.3,10.4,2.1,10.9,3.4c2,0.1-5.2-5-4.7-5c1.5,0.4,2.9,1,4.2,1.8c1,0.7,1.7,0.7,1.7,0.4
+	s4.2,1,5.3,1.3s0.3-1.7,1.5-2c2.3-0.7-0.2-2.7-2.5-2.7c-1,0-2.6,0.8-3.3,0.2s-1.2-1-1.3-0.9s-0.8,0-1.6-0.4
+	c-1.3-0.5-1.3-0.6-0.2-0.6c1.6,0,1.4-2.1-0.4-3.5c-0.7-0.5-0.9-1-0.5-1s0.5-0.4,0.2-0.9c-0.4-0.8-0.3-0.8,0.9-0.1
+	c0.7,0.4,2,1.2,2.9,1.8c4.9,3.2,11,4.6,12,3.6c0.4-0.4,0.4-1.7-0.5-1.4c-0.7,0.2-1.2,0.1-1.2-0.1s-3.8-1.1-4.5-1.2s-1.4-0.7-1.4-1.3
+	c0-1-2.7-0.6-4.3-0.3c-0.4,0.1-0.4-0.1,0.1-0.5c0.6-0.4,0.4-0.8-1-1.7c-1-0.6-1.6-1.4-1.4-1.7s0.1-0.5-0.4-0.5
+	c-0.6,0-0.7-0.2-0.1-0.5s1.5-0.1,3.2,1c2.7,1.7,5.1,2,6,1.3c0.6-0.4-0.8-2.3-2-2.3c-1.6,0-2.8-3.4-2-4.5c-0.6-0.7,2.1,0.3,4.4,1.1
+	c1.5,0.5,3.6-1,5.3-0.9c2.9,0.3,1.7-0.6,1.3-1.6c-0.3-0.8-0.6-0.9-1.2-0.6s-3.9,0.2-4.8,0.2c-1.4,0-0.5,0.4-0.1-1.1s5.5-1.8,3.7-1.8
+	l-0.6-1.9c0.9,0.3,1.8,0.6,2.7,0.8c1.1,0,0.1-1.8-1-1.8c-0.6,0-1-0.3-0.9-0.6s0.9-0.2,0.1-0.3s3.5-1.2,3.5-1.8l0.2-0.9
+	c2.8-2,3.1-4.2,2-3.7l2.9-2c0.4,0,0.8,0.3,0.8,0.7l1.4,1.5c-0.8,0.2-1.3,0.5-1,0.8c0.3,0.2,0.7,0.3,1,0.2c0.3-0.2,0.8,0.2,1,0.7
+	c0.3,0.6,1,0.9,1.7,0.9c1.8-0.1,1.7,1.9-0.1,3.2c-1.2,0.9-1.3,1-0.3,0.8c0.8-0.2,1.2-0.1,1.2,0.4s0.7,0.7,2.1,0.6l1.6,1.4
+	c-0.5,0.3-0.8,0.8-0.5,1.1s-0.5,0.8-1.7,1.2s-2.2,0.8-2.2,1s-0.5,0.7-1.1,1.1c-1,0.7-0.9,0.8,1.4,0.7c1.4-0.1,2.4-0.2,2.3-0.4
+	s1-0.7,2.5-1.3c2.6-1,2.7-1,2.4-0.1c-0.2,0.5-0.8,0.9-1.4,0.9c-0.6,0-1,0.4-1,1c0,0.7-0.3,1-1,0.8c-0.9-0.2-2.7,1.4-1.9,2.5l3.2,0.4
+	c1.5-0.1,3-0.4,4.4-0.9c-0.1-0.2-0.3,0.1,0.4-0.2c1.2-0.5,1.3-0.4,1,0.6c-0.3,1.3,1.1,2.4,3.5,2.6c3,0.3,2.1,0.7-1.5,0.6
+	c-2.1-0.1-2.8,2.5-6.4,2l-1.1,0.6c-0.8,0-1.5,0.7-1.4,1.5c0,0,0,0.1,0,0.1v0.5h4.5l1,0.6c3.2,0.1,7.1-1.9,7.3-1.3
+	c0.6,2,2.9,0.7,3.1,1s0.1,0.5-0.4,0.5s-0.7,0.4-0.4,1.2c0.5,1.4-0.2,1.6-2.5,0.8c-1.1-0.4-1.3-0.4-1,0.3c0.2,0.4-7.2,1.5-7.6,1.8
+	c-1.1,0.9,0.8,1.4,3.3,1c1.6-0.3,5.8-1.8,8-0.5c-0.2,0.7,4.9,0,5.5,1.3c-2,0.8-4.3,0.7-4.8,1.6c-0.9,1.6-4.6,0.3-5.3,3.6l0.6,1.6
+	c0,0.5-0.3,0.8-0.8,0.9c-0.4,0-0.5,0.2-0.3,0.5c0.4,0.3,1,0.4,1.5,0.2c0.9,0,1.8,0.2,2.5,0.7l1.2-1.3c1.4-1.2,3.1,0.1,5.4-1.4
+	c4.6-2,3.8,0.9,6.7,0.5c0.8,0.9-8.4,4.8-9.7,4.8c-1.1,0-1.1,0.1-0.2,0.5s1,0.5,0,0.6c-0.6,0-1.1,0-1.7,0c-0.3,0-0.9,0.5-0.8,0.9
+	l-5.5,1.4c-2,1.4-1.3,2.9,10.7,1c1.9-0.4,3.7-1,5.4-1.9c3-1.4,2.9,0.6,2.9,1.3c0,0.2-0.6,0.6-1.3,1s-0.9,0.6-0.5,0.5
+	s0.8,0.2,0.9,0.8c0.1,0.8-0.1,0.9-0.8,0.5c-1.2-0.7-2.1-0.1-1.1,0.8c0.6,0.5,0.5,0.7-0.4,0.7c-0.6,0-1.2,0.2-1.2,0.5
+	s-0.5,0.5-1.1,0.5c0,0-6.4,0.3-7.1,1.3s-2.1,0.4-2.9-0.2c-0.9-0.8-0.7,3.6,2.5,2.6c1.1-0.3,0.2-1.8,2.9-1.6s6.7,1.9,7.4,1.2
+	s8.1-1.6,8.5-2.2s1.6-2.5,2-1.7s0.4,4.2-1.1,4.6c-2.5,1.1-5,2.4-7.3,3.9c-1.4,1-3.1,1.5-4.8,1.4c-1.9-0.2-6,1.1-6,1.1
+	s-0.8,1.7,0,1.9s6.5,1.2,7.3,0.9s1.1-0.5,2.5-1.2s3.4-2.5,3.8-2.5c0.8-0.1,1.7-0.3,2.5-0.5c0.5,0.8,3,1,3.7,0.2
+	c0.9-1,1.6-0.5,1.2,0.8c-0.2,0.9-0.7,1.2-1.7,1.1c-0.7-0.2-1.5,0.1-1.8,0.8c-0.8,1.7-2.1,2.4-3.1,1.7c-0.7-0.4-0.7-0.4-0.4,0.4
+	s0.3,0.9-0.6,0.6c-1-0.1-2,0.2-2.8,0.9c-1,0.7-2.1,1.1-3.3,1.2c-0.9,0-1.6,0.2-1.6,0.4c0,0.9,6.4,1.4,7.5,0.7c0.3-0.2,0.6-0.3,1-0.4
+	c0.2,0,2.2-0.8,2.8-0.9c-0.3,0.6-0.4,1.2-0.5,1.8l-1.8,1.1l-3.8,2.7l-8.2,0.1l3.2,2.5c0.8,0.1,1.6,0.1,2.4,0c1.3-0.2,2.6-0.4,4-0.4
+	l4-2.1c2.8-0.8,10.4-0.8,7.2,1.7c-1.1,0.9-2.7,2.4-4.7,1.6s-3.8,2.7-8,3.2c-2.6,0.4-5.2,0.7-7.8,0.7c-1.8-0.1,2,1.6,6.2,1.6
+	s5,2.8,7.6,1.8s6.9-1.5,7.9-1.3s2.6,1-0.6,1.8s-4.8,1.9-7.5,2s-6.9-0.3-6.2,0.6s-3.2,0.1-2.3,0.9s4.3,0.9,5.8,0.9s0.8,1,0.8,1
+	 M444,176c1.4-0.4,1.4-0.5,0.3-0.7c-0.7-0.1-1.3-0.4-1.3-0.7s-0.3-0.4-0.9,0c-1,0.5-2.1,0.5-4.5-0.1c-1.1-0.3-1.3-0.2-0.9,0.4
+	c0.2,0.3,0.1,0.8-0.3,0.9c0,0-0.1,0-0.2,0.1c-0.5,0.2-0.5,0.3,0.2,0.3C440.2,176.5,442.6,176.4,444,176 M420,145.4
+	c1.4-0.4,1.4-0.5,0.3-0.7c-0.7-0.1-1.3-0.4-1.3-0.7s-0.3-0.4-0.9,0c-1,0.5-2.1,0.5-4.5-0.1c-1.1-0.3-1.3-0.2-0.9,0.4
+	c0.2,0.3,0.1,0.7-0.2,0.9c-0.1,0-0.1,0.1-0.2,0.1c-0.6,0.2-0.5,0.3,0.2,0.3C416.2,145.9,418.6,145.8,420,145.4 M484.9,170.3
+	c1.5-0.2,1.7-1.1,0.2-1.1c-0.6,0-1.1-0.2-1.1-0.5c0-0.7-5.2-0.4-6.4,0.4c-0.8,0.5-1.2,0.5-2-0.3s-1-0.8-0.6,0
+	c0.3,0.5,0.1,0.9-0.4,0.9s-0.8,0.2-0.8,0.5C473.9,170.6,482,170.7,484.9,170.3 M481.3,156.4c1.5-0.2,1.7-1.1,0.2-1.1
+	c-0.6,0-1.1-0.2-1.1-0.5c0-0.7-5.2-0.4-6.4,0.4c-0.8,0.5-1.2,0.5-2-0.3s-1-0.8-0.5,0c0.2,0.5,0.1,0.9-0.4,0.9s-0.8,0.2-0.8,0.5
+	C470.3,156.7,478.4,156.8,481.3,156.4 M420.6,172.4c0.8-0.3,0.2-0.6-2.1-1c-2.5-0.4-3.2-0.4-3.7,0s-0.8,0.5-1.7,0
+	c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1c1.8,0.6,2.7,0.7,3.4,0.3c0.5-0.4,1.3-0.4,1.8,0C419,173,419.3,173,420.6,172.4
+	 M470.9,172.1c0.8-0.4,0.2-0.6-2.1-1c-2.5-0.5-3.2-0.4-3.7,0s-0.8,0.5-1.7,0c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1
+	c1.8,0.6,2.7,0.7,3.4,0.3c0.5-0.4,1.3-0.4,1.8,0C469.2,172.6,469.5,172.6,470.9,172.1 M456.3,93.5c0.8-0.3,0.2-0.6-2.1-1
+	c-2.5-0.4-3.2-0.4-3.7,0.1s-0.8,0.5-1.7,0c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1c1.8,0.6,2.7,0.7,3.4,0.3
+	c0.5-0.4,1.3-0.4,1.8,0C454.6,94,454.9,94.1,456.3,93.5 M463.7,178c0.7-0.3,0.2-0.6-2.1-1c-2.5-0.5-3.2-0.4-3.7,0.1s-0.8,0.5-1.7,0
+	c-0.6-0.4-1.3-0.5-2-0.4c-0.5,0.1,0.2,0.6,1.6,1c1.8,0.6,2.7,0.7,3.4,0.3c0.5-0.4,1.3-0.4,1.8,0C462,178.6,462.3,178.6,463.7,178
+	 M433.5,125.9c6.5,0.3,10.8-2.1,5.6-3.2c-0.7-0.1-1.2,0.1-1.3,0.6s-0.6,0.7-1.7,0.4c-0.9-0.2-1.6-0.2-1.7,0.1s-0.4,0.3-0.7,0.1
+	c-0.3-0.2-0.8-0.2-1.1,0c-0.6,0.4-2.6-0.4-3.2-1.4c-0.3-0.4-0.5-0.4-0.6,0s0.3,0.8,0.8,1.1s0.7,0.7,0.5,0.9s-0.8,0.1-1.2-0.3
+	c-0.5-0.4-1.2-0.6-1.9-0.4c-0.9,0.2-0.9,0.3,0.3,0.5s1.2,0.3,0.2,0.6C426,125.3,428.1,125.6,433.5,125.9 M471.7,143.8
+	c6.5,0.4,10.8-2.1,5.6-3.2c-0.7-0.1-1.2,0.1-1.3,0.6s-0.5,0.7-1.7,0.4c-0.9-0.2-1.6-0.2-1.7,0.1s-0.4,0.3-0.7,0.1
+	c-0.3-0.2-0.8-0.2-1.1,0c-0.6,0.4-2.6-0.4-3.2-1.4c-0.3-0.4-0.5-0.4-0.6,0s0.3,0.8,0.8,1.1s0.7,0.7,0.5,0.9s-0.8,0.1-1.2-0.3
+	c-0.5-0.4-1.2-0.6-1.9-0.4c-0.9,0.2-0.9,0.3,0.3,0.6s1.2,0.3,0.2,0.6C464.2,143.1,466.3,143.5,471.7,143.8 M423.6,166.6
+	c6.5,0.1,10.7-2.6,5.5-3.5c-0.7-0.1-1.2,0.2-1.2,0.7s-0.5,0.8-1.6,0.5c-0.9-0.2-1.6-0.1-1.7,0.1s-0.4,0.3-0.7,0.1
+	c-0.3-0.2-0.8-0.2-1.1,0c-0.6,0.5-2.6-0.3-3.2-1.2c-0.3-0.4-0.5-0.4-0.5,0s0.3,0.8,0.9,1.1s0.8,0.6,0.5,0.9s-0.8,0.2-1.3-0.2
+	c-0.5-0.4-1.2-0.5-1.9-0.3c-0.9,0.2-0.9,0.3,0.3,0.5s1.2,0.3,0.3,0.5C416,166.2,418.1,166.5,423.6,166.6"/>
+  </g>
+</svg>

index.html

@@ -3,23 +3,38 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Pine Creek HOA</title>
+  <title>Pine Creek &mdash; Kannapolis' Premier Gated Community</title>
+  <meta name="description" content="Pine Creek is one of the Greater Charlotte area's premier gated communities, offering custom-built luxury homes on one-acre-plus lots in Kannapolis, North Carolina.">
 
-  <!-- Bootstrap backup -->
+  <!-- Open Graph / social preview -->
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="Pine Creek &mdash; Kannapolis' Premier Gated Community">
+  <meta property="og:description" content="Custom-built luxury homes on one-acre-plus lots in Kannapolis, North Carolina.">
+  <meta property="og:image" content="img/hero-poster.jpg">
+
+  <link rel="icon" href="favicon.ico" sizes="any">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <meta name="theme-color" content="#231F20">
+
+  <!-- Bootstrap grid/utilities -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-  <!-- Lato Font embed -->
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
-  <!-- Libre Bakersville Font embed -->
   <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&display=swap" rel="stylesheet">
-  <!-- Current project CSS file -->
+  <!-- Project CSS -->
   <link rel="stylesheet" type="text/css" href="css/main.css">
 </head>
 <body>
   <nav id="mainNav" class="main-nav">
     <div class="container">
       <div class="mobile-nav">
-        <a class="mobile-nav--logo" href="#"><img src="img/logo.svg" alt="Pine Creek Logo"></a>
+        <a class="mobile-nav--logo" href="#top"><img src="img/logo.svg" alt="Pine Creek"></a>
-        <div id="hamburger" class="hamburger">
+        <div id="hamburger" class="hamburger" role="button" aria-label="Toggle menu" tabindex="0">
           <div></div>
           <div></div>
           <div></div>
@@ -29,10 +44,10 @@
         <li><a class="nav-item" href="#welcome">Welcome</a></li>
         <li><a class="nav-item" href="#vineyard">The Vineyard</a></li>
         <li><a class="nav-item" href="#custom-homes">Custom Homes</a></li>
-        <li class="main-nav--logo"><a href="#top"><img src="img/logo.svg" alt="Pine Creek Logo"></a></li>
+        <li class="main-nav--logo"><a href="#top"><img src="img/logo.svg" alt="Pine Creek"></a></li>
         <li><a class="nav-item" href="#kannapolis">Kannapolis</a></li>
-        <li><a class="nav-item" href="#home-owners">Home Owners</a></li>
+        <li><a class="nav-item" href="#home-owners">HOA</a></li>
-        <li><a class="nav-item" href="#contact">Contact Us</a></li>
+        <li><a class="nav-item" href="#contact">Contact</a></li>
       </ul>
     </div>
   </nav>
@@ -42,124 +57,332 @@
     <!-- Anchor target for Welcome/Home -->
     <div id="top"></div>
 
-    <div class="hero">
+    <!-- HERO -->
-      <div style="padding:56.25% 0 0 0;position:relative;">
+    <header class="hero">
-  <video playsinline muted autoplay loop preload="auto" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" aria-hidden="true">
+      <video class="hero-video" playsinline muted autoplay loop preload="auto" poster="img/hero-poster.jpg" aria-hidden="true">
-          <source src="img/intro_short.mp4" type="video/mp4">
+        <source src="img/hero.mp4" type="video/mp4" media="(min-width: 768px)">
-          <!-- Fallback text -->
+        <source src="img/hero-mobile.mp4" type="video/mp4">
-          Your browser does not support HTML5 video. Download the video <a href="img/intro_short.mp4">here</a>.
       </video>
+      <div class="hero-overlay"></div>
+      <div class="hero-content">
+        <p class="hero-eyebrow">Kannapolis, North Carolina</p>
+        <h1 class="hero-title">Pine Creek</h1>
+        <p class="hero-sub">A premier gated community of custom luxury homes</p>
+        <a class="btn btn-primary hero-btn" href="#welcome">Explore the Community</a>
       </div>
-    </div>
+      <a href="#welcome" class="hero-scroll" aria-label="Scroll down">
+        <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+      </a>
+    </header>
 
-  <section id="welcome" class="container my-5">
+    <!-- WELCOME -->
-      <div class="hero-text row py-5">
+    <section id="welcome" class="container section">
-        <div class="col-md-6">
+      <div class="row align-items-center">
-          <h1>Welcome to Pine Creek</h1>
+        <div class="col-lg-6 mb-4 mb-lg-0">
-          <h5>Kannapolis' Premier Gated community</h5>
+          <span class="eyebrow">Welcome</span>
+          <h2 class="section-title">Welcome to Pine Creek</h2>
+          <h5 class="section-subtitle">Kannapolis' Premier Gated Community</h5>
+          <p>Pine Creek is one of the Greater Charlotte area's premier gated communities, offering custom-built homes in North Carolina's Cabarrus County.</p>
+          <p>The neighborhood features elegant custom homes based on French country designs and influences, ranging in size from 4,500 to over 11,000 square feet. Each home is carefully positioned on lots of one acre or more to preserve the natural beauty of the original landscape and protect each homeowner's privacy.</p>
+          <p>Create lifelong memories with your family in a luxury, custom home within a secure and quiet community. Welcome home to Pine Creek.</p>
         </div>
-        <div class="col-md-6 mt-3 mt-md-0">
+        <div class="col-lg-6">
-          <p>Pine Creek is one of the Greater Charlotte Area’s premier gated communities offering custom built homes in North Carolina’s Cabarrus County.</p>
+          <img class="feature-img" src="img/gallery/IMG_1964.jpg" alt="A stately custom stone home in Pine Creek" loading="lazy">
-          <p>The neighborhood features elegant custom built homes based on French country designs and influences, and homes range in size from 4,500 to over 11,000 square feet. Each home is carefully positioned on lots of one acre or more in order to preserve the natural beauty of the original landscape and to protect each homeowner’s privacy.</p>
-          <p>Create lifelong memories with your family in a luxury, custom home in a secure and quiet community. Welcome home to Pine Creek.</p>
         </div>
       </div>
     </section>
 
-    <div class="container">
+    <div class="container"><hr class="section-divider"></div>
-      <hr>
-    </div>
 
-  <section id="vineyard" class="container my-5">
+    <!-- THE VINEYARD -->
-      <div class="row py-5">
+    <section id="vineyard" class="container section">
-        <div class="col-md-5">
+      <div class="row align-items-center">
-          <h3>The Vineyard</h3>
+        <div class="col-lg-5 mb-4 mb-lg-0">
-          <p>A subsect of Pine Creek, The Vineyard is its own haven. Enclosed by lush grape vines and woods, The Vineyard custom homes feature Spanish/Tuscan styled architectural designs.</p>
+          <span class="eyebrow">The Vineyard</span>
-          <a class="btn btn-primary" href="#">Learn More</a>
+          <h2 class="section-title">The Vineyard</h2>
+          <p>A subsection of Pine Creek, The Vineyard is its own haven. Enclosed by lush grape vines and woods, The Vineyard's custom homes feature Spanish and Tuscan-inspired architectural designs along streets such as Tuscany Drive and Chardonnay Circle.</p>
+          <a class="btn btn-primary" href="#contact">Learn More</a>
         </div>
-        <div class="ml-auto col-md-6">
+        <div class="col-lg-7">
-          <div id="slidesVineyard" class="slides vineyard">
+          <div class="gallery" data-gallery="vineyard" aria-roledescription="carousel">
-            <img class="slides-img" src="img/vineyard-0.jpg" onerror="imgVineyardError(this)">
+            <div class="gallery-track">
-            <div class="slides-arrow out">
+              <img class="gallery-img is-active" src="img/gallery/IMG_1937.jpg" alt="Tuscan-style Vineyard home with terracotta tile roof" loading="lazy">
-              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="15 18 9 12 15 6"></polyline></svg>
+              <img class="gallery-img" src="img/gallery/IMG_1941.jpg" alt="Mediterranean-style Vineyard home with terracotta tile roof" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1943.jpg" alt="Spanish-Tuscan Vineyard estate with stucco and stone" loading="lazy">
             </div>
-            <div class="slides-arrow">
+            <button class="gallery-arrow prev" aria-label="Previous image">
-              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="9 18 15 12 9 6"></polyline></svg>
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
-            </div>
+            </button>
-          </div>
+            <button class="gallery-arrow next" aria-label="Next image">
-        </div>
-      </div>
-    </section>
-
-    <div class="container">
-      <hr>
-    </div>
-
-  <section id="custom-homes" class="container my-5">
-      <div class="row py-5">
-        <div class="ml-auto col-md-5 order-md-2">
-          <h3>Build Your Custom Home in Pine Creek</h3>
-          <p>While Pine Creek does not have a list of pre-approved custom home builders in order to provide owners with more flexibility in who builds their future custom home, Pine Creek Homeowners’ Association does evaluate proposed plans in accordance to the guidance in Pine Creek Covenants.</p>
-          <p>The primary focus of this approval process is to ensure all proposed home designs, architectural details and landscape designs align with the existing custom homes in Pine Creek. The HOA is pleased to provide feedback to a potential buyer on home plan renderings to confirm your vision would be in harmony with the style of the neighborhood.</p>
-          <a class="btn btn-primary" href="#">View open lots</a>
-          <a class="btn btn-light" href="#">Contact us</a>
-        </div>
-        <div class="col-md-6">
-          <div id="slidesHouse" class="slides house">
-            <img class="slides-img" src="img/house-0.jpg" onerror="imgHouseError(this)">
-            <div class="slides-arrow out">
-              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="15 18 9 12 15 6"></polyline></svg>
-            </div>
-            <div class="slides-arrow">
               <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
-            </div>
+            </button>
-          </div>
+            <div class="gallery-dots" aria-hidden="true"></div>
-        </div>
-      </div>
-    </section>
-
-    <div class="container">
-      <hr>
-    </div>
-
-  <section id="kannapolis" class="container my-5">
-      <div class="row py-5">
-        <div class="col-md-6">
-          <h3>Call Kannapolis, NC ‘Home’</h3>
-          <p>Kannapolis, North Carolina is a family-oriented town filled with Southern charm. Kannapolis was originally developed in 1906 to be the home to Cannon Mills. Even though the mill is no longer open, Kannapolis has exploded with residential and business development and has become home to families desiring to live close to uptown with the small town, country feel.</p>
-          <p>The town is conveniently located; right off of I-85 and within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful downtown, Cabarrus County schools and highly sought after private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.</p>
-        </div>
-        <div class="ml-auto col-md-6">
-          <div class="slides">
-            <img class="slides-img" src="img/kannapolis-nc.jpg">
           </div>
         </div>
       </div>
     </section>
 
-    <div class="container">
+    <div class="container"><hr class="section-divider"></div>
-      <hr>
-    </div>
 
-    <section id="home-owners" class="container my-5">
+    <!-- CUSTOM HOMES -->
-      <div class="py-5">
+    <section id="custom-homes" class="container section">
-        <div class="pb-4 text-center">
+      <div class="row align-items-center">
-          <h3>Pine Creek Homeowners’ Association</h3>
+        <div class="col-lg-5 order-lg-2 mb-4 mb-lg-0">
+          <span class="eyebrow">Custom Homes</span>
+          <h2 class="section-title">Build Your Custom Home in Pine Creek</h2>
+          <p>Pine Creek owners enjoy the freedom to choose their own builder. Rather than limiting you to a pre-approved list, the Pine Creek Homeowners' Association reviews proposed plans in accordance with the Pine Creek Covenants &mdash; giving you the flexibility to bring your own vision to life.</p>
+          <p>This review ensures that every home design, architectural detail, and landscape plan is in harmony with the established character of Pine Creek. The HOA is glad to offer early feedback on your renderings, so you can move forward with confidence.</p>
+          <p class="availability-note">Interested in building? A limited number of homesites are available. <a href="#contact">Contact us for lot availability.</a></p>
+          <a class="btn btn-primary" href="#contact">Contact the HOA</a>
+        </div>
+        <div class="col-lg-7 order-lg-1">
+          <div class="gallery" data-gallery="estate" aria-roledescription="carousel">
+            <div class="gallery-track">
+              <img class="gallery-img is-active" src="img/gallery/IMG_1947.jpg" alt="Brick and stone French country estate" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1922.jpg" alt="Stately brick custom home on a manicured lawn" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1945.jpg" alt="Stone custom home with circular drive" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1971.jpg" alt="French country home with stone accents" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1977.jpg" alt="Brick and stone estate with mature landscaping" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_2978.jpg" alt="Custom estate framed by trees" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1985.jpg" alt="Stone manor home at dusk" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1955.jpg" alt="Stone and stucco custom home with circular drive" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1980.jpg" alt="Sprawling brick and stone estate" loading="lazy">
+              <img class="gallery-img" src="img/gallery/IMG_1914.jpg" alt="Brick estate with formal fountain garden" loading="lazy">
+            </div>
+            <button class="gallery-arrow prev" aria-label="Previous image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+            </button>
+            <button class="gallery-arrow next" aria-label="Next image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+            </button>
+            <div class="gallery-dots" aria-hidden="true"></div>
+          </div>
         </div>
-        <p>The Pine Creek Homeowners’ Association consists of board members voted into position by homeowners within the neighborhood. The Homeowner’s Association is responsible for approving proposed building plans and ongoing maintenance of homes within the neighborhood to ensure homes are built and managed to meet the aesthetics of Pine Creek and the Vineyards.</p>
       </div>
     </section>
 
-    <!-- Simple contact anchor (nav -> Contact Us) -->
+    <div class="container"><hr class="section-divider"></div>
-    <section id="contact" class="container my-4">
+
-      <div class="py-3 text-center">
+    <!-- COMMUNITY & COMMON AREAS -->
-        <h4>Contact Us</h4>
+    <section id="community" class="container section">
-        <p>Email: <a href="mailto:info@pinecreekhoa.example">info@pinecreekhoa.example</a></p>
+      <div class="row align-items-center">
+        <div class="col-lg-5 mb-4 mb-lg-0">
+          <span class="eyebrow">Life at Pine Creek</span>
+          <h2 class="section-title">Community &amp; Common Areas</h2>
+          <p>Beyond its custom homes, Pine Creek is defined by the spaces neighbors share. A gated stone entrance opens to winding, tree-lined streets and the manicured vineyard rows that give The Vineyard its name.</p>
+          <p>At the heart of the community, a lakeside pavilion overlooks a tranquil pond with a fountain &mdash; a gathering place framed by mature woods and meticulously kept grounds.</p>
+        </div>
+        <div class="col-lg-7">
+          <div class="gallery" data-gallery="community" aria-roledescription="carousel">
+            <div class="gallery-track">
+              <img class="gallery-img is-active" src="img/community/community-pavilion-pond.jpg" alt="Lakeside pavilion overlooking the community pond and fountain" loading="lazy">
+              <img class="gallery-img" src="img/community/community-pavilion.jpg" alt="Aerial view of the community pavilion and gardens" loading="lazy">
+              <img class="gallery-img" src="img/community/community-vineyard-gate.jpg" alt="The Vineyard entrance monument with stone cupola" loading="lazy">
+              <img class="gallery-img" src="img/community/community-vineyard-rows.jpg" alt="Manicured vineyard rows lining a community street" loading="lazy">
+              <img class="gallery-img" src="img/community/community-aerial.jpg" alt="Aerial view of Pine Creek's tree-lined streets and estates" loading="lazy">
+              <img class="gallery-img" src="img/community/community-forest-pond.jpg" alt="Pine Creek homes nestled among the woods near the pond" loading="lazy">
+            </div>
+            <button class="gallery-arrow prev" aria-label="Previous image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+            </button>
+            <button class="gallery-arrow next" aria-label="Next image">
+              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+            </button>
+            <div class="gallery-dots" aria-hidden="true"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="container"><hr class="section-divider"></div>
+
+    <!-- COMMUNITY MAP -->
+    <section id="map" class="container section">
+      <div class="text-center mb-4">
+        <span class="eyebrow">The Neighborhood</span>
+        <h2 class="section-title">Community Map</h2>
+        <p class="section-lead">Winding, tree-lined streets &mdash; Tuscany Drive, Chardonnay Circle, Willowood Road, Stone Ridge Road, Richwood Circle, and Rolling Ridge Drive &mdash; thread through Pine Creek's gently rolling, one-acre-plus homesites.</p>
+      </div>
+      <div class="map-frame">
+        <img class="map-img" src="img/community-map.jpg" alt="Map of the Pine Creek community streets" loading="lazy">
+      </div>
+    </section>
+
+    <div class="container"><hr class="section-divider"></div>
+
+    <!-- KANNAPOLIS -->
+    <section id="kannapolis" class="container section">
+      <div class="row align-items-center">
+        <div class="col-lg-6 mb-4 mb-lg-0">
+          <span class="eyebrow">The Area</span>
+          <h2 class="section-title">Call Kannapolis, NC 'Home'</h2>
+          <p>Kannapolis, North Carolina is a family-oriented town filled with Southern charm. Originally developed in 1906 as the home of Cannon Mills, Kannapolis has since blossomed with residential and business development, drawing families who want to live close to uptown Charlotte while keeping a small-town, country feel.</p>
+          <p>The town is conveniently located right off I-85, within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful downtown, sought-after Cabarrus County and private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.</p>
+        </div>
+        <div class="col-lg-6">
+          <img class="feature-img" src="img/kannapolis-nc.jpg" alt="Downtown Kannapolis, North Carolina" loading="lazy">
+        </div>
+      </div>
+      <div class="map-embed">
+        <iframe
+          title="Map of Pine Creek in Kannapolis, North Carolina"
+          src="https://www.google.com/maps?q=Tuscany%20Dr%2C%20Kannapolis%2C%20NC%2028081&z=15&output=embed"
+          loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
+      </div>
+    </section>
+
+    <div class="container"><hr class="section-divider"></div>
+
+    <!-- HOA + BOARD -->
+    <section id="home-owners" class="container section">
+      <div class="text-center mb-4">
+        <span class="eyebrow">Governance</span>
+        <h2 class="section-title">Pine Creek Homeowners' Association</h2>
+        <p class="section-lead">The Pine Creek Homeowners' Association consists of board members voted into position by homeowners within the neighborhood. The Association approves proposed building plans and oversees the ongoing maintenance of homes to ensure they meet the aesthetics of Pine Creek and The Vineyard.</p>
+      </div>
+
+      <h3 class="board-heading">Meet the Board</h3>
+      <!-- Board roster sourced from the production site (pinecreekhoa.com). Verify before publishing. -->
+      <div class="table-responsive">
+        <table class="board-table">
+          <thead>
+            <tr>
+              <th scope="col">Name</th>
+              <th scope="col">Position</th>
+              <th scope="col">Email</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td data-label="Name">Brad Harris</td>
+              <td data-label="Position">President</td>
+              <td data-label="Email"><a href="mailto:president@pinecreekhoa.com">president@pinecreekhoa.com</a></td>
+            </tr>
+            <tr>
+              <td data-label="Name">Kurt Malone</td>
+              <td data-label="Position">Vice President</td>
+              <td data-label="Email"><a href="mailto:vp@pinecreekhoa.com">vp@pinecreekhoa.com</a></td>
+            </tr>
+            <tr>
+              <td data-label="Name">Trevor Lewis</td>
+              <td data-label="Position">Secretary</td>
+              <td data-label="Email"><a href="mailto:secretary@pinecreekhoa.com">secretary@pinecreekhoa.com</a></td>
+            </tr>
+            <tr>
+              <td data-label="Name">Chris Olson</td>
+              <td data-label="Position">Treasurer</td>
+              <td data-label="Email"><a href="mailto:treasurer@pinecreekhoa.com">treasurer@pinecreekhoa.com</a></td>
+            </tr>
+            <tr>
+              <td data-label="Name">Norm Shue</td>
+              <td data-label="Position">General</td>
+              <td data-label="Email"><a href="mailto:general@pinecreekhoa.com">general@pinecreekhoa.com</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- HOMEOWNER INFORMATION / DOCUMENTS -->
+      <h3 class="board-heading" id="documents">Homeowner Information</h3>
+      <p class="section-lead text-center">Governing documents, rules, and forms for current and prospective Pine Creek and Vineyard homeowners.</p>
+      <!-- Documents currently link to the live files on pinecreekhoa.com (they open in real browsers).
+           When this site takes over the domain, copy the PDFs into /docs and switch each href to
+           the local path (e.g. docs/PineCreekCCR.pdf). -->
+      <div class="doc-grid">
+        <a class="doc-card" href="https://www.pinecreekhoa.com/PineCreekCCR.pdf" target="_blank" rel="noopener">
+          <span class="doc-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
+          </span>
+          <span class="doc-text">
+            <span class="doc-title">Pine Creek Neighborhood Covenants</span>
+            <span class="doc-meta">The CC&amp;Rs governing Pine Creek &middot; PDF</span>
+          </span>
+        </a>
+        <a class="doc-card" href="https://www.pinecreekhoa.com/vineyardccr.pdf" target="_blank" rel="noopener">
+          <span class="doc-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
+          </span>
+          <span class="doc-text">
+            <span class="doc-title">The Vineyard Supplemental Covenants</span>
+            <span class="doc-meta">Additional covenants for The Vineyard &middot; PDF</span>
+          </span>
+        </a>
+        <a class="doc-card" href="https://www.pinecreekhoa.com/Pine-Creek-Safety-Rules.pdf" target="_blank" rel="noopener">
+          <span class="doc-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
+          </span>
+          <span class="doc-text">
+            <span class="doc-title">Safety Rules &amp; Regulations</span>
+            <span class="doc-meta">Community safety rules and regulations &middot; PDF</span>
+          </span>
+        </a>
+        <a class="doc-card" href="https://www.pinecreekhoa.com/HOAApprovalForm.pdf" target="_blank" rel="noopener">
+          <span class="doc-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
+          </span>
+          <span class="doc-text">
+            <span class="doc-title">Architectural Review Approval Form</span>
+            <span class="doc-meta">Submit improvements for board approval &middot; PDF</span>
+          </span>
+        </a>
+        <a class="doc-card" href="https://www.pinecreekhoa.com/Pine%20Creek%20Delinquency%20Policy.pdf" target="_blank" rel="noopener">
+          <span class="doc-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
+          </span>
+          <span class="doc-text">
+            <span class="doc-title">Delinquency Policy</span>
+            <span class="doc-meta">Assessment collection &amp; delinquency policy &middot; PDF</span>
+          </span>
+        </a>
+        <a class="doc-card" href="https://www.pinecreekhoa.com/Pine-Creek-Request-for-Reimbursement-of-Costs-for-Community-Event.pdf" target="_blank" rel="noopener">
+          <span class="doc-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line></svg>
+          </span>
+          <span class="doc-text">
+            <span class="doc-title">Community Event Reimbursement Form</span>
+            <span class="doc-meta">Request reimbursement for community events &middot; PDF</span>
+          </span>
+        </a>
+      </div>
+      <p class="doc-note">Pine Creek is professionally managed by <a href="https://premiermanagementnc.com/premier-charlotte-north-carolina/" target="_blank" rel="noopener">Premier Management Company</a>. Need a document that isn't listed here? <a href="#contact">Contact the HOA</a> and we'll be glad to help.</p>
+    </section>
+
+    <!-- CONTACT -->
+    <section id="contact" class="contact-section">
+      <div class="container section text-center">
+        <span class="eyebrow light">Get in Touch</span>
+        <h2 class="section-title">Contact Us</h2>
+        <p class="section-lead">Questions about Pine Creek, available lots, or the home-plan approval process? We'd love to hear from you.</p>
+        <a class="btn btn-light contact-btn" href="mailto:general@pinecreekhoa.com">Email the HOA</a>
       </div>
     </section>
   </main>
 
-  <!-- Current project JS file -->
+  <footer class="site-footer">
+    <div class="container">
+      <img class="footer-logo" src="img/logo.svg" alt="Pine Creek">
+      <p class="footer-tagline">Kannapolis' Premier Gated Community &middot; Cabarrus County, North Carolina</p>
+      <p class="footer-copy">&copy; <span id="year"></span> Pine Creek Homeowners' Association. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <!-- Lightbox for gallery images -->
+  <div id="lightbox" class="lightbox" role="dialog" aria-modal="true" aria-label="Image viewer" hidden>
+    <button class="lightbox-close" aria-label="Close viewer">
+      <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+    </button>
+    <button class="lightbox-arrow prev" aria-label="Previous image">
+      <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+    </button>
+    <figure class="lightbox-figure">
+      <img class="lightbox-img" src="" alt="">
+      <figcaption class="lightbox-caption"></figcaption>
+    </figure>
+    <button class="lightbox-arrow next" aria-label="Next image">
+      <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+    </button>
+  </div>
+
   <script type="text/javascript" src="js/main.js"></script>
 </body>
 </html>

js/main.js

@@ -1,178 +1,171 @@
+/* ============================================================
+   Pine Creek — site interactions
+   - Mobile nav (hamburger) toggle
+   - Smooth-scroll for in-page anchors with fixed-header offset
+   - Image galleries (prev/next, dots, autoplay, swipe)
+   - Sticky-nav shadow on scroll
+   ============================================================ */
+
 const hamburger = document.getElementById('hamburger'),
       mainNav = document.querySelector('#mainNav ul'),
       navItem = document.getElementsByClassName('nav-item')
 
-// Nav toggle, open, close
+// --- Mobile nav ------------------------------------------------
 const toggleNav = () => {
-        !(mainNav.classList.contains('in')) ? (
+        mainNav.classList.toggle('in')
-          mainNav.classList.add('in'),
+        hamburger.classList.toggle('in')
-          hamburger.classList.add('in')
-        ) : (
-          mainNav.classList.remove('in'),
-          hamburger.classList.remove('in')
-        )
       },
-      openNav = () => mainNav.classList.add('in'),
+      closeNav = () => {
-      closeNav = () => mainNav.classList.remove('in')
+        mainNav.classList.remove('in')
+        hamburger.classList.remove('in')
+      }
 
-// Hamburger menu icon click
 hamburger.onclick = toggleNav
+hamburger.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleNav() }
+})
+
+// --- Smooth scroll with fixed-header offset --------------------
+const scrollToTarget = (hash) => {
+  const target = hash && document.querySelector(hash)
+  if (!target) return false
+  const header = document.getElementById('mainNav')
+  const headerHeight = header ? header.offsetHeight : 0
+  const y = window.pageYOffset + target.getBoundingClientRect().top - headerHeight - 8
+  window.scrollTo({ top: y, behavior: 'smooth' })
+  return true
+}
 
-// Nav items on click: close nav (mobile) and smooth-scroll to anchor targets
 for (let i = 0; i < navItem.length; i++) {
   navItem[i].onclick = function (e) {
-    // prevent default anchor jump; we'll smooth-scroll with offset instead
-    e.preventDefault()
-    // close mobile nav if open
-    closeNav()
-
     const href = this.getAttribute('href') || ''
-    if (href.startsWith('#')) {
+    closeNav()
-      const target = document.querySelector(href)
+    if (href.startsWith('#') && scrollToTarget(href)) {
-      if (target) {
+      e.preventDefault()
-        // compute offset to account for fixed header
-        const header = document.getElementById('mainNav')
-        const headerHeight = header ? header.offsetHeight : 0
-        const extra = 8 // small spacing under header
-        const targetY = window.pageYOffset + target.getBoundingClientRect().top - headerHeight - extra
-
-        window.scrollTo({ top: targetY, behavior: 'smooth' })
-        return
-      }
-    }
-
-    // fallback: follow the link if it's not an in-page anchor
-    if (href) window.location.href = href
-  }
-}
-
-// If the page is loaded with a hash or the hash changes, adjust scroll to account for the fixed header
-const scrollToHashWithOffset = (hash) => {
-  if (!hash) return
-  const target = document.querySelector(hash)
-  if (!target) return
-  const header = document.getElementById('mainNav')
-  const headerHeight = header ? header.offsetHeight : 0
-  const extra = 8
-  const targetY = window.pageYOffset + target.getBoundingClientRect().top - headerHeight - extra
-  // Use a short timeout to allow browser default jump to complete before adjusting
-  setTimeout(() => window.scrollTo({ top: targetY, behavior: 'smooth' }), 50)
-}
-
-window.addEventListener('load', () => scrollToHashWithOffset(location.hash))
-window.addEventListener('hashchange', () => scrollToHashWithOffset(location.hash))
-
-// light auth
-window.onload = () => {
-  const board = document.getElementById('boardPage'),
-        owner = document.getElementById('ownerPage')
-
-  if (board || owner) {
-    const response = prompt('Please enter the password.')
-    
-    switch (response) {
-      case '12345':
-        console.log('Board Member')
-        break
-      case 'abcde':
-        console.log('Owner')
-        break
-      default:
-        console.log('Access Denied')
-        break
     }
   }
 }
 
-// Slides
+// Also offset any in-page anchor (hero buttons, etc.)
+document.querySelectorAll('a[href^="#"]:not(.nav-item)').forEach((a) => {
+  a.addEventListener('click', (e) => {
+    const href = a.getAttribute('href')
+    if (href.length > 1 && scrollToTarget(href)) e.preventDefault()
+  })
+})
 
-const slidesVineyard = document.getElementById('slidesVineyard'),
+window.addEventListener('load', () => scrollToTarget(location.hash))
-      slidesVineyardLeft = document.querySelector('#slidesVineyard .slides-arrow:nth-last-child(2)'),
+window.addEventListener('hashchange', () => scrollToTarget(location.hash))
-      slidesVineyardRight = document.querySelector('#slidesVineyard .slides-arrow:last-child'),
-      slidesVineyardImg = document.querySelector('#slidesVineyard .slides-img'),
-      slidesHouse = document.getElementById('slidesHouse'),
-      slidesHouseLeft = document.querySelector('#slidesHouse .slides-arrow:nth-last-child(2)'),
-      slidesHouseRight = document.querySelector('#slidesHouse .slides-arrow:last-child'),
-      slidesHouseImg = document.querySelector('#slidesHouse .slides-img')
 
-let vineyardImgs = 0
+// --- Sticky nav shadow ----------------------------------------
+const navEl = document.getElementById('mainNav')
+const onScroll = () => {
+  if (window.pageYOffset > 20) navEl.classList.add('scrolled')
+  else navEl.classList.remove('scrolled')
+}
+window.addEventListener('scroll', onScroll, { passive: true })
+onScroll()
 
-slidesVineyardRight.onclick = () => {
+// --- Lightbox --------------------------------------------------
-  vineyardImgs = vineyardImgs + 1
+const lightbox = document.getElementById('lightbox')
-  slidesVineyardImg.classList.add('out')
+let lbSrcs = [], lbAlts = [], lbIndex = 0
-  setTimeout(() => {
+if (lightbox) {
-    slidesVineyardImg.setAttribute('src', 'img/vineyard-' + vineyardImgs + '.jpg')
+  const lbImg = lightbox.querySelector('.lightbox-img'),
-    slidesVineyardImg.classList.remove('out')
+        lbCap = lightbox.querySelector('.lightbox-caption'),
-    if (vineyardImgs >= 1) {
+        lbPrev = lightbox.querySelector('.lightbox-arrow.prev'),
-      slidesVineyardLeft.classList.remove('out')
+        lbNext = lightbox.querySelector('.lightbox-arrow.next'),
+        lbClose = lightbox.querySelector('.lightbox-close')
+
+  const render = () => {
+    lbImg.src = lbSrcs[lbIndex]
+    lbImg.alt = lbAlts[lbIndex] || ''
+    lbCap.textContent = lbAlts[lbIndex] || ''
   }
-  }, 150)
+  window.openLightbox = (srcs, alts, i) => {
+    lbSrcs = srcs; lbAlts = alts; lbIndex = i
+    render()
+    lightbox.hidden = false
+    document.body.style.overflow = 'hidden'
+  }
+  const close = () => { lightbox.hidden = true; document.body.style.overflow = '' }
+  const lbGo = (n) => { lbIndex = (n + lbSrcs.length) % lbSrcs.length; render() }
+
+  lbPrev.addEventListener('click', (e) => { e.stopPropagation(); lbGo(lbIndex - 1) })
+  lbNext.addEventListener('click', (e) => { e.stopPropagation(); lbGo(lbIndex + 1) })
+  lbClose.addEventListener('click', close)
+  lightbox.addEventListener('click', (e) => {
+    if (e.target === lbImg) lbGo(lbIndex + 1)
+    else if (!e.target.closest('.lightbox-arrow') && !e.target.closest('.lightbox-close')) close()
+  })
+  document.addEventListener('keydown', (e) => {
+    if (lightbox.hidden) return
+    if (e.key === 'Escape') close()
+    else if (e.key === 'ArrowLeft') lbGo(lbIndex - 1)
+    else if (e.key === 'ArrowRight') lbGo(lbIndex + 1)
+  })
 }
 
-slidesVineyardLeft.onclick = () => {
+// --- Galleries -------------------------------------------------
-  slidesVineyardImg.classList.add('out')
+document.querySelectorAll('.gallery').forEach((gallery) => {
+  const imgs = Array.from(gallery.querySelectorAll('.gallery-img')),
+        prev = gallery.querySelector('.gallery-arrow.prev'),
+        next = gallery.querySelector('.gallery-arrow.next'),
+        dotsWrap = gallery.querySelector('.gallery-dots')
+  if (!imgs.length) return
 
-  setTimeout(() => {
+  let index = 0
-    slidesVineyardImg.classList.remove('out')
+  let timer = null
-    if (vineyardImgs > 0) {
+
-      vineyardImgs = vineyardImgs - 1
+  // Build dots
-      slidesVineyardImg.setAttribute('src', 'img/vineyard-' + vineyardImgs + '.jpg')
+  const dots = imgs.map((_, i) => {
+    const dot = document.createElement('button')
+    dot.className = 'gallery-dot' + (i === 0 ? ' is-active' : '')
+    dot.setAttribute('aria-label', 'Go to image ' + (i + 1))
+    dot.addEventListener('click', () => { go(i); restart() })
+    dotsWrap && dotsWrap.appendChild(dot)
+    return dot
+  })
+
+  const go = (n) => {
+    imgs[index].classList.remove('is-active')
+    dots[index] && dots[index].classList.remove('is-active')
+    index = (n + imgs.length) % imgs.length
+    imgs[index].classList.add('is-active')
+    dots[index] && dots[index].classList.add('is-active')
   }
-    if (vineyardImgs < 1) {
+
-      slidesVineyardLeft.classList.add('out')
+  const start = () => { timer = setInterval(() => go(index + 1), 6000) }
+  const stop = () => { clearInterval(timer); timer = null }
+  const restart = () => { stop(); start() }
+
+  prev && prev.addEventListener('click', () => { go(index - 1); restart() })
+  next && next.addEventListener('click', () => { go(index + 1); restart() })
+
+  // Pause on hover (desktop)
+  gallery.addEventListener('mouseenter', stop)
+  gallery.addEventListener('mouseleave', start)
+
+  // Touch swipe
+  let startX = 0
+  gallery.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; stop() }, { passive: true })
+  gallery.addEventListener('touchend', (e) => {
+    const dx = e.changedTouches[0].clientX - startX
+    if (Math.abs(dx) > 40) go(index + (dx < 0 ? 1 : -1))
+    start()
+  })
+
+  // Click image to open in lightbox (opens at the currently shown slide)
+  const track = gallery.querySelector('.gallery-track')
+  if (track && window.openLightbox) {
+    const srcs = imgs.map((i) => i.getAttribute('src'))
+    const alts = imgs.map((i) => i.alt)
+    track.classList.add('zoomable')
+    track.addEventListener('click', () => window.openLightbox(srcs, alts, index))
   }
-  }, 150)
-}
 
-const imgVineyardError = (image) => {
+  start()
-  vineyardImgs = 0
+})
-  image.src = 'img/vineyard-0.jpg'
 
-  setTimeout(() => {
+// --- Footer year ----------------------------------------------
-    if (vineyardImgs < 1) {
+const yearEl = document.getElementById('year')
-      slidesVineyardLeft.classList.add('out')
+if (yearEl) yearEl.textContent = new Date().getFullYear()
-    }
-  }, 150)
-  return true
-}
-
-let houseImgs = 0
-
-slidesHouseRight.onclick = () => {
-  houseImgs = houseImgs + 1
-  slidesHouseImg.classList.add('out')
-  setTimeout(() => {
-    slidesHouseImg.setAttribute('src', 'img/house-' + houseImgs + '.jpg')
-    slidesHouseImg.classList.remove('out')
-    if (houseImgs >= 1) {
-      slidesHouseLeft.classList.remove('out')
-    }
-  }, 150)
-}
-
-slidesHouseLeft.onclick = () => {
-  slidesHouseImg.classList.add('out')
-  
-  setTimeout(() => {
-    slidesHouseImg.classList.remove('out')
-    if (houseImgs > 0) {
-      houseImgs = houseImgs - 1
-      slidesHouseImg.setAttribute('src', 'img/house-' + houseImgs + '.jpg')
-    }
-    if (houseImgs < 1) {
-      slidesHouseLeft.classList.add('out')
-    }
-  }, 150)
-}
-
-const imgHouseError = (image) => {
-  houseImgs = 0
-  image.src = 'img/house-0.jpg'
-
-  setTimeout(() => {
-    if (houseImgs < 1) {
-      slidesHouseLeft.classList.add('out')
-    }
-  }, 150)
-  return true
-}

old.index.php

@@ -1,166 +0,0 @@
-
-<!-- 
-
-Use for pics:
-
-  https://www.zillow.com/homedetails/3661-Richwood-Cir-Kannapolis-NC-28081/61653437_zpid/?
-
- -->
-
-<!DOCTYPE html>
-<html>
-<head>
-
-	<title>Pine Creek HOA</title>
-
-
-  <!-- Bootstrap backup -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-  <!-- Lato Font embed -->
-  <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
-  <!-- Libre Bakersville Font embed -->
-  <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&display=swap" rel="stylesheet">
-	<!-- Current project CSS file -->
-	<link rel="stylesheet" type="text/css" href="css/main.css">
-
-</head>
-<body>
-  <nav id="mainNav" class="main-nav">
-    <div class="container">
-      <div class="mobile-nav">
-        <a class="mobile-nav--logo" href="#"><img src="img/logo.svg" alt="Pine Creek Logo"></a>
-        <div id="hamburger" class="hamburger">
-          <div></div>
-          <div></div>
-          <div></div>
-        </div>
-      </div>
-      <ul>
-        <li><a class="nav-item" href="#">Welcome</a></li>
-        <li><a class="nav-item" href="#">The Vineyard</a></li>
-        <li><a class="nav-item" href="#">Custom Homes</a></li>
-        <li class="main-nav--logo"><a href="#"><img src="img/logo.svg" alt="Pine Creek Logo"></a></li>
-        <li><a class="nav-item" href="#">Kannapolis</a></li>
-        <li><a class="nav-item" href="#">Home Owners</a></li>
-        <li><a class="nav-item" href="#">Contact Us</a></li>
-      </ul>
-    </div>
-  </nav>
-
-	<main class="page-content">
-
-    <div class="hero">
-      <div style="padding:56.25% 0 0 0;position:relative;">
-  <video playsinline muted autoplay loop preload="auto" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" aria-hidden="true">
-          <source src="img/intro_short.mp4" type="video/mp4">
-          <!-- Fallback text -->
-          Your browser does not support HTML5 video. Download the video <a href="img/intro_short.mp4">here</a>.
-        </video>
-      </div>
-    </div>
-
-    <section class="container my-5">
-      <div class="hero-text row py-5">
-        <div class="col-md-6">
-          <h1>Welcome to Pine Creek</h1>
-          <h5>Kannapolis' Premier Gated community</h5>
-        </div>
-        <div class="col-md-6 mt-3 mt-md-0">
-          <p>Pine Creek is one of the Greater Charlotte Area’s premier gated communities offering custom built homes in North Carolina’s Cabarrus County.</p>
-          <p>The neighborhood features elegant custom built homes based on French country designs and influences, and homes range in size from 4,500 to over 11,000 square feet. Each home is carefully positioned on lots of one acre or more in order to preserve the natural beauty of the original landscape and to protect each homeowner’s privacy.</p>
-          <p>Create lifelong memories with your family in a luxury, custom home in a secure and quiet community. Welcome home to Pine Creek.</p>
-        </div>
-      </div>
-    </section>
-    
-    <div class="container">
-      <hr>
-    </div>
-
-    <section class="container my-5">
-      <div class="row py-5">
-        <div class="col-md-5">
-          <h3>The Vineyard</h3>
-          <p>A subsect of Pine Creek, The Vineyard is its own haven. Enclosed by lush grape vines and woods, The Vineyard custom homes feature Spanish/Tuscan styled architectural designs.</p>
-          <a class="btn btn-primary" href="#">Learn More</a>
-        </div>
-        <div class="ml-auto col-md-6">
-          <div id="slidesVineyard" class="slides vineyard">
-            <img class="slides-img" src="img/vineyard-0.jpg" onerror="imgVineyardError(this)">
-            <div class="slides-arrow out">
-              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="15 18 9 12 15 6"></polyline></svg>
-            </div>
-            <div class="slides-arrow">
-              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="9 18 15 12 9 6"></polyline></svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="container">
-      <hr>
-    </div>
-
-    <section class="container my-5">
-      <div class="row py-5">
-        <div class="ml-auto col-md-5 order-md-2">
-          <h3>Build Your Custom Home in Pine Creek</h3>
-          <p>While Pine Creek does not have a list of pre-approved custom home builders in order to provide owners with more flexibility in who builds their future custom home, Pine Creek Homeowners’ Association does evaluate proposed plans in accordance to the guidance in Pine Creek Covenants.</p>
-          <p>The primary focus of this approval process is to ensure all proposed home designs, architectural details and landscape designs align with the existing custom homes in Pine Creek. The HOA is pleased to provide feedback to a potential buyer on home plan renderings to confirm your vision would be in harmony with the style of the neighborhood.</p>
-          <a class="btn btn-primary" href="#">View open lots</a>
-          <a class="btn btn-light" href="#">Contact us</a>
-        </div>
-        <div class="col-md-6">
-          <div id="slidesHouse" class="slides house">
-            <img class="slides-img" src="img/house-0.jpg" onerror="imgHouseError(this)">
-            <div class="slides-arrow out">
-              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="15 18 9 12 15 6"></polyline></svg>
-            </div>
-            <div class="slides-arrow">
-              <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="container">
-      <hr>
-    </div>
-
-    <section class="container my-5">
-      <div class="row py-5">
-        <div class="col-md-6">
-          <h3>Call Kannapolis, NC ‘Home’</h3>
-          <p>Kannapolis, North Carolina is a family-oriented town filled with Southern charm. Kannapolis was originally developed in 1906 to be the home to Cannon Mills. Even though the mill is no longer open, Kannapolis has exploded with residential and business development and has become home to families desiring to live close to uptown with the small town, country feel.</p>
-          <p>The town is conveniently located; right off of I-85 and within 30 minutes of uptown Charlotte and Charlotte Douglas International Airport. With growing businesses, a vast array of shops and restaurants, a beautiful downtown, Cabarrus County schools and highly sought after private schools, and the grandeur of the NC Research Campus, Kannapolis is a wonderful place to call home.</p>
-        </div>
-        <div class="ml-auto col-md-6">
-          <div class="slides">
-            <img class="slides-img" src="img/kannapolis-nc.jpg">
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <div class="container">
-      <hr>
-    </div>
-
-    <section class="container my-5">
-      <div class="py-5">
-        <div class="pb-4 text-center">
-          <h3>Pine Creek Homeowners’ Association</h3>
-        </div>
-        <p>The Pine Creek Homeowners’ Association consists of board members voted into position by homeowners within the neighborhood. The Homeowner’s Association is responsible for approving proposed building plans and ongoing maintenance of homes within the neighborhood to ensure homes are built and managed to meet the aesthetics of Pine Creek and the Vineyards.</p>
-      </div>
-    </section>
-
-	</main>
-	
-	<!-- Current project JS file -->
-	<script type="text/javascript" src="js/main.js"></script>
-</body>
-</html>
-