{"id":139,"date":"2026-05-05T14:16:34","date_gmt":"2026-05-05T14:16:34","guid":{"rendered":"https:\/\/developer.devsigntech.com\/concept\/?page_id=139"},"modified":"2026-06-24T12:02:55","modified_gmt":"2026-06-24T12:02:55","slug":"test-2","status":"publish","type":"page","link":"https:\/\/developer.devsigntech.com\/concept\/","title":{"rendered":"test 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"139\" class=\"elementor elementor-139\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7020b54d elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7020b54d\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-40ebc495\" data-id=\"40ebc495\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5da7b7ba elementor-widget elementor-widget-html\" data-id=\"5da7b7ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Font Awesome + Google Fonts (loaded from public CDNs) -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700;900&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* =================================================================\r\n   RUBEN LANDSCAPING \u2014 v3 layout\r\n   - Every rule is scoped under .ruben-app (safe in any WP install)\r\n   - Each page fits in ONE viewport (no scrolling)\r\n   - Each page = brand header + divider + gold-bordered \"frame\"\r\n   - Only the Gallery page has arrows (they cycle the gallery image)\r\n   ================================================================= *\/\r\n\r\n\/* -----------------------------------------------------------------\r\n   1. RESET & BASE \u2014 scoped to .ruben-app only\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app,\r\n.ruben-app *,\r\n.ruben-app *::before,\r\n.ruben-app *::after { box-sizing: border-box; }\r\n\r\n.ruben-app img    { max-width: 100%; display: block; }\r\n.ruben-app button { font-family: inherit; cursor: pointer; background: transparent; border: 0; padding: 0; color: inherit; }\r\n.ruben-app a      { text-decoration: none; color: inherit; }\r\n.ruben-app ul     { list-style: none; padding: 0; margin: 0; }\r\n.ruben-app p,\r\n.ruben-app h1,\r\n.ruben-app h2,\r\n.ruben-app h3    { margin: 0; }\r\n\r\n\/* -----------------------------------------------------------------\r\n   2. APP SHELL\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app {\r\n  --ra-gold:        #f5c518;\r\n  --ra-gold-soft:   #e8b923;\r\n  --ra-cream:       #f7e9b3;\r\n  --ra-green:       #9eff3a;\r\n  --ra-green-leaf:  #7cc242;\r\n  --ra-bg-dark:     #0a0a0a;\r\n  --ra-txt-muted:   #d6d6d6;\r\n\r\n  --ra-tab-h:       82px;\r\n  --ra-footer-h:    32px;\r\n  --ra-max-w:       460px;\r\n\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: var(--ra-max-w);\r\n  margin: 0 auto;\r\n  height: 100vh;\r\n  background: #000;\r\n  color: #fff;\r\n  font-family: 'Poppins', system-ui, -apple-system, sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  overflow: hidden;\r\n  box-shadow: 0 0 60px rgba(0, 0, 0, .6);\r\n  isolation: isolate;\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   3. PAGE STACK \u2014 only the active page is shown\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .page {\r\n  position: absolute;\r\n  inset: 0 0 calc(var(--ra-tab-h) + var(--ra-footer-h)) 0;\r\n  display: none;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n}\r\n.ruben-app .page.is-active {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.ruben-app .page__bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  z-index: 0;\r\n}\r\n\r\n.ruben-app .page__overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(180deg,\r\n              rgba(0,0,0,.62) 0%,\r\n              rgba(0,0,0,.45) 35%,\r\n              rgba(0,0,0,.62) 70%,\r\n              rgba(0,0,0,.82) 100%);\r\n  z-index: 1;\r\n}\r\n.ruben-app .page__overlay--quote {\r\n  background: linear-gradient(180deg, rgba(20,12,4,.6), rgba(20,12,4,.85));\r\n}\r\n\r\n.ruben-app .page__content {\r\n  position: relative;\r\n  z-index: 2;\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding: 12px 14px 14px;\r\n  gap: 8px;\r\n  min-height: 0;\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   4. BRAND HEADER (logo + glowing gold divider)\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .brand {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 12px;\r\n  padding: 4px 0 2px;\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .brand__leaf {\r\n  width: 38px;\r\n  height: 38px;\r\n  display: inline-flex;\r\n  flex-shrink: 0;\r\n  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));\r\n}\r\n.ruben-app .brand__leaf svg { width: 100%; height: 100%; }\r\n\r\n.ruben-app .brand__name {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-weight: 700;\r\n  font-size: 32px;\r\n  line-height: 1;\r\n  color: var(--ra-gold);\r\n  letter-spacing: .3px;\r\n  text-shadow: 0 2px 6px rgba(0,0,0,.85);\r\n}\r\n\r\n.ruben-app .brand__divider {\r\n  border: 0;\r\n  height: 1px;\r\n  margin: 6px 0 2px;\r\n  background: linear-gradient(90deg,\r\n    rgba(245,197,24,0) 0%,\r\n    rgba(245,197,24,.95) 30%,\r\n    rgba(245,197,24,.95) 70%,\r\n    rgba(245,197,24,0) 100%);\r\n  box-shadow: 0 0 8px rgba(245,197,24,.55);\r\n  flex-shrink: 0;\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   5. FRAME \u2014 gold-bordered box that fills the page below the header\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .frame {\r\n  position: relative;\r\n  flex: 1;\r\n  min-height: 0;\r\n  border: 2px solid var(--ra-green);\r\n  border-radius: 12px;\r\n  background: rgba(0, 0, 0, .55);\r\n  box-shadow:\r\n    0 0 0 1px rgba(245, 197, 24, .25),\r\n    0 0 22px rgba(245, 197, 24, .25),\r\n    0 8px 18px rgba(0, 0, 0, .55);\r\n  overflow: hidden;\r\n}\r\n\r\n.ruben-app .frame__inner {\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 12px 18px;\r\n  gap: 10px;\r\n  text-align: center;\r\n  overflow: hidden;\r\n}\r\n\r\n\/* Arrows \u2014 only on Gallery *\/\r\n.ruben-app .frame__arrow {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  z-index: 5;\r\n  width: 30px;\r\n  height: 30px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #1a1a1a;\r\n  color: var(--ra-greem);\r\n  border: 1.5px solid var(--ra-green);\r\n  border-radius: 4px;\r\n  font-size: 13px;\r\n  box-shadow: 0 3px 10px rgba(0, 0, 0, .7);\r\n  transition: background .15s ease, color .15s ease, transform .15s ease;\r\n}\r\n.ruben-app .frame__arrow:hover {\r\n  background: var(--ra-green);\r\n  color: #0a0a0a;\r\n  transform: translateY(-50%) scale(1.05);\r\n}\r\n.ruben-app .frame__arrow--prev { left: 6px; }\r\n.ruben-app .frame__arrow--next { right: 6px; }\r\n\r\n\/* -----------------------------------------------------------------\r\n   6. PAGE TITLES\r\n      - .page-title       : default styling (Playfair, gold)\r\n      - .page-title--white: white bold variant for Home\/Services\/Gallery\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .page-title {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-weight: 700;\r\n  font-size: 24px;\r\n  line-height: 1.05;\r\n  color: var(--ra-gold);\r\n  text-shadow: 0 2px 6px rgba(0, 0, 0, .85);\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .page-title--white {\r\n  color: #fff;\r\n  font-weight: 800;\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   7. FEATURED PHOTO (image inside the frame)\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .featured-photo {\r\n  flex: 1;\r\n  width: 100%;\r\n  border-radius: 6px;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(245, 197, 24, .4);\r\n  background: #0a0a0a;\r\n  min-height: 110px;\r\n  display: flex;\r\n}\r\n.ruben-app .featured-photo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n.ruben-app .featured-photo--short {\r\n  flex: 0 0 auto;\r\n  height: 110px;\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   8. PHONE CTA \u2014 pulsing gold pill (Home page only now)\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .phone-cta {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 12px;\r\n  padding: 11px 22px;\r\n  width: 100%;\r\n  max-width: 360px;\r\n  background:\r\n    radial-gradient(ellipse at center, rgba(245,197,24,.18) 0%, rgba(0,0,0,.92) 70%),\r\n    #0a0703;\r\n  border: 2px solid var(--ra-green);\r\n  border-radius: 999px;\r\n  box-shadow:\r\n    0 0 0 2px rgba(245, 197, 24, .35),\r\n    0 0 24px rgba(245, 197, 24, .55),\r\n    inset 0 0 16px rgba(245, 197, 24, .12);\r\n  animation: rubenPulse 2.4s ease-in-out infinite;\r\n  transition: transform .15s ease;\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .phone-cta:hover { transform: translateY(-2px); }\r\n\r\n@keyframes rubenPulse {\r\n  0%, 100% {\r\n    box-shadow:\r\n      0 0 0 2px rgba(245, 197, 24, .35),\r\n      0 0 24px rgba(245, 197, 24, .55),\r\n      inset 0 0 16px rgba(245, 197, 24, .12);\r\n  }\r\n  50% {\r\n    box-shadow:\r\n      0 0 0 3px rgba(245, 197, 24, .55),\r\n      0 0 38px rgba(245, 197, 24, .8),\r\n      inset 0 0 22px rgba(245, 197, 24, .2);\r\n  }\r\n}\r\n\r\n.ruben-app .phone-cta__icon {\r\n  width: 26px;\r\n  height: 26px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 20px;\r\n  color: var(--ra-green);\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .phone-cta__inner {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  line-height: 1.1;\r\n}\r\n.ruben-app .phone-cta__number {\r\n  font-weight: 800;\r\n  font-size: 18px;\r\n  color: #fff;\r\n  letter-spacing: .5px;\r\n  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);\r\n}\r\n.ruben-app .phone-cta__sub {\r\n  font-size: 11.5px;\r\n  color: var(--ra-gold);\r\n  margin-top: 2px;\r\n  letter-spacing: .3px;\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   9. SERVICES \u2014 checklist (now bold white) \u2014 no more 3 cards\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .services-grid {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 4px 16px;\r\n  width: 100%;\r\n  max-width: 380px;\r\n  margin: 0 auto;\r\n  padding: 0 4px;\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .services-grid li {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-weight: 700;\r\n  color: #fff;\r\n  font-size: 14px;\r\n  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);\r\n}\r\n.ruben-app .services-grid li i {\r\n  color: var(--ra-green);\r\n  font-size: 14px;\r\n  filter: drop-shadow(0 0 3px rgba(158, 255, 58, .55));\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   10. GALLERY \u2014 image fills middle, label sits below\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .gallery-photo {\r\n  flex: 1;\r\n  width: 100%;\r\n  border-radius: 6px;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(245, 197, 24, .4);\r\n  background: #0a0a0a;\r\n  display: flex;\r\n  position: relative;\r\n}\r\n.ruben-app .gallery-photo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  transition: opacity .25s ease;\r\n}\r\n\r\n.ruben-app .gallery-label {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-weight: 800;\r\n  font-size: 24px;\r\n  color: #fff;\r\n  letter-spacing: .5px;\r\n  text-shadow: 0 2px 6px rgba(0, 0, 0, .85);\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .gallery-title {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-weight: 800;\r\n  font-size: 24px;\r\n  color: #fff;\r\n  letter-spacing: .5px;\r\n  text-shadow: 0 2px 6px rgba(0, 0, 0, .85);\r\n  flex-shrink: 0;\r\n}\r\n\r\n\r\n\/* -----------------------------------------------------------------\r\n   11. QUOTE \u2014 title (gold) + subtitle (white bold) + form\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .quote-title {\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-weight: 700;\r\n  font-size: 22px;\r\n  line-height: 1.1;\r\n  color: #fff;\r\n  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .text-gold { color: var(--ra-gold); }\r\n\r\n.ruben-app .quote-sub {\r\n  font-size: 12.5px;\r\n  color: var(--ra-cream);\r\n  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .quote-sub--white {\r\n  color: #fff;\r\n  font-weight: 700;\r\n}\r\n\r\n.ruben-app .quote-form {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 6px;\r\n  width: 100%;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ruben-app .form-row {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 8px;\r\n}\r\n\r\n.ruben-app .field {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(14, 9, 5, .85);\r\n  border: 1px solid #4a3219;\r\n  border-radius: 4px;\r\n  padding: 0 10px;\r\n  min-height: 34px;\r\n  transition: border-color .15s ease, box-shadow .15s ease;\r\n}\r\n.ruben-app .field:focus-within {\r\n  border-color: var(--ra-green);\r\n  box-shadow: 0 0 0 1px rgba(245, 197, 24, .35);\r\n}\r\n.ruben-app .field > i {\r\n  color: var(--ra-green);\r\n  font-size: 13px;\r\n  margin-right: 8px;\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .field input,\r\n.ruben-app .field textarea {\r\n  flex: 1;\r\n  background: transparent;\r\n  border: 0;\r\n  outline: none;\r\n  color: #fff;\r\n  font-family: inherit;\r\n  font-size: 13px;\r\n  padding: 7px 0;\r\n  width: 100%;\r\n  resize: none;\r\n}\r\n.ruben-app .field input::placeholder,\r\n.ruben-app .field textarea::placeholder { \r\n  font-size: 13px;\r\n  color: #fff; }\r\n\r\n.ruben-app .field--textarea {\r\n  flex-direction: column;\r\n  align-items: stretch;\r\n  padding: 7px 10px;\r\n  min-height: 64px;\r\n}\r\n.ruben-app .field--textarea .field__top {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  color: #fff;\r\n  font-size: 12px;\r\n  margin-bottom: 2px;\r\n}\r\n.ruben-app .field--textarea .field__top i { color: #fff; }\r\n.ruben-app .field--textarea textarea {\r\n  padding: 2px 0 0;\r\n  min-height: 38px;\r\n}\r\n\r\n.ruben-app .quote-submit {\r\n  margin: 4px auto 0;\r\n  display: block;\r\n  background: linear-gradient(180deg, #1a1208 0%, #0a0603 100%);\r\n  border: 2px solid var(--ra-green);\r\n  border-radius: 999px;\r\n  color: var(--ra-cream);\r\n  font-family: 'Playfair Display', Georgia, serif;\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  padding: 8px 28px;\r\n  min-width: 200px;\r\n  box-shadow:\r\n    0 0 0 1px rgba(245, 197, 24, .25),\r\n    0 6px 16px rgba(0, 0, 0, .55);\r\n  transition: transform .15s ease, box-shadow .15s ease;\r\n  flex-shrink: 0;\r\n}\r\n.ruben-app .quote-submit--white {\r\n  color: #fff;\r\n  font-weight: 800;\r\n}\r\n.ruben-app .quote-submit:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow:\r\n    0 0 0 1px rgba(245, 197, 24, .45),\r\n    0 10px 22px rgba(0, 0, 0, .7);\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   12. BOTTOM TAB BAR (4 tabs)\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .tabbar {\r\n  position: absolute;\r\n  bottom: var(--ra-footer-h);\r\n  left: 0;\r\n  right: 0;\r\n  height: var(--ra-tab-h);\r\n  background: #000;\r\n  border-top: 1px solid #1a1a1a;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-around;\r\n  padding: 8px 6px 6px;\r\n  z-index: 50;\r\n}\r\n\r\n.ruben-app .tab {\r\n  flex: 1;\r\n  background: transparent;\r\n  border: 0;\r\n  padding: 0;\r\n  color: #fff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 4px;\r\n  text-decoration: none;\r\n}\r\n\r\n.ruben-app .tab__icon {\r\n  width: 50px;\r\n  height: 50px;\r\n  border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: #000;\r\n  font-size: 20px;\r\n  color: #fff;\r\n  transition: all .2s ease;\r\n}\r\n.ruben-app .tab__label {\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  color: #fff;\r\n  letter-spacing: .2px;\r\n}\r\n.ruben-app .tab.is-active .tab__icon {\r\n  border-color: var(--ra-green);\r\n  color: var(--ra-green);\r\n  box-shadow:\r\n    0 0 0 2px rgba(158, 255, 58, .35),\r\n    0 0 18px rgba(158, 255, 58, .55);\r\n}\r\n.ruben-app .tab.is-active .tab__label { color: var(--ra-green); }\r\n\r\n\/* -----------------------------------------------------------------\r\n   13. FOOTER\r\n   ----------------------------------------------------------------- *\/\r\n.ruben-app .site-footer {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: var(--ra-footer-h);\r\n  background: #000;\r\n  border-top: 1px solid #141414;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0 10px;\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n  color: #fff;\r\n  z-index: 51;\r\n  margin-top: 20px;\r\n}\r\n.ruben-app .site-footer__brand {\r\n  color: var(--ra-green);\r\n  font-weight: 500;\r\n  letter-spacing: .3px;\r\n}\r\n\r\n\/* -----------------------------------------------------------------\r\n   14. RESPONSIVE\r\n   ----------------------------------------------------------------- *\/\r\n@media (min-width: 700px) {\r\n  .ruben-app {\r\n    --ra-max-w: 540px;\r\n    --ra-tab-h: 92px;\r\n    --ra-footer-h: 36px;\r\n    border-radius: 24px;\r\n    border: 1px solid #1a1a1a;\r\n  }\r\n  .ruben-app .brand__name      { font-size: 38px; }\r\n  .ruben-app .brand__leaf      { width: 46px; height: 46px; }\r\n  .ruben-app .page-title       { font-size: 32px; }\r\n  .ruben-app .quote-title      { font-size: 38px; }\r\n  .ruben-app .quote-sub        { font-size: 14px; }\r\n  .ruben-app .gallery-label    { font-size: 28px; }\r\n  .ruben-app .services-grid li { font-size: 15px; }\r\n  .ruben-app .featured-photo--short { height: 130px; }\r\n  .ruben-app .frame__inner     { padding: 16px 28px; gap: 12px; }\r\n}\r\n\r\n@media (min-width: 1100px) {\r\n  .ruben-app {\r\n    --ra-max-w: 1100px;\r\n    --ra-tab-h: 100px;\r\n    --ra-footer-h: 40px;\r\n  }\r\n  .ruben-app .page__content     { padding: 18px 28px 22px; gap: 12px; }\r\n  .ruben-app .brand__name       { font-size: 56px; }\r\n  .ruben-app .brand__leaf       { width: 64px; height: 64px; }\r\n  .ruben-app .page-title        { font-size: 48px; }\r\n  .ruben-app .quote-title       { font-size: 40px; }\r\n  .ruben-app .quote-sub         { font-size: 17px; }\r\n  .ruben-app .gallery-label     { font-size: 36px; }\r\n\r\n  .ruben-app .frame__inner      { padding: 28px 60px; gap: 16px; }\r\n\r\n  .ruben-app .services-grid     { max-width: 720px; gap: 8px 60px; }\r\n  .ruben-app .services-grid li  { font-size: 18px; }\r\n  .ruben-app .services-grid li i{ font-size: 18px; }\r\n\r\n  .ruben-app .featured-photo--short { height: 180px; }\r\n\r\n  .ruben-app .frame__arrow      { width: 44px; height: 44px; font-size: 18px; }\r\n  .ruben-app .frame__arrow--prev { left: 14px; }\r\n  .ruben-app .frame__arrow--next { right: 14px; }\r\n\r\n  .ruben-app .phone-cta         { max-width: 460px; padding: 14px 26px; }\r\n  .ruben-app .phone-cta__number { font-size: 26px; }\r\n  .ruben-app .phone-cta__sub    { font-size: 13px; }\r\n  .ruben-app .phone-cta__icon   { font-size: 24px; width: 30px; height: 30px; }\r\n\r\n  .ruben-app .field             { min-height: 46px; }\r\n  .ruben-app .field input,\r\n  .ruben-app .field textarea    { font-size: 15px; padding: 9px 0; }\r\n  .ruben-app .field--textarea   { min-height: 100px; }\r\n  .ruben-app .quote-submit      { font-size: 20px; min-width: 280px; padding: 12px 36px; }\r\n\r\n  .ruben-app .tab__icon  { width: 62px; height: 62px; font-size: 26px; }\r\n  .ruben-app .tab__label { font-size: 13px; }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- ============ APP SHELL ============ -->\r\n  <div class=\"ruben-app\">\r\n\r\n    <!-- ============================================================\r\n         PAGE 1 \u2014 HOME (mirrors Gallery layout, no arrows)\r\n         ============================================================ -->\r\n    <section class=\"page page--home is-active\" id=\"page-home\" data-page=\"home\">\r\n      <div class=\"page__bg\" style=\"background-image: url('https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/home-bg.jpg');\"><\/div>\r\n      <div class=\"page__overlay\"><\/div>\r\n\r\n      <div class=\"page__content\">\r\n        <!-- <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <span class=\"brand__name\">Ruben Landscaping<\/span>\r\n        <\/header> -->\r\n        <!-- <hr class=\"brand__divider\" \/> -->\r\n\r\n        <div class=\"frame\">\r\n          <div class=\"frame__inner\">\r\n            <!-- <h1 class=\"page-title page-title--white\">Ruben Landscaping<\/h1> -->\r\n            <!-- <span class=\"brand__name\">Ruben Landscaping<\/span> -->\r\n            <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <!-- <span class=\"brand__name\">Ruben Landscaping<\/span> -->\r\n          <h1 class=\"page-title page-title--white\">Ruben Landscaping<\/h1>\r\n        <\/header>\r\n\r\n            <div class=\"featured-photo\">\r\n              <img decoding=\"async\" src=\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/home-main.jpg\" alt=\"Featured landscape\" \/>\r\n            <\/div>\r\n\r\n            <a href=\"tel:8657406975\" class=\"phone-cta\">\r\n              <span class=\"phone-cta__icon\"><i class=\"fa-solid fa-phone\"><\/i><\/span>\r\n              <span class=\"phone-cta__inner\">\r\n                <span class=\"phone-cta__number\">(865) 740-6975<\/span>\r\n                <!-- <span class=\"phone-cta__sub\">Call Now for a Free Estimate<\/span> -->\r\n              <\/span>\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============================================================\r\n         PAGE 2 \u2014 SERVICES (no arrows, image in middle, list bottom)\r\n         ============================================================ -->\r\n    <section class=\"page page--services\" id=\"page-services\" data-page=\"services\">\r\n      <div class=\"page__bg\" style=\"background-image: url('https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/services-bg.jpg');\"><\/div>\r\n      <div class=\"page__overlay\"><\/div>\r\n\r\n      <div class=\"page__content\">\r\n        <!-- <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <span class=\"brand__name\">Ruben Landscaping<\/span>\r\n        <\/header> -->\r\n        <!-- <hr class=\"brand__divider\" \/> -->\r\n\r\n        <div class=\"frame frame--gallery\">\r\n          <button type=\"button\" class=\"frame__arrow frame__arrow--prev\" data-gallery=\"prev\" aria-label=\"Previous image\">\r\n            <i class=\"fa-solid fa-chevron-left\"><\/i>\r\n          <\/button>\r\n          <button type=\"button\" class=\"frame__arrow frame__arrow--next\" data-gallery=\"next\" aria-label=\"Next image\">\r\n            <i class=\"fa-solid fa-chevron-right\"><\/i>\r\n          <\/button>\r\n\r\n          <div class=\"frame__inner\">\r\n          <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <!-- <span class=\"brand__name\">Ruben Landscaping<\/span> -->\r\n          <h1 class=\"page-title page-title--white\">Ruben Landscaping<\/h1>\r\n        <\/header>\r\n            <!-- <h2 class=\"page-title page-title--white\">Our Gallery<\/h2> -->\r\n\r\n            <!-- The JS swaps both src + alt + the label below using\r\n                 data-gallery-images on this element. -->\r\n            <div class=\"gallery-photo\"\r\n                 data-gallery-images='[\r\n                    {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/06\/surb_updated.jpg\",\"label\":\"Curb Appeal\"},\r\n                    {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/flower.jpg\",\"label\":\"Flower Maintenance\"},\r\n                    {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/trimming.jpg\",\"label\":\"Trimming\"},\r\n                    {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/crub-appeal.jpg\",\"label\":\"Lawn Care\"},\r\n                    {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/hardscapes.jpg\",\"label\":\"Hardscapes\"},\r\n                    {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/mulch.jpg\",\"label\":\"Mulch Installation\"},\r\n                    {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/mowing.jpg\",\"label\":\"Mowing\"}\r\n                 ]'>\r\n              <img decoding=\"async\" src=\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/06\/surb_updated.jpg\" alt=\"Curb Appeal\" \/>\r\n            <\/div>\r\n\r\n            <p class=\"gallery-label\">Curb Appeal<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============================================================\r\n         PAGE 3 \u2014 GALLERY (KEEPS arrows; arrows cycle images)\r\n         ============================================================ -->\r\n    <section class=\"page page--gallery\" id=\"page-gallery\" data-page=\"gallery\">\r\n      <div class=\"page__bg\" style=\"background-image: url('https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/trimming.jpg');\"><\/div>\r\n      <div class=\"page__overlay\"><\/div>\r\n\r\n      <div class=\"page__content\">\r\n        <!-- <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <h1 class=\"page-title page-title--white\">Ruben Landscaping<\/h1>\r\n        <\/header> -->\r\n        <!-- <hr class=\"brand__divider\" \/> -->\r\n\r\n        <div class=\"frame frame--gallery\">\r\n          <button type=\"button\" class=\"frame__arrow frame__arrow--prev\" data-gallery=\"prev\" aria-label=\"Previous image\">\r\n            <i class=\"fa-solid fa-chevron-left\"><\/i>\r\n          <\/button>\r\n          <button type=\"button\" class=\"frame__arrow frame__arrow--next\" data-gallery=\"next\" aria-label=\"Next image\">\r\n            <i class=\"fa-solid fa-chevron-right\"><\/i>\r\n          <\/button>\r\n\r\n          <div class=\"frame__inner\">\r\n          <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <!-- <span class=\"brand__name\">Ruben Landscaping<\/span> -->\r\n          <h1 class=\"page-title page-title--white\">Ruben Landscaping<\/h1>\r\n        <\/header>\r\n            <!-- <h2 class=\"page-title page-title--white\">Our Gallery<\/h2> -->\r\n\r\n            <!-- The JS swaps both src + alt + the label below using\r\n                 data-gallery-images on this element. -->\r\n            <div class=\"gallery-photo\"\r\n                 data-gallery-images='[\r\n                   \r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-1.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-2.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-3.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-4.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-5.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-6.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-7.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-8.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-12.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-13.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-14.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-15.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-16.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-17.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-18.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-19.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-20.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-21.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-22.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-25.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-26.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-27.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-28.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-29.jpg\",\"label\":\"\"},\r\n                   {\"src\":\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/ruben-30.jpg\",\"label\":\"\"}\r\n                 ]'>\r\n              <img decoding=\"async\" src=\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/mowing.jpg\" alt=\"Mowing\" \/>\r\n            <\/div>\r\n            <p class=\"gallery-title\">Our Gallery<\/p>\r\n            <p class=\"gallery-label\"><\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============================================================\r\n         PAGE 4 \u2014 QUOTE (no arrows; image + form)\r\n         ============================================================ -->\r\n    <section class=\"page page--quote\" id=\"page-quote\" data-page=\"quote\">\r\n      <div class=\"page__bg\" style=\"background-image: url('https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/flower.jpg');\"><\/div>\r\n      <div class=\"page__overlay page__overlay--quote\"><\/div>\r\n\r\n      <div class=\"page__content\">\r\n        <!-- <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <span class=\"brand__name\">Ruben Landscaping<\/span>\r\n        <\/header> -->\r\n        <!-- <hr class=\"brand__divider\" \/> -->\r\n\r\n        <div class=\"frame\">\r\n          <div class=\"frame__inner\">\r\n          <header class=\"brand\">\r\n          <span class=\"brand__leaf\">\r\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\r\n              <path d=\"M52 8c-18 0-34 12-38 28-2 9 2 18 10 22 0-14 8-26 22-32-10 8-16 18-18 30 12 0 24-6 30-16 8-12 6-26-6-32z\" fill=\"#7cc242\"\/>\r\n              <path d=\"M22 50c4-12 12-22 22-28-12 4-22 14-26 26 1 1 2 2 4 2z\" fill=\"#4a8a1e\" opacity=\".7\"\/>\r\n            <\/svg>\r\n          <\/span>\r\n          <!-- <span class=\"brand__name\">Ruben Landscaping<\/span> -->\r\n          <h1 class=\"page-title page-title--white\">Ruben Landscaping<\/h1>\r\n        <\/header>\r\n            <!-- <h2 class=\"quote-title\">\r\n                <span class=\"text-gold\">Request a Free Quote<\/span>\r\n            <\/h2> -->\r\n            <p style=\"color: #9eff3a\">\r\n              Get a fast, no-obligation quote for your landscaping project!\r\n            <\/p>\r\n\r\n            <!-- <div class=\"featured-photo featured-photo--short\">\r\n              <img decoding=\"async\" src=\"https:\/\/developer.devsigntech.com\/concept\/wp-content\/uploads\/2026\/05\/contact-front.jpg\" alt=\"Landscaping showcase\" \/>\r\n            <\/div> -->\r\n\r\n            <form class=\"quote-form\" onsubmit=\"event.preventDefault(); alert('Thanks! We will get back to you shortly.');\">\r\n              <div class=\"form-row\">\r\n                <label class=\"field\">\r\n                  <i class=\"fa-solid fa-user\"><\/i>\r\n                  <input type=\"text\" name=\"name\" placeholder=\"Full Name\" required \/>\r\n                <\/label>\r\n                <label class=\"field\">\r\n                  <i class=\"fa-solid fa-location-dot\"><\/i>\r\n                  <input type=\"text\" name=\"address\" placeholder=\"Address\" required \/>\r\n                <\/label>\r\n              <\/div>\r\n\r\n              <div class=\"form-row\">\r\n                <label class=\"field\">\r\n                  <i class=\"fa-solid fa-phone\"><\/i>\r\n                  <input type=\"tel\" name=\"phone\" placeholder=\"Phone\" required \/>\r\n                <\/label>\r\n                <label class=\"field\">\r\n                  <i class=\"fa-solid fa-city\"><\/i>\r\n                  <input type=\"text\" name=\"city\" placeholder=\"City\" \/>\r\n                <\/label>\r\n              <\/div>\r\n\r\n              <label class=\"field field--textarea\">\r\n                <span class=\"field__top\">\r\n                  <i class=\"fa-solid fa-bars\"><\/i>\r\n                  <span>Describe your project...<\/span>\r\n                <\/span>\r\n                <textarea name=\"details\" rows=\"2\" placeholder=\"\"><\/textarea>\r\n              <\/label>\r\n\r\n              <button type=\"submit\" class=\"quote-submit quote-submit--white\">Get My Free Quote<\/button>\r\n            <\/form>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ============================================================\r\n         BOTTOM TAB BAR (4 tabs)\r\n         ============================================================ -->\r\n    <nav class=\"tabbar\" role=\"tablist\" aria-label=\"Primary\">\r\n      <button class=\"tab is-active\" data-target=\"home\" role=\"tab\" aria-selected=\"true\">\r\n        <span class=\"tab__icon\"><i class=\"fa-solid fa-house\"><\/i><\/span>\r\n        <span class=\"tab__label\">Home<\/span>\r\n      <\/button>\r\n\r\n      <button class=\"tab\" data-target=\"services\" role=\"tab\" aria-selected=\"false\">\r\n        <span class=\"tab__icon\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/span>\r\n        <span class=\"tab__label\">Services<\/span>\r\n      <\/button>\r\n\r\n      <button class=\"tab\" data-target=\"gallery\" role=\"tab\" aria-selected=\"false\">\r\n        <span class=\"tab__icon\"><i class=\"fa-solid fa-image\"><\/i><\/span>\r\n        <span class=\"tab__label\">Gallery<\/span>\r\n      <\/button>\r\n\r\n      <button class=\"tab\" data-target=\"quote\" role=\"tab\" aria-selected=\"false\">\r\n        <span class=\"tab__icon\"><i class=\"fa-solid fa-comment\"><\/i><\/span>\r\n        <span class=\"tab__label\">Quote<\/span>\r\n      <\/button>\r\n    <\/nav>\r\n\r\n    <footer class=\"site-footer\">\r\n      <span class=\"site-footer__copy\">\u00a9 All Rights Reserved.<\/span>\r\n      <a class=\"site-footer__brand\" href=\"#\">Knoxville Neighborhood Services<\/a>\r\n    <\/footer>\r\n  <\/div>\r\n\r\n<script>\r\n\/* =================================================================\r\n   RUBEN LANDSCAPING \u2014 UI behavior\r\n\r\n   - Bottom tabs switch which .page is visible\r\n   - Gallery page only: prev\/next arrows cycle the gallery photo\r\n     and update the label underneath it\r\n   - All DOM queries are scoped to .ruben-app so the script is\r\n     safe to load globally on a WordPress page.\r\n   ================================================================= *\/\r\n\r\n   (function () {\r\n  'use strict';\r\n\r\n  function init() {\r\n    document.querySelectorAll('.ruben-app').forEach(initApp);\r\n  }\r\n\r\n  function initApp(root) {\r\n    \/* ------------- TAB SWITCHING ------------- *\/\r\n    var tabs  = root.querySelectorAll('.tab[data-target]');\r\n    var pages = root.querySelectorAll('.page');\r\n\r\n    function switchTo(targetId) {\r\n      pages.forEach(function (p) {\r\n        p.classList.toggle('is-active', p.dataset.page === targetId);\r\n      });\r\n      tabs.forEach(function (t) {\r\n        var isActive = t.dataset.target === targetId;\r\n        t.classList.toggle('is-active', isActive);\r\n        t.setAttribute('aria-selected', isActive ? 'true' : 'false');\r\n      });\r\n    }\r\n\r\n    tabs.forEach(function (tab) {\r\n      tab.addEventListener('click', function (e) {\r\n        e.preventDefault();\r\n        switchTo(tab.dataset.target);\r\n      });\r\n    });\r\n\r\n    \/* ------------- GALLERY IMAGE CAROUSEL -------------\r\n       Loop over EVERY .frame--gallery so each one gets\r\n       its own independent state (index, slides, buttons).\r\n    -------------------------------------------------- *\/\r\n    root.querySelectorAll('.frame--gallery').forEach(function (frame) {\r\n      var photoEl = frame.querySelector('.gallery-photo');\r\n      var labelEl = frame.closest('.page__content').querySelector('.gallery-label');\r\n      var prevBtn = frame.querySelector('.frame__arrow--prev[data-gallery=\"prev\"]');\r\n      var nextBtn = frame.querySelector('.frame__arrow--next[data-gallery=\"next\"]');\r\n\r\n      if (!photoEl || !labelEl || !prevBtn || !nextBtn) return;\r\n\r\n      var slides = [];\r\n      try {\r\n        slides = JSON.parse(photoEl.getAttribute('data-gallery-images') || '[]');\r\n      } catch (err) {\r\n        slides = [];\r\n      }\r\n\r\n      if (slides.length === 0) return;\r\n\r\n      var index = 0;\r\n      var imgEl = photoEl.querySelector('img');\r\n\r\n      function show(i) {\r\n        index = (i + slides.length) % slides.length;\r\n        var s = slides[index];\r\n        imgEl.style.opacity = '0';\r\n        setTimeout(function () {\r\n          imgEl.src = s.src;\r\n          imgEl.alt = s.label || '';\r\n          labelEl.textContent = s.label || '';\r\n          imgEl.style.opacity = '1';\r\n        }, 120);\r\n      }\r\n\r\n      prevBtn.addEventListener('click', function () { show(index - 1); });\r\n      nextBtn.addEventListener('click', function () { show(index + 1); });\r\n\r\n      \/* Touch swipe support *\/\r\n      var startX = null;\r\n      photoEl.addEventListener('touchstart', function (e) {\r\n        startX = e.touches[0].clientX;\r\n      }, { passive: true });\r\n      photoEl.addEventListener('touchend', function (e) {\r\n        if (startX === null) return;\r\n        var dx = e.changedTouches[0].clientX - startX;\r\n        if (Math.abs(dx) > 40) show(index + (dx < 0 ? 1 : -1));\r\n        startX = null;\r\n      });\r\n    });\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', init);\r\n  } else {\r\n    init();\r\n  }\r\n})();\r\n \r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ruben Landscaping (865) 740-6975 Ruben Landscaping Curb Appeal Ruben Landscaping Our Gallery Ruben Landscaping Get a fast, no-obligation quote for your landscaping project! Describe your project&#8230; Get My Free Quote Home Services Gallery Quote \u00a9 All Rights Reserved. Knoxville Neighborhood Services<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-139","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/pages\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":205,"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/pages\/139\/revisions"}],"predecessor-version":[{"id":419,"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/pages\/139\/revisions\/419"}],"wp:attachment":[{"href":"https:\/\/developer.devsigntech.com\/concept\/wp-json\/wp\/v2\/media?parent=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}