:root {
    /* "Peacock at Play" system — the mascot's plumage, softened for kids */
    --primary: #F9A03F;
    /* Mango — soft airy orange; every CTA. Pair with ink text, never white */
    --primary-dark: #EF8B21;
    /* Mango, hover */
    --primary-deep: #C96A10;
    /* Toasted mango — button ledge + the only orange dark enough for text on light */
    --secondary: #FFC85C;
    /* Sun gold — warm marks on dark grounds */
    --accent: #0F7A8D;
    /* Peacock teal — links, icons, info moments */
    --leaf: #2E9C68;
    /* Parrot-leaf green — progress fills, success */
    --lagoon: #0C3B4A;
    /* Midnight lagoon — footer, announcement, dark bands */
    --accent-pink: #E86A5B;
    /* Coral — celebratory accents (token name kept from old system) */
    --bg-cream: #F1FAF7;
    /* Airy mist — pale aqua section ground (token name kept) */
    --tint-peach: #FFF1E0;
    --tint-aqua: #E4F4F1;
    --tint-sky: #E7F2F9;
    --tint-leaf: #E6F5EA;
    /* Feather tints — icon chips and quiet panels */
    --text-dark: #163E4F;
    /* Peacock ink */
    --white: #ffffff;
    --shadow: 0 8px 24px rgba(12, 59, 74, 0.08);
    --radius: 20px;
    --saffron: #FFB84D;
    /* Decorative gold-orange marks only, not text (token name kept) */
    --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
    --font-body: 'Nunito', 'Segoe UI', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: #FFFFFF;
    line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* Buttons — "gumdrop" pills: soft mango top, toasted-mango ledge, ink label.
   White text fails contrast on this orange; the ink label is deliberate. */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 800;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
    border: none;
    font-size: 1.05rem;
    font-family: var(--font-body);
}

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

.btn-primary {
    background-color: var(--primary);
    color: var(--text-dark);
    box-shadow: 0 4px 0 var(--primary-deep);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--primary-deep);
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--primary-deep);
}

.btn-primary:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: 0 2px 0 var(--primary-deep);
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--white);
    color: var(--accent);
    border: 2px solid var(--accent);
}

.btn-secondary:hover {
    background-color: var(--tint-aqua);
    color: var(--accent);
}

.btn-large {
    padding: 16px 40px;
    font-size: 1.3rem;
}

/* 80G certificate CTA — a prominent secondary "gumdrop" pill (peacock-teal
   outline + teal ledge) so the tax-receipt link reads as a real action, not a
   footnote, without competing with the mango primary Donate button. */
.btn-80g {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.02rem;
    background: var(--white);
    color: var(--accent);
    border: 2px solid var(--accent);
    box-shadow: 0 4px 0 rgba(15, 122, 141, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.btn-80g i {
    color: var(--accent);
}

.btn-80g:hover {
    background: var(--tint-aqua);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(15, 122, 141, 0.35);
}

.btn-80g:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(15, 122, 141, 0.35);
}

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

/* Full-width variant used under the homepage Donate button so the two CTAs
   stack as a matched pair inside the funding card. */
.btn-80g-block {
    display: flex;
    width: 100%;
    margin-top: 2px;
}

/* Announcement Bar */
.announcement-bar {
    background-color: var(--lagoon);
    color: #D9EDEA;
    text-align: center;
    padding: 7px 0;
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.announcement-bar strong {
    color: var(--secondary);
    font-weight: 700;
}

.announcement-bar i {
    margin-right: 8px;
}

/* Navbar — always visible, on every page. The bar sits in normal flow
   below the announcement bar, and the placeholder pins it to the top of
   the screen on scroll. No JS classes are needed for visibility. */
#navbar-placeholder {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.97);
    padding: 6px 0;
    position: relative;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.logo {
    flex-shrink: 1;
    min-width: 0;
}

.logo img {
    height: 34px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-shrink: 0;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s;
    white-space: nowrap;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.navbar .btn-primary {
    padding: 7px 18px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--primary);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 6px;
}

/* Collapse to the mobile menu before the links can crowd the wordmark;
   the Donate button stays visible next to the hamburger */
@media (max-width: 992px) {
    .nav-links {
        display: none;
    }

    .nav-links.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 6px 20px 12px;
        gap: 0;
        box-shadow: 0 14px 24px rgba(12, 59, 74, 0.12);
        border-top: 1px solid #E4F1EE;
    }

    .nav-links.open a {
        padding: 10px 0;
        border-bottom: 1px solid #EEF7F4;
    }

    .nav-links.open a:last-child {
        border-bottom: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .navbar .btn-primary {
        padding: 6px 14px;
        font-size: 0.85rem;
    }
}

/* Hero Section */
.hero {
    padding: 80px 0;
    overflow: hidden;
}

.hero .container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.hero-content {
    flex: 1;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--accent);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-btns {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex: 1;
    position: relative;
}

.hero-image img {
    border-radius: var(--radius);
    box-shadow: 20px 20px 0 var(--secondary);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Sections General */
.section {
    padding: 56px 0;
}

.section-title {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 3.5vw, 2.3rem);
    margin-bottom: 30px;
    color: var(--text-dark);
    line-height: 1.15;
}

/* Section accents — small generated sticker icons above every section title
   (assets/images/accents/, cut from one AI-generated sheet). Peacock feather
   is the default; sections override background-image with their own motif. */
.section-title::before {
    content: '';
    display: block;
    width: 44px;
    height: 34px;
    background: url('../assets/images/accents/feather.png') center / contain no-repeat;
    margin: 0 auto 10px;
}

#episodes .section-title::before {
    background-image: url('../assets/images/accents/note.png');
}

#vision .section-title::before {
    background-image: url('../assets/images/accents/lotus.png');
}

