/* --- Global Variables & Base Styles --- */
:root {
    /* ── Brand primaries (locked) ─────────────────────────────── */
    --color-primary: #0f3c7d;            /* Deep blue */
    --color-primary-light: #2563eb;      /* Bright blue */
    --color-accent: #f97316;             /* Vibrant orange */
    --color-accent-soft: #fed7aa;        /* Soft orange highlight */

    /* ── Depth layers (replaces single bg) ────────────────────── */
    --color-bg-base: #04030d;            /* True near-black base */
    --color-bg-elevated: #0a0d1f;        /* Card / surface */
    --color-bg-warm: #0d0c14;            /* Warm-shifted dark for prayer + testimonials */
    --color-blue-deep: #0a2455;          /* Sermons section dominant */
    --color-blue-glow: rgba(37, 99, 235, 0.25);

    /* ── Sacred warmth (used sparingly, no full-section flip) ── */
    --color-cream: #FAF3E3;              /* Scripture pull-quote bg */
    --color-cream-text: #2A2519;         /* On-cream text */
    --color-gold: #D4A24B;               /* Scripture accent */
    --color-gold-soft: rgba(212, 162, 75, 0.15);

    /* ── WoW ministry warmth (feminine variant of orange family) */
    --color-rosegold: #C77A6B;
    --color-rosegold-soft: rgba(199, 122, 107, 0.12);

    /* ── Refined text (lifted contrast vs prior tokens) ───────── */
    --color-text: #f4f6fb;
    --color-text-muted: #c5cbd7;         /* Lifted from #9ca3af for AA */
    --color-text-quiet: #8b91a0;         /* Metadata only */

    /* ── Legacy aliases (kept so existing rules keep compiling) */
    --color-bg: var(--color-bg-base);
    --color-surface: var(--color-bg-elevated);

    /* ── Structure ─────────────────────────────────────────────── */
    --color-border-subtle: rgba(148, 163, 184, 0.3);
    --color-nav-inactive: rgba(255, 255, 255, 0.15);
    --dark-text-color: #1a202c;
    --white-bg-color: #F8F9FA;
    --radius-lg: 1.25rem;
    --radius-md: 0.75rem;
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.75);

    /* ── Motion language ──────────────────────────────────────── */
    --transition-fast: 0.18s ease-out;
    --transition-med: 0.28s ease-out;
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);          /* Reveals (ease-out-quart) */
    --transition-emotional: 1.6s cubic-bezier(0.16, 1, 0.3, 1);          /* Scripture, prayer (ease-out-expo) */
    --transition-soft: 0.6s cubic-bezier(0.25, 1, 0.5, 1);               /* Soft ease-out, no bounce */

    --nav-height: 110px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    height: 100%;
    /* Ensure html takes full height */
    overflow-x: clip;
    /* Guard against horizontal scroll from scroll-reveal translate offsets and
       decorative bleed on mobile. `clip` (not hidden) avoids creating a scroll
       container, so position:sticky elements keep working. */
}

body {
    margin: 0;
    font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #14182b 0, #06080f 45%, var(--color-bg-base) 100%);
    background-attachment: fixed;
    /* Keep background fixed during scroll */
    color: var(--color-text);
    line-height: 1.6;
    height: 100%;
    /* Ensure body takes full height */
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

h1,
h2,
h3,
h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

p {
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Header & Navigation --- */
.site-header {
    background-color: rgba(255, 255, 255, 0.15);
    /* Translucent white background */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 0.7rem 0;
    /* Adjust padding for a ~60px height with 40px logo */
    /* Padding change on scroll is intentionally instant (no transition)
       to avoid layout-property thrash. Only background-color transitions. */
    transition: background-color var(--transition-fast);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.15);
    /* Maintain translucency when scrolled */
    backdrop-filter: blur(10px);
    padding: 0.25rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}



.logo img {
    height: auto;
    max-height: 60px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}



.main-nav {
    display: flex;
    align-items: center;
    /* Removed margin-left as justify-content handles spacing */
}

.nav-list {
    display: flex;
    gap: 0.8rem;
    /* Drastically decreased gap for single row */
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    flex-grow: 1;
    flex-wrap: nowrap;
    /* Prevent wrapping */
}

.nav-item {
    list-style: none;
    padding: 0.2rem 0.5rem;
    /* Minimal padding */
    border-radius: var(--radius-md);
    /* Keep a subtle radius for active state consistency */
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
    color: var(--dark-text-color);
    /* Dark text for inactive items */
    background-color: transparent;
    /* Remove background for inactive items */
    display: block;
    font-weight: 600;
    white-space: nowrap;
    /* Prevent text wrapping within nav items */
    font-size: 1rem;
    /* Reverted to standard font size */
    text-transform: uppercase;
    /* All caps */
}

.nav-item {
    position: relative;
}

.nav-item::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -2px;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-med);
    border-radius: 1px;
}

.nav-item:hover {
    color: var(--dark-text-color);
    background-color: transparent;
}

.nav-item:hover::after {
    transform: scaleX(1);
}

.nav-item.active {
    color: var(--dark-text-color);
    background-color: transparent;
    box-shadow: none;
}

.nav-item.active::after {
    transform: scaleX(1);
}

.nav-item:focus-visible {
    outline: 2px solid var(--color-accent-soft);
    outline-offset: 2px;
}

.nav-burger {
    display: none;
    cursor: pointer;
    padding: 10px;
    background: none;
    border: none;
    color: var(--dark-text-color);
    /* Dark color for burger icon */
    font-size: 1.8rem;
    /* Slightly larger for better visibility */
}

.nav-burger.active .bar:nth-child(2) {
    opacity: 0;
}

.nav-burger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-burger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Hero Section --- */
.hero {
    position: relative;
    padding: 10rem 0 5rem 0;
    /* Adjust padding as needed */
    color: var(--color-text);
    min-height: 100vh;
    /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Default for mobile, will be overridden for desktop */
}

.hero-with-bg {
    background: url('Assets/praise bg.jpg') no-repeat center center / cover;
    /* Use praise bg.jpg */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(5, 8, 22, 0.6), rgba(5, 8, 22, 0.9));
    z-index: 1;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    /* Desktop: side-by-side */
    align-items: center;
    justify-content: flex-start;
    /* Move content to the left */
    gap: 3rem;
    max-width: 1400px;
    /* Increase max-width for better two-column layout and larger video */
    padding: 0 2rem;
}

.hero-left-content {
    flex: 1;
    /* Allow text to take available space */
    text-align: left;
    /* Align text to the left */
    max-width: 700px;
    /* Allow more space for text */
}

.hero-title {
    font-size: clamp(3.2rem, 5.2vw, 5rem);
    /* Dominant brand name */
    margin-bottom: 0.65rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
    /* Impeccable floor: never tighter than -0.04em */
    line-height: 1.05;
    text-wrap: balance;
    color: var(--color-text);
}

.hero-tagline {
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    /* Bigger than original 1.6rem; still clearly subordinate to H1 */
    font-weight: 600;
    color: var(--color-accent-soft);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.hero-subtext {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    max-width: 56ch;
    margin-bottom: 2.25rem;
}

.hero-video-wrapper {
    flex: 2;
    /* Allow video to take more space */
    position: relative;
    width: 100%;
    max-width: 850px;
    /* Drastically increased max-width */
    aspect-ratio: 16/9;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hero-video-wrapper.video-placeholder {
    background-color: #333;
    /* Dark background for placeholder */
    background-size: cover;
    background-position: center;
}

.play-icon {
    color: white;
    font-size: 3rem;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.play-icon:hover {
    background-color: rgba(249, 115, 22, 0.8);
    /* Orange on hover */
    transform: scale(1.1);
}

.play-icon svg {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

.hero-video-wrapper:hover {
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.6), var(--shadow-soft);
    transform: translateY(-2px);
}

.hero-video {
    /* Targeting the actual video element */
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Full video overlays the preroll loop and crossfades in once ready */
.hero-video-full {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    pointer-events: none;
}
.hero-video-full.is-ready {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hero-video-full { transition: none; }
}
/* Video Volume Toggle Button */
.video-volume-toggle {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
    padding: 0;
}
.video-volume-toggle:hover {
    background-color: rgba(249, 115, 22, 0.9);
    border-color: var(--color-accent);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.5);
}
.video-volume-toggle:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
.video-volume-toggle:active {
    transform: scale(0.95);
}
.volume-icon {
    width: 24px;
    height: 24px;
    color: white;
    transition: opacity var(--transition-fast);
}
/* Muted state styling */
.video-volume-toggle.muted {
    background-color: rgba(220, 38, 38, 0.7);
    border-color: rgba(220, 38, 38, 0.5);
}
.video-volume-toggle.muted:hover {
    background-color: rgba(220, 38, 38, 0.9);
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .video-volume-toggle {
        width: 40px;
        height: 40px;
        bottom: 1rem;
        right: 1rem;
    }
    
    .volume-icon {
        width: 20px;
        height: 20px;
    }
}

.btn-row {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Button system ──────────────────────────────────────────────
   Three real tiers. Primary fills, secondary outlines, tertiary
   is text + arrow. Orange is now an emphasis tool, not wallpaper.
   ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
    border: 1.5px solid transparent;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition:
        background-color var(--transition-med),
        color var(--transition-med),
        border-color var(--transition-med),
        transform var(--transition-fast);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

/* PRIMARY — solid orange. The action the page wants taken. */
.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background-color: #ea670a;
    border-color: #ea670a;
    transform: translateY(-1px);
    color: #fff;
}

/* SECONDARY — outlined. Supporting action. Fills on hover. */
.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-accent);
}

.btn-secondary:hover {
    background-color: var(--color-accent);
    color: #fff;
    transform: translateY(-1px);
}

/* TERTIARY — text + arrow, no fill. For low-emphasis actions. */
.btn-tertiary {
    background-color: transparent;
    color: var(--color-accent);
    border-color: transparent;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.btn-tertiary:hover {
    color: var(--color-accent-soft);
    background-color: transparent;
}

/* Large variant — used by the Prayer CTA */
.btn-lg {
    padding: 1rem 2.25rem;
    font-size: 1rem;
}

.btn.disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent-soft);
    outline-offset: 3px;
}

