From 66b133b2bf6efa1f7744ae8be65836939d32234a Mon Sep 17 00:00:00 2001
From: sotrali <vesspa0330@gmail.com>
Date: Sun, 11 Jan 2026 21:33:06 -0500
Subject: [PATCH] serious restructure (gallery to index, service jumps)

---
 index.html        |  196 +++++++-
 reviews.html      |  147 ------
 services.html     | 1092 ++++++++++++++++++++-------------------------
 services2.html    |  589 ------------------------
 services_old.html |  746 +++++++++++++++++++++++++++++++
 5 files changed, 1399 insertions(+), 1371 deletions(-)
 delete mode 100644 services2.html
 create mode 100644 services_old.html

diff --git a/index.html b/index.html
index e71aead..2721fc3 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,13 @@
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/dropdown.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
+    <!-- juxtapose is the image slider / comparison tool-->
+    <link href="css/juxtapose.css" rel="stylesheet" />
+
     <style>
-      /** PAGE SPECIFIC STYLING */
+      .jx-handle, .jx-arrow {
+        background-color: rgba(0,0,0,0);
+      }
 
       main {
         min-height: 530px; /** to make sure footer doesn't overlap hero */
@@ -38,6 +43,55 @@
         padding-bottom: 2rem;
       }
 
+      .jumpLink h2 { transition: ease 0.2s; }
+      .jumpLink h2:hover { color: var(--gold); }
+
+      h2 {
+        color: white;
+      }
+       
+      /** GALLERY */
+      #gallery {
+        min-width: 100%;
+      }
+      #imageContainer {
+        display: flex;
+        width: 90%;
+        flex-direction: column;
+        align-items: center;
+      }
+      #imageContainer {
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-between;
+          gap: 2rem;
+      }
+
+      /** JUXTAPOSE ADJUSTMENTS **/
+      a.jx-knightlab div.knightlab-logo {
+        visibility: hidden !important;
+        display: none !important;
+      }
+
+      a.jx-knightlab span.juxtapose-name {
+        visibility: hidden !important;
+        display: none !important;
+      }
+      .juxtapose img {
+        border-radius: 2rem;
+      }
+      div.jx-slider {
+        color: var(--gold) !important;
+      }
+
+      div.jx-arrow.jx-left {
+        border-color: transparent var(--gold) transparent transparent;
+      }
+      div.jx-arrow.jx-right {
+        border-color: transparent transparent transparent var(--gold);
+      }
+
       /** BOOK NOW big button */
       #book-button {
         height: 7rem;
@@ -76,20 +130,15 @@
         text-decoration: none;
       }
 
-      h2 {
-        color: white;
-      }
-
       /** MOBILE */
       @media screen and (max-width: 850px) {
         #hero-image {
           background: url("assets/img/aden-mobile.jpg") center 10% / 100%
             no-repeat;
-          height: 300px;
+          height: 275px;
         }
 
         main {
-          gap: 2rem;
         }
 
         #intro {
@@ -103,6 +152,11 @@
         }
         #book-link {
         }
+
+        #imageContainer {
+          flex-direction: column;
+          gap: 2rem;
+        }
       }
     </style>
   </head>
@@ -141,16 +195,35 @@
         <p>with the best mobile car detailing service in the Portland area</p>
       </section>
 
-      <a
-        href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5"
-        target="_blank"
-        id="book-link"
-      >
-        <button id="book-button">BOOK NOW</button>
-      </a> 
+      <div id="tableOfContents">
+        <h1>Our Services</h1>
+        <div id="categoryLinks">
+          <a href="./services.html?jumpTarget=ceramic"  class="jumpLink"><h2>Ceramic Coating</h2></a>
+          <a href="./services.html?jumpTarget=paint"    class="jumpLink"><h2>Polish & Paint Correction</h2></a>
+          <a href="./services.html?jumpTarget=exterior" class="jumpLink"><h2>Exterior Detailing</h2></a>
+          <a href="./services.html?jumpTarget=interior" class="jumpLink"><h2>Interior Detailing</h2></a>
+        </div>
+      </div>
+
+      <section id="gallery">
+        <h1 style="margin-bottom: 2rem">Before & After Gallery</h1>
+        <div id="imageContainer">
+
+          <div class="juxtapose">
+            <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
+            <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
+          </div>
+
+          <div class="juxtapose">
+            <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
+            <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
+          </div>
+
+        </div>
+      </section> 
 
       <section id="FAQ">
-        <h1 style="margin-bottom: 2rem">FAQ</h1>
+        <h1 style="">FAQ</h1>
 
         <div class="faq-item">
           <div class="faq-question">
@@ -160,8 +233,15 @@
             this is where we answer the question in the header
           </div>
         </div>
+      </section>
 
-       </section>
+      <a
+        href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5"
+        target="_blank"
+        id="book-link"
+      >
+        <button id="book-button">BOOK NOW</button>
+      </a>
     </main>
 
     <footer>
@@ -182,5 +262,89 @@
     </footer>
     <script src="js/hamburger.js"></script>
     <script src="js/dropdown.js"></script>
+    <script src="js/juxtapose.js"></script>
+    <script>
+      /** page init */
+      window.onload = function () {
+        // set listener to jiggle gallery sliders
+        window.addEventListener("scroll", jiggleGallerySliders);
+        // set listener for overriding gallery resize logic
+        window.addEventListener("resize", setImageSizes);
+        // initialize gallery image sizes by feigning resize upon init
+        setImageSizes();
+      };
+
+      /** gallery jiggling (indicate to user they can slide images for comparison) */
+      let jiggled = false;
+      let jiggleThreshold = document.getElementById("hero-image").offsetHeight +
+        document.getElementById("intro").offsetHeight + 
+        document.getElementById("FAQ").offsetHeight + 50;
+      async function jiggleGallerySliders() {
+        // ensure threshold was initialized + jiggle only once per page load 
+        if (!jiggleThreshold || jiggled) return;
+
+        // ensure jiggle only triggers upon gallery scrolling into view
+        if (window.scrollY < jiggleThreshold) return;
+        jiggled = true;
+
+        // once user scrolls to gallery, move sliders on all images right a bit
+        let sliders = juxtapose.sliders;
+        for (let i = 0; i < sliders.length; i++) {
+          sliders[i].updateSlider(60, true);
+        }
+        
+        // sleep, then slide them all left,
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        for (let i = 0; i < sliders.length; i++) {
+          sliders[i].updateSlider(40, true);
+        }
+
+        // sleep, then reset sliders back to center
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        for (let i = 0; i < sliders.length; i++) {
+          sliders[i].updateSlider(50, true);
+        }
+      }
+
+
+      /** override logic for 'juxtapose' image scaling based on window size changes */
+      function setImageSizes() {
+        let isDesktop = window.innerWidth > 850;
+        let newWidth, newHeight;
+
+        if (isDesktop) {
+          newWidth  =  window.innerWidth   * 0.40;
+        }
+        else {
+          newWidth  = window.innerWidth  * 0.80;
+        }
+
+        // keep all images at 1:1.2 ratio
+        newHeight = newWidth * 1.2;
+
+        // resize iframes
+        let images = document.getElementsByClassName("juxtapose");
+        for (let i = 0; i < images.length; i++) {
+          images[i].style.width = newWidth + 'px';
+          images[i].style.height = newHeight + 'px';
+        }
+        
+        // resize images in each iframe to match new dimensions
+        images = document.getElementsByClassName("jx-image");
+        for (let i = 0; i < images.length; i++) {
+          images[i].style.width  = newWidth  + 'px';
+          images[i].style.height = newHeight + 'px';
+          images[i].children[0].style.width  = newWidth  + 'px';
+          images[i].children[0].style.height = newHeight + 'px';
+        }
+
+        // quickly touch every iframe/slider (otherwise the images glitch out until user interacts with slider again)
+        let sliders = juxtapose.sliders;
+        for (let i = 0; i < sliders.length; i++) {
+          sliders[i].updateSlider(sliders[i].sliderPosition.replace("%", ""), true);
+        }
+
+      }
+    </script>
   </body>
 </html>
diff --git a/reviews.html b/reviews.html
index f4fabb2..7a47ea3 100644
--- a/reviews.html
+++ b/reviews.html
@@ -9,18 +9,12 @@
     <title>Luxury Detailing Maine</title>
     <link href="css/style.css" rel="stylesheet" />
     <link href="css/hamburger.css" rel="stylesheet" />
-    <!-- juxtapose is the image slider / comparison tool-->
-    <link href="css/juxtapose.css" rel="stylesheet" />
 
     <style>
       h1 {
         margin-bottom: 6rem;
       }
 
-      .jx-handle, .jx-arrow {
-        background-color: rgba(0,0,0,0);
-      }
-
       /** REVIEWS */
       #reviews {
         margin-top: 7rem;
@@ -84,41 +78,6 @@
         color: white;
         align-self: center;
       }
-
-      /** GALLERY */
-      #gallery {
-        min-width: 100%;
-      }
-      #imageContainer {
-        display: flex;
-        width: 90%;
-        flex-direction: column;
-        align-items: center;
-      }
-
-      /** JUXTAPOSE ADJUSTMENTS **/
-      a.jx-knightlab div.knightlab-logo {
-        visibility: hidden !important;
-        display: none !important;
-      }
-
-      a.jx-knightlab span.juxtapose-name {
-        visibility: hidden !important;
-        display: none !important;
-      }
-      .juxtapose img {
-        border-radius: 2rem;
-      }
-      div.jx-slider {
-        color: var(--gold) !important;
-      }
-
-      div.jx-arrow.jx-left {
-        border-color: transparent var(--gold) transparent transparent;
-      }
-      div.jx-arrow.jx-right {
-        border-color: transparent transparent transparent var(--gold);
-      }
      
       /************************************************
        * DESKTOP RULES 
@@ -132,15 +91,6 @@
           width: 25rem;
           height: min-content;
         }
-
-        #imageContainer {
-          flex-direction: row;
-          flex-wrap: wrap;
-          align-items: center;
-          justify-content: space-between;
-          gap: 2rem;
-        }
-
       }
 
       /* 
@@ -151,12 +101,6 @@
           flex-direction: column;
         }
 
-
-        #imageContainer {
-          flex-direction: column;
-          gap: 2rem;
-        }
-
         .review-card {
           width: 90%;
         }
@@ -196,24 +140,6 @@
       <section id="reviews">
         <div id="reviewContainer"></div>
       </section>
-
-     
-      <section id="gallery">
-        <h1>Before & After Gallery</h1>
-        <div id="imageContainer">
-
-          <div class="juxtapose">
-            <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
-            <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
-          </div>
-
-          <div class="juxtapose">
-            <img src="assets/img/before1.jpg" alt="An interior of a car trunk, the floor is covered in dirt and grass." />
-            <img src="assets/img/after1.jpg" alt="The same trunk after it has been restored to like-new condition." />
-          </div>
-
-        </div>
-      </section>
     </main>
 
     <footer>
@@ -233,7 +159,6 @@
       </div>
     </footer>
     <script src="js/hamburger.js"></script>
-    <script src="js/juxtapose.js"></script>
     <script>
       /** script stuff just for this page */
       
