{"id":229,"date":"2026-02-26T08:30:57","date_gmt":"2026-02-26T08:30:57","guid":{"rendered":"https:\/\/theredbodies.com\/?page_id=229"},"modified":"2026-03-13T09:58:27","modified_gmt":"2026-03-13T09:58:27","slug":"about-us","status":"publish","type":"page","link":"https:\/\/theredbodies.com\/index.php\/about-us\/","title":{"rendered":"About Us"},"content":{"rendered":"<style>.elementor-229 .elementor-element.elementor-element-757e30a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"229\" class=\"elementor elementor-229\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-757e30a e-con-full e-flex e-con e-parent\" data-id=\"757e30a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75b4514 elementor-widget elementor-widget-html\" data-id=\"75b4514\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>About Us \u2014 The Redbodies<\/title>\r\n\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&family=Montserrat:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    *, *::before, *::after {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    :root {\r\n      --gold: #C89B3C;\r\n      --gold-light: #D4A24C;\r\n      --gold-bright: #E8C068;\r\n      --gold-deep: #A67C28;\r\n      --black: #0A0A0A;\r\n      --black-soft: #111111;\r\n      --charcoal: #1A1A1A;\r\n      --charcoal-light: #222222;\r\n      --white: #FFFFFF;\r\n      --white-soft: #F5F0E8;\r\n      --white-muted: rgba(255, 255, 255, 0.65);\r\n      --ease-out: cubic-bezier(0.19, 1, 0.22, 1);\r\n      --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n    }\r\n\r\n    body {\r\n      font-family: 'Inter', 'Montserrat', sans-serif;\r\n      background: var(--black);\r\n      color: var(--white);\r\n      overflow-x: hidden;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       ABOUT SECTION WRAPPER\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .about-section {\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       AMBIENT BACKGROUND EFFECTS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .ambient-bg {\r\n      position: fixed;\r\n      inset: 0;\r\n      pointer-events: none;\r\n      z-index: 0;\r\n    }\r\n\r\n    .ambient-orb {\r\n      position: absolute;\r\n      border-radius: 50%;\r\n      filter: blur(80px);\r\n      opacity: .4;\r\n    }\r\n\r\n    .ambient-orb:nth-child(1) {\r\n      width: 500px;\r\n      height: 500px;\r\n      background: radial-gradient(circle, rgba(200,155,60,.06) 0%, transparent 70%);\r\n      top: 10%;\r\n      left: -10%;\r\n      animation: orbDrift1 30s ease-in-out infinite;\r\n    }\r\n\r\n    .ambient-orb:nth-child(2) {\r\n      width: 400px;\r\n      height: 400px;\r\n      background: radial-gradient(circle, rgba(200,155,60,.04) 0%, transparent 70%);\r\n      top: 50%;\r\n      right: -8%;\r\n      animation: orbDrift2 25s ease-in-out infinite;\r\n    }\r\n\r\n    .ambient-orb:nth-child(3) {\r\n      width: 350px;\r\n      height: 350px;\r\n      background: radial-gradient(circle, rgba(200,155,60,.035) 0%, transparent 70%);\r\n      bottom: 5%;\r\n      left: 30%;\r\n      animation: orbDrift3 35s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes orbDrift1 {\r\n      0%, 100% { transform: translate(0, 0); }\r\n      50% { transform: translate(60px, 40px); }\r\n    }\r\n\r\n    @keyframes orbDrift2 {\r\n      0%, 100% { transform: translate(0, 0); }\r\n      50% { transform: translate(-50px, -30px); }\r\n    }\r\n\r\n    @keyframes orbDrift3 {\r\n      0%, 100% { transform: translate(0, 0); }\r\n      50% { transform: translate(40px, -50px); }\r\n    }\r\n\r\n    \/* Floating gold particles *\/\r\n    .particles-about {\r\n      position: fixed;\r\n      inset: 0;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .p-dot {\r\n      position: absolute;\r\n      border-radius: 50%;\r\n      background: rgba(200,155,60,.25);\r\n      animation: pFloat linear infinite;\r\n    }\r\n\r\n    .p-dot:nth-child(1)  { width:2px;height:2px;left:5%;  animation-duration:20s;animation-delay:0s; }\r\n    .p-dot:nth-child(2)  { width:3px;height:3px;left:18%; animation-duration:25s;animation-delay:4s;opacity:.2; }\r\n    .p-dot:nth-child(3)  { width:2px;height:2px;left:35%; animation-duration:18s;animation-delay:2s; }\r\n    .p-dot:nth-child(4)  { width:2px;height:2px;left:52%; animation-duration:22s;animation-delay:6s; }\r\n    .p-dot:nth-child(5)  { width:3px;height:3px;left:68%; animation-duration:19s;animation-delay:1s;opacity:.15; }\r\n    .p-dot:nth-child(6)  { width:2px;height:2px;left:82%; animation-duration:24s;animation-delay:5s; }\r\n    .p-dot:nth-child(7)  { width:2px;height:2px;left:93%; animation-duration:21s;animation-delay:3s; }\r\n\r\n    @keyframes pFloat {\r\n      0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }\r\n      8%   { opacity: .4; }\r\n      92%  { opacity: .05; }\r\n      100% { transform: translateY(-80px) rotate(720deg); opacity: 0; }\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SECTION 1 \u2014 HERO INTRO\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .about-hero {\r\n      position: relative;\r\n      z-index: 2;\r\n      min-height: 100vh;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n      padding: 120px 8% 100px;\r\n      background:\r\n        linear-gradient(to bottom, var(--black) 0%, transparent 30%, transparent 70%, var(--black) 100%);\r\n    }\r\n\r\n    .about-hero-inner {\r\n      max-width: 800px;\r\n    }\r\n\r\n    \/* Decorative top accent *\/\r\n    .deco-top {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 20px;\r\n      margin-bottom: 40px;\r\n    }\r\n\r\n    .deco-line {\r\n      width: 60px;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n    }\r\n\r\n    .deco-diamond {\r\n      width: 8px;\r\n      height: 8px;\r\n      border: 1px solid var(--gold);\r\n      transform: rotate(45deg);\r\n      position: relative;\r\n    }\r\n\r\n    .deco-diamond::after {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 2px;\r\n      background: var(--gold);\r\n      opacity: .3;\r\n    }\r\n\r\n    \/* Section label *\/\r\n    .section-label {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 14px;\r\n      margin-bottom: 28px;\r\n    }\r\n\r\n    .label-line {\r\n      width: 40px;\r\n      height: 1px;\r\n      background: var(--gold);\r\n    }\r\n\r\n    .label-text {\r\n      font-family: 'Montserrat', sans-serif;\r\n      font-size: .7rem;\r\n      font-weight: 500;\r\n      color: var(--gold);\r\n      letter-spacing: 6px;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    \/* Main title *\/\r\n    .about-title {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: clamp(2.5rem, 5vw, 4.2rem);\r\n      font-weight: 700;\r\n      color: var(--white);\r\n      line-height: 1.15;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .about-title .gold {\r\n      color: var(--gold);\r\n      font-style: italic;\r\n    }\r\n\r\n    .about-title .light {\r\n      font-weight: 400;\r\n    }\r\n\r\n    \/* Tagline *\/\r\n    .about-tagline {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: clamp(.9rem, 1.4vw, 1.15rem);\r\n      font-weight: 400;\r\n      color: var(--gold-light);\r\n      letter-spacing: 3px;\r\n      margin-bottom: 30px;\r\n    }\r\n\r\n    \/* Separator *\/\r\n    .gold-sep {\r\n      width: 80px;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n      margin: 0 auto 30px;\r\n    }\r\n\r\n    \/* Intro text *\/\r\n    .about-intro {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: 1rem;\r\n      font-weight: 300;\r\n      color: var(--white-muted);\r\n      line-height: 2;\r\n      max-width: 620px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    \/* Scroll hint *\/\r\n    .scroll-hint {\r\n      margin-top: 50px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 10px;\r\n      animation: fadeInUp 1.5s ease .5s both;\r\n    }\r\n\r\n    .scroll-hint span {\r\n      font-family: 'Montserrat', sans-serif;\r\n      font-size: .55rem;\r\n      color: rgba(200,155,60,.4);\r\n      letter-spacing: 3px;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .scroll-hint-bar {\r\n      width: 1px;\r\n      height: 50px;\r\n      background: rgba(200,155,60,.15);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .scroll-hint-bar::after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 40%;\r\n      background: var(--gold);\r\n      animation: scrollDrop 2.2s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes scrollDrop {\r\n      0%   { top: -40%; }\r\n      100% { top: 110%; }\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SECTION 2 \u2014 PHILOSOPHY\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .philosophy {\r\n      position: relative;\r\n      z-index: 2;\r\n      padding: 120px 8%;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 80px;\r\n      background:\r\n        linear-gradient(135deg, var(--charcoal) 0%, var(--black-soft) 50%, var(--charcoal) 100%);\r\n      border-top: 1px solid rgba(200,155,60,.08);\r\n      border-bottom: 1px solid rgba(200,155,60,.08);\r\n    }\r\n\r\n    \/* Visual side *\/\r\n    .philosophy-visual {\r\n      flex: 1;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      min-height: 500px;\r\n    }\r\n\r\n    .phil-frame {\r\n      position: relative;\r\n      width: 380px;\r\n      height: 480px;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .phil-frame img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      filter: brightness(.85) contrast(1.05);\r\n      transition: transform .8s var(--ease-out);\r\n    }\r\n\r\n    .phil-frame:hover img {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    \/* Gold border frame *\/\r\n    .phil-frame::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 12px;\r\n      border: 1px solid rgba(200,155,60,.2);\r\n      z-index: 2;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .phil-frame::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      height: 40%;\r\n      background: linear-gradient(to top, rgba(10,10,10,.7), transparent);\r\n      z-index: 2;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* Decorative offset frame *\/\r\n    .phil-frame-accent {\r\n      position: absolute;\r\n      top: -16px;\r\n      left: -16px;\r\n      width: 380px;\r\n      height: 480px;\r\n      border: 1px solid rgba(200,155,60,.1);\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* Experience badge *\/\r\n    .experience-badge {\r\n      position: absolute;\r\n      bottom: 30px;\r\n      right: -30px;\r\n      width: 120px;\r\n      height: 120px;\r\n      border-radius: 50%;\r\n      border: 1px solid rgba(200,155,60,.25);\r\n      background: rgba(10,10,10,.9);\r\n      backdrop-filter: blur(10px);\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      z-index: 5;\r\n      animation: badgeSpin 20s linear infinite;\r\n    }\r\n\r\n    @keyframes badgeSpin {\r\n      from { \/* badge stays still, text animation in JS *\/ }\r\n    }\r\n\r\n    .badge-number {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: 2rem;\r\n      font-weight: 700;\r\n      color: var(--gold);\r\n      line-height: 1;\r\n    }\r\n\r\n    .badge-label {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: .5rem;\r\n      color: var(--white-muted);\r\n      letter-spacing: 2px;\r\n      text-transform: uppercase;\r\n      margin-top: 4px;\r\n    }\r\n\r\n    \/* Content side *\/\r\n    .philosophy-content {\r\n      flex: 1;\r\n    }\r\n\r\n    .phil-label {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 14px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .phil-heading {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: clamp(1.8rem, 3vw, 2.6rem);\r\n      font-weight: 700;\r\n      color: var(--white);\r\n      line-height: 1.2;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .phil-heading .gold {\r\n      color: var(--gold);\r\n      font-style: italic;\r\n    }\r\n\r\n    .phil-tagline {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: .95rem;\r\n      color: var(--gold-light);\r\n      letter-spacing: 2px;\r\n      margin-bottom: 24px;\r\n      font-weight: 400;\r\n    }\r\n\r\n    .phil-sep {\r\n      width: 60px;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, var(--gold), transparent);\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .phil-text {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: .92rem;\r\n      font-weight: 300;\r\n      color: var(--white-muted);\r\n      line-height: 1.95;\r\n      margin-bottom: 36px;\r\n      max-width: 500px;\r\n    }\r\n\r\n    \/* Value pillars *\/\r\n    .values-row {\r\n      display: flex;\r\n      gap: 32px;\r\n      margin-bottom: 40px;\r\n    }\r\n\r\n    .value-item {\r\n      flex: 1;\r\n      text-align: center;\r\n      padding: 24px 16px;\r\n      border: 1px solid rgba(200,155,60,.08);\r\n      background: rgba(200,155,60,.02);\r\n      transition: all .4s var(--ease-smooth);\r\n    }\r\n\r\n    .value-item:hover {\r\n      border-color: rgba(200,155,60,.2);\r\n      background: rgba(200,155,60,.04);\r\n      transform: translateY(-4px);\r\n    }\r\n\r\n    .value-icon {\r\n      width: 40px;\r\n      height: 40px;\r\n      margin: 0 auto 12px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .value-icon svg {\r\n      width: 26px;\r\n      height: 26px;\r\n      stroke: var(--gold);\r\n      fill: none;\r\n      stroke-width: 1.2;\r\n    }\r\n\r\n    .value-title {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: .7rem;\r\n      font-weight: 600;\r\n      color: var(--gold);\r\n      letter-spacing: 2px;\r\n      text-transform: uppercase;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    .value-desc {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: .72rem;\r\n      color: var(--white-muted);\r\n      font-weight: 300;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SECTION 3 \u2014 EXTENSION OF YOU\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .extension {\r\n      position: relative;\r\n      z-index: 2;\r\n      padding: 120px 8%;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 80px;\r\n      flex-direction: row-reverse;\r\n    }\r\n\r\n    .extension-visual {\r\n      flex: 1;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      min-height: 500px;\r\n    }\r\n\r\n    .ext-frame {\r\n      position: relative;\r\n      width: 360px;\r\n      height: 460px;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .ext-frame img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      filter: brightness(.82) contrast(1.08);\r\n      transition: transform .8s var(--ease-out);\r\n    }\r\n\r\n    .ext-frame:hover img {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .ext-frame::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 12px;\r\n      border: 1px solid rgba(200,155,60,.18);\r\n      z-index: 2;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .ext-frame::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      height: 35%;\r\n      background: linear-gradient(to top, rgba(10,10,10,.65), transparent);\r\n      z-index: 2;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .ext-frame-accent {\r\n      position: absolute;\r\n      top: 16px;\r\n      right: -16px;\r\n      width: 360px;\r\n      height: 460px;\r\n      border: 1px solid rgba(200,155,60,.08);\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* Quote overlay *\/\r\n    .ext-quote {\r\n      position: absolute;\r\n      bottom: 30px;\r\n      left: -20px;\r\n      background: rgba(10,10,10,.92);\r\n      backdrop-filter: blur(12px);\r\n      border: 1px solid rgba(200,155,60,.15);\r\n      padding: 20px 28px;\r\n      max-width: 280px;\r\n      z-index: 5;\r\n    }\r\n\r\n    .ext-quote p {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: .85rem;\r\n      font-style: italic;\r\n      color: var(--white);\r\n      line-height: 1.6;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .ext-quote span {\r\n      font-family: 'Montserrat', sans-serif;\r\n      font-size: .6rem;\r\n      color: var(--gold);\r\n      letter-spacing: 3px;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .extension-content {\r\n      flex: 1;\r\n    }\r\n\r\n    .ext-heading {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: clamp(1.8rem, 3vw, 2.6rem);\r\n      font-weight: 700;\r\n      color: var(--white);\r\n      line-height: 1.2;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .ext-heading .gold {\r\n      color: var(--gold);\r\n      font-style: italic;\r\n    }\r\n\r\n    .ext-tagline {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: .95rem;\r\n      color: var(--gold-light);\r\n      letter-spacing: 2px;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .ext-sep {\r\n      width: 60px;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, var(--gold), transparent);\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .ext-text {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: .92rem;\r\n      font-weight: 300;\r\n      color: var(--white-muted);\r\n      line-height: 1.95;\r\n      margin-bottom: 20px;\r\n      max-width: 500px;\r\n    }\r\n\r\n    \/* Trait tags *\/\r\n    .traits {\r\n      display: flex;\r\n      gap: 10px;\r\n      flex-wrap: wrap;\r\n      margin-bottom: 40px;\r\n    }\r\n\r\n    .trait {\r\n      padding: 8px 20px;\r\n      border: 1px solid rgba(200,155,60,.2);\r\n      font-family: 'Montserrat', sans-serif;\r\n      font-size: .65rem;\r\n      font-weight: 500;\r\n      color: var(--gold);\r\n      letter-spacing: 2.5px;\r\n      text-transform: uppercase;\r\n      transition: all .3s ease;\r\n    }\r\n\r\n    .trait:hover {\r\n      background: rgba(200,155,60,.08);\r\n      border-color: var(--gold);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SECTION 4 \u2014 DISCOVER CTA\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .discover {\r\n      position: relative;\r\n      z-index: 2;\r\n      padding: 120px 8%;\r\n      text-align: center;\r\n      background:\r\n        linear-gradient(135deg, var(--charcoal) 0%, var(--black-soft) 50%, var(--charcoal) 100%);\r\n      border-top: 1px solid rgba(200,155,60,.08);\r\n    }\r\n\r\n    .discover-inner {\r\n      max-width: 700px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .discover-heading {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: clamp(2rem, 4vw, 3.2rem);\r\n      font-weight: 700;\r\n      color: var(--white);\r\n      line-height: 1.15;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .discover-heading .gold {\r\n      color: var(--gold);\r\n      font-style: italic;\r\n    }\r\n\r\n    .discover-tagline {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: 1rem;\r\n      color: var(--gold-light);\r\n      letter-spacing: 2px;\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .discover-sep {\r\n      width: 80px;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n      margin: 0 auto 28px;\r\n    }\r\n\r\n    .discover-text {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: .92rem;\r\n      font-weight: 300;\r\n      color: var(--white-muted);\r\n      line-height: 1.9;\r\n      margin-bottom: 50px;\r\n      max-width: 520px;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n\r\n    \/* CTA Buttons Grid *\/\r\n    .cta-grid {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 16px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .cta-card {\r\n      position: relative;\r\n      width: 220px;\r\n      padding: 40px 24px 36px;\r\n      border: 1px solid rgba(200,155,60,.12);\r\n      background: rgba(200,155,60,.02);\r\n      text-decoration: none;\r\n      overflow: hidden;\r\n      transition: all .5s var(--ease-smooth);\r\n      cursor: pointer;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 16px;\r\n    }\r\n\r\n    .cta-card::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(135deg, rgba(200,155,60,.04) 0%, transparent 60%);\r\n      opacity: 0;\r\n      transition: opacity .4s ease;\r\n    }\r\n\r\n    .cta-card:hover {\r\n      border-color: rgba(200,155,60,.3);\r\n      transform: translateY(-6px);\r\n      box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 40px rgba(200,155,60,.06);\r\n    }\r\n\r\n    .cta-card:hover::before { opacity: 1; }\r\n\r\n    .cta-card-icon {\r\n      width: 50px;\r\n      height: 50px;\r\n      border: 1px solid rgba(200,155,60,.2);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      z-index: 2;\r\n      transition: all .4s ease;\r\n    }\r\n\r\n    .cta-card:hover .cta-card-icon {\r\n      border-color: var(--gold);\r\n      background: rgba(200,155,60,.08);\r\n    }\r\n\r\n    .cta-card-icon svg {\r\n      width: 22px;\r\n      height: 22px;\r\n      stroke: var(--gold);\r\n      fill: none;\r\n      stroke-width: 1.2;\r\n    }\r\n\r\n    .cta-card-title {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: .8rem;\r\n      font-weight: 600;\r\n      color: var(--white);\r\n      letter-spacing: 2px;\r\n      text-transform: uppercase;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .cta-card-sub {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: .7rem;\r\n      color: var(--white-muted);\r\n      font-weight: 300;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .cta-card-arrow {\r\n      font-family: 'Montserrat', sans-serif;\r\n      font-size: .65rem;\r\n      font-weight: 500;\r\n      color: var(--gold);\r\n      letter-spacing: 3px;\r\n      text-transform: uppercase;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      position: relative;\r\n      z-index: 2;\r\n      transition: gap .3s ease;\r\n    }\r\n\r\n    .cta-card:hover .cta-card-arrow { gap: 14px; }\r\n\r\n    \/* Bottom decorative line *\/\r\n    .discover-bottom-deco {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 20px;\r\n      margin-top: 80px;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       STATS BAR\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .stats-bar {\r\n      position: relative;\r\n      z-index: 2;\r\n      padding: 50px 8%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 60px;\r\n      border-top: 1px solid rgba(200,155,60,.06);\r\n      border-bottom: 1px solid rgba(200,155,60,.06);\r\n      background: var(--black);\r\n    }\r\n\r\n    .stat {\r\n      text-align: center;\r\n      padding: 0 30px;\r\n    }\r\n\r\n    .stat:not(:last-child) {\r\n      border-right: 1px solid rgba(200,155,60,.08);\r\n      padding-right: 60px;\r\n    }\r\n\r\n    .stat-num {\r\n      font-family: 'Cinzel', serif;\r\n      font-size: 2.2rem;\r\n      font-weight: 700;\r\n      color: var(--gold);\r\n      line-height: 1;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    .stat-label {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: .68rem;\r\n      color: var(--white-muted);\r\n      letter-spacing: 2px;\r\n      text-transform: uppercase;\r\n      font-weight: 300;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       ANIMATION ON SCROLL\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .reveal {\r\n      opacity: 0;\r\n      transform: translateY(40px);\r\n      transition: all .9s var(--ease-out);\r\n    }\r\n\r\n    .reveal.visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    .reveal-left {\r\n      opacity: 0;\r\n      transform: translateX(-50px);\r\n      transition: all 1s var(--ease-out);\r\n    }\r\n\r\n    .reveal-left.visible {\r\n      opacity: 1;\r\n      transform: translateX(0);\r\n    }\r\n\r\n    .reveal-right {\r\n      opacity: 0;\r\n      transform: translateX(50px);\r\n      transition: all 1s var(--ease-out);\r\n    }\r\n\r\n    .reveal-right.visible {\r\n      opacity: 1;\r\n      transform: translateX(0);\r\n    }\r\n\r\n    .reveal-scale {\r\n      opacity: 0;\r\n      transform: scale(.9);\r\n      transition: all 1s var(--ease-out);\r\n    }\r\n\r\n    .reveal-scale.visible {\r\n      opacity: 1;\r\n      transform: scale(1);\r\n    }\r\n\r\n    @keyframes fadeInUp {\r\n      from { opacity: 0; transform: translateY(30px); }\r\n      to   { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    \/* Staggered children *\/\r\n    .stagger > * {\r\n      opacity: 0;\r\n      transform: translateY(25px);\r\n      transition: all .7s var(--ease-out);\r\n    }\r\n\r\n    .stagger.visible > *:nth-child(1) { transition-delay: .1s; opacity: 1; transform: translateY(0); }\r\n    .stagger.visible > *:nth-child(2) { transition-delay: .2s; opacity: 1; transform: translateY(0); }\r\n    .stagger.visible > *:nth-child(3) { transition-delay: .3s; opacity: 1; transform: translateY(0); }\r\n    .stagger.visible > *:nth-child(4) { transition-delay: .4s; opacity: 1; transform: translateY(0); }\r\n    .stagger.visible > *:nth-child(5) { transition-delay: .5s; opacity: 1; transform: translateY(0); }\r\n    .stagger.visible > *:nth-child(6) { transition-delay: .6s; opacity: 1; transform: translateY(0); }\r\n    .stagger.visible > *:nth-child(7) { transition-delay: .7s; opacity: 1; transform: translateY(0); }\r\n    .stagger.visible > *:nth-child(8) { transition-delay: .8s; opacity: 1; transform: translateY(0); }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       RESPONSIVE\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    @media (max-width: 1100px) {\r\n      .philosophy, .extension {\r\n        gap: 50px;\r\n      }\r\n\r\n      .phil-frame, .phil-frame-accent {\r\n        width: 320px;\r\n        height: 420px;\r\n      }\r\n\r\n      .ext-frame, .ext-frame-accent {\r\n        width: 300px;\r\n        height: 400px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 992px) {\r\n      .philosophy, .extension {\r\n        flex-direction: column;\r\n        text-align: center;\r\n        padding: 80px 6%;\r\n      }\r\n\r\n      .extension {\r\n        flex-direction: column;\r\n      }\r\n\r\n      .philosophy-content, .extension-content {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n      }\r\n\r\n      .phil-text, .ext-text {\r\n        text-align: center;\r\n      }\r\n\r\n      .phil-sep, .ext-sep {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n      }\r\n\r\n      .values-row {\r\n        justify-content: center;\r\n      }\r\n\r\n      .traits {\r\n        justify-content: center;\r\n      }\r\n\r\n      .phil-frame-accent, .ext-frame-accent {\r\n        display: none;\r\n      }\r\n\r\n      .experience-badge {\r\n        right: 10px;\r\n        bottom: 10px;\r\n        width: 100px;\r\n        height: 100px;\r\n      }\r\n\r\n      .badge-number { font-size: 1.6rem; }\r\n\r\n      .ext-quote {\r\n        left: 10px;\r\n        bottom: 10px;\r\n      }\r\n\r\n      .stats-bar {\r\n        flex-wrap: wrap;\r\n        gap: 30px;\r\n      }\r\n\r\n      .stat:not(:last-child) {\r\n        border-right: none;\r\n        padding-right: 30px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .about-hero {\r\n        padding: 100px 6% 80px;\r\n      }\r\n\r\n      .about-title {\r\n        font-size: clamp(1.8rem, 6vw, 2.8rem);\r\n      }\r\n\r\n      .phil-heading, .ext-heading {\r\n        font-size: clamp(1.5rem, 5vw, 2rem);\r\n      }\r\n\r\n      .values-row {\r\n        flex-direction: column;\r\n        gap: 16px;\r\n        max-width: 280px;\r\n        margin: 0 auto 40px;\r\n      }\r\n\r\n      .cta-grid {\r\n        flex-direction: column;\r\n        align-items: center;\r\n      }\r\n\r\n      .cta-card {\r\n        width: 100%;\r\n        max-width: 320px;\r\n      }\r\n\r\n      .discover {\r\n        padding: 80px 6%;\r\n      }\r\n\r\n      .stats-bar {\r\n        flex-direction: column;\r\n        gap: 24px;\r\n        padding: 40px 6%;\r\n      }\r\n\r\n      .stat:not(:last-child) {\r\n        border-right: none;\r\n        border-bottom: 1px solid rgba(200,155,60,.06);\r\n        padding-bottom: 24px;\r\n        padding-right: 0;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .phil-frame {\r\n        width: 280px;\r\n        height: 360px;\r\n      }\r\n\r\n      .ext-frame {\r\n        width: 260px;\r\n        height: 340px;\r\n      }\r\n\r\n      .ext-quote {\r\n        display: none;\r\n      }\r\n\r\n      .deco-line {\r\n        width: 30px;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n  <!-- Ambient background -->\r\n  <div class=\"ambient-bg\">\r\n    <div class=\"ambient-orb\"><\/div>\r\n    <div class=\"ambient-orb\"><\/div>\r\n    <div class=\"ambient-orb\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Floating particles -->\r\n  <div class=\"particles-about\">\r\n    <i class=\"p-dot\"><\/i><i class=\"p-dot\"><\/i><i class=\"p-dot\"><\/i>\r\n    <i class=\"p-dot\"><\/i><i class=\"p-dot\"><\/i><i class=\"p-dot\"><\/i>\r\n    <i class=\"p-dot\"><\/i>\r\n  <\/div>\r\n\r\n  <div class=\"about-section\">\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SECTION 1 \u2014 HERO INTRO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"about-hero\">\r\n      <div class=\"about-hero-inner stagger\">\r\n\r\n        <div class=\"deco-top\">\r\n          <div class=\"deco-line\"><\/div>\r\n          <div class=\"deco-diamond\"><\/div>\r\n          <div class=\"deco-line\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"section-label\">\r\n          <span class=\"label-line\"><\/span>\r\n          <span class=\"label-text\">Our Story<\/span>\r\n          <span class=\"label-line\"><\/span>\r\n        <\/div>\r\n\r\n        <h1 class=\"about-title\">\r\n          The Art of<br>\r\n          <span class=\"gold\">Perfumery,<\/span> <span class=\"light\">Redefined<\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"about-tagline\">Where Passion Meets Precision<\/p>\r\n\r\n        <div class=\"gold-sep\"><\/div>\r\n\r\n        <p class=\"about-intro\">\r\n          At The Redbodies, we believe that fragrance is the most intimate form of \r\n          self-expression. Born from a passion for the extraordinary, we craft scents \r\n          that transcend the ordinary \u2014 each bottle a journey, each note a memory \r\n          waiting to unfold.\r\n        <\/p>\r\n\r\n        <div class=\"scroll-hint\">\r\n          <span>Discover More<\/span>\r\n          <div class=\"scroll-hint-bar\"><\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SECTION 2 \u2014 PHILOSOPHY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"philosophy\">\r\n\r\n      <div class=\"philosophy-visual reveal-left\">\r\n        <div class=\"phil-frame-accent\"><\/div>\r\n        <div class=\"phil-frame\">\r\n          <img decoding=\"async\" \r\n            src=\"https:\/\/images.unsplash.com\/photo-1541643600914-78b084683601?w=600&h=800&fit=crop&crop=center&q=80\" \r\n            alt=\"Crafting premium fragrances\"\r\n            loading=\"lazy\"\r\n          >\r\n        <\/div>\r\n        <div class=\"experience-badge\">\r\n          <span class=\"badge-number\" data-target=\"5\">0<\/span>\r\n          <span class=\"badge-label\">Years of Craft<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"philosophy-content reveal-right\">\r\n\r\n        <div class=\"phil-label section-label\">\r\n          <span class=\"label-line\"><\/span>\r\n          <span class=\"label-text\">Our Philosophy<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"phil-heading\">\r\n          Meticulous<br><span class=\"gold\">Craftsmanship<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"phil-tagline\">Every Bottle Tells a Story<\/p>\r\n\r\n        <div class=\"phil-sep\"><\/div>\r\n\r\n        <p class=\"phil-text\">\r\n          Every bottle from The Redbodies is a testament to meticulous craftsmanship. \r\n          We journey across the globe to source the world's finest ingredients, composing \r\n          them into a harmonious symphony of notes that evolve with you.\r\n        <\/p>\r\n\r\n        <div class=\"values-row stagger\">\r\n          <div class=\"value-item\">\r\n            <div class=\"value-icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n                <path d=\"M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20\"\/>\r\n                <path d=\"M2 12h20\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"value-title\">Global Sourcing<\/div>\r\n            <div class=\"value-desc\">Rare ingredients from every continent<\/div>\r\n          <\/div>\r\n          <div class=\"value-item\">\r\n            <div class=\"value-icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"value-title\">Pure Quality<\/div>\r\n            <div class=\"value-desc\">100% authentic premium ingredients<\/div>\r\n          <\/div>\r\n          <div class=\"value-item\">\r\n            <div class=\"value-icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"value-title\">Made with Love<\/div>\r\n            <div class=\"value-desc\">Passion in every single drop<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 STATS BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <div class=\"stats-bar stagger\">\r\n      <div class=\"stat\">\r\n        <div class=\"stat-num\" data-target=\"150\">0<\/div>\r\n        <div class=\"stat-label\">Unique Fragrances<\/div>\r\n      <\/div>\r\n      <div class=\"stat\">\r\n        <div class=\"stat-num\" data-target=\"50\">0<\/div>\r\n        <div class=\"stat-label\">Countries Served<\/div>\r\n      <\/div>\r\n      <div class=\"stat\">\r\n        <div class=\"stat-num\" data-target=\"200\">0<\/div>\r\n        <div class=\"stat-label\">Premium Ingredients<\/div>\r\n      <\/div>\r\n      <div class=\"stat\">\r\n        <div class=\"stat-num\" data-target=\"98\">0<\/div>\r\n        <div class=\"stat-label\">Client Satisfaction %<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SECTION 3 \u2014 EXTENSION OF YOU \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"extension\">\r\n\r\n      <div class=\"extension-visual reveal-right\">\r\n        <div class=\"ext-frame-accent\"><\/div>\r\n        <div class=\"ext-frame\">\r\n          <img decoding=\"async\" \r\n            src=\"https:\/\/images.unsplash.com\/photo-1595425959380-35a3d1c1fc40?w=600&h=800&fit=crop&crop=center&q=80\" \r\n            alt=\"Your signature scent\"\r\n            loading=\"lazy\"\r\n          >\r\n        <\/div>\r\n        <div class=\"ext-quote\">\r\n          <p>\"A fragrance is a story told by the skin.\"<\/p>\r\n          <span>\u2014 The Redbodies<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"extension-content reveal-left\">\r\n\r\n        <div class=\"phil-label section-label\">\r\n          <span class=\"label-line\"><\/span>\r\n          <span class=\"label-text\">Your Identity<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"ext-heading\">\r\n          An Extension<br><span class=\"gold\">of You<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"ext-tagline\">Your Scent, Your Signature<\/p>\r\n\r\n        <div class=\"ext-sep\"><\/div>\r\n\r\n        <p class=\"ext-text\">\r\n          Your signature scent is an extension of your being. It announces your arrival \r\n          and leaves a trail of who you are. We design for the confident, the stylish, \r\n          the sophisticated individual who understands that luxury is an experience.\r\n        <\/p>\r\n\r\n        <p class=\"ext-text\" style=\"margin-bottom: 30px;\">\r\n          Every composition is thoughtfully layered \u2014 from the first captivating top notes \r\n          to the warm, lingering base \u2014 creating a fragrance journey as unique as you are.\r\n        <\/p>\r\n\r\n        <div class=\"traits stagger\">\r\n          <span class=\"trait\">Confident<\/span>\r\n          <span class=\"trait\">Stylish<\/span>\r\n          <span class=\"trait\">Sophisticated<\/span>\r\n          <span class=\"trait\">Timeless<\/span>\r\n          <span class=\"trait\">Bold<\/span>\r\n          <span class=\"trait\">Elegant<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SECTION 4 \u2014 DISCOVER CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n    <section class=\"discover\">\r\n      <div class=\"discover-inner reveal\">\r\n\r\n        <div class=\"section-label\" style=\"justify-content: center; margin-bottom: 28px;\">\r\n          <span class=\"label-line\"><\/span>\r\n          <span class=\"label-text\">Begin Your Journey<\/span>\r\n          <span class=\"label-line\"><\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"discover-heading\">\r\n          Discover Your<br>\r\n          <span class=\"gold\">Signature Story<\/span>\r\n        <\/h2>\r\n\r\n        <p class=\"discover-tagline\">Find the Fragrance That Speaks for You<\/p>\r\n\r\n        <div class=\"discover-sep\"><\/div>\r\n\r\n        <p class=\"discover-text\">\r\n          Whether you seek the power of masculine woods, the grace of feminine florals, \r\n          or the freedom of a unisex blend \u2014 your perfect scent awaits.\r\n        <\/p>\r\n\r\n        <div class=\"cta-grid stagger\">\r\n\r\n          <!-- Women's -->\r\n          <a href=\"\r\nhttps:\/\/theredbodies.com\/index.php\/product-category\/womenss\/\" class=\"cta-card\">\r\n            <div class=\"cta-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"8\" r=\"5\"\/>\r\n                <path d=\"M12 13v7\"\/>\r\n                <path d=\"M9 18h6\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"cta-card-title\">Shop Women's<\/div>\r\n            <div class=\"cta-card-sub\">Floral \u00b7 Oriental \u00b7 Modern<\/div>\r\n            <div class=\"cta-card-arrow\">Explore <span>\u2192<\/span><\/div>\r\n          <\/a>\r\n\r\n          <!-- Men's -->\r\n          <a href=\"https:\/\/theredbodies.com\/index.php\/product-category\/mans\/\" class=\"cta-card\">\r\n            <div class=\"cta-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"10\" cy=\"14\" r=\"5\"\/>\r\n                <path d=\"M19 5l-4.5 4.5\"\/>\r\n                <path d=\"M15 5h4v4\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"cta-card-title\">Shop Men's<\/div>\r\n            <div class=\"cta-card-sub\">Woody \u00b7 Amber \u00b7 Powerful<\/div>\r\n            <div class=\"cta-card-arrow\">Explore <span>\u2192<\/span><\/div>\r\n          <\/a>\r\n\r\n          <!-- Unisex -->\r\n          <a href=\"https:\/\/theredbodies.com\/index.php\/product-category\/unisex\/\" class=\"cta-card\">\r\n            <div class=\"cta-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"cta-card-title\">Shop Unisex<\/div>\r\n            <div class=\"cta-card-sub\">Niche \u00b7 Artisanal \u00b7 Unique<\/div>\r\n            <div class=\"cta-card-arrow\">Explore <span>\u2192<\/span><\/div>\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"discover-bottom-deco\">\r\n          <div class=\"deco-line\"><\/div>\r\n          <div class=\"deco-diamond\"><\/div>\r\n          <div class=\"deco-line\"><\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/div>\r\n\r\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n  <script>\r\n    \/\/ \u2500\u2500 Scroll Reveal \u2500\u2500\r\n    const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale, .stagger');\r\n\r\n    const revealObserver = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('visible');\r\n        }\r\n      });\r\n    }, {\r\n      threshold: 0.15,\r\n      rootMargin: '0px 0px -40px 0px'\r\n    });\r\n\r\n    revealElements.forEach(el => revealObserver.observe(el));\r\n\r\n    \/\/ \u2500\u2500 Stagger the hero section on load \u2500\u2500\r\n    window.addEventListener('load', () => {\r\n      setTimeout(() => {\r\n        document.querySelector('.about-hero-inner').classList.add('visible');\r\n      }, 300);\r\n    });\r\n\r\n    \/\/ \u2500\u2500 Counter Animation \u2500\u2500\r\n    const counters = document.querySelectorAll('[data-target]');\r\n\r\n    const counterObserver = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          const el = entry.target;\r\n          const target = parseInt(el.dataset.target);\r\n          const duration = 2200;\r\n          const startTime = performance.now();\r\n\r\n          function easeOut(t) {\r\n            return 1 - Math.pow(1 - t, 3);\r\n          }\r\n\r\n          function updateCounter(currentTime) {\r\n            const elapsed = currentTime - startTime;\r\n            const progress = Math.min(elapsed \/ duration, 1);\r\n            const easedProgress = easeOut(progress);\r\n            const current = Math.floor(easedProgress * target);\r\n\r\n            \/\/ Check if element has suffix like \"+\" or \"%\"\r\n            const parentText = el.closest('.stat') ? '' : '';\r\n            el.textContent = current;\r\n\r\n            if (progress < 1) {\r\n              requestAnimationFrame(updateCounter);\r\n            } else {\r\n              \/\/ Add suffix based on context\r\n              if (el.closest('.stat')) {\r\n                const label = el.nextElementSibling?.textContent || '';\r\n                if (target >= 50 && !label.includes('%')) {\r\n                  el.textContent = target + '+';\r\n                } else {\r\n                  el.textContent = target + (label.includes('%') ? '%' : '+');\r\n                }\r\n              } else {\r\n                el.textContent = target + '+';\r\n              }\r\n            }\r\n          }\r\n\r\n          requestAnimationFrame(updateCounter);\r\n          counterObserver.unobserve(el);\r\n        }\r\n      });\r\n    }, { threshold: 0.5 });\r\n\r\n    counters.forEach(c => counterObserver.observe(c));\r\n\r\n    \/\/ \u2500\u2500 Parallax subtle effect on scroll \u2500\u2500\r\n    let ticking = false;\r\n\r\n    window.addEventListener('scroll', () => {\r\n      if (!ticking) {\r\n        requestAnimationFrame(() => {\r\n          const scrolled = window.pageYOffset;\r\n\r\n          \/\/ Move ambient orbs slightly\r\n          document.querySelectorAll('.ambient-orb').forEach((orb, i) => {\r\n            const speed = (i + 1) * 0.02;\r\n            orb.style.transform = `translateY(${scrolled * speed}px)`;\r\n          });\r\n\r\n          ticking = false;\r\n        });\r\n        ticking = true;\r\n      }\r\n    });\r\n\r\n    \/\/ \u2500\u2500 Image fallbacks \u2500\u2500\r\n    document.querySelectorAll('.phil-frame img, .ext-frame img').forEach(img => {\r\n      img.addEventListener('error', function () {\r\n        const fallbacks = [\r\n          'https:\/\/images.pexels.com\/photos\/965989\/pexels-photo-965989.jpeg?auto=compress&w=600&h=800&fit=crop',\r\n          'https:\/\/images.pexels.com\/photos\/3059609\/pexels-photo-3059609.jpeg?auto=compress&w=600&h=800&fit=crop'\r\n        ];\r\n        const index = this.closest('.philosophy') ? 0 : 1;\r\n        this.src = fallbacks[index];\r\n      });\r\n    });\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\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>About Us \u2014 The Redbodies Our Story The Art of Perfumery, Redefined Where Passion Meets Precision At The Redbodies, we believe that fragrance is the most intimate form of self-expression. Born from a passion for the extraordinary, we craft scents that transcend the ordinary \u2014 each bottle a journey, each note a memory waiting to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-229","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/pages\/229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":16,"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/pages\/229\/revisions"}],"predecessor-version":[{"id":1266,"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/pages\/229\/revisions\/1266"}],"wp:attachment":[{"href":"https:\/\/theredbodies.com\/index.php\/wp-json\/wp\/v2\/media?parent=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}