/* --- Section Styling --- */
section {
    padding: 5rem 0;
}

.section-intro {
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    text-align: center;
    font-size: 1.1rem;
}

.content-section {
    padding: 5rem 0;
}

.bg-light {
    background-color: var(--color-surface);
}

/* Sections with white background boxes */
#get-involved-wrapper,
#new-here-wrapper,
#give-wrapper {
    /* New wrapper classes for these sections */
    max-width: 85%;
    /* 80-85% width */
    margin: 3rem auto;
    /* Center the box */
    background-color: #ffffff;
    /* White background */
    padding: 3rem;
    border-radius: var(--radius-lg);
    /* Rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

#get-involved-wrapper h2,
#new-here-wrapper h2,
#give-wrapper h2,
#get-involved-wrapper p,
#new-here-wrapper p,
#give-wrapper p {
    color: var(--dark-text-color);
    /* Dark text for sections within white boxes */
}

/* Adjusting #new-here-content-wrapper for the new wrapper */
#new-here .new-here-content-wrapper {
    background-color: transparent;
    /* Remove inner white background */
    padding: 0;
    /* Remove inner padding */
    box-shadow: none;
    /* Remove inner shadow */
    max-width: none;
}

/* Old white-box rule removed — new-here section is now dark-themed.
   Heading color is controlled by .new-here-heading (orange). */

#new-here .info-block,
#new-here .plan-visit-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    padding: 2rem;
    border-radius: var(--radius-md);
    height: 100%;
}

/* Text within info-block and plan-visit-card should be white */
#new-here .info-block h3,
#new-here .info-block p,
#new-here .info-block p strong,
#new-here .info-block li,
#new-here .plan-visit-card .btn {
    color: var(--color-text);
}

/* New Here grid layout - to make boxes side-by-side */
.new-here-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

#new-here .plan-visit-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center items vertically */
    align-items: center;
    padding: 2rem;
    /* Consistent padding */
}

#new-here .plan-visit-card .btn-row {
    flex-direction: column;
    width: 100%;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    /* Center buttons horizontally */
}

#new-here .plan-visit-card .btn {
    width: auto;
    /* Allow buttons to size to content */
    max-width: 250px;
}


/* About Section - Values Grid */
.about-links {
    text-align: center;
    /* Center the buttons */
    margin-bottom: 3rem;
    display: flex;
    /* Allow buttons to be side-by-side */
    justify-content: center;
    /* Center the button row */
    flex-wrap: wrap;
    /* wrap to next line on narrow screens instead of overflowing */
    gap: 1.5rem;
    /* Space between buttons */
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-top: 3rem;
}

.value-card {
    background-color: var(--color-bg-elevated);
    padding: 2.25rem 2rem;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition:
        border-color var(--transition-med),
        transform var(--transition-med),
        background-color var(--transition-med);
}

.value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(249, 115, 22, 0.4);
    background-color: rgba(249, 115, 22, 0.03);
}

/* Icon: no box, no circle — just the SVG itself with color and size */
.value-card .value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background-color: rgba(249, 115, 22, 0.1);
    margin-bottom: 1.5rem;
    transition: background-color var(--transition-med);
}

.value-card:hover .value-icon {
    background-color: rgba(249, 115, 22, 0.18);
}

.value-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin-bottom: 0.85rem;
}

.value-card p {
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

#involved .involvement-card h4,
#involved .involvement-card p,
#involved .involvement-card .btn {
    color: var(--color-text);
    /* White text for dark blue cards */
}

/* Featured Messages (YouTube) Section */
#featured-messages .featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Three columns for desktop */
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

#featured-messages .featured-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#featured-messages .featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

#featured-messages .featured-card iframe {
    display: block;
    width: 100%;
    height: 200px;
    /* Fixed height for video consistency */
}

#featured-messages .featured-caption {
    padding: 1rem;
    color: var(--color-text);
    font-weight: 600;
}

/* Sermons & Media Section */
#sermons-media .featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Three columns for desktop */
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

#sermons-media .featured-grid article.featured-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

#sermons-media .featured-grid article.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.sermon-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    /* Allow buttons to wrap on smaller screens */
}

/* ------------- Enhanced Carousel Styles ------------- */
/* Container & viewport */
.gallery-carousel {
    position: relative;
    margin-top: 3rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.carousel-viewport {
    position: relative;
    width: 100%;
    max-width: 980px;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    outline: none;
    /* focus style applied to children */
    box-shadow: var(--shadow-soft);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12));
}

/* The track holds slides but we position slides absolutely for smooth peek effect */
.carousel-track {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Individual slides */
.carousel-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68%;
    /* center image width (desktop) */
    height: 84%;
    /* inner image height */
    transform: translate(-50%, -50%) scale(.86);
    transition: transform var(--transition-smooth), opacity var(--transition-smooth), box-shadow var(--transition-fast);
    opacity: 0;
    z-index: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
}

/* Image inside slide */
.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}

/* Center slide (visible, prominent) */
.carousel-slide.slide-center {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 30;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

/* Left / Right preview slides peek from the edges */
.carousel-slide.slide-left {
    transform: translate(calc(-50% - 38%), -50%) scale(0.86);
    opacity: 0.72;
    z-index: 20;
    filter: saturate(0.95) contrast(0.96);
}

.carousel-slide.slide-right {
    transform: translate(calc(-50% + 38%), -50%) scale(0.86);
    opacity: 0.72;
    z-index: 20;
    filter: saturate(0.95) contrast(0.96);
}

/* Hidden (non-adjacent) slides */
.carousel-slide.slide-hidden {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
    z-index: 5;
    pointer-events: none;
}

/* Caption */
.carousel-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.9rem;
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-text);
    font-weight: 600;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: var(--color-text);
    border: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    z-index: 60;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.carousel-arrow:hover,
.carousel-arrow:focus {
    transform: translateY(-50%) scale(1.03);
    background: var(--color-primary-light);
}

.carousel-arrow-left {
    left: 10px;
}

.carousel-arrow-right {
    right: 10px;
}

/* Dots */
.carousel-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 70;
}

.carousel-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.carousel-dot.active {
    background: var(--color-accent);
    transform: scale(1.2);
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.18);
}

/* Focus outlines for accessibility */
.carousel-viewport:focus {
    outline: 3px solid rgba(249, 115, 22, 0.14);
    outline-offset: 6px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .gallery-carousel {
        height: 460px;
    }

    .carousel-slide {
        width: 78%;
    }

    .carousel-slide.slide-left {
        transform: translate(calc(-50% - 30%), -50%) scale(0.86);
    }

    .carousel-slide.slide-right {
        transform: translate(calc(-50% + 30%), -50%) scale(0.86);
    }
}

@media (max-width: 768px) {
    .gallery-carousel {
        height: 340px;
    }

    .carousel-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .carousel-slide {
        width: 92%;
        left: 50%;
    }

    /* only show center mostly */
    .carousel-slide.slide-left,
    .carousel-slide.slide-right {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.86);
    }

    .carousel-caption {
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem;
    }
}

/* --- Get Involved Section --- */
.involvement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.involvement-card {
    background-color: var(--color-surface);
    padding: 2rem;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1px solid var(--color-border-subtle);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.involvement-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.involvement-card--nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    cursor: pointer;
}
.involvement-card--nav h4,
.involvement-card--nav p { color: var(--color-text); }
.involvement-card-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--color-accent);
}
.involvement-card-cta {
    margin-top: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
}
.involvement-card-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 8px;
}
.involvement-card-ministry-tag {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.2rem;
}
.involvement-card-subtitle {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.1rem 0 0;
    font-style: italic;
}
.ministry-visual--women {
    background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(168,85,247,0.06));
    border: 1px solid rgba(168,85,247,0.25);
}
.ministry-visual--women svg { stroke: #a855f7; }

/* ── Women on Word Section ──────────────────────────────────────── */
.wow-section { background: var(--color-bg); }
.wow-heading-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.wow-badge {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #a855f7;
    background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
}
.wow-section .ministry-list li svg { stroke: #a855f7; }
.wow-scripture {
    margin: 1.25rem 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: var(--radius-md);
}
.wow-scripture p {
    font-style: italic;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0 0 0.25rem;
}
.wow-scripture cite {
    font-size: 0.8rem;
    color: #a855f7;
    font-style: normal;
    font-weight: 600;
}
.wow-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.wow-logo-wrap {
    width: 100%;
    aspect-ratio: 1;
    max-width: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(168,85,247,0.25);
}
.wow-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
.wow-schedule {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 280px;
}
.wow-schedule-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid rgba(168,85,247,0.2);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.9rem;
}
.wow-schedule-row svg {
    width: 15px;
    height: 15px;
    stroke: #a855f7;
    flex-shrink: 0;
}
.ministry-visual--carecell {
    background: linear-gradient(135deg, rgba(20,184,166,0.18), rgba(20,184,166,0.06));
    border: 1px solid rgba(20,184,166,0.25);
}
.ministry-visual--carecell svg { stroke: #14b8a6; }

/* ── Care Cell Section ──────────────────────────────────────────── */
.carecell-section { background: var(--color-bg); }
.carecell-accent { color: var(--color-accent); }
.carecell-inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
}
.carecell-scripture {
    margin: 1rem 0 1.25rem;
    padding: 1.25rem 1.5rem;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.22);
    border-radius: var(--radius-md);
}
.carecell-scripture p {
    font-style: italic;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 0.3rem;
}
.carecell-scripture cite {
    font-size: 0.78rem;
    color: var(--color-accent);
    font-style: normal;
    font-weight: 600;
}
.carecell-subhead {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 1.4rem 0 0.6rem;
}
.carecell-names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1rem 0 1.25rem;
}
.carecell-names span {
    background: var(--color-surface);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 999px;
    padding: 0.22rem 0.75rem;
    font-size: 0.75rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}