@@ -243,7 +168,6 @@
       window.onload = function () {
         // first, insert all reviews into the page
         insertReviews(reviewData);
-        jiggleThreshold = document.getElementById("reviews").offsetHeight + 50;
         // set listener to jiggle gallery sliders
         window.addEventListener("scroll", jiggleGallerySliders);
         // set listener for overriding gallery resize logic
@@ -316,79 +240,8 @@
           );
         }
       }
-
-      /** gallery jiggling (indicate to user they can slide images for comparison) */
-      let jiggled = false;
-      let jiggleThreshold;
-      async function jiggleGallerySliders() {
-        // ensure threshold was initialized + jiggle only once per page load 
-        if (!jiggleThreshold || jiggled) return;
-
-        // ensure jiggle only triggers upon gallery scrolling into view
-        if (window.scrollY < jiggleThreshold) return;
-        jiggled = true;
-
-        // once user scrolls to gallery, move sliders on all images right a bit
-        let sliders = juxtapose.sliders;
-        for (let i = 0; i < sliders.length; i++) {
-          sliders[i].updateSlider(60, true);
-        }
-        
-        // sleep, then slide them all left,
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        for (let i = 0; i < sliders.length; i++) {
-          sliders[i].updateSlider(40, true);
-        }
-
-        // sleep, then reset sliders back to center
-        await new Promise(resolve => setTimeout(resolve, 1000));
-        for (let i = 0; i < sliders.length; i++) {
-          sliders[i].updateSlider(50, true);
-        }
-      }
-
-
-      /** override logic for 'juxtapose' image scaling based on window size changes */
-      function setImageSizes() {
-        let isDesktop = window.innerWidth > 850;
-        let newWidth, newHeight;
-
-        if (isDesktop) {
-          newWidth  =  window.innerWidth   * 0.40;
-        }
-        else {
-          newWidth  = window.innerWidth  * 0.80;
-        }
-
-        // keep all images at 1:1.2 ratio
-        newHeight = newWidth * 1.2;
-
-        // resize iframes
-        let images = document.getElementsByClassName("juxtapose");
-        for (let i = 0; i < images.length; i++) {
-          images[i].style.width = newWidth + 'px';
-          images[i].style.height = newHeight + 'px';
-        }
-        
-        // resize images in each iframe to match new dimensions
-        images = document.getElementsByClassName("jx-image");
-        for (let i = 0; i < images.length; i++) {
-          images[i].style.width  = newWidth  + 'px';
-          images[i].style.height = newHeight + 'px';
-          images[i].children[0].style.width  = newWidth  + 'px';
-          images[i].children[0].style.height = newHeight + 'px';
-        }
-
-        // quickly touch every iframe/slider (otherwise the images glitch out until user interacts with slider again)
-        let sliders = juxtapose.sliders;
-        for (let i = 0; i < sliders.length; i++) {
-          sliders[i].updateSlider(sliders[i].sliderPosition.replace("%", ""), true);
-        }
-
-      }
     </script>
     
     <!-- <script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script> -->
-
   </body>
 </html>
diff --git a/services.html b/services.html
index a05a975..2c5da8f 100644
--- a/services.html
+++ b/services.html
@@ -13,13 +13,131 @@
     <link href="css/hamburger.css" rel="stylesheet" />
     
     <style>
