:root {
     --navy: #0B2E59;
     --gold: #E0B030;
     --bg: #F7F9FC;
     --card: #FFFFFF;
     --text: #101828;
     --muted: #475467;
     --border: #E5E7EB;

     --shadow: 0 12px 30px rgba(16, 24, 40, .08);
     --radius: 18px;
     --container: 1120px;
 }

 * {
     box-sizing: border-box
 }

 body {
     margin: 0;
     background: var(--bg);
     color: var(--text);
     font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     line-height: 1.55;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
 }

 a {
     color: inherit;
     text-decoration: none
 }

 img {
     max-width: 100%;
     display: block
 }

 .container {
     max-width: var(--container);
     margin: 0 auto;
     padding: 0 18px
 }

 .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     box-shadow: var(--shadow)
 }

 .section {
     padding: 18px 0
 }

 .section-head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 12px
 }

 .section-head h2 {
     margin: 0;
     font-family: Merriweather, serif;
     color: var(--navy);
     font-size: 22px
 }

 .section-head span {
     color: var(--muted);
     font-size: 14px
 }

 /* Topbar */
 .topbar {
     background: #fff;
     border-bottom: 1px solid var(--border);
     font-size: 14px
 }

 .topbar .inner {
     display: flex;
     gap: 12px;
     align-items: center;
     justify-content: space-between;
     padding: 10px 0
 }

 .pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 10px;
     border-radius: 999px;
     border: 1px solid var(--border);
     background: #fff;
     color: var(--muted);
     white-space: nowrap;
 }

 .dot {
     width: 8px;
     height: 8px;
     border-radius: 999px;
     background: var(--gold)
 }

 .topbar .left {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }

 /* Header */
 header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(247, 249, 252, .9);
     backdrop-filter: saturate(180%) blur(10px);
     border-bottom: 1px solid rgba(229, 231, 235, .7);
 }

 .header-inner {
     padding: 12px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .logo {
     width: 46px;
     height: 46px;
     border-radius: 14px;
     background: #fff;
     border: 1px solid var(--border);
     box-shadow: 0 6px 20px rgba(16, 24, 40, .06);
     padding: 8px;
     flex: 0 0 auto;
 }

 .brand .title {
     display: flex;
     flex-direction: column;
     line-height: 1.1
 }

 .brand .title b {
     font-family: Merriweather, serif;
     font-size: 18px;
     color: var(--navy);
     letter-spacing: .2px
 }

 .brand .title span {
     font-size: 10px;
     color: var(--muted)
 }

 nav {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .navlinks {
     display: flex;
     gap: 14px;
     align-items: center
 }

 .navlinks a {
     font-size: 14px;
     color: var(--muted);
     padding: 8px 10px;
     border-radius: 12px;
 }

 .navlinks a:hover {
     background: #fff;
     border: 1px solid var(--border);
     color: var(--navy)
 }

 .btn {
     border-radius: 14px;
     padding: 10px 14px;
     font-weight: 600;
     font-size: 14px;
     border: 1px solid transparent;
     cursor: pointer;
     transition: .15s ease;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     -webkit-tap-highlight-color: transparent;
 }

 .btn-primary {
     background: var(--navy);
     color: #fff;
     box-shadow: var(--shadow)
 }

 .btn-primary:hover {
     transform: translateY(-1px)
 }

 .btn-outline {
     background: #fff;
     color: var(--navy);
     border-color: var(--border)
 }

 .btn-outline:hover {
     border-color: rgba(11, 46, 89, .25)
 }

 .hamburger {
     display: none
 }

 /* Hero */
 .hero {
     padding: 26px 0 10px
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 18px;
     align-items: stretch;
 }

 .hero-main {
     padding: 22px;
     position: relative;
     overflow: hidden
 }

 .tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 7px 12px;
     border-radius: 999px;
     background: rgba(224, 176, 48, .14);
     border: 1px solid rgba(224, 176, 48, .26);
     color: var(--navy);
     font-weight: 700;
     font-size: 12px;
 }

 h1 {
     margin: 12px 0 10px;
     font-family: Merriweather, serif;
     color: var(--navy);
     font-size: 38px;
     line-height: 1.18;
 }

 .hero p {
     margin: 0 0 16px;
     color: var(--muted);
     font-size: 15px;
     max-width: 60ch
 }

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

 .hero-accent {
     position: absolute;
     right: -80px;
     top: -80px;
     width: 220px;
     height: 220px;
     border-radius: 999px;
     background: rgba(224, 176, 48, .12);
     border: 1px solid rgba(224, 176, 48, .20);
 }

 .hero-visual {
     padding: 12px;
     display: flex;
     flex-direction: column;
     gap: 12px
 }

 .visual-frame {
     border-radius: 18px;
     border: 1px solid var(--border);
     overflow: hidden;
     background: #fff;
     height: 100%;
     min-height: 260px;
     position: relative;
 }

 .visual-frame img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity .5s ease;
 }

 .visual-caption {
     position: absolute;
     left: 12px;
     right: 12px;
     bottom: 12px;
     background: rgba(255, 255, 255, .92);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 10px 12px;
     box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
 }

 .visual-caption b {
     color: var(--navy)
 }

 .visual-caption div {
     color: var(--muted);
     font-size: 13px;
     margin-top: 2px
 }

 .mini-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px
 }

 .mini-stat {
     padding: 12px;
     border-radius: 16px;
     border: 1px solid var(--border);
     background: linear-gradient(180deg, #fff, rgba(247, 249, 252, .9));
 }

 .mini-stat .num {
     font-family: Merriweather, serif;
     color: var(--navy);
     font-size: 20px
 }

 .mini-stat .lbl {
     color: var(--muted);
     font-size: 12px;
     margin-top: 4px
 }

 /* Ecosystem */
 .grid-4 {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px
 }

 .mini {
     padding: 16px;
     border-radius: 18px;
     background: #fff;
     border: 1px solid var(--border);
     box-shadow: 0 10px 24px rgba(16, 24, 40, .06);
     transition: .15s ease;
 }

 .mini:hover {
     transform: translateY(-2px)
 }

 .mini .icon {
     width: 44px;
     height: 44px;
     border-radius: 14px;
     background: rgba(11, 46, 89, .06);
     border: 1px solid rgba(11, 46, 89, .10);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     color: var(--navy);
     margin-bottom: 12px;
 }

 .mini b {
     color: var(--navy)
 }

 .mini p {
     margin: 6px 0 0;
     color: var(--muted);
     font-size: 14px
 }

 /* About (with image space) */
 .about-grid {
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 14px;
     align-items: stretch;
 }

 .about-photo {
     border-radius: 18px;
     overflow: hidden;
     border: 1px solid var(--border);
     height: 100%;
     min-height: 260px;
     background: #fff;
 }

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

 .about-body {
     padding: 18px
 }

 .about-body h3 {
     margin: 0 0 8px;
     color: var(--navy);
     font-family: Merriweather, serif;
     font-size: 18px;
 }

 .about-body p {
     margin: 0 0 12px;
     color: var(--muted);
     font-size: 14px;
     max-width: 70ch
 }

 .bullets {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 10px
 }

 .bullets li {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     color: var(--muted);
     font-size: 14px;
 }

 .check {
     width: 20px;
     height: 20px;
     border-radius: 7px;
     border: 1px solid rgba(224, 176, 48, .35);
     background: rgba(224, 176, 48, .16);
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--navy);
     font-weight: 900;
     font-size: 12px;
     margin-top: 2px;
 }

 /* Upcoming */
 .grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
 }

 .event {
     padding: 16px;
 }

 .event .date {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--muted);
     font-size: 13px;
     margin-bottom: 10px;
 }

 .event h3 {
     margin: 0 0 8px;
     font-size: 16px;
     color: var(--navy);
 }

 .event p {
     margin: 0 0 12px;
     color: var(--muted);
     font-size: 14px
 }

 .event .foot {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }


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

 .visual-card {
     overflow: hidden
 }

 .visual-card .thumb {
     height: 170px;
     border-bottom: 1px solid var(--border)
 }

 .visual-card .thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .visual-card .body {
     padding: 14px
 }

 .visual-card h3 {
     margin: 0 0 6px;
     font-size: 16px;
     color: var(--navy)
 }

 .visual-card p {
     margin: 0;
     color: var(--muted);
     font-size: 14px
 }


 /* Goals (govt style cards) */
 .grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px
 }

 .goal {
     padding: 16px;
 }

 .goal b {
     color: var(--navy)
 }

 .goal p {
     margin: 6px 0 0;
     color: var(--muted);
     font-size: 14px
 }

 /* Campaigns (visual cards) */
 .campaign {
     overflow: hidden
 }

 .campaign .thumb {
     height: 180px;
     border-bottom: 1px solid var(--border)
 }

 .campaign .thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .campaign .body {
     padding: 14px
 }

 .campaign h3 {
     margin: 0 0 6px;
     font-size: 16px;
     color: var(--navy)
 }

 .campaign p {
     margin: 0 0 12px;
     color: var(--muted);
     font-size: 14px
 }

 .campaign .foot {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }

 /* Gallery */
 .gallery-wrap {
     background: #fff;
     border: 1px solid var(--border);
     border-radius: 18px;
     box-shadow: var(--shadow);
     padding: 12px;
 }

 .gallery {
     display: flex;
     gap: 12px;
     overflow: auto;
     scroll-snap-type: x mandatory;
     padding-bottom: 6px;
     -webkit-overflow-scrolling: touch;
 }

 .gallery::-webkit-scrollbar {
     height: 10px
 }

 .gallery::-webkit-scrollbar-thumb {
     background: #e9edf3;
     border-radius: 999px
 }

 .g-item {
     scroll-snap-align: start;
     flex: 0 0 260px;
     height: 170px;
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid var(--border);
     background: #fff;
 }

 .g-item img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 /* Media grid */
 .media-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 12px;
 }

 .media-tile {
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid var(--border);
     background: #fff;
     aspect-ratio: 1/1;
 }

 .media-tile img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 /* Footer */
 footer {
     margin-top: 22px;
     background: #fff;
     border-top: 1px solid var(--border)
 }

 .footer-inner {
     padding: 22px 0;
     display: grid;
     grid-template-columns: 1.2fr .8fr .8fr;
     gap: 14px;
 }

 .footer-inner h4 {
     margin: 0 0 10px;
     color: var(--navy)
 }

 .footer-inner a {
     color: var(--muted);
     font-size: 14px;
     display: block;
     padding: 6px 0
 }

 .small {
     color: var(--muted);
     font-size: 13px;
     margin-top: 10px
 }

 /* Mobile */
 @media (max-width: 980px) {
     .hero-grid {
         grid-template-columns: 1fr
     }

     .brand .title b {
         font-size: 13px;
     }

     .brand .title span {
         font-size: 8px;
     }

     .grid-4 {
         grid-template-columns: repeat(2, 1fr)
     }

     .grid-3 {
         grid-template-columns: 1fr
     }

     .about-grid {
         grid-template-columns: 1fr
     }

     .mini-row {
         grid-template-columns: repeat(3, 1fr)
     }

     .media-grid {
         grid-template-columns: repeat(3, 1fr)
     }

     .navlinks {
         display: none
     }

     .hamburger {
         display: inline-flex
     }

     .footer-inner {
         grid-template-columns: 1fr
     }

     h1 {
         font-size: 30px
     }

     .btn {
         padding: 8px 10px;
         font-size: 10px;
         border-radius: 10px;
     }

     .visual-frame {
         min-height: 220px
     }

     .header-left {
         display: contents;
     }

     .pill {
         font-size: 12px;
         padding: 5px 8px;
     }
 }

 @media (max-width: 520px) {
     .container {
         padding: 0 14px
     }

  .grid-4 {
         grid-template-columns: repeat(2, 1fr)
     }
     .media-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .g-item {
         flex-basis: 220px
     }

     .topbar .left {
         display: none
     }

     .topbar .inner {
         justify-content: center
     }

     .cta {
         gap: 5px;
         display: flex;
     }
 }

 /* Mobile Menu */
 .mobile-menu {
     display: none;
     padding: 12px 0 18px
 }

 .mobile-menu a {
     display: block;
     padding: 12px 12px;
     border: 1px solid var(--border);
     border-radius: 14px;
     background: #fff;
     color: var(--navy);
     margin: 8px 0;
     font-weight: 600;
 }

 .show {
     display: block
 }