@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Phudu:wght@400..900&display=swap');

/* Force exact fonts globally */
h1, h2, h3, h4, h5, h6, .hero-title {
    font-family: 'Phudu', sans-serif !important;
}

body, p, span, a, button, input {
    font-family: 'Instrument Sans', sans-serif !important;
}

:root {
    /* Colors — per 07_Design_System_and_UI_Guidelines */
    --color-gold: #C6A15B;            /* Warm Gold — highlights, accents */
    --color-gold-deep: #9b804e;       /* Deep antique variant of gold, for text-on-light use */
    --color-ivory: #FFFFFF;           /* Ivory — backgrounds */
    --color-ivory-soft: #FFFFFF;
    --color-forest: #294B38;      /* Warm White — lightest surface */
    --color-stone: #e7e2d6;           /* Stone — secondary surface / borders */
    --color-navy: #1F2F4D;            /* Deep Navy — headings, navigation, buttons (Primary) */
    --color-navy-muted: #2a3652;      /* lighter navy for hover/secondary surfaces */
    --color-charcoal: #2b2b2b;        /* Charcoal Gray — body text */
    --color-brown: #5A1F28;           /* Soft Brown — quotes, dividers (Accent) */

    /* Legacy aliases kept for existing component CSS */
    --color-divine-gold: var(--color-gold);
    --color-warm-parchment: var(--color-ivory);
    --color-vatican-black: var(--color-navy);
    --color-antique-gold: var(--color-gold-deep);
    --color-soft-ivory: var(--color-ivory-soft);

    /* Semantic Themes */
    --bg-primary: var(--color-ivory);
    --text-primary: var(--color-navy);
    --text-body: var(--color-charcoal);
    --text-muted: #6b6b6b;

    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Spectral', serif;

    /* Spacing (8px system) */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-24: 96px;
    --spacing-32: 128px;
    --section-padding: clamp(64px, 10vw, 160px);

    /* Grid & Layout */
    --container-max: 1440px;
    --container-padding: clamp(24px, 5vw, 64px);

    /* UI Tokens */
    --shadow-level-1: 0 4px 20px rgba(26,26,26,0.05);
    --blur-glass: blur(12px);
    --trans-fast: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Base Resets */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg-primary);
    color: var(--text-body);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.2;
    color: var(--text-primary);
    text-transform: none;
}

p, .body-text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Accessibility */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border-width: 0;
}
.skip-link {
    position: absolute; top: -40px; left: 0;
    background: var(--color-vatican-black); color: var(--color-soft-ivory);
    padding: var(--spacing-2) var(--spacing-4); z-index: 999;
    transition: top var(--trans-fast);
}
.skip-link:focus { top: 0; }

/* Theme Utilities */
.theme--dark {
    --bg-primary: var(--color-navy);
    --text-primary: var(--color-ivory-soft);
    --text-body: rgba(250, 249, 246, 0.85);
    --text-muted: #a9afc0;
    background-color: var(--bg-primary);
    color: var(--text-body);
}
.theme--dark h1, .theme--dark h2, .theme--dark h3,
.theme--dark h4, .theme--dark h5, .theme--dark h6 {
    color: var(--text-primary);
}

/* Focus states — visible keyboard focus everywhere (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

/* Media Fill — real photography dropped into any media slot, fills the container consistently */
.media-fill { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder Media — tasteful stand-in for photography not yet supplied by client.
   Real photography must follow 08_Photography_and_Art_Direction_Guide specs (see data-spec attr). */
.placeholder-media {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 15% 10%, rgba(197, 169, 99, 0.16), transparent 60%),
        linear-gradient(155deg, var(--color-stone) 0%, var(--color-ivory) 55%, var(--color-stone) 100%);
}
.placeholder-media::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    opacity: 0.06;
    mix-blend-mode: multiply;
}
.placeholder-media::after {
    content: attr(data-label);
    position: absolute; left: 50%; bottom: 6%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-gold-deep);
    opacity: 0.55;
    white-space: nowrap;
    pointer-events: none;
}
.placeholder-media__mark {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 34%; max-width: 96px;
    opacity: 0.28;
}
.theme--dark .placeholder-media {
    background:
        radial-gradient(120% 140% at 15% 10%, rgba(197, 169, 99, 0.10), transparent 60%),
        linear-gradient(155deg, #1c2740 0%, var(--color-navy) 55%, #1c2740 100%);
}
.theme--dark .placeholder-media::after { color: var(--color-gold); opacity: 0.45; }
.theme--dark .placeholder-media__mark { opacity: 0.18; filter: brightness(3); }


/* ===== PREVENT HORIZONTAL SCROLLBAR GLOBALLY ===== */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

header, section, main, footer, .container {
    max-width: 100% !important;
}

.header > div,
section > div {
    box-sizing: border-box !important;
}


/* ULTIMATE HORIZONTAL SCROLL DESTROYER */
html, body, main, header, footer, section, div, nav, article {
    box-sizing: border-box !important;
}

html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
}

