:root {
      --green:#0a4a2f; --gold:#c8941a; --light-gold:#f0c050;
      --orange:#e07b1a; --cream:#fdf8f0; --dark:#0d1a10; --text:#2c2c2c;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Lato',sans-serif; color:var(--text); background:#fff; }
    h1,h2,h3,h4,h5 { font-family:'Cinzel',serif; }

    .top-bar {
      background:var(--dark);
      padding:1.2rem 0;
      box-shadow:0 2px 18px rgba(0,0,0,.45);
      position:sticky; top:0; z-index:100;
    }
    .top-bar .brand { font-family:'Cinzel',serif; color:var(--light-gold); font-size:1.05rem; font-weight:700; }
    .top-bar .sub { font-size:.65rem; color:rgba(255,255,255,.5); letter-spacing:.15em; text-transform:uppercase; }
    .back-btn {
      color:var(--light-gold);
      text-decoration:none;
      border:1px solid rgba(240,192,80,.4);
      padding:.45rem 1rem;
      border-radius:24px;
      font-size:.75rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      transition:all .25s;
    }
    .back-btn:hover { background:var(--gold); color:#fff; border-color:var(--gold); }

    .hero-banner {
      background:linear-gradient(135deg,var(--dark) 0%,#0a4a2f 60%,#1a6b42 100%);
      padding:4rem 0 3rem;
      text-align:center;
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .hero-banner::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(circle at 20% 50%,rgba(200,148,26,.18) 0%,transparent 50%),
                  radial-gradient(circle at 80% 20%,rgba(200,148,26,.1) 0%,transparent 40%);
    }
    .hero-banner > * { position:relative; z-index:2; }
    .hero-eyebrow { font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--light-gold); margin-bottom:.8rem; }
    .hero-banner h1 { color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:.8rem; }
    .hero-banner h1 span { color:var(--light-gold); }
    .hero-banner p { color:rgba(255,255,255,.65); max-width:620px; margin:0 auto; line-height:1.8; font-size:.95rem; }
    .gold-line { width:48px; height:3px; background:var(--gold); margin:1.2rem auto; }

    .filter-row { background:var(--cream); padding:1.8rem 0; border-bottom:1px solid rgba(0,0,0,.06); }
    .filter-pill {
      background:#fff; border:1px solid rgba(200,148,26,.3); color:var(--dark);
      font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
      padding:.55rem 1.2rem; border-radius:24px; cursor:pointer; transition:all .25s;
      margin:.25rem;
    }
    .filter-pill:hover, .filter-pill.active {
      background:var(--gold); color:#fff; border-color:var(--gold);
      transform:translateY(-2px); box-shadow:0 6px 14px rgba(200,148,26,.3);
    }

    .members-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
      gap:1.2rem;
      padding:3rem 0;
    }
    .member-card {
      background:#fff;
      border-radius:8px;
      padding:1.4rem;
      display:flex; gap:1rem; align-items:flex-start;
      box-shadow:0 3px 14px rgba(0,0,0,.06);
      border-left:3px solid var(--gold);
      transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .25s;
      position:relative; overflow:hidden;
      opacity:0; transform:translateY(20px);
      animation:cardIn .6s ease forwards;
    }
    @keyframes cardIn { to { opacity:1; transform:translateY(0); } }
    .member-card:hover {
      transform:translateY(-5px);
      box-shadow:0 16px 36px rgba(0,0,0,.12);
      border-left-color:#FF9933;
    }
    .member-avatar {
      width:72px; height:72px;
      border-radius:50%;
      overflow:hidden; flex-shrink:0;
      box-shadow:0 4px 12px rgba(200,148,26,.3);
      border:3px solid var(--gold);
      background:linear-gradient(135deg,var(--gold),var(--light-gold));
    }
    .member-avatar img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease, filter .4s ease; filter:saturate(.9); }
    .member-card:hover .member-avatar img { transform:scale(1.12); filter:saturate(1.15); }
    .member-card[data-tier="leadership"] .member-avatar { border-color:#FF9933; }
    .member-card[data-tier="committee"]  .member-avatar { border-color:#138808; }
    .member-card[data-tier="advisory"]   .member-avatar { border-color:#0d1a10; }
    .member-card[data-tier="member"]     .member-avatar { border-color:var(--gold); }
    .member-info { flex:1; min-width:0; }
    .member-name { font-family:'Cinzel',serif; font-size:.95rem; color:var(--dark); margin-bottom:.25rem; line-height:1.3; }
    .member-role {
      display:inline-block;
      font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
      color:var(--gold); background:rgba(200,148,26,.1);
      padding:.15rem .55rem; border-radius:12px; margin-bottom:.6rem;
    }
    .member-contact { list-style:none; padding:0; margin:0; font-size:.78rem; color:#666; }
    .member-contact li { display:flex; align-items:flex-start; gap:.4rem; padding:.15rem 0; line-height:1.5; }
    .member-contact i { color:var(--gold); margin-top:.12rem; font-size:.85rem; flex-shrink:0; }
    .member-contact a { color:#555; text-decoration:none; transition:color .2s; }
    .member-contact a:hover { color:var(--gold); }
    .member-sn {
      position:absolute; top:.6rem; right:.8rem;
      font-family:'Cinzel',serif; font-size:.7rem;
      color:rgba(200,148,26,.4); font-weight:700;
    }
    .members-hidden { display:none !important; }

    footer { background:var(--dark); padding:2.5rem 0; color:rgba(255,255,255,.45); text-align:center; font-size:.8rem; }
    footer a { color:var(--light-gold); text-decoration:none; }

    @media (max-width:576px) { .members-grid { grid-template-columns:1fr; } }