Fix: use relative paths throughout for local file:// compatibility

src/_includes/components/cta-band.njk

@@ -3,6 +3,6 @@
     <p class="section-eyebrow">Ready to get started?</p>
     <h2 class="cta-band__title">Let's talk about your project.</h2>
     <p class="cta-band__sub">Diana responds within 1&ndash;2 business days.</p>
-    <a href="/contact/" class="btn btn--ghost-white">Request a Quote</a>
+    <a href="{{ rootPath }}contact/" class="btn btn--ghost-white">Request a Quote</a>
   </div>
 </section>

src/_includes/components/footer.njk

@@ -2,7 +2,7 @@
   <div class="footer__inner container">
 
     <div>
-      <a href="/" class="footer__brand">HER</a>
+      <a href="{{ rootPath }}" class="footer__brand">HER</a>
       <p class="footer__tagline">Home Enhancement and Renovation<br>San Francisco &amp; Bay Area</p>
     </div>
 
@@ -10,7 +10,7 @@
       <p class="footer__nav-heading">Services</p>
       <ul class="footer__nav" role="list">
         {% for service in services %}
-        <li><a href="/services/{{ service.slug }}/">{{ service.name }}</a></li>
+        <li><a href="{{ rootPath }}services/{{ service.slug }}/">{{ service.name }}</a></li>
         {% endfor %}
       </ul>
     </nav>

src/_includes/components/nav.njk

@@ -3,14 +3,14 @@
 <header class="nav" role="banner">
   <div class="nav__inner container">
 
-    <a href="/" class="nav__brand" aria-label="HER Home Enhancement and Renovation — Home">HER</a>
+    <a href="{{ rootPath }}" class="nav__brand" aria-label="HER Home Enhancement and Renovation — Home">HER</a>
 
     <nav aria-label="Main navigation">
       <ul class="nav__links" role="list">
-        <li><a href="/about/">About</a></li>
+        <li><a href="{{ rootPath }}about/">About</a></li>
-        <li><a href="/services/">Services</a></li>
+        <li><a href="{{ rootPath }}services/">Services</a></li>
-        <li><a href="/testimonials/">Testimonials</a></li>
+        <li><a href="{{ rootPath }}testimonials/">Testimonials</a></li>
-        <li><a href="/contact/">Contact</a></li>
+        <li><a href="{{ rootPath }}contact/">Contact</a></li>
       </ul>
     </nav>
 
@@ -21,7 +21,7 @@
         </svg>
       </a>
 
-      <a href="/contact/" class="btn btn--primary" style="display:none" id="nav-cta">Request a Quote</a>
+      <a href="{{ rootPath }}contact/" class="btn btn--primary" style="display:none" id="nav-cta">Request a Quote</a>
 
       <button
         class="nav__toggle"
@@ -42,13 +42,13 @@
     <button class="nav__overlay-close" aria-label="Close menu">&#x2715;</button>
     <nav aria-label="Mobile navigation">
       <ul role="list">
-        <li><a href="/about/">About</a></li>
+        <li><a href="{{ rootPath }}about/">About</a></li>
-        <li><a href="/services/">Services</a></li>
+        <li><a href="{{ rootPath }}services/">Services</a></li>
-        <li><a href="/testimonials/">Testimonials</a></li>
+        <li><a href="{{ rootPath }}testimonials/">Testimonials</a></li>
-        <li><a href="/contact/">Contact</a></li>
+        <li><a href="{{ rootPath }}contact/">Contact</a></li>
       </ul>
     </nav>
-    <a href="/contact/" class="btn btn--ghost-white btn--full">Request a Quote</a>
+    <a href="{{ rootPath }}contact/" class="btn btn--ghost-white btn--full">Request a Quote</a>
     <a href="{{ site.phone | telHref }}" class="nav__overlay-phone">{{ site.phoneDisplay }}</a>
   </div>
 

src/_includes/layouts/base.njk

@@ -29,7 +29,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600&display=swap">
 