.carecell-names span em {
    font-style: normal;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-left: 0.25rem;
    font-size: 0.7rem;
}
.carecell-map-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(30,71,117,0.4);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.carecell-map {
    width: 100%;
    display: block;
}
@media (max-width: 1000px) {
    .carecell-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .carecell-map-wrap { max-width: 640px; margin: 0 auto; }
}

/* --- Events Section --- */
.events-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.event-item {
    background-color: var(--color-surface);
    /* Dark background for event items */
    padding: 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.event-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.event-item div {
    flex-grow: 1;
}

.event-item h4 {
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.event-item p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.event-item img {
    width: 100px;
    /* Placeholder image size */
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.event-item .event-link {
    margin-top: 1rem;
    display: inline-block;
    color: var(--color-accent);
    font-weight: 600;
}

/* --- Give Section --- */
.give-box {
    background-color: transparent;
    /* Removed inner white box, now handled by wrapper */
    padding: 0;
    /* Remove inner padding */
    box-shadow: none;
    /* Remove inner shadow */
    max-width: none;
    margin: 3rem auto 0 auto;
    text-align: center;
    /* Center content within the give box */
}

.give-box h3,
.give-box p {
    color: var(--dark-text-color);
    /* Ensure text is dark within the white box */
}

.give-box .btn {
    /* Apply new button style */
    margin-top: 1.5rem;
}

/* --- Testimonials Section --- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.testimonial-card {
    background-color: var(--color-surface);
    /* Revert to dark background */
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.testimonial-card p {
    font-style: italic;
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

.testimonial-card cite {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
}

.testimonial-card .testimonial-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem auto;
    border: 2px solid var(--color-primary-light);
}

/* --- Contact Section --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Force two columns for desktop */
    gap: 2.5rem;
    margin-top: 3rem;
}

.contact-form {
    background-color: var(--color-surface);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form .btn {
    /* Apply new button style */
    margin-top: 1rem;
}

.contact-details {
    background-color: var(--color-surface);
    /* Revert to dark background */
    padding: 2.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.map-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.contact-details p {
    color: var(--color-text-muted);
    /* Revert to light text */
    margin-bottom: 0.75rem;
}

/* --- Footer --- */
#footer {
    background-color: var(--color-bg);
    padding: 4rem 0;
    text-align: center;
    border-top: 1px solid var(--color-border-subtle);
    /* Use subtle border */
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
}

.footer-content h3 {
    color: var(--color-text);
    margin-bottom: 1rem;
}

.footer-content .tagline,
.footer-content .mission-line {
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.social-links {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.social-links a {
    color: var(--color-text-muted);
    font-size: 2rem;
    /* Larger social icons */
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.social-links a:hover {
    color: var(--color-primary-light);
    transform: translateY(-2px) scale(1.1);
}

.social-links a:focus-visible {
    outline: 2px solid var(--color-accent-soft);
    outline-offset: 2px;
}

.copyright {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}


/* --- Scroll reveal (slower, restorative) --- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
}

.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger>* {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--transition-slow),
        transform var(--transition-slow);
}

.reveal-stagger.reveal-visible>* {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.reveal-visible>*:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.reveal-visible>*:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.reveal-visible>*:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.reveal-visible>*:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.reveal-visible>*:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.reveal-visible>*:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.reveal-visible>*:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger.reveal-visible>*:nth-child(8) { transition-delay: 0.56s; }

/* Reduced motion: instant, no transform */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-stagger>*,
    .reveal-left,
    .reveal-right,
    .reveal-slow,
    .reveal-scale,
    .reveal-stagger-scale>* {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Directional reveal variants --- */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: opacity, transform;
}
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: opacity, transform;
}
.reveal-left.reveal-visible,
.reveal-right.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- Slow reveal (prayer verse — 1.6s meditative) --- */
.reveal-slow {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-emotional), transform var(--transition-emotional);
    will-change: opacity, transform;
}
.reveal-slow.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Scale stagger (cards: expect, ministry, sermons) --- */
.reveal-stagger-scale>* {
    opacity: 0;
    transform: scale(0.97) translateY(16px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: opacity, transform;
}
.reveal-stagger-scale.reveal-visible>* {
    opacity: 1;
    transform: none;
}
.reveal-stagger-scale.reveal-visible>*:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger-scale.reveal-visible>*:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger-scale.reveal-visible>*:nth-child(3) { transition-delay: 0.24s; }
.reveal-stagger-scale.reveal-visible>*:nth-child(4) { transition-delay: 0.36s; }

/* --- Ambient orb layer (fixed, behind everything) --- */
.ambient-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}
.ambient-orb-1 {
    width: 600px; height: 600px;
    background: #f97316;
    opacity: 0.05;
    top: -100px; left: -100px;
    animation: orb-drift-1 28s ease-in-out infinite;
}
.ambient-orb-2 {
    width: 500px; height: 500px;
    background: #2563eb;
    opacity: 0.04;
    top: 50%; right: -150px;
    animation: orb-drift-2 36s ease-in-out infinite;
}
.ambient-orb-3 {
    width: 450px; height: 450px;
    background: #D4A24B;
    opacity: 0.03;
    bottom: 20%; left: 30%;
    animation: orb-drift-3 44s ease-in-out infinite;
}
@keyframes orb-drift-1 {
    0%, 100% { transform: translate(0, 0); }
    33%       { transform: translate(180px, 120px); }
    66%       { transform: translate(60px, 280px); }
}
@keyframes orb-drift-2 {
    0%, 100% { transform: translate(0, 0); }
    40%       { transform: translate(-200px, 150px); }
    70%       { transform: translate(-80px, -100px); }
}
@keyframes orb-drift-3 {
    0%, 100% { transform: translate(0, 0); }
    30%       { transform: translate(120px, -180px); }
    60%       { transform: translate(-140px, 80px); }
}
@media (prefers-reduced-motion: reduce) {
    .ambient-orb { animation: none; }
}

/* --- Top reading progress bar --- */
#scroll-progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--color-accent);
    z-index: 2000;
    pointer-events: none;
    transition: width 0.05s linear;
}

/* --- Vertical section dot nav --- */
.section-dot-nav {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 500;
}
.sdot {
    position: relative;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.25s ease-out, transform 0.25s ease-out;
    cursor: pointer;
}
.sdot.sdot--active {
    background: var(--color-accent);
    transform: scale(1.5);
}
.sdot::after {
    content: attr(data-label);
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: rgba(3, 6, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.sdot:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
@media (max-width: 768px) {
    .section-dot-nav { display: none; }
}

/* --- Testimonial card settle animation --- */
.tc-entering {
    animation: tc-settle 0.5s ease-out;
}
@keyframes tc-settle {
    from { transform: scale(0.97); opacity: 0.65; }
    to   { transform: scale(1);    opacity: 1; }
}
.tc-dot--pulse {
    animation: tc-dot-pulse 0.3s ease-out;
}
@keyframes tc-dot-pulse {
    0%   { transform: scale(1.4); }
    50%  { transform: scale(1.9); }
    100% { transform: scale(1.4); }
}

/* --- Sermon thumbnail hover scale --- */
.video-thumbnail-container {
    overflow: hidden;
}
.video-cover-card .video-thumbnail-container::after {
    transition: opacity 0.4s ease-out;
}
.featured-card .video-thumbnail-container {
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease-out;
}
.featured-card:hover .video-thumbnail-container {
    transform: scale(1.04);
}

/* --- Polaroid animated hover tilt --- */
.polaroid {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* --- FAQ arrow rotation --- */
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '▼';
    flex-shrink: 0;
    font-size: 11px;
    color: var(--color-accent);
    transition: transform 0.25s ease-out;
}
.faq-item[open] summary::after {
    transform: rotate(180deg);
}

.text-center {
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .header-inner {
        padding: 0 1.5rem;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        background-color: var(--color-surface);
        /* Use a darker surface color for mobile menu background */
        position: fixed;
        left: -100%;
        top: var(--nav-height);
        width: 100%;
        height: calc(100vh - var(--nav-height));
        text-align: center;
        transition: left 0.3s ease-in-out;
        gap: 0;
        padding-top: 1rem;
        align-items: center;
    }

    .nav-list.active {
        display: flex;
        left: 0;
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    .nav-list .nav-item {
            width: auto;
            max-width: 250px;
            margin: 0.5rem auto;
            padding: 0.6rem 1.2rem;        color: var(--color-text);
        /* White text for mobile nav items */
        background-color: transparent;
        /* Transparent background for mobile items */
    }

    .nav-list .nav-item.active {
        background-color: var(--color-accent);
        color: white;
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
    }

    .nav-list .nav-item:hover {
        background-color: var(--color-accent);
        color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .nav-burger {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        /* Accent colour stays visible on both light and dark headers */
        color: var(--color-accent);
        font-size: 1.6rem;
        line-height: 1;
    }
    .nav-burger::before {
        content: "Menu";
        font-family: 'Poppins', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .nav-burger.active::before {
        content: "Close";
    }

    .hero-inner {
        flex-direction: column;
        /* Stack on mobile */
        text-align: center;
    }

    .hero-text {
        order: 2;
        text-align: center;
        /* Center text on mobile */
    }

    .hero-video-wrapper {
        order: 1;
        margin: 0 auto 2rem auto;
        max-width: 500px;
    }

    .btn-row {
        justify-content: center;
    }

    .gallery-section .carousel-viewport {
        height: 400px;
    }

    /* Adjust height for tablet */

    /* Text color adjustments for sections that revert to dark */
    #new-here h2,
    #new-here p,
    #new-here h3,
    #testimonials h2,
    #testimonials p,
    #testimonials h3,
    #contact h2,
    #contact p,
    #contact h3,
    #contact label,
    #contact .contact-details p strong {
        color: var(--color-text);
    }

    /* Specific for give box text */
    #give .give-box h3,
    #give .give-box p {
        color: var(--dark-text-color);
    }

    /* New Here content box - responsive adjustment */
    #new-here-wrapper {
        /* Adjust padding for the new wrapper */
        padding: 2rem 1.5rem;
    }

    /* Get Involved content box - responsive adjustment */
    #get-involved-wrapper {
        /* Adjust padding for the new wrapper */
        padding: 2rem 1.5rem;
    }

    .new-here-grid {
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }

    #sermons-media .featured-grid,
    #featured-messages .featured-grid,
    .featured-grid {
        grid-template-columns: 1fr;
        /* Stack featured videos on smaller screens */
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }

    .hero-tagline {
        font-size: 1.3rem;
    }

    .gallery-section .carousel-viewport {
        height: 300px;
    }

    .carousel-slide.slide-left,
    .carousel-slide.slide-right {
        opacity: 0;
        /* Hide side slides completely on smaller mobile */
        transform: translateX(0) scale(0.82);
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .carousel-arrow-left {
        left: 10px;
        right: auto;
    }

    .carousel-arrow-right {
        left: auto;
        right: 10px;
    }

    .involvement-grid {
        grid-template-columns: 1fr;
    }

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

    /* Enhanced glow */
}

.blogs-section h2 {
    margin-bottom: 2.5rem;
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns on desktop */
    gap: 2rem;
}

.blog-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.blog-img-placeholder {
    width: 100%;
    height: 200px;
    background-color: #334155;
    /* Slate-700 placeholder color */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    position: relative;
}

/* Optional: Add text to placeholder if desired, or keep blank as requested */
.blog-img-placeholder::after {
    content: "Blog Image";
    opacity: 0.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-content p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    /* Push button to bottom */
}

.blog-content .btn-sm {
    align-self: flex-start;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
}

/* Responsive Blogs */
@media (max-width: 900px) {
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blogs-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}

/* --- Leadership Grid Styles --- */
.leader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    justify-content: center;
}

.leader-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    padding-bottom: 2rem;
    border: 1px solid var(--color-border-subtle);
}

.leader-img-placeholder {
    width: 100%;
    height: 300px;
    background-color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.leader-img-placeholder::after {
    content: "Leader Photo";
    opacity: 0.3;
    font-weight: 600;
    text-transform: uppercase;
}

.leader-card h3 {
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.leader-card h4 {
    color: var(--color-accent);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leader-card p {
    padding: 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Page Header (for new pages) --- */
.page-header {
    padding: 8rem 0 4rem 0;
    background: linear-gradient(to bottom, rgba(5, 8, 22, 0.9), rgba(5, 8, 22, 0.95)), url('Assets/praise bg.jpg') no-repeat center center / cover;
    text-align: center;
    margin-bottom: 3rem;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.breadcrumb {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.breadcrumb a {
    color: var(--color-text-muted);
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

.page-content-container {
    max-width: 900px;
    /* Readable width for text content */
    margin: 0 auto;
    padding-bottom: 5rem;
}

.page-content-container h2 {
    text-align: left;
    margin-top: 2.5rem;
    color: var(--color-accent);
    font-size: 1.8rem;
}

.page-content-container p {
    text-align: left;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    color: #cbd5e1;
}

.event-item img {
    justify-content: center;
    margin-bottom: 3rem;
}

.explore-study-row .pill-btn {
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.5);
}

.blogs-section h2 {
    margin-bottom: 2.5rem;
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.blog-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.blog-img-placeholder {
    width: 100%;
    height: 200px;
    background-color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    position: relative;
}

.blog-img-placeholder::after {
    content: "Blog Image";
    opacity: 0.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.blog-content p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.blog-content .btn-sm {
    align-self: flex-start;
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blogs-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Navigation Dropdown Styles --- */
.nav-item-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-surface);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 0.5rem 0;
    z-index: 200;
    list-style: none;
    border: 1px solid var(--color-border-subtle);
}

.nav-item-dropdown:hover .dropdown-menu,
.dropdown-menu.show {
    display: block;
    animation: fadeInDrop 0.18s ease-out;
}

.dropdown-item {
    display: block;
    padding: 0.6rem 1.2rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    font-size: 0.9rem;
    white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item.active {
    color: var(--color-accent);
    background-color: rgba(249, 115, 22, 0.08);
}

@media (max-width: 992px) {
    .nav-item-dropdown {
        width: 100%;
        text-align: center;
    }

    .nav-item-dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        background-color: transparent;
        box-shadow: none;
        border: none;
        display: none;
        padding-left: 0;
    }

    .nav-item-dropdown .dropdown-menu.show {
        display: block;
    }

    .dropdown-item {
        text-align: center;
        padding: 0.5rem 1rem;
        color: var(--color-text-muted);
    }

    .dropdown-item:hover {
        background-color: transparent;
        color: var(--color-accent);
    }
}

@keyframes fadeInDrop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==========================================================================
   MERC Dynamic Connect Modal & Forms
   ========================================================================== */
.connect-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 8, 22, 0.85);
    backdrop-filter: blur(12px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 1.5rem;
}

.connect-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.connect-modal-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 580px;
    padding: 2.5rem;
    box-shadow: var(--shadow-soft), 0 0 40px rgba(249, 115, 22, 0.15);
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.connect-modal-overlay.active .connect-modal-card {
    transform: scale(1) translateY(0);
}

.connect-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.connect-modal-close:hover {
    color: var(--color-text);
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.connect-modal-title {
    font-size: 2rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.connect-modal-subtitle {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    line-height: 1.4;
}

/* Modal Form Fields styling */
.merc-form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.merc-form-group label {
    display: block;
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* ── Know Jesus Gospel Screen ─────────────────────────────────────────── */
.kj-gospel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.kj-opening {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.5;
    margin: 0;
}
.kj-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.kj-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}
.kj-section p { margin: 0; font-size: 0.925rem; line-height: 1.65; color: var(--color-text-muted); }
.kj-verse {
    margin: 0.25rem 0 0 0;
    padding: 0.6rem 1rem;
    border-left: 2px solid var(--color-accent);
    background: rgba(249,115,22,0.06);
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--color-text);
}
.kj-prayer-block {
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.2);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.kj-prayer-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--color-text);
    margin: 0;
}
.kj-closing {
    font-size: 0.95rem;
    color: var(--color-text);
    margin: 0;
    font-weight: 500;
}
.kj-cta-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.25rem;
}
/* Both buttons same size — full width, same height */
.kj-btn-prayed,
.kj-btn-questions {
    width: 100%;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-fast);
}
/* Primary: filled orange */
.kj-btn-prayed {
    background: var(--color-accent);
    color: #fff;
    border: 2px solid var(--color-accent);
}
.kj-btn-prayed:hover {
    background: var(--color-accent-dark, #e06010);
    border-color: var(--color-accent-dark, #e06010);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(249,115,22,0.35);
}
/* Secondary: outlined only */
.kj-btn-questions {
    background: transparent;
    color: var(--color-text-muted);
    border: 2px solid var(--color-border-subtle);
}
.kj-btn-questions:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(249,115,22,0.06);
}

/* Know Jesus Screen 2 — support option radio buttons */
.kj-support-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.kj-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    font-size: 0.93rem;
    color: var(--color-text);
}
.kj-option:hover { border-color: rgba(249,115,22,0.4); background: rgba(249,115,22,0.07); }
.kj-option input[type="radio"] { accent-color: var(--color-accent); width: 16px; height: 16px; flex-shrink: 0; }
.kj-option:has(input:checked) { border-color: var(--color-accent); background: rgba(249,115,22,0.1); }

/* ── /Know Jesus ─────────────────────────────────────────────────────── */

.merc-form-input {
    width: 100%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.2rem;
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.merc-form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
    background-color: rgba(5, 8, 22, 0.9);
}

.merc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 576px) {
    .merc-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.merc-success-pane {
    text-align: center;
    padding: 2rem 0;
    display: none;
}

.merc-success-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

.merc-success-icon {
    width: 72px;
    height: 72px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.05) 70%);
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    color: var(--color-accent);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

.merc-success-icon svg {
    width: 36px;
    height: 36px;
}

/* ==========================================================================
   Admin Leads Dashboard
   ========================================================================== */
.admin-lock-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s;
    vertical-align: middle;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
}

.admin-lock-btn:hover {
    color: var(--color-accent);
}

.admin-dashboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 8, 22, 0.9);
    backdrop-filter: blur(16px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 2rem;
}

.admin-dashboard-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.admin-dashboard-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 1080px;
    padding: 2.5rem;
    box-shadow: var(--shadow-soft), 0 0 50px rgba(37, 99, 235, 0.15);
    position: relative;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.admin-dashboard-overlay.active .admin-dashboard-card {
    transform: scale(1) translateY(0);
}

.admin-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.admin-dashboard-title {
    font-size: 1.8rem;
    color: var(--color-text);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin: 0;
}

.admin-dashboard-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-search-input {
    flex-grow: 1;
    min-width: 250px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 0.7rem 1.2rem;
    color: var(--color-text);
    font-size: 0.95rem;
}

.admin-search-input:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

.btn-csv-export {
    background-color: #10b981;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-csv-export:hover {
    background-color: #059669;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);
    color: white;
}

.btn-admin-clear {
    background-color: #ef4444;
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-admin-clear:hover {
    background-color: #dc2626;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
    color: white;
}

/* Leads Table Styling */
.admin-table-container {
    overflow-x: auto;
    flex-grow: 1;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    max-height: 50vh;
}

.admin-leads-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.admin-leads-table th {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--color-text);
    font-weight: 600;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--color-border-subtle);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.admin-leads-table td {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text-muted);
    vertical-align: middle;
}

.admin-leads-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--color-text);
}