/* Vision Section */
.vision-section {
    background-color: rgba(255, 255, 255, 0.8);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.text-block p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.feature-box {
    background: linear-gradient(135deg, #0F7A8D 0%, #168A7C 55%, #2E9C68 100%);
    color: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(15, 122, 141, 0.28);
}

.feature-box h3 {
    color: var(--white);
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.highlight {
    font-size: 1.2rem;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
    display: inline-block;
}

/* Why Section */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
    border-bottom: 5px solid var(--primary);
}

.card:hover {
    transform: translateY(-10px);
}

.card i {
    font-size: 3rem;
    color: var(--primary-deep);
    margin-bottom: 20px;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* Impact Section */
.impact-section {
    background-color: var(--lagoon);
    color: var(--white);
}

.impact-section .section-title {
    color: var(--white);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.impact-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: var(--radius);
    text-align: center;
}

.impact-item .icon {
    display: block;
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 15px;
}

/* Team Section */
.team-section {
    background-color: var(--white);
}

.subtitle {
    text-align: center;
    font-size: 1.2rem;
    margin-top: -30px;
    margin-bottom: 50px;
    color: #53707C;
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
}

.team-card {
    background: var(--white);
    padding: 24px 30px;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.team-media {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-content {
    flex: 1;
}

.team-icon {
    width: 80px;
    height: 80px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-icon i {
    font-size: 2.5rem;
    color: white;
}

.team-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    border: 3px solid var(--secondary);
    box-shadow: 0 6px 16px rgba(12, 59, 74, 0.15);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.team-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-logo img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

/* Square-ish vertical logo marks get more height so they don't shrink
   to a stamp inside the media column. */
.team-logo img.logo-tall {
    max-height: 130px;
}

.team-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.team-link:hover {
    text-decoration: underline;
}

.team-link i {
    font-size: 0.8em;
}

.team-card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.team-card p {
    font-size: 1rem;
    color: #53707C;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .team-card {
        flex-direction: column;
        text-align: center;
        gap: 18px;
        padding: 28px 24px;
    }

    .team-media {
        flex: 0 0 auto;
    }
}

/* Donate Section */
.donate-section {
    padding-bottom: 120px;
}

.donate-card {
    background: var(--white);
    max-width: 800px;
    margin: 0 auto;
    padding: 60px;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 2px solid var(--secondary);
}

.donate-card h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.progress-container {
    background-color: #E2EFEA;
    height: 30px;
    border-radius: 15px;
    margin: 30px 0 15px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    background: linear-gradient(90deg, var(--leaf), var(--accent));
    height: 100%;
    border-radius: 15px;
    transition: width 1.5s ease-out;
}

.progress-stats {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.reward-text {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #476876;
}

.pulse {
    animation: pulse 2s infinite;
}

/* Keep the gumdrop ledge alive underneath the pulsing ring */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 0 var(--primary-deep), 0 0 0 0 rgba(249, 160, 63, 0.6);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 4px 0 var(--primary-deep), 0 0 0 15px rgba(249, 160, 63, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 0 var(--primary-deep), 0 0 0 0 rgba(249, 160, 63, 0);
    }
}

/* Footer — midnight lagoon ground, mango rubric line on top */
.footer {
    background: var(--lagoon);
    color: #D9EDEA;
    padding: 44px 0 20px;
    border-top: 3px solid var(--primary);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    align-items: flex-start;
    margin-bottom: 28px;
    gap: 32px;
}

.footer-logo {
    max-width: 400px;
}

.footer-logo img {
    height: 68px;
    width: auto;
}

.footer-about {
    margin: 16px 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(217, 237, 234, 0.85);
}

.footer-links h3 {
    color: var(--secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
}

.footer-links p {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 6px;
    color: rgba(217, 237, 234, 0.9);
}

.footer-links p i {
    width: 20px;
    color: var(--secondary);
    margin-right: 6px;
}

.footer-links a:hover {
    color: #fff;
}

.social-links {
    margin-top: 20px;
}

.social-links a {
    font-size: 1.5rem;
    margin-right: 15px;
    color: var(--white);
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--secondary);
}

/* Full Address & Contact Details (about.html) */
.contact-details-block {
    max-width: 480px;
    margin: 0 auto;
}

.contact-details-block p {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.6;
    color: #53707C;
    margin-bottom: 14px;
}

.contact-details-block p i {
    width: 20px;
    flex-shrink: 0;
    color: var(--accent);
}

.contact-details-block a {
    color: var(--accent);
    font-weight: 700;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(217, 237, 234, 0.15);
    padding-top: 20px;
    font-size: 0.85rem;
    color: rgba(217, 237, 234, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
    .hero .container {
        flex-direction: column-reverse;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-btns {
        justify-content: center;
    }

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

    .partners-grid {
        flex-direction: column;
        gap: 30px;
    }

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

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .donate-card {
        padding: 30px;
    }
}

/* Features Section */
.features-section {
    padding: 56px 0;
    background: var(--bg-cream);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.feature-card {
    background: var(--white);
    padding: 26px 22px;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}

.feature-card:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.icon-orange {
    background-color: var(--tint-peach);
    color: var(--primary-deep);
}

.icon-green {
    background-color: var(--tint-leaf);
    color: var(--leaf);
}

.icon-yellow {
    background-color: var(--tint-peach);
    color: var(--primary-dark);
}

/* Feature icon chips — feather tints from the palette, cycled */
.icon-gradient-1 {
    background: var(--tint-peach);
    color: var(--primary-deep);
}

.icon-gradient-2 {
    background: var(--tint-aqua);
    color: var(--accent);
}

.icon-gradient-3 {
    background: var(--tint-leaf);
    color: var(--leaf);
}

.icon-gradient-4 {
    background: #FDEBE7;
    color: var(--accent-pink);
}

.icon-gradient-5 {
    background: var(--tint-sky);
    color: var(--accent);
}

.icon-gradient-6 {
    background: var(--tint-peach);
    color: var(--primary-deep);
}

.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.feature-card p {
    font-size: 1rem;
    color: #53707C;
    line-height: 1.6;
}

/* Rewards Section — a warm peach band so it reads as its own moment,
   distinct from the white Trust/partners section that follows */
.rewards-section {
    background: var(--tint-peach);
    padding: 64px 0;
    border-top: 1px solid #F7E1C4;
    border-bottom: 1px solid #F7E1C4;
}

.rewards-content {
    display: flex;
    align-items: center;
    gap: 36px;
    max-width: 1000px;
    margin: 0 auto;
}

.rewards-icon {
    flex-shrink: 0;
}

.trophy-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFC85C 0%, #F0921E 100%);
    border-radius: 50%;
    box-shadow:
        0 14px 36px rgba(240, 146, 30, 0.30),
        inset 0 -5px 20px rgba(0, 0, 0, 0.08),
        inset 0 5px 20px rgba(255, 255, 255, 0.25);
    animation: trophy-float 3s ease-in-out infinite;
}

.trophy-wrapper i {
    font-size: 3.6rem;
    color: white;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index: 2;
}

.trophy-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(255, 200, 92, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    animation: trophy-glow 2s ease-in-out infinite alternate;
}

@keyframes trophy-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes trophy-glow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.rewards-text {
    flex: 1;
}

.rewards-text h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.6rem);
    color: var(--text-dark);
    margin-bottom: 16px;
    position: relative;
}

.rewards-text h2::before {
    content: '';
    display: block;
    width: 44px;
    height: 34px;
    background: url('../assets/images/accents/heart.png') left center / contain no-repeat;
    margin-bottom: 10px;
}

.rewards-intro {
    font-size: 1.15rem;
    color: #53707C;
    margin-bottom: 15px;
}

.rewards-highlight {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-deep);
    margin-bottom: 20px;
}

.rewards-vision {
    font-size: 1.2rem;
    color: #3A5D6C;
    line-height: 1.8;
    margin-bottom: 25px;
    font-style: italic;
    border-left: 4px solid var(--primary);
    padding-left: 20px;
    background: linear-gradient(90deg, rgba(249, 160, 63, 0.12), transparent);
}

.rewards-cta {
    font-size: 1.25rem;
    color: var(--text-dark);
}

.rewards-cta strong {
    color: var(--primary-deep);
    font-size: 1.35rem;
}

/* Responsive for Rewards */
@media (max-width: 768px) {
    .rewards-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .trophy-wrapper {
        width: 150px;
        height: 150px;
    }

    .trophy-wrapper i {
        font-size: 3.5rem;
    }

    .trophy-glow {
        width: 170px;
        height: 170px;
    }

    .rewards-text h2 {
        font-size: 2.2rem;
    }

    .rewards-text h2::before {
        margin: 0 auto 15px;
    }

    .rewards-vision {
        border-left: none;
        border-top: 4px solid var(--primary);
        padding-left: 0;
        padding-top: 20px;
    }
}

/* Vision Section — airy mist with the pattern kept as a whisper */
.vision-section {
    background-color: var(--bg-cream);
    background-image:
        linear-gradient(rgba(241, 250, 247, 0.94), rgba(241, 250, 247, 0.94)),
        url('../assets/images/bg_pattern.webp');
    background-size: 400px;
    background-repeat: repeat;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}

.vision-section .text-block p {
    font-size: 1.2rem;
    color: var(--text-dark);
    line-height: 1.8;
}

.vision-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 25px 0;
}

.vision-icon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid #D9ECE7;
    font-weight: 700;
    color: var(--text-dark);
    box-shadow: 0 2px 6px rgba(12, 59, 74, 0.05);
    transition: transform 0.3s;
}

.vision-icon-item:hover {
    transform: translateY(-3px);
}

.vision-icon-item i {
    font-size: 1.2rem;
    color: var(--primary-deep);
}

/* The peacock panel — the section's single saturated moment */
.vision-section .feature-box {
    padding: 40px;
    border-radius: var(--radius);
}

.vision-section .feature-box h3 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.vision-section .feature-box p {
    color: rgba(255, 255, 255, 0.92);
}

.vision-section .feature-box .highlight {
    background: rgba(255, 255, 255, 0.16);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 600;
}

.vision-section .box-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

/* FAQ Section */
.faq-section {
    background: #FFFFFF;
    padding: 56px 0;
}

.faq-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 24px;
}

.faq-header h1,
.faq-header h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.6rem);
    margin-bottom: 15px;
    color: var(--text-dark);
}