-  <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="{{ rootPath }}css/main.css">
 
   {# Page-specific schema (e.g. Service schema passed via frontmatter) #}
   {% if schema %}
@@ -78,6 +78,6 @@
 
   {% include "components/footer.njk" %}
 
-  <script src="/js/main.js" defer></script>
+  <script src="{{ rootPath }}js/main.js" defer></script>
 </body>
 </html>

src/_includes/layouts/service.njk

@@ -25,15 +25,15 @@ layout: layouts/base.njk
   <div class="page-hero__inner container">
     <nav class="breadcrumb" aria-label="Breadcrumb">
       <ol role="list">
-        <li><a href="/">Home</a></li>
+        <li><a href="{{ rootPath }}">Home</a></li>
-        <li><a href="/services/">Services</a></li>
+        <li><a href="{{ rootPath }}services/">Services</a></li>
         <li aria-current="page">{{ _title }}</li>
       </ol>
     </nav>
     <p class="section-eyebrow">{{ _eyebrow }}</p>
     <h1 class="page-hero__title">{{ _title }}</h1>
     <p class="page-hero__lead">{{ _lead }}</p>
-    <a href="/contact/" class="btn btn--primary">Request a Quote</a>
+    <a href="{{ rootPath }}contact/" class="btn btn--primary">Request a Quote</a>
   </div>
 </section>
 
@@ -45,7 +45,7 @@ layout: layouts/base.njk
       {% for image in _images %}
       <figure>
         <img
-          src="/assets/{{ image.file }}"
+          src="{{ rootPath }}assets/{{ image.file }}"
           alt="{{ image.alt }}"
           loading="{% if loop.first %}eager{% else %}lazy{% endif %}"
           width="800"
@@ -70,7 +70,7 @@ layout: layouts/base.njk
         <p>Diana serves San Francisco and the wider Bay Area within 50 miles, including Oakland, Berkeley, Marin County, Palo Alto, and beyond.</p>
       </div>
 
-      <a href="/contact/" class="btn btn--primary">Request a Quote</a>
+      <a href="{{ rootPath }}contact/" class="btn btn--primary">Request a Quote</a>
     </div>
 
   </div>

src/about.njk

@@ -19,7 +19,7 @@ ogImage: "diana_photo-min-1-scaled.webp"
 
     <div class="about-page__image">
       <img
-        src="/assets/diana_photo-min-1-scaled.webp"
+        src="{{ rootPath }}assets/diana_photo-min-1-scaled.webp"
         alt="Diana on a sailboat with the Golden Gate Bridge in the background."
         loading="eager"
         width="800"
@@ -41,7 +41,7 @@ ogImage: "diana_photo-min-1-scaled.webp"
         <p>Over 200 tile installations. Multimillion-dollar aerospace projects. Now she's working on yours.</p>
       </blockquote>
 
-      <a href="/contact/" class="btn btn--primary">Request a Quote</a>
+      <a href="{{ rootPath }}contact/" class="btn btn--primary">Request a Quote</a>
     </div>
 
   </div>

src/index.njk

@@ -15,7 +15,7 @@ ogImage: "diana_photo-min-1-scaled.webp"
       <p class="lead-text">Precise, reliable, and easy to work with — Diana brings aerospace-level project coordination to your home improvement project.</p>
 
       <div class="hero__actions">
-        <a href="/contact/" class="btn btn--primary">Request a Quote</a>
+        <a href="{{ rootPath }}contact/" class="btn btn--primary">Request a Quote</a>
         <div class="hero__contact">
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
             <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.5 16h.5a2 2 0 0 1 .02.92z"/>
@@ -27,7 +27,7 @@ ogImage: "diana_photo-min-1-scaled.webp"
 
     <div class="hero__image">
       <img
-        src="/assets/diana_photo-min-1-scaled.webp"
+        src="{{ rootPath }}assets/diana_photo-min-1-scaled.webp"
         alt="Diana on a sailboat with the Golden Gate Bridge in the background, smiling."
         loading="eager"
         fetchpriority="high"
@@ -48,10 +48,10 @@ ogImage: "diana_photo-min-1-scaled.webp"
 
   <div class="services-grid container">
     {% for service in services %}
-    <a href="/services/{{ service.slug }}/" class="service-card fade-up">
+    <a href="{{ rootPath }}services/{{ service.slug }}/" class="service-card fade-up">
       <div class="service-card__image">
         <img
-          src="/assets/{{ service.images[0].file }}"
+          src="{{ rootPath }}assets/{{ service.images[0].file }}"
           alt="{{ service.images[0].alt }}"
           loading="lazy"
         >
@@ -111,7 +111,7 @@ ogImage: "diana_photo-min-1-scaled.webp"
   <div class="testimonials-strip__header container">
     <p class="section-eyebrow">Client reviews</p>
     <h2>What people say.</h2>
-    <a href="/testimonials/" class="btn btn--secondary">All reviews</a>
+    <a href="{{ rootPath }}testimonials/" class="btn btn--secondary">All reviews</a>
   </div>
 
   <div class="testimonials-grid container">

src/services/index.njk

@@ -21,10 +21,10 @@ description: "Browse Diana's services — painting, tile setting, drywall, plumb
 
   <div class="services-grid container">
     {% for service in services %}
-    <a href="/services/{{ service.slug }}/" class="service-card fade-up">
+    <a href="{{ rootPath }}services/{{ service.slug }}/" class="service-card fade-up">
       <div class="service-card__image">
         <img
-          src="/assets/{{ service.images[0].file }}"
+          src="{{ rootPath }}assets/{{ service.images[0].file }}"
           alt="{{ service.images[0].alt }}"
           loading="lazy"
         >

src/src.11tydata.js

@@ -0,0 +1,19 @@
+// Directory data file: applies eleventyComputed to every template in src/
+// and all subdirectories.  Provides `rootPath` — the relative prefix needed
+// to reach the site root from the current page.
+//
+// Examples:
+//   /                 → "./"
+//   /about/           → "../"
+//   /services/        → "../"
+//   /services/painting/ → "../../"
+
+module.exports = {
+  eleventyComputed: {
+    rootPath: (data) => {
+      const url = data.page.url || "/";
+      const depth = url.split("/").filter((s) => s.length > 0).length;
+      return depth === 0 ? "./" : "../".repeat(depth);
+    },
+  },
+};