.badge-lead-type {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.badge-kids-church { background-color: rgba(249, 115, 22, 0.15); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3); }
.badge-care-cell { background-color: rgba(37, 99, 235, 0.15); color: #60a5fa; border: 1px solid rgba(37, 99, 235, 0.3); }
.badge-prayer-request { background-color: rgba(139, 92, 246, 0.15); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.3); }
.badge-plan-visit { background-color: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-know-jesus { background-color: rgba(236, 72, 153, 0.15); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.3); }
.badge-general { background-color: rgba(107, 114, 128, 0.15); color: #9ca3af; border: 1px solid rgba(107, 114, 128, 0.3); }

.leads-table-empty {
    padding: 3rem;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
}

.btn-lead-action {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.2rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.btn-lead-action:hover {
    background-color: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

/* PIN Screen Overlay */
.admin-pin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 8, 22, 0.95);
    backdrop-filter: blur(20px);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.admin-pin-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.admin-pin-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    max-width: 380px;
    width: 100%;
    padding: 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.admin-pin-overlay.active .admin-pin-card {
    transform: scale(1);
}

.admin-pin-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.admin-pin-inputs {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin: 1.5rem 0;
}

.pin-digit {
    width: 50px;
    height: 60px;
    font-size: 2rem;
    text-align: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: 700;
}

.pin-digit:focus {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.admin-pin-error {
    color: #ef4444;
    font-size: 0.85rem;
    min-height: 20px;
    margin-top: 0.5rem;
    display: none;
}

/* ==========================================================================
   Bible Study Scripture Player & Drawer
   ========================================================================== */
.study-content-panel {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    max-width: 900px;
    margin: 3rem auto 0 auto;
    padding: 3rem;
    box-shadow: var(--shadow-soft);
    display: none;
    text-align: left;
}

.study-content-panel.active {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

.study-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.study-header-info h2 {
    text-align: left;
    margin-bottom: 0.25rem;
    font-size: 2.2rem;
}

.study-header-info p {
    color: var(--color-accent-soft);
    font-weight: 600;
    margin-bottom: 0;
}

/* Custom Premium HTML5 Audio Player */
.custom-audio-player {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
}

.audio-controls-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.btn-audio-play {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-audio-play:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6);
}

.btn-audio-play svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-left: 2px; /* Slight offset for perfect centering of play arrow */
}

.btn-audio-play.playing svg {
    margin-left: 0;
}

.audio-timeline-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.audio-timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
}

.audio-timeline-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
}

