:root{
  --green:#078E4E;
  --green-800:#055734;
  --bg:#0E1A15;
  --surface:#121F19;
  --text:#0B1A14;
  --ink:#0c281f;
  --white:#ffffff;
  --muted:#6b7d75;
  --radius:16px;
  --shadow:0 10px 20px rgba(0,0,0,.15);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A1210;
    --surface:#0F1B16;
    --text:#EAF2ED;
    --ink:#DDE7E1;
    --muted:#A3B5AD;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#0A1210;
  padding-left:0; padding-right:0;
}
@media (prefers-color-scheme: dark){ body{ background:var(--bg);} }
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px, 92%);margin-inline:auto}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.flex{display:flex;gap:1rem}
.center{align-items:center}
.between{justify-content:space-between}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:var(--green);color:#fff;border-radius:8px}

.site-header{
  position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #e7ece9;
}
@media (prefers-color-scheme: dark){ .site-header{ background:var(--surface); border-color:#1f2a25;} }

/* Header spacing cleanup */
.site-header .container{ padding:0.9rem 1.25rem; gap:1rem; }
.brand img{display:block;height:40px;width:auto}
.nav ul{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.nav a{padding:.6rem .9rem;border-radius:10px}
.nav a.btn{padding:.7rem 1rem}
.nav-toggle{display:none;color:var(--green);background:none;border:1px solid #d8e2dd;border-radius:12px;padding:.5rem .75rem;font-size:1.2rem}

/* Hero */
.hero{ padding:5rem 0 3rem; background:linear-gradient(180deg, rgba(7,142,78,.06), transparent 60%); }
.hero h1{font-size:clamp(2rem, 3.5vw + 1rem, 3.2rem);line-height:1.15;margin:0 0 .5rem}
.accent{color:var(--green)}
.hero p{margin:0 0 1rem;color:#3a4a43}
@media (prefers-color-scheme: dark){ .hero p{ color:#c9d6d0 } }
.badges{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:1rem 0 0;padding:0;list-style:none}
.badges li{font-size:.95rem;padding:.35rem .65rem;border:1px solid #dfe8e4;border-radius:999px}
@media (prefers-color-scheme: dark){ .badges li{ border-color:#24342c } }

.btn{display:inline-block;border:2px solid var(--green);padding:.8rem 1.1rem;border-radius:12px;font-weight:600}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{color:var(--green);background:transparent}
.btn-ghost:hover{background:rgba(7,142,78,.1)}

.section{padding:3.5rem 0}
.section.alt{background:linear-gradient(180deg, rgba(7,142,78,.04), rgba(7,142,78,.02))}
.section-title{font-size:2rem;margin:0 0 .25rem}
.section-lead{margin:0 0 2rem;color:#4d5b55}
@media (prefers-color-scheme: dark){ .section-lead{ color:#b8c6c0 } }

.card{background:#fff;border:1px solid #e7ece9;border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow)}
@media (prefers-color-scheme: dark){
  .card{ background:var(--surface); border-color:#1f2a25 }
}
.card h3{margin-top:0}

/* --- CLEAN MOBILE NAV (slide-in from right) --- */

/* Shared nav base */
.nav {
  /* desktop base is set in >=861px section */
}
.nav ul{list-style:none;margin:0;padding:0}

/* Mobile first: slide-in panel */
@media (max-width: 860px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:2px solid var(--green);border-radius:8px;
    color:var(--green);background:none;font-size:1.5rem;cursor:pointer
  }

  .nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh; width: 280px;
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: var(--shadow);
    z-index: 1001;
    padding: 1.5rem 1rem;
    border-left:1px solid #e7ece9;
  }
  @media (prefers-color-scheme: dark){ .nav{ background:var(--surface); border-left-color:#1f2a25 } }

  .nav.open { transform: translateX(0); }
  .nav ul { display:flex; flex-direction:column; gap:1rem; }
  .nav a { color: var(--ink); text-decoration:none; font-weight:600; }
  .nav a:hover { text-decoration:underline; }

  .nav-close{
    position:absolute; top:.5rem; right:.5rem;
    background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer;
    color: var(--muted);
  }

  /* Backdrop element */
  #backdrop[aria-hidden="false"]{
    pointer-events:auto;
  }

  body.nav-open{
    overflow:hidden;
  }
  body.nav-open #backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:1000;
  }
}

/* Desktop layout */
@media (min-width: 861px){
  .nav { position: static; transform:none; display:block; height:auto; width:auto; background:transparent; box-shadow:none; padding:0; border:0; }
  .nav ul { display:flex; gap:1rem; }
  .nav-toggle { display:none; }
  .nav-close{ display:none; }
}

/* Footer */
.site-footer{padding:2.5rem 0;border-top:1px solid #e7ece9;background:#fbfdfc}
@media (prefers-color-scheme: dark){ .site-footer{ background:#0B1411; border-color:#1f2a25 } }
.site-footer h4{margin:.25rem 0}
.site-footer p{margin:.5rem 0;color:#60736a}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.25rem 0}

          :root {
              --gm-green: #0c8f4a;        /* brand accent */
              --gm-green-ink: #0a6f3a;    /* darker accent */
              --ink: #ffffff;             /* heading/body color */
              --muted: #475569;           /* secondary text */
              --bg: #ffffff;
              --card: #f8fafc;
              --radius: 18px;
              --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
              --maxw: 1100px;
          }

          .about-section {
              background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
              padding: clamp(2.5rem, 5vw, 5rem) 1rem;
          }

          .about-wrap {
              max-width: var(--maxw);
              margin: 0 auto;
          }

          .about-grid {
              display: grid;
              grid-template-columns: 1fr 1.25fr;
              gap: clamp(1.25rem, 3vw, 2.5rem);
              align-items: center;
          }

          .about-photo {
              background: var(--card);
              border-radius: var(--radius);
              box-shadow: var(--shadow);
              overflow: hidden;
          }

          .about-photo img {
              display: block;
              width: 100%;
              height: auto;
              object-fit: cover;
          }

          .about-content {
              background: var(--bg);
              padding: clamp(1rem, 2.5vw, 2rem);
              border-radius: var(--radius);
          }

          .eyebrow {
              font-size: 0.85rem;
              letter-spacing: 0.08em;
              text-transform: uppercase;
              color: var(--gm-green-ink);
              font-weight: 700;
              margin: 0 0 0.5rem 0;
          }

          .about-content h2 {
              color: var(--ink);
              font-size: clamp(1.6rem, 2.4vw, 2rem);
              line-height: 1.2;
              margin: 0 0 0.75rem 0;
          }

          .lead {
              color: var(--muted);
              font-size: clamp(1rem, 1.2vw, 1.0625rem);
              line-height: 1.7;
              margin: 0 0 1.25rem 0;
          }

          .profile h3 {
              margin: 0 0 0.5rem 0;
              font-size: clamp(1.15rem, 1.5vw, 1.25rem);
              color: var(--gm-green-ink);
          }

          .profile p {
              color: var(--ink);
              line-height: 1.75;
              margin: 0 0 0.9rem 0;
          }

          .badges {
              display: flex;
              flex-wrap: wrap;
              gap: 0.5rem;
              list-style: none;
              margin: 0.75rem 0 0 0;
              padding: 0;
          }

          .badges li {
              border: 1px solid color-mix(in oklab, var(--gm-green) 40%, #0000);
              color: var(--gm-green-ink);
              background: color-mix(in oklab, var(--gm-green) 10%, #fff);
              padding: 0.4rem 0.65rem;
              border-radius: 999px;
              font-size: 0.85rem;
              font-weight: 600;
              white-space: nowrap;
          }

          /* Responsiveness */
          @media (max-width: 900px) {
              .about-grid {
                  grid-template-columns: 1fr;
              }
              .about-photo {
                  order: -1;
              }
          }
/* About the President Section */
.about-president {
  margin-top: 3rem;
  gap: 2rem;
  align-items: center;
}

.about-president .profile-img {
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.about-president h3 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  color: var(--accent, #078E4E);
}

.about-president p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: inherit;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .about-president {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-president .profile-img {
    margin: 0 auto 1.5rem;
    width: 250px;
    height: 250px;
  }
}
/* Base (Light Mode) */
:root {
  --green: #078E4E;
  --green-800: #055734;
  --bg: #ffffff;
  --surface: #f8fafc;
  --text: #333333;
  --ink: #0c281f;
  --white: #ffffff;
  --muted: #6b7d75;
  --radius: 16px;
  --shadow: 0 10px 20px rgba(0,0,0,.15);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A1210;
    --surface: #0F1B16;
    --text: #EAF2ED;
    --ink: #DDE7E1;
    --muted: #A3B5AD;
    --green: #0c9f58; /* Slightly brighter green for dark mode */
    --green-800: #0a7a45;
  }
}

/* Update body background */
body {
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color: var(--ink);
  background: var(--bg);
  padding-left: 0; 
  padding-right: 0;
}

/* Update hero paragraph color */
.hero p {
  margin: 0 0 1rem;
  color: var(--muted);
}

/* Update section lead color */
.section-lead {
  margin: 0 0 2rem;
  color: var(--muted);
}
/* Updated header spacing and alignment */
.site-header .container {
  padding: 0.9rem 1.25rem;
  gap: 1rem;
  display: flex;
  align-items: center; /* Ensures vertical centering */
  justify-content: space-between; /* Keeps logo and nav separated */
}

/* Ensure the navigation is properly aligned */
.nav {
  display: flex;
  align-items: center; /* Vertically centers nav items */
}

.nav ul {
  display: flex;
  align-items: center; /* Vertically centers the navigation items */
  gap: 1rem;
  margin: 0;
  padding: 0;
}

/* Ensure the brand/logo is vertically centered */
.brand {
  display: flex;
  align-items: center;
}