header {
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ===== ELIMINATE HORIZONTAL SCREEN FLOATING / SWIPING ===== */
html, body {
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

#site-wrapper {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}


/* ===== ABSOLUTE ZERO HORIZONTAL SCROLLBAR GUARANTEE ===== */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

#site-wrapper, main, section, header, footer {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ===== SINGLE CLEAN VERTICAL SCROLLBAR (NO DOUBLE SCROLLBAR) ===== */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    height: auto !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

#site-wrapper, main {
    overflow: hidden !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}


/* ===== MASTER 100% WIDTH NO SCROLLBAR RESET ===== */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#site-wrapper, main, section, header, footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}


/* ===== UNIVERSAL CREAM WHITE BUTTON HOVER FILL ANIMATION ===== */
.btn-fill-animation, 
.btn-fill-outline, 
.header-cta-btn, 
a.btn-chocolate, 
a.btn-outline-dark, 
button, 
.button {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease !important;
}

.btn-fill-animation {
    background-color: #4A2A18 !important;
    color: #ffffff !important;
    border: 1px solid #4A2A18 !important;
}

.btn-fill-outline {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(4px) !important;
}

/* Ensure inner text and icons stay above the expanding cream fill */
.btn-fill-animation > *, 
.btn-fill-outline > *, 
.header-cta-btn > *, 
a.btn-chocolate > *, 
button > * {
    position: relative !important;
    z-index: 3 !important;
    transition: color 0.4s ease !important;
}

/* Expanding Cream White Circle Pseudo-Element */
.btn-fill-animation::before,
.btn-fill-outline::before,
.header-cta-btn::before,
a.btn-chocolate::before,
a.btn-outline-dark::before,
button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 350% !important;
    height: 350% !important;
    background-color: #FFFFFF !important; /* Cream White */
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hover State - Scale Cream Circle to 100% and flip text to dark chocolate brown */
.btn-fill-animation:hover::before,
.btn-fill-outline:hover::before,
.header-cta-btn:hover::before,
a.btn-chocolate:hover::before,
a.btn-outline-dark:hover::before,
button:hover::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

.btn-fill-animation:hover,
.btn-fill-outline:hover,
.header-cta-btn:hover,
a.btn-chocolate:hover,
a.btn-outline-dark:hover,
button:hover {
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
}

.btn-fill-animation:hover *,
.btn-fill-outline:hover *,
.header-cta-btn:hover *,
a.btn-chocolate:hover *,
button:hover * {
    color: #4A2A18 !important;
}


/* ===== PERMANENT KILL FOR HORIZONTAL SCROLLBAR ===== */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

header, section, main, div, footer, nav {
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ===== MASTER BUTTON UI & RESPONSIVE LAYOUT SYSTEM ===== */
.btn-fill-animation:hover {
    background-color: #FFFFFF !important;
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.btn-fill-animation:hover * {
    color: #4A2A18 !important;
}

.btn-fill-outline:hover {
    background-color: #FFFFFF !important;
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.btn-fill-outline:hover * {
    color: #4A2A18 !important;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none !important;
    }
    .hero-buttons-row {
        flex-direction: column !important;
        width: 100% !important;
    }
    .btn-fill-animation, .btn-fill-outline {
        width: 100% !important;
        justify-content: center !important;
    }
}


/* ===== ABOUT US PHOTO GLANCING / SHINE SWEEP HOVER ANIMATION ===== */
.about-img-container {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}

.about-img-container img {
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.about-img-container:hover img {
    transform: scale(1.03) !important; /* Subtle inner zoom, zero lifting */
}

/* Diagonal Light Sheen Glare Sweep */
.about-img-container::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -130% !important;
    width: 70% !important;
    height: 200% !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: rotate(25deg) !important;
    transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 8 !important;
}

.about-img-container:hover::after {
    left: 150% !important;
}

/* Small Inset Video Card Shine */
.about-video-card {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.4s ease !important;
}

.about-video-card:hover {
    transform: scale(1.02) !important;
}


/* ===== COMPREHENSIVE MOBILE & TABLET RESPONSIVE SYSTEM ===== */
.mobile-nav-drawer.active {
    right: 0 !important;
}

@media (max-width: 991px) {
    .desktop-nav {
        display: none !important;
    }
    .mobile-toggle {
        display: inline-flex !important;
    }
    .header-cta-btn {
        display: none !important;
    }
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        padding-top: 2rem !important;
    }
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
}

@media (max-width: 576px) {
    section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
    .hero-buttons-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.85rem !important;
    }
    .btn-fill-animation, .btn-fill-outline {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .marquee-text {
        font-size: 2.5rem !important;
    }
}


/* ===== MASTER CREAM WHITE EXPANDING HOVER FILL ANIMATION ===== */
.btn-fill-animation, 
.btn-fill-outline, 
.header-cta-btn, 
a.btn-chocolate, 
a.btn-outline-dark, 
button {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: color 0.4s ease, border-color 0.4s ease, transform 0.3s ease !important;
    cursor: pointer !important;
}

.btn-fill-animation, a.btn-chocolate, .header-cta-btn {
    background-color: #4A2A18 !important;
    color: #ffffff !important;
    border: 1px solid #4A2A18 !important;
}

.btn-fill-outline, a.btn-outline-dark {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(4px) !important;
}

/* Ensure text and icons sit on top layer z-index 3 */
.btn-fill-animation > *, 
.btn-fill-outline > *, 
.header-cta-btn > *, 
a.btn-chocolate > *, 
button > * {
    position: relative !important;
    z-index: 3 !important;
    transition: color 0.4s ease !important;
}

/* Expanding Cream White Circle */
.btn-fill-animation::before,
.btn-fill-outline::before,
.header-cta-btn::before,
a.btn-chocolate::before,
a.btn-outline-dark::before,
button::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 380% !important;
    height: 380% !important;
    background-color: #FFFFFF !important; /* Cream White Fill */
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hover Animation Trigger */
.btn-fill-animation:hover::before,
.btn-fill-outline:hover::before,
.header-cta-btn:hover::before,
a.btn-chocolate:hover::before,
a.btn-outline-dark:hover::before,
button:hover::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

.btn-fill-animation:hover,
.btn-fill-outline:hover,
.header-cta-btn:hover,
a.btn-chocolate:hover,
a.btn-outline-dark:hover,
button:hover {
    color: #4A2A18 !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.btn-fill-animation:hover *,
.btn-fill-outline:hover *,
.header-cta-btn:hover *,
a.btn-chocolate:hover *,
button:hover * {
    color: #4A2A18 !important;
}


/* ===== SCROLL-DRIVEN BIBLE PNG FLIGHT (Hero -> About watermark) ===== */
/* All animated properties (position, width, right, top, opacity, transform,
   z-index) are driven continuously from scroll position by the inline
   <script> in index.html — keep this rule free of !important so the JS
   inline styles are never fought by the cascade. */
.hero-bible-img {
    pointer-events: none;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.75));
}

@media (max-width: 768px) {
    .hero-bible-img {
        display: none !important;
    }
}


/* ===== FORCE SOLID WHITE BUTTON TEXT & ARROW ===== */
.btn-fill-animation, 
.btn-fill-outline, 
.btn-fill-animation span, 
.btn-fill-outline span {
    color: #ffffff !important;
}

.btn-fill-animation:hover, 
.btn-fill-outline:hover {
    color: #4A2A18 !important;
}

.btn-fill-animation:hover span, 
.btn-fill-outline:hover span {
    color: #4A2A18 !important;
}


/* ===== EXACT TYPOGRAPHY SYSTEM (PHUDU & INSTRUMENT SANS) ===== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Phudu:wght@400..900&display=swap');

:root {
    --font-heading: 'Phudu', sans-serif;
    --font-body: 'Instrument Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: 'Phudu', sans-serif !important;
}

body, p, span, a, button, input, textarea, .font-body {
    font-family: 'Instrument Sans', sans-serif !important;
}

/* Master Hero Heading Specs */
h1.hero-title, .hero-grid h1 {
    font-family: 'Phudu', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(2.8rem, 4.5vw, 65px) !important;
    line-height: 65px !important;
    color: #ffffff !important;
}

/* Master Hero Body Paragraph Specs */
.hero-grid p {
    font-family: 'Instrument Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #ffffff !important;
}

body {
    background-color: #FFFFFF !important;
}


/* ===== MASTER PREMIUM LUXURY BUTTON SYSTEM ===== */
.btn-fill-animation, 
.btn-fill-outline, 
.header-cta-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.9rem 2.2rem !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    font-family: 'Instrument Sans', sans-serif !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.header-cta-btn {
    padding: 0.75rem 1.4rem !important;
    font-size: 0.78rem !important;
}

/* Base Primary Button: Chocolate Brown (#4A2A18) */
.btn-fill-animation, 
.header-cta-btn {
    background-color: #4A2A18 !important;
    color: #ffffff !important;
    border: 1px solid #4A2A18 !important;
}

.btn-fill-animation *, 
.header-cta-btn * {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

/* Premium Gold Elevation Hover (#e6c888) */
.btn-fill-animation:hover, 
.header-cta-btn:hover {
    background-color: #e6c888 !important;
    border-color: #e6c888 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(74, 42, 24, 0.45) !important;
}

.btn-fill-animation:hover *, 
.header-cta-btn:hover * {
    color: #2a160b !important; /* Rich Dark Brown Text on Hover */
}

/* Base Outlined Button: Frosted Glass */
.btn-fill-outline {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px) !important;
}

.btn-fill-outline * {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}

/* Premium White Fill Hover */
.btn-fill-outline:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.35) !important;
}

