Contact Us \u2014 Hero \u00b7 Sta. Barbara Mission Center<\/title>\n<\/head>\n<body style=\"margin:0;padding:0;background:#0d0120;\">\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Inter:wght@300;400;500;600&display=swap\">\n\n<style>\n\/* \u2550\u2550 ALL SCOPED TO #sbmc-ch \u2014 zero bleed \u2550\u2550 *\/\n#sbmc-ch {\n --ch-pd: #1e0a3c; --ch-pm: #3b1278; --ch-pg: #6b35b8;\n --ch-gb: #f0c040; --ch-gw: #d4982a; --ch-gm: #9a6f2a;\n --ch-cr: #f9f2e3; --ch-wh: #ffffff;\n --ch-tl: rgba(255,255,255,0.87); --ch-tm: rgba(255,255,255,0.55);\n\n position: relative !important;\n width: 100% !important;\n padding: 130px 0 140px !important;\n background: linear-gradient(165deg,#080014 0%,#1a0436 28%,#2c0e56 55%,#130226 80%,#060012 100%) !important;\n overflow: hidden !important;\n color: var(--ch-wh) !important;\n font-family: 'Inter', sans-serif !important;\n box-sizing: border-box !important;\n}\n#sbmc-ch *, #sbmc-ch *::before, #sbmc-ch *::after { box-sizing: border-box; }\n#sbmc-ch p { margin: 0; padding: 0; }\n#sbmc-ch h1 { margin: 0; padding: 0; font-weight: inherit; }\n#sbmc-ch a { color: inherit; text-decoration: none; }\n\n\/* \u2500\u2500 AMBIENT GLOWS \u2500\u2500 *\/\n#sbmc-ch::before {\n content: '';\n position: absolute; top: -120px; left: 50%;\n transform: translateX(-50%);\n width: 1300px; height: 900px;\n background: radial-gradient(ellipse at 50% 22%,\n rgba(240,192,64,.16) 0%, rgba(107,53,184,.10) 38%, transparent 68%);\n pointer-events: none; z-index: 0;\n animation: chGlow1 8s ease-in-out infinite;\n}\n@keyframes chGlow1 {\n 0%,100%{ opacity:.65; transform:translateX(-50%) scale(1); }\n 50% { opacity:1; transform:translateX(-50%) scale(1.14); }\n}\n#sbmc-ch::after {\n content: '';\n position: absolute; bottom: -80px; right: 5%;\n width: 600px; height: 600px;\n background: radial-gradient(circle, rgba(107,53,184,.22), transparent 70%);\n pointer-events: none; z-index: 0;\n animation: chGlow2 10s ease-in-out infinite alternate;\n}\n@keyframes chGlow2 { from{opacity:.35} to{opacity:.8} }\n\n\/* \u2500\u2500 STAINED-GLASS ARCH SVG (left + right) \u2500\u2500 *\/\n.ch-arch-left, .ch-arch-right {\n position: absolute; top: 0; height: 100%;\n width: 220px; pointer-events: none; z-index: 1;\n opacity: .18;\n}\n.ch-arch-left { left: 0; }\n.ch-arch-right { right: 0; transform: scaleX(-1); }\n\n\/* \u2500\u2500 MOSAIC CANVAS \u2500\u2500 *\/\n#ch-canvas {\n position: absolute; top:0; left:0;\n width:100%; height:100%;\n pointer-events:none; opacity:.24; z-index:1;\n}\n\n\/* \u2500\u2500 GOLD SIDE BORDERS \u2500\u2500 *\/\n.ch-bd {\n position: absolute; top:0; bottom:0; width:5px; z-index:3;\n background: linear-gradient(180deg,transparent,var(--ch-gb),var(--ch-gw),transparent);\n animation: chBd 4s ease-in-out infinite alternate;\n}\n.ch-bd.l { left:0; } .ch-bd.r { right:0; animation-delay:2s; }\n@keyframes chBd { from{opacity:.3} to{opacity:1} }\n\n\/* \u2500\u2500 LIGHT RAYS \u2500\u2500 *\/\n.ch-rays {\n position:absolute; top:0; left:0;\n width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:1;\n}\n.ch-rays span {\n position:absolute; top:-60px; width:1px; height:130%;\n background: linear-gradient(180deg,rgba(240,192,64,.22),transparent);\n transform-origin: top center;\n animation: chRay 5s ease-in-out infinite;\n}\n@keyframes chRay { 0%,100%{opacity:.15} 50%{opacity:.82} }\n\n\/* \u2500\u2500 ROSE WINDOW \u2500\u2500 *\/\n.ch-rose {\n position:absolute; top:50%; left:50%;\n transform:translate(-50%,-50%);\n width:860px; height:860px; opacity:.06;\n pointer-events:none; z-index:1;\n animation:chRose 95s linear infinite;\n}\n@keyframes chRose {\n from{transform:translate(-50%,-50%) rotate(0)}\n to {transform:translate(-50%,-50%) rotate(360deg)}\n}\n\n\/* \u2500\u2500 PARTICLES \u2500\u2500 *\/\n#ch-ptcl { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }\n.ch-pt {\n position:absolute; border-radius:50%; pointer-events:none;\n animation:chPtD linear infinite;\n}\n@keyframes chPtD {\n 0% { transform:translateY(0) rotate(0); opacity:0; }\n 10% { opacity:1; } 90% { opacity:.4; }\n 100%{ transform:translateY(-110vh) rotate(360deg); opacity:0; }\n}\n.ch-cross {\n position:absolute; color:var(--ch-gb);\n pointer-events:none; opacity:0;\n animation:chCrossF linear infinite;\n}\n@keyframes chCrossF {\n 0% { opacity:0; transform:translateY(15px); }\n 12% { opacity:.45; }\n 88% { opacity:.08; }\n 100%{ opacity:0; transform:translateY(-100px); }\n}\n\n\/* \u2500\u2500 TOP ARCH DECO \u2500\u2500 *\/\n.ch-arch-top {\n position:absolute; top:0; left:50%;\n transform:translateX(-50%);\n width:400px; height:70px;\n pointer-events:none; z-index:3;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n INNER WRAP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ch-wrap {\n max-width: 860px; margin: 0 auto;\n padding: 0 36px;\n position: relative; z-index: 10;\n text-align: center;\n}\n\n\/* \u2500\u2500 EYEBROW \u2500\u2500 *\/\n.ch-eyebrow {\n display:flex; align-items:center; justify-content:center; gap:16px;\n margin-bottom:28px;\n opacity:0; animation:chFD .9s ease forwards .2s;\n}\n.ch-eline { width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--ch-gb)); }\n.ch-eline.r { background:linear-gradient(90deg,var(--ch-gb),transparent); }\n.ch-etext {\n font-family:'Inter',sans-serif; font-size:11px; font-weight:500;\n letter-spacing:.42em; text-transform:uppercase; color:var(--ch-gb);\n}\n\n\/* \u2500\u2500 HEADING \u2500\u2500 *\/\n.ch-heading {\n margin-bottom:22px;\n opacity:0; animation:chFD 1s ease forwards .4s;\n}\n.ch-heading .l1 {\n display:block;\n font-family:'Playfair Display',serif;\n font-size:clamp(1rem,2vw,1.3rem);\n font-weight:400; color:var(--ch-gb);\n letter-spacing:.22em; text-transform:uppercase; margin-bottom:12px;\n}\n.ch-heading .l2 {\n display:block;\n font-family:'Playfair Display',serif;\n font-size:clamp(2.8rem,6vw,5rem);\n font-weight:900; color:var(--ch-wh); line-height:1.05;\n}\n.ch-heading .l3 {\n display:block;\n font-family:'Playfair Display',serif;\n font-size:clamp(2.4rem,5vw,4rem);\n font-weight:700; font-style:italic;\n color:var(--ch-gb); line-height:1.15;\n}\n\n\/* \u2500\u2500 DESCRIPTION \u2500\u2500 *\/\n.ch-desc {\n font-family:'Cormorant Garamond',serif;\n font-size:clamp(1.1rem,2vw,1.3rem); font-weight:300;\n color:var(--ch-tl); line-height:1.88;\n max-width:720px; margin:0 auto 36px !important;\n opacity:0; animation:chFD 1s ease forwards .62s;\n}\n\n\/* \u2500\u2500 ORNAMENT \u2500\u2500 *\/\n.ch-orn {\n display:flex; align-items:center; justify-content:center; gap:14px;\n margin-bottom:44px;\n opacity:0; animation:chFI 1s ease forwards .82s;\n}\n.ch-orn span { font-size:17px; color:var(--ch-gb); line-height:1; }\n.ch-orn-line { width:70px; height:1px; background:linear-gradient(90deg,transparent,var(--ch-gm)); }\n.ch-orn-line.r { background:linear-gradient(90deg,var(--ch-gm),transparent); }\n\n\/* \u2500\u2500 CTA BUTTONS \u2500\u2500 *\/\n.ch-ctas {\n display:flex; gap:18px; justify-content:center; flex-wrap:wrap;\n opacity:0; animation:chFU 1s ease forwards 1s;\n}\n.ch-btn-gold {\n display:inline-flex; align-items:center; gap:10px;\n padding:16px 40px;\n background:linear-gradient(135deg,var(--ch-gw),var(--ch-gb));\n color:var(--ch-pd) !important; font-family:'Inter',sans-serif;\n font-size:.8rem; font-weight:700; letter-spacing:.2em;\n text-transform:uppercase; text-decoration:none !important;\n border:none; border-radius:50px;\n box-shadow:0 5px 28px rgba(240,192,64,.42);\n transition:transform .3s, box-shadow .3s;\n position:relative; overflow:hidden;\n}\n.ch-btn-gold::after {\n content:''; position:absolute; top:0; left:-100%;\n width:100%; height:100%;\n background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);\n transition:left .5s ease;\n}\n.ch-btn-gold:hover { transform:translateY(-3px); box-shadow:0 10px 38px rgba(240,192,64,.6); }\n.ch-btn-gold:hover::after { left:100%; }\n\n.ch-btn-outline {\n display:inline-flex; align-items:center; gap:10px;\n padding:15px 40px;\n background:transparent; color:var(--ch-wh) !important;\n font-family:'Inter',sans-serif; font-size:.8rem;\n font-weight:500; letter-spacing:.2em;\n text-transform:uppercase; text-decoration:none !important;\n border:1px solid rgba(255,255,255,.38); border-radius:50px;\n transition:border-color .3s, background .3s, transform .3s;\n}\n.ch-btn-outline:hover {\n border-color:var(--ch-gb);\n background:rgba(240,192,64,.09);\n transform:translateY(-3px);\n}\n\n\/* \u2500\u2500 FAITH STATEMENT STRIP \u2500\u2500 *\/\n.ch-strip {\n position:relative; margin-top:58px;\n padding:34px 48px;\n border:1px solid rgba(240,192,64,.2);\n background:rgba(240,192,64,.04);\n overflow:hidden;\n opacity:0; animation:chFI 1.2s ease forwards 1.3s;\n transition:background .4s;\n}\n.ch-strip:hover { background:rgba(240,192,64,.07); }\n.ch-strip::before,.ch-strip::after {\n content:''; position:absolute;\n width:32px; height:32px;\n border-color:rgba(240,192,64,.5); border-style:solid;\n}\n.ch-strip::before { top:10px; left:10px; border-width:2px 0 0 2px; }\n.ch-strip::after { bottom:10px; right:10px; border-width:0 2px 2px 0; }\n.ch-strip-bar {\n position:absolute; top:0; left:20%; right:20%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ch-gb),transparent);\n animation:chBarP 3s ease-in-out infinite;\n}\n@keyframes chBarP { 0%,100%{opacity:.4} 50%{opacity:1} }\n.ch-strip-inner {\n display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;\n}\n.ch-strip-item {\n display:flex; align-items:center; gap:10px;\n font-family:'Cormorant Garamond',serif;\n font-size:clamp(1rem,1.6vw,1.12rem); font-weight:300;\n color:var(--ch-tl); white-space:nowrap;\n}\n.ch-strip-item span { font-size:1.2rem; filter:drop-shadow(0 0 8px rgba(240,192,64,.55)); }\n.ch-strip-sep { width:1px; height:28px; background:rgba(240,192,64,.25); }\n\n\/* \u2500\u2500 KEYFRAMES \u2500\u2500 *\/\n@keyframes chFD { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes chFU { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes chFI { from{opacity:0} to{opacity:1} }\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media(max-width:768px){\n .ch-wrap { padding:0 24px; }\n .ch-ctas { flex-direction:column; align-items:center; }\n .ch-strip { padding:28px 22px; }\n .ch-strip-inner { flex-direction:column; gap:16px; }\n .ch-strip-sep { display:none; }\n .ch-arch-left, .ch-arch-right { width:120px; opacity:.1; }\n}\n@media(max-width:480px){\n #sbmc-ch { padding:90px 0 100px !important; }\n .ch-heading .l2 { font-size:2.5rem !important; }\n .ch-heading .l3 { font-size:2rem !important; }\n .ch-rose { width:320px !important; height:320px !important; }\n}\n<\/style>\n\n<section id=\"sbmc-ch\" aria-label=\"Contact Sta. Barbara Mission Center \u2014 Hero\">\n\n \n <div class=\"ch-arch-top\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 400 70\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n <linearGradient id=\"ch-ag\" x1=\"0\" y1=\"0\" x2=\"400\" y2=\"0\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#9a6f2a\" stop-opacity=\"0\"\/>\n <stop offset=\".5\" stop-color=\"#f0c040\"\/>\n <stop offset=\"1\" stop-color=\"#9a6f2a\" stop-opacity=\"0\"\/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M0 0C100 0 150 70 200 70C250 70 300 0 400 0\" stroke=\"url(#ch-ag)\" stroke-width=\"2\" opacity=\".65\"\/>\n <path d=\"M40 0C120 0 160 55 200 55C240 55 280 0 360 0\" stroke=\"url(#ch-ag)\" stroke-width=\"1\" opacity=\".3\"\/>\n <\/svg>\n <\/div>\n\n \n <div class=\"ch-arch-left\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 220 800\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%;\">\n <defs>\n <linearGradient id=\"ch-al\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"800\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#f0c040\" stop-opacity=\".9\"\/>\n <stop offset=\".5\" stop-color=\"#6b35b8\" stop-opacity=\".5\"\/>\n <stop offset=\"1\" stop-color=\"#f0c040\" stop-opacity=\"0\"\/>\n <\/linearGradient>\n <\/defs>\n \n <path d=\"M0 800 L0 200 Q0 0 110 0 Q220 0 220 200 L220 800Z\" stroke=\"url(#ch-al)\" stroke-width=\"1.5\" fill=\"none\"\/>\n \n <path d=\"M20 800 L20 230 Q20 40 110 40 Q200 40 200 230 L200 800Z\" stroke=\"url(#ch-al)\" stroke-width=\"0.8\" fill=\"none\" opacity=\".5\"\/>\n \n <line x1=\"0\" y1=\"400\" x2=\"220\" y2=\"400\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"550\" x2=\"220\" y2=\"550\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"650\" x2=\"220\" y2=\"650\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".25\"\/>\n \n <circle cx=\"110\" cy=\"90\" r=\"36\" stroke=\"#f0c040\" stroke-width=\".8\" fill=\"none\" opacity=\".5\"\/>\n <circle cx=\"110\" cy=\"90\" r=\"24\" stroke=\"#f0c040\" stroke-width=\".5\" fill=\"none\" opacity=\".35\"\/>\n <circle cx=\"60\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <circle cx=\"160\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <\/svg>\n <\/div>\n <div class=\"ch-arch-right\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 220 800\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%;\">\n <defs>\n <linearGradient id=\"ch-ar\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"800\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#f0c040\" stop-opacity=\".9\"\/>\n <stop offset=\".5\" stop-color=\"#6b35b8\" stop-opacity=\".5\"\/>\n <stop offset=\"1\" stop-color=\"#f0c040\" stop-opacity=\"0\"\/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M0 800 L0 200 Q0 0 110 0 Q220 0 220 200 L220 800Z\" stroke=\"url(#ch-ar)\" stroke-width=\"1.5\" fill=\"none\"\/>\n <path d=\"M20 800 L20 230 Q20 40 110 40 Q200 40 200 230 L200 800Z\" stroke=\"url(#ch-ar)\" stroke-width=\"0.8\" fill=\"none\" opacity=\".5\"\/>\n <line x1=\"0\" y1=\"400\" x2=\"220\" y2=\"400\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"550\" x2=\"220\" y2=\"550\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"650\" x2=\"220\" y2=\"650\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".25\"\/>\n <circle cx=\"110\" cy=\"90\" r=\"36\" stroke=\"#f0c040\" stroke-width=\".8\" fill=\"none\" opacity=\".5\"\/>\n <circle cx=\"110\" cy=\"90\" r=\"24\" stroke=\"#f0c040\" stroke-width=\".5\" fill=\"none\" opacity=\".35\"\/>\n <circle cx=\"60\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <circle cx=\"160\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <\/svg>\n <\/div>\n\n \n <canvas id=\"ch-canvas\" aria-hidden=\"true\"><\/canvas>\n\n \n <div class=\"ch-rays\" id=\"ch-rays\" aria-hidden=\"true\"><\/div>\n\n \n <svg class=\"ch-rose\" viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"200\" cy=\"200\" r=\"192\" stroke=\"#f0c040\" stroke-width=\"1.2\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"155\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"110\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"66\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"28\" stroke=\"#f0c040\" stroke-width=\"1\"\/>\n <g stroke=\"#f0c040\" stroke-width=\".7\">\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(0 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(15 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(30 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(45 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(60 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(75 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(90 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(105 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(120 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(135 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(150 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(165 200 200)\"\/>\n <\/g>\n <g fill=\"rgba(240,192,64,0.05)\" stroke=\"#f0c040\" stroke-width=\".7\">\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(0 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(30 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(60 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(90 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(120 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(150 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(180 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(210 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(240 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(270 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(300 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(330 200 200)\"\/>\n <\/g>\n <\/svg>\n\n <div class=\"ch-bd l\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-bd r\" aria-hidden=\"true\"><\/div>\n <div id=\"ch-ptcl\" aria-hidden=\"true\"><\/div>\n\n \n <div class=\"ch-wrap\">\n\n <div class=\"ch-eyebrow\" aria-hidden=\"true\">\n <span class=\"ch-eline\"><\/span>\n <span class=\"ch-etext\">Connect With Us<\/span>\n <span class=\"ch-eline r\"><\/span>\n <\/div>\n\n <h1 class=\"ch-heading\">\n <span class=\"l1\">We Would Love to Hear from You<\/span>\n <span class=\"l2\">Contact Sta. Barbara<\/span>\n <span class=\"l3\">Mission Center<\/span>\n <\/h1>\n\n <p class=\"ch-desc\">\n Whether you are seeking pastoral guidance, sacramental assistance, information about\n our ministries, or simply a warm community to call home \u2014 our doors, our hearts,\n and our mission are open to you. Reach out and let us walk together in faith.\n <\/p>\n\n <div class=\"ch-orn\" aria-hidden=\"true\">\n <span class=\"ch-orn-line\"><\/span>\n <span>\u2726<\/span><span>\u271d<\/span><span>\u2726<\/span>\n <span class=\"ch-orn-line r\"><\/span>\n <\/div>\n\n <div class=\"ch-ctas\">\n <a href=\"#sbmc-cinfo\" class=\"ch-btn-gold\">\n <span>\ud83d\udccd<\/span> View Our Location\n <\/a>\n <a href=\"#sbmc-cinfo\" class=\"ch-btn-outline\">\n <span>\u2709<\/span> Contact the Mission Center\n <\/a>\n <\/div>\n\n \n <div class=\"ch-strip\">\n <div class=\"ch-strip-bar\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-inner\">\n <div class=\"ch-strip-item\"><span>\ud83d\ude4f<\/span> Pastoral Guidance<\/div>\n <div class=\"ch-strip-sep\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-item\"><span>\u271d\ufe0f<\/span> Sacramental Services<\/div>\n <div class=\"ch-strip-sep\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-item\"><span>\ud83e\udd1d<\/span> Community Programs<\/div>\n <div class=\"ch-strip-sep\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-item\"><span>\ud83c\udf39<\/span> Spiritual Direction<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script>\n(function(){\n 'use strict';\n function initHero(){\n var sec=document.getElementById('sbmc-ch'); if(!sec) return;\n\n \/* \u2500\u2500 MOSAIC CANVAS \u2500\u2500 *\/\n (function(){\n var c=document.getElementById('ch-canvas'); if(!c) return;\n var ctx=c.getContext('2d'),W=0,H=0,tiles=[],raf;\n var COLS=['rgba(107,53,184,','rgba(59,18,120,','rgba(240,192,64,','rgba(212,152,42,',\n 'rgba(154,111,42,','rgba(180,80,200,','rgba(30,10,60,','rgba(90,20,150,'];\n function Tile(x,y,s){\n this.x=x;this.y=y;this.s=s;\n this.col=COLS[Math.floor(Math.random()*COLS.length)];\n this.ph=Math.random()*Math.PI*2; this.sp=Math.random()*.004+.001;\n }\n Tile.prototype.draw=function(t){\n var a=.04+.38*(.5+.5*Math.sin(t*this.sp+this.ph));\n ctx.fillStyle=this.col+a+')';\n ctx.fillRect(this.x+1,this.y+1,this.s-2,this.s-2);\n };\n function build(){tiles=[];var S=54;for(var x=0;x<W;x+=S)for(var y=0;y<H;y+=S)tiles.push(new Tile(x,y,S));}\n function resize(){W=c.width=sec.offsetWidth||window.innerWidth;H=c.height=sec.offsetHeight||700;build();}\n var p=0;\n function ws(){\n if(sec.offsetWidth>0&&sec.offsetHeight>0){\n resize();var t=0;\n (function l(){ctx.clearRect(0,0,W,H);t++;for(var i=0;i<tiles.length;i++)tiles[i].draw(t);raf=requestAnimationFrame(l);})();\n }else if(p++<30)setTimeout(ws,100);\n }\n ws(); window.addEventListener('resize',function(){cancelAnimationFrame(raf);resize();});\n })();\n\n \/* \u2500\u2500 LIGHT RAYS \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ch-rays'); if(!w) return;\n for(var i=0;i<18;i++){\n var s=document.createElement('span');\n s.style.cssText='left:'+(22+(56\/18)*i).toFixed(1)+'%;'+\n 'transform:rotate('+(-48+(96\/18)*i).toFixed(1)+'deg);'+\n 'animation-delay:'+(i*.28).toFixed(2)+'s;'+\n 'animation-duration:'+(4.5+Math.random()*4).toFixed(1)+'s;'+\n 'opacity:'+(0.08+Math.random()*.18).toFixed(2)+';';\n w.appendChild(s);\n }\n })();\n\n \/* \u2500\u2500 PARTICLES (dots + crosses) \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ch-ptcl'); if(!w) return;\n var dotCols=['rgba(240,192,64,','rgba(180,80,200,','rgba(107,53,184,','rgba(255,255,255,'];\n var syms=['\u2726','\u271d','\u2727','\u2720','\u25c6'];\n function spawn(type){\n var el=document.createElement('div');\n if(type==='cross'){\n el.className='ch-cross';\n el.textContent=syms[Math.floor(Math.random()*syms.length)];\n el.style.cssText='left:'+(Math.random()*94).toFixed(1)+'%;bottom:-20px;'+\n 'font-size:'+(8+Math.random()*12).toFixed(0)+'px;'+\n 'animation-duration:'+(10+Math.random()*8).toFixed(1)+'s;'+\n 'animation-delay:'+(Math.random()*5).toFixed(2)+'s;';\n } else {\n el.className='ch-pt';\n var sz=2+Math.random()*5;\n var col=dotCols[Math.floor(Math.random()*dotCols.length)];\n var al=(0.3+Math.random()*.5).toFixed(2);\n el.style.cssText='width:'+sz.toFixed(1)+'px;height:'+sz.toFixed(1)+'px;'+\n 'left:'+(Math.random()*100).toFixed(1)+'%;bottom:-10px;'+\n 'background:'+col+al+');'+\n 'animation-duration:'+(8+Math.random()*10).toFixed(1)+'s;'+\n 'animation-delay:'+(Math.random()*3).toFixed(2)+'s;'+\n 'box-shadow:0 0 '+(sz*2).toFixed(0)+'px '+col+'0.6);';\n }\n w.appendChild(el);\n setTimeout(function(){if(el.parentNode)el.parentNode.removeChild(el);},20000);\n }\n for(var i=0;i<18;i++)(function(n){setTimeout(function(){spawn(n%5===0?'cross':'dot');},n*260);})(i);\n setInterval(function(){spawn(Math.random()>.78?'cross':'dot');},1000);\n })();\n }\n\n if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',initHero);\n else initHero();\n})();\n<\/script>\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-0f5f716b alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-2'>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Contact Information \u00b7 Sta. Barbara Mission Center<\/title>\n<\/head>\n<body style=\"margin:0;padding:0;background:#0e0120;\">\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Inter:wght@300;400;500;600&display=swap\">\n\n<style>\n\/* \u2550\u2550 ALL SCOPED TO #sbmc-cinfo \u2550\u2550 *\/\n#sbmc-cinfo {\n --ci-pd: #1e0a3c; --ci-pm: #3b1278; --ci-pg: #6b35b8;\n --ci-gb: #f0c040; --ci-gw: #d4982a; --ci-gm: #9a6f2a;\n --ci-cr: #f9f2e3; --ci-wh: #ffffff;\n --ci-tl: rgba(255,255,255,0.85); --ci-tm: rgba(255,255,255,0.55);\n --ci-card: rgba(255,255,255,0.04);\n --ci-card-border: rgba(240,192,64,0.16);\n\n position: relative !important;\n width: 100% !important;\n padding: 110px 0 130px !important;\n background: linear-gradient(170deg,#0e0120 0%,#1c0438 30%,#2a0d52 58%,#130226 80%,#080014 100%) !important;\n overflow: hidden !important;\n color: var(--ci-wh) !important;\n font-family: 'Inter', sans-serif !important;\n box-sizing: border-box !important;\n}\n#sbmc-cinfo *, #sbmc-cinfo *::before, #sbmc-cinfo *::after { box-sizing: border-box; }\n#sbmc-cinfo p { margin: 0; padding: 0; }\n#sbmc-cinfo h2, #sbmc-cinfo h3, #sbmc-cinfo h4 { margin: 0; padding: 0; font-weight: inherit; }\n#sbmc-cinfo a { color: inherit; text-decoration: none; }\n\n\/* Ambient glow *\/\n#sbmc-cinfo::before {\n content: ''; position: absolute; top: -80px; left: 50%;\n transform: translateX(-50%);\n width: 1100px; height: 700px;\n background: radial-gradient(ellipse at 50% 20%,rgba(240,192,64,.12) 0%,rgba(107,53,184,.07) 40%,transparent 70%);\n pointer-events: none; z-index: 0;\n animation: ciGlow 7s ease-in-out infinite;\n}\n@keyframes ciGlow { 0%,100%{opacity:.65} 50%{opacity:1} }\n\n\/* Canvas *\/\n#ci-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; opacity:.22; z-index:1; }\n\n\/* Gold borders *\/\n.ci-bd { position:absolute; top:0; bottom:0; width:5px; z-index:3;\n background:linear-gradient(180deg,transparent,var(--ci-gb),var(--ci-gw),transparent);\n animation:ciBd 4s ease-in-out infinite alternate; }\n.ci-bd.l{left:0} .ci-bd.r{right:0;animation-delay:2s;}\n@keyframes ciBd{from{opacity:.3}to{opacity:1}}\n\n\/* Rays *\/\n.ci-rays{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1;}\n.ci-rays span{position:absolute;top:-60px;width:1px;height:130%;\n background:linear-gradient(180deg,rgba(240,192,64,.16),transparent);\n transform-origin:top center; animation:ciRay 5s ease-in-out infinite;}\n@keyframes ciRay{0%,100%{opacity:.15}50%{opacity:.72}}\n\n\/* Rose *\/\n.ci-rose{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\n width:780px;height:780px;opacity:.05;pointer-events:none;z-index:1;\n animation:ciRose 100s linear infinite;}\n@keyframes ciRose{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}\n\n\/* Particles *\/\n#ci-ptcl{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;}\n.ci-pt{position:absolute;border-radius:50%;pointer-events:none;animation:ciPtD linear infinite;}\n@keyframes ciPtD{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:.4}100%{transform:translateY(-110vh) rotate(360deg);opacity:0}}\n\n\/* \u2550\u2550 WRAP \u2550\u2550 *\/\n.ci-wrap{max-width:1140px;margin:0 auto;padding:0 36px;position:relative;z-index:10;}\n\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.ci-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px;\n opacity:0;animation:ciFD .9s ease forwards .2s;}\n.ci-eline{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--ci-gb));}\n.ci-eline.r{background:linear-gradient(90deg,var(--ci-gb),transparent);}\n.ci-etext{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--ci-gb);}\n\n.ci-headline{text-align:center;margin-bottom:14px;opacity:0;animation:ciFD 1s ease forwards .4s;}\n.ci-headline .l1{display:block;font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;color:var(--ci-wh);line-height:1.1;}\n.ci-headline .l2{display:block;font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;font-style:italic;color:var(--ci-gb);line-height:1.2;}\n\n.ci-lead{text-align:center;max-width:680px;margin:0 auto 56px !important;\n font-family:'Cormorant Garamond',serif;font-size:clamp(1.05rem,1.8vw,1.2rem);\n font-weight:300;color:var(--ci-tl);line-height:1.85;\n opacity:0;animation:ciFD 1s ease forwards .6s;}\n\n.ci-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:64px;\n opacity:0;animation:ciFI 1s ease forwards .8s;}\n.ci-orn span{font-size:17px;color:var(--ci-gb);line-height:1;}\n.ci-orn-line{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--ci-gm));}\n.ci-orn-line.r{background:linear-gradient(90deg,var(--ci-gm),transparent);}\n\n\/* \u2550\u2550 MAIN LAYOUT: left info + right map \u2550\u2550 *\/\n.ci-layout {\n display: grid;\n grid-template-columns: 1fr 1.1fr;\n gap: 28px;\n margin-bottom: 60px;\n align-items: start;\n}\n\n\/* \u2500\u2500 LEFT COLUMN: info cards stacked \u2500\u2500 *\/\n.ci-left { display: flex; flex-direction: column; gap: 20px; }\n\n\/* \u2500\u2500 CARD BASE \u2500\u2500 *\/\n.ci-card {\n position: relative;\n background: var(--ci-card);\n border: 1px solid var(--ci-card-border);\n padding: 28px 26px 24px;\n overflow: hidden;\n opacity: 0; transform: translateY(28px);\n transition: opacity .7s ease, transform .7s ease, background .4s, border-color .4s, box-shadow .4s;\n}\n#sbmc-cinfo.ci-js .ci-card { opacity:0; transform:translateY(28px); }\n#sbmc-cinfo.ci-js .ci-card.ci-show { opacity:1; transform:translateY(0); }\n\n.ci-card:hover {\n background: rgba(240,192,64,.07);\n border-color: rgba(240,192,64,.45);\n box-shadow: 0 0 36px rgba(240,192,64,.13), inset 0 0 24px rgba(240,192,64,.04);\n transform: translateY(-4px) !important;\n}\n\/* shimmer *\/\n.ci-card::before {\n content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;\n background:linear-gradient(90deg,transparent,rgba(240,192,64,.07),transparent);\n transition:left .6s ease;\n}\n.ci-card:hover::before { left:160%; }\n\/* top accent *\/\n.ci-card::after {\n content:''; position:absolute; top:0; left:15%; right:15%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ci-gb),transparent);\n opacity:0; transition:opacity .4s;\n}\n.ci-card:hover::after { opacity:1; }\n\n\/* corner brackets *\/\n.ci-cc-tl,.ci-cc-br{position:absolute;width:14px;height:14px;border-color:rgba(240,192,64,.28);border-style:solid;}\n.ci-cc-tl{top:8px;left:8px;border-width:1px 0 0 1px;}\n.ci-cc-br{bottom:8px;right:8px;border-width:0 1px 1px 0;}\n\n\/* card header row *\/\n.ci-card-head {\n display: flex; align-items: center; gap: 14px;\n margin-bottom: 18px;\n}\n.ci-card-icon {\n display: flex; align-items: center; justify-content: center;\n width: 44px; height: 44px; flex-shrink: 0;\n background: rgba(240,192,64,.1); border: 1px solid rgba(240,192,64,.25);\n border-radius: 50%; font-size: 1.2rem;\n filter: drop-shadow(0 0 8px rgba(240,192,64,.45));\n animation: ciIconG 3s ease-in-out infinite alternate;\n}\n@keyframes ciIconG{from{filter:drop-shadow(0 0 5px rgba(240,192,64,.3))}to{filter:drop-shadow(0 0 16px rgba(240,192,64,.85))}}\n\n.ci-card-label {\n font-family: 'Inter', sans-serif;\n font-size: .7rem; font-weight: 500;\n letter-spacing: .28em; text-transform: uppercase;\n color: var(--ci-gm);\n}\n\n\/* card content *\/\n.ci-card-val {\n font-family: 'Playfair Display', serif;\n font-size: 1.05rem; font-weight: 700;\n color: var(--ci-wh); line-height: 1.4;\n margin-bottom: 6px;\n}\n.ci-card-note {\n font-family: 'Cormorant Garamond', serif;\n font-size: .98rem; font-weight: 300;\n color: var(--ci-tm); line-height: 1.65;\n}\n\n\/* contact rows inside card *\/\n.ci-contact-row {\n display: flex; align-items: flex-start; gap: 12px;\n padding: 12px 0;\n border-bottom: 1px solid rgba(240,192,64,.1);\n}\n.ci-contact-row:last-child { border-bottom: none; padding-bottom: 0; }\n.ci-contact-row-icon {\n font-size: .9rem; margin-top: 2px; flex-shrink: 0;\n filter: drop-shadow(0 0 6px rgba(240,192,64,.4));\n}\n.ci-contact-row-content {}\n.ci-contact-row-label {\n font-family: 'Inter', sans-serif; font-size: .65rem;\n letter-spacing: .2em; text-transform: uppercase; color: var(--ci-gm);\n display: block; margin-bottom: 3px;\n}\n.ci-contact-row-val {\n font-family: 'Playfair Display', serif; font-size: .98rem;\n font-weight: 700; color: var(--ci-wh); display: block;\n}\n.ci-contact-row-val a {\n color: var(--ci-wh); transition: color .3s;\n}\n.ci-contact-row-val a:hover { color: var(--ci-gb); }\n\n\/* Hours grid *\/\n.ci-hours-grid {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 8px 16px; margin-top: 4px;\n}\n.ci-hour-row {}\n.ci-hour-day {\n font-family: 'Inter', sans-serif; font-size: .68rem;\n letter-spacing: .12em; text-transform: uppercase;\n color: var(--ci-gm); display: block; margin-bottom: 2px;\n}\n.ci-hour-time {\n font-family: 'Cormorant Garamond', serif; font-size: .98rem;\n font-weight: 400; color: var(--ci-tl);\n}\n\n\/* Social card *\/\n.ci-social-row {\n display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px;\n}\n.ci-social-btn {\n display: inline-flex; align-items: center; gap: 9px;\n padding: 10px 18px;\n background: rgba(240,192,64,.08); border: 1px solid rgba(240,192,64,.22);\n border-radius: 50px; text-decoration: none !important;\n font-family: 'Inter', sans-serif; font-size: .72rem;\n font-weight: 600; letter-spacing: .12em; text-transform: uppercase;\n color: var(--ci-gb) !important;\n transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;\n}\n.ci-social-btn:hover {\n background: rgba(240,192,64,.16); border-color: var(--ci-gb);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(240,192,64,.25);\n}\n.ci-social-btn .si { font-size: 1rem; }\n\n\/* \u2500\u2500 RIGHT COLUMN: map card \u2500\u2500 *\/\n.ci-map-card {\n position: relative;\n background: var(--ci-card);\n border: 1px solid var(--ci-card-border);\n overflow: hidden;\n opacity: 0; transform: translateY(28px);\n transition: opacity .7s ease, transform .7s ease;\n height: 100%;\n}\n#sbmc-cinfo.ci-js .ci-map-card { opacity:0; transform:translateY(28px); }\n#sbmc-cinfo.ci-js .ci-map-card.ci-show { opacity:1; transform:translateY(0); }\n\n.ci-map-card:hover { border-color: rgba(240,192,64,.4); }\n.ci-map-card::after {\n content:''; position:absolute; top:0; left:15%; right:15%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ci-gb),transparent);\n opacity:0; transition:opacity .4s; z-index:2;\n}\n.ci-map-card:hover::after { opacity:1; }\n.ci-mc-tl,.ci-mc-br{position:absolute;width:16px;height:16px;border-color:rgba(240,192,64,.3);border-style:solid;z-index:2;}\n.ci-mc-tl{top:8px;left:8px;border-width:1px 0 0 1px;}\n.ci-mc-br{bottom:8px;right:8px;border-width:0 1px 1px 0;}\n\n.ci-map-header {\n padding: 22px 26px 18px;\n border-bottom: 1px solid rgba(240,192,64,.12);\n display: flex; align-items: center; gap: 12px;\n}\n.ci-map-header-icon {\n display: flex; align-items: center; justify-content: center;\n width: 38px; height: 38px; flex-shrink: 0;\n background: rgba(240,192,64,.1); border: 1px solid rgba(240,192,64,.25);\n border-radius: 50%; font-size: 1.1rem;\n filter: drop-shadow(0 0 8px rgba(240,192,64,.45));\n animation: ciIconG 3s ease-in-out infinite alternate;\n}\n.ci-map-header-text {}\n.ci-map-header-label {\n font-family: 'Inter', sans-serif; font-size: .65rem;\n letter-spacing: .28em; text-transform: uppercase; color: var(--ci-gm); display: block;\n}\n.ci-map-header-val {\n font-family: 'Playfair Display', serif; font-size: .98rem;\n font-weight: 700; color: var(--ci-wh);\n}\n\n\/* The actual map embed area *\/\n.ci-map-embed {\n position: relative; width: 100%;\n height: 420px;\n background: linear-gradient(135deg, rgba(30,10,60,.9), rgba(59,18,120,.6));\n overflow: hidden;\n}\n.ci-map-embed iframe {\n position: absolute; top: 0; left: 0;\n width: 100%; height: 100%;\n border: 0; display: block;\n}\n\n\/* Themed overlay that reveals the map on load *\/\n.ci-map-overlay {\n position: absolute; inset: 0; z-index: 2;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: 16px; text-align: center; padding: 30px;\n background: linear-gradient(135deg, rgba(14,1,32,.97), rgba(26,4,56,.94));\n pointer-events: none;\n transition: opacity 1.4s ease 0.8s, visibility 0s 2.2s;\n}\n.ci-map-overlay.ci-map-loaded {\n opacity: 0; visibility: hidden;\n}\n.ci-map-overlay-icon {\n font-size: 3rem;\n filter: drop-shadow(0 0 16px rgba(240,192,64,.6));\n animation: ciIconG 3s ease-in-out infinite alternate;\n}\n.ci-map-overlay-title {\n font-family: 'Playfair Display', serif; font-size: 1.1rem;\n font-weight: 700; color: var(--ci-gb);\n}\n.ci-map-overlay-addr {\n font-family: 'Cormorant Garamond', serif; font-size: 1rem;\n font-weight: 300; color: var(--ci-tl); line-height: 1.7;\n}\n.ci-map-overlay-note {\n font-family: 'Inter', sans-serif; font-size: .7rem;\n letter-spacing: .15em; text-transform: uppercase;\n color: var(--ci-gm); margin-top: 4px;\n}\n.ci-map-overlay-spinner {\n width: 32px; height: 32px;\n border: 2px solid rgba(240,192,64,.2);\n border-top-color: var(--ci-gb);\n border-radius: 50%;\n animation: ciSpin .9s linear infinite;\n}\n@keyframes ciSpin { to { transform: rotate(360deg); } }\n\n\/* Map overlay grid pattern *\/\n.ci-map-grid {\n position: absolute; inset: 0; pointer-events: none; z-index: 1;\n background-image:\n linear-gradient(rgba(240,192,64,.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(240,192,64,.04) 1px, transparent 1px);\n background-size: 40px 40px;\n}\n\n.ci-map-directions {\n padding: 16px 26px;\n border-top: 1px solid rgba(240,192,64,.12);\n display: flex; align-items: center; justify-content: space-between; gap: 14px;\n}\n.ci-map-addr-small {\n font-family: 'Cormorant Garamond', serif; font-size: .95rem;\n font-weight: 300; color: var(--ci-tm); line-height: 1.5;\n}\n.ci-dir-btn {\n display: inline-flex; align-items: center; gap: 8px;\n padding: 10px 22px; flex-shrink: 0;\n background: linear-gradient(135deg,var(--ci-gw),var(--ci-gb));\n color: var(--ci-pd) !important; font-family: 'Inter', sans-serif;\n font-size: .72rem; font-weight: 700; letter-spacing: .16em;\n text-transform: uppercase; text-decoration: none !important;\n border-radius: 50px;\n transition: transform .3s, box-shadow .3s;\n box-shadow: 0 4px 18px rgba(240,192,64,.32);\n}\n.ci-dir-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(240,192,64,.5); }\n\n\/* \u2550\u2550 BOTTOM ROW: closing message \u2550\u2550 *\/\n.ci-closing {\n position: relative; text-align: center;\n padding: 50px 56px 46px;\n border: 1px solid rgba(240,192,64,.18);\n background: rgba(240,192,64,.03); overflow: hidden;\n opacity: 0; animation: ciFI 1.2s ease forwards 1.8s;\n transition: background .4s, transform .4s;\n}\n.ci-closing:hover { background: rgba(240,192,64,.06); transform: translateY(-3px); }\n.ci-closing::before,.ci-closing::after {\n content:''; position:absolute; width:38px; height:38px;\n border-color:rgba(240,192,64,.5); border-style:solid;\n}\n.ci-closing::before { top:12px; left:12px; border-width:2px 0 0 2px; }\n.ci-closing::after { bottom:12px; right:12px; border-width:0 2px 2px 0; }\n.ci-closing-bar {\n position:absolute; top:0; left:20%; right:20%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ci-gb),transparent);\n animation:ciBarP 3s ease-in-out infinite;\n}\n@keyframes ciBarP{0%,100%{opacity:.4}50%{opacity:1}}\n.ci-closing-icon { font-size:1.8rem; display:block; margin-bottom:14px;\n filter:drop-shadow(0 0 12px rgba(240,192,64,.6));\n animation:ciIconG 3s ease-in-out infinite alternate; }\n.ci-closing-qmark {\n font-family:'Playfair Display',serif; font-size:4.5rem; line-height:0;\n vertical-align:-.42em; color:var(--ci-gb); opacity:.18; display:inline;\n}\n.ci-closing-text {\n font-family:'Cormorant Garamond',serif;\n font-size:clamp(1.1rem,2vw,1.4rem);\n font-style:italic; font-weight:300; color:var(--ci-cr);\n line-height:1.8; margin-bottom:16px !important;\n}\n.ci-closing-attr {\n font-family:'Inter',sans-serif; font-size:.7rem;\n letter-spacing:.26em; text-transform:uppercase; color:var(--ci-gm);\n}\n\n\/* \u2500\u2500 KEYFRAMES \u2500\u2500 *\/\n@keyframes ciFD { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes ciFI { from{opacity:0} to{opacity:1} }\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media(max-width:1024px){\n .ci-layout { grid-template-columns: 1fr 1fr; }\n}\n@media(max-width:860px){\n .ci-layout { grid-template-columns: 1fr; }\n .ci-map-card { height: auto; }\n .ci-map-embed { height: 320px; }\n .ci-closing { padding: 38px 22px; }\n .ci-map-directions { flex-direction: column; align-items: flex-start; gap: 12px; }\n .ci-dir-btn { width: 100%; justify-content: center; }\n}\n@media(max-width:600px){\n .ci-wrap { padding: 0 20px; }\n .ci-hours-grid { grid-template-columns: 1fr; }\n .ci-social-row { gap: 10px; }\n #sbmc-cinfo { padding: 80px 0 100px !important; }\n .ci-rose { width: 320px !important; height: 320px !important; }\n}\n@media(max-width:480px){\n .ci-headline .l1, .ci-headline .l2 { font-size: 2.2rem !important; }\n}\n<\/style>\n\n<section id=\"sbmc-cinfo\" aria-label=\"Contact Information \u2014 Sta. Barbara Mission Center\">\n <canvas id=\"ci-canvas\" aria-hidden=\"true\"><\/canvas>\n <div class=\"ci-rays\" id=\"ci-rays\" aria-hidden=\"true\"><\/div>\n\n \n <svg class=\"ci-rose\" viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"200\" cy=\"200\" r=\"192\" stroke=\"#f0c040\" stroke-width=\"1.2\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"155\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"110\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"66\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"28\" stroke=\"#f0c040\" stroke-width=\"1\"\/>\n <g stroke=\"#f0c040\" stroke-width=\".7\">\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(0 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(15 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(30 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(45 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(60 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(75 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(90 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(105 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(120 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(135 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(150 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(165 200 200)\"\/>\n <\/g>\n <g fill=\"rgba(240,192,64,0.05)\" stroke=\"#f0c040\" stroke-width=\".7\">\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(0 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(30 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(60 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(90 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(120 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(150 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(180 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(210 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(240 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(270 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(300 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(330 200 200)\"\/>\n <\/g>\n <\/svg>\n\n <div class=\"ci-bd l\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-bd r\" aria-hidden=\"true\"><\/div>\n <div id=\"ci-ptcl\" aria-hidden=\"true\"><\/div>\n\n <div class=\"ci-wrap\">\n\n \n <div class=\"ci-eyebrow\" aria-hidden=\"true\">\n <span class=\"ci-eline\"><\/span>\n <span class=\"ci-etext\">Find Us \u00b7 Reach Us \u00b7 Know Us<\/span>\n <span class=\"ci-eline r\"><\/span>\n <\/div>\n <h2 class=\"ci-headline\">\n <span class=\"l1\">Mission Center<\/span>\n <span class=\"l2\">Contact & Location<\/span>\n <\/h2>\n <p class=\"ci-lead\">\n Our doors are always open to you. Visit us, call us, or send us a message \u2014\n we are here to serve, to listen, and to walk with you on your journey of faith.\n <\/p>\n <div class=\"ci-orn\" aria-hidden=\"true\">\n <span class=\"ci-orn-line\"><\/span>\n <span>\u2726<\/span><span>\u271d<\/span><span>\u2726<\/span>\n <span class=\"ci-orn-line r\"><\/span>\n <\/div>\n\n \n <div class=\"ci-layout\">\n\n \n <div class=\"ci-left\" id=\"ci-left\">\n\n \n <div class=\"ci-card\" data-delay=\"0\" aria-label=\"Mission Center Address\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83d\udccd<\/div>\n <span class=\"ci-card-label\">Our Address<\/span>\n <\/div>\n <div class=\"ci-card-val\">Sta. Barbara Mission Center<\/div>\n <div class=\"ci-card-val\">Brgy. Casasahan Ibaba, Gumaca, Quezon<\/div>\n <p class=\"ci-card-note\">Philippines \u2014 Diocese of Lucena<\/p>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"120\" aria-label=\"Contact Numbers\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83d\udcde<\/div>\n <span class=\"ci-card-label\">Contact Numbers<\/span>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\ud83d\udc64<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">Contact Person<\/span>\n <span class=\"ci-contact-row-val\">Jose Jay<\/span>\n <\/div>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\ud83d\udcf1<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">Mobile<\/span>\n <span class=\"ci-contact-row-val\">\n <a href=\"tel:+639562616212\">0956 261 6212<\/a>\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"240\" aria-label=\"Email Address\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\u2709\ufe0f<\/div>\n <span class=\"ci-card-label\">Email Address<\/span>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\ud83d\udce7<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">General Inquiries<\/span>\n <span class=\"ci-contact-row-val\">\n <a href=\"mailto:info@stabarbara.org\">info@stabarbara.org<\/a>\n <\/span>\n <\/div>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\u26ea<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">Pastoral Concerns<\/span>\n <span class=\"ci-contact-row-val\">\n <a href=\"mailto:pastoral@stabarbara.org\">pastoral@stabarbara.org<\/a>\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"360\" aria-label=\"Office Hours\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83d\udd50<\/div>\n <span class=\"ci-card-label\">Office Hours<\/span>\n <\/div>\n <div class=\"ci-hours-grid\">\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Monday \u2013 Friday<\/span>\n <span class=\"ci-hour-time\">8:00 AM \u2013 5:00 PM<\/span>\n <\/div>\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Saturday<\/span>\n <span class=\"ci-hour-time\">8:00 AM \u2013 12:00 PM<\/span>\n <\/div>\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Sunday<\/span>\n <span class=\"ci-hour-time\">After Morning Mass<\/span>\n <\/div>\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Holy Days<\/span>\n <span class=\"ci-hour-time\">Closed \u2014 Liturgy Only<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"480\" aria-label=\"Social Media\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83c\udf10<\/div>\n <span class=\"ci-card-label\">Follow & Connect<\/span>\n <\/div>\n <div class=\"ci-social-row\">\n <a href=\"#\" class=\"ci-social-btn\" aria-label=\"Facebook\">\n <span class=\"si\">\ud83d\udcd8<\/span> Facebook\n <\/a>\n <a href=\"#\" class=\"ci-social-btn\" aria-label=\"YouTube\">\n <span class=\"si\">\u25b6\ufe0f<\/span> YouTube\n <\/a>\n <a href=\"#\" class=\"ci-social-btn\" aria-label=\"Instagram\">\n <span class=\"si\">\ud83d\udcf7<\/span> Instagram\n <\/a>\n <\/div>\n <p class=\"ci-card-note\" style=\"margin-top:14px !important;\">\n Follow us for Mass schedules, parish announcements, community events, and inspiring reflections from our Mission Center community.\n <\/p>\n <\/div>\n\n <\/div>\n\n \n <div class=\"ci-map-card\" data-map-delay=\"100\" aria-label=\"Mission Center Location Map\">\n <div class=\"ci-mc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-mc-br\" aria-hidden=\"true\"><\/div>\n\n <div class=\"ci-map-header\">\n <div class=\"ci-map-header-icon\" aria-hidden=\"true\">\ud83d\uddfa\ufe0f<\/div>\n <div class=\"ci-map-header-text\">\n <span class=\"ci-map-header-label\">Our Location<\/span>\n <span class=\"ci-map-header-val\">Brgy. Casasahan Ibaba, Gumaca, Quezon<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-map-embed\">\n <div class=\"ci-map-grid\" aria-hidden=\"true\"><\/div>\n <iframe\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d15444.289765024755!2d121.96840355!3d13.93782805!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33a35365b7f7b5e7%3A0x8a031bc0d5c7f6e!2sCasasahan%2C%20Gumaca%2C%20Quezon!5e0!3m2!1sen!2sph!4v1718000000000!5m2!1sen!2sph\"\n width=\"100%\" height=\"420\"\n style=\"border:0;display:block;\"\n allowfullscreen=\"\"\n loading=\"lazy\"\n referrerpolicy=\"no-referrer-when-downgrade\"\n title=\"Sta. Barbara Mission Center \u2014 Casasahan Ibaba, Gumaca, Quezon\">\n <\/iframe>\n \n <div class=\"ci-map-overlay\" id=\"ci-map-overlay\" aria-hidden=\"true\">\n <span class=\"ci-map-overlay-icon\">\ud83d\udccd<\/span>\n <div class=\"ci-map-overlay-title\">Sta. Barbara Mission Center<\/div>\n <div class=\"ci-map-overlay-addr\">\n Casasahan Ibaba, Gumaca, Quezon<br>\n Philippines \u2014 Diocese of Lucena\n <\/div>\n <div class=\"ci-map-overlay-spinner\"><\/div>\n <div class=\"ci-map-overlay-note\">Loading map…<\/div>\n <\/div>\n <\/div>\n\n <div class=\"ci-map-directions\">\n <div class=\"ci-map-addr-small\">\n Casasahan Ibaba<br>Gumaca, Quezon, Philippines\n <\/div>\n <a href=\"https:\/\/www.google.com\/maps\/search\/Sta.+Barbara+Mission+Center+Casasahan+Ibaba+Gumaca+Quezon\"\n target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"ci-dir-btn\" aria-label=\"Get directions on Google Maps\">\n <span>\ud83e\udded<\/span> Get Directions\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"ci-closing\">\n <div class=\"ci-closing-bar\" aria-hidden=\"true\"><\/div>\n <span class=\"ci-closing-icon\" aria-hidden=\"true\">\ud83d\udd4a\ufe0f<\/span>\n <p class=\"ci-closing-text\">\n <span class=\"ci-closing-qmark\" aria-hidden=\"true\">“<\/span>\n Ask and it will be given to you; seek and you will find;\n knock and the door will be opened to you.\n <\/p>\n <span class=\"ci-closing-attr\">\u2014 Matthew 7:7 \u00b7 Our door is always open<\/span>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script>\n(function(){\n 'use strict';\n function initInfo(){\n var sec=document.getElementById('sbmc-cinfo'); if(!sec) return;\n sec.classList.add('ci-js');\n\n \/* \u2500\u2500 CANVAS \u2500\u2500 *\/\n (function(){\n var c=document.getElementById('ci-canvas'); if(!c) return;\n var ctx=c.getContext('2d'),W=0,H=0,tiles=[],raf;\n var COLS=['rgba(107,53,184,','rgba(59,18,120,','rgba(240,192,64,','rgba(212,152,42,',\n 'rgba(154,111,42,','rgba(180,80,200,','rgba(30,10,60,','rgba(90,20,150,'];\n function Tile(x,y,s){\n this.x=x;this.y=y;this.s=s;\n this.col=COLS[Math.floor(Math.random()*COLS.length)];\n this.ph=Math.random()*Math.PI*2; this.sp=Math.random()*.004+.001;\n }\n Tile.prototype.draw=function(t){\n var a=.04+.38*(.5+.5*Math.sin(t*this.sp+this.ph));\n ctx.fillStyle=this.col+a+')';\n ctx.fillRect(this.x+1,this.y+1,this.s-2,this.s-2);\n };\n function build(){tiles=[];var S=52;for(var x=0;x<W;x+=S)for(var y=0;y<H;y+=S)tiles.push(new Tile(x,y,S));}\n function resize(){W=c.width=sec.offsetWidth||window.innerWidth;H=c.height=sec.offsetHeight||1000;build();}\n var p=0;\n function ws(){\n if(sec.offsetWidth>0&&sec.offsetHeight>0){\n resize();var t=0;\n (function l(){ctx.clearRect(0,0,W,H);t++;for(var i=0;i<tiles.length;i++)tiles[i].draw(t);raf=requestAnimationFrame(l);})();\n }else if(p++<30)setTimeout(ws,100);\n }\n ws(); window.addEventListener('resize',function(){cancelAnimationFrame(raf);resize();});\n })();\n\n \/* \u2500\u2500 RAYS \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ci-rays'); if(!w) return;\n for(var i=0;i<16;i++){\n var s=document.createElement('span');\n s.style.cssText='left:'+(25+(50\/16)*i).toFixed(1)+'%;'+\n 'transform:rotate('+(-45+(90\/16)*i).toFixed(1)+'deg);'+\n 'animation-delay:'+(i*.3).toFixed(2)+'s;'+\n 'animation-duration:'+(4+Math.random()*4).toFixed(1)+'s;'+\n 'opacity:'+(0.08+Math.random()*.18).toFixed(2)+';';\n w.appendChild(s);\n }\n })();\n\n \/* \u2500\u2500 PARTICLES \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ci-ptcl'); if(!w) return;\n var cols=['rgba(240,192,64,','rgba(180,80,200,','rgba(107,53,184,','rgba(255,255,255,'];\n function spawn(){\n var p=document.createElement('div'); p.className='ci-pt';\n var sz=2+Math.random()*6,col=cols[Math.floor(Math.random()*cols.length)],al=(0.3+Math.random()*.5).toFixed(2);\n p.style.cssText='width:'+sz.toFixed(1)+'px;height:'+sz.toFixed(1)+'px;'+\n 'left:'+(Math.random()*100).toFixed(1)+'%;bottom:-10px;'+\n 'background:'+col+al+');'+\n 'animation-duration:'+(8+Math.random()*10).toFixed(1)+'s;'+\n 'animation-delay:'+(Math.random()*3).toFixed(2)+'s;'+\n 'box-shadow:0 0 '+(sz*2).toFixed(0)+'px '+col+'0.6);';\n w.appendChild(p);\n setTimeout(function(){if(p.parentNode)p.parentNode.removeChild(p);},18000);\n }\n for(var i=0;i<14;i++)(function(n){setTimeout(spawn,n*300);})(i);\n setInterval(spawn,1200);\n })();\n\n \/* \u2500\u2500 SCROLL REVEAL \u2014 info cards \u2500\u2500 *\/\n (function(){\n var cards=sec.querySelectorAll('.ci-card'); if(!cards.length) return;\n if('IntersectionObserver' in window){\n var io=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(!e.isIntersecting) return;\n var d=parseInt(e.target.getAttribute('data-delay')||'0',10);\n (function(el,dl){setTimeout(function(){el.classList.add('ci-show');},dl);})(e.target,d);\n io.unobserve(e.target);\n });\n },{threshold:.1});\n cards.forEach(function(c){io.observe(c);});\n }else{cards.forEach(function(c){c.classList.add('ci-show');});}\n })();\n\n \/* \u2500\u2500 SCROLL REVEAL \u2014 map card \u2500\u2500 *\/\n (function(){\n var mc=sec.querySelector('.ci-map-card'); if(!mc) return;\n if('IntersectionObserver' in window){\n var io=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(!e.isIntersecting) return;\n var d=parseInt(e.target.getAttribute('data-map-delay')||'0',10);\n (function(el,dl){setTimeout(function(){el.classList.add('ci-show');},dl);})(e.target,d);\n io.unobserve(e.target);\n });\n },{threshold:.08});\n io.observe(mc);\n }else{ mc.classList.add('ci-show'); }\n })();\n\n \/* \u2500\u2500 MAP OVERLAY \u2014 fade out when iframe loads \u2500\u2500 *\/\n (function(){\n var overlay=document.getElementById('ci-map-overlay');\n var iframe=sec.querySelector('.ci-map-embed iframe');\n if(!overlay||!iframe) return;\n function dismiss(){ overlay.classList.add('ci-map-loaded'); }\n iframe.addEventListener('load',dismiss);\n \/* Fallback: dismiss after 6s even if load event doesn't fire *\/\n setTimeout(dismiss,6000);\n })();\n }\n\n if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',initInfo);\n else initInfo();\n})();\n<\/script>\n\n<\/body>\n<\/html><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"Contact Us - STA Barbara Mission Center","description":""},"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Everest Co","author_link":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/blog\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":7,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":737,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/20\/revisions\/737"}],"wp:attachment":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\nContact Us \u2014 Hero \u00b7 Sta. Barbara Mission Center<\/title>\n<\/head>\n<body style=\"margin:0;padding:0;background:#0d0120;\">\n\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Inter:wght@300;400;500;600&display=swap\">\n\n<style>\n\/* \u2550\u2550 ALL SCOPED TO #sbmc-ch \u2014 zero bleed \u2550\u2550 *\/\n#sbmc-ch {\n --ch-pd: #1e0a3c; --ch-pm: #3b1278; --ch-pg: #6b35b8;\n --ch-gb: #f0c040; --ch-gw: #d4982a; --ch-gm: #9a6f2a;\n --ch-cr: #f9f2e3; --ch-wh: #ffffff;\n --ch-tl: rgba(255,255,255,0.87); --ch-tm: rgba(255,255,255,0.55);\n\n position: relative !important;\n width: 100% !important;\n padding: 130px 0 140px !important;\n background: linear-gradient(165deg,#080014 0%,#1a0436 28%,#2c0e56 55%,#130226 80%,#060012 100%) !important;\n overflow: hidden !important;\n color: var(--ch-wh) !important;\n font-family: 'Inter', sans-serif !important;\n box-sizing: border-box !important;\n}\n#sbmc-ch *, #sbmc-ch *::before, #sbmc-ch *::after { box-sizing: border-box; }\n#sbmc-ch p { margin: 0; padding: 0; }\n#sbmc-ch h1 { margin: 0; padding: 0; font-weight: inherit; }\n#sbmc-ch a { color: inherit; text-decoration: none; }\n\n\/* \u2500\u2500 AMBIENT GLOWS \u2500\u2500 *\/\n#sbmc-ch::before {\n content: '';\n position: absolute; top: -120px; left: 50%;\n transform: translateX(-50%);\n width: 1300px; height: 900px;\n background: radial-gradient(ellipse at 50% 22%,\n rgba(240,192,64,.16) 0%, rgba(107,53,184,.10) 38%, transparent 68%);\n pointer-events: none; z-index: 0;\n animation: chGlow1 8s ease-in-out infinite;\n}\n@keyframes chGlow1 {\n 0%,100%{ opacity:.65; transform:translateX(-50%) scale(1); }\n 50% { opacity:1; transform:translateX(-50%) scale(1.14); }\n}\n#sbmc-ch::after {\n content: '';\n position: absolute; bottom: -80px; right: 5%;\n width: 600px; height: 600px;\n background: radial-gradient(circle, rgba(107,53,184,.22), transparent 70%);\n pointer-events: none; z-index: 0;\n animation: chGlow2 10s ease-in-out infinite alternate;\n}\n@keyframes chGlow2 { from{opacity:.35} to{opacity:.8} }\n\n\/* \u2500\u2500 STAINED-GLASS ARCH SVG (left + right) \u2500\u2500 *\/\n.ch-arch-left, .ch-arch-right {\n position: absolute; top: 0; height: 100%;\n width: 220px; pointer-events: none; z-index: 1;\n opacity: .18;\n}\n.ch-arch-left { left: 0; }\n.ch-arch-right { right: 0; transform: scaleX(-1); }\n\n\/* \u2500\u2500 MOSAIC CANVAS \u2500\u2500 *\/\n#ch-canvas {\n position: absolute; top:0; left:0;\n width:100%; height:100%;\n pointer-events:none; opacity:.24; z-index:1;\n}\n\n\/* \u2500\u2500 GOLD SIDE BORDERS \u2500\u2500 *\/\n.ch-bd {\n position: absolute; top:0; bottom:0; width:5px; z-index:3;\n background: linear-gradient(180deg,transparent,var(--ch-gb),var(--ch-gw),transparent);\n animation: chBd 4s ease-in-out infinite alternate;\n}\n.ch-bd.l { left:0; } .ch-bd.r { right:0; animation-delay:2s; }\n@keyframes chBd { from{opacity:.3} to{opacity:1} }\n\n\/* \u2500\u2500 LIGHT RAYS \u2500\u2500 *\/\n.ch-rays {\n position:absolute; top:0; left:0;\n width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:1;\n}\n.ch-rays span {\n position:absolute; top:-60px; width:1px; height:130%;\n background: linear-gradient(180deg,rgba(240,192,64,.22),transparent);\n transform-origin: top center;\n animation: chRay 5s ease-in-out infinite;\n}\n@keyframes chRay { 0%,100%{opacity:.15} 50%{opacity:.82} }\n\n\/* \u2500\u2500 ROSE WINDOW \u2500\u2500 *\/\n.ch-rose {\n position:absolute; top:50%; left:50%;\n transform:translate(-50%,-50%);\n width:860px; height:860px; opacity:.06;\n pointer-events:none; z-index:1;\n animation:chRose 95s linear infinite;\n}\n@keyframes chRose {\n from{transform:translate(-50%,-50%) rotate(0)}\n to {transform:translate(-50%,-50%) rotate(360deg)}\n}\n\n\/* \u2500\u2500 PARTICLES \u2500\u2500 *\/\n#ch-ptcl { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }\n.ch-pt {\n position:absolute; border-radius:50%; pointer-events:none;\n animation:chPtD linear infinite;\n}\n@keyframes chPtD {\n 0% { transform:translateY(0) rotate(0); opacity:0; }\n 10% { opacity:1; } 90% { opacity:.4; }\n 100%{ transform:translateY(-110vh) rotate(360deg); opacity:0; }\n}\n.ch-cross {\n position:absolute; color:var(--ch-gb);\n pointer-events:none; opacity:0;\n animation:chCrossF linear infinite;\n}\n@keyframes chCrossF {\n 0% { opacity:0; transform:translateY(15px); }\n 12% { opacity:.45; }\n 88% { opacity:.08; }\n 100%{ opacity:0; transform:translateY(-100px); }\n}\n\n\/* \u2500\u2500 TOP ARCH DECO \u2500\u2500 *\/\n.ch-arch-top {\n position:absolute; top:0; left:50%;\n transform:translateX(-50%);\n width:400px; height:70px;\n pointer-events:none; z-index:3;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n INNER WRAP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.ch-wrap {\n max-width: 860px; margin: 0 auto;\n padding: 0 36px;\n position: relative; z-index: 10;\n text-align: center;\n}\n\n\/* \u2500\u2500 EYEBROW \u2500\u2500 *\/\n.ch-eyebrow {\n display:flex; align-items:center; justify-content:center; gap:16px;\n margin-bottom:28px;\n opacity:0; animation:chFD .9s ease forwards .2s;\n}\n.ch-eline { width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--ch-gb)); }\n.ch-eline.r { background:linear-gradient(90deg,var(--ch-gb),transparent); }\n.ch-etext {\n font-family:'Inter',sans-serif; font-size:11px; font-weight:500;\n letter-spacing:.42em; text-transform:uppercase; color:var(--ch-gb);\n}\n\n\/* \u2500\u2500 HEADING \u2500\u2500 *\/\n.ch-heading {\n margin-bottom:22px;\n opacity:0; animation:chFD 1s ease forwards .4s;\n}\n.ch-heading .l1 {\n display:block;\n font-family:'Playfair Display',serif;\n font-size:clamp(1rem,2vw,1.3rem);\n font-weight:400; color:var(--ch-gb);\n letter-spacing:.22em; text-transform:uppercase; margin-bottom:12px;\n}\n.ch-heading .l2 {\n display:block;\n font-family:'Playfair Display',serif;\n font-size:clamp(2.8rem,6vw,5rem);\n font-weight:900; color:var(--ch-wh); line-height:1.05;\n}\n.ch-heading .l3 {\n display:block;\n font-family:'Playfair Display',serif;\n font-size:clamp(2.4rem,5vw,4rem);\n font-weight:700; font-style:italic;\n color:var(--ch-gb); line-height:1.15;\n}\n\n\/* \u2500\u2500 DESCRIPTION \u2500\u2500 *\/\n.ch-desc {\n font-family:'Cormorant Garamond',serif;\n font-size:clamp(1.1rem,2vw,1.3rem); font-weight:300;\n color:var(--ch-tl); line-height:1.88;\n max-width:720px; margin:0 auto 36px !important;\n opacity:0; animation:chFD 1s ease forwards .62s;\n}\n\n\/* \u2500\u2500 ORNAMENT \u2500\u2500 *\/\n.ch-orn {\n display:flex; align-items:center; justify-content:center; gap:14px;\n margin-bottom:44px;\n opacity:0; animation:chFI 1s ease forwards .82s;\n}\n.ch-orn span { font-size:17px; color:var(--ch-gb); line-height:1; }\n.ch-orn-line { width:70px; height:1px; background:linear-gradient(90deg,transparent,var(--ch-gm)); }\n.ch-orn-line.r { background:linear-gradient(90deg,var(--ch-gm),transparent); }\n\n\/* \u2500\u2500 CTA BUTTONS \u2500\u2500 *\/\n.ch-ctas {\n display:flex; gap:18px; justify-content:center; flex-wrap:wrap;\n opacity:0; animation:chFU 1s ease forwards 1s;\n}\n.ch-btn-gold {\n display:inline-flex; align-items:center; gap:10px;\n padding:16px 40px;\n background:linear-gradient(135deg,var(--ch-gw),var(--ch-gb));\n color:var(--ch-pd) !important; font-family:'Inter',sans-serif;\n font-size:.8rem; font-weight:700; letter-spacing:.2em;\n text-transform:uppercase; text-decoration:none !important;\n border:none; border-radius:50px;\n box-shadow:0 5px 28px rgba(240,192,64,.42);\n transition:transform .3s, box-shadow .3s;\n position:relative; overflow:hidden;\n}\n.ch-btn-gold::after {\n content:''; position:absolute; top:0; left:-100%;\n width:100%; height:100%;\n background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);\n transition:left .5s ease;\n}\n.ch-btn-gold:hover { transform:translateY(-3px); box-shadow:0 10px 38px rgba(240,192,64,.6); }\n.ch-btn-gold:hover::after { left:100%; }\n\n.ch-btn-outline {\n display:inline-flex; align-items:center; gap:10px;\n padding:15px 40px;\n background:transparent; color:var(--ch-wh) !important;\n font-family:'Inter',sans-serif; font-size:.8rem;\n font-weight:500; letter-spacing:.2em;\n text-transform:uppercase; text-decoration:none !important;\n border:1px solid rgba(255,255,255,.38); border-radius:50px;\n transition:border-color .3s, background .3s, transform .3s;\n}\n.ch-btn-outline:hover {\n border-color:var(--ch-gb);\n background:rgba(240,192,64,.09);\n transform:translateY(-3px);\n}\n\n\/* \u2500\u2500 FAITH STATEMENT STRIP \u2500\u2500 *\/\n.ch-strip {\n position:relative; margin-top:58px;\n padding:34px 48px;\n border:1px solid rgba(240,192,64,.2);\n background:rgba(240,192,64,.04);\n overflow:hidden;\n opacity:0; animation:chFI 1.2s ease forwards 1.3s;\n transition:background .4s;\n}\n.ch-strip:hover { background:rgba(240,192,64,.07); }\n.ch-strip::before,.ch-strip::after {\n content:''; position:absolute;\n width:32px; height:32px;\n border-color:rgba(240,192,64,.5); border-style:solid;\n}\n.ch-strip::before { top:10px; left:10px; border-width:2px 0 0 2px; }\n.ch-strip::after { bottom:10px; right:10px; border-width:0 2px 2px 0; }\n.ch-strip-bar {\n position:absolute; top:0; left:20%; right:20%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ch-gb),transparent);\n animation:chBarP 3s ease-in-out infinite;\n}\n@keyframes chBarP { 0%,100%{opacity:.4} 50%{opacity:1} }\n.ch-strip-inner {\n display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;\n}\n.ch-strip-item {\n display:flex; align-items:center; gap:10px;\n font-family:'Cormorant Garamond',serif;\n font-size:clamp(1rem,1.6vw,1.12rem); font-weight:300;\n color:var(--ch-tl); white-space:nowrap;\n}\n.ch-strip-item span { font-size:1.2rem; filter:drop-shadow(0 0 8px rgba(240,192,64,.55)); }\n.ch-strip-sep { width:1px; height:28px; background:rgba(240,192,64,.25); }\n\n\/* \u2500\u2500 KEYFRAMES \u2500\u2500 *\/\n@keyframes chFD { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes chFU { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes chFI { from{opacity:0} to{opacity:1} }\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media(max-width:768px){\n .ch-wrap { padding:0 24px; }\n .ch-ctas { flex-direction:column; align-items:center; }\n .ch-strip { padding:28px 22px; }\n .ch-strip-inner { flex-direction:column; gap:16px; }\n .ch-strip-sep { display:none; }\n .ch-arch-left, .ch-arch-right { width:120px; opacity:.1; }\n}\n@media(max-width:480px){\n #sbmc-ch { padding:90px 0 100px !important; }\n .ch-heading .l2 { font-size:2.5rem !important; }\n .ch-heading .l3 { font-size:2rem !important; }\n .ch-rose { width:320px !important; height:320px !important; }\n}\n<\/style>\n\n<section id=\"sbmc-ch\" aria-label=\"Contact Sta. Barbara Mission Center \u2014 Hero\">\n\n \n <div class=\"ch-arch-top\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 400 70\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n <linearGradient id=\"ch-ag\" x1=\"0\" y1=\"0\" x2=\"400\" y2=\"0\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#9a6f2a\" stop-opacity=\"0\"\/>\n <stop offset=\".5\" stop-color=\"#f0c040\"\/>\n <stop offset=\"1\" stop-color=\"#9a6f2a\" stop-opacity=\"0\"\/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M0 0C100 0 150 70 200 70C250 70 300 0 400 0\" stroke=\"url(#ch-ag)\" stroke-width=\"2\" opacity=\".65\"\/>\n <path d=\"M40 0C120 0 160 55 200 55C240 55 280 0 360 0\" stroke=\"url(#ch-ag)\" stroke-width=\"1\" opacity=\".3\"\/>\n <\/svg>\n <\/div>\n\n \n <div class=\"ch-arch-left\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 220 800\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%;\">\n <defs>\n <linearGradient id=\"ch-al\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"800\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#f0c040\" stop-opacity=\".9\"\/>\n <stop offset=\".5\" stop-color=\"#6b35b8\" stop-opacity=\".5\"\/>\n <stop offset=\"1\" stop-color=\"#f0c040\" stop-opacity=\"0\"\/>\n <\/linearGradient>\n <\/defs>\n \n <path d=\"M0 800 L0 200 Q0 0 110 0 Q220 0 220 200 L220 800Z\" stroke=\"url(#ch-al)\" stroke-width=\"1.5\" fill=\"none\"\/>\n \n <path d=\"M20 800 L20 230 Q20 40 110 40 Q200 40 200 230 L200 800Z\" stroke=\"url(#ch-al)\" stroke-width=\"0.8\" fill=\"none\" opacity=\".5\"\/>\n \n <line x1=\"0\" y1=\"400\" x2=\"220\" y2=\"400\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"550\" x2=\"220\" y2=\"550\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"650\" x2=\"220\" y2=\"650\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".25\"\/>\n \n <circle cx=\"110\" cy=\"90\" r=\"36\" stroke=\"#f0c040\" stroke-width=\".8\" fill=\"none\" opacity=\".5\"\/>\n <circle cx=\"110\" cy=\"90\" r=\"24\" stroke=\"#f0c040\" stroke-width=\".5\" fill=\"none\" opacity=\".35\"\/>\n <circle cx=\"60\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <circle cx=\"160\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <\/svg>\n <\/div>\n <div class=\"ch-arch-right\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 220 800\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:100%;height:100%;\">\n <defs>\n <linearGradient id=\"ch-ar\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"800\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" stop-color=\"#f0c040\" stop-opacity=\".9\"\/>\n <stop offset=\".5\" stop-color=\"#6b35b8\" stop-opacity=\".5\"\/>\n <stop offset=\"1\" stop-color=\"#f0c040\" stop-opacity=\"0\"\/>\n <\/linearGradient>\n <\/defs>\n <path d=\"M0 800 L0 200 Q0 0 110 0 Q220 0 220 200 L220 800Z\" stroke=\"url(#ch-ar)\" stroke-width=\"1.5\" fill=\"none\"\/>\n <path d=\"M20 800 L20 230 Q20 40 110 40 Q200 40 200 230 L200 800Z\" stroke=\"url(#ch-ar)\" stroke-width=\"0.8\" fill=\"none\" opacity=\".5\"\/>\n <line x1=\"0\" y1=\"400\" x2=\"220\" y2=\"400\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"550\" x2=\"220\" y2=\"550\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".3\"\/>\n <line x1=\"0\" y1=\"650\" x2=\"220\" y2=\"650\" stroke=\"#f0c040\" stroke-width=\".5\" opacity=\".25\"\/>\n <circle cx=\"110\" cy=\"90\" r=\"36\" stroke=\"#f0c040\" stroke-width=\".8\" fill=\"none\" opacity=\".5\"\/>\n <circle cx=\"110\" cy=\"90\" r=\"24\" stroke=\"#f0c040\" stroke-width=\".5\" fill=\"none\" opacity=\".35\"\/>\n <circle cx=\"60\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <circle cx=\"160\" cy=\"185\" r=\"22\" stroke=\"#f0c040\" stroke-width=\".6\" fill=\"none\" opacity=\".4\"\/>\n <\/svg>\n <\/div>\n\n \n <canvas id=\"ch-canvas\" aria-hidden=\"true\"><\/canvas>\n\n \n <div class=\"ch-rays\" id=\"ch-rays\" aria-hidden=\"true\"><\/div>\n\n \n <svg class=\"ch-rose\" viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"200\" cy=\"200\" r=\"192\" stroke=\"#f0c040\" stroke-width=\"1.2\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"155\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"110\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"66\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"28\" stroke=\"#f0c040\" stroke-width=\"1\"\/>\n <g stroke=\"#f0c040\" stroke-width=\".7\">\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(0 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(15 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(30 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(45 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(60 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(75 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(90 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(105 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(120 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(135 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(150 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(165 200 200)\"\/>\n <\/g>\n <g fill=\"rgba(240,192,64,0.05)\" stroke=\"#f0c040\" stroke-width=\".7\">\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(0 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(30 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(60 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(90 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(120 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(150 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(180 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(210 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(240 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(270 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(300 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(330 200 200)\"\/>\n <\/g>\n <\/svg>\n\n <div class=\"ch-bd l\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-bd r\" aria-hidden=\"true\"><\/div>\n <div id=\"ch-ptcl\" aria-hidden=\"true\"><\/div>\n\n \n <div class=\"ch-wrap\">\n\n <div class=\"ch-eyebrow\" aria-hidden=\"true\">\n <span class=\"ch-eline\"><\/span>\n <span class=\"ch-etext\">Connect With Us<\/span>\n <span class=\"ch-eline r\"><\/span>\n <\/div>\n\n <h1 class=\"ch-heading\">\n <span class=\"l1\">We Would Love to Hear from You<\/span>\n <span class=\"l2\">Contact Sta. Barbara<\/span>\n <span class=\"l3\">Mission Center<\/span>\n <\/h1>\n\n <p class=\"ch-desc\">\n Whether you are seeking pastoral guidance, sacramental assistance, information about\n our ministries, or simply a warm community to call home \u2014 our doors, our hearts,\n and our mission are open to you. Reach out and let us walk together in faith.\n <\/p>\n\n <div class=\"ch-orn\" aria-hidden=\"true\">\n <span class=\"ch-orn-line\"><\/span>\n <span>\u2726<\/span><span>\u271d<\/span><span>\u2726<\/span>\n <span class=\"ch-orn-line r\"><\/span>\n <\/div>\n\n <div class=\"ch-ctas\">\n <a href=\"#sbmc-cinfo\" class=\"ch-btn-gold\">\n <span>\ud83d\udccd<\/span> View Our Location\n <\/a>\n <a href=\"#sbmc-cinfo\" class=\"ch-btn-outline\">\n <span>\u2709<\/span> Contact the Mission Center\n <\/a>\n <\/div>\n\n \n <div class=\"ch-strip\">\n <div class=\"ch-strip-bar\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-inner\">\n <div class=\"ch-strip-item\"><span>\ud83d\ude4f<\/span> Pastoral Guidance<\/div>\n <div class=\"ch-strip-sep\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-item\"><span>\u271d\ufe0f<\/span> Sacramental Services<\/div>\n <div class=\"ch-strip-sep\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-item\"><span>\ud83e\udd1d<\/span> Community Programs<\/div>\n <div class=\"ch-strip-sep\" aria-hidden=\"true\"><\/div>\n <div class=\"ch-strip-item\"><span>\ud83c\udf39<\/span> Spiritual Direction<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script>\n(function(){\n 'use strict';\n function initHero(){\n var sec=document.getElementById('sbmc-ch'); if(!sec) return;\n\n \/* \u2500\u2500 MOSAIC CANVAS \u2500\u2500 *\/\n (function(){\n var c=document.getElementById('ch-canvas'); if(!c) return;\n var ctx=c.getContext('2d'),W=0,H=0,tiles=[],raf;\n var COLS=['rgba(107,53,184,','rgba(59,18,120,','rgba(240,192,64,','rgba(212,152,42,',\n 'rgba(154,111,42,','rgba(180,80,200,','rgba(30,10,60,','rgba(90,20,150,'];\n function Tile(x,y,s){\n this.x=x;this.y=y;this.s=s;\n this.col=COLS[Math.floor(Math.random()*COLS.length)];\n this.ph=Math.random()*Math.PI*2; this.sp=Math.random()*.004+.001;\n }\n Tile.prototype.draw=function(t){\n var a=.04+.38*(.5+.5*Math.sin(t*this.sp+this.ph));\n ctx.fillStyle=this.col+a+')';\n ctx.fillRect(this.x+1,this.y+1,this.s-2,this.s-2);\n };\n function build(){tiles=[];var S=54;for(var x=0;x<W;x+=S)for(var y=0;y<H;y+=S)tiles.push(new Tile(x,y,S));}\n function resize(){W=c.width=sec.offsetWidth||window.innerWidth;H=c.height=sec.offsetHeight||700;build();}\n var p=0;\n function ws(){\n if(sec.offsetWidth>0&&sec.offsetHeight>0){\n resize();var t=0;\n (function l(){ctx.clearRect(0,0,W,H);t++;for(var i=0;i<tiles.length;i++)tiles[i].draw(t);raf=requestAnimationFrame(l);})();\n }else if(p++<30)setTimeout(ws,100);\n }\n ws(); window.addEventListener('resize',function(){cancelAnimationFrame(raf);resize();});\n })();\n\n \/* \u2500\u2500 LIGHT RAYS \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ch-rays'); if(!w) return;\n for(var i=0;i<18;i++){\n var s=document.createElement('span');\n s.style.cssText='left:'+(22+(56\/18)*i).toFixed(1)+'%;'+\n 'transform:rotate('+(-48+(96\/18)*i).toFixed(1)+'deg);'+\n 'animation-delay:'+(i*.28).toFixed(2)+'s;'+\n 'animation-duration:'+(4.5+Math.random()*4).toFixed(1)+'s;'+\n 'opacity:'+(0.08+Math.random()*.18).toFixed(2)+';';\n w.appendChild(s);\n }\n })();\n\n \/* \u2500\u2500 PARTICLES (dots + crosses) \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ch-ptcl'); if(!w) return;\n var dotCols=['rgba(240,192,64,','rgba(180,80,200,','rgba(107,53,184,','rgba(255,255,255,'];\n var syms=['\u2726','\u271d','\u2727','\u2720','\u25c6'];\n function spawn(type){\n var el=document.createElement('div');\n if(type==='cross'){\n el.className='ch-cross';\n el.textContent=syms[Math.floor(Math.random()*syms.length)];\n el.style.cssText='left:'+(Math.random()*94).toFixed(1)+'%;bottom:-20px;'+\n 'font-size:'+(8+Math.random()*12).toFixed(0)+'px;'+\n 'animation-duration:'+(10+Math.random()*8).toFixed(1)+'s;'+\n 'animation-delay:'+(Math.random()*5).toFixed(2)+'s;';\n } else {\n el.className='ch-pt';\n var sz=2+Math.random()*5;\n var col=dotCols[Math.floor(Math.random()*dotCols.length)];\n var al=(0.3+Math.random()*.5).toFixed(2);\n el.style.cssText='width:'+sz.toFixed(1)+'px;height:'+sz.toFixed(1)+'px;'+\n 'left:'+(Math.random()*100).toFixed(1)+'%;bottom:-10px;'+\n 'background:'+col+al+');'+\n 'animation-duration:'+(8+Math.random()*10).toFixed(1)+'s;'+\n 'animation-delay:'+(Math.random()*3).toFixed(2)+'s;'+\n 'box-shadow:0 0 '+(sz*2).toFixed(0)+'px '+col+'0.6);';\n }\n w.appendChild(el);\n setTimeout(function(){if(el.parentNode)el.parentNode.removeChild(el);},20000);\n }\n for(var i=0;i<18;i++)(function(n){setTimeout(function(){spawn(n%5===0?'cross':'dot');},n*260);})(i);\n setInterval(function(){spawn(Math.random()>.78?'cross':'dot');},1000);\n })();\n }\n\n if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',initHero);\n else initHero();\n})();\n<\/script>\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-0f5f716b alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-2'>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Contact Information \u00b7 Sta. Barbara Mission Center<\/title>\n<\/head>\n<body style=\"margin:0;padding:0;background:#0e0120;\">\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Inter:wght@300;400;500;600&display=swap\">\n\n<style>\n\/* \u2550\u2550 ALL SCOPED TO #sbmc-cinfo \u2550\u2550 *\/\n#sbmc-cinfo {\n --ci-pd: #1e0a3c; --ci-pm: #3b1278; --ci-pg: #6b35b8;\n --ci-gb: #f0c040; --ci-gw: #d4982a; --ci-gm: #9a6f2a;\n --ci-cr: #f9f2e3; --ci-wh: #ffffff;\n --ci-tl: rgba(255,255,255,0.85); --ci-tm: rgba(255,255,255,0.55);\n --ci-card: rgba(255,255,255,0.04);\n --ci-card-border: rgba(240,192,64,0.16);\n\n position: relative !important;\n width: 100% !important;\n padding: 110px 0 130px !important;\n background: linear-gradient(170deg,#0e0120 0%,#1c0438 30%,#2a0d52 58%,#130226 80%,#080014 100%) !important;\n overflow: hidden !important;\n color: var(--ci-wh) !important;\n font-family: 'Inter', sans-serif !important;\n box-sizing: border-box !important;\n}\n#sbmc-cinfo *, #sbmc-cinfo *::before, #sbmc-cinfo *::after { box-sizing: border-box; }\n#sbmc-cinfo p { margin: 0; padding: 0; }\n#sbmc-cinfo h2, #sbmc-cinfo h3, #sbmc-cinfo h4 { margin: 0; padding: 0; font-weight: inherit; }\n#sbmc-cinfo a { color: inherit; text-decoration: none; }\n\n\/* Ambient glow *\/\n#sbmc-cinfo::before {\n content: ''; position: absolute; top: -80px; left: 50%;\n transform: translateX(-50%);\n width: 1100px; height: 700px;\n background: radial-gradient(ellipse at 50% 20%,rgba(240,192,64,.12) 0%,rgba(107,53,184,.07) 40%,transparent 70%);\n pointer-events: none; z-index: 0;\n animation: ciGlow 7s ease-in-out infinite;\n}\n@keyframes ciGlow { 0%,100%{opacity:.65} 50%{opacity:1} }\n\n\/* Canvas *\/\n#ci-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; opacity:.22; z-index:1; }\n\n\/* Gold borders *\/\n.ci-bd { position:absolute; top:0; bottom:0; width:5px; z-index:3;\n background:linear-gradient(180deg,transparent,var(--ci-gb),var(--ci-gw),transparent);\n animation:ciBd 4s ease-in-out infinite alternate; }\n.ci-bd.l{left:0} .ci-bd.r{right:0;animation-delay:2s;}\n@keyframes ciBd{from{opacity:.3}to{opacity:1}}\n\n\/* Rays *\/\n.ci-rays{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1;}\n.ci-rays span{position:absolute;top:-60px;width:1px;height:130%;\n background:linear-gradient(180deg,rgba(240,192,64,.16),transparent);\n transform-origin:top center; animation:ciRay 5s ease-in-out infinite;}\n@keyframes ciRay{0%,100%{opacity:.15}50%{opacity:.72}}\n\n\/* Rose *\/\n.ci-rose{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\n width:780px;height:780px;opacity:.05;pointer-events:none;z-index:1;\n animation:ciRose 100s linear infinite;}\n@keyframes ciRose{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}\n\n\/* Particles *\/\n#ci-ptcl{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;}\n.ci-pt{position:absolute;border-radius:50%;pointer-events:none;animation:ciPtD linear infinite;}\n@keyframes ciPtD{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:.4}100%{transform:translateY(-110vh) rotate(360deg);opacity:0}}\n\n\/* \u2550\u2550 WRAP \u2550\u2550 *\/\n.ci-wrap{max-width:1140px;margin:0 auto;padding:0 36px;position:relative;z-index:10;}\n\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.ci-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px;\n opacity:0;animation:ciFD .9s ease forwards .2s;}\n.ci-eline{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--ci-gb));}\n.ci-eline.r{background:linear-gradient(90deg,var(--ci-gb),transparent);}\n.ci-etext{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--ci-gb);}\n\n.ci-headline{text-align:center;margin-bottom:14px;opacity:0;animation:ciFD 1s ease forwards .4s;}\n.ci-headline .l1{display:block;font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;color:var(--ci-wh);line-height:1.1;}\n.ci-headline .l2{display:block;font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;font-style:italic;color:var(--ci-gb);line-height:1.2;}\n\n.ci-lead{text-align:center;max-width:680px;margin:0 auto 56px !important;\n font-family:'Cormorant Garamond',serif;font-size:clamp(1.05rem,1.8vw,1.2rem);\n font-weight:300;color:var(--ci-tl);line-height:1.85;\n opacity:0;animation:ciFD 1s ease forwards .6s;}\n\n.ci-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:64px;\n opacity:0;animation:ciFI 1s ease forwards .8s;}\n.ci-orn span{font-size:17px;color:var(--ci-gb);line-height:1;}\n.ci-orn-line{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--ci-gm));}\n.ci-orn-line.r{background:linear-gradient(90deg,var(--ci-gm),transparent);}\n\n\/* \u2550\u2550 MAIN LAYOUT: left info + right map \u2550\u2550 *\/\n.ci-layout {\n display: grid;\n grid-template-columns: 1fr 1.1fr;\n gap: 28px;\n margin-bottom: 60px;\n align-items: start;\n}\n\n\/* \u2500\u2500 LEFT COLUMN: info cards stacked \u2500\u2500 *\/\n.ci-left { display: flex; flex-direction: column; gap: 20px; }\n\n\/* \u2500\u2500 CARD BASE \u2500\u2500 *\/\n.ci-card {\n position: relative;\n background: var(--ci-card);\n border: 1px solid var(--ci-card-border);\n padding: 28px 26px 24px;\n overflow: hidden;\n opacity: 0; transform: translateY(28px);\n transition: opacity .7s ease, transform .7s ease, background .4s, border-color .4s, box-shadow .4s;\n}\n#sbmc-cinfo.ci-js .ci-card { opacity:0; transform:translateY(28px); }\n#sbmc-cinfo.ci-js .ci-card.ci-show { opacity:1; transform:translateY(0); }\n\n.ci-card:hover {\n background: rgba(240,192,64,.07);\n border-color: rgba(240,192,64,.45);\n box-shadow: 0 0 36px rgba(240,192,64,.13), inset 0 0 24px rgba(240,192,64,.04);\n transform: translateY(-4px) !important;\n}\n\/* shimmer *\/\n.ci-card::before {\n content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;\n background:linear-gradient(90deg,transparent,rgba(240,192,64,.07),transparent);\n transition:left .6s ease;\n}\n.ci-card:hover::before { left:160%; }\n\/* top accent *\/\n.ci-card::after {\n content:''; position:absolute; top:0; left:15%; right:15%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ci-gb),transparent);\n opacity:0; transition:opacity .4s;\n}\n.ci-card:hover::after { opacity:1; }\n\n\/* corner brackets *\/\n.ci-cc-tl,.ci-cc-br{position:absolute;width:14px;height:14px;border-color:rgba(240,192,64,.28);border-style:solid;}\n.ci-cc-tl{top:8px;left:8px;border-width:1px 0 0 1px;}\n.ci-cc-br{bottom:8px;right:8px;border-width:0 1px 1px 0;}\n\n\/* card header row *\/\n.ci-card-head {\n display: flex; align-items: center; gap: 14px;\n margin-bottom: 18px;\n}\n.ci-card-icon {\n display: flex; align-items: center; justify-content: center;\n width: 44px; height: 44px; flex-shrink: 0;\n background: rgba(240,192,64,.1); border: 1px solid rgba(240,192,64,.25);\n border-radius: 50%; font-size: 1.2rem;\n filter: drop-shadow(0 0 8px rgba(240,192,64,.45));\n animation: ciIconG 3s ease-in-out infinite alternate;\n}\n@keyframes ciIconG{from{filter:drop-shadow(0 0 5px rgba(240,192,64,.3))}to{filter:drop-shadow(0 0 16px rgba(240,192,64,.85))}}\n\n.ci-card-label {\n font-family: 'Inter', sans-serif;\n font-size: .7rem; font-weight: 500;\n letter-spacing: .28em; text-transform: uppercase;\n color: var(--ci-gm);\n}\n\n\/* card content *\/\n.ci-card-val {\n font-family: 'Playfair Display', serif;\n font-size: 1.05rem; font-weight: 700;\n color: var(--ci-wh); line-height: 1.4;\n margin-bottom: 6px;\n}\n.ci-card-note {\n font-family: 'Cormorant Garamond', serif;\n font-size: .98rem; font-weight: 300;\n color: var(--ci-tm); line-height: 1.65;\n}\n\n\/* contact rows inside card *\/\n.ci-contact-row {\n display: flex; align-items: flex-start; gap: 12px;\n padding: 12px 0;\n border-bottom: 1px solid rgba(240,192,64,.1);\n}\n.ci-contact-row:last-child { border-bottom: none; padding-bottom: 0; }\n.ci-contact-row-icon {\n font-size: .9rem; margin-top: 2px; flex-shrink: 0;\n filter: drop-shadow(0 0 6px rgba(240,192,64,.4));\n}\n.ci-contact-row-content {}\n.ci-contact-row-label {\n font-family: 'Inter', sans-serif; font-size: .65rem;\n letter-spacing: .2em; text-transform: uppercase; color: var(--ci-gm);\n display: block; margin-bottom: 3px;\n}\n.ci-contact-row-val {\n font-family: 'Playfair Display', serif; font-size: .98rem;\n font-weight: 700; color: var(--ci-wh); display: block;\n}\n.ci-contact-row-val a {\n color: var(--ci-wh); transition: color .3s;\n}\n.ci-contact-row-val a:hover { color: var(--ci-gb); }\n\n\/* Hours grid *\/\n.ci-hours-grid {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 8px 16px; margin-top: 4px;\n}\n.ci-hour-row {}\n.ci-hour-day {\n font-family: 'Inter', sans-serif; font-size: .68rem;\n letter-spacing: .12em; text-transform: uppercase;\n color: var(--ci-gm); display: block; margin-bottom: 2px;\n}\n.ci-hour-time {\n font-family: 'Cormorant Garamond', serif; font-size: .98rem;\n font-weight: 400; color: var(--ci-tl);\n}\n\n\/* Social card *\/\n.ci-social-row {\n display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px;\n}\n.ci-social-btn {\n display: inline-flex; align-items: center; gap: 9px;\n padding: 10px 18px;\n background: rgba(240,192,64,.08); border: 1px solid rgba(240,192,64,.22);\n border-radius: 50px; text-decoration: none !important;\n font-family: 'Inter', sans-serif; font-size: .72rem;\n font-weight: 600; letter-spacing: .12em; text-transform: uppercase;\n color: var(--ci-gb) !important;\n transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;\n}\n.ci-social-btn:hover {\n background: rgba(240,192,64,.16); border-color: var(--ci-gb);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(240,192,64,.25);\n}\n.ci-social-btn .si { font-size: 1rem; }\n\n\/* \u2500\u2500 RIGHT COLUMN: map card \u2500\u2500 *\/\n.ci-map-card {\n position: relative;\n background: var(--ci-card);\n border: 1px solid var(--ci-card-border);\n overflow: hidden;\n opacity: 0; transform: translateY(28px);\n transition: opacity .7s ease, transform .7s ease;\n height: 100%;\n}\n#sbmc-cinfo.ci-js .ci-map-card { opacity:0; transform:translateY(28px); }\n#sbmc-cinfo.ci-js .ci-map-card.ci-show { opacity:1; transform:translateY(0); }\n\n.ci-map-card:hover { border-color: rgba(240,192,64,.4); }\n.ci-map-card::after {\n content:''; position:absolute; top:0; left:15%; right:15%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ci-gb),transparent);\n opacity:0; transition:opacity .4s; z-index:2;\n}\n.ci-map-card:hover::after { opacity:1; }\n.ci-mc-tl,.ci-mc-br{position:absolute;width:16px;height:16px;border-color:rgba(240,192,64,.3);border-style:solid;z-index:2;}\n.ci-mc-tl{top:8px;left:8px;border-width:1px 0 0 1px;}\n.ci-mc-br{bottom:8px;right:8px;border-width:0 1px 1px 0;}\n\n.ci-map-header {\n padding: 22px 26px 18px;\n border-bottom: 1px solid rgba(240,192,64,.12);\n display: flex; align-items: center; gap: 12px;\n}\n.ci-map-header-icon {\n display: flex; align-items: center; justify-content: center;\n width: 38px; height: 38px; flex-shrink: 0;\n background: rgba(240,192,64,.1); border: 1px solid rgba(240,192,64,.25);\n border-radius: 50%; font-size: 1.1rem;\n filter: drop-shadow(0 0 8px rgba(240,192,64,.45));\n animation: ciIconG 3s ease-in-out infinite alternate;\n}\n.ci-map-header-text {}\n.ci-map-header-label {\n font-family: 'Inter', sans-serif; font-size: .65rem;\n letter-spacing: .28em; text-transform: uppercase; color: var(--ci-gm); display: block;\n}\n.ci-map-header-val {\n font-family: 'Playfair Display', serif; font-size: .98rem;\n font-weight: 700; color: var(--ci-wh);\n}\n\n\/* The actual map embed area *\/\n.ci-map-embed {\n position: relative; width: 100%;\n height: 420px;\n background: linear-gradient(135deg, rgba(30,10,60,.9), rgba(59,18,120,.6));\n overflow: hidden;\n}\n.ci-map-embed iframe {\n position: absolute; top: 0; left: 0;\n width: 100%; height: 100%;\n border: 0; display: block;\n}\n\n\/* Themed overlay that reveals the map on load *\/\n.ci-map-overlay {\n position: absolute; inset: 0; z-index: 2;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: 16px; text-align: center; padding: 30px;\n background: linear-gradient(135deg, rgba(14,1,32,.97), rgba(26,4,56,.94));\n pointer-events: none;\n transition: opacity 1.4s ease 0.8s, visibility 0s 2.2s;\n}\n.ci-map-overlay.ci-map-loaded {\n opacity: 0; visibility: hidden;\n}\n.ci-map-overlay-icon {\n font-size: 3rem;\n filter: drop-shadow(0 0 16px rgba(240,192,64,.6));\n animation: ciIconG 3s ease-in-out infinite alternate;\n}\n.ci-map-overlay-title {\n font-family: 'Playfair Display', serif; font-size: 1.1rem;\n font-weight: 700; color: var(--ci-gb);\n}\n.ci-map-overlay-addr {\n font-family: 'Cormorant Garamond', serif; font-size: 1rem;\n font-weight: 300; color: var(--ci-tl); line-height: 1.7;\n}\n.ci-map-overlay-note {\n font-family: 'Inter', sans-serif; font-size: .7rem;\n letter-spacing: .15em; text-transform: uppercase;\n color: var(--ci-gm); margin-top: 4px;\n}\n.ci-map-overlay-spinner {\n width: 32px; height: 32px;\n border: 2px solid rgba(240,192,64,.2);\n border-top-color: var(--ci-gb);\n border-radius: 50%;\n animation: ciSpin .9s linear infinite;\n}\n@keyframes ciSpin { to { transform: rotate(360deg); } }\n\n\/* Map overlay grid pattern *\/\n.ci-map-grid {\n position: absolute; inset: 0; pointer-events: none; z-index: 1;\n background-image:\n linear-gradient(rgba(240,192,64,.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(240,192,64,.04) 1px, transparent 1px);\n background-size: 40px 40px;\n}\n\n.ci-map-directions {\n padding: 16px 26px;\n border-top: 1px solid rgba(240,192,64,.12);\n display: flex; align-items: center; justify-content: space-between; gap: 14px;\n}\n.ci-map-addr-small {\n font-family: 'Cormorant Garamond', serif; font-size: .95rem;\n font-weight: 300; color: var(--ci-tm); line-height: 1.5;\n}\n.ci-dir-btn {\n display: inline-flex; align-items: center; gap: 8px;\n padding: 10px 22px; flex-shrink: 0;\n background: linear-gradient(135deg,var(--ci-gw),var(--ci-gb));\n color: var(--ci-pd) !important; font-family: 'Inter', sans-serif;\n font-size: .72rem; font-weight: 700; letter-spacing: .16em;\n text-transform: uppercase; text-decoration: none !important;\n border-radius: 50px;\n transition: transform .3s, box-shadow .3s;\n box-shadow: 0 4px 18px rgba(240,192,64,.32);\n}\n.ci-dir-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(240,192,64,.5); }\n\n\/* \u2550\u2550 BOTTOM ROW: closing message \u2550\u2550 *\/\n.ci-closing {\n position: relative; text-align: center;\n padding: 50px 56px 46px;\n border: 1px solid rgba(240,192,64,.18);\n background: rgba(240,192,64,.03); overflow: hidden;\n opacity: 0; animation: ciFI 1.2s ease forwards 1.8s;\n transition: background .4s, transform .4s;\n}\n.ci-closing:hover { background: rgba(240,192,64,.06); transform: translateY(-3px); }\n.ci-closing::before,.ci-closing::after {\n content:''; position:absolute; width:38px; height:38px;\n border-color:rgba(240,192,64,.5); border-style:solid;\n}\n.ci-closing::before { top:12px; left:12px; border-width:2px 0 0 2px; }\n.ci-closing::after { bottom:12px; right:12px; border-width:0 2px 2px 0; }\n.ci-closing-bar {\n position:absolute; top:0; left:20%; right:20%; height:2px;\n background:linear-gradient(90deg,transparent,var(--ci-gb),transparent);\n animation:ciBarP 3s ease-in-out infinite;\n}\n@keyframes ciBarP{0%,100%{opacity:.4}50%{opacity:1}}\n.ci-closing-icon { font-size:1.8rem; display:block; margin-bottom:14px;\n filter:drop-shadow(0 0 12px rgba(240,192,64,.6));\n animation:ciIconG 3s ease-in-out infinite alternate; }\n.ci-closing-qmark {\n font-family:'Playfair Display',serif; font-size:4.5rem; line-height:0;\n vertical-align:-.42em; color:var(--ci-gb); opacity:.18; display:inline;\n}\n.ci-closing-text {\n font-family:'Cormorant Garamond',serif;\n font-size:clamp(1.1rem,2vw,1.4rem);\n font-style:italic; font-weight:300; color:var(--ci-cr);\n line-height:1.8; margin-bottom:16px !important;\n}\n.ci-closing-attr {\n font-family:'Inter',sans-serif; font-size:.7rem;\n letter-spacing:.26em; text-transform:uppercase; color:var(--ci-gm);\n}\n\n\/* \u2500\u2500 KEYFRAMES \u2500\u2500 *\/\n@keyframes ciFD { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes ciFI { from{opacity:0} to{opacity:1} }\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media(max-width:1024px){\n .ci-layout { grid-template-columns: 1fr 1fr; }\n}\n@media(max-width:860px){\n .ci-layout { grid-template-columns: 1fr; }\n .ci-map-card { height: auto; }\n .ci-map-embed { height: 320px; }\n .ci-closing { padding: 38px 22px; }\n .ci-map-directions { flex-direction: column; align-items: flex-start; gap: 12px; }\n .ci-dir-btn { width: 100%; justify-content: center; }\n}\n@media(max-width:600px){\n .ci-wrap { padding: 0 20px; }\n .ci-hours-grid { grid-template-columns: 1fr; }\n .ci-social-row { gap: 10px; }\n #sbmc-cinfo { padding: 80px 0 100px !important; }\n .ci-rose { width: 320px !important; height: 320px !important; }\n}\n@media(max-width:480px){\n .ci-headline .l1, .ci-headline .l2 { font-size: 2.2rem !important; }\n}\n<\/style>\n\n<section id=\"sbmc-cinfo\" aria-label=\"Contact Information \u2014 Sta. Barbara Mission Center\">\n <canvas id=\"ci-canvas\" aria-hidden=\"true\"><\/canvas>\n <div class=\"ci-rays\" id=\"ci-rays\" aria-hidden=\"true\"><\/div>\n\n \n <svg class=\"ci-rose\" viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"200\" cy=\"200\" r=\"192\" stroke=\"#f0c040\" stroke-width=\"1.2\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"155\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"110\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"66\" stroke=\"#f0c040\" stroke-width=\".8\"\/>\n <circle cx=\"200\" cy=\"200\" r=\"28\" stroke=\"#f0c040\" stroke-width=\"1\"\/>\n <g stroke=\"#f0c040\" stroke-width=\".7\">\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(0 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(15 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(30 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(45 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(60 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(75 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(90 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(105 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(120 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(135 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(150 200 200)\"\/>\n <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(165 200 200)\"\/>\n <\/g>\n <g fill=\"rgba(240,192,64,0.05)\" stroke=\"#f0c040\" stroke-width=\".7\">\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(0 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(30 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(60 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(90 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(120 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(150 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(180 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(210 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(240 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(270 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(300 200 200)\"\/>\n <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(330 200 200)\"\/>\n <\/g>\n <\/svg>\n\n <div class=\"ci-bd l\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-bd r\" aria-hidden=\"true\"><\/div>\n <div id=\"ci-ptcl\" aria-hidden=\"true\"><\/div>\n\n <div class=\"ci-wrap\">\n\n \n <div class=\"ci-eyebrow\" aria-hidden=\"true\">\n <span class=\"ci-eline\"><\/span>\n <span class=\"ci-etext\">Find Us \u00b7 Reach Us \u00b7 Know Us<\/span>\n <span class=\"ci-eline r\"><\/span>\n <\/div>\n <h2 class=\"ci-headline\">\n <span class=\"l1\">Mission Center<\/span>\n <span class=\"l2\">Contact & Location<\/span>\n <\/h2>\n <p class=\"ci-lead\">\n Our doors are always open to you. Visit us, call us, or send us a message \u2014\n we are here to serve, to listen, and to walk with you on your journey of faith.\n <\/p>\n <div class=\"ci-orn\" aria-hidden=\"true\">\n <span class=\"ci-orn-line\"><\/span>\n <span>\u2726<\/span><span>\u271d<\/span><span>\u2726<\/span>\n <span class=\"ci-orn-line r\"><\/span>\n <\/div>\n\n \n <div class=\"ci-layout\">\n\n \n <div class=\"ci-left\" id=\"ci-left\">\n\n \n <div class=\"ci-card\" data-delay=\"0\" aria-label=\"Mission Center Address\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83d\udccd<\/div>\n <span class=\"ci-card-label\">Our Address<\/span>\n <\/div>\n <div class=\"ci-card-val\">Sta. Barbara Mission Center<\/div>\n <div class=\"ci-card-val\">Brgy. Casasahan Ibaba, Gumaca, Quezon<\/div>\n <p class=\"ci-card-note\">Philippines \u2014 Diocese of Lucena<\/p>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"120\" aria-label=\"Contact Numbers\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83d\udcde<\/div>\n <span class=\"ci-card-label\">Contact Numbers<\/span>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\ud83d\udc64<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">Contact Person<\/span>\n <span class=\"ci-contact-row-val\">Jose Jay<\/span>\n <\/div>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\ud83d\udcf1<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">Mobile<\/span>\n <span class=\"ci-contact-row-val\">\n <a href=\"tel:+639562616212\">0956 261 6212<\/a>\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"240\" aria-label=\"Email Address\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\u2709\ufe0f<\/div>\n <span class=\"ci-card-label\">Email Address<\/span>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\ud83d\udce7<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">General Inquiries<\/span>\n <span class=\"ci-contact-row-val\">\n <a href=\"mailto:info@stabarbara.org\">info@stabarbara.org<\/a>\n <\/span>\n <\/div>\n <\/div>\n <div class=\"ci-contact-row\">\n <span class=\"ci-contact-row-icon\">\u26ea<\/span>\n <div class=\"ci-contact-row-content\">\n <span class=\"ci-contact-row-label\">Pastoral Concerns<\/span>\n <span class=\"ci-contact-row-val\">\n <a href=\"mailto:pastoral@stabarbara.org\">pastoral@stabarbara.org<\/a>\n <\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"360\" aria-label=\"Office Hours\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83d\udd50<\/div>\n <span class=\"ci-card-label\">Office Hours<\/span>\n <\/div>\n <div class=\"ci-hours-grid\">\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Monday \u2013 Friday<\/span>\n <span class=\"ci-hour-time\">8:00 AM \u2013 5:00 PM<\/span>\n <\/div>\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Saturday<\/span>\n <span class=\"ci-hour-time\">8:00 AM \u2013 12:00 PM<\/span>\n <\/div>\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Sunday<\/span>\n <span class=\"ci-hour-time\">After Morning Mass<\/span>\n <\/div>\n <div class=\"ci-hour-row\">\n <span class=\"ci-hour-day\">Holy Days<\/span>\n <span class=\"ci-hour-time\">Closed \u2014 Liturgy Only<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-card\" data-delay=\"480\" aria-label=\"Social Media\">\n <div class=\"ci-cc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-cc-br\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-card-head\">\n <div class=\"ci-card-icon\" aria-hidden=\"true\">\ud83c\udf10<\/div>\n <span class=\"ci-card-label\">Follow & Connect<\/span>\n <\/div>\n <div class=\"ci-social-row\">\n <a href=\"#\" class=\"ci-social-btn\" aria-label=\"Facebook\">\n <span class=\"si\">\ud83d\udcd8<\/span> Facebook\n <\/a>\n <a href=\"#\" class=\"ci-social-btn\" aria-label=\"YouTube\">\n <span class=\"si\">\u25b6\ufe0f<\/span> YouTube\n <\/a>\n <a href=\"#\" class=\"ci-social-btn\" aria-label=\"Instagram\">\n <span class=\"si\">\ud83d\udcf7<\/span> Instagram\n <\/a>\n <\/div>\n <p class=\"ci-card-note\" style=\"margin-top:14px !important;\">\n Follow us for Mass schedules, parish announcements, community events, and inspiring reflections from our Mission Center community.\n <\/p>\n <\/div>\n\n <\/div>\n\n \n <div class=\"ci-map-card\" data-map-delay=\"100\" aria-label=\"Mission Center Location Map\">\n <div class=\"ci-mc-tl\" aria-hidden=\"true\"><\/div>\n <div class=\"ci-mc-br\" aria-hidden=\"true\"><\/div>\n\n <div class=\"ci-map-header\">\n <div class=\"ci-map-header-icon\" aria-hidden=\"true\">\ud83d\uddfa\ufe0f<\/div>\n <div class=\"ci-map-header-text\">\n <span class=\"ci-map-header-label\">Our Location<\/span>\n <span class=\"ci-map-header-val\">Brgy. Casasahan Ibaba, Gumaca, Quezon<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"ci-map-embed\">\n <div class=\"ci-map-grid\" aria-hidden=\"true\"><\/div>\n <iframe\n src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d15444.289765024755!2d121.96840355!3d13.93782805!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33a35365b7f7b5e7%3A0x8a031bc0d5c7f6e!2sCasasahan%2C%20Gumaca%2C%20Quezon!5e0!3m2!1sen!2sph!4v1718000000000!5m2!1sen!2sph\"\n width=\"100%\" height=\"420\"\n style=\"border:0;display:block;\"\n allowfullscreen=\"\"\n loading=\"lazy\"\n referrerpolicy=\"no-referrer-when-downgrade\"\n title=\"Sta. Barbara Mission Center \u2014 Casasahan Ibaba, Gumaca, Quezon\">\n <\/iframe>\n \n <div class=\"ci-map-overlay\" id=\"ci-map-overlay\" aria-hidden=\"true\">\n <span class=\"ci-map-overlay-icon\">\ud83d\udccd<\/span>\n <div class=\"ci-map-overlay-title\">Sta. Barbara Mission Center<\/div>\n <div class=\"ci-map-overlay-addr\">\n Casasahan Ibaba, Gumaca, Quezon<br>\n Philippines \u2014 Diocese of Lucena\n <\/div>\n <div class=\"ci-map-overlay-spinner\"><\/div>\n <div class=\"ci-map-overlay-note\">Loading map…<\/div>\n <\/div>\n <\/div>\n\n <div class=\"ci-map-directions\">\n <div class=\"ci-map-addr-small\">\n Casasahan Ibaba<br>Gumaca, Quezon, Philippines\n <\/div>\n <a href=\"https:\/\/www.google.com\/maps\/search\/Sta.+Barbara+Mission+Center+Casasahan+Ibaba+Gumaca+Quezon\"\n target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"ci-dir-btn\" aria-label=\"Get directions on Google Maps\">\n <span>\ud83e\udded<\/span> Get Directions\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"ci-closing\">\n <div class=\"ci-closing-bar\" aria-hidden=\"true\"><\/div>\n <span class=\"ci-closing-icon\" aria-hidden=\"true\">\ud83d\udd4a\ufe0f<\/span>\n <p class=\"ci-closing-text\">\n <span class=\"ci-closing-qmark\" aria-hidden=\"true\">“<\/span>\n Ask and it will be given to you; seek and you will find;\n knock and the door will be opened to you.\n <\/p>\n <span class=\"ci-closing-attr\">\u2014 Matthew 7:7 \u00b7 Our door is always open<\/span>\n <\/div>\n\n <\/div>\n<\/section>\n\n<script>\n(function(){\n 'use strict';\n function initInfo(){\n var sec=document.getElementById('sbmc-cinfo'); if(!sec) return;\n sec.classList.add('ci-js');\n\n \/* \u2500\u2500 CANVAS \u2500\u2500 *\/\n (function(){\n var c=document.getElementById('ci-canvas'); if(!c) return;\n var ctx=c.getContext('2d'),W=0,H=0,tiles=[],raf;\n var COLS=['rgba(107,53,184,','rgba(59,18,120,','rgba(240,192,64,','rgba(212,152,42,',\n 'rgba(154,111,42,','rgba(180,80,200,','rgba(30,10,60,','rgba(90,20,150,'];\n function Tile(x,y,s){\n this.x=x;this.y=y;this.s=s;\n this.col=COLS[Math.floor(Math.random()*COLS.length)];\n this.ph=Math.random()*Math.PI*2; this.sp=Math.random()*.004+.001;\n }\n Tile.prototype.draw=function(t){\n var a=.04+.38*(.5+.5*Math.sin(t*this.sp+this.ph));\n ctx.fillStyle=this.col+a+')';\n ctx.fillRect(this.x+1,this.y+1,this.s-2,this.s-2);\n };\n function build(){tiles=[];var S=52;for(var x=0;x<W;x+=S)for(var y=0;y<H;y+=S)tiles.push(new Tile(x,y,S));}\n function resize(){W=c.width=sec.offsetWidth||window.innerWidth;H=c.height=sec.offsetHeight||1000;build();}\n var p=0;\n function ws(){\n if(sec.offsetWidth>0&&sec.offsetHeight>0){\n resize();var t=0;\n (function l(){ctx.clearRect(0,0,W,H);t++;for(var i=0;i<tiles.length;i++)tiles[i].draw(t);raf=requestAnimationFrame(l);})();\n }else if(p++<30)setTimeout(ws,100);\n }\n ws(); window.addEventListener('resize',function(){cancelAnimationFrame(raf);resize();});\n })();\n\n \/* \u2500\u2500 RAYS \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ci-rays'); if(!w) return;\n for(var i=0;i<16;i++){\n var s=document.createElement('span');\n s.style.cssText='left:'+(25+(50\/16)*i).toFixed(1)+'%;'+\n 'transform:rotate('+(-45+(90\/16)*i).toFixed(1)+'deg);'+\n 'animation-delay:'+(i*.3).toFixed(2)+'s;'+\n 'animation-duration:'+(4+Math.random()*4).toFixed(1)+'s;'+\n 'opacity:'+(0.08+Math.random()*.18).toFixed(2)+';';\n w.appendChild(s);\n }\n })();\n\n \/* \u2500\u2500 PARTICLES \u2500\u2500 *\/\n (function(){\n var w=document.getElementById('ci-ptcl'); if(!w) return;\n var cols=['rgba(240,192,64,','rgba(180,80,200,','rgba(107,53,184,','rgba(255,255,255,'];\n function spawn(){\n var p=document.createElement('div'); p.className='ci-pt';\n var sz=2+Math.random()*6,col=cols[Math.floor(Math.random()*cols.length)],al=(0.3+Math.random()*.5).toFixed(2);\n p.style.cssText='width:'+sz.toFixed(1)+'px;height:'+sz.toFixed(1)+'px;'+\n 'left:'+(Math.random()*100).toFixed(1)+'%;bottom:-10px;'+\n 'background:'+col+al+');'+\n 'animation-duration:'+(8+Math.random()*10).toFixed(1)+'s;'+\n 'animation-delay:'+(Math.random()*3).toFixed(2)+'s;'+\n 'box-shadow:0 0 '+(sz*2).toFixed(0)+'px '+col+'0.6);';\n w.appendChild(p);\n setTimeout(function(){if(p.parentNode)p.parentNode.removeChild(p);},18000);\n }\n for(var i=0;i<14;i++)(function(n){setTimeout(spawn,n*300);})(i);\n setInterval(spawn,1200);\n })();\n\n \/* \u2500\u2500 SCROLL REVEAL \u2014 info cards \u2500\u2500 *\/\n (function(){\n var cards=sec.querySelectorAll('.ci-card'); if(!cards.length) return;\n if('IntersectionObserver' in window){\n var io=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(!e.isIntersecting) return;\n var d=parseInt(e.target.getAttribute('data-delay')||'0',10);\n (function(el,dl){setTimeout(function(){el.classList.add('ci-show');},dl);})(e.target,d);\n io.unobserve(e.target);\n });\n },{threshold:.1});\n cards.forEach(function(c){io.observe(c);});\n }else{cards.forEach(function(c){c.classList.add('ci-show');});}\n })();\n\n \/* \u2500\u2500 SCROLL REVEAL \u2014 map card \u2500\u2500 *\/\n (function(){\n var mc=sec.querySelector('.ci-map-card'); if(!mc) return;\n if('IntersectionObserver' in window){\n var io=new IntersectionObserver(function(entries){\n entries.forEach(function(e){\n if(!e.isIntersecting) return;\n var d=parseInt(e.target.getAttribute('data-map-delay')||'0',10);\n (function(el,dl){setTimeout(function(){el.classList.add('ci-show');},dl);})(e.target,d);\n io.unobserve(e.target);\n });\n },{threshold:.08});\n io.observe(mc);\n }else{ mc.classList.add('ci-show'); }\n })();\n\n \/* \u2500\u2500 MAP OVERLAY \u2014 fade out when iframe loads \u2500\u2500 *\/\n (function(){\n var overlay=document.getElementById('ci-map-overlay');\n var iframe=sec.querySelector('.ci-map-embed iframe');\n if(!overlay||!iframe) return;\n function dismiss(){ overlay.classList.add('ci-map-loaded'); }\n iframe.addEventListener('load',dismiss);\n \/* Fallback: dismiss after 6s even if load event doesn't fire *\/\n setTimeout(dismiss,6000);\n })();\n }\n\n if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',initInfo);\n else initInfo();\n})();\n<\/script>\n\n<\/body>\n<\/html><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"Contact Us - STA Barbara Mission Center","description":""},"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Everest Co","author_link":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/blog\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":7,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":737,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/20\/revisions\/737"}],"wp:attachment":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}