/**
 * =============================================================================
 * MOBILE-ONLY STYLES (max-width: 767px) — DO NOT AFFECT DESKTOP
 * =============================================================================
 *
 * HOW DESKTOP IS PROTECTED:
 * -------------------------
 * 1. This file is NOT in the HTML. It is INJECTED by script in index.html only
 *    when: window.matchMedia('(max-width: 767px)').matches
 * 2. When viewport is 768px or wider, the script REMOVES the link. This file
 *    is not in the DOM on desktop — zero cascade impact.
 * 3. All rules below are inside @media (max-width: 767px) as a second safeguard.
 *
 * DESKTOP FILES (DO NOT EDIT FOR MOBILE BEHAVIOUR):
 * -------------------------------------------------
 * - css/style.css         Base desktop styles
 * - css/style-02.css      Desktop layout, components
 * - css/res-02.css        Desktop breakpoints (768px+)
 * - css/responsive.css    Multi-breakpoint (incl. 768px+)
 * - css/desktop-focus-areas-static.css
 * - css/typography.css, bootstrap, slick, swiper
 *
 * RULES FOR FUTURE MOBILE-ONLY CHANGES:
 * --------------------------------------
 * - Add/change styles ONLY in this file (css/mobile.css).
 * - Keep ALL rules inside the single @media (max-width: 767px) { } block.
 * - Do NOT add a <link> to this file in index.html (script injects it).
 * - Do NOT modify style.css, res-02.css, responsive.css, style-02.css for
 *   mobile — that would change desktop. Use this file only.
 *
 * Breakpoint: mobile = 320px–767.99px | desktop = 768px+
 * =============================================================================
 */