.audio-timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-accent);
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.6);
    transition: transform var(--transition-fast);
}

.audio-timeline-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.audio-time-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.audio-secondary-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.8rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.audio-speed-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.audio-speed-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.btn-speed-select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-speed-select:hover, .btn-speed-select.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.audio-volume-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.audio-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.audio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    cursor: pointer;
}

.audio-volume-icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
}

/* Scripture Layout & Study Tabs */
.study-tab-headers {
    display: flex;
    border-bottom: 2px solid var(--color-border-subtle);
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.study-tab-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.study-tab-btn:hover {
    color: var(--color-text);
}

.study-tab-btn.active {
    color: var(--color-accent);
}

.study-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}

.study-tab-pane {
    display: none;
    line-height: 1.8;
}

.study-tab-pane.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

/* Bilingual Scripture Layout */
.scripture-bilingual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .scripture-bilingual {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.scripture-column h4 {
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--color-accent-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.verse-block {
    margin-bottom: 1rem;
}

.verse-num {
    font-weight: 700;
    color: var(--color-accent);
    margin-right: 0.4rem;
}

.verse-text {
    color: var(--color-text);
}

.notes-container {
    color: var(--color-text-muted);
}

.notes-container h3 {
    color: var(--color-text);
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.notes-container li {
    margin-bottom: 0.8rem;
    padding-left: 0.5rem;
}

/* Dynamic embed map adjustments */
.map-responsive {
    overflow: hidden;
    position: relative;
    height: 350px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-soft);
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* ==========================================================================
   Premium YouTube Custom Thumbnail Card System
   ========================================================================== */
.video-cover-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background-color: var(--color-surface);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-thumbnail-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 80%);
    transition: background 0.3s;
}

.video-cover-card:hover .video-thumbnail-container::after {
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 80%);
}

.play-button-overlay {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(249, 115, 22, 0.95); /* Dynamic accent color */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.5);
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease-out;
}

.play-button-overlay svg {
    width: 24px;
    height: 24px;
    margin-left: 2px; /* Offset for visual balance */
}

.video-cover-card:hover .play-button-overlay {
    transform: scale(1.15);
    background-color: var(--color-accent);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.8);
}

.video-cover-card iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 3;
}
/* ==========================================================================
   NEW COMPONENTS — Added in improvement pass
   ========================================================================== */

/* --- Value Card SVG Icons --- */
.value-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-accent);
}

/* --- Latest Message Badge --- */
.latest-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-accent);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    z-index: 3;
    font-family: 'Poppins', sans-serif;
}

/* --- Visitor Announcement Bar (top of page, always visible on load) --- */
.visitor-banner {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-accent);
    padding: 0.65rem 0;
    position: relative;
    z-index: 101;
}
.visitor-banner-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.visitor-banner-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.visitor-banner p {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin: 0;
    flex: 1;
}
.visitor-banner-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    transition: color var(--transition-fast);
    flex-shrink: 0;
}
.visitor-banner-close:hover { color: var(--color-accent); }
.visitor-banner.hidden { display: none; }

.btn-accent-sm {
    background: var(--color-accent);
    color: white;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), transform var(--transition-fast);
    font-family: 'Poppins', sans-serif;
}
.btn-accent-sm:hover {
    background: #ea6c0a;
    transform: translateY(-1px);
    color: white;
}

/* --- Ministry Sections (Kids Church and Youth) --- */
.ministry-section { padding: 5rem 0; }
.ministry-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.ministry-inner--reverse { direction: rtl; }
.ministry-inner--reverse > * { direction: ltr; }
.ministry-tag {
    display: inline-block;
    background: rgba(249,115,22,0.15);
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}
.ministry-text h2 {
    text-align: left;
    font-size: 2.4rem;
    margin-bottom: 1rem;
}
.ministry-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ministry-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.ministry-list li svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-accent);
    flex-shrink: 0;
}
.ministry-visual {
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    min-height: 280px;
}
.ministry-visual--kids {
    background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(15,60,125,0.4));
    border: 1px solid rgba(37,99,235,0.3);
}
.ministry-visual--youth {
    background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(249,115,22,0.08));
    border: 1px solid rgba(249,115,22,0.25);
}

