feat: implement bilingual English/Spanish toggle with lossless i18n translation engine across all pages

styles.css

@@ -79,6 +79,7 @@ html {
   scroll-behavior: smooth;
   color-scheme: light;
   font-size: 16px;
+  overflow-x: hidden;
 }
 
 body {
@@ -2116,6 +2117,11 @@ textarea.form-control {
     font-size: 1.1rem;
   }
 
+  .hero-title {
+    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
+    word-break: break-word;
+  }
+
   .logo-symbol {
     width: 36px;
     height: 36px;
@@ -2127,9 +2133,13 @@ textarea.form-control {
     padding: 6px;
   }
 
+  #header-quote-btn,
   .header-cta-group .open-quote-btn {
-    padding: 7px 11px;
-    font-size: 0.78rem;
+    display: none !important;
+  }
+
+  .announcement-bar .lang-switch {
+    display: none !important;
   }
 
   .mobile-sticky-bar {
@@ -2200,6 +2210,21 @@ textarea.form-control {
   }
 }
 
+/* Specific Smartphone Adjustments (<= 480px) */
+@media (max-width: 480px) {
+  #header-quote-btn,
+  .header-cta-group .open-quote-btn {
+    display: none !important;
+  }
+  .announcement-bar .lang-switch {
+    display: none !important;
+  }
+  .announcement-bar {
+    padding: 8px 12px;
+    font-size: 0.74rem;
+  }
+}
+
 /* ==========================================================================
    YARD CLEANUP SECTION & FEATURED PROJECTS SECTION (2-SECTION SPLIT)
    ========================================================================== */
@@ -2563,3 +2588,91 @@ section#projects {
   }
 }
 
+/* ==========================================================================
+   LANGUAGE SWITCHER (EN / ES)
+   ========================================================================== */
+.lang-switch {
+  display: inline-flex;
+  align-items: center;
+  background: rgba(15, 23, 42, 0.06);
+  border: 1.5px solid rgba(15, 23, 42, 0.12);
+  border-radius: 20px;
+  padding: 3px;
+  gap: 2px;
+  user-select: none;
+  flex-shrink: 0;
+  transition: all var(--transition-fast);
+}
+
+.lang-switch:hover {
+  border-color: var(--neon-green);
+  box-shadow: 0 0 12px rgba(0, 230, 118, 0.3);
+}
+
+.lang-btn {
+  background: transparent;
+  border: none;
+  color: #64748b;
+  font-family: var(--font-body);
+  font-size: 0.74rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  padding: 5px 11px;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.lang-btn:hover {
+  color: #0f172a;
+}
+
+.lang-btn.active {
+  background: #0f172a;
+  color: var(--neon-lime);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 230, 118, 0.45);
+}
+
+/* Top bar variant */
+.top-bar .lang-switch {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.top-bar .lang-btn {
+  color: #94a3b8;
+  font-size: 0.7rem;
+  padding: 3px 8px;
+}
+
+.top-bar .lang-btn.active {
+  background: var(--neon-lime);
+  color: #05080b;
+  box-shadow: 0 0 10px rgba(0, 230, 118, 0.6);
+}
+
+/* Mobile drawer container */
+.mobile-lang-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--radius-md);
+  margin-bottom: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.mobile-lang-label {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: #cbd5e1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+