:root{
      /* Brand */
      --brandBlue:#1960a7;
      --brandGreen:#81B800;

      /* Surfaces */
      --bg:#f6fbf8;
      --surface:#ffffff;
      --surface2:#f2f8f4;

      /* Text */
      --text:#0c1a0e;
      --muted:#4a6a57;

      /* Lines / shadows */
      --line: rgba(15,35,25,.12);
      --shadow: 0 18px 55px rgba(15,35,25,.12);

      /* Accents */
      --accent: var(--brandGreen);
      --accent2: var(--brandBlue);
      --warning: #ffcc66;

      --container: 1180px;
      --r: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);

      background:
        radial-gradient(1200px 700px at 15% -10%, rgba(129,184,0,.18), transparent 65%),
        radial-gradient(900px 600px at 85% 0%,  rgba(25,96,167,.12), transparent 60%),
        radial-gradient(900px 700px at 70% 95%, rgba(129,184,0,.10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f4fbf7 40%, #ffffff 100%);

      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    .container{max-width:var(--container); margin:0 auto; padding:0 18px}
    .sr-only{position:absolute;left:-9999px}

    /* Top strip */
    .topstrip{
      background: rgba(255,255,255,.85);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(10px);
    }
    .topstrip__inner{
      display:flex; gap:14px; align-items:center; justify-content:space-between;
      padding:10px 0;
      font-size:14px;
      color:var(--muted);
      background: transparent;
    }
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:7px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      background: rgba(255,255,255,.7);
    }
    .dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}muted
    .dot.blue{background:var(--accent2)}
    .dot.warn{background:var(--warning)}
    .topstrip__left{display:flex; flex-wrap:wrap; gap:10px}
    .topstrip__right{display:flex; gap:10px; align-items:center}

    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      background: var(--brandBlue);
      border-bottom: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
    }
    .head{
      display:flex; align-items:center; justify-content:space-between;
      
      padding:14px 0;
      gap:14px;
    }
    .head > .brand{ flex: 4; }
.head > nav{ flex: 3; }
.head > .cta{ flex: 3; justify-content:flex-end; }

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

    .logoGroup{display:flex; align-items:center; gap:10px;}
    .logoBox{
      width:70px; height:70px;
      border-radius:14px;
      background:#fff;
      border:1px solid rgba(255,255,255,.28);
      display:grid; place-items:center;
      box-shadow: 0 12px 40px rgba(0,0,0,.18);
    }
    .logoBox img{width:65px; height:65px; object-fit:contain;}
    .logoBox1 img{width:52px; height:52px; object-fit:contain;}

    .brandTitle{display:flex; flex-direction:column; line-height:1.05;}
    .brandTitle strong{font-size:16px; color:#fff;}
    .brandTitle small{color: rgba(255,255,255,.82); font-size:12px;}

    nav{display:flex; align-items:center; gap:6px;}
    .navlink, .navdrop > button{
      border:1px solid transparent;
      background:transparent;
      color:rgba(255,255,255,.95);
      padding:9px 10px;
      border-radius: 10px;
      font-size:14px;
      cursor:pointer;
    }
    .navlink:hover, .navdrop > button:hover{
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
    }

    .navdrop{position:relative}
    .menu{
      position:absolute; top:44px; left:0;
      min-width: 260px;
      background: #ffffff;
      border:1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow);
      padding:8px;
      display:none;
    }
    .menu a{
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 10px;
      border-radius: 12px;
      color: var(--text);
      font-size:14px;
    }
    .menu a:hover{background: rgba(25,96,167,.08)}
    .menu small{color:var(--muted)}
    .navdrop.open .menu{display:block}

    .cta{display:flex; align-items:center; gap:10px;
    background: var(--brandBlue);
    border:1px solid var(--line);
  color:#fff;
      box-shadow: 0 10px 28px rgba(15,35,25,.08);
      border-radius: var(--r);
      padding: 18px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px;
      border-radius: 12px;
      font-weight:700;
      font-size:14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.75);
      color: var(--text);
      cursor:pointer;
      white-space:nowrap;
    }
    .btn.primary{
      border-color: rgba(129,184,0,.55);
      background: var(--brandGreen)/*linear-gradient(135deg, rgba(129,184,0,.22), rgba(129,184,0,.10))*/;
      color: #18310b;
    }
    .btn.primary:hover{filter:brightness(1.03)}
    .btn.ghost:hover{background: rgba(255,255,255,.90)}

    /* Mobile menu */
    .hamburger{display:none}
    .mobilePanel{
      display:none;
      padding:10px 0 16px;
      border-top:1px solid rgba(255,255,255,.22);
    }
    .mobilePanel a, .mobilePanel button{
      width:100%;
      text-align:left;
      display:flex; justify-content:space-between; align-items:center;
      padding:10px 12px;
      border-radius: 12px;
      color:#fff;
      background: rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.22);
      margin-top:8px;
      font-size:14px;
      cursor:pointer;
    }
    .mobilePanel .sub{
      display:none;
      margin-top:8px;
      padding-left: 10px;
    }
    .mobilePanel .sub a{
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);
    }
    .mobilePanel.show{display:block}

    /* Hero */
    .hero{
      width:100%;
      height:80vh;
      position:relative;
      overflow:hidden;
    }
    .heroMedia{
      position:absolute; inset:0;
      overflow:hidden;
    }
    .heroMedia video{
      position:absolute;
      top:50%; left:50%;
      width:100%;
      height:auto;
      min-height:100%;
      object-fit:cover;
      transform:translate(-50%, -50%);
      cursor:pointer;
      filter: saturate(1.02) contrast(1.03) brightness(.98);
    }
    .heroMedia::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1000px 500px at 20% 20%, rgba(129,184,0,.22), transparent 60%),
        radial-gradient(900px 520px at 90% 10%, rgba(25,96,167,.18), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.72));
      pointer-events:none;
    }
    
    .cardVideo{
  margin-top: 12px;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
}