/* ── Kids Church Section ────────────────────────────────────────── */
.kids-section { background: var(--color-bg); }
.kids-accent { color: var(--color-accent); }
.kids-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: end;
    margin-bottom: 3rem;
}
.kids-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
}
.kids-meta-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 999px;
    padding: 0.4rem 1rem;
}
.kids-meta-badge svg { width: 15px; height: 15px; stroke: var(--color-accent); flex-shrink: 0; }
.kids-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    counter-reset: kcard;
}
.kids-feature-card {
    --kc: 167,139,250;
    background: var(--color-surface);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    overflow: hidden;
    counter-increment: kcard;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.kids-feature-card::after {
    content: counter(kcard, decimal-leading-zero);
    position: absolute;
    top: -0.4rem;
    right: 0.6rem;
    font-size: 4rem;
    font-weight: 900;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    color: rgb(var(--kc));
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}
.kids-feature-card:nth-child(1) { --kc: 167,139,250; }
.kids-feature-card:nth-child(2) { --kc: 251,146,60; }
.kids-feature-card:nth-child(3) { --kc: 251,191,36; }
.kids-feature-card:nth-child(4) { --kc: 56,189,248; }
.kids-feature-card:nth-child(5) { --kc: 74,222,128; }
.kids-feature-card:nth-child(6) { --kc: 244,114,182; }
.kids-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--kc), 0.4);
    box-shadow: 0 8px 30px rgba(var(--kc), 0.12);
}
.kids-feature-icon {
    width: 46px;
    height: 46px;
    background: rgba(var(--kc), 0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.3rem;
    transition: background var(--transition-fast);
}
.kids-feature-card:hover .kids-feature-icon { background: rgba(var(--kc), 0.2); }
.kids-feature-icon svg { width: 22px; height: 22px; stroke: rgb(var(--kc)); }
.kids-feature-card h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.kids-feature-card p {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 900px) {
    .kids-header { grid-template-columns: 1fr; gap: 1.5rem; }
    .kids-header-meta { flex-direction: row; flex-wrap: wrap; }
    .kids-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) { .kids-features-grid { grid-template-columns: 1fr; } }

/* ── Kids Photo Strip ───────────────────────────────────────────── */
.kids-photo-strip {
    overflow: hidden;
    margin: 2.5rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
    mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}
.kids-photo-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: kids-strip-scroll 60s linear infinite;
}
.kids-photo-strip:hover .kids-photo-track { animation-play-state: paused; }
@keyframes kids-strip-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.kids-photo-frame {
    flex-shrink: 0;
    width: 280px;
    height: 210px;
    background: #fff;
    padding: 6px 6px 22px 6px;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kids-photo-frame:hover {
    transform: scale(1.04) rotate(0deg) !important;
    box-shadow: 0 10px 32px rgba(0,0,0,0.28);
    z-index: 2;
}
.kids-photo-frame:nth-child(4n+1) { transform: rotate(-1.5deg); border-top: 4px solid #fbbf24; }
.kids-photo-frame:nth-child(4n+2) { transform: rotate(1deg);    border-top: 4px solid #fb923c; }
.kids-photo-frame:nth-child(4n+3) { transform: rotate(-0.8deg); border-top: 4px solid #38bdf8; }
.kids-photo-frame:nth-child(4n+0) { transform: rotate(1.4deg);  border-top: 4px solid #4ade80; }
.kids-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(1.08) contrast(1.04) saturate(1.1);
}
@media (max-width: 600px) {
    .kids-photo-frame { width: 220px; height: 165px; }
}

/* ── Church Life Scrapbook (auto-scrolling marquee) ────────────── */
.scrapbook-viewport {
    overflow: hidden;
    margin-top: 3rem;
    padding: 1.5rem 0;
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.scrapbook {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    gap: 2.25rem;
    animation: scrapbook-scroll 70s linear infinite;
}
.scrapbook-viewport:hover .scrapbook { animation-play-state: paused; }
@keyframes scrapbook-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .scrapbook { animation: none; }
}
.polaroid {
    position: relative;
    background: #fbfaf6;
    padding: 12px 12px 0;
    border-radius: 3px;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    margin: 0;
    will-change: transform;
}
/* Tape strip */
.polaroid::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 78px;
    height: 24px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(249, 224, 170, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.polaroid-photo {
    width: 230px;
    height: 290px;
    overflow: hidden;
    background: #2a2a2a;
}
.polaroid--wide .polaroid-photo {
    width: 360px;
    height: 250px;
}
.polaroid-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.polaroid figcaption {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: #2b2b2b;
    text-align: center;
    padding: 0.7rem 0.4rem 0.9rem;
    letter-spacing: 0.01em;
}
/* Scattered tilt — natural scrapbook feel */
.polaroid:nth-child(5n+1) { transform: rotate(-2.5deg); }
.polaroid:nth-child(5n+2) { transform: rotate(1.8deg); }
.polaroid:nth-child(5n+3) { transform: rotate(-1.2deg); }
.polaroid:nth-child(5n+4) { transform: rotate(2.6deg); }
.polaroid:nth-child(5n+5) { transform: rotate(-1.8deg); }
.polaroid:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.03);
    box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.8);
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .polaroid { transition: none; }
    .polaroid:hover { transform: none; }
}
@media (max-width: 600px) {
    .polaroid-photo { width: 150px; height: 190px; }
    .polaroid--wide .polaroid-photo { width: 240px; height: 165px; }
    .scrapbook { gap: 1.5rem 1.25rem; }
}

/* ── Revive Generation Section ─────────────────────────────────── */
.rg-section {
    background: linear-gradient(160deg, #0a0f1e 0%, #0f172a 60%, #1a1a2e 100%);
    position: relative;
    overflow: hidden;
}
.rg-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(249,115,22,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.rg-section .ministry-tag {
    background: rgba(249,115,22,0.15);
    color: #fb923c;
    border: 1px solid rgba(249,115,22,0.3);
}
.rg-section h2,
.rg-section .section-intro,
.rg-section .ministry-list li {
    color: #f1f5f9;
}
.rg-section .section-intro {
    color: #94a3b8;
}
.rg-title { margin-bottom: 0.15em; }
.rg-accent {
    color: #fb923c;
    font-style: italic;
}
.rg-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}
.rg-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}
.rg-secondary-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    color: #94a3b8;
    margin: -0.6rem 0 1.4rem;
}
.rg-section .ministry-list li svg {
    stroke: #fb923c;
}
.rg-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.rg-gallery-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.rg-gallery-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fb923c;
    margin: 0;
    opacity: 0.9;
}
.rg-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 120px);
    gap: 8px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.rg-photo {
    overflow: hidden;
    border-radius: 6px;
}
.rg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.rg-photo:hover img { transform: scale(1.06); }
.rg-photo--tall { grid-row: span 2; }
.rg-photo--wide { grid-column: span 2; }
@media (max-width: 900px) {
    .rg-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .rg-gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 90px); }
}
@media (max-width: 480px) {
    .rg-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 100px); }
    .rg-photo--wide { grid-column: span 2; }
}
.ministry-visual-icon svg {
    width: 72px;
    height: 72px;
    stroke: var(--color-accent);
    opacity: 0.85;
}
.ministry-visual-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text);
    margin: 0;
}
.ministry-visual-sub {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Testimonials Carousel --- */
.tc-outer {
    width: 100%;
    overflow: hidden;
    padding: 3rem 0 1rem;
    --tcard-h: clamp(440px, 60vh, 540px);
}
.tc-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    align-items: stretch;
}

/* ── Card shell (shared) ─────────────────────────────────────── */
.tc-track .tcard {
    position: relative;
    flex: 0 0 clamp(320px, 72vw, 720px);
    min-height: var(--tcard-h);
    padding: 0;
    gap: 0;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(158deg, rgba(13, 12, 20, 0.72) 0%, rgba(10, 13, 31, 0.95) 100%);
    box-shadow:
        0 24px 60px -28px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        border-color var(--transition-med),
        box-shadow var(--transition-med);
}
/* Top accent hairline */
.tc-track .tcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent) 30%, var(--color-gold) 70%, transparent);
    opacity: 0.55;
    z-index: 3;
}
.tc-track .tcard.tc-inactive {
    opacity: 0.4;
    transform: scale(0.95);
}
.tc-track .tcard:not(.tc-inactive) {
    border-color: rgba(212, 162, 75, 0.22);
    box-shadow:
        0 30px 70px -30px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(249, 115, 22, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── Video card (split: portrait reel + panel) ───────────────── */
.tc-track .tcard--video {
    display: flex;
    flex-direction: row;
}
.tcard-stage {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--tcard-h) * 9 / 16);
    background: #05060c;
}
.tc-video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.tc-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* portrait video in portrait frame — no distortion */
    display: block;
    cursor: pointer;
}
.tcard-stage-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.35) 100%);
    z-index: 1;
}
.tc-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    background: rgba(4, 5, 12, 0.32);
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: background var(--transition-med);
}
.tc-play-btn:hover { background: rgba(4, 5, 12, 0.18); }
.tc-play-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: transform var(--transition-fast), background var(--transition-fast);
}
.tc-play-btn:hover .tc-play-ring {
    transform: scale(1.08);
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.tc-play-ring svg {
    width: 26px;
    height: 26px;
    fill: white;
    margin-left: 3px;
}
.tc-play-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.tc-play-btn.hidden { display: none; }

.tcard-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
    padding: 2.4rem 2.2rem;
    min-width: 0;
}
.tcard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.25);
}
.tcard-kicker svg { width: 12px; height: 12px; }
.tcard-lead {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* ── Text card ───────────────────────────────────────────────── */
.tc-track .tcard--text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3rem 2.8rem;
}
.tcard-glyph {
    width: 56px;
    height: 56px;
    fill: var(--color-gold);
    opacity: 0.5;
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}
.tcard-quote {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(5 * 1.75 * 1.2rem);
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.75;
    color: var(--color-text);
    font-style: italic;
    margin: 0 0 0.6rem;
    flex: 0 1 auto;
}
.tcard-quote.tcard-quote--expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    max-height: none;
}
.tcard-read-more {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.4rem;
    color: var(--color-accent);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    align-self: flex-start;
}
.tcard-read-more:hover { opacity: 1; }
.tcard-read-more.tcard-read-more--hidden { display: none; }
.tcard--text .testimonial-author { margin-top: auto; }

/* ── Author block (shared, refined) ──────────────────────────── */
.tcard .testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tcard .testimonial-avatar {
    width: 46px;
    height: 46px;
    font-size: 0.9rem;
}
.tcard .testimonial-author strong {
    font-family: 'Poppins', sans-serif;
    font-size: 0.98rem;
    color: var(--color-text);
}
.tcard .testimonial-author span {
    font-size: 0.8rem;
    color: var(--color-gold);
    letter-spacing: 0.02em;
}

/* Carousel controls */
.tc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.75rem;
}
.tc-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}
.tc-arrow svg { width: 18px; height: 18px; }
.tc-arrow:hover {
    background: rgba(249, 115, 22, 0.12);
    border-color: var(--color-accent);
}
.tc-arrow:disabled { opacity: 0.25; pointer-events: none; }
.tc-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.tc-dot.tc-dot--active {
    background: var(--color-accent);
    transform: scale(1.4);
}

