@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
    --green:#254c34;
    --forest:#153724;
    --orange:#ed7c36;
    --cream:#f9f7f0;
    --ink:#1c3026;
    --muted:#637268;
    --line:#e2e8de
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:'DM Sans',sans-serif;
    color:var(--ink);
    background:#fff;
    font-size:15px;
    line-height:1.75
}

h1,h2,h3,h4 {
    font-family:Manrope,sans-serif;
    line-height:1.2;
    letter-spacing:-.035em;
    margin:0 0 18px;
    font-weight:800
}

h1 {
    font-size:clamp(37px,4.7vw,66px)
}

h2 {
    font-size:clamp(27px,3vw,40px)
}

h3 {
    font-size:20px
}

p {
    margin:0 0 18px
}

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

img {
    max-width:100%
}

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

.topline {
    background:var(--forest);
    color:#e8f1e9;
    font-size:12px;
    padding:7px 0
}

.topline .container {
    display:flex;
    justify-content:space-between;
    gap:10px
}

.nav {
    position:sticky;
    top:0;
    z-index:50;
    background:#fff;
    box-shadow:0 2px 18px #183e2312
}

.navinner {
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:230px
}

.brand img {
    height:59px;
    width:59px;
    object-fit:contain
}

.brand strong {
    font-size:15px;
    line-height:1.23;
    display:block;
    color:var(--forest);
    font-weight:800
}

.brand small {
    font-size:10px;
    letter-spacing:2px;
    color:var(--orange);
    font-weight:800
}

.navlinks {
    display:flex;
    gap:22px;
    align-items:center
}

.navlinks a {
    font-weight:700;
    font-size:13px;
    white-space:nowrap
}

.navlinks a:hover,.navlinks a.active {
    color:var(--orange)
}

.navright {
    display:flex;
    align-items:center;
    gap:12px
}

.lang {
    border:1px solid var(--line);
    padding:9px;
    border-radius:8px;
    background:white;
    color:var(--green);
    font-weight:800;
    cursor:pointer
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:13px 23px;
    background:var(--orange);
    color:white;
    border:0;
    border-radius:7px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.25s
}

.btn:hover {
    transform:translateY(-2px);
    background:#d96b27
}

.btn.green {
    background:var(--green)
}

.btn.outline {
    border:1px solid #c5d2c6;
    color:var(--green);
    background:#fff
}

.menu {
    display:none;
    background:none;
    border:0;
    font-size:26px;
    color:var(--green)
}

