/* ROOT VARIABLES & RESET */
:root {
    /* Color Palette */
    --color-paper: #FFFFFF;
    --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-paper);
    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); }

/* TEXTURE */
.texture-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.4;
    mix-blend-mode: multiply;
}

/* 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; }

.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;
    background-color: var(--color-paper);
}
.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-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-rust);
    color: var(--color-action-text);
    border: none;
}
.btn-give:hover {
    background-color: var(--color-rust-dark);
}

.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 TABS */
.about-tabs-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,
       panel content below is laid out 88px too high and ends 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-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0;
}
.about-tabs::-webkit-scrollbar {
    display: none;
}
.about-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border: none;
    background: none;
    border-radius: 2rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-ink-light);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.about-tab:hover {
    color: var(--color-ink);
    background-color: var(--color-border);
}
.about-tab.is-active {
    color: var(--color-paper);
    background-color: var(--color-sage);
}
.about-tab-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background-color: color-mix(in srgb, var(--color-rust) 15%, transparent);
    color: var(--color-rust);
}
.about-tab.is-active .about-tab-badge {
    background-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

/* ABOUT PANELS */
.about-panel {
    padding: 3.5rem 0 var(--space-xl);
}
.about-panel:focus {
    outline: none;
}
.about-panel-intro {
    max-width: 620px;
    margin: 0 auto 3rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-ink-light);
}

.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-carousel-wrapper {
    position: relative;
    width: 100%;
}
.values-carousel-wrapper::before,
.values-carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.values-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-muted), transparent);
}
.values-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-muted), transparent);
}