@media (max-width: 768px) {

    /* ---- Hide "Together" in hero CTA on mobile only (desktop unchanged) ---- */
    .hide-on-mobile {
        display: none !important;
    }

    /* ---- Base (mobile only) ---- */
    html.js-mobile-view .container {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /*
     * Desktop keeps header fixed by: header { position: fixed; top: 0; right: 0; left: 0; width: 100%; z-index: 99; }
     * On mobile, if the inner header is fixed it can be tied to a scroll/transform context. So we fix the
     * wrapper #site-header (direct child of body) instead — it never scrolls. Inner header is static, content unchanged.
     */
    html,
    body {
        transform: none !important;
        -webkit-transform: none !important;
        filter: none !important;
        will-change: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: 100% !important;
    }

    /* FIXED BAR: #site-header is direct child of body — same as desktop "header fixed" but on the wrapper so it never scrolls */
    body {
        padding-top: 44px !important;
    }

    #site-header {
        transform: none !important;
        -webkit-transform: none !important;
        filter: none !important;
        will-change: auto !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Inner header: static so it's just content inside the fixed #site-header. Same look, logos/layout unchanged. */
    body #site-header header,
    #site-header header,
    header {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 9999 !important;
        background-color: rgb(29 27 26) !important;
        overflow: visible !important;
        display: block !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        transform: none !important;
        -webkit-transform: none !important;
        filter: none !important;
        will-change: auto !important;
        box-sizing: border-box !important;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
    }

    header .navbar,
    header .navbar.container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-height: 28px !important;
        height: auto !important;
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    header .navbar .navbar-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
        min-height: 40px !important;
    }

    header .navbar-brand {
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }

    header .navbar-brand .d-logo {
        display: none !important;
    }

    header .navbar-brand .m-logo,
    header .navbar-brand img.m-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 30px !important;
        width: auto !important;
        height: auto !important;
    }

    header .navbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }

    /* Keep hamburger from making the header too tall (mobile only) */
    header .navbar-toggler,
    header .navbar-expand-lg .navbar-toggler,
    .navbar-expand-lg .navbar-toggler {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    header .hero-apc {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    header .hero-apc a {
        display: block !important;
        visibility: visible !important;
    }

    header .hero-apc .apc-logo,
    header .hero-apc img.apc-logo,
    header .navbar-right .hero-apc img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 24px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* ===== About page mobile only: use desktop hero image + shift content to bottom (like 2nd reference) ===== */
    .about-banner.homepage {
        margin-top: 0 !important;
        background-image: url(../images/about-image.png) !important;
        background-size: cover !important;
        background-position: 75% center !important;
        background-repeat: no-repeat !important;
    }
    .about-banner.homepage .hero-banner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding-bottom: 48px !important;
    }
    .about-banner.homepage .hero-layout {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 0 0 0 0 !important;
        margin-top: 0 !important;
    }
    .about-banner.homepage .hero-title {
        margin-top: calc(23vh + 48px) !important;
        margin-bottom: 12px !important;
    }
    .about-banner.homepage .hero-title h1,
    .about-banner.homepage .hero-title p {
        text-align: left !important;
    }
    /* 2nd photo style: main title = sans-serif, light weight, italic on mobile */
    .about-banner.homepage .hero-title h1 {
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        font-style: italic !important;
        font-size: 28px !important;
        line-height: 1.25 !important;
    }
    .about-banner.homepage .hero-title h1 .pd_italic {
        font-style: italic !important;
        font-weight: 400 !important;
        font-family: 'DM Sans', sans-serif !important;
    }
    /* Tagline: smaller, lighter, italic */
    .about-banner.homepage .hero-title p {
        font-size: 15px !important;
        font-weight: 400 !important;
        font-style: italic !important;
        line-height: 1.4 !important;
        opacity: 0.95 !important;
    }
    .about-banner.homepage .connect-btn {
        margin-top: -48px !important;
    }
    /* Shorten the "Let's Connect" oval button on about page mobile */
    .about-banner.homepage .main-btn-inner.button_green .main-btn {
        min-width: 0 !important;
        padding-left: 14px !important;
        padding-right: 4px !important;
        gap: 4px !important;
    }

    /* About page vertical scroll: about_2.png — person left, shifted down a bit (mobile only) */
    .verticle-scroll-slider img[src*="about_2.png"] {
        object-position: 70% 0% !important;
    }

    /* About page vertical scroll: about_3.png — shift right horizontally (mobile only) */
    .verticle-scroll-slider img[src*="about_3.png"] {
        object-position: 0% 100% !important;
    }

    /* About page vertical scroll: about_4.png — shift image down so heads at top are visible (mobile only) */
    .verticle-scroll-slider img[src*="about_4.png"] {
        object-fit: cover !important;
        object-position: 40% 0% !important;
        transform: translateY(6%) !important;
    }

    /* About page: "Towards Our Vision" — larger green (active) curved text when it turns green (mobile only) */
    .semicircle-marquee .circle-text tspan.active {
        font-size: 60px !important;
    }

    /* About page: reduce white gap below "Towards Our Vision" semicircle (mobile only) */
    .semicircle-marquee {
        height: 200px !important;
        min-height: 160px !important;
    }

    /* ---- Homepage hero: slightly shorter to reduce gap so next section starts higher (mobile only) ---- */
    .homepage.sm_h_banner {
        min-height: calc(100vh - 44px - 72px) !important;
        max-height: calc(100vh - 44px - 72px) !important;
        height: calc(100vh - 44px - 72px) !important;
        display: flex;
        flex-direction: column;
        background-image: url(../images/hero-banner.png) !important;
        background-color: transparent !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: 74% 20% !important;
    }

    /* No dark overlay on mobile hero — overlay removed so no darkness from top to neck */
    .homepage.sm_h_banner::before {
        background: transparent !important;
        height: 100% !important;
        z-index: 0 !important;
    }

    .homepage.sm_h_banner > .container {
        position: relative;
        z-index: 1;
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .homepage.sm_h_banner .hero-banner {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 1;
        min-height: 0;
        padding: 0 0 40px 0;
        align-items: flex-start;
    }

    /* Content in lower half: compact spacing, more words per line (wider area) */
    .homepage .hero-layout {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-top: auto !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .homepage .hero-title {
        text-align: left !important;
        width: 100% !important;
        max-width: 92% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Hero text: same white as desktop; push block down so it starts below chin (over chest only) */
    .homepage.sm_h_banner .hero-title {
        opacity: 1;
        margin-top: 18vh !important;
    }
    .homepage.sm_h_banner .hero-title,
    .homepage.sm_h_banner .hero-title * {
        color: #ffffff !important;
        opacity: 1;
        text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.7), 0 0 24px rgba(0,0,0,0.35);
    }

    /* Figma: headline 32px, line-height 40px — bright white + strong shadow for readability on dark areas */
    .homepage.sm_h_banner .hero-title h1 {
        font-size: 36px !important;
        line-height: 1.5 !important;
        color: #ffffff !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.95), 0 1px 5px rgba(0,0,0,0.75), 0 0 28px rgba(0,0,0,0.4);
    }

    .homepage.sm_h_banner .hero-title h1 .line {
        font-style: normal;
        font-weight: 400;
        font-family: 'DM Sans', 'DM Sans Regular', sans-serif;
        color: #ffffff !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.95), 0 1px 5px rgba(0,0,0,0.75), 0 0 28px rgba(0,0,0,0.4);
    }

    .homepage.sm_h_banner .hero-title h1 .pd_italic {
        font-style: italic;
        font-weight: 400;
        font-family: 'Playfair Display', 'Playfair Display Italic', serif;
        color: #ffffff !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.95), 0 1px 5px rgba(0,0,0,0.75), 0 0 28px rgba(0,0,0,0.4);
    }

    .homepage.sm_h_banner .hero-title p {
        font-size: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.35);
    }

    .homepage.sm_h_banner .hero-title p + p {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        color: #ffffff !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.35);
    }

    /* ---- Contact page mobile only: restore hero (style.css sets .contactpage background:none at max-width 991px) ---- */
    /* Use ::before for image so we can shift it with transform (background-position had no effect) */
    body.page-contact .contactpage.sm_h_banner,
    body.page-contact .contactpage {
        background: #110F0E !important;
        min-height: calc(100vh - 44px - 72px) !important;
        height: calc(100vh - 44px - 72px) !important;
        max-height: calc(100vh - 44px - 72px) !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        overflow: hidden !important;
    }
    body.page-contact .contactpage::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        background-image: url(../images/contact-hero.png) !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: 76% center !important;
    }
    body.page-contact .contactpage > .container {
        position: relative !important;
        z-index: 1 !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.page-contact .contactpage .hero-banner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        flex: 1 !important;
        min-height: 0 !important;
        padding: 0 0 48px 0 !important;
        align-items: flex-start !important;
    }
    body.page-contact .contactpage .hero-layout {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        margin-top: auto !important;
        padding-top: 42vh !important;
        width: 100% !important;
        gap: 12px !important;
    }
    body.page-contact .contactpage .hero-title {
        text-align: left !important;
        width: 100% !important;
        max-width: 85% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        color: #ffffff !important;
    }
    body.page-contact .contactpage .hero-title,
    body.page-contact .contactpage .hero-title * {
        color: #ffffff !important;
        opacity: 1 !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.7), 0 0 24px rgba(0,0,0,0.35);
    }
    body.page-contact .contactpage .hero-title h1 {
        font-size: 33px !important;
        line-height: 1.25 !important;
        color: #ffffff !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.95), 0 1px 5px rgba(0,0,0,0.75), 0 0 28px rgba(0,0,0,0.4);
    }
    body.page-contact .contactpage .hero-title h1 > span > span:first-child {
        white-space: nowrap !important;
    }
    body.page-contact .contactpage .hero-title h1 .d-block {
        margin-top: 2px !important;
    }
    /* Contact form section: reduce top space and bottom gap so form sits higher and closer to footer */
    body.page-contact #appication-form-wrapper.appication-form-wrapper.sec-space {
        margin-top: 32px !important;
        padding-top: 0 !important;
        padding-bottom: 40px !important;
    }
    /* Contact form: larger textarea and full-width submit button on mobile */
    body.page-contact #application-form textarea.form-control {
        min-height: 140px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.page-contact #application-form .main-btn-inner {
        width: 100% !important;
        max-width: 100% !important;
    }
    body.page-contact #application-form .main-btn-inner .main-btn {
        width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    body.page-contact #application-form .main-btn-inner .main-btn .btn-text {
        font-size: 1.1rem !important;
        text-align: center !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    body.page-contact #application-form .main-btn-inner .arrw-btn {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.page-contact .contactpage .hero-title p {
        font-size: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 6px !important;
        color: #ffffff !important;
        line-height: 1.35 !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.35);
    }

    /* Figma: button row — flex, gap 29.77px, button then APC logo (no overlap) */
    .homepage .connect-btn {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 30px;
        margin-top: 0;
    }

    .homepage .main-btn-inner.button_green {
        width: fit-content;
        max-width: 100%;
    }

    /* Figma: button — extra spacing so arrow does not overlap (mobile only) */
    .homepage .main-btn-inner.button_green .main-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: auto !important;
        min-width: 180px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 2px 0 20px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 999px !important;
        text-align: left !important;
        overflow: visible !important;
    }

    .homepage .main-btn-inner.button_green .main-btn .btn-text {
        color: #008751 !important;
        font-weight: 400;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .homepage .main-btn-inner.button_green .arrw-btn {
        position: static !important;
        right: auto !important;
        transform: none !important;
        z-index: auto !important;
        flex-shrink: 0 !important;
        width: 37px !important;
        height: 37px !important;
        min-width: 37px !important;
        min-height: 37px !important;
        margin-left: 6px !important;
        margin-right: 2px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        border-radius: 50% !important;
        background: #008751 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .homepage .main-btn-inner.button_green .icon-Vector-Strokearrow::before {
        color: #fff !important;
    }

    /* Single centered white arrow in green circle (hide duplicate; override desktop absolute positioning) */
    .homepage .main-btn-inner.button_green .arrw-btn .arrws-inner {
        position: static !important;
        right: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
    }
    .homepage .main-btn-inner.button_green .arrw-btn .arrw-icon.one {
        position: static !important;
        left: auto !important;
        transform: none !important;
    }
    .homepage .main-btn-inner.button_green .arrw-btn .arrw-icon.two {
        display: none !important;
    }

    /* All green arrow circles on homepage: same spacing (mobile only) */
    .homepage .main-btn .arrw-btn {
        margin-right: 2px !important;
    }

    .homepage .hero-banner {
        position: relative;
    }

    .homepage .connect-btn .hero-apc {
        position: static;
        margin: 0;
        padding: 4px;
        border-radius: 6px;
        background: rgba(17, 15, 14, 0.4);
    }

    .homepage .connect-btn .hero-apc .apc-logo {
        opacity: 1;
        height: 30px;
        width: 30px;
        display: block;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
    }

    /* ---- No black block below CTA: hide empty mobile-view-img so hero background shows ---- */
    .homepage.sm_h_banner .hero-banner .mobile-view-img,
    .homepage.sm_h_banner .mobile-view-img {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ========== Manifesto mobile hero: match 2nd photo (portrait, text, compact button) ========== */
    .mission-main .homepage.mission .hero-banner .mobile-view-img,
    .mission-main .homepage.mission .mobile-view-img {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .mission-main .homepage.sm-margin.mission {
        margin-top: 0 !important;
    }
    /* Photo: same as desktop (mission-bg.png), shifted left towards text so it's visible */
    .mission-main .homepage.mission {
        min-height: 0 !important;
        background-color: transparent !important;
        background-image: url(../images/mission-bg.png) !important;
        background-size: cover !important;
        background-position: 78% 12% !important;
        background-repeat: no-repeat !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding-bottom: 48px !important;
    }
    .mission-main .homepage.mission .hero-banner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding: 0 !important;
        min-height: 100vh !important;
        height: 100vh !important;
    }
    /* margin-top: auto pushes this block to the bottom of the flex banner (do not use margin-top: 0) */
    .mission-main .homepage.mission .hero-layout {
        margin-top: auto !important;
        padding-top: 0 !important;
        padding-bottom: 4px !important;
        transform: translateY(24px) !important;
        width: 100% !important;
        max-width: 92% !important;
    }
    /* Text: 2-line headline, Ekiti's sans, Irawo Owuro / Leading the Way in italic serif */
    .mission-main .homepage.mission .hero-title br {
        display: none !important;
    }
    .mission-main .homepage.mission .hero-title {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
        max-width: 92% !important;
    }
    .mission-main .homepage.mission .hero-title h1,
    .mission-main .homepage.mission .hero-title h1 * {
        color: #ffffff !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.4) !important;
    }
    .mission-main .homepage.mission .hero-title h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }
    .mission-main .homepage.mission .hero-title h1 .pd_italic {
        font-family: 'Playfair Display', 'Playfair Display Italic', serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
        font-size: 1.05em !important;
    }
    .mission-main .homepage.mission .hero-title p {
        font-size: 15px !important;
        line-height: 1.4 !important;
        color: #ffffff !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        text-shadow: 0 0 1px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.6) !important;
    }
    /* Button: compact rounded white with green border (not full-width slab) */
    .mission-main .homepage.mission .connect-btn {
        margin-top: 16px !important;
    }
    .mission-main .homepage.mission .main-btn-inner.button_green {
        width: fit-content !important;
        max-width: 100% !important;
    }
    .mission-main .homepage.mission .main-btn-inner.button_green .main-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 0px 10px 18px !important;
        height: 44px !important;
        min-height: 44px !important;
        background-color: #ffffff !important;
        border: 2px solid #008751 !important;
        border-radius: 50px !important;
    }
    .mission-main .homepage.mission .main-btn-inner.button_green .main-btn .btn-text {
        color: #008751 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }
    .mission-main .homepage.mission .main-btn-inner.button_green .arrw-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        background-color: #008751 !important;
        border: none !important;
        border-radius: 50% !important;
    }

    /* ---- No bottom arrows in mobile view (hero down-arrow) ---- */
    .homepage .down-arrow,
    .homepage .down-arrow.h-circular,
    .homepage .down-arrow.sm-d-none-marquee,
    .homepage .hero-banner .down-arrow,
    .homepage .circular-box-main,
    .homepage .inner-down-arrow,
    .homepage .h-circular,
    .homepage a.inner-down-arrow {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* ---- Remove left/right arrows and pagination at bottom (initiative slider) ---- */
    .key-initiative-wrapper .initiative-slider-nav,
    .key-initiative-wrapper .swiper-button-prev,
    .key-initiative-wrapper .swiper-button-next,
    .key-initiative-wrapper .initiative-slider-nav .arrow-circle,
    .key-initiative-wrapper .swiper-pagination,
    .key-initiative-wrapper .initiative-pagination,
    .key-initiative-wrapper .arrow-circle,
    .key-initiative-wrapper .swiper-button-prev.arrow-circle,
    .key-initiative-wrapper .swiper-button-next.arrow-circle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* ---- Hide custom cursor on mobile ---- */
    .cursor,
    .custom_cursor {
        display: none !important;
    }

    /* ---- Vision CTA sections only: move button after paragraph (Get To Know Me + Apply To Join), mobile only ---- */
    /* Align title, paragraph, and button to the same left edge (paragraph as reference) */
    section.vision-wrapper.sec-space .container .row:has(> .col-md-6:first-child) {
        display: flex !important;
        flex-direction: column !important;
        padding-left: calc(1rem + (var(--bs-gutter-x, 1.5rem) * 0.5)) !important; /* single left offset for all three */
    }
    section.vision-wrapper.sec-space .container .row:has(> .col-md-6:first-child) .col-md-6:first-child {
        display: contents !important;
    }
    section.vision-wrapper.sec-space .container .row:has(> .col-md-6:first-child) .main-title {
        order: 0 !important;
        padding-left: 0 !important;
    }
    section.vision-wrapper.sec-space .container .row:has(> .col-md-6:first-child) .col-md-6:last-child {
        order: 1 !important;
        padding-left: 0 !important; /* paragraph column: no extra padding so text aligns with title/button */
    }
    section.vision-wrapper.sec-space .container .row:has(> .col-md-6:first-child) .main-btn-inner {
        order: 2 !important;
        padding-left: 0 !important;
    }
    /* Slightly reduce gap between heading, paragraph and button in Vision section */
    section.vision-wrapper.sec-space .main-title {
        margin-bottom: 18px !important;
    }
    section.vision-wrapper.sec-space .vision-desc {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 4px !important;
    }
    section.vision-wrapper.sec-space .main-btn-inner {
        margin-top: 24px !important;
    }

    /* My Mission: same alignment as My Vision — same row/column treatment; do NOT set margin-left:0 so row keeps Bootstrap negative margin and aligns with Vision */
    body.page-manifesto section.mission-wrapper .container .row {
        display: flex !important;
        flex-direction: column !important;
        padding-left: calc(1rem + (var(--bs-gutter-x, 1.5rem) * 0.5)) !important;
    }
    body.page-manifesto section.mission-wrapper .container .row .col-md-6:first-child {
        display: contents !important;
    }
    body.page-manifesto section.mission-wrapper .container .row .main-title {
        order: 0 !important;
        padding-left: 0 !important;
    }
    body.page-manifesto section.mission-wrapper .container .row .col-md-6:last-child {
        order: 1 !important;
        padding-left: 0 !important;
    }
    body.page-manifesto section.mission-wrapper .main-title {
        margin-bottom: 6px !important; /* tight gap between heading and paragraph to match My Vision */
    }
    body.page-manifesto section.mission-wrapper .vision-desc {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Manifesto mobile: reduce gap between My Vision and My Mission sections */
    body.page-manifesto section.vision-wrapper.dark-bg-color.sec-space.p-sec-top + section.mission-wrapper.p-sec-top {
        padding-top: 20px !important;
    }
    /* Manifesto mobile: reduce space between My Mission and "Ekiti North deserves purposeful representation" */
    body.page-manifesto section.mission-wrapper + section.title-mask-wrapper.p-sec-top {
        padding-top: 24px !important;
    }

    /* "Backed by APC, Driven by Purpose" / "Rooted in Service" section: shift content more left on mobile */
    section.vision-wrapper.purpose.sec-space .container {
        padding-left: 0.75rem !important;
    }

    /* ---- Reduce vertical space around black marquee bar (purpose paragraph above, My Focus Areas below) ---- */
    .marquee-led-driven.sec-space {
        margin-top: 24px !important;
    }
    .key-initiative-wrapper.sec-space {
        margin-top: 24px !important;
        margin-bottom: -8px !important;
        padding-bottom: 0 !important;
    }

    /* ---- Align Focus Areas section with JAMB section (same left edge), mobile only ---- */
    .key-initiative-wrapper .container .row [class*="col-"] {
        padding-left: calc(1rem + (var(--bs-gutter-x, 1.5rem) * 0.5)) !important;
    }
    .key-initiative-wrapper .initiative-main.sm .iniitative-slider {
        margin-left: calc(1rem + (var(--bs-gutter-x, 1.5rem) * 0.5)) !important;
        overflow: visible !important;
    }
    .key-initiative-wrapper .initiative-main.sm .swiper-wrapper {
        overflow: visible !important;
    }

    /* ---- Reduce gap between Focus Areas (Youth Empowerment etc.) and JAMB section on mobile ---- */
    .key-initiative-wrapper .container {
        padding-bottom: 0 !important;
        overflow: visible !important;
    }
    .key-initiative-wrapper .initiative-main.sm,
    .key-initiative-wrapper .initiative-main.sm .swiper,
    .key-initiative-wrapper .initiative-main.sm .iniitative-slider,
    .key-initiative-wrapper .initiative-main.sm .swiper-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .key-initiative-wrapper .in-key,
    .key-initiative-wrapper .in-key-content,
    .key-initiative-wrapper .swiper-slide {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    #Vision {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
    }
    /* Manifesto mobile only: Key Pillars heading left-aligned (section is not inside .mission-main) */
    body.page-manifesto section.features-verticle-slider.p-sec-top .center-heading.j-mi-title.text-center,
    body.page-manifesto section.features-verticle-slider.p-sec-top .center-heading.j-mi-title.text-center .main-title {
        text-align: left !important;
    }
    body.page-manifesto .mission-main section.features-verticle-slider.p-sec-top .container .center-heading.j-mi-title.text-center,
    body.page-manifesto .mission-main section.features-verticle-slider.p-sec-top .center-heading.j-mi-title.text-center,
    body.page-manifesto .mission-main section.features-verticle-slider.p-sec-top .center-heading.j-mi-title.text-center .main-title {
        text-align: left !important;
    }
    /* Manifesto mobile only: reduce top padding above "Key Pillars of the Manifesto" */
    body.page-manifesto section.features-verticle-slider.p-sec-top {
        padding-top: 24px !important;
    }
    /* Manifesto mobile only: reduce gap between "Key Pillars..." and first pillar title "Youth Empowerment..." */
    body.page-manifesto .features-verticle-slider .features-verticle-inner > .feature-item:first-child {
        padding-top: 20px !important;
    }
    /* Manifesto mobile only: "Leadership Values That Guide Me" - reduce top/bottom gap and centre title */
    body.page-manifesto section.principles-marquee-wrapper.dark-bg-color.p-sec-top {
        padding-top: 28px !important;
    }
    body.page-manifesto section.principles-marquee-wrapper.dark-bg-color.p-sec-bottom {
        padding-bottom: 24px !important;
    }
    body.page-manifesto section.principles-marquee-wrapper .center-heading.j-mi-title.text-center,
    body.page-manifesto section.principles-marquee-wrapper .center-heading.j-mi-title.text-center .main-title {
        text-align: center !important;
    }
    body.page-manifesto section.principles-marquee-wrapper .container .center-heading {
        text-align: center !important;
    }
    body.page-manifesto section.principles-marquee-wrapper .center-heading .main-title {
        font-size: 22px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Leadership Values title: centre via ID (beats any other selector) */
    #manifesto-leadership-values .container,
    #manifesto-leadership-values .center-heading,
    #manifesto-leadership-values .center-heading .main-title,
    #manifesto-leadership-values .center-heading .main-title i,
    #manifesto-leadership-values .center-heading .main-title .pd_italic {
        text-align: center !important;
    }
    #manifesto-leadership-values .center-heading .main-title {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    section.vision-wrapper.sec-space {
        margin-top: 4px !important;
        padding-top: 15px !important;
    }
    /* First Vision section ("As your Voice..."): add padding from top so content shifts down */
    #Vision + section.vision-wrapper.sec-space {
        padding-top: 36px !important;
        margin-top: 8px !important;
    }
    /* JAMB section ("Supporting JAMB Preparation Across Ekiti"): reduce gap above title (index mobile only) */
    .key-initiative-wrapper ~ #Vision + section.vision-wrapper.sec-space {
        margin-top: -8px !important;
        padding-top: 12px !important;
    }

    /* Reduce gap between "Get To Know Me" section and video (mobile only) */
    .video-wrapper.sec-space {
        margin-top: 20px !important;
        padding-top: 0 !important;
    }

    /* ===== Join section (Impact in Action + FAQ + Echoes + Insights) — HOMEPAGE mobile only ===== */
    #join_section_index {
        display: block !important;
        overflow: visible !important;
        padding-bottom: 16px !important;
        background-color: #110F0E !important;
        box-shadow: 0 40px 0 0 #110F0E !important;
    }
    #join_section_index .faqs-wrapper,
    #join_section_index .voice-wrapper,
    #join_section_index .updates-feed {
        display: block !important;
        order: unset;
    }
    #join_section_index .faqs-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 8px !important;
    }
    #join_section_index .faqs-wrapper .center-heading {
        padding-left: 1rem !important;
    }
    #join_section_index .faqs-wrapper + .voice-wrapper {
        margin-top: 0 !important;
        padding-top: 8px !important;
    }
    #join_section_index .updates-feed {
        background-color: #fff !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    #join_section_index .updates-feed .container {
        padding-left: calc(1rem + (var(--bs-gutter-x, 1.5rem) * 0.5)) !important;
    }
    #join_section_index .updates-feed .tab-content.sec-space {
        margin-top: 20px !important;
        padding-left: 0.75rem !important;
    }
    #join_section_index .updates-feed .swiper.UpdateFeeds,
    #join_section_index .updates-feed .swiper.onSlider {
        max-width: 100% !important;
        overflow: hidden !important;
        margin-left: 0 !important;
    }
    #join_section_index .updates-feed .swiper-wrapper {
        max-width: 100% !important;
    }
    #join_section_index .updates-feed .swiper-slide {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #join_section_index .updates-feed .update-feed-card {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #join_section_index .updates-feed .event_card_img,
    #join_section_index .updates-feed .event_card_img img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    #join_section_index .updates-feed .card_title.feed_disc,
    #join_section_index .updates-feed .linebar,
    #join_section_index .updates-feed .linebar p {
        max-width: 100% !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
    }
    #join_section_index .updates-feed .overlay_date_time.feed_name {
        background-color: rgba(240, 240, 240, 0.98) !important;
        border-color: #2B2B2B !important;
    }
    #join_section_index .updates-feed .overlay_date_time.feed_name .feed-text {
        color: #2B2B2B !important;
    }
    #join_section_index .updates-feed .update-feed-card:hover .overlay_date_time.feed_name .feed-text {
        color: #fff !important;
    }
    #join_section_index .voice-wrapper.capture-mm {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: auto !important;
        overflow: visible !important;
        padding: 0 16px 24px !important;
        margin-top: -16px !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    #join_section_index .voice-wrapper.capture-mm::before {
        display: none !important;
    }
    #join_section_index .voice-wrapper.capture-mm .center-heading {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 8px 12px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        text-align: center !important;
    }
    #join_section_index .voice-wrapper.capture-mm .center-heading .main-title {
        display: block !important;
        visibility: visible !important;
        font-size: 24px !important;
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 1) !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    #join_section_index .voice-wrapper.capture-mm .center-heading .main-title .pd_italic {
        color: #008751 !important;
        font-size: 24px !important;
        font-family: 'Playfair Display', serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
    }
    #join_section_index .voice-wrapper.capture-mm .center-heading .dot-animated .pulse_dot {
        width: 4.47px;
        height: 4.47px;
        background: #008751 !important;
        border-radius: 9999px;
        box-shadow: none;
    }
    #join_section_index .voice-wrapper.capture-mm .center-heading .vision-desc {
        display: block !important;
        visibility: visible !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 1) !important;
        width: 100% !important;
        max-width: 100%;
        padding-top: 10px !important;
        margin: 0 auto !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }
    #join_section_index .voice-wrapper.capture-mm .initiative-main.voices-inner.mobile {
        display: none !important;
    }
    #join_section_index .voice-wrapper.capture-mm .initiative-main.voices-inner.desktop {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        visibility: visible !important;
        overflow: visible !important;
        margin-top: 20px !important;
        margin-bottom: 28px !important;
        position: relative !important;
        z-index: 1 !important;
        border-radius: 8px !important;
    }
    #join_section_index .voice-wrapper.capture-mm .initiative-main.desktop .capture-images {
        display: contents !important;
    }
    #join_section_index .voice-wrapper.capture-mm .initiative-main.desktop .capture-img {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        line-height: 0 !important;
        order: unset !important;
        min-height: 0 !important;
        aspect-ratio: 1 !important;
        border-radius: 6px !important;
    }
    #join_section_index .voice-wrapper.capture-mm .initiative-main.desktop .capture-img.fifteen {
        grid-column: 1 / -1 !important;
        aspect-ratio: 16 / 9 !important;
    }
    #join_section_index .voice-wrapper.capture-mm .initiative-main.desktop .capture-img img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

    /* ===== Manifesto mobile only: "Already in Action" section ===== */
    /* Hide left-right arrows on mobile (320–767px); desktop keeps them. #manifesto-desktop-arrows is outside .mission-main so target by ID when on manifesto (body.page-manifesto) */
    body.page-manifesto #manifesto-desktop-arrows,
    .mission-main #manifesto-desktop-arrows,
    .mission-main section.updates-feed.work-feed .events_btn.main-btn-inner,
    .mission-main section.updates-feed.work-feed .events_btn .slider-arrow,
    .mission-main section.updates-feed.work-feed .slider-arrow,
    .mission-main section.updates-feed.work-feed .slider-arrow .swiper-button-prev.s2.arrow-circle,
    .mission-main section.updates-feed.work-feed .slider-arrow .swiper-button-next.s2.arrow-circle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    /* Manifesto mobile: let Swiper control slide width via slidesPerView so all 4 cards are scrollable */
    .mission-main .workFeeds.onSlider .swiper-slide,
    .mission-main .swiper.workFeeds .swiper-slide {
        box-sizing: border-box !important;
    }
    /* Manifesto mobile: force second-card peek (same as style.css; ensures peek on AWS if load order/cache differs) */
    .mission-main .work-feed #manifesto-workFeeds .swiper-slide {
        flex-shrink: 0 !important;
        width: calc((100% - 12px) / 1.2) !important;
    }
    @media (min-width: 576px) {
        .mission-main .work-feed #manifesto-workFeeds .swiper-slide {
            width: calc((100% - 16px) / 1.5) !important;
        }
    }
    /* Remove space before "Leadership is proven by action, not intention." */
    .mission-main section.updates-feed.work-feed .main_heading p.vision-desc {
        margin-bottom: 0 !important;
    }
    .mission-main section.updates-feed.work-feed .main_heading p.vision-desc + p.vision-desc {
        margin-top: 0 !important;
    }
    /* "Already in Action" section: minimal gap above title (manifesto mobile) */
    body.page-manifesto .mission-main .marquee-led-driven.sec-space:has(+ .already-in-action-section) {
        margin-bottom: 4px !important;
    }
    body.page-manifesto .mission-main section.already-in-action-section {
        margin-top: 4px !important;
        padding-top: 0 !important;
    }
    .mission-main .marquee-led-driven.sec-space:has(+ .already-in-action-section) {
        margin-bottom: 8px !important;
    }
    .mission-main section.already-in-action-section {
        margin-top: 8px !important;
        padding-top: 0 !important;
    }
    .mission-main section.already-in-action-section .main_heading .main-title {
        margin-bottom: 10px !important;
    }
    .mission-main section.already-in-action-section .main_heading .vision-desc {
        margin-top: 0 !important;
    }
    /* Manifesto mobile: paragraph break after "...community development." (overrides Bootstrap .mt-0) */
    .mission-main section.already-in-action-section .main_heading p.vision-desc.manifesto-paragraph-break,
    .mission-main section.already-in-action-section .main_heading p.vision-desc + p.vision-desc {
        margin-top: 1em !important;
    }
    /* "A Call to People of Ekiti" section: reduce top and bottom white space (mobile only; overrides .sec-space / .m-sec-bottom) */
    .mission-main section.updates-feed.work-feed.sec-space.m-sec-bottom:has(+ #join_section) {
        margin-top: 20px !important;
        margin-bottom: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Manifesto mobile: reduced gap above "A Call to People of Ekiti" */
    body.page-manifesto .mission-main section.call-to-people-section {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Override: "Already in Action" section must have minimal top margin (manifesto mobile) */
    body.page-manifesto .mission-main section.updates-feed.work-feed.sec-space.m-sec-bottom.already-in-action-section {
        margin-top: 4px !important;
        padding-top: 0 !important;
    }
    .mission-main section.updates-feed.work-feed.sec-space.m-sec-bottom.already-in-action-section {
        margin-top: 8px !important;
        padding-top: 0 !important;
    }

    /* ===== Same "Your Questions, Answered" + everything after — for ABOUT and MANIFESTO mobile (#join_section) ===== */
    /* Manifesto: ensure wrapper doesn't clip join section / Impact in Action */
    .mission-main:has(#join_section) {
        overflow: visible !important;
        min-height: 0 !important;
    }
    #join_section {
        display: block !important;
        overflow: visible !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 16px !important;
        background-color: #110F0E !important;
        box-shadow: 0 40px 0 0 #110F0E !important;
    }
    #join_section .faqs-wrapper,
    #join_section .voice-wrapper,
    #join_section .updates-feed {
        display: block !important;
        order: unset;
    }
    #join_section .faqs-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 8px !important;
    }
    #join_section .faqs-wrapper .center-heading {
        padding-left: 1rem !important;
    }
    #join_section .faqs-wrapper + .voice-wrapper {
        margin-top: 0 !important;
        padding-top: 8px !important;
    }
    #join_section .updates-feed {
        background-color: #fff !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    #join_section .updates-feed .container {
        padding-left: calc(1rem + (var(--bs-gutter-x, 1.5rem) * 0.5)) !important;
    }
    #join_section .updates-feed .tab-content.sec-space {
        margin-top: 20px !important;
        padding-left: 0.75rem !important;
    }
    #join_section .updates-feed .swiper.UpdateFeeds,
    #join_section .updates-feed .swiper.onSlider {
        max-width: 100% !important;
        overflow: hidden !important;
        margin-left: 0 !important;
    }
    #join_section .updates-feed .swiper-wrapper {
        max-width: 100% !important;
    }
    #join_section .updates-feed .swiper-slide {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #join_section .updates-feed .update-feed-card {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #join_section .updates-feed .event_card_img,
    #join_section .updates-feed .event_card_img img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    #join_section .updates-feed .card_title.feed_disc,
    #join_section .updates-feed .linebar,
    #join_section .updates-feed .linebar p {
        max-width: 100% !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: hidden !important;
    }
    #join_section .updates-feed .overlay_date_time.feed_name {
        background-color: rgba(240, 240, 240, 0.98) !important;
        border-color: #2B2B2B !important;
    }
    #join_section .updates-feed .overlay_date_time.feed_name .feed-text {
        color: #2B2B2B !important;
    }
    #join_section .updates-feed .update-feed-card:hover .overlay_date_time.feed_name .feed-text {
        color: #fff !important;
    }
    #join_section .voice-wrapper.capture-mm {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: auto !important;
        overflow: visible !important;
        padding: 0 16px 32px !important;
        margin-top: 24px !important;
        margin-bottom: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    #join_section .voice-wrapper.capture-mm::before {
        display: none !important;
    }
    #join_section .voice-wrapper.capture-mm .center-heading {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 16px 8px 24px 12px !important;
        padding-top: 16px !important;
        padding-bottom: 24px !important;
        margin-top: 0 !important;
        text-align: center !important;
        overflow: visible !important;
    }
    #join_section .voice-wrapper.capture-mm .center-heading .main-title {
        display: block !important;
        visibility: visible !important;
        font-size: 24px !important;
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 1) !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 auto !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    #join_section .voice-wrapper.capture-mm .center-heading .main-title .pd_italic {
        color: #008751 !important;
        font-size: 24px !important;
        font-family: 'Playfair Display', serif !important;
        font-style: italic !important;
        font-weight: 400 !important;
    }
    #join_section .voice-wrapper.capture-mm .center-heading .dot-animated .pulse_dot {
        width: 4.47px;
        height: 4.47px;
        background: #008751 !important;
        border-radius: 9999px;
        box-shadow: none;
    }
    #join_section .voice-wrapper.capture-mm .center-heading .vision-desc {
        display: block !important;
        visibility: visible !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        font-family: 'DM Sans', sans-serif !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 1) !important;
        width: 100% !important;
        max-width: 100%;
        padding-top: 10px !important;
        padding-bottom: 20px !important;
        margin: 0 auto !important;
        margin-bottom: 0 !important;
        text-align: center !important;
        overflow: visible !important;
    }
    #join_section .voice-wrapper.capture-mm .initiative-main.voices-inner.desktop {
        overflow: visible !important;
    }
    #join_section .voice-wrapper.capture-mm .initiative-main.voices-inner.mobile {
        display: none !important;
    }
    #join_section .voice-wrapper.capture-mm .initiative-main.voices-inner.desktop {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        visibility: visible !important;
        overflow: visible !important;
        margin-top: 20px !important;
        margin-bottom: 28px !important;
        position: relative !important;
        z-index: 1 !important;
        border-radius: 8px !important;
    }
    /* Manifesto mobile only: reduce gap between "Impact in Action" text and photos */
    body.page-manifesto #join_section .voice-wrapper.capture-mm .center-heading {
        padding-bottom: 12px !important;
    }
    body.page-manifesto #join_section .voice-wrapper.capture-mm .center-heading .vision-desc {
        padding-bottom: 10px !important;
    }
    body.page-manifesto #join_section .voice-wrapper.capture-mm .initiative-main.voices-inner.desktop {
        margin-top: 10px !important;
        margin-bottom: 12px !important;
    }
    /* Manifesto mobile only: reduce gap between last photo and "Get Latest Updates" */
    body.page-manifesto #join_section .voice-wrapper.capture-mm {
        padding-bottom: 20px !important;
    }
    body.page-manifesto #footer {
        margin-top: -36px !important;
    }
    /* Manifesto mobile only: reduce gap between "Get Latest Updates" and "About Me" links */
    body.page-manifesto footer .f-links {
        margin-top: 28px !important;
    }
    /* Manifesto mobile only: slightly smaller title "A Call to People of Ekiti" */
    body.page-manifesto section.call-to-people-section .main_heading .main-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    /* Manifesto mobile only: reduce gap between title and paragraph (override .mb-0 and .vision-desc margin-top) */
    body.page-manifesto section.call-to-people-section .main_heading .main-title.mb-0 {
        margin-bottom: 10px !important;
    }
    body.page-manifesto section.call-to-people-section .main_heading .vision-desc {
        margin-top: 6px !important;
    }
    body.page-manifesto section.call-to-people-section .main_heading .vision-desc:first-of-type {
        margin-top: 6px !important;
    }
    /* When stacked on mobile: reduce space between title column and paragraph column */
    body.page-manifesto section.call-to-people-section .row .col-lg-6 + .col-lg-6 .main_heading {
        margin-top: 0 !important;
        padding-top: 4px !important;
    }
    /* Manifesto mobile only: minimal gap above "A Call to People of Ekiti" title */
    body.page-manifesto section.call-to-people-section .main_heading {
        padding-top: 4px !important;
    }
    #join_section .voice-wrapper.capture-mm .initiative-main.desktop .capture-images {
        display: contents !important;
    }
    #join_section .voice-wrapper.capture-mm .initiative-main.desktop .capture-img {
        display: block !important;
        visibility: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        line-height: 0 !important;
        order: unset !important;
        min-height: 0 !important;
        aspect-ratio: 1 !important;
        border-radius: 6px !important;
    }
    #join_section .voice-wrapper.capture-mm .initiative-main.desktop .capture-img.fifteen {
        grid-column: 1 / -1 !important;
        aspect-ratio: 16 / 9 !important;
    }
    #join_section .voice-wrapper.capture-mm .initiative-main.desktop .capture-img img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
    }

    /* ===== Footer — Get Latest Updates, then photo, then Dare4More at end behind photo (mobile only) ===== */
    #footer {
        margin-top: -24px !important;
        padding-top: 0 !important;
        padding-bottom: 12px !important;
        position: relative !important;
        overflow: visible !important;
        border-top: none !important;
    }
    footer .footer-main,
    footer .footer-main.overflow-hidden {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        padding-top: 0 !important;
        padding-bottom: 8px !important;
        position: relative !important;
        border-top: none !important;
    }
    /* Container first (Get Latest Updates, photo, copyright with line); don't shrink so bottom content stays visible */
    footer .footer-main .container {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        z-index: 2 !important;
        order: 0 !important;
        margin-top: -24px !important;
        padding-top: 0 !important;
        flex-shrink: 0 !important;
        min-height: 0 !important;
    }
    footer .footer-main .container .row {
        display: contents !important;
    }
    footer .footer-main .container .col-lg-8 {
        order: 0 !important;
    }
    footer .footer-main .container .f-right {
        order: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 0px !important;
        text-align: center !important;
        position: relative !important;
        z-index: 2 !important;
    }
    footer .footer-main .container .f-copyright {
        order: 2 !important;
        margin-top: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    }
    /* Dare4More pulled up to sit behind the photo; reserve space so bottom content stays visible */
    footer .footer-main .marquee-block {
        order: 1 !important;
        position: relative !important;
        z-index: 0 !important;
        margin-top: -280px !important;
        padding-bottom: calc(280px + 4px) !important;
        border-top: none !important;
    }
    footer .f-right img {
        max-width: 220px !important;
        max-height: 280px !important;
        width: auto !important;
        height: auto !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Smaller marquee text on mobile */
    footer .marquee-block .marquee-inner .marquee-text .m-item.m-title {
        font-size: 22px !important;
    }
    /* Smaller white dots in marquee ("For Ekiti" / "For Nigeria" bar) on mobile */
    .marquee-led-driven .marquee-block .marquee-inner .marquee-text .m-item.m-dot span,
    footer .marquee-block .marquee-inner .marquee-text .m-item.m-dot span {
        width: 10px !important;
        height: 10px !important;
    }
    footer .footer-left {
        display: flex !important;
        flex-direction: column !important;
        order: unset;
    }
    footer .subscription-box h5,
    footer .f-links li a,
    footer .f-link {
        color: rgba(255, 255, 255, 1) !important;
    }
    /* Footer links: 2-column grid so 5 items lay out as 3 left, 2 right (alternating left/right) — mobile only */
    footer .f-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px 24px !important;
        margin: 24px 0 20px !important;
    }
    footer .f-links li {
        margin: 0 !important;
    }
    footer .subscription-box h5 {
        margin-bottom: 6px !important;
    }
    /* Footer: icons + number row — less gap so number sits left of center; number shifted up slightly and with right margin */
    footer .f-socialncontact {
        gap: 24px !important;
    }
    /* Footer phone number: smaller font on mobile, single line, nudge up and leave space on right */
    footer .f-contact {
        font-size: 13px !important;
        white-space: nowrap !important;
        transform: translateY(-3px) !important;
        margin-right: 16px !important;
    }
    footer .subscribe-form {
        width: 100% !important;
        margin-top: 6px !important;
    }

    /* Center the arrow inside the green subscribe button (mobile only) */
    footer .subscribe-btn .arrws-inner {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    footer .subscribe-btn .arrw-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Very narrow screens (e.g. 320px): keep text off the face — slightly narrower + smaller font + start below chin */
@media (max-width: 400px) {
    .homepage.sm_h_banner .hero-title {
        max-width: 78% !important;
        margin-top: 22vh !important;
    }
    .homepage.sm_h_banner .hero-title h1 {
        font-size: 24px !important;
        line-height: 1.5 !important;
    }
    .homepage.sm_h_banner .hero-title p,
    .homepage.sm_h_banner .hero-title p + p {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
}