.hero {
    background:linear-gradient(110deg,#f6f6eb 0%,#f7f9f0 57%,#edf4e7 100%);
    overflow:hidden
}

.hero-inner {
    min-height:620px;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:center;
    gap:40px;
    padding-top:54px;
    padding-bottom:65px
}

.eyebrow {
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:11px;
    color:#d87332;
    display:block;
    margin-bottom:17px
}

.hero h1 span {
    color:var(--orange)
}

.hero p {
    max-width:550px;
    color:#526257;
    font-size:16px
}

.actions {
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:30px
}

.hero-visual {
    position:relative;
    height:470px
}

.hero-photo {
    height:100%;
    width:87%;
    margin-left:auto;
    border-radius:48% 48% 13px 13px;
    object-fit:cover;
    box-shadow:0 20px 45px #21452c25
}

.floating {
    position:absolute;
    bottom:35px;
    left:0;
    background:white;
    border-radius:12px;
    box-shadow:0 12px 30px #0002;
    padding:17px 22px;
    font-size:13px;
    font-weight:700
}

.floating b {
    font-size:26px;
    color:var(--orange);
    display:block
}

.stats {
    background:var(--forest);
    color:white;
    padding:33px 0
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    text-align:center
}

.stat strong {
    display:block;
    font:800 33px Manrope
}

.stat span {
    color:#c5d7c8;
    font-size:13px
}

.section {
    padding:88px 0
}

.section.soft {
    background:var(--cream)
}

.section-head {
    max-width:740px;
    margin-bottom:34px
}

.section-head p {
    color:var(--muted)
}

.section-head.center {
    text-align:center;
    margin:0 auto 42px
}

.grid3 {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}

.grid2 {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:26px
}

.card {
    padding:28px;
    border:1px solid var(--line);
    background:white;
    border-radius:12px;
    transition:.2s
}

.card:hover {
    transform:translateY(-4px);
    box-shadow:0 15px 40px #183e2312
}

.card .symbol {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    background:#eaf3e8;
    border-radius:11px;
    color:var(--green);
    font-size:25px;
    margin-bottom:20px
}

.card p {
    font-size:14px;
    color:var(--muted);
    margin:0
}

.text-link {
    color:var(--green);
    font-weight:800;
    font-size:13px;
    display:inline-block;
    margin-top:20px
}

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

.split img {
    width:100%;
    height:430px;
    object-fit:cover;
    border-radius:14px
}

.split p,.copy p {
    color:var(--muted)
}

.mission {
    border-left:4px solid var(--orange);
    padding:18px 22px;
    background:#f5f7ee;
    border-radius:0 10px 10px 0;
    margin-top:18px
}

.mission h3 {
    font-size:18px;
    margin-bottom:8px
}

.mission p {
    margin:0
}

.slider {
    overflow:hidden
}

.track {
    display:flex;
    gap:18px;
    width:max-content;
    animation:marquee 35s linear infinite
}

.track:hover {
    animation-play-state:paused
}

.slide {
    width:310px;
    height:240px;
    position:relative;
    overflow:hidden;
    border-radius:12px;
    flex-shrink:0
}

.slide img {
    width:100%;
    height:100%;
    object-fit:cover
}

.slide span {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    color:#fff;
    padding:30px 15px 14px;
    background:linear-gradient(transparent,#0d2c1fce);
    font-weight:800
}

@keyframes marquee {
    to {
        transform:translateX(-50%)
    }

}

.banner {
    padding:82px 0;
    background:linear-gradient(110deg,#173c28,#2d6040);
    color:white
}

.banner p {
    max-width:650px;
    color:#d6e7d9
}

.page-hero {
    background:#f3f7ef;
    padding:70px 0 65px
}

.page-hero p {
    max-width:720px;
    color:var(--muted);
    font-size:16px
}

.pill {
    display:inline-block;
    padding:6px 12px;
    border-radius:40px;
    background:#e5eee2;
    color:var(--green);
    font-size:11px;
    font-weight:800;
    margin:0 8px 10px 0
}

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px
}

.gallery-grid figure {
    margin:0;
    position:relative;
    overflow:hidden;
    border-radius:12px;
    cursor:pointer
}

.gallery-grid img {
    width:100%;
    height:270px;
    object-fit:cover;
    display:block;
    transition:.4s
}

.gallery-grid figure:hover img {
    transform:scale(1.05)
}

.gallery-grid figcaption {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:30px 16px 12px;
    background:linear-gradient(transparent,#102e21dd);
    color:#fff;
    font-weight:800
}

.form-wrap {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:45px
}

.form-card {
    padding:34px;
    border-radius:13px;
    border:1px solid var(--line);
    background:white
}

.field {
    margin-bottom:16px
}

.field label {
    display:block;
    font-size:12px;
    font-weight:800;
    margin-bottom:6px
}

.field input,.field select,.field textarea {
    width:100%;
    border:1px solid #d9e1d9;
    border-radius:7px;
    padding:12px 13px;
    font:inherit;
    font-size:14px;
    background:white
}

.field textarea {
    min-height:110px
}

.field input:focus,.field textarea:focus,.field select:focus {
    outline:2px solid #ed7c3650;
    border-color:var(--orange)
}

.amounts {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:15px 0 20px
}

.amounts button {
    padding:11px 20px;
    border:1px solid #cbd8c9;
    background:white;
    border-radius:7px;
    cursor:pointer;
    font-weight:800
}

.amounts button.selected {
    background:var(--green);
    color:white
}

.info-panel {
    background:#f3f7ef;
    padding:30px;
    border-radius:13px
}

.info-panel h3 {
    margin-bottom:16px
}

.info-panel p {
    font-size:14px
}

.notice {
    font-size:12px;
    color:#66766b;
    margin-top:12px
}

.footer {
    background:#112f20;
    color:#e2eee3;
    padding:65px 0 20px
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1.5fr;
    gap:55px
}

.footer h3 {
    font-size:17px;
    color:white
}

.footer p,.footer a {
    color:#bdd0c1;
    font-size:13px
}

.footer a {
    display:block;
    margin-bottom:10px
}

.footer-bottom {
    border-top:1px solid #ffffff20;
    margin-top:40px;
    padding-top:18px;
    color:#9eb7a5;
    font-size:12px
}

.intro {
    position:fixed;
    inset:0;
    background:#fff;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    animation:exitIntro .8s ease 4.3s forwards
}

.intro img {
    width:min(230px,43vw);
    position:relative;
    z-index:2;
    animation:pop .9s ease both
}

.intro .rays {
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:repeating-conic-gradient(from 0deg,#f4a44b 0 5deg,transparent 5deg 20deg);
    opacity:.55;
    animation:rotate 12s linear infinite
}

.intro p {
    margin-top:26px;
    font-size:clamp(18px,3vw,29px);
    font-family:Manrope;
    font-weight:800;
    color:var(--forest);
    text-align:center
}

.intro p span {
    color:var(--orange)
}

@keyframes rotate {
    to {
        transform:rotate(360deg)
    }

}

@keyframes pop {
    from {
        transform:scale(.65);
        opacity:0
    }

    to {
        transform:scale(1);
        opacity:1
    }

}

@keyframes exitIntro {
    to {
        opacity:0;
        visibility:hidden;
        pointer-events:none
    }

}

.lightbox {
    position:fixed;
    inset:0;
    background:#07180ff0;
    z-index:150;
    display:none;
    align-items:center;
    justify-content:center;
    padding:30px
}

.lightbox.open {
    display:flex
}

.lightbox img {
    max-width:90vw;
    max-height:85vh;
    object-fit:contain
}

.lightbox button {
    position:absolute;
    top:20px;
    right:24px;
    color:white;
    background:none;
    border:0;
    font-size:35px;
    cursor:pointer
}

.check {
    display:flex;
    gap:9px;
    align-items:flex-start;
    font-size:12px
}

.check input {
    margin-top:5px
}

.two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}

@media(max-width:1000px) {
    .navlinks {
        display:none;
        position:absolute;
        top:86px;
        left:0;
        right:0;
        background:white;
        flex-direction:column;
        padding:22px;
        box-shadow:0 20px 30px #0001
    }

    .navlinks.open {
        display:flex
    }

    .menu {
        display:block
    }

    .navright>.btn {
        display:none
    }

    .hero-inner {
        grid-template-columns:1fr 1fr
    }

    .footer-grid {
        gap:24px
    }

}

@media(max-width:700px) {
    .container {
        padding:0 19px
    }

    .hero-inner,.split,.form-wrap {
        grid-template-columns:1fr
    }

    .hero-inner {
        padding-top:48px
    }

    .hero-visual {
        height:330px
    }

    .hero-photo {
        width:92%
    }

    .grid3,.gallery-grid {
        grid-template-columns:1fr 1fr
    }

    .stats-grid {
        grid-template-columns:1fr 1fr
    }

    .section {
        padding:60px 0
    }

    .footer-grid {
        grid-template-columns:1fr
    }

    .two {
        grid-template-columns:1fr
    }

    .topline .container {
        font-size:10px
    }

    .brand {
        min-width:0
    }

    .brand strong {
        font-size:12px
    }

    .brand img {
        width:49px;
        height:49px
    }

    .navinner {
        min-height:75px
    }

    .navlinks {
        top:75px
    }

}

@media(max-width:460px) {
    .grid3,.gallery-grid,.grid2 {
        grid-template-columns:1fr
    }

    .gallery-grid img {
        height:250px
    }

    .hero-visual {
        height:290px
    }

    .form-card {
        padding:23px
    }

    .navright {
        gap:5px
    }

    .lang {
        padding:7px
    }

}

@media(prefers-reduced-motion:reduce) {
    .track,.intro .rays {
        animation:none
    }

    .intro {
        animation:exitIntro .01s linear 0s forwards
    }

}

/* VERSION 2 — tighter, more deliberate page structure */

:root {
    --forest:#173e2d;
    --ink:#203d2c;
    --orange:#d96722;
    --muted:#586a60
}

h1,h2,h3,h4 {
    color:#214b35;
    letter-spacing:-.025em
}

h1 {
    font-size:clamp(34px,3.75vw,54px);
    line-height:1.27
}

h2 {
    font-size:clamp(26px,2.6vw,36px)
}

h3 {
    font-size:19px
}

.banner h2,.footer h3 {
    color:#fff
}

.hero h1 span {
    color:#d96722
}

.eyebrow {
    color:#c45e20
}

.container {
    max-width:1240px
}

.section {
    padding:58px 0
}

.section-head {
    margin-bottom:25px
}

.section-head.center {
    margin-bottom:30px
}

.page-hero {
    padding:43px 0 40px;
    background:linear-gradient(120deg,#f3f7ef,#fcfaf3)
}

.page-hero h1 {
    max-width:950px;
    margin-bottom:14px
}

.page-hero p {
    margin-bottom:0;
    max-width:790px
}

.page-hero .eyebrow {
    margin-bottom:12px
}

.hero-inner {
    min-height:520px;
    padding-top:40px;
    padding-bottom:45px
}

.hero-visual {
    height:405px
}

.split {
    gap:38px
}

.split img {
    height:360px
}

.banner {
    padding:54px 0
}

.card {
    padding:23px
}

.footer {
    padding-top:48px
}

.footer-bottom {
    margin-top:28px
}

.navinner {
    min-height:76px
}

.brand {
    min-width:220px
}

.brand img {
    height:53px;
    width:53px
}

.brand strong {
    font-size:14px;
    letter-spacing:.01em
}

.navlinks {
    gap:18px
}

.navlinks a {
    font-size:12.5px
}

.navright {
    gap:9px
}

.intro {
    gap:0;
    animation:exitIntro .75s ease 4.6s forwards;
    padding:20px
}

.intro-stage {
    width:clamp(230px,29vw,340px);
    height:clamp(230px,29vw,340px);
    position:relative;
    display:grid;
    place-items:center;
    isolation:isolate
}

.intro-stage img {
    width:64%;
    height:64%;
    object-fit:contain;
    position:relative;
    z-index:2;
    animation:pop .9s ease both;
    filter:drop-shadow(0 8px 12px #173e2d13)
}

.intro-stage .rays {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:50%;
    background:repeating-conic-gradient(from -90deg,#f3a34c 0deg 6deg,transparent 6deg 17deg);
    -webkit-mask:radial-gradient(circle,transparent 0 67%,#000 68% 100%);
    mask:radial-gradient(circle,transparent 0 67%,#000 68% 100%);
    opacity:.88;
    animation:rotate 25s linear infinite;
    z-index:1
}

.intro .intro-hindi {
    font-size:clamp(22px,3vw,32px);
    font-weight:800;
    margin:12px 0 4px;
    color:#214b35;
    line-height:1.4;
    animation:fadeRise .8s ease .45s both
}

.intro .intro-english {
    font-size:clamp(16px,2vw,22px);
    margin:0;
    line-height:1.45;
    animation:fadeRise .8s ease .9s both
}

.intro .intro-english span {
    color:#d96722
}

@keyframes fadeRise {
    from {
        opacity:0;
        transform:translateY(14px)
    }

    to {
        opacity:1;
        transform:translateY(0)
    }

}

.reveal-on-scroll {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease
}

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

.card,.slide,.gallery-grid figure {
    transition:transform .35s ease,box-shadow .35s ease
}

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

.slide img {
    transition:transform .6s ease
}

.slide:hover img {
    transform:scale(1.07)
}

.btn {
    transition:transform .25s,background .25s,box-shadow .25s
}

.btn:hover {
    box-shadow:0 10px 24px #d9672230
}

.navlinks a {
    transition:color .2s
}

.intro-stage .rays {
    pointer-events:none
}

@media(max-width:1000px) {
    .navlinks {
        top:76px
    }

}

@media(max-width:700px) {
    .page-hero {
        padding:38px 0
    }

    .section {
        padding:45px 0
    }

    .hero-inner {
        min-height:auto;
        padding:38px 0
    }

    .hero-visual {
        height:320px
    }

    .split img {
        height:300px
    }

    .navinner {
        min-height:72px
    }

    .navlinks {
        top:72px
    }

    .brand {
        min-width:0
    }

    .brand strong {
        font-size:12px
    }

    .brand img {
        height:47px;
        width:47px
    }

    .intro-stage {
        width:260px;
        height:260px
    }

}

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

    .intro-stage .rays {
        animation:none
    }

    .intro .intro-hindi,.intro .intro-english {
        animation:none
    }

}

/* Version 3: full circular sunburst, with generous separation from the tagline */

.intro-stage {
    width:clamp(270px,33vw,390px);
    height:clamp(270px,33vw,390px);
    margin-bottom:12px
}

.intro-stage img {
    width:61%;
    height:61%;
    z-index:3
}

.intro-stage .rays {
    inset:0;
    width:100%;
    height:100%;
    background:repeating-conic-gradient(from -90deg,#f18a2b 0deg 7deg,transparent 7deg 15deg);
    -webkit-mask:radial-gradient(circle,transparent 0 62%,#000 63% 100%);
    mask:radial-gradient(circle,transparent 0 62%,#000 63% 100%);
    opacity:1;
    animation:sunshineSpin 35s linear infinite;
    filter:drop-shadow(0 0 3px #f18a2b22)
}

@keyframes sunshineSpin {
    to {
        transform:rotate(360deg)
    }

}

.intro .intro-hindi {
    margin:14px 0 5px;
    position:relative;
    z-index:4
}

.intro .intro-english {
    position:relative;
    z-index:4
}

.impact-donation-panel {
    align-self:start;
    background:linear-gradient(155deg,#f1f6ec,#fffaf0);
    border:1px solid #e1e9d8;
    padding:35px
}

.impact-donation-panel>h3 {
    font-size:clamp(23px,2.1vw,30px);
    line-height:1.24;
    margin:17px 0 12px;
    color:#214b35
}

.impact-donation-panel>p {
    color:#506756;
    line-height:1.75;
    margin-bottom:23px
}

.donation-causes {
    display:grid;
    gap:12px
}

.donation-cause {
    display:flex;
    align-items:flex-start;
    gap:13px;
    background:#ffffffbd;
    border:1px solid #e4e9de;
    border-radius:12px;
    padding:16px 14px;
    transition:transform .3s,box-shadow .3s
}

.donation-cause:hover {
    transform:translateY(-3px);
    box-shadow:0 9px 24px #163d2510
}

.cause-icon {
    flex-shrink:0;
    width:42px;
    height:42px;
    border-radius:11px;
    background:#fcebd9;
    display:grid;
    place-items:center;
    font-size:23px
}

.donation-cause strong {
    display:block;
    color:#244b33;
    font-size:15px;
    margin:0 0 5px
}

.donation-cause p {
    margin:0;
    font-size:13px;
    line-height:1.6;
    color:#5e6e61
}

.donation-impact-footer {
    border-top:1px solid #dce4d6;
    margin-top:23px;
    padding-top:22px
}

.donation-impact-footer strong {
    color:#214b35;
    font-size:18px
}

.donation-impact-footer p {
    font-size:13px;
    color:#617365;
    line-height:1.7;
    margin:10px 0 17px
}

@media(max-width:700px) {
    .intro-stage {
        width:min(310px,82vw);
        height:min(310px,82vw)
    }

    .impact-donation-panel {
        padding:23px
    }

}

@media(prefers-reduced-motion:reduce) {
    .intro-stage .rays {
        animation:none
    }

}

/* Version 3: editorial photo mosaic replaces automatic slideshow */

.community-mosaic {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:205px 205px;
    gap:14px;
    margin-top:25px
}

.mosaic-tile {
    display:block;
    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#dce8da;
    isolation:isolate
}

.mosaic-tile:nth-child(1),.mosaic-tile:nth-child(4) {
    grid-column:span 2
}

.mosaic-tile img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .5s
}

.mosaic-tile:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(10,40,25,.8),transparent 60%);
    pointer-events:none
}

.mosaic-caption {
    position:absolute;
    bottom:18px;
    left:20px;
    right:15px;
    z-index:2;
    color:#fff;
    font-weight:800;
    font-size:15px;
    line-height:1.4;
    transform:translateY(4px);
    transition:transform .4s
}

.mosaic-tile:hover img {
    transform:scale(1.09);
    filter:saturate(1.15)
}

.mosaic-tile:hover .mosaic-caption {
    transform:translateY(0)
}

@media(max-width:700px) {
    .community-mosaic {
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-template-rows:repeat(3,170px);
        gap:10px
    }

    .mosaic-tile:nth-child(1),.mosaic-tile:nth-child(4) {
        grid-column:span 1
    }

    .mosaic-caption {
        font-size:12px;
        left:12px;
        bottom:12px
    }

}

@media(max-width:420px) {
    .community-mosaic {
        grid-template-rows:repeat(3,145px)
    }

}

/* Version 4: eight-image homepage grid, two rows rather than a carousel */

.community-mosaic.home-eight-grid {
    width:min(1280px,calc(100% - 40px));
    margin:0 auto;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    overflow:visible!important;
}

.home-eight-grid .mosaic-tile {
    position:relative!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    height:250px!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    display:block!important;
    border-radius:15px!important;
    overflow:hidden!important;
    transform:none!important;
}

.home-eight-grid .mosaic-tile:nth-child(2),.home-eight-grid .mosaic-tile:nth-child(4),.home-eight-grid .mosaic-tile:nth-child(5),.home-eight-grid .mosaic-tile:nth-child(7) {
    height:280px!important;
}

.home-eight-grid .mosaic-tile img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.home-eight-grid .mosaic-tile:hover img {
    transform:scale(1.08);
}

.home-eight-grid .mosaic-caption {
    position:absolute;
    inset:auto 0 0;
    padding:24px 15px 15px;
    background:linear-gradient(transparent,rgba(12,45,28,.82));
    color:white;
}

@media(max-width:900px) {
    .community-mosaic.home-eight-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

}

@media(max-width:480px) {
    .community-mosaic.home-eight-grid {
        width:calc(100% - 24px);
        gap:10px!important;
    }

    .home-eight-grid .mosaic-tile,.home-eight-grid .mosaic-tile:nth-child(2),.home-eight-grid .mosaic-tile:nth-child(4),.home-eight-grid .mosaic-tile:nth-child(5),.home-eight-grid .mosaic-tile:nth-child(7) {
        height:185px!important;
    }

    .home-eight-grid .mosaic-caption {
        font-size:12px;
        padding:20px 9px 10px;
    }

}

@media(prefers-reduced-motion:reduce) {
    .home-eight-grid .mosaic-tile img {
        transition:none;
    }

}

/* Version 5 — long, individual sunshine rays in alternating saffron orange and golden yellow. */

.intro-stage {
    width:clamp(300px,35vw,440px);
    height:clamp(300px,35vw,440px);
    margin-bottom:16px
}

.intro-stage img {
    width:58%;
    height:58%;
    z-index:3
}

.intro-stage .rays {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border-radius:0;
    background:transparent url("sun-rays.svg") center / contain no-repeat;
    -webkit-mask:none;
    mask:none;
    filter:none;
    opacity:1;
    animation:gentleSunrise 2.2s ease-out both;
    transform-origin:center;
    z-index:1
}

@keyframes gentleSunrise {
    0% {
        opacity:0;
        transform:scale(.75) rotate(-10deg)
    }

    65% {
        opacity:1
    }

    100% {
        opacity:1;
        transform:scale(1) rotate(0deg)
    }

}

.intro .intro-hindi {
    margin:8px 0 5px;
    z-index:4;
    position:relative
}

.intro .intro-english {
    z-index:4;
    position:relative
}

@media(max-width:700px) {
    .intro-stage {
        width:min(360px,88vw);
        height:min(360px,88vw)
    }

}

@media(prefers-reduced-motion:reduce) {
    .intro-stage .rays {
        animation:none
    }

}

/* V6: Ensure all eight gallery cards occupy their grid tracks and cannot overlap CTA. */

.community-mosaic.home-eight-grid {
    grid-template-rows:none!important;
    grid-auto-rows:270px!important;
    align-items:stretch!important;
}

.home-eight-grid .mosaic-tile,.home-eight-grid .mosaic-tile:nth-child(2),.home-eight-grid .mosaic-tile:nth-child(4),.home-eight-grid .mosaic-tile:nth-child(5),.home-eight-grid .mosaic-tile:nth-child(7) {
    height:100%!important;
    min-height:0!important;
}

.home-eight-grid + .home-gallery-action {
    position:relative;
    z-index:1;
    clear:both;
    display:flex;
    justify-content:center;
    margin:36px auto 0!important;
    padding:0 16px;
}

@media(max-width:700px) {
    .community-mosaic.home-eight-grid {
        grid-auto-rows:210px!important;
    }

}

@media(max-width:480px) {
    .community-mosaic.home-eight-grid {
        grid-auto-rows:175px!important;
    }

}

/* Year-wise archive */

.year-archive {
    padding-top:62px;
    padding-bottom:76px;
    background:#faf9f4
}

.archive-intro {
    margin-bottom:26px
}

.archive-jump {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 38px
}

.archive-jump a {
    padding:9px 18px;
    border:1px solid #d7dfd4;
    border-radius:99px;
    color:#204b35;
    text-decoration:none;
    font-weight:750;
    background:white
}

.archive-jump a:hover {
    background:#214b36;
    color:white
}

.archive-year {
    scroll-margin-top:120px;
    margin-bottom:53px
}

.archive-year-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid #d8dfd6;
    padding-bottom:14px;
    margin-bottom:20px
}

.archive-year-heading h2 {
    font-size:clamp(32px,4vw,49px);
    color:#214b36;
    line-height:1.1;
    margin:6px 0 0;
    font-weight:850
}

.archive-year-count {
    color:#67746c;
    font-size:13px;
    font-weight:700
}

.archive-cards {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

.archive-card {
    position:relative;
    display:block;
    width:100%;
    height:225px;
    border:0;
    border-radius:15px;
    overflow:hidden;
    text-align:left;
    padding:0;
    cursor:pointer;
    background:#dce4d9;
    color:white;
    box-shadow:0 4px 18px #173c2b12
}

.archive-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .55s ease
}

.archive-card:hover img,.archive-card:focus-visible img {
    transform:scale(1.07)
}

.archive-card-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(10,36,23,.89),rgba(10,36,23,.03) 78%)
}

.archive-card-info {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:18px 19px;
    display:grid;
    gap:8px
}

.archive-card-title {
    font-size:18px;
    font-weight:800;
    line-height:1.25
}

.archive-card-more {
    font-size:12px;
    color:#ffe3ac;
    font-weight:700
}

.archive-modal[hidden] {
    display:none!important
}

.archive-modal {
    position:fixed;
    inset:0;
    z-index:10000;
    background:#08180fdb;
    padding:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-y:auto
}

.archive-modal-panel {
    width:min(960px,100%);
    max-height:calc(100vh - 50px);
    overflow-y:auto;
    background:#fffdf8;
    border-radius:18px;
    padding:25px
}

.archive-modal-head {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start
}

.archive-modal-head h2 {
    color:#214b36;
    font-size:clamp(22px,3vw,32px);
    margin:5px 0
}

.archive-modal-head p {
    font-size:14px;
    margin:0 0 15px;
    color:#59685f
}

.archive-close {
    background:#f3ede2;
    border:0;
    border-radius:50%;
    width:42px;
    height:42px;
    cursor:pointer;
    font-size:30px;
    color:#244b37;
    flex:none
}

.archive-feature {
    height:min(49vh,450px);
    background:#142e21;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
    border-radius:12px
}

.archive-feature img {
    width:100%;
    height:100%;
    object-fit:contain;
    position:absolute;
    inset:0
}

.archive-feature button {
    position:relative;
    z-index:2;
    border:0;
    border-radius:50%;
    width:42px;
    height:42px;
    margin:10px;
    background:#fffef2e8;
    color:#173c2b;
    font-size:32px;
    cursor:pointer
}

.archive-modal-bottom {
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:#68766c;
    font-size:12px;
    padding:12px 0
}

.archive-thumbs {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px
}

.archive-thumbs button {
    height:85px;
    border:3px solid transparent;
    border-radius:9px;
    overflow:hidden;
    padding:0;
    background:#e5e8e1;
    cursor:pointer
}

.archive-thumbs button.active {
    border-color:#e8752b
}

.archive-thumbs img {
    width:100%;
    height:100%;
    object-fit:cover
}

.archive-card:focus-visible,.archive-close:focus-visible,.archive-feature button:focus-visible {
    outline:3px solid #ef872c;
    outline-offset:3px
}

@media(max-width:850px) {
    .archive-cards {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .archive-card {
        height:205px
    }

}

@media(max-width:540px) {
    .archive-cards {
        gap:10px
    }

    .archive-card {
        height:175px;
        border-radius:10px
    }

    .archive-card-info {
        padding:12px
    }

    .archive-card-title {
        font-size:14px
    }

    .archive-modal {
        padding:8px
    }

    .archive-modal-panel {
        padding:15px;
        max-height:calc(100vh - 16px)
    }

    .archive-thumbs button {
        height:65px
    }

    .archive-year {
        margin-bottom:38px
    }

}

@media(prefers-reduced-motion:reduce) {
    .archive-card img {
        transition:none
    }

}

/* VERSION 8 — 24 visible, smoothly revolving sun rays;
 logo and taglines remain clear */

#intro.intro {
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    background:radial-gradient(ellipse at center,#fff8e8 0%,#fffdf8 56%,#fff 100%);
    padding:18px;
    overflow:auto;
    animation:sv8IntroExit .8s ease 5.45s forwards
}

#intro .intro-v8-content {
    width:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px
}

#intro .intro-v8-sun {
    width:min(390px,74vw,48vh);
    height:min(390px,74vw,48vh);
    aspect-ratio:1;
    position:relative;
    display:grid;
    place-items:center;
    flex:none;
    isolation:isolate
}

#intro .intro-v8-aura {
    position:absolute;
    inset:5%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,205,91,.38),rgba(255,175,49,.16) 48%,transparent 74%);
    filter:blur(19px);
    animation:sv8Glow 3s ease-in-out infinite alternate
}

#intro .intro-v8-rays {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    z-index:1;
    max-width:none;
    animation:sv8RaysBloom 1.65s ease-out both,sv8Spin 28s linear 1.65s infinite;
    transform-origin:center
}

#intro .intro-v8-logo {
    position:relative;
    z-index:2;
    width:62%;
    height:62%;
    border-radius:50%;
    background:#fff;
    display:grid;
    place-items:center;
    box-shadow:0 0 0 4px #ffffffd9,0 0 22px #ffb34145;
    animation:sv8LogoBloom 1.35s cubic-bezier(.2,.8,.2,1) both
}