.btn-fill-outline:hover * {
    color: #2a160b !important; /* Rich Dark Brown Text on Hover */
}

/* Arrow Micro-Interaction */
.btn-arrow {
    display: inline-block !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-size: 0.95rem !important;
}

.btn-fill-animation:hover .btn-arrow,
.btn-fill-outline:hover .btn-arrow,
.header-cta-btn:hover .btn-arrow {
    transform: translate(2px, -2px) !important;
}


/* ===== ANIMATED LINK UNDERLINE & GSAP UTILITIES ===== */
.desktop-nav a {
    position: relative !important;
}

.desktop-nav a::after {
    content: "" !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #e6c888 !important;
    transition: width 0.3s ease !important;
}

.desktop-nav a:hover::after {
    width: 100% !important;
}


/* ===== MASTER PREMIUM VERTICAL SLIDE-UP GOLD FILL HOVER SYSTEM ===== */
.btn-fill-animation, 
.header-cta-btn {
    position: relative !important;
    overflow: hidden !important;
    background-color: #4A2A18 !important;
    color: #ffffff !important;
    border: 1px solid #4A2A18 !important;
    border-radius: 6px !important;
    padding: 0.95rem 2.3rem !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    font-family: 'Instrument Sans', sans-serif !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
    z-index: 1 !important;
}

