{"id":295,"date":"2026-06-04T14:33:00","date_gmt":"2026-06-04T14:33:00","guid":{"rendered":"https:\/\/demowebdesign.live\/sonia\/?page_id=295"},"modified":"2026-06-04T21:46:39","modified_gmt":"2026-06-04T21:46:39","slug":"about","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/sonia\/index.php\/about\/","title":{"rendered":"ABOUT"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"295\" class=\"elementor elementor-295\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92dc760 e-con-full e-flex e-con e-parent\" data-id=\"92dc760\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5392ce2 elementor-widget elementor-widget-html\" data-id=\"5392ce2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sonia-hero-section,\r\n.sonia-hero-section * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n    line-height: 1.6;\r\n}\r\n\r\n\/* \u2500\u2500 Root variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sonia-hero-section {\r\n    --book-img: url('Updated-New-Concept (1).jpg');\r\n    --c-dark:       #05070e;\r\n    --c-white:      #ffffff;\r\n    --c-muted:      #e2e8f0;\r\n    --c-gold-lt:    #ebd0b9;\r\n    --c-gold:       #e5b982;\r\n    --c-gold-dk:    #c59b62;\r\n    --f-serif: 'Playfair Display', Georgia, serif;\r\n    --f-sans:  'Inter', system-ui, sans-serif;\r\n    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\r\n    --mx: 0; --my: 0;\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden;                \/* kills any stray scrollbar *\/\r\n    background: var(--c-dark);\r\n    font-family: var(--f-sans);\r\n    color: var(--c-white);\r\n\r\n    \/* Centre the inner container *\/\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding-top: 300px;\r\n    padding-bottom: 100px;\r\n}\r\n\r\n\/* \u2500\u2500 Background video \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.s-bg-video {\r\n    position: absolute; inset: 0;\r\n    width: 100%; height: 100%;\r\n    object-fit: cover;\r\n    opacity: 0.88;\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    \/*filter: grayscale(45%) sepia(25%) hue-rotate(185deg) saturate(0.7) brightness(0.85);*\/\r\n\r\n}\r\n.s-overlay {\r\n    position: absolute; inset: 0;\r\n    background: radial-gradient(\r\n        ellipse at 50% 50%,\r\n        rgba(5,7,14,.1)  0%,\r\n        rgba(5,7,14,.55) 55%,\r\n        rgba(5,7,14,.94) 100%\r\n    );\r\n    z-index: 2;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* \u2500\u2500 Ambient glow orbs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.s-glows {\r\n    position: absolute; inset: 0;\r\n    z-index: 3;\r\n    pointer-events: none;\r\n    overflow: hidden;\r\n}\r\n.s-orb {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(60px);\r\n    will-change: transform;\r\n}\r\n.s-orb-1 { width:540px; height:540px; top:-8%;   left:8%;\r\n    background: radial-gradient(circle, rgba(229,185,130,.11) 0%, transparent 70%);\r\n    animation: orb1 34s ease-in-out infinite; }\r\n.s-orb-2 { width:700px; height:700px; bottom:-18%; right:5%;\r\n    background: radial-gradient(circle, rgba(232,168,124,.07) 0%, transparent 70%);\r\n    animation: orb2 42s ease-in-out infinite; }\r\n.s-orb-3 { width:420px; height:420px; top:30%; left:52%;\r\n    background: radial-gradient(circle, rgba(229,185,130,.06) 0%, transparent 70%);\r\n    animation: orb3 28s ease-in-out infinite; }\r\n@keyframes orb1 { 0%,100%{transform:translate(0,0) scale(1);opacity:.7}   50%{transform:translate(40px,30px) scale(1.12);opacity:.9} }\r\n@keyframes orb2 { 0%,100%{transform:translate(0,0) scale(1.1);opacity:.8} 50%{transform:translate(-50px,-22px) scale(.9);opacity:.5} }\r\n@keyframes orb3 { 0%,100%{transform:translate(0,0) scale(.9);opacity:.6}  50%{transform:translate(-30px,40px) scale(1.1);opacity:.8} }\r\n\r\n\/* Dust particles *\/\r\n.s-dust { position:absolute; border-radius:50%; opacity:0; pointer-events:none;\r\n    background: radial-gradient(circle, rgba(229,185,130,.75) 0%, transparent 70%);\r\n    box-shadow: 0 0 8px rgba(229,185,130,.25);\r\n    will-change: transform, opacity; }\r\n.s-d1{width:5px;height:5px;left:10%;bottom:10%;animation:dust 22s linear 1s infinite}\r\n.s-d2{width:7px;height:7px;left:34%;bottom:8%; animation:dust 28s linear 5s infinite}\r\n.s-d3{width:4px;height:4px;left:56%;bottom:14%;animation:dust 25s linear 9s infinite}\r\n.s-d4{width:8px;height:8px;left:76%;bottom:9%; animation:dust 32s linear 14s infinite}\r\n.s-d5{width:6px;height:6px;left:90%;bottom:13%;animation:dust 26s linear 18s infinite}\r\n@keyframes dust {\r\n    0%  {opacity:0;  transform:translateY(0)    translateX(0)    scale(.6)}\r\n    20% {opacity:.7; transform:translateY(-18vh) translateX(14px) scale(.85)}\r\n    60% {opacity:.5; transform:translateY(-55vh) translateX(-10px) scale(.9)}\r\n    100%{opacity:0;  transform:translateY(-92vh) translateX(14px) scale(1.1)}\r\n}\r\n\r\n\/* \u2500\u2500 Entrance animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@keyframes fadeUp {\r\n    from { opacity:0; transform:translateY(26px) }\r\n    to   { opacity:1; transform:translateY(0) }\r\n}\r\n.fu { opacity:0; animation: fadeUp 1.1s var(--ease-out) forwards }\r\n.d1{animation-delay:.10s} .d2{animation-delay:.25s} .d3{animation-delay:.40s}\r\n.d4{animation-delay:.55s} .d5{animation-delay:.70s} .d6{animation-delay:.85s}\r\n\r\n\/* \u2500\u2500 Main 2-column container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.s-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n\r\n    display: grid;\r\n    grid-template-columns: minmax(0,1fr) minmax(0,auto);  \/* left grows, right is natural width *\/\r\n    align-items: center;\r\n    gap: 64px;\r\n}\r\n\r\n\/* \u2500\u2500 LEFT: text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.s-text {\r\n    min-width: 0;                    \/* critical: stops grid blowout *\/\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    transform: translate(\r\n        calc(var(--mx) * 9px),\r\n        calc(var(--my) * 9px)\r\n    );\r\n    transition: transform .6s var(--ease-out);\r\n    will-change: transform;\r\n}\r\n\r\n.s-label {\r\n    font-size: .72rem; font-weight: 600;\r\n    text-transform: uppercase; letter-spacing: 4px;\r\n    color: var(--c-gold); margin-bottom: 20px;\r\n    display: inline-flex; align-items: center; gap: 14px;\r\n    font-family: var(--f-sans) !important;\r\n}\r\n.s-label::before {\r\n    content:''; width:30px; height:1px;\r\n    background: var(--c-gold); flex-shrink:0;\r\n}\r\n\r\n.s-title {\r\n    font-family: var(--f-serif) !important;\r\n    font-size: clamp(2.4rem, 4.5vw, 5rem);\r\n    font-weight: 300;\r\n    line-height: 1.06;\r\n    color: var(--c-white);\r\n    text-shadow: 0 4px 20px rgba(0,0,0,.3);\r\n}\r\n.s-bold  { font-weight: 700 }\r\n.s-gold  {\r\n    font-style: italic;\r\n    background: linear-gradient(135deg, var(--c-gold-lt) 0%, var(--c-gold) 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n}\r\n\r\n\/* Ornamental rule *\/\r\n.s-rule {\r\n    display: flex; align-items: center; gap: 12px;\r\n    margin: 24px 0; width: 100%; max-width: 400px;\r\n}\r\n.s-rule-line {\r\n    height: 1px; flex: 1;\r\n    background: linear-gradient(to right, var(--c-gold), rgba(229,185,130,0));\r\n}\r\n.s-rule-line.r {\r\n    background: linear-gradient(to left, rgba(229,185,130,0), rgba(229,185,130,0));\r\n}\r\n.s-rule-sym {\r\n    font-size: .8rem; color: var(--c-gold); opacity: .6;\r\n    font-family: var(--f-serif) !important; letter-spacing: 4px;\r\n}\r\n\r\n\/* Pull quote *\/\r\n.s-quote {\r\n    font-family: var(--f-serif) !important;\r\n    font-size: clamp(1rem, 1.5vw, 1.4rem);\r\n    font-style: italic; font-weight: 400;\r\n    line-height: 1.55; color: var(--c-gold-lt);\r\n    margin-bottom: 22px;\r\n    border-left: 2px solid var(--c-gold);\r\n    padding-left: 18px;\r\n    text-shadow: 0 2px 10px rgba(0,0,0,.4);\r\n}\r\n.s-quote span { display:block; margin-top:5px; color:var(--c-white); font-style:normal }\r\n\r\n\/* Body *\/\r\n.s-body {\r\n    font-size: 1rem; line-height: 1.9;\r\n    color: var(--c-muted); margin-bottom: 28px;\r\n    font-family: var(--f-sans) !important;\r\n    text-shadow: 0 2px 10px rgba(0,0,0,.4);\r\n}\r\n\r\n\/* Endorsements *\/\r\n.s-endorsements { display:flex; flex-direction:column; gap:8px; margin-bottom:32px; width:100% }\r\n.s-endorse {\r\n    display: flex; align-items: center; gap: 12px;\r\n    padding: 10px 16px;\r\n    border-left: 2px solid rgba(229,185,130,.32);\r\n    background: rgba(229,185,130,.035);\r\n}\r\n.s-avatar {\r\n    width:30px; height:30px; border-radius:50%; flex-shrink:0;\r\n    background: rgba(229,185,130,.12);\r\n    border: 1px solid rgba(229,185,130,.28);\r\n    display:flex; align-items:center; justify-content:center;\r\n    font-family: var(--f-serif) !important;\r\n    font-size:.7rem; color:var(--c-gold); font-style:italic;\r\n}\r\n.s-endorse-text {\r\n    font-size:.76rem; color:rgba(235,208,185,.62);\r\n    font-style:italic; font-family:var(--f-serif) !important; line-height:1.4;\r\n}\r\n.s-endorse-name {\r\n    display:block; margin-top:3px;\r\n    font-size:.62rem; font-weight:700;\r\n    text-transform:uppercase; letter-spacing:1.5px;\r\n    color:var(--c-gold); font-family:var(--f-sans) !important;\r\n    font-style:normal; opacity:.8;\r\n}\r\n\r\n\/* CTA buttons *\/\r\n.s-actions { display:flex; gap:14px; align-items:center; width:100% }\r\n.s-btn {\r\n    display: inline-flex; align-items: center; justify-content: center;\r\n    padding: 16px 32px;\r\n    font-size: .8rem; font-weight: 700;\r\n    letter-spacing: 2px; text-transform: uppercase;\r\n    text-decoration: none !important; border-radius: 4px;\r\n    transition: all .3s cubic-bezier(.25,.8,.25,1);\r\n    font-family: var(--f-sans) !important;\r\n    white-space: nowrap;\r\n}\r\n.s-btn-p {\r\n    background: var(--c-gold); color: #05070e !important;\r\n    border: 1px solid var(--c-gold);\r\n    box-shadow: 0 8px 22px rgba(229,185,130,.15);\r\n}\r\n.s-btn-p:hover {\r\n    transform: translateY(-3px); background: transparent;\r\n    color: var(--c-gold) !important;\r\n    box-shadow: 0 14px 28px rgba(229,185,130,.3);\r\n}\r\n.s-btn-s {\r\n    background: transparent; color: #fff !important;\r\n    border: 1px solid rgba(255,255,255,.28);\r\n}\r\n.s-btn-s:hover {\r\n    transform: translateY(-3px); background: #fff;\r\n    color: #05070e !important; border-color: #fff;\r\n    box-shadow: 0 14px 28px rgba(255,255,255,.18);\r\n}\r\n\r\n\/* About Author Center Layout *\/\r\n.s-author-container{\r\n    display:flex !important;\r\n    justify-content:center;\r\n    align-items:center;\r\n    text-align:center;\r\n}\r\n\r\n.s-author-text{\r\n    max-width:900px;\r\n    width:100%;\r\n    align-items:center !important;\r\n    text-align:center;\r\n    margin:auto;\r\n    transform:none !important;\r\n}\r\n\r\n.s-author-text .s-rule{\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n}\r\n\r\n.s-author-text .s-quote{\r\n    border-left:none;\r\n    padding-left:0;\r\n    max-width:800px;\r\n}\r\n\r\n.s-author-text .s-body{\r\n    max-width:850px;\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n}\r\n\r\n.s-author-text .s-actions{\r\n    justify-content:center;\r\n}\r\n\r\n\r\n\/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@media (max-width: 900px) {\r\n    .sonia-hero-section { padding: 240px 5% 72px }\r\n\r\n    .s-container {\r\n        grid-template-columns: 1fr;   \/* single column *\/\r\n        gap: 48px;\r\n        text-align: center;\r\n    }\r\n\r\n    \/* Book first on mobile *\/\r\n    .s-book-col { order: -1 }\r\n\r\n    .s-text { align-items: center }\r\n    .s-label::before { display:none }\r\n    .s-quote { border-left:none; padding-left:0 }\r\n    .s-rule  { margin-left:auto; margin-right:auto }\r\n\r\n    .s-actions { justify-content:center; flex-wrap:wrap }\r\n\r\n    .s-book { width:230px; height:345px }\r\n    .s-meta { max-width:280px }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .s-title { font-size: 2.2rem }\r\n    .s-book  { width:195px; height:292px }\r\n    .s-ph-title-lg { font-size:1.35rem }\r\n    .s-btn  { padding:14px 22px; font-size:.74rem }\r\n    .s-actions { flex-direction:column; align-items:stretch }\r\n}\r\n<\/style>\r\n\r\n<section class=\"sonia-hero-section\" id=\"sonia-home\">\r\n\r\n    <!-- BG video -->\r\n    <video autoplay loop muted playsinline class=\"s-bg-video\">\r\n        <source src=\"https:\/\/demowebdesign.live\/sonia\/wp-content\/uploads\/2026\/06\/0_Winter_Forest_1280x720.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <div class=\"s-overlay\"><\/div>\r\n\r\n    <!-- Ambient -->\r\n    <div class=\"s-glows\">\r\n        <div class=\"s-orb s-orb-1\"><\/div>\r\n        <div class=\"s-orb s-orb-2\"><\/div>\r\n        <div class=\"s-orb s-orb-3\"><\/div>\r\n        <div class=\"s-dust s-d1\"><\/div>\r\n        <div class=\"s-dust s-d2\"><\/div>\r\n        <div class=\"s-dust s-d3\"><\/div>\r\n        <div class=\"s-dust s-d4\"><\/div>\r\n        <div class=\"s-dust s-d5\"><\/div>\r\n    <\/div>\r\n\r\n<div class=\"s-container\">\r\n\r\n    <div class=\"s-text s-author-text\">\r\n\r\n        <span class=\"s-label fu d1\">\r\n            Author \u2022 Speaker \u2022 Mentor \u2022 Woman of Faith\r\n        <\/span>\r\n\r\n        <h1 class=\"s-title fu d2\">\r\n            Meet <span class=\"s-gold\">Sonia Henry<\/span>\r\n        <\/h1>\r\n\r\n        <div class=\"s-rule fu d2\">\r\n            <div class=\"s-rule-line\"><\/div>\r\n            <span class=\"s-rule-sym\">\u2726 \u2726 \u2726<\/span>\r\n            <div class=\"s-rule-line r\"><\/div>\r\n        <\/div>\r\n\r\n        <blockquote class=\"s-quote fu d3\">\r\n            \"My mission is to inspire people to discover God's purpose,\r\n            embrace their calling, and finish their race with faith.\"\r\n        <\/blockquote>\r\n\r\n        <p class=\"s-body fu d4\">\r\n            Sonia Henry is an inspirational author, speaker, mentor,\r\n            and faith leader whose life has been dedicated to helping\r\n            others grow spiritually, walk boldly in their calling,\r\n            and experience the transformative power of God's love.\r\n        <\/p>\r\n\r\n\r\n        <div class=\"s-actions fu d5\">\r\n            <a href=\"https:\/\/demowebdesign.live\/sonia\/index.php\/books\/\" class=\"s-btn s-btn-p\">\r\n                Explore Her Books\r\n            <\/a>\r\n\r\n            <a href=\"https:\/\/demowebdesign.live\/sonia\/index.php\/contact\/\" class=\"s-btn s-btn-s\">\r\n                Invite Sonia to Speak\r\n            <\/a>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n    function init() {\r\n        var el = document.querySelector('.sonia-hero-section');\r\n        if (!el || el.dataset.si) return;\r\n        el.dataset.si = '1';\r\n        el.addEventListener('mousemove', function (e) {\r\n            var r = el.getBoundingClientRect();\r\n            el.style.setProperty('--mx', ((e.clientX - r.left) \/ r.width  - .5).toFixed(3));\r\n            el.style.setProperty('--my', ((e.clientY - r.top)  \/ r.height - .5).toFixed(3));\r\n        }, { passive: true });\r\n        el.addEventListener('mouseleave', function () {\r\n            el.style.setProperty('--mx', '0');\r\n            el.style.setProperty('--my', '0');\r\n        }, { passive: true });\r\n    }\r\n    document.readyState === 'loading'\r\n        ? document.addEventListener('DOMContentLoaded', init)\r\n        : init();\r\n    window.addEventListener('elementor\/frontend\/init', init);\r\n    setTimeout(init, 800);\r\n    setTimeout(init, 2000);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-123c711 e-con-full e-flex e-con e-parent\" data-id=\"123c711\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-96b3339 elementor-widget elementor-widget-html\" data-id=\"96b3339\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2500\u2500 Reset & Variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sonia-about-section,\r\n.sonia-about-section * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n    line-height: 1.7;\r\n}\r\n\r\n.sonia-about-section {\r\n    --portrait-img: url('Updated-New-Concept (1).jpg'); \/* Placeholder or real image url *\/\r\n    --c-cream-bg:   #fbf7f0;\r\n    --c-dark-text:  #161a24;\r\n    --c-muted-text: #4a5264;\r\n    --c-gold-lt:    #ebd0b9;\r\n    --c-gold:       #e5b982;\r\n    --c-gold-dk:    #c59b62;\r\n    --c-gold-accent:#b88b4a;\r\n    --f-serif: 'Playfair Display', Georgia, serif;\r\n    --f-sans:  'Inter', system-ui, sans-serif;\r\n    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\r\n\r\n    position: relative;\r\n    width: 100%;\r\n    min-height: auto;\r\n    padding: 85px 5% 100px;\r\n    background-color: var(--c-cream-bg);\r\n    \r\n    background-image: \r\n        radial-gradient(circle at 10% 20%, rgba(254, 251, 246, 0.98) 0%, transparent 60%),\r\n        radial-gradient(circle at 90% 10%, rgba(250, 243, 232, 0.95) 0%, transparent 50%),\r\n        radial-gradient(circle at 50% 80%, rgba(246, 237, 217, 0.8) 0%, transparent 70%),\r\n        radial-gradient(circle at 80% 90%, rgba(254, 251, 246, 0.98) 0%, transparent 40%);\r\n        \r\n    font-family: var(--f-sans);\r\n    color: var(--c-dark-text);\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 1;\r\n}\r\n\r\n.sonia-about-section::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: 0.015;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\r\n}\r\n\r\n\/* \u2500\u2500 SVGs & Canvas Backgrounds \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sa-bg-wrapper {\r\n    position: absolute;\r\n    inset: 0;\r\n    pointer-events: none;\r\n    z-index: 2;\r\n    overflow: hidden;\r\n}\r\n\r\n.sa-particles-canvas {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    pointer-events: none;\r\n}\r\n\r\n.sa-path-svg {\r\n    position: absolute;\r\n    top: 5%;\r\n    left: 5%;\r\n    width: 90%;\r\n    height: 90%;\r\n    opacity: 0.75;\r\n    pointer-events: none;\r\n}\r\n.sa-journey-path {\r\n    stroke: var(--c-gold-dk);\r\n    stroke-width: 1.5;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n    stroke-dasharray: 6 6;\r\n    fill: none;\r\n    opacity: 0.22;\r\n    transition: stroke-dashoffset 0.1s linear;\r\n}\r\n\r\n.sa-grass-svg {\r\n    position: absolute;\r\n    bottom: -1px;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 180px;\r\n    pointer-events: none;\r\n    z-index: 3;\r\n    opacity: 0.85;\r\n}\r\n\r\n\/* \u2500\u2500 Container Grid Layout \u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sa-container {\r\n    position: relative;\r\n    z-index: 10;\r\n    width: 100%;\r\n    max-width: 1200px;\r\n    display: grid;\r\n    grid-template-columns: 360px 1fr; \/* \u2190 Increased from 290px to 360px *\/\r\n    align-items: center;\r\n    gap: 65px;\r\n}\r\n\r\n\/* \u2500\u2500 LEFT: Portrait Column \u2500\u2500\u2500\u2500\u2500 *\/\r\n.sa-portrait-col {\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n}\r\n\r\n.sa-vertical-text {\r\n    position: absolute;\r\n    left: -40px;\r\n    bottom: 50px;\r\n    transform: rotate(-90deg);\r\n    transform-origin: left bottom;\r\n    white-space: nowrap;\r\n    font-family: var(--f-sans);\r\n    font-size: 0.6rem;\r\n    font-weight: 700;\r\n    letter-spacing: 4px;\r\n    color: var(--c-gold-accent);\r\n    text-transform: uppercase;\r\n    opacity: 0.75;\r\n    pointer-events: none;\r\n}\r\n\r\n.sa-portrait-backdrop {\r\n    position: absolute;\r\n    top: 20px;\r\n    left: 20px;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(197, 155, 98, 0.05);\r\n    border: 1px solid rgba(197, 155, 98, 0.12);\r\n    border-radius: 8px;\r\n    z-index: -1;\r\n    pointer-events: none;\r\n    transition: transform 0.6s var(--ease-out), background 0.6s, border-color 0.6s;\r\n}\r\n\r\n.sa-frame-wrapper {\r\n    position: relative;\r\n    padding: 15px;\r\n    border: 1px solid rgba(197, 155, 98, 0.22);\r\n    border-radius: 8px;\r\n    background: rgba(255, 255, 255, 0.5);\r\n    backdrop-filter: blur(10px);\r\n    -webkit-backdrop-filter: blur(10px);\r\n    box-shadow: \r\n        0 20px 45px rgba(197, 155, 98, 0.05), \r\n        inset 0 0 15px rgba(255, 255, 255, 0.6);\r\n    transition: all 0.6s var(--ease-out);\r\n    width: 100%;\r\n    max-width: 360px; \/* \u2190 Increased from 290px to 360px *\/\r\n}\r\n.sa-frame-wrapper::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 6px;\r\n    border: 1px dashed rgba(197, 155, 98, 0.16);\r\n    border-radius: 6px;\r\n    pointer-events: none;\r\n    transition: all 0.5s;\r\n}\r\n\r\n.sa-frame-wrapper:hover {\r\n    border-color: rgba(197, 155, 98, 0.45);\r\n    box-shadow: \r\n        0 28px 60px rgba(197, 155, 98, 0.1), \r\n        inset 0 0 20px rgba(255, 255, 255, 0.8);\r\n    transform: translateY(-3px);\r\n}\r\n.sa-frame-wrapper:hover::before {\r\n    border-color: rgba(197, 155, 98, 0.3);\r\n    border-style: solid;\r\n}\r\n.sa-frame-wrapper:hover ~ .sa-portrait-backdrop {\r\n    transform: translate(10px, 10px);\r\n    background: rgba(197, 155, 98, 0.08);\r\n    border-color: rgba(197, 155, 98, 0.2);\r\n}\r\n\r\n.sa-corner {\r\n    position: absolute;\r\n    width: 14px;\r\n    height: 14px;\r\n    border-color: rgba(197, 155, 98, 0.35);\r\n    border-style: solid;\r\n    pointer-events: none;\r\n    transition: border-color 0.4s;\r\n}\r\n.sa-c-tl { top: 4px; left: 4px; border-width: 1px 0 0 1px; border-radius: 2px 0 0 0; }\r\n.sa-c-tr { top: 4px; right: 4px; border-width: 1px 1px 0 0; border-radius: 0 2px 0 0; }\r\n.sa-c-bl { bottom: 4px; left: 4px; border-width: 0 0 1px 1px; border-radius: 0 0 0 2px; }\r\n.sa-c-br { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; border-radius: 0 0 2px 0; }\r\n.sa-frame-wrapper:hover .sa-corner {\r\n    border-color: var(--c-gold-accent);\r\n}\r\n\r\n.sa-portrait-container {\r\n    position: relative;\r\n    width: 100%;\r\n    padding-top: 125%;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    background: #eae3d7;\r\n}\r\n\r\n.sa-portrait-img {\r\n    position: absolute;\r\n    inset: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    opacity: 0;\r\n    transform: scale(1.05);\r\n    transition: transform 0.1s linear, opacity 0.8s ease;\r\n    will-change: transform;\r\n}\r\n\r\n.sa-portrait-frame.has-image .sa-portrait-img {\r\n    opacity: 1;\r\n}\r\n.sa-portrait-frame.has-image .sa-portrait-placeholder {\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.sa-portrait-placeholder {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 20px;\r\n    background: linear-gradient(135deg, #f3ede2 0%, #e2d7c5 100%);\r\n    transition: opacity 0.6s ease;\r\n    z-index: 2;\r\n    text-align: center;\r\n}\r\n.sa-ph-inner {\r\n    border: 1px solid rgba(197, 155, 98, 0.35);\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 15px;\r\n    border-radius: 4px;\r\n    position: relative;\r\n}\r\n.sa-ph-inner::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 4px;\r\n    border: 1px dashed rgba(197, 155, 98, 0.18);\r\n}\r\n.sa-ph-badge {\r\n    width: 58px;\r\n    height: 58px;\r\n    border-radius: 50%;\r\n    border: 1px solid var(--c-gold-dk);\r\n    background: rgba(255, 255, 255, 0.5);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: var(--f-serif);\r\n    font-size: 1.5rem;\r\n    color: var(--c-gold-accent);\r\n    margin-bottom: 12px;\r\n    font-style: italic;\r\n    box-shadow: 0 6px 12px rgba(197, 155, 98, 0.08);\r\n}\r\n.sa-ph-name {\r\n    font-family: var(--f-serif);\r\n    font-size: 1.15rem;\r\n    color: var(--c-dark-text);\r\n    letter-spacing: 1px;\r\n    margin-bottom: 4px;\r\n}\r\n.sa-ph-tagline {\r\n    font-family: var(--f-sans);\r\n    font-size: 0.65rem;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    color: var(--c-gold-accent);\r\n    font-weight: 600;\r\n}\r\n\r\n\/* \u2500\u2500 RIGHT: Editorial Bio Card \u2500\u2500\u2500 *\/\r\n.sa-bio-col {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.sa-bio-card {\r\n    background: rgba(255, 255, 255, 0.42);\r\n    border: 1px solid rgba(197, 155, 98, 0.15);\r\n    backdrop-filter: blur(12px);\r\n    -webkit-backdrop-filter: blur(12px);\r\n    padding: 42px 48px;\r\n    border-radius: 12px;\r\n    box-shadow: \r\n        0 20px 50px rgba(197, 155, 98, 0.04),\r\n        inset 0 0 30px rgba(255, 255, 255, 0.75);\r\n    transition: all 0.6s var(--ease-out);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n.sa-bio-card::before {\r\n    content: '\u2725';\r\n    position: absolute;\r\n    top: 25px;\r\n    right: 28px;\r\n    font-size: 1rem;\r\n    color: rgba(197, 155, 98, 0.28);\r\n}\r\n.sa-bio-card:hover {\r\n    border-color: rgba(197, 155, 98, 0.28);\r\n    box-shadow: \r\n        0 30px 70px rgba(197, 155, 98, 0.08),\r\n        inset 0 0 40px rgba(255, 255, 255, 0.85);\r\n}\r\n\r\n.sa-label {\r\n    font-size: 0.7rem;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n    letter-spacing: 4px;\r\n    color: var(--c-gold-accent);\r\n    margin-bottom: 10px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    font-family: var(--f-sans) !important;\r\n}\r\n.sa-label::before {\r\n    content: '';\r\n    width: 25px;\r\n    height: 1px;\r\n    background: var(--c-gold-accent);\r\n    flex-shrink: 0;\r\n}\r\n\r\n.sa-title {\r\n    font-family: var(--f-serif) !important;\r\n    font-size: clamp(1.8rem, 3.2vw, 2.6rem);\r\n    font-weight: 300;\r\n    line-height: 1.15;\r\n    color: var(--c-dark-text);\r\n    margin-bottom: 18px;\r\n}\r\n.sa-bold {\r\n    font-weight: 700;\r\n}\r\n.sa-gold-italic {\r\n    font-style: italic;\r\n    background: linear-gradient(135deg, var(--c-gold-accent) 0%, var(--c-gold-dk) 100%);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.sa-rule {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n    margin-bottom: 28px;\r\n    width: 100%;\r\n    max-width: 400px;\r\n}\r\n.sa-rule-line {\r\n    height: 1px;\r\n    flex: 1;\r\n    background: linear-gradient(to right, transparent, var(--c-gold-accent), transparent);\r\n    transition: width 1.8s var(--ease-out);\r\n    width: 0%;\r\n}\r\n.sa-rule-sym {\r\n    font-size: 0.7rem;\r\n    color: var(--c-gold-accent);\r\n    opacity: 0.8;\r\n    letter-spacing: 4px;\r\n}\r\n\r\n.sa-inner-content {\r\n    display: grid;\r\n    grid-template-columns: 1.15fr 0.85fr;\r\n    gap: 40px;\r\n    align-items: start;\r\n}\r\n\r\n.sa-body-text {\r\n    font-family: var(--f-sans) !important;\r\n    font-size: 0.92rem;\r\n    line-height: 1.85;\r\n    color: var(--c-muted-text);\r\n}\r\n\r\n.sa-body-text::first-letter {\r\n    font-family: var(--f-serif);\r\n    font-size: 3.1rem;\r\n    float: left;\r\n    line-height: 0.85;\r\n    padding-right: 12px;\r\n    padding-top: 2px;\r\n    color: var(--c-gold-accent);\r\n    font-weight: 700;\r\n}\r\n\r\n.sa-quote-side {\r\n    font-family: var(--f-serif) !important;\r\n    font-size: clamp(1.05rem, 1.35vw, 1.25rem);\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    line-height: 1.6;\r\n    color: #3b4252;\r\n    border-left: 2px solid var(--c-gold-dk);\r\n    padding-left: 18px;\r\n    margin-bottom: 24px;\r\n}\r\n.sa-quote-side span {\r\n    display: block;\r\n    margin-top: 6px;\r\n    font-family: var(--f-sans) !important;\r\n    font-size: 0.65rem;\r\n    text-transform: uppercase;\r\n    font-style: normal;\r\n    letter-spacing: 2px;\r\n    color: var(--c-gold-accent);\r\n    font-weight: 700;\r\n}\r\n\r\n.sa-signature-block {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n    opacity: 0.9;\r\n}\r\n.sa-sig-svg {\r\n    width: 100px;\r\n    height: 40px;\r\n    fill: none;\r\n    stroke: var(--c-gold-accent);\r\n    stroke-width: 2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n.sa-sig-text {\r\n    font-family: var(--f-serif) !important;\r\n    font-size: 1rem;\r\n    font-style: italic;\r\n    color: var(--c-gold-accent);\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n\/* \u2500\u2500 Entrance Animation Utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.sa-fade-up {\r\n    opacity: 0;\r\n    transform: translateY(18px);\r\n    transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);\r\n    will-change: opacity, transform;\r\n}\r\n.sa-delay-1 { transition-delay: 0.15s; }\r\n.sa-delay-2 { transition-delay: 0.3s; }\r\n.sa-delay-3 { transition-delay: 0.45s; }\r\n.sa-delay-4 { transition-delay: 0.6s; }\r\n\r\n.sonia-about-section.sa-revealed .sa-fade-up {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n.sonia-about-section.sa-revealed .sa-rule-line {\r\n    width: 100%;\r\n}\r\n\r\n\/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@media (max-width: 1024px) {\r\n    .sa-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 55px;\r\n        justify-items: center;\r\n    }\r\n    .sa-vertical-text {\r\n        display: none;\r\n    }\r\n    .sa-portrait-backdrop {\r\n        display: none;\r\n    }\r\n    .sa-bio-card {\r\n        padding: 40px 30px;\r\n    }\r\n    .sa-bio-col {\r\n        align-items: center;\r\n        text-align: center;\r\n    }\r\n    .sa-rule {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n    .sa-inner-content {\r\n        grid-template-columns: 1fr;\r\n        gap: 30px;\r\n    }\r\n    .sa-quote-side {\r\n        border-left: none;\r\n        border-top: 1px solid var(--c-gold-dk);\r\n        border-bottom: 1px solid var(--c-gold-dk);\r\n        padding: 16px 0;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        max-width: 500px;\r\n    }\r\n    .sa-body-text::first-letter {\r\n        float: none;\r\n        font-size: inherit;\r\n        line-height: inherit;\r\n        padding-right: 0;\r\n        padding-top: 0;\r\n        color: inherit;\r\n        font-weight: inherit;\r\n        font-family: inherit;\r\n    }\r\n    .sa-label::before {\r\n        display: none;\r\n    }\r\n    .sa-signature-block {\r\n        justify-content: center;\r\n    }\r\n}\r\n\r\n@media (max-width: 580px) {\r\n    .sonia-about-section {\r\n        padding: 70px 5% 90px;\r\n    }\r\n    .sa-frame-wrapper {\r\n        padding: 10px;\r\n        max-width: 310px; \/* \u2190 Increased from 270px to 310px on mobile too *\/\r\n    }\r\n    .sa-bio-card {\r\n        padding: 30px 20px;\r\n    }\r\n    .sa-grass-svg {\r\n        height: 130px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<section class=\"sonia-about-section\" id=\"sonia-about\">\r\n    \r\n    <div class=\"sa-bg-wrapper\">\r\n        <canvas class=\"sa-particles-canvas\"><\/canvas>\r\n        \r\n        <svg class=\"sa-path-svg\" viewBox=\"0 0 1200 900\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <defs>\r\n                <linearGradient id=\"sa-path-grad\" x1=\"100%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\r\n                    <stop offset=\"0%\" stop-color=\"#b88b4a\" stop-opacity=\"0.35\" \/>\r\n                    <stop offset=\"50%\" stop-color=\"#e5b982\" stop-opacity=\"0.2\" \/>\r\n                    <stop offset=\"100%\" stop-color=\"#ebd0b9\" stop-opacity=\"0.05\" \/>\r\n                <\/linearGradient>\r\n            <\/defs>\r\n            <path class=\"sa-journey-path\" d=\"M 1150,80 C 1000,50 820,280 620,420 C 420,560 300,380 50,850\" stroke=\"url(#sa-path-grad)\" \/>\r\n        <\/svg>\r\n        \r\n        <svg class=\"sa-grass-svg\" viewBox=\"0 0 1440 280\" fill=\"none\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <path d=\"M0,280 L1440,280 L1440,242 C1400,247 1300,252 1200,242 C1100,232 1000,257 900,247 C800,237 700,252 600,242 C500,232 400,252 300,247 C200,242 100,252 0,242 Z\" fill=\"rgba(197, 155, 98, 0.035)\" \/>\r\n            <path d=\"M40,280 C50,220 70,160 110,100 C112,95 106,105 92,160 C80,210 65,250 55,280\" fill=\"rgba(197, 155, 98, 0.05)\" stroke=\"rgba(197, 155, 98, 0.1)\" stroke-width=\"1\" \/>\r\n            <path d=\"M120,280 C135,200 170,120 220,60 C223,55 216,65 198,130 C182,190 155,245 140,280\" fill=\"rgba(197, 155, 98, 0.05)\" stroke=\"rgba(197, 155, 98, 0.1)\" stroke-width=\"1.2\" \/>\r\n            <path d=\"M280,280 C265,210 230,140 170,90 C167,85 174,95 198,150 C220,200 245,250 260,280\" fill=\"rgba(197, 155, 98, 0.04)\" stroke=\"rgba(197, 155, 98, 0.08)\" stroke-width=\"1\" \/>\r\n            <path d=\"M350,280 C370,210 400,140 450,80 C453,75 446,85 428,150 C412,205 385,250 370,280\" fill=\"rgba(197, 155, 98, 0.05)\" stroke=\"rgba(197, 155, 98, 0.1)\" stroke-width=\"1.2\" \/>\r\n            <path d=\"M520,280 C540,180 590,90 650,30 C653,25 645,38 615,110 C588,175 550,240 535,280\" fill=\"rgba(197, 155, 98, 0.06)\" stroke=\"rgba(197, 155, 98, 0.12)\" stroke-width=\"1.5\" \/>\r\n            <path d=\"M680,280 C670,220 650,160 610,100 C608,95 614,105 628,160 C640,210 655,250 665,280\" fill=\"rgba(197, 155, 98, 0.04)\" stroke=\"rgba(197, 155, 98, 0.08)\" stroke-width=\"1\" \/>\r\n            <path d=\"M780,280 C800,200 835,130 890,70 C893,65 886,75 868,140 C852,195 825,245 810,280\" fill=\"rgba(197, 155, 98, 0.05)\" stroke=\"rgba(197, 155, 98, 0.1)\" stroke-width=\"1.2\" \/>\r\n            <path d=\"M920,280 C950,210 990,150 1050,100 C1053,95 1046,105 1020,165 C995,215 965,255 945,280\" fill=\"rgba(197, 155, 98, 0.05)\" stroke=\"rgba(197, 155, 98, 0.1)\" stroke-width=\"1\" \/>\r\n            <path d=\"M1100,280 C1120,190 1160,110 1220,50 C1223,45 1215,58 1185,125 C1158,185 1125,240 1115,280\" fill=\"rgba(197, 155, 98, 0.06)\" stroke=\"rgba(197, 155, 98, 0.12)\" stroke-width=\"1.5\" \/>\r\n            <path d=\"M1280,280 C1270,225 1250,170 1210,110 C1208,105 1214,115 1228,165 C1240,215 1255,255 1265,280\" fill=\"rgba(197, 155, 98, 0.04)\" stroke=\"rgba(197, 155, 98, 0.08)\" stroke-width=\"1\" \/>\r\n            <path d=\"M1360,280 C1380,210 1410,150 1460,90 C1463,85 1456,95 1438,155 C1422,210 1395,250 1380,280\" fill=\"rgba(197, 155, 98, 0.05)\" stroke=\"rgba(197, 155, 98, 0.1)\" stroke-width=\"1.2\" \/>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <div class=\"sa-container\">\r\n\r\n        <div class=\"sa-portrait-col\">\r\n            <span class=\"sa-vertical-text\">Running A Different Race \u2022 The Author Story<\/span>\r\n            \r\n            <div class=\"sa-frame-wrapper\">\r\n                <div class=\"sa-corner sa-c-tl\"><\/div>\r\n                <div class=\"sa-corner sa-c-tr\"><\/div>\r\n                <div class=\"sa-corner sa-c-bl\"><\/div>\r\n                <div class=\"sa-corner sa-c-br\"><\/div>\r\n\r\n                <div class=\"sa-portrait-container sa-portrait-frame has-image\" id=\"soniaPortraitBox\">\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sonia\/wp-content\/uploads\/2026\/06\/author_converted.png\" alt=\"Sonia Henry Portrait\" class=\"sa-portrait-img\" id=\"soniaPortraitImg\">\r\n                    \r\n                    <div class=\"sa-portrait-placeholder\">\r\n                        <div class=\"sa-ph-inner\">\r\n                            <div class=\"sa-ph-badge\">SH<\/div>\r\n                            <h3 class=\"sa-ph-name\">Sonia Henry<\/h3>\r\n                            <span class=\"sa-ph-tagline\">Author &amp; Speaker<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"sa-portrait-backdrop\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"sa-bio-col\">\r\n            <div class=\"sa-bio-card sa-fade-up sa-delay-1\">\r\n                \r\n                <span class=\"sa-label sa-fade-up sa-delay-1\">The Voice Behind The Journey<\/span>\r\n                \r\n                <h2 class=\"sa-title sa-fade-up sa-delay-2\">\r\n                    Meet <span class=\"sa-bold\">Sonia<\/span> <span class=\"sa-gold-italic\">Henry<\/span>\r\n                <\/h2>\r\n\r\n                <div class=\"sa-rule sa-fade-up sa-delay-2\">\r\n                    <div class=\"sa-rule-line\"><\/div>\r\n                    <span class=\"sa-rule-sym\">\u2726<\/span>\r\n                    <div class=\"sa-rule-line\"><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"sa-inner-content sa-fade-up sa-delay-3\">\r\n                    \r\n                    <div class=\"sa-body-text\">\r\n                        <p>\r\n                            Sonia Henry is an inspirational speaker, associate pastor, and the visionary founder of <strong>More to Pour Women's Ministry<\/strong>. A Carleton University graduate, her calling began with a seed planted during a divine encounter at age five, later solidified by a profound prophetic vision of a dove descending with a scroll commanding: <em>\"Teach them what I have taught you.\"<\/em> For over forty years, Sonia has pastored, planted churches, and mentored young adults in the Ottawa region alongside her husband, Reverend Elvis Henry. Having overcome trials including raising a son with auditory processing disorder she writes to encourage women that their race is far from finished.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <blockquote class=\"sa-quote-side\">\r\n                            \"Your race is not over it is, in fact, just beginning. In a world urging us to run faster, God invites us to run deeper.\"\r\n                            <span>\u2014 Sonia Henry, Author<\/span>\r\n                        <\/blockquote>\r\n\r\n                        <div class=\"sa-signature-block\">\r\n                           \r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n    function init() {\r\n        var section = document.getElementById('sonia-about');\r\n        if (!section || section.dataset.si === '1') return;\r\n        section.dataset.si = '1';\r\n\r\n        var img = section.querySelector('#soniaPortraitImg');\r\n        var box = section.querySelector('#soniaPortraitBox');\r\n        \r\n        var realImageSrc = 'https:\/\/demowebdesign.live\/sonia\/wp-content\/uploads\/2026\/06\/author_converted.png'; \r\n\r\n        if (realImageSrc && realImageSrc !== '') {\r\n            img.src = realImageSrc;\r\n            img.onload = function() {\r\n                box.classList.add('has-image');\r\n            };\r\n        } else {\r\n            box.classList.remove('has-image');\r\n        }\r\n\r\n        var canvas = section.querySelector('.sa-particles-canvas');\r\n        if (canvas) {\r\n            var ctx = canvas.getContext('2d');\r\n            var particles = [];\r\n            var maxParticles = 30;\r\n            var w, h;\r\n            var isVisible = false;\r\n\r\n            function resizeCanvas() {\r\n                w = canvas.width = section.offsetWidth;\r\n                h = canvas.height = section.offsetHeight;\r\n            }\r\n            resizeCanvas();\r\n            window.addEventListener('resize', resizeCanvas, { passive: true });\r\n\r\n            var Particle = function () {\r\n                this.reset();\r\n                this.y = Math.random() * h;\r\n            };\r\n\r\n            Particle.prototype.reset = function () {\r\n                this.x = Math.random() * w;\r\n                this.y = h + Math.random() * 20;\r\n                this.size = Math.random() * 2.8 + 1.2;\r\n                this.speed = Math.random() * 0.35 + 0.12;\r\n                this.opacity = Math.random() * 0.28 + 0.06;\r\n                this.angle = Math.random() * Math.PI * 2;\r\n                this.sway = Math.random() * 0.25 + 0.08;\r\n            };\r\n\r\n            Particle.prototype.update = function () {\r\n                this.y -= this.speed;\r\n                this.angle += 0.008;\r\n                this.x += Math.sin(this.angle) * this.sway;\r\n                if (this.y < -10 || this.x < -10 || this.x > w + 10) {\r\n                    this.reset();\r\n                }\r\n            };\r\n\r\n            Particle.prototype.draw = function () {\r\n                ctx.beginPath();\r\n                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n                ctx.fillStyle = 'rgba(197, 155, 98, ' + this.opacity + ')';\r\n                ctx.shadowBlur = 4;\r\n                ctx.shadowColor = 'rgba(229, 185, 130, 0.25)';\r\n                ctx.fill();\r\n            };\r\n\r\n            for (var i = 0; i < maxParticles; i++) {\r\n                particles.push(new Particle());\r\n            }\r\n\r\n            function animateParticles() {\r\n                if (!isVisible) return;\r\n                ctx.clearRect(0, 0, w, h);\r\n                ctx.shadowBlur = 0;\r\n                for (var i = 0; i < particles.length; i++) {\r\n                    var p = particles[i];\r\n                    p.update();\r\n                    p.draw();\r\n                }\r\n                requestAnimationFrame(animateParticles);\r\n            }\r\n        }\r\n\r\n        var path = section.querySelector('.sa-journey-path');\r\n        var portraitImg = section.querySelector('.sa-portrait-img');\r\n        var pathLength = 0;\r\n\r\n        if (path) {\r\n            pathLength = path.getTotalLength();\r\n            path.style.strokeDasharray = pathLength + ' ' + pathLength;\r\n            path.style.strokeDashoffset = pathLength;\r\n        }\r\n\r\n        var revealObserver = new IntersectionObserver(function (entries) {\r\n            entries.forEach(function (entry) {\r\n                if (entry.isIntersecting) {\r\n                    section.classList.add('sa-revealed');\r\n                    if (canvas) {\r\n                        isVisible = true;\r\n                        animateParticles();\r\n                    }\r\n                } else {\r\n                    if (canvas) {\r\n                        isVisible = false;\r\n                    }\r\n                }\r\n            });\r\n        }, { threshold: 0.12 });\r\n        revealObserver.observe(section);\r\n\r\n        function onScrollEffects() {\r\n            var rect = section.getBoundingClientRect();\r\n            var winH = window.innerHeight;\r\n\r\n            if (rect.bottom < 0 || rect.top > winH) return;\r\n\r\n            var totalDist = winH + rect.height;\r\n            var currentDist = winH - rect.top;\r\n            var progress = Math.min(Math.max(currentDist \/ totalDist, 0), 1);\r\n\r\n            if (portraitImg) {\r\n                var zoomScale = 1.02 + (progress * 0.14);\r\n                portraitImg.style.transform = 'scale(' + zoomScale.toFixed(3) + ')';\r\n            }\r\n\r\n            if (path && pathLength > 0) {\r\n                var eased = 1 - Math.pow(1 - progress, 2.5);\r\n                path.style.strokeDashoffset = pathLength * (1 - eased);\r\n            }\r\n        }\r\n\r\n        window.addEventListener('scroll', function () {\r\n            requestAnimationFrame(onScrollEffects);\r\n        }, { passive: true });\r\n\r\n        setTimeout(onScrollEffects, 100);\r\n    }\r\n\r\n    document.readyState === 'loading'\r\n        ? document.addEventListener('DOMContentLoaded', init)\r\n        : init();\r\n    window.addEventListener('elementor\/frontend\/init', init);\r\n    setTimeout(init, 500);\r\n    setTimeout(init, 1500);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a3009a7 e-con-full e-flex e-con e-parent\" data-id=\"a3009a7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ee7227 elementor-widget elementor-widget-html\" data-id=\"2ee7227\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* Scoped CSS for Elementor Widget to prevent conflicts *\/\r\n.sonia-custom-widget {\r\n    font-family: 'Inter', sans-serif;\r\n    color: #333;\r\n    overflow-x: hidden;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.sonia-custom-widget * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* Premium Typography *\/\r\n.sonia-custom-widget h1, \r\n.sonia-custom-widget h2, \r\n.sonia-custom-widget h3, \r\n.sonia-custom-widget .sh-quote-text {\r\n    font-family: 'Playfair Display', serif;\r\n    margin: 0;\r\n}\r\n\r\n\/* --- Section 1: Signature Quote Banner --- *\/\r\n.sh-quote-banner {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100vh;\r\n    min-height: 700px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    background: url('https:\/\/demowebdesign.live\/sonia\/wp-content\/uploads\/2026\/06\/777.jpg') no-repeat center center\/cover;\r\n    background-attachment: fixed; \/* Parallax effect *\/\r\n    color: #fff;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* Elegant dark gradient overlay *\/\r\n.sh-quote-banner::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background: linear-gradient(135deg, rgba(15,15,15,0.9) 0%, rgba(20,20,20,0.4) 50%, rgba(15,15,15,0.8) 100%);\r\n    z-index: 1;\r\n}\r\n\r\n\/* Premium Gold Glow *\/\r\n.sh-gold-glow {\r\n    position: absolute;\r\n    width: 1000px;\r\n    height: 1000px;\r\n    background: radial-gradient(circle, rgba(197, 160, 89, 0.15) 0%, rgba(197, 160, 89, 0) 65%);\r\n    border-radius: 50%;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    z-index: 1;\r\n    animation: shPulseGlow 8s infinite alternate ease-in-out;\r\n    pointer-events: none;\r\n    mix-blend-mode: screen;\r\n}\r\n\r\n\/* Subtle Fog *\/\r\n.sh-fog-container {\r\n    position: absolute;\r\n    width: 200%;\r\n    height: 100%;\r\n    top: 0;\r\n    left: -50%;\r\n    z-index: 1;\r\n    background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 70%);\r\n    opacity: 0.6;\r\n    animation: shMoveFog 25s linear infinite alternate;\r\n    pointer-events: none;\r\n}\r\n\r\n@keyframes shMoveFog {\r\n    0% { transform: translateX(-5%); }\r\n    100% { transform: translateX(5%); }\r\n}\r\n\r\n@keyframes shPulseGlow {\r\n    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }\r\n    100% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }\r\n}\r\n\r\n.sh-quote-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    max-width: 1100px;\r\n    padding: 0 40px;\r\n}\r\n\r\n.sh-quote-text {\r\n    font-size: clamp(2.5rem, 5vw, 4rem);\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    line-height: 1.3;\r\n    margin-bottom: 45px;\r\n    color: #fdfbf7;\r\n    text-shadow: 0 10px 30px rgba(0,0,0,0.8);\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n}\r\n\r\n.sh-quote-text.visible {\r\n    animation: shFadeUp 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;\r\n}\r\n\r\n.sh-quote-author {\r\n    font-size: 1.1rem;\r\n    font-weight: 500;\r\n    letter-spacing: 4px;\r\n    text-transform: uppercase;\r\n    color: #c5a059; \/* Refined Gold *\/\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n}\r\n\r\n.sh-quote-author.visible {\r\n    animation: shFadeUp 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.6s;\r\n}\r\n\r\n.sh-quote-author-line {\r\n    display: inline-block;\r\n    width: 40px;\r\n    height: 1px;\r\n    background-color: #c5a059;\r\n    vertical-align: middle;\r\n    margin-right: 15px;\r\n}\r\n\r\n@keyframes shFadeUp {\r\n    to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* --- Section 2: My Journey Section --- *\/\r\n.sh-journey-section {\r\n    background-color: #fcfbf9; \/* Sophisticated light cream *\/\r\n    padding: 140px 5%;\r\n    display: flex;\r\n    justify-content: center;\r\n    position: relative;\r\n}\r\n\r\n.sh-journey-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 1px;\r\n    background: linear-gradient(to right, transparent, rgba(197, 160, 89, 0.3), transparent);\r\n}\r\n        \r\n.sh-journey-container {\r\n    max-width: 1350px;\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: 5fr 7fr;\r\n    gap: 100px;\r\n    align-items: flex-start;\r\n}\r\n\r\n.sh-journey-image-wrapper {\r\n    position: sticky;\r\n    top: 120px;\r\n}\r\n\r\n.sh-journey-image {\r\n    border-radius: 2px;\r\n    overflow: hidden;\r\n    box-shadow: 0 30px 60px rgba(0,0,0,0.08);\r\n    transform: translateY(60px);\r\n    opacity: 0;\r\n    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n    position: relative;\r\n}\r\n\r\n.sh-journey-image::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    border: 1px solid rgba(255,255,255,0.2);\r\n    pointer-events: none;\r\n    z-index: 2;\r\n}\r\n        \r\n.sh-journey-image.visible {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n.sh-journey-image img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);\r\n    transform-origin: center center;\r\n}\r\n\r\n.sh-journey-image:hover img {\r\n    transform: scale(1.06);\r\n}\r\n\r\n.sh-journey-content {\r\n    padding-top: 15px;\r\n}\r\n\r\n.sh-journey-heading {\r\n    font-size: clamp(3rem, 4vw, 4.2rem);\r\n    color: #1a1a1a;\r\n    margin-bottom: 40px;\r\n    position: relative;\r\n    padding-bottom: 30px;\r\n    font-weight: 400;\r\n}\r\n\r\n.sh-journey-heading::after {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 60px;\r\n    height: 1px;\r\n    background-color: #c5a059;\r\n    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n        \r\n.sh-journey-heading:hover::after {\r\n    width: 140px;\r\n}\r\n\r\n.sh-journey-description {\r\n    font-size: 1.15rem;\r\n    line-height: 1.9;\r\n    color: #5a5a5a;\r\n    margin-bottom: 70px;\r\n    font-weight: 300;\r\n}\r\n\r\n.sh-journey-description p {\r\n    margin-bottom: 25px;\r\n}\r\n\r\n\/* Premium Timeline *\/\r\n.sh-timeline {\r\n    position: relative;\r\n    padding-left: 60px;\r\n}\r\n\r\n.sh-timeline-line-bg {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 12px;\r\n    width: 1px;\r\n    height: calc(100% - 24px);\r\n    background-color: #e6e2d8;\r\n    z-index: 0;\r\n}\r\n\r\n.sh-timeline-line {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 12px;\r\n    width: 1px;\r\n    height: 0; \/* Animated height *\/\r\n    background-color: #c5a059;\r\n    transition: height 0.15s ease-out;\r\n    z-index: 1;\r\n    box-shadow: 0 0 10px rgba(197, 160, 89, 0.4);\r\n}\r\n\r\n.sh-timeline-item {\r\n    position: relative;\r\n    margin-bottom: 60px;\r\n    opacity: 0;\r\n    transform: translateX(30px);\r\n    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n    z-index: 2;\r\n}\r\n\r\n.sh-timeline-item.visible {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n}\r\n\r\n.sh-timeline-item:last-child {\r\n    margin-bottom: 0;\r\n}\r\n\r\n.sh-timeline-dot {\r\n    position: absolute;\r\n    left: -66.5px;\r\n    top: 5px;\r\n    width: 14px;\r\n    height: 14px;\r\n    border-radius: 50%;\r\n    background-color: #fcfbf9;\r\n    border: 1px solid #c5a059;\r\n    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.sh-timeline-dot::after {\r\n    content: '';\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: transparent;\r\n    border-radius: 50%;\r\n    transition: all 0.4s ease;\r\n}\r\n        \r\n.sh-timeline-dot.active {\r\n    background-color: #fff;\r\n    border-color: #c5a059;\r\n    box-shadow: 0 0 20px rgba(197, 160, 89, 0.6);\r\n    transform: scale(1.1);\r\n}\r\n\r\n.sh-timeline-dot.active::after {\r\n    background-color: #c5a059;\r\n}\r\n\r\n.sh-timeline-item:hover .sh-timeline-dot {\r\n    transform: scale(1.3);\r\n    border-color: #c5a059;\r\n}\r\n\r\n.sh-timeline-title {\r\n    font-size: 1.6rem;\r\n    color: #111;\r\n    margin-bottom: 15px;\r\n    font-family: 'Playfair Display', serif;\r\n    font-weight: 500;\r\n    transition: color 0.4s ease;\r\n}\r\n        \r\n.sh-timeline-item:hover .sh-timeline-title {\r\n    color: #c5a059;\r\n}\r\n\r\n.sh-timeline-text {\r\n    font-size: 1.1rem;\r\n    color: #666;\r\n    line-height: 1.7;\r\n    font-weight: 300;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 1024px) {\r\n    .sh-journey-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 60px;\r\n    }\r\n    .sh-journey-image-wrapper {\r\n        position: relative;\r\n        top: 0;\r\n        max-width: 700px;\r\n        margin: 0 auto;\r\n    }\r\n}\r\n        \r\n@media (max-width: 768px) {\r\n    .sh-journey-section {\r\n        padding: 90px 5%;\r\n    }\r\n    .sh-quote-content {\r\n        padding: 0 20px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"sonia-custom-widget\">\r\n    <!-- Section 1: Signature Quote Banner -->\r\n    <section class=\"sh-quote-banner\">\r\n        <div class=\"sh-fog-container\"><\/div>\r\n        <div class=\"sh-gold-glow\"><\/div>\r\n        <div class=\"sh-quote-content\">\r\n            <h2 class=\"sh-quote-text\">\"God never asks us to run someone else's race. He invites us to faithfully run our own.\"<\/h2>\r\n            <p class=\"sh-quote-author\"><span class=\"sh-quote-author-line\"><\/span>Sonia Henry<\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Section 2: My Journey Section -->\r\n    <section class=\"sh-journey-section\">\r\n        <div class=\"sh-journey-container\">\r\n            <div class=\"sh-journey-image-wrapper\">\r\n                <div class=\"sh-journey-image\">\r\n                    <!-- Added aspect ratio wrapper to ensure it looks premium -->\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sonia\/wp-content\/uploads\/2026\/06\/2151951176.jpg\" alt=\"Sonia Henry Journey\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"sh-journey-content\">\r\n                <h2 class=\"sh-journey-heading\">The Journey So Far<\/h2>\r\n                <div class=\"sh-journey-description\">\r\n                    <p>What began as a simple desire to serve God grew into a lifelong calling. Over the years, Sonia has served in pastoral leadership, women's ministry, mentorship, and speaking engagements throughout Canada and beyond.<\/p>\r\n                    <p>Through seasons of joy, challenge, growth, and spiritual transformation, she has witnessed God's faithfulness firsthand. These experiences now shape the messages she shares with audiences around the world.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"sh-timeline\" id=\"sh-timeline\">\r\n                    <div class=\"sh-timeline-line-bg\"><\/div>\r\n                    <div class=\"sh-timeline-line\" id=\"sh-timeline-line\"><\/div>\r\n                    \r\n                    <div class=\"sh-timeline-item\">\r\n                        <div class=\"sh-timeline-dot\"><\/div>\r\n                        <h3 class=\"sh-timeline-title\">Early Calling<\/h3>\r\n                        <p class=\"sh-timeline-text\">A deep passion for ministry and serving others.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"sh-timeline-item\">\r\n                        <div class=\"sh-timeline-dot\"><\/div>\r\n                        <h3 class=\"sh-timeline-title\">Leadership & Ministry<\/h3>\r\n                        <p class=\"sh-timeline-text\">Years of pastoral service and mentoring women.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"sh-timeline-item\">\r\n                        <div class=\"sh-timeline-dot\"><\/div>\r\n                        <h3 class=\"sh-timeline-title\">More To Pour Ministry<\/h3>\r\n                        <p class=\"sh-timeline-text\">Launching a ministry devoted to empowering women in faith.<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"sh-timeline-item\">\r\n                        <div class=\"sh-timeline-dot\"><\/div>\r\n                        <h3 class=\"sh-timeline-title\">Author Journey<\/h3>\r\n                        <p class=\"sh-timeline-text\">Writing books that inspire spiritual growth and perseverance.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ Self-executing function to prevent global scope pollution in Elementor\r\n    (function() {\r\n        \/\/ Wait for DOM or Elementor to initialize\r\n        function initSoniaSections() {\r\n            const widget = document.querySelector('.sonia-custom-widget');\r\n            if (!widget) return;\r\n\r\n            \/\/ 1. Intersection Observer for fade-in animations\r\n            const observerOptions = {\r\n                root: null,\r\n                rootMargin: '0px',\r\n                threshold: 0.15\r\n            };\r\n\r\n            const observer = new IntersectionObserver((entries, obs) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        entry.target.classList.add('visible');\r\n                        \/\/ Optional: unobserve after animating\r\n                        obs.unobserve(entry.target);\r\n                    }\r\n                });\r\n            }, observerOptions);\r\n\r\n            \/\/ Observe Banner Elements\r\n            const quoteText = widget.querySelector('.sh-quote-text');\r\n            const quoteAuthor = widget.querySelector('.sh-quote-author');\r\n            if (quoteText) observer.observe(quoteText);\r\n            if (quoteAuthor) observer.observe(quoteAuthor);\r\n\r\n            \/\/ Observe Journey Image\r\n            const image = widget.querySelector('.sh-journey-image');\r\n            if (image) observer.observe(image);\r\n\r\n            \/\/ Observe Timeline Items with staggered delay\r\n            const timelineItems = widget.querySelectorAll('.sh-timeline-item');\r\n            timelineItems.forEach((item, index) => {\r\n                item.style.transitionDelay = `${index * 0.15}s`;\r\n                observer.observe(item);\r\n            });\r\n\r\n            \/\/ 2. Timeline Scroll Animation\r\n            const timeline = widget.querySelector('#sh-timeline');\r\n            const timelineLine = widget.querySelector('#sh-timeline-line');\r\n            \r\n            const updateTimeline = () => {\r\n                if (!timeline || !timelineLine) return;\r\n                \r\n                const rect = timeline.getBoundingClientRect();\r\n                const windowHeight = window.innerHeight;\r\n                \r\n                \/\/ Trigger animation when the timeline is 75% down the screen\r\n                const triggerPoint = windowHeight * 0.75; \r\n                \r\n                if (rect.top < triggerPoint) {\r\n                    const totalScrollDistance = rect.height;\r\n                    const amountScrolled = triggerPoint - rect.top;\r\n                    \r\n                    let percentage = amountScrolled \/ totalScrollDistance;\r\n                    percentage = Math.max(0, Math.min(1, percentage));\r\n                    \r\n                    timelineLine.style.height = `${percentage * 100}%`;\r\n                    \r\n                    \/\/ Activate dots\r\n                    timelineItems.forEach((item) => {\r\n                        const itemRect = item.getBoundingClientRect();\r\n                        const dot = item.querySelector('.sh-timeline-dot');\r\n                        \r\n                        \/\/ Check if line passed dot center\r\n                        const lineBottomY = rect.top + (percentage * rect.height);\r\n                        const dotCenterY = itemRect.top + 7; \r\n                        \r\n                        if (lineBottomY >= dotCenterY) {\r\n                            dot.classList.add('active');\r\n                        } else {\r\n                            dot.classList.remove('active');\r\n                        }\r\n                    });\r\n                } else {\r\n                    timelineLine.style.height = '0%';\r\n                    timelineItems.forEach(item => {\r\n                        item.querySelector('.sh-timeline-dot').classList.remove('active');\r\n                    });\r\n                }\r\n            };\r\n\r\n            \/\/ Optimize scroll listener with requestAnimationFrame\r\n            let ticking = false;\r\n            window.addEventListener('scroll', () => {\r\n                if (!ticking) {\r\n                    window.requestAnimationFrame(() => {\r\n                        updateTimeline();\r\n                        ticking = false;\r\n                    });\r\n                    ticking = true;\r\n                }\r\n            }, { passive: true });\r\n            \r\n            window.addEventListener('resize', updateTimeline, { passive: true });\r\n            \r\n            \/\/ Trigger immediately to calculate initial position\r\n            setTimeout(updateTimeline, 100);\r\n        }\r\n\r\n        \/\/ Run when DOM is ready\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', initSoniaSections);\r\n        } else {\r\n            initSoniaSections();\r\n        }\r\n        \r\n        \/\/ Elementor specific re-init if needed (for editor mode)\r\n        if (window.jQuery) {\r\n            jQuery(window).on('elementor\/frontend\/init', function() {\r\n                elementorFrontend.hooks.addAction('frontend\/element_ready\/html.default', initSoniaSections);\r\n            });\r\n        }\r\n    })();\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-5b76eb2 e-con-full e-flex e-con e-parent\" data-id=\"5b76eb2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55afa18 elementor-widget elementor-widget-html\" data-id=\"55afa18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* Scoped CSS for Elementor Widget *\/\r\n.sonia-ministry-widget {\r\n    font-family: 'Inter', sans-serif;\r\n    color: #333;\r\n    overflow-x: hidden;\r\n    -webkit-font-smoothing: antialiased;\r\n    -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n.sonia-ministry-widget * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* Premium Typography *\/\r\n.sonia-ministry-widget h1, \r\n.sonia-ministry-widget h2, \r\n.sonia-ministry-widget h3 {\r\n    font-family: 'Playfair Display', serif;\r\n    margin: 0;\r\n}\r\n\r\n\/* --- Section 1: Ministry & Mission (Premium Expanding Accordion) --- *\/\r\n.sh-mission-section {\r\n    position: relative;\r\n    padding: 140px 0 160px 0;\r\n    background: #080808;\r\n    color: #fff;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    background: #080808 url('https:\/\/demowebdesign.live\/sonia\/wp-content\/uploads\/2026\/06\/13710.jpg') no-repeat center center \/ cover;\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n.sh-mission-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: rgba(8, 8, 8, 0.35);\r\n    z-index: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Ambient Background Text to fill empty space *\/\r\n.sh-mission-huge-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: 22vw;\r\n    color: transparent;\r\n    -webkit-text-stroke: 1px rgba(197, 160, 89, 0.08);\r\n    z-index: 1;\r\n    pointer-events: none;\r\n    white-space: nowrap;\r\n    user-select: none;\r\n}\r\n\r\n\/* Animated Glows *\/\r\n.sh-mission-glow-1 {\r\n    position: absolute;\r\n    width: 80vw; height: 80vw;\r\n    border-radius: 50%;\r\n    filter: blur(150px);\r\n    z-index: 0;\r\n    pointer-events: none;\r\n    background: radial-gradient(circle, rgba(197, 160, 89, 0.08) 0%, transparent 60%);\r\n    top: -20%; left: -10%;\r\n    animation: shPulseBg 15s infinite alternate ease-in-out;\r\n}\r\n\r\n@keyframes shPulseBg {\r\n    0% { transform: scale(1); opacity: 0.5; }\r\n    100% { transform: scale(1.2); opacity: 1; }\r\n}\r\n\r\n.sh-mission-heading-wrap {\r\n    text-align: center;\r\n    margin-bottom: 70px;\r\n    padding: 0 5%;\r\n    z-index: 2;\r\n    position: relative;\r\n}\r\n\r\n.sh-mission-subtitle {\r\n    display: block;\r\n    color: #c5a059;\r\n    font-size: 1rem;\r\n    letter-spacing: 6px;\r\n    text-transform: uppercase;\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.sh-mission-heading {\r\n    font-size: clamp(3.5rem, 5vw, 5rem);\r\n    color: #fdfbf7;\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.sh-mission-heading i {\r\n    font-weight: 400;\r\n    color: #c5a059;\r\n}\r\n\r\n\/* Interactive Hover Accordion *\/\r\n.sh-accordion-container {\r\n    display: flex;\r\n    width: 95%;\r\n    max-width: 1500px;\r\n    height: 65vh;\r\n    min-height: 500px;\r\n    max-height: 700px;\r\n    gap: 20px;\r\n    margin: 0 auto;\r\n    z-index: 3;\r\n    position: relative;\r\n}\r\n\r\n.sh-accordion-panel {\r\n    position: relative;\r\n    flex: 1;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    transition: flex 0.8s cubic-bezier(0.19, 1, 0.22, 1);\r\n    cursor: pointer;\r\n    background-color: #111;\r\n}\r\n\r\n.sh-accordion-panel:hover {\r\n    flex: 3.5;\r\n}\r\n\r\n\/* Background Image Layer *\/\r\n.sh-panel-bg {\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    background-size: cover;\r\n    background-position: center;\r\n    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);\r\n    transform: scale(1.1);\r\n    filter: grayscale(100%);\r\n    opacity: 0.6;\r\n}\r\n\r\n\/* Faith \u2014 candle \/ warm light *\/\r\n.sh-accordion-panel:nth-child(1) .sh-panel-bg {\r\n    background-image: url('https:\/\/images.unsplash.com\/photo-1501621965065-c6e1cf6b53e2?w=1000&q=85');\r\n}\r\n\r\n\/* Encouragement \u2014 golden sunrise breaking through *\/\r\n.sh-accordion-panel:nth-child(2) .sh-panel-bg {\r\n    background-image: url('https:\/\/images.unsplash.com\/photo-1470252649378-9c29740c9fa8?w=1000&q=85');\r\n}\r\n\r\n\/* Purpose \u2014 open mountain path *\/\r\n.sh-accordion-panel:nth-child(3) .sh-panel-bg {\r\n    background-image: url('https:\/\/images.unsplash.com\/photo-1469474968028-56623f02e42e?w=1000&q=85');\r\n}\r\n\r\n.sh-accordion-panel:hover .sh-panel-bg {\r\n    filter: grayscale(0%);\r\n    opacity: 0.9;\r\n    transform: scale(1);\r\n}\r\n\r\n\/* Gradient Overlay *\/\r\n.sh-accordion-panel::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; width: 100%; height: 100%;\r\n    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);\r\n    pointer-events: none;\r\n    transition: opacity 0.8s ease;\r\n}\r\n\r\n\/* Large Numbers *\/\r\n.sh-panel-num {\r\n    position: absolute;\r\n    top: 35px;\r\n    right: 35px;\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 2.5rem;\r\n    color: rgba(255,255,255,0.4);\r\n    z-index: 2;\r\n    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);\r\n    line-height: 1;\r\n}\r\n\r\n.sh-accordion-panel:hover .sh-panel-num {\r\n    font-size: 6rem;\r\n    color: rgba(197, 160, 89, 0.3);\r\n    top: 20px;\r\n    right: 20px;\r\n}\r\n\r\n\/* Panel Content *\/\r\n.sh-panel-content {\r\n    position: absolute;\r\n    bottom: 40px;\r\n    left: 40px;\r\n    right: 40px;\r\n    z-index: 2;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n\/* Title setup for vertical text when collapsed *\/\r\n.sh-panel-title-wrapper {\r\n    position: relative;\r\n    height: 40px;\r\n    display: flex;\r\n    align-items: center;\r\n    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);\r\n}\r\n\r\n.sh-panel-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 2.2rem;\r\n    color: #fff;\r\n    margin: 0;\r\n    white-space: nowrap;\r\n    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);\r\n    transform-origin: left bottom;\r\n}\r\n\r\n.sh-accordion-panel:hover .sh-panel-title {\r\n    font-size: 3.5rem;\r\n    color: #c5a059;\r\n}\r\n\r\n.sh-panel-text {\r\n    font-family: 'Inter', sans-serif;\r\n    font-size: 1.2rem;\r\n    line-height: 1.8;\r\n    color: #e0e0e0;\r\n    margin: 0;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);\r\n    max-height: 0;\r\n    overflow: hidden;\r\n}\r\n\r\n.sh-accordion-panel:hover .sh-panel-text {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    max-height: 200px;\r\n    margin-top: 20px;\r\n    transition-delay: 0.2s;\r\n}\r\n\r\n\/* Reveal Arrow *\/\r\n.sh-panel-arrow {\r\n    margin-top: 25px;\r\n    width: 45px;\r\n    height: 45px;\r\n    border-radius: 50%;\r\n    background: rgba(255,255,255,0.1);\r\n    backdrop-filter: blur(5px);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    opacity: 0;\r\n    transform: translateX(-20px);\r\n    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);\r\n    border: 1px solid rgba(255,255,255,0.2);\r\n}\r\n\r\n.sh-accordion-panel:hover .sh-panel-arrow {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n    background: #c5a059;\r\n    border-color: #c5a059;\r\n    transition-delay: 0.3s;\r\n}\r\n\r\n\r\n\/* --- Section 2: About More To Pour --- *\/\r\n.sh-about-section {\r\n    background-color: #fcfbf9; \r\n    padding: 180px 5%;\r\n    display: flex;\r\n    justify-content: center;\r\n    position: relative;\r\n}\r\n\r\n.sh-about-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 40px; left: 40px; right: 40px; bottom: 40px;\r\n    border: 1px solid rgba(197, 160, 89, 0.15);\r\n    pointer-events: none;\r\n    z-index: 0;\r\n}\r\n\r\n.sh-about-container {\r\n    max-width: 1400px;\r\n    width: 100%;\r\n    display: grid;\r\n    grid-template-columns: 1.2fr 1fr;\r\n    gap: 0; \r\n    align-items: center;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.sh-about-images-wrapper {\r\n    position: relative;\r\n    padding-right: 80px; \r\n}\r\n\r\n.sh-about-img-main {\r\n    position: relative;\r\n    border-radius: 2px;\r\n    overflow: hidden;\r\n    box-shadow: 0 40px 80px rgba(0,0,0,0.1);\r\n    opacity: 0;\r\n    transform: scale(0.95);\r\n    transition: all 1.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n    z-index: 1;\r\n}\r\n\r\n.sh-about-img-main img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n.sh-about-img-frame {\r\n    position: absolute;\r\n    top: -20px;\r\n    left: -20px;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 1px solid #c5a059;\r\n    z-index: 0;\r\n    transition: all 1s ease;\r\n}\r\n\r\n.sh-about-img-accent {\r\n    position: absolute;\r\n    bottom: -60px;\r\n    right: 20px;\r\n    width: 45%;\r\n    border: 10px solid #fcfbf9;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.15);\r\n    z-index: 3;\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;\r\n}\r\n\r\n.sh-about-img-accent img {\r\n    width: 100%;\r\n    height: auto;\r\n    display: block;\r\n}\r\n\r\n.sh-about-images-wrapper:hover .sh-about-img-main img {\r\n    transform: scale(1.05);\r\n}\r\n\r\n.sh-about-images-wrapper:hover .sh-about-img-frame {\r\n    top: 20px;\r\n    left: 20px;\r\n}\r\n\r\n.sh-about-content {\r\n    background: #fff;\r\n    padding: 80px 60px;\r\n    box-shadow: -20px 30px 60px rgba(0,0,0,0.05);\r\n    position: relative;\r\n    z-index: 4;\r\n    margin-left: -100px; \r\n    opacity: 0;\r\n    transform: translateX(50px);\r\n    transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;\r\n}\r\n\r\n.sh-badge {\r\n    position: absolute;\r\n    top: -40px;\r\n    right: 40px;\r\n    width: 120px;\r\n    height: 120px;\r\n    background: url('data:image\/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path id=\"curve\" fill=\"transparent\" d=\"M 50,50 m -40,0 a 40,40 0 1,1 80,0 a 40,40 0 1,1 -80,0\"\/><text fill=\"%23c5a059\" font-size=\"12\" letter-spacing=\"4\" font-family=\"sans-serif\"><textPath href=\"%23curve\">MORE TO POUR WOMEN\\'S MINISTRY \u2022 <\/textPath><\/text><\/svg>') no-repeat center center;\r\n    animation: shRotate 20s linear infinite;\r\n    z-index: 5;\r\n}\r\n\r\n@keyframes shRotate {\r\n    100% { transform: rotate(360deg); }\r\n}\r\n\r\n.sh-about-heading {\r\n    font-size: clamp(3.2rem, 4vw, 4.5rem);\r\n    color: #1a1a1a;\r\n    margin-bottom: 40px;\r\n    line-height: 1.1;\r\n    position: relative;\r\n}\r\n\r\n.sh-about-heading i {\r\n    display: block;\r\n    font-style: italic;\r\n    color: #c5a059;\r\n    font-size: 0.8em;\r\n    margin-top: 10px;\r\n}\r\n\r\n.sh-about-description {\r\n    font-size: 1.15rem;\r\n    line-height: 1.9;\r\n    color: #5a5a5a;\r\n    margin-bottom: 50px;\r\n    font-weight: 300;\r\n}\r\n\r\n.sh-about-description p {\r\n    margin-bottom: 25px;\r\n}\r\n\r\n.sh-premium-btn {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    padding: 18px 45px;\r\n    background: transparent;\r\n    color: #1a1a1a;\r\n    text-decoration: none !important;\r\n    font-family: 'Inter', sans-serif;\r\n    font-size: 0.95rem;\r\n    font-weight: 600;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n    border: 1px solid #e0dcd3;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: all 0.5s ease;\r\n    z-index: 1;\r\n}\r\n\r\n.sh-premium-btn::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0; bottom: 0;\r\n    background: #c5a059;\r\n    transform: translateX(-101%);\r\n    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\r\n    z-index: -1;\r\n}\r\n\r\n.sh-btn-arrow {\r\n    margin-left: 15px;\r\n    transition: transform 0.4s ease;\r\n}\r\n\r\n.sh-premium-btn:hover {\r\n    color: #fff;\r\n    border-color: #c5a059;\r\n}\r\n\r\n.sh-premium-btn:hover::before {\r\n    transform: translateX(0);\r\n}\r\n\r\n.sh-premium-btn:hover .sh-btn-arrow {\r\n    transform: translateX(5px);\r\n}\r\n\r\n\/* Animation Classes applied via JS *\/\r\n.sh-anim-active {\r\n    opacity: 1 !important;\r\n    transform: translate(0, 0) scale(1) !important;\r\n}\r\n\r\n\/* =============================================\r\n   RESPONSIVE BREAKPOINTS\r\n   ============================================= *\/\r\n\r\n\/* Large Desktop \u2014 1400px and below *\/\r\n@media (max-width: 1400px) {\r\n    .sh-about-content {\r\n        margin-left: -80px;\r\n        padding: 70px 50px;\r\n    }\r\n}\r\n\r\n\/* Desktop \u2014 1200px and below *\/\r\n@media (max-width: 1200px) {\r\n    .sh-about-content {\r\n        margin-left: -50px;\r\n        padding: 60px 40px;\r\n    }\r\n\r\n    .sh-about-images-wrapper {\r\n        padding-right: 50px;\r\n    }\r\n\r\n    .sh-about-heading {\r\n        font-size: clamp(2.6rem, 3.5vw, 3.8rem);\r\n    }\r\n\r\n    .sh-panel-title {\r\n        font-size: 1.9rem;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-title {\r\n        font-size: 2.8rem;\r\n    }\r\n}\r\n\r\n\/* Tablet Landscape \u2014 1024px and below *\/\r\n@media (max-width: 1024px) {\r\n    .sh-mission-section {\r\n        padding: 100px 0 120px 0;\r\n    }\r\n\r\n    .sh-mission-heading-wrap {\r\n        margin-bottom: 50px;\r\n    }\r\n\r\n    .sh-mission-heading {\r\n        font-size: clamp(2.8rem, 5vw, 4rem);\r\n    }\r\n\r\n    .sh-accordion-container {\r\n        height: 60vh;\r\n        min-height: 450px;\r\n    }\r\n\r\n    .sh-panel-content {\r\n        bottom: 30px;\r\n        left: 25px;\r\n        right: 25px;\r\n    }\r\n\r\n    .sh-panel-title {\r\n        font-size: 1.6rem;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-title {\r\n        font-size: 2.4rem;\r\n    }\r\n\r\n    .sh-panel-text {\r\n        font-size: 1.05rem;\r\n    }\r\n\r\n    .sh-about-section {\r\n        padding: 120px 5%;\r\n    }\r\n\r\n    .sh-about-content {\r\n        margin-left: -30px;\r\n        padding: 50px 35px;\r\n    }\r\n\r\n    .sh-about-images-wrapper {\r\n        padding-right: 30px;\r\n    }\r\n\r\n    .sh-about-description {\r\n        font-size: 1.05rem;\r\n    }\r\n}\r\n\r\n\/* Tablet Portrait \u2014 992px and below *\/\r\n@media (max-width: 992px) {\r\n    \/* Accordion stacks vertically *\/\r\n    .sh-accordion-container {\r\n        flex-direction: column;\r\n        height: auto;\r\n        min-height: unset;\r\n        max-height: none;\r\n        gap: 12px;\r\n        width: 92%;\r\n    }\r\n\r\n    .sh-accordion-panel {\r\n        width: 100%;\r\n        min-height: 120px;\r\n        flex: 0 0 120px;\r\n        border-radius: 16px;\r\n    }\r\n\r\n    .sh-accordion-panel:hover {\r\n        flex: 0 0 360px;\r\n    }\r\n\r\n    .sh-panel-num {\r\n        font-size: 2rem;\r\n        top: 25px;\r\n        right: 25px;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-num {\r\n        font-size: 4rem;\r\n    }\r\n\r\n    .sh-panel-content {\r\n        bottom: 25px;\r\n        left: 25px;\r\n        right: 25px;\r\n    }\r\n\r\n    .sh-panel-title {\r\n        font-size: 1.8rem;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-title {\r\n        font-size: 2.6rem;\r\n    }\r\n\r\n    .sh-mission-huge-text {\r\n        font-size: 35vw;\r\n    }\r\n\r\n    \/* About section stacks *\/\r\n    .sh-about-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 80px;\r\n    }\r\n\r\n    .sh-about-images-wrapper {\r\n        padding-right: 0;\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .sh-about-content {\r\n        margin-left: 0;\r\n        margin-top: -60px;\r\n        padding: 60px 40px;\r\n    }\r\n\r\n    .sh-about-section {\r\n        padding: 100px 5%;\r\n    }\r\n\r\n    .sh-about-section::before {\r\n        top: 20px; left: 20px; right: 20px; bottom: 20px;\r\n    }\r\n}\r\n\r\n\/* Mobile Large \u2014 768px and below *\/\r\n@media (max-width: 768px) {\r\n    .sh-mission-section {\r\n        padding: 80px 0 100px 0;\r\n    }\r\n\r\n    .sh-mission-heading-wrap {\r\n        margin-bottom: 40px;\r\n        padding: 0 6%;\r\n    }\r\n\r\n    .sh-mission-subtitle {\r\n        font-size: 0.85rem;\r\n        letter-spacing: 4px;\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .sh-mission-heading {\r\n        font-size: clamp(2.4rem, 7vw, 3.2rem);\r\n    }\r\n\r\n    .sh-accordion-container {\r\n        width: 90%;\r\n        gap: 10px;\r\n    }\r\n\r\n    .sh-accordion-panel {\r\n        min-height: 100px;\r\n        flex: 0 0 100px;\r\n        border-radius: 14px;\r\n    }\r\n\r\n    .sh-accordion-panel:hover {\r\n        flex: 0 0 320px;\r\n    }\r\n\r\n    .sh-panel-num {\r\n        font-size: 1.8rem;\r\n        top: 20px;\r\n        right: 20px;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-num {\r\n        font-size: 3.5rem;\r\n    }\r\n\r\n    .sh-panel-content {\r\n        bottom: 20px;\r\n        left: 20px;\r\n        right: 20px;\r\n    }\r\n\r\n    .sh-panel-title {\r\n        font-size: 1.5rem;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-title {\r\n        font-size: 2.2rem;\r\n    }\r\n\r\n    .sh-panel-text {\r\n        font-size: 1rem;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    .sh-panel-arrow {\r\n        width: 38px;\r\n        height: 38px;\r\n        margin-top: 18px;\r\n    }\r\n\r\n    \/* About section *\/\r\n    .sh-about-section {\r\n        padding: 80px 5% 100px;\r\n    }\r\n\r\n    .sh-about-section::before {\r\n        display: none;\r\n    }\r\n\r\n    .sh-about-images-wrapper {\r\n        max-width: 100%;\r\n        padding-bottom: 70px;\r\n    }\r\n\r\n    .sh-about-img-accent {\r\n        bottom: -40px;\r\n        right: 10px;\r\n        border-width: 6px;\r\n    }\r\n\r\n    .sh-about-content {\r\n        margin-top: -40px;\r\n        padding: 50px 30px;\r\n    }\r\n\r\n    .sh-about-heading {\r\n        font-size: clamp(2.2rem, 6vw, 3rem);\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .sh-about-description {\r\n        font-size: 1rem;\r\n        margin-bottom: 35px;\r\n    }\r\n\r\n    .sh-badge {\r\n        width: 100px;\r\n        height: 100px;\r\n        top: -35px;\r\n        right: 25px;\r\n    }\r\n\r\n    .sh-premium-btn {\r\n        padding: 16px 35px;\r\n        font-size: 0.88rem;\r\n        letter-spacing: 2px;\r\n    }\r\n}\r\n\r\n\/* Mobile Small \u2014 480px and below *\/\r\n@media (max-width: 480px) {\r\n    .sh-mission-section {\r\n        padding: 60px 0 80px 0;\r\n    }\r\n\r\n    .sh-mission-heading {\r\n        font-size: clamp(2rem, 8vw, 2.6rem);\r\n    }\r\n\r\n    .sh-mission-subtitle {\r\n        font-size: 0.78rem;\r\n        letter-spacing: 3px;\r\n    }\r\n\r\n    .sh-accordion-container {\r\n        width: 92%;\r\n        gap: 8px;\r\n    }\r\n\r\n    .sh-accordion-panel {\r\n        min-height: 85px;\r\n        flex: 0 0 85px;\r\n        border-radius: 12px;\r\n    }\r\n\r\n    .sh-accordion-panel:hover {\r\n        flex: 0 0 280px;\r\n    }\r\n\r\n    .sh-panel-content {\r\n        bottom: 16px;\r\n        left: 16px;\r\n        right: 16px;\r\n    }\r\n\r\n    .sh-panel-title {\r\n        font-size: 1.3rem;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-title {\r\n        font-size: 1.8rem;\r\n    }\r\n\r\n    .sh-panel-text {\r\n        font-size: 0.95rem;\r\n    }\r\n\r\n    .sh-panel-num {\r\n        font-size: 1.5rem;\r\n        top: 15px;\r\n        right: 15px;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-num {\r\n        font-size: 2.8rem;\r\n    }\r\n\r\n    .sh-about-section {\r\n        padding: 60px 4% 80px;\r\n    }\r\n\r\n    .sh-about-content {\r\n        padding: 40px 22px;\r\n        margin-top: -30px;\r\n    }\r\n\r\n    .sh-about-heading {\r\n        font-size: clamp(2rem, 7.5vw, 2.6rem);\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    .sh-about-description {\r\n        font-size: 0.95rem;\r\n        line-height: 1.8;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .sh-about-description p {\r\n        margin-bottom: 18px;\r\n    }\r\n\r\n    .sh-badge {\r\n        width: 85px;\r\n        height: 85px;\r\n        top: -30px;\r\n        right: 18px;\r\n    }\r\n\r\n    .sh-premium-btn {\r\n        padding: 14px 28px;\r\n        font-size: 0.82rem;\r\n        letter-spacing: 1.5px;\r\n        width: 100%;\r\n        justify-content: center;\r\n    }\r\n\r\n    .sh-about-img-frame {\r\n        top: -12px;\r\n        left: -12px;\r\n    }\r\n\r\n    .sh-about-images-wrapper:hover .sh-about-img-frame {\r\n        top: 12px;\r\n        left: 12px;\r\n    }\r\n}\r\n\r\n\/* Extra Small \u2014 360px and below *\/\r\n@media (max-width: 360px) {\r\n    .sh-mission-heading {\r\n        font-size: 1.9rem;\r\n    }\r\n\r\n    .sh-accordion-panel:hover {\r\n        flex: 0 0 250px;\r\n    }\r\n\r\n    .sh-panel-title {\r\n        font-size: 1.15rem;\r\n    }\r\n\r\n    .sh-accordion-panel:hover .sh-panel-title {\r\n        font-size: 1.6rem;\r\n    }\r\n\r\n    .sh-about-content {\r\n        padding: 35px 18px;\r\n    }\r\n\r\n    .sh-about-heading {\r\n        font-size: 1.85rem;\r\n    }\r\n}\r\n<\/style>\r\n<div class=\"sonia-ministry-widget\">\r\n    <!-- Section 1: Ministry & Mission (Expanding Hover Accordion) -->\r\n    <section class=\"sh-mission-section\">\r\n        <div class=\"sh-mission-huge-text\">CALLING<\/div>\r\n        <div class=\"sh-mission-glow-1\"><\/div>\r\n        \r\n        <div class=\"sh-mission-heading-wrap\">\r\n            <span class=\"sh-mission-subtitle sh-anim-el\">Purpose & Vision<\/span>\r\n            <h2 class=\"sh-mission-heading sh-anim-el\">What Drives <br><i>My Ministry<\/i><\/h2>\r\n        <\/div>\r\n        \r\n        <!-- Premium Accordion Layout -->\r\n        <div class=\"sh-accordion-container\">\r\n            <!-- Panel 1 -->\r\n            <div class=\"sh-accordion-panel\">\r\n                <div class=\"sh-panel-bg\"><\/div>\r\n                <div class=\"sh-panel-num\">01<\/div>\r\n                <div class=\"sh-panel-content\">\r\n                    <div class=\"sh-panel-title-wrapper\">\r\n                        <h3 class=\"sh-panel-title\">Faith<\/h3>\r\n                    <\/div>\r\n                    <p class=\"sh-panel-text\">Helping women deepen their relationship with Christ through authentic encounters and unshakeable biblical truths.<\/p>\r\n                    <!--<div class=\"sh-panel-arrow\">-->\r\n                    <!--    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">-->\r\n                    <!--        <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>-->\r\n                    <!--    <\/svg>-->\r\n                    <!--<\/div>-->\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Panel 2 -->\r\n            <div class=\"sh-accordion-panel\">\r\n                <div class=\"sh-panel-bg\"><\/div>\r\n                <div class=\"sh-panel-num\">02<\/div>\r\n                <div class=\"sh-panel-content\">\r\n                    <div class=\"sh-panel-title-wrapper\">\r\n                        <h3 class=\"sh-panel-title\">Encouragement<\/h3>\r\n                    <\/div>\r\n                    <p class=\"sh-panel-text\">Providing a beacon of hope and strength during difficult seasons, reminding every woman that her race isn't over.<\/p>\r\n                    <!--<div class=\"sh-panel-arrow\">-->\r\n                    <!--    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">-->\r\n                    <!--        <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>-->\r\n                    <!--    <\/svg>-->\r\n                    <!--<\/div>-->\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Panel 3 -->\r\n            <div class=\"sh-accordion-panel\">\r\n                <div class=\"sh-panel-bg\"><\/div>\r\n                <div class=\"sh-panel-num\">03<\/div>\r\n                <div class=\"sh-panel-content\">\r\n                    <div class=\"sh-panel-title-wrapper\">\r\n                        <h3 class=\"sh-panel-title\">Purpose<\/h3>\r\n                    <\/div>\r\n                    <p class=\"sh-panel-text\">Equipping others to confidently step into and embrace God's unique calling for their lives with bold faith.<\/p>\r\n                    <!--<div class=\"sh-panel-arrow\">-->\r\n                    <!--    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">-->\r\n                    <!--        <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>-->\r\n                    <!--    <\/svg>-->\r\n                    <!--<\/div>-->\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Section 2: About More To Pour -->\r\n    <section class=\"sh-about-section\">\r\n        <div class=\"sh-about-container\">\r\n            <div class=\"sh-about-images-wrapper\">\r\n                <div class=\"sh-about-img-frame\"><\/div>\r\n                <div class=\"sh-about-img-main sh-anim-el\">\r\n                    <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/sonia\/wp-content\/uploads\/2026\/06\/2151780738.jpg\" alt=\"More To Pour Event\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"sh-about-content sh-anim-el\">\r\n                <div class=\"sh-badge\"><\/div>\r\n                <h2 class=\"sh-about-heading\">More To Pour <i>Women's Ministry<\/i><\/h2>\r\n                <div class=\"sh-about-description\">\r\n                    <p>Founded by Sonia Henry, More To Pour Women's Ministry exists to encourage, equip, and empower women to experience the fullness of God's purpose for their lives.<\/p>\r\n                    <p>Through conferences, retreats, mentoring, and prayer gatherings, women are invited into deeper spiritual growth, profound healing, and authentic community.<\/p>\r\n                <\/div>\r\n                <a href=\"https:\/\/demowebdesign.live\/sonia\/index.php\/contact\/\" class=\"sh-premium-btn\">\r\n                    Discover The Ministry \r\n                    <svg class=\"sh-btn-arrow\" width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <path d=\"M15 1L19 5M19 5L15 9M19 5L1 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        function initMinistrySections() {\r\n            const widget = document.querySelector('.sonia-ministry-widget');\r\n            if (!widget) return;\r\n\r\n            const observerOptions = {\r\n                root: null,\r\n                rootMargin: '0px',\r\n                threshold: 0.15\r\n            };\r\n\r\n            const observer = new IntersectionObserver((entries, obs) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        entry.target.classList.add('sh-anim-active');\r\n                        obs.unobserve(entry.target);\r\n                    }\r\n                });\r\n            }, observerOptions);\r\n\r\n            const animElements = widget.querySelectorAll('.sh-anim-el, .sh-mission-heading-wrap');\r\n            animElements.forEach(el => observer.observe(el));\r\n        }\r\n\r\n        if (document.readyState === 'loading') {\r\n            document.addEventListener('DOMContentLoaded', initMinistrySections);\r\n        } else {\r\n            initMinistrySections();\r\n        }\r\n        \r\n        if (window.jQuery) {\r\n            jQuery(window).on('elementor\/frontend\/init', function() {\r\n                elementorFrontend.hooks.addAction('frontend\/element_ready\/html.default', initMinistrySections);\r\n            });\r\n        }\r\n    })();\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-49a04fa e-con-full e-flex e-con e-parent\" data-id=\"49a04fa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce9b176 elementor-widget elementor-widget-html\" data-id=\"ce9b176\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<head>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\/* Global reset & variables *\/\r\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\r\n:root{\r\n  --gold:#B8964A;--gold-light:#D4AE6A;--gold-pale:#F0DFB8;--gold-xpale:#FBF5E6;\r\n  --cream:#FAF7F0;--cream-mid:#F3EDE0;--cream-deep:#E8DECA;\r\n  --dark:#1E1810;--dark-mid:#3D3020;--text:#3D3020;--text-muted:#7A6A50;\r\n  --white:#FFFFFF;\r\n  --font-serif:'Cormorant Garamond',Georgia,serif;\r\n  --font-sans:'Jost',sans-serif;\r\n  --shadow-sm:0 2px 16px rgba(44,36,22,.07);\r\n  --shadow-md:0 8px 40px rgba(44,36,22,.12);\r\n  --shadow-lg:0 24px 80px rgba(44,36,22,.18);\r\n}\r\nhtml{scroll-behavior:smooth}\r\nbody{font-family:var(--font-sans);color:var(--text);background:var(--cream);overflow-x:hidden}\r\n\r\n\/* Layout helpers used by the newsletter *\/\r\n.container{max-width:1200px;margin:0 auto;padding:0 2.5rem}\r\n.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}\r\n.reveal.visible{opacity:1;transform:none}\r\n.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.42s}.d5{transition-delay:.54s}\r\n\r\n\/* Newsletter specific styles *\/\r\n#newsletter{background:linear-gradient(155deg,#FAF6EE 0%,#F5E9CC 50%,#EDD9A4 100%);padding:8rem 0;position:relative;overflow:hidden;text-align:center}\r\n.nl-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(212,174,106,.14),transparent 65%);animation:glowP 7s ease-in-out infinite alternate;pointer-events:none}\r\n@keyframes glowP{from{transform:translate(-50%,-50%) scale(.85)}to{transform:translate(-50%,-50%) scale(1.15)}}\r\n.particle-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}\r\n.dot{position:absolute;border-radius:50%;background:var(--gold);animation:riseUp linear infinite}\r\n@keyframes riseUp{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.4}90%{opacity:.2}100%{transform:translateY(-5vh) scale(1.8);opacity:0}}\r\n.nl-inner{position:relative;z-index:1;max-width:620px;margin:0 auto}\r\n.nl-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1.1rem;background:rgba(184,150,74,.12);border:1px solid rgba(184,150,74,.3);border-radius:30px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1.4rem}\r\n.nl-title{font-family:var(--font-serif);font-size:clamp(2rem,5vw,3.2rem);font-weight:400;line-height:1.15;color:var(--dark);margin-bottom:1rem}\r\n.nl-title em{font-style:italic;color:var(--gold)}\r\n.nl-sub{color:#000 !important;font-size:1rem;line-height:1.75;font-weight:300;max-width:460px;margin:0 auto 2.8rem}\r\n.nl-form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}\r\n.nl-row{display:flex;gap:.8rem;width:100%;max-width:520px}\r\n.nl-input{flex:1;padding:1rem 1.3rem;border:1.5px solid rgba(184,150,74,.25);background:rgba(255,255,255,.65);border-radius:8px;font-family:var(--font-sans);font-size:.92rem;color:var(--dark);outline:none;transition:border-color .3s,box-shadow .3s,background .3s;backdrop-filter:blur(6px);}\r\n.nl-input::placeholder{color:var(--text-muted)}\r\n.nl-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,150,74,.14);background:rgba(255,255,255,.85)}\r\n.btn-subscribe{padding:1rem 2.2rem;border:none;border-radius:8px;cursor:pointer;font-family:var(--font-sans);font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--dark);white-space:nowrap;transition:transform .3s,box-shadow .3s;box-shadow:0 6px 24px rgba(184,150,74,.35);text-decoration:none !important;}\r\n.btn-subscribe:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(184,150,74,.5);color:#fff !important;}\r\n.nl-privacy{font-size:.74rem;color:var(--text-muted)}\r\n.nl-features{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:2.8rem}\r\n.nl-feat{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-muted)}\r\n.nl-feat svg{color:var(--gold)}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<section id=\"newsletter\" class=\"section\">\r\n  <div class=\"nl-glow\"><\/div>\r\n  <div class=\"particle-field\" id=\"particles\"><\/div>\r\n  <div class=\"container\">\r\n    <div class=\"nl-inner\">\r\n      <div class=\"nl-badge reveal\">\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\r\n        Join the Community\r\n      <\/div>\r\n      <h2 class=\"nl-title reveal d1\">Walk This Journey<br><em>Together<\/em><\/h2>\r\n      <p class=\"nl-sub reveal d2\">Receive encouragement, devotionals, event updates, and glimpses from Sonia's journey straight to your inbox, like a letter from a trusted friend.<\/p>\r\n      <div class=\"nl-form reveal d3\">\r\n        <a href=\"https:\/\/demowebdesign.live\/sonia\/index.php\/contact\/\" class=\"btn-subscribe\">Join the Journey &nbsp;\u2192<\/a>\r\n      <\/div>\r\n      <div class=\"nl-features reveal d4\">\r\n        <span class=\"nl-feat\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          Weekly encouragement\r\n        <\/span>\r\n        <span class=\"nl-feat\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          Event announcements\r\n        <\/span>\r\n        <span class=\"nl-feat\">\r\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n          Exclusive devotionals\r\n        <\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<script>\r\n\/\/ Reveal animation (same as original site)\r\nconst reveals=document.querySelectorAll('.reveal');\r\nconst io=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');io.unobserve(e.target)}})},{threshold:.1});\r\nreveals.forEach(el=>io.observe(el));\r\n\/\/ Particle background animation for the newsletter\r\nconst field=document.getElementById('particles');\r\nfor(let i=0;i<32;i++){\r\n  const p=document.createElement('div');p.className='dot';\r\n  const s=1.5+Math.random()*3;\r\n  p.style.cssText=`width:${s}px;height:${s}px;left:${Math.random()*100}%;bottom:-8px;animation-duration:${9+Math.random()*16}s;animation-delay:${Math.random()*14}s;opacity:${.1+Math.random()*.3}`;\r\n  field.appendChild(p);\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Author \u2022 Speaker \u2022 Mentor \u2022 Woman of Faith Meet Sonia Henry \u2726 \u2726 \u2726 &#8220;My mission is to inspire [&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-295","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/pages\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":70,"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/pages\/295\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/pages\/295\/revisions\/534"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/sonia\/index.php\/wp-json\/wp\/v2\/media?parent=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}