/* SELF-HOSTED FONTS */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/figtree-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/figtree-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/fraunces-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/fraunces-500.woff2') format('woff2');
}

/* ROOT VARIABLES & RESET */
:root {
    /* Color Palette */
    --color-paper: #FFFFFF;
    --color-page: #FBFAF6;
    --color-ink: #141414;
    --color-ink-light: #6E6E6E;
    --color-sage: #5D6F5D;
    --color-rust: #B23A28;
    --color-rust-dark: #8C2D1F;
    --color-border: #F4F2ED;
    --color-action-text: #FFFFFF;
    --color-eyebrow: var(--color-sage);
    
    /* Typography */
    --font-heading: 'Fraunces', Georgia, serif;
    --font-body: 'Figtree', system-ui, sans-serif;
    
    /* Sizing & Spacing */
    --max-width: 1100px;
    --space-sm: 1rem;
    --space-md: 2.5rem;
    --space-lg: 5rem;
    --space-xl: 8rem;
    
    /* Animation */
    --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}

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

body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background-color: var(--color-page);
    /* Faint paper grain, tiled on the page itself (so it sits behind the
       white nav and cards and the dark footer rather than over them). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.22 0 0 0 0 0.15 0.7 0 0 0 -0.37'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    line-height: 1.6;
    font-size: 1.125rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    transition: padding-top 0.3s ease;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, .brand {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.15;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
p { margin-bottom: 1.25rem; color: var(--color-ink-light); }
strong { font-weight: 500; color: var(--color-ink); }
a { color: inherit; text-decoration: none; transition: var(--transition); }


/* LAYOUT */
.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
}

.section {
    padding: var(--space-xl) 0;
    position: relative;
}
.pt-page {
    padding-top: calc(var(--space-xl) + 4rem); /* Account for navbar */
}
.section-muted { background-color: rgba(0,0,0,0.03); }
.section-dark { background-color: var(--color-ink); color: var(--color-paper); }
.section-dark h2 { color: var(--color-paper); }
.section-dark p { color: rgba(255, 255, 255, 0.8); }

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}
.align-center { align-items: center; }

.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 1.5rem 0;
    z-index: 1000;
    color: #FFFFFF;
    transition: background-color var(--transition), padding var(--transition), top 0.3s ease, color var(--transition);
}
.navbar.scrolled,
.navbar.navbar-solid {
    background-color: rgba(255, 255, 255, 0.95);
    background-color: color-mix(in srgb, var(--color-paper) 95%, transparent);
    backdrop-filter: blur(8px);
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink);
}
.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
}
.brand-wordmark {
    height: 32.5px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    margin-top: 2px;
    filter: brightness(0) invert(1);
    transition: filter var(--transition);
}
.nav-logo-anim {
    height: 56px;
    width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0) invert(1);
    transition: filter var(--transition);
}
.nav-logo-anim canvas {
    width: 100%;
    height: auto;
    display: block;
}
.navbar.scrolled .brand-wordmark,
.navbar.navbar-solid .brand-wordmark,
.navbar.scrolled .nav-logo-anim,
.navbar.navbar-solid .nav-logo-anim {
    filter: brightness(0);
}
.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 500;
}
.nav-links a { position: relative; }
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; width: 100%; height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}
.nav-cta {
    background-color: transparent;
    color: inherit;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    border: 1px solid currentColor;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
    background-color: var(--color-sage);
    border-color: var(--color-sage);
    color: #FFFFFF;
}
.menu-toggle {
    display: none;
    background: none; border: none; cursor: pointer; color: inherit;
}

