/* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
                  transform 0.75s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.from-left  { transform: translateX(-36px); }
    .reveal.from-right { transform: translateX(36px); }
    .reveal.visible    { opacity: 1; transform: translate(0,0); }

    /* ══════════════════════════════
       01 COUNTER DASHBOARD
    ══════════════════════════════ */
    .counter-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(3.5rem, 8vw, 6.5rem);
      line-height: 1;
      letter-spacing: -0.03em;
      color: #C49A3C;
    }
    .counter-card {
      border-bottom: 1px solid rgba(196,154,60,0.12);
      transition: background 0.3s ease;
    }
    .counter-card:last-child { border-bottom: none; }
    @media (min-width: 768px) {
      .counter-card {
        border-bottom: none;
        border-right: 1px solid rgba(196,154,60,0.12);
      }
      .counter-card:last-child { border-right: none; }
    }

    /* ══════════════════════════════
       02 THEORY OF CHANGE
    ══════════════════════════════ */
    .toc-node {
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .toc-node:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(28,58,42,0.12);
    }
    .toc-arrow {
      color: rgba(196,154,60,0.4);
      flex-shrink: 0;
    }
    /* Color-coded node tops */
    .toc-node-0 { border-top: 3px solid #7A7A6E; }
    .toc-node-1 { border-top: 3px solid #C49A3C; }
    .toc-node-2 { border-top: 3px solid #DDB96A; }
    .toc-node-3 { border-top: 3px solid #1C3A2A; }
    .toc-node-4 { border-top: 3px solid #0E2019; }

    /* ══════════════════════════════
       03 STORY CARDS
    ══════════════════════════════ */
    .story-card {
      position: relative;
      overflow: hidden;
      transition: transform 0.4s ease;
    }
    .story-card:hover { transform: translateY(-6px); }
    .story-img {
      transition: transform 0.55s ease;
    }
    .story-card:hover .story-img { transform: scale(1.04); }
    .story-tag {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 500;
    }

    /* ══════════════════════════════
       04 FUND TRANSPARENCY BARS
    ══════════════════════════════ */
    .alloc-bar-bg {
      height: 10px;
      background: rgba(28,58,42,0.12);
      border-radius: 5px;
      overflow: hidden;
    }
    .alloc-bar-fill {
      height: 100%;
      border-radius: 5px;
      width: 0%;
      transition: width 1.4s cubic-bezier(0.22,1,0.36,1);
    }
    .alloc-bar-fill.gold   { background: linear-gradient(to right, #C49A3C, #DDB96A); }
    .alloc-bar-fill.forest { background: linear-gradient(to right, #1C3A2A, #2d5a42); }
    .alloc-bar-fill.mid    { background: linear-gradient(to right, #7A7A6E, #9a9a8e); }
    .alloc-bar-fill.dark   { background: #0E2019; }

    /* ══════════════════════════════
       05 SDG BADGES
    ══════════════════════════════ */
    .sdg-badge {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      cursor: default;
    }
    .sdg-badge:hover {
      transform: translateY(-4px) scale(1.04);
      box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    }

    /* ══════════════════════════════
       06 GEOGRAPHIC REACH
    ══════════════════════════════ */
    .region-pill {
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }
    .region-pill:hover {
      background: #C49A3C;
      color: white;
      border-color: #C49A3C;
    }

    /* ══════════════════════════════
       07 MASONRY GALLERY
    ══════════════════════════════ */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 180px);
      gap: 10px;
    }
    @media (max-width: 768px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 160px);
      }
    }
    .g1 { grid-column: span 2; grid-row: span 2; }
    .g2 { grid-column: span 1; grid-row: span 1; }
    .g3 { grid-column: span 1; grid-row: span 2; }
    .g4 { grid-column: span 2; grid-row: span 1; }
    .g5 { grid-column: span 1; grid-row: span 1; }
    .g6 { grid-column: span 1; grid-row: span 1; }
    .gallery-item {
      overflow: hidden;
      border-radius: 14px;
      position: relative;
    }
    .gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .gallery-item:hover img { transform: scale(1.06); }
    .gallery-item .caption {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(14,32,25,0.7) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.35s ease;
      display: flex;
      align-items: flex-end;
      padding: 14px;
    }
    .gallery-item:hover .caption { opacity: 1; }

    /* ══════════════════════════════
       08 REPORT CARD
    ══════════════════════════════ */
    .report-card {
      background: linear-gradient(135deg, #1C3A2A 0%, #0E2019 100%);
      position: relative;
      overflow: hidden;
    }
    .report-card::before {
      content: '2024';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Cormorant Garamond', serif;
      font-size: 9rem;
      font-weight: 300;
      color: rgba(196,154,60,0.06);
      pointer-events: none;
      line-height: 1;
    }

    /* ── HR gold ── */
    .hr-gold { border: none; height: 1px; background: linear-gradient(to right, #C49A3C, transparent); }

    /* ── Pledge input ── */
    .pledge-input {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(196,154,60,0.25);
      color: #F7F3ED;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .pledge-input:focus {
      outline: none;
      border-color: #C49A3C;
      background: rgba(255,255,255,0.1);
    }
    .pledge-input::placeholder { color: rgba(247,243,237,0.3); }