.cardVideo video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

    .portraitPlayer{
  margin: 12px auto 0;
  width: min(420px, 100%);
 /* aspect-ratio: 16 / 16;       portrait frame */
  border-radius: 14px;
  overflow: hidden;
  background: rgba(25,96,167,.08); /* subtle brand blue wash */
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.portraitPlayer video{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* SHOW FULL VIDEO */
  background: #000;          /* nice letterbox */
  display: block;
}


    /* Overlay Play Button */
    .playOverlay{
      position:absolute;
      top:50%; left:50%;
      width:80px; height:80px;
      background: rgba(0,0,0,0.45);
      border-radius:50%;
      transform: translate(-50%, -50%);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:10;
    }
    .playOverlay::after{
      content:"";
      border-style: solid;
      border-width: 15px 0 15px 25px;
      border-color: transparent transparent transparent white;
      margin-left: 5px;
    }

    /* Sections */
    section{padding: 44px 0}
    .sectionTitle{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:14px;
      margin-bottom:16px;
    }
    .sectionTitle h2{margin:0; font-size: 22px; letter-spacing:-.2px}
    .sectionTitle p{margin:0; color:var(--muted); font-size:14px}

    .card{
     /* border:1px solid var(--line);
      background: var(--surface);
      box-shadow: 0 10px 28px rgba(15,35,25,.08);
      border-radius: var(--r);*/
      padding: 18px;
    }

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

    .card h3{margin:0 0 8px; font-size:16px}
    .card p{margin:0; color: rgba(12,26,14,.82); line-height:1.6}
    .card .meta{margin-top:10px; color:var(--muted); font-size:13px}

    .readMore{
      display:inline-flex; align-items:center; gap:8px;
      margin-top: 12px;
      color: var(--brandBlue);
      font-weight:700;
      font-size:14px;
    }
    .readMore:hover{text-decoration:underline}

    /* Supporters */
    .tiers{display:grid; grid-template-columns: 1fr; gap:18px;}
    .tier{
      border:1px solid var(--line);
      border-radius: var(--r);
      padding: 16px;
      background: rgba(255,255,255,.82);
      box-shadow: 0 10px 28px rgba(15,35,25,.06);
    }
    .tierHead{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      margin-bottom: 12px;
    }
    .tierHead b{
      letter-spacing:.4px;
      font-size: 13px;
      color: var(--text);
    }
    .tierHead span{color: var(--muted); font-size: 12px;}

    .logos{display:grid; grid-template-columns: repeat(6, 1fr); gap: 12px;}
    .logoPh{
      aspect-ratio: 16/9;
      border-radius: 14px;
      border: 1px dashed rgba(15,35,25,.25);
      background: rgba(255,255,255,.75);
      display: grid;
      place-items: center;
      padding: 8px;
    }
    .logoWrapper{
      width:100%; height:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:8px;
    }
    .logoWrapper img{
      max-height:60px;
      width:auto;
      object-fit:contain;
      display:block;
    }

    /* Agenda */
    .tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px;}
    .tabBtn{
      border:1px solid var(--line);
      background: rgba(255,255,255,.85);
      color: var(--text);
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 800;
      font-size: 13px;
      cursor:pointer;
    }
    .tabBtn.active{
      border-color: rgba(129,184,0,.55);
      background: linear-gradient(135deg, rgba(129,184,0,.22), rgba(129,184,0,.10));
    }
    .agenda{
      border:1px solid var(--line);
      border-radius: var(--r);
      background: rgba(255,255,255,.82);
      padding: 16px;
      box-shadow: 0 10px 28px rgba(15,35,25,.06);
    }
    .agenda h3{margin:0 0 6px; font-size:16px}
    .agenda p{margin:0; color: rgba(12,26,14,.82); line-height:1.7}
    .agenda ul{margin:12px 0 0; padding-left: 18px; color: rgba(12,26,14,.82)}
    .agenda li{margin: 6px 0}
    .agenda small{color:var(--muted)}

    /* Contact / Footer */
    .contactBox{
      display:grid;
      grid-template-columns: 4fr 3fr 3fr;
      gap:16px;
      align-items:stretch;
      background:var(--brandGreen);
    }
    .contactCard{
      /*border:1px solid var(--line);
      border-radius: var(--r);
      background: rgba(255,255,255,.82);*/
      padding: 18px;
      box-shadow: 0 10px 28px rgba(15,35,25,.06);
    }
    .contactCard h3{margin:0 0 10px}
    .contactItem{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 12px;

     
      background: rgba(255,255,255,.9);
      margin-top:10px;
      color: rgba(12,26,14,.82);
    }
    .contactItem b{display:block}
    .contactItem span{display:block; color:var(--muted); font-size:13px; margin-top:2px}

    footer{
      border-top: 1px solid var(--line);
      padding: 22px 0;
      color: var(--brandGreen);
      font-size: 13px;
                 background:
        radial-gradient(1200px 700px at 15% -10%, rgba(64,209,122,.20), transparent 65%),
        radial-gradient(900px 600px at 85% 0%, rgba(74,163,255,.18), transparent 60%),
        radial-gradient(900px 700px at 70% 95%, rgba(255,204,102,.10), transparent 60%),
        linear-gradient(180deg, #070b14 0%, #0b1220 35%, #070b14 100%);
      overflow-x:hidden;
    }
    .footerRow{
      display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
      align-items:center;

    }

    /* Responsive */
    @media (max-width: 980px){
      .logos{grid-template-columns: repeat(4, 1fr)}
      .grid3{grid-template-columns: 1fr}
      .grid2{grid-template-columns: 1fr}
      .contactBox{grid-template-columns: 1fr}
      nav, .cta{display:none}
      .hamburger{display:inline-flex}
       .head{grid-template-columns:1fr}


    }

    @media (max-width: 520px){
      .logos{grid-template-columns: repeat(2, 1fr)}
      .brand{min-width:auto}
      .logoBox{width:50px; height:50px}
        .head{
    flex-direction: column;
    align-items: stretch;     /* full width */
    justify-content: flex-start;
  }
  .head > .brand,
  .head > nav,
  .head > .cta{
    flex: unset;              /* remove ratios */
    width: 100%;
  }
  .head > nav{
    display:flex;
    flex-wrap:wrap;           /* nav items wrap nicely */
    gap:6px;
  }
  .head > .cta{
    justify-content:flex-start; /* buttons align left */
    flex-wrap:wrap;
  }
  .logoBox img{width:50px; height:50px; object-fit:contain;}


    }