/* HERO */
.hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--space-lg);
    color: var(--color-paper);
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-color: var(--color-sage);
}
.hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(20%) contrast(110%);
    opacity: 0.8;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.2) 100%);
}
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}
.hero-content {
    max-width: 800px;
}
.hero p { color: rgba(255, 255, 255, 0.9); font-size: 1.25rem; max-width: 600px; }
.hero h1 { color: #FFFFFF; }

/* Coming Soon hero: same full-bleed photo + gradient as the homepage
   hero, but the content sits in a frosted glass card so it stays
   legible over any part of the photo instead of just the darker
   bottom edge the gradient favors. */
.coming-soon-hero {
    position: relative;
    padding-top: calc(var(--space-xl) + 6rem);
    padding-bottom: var(--space-xl);
    overflow: hidden;
}
.coming-soon-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.coming-soon-card h1, .coming-soon-card h2 { color: #FFFFFF; }
.coming-soon-card .section-subtitle { color: rgba(255, 255, 255, 0.8); }
.coming-soon-card .text-block p { color: rgba(255, 255, 255, 0.85); }
.coming-soon-card .progress-labels span { color: rgba(255, 255, 255, 0.9); }

/* 404 PAGE */
.error-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
}
.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.about-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 520px;
}
.about-hero-text {
    padding: var(--space-xl) 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-hero-image-wrapper {
    width: 100%;
    display: flex;
}
.about-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.launch-badge {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
    transition: color var(--transition), border-color var(--transition);
}
.launch-badge:hover {
    color: var(--color-rust);
    border-color: var(--color-rust);
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 2rem;
    cursor: pointer;
    transition: var(--transition);
}
.btn-outline {
    border: 1px solid var(--color-ink);
    color: var(--color-ink);
}
.btn-outline:hover {
    background-color: var(--color-ink);
    color: var(--color-paper);
}
.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #FFFFFF;
}
.btn-outline-light:hover {
    background-color: #FFFFFF;
    color: var(--color-ink);
}
.btn-primary {
    background-color: var(--color-sage);
    color: var(--color-action-text);
    border: none;
}
.btn-primary:hover {
    background-color: var(--color-rust);
}
.btn-give {
    background-color: var(--color-sage);
    color: var(--color-action-text);
    border: none;
}
.btn-give:hover {
    background-color: var(--color-rust);
}

.gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* BLOCKS & CARDS */
.image-wrapper {
    position: relative;
    padding: 1rem;
}
.image-wrapper::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 2rem; left: 2rem;
    border: 1px solid var(--color-border);
    z-index: 0;
}
.framed-image {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    filter: grayscale(10%) contrast(105%);
}

.text-block p {
    font-size: 1.2rem;
}

/* ABOUT NAV: a sticky "jump to" row for the About page's stacked
   sections (JS highlights whichever section is in view). */
.about-nav-wrap {
    position: sticky;
    top: 88px;
    /* Sticky elements keep their natural flow position for layout
       purposes, even while rendered at `top`. Since nothing precedes
       this in flow (nav is fixed), its natural position is ~0 -- well
       above the 88px it actually renders at -- so without this margin,
       the sections below are laid out 88px too high and end up hidden
       behind the bar once it's visually pinned there. */
    margin-top: 88px;
    z-index: 100;
    background-color: color-mix(in srgb, var(--color-paper) 96%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.about-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0;
}
.about-nav::-webkit-scrollbar {
    display: none;
}
.about-nav-link {
    flex-shrink: 0;
    padding: 0.65rem 1.1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-ink-light);
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.about-nav-link:hover {
    color: var(--color-ink);
    background-color: var(--color-border);
}
.about-nav-link.is-active {
    color: var(--color-paper);
    background-color: var(--color-sage);
}

/* ABOUT SECTIONS: stacked on one page, each reachable from the nav
   above. scroll-margin keeps a section's heading clear of the fixed nav
   and the sticky About nav when jumped to. */
.about-section {
    padding: var(--space-lg) 0;
    scroll-margin-top: 9.5rem;
}
#why {
    padding: 0;
}

