* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Mallanna', sans-serif; background-color: #FFF; color: #333; overflow-x: hidden; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(122, 0, 38, 0.1);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 34px rgba(31, 42, 55, 0.08);
    backdrop-filter: blur(12px);
}

.header-inner {
    width: min(1540px, calc(100% - 120px));
    min-height: 92px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 8px 0;
}

.logo a {
    display: inline-flex;
    align-items: center;
}

.logo img {
    display: block;
    width: 300px;
    height: auto;
    max-height: 74px;
    object-fit: contain;
    object-position: left center;
}

.nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nav-menu a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 10px 13px;
    border-radius: 8px;
    color: #2d3137;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease;
}

.nav-menu a:hover {
    background: #f6eef1;
    color: #7a0026;
}

.nav-menu a.active {
    background: #eef9fb;
    color: #087b8f;
}

.nav-dropdown {
    position: relative;
    padding: 10px 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #FFF;
    border: 1px solid rgba(122, 0, 38, 0.1);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(31, 42, 55, 0.14);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 3px;
    z-index: 200;
}
.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu,
.nav-dropdown.open > .dropdown-menu {
    display: flex;
}
.dropdown-menu a {
    justify-content: flex-start;
    min-height: 34px;
    padding: 9px 11px;
    border-radius: 7px;
    text-transform: none;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background: #eef9fb;
    color: #087b8f;
}
.dropdown-menu .nav-dropdown {
    padding: 0;
}
.dropdown-menu .nav-dropdown > .dropdown-toggle {
    width: 100%;
}
.nested-dropdown {
    position: relative;
}
.nested-dropdown::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 10px;
    height: 100%;
}
.nested-dropdown > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 11px;
    white-space: nowrap;
}
.nested-dropdown > .dropdown-toggle .arrow {
    transform: rotate(-90deg);
}
.nested-menu {
    top: -8px;
    left: calc(100% + 2px);
    margin-left: 0;
}
.nested-dropdown:hover > .nested-menu,
.nested-dropdown:focus-within > .nested-menu,
.nested-dropdown.open > .nested-menu {
    display: flex;
}
.search-box {
    display: flex;
    justify-content: flex-end;
}

