{"id":132,"date":"2026-04-23T16:23:06","date_gmt":"2026-04-23T16:23:06","guid":{"rendered":"https:\/\/test.madrelunadesigns.com\/?page_id=132"},"modified":"2026-04-23T16:24:04","modified_gmt":"2026-04-23T16:24:04","slug":"rexannas-foundation-design-five-phases","status":"publish","type":"page","link":"https:\/\/test.madrelunadesigns.com\/index.php\/rexannas-foundation-design-five-phases\/","title":{"rendered":"Rexanna&#8217;s Foundation Design &#8211; Five Phases"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"132\" class=\"elementor elementor-132\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed4d83c e-flex e-con-boxed e-con e-parent\" data-id=\"ed4d83c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6de1c23 elementor-widget elementor-widget-html\" data-id=\"6de1c23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\tMld five phases \u00b7 HTML\r\nCopy\r\n\r\n<!-- MADRE LUNA DESIGNS \u2014 Five Phases of Website Creation \u2014 Elementor HTML Widget Ready -->\r\n \r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Cinzel:wght@400;500;600&family=Jost:wght@200;300;400;500&display=swap\" rel=\"stylesheet\">\r\n \r\n<style>\r\n\/* \u2500\u2500\u2500 Tokens (mirrors mldp-wrap exactly) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.mldp-ph {\r\n  --ink:       #0d0a14;\r\n  --deep:      #13101e;\r\n  --midnight:  #1a1528;\r\n  --plum:      #2c1f4a;\r\n  --amethyst:  #7b5ea7;\r\n  --lavender:  #b8a4d4;\r\n  --gold:      #c9a84c;\r\n  --gold-lt:   #e8c97a;\r\n  --cream:     #f0e8d8;\r\n  --white:     #fdf9f4;\r\n  --muted:     rgba(184,164,212,0.48);\r\n  --bdr:       rgba(201,168,76,0.18);\r\n  --bdr-soft:  rgba(201,168,76,0.10);\r\n \r\n  \/* Per-phase accent colors \u2014 easy to override *\/\r\n  --ph1: #7b5ea7;   \/* discovery   \u2014 amethyst *\/\r\n  --ph2: #c9a84c;   \/* wireframe   \u2014 gold     *\/\r\n  --ph3: #00A8C4;   \/* concepts    \u2014 teal     *\/\r\n  --ph4: #3DBBD6;   \/* development \u2014 aqua     *\/\r\n  --ph5: #e8c97a;   \/* testing     \u2014 gold-lt  *\/\r\n \r\n  background: var(--ink);\r\n  color: var(--cream);\r\n  font-family: 'Jost', sans-serif;\r\n  font-weight: 300;\r\n  font-size: 16px;\r\n  line-height: 1.6;\r\n  width: 100%;\r\n  overflow-x: hidden;\r\n}\r\n \r\n.mldp-ph *, .mldp-ph *::before, .mldp-ph *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n \r\n.mldp-ph a { text-decoration: none; }\r\n.mldp-ph img { display: block; max-width: 100%; }\r\n \r\n\/* \u2500\u2500\u2500 Breadcrumb \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 *\/\r\n.mldp-ph-crumb {\r\n  padding: 2rem 4rem 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  font-size: 0.66rem;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n}\r\n.mldp-ph-crumb a { color: var(--muted); transition: color 0.3s; }\r\n.mldp-ph-crumb a:hover { color: var(--gold-lt); }\r\n.mldp-ph-crumb > span { color: var(--gold); }\r\n \r\n\/* \u2500\u2500\u2500 Page Hero \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 *\/\r\n.mldp-ph-hero {\r\n  padding: 3.5rem 4rem 4rem;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.mldp-ph-hero::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 40%; left: 50%;\r\n  width: 700px; height: 500px;\r\n  transform: translate(-50%, -50%);\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(44,31,74,0.32) 0%, transparent 68%);\r\n  pointer-events: none;\r\n}\r\n \r\n.mldp-ph-hero-inner {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 760px;\r\n  opacity: 0;\r\n  transform: translateY(28px);\r\n  transition: opacity 0.85s ease, transform 0.85s ease;\r\n}\r\n.mldp-ph-hero-inner.mldp-ph-in { opacity: 1; transform: translateY(0); }\r\n \r\n.mldp-ph-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  font-family: 'Cinzel', serif;\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.3em;\r\n  text-transform: uppercase;\r\n  color: var(--gold);\r\n  border: 1px solid var(--bdr);\r\n  padding: 0.42rem 1rem;\r\n  background: rgba(201,168,76,0.04);\r\n  margin-bottom: 1.6rem;\r\n}\r\n.mldp-ph-badge::before {\r\n  content: '';\r\n  width: 5px; height: 5px;\r\n  border-radius: 50%;\r\n  background: var(--gold);\r\n  animation: mldpPhPulse 2s ease-in-out infinite;\r\n  flex-shrink: 0;\r\n}\r\n@keyframes mldpPhPulse {\r\n  0%, 100% { opacity: 1; transform: scale(1); }\r\n  50%       { opacity: 0.4; transform: scale(1.4); }\r\n}\r\n \r\n.mldp-ph-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-weight: 300;\r\n  font-size: clamp(2.2rem, 4.5vw, 3.6rem);\r\n  line-height: 1.1;\r\n  color: var(--white);\r\n  margin-bottom: 1.1rem;\r\n}\r\n.mldp-ph-title em { font-style: italic; color: var(--gold-lt); }\r\n \r\n.mldp-ph-intro {\r\n  font-size: 0.9rem;\r\n  line-height: 1.88;\r\n  color: var(--lavender);\r\n  max-width: 600px;\r\n}\r\n \r\n\/* \u2500\u2500\u2500 Sticky Phase Nav \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 *\/\r\n.mldp-ph-nav {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 100;\r\n  background: rgba(13,10,20,0.96);\r\n  backdrop-filter: blur(14px);\r\n  border-top: 1px solid var(--bdr);\r\n  border-bottom: 1px solid var(--bdr);\r\n  overflow-x: auto;\r\n  scrollbar-width: none;\r\n}\r\n.mldp-ph-nav::-webkit-scrollbar { display: none; }\r\n \r\n.mldp-ph-nav-inner {\r\n  display: flex;\r\n  align-items: stretch;\r\n  padding: 0 4rem;\r\n  min-width: max-content;\r\n}\r\n \r\n.mldp-ph-nav-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.65rem;\r\n  padding: 1rem 1.6rem;\r\n  font-family: 'Cinzel', serif;\r\n  font-size: 0.56rem;\r\n  letter-spacing: 0.22em;\r\n  text-transform: uppercase;\r\n  color: var(--muted);\r\n  border-right: 1px solid var(--bdr-soft);\r\n  transition: color 0.3s, background 0.3s;\r\n  cursor: pointer;\r\n  white-space: nowrap;\r\n  position: relative;\r\n}\r\n.mldp-ph-nav-item:first-child { border-left: 1px solid var(--bdr-soft); }\r\n.mldp-ph-nav-item:hover { color: var(--gold-lt); background: rgba(201,168,76,0.04); }\r\n.mldp-ph-nav-item.active { color: var(--gold); }\r\n.mldp-ph-nav-item.active::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 0; left: 0; right: 0;\r\n  height: 2px;\r\n  background: var(--ph-accent, var(--gold));\r\n}\r\n \r\n.mldp-ph-nav-num {\r\n  font-size: 0.5rem;\r\n  opacity: 0.55;\r\n}\r\n \r\n\/* \u2500\u2500\u2500 Marquee \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 *\/\r\n.mldp-ph-marquee {\r\n  border-bottom: 1px solid var(--bdr);\r\n  background: rgba(201,168,76,0.03);\r\n  padding: 0.85rem 0;\r\n  overflow: hidden;\r\n}\r\n.mldp-ph-mtrack {\r\n  display: flex;\r\n  gap: 3rem;\r\n  white-space: nowrap;\r\n  animation: mldpPhTicker 36s linear infinite;\r\n}\r\n.mldp-ph-mitem {\r\n  font-family: 'Cinzel', serif;\r\n  font-size: 0.62rem;\r\n  letter-spacing: 0.28em;\r\n  text-transform: uppercase;\r\n  color: var(--gold);\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1.5rem;\r\n}\r\n.mldp-ph-mitem::after { content: '\u2736'; color: var(--amethyst); }\r\n@keyframes mldpPhTicker {\r\n  from { transform: translateX(0); }\r\n  to   { transform: translateX(-50%); }\r\n}\r\n \r\n\/* \u2500\u2500\u2500 Shared Phase Layout \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 *\/\r\n.mldp-ph-phase {\r\n  border-bottom: 1px solid var(--bdr-soft);\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\/* Alternating background depth *\/\r\n.mldp-ph-phase:nth-child(even) { background: rgba(26,21,40,0.45); }\r\n \r\n\/* Glow orb per section *\/\r\n.mldp-ph-phase::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: 500px; height: 500px;\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, var(--ph-orb, rgba(44,31,74,0.18)) 0%, transparent 65%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n.mldp-ph-phase:nth-child(odd)::before  { top: -100px; right: -120px; }\r\n.mldp-ph-phase:nth-child(even)::before { bottom: -100px; left: -120px; }\r\n \r\n.mldp-ph-phase-inner {\r\n  display: grid;\r\n  grid-template-columns: 260px 1fr;\r\n  gap: 0;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  padding: 0 4rem;\r\n  position: relative;\r\n  z-index: 1;\r\n  opacity: 0;\r\n  transform: translateY(24px);\r\n  transition: opacity 0.8s ease, transform 0.8s ease;\r\n}\r\n.mldp-ph-phase-inner.mldp-ph-in { opacity: 1; transform: translateY(0); }\r\n \r\n\/* Left sidebar \u2014 number + label *\/\r\n.mldp-ph-sidebar {\r\n  padding: 4rem 3rem 4rem 0;\r\n  border-right: 1px solid var(--bdr-soft);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: 1rem;\r\n  position: relative;\r\n}\r\n \r\n\/* Accent line along top of sidebar *\/\r\n.mldp-ph-sidebar::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  width: 48px; height: 1px;\r\n  background: var(--ph-accent, var(--gold));\r\n}\r\n \r\n.mldp-ph-num {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-weight: 300;\r\n  font-style: italic;\r\n  font-size: 5rem;\r\n  line-height: 1;\r\n  color: var(--ph-accent, var(--gold));\r\n  opacity: 0.18;\r\n  letter-spacing: -0.02em;\r\n  display: block;\r\n  transition: opacity 0.4s;\r\n}\r\n.mldp-ph-phase:hover .mldp-ph-num { opacity: 0.32; }\r\n \r\n.mldp-ph-step-label {\r\n  font-family: 'Cinzel', serif;\r\n  font-size: 0.54rem;\r\n  letter-spacing: 0.3em;\r\n  text-transform: uppercase;\r\n  color: var(--ph-accent, var(--gold));\r\n  display: block;\r\n}\r\n \r\n.mldp-ph-phase-tag {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  font-size: 0.58rem;\r\n  letter-spacing: 0.16em;\r\n  text-transform: uppercase;\r\n  padding: 0.28rem 0.75rem;\r\n  border: 1px solid rgba(184,164,212,0.15);\r\n  color: var(--muted);\r\n  margin-top: 0.5rem;\r\n  transition: border-color 0.3s, color 0.3s;\r\n}\r\n.mldp-ph-phase:hover .mldp-ph-phase-tag {\r\n  border-color: var(--ph-accent, var(--gold));\r\n  color: var(--gold-lt);\r\n}\r\n \r\n\/* Right \u2014 main content *\/\r\n.mldp-ph-content {\r\n  padding: 4rem 0 4rem 3.5rem;\r\n}\r\n \r\n.mldp-ph-phase-title {\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-weight: 300;\r\n  font-size: clamp(1.8rem, 3vw, 2.6rem);\r\n  line-height: 1.12;\r\n  color: var(--white);\r\n  margin-bottom: 1.1rem;\r\n}\r\n.mldp-ph-phase-title em { font-style: italic; color: var(--gold-lt); }\r\n \r\n\/* Accent line under title *\/\r\n.mldp-ph-phase-title::after {\r\n  content: '';\r\n  display: block;\r\n  width: 40px;\r\n  height: 1px;\r\n  background: var(--ph-accent, var(--gold));\r\n  margin-top: 0.9rem;\r\n  transition: width 0.4s;\r\n}\r\n.mldp-ph-phase:hover .mldp-ph-phase-title::after { width: 72px; }\r\n \r\n.mldp-ph-phase-body {\r\n  font-size: 0.88rem;\r\n  line-height: 1.9;\r\n  color: var(--lavender);\r\n  max-width: 640px;\r\n  margin-bottom: 2rem;\r\n}\r\n \r\n\/* Bullet deliverables *\/\r\n.mldp-ph-list {\r\n  list-style: none;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.55rem;\r\n  margin-bottom: 2.5rem;\r\n}\r\n.mldp-ph-list li {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 0.8rem;\r\n  font-size: 0.8rem;\r\n  color: var(--muted);\r\n  line-height: 1.55;\r\n  padding-bottom: 0.55rem;\r\n  border-bottom: 1px solid rgba(184,164,212,0.07);\r\n}\r\n.mldp-ph-list li:last-child { border-bottom: none; padding-bottom: 0; }\r\n.mldp-ph-list li::before {\r\n  content: '';\r\n  width: 5px;\r\n  height: 5px;\r\n  border-radius: 50%;\r\n  background: var(--ph-accent, var(--gold));\r\n  flex-shrink: 0;\r\n  margin-top: 0.45em;\r\n  opacity: 0.7;\r\n}\r\n \r\n\/* CTA link *\/\r\n.mldp-ph-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  font-family: 'Cinzel', serif;\r\n  font-size: 0.6rem;\r\n  letter-spacing: 0.26em;\r\n  text-transform: uppercase;\r\n  color: var(--lavender);\r\n  border: 1px solid var(--bdr);\r\n  padding: 0.85rem 1.5rem;\r\n  background: rgba(201,168,76,0.03);\r\n  transition: color 0.3s, border-color 0.3s, background 0.3s, gap 0.3s;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.mldp-ph-link::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: var(--ph-accent, var(--gold));\r\n  opacity: 0;\r\n  transition: opacity 0.3s;\r\n}\r\n.mldp-ph-link:hover {\r\n  color: var(--gold-lt);\r\n  border-color: var(--ph-accent, var(--gold));\r\n  background: rgba(201,168,76,0.06);\r\n  gap: 16px;\r\n}\r\n.mldp-ph-link svg {\r\n  width: 12px; height: 12px;\r\n  stroke: currentColor; fill: none;\r\n  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n.mldp-ph-link span { position: relative; z-index: 1; }\r\n \r\n\/* \u2500\u2500\u2500 Closing note (same as mldp-note) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.mldp-ph-note {\r\n  margin: 0 4rem 5rem;\r\n  border: 1px solid var(--bdr);\r\n  background: var(--deep);\r\n  padding: 2.5rem 3rem;\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 1.8rem;\r\n  position: relative;\r\n  opacity: 0;\r\n  transform: translateY(16px);\r\n  transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;\r\n}\r\n.mldp-ph-note.mldp-ph-in { opacity: 1; transform: translateY(0); }\r\n.mldp-ph-note::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0;\r\n  height: 1px;\r\n  background: linear-gradient(90deg, var(--gold), transparent);\r\n}\r\n.mldp-ph-note-icon {\r\n  flex-shrink: 0;\r\n  width: 38px; height: 38px;\r\n  border: 1px solid var(--bdr); border-radius: 50%;\r\n  display: flex; align-items: center; justify-content: center;\r\n  background: rgba(201,168,76,0.05);\r\n}\r\n.mldp-ph-note-icon svg {\r\n  width: 17px; height: 17px;\r\n  stroke: var(--gold); fill: none;\r\n  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;\r\n}\r\n.mldp-ph-note-body strong {\r\n  display: block;\r\n  font-family: 'Cormorant Garamond', serif;\r\n  font-size: 1.15rem; font-weight: 400;\r\n  color: var(--white); margin-bottom: 0.5rem;\r\n}\r\n.mldp-ph-note-body p {\r\n  font-size: 0.84rem; line-height: 1.82; color: var(--lavender);\r\n}\r\n \r\n\/* \u2500\u2500\u2500 Responsive \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 *\/\r\n@media (max-width: 900px) {\r\n  .mldp-ph-crumb  { padding: 1.5rem 2rem 0; }\r\n  .mldp-ph-hero   { padding: 2.5rem 2rem 3.5rem; }\r\n  .mldp-ph-nav-inner { padding: 0 2rem; }\r\n  .mldp-ph-phase-inner { grid-template-columns: 1fr; padding: 0 2rem; }\r\n  .mldp-ph-sidebar {\r\n    padding: 3rem 0 1.5rem;\r\n    border-right: none;\r\n    border-bottom: 1px solid var(--bdr-soft);\r\n    flex-direction: row;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 0.75rem;\r\n  }\r\n  .mldp-ph-sidebar::before { display: none; }\r\n  .mldp-ph-num { font-size: 3.5rem; opacity: 0.22; }\r\n  .mldp-ph-content { padding: 2rem 0 3.5rem; }\r\n  .mldp-ph-note { margin: 0 2rem 4rem; }\r\n}\r\n \r\n@media (max-width: 560px) {\r\n  .mldp-ph-hero   { padding: 2rem 1.4rem 3rem; }\r\n  .mldp-ph-phase-inner { padding: 0 1.4rem; }\r\n  .mldp-ph-note { margin: 0 1.4rem 4rem; padding: 1.8rem 1.4rem; flex-direction: column; }\r\n  .mldp-ph-nav-item { padding: 0.85rem 1rem; }\r\n}\r\n<\/style>\r\n \r\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 -->\r\n<div class=\"mldp-ph\">\r\n \r\n  <!-- Breadcrumb -->\r\n  <nav class=\"mldp-ph-crumb\">\r\n    <a href=\"\/portfolio\">Portfolio<\/a>\r\n    <span>\u203a<\/span>\r\n    <a href=\"#\">Rexanna's Foundation<\/a>\r\n    <span>\u203a<\/span>\r\n    Our Process\r\n  <\/nav>\r\n \r\n  <!-- \u2500\u2500 Hero \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 -->\r\n  <div class=\"mldp-ph-hero\">\r\n    <div class=\"mldp-ph-hero-inner mldp-ph-reveal\">\r\n      <div class=\"mldp-ph-badge\">Case Study \u2014 How We Build<\/div>\r\n      <h1 class=\"mldp-ph-title\">Five Phases of<br><em>Intentional Design<\/em><\/h1>\r\n      <p class=\"mldp-ph-intro\">\r\n        Every website we build follows the same disciplined path \u2014 from listening deeply to\r\n        launching with confidence. Here is a clear view of each phase, what it involves,\r\n        and what it produces. Select any phase below to explore the full detail.\r\n      <\/p>\r\n    <\/div>\r\n  <\/div>\r\n \r\n  <!-- \u2500\u2500 Sticky Phase Navigation \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 -->\r\n  <nav class=\"mldp-ph-nav\" aria-label=\"Phase navigation\">\r\n    <div class=\"mldp-ph-nav-inner\">\r\n      <a href=\"#ph-discovery\"   class=\"mldp-ph-nav-item active\" style=\"--ph-accent:var(--ph1);\">\r\n        <span class=\"mldp-ph-nav-num\">01<\/span> Discovery &amp; Strategy\r\n      <\/a>\r\n      <a href=\"#ph-wireframe\"   class=\"mldp-ph-nav-item\" style=\"--ph-accent:var(--ph2);\">\r\n        <span class=\"mldp-ph-nav-num\">02<\/span> Wireframing &amp; Structure\r\n      <\/a>\r\n      <a href=\"#ph-concepts\"    class=\"mldp-ph-nav-item\" style=\"--ph-accent:var(--ph3);\">\r\n        <span class=\"mldp-ph-nav-num\">03<\/span> Design Concepts\r\n      <\/a>\r\n      <a href=\"#ph-development\" class=\"mldp-ph-nav-item\" style=\"--ph-accent:var(--ph4);\">\r\n        <span class=\"mldp-ph-nav-num\">04<\/span> Development\r\n      <\/a>\r\n      <a href=\"#ph-testing\"     class=\"mldp-ph-nav-item\" style=\"--ph-accent:var(--ph5);\">\r\n        <span class=\"mldp-ph-nav-num\">05<\/span> Testing &amp; Optimization\r\n      <\/a>\r\n    <\/div>\r\n  <\/nav>\r\n \r\n  <!-- Marquee -->\r\n  <div class=\"mldp-ph-marquee\" aria-hidden=\"true\">\r\n    <div class=\"mldp-ph-mtrack\">\r\n      <span class=\"mldp-ph-mitem\">Discovery<\/span>\r\n      <span class=\"mldp-ph-mitem\">Strategy<\/span>\r\n      <span class=\"mldp-ph-mitem\">Wireframing<\/span>\r\n      <span class=\"mldp-ph-mitem\">Structure<\/span>\r\n      <span class=\"mldp-ph-mitem\">Design Concepts<\/span>\r\n      <span class=\"mldp-ph-mitem\">Development<\/span>\r\n      <span class=\"mldp-ph-mitem\">Testing<\/span>\r\n      <span class=\"mldp-ph-mitem\">Optimization<\/span>\r\n      <span class=\"mldp-ph-mitem\">Discovery<\/span>\r\n      <span class=\"mldp-ph-mitem\">Strategy<\/span>\r\n      <span class=\"mldp-ph-mitem\">Wireframing<\/span>\r\n      <span class=\"mldp-ph-mitem\">Structure<\/span>\r\n      <span class=\"mldp-ph-mitem\">Design Concepts<\/span>\r\n      <span class=\"mldp-ph-mitem\">Development<\/span>\r\n      <span class=\"mldp-ph-mitem\">Testing<\/span>\r\n      <span class=\"mldp-ph-mitem\">Optimization<\/span>\r\n    <\/div>\r\n  <\/div>\r\n \r\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\r\n       PHASE 1 \u2014 DISCOVERY & STRATEGY\r\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 -->\r\n  <section class=\"mldp-ph-phase\" id=\"ph-discovery\"\r\n           style=\"--ph-accent:var(--ph1); --ph-orb:rgba(123,94,167,0.16);\">\r\n    <div class=\"mldp-ph-phase-inner mldp-ph-reveal\">\r\n \r\n      <div class=\"mldp-ph-sidebar\">\r\n        <span class=\"mldp-ph-num\">01<\/span>\r\n        <span class=\"mldp-ph-step-label\">Phase One<\/span>\r\n        <span class=\"mldp-ph-phase-tag\">Foundation<\/span>\r\n      <\/div>\r\n \r\n      <div class=\"mldp-ph-content\">\r\n        <h2 class=\"mldp-ph-phase-title\">Discovery &amp; <em>Strategy<\/em><\/h2>\r\n        <p class=\"mldp-ph-phase-body\">\r\n          Before a single layout decision is made, we listen. Discovery is the most important phase\r\n          of any project \u2014 it shapes every choice that follows. We conduct in-depth conversations with\r\n          you to understand your mission, your audience, your goals, and the emotional experience you\r\n          want your visitors to have. From that foundation, a clear strategic direction is built.\r\n        <\/p>\r\n        <ul class=\"mldp-ph-list\">\r\n          <li>Stakeholder interviews and mission alignment sessions<\/li>\r\n          <li>Audience mapping \u2014 identifying who you are speaking to and why<\/li>\r\n          <li>Review of existing brand assets and content<\/li>\r\n          <li>Competitive and industry landscape review<\/li>\r\n          <li>Information architecture and site map draft<\/li>\r\n          <li>Brand voice, tone, and emotional direction definition<\/li>\r\n        <\/ul>\r\n        <!-- \u2193 Replace # with the URL of your Phase 1 detail page when ready -->\r\n        <a href=\"#\" class=\"mldp-ph-link\">\r\n          <span>Explore This Phase<\/span>\r\n          <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n \r\n    <\/div>\r\n  <\/section>\r\n \r\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\r\n       PHASE 2 \u2014 WIREFRAMING & STRUCTURE\r\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 -->\r\n  <section class=\"mldp-ph-phase\" id=\"ph-wireframe\"\r\n           style=\"--ph-accent:var(--ph2); --ph-orb:rgba(201,168,76,0.12);\">\r\n    <div class=\"mldp-ph-phase-inner mldp-ph-reveal\">\r\n \r\n      <div class=\"mldp-ph-sidebar\">\r\n        <span class=\"mldp-ph-num\">02<\/span>\r\n        <span class=\"mldp-ph-step-label\">Phase Two<\/span>\r\n        <span class=\"mldp-ph-phase-tag\">Structure<\/span>\r\n      <\/div>\r\n \r\n      <div class=\"mldp-ph-content\">\r\n        <h2 class=\"mldp-ph-phase-title\">Wireframing &amp; <em>Structure<\/em><\/h2>\r\n        <p class=\"mldp-ph-phase-body\">\r\n          Strategy becomes structure. In this phase, we translate everything learned in discovery into\r\n          spatial decisions \u2014 how content is arranged, how pages flow, and how visitors will move through\r\n          your site. Wireframes are layout blueprints: they focus entirely on hierarchy and logic,\r\n          without the distraction of color or polish, so every structural choice can be evaluated clearly.\r\n        <\/p>\r\n        <ul class=\"mldp-ph-list\">\r\n          <li>Low-to-mid fidelity wireframes for key pages<\/li>\r\n          <li>Content block sequencing and scroll logic<\/li>\r\n          <li>Call-to-action placement strategy<\/li>\r\n          <li>Navigation architecture and mobile menu planning<\/li>\r\n          <li>Donor, patient, and visitor journey mapping<\/li>\r\n          <li>Client review and structural approval before design begins<\/li>\r\n        <\/ul>\r\n        <!-- \u2193 Replace # with the URL of your Phase 2 detail page when ready -->\r\n        <a href=\"#\" class=\"mldp-ph-link\">\r\n          <span>Explore This Phase<\/span>\r\n          <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n \r\n    <\/div>\r\n  <\/section>\r\n \r\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\r\n       PHASE 3 \u2014 DESIGN CONCEPTS\r\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 -->\r\n  <section class=\"mldp-ph-phase\" id=\"ph-concepts\"\r\n           style=\"--ph-accent:var(--ph3); --ph-orb:rgba(0,168,196,0.12);\">\r\n    <div class=\"mldp-ph-phase-inner mldp-ph-reveal\">\r\n \r\n      <div class=\"mldp-ph-sidebar\">\r\n        <span class=\"mldp-ph-num\">03<\/span>\r\n        <span class=\"mldp-ph-step-label\">Phase Three<\/span>\r\n        <span class=\"mldp-ph-phase-tag\">Visual Identity<\/span>\r\n      <\/div>\r\n \r\n      <div class=\"mldp-ph-content\">\r\n        <h2 class=\"mldp-ph-phase-title\">Design <em>Concepts<\/em><\/h2>\r\n        <p class=\"mldp-ph-phase-body\">\r\n          The wireframe structure is given life. This phase is where color, typography, imagery,\r\n          and atmosphere come together into complete visual directions. Rather than presenting a single\r\n          option, we explore multiple design concepts \u2014 each with its own palette, mood, and emotional\r\n          register. This allows you to choose the direction that truly resonates before any code is written.\r\n        <\/p>\r\n        <ul class=\"mldp-ph-list\">\r\n          <li>Multiple fully-developed visual design directions<\/li>\r\n          <li>Custom color token systems built per concept<\/li>\r\n          <li>Typography pairing and hierarchy definition<\/li>\r\n          <li>Component design \u2014 cards, buttons, sections, navigation<\/li>\r\n          <li>Client-facing presentation boards for each concept<\/li>\r\n          <li>Design direction selection and refinement round<\/li>\r\n        <\/ul>\r\n        <!-- \u2193 Replace # with the URL of your Phase 3 detail page when ready -->\r\n        <a href=\"#\" class=\"mldp-ph-link\">\r\n          <span>Explore This Phase<\/span>\r\n          <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n \r\n    <\/div>\r\n  <\/section>\r\n \r\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\r\n       PHASE 4 \u2014 DEVELOPMENT\r\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 -->\r\n  <section class=\"mldp-ph-phase\" id=\"ph-development\"\r\n           style=\"--ph-accent:var(--ph4); --ph-orb:rgba(61,187,214,0.10);\">\r\n    <div class=\"mldp-ph-phase-inner mldp-ph-reveal\">\r\n \r\n      <div class=\"mldp-ph-sidebar\">\r\n        <span class=\"mldp-ph-num\">04<\/span>\r\n        <span class=\"mldp-ph-step-label\">Phase Four<\/span>\r\n        <span class=\"mldp-ph-phase-tag\">Build<\/span>\r\n      <\/div>\r\n \r\n      <div class=\"mldp-ph-content\">\r\n        <h2 class=\"mldp-ph-phase-title\"><em>Development<\/em> &amp; Build<\/h2>\r\n        <p class=\"mldp-ph-phase-body\">\r\n          The approved design is translated into production code \u2014 page by page, with precision.\r\n          Each component is built to match the design exactly, structured for maintainability,\r\n          and optimized for performance within your WordPress and Elementor environment.\r\n          Every widget is self-contained, every style is scoped, and every interaction is deliberate.\r\n        <\/p>\r\n        <ul class=\"mldp-ph-list\">\r\n          <li>Full build within WordPress and Elementor Pro<\/li>\r\n          <li>Self-contained, namespaced HTML widget architecture<\/li>\r\n          <li>CSS custom property token system for easy future updates<\/li>\r\n          <li>WooCommerce donation and product flow integration<\/li>\r\n          <li>Fully responsive \u2014 mobile, tablet, and desktop<\/li>\r\n          <li>Inline fonts and performance-conscious asset loading<\/li>\r\n        <\/ul>\r\n        <!-- \u2193 Replace # with the URL of your Phase 4 detail page when ready -->\r\n        <a href=\"#\" class=\"mldp-ph-link\">\r\n          <span>Explore This Phase<\/span>\r\n          <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n \r\n    <\/div>\r\n  <\/section>\r\n \r\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\r\n       PHASE 5 \u2014 TESTING & OPTIMIZATION\r\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 -->\r\n  <section class=\"mldp-ph-phase\" id=\"ph-testing\"\r\n           style=\"--ph-accent:var(--ph5); --ph-orb:rgba(232,201,122,0.10);\">\r\n    <div class=\"mldp-ph-phase-inner mldp-ph-reveal\">\r\n \r\n      <div class=\"mldp-ph-sidebar\">\r\n        <span class=\"mldp-ph-num\">05<\/span>\r\n        <span class=\"mldp-ph-step-label\">Phase Five<\/span>\r\n        <span class=\"mldp-ph-phase-tag\">Launch Ready<\/span>\r\n      <\/div>\r\n \r\n      <div class=\"mldp-ph-content\">\r\n        <h2 class=\"mldp-ph-phase-title\">Testing &amp; <em>Optimization<\/em><\/h2>\r\n        <p class=\"mldp-ph-phase-body\">\r\n          A site launched is a site that must perform \u2014 every time, on every device. This phase\r\n          ensures the build holds up under real conditions: different browsers, connection speeds,\r\n          screen sizes, and user behaviors. We verify accessibility, review performance, confirm\r\n          all forms and flows work correctly, and conduct a thorough walkthrough with you before\r\n          anything goes live.\r\n        <\/p>\r\n        <ul class=\"mldp-ph-list\">\r\n          <li>Cross-browser testing \u2014 Chrome, Safari, Firefox, Edge<\/li>\r\n          <li>Responsive QA across mobile, tablet, and desktop breakpoints<\/li>\r\n          <li>Accessibility review \u2014 color contrast, focus states, semantic structure<\/li>\r\n          <li>Form, checkout, and WooCommerce flow validation<\/li>\r\n          <li>Cache configuration and post-update cache clearing protocol<\/li>\r\n          <li>Final client walkthrough, feedback round, and handoff<\/li>\r\n        <\/ul>\r\n        <!-- \u2193 Replace # with the URL of your Phase 5 detail page when ready -->\r\n        <a href=\"#\" class=\"mldp-ph-link\">\r\n          <span>Explore This Phase<\/span>\r\n          <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n \r\n    <\/div>\r\n  <\/section>\r\n \r\n  <!-- \u2500\u2500 Closing Note \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 -->\r\n  <div class=\"mldp-ph-note mldp-ph-reveal\" style=\"margin-top:4rem;\">\r\n    <div class=\"mldp-ph-note-icon\" aria-hidden=\"true\">\r\n      <svg viewBox=\"0 0 24 24\">\r\n        <path d=\"M12 3l7 4v10l-7 4-7-4V7l7-4z\"\/>\r\n        <polyline points=\"9.5 12 11.2 13.7 14.8 10\"\/>\r\n      <\/svg>\r\n    <\/div>\r\n    <div class=\"mldp-ph-note-body\">\r\n      <strong>Ready to begin your project?<\/strong>\r\n      <p>\r\n        Each phase above can be expanded into its own dedicated detail page as the project grows.\r\n        The links in each section are ready to be updated with your chosen URLs at any time \u2014\r\n        no rebuilding required. When you are ready to move forward, every piece of this process\r\n        is already in place.\r\n      <\/p>\r\n    <\/div>\r\n  <\/div>\r\n \r\n<\/div><!-- \/.mldp-ph -->\r\n \r\n<script>\r\n(function () {\r\n  \/* \u2500\u2500 Scroll reveal \u2500\u2500 *\/\r\n  var reveals = document.querySelectorAll('.mldp-ph-reveal');\r\n  if ('IntersectionObserver' in window) {\r\n    var obs = new IntersectionObserver(function (entries) {\r\n      entries.forEach(function (e) {\r\n        if (e.isIntersecting) {\r\n          e.target.classList.add('mldp-ph-in');\r\n          obs.unobserve(e.target);\r\n        }\r\n      });\r\n    }, { threshold: 0.08, rootMargin: '0px 0px -24px 0px' });\r\n    reveals.forEach(function (el) { obs.observe(el); });\r\n  } else {\r\n    reveals.forEach(function (el) { el.classList.add('mldp-ph-in'); });\r\n  }\r\n \r\n  \/* \u2500\u2500 Active nav highlight on scroll \u2500\u2500 *\/\r\n  var sections = document.querySelectorAll('.mldp-ph-phase[id]');\r\n  var navItems = document.querySelectorAll('.mldp-ph-nav-item');\r\n \r\n  function onScroll () {\r\n    var scrollMid = window.scrollY + window.innerHeight * 0.4;\r\n    var current = '';\r\n    sections.forEach(function (sec) {\r\n      if (sec.offsetTop <= scrollMid) current = sec.id;\r\n    });\r\n    navItems.forEach(function (item) {\r\n      var target = item.getAttribute('href').replace('#', '');\r\n      item.classList.toggle('active', target === current);\r\n    });\r\n  }\r\n \r\n  window.addEventListener('scroll', onScroll, { passive: true });\r\n  onScroll();\r\n \r\n  \/* \u2500\u2500 Smooth scroll for nav links \u2500\u2500 *\/\r\n  navItems.forEach(function (item) {\r\n    item.addEventListener('click', function (e) {\r\n      var id = item.getAttribute('href').replace('#', '');\r\n      var target = document.getElementById(id);\r\n      if (target) {\r\n        e.preventDefault();\r\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Mld five phases \u00b7 HTML Copy Portfolio \u203a Rexanna&#8217;s Foundation \u203a Our Process Case Study \u2014 How We Build Five Phases ofIntentional Design Every website we build follows the same disciplined path \u2014 from listening deeply to launching with confidence. Here is a clear view of each phase, what it involves, and what it produces. [&hellip;]<\/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-132","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/pages\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":4,"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/pages\/132\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/pages\/132\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/test.madrelunadesigns.com\/index.php\/wp-json\/wp\/v2\/media?parent=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}