.about-coming-soon {
    max-width: 560px;
    margin: 1rem auto;
    text-align: center;
}
.about-coming-soon-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sage);
    background-color: color-mix(in srgb, var(--color-sage) 14%, transparent);
}
.about-coming-soon-badge {
    margin: 0 auto 1rem;
}
.about-coming-soon .section-title {
    margin-bottom: 1.25rem;
}

/* VALUES SECTION */
.section-header {
    max-width: 600px;
    margin: 0 auto 3rem;
}
.section-subtitle {
    font-size: 1.15rem;
}

/* VALUES & BELIEFS: How We Live This Out and Our Beliefs reuse the FAQ
   accordion (.faq-item). Each answer holds an optional theme label (the
   greenhouse metaphor: Soil, Light, Water...), the description, and
   scripture pills that link out to the passage on Bible.com (NIV). */
.faq-answer.value-answer p {
    margin-bottom: 1.25rem;
}
.value-theme {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-eyebrow);
}
.value-scripture-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.faq-answer a.value-scripture-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    background-color: color-mix(in srgb, var(--color-sage) 14%, transparent);
    color: var(--color-sage);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.faq-answer a.value-scripture-pill svg {
    flex-shrink: 0;
    opacity: 0.8;
}
.faq-answer a.value-scripture-pill:hover,
.faq-answer a.value-scripture-pill:focus-visible {
    background-color: var(--color-sage);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* GATHERINGS SECTION */
.gatherings-section {
    padding: var(--space-lg) 0 3rem;
}
.gatherings-header {
    margin-bottom: 3rem;
}

.gatherings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-top: 0.5rem;
}
.gathering-card {
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-eyebrow);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    padding: 3rem 2.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.gathering-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: var(--color-ink-light);
    border-top-color: var(--color-rust);
}
/* Three across when there's room; otherwise stacked, so a lone card never
   gets stranded on a second row. */
@media (max-width: 960px) {
    .gatherings-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}
/* No hover on touch (or on a phone-width window), so the (i)/close icons
   only need to exist there. */
@media (hover: none), (max-width: 768px) {
    .gathering-info-toggle,
    .gathering-info-close {
        display: flex;
    }
}
.gathering-date {
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.gathering-date svg {
    color: var(--color-ink-light);
}
.gathering-card h3 {
    font-size: 1.75rem;
    color: var(--color-ink);
    margin-bottom: 0.75rem;
}
.gathering-location {
    font-size: 1rem;
    color: var(--color-ink-light);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}
.gathering-desc {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-ink);
    opacity: 0.8;
    margin-bottom: 0;
    font-weight: 400;
}
.gathering-contact-detail {
    display: block;
    font-size: 0.9rem;
    color: var(--color-ink-light);
    text-decoration: none;
    white-space: nowrap;
    margin-top: 0.4rem;
}
.gathering-contact-detail:hover {
    text-decoration: underline;
}
.gathering-action {
    margin-top: auto;
    padding-top: 2rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: gap 0.3s ease;
}
.gathering-card:hover .gathering-action {
    gap: 0.75rem;
}

/* Gathering card with a photo background */
.gathering-card--photo {
    position: relative;
    overflow: hidden;
    border-color: transparent;
    border-top-color: var(--color-eyebrow);
    justify-content: flex-end;
    min-height: 420px;
}
.gathering-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 25%;
    filter: grayscale(10%) contrast(105%) brightness(0.85);
    transition: transform 0.6s ease;
    z-index: 0;
}
.gathering-card--photo:hover .gathering-card-bg {
    transform: scale(1.05);
}
.gathering-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 15, 15, 0.9) 0%, rgba(15, 15, 15, 0.6) 45%, rgba(15, 15, 15, 0.15) 100%);
    z-index: 0;
}
.gathering-card--photo > *:not(.gathering-card-bg):not(.gathering-card-overlay):not(.gathering-info-toggle):not(.gathering-info-panel) {
    position: relative;
    z-index: 1;
}
.gathering-card--photo .gathering-date,
.gathering-card--photo h3 {
    color: #FFFFFF;
}
.gathering-card--photo .gathering-date svg,
.gathering-card--photo .gathering-location svg {
    color: rgba(255, 255, 255, 0.8);
}
.gathering-card--photo .gathering-location,
.gathering-card--photo .gathering-desc {
    color: rgba(255, 255, 255, 0.9);
}
.gathering-card--photo .gathering-contact span {
    border-bottom-color: rgba(255, 255, 255, 0.5);
}
.gathering-card--photo .gathering-contact-detail {
    color: rgba(255, 255, 255, 0.75);
}