.values-grid {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding: 1rem 1.5rem 3rem 1.5rem;
    margin: 0 -1.5rem; /* Bleed to edges on mobile */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.values-grid::-webkit-scrollbar {
    display: none;
}
.value-card {
    flex: 0 0 calc(100vw - 3rem);
    max-width: 380px;
    scroll-snap-align: center;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    background-color: color-mix(in srgb, var(--value-accent, var(--color-eyebrow)) 5%, var(--color-paper));
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}
.value-card:hover,
.value-card.is-active {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}
.value-card.value-soil { --value-accent: #8B6A47; border-color: rgba(139, 106, 71, 0.3); box-shadow: 0 12px 32px rgba(139, 106, 71, 0.15); border-top: 4px solid #8B6A47; }
.value-card.value-soil:hover { border-color: #8B6A47; box-shadow: 0 16px 40px rgba(139, 106, 71, 0.25); }

.value-card.value-light { --value-accent: #B8843A; border-color: rgba(212, 163, 91, 0.3); box-shadow: 0 12px 32px rgba(212, 163, 91, 0.15); border-top: 4px solid #D4A35B; }
.value-card.value-light:hover { border-color: #D4A35B; box-shadow: 0 16px 40px rgba(212, 163, 91, 0.25); }

.value-card.value-water { --value-accent: #5B8A9E; border-color: rgba(91, 138, 158, 0.3); box-shadow: 0 12px 32px rgba(91, 138, 158, 0.15); border-top: 4px solid #5B8A9E; }
.value-card.value-water:hover { border-color: #5B8A9E; box-shadow: 0 16px 40px rgba(91, 138, 158, 0.25); }

.value-card.value-shared-space { --value-accent: #C27357; border-color: rgba(194, 115, 87, 0.3); box-shadow: 0 12px 32px rgba(194, 115, 87, 0.15); border-top: 4px solid #C27357; }
.value-card.value-shared-space:hover { border-color: #C27357; box-shadow: 0 16px 40px rgba(194, 115, 87, 0.25); }

.value-card.value-seasons { --value-accent: #6B8E7B; border-color: rgba(107, 142, 123, 0.3); box-shadow: 0 12px 32px rgba(107, 142, 123, 0.15); border-top: 4px solid #6B8E7B; }
.value-card.value-seasons:hover { border-color: #6B8E7B; box-shadow: 0 16px 40px rgba(107, 142, 123, 0.25); }

.value-card.value-pruning { --value-accent: #8E7281; border-color: rgba(142, 114, 129, 0.3); box-shadow: 0 12px 32px rgba(142, 114, 129, 0.15); border-top: 4px solid #8E7281; }
.value-card.value-pruning:hover { border-color: #8E7281; box-shadow: 0 16px 40px rgba(142, 114, 129, 0.25); }

.value-card.value-fruit { --value-accent: #B85C57; border-color: rgba(184, 92, 87, 0.3); box-shadow: 0 12px 32px rgba(184, 92, 87, 0.15); border-top: 4px solid #B85C57; }
.value-card.value-fruit:hover { border-color: #B85C57; box-shadow: 0 16px 40px rgba(184, 92, 87, 0.25); }
.value-icon {
    width: 64px; height: 64px;
    color: var(--value-accent, var(--color-eyebrow));
    background-color: color-mix(in srgb, var(--value-accent, var(--color-eyebrow)) 14%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    transition: transform var(--transition), background-color var(--transition);
}
.value-icon svg {
    width: 32px;
    height: 32px;
    display: block;
    transition: all 0.5s ease;
}
.value-card:hover .value-icon,
.value-card.is-active .value-icon {
    background-color: color-mix(in srgb, var(--value-accent, var(--color-eyebrow)) 22%, transparent);
    transform: scale(1.05);
}

/* Icon Animations */
/* Light: Sun spins slowly, disc fills in on hover */
.icon-light svg {
    animation: spin-slow 20s linear infinite;
}
.value-card:hover .icon-light svg,
.value-card.is-active .icon-light svg {
    animation: spin-fast 2s linear infinite;
}
.icon-light svg circle {
    transition: fill 0.4s ease;
    fill: transparent;
}
.value-card:hover .icon-light svg circle,
.value-card.is-active .icon-light svg circle {
    fill: currentColor;
}
@keyframes spin-slow {
    100% { transform: rotate(360deg); }
}
@keyframes spin-fast {
    100% { transform: rotate(360deg); }
}

/* Soil: Roots growing on hover */
.icon-soil svg .root-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}
.value-card:hover .icon-soil svg .root-path,
.value-card.is-active .icon-soil svg .root-path {
    animation: grow-roots 3.5s ease-out forwards;
}
@keyframes grow-roots {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

/* Water: Fill blue and float on hover */
.icon-water svg {
    transform-origin: bottom center;
}
.icon-water svg path {
    transition: fill 0.6s ease;
    fill: transparent;
}
.value-card:hover .icon-water svg,
.value-card.is-active .icon-water svg {
    animation: float-water 1.5s ease-in-out infinite;
}
.value-card:hover .icon-water svg path,
.value-card.is-active .icon-water svg path {
    fill: currentColor;
}
@keyframes float-water {
    0%, 100% { transform: scaleY(1) translateY(0); }
    50% { transform: scaleY(0.9) translateY(-4px); }
}

/* Shared Space: Back person emerging */
.icon-shared-space svg .back-person {
    transform: translateX(-12px) scale(0.8);
    opacity: 0;
    transform-origin: center;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.value-card:hover .icon-shared-space svg .back-person,
.value-card.is-active .icon-shared-space svg .back-person {
    transform: translateX(0) scale(1);
    opacity: 1;
}

/* Seasons: Clock hands advancing several times */
.icon-seasons svg polyline {
    transform-origin: 12px 12px;
    transition: transform 2.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.value-card:hover .icon-seasons svg polyline,
.value-card.is-active .icon-seasons svg polyline {
    transform: rotate(1080deg);
}

/* Pruning: Scissor blades opening and closing */
.icon-pruning svg .scissor-top-blade,
.icon-pruning svg .scissor-bottom-blade {
    transform-origin: 12px 12px;
}
.value-card:hover .icon-pruning svg .scissor-top-blade,
.value-card.is-active .icon-pruning svg .scissor-top-blade {
    animation: snip-top 1.2s ease-in-out;
}
.value-card:hover .icon-pruning svg .scissor-bottom-blade,
.value-card.is-active .icon-pruning svg .scissor-bottom-blade {
    animation: snip-bottom 1.2s ease-in-out;
}
@keyframes snip-top {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(15deg); }
    40%, 80% { transform: rotate(-5deg); }
}
@keyframes snip-bottom {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(-15deg); }
    40%, 80% { transform: rotate(5deg); }
}

/* Fruit: Apple swinging on branch and filling in */
.icon-fruit svg {
    transform-origin: center top;
}
.icon-fruit svg .apple-body {
    transition: fill 0.6s ease;
    fill: transparent;
}
.value-card:hover .icon-fruit svg,
.value-card.is-active .icon-fruit svg {
    animation: swing-fruit 2s ease-in-out;
}
.value-card:hover .icon-fruit svg .apple-body,
.value-card.is-active .icon-fruit svg .apple-body {
    fill: currentColor;
}
@keyframes swing-fruit {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-2deg); }
}

.value-theme {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--value-accent, var(--color-eyebrow));
    margin-bottom: 0.5rem;
}
.value-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.value-desc {
    font-size: 1rem;
    margin: 0;
    flex-grow: 1;
}

/* Scripture: a pill that links out to the passage on Bible.com (NIV) */
.value-scripture-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 2rem;
    padding: 0.5rem 0.9rem;
    border-radius: 2rem;
    background-color: color-mix(in srgb, var(--value-accent, var(--color-eyebrow)) 14%, transparent);
    color: var(--value-accent, var(--color-eyebrow));
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.value-scripture-pill svg {
    flex-shrink: 0;
    opacity: 0.8;
}
.value-card:hover .value-scripture-pill,
.value-card.is-active .value-scripture-pill,
.value-scripture-pill:hover {
    background-color: var(--value-accent, var(--color-eyebrow));
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Beliefs: same card family as values, but with several reference
   pills, full text (no clamping), and their own accent palette. Cards
   size to their own content instead of stretching to match the
   tallest, since belief statements vary a lot in length. */
.beliefs-grid {
    align-items: flex-start;
}
.belief-card {
    max-width: 420px;
}
.value-scripture-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
}
.value-scripture-pills .value-scripture-pill {
    margin-top: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
}

.value-card.belief-scripture { --value-accent: #A9762F; border-color: rgba(169, 118, 47, 0.3); box-shadow: 0 12px 32px rgba(169, 118, 47, 0.15); border-top: 4px solid #A9762F; }
.value-card.belief-scripture:hover { border-color: #A9762F; box-shadow: 0 16px 40px rgba(169, 118, 47, 0.25); }

.value-card.belief-trinity { --value-accent: #4A5B8C; border-color: rgba(74, 91, 140, 0.3); box-shadow: 0 12px 32px rgba(74, 91, 140, 0.15); border-top: 4px solid #4A5B8C; }
.value-card.belief-trinity:hover { border-color: #4A5B8C; box-shadow: 0 16px 40px rgba(74, 91, 140, 0.25); }

.value-card.belief-christ { --value-accent: #8C3B47; border-color: rgba(140, 59, 71, 0.3); box-shadow: 0 12px 32px rgba(140, 59, 71, 0.15); border-top: 4px solid #8C3B47; }
.value-card.belief-christ:hover { border-color: #8C3B47; box-shadow: 0 16px 40px rgba(140, 59, 71, 0.25); }

.value-card.belief-humanity { --value-accent: #B0674A; border-color: rgba(176, 103, 74, 0.3); box-shadow: 0 12px 32px rgba(176, 103, 74, 0.15); border-top: 4px solid #B0674A; }
.value-card.belief-humanity:hover { border-color: #B0674A; box-shadow: 0 16px 40px rgba(176, 103, 74, 0.25); }

.value-card.belief-salvation { --value-accent: #A14B4B; border-color: rgba(161, 75, 75, 0.3); box-shadow: 0 12px 32px rgba(161, 75, 75, 0.15); border-top: 4px solid #A14B4B; }
.value-card.belief-salvation:hover { border-color: #A14B4B; box-shadow: 0 16px 40px rgba(161, 75, 75, 0.25); }

.value-card.belief-spirit { --value-accent: #5B7C99; border-color: rgba(91, 124, 153, 0.3); box-shadow: 0 12px 32px rgba(91, 124, 153, 0.15); border-top: 4px solid #5B7C99; }
.value-card.belief-spirit:hover { border-color: #5B7C99; box-shadow: 0 16px 40px rgba(91, 124, 153, 0.25); }

.value-card.belief-hope { --value-accent: #C97B4A; border-color: rgba(201, 123, 74, 0.3); box-shadow: 0 12px 32px rgba(201, 123, 74, 0.15); border-top: 4px solid #C97B4A; }
.value-card.belief-hope:hover { border-color: #C97B4A; box-shadow: 0 16px 40px rgba(201, 123, 74, 0.25); }

.value-card.belief-church { --value-accent: #5F7A5E; border-color: rgba(95, 122, 94, 0.3); box-shadow: 0 12px 32px rgba(95, 122, 94, 0.15); border-top: 4px solid #5F7A5E; }
.value-card.belief-church:hover { border-color: #5F7A5E; box-shadow: 0 16px 40px rgba(95, 122, 94, 0.25); }

/* Belief icon animations */

/* Bible: text lines form (draw in) on both pages */
.belief-icon-scripture svg .belief-line {
    stroke-dasharray: 5;
    stroke-dashoffset: 5;
    transition: stroke-dashoffset 0.4s ease;
}
.value-card:hover .belief-icon-scripture svg .belief-line,
.value-card.is-active .belief-icon-scripture svg .belief-line {
    stroke-dashoffset: 0;
}
.belief-icon-scripture svg .belief-line:nth-of-type(1) { transition-delay: 0s; }
.belief-icon-scripture svg .belief-line:nth-of-type(2) { transition-delay: 0.06s; }
.belief-icon-scripture svg .belief-line:nth-of-type(3) { transition-delay: 0.12s; }
.belief-icon-scripture svg .belief-line:nth-of-type(4) { transition-delay: 0.18s; }
.belief-icon-scripture svg .belief-line:nth-of-type(5) { transition-delay: 0.24s; }
.belief-icon-scripture svg .belief-line:nth-of-type(6) { transition-delay: 0.3s; }

/* Trinity: three circles fill in, staggered */
.belief-icon-trinity svg .belief-tri {
    fill: transparent;
    transition: fill 0.4s ease;
}
.value-card:hover .belief-icon-trinity svg .belief-tri-a,
.value-card.is-active .belief-icon-trinity svg .belief-tri-a { transition-delay: 0s; fill: currentColor; fill-opacity: 0.35; }
.value-card:hover .belief-icon-trinity svg .belief-tri-b,
.value-card.is-active .belief-icon-trinity svg .belief-tri-b { transition-delay: 0.12s; fill: currentColor; fill-opacity: 0.35; }
.value-card:hover .belief-icon-trinity svg .belief-tri-c,
.value-card.is-active .belief-icon-trinity svg .belief-tri-c { transition-delay: 0.24s; fill: currentColor; fill-opacity: 0.35; }

/* Jesus Christ: light rays appear around the cross */
.belief-icon-christ svg .belief-ray {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: scale(0.8);
}
.value-card:hover .belief-icon-christ svg .belief-ray,
.value-card.is-active .belief-icon-christ svg .belief-ray {
    opacity: 1;
    transform: scale(1);
}

/* Who We Are: the surrounding circle draws in, like being formed */
.belief-icon-humanity svg .belief-formed {
    stroke-dasharray: 60;
    stroke-dashoffset: 0;
}
.value-card:hover .belief-icon-humanity svg .belief-formed,
.value-card.is-active .belief-icon-humanity svg .belief-formed {
    animation: belief-draw 2.5s ease-out forwards;
}
@keyframes belief-draw {
    0% { stroke-dashoffset: 60; }
    100% { stroke-dashoffset: 0; }
}

/* Salvation: the chain holds taut, snaps at the center link, and its two
   halves swing apart and settle open -- bound, then broken, then free. */
.belief-icon-salvation svg .belief-chain-group-left,
.belief-icon-salvation svg .belief-chain-group-right {
    transform-origin: 12px 12px;
}
.belief-icon-salvation svg .belief-chain-spark {
    opacity: 0;
    transform-origin: 12px 12px;
}
.value-card:hover .belief-icon-salvation svg .belief-chain-group-left,
.value-card.is-active .belief-icon-salvation svg .belief-chain-group-left {
    animation: belief-chain-break-left 1.8s ease-out forwards;
}
.value-card:hover .belief-icon-salvation svg .belief-chain-group-right,
.value-card.is-active .belief-icon-salvation svg .belief-chain-group-right {
    animation: belief-chain-break-right 1.8s ease-out forwards;
}
.value-card:hover .belief-icon-salvation svg .belief-chain-spark,
.value-card.is-active .belief-icon-salvation svg .belief-chain-spark {
    animation: belief-chain-spark-pop 1.8s ease-out forwards;
}
@keyframes belief-chain-break-left {
    0%, 22% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(-0.4px, 0.3px) rotate(-6deg); }
    48% { transform: translate(-2px, 1.4px) rotate(-20deg); }
    62% { transform: translate(-1.5px, 1.7px) rotate(-14deg); }
    82% { transform: translate(-1.8px, 1.9px) rotate(-17deg); }
    100% { transform: translate(-1.7px, 1.8px) rotate(-16deg); }
}
@keyframes belief-chain-break-right {
    0%, 22% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(0.4px, 0.3px) rotate(6deg); }
    48% { transform: translate(2px, 1.4px) rotate(20deg); }
    62% { transform: translate(1.5px, 1.7px) rotate(14deg); }
    82% { transform: translate(1.8px, 1.9px) rotate(17deg); }
    100% { transform: translate(1.7px, 1.8px) rotate(16deg); }
}
@keyframes belief-chain-spark-pop {
    0%, 24% { opacity: 0; transform: scale(0.4); }
    29% { opacity: 0.6; transform: scale(1.6); }
    40% { opacity: 0; transform: scale(2.2); }
    100% { opacity: 0; transform: scale(2.2); }
}

/* Holy Spirit: a flame fills in and flickers/ripples */
.belief-icon-spirit svg .belief-flame {
    fill: transparent;
    transition: fill 0.5s ease;
    transform-origin: 50% 95%;
}
.value-card:hover .belief-icon-spirit svg .belief-flame,
.value-card.is-active .belief-icon-spirit svg .belief-flame {
    fill: currentColor;
    animation: belief-flame-ripple 1.3s ease-in-out infinite;
}
@keyframes belief-flame-ripple {
    0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); }
    30% { transform: scaleY(1.08) scaleX(0.95) rotate(-3deg); }
    65% { transform: scaleY(0.95) scaleX(1.05) rotate(3deg); }
}

/* Our Future Hope: the sun fills in and its rays extend */
.belief-icon-hope svg .belief-sun {
    fill: transparent;
    transition: fill 0.5s ease;
}
.value-card:hover .belief-icon-hope svg .belief-sun,
.value-card.is-active .belief-icon-hope svg .belief-sun {
    fill: currentColor;
    fill-opacity: 0.85;
}
.belief-icon-hope svg .belief-ray {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.value-card:hover .belief-icon-hope svg .belief-ray,
.value-card.is-active .belief-icon-hope svg .belief-ray {
    opacity: 1;
    transform: translateY(0);
}

/* The Church: the door fills in, welcoming */
.belief-icon-church svg .belief-door {
    fill: transparent;
    transition: fill 0.4s ease;
}
.value-card:hover .belief-icon-church svg .belief-door,
.value-card.is-active .belief-icon-church svg .belief-door {
    fill: currentColor;
    fill-opacity: 0.3;
}

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

.gatherings-carousel-wrapper {
    position: relative;
    width: 100%;
}
.gatherings-carousel-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: -5vw; bottom: 0; width: 10vw;
    background: linear-gradient(to right, var(--color-muted), transparent);
    pointer-events: none;
    z-index: 5;
}
.gatherings-carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: -5vw; bottom: 0; width: 10vw;
    background: linear-gradient(to left, var(--color-muted), transparent);
    pointer-events: none;
    z-index: 5;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    z-index: 10;
}
.carousel-btn:hover {
    background: var(--color-ink);
    color: var(--color-paper);
    border-color: var(--color-ink);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
    transform: translateY(-50%) scale(1.05);
}
.carousel-btn.prev-btn, .carousel-btn.prev-btn-values { left: 1rem; }
.carousel-btn.next-btn, .carousel-btn.next-btn-values { right: 1rem; }

.gatherings-scroll {
    display: flex;
    gap: 2.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-top: 2rem;
    margin-top: -2rem;
    padding-bottom: 3rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -5vw;
    padding-left: 5vw;
    margin-right: -5vw;
    padding-right: 5vw;
}
.gatherings-scroll::-webkit-scrollbar {
    display: none;
}
.gathering-card {
    min-width: 340px;
    max-width: 380px;
    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;
    scroll-snap-align: start;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.gathering-card:hover,
.gathering-card.is-active {
    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);
}
.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,
.gathering-card.is-active .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,
.gathering-card--photo.is-active .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) {
    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);
}

/* 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: default;
}
.serve-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-sage);
}

/* PASTORS SECTION */
.pastors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem 3rem;
    margin-top: 5rem;
}
.pastor-card {
    position: relative;
    background-color: var(--color-paper);
    border-radius: 12px;
    padding: 5.5rem 3rem 4rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border: 1px solid var(--color-border);
    border-top: 6px solid var(--color-sage);
}
.pastor-img {
    position: absolute;
    top: -4.5rem;
    left: 3rem;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--color-paper);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    background-color: var(--color-paper);
}
.pastor-header {
    margin-bottom: 2rem;
}
.pastor-title {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-ink-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
}
.pastor-content p {
    margin-bottom: 1.5rem;
    color: var(--color-ink-light);
    font-size: 1.1rem;
    font-weight: 400;
}

/* 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-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; }
    
    .pastors-grid { grid-template-columns: 1fr; gap: 6rem; margin-top: 4rem; }
    .pastor-card { padding: 4.5rem 1.5rem 2.5rem; }
    .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; }
    
    .gatherings-scroll { gap: 1.25rem; padding-bottom: 2rem; }
    .gathering-card {
        min-width: 85vw;
        max-width: 85vw;
        padding: 2rem 1.5rem;
        scroll-snap-align: center;
    }
    .carousel-btn { 
        width: 40px; 
        height: 40px; 
    }
    .carousel-btn svg {
        width: 20px;
        height: 20px;
    }
    .carousel-btn.prev-btn, .carousel-btn.prev-btn-values { left: 0.5rem; }
    .carousel-btn.next-btn, .carousel-btn.next-btn-values { right: 0.5rem; }
    .carousel-btn.prev-btn, .carousel-btn.next-btn { top: 32%; }
    
    .hero { min-height: 80vh; padding-bottom: 4rem; }
    .hero p { font-size: 1.15rem; }
    .about-hero-text { padding: var(--space-xl) 1.5rem; }
    .image-wrapper::before { bottom: 1rem; left: 1rem; }

    .about-tab { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
    .about-panel { padding: 2.25rem 0 var(--space-lg); }
    .about-panel-intro { font-size: 1.1rem; margin-bottom: 2rem; }
    
    .values-grid {
        gap: 1.25rem;
        padding-left: 7.5vw;
        padding-right: 7.5vw;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
    .value-card {
        flex: 0 0 85vw;
        min-width: 85vw;
        max-width: 85vw;
        border: 1px solid var(--color-border);
        padding: 2rem;
        border-radius: 12px;
    }
    .value-name { font-size: 1.35rem; }
}

@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)); }
    .pastors-grid { gap: 4rem; margin-top: 3rem; }
    .pastor-card { padding: 4rem 1.5rem 2.5rem; }
}

/* 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 */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.stagger-1 { transition-delay: 0.15s; }
.stagger-2 { transition-delay: 0.3s; }

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