.btn-fill-animation::before,
.header-cta-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #e6c888 !important; /* Franciscan Gold Fill */
    transform: translateY(100%) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 2 !important;
}

.btn-fill-animation:hover::before,
.header-cta-btn:hover::before {
    transform: translateY(0) !important;
}

.btn-fill-animation span,
.header-cta-btn span {
    position: relative !important;
    z-index: 3 !important;
    color: #ffffff !important;
    transition: color 0.35s ease !important;
}

.btn-fill-animation:hover span,
.header-cta-btn:hover span {
    color: #2a160b !important; /* Dark Chocolate Text on Gold */
}

.btn-fill-animation:hover,
.header-cta-btn:hover {
    border-color: #e6c888 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(74, 42, 24, 0.4) !important;
}

/* Outlined Frosted Button */
.btn-fill-outline {
    position: relative !important;
    overflow: hidden !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 6px !important;
    padding: 0.95rem 2.3rem !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    font-family: 'Instrument Sans', sans-serif !important;
    backdrop-filter: blur(8px) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
    z-index: 1 !important;
}

.btn-fill-outline::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: #ffffff !important;
    transform: translateY(100%) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 2 !important;
}

.btn-fill-outline:hover::before {
    transform: translateY(0) !important;
}

.btn-fill-outline span {
    position: relative !important;
    z-index: 3 !important;
    color: #ffffff !important;
    transition: color 0.35s ease !important;
}

.btn-fill-outline:hover span {
    color: #2a160b !important;
}

.btn-fill-outline:hover {
    border-color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.35) !important;
}


/* ===== PERMANENTLY KILL SCROLLBARS ON HEADER AND HERO SECTIONS ===== */
html, body, #site-wrapper, main#main-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

header.header, 
.header, 
.hero-section,
.hero-section div {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure no inner vertical scrollbar on hero card */
.hero-section > div {
    overflow: hidden !important;
    height: 92vh !important;
    min-height: 560px !important;
    max-height: 820px !important;
}

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #FFFFFF;
}
::-webkit-scrollbar-thumb {
    background: #4A2A18;
    border-radius: 4px;
}