/* Gathering info toggle + panel: tap/hover the (i) for extra detail
   without cluttering the card by default. */
.gathering-info-toggle {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.gathering-card.info-open .gathering-info-toggle {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.08);
}
@media (hover: hover) {
    .gathering-card:hover .gathering-info-toggle {
        background: rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 255, 255, 0.9);
        transform: scale(1.08);
    }
}

.gathering-info-panel {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.25rem;
    background: rgba(12, 12, 12, 0.96);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.gathering-card.info-open .gathering-info-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
@media (hover: hover) {
    .gathering-card:hover .gathering-info-panel {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}
.gathering-info-panel p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}
.gathering-info-panel .gathering-info-address {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: -0.75rem;
}
.gathering-info-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.25s ease;
}
.gathering-info-close:hover {
    background: rgba(255, 255, 255, 0.15);
}
.gathering-info-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: var(--color-paper);
    color: var(--color-ink);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease;
}
.gathering-info-link:hover {
    transform: translateY(-2px);
    background-color: #FFFFFF;
}

/* SERVE TAGS */
.serve-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-sage);
    background-color: color-mix(in srgb, var(--color-sage) 8%, transparent);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.serve-tag:hover,
.serve-tag:focus-visible {
    background-color: color-mix(in srgb, var(--color-sage) 18%, transparent);
    transform: translateY(-2px);
}
.serve-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-sage);
}

/* FAQ */
.faq-list {
    max-width: 700px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-ink);
    cursor: pointer;
    list-style: none;
}
.faq-question::-webkit-details-marker {
    display: none;
}
.faq-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-border);
    color: var(--color-ink);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.faq-item[open] .faq-icon {
    transform: rotate(45deg);
    background-color: var(--color-sage);
    color: #FFFFFF;
}
/* An item animating shut is still [open] until the animation ends, so put
   its icon back right away instead of at the end. */