.testimonial-card {
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition:
        border-color var(--transition-med),
        background-color var(--transition-med),
        transform var(--transition-med);
}
.testimonial-card:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, 0.35);
    background-color: rgba(249, 115, 22, 0.025);
}
.testimonial-quote-icon svg {
    width: 28px;
    height: 28px;
    fill: var(--color-accent);
    opacity: 0.7;
}
.testimonial-text {
    font-size: 0.97rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
    margin: 0;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: auto;
}
.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    flex-shrink: 0;
    object-fit: cover;
}
.testimonial-author strong {
    display: block;
    color: var(--color-text);
    font-size: 0.9rem;
}
.testimonial-author span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* --- Ministries Card Grid (homepage overview) --- */
.ministries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}
.ministry-card {
    --m-accent: var(--color-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 2rem 1.9rem 1.9rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-top: 4px solid var(--m-accent);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-text);
    overflow: hidden;
    transition:
        transform var(--transition-med),
        border-color var(--transition-med),
        background-color var(--transition-med);
}
.ministry-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, var(--m-accent), transparent 55%);
    opacity: 0.06;
    pointer-events: none;
    transition: opacity var(--transition-med);
}
.ministry-card:hover {
    transform: translateY(-4px);
    border-color: var(--m-accent);
    background-color: rgba(255, 255, 255, 0.015);
}
.ministry-card:hover::after { opacity: 0.13; }
.ministry-card[data-ministry="kids"]  { --m-accent: #E0457B; } /* pink */
.ministry-card[data-ministry="youth"] { --m-accent: #FF7A30; } /* orange */
.ministry-card[data-ministry="women"] { --m-accent: #9B5DE5; } /* purple */
.ministry-card[data-ministry="care"]  { --m-accent: #D4A24B; } /* gold */
.ministry-card-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--m-accent);
}
.ministry-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    line-height: 1.25;
    margin: 0;
    color: var(--color-text);
}
.ministry-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
    flex-grow: 1;
}
.ministry-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--m-accent);
}
.ministry-card-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}
.ministry-card:hover .ministry-card-link svg { transform: translateX(4px); }
@media (max-width: 640px) {
    .ministries-grid { grid-template-columns: 1fr; }
}

/* --- Prayer Request Section --- */
.prayer-section-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.prayer-text h2 { text-align: left; }
/* Note: .prayer-verse styling is defined in the SACRED-MODERN
   block below (full border + gold accent, no side-stripe).
   This older block is kept only for cascade safety. */
.prayer-text .prayer-verse {
    margin: 1.5rem 0 0;
}
.prayer-verse cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-accent);
    font-style: normal;
    font-weight: 600;
}
.prayer-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
}
.prayer-privacy-note {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Footer Redesign --- */
#footer {
    background-color: #020617;
    border-top: 1px solid var(--color-border-subtle);
    padding-top: 4rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    padding-bottom: 3rem;
}
.footer-logo {
    height: 50px;
    width: auto;
    margin-bottom: 1rem;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.footer-tagline {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--color-text);
    font-size: 1rem;
    margin-bottom: 0.3rem;
}
.footer-mission {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}
.footer-links h4,
.footer-contact h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-soft);
    margin-bottom: 1.2rem;
}
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.footer-links ul li a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}
.footer-links ul li a:hover { color: var(--color-accent); }
.footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}
.footer-contact p svg {
    width: 15px;
    height: 15px;
    stroke: var(--color-accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.footer-contact a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}
.footer-contact a:hover { color: var(--color-accent); }
.footer-service-times {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--color-text) !important;
}
.social-links {
    display: flex;
    gap: 0.85rem;
    margin-top: 0.5rem;
}
.social-links a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}
.social-links a svg { width: 17px; height: 17px; }
.social-links a:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
    transform: translateY(-2px);
}
.footer-bottom {
    border-top: 1px solid var(--color-border-subtle);
    padding: 1.25rem 0;
    text-align: center;
}
.footer-bottom .copyright {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- WhatsApp FAB --- */
.whatsapp-fab {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.45);
    z-index: 500;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    text-decoration: none;
}
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,0.65);
    color: white;
}

/* --- Scroll-to-Top Button --- */
.scroll-top-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.scroll-top-btn.visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}
.scroll-top-btn:hover { background: var(--color-accent); }
.scroll-top-btn svg { width: 20px; height: 20px; }

/* --- Responsive: Ministry, Testimonials, Prayer, Footer --- */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 900px) {
    .ministry-inner,
    .ministry-inner--reverse { grid-template-columns: 1fr; gap: 2rem; direction: ltr; }
    .ministry-visual { min-height: 180px; padding: 2rem; }
    .tc-track .tcard { flex: 0 0 clamp(280px, 86vw, 560px); }
    .tc-track .tcard--video { flex-direction: column; }
    .tc-track .tcard--video .tcard-stage {
        width: 100%;
        height: clamp(360px, 62vh, 460px);
    }
    .tcard-panel { padding: 1.75rem; justify-content: flex-start; }
    /* Text cards size to their own content on mobile (don't stretch to the
       tall portrait-video card height) so short testimonials aren't a small
       block of text floating in a big empty card. */
    .tc-track .tcard--text {
        min-height: 0;
        align-self: flex-start;
        padding: 2.25rem 1.75rem;
    }
    /* Allow more lines before clamping on narrow screens, where text wraps
       sooner — short/medium testimonies show in full, only long ones clamp. */
    .tcard-quote {
        -webkit-line-clamp: 10;
        max-height: calc(10 * 1.75 * 1.2rem);
    }
    .prayer-section-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
    .visitor-banner-inner { flex-direction: column; text-align: center; gap: 0.75rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
}

/* ════════════════════════════════════════════════════════════════
   SACRED-MODERN REFINEMENTS
   Added in the design pass: hero ambient, Sermons blue dominance,
   scripture pull-quote, carousel ambient zoom, button row, dropdown
   ════════════════════════════════════════════════════════════════ */

/* ── Hero: two-column layout (text left, video right) ────────── */
.hero-left-content .btn-row {
    justify-content: flex-start;
    margin-top: 0.5rem;
}

/* Subtle entrance on the hero content (single, restrained) */
.hero-left-content > * {
    opacity: 0;
    animation: hero-fade-up 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-left-content > *:nth-child(1) { animation-delay: 0.10s; }
.hero-left-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-left-content > *:nth-child(3) { animation-delay: 0.34s; }
.hero-left-content > *:nth-child(4) { animation-delay: 0.46s; }

@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-left-content > * {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

/* ── Hero ambient: slow diagonal light beam ────────────────────── */
.hero-beam {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-beam::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -30%;
    width: 55%;
    height: 200%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(249, 115, 22, 0.06) 30%,
        rgba(254, 215, 170, 0.16) 50%,
        rgba(249, 115, 22, 0.06) 70%,
        transparent 100%
    );
    transform: rotate(8deg) translateX(-30%);
    filter: blur(48px);
    animation: hero-beam-sweep 18s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes hero-beam-sweep {
    0%   { transform: rotate(8deg) translateX(-40%); opacity: 0; }
    18%  { opacity: 0.85; }
    52%  { transform: rotate(8deg) translateX(90%); opacity: 1; }
    82%  { opacity: 0.5; }
    100% { transform: rotate(8deg) translateX(200%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-beam::before {
        animation: none;
        opacity: 0.35;
        transform: rotate(8deg) translateX(25%);
    }
}

/* ── Sermons: distinct deeper-blue chapter break ───────────────── */
#sermons-media {
    background-color: var(--color-blue-deep);
    background-image:
        radial-gradient(ellipse at top, rgba(37, 99, 235, 0.18), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(15, 60, 125, 0.4), transparent 55%);
    position: relative;
}

#sermons-media .featured-card {
    background-color: rgba(4, 7, 22, 0.5);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

#sermons-media .featured-card:hover {
    border-color: rgba(37, 99, 235, 0.5);
}

#sermons-media .latest-badge {
    background-color: var(--color-accent);
    color: #fff;
}

#sermons-media .sermon-buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Scripture pull-quote: gold-accented, sacred ───────────────── */
.prayer-verse {
    margin: 2rem 0 0;
    padding: 1.75rem 2rem;
    background: var(--color-gold-soft);
    border: 1px solid rgba(212, 162, 75, 0.3);
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text);
    border-radius: var(--radius-md);
}

.prayer-verse cite {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--color-gold);
    letter-spacing: 0.04em;
}

/* Reusable scripture-rest block (cream surface, used inline only,
   not as a full theme-flip section). Kept available for future use. */
.scripture-block {
    background-color: var(--color-cream);
    color: var(--color-cream-text);
    padding: 3rem 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    margin: 3rem auto;
    max-width: 760px;
}

.scripture-block p {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--color-cream-text);
    margin: 0;
}

.scripture-block cite {
    display: block;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--color-gold);
}

/* ── Carousel: subtle Ken Burns ambient zoom on active slide ───── */
.carousel-slide img {
    transition: transform 9s ease-out;
    transform: scale(1.0);
    will-change: transform;
}

.carousel-slide.slide-center img {
    transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
    .carousel-slide img,
    .carousel-slide.slide-center img {
        transition: none;
        transform: none;
    }
}

/* ── Lighter card hovers — canonical rule is in values-grid block above;
   this comment block kept as anchor only ────────────────────────── */
.value-card:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 6px 24px rgba(4, 3, 13, 0.45);
}

/* ── Section padding: give Hero + Prayer extra breathing room ─── */
#prayer {
    background-color: var(--color-bg-warm);
    padding: 7rem 0;
}

/* ── btn-row spacing for 2-CTA hero ─────────────────────────────── */
.hero-content .btn-row {
    gap: 1rem;
}