.search-box input {
    width: 100%;
    max-width: 220px;
    height: 42px;
    border: 1px solid rgba(8, 123, 143, 0.16);
    border-radius: 8px;
    background: #f8fbfc;
    color: #293241;
    font-size: 16px;
    outline: none;
    padding: 0 13px;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.search-box input:focus {
    border-color: #087b8f;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(8, 123, 143, 0.1);
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid rgba(122, 0, 38, 0.2);
    border-radius: 8px;
    cursor: pointer;
    color: #7a0026;
    flex-shrink: 0;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Layout Wrappers */
.main-wrapper { width: 100%; overflow: clip; }
.content-container { max-width: 1200px; width: 100%; margin: 0 auto; position: relative; }

/* Hero Top Wave */
.hero-top-wave {
    width: 100%;
    line-height: 0;
    margin-bottom: -1px;
}
.hero-top-wave svg {
    display: block;
    width: 100%;
    height: 70px;
}
.hero-top-wave-fill {
    fill: #d3f2f7;
}

/* TOP WHITE AREA */
.top-white-area {
    background: #FFF;
    padding-bottom: 60px;
}

/* Book floating exactly like Image 1 */
.book-img {
    position: absolute;
    top: 115px;
    left: -100px;
    width: 250px;
    transform: rotate(-6deg);
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
    animation: bookFloat 6s ease-in-out infinite alternate;
    z-index: 20;
}
@keyframes bookFloat { 0% { transform: rotate(-6deg) translateY(0); } 100% { transform: rotate(-4deg) translateY(-8px); } }


.top-flex {
     display: flex; justify-content: center; align-items: flex-start; gap: 20%; padding-left: 415px; }
.title-group { display: flex; flex-direction: column; align-items: flex-end; }
.title-img {  width: auto; margin-left: -320px; }
.masapatrika {
    font-family: 'Mallanna', sans-serif;
    font-size: 24px;
    color: #173C4E;
    margin: 15px 20px 0 0;
    text-align: center; }

.lists-group { display: flex; gap: 20px; padding-top: 20px; }
.custom-list { list-style: none; display: flex; flex-direction: column; gap: 0px; font-family: 'Mallanna', sans-serif; font-size: 20px; color: #333; }
.custom-list li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: black;}
.dot { 
    width: 8px; 
    height: 8px; 
    background-color: #000000; 
    border-radius: 20px
    /* border-radius: 50%; border: 3px solid #7ACED4;  */
}


/* CYAN WAVE AREA */
.cyan-wave-area {
    position: relative;
    background: #7ACED4;
    background-image: linear-gradient(180deg, #7ACED4 0%, #7ACED4 100%);
    padding-bottom: 80px;
    margin-top: 0px; /* Space for the wave overlap */
}

/* CSS Waves: layered + auto-scrolling (replaces main page.png) */
.wave-divider {
    position: absolute;
    top: -60px; /* Adjust so the wave perfectly transitions into the cyan background */
    left: 0;
    width: 100%;
    height: 135px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}
.wave-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
}
.wave-layer-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.wave-layer-white svg {
    fill: #fff;
}

.wave-layer-1 {
    z-index: 1;
    opacity: 0.15;
    animation: waveScrollSlow 34s linear infinite;
}

.wave-layer-2 {
    z-index: 2;
    opacity: 0.25;
    animation: waveScrollMid 24s linear infinite reverse;
}

.wave-layer-3 {
    z-index: 3;
    opacity: 0.5;
    animation: waveScrollFast 16s linear infinite;
}

.wave-layer-4 {
    z-index: 4;
    animation: waveScrollMid 24s linear infinite;
}

.wave-layer-5 {
    z-index: 5;
    animation: waveScrollFast 16s linear infinite;
}

.wave-layer-5 path {
    fill: #E0F8FB;
    opacity: 0.45;
}

.wave-layer-6 {
    z-index: 6;
    animation: waveScrollMid 24s linear infinite;
}

.wave-layer-6 path {
    fill: #A4DCE0;
    opacity: 0.7;
}

.wave-layer-7 {
    z-index: 7;
    animation: waveScrollSlow 34s linear infinite;
}

.wave-layer-7 path {
    fill: #7ACED4;
    opacity: 1;
}

@keyframes waveScrollSlow {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes waveScrollMid {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes waveScrollFast {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.cyan-relative { position: relative; z-index: 10; }

/* BOAT */
.boat {
    position: absolute;
    top: -175px; /* Sits into the water line */
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    z-index: 20;
    animation: boatFloat 4s ease-in-out infinite;
}
@keyframes boatFloat { 0% { transform: translate(-50%, 0px) rotate(0deg); } 50% { transform: translate(-50%, -10px) rotate(2deg); } 100% { transform: translate(-50%, 0px) rotate(0deg); } }

/* Splash */
.splash-box {
    position: absolute;
    top: -261px;
    left: 82%;
    /* transform: translateX(-50%); */
    width: 329px;
    height: 244px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
    /* animation: splashPulse 4s ease-in-out infinite alternate; */
}


.splash-bg-img {
    position: absolute;
    top: 125px;
    left: -7px;
    width: 117%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    /* opacity: 0.8; */
}
.splash-text-wrapper { position: relative; z-index: 2; text-align: center; font-family: 'Mallanna', sans-serif; line-height: 1.1; }
.splash-text-top { font-size: 22px; color: #555; }
.splash-text-bottom { font-size: 36px; color: #8F495E; font-weight: bold; text-shadow: 2px 2px 0px #FFF, -2px -2px 0px #FFF, 2px -2px 0px #FFF, -2px 2px 0px #FFF; }
@keyframes splashPulse { 0% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(1.05); } }

/* Fish */
.fish {
    position: absolute;
    right: -15%;
    top: 120px;
    width: 170px;
    z-index: 15;
    animation: fishSwim 6s ease-in-out infinite;
}
@keyframes fishSwim { 0% { transform: translateX(0); } 50% { transform: translateX(0px); } 100% { transform: translateX(0); } }

/* Mission Text Content below images */
.mission-content {
    padding-top: 92px; /* Clears the boat and splash */
    padding-left: 20px; /* Clears the book hanging on the left */
}


.mission-headings{
    font-family: 'Mallanna', sans-serif;
    font-size: 35px;
    color: #006880;
    font-weight: 600;
}
.mission-heading {
    font-family: 'Mallanna', sans-serif;
    font-size: 20px;
    color: #006880;
    font-weight: 600;
    margin-bottom: -75px; }
.welcome-block {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 25px; }
.welcome-heading {
    font-family: 'Mallanna', sans-serif;
    font-size: 28px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 12px; }
.welcome-highlight {
    color: #fff; }
.welcome-block .mission-para {
    text-align: center;
    padding-right: 0;
    font-family: 'Mallanna', sans-serif;
    font-size: 20px;
    color: #173C4E; }
.verses-block {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-bottom: 25px;
    font-family: 'Mallanna', sans-serif;
    font-size: 20px; }
.verse-line { display: ; gap: 15px; }
.verse-ref { color: #fff; white-space: nowrap; min-width: 140px; }
.verse-text { color: #173C4E; }
.mission-para { 
    font-family: 'Mallanna', sans-serif; 
    font-size: 20.5px; 
    color: #444; 
    line-height: 1.8; 
    text-align: justify; 
    padding-right: 50px; }


/* Dark Teal Scripture Section */
.bottom-teal-bg {
    position: relative;
    width: 100%;
    background: #003138;
    padding: 56px 24px 48px;
}

.scripture-verse {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.scripture-verse-ref {
    font-family: 'Mallanna', sans-serif;
    font-style: italic;
    font-size: 19px;
    color: #FFEBB3;
    letter-spacing: 0.02em;
    margin: 0 0 8px;
}

.scripture-verse-text p {
    font-family: 'Mallanna', sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 2px;
}

.scripture-divider {
    display: flex;
    justify-content: center;
    padding: 22px 0;
    color: #FFEBB3;
    opacity: 0.6;
    pointer-events: none;
}

.scripture-divider-end {
    padding-bottom: 0;
}

.scripture-mission {
    max-width: 1100px;
    margin: 0 auto;
}

.scripture-mission p {
    font-family: 'Mallanna', sans-serif;
    font-size: 19px;
    line-height: 1.85;
    color: #e7eef0;
    text-align: justify;
    margin: 0;
}

.commitment-card {
    background: #F9F9F9;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 36px;
    text-align: center;
}

.commitment-text {
    font-family: 'Mallanna', sans-serif;
    font-size: 19px;
    line-height: 1.85;
    color: #444;
    text-align: justify;
    margin: 0 0 18px;
}

.commitment-cta {
    font-family: 'Mallanna', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #173C4E;
    margin: 0;
}

@media (max-width: 768px) {
    .bottom-teal-bg {
        padding: 40px 18px 36px;
    }

    .scripture-verse-ref {
        font-size: 15px;
    }

    .scripture-verse-text p {
        font-size: 14px;
    }

    .scripture-divider svg {
        width: 160px;
        height: auto;
    }

    .scripture-mission p {
        font-size: 16px;
        line-height: 1.75;
        text-align: justify;
    }

    .commitment-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .commitment-text {
        font-size: 15px;
        line-height: 1.75;
    }

    .commitment-cta {
        font-size: 16px;
    }
}

/* Footer */
.site-footer {
    position: relative;
    background: #003138;
    color: rgba(255,255,255,0.78);
}
.page-home .site-footer {
    margin-top: -30px;
}
body:not(.page-home) .site-footer {
    padding: 40px 24px 30px;
}
.footer-prayer-heading {
    text-align: center;
    font-family: 'Mallanna', sans-serif;
    /* font-style: italic; */
    font-size: 20px;
    color: #FFEBB3;
    letter-spacing: 0.02em;
    margin: 0 0 28px;
}
.footer-inner {
    width: min(100%, 735px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 26px;
    align-items: center;
}
.footer-brand {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}
.footer-logo {
    display: block;
    width: 380px;
    max-width: 100%;
    height: auto;
}
@media (min-width: 901px) {
    .footer-logo {
        width: 480px;
        max-width: 135%;
    }
    .footer-contact-row {
        font-size: 20px;
    }
}
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-left: 26px;
    border-left: 1px solid rgba(255,255,255,0.18);
}
.footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    color: rgba(255,255,255,0.78);
    font-size: 19px;
    line-height: 1.35;
}
.footer-contact-row p {
    margin: 0;
}
.footer-contact a {
    color: rgba(255,255,255,0.78);
    font-size: 19px;
    font-weight: 400;
    text-decoration: none;
}
.footer-contact a:hover {
    color: #fff;
}
.footer-icon {
    flex: 0 0 22px;
    line-height: 1.35;
}
.footer-icon-svg {
    display: block;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}
.footer-icon.location .footer-icon-svg {
    color: #e5163a;
}
.footer-icon.phone .footer-icon-svg,
.footer-icon.email .footer-icon-svg {
    color: #04becf;
}

.footer-legal {
    background: #003138;
    color: rgba(255,255,255,0.78);
    padding: 24px 24px;
    text-align: center;
}
.footer-legal-title {
    font-family: 'Mallanna', sans-serif;
    font-size: 20px;
    font-weight: 100;
    color: #FFEBB3;
    margin: 0 0 14px;
}
.footer-legal-notice {
    font-family: 'Mallanna', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    max-width: 1100px;
    margin: 0 auto;
}
.footer-legal-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1100px;
    margin: 18px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.18);
    font-size: 15px;
    color: rgba(255,255,255,0.7);
}

/* Inner Pages */
.page-content {
    background: #fff;
    min-height: 480px;
    padding: 80px 24px;
}

.page-section {
    width: min(100% - 40px, 1400px);
    margin: 0 auto;
    color: #173C4E;
}

.page-section > .page-hero {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.page-section h1 {
    color: #006880;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 18px;
}

.page-section p {
    max-width: 820px;
    font-family: 'Mallanna', sans-serif;
    font-size: 21px;
    line-height: 1.75;
    margin-bottom: 16px;
}

.contact-page {
    padding: 42px 24px 70px;
    background: linear-gradient(135deg, #eaf6fb 0%, #f8fbff 46%, #fff5f8 100%);
}
.contact-hero,
.contact-layout {
    width: min(100% - 40px, 1400px);
    margin: 0 auto;
}
.contact-hero {
    min-height: 260px;
    display: grid;
    align-items: center;
    margin-bottom: 26px;
    padding: 44px;
    overflow: hidden;
    border-radius: 24px;
    background-image:
        linear-gradient(90deg, rgba(23,60,78,.94), rgba(122,0,38,.72)),
        var(--page-hero-bg, url("images/jesus-song-card.png"));
    background-position: center, center right;
    background-size: auto, contain;
    background-repeat: no-repeat;
    color: #FFF;
    box-shadow: 0 24px 60px rgba(23,60,78,.16);
}
.contact-hero span {
    display: inline-flex;
    width: max-content;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(247,200,115,.18);
    color: #f7c873;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
.contact-hero h1 {
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
    margin-bottom: 14px;
}
.contact-hero p {
    max-width: 560px;
    color: rgba(255,255,255,.88);
    font-size: 18px;
    line-height: 1.7;
}
.contact-layout {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: stretch;
}
.contact-info-card,
.contact-form-card {
    border: 1px solid rgba(23,60,78,.1);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 22px 54px rgba(23,60,78,.1);
}
.contact-info-card {
    display: grid;
    align-content: start;
    gap: 13px;
    padding: 30px;
    height: 100%;
}
.contact-info-card h2,
.contact-form-card h2 {
    color: #173C4E;
    font-size: 26px;
}
.contact-info-card p {
    color: #536273;
    font-size: 15px;
    line-height: 1.75;
}
.contact-info-card a {
    color: #006880;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
    font-size: 18px;
}

.contact-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.contact-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0, 104, 128, 0.08);
    color: #173C4E !important;
    font-size: 14px;
    font-weight: 100 !important;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

.contact-social-link:hover {
    background: #006880;
    color: #FFF !important;
    transform: translateY(-2px);
}

.contact-social-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.contact-social-icon svg {
    width: 100%;
    height: 100%;
}
.contact-form-card {
    padding: 30px;
}
.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.contact-form label {
    display: grid;
    gap: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}
.contact-form .full {
    grid-column: 1 / -1;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid #d7e1ea;
    border-radius: 16px;
    background: #fbfdff;
    color: #173C4E;
    font: inherit;
    padding: 13px 14px;
    outline: none;
}
.contact-form textarea {
    min-height: 170px;
    resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #006880;
    box-shadow: 0 0 0 4px rgba(0,104,128,.12);
}
.contact-form button {
    grid-column: 1 / -1;
    width: max-content;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #7a0026, #006880);
    color: #FFF;
    cursor: pointer;
    font: inherit;
    font-weight: 100;
    padding: 13px 22px;
}
.form-alert {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    font-weight: 700;
}
.form-alert.success {
    background: #e8fff8;
    color: #087b5b;
}
.form-alert.error {
    background: #fff0f0;
    color: #b42318;
}
.form-alert p + p {
    margin-top: 5px;
}

.missionary-page {
    padding: 44px 24px 70px;
    background: linear-gradient(135deg, #eaf6fb 0%, #f8fbff 48%, #fff5f8 100%);
}
.ms-wrap {
    width: min(100% - 40px, 1400px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.ms-banner,
.missionary-read {
    width: 100%;
}
/* ── Unified Page Hero Banner (used across all inner pages) ── */
.ms-banner,
.page-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
    border-radius: 20px;
    background-image:
        linear-gradient(120deg, rgba(13,43,56,.97) 0%, rgba(23,60,78,.95) 50%, rgba(90,0,28,.92) 100%),
        var(--page-hero-bg, url("images/jesus-song-card.png"));
    background-position: center, center;
    background-size: auto, cover;
    background-repeat: no-repeat;
    box-shadow: 0 10px 40px rgba(23,60,78,.2);
}
.page-hero {
    width: min(100% - 40px, 1400px);
    margin-left: auto;
    margin-right: auto;
}
.ms-banner::before,
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.ms-banner::after,
.page-hero::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 40px solid rgba(255,255,255,.03);
    pointer-events: none;
}
.ms-banner-inner,
.page-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 38px 40px;
}
.ms-back,
.page-hero-back {
    color: rgba(255,255,255,.6);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    width: max-content;
}
.ms-back:hover,
.page-hero-back:hover { color: #fff; }
.ms-banner-tag,
.page-hero-tag {
    width: max-content;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(247,200,115,.15);
    border: 1px solid rgba(247,200,115,.35);
    color: #f7c873;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ms-banner h1,
.page-hero h1 {
    font-size: clamp(28px, 3.8vw, 48px);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin: 0;
}
.ms-banner p,
.page-hero p {
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    max-width: 500px;
}
@media (max-width: 680px) {
    .ms-banner-inner { padding: 26px 20px; gap: 10px; }
    .ms-banner h1    { font-size: 24px; }
    .ms-banner p     { font-size: 13px; }
}
.missionary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.missionary-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(23,60,78,.10);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.missionary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(23,60,78,.16);
}
.missionary-image {
    display: block;
    position: relative;
    overflow: hidden;
    line-height: 0;
}
.missionary-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 220ms ease;
}
.missionary-card:hover .missionary-image img {
    transform: scale(1.04);
}
.ms-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,104,128,.55);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .03em;
    opacity: 0;
    transition: opacity 180ms ease;
    border-radius: 14px;
}
.missionary-image:hover .ms-card-overlay {
    opacity: 1;
}
.missionary-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex: 1;
}
.missionary-card h2 {
    color: #173C4E;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}
.missionary-card p {
    color: #536273;
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}
.ms-read-btn {
    display: inline-block;
    margin-top: auto;
    padding-top: 8px;
    color: #006880;
    font-size: 13px;
    font-weight: 700;
}
.ms-download-btn {
    display: block;
    width: 100%;
    padding: 7px 10px;
    background: #006880;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    letter-spacing: .02em;
    transition: background 160ms ease;
}
.ms-download-btn:hover {
    background: #004f62;
    color: #fff;
}
.ms-empty {
    width: min(100% - 40px, 1400px);
    margin: 40px auto;
    padding: 40px;
    text-align: center;
    color: #888;
    font-size: 18px;
}
.missionary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.missionary-actions a,
.missionary-download {
    width: max-content;
    border-radius: 999px;
    background: #006880;
    color: #FFF;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 12px;
    text-decoration: none;
}
.missionary-actions a + a {
    background: #7a0026;
}
/* ── Missionary Story Reader ── */
.ms-reader-page {
    min-height: 100vh;
    background: #f4f6f0;
    padding: 0 0 60px;
}
.ms-reader-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 860px;
    margin: 0 auto;
    padding: 18px 24px;
    gap: 12px;
}
.ms-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    background: #006880;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms;
}
.ms-dl-btn:hover { background: #004f62; color: #fff; }
.ms-reader-body {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(23,60,78,.11);
    overflow: hidden;
}
.ms-reader-cover {
    width: 100%;
    max-height: 340px;
    overflow: hidden;
    background: #edf8fb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ms-reader-cover img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
}
.ms-reader-content {
    padding: 36px 48px 48px;
}
.ms-reader-content h1 {
    color: #173C4E;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid #e2f0f4;
}
.ms-docx-body {
    color: #2d3748;
    font-family: 'Mallanna', sans-serif;
    font-size: 19px;
    line-height: 2;
}
.ms-docx-body p  { margin-bottom: 16px; }
.ms-docx-body h2 { color: #173C4E; font-size: 22px; font-weight: 700; margin: 32px 0 10px; }
.ms-docx-body h3 { color: #173C4E; font-size: 19px; font-weight: 700; margin: 24px 0 8px; }
.ms-docx-body strong { color: #173C4E; }
.ms-reader-footer {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid #e2f0f4;
    text-align: center;
}
.ms-dl-btn-lg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #006880;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-radius: 999px;
    text-decoration: none;
    transition: background 150ms;
}
.ms-dl-btn-lg:hover { background: #004f62; color: #fff; }
.ms-no-content {
    color: #888;
    font-size: 17px;
    text-align: center;
    padding: 40px 0;
}
.docx-content p  { margin-bottom: 14px; }
.docx-content h2 { color: #173C4E; font-size: 22px; margin: 28px 0 10px; }
.docx-content h3 { color: #173C4E; font-size: 19px; margin: 22px 0 8px; }
.docx-content h4 { color: #173C4E; font-size: 17px; margin: 18px 0 6px; }
.docx-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 16px;
}
.docx-table td {
    border: 1px solid #c7dce2;
    padding: 8px 12px;
    vertical-align: top;
}
.missionary-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    padding: 12px 24px;
    background: #006880;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: background 160ms ease;
}
.missionary-download:hover { background: #004f62; color: #fff; }

.content-page h2 {
    color: #993300;
    font-size: 24px;
    font-weight: 600;
    margin: 22px 0 10px;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px;
    margin-top: 24px;
}

.content-page article,
.belief-page {
    background: #FFF;
    border: 1px solid rgba(0, 104, 128, 0.12);
    border-radius: 8px;
    padding: 28px;
}

.statement-section {
    margin-bottom: 54px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 104, 128, 0.22);
}

.section-title span {
    color: #006880;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
}

.statement-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 46px;
}

.mission-vision-page article {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.mission-vision-page article + article {
    border-left: 1px solid rgba(0, 104, 128, 0.18);
    padding-left: 42px;
}

.mission-vision-page h2 {
    margin-top: 0;
    color: #993300;
}

.mission-vision-page p {
    max-width: none;
}

.mission-vision-page ul {
    list-style: none;
    padding-left: 0;
}

.mission-vision-page li {
    position: relative;
    padding-left: 22px;
}

.mission-vision-page li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #006880;
}

.content-page ul {
    padding-left: 22px;
    font-family: 'Mallanna', sans-serif;
    font-size: 20px;
    line-height: 1.75;
}

.content-page li {
    margin-bottom: 10px;
}

.telugu-text p,
.telugu-text ul {
    font-family: 'Mallanna', sans-serif;
}

.belief-page h2:first-of-type {
    margin-top: 0;
}

.belief-page p {
    max-width: none;
}

.about-block {
    margin-bottom: 54px;
}

.about-block:last-child {
    margin-bottom: 0;
}

.about-us-page .about-subtitle {
    margin-bottom: 14px;
}

.about-belief-section {
    padding: 0;
    border: 0;
    background: transparent;
}

.about-belief-section h2 {
    margin-top: 26px;
}

.about-belief-section .section-title + h2 {
    margin-top: 0;
}

/* Bible Resources */
.resources-page {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.96)),
        var(--page-hero-bg, none) center / cover no-repeat,
        #FFF;
    min-height: calc(100vh - 86px);
    padding: 64px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.resources-hero {
    max-width: 720px;
    margin: 0 auto 12px;
    padding: 0 16px;
    text-align: center;
}

@media (min-width: 1281px) {
    .resources-hero {
        margin-top: -170px;
    }
}

.resources-hero h1 {
    margin: 0 0 16px;
    color: #173C4E;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.resources-hero-tag {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(171, 36, 35, 0.1);
    color: #AB2423;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resources-hero-underline {
    width: 96px;
    height: 6px;
    margin: 0 auto 24px;
    border-radius: 999px;
    background: #AB2423;
}

.resources-hero p {
    margin: 0;
    color: #57636c;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}

.resources-stage {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.resource-cards {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 18px 0 120px;
    transform-style: preserve-3d;
}

.resource-cards::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 20px;
    height: 90px;
    background: linear-gradient(180deg, rgba(229, 65, 74, 0.18), rgba(255, 255, 255, 0));
    filter: blur(6px);
    transform: perspective(450px) rotateX(58deg);
    opacity: 0.74;
    pointer-events: none;
}

.resource-card {
    position: relative;
    --card-angle: rotateY(0deg);
    --card-skew: skewY(0deg);
    width: 236px;
    height: 174px;
    margin-left: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    border-radius: 20px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.45;
    text-transform: uppercase;
    box-shadow: 0 22px 28px rgba(58, 20, 86, 0.18);
    transform: var(--card-angle) var(--card-skew) translateY(0) scale(1);
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    z-index: 1;
}

.resource-card:first-child {
    margin-left: 0;
}

.resource-card::after {
    content: "";
    position: absolute;
    inset: auto 10px -112px;
    height: 100px;
    border-radius: 0 0 22px 22px;
    background: inherit;
    opacity: 0.2;
    transform: scaleY(-1) skewX(-8deg);
    filter: blur(2px);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 78%);
    pointer-events: none;
}

.resource-card span {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.resource-card:hover {
    transform: var(--card-angle) var(--card-skew) translateY(-28px) scale(1.08);
    box-shadow: 0 38px 48px rgba(58, 20, 86, 0.3);
    filter: saturate(1.08);
    z-index: 50;
}

.resource-card:focus-visible {
    outline: 3px solid rgba(0, 104, 128, 0.38);
    outline-offset: 5px;
    transform: var(--card-angle) var(--card-skew) translateY(-28px) scale(1.08);
    z-index: 50;
}

.card-infographics {
    background: linear-gradient(135deg, #f3a800 0%, #de9400 48%, #c57c00 100%);
    --card-angle: rotateY(30deg);
    --card-skew: skewY(0.5deg);
}

.card-maps {
    background: linear-gradient(135deg, #ff3417 0%, #f12d10 54%, #cb220a 100%);
    --card-angle: rotateY(18deg);
    z-index: 2;
}

.card-stories {
    background: linear-gradient(135deg, #e1004f 0%, #c40043 52%, #970031 100%);
    transform: var(--card-angle) var(--card-skew) translateY(-2px) scale(1);
    z-index: 4;
}

.card-stories:hover,
.card-stories:focus-visible {
    transform: var(--card-angle) var(--card-skew) translateY(-30px) scale(1.08);
}

.card-downloads {
    background: linear-gradient(135deg, #a200ff 0%, #7f00ec 48%, #c300f4 100%);
    --card-angle: rotateY(-18deg);
    z-index: 3;
}

.card-genealogies {
    background: linear-gradient(135deg, #2c48e7 0%, #5136e8 50%, #6e49f3 100%);
    --card-angle: rotateY(-30deg);
    --card-skew: skewY(-0.5deg);
    z-index: 2;
}

.resource-detail-page {
    min-height: 720px;
    background: #FFF;
    padding: 70px 24px 110px;
}

.resource-detail {
    max-width: 1100px;
    margin: 0 auto;
}

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #006880;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.resource-detail h1 {
    color: #006880;
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 28px;
}

.book-page {
    position: relative;
    min-height: 430px;
    padding: 54px 64px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 5%, transparent 95%, rgba(0, 0, 0, 0.08)),
        linear-gradient(90deg, #fffdf7 0%, #fff 49.7%, #eadfc8 50%, #fff 50.3%, #fffdf7 100%);
    border: 1px solid rgba(0, 104, 128, 0.14);
    border-radius: 8px;
    box-shadow: 0 24px 50px rgba(23, 60, 78, 0.14);
}

.book-page::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 50%;
    width: 1px;
    background: rgba(125, 99, 70, 0.22);
}

.book-page p {
    max-width: 430px;
    font-family: 'Mallanna', sans-serif;
    font-size: 21px;
    line-height: 1.75;
    color: #173C4E;
}

/* Bible Maps */
.maps-page {
    background:
        radial-gradient(circle at top left, rgba(211, 242, 247, 0.78), transparent 32%),
        #FFF;
    min-height: 720px;
    padding: 44px 0 90px;
}

.maps-content {
    width: min(100% - 40px, 1400px);
    margin: 0 auto;
}

.maps-section {
    margin-top: 46px;
}

.maps-section h2 {
    color: #173C4E;
    font-size: 28px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(0, 104, 128, 0.14);
}

.maps-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.map-row {
    position: relative;
    display: flex;
    min-height: 168px;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 18px;
    overflow: hidden;
    border: 1px solid rgba(0, 104, 128, 0.12);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 254, 0.96));
    box-shadow: 0 18px 36px rgba(23, 60, 78, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.map-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #006880, #D36C21);
}

.map-row::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -32px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: rgba(211, 242, 247, 0.78);
}

.map-row:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 104, 128, 0.28);
    box-shadow: 0 26px 44px rgba(23, 60, 78, 0.16);
}

.map-row h3 {
    position: relative;
    z-index: 2;
    color: #173C4E;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.map-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.map-actions a {
    min-width: 64px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #006880;
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.map-actions a:nth-child(2) {
    background: #D36C21;
}

.map-actions a:nth-child(3) {
    background: #993300;
}

.map-actions a:hover {
    transform: scale(1.07);
    background: #173C4E;
    box-shadow: 0 8px 16px rgba(23, 60, 78, 0.2);
}

/* Sunday School Song Directory */
.songs-directory-page {
    background: #fff;
    min-height: 720px;
    padding: 42px 0 90px;
}

.songs-directory {
    width: min(1410px, calc(100% - 280px));
    margin: 0 auto;
    font-family: 'Mallanna', sans-serif;
}

.songs-toolbar {
    position: sticky;
    top: 92px;
    z-index: 20;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(74, 108, 247, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(23, 60, 78, 0.08);
    backdrop-filter: blur(10px);
}

.songs-search-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 10px;
}

.songs-search {
    flex: 1 1 auto;
}

.songs-search input {
    width: 100%;
    padding: 8px 18px;
    border: 1px solid #d9e2ef;
    border-radius: 12px;
    background: #FFF;
    color: #333;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 150ms ease, background 150ms ease;
}

.songs-search input:focus {
    border-color: #4a6cf7;
    background: #FFF;
}

.songs-category-select {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr);
    align-items: center;
    gap: 12px;
    flex: 0 0 360px;
}

.songs-category-select label {
    color: #173C4E;
    font-size: 13px;
    font-weight: 100;
    text-transform: uppercase;
    white-space: nowrap;
}

.songs-category-select select {
    width: 100%;
    border: 1px solid #d7e1ea;
    border-radius: 12px;
    background: #fff;
    color: #173C4E;
    cursor: pointer;
    font: inherit;
    font-weight: 100;
    padding: 8px 14px;
    outline: none;
}

.songs-category-select select:focus {
    border-color: #006880;
    box-shadow: 0 0 0 4px rgba(0,104,128,.12);
}

.songs-alpha {
    display: grid;
    row-gap: 8px;
    column-gap: 8px;
}

.songs-alpha--top {
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    margin-top: 10px;
}

.songs-alpha button {
    min-width: 40px;
    padding: 0 5px;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #990000;
    cursor: pointer;
    font: inherit;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
 
.songs-alpha button:hover,
.songs-alpha button.active {
    background: pink;
    color: #FFF;
    border-color: pink;
}

.songs-alpha button.disabled {
    opacity: 0.25;
    pointer-events: none;
}

.songs-count {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    margin-bottom: 18px;
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

.songs-count span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.songs-count span::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
        pink;
}

.songs-count span::after {
    content: "";
    flex: 1;
    min-width: 120px;
    height: 1px;
    background: #e5e7eb;
}

.songs-letter-group {
    margin: 24px 0 34px;
}

.songs-letter-heading {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.songs-letter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 7px;
    background: pink;
    color: #FFF;
    font-size: 40px;
    font-weight: 700;
}

.songs-letter-count {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

.songs-letter-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.songs-letter-toggle-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 6px;
    background:
        linear-gradient(pink, pink) center / 12px 2px no-repeat,
        #eef3ff;
    box-shadow: inset 0 0 0 1px rgba(255, 192, 203, 0.4);
    transition: background 180ms ease, transform 180ms ease;
}

.songs-letter-group.is-collapsed .songs-letter-toggle-icon {
    background:
        linear-gradient(pink, pink) center / 12px 2px no-repeat,
        linear-gradient(pink, pink) center / 2px 12px no-repeat,
        #eef3ff;
}

.songs-letter-group.is-collapsed [data-song-letter-panel] {
    display: none;
}

/* Sunday School pages: no bold text */
.page-sunday-school .page-hero h1,
.page-sunday-school .songs-category-select label,
.page-sunday-school .songs-category-select select,
.page-sunday-school .songs-alpha button,
.page-sunday-school .songs-letter-badge,
.page-sunday-school .songs-letter-heading,
.page-sunday-school .songs-letter-count,
.page-sunday-school .songs-count,
.page-sunday-school .song-table thead th,
.page-sunday-school .song-table td,
.page-sunday-school .song-title-link {
    font-weight: normal;
}

.page-sunday-school-english-songs .songs-letter-badge {
    font-size: 30px;
}

.page-songs-lyrics .song-table thead th {
    background: steelblue;
}

.page-songs-lyrics .songs-alpha button {
    font-size: 30px;
    font-weight: 100;
}

.page-songs-lyrics .song-table tbody tr:hover {
    background: #eef4fa;
    box-shadow: 0 10px 22px rgba(70, 130, 180, 0.35);
}

.page-songs-lyrics .song-table tbody tr:hover td {
    box-shadow: inset 0 -1px 0 steelblue, 0 5px 14px steelblue;
}

.page-songs-lyrics .songs-letter-badge {
    background: steelblue;
}

.page-songs-lyrics .songs-count span::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
        steelblue;
}

.page-songs-lyrics .songs-letter-toggle-icon {
    background:
        linear-gradient(steelblue, steelblue) center / 12px 2px no-repeat,
        #eef3ff;
}

.page-songs-lyrics .songs-letter-group.is-collapsed .songs-letter-toggle-icon {
    background:
        linear-gradient(steelblue, steelblue) center / 12px 2px no-repeat,
        linear-gradient(steelblue, steelblue) center / 2px 12px no-repeat,
        #eef3ff;
}

.page-songs-lyrics .song-reader-header h1 {
    color: steelblue;
    font-family: 'Ramabhadra', sans-serif;
    font-weight: normal;
}

.page-songs-lyrics .song-mini-list a {
    font-size: 22px;
}

.page-songs-lyrics .song-letter-heading span strong {
    font-family: 'Ramabhadra', sans-serif;
    font-size: 56px;
}

.page-songs-lyrics .song-letter-heading small {
    font-size: 18px;
}

.page-songs-lyrics .song-reader-layout {
    grid-template-columns: minmax(270px, 520px) minmax(0, 1fr);
}

.song-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 6px 6px 0 0;
}

.song-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: transparent;
    color: #111827;
}

.song-table thead th {
    height: 43px;
    padding: 0 26px;
    background: pink;
    color: #000000;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0;
    text-align: left;
}

.song-table thead th:first-child {
    width: 72px;
}

.song-table tbody tr:nth-child(even) {
    background: #fff;
}

.song-table tbody tr:nth-child(odd) {
    background: #f6f6f6;
}

.song-table tbody tr {
    border-bottom: 1px solid #eceff3;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.song-table tbody tr:hover {
    background: #fff0f5;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(255, 105, 180, 0.35);
}

.song-table td {
    height: 45px;
    padding: 0 26px;
    font-size: 18px;
    vertical-align: middle;
    box-shadow: inset 0 -1px 0 rgba(17, 24, 39, 0.04), 0 1px 8px rgba(17, 24, 39, 0.04);
    transition: box-shadow 180ms ease, color 180ms ease;
}

.song-table tbody tr:hover td {
    box-shadow: inset 0 -1px 0 rgba(255, 105, 180, 0.2), 0 5px 14px rgb(255 105 180 / 0%);
}

.song-number {
    color: #7b8794;
    font-size: 14px;
    font-weight: 400;
}

.resource-action-cell {
    white-space: nowrap;
}

.resource-action-cell a {
    display: inline-block;
    min-width: 64px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #006880;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.resource-action-cell:nth-child(3) a {
    background: #D36C21;
}

.resource-action-cell:nth-child(4) a {
    background: #993300;
}

.resource-action-cell a:hover {
    transform: scale(1.07);
    background: #173C4E;
    box-shadow: 0 8px 16px rgba(23, 60, 78, 0.2);
}

.resource-table thead th,
.resource-table td {
    text-align: center;
}

.resource-table td.song-name-cell {
    text-align: left;
}
.content-title-main {
    display: block;
    font-size: 20px;
}
.content-title-ref {
    display: block;
    font-size: 16px;
    color: #57636c;
}

.content-empty-cell {
    padding: 28px;
    color: #7b8794;
    font-size: 15px;
    text-align: center;
}

.content-image-cell {
    width: 96px;
}

.content-thumb {
    display: block;
    width: 80px;
    height: 60px;
    margin: 0 auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(23, 60, 78, 0.14);
}

.content-table .resource-action-cell:nth-child(4) a {
    background: #D36C21;
}

.content-table .resource-action-cell:nth-child(5) a {
    background: #993300;
}

.song-title-link {
    display: inline-flex;
    max-width: 100%;
    color: #111827;
    font-family: 'Mallanna', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
}

.song-title-link:hover {
    color: #000;
}

.song-title-link:focus {
    color: #000;
    outline: 2px solid pink;
}

.page-songs-lyrics .song-title-link:focus {
    outline: 2px solid steelblue;
}

.songs-empty {
    display: none;
    padding: 40px;
    color: #aaa;
    font-size: 15px;
    text-align: center;
}

/* Song Reader */
.song-reader-page {
    background:
        linear-gradient(180deg, rgba(122, 0, 38, 0.055), rgba(8, 123, 143, 0.04) 44%, #fbfcfd),
        #fbfcfd;
    min-height: 760px;
    padding: 38px 18px 96px;
}

.song-reader-layout {
    display: grid;
    grid-template-columns: minmax(270px, 520px) minmax(0, 1fr);
    grid-template-areas:
        "search search"
        "topbar topbar"
        "sidebar reader";
    column-gap: 30px;
    row-gap: 20px;
    width: min(1540px, calc(100% - 280px));
    margin: 0 auto;
    font-family: 'Mallanna', sans-serif;
}

.song-reader-search {
    grid-area: search;
    display: flex;
    width: min(520px, 100%);
    margin: 0;
    border: 1px solid rgba(122, 0, 38, 0.12);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 34px rgba(31, 42, 55, 0.08);
}

.song-reader-search input {
    flex: 1;
    height: 44px;
    border: 0;
    padding: 0 15px;
    color: #1f2937;
    font-size: 14px;
    outline: none;
}

.song-reader-search button {
    width: 82px;
    border: 0;
    background: #087b8f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 160ms ease;
}

.song-reader-search button:hover {
    background: #7a0026;
}

.song-reader-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid rgba(122, 0, 38, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 30px rgba(31, 42, 55, 0.06);
    backdrop-filter: blur(10px);
}

.song-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #3a1e28;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.song-back-link::before {
    content: "\2039";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #7a0026;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(122, 0, 38, 0.24);
}

.song-back-link:hover {
    color: #087b8f;
}

.song-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    color: #51606f;
    font-size: 14px;
}

.song-tools label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid rgba(8, 123, 143, 0.14);
    border-radius: 7px;
    background: #fff;
    color: #51606f;
    font-weight: 700;
}

.song-tools label:has(input[type="range"]) {
    min-width: 190px;
}

.song-tools select {
    height: 24px;
    border: 0;
    color: #087b8f;
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    outline: none;
}

.song-tools input[type="range"] {
    width: 150px;
    height: 6px;
    accent-color: #087b8f;
    cursor: pointer;
}

.song-tools output {
    min-width: 28px;
    color: #7a0026;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.song-tools button,
.song-tool-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid rgba(8, 123, 143, 0.18);
    border-radius: 7px;
    background: #fff;
    color: #087b8f;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 7px 12px;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.song-tools button:hover,
.song-tool-link:hover {
    border-color: #7a0026;
    background: #7a0026;
    color: #fff;
}

.song-tools button.disabled,
.song-tools button:disabled {
    border-color: #e2e8f0;
    background: #f4f6f8;
    color: #9aa5b1;
    cursor: not-allowed;
}

.song-reader-sidebar {
    grid-area: sidebar;
    align-self: start;
    overflow: hidden;
    border: 1px solid rgba(122, 0, 38, 0.11);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(31, 42, 55, 0.09);
}

.song-letter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(122, 0, 38, 0.09);
    background: linear-gradient(135deg, #fff, #fff8f3);
    color: #3a1e28;
}

.song-letter-heading span {
    color: #7a0026;
    font-family: 'Mallanna', sans-serif;
    font-size: 22px;
    font-weight: 500;
}

.song-letter-heading span strong {
    display: inline-block;
    font-family: 'Ramabhadra', sans-serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    vertical-align: middle;
}

.song-letter-heading small {
    color: #087b8f;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

.song-mini-list {
    max-height: 650px;
    overflow-y: auto;
    background: #fff;
}

.song-mini-list a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #eef0f2;
    color: #293241;
    font-family: 'Mallanna', sans-serif;
    font-size: 22px;
    line-height: 1.34;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.song-mini-list a span {
    color: #8a96a3;
    font-family: 'Mallanna', sans-serif;
    font-size: 12px;
    font-weight: 700;
}

.song-mini-list a:hover,
.song-mini-list a.active {
    border-top-color: rgba(8, 123, 143, 0.14);
    background: #f1fbfd;
    color: #087b8f;
}

.song-mini-list a.active {
    box-shadow: inset 4px 0 0 #7a0026;
}

.song-reader {
    grid-area: reader;
    max-width: none;
    min-height: 560px;
    padding: 34px 42px 48px;
    border: 1px solid rgba(122, 0, 38, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(31, 42, 55, 0.09);
}

.song-reader-kicker {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff4e1;
    color: #875300;
    font-size: 14px;
    font-weight: 700;
}

.song-reader-header {
    margin-bottom: 24px;
}

.song-reader-header h1 {
    display: inline-block;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 4px solid steelblue;
    color: steelblue;
    font-family: 'Ramabhadra', sans-serif;
    font-size: 40px;
    font-weight: normal;
    line-height: 1.28;
}

.song-lyrics,
.song-lyrics-empty {
    color: #232a31;
}

.song-lyrics {
    font-family: 'Mallanna', sans-serif;
    font-size: 28px;
    line-height: 1.0;
    white-space: normal;
}

.song-lyrics-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.song-lyrics-tab {
    padding: 10px 24px;
    border: 1px solid #d7e1ea;
    border-radius: 10px;
    background: #f8fafc;
    color: #173C4E;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.song-lyrics-tab.active {
    background: linear-gradient(135deg, #4a6cf7, #006880);
    border-color: #4a6cf7;
    color: #FFF;
}

.song-lyrics-panel {
    display: none;
}

.song-lyrics-panel.active {
    display: block;
}

.lyrics-slider-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(18, 20, 24, 0.82);
}

.lyrics-slider-modal.open {
    display: flex;
}

.lyrics-slider-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(1180px, 100%);
    min-height: min(760px, calc(100vh - 56px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(255, 196, 87, 0.16), transparent 30%),
        linear-gradient(135deg, #fffdf8, #f3fbfd);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.lyrics-slider-bar,
.lyrics-slider-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: #7a0026;
    color: #fff;
}

.lyrics-slider-bar strong {
    font-size: 18px;
    line-height: 1.3;
}

.lyrics-slider-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.lyrics-slider-tools label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.lyrics-slider-tools select {
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: #fff;
    color: #7a0026;
    font: inherit;
    font-weight: 700;
    padding: 0 10px;
    outline: none;
}

.lyrics-slider-tools input[type="color"] {
    width: 42px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    padding: 3px;
}

.lyrics-slider-bar button,
.lyrics-slider-actions button,
.lyrics-slider-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 8px 14px;
    text-decoration: none;
}

.lyrics-slider-actions {
    background: #087b8f;
}

.lyrics-slider-actions span {
    font-size: 16px;
    font-weight: 800;
}

.lyrics-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px;
    color: #1f2937;
    font-family: 'Mallanna', sans-serif;
    font-size: clamp(34px, 4.4vw, 62px);
    font-weight: normal;
    line-height: 1.22;
    text-align: center;
    white-space: pre-line;
}

.lyrics-slider-stage.theme-light {
    background:
        radial-gradient(circle at top left, rgba(255, 196, 87, 0.16), transparent 30%),
        linear-gradient(135deg, #fffdf8, #f3fbfd);
}

.lyrics-slider-stage.theme-maroon {
    background: linear-gradient(135deg, #7a0026, #2b0713);
}

.lyrics-slider-stage.theme-maroon .lyrics-slide,
.lyrics-slider-stage.theme-dark .lyrics-slide,
.lyrics-slider-stage.theme-teal .lyrics-slide {
    color: #fff;
}

.lyrics-slider-stage.theme-teal {
    background: linear-gradient(135deg, #087b8f, #063d4b);
}

.lyrics-slider-stage.theme-dark {
    background: linear-gradient(135deg, #111827, #020617);
}

.lyrics-slider-stage.theme-gold {
    background: linear-gradient(135deg, #fff4d1, #f7c873);
}

.lyrics-slider-stage.theme-gold .lyrics-slide {
    color: #3a1e00;
}

.song-lyrics-empty h2 {
    color: #7a0026;
    font-size: 22px;
    margin-bottom: 10px;
}

.song-lyrics-empty p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.7;
}

.song-lyrics-empty code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef2f7;
    color: #173C4E;
}

@media (max-width: 1440px) {
    .header-inner {
        width: min(100% - 72px, 1240px);
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 18px;
    }

    .logo img {
        width: 280px;
        max-height: 68px;
    }

    .nav-menu {
        justify-content: flex-end;
        gap: 4px;
    }

    .nav-menu a {
        padding: 9px 10px;
        font-size: 14px;
    }

    .top-white-area {
        padding: 24px 36px 70px;
        overflow: visible;
    }

    .top-white-area .content-container {
        max-width: 1200px;
    }

    .book-img {
        top: 145px;
        left: 0;
        width: clamp(190px, 15.8vw, 230px);
    }

    .top-flex {
        justify-content: space-between;
        gap: clamp(34px, 5vw, 72px);
        padding-left: clamp(210px, 18vw, 260px);
    }

    .title-group {
        align-items: flex-start;
    }

    .title-img {
        display: block;
        width: clamp(430px, 36vw, 488px);
        max-width: 100%;
        height: auto;
        margin-left: 0;
    }

    .lists-group {
        gap: clamp(22px, 3vw, 34px);
        padding-top: 18px;
    }

    .custom-list {
        font-size: 18px;
    }

    .boat {
        top: -162px;
        width: 330px;
    }

    .splash-box {
        top: -238px;
        left: auto;
        right: 14px;
        width: 288px;
        height: 214px;
    }

    .fish {
        right: 0;
        width: 132px;
    }
}

@media (max-width: 1280px) {
    .header-inner,
    .songs-directory,
    .song-reader-layout {
        width: min(100% - 72px, 1180px);
    }

    .maps-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── HOME HERO – mobile/laptop (≤1240px) ── */
@media (max-width: 1240px) {

    /* ── White top area ── */
    .top-white-area {
        padding: 20px 18px 100px;
        overflow: visible;
    }

    /* Book on LEFT, title+list on RIGHT — row layout */
    .top-white-area .content-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 0;
    }

    /* Anchor wrapping book */
    .top-white-area .content-container > a {
        flex-shrink: 0;
        line-height: 0;
    }

    /* Book: static, left column */
    .book-img {
        position: static;
        display: block;
        width: 72px;
        filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
        animation: bookFloat 6s ease-in-out infinite alternate;
    }

    /* Right column: title above, list below */
    .top-flex {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-left: 0;
    }

    .title-group {
        align-items: flex-start;
        width: 100%;
    }

    /* Title fills right column */
    .title-img {
        display: block;
        width: min(100%, 560px);
        height: auto;
        margin: 0;
    }

    /* Two lists side by side inside right column */
    .lists-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 0;
        padding-top: 0;
        width: 100%;
    }

    .custom-list { font-size: 15px; gap: 5px; }

    /* ── Cyan wave area ── */
    .cyan-wave-area { margin-top: 70px; padding-bottom: 0; }

    .wave-divider {
        top: -166px;
        height: 180px;
    }

    .boat { top: -139px; width: 175px; }

    .splash-box {
        display: flex;
        top: -187px;
        left: auto;
        right: 6px;
        width: 170px;
        height: 130px;
    }
    .splash-text-top { font-size: 14px; }
    .splash-text-bottom { font-size: 23px; }

    .fish { display: block; width: 72px; right: 4px; top: 28px; }

    .mission-content { padding-top: 138px; padding-left: 18px; padding-right: 18px; }

    .verses-block { font-size: 16px; gap: 12px; margin-bottom: 18px; }

    .verse-line { flex-direction: column; gap: 3px; }

    .verse-ref { min-width: unset; font-size: 14px; font-weight: 700; }

    .verse-text { font-size: 15px; }

    .mission-para { font-size: 16px; padding-right: 0; line-height: 1.8; }
}

@media (max-width: 1060px) {
    .maps-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .footer-inner {
        width: min(100%, 620px);
        grid-template-columns: 290px 1fr;
        gap: 22px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .header-inner {
        width: min(100% - 28px, 720px);
        grid-template-columns: 1fr auto;
        gap: 10px 14px;
        align-items: center;
        padding: 12px 0;
    }

    .songs-directory {
        width: min(100% - 28px, 720px);
    }

    .song-reader-layout {
        width: min(100% - 28px, 720px);
    }

    .nav-menu {
        display: none;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-bottom: 8px;
        border-top: 1px solid rgba(122, 0, 38, 0.1);
    }

    .nav-menu.open {
        display: flex;
    }

    .nav-toggle {
        display: flex;
        justify-self: end;
        background: #fff;
        border-color: rgba(122, 0, 38, 0.36);
        box-shadow: 0 6px 16px rgba(31, 42, 55, 0.08);
    }

    .nav-dropdown {
        padding: 0;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(122, 0, 38, 0.04);
        padding: 4px 0 4px 14px;
        margin-top: 2px;
    }

    .dropdown-menu a {
        white-space: normal;
    }

    .logo img {
        width: 270px;
        max-height: 68px;
    }

    .search-box {
        width: 100%;
        justify-content: center;
    }

    .search-box input {
        max-width: 420px;
    }

    .nested-menu {
        position: static;
        margin-left: 0;
        box-shadow: none;
        border-left: 0;
        border-right: 0;
    }

    .nested-dropdown::after {
        display: none;
    }

    .nested-dropdown > .dropdown-toggle .arrow {
        transform: none;
    }

    .statement-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .mission-vision-page article + article {
        border-left: 0;
        border-top: 1px solid rgba(0, 104, 128, 0.18);
        padding-left: 0;
        padding-top: 24px;
    }

    .resources-page {
        min-height: calc(100vh - 130px);
        padding: 32px 18px;
    }

    .resource-cards {
        flex-wrap: wrap;
        gap: 18px;
        padding-bottom: 36px;
    }

    .resource-cards::after,
    .resource-card::after {
        display: none;
    }

    .resource-card,
    .resource-card:first-child {
        width: 176px;
        height: 128px;
        margin-left: 0;
        transform: none;
        font-size: 17px;
    }

    .book-page {
        padding: 34px 26px;
        background: #fffdf7;
    }

    .book-page::before {
        display: none;
    }

    .maps-hero {
        padding-top: 38px;
    }

    .maps-hero h1 {
        font-size: 34px;
    }

    .maps-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .map-row {
        min-height: 160px;
    }

    .map-actions {
        justify-content: flex-start;
    }

    .song-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-hero,
    .contact-layout {
        width: min(100% - 28px, 720px);
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .ms-wrap,
    .missionary-read {
        width: min(100% - 28px, 720px);
    }

    .missionary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .song-reader-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "topbar"
            "reader"
            "sidebar";
        row-gap: 20px;
    }

    .song-reader-search {
        width: 100%;
        margin-left: 0;
    }

    .song-reader-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .song-reader {
        max-width: none;
        padding: 30px 28px 40px;
    }

    .song-mini-list {
        max-height: 360px;
    }

    .song-reader-header h1 {
        font-size: 28px;
    }
}

@media (max-width: 620px) {
    /* Home hero – small phone */
    .top-white-area { padding: 16px 12px 65px; }
    .top-white-area .content-container { gap: 10px; }
    .book-img { width: 58px; }
    .top-flex { gap: 10px; }
    .custom-list { font-size: 13.5px; gap: 4px; }
    .cyan-wave-area { margin-top: 45px; }
    .cyan-relative { margin-top: 32px; }
    .wave-divider {
        top: -100px;
        height: 100px;
    }
    .boat { top: -86px; left: calc(50% - 35px); width: 135px; }
    .splash-box { top: -12px; right: 31px; width: 91px; height: 70px; }
    .splash-bg-img { top: -65px; }
    .splash-text-top { font-size: 12px; }
    .splash-text-bottom { font-size: 18px; }
    .fish { width: 48px; right: 3px; top: -30px; }
    .mission-content { padding-top: 60px; padding-left: 12px; padding-right: 12px; }
    .verses-block { font-size: 14px; }
    .mission-para { font-size: 14.5px; line-height: 1.72; }

    .site-footer {
        padding: 28px 20px 28px;
    }

    .footer-prayer-heading {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
    }

    .footer-brand {
        justify-content: center;
        width: 100%;
    }

    .footer-logo {
        width: min(305px, 100%);
    }

    .footer-contact {
        width: min(100%, 360px);
        padding-left: 0;
        padding-top: 20px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.18);
    }

    .header-inner {
        width: min(100% - 22px, 420px);
    }

    .songs-directory {
        width: min(100% - 22px, 420px);
    }

    .song-reader-layout {
        width: min(100% - 22px, 420px);
    }

    .logo img {
        width: 230px;
        max-height: 60px;
    }

    .nav-menu a {
        min-height: 32px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .dropdown-menu,
    .nested-menu {
        min-width: min(260px, calc(100vw - 36px));
    }

    .maps-list {
        grid-template-columns: 1fr;
    }

    .song-card-grid {
        grid-template-columns: 1fr;
    }

    .songs-search-row {
        flex-direction: column;
    }

    .songs-category-select {
        grid-template-columns: 1fr;
        flex: 1 1 auto;
        justify-content: stretch;
    }

    .contact-page {
        padding: 24px 0 44px;
    }

    .contact-hero {
        width: min(100% - 22px, 420px);
        min-height: 230px;
        padding: 28px;
        border-radius: 18px;
    }

    .contact-layout {
        width: min(100% - 22px, 420px);
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-info-card,
    .contact-form-card {
        padding: 22px;
        border-radius: 18px;
    }

    .missionary-page,
    .missionary-read-page {
        padding: 24px 0 44px;
    }

    .ms-wrap,
    .missionary-read {
        width: min(100% - 22px, 420px);
        padding: 24px 0;
        border-radius: 18px;
    }

    .missionary-grid {
        width: min(100% - 22px, 420px);
        grid-template-columns: 1fr;
    }

    .song-reader-page {
        padding: 24px 14px 64px;
    }

    .song-reader-topbar {
        padding: 12px;
    }

    .song-reader {
        padding: 24px 18px 32px;
    }

    .song-tools {
        gap: 7px;
    }

    .song-tools button,
    .song-tool-link {
        min-height: 32px;
        padding: 5px 9px;
    }

    .song-reader-header h1 {
        font-size: 25px;
    }

    .song-lyrics {
        font-size: 24px;
        line-height: 1.0;
    }

    .lyrics-slider-modal {
        padding: 12px;
    }

    .lyrics-slider-stage {
        min-height: calc(100vh - 24px);
    }

    .lyrics-slide {
        padding: 28px;
        font-size: clamp(28px, 8vw, 44px);
    }

    .song-tools {
        justify-content: flex-start;
    }

    .song-letter-heading span {
        font-size: 25px;
    }
}