.faq-header h1::before,
.faq-header h2::before {
    content: '';
    display: block;
    width: 44px;
    height: 34px;
    background: url('../assets/images/accents/damaru.png') center / contain no-repeat;
    margin: 0 auto 10px;
}

.faq-header p {
    color: #53707C;
    font-size: 1.1rem;
}

/* Search Bar
   (FAQ rules are scoped to .faq-section — donate.html has its own FAQ look
   in donate.css scoped to .faq-donate-section; both files load on both pages) */
.faq-section .faq-search {
    max-width: 600px;
    margin: 0 auto 50px;
    position: relative;
}

.faq-section .faq-search input {
    width: 100%;
    padding: 15px 20px 15px 50px;
    border: 1px solid #E2EFEA;
    border-radius: 50px;
    font-size: 1rem;
    outline: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s;
}

.faq-section .faq-search input:focus {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: var(--primary);
}

.faq-section .faq-search i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #7C949E;
}

/* FAQ List */
.faq-list {
    max-width: 800px;
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-section .faq-item {
    background: var(--white);
    border-radius: 50px;
    /* Rounded pill shape */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    border: 1px solid #E8F1EE;
    transition: all 0.3s ease;
}

.faq-section .faq-item.active {
    border-radius: 20px;
    /* Change shape when expanded */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.faq-section .faq-item.hidden {
    display: none;
}

.faq-section .faq-question {
    padding: 15px 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.faq-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.faq-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.icon-orange-light {
    background-color: var(--tint-peach);
    color: var(--primary-deep);
}

.icon-green-light {
    background-color: var(--tint-leaf);
    color: var(--leaf);
}

.icon-blue-light {
    background-color: var(--tint-sky);
    color: var(--accent);
}

.icon-red-light {
    background-color: #FDEBE7;
    color: var(--accent-pink);
}

.faq-section .faq-question span {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2A4E5D;
}

.toggle-icon {
    color: #7C949E;
    transition: transform 0.3s;
}

.faq-section .faq-item.active .toggle-icon {
    transform: rotate(180deg);
}

.faq-section .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 25px;
}

.faq-section .faq-answer p {
    padding: 0 0 20px 60px;
    /* Indent to align with text */
    color: #53707C;
    line-height: 1.6;
}

/* Contact Card */
.faq-section .faq-contact-card {
    background: var(--white);
    max-width: 800px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.faq-section .faq-contact-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.faq-section .faq-contact-card p {
    color: #53707C;
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Contribution Impact Section */
.contribution-section {
    padding: 56px 0;
    background: var(--bg-cream);
}

.contribution-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 32px;
}

.contribution-header h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.contribution-header h2 span {
    color: var(--primary-deep);
    display: block;
}

.contribution-header h2::before {
    content: '';
    display: block;
    width: 44px;
    height: 34px;
    background: url('../assets/images/accents/trophy.png') center / contain no-repeat;
    margin: 0 auto 12px;
}

.contribution-header p {
    color: #53707C;
    font-size: 1.1rem;
}

.contribution-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Left Card - Funding Stats */
.funding-card {
    flex: 1;
    min-width: 350px;
    background: var(--white);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.circular-progress {
    position: relative;
    width: 250px;
    height: 250px;
    margin-bottom: 24px;
}

.circular-progress svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.circular-progress circle {
    fill: none;
    stroke-width: 25;
    stroke-linecap: round;
}

.progress-bg {
    stroke: #E8F1EE;
}

.progress-value {
    stroke: var(--leaf);
    stroke-dasharray: 628;
    /* 2 * PI * 100 */
    stroke-dashoffset: 628;
    transition: stroke-dashoffset 2s ease-in-out;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-text h3 {
    font-family: var(--font-display);
    font-size: 4rem;
    margin: 0;
    line-height: 1;
    color: var(--text-dark);
}

.progress-text span {
    font-size: 0.9rem;
    color: #53707C;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.donate-btn-large {
    background: var(--primary);
    color: var(--text-dark);
    border: none;
    padding: 16px 44px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--primary-deep);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.donate-btn-large:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--primary-deep);
}

.stats-row {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-top: 30px;
}

.stat-box {
    background: var(--tint-aqua);
    padding: 20px;
    border-radius: 20px;
    flex: 1;
    text-align: center;
}

.stat-box span {
    display: block;
    font-size: 0.9rem;
    color: #53707C;
    margin-bottom: 5px;
}

.stat-box h4 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--text-dark);
    margin: 0;
}

.backers-box {
    background: var(--tint-aqua);
    padding: 20px 30px;
    border-radius: 20px;
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.backers-box h4 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--text-dark);
    margin: 0;
}

