{"id":18,"date":"2026-03-13T07:28:51","date_gmt":"2026-03-13T07:28:51","guid":{"rendered":"https:\/\/demo6.yinwoodweb.com\/casasahan\/?page_id=18"},"modified":"2026-06-16T15:39:14","modified_gmt":"2026-06-16T15:39:14","slug":"about-us","status":"publish","type":"page","link":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/about-us\/","title":{"rendered":"About Us"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-ababbb11 alignfull uagb-is-root-container\">\n<!-- Google Fonts -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&amp;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&amp;family=Inter:wght@300;400;500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* \u2500\u2500\u2500 SCOPED RESET & BASE \u2500\u2500\u2500 *\/\n  \/* Target only this section to prevent breaking WordPress Themes *\/\n  .overview-section, \n  .overview-section *, \n  .overview-section *::before, \n  .overview-section *::after { \n    box-sizing: border-box; \n  }\n\n  .overview-section {\n    \/* Scoped CSS Variables *\/\n    --ov-purple-deep: #1e0a3c;\n    --ov-purple-mid:  #3b1278;\n    --ov-purple-glow: #6b35b8;\n    --ov-gold-bright: #f0c040;\n    --ov-gold-warm:   #d4982a;\n    --ov-gold-muted:  #9a6f2a;\n    --ov-cream:       #f9f2e3;\n    --ov-white:       #ffffff;\n    --ov-text-light:  rgba(255,255,255,0.85);\n    --ov-text-muted:  rgba(255,255,255,0.55);\n\n    position: relative;\n    width: 100%;\n    padding: 100px 0 120px;\n    background: linear-gradient(160deg, #1a0533 0%, #2d0f5a 40%, #1a0533 100%);\n    overflow: hidden; \/* Also hides horizontal scrollbars safely *\/\n    color: var(--ov-white);\n    font-family: 'Inter', sans-serif;\n  }\n\n  \/* Scoped margin resets to replace the * selector *\/\n  .overview-section h2, \n  .overview-section h3, \n  .overview-section p {\n    margin: 0;\n    padding: 0;\n  }\n\n  \/* \u2500\u2500\u2500 STAINED GLASS SVG BACKGROUND \u2500\u2500\u2500 *\/\n  \/* Ambient light orbs *\/\n  .overview-section::before {\n    content: '';\n    position: absolute;\n    top: -100px; left: 50%;\n    transform: translateX(-50%);\n    width: 900px; height: 600px;\n    background: radial-gradient(ellipse at center, rgba(240,192,64,0.12) 0%, transparent 70%);\n    pointer-events: none;\n    animation: ovAmbientPulse 6s ease-in-out infinite;\n  }\n\n  @keyframes ovAmbientPulse {\n    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }\n    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }\n  }\n\n  \/* \u2500\u2500\u2500 MOSAIC PARTICLE CANVAS \u2500\u2500\u2500 *\/\n  #mosaicCanvas {\n    position: absolute;\n    inset: 0;\n    width: 100%; height: 100%;\n    pointer-events: none;\n    opacity: 0.35;\n  }\n\n  \/* \u2500\u2500\u2500 VERTICAL GOLD BORDERS \u2500\u2500\u2500 *\/\n  .ov-border-left, .ov-border-right {\n    position: absolute;\n    top: 0; bottom: 0;\n    width: 6px;\n    background: linear-gradient(180deg, transparent, var(--ov-gold-bright), var(--ov-gold-warm), transparent);\n    animation: ovBorderShimmer 4s ease-in-out infinite alternate;\n  }\n  .ov-border-left  { left: 0; }\n  .ov-border-right { right: 0; animation-delay: 2s; }\n\n  @keyframes ovBorderShimmer {\n    from { opacity: 0.4; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 FLOATING CROSS MOTIFS \u2500\u2500\u2500 *\/\n  .cross-float {\n    position: absolute;\n    opacity: 0;\n    animation: ovFloatUp 12s ease-in-out infinite;\n    pointer-events: none;\n    font-size: 14px;\n    color: var(--ov-gold-bright);\n    filter: blur(0.5px);\n  }\n  @keyframes ovFloatUp {\n    0%   { opacity: 0; transform: translateY(60px) rotate(0deg); }\n    15%  { opacity: 0.5; }\n    80%  { opacity: 0.2; }\n    100% { opacity: 0; transform: translateY(-80px) rotate(20deg); }\n  }\n\n  \/* \u2500\u2500\u2500 ROSE WINDOW SVG \u2500\u2500\u2500 *\/\n  .ov-rose-wrapper {\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 700px; height: 700px;\n    opacity: 0.07;\n    animation: ovRoseRotate 60s linear infinite;\n    pointer-events: none;\n  }\n  @keyframes ovRoseRotate {\n    from { transform: translate(-50%, -50%) rotate(0deg); }\n    to   { transform: translate(-50%, -50%) rotate(360deg); }\n  }\n\n  \/* \u2500\u2500\u2500 CONTAINER \u2500\u2500\u2500 *\/\n  .overview-container {\n    position: relative;\n    z-index: 10;\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 0 32px;\n  }\n\n  \/* \u2500\u2500\u2500 SECTION EYEBROW \u2500\u2500\u2500 *\/\n  .ov-eyebrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    margin-bottom: 28px;\n    opacity: 0;\n    animation: ovFadeInDown 0.9s ease forwards 0.2s;\n  }\n  .ov-eyebrow-line {\n    width: 60px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--ov-gold-bright));\n  }\n  .ov-eyebrow-line.right {\n    background: linear-gradient(90deg, var(--ov-gold-bright), transparent);\n  }\n  .ov-eyebrow-text {\n    font-family: 'Inter', sans-serif;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.35em;\n    text-transform: uppercase;\n    color: var(--ov-gold-bright);\n  }\n\n  \/* \u2500\u2500\u2500 HEADLINE \u2500\u2500\u2500 *\/\n  .overview-headline {\n    text-align: center;\n    margin-bottom: 16px;\n    opacity: 0;\n    animation: ovFadeInDown 1s ease forwards 0.4s;\n  }\n  .overview-headline .line1 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 900;\n    color: var(--ov-white);\n    line-height: 1.1;\n    letter-spacing: -0.01em;\n  }\n  .overview-headline .line2 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 700;\n    font-style: italic;\n    color: var(--ov-gold-bright);\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n  }\n\n  \/* \u2500\u2500\u2500 LEAD TEXT \u2500\u2500\u2500 *\/\n  .overview-lead {\n    text-align: center;\n    max-width: 660px;\n    margin: 0 auto 64px !important;\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.05rem, 1.8vw, 1.25rem);\n    font-weight: 300;\n    color: var(--ov-text-light);\n    line-height: 1.8;\n    letter-spacing: 0.01em;\n    opacity: 0;\n    animation: ovFadeInDown 1s ease forwards 0.6s;\n  }\n\n  \/* \u2500\u2500\u2500 DIVIDER ORNAMENT \u2500\u2500\u2500 *\/\n  .ov-ornament {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    margin-bottom: 72px;\n    opacity: 0;\n    animation: ovFadeIn 1s ease forwards 0.8s;\n  }\n  .ov-ornament span {\n    font-size: 18px;\n    color: var(--ov-gold-bright);\n    line-height: 1;\n  }\n  .ov-ornament-line {\n    width: 80px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--ov-gold-muted));\n  }\n  .ov-ornament-line.r {\n    background: linear-gradient(90deg, var(--ov-gold-muted), transparent);\n  }\n\n  \/* \u2500\u2500\u2500 CARDS GRID \u2500\u2500\u2500 *\/\n  .ov-cards-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 24px;\n    margin-bottom: 72px;\n  }\n\n  .ov-card {\n    position: relative;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(240,192,64,0.18);\n    border-radius: 2px;\n    padding: 40px 30px 36px;\n    text-align: center;\n    overflow: hidden;\n    cursor: default;\n    opacity: 0;\n    transform: translateY(30px);\n    transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.4s ease, background 0.4s ease;\n  }\n  .ov-card.visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  .ov-card:hover {\n    background: rgba(240,192,64,0.07);\n    border-color: rgba(240,192,64,0.55);\n    box-shadow: 0 0 40px rgba(240,192,64,0.15), inset 0 0 30px rgba(240,192,64,0.04);\n    transform: translateY(-6px);\n  }\n\n  .ov-card::before {\n    content: '';\n    position: absolute;\n    top: 0; left: -100%;\n    width: 60%; height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(240,192,64,0.08), transparent);\n    transition: left 0.6s ease;\n  }\n  .ov-card:hover::before { left: 160%; }\n\n  .ov-card::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 20%; right: 20%;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--ov-gold-bright), transparent);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n  }\n  .ov-card:hover::after { opacity: 1; }\n\n  .ov-card-icon {\n    font-size: 2.4rem;\n    margin-bottom: 18px;\n    display: block;\n    filter: drop-shadow(0 0 10px rgba(240,192,64,0.5));\n    animation: ovIconGlow 3s ease-in-out infinite alternate;\n  }\n  @keyframes ovIconGlow {\n    from { filter: drop-shadow(0 0 6px rgba(240,192,64,0.3)); }\n    to   { filter: drop-shadow(0 0 16px rgba(240,192,64,0.8)); }\n  }\n\n  .ov-card-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.15rem;\n    font-weight: 700;\n    color: var(--ov-gold-bright);\n    margin-bottom: 14px;\n    letter-spacing: 0.03em;\n  }\n  .ov-card-text {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--ov-text-light);\n    line-height: 1.75;\n  }\n\n  \/* \u2500\u2500\u2500 STATS BAND \u2500\u2500\u2500 *\/\n  .ov-stats-band {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 0;\n    border: 1px solid rgba(240,192,64,0.2);\n    margin-bottom: 72px;\n    opacity: 0;\n    animation: ovFadeIn 1s ease forwards 1.4s;\n  }\n  .ov-stat-item {\n    padding: 36px 20px;\n    text-align: center;\n    position: relative;\n    transition: background 0.3s ease;\n  }\n  .ov-stat-item:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 20%; right: 0;\n    height: 60%; width: 1px;\n    background: rgba(240,192,64,0.2);\n  }\n  .ov-stat-item:hover { background: rgba(240,192,64,0.06); }\n\n  .ov-stat-num {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2rem, 3.5vw, 2.8rem);\n    font-weight: 900;\n    color: var(--ov-gold-bright);\n    line-height: 1;\n    margin-bottom: 8px;\n  }\n  .ov-stat-label {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.7rem;\n    font-weight: 400;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: var(--ov-text-muted);\n  }\n\n  \/* \u2500\u2500\u2500 SCRIPTURE QUOTE \u2500\u2500\u2500 *\/\n  .ov-scripture-block {\n    position: relative;\n    text-align: center;\n    padding: 56px 60px;\n    border: 1px solid rgba(240,192,64,0.15);\n    background: rgba(240,192,64,0.03);\n    margin-bottom: 72px;\n    opacity: 0;\n    animation: ovFadeIn 1s ease forwards 1.6s;\n    overflow: hidden;\n  }\n  .ov-scripture-block::before,\n  .ov-scripture-block::after {\n    content: '';\n    position: absolute;\n    width: 60px; height: 60px;\n    border-color: var(--ov-gold-bright);\n    border-style: solid;\n    opacity: 0.4;\n  }\n  .ov-scripture-block::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; }\n  .ov-scripture-block::after  { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }\n\n  .ov-quote-mark {\n    font-family: 'Playfair Display', serif;\n    font-size: 7rem;\n    color: var(--ov-gold-bright);\n    line-height: 0;\n    vertical-align: -0.5em;\n    opacity: 0.2;\n    display: block;\n    margin-bottom: -10px;\n  }\n  .ov-scripture-text {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n    font-style: italic;\n    font-weight: 300;\n    color: var(--ov-cream);\n    line-height: 1.7;\n    margin-bottom: 20px !important;\n  }\n  .ov-scripture-ref {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--ov-gold-muted);\n  }\n\n  \/* \u2500\u2500\u2500 CTA ROW \u2500\u2500\u2500 *\/\n  .ov-cta-row {\n    display: flex;\n    gap: 20px;\n    justify-content: center;\n    flex-wrap: wrap;\n    opacity: 0;\n    animation: ovFadeInUp 1s ease forwards 1.8s;\n  }\n\n  \n\n  \/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\n  @keyframes ovFadeInDown {\n    from { opacity: 0; transform: translateY(-24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes ovFadeInUp {\n    from { opacity: 0; transform: translateY(24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes ovFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 LIGHT RAYS \u2500\u2500\u2500 *\/\n  .ov-rays-wrapper {\n    position: absolute;\n    top: 0; left: 50%;\n    transform: translateX(-50%);\n    width: 100%; height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n  .ov-ray {\n    position: absolute;\n    top: -40px;\n    width: 2px;\n    height: 120%;\n    transform-origin: top center;\n    background: linear-gradient(180deg, rgba(240,192,64,0.22), transparent);\n    animation: ovRayPulse 5s ease-in-out infinite;\n  }\n  @keyframes ovRayPulse {\n    0%, 100% { opacity: 0.3; }\n    50%      { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n  @media (max-width: 900px) {\n    .ov-cards-grid { grid-template-columns: 1fr 1fr; }\n    .ov-stats-band { grid-template-columns: repeat(2, 1fr); }\n    .ov-stat-item:nth-child(2)::after { display: none; }\n  }\n  @media (max-width: 600px) {\n    .ov-cards-grid { grid-template-columns: 1fr; }\n    .ov-scripture-block { padding: 40px 24px; }\n    .ov-rose-wrapper { width: 340px; height: 340px; }\n  }\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--          OVERVIEW SECTION              -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"overview-section\" id=\"overview\">\n\n  <!-- Animated canvas mosaic -->\n  <canvas id=\"mosaicCanvas\" aria-hidden=\"true\"><\/canvas>\n\n  <!-- Light rays -->\n  <div class=\"ov-rays-wrapper\" id=\"raysWrapper\" aria-hidden=\"true\"><\/div>\n\n  <!-- Rose window -->\n  <div class=\"ov-rose-wrapper\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n      <circle cx=\"200\" cy=\"200\" r=\"190\" stroke=\"#f0c040\" stroke-width=\"1.5\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"150\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"100\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"55\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <!-- 12 petals -->\n      <g stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\"><\/line>\n        <line x1=\"10\" y1=\"200\" x2=\"390\" y2=\"200\"><\/line>\n        <line x1=\"54\" y1=\"54\" x2=\"346\" y2=\"346\"><\/line>\n        <line x1=\"346\" y1=\"54\" x2=\"54\" y2=\"346\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(30 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(60 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(90 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(120 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(150 200 200)\"><\/line>\n      <\/g>\n      <!-- Petals ellipses -->\n      <g fill=\"rgba(240,192,64,0.06)\" stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(0 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(30 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(60 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(90 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(120 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(150 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(180 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(210 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(240 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(270 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(300 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(330 200 200)\"><\/ellipse>\n      <\/g>\n    <\/svg>\n  <\/div>\n\n  <!-- Gold borders -->\n  <div class=\"ov-border-left\" aria-hidden=\"true\"><\/div>\n  <div class=\"ov-border-right\" aria-hidden=\"true\"><\/div>\n\n  <!-- Floating crosses -->\n  <div id=\"crossContainer\" aria-hidden=\"true\"><\/div>\n\n  <!-- \u2500\u2500\u2500 CONTENT \u2500\u2500\u2500 -->\n  <div class=\"overview-container\">\n\n    <!-- Eyebrow -->\n    <div class=\"ov-eyebrow\">\n      <span class=\"ov-eyebrow-line\"><\/span>\n      <span class=\"ov-eyebrow-text\">Who We Are<\/span>\n      <span class=\"ov-eyebrow-line right\"><\/span>\n    <\/div>\n\n    <!-- Headline -->\n    <h2 class=\"overview-headline\">\n      <span class=\"line1\">Overview of the<\/span>\n      <span class=\"line2\">STA Barbara Mission Center<\/span>\n    <\/h2>\n\n    <!-- Lead -->\n    <p class=\"overview-lead\">\n      Nestled in the heart of Brgy. Casasahan, Gumaca, Quezon, the STA Barbara Mission Center\n      stands as a living witness to God&#8217;s enduring love \u2014 a place where faith is kindled,\n      community is built, and every soul is welcomed home.\n    <\/p>\n\n    <!-- Ornament -->\n    <div class=\"ov-ornament\" aria-hidden=\"true\">\n      <span class=\"ov-ornament-line\"><\/span>\n      <span>\u2726<\/span>\n      <span>\u271d<\/span>\n      <span>\u2726<\/span>\n      <span class=\"ov-ornament-line r\"><\/span>\n    <\/div>\n\n    <!-- Cards -->\n    <div class=\"ov-cards-grid\" id=\"cardsGrid\">\n\n      <article class=\"ov-card\">\n        <span class=\"ov-card-icon\" aria-hidden=\"true\">\u26ea<\/span>\n        <h3 class=\"ov-card-title\">Our Mission<\/h3>\n        <p class=\"ov-card-text\">\n          Rooted in the Gospel, we exist to proclaim the Good News, celebrate the sacraments,\n          and draw all peoples into a living relationship with Jesus Christ.\n        <\/p>\n      <\/article>\n\n      <article class=\"ov-card\">\n        <span class=\"ov-card-icon\" aria-hidden=\"true\">\ud83d\udd4a\ufe0f<\/span>\n        <h3 class=\"ov-card-title\">Our Vision<\/h3>\n        <p class=\"ov-card-text\">\n          A Christ-centered community where every family encounters God&#8217;s mercy, grows in\n          holiness, and goes forth to serve with love and compassion.\n        <\/p>\n      <\/article>\n\n      <article class=\"ov-card\">\n        <span class=\"ov-card-icon\" aria-hidden=\"true\">\ud83d\ude4f<\/span>\n        <h3 class=\"ov-card-title\">Our Values<\/h3>\n        <p class=\"ov-card-text\">\n          Faith, humility, and service form the bedrock of our community \u2014 a covenant of care\n          lived out in worship, outreach, and fraternal charity.\n        <\/p>\n      <\/article>\n\n      <article class=\"ov-card\">\n        <span class=\"ov-card-icon\" aria-hidden=\"true\">\u2728<\/span>\n        <h3 class=\"ov-card-title\">Worship &amp; Prayer<\/h3>\n        <p class=\"ov-card-text\">\n          From the Holy Mass to novenas and adoration, our liturgical life is the beating heart\n          that sustains every ministry and pastoral endeavor.\n        <\/p>\n      <\/article>\n\n      <article class=\"ov-card\">\n        <span class=\"ov-card-icon\" aria-hidden=\"true\">\ud83e\udd1d<\/span>\n        <h3 class=\"ov-card-title\">Community Service<\/h3>\n        <p class=\"ov-card-text\">\n          We answer the call to serve the poor and marginalized through outreach programs,\n          feeding missions, and parish-based social action initiatives.\n        <\/p>\n      <\/article>\n\n      <article class=\"ov-card\">\n        <span class=\"ov-card-icon\" aria-hidden=\"true\">\ud83d\udcd6<\/span>\n        <h3 class=\"ov-card-title\">Faith Formation<\/h3>\n        <p class=\"ov-card-text\">\n          Catechesis, Bible study, and youth programs nurture disciples of all ages \u2014\n          forming hearts and minds in the truth and beauty of the Catholic faith.\n        <\/p>\n      <\/article>\n\n    <\/div><!-- \/cards -->\n\n    <!-- Stats -->\n    <div class=\"ov-stats-band\">\n      <div class=\"ov-stat-item\">\n        <span class=\"ov-stat-num\" data-target=\"500\">0<\/span>\n        <span class=\"ov-stat-label\">Registered Families<\/span>\n      <\/div>\n      <div class=\"ov-stat-item\">\n        <span class=\"ov-stat-num\" data-target=\"12\">0<\/span>\n        <span class=\"ov-stat-label\">Active Ministries<\/span>\n      <\/div>\n      <div class=\"ov-stat-item\">\n        <span class=\"ov-stat-num\" data-target=\"5\">0<\/span>\n        <span class=\"ov-stat-label\">Weekly Masses<\/span>\n      <\/div>\n      <div class=\"ov-stat-item\">\n        <span class=\"ov-stat-num\" data-target=\"20\">0<\/span>\n        <span class=\"ov-stat-label\">Years of Service<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Scripture -->\n    <blockquote class=\"ov-scripture-block\">\n      <span class=\"ov-quote-mark\" aria-hidden=\"true\">&#8220;<\/span>\n      <p class=\"ov-scripture-text\">\n        For where two or three gather in my name,<br>there am I with them.\n      <\/p>\n      <footer class=\"ov-scripture-ref\">\u2014 Matthew 18:20<\/footer>\n    <\/blockquote>\n\n    <!-- CTAs -->\n   \n\n  <\/div><!-- \/container -->\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--            SCRIPTS                    -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n\/* \u2500\u2500 1. MOSAIC CANVAS ANIMATION \u2500\u2500 *\/\n(function() {\n  const canvas = document.getElementById('mosaicCanvas');\n  if(!canvas) return;\n  const ctx    = canvas.getContext('2d');\n  let   W, H, tiles = [];\n\n  const COLORS = [\n    'rgba(107,53,184,',   \/\/ purple\n    'rgba(59,18,120,',    \/\/ deep purple\n    'rgba(240,192,64,',   \/\/ gold\n    'rgba(212,152,42,',   \/\/ warm gold\n    'rgba(154,111,42,',   \/\/ muted gold\n    'rgba(180,80,200,',   \/\/ violet\n    'rgba(30,10,60,',     \/\/ near-black\n  ];\n\n  function Tile(x, y, size) {\n    this.x     = x;\n    this.y     = y;\n    this.size  = size;\n    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];\n    this.alpha = Math.random() * 0.6 + 0.1;\n    this.speed = Math.random() * 0.005 + 0.001;\n    this.phase = Math.random() * Math.PI * 2;\n  }\n\n  Tile.prototype.update = function(t) {\n    this.alpha = 0.05 + 0.45 * (0.5 + 0.5 * Math.sin(t * this.speed + this.phase));\n  };\n\n  Tile.prototype.draw = function() {\n    ctx.fillStyle = this.color + this.alpha + ')';\n    ctx.fillRect(this.x + 1, this.y + 1, this.size - 2, this.size - 2);\n  };\n\n  function resize() {\n    W = canvas.width  = canvas.offsetWidth;\n    H = canvas.height = canvas.offsetHeight;\n    tiles = [];\n    const S = 48;\n    for (let x = 0; x < W; x += S) {\n      for (let y = 0; y < H; y += S) {\n        tiles.push(new Tile(x, y, S));\n      }\n    }\n  }\n\n  let t = 0;\n  function loop() {\n    ctx.clearRect(0, 0, W, H);\n    t += 1;\n    tiles.forEach(tile => { tile.update(t); tile.draw(); });\n    requestAnimationFrame(loop);\n  }\n\n  resize();\n  window.addEventListener('resize', resize);\n  loop();\n})();\n\n\/* \u2500\u2500 2. LIGHT RAYS \u2500\u2500 *\/\n(function() {\n  const wrap = document.getElementById('raysWrapper');\n  if(!wrap) return;\n  const count = 14;\n  for (let i = 0; i < count; i++) {\n    const ray = document.createElement('div');\n    ray.className = 'ov-ray';\n    const angle = -40 + (80 \/ count) * i;\n    const left  = 30 + (40 \/ count) * i;\n    ray.style.cssText = `\n      left: ${left}%;\n      transform: rotate(${angle}deg);\n      animation-delay: ${(i * 0.35).toFixed(2)}s;\n      animation-duration: ${(4 + Math.random() * 3).toFixed(1)}s;\n      opacity: ${0.15 + Math.random() * 0.2};\n    `;\n    wrap.appendChild(ray);\n  }\n})();\n\n\/* \u2500\u2500 3. FLOATING CROSS PARTICLES \u2500\u2500 *\/\n(function() {\n  const container = document.getElementById('crossContainer');\n  if(!container) return;\n  const symbols   = ['\u271d', '\u2726', '\u2727', '\u25c6', '\u2720'];\n\n  function spawn() {\n    const el = document.createElement('div');\n    el.className   = 'cross-float';\n    el.textContent = symbols[Math.floor(Math.random() * symbols.length)];\n    el.style.cssText = `\n      left: ${Math.random() * 95}%;\n      bottom: -30px;\n      font-size: ${8 + Math.random() * 12}px;\n      animation-duration: ${10 + Math.random() * 8}s;\n      animation-delay: ${Math.random() * 4}s;\n    `;\n    container.appendChild(el);\n    setTimeout(() => el.remove(), 18000);\n  }\n\n  for (let i = 0; i < 12; i++) {\n    setTimeout(spawn, i * 400);\n  }\n  setInterval(spawn, 1800);\n})();\n\n\/* \u2500\u2500 4. SCROLL-REVEAL CARDS \u2500\u2500 *\/\n(function() {\n  const cards = document.querySelectorAll('.ov-card');\n  if(!cards.length) return;\n  const io = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        const idx = [...cards].indexOf(entry.target);\n        setTimeout(() => {\n          entry.target.classList.add('visible');\n        }, idx * 120);\n        io.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.15 });\n\n  cards.forEach(c => io.observe(c));\n})();\n\n\/* \u2500\u2500 5. COUNTER ANIMATION \u2500\u2500 *\/\n(function() {\n  const counters = document.querySelectorAll('.ov-stat-num[data-target]');\n  if(!counters.length) return;\n  const io = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (!entry.isIntersecting) return;\n      const el     = entry.target;\n      const target = parseInt(el.dataset.target, 10);\n      const plus   = target >= 100 ? '+' : '';\n      const dur    = 1800;\n      const step   = 16;\n      const steps  = dur \/ step;\n      let   current = 0;\n      const inc    = target \/ steps;\n\n      const timer = setInterval(() => {\n        current += inc;\n        if (current >= target) {\n          el.textContent = target + plus;\n          clearInterval(timer);\n        } else {\n          el.textContent = Math.floor(current) + plus;\n        }\n      }, step);\n\n      io.unobserve(el);\n    });\n  }, { threshold: 0.5 });\n\n  counters.forEach(c => io.observe(c));\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-baa69925 alignfull uagb-is-root-container\">\n<!-- Google Fonts -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&amp;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&amp;family=Inter:wght@300;400;500&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* \u2500\u2500\u2500 SCOPED RESET & BASE \u2500\u2500\u2500 *\/\n  .history-section,\n  .history-section *,\n  .history-section *::before,\n  .history-section *::after {\n    box-sizing: border-box;\n  }\n\n  .history-section {\n    --hs-purple-deep: #1e0a3c;\n    --hs-purple-mid:  #3b1278;\n    --hs-purple-glow: #6b35b8;\n    --hs-gold-bright: #f0c040;\n    --hs-gold-warm:   #d4982a;\n    --hs-gold-muted:  #9a6f2a;\n    --hs-cream:       #f9f2e3;\n    --hs-white:       #ffffff;\n    --hs-text-light:  rgba(255,255,255,0.85);\n    --hs-text-muted:  rgba(255,255,255,0.55);\n\n    position: relative;\n    width: 100%;\n    padding: 100px 0 120px;\n    background: linear-gradient(160deg, #1a0533 0%, #2d0f5a 40%, #1a0533 100%);\n    overflow: hidden;\n    color: var(--hs-white);\n    font-family: 'Inter', sans-serif;\n  }\n\n  .history-section h2,\n  .history-section h3,\n  .history-section p {\n    margin: 0;\n    padding: 0;\n  }\n\n  \/* \u2500\u2500\u2500 AMBIENT GLOW \u2500\u2500\u2500 *\/\n  .history-section::before {\n    content: '';\n    position: absolute;\n    top: -100px; left: 50%;\n    transform: translateX(-50%);\n    width: 900px; height: 600px;\n    background: radial-gradient(ellipse at center, rgba(240,192,64,0.12) 0%, transparent 70%);\n    pointer-events: none;\n    animation: hsAmbientPulse 6s ease-in-out infinite;\n  }\n\n  @keyframes hsAmbientPulse {\n    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }\n    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }\n  }\n\n  \/* \u2500\u2500\u2500 MOSAIC CANVAS \u2500\u2500\u2500 *\/\n  #hsMosaicCanvas {\n    position: absolute;\n    inset: 0;\n    width: 100%; height: 100%;\n    pointer-events: none;\n    opacity: 0.35;\n  }\n\n  \/* \u2500\u2500\u2500 GOLD BORDERS \u2500\u2500\u2500 *\/\n  .hs-border-left, .hs-border-right {\n    position: absolute;\n    top: 0; bottom: 0;\n    width: 6px;\n    background: linear-gradient(180deg, transparent, var(--hs-gold-bright), var(--hs-gold-warm), transparent);\n    animation: hsBorderShimmer 4s ease-in-out infinite alternate;\n  }\n  .hs-border-left  { left: 0; }\n  .hs-border-right { right: 0; animation-delay: 2s; }\n\n  @keyframes hsBorderShimmer {\n    from { opacity: 0.4; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 FLOATING CROSS PARTICLES \u2500\u2500\u2500 *\/\n  .hs-cross-float {\n    position: absolute;\n    opacity: 0;\n    animation: hsFloatUp 12s ease-in-out infinite;\n    pointer-events: none;\n    font-size: 14px;\n    color: var(--hs-gold-bright);\n    filter: blur(0.5px);\n  }\n  @keyframes hsFloatUp {\n    0%   { opacity: 0; transform: translateY(60px) rotate(0deg); }\n    15%  { opacity: 0.5; }\n    80%  { opacity: 0.2; }\n    100% { opacity: 0; transform: translateY(-80px) rotate(20deg); }\n  }\n\n  \/* \u2500\u2500\u2500 ROSE WINDOW \u2500\u2500\u2500 *\/\n  .hs-rose-wrapper {\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 700px; height: 700px;\n    opacity: 0.06;\n    animation: hsRoseRotate 80s linear infinite;\n    pointer-events: none;\n  }\n  @keyframes hsRoseRotate {\n    from { transform: translate(-50%, -50%) rotate(0deg); }\n    to   { transform: translate(-50%, -50%) rotate(360deg); }\n  }\n\n  \/* \u2500\u2500\u2500 LIGHT RAYS \u2500\u2500\u2500 *\/\n  .hs-rays-wrapper {\n    position: absolute;\n    top: 0; left: 50%;\n    transform: translateX(-50%);\n    width: 100%; height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n  .hs-ray {\n    position: absolute;\n    top: -40px;\n    width: 2px;\n    height: 120%;\n    transform-origin: top center;\n    background: linear-gradient(180deg, rgba(240,192,64,0.22), transparent);\n    animation: hsRayPulse 5s ease-in-out infinite;\n  }\n  @keyframes hsRayPulse {\n    0%, 100% { opacity: 0.3; }\n    50%      { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 CONTAINER \u2500\u2500\u2500 *\/\n  .history-container {\n    position: relative;\n    z-index: 10;\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 0 32px;\n  }\n\n  \/* \u2500\u2500\u2500 EYEBROW \u2500\u2500\u2500 *\/\n  .hs-eyebrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    margin-bottom: 28px;\n    opacity: 0;\n    animation: hsFadeInDown 0.9s ease forwards 0.2s;\n  }\n  .hs-eyebrow-line {\n    width: 60px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--hs-gold-bright));\n  }\n  .hs-eyebrow-line.right {\n    background: linear-gradient(90deg, var(--hs-gold-bright), transparent);\n  }\n  .hs-eyebrow-text {\n    font-family: 'Inter', sans-serif;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.35em;\n    text-transform: uppercase;\n    color: var(--hs-gold-bright);\n  }\n\n  \/* \u2500\u2500\u2500 HEADLINE \u2500\u2500\u2500 *\/\n  .history-headline {\n    text-align: center;\n    margin-bottom: 16px;\n    opacity: 0;\n    animation: hsFadeInDown 1s ease forwards 0.4s;\n  }\n  .history-headline .line1 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 900;\n    color: var(--hs-white);\n    line-height: 1.1;\n    letter-spacing: -0.01em;\n  }\n  .history-headline .line2 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 700;\n    font-style: italic;\n    color: var(--hs-gold-bright);\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n  }\n\n  \/* \u2500\u2500\u2500 LEAD TEXT \u2500\u2500\u2500 *\/\n  .history-lead {\n    text-align: center;\n    max-width: 680px;\n    margin: 0 auto 64px !important;\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.05rem, 1.8vw, 1.25rem);\n    font-weight: 300;\n    color: var(--hs-text-light);\n    line-height: 1.8;\n    letter-spacing: 0.01em;\n    opacity: 0;\n    animation: hsFadeInDown 1s ease forwards 0.6s;\n  }\n\n  \/* \u2500\u2500\u2500 ORNAMENT \u2500\u2500\u2500 *\/\n  .hs-ornament {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    margin-bottom: 80px;\n    opacity: 0;\n    animation: hsFadeIn 1s ease forwards 0.8s;\n  }\n  .hs-ornament span {\n    font-size: 18px;\n    color: var(--hs-gold-bright);\n    line-height: 1;\n  }\n  .hs-ornament-line {\n    width: 80px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--hs-gold-muted));\n  }\n  .hs-ornament-line.r {\n    background: linear-gradient(90deg, var(--hs-gold-muted), transparent);\n  }\n\n  \/* \u2500\u2500\u2500 FOUNDING HIGHLIGHT \u2500\u2500\u2500 *\/\n  .hs-founding-highlight {\n    position: relative;\n    text-align: center;\n    padding: 56px 60px;\n    border: 1px solid rgba(240,192,64,0.2);\n    background: rgba(240,192,64,0.04);\n    margin-bottom: 96px;\n    opacity: 0;\n    animation: hsFadeIn 1s ease forwards 1s;\n    overflow: hidden;\n  }\n  .hs-founding-highlight::before,\n  .hs-founding-highlight::after {\n    content: '';\n    position: absolute;\n    width: 60px; height: 60px;\n    border-color: var(--hs-gold-bright);\n    border-style: solid;\n    opacity: 0.4;\n  }\n  .hs-founding-highlight::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; }\n  .hs-founding-highlight::after  { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }\n\n  .hs-founding-year {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(3.5rem, 7vw, 6rem);\n    font-weight: 900;\n    color: var(--hs-gold-bright);\n    line-height: 1;\n    margin-bottom: 8px;\n    letter-spacing: -0.02em;\n    text-shadow: 0 0 60px rgba(240,192,64,0.3);\n  }\n  .hs-founding-label {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.7rem;\n    font-weight: 500;\n    letter-spacing: 0.3em;\n    text-transform: uppercase;\n    color: var(--hs-gold-muted);\n    margin-bottom: 20px;\n    display: block;\n  }\n  .hs-founding-text {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.1rem, 1.8vw, 1.3rem);\n    font-weight: 300;\n    font-style: italic;\n    color: var(--hs-text-light);\n    line-height: 1.8;\n    max-width: 560px;\n    margin: 0 auto;\n  }\n\n  \/* \u2500\u2500\u2500 TIMELINE \u2500\u2500\u2500 *\/\n  .hs-timeline {\n    position: relative;\n    padding: 0;\n    margin-bottom: 80px;\n  }\n\n  \/* Central vertical line *\/\n  .hs-timeline::before {\n    content: '';\n    position: absolute;\n    left: 50%;\n    top: 0;\n    bottom: 0;\n    width: 2px;\n    background: linear-gradient(180deg, transparent, var(--hs-gold-bright), var(--hs-gold-warm), var(--hs-gold-bright), transparent);\n    transform: translateX(-50%);\n    opacity: 0.6;\n  }\n\n  \/* Timeline entry *\/\n  .hs-tl-entry {\n    position: relative;\n    width: 50%;\n    padding: 0 50px 60px;\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.7s ease, transform 0.7s ease;\n  }\n  .hs-tl-entry.hs-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .hs-tl-entry:nth-child(odd) {\n    left: 0;\n    text-align: right;\n    padding-right: 60px;\n    padding-left: 0;\n  }\n  .hs-tl-entry:nth-child(even) {\n    left: 50%;\n    text-align: left;\n    padding-left: 60px;\n    padding-right: 0;\n  }\n\n  \/* Timeline node *\/\n  .hs-tl-node {\n    position: absolute;\n    top: 6px;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: var(--hs-purple-deep);\n    border: 3px solid var(--hs-gold-bright);\n    z-index: 5;\n    box-shadow: 0 0 20px rgba(240,192,64,0.4), 0 0 40px rgba(240,192,64,0.15);\n    transition: transform 0.4s ease, box-shadow 0.4s ease;\n  }\n  .hs-tl-entry:hover .hs-tl-node {\n    transform: scale(1.3);\n    box-shadow: 0 0 30px rgba(240,192,64,0.6), 0 0 60px rgba(240,192,64,0.2);\n  }\n\n  .hs-tl-entry:nth-child(odd) .hs-tl-node {\n    right: -10px;\n  }\n  .hs-tl-entry:nth-child(even) .hs-tl-node {\n    left: -10px;\n  }\n\n  \/* Node cross *\/\n  .hs-tl-node::after {\n    content: '\u271d';\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 8px;\n    color: var(--hs-gold-bright);\n    line-height: 1;\n  }\n\n  \/* Timeline content card *\/\n  .hs-tl-card {\n    position: relative;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(240,192,64,0.15);\n    border-radius: 4px;\n    padding: 28px 28px 24px;\n    transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.4s ease;\n    overflow: hidden;\n  }\n  .hs-tl-card:hover {\n    border-color: rgba(240,192,64,0.45);\n    background: rgba(240,192,64,0.06);\n    box-shadow: 0 0 40px rgba(240,192,64,0.12), inset 0 0 30px rgba(240,192,64,0.03);\n    transform: translateY(-4px);\n  }\n\n  \/* Card sweep effect *\/\n  .hs-tl-card::before {\n    content: '';\n    position: absolute;\n    top: 0; left: -100%;\n    width: 60%; height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(240,192,64,0.08), transparent);\n    transition: left 0.6s ease;\n  }\n  .hs-tl-card:hover::before { left: 160%; }\n\n  \/* Card top accent *\/\n  .hs-tl-card::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 20%; right: 20%;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--hs-gold-bright), transparent);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n  }\n  .hs-tl-card:hover::after { opacity: 1; }\n\n  \/* Year badge *\/\n  .hs-tl-year {\n    display: inline-block;\n    font-family: 'Playfair Display', serif;\n    font-size: 0.85rem;\n    font-weight: 700;\n    color: var(--hs-gold-bright);\n    background: rgba(240,192,64,0.1);\n    border: 1px solid rgba(240,192,64,0.25);\n    border-radius: 50px;\n    padding: 4px 16px;\n    margin-bottom: 12px;\n    letter-spacing: 0.1em;\n  }\n\n  .hs-tl-title {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.2rem;\n    font-weight: 700;\n    color: var(--hs-gold-bright);\n    margin-bottom: 10px;\n    letter-spacing: 0.02em;\n    line-height: 1.3;\n  }\n\n  .hs-tl-icon {\n    display: block;\n    font-size: 1.6rem;\n    margin-bottom: 10px;\n    filter: drop-shadow(0 0 8px rgba(240,192,64,0.4));\n    animation: hsIconGlow 3s ease-in-out infinite alternate;\n  }\n  @keyframes hsIconGlow {\n    from { filter: drop-shadow(0 0 4px rgba(240,192,64,0.3)); }\n    to   { filter: drop-shadow(0 0 14px rgba(240,192,64,0.7)); }\n  }\n\n  .hs-tl-text {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--hs-text-light);\n    line-height: 1.75;\n  }\n\n  \/* \u2500\u2500\u2500 LEGACY STATS BAND \u2500\u2500\u2500 *\/\n  .hs-stats-band {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 0;\n    border: 1px solid rgba(240,192,64,0.2);\n    margin-bottom: 72px;\n    opacity: 0;\n    animation: hsFadeIn 1s ease forwards 1.6s;\n  }\n  .hs-stat-item {\n    padding: 36px 20px;\n    text-align: center;\n    position: relative;\n    transition: background 0.3s ease;\n  }\n  .hs-stat-item:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 20%; right: 0;\n    height: 60%; width: 1px;\n    background: rgba(240,192,64,0.2);\n  }\n  .hs-stat-item:hover { background: rgba(240,192,64,0.06); }\n\n  .hs-stat-num {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2rem, 3.5vw, 2.8rem);\n    font-weight: 900;\n    color: var(--hs-gold-bright);\n    line-height: 1;\n    margin-bottom: 8px;\n  }\n  .hs-stat-label {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.7rem;\n    font-weight: 400;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: var(--hs-text-muted);\n  }\n\n  \/* \u2500\u2500\u2500 SCRIPTURE BLOCK \u2500\u2500\u2500 *\/\n  .hs-scripture-block {\n    position: relative;\n    text-align: center;\n    padding: 56px 60px;\n    border: 1px solid rgba(240,192,64,0.15);\n    background: rgba(240,192,64,0.03);\n    margin-bottom: 72px;\n    opacity: 0;\n    animation: hsFadeIn 1s ease forwards 1.8s;\n    overflow: hidden;\n  }\n  .hs-scripture-block::before,\n  .hs-scripture-block::after {\n    content: '';\n    position: absolute;\n    width: 60px; height: 60px;\n    border-color: var(--hs-gold-bright);\n    border-style: solid;\n    opacity: 0.4;\n  }\n  .hs-scripture-block::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; }\n  .hs-scripture-block::after  { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }\n\n  .hs-quote-mark {\n    font-family: 'Playfair Display', serif;\n    font-size: 7rem;\n    color: var(--hs-gold-bright);\n    line-height: 0;\n    vertical-align: -0.5em;\n    opacity: 0.2;\n    display: block;\n    margin-bottom: -10px;\n  }\n  .hs-scripture-text {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n    font-style: italic;\n    font-weight: 300;\n    color: var(--hs-cream);\n    line-height: 1.7;\n    margin-bottom: 20px !important;\n  }\n  .hs-scripture-ref {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--hs-gold-muted);\n  }\n\n  \/* \u2500\u2500\u2500 CTA ROW \u2500\u2500\u2500 *\/\n  .hs-cta-row {\n    display: flex;\n    gap: 20px;\n    justify-content: center;\n    flex-wrap: wrap;\n    opacity: 0;\n    animation: hsFadeInUp 1s ease forwards 2s;\n  }\n\n  \n\n  \/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\n  @keyframes hsFadeInDown {\n    from { opacity: 0; transform: translateY(-24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes hsFadeInUp {\n    from { opacity: 0; transform: translateY(24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes hsFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n  @media (max-width: 900px) {\n    .hs-stats-band { grid-template-columns: repeat(2, 1fr); }\n    .hs-stat-item:nth-child(2)::after { display: none; }\n\n    \/* Stack timeline vertically on tablet *\/\n    .hs-timeline::before {\n      left: 24px;\n    }\n    .hs-tl-entry {\n      width: 100%;\n      left: 0 !important;\n      text-align: left !important;\n      padding-left: 64px !important;\n      padding-right: 16px !important;\n    }\n    .hs-tl-entry:nth-child(odd) {\n      text-align: left;\n      padding-right: 16px;\n      padding-left: 64px;\n    }\n    .hs-tl-node {\n      left: 14px !important;\n      right: auto !important;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .history-section {\n      padding: 70px 0 80px;\n    }\n    .hs-founding-highlight { padding: 40px 24px; }\n    .hs-scripture-block { padding: 40px 24px; }\n    .hs-rose-wrapper { width: 340px; height: 340px; }\n    .hs-tl-card { padding: 20px 18px 18px; }\n    .hs-tl-title { font-size: 1.05rem; }\n    .hs-stats-band { grid-template-columns: repeat(2, 1fr); }\n    .hs-stat-item { padding: 24px 14px; }\n  }\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--          HISTORY SECTION              -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"history-section\" id=\"history\">\n\n  <!-- Animated mosaic canvas -->\n  <canvas id=\"hsMosaicCanvas\" aria-hidden=\"true\"><\/canvas>\n\n  <!-- Light rays -->\n  <div class=\"hs-rays-wrapper\" id=\"hsRaysWrapper\" aria-hidden=\"true\"><\/div>\n\n  <!-- Rose window -->\n  <div class=\"hs-rose-wrapper\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n      <circle cx=\"200\" cy=\"200\" r=\"190\" stroke=\"#f0c040\" stroke-width=\"1.5\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"150\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"100\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"55\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <g stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\"><\/line>\n        <line x1=\"10\" y1=\"200\" x2=\"390\" y2=\"200\"><\/line>\n        <line x1=\"54\" y1=\"54\" x2=\"346\" y2=\"346\"><\/line>\n        <line x1=\"346\" y1=\"54\" x2=\"54\" y2=\"346\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(30 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(60 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(90 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(120 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(150 200 200)\"><\/line>\n      <\/g>\n      <g fill=\"rgba(240,192,64,0.06)\" stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(0 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(30 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(60 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(90 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(120 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(150 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(180 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(210 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(240 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(270 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(300 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(330 200 200)\"><\/ellipse>\n      <\/g>\n    <\/svg>\n  <\/div>\n\n  <!-- Gold borders -->\n  <div class=\"hs-border-left\" aria-hidden=\"true\"><\/div>\n  <div class=\"hs-border-right\" aria-hidden=\"true\"><\/div>\n\n  <!-- Floating crosses -->\n  <div id=\"hsCrossContainer\" aria-hidden=\"true\"><\/div>\n\n  <!-- \u2500\u2500\u2500 CONTENT \u2500\u2500\u2500 -->\n  <div class=\"history-container\">\n\n    <!-- Eyebrow -->\n    <div class=\"hs-eyebrow\">\n      <span class=\"hs-eyebrow-line\"><\/span>\n      <span class=\"hs-eyebrow-text\">Our Journey Through Time<\/span>\n      <span class=\"hs-eyebrow-line right\"><\/span>\n    <\/div>\n\n    <!-- Headline -->\n    <h2 class=\"history-headline\">\n      <span class=\"line1\">The History of<\/span>\n      <span class=\"line2\">STA Barbara Mission Center<\/span>\n    <\/h2>\n\n    <!-- Lead -->\n    <p class=\"history-lead\">\n      From a humble chapel nestled in Brgy. Casasahan, Gumaca, Quezon, to a thriving\n      center of faith and fellowship \u2014 every chapter of our story is written by God&#8217;s\n      providence and the devoted hands of His faithful servants.\n    <\/p>\n\n    <!-- Ornament -->\n    <div class=\"hs-ornament\" aria-hidden=\"true\">\n      <span class=\"hs-ornament-line\"><\/span>\n      <span>\u2726<\/span>\n      <span>\u271d<\/span>\n      <span>\u2726<\/span>\n      <span class=\"hs-ornament-line r\"><\/span>\n    <\/div>\n\n    <!-- Founding Highlight -->\n    <div class=\"hs-founding-highlight\">\n      <span class=\"hs-founding-year\" data-target=\"1954\">0<\/span>\n      <span class=\"hs-founding-label\">Year Founded<\/span>\n      <p class=\"hs-founding-text\">\n        A small group of devoted faithful, guided by the Diocese, planted the seeds of what\n        would become a beacon of Catholic life in the heart of Quezon \u2014 a mission born of\n        prayer, sacrifice, and an unwavering trust in Divine Providence.\n      <\/p>\n    <\/div>\n\n    <!-- Timeline -->\n    <div class=\"hs-timeline\" id=\"hsTimeline\">\n\n      <!-- Entry 1 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\u26ea<\/span>\n          <span class=\"hs-tl-year\">1954<\/span>\n          <h3 class=\"hs-tl-title\">The First Foundation<\/h3>\n          <p class=\"hs-tl-text\">\n            A modest bamboo-and-nipa chapel was erected by the faithful of Casasahan,\n            marking the birth of our mission. Under the pastoral care of visiting\n            priests from the Diocese, the community gathered for its first Holy Mass \u2014\n            a humble beginning that would grow into a living testament of faith.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Entry 2 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\ud83d\udcd6<\/span>\n          <span class=\"hs-tl-year\">1965<\/span>\n          <h3 class=\"hs-tl-title\">Establishing Catechetical Ministry<\/h3>\n          <p class=\"hs-tl-text\">\n            Recognizing the need for faith formation, volunteer catechists began\n            organizing Sunday instructions for children and adults alike. This\n            ministry became the seedbed of Catholic education in the barangay,\n            nurturing generations of faithful who would carry the mission forward.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Entry 3 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\ud83d\udd4a\ufe0f<\/span>\n          <span class=\"hs-tl-year\">1978<\/span>\n          <h3 class=\"hs-tl-title\">Construction of the Permanent Chapel<\/h3>\n          <p class=\"hs-tl-text\">\n            Through the collective generosity of parishioners and the support of the\n            Diocese, a permanent concrete chapel was constructed \u2014 replacing the\n            original structure and standing as a symbol of the community&#8217;s deepening\n            commitment to worship and fellowship.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Entry 4 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\ud83d\ude4f<\/span>\n          <span class=\"hs-tl-year\">1990<\/span>\n          <h3 class=\"hs-tl-title\">Official Parish Recognition<\/h3>\n          <p class=\"hs-tl-text\">\n            After decades of faithful growth, the mission was officially recognized\n            as a parish by the Diocese. The appointment of its first resident parish\n            priest marked a historic milestone \u2014 the community could now fully\n            administer sacraments and pastoral care independently.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Entry 5 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\ud83e\udd1d<\/span>\n          <span class=\"hs-tl-year\">2002<\/span>\n          <h3 class=\"hs-tl-title\">Launch of Community Outreach Programs<\/h3>\n          <p class=\"hs-tl-text\">\n            Answering the call to serve the poor and marginalized, the mission center\n            launched its first organized outreach initiatives \u2014 feeding programs,\n            medical missions, and livelihood projects that embodied Christ&#8217;s preferential\n            love for the least of our brethren.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Entry 6 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\u2728<\/span>\n          <span class=\"hs-tl-year\">2010<\/span>\n          <h3 class=\"hs-tl-title\">Church Renovation &amp; Expansion<\/h3>\n          <p class=\"hs-tl-text\">\n            A major renovation expanded the church to accommodate the growing\n            community. A new altar, improved facilities, and a parish hall were\n            dedicated \u2014 transforming the mission center into a more welcoming\n            house of worship and a hub for parish activities and gatherings.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Entry 7 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\ud83d\udcaa<\/span>\n          <span class=\"hs-tl-year\">2018<\/span>\n          <h3 class=\"hs-tl-title\">Youth Ministry &amp; Faith Formation Revival<\/h3>\n          <p class=\"hs-tl-text\">\n            A renewed emphasis on youth engagement brought fresh energy to the\n            mission. Bible study circles, youth camps, and altar server programs\n            flourished \u2014 forming a new generation of disciples rooted in prayer,\n            service, and love for the Eucharist.\n          <\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Entry 8 -->\n      <div class=\"hs-tl-entry\">\n        <div class=\"hs-tl-node\"><\/div>\n        <div class=\"hs-tl-card\">\n          <span class=\"hs-tl-icon\" aria-hidden=\"true\">\ud83c\udf1f<\/span>\n          <span class=\"hs-tl-year\">Today<\/span>\n          <h3 class=\"hs-tl-title\">A Living, Growing Mission<\/h3>\n          <p class=\"hs-tl-text\">\n            Today, the STA Barbara Mission Center stands as a vibrant community of\n            over 500 families \u2014 a place where the sacraments are celebrated, the\n            poor are served, the youth are formed, and the Gospel is proclaimed\n            with joy. Our journey continues, guided by faith and sustained by grace.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div><!-- \/timeline -->\n\n    <!-- Stats Band -->\n    <div class=\"hs-stats-band\">\n      <div class=\"hs-stat-item\">\n        <span class=\"hs-stat-num\" data-target=\"70\">0<\/span>\n        <span class=\"hs-stat-label\">Years of Faith<\/span>\n      <\/div>\n      <div class=\"hs-stat-item\">\n        <span class=\"hs-stat-num\" data-target=\"500\">0<\/span>\n        <span class=\"hs-stat-label\">Families Served<\/span>\n      <\/div>\n      <div class=\"hs-stat-item\">\n        <span class=\"hs-stat-num\" data-target=\"12\">0<\/span>\n        <span class=\"hs-stat-label\">Active Ministries<\/span>\n      <\/div>\n      <div class=\"hs-stat-item\">\n        <span class=\"hs-stat-num\" data-target=\"8\">0<\/span>\n        <span class=\"hs-stat-label\">Generations Nurtured<\/span>\n      <\/div>\n    <\/div>\n\n    <!-- Scripture -->\n    <blockquote class=\"hs-scripture-block\">\n      <span class=\"hs-quote-mark\" aria-hidden=\"true\">&#8220;<\/span>\n      <p class=\"hs-scripture-text\">\n        Remember the days of old; consider the generations long past.<br>\n        Ask your father and he will tell you, your elders, and they will explain to you.\n      <\/p>\n      <footer class=\"hs-scripture-ref\">\u2014 Deuteronomy 32:7<\/footer>\n    <\/blockquote>\n\n    <!-- CTAs -->\n\n\n  <\/div><!-- \/container -->\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--            SCRIPTS                    -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n\/* \u2500\u2500 1. MOSAIC CANVAS \u2500\u2500 *\/\n(function() {\n  const canvas = document.getElementById('hsMosaicCanvas');\n  if(!canvas) return;\n  const ctx    = canvas.getContext('2d');\n  let   W, H, tiles = [];\n\n  const COLORS = [\n    'rgba(107,53,184,',\n    'rgba(59,18,120,',\n    'rgba(240,192,64,',\n    'rgba(212,152,42,',\n    'rgba(154,111,42,',\n    'rgba(180,80,200,',\n    'rgba(30,10,60,',\n  ];\n\n  function Tile(x, y, size) {\n    this.x     = x;\n    this.y     = y;\n    this.size  = size;\n    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];\n    this.alpha = Math.random() * 0.6 + 0.1;\n    this.speed = Math.random() * 0.005 + 0.001;\n    this.phase = Math.random() * Math.PI * 2;\n  }\n\n  Tile.prototype.update = function(t) {\n    this.alpha = 0.05 + 0.45 * (0.5 + 0.5 * Math.sin(t * this.speed + this.phase));\n  };\n\n  Tile.prototype.draw = function() {\n    ctx.fillStyle = this.color + this.alpha + ')';\n    ctx.fillRect(this.x + 1, this.y + 1, this.size - 2, this.size - 2);\n  };\n\n  function resize() {\n    W = canvas.width  = canvas.offsetWidth;\n    H = canvas.height = canvas.offsetHeight;\n    tiles = [];\n    const S = 48;\n    for (let x = 0; x < W; x += S) {\n      for (let y = 0; y < H; y += S) {\n        tiles.push(new Tile(x, y, S));\n      }\n    }\n  }\n\n  let t = 0;\n  function loop() {\n    ctx.clearRect(0, 0, W, H);\n    t += 1;\n    tiles.forEach(function(tile) { tile.update(t); tile.draw(); });\n    requestAnimationFrame(loop);\n  }\n\n  resize();\n  window.addEventListener('resize', resize);\n  loop();\n})();\n\n\/* \u2500\u2500 2. LIGHT RAYS \u2500\u2500 *\/\n(function() {\n  const wrap = document.getElementById('hsRaysWrapper');\n  if(!wrap) return;\n  const count = 14;\n  for (let i = 0; i < count; i++) {\n    const ray = document.createElement('div');\n    ray.className = 'hs-ray';\n    const angle = -40 + (80 \/ count) * i;\n    const left  = 30 + (40 \/ count) * i;\n    ray.style.cssText =\n      'left:' + left + '%;' +\n      'transform:rotate(' + angle + 'deg);' +\n      'animation-delay:' + (i * 0.35).toFixed(2) + 's;' +\n      'animation-duration:' + (4 + Math.random() * 3).toFixed(1) + 's;' +\n      'opacity:' + (0.15 + Math.random() * 0.2) + ';';\n    wrap.appendChild(ray);\n  }\n})();\n\n\/* \u2500\u2500 3. FLOATING CROSS PARTICLES \u2500\u2500 *\/\n(function() {\n  const container = document.getElementById('hsCrossContainer');\n  if(!container) return;\n  const symbols   = ['\u271d', '\u2726', '\u2727', '\u25c6', '\u2720'];\n\n  function spawn() {\n    const el = document.createElement('div');\n    el.className   = 'hs-cross-float';\n    el.textContent = symbols[Math.floor(Math.random() * symbols.length)];\n    el.style.cssText =\n      'left:' + (Math.random() * 95) + '%;' +\n      'bottom:-30px;' +\n      'font-size:' + (8 + Math.random() * 12) + 'px;' +\n      'animation-duration:' + (10 + Math.random() * 8) + 's;' +\n      'animation-delay:' + (Math.random() * 4) + 's;';\n    container.appendChild(el);\n    setTimeout(function() { el.remove(); }, 18000);\n  }\n\n  for (let i = 0; i < 12; i++) {\n    setTimeout(spawn, i * 400);\n  }\n  setInterval(spawn, 1800);\n})();\n\n\/* \u2500\u2500 4. SCROLL-REVEAL TIMELINE \u2500\u2500 *\/\n(function() {\n  const entries = document.querySelectorAll('.hs-tl-entry');\n  if(!entries.length) return;\n\n  if('IntersectionObserver' in window) {\n    const io = new IntersectionObserver(function(obsEntries) {\n      obsEntries.forEach(function(entry) {\n        if(entry.isIntersecting) {\n          const idx = Array.prototype.indexOf.call(entries, entry.target);\n          setTimeout(function() {\n            entry.target.classList.add('hs-visible');\n          }, idx * 150);\n          io.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.15 });\n\n    entries.forEach(function(e) { io.observe(e); });\n  } else {\n    entries.forEach(function(e) { e.classList.add('hs-visible'); });\n  }\n})();\n\n\/* \u2500\u2500 5. FOUNDING YEAR COUNTER \u2500\u2500 *\/\n(function() {\n  const el = document.querySelector('.hs-founding-year[data-target]');\n  if(!el) return;\n\n  function animateFounding() {\n    const target = parseInt(el.getAttribute('data-target'), 10);\n    const dur    = 2200;\n    const step   = 16;\n    const steps  = dur \/ step;\n    const inc    = target \/ steps;\n    let current  = 0;\n\n    const timer = setInterval(function() {\n      current += inc;\n      if(current >= target) {\n        el.textContent = target;\n        clearInterval(timer);\n      } else {\n        el.textContent = Math.floor(current);\n      }\n    }, step);\n  }\n\n  if('IntersectionObserver' in window) {\n    const io = new IntersectionObserver(function(entries) {\n      entries.forEach(function(entry) {\n        if(entry.isIntersecting) {\n          animateFounding();\n          io.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.5 });\n    io.observe(el);\n  } else {\n    animateFounding();\n  }\n})();\n\n\/* \u2500\u2500 6. STATS COUNTER ANIMATION \u2500\u2500 *\/\n(function() {\n  const counters = document.querySelectorAll('.hs-stat-num[data-target]');\n  if(!counters.length) return;\n\n  if('IntersectionObserver' in window) {\n    const io = new IntersectionObserver(function(entries) {\n      entries.forEach(function(entry) {\n        if(!entry.isIntersecting) return;\n        const el     = entry.target;\n        const target = parseInt(el.getAttribute('data-target'), 10);\n        const plus   = target >= 100 ? '+' : '';\n        const dur    = 1800;\n        const step   = 16;\n        const steps  = dur \/ step;\n        const inc    = target \/ steps;\n        let current  = 0;\n\n        const timer = setInterval(function() {\n          current += inc;\n          if(current >= target) {\n            el.textContent = target + plus;\n            clearInterval(timer);\n          } else {\n            el.textContent = Math.floor(current) + plus;\n          }\n        }, step);\n\n        io.unobserve(el);\n      });\n    }, { threshold: 0.5 });\n\n    counters.forEach(function(c) { io.observe(c); });\n  }\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-9bbe0b28 alignfull uagb-is-root-container\">\n<!-- Google Fonts -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&#038;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&#038;family=Inter:wght@300;400;500&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* \u2500\u2500\u2500 SCOPED RESET & BASE \u2500\u2500\u2500 *\/\n  .saint-section,\n  .saint-section *,\n  .saint-section *::before,\n  .saint-section *::after {\n    box-sizing: border-box;\n  }\n\n  .saint-section {\n    --st-purple-deep: #1e0a3c;\n    --st-purple-mid:  #3b1278;\n    --st-purple-glow: #6b35b8;\n    --st-gold-bright: #f0c040;\n    --st-gold-warm:   #d4982a;\n    --st-gold-muted:  #9a6f2a;\n    --st-cream:       #f9f2e3;\n    --st-white:       #ffffff;\n    --st-text-light:  rgba(255,255,255,0.85);\n    --st-text-muted:  rgba(255,255,255,0.55);\n\n    position: relative;\n    width: 100%;\n    padding: 100px 0 120px;\n    background: linear-gradient(160deg, #1a0533 0%, #2d0f5a 40%, #1a0533 100%);\n    overflow: hidden;\n    color: var(--st-white);\n    font-family: 'Inter', sans-serif;\n  }\n\n  .saint-section h2,\n  .saint-section h3,\n  .saint-section p {\n    margin: 0;\n    padding: 0;\n  }\n\n  \/* \u2500\u2500\u2500 AMBIENT GLOW \u2500\u2500\u2500 *\/\n  .saint-section::before {\n    content: '';\n    position: absolute;\n    top: -100px; left: 50%;\n    transform: translateX(-50%);\n    width: 900px; height: 600px;\n    background: radial-gradient(ellipse at center, rgba(240,192,64,0.12) 0%, transparent 70%);\n    pointer-events: none;\n    animation: stAmbientPulse 6s ease-in-out infinite;\n  }\n\n  @keyframes stAmbientPulse {\n    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }\n    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }\n  }\n\n  \/* \u2500\u2500\u2500 MOSAIC CANVAS \u2500\u2500\u2500 *\/\n  #stMosaicCanvas {\n    position: absolute;\n    inset: 0;\n    width: 100%; height: 100%;\n    pointer-events: none;\n    opacity: 0.35;\n  }\n\n  \/* \u2500\u2500\u2500 GOLD BORDERS \u2500\u2500\u2500 *\/\n  .st-border-left, .st-border-right {\n    position: absolute;\n    top: 0; bottom: 0;\n    width: 6px;\n    background: linear-gradient(180deg, transparent, var(--st-gold-bright), var(--st-gold-warm), transparent);\n    animation: stBorderShimmer 4s ease-in-out infinite alternate;\n  }\n  .st-border-left  { left: 0; }\n  .st-border-right { right: 0; animation-delay: 2s; }\n\n  @keyframes stBorderShimmer {\n    from { opacity: 0.4; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 FLOATING CROSS PARTICLES \u2500\u2500\u2500 *\/\n  .st-cross-float {\n    position: absolute;\n    opacity: 0;\n    animation: stFloatUp 12s ease-in-out infinite;\n    pointer-events: none;\n    font-size: 14px;\n    color: var(--st-gold-bright);\n    filter: blur(0.5px);\n  }\n  @keyframes stFloatUp {\n    0%   { opacity: 0; transform: translateY(60px) rotate(0deg); }\n    15%  { opacity: 0.5; }\n    80%  { opacity: 0.2; }\n    100% { opacity: 0; transform: translateY(-80px) rotate(20deg); }\n  }\n\n  \/* \u2500\u2500\u2500 ROSE WINDOW \u2500\u2500\u2500 *\/\n  .st-rose-wrapper {\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 700px; height: 700px;\n    opacity: 0.06;\n    animation: stRoseRotate 80s linear infinite;\n    pointer-events: none;\n  }\n  @keyframes stRoseRotate {\n    from { transform: translate(-50%, -50%) rotate(0deg); }\n    to   { transform: translate(-50%, -50%) rotate(360deg); }\n  }\n\n  \/* \u2500\u2500\u2500 LIGHT RAYS \u2500\u2500\u2500 *\/\n  .st-rays-wrapper {\n    position: absolute;\n    top: 0; left: 50%;\n    transform: translateX(-50%);\n    width: 100%; height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n  .st-ray {\n    position: absolute;\n    top: -40px;\n    width: 2px;\n    height: 120%;\n    transform-origin: top center;\n    background: linear-gradient(180deg, rgba(240,192,64,0.22), transparent);\n    animation: stRayPulse 5s ease-in-out infinite;\n  }\n  @keyframes stRayPulse {\n    0%, 100% { opacity: 0.3; }\n    50%      { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 CONTAINER \u2500\u2500\u2500 *\/\n  .saint-container {\n    position: relative;\n    z-index: 10;\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 0 32px;\n  }\n\n  \/* \u2500\u2500\u2500 EYEBROW \u2500\u2500\u2500 *\/\n  .st-eyebrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    margin-bottom: 28px;\n    opacity: 0;\n    animation: stFadeInDown 0.9s ease forwards 0.2s;\n  }\n  .st-eyebrow-line {\n    width: 60px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--st-gold-bright));\n  }\n  .st-eyebrow-line.right {\n    background: linear-gradient(90deg, var(--st-gold-bright), transparent);\n  }\n  .st-eyebrow-text {\n    font-family: 'Inter', sans-serif;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.35em;\n    text-transform: uppercase;\n    color: var(--st-gold-bright);\n  }\n\n  \/* \u2500\u2500\u2500 HEADLINE \u2500\u2500\u2500 *\/\n  .saint-headline {\n    text-align: center;\n    margin-bottom: 16px;\n    opacity: 0;\n    animation: stFadeInDown 1s ease forwards 0.4s;\n  }\n  .saint-headline .line1 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 900;\n    color: var(--st-white);\n    line-height: 1.1;\n    letter-spacing: -0.01em;\n  }\n  .saint-headline .line2 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 700;\n    font-style: italic;\n    color: var(--st-gold-bright);\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n  }\n\n  \/* \u2500\u2500\u2500 LEAD \u2500\u2500\u2500 *\/\n  .saint-lead {\n    text-align: center;\n    max-width: 680px;\n    margin: 0 auto 48px !important;\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.05rem, 1.8vw, 1.25rem);\n    font-weight: 300;\n    color: var(--st-text-light);\n    line-height: 1.8;\n    letter-spacing: 0.01em;\n    opacity: 0;\n    animation: stFadeInDown 1s ease forwards 0.6s;\n  }\n\n  \/* \u2500\u2500\u2500 ORNAMENT \u2500\u2500\u2500 *\/\n  .st-ornament {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    margin-bottom: 80px;\n    opacity: 0;\n    animation: stFadeIn 1s ease forwards 0.8s;\n  }\n  .st-ornament span {\n    font-size: 18px;\n    color: var(--st-gold-bright);\n    line-height: 1;\n  }\n  .st-ornament-line {\n    width: 80px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--st-gold-muted));\n  }\n  .st-ornament-line.r {\n    background: linear-gradient(90deg, var(--st-gold-muted), transparent);\n  }\n\n  \/* \u2500\u2500\u2500 MAIN GRID \u2500\u2500\u2500 *\/\n  .saint-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 70px;\n    align-items: center;\n    margin-bottom: 80px;\n    opacity: 0;\n    animation: stFadeInUp 1s ease forwards 1s;\n  }\n\n  \/* \u2500\u2500\u2500 LEFT: IMAGE SHRINE \u2500\u2500\u2500 *\/\n  .saint-image-wrap {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n  }\n\n  \/* Halo glow behind image *\/\n  .saint-image-wrap::before {\n    content: '';\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 85%;\n    height: 85%;\n    border-radius: 30px;\n    background: radial-gradient(ellipse, rgba(240,192,64,0.12) 0%, transparent 70%);\n    animation: stHaloPulse 5s ease-in-out infinite;\n    pointer-events: none;\n  }\n  @keyframes stHaloPulse {\n    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }\n    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }\n  }\n\n  .saint-frame {\n    position: relative;\n    width: 100%;\n    max-width: 380px;\n    padding: 14px;\n    border-radius: 24px;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(240,192,64,0.2);\n    animation: stFloatSaint 6s ease-in-out infinite;\n    transition: border-color 0.4s ease, box-shadow 0.4s ease;\n  }\n  .saint-frame:hover {\n    border-color: rgba(240,192,64,0.5);\n    box-shadow: 0 0 50px rgba(240,192,64,0.15), 0 0 100px rgba(124,58,237,0.08);\n  }\n\n  \/* Gold glow border *\/\n  .saint-frame::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: 24px;\n    border: 1px solid rgba(240,192,64,0.3);\n    box-shadow: 0 0 30px rgba(240,192,64,0.2);\n    pointer-events: none;\n    transition: box-shadow 0.4s ease;\n  }\n  .saint-frame:hover::before {\n    box-shadow: 0 0 50px rgba(240,192,64,0.35);\n  }\n\n  \/* Top accent bar *\/\n  .saint-frame::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 15%; right: 15%;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--st-gold-bright), transparent);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n  }\n  .saint-frame:hover::after { opacity: 1; }\n\n  @keyframes stFloatSaint {\n    0%, 100% { transform: translateY(0); }\n    50%      { transform: translateY(-14px); }\n  }\n\n  .saint-frame img {\n    width: 100%;\n    height: 460px;\n    object-fit: cover;\n    border-radius: 18px;\n    display: block;\n    filter: contrast(1.05) brightness(1.05) saturate(1.05);\n    transition: filter 0.4s ease;\n  }\n  .saint-frame:hover img {\n    filter: contrast(1.08) brightness(1.1) saturate(1.1);\n  }\n\n  \/* Corner cross ornament on image *\/\n  .saint-img-cross {\n    position: absolute;\n    top: -10px; right: -10px;\n    width: 36px; height: 36px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--st-gold-warm), var(--st-gold-bright));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    color: var(--st-purple-deep);\n    box-shadow: 0 4px 20px rgba(240,192,64,0.4);\n    z-index: 5;\n    animation: stCrossPulse 3s ease-in-out infinite alternate;\n  }\n  @keyframes stCrossPulse {\n    from { box-shadow: 0 4px 20px rgba(240,192,64,0.3); }\n    to   { box-shadow: 0 4px 35px rgba(240,192,64,0.6); }\n  }\n\n  \/* \u2500\u2500\u2500 RIGHT: CONTENT \u2500\u2500\u2500 *\/\n  .saint-content {\n    max-width: 520px;\n  }\n\n  .st-saint-label {\n    color: var(--st-gold-bright) !important;\n    letter-spacing: 6px !important;\n    text-transform: uppercase !important;\n    font-size: 0.8rem !important;\n    font-weight: 600 !important;\n    font-family: 'Inter', sans-serif !important;\n    margin-bottom: 18px !important;\n    display: block;\n  }\n\n  .st-saint-title {\n    font-family: 'Playfair Display', serif !important;\n    font-size: clamp(2.2rem, 3.2vw, 3.4rem) !important;\n    font-weight: 900 !important;\n    line-height: 1.1 !important;\n    color: var(--st-white) !important;\n    margin: 0 0 10px 0 !important;\n  }\n\n  .st-saint-title .st-highlight {\n    display: block;\n    color: var(--st-gold-bright) !important;\n    font-weight: 700 !important;\n    font-style: italic !important;\n    text-shadow: 0 0 20px rgba(240,192,64,0.25);\n  }\n\n  \/* Small scripture under title *\/\n  .st-saint-scripture {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 0.95rem;\n    font-style: italic;\n    font-weight: 300;\n    color: var(--st-gold-muted);\n    margin-bottom: 22px;\n    line-height: 1.5;\n  }\n\n  .st-saint-text {\n    font-family: 'Cormorant Garamond', serif !important;\n    color: var(--st-text-light) !important;\n    font-size: 1.1rem !important;\n    font-weight: 300 !important;\n    line-height: 1.9 !important;\n    margin-bottom: 28px !important;\n  }\n\n  \/* \u2500\u2500\u2500 INFO BOXES \u2500\u2500\u2500 *\/\n  .st-info-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 28px;\n  }\n\n  .st-info-box {\n    position: relative;\n    padding: 22px 20px;\n    border-radius: 4px;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(240,192,64,0.15);\n    overflow: hidden;\n    transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.4s ease;\n  }\n  .st-info-box:hover {\n    border-color: rgba(240,192,64,0.45);\n    background: rgba(240,192,64,0.06);\n    box-shadow: 0 0 30px rgba(240,192,64,0.1), inset 0 0 20px rgba(240,192,64,0.03);\n    transform: translateY(-4px);\n  }\n\n  \/* Sweep effect *\/\n  .st-info-box::before {\n    content: '';\n    position: absolute;\n    top: 0; left: -100%;\n    width: 60%; height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(240,192,64,0.08), transparent);\n    transition: left 0.6s ease;\n  }\n  .st-info-box:hover::before { left: 160%; }\n\n  \/* Top accent *\/\n  .st-info-box::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 20%; right: 20%;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--st-gold-bright), transparent);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n  }\n  .st-info-box:hover::after { opacity: 1; }\n\n  .st-info-icon {\n    font-size: 1.4rem;\n    margin-bottom: 8px;\n    display: block;\n    filter: drop-shadow(0 0 8px rgba(240,192,64,0.4));\n  }\n\n  .st-info-label {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.65rem;\n    font-weight: 500;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: var(--st-gold-muted);\n    margin-bottom: 4px;\n    display: block;\n  }\n\n  .st-info-value {\n    font-family: 'Playfair Display', serif;\n    font-size: 1rem;\n    font-weight: 700;\n    color: var(--st-gold-bright);\n    display: block;\n    line-height: 1.4;\n  }\n\n  .st-info-desc {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 0.9rem;\n    font-weight: 300;\n    color: var(--st-text-light);\n    margin-top: 4px;\n    display: block;\n    line-height: 1.5;\n  }\n\n  \/* \u2500\u2500\u2500 VIRTUES LIST \u2500\u2500\u2500 *\/\n  .st-virtues {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    margin-bottom: 32px;\n  }\n\n  .st-virtue-tag {\n    display: inline-block;\n    padding: 8px 20px;\n    border-radius: 50px;\n    background: rgba(240,192,64,0.08);\n    border: 1px solid rgba(240,192,64,0.2);\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    font-weight: 500;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--st-gold-bright);\n    transition: all 0.3s ease;\n  }\n  .st-virtue-tag:hover {\n    background: rgba(240,192,64,0.15);\n    border-color: rgba(240,192,64,0.5);\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(240,192,64,0.15);\n  }\n\n  \/* \u2500\u2500\u2500 FULL-WIDTH QUOTE \u2500\u2500\u2500 *\/\n  .st-scripture-block {\n    position: relative;\n    text-align: center;\n    padding: 56px 60px;\n    border: 1px solid rgba(240,192,64,0.15);\n    background: rgba(240,192,64,0.03);\n    margin-bottom: 72px;\n    overflow: hidden;\n    opacity: 0;\n    animation: stFadeIn 1s ease forwards 1.4s;\n  }\n  .st-scripture-block::before,\n  .st-scripture-block::after {\n    content: '';\n    position: absolute;\n    width: 60px; height: 60px;\n    border-color: var(--st-gold-bright);\n    border-style: solid;\n    opacity: 0.4;\n  }\n  .st-scripture-block::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; }\n  .st-scripture-block::after  { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }\n\n  .st-quote-mark {\n    font-family: 'Playfair Display', serif;\n    font-size: 7rem;\n    color: var(--st-gold-bright);\n    line-height: 0;\n    vertical-align: -0.5em;\n    opacity: 0.2;\n    display: block;\n    margin-bottom: -10px;\n  }\n  .st-scripture-text {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n    font-style: italic;\n    font-weight: 300;\n    color: var(--st-cream);\n    line-height: 1.7;\n    margin-bottom: 20px !important;\n  }\n  .st-scripture-ref {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--st-gold-muted);\n  }\n\n  \/* \u2500\u2500\u2500 CTA ROW \u2500\u2500\u2500 *\/\n  .st-cta-row {\n    display: flex;\n    gap: 20px;\n    justify-content: center;\n    flex-wrap: wrap;\n    opacity: 0;\n    animation: stFadeInUp 1s ease forwards 1.6s;\n  }\n\n\n  \/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\n  @keyframes stFadeInDown {\n    from { opacity: 0; transform: translateY(-24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes stFadeInUp {\n    from { opacity: 0; transform: translateY(24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes stFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n  @media (max-width: 900px) {\n    .saint-grid {\n      grid-template-columns: 1fr;\n      text-align: center;\n      gap: 50px;\n    }\n    .saint-content {\n      margin: auto;\n    }\n    .st-info-grid {\n      grid-template-columns: 1fr 1fr;\n    }\n    .st-virtues {\n      justify-content: center;\n    }\n    .saint-frame img {\n      height: 380px;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .saint-section {\n      padding: 70px 0 80px;\n    }\n    .st-info-grid {\n      grid-template-columns: 1fr;\n    }\n    .st-scripture-block {\n      padding: 40px 24px;\n    }\n    .st-rose-wrapper {\n      width: 340px; height: 340px;\n    }\n    .saint-frame img {\n      height: 320px;\n    }\n  }\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--       PATRON SAINT SHRINE SECTION     -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"saint-section\" id=\"patron-saint\">\n\n  <!-- Animated mosaic canvas -->\n  <canvas id=\"stMosaicCanvas\" aria-hidden=\"true\"><\/canvas>\n\n  <!-- Light rays -->\n  <div class=\"st-rays-wrapper\" id=\"stRaysWrapper\" aria-hidden=\"true\"><\/div>\n\n  <!-- Rose window -->\n  <div class=\"st-rose-wrapper\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n      <circle cx=\"200\" cy=\"200\" r=\"190\" stroke=\"#f0c040\" stroke-width=\"1.5\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"150\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"100\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"55\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <g stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\"><\/line>\n        <line x1=\"10\" y1=\"200\" x2=\"390\" y2=\"200\"><\/line>\n        <line x1=\"54\" y1=\"54\" x2=\"346\" y2=\"346\"><\/line>\n        <line x1=\"346\" y1=\"54\" x2=\"54\" y2=\"346\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(30 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(60 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(90 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(120 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(150 200 200)\"><\/line>\n      <\/g>\n      <g fill=\"rgba(240,192,64,0.06)\" stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(0 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(30 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(60 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(90 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(120 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(150 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(180 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(210 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(240 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(270 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(300 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(330 200 200)\"><\/ellipse>\n      <\/g>\n    <\/svg>\n  <\/div>\n\n  <!-- Gold borders -->\n  <div class=\"st-border-left\" aria-hidden=\"true\"><\/div>\n  <div class=\"st-border-right\" aria-hidden=\"true\"><\/div>\n\n  <!-- Floating crosses -->\n  <div id=\"stCrossContainer\" aria-hidden=\"true\"><\/div>\n\n  <!-- \u2500\u2500\u2500 CONTENT \u2500\u2500\u2500 -->\n  <div class=\"saint-container\">\n\n    <!-- Eyebrow -->\n    <div class=\"st-eyebrow\">\n      <span class=\"st-eyebrow-line\"><\/span>\n      <span class=\"st-eyebrow-text\">Patron Saint<\/span>\n      <span class=\"st-eyebrow-line right\"><\/span>\n    <\/div>\n\n    <!-- Headline -->\n    <h2 class=\"saint-headline\">\n      <span class=\"line1\">Santa Barbara<\/span>\n      <span class=\"line2\">Patroness of Our Mission<\/span>\n    <\/h2>\n\n    <!-- Lead -->\n    <p class=\"saint-lead\">\n      Honored as a beacon of courage, unwavering faith, and divine protection,\n      Santa Barbara inspires the faithful of our mission center to stand steadfast\n      in trials, trusting always in God&#8217;s providence and mercy.\n    <\/p>\n\n    <!-- Ornament -->\n    <div class=\"st-ornament\" aria-hidden=\"true\">\n      <span class=\"st-ornament-line\"><\/span>\n      <span>\u2726<\/span>\n      <span>\u271d<\/span>\n      <span>\u2726<\/span>\n      <span class=\"st-ornament-line r\"><\/span>\n    <\/div>\n\n    <!-- Main Grid: Image + Content -->\n    <div class=\"saint-grid\">\n\n      <!-- LEFT: Image Shrine -->\n      <div class=\"saint-image-wrap\">\n        <div class=\"saint-frame\">\n          <img decoding=\"async\" src=\"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-content\/uploads\/sites\/10\/2026\/06\/stabar.jpg\" alt=\"Santa Barbara - Patroness of Faith and Courage\">\n          <div class=\"saint-img-cross\" aria-hidden=\"true\">\u271d<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT: Content -->\n      <div class=\"saint-content\">\n        <span class=\"st-saint-label\">Our Patroness<\/span>\n\n        <h2 class=\"st-saint-title\">\n          Sta. Barbara\n          <span class=\"st-highlight\">Patroness of Faith<\/span>\n        <\/h2>\n\n        <p class=\"st-saint-scripture\">\n          &#8220;I am a handmaid of Christ. I worship only Him.&#8221;\n        <\/p>\n\n        <p class=\"st-saint-text\">\n          Sta. Barbara is venerated across the Catholic world as a model of courage\n          and steadfast faith under persecution. Her unwavering trust in God amidst\n          the gravest trials continues to inspire our community \u2014 reminding every\n          parishioner that no darkness can overcome the light of Christ.\n        <\/p>\n\n        <!-- Info Boxes -->\n        <div class=\"st-info-grid\">\n\n          <div class=\"st-info-box\">\n            <span class=\"st-info-icon\" aria-hidden=\"true\">\ud83d\udd4a\ufe0f<\/span>\n            <span class=\"st-info-label\">Feast Day<\/span>\n            <span class=\"st-info-value\">December 4<\/span>\n            <span class=\"st-info-desc\">Celebrated with solemn Mass and community prayer<\/span>\n          <\/div>\n\n          <div class=\"st-info-box\">\n            <span class=\"st-info-icon\" aria-hidden=\"true\">\u26ea<\/span>\n            <span class=\"st-info-label\">Patronage<\/span>\n            <span class=\"st-info-value\">Against Lightning &amp; Fire<\/span>\n            <span class=\"st-info-desc\">Invoked for protection and safekeeping<\/span>\n          <\/div>\n\n          <div class=\"st-info-box\">\n            <span class=\"st-info-icon\" aria-hidden=\"true\">\ud83d\udcd6<\/span>\n            <span class=\"st-info-label\">Origin<\/span>\n            <span class=\"st-info-value\">3rd Century<\/span>\n            <span class=\"st-info-desc\">Nicomedia, Roman Empire<\/span>\n          <\/div>\n\n          <div class=\"st-info-box\">\n            <span class=\"st-info-icon\" aria-hidden=\"true\">\u2728<\/span>\n            <span class=\"st-info-label\">Symbol<\/span>\n            <span class=\"st-info-value\">Tower &amp; Palm<\/span>\n            <span class=\"st-info-desc\">Representing faith and martyrdom<\/span>\n          <\/div>\n\n        <\/div>\n\n        <!-- Virtue Tags -->\n        <div class=\"st-virtues\">\n          <span class=\"st-virtue-tag\">Courage<\/span>\n          <span class=\"st-virtue-tag\">Faith<\/span>\n          <span class=\"st-virtue-tag\">Protection<\/span>\n          <span class=\"st-virtue-tag\">Martyrdom<\/span>\n          <span class=\"st-virtue-tag\">Devotion<\/span>\n        <\/div>\n\n      <\/div>\n\n    <\/div><!-- \/grid -->\n\n    <!-- Scripture Quote -->\n    <blockquote class=\"st-scripture-block\">\n      <span class=\"st-quote-mark\" aria-hidden=\"true\">&#8220;<\/span>\n      <p class=\"st-scripture-text\">\n        Be on your guard; stand firm in the faith; be courageous; be strong.<br>\n        Do everything in love.\n      <\/p>\n      <footer class=\"st-scripture-ref\">\u2014 1 Corinthians 16:13-14<\/footer>\n    <\/blockquote>\n\n    <!-- CTAs -->\n\n\n  <\/div><!-- \/container -->\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--            SCRIPTS                    -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n\/* \u2500\u2500 1. MOSAIC CANVAS \u2500\u2500 *\/\n(function() {\n  var canvas = document.getElementById('stMosaicCanvas');\n  if(!canvas) return;\n  var ctx    = canvas.getContext('2d');\n  var W, H, tiles = [];\n\n  var COLORS = [\n    'rgba(107,53,184,',\n    'rgba(59,18,120,',\n    'rgba(240,192,64,',\n    'rgba(212,152,42,',\n    'rgba(154,111,42,',\n    'rgba(180,80,200,',\n    'rgba(30,10,60,',\n  ];\n\n  function Tile(x, y, size) {\n    this.x     = x;\n    this.y     = y;\n    this.size  = size;\n    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];\n    this.alpha = Math.random() * 0.6 + 0.1;\n    this.speed = Math.random() * 0.005 + 0.001;\n    this.phase = Math.random() * Math.PI * 2;\n  }\n\n  Tile.prototype.update = function(t) {\n    this.alpha = 0.05 + 0.45 * (0.5 + 0.5 * Math.sin(t * this.speed + this.phase));\n  };\n\n  Tile.prototype.draw = function() {\n    ctx.fillStyle = this.color + this.alpha + ')';\n    ctx.fillRect(this.x + 1, this.y + 1, this.size - 2, this.size - 2);\n  };\n\n  function resize() {\n    W = canvas.width  = canvas.offsetWidth;\n    H = canvas.height = canvas.offsetHeight;\n    tiles = [];\n    var S = 48;\n    for (var x = 0; x < W; x += S) {\n      for (var y = 0; y < H; y += S) {\n        tiles.push(new Tile(x, y, S));\n      }\n    }\n  }\n\n  var t = 0;\n  function loop() {\n    ctx.clearRect(0, 0, W, H);\n    t += 1;\n    for (var i = 0; i < tiles.length; i++) {\n      tiles[i].update(t);\n      tiles[i].draw();\n    }\n    requestAnimationFrame(loop);\n  }\n\n  resize();\n  window.addEventListener('resize', resize);\n  loop();\n})();\n\n\/* \u2500\u2500 2. LIGHT RAYS \u2500\u2500 *\/\n(function() {\n  var wrap = document.getElementById('stRaysWrapper');\n  if(!wrap) return;\n  var count = 14;\n  for (var i = 0; i < count; i++) {\n    var ray   = document.createElement('div');\n    ray.className = 'st-ray';\n    var angle = -40 + (80 \/ count) * i;\n    var left  = 30 + (40 \/ count) * i;\n    ray.style.cssText =\n      'left:' + left + '%;' +\n      'transform:rotate(' + angle + 'deg);' +\n      'animation-delay:' + (i * 0.35).toFixed(2) + 's;' +\n      'animation-duration:' + (4 + Math.random() * 3).toFixed(1) + 's;' +\n      'opacity:' + (0.15 + Math.random() * 0.2) + ';';\n    wrap.appendChild(ray);\n  }\n})();\n\n\/* \u2500\u2500 3. FLOATING CROSS PARTICLES \u2500\u2500 *\/\n(function() {\n  var container = document.getElementById('stCrossContainer');\n  if(!container) return;\n  var symbols = ['\u271d', '\u2726', '\u2727', '\u25c6', '\u2720'];\n\n  function spawn() {\n    var el = document.createElement('div');\n    el.className   = 'st-cross-float';\n    el.textContent = symbols[Math.floor(Math.random() * symbols.length)];\n    el.style.cssText =\n      'left:' + (Math.random() * 95) + '%;' +\n      'bottom:-30px;' +\n      'font-size:' + (8 + Math.random() * 12) + 'px;' +\n      'animation-duration:' + (10 + Math.random() * 8) + 's;' +\n      'animation-delay:' + (Math.random() * 4) + 's;';\n    container.appendChild(el);\n    setTimeout(function() { el.remove(); }, 18000);\n  }\n\n  for (var i = 0; i < 12; i++) {\n    setTimeout(spawn, i * 400);\n  }\n  setInterval(spawn, 1800);\n})();\n\n\/* \u2500\u2500 4. SCROLL-REVEAL INFO BOXES \u2500\u2500 *\/\n(function() {\n  var boxes = document.querySelectorAll('.st-info-box');\n  if(!boxes.length || !('IntersectionObserver' in window)) return;\n\n  var io = new IntersectionObserver(function(entries) {\n    entries.forEach(function(entry) {\n      if(entry.isIntersecting) {\n        var idx = Array.prototype.indexOf.call(boxes, entry.target);\n        setTimeout(function() {\n          entry.target.style.opacity = '1';\n          entry.target.style.transform = 'translateY(0)';\n        }, idx * 120);\n        io.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.15 });\n\n  boxes.forEach(function(box) {\n    box.style.opacity = '0';\n    box.style.transform = 'translateY(24px)';\n    box.style.transition = 'opacity 0.7s ease, transform 0.7s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease';\n    io.observe(box);\n  });\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-c459bfa5 alignfull uagb-is-root-container\">\n<!-- Google Fonts -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&#038;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&#038;family=Inter:wght@300;400;500&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* \u2500\u2500\u2500 SCOPED RESET & BASE \u2500\u2500\u2500 *\/\n  .priest-section,\n  .priest-section *,\n  .priest-section *::before,\n  .priest-section *::after {\n    box-sizing: border-box;\n  }\n\n  .priest-section {\n    --pr-purple-deep: #1e0a3c;\n    --pr-purple-mid:  #3b1278;\n    --pr-purple-glow: #6b35b8;\n    --pr-gold-bright: #f0c040;\n    --pr-gold-warm:   #d4982a;\n    --pr-gold-muted:  #9a6f2a;\n    --pr-cream:       #f9f2e3;\n    --pr-white:       #ffffff;\n    --pr-text-light:  rgba(255,255,255,0.85);\n    --pr-text-muted:  rgba(255,255,255,0.55);\n\n    position: relative;\n    width: 100%;\n    padding: 100px 0 120px;\n    background: linear-gradient(160deg, #1a0533 0%, #2d0f5a 40%, #1a0533 100%);\n    overflow: hidden;\n    color: var(--pr-white);\n    font-family: 'Inter', sans-serif;\n  }\n\n  .priest-section h2,\n  .priest-section h3,\n  .priest-section p {\n    margin: 0;\n    padding: 0;\n  }\n\n  \/* \u2500\u2500\u2500 AMBIENT GLOW \u2500\u2500\u2500 *\/\n  .priest-section::before {\n    content: '';\n    position: absolute;\n    top: -100px; left: 50%;\n    transform: translateX(-50%);\n    width: 900px; height: 600px;\n    background: radial-gradient(ellipse at center, rgba(240,192,64,0.12) 0%, transparent 70%);\n    pointer-events: none;\n    animation: prAmbientPulse 6s ease-in-out infinite;\n  }\n\n  @keyframes prAmbientPulse {\n    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }\n    50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }\n  }\n\n  \/* \u2500\u2500\u2500 MOSAIC CANVAS \u2500\u2500\u2500 *\/\n  #prMosaicCanvas {\n    position: absolute;\n    inset: 0;\n    width: 100%; height: 100%;\n    pointer-events: none;\n    opacity: 0.35;\n  }\n\n  \/* \u2500\u2500\u2500 GOLD BORDERS \u2500\u2500\u2500 *\/\n  .pr-border-left, .pr-border-right {\n    position: absolute;\n    top: 0; bottom: 0;\n    width: 6px;\n    background: linear-gradient(180deg, transparent, var(--pr-gold-bright), var(--pr-gold-warm), transparent);\n    animation: prBorderShimmer 4s ease-in-out infinite alternate;\n  }\n  .pr-border-left  { left: 0; }\n  .pr-border-right { right: 0; animation-delay: 2s; }\n\n  @keyframes prBorderShimmer {\n    from { opacity: 0.4; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 FLOATING CROSS PARTICLES \u2500\u2500\u2500 *\/\n  .pr-cross-float {\n    position: absolute;\n    opacity: 0;\n    animation: prFloatUp 12s ease-in-out infinite;\n    pointer-events: none;\n    font-size: 14px;\n    color: var(--pr-gold-bright);\n    filter: blur(0.5px);\n  }\n  @keyframes prFloatUp {\n    0%   { opacity: 0; transform: translateY(60px) rotate(0deg); }\n    15%  { opacity: 0.5; }\n    80%  { opacity: 0.2; }\n    100% { opacity: 0; transform: translateY(-80px) rotate(20deg); }\n  }\n\n  \/* \u2500\u2500\u2500 ROSE WINDOW \u2500\u2500\u2500 *\/\n  .pr-rose-wrapper {\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 700px; height: 700px;\n    opacity: 0.06;\n    animation: prRoseRotate 80s linear infinite;\n    pointer-events: none;\n  }\n  @keyframes prRoseRotate {\n    from { transform: translate(-50%, -50%) rotate(0deg); }\n    to   { transform: translate(-50%, -50%) rotate(360deg); }\n  }\n\n  \/* \u2500\u2500\u2500 LIGHT RAYS \u2500\u2500\u2500 *\/\n  .pr-rays-wrapper {\n    position: absolute;\n    top: 0; left: 50%;\n    transform: translateX(-50%);\n    width: 100%; height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n  .pr-ray {\n    position: absolute;\n    top: -40px;\n    width: 2px;\n    height: 120%;\n    transform-origin: top center;\n    background: linear-gradient(180deg, rgba(240,192,64,0.22), transparent);\n    animation: prRayPulse 5s ease-in-out infinite;\n  }\n  @keyframes prRayPulse {\n    0%, 100% { opacity: 0.3; }\n    50%      { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 CONTAINER \u2500\u2500\u2500 *\/\n  .priest-container {\n    position: relative;\n    z-index: 10;\n    max-width: 1100px;\n    margin: 0 auto;\n    padding: 0 32px;\n  }\n\n  \/* \u2500\u2500\u2500 EYEBROW \u2500\u2500\u2500 *\/\n  .pr-eyebrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    margin-bottom: 28px;\n    opacity: 0;\n    animation: prFadeInDown 0.9s ease forwards 0.2s;\n  }\n  .pr-eyebrow-line {\n    width: 60px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--pr-gold-bright));\n  }\n  .pr-eyebrow-line.right {\n    background: linear-gradient(90deg, var(--pr-gold-bright), transparent);\n  }\n  .pr-eyebrow-text {\n    font-family: 'Inter', sans-serif;\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.35em;\n    text-transform: uppercase;\n    color: var(--pr-gold-bright);\n  }\n\n  \/* \u2500\u2500\u2500 HEADLINE \u2500\u2500\u2500 *\/\n  .priest-headline {\n    text-align: center;\n    margin-bottom: 16px;\n    opacity: 0;\n    animation: prFadeInDown 1s ease forwards 0.4s;\n  }\n  .priest-headline .line1 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 900;\n    color: var(--pr-white);\n    line-height: 1.1;\n    letter-spacing: -0.01em;\n  }\n  .priest-headline .line2 {\n    display: block;\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.6rem, 5.5vw, 4.4rem);\n    font-weight: 700;\n    font-style: italic;\n    color: var(--pr-gold-bright);\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n  }\n\n  \/* \u2500\u2500\u2500 LEAD \u2500\u2500\u2500 *\/\n  .priest-lead {\n    text-align: center;\n    max-width: 680px;\n    margin: 0 auto 48px !important;\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.05rem, 1.8vw, 1.25rem);\n    font-weight: 300;\n    color: var(--pr-text-light);\n    line-height: 1.8;\n    letter-spacing: 0.01em;\n    opacity: 0;\n    animation: prFadeInDown 1s ease forwards 0.6s;\n  }\n\n  \/* \u2500\u2500\u2500 ORNAMENT \u2500\u2500\u2500 *\/\n  .pr-ornament {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 14px;\n    margin-bottom: 80px;\n    opacity: 0;\n    animation: prFadeIn 1s ease forwards 0.8s;\n  }\n  .pr-ornament span {\n    font-size: 18px;\n    color: var(--pr-gold-bright);\n    line-height: 1;\n  }\n  .pr-ornament-line {\n    width: 80px; height: 1px;\n    background: linear-gradient(90deg, transparent, var(--pr-gold-muted));\n  }\n  .pr-ornament-line.r {\n    background: linear-gradient(90deg, var(--pr-gold-muted), transparent);\n  }\n\n  \/* \u2500\u2500\u2500 MAIN GRID: CONTENT LEFT + IMAGE RIGHT \u2500\u2500\u2500 *\/\n  .priest-grid {\n    display: grid;\n    grid-template-columns: 1.2fr 0.8fr;\n    gap: 70px;\n    align-items: center;\n    margin-bottom: 80px;\n    opacity: 0;\n    animation: prFadeInUp 1s ease forwards 1s;\n  }\n\n  \/* \u2500\u2500\u2500 LEFT: CONTENT \u2500\u2500\u2500 *\/\n  .priest-content {\n    max-width: 580px;\n  }\n\n  .pr-name-title {\n    font-family: 'Playfair Display', serif !important;\n    font-size: clamp(1.8rem, 2.8vw, 2.8rem) !important;\n    font-weight: 900 !important;\n    line-height: 1.15 !important;\n    color: var(--pr-white) !important;\n    margin: 0 0 6px 0 !important;\n  }\n\n  .pr-name-title .pr-highlight {\n    display: block;\n    color: var(--pr-gold-bright) !important;\n    font-weight: 700 !important;\n    font-style: italic !important;\n    text-shadow: 0 0 20px rgba(240,192,64,0.25);\n  }\n\n  .pr-shepherd {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 1.05rem;\n    font-style: italic;\n    font-weight: 400;\n    color: var(--pr-gold-muted);\n    margin-bottom: 24px;\n    line-height: 1.5;\n  }\n\n  .pr-bio-text {\n    font-family: 'Cormorant Garamond', serif !important;\n    color: var(--pr-text-light) !important;\n    font-size: 1.1rem !important;\n    font-weight: 300 !important;\n    line-height: 1.9 !important;\n    margin-bottom: 32px !important;\n  }\n\n  \/* \u2500\u2500\u2500 DETAIL CARDS \u2500\u2500\u2500 *\/\n  .pr-details-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 32px;\n  }\n\n  .pr-detail-card {\n    position: relative;\n    padding: 22px 20px;\n    border-radius: 4px;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(240,192,64,0.15);\n    overflow: hidden;\n    transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.4s ease;\n  }\n  .pr-detail-card:hover {\n    border-color: rgba(240,192,64,0.45);\n    background: rgba(240,192,64,0.06);\n    box-shadow: 0 0 30px rgba(240,192,64,0.1), inset 0 0 20px rgba(240,192,64,0.03);\n    transform: translateY(-4px);\n  }\n\n  \/* Sweep effect *\/\n  .pr-detail-card::before {\n    content: '';\n    position: absolute;\n    top: 0; left: -100%;\n    width: 60%; height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(240,192,64,0.08), transparent);\n    transition: left 0.6s ease;\n  }\n  .pr-detail-card:hover::before { left: 160%; }\n\n  \/* Top accent *\/\n  .pr-detail-card::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 20%; right: 20%;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--pr-gold-bright), transparent);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n  }\n  .pr-detail-card:hover::after { opacity: 1; }\n\n  .pr-detail-icon {\n    font-size: 1.4rem;\n    margin-bottom: 8px;\n    display: block;\n    filter: drop-shadow(0 0 8px rgba(240,192,64,0.4));\n  }\n\n  .pr-detail-label {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.65rem;\n    font-weight: 500;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: var(--pr-gold-muted);\n    margin-bottom: 4px;\n    display: block;\n  }\n\n  .pr-detail-value {\n    font-family: 'Playfair Display', serif;\n    font-size: 1rem;\n    font-weight: 700;\n    color: var(--pr-gold-bright);\n    display: block;\n    line-height: 1.4;\n  }\n\n  .pr-detail-desc {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 0.9rem;\n    font-weight: 300;\n    color: var(--pr-text-light);\n    margin-top: 4px;\n    display: block;\n    line-height: 1.5;\n  }\n\n  \/* \u2500\u2500\u2500 VIRTUE \/ ROLE TAGS \u2500\u2500\u2500 *\/\n  .pr-tags {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n\n  .pr-tag {\n    display: inline-block;\n    padding: 8px 20px;\n    border-radius: 50px;\n    background: rgba(240,192,64,0.08);\n    border: 1px solid rgba(240,192,64,0.2);\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    font-weight: 500;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--pr-gold-bright);\n    transition: all 0.3s ease;\n  }\n  .pr-tag:hover {\n    background: rgba(240,192,64,0.15);\n    border-color: rgba(240,192,64,0.5);\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(240,192,64,0.15);\n  }\n\n  \/* \u2500\u2500\u2500 RIGHT: IMAGE SHRINE \u2500\u2500\u2500 *\/\n  .priest-image-wrap {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n  }\n\n  \/* Halo glow *\/\n  .priest-image-wrap::before {\n    content: '';\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 85%;\n    height: 85%;\n    border-radius: 30px;\n    background: radial-gradient(ellipse, rgba(240,192,64,0.12) 0%, transparent 70%);\n    animation: prHaloPulse 5s ease-in-out infinite;\n    pointer-events: none;\n  }\n  @keyframes prHaloPulse {\n    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }\n    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }\n  }\n\n  .priest-frame {\n    position: relative;\n    width: 100%;\n    max-width: 380px;\n    padding: 14px;\n    border-radius: 24px;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(240,192,64,0.2);\n    animation: prFloatPriest 6s ease-in-out infinite;\n    transition: border-color 0.4s ease, box-shadow 0.4s ease;\n  }\n  .priest-frame:hover {\n    border-color: rgba(240,192,64,0.5);\n    box-shadow: 0 0 50px rgba(240,192,64,0.15), 0 0 100px rgba(124,58,237,0.08);\n  }\n\n  \/* Gold glow border *\/\n  .priest-frame::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    border-radius: 24px;\n    border: 1px solid rgba(240,192,64,0.3);\n    box-shadow: 0 0 30px rgba(240,192,64,0.2);\n    pointer-events: none;\n    transition: box-shadow 0.4s ease;\n  }\n  .priest-frame:hover::before {\n    box-shadow: 0 0 50px rgba(240,192,64,0.35);\n  }\n\n  \/* Top accent *\/\n  .priest-frame::after {\n    content: '';\n    position: absolute;\n    top: 0; left: 15%; right: 15%;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, var(--pr-gold-bright), transparent);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n  }\n  .priest-frame:hover::after { opacity: 1; }\n\n  @keyframes prFloatPriest {\n    0%, 100% { transform: translateY(0); }\n    50%      { transform: translateY(-14px); }\n  }\n\n  .priest-frame img {\n    width: 100%;\n    height: 460px;\n    object-fit: cover;\n    border-radius: 18px;\n    display: block;\n    filter: contrast(1.05) brightness(1.05) saturate(1.05);\n    transition: filter 0.4s ease;\n  }\n  .priest-frame:hover img {\n    filter: contrast(1.08) brightness(1.1) saturate(1.1);\n  }\n\n  \/* Cross badge on image *\/\n  .priest-img-cross {\n    position: absolute;\n    top: -10px; left: -10px;\n    width: 36px; height: 36px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, var(--pr-gold-warm), var(--pr-gold-bright));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    color: var(--pr-purple-deep);\n    box-shadow: 0 4px 20px rgba(240,192,64,0.4);\n    z-index: 5;\n    animation: prCrossPulse 3s ease-in-out infinite alternate;\n  }\n  @keyframes prCrossPulse {\n    from { box-shadow: 0 4px 20px rgba(240,192,64,0.3); }\n    to   { box-shadow: 0 4px 35px rgba(240,192,64,0.6); }\n  }\n\n  \/* Name plate beneath image *\/\n  .priest-nameplate {\n    position: absolute;\n    bottom: -18px;\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 10px 28px;\n    background: linear-gradient(135deg, var(--pr-gold-warm), var(--pr-gold-bright));\n    border-radius: 50px;\n    white-space: nowrap;\n    box-shadow: 0 4px 24px rgba(240,192,64,0.35);\n    z-index: 6;\n  }\n  .priest-nameplate span {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.7rem;\n    font-weight: 600;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    color: var(--pr-purple-deep);\n  }\n\n  \/* \u2500\u2500\u2500 SCRIPTURE QUOTE \u2500\u2500\u2500 *\/\n  .pr-scripture-block {\n    position: relative;\n    text-align: center;\n    padding: 56px 60px;\n    border: 1px solid rgba(240,192,64,0.15);\n    background: rgba(240,192,64,0.03);\n    margin-bottom: 72px;\n    overflow: hidden;\n    opacity: 0;\n    animation: prFadeIn 1s ease forwards 1.4s;\n  }\n  .pr-scripture-block::before,\n  .pr-scripture-block::after {\n    content: '';\n    position: absolute;\n    width: 60px; height: 60px;\n    border-color: var(--pr-gold-bright);\n    border-style: solid;\n    opacity: 0.4;\n  }\n  .pr-scripture-block::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; }\n  .pr-scripture-block::after  { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }\n\n  .pr-quote-mark {\n    font-family: 'Playfair Display', serif;\n    font-size: 7rem;\n    color: var(--pr-gold-bright);\n    line-height: 0;\n    vertical-align: -0.5em;\n    opacity: 0.2;\n    display: block;\n    margin-bottom: -10px;\n  }\n  .pr-scripture-text {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(1.2rem, 2.2vw, 1.6rem);\n    font-style: italic;\n    font-weight: 300;\n    color: var(--pr-cream);\n    line-height: 1.7;\n    margin-bottom: 20px !important;\n  }\n  .pr-scripture-ref {\n    font-family: 'Inter', sans-serif;\n    font-size: 0.75rem;\n    letter-spacing: 0.25em;\n    text-transform: uppercase;\n    color: var(--pr-gold-muted);\n  }\n\n  \/* \u2500\u2500\u2500 CTA ROW \u2500\u2500\u2500 *\/\n  .pr-cta-row {\n    display: flex;\n    gap: 20px;\n    justify-content: center;\n    flex-wrap: wrap;\n    opacity: 0;\n    animation: prFadeInUp 1s ease forwards 1.6s;\n  }\n\n  \n\n  \/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\n  @keyframes prFadeInDown {\n    from { opacity: 0; transform: translateY(-24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes prFadeInUp {\n    from { opacity: 0; transform: translateY(24px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n  @keyframes prFadeIn {\n    from { opacity: 0; }\n    to   { opacity: 1; }\n  }\n\n  \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n  @media (max-width: 900px) {\n    .priest-grid {\n      grid-template-columns: 1fr;\n      text-align: center;\n      gap: 60px;\n    }\n    .priest-content {\n      margin: auto;\n      order: 2;\n    }\n    .priest-image-wrap {\n      order: 1;\n    }\n    .pr-details-grid {\n      grid-template-columns: 1fr 1fr;\n    }\n    .pr-tags {\n      justify-content: center;\n    }\n    .priest-frame img {\n      height: 380px;\n    }\n  }\n\n  @media (max-width: 600px) {\n    .priest-section {\n      padding: 70px 0 80px;\n    }\n    .pr-details-grid {\n      grid-template-columns: 1fr;\n    }\n    .pr-scripture-block {\n      padding: 40px 24px;\n    }\n    .pr-rose-wrapper {\n      width: 340px; height: 340px;\n    }\n    .priest-frame img {\n      height: 340px;\n    }\n    .priest-nameplate {\n      padding: 8px 20px;\n    }\n    .priest-nameplate span {\n      font-size: 0.6rem;\n    }\n  }\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--        PARISH PRIEST SECTION          -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"priest-section\" id=\"parish-priest\">\n\n  <!-- Animated mosaic canvas -->\n  <canvas id=\"prMosaicCanvas\" aria-hidden=\"true\"><\/canvas>\n\n  <!-- Light rays -->\n  <div class=\"pr-rays-wrapper\" id=\"prRaysWrapper\" aria-hidden=\"true\"><\/div>\n\n  <!-- Rose window -->\n  <div class=\"pr-rose-wrapper\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n      <circle cx=\"200\" cy=\"200\" r=\"190\" stroke=\"#f0c040\" stroke-width=\"1.5\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"150\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"100\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"55\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <g stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\"><\/line>\n        <line x1=\"10\" y1=\"200\" x2=\"390\" y2=\"200\"><\/line>\n        <line x1=\"54\" y1=\"54\" x2=\"346\" y2=\"346\"><\/line>\n        <line x1=\"346\" y1=\"54\" x2=\"54\" y2=\"346\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(30 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(60 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(90 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(120 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(150 200 200)\"><\/line>\n      <\/g>\n      <g fill=\"rgba(240,192,64,0.06)\" stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(0 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(30 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(60 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(90 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(120 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(150 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(180 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(210 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(240 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(270 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(300 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(330 200 200)\"><\/ellipse>\n      <\/g>\n    <\/svg>\n  <\/div>\n\n  <!-- Gold borders -->\n  <div class=\"pr-border-left\" aria-hidden=\"true\"><\/div>\n  <div class=\"pr-border-right\" aria-hidden=\"true\"><\/div>\n\n  <!-- Floating crosses -->\n  <div id=\"prCrossContainer\" aria-hidden=\"true\"><\/div>\n\n  <!-- \u2500\u2500\u2500 CONTENT \u2500\u2500\u2500 -->\n  <div class=\"priest-container\">\n\n    <!-- Eyebrow -->\n    <div class=\"pr-eyebrow\">\n      <span class=\"pr-eyebrow-line\"><\/span>\n      <span class=\"pr-eyebrow-text\">Parish Priest<\/span>\n      <span class=\"pr-eyebrow-line right\"><\/span>\n    <\/div>\n\n    <!-- Headline -->\n    <h2 class=\"priest-headline\">\n      <span class=\"line1\">Shepherd of Our<\/span>\n      <span class=\"line2\">Mission Community<\/span>\n    <\/h2>\n\n    <!-- Lead -->\n    <p class=\"priest-lead\">\n      Guided by the Holy Spirit and rooted in pastoral love, our parish priest\n      shepherds the faithful of Sta. Barbara Mission Center \u2014 celebrating the sacraments,\n      nurturing souls, and building a community alive in Christ.\n    <\/p>\n\n    <!-- Ornament -->\n    <div class=\"pr-ornament\" aria-hidden=\"true\">\n      <span class=\"pr-ornament-line\"><\/span>\n      <span>\u2726<\/span>\n      <span>\u271d<\/span>\n      <span>\u2726<\/span>\n      <span class=\"pr-ornament-line r\"><\/span>\n    <\/div>\n\n    <!-- Main Grid -->\n    <div class=\"priest-grid\">\n\n      <!-- LEFT: Content -->\n      <div class=\"priest-content\">\n\n        <h2 class=\"pr-name-title\">\n          Rev. Fr.\n          <span class=\"pr-highlight\">Ronelo A. Meude<\/span>\n        <\/h2>\n\n        <p class=\"pr-shepherd\">\n          Shepherd of the Sta. Barbara Mission Center\n        <\/p>\n\n        <p class=\"pr-bio-text\">\n          Rev. Fr. Ronelo A. Meude serves as the spiritual father and shepherd of our\n          community, guiding the faithful through the sacraments, pastoral care, and\n          mission work. His leadership strengthens the faith life of the parish and\n          nurtures a Christ-centered community rooted in prayer, service, and love.\n          With a priestly heart dedicated to the Gospel, he walks alongside every\n          parishioner \u2014 from the youngest catechumen to the eldest elder \u2014 fostering\n          a spirit of unity, compassion, and unwavering devotion to Christ.\n        <\/p>\n\n        <!-- Detail Cards -->\n        <div class=\"pr-details-grid\">\n\n          <div class=\"pr-detail-card\">\n            <span class=\"pr-detail-icon\" aria-hidden=\"true\">\u26ea<\/span>\n            <span class=\"pr-detail-label\">Role<\/span>\n            <span class=\"pr-detail-value\">Parish Priest<\/span>\n            <span class=\"pr-detail-desc\">Spiritual head of the mission center<\/span>\n          <\/div>\n\n          <div class=\"pr-detail-card\">\n            <span class=\"pr-detail-icon\" aria-hidden=\"true\">\ud83d\udd4a\ufe0f<\/span>\n            <span class=\"pr-detail-label\">Mission<\/span>\n            <span class=\"pr-detail-value\">Guidance &amp; Service<\/span>\n            <span class=\"pr-detail-desc\">Leading the faithful in worship and growth<\/span>\n          <\/div>\n\n          <div class=\"pr-detail-card\">\n            <span class=\"pr-detail-icon\" aria-hidden=\"true\">\ud83d\udcd6<\/span>\n            <span class=\"pr-detail-label\">Ministry<\/span>\n            <span class=\"pr-detail-value\">Sacramental Life<\/span>\n            <span class=\"pr-detail-desc\">Baptism, Mass, Confession, Anointing<\/span>\n          <\/div>\n\n          <div class=\"pr-detail-card\">\n            <span class=\"pr-detail-icon\" aria-hidden=\"true\">\u2728<\/span>\n            <span class=\"pr-detail-label\">Devotion<\/span>\n            <span class=\"pr-detail-value\">Pastoral Care<\/span>\n            <span class=\"pr-detail-desc\">Counseling, visitation, prayer support<\/span>\n          <\/div>\n\n        <\/div>\n\n        <!-- Tags -->\n        <div class=\"pr-tags\">\n          <span class=\"pr-tag\">Shepherd<\/span>\n          <span class=\"pr-tag\">Teacher<\/span>\n          <span class=\"pr-tag\">Priest<\/span>\n          <span class=\"pr-tag\">Servant Leader<\/span>\n        <\/div>\n\n      <\/div>\n\n      <!-- RIGHT: Image -->\n      <div class=\"priest-image-wrap\">\n        <div class=\"priest-frame\">\n          <img decoding=\"async\" src=\"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-content\/uploads\/sites\/10\/2026\/06\/stabar.jpg\" alt=\"Rev. Fr. Ronelo A. Meude - Parish Priest of Sta. Barbara Mission Center\">\n          <div class=\"priest-img-cross\" aria-hidden=\"true\">\u271d<\/div>\n          <div class=\"priest-nameplate\">\n            <span>Fr. Ronelo A. Meude<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div><!-- \/grid -->\n\n    <!-- Scripture Quote -->\n    <blockquote class=\"pr-scripture-block\">\n      <span class=\"pr-quote-mark\" aria-hidden=\"true\">\"<\/span>\n      <p class=\"pr-scripture-text\">\n        Feed my sheep. Truly, truly, I say to you, when you were younger,\n        you used to dress yourself and walk wherever you wanted; but when you grow old,\n        you will stretch out your hands, and someone else will dress you\n        and bring you where you do not want to go.\n      <\/p>\n      <footer class=\"pr-scripture-ref\">\u2014 John 21:17<\/footer>\n    <\/blockquote>\n\n    <!-- CTAs -->\n   \n\n  <\/div><!-- \/container -->\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!--            SCRIPTS                    -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n\/* \u2500\u2500 1. MOSAIC CANVAS \u2500\u2500 *\/\n(function() {\n  var canvas = document.getElementById('prMosaicCanvas');\n  if(!canvas) return;\n  var ctx    = canvas.getContext('2d');\n  var W, H, tiles = [];\n\n  var COLORS = [\n    'rgba(107,53,184,',\n    'rgba(59,18,120,',\n    'rgba(240,192,64,',\n    'rgba(212,152,42,',\n    'rgba(154,111,42,',\n    'rgba(180,80,200,',\n    'rgba(30,10,60,',\n  ];\n\n  function Tile(x, y, size) {\n    this.x     = x;\n    this.y     = y;\n    this.size  = size;\n    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];\n    this.alpha = Math.random() * 0.6 + 0.1;\n    this.speed = Math.random() * 0.005 + 0.001;\n    this.phase = Math.random() * Math.PI * 2;\n  }\n\n  Tile.prototype.update = function(t) {\n    this.alpha = 0.05 + 0.45 * (0.5 + 0.5 * Math.sin(t * this.speed + this.phase));\n  };\n\n  Tile.prototype.draw = function() {\n    ctx.fillStyle = this.color + this.alpha + ')';\n    ctx.fillRect(this.x + 1, this.y + 1, this.size - 2, this.size - 2);\n  };\n\n  function resize() {\n    W = canvas.width  = canvas.offsetWidth;\n    H = canvas.height = canvas.offsetHeight;\n    tiles = [];\n    var S = 48;\n    for (var x = 0; x < W; x += S) {\n      for (var y = 0; y < H; y += S) {\n        tiles.push(new Tile(x, y, S));\n      }\n    }\n  }\n\n  var t = 0;\n  function loop() {\n    ctx.clearRect(0, 0, W, H);\n    t += 1;\n    for (var i = 0; i < tiles.length; i++) {\n      tiles[i].update(t);\n      tiles[i].draw();\n    }\n    requestAnimationFrame(loop);\n  }\n\n  resize();\n  window.addEventListener('resize', resize);\n  loop();\n})();\n\n\/* \u2500\u2500 2. LIGHT RAYS \u2500\u2500 *\/\n(function() {\n  var wrap = document.getElementById('prRaysWrapper');\n  if(!wrap) return;\n  var count = 14;\n  for (var i = 0; i < count; i++) {\n    var ray   = document.createElement('div');\n    ray.className = 'pr-ray';\n    var angle = -40 + (80 \/ count) * i;\n    var left  = 30 + (40 \/ count) * i;\n    ray.style.cssText =\n      'left:' + left + '%;' +\n      'transform:rotate(' + angle + 'deg);' +\n      'animation-delay:' + (i * 0.35).toFixed(2) + 's;' +\n      'animation-duration:' + (4 + Math.random() * 3).toFixed(1) + 's;' +\n      'opacity:' + (0.15 + Math.random() * 0.2) + ';';\n    wrap.appendChild(ray);\n  }\n})();\n\n\/* \u2500\u2500 3. FLOATING CROSS PARTICLES \u2500\u2500 *\/\n(function() {\n  var container = document.getElementById('prCrossContainer');\n  if(!container) return;\n  var symbols = ['\u271d', '\u2726', '\u2727', '\u25c6', '\u2720'];\n\n  function spawn() {\n    var el = document.createElement('div');\n    el.className   = 'pr-cross-float';\n    el.textContent = symbols[Math.floor(Math.random() * symbols.length)];\n    el.style.cssText =\n      'left:' + (Math.random() * 95) + '%;' +\n      'bottom:-30px;' +\n      'font-size:' + (8 + Math.random() * 12) + 'px;' +\n      'animation-duration:' + (10 + Math.random() * 8) + 's;' +\n      'animation-delay:' + (Math.random() * 4) + 's;';\n    container.appendChild(el);\n    setTimeout(function() { el.remove(); }, 18000);\n  }\n\n  for (var i = 0; i < 12; i++) {\n    setTimeout(spawn, i * 400);\n  }\n  setInterval(spawn, 1800);\n})();\n\n\/* \u2500\u2500 4. SCROLL-REVEAL DETAIL CARDS \u2500\u2500 *\/\n(function() {\n  var cards = document.querySelectorAll('.pr-detail-card');\n  if(!cards.length || !('IntersectionObserver' in window)) return;\n\n  var io = new IntersectionObserver(function(entries) {\n    entries.forEach(function(entry) {\n      if(entry.isIntersecting) {\n        var idx = Array.prototype.indexOf.call(cards, entry.target);\n        setTimeout(function() {\n          entry.target.style.opacity = '1';\n          entry.target.style.transform = 'translateY(0)';\n        }, idx * 120);\n        io.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.15 });\n\n  cards.forEach(function(card) {\n    card.style.opacity = '0';\n    card.style.transform = 'translateY(24px)';\n    card.style.transition = 'opacity 0.7s ease, transform 0.7s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease';\n    io.observe(card);\n  });\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Who We Are Overview of the STA Barbara Mission Center Nestled in the heart of Brgy. Casasahan, Gumaca, Quezon, the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","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":"","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":""}},"slim_seo":{"title":"About Us - STA Barbara Mission Center","description":"Who We Are Overview of the STA Barbara Mission Center Nestled in the heart of Brgy. Casasahan, Gumaca, Quezon, the STA Barbara Mission Center stands as a living"},"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Everest Co","author_link":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/blog\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":"Who We Are Overview of the STA Barbara Mission Center Nestled in the heart of Brgy. Casasahan, Gumaca, Quezon, the [&hellip;]","_links":{"self":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":41,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":708,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/18\/revisions\/708"}],"wp:attachment":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}