#intro .intro-v8-logo img {
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
    border-radius:50%;
    animation:none;
    filter:none
}

#intro .intro-v8-text {
    position:relative;
    z-index:3;
    text-align:center;
    width:100%;
    max-width:650px;
    padding:0 10px;
    flex:none
}

#intro .intro-v8-text p {
    display:block;
    margin:0;
    text-align:center;
    white-space:normal;
    overflow:visible;
    font-family:Arial,sans-serif;
    color:#254c34;
    line-height:1.55
}

#intro .intro-v8-hindi {
    font-size:clamp(22px,3vw,31px);
    font-weight:800;
    animation:sv8Text .75s ease 1.5s both
}

#intro .intro-v8-english {
    font-size:clamp(15px,2vw,20px);
    font-weight:600;
    animation:sv8Text .75s ease 2s both
}

#intro .intro-v8-english span {
    color:#ed792d;
    font-weight:800
}

@keyframes sv8Spin {
    from {
        transform:rotate(0deg)
    }

    to {
        transform:rotate(360deg)
    }

}

@keyframes sv8RaysBloom {
    from {
        opacity:0;
        scale:.66
    }

    to {
        opacity:1;
        scale:1
    }

}

@keyframes sv8LogoBloom {
    from {
        opacity:0;
        transform:scale(.65);
        filter:blur(5px)
    }

    to {
        opacity:1;
        transform:scale(1);
        filter:blur(0)
    }

}

