patx/demo
add jdb landscaping
Commit 27dac04 · patx · 2026-06-15T16:33:48-04:00
Comments
No comments yet.
Diff
diff --git a/docs/jdb-hero-2-optimized.webp b/docs/jdb-hero-2-optimized.webp
new file mode 100644
index 0000000..be7457a
Binary files /dev/null and b/docs/jdb-hero-2-optimized.webp differ
diff --git a/docs/jdb-hero-3.webp b/docs/jdb-hero-3.webp
new file mode 100644
index 0000000..a473cd2
Binary files /dev/null and b/docs/jdb-hero-3.webp differ
diff --git a/docs/jdb-hero-4.webp b/docs/jdb-hero-4.webp
new file mode 100644
index 0000000..37374f7
Binary files /dev/null and b/docs/jdb-hero-4.webp differ
diff --git a/docs/jdb-hero-after.webp b/docs/jdb-hero-after.webp
new file mode 100644
index 0000000..faa82e5
Binary files /dev/null and b/docs/jdb-hero-after.webp differ
diff --git a/docs/jdb-logo.png b/docs/jdb-logo.png
new file mode 100644
index 0000000..dcdcab1
Binary files /dev/null and b/docs/jdb-logo.png differ
diff --git a/docs/jdb.html b/docs/jdb.html
new file mode 100644
index 0000000..be503f9
--- /dev/null
+++ b/docs/jdb.html
@@ -0,0 +1,1643 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>JDB Landscape — Burlington, ON</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,300;1,600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+ --soil: #1B1F17;
+ --green: #4A7C59;
+ --green-d: #2E5240;
+ --concrete:#C8BFB0;
+ --bone: #F2EFE9;
+ --rust: #B85C38;
+ --rust-l: #D4714A;
+ --white: #FAFAF8;
+}
+
+html { scroll-behavior: smooth; font-size: 16px; }
+section { scroll-margin-top: 86px; }
+
+body {
+ font-family: 'Inter', sans-serif;
+ background: var(--white);
+ color: var(--soil);
+ overflow-x: hidden;
+}
+
+/* ─── CURSOR DOT ─── */
+.cursor {
+ position: fixed; pointer-events: none; z-index: 9999;
+ width: 8px; height: 8px; border-radius: 50%;
+ background: var(--rust);
+ transform: translate(-50%,-50%);
+ transition: transform .08s, width .25s, height .25s, opacity .25s;
+ mix-blend-mode: multiply;
+}
+.cursor-ring {
+ position: fixed; pointer-events: none; z-index: 9998;
+ width: 32px; height: 32px; border-radius: 50%;
+ border: 1px solid rgba(184,92,56,.4);
+ transform: translate(-50%,-50%);
+ transition: transform .18s ease, width .25s, height .25s, opacity .2s;
+}
+body:hover .cursor { opacity: 1; }
+
+/* ─── NAV ─── */
+nav {
+ position: fixed; top: 0; left: 0; right: 0; z-index: 100;
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 28px 60px;
+ transition: padding .4s, background .4s;
+}
+nav.stuck,
+nav.menu-open {
+ padding: 12px 60px;
+ background: rgba(27,31,23,.96);
+ backdrop-filter: blur(16px);
+}
+.nav-wordmark {
+ display: flex; align-items: center;
+ color: var(--white); text-decoration: none;
+ flex: 0 0 auto;
+}
+.nav-logo-image {
+ display: block;
+ width: auto; height: 120px;
+ transition: height .4s ease, transform .4s ease;
+}
+nav.stuck .nav-logo-image,
+nav.menu-open .nav-logo-image {
+ height: 44px;
+}
+.nav-links {
+ display: flex; gap: 40px; list-style: none;
+}
+.nav-links a {
+ position: relative;
+ color: rgba(255,255,255,.6); text-decoration: none;
+ font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
+ transition: color .2s;
+}
+.nav-links a::after {
+ content: "";
+ position: absolute; left: 0; right: 0; bottom: -8px; height: 1px;
+ background: var(--rust);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform .2s;
+}
+.nav-links a:hover,
+.nav-links a.is-active { color: var(--white); }
+.nav-links a:hover::after,
+.nav-links a.is-active::after { transform: scaleX(1); }
+.nav-mobile-estimate { display: none; }
+.nav-actions {
+ display: flex; align-items: center; gap: 12px;
+}
+.nav-btn {
+ font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
+ color: var(--soil); background: var(--concrete);
+ padding: 11px 24px; text-decoration: none;
+ transition: background .2s;
+}
+.nav-btn:hover,
+.nav-btn.is-active { background: var(--white); }
+.nav-phone {
+ display: inline-flex; align-items: center; gap: 9px;
+ padding: 10px 18px;
+ border: 1px solid rgba(255,255,255,.16);
+ color: var(--white);
+ text-decoration: none;
+ font-size: 12px; font-weight: 600; letter-spacing: .08em;
+ transition: border-color .2s, background .2s, color .2s;
+}
+.nav-phone:hover {
+ background: rgba(255,255,255,.08);
+ border-color: rgba(255,255,255,.32);
+}
+.nav-phone svg { flex: 0 0 auto; color: var(--rust-l); }
+.nav-menu-toggle {
+ display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
+ width: 44px; height: 44px;
+ border: 1px solid rgba(255,255,255,.16);
+ background: rgba(255,255,255,.06);
+ color: var(--white);
+ cursor: pointer;
+ transition: background .2s, border-color .2s;
+}
+.nav-menu-toggle:hover {
+ background: rgba(255,255,255,.12);
+ border-color: rgba(255,255,255,.28);
+}
+.nav-menu-toggle span {
+ width: 18px; height: 2px;
+ background: currentColor;
+ transition: transform .2s, opacity .2s;
+}
+nav.menu-open .nav-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+nav.menu-open .nav-menu-toggle span:nth-child(2) { opacity: 0; }
+nav.menu-open .nav-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+.mobile-call-bar { display: none; }
+.mobile-call-bar svg { flex: 0 0 auto; }
+.mobile-call-bar-text {
+ display: flex; flex-direction: column; gap: 2px;
+ line-height: 1;
+}
+.mobile-call-bar-label {
+ font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
+ color: rgba(255,255,255,.58);
+}
+.mobile-call-bar-number {
+ font-size: 15px; font-weight: 600; letter-spacing: .02em;
+ color: var(--white);
+}
+
+/* ─── HERO ─── */
+#hero {
+ min-height: 100vh;
+ background: var(--soil);
+ display: flex; flex-direction: column; justify-content: flex-end;
+ position: relative; overflow: hidden;
+ isolation: isolate;
+}
+
+#hero::before {
+ content: "";
+ position: absolute; inset: 0; z-index: 1;
+ background:
+ linear-gradient(to bottom, rgba(27,31,23,.18) 0%, rgba(27,31,23,.54) 58%, rgba(27,31,23,.92) 100%),
+ linear-gradient(to right, rgba(27,31,23,.74) 0%, rgba(27,31,23,.45) 45%, rgba(27,31,23,.18) 100%);
+ pointer-events: none;
+}
+
+.hero-slideshow {
+ position: absolute; inset: 0;
+ z-index: 0;
+ overflow: hidden;
+ background: var(--soil);
+}
+.hero-slide {
+ position: absolute; inset: 0;
+ width: 100%; height: 100%;
+ object-fit: cover;
+ object-position: center;
+ opacity: 0;
+ transform: scale(1.12);
+ filter: saturate(.9) contrast(1.04);
+ animation: heroZoomFade 32s infinite ease-in-out;
+ will-change: opacity, transform;
+}
+.hero-slide:nth-child(1) { animation-delay: -.64s; }
+.hero-slide:nth-child(2) { animation-delay: 7.36s; }
+.hero-slide:nth-child(3) { animation-delay: 15.36s; }
+.hero-slide:nth-child(4) { animation-delay: 23.36s; }
+@keyframes heroZoomFade {
+ 0% {
+ opacity: 0;
+ transform: scale(1.12);
+ }
+ 2% {
+ opacity: 1;
+ }
+ 22% {
+ opacity: 1;
+ }
+ 27% {
+ opacity: 0;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(1);
+ }
+}
+
+.hero-content {
+ position: relative; z-index: 2;
+ padding: 0 60px 72px;
+ display: flex; align-items: flex-end; justify-content: space-between;
+ gap: 40px;
+}
+.hero-left { max-width: 600px; }
+
+.hero-pill {
+ display: inline-flex; align-items: center; gap: 8px;
+ background: rgba(255,255,255,.08);
+ border: 1px solid rgba(255,255,255,.12);
+ padding: 7px 14px; margin-bottom: 28px;
+ font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
+ color: var(--concrete); font-weight: 500;
+}
+.hero-pill-dot {
+ width: 6px; height: 6px; border-radius: 50%;
+ background: var(--rust); flex-shrink: 0;
+ animation: pulse 2.4s ease infinite;
+}
+@keyframes pulse {
+ 0%,100% { opacity:1; transform:scale(1); }
+ 50% { opacity:.5; transform:scale(.7); }
+}
+
+.hero-h1 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: clamp(42px, 5.5vw, 76px);
+ font-weight: 300;
+ line-height: 1.08;
+ color: var(--white);
+ margin-bottom: 0;
+}
+.hero-h1 em {
+ font-style: italic;
+ color: var(--concrete);
+}
+
+.hero-right {
+ display: flex; flex-direction: column; align-items: flex-end; gap: 28px;
+ flex-shrink: 0;
+}
+.hero-sub {
+ font-size: 14px; line-height: 1.8; font-weight: 300;
+ color: rgba(255,255,255,.5);
+ max-width: 280px; text-align: right;
+}
+.hero-cta {
+ display: inline-flex; align-items: center; gap: 12px;
+ background: var(--rust);
+ color: var(--white);
+ padding: 16px 32px;
+ font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
+ text-decoration: none;
+ transition: background .2s, gap .2s;
+}
+.hero-cta:hover { background: var(--rust-l); gap: 18px; }
+.hero-cta-arrow { font-size: 16px; }
+
+.hero-rule {
+ position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
+ background: rgba(255,255,255,.08);
+ z-index: 2;
+}
+
+/* ─── MARQUEE STRIP ─── */
+.marquee-strip {
+ background: var(--rust);
+ overflow: hidden;
+ white-space: nowrap;
+ padding: 14px 0;
+}
+.marquee-inner {
+ display: inline-flex; gap: 0;
+ animation: marquee 22s linear infinite;
+}
+@keyframes marquee {
+ from { transform: translateX(0); }
+ to { transform: translateX(-50%); }
+}
+.marquee-item {
+ display: inline-flex; align-items: center; gap: 20px;
+ font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
+ color: var(--white);
+ padding: 0 36px;
+}
+.marquee-sep { opacity: .5; font-size: 18px; line-height: 1; }
+
+/* ─── SERVICES ─── */
+#services {
+ padding: 110px 60px;
+ background: var(--white);
+ position: relative;
+ overflow: hidden;
+}
+.services-watermark {
+ position: absolute; top: 18px; right: 42px; z-index: 0;
+ font-family: 'Cormorant Garamond', serif;
+ font-size: clamp(120px, 18vw, 260px);
+ font-weight: 700;
+ line-height: .8;
+ letter-spacing: 0;
+ color: rgba(27,31,23,.045);
+ user-select: none;
+ pointer-events: none;
+}
+.services-header {
+ position: relative; z-index: 1;
+ display: grid; grid-template-columns: 1fr 1fr;
+ gap: 60px; align-items: end;
+ padding-bottom: 64px;
+ border-bottom: 1px solid var(--concrete);
+ margin-bottom: 0;
+}
+.eyebrow {
+ font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
+ color: var(--rust); display: block; margin-bottom: 16px;
+}
+.section-h2 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: clamp(36px, 4vw, 56px);
+ font-weight: 300; line-height: 1.1;
+ color: var(--soil);
+}
+.section-h2 em { font-style: italic; color: var(--green); }
+.section-desc {
+ font-size: 15px; line-height: 1.8; font-weight: 300;
+ color: rgba(27,31,23,.55);
+ max-width: 380px;
+}
+
+/* Service rows — editorial style, not cards */
+.service-list { margin-top: 0; position: relative; z-index: 1; }
+.service-row {
+ display: grid; grid-template-columns: 56px 1fr 1fr auto;
+ align-items: center; gap: 32px;
+ padding: 32px 0;
+ border-bottom: 1px solid rgba(200,191,176,.4);
+ transition: background .2s;
+ cursor: default;
+}
+.service-row:hover { background: var(--bone); margin: 0 -60px; padding: 32px 60px; }
+.service-row:first-child { border-top: 1px solid rgba(200,191,176,.4); }
+.service-icon-wrap {
+ width: 48px; height: 48px; border-radius: 50%;
+ background: var(--bone); border: 1px solid var(--concrete);
+ display: flex; align-items: center; justify-content: center;
+ color: var(--green); flex-shrink: 0;
+ transition: background .2s, border-color .2s;
+}
+.service-row:hover .service-icon-wrap { background: var(--green); color: var(--white); border-color: var(--green); }
+.service-name-col {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 22px; font-weight: 600; color: var(--soil);
+}
+.service-desc-col {
+ font-size: 13px; line-height: 1.7; font-weight: 300;
+ color: rgba(27,31,23,.5);
+}
+.service-tag {
+ font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
+ color: var(--concrete); white-space: nowrap;
+ transition: color .2s;
+}
+.service-row:hover .service-tag { color: var(--rust); }
+
+/* ─── ABOUT ─── */
+#about {
+ background: var(--soil);
+ display: grid; grid-template-columns: 1fr 1fr;
+ min-height: 680px;
+}
+.about-img-col {
+ position: relative; overflow: hidden;
+}
+.about-img-col img {
+ width: 100%; height: 100%; object-fit: cover; display: block;
+ filter: grayscale(30%) saturate(.9);
+ transition: transform 8s ease, filter 8s ease;
+}
+#about:hover .about-img-col img {
+ transform: scale(1.04); filter: grayscale(0%) saturate(1.05);
+}
+.about-img-overlay {
+ position: absolute; inset: 0;
+ background: linear-gradient(to right, transparent 55%, var(--soil) 100%);
+}
+.about-text-col {
+ padding: 80px 72px 80px 56px;
+ display: flex; flex-direction: column; justify-content: center;
+}
+.about-text-col .eyebrow { color: var(--rust); margin-bottom: 20px; }
+.about-h2 {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: clamp(34px, 3.5vw, 50px);
+ font-weight: 300; line-height: 1.12;
+ color: var(--white); margin-bottom: 28px;
+}
+.about-h2 em { font-style: italic; color: var(--concrete); }
+.about-body {
+ font-size: 15px; line-height: 1.85; font-weight: 300;
+ color: rgba(255,255,255,.5);
+ margin-bottom: 44px;
+}
+.about-badges {
+ display: flex; flex-wrap: wrap; gap: 10px;
+}
+.badge {
+ display: inline-flex; align-items: center; gap: 8px;
+ border: 1px solid rgba(255,255,255,.12);
+ padding: 9px 16px;
+ font-size: 12px; font-weight: 400; letter-spacing: .04em;
+ color: rgba(255,255,255,.65);
+}
+.badge-icon { color: var(--rust); }
+
+/* ─── GALLERY ─── */
+#gallery {
+ background: var(--bone);
+ padding: 100px 60px;
+}
+.gallery-header {
+ display: flex; justify-content: space-between; align-items: flex-end;
+ margin-bottom: 52px;
+}
+.gallery-note {
+ font-size: 13px; font-weight: 300; color: rgba(27,31,23,.4);
+ max-width: 220px; text-align: right; line-height: 1.6;
+}
+.before-after {
+ --reveal: 50%;
+ position: relative;
+ aspect-ratio: 4 / 3;
+ margin-bottom: 52px;
+ overflow: hidden;
+ background: var(--soil);
+ border: 1px solid rgba(200,191,176,.55);
+}
+.before-after-img,
+.before-after-overlay {
+ position: absolute; inset: 0;
+ width: 100%; height: 100%;
+}
+.before-after-img {
+ object-fit: cover;
+ display: block;
+}
+.before-after-overlay {
+ overflow: hidden;
+ clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
+}
+.before-after-divider {
+ position: absolute; top: 0; bottom: 0; left: var(--reveal); z-index: 3;
+ width: 2px;
+ background: var(--white);
+ transform: translateX(-50%);
+ box-shadow: 0 0 0 1px rgba(27,31,23,.18);
+ pointer-events: none;
+}
+.before-after-handle {
+ position: absolute; top: 50%; left: var(--reveal); z-index: 4;
+ width: 48px; height: 48px;
+ display: flex; align-items: center; justify-content: center; gap: 4px;
+ background: var(--white);
+ color: var(--soil);
+ border: 1px solid rgba(27,31,23,.18);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow: 0 14px 32px rgba(27,31,23,.24);
+ pointer-events: none;
+}
+.before-after-handle span {
+ width: 7px; height: 7px;
+ border-top: 2px solid currentColor;
+ border-left: 2px solid currentColor;
+}
+.before-after-handle span:first-child { transform: rotate(-45deg); }
+.before-after-handle span:last-child { transform: rotate(135deg); }
+.before-after-label {
+ position: absolute; top: 18px; z-index: 2;
+ padding: 8px 12px;
+ background: rgba(27,31,23,.72);
+ color: var(--white);
+ font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
+}
+.before-after-label.before { left: 18px; }
+.before-after-label.after { right: 18px; }
+.before-after-range {
+ position: absolute; inset: 0; z-index: 5;
+ width: 100%; height: 100%;
+ opacity: 0;
+ cursor: ew-resize;
+ appearance: none;
+ -webkit-appearance: none;
+}
+.before-after-range::-webkit-slider-runnable-track {
+ width: 100%; height: 100%;
+ background: transparent;
+}
+.before-after-range::-webkit-slider-thumb {
+ width: 48px; height: 100%;
+ background: transparent;
+ border: 0;
+ -webkit-appearance: none;
+}
+.before-after-range::-moz-range-track {
+ width: 100%; height: 100%;
+ background: transparent;
+ border: 0;
+}
+.before-after-range::-moz-range-thumb {
+ width: 48px; height: 100%;
+ background: transparent;
+ border: 0;
+}
+.before-after-range:focus-visible + .before-after-focus {
+ opacity: 1;
+}
+.before-after-focus {
+ position: absolute; inset: 8px; z-index: 4;
+ border: 2px solid var(--rust);
+ opacity: 0;
+ pointer-events: none;
+}
+
+/* Bento-style gallery — feels like a portfolio sheet */
+.gallery-bento {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ grid-template-rows: 240px 180px 280px;
+ gap: 8px;
+}
+.gitem {
+ overflow: hidden; position: relative;
+ background: var(--concrete);
+ cursor: zoom-in;
+}
+.gitem:focus-visible {
+ outline: 2px solid var(--rust);
+ outline-offset: 4px;
+}
+.gitem img {
+ width: 100%; height: 100%; object-fit: cover; display: block;
+ transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s;
+ filter: saturate(.8);
+}
+.gitem:hover img { transform: scale(1.06); filter: saturate(1.1); }
+.gitem-label {
+ position: absolute; bottom: 0; left: 0; right: 0;
+ padding: 12px 16px;
+ background: linear-gradient(to top, rgba(27,31,23,.75) 0%, transparent 100%);
+ font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
+ color: rgba(255,255,255,.8); font-weight: 500;
+ opacity: 0; transform: translateY(4px);
+ transition: opacity .3s, transform .3s;
+}
+.gitem:hover .gitem-label { opacity: 1; transform: translateY(0); }
+
+.ga { grid-column: 1 / 6; grid-row: 1; }
+.gb { grid-column: 6 / 9; grid-row: 1; }
+.gc { grid-column: 9 / 13; grid-row: 1 / 3; }
+.gd { grid-column: 1 / 4; grid-row: 2 / 4; }
+.ge { grid-column: 4 / 7; grid-row: 2; }
+.gf { grid-column: 7 / 9; grid-row: 2; }
+.gg { grid-column: 4 / 9; grid-row: 3; }
+.gh { grid-column: 9 / 13; grid-row: 3; }
+.image-modal {
+ position: fixed; inset: 0; z-index: 1000;
+ display: grid; place-items: center;
+ padding: clamp(18px, 4vw, 56px);
+ background: rgba(27,31,23,.58);
+ backdrop-filter: blur(18px);
+ -webkit-backdrop-filter: blur(18px);
+ opacity: 0; visibility: hidden; pointer-events: none;
+ transition: opacity .2s, visibility .2s;
+}
+.image-modal.is-open {
+ opacity: 1; visibility: visible; pointer-events: auto;
+}
+.image-modal img {
+ max-width: 100%;
+ max-height: 92vh;
+ object-fit: contain;
+ box-shadow: 0 24px 80px rgba(0,0,0,.34);
+}
+.image-modal-close {
+ position: fixed; top: 18px; right: 18px; z-index: 1001;
+ width: 44px; height: 44px;
+ border: 1px solid rgba(255,255,255,.16);
+ background: rgba(27,31,23,.68);
+ color: var(--white);
+ font: 300 34px/1 'Inter', sans-serif;
+ cursor: pointer;
+ transition: background .2s, border-color .2s;
+}
+.image-modal-close:hover {
+ background: rgba(27,31,23,.92);
+ border-color: rgba(255,255,255,.32);
+}
+.image-modal-close:focus-visible {
+ outline: 2px solid var(--rust);
+ outline-offset: 4px;
+}
+body.modal-open { overflow: hidden; }
+
+/* ─── AREAS ─── */
+#areas {
+ background: var(--white);
+ padding: 100px 60px;
+}
+.areas-inner {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
+}
+.areas-map {
+ position: relative;
+ overflow: hidden;
+ background: var(--bone);
+ border: 1px solid var(--concrete);
+ aspect-ratio: 4/3;
+}
+.areas-map iframe {
+ width: 100%; height: 100%;
+ display: block;
+ border: 0;
+ filter: saturate(.85) contrast(.96);
+}
+.areas-map-link {
+ position: absolute; left: 14px; bottom: 14px; z-index: 1;
+ display: inline-flex;
+ padding: 8px 12px;
+ background: rgba(27,31,23,.78);
+ color: var(--white);
+ text-decoration: none;
+ font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
+ transition: background .2s;
+}
+.areas-map-link:hover { background: rgba(27,31,23,.94); }
+.areas-list {
+ padding-top: 8px;
+}
+.areas-list .eyebrow { margin-bottom: 20px; }
+.areas-list .section-h2 { margin-bottom: 36px; }
+.area-items {
+ display: flex; flex-direction: column; gap: 0;
+}
+.area-item {
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 18px 0;
+ border-bottom: 1px solid rgba(200,191,176,.5);
+ transition: padding-left .2s;
+}
+.area-item:first-child { border-top: 1px solid rgba(200,191,176,.5); }
+.area-item:hover { padding-left: 8px; }
+.area-item-left {
+ display: flex; align-items: center; gap: 12px;
+}
+.area-pin-icon { color: var(--rust); flex-shrink: 0; }
+.area-name { font-size: 16px; font-weight: 400; color: var(--soil); }
+.area-badge {
+ font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
+ background: var(--bone); border: 1px solid var(--concrete);
+ color: rgba(27,31,23,.45);
+ padding: 4px 10px;
+}
+.area-badge.primary {
+ background: rgba(74,124,89,.1); border-color: rgba(74,124,89,.3);
+ color: var(--green-d);
+}
+
+/* ─── ESTIMATE ─── */
+#estimate {
+ background: var(--bone);
+ padding: 100px 60px;
+ position: relative; overflow: hidden;
+}
+.estimate-texture {
+ position: absolute; inset: 0;
+ background-image: repeating-linear-gradient(
+ 90deg,
+ rgba(200,191,176,.2) 0px, rgba(200,191,176,.2) 1px,
+ transparent 1px, transparent 80px
+ ),
+ repeating-linear-gradient(
+ 0deg,
+ rgba(200,191,176,.2) 0px, rgba(200,191,176,.2) 1px,
+ transparent 1px, transparent 80px
+ );
+ pointer-events: none;
+}
+.estimate-inner {
+ position: relative; z-index: 1;
+ display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start;
+}
+.estimate-left .section-h2 { margin-bottom: 20px; }
+.estimate-tagline {
+ font-size: 15px; line-height: 1.8; font-weight: 300;
+ color: rgba(27,31,23,.55); margin-bottom: 44px;
+}
+.contact-block {
+ display: flex; flex-direction: column; gap: 16px;
+}
+.contact-line {
+ display: flex; align-items: center; gap: 14px;
+ font-size: 15px; color: var(--soil); font-weight: 400;
+}
+.contact-line a { color: inherit; text-decoration: none; }
+.contact-line a:hover { color: var(--rust); }
+.contact-icon-wrap {
+ width: 36px; height: 36px;
+ background: var(--white); border: 1px solid var(--concrete);
+ display: flex; align-items: center; justify-content: center;
+ flex-shrink: 0; color: var(--rust);
+}
+
+/* Form */
+.estimate-form { display: flex; flex-direction: column; gap: 0; }
+.form-group { margin-bottom: 20px; }
+.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.form-label {
+ display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
+ color: rgba(27,31,23,.45); margin-bottom: 8px;
+}
+.form-input, .form-select, .form-textarea {
+ width: 100%; display: block;
+ background: var(--white); border: 1px solid var(--concrete);
+ color: var(--soil); font-family: 'Inter', sans-serif;
+ font-size: 14px; font-weight: 300;
+ padding: 13px 16px; outline: none;
+ transition: border-color .2s;
+ -webkit-appearance: none; appearance: none;
+}
+.form-input::placeholder, .form-textarea::placeholder { color: rgba(27,31,23,.3); }
+.form-input:focus, .form-select:focus, .form-textarea:focus {
+ border-color: var(--green);
+}
+.form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8BFB0' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
+.form-textarea { resize: vertical; min-height: 110px; }
+
+.form-submit {
+ width: 100%; padding: 17px 32px;
+ background: var(--soil); color: var(--white); border: none; cursor: pointer;
+ font-family: 'Inter', sans-serif;
+ font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
+ transition: background .2s;
+ margin-top: 8px;
+}
+.form-submit:hover { background: var(--green-d); }
+.form-success {
+ display: none; padding: 14px 20px;
+ background: rgba(74,124,89,.1); border: 1px solid rgba(74,124,89,.3);
+ font-size: 13px; color: var(--green-d); font-weight: 400; margin-top: 12px;
+}
+
+/* ─── FOOTER ─── */
+footer {
+ background: var(--soil);
+ padding: 72px 60px 40px;
+}
+.footer-top {
+ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
+ gap: 60px; padding-bottom: 56px;
+ border-bottom: 1px solid rgba(255,255,255,.07);
+}
+.footer-brand-name {
+ font-family: 'Cormorant Garamond', serif;
+ font-size: 28px; font-weight: 600; color: var(--white);
+ margin-bottom: 6px; letter-spacing: .02em;
+}
+.footer-brand-name span { color: var(--rust); }
+.footer-tagline {
+ font-size: 13px; line-height: 1.7; font-weight: 300;
+ color: rgba(255,255,255,.35); margin-bottom: 28px;
+}
+.footer-social { display: flex; gap: 10px; }
+.footer-social-link {
+ width: 34px; height: 34px;
+ border: 1px solid rgba(255,255,255,.1);
+ display: flex; align-items: center; justify-content: center;
+ color: rgba(255,255,255,.4); text-decoration: none;
+ font-size: 13px; transition: border-color .2s, color .2s;
+}
+.footer-social-link:hover { border-color: var(--rust); color: var(--rust); }
+.footer-col-title {
+ font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
+ color: rgba(255,255,255,.25); margin-bottom: 20px;
+}
+.footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
+.footer-links a {
+ color: rgba(255,255,255,.45); text-decoration: none;
+ font-size: 13px; font-weight: 300; transition: color .2s;
+}
+.footer-links a:hover { color: rgba(255,255,255,.85); }
+.footer-bottom {
+ padding-top: 32px;
+ display: flex; justify-content: space-between; align-items: center;
+ font-size: 11px; color: rgba(255,255,255,.2); font-weight: 300;
+}
+
+/* ─── SCROLL REVEAL ─── */
+.sr {
+ opacity: 0; transform: translateY(28px);
+ transition: opacity .75s ease, transform .75s ease;
+}
+.sr.sr-left { transform: translateX(-28px); }
+.sr.sr-right { transform: translateX(28px); }
+.sr.sr-scale { transform: scale(.96); }
+.sr.in { opacity: 1; transform: none; }
+.sr-d1 { transition-delay: .08s; }
+.sr-d2 { transition-delay: .16s; }
+.sr-d3 { transition-delay: .24s; }
+.sr-d4 { transition-delay: .32s; }
+.sr-d5 { transition-delay: .40s; }
+.sr-d6 { transition-delay: .48s; }
+.sr-d7 { transition-delay: .56s; }
+.sr-d8 { transition-delay: .64s; }
+
+@media (prefers-reduced-motion: reduce) {
+ .sr { opacity: 1; transform: none; transition: none; }
+ .cursor, .cursor-ring { display: none; }
+ .hero-slide {
+ animation: none;
+ transform: scale(1.03);
+ will-change: auto;
+ }
+ .hero-slide:first-child { opacity: 1; }
+}
+
+/* ─── RESPONSIVE ─── */
+@media (max-width: 960px) {
+ section { scroll-margin-top: 76px; }
+ body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
+ nav { padding: 20px 24px; }
+ nav.stuck { padding: 14px 24px; }
+ nav.menu-open { padding: 14px 24px; }
+ .nav-logo-image { height: 86px; }
+ nav.stuck .nav-logo-image,
+ nav.menu-open .nav-logo-image { height: 42px; }
+ .nav-actions { gap: 0; }
+ .nav-btn, .nav-phone { display: none; }
+ .nav-menu-toggle { display: flex; }
+ .nav-links {
+ position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
+ display: flex; flex-direction: column; gap: 0;
+ padding: 10px 16px;
+ background: rgba(27,31,23,.98);
+ border: 1px solid rgba(255,255,255,.1);
+ box-shadow: 0 24px 60px rgba(0,0,0,.28);
+ opacity: 0; visibility: hidden; pointer-events: none;
+ transform: translateY(-8px);
+ transition: opacity .2s, transform .2s, visibility .2s;
+ }
+ nav.menu-open .nav-links {
+ opacity: 1; visibility: visible; pointer-events: auto;
+ transform: translateY(0);
+ }
+ .nav-links li { width: 100%; }
+ .nav-links a {
+ display: flex; align-items: center; justify-content: space-between;
+ width: 100%;
+ padding: 15px 2px;
+ border-bottom: 1px solid rgba(255,255,255,.08);
+ color: rgba(255,255,255,.72);
+ }
+ .nav-links a::after {
+ position: static;
+ display: block;
+ width: 6px; height: 6px; border-radius: 50%;
+ background: var(--rust);
+ transform: scale(0);
+ flex: 0 0 6px;
+ }
+ .nav-links a.is-active::after { transform: scale(1); }
+ .nav-links li:last-child a { border-bottom: none; }
+ .nav-mobile-estimate { display: block; }
+ .mobile-call-bar {
+ position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 101;
+ display: flex; align-items: center; justify-content: center; gap: 12px;
+ min-height: 58px;
+ padding: 11px 18px calc(11px + env(safe-area-inset-bottom));
+ background: var(--rust);
+ color: var(--white);
+ text-decoration: none;
+ box-shadow: 0 18px 42px rgba(27,31,23,.24);
+ opacity: 0; visibility: hidden; pointer-events: none;
+ transform: translateY(calc(100% + 28px));
+ transition: background .2s, opacity .2s, transform .2s, visibility .2s;
+ }
+ .mobile-call-bar.is-visible {
+ opacity: 1; visibility: visible; pointer-events: auto;
+ transform: translateY(0);
+ }
+ .mobile-call-bar:hover { background: var(--rust-l); }
+ .mobile-call-bar.is-visible:active { transform: translateY(1px); }
+
+ #hero { min-height: 100dvh; }
+ .hero-content { padding: 0 24px 56px; flex-direction: column; align-items: flex-start; }
+ .hero-right { align-items: flex-start; }
+ .hero-sub { text-align: left; max-width: 100%; }
+
+ #services { padding: 72px 24px; }
+ .services-watermark { top: 26px; right: 18px; font-size: 118px; }
+ .services-header { grid-template-columns: 1fr; gap: 24px; }
+ .service-row { grid-template-columns: 48px 1fr; }
+ .service-desc-col, .service-tag { display: none; }
+ .service-row:hover { margin: 0 -24px; padding: 32px 24px; }
+
+ #about { grid-template-columns: 1fr; }
+ .about-img-col { height: 300px; }
+ .about-text-col { padding: 56px 24px; }
+
+ #gallery { padding: 72px 24px; }
+ .gallery-header { flex-direction: column; align-items: flex-start; gap: 24px; }
+ .gallery-note { max-width: 100%; text-align: left; }
+ .before-after { margin-bottom: 32px; }
+ .before-after-label { top: 12px; padding: 7px 10px; }
+ .before-after-label.before { left: 12px; }
+ .before-after-label.after { right: 12px; }
+ .before-after-handle { width: 42px; height: 42px; }
+ .gallery-bento {
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: 180px 180px 180px 180px;
+ }
+ .ga,.gb,.gc,.gd,.ge,.gf,.gg,.gh { grid-column: auto; grid-row: auto; }
+
+ #areas { padding: 72px 24px; }
+ .areas-inner { grid-template-columns: 1fr; }
+ .areas-map { aspect-ratio: 1 / 1; min-height: 300px; }
+
+ #estimate { padding: 72px 24px; }
+ .estimate-inner { grid-template-columns: 1fr; gap: 48px; }
+ .form-row-2 { grid-template-columns: 1fr; }
+
+ footer { padding: 56px 24px 32px; }
+ .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
+ .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
+}
+</style>
+</head>
+<body>
+
+<!-- Custom cursor -->
+<div class="cursor" id="cur"></div>
+<div class="cursor-ring" id="cur-ring"></div>
+
+<!-- ─── NAV ─── -->
+<nav id="mainNav" aria-label="Primary navigation">
+ <a href="#hero" class="nav-wordmark">
+ <img class="nav-logo-image" src="jdb-logo.png" width="400" height="398" alt="JDB Landscape">
+ </a>
+ <ul class="nav-links" id="primaryNav">
+ <li><a href="#services" data-nav-link>Services</a></li>
+ <li><a href="#about" data-nav-link>About</a></li>
+ <li><a href="#gallery" data-nav-link>Work</a></li>
+ <li><a href="#areas" data-nav-link>Areas</a></li>
+ <li class="nav-mobile-estimate"><a href="#estimate" data-nav-link>Estimate</a></li>
+ </ul>
+ <div class="nav-actions">
+ <a href="#estimate" class="nav-btn" data-nav-link>Free Estimate</a>
+ <a href="tel:9054078567" class="nav-phone" aria-label="Call JDB Landscape at 905 407 8567">
+ <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+ <path d="M2 2.5h3l1.5 3.5-1.5 1.5c1 2 2 3 4 4l1.5-1.5 3.5 1.5V14c0 .8-.7 1.4-1.5 1.3C5.5 14.7 1.3 10.5 1.2 5.5A1.5 1.5 0 012.5 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+ </svg>
+ (905) 407-8567
+ </a>
+ <button class="nav-menu-toggle" type="button" aria-label="Open menu" aria-controls="primaryNav" aria-expanded="false">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </button>
+ </div>
+</nav>
+
+<a href="tel:9054078567" class="mobile-call-bar" aria-label="Call JDB Landscape at 905 407 8567">
+ <svg width="18" height="18" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+ <path d="M2 2.5h3l1.5 3.5-1.5 1.5c1 2 2 3 4 4l1.5-1.5 3.5 1.5V14c0 .8-.7 1.4-1.5 1.3C5.5 14.7 1.3 10.5 1.2 5.5A1.5 1.5 0 012.5 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+ </svg>
+ <span class="mobile-call-bar-text">
+ <span class="mobile-call-bar-label">Tap to call</span>
+ <span class="mobile-call-bar-number">(905) 407-8567</span>
+ </span>
+</a>
+
+<!-- ─── HERO ─── -->
+<section id="hero">
+ <div class="hero-slideshow" aria-hidden="true">
+ <img class="hero-slide" src="jdb-hero-after.webp" width="1320" height="990" alt="" fetchpriority="high" decoding="async">
+ <img class="hero-slide" src="jdb-hero-2-optimized.webp" width="1920" height="1080" alt="" decoding="async">
+ <img class="hero-slide" src="jdb-hero-3.webp" width="1440" height="1082" alt="" decoding="async">
+ <img class="hero-slide" src="jdb-hero-4.webp" width="678" height="452" alt="" decoding="async">
+ </div>
+
+ <div class="hero-content">
+ <div class="hero-left">
+ <div class="hero-pill">
+ <div class="hero-pill-dot"></div>
+ Now accepting new clients · Burlington, ON
+ </div>
+ <h1 class="hero-h1">
+ We shape<br>
+ land into<br>
+ <em>something lasting.</em>
+ </h1>
+ </div>
+ <div class="hero-right">
+ <p class="hero-sub">Hardscapes, lawn care, garden beds, sod & more. Owner-operated by James B. — on every job, every time.</p>
+ <a href="#estimate" class="hero-cta">
+ Get a free estimate
+ <span class="hero-cta-arrow">→</span>
+ </a>
+ </div>
+ </div>
+ <div class="hero-rule"></div>
+</section>
+
+<!-- ─── MARQUEE ─── -->
+<div class="marquee-strip" aria-hidden="true">
+ <div class="marquee-inner">
+ <!-- doubled for infinite scroll illusion -->
+ <span class="marquee-item">Hardscapes & Interlock <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Lawn Maintenance <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Mulch Installation <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Sod Installation <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Garden Bed Renovations <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Junk Removal <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Seasonal Clean-Ups <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Free Estimates <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Hardscapes & Interlock <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Lawn Maintenance <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Mulch Installation <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Sod Installation <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Garden Bed Renovations <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Junk Removal <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Seasonal Clean-Ups <span class="marquee-sep">·</span></span>
+ <span class="marquee-item">Free Estimates <span class="marquee-sep">·</span></span>
+ </div>
+</div>
+
+<!-- ─── SERVICES ─── -->
+<section id="services">
+ <div class="services-watermark" aria-hidden="true">JDB</div>
+ <div class="services-header">
+ <div class="sr">
+ <span class="eyebrow">What we do</span>
+ <h2 class="section-h2">Every service,<br><em>done properly.</em></h2>
+ </div>
+ <p class="section-desc sr sr-right">From the first consultation to the last stone set — James is hands-on through the entire process. No sub-contractors, no surprises.</p>
+ </div>
+
+ <div class="service-list">
+
+ <div class="service-row sr sr-d1">
+ <div class="service-icon-wrap">
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="14" width="18" height="4" rx=".5"/><rect x="5" y="9" width="14" height="5" rx=".5"/><path d="M7 9V6a5 5 0 0 1 10 0v3"/></svg>
+ </div>
+ <div class="service-name-col">Hardscapes & Interlock</div>
+ <div class="service-desc-col">Patios, walkways, retaining walls, and driveways that age beautifully and hold their shape.</div>
+ <div class="service-tag">Most popular</div>
+ </div>
+
+ <div class="service-row sr sr-d2">
+ <div class="service-icon-wrap">
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 20V10"/><path d="M12 14c-3-4-8-4-9-2 3 0 6 2 9 5"/><path d="M12 12c3-5 8-5 10-3-3 .5-7 2-10 7"/></svg>
+ </div>
+ <div class="service-name-col">Lawn Maintenance</div>
+ <div class="service-desc-col">Regular mowing, edging, trimming, and seasonal care to keep your lawn looking its best year-round.</div>
+ <div class="service-tag">Recurring</div>
+ </div>
+
+ <div class="service-row sr sr-d3">
+ <div class="service-icon-wrap">
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><ellipse cx="12" cy="19" rx="9" ry="2"/><path d="M5 19V9.5C5 6.5 8 4 12 4s7 2.5 7 5.5V19"/><path d="M9 12c0-1.7 1.3-3 3-3s3 1.3 3 3"/></svg>
+ </div>
+ <div class="service-name-col">Mulch Installation</div>
+ <div class="service-desc-col">Fresh mulch delivered and spread to protect plant beds, retain moisture, and define edges cleanly.</div>
+ <div class="service-tag">Seasonal</div>
+ </div>
+
+ <div class="service-row sr sr-d4">
+ <div class="service-icon-wrap">
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="11" width="18" height="8" rx=".5"/><path d="M7 11V8a5 5 0 0 1 10 0v3"/><circle cx="12" cy="15" r="1.5"/></svg>
+ </div>
+ <div class="service-name-col">Garden Bed Renovations</div>
+ <div class="service-desc-col">Design, plant selection, and installation to bring tired or overgrown beds back to life.</div>
+ <div class="service-tag">Design included</div>
+ </div>
+
+ <div class="service-row sr sr-d5">
+ <div class="service-icon-wrap">
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 17c0-5 4-10 9-13 5 3 9 8 9 13"/><line x1="3" y1="17" x2="21" y2="17"/></svg>
+ </div>
+ <div class="service-name-col">Sod Installation</div>
+ <div class="service-desc-col">Professionally graded and laid premium sod for an instant, full, healthy lawn.</div>
+ <div class="service-tag">Fast results</div>
+ </div>
+
+ <div class="service-row sr sr-d6">
+ <div class="service-icon-wrap">
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+ </div>
+ <div class="service-name-col">Junk Removal</div>
+ <div class="service-desc-col">Clearing old materials, yard debris, and unwanted items — fast, clean, and responsible disposal.</div>
+ <div class="service-tag">Quick turnaround</div>
+ </div>
+
+ <div class="service-row sr sr-d7">
+ <div class="service-icon-wrap">
+ <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M4 12C4 7.6 7.6 4 12 4s8 3.6 8 8-3.6 8-8 8"/><path d="M12 8v4l3 3"/><path d="M4 16l-1 4 4-1"/></svg>
+ </div>
+ <div class="service-name-col">Seasonal Clean-Ups</div>
+ <div class="service-desc-col">Spring and fall property clean-ups that prepare your outdoor space for the season ahead.</div>
+ <div class="service-tag">Spring & Fall</div>
+ </div>
+
+ </div>
+</section>
+
+<!-- ─── ABOUT ─── -->
+<section id="about">
+ <div class="about-img-col sr sr-left">
+ <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=900&q=80" alt="Hands-on landscaping work" loading="lazy">
+ <div class="about-img-overlay"></div>
+ </div>
+ <div class="about-text-col sr sr-right">
+ <span class="eyebrow">About JDB</span>
+ <h2 class="about-h2">
+ James shows up.<br>
+ <em>Every single time.</em>
+ </h2>
+ <p class="about-body">
+ JDB Landscape is owner-operated by James B. — which means when you call, you talk to the person doing the work. Not a sales rep, not a dispatcher. James.
+ <br><br>
+ Built on word-of-mouth and repeat clients across Burlington and the surrounding region, JDB has earned a reputation for showing up on time, giving honest quotes, and not leaving until the job looks right.
+ </p>
+ <div class="about-badges">
+ <div class="badge"><span class="badge-icon">✓</span> Owner on every job</div>
+ <div class="badge"><span class="badge-icon">✓</span> Honest, flat-rate quotes</div>
+ <div class="badge"><span class="badge-icon">✓</span> No surprise add-ons</div>
+ <div class="badge"><span class="badge-icon">✓</span> Quality guaranteed</div>
+ <div class="badge"><span class="badge-icon">✓</span> Locally rooted</div>
+ </div>
+ </div>
+</section>
+
+<!-- ─── GALLERY ─── -->
+<section id="gallery">
+ <div class="gallery-header sr">
+ <div>
+ <span class="eyebrow">Our work</span>
+ <h2 class="section-h2">Results that<br><em>speak clearly.</em></h2>
+ </div>
+ <p class="gallery-note">A sample of recent projects across Burlington and surrounding areas.</p>
+ </div>
+
+ <div class="before-after sr sr-scale" data-before-after>
+ <img class="before-after-img" src="jdb_after.jpg" alt="Finished landscape project after JDB Landscape work">
+ <div class="before-after-overlay" aria-hidden="true">
+ <img class="before-after-img" src="jdb_before.jpg" alt="">
+ </div>
+ <span class="before-after-label before">Before</span>
+ <span class="before-after-label after">After</span>
+ <div class="before-after-divider"></div>
+ <div class="before-after-handle" aria-hidden="true">
+ <span></span>
+ <span></span>
+ </div>
+ <input class="before-after-range" type="range" min="0" max="100" value="50" aria-label="Compare before and after landscape project">
+ <div class="before-after-focus"></div>
+ </div>
+
+ <div class="gallery-bento">
+ <div class="gitem ga sr sr-scale sr-d1" role="button" tabindex="0" aria-label="View full size image of Interlock Patio in Burlington">
+ <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&q=80" alt="Interlock patio">
+ <div class="gitem-label">Interlock Patio · Burlington</div>
+ </div>
+ <div class="gitem gb sr sr-scale sr-d2" role="button" tabindex="0" aria-label="View full size image of Garden Beds in Mississauga">
+ <img src="https://images.unsplash.com/photo-1416331108676-a22ccb276e35?w=600&q=80" alt="Mulch bed">
+ <div class="gitem-label">Garden Beds · Mississauga</div>
+ </div>
+ <div class="gitem gc sr sr-scale sr-d3" role="button" tabindex="0" aria-label="View full size image of Lawn Install in Oakville">
+ <img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=600&q=80" alt="Lawn">
+ <div class="gitem-label">Lawn Install · Oakville</div>
+ </div>
+ <div class="gitem gd sr sr-scale sr-d4" role="button" tabindex="0" aria-label="View full size image of Garden Reno in Burlington">
+ <img src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=600&q=80" alt="Garden planting">
+ <div class="gitem-label">Garden Reno · Burlington</div>
+ </div>
+ <div class="gitem ge sr sr-scale sr-d5" role="button" tabindex="0" aria-label="View full size image of Property Clean-Up">
+ <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=600&q=80" alt="Property">
+ <div class="gitem-label">Property Clean-Up</div>
+ </div>
+ <div class="gitem gf sr sr-scale sr-d6" role="button" tabindex="0" aria-label="View full size image of Lawn Maintenance">
+ <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=500&q=80" alt="Edging">
+ <div class="gitem-label">Lawn Maintenance</div>
+ </div>
+ <div class="gitem gg sr sr-scale sr-d7" role="button" tabindex="0" aria-label="View full size image of Hardscape Walkway in Hamilton">
+ <img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?w=900&q=80" alt="Hardscape walkway">
+ <div class="gitem-label">Hardscape Walkway · Hamilton</div>
+ </div>
+ <div class="gitem gh sr sr-scale sr-d8" role="button" tabindex="0" aria-label="View full size image of Sod Installation in Milton">
+ <img src="https://images.unsplash.com/photo-1462275646964-a0e3386b89fa?w=600&q=80" alt="Sod">
+ <div class="gitem-label">Sod Installation · Milton</div>
+ </div>
+ </div>
+</section>
+
+<!-- ─── AREAS ─── -->
+<section id="areas">
+ <div class="areas-inner">
+ <div class="areas-map sr sr-left">
+ <iframe
+ title="Map showing JDB Landscape service areas around Burlington, Oakville, Hamilton, Mississauga, Milton and Niagara Region"
+ src="https://www.openstreetmap.org/export/embed.html?bbox=-80.25%2C42.82%2C-79.00%2C43.75&layer=mapnik&marker=43.3255%2C-79.7990"
+ loading="lazy"
+ referrerpolicy="no-referrer-when-downgrade"></iframe>
+ <a class="areas-map-link" href="https://www.openstreetmap.org/?mlat=43.3255&mlon=-79.7990#map=9/43.3255/-79.7990" target="_blank" rel="noopener">View larger map</a>
+ </div>
+ <div class="areas-list sr sr-right">
+ <span class="eyebrow">Service area</span>
+ <h2 class="section-h2">Close to home.<br><em>Wherever that is.</em></h2>
+ <div class="area-items">
+ <div class="area-item">
+ <div class="area-item-left">
+ <svg class="area-pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6c0-2.5-2-4.5-4.5-4.5z" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.3"/></svg>
+ <span class="area-name">Burlington</span>
+ </div>
+ <span class="area-badge primary">Primary area</span>
+ </div>
+ <div class="area-item">
+ <div class="area-item-left">
+ <svg class="area-pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6c0-2.5-2-4.5-4.5-4.5z" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.3"/></svg>
+ <span class="area-name">Oakville</span>
+ </div>
+ <span class="area-badge">Available</span>
+ </div>
+ <div class="area-item">
+ <div class="area-item-left">
+ <svg class="area-pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6c0-2.5-2-4.5-4.5-4.5z" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.3"/></svg>
+ <span class="area-name">Hamilton</span>
+ </div>
+ <span class="area-badge">Available</span>
+ </div>
+ <div class="area-item">
+ <div class="area-item-left">
+ <svg class="area-pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6c0-2.5-2-4.5-4.5-4.5z" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.3"/></svg>
+ <span class="area-name">Mississauga</span>
+ </div>
+ <span class="area-badge">Available</span>
+ </div>
+ <div class="area-item">
+ <div class="area-item-left">
+ <svg class="area-pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6c0-2.5-2-4.5-4.5-4.5z" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.3"/></svg>
+ <span class="area-name">Milton</span>
+ </div>
+ <span class="area-badge">Available</span>
+ </div>
+ <div class="area-item">
+ <div class="area-item-left">
+ <svg class="area-pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6c0-2.5-2-4.5-4.5-4.5z" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.3"/></svg>
+ <span class="area-name">Niagara Region</span>
+ </div>
+ <span class="area-badge">Available</span>
+ </div>
+ <div class="area-item">
+ <div class="area-item-left">
+ <svg class="area-pin-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5C5.5 1.5 3.5 3.5 3.5 6c0 3.5 4.5 8.5 4.5 8.5S12.5 9.5 12.5 6c0-2.5-2-4.5-4.5-4.5z" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="6" r="1.5" stroke="currentColor" stroke-width="1.3"/></svg>
+ <span class="area-name">And more</span>
+ </div>
+ <span class="area-badge">Ask us</span>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<!-- ─── ESTIMATE ─── -->
+<section id="estimate">
+ <div class="estimate-texture"></div>
+ <div class="estimate-inner">
+ <div class="estimate-left sr sr-left">
+ <span class="eyebrow">Free estimate</span>
+ <h2 class="section-h2">
+ Let's talk about<br>
+ <em>your property.</em>
+ </h2>
+ <p class="estimate-tagline">
+ No obligation. No sales pitch. Just James, giving you an honest look at what your project needs and what it'll cost — before you commit to anything.
+ </p>
+ <div class="contact-block">
+ <div class="contact-line">
+ <div class="contact-icon-wrap">
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 2.5h3l1.5 3.5-1.5 1.5c1 2 2 3 4 4l1.5-1.5 3.5 1.5V14c0 .8-.7 1.4-1.5 1.3C5.5 14.7 1.3 10.5 1.2 5.5A1.5 1.5 0 012.5 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
+ </div>
+ <a href="tel:9054078567">(905) 407-8567</a>
+ </div>
+ <div class="contact-line">
+ <div class="contact-icon-wrap">
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1.5" y="3.5" width="13" height="9" rx="1" stroke="currentColor" stroke-width="1.3"/><path d="M1.5 5.5l6.5 4 6.5-4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
+ </div>
+ <a href="mailto:[email protected]">[email protected]</a>
+ </div>
+ <div class="contact-line">
+ <div class="contact-icon-wrap">
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="4" y="1" width="8" height="14" rx="1.5" stroke="currentColor" stroke-width="1.3"/><circle cx="8" cy="12" r=".8" fill="currentColor"/></svg>
+ </div>
+ <span>Responds within 24 hours</span>
+ </div>
+ </div>
+ </div>
+
+ <form class="estimate-form sr sr-right" onsubmit="submitForm(event)">
+ <div class="form-row-2">
+ <div class="form-group">
+ <label class="form-label">First name</label>
+ <input class="form-input" type="text" placeholder="Sarah" required>
+ </div>
+ <div class="form-group">
+ <label class="form-label">Last name</label>
+ <input class="form-input" type="text" placeholder="Thompson" required>
+ </div>
+ </div>
+ <div class="form-row-2">
+ <div class="form-group">
+ <label class="form-label">Phone</label>
+ <input class="form-input" type="tel" placeholder="(905) 000-0000">
+ </div>
+ <div class="form-group">
+ <label class="form-label">Email</label>
+ <input class="form-input" type="email" placeholder="[email protected]" required>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="form-label">Service needed</label>
+ <select class="form-select" required>
+ <option value="" disabled selected>Select a service…</option>
+ <option>Hardscapes & Interlock</option>
+ <option>Lawn Maintenance</option>
+ <option>Mulch Installation</option>
+ <option>Garden Bed Renovation</option>
+ <option>Sod Installation</option>
+ <option>Junk Removal</option>
+ <option>Seasonal Clean-Up</option>
+ <option>Multiple services</option>
+ <option>Not sure yet</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label class="form-label">City / Area</label>
+ <input class="form-input" type="text" placeholder="Burlington, Oakville, Hamilton…">
+ </div>
+ <div class="form-group">
+ <label class="form-label">Tell us about the project</label>
+ <textarea class="form-textarea" placeholder="Size of the area, current state, what you're hoping for — anything helps James prepare for the visit."></textarea>
+ </div>
+ <button type="submit" class="form-submit">Send Request — It's Free</button>
+ <div class="form-success" id="formSuccess">
+ ✓ Request received. James will be in touch within 24 hours.
+ </div>
+ </form>
+ </div>
+</section>
+
+<!-- ─── FOOTER ─── -->
+<footer>
+ <div class="footer-top">
+ <div>
+ <div class="footer-brand-name">JDB<span>.</span>Landscape</div>
+ <p class="footer-tagline">Quality work. Fair prices.<br>Expectations exceeded.</p>
+ <div class="footer-social">
+ <a href="https://www.instagram.com/jdb_landscape/" target="_blank" rel="noopener" class="footer-social-link" title="Instagram">
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17.5" cy="6.5" r=".8" fill="currentColor" stroke="none"/></svg>
+ </a>
+ </div>
+ </div>
+ <div>
+ <div class="footer-col-title">Services</div>
+ <ul class="footer-links">
+ <li><a href="#services">Hardscapes & Interlock</a></li>
+ <li><a href="#services">Lawn Maintenance</a></li>
+ <li><a href="#services">Mulch Installation</a></li>
+ <li><a href="#services">Garden Bed Renovations</a></li>
+ <li><a href="#services">Sod Installation</a></li>
+ <li><a href="#services">Junk Removal</a></li>
+ </ul>
+ </div>
+ <div>
+ <div class="footer-col-title">Navigate</div>
+ <ul class="footer-links">
+ <li><a href="#about">About James</a></li>
+ <li><a href="#gallery">Our Work</a></li>
+ <li><a href="#areas">Service Areas</a></li>
+ <li><a href="#estimate">Free Estimate</a></li>
+ </ul>
+ </div>
+ <div>
+ <div class="footer-col-title">Contact</div>
+ <ul class="footer-links">
+ <li><a href="tel:9054078567">(905) 407-8567</a></li>
+ <li><a href="mailto:[email protected]">[email protected]</a></li>
+ <li><a href="https://www.instagram.com/jdb_landscape/">@jdb_landscape</a></li>
+ </ul>
+ <div style="margin-top:28px;">
+ <div class="footer-col-title">Hours</div>
+ <ul class="footer-links">
+ <li>Mon–Fri 7am – 7pm</li>
+ <li>Saturday 8am – 5pm</li>
+ <li>Sunday By appointment</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="footer-bottom">
+ <span>© 2025 JDB Landscape Services · Burlington, Ontario</span>
+ <span>Proudly serving Halton, Hamilton, Mississauga & Niagara Region</span>
+ </div>
+</footer>
+
+<div class="image-modal" id="image-modal" role="dialog" aria-modal="true" aria-hidden="true">
+ <button class="image-modal-close" type="button" aria-label="Close full screen image">×</button>
+ <img id="image-modal-img" src="" alt="">
+</div>
+
+<script>
+// ─── CURSOR ───
+const cur = document.getElementById('cur');
+const ring = document.getElementById('cur-ring');
+let mx = 0, my = 0, rx = 0, ry = 0;
+
+document.addEventListener('mousemove', e => {
+ mx = e.clientX; my = e.clientY;
+ cur.style.left = mx + 'px'; cur.style.top = my + 'px';
+});
+
+function animRing() {
+ rx += (mx - rx) * .12;
+ ry += (my - ry) * .12;
+ ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
+ requestAnimationFrame(animRing);
+}
+animRing();
+
+// ─── NAV ───
+const nav = document.getElementById('mainNav');
+const navToggle = document.querySelector('.nav-menu-toggle');
+const navWordmark = document.querySelector('.nav-wordmark');
+const heroSection = document.getElementById('hero');
+const mobileCallBar = document.querySelector('.mobile-call-bar');
+const navLinks = Array.from(document.querySelectorAll('[data-nav-link]'));
+const navSections = Array.from(
+ new Set(navLinks.map(link => link.hash.slice(1)).filter(Boolean))
+).map(id => document.getElementById(id)).filter(Boolean);
+const desktopNav = window.matchMedia('(min-width: 961px)');
+let navTicking = false;
+
+function setMenuOpen(open) {
+ nav.classList.toggle('menu-open', open);
+ navToggle.setAttribute('aria-expanded', String(open));
+ navToggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+}
+
+function updateActiveNav() {
+ const offset = nav.offsetHeight + 48;
+ let activeId = '';
+
+ navSections.forEach(section => {
+ if (window.scrollY + offset >= section.offsetTop) activeId = section.id;
+ });
+
+ if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 4) {
+ activeId = 'estimate';
+ }
+
+ navLinks.forEach(link => {
+ const isActive = link.hash === `#${activeId}`;
+ link.classList.toggle('is-active', isActive);
+ if (isActive) {
+ link.setAttribute('aria-current', 'page');
+ } else {
+ link.removeAttribute('aria-current');
+ }
+ });
+}
+
+function updateNav() {
+ nav.classList.toggle('stuck', window.scrollY > 60);
+ mobileCallBar.classList.toggle('is-visible', heroSection.getBoundingClientRect().bottom <= 0);
+ updateActiveNav();
+ navTicking = false;
+}
+
+navToggle.addEventListener('click', () => {
+ setMenuOpen(!nav.classList.contains('menu-open'));
+});
+
+navLinks.forEach(link => {
+ link.addEventListener('click', () => setMenuOpen(false));
+});
+navWordmark.addEventListener('click', () => setMenuOpen(false));
+
+document.addEventListener('click', e => {
+ if (nav.classList.contains('menu-open') && !nav.contains(e.target)) {
+ setMenuOpen(false);
+ }
+});
+
+document.addEventListener('keydown', e => {
+ if (e.key === 'Escape') setMenuOpen(false);
+});
+
+function handleNavBreakpoint(e) {
+ if (e.matches) setMenuOpen(false);
+}
+
+if (desktopNav.addEventListener) {
+ desktopNav.addEventListener('change', handleNavBreakpoint);
+} else {
+ desktopNav.addListener(handleNavBreakpoint);
+}
+
+window.addEventListener('scroll', () => {
+ if (!navTicking) {
+ requestAnimationFrame(updateNav);
+ navTicking = true;
+ }
+}, { passive: true });
+window.addEventListener('resize', updateNav);
+updateNav();
+
+// ─── BEFORE / AFTER SLIDER ───
+document.querySelectorAll('[data-before-after]').forEach(slider => {
+ const range = slider.querySelector('.before-after-range');
+
+ function setReveal(value) {
+ const reveal = Math.min(100, Math.max(0, Number(value)));
+ slider.style.setProperty('--reveal', `${reveal}%`);
+ range.setAttribute('aria-valuetext', `${Math.round(reveal)}% before visible`);
+ }
+
+ range.addEventListener('input', e => setReveal(e.target.value));
+ setReveal(range.value);
+});
+
+// ─── IMAGE MODAL ───
+const imageModal = document.getElementById('image-modal');
+const imageModalImg = document.getElementById('image-modal-img');
+const imageModalClose = imageModal.querySelector('.image-modal-close');
+let lastFocusedElement = null;
+
+function openImageModal(image) {
+ lastFocusedElement = document.activeElement;
+ imageModalImg.src = image.currentSrc || image.src;
+ imageModalImg.alt = image.alt;
+ imageModal.classList.add('is-open');
+ imageModal.setAttribute('aria-hidden', 'false');
+ document.body.classList.add('modal-open');
+ imageModalClose.focus();
+}
+
+function closeImageModal() {
+ imageModal.classList.remove('is-open');
+ imageModal.setAttribute('aria-hidden', 'true');
+ document.body.classList.remove('modal-open');
+ imageModalImg.removeAttribute('src');
+ imageModalImg.alt = '';
+
+ if (lastFocusedElement) {
+ lastFocusedElement.focus();
+ }
+}
+
+document.querySelectorAll('.gallery-bento .gitem').forEach(tile => {
+ tile.addEventListener('click', () => {
+ openImageModal(tile.querySelector('img'));
+ });
+
+ tile.addEventListener('keydown', event => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ openImageModal(tile.querySelector('img'));
+ }
+ });
+});
+
+imageModalClose.addEventListener('click', closeImageModal);
+
+imageModal.addEventListener('click', event => {
+ if (event.target === imageModal) {
+ closeImageModal();
+ }
+});
+
+document.addEventListener('keydown', event => {
+ if (event.key === 'Escape' && imageModal.classList.contains('is-open')) {
+ closeImageModal();
+ }
+});
+
+// ─── SCROLL REVEAL ───
+const srEls = document.querySelectorAll('.sr');
+const obs = new IntersectionObserver(entries => {
+ entries.forEach(e => {
+ if (e.isIntersecting) {
+ e.target.classList.add('in');
+ obs.unobserve(e.target);
+ }
+ });
+}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
+srEls.forEach(el => obs.observe(el));
+
+// ─── FORM ───
+function submitForm(e) {
+ e.preventDefault();
+ const btn = e.target.querySelector('.form-submit');
+ btn.textContent = 'Sending…';
+ btn.disabled = true;
+ setTimeout(() => {
+ btn.textContent = 'Sent ✓';
+ document.getElementById('formSuccess').style.display = 'block';
+ }, 900);
+}
+</script>
+</body>
+</html>
diff --git a/docs/jdb_after.jpg b/docs/jdb_after.jpg
new file mode 100644
index 0000000..48ac995
Binary files /dev/null and b/docs/jdb_after.jpg differ
diff --git a/docs/jdb_before.jpg b/docs/jdb_before.jpg
new file mode 100644
index 0000000..59dd4d5
Binary files /dev/null and b/docs/jdb_before.jpg differ