-      section {
-        max-width: 75%;
-        width: 75%;
-        gap: 2rem;
-        margin-top: 1rem;
+      html { scroll-behavior: smooth; }
+
+      main {
+        gap: 12rem;
       }
 
+      h1 {
+         margin-top: 12rem; 
+      }
+
+      /** landings are used to jump slightly above categories */
+      .landing { top: 3rem; position: relative; }
+
+      #categoryLinks {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        align-items: center;
+        gap: 5rem;
+
+        margin-top: 5rem;
+      }
+
+      .jumpLink {
+        display: flex;
+        align-items: center;;
+        
+        height: 8rem;
+        padding: 0 5rem;
+        
+        text-decoration: none;
+        color: var(--black);
+
+        background-color: var(--gold);
+        
+        border-radius: 1rem;
+        
+        transition: 0.3s ease;
+      }
+      .jumpLink:hover {
+        color: white;  
+      }
+      .jumpLink a, .jumpLink h2 {
+        color: var(--black);
+        background-color: var(--gold);
+      }
+
+      #categoryContainer {
+        width: 90%;
+        height: 100%;
+      }
+
+      .serviceContainer {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        margin: 3rem 0;
+      }
+
+      #tableOfContents {
+        width: 90%;
+        margin-bottom: 25vh;
+      }
+
+
+      /** Services */
+      a.service { text-decoration: none;}
+      .service {
+        display: flex;
+        flex-direction: column;
+
+        height: 100%;
+
+        width: 45%;
+      }
+
+      .card {
+        padding: 3rem;
+        border: 2px solid var(--gold);
+        border-radius: 1rem;
+
+        transition: 0.5s ease;
+        color: white;
+        width: 100%;
+      }
+      .card:hover {
+        border: 2px solid white;
+      }
+
+      .card-head {
+        margin-bottom: 2rem;
+      }
+
+      .card-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        text-align: left;
+        width: 100%;
+      }
+
+      /** .card-body span {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+
+        width: 50%;
+      }*/
+      .card-body span {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+
+        width: 100%;
+      }
+      .card-body span h3 {
+        text-align: center;
+      }
+
+
+
+      /** Booking Button */
       .book-button {
         background-color: var(--black);
         color: var(--gold);
@@ -47,122 +165,7 @@
       .book-link {
         user-select: none;
       } 
-
-      /** Dropdown Menu Style Overrides */
-
-      .dropdown {
-        width: 100%;
-        border: 1px solid var(--light-gold);
-        border-radius: 1.25rem;
-        transition: 0.5s;
-        user-select: none;
-      }
-      .dropdown:hover {
-        border: 1px solid white;
-      }
-
-      /** Prevent nested dropdowns from having borders */
-      .dropdown .dropdown {
-        border-left: none;
-        border-right: none;
-        border-bottom: none;
-        border-radius: 1.25rem 1.25rem 0 0;
-      }
-
-      .dropdown-header {
-        align-items: center;
-        justify-content: flex-start;
-        gap: 1rem;
-        text-align: left;
-
-        background-color: var(--black);
-        color: var(--gold);
-        width: 100%;
-        height: 100%;
-
-        padding: 1.5rem 4rem 2rem 4rem;
-        border: none;
-        border-radius: 1.25rem;
-
-        transition: 2s;
-      }
-      .dropdown-header:hover {
-        border: none;
-      }
       
-      .dropdown-arrow {
-        transform: rotate(-90deg);
-      }
-      .dropdown-arrow.open {
-        transform: rotate(0deg);
-      }
-
-      .dropdown-header:hover span {
-        transform: rotate(-65deg); /** arrow hover effect */
-      }
-
-      .dropdown-header div {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-
-      hr {
-        border-color: var(--gold);
-      }
-
-      .dropdown-content {
-        visibility: hidden;
-        text-align: left;
-        border: none;
-        /** closing speed */
-        transition: max-height .3s ease;
-      }
-      /** service section dropdowns that are v long */
-      .dropdown-content.open-longest {
-        visibility: visible;
-        max-height: 1100px;
-        /** opening speed */
-        transition: max-height 1s ease;
-      }
-      /** service section dropdowns */
-      .dropdown-content.open-long {
-        visibility: visible;
-        max-height: 1100px;
-        /** opening speed */
-        transition: max-height 1s ease;
-      }
-      /** dropdowns holding specific service info */
-      .dropdown-content.open {
-        visibility: visible;
-        max-height: 400px;
-        /** opening speed */
-        transition: max-height .5s ease;
-      }
-
-      .dropdown-body {
-        display: flex;
-        flex-direction: row;
-        justify-items: space-around;
-        align-items: flex-start;
-        flex-wrap: wrap;
-
-        margin: 1rem 1rem 0rem 6rem;
-
-        user-select: text;
-      }
-
-      .dropdown-body p {
-        padding-right: 4rem;
-      }
-      .dropdown-body-half {
-        flex-basis: 50%;
-      }
-      .dropdown-button {
-        width: 100%;
-        margin: 2rem 1rem 2.5rem 6rem;
-      }
-
       /** mobile rules */
       /** MOBILE */
       @media screen and (max-width: 850px) {
@@ -176,41 +179,6 @@
         h2 {
           font-size: 1.5rem;
         }
-
-        .dropdown-header {
-          padding: 1.5rem 1rem 2rem 1rem;
-        }
-
-        /** service section dropdowns that are v long */
-        .dropdown-content.open-longest {
-          max-height: 1700px;
-          /** opening speed */
-          transition: max-height 1s ease;
-        }
-        /** service section dropdowns */
-        .dropdown-content.open-long {
-          max-height: 1450px;
-          /** opening speed */
-          transition: max-height 1s ease;
-        }
-        /** dropdowns holding specific service info */
-        .dropdown-content.open {
-          max-height: 600px;
-          /** opening speed */
-          transition: max-height .5s ease;
-        }
-
-        .dropdown-body {
-          margin: 1rem 1rem 0rem 3rem;
-          flex-direction: column;
-        }
-        .dropdown-body span:not(:first-child) {
-          margin-top: 1.5rem;
-        }
-        .dropdown-body p {
-          padding-right: 0rem;
-        }
-        
       }
     </style>
   </head>
@@ -243,457 +211,43 @@
 
     <main id="main-content">
 
-      <!-- SERVICE PACKAGE SECTION -->
-      <section id="packages">
-        <div class="dropdown long" aria-expanded="false">
-          <button class="dropdown-header" onclick="toggleDropdown(this)">
-            <span class="dropdown-arrow">▼</span> 
-            <h1>Service Packages</h1>
-          </button>
-          <div class="dropdown-content">
-
-            <!-- LEVEL ONE PACKAGE -->
-            <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Level One</h2>
-                  <p>Give your car the time, love, and care it deserves.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <span class="dropdown-body-half">
-                    <h3>Interior</h3>
-                    <ul>
-                      <li>Vacuum & light carpet shampooing</li>
-                      <li>Plastics, leather, and vinyls cleaning</li>
-                      <li>Light seat shampooing</li>
-                      <li>Interior & exterior window cleaning</li>
-                      <li>Crack & crevice cleaning</li>
-                    </ul>
-                  </span>
-
-                  <span class="dropdown-body-half">
-                    <h3>Exterior</h3>
-                    <ul>
-                      <li>Hand wash & dry</li>
-                      <li>Bug gut removal</li>
-                      <li>Tire, wheel, and wheel well cleaning + tire shine</li>
-                      <li>Window cleaning</li>
-                      <li>Light door jam cleaning</li>
-                    </ul>
-                  </span>
-                </div>
-
-                <div class="dropdown-button">
-                  <a target="_blank" class="book-link" tabindex="-1" 
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
-                  >
-                    <button class="book-button">Book Level One Package Now</button>
-                  </a>
-                </div>
-              </div>
-            </div>
-
-            <!-- LEVEL TWO PACKAGE -->
-            <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Level Two</h2>
-                  <p>Tell the world you're proud of your car.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <span class="dropdown-body-half">
-                    <h3>Interior</h3>
-                    <ul>
-                      <li>Vacuum & light carpet shampooing</li>
-                      <li>Plastics, leather, and vinyls cleaning</li>
-                      <li>Light seat shampooing</li>
-                      <li>Interior & exterior window cleaning</li>
-                      <li>Crack & crevice cleaning</li>
-                    </ul>
-                  </span>
-
-                  <span class="dropdown-body-half">
-                    <h3>Exterior</h3>
-                    <ul>
-                      <li>Hand wash & dry</li>
-                      <li>Bug gut removal</li>
-                      <li>Tire, wheel, and wheel well cleaning + tire shine</li>
-                      <li><em>Clay service to remove embedded contamination</em></li>
-                      <li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
-                    </ul>
-                  </span>
-                </div>
-
-                <div class="dropdown-button">
-                  <a target="_blank" class="book-link" tabindex="-1" 
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
-                  >
-                    <button class="book-button">Book Level Two Package Now</button>
-                  </a>
-                </div>
-              </div>
-            </div> 
+        <div id="tableOfContents">
+          <h1>Our Services</h1>
+          <div id="categoryLinks">
+            <a href="#packagesJump" class="jumpLink"><h2>Service Packages</h2></a>
+            <a href="#ceramicJump"  class="jumpLink"><h2>Ceramic Coating</h2></a>
+            <a href="#paintJump"    class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
+            <a href="#exteriorJump" class="jumpLink"><h2>Exterior Detailing</h2></a>
+            <a href="#interiorJump" class="jumpLink"><h2>Interior Detailing</h2></a>
           </div>
         </div>
-      </section>
 
-      <!-- CERAMIC COATING SECTION -->
-      <section id="ceramic">
-        <div class="dropdown longest" aria-expanded="false">
-          <button class="dropdown-header" onclick="toggleDropdown(this)">
-            <span class="dropdown-arrow">▼</span> 
-            <h1>Ceramic Coating</h1>
-          </button>
-          <div class="dropdown-content">
+        <div id="categoryContainer">
+          <span id="packagesJump" class="landing"></span>
+          <h1>Service Packages</h1>
+          <div id="packages" class="serviceContainer">
+          </div>
 
-            question for aden: should clicking this just bring user to "ceramic coating" page?
+          <span id="ceramicJump" class="landing"></span>
+          <h1>Ceramic Coating</h1>
+          <div id="ceramic" class="serviceContainer">
+          </div>
 
-            <!-- ELITE COATING -->
-            <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Elite Ceramic Coating</h2>
-                  <p>Bring out and protect your car's shine for years to come.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
+          <span id="paintJump" class="landing"></span>
+          <h1>Paint & Polish Correction</h1>
+          <div id="paint" class="serviceContainer">
+          </div>
+          
+          <span id="exteriorJump" class="landing"></span>
+          <h1>Exterior Detailing</h1>
+          <div id="exterior" class="serviceContainer">
+          </div>
 
-                  <span class="dropdown-body-half">
-                    <h3>Description</h3>
-                    <p>
-                      A protective layer on your vehicle's surface that repels water, 
-                      dirt, and contaminants, making cleaning easier and enhancing the 
-                      paint's durability and shine for 3-5 years.
-                    </p>
-                  </span>
-
-                  <span class="dropdown-body-half">
-                    <h3>Includes</h3>
-                    <ul>
-                      <li>Hand wash</li>
-                      <li>Decontamination of paint & glass</li>
-                      <li>1 Step polish to remove light swirls and enhance gloss</li>
-                    </ul>
-                  </span>
-                </div>
-                <div class="dropdown-button">
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
-                    <button class="book-button">Book Elite Coating</button>
-                  </a>
-                </div>
-              </div>
-            </div>
-
-            <!-- COMPLETE COATING -->
-            <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Complete Ceramic Coating</h2>
-                  <p>Like a factory reset on your cars exterior, but 10x better.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <span class="dropdown-body-half">
-                    <h3>Description</h3>
-                    <p>
-                      A protective layer on your vehicle's surface that repels water, 
-                      dirt, and contaminants, and UV rays, with insane gloss and shine 
-                      for 3-5 years.<br />
-                      (Paint + Glass)
-                    </p>
-                  </span>
-
-                  <span class="dropdown-body-half">
-                    <h3>Includes</h3>
-                    <ul>
-                      <li>Hand wash & dry</li>
-                      <li>Wheel cleaning</li>
-                      <li>1 stage paint correction on all paint & glass</li> 
-                      <li>
-                        <em>Free quarterly washes</em>
-                      </li>
-                      <li>
-                        <em>Free annual decontamination and topper</em>
-                      </li>
-                    </ul>
-                  </span>
-                </div>
-                <div class="dropdown-button">
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
-                    <button class="book-button">Book Complete Coating</button>
-                  </a>
-                </div>
-              </div>
-            </div>
-
-            <!-- WHEEL WASH -->
-            <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Wheel Wash</h2>
-                  <p>Make your wheels glow and shine.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <span>
-                    <h3>Disclaimer</h3>
-                    <p>
-                      Only available if the entire car receives a ceramic coating.
-                    </p>
-                  </span>
-                </div>
-                <div class="dropdown-button">
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS">
-                    <button class="book-button">Book Wheel Wash</button>
-                  </a>   
-                </div>
-              </div>
-            </div>                            
+          <span id="interiorJump" class="landing"></span>
+          <h1>Interior Detailing</h1>
+          <div id="interior" class="serviceContainer">
           </div>
         </div>
-      </section>
-
-      <!-- POLISHING + PAINT CORRECTION SECTION -->
-      <section id="polish">
-        <div class="dropdown long" aria-expanded="false">
-          <button class="dropdown-header" onclick="toggleDropdown(this)">
-            <span class="dropdown-arrow">▼</span> 
-            <h1>Polishing & Paint Correction</h1>
-          </button>
-          <div class="dropdown-content">
-
-            <!-- PAINT ENHANCEMENT -->
-            <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Paint Enhancement</h2>
-                  <p>Bring back that gloss you know and love.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <span class="dropdown-body-half">
-                    <h3>Disclaimer</h3>
-                    <p>Must include an exterior wash & decontamination (price included).</p>
-                  </span>
-
-                  <span class="dropdown-body-half">
-                    <h3>Includes</h3>
-                    <ul>
-                      <li>1-step polish to enhance gloss & reduce minor defects</li>
-                      <li>Ceramic coating, sealant, or wax required after</li>
-                    </ul>
-                  </span>
-                </div>
-                <div class="dropdown-button">
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h">
-                    <button class="book-button">Book Paint Enhancement</button>
-                  </a>   
-                </div>
-              </div>
-            </div>
-
-            <!-- PAINT CORRECTION -->
-             <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Paint Correction</h2>
-                  <p>Give your paint a breath of fresh air.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <span class="dropdown-body-half">
-                    <h3>Disclaimer</h3>
-                    <p>Must include an exterior wash & decontamination (price included).</p>
-                  </span>
-
-                  <span class="dropdown-body-half">
-                    <h3>Includes</h3>
-                    <ul>
-                      <li>2-step polish to eliminate 80-85% of defects </li>
-                      <li>Restore shine and gloss</li>
-                      <li>Ceramic coating, sealant, or wax required after</li>
-                    </ul>
-                  </span>
-                </div>
-                <div class="dropdown-button">
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F">
-                    <button class="book-button">Book Paint Correction</button>
-                  </a>   
-                </div>
-              </div>
-            </div>                                 
-          </div>
-        </div>
-      </section>
-
-      wip below
-      
-      <!-- EXTERIOR DETAILING SECTION -->
-      <section id="exterior">
-        <div class="dropdown long" aria-expanded="false">
-          <button class="dropdown-header" onclick="toggleDropdown(this)">
-            <span class="dropdown-arrow">▼</span> 
-            <h1>Exterior Detailing</h1>
-          </button>
-          <div class="dropdown-content">
-
-            <!-- LEVEL ONE EXTERIOR -->
-             <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Level One Exterior</h2>
-                  <p>A safe and meticulous hand wash to reveal the true shine of your car.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <ul>
-                    <li>Hand wash & dry</li>
-                    <li>Bug gut removal</li>
-                    <li>Tire, wheel, wheel well cleaning, and tire shine</li>
-                    <li>Window cleaning</li>
-                    <li>Light door jam cleaning</li>
-                  </ul></br>
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=TFqzf6t8BKh7vTGxfNBy&sku=Czg1xQxpwwf5ninBF6xq">
-                    <button class="book-button">Book Level One Exterior</button>
-                  </a>   
-                </div>
-              </div>
-            </div>
-
-            <!-- LEVEL TWO EXTERIOR -->
-             <div class="dropdown" aria-expanded="false">
-              <button class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Level Two Exterior</h2>
-                  <p>Most popular.</p>
-                </div>
-              </button>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <p>
-                    For those who want their car to shine, be safe and protected 
-                    from harsh elements, self clean, and be a breeze to wash.
-                    (Previously 'Wash, Clay, Seal')
-                  </p><br />
-
-                  <ul>
-                    <li>Hand wash & dry</li>
-                    <li>Bug gut removal</li>
-                    <li>Tire, wheel, wheel well cleaning, and tire shine</li>
-                    <li>Clay mitt to remove embedded contamination</li>
-                    <li>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</li>
-                  </ul></br>
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI">
-                    <button class="book-button">Book Level Two Exterior</button>
-                  </a>   
-                </div>
-              </div>
-            </div>      
-          </div>
-        </div>
-      </section>
-
-      <!-- INTERIOR DETAILING SECTION -->
-      <section id="interior">
-        <div class="dropdown long" aria-expanded="false">
-          <button class="dropdown-header" onclick="toggleDropdown(this)">
-            <span class="dropdown-arrow">▼</span> 
-            <h1>Interior Detailing</h1>
-          </button>
-          <div class="dropdown-content"> 
-
-            <!-- LEVEL ONE INTERIOR -->
-            <div class="dropdown" aria-expanded="false">
-              <div class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Level One Interior</h2>
-                  <p>Clean as a whistle!</p>
-                </div>
-              </div>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <ul>
-                    <li>Vacuum & light carpet shampooing</li>
-                    <li>Plastics, leather, and vinyls cleaning</li>
-                    <li>Light seat shampooing</li>
-                    <li>Interior & exterior window cleaning</li>
-                    <li>Crack & crevice cleaning</li>
-                  </ul></br>
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA?productServiceId=3LCNMgeB58hjFwhg58BU&sku=MuCpgSMV0hU4sUdjAPBi">
-                    <button class="book-button">Book Level One Interior</button>
-                  </a>   
-                </div>
-              </div>
-            </div>
-
-            <!-- LEVEL TWO INTERIOR -->
-             <div class="dropdown" aria-expanded="false">
-              <div class="dropdown-header" onclick="toggleDropdown(this)">
-                <span class="dropdown-arrow">▼</span>
-                <div>
-                  <h2>Level Two Interior</h2>
-                  <p>Bring back the interior you love & protect it for months.</p>
-                </div>
-              </div>
-              <div class="dropdown-content">
-                <hr>
-                <div class="dropdown-body">
-                  <ul>
-                    <li>Vacuum & carpet shampooing</li>
-                    <li>Plastics, leather, and vinyls scrubbed</li>
-                    <li>Leather conditioning for protection and suppleness</li>
-                    <li>Upholstery shampooing</li>
-                    <li>Crack & crevice cleaning</li>
-                    <li>6 month interior protection (Spills, UV, less dust, less cleaning, and plastic rejuvenation)</li>
-                  </ul></br>
-                  <a target="_blank" class="book-link" tabindex="-1"
-                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI">
-                    <button class="book-button">Book Level Two Interior</button>
-                  </a>   
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
 
     </main>
 
@@ -713,34 +267,334 @@
         >
       </div>
     </footer>
+
     <script src="js/hamburger.js"></script>
+
     <script>
-      function toggleDropdown(headerClicked) {
-        let dropdown = headerClicked.parentElement;
-        let body = headerClicked.nextElementSibling;
-        let arrow = headerClicked.children[0];
+      // these categories must match the IDs of the serviceContainer <div>s above
+      const categories = ["packages", "ceramic", "paint", "exterior", "interior"];
+      const serviceData = {
+        "packages" : [
+          /** SERVICE PACKAGE ONE */
+          {
+            "title" : "Service Package One",
+            "subtitle" : "Give your car the time, love, and care it deserves.",
+            "left" : {
+              "header" : "Interior",
+              "paragraph" : "",
+              "bullets" :  [
+                "Vacuum & light carpet shampooing",
+                "Plastics, leather, and vinyls cleaning",
+                "Light seat shampooing",
+                "Interior & exterior window cleaning",
+                "Crack & crevice cleaning"
+              ]
+            },
+            "right" : {
+              "header" : "Exterior",
+              "paragraph" : "",
+              "bullets" :  [
+                "Hand wash & dry",
+                "Bug gut removal",
+                "Tire, wheel, and wheel well cleaning + tire shine",
+                "Window cleaning",
+                "Light door jam cleaning"
+              ]
+            },
+            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
+          },
+          /** SERVICE PACKAGE TWO */
+          {
+            "title" : "Service Package Two",
+            "subtitle" : "Tell the world you're proud of your car.",
+            "left" : {
+              "header" : "Interior",
+              "paragraph" : "",
+              "bullets" :  [
+                "Vacuum & light carpet shampooing",
+                "Plastics, leather, and vinyls cleaning",
+                "Light seat shampooing",
+                "Interior & exterior window cleaning",
+                "Crack & crevice cleaning"
+              ]
+            },
+            "right" : {
+              "header" : "Exterior",
+              "paragraph" : "",
+              "bullets" :  [
+                "Hand wash & dry",
+                "Bug gut removal",
+                "Tire, wheel, and wheel well cleaning + tire shine",
+                "Clay service to remove embedded contamination",
+                "3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties"
+              ]
+            },
+            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
+          }
+        ],
+        "ceramic" : [
+          /** ELITE COATING */
+          {
+              "title" : "Elite Ceramic Coating",
+              "subtitle" : "Bring out and protect your car's shine for years to come.",
+              "left" : {
+                "header" : "Description",
+                "paragraph" : "A protective layer on your vehicle's surface that repels water, dirt, and contaminants, making cleaning easier and enhancing the paint's durability and shine for 3-5 years.",
+                "bullets" :  []
+              },
+              "right" : {
+                "header" : "Includes",
+                "paragraph" : "",
+                "bullets" :  [
+                  "Hand wash",
+                  "Decontamination of paint & glass",
+                  "1 Step polish to remove light swirls and enhance gloss"
+                ]
+              },
+              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596"
+            },
+            /** COMPLETE COATING */
+            {
+              "title" : "Complete Ceramic Coating",
+              "subtitle" : "Like a factory reset on your cars exterior, but 10x better.",
+              "left" : {
+                "header" : "Description",
+                "paragraph" : "A protective layer on your vehicle's surface that repels water, dirt, and contaminants, and UV rays, with insane gloss and shine for 3-5 years. (Paint + Glass)",
+                "bullets" :  []
+              },
+              "right" : {
+                "header" : "Includes",
+                "paragraph" : "",
+                "bullets" :  [
+                  "Hand wash & dry",
+                  "Wheel cleaning",
+                  "1 stage paint correction on all paint & glass",
+                  "Free quarterly washes",
+                  "Free annual decontamination and topper"
+                ]
+              },
+              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596"
+            },
+            /** WHEEL WASH */
+            {
+              "title" : "Wheel Wash",
+              "subtitle" : "Make your wheels glow and shine.",
+              "left" : {
+                "header" : "Disclaimer",
+                "paragraph" : "Only available if the entire car receives a ceramic coating.",
+                "bullets" :  []
+              },
+              "right" : {
+                "header" : "",
+                "paragraph" : "",
+                "bullets" :  []
+              },
+              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS"
+            }
+        ],
+        "paint" : [
+          /** PAINT ENHANCEMENT */
+          {
+            "title" : "Paint Enhancement",
+            "subtitle" : "Bring back that gloss you know and love.",
+            "left" : {
+              "header" : "Disclaimer",
+              "paragraph" : "Must include an exterior wash & decontamination (price included).",
+              "bullets" :  []
+            },
+            "right" : {
+              "header" : "Includes",
+              "paragraph" : "",
+              "bullets" :  [
+                "1-step polish to enhance gloss & reduce minor defects",
+                "Ceramic coating, sealant, or wax required after"
+              ]
+            },
+            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h"
+          },
+          /** PAINT CORRECTION */
+          {
+            "title" : "Paint Correction",
+            "subtitle" : "Give your paint a breath of fresh air.",
+            "left" : {
+              "header" : "Disclaimer",
+              "paragraph" : "Ceramic coating, sealant, or wax required after",
+              "bullets" :  []
+            },
+            "right" : {
+              "header" : "Includes",
+              "paragraph" : "",
+              "bullets" :  [
+                "Exterior wash and decontaminaion",
+                "2-step polish to eliminate 80-85% of defects",
+              ]
+            },
+            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F"
+          }
+        ],
+        "exterior" : [
+          /** LEVEL ONE EXTERIOR */
+          {
+              "title" : "Level One Exterior",
+              "subtitle" : "Refresh your shine!",
+              "left" : {
+                "header" : "Description",
+                "paragraph" : "A safe and meticulous hand wash to reveal the true shine of your car.",
+                "bullets" :  []
+              },
+              "right" : {
+                "header" : "Includes",
+                "paragraph" : "",
+                "bullets" :  [
+                  "Hand wash & dry",
+                  "Bug gut removal",
+                  "Tire, wheel, wheel well cleaning, and tire shine",
+                  "Window cleaning",
+                  "Light door jam cleaning"
+                ]
+              },
+              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=TFqzf6t8BKh7vTGxfNBy&sku=Czg1xQxpwwf5ninBF6xq"
+            },
+            /** LEVEL TWO INTERIOR */
+            {
+              "title" : "Level Two Exterior",
+              "subtitle" : "Most Popular.",
+              "left" : {
+                "header" : "Description",
+                "paragraph" : "For those who want their car to shine, be safe and protected from harsh elements, self clean, and be a breeze to wash. (Previously 'Wash, Clay, Seal')",
+                "bullets" :  []
+              },
+              "right" : {
+                "header" : "Includes",
+                "paragraph" : "",
+                "bullets" :  [
+                  "Hand wash & dry",
+                  "Bug gut removal",
+                  "Tire, wheel, wheel well cleaning, and tire shine",
+                  "Clay mitt to remove embedded contamination",
+                  "3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties"
+                ]
+              },
+              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI"
+            }
+        ],
+        "interior" : [
+          /** LEVEL ONE INTERIOR */
+          {
+              "title" : "Level One Interior",
+              "subtitle" : "A deep clean of your car's interior.",
+              "left" : {
+                "header" : "Includes",
+                "paragraph" : "",
+                "bullets" :  [
+                  "Vacuum & light carpet shampooing",
+                  "Plastics, leather, and vinyls cleaning",
+                  "Light seat shampooing",
+                  "Interior & exterior window cleaning",
+                  "Crack & crevice cleaning"
+                ]
+              },
+              "right" : {
+                "header" : "",
+                "paragraph" : "",
+                "bullets" :  []
+              },
+              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA?productServiceId=3LCNMgeB58hjFwhg58BU&sku=MuCpgSMV0hU4sUdjAPBi"
+            },
+            /** LEVEL TWO INTERIOR */
+            {
+              "title" : "Level Two Interior",
+              "subtitle" : "Bring back the interior you love & protect it for months.",
+              "left" : {
+                "header" : "Includes",
+                "paragraph" : "",
+                "bullets" :  [
+                  "Upholstery shampooing",
+                  "Crack & crevice cleaning",
+                  "6 month interior protection (Spills, UV, less dust, less cleaning, and plastic rejuvenation)",
+                  "Vacuum & carpet shampooing",
+                  "Plastics, leather, and vinyls scrubbed",
+                  "Leather conditioning for protection and suppleness"
+                  ]
+              },
+              "right" : {
+                "header" : "",
+                "paragraph" : "",
+                "bullets" :  []
+              },
+              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI"
+            }
+        ]
+      };
 
-        if (dropdown.classList.contains("longest")) {
-          dropdown.classList.toggle("open-longest");
-          body.classList.toggle("open-longest");
-          arrow.classList.toggle("open");
-        }
-        else if (dropdown.classList.contains("long")) {
-          dropdown.classList.toggle("open-long");
-          body.classList.toggle("open-long");
-          arrow.classList.toggle("open");
-        }
-        else {
-          dropdown.classList.toggle("open");
-          body.classList.toggle("open");
-          arrow.classList.toggle("open");
-        }
+      // renders service data as cards when page loads
+      function insertServices(serviceData) {
+        for (const category of categories) {
+          let categoryData = serviceData[category];
+          console.log(category);
+          console.log(categoryData);
 
-        let isOpen = dropdown.className.includes("open");
-        dropdown.setAttribute('aria-expanded', isOpen);
+          let target = document.getElementById(category);
 
+          for (const service of categoryData) {
+            let leftSide  = buildCardColumn(service.left);
+            let rightSide = buildCardColumn(service.right);
+            target.insertAdjacentHTML(
+            "beforeend",
+            `
+            <a class="service" href=${service.url} target="_blank">
+              <div class="card">
+                <div class="card-head">
+                  <h2>${service.title}</h2>
+                  <p>${service.subtitle}</p>
+                </div>
+                <div class="card-body">
+                  ${leftSide  ? leftSide : ""}
+                  ${rightSide ? rightSide : ""}
+                </div>
+              </div>
+            </a>
+          `);
+          }
+        }
+      }
+
+      // helper for constructing service cards
+      function buildCardColumn(data) {
+        let html = "<span>";
+        if (data.header) {
+          html += "<h3 style='text-align:left;'>" + data.header + "</h3>";
+        }
+        if (data.paragraph) {
+          html += "<p>" + data.paragraph + "</p>";
+        }
+        if (data.bullets.length > 0) {
+          html += "<ul>";
+          for (point of data.bullets) {
+            html += "<li>" + point + "</li>";
+          }
+          html += "</ul>";
+        }
+        html += "</span>";
+        if (html == "<span></span>") return null;
+        return html;
+      }
+
+      window.onload = (event) => {
+        insertServices(serviceData);
+
+        // jump to category if coming from index/home page
+        let params = new URLSearchParams(document.location.search);
+        handleJump(params.get("jumpTarget"));
+      }
+
+      function handleJump(target) {
+        if (!target || !categories.includes(target)) return;
+        let destination = document.getElementById(target).getBoundingClientRect().top - 250;
+        window.scrollTo({ top: destination, left: 0, behavior: "smooth"});
       }
     </script>
+  
   </body>
 </html>
 
diff --git a/services2.html b/services2.html
deleted file mode 100644
index 7730b1e..0000000
--- a/services2.html
+++ /dev/null
@@ -1,589 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
-    />
-    <title>Luxury Detailing Maine</title>
-    <link href="css/style.css" rel="stylesheet" />
-    <link href="css/dropdown.css" rel="stylesheet" />
-    <link href="css/hamburger.css" rel="stylesheet" />
-    
-    <style>
-      html { scroll-behavior: smooth; }
-
-      main {
-        gap: 12rem;
-      }
-
-      h1 {
-         margin-top: 12rem; 
-      }
-
-      /** landings are used to jump slightly above categories */
-      .landing { top: 3rem; position: relative; }
-
-      #categoryLinks {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-evenly;
-        align-items: center;
-        gap: 5rem;
-
-        margin-top: 5rem;
-      }
-
-      .jumpLink {
-        display: flex;
-        align-items: center;;
-        
-        height: 8rem;
-        padding: 0 5rem;
-        
-        text-decoration: none;
-        color: var(--black);
-
-        background-color: var(--gold);
-        
-        border-radius: 1rem;
-        
-        transition: 0.3s ease;
-      }
-      .jumpLink:hover {
-        color: white;  
-      }
-      .jumpLink a, .jumpLink h2 {
-        color: var(--black);
-        background-color: var(--gold);
-      }
-
-      #categoryContainer {
-        width: 90%;
-        height: 100%;
-      }
-
-      .serviceContainer {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        margin: 3rem 0;
-      }
-
-      #tableOfContents {
-        width: 90%;
-        margin-bottom: 25vh;
-      }
-
-
-      /** Services */
-      a.service { text-decoration: none;}
-      .service {
-        display: flex;
-        flex-direction: column;
-
-        height: 100%;
-
-        width: 45%;
-      }
-
-      .card {
-        padding: 3rem;
-        border: 2px solid var(--gold);
-        border-radius: 1rem;
-
-        transition: 0.5s ease;
-        color: white;
-        width: 100%;
-      }
-      .card:hover {
-        border: 2px solid white;
-      }
-
-      .card-head {
-        margin-bottom: 2rem;
-      }
-
-      .card-body {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 2rem;
-        text-align: left;
-        width: 100%;
-      }
-
-      /** .card-body span {
-        display: flex;
-        flex-direction: column;
-        align-self: stretch;
-
-        width: 50%;
-      }*/
-      .card-body span {
-        display: flex;
-        flex-direction: column;
-        align-self: stretch;
-
-        width: 100%;
-      }
-      .card-body span h3 {
-        text-align: center;
-      }
-
-
-
-      /** Booking Button */
-      .book-button {
-        background-color: var(--black);
-        color: var(--gold);
-        width: 50%;
-        height: 4rem;
-      
-        border: 1px solid white;
-        border-radius: 5rem;
-
-        padding: .5rem 1rem;
-
-        font-size: 1rem;
-        font-weight: bold;
-        text-decoration: none;
-        transition: 0.5s ease;
-      }
-      .book-button:hover {
-        cursor: pointer;
-        box-shadow: 0px 0px 15px var(--gold);
-      }
-      .book-button:active {
-        background-color: var(--gold);
-      }
-      
-      .book-link {
-        user-select: none;
-      } 
-      
-      /** mobile rules */
-      /** MOBILE */
-      @media screen and (max-width: 850px) {
-        section {
-          width: 100%;
-        }
-
-        h1 {
-          font-size: 1.75rem;
-        }
-        h2 {
-          font-size: 1.5rem;
-        }
-      }
-    </style>
-  </head>
-
-  <body>
-    <a href="#main-content" class="skipLink">Skip to main content</a>
-
-    <header>
-      <div class="banner" role="banner">
-        <a href="index.html" class="logo" aria-label="Company Logo">LUXURY DETAILING</a>
-
-        <button
-          id="hamburger"
-          aria-label="Toggle mobile navigation menu"
-          aria-expanded="false"
-        >
-          <span></span>
-          <span></span>
-          <span></span>
-        </button>
-
-        <nav>
-          <a class="navLink" role="navigation" href="ceramic-coating.html">Ceramic Coating</a>
-          <a class="navLink" role="navigation" href="services.html">Services</a>
-          <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
-          <a class="navLink" role="navigation" href="contact.html">About</a>
-        </nav>
-      </div>
-    </header>
-
-    <main id="main-content">
-
-        <div id="tableOfContents">
-          <h1>Our Services</h1>
-          <div id="categoryLinks">
-            <a href="#packagesJump" class="jumpLink"><h2>Service Packages</h2></a>
-            <a href="#ceramicJump"  class="jumpLink"><h2>Ceramic Coating</h2></a>
-            <a href="#paintJump"    class="jumpLink"><h2>Polish &<br/>Paint Correction</h2></a>
-            <a href="#exteriorJump" class="jumpLink"><h2>Exterior Detailing</h2></a>
-            <a href="#interiorJump" class="jumpLink"><h2>Interior Detailing</h2></a>
-          </div>
-        </div>
-
-        <div id="categoryContainer">
-          <span id="packagesJump" class="landing"></span>
-          <h1>Service Packages</h1>
-          <div id="packages" class="serviceContainer">
-          </div>
-
-          <span id="ceramicJump" class="landing"></span>
-          <h1>Ceramic Coating</h1>
-          <div id="ceramic" class="serviceContainer">
-          </div>
-
-          <span id="paintJump" class="landing"></span>
-          <h1>Paint & Polish Correction</h1>
-          <div id="paint" class="serviceContainer">
-          </div>
-          
-          <span id="exteriorJump" class="landing"></span>
-          <h1>Exterior Detailing</h1>
-          <div id="exterior" class="serviceContainer">
-          </div>
-
-          <span id="interiorJump" class="landing"></span>
-          <h1>Interior Detailing</h1>
-          <div id="interior" class="serviceContainer">
-          </div>
-        </div>
-
-    </main>
-
-    <footer>
-      <div id="footer-left">
-        &copy;Luxury Detailing Maine 2025<br />
-        All rights reserved<br />
-        Portland, ME
-      </div>
-      <div id="footer-right">
-        207-807-6770<br />
-        example@email.com<br />
-        <a
-          href="https://www.instagram.com/luxurydetailingmaine/"
-          target="_blank"
-          >@luxurydetailingmaine</a
-        >
-      </div>
-    </footer>
-
-    <script src="js/hamburger.js"></script>
-
-    <script>
-      // these categories must match the IDs of the serviceContainer <div>s above
-      const categories = ["packages", "ceramic", "paint", "exterior", "interior"];
-      const serviceData = {
-        "packages" : [
-          /** SERVICE PACKAGE ONE */
-          {
-            "title" : "Service Package One",
-            "subtitle" : "Give your car the time, love, and care it deserves.",
-            "left" : {
-              "header" : "Interior",
-              "paragraph" : "",
-              "bullets" :  [
-                "Vacuum & light carpet shampooing",
-                "Plastics, leather, and vinyls cleaning",
-                "Light seat shampooing",
-                "Interior & exterior window cleaning",
-                "Crack & crevice cleaning"
-              ]
-            },
-            "right" : {
-              "header" : "Exterior",
-              "paragraph" : "",
-              "bullets" :  [
-                "Hand wash & dry",
-                "Bug gut removal",
-                "Tire, wheel, and wheel well cleaning + tire shine",
-                "Window cleaning",
-                "Light door jam cleaning"
-              ]
-            },
-            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
-          },
-          /** SERVICE PACKAGE TWO */
-          {
-            "title" : "Service Package Two",
-            "subtitle" : "Tell the world you're proud of your car.",
-            "left" : {
-              "header" : "Interior",
-              "paragraph" : "",
-              "bullets" :  [
-                "Vacuum & light carpet shampooing",
-                "Plastics, leather, and vinyls cleaning",
-                "Light seat shampooing",
-                "Interior & exterior window cleaning",
-                "Crack & crevice cleaning"
-              ]
-            },
-            "right" : {
-              "header" : "Exterior",
-              "paragraph" : "",
-              "bullets" :  [
-                "Hand wash & dry",
-                "Bug gut removal",
-                "Tire, wheel, and wheel well cleaning + tire shine",
-                "Clay service to remove embedded contamination",
-                "3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties"
-              ]
-            },
-            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
-          }
-        ],
-        "ceramic" : [
-          /** ELITE COATING */
-          {
-              "title" : "Elite Ceramic Coating",
-              "subtitle" : "Bring out and protect your car's shine for years to come.",
-              "left" : {
-                "header" : "Description",
-                "paragraph" : "A protective layer on your vehicle's surface that repels water, dirt, and contaminants, making cleaning easier and enhancing the paint's durability and shine for 3-5 years.",
-                "bullets" :  []
-              },
-              "right" : {
-                "header" : "Includes",
-                "paragraph" : "",
-                "bullets" :  [
-                  "Hand wash",
-                  "Decontamination of paint & glass",
-                  "1 Step polish to remove light swirls and enhance gloss"
-                ]
-              },
-              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596"
-            },
-            /** COMPLETE COATING */
-            {
-              "title" : "Complete Ceramic Coating",
-              "subtitle" : "Like a factory reset on your cars exterior, but 10x better.",
-              "left" : {
-                "header" : "Description",
-                "paragraph" : "A protective layer on your vehicle's surface that repels water, dirt, and contaminants, and UV rays, with insane gloss and shine for 3-5 years. (Paint + Glass)",
-                "bullets" :  []
-              },
-              "right" : {
-                "header" : "Includes",
-                "paragraph" : "",
-                "bullets" :  [
-                  "Hand wash & dry",
-                  "Wheel cleaning",
-                  "1 stage paint correction on all paint & glass",
-                  "Free quarterly washes",
-                  "Free annual decontamination and topper"
-                ]
-              },
-              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596"
-            },
-            /** WHEEL WASH */
-            {
-              "title" : "Wheel Wash",
-              "subtitle" : "Make your wheels glow and shine.",
-              "left" : {
-                "header" : "Disclaimer",
-                "paragraph" : "Only available if the entire car receives a ceramic coating.",
-                "bullets" :  []
-              },
-              "right" : {
-                "header" : "",
-                "paragraph" : "",
-                "bullets" :  []
-              },
-              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS"
-            }
-        ],
-        "paint" : [
-          /** PAINT ENHANCEMENT */
-          {
-            "title" : "Paint Enhancement",
-            "subtitle" : "Bring back that gloss you know and love.",
-            "left" : {
-              "header" : "Disclaimer",
-              "paragraph" : "Must include an exterior wash & decontamination (price included).",
-              "bullets" :  []
-            },
-            "right" : {
-              "header" : "Includes",
-              "paragraph" : "",
-              "bullets" :  [
-                "1-step polish to enhance gloss & reduce minor defects",
-                "Ceramic coating, sealant, or wax required after"
-              ]
-            },
-            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h"
-          },
-          /** PAINT CORRECTION */
-          {
-            "title" : "Paint Correction",
-            "subtitle" : "Give your paint a breath of fresh air.",
-            "left" : {
-              "header" : "Disclaimer",
-              "paragraph" : "Ceramic coating, sealant, or wax required after",
-              "bullets" :  []
-            },
-            "right" : {
-              "header" : "Includes",
-              "paragraph" : "",
-              "bullets" :  [
-                "Exterior wash and decontaminaion",
-                "2-step polish to eliminate 80-85% of defects",
-              ]
-            },
-            "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F"
-          }
-        ],
-        "exterior" : [
-          /** LEVEL ONE EXTERIOR */
-          {
-              "title" : "Level One Exterior",
-              "subtitle" : "Refresh your shine!",
-              "left" : {
-                "header" : "Description",
-                "paragraph" : "A safe and meticulous hand wash to reveal the true shine of your car.",
-                "bullets" :  []
-              },
-              "right" : {
-                "header" : "Includes",
-                "paragraph" : "",
-                "bullets" :  [
-                  "Hand wash & dry",
-                  "Bug gut removal",
-                  "Tire, wheel, wheel well cleaning, and tire shine",
-                  "Window cleaning",
-                  "Light door jam cleaning"
-                ]
-              },
-              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=TFqzf6t8BKh7vTGxfNBy&sku=Czg1xQxpwwf5ninBF6xq"
-            },
-            /** LEVEL TWO INTERIOR */
-            {
-              "title" : "Level Two Exterior",
-              "subtitle" : "Most Popular.",
-              "left" : {
-                "header" : "Description",
-                "paragraph" : "For those who want their car to shine, be safe and protected from harsh elements, self clean, and be a breeze to wash. (Previously 'Wash, Clay, Seal')",
-                "bullets" :  []
-              },
-              "right" : {
-                "header" : "Includes",
-                "paragraph" : "",
-                "bullets" :  [
-                  "Hand wash & dry",
-                  "Bug gut removal",
-                  "Tire, wheel, wheel well cleaning, and tire shine",
-                  "Clay mitt to remove embedded contamination",
-                  "3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties"
-                ]
-              },
-              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI"
-            }
-        ],
-        "interior" : [
-          /** LEVEL ONE INTERIOR */
-          {
-              "title" : "Level One Interior",
-              "subtitle" : "A deep clean of your car's interior.",
-              "left" : {
-                "header" : "Includes",
-                "paragraph" : "",
-                "bullets" :  [
-                  "Vacuum & light carpet shampooing",
-                  "Plastics, leather, and vinyls cleaning",
-                  "Light seat shampooing",
-                  "Interior & exterior window cleaning",
-                  "Crack & crevice cleaning"
-                ]
-              },
-              "right" : {
-                "header" : "",
-                "paragraph" : "",
-                "bullets" :  []
-              },
-              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA?productServiceId=3LCNMgeB58hjFwhg58BU&sku=MuCpgSMV0hU4sUdjAPBi"
-            },
-            /** LEVEL TWO INTERIOR */
-            {
-              "title" : "Level Two Interior",
-              "subtitle" : "Bring back the interior you love & protect it for months.",
-              "left" : {
-                "header" : "Includes",
-                "paragraph" : "",
-                "bullets" :  [
-                  "Upholstery shampooing",
-                  "Crack & crevice cleaning",
-                  "6 month interior protection (Spills, UV, less dust, less cleaning, and plastic rejuvenation)",
-                  "Vacuum & carpet shampooing",
-                  "Plastics, leather, and vinyls scrubbed",
-                  "Leather conditioning for protection and suppleness"
-                  ]
-              },
-              "right" : {
-                "header" : "",
-                "paragraph" : "",
-                "bullets" :  []
-              },
-              "url" : "https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI"
-            }
-        ]
-      };
-
-      function insertServices(serviceData) {
-        for (const category of categories) {
-          let categoryData = serviceData[category];
-          console.log(category);
-          console.log(categoryData);
-
-          let target = document.getElementById(category);
-
-          for (const service of categoryData) {
-            let leftSide  = buildCardColumn(service.left);
-            let rightSide = buildCardColumn(service.right);
-            target.insertAdjacentHTML(
-            "beforeend",
-            `
-            <a class="service" href=${service.url} target="_blank">
-              <div class="card">
-                <div class="card-head">
-                  <h2>${service.title}</h2>
-                  <p>${service.subtitle}</p>
-                </div>
-                <div class="card-body">
-                  ${leftSide  ? leftSide : ""}
-                  ${rightSide ? rightSide : ""}
-                </div>
-              </div>
-            </a>
-          `);
-          }
-        }
-      }
-
-      function buildCardColumn(data) {
-        let html = "<span>";
-        if (data.header) {
-          html += "<h3 style='text-align:left;'>" + data.header + "</h3>";
-        }
-        if (data.paragraph) {
-          html += "<p>" + data.paragraph + "</p>";
-        }
-        if (data.bullets.length > 0) {
-          html += "<ul>";
-          for (point of data.bullets) {
-            html += "<li>" + point + "</li>";
-          }
-          html += "</ul>";
-        }
-        html += "</span>";
-        if (html == "<span></span>") return null;
-        return html;
-      }
-
-      // insert services upon page load
-      window.onload = (event) => {
-        insertServices(serviceData);
-      }
-    </script>
-  
-  </body>
-</html>
-
diff --git a/services_old.html b/services_old.html
new file mode 100644
index 0000000..a05a975
--- /dev/null
+++ b/services_old.html
@@ -0,0 +1,746 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Luxury Detailing Maine provides mobile professional car cleaning services in the Portland Area"
+    />
+    <title>Luxury Detailing Maine</title>
+    <link href="css/style.css" rel="stylesheet" />
+    <link href="css/dropdown.css" rel="stylesheet" />
+    <link href="css/hamburger.css" rel="stylesheet" />
+    
+    <style>
+      section {
+        max-width: 75%;
+        width: 75%;
+        gap: 2rem;
+        margin-top: 1rem;
+      }
+
+      .book-button {
+        background-color: var(--black);
+        color: var(--gold);
+        width: 50%;
+        height: 4rem;
+      
+        border: 1px solid white;
+        border-radius: 5rem;
+
+        padding: .5rem 1rem;
+
+        font-size: 1rem;
+        font-weight: bold;
+        text-decoration: none;
+        transition: 0.5s ease;
+      }
+      .book-button:hover {
+        cursor: pointer;
+        box-shadow: 0px 0px 15px var(--gold);
+      }
+      .book-button:active {
+        background-color: var(--gold);
+      }
+      
+      .book-link {
+        user-select: none;
+      } 
+
+      /** Dropdown Menu Style Overrides */
+
+      .dropdown {
+        width: 100%;
+        border: 1px solid var(--light-gold);
+        border-radius: 1.25rem;
+        transition: 0.5s;
+        user-select: none;
+      }
+      .dropdown:hover {
+        border: 1px solid white;
+      }
+
+      /** Prevent nested dropdowns from having borders */
+      .dropdown .dropdown {
+        border-left: none;
+        border-right: none;
+        border-bottom: none;
+        border-radius: 1.25rem 1.25rem 0 0;
+      }
+
+      .dropdown-header {
+        align-items: center;
+        justify-content: flex-start;
+        gap: 1rem;
+        text-align: left;
+
+        background-color: var(--black);
+        color: var(--gold);
+        width: 100%;
+        height: 100%;
+
+        padding: 1.5rem 4rem 2rem 4rem;
+        border: none;
+        border-radius: 1.25rem;
+
+        transition: 2s;
+      }
+      .dropdown-header:hover {
+        border: none;
+      }
+      
+      .dropdown-arrow {
+        transform: rotate(-90deg);
+      }
+      .dropdown-arrow.open {
+        transform: rotate(0deg);
+      }
+
+      .dropdown-header:hover span {
+        transform: rotate(-65deg); /** arrow hover effect */
+      }
+
+      .dropdown-header div {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      hr {
+        border-color: var(--gold);
+      }
+
+      .dropdown-content {
+        visibility: hidden;
+        text-align: left;
+        border: none;
+        /** closing speed */
+        transition: max-height .3s ease;
+      }
+      /** service section dropdowns that are v long */
+      .dropdown-content.open-longest {
+        visibility: visible;
+        max-height: 1100px;
+        /** opening speed */
+        transition: max-height 1s ease;
+      }
+      /** service section dropdowns */
+      .dropdown-content.open-long {
+        visibility: visible;
+        max-height: 1100px;
+        /** opening speed */
+        transition: max-height 1s ease;
+      }
+      /** dropdowns holding specific service info */
+      .dropdown-content.open {
+        visibility: visible;
+        max-height: 400px;
+        /** opening speed */
+        transition: max-height .5s ease;
+      }
+
+      .dropdown-body {
+        display: flex;
+        flex-direction: row;
+        justify-items: space-around;
+        align-items: flex-start;
+        flex-wrap: wrap;
+
+        margin: 1rem 1rem 0rem 6rem;
+
+        user-select: text;
+      }
+
+      .dropdown-body p {
+        padding-right: 4rem;
+      }
+      .dropdown-body-half {
+        flex-basis: 50%;
+      }
+      .dropdown-button {
+        width: 100%;
+        margin: 2rem 1rem 2.5rem 6rem;
+      }
+
+      /** mobile rules */
+      /** MOBILE */
+      @media screen and (max-width: 850px) {
+        section {
+          width: 100%;
+        }
+
+        h1 {
+          font-size: 1.75rem;
+        }
+        h2 {
+          font-size: 1.5rem;
+        }
+
+        .dropdown-header {
+          padding: 1.5rem 1rem 2rem 1rem;
+        }
+
+        /** service section dropdowns that are v long */
+        .dropdown-content.open-longest {
+          max-height: 1700px;
+          /** opening speed */
+          transition: max-height 1s ease;
+        }
+        /** service section dropdowns */
+        .dropdown-content.open-long {
+          max-height: 1450px;
+          /** opening speed */
+          transition: max-height 1s ease;
+        }
+        /** dropdowns holding specific service info */
+        .dropdown-content.open {
+          max-height: 600px;
+          /** opening speed */
+          transition: max-height .5s ease;
+        }
+
+        .dropdown-body {
+          margin: 1rem 1rem 0rem 3rem;
+          flex-direction: column;
+        }
+        .dropdown-body span:not(:first-child) {
+          margin-top: 1.5rem;
+        }
+        .dropdown-body p {
+          padding-right: 0rem;
+        }
+        
+      }
+    </style>
+  </head>
+
+  <body>
+    <a href="#main-content" class="skipLink">Skip to main content</a>
+
+    <header>
+      <div class="banner" role="banner">
+        <a href="index.html" class="logo" aria-label="Company Logo">LUXURY DETAILING</a>
+
+        <button
+          id="hamburger"
+          aria-label="Toggle mobile navigation menu"
+          aria-expanded="false"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+
+        <nav>
+          <a class="navLink" role="navigation" href="ceramic-coating.html">Ceramic Coating</a>
+          <a class="navLink" role="navigation" href="services.html">Services</a>
+          <a class="navLink" role="navigation" href="reviews.html">Reviews</a>
+          <a class="navLink" role="navigation" href="contact.html">About</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main-content">
+
+      <!-- SERVICE PACKAGE SECTION -->
+      <section id="packages">
+        <div class="dropdown long" aria-expanded="false">
+          <button class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span> 
+            <h1>Service Packages</h1>
+          </button>
+          <div class="dropdown-content">
+
+            <!-- LEVEL ONE PACKAGE -->
+            <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Level One</h2>
+                  <p>Give your car the time, love, and care it deserves.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <span class="dropdown-body-half">
+                    <h3>Interior</h3>
+                    <ul>
+                      <li>Vacuum & light carpet shampooing</li>
+                      <li>Plastics, leather, and vinyls cleaning</li>
+                      <li>Light seat shampooing</li>
+                      <li>Interior & exterior window cleaning</li>
+                      <li>Crack & crevice cleaning</li>
+                    </ul>
+                  </span>
+
+                  <span class="dropdown-body-half">
+                    <h3>Exterior</h3>
+                    <ul>
+                      <li>Hand wash & dry</li>
+                      <li>Bug gut removal</li>
+                      <li>Tire, wheel, and wheel well cleaning + tire shine</li>
+                      <li>Window cleaning</li>
+                      <li>Light door jam cleaning</li>
+                    </ul>
+                  </span>
+                </div>
+
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" tabindex="-1" 
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=sIUtLBqGS4mjAQNwHtI4&sku=rH37oV6muKqDXStXhH3k"
+                  >
+                    <button class="book-button">Book Level One Package Now</button>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <!-- LEVEL TWO PACKAGE -->
+            <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Level Two</h2>
+                  <p>Tell the world you're proud of your car.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <span class="dropdown-body-half">
+                    <h3>Interior</h3>
+                    <ul>
+                      <li>Vacuum & light carpet shampooing</li>
+                      <li>Plastics, leather, and vinyls cleaning</li>
+                      <li>Light seat shampooing</li>
+                      <li>Interior & exterior window cleaning</li>
+                      <li>Crack & crevice cleaning</li>
+                    </ul>
+                  </span>
+
+                  <span class="dropdown-body-half">
+                    <h3>Exterior</h3>
+                    <ul>
+                      <li>Hand wash & dry</li>
+                      <li>Bug gut removal</li>
+                      <li>Tire, wheel, and wheel well cleaning + tire shine</li>
+                      <li><em>Clay service to remove embedded contamination</em></li>
+                      <li><em>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</em></li>
+                    </ul>
+                  </span>
+                </div>
+
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" tabindex="-1" 
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/XGQVAkJx15acdsEemvEr?productServiceId=ZUyqKhnZtS3uAT9Auo2I&sku=EsEnqIEVcVedKRDITk7e"
+                  >
+                    <button class="book-button">Book Level Two Package Now</button>
+                  </a>
+                </div>
+              </div>
+            </div> 
+          </div>
+        </div>
+      </section>
+
+      <!-- CERAMIC COATING SECTION -->
+      <section id="ceramic">
+        <div class="dropdown longest" aria-expanded="false">
+          <button class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span> 
+            <h1>Ceramic Coating</h1>
+          </button>
+          <div class="dropdown-content">
+
+            question for aden: should clicking this just bring user to "ceramic coating" page?
+
+            <!-- ELITE COATING -->
+            <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Elite Ceramic Coating</h2>
+                  <p>Bring out and protect your car's shine for years to come.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+
+                  <span class="dropdown-body-half">
+                    <h3>Description</h3>
+                    <p>
+                      A protective layer on your vehicle's surface that repels water, 
+                      dirt, and contaminants, making cleaning easier and enhancing the 
+                      paint's durability and shine for 3-5 years.
+                    </p>
+                  </span>
+
+                  <span class="dropdown-body-half">
+                    <h3>Includes</h3>
+                    <ul>
+                      <li>Hand wash</li>
+                      <li>Decontamination of paint & glass</li>
+                      <li>1 Step polish to remove light swirls and enhance gloss</li>
+                    </ul>
+                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
+                    <button class="book-button">Book Elite Coating</button>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <!-- COMPLETE COATING -->
+            <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Complete Ceramic Coating</h2>
+                  <p>Like a factory reset on your cars exterior, but 10x better.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <span class="dropdown-body-half">
+                    <h3>Description</h3>
+                    <p>
+                      A protective layer on your vehicle's surface that repels water, 
+                      dirt, and contaminants, and UV rays, with insane gloss and shine 
+                      for 3-5 years.<br />
+                      (Paint + Glass)
+                    </p>
+                  </span>
+
+                  <span class="dropdown-body-half">
+                    <h3>Includes</h3>
+                    <ul>
+                      <li>Hand wash & dry</li>
+                      <li>Wheel cleaning</li>
+                      <li>1 stage paint correction on all paint & glass</li> 
+                      <li>
+                        <em>Free quarterly washes</em>
+                      </li>
+                      <li>
+                        <em>Free annual decontamination and topper</em>
+                      </li>
+                    </ul>
+                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=EpBxqPABGIwdF1f3ujqS&sku=Et0iAwD3vqAQYtcNo596">
+                    <button class="book-button">Book Complete Coating</button>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <!-- WHEEL WASH -->
+            <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Wheel Wash</h2>
+                  <p>Make your wheels glow and shine.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <span>
+                    <h3>Disclaimer</h3>
+                    <p>
+                      Only available if the entire car receives a ceramic coating.
+                    </p>
+                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/Z2TzVLNpkirBka11huXA?productServiceId=jFgdX1fB0AoMVmIhSSmP&sku=lCUwUjNUHf4NYqqKYRNS">
+                    <button class="book-button">Book Wheel Wash</button>
+                  </a>   
+                </div>
+              </div>
+            </div>                            
+          </div>
+        </div>
+      </section>
+
+      <!-- POLISHING + PAINT CORRECTION SECTION -->
+      <section id="polish">
+        <div class="dropdown long" aria-expanded="false">
+          <button class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span> 
+            <h1>Polishing & Paint Correction</h1>
+          </button>
+          <div class="dropdown-content">
+
+            <!-- PAINT ENHANCEMENT -->
+            <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Paint Enhancement</h2>
+                  <p>Bring back that gloss you know and love.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <span class="dropdown-body-half">
+                    <h3>Disclaimer</h3>
+                    <p>Must include an exterior wash & decontamination (price included).</p>
+                  </span>
+
+                  <span class="dropdown-body-half">
+                    <h3>Includes</h3>
+                    <ul>
+                      <li>1-step polish to enhance gloss & reduce minor defects</li>
+                      <li>Ceramic coating, sealant, or wax required after</li>
+                    </ul>
+                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=CvJ0v88LfLS9De7I04qu&sku=EyZfDYm9fPEgr3FRl24h">
+                    <button class="book-button">Book Paint Enhancement</button>
+                  </a>   
+                </div>
+              </div>
+            </div>
+
+            <!-- PAINT CORRECTION -->
+             <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Paint Correction</h2>
+                  <p>Give your paint a breath of fresh air.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <span class="dropdown-body-half">
+                    <h3>Disclaimer</h3>
+                    <p>Must include an exterior wash & decontamination (price included).</p>
+                  </span>
+
+                  <span class="dropdown-body-half">
+                    <h3>Includes</h3>
+                    <ul>
+                      <li>2-step polish to eliminate 80-85% of defects </li>
+                      <li>Restore shine and gloss</li>
+                      <li>Ceramic coating, sealant, or wax required after</li>
+                    </ul>
+                  </span>
+                </div>
+                <div class="dropdown-button">
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/W7MYzeflJr6yEAlpgreQ?productServiceId=EDLsm6ynRPi4sKV0ajh1&sku=s1VcPPUMz3Y5n9B99e2F">
+                    <button class="book-button">Book Paint Correction</button>
+                  </a>   
+                </div>
+              </div>
+            </div>                                 
+          </div>
+        </div>
+      </section>
+
+      wip below
+      
+      <!-- EXTERIOR DETAILING SECTION -->
+      <section id="exterior">
+        <div class="dropdown long" aria-expanded="false">
+          <button class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span> 
+            <h1>Exterior Detailing</h1>
+          </button>
+          <div class="dropdown-content">
+
+            <!-- LEVEL ONE EXTERIOR -->
+             <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Level One Exterior</h2>
+                  <p>A safe and meticulous hand wash to reveal the true shine of your car.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <ul>
+                    <li>Hand wash & dry</li>
+                    <li>Bug gut removal</li>
+                    <li>Tire, wheel, wheel well cleaning, and tire shine</li>
+                    <li>Window cleaning</li>
+                    <li>Light door jam cleaning</li>
+                  </ul></br>
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=TFqzf6t8BKh7vTGxfNBy&sku=Czg1xQxpwwf5ninBF6xq">
+                    <button class="book-button">Book Level One Exterior</button>
+                  </a>   
+                </div>
+              </div>
+            </div>
+
+            <!-- LEVEL TWO EXTERIOR -->
+             <div class="dropdown" aria-expanded="false">
+              <button class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Level Two Exterior</h2>
+                  <p>Most popular.</p>
+                </div>
+              </button>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <p>
+                    For those who want their car to shine, be safe and protected 
+                    from harsh elements, self clean, and be a breeze to wash.
+                    (Previously 'Wash, Clay, Seal')
+                  </p><br />
+
+                  <ul>
+                    <li>Hand wash & dry</li>
+                    <li>Bug gut removal</li>
+                    <li>Tire, wheel, wheel well cleaning, and tire shine</li>
+                    <li>Clay mitt to remove embedded contamination</li>
+                    <li>3 to 6 month ceramic paint sealant: gloss, protection, hydrophobic & self-cleaning properties</li>
+                  </ul></br>
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI">
+                    <button class="book-button">Book Level Two Exterior</button>
+                  </a>   
+                </div>
+              </div>
+            </div>      
+          </div>
+        </div>
+      </section>
+
+      <!-- INTERIOR DETAILING SECTION -->
+      <section id="interior">
+        <div class="dropdown long" aria-expanded="false">
+          <button class="dropdown-header" onclick="toggleDropdown(this)">
+            <span class="dropdown-arrow">▼</span> 
+            <h1>Interior Detailing</h1>
+          </button>
+          <div class="dropdown-content"> 
+
+            <!-- LEVEL ONE INTERIOR -->
+            <div class="dropdown" aria-expanded="false">
+              <div class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Level One Interior</h2>
+                  <p>Clean as a whistle!</p>
+                </div>
+              </div>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <ul>
+                    <li>Vacuum & light carpet shampooing</li>
+                    <li>Plastics, leather, and vinyls cleaning</li>
+                    <li>Light seat shampooing</li>
+                    <li>Interior & exterior window cleaning</li>
+                    <li>Crack & crevice cleaning</li>
+                  </ul></br>
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/iy5yKtAhm0O0w0P05acA?productServiceId=3LCNMgeB58hjFwhg58BU&sku=MuCpgSMV0hU4sUdjAPBi">
+                    <button class="book-button">Book Level One Interior</button>
+                  </a>   
+                </div>
+              </div>
+            </div>
+
+            <!-- LEVEL TWO INTERIOR -->
+             <div class="dropdown" aria-expanded="false">
+              <div class="dropdown-header" onclick="toggleDropdown(this)">
+                <span class="dropdown-arrow">▼</span>
+                <div>
+                  <h2>Level Two Interior</h2>
+                  <p>Bring back the interior you love & protect it for months.</p>
+                </div>
+              </div>
+              <div class="dropdown-content">
+                <hr>
+                <div class="dropdown-body">
+                  <ul>
+                    <li>Vacuum & carpet shampooing</li>
+                    <li>Plastics, leather, and vinyls scrubbed</li>
+                    <li>Leather conditioning for protection and suppleness</li>
+                    <li>Upholstery shampooing</li>
+                    <li>Crack & crevice cleaning</li>
+                    <li>6 month interior protection (Spills, UV, less dust, less cleaning, and plastic rejuvenation)</li>
+                  </ul></br>
+                  <a target="_blank" class="book-link" tabindex="-1"
+                    href="https://app.urable.com/virtual-shop/IQlYjZyF1i2XilEiEKB5/yT4vtoWKB5qGaQMaxOdd?productServiceId=bc8YSJd6fl0CprnAY43r&sku=iUA7y7dwM4Kz51pBpQNI">
+                    <button class="book-button">Book Level Two Interior</button>
+                  </a>   
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </main>
+
+    <footer>
+      <div id="footer-left">
+        &copy;Luxury Detailing Maine 2025<br />
+        All rights reserved<br />
+        Portland, ME
+      </div>
+      <div id="footer-right">
+        207-807-6770<br />
+        example@email.com<br />
+        <a
+          href="https://www.instagram.com/luxurydetailingmaine/"
+          target="_blank"
+          >@luxurydetailingmaine</a
+        >
+      </div>
+    </footer>
+    <script src="js/hamburger.js"></script>
+    <script>
+      function toggleDropdown(headerClicked) {
+        let dropdown = headerClicked.parentElement;
+        let body = headerClicked.nextElementSibling;
+        let arrow = headerClicked.children[0];
+
+        if (dropdown.classList.contains("longest")) {
+          dropdown.classList.toggle("open-longest");
+          body.classList.toggle("open-longest");
+          arrow.classList.toggle("open");
+        }
+        else if (dropdown.classList.contains("long")) {
+          dropdown.classList.toggle("open-long");
+          body.classList.toggle("open-long");
+          arrow.classList.toggle("open");
+        }
+        else {
+          dropdown.classList.toggle("open");
+          body.classList.toggle("open");
+          arrow.classList.toggle("open");
+        }
+
+        let isOpen = dropdown.className.includes("open");
+        dropdown.setAttribute('aria-expanded', isOpen);
+
+      }
+    </script>
+  </body>
+</html>
+