{"id":197,"date":"2026-06-26T19:24:19","date_gmt":"2026-06-26T19:24:19","guid":{"rendered":"https:\/\/demowebdesign.live\/oluwaseun\/?page_id=197"},"modified":"2026-06-26T23:14:45","modified_gmt":"2026-06-26T23:14:45","slug":"about","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"197\" class=\"elementor elementor-197\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26ade95 e-con-full e-flex e-con e-parent\" data-id=\"26ade95\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4370bbc e-con-full e-flex e-con e-parent\" data-id=\"4370bbc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffda2bd elementor-widget elementor-widget-html\" data-id=\"ffda2bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Cinzel:wght@400;600;700&display=swap\");\r\n  *,\r\n  *::before,\r\n  *::after {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n  body {\r\n    background: #000;\r\n    color: #e8d5a3;\r\n    font-family: \"Cormorant Garamond\", Georgia, serif;\r\n    overflow-x: hidden;\r\n    cursor: none;\r\n  }\r\n  #gc {\r\n    position: fixed;\r\n    width: 280px;\r\n    height: 280px;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    z-index: 9999;\r\n    transform: translate(-50%, -50%);\r\n    background: radial-gradient(\r\n      circle,\r\n      rgba(212, 175, 55, 0.1) 0%,\r\n      rgba(212, 175, 55, 0.03) 40%,\r\n      transparent 70%\r\n    );\r\n  }\r\n  #gd {\r\n    position: fixed;\r\n    width: 7px;\r\n    height: 7px;\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    z-index: 10000;\r\n    transform: translate(-50%, -50%);\r\n    background: rgba(212, 175, 55, 0.9);\r\n    box-shadow: 0 0 10px 3px rgba(212, 175, 55, 0.55);\r\n  }\r\n  \/* HERO *\/\r\n  #hero {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    background: #050505;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    padding: 80px 24px;\r\n  }\r\n  \r\n  \/* NEW: Large faint static geometry to fill space *\/\r\n  #bg-layers {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n    opacity: 0.15;\r\n  }\r\n\r\n  #pc {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n  }\r\n  #wsv {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n    opacity: 0.5;\r\n  }\r\n  .sym {\r\n    position: absolute;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n    opacity: 0;\r\n    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.35));\r\n    animation:\r\n      fIn 2.2s ease forwards,\r\n      drift 11s ease-in-out infinite;\r\n  }\r\n  @keyframes fIn {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(18px) scale(0.85);\r\n    }\r\n    to {\r\n      opacity: 0.55;\r\n      transform: translateY(0) scale(1);\r\n    }\r\n  }\r\n  @keyframes drift {\r\n    0%,\r\n    100% {\r\n      transform: translateY(0) rotate(0deg);\r\n    }\r\n    33% {\r\n      transform: translateY(-12px) rotate(3deg);\r\n    }\r\n    66% {\r\n      transform: translateY(7px) rotate(-2deg);\r\n    }\r\n  }\r\n  .hc {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 780px;\r\n    animation: rev 1.8s ease forwards;\r\n  }\r\n  @keyframes rev {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(32px);\r\n    }\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n  .ey {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 11px;\r\n    letter-spacing: 0.45em;\r\n    color: #7a6530;\r\n    text-transform: uppercase;\r\n    margin-bottom: 26px;\r\n    animation: rev 2s 0.3s ease both;\r\n  }\r\n  .tt {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: clamp(54px, 8.5vw, 92px);\r\n    font-weight: 700;\r\n    line-height: 0.95;\r\n    letter-spacing: 0.06em;\r\n    color: #e8d5a3;\r\n    text-shadow:\r\n      0 0 40px rgba(212, 175, 55, 0.3),\r\n      0 0 80px rgba(212, 175, 55, 0.12),\r\n      0 2px 4px rgba(0, 0, 0, 0.8);\r\n    margin-bottom: 8px;\r\n    animation: rev 2s 0.5s ease both;\r\n  }\r\n  .ta {\r\n    color: #d4af37;\r\n    text-shadow:\r\n      0 0 28px rgba(212, 175, 55, 0.55),\r\n      0 0 56px rgba(212, 175, 55, 0.25);\r\n  }\r\n  .dv {\r\n    width: 110px;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, #d4af37, transparent);\r\n    margin: 30px auto;\r\n    position: relative;\r\n    animation: rev 2s 0.7s ease both;\r\n  }\r\n  .dv::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: -2px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 5px;\r\n    height: 5px;\r\n    background: #d4af37;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 7px 3px rgba(212, 175, 55, 0.55);\r\n  }\r\n  .sb {\r\n    font-family: \"Cormorant Garamond\", serif;\r\n    font-size: 34px !important;\r\n    font-weight: 300;\r\n    font-style: italic;\r\n    color: #c8b97a;\r\n    letter-spacing: 0.04em;\r\n    line-height: 1.5;\r\n    margin-bottom: 14px;\r\n    animation: rev 2s 0.9s ease both;\r\n  }\r\n  .mc {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 15px;\r\n    letter-spacing: 0.38em;\r\n    color: #fff;\r\n    text-transform: uppercase;\r\n    margin-bottom: 50px;\r\n    animation: rev 2s 1.1s ease both;\r\n  }\r\n  .cg {\r\n    display: flex;\r\n    gap: 18px;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n    animation: rev 2s 1.4s ease both;\r\n  }\r\n  .btn {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 11px;\r\n    letter-spacing: 0.28em;\r\n    text-transform: uppercase;\r\n    padding: 15px 38px;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition:\r\n      transform 0.35s ease,\r\n      box-shadow 0.35s ease,\r\n      background 0.35s ease;\r\n  }\r\n  .bp {\r\n    background: linear-gradient(\r\n      135deg,\r\n      #c9a227 0%,\r\n      #e8d48b 42%,\r\n      #c9a227 70%,\r\n      #a07820 100%\r\n    );\r\n    color: #1a1200;\r\n    font-weight: 600;\r\n    box-shadow:\r\n      0 0 28px rgba(212, 175, 55, 0.22),\r\n      0 4px 18px rgba(0, 0, 0, 0.5);\r\n  }\r\n  .bp:hover {\r\n    transform: translateY(-3px) scale(1.02);\r\n    box-shadow:\r\n      0 0 50px rgba(212, 175, 55, 0.52),\r\n      0 8px 28px rgba(0, 0, 0, 0.6);\r\n  }\r\n  .bs {\r\n    background: transparent;\r\n    color: #d4af37;\r\n    border: 1px solid rgba(212, 175, 55, 0.38);\r\n  }\r\n  .bs:hover {\r\n    background: rgba(212, 175, 55, 0.07);\r\n    border-color: rgba(212, 175, 55, 0.82);\r\n    color: #f0d060;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 0 32px rgba(212, 175, 55, 0.28);\r\n  }\r\n  .sh {\r\n    position: absolute;\r\n    bottom: 34px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 10;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 7px;\r\n    opacity: 0.4;\r\n    animation:\r\n      rev 2s 2.2s ease both,\r\n      bob 2.2s 3.5s ease-in-out infinite;\r\n  }\r\n  @keyframes bob {\r\n    0%,\r\n    100% {\r\n      transform: translateX(-50%) translateY(0);\r\n    }\r\n    50% {\r\n      transform: translateX(-50%) translateY(6px);\r\n    }\r\n  }\r\n  .sh span {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: 9px;\r\n    letter-spacing: 0.38em;\r\n    color: #7a6530;\r\n    text-transform: uppercase;\r\n  }\r\n  .sa {\r\n    width: 16px;\r\n    height: 16px;\r\n    border-right: 1px solid #7a6530;\r\n    border-bottom: 1px solid #7a6530;\r\n    transform: rotate(45deg);\r\n  }\r\n  \/* INVITATION *\/\r\n  #inv {\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: 100vh;\r\n    background: radial-gradient(\r\n      ellipse 80% 55% at 50% 50%,\r\n      #0d0900 0%,\r\n      #030303 55%,\r\n      #000 100%\r\n    );\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 100px 24px;\r\n  }\r\n  #pc2 {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n  }\r\n  .pr {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 380px;\r\n    height: 380px;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(212, 175, 55, 0.05);\r\n    pointer-events: none;\r\n    animation: pulse 5.5s ease-in-out infinite;\r\n  }\r\n  @keyframes pulse {\r\n    0% {\r\n      transform: translate(-50%, -50%) scale(0.55);\r\n      opacity: 0.85;\r\n    }\r\n    100% {\r\n      transform: translate(-50%, -50%) scale(2.6);\r\n      opacity: 0;\r\n    }\r\n  }\r\n  .ii {\r\n    position: relative;\r\n    z-index: 5;\r\n    max-width: 720px;\r\n    text-align: center;\r\n  }\r\n  .rv {\r\n    opacity: 0;\r\n    transform: translateY(22px);\r\n    transition:\r\n      opacity 1.1s ease,\r\n      transform 1.1s ease;\r\n  }\r\n  .rv.vis {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  .rl {\r\n    width: 1px;\r\n    height: 0;\r\n    background: linear-gradient(180deg, transparent, #d4af37 50%, transparent);\r\n    margin: 0 auto 46px;\r\n    transition: height 1.5s ease;\r\n  }\r\n  .rl.vis {\r\n    height: 76px;\r\n  }\r\n  .ih {\r\n    font-family: \"Cormorant Garamond\", serif;\r\n    font-size: clamp(20px, 3.8vw, 34px);\r\n    font-weight: 400;\r\n    font-style: italic;\r\n    color: #c8b060;\r\n    line-height: 1.58;\r\n    letter-spacing: 0.02em;\r\n    margin-bottom: 50px;\r\n    padding: 0 16px;\r\n  }\r\n  .ib {\r\n    font-family: \"Cormorant Garamond\", serif;\r\n    font-size: clamp(16px, 2.1vw, 21px);\r\n    font-weight: 300;\r\n    line-height: 1.95;\r\n    letter-spacing: 0.03em;\r\n    margin-bottom: 22px;\r\n  }\r\n  .ib em {\r\n    color: #c8b060;\r\n    font-style: italic;\r\n    font-weight: 400;\r\n  }\r\n  .ic {\r\n    font-family: \"Cinzel\", serif;\r\n    font-size: clamp(12px, 1.8vw, 16px);\r\n    font-weight: 600;\r\n    color: #d4af37;\r\n    letter-spacing: 0.22em;\r\n    text-transform: uppercase;\r\n    margin-top: 54px;\r\n    text-shadow: 0 0 18px rgba(212, 175, 55, 0.38);\r\n    line-height: 1.7;\r\n  }\r\n<\/style>\r\n\r\n<div id=\"gc\"><\/div>\r\n<div id=\"gd\"><\/div>\r\n\r\n<section id=\"hero\">\r\n  <!-- NEW: Dense background geometry -->\r\n  <div id=\"bg-layers\">\r\n    <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 1440 900\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n      <circle cx=\"20%\" cy=\"20%\" r=\"200\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.3\" opacity=\"0.2\"\/>\r\n      <circle cx=\"80%\" cy=\"30%\" r=\"300\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.2\" opacity=\"0.1\"\/>\r\n      <circle cx=\"50%\" cy=\"80%\" r=\"250\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.3\" opacity=\"0.2\"\/>\r\n      <line x1=\"0\" y1=\"50%\" x2=\"100%\" y2=\"50%\" stroke=\"#d4af37\" stroke-width=\"0.2\" opacity=\"0.1\"\/>\r\n      <line x1=\"50%\" y1=\"0\" x2=\"50%\" y2=\"100%\" stroke=\"#d4af37\" stroke-width=\"0.2\" opacity=\"0.1\"\/>\r\n    <\/svg>\r\n  <\/div>\r\n\r\n  <canvas id=\"pc\"><\/canvas>\r\n  <svg\r\n    id=\"wsv\"\r\n    viewBox=\"0 0 1440 900\"\r\n    preserveAspectRatio=\"xMidYMid slice\"\r\n    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n  >\r\n    <defs>\r\n      <filter id=\"gf\">\r\n        <feGaussianBlur stdDeviation=\"3.5\" result=\"b\" \/>\r\n        <feMerge>\r\n          <feMergeNode in=\"b\" \/>\r\n          <feMergeNode in=\"SourceGraphic\" \/>\r\n        <\/feMerge>\r\n      <\/filter>\r\n    <\/defs>\r\n    <path id=\"w1\" fill=\"none\" stroke=\"rgba(212,175,55,.52)\" stroke-width=\"1.2\" filter=\"url(#gf)\" \/>\r\n    <path id=\"w2\" fill=\"none\" stroke=\"rgba(175,115,18,.38)\" stroke-width=\".8\" \/>\r\n    <path id=\"w3\" fill=\"none\" stroke=\"rgba(235,195,75,.28)\" stroke-width=\"1.5\" filter=\"url(#gf)\" \/>\r\n    <path id=\"w4\" fill=\"none\" stroke=\"rgba(150,95,8,.22)\" stroke-width=\".6\" \/>\r\n    <path id=\"w5\" fill=\"none\" stroke=\"rgba(212,175,55,.18)\" stroke-width=\"2\" filter=\"url(#gf)\" \/>\r\n  <\/svg>\r\n\r\n  <!-- MULTIPLIED SYMBOLS -->\r\n  <svg class=\"sym\" style=\"top: 8%; left: 6%; width: 46px; height: 46px; animation-delay: 0.5s, 2.5s;\" viewBox=\"0 0 46 46\">\r\n    <line x1=\"23\" y1=\"4\" x2=\"23\" y2=\"42\" stroke=\"#d4af37\" stroke-width=\"1.1\" \/>\r\n    <line x1=\"4\" y1=\"17\" x2=\"42\" y2=\"17\" stroke=\"#d4af37\" stroke-width=\"1.1\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 9%; right: 8%; width: 50px; height: 50px; animation-delay: 0.9s, 3s;\" viewBox=\"0 0 50 50\">\r\n    <circle cx=\"25\" cy=\"25\" r=\"19\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\".9\" \/>\r\n    <circle cx=\"25\" cy=\"25\" r=\"5\" fill=\"rgba(212,175,55,.28)\" stroke=\"#d4af37\" stroke-width=\".7\" \/>\r\n    <line x1=\"25\" y1=\"6\" x2=\"25\" y2=\"44\" stroke=\"#d4af37\" stroke-width=\".5\" opacity=\".45\" \/>\r\n    <line x1=\"6\" y1=\"25\" x2=\"44\" y2=\"25\" stroke=\"#d4af37\" stroke-width=\".5\" opacity=\".45\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"bottom: 19%; left: 5%; width: 42px; height: 42px; animation-delay: 1.2s, 4s;\" viewBox=\"0 0 42 42\">\r\n    <path d=\"M21 4C9 10 5 21 21 25C37 21 33 10 21 4Z\" fill=\"rgba(212,175,55,.13)\" stroke=\"#d4af37\" stroke-width=\".9\" \/>\r\n    <path d=\"M21 38C9 32 5 21 21 17C37 21 33 32 21 38Z\" fill=\"rgba(212,175,55,.08)\" stroke=\"#d4af37\" stroke-width=\".7\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"bottom: 22%; right: 7%; width: 48px; height: 48px; animation-delay: 0.3s, 5s;\" viewBox=\"0 0 48 48\">\r\n    <path d=\"M24 4L27.5 18H42L30.5 27L34 41L24 33L14 41L17.5 27L6 18H20.5Z\" fill=\"rgba(212,175,55,.16)\" stroke=\"#d4af37\" stroke-width=\".85\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 43%; left: 2.5%; width: 34px; height: 34px; animation-delay: 1.5s, 3.5s;\" viewBox=\"0 0 34 34\">\r\n    <circle cx=\"17\" cy=\"17\" r=\"14\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\".75\" stroke-dasharray=\"4 3\" \/>\r\n    <circle cx=\"17\" cy=\"17\" r=\"3.5\" fill=\"rgba(212,175,55,.38)\" \/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 39%; right: 3.5%; width: 38px; height: 38px; animation-delay: 0.7s, 4.5s;\" viewBox=\"0 0 38 38\">\r\n    <path d=\"M19 3C19 3 26 15 33 19C26 23 19 35 19 35C19 35 12 23 5 19C12 15 19 3 19 3Z\" fill=\"rgba(212,175,55,.1)\" stroke=\"#d4af37\" stroke-width=\".95\" \/>\r\n  <\/svg>\r\n  \r\n  <!-- NEW ADDITIONAL SYMBOLS FOR CROWDING -->\r\n  <svg class=\"sym\" style=\"top: 25%; left: 20%; width: 30px; height: 30px; animation-delay: 1.1s, 6s;\" viewBox=\"0 0 30 30\">\r\n    <rect x=\"5\" y=\"5\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.5\" transform=\"rotate(45 15 15)\"\/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 15%; left: 45%; width: 20px; height: 20px; animation-delay: 0.4s, 5.5s;\" viewBox=\"0 0 20 20\">\r\n    <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.4\" stroke-dasharray=\"2 2\"\/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"bottom: 35%; right: 25%; width: 35px; height: 35px; animation-delay: 2s, 7s;\" viewBox=\"0 0 35 35\">\r\n    <path d=\"M17.5 2 L17.5 33 M2 17.5 L33 17.5\" stroke=\"#d4af37\" stroke-width=\"0.6\" opacity=\"0.6\"\/>\r\n    <circle cx=\"17.5\" cy=\"17.5\" r=\"10\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.5\"\/>\r\n  <\/svg>\r\n  <svg class=\"sym\" style=\"top: 60%; right: 15%; width: 25px; height: 25px; animation-delay: 1.8s, 4.2s;\" viewBox=\"0 0 25 25\">\r\n    <polygon points=\"12.5,2 15,10 23,10 17,15 19,23 12.5,18 6,23 8,15 2,10 10,10\" fill=\"none\" stroke=\"#d4af37\" stroke-width=\"0.5\"\/>\r\n  <\/svg>\r\n\r\n  <div class=\"hc\">\r\n    <p class=\"ey\">ABOUT<\/p>\r\n    <h1 class=\"tt\"><span class=\"ta\">Oluwaseun Animashaun<\/span><\/h1>\r\n    <div class=\"dv\"><\/div>\r\n    \r\n    <p class=\"mc\">\r\n      Not a new belief &nbsp;\u00b7&nbsp; Not a system &nbsp;\u00b7&nbsp; A remembering\r\n    <\/p>\r\n    <div class=\"cg\">\r\n      <a href=\"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/contact\/\">\r\n    <button class=\"btn bp\">Begin the Journey<\/button>\r\n<\/a>\r\n\r\n<a href=\"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/books\/\">\r\n    <button class=\"btn bs\">Explore the Book<\/button>\r\n<\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"sh\">\r\n    <span>Descend<\/span>\r\n    <div class=\"sa\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n  var cg = document.getElementById(\"gc\"),\r\n    cd = document.getElementById(\"gd\");\r\n  document.addEventListener(\"mousemove\", function (e) {\r\n    cg.style.left = e.clientX + \"px\";\r\n    cg.style.top = e.clientY + \"px\";\r\n    cd.style.left = e.clientX + \"px\";\r\n    cd.style.top = e.clientY + \"px\";\r\n  });\r\n  \/\/ Particles - INCREASED DENSITY from 70 to 220\r\n  var pc = document.getElementById(\"pc\"),\r\n    cx = pc.getContext(\"2d\"),\r\n    PW,\r\n    PH,\r\n    pts = [];\r\n  function rsP() {\r\n    PW = pc.width = pc.offsetWidth;\r\n    PH = pc.height = pc.offsetHeight;\r\n  }\r\n  rsP();\r\n  window.addEventListener(\"resize\", rsP);\r\n  function mkP() {\r\n    return {\r\n      x: Math.random() * PW,\r\n      y: Math.random() * PH,\r\n      vx: (Math.random() - 0.5) * 0.25,\r\n      vy: -Math.random() * 0.45 - 0.1,\r\n      r: Math.random() * 1.8 + 0.4,\r\n      life: 0,\r\n      max: Math.random() * 250 + 150,\r\n      hue: 38 + Math.random() * 18,\r\n    };\r\n  }\r\n  for (var i = 0; i < 220; i++) {\r\n    var p = mkP();\r\n    p.life = Math.random() * p.max;\r\n    pts.push(p);\r\n  }\r\n  function dP() {\r\n    cx.clearRect(0, 0, PW, PH);\r\n    for (var i = 0; i < pts.length; i++) {\r\n      var p = pts[i];\r\n      p.life++;\r\n      if (p.life > p.max) {\r\n        pts[i] = mkP();\r\n        continue;\r\n      }\r\n      var pr = p.life \/ p.max,\r\n        a = pr < 0.2 ? pr \/ 0.2 : pr > 0.8 ? (1 - pr) \/ 0.2 : 1;\r\n      cx.beginPath();\r\n      cx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n      cx.fillStyle = \"hsla(\" + p.hue + \",72%,63%,\" + a * 0.45 + \")\";\r\n      cx.fill();\r\n      p.x += p.vx;\r\n      p.y += p.vy;\r\n    }\r\n    requestAnimationFrame(dP);\r\n  }\r\n  dP();\r\n  \/\/ SLOW Waves\r\n  var ws = [\r\n    { el: document.getElementById(\"w1\"), amp: 80, spd: 0.00018, yb: 450, ph: 0 },\r\n    { el: document.getElementById(\"w2\"), amp: 115, spd: 0.00013, yb: 420, ph: Math.PI * 0.4 },\r\n    { el: document.getElementById(\"w3\"), amp: 58, spd: 0.00024, yb: 478, ph: Math.PI * 0.8 },\r\n    { el: document.getElementById(\"w4\"), amp: 135, spd: 0.0001, yb: 390, ph: Math.PI * 1.2 },\r\n    { el: document.getElementById(\"w5\"), amp: 90, spd: 0.00016, yb: 508, ph: Math.PI * 1.6 },\r\n  ];\r\n  function bw(w, t) {\r\n    var n = 55,\r\n      d = \"\";\r\n    for (var i = 0; i <= n; i++) {\r\n      var x = (i \/ n) * 1440,\r\n        y =\r\n          w.yb +\r\n          Math.sin((i \/ n) * Math.PI * 4 + t * w.spd + w.ph) * w.amp +\r\n          Math.sin((i \/ n) * Math.PI * 2.2 + t * w.spd * 0.6) * (w.amp * 0.32);\r\n      d += (i === 0 ? \"M\" : \"L\") + x.toFixed(1) + \",\" + y.toFixed(1);\r\n    }\r\n    return d;\r\n  }\r\n  function aW(t) {\r\n    for (var i = 0; i < ws.length; i++)\r\n      ws[i].el.setAttribute(\"d\", bw(ws[i], t));\r\n    requestAnimationFrame(aW);\r\n  }\r\n  requestAnimationFrame(aW);\r\n  \/\/ Pulse canvas\r\n  var pc2 = document.getElementById(\"pc2\"),\r\n    cx2 = pc2.getContext(\"2d\"),\r\n    PW2,\r\n    PH2;\r\n  function rsP2() {\r\n    PW2 = pc2.width = pc2.offsetWidth;\r\n    PH2 = pc2.height = pc2.offsetHeight;\r\n  }\r\n  rsP2();\r\n  window.addEventListener(\"resize\", rsP2);\r\n  function aP(ts) {\r\n    var t = ts * 0.001;\r\n    cx2.clearRect(0, 0, PW2, PH2);\r\n    var cx = PW2 \/ 2,\r\n      cy = PH2 \/ 2;\r\n    for (var i = 0; i < 4; i++) {\r\n      var ph = (t + i * 1.3) % 4,\r\n        r = ph \/ 4,\r\n        rad = 38 + r * Math.min(PW2, PH2) * 0.62;\r\n      cx2.beginPath();\r\n      cx2.arc(cx, cy, rad, 0, Math.PI * 2);\r\n      cx2.strokeStyle = \"rgba(212,175,55,\" + (1 - r) * 0.065 + \")\";\r\n      cx2.lineWidth = 1;\r\n      cx2.stroke();\r\n    }\r\n    var g = cx2.createRadialGradient(cx, cy, 0, cx, cy, 200);\r\n    g.addColorStop(0, \"rgba(212,175,55,.035)\");\r\n    g.addColorStop(1, \"transparent\");\r\n    cx2.fillStyle = g;\r\n    cx2.fillRect(0, 0, PW2, PH2);\r\n    requestAnimationFrame(aP);\r\n  }\r\n  requestAnimationFrame(aP);\r\n  \/\/ Scroll reveal\r\n  var ri = [\r\n    { id: \"i-orn\", d: 0 },\r\n    { id: \"i-rule\", d: 200 },\r\n    { id: \"i-h\", d: 420 },\r\n    { id: \"i-b1\", d: 640 },\r\n    { id: \"i-b2\", d: 840 },\r\n    { id: \"i-b3\", d: 1040 },\r\n    { id: \"i-b4\", d: 1220 },\r\n    { id: \"i-cl\", d: 1480 },\r\n  ];\r\n  var s2 = document.getElementById(\"inv\"),\r\n    triggered = false;\r\n  function chk() {\r\n    if (triggered) return;\r\n    var r = s2.getBoundingClientRect();\r\n    if (r.top < window.innerHeight * 0.78) {\r\n      triggered = true;\r\n      ri.forEach(function (x) {\r\n        setTimeout(function () {\r\n          var el = document.getElementById(x.id);\r\n          if (el) el.classList.add(\"vis\");\r\n        }, x.d);\r\n      });\r\n    }\r\n  }\r\n  window.addEventListener(\"scroll\", chk, { passive: true });\r\n  setTimeout(chk, 500);\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db24d29 e-con-full e-flex e-con e-parent\" data-id=\"db24d29\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-753c395 elementor-widget elementor-widget-html\" data-id=\"753c395\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"author\">\r\n  <div class=\"au-glow\"><\/div>\r\n  <div class=\"au-split\">\r\n    <div class=\"au-text sr lft\">\r\n      <span class=\"au-tag\">About the Author<\/span>\r\n      <h2 class=\"au-h2\">Writing From a Place of <span>Listening<\/span><\/h2>\r\n      <p class=\"au-bio\">\r\n        Oluwaseun Animashaun writes from observation and experience. Not from theory, but from paying attention to the quiet patterns that guide human life. \r\n        <br><br>\r\n        His work is not meant to introduce something new. It is an attempt to put into words what people have always felt but could not clearly explain. This book brings that inner experience into focus, without trying to change what you believe, only helping you see more clearly for yourself.\r\n      <\/p>\r\n      <div class=\"au-sig-bl\">\r\n        <span class=\"au-name\">Oluwaseun Animashaun<\/span>\r\n        <span class=\"au-title-lbl\">Author<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    \r\n    <div class=\"au-img-c sr rgt\" style=\"transition-delay:.2s\">\r\n      <div class=\"au-img-frame\">\r\n        <div class=\"au-img-w\">\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/oluwaseun\/wp-content\/uploads\/2026\/04\/20180125_001_1_-scaled.jpg\" alt=\"Oluwaseun Animashaun\" style=\"width:100%; height:100%; object-fit:cover;\">\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\r\n#gp{\r\n    --g:#d4af37;\r\n    --gl:#f0d060;\r\n    --gd:#a07820;\r\n    --cr:#e8d5a3;\r\n    --tb:#c2a96a;\r\n    --tm:#7a6a44;\r\n    --ink:#050504;\r\n    \r\n    background:var(--ink);\r\n    color:var(--tb);\r\n}\r\n\r\n\r\n    #author{\r\n    padding:100px 60px;\r\n    position:relative;\r\n    overflow:hidden;\r\n    background: var(--ink);\r\n}\r\n\r\n#author::before{\r\n    content:'';\r\n    position:absolute;\r\n    bottom:-100px;\r\n    left:-100px;\r\n    width:400px;\r\n    height:400px;\r\n    background:radial-gradient(circle,rgba(212,175,55,0.03) 0%,transparent 70%) !important;\r\n    pointer-events:none;\r\n}\r\n\r\n.au-split{\r\n    display:grid;\r\n    grid-template-columns:1.2fr 1fr;\r\n    gap:80px;\r\n    align-items:center;\r\n    max-width:1200px;\r\n    margin:0 auto;\r\n}\r\n\r\n.au-tag{\r\n    font-family:'Cinzel',serif;\r\n    font-size:13px;\r\n    letter-spacing:.5em;\r\n    color:var(--gd);\r\n    text-transform:uppercase;\r\n    margin-bottom:24px;\r\n    display:block;\r\n}\r\n\r\n.au-h2{\r\n    font-family:'Cinzel Decorative',serif;\r\n    font-size:clamp(32px,3.5vw,48px);\r\n    color:var(--cr);\r\n    margin-bottom:30px;\r\n    line-height:1.2;\r\n}\r\n\r\n.au-h2 span{\r\n    color:var(--g);\r\n    font-family:'Cormorant Garamond',serif;\r\n    font-style:italic;\r\n}\r\n\r\n.au-bio{\r\n    font-family:'Cormorant Garamond',serif;\r\n    font-size:22px;\r\n    line-height:1.8;\r\n    color:var(--tb);\r\n    font-weight:300;\r\n    margin-bottom:35px;\r\n}\r\n\r\n.au-sig-bl{\r\n    margin-top:40px;\r\n    position:relative;\r\n}\r\n\r\n.au-name{\r\n    font-family:'Cinzel Decorative',serif;\r\n    font-size:24px;\r\n    color:var(--g);\r\n    letter-spacing:.1em;\r\n    display:block;\r\n}\r\n\r\n.au-title-lbl{\r\n    font-family:'Cormorant Garamond',serif;\r\n    font-size:16px;\r\n    font-style:italic;\r\n    color:var(--tm);\r\n    margin-top:4px;\r\n    display:block;\r\n}\r\n\r\n.au-img-c{\r\n    position:relative;\r\n    z-index:1;\r\n}\r\n\r\n.au-img-frame{\r\n    position:relative;\r\n    border:1px solid rgba(212,175,55,0.2);\r\n    padding:15px;\r\n    background:rgba(212,175,55,0.02);\r\n}\r\n\r\n.au-img-frame::after{\r\n    content:'';\r\n    position:absolute;\r\n    inset:-1px;\r\n    border:1px solid rgba(212,175,55,0.1);\r\n    transform:translate(15px,15px);\r\n    z-index:-1;\r\n    transition:transform 0.5s ease;\r\n}\r\n\r\n.au-img-c:hover .au-img-frame::after{\r\n    transform:translate(5px,5px);\r\n}\r\n\r\n.au-img-w{\r\n    overflow:hidden;\r\n    position:relative;\r\n    aspect-ratio:3\/4;\r\n}\r\n\r\n.au-img-w img{\r\n    width:100%;\r\n    height:100%;\r\n    object-fit:cover;\r\n    transition:transform 0.8s ease;\r\n    filter:grayscale(0.3) contrast(1.1);\r\n}\r\n\r\n.au-img-c:hover .au-img-w img{\r\n    transform:scale(1.08);\r\n}\r\n\r\n.au-glow{\r\n    position:absolute;\r\n    top:50%;\r\n    left:50%;\r\n    transform:translate(-50%,-50%);\r\n    width:120%;\r\n    height:120%;\r\n    background:radial-gradient(circle,rgba(212,175,55,0.08) 0%,transparent 70%);\r\n    pointer-events:none;\r\n    z-index:-1;\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bb554e3 e-con-full e-flex e-con e-parent\" data-id=\"bb554e3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0c65bd elementor-widget elementor-widget-html\" data-id=\"e0c65bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');\r\n\r\n:root {\r\n    --bg-dark: #0a0a0a;\r\n    --gold-primary: #c9a96e;\r\n    --gold-bright: #d4af37;\r\n    --gold-muted: #a08b5e;\r\n    --text-body: #b8a88a;\r\n    --text-light: #e8dcc8;\r\n    --border-subtle: rgba(201, 169, 110, 0.15);\r\n}\r\n\r\n.philosophy-section {\r\n    position: relative;\r\n    background: var(--bg-dark);\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    padding: 120px 0;\r\n    font-family: 'Cormorant Garamond', serif;\r\n}\r\n\r\n\r\n.philosophy-particles {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.philosophy-particles .particle {\r\n    position: absolute;\r\n    width: 2px;\r\n    height: 2px;\r\n    background: var(--gold-primary);\r\n    border-radius: 50%;\r\n    opacity: 0;\r\n    animation: floatParticle 12s infinite ease-in-out;\r\n}\r\n\r\n@keyframes floatParticle {\r\n    0% { opacity: 0; transform: translateY(100vh) scale(0); }\r\n    10% { opacity: 0.6; }\r\n    90% { opacity: 0.6; }\r\n    100% { opacity: 0; transform: translateY(-10vh) scale(1.5); }\r\n}\r\n\r\n\r\n.philosophy-waves {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: 800px;\r\n    height: 800px;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.philosophy-waves .wave-ring {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    border: 1px solid rgba(201, 169, 110, 0.08);\r\n    border-radius: 50%;\r\n    animation: waveExpand 8s infinite ease-out;\r\n}\r\n\r\n.philosophy-waves .wave-ring:nth-child(2) { animation-delay: 2s; }\r\n.philosophy-waves .wave-ring:nth-child(3) { animation-delay: 4s; }\r\n.philosophy-waves .wave-ring:nth-child(4) { animation-delay: 6s; }\r\n\r\n@keyframes waveExpand {\r\n    0% { width: 100px; height: 100px; opacity: 0.6; }\r\n    100% { width: 800px; height: 800px; opacity: 0; }\r\n}\r\n\r\n.philosophy-dust {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0;\r\n    left: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.philosophy-dust .dust-mote {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    background: var(--gold-bright);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 4px var(--gold-primary);\r\n    animation: dustDrift 20s infinite linear;\r\n}\r\n\r\n@keyframes dustDrift {\r\n    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }\r\n    15% { opacity: 0.8; }\r\n    85% { opacity: 0.8; }\r\n    100% { transform: translate(100px, -200px) rotate(360deg); opacity: 0; }\r\n}\r\n\r\n\r\n.philosophy-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 40px;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 80px;\r\n    align-items: center;\r\n}\r\n\r\n\r\n.philosophy-left {\r\n    position: relative;\r\n}\r\n\r\n.philosophy-label {\r\n    font-family: 'Helvetica Neue', Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 400;\r\n    letter-spacing: 5px;\r\n    text-transform: uppercase;\r\n    color: var(--gold-muted);\r\n    margin-bottom: 30px;\r\n    display: block;\r\n}\r\n\r\n.philosophy-heading {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2.5rem, 5vw, 4rem);\r\n    font-weight: 400;\r\n    color: var(--text-light);\r\n    line-height: 1.15;\r\n    margin-bottom: 20px;\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.philosophy-heading em {\r\n    font-style: italic;\r\n    color: var(--gold-primary);\r\n    font-weight: 500;\r\n}\r\n\r\n.philosophy-subtitle {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.25rem;\r\n    color: var(--text-body);\r\n    font-style: italic;\r\n    font-weight: 300;\r\n    line-height: 1.6;\r\n    margin-bottom: 50px;\r\n    padding-left: 30px;\r\n    border-left: 1px solid var(--border-subtle);\r\n}\r\n\r\n\r\n.philosophy-timeline {\r\n    position: relative;\r\n    padding-left: 40px;\r\n}\r\n\r\n.philosophy-timeline::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 10px;\r\n    bottom: 10px;\r\n    width: 1px;\r\n    background: linear-gradient(to bottom, transparent, var(--gold-primary), transparent);\r\n}\r\n\r\n.timeline-item {\r\n    position: relative;\r\n    margin-bottom: 40px;\r\n    opacity: 0;\r\n    transform: translateX(-20px);\r\n    animation: slideInLeft 0.8s ease forwards;\r\n}\r\n\r\n.timeline-item:nth-child(1) { animation-delay: 0.3s; }\r\n.timeline-item:nth-child(2) { animation-delay: 0.6s; }\r\n.timeline-item:nth-child(3) { animation-delay: 0.9s; }\r\n.timeline-item:nth-child(4) { animation-delay: 1.2s; }\r\n\r\n.timeline-item::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: -44px;\r\n    top: 8px;\r\n    width: 8px;\r\n    height: 8px;\r\n    border: 1px solid var(--gold-primary);\r\n    border-radius: 50%;\r\n    background: var(--bg-dark);\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.timeline-item:hover::before {\r\n    background: var(--gold-primary);\r\n    box-shadow: 0 0 12px rgba(201, 169, 110, 0.4);\r\n}\r\n\r\n.timeline-number {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 0.85rem;\r\n    color: var(--gold-muted);\r\n    margin-bottom: 8px;\r\n    display: block;\r\n    letter-spacing: 2px;\r\n}\r\n\r\n.timeline-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1.4rem;\r\n    color: var(--text-light);\r\n    margin-bottom: 10px;\r\n    font-weight: 500;\r\n}\r\n\r\n.timeline-desc {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.05rem;\r\n    color: var(--text-body);\r\n    line-height: 1.7;\r\n    font-weight: 300;\r\n}\r\n\r\n\r\n.philosophy-right {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    min-height: 500px;\r\n}\r\n\r\n.philosophy-visual {\r\n    position: relative;\r\n    width: 400px;\r\n    height: 400px;\r\n}\r\n\r\n.philosophy-visual .circle {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n}\r\n\r\n.philosophy-visual .circle-outer {\r\n    width: 400px;\r\n    height: 400px;\r\n    border: 1px solid var(--border-subtle);\r\n    animation: slowRotate 30s linear infinite;\r\n}\r\n\r\n.philosophy-visual .circle-mid {\r\n    width: 280px;\r\n    height: 280px;\r\n    border: 1px solid rgba(201, 169, 110, 0.2);\r\n    animation: slowRotate 20s linear infinite reverse;\r\n}\r\n\r\n.philosophy-visual .circle-inner {\r\n    width: 160px;\r\n    height: 160px;\r\n    border: 1px solid rgba(201, 169, 110, 0.3);\r\n    animation: slowRotate 15s linear infinite;\r\n}\r\n\r\n.philosophy-visual .circle-core {\r\n    width: 60px;\r\n    height: 60px;\r\n    background: radial-gradient(circle, rgba(201, 169, 110, 0.3), transparent);\r\n    animation: pulseCore 4s ease-in-out infinite;\r\n}\r\n\r\n.philosophy-visual .visual-text {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 0.9rem;\r\n    color: var(--gold-primary);\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    line-height: 1.8;\r\n}\r\n\r\n@keyframes slowRotate {\r\n    from { transform: translate(-50%, -50%) rotate(0deg); }\r\n    to { transform: translate(-50%, -50%) rotate(360deg); }\r\n}\r\n\r\n@keyframes pulseCore {\r\n    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }\r\n    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }\r\n}\r\n\r\n@keyframes slideInLeft {\r\n    to { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n\r\n@media (max-width: 968px) {\r\n    .philosophy-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 60px;\r\n    }\r\n    .philosophy-right { order: -1; min-height: 350px; }\r\n    .philosophy-visual { transform: scale(0.8); }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .philosophy-container { padding: 0 20px; }\r\n    .philosophy-timeline { padding-left: 25px; }\r\n    .timeline-item::before { left: -29px; }\r\n}\r\n\r\n\r\n\/* =========================\r\n   LARGE TABLETS (<= 968px)\r\n========================= *\/\r\n@media (max-width: 968px) {\r\n    .philosophy-section {\r\n        padding: 90px 0;\r\n        min-height: auto;\r\n    }\r\n\r\n    .philosophy-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 50px;\r\n        padding: 0 30px;\r\n    }\r\n\r\n    .philosophy-left {\r\n        order: 2;\r\n    }\r\n\r\n    .philosophy-right {\r\n        order: 1;\r\n        min-height: 350px;\r\n    }\r\n\r\n    .philosophy-visual {\r\n        width: 320px;\r\n        height: 320px;\r\n    }\r\n\r\n    .philosophy-visual .circle-outer {\r\n        width: 320px;\r\n        height: 320px;\r\n    }\r\n\r\n    .philosophy-visual .circle-mid {\r\n        width: 220px;\r\n        height: 220px;\r\n    }\r\n\r\n    .philosophy-visual .circle-inner {\r\n        width: 130px;\r\n        height: 130px;\r\n    }\r\n\r\n    .philosophy-waves {\r\n        width: 500px;\r\n        height: 500px;\r\n    }\r\n\r\n    @keyframes waveExpand {\r\n        0% {\r\n            width: 80px;\r\n            height: 80px;\r\n            opacity: 0.6;\r\n        }\r\n        100% {\r\n            width: 500px;\r\n            height: 500px;\r\n            opacity: 0;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\/* =========================\r\n   MOBILE (<= 768px)\r\n========================= *\/\r\n@media (max-width: 768px) {\r\n    .philosophy-section {\r\n        padding: 70px 0;\r\n        min-height: auto;\r\n    }\r\n\r\n    .philosophy-container {\r\n        padding: 0 20px;\r\n        gap: 40px;\r\n    }\r\n\r\n    .philosophy-label {\r\n        font-size: 9px;\r\n        letter-spacing: 3px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .philosophy-heading {\r\n        font-size: clamp(2rem, 8vw, 3rem);\r\n        line-height: 1.2;\r\n    }\r\n\r\n    .philosophy-subtitle {\r\n        font-size: 1.05rem;\r\n        padding-left: 18px;\r\n        margin-bottom: 35px;\r\n    }\r\n\r\n    .philosophy-timeline {\r\n        padding-left: 25px;\r\n    }\r\n\r\n    .timeline-item {\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .timeline-item::before {\r\n        left: -29px;\r\n        width: 7px;\r\n        height: 7px;\r\n    }\r\n\r\n    .timeline-number {\r\n        font-size: 0.75rem;\r\n    }\r\n\r\n    .timeline-title {\r\n        font-size: 1.15rem;\r\n    }\r\n\r\n    .timeline-desc {\r\n        font-size: 0.95rem;\r\n        line-height: 1.6;\r\n    }\r\n\r\n    .philosophy-right {\r\n        min-height: 280px;\r\n    }\r\n\r\n    .philosophy-visual {\r\n        width: 260px;\r\n        height: 260px;\r\n    }\r\n\r\n    .philosophy-visual .circle-outer {\r\n        width: 260px;\r\n        height: 260px;\r\n    }\r\n\r\n    .philosophy-visual .circle-mid {\r\n        width: 180px;\r\n        height: 180px;\r\n    }\r\n\r\n    .philosophy-visual .circle-inner {\r\n        width: 100px;\r\n        height: 100px;\r\n    }\r\n\r\n    .philosophy-visual .circle-core {\r\n        width: 40px;\r\n        height: 40px;\r\n    }\r\n\r\n    .philosophy-visual .visual-text {\r\n        font-size: 0.65rem;\r\n        letter-spacing: 2px;\r\n        line-height: 1.5;\r\n    }\r\n\r\n    .philosophy-waves {\r\n        width: 300px;\r\n        height: 300px;\r\n    }\r\n\r\n    @keyframes waveExpand {\r\n        0% {\r\n            width: 60px;\r\n            height: 60px;\r\n            opacity: 0.6;\r\n        }\r\n        100% {\r\n            width: 300px;\r\n            height: 300px;\r\n            opacity: 0;\r\n        }\r\n    }\r\n}\r\n\r\n\r\n\/* =========================\r\n   SMALL MOBILE (<= 480px)\r\n========================= *\/\r\n@media (max-width: 480px) {\r\n    .philosophy-section {\r\n        padding: 50px 0;\r\n    }\r\n\r\n    .philosophy-container {\r\n        padding: 0 15px;\r\n    }\r\n\r\n    .philosophy-heading {\r\n        font-size: 1.8rem;\r\n    }\r\n\r\n    .philosophy-subtitle {\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .timeline-title {\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .timeline-desc {\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    .philosophy-right {\r\n        min-height: 220px;\r\n    }\r\n\r\n    .philosophy-visual {\r\n        width: 200px;\r\n        height: 200px;\r\n    }\r\n\r\n    .philosophy-visual .circle-outer {\r\n        width: 200px;\r\n        height: 200px;\r\n    }\r\n\r\n    .philosophy-visual .circle-mid {\r\n        width: 140px;\r\n        height: 140px;\r\n    }\r\n\r\n    .philosophy-visual .circle-inner {\r\n        width: 80px;\r\n        height: 80px;\r\n    }\r\n\r\n    .philosophy-visual .visual-text {\r\n        font-size: 0.55rem;\r\n        letter-spacing: 1.5px;\r\n    }\r\n\r\n    .philosophy-particles,\r\n    .philosophy-dust {\r\n        opacity: 0.4;\r\n    }\r\n\r\n    .philosophy-waves {\r\n        display: none;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"philosophy-section\">\r\n    \r\n    <div class=\"philosophy-particles\" id=\"philosophyParticles\"><\/div>\r\n    <div class=\"philosophy-waves\">\r\n        <div class=\"wave-ring\"><\/div>\r\n        <div class=\"wave-ring\"><\/div>\r\n        <div class=\"wave-ring\"><\/div>\r\n        <div class=\"wave-ring\"><\/div>\r\n    <\/div>\r\n    <div class=\"philosophy-dust\" id=\"philosophyDust\"><\/div>\r\n\r\n    <div class=\"philosophy-container\">\r\n        \r\n        <div class=\"philosophy-left\">\r\n            <span class=\"philosophy-label\">The Foundation<\/span>\r\n            <h2 class=\"philosophy-heading\">\r\n                Writing From a<br>\r\n                Place of <em>Listening<\/em>\r\n            <\/h2>\r\n            <p class=\"philosophy-subtitle\">\r\n                Not from theory, but from paying attention to the quiet patterns that guide human life.\r\n            <\/p>\r\n\r\n            <div class=\"philosophy-timeline\">\r\n                <div class=\"timeline-item\">\r\n                    <span class=\"timeline-number\">01<\/span>\r\n                    <h3 class=\"timeline-title\">Observation Over Theory<\/h3>\r\n                    <p class=\"timeline-desc\">Every insight begins with watching. Not analyzing from a distance, but being present with what is actually happening in the moment.<\/p>\r\n                <\/div>\r\n                <div class=\"timeline-item\">\r\n                    <span class=\"timeline-number\">02<\/span>\r\n                    <h3 class=\"timeline-title\">The Quiet Patterns<\/h3>\r\n                    <p class=\"timeline-desc\">Beneath the noise of daily life, there are rhythms we all share. These patterns reveal themselves only to those who stop to listen.<\/p>\r\n                <\/div>\r\n                <div class=\"timeline-item\">\r\n                    <span class=\"timeline-number\">03<\/span>\r\n                    <h3 class=\"timeline-title\">Experience as Truth<\/h3>\r\n                    <p class=\"timeline-desc\">What you feel in your bones carries more weight than any doctrine. This book honors the wisdom that lives in your own lived experience.<\/p>\r\n                <\/div>\r\n                <div class=\"timeline-item\">\r\n                    <span class=\"timeline-number\">04<\/span>\r\n                    <h3 class=\"timeline-title\">Clarity Without Conversion<\/h3>\r\n                    <p class=\"timeline-desc\">The goal is not to change what you believe, but to help you see more clearly for yourself. Truth needs no persuasion.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n       \r\n        <div class=\"philosophy-right\">\r\n            <div class=\"philosophy-visual\">\r\n                <div class=\"circle circle-outer\"><\/div>\r\n                <div class=\"circle circle-mid\"><\/div>\r\n                <div class=\"circle circle-inner\"><\/div>\r\n                <div class=\"circle circle-core\"><\/div>\r\n                <div class=\"visual-text\">\r\n                    Listen<br>\r\n                    Observe<br>\r\n                    Understand\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    (function() {\r\n        \r\n        const particlesContainer = document.getElementById('philosophyParticles');\r\n        for (let i = 0; i < 30; i++) {\r\n            const particle = document.createElement('div');\r\n            particle.className = 'particle';\r\n            particle.style.left = Math.random() * 100 + '%';\r\n            particle.style.animationDelay = Math.random() * 12 + 's';\r\n            particle.style.animationDuration = (10 + Math.random() * 8) + 's';\r\n            particlesContainer.appendChild(particle);\r\n        }\r\n\r\n        \r\n        const dustContainer = document.getElementById('philosophyDust');\r\n        for (let i = 0; i < 40; i++) {\r\n            const dust = document.createElement('div');\r\n            dust.className = 'dust-mote';\r\n            dust.style.left = Math.random() * 100 + '%';\r\n            dust.style.top = Math.random() * 100 + '%';\r\n            dust.style.animationDelay = Math.random() * 20 + 's';\r\n            dust.style.animationDuration = (15 + Math.random() * 10) + 's';\r\n            dustContainer.appendChild(dust);\r\n        }\r\n    })();\r\n    <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-59d2e80 e-con-full e-flex e-con e-parent\" data-id=\"59d2e80\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60ef554 elementor-widget elementor-widget-html\" data-id=\"60ef554\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');\r\n\r\n:root {\r\n    --bg-dark: #0a0a0a;\r\n    --gold-primary: #c9a96e;\r\n    --gold-bright: #d4af37;\r\n    --gold-muted: #a08b5e;\r\n    --text-body: #b8a88a;\r\n    --text-light: #e8dcc8;\r\n    --border-subtle: rgba(201, 169, 110, 0.15);\r\n}\r\n\r\n.why-matters-section {\r\n    position: relative;\r\n    background: var(--bg-dark);\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    padding: 120px 0;\r\n    font-family: 'Cormorant Garamond', serif;\r\n}\r\n\r\n\r\n.why-constellation {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.why-constellation .star {\r\n    position: absolute;\r\n    width: 2px;\r\n    height: 2px;\r\n    background: var(--gold-primary);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 6px rgba(201, 169, 110, 0.5);\r\n    animation: starTwinkle 3s infinite ease-in-out;\r\n}\r\n\r\n@keyframes starTwinkle {\r\n    0%, 100% { opacity: 0.3; transform: scale(1); }\r\n    50% { opacity: 1; transform: scale(1.5); }\r\n}\r\n\r\n.why-constellation .connection-line {\r\n    position: absolute;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);\r\n    transform-origin: left center;\r\n    animation: linePulse 4s infinite ease-in-out;\r\n}\r\n\r\n@keyframes linePulse {\r\n    0%, 100% { opacity: 0.1; }\r\n    50% { opacity: 0.4; }\r\n}\r\n\r\n\r\n.why-orbs {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0;\r\n    left: 0;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n.why-orbs .orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    background: radial-gradient(circle, rgba(201, 169, 110, 0.08), transparent 70%);\r\n    animation: orbFloat 15s infinite ease-in-out;\r\n}\r\n\r\n@keyframes orbFloat {\r\n    0%, 100% { transform: translate(0, 0) scale(1); }\r\n    33% { transform: translate(30px, -40px) scale(1.1); }\r\n    66% { transform: translate(-20px, -60px) scale(0.9); }\r\n}\r\n\r\n\r\n.why-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 40px;\r\n}\r\n\r\n.why-header {\r\n    text-align: center;\r\n    margin-bottom: 100px;\r\n}\r\n\r\n.why-label {\r\n    font-family: 'Helvetica Neue', Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 400;\r\n    letter-spacing: 5px;\r\n    text-transform: uppercase;\r\n    color: var(--gold-muted);\r\n    margin-bottom: 25px;\r\n    display: block;\r\n}\r\n\r\n.why-heading {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2.5rem, 5vw, 4.5rem);\r\n    font-weight: 400;\r\n    color: var(--text-light);\r\n    line-height: 1.15;\r\n    letter-spacing: -0.02em;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.why-heading em {\r\n    font-style: italic;\r\n    color: var(--gold-primary);\r\n    font-weight: 500;\r\n}\r\n\r\n.why-intro {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.3rem;\r\n    color: var(--text-body);\r\n    font-style: italic;\r\n    font-weight: 300;\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n.why-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 30px;\r\n    position: relative;\r\n}\r\n\r\n.why-card {\r\n    background: rgba(255, 255, 255, 0.02);\r\n    border: 1px solid var(--border-subtle);\r\n    padding: 50px 35px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    animation: cardReveal 0.8s ease forwards;\r\n}\r\n\r\n.why-card:nth-child(1) { animation-delay: 0.2s; }\r\n.why-card:nth-child(2) { animation-delay: 0.4s; margin-top: 40px; }\r\n.why-card:nth-child(3) { animation-delay: 0.6s; margin-top: 80px; }\r\n.why-card:nth-child(4) { animation-delay: 0.8s; }\r\n.why-card:nth-child(5) { animation-delay: 1.0s; margin-top: 40px; }\r\n.why-card:nth-child(6) { animation-delay: 1.2s; margin-top: 80px; }\r\n\r\n.why-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);\r\n    transform: scaleX(0);\r\n    transition: transform 0.5s ease;\r\n}\r\n\r\n.why-card:hover {\r\n    background: rgba(201, 169, 110, 0.03);\r\n    border-color: rgba(201, 169, 110, 0.3);\r\n    transform: translateY(-8px);\r\n}\r\n\r\n.why-card:hover::before {\r\n    transform: scaleX(1);\r\n}\r\n\r\n.why-card-icon {\r\n    width: 48px;\r\n    height: 48px;\r\n    border: 1px solid var(--border-subtle);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 30px;\r\n    position: relative;\r\n    transition: all 0.4s ease;\r\n}\r\n\r\n.why-card:hover .why-card-icon {\r\n    border-color: var(--gold-primary);\r\n    box-shadow: 0 0 20px rgba(201, 169, 110, 0.2);\r\n}\r\n\r\n.why-card-icon svg {\r\n    width: 20px;\r\n    height: 20px;\r\n    stroke: var(--gold-primary);\r\n    fill: none;\r\n    stroke-width: 1.5;\r\n}\r\n\r\n.why-card-number {\r\n    position: absolute;\r\n    top: 20px;\r\n    right: 25px;\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 3.5rem;\r\n    color: rgba(201, 169, 110, 0.06);\r\n    font-weight: 400;\r\n    line-height: 1;\r\n    pointer-events: none;\r\n    transition: color 0.4s ease;\r\n}\r\n\r\n.why-card:hover .why-card-number {\r\n    color: rgba(201, 169, 110, 0.12);\r\n}\r\n\r\n.why-card h3 {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1.5rem;\r\n    color: var(--text-light);\r\n    margin-bottom: 18px;\r\n    font-weight: 500;\r\n    line-height: 1.3;\r\n}\r\n\r\n.why-card p {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.05rem;\r\n    color: var(--text-body);\r\n    line-height: 1.8;\r\n    font-weight: 300;\r\n}\r\n\r\n\r\n.why-quote-strip {\r\n    margin-top: 100px;\r\n    padding: 60px 0;\r\n    border-top: 1px solid var(--border-subtle);\r\n    border-bottom: 1px solid var(--border-subtle);\r\n    text-align: center;\r\n    position: relative;\r\n}\r\n\r\n.why-quote-strip::before,\r\n.why-quote-strip::after {\r\n    content: '\"';\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 8rem;\r\n    color: rgba(201, 169, 110, 0.08);\r\n    position: absolute;\r\n    line-height: 1;\r\n}\r\n\r\n.why-quote-strip::before {\r\n    top: -20px;\r\n    left: 50px;\r\n}\r\n\r\n.why-quote-strip::after {\r\n    bottom: -60px;\r\n    right: 50px;\r\n    transform: rotate(180deg);\r\n}\r\n\r\n.why-quote-text {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.6rem;\r\n    color: var(--text-light);\r\n    font-style: italic;\r\n    font-weight: 300;\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n    line-height: 1.7;\r\n}\r\n\r\n.why-quote-author {\r\n    font-family: 'Helvetica Neue', Arial, sans-serif;\r\n    font-size: 11px;\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    color: var(--gold-muted);\r\n    margin-top: 25px;\r\n    display: block;\r\n}\r\n\r\n@keyframes cardReveal {\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\r\n@media (max-width: 968px) {\r\n    .why-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n    .why-card:nth-child(2),\r\n    .why-card:nth-child(3),\r\n    .why-card:nth-child(5),\r\n    .why-card:nth-child(6) {\r\n        margin-top: 0;\r\n    }\r\n    .why-card:nth-child(even) {\r\n        margin-top: 30px;\r\n    }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .why-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n    .why-card:nth-child(even) {\r\n        margin-top: 0;\r\n    }\r\n    .why-container { padding: 0 20px; }\r\n    .why-quote-strip::before,\r\n    .why-quote-strip::after { display: none; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"why-matters-section\">\r\n    \r\n    <div class=\"why-constellation\" id=\"whyConstellation\"><\/div>\r\n    <div class=\"why-orbs\" id=\"whyOrbs\"><\/div>\r\n\r\n    <div class=\"why-container\">\r\n        \r\n        <div class=\"why-header\">\r\n            <span class=\"why-label\">The Purpose<\/span>\r\n            <h2 class=\"why-heading\">\r\n                Why This Book <em>Matters<\/em>\r\n            <\/h2>\r\n            <p class=\"why-intro\">\r\n                In a world overflowing with noise, this is an invitation to return to what you already know but have forgotten how to hear.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"why-grid\">\r\n            <div class=\"why-card\">\r\n                <div class=\"why-card-number\">01<\/div>\r\n                <div class=\"why-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\/><\/svg>\r\n                <\/div>\r\n                <h3>It Names the Unnameable<\/h3>\r\n                <p>There are feelings we all carry a sense of something larger, a quiet knowing that have no vocabulary. This book gives shape to what lives inside you.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"why-card\">\r\n                <div class=\"why-card-number\">02<\/div>\r\n                <div class=\"why-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 1C6.48 1 2 5.48 2 11c0 5.25 3.5 9.69 8.25 11.18.75.18 1.03-.33 1.03-.74 0-.36-.01-1.31-.02-2.57-3.45.75-4.18-1.67-4.18-1.67-.56-1.43-1.37-1.81-1.37-1.81-1.12-.77.09-.75.09-.75 1.24.09 1.89 1.27 1.89 1.27 1.1 1.89 2.89 1.34 3.59 1.03.11-.8.43-1.34.78-1.65-2.76-.31-5.66-1.38-5.66-6.14 0-1.36.48-2.47 1.27-3.34-.13-.31-.55-1.57.12-3.27 0 0 1.04-.33 3.4 1.28a11.85 11.85 0 016.2 0c2.36-1.61 3.4-1.28 3.4-1.28.67 1.7.25 2.96.12 3.27.79.87 1.27 1.98 1.27 3.34 0 4.77-2.9 5.82-5.67 6.13.44.38.84 1.13.84 2.28 0 1.65-.01 2.98-.01 3.38 0 .41.27.9 1.03.74C18.5 20.69 22 16.25 22 11c0-5.52-4.48-10-10-10z\"\/><\/svg>\r\n                <\/div>\r\n                <h3>It Respects Your Intelligence<\/h3>\r\n                <p>No lectures. No formulas. Just honest observations that meet you where you are and trust you to draw your own conclusions.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"why-card\">\r\n                <div class=\"why-card-number\">03<\/div>\r\n                <div class=\"why-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\/><\/svg>\r\n                <\/div>\r\n                <h3>It Bridges the Gap<\/h3>\r\n                <p>Between what you feel and what you can explain. Between the life you live and the life you sense is possible. This book is the bridge.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"why-card\">\r\n                <div class=\"why-card-number\">04<\/div>\r\n                <div class=\"why-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg>\r\n                <\/div>\r\n                <h3>It Offers No Beliefs<\/h3>\r\n                <p>Only clarity. The author does not ask you to adopt a worldview he asks you to look more carefully at your own.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"why-card\">\r\n                <div class=\"why-card-number\">05<\/div>\r\n                <div class=\"why-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z\"\/><\/svg>\r\n                <\/div>\r\n                <h3>It Is Timeless<\/h3>\r\n                <p>These observations do not expire. They speak to the part of you that has always been here and always will be.<\/p>\r\n            <\/div>\r\n\r\n            <div class=\"why-card\">\r\n                <div class=\"why-card-number\">06<\/div>\r\n                <div class=\"why-card-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\/><\/svg>\r\n                <\/div>\r\n                <h3>It Is an Invitation<\/h3>\r\n                <p>Not to read passively, but to engage actively. Each page is a mirror held up to your own inner experience.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n       \r\n        <div class=\"why-quote-strip\">\r\n            <p class=\"why-quote-text\">\r\n                This book brings that inner experience into focus, without trying to change what you believe, only helping you see more clearly for yourself.\r\n            <\/p>\r\n            <span class=\"why-quote-author\">\u2014 Oluwaseun Animashaun<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    (function() {\r\n        \r\n        const constellation = document.getElementById('whyConstellation');\r\n        const starCount = 60;\r\n        const stars = [];\r\n        \r\n        for (let i = 0; i < starCount; i++) {\r\n            const star = document.createElement('div');\r\n            star.className = 'star';\r\n            const x = Math.random() * 100;\r\n            const y = Math.random() * 100;\r\n            star.style.left = x + '%';\r\n            star.style.top = y + '%';\r\n            star.style.animationDelay = Math.random() * 3 + 's';\r\n            constellation.appendChild(star);\r\n            stars.push({x, y, el: star});\r\n        }\r\n\r\n       \r\n        for (let i = 0; i < stars.length; i++) {\r\n            for (let j = i + 1; j < stars.length; j++) {\r\n                const dx = stars[i].x - stars[j].x;\r\n                const dy = stars[i].y - stars[j].y;\r\n                const dist = Math.sqrt(dx*dx + dy*dy);\r\n                \r\n                if (dist < 15) {\r\n                    const line = document.createElement('div');\r\n                    line.className = 'connection-line';\r\n                    const midX = (stars[i].x + stars[j].x) \/ 2;\r\n                    const midY = (stars[i].y + stars[j].y) \/ 2;\r\n                    const angle = Math.atan2(dy, dx) * 180 \/ Math.PI;\r\n                    \r\n                    line.style.left = stars[i].x + '%';\r\n                    line.style.top = stars[i].y + '%';\r\n                    line.style.width = dist + '%';\r\n                    line.style.transform = `rotate(${angle}deg)`;\r\n                    line.style.animationDelay = Math.random() * 4 + 's';\r\n                    constellation.appendChild(line);\r\n                }\r\n            }\r\n        }\r\n\r\n        \r\n        const orbsContainer = document.getElementById('whyOrbs');\r\n        const orbSizes = [300, 400, 250, 350];\r\n        orbSizes.forEach((size, i) => {\r\n            const orb = document.createElement('div');\r\n            orb.className = 'orb';\r\n            orb.style.width = size + 'px';\r\n            orb.style.height = size + 'px';\r\n            orb.style.left = (20 + i * 20) + '%';\r\n            orb.style.top = (10 + i * 15) + '%';\r\n            orb.style.animationDelay = (i * 3) + 's';\r\n            orb.style.animationDuration = (12 + i * 2) + 's';\r\n            orbsContainer.appendChild(orb);\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e3d209a e-con-full e-flex e-con e-parent\" data-id=\"e3d209a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f71586 elementor-widget elementor-widget-html\" data-id=\"9f71586\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');\r\n\r\n:root {\r\n    --bg-dark: #0a0a0a;\r\n    --gold-primary: #c9a96e;\r\n    --gold-bright: #d4af37;\r\n    --gold-muted: #a08b5e;\r\n    --gold-faint: rgba(201, 169, 110, 0.08);\r\n    --text-body: #b8a88a;\r\n    --text-light: #e8dcc8;\r\n    --border-subtle: rgba(201, 169, 110, 0.12);\r\n    --border-glow: rgba(201, 169, 110, 0.25);\r\n}\r\n\r\n.mission-section {\r\n    position: relative;\r\n    background: var(--bg-dark);\r\n    min-height: 100vh;\r\n    overflow: hidden;\r\n    padding: 140px 0;\r\n    font-family: 'Cormorant Garamond', serif;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n\r\n.mission-field {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n    z-index: 1;\r\n}\r\n\r\n\r\n.mission-field .field-node {\r\n    position: absolute;\r\n    width: 3px;\r\n    height: 3px;\r\n    background: var(--gold-primary);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 8px rgba(201, 169, 110, 0.4), 0 0 20px rgba(201, 169, 110, 0.1);\r\n    animation: fieldDrift 25s infinite linear;\r\n}\r\n\r\n@keyframes fieldDrift {\r\n    0% { transform: translate(0, 0) scale(1); opacity: 0; }\r\n    5% { opacity: 0.7; }\r\n    95% { opacity: 0.7; }\r\n    100% { transform: translate(var(--drift-x), var(--drift-y)) scale(0.3); opacity: 0; }\r\n}\r\n\r\n\r\n.mission-field .energy-line {\r\n    position: absolute;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.06), transparent);\r\n    width: 100%;\r\n    animation: energyPulse 8s infinite ease-in-out;\r\n}\r\n\r\n@keyframes energyPulse {\r\n    0%, 100% { opacity: 0.3; transform: scaleX(0.6); }\r\n    50% { opacity: 1; transform: scaleX(1); }\r\n}\r\n\r\n\r\n.mission-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n    padding: 0 60px;\r\n    width: 100%;\r\n}\r\n\r\n\r\n.mission-header {\r\n    text-align: center;\r\n    margin-bottom: 80px;\r\n}\r\n\r\n.mission-label {\r\n    font-family: 'Helvetica Neue', Arial, sans-serif;\r\n    font-size: 11px;\r\n    font-weight: 400;\r\n    letter-spacing: 6px;\r\n    text-transform: uppercase;\r\n    color: var(--gold-muted);\r\n    margin-bottom: 30px;\r\n    display: block;\r\n    position: relative;\r\n}\r\n\r\n.mission-label::after {\r\n    content: '';\r\n    display: block;\r\n    width: 40px;\r\n    height: 1px;\r\n    background: var(--gold-primary);\r\n    margin: 20px auto 0;\r\n    opacity: 0.5;\r\n}\r\n\r\n.mission-heading {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2.8rem, 5vw, 4.5rem);\r\n    font-weight: 400;\r\n    color: var(--text-light);\r\n    line-height: 1.1;\r\n    letter-spacing: -0.02em;\r\n}\r\n\r\n.mission-heading em {\r\n    font-style: italic;\r\n    color: var(--gold-primary);\r\n    font-weight: 500;\r\n}\r\n\r\n\r\n.mission-orbit {\r\n    position: relative;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    min-height: 600px;\r\n}\r\n\r\n\r\n.mission-core {\r\n    position: relative;\r\n    z-index: 20;\r\n    max-width: 520px;\r\n    text-align: center;\r\n    padding: 60px 50px;\r\n    background: rgba(10, 10, 10, 0.85);\r\n    border: 1px solid var(--border-subtle);\r\n    backdrop-filter: blur(10px);\r\n}\r\n\r\n.mission-core::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -1px;\r\n    left: 20%;\r\n    right: 20%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);\r\n}\r\n\r\n.mission-core::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -1px;\r\n    left: 20%;\r\n    right: 20%;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);\r\n}\r\n\r\n.mission-core-icon {\r\n    width: 64px;\r\n    height: 64px;\r\n    margin: 0 auto 35px;\r\n    position: relative;\r\n}\r\n\r\n.mission-core-icon svg {\r\n    width: 100%;\r\n    height: 100%;\r\n    stroke: var(--gold-primary);\r\n    fill: none;\r\n    stroke-width: 0.8;\r\n}\r\n\r\n.mission-core-icon::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -10px;\r\n    border: 1px solid var(--border-subtle);\r\n    border-radius: 50%;\r\n    animation: iconPulse 4s infinite ease-in-out;\r\n}\r\n\r\n.mission-core-icon::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: -20px;\r\n    border: 1px solid rgba(201, 169, 110, 0.05);\r\n    border-radius: 50%;\r\n    animation: iconPulse 4s infinite ease-in-out 1s;\r\n}\r\n\r\n@keyframes iconPulse {\r\n    0%, 100% { transform: scale(1); opacity: 0.5; }\r\n    50% { transform: scale(1.08); opacity: 1; }\r\n}\r\n\r\n.mission-core-text {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.25rem;\r\n    color: var(--text-body);\r\n    line-height: 1.9;\r\n    font-weight: 300;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.mission-core-text strong {\r\n    color: var(--text-light);\r\n    font-weight: 400;\r\n}\r\n\r\n.mission-core-sub {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.1rem;\r\n    color: var(--gold-muted);\r\n    font-style: italic;\r\n    font-weight: 300;\r\n    line-height: 1.7;\r\n}\r\n\r\n\r\n.mission-core .corner {\r\n    position: absolute;\r\n    width: 20px;\r\n    height: 20px;\r\n    border: 1px solid var(--border-subtle);\r\n}\r\n\r\n.mission-core .corner-tl { top: 15px; left: 15px; border-right: none; border-bottom: none; }\r\n.mission-core .corner-tr { top: 15px; right: 15px; border-left: none; border-bottom: none; }\r\n.mission-core .corner-bl { bottom: 15px; left: 15px; border-right: none; border-top: none; }\r\n.mission-core .corner-br { bottom: 15px; right: 15px; border-left: none; border-top: none; }\r\n\r\n\r\n.orbit-ring {\r\n    position: absolute;\r\n    width: 700px;\r\n    height: 700px;\r\n    border: 1px solid var(--border-subtle);\r\n    border-radius: 50%;\r\n    pointer-events: none;\r\n    z-index: 5;\r\n}\r\n\r\n.orbit-ring::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 40px;\r\n    border: 1px solid rgba(201, 169, 110, 0.06);\r\n    border-radius: 50%;\r\n}\r\n\r\n.orbit-ring::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 80px;\r\n    border: 1px solid rgba(201, 169, 110, 0.04);\r\n    border-radius: 50%;\r\n}\r\n\r\n\r\n.orbit-dot {\r\n    position: absolute;\r\n    width: 6px;\r\n    height: 6px;\r\n    background: var(--gold-primary);\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 10px rgba(201, 169, 110, 0.5);\r\n}\r\n\r\n.orbit-dot:nth-child(1) { top: -3px; left: 50%; transform: translateX(-50%); }\r\n.orbit-dot:nth-child(2) { bottom: -3px; left: 50%; transform: translateX(-50%); }\r\n.orbit-dot:nth-child(3) { left: -3px; top: 50%; transform: translateY(-50%); }\r\n.orbit-dot:nth-child(4) { right: -3px; top: 50%; transform: translateY(-50%); }\r\n\r\n\r\n.audience-satellites {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0;\r\n    left: 0;\r\n    pointer-events: none;\r\n    z-index: 15;\r\n}\r\n\r\n.satellite {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 20px;\r\n    pointer-events: auto;\r\n    opacity: 0;\r\n    animation: satelliteReveal 1s ease forwards;\r\n}\r\n\r\n.satellite-left {\r\n    flex-direction: row-reverse;\r\n    text-align: right;\r\n}\r\n\r\n.satellite-right {\r\n    flex-direction: row;\r\n    text-align: left;\r\n}\r\n\r\n.satellite:nth-child(1) { animation-delay: 0.4s; top: 5%; left: 8%; }\r\n.satellite:nth-child(2) { animation-delay: 0.6s; top: 5%; right: 8%; }\r\n.satellite:nth-child(3) { animation-delay: 0.8s; top: 50%; left: 2%; transform: translateY(-50%); }\r\n.satellite:nth-child(4) { animation-delay: 1.0s; top: 50%; right: 2%; transform: translateY(-50%); }\r\n.satellite:nth-child(5) { animation-delay: 1.2s; bottom: 5%; left: 8%; }\r\n\r\n.satellite-icon {\r\n    width: 52px;\r\n    height: 52px;\r\n    border: 1px solid var(--border-subtle);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n    background: rgba(10, 10, 10, 0.9);\r\n}\r\n\r\n.satellite:hover .satellite-icon {\r\n    border-color: var(--gold-primary);\r\n    box-shadow: 0 0 25px rgba(201, 169, 110, 0.2);\r\n    transform: scale(1.1);\r\n}\r\n\r\n.satellite-icon svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    stroke: var(--gold-muted);\r\n    fill: none;\r\n    stroke-width: 1.5;\r\n    transition: stroke 0.4s ease;\r\n}\r\n\r\n.satellite:hover .satellite-icon svg {\r\n    stroke: var(--gold-primary);\r\n}\r\n\r\n.satellite-content h4 {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1.15rem;\r\n    color: var(--text-light);\r\n    margin-bottom: 6px;\r\n    font-weight: 500;\r\n    letter-spacing: 0.02em;\r\n}\r\n\r\n.satellite-content p {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 0.95rem;\r\n    color: var(--text-body);\r\n    font-weight: 300;\r\n    line-height: 1.5;\r\n    opacity: 0.8;\r\n}\r\n\r\n\r\n.satellite-connector {\r\n    position: absolute;\r\n    height: 1px;\r\n    background: linear-gradient(90deg, var(--gold-primary), transparent);\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease;\r\n    pointer-events: none;\r\n}\r\n\r\n.satellite:hover .satellite-connector {\r\n    opacity: 0.3;\r\n}\r\n\r\n\r\n.mission-footer {\r\n    margin-top: 100px;\r\n    text-align: center;\r\n    position: relative;\r\n}\r\n\r\n.mission-footer-line {\r\n    width: 1px;\r\n    height: 60px;\r\n    background: linear-gradient(to bottom, var(--gold-primary), transparent);\r\n    margin: 0 auto 30px;\r\n    opacity: 0.4;\r\n}\r\n\r\n.mission-footer-text {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.1rem;\r\n    color: var(--gold-muted);\r\n    font-style: italic;\r\n    font-weight: 300;\r\n    letter-spacing: 1px;\r\n}\r\n\r\n@keyframes satelliteReveal {\r\n    from { opacity: 0; transform: translateY(20px) scale(0.95); }\r\n    to { opacity: 1; transform: translateY(0) scale(1); }\r\n}\r\n\r\n\r\n.satellite:nth-child(3),\r\n.satellite:nth-child(4) {\r\n    animation-name: satelliteRevealCenter;\r\n}\r\n\r\n@keyframes satelliteRevealCenter {\r\n    from { opacity: 0; transform: translateY(-50%) translateX(-20px) scale(0.95); }\r\n    to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }\r\n}\r\n\r\n\r\n@media (max-width: 1200px) {\r\n    .mission-orbit { min-height: 800px; }\r\n    .orbit-ring { width: 500px; height: 500px; }\r\n    .satellite { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; }\r\n    .satellite:nth-child(3),\r\n    .satellite:nth-child(4) { animation-name: satelliteReveal; }\r\n    \r\n    .audience-satellites {\r\n        position: relative;\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 30px;\r\n        margin-top: 60px;\r\n        width: auto;\r\n        height: auto;\r\n    }\r\n    \r\n    .satellite-left,\r\n    .satellite-right {\r\n        flex-direction: row;\r\n        text-align: left;\r\n    }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n    .mission-container { padding: 0 25px; }\r\n    .mission-core { padding: 40px 25px; }\r\n    .orbit-ring { display: none; }\r\n    .audience-satellites { grid-template-columns: 1fr; }\r\n    .mission-heading { font-size: 2.2rem; }\r\n}\r\n\r\n\/* =========================\r\n   LARGE TABLETS (<= 1200px)\r\n========================= *\/\r\n@media (max-width: 1200px) {\r\n    .mission-section {\r\n        padding: 100px 0;\r\n        min-height: auto;\r\n    }\r\n\r\n    .mission-container {\r\n        padding: 0 40px;\r\n    }\r\n\r\n    .mission-header {\r\n        margin-bottom: 60px;\r\n    }\r\n\r\n    .mission-orbit {\r\n        min-height: auto;\r\n        flex-direction: column;\r\n        gap: 50px;\r\n    }\r\n\r\n    .mission-core {\r\n        max-width: 100%;\r\n        width: 100%;\r\n    }\r\n\r\n    .orbit-ring {\r\n        width: 500px;\r\n        height: 500px;\r\n    }\r\n\r\n    .audience-satellites {\r\n        position: relative;\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 24px;\r\n        width: 100%;\r\n        height: auto;\r\n        margin-top: 40px;\r\n    }\r\n\r\n    .satellite {\r\n        position: relative !important;\r\n        top: auto !important;\r\n        right: auto !important;\r\n        bottom: auto !important;\r\n        left: auto !important;\r\n        transform: none !important;\r\n    }\r\n\r\n    .satellite-left,\r\n    .satellite-right {\r\n        flex-direction: row;\r\n        text-align: left;\r\n    }\r\n}\r\n\r\n\/* =========================\r\n   TABLET \/ MOBILE (<= 768px)\r\n========================= *\/\r\n@media (max-width: 768px) {\r\n    .mission-section {\r\n        padding: 70px 0;\r\n    }\r\n\r\n    .mission-container {\r\n        padding: 0 20px;\r\n    }\r\n\r\n    .mission-label {\r\n        font-size: 9px;\r\n        letter-spacing: 4px;\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .mission-heading {\r\n        font-size: clamp(2rem, 8vw, 2.8rem);\r\n        line-height: 1.2;\r\n    }\r\n\r\n    .mission-header {\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .mission-core {\r\n        padding: 32px 20px;\r\n    }\r\n\r\n    .mission-core-icon {\r\n        width: 52px;\r\n        height: 52px;\r\n        margin-bottom: 24px;\r\n    }\r\n\r\n    .mission-core-text {\r\n        font-size: 1rem;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .mission-core-sub {\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .mission-core .corner {\r\n        width: 14px;\r\n        height: 14px;\r\n    }\r\n\r\n    .orbit-ring {\r\n        display: none;\r\n    }\r\n\r\n    .audience-satellites {\r\n        grid-template-columns: 1fr;\r\n        gap: 18px;\r\n    }\r\n\r\n    .satellite {\r\n        gap: 14px;\r\n        align-items: flex-start;\r\n    }\r\n\r\n    .satellite-icon {\r\n        width: 42px;\r\n        height: 42px;\r\n    }\r\n\r\n    .satellite-icon svg {\r\n        width: 18px;\r\n        height: 18px;\r\n    }\r\n\r\n    .satellite-content h4 {\r\n        font-size: 1rem;\r\n    }\r\n\r\n    .satellite-content p {\r\n        font-size: 0.9rem;\r\n        line-height: 1.4;\r\n    }\r\n\r\n    .mission-footer {\r\n        margin-top: 60px;\r\n    }\r\n\r\n    .mission-footer-text {\r\n        font-size: 0.95rem;\r\n    }\r\n}\r\n\r\n\/* =========================\r\n   SMALL MOBILE (<= 480px)\r\n========================= *\/\r\n@media (max-width: 480px) {\r\n    .mission-section {\r\n        padding: 50px 0;\r\n    }\r\n\r\n    .mission-container {\r\n        padding: 0 15px;\r\n    }\r\n\r\n    .mission-heading {\r\n        font-size: 1.7rem;\r\n    }\r\n\r\n    .mission-core {\r\n        padding: 24px 16px;\r\n    }\r\n\r\n    .mission-core-text {\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .mission-core-sub {\r\n        font-size: 0.85rem;\r\n    }\r\n\r\n    .satellite {\r\n        gap: 12px;\r\n    }\r\n\r\n    .satellite-content h4 {\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .satellite-content p {\r\n        font-size: 0.85rem;\r\n    }\r\n\r\n    \/* Reduce animation load *\/\r\n    .mission-field {\r\n        opacity: 0.4;\r\n    }\r\n\r\n    .mission-field .energy-line:nth-child(n+3) {\r\n        display: none;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"mission-section\">\r\n    \r\n    <div class=\"mission-field\" id=\"missionField\"><\/div>\r\n\r\n    <div class=\"mission-container\">\r\n        \r\n        <div class=\"mission-header\">\r\n            \r\n            <h2 class=\"mission-heading\">\r\n                The <em>Mission<\/em>\r\n            <\/h2>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"mission-orbit\">\r\n            \r\n            <div class=\"orbit-ring\">\r\n                <div class=\"orbit-dot\"><\/div>\r\n                <div class=\"orbit-dot\"><\/div>\r\n                <div class=\"orbit-dot\"><\/div>\r\n                <div class=\"orbit-dot\"><\/div>\r\n            <\/div>\r\n\r\n            \r\n            <div class=\"mission-core\">\r\n                <div class=\"corner corner-tl\"><\/div>\r\n                <div class=\"corner corner-tr\"><\/div>\r\n                <div class=\"corner corner-bl\"><\/div>\r\n                <div class=\"corner corner-br\"><\/div>\r\n\r\n                <div class=\"mission-core-icon\">\r\n                    <svg viewBox=\"0 0 64 64\">\r\n                        <circle cx=\"32\" cy=\"32\" r=\"28\" stroke-width=\"0.8\"\/>\r\n                        <circle cx=\"32\" cy=\"32\" r=\"18\" stroke-width=\"0.6\"\/>\r\n                        <circle cx=\"32\" cy=\"32\" r=\"8\" stroke-width=\"0.5\"\/>\r\n                        <line x1=\"32\" y1=\"4\" x2=\"32\" y2=\"60\" stroke-width=\"0.5\"\/>\r\n                        <line x1=\"4\" y1=\"32\" x2=\"60\" y2=\"32\" stroke-width=\"0.5\"\/>\r\n                    <\/svg>\r\n                <\/div>\r\n\r\n                <p class=\"mission-core-text\">\r\n                    Oluwaseun's mission is to help individuals reconnect with their <strong>deepest intelligence<\/strong> the sacred awareness that informs intuition, conscience, wisdom, and purpose.\r\n                <\/p>\r\n\r\n                <p class=\"mission-core-sub\">\r\n                    Through writing, teaching, and spiritual exploration, he seeks to bridge ancient knowledge with modern understanding.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            \r\n            <div class=\"audience-satellites\">\r\n                <div class=\"satellite satellite-left\">\r\n                    <div class=\"satellite-icon\">\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"\/><\/svg>\r\n                    <\/div>\r\n                    <div class=\"satellite-content\">\r\n                        <h4>Seekers of Truth<\/h4>\r\n                        <p>Those who question surface answers<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"satellite satellite-right\">\r\n                    <div class=\"satellite-icon\">\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg>\r\n                    <\/div>\r\n                    <div class=\"satellite-content\">\r\n                        <h4>Spiritual Explorers<\/h4>\r\n                        <p>Walking paths beyond convention<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"satellite satellite-left\">\r\n                    <div class=\"satellite-icon\">\r\n                        <svg viewBox=\"0 0 24 24\"><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\"\/><\/svg>\r\n                    <\/div>\r\n                    <div class=\"satellite-content\">\r\n                        <h4>Thought Leaders<\/h4>\r\n                        <p>Shaping culture through insight<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"satellite satellite-right\">\r\n                    <div class=\"satellite-icon\">\r\n                        <svg viewBox=\"0 0 24 24\"><path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\/><\/svg>\r\n                    <\/div>\r\n                    <div class=\"satellite-content\">\r\n                        <h4>Those in Transformation<\/h4>\r\n                        <p>Navigating life's deep shifts<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"satellite satellite-left\">\r\n                    <div class=\"satellite-icon\">\r\n                        <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 1C6.48 1 2 5.48 2 11c0 5.25 3.5 9.69 8.25 11.18.75.18 1.03-.33 1.03-.74 0-.36-.01-1.31-.02-2.57-3.45.75-4.18-1.67-4.18-1.67-.56-1.43-1.37-1.81-1.37-1.81-1.12-.77.09-.75.09-.75 1.24.09 1.89 1.27 1.89 1.27 1.1 1.89 2.89 1.34 3.59 1.03.11-.8.43-1.34.78-1.65-2.76-.31-5.66-1.38-5.66-6.14 0-1.36.48-2.47 1.27-3.34-.13-.31-.55-1.57.12-3.27 0 0 1.04-.33 3.4 1.28a11.85 11.85 0 016.2 0c2.36-1.61 3.4-1.28 3.4-1.28.67 1.7.25 2.96.12 3.27.79.87 1.27 1.98 1.27 3.34 0 4.77-2.9 5.82-5.67 6.13.44.38.84 1.13.84 2.28 0 1.65-.01 2.98-.01 3.38 0 .41.27.9 1.03.74C18.5 20.69 22 16.25 22 11c0-5.52-4.48-10-10-10z\"\/><\/svg>\r\n                    <\/div>\r\n                    <div class=\"satellite-content\">\r\n                        <h4>Clarity & Purpose Seekers<\/h4>\r\n                        <p>Searching for meaning's thread<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        \r\n        <div class=\"mission-footer\">\r\n            <div class=\"mission-footer-line\"><\/div>\r\n            <p class=\"mission-footer-text\">His work serves those who listen before they speak<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    (function() {\r\n       \r\n        const field = document.getElementById('missionField');\r\n        \r\n        \r\n        for (let i = 0; i < 25; i++) {\r\n            const node = document.createElement('div');\r\n            node.className = 'field-node';\r\n            node.style.left = Math.random() * 100 + '%';\r\n            node.style.top = Math.random() * 100 + '%';\r\n            node.style.setProperty('--drift-x', (Math.random() * 200 - 100) + 'px');\r\n            node.style.setProperty('--drift-y', (Math.random() * -300 - 100) + 'px');\r\n            node.style.animationDelay = Math.random() * 25 + 's';\r\n            node.style.animationDuration = (20 + Math.random() * 15) + 's';\r\n            field.appendChild(node);\r\n        }\r\n\r\n        \r\n        for (let i = 0; i < 6; i++) {\r\n            const line = document.createElement('div');\r\n            line.className = 'energy-line';\r\n            line.style.top = (15 + i * 14) + '%';\r\n            line.style.animationDelay = (i * 1.5) + 's';\r\n            field.appendChild(line);\r\n        }\r\n    })();\r\n    <\/script>\r\n<\/section>\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 Oluwaseun Animashaun Not a new belief &nbsp;\u00b7&nbsp; Not a system &nbsp;\u00b7&nbsp; A remembering Begin the Journey Explore the Book [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-197","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages\/197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/comments?post=197"}],"version-history":[{"count":49,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages\/197\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/pages\/197\/revisions\/348"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/oluwaseun\/index.php\/wp-json\/wp\/v2\/media?parent=197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}