@media (max-width: 480px) {
    .hero-content .btn-row {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-content .btn-row .btn {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════════════════════
   NEW HERE? section (revamped)
   Service-times-prominent layout + 3 contextualized invitation
   cards. Replaces the white-box + 3-identical-buttons layout.
   ════════════════════════════════════════════════════════════════ */

/* ── Year of Restoration strip ─────────────────────────────── */
.restoration-strip {
    background: #000;
    width: 100%;
    padding: 2.75rem 1.5rem 2.25rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.restoration-strip img {
    max-width: min(560px, 88vw);
    width: 100%;
    display: block;
    margin: 0 auto 1rem;
}
.restoration-verse {
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(255,255,255,0.42);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}
.restoration-verse span {
    color: var(--color-accent, #f97316);
    font-style: normal;
    font-weight: 600;
}

.new-here-section {
    padding: 6rem 0;
}

/* Override the global "centered H2" pattern just here, on purpose,
   to break the monotonous centered cadence the audit flagged. */
.new-here-header {
    max-width: 720px;
    margin: 0 0 3.5rem 0;
    text-align: left;
}

.new-here-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-soft);
    margin: 0 0 1rem 0;
}

.new-here-heading {
    text-align: left;
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--color-accent);
    margin-bottom: 1rem;
    text-wrap: balance;
}

.new-here-intro {
    text-align: left;
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.65;
    max-width: 60ch;
}

.new-here-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* ── Service times (left column) ───────────────────────────────── */
.service-times {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.service-times-label,
.invitation-stack-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-quiet);
    margin: 0 0 0.25rem 0;
}

.service-card {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 1.75rem 2rem;
    transition:
        border-color var(--transition-med),
        background-color var(--transition-med),
        transform var(--transition-med);
}

.service-card:hover {
    border-color: rgba(249, 115, 22, 0.35);
    transform: translateY(-2px);
}

.service-card--online {
    background-color: rgba(15, 60, 125, 0.18);
    border-color: rgba(37, 99, 235, 0.25);
}

.service-card--online:hover {
    border-color: rgba(37, 99, 235, 0.5);
}

.service-day {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.5rem;
}

.service-time {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.85rem;
}

.service-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.service-meta-tag {
    display: inline-block;
    padding: 0.28rem 0.7rem;
    background-color: rgba(249, 115, 22, 0.12);
    color: var(--color-accent-soft);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-meta-tag--live {
    background-color: rgba(37, 99, 235, 0.18);
    color: #93c5fd;
}

.service-location-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--color-text-quiet);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0.75rem 0 0 0;
}

.service-location-note svg {
    flex-shrink: 0;
    color: var(--color-accent);
    margin-top: 2px;
}

.service-location-note a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-med);
}

.service-location-note a:hover {
    border-bottom-color: var(--color-accent);
}

/* ── Invitation stack (right column) ───────────────────────────── */
.invitation-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.invitation-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.4rem 1.6rem;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition:
        border-color var(--transition-med),
        background-color var(--transition-med),
        transform var(--transition-med);
}

.invitation-card:hover {
    border-color: rgba(249, 115, 22, 0.55);
    background-color: rgba(249, 115, 22, 0.05);
    transform: translateY(-2px);
}

.invitation-card-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background-color: rgba(249, 115, 22, 0.12);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-med);
}

.invitation-card-icon svg {
    width: 22px;
    height: 22px;
}

.invitation-card:hover .invitation-card-icon {
    background-color: rgba(249, 115, 22, 0.2);
}

.invitation-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.invitation-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.invitation-card-desc {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.invitation-card-arrow {
    flex-shrink: 0;
    font-size: 1.35rem;
    color: var(--color-accent);
    transition: transform var(--transition-med);
    line-height: 1;
}

.invitation-card:hover .invitation-card-arrow {
    transform: translateX(4px);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .new-here-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    .new-here-section {
        padding: 4rem 0;
    }
    .invitation-card {
        padding: 1.15rem;
        gap: 1rem;
    }
    .invitation-card-icon {
        width: 40px;
        height: 40px;
    }
    .invitation-card-icon svg {
        width: 18px;
        height: 18px;
    }
    .service-card {
        padding: 1.4rem 1.5rem;
    }
}

/* Values strip removed — reverted to value cards per user preference. */


/* =====================================================================
   Audit fixes - skip link, next-service countdown, vision, what-to-expect
   ===================================================================== */

/* --- Skip to main content (a11y) --- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    background: var(--color-accent);
    color: #fff;
    padding: 0.7rem 1.15rem;
    font-weight: 600;
    border-radius: 0 0 10px 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* --- Hero "Next gathering" countdown --- */
.next-service {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    max-width: 100%;
}
.next-service-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
    animation: ns-pulse 2.2s ease-out infinite;
}
@keyframes ns-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}
.next-service-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.next-service-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-quiet);
}
.next-service-when {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.92rem;
}
.next-service-countdown {
    font-weight: 700;
    color: var(--color-accent);
    white-space: nowrap;
    font-size: 0.92rem;
}
.next-service-countdown a { color: inherit; text-decoration: none; }
.next-service-countdown a:hover { text-decoration: underline; }
.next-service.is-live .next-service-pulse {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: ns-pulse-live 2.2s ease-out infinite;
}
.next-service.is-live .next-service-countdown { color: #22c55e; }
@keyframes ns-pulse-live {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* --- "The Vision" asymmetric timeline (replaces 3 value cards) --- */
.vision {
    position: relative;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.vision-title {
    font-size: clamp(2.75rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: rgba(244, 246, 251, 0.05);
    margin: 0 0 0.5rem;
    user-select: none;
}
.vision-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 600px;
}
.vision-step--left { margin-right: auto; }
.vision-step--right {
    margin-left: auto;
    flex-direction: row-reverse;
    text-align: right;
}
.vision-num {
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: rgba(244, 246, 251, 0.07);
    flex-shrink: 0;
    user-select: none;
}
.vision-step-body { min-width: 0; }
.vision-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 0.35rem;
}
.vision-eyebrow--spark,
.vision-eyebrow--future { color: var(--color-accent); }
.vision-eyebrow--momentum { color: var(--color-primary-light); }
.vision-step-title {
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0 0 0.6rem;
}
.vision-step-text {
    color: var(--color-text-muted);
    line-height: 1.65;
    font-size: 1rem;
    margin: 0;
}
.vision-step--right .vision-step-text { margin-left: auto; }
@media (max-width: 768px) {
    .vision { gap: 2.25rem; }
    .vision-step,
    .vision-step--right {
        flex-direction: row;
        text-align: left;
        margin: 0;
        max-width: 100%;
        gap: 1rem;
    }
    .vision-step--right .vision-step-text { margin-left: 0; }
    .vision-num { align-self: flex-start; }
}

/* --- "What to Expect" section --- */
.expect-header { text-align: center; max-width: 720px; margin: 0 auto; }
.expect-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-accent);
    margin: 0 0 0.6rem;
}
.expect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    margin-top: 2.75rem;
}
.expect-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: 1.85rem 1.6rem;
    transition: transform var(--transition-med), border-color var(--transition-med), background-color var(--transition-med);
}
.expect-card:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, 0.4);
    background-color: rgba(249, 115, 22, 0.03);
}
.expect-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(249, 115, 22, 0.1);
    color: var(--color-accent);
    margin-bottom: 1.1rem;
}
.expect-icon svg { width: 22px; height: 22px; }
.expect-card h3 {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}
.expect-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
.expect-cta {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Revive Gen Instagram tertiary link (homepage youth section) --- */
.rg-insta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.rg-insta-link svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .next-service-pulse,
    .next-service.is-live .next-service-pulse { animation: none; }
}

/* ── FAQ accordions (used on index.html + all ministry sub-pages) ── */
.faq-item {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 0.85rem;
    background: rgba(127, 127, 127, 0.07);
    overflow: hidden;
}
.faq-item > summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 1.35rem;
    font-weight: 700;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    line-height: 1.45;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    opacity: 0.6;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item > div {
    padding: 0 1.35rem 1.25rem;
    opacity: 0.85;
    line-height: 1.65;
}
.faq-item > div a { color: var(--color-accent); text-decoration: underline; }
/* Homepage FAQ: 2-column on wide screens */
.index-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    margin-top: 2.5rem;
}
/* Sub-page FAQ section wrapper */
.faq-section {
    max-width: 820px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}
.faq-section > h2 {
    text-align: center;
    margin: 0 0 0.5rem;
}
.faq-intro {
    text-align: center;
    opacity: 0.75;
    margin: 0 auto 2.5rem;
    max-width: 60ch;
}
@media (max-width: 768px) {
    .index-faq-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item > summary::after { transition: none; }
}

/* ─── Zoom "Join Online" reveal (WoW, Revive Gen, Friday service) ─── */
.zoom-join { margin-top: 1.5rem; }
.zoom-join-panel {
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.zoom-join-panel--in { opacity: 1; transform: translateY(0); }
.zoom-join-card {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    padding: 1.3rem 1.4rem;
    background: rgba(8, 11, 26, 0.94);
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
    text-align: left;
}
.zoom-join-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
}
.zoom-join-card .zoom-join-meta {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.zoom-join-card .zoom-join-meta li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.95rem;
}
.zoom-join-card .zoom-join-meta span { color: var(--color-text-muted, #c5cbd7); }
.zoom-join-card .zoom-join-meta strong {
    color: var(--color-text, #f4f6fb);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.zoom-join-card .zoom-join-note {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--color-text-muted, #c5cbd7);
    opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
    .zoom-join-panel { transition: none; transform: none; }
}