.faq-item.is-closing .faq-icon {
    transform: none;
    background-color: var(--color-border);
    color: var(--color-ink);
}
@media (hover: hover) {
    .faq-question {
        transition: color 0.25s ease;
    }
    .faq-question:hover {
        color: var(--color-sage);
    }
    .faq-item:not([open]) .faq-question:hover .faq-icon {
        background-color: color-mix(in srgb, var(--color-sage) 20%, var(--color-border));
    }
}
.faq-answer {
    padding: 0 0 1.5rem;
}
.faq-answer p {
    max-width: 620px;
    margin-bottom: 0;
}
.faq-answer a {
    color: var(--color-sage);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* SERVE PAGES: serve.html reuses the FAQ accordion's look for its list
   of teams, but each answer holds a button, so it gets its own answer
   class -- .faq-answer a would otherwise restyle the button as a plain
   underlined sage link. serve-kids/serve-safety are the background
   check step shown before those two teams' application forms. */
.hero.hero-short {
    min-height: 60vh;
}
.hero-short .hero-content {
    max-width: 700px;
}
/* The worship band fills the top third of this photo, so anchor the crop
   to the top. The hero's default centered crop would, on a wide and
   short hero, cut their heads off. The 70% horizontal position keeps the
   lead guitarist, singer, and acoustic guitarist in frame when a narrow
   phone screen can only show a slice of the width (it has no effect on
   wider screens, where the whole width already fits). */
.hero-serve .hero-bg img {
    object-position: 70% top;
}
.serve-section {
    padding: var(--space-lg) 0 var(--space-xl);
}
.serve-list {
    max-width: 760px;
}
.serve-list .faq-item {
    scroll-margin-top: 7rem;
}
.serve-answer {
    padding: 0 0 2rem;
}
.serve-answer p {
    max-width: 620px;
    margin-bottom: 1.25rem;
}
.serve-answer .serve-note {
    margin: 0.85rem 0 0;
    font-size: 0.85rem;
    color: var(--color-ink-light);
}
.serve-step {
    padding: var(--space-lg) 0 var(--space-xl);
}
.serve-detail {
    max-width: 720px;
    margin: 0 auto;
}
.serve-detail h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.serve-callout {
    margin: 2.5rem 0;
    padding: 2rem 2.25rem;
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-sage);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.serve-callout h3 {
    margin-bottom: 0.75rem;
}
.serve-callout a:not(.btn) {
    color: var(--color-sage);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.serve-callout .btn {
    margin-top: 0.5rem;
}
.serve-back {
    display: inline-block;
    font-size: 0.95rem;
    color: var(--color-ink-light);
}
.serve-back:hover {
    color: var(--color-sage);
}

/* PASTORS SECTION: click-to-expand cards. Collapsed, each card shows
   just a face-cropped circle, name, and title (same minimal look as
   the council grid below). Clicking grows the circle into a full
   photo -- of them with their spouse, or a bigger solo portrait if
   unmarried -- while the same click reveals their bio underneath.
   Only one card is open at a time. */
/* Edge fades hint there's more to scroll to, same idea as the
   a scroll hint -- JS adds is-scrollable and toggles
   is-grid-at-start/-end on the wrap as the row scrolls, so a fade only
   shows on the side that actually has more people off-screen. Masking
   the row's own edges (rather than overlaying a solid-to-transparent
   gradient on top of it) fades the
   actual avatars and text underneath, which reads more clearly than a
   painted-on overlay -- and sidesteps a real risk with the overlay
   approach: -webkit-overflow-scrolling: touch below can put the
   scrolling row in its own compositing layer in Safari, which has a
   history of then ignoring z-index and painting over a sibling overlay
   regardless of stacking order. */
.pastors-grid-wrap.is-scrollable:not(.is-grid-at-start) .pastors-grid {
    -webkit-mask-image: linear-gradient(to right, transparent, black 3rem);
    mask-image: linear-gradient(to right, transparent, black 3rem);
}
.pastors-grid-wrap.is-scrollable:not(.is-grid-at-end) .pastors-grid {
    -webkit-mask-image: linear-gradient(to left, transparent, black 3rem);
    mask-image: linear-gradient(to left, transparent, black 3rem);
}
.pastors-grid-wrap.is-scrollable:not(.is-grid-at-start):not(.is-grid-at-end) .pastors-grid {
    -webkit-mask-image: linear-gradient(to right, transparent, black 3rem, black calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 3rem, black calc(100% - 3rem), transparent);
}
.pastors-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    justify-content: safe center;
    align-items: flex-start;
    gap: 3rem 3.5rem;
    max-width: 1100px;
    margin: 3.5rem auto 0;
    padding-bottom: 0.5rem;
}
.pastors-grid::-webkit-scrollbar {
    display: none;
}
/* While a card is open, switch to wrapping so its full-width expand
   pushes the others onto their own row(s) below, instead of trying to
   fit a full-width item into a horizontal-scroll strip. */
.pastors-grid.has-open {
    flex-wrap: wrap;
    overflow-x: visible;
}
.pastor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 220px;
    scroll-snap-align: center;
}
.pastor-card.is-open {
    flex-basis: 100%;
    /* Flex items default to a minimum width of their content's
       natural size, no matter how small flex-shrink lets them go --
       and with the avatar below fixed at 560px wide, that natural
       size is 560px too. On any screen narrower than that (any phone),
       the card held itself to 560px and overflowed instead of
       shrinking to fit. This lets it actually shrink to the row's real
       width, which is what makes max-width: 100% below able to cap the
       avatar to it in turn. */
    min-width: 0;
    order: -1;
}
.pastor-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    cursor: pointer;
    text-align: center;
}
.pastor-toggle:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 6px;
    border-radius: 8px;
}
.pastor-avatar {
    position: relative;
    width: 140px;
    max-width: 100%;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid var(--color-paper);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    background-color: var(--color-border);
    transition: width 0.5s ease, height 0.5s ease, border-radius 0.5s ease;
}
.pastor-card.is-open .pastor-avatar {
    width: 560px;
    /* height: auto is required here, not just implied -- the base
       .pastor-avatar rule above sets an explicit height: 140px, and
       aspect-ratio only fills in a dimension that's otherwise auto. Left
       unset, that 140px stayed in effect over a 560px-wide box (a 4:1
       squash instead of the intended 1.87:1), cropping off far more of
       the photo's height than intended and cutting off the tops of
       people's heads. aspect-ratio instead of a fixed height means that
       when max-width caps the rendered width on a narrow screen, the
       height scales down to match instead of leaving a fixed 300px-tall
       box (which would either overflow on its own or, once shrunk, no
       longer match the photo's actual crop). It also keeps recalculating
       every frame as width transitions, so the grow/shrink still reads
       as one smooth motion without an explicit height transition. */
    height: auto;
    aspect-ratio: 560 / 300;
    border-radius: 16px;
}
.pastor-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}
.pastor-avatar-full {
    opacity: 0;
}
.pastor-card.is-open .pastor-avatar-face {
    opacity: 0;
}
.pastor-card.is-open .pastor-avatar-full {
    opacity: 1;
}
.pastor-name {
    margin: 0;
    font-size: 1.15rem;
}
.pastor-title {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}
.pastor-bio {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    width: 100%;
    max-width: 560px;
    transition: grid-template-rows 0.5s ease, opacity 0.4s ease;
}
.pastor-card.is-open .pastor-bio {
    grid-template-rows: 1fr;
    opacity: 1;
}
.pastor-bio-inner {
    overflow: hidden;
}
.pastor-bio-inner p {
    margin-top: 1.5rem;
    margin-bottom: 0;
    color: var(--color-ink-light);
    font-size: 1.05rem;
    font-weight: 400;
    text-align: left;
}
.pastor-bio-inner p + p {
    margin-top: 1rem;
}
@media (prefers-reduced-motion: reduce) {
    .pastor-avatar, .pastor-avatar-img, .pastor-bio {
        transition: none !important;
    }
}

