* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      :root {
        --org: #c85000;
        --org-dk: #9a3d00;
        --org-lt: #fdeee5;
        --org-mid: #e86020;
        --grn: #2e6b28;
        --grn-dk: #1a4516;
        --grn-lt: #e4f5e2;
        --grn-mid: #3d8a36;
        --gld: #b8900a;
        --gld-lt: #fdf3ce;
        --gld-mid: #d4a820;
        --brn: #5c2e00;
        --warm-dk: #2a1200;
        --warm-mid: #6b3810;
        --cream: #fffdf8;
        --tan: #f5ecd8;
        --sand: #ede0c8;
        --text: #1a0a00;
        --text-muted: #6b4a20;
        --border: #d8c8a8;
        --white: #ffffff;
      }
      body {
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        background: var(--cream);
        color: var(--text);
        line-height: 1.6;
        font-size: 16px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      [role="main"] {
        flex: 1;
      }
      a {
        text-decoration: none;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }

      /* ── NAV ── */
      .nav {
        background: var(--warm-dk);
        padding: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 4px solid var(--org-mid);
      }
      .nav-brand {
        font-size: 13px;
        font-weight: 700;
        color: #fff3e0;
        letter-spacing: 0.02em;
        line-height: 1.35;
        max-width: 180px;
      }
      .nav-links {
        display: flex;
        gap: 3px;
        flex-wrap: wrap;
      }
      .nav-links a {
        color: #e8c898;
        font-size: 12.5px;
        font-weight: 500;
        text-decoration: none;
        padding: 7px 11px;
        border-radius: 7px;
        cursor: pointer;
        transition: all 0.15s;
      }
      .nav-links a:hover {
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
      }
      .nav-links a.donate-btn {
        background: var(--org-mid);
        color: #fff;
        font-weight: 700;
        padding: 7px 14px;
      }
      .nav-links a.donate-btn:hover {
        background: var(--org);
      }

      /* ── HERO ── */
      .hero {
        background: linear-gradient(
          160deg,
          var(--warm-dk) 0%,
          #3a1800 60%,
          #1a0800 100%
        );
        padding: 3.5rem 2rem 0;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(
          ellipse at 50% 0%,
          rgba(200, 80, 0, 0.18) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .hero::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: linear-gradient(
          90deg,
          var(--grn-mid),
          var(--org-mid),
          var(--gld-mid)
        );
      }
      .hero-badge {
        display: inline-block;
        background: rgba(212, 168, 32, 0.2);
        color: #ffe08a;
        font-size: 11.5px;
        font-weight: 600;
        padding: 5px 16px;
        border-radius: 20px;
        border: 1px solid rgba(212, 168, 32, 0.45);
        margin-bottom: 1.25rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .hero h1 {
        font-size: 28px;
        font-weight: 800;
        color: #fffaf0;
        line-height: 1.3;
        max-width: 580px;
        margin: 0 auto 0.85rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
      }
      .hero-tagline {
        font-size: 15px;
        color: #d4b888;
        max-width: 500px;
        margin: 0 auto 1.75rem;
        line-height: 1.7;
        font-style: italic;
      }
      .hero-cta {
        display: inline-flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 1.75rem;
      }
      .hero-photos {
        display: flex;
        gap: 5px;
        height: 200px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .hero-photos img {
        flex: 0 0 calc(25% - 4px);
        min-width: 200px;
        object-fit: cover;
        object-position: center 25%;
        scroll-snap-align: start;
      }

      /* ── BUTTONS ── */
      .btn-primary {
        background: var(--org-mid);
        color: #fff;
        padding: 11px 26px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        border: none;
        transition: all 0.15s;
        letter-spacing: 0.02em;
        box-shadow: 0 2px 8px rgba(200, 80, 0, 0.4);
      }
      .btn-primary:hover {
        background: var(--org);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(200, 80, 0, 0.45);
      }
      .btn-green {
        background: var(--grn-mid);
        color: #fff;
        padding: 11px 26px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        border: none;
        transition: all 0.15s;
        box-shadow: 0 2px 8px rgba(46, 107, 40, 0.4);
      }
      .btn-green:hover {
        background: var(--grn);
        transform: translateY(-1px);
      }
      .btn-outline {
        background: transparent;
        color: #e8c898;
        padding: 11px 26px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        border: 1.5px solid rgba(255, 255, 255, 0.35);
        cursor: pointer;
        transition: all 0.15s;
      }
      .btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
      }

      /* ── STATS BAR ── */
      .stats-bar {
        background: linear-gradient(90deg, var(--brn) 0%, var(--warm-mid) 100%);
        display: flex;
        justify-content: center;
      }
      .stat-item {
        padding: 1.1rem 1.75rem;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        flex: 1;
        max-width: 185px;
      }
      .stat-item:last-child {
        border-right: none;
      }
      .stat-num {
        font-size: 19px;
        font-weight: 800;
        color: #ffe08a;
      }
      .stat-label {
        font-size: 10.5px;
        color: #c4a872;
        margin-top: 3px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 500;
      }

      /* ── LAYOUT ── */
      .section-wrapper {
        background: var(--cream);
      }
      .section {
        padding: 3rem 2rem;
        max-width: 920px;
        margin: 0 auto;
      }
      .section-title {
        font-size: 24px;
        font-weight: 800;
        color: var(--brn);
        margin-bottom: 0.4rem;
        letter-spacing: -0.01em;
      }
      .section-sub {
        font-size: 15px;
        color: var(--text-muted);
        margin-bottom: 1.75rem;
      }
      .org-rule {
        width: 44px;
        height: 4px;
        background: linear-gradient(90deg, var(--org-mid), var(--gld-mid));
        border-radius: 2px;
        margin-bottom: 1.5rem;
      }

      /* ── PROGRAM CARDS ── */
      .programs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
      }
      .program-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        padding: 1.5rem;
        transition: all 0.2s;
        box-shadow: 0 1px 4px rgba(92, 46, 0, 0.06);
      }
      .program-card:hover {
        box-shadow: 0 6px 20px rgba(92, 46, 0, 0.12);
        transform: translateY(-2px);
      }
      .program-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.85rem;
        font-size: 24px;
      }
      .program-card h3 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 0.4rem;
        color: var(--brn);
      }
      .program-card p {
        font-size: 13.5px;
        color: var(--text-muted);
        line-height: 1.65;
      }

      /* ── PHOTOS ── */
      .photo-grid-3 {
        display: flex;
        gap: 10px;
        margin-top: 1.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .photo-grid-3 img {
        flex: 0 0 calc(33.333% - 7px);
        min-width: 220px;
        height: 220px;
        object-fit: cover;
        border-radius: 12px;
        scroll-snap-align: start;
      }
      .photo-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 1.75rem;
      }
      .photo-pair img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        object-position: center 25%;
        border-radius: 12px;
      }
      .photo-full {
        margin: 1.5rem 0;
      }
      .photo-full img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        object-position: center 30%;
        border-radius: 14px;
      }

      /* ── ABOUT ── */
      .mv-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 1.25rem;
      }
      .mv-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        padding: 1.5rem;
        border-left: 5px solid var(--org-mid);
        box-shadow: 0 1px 4px rgba(92, 46, 0, 0.06);
      }
      .mv-card h3 {
        font-size: 11px;
        font-weight: 800;
        color: var(--org);
        text-transform: uppercase;
        letter-spacing: 0.09em;
        margin-bottom: 0.6rem;
      }
      .mv-card p {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.75;
      }
      .about-text p {
        font-size: 15px;
        line-height: 1.9;
        color: var(--text-muted);
        margin-bottom: 1.1rem;
      }

      /* ── MEMORIAM ── */
      .memoriam-card {
        background: linear-gradient(135deg, #1e0a00, #2e1400);
        border-radius: 14px;
        padding: 1.5rem 1.75rem;
        margin-top: 1.75rem;
        display: flex;
        gap: 1.1rem;
        align-items: flex-start;
        border: 1px solid rgba(212, 168, 32, 0.35);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
      }
      .memoriam-icon {
        font-size: 26px;
        flex-shrink: 0;
        margin-top: 2px;
      }
      .memoriam-card h4 {
        font-size: 15px;
        font-weight: 700;
        color: #ffe08a;
        margin-bottom: 5px;
      }
      .memoriam-card p {
        font-size: 13.5px;
        color: #c4a872;
        line-height: 1.7;
      }
      .memoriam-tag {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 11px;
        border-radius: 10px;
        background: rgba(212, 168, 32, 0.18);
        color: #ffe08a;
        border: 1px solid rgba(212, 168, 32, 0.4);
        margin-bottom: 6px;
        letter-spacing: 0.07em;
        text-transform: uppercase;
      }

      /* ── TEAM ── */
      .subsection-label {
        font-size: 12px;
        font-weight: 800;
        color: var(--brn);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.85rem;
        margin-top: 2.25rem;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .subsection-label::after {
        content: "";
        flex: 1;
        height: 1.5px;
        background: linear-gradient(90deg, var(--border), transparent);
      }
      .bio-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        margin-bottom: 14px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(92, 46, 0, 0.06);
        transition: box-shadow 0.2s;
      }
      .bio-card:hover {
        box-shadow: 0 4px 16px rgba(92, 46, 0, 0.1);
      }
      .bio-card-header {
        display: flex;
        gap: 1.1rem;
        padding: 1.25rem 1.4rem;
        align-items: flex-start;
        cursor: pointer;
        transition: background 0.15s;
      }
      .bio-card-header:hover {
        background: var(--tan);
      }
      .bio-photo {
        width: 66px;
        height: 66px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center top;
        flex-shrink: 0;
        border: 3px solid var(--gld-mid);
      }
      .bio-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: var(--brn);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        font-weight: 700;
        color: #ffe08a;
        flex-shrink: 0;
        border: 3px solid var(--gld-mid);
      }
      .bio-avatar.pending {
        background: var(--sand);
        border-color: var(--border);
        color: var(--text-muted);
      }
      .bio-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--brn);
        margin-bottom: 3px;
      }
      .bio-role {
        font-size: 11.5px;
        color: var(--org);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 4px;
      }
      .bio-tagline {
        font-size: 13px;
        color: var(--text-muted);
      }
      .bio-chevron {
        margin-left: auto;
        color: var(--org-mid);
        font-size: 18px;
        transition: transform 0.2s;
        flex-shrink: 0;
        margin-top: 4px;
      }
      .bio-card.open .bio-chevron {
        transform: rotate(180deg);
      }
      .bio-body {
        display: none;
        padding: 0 1.4rem 1.4rem;
      }
      .bio-card.open .bio-body {
        display: block;
      }
      .bio-body p {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.85;
        margin-bottom: 0.85rem;
      }
      .bio-body p:last-child {
        margin-bottom: 0;
      }
      .bio-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 0.9rem;
      }
      .bio-badge {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 10px;
        background: var(--grn-lt);
        color: var(--grn-dk);
        font-weight: 600;
      }
      .bio-badge.org {
        background: var(--org-lt);
        color: var(--org-dk);
      }
      .bio-badge.gld {
        background: var(--gld-lt);
        color: var(--brn);
      }
      .bio-divider {
        height: 1.5px;
        background: var(--tan);
        margin: 0 0 1.1rem;
      }
      .coming-soon-card {
        background: var(--white);
        border: 1.5px dashed var(--border);
        border-radius: 14px;
        padding: 1.1rem 1.4rem;
        margin-bottom: 14px;
        display: flex;
        gap: 1rem;
        align-items: center;
      }
      .coming-soon-card .note {
        font-size: 13px;
        color: var(--text-muted);
        font-style: italic;
        margin-top: 2px;
      }

      /* ── PORTAL ── */
      .portal-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        padding: 1.75rem;
        margin-top: 1.1rem;
        box-shadow: 0 1px 4px rgba(92, 46, 0, 0.06);
      }
      .portal-card h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--brn);
        margin-bottom: 0.5rem;
      }
      .portal-card p {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.7;
        margin-bottom: 1.25rem;
      }
      .portal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 11px;
      }
      .portal-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
        border: none;
        text-decoration: none;
        transition: all 0.15s;
      }
      .portal-btn:hover {
        transform: translateY(-1px);
      }
      .portal-btn.p-org {
        background: var(--org-mid);
        color: #fff;
        box-shadow: 0 2px 8px rgba(200, 80, 0, 0.3);
      }
      .portal-btn.p-grn {
        background: var(--grn-mid);
        color: #fff;
        box-shadow: 0 2px 8px rgba(46, 107, 40, 0.3);
      }
      .portal-btn.p-out {
        background: var(--white);
        color: var(--brn);
        border: 1.5px solid var(--border);
      }
      .portal-btn.p-out:hover {
        background: var(--tan);
      }
      .portal-note {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 0.85rem;
        font-style: italic;
      }

      /* ── EVENTS ── */
      .events-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .event-card {
        display: flex;
        gap: 1.1rem;
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        padding: 1.1rem 1.4rem;
        align-items: flex-start;
        box-shadow: 0 1px 4px rgba(92, 46, 0, 0.06);
      }
      .event-date {
        background: var(--brn);
        color: #fff;
        border-radius: 10px;
        padding: 9px 12px;
        text-align: center;
        min-width: 56px;
        flex-shrink: 0;
      }
      .event-month {
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #ffe08a;
        font-weight: 600;
      }
      .event-day {
        font-size: 24px;
        font-weight: 800;
        line-height: 1.1;
      }
      .event-info h4 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 0.25rem;
        color: var(--brn);
      }
      .event-info p {
        font-size: 13.5px;
        color: var(--text-muted);
      }
      .event-tag {
        display: inline-block;
        font-size: 11px;
        padding: 2px 9px;
        border-radius: 10px;
        background: var(--grn-lt);
        color: var(--grn-dk);
        margin-top: 5px;
        font-weight: 600;
      }

      /* ── DONATE ── */
      .donate-hero {
        background: linear-gradient(
          160deg,
          var(--warm-dk) 0%,
          #3a1800 60%,
          #1a0800 100%
        );
        color: #fff;
        padding: 3.5rem 2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .donate-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(
          ellipse at 50% 0%,
          rgba(200, 80, 0, 0.18) 0%,
          transparent 70%
        );
      }
      .donate-hero h2 {
        font-size: 26px;
        font-weight: 800;
        margin-bottom: 0.6rem;
        position: relative;
      }
      .donate-hero p {
        color: #d4b888;
        font-size: 15px;
        max-width: 440px;
        margin: 0 auto 1.75rem;
        line-height: 1.75;
        position: relative;
      }
      .donate-amounts {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
        position: relative;
      }
      .amount-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1.5px solid rgba(255, 255, 255, 0.28);
        color: #fff;
        padding: 9px 22px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
      }
      .amount-btn:hover,
      .amount-btn.active {
        background: var(--org-mid);
        border-color: var(--org-mid);
        box-shadow: 0 2px 10px rgba(200, 80, 0, 0.4);
      }

      /* ── CONTACT ── */
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.75rem;
      }
      .contact-info-item {
        display: flex;
        gap: 13px;
        margin-bottom: 1.25rem;
        align-items: flex-start;
      }
      .contact-icon {
        width: 40px;
        height: 40px;
        background: var(--org-lt);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--org-dk);
        font-size: 18px;
        flex-shrink: 0;
      }
      .contact-label {
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
      }
      .contact-value {
        font-size: 15px;
        font-weight: 600;
        color: var(--brn);
      }
      .contact-form input,
      .contact-form textarea {
        width: 100%;
        margin-bottom: 10px;
        font-size: 14px;
        padding: 10px 14px;
        border: 1.5px solid var(--border);
        border-radius: 9px;
        background: var(--white);
        color: var(--text);
        outline: none;
        transition: border-color 0.15s;
        font-family: inherit;
      }
      .contact-form input:focus,
      .contact-form textarea:focus {
        border-color: var(--org-mid);
        box-shadow: 0 0 0 3px rgba(200, 80, 0, 0.1);
      }
      .contact-form textarea {
        height: 100px;
        resize: none;
      }

      /* ── FOUNDING ── */
      .founding-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 0.75rem;
      }
      .founding-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        padding: 1.25rem;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        box-shadow: 0 1px 4px rgba(92, 46, 0, 0.06);
      }
      .founding-card.memoriam {
        background: linear-gradient(135deg, #fdf3ce, #fffaf0);
        border-color: rgba(200, 144, 10, 0.35);
      }

      /* ── FOOTER ── */
      .footer {
        background: var(--warm-dk);
        color: #9a8060;
        padding: 2rem 2rem;
        text-align: center;
        font-size: 13px;
        line-height: 1.9;
        border-top: 4px solid var(--org-mid);
      }
      .footer strong {
        color: #ffe08a;
        font-size: 14px;
        display: block;
        margin-bottom: 0.25rem;
      }
      .footer-links {
        margin-top: 0.75rem;
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
      }
      .footer-links a {
        color: #c4a872;
        cursor: pointer;
        font-size: 12px;
        transition: color 0.15s;
      }
      .footer-links a:hover {
        color: #ffe08a;
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 640px) {
        .nav {
          height: auto;
          padding: 0.85rem 1.25rem;
          flex-direction: column;
          gap: 0.6rem;
        }
        .nav-links {
          justify-content: center;
        }
        .hero {
          padding: 2.25rem 1.25rem 0;
        }
        .hero h1 {
          font-size: 22px;
        }
        .section {
          padding: 2rem 1.25rem;
        }
        .contact-grid,
        .mv-grid,
        .photo-pair,
        .founding-grid {
          grid-template-columns: 1fr;
        }
        .stats-bar {
          flex-wrap: wrap;
        }
        .stat-item {
          max-width: 50%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .programs-grid {
          grid-template-columns: 1fr;
        }
        .photo-grid-3 {
          scroll-snap-type: x mandatory;
        }
        .hero-photos {
          height: 150px;
        }
        .donate-hero {
          padding: 2.5rem 1.25rem;
        }
      }