{"id":6,"date":"2026-06-08T05:22:26","date_gmt":"2026-06-08T05:22:26","guid":{"rendered":"https:\/\/demo5.yinwoodweb.com\/malaya\/?page_id=6"},"modified":"2026-07-22T13:29:46","modified_gmt":"2026-07-22T05:29:46","slug":"home","status":"publish","type":"page","link":"https:\/\/demo5.yinwoodweb.com\/malaya\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-9aac9aaf alignfull uagb-is-root-container\">\n<section class=\"parish-hero\">\n\n    <!-- PARTICLE CANVAS -->\n    <canvas id=\"particleCanvas\"><\/canvas>\n\n    <div class=\"overlay\"><\/div>\n\n    <div class=\"hero-container\">\n\n        <div class=\"hero-content\">\n\n            <span class=\"parish-tag\">\n                Diocese of Gumaca\n            <\/span>\n\n            <h1>\n                St. Michael<br>\n                The Archangel Mission Center\n            <\/h1>\n\n            <div class=\"gold-line\"><\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\nhtml,\nbody {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n}\n\n.site,\n.site-content,\n.content-area,\n.entry-content,\n.wp-site-blocks,\n.wp-block-group {\n    margin: 0 !important;\n    padding: 0 !important;\n    max-width: 100% !important;\n}\n\n\/* -----------------------------\nFONT\n------------------------------ *\/\n\n.parish-hero,\n.parish-hero * {\n    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;\n}\n\n\/* -----------------------------\nFULL WIDTH HERO\n------------------------------ *\/\n\n.parish-hero {\n    position: relative;\n    width: 100vw;\n    margin-left: calc(50% - 50vw);\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background-image: url('https:\/\/demo5.yinwoodweb.com\/malaya\/wp-content\/uploads\/sites\/8\/2026\/06\/St.-Michael-the-Archangel-powerful-angelic-warrior-with-wings-holding-a-sword-in-traditional-religious-iconography-style-1.png');\n    background-size: cover;\n    background-position: center;\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n}\n\n\/* -----------------------------\nPARTICLE CANVAS\n------------------------------ *\/\n\n#particleCanvas {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    pointer-events: none;\n}\n\n\/* -----------------------------\nOVERLAY\n------------------------------ *\/\n\n.overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    background:\n        linear-gradient(\n            135deg,\n            rgba(60, 8, 10, .94),\n            rgba(130, 22, 28, .82),\n            rgba(185, 140, 40, .22)\n        );\n}\n\n\/* -----------------------------\nCONTAINER\n------------------------------ *\/\n\n.hero-container {\n    width: 100%;\n    max-width: 1280px;\n    padding: 100px 40px;\n    position: relative;\n    z-index: 3;\n}\n\n\/* -----------------------------\nCONTENT\n------------------------------ *\/\n\n.hero-content {\n    text-align: center;\n    animation: fadeUp 1s ease;\n}\n\n\/* -----------------------------\nTAG\n------------------------------ *\/\n\n.parish-tag {\n    display: inline-flex;\n    padding: 12px 28px;\n    background: rgba(255, 255, 255, .10);\n    backdrop-filter: blur(18px);\n    border-radius: 999px;\n    border: 1px solid rgba(255, 255, 255, .15);\n    color: #fff;\n    font-size: 14px;\n    font-weight: 600;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n    margin-bottom: 35px;\n}\n\n\/* -----------------------------\nTITLE - EVEN GRADIENT ON ALL LINES\n------------------------------ *\/\n\n.hero-content h1 {\n    font-size: clamp(75px, 8vw, 110px);\n    line-height: .95;\n    font-weight: 800;\n    margin-bottom: 25px;\n    background: linear-gradient(\n        180deg,\n        #f8dfe4 0%,\n        #f5d0d7 10%,\n        #f0bfc9 20%,\n        #e9a9b7 30%,\n        #e299aa 40%,\n        #da869a 50%,\n        #d2758c 60%,\n        #ca6680 70%,\n        #c25874 80%,\n        #ba4a68 90%,\n        #b33e5e 100%\n    );\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .45));\n}\n\n\/* -----------------------------\nLINE\n------------------------------ *\/\n\n.gold-line {\n    width: 150px;\n    height: 4px;\n    margin: 0 auto;\n    border-radius: 999px;\n    background: linear-gradient(to right, transparent, #D4AF37, transparent);\n}\n\n\/* -----------------------------\nANIMATIONS\n------------------------------ *\/\n\n@keyframes fadeUp {\n    from {\n        opacity: 0;\n        transform: translateY(30px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n\/* -----------------------------\nTABLET\n------------------------------ *\/\n\n@media (max-width: 1024px) {\n    .hero-container {\n        padding: 80px 35px;\n    }\n    .hero-content h1 {\n        font-size: 80px;\n    }\n}\n\n\/* -----------------------------\nMOBILE\n------------------------------ *\/\n\n@media (max-width: 768px) {\n    .parish-hero {\n        background-attachment: scroll;\n    }\n    .hero-container {\n        padding: 70px 20px;\n    }\n    .hero-content h1 {\n        font-size: 60px;\n    }\n}\n\n\/* -----------------------------\nSMALL MOBILE\n------------------------------ *\/\n\n@media (max-width: 480px) {\n    .hero-container {\n        padding: 60px 15px;\n    }\n    .hero-content h1 {\n        font-size: 48px;\n    }\n    .parish-tag {\n        font-size: 11px;\n        padding: 10px 18px;\n    }\n}\n\n<\/style>\n\n<script>\n(function () {\n    const canvas = document.getElementById('particleCanvas');\n    const ctx = canvas.getContext('2d');\n\n    let W, H;\n    let particles = [];\n\n    function resize() {\n        const hero = canvas.parentElement;\n        W = canvas.width = hero.offsetWidth;\n        H = canvas.height = hero.offsetHeight;\n    }\n\n    class Cloud {\n        constructor() { this.reset(true); }\n        reset(initial) {\n            this.x = Math.random() * W;\n            this.y = initial ? Math.random() * H : H + 60 + Math.random() * 120;\n            this.size = 60 + Math.random() * 120;\n            this.speedY = 0.15 + Math.random() * 0.35;\n            this.speedX = (Math.random() - 0.5) * 0.3;\n            this.opacity = 0.04 + Math.random() * 0.08;\n            this.wobbleAmp = 10 + Math.random() * 20;\n            this.wobbleSpeed = 0.003 + Math.random() * 0.005;\n            this.phase = Math.random() * Math.PI * 2;\n        }\n        draw(t) {\n            ctx.save();\n            const wobbleX = Math.sin(t * this.wobbleSpeed + this.phase) * this.wobbleAmp;\n            const cx = this.x + wobbleX;\n            const cy = this.y;\n            ctx.globalAlpha = this.opacity;\n            const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, this.size);\n            gradient.addColorStop(0, 'rgba(255,255,255,0.6)');\n            gradient.addColorStop(0.4, 'rgba(255,255,255,0.3)');\n            gradient.addColorStop(1, 'rgba(255,255,255,0)');\n            ctx.fillStyle = gradient;\n            const s = this.size;\n            ctx.beginPath(); ctx.ellipse(cx, cy, s * 0.7, s * 0.35, 0, 0, Math.PI * 2); ctx.fill();\n            ctx.beginPath(); ctx.ellipse(cx - s * 0.3, cy - s * 0.1, s * 0.45, s * 0.28, 0, 0, Math.PI * 2); ctx.fill();\n            ctx.beginPath(); ctx.ellipse(cx + s * 0.25, cy - s * 0.08, s * 0.5, s * 0.3, 0, 0, Math.PI * 2); ctx.fill();\n            ctx.beginPath(); ctx.ellipse(cx + s * 0.05, cy + s * 0.12, s * 0.55, s * 0.25, 0, 0, Math.PI * 2); ctx.fill();\n            ctx.restore();\n        }\n        update(t) {\n            this.y -= this.speedY;\n            this.x += this.speedX;\n            if (this.y < -this.size * 1.5) this.reset(false);\n            this.draw(t);\n        }\n    }\n\n    class Angel {\n        constructor() { this.reset(true); }\n        reset(initial) {\n            this.x = Math.random() * W;\n            this.y = initial ? Math.random() * H : H + 80 + Math.random() * 100;\n            this.size = 14 + Math.random() * 18;\n            this.speedY = 0.3 + Math.random() * 0.6;\n            this.speedX = (Math.random() - 0.5) * 0.4;\n            this.opacity = 0.12 + Math.random() * 0.18;\n            this.wobbleAmp = 15 + Math.random() * 25;\n            this.wobbleSpeed = 0.004 + Math.random() * 0.006;\n            this.phase = Math.random() * Math.PI * 2;\n            this.wingPhase = Math.random() * Math.PI * 2;\n            this.wingSpeed = 0.02 + Math.random() * 0.025;\n            this.glowPulse = Math.random() * Math.PI * 2;\n        }\n        draw(t) {\n            const wobbleX = Math.sin(t * this.wobbleSpeed + this.phase) * this.wobbleAmp;\n            const cx = this.x + wobbleX;\n            const cy = this.y;\n            const s = this.size;\n            const wingAngle = Math.sin(t * this.wingSpeed + this.wingPhase) * 0.35;\n            ctx.save();\n            ctx.globalAlpha = this.opacity;\n            const glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, s * 2.5);\n            const pulseAlpha = 0.15 + Math.sin(t * 0.003 + this.glowPulse) * 0.08;\n            glow.addColorStop(0, `rgba(212,175,55,${pulseAlpha})`);\n            glow.addColorStop(1, 'rgba(212,175,55,0)');\n            ctx.fillStyle = glow;\n            ctx.beginPath(); ctx.arc(cx, cy, s * 2.5, 0, Math.PI * 2); ctx.fill();\n            ctx.globalAlpha = this.opacity;\n            ctx.fillStyle = 'rgba(255,255,255,0.9)';\n            ctx.strokeStyle = 'rgba(212,175,55,0.6)';\n            ctx.lineWidth = 1;\n            ctx.beginPath(); ctx.arc(cx, cy - s * 0.15, s * 0.22, 0, Math.PI * 2); ctx.fill();\n            ctx.beginPath();\n            ctx.moveTo(cx - s * 0.18, cy + s * 0.05);\n            ctx.lineTo(cx - s * 0.28, cy + s * 0.85);\n            ctx.lineTo(cx + s * 0.28, cy + s * 0.85);\n            ctx.lineTo(cx + s * 0.18, cy + s * 0.05);\n            ctx.closePath(); ctx.fill();\n            ctx.save();\n            ctx.translate(cx - s * 0.15, cy - s * 0.05);\n            ctx.rotate(-0.3 + wingAngle);\n            ctx.beginPath();\n            ctx.moveTo(0, 0);\n            ctx.bezierCurveTo(-s * 0.9, -s * 0.9, -s * 1.3, -s * 0.3, -s * 0.2, s * 0.3);\n            ctx.closePath(); ctx.fill(); ctx.restore();\n            ctx.save();\n            ctx.translate(cx + s * 0.15, cy - s * 0.05);\n            ctx.rotate(0.3 - wingAngle);\n            ctx.beginPath();\n            ctx.moveTo(0, 0);\n            ctx.bezierCurveTo(s * 0.9, -s * 0.9, s * 1.3, -s * 0.3, s * 0.2, s * 0.3);\n            ctx.closePath(); ctx.fill(); ctx.restore();\n            ctx.strokeStyle = `rgba(212,175,55,${this.opacity + 0.15})`;\n            ctx.lineWidth = 1.5;\n            ctx.beginPath();\n            ctx.ellipse(cx, cy - s * 0.42, s * 0.3, s * 0.1, 0, 0, Math.PI * 2);\n            ctx.stroke();\n            ctx.restore();\n        }\n        update(t) {\n            this.y -= this.speedY;\n            this.x += this.speedX;\n            if (this.y < -this.size * 3) this.reset(false);\n            this.draw(t);\n        }\n    }\n\n    class Sparkle {\n        constructor() { this.reset(true); }\n        reset(initial) {\n            this.x = Math.random() * W;\n            this.y = initial ? Math.random() * H : H + 20;\n            this.size = 1 + Math.random() * 2.5;\n            this.speedY = 0.2 + Math.random() * 0.5;\n            this.opacity = 0 + Math.random() * 0.5;\n            this.pulseSpeed = 0.005 + Math.random() * 0.01;\n            this.phase = Math.random() * Math.PI * 2;\n            this.drift = (Math.random() - 0.5) * 0.2;\n        }\n        draw(t) {\n            const pulse = Math.sin(t * this.pulseSpeed + this.phase);\n            const alpha = this.opacity * (0.5 + pulse * 0.5);\n            ctx.save();\n            ctx.globalAlpha = alpha;\n            ctx.fillStyle = '#D4AF37';\n            ctx.shadowColor = '#D4AF37';\n            ctx.shadowBlur = 6;\n            ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();\n            ctx.globalAlpha = alpha * 0.6;\n            ctx.strokeStyle = '#D4AF37';\n            ctx.lineWidth = 0.5;\n            ctx.beginPath();\n            ctx.moveTo(this.x - this.size * 2, this.y);\n            ctx.lineTo(this.x + this.size * 2, this.y);\n            ctx.moveTo(this.x, this.y - this.size * 2);\n            ctx.lineTo(this.x, this.y + this.size * 2);\n            ctx.stroke();\n            ctx.restore();\n        }\n        update(t) {\n            this.y -= this.speedY;\n            this.x += this.drift;\n            if (this.y < -10) this.reset(false);\n            this.draw(t);\n        }\n    }\n\n    function init() {\n        resize();\n        particles = [];\n        const cloudCount = Math.max(5, Math.floor(W \/ 200));\n        const angelCount = Math.max(4, Math.floor(W \/ 250));\n        const sparkleCount = Math.max(20, Math.floor(W \/ 30));\n        for (let i = 0; i < cloudCount; i++) particles.push(new Cloud());\n        for (let i = 0; i < angelCount; i++) particles.push(new Angel());\n        for (let i = 0; i < sparkleCount; i++) particles.push(new Sparkle());\n    }\n\n    function animate(t) {\n        ctx.clearRect(0, 0, W, H);\n        for (let i = 0; i < particles.length; i++) {\n            particles[i].update(t);\n        }\n        requestAnimationFrame(animate);\n    }\n\n    window.addEventListener('resize', () => {\n        resize();\n        for (let p of particles) {\n            if (p.x > W) p.x = Math.random() * W;\n        }\n    });\n\n    init();\n    animate(0);\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-26f5f7dc alignfull uagb-is-root-container\">\n\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>St. Michael the Archangel Mission Center<\/title>\n\n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&#038;family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&#038;display=swap\" rel=\"stylesheet\">\n\n    <!-- Material Symbols -->\n    <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" \/>\n\n    <style>\n        \/* ============================================\n           GLOBAL TEXT DECORATION OVERRIDE\n           (Must come first to prevent any underlines)\n           ============================================ *\/\n        *,\n        *::before,\n        *::after {\n            text-decoration: none !important;\n            -webkit-text-decoration: none !important;\n            text-decoration-line: none !important;\n            text-decoration-color: transparent !important;\n            text-underline-offset: 0 !important;\n        }\n\n        \/* ============================================\n           ROOT & RESET\n           ============================================ *\/\n        :root {\n            --crimson: #79021c;\n            --crimson-deep: #5a0115;\n            --crimson-light: #9e1b38;\n            --crimson-bright: #b91d47;\n            --crimson-glow: rgba(121, 2, 28, 0.12);\n            --crimson-subtle: rgba(121, 2, 28, 0.06);\n            --white: #ffffff;\n            --off-white: #faf8f5;\n            --cream: #f5f0ea;\n            --warm-gray: #e8e2da;\n            --text-dark: #1a1a1a;\n            --text-body: #3d3632;\n            --text-muted: #7a7168;\n            --gold: #c9a84c;\n            --gold-light: #e8d59a;\n            --gold-dark: #a68832;\n\n            --font-display: 'Cormorant Garamond', Georgia, serif;\n            --font-body: 'Source Serif 4', Georgia, serif;\n\n            --space-xs: 0.5rem;\n            --space-sm: 1rem;\n            --space-md: 1.5rem;\n            --space-lg: 2.5rem;\n            --space-xl: 4rem;\n            --space-2xl: 6rem;\n            --space-3xl: 8rem;\n\n            --radius-sm: 4px;\n            --radius-md: 8px;\n            --radius-lg: 16px;\n\n            --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);\n            --shadow-md: 0 8px 30px rgba(0,0,0,0.08);\n            --shadow-lg: 0 16px 60px rgba(0,0,0,0.12);\n            --shadow-crimson: 0 8px 30px rgba(121, 2, 28, 0.2);\n        }\n\n        *, *::before, *::after {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        html {\n            scroll-behavior: smooth;\n            font-size: 16px;\n        }\n\n        body {\n            font-family: var(--font-body);\n            color: var(--text-body);\n            background: var(--off-white);\n            line-height: 1.7;\n            overflow-x: hidden;\n            -webkit-font-smoothing: antialiased;\n        }\n\n        img { max-width: 100%; display: block; }\n        a { text-decoration: none !important; color: inherit; }\n\n        \/* ============================================\n           FULL-PAGE BACKGROUND IMAGE WRAPPER\n           ============================================ *\/\n        .stma-bg-wrapper {\n            position: relative;\n            overflow: hidden;\n        }\n\n        .stma-bg-img {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            object-position: center top;\n            z-index: 0;\n            pointer-events: none;\n            -webkit-user-select: none;\n            user-select: none;\n            filter: brightness(0.35) contrast(1.05);\n        }\n\n        .stma-bg-overlay {\n            position: absolute;\n            inset: 0;\n            background:\n                linear-gradient(to bottom,\n                    rgba(10, 2, 5, 0.6) 0%,\n                    rgba(10, 2, 5, 0.2) 15%,\n                    rgba(10, 2, 5, 0.05) 40%,\n                    rgba(10, 2, 5, 0.05) 60%,\n                    rgba(10, 2, 5, 0.2) 85%,\n                    rgba(10, 2, 5, 0.5) 100%\n                );\n            z-index: 1;\n            pointer-events: none;\n        }\n\n        .stma-bg-grain {\n            position: absolute;\n            inset: 0;\n            opacity: 0.03;\n            z-index: 1;\n            pointer-events: none;\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'\/%3E%3C\/svg%3E\");\n        }\n\n        .stma-bg-wrapper > *:not(.stma-bg-img):not(.stma-bg-overlay):not(.stma-bg-grain) {\n            position: relative;\n            z-index: 2;\n        }\n\n        \/* ============================================\n           GRADIENT TEXT\n           ============================================ *\/\n        .gradient-text {\n            background: linear-gradient(135deg, var(--crimson-deep) 0%, var(--crimson) 25%, var(--crimson-bright) 50%, var(--crimson-light) 70%, var(--gold-dark) 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n\n        .gradient-text-gold {\n            background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n\n        .gradient-text-white {\n            background: linear-gradient(135deg, #ffffff 0%, #f0e6d8 50%, var(--gold-light) 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n\n        \/* ============================================\n           CONTAINER & SECTION\n           ============================================ *\/\n        .stma-container {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 1.5rem;\n        }\n\n        .stma-section {\n            padding: var(--space-3xl) 0;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .stma-section-divider {\n            width: 60px;\n            height: 2px;\n            background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));\n            margin: 0 auto var(--space-md);\n            position: relative;\n        }\n        .stma-section-divider::before {\n            content: '';\n            position: absolute;\n            left: 50%;\n            top: -4px;\n            width: 10px;\n            height: 10px;\n            border: 2px solid var(--crimson);\n            transform: translateX(-50%) rotate(45deg);\n        }\n\n        .stma-section-divider-gold {\n            background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));\n        }\n        .stma-section-divider-gold::before {\n            border-color: var(--gold);\n        }\n\n        .stma-section-subtitle {\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            letter-spacing: 0.25em;\n            text-transform: uppercase;\n            color: var(--crimson);\n            text-align: center;\n            margin-bottom: var(--space-xs);\n        }\n\n        .stma-section-title {\n            font-family: var(--font-display);\n            font-size: clamp(2.2rem, 5vw, 3.5rem);\n            font-weight: 400;\n            text-align: center;\n            margin-bottom: var(--space-md);\n            line-height: 1.15;\n        }\n\n        .stma-section-desc {\n            max-width: 640px;\n            margin: 0 auto var(--space-xl);\n            text-align: center;\n            font-size: 1.05rem;\n            line-height: 1.8;\n        }\n\n        \/* ============================================\n           MATERIAL SYMBOL\n           ============================================ *\/\n        .material-symbols-outlined {\n            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;\n            vertical-align: middle;\n        }\n\n        \/* ============================================\n           BUTTONS\n           ============================================ *\/\n        .stma-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.5rem;\n            padding: 0.875rem 2rem;\n            font-family: var(--font-display);\n            font-size: 1rem;\n            font-weight: 600;\n            letter-spacing: 0.12em;\n            text-transform: uppercase;\n            border: none;\n            cursor: pointer;\n            text-decoration: none !important;\n            -webkit-text-decoration: none !important;\n            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            position: relative;\n            overflow: hidden;\n        }\n        .stma-btn::before {\n            content: '';\n            position: absolute;\n            top: 0; left: -100%;\n            width: 100%; height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);\n            transition: left 0.5s ease;\n        }\n        .stma-btn:hover::before { left: 100%; }\n        .stma-btn:hover,\n        .stma-btn:active,\n        .stma-btn:focus,\n        .stma-btn:visited {\n            text-decoration: none !important;\n            -webkit-text-decoration: none !important;\n        }\n\n        .stma-btn-primary {\n            background: var(--crimson);\n            color: var(--white);\n            border-radius: var(--radius-sm);\n        }\n        .stma-btn-primary:hover {\n            background: var(--crimson-deep);\n            box-shadow: var(--shadow-crimson);\n            transform: translateY(-2px);\n        }\n\n        .stma-btn-outline {\n            background: transparent;\n            color: var(--crimson);\n            border: 1.5px solid var(--crimson);\n            border-radius: var(--radius-sm);\n        }\n        .stma-btn-outline:hover {\n            background: var(--crimson);\n            color: var(--white);\n            transform: translateY(-2px);\n        }\n\n        .stma-btn-white {\n            background: var(--white);\n            color: var(--crimson);\n            border-radius: var(--radius-sm);\n        }\n        .stma-btn-white:hover {\n            background: var(--cream);\n            box-shadow: var(--shadow-lg);\n            transform: translateY(-2px);\n        }\n\n        .stma-btn .material-symbols-outlined {\n            font-size: 1.15rem;\n            transition: transform 0.3s ease;\n        }\n        .stma-btn:hover .material-symbols-outlined {\n            transform: translateX(3px);\n        }\n\n        \/* ============================================\n           ANIMATIONS - OPTIMIZED\n           ============================================ *\/\n        @keyframes float {\n            0%, 100% { transform: translateY(0); }\n            50%      { transform: translateY(-10px); }\n        }\n\n        @keyframes crossPulse {\n            0%, 100% { opacity: 0.04; transform: translate(-50%,-50%) scale(1); }\n            50%      { opacity: 0.08; transform: translate(-50%,-50%) scale(1.06); }\n        }\n\n        .anim-child,\n        .anim-section,\n        .anim-left,\n        .anim-right,\n        .anim-pop {\n            will-change: transform, opacity;\n        }\n\n        .anim-child {\n            opacity: 0;\n            transform: translateY(30px);\n            transition: opacity 0.5s ease-out, transform 0.5s ease-out;\n        }\n        .anim-child.in-view {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .anim-section {\n            opacity: 0;\n            transform: translateY(40px);\n            transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n        }\n        .anim-section.in-view {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .anim-left {\n            opacity: 0;\n            transform: translateX(-40px);\n            transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n        }\n        .anim-left.in-view {\n            opacity: 1;\n            transform: translateX(0);\n        }\n\n        .anim-right {\n            opacity: 0;\n            transform: translateX(40px);\n            transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n        }\n        .anim-right.in-view {\n            opacity: 1;\n            transform: translateX(0);\n        }\n\n        .anim-pop {\n            opacity: 0;\n            transform: scale(0.9);\n            transition: opacity 0.5s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .anim-pop.in-view {\n            opacity: 1;\n            transform: scale(1);\n        }\n\n        .anim-delay-1 { transition-delay: 0.08s; }\n        .anim-delay-2 { transition-delay: 0.16s; }\n        .anim-delay-3 { transition-delay: 0.24s; }\n        .anim-delay-4 { transition-delay: 0.32s; }\n        .anim-delay-5 { transition-delay: 0.40s; }\n        .anim-delay-6 { transition-delay: 0.48s; }\n        .anim-delay-7 { transition-delay: 0.56s; }\n        .anim-delay-8 { transition-delay: 0.64s; }\n\n        \/* ============================================\n           HERO\n           ============================================ *\/\n        .stma-hero {\n            position: relative;\n            min-height: 100vh;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: linear-gradient(175deg, var(--crimson-deep) 0%, var(--crimson) 40%, var(--crimson-light) 100%);\n            overflow: hidden;\n        }\n        .stma-hero::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            background:\n                radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.06) 0%, transparent 50%),\n                radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.15) 0%, transparent 50%);\n            pointer-events: none;\n        }\n\n        .stma-hero-cross {\n            position: absolute;\n            top: 50%; left: 50%;\n            width: 400px; height: 400px;\n            transform: translate(-50%, -50%);\n            opacity: 0.04;\n            pointer-events: none;\n            animation: crossPulse 6s ease-in-out infinite;\n            will-change: transform, opacity;\n        }\n        .stma-hero-cross::before, .stma-hero-cross::after {\n            content: ''; position: absolute; background: var(--white);\n        }\n        .stma-hero-cross::before {\n            top: 0; left: 50%; width: 3px; height: 100%; transform: translateX(-50%);\n        }\n        .stma-hero-cross::after {\n            top: 30%; left: 0; width: 100%; height: 3px;\n        }\n\n        .stma-hero-arches {\n            position: absolute;\n            bottom: -2px; left: 0;\n            width: 100%; height: 60px;\n            overflow: hidden; z-index: 3;\n        }\n        .stma-hero-arches svg { width: 100%; height: 100%; }\n\n        .stma-hero-content {\n            position: relative;\n            z-index: 2;\n            text-align: center;\n            padding: 2rem 1.5rem;\n            max-width: 900px;\n        }\n\n        .stma-hero-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 72px; height: 72px;\n            border: 1.5px solid rgba(255,255,255,0.25);\n            border-radius: 50%;\n            margin-bottom: var(--space-lg);\n            animation: float 4s ease-in-out infinite;\n            will-change: transform;\n        }\n        .stma-hero-icon .material-symbols-outlined {\n            font-size: 32px; color: var(--white);\n        }\n\n        .stma-hero-tagline {\n            font-family: var(--font-display);\n            font-size: clamp(0.8rem, 1.5vw, 0.95rem);\n            font-weight: 600;\n            letter-spacing: 0.35em;\n            text-transform: uppercase;\n            color: var(--gold-light);\n            margin-bottom: var(--space-md);\n            animation: fadeInDown 0.8s ease 0.15s both;\n        }\n\n        @keyframes fadeInDown {\n            from { opacity: 0; transform: translateY(-30px); }\n            to   { opacity: 1; transform: translateY(0); }\n        }\n\n        .stma-hero-title {\n            font-family: var(--font-display);\n            font-size: clamp(2.8rem, 8vw, 5.5rem);\n            font-weight: 300;\n            color: var(--white);\n            line-height: 1.05;\n            margin-bottom: var(--space-sm);\n            animation: fadeInUp 0.8s ease 0.3s both;\n        }\n        .stma-hero-title strong {\n            font-weight: 700;\n            display: block;\n            background: linear-gradient(135deg, #ffffff 0%, var(--gold-light) 60%, var(--gold) 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n\n        @keyframes fadeInUp {\n            from { opacity: 0; transform: translateY(40px); }\n            to   { opacity: 1; transform: translateY(0); }\n        }\n\n        .stma-hero-subtitle {\n            font-family: var(--font-display);\n            font-size: clamp(1.1rem, 2.5vw, 1.5rem);\n            font-weight: 300;\n            font-style: italic;\n            color: rgba(255,255,255,0.8);\n            margin-bottom: var(--space-lg);\n            animation: fadeInUp 0.8s ease 0.45s both;\n        }\n\n        .stma-hero-line {\n            width: 80px; height: 1px;\n            background: linear-gradient(90deg, transparent, var(--gold-light), transparent);\n            margin: 0 auto var(--space-lg);\n            animation: fadeInUp 0.8s ease 0.5s both;\n        }\n\n        .stma-hero-verse {\n            font-family: var(--font-body);\n            font-size: 0.95rem;\n            font-style: italic;\n            color: rgba(255,255,255,0.6);\n            max-width: 500px;\n            margin: 0 auto var(--space-xl);\n            line-height: 1.7;\n            animation: fadeInUp 0.8s ease 0.6s both;\n        }\n\n        .stma-hero-buttons {\n            display: flex;\n            gap: var(--space-sm);\n            justify-content: center;\n            flex-wrap: wrap;\n            animation: fadeInUp 0.8s ease 0.7s both;\n        }\n        .stma-hero-buttons a {\n            text-decoration: none !important;\n        }\n\n        .stma-hero-scroll {\n            position: absolute;\n            bottom: 80px; left: 50%;\n            transform: translateX(-50%);\n            z-index: 2;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 0.5rem;\n            color: rgba(255,255,255,0.5);\n            font-family: var(--font-display);\n            font-size: 0.7rem;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            animation: fadeInUp 0.8s ease 0.9s both;\n        }\n        .stma-hero-scroll .material-symbols-outlined {\n            font-size: 20px;\n            animation: float 2s ease-in-out infinite;\n            will-change: transform;\n        }\n\n        \/* ============================================\n           SECTION BACKGROUNDS\n           ============================================ *\/\n        .stma-about {\n            background: rgba(255, 255, 255, 0.92);\n        }\n\n        .stma-info {\n            background: rgba(250, 248, 245, 0.92);\n        }\n\n        .stma-ministries {\n            background: rgba(255, 255, 255, 0.92);\n        }\n\n        .stma-events {\n            background: rgba(250, 248, 245, 0.92);\n        }\n\n        .stma-gallery {\n            background: rgba(255, 255, 255, 0.92);\n        }\n\n        .stma-pastor {\n            background: rgba(250, 248, 245, 0.92);\n        }\n\n        .stma-donate {\n            background: linear-gradient(135deg, rgba(90,1,21,0.97) 0%, rgba(121,2,28,0.96) 60%, rgba(158,27,56,0.96) 100%);\n        }\n\n        .stma-newsletter {\n            background: rgba(255, 255, 255, 0.94);\n        }\n\n        \/* ============================================\n           ABOUT\n           ============================================ *\/\n        .stma-about-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: var(--space-xl);\n            align-items: center;\n        }\n\n        .stma-about-image {\n            position: relative;\n            border-radius: var(--radius-md);\n            overflow: hidden;\n            aspect-ratio: 4\/5;\n        }\n        .stma-about-image img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            object-position: center;\n            border-radius: var(--radius-md);\n        }\n        .stma-about-image-placeholder {\n            width: 100%; height: 100%;\n            background: linear-gradient(160deg, var(--crimson) 0%, var(--crimson-deep) 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: var(--radius-md);\n        }\n        .stma-about-image-placeholder .material-symbols-outlined {\n            font-size: 120px;\n            color: rgba(255,255,255,0.1);\n        }\n        .stma-about-image-frame {\n            position: absolute;\n            top: 12px; left: 12px; right: 12px; bottom: 12px;\n            border: 1px solid rgba(255,255,255,0.15);\n            border-radius: var(--radius-sm);\n            pointer-events: none;\n            z-index: 1;\n        }\n        .stma-about-image-badge {\n            position: absolute;\n            bottom: 24px; right: 24px;\n            background: linear-gradient(135deg, var(--gold-dark), var(--gold));\n            color: var(--white);\n            padding: 0.75rem 1.25rem;\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            letter-spacing: 0.15em;\n            text-transform: uppercase;\n            border-radius: var(--radius-sm);\n            z-index: 2;\n        }\n\n        .stma-about-content { padding: var(--space-lg) 0; }\n        .stma-about-content .stma-section-subtitle { text-align: left; }\n        .stma-about-content .stma-section-title { text-align: left; margin-bottom: var(--space-md); }\n\n        .stma-about-text {\n            color: var(--text-muted);\n            font-size: 1.05rem;\n            line-height: 1.9;\n            margin-bottom: var(--space-md);\n        }\n\n        .stma-about-highlights {\n            display: flex;\n            flex-direction: column;\n            gap: var(--space-sm);\n            margin-bottom: var(--space-lg);\n        }\n        .stma-about-highlight {\n            display: flex;\n            align-items: flex-start;\n            gap: var(--space-sm);\n        }\n        .stma-about-highlight-icon {\n            flex-shrink: 0;\n            width: 40px; height: 40px;\n            background: var(--crimson-subtle);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n        }\n        .stma-about-highlight-icon .material-symbols-outlined {\n            font-size: 20px;\n            color: var(--crimson);\n        }\n        .stma-about-highlight-text strong {\n            display: block;\n            font-family: var(--font-display);\n            font-size: 1.1rem;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: 2px;\n        }\n        .stma-about-highlight-text span {\n            font-size: 0.9rem;\n            color: var(--text-muted);\n        }\n\n        \/* ============================================\n           PARISH INFO\n           ============================================ *\/\n        .stma-info-stats {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: var(--space-md);\n            margin-bottom: var(--space-2xl);\n        }\n\n        .stma-info-stat {\n            text-align: center;\n            padding: var(--space-lg) var(--space-sm);\n            background: rgba(255,255,255,0.7);\n            border-radius: var(--radius-md);\n            border: 1px solid var(--warm-gray);\n            position: relative;\n            overflow: hidden;\n            transition: all 0.35s ease;\n        }\n        .stma-info-stat::after {\n            content: '';\n            position: absolute;\n            bottom: 0; left: 0; right: 0;\n            height: 3px;\n            background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));\n            transform: scaleX(0);\n            transition: transform 0.35s ease;\n        }\n        .stma-info-stat:hover::after { transform: scaleX(1); }\n        .stma-info-stat:hover {\n            box-shadow: var(--shadow-md);\n            transform: translateY(-4px);\n        }\n\n        .stma-info-stat-number {\n            font-family: var(--font-display);\n            font-size: clamp(2.2rem, 4vw, 3rem);\n            font-weight: 700;\n            line-height: 1;\n            margin-bottom: 0.3rem;\n        }\n        .stma-info-stat-label {\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            letter-spacing: 0.15em;\n            text-transform: uppercase;\n            color: var(--text-muted);\n        }\n\n        .stma-info-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: var(--space-md);\n        }\n\n        .stma-info-card {\n            background: rgba(255,255,255,0.75);\n            border-radius: var(--radius-md);\n            padding: var(--space-xl) var(--space-lg);\n            border: 1px solid var(--warm-gray);\n            position: relative;\n            overflow: hidden;\n            transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        }\n        .stma-info-card::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0;\n            width: 4px; height: 0;\n            background: linear-gradient(to bottom, var(--crimson), var(--crimson-bright));\n            transition: height 0.4s ease;\n        }\n        .stma-info-card:hover::before { height: 100%; }\n        .stma-info-card:hover {\n            border-color: transparent;\n            box-shadow: var(--shadow-lg);\n            transform: translateY(-6px);\n        }\n\n        .stma-info-card-icon {\n            width: 60px; height: 60px;\n            background: var(--crimson-subtle);\n            border-radius: var(--radius-md);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: var(--space-md);\n            transition: all 0.35s ease;\n        }\n        .stma-info-card:hover .stma-info-card-icon {\n            background: var(--crimson);\n            border-radius: 50%;\n            transform: rotate(-8deg) scale(1.1);\n        }\n        .stma-info-card-icon .material-symbols-outlined {\n            font-size: 28px;\n            color: var(--crimson);\n            transition: color 0.35s ease;\n        }\n        .stma-info-card:hover .stma-info-card-icon .material-symbols-outlined {\n            color: var(--white);\n        }\n\n        .stma-info-card-title {\n            font-family: var(--font-display);\n            font-size: 1.35rem;\n            font-weight: 700;\n            color: var(--text-dark);\n            margin-bottom: var(--space-xs);\n        }\n        .stma-info-card-desc {\n            font-size: 0.92rem;\n            color: var(--text-muted);\n            line-height: 1.7;\n        }\n\n        \/* ============================================\n           MINISTRIES\n           ============================================ *\/\n        .stma-ministries-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: var(--space-md);\n        }\n\n        .stma-ministry-card {\n            background: rgba(250, 248, 245, 0.8);\n            border-radius: var(--radius-md);\n            padding: var(--space-xl) var(--space-lg);\n            text-align: center;\n            border: 1px solid var(--warm-gray);\n            transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            position: relative;\n            overflow: hidden;\n        }\n        .stma-ministry-card::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0; right: 0;\n            height: 3px;\n            background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));\n            transform: scaleX(0);\n            transition: transform 0.35s ease;\n        }\n        .stma-ministry-card:hover::before { transform: scaleX(1); }\n        .stma-ministry-card:hover {\n            border-color: transparent;\n            box-shadow: var(--shadow-lg);\n            transform: translateY(-6px);\n        }\n\n        .stma-ministry-icon {\n            width: 64px; height: 64px;\n            background: var(--crimson-subtle);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto var(--space-md);\n            transition: all 0.35s ease;\n        }\n        .stma-ministry-card:hover .stma-ministry-icon {\n            background: var(--crimson);\n            transform: scale(1.1);\n        }\n        .stma-ministry-icon .material-symbols-outlined {\n            font-size: 28px;\n            color: var(--crimson);\n            transition: color 0.35s ease;\n        }\n        .stma-ministry-card:hover .stma-ministry-icon .material-symbols-outlined {\n            color: var(--white);\n        }\n\n        .stma-ministry-title {\n            font-family: var(--font-display);\n            font-size: 1.35rem;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: var(--space-sm);\n        }\n        .stma-ministry-desc {\n            font-size: 0.92rem;\n            color: var(--text-muted);\n            line-height: 1.7;\n            margin-bottom: var(--space-md);\n        }\n        .stma-ministry-link {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.35rem;\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            letter-spacing: 0.12em;\n            text-transform: uppercase;\n            color: var(--crimson);\n            transition: all 0.3s ease;\n        }\n        .stma-ministry-link .material-symbols-outlined {\n            font-size: 18px;\n            transition: transform 0.3s ease;\n        }\n        .stma-ministry-link:hover { color: var(--crimson-deep); }\n        .stma-ministry-link:hover .material-symbols-outlined { transform: translateX(4px); }\n\n        \/* ============================================\n           EVENTS\n           ============================================ *\/\n        .stma-events-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: var(--space-md);\n        }\n\n        .stma-event-card {\n            display: flex;\n            gap: var(--space-md);\n            background: rgba(255,255,255,0.75);\n            border-radius: var(--radius-md);\n            padding: var(--space-md);\n            transition: all 0.35s ease;\n            border: 1px solid var(--warm-gray);\n        }\n        .stma-event-card:hover {\n            border-color: var(--crimson-glow);\n            box-shadow: var(--shadow-md);\n            transform: translateY(-3px);\n        }\n\n        .stma-event-date {\n            flex-shrink: 0;\n            width: 72px; height: 80px;\n            background: linear-gradient(135deg, var(--crimson-deep), var(--crimson));\n            border-radius: var(--radius-sm);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            color: var(--white);\n        }\n        .stma-event-date-month {\n            font-family: var(--font-display);\n            font-size: 0.7rem;\n            font-weight: 600;\n            letter-spacing: 0.15em;\n            text-transform: uppercase;\n            opacity: 0.85;\n        }\n        .stma-event-date-day {\n            font-family: var(--font-display);\n            font-size: 1.8rem;\n            font-weight: 700;\n            line-height: 1;\n        }\n\n        .stma-event-info { flex: 1; }\n        .stma-event-tag {\n            display: inline-block;\n            font-family: var(--font-display);\n            font-size: 0.7rem;\n            font-weight: 600;\n            letter-spacing: 0.15em;\n            text-transform: uppercase;\n            color: var(--crimson);\n            background: var(--crimson-subtle);\n            padding: 0.2rem 0.6rem;\n            border-radius: 2px;\n            margin-bottom: 0.5rem;\n        }\n        .stma-event-title {\n            font-family: var(--font-display);\n            font-size: 1.2rem;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: 0.35rem;\n            line-height: 1.3;\n        }\n        .stma-event-desc {\n            font-size: 0.88rem;\n            color: var(--text-muted);\n            line-height: 1.6;\n            margin-bottom: 0.5rem;\n        }\n        .stma-event-meta {\n            display: flex;\n            align-items: center;\n            gap: var(--space-sm);\n            font-size: 0.8rem;\n            color: var(--text-muted);\n        }\n        .stma-event-meta-item {\n            display: flex;\n            align-items: center;\n            gap: 0.3rem;\n        }\n        .stma-event-meta-item .material-symbols-outlined {\n            font-size: 16px;\n            color: var(--crimson);\n        }\n\n        \/* ============================================\n           GALLERY\n           ============================================ *\/\n        .stma-gallery-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            grid-template-rows: repeat(2, 220px);\n            gap: var(--space-sm);\n        }\n        .stma-gallery-item {\n            border-radius: var(--radius-md);\n            overflow: hidden;\n            position: relative;\n            cursor: pointer;\n        }\n        .stma-gallery-item:nth-child(1) {\n            grid-column: span 2;\n            grid-row: span 2;\n        }\n        .stma-gallery-item img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.5s ease;\n        }\n        .stma-gallery-item:hover img { transform: scale(1.05); }\n        .stma-gallery-item-placeholder {\n            width: 100%; height: 100%;\n            background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: transform 0.5s ease;\n        }\n        .stma-gallery-item:hover .stma-gallery-item-placeholder { transform: scale(1.05); }\n        .stma-gallery-item-placeholder .material-symbols-outlined {\n            font-size: 48px;\n            color: rgba(255,255,255,0.15);\n        }\n        .stma-gallery-item-overlay {\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(to top, rgba(26,0,8,0.7), transparent 60%);\n            display: flex;\n            align-items: flex-end;\n            padding: var(--space-md);\n            opacity: 0;\n            transition: opacity 0.35s ease;\n            z-index: 1;\n        }\n        .stma-gallery-item:hover .stma-gallery-item-overlay { opacity: 1; }\n        .stma-gallery-item-overlay span {\n            font-family: var(--font-display);\n            font-size: 1.1rem;\n            font-weight: 500;\n            color: var(--white);\n        }\n\n        \/* ============================================\n           PASTOR\n           ============================================ *\/\n        .stma-pastor-inner {\n            display: grid;\n            grid-template-columns: 200px 1fr;\n            gap: var(--space-xl);\n            align-items: center;\n            max-width: 900px;\n            margin: 0 auto;\n            background: rgba(255,255,255,0.75);\n            border-radius: var(--radius-lg);\n            padding: var(--space-xl);\n            border: 1px solid var(--warm-gray);\n        }\n        .stma-pastor-photo {\n            width: 200px; height: 240px;\n            border-radius: var(--radius-md);\n            overflow: hidden;\n            flex-shrink: 0;\n        }\n        .stma-pastor-photo img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            object-position: center top;\n            border-radius: var(--radius-md);\n        }\n        .stma-pastor-photo-placeholder {\n            width: 100%; height: 100%;\n            background: linear-gradient(160deg, var(--crimson-light), var(--crimson-deep));\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: var(--radius-md);\n        }\n        .stma-pastor-photo-placeholder .material-symbols-outlined {\n            font-size: 72px;\n            color: rgba(255,255,255,0.15);\n        }\n        .stma-pastor-quote { position: relative; }\n        .stma-pastor-quote .material-symbols-outlined.quote-mark {\n            font-size: 48px;\n            color: var(--crimson-glow);\n            position: absolute;\n            top: -10px; left: -8px;\n            font-variation-settings: 'FILL' 1, 'wght' 700;\n        }\n        .stma-pastor-quote blockquote {\n            font-family: var(--font-display);\n            font-size: 1.2rem;\n            font-style: italic;\n            font-weight: 400;\n            color: var(--text-body);\n            line-height: 1.8;\n            margin-bottom: var(--space-md);\n            padding-left: var(--space-md);\n            border-left: 2px solid var(--crimson);\n        }\n        .stma-pastor-name {\n            font-family: var(--font-display);\n            font-size: 1.1rem;\n            font-weight: 700;\n            color: var(--text-dark);\n        }\n        .stma-pastor-role {\n            font-size: 0.85rem;\n            color: var(--crimson);\n            font-family: var(--font-display);\n            font-weight: 600;\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n        }\n\n        \/* ============================================\n           DONATE \/ CTA\n           ============================================ *\/\n        .stma-donate {\n            color: var(--white);\n            text-align: center;\n            overflow: hidden;\n        }\n        .stma-donate-cross {\n            position: absolute;\n            top: 50%; left: 50%;\n            width: 300px; height: 300px;\n            transform: translate(-50%, -50%);\n            opacity: 0.06;\n            pointer-events: none;\n        }\n        .stma-donate-cross::before, .stma-donate-cross::after {\n            content: ''; position: absolute; background: var(--white);\n        }\n        .stma-donate-cross::before {\n            top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%);\n        }\n        .stma-donate-cross::after {\n            top: 28%; left: 0; width: 100%; height: 2px;\n        }\n        .stma-donate .stma-container { position: relative; z-index: 1; }\n        .stma-donate .stma-section-subtitle { color: var(--gold-light); }\n        .stma-donate-text {\n            max-width: 600px;\n            margin: 0 auto var(--space-lg);\n            font-size: 1.1rem;\n            color: rgba(255,255,255,0.8);\n            line-height: 1.8;\n            font-style: italic;\n            font-family: var(--font-display);\n        }\n        .stma-donate-scripture {\n            font-family: var(--font-body);\n            font-size: 0.9rem;\n            color: rgba(255,255,255,0.5);\n            margin-top: var(--space-lg);\n            font-style: italic;\n        }\n        .stma-donate-buttons {\n            display: flex;\n            gap: var(--space-sm);\n            justify-content: center;\n            flex-wrap: wrap;\n        }\n        .stma-donate-buttons a {\n            text-decoration: none !important;\n        }\n\n        \/* ============================================\n           NEWSLETTER\n           ============================================ *\/\n        .stma-newsletter { padding: var(--space-xl) 0; }\n        .stma-newsletter-inner {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: var(--space-lg);\n            flex-wrap: wrap;\n        }\n        .stma-newsletter-text h3 {\n            font-family: var(--font-display);\n            font-size: 1.5rem;\n            font-weight: 600;\n            color: var(--text-dark);\n            margin-bottom: 0.3rem;\n        }\n        .stma-newsletter-text p {\n            font-size: 0.92rem;\n            color: var(--text-muted);\n        }\n        .stma-newsletter-form {\n            display: flex;\n            gap: 0;\n            flex: 1;\n            max-width: 480px;\n        }\n        .stma-newsletter-form input {\n            flex: 1;\n            padding: 0.875rem 1.25rem;\n            border: 1.5px solid var(--warm-gray);\n            border-right: none;\n            border-radius: var(--radius-sm) 0 0 var(--radius-sm);\n            font-family: var(--font-body);\n            font-size: 0.92rem;\n            color: var(--text-body);\n            background: rgba(250,248,245,0.8);\n            outline: none;\n            transition: border-color 0.3s ease;\n        }\n        .stma-newsletter-form input::placeholder { color: var(--text-muted); }\n        .stma-newsletter-form input:focus { border-color: var(--crimson); }\n        .stma-newsletter-form button {\n            padding: 0.875rem 1.5rem;\n            background: linear-gradient(135deg, var(--crimson), var(--crimson-bright));\n            color: var(--white);\n            border: 1.5px solid var(--crimson);\n            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;\n            font-family: var(--font-display);\n            font-size: 0.85rem;\n            font-weight: 600;\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            white-space: nowrap;\n            text-decoration: none !important;\n            -webkit-text-decoration: none !important;\n        }\n        .stma-newsletter-form button:hover {\n            background: linear-gradient(135deg, var(--crimson-deep), var(--crimson));\n            text-decoration: none !important;\n            -webkit-text-decoration: none !important;\n        }\n\n        \/* ============================================\n           RESPONSIVE\n           ============================================ *\/\n        @media (max-width: 1024px) {\n            .stma-about-grid { gap: var(--space-lg); }\n            .stma-ministries-grid { grid-template-columns: repeat(2, 1fr); }\n            .stma-gallery-grid { grid-template-rows: repeat(2, 180px); }\n            .stma-pastor-inner { padding: var(--space-lg); }\n            .stma-info-stats { grid-template-columns: repeat(2, 1fr); }\n        }\n\n        @media (max-width: 768px) {\n            .stma-section { padding: var(--space-2xl) 0; }\n\n            .stma-about-grid { grid-template-columns: 1fr; gap: var(--space-lg); }\n            .stma-about-image { max-width: 400px; margin: 0 auto; aspect-ratio: 3\/4; }\n            .stma-about-content .stma-section-subtitle,\n            .stma-about-content .stma-section-title { text-align: center; }\n\n            .stma-info-stats { grid-template-columns: repeat(2, 1fr); }\n            .stma-info-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }\n\n            .stma-ministries-grid { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }\n            .stma-events-grid { grid-template-columns: 1fr; }\n\n            .stma-gallery-grid {\n                grid-template-columns: repeat(2, 1fr);\n                grid-template-rows: repeat(3, 160px);\n            }\n            .stma-gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }\n\n            .stma-pastor-inner {\n                grid-template-columns: 1fr;\n                text-align: center;\n                padding: var(--space-lg) var(--space-md);\n            }\n            .stma-pastor-photo { margin: 0 auto; width: 160px; height: 190px; }\n            .stma-pastor-quote blockquote {\n                border-left: none; padding-left: 0;\n                border-top: 2px solid var(--crimson);\n                padding-top: var(--space-sm);\n            }\n            .stma-pastor-quote .material-symbols-outlined.quote-mark { display: none; }\n\n            .stma-newsletter-inner { flex-direction: column; text-align: center; }\n            .stma-newsletter-form { max-width: 100%; width: 100%; }\n            .stma-hero-buttons { flex-direction: column; align-items: center; }\n            .stma-donate-buttons { flex-direction: column; align-items: center; }\n        }\n\n        @media (max-width: 480px) {\n            html { font-size: 15px; }\n            .stma-container { padding: 0 1.25rem; }\n            .stma-hero-content { padding: 1.5rem 1rem; }\n            .stma-hero-icon { width: 56px; height: 56px; }\n            .stma-hero-icon .material-symbols-outlined { font-size: 26px; }\n            .stma-info-stats { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }\n            .stma-gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 160px); }\n            .stma-gallery-item:nth-child(1) { grid-column: span 1; }\n            .stma-event-card { flex-direction: column; }\n            .stma-event-date {\n                width: 100%; height: auto;\n                flex-direction: row; gap: 0.5rem;\n                padding: 0.75rem; border-radius: var(--radius-sm);\n            }\n            .stma-newsletter-form { flex-direction: column; }\n            .stma-newsletter-form input {\n                border-right: 1.5px solid var(--warm-gray);\n                border-radius: var(--radius-sm);\n            }\n            .stma-newsletter-form input:focus { border-color: var(--crimson); }\n            .stma-newsletter-form button { border-radius: var(--radius-sm); }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <!-- ============================================\n         BACKGROUND IMAGE WRAPPER\n         ============================================ -->\n    <div class=\"stma-bg-wrapper\">\n\n        <!--\n        ===========================================================\n        BACKGROUND IMAGE - Replace the src with your own image URL\n        ===========================================================\n        -->\n        <img decoding=\"async\"\n            src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/b\/b3\/Archistrategos_Michael.jpg\/800px-Archistrategos_Michael.jpg\"\n            alt=\"St. Michael the Archangel\"\n            class=\"stma-bg-img\"\n            loading=\"eager\"\n        >\n        <div class=\"stma-bg-overlay\"><\/div>\n        <div class=\"stma-bg-grain\"><\/div>\n\n\n        <!-- ============================================\n             HERO\n             ============================================ -->\n        <section class=\"stma-hero\" id=\"home\">\n            <div class=\"stma-hero-cross\"><\/div>\n            <div class=\"stma-hero-arches\">\n                <svg viewBox=\"0 0 1440 60\" preserveAspectRatio=\"none\" fill=\"none\">\n                    <path d=\"M0,60 L0,30 Q360,0 720,30 Q1080,60 1440,30 L1440,60 Z\" fill=\"rgba(255,255,255,0.92)\"\/>\n                <\/svg>\n            <\/div>\n\n            <div class=\"stma-hero-content\">\n                <div class=\"stma-hero-icon\">\n                    <span class=\"material-symbols-outlined\">shield<\/span>\n                <\/div>\n                <h1 class=\"stma-hero-title\">\n                    Faith. Service.\n                    <strong>Community.<\/strong>\n                <\/h1>\n                <p class=\"stma-hero-subtitle\">A Place of Grace, Prayer, and Fellowship<\/p>\n                <div class=\"stma-hero-line\"><\/div>\n                <p class=\"stma-hero-verse\">\n                    &#8220;Who is like unto God?&#8221; &mdash; Under the patronage of St. Michael the Archangel,\n                    we are called to serve with courage, faith, and unwavering love.\n                <\/p>\n                <div class=\"stma-hero-buttons\">\n                    <a href=\"#info\" class=\"stma-btn stma-btn-white\">\n                        <span class=\"material-symbols-outlined\">info<\/span>\n                        About Our Parish\n                    <\/a>\n                    <a href=\"#about\" class=\"stma-btn stma-btn-outline\" style=\"color:#fff; border-color:rgba(255,255,255,0.4);\">\n                        <span class=\"material-symbols-outlined\">arrow_downward<\/span>\n                        Explore\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <div class=\"stma-hero-scroll\">\n                <span>Scroll<\/span>\n                <span class=\"material-symbols-outlined\">expand_more<\/span>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             ABOUT\n             ============================================ -->\n        <section class=\"stma-section stma-about\" id=\"about\">\n            <div class=\"stma-container\">\n                <div class=\"stma-about-grid\">\n                    <div class=\"stma-about-image anim-left\">\n                        <!--\n                        ===========================================================\n                        ABOUT IMAGE - Replace src with your church\/parish photo URL\n                        ===========================================================\n                        -->\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.unsplash.com\/photo-1548625149-fc4a29cf7092?w=600&#038;h=750&#038;fit=crop\"\n                            alt=\"St. Michael the Archangel Mission Center\"\n                            loading=\"lazy\"\n                        >\n                        <div class=\"stma-about-image-frame\"><\/div>\n                        <div class=\"stma-about-image-badge\">Est. 1995<\/div>\n                    <\/div>\n\n                    <div class=\"stma-about-content\">\n                        <p class=\"stma-section-subtitle anim-child anim-delay-1\">Welcome to Our Parish<\/p>\n                        <h2 class=\"stma-section-title gradient-text anim-child anim-delay-2\" style=\"text-align:left;\">\n                            A Community Rooted in Faith\n                        <\/h2>\n                        <div class=\"stma-section-divider anim-child anim-delay-2\" style=\"margin-left:0;\"><\/div>\n\n                        <p class=\"stma-about-text anim-child anim-delay-3\">\n                            St. Michael the Archangel Mission Center is a vibrant Catholic community\n                            dedicated to spreading the Gospel, nurturing spiritual growth, and serving\n                            those in need. For nearly three decades, we have been a beacon of hope\n                            and faith in our neighborhood.\n                        <\/p>\n\n                        <div class=\"stma-about-highlights anim-child anim-delay-4\">\n                            <div class=\"stma-about-highlight\">\n                                <div class=\"stma-about-highlight-icon\">\n                                    <span class=\"material-symbols-outlined\">diversity_3<\/span>\n                                <\/div>\n                                <div class=\"stma-about-highlight-text\">\n                                    <strong>Welcoming Community<\/strong>\n                                    <span>Open doors and open hearts for all who seek God&#8217;s love<\/span>\n                                <\/div>\n                            <\/div>\n                            <div class=\"stma-about-highlight\">\n                                <div class=\"stma-about-highlight-icon\">\n                                    <span class=\"material-symbols-outlined\">volunteer_activism<\/span>\n                                <\/div>\n                                <div class=\"stma-about-highlight-text\">\n                                    <strong>Active Outreach<\/strong>\n                                    <span>Serving the marginalized through dedicated programs and missions<\/span>\n                                <\/div>\n                            <\/div>\n                            <div class=\"stma-about-highlight\">\n                                <div class=\"stma-about-highlight-icon\">\n                                    <span class=\"material-symbols-outlined\">auto_stories<\/span>\n                                <\/div>\n                                <div class=\"stma-about-highlight-text\">\n                                    <strong>Faith Formation<\/strong>\n                                    <span>Catechism, Bible studies, and spiritual enrichment for all ages<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <a href=\"#ministries\" class=\"stma-btn stma-btn-outline anim-child anim-delay-5\">\n                            <span class=\"material-symbols-outlined\">arrow_forward<\/span>\n                            Our Ministries\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             PARISH INFO\n             ============================================ -->\n        <section class=\"stma-section stma-info\" id=\"info\">\n            <div class=\"stma-container\">\n                <p class=\"stma-section-subtitle anim-child\">Know Your Parish<\/p>\n                <h2 class=\"stma-section-title gradient-text anim-child anim-delay-1\">Parish Information<\/h2>\n                <div class=\"stma-section-divider anim-child anim-delay-1\"><\/div>\n                <p class=\"stma-section-desc anim-child anim-delay-2\" style=\"color: var(--text-muted);\">\n                    Discover the heart of St. Michael the Archangel Mission Center &mdash;\n                    a place of worship, learning, and service that has nurtured generations of faithful.\n                <\/p>\n\n                <div class=\"stma-info-stats\">\n                    <div class=\"stma-info-stat anim-pop anim-delay-1\">\n                        <p class=\"stma-info-stat-number gradient-text\">28+<\/p>\n                        <p class=\"stma-info-stat-label\">Years of Service<\/p>\n                    <\/div>\n                    <div class=\"stma-info-stat anim-pop anim-delay-2\">\n                        <p class=\"stma-info-stat-number gradient-text\">2,500<\/p>\n                        <p class=\"stma-info-stat-label\">Parish Families<\/p>\n                    <\/div>\n                    <div class=\"stma-info-stat anim-pop anim-delay-3\">\n                        <p class=\"stma-info-stat-number gradient-text\">12<\/p>\n                        <p class=\"stma-info-stat-label\">Active Ministries<\/p>\n                    <\/div>\n                    <div class=\"stma-info-stat anim-pop anim-delay-4\">\n                        <p class=\"stma-info-stat-number gradient-text\">50+<\/p>\n                        <p class=\"stma-info-stat-label\">Weekly Programs<\/p>\n                    <\/div>\n                <\/div>\n\n                <div class=\"stma-info-grid\">\n                    <div class=\"stma-info-card anim-child anim-delay-1\">\n                        <div class=\"stma-info-card-icon\">\n                            <span class=\"material-symbols-outlined\">local_hospital<\/span>\n                        <\/div>\n                        <h3 class=\"stma-info-card-title\">Sacramental Life<\/h3>\n                        <p class=\"stma-info-card-desc\">\n                            All seven sacraments celebrated: Baptism, Confirmation, Eucharist,\n                            Reconciliation, Anointing of the Sick, Holy Orders, and Matrimony.\n                        <\/p>\n                    <\/div>\n                    <div class=\"stma-info-card anim-child anim-delay-2\">\n                        <div class=\"stma-info-card-icon\">\n                            <span class=\"material-symbols-outlined\">school<\/span>\n                        <\/div>\n                        <h3 class=\"stma-info-card-title\">Faith Education<\/h3>\n                        <p class=\"stma-info-card-desc\">\n                            Catechetical programs for children, youth, and adults. From Sunday School\n                            to RCIA, rooted in Scripture and Tradition.\n                        <\/p>\n                    <\/div>\n                    <div class=\"stma-info-card anim-child anim-delay-3\">\n                        <div class=\"stma-info-card-icon\">\n                            <span class=\"material-symbols-outlined\">groups<\/span>\n                        <\/div>\n                        <h3 class=\"stma-info-card-title\">Community Life<\/h3>\n                        <p class=\"stma-info-card-desc\">\n                            Prayer groups, Bible sharings, fellowship gatherings, and cultural celebrations\n                            that strengthen the bonds of our faith family.\n                        <\/p>\n                    <\/div>\n                    <div class=\"stma-info-card anim-child anim-delay-4\">\n                        <div class=\"stma-info-card-icon\">\n                            <span class=\"material-symbols-outlined\">diversity_3<\/span>\n                        <\/div>\n                        <h3 class=\"stma-info-card-title\">Youth &amp; Young Adults<\/h3>\n                        <p class=\"stma-info-card-desc\">\n                            Retreats, camps, praise nights, leadership training, and service projects\n                            helping the next generation grow in faith.\n                        <\/p>\n                    <\/div>\n                    <div class=\"stma-info-card anim-child anim-delay-5\">\n                        <div class=\"stma-info-card-icon\">\n                            <span class=\"material-symbols-outlined\">handshake<\/span>\n                        <\/div>\n                        <h3 class=\"stma-info-card-title\">Social Outreach<\/h3>\n                        <p class=\"stma-info-card-desc\">\n                            Feeding programs, medical missions, disaster relief, livelihood training,\n                            and prison ministry to the margins of society.\n                        <\/p>\n                    <\/div>\n                    <div class=\"stma-info-card anim-child anim-delay-6\">\n                        <div class=\"stma-info-card-icon\">\n                            <span class=\"material-symbols-outlined\">event_available<\/span>\n                        <\/div>\n                        <h3 class=\"stma-info-card-title\">Parish Facilities<\/h3>\n                        <p class=\"stma-info-card-desc\">\n                            Main church, parish hall, catechetical classrooms, adoration chapel,\n                            parish office, and covered courtyard for events.\n                        <\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             MINISTRIES\n             ============================================ -->\n        <section class=\"stma-section stma-ministries\" id=\"ministries\">\n            <div class=\"stma-container\">\n                <p class=\"stma-section-subtitle anim-child\">Called to Serve<\/p>\n                <h2 class=\"stma-section-title gradient-text anim-child anim-delay-1\">Our Ministries<\/h2>\n                <div class=\"stma-section-divider anim-child anim-delay-1\"><\/div>\n                <p class=\"stma-section-desc anim-child anim-delay-2\" style=\"color: var(--text-muted);\">\n                    Discover the many ways to live out your faith through service,\n                    worship, and fellowship within our parish community.\n                <\/p>\n\n                <div class=\"stma-ministries-grid\">\n                    <div class=\"stma-ministry-card anim-child anim-delay-1\">\n                        <div class=\"stma-ministry-icon\">\n                            <span class=\"material-symbols-outlined\">groups<\/span>\n                        <\/div>\n                        <h3 class=\"stma-ministry-title\">Youth Ministry<\/h3>\n                        <p class=\"stma-ministry-desc\">Empowering young hearts through retreats, praise and worship, catechesis, and community service.<\/p>\n                    <\/div>\n                    <div class=\"stma-ministry-card anim-child anim-delay-2\">\n                        <div class=\"stma-ministry-icon\">\n                            <span class=\"material-symbols-outlined\">music_note<\/span>\n                        <\/div>\n                        <h3 class=\"stma-ministry-title\">Music Ministry<\/h3>\n                        <p class=\"stma-ministry-desc\">Leading worship through hymns, choral arrangements, and instrumental praise.<\/p>\n                    <\/div>\n                    <div class=\"stma-ministry-card anim-child anim-delay-3\">\n                        <div class=\"stma-ministry-icon\">\n                            <span class=\"material-symbols-outlined\">handshake<\/span>\n                        <\/div>\n                        <h3 class=\"stma-ministry-title\">Social Services<\/h3>\n                        <p class=\"stma-ministry-desc\">Extending Christ&#8217;s love through feeding programs, medical missions, and outreach.<\/p>\n                    <\/div>\n                    <div class=\"stma-ministry-card anim-child anim-delay-4\">\n                        <div class=\"stma-ministry-icon\">\n                            <span class=\"material-symbols-outlined\">menu_book<\/span>\n                        <\/div>\n                        <h3 class=\"stma-ministry-title\">Bible Study<\/h3>\n                        <p class=\"stma-ministry-desc\">Deepening understanding of Scripture through guided study and faith-sharing.<\/p>\n                    <\/div>\n                    <div class=\"stma-ministry-card anim-child anim-delay-5\">\n                        <div class=\"stma-ministry-icon\">\n                            <span class=\"material-symbols-outlined\">favorite<\/span>\n                        <\/div>\n                        <h3 class=\"stma-ministry-title\">Family Life<\/h3>\n                        <p class=\"stma-ministry-desc\">Strengthening families through marriage enrichment, seminars, and retreats.<\/p>\n                    <\/div>\n                    <div class=\"stma-ministry-card anim-child anim-delay-6\">\n                        <div class=\"stma-ministry-icon\">\n                            <span class=\"material-symbols-outlined\">self_improvement<\/span>\n                        <\/div>\n                        <h3 class=\"stma-ministry-title\">Prayer &amp; Worship<\/h3>\n                        <p class=\"stma-ministry-desc\">Adoration, rosary groups, novenas, and liturgical service at every Mass.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             EVENTS\n             ============================================ -->\n        <section class=\"stma-section stma-events\" id=\"events\">\n            <div class=\"stma-container\">\n                <p class=\"stma-section-subtitle anim-child\">Upcoming<\/p>\n                <h2 class=\"stma-section-title gradient-text anim-child anim-delay-1\">Parish Events<\/h2>\n                <div class=\"stma-section-divider anim-child anim-delay-1\"><\/div>\n                <p class=\"stma-section-desc anim-child anim-delay-2\" style=\"color: var(--text-muted);\">\n                    Stay connected with our parish community through upcoming celebrations and gatherings.\n                <\/p>\n\n                <div class=\"stma-events-grid\">\n                    <div class=\"stma-event-card anim-child anim-delay-1\">\n                        <div class=\"stma-event-date\">\n                            <span class=\"stma-event-date-month\">Jun<\/span>\n                            <span class=\"stma-event-date-day\">22<\/span>\n                        <\/div>\n                        <div class=\"stma-event-info\">\n                            <span class=\"stma-event-tag\">Feast Day<\/span>\n                            <h4 class=\"stma-event-title\">Feast of St. Michael the Archangel<\/h4>\n                            <p class=\"stma-event-desc\">Solemn high mass, procession, and parish-wide celebration honoring our patron saint.<\/p>\n                            <div class=\"stma-event-meta\">\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">schedule<\/span> 8:00 AM<\/span>\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">location_on<\/span> Main Church<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"stma-event-card anim-child anim-delay-2\">\n                        <div class=\"stma-event-date\">\n                            <span class=\"stma-event-date-month\">Jul<\/span>\n                            <span class=\"stma-event-date-day\">05<\/span>\n                        <\/div>\n                        <div class=\"stma-event-info\">\n                            <span class=\"stma-event-tag\">Retreat<\/span>\n                            <h4 class=\"stma-event-title\">Parish Recollection Day<\/h4>\n                            <p class=\"stma-event-desc\">A day of prayer, reflection, and reconciliation led by a guest spiritual director.<\/p>\n                            <div class=\"stma-event-meta\">\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">schedule<\/span> 9:00 AM &ndash; 4:00 PM<\/span>\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">location_on<\/span> Parish Hall<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"stma-event-card anim-child anim-delay-3\">\n                        <div class=\"stma-event-date\">\n                            <span class=\"stma-event-date-month\">Jul<\/span>\n                            <span class=\"stma-event-date-day\">12<\/span>\n                        <\/div>\n                        <div class=\"stma-event-info\">\n                            <span class=\"stma-event-tag\">Outreach<\/span>\n                            <h4 class=\"stma-event-title\">Community Feeding Program<\/h4>\n                            <p class=\"stma-event-desc\">Monthly outreach providing meals and essential goods to families in need.<\/p>\n                            <div class=\"stma-event-meta\">\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">schedule<\/span> 7:00 AM<\/span>\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">location_on<\/span> Parish Grounds<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"stma-event-card anim-child anim-delay-4\">\n                        <div class=\"stma-event-date\">\n                            <span class=\"stma-event-date-month\">Aug<\/span>\n                            <span class=\"stma-event-date-day\">15<\/span>\n                        <\/div>\n                        <div class=\"stma-event-info\">\n                            <span class=\"stma-event-tag\">Celebration<\/span>\n                            <h4 class=\"stma-event-title\">Parish Fiesta &amp; Family Day<\/h4>\n                            <p class=\"stma-event-desc\">Games, food, talent show, and thanksgiving mass for all parish families.<\/p>\n                            <div class=\"stma-event-meta\">\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">schedule<\/span> All Day<\/span>\n                                <span class=\"stma-event-meta-item\"><span class=\"material-symbols-outlined\">location_on<\/span> Parish Grounds<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             GALLERY\n             ============================================ -->\n        <section class=\"stma-section stma-gallery\" id=\"gallery\">\n            <div class=\"stma-container\">\n                <p class=\"stma-section-subtitle anim-child\">Parish Life<\/p>\n                <h2 class=\"stma-section-title gradient-text anim-child anim-delay-1\">Photo Gallery<\/h2>\n                <div class=\"stma-section-divider anim-child anim-delay-1\"><\/div>\n                <p class=\"stma-section-desc anim-child anim-delay-2\" style=\"color: var(--text-muted);\">\n                    Glimpses of our faith community at worship, in service, and in celebration.\n                <\/p>\n\n                <div class=\"stma-gallery-grid anim-section anim-delay-3\">\n                    <!--\n                    ===========================================================\n                    GALLERY IMAGE 1 (Large) - Replace src with your photo URL\n                    ===========================================================\n                    -->\n                    <div class=\"stma-gallery-item\">\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.unsplash.com\/photo-1438032005730-c779502df39b?w=800&#038;h=600&#038;fit=crop\"\n                            alt=\"Sunday High Mass\"\n                            loading=\"lazy\"\n                        >\n                        <div class=\"stma-gallery-item-overlay\"><span>Sunday High Mass<\/span><\/div>\n                    <\/div>\n\n                    <!-- GALLERY IMAGE 2 - Replace src -->\n                    <div class=\"stma-gallery-item\">\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.unsplash.com\/photo-1504052434569-70ad5836ab65?w=400&#038;h=300&#038;fit=crop\"\n                            alt=\"Church Interior\"\n                            loading=\"lazy\"\n                        >\n                        <div class=\"stma-gallery-item-overlay\"><span>Church Interior<\/span><\/div>\n                    <\/div>\n\n                    <!-- GALLERY IMAGE 3 - Replace src -->\n                    <div class=\"stma-gallery-item\">\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.unsplash.com\/photo-1529070538774-1843cb3265df?w=400&#038;h=300&#038;fit=crop\"\n                            alt=\"Youth Retreat\"\n                            loading=\"lazy\"\n                        >\n                        <div class=\"stma-gallery-item-overlay\"><span>Youth Retreat<\/span><\/div>\n                    <\/div>\n\n                    <!-- GALLERY IMAGE 4 - Replace src -->\n                    <div class=\"stma-gallery-item\">\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.unsplash.com\/photo-1548625149-fc4a29cf7092?w=400&#038;h=300&#038;fit=crop\"\n                            alt=\"Feast Day Procession\"\n                            loading=\"lazy\"\n                        >\n                        <div class=\"stma-gallery-item-overlay\"><span>Feast Day Procession<\/span><\/div>\n                    <\/div>\n\n                    <!-- GALLERY IMAGE 5 - Replace src -->\n                    <div class=\"stma-gallery-item\">\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.unsplash.com\/photo-1469571486292-0ba58a3f068b?w=400&#038;h=300&#038;fit=crop\"\n                            alt=\"Community Outreach\"\n                            loading=\"lazy\"\n                        >\n                        <div class=\"stma-gallery-item-overlay\"><span>Community Outreach<\/span><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             PASTOR'S MESSAGE\n             ============================================ -->\n        <section class=\"stma-section stma-pastor\" id=\"pastor\">\n            <div class=\"stma-container\">\n                <p class=\"stma-section-subtitle anim-child\">From the Pastor&#8217;s Desk<\/p>\n                <h2 class=\"stma-section-title gradient-text anim-child anim-delay-1\">A Message from Our Parish Priest<\/h2>\n                <div class=\"stma-section-divider anim-child anim-delay-1\"><\/div>\n\n                <div class=\"stma-pastor-inner anim-section anim-delay-2\">\n                    <div class=\"stma-pastor-photo\">\n                        <!--\n                        ===========================================================\n                        PASTOR PHOTO - Replace src with your parish priest's photo URL\n                        Recommended: portrait orientation, at least 400px wide\n                        ===========================================================\n                        -->\n                        <img decoding=\"async\"\n                            src=\"https:\/\/images.unsplash.com\/photo-1607629858679-7c0a44ed8b18?w=400&#038;h=480&#038;fit=crop&#038;crop=face\"\n                            alt=\"Rev. Fr. Anthony Damian\"\n                            loading=\"lazy\"\n                        >\n                    <\/div>\n                    <div class=\"stma-pastor-quote\">\n                        <span class=\"material-symbols-outlined quote-mark\">format_quote<\/span>\n                        <blockquote>\n                            Dear brothers and sisters in Christ, our mission center stands as a testament\n                            to God&#8217;s enduring faithfulness. I invite each one of you to deepen your\n                            relationship with the Lord through the sacraments, community prayer, and\n                            acts of charity. Together, under the protection of St. Michael, let us\n                            build a Church that is alive, welcoming, and ever faithful to the Gospel.\n                        <\/blockquote>\n                        <p class=\"stma-pastor-name\">Rev. Fr. Anthony Damian<\/p>\n                        <p class=\"stma-pastor-role\">Lead Chaplain<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             DONATE \/ CTA\n             ============================================ -->\n        <section class=\"stma-section stma-donate\" id=\"donate\">\n            <div class=\"stma-donate-cross\"><\/div>\n            <div class=\"stma-container\">\n                <p class=\"stma-section-subtitle anim-child\">Support Our Mission<\/p>\n                <h2 class=\"stma-section-title gradient-text-white anim-child anim-delay-1\" style=\"font-size: clamp(2rem, 5vw, 3.5rem);\">\n                    Share Your Blessings\n                <\/h2>\n                <div class=\"stma-section-divider stma-section-divider-gold anim-child anim-delay-1\"><\/div>\n\n                <p class=\"stma-donate-text anim-child anim-delay-2\">\n                    Your generous contributions help sustain our parish programs,\n                    maintain our sacred spaces, and extend aid to those most in need.\n                    Every gift, no matter the size, makes a difference.\n                <\/p>\n\n                <div class=\"stma-donate-buttons anim-child anim-delay-3\">\n                    <a href=\"https:\/\/demo5.yinwoodweb.com\/malaya\/donate\/\" class=\"stma-btn stma-btn-white\">\n                        <span class=\"material-symbols-outlined\">volunteer_activism<\/span>\n                        Donate Now\n                    <\/a>\n                    <a href=\"https:\/\/demo5.yinwoodweb.com\/malaya\/blogs\/\" class=\"stma-btn stma-btn-outline\" style=\"color:#fff; border-color:rgba(255,255,255,0.4);\">\n                        <span class=\"material-symbols-outlined\">mail<\/span>\n                        Get Involved\n                    <\/a>\n                <\/div>\n\n                <p class=\"stma-donate-scripture anim-child anim-delay-4\">\n                    &#8220;Each of you should give what you have decided in your heart to give,\n                    not reluctantly or under compulsion, for God loves a cheerful giver.&#8221;\n                    &mdash; 2 Corinthians 9:7\n                <\/p>\n            <\/div>\n        <\/section>\n\n\n        <!-- ============================================\n             NEWSLETTER\n             ============================================ -->\n        <section class=\"stma-section stma-newsletter\" id=\"newsletter\">\n            <div class=\"stma-container\">\n                <div class=\"stma-newsletter-inner\">\n                    <div class=\"stma-newsletter-text\">\n                        <h3>Stay Connected<\/h3>\n                        <p>Subscribe to our weekly parish bulletin and updates.<\/p>\n                    <\/div>\n                    <form class=\"stma-newsletter-form\" onsubmit=\"event.preventDefault();\">\n                        <input type=\"email\" placeholder=\"Enter your email address\" required>\n                        <button type=\"submit\">Subscribe<\/button>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/section>\n\n    <\/div><!-- end stma-bg-wrapper -->\n\n\n    <!-- ============================================\n         SCROLL ANIMATION SCRIPT - OPTIMIZED\n         ============================================ -->\n    <script>\n        (function () {\n            'use strict';\n\n            var animatedElements = document.querySelectorAll(\n                '.anim-section, .anim-child, .anim-left, .anim-right, .anim-pop'\n            );\n\n            if (!animatedElements.length) return;\n\n            var observer = new IntersectionObserver(function (entries) {\n                requestAnimationFrame(function () {\n                    for (var i = 0; i < entries.length; i++) {\n                        if (entries[i].isIntersecting) {\n                            entries[i].target.classList.add('in-view');\n                            observer.unobserve(entries[i].target);\n                        }\n                    }\n                });\n            }, {\n                threshold: 0.15,\n                rootMargin: '0px 0px -40px 0px'\n            });\n\n            requestAnimationFrame(function () {\n                for (var i = 0; i < animatedElements.length; i++) {\n                    observer.observe(animatedElements[i]);\n                }\n            });\n\n            \/\/ Clean up will-change after animations complete\n            setTimeout(function () {\n                for (var i = 0; i < animatedElements.length; i++) {\n                    if (animatedElements[i].classList.contains('in-view')) {\n                        animatedElements[i].style.willChange = 'auto';\n                    }\n                }\n            }, 3000);\n        })();\n    <\/script>\n\n\n<\/div>\n\n\n\n\n\n\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-26e535ad alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');\n\n\/* =========================================================\n   SMC UPDATES SECTION \u2014 Crimson Red & Gold\n   ========================================================= *\/\n\n.smc-updates-section {\n  --maroon: #79021c;\n  --maroon-dark: #580115;\n  --maroon-deeper: #3d000e;\n  --maroon-light: #9e1535;\n  --white: #ffffff;\n  --cream: #fdfaf5;\n  --cream-warm: #f5efe5;\n  --gold: #c9a84c;\n  --gold-light: #e3d18a;\n  --gold-muted: #d4bc72;\n  --gold-dark: #a07d30;\n  --ink: #1a1a1a;\n  --ink-soft: #3a3a3a;\n  --ink-muted: #777777;\n  --ink-faint: #aaaaaa;\n  --border: #e5dfd6;\n  --border-light: #f0ebe3;\n  --shadow-sm: 0 2px 12px rgba(0,0,0,0.05);\n  --shadow-md: 0 8px 30px rgba(0,0,0,0.08);\n  --shadow-lg: 0 16px 50px rgba(0,0,0,0.12);\n  --glow-maroon: 0 8px 28px rgba(121,2,28,0.2);\n  --glow-gold: 0 8px 28px rgba(201,168,76,0.25);\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 12px;\n  --ease: cubic-bezier(0.22, 1, 0.36, 1);\n  --fast: 0.25s cubic-bezier(0.22, 1, 0.36, 1);\n  --normal: 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n\n  background: var(--cream);\n  padding: 90px 40px;\n  position: relative;\n  font-family: 'Lora', Georgia, serif;\n  overflow: hidden;\n}\n\n.smc-updates-section::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);\n}\n\n.smc-updates-section::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background:\n    radial-gradient(ellipse at 15% 80%, rgba(121,2,28,0.02) 0%, transparent 50%),\n    radial-gradient(ellipse at 85% 20%, rgba(201,168,76,0.03) 0%, transparent 50%);\n  pointer-events: none;\n}\n\n.smc-updates-inner {\n  max-width: 1100px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 1;\n}\n\n\/* ===== HEADER ===== *\/\n.smc-updates-header {\n  text-align: center;\n  margin-bottom: 52px;\n}\n\n.smc-updates-label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  margin-bottom: 14px;\n}\n\n.smc-updates-label::before,\n.smc-updates-label::after {\n  content: '';\n  display: block;\n  width: 30px;\n  height: 1px;\n  background: rgba(201,168,76,0.5);\n}\n\n.smc-updates-label span {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.82rem;\n  font-weight: 600;\n  letter-spacing: 0.2em;\n  text-transform: uppercase;\n  color: var(--gold);\n}\n\n.smc-updates-title {\n  font-family: 'Playfair Display', Georgia, serif;\n  font-size: clamp(26px, 3.5vw, 44px);\n  font-weight: 700;\n  color: var(--ink);\n  line-height: 1.15;\n  margin: 0 0 14px 0;\n}\n\n.smc-updates-title em {\n  font-style: italic;\n  color: var(--maroon);\n  font-weight: 500;\n}\n\n.smc-updates-desc {\n  font-family: 'Lora', Georgia, serif;\n  font-size: 0.95rem;\n  color: var(--ink-muted);\n  line-height: 1.85;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n\/* ===== FILTER TABS ===== *\/\n.smc-updates-tabs-wrap {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 40px;\n}\n\n.smc-updates-tabs {\n  display: flex;\n  gap: 0;\n  flex-wrap: wrap;\n  background: var(--white);\n  border: 1.5px solid var(--border);\n  border-radius: 50px;\n  padding: 5px;\n  box-shadow: var(--shadow-sm);\n}\n\n.smc-updates-tab {\n  padding: 10px 22px;\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.88rem;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--ink-muted);\n  background: transparent;\n  border: none;\n  border-radius: 50px;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: all var(--fast);\n  position: relative;\n}\n\n.smc-updates-tab:hover {\n  color: var(--maroon);\n  background: rgba(121,2,28,0.04);\n}\n\n.smc-updates-tab.active {\n  color: var(--white);\n  background: linear-gradient(135deg, var(--maroon), var(--maroon-light));\n  box-shadow: 0 4px 16px rgba(121,2,28,0.25);\n}\n\n.smc-updates-tab.active:hover {\n  color: var(--white);\n  background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));\n}\n\n\/* ===== GRID ===== *\/\n.smc-updates-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 22px;\n  min-height: 200px;\n}\n\n.smc-updates-grid.is-loading {\n  opacity: 0.4;\n  pointer-events: none;\n  transition: opacity 0.25s;\n}\n\n\/* ===== CARD ===== *\/\n.smc-update-card {\n  background: var(--white);\n  border: 1px solid var(--border-light);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n  transition: transform var(--normal), box-shadow var(--normal), border-color var(--fast);\n  opacity: 0;\n}\n\n.smc-update-card:hover {\n  transform: translateY(-6px);\n  box-shadow: var(--shadow-lg);\n  border-color: transparent;\n}\n\n.smc-update-card a {\n  text-decoration: none !important;\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n\/* Card image *\/\n.smc-update-card-img {\n  width: 100%;\n  aspect-ratio: 16\/9;\n  background: linear-gradient(135deg, rgba(121,2,28,0.03), rgba(201,168,76,0.04));\n  border-bottom: 1px solid var(--border-light);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  overflow: hidden;\n}\n\n.smc-update-card-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.smc-update-card:hover .smc-update-card-img img {\n  transform: scale(1.06);\n}\n\n.smc-update-card-img svg {\n  width: 32px;\n  height: 32px;\n  stroke: rgba(121,2,28,0.15);\n  fill: none;\n  stroke-width: 1.5;\n}\n\n.smc-update-card-cat {\n  position: absolute;\n  top: 12px;\n  left: 12px;\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.7rem;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  background: rgba(121,2,28,0.9);\n  color: var(--gold-light);\n  padding: 5px 12px;\n  border-radius: 3px;\n  backdrop-filter: blur(6px);\n}\n\n\/* Card body *\/\n.smc-update-card-body {\n  padding: 24px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.smc-update-card-date {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.76rem;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--gold);\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.smc-update-card-date::before {\n  content: '';\n  display: block;\n  width: 16px;\n  height: 1.5px;\n  background: var(--gold);\n  border-radius: 1px;\n}\n\n.smc-update-card-title {\n  font-family: 'Playfair Display', Georgia, serif;\n  font-size: 1.08rem;\n  font-weight: 700;\n  color: var(--ink);\n  line-height: 1.4;\n  margin: 0 0 10px 0;\n  flex: 1;\n  transition: color var(--fast);\n}\n\n.smc-update-card:hover .smc-update-card-title {\n  color: var(--maroon);\n}\n\n.smc-update-card-excerpt {\n  font-family: 'Lora', Georgia, serif;\n  font-size: 0.82rem;\n  color: var(--ink-muted);\n  line-height: 1.7;\n  margin: 0;\n}\n\n\/* Card bottom accent *\/\n.smc-update-card::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: linear-gradient(90deg, var(--maroon), var(--gold));\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform var(--normal);\n}\n\n.smc-update-card:hover::after {\n  transform: scaleX(1);\n}\n\n\/* ===== PAGINATION ===== *\/\n.smc-updates-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  margin-top: 40px;\n  flex-wrap: wrap;\n}\n\n.smc-updates-page-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 40px;\n  height: 40px;\n  padding: 0 14px;\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.88rem;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  color: var(--ink-muted);\n  background: var(--white);\n  border: 1.5px solid var(--border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  transition: all var(--fast);\n  text-decoration: none !important;\n}\n\n.smc-updates-page-btn:hover:not(.disabled):not(.active) {\n  color: var(--maroon);\n  border-color: rgba(121,2,28,0.3);\n  background: rgba(121,2,28,0.03);\n}\n\n.smc-updates-page-btn.active {\n  color: var(--white);\n  background: linear-gradient(135deg, var(--maroon), var(--maroon-light));\n  border-color: transparent;\n  box-shadow: 0 4px 14px rgba(121,2,28,0.25);\n  cursor: default;\n}\n\n.smc-updates-page-btn.disabled {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none;\n}\n\n.smc-updates-page-btn svg {\n  width: 12px;\n  height: 12px;\n  stroke: currentColor;\n  fill: none;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n\/* ===== FOOTER BAR ===== *\/\n.smc-updates-footer {\n  margin-top: 24px;\n  background: var(--white);\n  border: 1px solid var(--border-light);\n  border-radius: var(--radius-md);\n  padding: 20px 28px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.smc-updates-footer span {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.82rem;\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--ink-muted);\n}\n\n.smc-updates-all-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.88rem;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--maroon);\n  text-decoration: none !important;\n  border-bottom: 1.5px solid rgba(121,2,28,0.3);\n  padding-bottom: 4px;\n  transition: color var(--fast), border-color var(--fast), gap var(--fast);\n}\n\n.smc-updates-all-link:hover {\n  color: var(--maroon-dark);\n  border-color: var(--maroon);\n  gap: 12px;\n}\n\n.smc-updates-all-link svg {\n  width: 11px;\n  height: 11px;\n  stroke: var(--maroon);\n  fill: none;\n  stroke-width: 2;\n  transition: transform var(--fast);\n}\n\n.smc-updates-all-link:hover svg {\n  transform: translateX(3px);\n}\n\n\/* ===== LOADING STATE ===== *\/\n.smc-updates-loading {\n  grid-column: 1 \/ -1;\n  padding: 60px;\n  text-align: center;\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 0.88rem;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--ink-faint);\n}\n\n\/* ===== RESPONSIVE ===== *\/\n@media (max-width: 900px) {\n  .smc-updates-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .smc-updates-section {\n    padding: 60px 24px;\n  }\n}\n\n@media (max-width: 540px) {\n  .smc-updates-grid {\n    grid-template-columns: 1fr;\n  }\n  .smc-updates-page-btn {\n    min-width: 36px;\n    height: 36px;\n    font-size: 0.8rem;\n    padding: 0 10px;\n  }\n  .smc-updates-desc {\n    font-size: 0.86rem;\n  }\n  .smc-updates-tabs {\n    border-radius: var(--radius-md);\n  }\n  .smc-updates-tab {\n    padding: 8px 16px;\n    font-size: 0.78rem;\n  }\n  .smc-updates-footer {\n    flex-direction: column;\n    gap: 12px;\n    text-align: center;\n  }\n}\n<\/style>\n\n<section class=\"smc-updates-section\">\n  <div class=\"smc-updates-inner\">\n\n    <div class=\"smc-updates-header\">\n      <div class=\"smc-updates-label\">\n        <span>Parish News &amp; Announcements<\/span>\n      <\/div>\n      <h2 class=\"smc-updates-title\">St. Michael the Archangel <em>Latest Updates<\/em><\/h2>\n      <p class=\"smc-updates-desc\">Stay connected with the latest news, upcoming events, spiritual reflections, and important announcements from St. Michael the Archangel Mission Center community.<\/p>\n    <\/div>\n\n    <div class=\"smc-updates-tabs-wrap\">\n      <div class=\"smc-updates-tabs\" id=\"updatesTabs\"><\/div>\n    <\/div>\n\n    <div class=\"smc-updates-grid\" id=\"updatesGrid\">\n      <div class=\"smc-updates-loading\">Loading posts...<\/div>\n    <\/div>\n\n    <div class=\"smc-updates-pagination\" id=\"updatesPagination\"><\/div>\n\n    <div class=\"smc-updates-footer\">\n      <span id=\"updatesCount\"><\/span>\n      <a class=\"smc-updates-all-link\" id=\"updatesAllLink\" href=\"https:\/\/demo5.yinwoodweb.com\/malaya\/updates\/\">\n        View All Posts\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n\n  var SITE_URL = 'https:\/\/demo5.yinwoodweb.com\/malaya';\n  var API_URL  = SITE_URL + '\/wp-json\/wp\/v2';\n  var BLOG_URL = 'https:\/\/demo5.yinwoodweb.com\/malaya\/updates\/';\n  var PER_PAGE = 6;\n\n  var grid      = document.getElementById('updatesGrid');\n  var tabsEl    = document.getElementById('updatesTabs');\n  var countEl   = document.getElementById('updatesCount');\n  var paginEl   = document.getElementById('updatesPagination');\n\n  var currentPage    = 1;\n  var totalPages     = 1;\n  var currentCatId   = '';\n  var currentCatSlug = '';\n\n  \/* Calendar icon SVG for date *\/\n  var calIconSvg = '<svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>';\n\n  function formatDate(str){\n    return new Date(str).toLocaleDateString('en-PH',{year:'numeric',month:'short',day:'numeric'});\n  }\n\n  function stripHtml(html){\n    var div = document.createElement('div');\n    div.innerHTML = html;\n    return (div.textContent || div.innerText || '').trim();\n  }\n\n  function getCategory(embedded){\n    var cat = 'Parish';\n    if(!embedded || !embedded['wp:term']) return cat;\n    var found = false;\n    embedded['wp:term'].forEach(function(group){\n      if(found) return;\n      group.forEach(function(term){\n        if(!found && term.taxonomy === 'category' && term.name){\n          cat = term.name;\n          found = true;\n        }\n      });\n    });\n    return cat;\n  }\n\n  function getThumb(embedded, title){\n    if(\n      embedded &&\n      embedded['wp:featuredmedia'] &&\n      embedded['wp:featuredmedia'][0] &&\n      embedded['wp:featuredmedia'][0].source_url\n    ){\n      return '<img decoding=\"async\" src=\"'+embedded['wp:featuredmedia'][0].source_url+'\" alt=\"'+title+'\" loading=\"lazy\">';\n    }\n    return '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>';\n  }\n\n  function render(posts){\n    grid.innerHTML = '';\n    if(!posts || !posts.length){\n      grid.innerHTML = '<div class=\"smc-updates-loading\">No posts found.<\/div>';\n      countEl.textContent = '0 posts';\n      paginEl.innerHTML = '';\n      return;\n    }\n    posts.forEach(function(p, idx){\n      var cat     = getCategory(p._embedded);\n      var thumb   = getThumb(p._embedded, p.title.rendered);\n      var excerpt = stripHtml(p.excerpt.rendered)\n                      .replace(\/(&hellip;|[\\u2026\\u2026])\/g,'')\n                      .trim();\n      if(excerpt.length > 110) excerpt = excerpt.substring(0,110) + '\\u2026';\n\n      var card = document.createElement('div');\n      card.className = 'smc-update-card';\n      card.style.opacity = '0';\n      card.innerHTML =\n        '<a href=\"'+BLOG_URL+'\">'+\n          '<div class=\"smc-update-card-img\">'+\n            thumb+\n            '<span class=\"smc-update-card-cat\">'+cat+'<\/span>'+\n          '<\/div>'+\n          '<div class=\"smc-update-card-body\">'+\n            '<div class=\"smc-update-card-date\">'+formatDate(p.date)+'<\/div>'+\n            '<h3 class=\"smc-update-card-title\">'+p.title.rendered+'<\/h3>'+\n            '<p class=\"smc-update-card-excerpt\">'+excerpt+'<\/p>'+\n          '<\/div>'+\n        '<\/a>';\n      grid.appendChild(card);\n      setTimeout(function(){ card.style.opacity = '1'; }, 50 + idx * 60);\n    });\n    countEl.textContent = 'Page '+currentPage+' of '+totalPages+' \\u00B7 Showing '+posts.length+' post'+(posts.length !== 1 ? 's' : '');\n  }\n\n  function renderPagination(){\n    paginEl.innerHTML = '';\n    if(totalPages <= 1) return;\n\n    var prevBtn = document.createElement('button');\n    prevBtn.className = 'smc-updates-page-btn' + (currentPage <= 1 ? ' disabled' : '');\n    prevBtn.innerHTML = '<svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>';\n    prevBtn.title = 'Previous page';\n    if(currentPage > 1){ prevBtn.onclick = function(){ goToPage(currentPage - 1); }; }\n    paginEl.appendChild(prevBtn);\n\n    var pages = getPagesToShow(currentPage, totalPages);\n    pages.forEach(function(p){\n      if(p === '...'){\n        var dots = document.createElement('span');\n        dots.className = 'smc-updates-page-btn disabled';\n        dots.textContent = '\\u2026';\n        dots.style.cursor = 'default';\n        dots.style.border = 'none';\n        dots.style.background = 'transparent';\n        paginEl.appendChild(dots);\n      } else {\n        var btn = document.createElement('button');\n        btn.className = 'smc-updates-page-btn' + (p === currentPage ? ' active' : '');\n        btn.textContent = p;\n        if(p !== currentPage){ btn.onclick = (function(pg){ return function(){ goToPage(pg); }; })(p); }\n        paginEl.appendChild(btn);\n      }\n    });\n\n    var nextBtn = document.createElement('button');\n    nextBtn.className = 'smc-updates-page-btn' + (currentPage >= totalPages ? ' disabled' : '');\n    nextBtn.innerHTML = '<svg viewBox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg>';\n    nextBtn.title = 'Next page';\n    if(currentPage < totalPages){ nextBtn.onclick = function(){ goToPage(currentPage + 1); }; }\n    paginEl.appendChild(nextBtn);\n  }\n\n  function getPagesToShow(current, total){\n    var pages = [];\n    if(total <= 7){ for(var i=1;i<=total;i++) pages.push(i); return pages; }\n    pages.push(1);\n    if(current > 3) pages.push('...');\n    var start = Math.max(2, current - 1);\n    var end   = Math.min(total - 1, current + 1);\n    for(var j = start; j <= end; j++) pages.push(j);\n    if(current < total - 2) pages.push('...');\n    pages.push(total);\n    return pages;\n  }\n\n  function goToPage(page){\n    if(page < 1 || page > totalPages || page === currentPage) return;\n    currentPage = page;\n    fetchPosts(currentCatId, currentCatSlug);\n    var section = document.querySelector('.smc-updates-section');\n    if(section){\n      var y = section.getBoundingClientRect().top + window.pageYOffset - 20;\n      window.scrollTo({top: y, behavior: 'smooth'});\n    }\n  }\n\n  function setActiveTab(btn){\n    tabsEl.querySelectorAll('.smc-updates-tab').forEach(function(t){ t.classList.remove('active'); });\n    btn.classList.add('active');\n  }\n\n  function fetchPosts(catId, catSlug){\n    grid.classList.add('is-loading');\n    grid.innerHTML = '<div class=\"smc-updates-loading\">Loading...<\/div>';\n    paginEl.innerHTML = '';\n\n    currentCatId   = catId || '';\n    currentCatSlug = catSlug || '';\n\n    var url = API_URL+'\/posts?per_page='+PER_PAGE+'&page='+currentPage+'&_embed=1&orderby=date&order=desc';\n    if(catId){ url += '&categories='+catId; }\n\n    fetch(url)\n      .then(function(r){\n        totalPages = parseInt(r.headers.get('X-WP-TotalPages')) || 1;\n        if(currentPage > totalPages && totalPages > 0){\n          currentPage = totalPages;\n          return fetchPosts(currentCatId, currentCatSlug);\n        }\n        return r.json().then(function(posts){\n          grid.classList.remove('is-loading');\n          render(posts);\n          renderPagination();\n        });\n      })\n      .catch(function(){\n        grid.classList.remove('is-loading');\n        grid.innerHTML = '<div class=\"smc-updates-loading\">Could not load posts.<\/div>';\n      });\n  }\n\n  function buildTabs(categories){\n    tabsEl.innerHTML = '';\n\n    var allBtn = document.createElement('button');\n    allBtn.className = 'smc-updates-tab active';\n    allBtn.textContent = 'All';\n    allBtn.onclick = function(){\n      setActiveTab(allBtn);\n      currentPage = 1;\n      fetchPosts('', '');\n    };\n    tabsEl.appendChild(allBtn);\n\n    categories\n      .filter(function(c){ return c.slug !== 'uncategorized' && c.count > 0; })\n      .forEach(function(c){\n        var btn = document.createElement('button');\n        btn.className = 'smc-updates-tab';\n        btn.textContent = c.name;\n        btn.onclick = function(){\n          setActiveTab(btn);\n          currentPage = 1;\n          fetchPosts(c.id, c.slug);\n        };\n        tabsEl.appendChild(btn);\n      });\n  }\n\n  fetch(API_URL+'\/categories?per_page=100&orderby=name&order=asc')\n    .then(function(r){ return r.json(); })\n    .then(function(cats){\n      buildTabs(cats);\n      fetchPosts('', '');\n    })\n    .catch(function(){\n      tabsEl.innerHTML = '';\n      var allBtn = document.createElement('button');\n      allBtn.className = 'smc-updates-tab active';\n      allBtn.textContent = 'All';\n      allBtn.onclick = function(){ currentPage=1; fetchPosts('',''); };\n      tabsEl.appendChild(allBtn);\n      fetchPosts('', '');\n    });\n\n})();\n<\/script><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Diocese of Gumaca St. Michael The Archangel Mission Center St. Michael the Archangel Mission Center shield Faith. Service. Community. A [&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":"","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":"St. Michael the Archangel Mission Center - General Luna, Quezon","description":"St. Michael the Archangel Mission Center - General Luna, Quezon is a parish church under the Diocese of Gumaca."},"footnotes":""},"class_list":["post-6","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":"Diocese of Gumaca","author_link":"https:\/\/demo5.yinwoodweb.com\/malaya\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":"Diocese of Gumaca St. Michael The Archangel Mission Center St. Michael the Archangel Mission Center shield Faith. Service. Community. A [&hellip;]","_links":{"self":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":68,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":497,"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/pages\/6\/revisions\/497"}],"wp:attachment":[{"href":"https:\/\/demo5.yinwoodweb.com\/malaya\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}