<div id="how-it-works" class="order-2 md:order-1"> <h3 class="text-2xl font-bold mb-4">How It Works</h3> <p class="text-gray-400 mb-6"> We pick up every enquiry, qualify it, and book it—then notify both sides. <strong>Works with your tools.</strong> </p> <ul class="space-y-3"> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i class=></i></div> <span><strong>1) Customer reaches you</strong> (call, SMS, WhatsApp, or your usual channel).</span> </li> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i class=></i></div> <span><strong>2) We qualify</strong> suburb, job type, photos, access, timeframe, and budget.</span> </li> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i class=></i></div> <span><strong>3) We book it</strong> into your Google/Outlook calendar and tag the job (e.g., “Plumbing — burst pipe”).</span> </li> <li class="flex items-start"> <div class="text-accent mr-3 mt-1"><i ></i></div> <span><strong>4) Everyone is notified</strong>: summary to you; confirmation & reminder to the customer.</span> </li> </ul> </div> Make the enumerations 1) 2) 3) and 4) have this formatclass="bg-gradient-to-r from-accent to-accent2 bg-clip-text text-transparent" - Follow Up Deployment

index.html

@@ -1224,24 +1224,61 @@
             starfield.appendChild(star);
         }
 
-        // FAQ accordion
-        const accordions = document.querySelectorAll('.accordion');
-        accordions.forEach(accordion => {
-            const header = accordion.querySelector('.accordion-header');
-            const icon = header.querySelector('i');
-            
-            header.addEventListener('click', () => {
-                accordion.classList.toggle('active');
-                
-                if (accordion.classList.contains('active')) {
-                    icon.classList.remove('fa-chevron-down');
-                    icon.classList.add('fa-chevron-up');
-                } else {
-                    icon.classList.remove('fa-chevron-up');
-                    icon.classList.add('fa-chevron-down');
-                }
+        // FAQ accordion (una abierta + animación)
+            const accordions = document.querySelectorAll('.accordion');
+
+            // colapsa todo de inicio
+            accordions.forEach(acc => {
+            const header  = acc.querySelector('.accordion-header');
+            const content = acc.querySelector('.accordion-content');
+            const icon    = acc.querySelector('.accordion-header i');
+            if (!header || !content) return;
+
+            // evita submit si es <button>
+            if (header.tagName === 'BUTTON') header.type = 'button';
+
+            // preps para animación (quitamos hidden por si está en el HTML)
+            content.classList.remove('hidden');
+            content.style.overflow   = 'hidden';
+            content.style.maxHeight  = '0px';
+            content.style.transition = 'max-height 300ms ease';
+            acc.classList.remove('active');
+            if (icon) { icon.classList.remove('fa-chevron-up'); icon.classList.add('fa-chevron-down'); }
             });
-        });
+
+// click handlers
+accordions.forEach(acc => {
+  const header  = acc.querySelector('.accordion-header');
+  const content = acc.querySelector('.accordion-content');
+  const icon    = acc.querySelector('.accordion-header i');
+  if (!header || !content) return;
+
+  header.addEventListener('click', () => {
+    const wasOpen = acc.classList.contains('active');
+
+    // cierra todos
+    accordions.forEach(other => {
+      const oc = other.querySelector('.accordion-content');
+      const oi = other.querySelector('.accordion-header i');
+      other.classList.remove('active');
+      if (oc) oc.style.maxHeight = '0px';
+      if (oi) { oi.classList.remove('fa-chevron-up'); oi.classList.add('fa-chevron-down'); }
+    });
+
+    // si estaba cerrada, abre la actual
+    if (!wasOpen) {
+      acc.classList.add('active');
+      content.style.maxHeight = content.scrollHeight + 'px';
+      if (icon) { icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-up'); }
+    }
+  });
+});
+
+// re-calcula altura si cambia el layout (p.ej., responsive)
+window.addEventListener('resize', () => {
+  const open = document.querySelector('.accordion.active .accordion-content');
+  if (open) open.style.maxHeight = open.scrollHeight + 'px';
+});
 
         // Smooth scrolling for anchor links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {