diff --git a/css/styles.css b/css/styles.css
index c7b76f7..494e137 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -57,11 +57,13 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  min-width: 0;
 }
 
 html {
   scroll-behavior: smooth;
   font-size: 16px;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
@@ -71,14 +73,25 @@ body {
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
+  width: 100%;
+  position: relative;
 }
 
-img {
+body.nav-open {
+  overflow: hidden;
+}
+
+img, svg, video, iframe, canvas {
   max-width: 100%;
   height: auto;
   display: block;
 }
 
+h1, h2, h3, h4, h5, h6, p, span, a, li, blockquote {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -334,6 +347,25 @@ button, input, select, textarea {
   flex-shrink: 0;
 }
 
+.mobile-drawer-cta {
+  display: none;
+}
+
+.modal-btn-row {
+  margin-top: 24px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.btn-modal-full {
+  flex: 1 1 100%;
+}
+
+.btn-modal-half {
+  flex: 1 1 45%;
+}
+
 
 /* Buttons */
 .btn {
@@ -1360,83 +1392,6 @@ button, input, select, textarea {
   color: var(--slate-500);
 }
 
-/* Responsive Breakpoints */
-@media (max-width: 1024px) {
-  .relief-card-wrapper {
-    grid-template-columns: 1fr;
-  }
-  .about-grid {
-    grid-template-columns: 1fr;
-    gap: 40px;
-  }
-  .location-grid {
-    grid-template-columns: 1fr;
-  }
-  .contact-grid {
-    grid-template-columns: 1fr;
-  }
-  .giving-channel-grid {
-    grid-template-columns: 1fr;
-  }
-  .footer-grid {
-    grid-template-columns: 1fr;
-    gap: 36px;
-  }
-}
-
-@media (max-width: 1180px) {
-  .nav-links {
-    position: fixed;
-    top: 106px;
-    left: -100%;
-    width: 100%;
-    height: calc(100vh - 106px);
-    background: var(--primary-950);
-    flex-direction: column;
-    padding: 36px 24px;
-    gap: 20px;
-    transition: var(--transition);
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-
-  .nav-links.open {
-    left: 0;
-  }
-
-  .mobile-toggle {
-    display: block;
-  }
-
-  .nav-actions .btn-relief {
-    display: none;
-  }
-}
-
-@media (max-width: 768px) {
-
-
-  .section {
-    padding: 64px 0;
-  }
-
-  .hero-title {
-    font-size: 2.2rem;
-  }
-
-  .hero-stats {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .relief-card-wrapper {
-    padding: 24px 18px;
-  }
-
-  .donate-calculator {
-    padding: 30px 20px;
-  }
-}
-
 /* =========================================================
    STORYBRAND (SB7) FRAMEWORK STYLES
    ========================================================= */
@@ -1982,30 +1937,6 @@ button, input, select, textarea {
   margin: 0;
 }
 
-@media (max-width: 900px) {
-  .sb7-trans-wrapper {
-    grid-template-columns: 1fr;
-  }
-  .sb7-transitional-bar {
-    flex-direction: column;
-    text-align: center;
-    padding: 34px 22px;
-    gap: 24px;
-  }
-  .sb7-transitional-btn {
-    width: 100%;
-  }
-  .timeline-container::before {
-    left: 20px;
-  }
-  .timeline-item {
-    padding-left: 56px;
-  }
-  .timeline-dot {
-    left: 6px;
-  }
-}
-
 /* Caracas Communities & Neighborhoods Tags (Local SEO) */
 .neighborhoods-box {
 
@@ -2444,16 +2375,893 @@ button, input, select, textarea {
   color: var(--white);
 }
 
-@media (max-width: 600px) {
+/* ==========================================================================
+   Comprehensive Mobile-First Responsive Breakpoints & Overflow Fixes
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Desktop & Tablet Large (max-width: 1180px)
+   -------------------------------------------------------------------------- */
+@media (max-width: 1180px) {
+  .nav-links {
+    position: fixed;
+    top: 96px;
+    left: -100%;
+    width: 100%;
+    height: calc(100vh - 96px);
+    background: rgba(6, 13, 31, 0.98);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 24px 20px 80px 20px;
+    gap: 8px;
+    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    z-index: 1001;
+  }
+
+  .nav-links.open {
+    left: 0;
+  }
+
+  .nav-links a {
+    display: block;
+    width: 100%;
+    padding: 14px 16px;
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: var(--slate-100);
+    border-radius: var(--radius-sm);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    text-align: left;
+  }
+
+  .nav-links a:hover,
+  .nav-links a:active {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--gold-300);
+  }
+
+  .nav-links a::after {
+    display: none;
+  }
+
+  .mobile-drawer-cta {
+    display: flex !important;
+    margin-top: 14px;
+    width: 100%;
+    justify-content: center;
+    padding: 14px 20px;
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  .mobile-toggle {
+    display: block;
+  }
+
+  .nav-actions .nav-cta-btn {
+    display: none;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Tablets & Medium Screens (max-width: 1024px)
+   -------------------------------------------------------------------------- */
+@media (max-width: 1024px) {
+  .relief-card-wrapper {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .about-grid {
+    grid-template-columns: 1fr;
+    gap: 36px;
+  }
+
+  .location-grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .giving-channel-grid {
+    grid-template-columns: 1fr;
+    gap: 28px;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: 36px;
+  }
+
+  .sb7-trans-wrapper {
+    grid-template-columns: 1fr;
+    gap: 28px;
+  }
+
+  .sb7-transitional-bar {
+    flex-direction: column;
+    text-align: center;
+    padding: 36px 28px;
+    gap: 24px;
+  }
+
+  .sb7-transitional-content {
+    min-width: 0;
+  }
+
+  .sb7-transitional-btn {
+    width: 100%;
+    white-space: normal;
+    text-align: center;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Standard Mobile Devices & Phablets (max-width: 768px)
+   -------------------------------------------------------------------------- */
+@media (max-width: 768px) {
+  /* Layout & Container Padding */
+  .container {
+    padding: 0 16px;
+  }
+
+  .section {
+    padding: 56px 0;
+  }
+
+  /* Global Button Wrapping for Mobile */
+  .btn {
+    white-space: normal;
+    text-align: center;
+    line-height: 1.35;
+    padding: 12px 18px;
+    font-size: 0.92rem;
+    max-width: 100%;
+    word-break: break-word;
+  }
+
+  /* Emergency Top Bar */
+  .emergency-bar {
+    padding: 6px 12px;
+    font-size: 0.74rem;
+  }
+
+  .emergency-container {
+    gap: 6px;
+  }
+
+  /* Navigation Bar */
+  .nav-container {
+    height: 64px;
+    padding: 0 14px;
+    gap: 10px;
+  }
+
+  .brand-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  }
+
+  .brand-name {
+    font-size: 0.92rem;
+    max-width: 160px;
+    white-space: normal;
+    line-height: 1.15;
+  }
+
+  .brand-sub {
+    display: none;
+  }
+
+  .lang-switch {
+    padding: 2px;
+    gap: 1px;
+  }
+
+  .lang-btn {
+    padding: 4px 7px;
+    font-size: 0.72rem;
+  }
+
+  .mobile-toggle {
+    font-size: 24px;
+    padding: 4px 6px;
+  }
+
+  /* Hero Section */
+  .hero {
+    padding-top: 124px;
+    padding-bottom: 48px;
+    min-height: auto;
+    background-attachment: scroll;
+  }
+
+  .eyebrow {
+    font-size: 0.72rem;
+    padding: 5px 12px;
+    line-height: 1.35;
+    white-space: normal;
+    text-align: center;
+    margin-bottom: 18px;
+  }
+
+  .hero-title {
+    font-size: clamp(1.85rem, 6.8vw, 2.4rem);
+    line-height: 1.16;
+    margin-bottom: 16px;
+  }
+
+  .hero-subtitle {
+    font-size: 0.98rem;
+    line-height: 1.6;
+    margin-bottom: 24px;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 36px;
+    width: 100%;
+  }
+
+  .hero-actions .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .hero-stats {
+    grid-template-columns: 1fr 1fr;
+    gap: 16px 12px;
+    padding-top: 24px;
+  }
+
+  .stat-item h3 {
+    font-size: 1.85rem;
+  }
+
+  .stat-item p {
+    font-size: 0.8rem;
+    line-height: 1.3;
+  }
+
+  /* Typography & Headers */
+  .section-header {
+    margin-bottom: 36px;
+  }
+
+  .section-title {
+    font-size: clamp(1.65rem, 5.5vw, 2.2rem);
+    line-height: 1.2;
+    margin-bottom: 12px;
+  }
+
+  .section-desc {
+    font-size: 0.96rem;
+    line-height: 1.6;
+  }
+
+  /* Rebuilding Fund Section */
+  .relief-card-wrapper {
+    padding: 18px 14px;
+    gap: 20px;
+    border-radius: var(--radius-md);
+    margin-bottom: 36px;
+  }
+
+  .relief-media {
+    border-radius: var(--radius-sm);
+  }
+
+  .relief-media-badge {
+    position: static;
+    margin-top: 12px;
+    padding: 12px 14px;
+    border-radius: var(--radius-sm);
+  }
+
+  .progress-widget {
+    padding: 18px 14px;
+    border-radius: var(--radius-sm);
+  }
+
+  .progress-amount {
+    font-size: 2.2rem;
+  }
+
+  .progress-meta {
+    font-size: 0.82rem;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .urgent-note-box {
+    padding: 12px 14px;
+    font-size: 0.84rem;
+    margin-bottom: 18px;
+  }
+
+  /* Stewardship Breakdown */
+  .stewardship-box {
+    padding: 20px 14px;
+    margin: 24px auto 32px auto;
+    border-radius: var(--radius-md);
+  }
+
+  .stewardship-header h3 {
+    font-size: 1.25rem;
+  }
+
+  .stewardship-header p {
+    font-size: 0.88rem;
+    margin-bottom: 16px;
+  }
+
+  .stewardship-bar {
+    height: 24px;
+    margin-bottom: 20px;
+  }
+
+  .steward-segment {
+    font-size: 0.72rem;
+  }
+
+  .stewardship-legend {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .legend-item {
+    padding: 12px 12px;
+    gap: 10px;
+  }
+
+  .legend-item strong {
+    font-size: 0.86rem;
+  }
+
+  .legend-item p {
+    font-size: 0.78rem;
+  }
+
+  /* Impact Cards & Relief Pillars */
+  .impact-cards-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+    margin: 20px 0;
+  }
+
+  .impact-metric-card {
+    padding: 14px 14px;
+  }
+
+  .impact-metric-amount {
+    font-size: 1.25rem;
+  }
+
+  .pillars-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-bottom: 36px;
+  }
+
+  .pillar-card {
+    padding: 20px 16px;
+  }
+
+  .pillar-icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 14px;
+  }
+
+  /* Donation Calculator */
+  .donate-calculator {
+    padding: 24px 16px;
+    border-radius: var(--radius-md);
+  }
+
+  .donate-calculator h3 {
+    font-size: 1.45rem;
+  }
+
+  .tier-chips {
+    gap: 8px;
+    margin-bottom: 20px;
+  }
+
+  .tier-chip {
+    padding: 10px 14px;
+    font-size: 1.05rem;
+    min-width: 58px;
+    flex: 1 1 28%;
+  }
+
+  .tier-impact-display {
+    padding: 14px 14px;
+    font-size: 0.92rem;
+    margin-bottom: 20px;
+  }
+
+  /* StoryBrand Elements */
+  .sb7-problem-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-top: 24px;
+  }
+
+  .sb7-problem-card {
+    padding: 20px 16px;
+  }
+
+  .sb7-plan-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-top: 24px;
+  }
+
+  .sb7-step-card {
+    padding: 22px 16px;
+  }
+
+  .sb7-step-num {
+    font-size: 2.2rem;
+    margin-bottom: 10px;
+  }
+
+  .sb7-stakes-grid {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    margin-top: 20px;
+  }
+
+  .sb7-stake-item {
+    padding: 18px 14px;
+  }
+
+  .sb7-trans-box {
+    padding: 22px 16px;
+  }
+
+  .sb7-transitional-bar {
+    padding: 24px 16px;
+    margin: 32px 0;
+    flex-direction: column;
+    text-align: center;
+    gap: 16px;
+    border-radius: var(--radius-md);
+  }
+
+  .sb7-transitional-content {
+    min-width: 0;
+  }
+
+  .sb7-transitional-bar h3 {
+    font-size: 1.25rem;
+  }
+
+  .sb7-transitional-bar p {
+    font-size: 0.92rem;
+  }
+
+  .sb7-transitional-btn {
+    white-space: normal;
+    width: 100%;
+    padding: 14px 16px;
+    font-size: 0.92rem;
+    line-height: 1.35;
+    text-align: center;
+    word-break: break-word;
+  }
+
+  /* Relief Timeline */
+  .timeline-container {
+    margin-top: 32px;
+  }
+
+  .timeline-container::before {
+    left: 14px;
+  }
+
+  .timeline-dot {
+    left: 0;
+    width: 28px;
+    height: 28px;
+    font-size: 0.75rem;
+  }
+
+  .timeline-item {
+    padding-left: 42px;
+    margin-bottom: 22px;
+  }
+
+  .timeline-card {
+    padding: 18px 14px;
+  }
+
+  .timeline-card h4 {
+    font-size: 1.05rem;
+  }
+
+  .timeline-card p {
+    font-size: 0.88rem;
+  }
+
+  /* About Pastor Víctor */
+  .pastor-photo-caption {
+    padding: 20px 14px 12px 14px;
+  }
+
+  .about-text h2 {
+    font-size: 1.75rem;
+    margin-bottom: 16px;
+  }
+
+  .about-text p {
+    font-size: 0.96rem;
+  }
+
+  .quote-box {
+    padding: 14px 16px;
+    margin-top: 18px;
+  }
+
+  .quote-box blockquote {
+    font-size: 1rem;
+  }
+
+  /* Seminary & Ministries */
+  .seminary-features-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .seminary-card {
+    padding: 22px 16px;
+  }
+
+  .ministries-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .ministry-card {
+    padding: 22px 16px;
+  }
+
+  /* Location & Neighborhoods */
+  .location-grid {
+    padding: 20px 14px;
+    gap: 20px;
+    border-radius: var(--radius-md);
+  }
+
+  .location-address {
+    font-size: 0.96rem;
+    padding-left: 14px;
+  }
+
+  .schedule-card {
+    padding: 20px 14px;
+  }
+
+  .service-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 8px 0;
+  }
+
+  .neighborhoods-box {
+    padding: 18px 14px;
+    margin-top: 24px;
+    border-radius: var(--radius-md);
+  }
+
+  .neighborhood-tags {
+    gap: 6px;
+  }
+
+  .n-tag {
+    padding: 4px 9px;
+    font-size: 0.76rem;
+  }
+
+  /* Church Sponsorship */
+  .sponsorship-section {
+    margin-bottom: 36px;
+  }
+
+  .sponsorship-grid {
+    grid-template-columns: 1fr;
+    gap: 18px;
+  }
+
+  .sponsor-card {
+    padding: 24px 16px;
+  }
+
+  .sponsor-tier-price {
+    font-size: 1.95rem;
+  }
+
+  /* Giving Section */
+  .giving-box {
+    padding: 20px 14px;
+    border-radius: var(--radius-md);
+  }
+
+  .giving-channel-grid {
+    gap: 16px;
+    margin-top: 18px;
+  }
+
+  .channel-card {
+    padding: 18px 14px;
+  }
+
+  .btn-copy-check {
+    width: 100% !important;
+    white-space: normal;
+    padding: 10px 12px;
+    font-size: 0.84rem;
+  }
+
+  .contact-daughter-banner {
+    padding: 16px 14px;
+    flex-direction: column;
+    text-align: center;
+    gap: 12px;
+  }
+
+  .contact-daughter-banner .btn {
+    width: 100%;
+  }
+
+  /* Contact Form & Info */
+  .contact-form-card {
+    padding: 20px 14px;
+    border-radius: var(--radius-md);
+  }
+
+  .contact-info-card {
+    padding: 16px 14px;
+  }
+
+  /* Prevent iOS Safari input focus auto-zoom */
+  .form-input,
+  .form-select,
+  .form-textarea {
+    font-size: 16px;
+    padding: 12px 14px;
+  }
+
+  /* FAQ Accordion */
+  .faq-grid {
+    margin-top: 28px;
+    gap: 12px;
+  }
+
+  .faq-question {
+    padding: 16px 14px;
+    font-size: 0.98rem;
+    gap: 10px;
+  }
+
+  .faq-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .faq-answer {
+    padding: 0 14px;
+    font-size: 0.9rem;
+  }
+
+  .faq-item.open .faq-answer {
+    padding: 0 14px 16px 14px;
+  }
+
+  /* Modals */
+  .modal-overlay {
+    padding: 12px;
+  }
+
+  .modal-box {
+    padding: 24px 16px;
+    max-height: 90vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    border-radius: var(--radius-md);
+  }
+
+  .prayer-modal-box {
+    padding: 24px 16px;
+  }
+
+  .modal-close-btn {
+    top: 10px;
+    right: 10px;
+    font-size: 26px;
+    width: 34px;
+    height: 34px;
+  }
+
+  .prayer-point-card {
+    gap: 12px;
+    padding: 12px 12px;
+  }
+
+  .prayer-point-num {
+    width: 28px;
+    height: 28px;
+    font-size: 0.78rem;
+  }
+
+  .modal-btn-row {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .modal-btn-row .btn {
+    width: 100%;
+    flex: 1 1 100%;
+  }
+
+  /* Sticky Rebuilding Pill */
   .sticky-rebuild-pill {
-    right: 12px;
-    left: 12px;
-    bottom: 16px;
-    justify-content: space-between;
-    padding: 8px 14px;
+    right: 8px;
+    left: 8px;
+    bottom: 12px;
+    padding: 8px 10px;
+    gap: 6px;
+  }
+
+  .sticky-pill-title {
+    font-size: 0.68rem;
+  }
+
+  .sticky-pill-sub {
+    font-size: 0.64rem;
+  }
+
+  .sticky-pill-btn {
+    padding: 6px 10px;
+    font-size: 0.72rem;
+  }
+
+  .sticky-pill-close {
+    font-size: 0.95rem;
+    padding: 2px 4px;
+  }
+
+  /* Toast */
+  .toast-notification {
+    width: 90%;
+    max-width: 360px;
+    font-size: 0.82rem;
+    padding: 10px 16px;
+    text-align: center;
+    justify-content: center;
+  }
+
+  /* Footer */
+  .site-footer {
+    padding: 44px 0 20px 0;
+  }
+
+  .footer-grid {
+    gap: 24px;
+    margin-bottom: 28px;
+  }
+
+  .scripture-banner {
+    padding: 14px 12px;
+    font-size: 0.84rem;
+    margin-bottom: 24px;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Small Mobile Screens (max-width: 480px)
+   -------------------------------------------------------------------------- */
+@media (max-width: 480px) {
+  .btn {
+    font-size: 0.88rem;
+    padding: 11px 14px;
+  }
+
+  .nav-container {
+    padding: 0 10px;
+    gap: 8px;
+  }
+
+  .brand-name {
+    font-size: 0.86rem;
+    max-width: 145px;
+  }
+
+  .lang-btn {
+    padding: 3px 6px;
+    font-size: 0.68rem;
+  }
+
+  .hero-stats {
+    gap: 12px 8px;
+  }
+
+  .stat-item h3 {
+    font-size: 1.65rem;
+  }
+
+  .stat-item p {
+    font-size: 0.74rem;
+  }
+
+  .progress-amount {
+    font-size: 1.95rem;
+  }
+
+  .tier-chips {
+    gap: 6px;
+  }
+
+  .tier-chip {
+    padding: 8px 10px;
+    font-size: 0.95rem;
+    min-width: 48px;
+    flex: 1 1 40%;
+  }
+
+  .steward-segment {
+    font-size: 0.68rem;
+    letter-spacing: 0;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Extra Small / Compact Mobile Screens (max-width: 360px)
+   -------------------------------------------------------------------------- */
+@media (max-width: 360px) {
+  .container {
+    padding: 0 10px;
+  }
+
+  .hero-stats {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .brand-name {
+    font-size: 0.82rem;
+    max-width: 125px;
+  }
+
+  .lang-btn span {
+    display: none;
+  }
+
+  .stewardship-bar {
+    height: 20px;
+  }
+
+  .steward-segment {
+    font-size: 0.62rem;
   }
 }
 
 
 
 
+
diff --git a/index.html b/index.html
index 23273a4..3eaf74e 100644
--- a/index.html
+++ b/index.html
@@ -188,6 +188,7 @@
         <a href="#faq" data-i18n="faq.title">FAQ</a>
         <a href="#location" data-i18n="nav.location">Location</a>
         <a href="#contact" data-i18n="nav.contact">Contact</a>
+        <a href="#rebuilding-fund" class="btn btn-relief mobile-drawer-cta open-donate-modal" data-i18n="nav.relief_cta">Earthquake Relief</a>
       </nav>
 
 
@@ -1323,8 +1324,8 @@
         </div>
       </div>
 
-      <div style="margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;">
-        <a href="prayer-card.html" target="_blank" class="btn btn-relief" style="flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;">
+      <div class="modal-btn-row">
+        <a href="prayer-card.html" target="_blank" class="btn btn-relief btn-modal-full" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
             <polyline points="14 2 14 8 20 8"></polyline>
@@ -1334,7 +1335,7 @@
           </svg>
           <span data-i18n="prayer.btn_sheet">Open Printable 8.5x11 Sheet</span>
         </a>
-        <button onclick="window.print();" class="btn btn-primary" style="flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;">
+        <button onclick="window.print();" class="btn btn-primary btn-modal-half" style="display: inline-flex; align-items: center; justify-content: center; gap: 8px;">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <polyline points="6 9 6 2 18 2 18 9"></polyline>
             <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
@@ -1342,7 +1343,7 @@
           </svg>
           <span data-i18n="prayer.btn_print">Print / Save as PDF</span>
         </button>
-        <button id="prayer-modal-close-btn" class="btn btn-outline-white" style="flex: 1; color: var(--slate-700); border-color: var(--slate-300);" data-i18n="modal.close">
+        <button id="prayer-modal-close-btn" class="btn btn-outline-white btn-modal-half" style="color: var(--slate-700); border-color: var(--slate-300);" data-i18n="modal.close">
           Close Window
         </button>
       </div>
diff --git a/js/main.js b/js/main.js
index 4c5b49e..a2cbe50 100644
--- a/js/main.js
+++ b/js/main.js
@@ -148,20 +148,34 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // Mobile Menu Toggle
+  // Mobile Menu Toggle & Body Lock
   if (mobileToggle && navLinks) {
-    mobileToggle.addEventListener('click', () => {
-      navLinks.classList.toggle('open');
-      mobileToggle.textContent = navLinks.classList.contains('open') ? '✕' : '☰';
+    const toggleNav = (forceClose = false) => {
+      const shouldOpen = forceClose ? false : !navLinks.classList.contains('open');
+      navLinks.classList.toggle('open', shouldOpen);
+      document.body.classList.toggle('nav-open', shouldOpen);
+      mobileToggle.textContent = shouldOpen ? '✕' : '☰';
+      mobileToggle.setAttribute('aria-expanded', String(shouldOpen));
+    };
+
+    mobileToggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleNav();
     });
 
-    // Close mobile nav when link clicked
+    // Close mobile nav when any link inside is clicked
     navLinks.querySelectorAll('a').forEach(link => {
       link.addEventListener('click', () => {
-        navLinks.classList.remove('open');
-        mobileToggle.textContent = '☰';
+        toggleNav(true);
       });
     });
+
+    // Close mobile nav when clicking outside on backdrop
+    document.addEventListener('click', (e) => {
+      if (navLinks.classList.contains('open') && !navLinks.contains(e.target) && e.target !== mobileToggle) {
+        toggleNav(true);
+      }
+    });
   }
 
   // Contact Form Submission (Simulated Client-Side)
diff --git a/prayer-card.html b/prayer-card.html
index 8237922..06e6146 100644
--- a/prayer-card.html
+++ b/prayer-card.html
@@ -246,6 +246,40 @@
       color: #64748b;
     }
 
+    /* Screen Responsive Styles */
+    @media screen and (max-width: 860px) {
+      .sheet {
+        width: 95%;
+        max-width: 100%;
+        min-height: auto;
+        margin: 16px auto;
+        padding: 24px 18px;
+      }
+      .sheet-header {
+        flex-direction: column;
+        text-align: center;
+        gap: 14px;
+      }
+      .mission-board-badge {
+        text-align: center;
+        width: 100%;
+      }
+      .sheet-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+      .no-print-bar {
+        padding: 10px 14px;
+        flex-direction: column;
+        gap: 10px;
+        text-align: center;
+      }
+      .no-print-bar a, .no-print-bar .btn-print {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
     /* Print styles */
     @media print {
       body {