@keyframes sv8Glow {
    from {
        opacity:.65;
        transform:scale(.95)
    }

    to {
        opacity:1;
        transform:scale(1.06)
    }

}

@keyframes sv8Text {
    from {
        opacity:0;
        transform:translateY(14px)
    }

    to {
        opacity:1;
        transform:translateY(0)
    }

}

@keyframes sv8IntroExit {
    to {
        opacity:0;
        visibility:hidden;
        pointer-events:none
    }

}

@media(max-width:600px) {
    #intro .intro-v8-sun {
        width:min(320px,83vw,48vh);
        height:min(320px,83vw,48vh)
    }

    #intro .intro-v8-content {
        gap:10px
    }

}

@media(max-height:490px) {
    #intro .intro-v8-sun {
        width:min(230px,40vh);
        height:min(230px,40vh)
    }

    #intro .intro-v8-content {
        gap:4px
    }

    #intro .intro-v8-hindi {
        font-size:20px
    }

    #intro .intro-v8-english {
        font-size:14px
    }

}

@media(prefers-reduced-motion:reduce) {
    #intro.intro {
        display:none!important
    }

}

/* ==========================================
   GALLERY PAGE — REMOVE EXTRA TOP GAP
========================================== */

/* Hide empty gallery hero section */
body:has(.year-archive) .page-hero:empty {
    display: none !important;
}

/* Remove unnecessary top spacing */
body:has(.year-archive) .year-archive {
    padding-top: 25px !important;
    margin-top: 0 !important;
}

/* Remove extra spacing above heading */
body:has(.year-archive) .archive-intro {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep gallery content properly aligned */
body:has(.year-archive) main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}