/* INFO CARD (Visit) */
.info-card {
    background-color: var(--color-paper);
    border: 1px solid var(--color-border);
    padding: 3rem;
}
.info-list {
    list-style: none;
    margin: 2rem 0;
}
.info-list li {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}
.info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-eyebrow);
    margin-bottom: 0.25rem;
}
.info-value {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-ink);
}
.info-note {
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 0;
}

/* SUBSCRIBE FORM */
.subscribe-form {
    max-width: 600px;
    margin: 2.5rem auto 0;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.subscribe-form input {
    width: 100%;
    padding: 1rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-paper);
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: 4px;
    transition: var(--transition);
}
.subscribe-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.subscribe-form input:focus {
    outline: none;
    border-color: var(--color-paper);
}
.form-message {
    margin-top: 1rem;
    font-size: 0.9rem;
    min-height: 1.5rem;
}
.form-message.form-message-error {
    color: #FF9C89;
}
.subscribe-success {
    max-width: 600px;
    margin: 2.5rem auto 0;
    text-align: center;
}
.subscribe-success-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-sage) 30%, transparent);
    color: var(--color-sage);
    display: flex;
    align-items: center;
    justify-content: center;
}
.subscribe-success h3 {
    color: var(--color-paper);
    margin-bottom: 0.75rem;
}
.subscribe-success p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

