{"id":11,"date":"2026-06-29T17:08:05","date_gmt":"2026-06-29T17:08:05","guid":{"rendered":"https:\/\/uxproject.space\/?page_id=11"},"modified":"2026-07-06T11:18:10","modified_gmt":"2026-07-06T11:18:10","slug":"home","status":"publish","type":"page","link":"https:\/\/uxproject.space\/es\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     MODULE 4 \u00b7 home-content.html\n     WP Code location: FRONT PAGE only (home page content)\n     Home section HTML \u00b7 section-only CSS \u00b7 home-only JS (diagnostic, form)\n     Depends on base-global (vars, .btn, .fade, .eyebrow, .section-label,\n     .grad, .container). Contains NO nav, footer, or shared\/global CSS.\n\n     $10K PASS \u2014 full-bleed + mobile-centering fix ONLY. No copy\/context\n     changes. Root cause fixed: 100vw includes the scrollbar width, which\n     (a) shifted content left on mobile and (b) let full-bleed ::before\n     glows clip at the edges (\"square\" backgrounds). Every section now\n     breaks out with the scrollbar-safe technique used on the services\n     page, and every glow layer is pinned to the true viewport width via\n     left:50% + translateX(-50%) instead of inset:0.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   HOME SECTIONS \u2014 full bleed (scrollbar-safe)\n   margin: calc(50% - 50vw) in ONE operation. Both halves resolve\n   against comparable references and cancel cleanly, so the scrollbar\n   width never double-counts and pushes the layout sideways. This is\n   the exact formula the services page uses.\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#hero, #pain, #manifesto, #cost, #services,\n.brand-quote, #diagnostic, #proof, #about,\n#process, #contact {\n  position: relative;\n  width: 100vw;\n  max-width: 100vw;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n\/* Kill any horizontal overflow the full-bleed could introduce,\n   so mobile never shows a sideways scroll or off-center shift. *\/\nhtml, body { overflow-x: hidden; max-width: 100%; }\n\n\/* \u2500\u2500 SHARED: brand gradient border that wakes on hover (rounded-corner safe) \u2500\u2500 *\/\n.pkg::after,\n.t-card::after,\n#process .step::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: linear-gradient(120deg, var(--blue), var(--red));\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n          mask-composite: exclude;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n  pointer-events: none;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   1. HERO\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#hero {\n  min-height: 100svh;\n  display: flex; flex-direction: column;\n  align-items: center; justify-content: center; text-align: center;\n  padding: 120px 40px 80px;\n  overflow: hidden;\n  background: var(--black);\n}\n\/* subtle brand glow behind the headline \u2014 pinned to true viewport width *\/\n#hero::before {\n  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;\n  width: 100vw; transform: translateX(-50%);\n  background:\n    radial-gradient(ellipse 40% 45% at 22% 30%, rgba(0,174,239,0.10), transparent 70%),\n    radial-gradient(ellipse 40% 45% at 78% 68%, rgba(238,30,56,0.09), transparent 70%);\n  filter: blur(120px); pointer-events: none; z-index: 0;\n}\n#hero > * { position: relative; z-index: 1; }\n.hero-h1 {\n  font-size: clamp(36px, 6.5vw, 80px);\n  max-width: 860px; margin: 0 auto 28px;\n  animation: rise 1.1s cubic-bezier(0.16,1,0.3,1) 0.5s both;\n  color: var(--white);\n}\n.h1-exists {\n  background: linear-gradient(90deg, var(--blue) 0%, var(--red) 50%, var(--blue) 100%);\n  background-size: 200% auto;\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n  animation: shimmer-word 7s ease-in-out infinite;\n}\n@keyframes shimmer-word {\n  0% { background-position: 0% center; }\n  50% { background-position: 100% center; }\n  100% { background-position: 0% center; }\n}\n\n.hero-sub {\n  font-size: clamp(18px, 2.2vw, 26px); font-weight: 600;\n  opacity: 0.7; max-width: 560px; margin: 0 auto 44px;\n  line-height: 1.5;\n  animation: rise 1.1s cubic-bezier(0.16,1,0.3,1) 0.95s both;\n}\n.hero-actions {\n  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;\n  animation: rise 1.1s cubic-bezier(0.16,1,0.3,1) 1.1s both;\n}\n@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }\n\n.scroll-indicator {\n  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);\n  display: flex; align-items: center; opacity: 0;\n  animation: rise 1s ease 1.5s both;\n  z-index: 2;\n}\n.scroll-track { width: 1px; height: 64px; position: relative; overflow: hidden; }\n.scroll-track::before {\n  content: ''; position: absolute; left: 0; top: 0;\n  width: 100%; height: 100%;\n  transform-origin: top center;\n  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.55) 35%, rgba(0,174,239,0.55) 100%);\n  animation: scroll-draw 3.4s cubic-bezier(0.65,0,0.35,1) infinite;\n}\n@keyframes scroll-draw {\n  0%   { transform: scaleY(0);   transform-origin: top center;    opacity: 0; }\n  15%  { opacity: 1; }\n  45%  { transform: scaleY(1);   transform-origin: top center;    opacity: 1; }\n  55%  { transform: scaleY(1);   transform-origin: bottom center; opacity: 1; }\n  100% { transform: scaleY(0);   transform-origin: bottom center; opacity: 0; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   2. PAIN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#pain { background: var(--black); }\n\n.pain-intro {\n  padding: 120px 0 80px;\n  border-bottom: 1px solid rgba(255,255,255,0.05);\n}\n.pain-intro h2 { font-size: clamp(32px, 4.5vw, 58px); max-width: 680px; }\n\n.pain-beat {\n  padding: 80px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.04);\n  display: grid; grid-template-columns: 52px 1fr;\n  gap: 0 36px; align-items: start; cursor: default;\n}\n.pain-beat:last-of-type { border-bottom: none; }\n\n.pain-num {\n  font-family: \"poppins\", sans-serif; font-size: 11px; font-weight: 700;\n  letter-spacing: 0.15em; color: var(--red); opacity: 0.4;\n  padding-top: 10px; transition: opacity 0.3s ease;\n}\n.pain-beat:hover .pain-num { opacity: 0.9; }\n\n.pain-text {\n  font-family: \"poppins\", sans-serif;\n  font-size: clamp(22px, 3.2vw, 40px);\n  font-weight: 700; line-height: 1.25; letter-spacing: -0.025em;\n  color: rgba(255,255,255,0.85);\n  background: linear-gradient(100deg, var(--blue) 0%, #8b5cf6 40%, var(--red) 80%);\n  -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: rgba(255,255,255,0.85);\n  background-size: 200% 100%; background-position: 100% 0;\n  transition: background-position 0.7s cubic-bezier(0.16,1,0.3,1), -webkit-text-fill-color 0.4s ease;\n}\n.pain-beat:hover .pain-text {\n  -webkit-text-fill-color: transparent; background-position: 0% 0;\n}\n.pain-text em { font-style: normal; opacity: 0.4; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   3. MANIFESTO \u2014 glows fade BEFORE edges\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#manifesto {\n  min-height: 100svh;\n  display: grid; place-items: center; text-align: center;\n  padding: 100px 40px;\n  background: var(--black);\n  overflow: hidden;\n}\n#manifesto::before {\n  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;\n  width: 100vw; transform: translateX(-50%);\n  background:\n    radial-gradient(ellipse 45% 40% at 25% 55%, rgba(0,174,239,0.14), transparent 70%),\n    radial-gradient(ellipse 45% 40% at 75% 45%, rgba(238,30,56,0.14), transparent 70%);\n  filter: blur(120px);\n  pointer-events: none;\n}\n.manifesto-inner { position: relative; z-index: 1; max-width: 980px; }\n.manifesto-lead {\n  font-family: \"poppins\", sans-serif;\n  font-size: clamp(40px, 7.5vw, 96px); font-weight: 900;\n  letter-spacing: -0.05em; line-height: 0.98; margin-bottom: 28px;\n}\n.manifesto-counter {\n  font-family: \"poppins\", sans-serif;\n  font-size: clamp(26px, 4.4vw, 54px); font-weight: 700;\n  letter-spacing: -0.035em; line-height: 1.06;\n  color: var(--white); opacity: 0.92; margin-bottom: 56px;\n}\n.manifesto-turn {\n  font-family: \"poppins\", sans-serif;\n  font-size: clamp(20px, 2.8vw, 34px); font-weight: 600;\n  letter-spacing: -0.02em; opacity: 0.65;\n  max-width: 640px; margin: 0 auto 52px; line-height: 1.35;\n}\n.manifesto-turn strong { font-weight: 800; opacity: 1; color: var(--white); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   4. COST \u2014 full bleed, bigger type\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#cost {\n  background: var(--off);\n  color: var(--black);\n  padding: 120px 0;\n}\n#cost h2 {\n  font-size: clamp(32px, 4.2vw, 56px);\n  max-width: 620px; margin-bottom: 72px;\n  color: var(--black);\n}\n.cost-cols {\n  display: grid; grid-template-columns: 1fr 1fr;\n  gap: 1px; background: rgba(0,0,0,0.08);\n  border-radius: 24px; overflow: hidden;\n  box-shadow: 0 20px 60px -30px rgba(35,31,32,0.25);   \/* subtle depth *\/\n}\n.cost-col { padding: 64px 56px; background: var(--off); }\n.cost-col-tag {\n  font-family: \"poppins\", sans-serif;\n  font-size: 11px; font-weight: 700;\n  letter-spacing: 0.18em; text-transform: uppercase;\n  margin-bottom: 28px;\n}\n.cost-col.bad .cost-col-tag { color: var(--red); }\n.cost-col.good .cost-col-tag { color: #0080b0; }\n.cost-big {\n  font-family: \"poppins\", sans-serif;\n  font-size: clamp(56px, 7vw, 96px);\n  font-weight: 900; line-height: 0.92; letter-spacing: -0.05em;\n  margin-bottom: 20px;\n}\n.cost-col.bad .cost-big  { color: var(--red); }\n.cost-col.good .cost-big { color: #0080b0; }\n.cost-note {\n  font-size: 17px; color: rgba(35,31,32,0.7);\n  font-weight: 500; margin-bottom: 40px; line-height: 1.55;\n}\n.cost-items { list-style: none; display: flex; flex-direction: column; gap: 18px; }\n.cost-items li {\n  font-size: 17px; color: var(--black); font-weight: 500;\n  line-height: 1.5; display: flex; align-items: baseline; gap: 14px;\n}\n.cost-items li::before {\n  content: ''; flex-shrink: 0;\n  width: 6px; height: 6px; border-radius: 50%;\n  position: relative; top: -1px;\n}\n.cost-col.bad  .cost-items li::before { background: var(--red); }\n.cost-col.good .cost-items li::before { background: #0080b0; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   5. SERVICES \u2014 clean 3-col grid, NO scroll-jack\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#services {\n  background: var(--black);\n  padding: 140px 0;\n  overflow: hidden;\n}\n#services::before {   \/* subtle depth glow *\/\n  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;\n  width: 100vw; transform: translateX(-50%);\n  background:\n    radial-gradient(ellipse 42% 50% at 15% 18%, rgba(0,174,239,0.10), transparent 70%),\n    radial-gradient(ellipse 42% 50% at 85% 88%, rgba(238,30,56,0.09), transparent 70%);\n  filter: blur(120px); pointer-events: none; z-index: 0;\n}\n#services .container { position: relative; z-index: 1; }\n.services-header { margin-bottom: 72px; }\n.services-header h2 { font-size: clamp(30px,4vw,52px); max-width: 560px; margin-bottom: 16px; }\n.services-header p { font-size: 17px; opacity: 0.45; max-width: 440px; }\n\n.pkg-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 1px;\n  background: rgba(255,255,255,0.06);\n  border-radius: 24px;\n  overflow: hidden;\n}\n.pkg {\n  background: var(--black);\n  padding: 48px 40px 52px;\n  display: flex; flex-direction: column; position: relative;\n  transition: background 0.35s ease;\n}\n.pkg:hover { background: rgba(255,255,255,0.04); }\n.pkg.featured { background: rgba(255,255,255,0.025); }\n\/* brand gradient border on hover (base ::after defined up top) *\/\n.pkg:hover::after { opacity: 1; }\n.pkg.featured::after { opacity: 0.4; }          \/* featured keeps a soft permanent frame *\/\n.pkg.featured:hover::after { opacity: 1; }\n.pkg-phase {\n  font-family: \"poppins\", sans-serif;\n  font-size: 10px; font-weight: 700;\n  letter-spacing: 0.18em; text-transform: uppercase;\n  opacity: 0.28; margin-bottom: 18px;\n  position: relative; z-index: 1;\n}\n.pkg-title {\n  font-family: \"poppins\", sans-serif;\n  font-size: 28px; font-weight: 800; letter-spacing: -0.03em;\n  margin-bottom: 12px;\n  position: relative; z-index: 1;\n}\n.pkg-desc { font-size: 15px; opacity: 0.5; line-height: 1.55; margin-bottom: 36px; min-height: 80px; position: relative; z-index: 1; }\n.pkg-line { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin-bottom: 28px; position: relative; z-index: 1; }\n\n.pkg-list {\n  list-style: none; display: flex; flex-direction: column; gap: 0;\n  margin-bottom: 44px; flex: 1;\n  position: relative; z-index: 1;\n}\n.pkg-list li {\n  display: flex; gap: 14px; align-items: flex-start;\n  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05);\n  opacity: 0.85;\n}\n.pkg-list li:last-child { border-bottom: none; }\n.pkg-list li.dim { opacity: 0.25; }\n.feat-bullet {\n  flex-shrink: 0; margin-top: 5px;\n  width: 6px; height: 6px; border-radius: 50%; background: var(--white);\n}\n.pkg-list li.dim .feat-bullet { background: rgba(255,255,255,0.2); }\n.pkg.scale-card .feat-bullet { background: linear-gradient(135deg, var(--blue), var(--red)); }\n.pkg.scale-card .pkg-list li.dim .feat-bullet { background: rgba(255,255,255,0.2); }\n.feat-body { display: flex; flex-direction: column; gap: 2px; }\n.feat-name {\n  font-family: \"poppins\", sans-serif;\n  font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.3;\n}\n.feat-sub {\n  font-size: 12px; color: rgba(255,255,255,0.35);\n  font-family: \"myriad-pro\", sans-serif; line-height: 1.4;\n}\n\n\/* All package CTA buttons same shape \u2014 UNIFIED *\/\n.pkg .btn {\n  align-self: flex-start;\n  margin-top: auto;\n  position: relative; z-index: 1;\n}\n\n.pkg.scale-card::before {\n  content: ''; position: absolute; top: 0; left: 0; right: 0;\n  height: 2px;\n  background: linear-gradient(90deg, var(--blue), var(--red));\n  z-index: 2;\n}\n.pkg.scale-card .pkg-phase {\n  background: linear-gradient(90deg, var(--blue), var(--red));\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n  opacity: 1;\n}\n.popular-tag {\n  position: absolute; top: 24px; right: 24px;\n  background: linear-gradient(90deg, var(--blue), var(--red));\n  color: var(--white);\n  font-family: \"poppins\", sans-serif;\n  font-size: 10px; font-weight: 700;\n  letter-spacing: 0.1em; text-transform: uppercase;\n  padding: 5px 13px; border-radius: 100px;\n  z-index: 2;\n}\n\n\/* \u2500\u2500 \u00c0 LA CARTE STRIP (lighter complement under the 3 packages) \u2500\u2500 *\/\n.uxalc {                                   \/* the whole strip; sits above #services glow *\/\n  position: relative; z-index: 1;\n  margin-top: 72px; padding-top: 56px;\n  border-top: 1px solid rgba(255,255,255,0.07);\n}\n.uxalc-head { max-width: 640px; margin-bottom: 36px; }   \/* short brand-voice header *\/\n.uxalc-eyebrow {\n  font-family: \"poppins\", sans-serif; font-size: 11px; font-weight: 700;\n  letter-spacing: 0.2em; text-transform: uppercase;\n  color: var(--blue); opacity: 0.85; display: block; margin-bottom: 16px;\n}\n.uxalc-title {\n  font-family: \"poppins\", sans-serif; font-size: clamp(24px, 3vw, 36px);\n  font-weight: 800; letter-spacing: -0.03em; line-height: 1.12;\n  color: var(--white); margin-bottom: 12px;\n}\n.uxalc-title span { opacity: 0.5; }                       \/* muted second half = \"filo\" *\/\n.uxalc-sub { font-size: 16px; opacity: 0.5; max-width: 520px; line-height: 1.6; }\n\n.uxalc-grid {                              \/* 4\u21922\u21921 responsive grid of mini chips *\/\n  list-style: none; display: grid;\n  grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 36px;\n}\n.uxalc-chip {                              \/* compact pill: icon tile + name + arrow *\/\n  position: relative;\n  display: flex; align-items: center; gap: 14px;\n  padding: 15px 18px;\n  border: 1px solid rgba(255,255,255,0.12);\n  border-radius: 14px;\n  background: rgba(255,255,255,0.03);\n  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n}\n.uxalc-chip::after {                       \/* brand gradient border on hover (rounded-corner safe) *\/\n  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;\n  background: linear-gradient(120deg, var(--blue), var(--red));\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor; mask-composite: exclude;\n  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;\n}\n.uxalc-chip:hover {                        \/* stronger than before, still lighter than packages *\/\n  border-color: transparent;\n  background: rgba(255,255,255,0.05);\n  transform: translateY(-3px);\n  box-shadow: 0 16px 34px -20px rgba(0,174,239,0.5), 0 8px 20px -16px rgba(238,30,56,0.4);\n}\n.uxalc-chip:hover::after { opacity: 1; }\n.uxalc-ico {                               \/* blue-tinted tile = contrasting color at rest *\/\n  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;\n  display: grid; place-items: center;\n  background: rgba(0,174,239,0.12); color: var(--blue);\n  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;\n}\n.uxalc-ico {\n  flex-shrink: 0; width: 38px; height: 38px;\n  display: grid; place-items: center;\n  color: var(--blue);\n  transition: color 0.3s ease, transform 0.3s ease;\n}\n.uxalc-ico svg { width: 20px; height: 20px; display: block; }\n.uxalc-chip:hover .uxalc-ico {\n  color: var(--white);\n  transform: scale(1.05);\n}\n.uxalc-name {\n  font-family: \"poppins\", sans-serif; font-size: 14px; font-weight: 600;\n  color: var(--white); line-height: 1.25; flex: 1;\n}\n.uxalc-arrow { flex-shrink: 0; width: 14px; height: 14px; color: rgba(255,255,255,0.28);\n  transition: transform 0.3s ease, color 0.3s ease; }\n.uxalc-chip:hover .uxalc-arrow { color: var(--blue); transform: translateX(3px); }\n\n.uxalc-all {                               \/* ghost text link \u2014 deliberately quieter than the main CTA *\/\n  display: inline-flex; align-items: center; gap: 0.5em;\n  font-family: \"poppins\", sans-serif; font-size: 14px; font-weight: 600;\n  color: var(--white); opacity: 0.75; padding: 8px 0;\n  transition: opacity 0.25s ease;\n}\n.uxalc-all svg { width: 15px; height: 12px; transition: transform 0.3s ease; }\n.uxalc-all:hover { opacity: 1; }\n.uxalc-all:hover svg { transform: translateX(4px); }\n.uxalc-all:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }\n\n@media (max-width: 900px) { .uxalc-grid { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 520px) {\n  .uxalc-grid { grid-template-columns: 1fr; }\n  .uxalc { margin-top: 56px; padding-top: 44px; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BRIDGE QUOTE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.brand-quote {\n  background: var(--black); padding: 100px 40px; text-align: center;\n}\n.brand-quote blockquote {\n  font-family: \"poppins\", sans-serif;\n  font-size: clamp(20px,3vw,32px); font-weight: 700;\n  letter-spacing: -0.03em; line-height: 1.3;\n  max-width: 820px; margin: 0 auto; opacity: 0.88;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   6. DIAGNOSTIC \u2014 Yes\/No\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#diagnostic {\n  background: var(--black); padding: 140px 0;\n  border-top: 1px solid rgba(255,255,255,0.05);\n  overflow: hidden;\n}\n#diagnostic::before {   \/* subtle depth glow *\/\n  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;\n  width: 100vw; transform: translateX(-50%);\n  background:\n    radial-gradient(ellipse 42% 50% at 82% 20%, rgba(0,174,239,0.10), transparent 70%),\n    radial-gradient(ellipse 42% 50% at 18% 85%, rgba(238,30,56,0.08), transparent 70%);\n  filter: blur(120px); pointer-events: none; z-index: 0;\n}\n#diagnostic .container { position: relative; z-index: 1; }\n.diag-layout {\n  display: grid; grid-template-columns: 1fr 1fr;\n  gap: 80px; align-items: start;\n}\n.diag-left h2 { font-size: clamp(28px,3.5vw,44px); margin-bottom: 16px; }\n.diag-left p  { font-size: 16px; opacity: 0.5; line-height: 1.65; }\n\n.diag-progress { margin-bottom: 28px; }\n.diag-progress-top {\n  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;\n}\n.diag-step-label {\n  font-family: \"poppins\", sans-serif;\n  font-size: 12px; font-weight: 600;\n  letter-spacing: 0.04em; opacity: 0.55;\n}\n.diag-step-label b { color: var(--blue); font-weight: 700; }\n.diag-step-count {\n  font-family: \"poppins\", sans-serif;\n  font-size: 12px; font-weight: 600; opacity: 0.35;\n}\n.diag-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }\n.diag-bar-fill {\n  height: 100%; width: 33.33%; border-radius: 3px;\n  background: linear-gradient(90deg, var(--blue), var(--red));\n  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);\n}\n.diag-stage { display: none; flex-direction: column; gap: 16px; }\n.diag-stage.active { display: flex; animation: stage-in 0.45s cubic-bezier(0.16,1,0.3,1); }\n@keyframes stage-in {\n  from { opacity: 0; transform: translateX(16px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n.diag-q {\n  padding: 22px 24px;\n  border: 1px solid rgba(255,255,255,0.07);\n  border-radius: 14px;\n  background: rgba(255,255,255,0.02);\n  transition: border-color 0.25s, background 0.25s;\n}\n.diag-q:not(.answered):hover { border-color: rgba(0,174,239,0.28); }   \/* live hover feedback *\/\n.diag-q.answered { border-color: rgba(0,174,239,0.4); background: rgba(0,174,239,0.04); }\n.diag-q p { font-size: 16px; line-height: 1.5; opacity: 0.92; margin-bottom: 14px; }\n\n.diag-yn { display: flex; gap: 10px; }\n.diag-yn-btn {\n  flex: 1; padding: 10px 0;\n  border: 1px solid rgba(255,255,255,0.12);\n  background: transparent; color: var(--white);\n  font-family: \"poppins\", sans-serif;\n  font-size: 13px; font-weight: 600;\n  border-radius: 10px; cursor: pointer;\n  transition: all 0.2s;\n}\n.diag-yn-btn:hover { border-color: rgba(255,255,255,0.3); }\n.diag-yn-btn.selected[data-val=\"yes\"] {\n  background: var(--blue); border-color: var(--blue); color: var(--white);\n}\n.diag-yn-btn.selected[data-val=\"no\"] {\n  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: var(--white);\n}\n.diag-nav {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-top: 28px; gap: 16px;\n}\n.diag-back {\n  background: none; border: none; cursor: pointer;\n  font-family: \"poppins\", sans-serif;\n  font-size: 13px; font-weight: 600;\n  color: var(--white); opacity: 0.4;\n  padding: 8px 4px; transition: opacity 0.2s;\n}\n.diag-back:hover { opacity: 0.8; }\n.diag-back[hidden] { visibility: hidden; }\n#diag-btn:disabled { opacity: 0.35; cursor: not-allowed; }\n\n.diag-result { display: none; margin-top: 24px; padding: 32px; border-radius: 16px; }\n.diag-result.show { display: block; }\n.diag-result.s0 { background: rgba(238,30,56,0.06);   border: 1px solid rgba(238,30,56,0.18); }\n.diag-result.s1 { background: rgba(238,100,0,0.06);   border: 1px solid rgba(238,100,0,0.18); }\n.diag-result.s2 { background: rgba(255,190,0,0.06);   border: 1px solid rgba(255,190,0,0.14); }\n.diag-result.s3 { background: rgba(0,174,239,0.06);   border: 1px solid rgba(0,174,239,0.18); }\n.diag-result h3 { font-size: 22px; margin-bottom: 12px; letter-spacing: -0.02em; }\n.diag-result p  { font-size: 15px; opacity: 0.7; line-height: 1.65; margin-bottom: 24px; }\n\n.diag-reset-btn {\n  background: none; border: none; cursor: pointer;\n  font-size: 12px; color: var(--white); opacity: 0.3;\n  font-family: \"poppins\", sans-serif;\n  display: none; margin-top: 16px; padding: 0;\n}\n.diag-reset-btn.show { display: block; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   7. PROOF \u2014 4 stats fit, full-bleed\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#proof { background: var(--off); color: var(--black); padding: 140px 0; }\n\n.proof-numbers {\n  display: grid; grid-template-columns: repeat(4,1fr);\n  gap: 1px; background: rgba(0,0,0,0.08);\n  border-radius: 20px; overflow: hidden; margin-bottom: 80px;\n  box-shadow: 0 20px 60px -30px rgba(35,31,32,0.25);   \/* subtle depth *\/\n}\n.stat { padding: 56px 32px; background: var(--off); text-align: left; }\n.stat-n {\n  font-family: \"poppins\", sans-serif;\n  font-size: clamp(36px,4.5vw,60px);\n  font-weight: 900; letter-spacing: -0.04em; line-height: 1;\n  background: linear-gradient(90deg, var(--blue), var(--red));\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\n  margin-bottom: 12px;\n  white-space: nowrap;\n}\n.stat-l { font-size: 13px; opacity: 0.55; line-height: 1.4; }\n\n.testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }\n.t-card {\n  position: relative;\n  overflow: hidden;\n  border: 1px solid rgba(0,0,0,0.07);\n  border-radius: 20px;\n  padding: 36px 32px; background: var(--white);\n  box-shadow: 0 6px 22px rgba(35,31,32,0.05);          \/* resting depth *\/\n  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;\n}\n.t-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(35,31,32,0.14); }\n.t-card:hover::after { opacity: 1; }                    \/* brand gradient border *\/\n.t-stars { color: var(--blue); font-size: 13px; letter-spacing: 3px; margin-bottom: 20px; }\n.t-text  { font-size: 15px; line-height: 1.7; color: rgba(35,31,32,.72); font-style: italic; margin-bottom: 28px; }\n.t-name  { font-family: \"poppins\", sans-serif; font-size: 13px; font-weight: 700; color: var(--black); }\n.t-biz   { font-size: 12px; opacity: 0.4; color: var(--black); margin-top: 3px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   8. ABOUT \u2014 no UX bg, clean\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#about {\n  background: var(--black); padding: 140px 0;\n  overflow: hidden;\n}\n#about::before {   \/* revive the closing stretch *\/\n  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;\n  width: 100vw; transform: translateX(-50%);\n  background:\n    radial-gradient(ellipse 40% 55% at 16% 32%, rgba(0,174,239,0.11), transparent 70%),\n    radial-gradient(ellipse 40% 55% at 84% 72%, rgba(238,30,56,0.09), transparent 70%);\n  filter: blur(120px); pointer-events: none; z-index: 0;\n}\n#about .container { position: relative; z-index: 1; }\n\n.about-layout {\n  display: grid;\n  grid-template-columns: 1.1fr 1fr;\n  gap: 80px; align-items: center;\n}\n.about-left h2 {\n  font-size: clamp(32px, 4.2vw, 56px);\n  line-height: 1.05;\n}\n.about-right p {\n  font-size: 17px; opacity: 0.62;\n  line-height: 1.75; margin-bottom: 22px;\n}\n.about-right p:last-of-type { margin-bottom: 36px; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   9. PROCESS \u2014 horizontal scroll, big cards\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#process {\n  background: var(--black);\n  padding: 140px 0 40px;\n  border-top: 1px solid rgba(255,255,255,0.05);\n  overflow: hidden;\n}\n#process::before {   \/* subtle depth glow *\/\n  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;\n  width: 100vw; transform: translateX(-50%);\n  background:\n    radial-gradient(ellipse 45% 45% at 12% 28%, rgba(0,174,239,0.10), transparent 70%),\n    radial-gradient(ellipse 45% 45% at 88% 78%, rgba(238,30,56,0.09), transparent 70%);\n  filter: blur(120px); pointer-events: none; z-index: 0;\n}\n#process .container,\n#process .process-scroll { position: relative; z-index: 1; }\n.process-header {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px; margin-bottom: 80px; align-items: end;\n}\n.process-header h2 { font-size: clamp(36px,4.5vw,58px); }\n.process-header p  { font-size: 17px; opacity: 0.5; line-height: 1.7; }\n\n.process-scroll {\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  -webkit-overflow-scrolling: touch;\n  padding: 10px 0 80px;   \/* top room so hover-lift isn't clipped *\/\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255,255,255,0.2) transparent;\n}\n.process-scroll::-webkit-scrollbar { height: 6px; }\n.process-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }\n.process-scroll::-webkit-scrollbar-thumb {\n  background: linear-gradient(90deg, var(--blue), var(--red));\n  border-radius: 3px;\n}\n.process-track {\n  display: flex; gap: 24px;\n  padding-left: max(40px, calc((100vw - 1200px) \/ 2 + 40px));\n  padding-right: max(40px, calc((100vw - 1200px) \/ 2 + 40px));\n  width: max-content;\n}\n#process .step {\n  scroll-snap-align: start;\n  flex: 0 0 auto;\n  width: clamp(320px, 28vw, 420px);\n  padding: 48px 42px;\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.08);\n  border-radius: 20px;\n  position: relative;\n  transition: background 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1),\n              box-shadow 0.35s ease, border-color 0.35s ease;\n}\n#process .step:hover {\n  background: rgba(255,255,255,0.05);\n  transform: translateY(-6px);\n  border-color: transparent;\n  box-shadow: 0 24px 50px -28px rgba(0,174,239,0.5),\n              0 12px 30px -22px rgba(238,30,56,0.4);\n}\n#process .step:hover::after { opacity: 1; }              \/* brand gradient border *\/\n#process .step-n {\n  font-family: \"poppins\", sans-serif;\n  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;\n  color: var(--blue); opacity: 0.85; margin-bottom: 24px;\n  position: relative; z-index: 1;\n}\n#process .step-title {\n  font-family: \"poppins\", sans-serif;\n  font-size: 28px; font-weight: 800;\n  letter-spacing: -0.02em; margin-bottom: 18px;\n  position: relative; z-index: 1;\n}\n#process .step-desc {\n  font-size: 16px; opacity: 0.55; line-height: 1.65;\n  position: relative; z-index: 1;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   10. CONTACT \u2014 glows fade BEFORE edges\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#contact {\n  background: var(--black); padding: 140px 0;\n  overflow: hidden;\n}\n#contact::before {\n  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;\n  width: 100vw; transform: translateX(-50%);\n  background:\n    radial-gradient(ellipse 45% 40% at 20% 65%, rgba(0,174,239,0.12), transparent 70%),\n    radial-gradient(ellipse 45% 40% at 80% 35%, rgba(238,30,56,0.12), transparent 70%);\n  filter: blur(120px); pointer-events: none;\n}\n.contact-layout {\n  position: relative; z-index: 1;\n  display: grid; grid-template-columns: 1fr 1fr;\n  gap: 100px; align-items: start;\n}\n.contact-left h2 { font-size: clamp(32px,4.5vw,56px); margin-bottom: 20px; }\n.contact-left p  { font-size: 16px; opacity: 0.55; line-height: 1.7; margin-bottom: 40px; max-width: 380px; }\n.contact-alts { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }\n.alt-link { font-size: 14px; opacity: 0.45; transition: opacity 0.2s; }\n.alt-link:hover { opacity: 0.9; }\n\n.contact-form { display: flex; flex-direction: column; gap: 12px; }\n.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n.contact-form input,\n.contact-form select,\n.contact-form textarea {\n  background: rgba(255,255,255,0.04);\n  border: 1px solid rgba(255,255,255,0.08);\n  border-radius: 12px;\n  color: var(--white);\n  font-family: \"myriad-pro\", sans-serif;\n  font-size: 15px; padding: 16px 20px;\n  width: 100%; transition: border-color 0.2s, box-shadow 0.2s; outline: none;\n}\n.contact-form input::placeholder,\n.contact-form textarea::placeholder { opacity: 0.3; }\n.contact-form input:focus,\n.contact-form select:focus,\n.contact-form textarea:focus {\n  border-color: rgba(0,174,239,0.5);\n  box-shadow: 0 0 0 3px rgba(0,174,239,0.10);   \/* subtle focus glow *\/\n}\n.contact-form textarea { resize: vertical; min-height: 100px; }\n.contact-form select option { background: #1a1a1a; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   HOME RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 900px) {\n  .pain-beat { grid-template-columns: 32px 1fr; gap: 0 20px; padding: 60px 0; }\n  .cost-cols  { grid-template-columns: 1fr; }\n  .pkg-row    { grid-template-columns: 1fr; }\n  .about-layout { grid-template-columns: 1fr; gap: 40px; }\n  .diag-layout  { grid-template-columns: 1fr; gap: 40px; }\n  .proof-numbers { grid-template-columns: 1fr 1fr; }\n  .testimonials  { grid-template-columns: 1fr; }\n  .contact-layout { grid-template-columns: 1fr; gap: 60px; }\n  .process-header { grid-template-columns: 1fr; gap: 20px; }\n  .process-track { padding-left: 22px; padding-right: 22px; }\n}\n\n@media (max-width: 560px) {\n  #cost, #services, #proof, #about, #process, #contact, #diagnostic { padding: 84px 0; }\n  #hero { padding: 110px 24px 70px; }\n  .hero-actions { flex-direction: column; width: 100%; max-width: 320px; }\n  .hero-actions .btn-ring-wrap, .hero-actions .btn { width: 100%; }\n  .cost-col { padding: 44px 28px; }\n  #cost h2 { margin-bottom: 48px; }\n  .cost-items li { font-size: 16px; }\n  .cost-note { font-size: 16px; }\n  #manifesto { padding: 90px 24px; }\n  .manifesto-counter { margin-bottom: 40px; }\n  .diag-progress-top { flex-direction: column; align-items: flex-start; gap: 4px; }\n  .diag-step-count { font-size: 11px; }\n  .diag-q { padding: 20px 20px; }\n  .diag-q p { font-size: 15px; }\n  .pkg { padding: 40px 30px 44px; }\n  .form-row { grid-template-columns: 1fr; }\n  .proof-numbers { grid-template-columns: 1fr 1fr; }\n  .stat { padding: 40px 24px; }\n  #process .step { width: 280px; padding: 36px 28px; }\n}\n\n\/* Respect reduced-motion: keep hovers static-friendly *\/\n@media (prefers-reduced-motion: reduce) {\n  .t-card, #process .step { transition: box-shadow 0.2s ease, border-color 0.2s ease; }\n  .t-card:hover, #process .step:hover { transform: none; }\n}\n<\/style>\n\n\n<!-- \u2550\u2550 1. HERO \u2550\u2550 -->\n<section id=\"hero\">\n  <h1 class=\"hero-h1\"><span class=\"h1-exists\">Your business is great.<\/span><br>But, nobody knows it exists.<\/h1>\n  <p class=\"hero-sub\">We turn amazing ideas into brands<br>people choose \u2014 and recommend.<\/p>\n\n  <div class=\"hero-actions\">\n    <div class=\"btn-ring-wrap\">\n      <a href=\"#contact\" class=\"btn btn-white\">Book a Free Audit<\/a>\n    <\/div>\n    <div class=\"btn-ring-wrap\">\n      <a href=\"#services\" class=\"btn btn-outline\">See Our Services<\/a>\n    <\/div>\n  <\/div>\n\n\n<\/section>\n\n\n<!-- \u2550\u2550 2. PAIN \u2550\u2550 -->\n<section id=\"pain\">\n  <div class=\"container\">\n    <div class=\"pain-intro fade\">\n      <span class=\"eyebrow red\">Sound familiar?<\/span>\n      <h2>You&#8217;ve tried.<br>You&#8217;ve paid.<br>Nothing happened.<\/h2>\n    <\/div>\n\n    <div class=\"pain-beat fade fade-d1\">\n      <span class=\"pain-num\">01<\/span>\n      <p class=\"pain-text\">\n        Every customer you have came from word of mouth.\n        <em> That&#8217;s not a strategy. That&#8217;s luck running out.<\/em>\n      <\/p>\n    <\/div>\n\n    <div class=\"pain-beat fade fade-d2\">\n      <span class=\"pain-num\">02<\/span>\n      <p class=\"pain-text\">\n        Your brand looks like a side project.\n        <em> Your competitor&#8217;s looks like a company people trust with their money.<\/em>\n      <\/p>\n    <\/div>\n\n    <div class=\"pain-beat fade fade-d3\">\n      <span class=\"pain-num\">03<\/span>\n      <p class=\"pain-text\">\n        Someone left a 1-star review three months ago.\n        <em> You never replied. Everyone who reads it thinks you don&#8217;t care.<\/em>\n      <\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 3. MANIFESTO \u2550\u2550 -->\n<section id=\"manifesto\">\n  <div class=\"manifesto-inner\">\n    <span class=\"eyebrow fade\" style=\"color:rgba(255,255,255,.3);margin-bottom:36px;\">The truth nobody tells you<\/span>\n    <h2 class=\"manifesto-lead fade\">\n      People don&#8217;t buy from<br><span class=\"grad\">the best business.<\/span>\n    <\/h2>\n    <p class=\"manifesto-counter fade fade-d1\">\n      They buy from the one<br>that looks like the best.\n    <\/p>\n    <p class=\"manifesto-turn fade fade-d2\">\n      That&#8217;s not unfair. That&#8217;s just marketing.<br>\n      <strong>And it&#8217;s exactly what we do.<\/strong>\n    <\/p>\n    <div class=\"btn-ring-wrap fade fade-d3\">\n      <a href=\"#contact\" class=\"btn btn-white\">Let&#8217;s fix that \u2014 Book Free Audit<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 4. COST \u2550\u2550 -->\n<section id=\"cost\">\n  <div class=\"container\">\n    <span class=\"section-label fade\">The real cost<\/span>\n    <h2 class=\"fade\">Bad marketing is expensive.<br>Silence is worse.<\/h2>\n\n    <div class=\"cost-cols fade fade-d1\">\n      <div class=\"cost-col bad\">\n        <p class=\"cost-col-tag\">Without strategy<\/p>\n        <p class=\"cost-big\">$6,000+<\/p>\n        <p class=\"cost-note\">burned per year on random posts, cheap agencies, and freelancers who ghost you<\/p>\n        <ul class=\"cost-items\">\n          <li>No professional brand \u2014 just a logo and a prayer<\/li>\n          <li>Social media with no strategy, no calendar, no design system<\/li>\n          <li>Invisible on Google \u2014 no profile, no reviews engine<\/li>\n          <li>No landing page built to convert customers<\/li>\n          <li>Zero foundation for ads, so paid traffic just burns cash<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"cost-col good\">\n        <p class=\"cost-col-tag\">With UX Project<\/p>\n        <p class=\"cost-big\">ROI<\/p>\n        <p class=\"cost-note\">every dollar builds a system that brings customers in while you focus on the work<\/p>\n        <ul class=\"cost-items\">\n          <li>A solid brand identity that makes people stop scrolling<\/li>\n          <li>Social media managed with a strategy \u2014 not just posts<\/li>\n          <li>Google Business optimized, reviews on autopilot<\/li>\n          <li>A landing page built to convert, not just exist<\/li>\n          <li>A foundation strong enough that ads actually pay off<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 5. SERVICES \u2014 grid normal, sin scroll-jack \u2550\u2550 -->\n<section id=\"services\">\n  <div class=\"container\">\n    <div class=\"services-header\">\n      <span class=\"eyebrow fade\">What we do<\/span>\n      <h2 class=\"fade\">Pick where you are.<br>We&#8217;ll take you further.<\/h2>\n      <p class=\"fade fade-d1\">Three paths built around what your business needs right now \u2014 brand, clients, or both under one strategy.<\/p>\n    <\/div>\n    <div class=\"pkg-row fade fade-d2\">\n      <div class=\"pkg\">\n        <p class=\"pkg-phase\">Brand<\/p>\n        <h2 class=\"pkg-title\">Brand &amp; Presence<\/h2>\n        <p class=\"pkg-desc\">Look like what you charge. For businesses that need to exist well \u2014 to be found, trusted, chosen.<\/p>\n        <hr class=\"pkg-line\">\n        <ul class=\"pkg-list\">\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Brand Identity &amp; Guidelines<\/span><span class=\"feat-sub\">Logo, colors, voice<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Social Media Management<\/span><span class=\"feat-sub\">Monthly<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Digital Profile Optimization<\/span><span class=\"feat-sub\">Google Business + Instagram<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Review Management System<\/span><\/span><\/li>\n        <\/ul>\n        <div class=\"btn-ring-wrap\"><a href=\"packages\/brand.html\" class=\"btn btn-outline\">Learn More<\/a><\/div>\n      <\/div>\n      <div class=\"pkg\">\n        <p class=\"pkg-phase\">Full<\/p>\n        <h2 class=\"pkg-title\">Full Strategy<\/h2>\n        <p class=\"pkg-desc\">Magnetic and profitable. Both. Everything under one strategy \u2014 brand, content, photography and paid campaigns working as one.<\/p>\n        <hr class=\"pkg-line\">\n        <ul class=\"pkg-list\">\n          <li class=\"dim\"><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Everything in Brand &amp; Presence<\/span><\/span><\/li>\n          <li class=\"dim\"><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Everything in Clients &amp; Acquisition<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Social Media Content &amp; Design<\/span><span class=\"feat-sub\">Monthly production<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Professional Photography<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Strategic Communication<\/span><span class=\"feat-sub\">One message across every channel<\/span><\/span><\/li>\n        <\/ul>\n        <div class=\"btn-ring-wrap\"><a href=\"packages\/full.html\" class=\"btn btn-outline\">Learn More<\/a><\/div>\n      <\/div>\n      <div class=\"pkg\">\n        <p class=\"pkg-phase\">Growth<\/p>\n        <h2 class=\"pkg-title\">Clients &amp; Acquisition<\/h2>\n        <p class=\"pkg-desc\">Bring people to your door. Now. For businesses that need measurable flow today.<\/p>\n        <hr class=\"pkg-line\">\n        <ul class=\"pkg-list\">\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Facebook &amp; Instagram Ads<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Google Ads<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Conversion Creatives &amp; Landing Page<\/span><\/span><\/li>\n          <li><span class=\"feat-bullet\"><\/span><span class=\"feat-body\"><span class=\"feat-name\">Lead Tracking &amp; Monthly Reports<\/span><\/span><\/li>\n        <\/ul>\n        <div class=\"btn-ring-wrap\"><a href=\"packages\/acquisition.html\" class=\"btn btn-outline\">Learn More<\/a><\/div>\n      <\/div>\n    <\/div>\n    <!-- \u2550\u2550 \u00c0 LA CARTE \u2014 light strip of single services under the packages \u2550\u2550 -->\n    <div class=\"uxalc fade\">\n      <div class=\"uxalc-head\">\n  <span class=\"uxalc-eyebrow\">\u00c0 la carte<\/span>\n  <h3 class=\"uxalc-title\">Or just <span>pick one.<\/span><\/h3>\n  <p class=\"uxalc-sub\">We&#8217;ll make it impossible to ignore.<\/p>\n<\/div>\n\n      <ul class=\"uxalc-grid\">\n        <li><a class=\"uxalc-chip\" href=\"\/services\/branding\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.2 12 21l9-11.8L17.8 4H6.2L3 9.2z\"><\/path><path d=\"M3 9.2h18\"><\/path><path d=\"M8 4 6.4 9.2 12 21l5.6-11.8L16 4\"><\/path><\/svg><\/span>\n          <span class=\"uxalc-name\">Branding<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n\n        <li><a class=\"uxalc-chip\" href=\"\/services\/social-media\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 11.4a8.4 8.4 0 0 1-12.2 7.5L3 20.6l1.8-5.7A8.4 8.4 0 1 1 21 11.4z\"><\/path><path d=\"M8.5 11.6h.01M12 11.6h.01M15.5 11.6h.01\"><\/path><\/svg><\/span>\n          <span class=\"uxalc-name\">Social Media Management<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n\n        <li><a class=\"uxalc-chip\" href=\"\/services\/photography-video\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5a2 2 0 0 1 2-2h1.6l1.2-2h6.4l1.2 2H19a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z\"><\/path><circle cx=\"12\" cy=\"12.5\" r=\"3.2\"><\/circle><\/svg><\/span>\n          <span class=\"uxalc-name\">Photography &amp; Video<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n\n        <li><a class=\"uxalc-chip\" href=\"\/services\/web\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8.5 8 4 12l4.5 4\"><\/path><path d=\"M15.5 8 20 12l-4.5 4\"><\/path><path d=\"M13.5 5l-3 14\"><\/path><\/svg><\/span>\n          <span class=\"uxalc-name\">Web Design &amp; Development<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n\n        <li><a class=\"uxalc-chip\" href=\"\/services\/ads\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5v14a1 1 0 0 0 1 1h15\"><\/path><path d=\"M7.5 14.5 11 11l3 2.5 5-5.5\"><\/path><path d=\"M16 8h3.5v3.5\"><\/path><\/svg><\/span>\n          <span class=\"uxalc-name\">Facebook &amp; Google Ads<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n\n        <li><a class=\"uxalc-chip\" href=\"\/services\/print-signage\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6.5 9V4h11v5\"><\/path><path d=\"M6.5 18H5a2 2 0 0 1-2-2v-3.5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2V16a2 2 0 0 1-2 2h-1.5\"><\/path><path d=\"M6.5 14h11v6h-11z\"><\/path><path d=\"M16.7 12.5h.01\"><\/path><\/svg><\/span>\n          <span class=\"uxalc-name\">Print &amp; Signage<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n\n        <li><a class=\"uxalc-chip\" href=\"\/services\/production\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3 2.5 7.8 12 12.6l9.5-4.8L12 3z\"><\/path><path d=\"M2.5 12.4 12 17.2l9.5-4.8\"><\/path><path d=\"M2.5 16.8 12 21.6l9.5-4.8\"><\/path><\/svg><\/span>\n          <span class=\"uxalc-name\">Production<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n\n        <li><a class=\"uxalc-chip\" href=\"\/services\/strategy\">\n          <span class=\"uxalc-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"5\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\"><\/circle><\/svg><\/span>\n          <span class=\"uxalc-name\">Strategy &amp; Consulting<\/span>\n          <svg class=\"uxalc-arrow\" viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n        <\/a><\/li>\n      <\/ul>\n\n      <a class=\"uxalc-all\" href=\"\/services\">\n        See all services\n        <svg viewBox=\"0 0 16 12\" fill=\"none\" aria-hidden=\"true\"><path d=\"M1 6h13M9.5 1l5 5-5 5\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 BRIDGE QUOTE \u2550\u2550 -->\n<div class=\"brand-quote\">\n  <blockquote class=\"fade\">\n    When your brand looks cheap, people expect cheap prices.\n    You&#8217;re not losing customers \u2014 you&#8217;re training them to never pay\n    what you&#8217;re actually worth.\n  <\/blockquote>\n<\/div>\n\n\n<!-- \u2550\u2550 6. DIAGNOSTIC \u2014 Yes\/No version \u2550\u2550 -->\n<section id=\"diagnostic\">\n  <div class=\"container\">\n    <div class=\"diag-layout\">\n      <div class=\"diag-left fade\">\n        <span class=\"eyebrow\" style=\"margin-bottom:24px;\">Free check<\/span>\n        <h2>How visible is your business right now?<\/h2>\n        <p style=\"margin-top:16px\">Answer honestly \u2014 yes or no.<br>Get your Presence Score and a personalized next step.<\/p>\n      <\/div>\n\n      <div class=\"fade fade-d1\">\n        <div class=\"diag-progress\">\n          <div class=\"diag-progress-top\">\n            <span class=\"diag-step-label\">Step <b id=\"diag-cur\">1<\/b> of 3<\/span>\n            <span class=\"diag-step-count\" id=\"diag-pct\">Brand &amp; first impression<\/span>\n          <\/div>\n          <div class=\"diag-bar\"><div class=\"diag-bar-fill\" id=\"diag-bar-fill\"><\/div><\/div>\n        <\/div>\n\n        <!-- Stage 1 -->\n        <div class=\"diag-stage active\" data-stage=\"1\">\n          <div class=\"diag-q\" data-q=\"1\">\n            <p>Would you confidently hire your business if it walked into a job interview?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"diag-q\" data-q=\"2\">\n            <p>Does your brand look like it&#8217;s here to stay \u2014 not like it could close next year?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"diag-q\" data-q=\"3\">\n            <p>Next to your top competitor, does your business hold its own at first glance?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stage 2 -->\n        <div class=\"diag-stage\" data-stage=\"2\">\n          <div class=\"diag-q\" data-q=\"4\">\n            <p>If your business depended 100% on how it looks online, would it survive?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"diag-q\" data-q=\"5\">\n            <p>Can you trace actual customers back to the social media you post every week?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"diag-q\" data-q=\"6\">\n            <p>When people search your industry on Google, do you show up before your competition?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stage 3 -->\n        <div class=\"diag-stage\" data-stage=\"3\">\n          <div class=\"diag-q\" data-q=\"7\">\n            <p>Do you have a clear, written marketing strategy \u2014 not just random posts?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"diag-q\" data-q=\"8\">\n            <p>Is your business attracting new customers every month without you chasing them?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"diag-q\" data-q=\"9\">\n            <p>If you doubled your investment in marketing tomorrow, would you know exactly where to spend it?<\/p>\n            <div class=\"diag-yn\">\n              <button class=\"diag-yn-btn\" data-val=\"yes\">Yes<\/button>\n              <button class=\"diag-yn-btn\" data-val=\"no\">No<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"diag-nav\">\n          <button class=\"diag-back\" id=\"diag-back\" hidden=\"\" onclick=\"diagBack()\">\u2190 Back<\/button>\n          <div class=\"btn-ring-wrap\">\n            <button id=\"diag-btn\" class=\"btn btn-white\" onclick=\"diagNext()\" disabled=\"\">Continue<\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"diag-result s0\" id=\"dr0\">\n          <h3>Your business is invisible.<\/h3>\n          <p>You&#8217;re losing customers to competitors every day \u2014 and you don&#8217;t even know their names. The good news: this is fixable, faster than you think. Let&#8217;s start with a free audit and map your path back to visibility.<\/p>\n          <div class=\"btn-ring-wrap\"><a href=\"#contact\" class=\"btn btn-white\" style=\"font-size:13px;padding:12px 22px\">Schedule My Free Audit<\/a><\/div>\n        <\/div>\n        <div class=\"diag-result s1\" id=\"dr1\">\n          <h3>You have a presence \u2014 but it&#8217;s leaking leads.<\/h3>\n          <p>Gaps in your foundation are costing you real money. Small fixes here create big results fast. Let&#8217;s pinpoint them in a free 30-minute audit.<\/p>\n          <div class=\"btn-ring-wrap\"><a href=\"#contact\" class=\"btn btn-white\" style=\"font-size:13px;padding:12px 22px\">Schedule My Free Audit<\/a><\/div>\n        <\/div>\n        <div class=\"diag-result s2\" id=\"dr2\">\n          <h3>You&#8217;re leaving money on the table.<\/h3>\n          <p>You&#8217;re doing several things right \u2014 but one or two missing pieces are holding back your growth. Let&#8217;s close that gap together. Book your free audit to find them.<\/p>\n          <div class=\"btn-ring-wrap\"><a href=\"#contact\" class=\"btn btn-white\" style=\"font-size:13px;padding:12px 22px\">Schedule My Free Audit<\/a><\/div>\n        <\/div>\n        <div class=\"diag-result s3\" id=\"dr3\">\n          <h3>Solid foundation. Now let&#8217;s scale.<\/h3>\n          <p>You&#8217;ve built something real. The next level is a system that actively drives new customers. Let&#8217;s design it. Book your free strategy call.<\/p>\n          <div class=\"btn-ring-wrap\"><a href=\"#contact\" class=\"btn btn-white\" style=\"font-size:13px;padding:12px 22px\">Schedule My Strategy Call<\/a><\/div>\n        <\/div>\n\n        <button class=\"diag-reset-btn\" id=\"diag-reset\" onclick=\"resetDiag()\">\u21a9 Start over<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 7. PROOF \u2550\u2550 -->\n<section id=\"proof\">\n  <div class=\"container\">\n    <span class=\"section-label fade\" style=\"color:var(--black)\">Results<\/span>\n\n    <div class=\"proof-numbers fade fade-d1\">\n      <div class=\"stat\"><p class=\"stat-n\">50+<\/p><p class=\"stat-l\">Small businesses<br>transformed<\/p><\/div>\n      <div class=\"stat\"><p class=\"stat-n\">4.9\u2605<\/p><p class=\"stat-l\">Average client<br>satisfaction<\/p><\/div>\n      <div class=\"stat\"><p class=\"stat-n\">3\u00d7<\/p><p class=\"stat-l\">Average increase<br>in Google reviews<\/p><\/div>\n      <div class=\"stat\"><p class=\"stat-n\">90d<\/p><p class=\"stat-l\">Average time to<br>first real results<\/p><\/div>\n    <\/div>\n\n    <div class=\"testimonials\">\n      <div class=\"t-card fade fade-d1\">\n        <p class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/p>\n        <p class=\"t-text\">&#8220;Before UX Project, I was invisible. Six months later, I&#8217;m turning away work. My Google reviews went from 4 to 67, and I rank #1 in my area.&#8221;<\/p>\n        <p class=\"t-name\">Maria G.<\/p><p class=\"t-biz\">Hair salon owner \u2014 Miami, FL<\/p>\n      <\/div>\n      <div class=\"t-card fade fade-d2\">\n        <p class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/p>\n        <p class=\"t-text\">&#8220;I used to pay $500\/month for social media and get nothing. Now we get 3\u20134 new leads every week from Google alone. It pays for itself.&#8221;<\/p>\n        <p class=\"t-name\">Carlos R.<\/p><p class=\"t-biz\">HVAC company \u2014 Orlando, FL<\/p>\n      <\/div>\n      <div class=\"t-card fade fade-d3\">\n        <p class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/p>\n        <p class=\"t-text\">&#8220;My brand finally looks like what my business actually is. Customers come in already trusting us. The photography alone was a game changer.&#8221;<\/p>\n        <p class=\"t-name\">Valeria M.<\/p><p class=\"t-biz\">Restaurant owner \u2014 Tampa, FL<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 8. ABOUT \u2014 without \"UX\" giant background \u2550\u2550 -->\n<section id=\"about\">\n  <div class=\"container\">\n    <div class=\"about-layout\">\n      <div class=\"about-left fade\">\n        <h2>We built this agency<br>for the ones who build<br>everything else.<\/h2>\n      <\/div>\n      <div class=\"about-right\">\n        <span class=\"eyebrow fade\" style=\"margin-bottom:28px;\">Who we are<\/span>\n        <p class=\"fade fade-d1\">UX Project was built for business owners who are serious about growth but tired of being burned by people who promised results and delivered excuses.<\/p>\n        <p class=\"fade fade-d2\">We&#8217;re a team of strategists, designers, and marketers based in Florida. We don&#8217;t just manage your social media \u2014 we build the marketing system your business actually needs to compete and win.<\/p>\n        <p class=\"fade fade-d3\">We work with a limited number of clients at a time. Not because we can&#8217;t handle more \u2014 because we refuse to water down our work.<\/p>\n        <div class=\"btn-ring-wrap fade fade-d4\">\n          <a href=\"#contact\" class=\"btn btn-white\">Work With Us<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 9. PROCESS \u2014 horizontal scroll, big cards \u2550\u2550 -->\n<section id=\"process\">\n  <div class=\"container\">\n    <div class=\"process-header\">\n      <h2 class=\"fade\">Simple process.<br>Real results.<\/h2>\n      <p class=\"fade fade-d1\">No onboarding labyrinth. No mystery. You&#8217;ll always know exactly what&#8217;s happening and why.<\/p>\n    <\/div>\n  <\/div>\n  <div class=\"process-scroll fade fade-d2\">\n    <div class=\"process-track\">\n      <div class=\"step\">\n        <p class=\"step-n\">01<\/p>\n        <p class=\"step-title\">Free Audit<\/p>\n        <p class=\"step-desc\">We analyze your Google presence, brand, and digital footprint \u2014 and show you exactly what&#8217;s costing you customers.<\/p>\n      <\/div>\n      <div class=\"step\">\n        <p class=\"step-n\">02<\/p>\n        <p class=\"step-title\">Strategy<\/p>\n        <p class=\"step-desc\">A custom plan for your business, your goals, your market. No templates. No guessing.<\/p>\n      <\/div>\n      <div class=\"step\">\n        <p class=\"step-n\">03<\/p>\n        <p class=\"step-title\">Execution<\/p>\n        <p class=\"step-desc\">We build everything \u2014 design, content, systems, ads \u2014 while you focus on running your business.<\/p>\n      <\/div>\n      <div class=\"step\">\n        <p class=\"step-n\">04<\/p>\n        <p class=\"step-title\">Results<\/p>\n        <p class=\"step-desc\">We track what matters and report every month with full transparency. No surprises.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 10. CONTACT \u2550\u2550 -->\n<section id=\"contact\">\n  <div class=\"container\">\n    <div class=\"contact-layout\">\n      <div class=\"contact-left fade\">\n        <span class=\"eyebrow\" style=\"margin-bottom:28px;\">Let&#8217;s talk<\/span>\n        <h2>Stop losing customers you never knew you had.<\/h2>\n        <p>Book a free 30-minute audit. No pitch. No pressure. Just an honest look at where your business stands \u2014 and what it would take to fix it.<\/p>\n        <div class=\"contact-alts\">\n          <div class=\"btn-ring-wrap\">\n            <a href=\"https:\/\/wa.me\/13055550000\" class=\"btn btn-wa\" target=\"_blank\" rel=\"noopener\">\n              <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"white\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"><\/path><\/svg>\n              Message on WhatsApp\n            <\/a>\n          <\/div>\n          <a href=\"https:\/\/calendly.com\/uxproject\" class=\"alt-link\" target=\"_blank\" rel=\"noopener\">Or schedule a call \u2192<\/a>\n        <\/div>\n      <\/div>\n\n      <form class=\"contact-form fade fade-d1\" id=\"contact-form\" onsubmit=\"handleSubmit(event)\">\n        <div class=\"form-row\">\n          <input type=\"text\" name=\"name\" placeholder=\"Your name\" required=\"\">\n          <input type=\"text\" name=\"business\" placeholder=\"Business name\" required=\"\">\n        <\/div>\n        <div class=\"form-row\">\n          <input type=\"email\" name=\"email\" placeholder=\"Email address\" required=\"\">\n          <input type=\"tel\" name=\"phone\" placeholder=\"Phone number\">\n        <\/div>\n        <select name=\"package\">\n  <option value=\"\" disabled=\"\" selected=\"\">Which package interests you?<\/option>\n  <option value=\"brand\">Brand &amp; Presence<\/option>\n  <option value=\"clients\">Clients &amp; Acquisition<\/option>\n  <option value=\"strategy\">Full Strategy<\/option>\n  <option value=\"specific\">A specific service<\/option>\n  <option value=\"unsure\">Not sure yet \u2014 I just need help<\/option>\n<\/select>\n        <textarea name=\"message\" placeholder=\"Tell us about your business and your biggest challenge right now\u2026\"><\/textarea>\n        <div class=\"btn-ring-wrap\">\n          <button type=\"submit\" class=\"btn btn-white\" id=\"form-btn\">Send Message<\/button>\n        <\/div>\n      <\/form>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n<script>\n\/* Home-only behavior: diagnostic quiz + contact form.\n   Functions are global so inline on* handlers can reach them.\n   DOM-querying setup runs on DOMContentLoaded. *\/\n\n\/\/ \u2500\u2500 Diagnostic Yes\/No \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nvar diagAnswers = {};\nvar diagStages = [];\nvar diagTotal = 0;\nvar diagLabels = ['Brand & first impression', 'Visibility & traction', 'Strategy & growth'];\nvar diagStep = 1;\n\nfunction checkStageComplete() {\n  var activeStage = document.querySelector('.diag-stage.active');\n  if (!activeStage) return;\n  var questions = activeStage.querySelectorAll('.diag-q');\n  var allAnswered = [].slice.call(questions).every(function (q) { return diagAnswers[q.dataset.q]; });\n  document.getElementById('diag-btn').disabled = !allAnswered;\n}\n\nfunction diagRender() {\n  diagStages.forEach(function (s) { s.classList.toggle('active', +s.dataset.stage === diagStep); });\n  document.getElementById('diag-cur').textContent = diagStep;\n  document.getElementById('diag-pct').textContent = diagLabels[diagStep - 1];\n  document.getElementById('diag-bar-fill').style.width = (diagStep \/ diagTotal * 100) + '%';\n  document.getElementById('diag-back').hidden = diagStep === 1;\n  document.getElementById('diag-btn').textContent = diagStep === diagTotal ? 'Get My Score' : 'Continue';\n  checkStageComplete();\n}\n\nfunction diagNext() {\n  if (diagStep < diagTotal) {\n    diagStep++; diagRender();\n    window.scrollTo({ top: document.getElementById('diagnostic').offsetTop - 80, behavior: 'smooth' });\n  } else { runDiag(); }\n}\nfunction diagBack() {\n  if (diagStep > 1) { diagStep--; diagRender(); }\n}\n\nfunction runDiag() {\n  var yesCount = Object.values(diagAnswers).filter(function (v) { return v === 'yes'; }).length;\n  var tier;\n  if      (yesCount <= 2) tier = 0;\n  else if (yesCount <= 4) tier = 1;\n  else if (yesCount <= 6) tier = 2;\n  else                    tier = 3;\n  document.querySelectorAll('.diag-result').forEach(function (r) { r.classList.remove('show'); });\n  document.getElementById('dr' + tier).classList.add('show');\n  document.querySelector('.diag-nav').style.display = 'none';\n  document.querySelector('.diag-progress').style.display = 'none';\n  document.querySelectorAll('.diag-stage').forEach(function (s) { s.classList.remove('active'); });\n  document.getElementById('diag-reset').classList.add('show');\n}\n\nfunction resetDiag() {\n  Object.keys(diagAnswers).forEach(function (k) { delete diagAnswers[k]; });\n  document.querySelectorAll('.diag-q').forEach(function (q) { q.classList.remove('answered'); });\n  document.querySelectorAll('.diag-yn-btn').forEach(function (b) { b.classList.remove('selected'); });\n  document.querySelectorAll('.diag-result').forEach(function (r) { r.classList.remove('show'); });\n  document.querySelector('.diag-nav').style.display = '';\n  document.querySelector('.diag-progress').style.display = '';\n  document.getElementById('diag-reset').classList.remove('show');\n  diagStep = 1; diagRender();\n}\n\n\/\/ \u2500\u2500 Contact form \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction handleSubmit(e) {\n  e.preventDefault();\n  var btn = document.getElementById('form-btn');\n  btn.textContent = \"Sent \u2713  We'll be in touch soon.\";\n  btn.disabled = true;\n  btn.style.opacity = '0.5';\n}\n\ndocument.addEventListener('DOMContentLoaded', function () {\n  diagStages = [].slice.call(document.querySelectorAll('.diag-stage'));\n  diagTotal = diagStages.length;\n\n  document.querySelectorAll('.diag-yn-btn').forEach(function (btn) {\n    btn.addEventListener('click', function () {\n      var q = this.closest('.diag-q');\n      var qId = q.dataset.q;\n      diagAnswers[qId] = this.dataset.val;\n      q.querySelectorAll('.diag-yn-btn').forEach(function (b) { b.classList.remove('selected'); });\n      this.classList.add('selected');\n      q.classList.add('answered');\n      checkStageComplete();\n    });\n  });\n\n  if (diagTotal) diagRender();\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Your business is great.But, nobody knows it exists. We turn amazing ideas into brandspeople choose \u2014 and recommend. Book a Free Audit See Our Services Sound familiar? You&#8217;ve tried.You&#8217;ve paid.Nothing happened. 01 Every customer you have came from word of mouth. That&#8217;s not a strategy. That&#8217;s luck running out. 02 Your brand looks like a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":35,"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/pages\/11\/revisions\/183"}],"wp:attachment":[{"href":"https:\/\/uxproject.space\/es\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}