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

    :root {
      --teal:        #1B6E6E;
      --teal-dark:   #134F4F;
      --teal-light:  #E8F4F4;
      --amber:       #E8930A;
      --amber-dark:  #C4780A;
      --dark:        #1A2935;
      --text:        #2D3748;
      --text-light:  #5A6A78;
      --bg-warm:     #F8F5F0;
      --white:       #FFFFFF;
      --border:      #E2E8F0;
      --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
      --shadow-md:   0 4px 12px rgba(0,0,0,.1);
      --shadow-lg:   0 10px 30px rgba(0,0,0,.15);
      --radius:      12px;
      --radius-lg:   20px;
      --transition:  all .3s ease;
      --bn:          'Hind Siliguri', sans-serif;
      /* Bangla and English are set at the SAME size, but Inter's cap height is
         8.5% taller than Hind Siliguri's main Bengali band at an identical
         font-size (measured, not guessed). Without this correction the Bangla
         reads as the smaller of the two. 1.06 makes them match to the eye. */
      --bn-optical:  1.06;
    }

    html { scroll-behavior: smooth; }
    section[id] { scroll-margin-top: 84px; }
    body { font-family: 'Inter', 'Hind Siliguri', sans-serif; color: var(--text); background: var(--white); line-height: 1.6; overflow-x: hidden; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* ── Utility ── */
    .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 10px;
    }
    .section-tag .tag-sep { color: rgba(232,147,10,.4); }
    .section-tag .tag-bn { font-family: var(--bn); letter-spacing: .02em; text-transform: none; font-size: calc(.75rem * var(--bn-optical)); font-weight: 700; }

    /* Bilingual titles — Bangla on top, English underneath, IDENTICAL font-size.
       The flip is done with column-reverse, so the markup still reads
       <h2 class="section-title">EN</h2><span class="title-bn">BN</span>
       and no HTML had to be reordered. Keep writing new titles in that order. */
    .title-group {
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-start;
      row-gap: 4px;
      margin-bottom: 18px;
    }
    .section-title {
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      font-weight: 700;
      color: var(--dark);
      line-height: 1.22;
    }
    .title-bn {
      font-family: var(--bn);
      font-size: calc(clamp(1.75rem, 3vw, 2.5rem) * var(--bn-optical));  /* see --bn-optical */
      font-weight: 700;
      color: var(--teal);
      line-height: 1.35;
    }
    /* Smaller variant, for a sub-heading inside a section that already has a title */
    .title-group.sub .section-title { font-size: clamp(1.35rem, 2.1vw, 1.85rem); }
    .title-group.sub .title-bn { font-size: calc(clamp(1.35rem, 2.1vw, 1.85rem) * var(--bn-optical)); }
    /* On dark backgrounds */
    .on-dark .title-bn { color: #FFD580; }
    .on-dark .section-title { color: var(--white); }
    .on-dark .section-tag { color: #FFD580; }
    .on-dark .section-tag .tag-sep { color: rgba(255,213,128,.3); }
    .title-group.centered { align-items: center; text-align: center; }

    .subtitle-group { display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: 32px; row-gap: 8px; margin-bottom: 6px; }
    .section-subtitle {
      font-size: 1.02rem;
      color: var(--text-light);
      max-width: 540px;
      line-height: 1.75;
    }
    .subtitle-bn {
      font-family: var(--bn);
      font-size: calc(1.02rem * var(--bn-optical));
      font-weight: 500;
      color: var(--text-light);
      line-height: 1.75;
      max-width: 540px;
    }
    .on-dark .section-subtitle,
    .on-dark .subtitle-bn { color: rgba(255,255,255,.72); }
    .subtitle-group.centered { justify-content: center; }
    .subtitle-group.centered .section-subtitle,
    .subtitle-group.centered .subtitle-bn { text-align: center; }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 50px;
      font-size: .9rem;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      border: 2px solid transparent;
      line-height: 1.2;
    }
    .btn-sep { color: rgba(255,255,255,.4); margin: 0 2px; }
    .btn-bn  { font-family: var(--bn); font-size: calc(.9rem * var(--bn-optical)); font-weight: 600; }
    .btn-primary { background: var(--amber); color: var(--white); }
    .btn-primary:hover { background: var(--amber-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,147,10,.35); }
    .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
    .btn-outline:hover { background: rgba(255,255,255,.15); border-color: var(--white); }
    .btn-teal { background: var(--teal); color: var(--white); }
    .btn-teal:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(27,110,110,.35); }

    /* ── Navigation ── */
    #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 24px; transition: var(--transition); }
    #navbar.scrolled { background: rgba(26,41,53,.96); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,.25); }
    .nav-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; }
    .nav-logo { display: flex; align-items: center; gap: 12px; }
    .nav-logo-icon { width: 42px; height: 42px; background: var(--teal); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .nav-logo-icon svg { width: 24px; height: 24px; }
    .nav-logo-text { line-height: 1.15; }
    .nav-logo-text .en { font-size: .92rem; font-weight: 700; color: var(--white); display: block; }
    .nav-logo-text .bn { font-size: calc(.92rem * var(--bn-optical)); font-weight: 700; color: rgba(255,255,255,.85); font-family: var(--bn); display: block; }
    .nav-links { display: flex; align-items: center; gap: 22px; }
    .nav-link-inner { display: flex; flex-direction: row; align-items: baseline; gap: 6px; position: relative; }
    .nav-link-inner .nl-en { font-size: .86rem; font-weight: 500; color: rgba(255,255,255,.85); transition: var(--transition); }
    .nav-link-inner .nl-bn { font-family: var(--bn); font-size: calc(.86rem * var(--bn-optical)); font-weight: 500; color: rgba(255,255,255,.85); letter-spacing: .01em; transition: var(--transition); }
    .nav-links a { transition: var(--transition); }
    .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--amber); transform: scaleX(0); transition: transform .25s ease; }
    .nav-links a:hover .nl-en, .nav-links a:hover .nl-bn { color: var(--white); }
    .nav-links a:hover::after { transform: scaleX(1); }
    .nav-cta { margin-left: 8px; padding: 10px 20px; font-size: .85rem; }
    .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
    .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); }
    .nav-mobile { display: none; position: fixed; top: 72px; left: 0; right: 0; background: rgba(26,41,53,.98); backdrop-filter: blur(12px); padding: 24px; flex-direction: column; gap: 4px; z-index: 999; }
    .nav-mobile.open { display: flex; }
    .nav-mobile a { color: rgba(255,255,255,.85); font-size: 1rem; font-weight: 500; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
    .nav-mobile a .nm-bn { font-family: var(--bn); font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.85); margin-left: 6px; }
    .nav-mobile .btn { align-self: flex-start; margin-top: 12px; }

    /* ── Hero ── */
    #hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
    /* Opens on the river running through Berbari, not on a beneficiary's blurred face. */
    .hero-bg { position: absolute; inset: 0; background-image: url('../images/village-aerial-1.jpeg'); background-size: cover; background-position: center 45%; transform: scale(1.06); transition: transform 9s ease; }
    #hero.loaded .hero-bg { transform: scale(1); }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,41,53,.82) 0%, rgba(19,79,79,.62) 42%, rgba(26,41,53,.88) 100%); }
    .hero-content { position: relative; z-index: 2; max-width: 880px; padding: 130px 24px 96px; margin: 0 auto; text-align: center; }
    .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(232,147,10,.2); border: 1px solid rgba(232,147,10,.4); color: #FFD580; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 50px; margin-bottom: 24px; }
    .hero-badge .badge-bn { font-family: var(--bn); letter-spacing: .02em; text-transform: none; font-size: .82rem; }
    .hero-badge .badge-sep { opacity: .4; }
    /* Bangla headline sits above the English one, same size (column-reverse). */
    .hero-title-group { display: flex; flex-direction: column-reverse; align-items: center; row-gap: 10px; margin-bottom: 28px; }
    .hero-title { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; color: var(--white); line-height: 1.16; }
    .hero-title em { font-style: normal; color: #FFD580; }
    .hero-title-bn { display: block; font-family: var(--bn); font-size: calc(clamp(2rem, 4.4vw, 3.2rem) * var(--bn-optical)); font-weight: 700; color: #FFD580; line-height: 1.35; }
    .hero-subtitle { font-size: clamp(.95rem, 1.5vw, 1.05rem); color: rgba(255,255,255,.86); line-height: 1.8; margin-bottom: 10px; max-width: 700px; margin-left: auto; margin-right: auto; }
    .hero-subtitle-bn { display: block; font-family: var(--bn); font-weight: 500; font-size: calc(clamp(.95rem, 1.5vw, 1.05rem) * var(--bn-optical)); color: rgba(255,255,255,.86); line-height: 1.8; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; }
    .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
    .hero-scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.6); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; animation: bounce 2s infinite; }
    .hero-scroll svg { width: 20px; height: 20px; }
    @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

    /* ── Stats ── */
    #stats { background: var(--teal); padding: 56px 24px; }
    .stats-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
    .stat-item { padding: 16px; }
    .stat-number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 6px; }
    .stat-number span { color: #FFD580; }
    .stat-label { font-size: .875rem; color: rgba(255,255,255,.85); font-weight: 500; }
    .stat-label-bn { font-family: var(--bn); font-weight: 500; font-size: .875rem; color: rgba(255,255,255,.85); margin-top: 2px; display: block; }

    /* ── About ── */
    #about { padding: 96px 24px; background: var(--white); }
    .about-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .about-images { position: relative; }
    .about-img-main { width: 100%; height: 460px; object-fit: cover; object-position: center 38%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
    .about-img-accent { position: absolute; bottom: -46px; right: -40px; width: 42%; height: 190px; object-fit: cover; object-position: center 62%; border-radius: var(--radius); border: 6px solid var(--white); box-shadow: var(--shadow-md); }
    .about-badge { position: absolute; top: -20px; left: 24px; background: var(--amber); color: var(--white); font-size: .78rem; font-weight: 700; padding: 10px 18px; border-radius: 50px; box-shadow: var(--shadow-md); letter-spacing: .04em; }
    .about-text { padding-bottom: 28px; }
    .about-images { margin-bottom: 28px; }
    /* The About column is only ~540px wide; splitting it into two made both
       languages read as a narrow ribbon. Full width, English then Bangla. */
    .bilingual-para { margin-bottom: 22px; }
    .bilingual-para .about-para-en { margin-bottom: 8px; }
    .about-para-en { color: var(--text-light); font-size: 1rem; line-height: 1.8; }
    .about-para-bn { font-family: var(--bn); font-size: 1rem; font-weight: 500; color: var(--text-light); line-height: 1.75; }
    .about-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
    .highlight-item { display: flex; align-items: flex-start; gap: 12px; }
    .highlight-icon { width: 36px; height: 36px; min-width: 36px; background: var(--teal-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    .highlight-icon svg { width: 18px; height: 18px; color: var(--teal); }
    .highlight-text { font-size: .85rem; font-weight: 500; color: var(--text); line-height: 1.3; margin-top: 2px; }
    .highlight-text .ht-bn { font-family: var(--bn); font-size: .85rem; color: var(--text); font-weight: 500; }
    .about-para-en { font-size: 1.02rem; }
    .about-para-bn { font-size: calc(1.02rem * var(--bn-optical)); }
    .highlight-text .ht-bn::before { content: ' · '; color: var(--teal); }

    /* ── Our Village ── */
    #village { background: var(--white); }
    .village-banner { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; padding: 96px 24px; overflow: hidden; }
    .village-banner-bg { position: absolute; inset: 0; background-image: url('../images/village-aerial-9.jpeg'); background-size: cover; background-position: center 55%; }
    .village-banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,41,53,.8) 0%, rgba(26,41,53,.45) 45%, rgba(19,79,79,.85) 100%); }
    .village-banner-content { position: relative; z-index: 2; max-width: 880px; text-align: center; }
    .village-banner-content .section-subtitle,
    .village-banner-content .subtitle-bn { color: rgba(255,255,255,.82); margin: 0 auto; }
    .village-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .village-fact { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 50px; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); color: var(--white); font-size: .82rem; font-weight: 600; }
    .village-fact svg { width: 15px; height: 15px; min-width: 15px; color: #FFD580; }
    .village-fact .vf-bn { font-family: var(--bn); font-weight: 600; }
    .village-fact .vf-bn::before { content: '· '; color: rgba(255,255,255,.45); }

    /* The aerials carry themselves — no captions, no dates. One wide lead photo,
       then a four-up row, so the mosaic has some rhythm instead of a flat 3x2. */
    .village-body { max-width: 1160px; margin: 0 auto; padding: 64px 24px 104px; }
    .village-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .village-grid figure { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-warm); }
    .village-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
    .village-grid figure:hover img { transform: scale(1.05); }
    .village-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    .village-grid figure:nth-child(1) img { min-height: 460px; }
    .village-grid figure:nth-child(n+2) img { height: 222px; }

    /* ── Our work: the programmes AND the photographs from the field, in ONE
       section on ONE background. They used to be two sections on two different
       backgrounds, which is exactly why they read as unrelated. ── */
    #programs { padding: 104px 24px 112px; background: var(--bg-warm); }
    .work-header { max-width: 760px; margin: 0 auto 56px; text-align: center; display: flex; flex-direction: column; align-items: center; }
    .work-subhead { max-width: 760px; margin: 88px auto 44px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; scroll-margin-top: 96px; }
    .work-subhead::before { content: ''; display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--amber); margin-bottom: 32px; }
    .work-cta { max-width: 1160px; margin: 56px auto 0; display: flex; justify-content: center; }
    .programs-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .program-card { display: block; background: var(--white); border-radius: var(--radius-lg); padding: 32px 28px; border: 1px solid var(--border); transition: var(--transition); position: relative; overflow: hidden; }
    .program-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: .8rem; font-weight: 700; color: var(--teal); }
    .program-card:hover .program-more { color: var(--amber-dark); }
    .program-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
    .program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .program-card:hover::before { transform: scaleX(1); }
    .program-icon { width: 56px; height: 56px; background: var(--teal-light); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: var(--transition); }
    .program-card:hover .program-icon { background: var(--teal); }
    .program-icon svg { width: 28px; height: 28px; color: var(--teal); transition: var(--transition); }
    .program-card:hover .program-icon svg { color: var(--white); }
    /* Same Bangla-above-English rule at card scale. */
    .card-title { display: flex; flex-direction: column-reverse; align-items: flex-start; row-gap: 2px; margin-bottom: 10px; }
    .card-title.centered { align-items: center; text-align: center; }
    .program-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark); }
    .program-bn { font-family: var(--bn); font-size: calc(1.1rem * var(--bn-optical)); font-weight: 700; color: var(--teal); }
    .program-card p { font-size: .875rem; color: var(--text-light); line-height: 1.7; }

    /* ── Field photographs (inside #programs) ── */
    .stories-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
    .story-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: var(--transition); }
    .story-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .story-img-wrap { position: relative; height: 264px; overflow: hidden; }
    .story-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
    .story-card:hover .story-img-wrap img { transform: scale(1.05); }
    .story-img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,41,53,.7) 0%, transparent 50%); }
    .story-location { position: absolute; bottom: 16px; left: 16px; display: flex; align-items: center; gap: 6px; color: var(--white); font-size: .8rem; font-weight: 500; }
    .story-location svg { width: 14px; height: 14px; }
    .story-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
    .story-program { display: inline-block; align-self: flex-start; background: var(--teal-light); color: var(--teal); font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; margin-bottom: 10px; letter-spacing: .04em; }
    .story-program .sp-bn { font-family: var(--bn); letter-spacing: .01em; font-size: .72rem; }
    .story-body h3 { font-size: 1.02rem; font-weight: 700; color: var(--dark); line-height: 1.4; }
    .story-body .sh-bn { font-family: var(--bn); font-size: calc(1.02rem * var(--bn-optical)); font-weight: 700; color: var(--teal); line-height: 1.45; }
    /* the middot is styled white for buttons; on a light card it needs a teal one */
    .program-more .btn-sep, .story-more .btn-sep { color: rgba(27,110,110,.4); }
    .story-more { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; margin-top: auto; padding-top: 14px; font-size: .8rem; font-weight: 700; color: var(--teal); }
    .story-card:hover .story-more { color: var(--amber-dark); }
    .story-body p { font-size: .875rem; color: var(--text-light); line-height: 1.65; }

    /* ── Values ── */
    #values { padding: 96px 24px; background: var(--dark); position: relative; overflow: hidden; }
    .values-bg { position: absolute; inset: 0; background-image: url('../images/village-aerial-4.jpeg'); background-size: cover; background-position: center; opacity: .1; }
    .values-header { max-width: 1160px; margin: 0 auto 56px; text-align: center; position: relative; }
    .values-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; position: relative; }
    .value-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; transition: var(--transition); backdrop-filter: blur(8px); }
    .value-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
    .value-icon { width: 64px; height: 64px; background: rgba(232,147,10,.15); border: 2px solid rgba(232,147,10,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
    .value-icon svg { width: 30px; height: 30px; color: var(--amber); }
    .value-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--white); }
    .value-bn { font-family: var(--bn); font-size: calc(1.15rem * var(--bn-optical)); font-weight: 700; color: #FFD580; }
    .value-card .card-title { align-items: center; text-align: center; margin-bottom: 14px; }
    .value-card p { font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.7; }

    /* ── Donate ── */
    #donate { padding: 96px 24px; background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%); position: relative; overflow: hidden; text-align: center; }
    #donate::before { content: ''; position: absolute; top: -60px; right: -60px; width: 320px; height: 320px; background: rgba(255,255,255,.04); border-radius: 50%; }
    #donate::after  { content: ''; position: absolute; bottom: -80px; left: -40px; width: 240px; height: 240px; background: rgba(255,255,255,.04); border-radius: 50%; }
    .donate-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
    .donate-content p { color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.75; margin-bottom: 6px; }
    .donate-content .dp-bn { font-family: var(--bn); font-weight: 500; font-size: 1rem; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 36px; }
    .donate-amounts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
    .donate-amount { padding: 10px 22px; border: 2px solid rgba(255,255,255,.4); border-radius: 50px; color: var(--white); font-size: .9rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
    .donate-amount:hover, .donate-amount.active { background: var(--amber); border-color: var(--amber); }
    .donate-disclaimer { margin-top: 20px; font-size: .78rem; color: rgba(255,255,255,.45); }

    /* ── Contact ── */
    #contact { padding: 96px 24px; background: var(--bg-warm); }
    .contact-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
    .contact-info { padding-top: 8px; }
    .contact-items { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
    .contact-item { display: flex; align-items: flex-start; gap: 16px; }
    .contact-item-icon { width: 44px; height: 44px; min-width: 44px; background: var(--teal); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
    .contact-item-icon svg { width: 20px; height: 20px; color: var(--white); }
    .contact-item-text label { display: block; font-size: .72rem; font-weight: 600; color: var(--text-light); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
    .contact-item-text p, .contact-item-text a { font-size: .95rem; color: var(--text); font-weight: 500; }
    .contact-form { background: var(--white); border-radius: var(--radius-lg); padding: 48px 40px; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
    .contact-form h3 { font-size: 1.22rem; font-weight: 700; color: var(--dark); }
    .contact-form .form-title { margin-bottom: 24px; }
    .contact-form .form-h-bn { font-family: var(--bn); font-size: calc(1.22rem * var(--bn-optical)); font-weight: 700; color: var(--teal); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: .825rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; font-size: .9rem; color: var(--text); font-family: inherit; background: var(--white); transition: border-color .2s; outline: none; }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--teal); }
    .form-group textarea { resize: vertical; min-height: 110px; }
    .form-submit { width: 100%; padding: 14px; border: none; }

    /* ── Footer ── */
    footer { background: var(--dark); padding: 72px 24px 0; }
    .footer-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; }
    .footer-brand .nav-logo { margin-bottom: 16px; }
    .footer-brand p { font-size: .875rem; color: rgba(255,255,255,.6); line-height: 1.75; max-width: 280px; margin-bottom: 4px; }
    .footer-brand .fb-bn { font-family: var(--bn); font-weight: 500; font-size: .875rem; color: rgba(255,255,255,.6); line-height: 1.7; max-width: 280px; margin-bottom: 24px; display: block; }
    .footer-socials { display: flex; gap: 12px; }
    .footer-social { width: 38px; height: 38px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
    .footer-social svg { width: 18px; height: 18px; color: rgba(255,255,255,.6); }
    .footer-social:hover { background: var(--teal); border-color: var(--teal); }
    .footer-social:hover svg { color: var(--white); }
    .footer-col h4 { font-size: .8rem; font-weight: 700; color: var(--white); margin-bottom: 16px; letter-spacing: .06em; text-transform: uppercase; }
    .footer-col h4 .fh-bn { font-family: var(--bn); font-size: .8rem; color: rgba(255,255,255,.85); letter-spacing: .01em; text-transform: none; font-weight: 700; }
    .footer-col h4 .fh-bn::before { content: ' · '; color: rgba(255,255,255,.4); }
    .footer-col ul { display: flex; flex-direction: column; gap: 10px; }
    .footer-col ul a { font-size: .875rem; color: rgba(255,255,255,.55); transition: var(--transition); }
    .footer-col ul a:hover { color: var(--amber); }
    .footer-contact-line { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: rgba(255,255,255,.55); margin-bottom: 10px; }
    .footer-contact-line svg { width: 15px; height: 15px; color: var(--teal); min-width: 15px; }
    .footer-bottom { max-width: 1160px; margin: 0 auto; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
    .footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.35); }
    .footer-bottom a { color: rgba(255,255,255,.5); transition: var(--transition); }
    .footer-bottom a:hover { color: var(--amber); }
    .footer-bottom-links { display: flex; gap: 20px; }

    /* ── Animations ── */
    .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .about-grid { grid-template-columns: 1fr; gap: 48px; }
      .about-images { order: -1; max-width: 600px; margin: 0 auto; }
      .about-img-accent { right: 0; }
      .contact-grid { grid-template-columns: 1fr; gap: 48px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    /* Logo + six bilingual nav links + Donate need ~1092px inside the 1160px
       nav-inner. Below ~1180px viewport they start crowding each other, so switch
       to the hamburger there rather than at the old 768px. */
    @media (max-width: 1180px) {
      .nav-links, .nav-cta { display: none; }
      .nav-hamburger { display: flex; }
    }
    @media (max-width: 900px) {
      .subtitle-group { flex-direction: column; column-gap: 0; row-gap: 4px; }
      .village-grid figure:nth-child(1) img { min-height: 320px; }
    }
    @media (max-width: 768px) {
      .stats-grid { grid-template-columns: repeat(2,1fr); }
      .programs-grid { grid-template-columns: 1fr 1fr; }
      .stories-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
      .values-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
      .footer-grid { grid-template-columns: 1fr; gap: 36px; }
      .about-highlights { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .contact-form { padding: 32px 24px; }
      .bilingual-para { grid-template-columns: 1fr; gap: 6px; }
      .village-banner { min-height: 400px; padding: 72px 20px; }
      .village-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .village-grid figure:nth-child(1) { grid-column: auto; grid-row: auto; }
      .village-grid figure:nth-child(1) img { min-height: 0; height: 180px; }
      .village-grid figure:nth-child(n+2) img { height: 180px; }
      .village-body { padding: 48px 24px 72px; }
      #programs { padding: 72px 24px 80px; }
      .work-subhead { margin-top: 64px; }
    }
    @media (max-width: 480px) {
      .programs-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .village-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
      .village-grid figure:nth-child(1) { grid-column: auto; }
      .village-grid figure:nth-child(n+1) img { height: 220px; min-height: 0; }
    }

    /* ── Program detail page ── */
    .page-hero { position: relative; padding: 150px 24px 80px; overflow: hidden; background: var(--dark); }
    .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; }
    .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,41,53,.92) 0%, rgba(27,110,110,.7) 100%); }
    .page-hero-content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center; }
    .breadcrumb { display: flex; justify-content: center; gap: 8px; font-size: .82rem; color: rgba(255,255,255,.55); margin-bottom: 20px; }
    .breadcrumb a { color: rgba(255,255,255,.75); }
    .breadcrumb a:hover { color: var(--white); }

    .program-detail { padding: 80px 24px; background: var(--white); }
    .program-detail-grid { max-width: 1000px; margin: 0 auto; }
    .detail-para { color: var(--text-light); font-size: 1.05rem; line-height: 1.85; margin-bottom: 20px; }
    .detail-para-bn { font-family: var(--bn); font-weight: 500; font-size: calc(1.05rem * var(--bn-optical)); color: var(--text-light); line-height: 1.85; margin-bottom: 20px; }
    .bilingual-block { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
    .bilingual-block .detail-para, .bilingual-block .detail-para-bn { margin-bottom: 0; }

    .gallery-heading { max-width: 1000px; margin: 56px auto 0; display: flex; flex-direction: column-reverse; align-items: flex-start; row-gap: 2px; }
    .gallery-heading h3 { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
    .gallery-heading .gh-bn { font-family: var(--bn); font-size: calc(1.15rem * var(--bn-optical)); font-weight: 700; color: var(--teal); }
    .gallery-heading + .gallery { margin-top: 20px; }

    .gallery { max-width: 1000px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .gallery figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
    .gallery img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s ease; }
    .gallery figure:hover img { transform: scale(1.06); }
    .gallery figcaption { font-size: .7rem; color: var(--text-light); padding: 6px 2px 0; opacity: .65; }

    .detail-cta { max-width: 1000px; margin: 56px auto 0; background: var(--teal-light); border-radius: var(--radius-lg); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .detail-cta > div:first-child { display: flex; flex-direction: column-reverse; align-items: flex-start; row-gap: 2px; }
    .detail-cta h3 { font-size: 1.18rem; font-weight: 700; color: var(--dark); }
    .detail-cta .dc-bn { font-family: var(--bn); font-weight: 700; font-size: calc(1.18rem * var(--bn-optical)); color: var(--teal); display: block; }

    @media (max-width: 768px) {
      .bilingual-block { grid-template-columns: 1fr; gap: 4px; }
      .gallery { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
      .gallery { grid-template-columns: 1fr; }
    }

/* ── Contact form honeypot ──────────────────────────────────────────────────
   Hidden from people, still present in the DOM for bots to fall into. Moved
   off-screen rather than display:none, which some bots know to skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Brand emblem ───────────────────────────────────────────────────────────
   The logo is a detailed circular illustration with the organisation's Bangla
   name set inside it. That detail only survives at size, so the small uses are
   treated as a colour mark and the About seal is where the artwork is actually
   meant to be read. The drop-shadow is what keeps the navbar instance legible
   while it is sitting over the hero photograph. */
.nav-logo-icon {
  background: none;
  border-radius: 0;
  width: 46px;
  height: 46px;
}
.nav-logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3));
}
.footer-brand .nav-logo-icon { width: 56px; height: 56px; }

/* The emblem crowning the hero. It carries the organisation's name in Bangla,
   so it sits above the location badge and title rather than competing with
   them. All of the logo's white is transparent, which is what lets it sit
   directly on the photograph without a plate behind it - the drop-shadow is
   doing the work of separating it from the foliage. */
.hero-logo {
  display: block;
  height: 158px;
  width: auto;
  margin: 0 auto 26px;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .55));
}

@media (max-width: 768px) {
  .hero-logo { height: 94px; margin-bottom: 18px; }
  .nav-logo-icon { width: 40px; height: 40px; }
}