.backers-icon {
    width: 40px;
    height: 40px;
    background: var(--tint-peach);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-deep);
}

/* Right Grid - Impact Cards */
.impact-grid-new {
    flex: 1.5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.impact-card-new {
    background: var(--white);
    padding: 22px;
    border-radius: 16px;
    border: 1px solid #E8F1EE;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.impact-card-new:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.impact-card-new::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.5;
}

.card-1::before {
    background: var(--tint-peach);
}

.card-2::before {
    background: var(--tint-aqua);
}

.card-3::before {
    background: var(--tint-leaf);
}

.card-4::before {
    background: #FDEBE7;
}

.impact-icon-new {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.icon-bg-1 {
    background: var(--tint-peach);
    color: var(--primary-deep);
}

.icon-bg-2 {
    background: var(--tint-aqua);
    color: var(--accent);
}

.icon-bg-3 {
    background: var(--tint-leaf);
    color: var(--leaf);
}

.icon-bg-4 {
    background: #FDEBE7;
    color: var(--accent-pink);
}

.impact-card-new h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.impact-card-new p {
    font-size: 0.95rem;
    color: #53707C;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .contribution-container {
        flex-direction: column;
    }

    .funding-card {
        width: 100%;
    }
}

/* New Hero Section */
.hero-new {
    padding: 24px 0 48px;
    text-align: center;
}

.hero-logo-area {
    margin-bottom: 24px;
}

.hero-logo {
    max-width: 230px;
    /* Adjust based on actual logo aspect ratio */
    height: auto;
    margin-bottom: 10px;
}

.hero-tagline {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    margin-top: 10px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Video takes slightly more space or equal */
    gap: 32px;
    align-items: center;
    text-align: left;
}

/* Video Wrapper */
.hero-video-wrapper {
    position: relative;
    width: 100%;
    /* explicit width: children are absolutely positioned, so the wrapper
       collapses to 0 in the mobile flex-column layout without it */
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.hero-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* YouTube facade — poster + play button; script.js swaps in the real iframe
   only when the visitor taps play */
.hero-video-wrapper .yt-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: #000;
    cursor: pointer;
}

.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(249, 160, 63, 0.97);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Right Content */
.hero-content-new {
    padding: 10px;
}

.hero-description {
    font-size: 1.05rem;
    color: #3A5D6C;
    margin-bottom: 18px;
    line-height: 1.55;
}

/* Stats Card */
.hero-stats-card {
    background: var(--white);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 18px;
    border: 1px solid #E8F1EE;
}

.raised-info {
    margin-bottom: 15px;
}

.raised-info .amount {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}

.raised-info .goal {
    font-size: 0.9rem;
    color: #6B8793;
}

.hero-progress-bar {
    height: 10px;
    background-color: #E4F1EE;
    border-radius: 5px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
}

.hero-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--leaf), var(--accent));
    border-radius: 5px;
}

