:root{
      --bg: #071f1c;
      --panel: #0b2f2a;
      --panel-2:#0a2723;
      --text:#eaf2f0;
      --muted: rgba(234,242,240,.72);

      --brand:#0f3f38;
      --gold:#c7a24a;
      --gold-2:#e0c16a;

      --line: rgba(231, 214, 165, .18);
      --shadow: 0 18px 42px rgba(0,0,0,.35);
      --radius: 18px;
      --radius-sm: 14px;
      --container: 1280px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      min-height:100vh;
      background:
        radial-gradient(900px 400px at 20% -10%, rgba(199,162,74,.20), transparent 60%),
        radial-gradient(700px 360px at 90% 10%, rgba(15,63,56,.55), transparent 55%),
        linear-gradient(180deg, #061b18, var(--bg));
      color:var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height:1.5;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    .container{ width:min(var(--container), calc(100% - 32px)); margin-inline:auto; }

    /* Header */
    .topbar{
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}

    .site-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 0;
    }
    .brand-left{ display:flex; align-items:center; gap:12px; min-width:220px; }
    /* Use the code you provided */
    .site-header .logo{
      height: 78px;
      width:auto;
      object-fit:contain;
     /* filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); */
      filter:none;
    }
    .brand-text{ display:flex; flex-direction:column; gap:2px; }
    .brand-text strong{
      font-family: Montserrat, Inter, sans-serif;
      letter-spacing:.3px;
      font-weight:700;
      font-size: 14px;
      line-height:1.1;
    }
.brand-text span{ font-size:12px; color: rgba(0,0,0,.60); }

    .nav{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .nav a, .nav button{
  border: 1px solid transparent;
  background: transparent;
  color: #0b2f2a;              /* dark text for white header */
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .2px;
  font-family: Montserrat, Inter, sans-serif;
}

    .nav a:hover, .nav button:hover{
  border-color: rgba(199,162,74,.55);
  background: rgba(199,162,74,.14);
}

    .nav .active{
  border-color: rgba(199,162,74,.75);
  background: rgba(199,162,74,.22);
}
.nav .cta{
  border-color: rgba(199,162,74,.85);
  background: rgba(199,162,74,.28);
}


    .dropdown{ position:relative; }
.dropdown-panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  width: 230px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  overflow:hidden;
  transform: translateY(-6px);
  opacity:0;
  pointer-events:none;
  transition: .18s ease;
  z-index: 60;
}

    .dropdown.open .dropdown-panel{
      transform: translateY(0);
      opacity:1;
      pointer-events:auto;
    }
.dropdown-panel a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  font-weight:700;
  color: #0b2f2a;
}
.dropdown-panel a:hover{ background: rgba(199,162,74,.16); }
.dropdown-panel a + a{ border-top: 1px solid rgba(0,0,0,.08); }


    /* Hero (NextMedia-like: big lead + side cards) */
    .hero{ padding: 22px 0 10px; }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap: 16px;
      align-items:stretch;
    }

    .card{
      background: linear-gradient(180deg, rgba(11,47,42,.85), rgba(7,31,28,.95));
      border: 1px solid rgba(231, 214, 165, .14);
      border-radius: var(--radius);
      box-shadow: 0 18px 40px rgba(0,0,0,.28);
      overflow:hidden;
    }

    .lead{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      min-height: 360px;
    }
    .lead-media{ position:relative; background:#061a17; }
    .lead-media img{ width:100%; height:100%; object-fit:cover; opacity:.95; }
    .badge{
      position:absolute;
      left:14px; top:14px;
      padding:8px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing:.3px;
      background: rgba(199,162,74,.18);
      border: 1px solid rgba(199,162,74,.45);
      backdrop-filter: blur(10px);
      font-family: Montserrat, Inter, sans-serif;
    }
    .lead-body{
      padding: 18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap: 12px;
      background: radial-gradient(520px 240px at 90% 20%, rgba(199,162,74,.16), transparent 60%);
    }
    h1,h2,h3{ margin:0; font-family: Montserrat, Inter, sans-serif; letter-spacing:.2px; }
    .meta{ display:flex; flex-wrap:wrap; gap: 8px; align-items:center; color: var(--muted); font-size: 13px; }
    .pill{
      border: 1px solid rgba(199,162,74,.32);
      background: rgba(199,162,74,.08);
      color: var(--text);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing:.6px;
    }
    .lead-title{ font-size: 24px; line-height:1.15; margin-top:10px; }
    .lead-desc{ margin:10px 0 0; color: var(--muted); font-size:14px; }
    .btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 11px 14px;
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      font-weight: 900;
      font-size: 13px;
      letter-spacing:.2px;
      background: rgba(255,255,255,.04);
      transition:.2s ease;
      cursor:pointer;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(199,162,74,.48);
      background: rgba(199,162,74,.10);
    }
    .btn.primary{
      border-color: rgba(199,162,74,.65);
      background: linear-gradient(180deg, rgba(199,162,74,.18), rgba(199,162,74,.08));
    }

    .side{
      padding: 16px;
      display:flex;
      flex-direction:column;
      gap: 12px;
    }
    .mini{
      display:grid;
      grid-template-columns: 92px 1fr;
      gap: 10px;
      padding: 10px;
      border-radius: 14px;
      border: 1px solid rgba(231, 214, 165, .12);
      background: rgba(255,255,255,.03);
      transition:.2s ease;
    }
    .mini:hover{
      border-color: rgba(199,162,74,.35);
      background: rgba(199,162,74,.06);
    }
    .mini img{ width:92px; height:68px; object-fit:cover; border-radius: 12px; }
    .mini h4{
      margin:0;
      font-size: 13px;
      line-height:1.2;
      font-family: Montserrat, Inter, sans-serif;
    }
    .mini .mini-meta{ margin-top:6px; font-size:12px; color: var(--muted); }

    /* Marquee */
    .marquee-wrap{
      margin: 16px 0 6px;
      border-top: 1px solid rgba(231, 214, 165, .14);
      border-bottom: 1px solid rgba(231, 214, 165, .14);
      background: linear-gradient(90deg, rgba(199,162,74,.09), rgba(15,63,56,.22), rgba(199,162,74,.09));
      overflow:hidden;
    }
    .marquee{
      display:flex;
      gap: 22px;
      white-space: nowrap;
      padding: 10px 0;
      will-change: transform;
      animation: scroll 18s linear infinite;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 800;
      letter-spacing:.3px;
      font-size: 13px;
    }
    .marquee b{ color: var(--gold-2); }
    .marquee span{ color: rgba(234,242,240,.92); }
    @keyframes scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

    /* Sections */
    .section{ padding: 14px 0 30px; }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      margin: 14px 0 14px;
    }
    .section-head h2{ font-size: 18px; }
    .section-head p{ margin:0; color: var(--muted); font-size: 13px; max-width: 680px; }

    .grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .post{
      border-radius: var(--radius-sm);
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      overflow:hidden;
      transition:.2s ease;
      box-shadow: 0 16px 38px rgba(0,0,0,.20);
    }
    .post:hover{
      transform: translateY(-2px);
      border-color: rgba(199,162,74,.36);
      background: rgba(199,162,74,.06);
    }
    .post-media{ height: 200px; background:#061a17; position:relative; }
    .post-media img{ width:100%; height:100%; object-fit:cover; }
    .post-tag{
      position:absolute;
      left: 12px; bottom: 12px;
      background: rgba(10, 39, 35, .82);
      border: 1px solid rgba(199,162,74,.45);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      backdrop-filter: blur(8px);
      font-family: Montserrat, Inter, sans-serif;
    }
    .post-body{ padding: 14px; display:flex; flex-direction:column; gap: 10px; }
    .post-body h3{ font-size: 15px; line-height:1.25; }
    .post-body p{ margin:0; color: var(--muted); font-size: 13px; }
    .post-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(231, 214, 165, .12);
      color: var(--muted);
      font-size: 12px;
    }
    .post-foot a{ font-weight: 900; color: var(--gold-2); }

    /* Board members */
    .people{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .person{
      border-radius: var(--radius-sm);
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      overflow:hidden;
      box-shadow: 0 16px 38px rgba(0,0,0,.20);
      transition:.2s ease;
    }
    .person:hover{
      transform: translateY(-2px);
      border-color: rgba(199,162,74,.36);
      background: rgba(199,162,74,.06);
    }
    .person img{ width:100%; height: 350px; object-fit:cover; }
    .person .info{ padding: 12px; }
    .person .info b{
      display:block;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 13px;
    }
    .person .info span{
      display:block;
      margin-top:4px;
      font-size: 12px;
      color: var(--muted);
    }

    /* Clients */
    .clients{
      display:grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }
    .client{
      border-radius: 14px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 64px;
      font-weight: 900;
      color: rgba(234,242,240,.92);
      font-family: Montserrat, Inter, sans-serif;
      letter-spacing:.2px;
    }

    /* Video Modal */
    .modal{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.62);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 999;
    }
    .modal.open{ display:flex; }
    .modal-card{
      width: min(980px, 100%);
      background: rgba(9, 34, 31, .95);
      border: 1px solid rgba(199,162,74,.28);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .modal-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(231, 214, 165, .12);
      background: linear-gradient(90deg, rgba(199,162,74,.10), rgba(15,63,56,.20));
    }
    .modal-head b{ font-family: Montserrat, Inter, sans-serif; }
    .close{
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 10px;
      cursor:pointer;
      font-weight: 900;
    }
    .video-wrap{
      position:relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background:#000;
    }
    .video-wrap iframe{
      position:absolute;
      inset: 0;
      width:100%;
      height:100%;
      border:0;
    }

    /* Footer */
    footer{
      border-top: 1px solid rgba(231, 214, 165, .14);
      background: rgba(0,0,0,.10);
      padding: 18px 0;
      color: var(--muted);
      font-size: 13px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
      align-items:center;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      justify-content:flex-end;
    }
    .footer-links a{
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
    }
    .footer-links a:hover{
      border-color: rgba(199,162,74,.28);
      background: rgba(199,162,74,.08);
      color: var(--text);
    }

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .lead{ grid-template-columns: 1fr; }
      .grid{ grid-template-columns: repeat(2, 1fr); }
      .people{ grid-template-columns: repeat(2, 1fr); }
      .clients{ grid-template-columns: repeat(3, 1fr); }
      .brand-text{ display:none; }
    }
    @media (max-width: 620px){
      .grid{ grid-template-columns: 1fr; }
      .people{ grid-template-columns: 1fr; }
      .clients{ grid-template-columns: repeat(2, 1fr); }
      .nav a, .nav button{ padding: 9px 10px; font-size: 12px; }
      .site-header .logo{ height: 56px; }
    }
      /* ====== SGU-like palette (dark green + gold) ====== */
  :root{
    --sgu-deep: #07322d;
    --sgu-deeper: #062723;
    --sgu-gold: #c7a24a;
    --sgu-gold-2:#e0c16a;
    --sgu-text: #eef5f3;
    --sgu-muted: rgba(238,245,243,.78);
    --sgu-line: rgba(224,193,106,.22);
    --sgu-shadow: 0 18px 42px rgba(0,0,0,.35);
  }

  .values-wrap{
    padding: 28px 0;
    background:
      radial-gradient(900px 420px at 18% -10%, rgba(224,193,106,.18), transparent 60%),
      radial-gradient(700px 360px at 85% 12%, rgba(255,255,255,.06), transparent 55%),
      linear-gradient(180deg, #061b18, #071f1c);
    color: var(--sgu-text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  .values-card{
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1px 1.25fr;
    border: 1px solid rgba(224,193,106,.18);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--sgu-shadow);
    background: linear-gradient(180deg, rgba(11,47,42,.85), rgba(7,31,28,.95));
  }

  .values-left{
    background: linear-gradient(180deg, rgba(7,50,45,.96), rgba(6,39,35,.98));
    position: relative;
  }

  /* subtle gold corner accents similar to your design */
  .values-left::before,
  .values-left::after{
    content:"";
    position:absolute;
    left:-24px;
    width: calc(100% + 48px);
    height: 56px;
    background: linear-gradient(90deg, rgba(199,162,74,.0), rgba(199,162,74,.92), rgba(199,162,74,.0));
    opacity: .85;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .values-left::before{ top:-1px; }
  .values-left::after{
    bottom:-1px;
    transform: rotate(180deg);
  }

  .values-left-inner{
    padding: 26px 22px 18px;
    min-height: 100%;
    display:flex;
    flex-direction:column;
    gap: 14px;
  }

  .values-kicker{
    width: 14px;
    height: 64px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(224,193,106,.95), rgba(199,162,74,.35));
  }

  .values-title{
    margin: 0;
    font-family: Montserrat, Inter, sans-serif;
    letter-spacing: .4px;
    font-weight: 800;
    line-height: 1;
    font-size: clamp(34px, 3.4vw, 54px);
    color: var(--sgu-gold);
    text-transform: uppercase;
  }
  .values-title span{ color: rgba(224,193,106,.95); }

  .values-acronym{
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 900;
    letter-spacing: .6px;
    color: rgba(224,193,106,.95);
    font-size: 18px;
  }

  .values-visual{
    margin-top: auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(224,193,106,.16);
    background: rgba(255,255,255,.03);
  }
  .values-visual img{
    width: 100%;
    height: 240px;
    object-fit: cover;
    display:block;
    opacity: .98;
  }

  .values-divider{
    background: linear-gradient(180deg, rgba(224,193,106,.05), rgba(224,193,106,.30), rgba(224,193,106,.05));
  }

  .values-right{
    background: linear-gradient(180deg, rgba(6,39,35,.86), rgba(5,28,26,.92));
    padding: 22px 20px;
  }

  .values-list{
    display:flex;
    flex-direction:column;
    gap: 14px;
  }

  .v-item{
    display:grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items:flex-start;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(224,193,106,.12);
    background: rgba(255,255,255,.03);
  }

  .v-icon{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px solid rgba(224,193,106,.28);
    background: rgba(199,162,74,.10);
    color: rgba(224,193,106,.95);
  }
  .v-icon svg{ width: 22px; height: 22px; }

  .v-body h3{
    margin: 0;
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 900;
    letter-spacing: .3px;
    font-size: 15px;
    color: rgba(224,193,106,.95);
    text-transform: uppercase;
  }

  .v-letter{
    color: var(--sgu-gold);
  }

  .v-line{
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, rgba(224,193,106,.85), rgba(224,193,106,.0));
    margin: 8px 0 8px;
  }

  .v-body p{
    margin: 0;
    color: var(--sgu-muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 78ch;
  }

  /* Responsive */
  @media (max-width: 980px){
    .values-card{
      grid-template-columns: 1fr;
    }
    .values-divider{ display:none; }
    .values-right{ padding: 18px 16px; }
    .values-left::before, .values-left::after{ left:-18px; width: calc(100% + 36px); }
    .values-visual img{ height: 220px; }
  }

  @media (max-width: 560px){
    .v-item{ grid-template-columns: 1fr; }
    .v-icon{ width: 40px; height: 40px; }
  }
      :root{
    --bg:#071f1c;
    --deep:#07322d;
    --deep2:#062723;
    --gold:#c7a24a;
    --gold2:#e0c16a;
    --text:#eef5f3;
    --muted:rgba(238,245,243,.75);
    --line:rgba(224,193,106,.22);
    --shadow:0 18px 42px rgba(0,0,0,.35);
    --radius:18px;
  }

  .rc-wrap{
    padding: 28px 0;
    background:
      radial-gradient(900px 420px at 18% -10%, rgba(224,193,106,.16), transparent 60%),
      radial-gradient(760px 360px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
      linear-gradient(180deg, #061b18, #071f1c);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  .rc-board{
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    border: 1px solid rgba(224,193,106,.18);
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: var(--shadow);
    background: linear-gradient(180deg, rgba(11,47,42,.85), rgba(7,31,28,.95));
  }

  /* MAIN */
  .rc-main{
    position: relative;
    padding: 18px 18px 16px;
    background:
      linear-gradient(180deg, rgba(7,50,45,.96), rgba(6,39,35,.98));
  }

  /* gold top/bottom wedges similar to design */
  .rc-main::before,
  .rc-main::after{
    content:"";
    position:absolute;
    left:-26px;
    width: calc(100% + 52px);
    height: 58px;
    background: linear-gradient(90deg, rgba(199,162,74,0), rgba(199,162,74,.92), rgba(199,162,74,0));
    opacity:.9;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    pointer-events:none;
  }
  .rc-main::before{ top:-1px; }
  .rc-main::after{ bottom:-1px; transform: rotate(180deg); }

  .rc-top{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 8px 0 14px;
  }
  .rc-title{
    margin:0;
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 900;
    letter-spacing: .7px;
    color: rgba(224,193,106,.95);
    text-transform: uppercase;
    font-size: clamp(20px, 2.4vw, 32px);
  }

  .rc-map{
    position: relative;
    height: 420px;
    border-radius: 16px;
    border: 1px solid rgba(224,193,106,.12);
    background:
      radial-gradient(700px 300px at 60% 40%, rgba(255,255,255,.06), transparent 60%),
      rgba(255,255,255,.03);
    overflow:hidden;
  }

  .ug-silhouette{
    position:absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .95;
    transform: translateX(-10px) scale(1.02);
  }

  /* Marker pins */
  .rc-pin{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 8px;
    text-align:center;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  .rc-diamond{
    width: 96px;
    height: 96px;
    border-radius: 18px;
    transform: rotate(45deg);
    overflow:hidden;
    border: 3px solid rgba(255,255,255,.85);
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
    background: rgba(255,255,255,.06);
  }
  .rc-diamond img{
    width: 140%;
    height: 140%;
    object-fit:cover;
    transform: rotate(-45deg) translate(-12%, -12%);
    display:block;
  }

  .rc-pin-text b{
    display:block;
    font-family: Montserrat, Inter, sans-serif;
    letter-spacing:.3px;
    font-weight: 900;
    font-size: 12px;
    color: rgba(224,193,106,.95);
    text-transform: uppercase;
    text-shadow: 0 10px 18px rgba(0,0,0,.25);
  }
  .rc-pin-text span{
    display:block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(238,245,243,.78);
  }

  /* approximate placements (tweak to match your design) */
  .p1{ left: 26%; top: 28%; } /* West Nile */
  .p2{ left: 58%; top: 18%; } /* Northern */
  .p3{ left: 64%; top: 50%; } /* Eastern */
  .p4{ left: 48%; top: 64%; } /* Central */
  .p5{ left: 22%; top: 68%; } /* Western */

  /* SIDE */
  .rc-side{
    border-left: 1px solid rgba(224,193,106,.14);
    background:
      radial-gradient(600px 260px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, rgba(6,39,35,.86), rgba(5,28,26,.92));
    padding: 18px 16px;
  }

  .rc-side-head h3{
    margin:0;
    font-family: Montserrat, Inter, sans-serif;
    letter-spacing:.4px;
    font-weight: 900;
    color: rgba(224,193,106,.95);
    text-transform: uppercase;
    font-size: 16px;
  }
  .rc-side-head p{
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
  }

  .rc-list{ margin-top: 14px; display:flex; flex-direction:column; gap: 10px; }

  .rc-row{
    width:100%;
    text-align:left;
    border-radius: 14px;
    border: 1px solid rgba(224,193,106,.14);
    background: rgba(255,255,255,.03);
    padding: 12px 12px;
    cursor:pointer;
    transition:.2s ease;
    display:flex;
    flex-direction:column;
    gap: 6px;
  }
  .rc-row:hover{
    transform: translateY(-1px);
    border-color: rgba(224,193,106,.35);
    background: rgba(199,162,74,.08);
  }

  .rc-name{
    font-family: Montserrat, Inter, sans-serif;
    font-weight: 900;
    letter-spacing:.3px;
    color: rgba(224,193,106,.95);
    text-transform: uppercase;
    font-size: 13px;
  }
  .rc-phone{
    color: rgba(238,245,243,.82);
    font-weight: 700;
    font-size: 12px;
  }

  .rc-hint{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(224,193,106,.22);
    color: rgba(238,245,243,.70);
    font-size: 12px;
    line-height: 1.45;
  }
  .rc-hint code{
    color: rgba(238,245,243,.88);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(224,193,106,.14);
    padding: 2px 6px;
    border-radius: 10px;
  }

  /* Responsive */
  @media (max-width: 980px){
    .rc-board{ grid-template-columns: 1fr; }
    .rc-side{ border-left: 0; border-top: 1px solid rgba(224,193,106,.14); }
    .rc-map{ height: 520px; }
  }
  @media (max-width: 560px){
    .rc-diamond{ width: 82px; height: 82px; }
    .rc-pin-text b{ font-size: 11px; }
    .rc-map{ height: 540px; }
  }
    
    /* ===== About Poster Layout ===== */
    .about-poster{
      padding: 26px 0 18px;
      background:
        radial-gradient(900px 420px at 18% -10%, rgba(224,193,106,.16), transparent 60%),
        radial-gradient(760px 360px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(180deg, #061b18, #071f1c);
      border-bottom: 1px solid rgba(231, 214, 165, .14);
    }

    .about-poster-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
      align-items:center;
    }

    .poster-title{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      line-height: 1;
      font-size: clamp(32px, 4vw, 56px);
      color: rgba(224,193,106,.95);
    }

    .poster-lines{
      height: 4px;
      width: 82%;
      background: linear-gradient(90deg, rgba(199,162,74,.95), rgba(199,162,74,.18));
      border-radius: 999px;
      margin: 14px 0 16px;
      position: relative;
    }
    .poster-lines::after{
      content:"";
      position:absolute;
      left:0;
      top: 12px;
      height: 4px;
      width: 66%;
      background: linear-gradient(90deg, rgba(199,162,74,.75), rgba(199,162,74,.10));
      border-radius: 999px;
    }

    .poster-text p{
      margin: 0 0 14px;
      color: rgba(234,242,240,.82);
      font-size: 14px;
      line-height: 1.75;
      max-width: 72ch;
    }

    .about-poster-right{
      position: relative;
      min-height: 380px;
      border-radius: 18px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      box-shadow: 0 18px 40px rgba(0,0,0,.25);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .poster-circle{
      width: min(420px, 78%);
      aspect-ratio: 1 / 1;
      border-radius: 999px;
      overflow:hidden;
      border: 6px solid rgba(199,162,74,.92);
      background: rgba(0,0,0,.2);
      position: relative;
      z-index: 2;
    }
    .poster-circle img{
      width:100%;
      height:100%;
      object-fit: cover;
      opacity: .98;
    }

    .poster-triangles{
      position:absolute;
      right: 30px;
      bottom: 78px;
      display:grid;
      grid-template-columns: repeat(2, 34px);
      gap: 10px;
      z-index: 3;
    }
    .pt{
      width:0;height:0;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-bottom: 32px solid rgba(199,162,74,.95);
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
    }
    .pt.t2{ border-bottom-color: rgba(199,162,74,.55); transform: translateY(6px); }
    .pt.t3{ border-bottom-color: rgba(224,193,106,.95); transform: translateY(-4px); }
    .pt.t4{ border-bottom-color: rgba(199,162,74,.78); transform: translateY(10px); }
    .pt.t5{ border-bottom-color: rgba(224,193,106,.75); transform: translateY(2px); }

    .poster-badge{
      position:absolute;
      right: 14px;
      bottom: 12px;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(7,31,28,.55);
      backdrop-filter: blur(8px);
      z-index: 4;
    }
    .poster-badge img{ width: 42px; height: 42px; object-fit: contain; }
    .poster-badge-text b{
      display:block;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .4px;
      font-size: 12px;
      color: rgba(224,193,106,.95);
    }
    .poster-badge-text span{
      display:block;
      margin-top:2px;
      font-size: 11px;
      color: rgba(234,242,240,.78);
    }

    /* ===== Vision & Mission Poster Layout ===== */
    .vm-poster{
      padding: 0 0 26px;
      background: linear-gradient(180deg, #071f1c, #061b18);
    }

    .vm-banner{
      position: relative;
      height: 200px;
      border-bottom: 1px solid rgba(231, 214, 165, .14);
      overflow:hidden;
    }
    .vm-banner img{
      width:100%;
      height:100%;
      object-fit: cover;
      transform: scale(1.03);
      opacity: .98;
    }
    .vm-overlay{
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, rgba(7,31,28,.92), rgba(7,31,28,.55), rgba(7,31,28,.22));
    }
    .vm-head{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap: 8px;
    }
    .vm-title{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 700;
      letter-spacing: .10px;
      text-transform: uppercase;
      font-size: clamp(30px, 6vw, 65px);
      color: rgba(224,193,106,.95);
    }
    .vm-tag{
      width: fit-content;
      padding:8px 20px;
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(199,162,74,.16);
      color: rgba(234,242,240,.92);
      font-weight: 700;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 13px;
    }

    .vm-body{
      margin-top: -52px;
    }

    .vm-box{
      border-radius: 18px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: linear-gradient(180deg, rgba(11,47,42,.85), rgba(7,31,28,.95));
      box-shadow: 0 18px 40px rgba(0,0,0,.25);
      overflow:hidden;
      display:grid;
      grid-template-columns: 1fr 1px 1fr;
      padding: 22px 16px;
      gap: 0;
    }

    .vm-divider{
      background: linear-gradient(180deg, rgba(224,193,106,.05), rgba(224,193,106,.32), rgba(224,193,106,.05));
    }

    .vm-col{
      padding: 6px 16px;
    }
    .vm-col h3{
      margin: 0 0 10px;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      font-size: 22px;
      color: rgba(224,193,106,.95);
      display:flex;
      align-items:center;
      gap: 8px;
    }
    .vm-star{ font-size: 16px; color: rgba(224,193,106,.95); }
    .vm-col p{
      margin: 0;
      color: rgba(234,242,240,.84);
      font-size: 14px;
      line-height: 1.75;
      max-width: 72ch;
    }

    .vm-footer{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap: 10px;
      padding: 14px 0 0;
    }
    .vm-footer img{ width: 44px; height: 44px; object-fit: contain; }
    .vm-footer-text b{
      display:block;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .4px;
      font-size: 12px;
      color: rgba(224,193,106,.95);
    }
    .vm-footer-text span{
      display:block;
      margin-top:2px;
      font-size: 11px;
      color: rgba(234,242,240,.78);
    }

    /* Responsive */
    @media (max-width: 980px){
      .about-poster-grid{ grid-template-columns: 1fr; }
      .about-poster-right{ min-height: 340px; }
      .vm-box{ grid-template-columns: 1fr; }
      .vm-divider{ display:none; }
      .vm-body{ margin-top: -36px; }
    }
    
     <!-- contact us->
      .thanks-wrap{
      padding: 26px 0 34px;
      background:
        radial-gradient(900px 420px at 18% -10%, rgba(224,193,106,.14), transparent 60%),
        radial-gradient(760px 360px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(180deg, #061b18, #071f1c);
    }

    .thanks-board{
      display:grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 18px;
      border-radius: 18px;
      border: 1px solid rgba(231, 214, 165, .14);
      overflow:hidden;
      box-shadow: 0 18px 40px rgba(0,0,0,.25);
      background: linear-gradient(180deg, rgba(11,47,42,.85), rgba(7,31,28,.95));
    }

    /* LEFT */
    .thanks-left{
      padding: 22px 20px 18px;
      position: relative;
      background:
        linear-gradient(180deg, rgba(7,50,45,.96), rgba(6,39,35,.98));
    }

    .thanks-title{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      font-size: clamp(34px, 4.6vw, 66px);
      line-height: 1.0;
      color: rgba(224,193,106,.95);
    }

    .thanks-line{
      margin: 16px 0 18px;
      height: 2px;
      width: 90%;
      background: rgba(224,193,106,.85);
      position: relative;
    }
    .thanks-line::after{
      content:"";
      position:absolute;
      left:0;
      top: 20px;
      height: 2px;
      width: 78%;
      background: rgba(224,193,106,.85);
    }

    .contact-head{
      margin: 34px 0 10px;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      font-size: 20px;
      color: rgba(224,193,106,.95);
    }

    .contact-list{
      display:flex;
      flex-direction:column;
      gap: 10px;
      margin-top: 12px;
    }

    .c-row{
      display:flex;
      align-items:flex-start;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 14px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      color: rgba(234,242,240,.92);
    }

    .c-row:hover{
      border-color: rgba(224,193,106,.35);
      background: rgba(199,162,74,.08);
    }

    .c-ico{
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(224,193,106,.22);
      background: rgba(199,162,74,.14);
      flex: 0 0 32px;
      line-height: 1;
    }

    .c-txt{
      font-size: 13px;
      line-height: 1.5;
      color: rgba(234,242,240,.88);
      font-weight: 600;
      word-break: break-word;
    }

    /* RIGHT */
    .thanks-right{
      padding: 18px 18px 18px;
      position: relative;
      background:
        radial-gradient(760px 360px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(180deg, rgba(6,39,35,.86), rgba(5,28,26,.92));
    }

    .thanks-brand{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 10px;
      margin-bottom: 10px;
    }
    .thanks-brand img{
      width: 46px;
      height: 46px;
      object-fit: contain;
    }
    .thanks-brand-text b{
      display:block;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .4px;
      color: rgba(224,193,106,.95);
      text-transform: uppercase;
      font-size: 12px;
      text-align: right;
    }
    .thanks-brand-text span{
      display:block;
      margin-top:2px;
      color: rgba(234,242,240,.78);
      font-size: 11px;
      text-align: right;
    }
    .thanks-brand-text small{
      display:block;
      margin-top:4px;
      color: rgba(224,193,106,.95);
      font-size: 11px;
      text-align: right;
    }

    .thanks-image{
      border-radius: 16px;
      border: 1px solid rgba(231, 214, 165, .14);
      overflow:hidden;
      background: rgba(0,0,0,.18);
      height: 220px;
    }
    .thanks-image img{
      width:100%;
      height:100%;
      object-fit: cover;
      opacity: .98;
    }

    .thanks-note{
      margin-top: 10px;
      text-align:center;
      font-weight: 800;
      font-size: 13px;
      color: rgba(224,193,106,.95);
      font-family: Montserrat, Inter, sans-serif;
    }

    .map-card{
      margin-top: 12px;
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(0,0,0,.15);
      height: 260px;
    }
    .map-card iframe{
      width:100%;
      height:100%;
      border:0;
      display:block;
    }

    /* Responsive */
    @media (max-width: 980px){
      .thanks-board{ grid-template-columns: 1fr; }
      .thanks-line::after{ top: 14px; width: 70%; }
      .thanks-right{ padding-top: 12px; }
      .thanks-image{ height: 200px; }
      .map-card{ height: 320px; }
    }
    
     <!-- Gallery section->
      /* Hero */
    .g-hero{
      padding: 22px 0 10px;
      background:
        radial-gradient(900px 420px at 18% -10%, rgba(224,193,106,.14), transparent 60%),
        radial-gradient(760px 360px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(180deg, #061b18, #071f1c);
      border-bottom: 1px solid rgba(231, 214, 165, .14);
    }
    .g-hero-inner{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    .g-title{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      font-size: clamp(26px, 3.4vw, 44px);
      color: rgba(224,193,106,.95);
      line-height: 1.05;
    }
    .g-sub{
      margin: 10px 0 0;
      color: rgba(234,242,240,.80);
      max-width: 72ch;
      font-size: 13px;
      line-height: 1.7;
    }
    .g-note{
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      color: rgba(234,242,240,.84);
      font-size: 12px;
      font-weight: 600;
    }
    .g-note b{ color: rgba(224,193,106,.95); }

    /* Grid */
    .g-wrap{
      padding: 18px 0 34px;
      background: linear-gradient(180deg, #071f1c, #061b18);
    }
    .g-grid{
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
    }
    .g-item{
      border: 0;
      padding: 0;
      cursor: pointer;
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      box-shadow: 0 16px 38px rgba(0,0,0,.18);
      transition: .18s ease;
      height: 170px;
    }
    .g-item:hover{
      transform: translateY(-2px);
      border-color: rgba(224,193,106,.35);
      background: rgba(199,162,74,.06);
    }
    .g-item img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      opacity: .98;
    }

    /* Lightbox */
    .lightbox{
      position: fixed;
      inset: 0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.72);
      z-index: 999;
      padding: 18px;
    }
    .lightbox.open{ display:flex; }

    .lb-top{
      position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      pointer-events: none; /* allow stage gestures */
    }
    .lb-counter{
      pointer-events: auto;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(7,31,28,.60);
      color: rgba(234,242,240,.92);
      font-weight: 800;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 12px;
    }
    .lb-actions{
      pointer-events: auto;
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content:flex-end;
    }
    .lb-btn{
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(7,31,28,.60);
      color: rgba(234,242,240,.92);
      font-weight: 900;
      padding: 10px 12px;
      cursor:pointer;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 12px;
      transition: .18s ease;
    }
    .lb-btn:hover{
      border-color: rgba(224,193,106,.45);
      background: rgba(199,162,74,.12);
    }
    .lb-btn.close{
      border-color: rgba(224,193,106,.35);
    }

    .lb-stage{
      width: min(1100px, 100%);
      height: min(74vh, 720px);
      border-radius: 18px;
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(7,31,28,.65);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 18px 42px rgba(0,0,0,.35);
      touch-action: none; /* allow custom pinch/drag */
      position: relative;
    }
    #lbImg{
      max-width: none; /* allow zoom */
      max-height: none;
      width: auto;
      height: auto;
      user-select: none;
      -webkit-user-drag: none;
      transform-origin: center center;
      will-change: transform;
      cursor: grab;
    }
    #lbImg:active{ cursor: grabbing; }

    .lb-nav{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 54px;
      height: 54px;
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(7,31,28,.60);
      color: rgba(234,242,240,.92);
      font-size: 34px;
      font-weight: 900;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      transition: .18s ease;
    }
    .lb-nav:hover{
      border-color: rgba(224,193,106,.45);
      background: rgba(199,162,74,.12);
    }
    .lb-nav.prev{ left: 16px; }
    .lb-nav.next{ right: 16px; }

    .lb-hint{
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(7,31,28,.60);
      color: rgba(234,242,240,.85);
      font-size: 12px;
      font-weight: 700;
      max-width: calc(100% - 40px);
      text-align:center;
      pointer-events: none;
    }

    /* Responsive */
    @media (max-width: 1100px){
      .g-grid{ grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 860px){
      .g-grid{ grid-template-columns: repeat(3, 1fr); }
      .g-item{ height: 160px; }
    }
    @media (max-width: 620px){
      .g-grid{ grid-template-columns: repeat(2, 1fr); }
      .g-item{ height: 150px; }
      .lb-nav{ width: 46px; height: 46px; font-size: 30px; }
      .lb-stage{ height: 70vh; }
    }
    
    <!-- ✅embership-->
    
    :root{
      --bg:#071f1c;
      --deep:#07322d;
      --deep2:#062723;

      --gold:#c7a24a;
      --gold2:#e0c16a;

      --text:#eef5f3;
      --muted:rgba(238,245,243,.75);

      --line:rgba(224,193,106,.22);
      --shadow:0 18px 42px rgba(0,0,0,.35);
      --radius:18px;

      /* chart scale: 1 unit = 6px; 40 = 240px */
      --unit: 6px;
      --plotH: calc(40 * var(--unit));
    }

    .back-home{
      position: fixed;
      left: 16px;
      top: 92px;
      z-index: 80;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      background: rgba(7,31,28,.75);
      color: rgba(234,242,240,.92);
      font-weight: 900;
      font-family: Montserrat, Inter, sans-serif;
      letter-spacing: .2px;
      text-decoration: none;
      backdrop-filter: blur(10px);
      transition: .18s ease;
    }
    .back-home:hover{
      border-color: rgba(224,193,106,.45);
      background: rgba(199,162,74,.12);
      transform: translateY(-1px);
    }

    .mw-wrap{
      padding: 22px 0 34px;
      background:
        radial-gradient(900px 420px at 18% -10%, rgba(224,193,106,.14), transparent 60%),
        radial-gradient(760px 360px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(180deg, #061b18, #071f1c);
    }

    .mw-page-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      padding: 14px 0 12px;
      border-bottom: 2px solid rgba(224,193,106,.30);
      margin-bottom: 14px;
    }

    .mw-title{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .9px;
      text-transform: uppercase;
      font-size: clamp(26px, 3.2vw, 44px);
      color: rgba(224,193,106,.95);
      line-height: 1.05;
    }

    .mw-logo-mini{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .mw-logo-mini img{
      width: 44px;
      height: 44px;
      object-fit: contain;
    }
    .mw-org{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      color: rgba(224,193,106,.95);
      letter-spacing: .3px;
      line-height: 1.05;
    }
    .mw-org-sub{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      color: rgba(238,245,243,.80);
      letter-spacing: .3px;
      font-size: 12px;
      margin-top: 2px;
      text-transform: uppercase;
    }

    /* ROADMAP LAYOUT */
    .mw-road{
      display:grid;
      grid-template-columns: 1.05fr 1.0fr 1.05fr;
      gap: 16px;
      align-items: stretch;
    }

    .mw-left, .mw-right{
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .mw-block{
      border-radius: 14px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      box-shadow: 0 16px 38px rgba(0,0,0,.18);
      padding: 12px 12px;
    }

    .mw-block-border{
      border-top: 3px solid rgba(224,193,106,.42);
    }

    .mw-block h3{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .3px;
      color: rgba(224,193,106,.95);
      font-size: 14px;
      line-height: 1.2;
    }

    .mw-duration{
      margin-top: 10px;
      font-weight: 900;
      font-family: Montserrat, Inter, sans-serif;
      color: rgba(224,193,106,.95);
      font-size: 12px;
      letter-spacing: .2px;
    }

    .mw-block p{
      margin: 10px 0 0;
      color: rgba(234,242,240,.78);
      font-size: 12px;
      line-height: 1.7;
    }

    /* CHART */
    .mw-chart{
      border-radius: 14px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.02);
      box-shadow: 0 16px 38px rgba(0,0,0,.18);
      padding: 12px 10px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .chart-wrap{
      width: 100%;
      max-width: 360px;
      display:flex;
      gap: 10px;
      align-items:flex-end;
    }

    .y-axis{
      width: 32px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      height: calc(var(--plotH) + 30px);
      padding-bottom: 22px; /* align with x labels */
      color: rgba(238,245,243,.82);
      font-weight: 800;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 12px;
    }

    .plot{
      position: relative;
      flex: 1;
      height: calc(var(--plotH) + 30px);
      padding-bottom: 22px; /* x labels */
    }

    .gridline{
      position:absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(238,245,243,.16);
      border-radius: 3px;
    }
    .g40{ top: 0; }
    .g30{ top: calc((40 - 30) * var(--unit)); }
    .g20{ top: calc((40 - 20) * var(--unit)); }
    .g10{ top: calc((40 - 10) * var(--unit)); }

    .bars{
      position:absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      height: calc(var(--plotH) + 22px);
      padding: 0 6px;
    }

    .bar{
      width: 46px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      gap: 0;
      align-items:stretch;
    }

    .stack{
      height: calc(var(--v) * var(--unit));
      border-radius: 6px 6px 0 0;
    }

    /* colors to match the image */
    .bot{
      background: #f7e37f; /* light yellow */
      border-radius: 8px 8px 0 0;
    }
    .mid{
      background: #b78a34; /* brown */
      border-radius: 0;
    }
    .top{
      background: #e4c667; /* light gold */
      border-radius: 0 0 8px 8px;
    }

    /* make stacks look like one bar (no gaps) */
    .bar .stack + .stack{ border-radius: 0; }
    .bar .stack:first-child{ border-radius: 8px 8px 0 0; } /* top of total */
    .bar .stack:last-child{ border-radius: 0 0 8px 8px; } /* bottom of total */

    .xlab{
      margin-top: 8px;
      text-align:center;
      color: rgba(238,245,243,.82);
      font-weight: 800;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 12px;
    }

    /* FUTURE PLANS */
    .future-wrap{
      margin-top: 16px;
      border-radius: 18px;
      border: 1px solid rgba(231, 214, 165, .14);
      background: linear-gradient(180deg, rgba(11,47,42,.85), rgba(7,31,28,.95));
      box-shadow: 0 18px 40px rgba(0,0,0,.22);
      overflow:hidden;
    }

    .future-banner{
      display:grid;
      grid-template-columns: .55fr .45fr;
      gap: 12px;
      padding: 14px;
      align-items:stretch;
      border-bottom: 1px solid rgba(231, 214, 165, .12);
    }

    .future-title{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .9px;
      text-transform: uppercase;
      color: rgba(224,193,106,.95);
      font-size: clamp(26px, 3.6vw, 48px);
      line-height: 1;
      padding: 8px 6px;
    }

    .future-img{
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(0,0,0,.12);
      height: 180px;
    }
    .future-img img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      opacity: .96;
    }

    .future-body{ padding: 14px; }

    .future-list{
      margin: 0;
      padding-left: 18px;
      display:flex;
      flex-direction:column;
      gap: 10px;
    }

    .future-list li{
      list-style: none;
      position: relative;
      padding-left: 12px;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .3px;
      color: rgba(224,193,106,.95);
      text-transform: uppercase;
      font-size: 13px;
      line-height: 1.4;
    }
    .future-list li::before{
      content:"•";
      position:absolute;
      left:0;
      top:0;
      color: rgba(224,193,106,.95);
    }

    /* Responsive */
    @media (max-width: 1020px){
      .mw-road{ grid-template-columns: 1fr; }
      .mw-logo-mini{ display:none; }
      .future-banner{ grid-template-columns: 1fr; }
      .future-img{ height: 220px; }
    }
    @media (max-width: 620px){
      .bar{ width: 42px; }
      .chart-wrap{ max-width: 100%; }
      .back-home{ top: 86px; }
    }
    
     /* benefits page */
:root{
      --b-bg:#071f1c;
      --b-deep:#07322d;
      --b-deep2:#062723;
      --b-gold:#c7a24a;
      --b-gold2:#e0c16a;
      --b-text:#eef5f3;
      --b-muted:rgba(238,245,243,.78);
      --b-line:rgba(224,193,106,.22);
      --b-shadow:0 18px 42px rgba(0,0,0,.35);
      --b-radius:18px;
      --b-radius-sm:14px;
      --b-container: 1180px;
    }

    .b-hero{
      padding: 22px 0 18px;
      background:
        radial-gradient(900px 420px at 18% -10%, rgba(224,193,106,.14), transparent 60%),
        radial-gradient(760px 360px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(180deg, #061b18, #071f1c);
    }

    .b-hero-grid{
      width: min(var(--b-container), calc(100% - 32px));
      margin-inline:auto;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 16px;
      align-items: stretch;
    }

    .b-hero-copy{
      border-radius: var(--b-radius);
      border: 1px solid rgba(231, 214, 165, .14);
      background: linear-gradient(180deg, rgba(11,47,42,.85), rgba(7,31,28,.95));
      box-shadow: 0 18px 40px rgba(0,0,0,.22);
      padding: 18px;
      display:flex;
      flex-direction:column;
      gap: 12px;
      position: relative;
      overflow:hidden;
    }

    .b-hero-copy::before{
      content:"";
      position:absolute;
      inset:-20% -40% auto auto;
      width: 360px;
      height: 360px;
      background: radial-gradient(circle at 30% 30%, rgba(224,193,106,.22), transparent 60%);
      transform: rotate(18deg);
      pointer-events:none;
    }

    .b-kicker{
      display:flex;
      gap: 8px;
      flex-wrap:wrap;
      position:relative;
      z-index:1;
    }

    .b-pill{
      border: 1px solid rgba(199,162,74,.35);
      background: rgba(199,162,74,.10);
      color: rgba(234,242,240,.92);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .6px;
      font-family: Montserrat, Inter, sans-serif;
    }

    .b-title{
      margin: 4px 0 0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .2px;
      font-size: clamp(20px, 2.2vw, 28px);
      line-height: 1.15;
      position:relative;
      z-index:1;
    }

    .b-desc{
      margin: 0;
      color: var(--b-muted);
      font-size: 14px;
      line-height: 1.7;
      position:relative;
      z-index:1;
    }

    .b-actions{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      margin-top: 6px;
      position:relative;
      z-index:1;
    }

    .b-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 11px 14px;
      border-radius: 999px;
      border: 1px solid rgba(231, 214, 165, .18);
      font-weight: 900;
      font-size: 13px;
      letter-spacing:.2px;
      background: rgba(255,255,255,.04);
      transition:.2s ease;
      cursor:pointer;
      text-decoration:none;
      color: rgba(234,242,240,.92);
      font-family: Montserrat, Inter, sans-serif;
    }
    .b-btn:hover{
      transform: translateY(-1px);
      border-color: rgba(199,162,74,.48);
      background: rgba(199,162,74,.10);
    }
    .b-primary{
      border-color: rgba(199,162,74,.65);
      background: linear-gradient(180deg, rgba(199,162,74,.18), rgba(199,162,74,.08));
    }

    .b-hero-media{
      display:grid;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
    }

    .b-img-card{
      border-radius: var(--b-radius);
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      box-shadow: 0 18px 40px rgba(0,0,0,.22);
      overflow:hidden;
      position:relative;
      min-height: 220px;
    }
    .b-img-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      opacity: .95;
      transform: scale(1.02);
    }
    .b-img-tag{
      position:absolute;
      left: 12px;
      bottom: 12px;
      background: rgba(10, 39, 35, .82);
      border: 1px solid rgba(199,162,74,.45);
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      backdrop-filter: blur(8px);
      font-family: Montserrat, Inter, sans-serif;
      color: rgba(234,242,240,.92);
    }

    .b-section{
      padding: 18px 0 30px;
      background: linear-gradient(180deg, #071f1c, #061b18);
    }

    .b-head{
      width: min(var(--b-container), calc(100% - 32px));
      margin-inline:auto;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .b-h2{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing: .2px;
      color: rgba(224,193,106,.95);
      font-size: 18px;
      text-transform: uppercase;
    }

    .b-sub{
      margin:0;
      color: var(--b-muted);
      font-size: 13px;
      max-width: 620px;
    }

    .b-grid{
      width: min(var(--b-container), calc(100% - 32px));
      margin-inline:auto;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .b-card{
      border-radius: var(--b-radius-sm);
      border: 1px solid rgba(231, 214, 165, .14);
      background: rgba(255,255,255,.03);
      box-shadow: 0 16px 38px rgba(0,0,0,.20);
      padding: 14px;
      transition:.2s ease;
      position:relative;
      overflow:hidden;
    }
    .b-card:hover{
      transform: translateY(-2px);
      border-color: rgba(199,162,74,.36);
      background: rgba(199,162,74,.06);
    }

    .b-ic{
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid rgba(224,193,106,.28);
      background: rgba(199,162,74,.10);
      color: rgba(224,193,106,.95);
      font-weight: 900;
      font-family: Montserrat, Inter, sans-serif;
      margin-bottom: 10px;
      box-shadow: 0 14px 30px rgba(0,0,0,.18);
    }

    .b-card h3{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      letter-spacing:.2px;
      color: rgba(234,242,240,.92);
      font-size: 14px;
      line-height:1.25;
    }

    .b-card p{
      margin: 10px 0 0;
      color: var(--b-muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .b-list{
      margin: 10px 0 0;
      padding-left: 18px;
      color: var(--b-muted);
      font-size: 13px;
      line-height: 1.65;
    }
    .b-list li{ margin: 6px 0; }

    .b-note{
      margin-top: 10px;
      color: rgba(238,245,243,.80);
      font-size: 12px;
      border-top: 1px solid rgba(231, 214, 165, .12);
      padding-top: 10px;
    }

    .b-cta{
      width: min(var(--b-container), calc(100% - 32px));
      margin: 16px auto 0;
      border-radius: var(--b-radius);
      border: 1px solid rgba(231, 214, 165, .14);
      background: linear-gradient(90deg, rgba(199,162,74,.10), rgba(15,63,56,.18));
      box-shadow: 0 18px 40px rgba(0,0,0,.20);
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      flex-wrap:wrap;
    }

    .b-cta h3{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      color: rgba(224,193,106,.95);
      letter-spacing: .2px;
      font-size: 16px;
      text-transform: uppercase;
    }

    .b-cta p{
      margin: 6px 0 0;
      color: rgba(238,245,243,.78);
      font-size: 13px;
      max-width: 640px;
      line-height: 1.6;
    }

    .b-cta-actions{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
    }

    @media (max-width: 980px){
      .b-hero-grid{ grid-template-columns: 1fr; }
      .b-hero-media{ grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
      .b-grid{ grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 620px){
      .b-hero-media{ grid-template-columns: 1fr; }
      .b-grid{ grid-template-columns: 1fr; }
    }