{"id":7,"date":"2026-04-11T13:41:23","date_gmt":"2026-04-11T13:41:23","guid":{"rendered":"https:\/\/thedesign24.com\/?page_id=7"},"modified":"2026-04-11T14:04:59","modified_gmt":"2026-04-11T14:04:59","slug":"home","status":"publish","type":"page","link":"https:\/\/thedesign24.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65c7e63 e-con-full e-flex e-con e-parent\" data-id=\"65c7e63\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4903c3 elementor-widget elementor-widget-html\" data-id=\"a4903c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Neue+Montreal:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ============================================\n   DESIGN SYSTEM \u2014 THE DESIGN 24 (SCOPED FOR ELEMENTOR)\n   ============================================ *\/\n:root {\n  --black:      #0A0A0A;\n  --off-black:  #111111;\n  --charcoal:   #1C1C1C;\n  --mid:        #3A3A3A;\n  --muted:      #7A7A7A;\n  --light:      #C8C8C0;\n  --cream:      #F2F0EB;\n  --white:      #FAFAF8;\n  --gold:       #C9A96E;\n  --gold-dim:   #A8885A;\n  --accent:     #E8E0D0;\n\n  --font-serif: 'Cormorant Garamond', Georgia, serif;\n  --font-body:  'DM Sans', sans-serif;\n  --font-mono:  'Courier New', monospace;\n\n  --space-xs:   0.5rem;\n  --space-sm:   1rem;\n  --space-md:   2rem;\n  --space-lg:   4rem;\n  --space-xl:   8rem;\n  --space-2xl:  12rem;\n\n  --radius:     2px;\n  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\/* Scope resets strictly to this app *\/\n#design24-app *, #design24-app *::before, #design24-app *::after { \n  box-sizing: border-box; margin: 0; padding: 0; \n}\n\n#design24-app {\n  background: var(--black);\n  color: var(--white);\n  font-family: var(--font-body);\n  font-weight: 300;\n  line-height: 1.7;\n  overflow-x: hidden;\n  cursor: none;\n  font-size: 16px;\n  position: relative;\n  width: 100%;\n}\n\n\/* Custom Cursor *\/\n#design24-app .cursor {\n  width: 8px; height: 8px;\n  background: var(--gold);\n  border-radius: 50%;\n  position: fixed; top: 0; left: 0;\n  pointer-events: none; z-index: 9999;\n  transition: transform 0.15s ease;\n}\n#design24-app .cursor-ring {\n  width: 36px; height: 36px;\n  border: 1px solid rgba(201,169,110,0.4);\n  border-radius: 50%;\n  position: fixed; top: 0; left: 0;\n  pointer-events: none; z-index: 9998;\n  transition: transform 0.08s linear, width 0.3s, height 0.3s, border-color 0.3s;\n}\n#design24-app:hover .cursor-ring { border-color: rgba(201,169,110,0.6); }\n\n\/* Typography Scale *\/\n#design24-app .t-display {\n  font-family: var(--font-serif);\n  font-size: clamp(3.5rem, 8vw, 9rem);\n  font-weight: 300;\n  line-height: 0.95;\n  letter-spacing: -0.02em;\n}\n#design24-app .t-h1 {\n  font-family: var(--font-serif);\n  font-size: clamp(2.5rem, 5vw, 6rem);\n  font-weight: 300;\n  line-height: 1.0;\n  letter-spacing: -0.02em;\n}\n#design24-app .t-h2 {\n  font-family: var(--font-serif);\n  font-size: clamp(2rem, 3.5vw, 4rem);\n  font-weight: 300;\n  line-height: 1.1;\n}\n#design24-app .t-h3 {\n  font-family: var(--font-serif);\n  font-size: clamp(1.4rem, 2.5vw, 2.4rem);\n  font-weight: 300;\n  line-height: 1.2;\n}\n#design24-app .t-label {\n  font-family: var(--font-body);\n  font-size: 0.7rem;\n  font-weight: 400;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: var(--gold);\n}\n#design24-app .t-body { font-size: 1rem; line-height: 1.8; color: var(--light); }\n#design24-app .t-body-sm { font-size: 0.875rem; line-height: 1.7; color: var(--muted); }\n#design24-app .italic { font-style: italic; }\n\n\/* Layout *\/\n#design24-app .container {\n  max-width: 1440px;\n  margin: 0 auto;\n  padding: 0 clamp(1.5rem, 5vw, 6rem);\n}\n#design24-app .container-narrow {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 0 clamp(1.5rem, 5vw, 6rem);\n}\n#design24-app .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }\n#design24-app .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }\n#design24-app .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-md); }\n@media(max-width:900px) {\n  #design24-app .grid-2, #design24-app .grid-3, #design24-app .grid-4 { grid-template-columns: 1fr; }\n}\n@media(max-width:1100px) {\n  #design24-app .grid-4 { grid-template-columns: 1fr 1fr; }\n}\n\n\/* Divider *\/\n#design24-app .rule { width: 100%; height: 1px; background: rgba(255,255,255,0.08); }\n#design24-app .rule-gold { width: 48px; height: 1px; background: var(--gold); }\n\n\/* Buttons *\/\n#design24-app .btn {\n  display: inline-flex; align-items: center; gap: 0.75rem;\n  font-family: var(--font-body);\n  font-size: 0.75rem; font-weight: 400;\n  letter-spacing: 0.15em; text-transform: uppercase;\n  text-decoration: none;\n  transition: var(--transition);\n  cursor: none;\n}\n#design24-app .btn-primary {\n  background: var(--gold); color: var(--black);\n  padding: 1.1rem 2.5rem;\n  position: relative; overflow: hidden;\n}\n#design24-app .btn-primary::after {\n  content: ''; position: absolute; inset: 0;\n  background: var(--white); transform: translateX(-101%);\n  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);\n}\n#design24-app .btn-primary:hover::after { transform: translateX(0); }\n#design24-app .btn-primary:hover { color: var(--black); }\n#design24-app .btn-primary span { position: relative; z-index: 1; }\n#design24-app .btn-outline {\n  border: 1px solid rgba(255,255,255,0.25);\n  color: var(--white);\n  padding: 1.1rem 2.5rem;\n}\n#design24-app .btn-outline:hover { border-color: var(--gold); color: var(--gold); }\n#design24-app .btn-text { color: var(--gold); padding: 0; }\n#design24-app .btn-text .arrow { transition: transform 0.3s; }\n#design24-app .btn-text:hover .arrow { transform: translateX(6px); }\n\n\/* Page sections hidden by default \u2014 shown via JS routing *\/\n#design24-app .page { display: none; }\n#design24-app .page.active { display: block; }\n\n\/* ================================================\n   NAVIGATION\n   ================================================ *\/\n#design24-app nav {\n  position: fixed; top: 0; left: 0; right: 0;\n  z-index: 100;\n  padding: 2rem clamp(1.5rem, 5vw, 6rem);\n  display: flex; align-items: center; justify-content: space-between;\n  transition: background 0.4s, padding 0.4s;\n}\n#design24-app nav.scrolled {\n  background: rgba(10,10,10,0.96);\n  backdrop-filter: blur(20px);\n  padding: 1.25rem clamp(1.5rem, 5vw, 6rem);\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n#design24-app .nav-logo {\n  font-family: var(--font-serif);\n  font-size: 1.3rem;\n  font-weight: 300;\n  letter-spacing: 0.05em;\n  color: var(--white);\n  text-decoration: none;\n  cursor: none;\n}\n#design24-app .nav-logo span { color: var(--gold); }\n#design24-app .nav-links {\n  display: flex; align-items: center; gap: 3rem;\n  list-style: none;\n}\n#design24-app .nav-links a {\n  font-size: 0.72rem; font-weight: 400;\n  letter-spacing: 0.15em; text-transform: uppercase;\n  color: var(--light); text-decoration: none;\n  transition: color 0.3s;\n  cursor: none;\n  position: relative;\n}\n#design24-app .nav-links a::after {\n  content: ''; position: absolute; bottom: -3px; left: 0;\n  width: 0; height: 1px; background: var(--gold);\n  transition: width 0.3s;\n}\n#design24-app .nav-links a:hover::after, #design24-app .nav-links a.active-link::after { width: 100%; }\n#design24-app .nav-links a:hover, #design24-app .nav-links a.active-link { color: var(--gold); }\n#design24-app .nav-cta {\n  font-size: 0.7rem; font-weight: 400;\n  letter-spacing: 0.15em; text-transform: uppercase;\n  border: 1px solid rgba(201,169,110,0.5);\n  color: var(--gold); padding: 0.7rem 1.5rem;\n  text-decoration: none; transition: var(--transition);\n  cursor: none;\n}\n#design24-app .nav-cta:hover { background: var(--gold); color: var(--black); }\n#design24-app .hamburger { display: none; flex-direction: column; gap: 5px; cursor: none; }\n#design24-app .hamburger span { width: 24px; height: 1px; background: var(--white); transition: 0.3s; }\n@media(max-width:900px) {\n  #design24-app .nav-links, #design24-app .nav-cta { display: none; }\n  #design24-app .hamburger { display: flex; }\n}\n\n\/* ================================================\n   HOME PAGE\n   ================================================ *\/\n\/* Hero *\/\n#design24-app .hero {\n  min-height: 100vh;\n  display: flex; flex-direction: column; justify-content: flex-end;\n  padding: 0 clamp(1.5rem, 5vw, 6rem) var(--space-lg);\n  position: relative; overflow: hidden;\n}\n#design24-app .hero-bg {\n  position: absolute; inset: 0;\n  background: \n    radial-gradient(ellipse 60% 60% at 75% 30%, rgba(201,169,110,0.07) 0%, transparent 60%),\n    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(201,169,110,0.04) 0%, transparent 50%),\n    linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.3) 100%);\n}\n#design24-app .hero-grid {\n  position: absolute; inset: 0;\n  background-image: \n    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);\n  background-size: 80px 80px;\n}\n#design24-app .hero-badge {\n  display: inline-flex; align-items: center; gap: 0.75rem;\n  margin-bottom: 3rem;\n}\n#design24-app .hero-badge-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }\n#design24-app .hero-headline {\n  font-family: var(--font-serif);\n  font-size: clamp(4.5rem, 10vw, 11rem);\n  font-weight: 300;\n  line-height: 0.92;\n  letter-spacing: -0.03em;\n  max-width: 1100px;\n  margin-bottom: 3rem;\n}\n#design24-app .hero-headline .line-2 { margin-left: clamp(2rem, 10vw, 14rem); color: var(--cream); }\n#design24-app .hero-headline em { font-style: italic; color: var(--gold); }\n#design24-app .hero-bottom {\n  display: flex; align-items: flex-end;\n  justify-content: space-between; gap: 2rem;\n  flex-wrap: wrap;\n}\n#design24-app .hero-sub { max-width: 420px; color: var(--light); font-size: 1rem; line-height: 1.8; }\n#design24-app .hero-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }\n#design24-app .hero-scroll {\n  position: absolute; right: clamp(1.5rem, 5vw, 6rem); top: 50%;\n  transform: translateY(-50%);\n  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;\n}\n#design24-app .hero-scroll-text {\n  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;\n  color: var(--muted); writing-mode: vertical-rl;\n}\n#design24-app .hero-scroll-line {\n  width: 1px; height: 60px; background: linear-gradient(var(--gold), transparent);\n  animation: scrollPulse 2s ease infinite;\n}\n@keyframes scrollPulse {\n  0%,100% { opacity: 0.4; transform: scaleY(1); }\n  50% { opacity: 1; transform: scaleY(1.2); }\n}\n\n\/* Marquee *\/\n#design24-app .marquee-section {\n  border-top: 1px solid rgba(255,255,255,0.06);\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n  overflow: hidden; padding: 1.5rem 0; background: var(--off-black);\n}\n#design24-app .marquee-track { display: flex; gap: 4rem; animation: marquee 20s linear infinite; white-space: nowrap; }\n#design24-app .marquee-item { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }\n#design24-app .marquee-sep { color: var(--gold); }\n@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\n\n\/* Section Base *\/\n#design24-app section { padding: var(--space-xl) 0; }\n\n\/* About Strip *\/\n#design24-app .about-strip { background: var(--off-black); }\n#design24-app .about-strip-inner {\n  display: grid; grid-template-columns: 1fr 1.6fr;\n  gap: var(--space-lg); align-items: center;\n}\n@media(max-width:768px) { #design24-app .about-strip-inner { grid-template-columns: 1fr; } }\n#design24-app .about-strip-number {\n  font-family: var(--font-serif);\n  font-size: clamp(6rem, 12vw, 14rem);\n  font-weight: 300; color: rgba(201,169,110,0.12);\n  line-height: 1; letter-spacing: -0.04em;\n}\n\n\/* Services Grid *\/\n#design24-app .services-preview .t-label { margin-bottom: 4rem; }\n#design24-app .services-grid {\n  display: grid;\n  grid-template-columns: repeat(4,1fr);\n  border-top: 1px solid rgba(255,255,255,0.08);\n}\n@media(max-width:900px) { #design24-app .services-grid { grid-template-columns: 1fr 1fr; } }\n@media(max-width:550px) { #design24-app .services-grid { grid-template-columns: 1fr; } }\n#design24-app .service-card {\n  padding: 3rem 2rem;\n  border-right: 1px solid rgba(255,255,255,0.08);\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  transition: background 0.35s;\n  position: relative; overflow: hidden;\n}\n#design24-app .service-card:last-child { border-right: none; }\n#design24-app .service-card::before {\n  content: ''; position: absolute; bottom: 0; left: 0;\n  width: 0; height: 2px; background: var(--gold);\n  transition: width 0.5s;\n}\n#design24-app .service-card:hover::before { width: 100%; }\n#design24-app .service-card:hover { background: rgba(201,169,110,0.04); }\n#design24-app .service-num {\n  font-family: var(--font-mono);\n  font-size: 0.65rem; color: var(--gold); margin-bottom: 2rem;\n}\n#design24-app .service-icon { font-size: 2rem; margin-bottom: 1.5rem; }\n#design24-app .service-title {\n  font-family: var(--font-serif); font-size: 1.4rem;\n  font-weight: 300; margin-bottom: 1rem; line-height: 1.3;\n}\n#design24-app .service-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }\n\n\/* Work Preview *\/\n#design24-app .work-preview { background: var(--off-black); }\n#design24-app .work-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; grid-template-rows: auto auto; gap: 2px; }\n@media(max-width:768px) { #design24-app .work-grid { grid-template-columns: 1fr; } }\n#design24-app .work-item {\n  position: relative; overflow: hidden;\n  background: var(--charcoal); cursor: none;\n}\n#design24-app .work-item-large { grid-row: 1 \/ 3; }\n#design24-app .work-placeholder {\n  aspect-ratio: 4\/3;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--charcoal);\n  position: relative;\n}\n#design24-app .work-item-large .work-placeholder { aspect-ratio: unset; min-height: 500px; }\n#design24-app .work-bg-pattern {\n  position: absolute; inset: 0;\n  opacity: 0.15;\n}\n#design24-app .work-overlay {\n  position: absolute; inset: 0;\n  background: linear-gradient(0deg, rgba(10,10,10,0.9) 0%, transparent 60%);\n  opacity: 0; transition: opacity 0.4s;\n}\n#design24-app .work-item:hover .work-overlay { opacity: 1; }\n#design24-app .work-info {\n  position: absolute; bottom: 0; left: 0; right: 0;\n  padding: 2.5rem;\n  transform: translateY(10px); transition: transform 0.4s;\n}\n#design24-app .work-item:hover .work-info { transform: translateY(0); }\n#design24-app .work-cat { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }\n#design24-app .work-name { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 300; margin-top: 0.5rem; }\n#design24-app .work-num-display {\n  position: absolute; top: 2rem; right: 2rem;\n  font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted);\n}\n\n\/* Approach section *\/\n#design24-app .approach-inner {\n  display: grid; grid-template-columns: 1fr 1.5fr;\n  gap: var(--space-xl); align-items: start;\n}\n@media(max-width:768px) { #design24-app .approach-inner { grid-template-columns: 1fr; } }\n#design24-app .approach-steps { display: flex; flex-direction: column; gap: 0; }\n#design24-app .approach-step {\n  padding: 2.5rem 0;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  display: grid; grid-template-columns: 3rem 1fr;\n  gap: 1.5rem; align-items: start;\n}\n#design24-app .step-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--gold); padding-top: 0.2rem; }\n#design24-app .step-title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 300; margin-bottom: 0.5rem; }\n#design24-app .step-desc { font-size: 0.85rem; color: var(--muted); }\n\n\/* Stats row *\/\n#design24-app .stats-row {\n  display: grid; grid-template-columns: repeat(4,1fr);\n  gap: 0;\n  border-top: 1px solid rgba(255,255,255,0.08);\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  background: var(--off-black);\n}\n@media(max-width:768px) { #design24-app .stats-row { grid-template-columns: 1fr 1fr; } }\n#design24-app .stat-item {\n  padding: 4rem 3rem;\n  border-right: 1px solid rgba(255,255,255,0.08);\n  text-align: center;\n}\n#design24-app .stat-item:last-child { border-right: none; }\n#design24-app .stat-num {\n  font-family: var(--font-serif);\n  font-size: clamp(2.5rem, 5vw, 5rem);\n  font-weight: 300; color: var(--gold);\n  letter-spacing: -0.02em; line-height: 1;\n  display: block; margin-bottom: 0.75rem;\n}\n#design24-app .stat-label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }\n\n\/* Testimonial *\/\n#design24-app .testimonial-section { background: var(--charcoal); }\n#design24-app .testimonial-inner {\n  display: grid; grid-template-columns: 1fr 2fr;\n  gap: var(--space-xl); align-items: center;\n}\n@media(max-width:768px) { #design24-app .testimonial-inner { grid-template-columns: 1fr; } }\n#design24-app .quote-mark {\n  font-family: var(--font-serif); font-size: 8rem;\n  color: var(--gold); line-height: 1; opacity: 0.3;\n}\n#design24-app .testimonial-text {\n  font-family: var(--font-serif);\n  font-size: clamp(1.3rem, 2.5vw, 2rem);\n  font-weight: 300; font-style: italic;\n  line-height: 1.5; color: var(--cream);\n  margin-bottom: 2rem;\n}\n#design24-app .testimonial-author { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); }\n\n\/* CTA Banner *\/\n#design24-app .cta-banner {\n  background: var(--gold); color: var(--black);\n  padding: var(--space-xl) 0;\n  text-align: center;\n}\n#design24-app .cta-banner .t-h2 { color: var(--black); margin-bottom: 1.5rem; }\n#design24-app .cta-banner .t-body { color: rgba(10,10,10,0.7); margin-bottom: 3rem; }\n#design24-app .btn-dark { background: var(--black); color: var(--gold); padding: 1.1rem 2.5rem; display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: 0.3s; cursor: none; }\n#design24-app .btn-dark:hover { background: var(--charcoal); }\n\n\/* ABOUT PAGE *\/\n#design24-app .page-hero {\n  min-height: 75vh;\n  display: flex; flex-direction: column; justify-content: flex-end;\n  padding: 0 clamp(1.5rem, 5vw, 6rem) var(--space-lg);\n  position: relative;\n  padding-top: 120px;\n}\n#design24-app .page-hero-bg {\n  position: absolute; inset: 0;\n  background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(201,169,110,0.06) 0%, transparent 60%);\n}\n#design24-app .about-philosophy {\n  display: grid; grid-template-columns: 1fr 1fr;\n  gap: var(--space-xl); align-items: start;\n}\n@media(max-width:768px) { #design24-app .about-philosophy { grid-template-columns: 1fr; } }\n#design24-app .philosophy-text .t-h3 { margin-bottom: 1.5rem; }\n#design24-app .philosophy-text p { font-size: 1rem; color: var(--light); line-height: 1.9; margin-bottom: 1.5rem; }\n\n#design24-app .values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.06); }\n@media(max-width:768px) { #design24-app .values-grid { grid-template-columns: 1fr; } }\n#design24-app .value-block { background: var(--black); padding: 3rem 2.5rem; }\n#design24-app .value-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--gold); margin-bottom: 2rem; }\n#design24-app .value-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 300; margin-bottom: 1rem; }\n#design24-app .value-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.7; }\n\n#design24-app .team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); }\n@media(max-width:768px) { #design24-app .team-grid { grid-template-columns: 1fr; } }\n#design24-app .team-member {\n  background: var(--off-black);\n  padding: 2.5rem;\n  border: 1px solid rgba(255,255,255,0.06);\n  transition: border-color 0.3s;\n}\n#design24-app .team-member:hover { border-color: rgba(201,169,110,0.3); }\n#design24-app .member-avatar {\n  width: 64px; height: 64px; border-radius: 50%;\n  background: var(--charcoal); margin-bottom: 1.5rem;\n  display: flex; align-items: center; justify-content: center;\n  font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold);\n}\n#design24-app .member-name { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 300; }\n#design24-app .member-role { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: 0.25rem; }\n#design24-app .member-bio { font-size: 0.85rem; color: var(--muted); margin-top: 1.5rem; line-height: 1.7; }\n\n\/* SERVICES PAGE *\/\n#design24-app .services-pillars { display: flex; flex-direction: column; gap: 0; }\n#design24-app .pillar {\n  display: grid; grid-template-columns: 0.4fr 0.6fr 1fr;\n  gap: 0; align-items: stretch;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  transition: background 0.3s;\n}\n#design24-app .pillar:hover { background: rgba(255,255,255,0.02); }\n@media(max-width:900px) { #design24-app .pillar { grid-template-columns: 1fr; } }\n#design24-app .pillar-left { padding: 5rem 4rem; border-right: 1px solid rgba(255,255,255,0.08); }\n#design24-app .pillar-mid { padding: 5rem 4rem; border-right: 1px solid rgba(255,255,255,0.08); }\n#design24-app .pillar-right { padding: 5rem 4rem; }\n@media(max-width:900px) { #design24-app .pillar-left, #design24-app .pillar-mid, #design24-app .pillar-right { padding: 3rem 2rem; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); } }\n#design24-app .pillar-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--gold); margin-bottom: 2rem; }\n#design24-app .pillar-title { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 300; line-height: 1.1; }\n#design24-app .pillar-subtitle { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-top: 1rem; }\n#design24-app .pillar-overview { font-size: 1rem; color: var(--light); line-height: 1.8; margin-bottom: 2rem; }\n#design24-app .pillar-outcomes { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }\n#design24-app .pillar-outcomes li { font-size: 0.875rem; color: var(--muted); padding-left: 1.5rem; position: relative; }\n#design24-app .pillar-outcomes li::before { content: '\u2192'; position: absolute; left: 0; color: var(--gold); font-size: 0.75rem; }\n#design24-app .process-steps { display: flex; flex-direction: column; gap: 1.5rem; }\n#design24-app .process-step { display: flex; gap: 1.5rem; align-items: flex-start; }\n#design24-app .ps-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--gold); min-width: 2rem; padding-top: 0.2rem; }\n#design24-app .ps-content {}\n#design24-app .ps-title { font-size: 0.875rem; font-weight: 400; margin-bottom: 0.25rem; }\n#design24-app .ps-desc { font-size: 0.8rem; color: var(--muted); }\n\n\/* WORK \/ PORTFOLIO PAGE *\/\n#design24-app .work-filters {\n  display: flex; gap: 2rem; flex-wrap: wrap;\n  margin-bottom: 4rem;\n}\n#design24-app .filter-btn {\n  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;\n  color: var(--muted); background: none; border: none;\n  cursor: none; transition: color 0.3s; font-family: var(--font-body);\n  padding-bottom: 4px; border-bottom: 1px solid transparent;\n}\n#design24-app .filter-btn.active, #design24-app .filter-btn:hover { color: var(--gold); border-bottom-color: var(--gold); }\n\n#design24-app .case-studies { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.06); }\n@media(max-width:768px) { #design24-app .case-studies { grid-template-columns: 1fr; } }\n#design24-app .case-study {\n  background: var(--black);\n  padding: 4rem;\n  transition: background 0.3s; cursor: none;\n}\n#design24-app .case-study:hover { background: var(--off-black); }\n#design24-app .cs-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3rem; }\n#design24-app .cs-cat { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }\n#design24-app .cs-year { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); }\n#design24-app .cs-visual {\n  height: 220px; background: var(--charcoal);\n  margin-bottom: 3rem; position: relative; overflow: hidden;\n  display: flex; align-items: center; justify-content: center;\n}\n#design24-app .cs-pattern {\n  position: absolute; inset: 0; opacity: 0.2;\n}\n#design24-app .cs-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; margin-bottom: 1.5rem; }\n#design24-app .cs-tags { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }\n#design24-app .cs-tag { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.75rem; border: 1px solid rgba(255,255,255,0.12); color: var(--muted); }\n#design24-app .cs-excerpt { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }\n#design24-app .cs-impact {\n  margin-top: 2.5rem; padding-top: 2.5rem;\n  border-top: 1px solid rgba(255,255,255,0.08);\n  display: flex; gap: 3rem;\n}\n#design24-app .impact-figure { }\n#design24-app .impact-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 300; color: var(--gold); line-height: 1; }\n#design24-app .impact-label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.25rem; }\n\n\/* CONTACT PAGE *\/\n#design24-app .contact-layout {\n  display: grid; grid-template-columns: 1fr 1.2fr;\n  gap: var(--space-xl); align-items: start;\n}\n@media(max-width:768px) { #design24-app .contact-layout { grid-template-columns: 1fr; } }\n#design24-app .contact-left { }\n#design24-app .contact-left .t-h2 { margin-bottom: 2rem; }\n#design24-app .contact-left .t-body { margin-bottom: 3rem; }\n#design24-app .contact-details { display: flex; flex-direction: column; gap: 2.5rem; }\n#design24-app .contact-detail-item {}\n#design24-app .cd-label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }\n#design24-app .cd-value { font-size: 1rem; color: var(--light); }\n#design24-app .cd-value a { color: var(--light); text-decoration: none; transition: color 0.3s; cursor: none; }\n#design24-app .cd-value a:hover { color: var(--gold); }\n\n#design24-app .contact-form { display: flex; flex-direction: column; gap: 0; }\n#design24-app .form-field { position: relative; margin-bottom: 2px; }\n#design24-app .form-input, #design24-app .form-textarea, #design24-app .form-select {\n  width: 100%; background: var(--off-black);\n  border: none; border-bottom: 1px solid rgba(255,255,255,0.1);\n  color: var(--white); font-family: var(--font-body);\n  font-size: 0.95rem; font-weight: 300;\n  padding: 1.75rem 1.5rem 1.25rem;\n  transition: border-color 0.3s, background 0.3s;\n  outline: none; appearance: none;\n}\n#design24-app .form-input:focus, #design24-app .form-textarea:focus, #design24-app .form-select:focus {\n  background: var(--charcoal);\n  border-bottom-color: var(--gold);\n}\n#design24-app .form-textarea { min-height: 180px; resize: vertical; }\n#design24-app .form-label {\n  position: absolute; top: 1.5rem; left: 1.5rem;\n  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;\n  color: var(--muted); pointer-events: none; transition: 0.3s;\n}\n#design24-app .form-input:focus ~ .form-label, #design24-app .form-input:not(:placeholder-shown) ~ .form-label { top: 0.6rem; font-size: 0.55rem; color: var(--gold); }\n#design24-app .form-textarea:focus ~ .form-label { top: 0.6rem; font-size: 0.55rem; color: var(--gold); }\n#design24-app .form-submit {\n  margin-top: 2rem;\n  background: var(--gold); color: var(--black);\n  border: none; font-family: var(--font-body);\n  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;\n  padding: 1.4rem 3rem; cursor: none; transition: 0.3s;\n  width: 100%;\n}\n#design24-app .form-submit:hover { background: var(--white); }\n\n\/* FOOTER *\/\n#design24-app footer {\n  background: var(--off-black);\n  border-top: 1px solid rgba(255,255,255,0.06);\n  padding: var(--space-lg) 0 var(--space-md);\n}\n#design24-app .footer-top {\n  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;\n  gap: var(--space-md); padding-bottom: var(--space-lg);\n  border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n@media(max-width:900px) { #design24-app .footer-top { grid-template-columns: 1fr 1fr; } }\n@media(max-width:550px) { #design24-app .footer-top { grid-template-columns: 1fr; } }\n#design24-app .footer-brand .nav-logo { display: block; margin-bottom: 1.5rem; font-size: 1.4rem; }\n#design24-app .footer-brand p { font-size: 0.875rem; color: var(--muted); max-width: 280px; line-height: 1.7; }\n#design24-app .footer-col h5 { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }\n#design24-app .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }\n#design24-app .footer-col ul li a { font-size: 0.875rem; color: var(--muted); text-decoration: none; transition: color 0.3s; cursor: none; }\n#design24-app .footer-col ul li a:hover { color: var(--white); }\n#design24-app .footer-bottom {\n  padding-top: var(--space-md);\n  display: flex; align-items: center; justify-content: space-between;\n  flex-wrap: wrap; gap: 1rem;\n}\n#design24-app .footer-copy { font-size: 0.75rem; color: var(--muted); }\n#design24-app .footer-socials { display: flex; gap: 2rem; }\n#design24-app .footer-socials a { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.3s; cursor: none; }\n#design24-app .footer-socials a:hover { color: var(--gold); }\n\n\/* Loader *\/\n#design24-app .loader {\n  position: absolute; inset: 0; z-index: 10000;\n  background: var(--black);\n  display: flex; align-items: center; justify-content: center;\n  flex-direction: column; gap: 2rem;\n  transition: opacity 0.8s, visibility 0.8s;\n}\n#design24-app .loader.hidden { opacity: 0; visibility: hidden; }\n#design24-app .loader-logo { font-family: var(--font-serif); font-size: 2rem; font-weight: 300; letter-spacing: 0.1em; }\n#design24-app .loader-logo span { color: var(--gold); }\n#design24-app .loader-bar { width: 200px; height: 1px; background: rgba(255,255,255,0.1); overflow: hidden; }\n#design24-app .loader-fill { height: 100%; background: var(--gold); animation: load 1.5s ease forwards; }\n@keyframes load { 0% { width: 0; } 100% { width: 100%; } }\n\n\/* Animations *\/\n#design24-app .fade-up {\n  opacity: 0; transform: translateY(30px);\n  transition: opacity 0.8s ease, transform 0.8s ease;\n}\n#design24-app .fade-up.visible { opacity: 1; transform: translateY(0); }\n#design24-app .fade-up:nth-child(2) { transition-delay: 0.1s; }\n#design24-app .fade-up:nth-child(3) { transition-delay: 0.2s; }\n#design24-app .fade-up:nth-child(4) { transition-delay: 0.3s; }\n\n\/* Utility *\/\n#design24-app .mt-sm { margin-top: var(--space-sm); }\n#design24-app .mt-md { margin-top: var(--space-md); }\n#design24-app .mt-lg { margin-top: var(--space-lg); }\n#design24-app .mb-sm { margin-bottom: var(--space-sm); }\n#design24-app .mb-md { margin-bottom: var(--space-md); }\n#design24-app .mb-lg { margin-bottom: var(--space-lg); }\n#design24-app .text-center { text-align: center; }\n#design24-app .text-gold { color: var(--gold); }\n#design24-app .bg-off { background: var(--off-black); }\n\n\/* Noise overlay *\/\n#design24-app::after {\n  content: '';\n  position: absolute; inset: 0;\n  background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'\/%3E%3C\/svg%3E\");\n  opacity: 0.025; pointer-events: none; z-index: 1000;\n}\n<\/style>\n\n<div id=\"design24-app\">\n    <div class=\"cursor\" id=\"cursor\"><\/div>\n    <div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\n\n    <div class=\"loader\" id=\"loader\">\n      <div class=\"loader-logo\">The Design <span>24<\/span><\/div>\n      <div class=\"loader-bar\"><div class=\"loader-fill\"><\/div><\/div>\n    <\/div>\n\n    <nav id=\"mainNav\">\n      <a class=\"nav-logo\" href=\"#\" onclick=\"showPage('home')\">The Design <span>24<\/span><\/a>\n      <ul class=\"nav-links\">\n        <li><a href=\"#\" onclick=\"showPage('home')\" id=\"nav-home\">Home<\/a><\/li>\n        <li><a href=\"#\" onclick=\"showPage('about')\" id=\"nav-about\">About<\/a><\/li>\n        <li><a href=\"#\" onclick=\"showPage('services')\" id=\"nav-services\">Services<\/a><\/li>\n        <li><a href=\"#\" onclick=\"showPage('work')\" id=\"nav-work\">Work<\/a><\/li>\n        <li><a href=\"#\" onclick=\"showPage('contact')\" id=\"nav-contact\">Contact<\/a><\/li>\n      <\/ul>\n      <a class=\"nav-cta\" href=\"#\" onclick=\"showPage('contact')\">Start a Project<\/a>\n      <div class=\"hamburger\" id=\"hamburger\">\n        <span><\/span><span><\/span><span><\/span>\n      <\/div>\n    <\/nav>\n\n    <div class=\"page active\" id=\"home\">\n      \n      <section class=\"hero\">\n        <div class=\"hero-bg\"><\/div>\n        <div class=\"hero-grid\"><\/div>\n        \n        <div class=\"hero-badge fade-up\">\n          <div class=\"hero-badge-dot\"><\/div>\n          <span class=\"t-label\">Premium Creative Agency<\/span>\n        <\/div>\n        \n        <h1 class=\"hero-headline fade-up\">\n          Where<br>\n          <span class=\"line-2\">Strategy<br>\n          Meets <em>Form<\/em><\/span>\n        <\/h1>\n        \n        <div class=\"hero-bottom fade-up\">\n          <p class=\"hero-sub\">We build brands that lead markets. Not just visually\u2014structurally, strategically, and culturally. Every decision is earned.<\/p>\n          <div class=\"hero-actions\">\n           <a href=\"#\" class=\"btn btn-primary\" onclick=\"showPage('work')\"><span>View Our Work<\/span> <span>\u2197&#xFE0E;<\/span><\/a>\n            <a href=\"#\" class=\"btn btn-outline\" onclick=\"showPage('services')\"><span>Our Services<\/span><\/a>\n          <\/div>\n        <\/div>\n        \n        <div class=\"hero-scroll\">\n          <div class=\"hero-scroll-line\"><\/div>\n          <span class=\"hero-scroll-text\">Scroll<\/span>\n        <\/div>\n      <\/section>\n\n      <div class=\"marquee-section\">\n        <div class=\"marquee-track\">\n          <span class=\"marquee-item\">Brand Strategy<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Visual Identity<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Digital Experience<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Growth Marketing<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Product Design<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Brand Strategy<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Visual Identity<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Digital Experience<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Growth Marketing<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Product Design<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Brand Strategy<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n          <span class=\"marquee-item\">Visual Identity<\/span>\n          <span class=\"marquee-sep\">\u2726<\/span>\n        <\/div>\n      <\/div>\n\n      <section class=\"about-strip\">\n        <div class=\"container\">\n          <div class=\"about-strip-inner\">\n            <div class=\"about-strip-number fade-up\">24<\/div>\n            <div class=\"fade-up\">\n              <div class=\"t-label mb-md\">Our Purpose<\/div>\n              <h2 class=\"t-h2\" style=\"margin-bottom:2rem;\">We exist to close the gap between exceptional thinking and exceptional execution.<\/h2>\n              <p class=\"t-body\" style=\"margin-bottom:2.5rem;\">Most agencies deliver either clever ideas with poor craft, or beautiful work without direction. The Design 24 was built to eliminate that compromise. We are strategists who design, and designers who think strategically.<\/p>\n              <a href=\"#\" class=\"btn btn-text\" onclick=\"showPage('about')\">Learn About Us <span class=\"arrow\">\u2192<\/span><\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section class=\"services-preview\">\n        <div class=\"container\">\n          <div style=\"display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; flex-wrap:wrap; gap:2rem;\">\n            <div>\n              <div class=\"t-label mb-sm\">What We Do<\/div>\n              <h2 class=\"t-h2\">Four disciplines.<br>One unified vision.<\/h2>\n            <\/div>\n            <a href=\"#\" class=\"btn btn-text\" onclick=\"showPage('services')\">All Services <span class=\"arrow\">\u2192<\/span><\/a>\n          <\/div>\n          <div class=\"services-grid\">\n            <div class=\"service-card fade-up\">\n              <div class=\"service-num\">01<\/div>\n              <div class=\"service-icon\">\u25c8<\/div>\n              <div class=\"service-title\">Brand Strategy<\/div>\n              <p class=\"service-desc\">Market positioning, competitive intelligence, and brand architecture that gives your organisation an unfair advantage.<\/p>\n            <\/div>\n            <div class=\"service-card fade-up\">\n              <div class=\"service-num\">02<\/div>\n              <div class=\"service-icon\">\u25c9<\/div>\n              <div class=\"service-title\">Visual Identity<\/div>\n              <p class=\"service-desc\">Identity systems that communicate leadership before a word is spoken. Logos, typography, colour, motion, and beyond.<\/p>\n            <\/div>\n            <div class=\"service-card fade-up\">\n              <div class=\"service-num\">03<\/div>\n              <div class=\"service-icon\">\u25eb<\/div>\n              <div class=\"service-title\">Web & Product Design<\/div>\n              <p class=\"service-desc\">Digital experiences engineered to convert. From marketing websites to complex product interfaces built for real behaviour.<\/p>\n            <\/div>\n            <div class=\"service-card fade-up\">\n              <div class=\"service-num\">04<\/div>\n              <div class=\"service-icon\">\u25ce<\/div>\n              <div class=\"service-title\">Growth & Marketing<\/div>\n              <p class=\"service-desc\">Performance systems that compound. Audience strategy, content frameworks, and campaigns built around measurable outcomes.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section class=\"work-preview\">\n        <div class=\"container\">\n          <div style=\"display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; flex-wrap:wrap; gap:2rem;\">\n            <div>\n              <div class=\"t-label mb-sm\">Selected Work<\/div>\n              <h2 class=\"t-h2\">Work that moves<br>the needle.<\/h2>\n            <\/div>\n            <a href=\"#\" class=\"btn btn-text\" onclick=\"showPage('work')\">All Projects <span class=\"arrow\">\u2192<\/span><\/a>\n          <\/div>\n        <\/div>\n        <div style=\"padding:0 clamp(1.5rem,5vw,6rem);\">\n          <div class=\"work-grid\">\n            <div class=\"work-item work-item-large\">\n              <div class=\"work-placeholder\" style=\"background: linear-gradient(135deg, #1a1410 0%, #2d2218 50%, #1a1410 100%);\">\n                <svg class=\"work-bg-pattern\" viewBox=\"0 0 400 600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"200\" cy=\"200\" r=\"180\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.5\"\/><circle cx=\"200\" cy=\"200\" r=\"120\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.5\"\/><circle cx=\"200\" cy=\"200\" r=\"60\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.5\"\/><line x1=\"20\" y1=\"200\" x2=\"380\" y2=\"200\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><line x1=\"200\" y1=\"20\" x2=\"200\" y2=\"580\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><\/svg>\n              <\/div>\n              <div class=\"work-overlay\"><\/div>\n              <div class=\"work-num-display\">001<\/div>\n              <div class=\"work-info\">\n                <div class=\"work-cat\">Brand Identity & Strategy<\/div>\n                <div class=\"work-name\">Meridian Financial Group<\/div>\n              <\/div>\n            <\/div>\n            <div class=\"work-item\">\n              <div class=\"work-placeholder\" style=\"background: linear-gradient(135deg, #101818 0%, #0f1f1f 100%);\">\n                <svg class=\"work-bg-pattern\" viewBox=\"0 0 400 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"60\" y=\"60\" width=\"280\" height=\"180\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.5\"\/><rect x=\"90\" y=\"90\" width=\"220\" height=\"120\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><line x1=\"60\" y1=\"60\" x2=\"340\" y2=\"240\" stroke=\"#C9A96E\" stroke-width=\"0.2\"\/><\/svg>\n              <\/div>\n              <div class=\"work-overlay\"><\/div>\n              <div class=\"work-num-display\">002<\/div>\n              <div class=\"work-info\">\n                <div class=\"work-cat\">Digital Product<\/div>\n                <div class=\"work-name\">Vanta Health Platform<\/div>\n              <\/div>\n            <\/div>\n            <div class=\"work-item\">\n              <div class=\"work-placeholder\" style=\"background: linear-gradient(135deg, #18100f 0%, #1f1410 100%);\">\n                <svg class=\"work-bg-pattern\" viewBox=\"0 0 400 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><polygon points=\"200,40 360,260 40,260\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.5\"\/><polygon points=\"200,80 320,240 80,240\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><\/svg>\n              <\/div>\n              <div class=\"work-overlay\"><\/div>\n              <div class=\"work-num-display\">003<\/div>\n              <div class=\"work-info\">\n                <div class=\"work-cat\">Growth & Launch Strategy<\/div>\n                <div class=\"work-name\">Solace Lifestyle Brand<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section>\n        <div class=\"container\">\n          <div class=\"approach-inner\">\n            <div class=\"fade-up\">\n              <div class=\"t-label mb-md\">How We Work<\/div>\n              <h2 class=\"t-h2\" style=\"margin-bottom:2rem;\">Process that<br>earns trust.<\/h2>\n              <p class=\"t-body\" style=\"margin-bottom:3rem;\">Every engagement follows a disciplined sequence. No shortcuts, no assumptions. We move fast because our process is clear\u2014not because we skip steps.<\/p>\n              <a href=\"#\" class=\"btn btn-outline\" onclick=\"showPage('about')\">Our Philosophy<\/a>\n            <\/div>\n            <div class=\"approach-steps fade-up\">\n              <div class=\"approach-step\">\n                <div class=\"step-num\">01<\/div>\n                <div>\n                  <div class=\"step-title\">Diagnostic<\/div>\n                  <div class=\"step-desc\">We audit your brand, market position, and competitive landscape with rigorous honesty before we suggest a single direction.<\/div>\n                <\/div>\n              <\/div>\n              <div class=\"approach-step\">\n                <div class=\"step-num\">02<\/div>\n                <div>\n                  <div class=\"step-title\">Strategy<\/div>\n                  <div class=\"step-desc\">We define where you should compete, who you should speak to, and what your brand must mean in their lives.<\/div>\n                <\/div>\n              <\/div>\n              <div class=\"approach-step\">\n                <div class=\"step-num\">03<\/div>\n                <div>\n                  <div class=\"step-title\">Creation<\/div>\n                  <div class=\"step-desc\">Our creative team executes with precision\u2014every visual decision backed by the strategic layer beneath it.<\/div>\n                <\/div>\n              <\/div>\n              <div class=\"approach-step\">\n                <div class=\"step-num\">04<\/div>\n                <div>\n                  <div class=\"step-title\">Activation<\/div>\n                  <div class=\"step-desc\">We launch, measure, and optimise. Deliverables are a starting point\u2014outcomes are the standard.<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <div class=\"stats-row\">\n        <div class=\"stat-item fade-up\">\n          <span class=\"stat-num\">120+<\/span>\n          <div class=\"stat-label\">Brands Transformed<\/div>\n        <\/div>\n        <div class=\"stat-item fade-up\">\n          <span class=\"stat-num\">18<\/span>\n          <div class=\"stat-label\">Industries Served<\/div>\n        <\/div>\n        <div class=\"stat-item fade-up\">\n          <span class=\"stat-num\">340%<\/span>\n          <div class=\"stat-label\">Avg. Growth Uplift<\/div>\n        <\/div>\n        <div class=\"stat-item fade-up\">\n          <span class=\"stat-num\">96%<\/span>\n          <div class=\"stat-label\">Client Retention<\/div>\n        <\/div>\n      <\/div>\n\n      <section class=\"testimonial-section\">\n        <div class=\"container\">\n          <div class=\"testimonial-inner\">\n            <div class=\"quote-mark\">\"<\/div>\n            <div>\n              <p class=\"testimonial-text\">The Design 24 didn't just rebrand us. They rebuilt how we think about our market, our audience, and our own ambitions. The work speaks for itself\u2014but the thinking behind it is what changed everything.<\/p>\n              <div class=\"testimonial-author\">Adaeze Nwosu \u2014 CEO, Meridian Financial Group<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <div class=\"cta-banner\">\n        <div class=\"container\">\n          <h2 class=\"t-h2\">Ready to build<br><em style=\"font-style:italic;\">something significant?<\/em><\/h2>\n          <p class=\"t-body\">We take on a small number of new partners each quarter. Tell us about your ambitions.<\/p>\n          <a href=\"#\" class=\"btn-dark\" onclick=\"showPage('contact')\">Start a Conversation <span>\u2192<\/span><\/a>\n        <\/div>\n      <\/div>\n\n    <\/div><div class=\"page\" id=\"about\">\n      \n      <div style=\"padding-top: 120px;\"><\/div>\n\n      <section style=\"padding: 4rem 0 var(--space-xl);\">\n        <div class=\"container\">\n          <div class=\"t-label mb-md fade-up\">About The Design 24<\/div>\n          <h1 class=\"t-h1 fade-up\" style=\"max-width:900px; margin-bottom:3rem;\">\n            We believe creative work should change the trajectory of a business.\n          <\/h1>\n          <div class=\"rule\" style=\"margin-bottom:4rem;\"><\/div>\n          <div class=\"about-philosophy\">\n            <div class=\"fade-up\">\n              <div class=\"rule-gold mb-md\"><\/div>\n              <p style=\"font-family:var(--font-serif); font-size:clamp(1.2rem,2vw,1.6rem); font-weight:300; font-style:italic; color:var(--cream); line-height:1.5; margin-bottom:2rem;\">\"Most agencies solve for aesthetics. We solve for outcomes.\"<\/p>\n              <p class=\"t-body\" style=\"margin-bottom:1.5rem;\">The Design 24 was founded on a single conviction: that great strategy and great design are inseparable. Not sequential\u2014simultaneous. The best creative work is rooted in business logic, and the best business decisions are made with creative courage.<\/p>\n              <p class=\"t-body\">We work with founders, CMOs, and leadership teams who are building something genuinely significant\u2014and who understand that how you present your brand is an extension of how clearly you think.<\/p>\n            <\/div>\n            <div class=\"fade-up\">\n              <div class=\"t-label mb-md\">Our Philosophy<\/div>\n              <div class=\"approach-steps\">\n                <div class=\"approach-step\">\n                  <div class=\"step-num\">I<\/div>\n                  <div>\n                    <div class=\"step-title\">Strategy First, Always<\/div>\n                    <div class=\"step-desc\">Creative without direction is decoration. Every project begins with a strategic foundation\u2014because craft applied to the wrong problem is a beautiful waste.<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"approach-step\">\n                  <div class=\"step-num\">II<\/div>\n                  <div>\n                    <div class=\"step-title\">Radical Clarity<\/div>\n                    <div class=\"step-desc\">Complexity is the enemy of effectiveness. We distil complicated truths into clear, powerful expressions that audiences feel immediately.<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"approach-step\">\n                  <div class=\"step-num\">III<\/div>\n                  <div>\n                    <div class=\"step-title\">Earned Aesthetics<\/div>\n                    <div class=\"step-desc\">Nothing in our work is arbitrary. Every visual decision has a strategic rationale\u2014which is why our work endures beyond trends.<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"approach-step\">\n                  <div class=\"step-num\">IV<\/div>\n                  <div>\n                    <div class=\"step-title\">Measured Impact<\/div>\n                    <div class=\"step-desc\">We set success metrics at the start of every engagement and return to them at the end. Accountability is part of the service.<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section style=\"background:var(--off-black); padding:var(--space-xl) 0;\">\n        <div class=\"container\">\n          <div class=\"t-label mb-lg text-center\">Our Values<\/div>\n          <div class=\"values-grid\">\n            <div class=\"value-block fade-up\">\n              <div class=\"value-num\">01<\/div>\n              <div class=\"value-title\">Intellectual Honesty<\/div>\n              <p class=\"value-desc\">We tell clients what they need to hear, not what they want to hear. That's the foundation of real partnership.<\/p>\n            <\/div>\n            <div class=\"value-block fade-up\">\n              <div class=\"value-num\">02<\/div>\n              <div class=\"value-title\">Obsessive Craft<\/div>\n              <p class=\"value-desc\">The details no one notices are the ones everyone feels. We work at a level of refinement that most won't see but everyone will experience.<\/p>\n            <\/div>\n            <div class=\"value-block fade-up\">\n              <div class=\"value-num\">03<\/div>\n              <div class=\"value-title\">Global Thinking<\/div>\n              <p class=\"value-desc\">We design for the world, not for a region. Every brand we build is built to travel\u2014culturally, commercially, visually.<\/p>\n            <\/div>\n            <div class=\"value-block fade-up\">\n              <div class=\"value-num\">04<\/div>\n              <div class=\"value-title\">Responsible Growth<\/div>\n              <p class=\"value-desc\">We help clients grow\u2014but only in directions they can sustain. Short-term tactics that damage long-term brands aren't in our playbook.<\/p>\n            <\/div>\n            <div class=\"value-block fade-up\">\n              <div class=\"value-num\">05<\/div>\n              <div class=\"value-title\">Partnership Over Projects<\/div>\n              <p class=\"value-desc\">The work we're proudest of came from long-term relationships. We invest in understanding businesses deeply, not just deliverables.<\/p>\n            <\/div>\n            <div class=\"value-block fade-up\">\n              <div class=\"value-num\">06<\/div>\n              <div class=\"value-title\">Creative Courage<\/div>\n              <p class=\"value-desc\">The safe choice is rarely the right one. We push our clients\u2014and ourselves\u2014to take positions that matter.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section style=\"padding:var(--space-xl) 0;\">\n        <div class=\"container\">\n          <div style=\"display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; flex-wrap:wrap; gap:2rem;\">\n            <div>\n              <div class=\"t-label mb-sm\">The Team<\/div>\n              <h2 class=\"t-h2\">The people<br>behind the work.<\/h2>\n            <\/div>\n          <\/div>\n          <div class=\"team-grid\">\n            <div class=\"team-member fade-up\">\n              <div class=\"member-avatar\">KM<\/div>\n              <div class=\"member-name\">Kofi Mensah<\/div>\n              <div class=\"member-role\">Founder & Creative Director<\/div>\n              <p class=\"member-bio\">Kofi has led brand strategy and creative direction for over a decade across four continents. He founded The Design 24 to build the agency he wished existed\u2014one that refuses to separate thinking from making.<\/p>\n            <\/div>\n            <div class=\"team-member fade-up\">\n              <div class=\"member-avatar\">AN<\/div>\n              <div class=\"member-name\">Amara Nkosi<\/div>\n              <div class=\"member-role\">Head of Strategy<\/div>\n              <p class=\"member-bio\">A former management consultant turned brand strategist, Amara bridges the gap between business intelligence and creative expression. She turns complex market realities into clear brand direction.<\/p>\n            <\/div>\n            <div class=\"team-member fade-up\">\n              <div class=\"member-avatar\">TY<\/div>\n              <div class=\"member-name\">Takeshi Yamamoto<\/div>\n              <div class=\"member-role\">Design Lead<\/div>\n              <p class=\"member-bio\">Takeshi brings rigorous craft and typographic mastery to every project. His work has appeared in print, on screens, and in physical environments for brands across Asia, Europe, and Africa.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <div class=\"cta-banner\">\n        <div class=\"container\">\n          <h2 class=\"t-h2\">Work with a team<br><em style=\"font-style:italic;\">that takes your ambition seriously.<\/em><\/h2>\n          <p class=\"t-body\">Let's talk about what you're building and where we can take it.<\/p>\n          <a href=\"#\" class=\"btn-dark\" onclick=\"showPage('contact')\">Start a Conversation \u2192<\/a>\n        <\/div>\n      <\/div>\n\n    <\/div><div class=\"page\" id=\"services\">\n      \n      <div style=\"padding-top:120px;\"><\/div>\n\n      <section style=\"padding: 4rem 0 var(--space-lg);\">\n        <div class=\"container\">\n          <div class=\"t-label mb-md fade-up\">Services<\/div>\n          <h1 class=\"t-h1 fade-up\" style=\"max-width:800px; margin-bottom:2rem;\">\n            Four pillars.<br>Infinite leverage.\n          <\/h1>\n          <p class=\"t-body fade-up\" style=\"max-width:580px; margin-bottom:4rem;\">Our services are designed to work as an integrated system\u2014not as isolated deliverables. The most transformative results come from engaging multiple disciplines simultaneously.<\/p>\n          <div class=\"rule\"><\/div>\n        <\/div>\n      <\/section>\n\n      <div class=\"services-pillars\">\n        \n        <div class=\"pillar\">\n          <div class=\"pillar-left\">\n            <div class=\"pillar-num\">01<\/div>\n            <h2 class=\"pillar-title\">Brand<br>Strategy<\/h2>\n            <div class=\"pillar-subtitle\">Foundation & Direction<\/div>\n          <\/div>\n          <div class=\"pillar-mid\">\n            <p class=\"pillar-overview\">Before your brand can be seen, it must be understood. Brand Strategy is the work that defines who you are, who you're for, and why it matters\u2014translated into positioning, messaging, and a competitive architecture that gives you an enduring edge.<\/p>\n            <p class=\"t-body-sm\" style=\"margin-bottom:2rem;\">We work from evidence, not instinct. Every recommendation is grounded in market research, competitive analysis, and audience intelligence.<\/p>\n            <div class=\"t-label mb-sm\">Outcomes You Can Expect<\/div>\n            <ul class=\"pillar-outcomes\">\n              <li>A market position your competitors cannot easily replicate<\/li>\n              <li>Audience clarity that eliminates wasted budget and attention<\/li>\n              <li>A messaging hierarchy that scales across every touchpoint<\/li>\n              <li>Internal alignment around a single, powerful brand truth<\/li>\n              <li>A foundation that makes every future creative decision faster<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"pillar-right\">\n            <div class=\"t-label mb-md\">Our Process<\/div>\n            <div class=\"process-steps\">\n              <div class=\"process-step\"><div class=\"ps-num\">1.1<\/div><div><div class=\"ps-title\">Market Audit<\/div><div class=\"ps-desc\">Competitive landscape, category dynamics, whitespace identification<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">1.2<\/div><div><div class=\"ps-title\">Audience Research<\/div><div class=\"ps-desc\">Qualitative and quantitative understanding of target segments<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">1.3<\/div><div><div class=\"ps-title\">Positioning Workshop<\/div><div class=\"ps-desc\">Collaborative sessions to define your unique space in the market<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">1.4<\/div><div><div class=\"ps-title\">Strategy Document<\/div><div class=\"ps-desc\">Complete brand strategy framework and messaging architecture<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">1.5<\/div><div><div class=\"ps-title\">Activation Plan<\/div><div class=\"ps-desc\">Roadmap for bringing the strategy to life across every channel<\/div><\/div><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"pillar\">\n          <div class=\"pillar-left\">\n            <div class=\"pillar-num\">02<\/div>\n            <h2 class=\"pillar-title\">Visual<br>Identity<\/h2>\n            <div class=\"pillar-subtitle\">Form & System<\/div>\n          <\/div>\n          <div class=\"pillar-mid\">\n            <p class=\"pillar-overview\">Identity is the visual translation of strategy. We design systems\u2014not just logos\u2014that communicate leadership at every scale, in every context. From a business card to a billboard, your brand should be instantly recognisable and unmistakably intentional.<\/p>\n            <p class=\"t-body-sm\" style=\"margin-bottom:2rem;\">Every visual element is designed to age well. We are not trend-chasers\u2014we build for longevity.<\/p>\n            <div class=\"t-label mb-sm\">Outcomes You Can Expect<\/div>\n            <ul class=\"pillar-outcomes\">\n              <li>A logo system that performs across all sizes and contexts<\/li>\n              <li>A colour and typography system with clear rules and flexibility<\/li>\n              <li>Motion language that brings your brand to life in digital environments<\/li>\n              <li>Brand guidelines that empower your team to maintain consistency<\/li>\n              <li>A visual identity that signals leadership before anyone reads your copy<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"pillar-right\">\n            <div class=\"t-label mb-md\">Our Process<\/div>\n            <div class=\"process-steps\">\n              <div class=\"process-step\"><div class=\"ps-num\">2.1<\/div><div><div class=\"ps-title\">Discovery & Moodboards<\/div><div class=\"ps-desc\">Aesthetic direction, competitive visual audit, reference curation<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">2.2<\/div><div><div class=\"ps-title\">Concept Development<\/div><div class=\"ps-desc\">3\u20135 distinct visual directions explored in full depth<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">2.3<\/div><div><div class=\"ps-title\">Refinement<\/div><div class=\"ps-desc\">Chosen direction refined until it's exceptional, not just good<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">2.4<\/div><div><div class=\"ps-title\">System Build<\/div><div class=\"ps-desc\">Full identity system including all variants and applications<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">2.5<\/div><div><div class=\"ps-title\">Brand Guidelines<\/div><div class=\"ps-desc\">Comprehensive documentation and digital asset delivery<\/div><\/div><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"pillar\">\n          <div class=\"pillar-left\">\n            <div class=\"pillar-num\">03<\/div>\n            <h2 class=\"pillar-title\">Web &<br>Product Design<\/h2>\n            <div class=\"pillar-subtitle\">Experience & Conversion<\/div>\n          <\/div>\n          <div class=\"pillar-mid\">\n            <p class=\"pillar-overview\">Digital experiences are often the first\u2014and most critical\u2014interaction between a brand and its audience. We design websites and product interfaces that are built around real human behaviour: what people actually do, not what we assume they'll do.<\/p>\n            <p class=\"t-body-sm\" style=\"margin-bottom:2rem;\">Design and development thinking happen in parallel, not sequence. The result is faster delivery and experiences that actually work.<\/p>\n            <div class=\"t-label mb-sm\">Outcomes You Can Expect<\/div>\n            <ul class=\"pillar-outcomes\">\n              <li>Measurably higher conversion rates versus your current baseline<\/li>\n              <li>User journeys that feel effortless and reduce cognitive load<\/li>\n              <li>A design system that your engineering team can build from confidently<\/li>\n              <li>Performance-optimised interfaces that load and respond fast<\/li>\n              <li>Accessibility-first design that expands your addressable audience<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"pillar-right\">\n            <div class=\"t-label mb-md\">Our Process<\/div>\n            <div class=\"process-steps\">\n              <div class=\"process-step\"><div class=\"ps-num\">3.1<\/div><div><div class=\"ps-title\">User Research<\/div><div class=\"ps-desc\">Behaviour analysis, user interviews, journey mapping<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">3.2<\/div><div><div class=\"ps-title\">Information Architecture<\/div><div class=\"ps-desc\">Content hierarchy, navigation structure, conversion flow<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">3.3<\/div><div><div class=\"ps-title\">Wireframing<\/div><div class=\"ps-desc\">Low-fidelity layouts tested against user expectations<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">3.4<\/div><div><div class=\"ps-title\">High-Fidelity Design<\/div><div class=\"ps-desc\">Production-ready screens with full interaction documentation<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">3.5<\/div><div><div class=\"ps-title\">Handoff & Support<\/div><div class=\"ps-desc\">Developer-ready files, design system documentation, QA support<\/div><\/div><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"pillar\">\n          <div class=\"pillar-left\">\n            <div class=\"pillar-num\">04<\/div>\n            <h2 class=\"pillar-title\">Growth &<br>Marketing<\/h2>\n            <div class=\"pillar-subtitle\">Reach & Revenue<\/div>\n          <\/div>\n          <div class=\"pillar-mid\">\n            <p class=\"pillar-overview\">Growth is not a campaign\u2014it's a compounding system. We build marketing infrastructures that get stronger over time: audience-first content strategies, performance architectures, and brand-consistent campaigns that generate demand and convert it efficiently.<\/p>\n            <p class=\"t-body-sm\" style=\"margin-bottom:2rem;\">We don't separate brand marketing from performance marketing. The brands that grow fastest invest in both\u2014simultaneously.<\/p>\n            <div class=\"t-label mb-sm\">Outcomes You Can Expect<\/div>\n            <ul class=\"pillar-outcomes\">\n              <li>A content engine that builds authority and drives organic demand<\/li>\n              <li>Paid media systems optimised for your specific acquisition economics<\/li>\n              <li>Email and CRM flows that deepen customer relationships at scale<\/li>\n              <li>A growth dashboard that makes the right decisions obvious<\/li>\n              <li>Marketing that reinforces brand equity, not just short-term conversions<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"pillar-right\">\n            <div class=\"t-label mb-md\">Our Process<\/div>\n            <div class=\"process-steps\">\n              <div class=\"process-step\"><div class=\"ps-num\">4.1<\/div><div><div class=\"ps-title\">Growth Audit<\/div><div class=\"ps-desc\">Current state analysis, channel performance, opportunity identification<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">4.2<\/div><div><div class=\"ps-title\">Strategy Design<\/div><div class=\"ps-desc\">Channel mix, audience segmentation, funnel architecture<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">4.3<\/div><div><div class=\"ps-title\">Creative Production<\/div><div class=\"ps-desc\">Campaign concepts, content creation, asset development<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">4.4<\/div><div><div class=\"ps-title\">Launch & Test<\/div><div class=\"ps-desc\">Multi-variant testing, attribution setup, initial optimisation<\/div><\/div><\/div>\n              <div class=\"process-step\"><div class=\"ps-num\">4.5<\/div><div><div class=\"ps-title\">Scale & Report<\/div><div class=\"ps-desc\">Performance review, scaling decisions, monthly reporting<\/div><\/div><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"cta-banner\">\n        <div class=\"container\">\n          <h2 class=\"t-h2\">Not sure which service<br><em style=\"font-style:italic;\">is right for you?<\/em><\/h2>\n          <p class=\"t-body\">Most transformations start with a conversation. Tell us where you are and where you want to go.<\/p>\n          <a href=\"#\" class=\"btn-dark\" onclick=\"showPage('contact')\">Talk to Our Team \u2192<\/a>\n        <\/div>\n      <\/div>\n\n    <\/div><div class=\"page\" id=\"work\">\n\n      <div style=\"padding-top:120px;\"><\/div>\n      \n      <section style=\"padding: 4rem 0 var(--space-lg);\">\n        <div class=\"container\">\n          <div class=\"t-label mb-md fade-up\">Selected Work<\/div>\n          <h1 class=\"t-h1 fade-up\" style=\"max-width:700px; margin-bottom:2rem;\">\n            Work that<br>earns its place.\n          <\/h1>\n          <p class=\"t-body fade-up\" style=\"max-width:520px; margin-bottom:4rem;\">A curated selection from our portfolio. Every project listed here is one we'd take on again\u2014knowing what we know now. That's our standard for inclusion.<\/p>\n          <div class=\"work-filters fade-up\">\n            <button class=\"filter-btn active\">All Work<\/button>\n            <button class=\"filter-btn\">Brand Identity<\/button>\n            <button class=\"filter-btn\">Strategy<\/button>\n            <button class=\"filter-btn\">Digital<\/button>\n            <button class=\"filter-btn\">Growth<\/button>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section style=\"padding:0 0 var(--space-xl);\">\n        <div class=\"container\">\n          <div class=\"case-studies\">\n            \n            <div class=\"case-study fade-up\">\n              <div class=\"cs-meta\">\n                <span class=\"cs-cat\">Brand Strategy & Identity<\/span>\n                <span class=\"cs-year\">2024<\/span>\n              <\/div>\n              <div class=\"cs-visual\" style=\"background:linear-gradient(135deg,#111 0%,#1c1510 100%);\">\n                <svg class=\"cs-pattern\" viewBox=\"0 0 400 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"200\" cy=\"110\" r=\"90\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.8\"\/><circle cx=\"200\" cy=\"110\" r=\"55\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.4\"\/><line x1=\"110\" y1=\"110\" x2=\"290\" y2=\"110\" stroke=\"#C9A96E\" stroke-width=\"0.4\"\/><line x1=\"200\" y1=\"20\" x2=\"200\" y2=\"200\" stroke=\"#C9A96E\" stroke-width=\"0.4\"\/><\/svg>\n              <\/div>\n              <h3 class=\"cs-title\">Meridian Financial Group<\/h3>\n              <div class=\"cs-tags\">\n                <span class=\"cs-tag\">Brand Strategy<\/span>\n                <span class=\"cs-tag\">Visual Identity<\/span>\n                <span class=\"cs-tag\">Digital<\/span>\n              <\/div>\n              <p class=\"cs-excerpt\"><strong style=\"color:var(--light); font-weight:400;\">The Challenge:<\/strong> A pan-African financial services firm needed to compete with global institutions while maintaining cultural authenticity. Their previous brand communicated competence\u2014but not leadership.<br><br><strong style=\"color:var(--light); font-weight:400;\">Our Approach:<\/strong> We repositioned them as Africa's precision finance institution\u2014building a brand rooted in mathematical exactness and continental ambition. The identity draws from geometric African textile traditions, reframed through a modern, institutional lens.<\/p>\n              <div class=\"cs-impact\">\n                <div class=\"impact-figure\"><div class=\"impact-num\">+280%<\/div><div class=\"impact-label\">Brand Recall<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">4 Markets<\/div><div class=\"impact-label\">New Expansion<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">12 Months<\/div><div class=\"impact-label\">To Full Rollout<\/div><\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"case-study fade-up\">\n              <div class=\"cs-meta\">\n                <span class=\"cs-cat\">Product Design & UX<\/span>\n                <span class=\"cs-year\">2024<\/span>\n              <\/div>\n              <div class=\"cs-visual\" style=\"background:linear-gradient(135deg,#0d1515 0%,#0f1e1a 100%);\">\n                <svg class=\"cs-pattern\" viewBox=\"0 0 400 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"80\" y=\"40\" width=\"240\" height=\"140\" rx=\"8\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.8\"\/><rect x=\"100\" y=\"60\" width=\"140\" height=\"8\" rx=\"2\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.5\"\/><rect x=\"100\" y=\"80\" width=\"100\" height=\"6\" rx=\"2\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><rect x=\"100\" y=\"100\" width=\"200\" height=\"60\" rx=\"4\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><\/svg>\n              <\/div>\n              <h3 class=\"cs-title\">Vanta Health Platform<\/h3>\n              <div class=\"cs-tags\">\n                <span class=\"cs-tag\">UX Design<\/span>\n                <span class=\"cs-tag\">Product Design<\/span>\n                <span class=\"cs-tag\">Design System<\/span>\n              <\/div>\n              <p class=\"cs-excerpt\"><strong style=\"color:var(--light); font-weight:400;\">The Challenge:<\/strong> A health-tech startup had powerful technology but an interface that undermined clinician trust. Adoption rates were stalling at trial.<br><br><strong style=\"color:var(--light); font-weight:400;\">Our Approach:<\/strong> We rebuilt the product experience from the ground up\u2014grounding every decision in clinician workflow research. The result prioritised cognitive efficiency above visual novelty, reducing task completion time by 40%.<\/p>\n              <div class=\"cs-impact\">\n                <div class=\"impact-figure\"><div class=\"impact-num\">40%<\/div><div class=\"impact-label\">Faster Workflows<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">3\u00d7 Growth<\/div><div class=\"impact-label\">Trial Conversion<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">Series B<\/div><div class=\"impact-label\">Raised Post-Launch<\/div><\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"case-study fade-up\">\n              <div class=\"cs-meta\">\n                <span class=\"cs-cat\">Brand & Growth Strategy<\/span>\n                <span class=\"cs-year\">2023<\/span>\n              <\/div>\n              <div class=\"cs-visual\" style=\"background:linear-gradient(135deg,#141010 0%,#1a1508 100%);\">\n                <svg class=\"cs-pattern\" viewBox=\"0 0 400 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><polygon points=\"200,30 370,190 30,190\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.8\"\/><polygon points=\"200,70 320,180 80,180\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.4\"\/><polygon points=\"200,110 280,180 120,180\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><\/svg>\n              <\/div>\n              <h3 class=\"cs-title\">Solace Lifestyle Brand<\/h3>\n              <div class=\"cs-tags\">\n                <span class=\"cs-tag\">Brand Identity<\/span>\n                <span class=\"cs-tag\">Launch Strategy<\/span>\n                <span class=\"cs-tag\">Content<\/span>\n              <\/div>\n              <p class=\"cs-excerpt\"><strong style=\"color:var(--light); font-weight:400;\">The Challenge:<\/strong> A premium wellness startup entering a saturated market with no brand recognition, a modest budget, and a nine-month window to achieve profitability.<br><br><strong style=\"color:var(--light); font-weight:400;\">Our Approach:<\/strong> We defined a positioning around \"earned calm\"\u2014differentiating from the noise and anxiety of wellness trend culture. The visual language was deliberately quiet, confident, and countercultural.<\/p>\n              <div class=\"cs-impact\">\n                <div class=\"impact-figure\"><div class=\"impact-num\">\u00a32.4M<\/div><div class=\"impact-label\">Year-1 Revenue<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">68K<\/div><div class=\"impact-label\">Social Followers<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">8 Months<\/div><div class=\"impact-label\">To Profitability<\/div><\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"case-study fade-up\">\n              <div class=\"cs-meta\">\n                <span class=\"cs-cat\">Web Design & Conversion<\/span>\n                <span class=\"cs-year\">2023<\/span>\n              <\/div>\n              <div class=\"cs-visual\" style=\"background:linear-gradient(135deg,#0f0f18 0%,#141020 100%);\">\n                <svg class=\"cs-pattern\" viewBox=\"0 0 400 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"40\" y=\"30\" width=\"320\" height=\"160\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.8\"\/><line x1=\"40\" y1=\"70\" x2=\"360\" y2=\"70\" stroke=\"#C9A96E\" stroke-width=\"0.4\"\/><rect x=\"60\" y=\"90\" width=\"80\" height=\"80\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><rect x=\"160\" y=\"90\" width=\"180\" height=\"35\" rx=\"4\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><rect x=\"160\" y=\"135\" width=\"120\" height=\"35\" rx=\"4\" fill=\"none\" stroke=\"#C9A96E\" stroke-width=\"0.3\"\/><\/svg>\n              <\/div>\n              <h3 class=\"cs-title\">Orbis Capital Partners<\/h3>\n              <div class=\"cs-tags\">\n                <span class=\"cs-tag\">Web Design<\/span>\n                <span class=\"cs-tag\">Brand Refresh<\/span>\n                <span class=\"cs-tag\">UX Strategy<\/span>\n              <\/div>\n              <p class=\"cs-excerpt\"><strong style=\"color:var(--light); font-weight:400;\">The Challenge:<\/strong> A boutique investment firm whose digital presence was actively costing them enterprise mandates. First impressions were inconsistent with their actual calibre.<br><br><strong style=\"color:var(--light); font-weight:400;\">Our Approach:<\/strong> We rebuilt their website as a precision instrument\u2014designing to communicate rigour, discretion, and intelligence to sophisticated institutional audiences.<\/p>\n              <div class=\"cs-impact\">\n                <div class=\"impact-figure\"><div class=\"impact-num\">+190%<\/div><div class=\"impact-label\">Qualified Enquiries<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">5 New<\/div><div class=\"impact-label\">Institutional Clients<\/div><\/div>\n                <div class=\"impact-figure\"><div class=\"impact-num\">6 Weeks<\/div><div class=\"impact-label\">Delivery Time<\/div><\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <div class=\"cta-banner\">\n        <div class=\"container\">\n          <h2 class=\"t-h2\">Your project could be<br><em style=\"font-style:italic;\">the next case study.<\/em><\/h2>\n          <p class=\"t-body\">We're selective about who we work with. That's why the results speak.<\/p>\n          <a href=\"#\" class=\"btn-dark\" onclick=\"showPage('contact')\">Begin Your Project \u2192<\/a>\n        <\/div>\n      <\/div>\n\n    <\/div><div class=\"page\" id=\"contact\">\n\n      <div style=\"padding-top:120px;\"><\/div>\n\n      <section style=\"padding:4rem 0 var(--space-xl);\">\n        <div class=\"container\">\n          <div class=\"contact-layout\">\n            \n            <div class=\"fade-up\">\n              <div class=\"t-label mb-md\">Start a Project<\/div>\n              <h1 class=\"t-h1\" style=\"margin-bottom:2rem;\">Let's build<br>something<br><em style=\"font-style:italic; color:var(--gold);\">extraordinary.<\/em><\/h1>\n              <p class=\"t-body\" style=\"max-width:420px; margin-bottom:3rem;\">We work with a limited number of clients each quarter to ensure every engagement gets the depth it deserves. If you're building something significant, we'd like to hear about it.<\/p>\n              \n              <div class=\"contact-details\">\n                <div class=\"contact-detail-item\">\n                  <div class=\"cd-label\">General Enquiries<\/div>\n                  <div class=\"cd-value\"><a href=\"mailto:hello@thedesign24.com\">hello@thedesign24.com<\/a><\/div>\n                <\/div>\n                <div class=\"contact-detail-item\">\n                  <div class=\"cd-label\">New Business<\/div>\n                  <div class=\"cd-value\"><a href=\"mailto:projects@thedesign24.com\">projects@thedesign24.com<\/a><\/div>\n                <\/div>\n                <div class=\"contact-detail-item\">\n                  <div class=\"cd-label\">Locations<\/div>\n                  <div class=\"cd-value\">London \u00b7 Nairobi \u00b7 Amsterdam<\/div>\n                <\/div>\n                <div class=\"contact-detail-item\">\n                  <div class=\"cd-label\">Response Time<\/div>\n                  <div class=\"cd-value\" style=\"color:var(--muted); font-size:0.9rem;\">We respond to all serious enquiries within 24 hours. Typically sooner.<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"fade-up\">\n              <div style=\"background:var(--off-black); padding:clamp(2rem,5vw,4rem); border: 1px solid rgba(255,255,255,0.06);\">\n                <div class=\"t-label mb-md\">Tell Us About Your Project<\/div>\n                <form class=\"contact-form\" onsubmit=\"handleSubmit(event)\">\n                  <div class=\"form-field\">\n                    <input class=\"form-input\" type=\"text\" placeholder=\" \" id=\"fname\">\n                    <label class=\"form-label\" for=\"fname\">Full Name<\/label>\n                  <\/div>\n                  <div class=\"form-field\">\n                    <input class=\"form-input\" type=\"email\" placeholder=\" \" id=\"femail\">\n                    <label class=\"form-label\" for=\"femail\">Email Address<\/label>\n                  <\/div>\n                  <div class=\"form-field\">\n                    <input class=\"form-input\" type=\"text\" placeholder=\" \" id=\"fcompany\">\n                    <label class=\"form-label\" for=\"fcompany\">Company \/ Organisation<\/label>\n                  <\/div>\n                  <div class=\"form-field\">\n                    <select class=\"form-select\" id=\"fservice\">\n                      <option value=\"\" disabled selected><\/option>\n                      <option>Brand Strategy<\/option>\n                      <option>Visual Identity<\/option>\n                      <option>Web & Product Design<\/option>\n                      <option>Growth & Marketing<\/option>\n                      <option>Full Partnership<\/option>\n                      <option>Not sure yet \u2014 let's talk<\/option>\n                    <\/select>\n                    <label class=\"form-label\" for=\"fservice\" style=\"pointer-events:none;\">Service of Interest<\/label>\n                  <\/div>\n                  <div class=\"form-field\">\n                    <select class=\"form-select\" id=\"fbudget\">\n                      <option value=\"\" disabled selected><\/option>\n                      <option>Under $10,000<\/option>\n                      <option>$10,000 \u2013 $30,000<\/option>\n                      <option>$30,000 \u2013 $80,000<\/option>\n                      <option>$80,000 \u2013 $200,000<\/option>\n                      <option>$200,000+<\/option>\n                    <\/select>\n                    <label class=\"form-label\" for=\"fbudget\" style=\"pointer-events:none;\">Approximate Budget<\/label>\n                  <\/div>\n                  <div class=\"form-field\">\n                    <textarea class=\"form-textarea\" placeholder=\" \" id=\"fmessage\"><\/textarea>\n                    <label class=\"form-label\" for=\"fmessage\">Tell us about your project<\/label>\n                  <\/div>\n                  <button type=\"submit\" class=\"form-submit\">Send Enquiry \u2192<\/button>\n                <\/form>\n              <\/div>\n            <\/div>\n            \n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section style=\"background:var(--off-black); padding:var(--space-lg) 0;\">\n        <div class=\"container\">\n          <div class=\"grid-3\" style=\"gap:4rem;\">\n            <div class=\"fade-up\">\n              <div class=\"rule-gold mb-md\"><\/div>\n              <h3 style=\"font-family:var(--font-serif); font-size:1.4rem; font-weight:300; margin-bottom:1rem;\">Selective by Design<\/h3>\n              <p class=\"t-body-sm\">We limit our active client roster to maintain quality at every level. When we take you on, we're fully committed. No divided attention, no junior team hand-offs.<\/p>\n            <\/div>\n            <div class=\"fade-up\">\n              <div class=\"rule-gold mb-md\"><\/div>\n              <h3 style=\"font-family:var(--font-serif); font-size:1.4rem; font-weight:300; margin-bottom:1rem;\">No Boilerplate Proposals<\/h3>\n              <p class=\"t-body-sm\">Every proposal is written for your specific situation. We don't have packages or templates\u2014we have conversations, and then we design an engagement that makes sense.<\/p>\n            <\/div>\n            <div class=\"fade-up\">\n              <div class=\"rule-gold mb-md\"><\/div>\n              <h3 style=\"font-family:var(--font-serif); font-size:1.4rem; font-weight:300; margin-bottom:1rem;\">Senior Talent, Always<\/h3>\n              <p class=\"t-body-sm\">The people you meet are the people who do the work. There are no account managers insulating you from the creatives. You have direct access to the team from day one.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n    <\/div><footer id=\"siteFooter\">\n      <div class=\"container\">\n        <div class=\"footer-top\">\n          <div class=\"footer-brand\">\n            <a class=\"nav-logo\" href=\"#\" onclick=\"showPage('home')\">The Design <span>24<\/span><\/a>\n            <p>A premium creative agency specialising in brand strategy, visual identity, digital experience, and growth marketing. We work with ambitious organisations worldwide.<\/p>\n          <\/div>\n          <div class=\"footer-col\">\n            <h5>Services<\/h5>\n            <ul>\n              <li><a href=\"#\" onclick=\"showPage('services')\">Brand Strategy<\/a><\/li>\n              <li><a href=\"#\" onclick=\"showPage('services')\">Visual Identity<\/a><\/li>\n              <li><a href=\"#\" onclick=\"showPage('services')\">Web & Product Design<\/a><\/li>\n              <li><a href=\"#\" onclick=\"showPage('services')\">Growth & Marketing<\/a><\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"footer-col\">\n            <h5>Company<\/h5>\n            <ul>\n              <li><a href=\"#\" onclick=\"showPage('about')\">About<\/a><\/li>\n              <li><a href=\"#\" onclick=\"showPage('work')\">Work<\/a><\/li>\n              <li><a href=\"#\" onclick=\"showPage('contact')\">Contact<\/a><\/li>\n              <li><a href=\"#\">Careers<\/a><\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"footer-col\">\n            <h5>Connect<\/h5>\n            <ul>\n              <li><a href=\"#\">LinkedIn<\/a><\/li>\n              <li><a href=\"#\">Instagram<\/a><\/li>\n              <li><a href=\"#\">Behance<\/a><\/li>\n              <li><a href=\"mailto:hello@thedesign24.com\">Email Us<\/a><\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n        <div class=\"footer-bottom\">\n          <span class=\"footer-copy\">\u00a9 2025 The Design 24. All rights reserved.<\/span>\n          <div class=\"footer-socials\">\n            <a href=\"#\">Privacy Policy<\/a>\n            <a href=\"#\">Terms of Service<\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/footer>\n<\/div>\n\n<script>\n\/\/ Scoped to run immediately to bypass Elementor load sequence issues\n(function initDesign24() {\n  \/\/ Custom cursor\n  const cursor = document.getElementById('cursor');\n  const ring = document.getElementById('cursorRing');\n  const app = document.getElementById('design24-app');\n  let mx = 0, my = 0, rx = 0, ry = 0;\n\n  if (app && cursor && ring) {\n      app.addEventListener('mousemove', e => {\n        const rect = app.getBoundingClientRect();\n        \/\/ Adjust cursor relative to the container if needed\n        mx = e.clientX; \n        my = e.clientY;\n        cursor.style.transform = `translate(${mx - 4}px, ${my - 4}px)`;\n      });\n      function animateRing() {\n        rx += (mx - rx - 18) * 0.12;\n        ry += (my - ry - 18) * 0.12;\n        ring.style.transform = `translate(${rx}px, ${ry}px)`;\n        requestAnimationFrame(animateRing);\n      }\n      animateRing();\n  }\n\n  \/\/ Loader - force hide after 1.8 seconds regardless of window.onload\n  setTimeout(() => {\n    const loader = document.getElementById('loader');\n    if(loader) loader.classList.add('hidden');\n  }, 1800);\n\n  \/\/ Nav scroll\n  window.addEventListener('scroll', () => {\n    const nav = document.getElementById('mainNav');\n    if(nav) nav.classList.toggle('scrolled', window.scrollY > 60);\n  });\n\n  \/\/ Page routing\n  window.showPage = function(id) {\n    document.querySelectorAll('#design24-app .page').forEach(p => p.classList.remove('active'));\n    const targetPage = document.getElementById(id);\n    if(targetPage) targetPage.classList.add('active');\n    \n    \/\/ Update active nav\n    document.querySelectorAll('#design24-app .nav-links a').forEach(a => a.classList.remove('active-link'));\n    const activeLink = document.getElementById('nav-' + id);\n    if (activeLink) activeLink.classList.add('active-link');\n    \n    window.scrollTo({ top: 0, behavior: 'smooth' });\n    \n    \/\/ Re-trigger animations\n    setTimeout(triggerAnimations, 100);\n    return false;\n  }\n\n  \/\/ Scroll animations\n  const observer = new IntersectionObserver(entries => {\n    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\n  }, { threshold: 0.1 });\n\n  function triggerAnimations() {\n    document.querySelectorAll('#design24-app .page.active .fade-up').forEach(el => {\n      el.classList.remove('visible');\n      observer.observe(el);\n    });\n  }\n\n  \/\/ Initial Triggers\n  setTimeout(() => {\n    triggerAnimations();\n    \/\/ filter buttons\n    document.querySelectorAll('#design24-app .filter-btn').forEach(btn => {\n      btn.addEventListener('click', function() {\n        document.querySelectorAll('#design24-app .filter-btn').forEach(b => b.classList.remove('active'));\n        this.classList.add('active');\n      });\n    });\n  }, 500);\n\n  \/\/ Form submit\n  window.handleSubmit = function(e) {\n    e.preventDefault();\n    const btn = e.target.querySelector('.form-submit');\n    if(btn) {\n        btn.textContent = 'Message Sent \u2713';\n        btn.style.background = '#1a3a1a';\n        btn.style.color = '#7dce7d';\n    }\n  }\n\n  \/\/ Hamburger (mobile)\n  const hamburger = document.getElementById('hamburger');\n  if(hamburger) {\n      hamburger.addEventListener('click', () => {\n        const nl = document.querySelector('#design24-app .nav-links');\n        if(nl) {\n            nl.style.display = nl.style.display === 'flex' ? 'none' : 'flex';\n            nl.style.flexDirection = 'column';\n            nl.style.position = 'absolute';\n            nl.style.top = '100%';\n            nl.style.left = '0';\n            nl.style.right = '0';\n            nl.style.background = 'rgba(10,10,10,0.98)';\n            nl.style.padding = '2rem clamp(1.5rem,5vw,6rem)';\n            nl.style.borderBottom = '1px solid rgba(255,255,255,0.08)';\n        }\n      });\n  }\n})();\n<\/script>\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>The Design 24 The Design 24 Home About Services Work Contact Start a Project Premium Creative Agency Where Strategy Meets Form We build brands that lead markets. Not just visually\u2014structurally, strategically, and culturally. Every decision is earned. View Our Work \u2197&#xFE0E; Our Services Scroll Brand Strategy \u2726 Visual Identity \u2726 Digital Experience \u2726 Growth Marketing [&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-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":14,"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/thedesign24.com\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}