/* ===== ABSOLUTE KILL UNWANTED HERO SCROLLBAR ===== */
.hero-section, 
.hero-section *, 
.hero-section > div, 
.hero-grid {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.hero-section > div::-webkit-scrollbar,
.hero-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* ===== FIX WORD SPAN FONT INHERITANCE (PHUDU FONT PRESERVATION) ===== */
.gsap-heading-word {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* ===== FIX UNWANTED EXTRA VERTICAL SCROLL ===== */
html {
    height: 100% !important;
    overflow-y: scroll !important;
}

body {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background-color: #FFFFFF !important;
}

.hero-section {
    padding: 1.2rem 1.5rem 0 1.5rem !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
}

.hero-section > div {
    height: calc(100vh - 3rem) !important;
    max-height: calc(100vh - 3rem) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.hero-grid {
    padding: 2rem 3rem 2.2rem 3rem !important;
}

.hero-grid h1 {
    font-family: 'Phudu', sans-serif !important;
    font-weight: 600 !important;
}


/* ===== REMOVE BUTTON HOVER VERTICAL LIFT ===== */
.btn-fill-animation:hover, 
.btn-fill-outline:hover, 
.header-cta-btn:hover,
.gsap-reveal-btn:hover {
    transform: none !important;
}


/* ===== PERMANENTLY DESTROY EXTRA HERO SCROLLBAR ===== */
html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
}

.hero-section, 
.hero-section *, 
.hero-section > div,
.hero-grid {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.hero-section::-webkit-scrollbar,
.hero-section > div::-webkit-scrollbar,
.hero-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}


/* ===== REMOVE SHADOW BEHIND HERO TITLE ===== */
.hero-section h1,
.hero-section h1 *,
.gsap-heading-word {
    text-shadow: none !important;
    filter: none !important;
}


/* ===== ABSOLUTE KILL HEADER SCROLLBAR & LAYER BIBLE BEHIND COUNTER ===== */
header.header, 
header.header * {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

header.header::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.hero-bible-img {
    z-index: 5 !important;
}


/* ===== NEWS CARD TEXT LINK HOVER SYSTEM ===== */
.news-text-link:hover {
    color: #4A2A18 !important;
}

.news-text-link:hover .btn-arrow {
    transform: translate(3px, -3px) !important;
    color: #4A2A18 !important;
}


/* ===== NEWS CARD PHOTO GLANCE / LIGHT SHIMMER ANIMATION ===== */
.blog-card > div {
    position: relative !important;
    overflow: hidden !important;
}

.blog-card > div::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -130% !important;
    width: 60% !important;
    height: 200% !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: rotate(25deg) !important;
    transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.blog-card:hover > div::after {
    left: 150% !important;
}

/* Ensure Bible PNG is strictly behind counter text (z-index: 5 vs 20) */
.hero-bible-img {
    z-index: 5 !important;
}


/* ===== HERO CENTER BIBLE PNG & GENTLE FLOATING ANIMATION ===== */
.hero-bible-img {
    position: absolute !important;
    top: 48% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    width: 140px !important;
    pointer-events: none !important;
}


/* ===== CUSTOM MOUSE CURSOR COLOR: CHOCOLATE BROWN (#4A2A18) ===== */
.custom-cursor-dot {
    background-color: #4A2A18 !important;
    box-shadow: 0 0 10px rgba(74, 42, 24, 0.5) !important;
}

.custom-cursor-follower {
    border: 1.5px solid rgba(74, 42, 24, 0.5) !important;
    background-color: rgba(74, 42, 24, 0.04) !important;
}


/* ===== HERO CENTER-RIGHT BIBLE PNG (95px SIZE) ===== */
.hero-bible-img {
    position: absolute !important;
    top: 48% !important;
    right: 12% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    width: 95px !important;
    pointer-events: none !important;
}


/* ===== HERO BIBLE POSITIONED UPWARD ABOVE PARAGRAPH ===== */
.hero-bible-img {
    position: absolute !important;
    top: 28% !important;
    right: 9% !important;
    left: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: 90px !important;
    pointer-events: none !important;
}


/* ===== MINISTRY CARDS GLANCE SHIMMER ANIMATION ===== */
.ministry-card::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -130% !important;
    width: 60% !important;
    height: 200% !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: rotate(25deg) !important;
    transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.ministry-card:hover::after {
    left: 150% !important;
}

.ministry-text-link:hover {
    color: #e6c888 !important;
}

.ministry-text-link:hover span {
    transform: translate(3px, -3px) !important;
}