/* Donations that passed auto-verification but await owner reconciliation —
   mango stripes so they read as distinct from the confirmed peacock fill */
.hero-progress-pending {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    background: repeating-linear-gradient(45deg,
            rgba(249, 160, 63, 0.55),
            rgba(249, 160, 63, 0.55) 6px,
            rgba(249, 160, 63, 0.25) 6px,
            rgba(249, 160, 63, 0.25) 12px);
    transition: width 1.5s ease-out;
}

.hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #53707C;
    position: relative;
}

.hero-meta .percentage {
    font-weight: 800;
    color: var(--primary-deep);
    font-size: 1.2rem;
}

.meta-details {
    display: flex;
    gap: 20px;
}

.meta-details i {
    margin-right: 5px;
    color: #7C949E;
}

/* Actions */
.hero-actions {
    display: flex;
    gap: 15px;
}

.btn-hero {
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-hero-outline {
    flex: 0.8;
    background: transparent;
    border: 2px solid #C4D6DA;
    color: #476876;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-hero-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: transparent;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-logo-area {
        margin-bottom: 30px;
    }
}

/* Hero Updates — a soft sunrise settling into airy mist */
.hero-new {
    background: linear-gradient(180deg, #FFF6E8 0%, var(--bg-cream) 85%);
    position: relative;
    overflow: hidden;
}

.hero-logo {
    max-width: 320px;
}

/* Single Button Adjustment */
.hero-actions {
    justify-content: flex-start;
    /* Align left */
}

.btn-hero {
    flex: none;
    /* Don't stretch */
    min-width: 250px;
}

/* Devanagari Background Letters */
.hero-bg-letters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.floating-letter {
    position: absolute;
    color: #C9E4DE;
    /* Soft aqua feather */
    font-family: var(--font-display);
    font-weight: 800;
    opacity: 0.6;
    user-select: none;
    will-change: transform;
}

/* Specific positions and sizes for letters */
.letter-1 {
    top: 10%;
    left: 5%;
    font-size: 8rem;
}

.letter-2 {
    top: 20%;
    right: 10%;
    font-size: 10rem;
}

.letter-3 {
    bottom: 15%;
    left: 15%;
    font-size: 6rem;
}

.letter-4 {
    top: 50%;
    right: 5%;
    font-size: 12rem;
}

.letter-5 {
    bottom: 5%;
    right: 30%;
    font-size: 8rem;
}

.letter-6 {
    top: 5%;
    left: 40%;
    font-size: 5rem;
}

/* Progress Bar Animation Class */
.hero-progress-fill {
    width: 0;
    /* Start at 0 */
    transition: width 1.5s ease-out;
}

/* =========================================
   MOBILE OPTIMIZATION OVERRIDES
   ========================================= */

@media (max-width: 900px) {
    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {

    /* General Layout */
    .section {
        padding: 40px 0;
    }

    .container {
        padding: 0 20px;
        /* Keep some padding */
    }

    /* Typography Scaling */
    h1 {
        font-size: 2.2rem !important;
    }

    h2 {
        font-size: 1.8rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    .section-title {
        font-size: 1.85rem !important;
        margin-bottom: 22px;
    }

    .hero-tagline {
        font-size: 0.78rem;
        letter-spacing: 0.12em;
    }

    p {
        font-size: 1rem !important;
    }

    /* Navbar */
    .logo img {
        height: 30px;
    }

    .navbar .btn-primary {
        /* On mobile, we might want to hide the header button if it clutters, 
           active hamburger menu has links usually. 
           But let's keep it if space allows or make it smaller */
        padding: 6px 16px;
        font-size: 0.85rem;
    }

    /* Hero Section (navbar is in flow now — no fixed-nav clearance) */
    .hero-new {
        padding-top: 16px;
        padding-bottom: 32px;
        height: auto;
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .hero-content-new {
        text-align: center;
        padding: 0 10px;
    }

    /* !important needed: the generic mobile h1 override above is !important
       and the tagline is an <h1> */
    .hero-tagline {
        font-size: 0.8rem !important;
        letter-spacing: 0.12em;
        text-align: center;
        margin-top: 8px;
    }

    .hero-logo-area {
        flex-direction: column;
        text-align: center;
        margin-bottom: 20px;
    }

    .hero-video-wrapper {
        height: 250px;
        /* confine video height on mobile */
    }

    /* Stats Card in Hero */
    .hero-stats-card {
        padding: 20px;
        margin-top: 20px;
    }

    .raised-info .amount {
        font-size: 1.8rem;
    }

    /* Vision Section */
    .content-grid {
        grid-template-columns: 1fr;
        /* Stack vision content */
        gap: 40px;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
        /* Stack features */
    }

    /* Rewards Section */
    .rewards-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .trophy-wrapper {
        margin: 0 auto;
        /* Center trophy */
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 28px;
        text-align: center;
    }

    .footer-logo {
        max-width: 100%;
    }

    /* Center each block as a group, but left-align its text so the link
       and contact lists read as a clean column instead of a ragged
       centered zigzag. */
    .footer-links {
        width: 100%;
        max-width: 320px;
        text-align: left;
    }

    .footer-links h3 {
        text-align: center;
    }

    .footer-links p {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 10px;
    }

    .footer-links p i {
        flex-shrink: 0;
        margin-right: 0;
    }

    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {

    /* Extra Small Devices */
    .hero-content h1 {
        font-size: 1.8rem !important;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .hero-btns {
        flex-direction: column;
    }

    .announcement-bar {
        font-size: 0.75rem;
        padding: 10px 5px;
    }
}
/* Respect the user's motion preference: stop the infinite float/pulse/glow
   loops and make transitions effectively instant. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================
   EPISODES CAROUSEL (index.html)
   =================================== */

.episodes-section {
    padding: 36px 0 12px;
    background: linear-gradient(180deg, #fff 0%, var(--bg-cream) 100%);
    overflow: hidden;
}

.episodes-subtitle {
    text-align: center;
    color: #53707C;
    max-width: 560px;
    margin: -10px auto 10px;
}

/* Full-bleed marquee strip; the slow slide is pure CSS and pauses on hover */
.episodes-marquee {
    --card-w: 200px;
    --card-gap: 20px;
    overflow: hidden;
    padding: 22px 0 32px;
    /* soften the strip's hard left/right cut-offs */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.episodes-track {
    display: flex;
    width: max-content;
    animation: episodes-scroll 75s linear infinite;
}

.episodes-marquee:hover .episodes-track,
.episodes-marquee:focus-within .episodes-track {
    animation-play-state: paused;
}

@keyframes episodes-scroll {
    from {
        transform: translateX(0);
    }

    to {
        /* the track holds two identical sets — half the width is one full set */
        transform: translateX(-50%);
    }
}

.episodes-set {
    display: flex;
    gap: var(--card-gap);
    padding-right: var(--card-gap);
    list-style: none;
    margin: 0;
}

/* Poster card: rounded, lifts on hover; JS drives the tilt (--rx/--ry)
   and the gloss position (--mx/--my) from the cursor */
.poster-card {
    position: relative;
    width: var(--card-w);
    flex-shrink: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 25px rgba(12, 59, 74, 0.12);
    transform: perspective(750px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition: transform 0.18s ease-out, box-shadow 0.3s ease;
}

.poster-card:hover {
    --lift: -10px;
    box-shadow: 0 22px 45px rgba(12, 59, 74, 0.22);
    z-index: 2;
}

.poster-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* Moving shine that follows the cursor */
.poster-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.35) 0%,
            rgba(255, 255, 255, 0.10) 32%,
            transparent 62%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.poster-card:hover::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .episodes-marquee {
        --card-w: 160px;
        --card-gap: 16px;
        padding: 18px 0 26px;
    }

    .episodes-section {
        padding: 45px 0 20px;
    }
}

/* The global reduced-motion rule above freezes the marquee animation;
   let those visitors browse the posters by scrolling the strip instead. */
@media (prefers-reduced-motion: reduce) {
    .episodes-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Standalone episodes page (episodes.html) — browsable poster grid.
   Tiles reuse .poster-card so they get the same hover lift + tilt/shine. */
.episodes-grid-section {
    background: linear-gradient(180deg, #fff 0%, var(--bg-cream) 100%);
}

.episodes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px 24px;
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
}

.episodes-grid .poster-card {
    width: auto;
}

.episode-caption {
    text-align: center;
    margin: 14px 0 0;
    color: var(--text-dark);
    font-weight: 700;
}

.episode-num {
    display: block;
    font-size: 0.78rem;
    color: #53707C;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* 2–3 line story brief under each caption */
.episode-brief {
    text-align: left;
    margin: 7px 0 0;
    color: #53707C;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .episodes-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 26px 16px;
    }

    .episode-caption {
        font-size: 0.88rem;
    }

    .episode-num {
        font-size: 0.68rem;
    }

    .episode-brief {
        font-size: 0.78rem;
        line-height: 1.45;
    }
}

/* ============================================================
   Community testimonials - a 2-column grid of cards, one per endorser: a
   smaller square video centered on top, compact bio below. Homepage, sits
   just below the episode poster carousel. Static for now (just 2 cards) -
   once there are enough to need it, this is the natural place to turn into
   a sliding carousel.
   ============================================================ */
.testimonial-section {
    padding: 56px 0;
    background: var(--white);
}

.testimonial-subtitle {
    text-align: center;
    color: #53707C;
    max-width: 560px;
    margin: -10px auto 34px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: linear-gradient(135deg, var(--tint-aqua) 0%, var(--bg-cream) 100%);
    border-radius: 28px;
    padding: 28px;
    box-shadow: var(--shadow);
}

.testimonial-card-text {
    text-align: left;
}

/* Square video frame, full width of the card - a Bunny Stream facade:
   thumbnail + play button until tapped, then the player iframe takes over
   the whole frame (js/testimonial.js) */
.testimonial-video {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #0b2730;
    box-shadow: 0 15px 40px rgba(12, 59, 74, 0.25);
}

.testimonial-video-poster,
.testimonial-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.testimonial-video-poster {
    object-fit: cover;
}

.testimonial-video iframe {
    border: 0;
}

/* Once the Bunny iframe is embedded, the poster + play button underneath are
   redundant (and would otherwise stay focusable/tabbable beneath it) - drop them. */
.testimonial-video.is-embedded .testimonial-video-poster,
.testimonial-video.is-embedded .testimonial-play {
    display: none;
}

/* The whole frame is one big tap target that embeds the video */
.testimonial-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-play-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(249, 160, 63, 0.97);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, opacity 0.25s ease;
}

.testimonial-play:hover .testimonial-play-icon,
.testimonial-play:focus-visible .testimonial-play-icon {
    transform: scale(1.08);
}

.testimonial-play:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.testimonial-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--text-dark);
    margin: 0 0 2px;
    line-height: 1.15;
}

.testimonial-role {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-deep);
    margin: 0 0 6px;
    line-height: 1.35;
}

.testimonial-role em,
.testimonial-bio em {
    font-style: italic;
}

.testimonial-bio {
    color: #53707C;
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0 0 10px;
}

.testimonial-bio em {
    color: var(--text-dark);
}

/* Film credit chip - poster + title */
.testimonial-film {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border-radius: 14px;
    padding: 8px 12px;
    box-shadow: var(--shadow);
}

.testimonial-poster {
    width: 40px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(12, 59, 74, 0.22);
    flex-shrink: 0;
}

.testimonial-film-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.film-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--accent);
}

.film-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-dark);
}

.film-sub {
    font-size: 0.7rem;
    color: #53707C;
    font-weight: 600;
}

@media (max-width: 900px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        gap: 24px;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        padding: 18px;
        border-radius: 22px;
    }

    .testimonial-play-icon {
        width: 50px;
        height: 50px;
        font-size: 1.15rem;
    }
}