/* FOOTER */
.footer {
    background-color: var(--color-ink);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-md) 0 2rem;
}
.footer p {
    color: inherit;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}
.footer .brand {
    color: var(--color-paper);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.footer-heading {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer-links a {
    color: inherit;
    font-size: 1rem;
}
.footer-links a:hover {
    color: var(--color-paper);
}
/* RESPONSIVE */
@media (min-width: 600px) {
    .subscribe-form .form-group {
        flex-direction: row;
    }
    .subscribe-form input { flex: 1; }
    .subscribe-form .btn { flex-shrink: 0; }
}

@media (max-width: 900px) {
    .grid-2-col { grid-template-columns: 1fr; }
    .about-hero { grid-template-columns: 1fr; }
    .about-hero-image-wrapper { min-height: 400px; }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
    .footer-brand { grid-column: 1 / -1; margin-bottom: 1rem; }
    
    .pastor-img {
        left: 1.5rem;
        width: 100px;
        height: 100px;
        top: -3rem;
    }
}

@media (max-width: 768px) {
    :root {
        --space-md: 2rem;
        --space-lg: 3rem;
        --space-xl: 4rem;
    }
    
    .navbar.nav-open {
        background-color: var(--color-paper);
        color: var(--color-ink);
    }
    .navbar.nav-open .brand-wordmark,
    .navbar.nav-open .nav-logo-anim {
        filter: brightness(0);
    }
    .navbar:not(.nav-open) .nav-links {
        display: none;
    }
    .navbar.nav-open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        padding: 4rem 2rem;
        align-items: center;
        font-size: 1.5rem;
        gap: 2.5rem;
        background-color: var(--color-paper);
        overflow-y: auto;
    }
    
    .menu-toggle { display: block; z-index: 1001; position: relative; }
    
    .gathering-card { padding: 2rem 1.5rem; }
    
    .hero { min-height: 80vh; padding-bottom: 4rem; }
    .hero p { font-size: 1.15rem; }
    .coming-soon-hero { padding-top: calc(var(--space-lg) + 4rem); padding-bottom: var(--space-lg); }
    .coming-soon-card { padding: 2.25rem 1.5rem; border-radius: 18px; }
    .about-hero-text { padding: var(--space-xl) 1.5rem; }
    .image-wrapper::before { bottom: 1rem; left: 1rem; }

    .about-nav { justify-content: flex-start; gap: 0.25rem; }
    .about-nav-link { padding: 0.5rem 0.65rem; font-size: 0.82rem; }
    .about-section { padding: var(--space-md) 0 3.5rem; }
    
    /* The default gap/max-width above is sized for a handful of people
       comfortably fitting a wide row; on mobile that left barely a
       sliver of the next person peeking in, reading as a single card
       rather than a scrollable row. Bleeding the row to the screen
       edges and tightening the gap
       keeps at least one neighbor clearly in view alongside whoever's
       centered. */
    .pastors-grid {
        gap: 2rem 1.25rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 7.5vw;
        padding-right: 7.5vw;
    }
    .pastor-card {
        flex: 0 0 155px;
    }
}

@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-brand { margin-bottom: 0; }
    .about-hero-image-wrapper { min-height: 300px; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Progress Bar */
.progress-container .progress-fill {
    width: 0;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s;
}
.progress-container.is-visible .progress-fill {
    width: var(--progress-target, 0%);
}

/* MOTION / REVEALS */
/* Visible by default so content never depends on JS running to appear --
   the hidden/fade-in state only kicks in once app.js confirms it's
   actually executing by adding "js" to <html> (see the inline script
   in <head>). */
.reveal {
    opacity: 1;
    transform: none;
}
.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.stagger-1 { transition-delay: 0.15s; }
.stagger-2 { transition-delay: 0.3s; }
.stagger-3 { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { transition: none !important; opacity: 1; transform: none; }
}