:root{
    --g:#2563A6;
    --g2:#2563A6;
    --o:#2563A6;
    --ink:#17302a;
    --muted:#65736d;
    --line:#e1ebe5
  }
  
  *{box-sizing:border-box}
  
  body{
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:#f4f8f5;
    color:var(--ink)
  }
  
  header{
    height:72px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    padding:0 24px;
    gap:18px
  }
  
  header img{
    height:55px;
    width:auto
  }
  
  .logout{
    margin-left:auto;
    border:0;
    background:#fff0e2;
    color:#8a4b00;
    padding:9px 14px;
    border-radius:999px;
    font-weight:800;
    cursor:pointer
  }
  
  .layout{
    display:grid;
    grid-template-columns:230px 1fr;
    min-height:calc(100vh - 72px)
  }
  
  aside{
    background:#2563A6;
    color:#e7f5ed;
    padding:20px
  }
  
  aside button{
    width:100%;
    padding:12px;
    text-align:left;
    border:0;
    background:transparent;
    color:inherit;
    border-radius:10px;
    margin:3px 0;
    cursor:pointer
  }
  
  aside button.active,
  aside button:hover{
    background:#ffffff16
  }
  
  main{
    padding:28px;
    max-width:1200px;
    width:100%
  }
  
  .panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:22px;
    margin-bottom:20px
  }
  
  .grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px
  }
  
  .kpi{
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px
  }
  
  .kpi b{
    font-size:30px;
    color:var(--g2);
    display:block
  }
  
  .formGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px
  }
  
  .field label{
    display:block;
    font-size:12px;
    font-weight:800;
    margin-bottom:5px
  }
  
  .field input,
  .field select,
  .field textarea{
    width:100%;
    padding:11px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff
  }
  
  .field input[type="file"]{
    padding:9px;
    cursor:pointer
  }
  
  .full{
    grid-column:1/-1
  }
  
  .btn{
    border:0;
    border-radius:999px;
    padding:11px 17px;
    font-weight:800;
    cursor:pointer
  }
  
  .primary{
    background:var(--g);
    color:#fff
  }
  
  .secondary{
    background:#edf7f0;
    color:var(--g2)
  }
  
  .danger{
    background:#fff0ee;
    color:#a33120
  }
  
  .table{
    width:100%;
    border-collapse:collapse
  }
  
  .table th,
  .table td{
    padding:11px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:13px
  }
  
  /* IMAGE AREA */
  
  .image-help{
    font-size:12px;
    color:var(--muted);
    margin:6px 0 10px
  }
  
  .thumbs{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    margin-top:12px
  }
  
  .thumb{
    position:relative;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:#f7faf8
  }
  
  .thumb img{
    width:100%;
    height:100px;
    object-fit:cover;
    display:block
  }
  
  .thumb button{
    position:absolute;
    top:5px;
    right:5px;
    width:27px;
    height:27px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#a33120;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 2px 8px #0002
  }
  
  .image-count{
    margin-top:8px;
    font-size:12px;
    font-weight:700;
    color:var(--g2)
  }
  
  .msg{
    padding:10px;
    border-radius:10px;
    margin:10px 0
  }
  
  .ok{
    background:#edf8f0;
    color:#2563A6
  }
  
  .err{
    background:#fff0ee;
    color:#a33120
  }
  
  .hidden{
    display:none
  }
  
  .progress-box{
    margin-top:12px;
    display:none
  }
  
  .progress-track{
    height:8px;
    background:#e5eee8;
    border-radius:999px;
    overflow:hidden
  }
  
  .progress-bar{
    width:0%;
    height:100%;
    background:var(--g);
    transition:width .2s
  }
  
  .progress-text{
    font-size:12px;
    margin-top:5px;
    color:var(--muted)
  }
  
  @media(max-width:850px){
  
    .layout{
      grid-template-columns:1fr
    }
  
    aside{
      display:flex;
      overflow:auto;
      gap:5px
    }
  
    aside button{
      white-space:nowrap;
      width:auto
    }
  
    .grid{
      grid-template-columns:1fr 1fr
    }
  
    .formGrid{
      grid-template-columns:1fr
    }
  
    .full{
      grid-column:auto
    }
  
    main{
      padding:15px
    }
  }
  
  @media(max-width:520px){
  
    .grid{
      grid-template-columns:1fr
    }
  
    .thumbs{
      grid-template-columns:repeat(2,1fr)
    }
  }
  
  * {
    box-sizing: border-box;
  }

  body.login-page {
    margin: 0;
    min-height: 100vh;

    font-family:
      Inter,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;

    background:
      radial-gradient(
        circle at top left,
        rgba(37, 99, 166, 0.15),
        transparent 35%
      ),
      linear-gradient(
        135deg,
        #f2faf5,
        #e8f4ed
      );

    color: #17302a;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
  }

  .login-wrapper {
    width: 100%;
    max-width: 460px;
  }

  .login-card {
    background: #ffffff;

    border-radius: 28px;

    padding: 42px 38px;

    box-shadow:
      0 25px 70px rgba(23, 78, 48, 0.14),
      0 4px 15px rgba(23, 78, 48, 0.06);

    border: 1px solid rgba(37, 99, 166, 0.08);
  }

  .logo-container {
    text-align: center;
    margin-bottom: 28px;
  }

  .logo {
    width: 190px;
    max-width: 80%;
    height: auto;
    object-fit: contain;
  }

  .login-heading {
    text-align: center;
    margin-bottom: 30px;
  }

  .login-heading h1 {
    margin: 0 0 9px;

    font-size: 27px;
    font-weight: 800;

    color: #17302a;
  }

  .login-heading p {
    margin: 0;

    color: #66766f;

    font-size: 14px;
    line-height: 1.6;
  }

  .field {
    margin-bottom: 19px;
  }

  .field label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 700;

    color: #29453b;
  }

  .input-wrapper {
    position: relative;
  }

  .input-wrapper input {
    width: 100%;

    padding: 14px 46px 14px 15px;

    border: 1px solid #d6e4dc;
    border-radius: 13px;

    outline: none;

    font-size: 15px;
    color: #17302a;

    background: #fbfdfc;

    transition:
      border-color 0.2s,
      box-shadow 0.2s,
      background 0.2s;
  }

  .input-wrapper input:focus {
    border-color: #2563A6;

    background: #ffffff;

    box-shadow:
      0 0 0 4px rgba(37, 99, 166, 0.10);
  }

  .input-wrapper input::placeholder {
    color: #9aa8a2;
  }

  .password-toggle {
    position: absolute;

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    border: 0;

    background: transparent;

    color: #71827a;

    cursor: pointer;

    font-size: 13px;
    font-weight: 700;

    padding: 6px;
  }

  .password-toggle:hover {
    color: #2563A6;
  }

  .login-button {
    width: 100%;

    border: 0;

    border-radius: 999px;

    padding: 15px 20px;

    background:
      linear-gradient(
        135deg,
        #2563A6,
        #2563A6
      );

    color: white;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition:
      transform 0.2s,
      box-shadow 0.2s,
      opacity 0.2s;

    box-shadow:
      0 10px 25px rgba(37, 99, 166, 0.22);
  }

  .login-button:hover {
    transform: translateY(-1px);

    box-shadow:
      0 14px 30px rgba(37, 99, 166, 0.28);
  }

  .login-button:disabled {
    cursor: not-allowed;

    opacity: 0.65;

    transform: none;
  }

  .error-message {
    display: none;

    margin-bottom: 18px;

    padding: 12px 14px;

    border-radius: 12px;

    background: #fff1ef;

    border: 1px solid #ffd4ce;

    color: #a33120;

    font-size: 13px;

    line-height: 1.5;
  }

  .error-message.show {
    display: block;
  }

  .success-message {
    display: none;

    margin-bottom: 18px;

    padding: 12px 14px;

    border-radius: 12px;

    background: #edf9f1;

    border: 1px solid #ccebd7;

    color: #176b3d;

    font-size: 13px;
  }

  .success-message.show {
    display: block;
  }

  .security-note {
    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #edf2ef;

    text-align: center;

    color: #7a8882;

    font-size: 12px;

    line-height: 1.6;
  }

  .security-icon {
    display: inline-flex;

    width: 28px;
    height: 28px;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf8f1;

    color: #2563A6;

    margin-bottom: 7px;

    font-size: 14px;
  }

  .back-link {
    display: block;

    margin-top: 20px;

    text-align: center;

    color: #2563A6;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
  }

  .back-link:hover {
    text-decoration: underline;
  }

  .loading-text {
    display: none;
  }

  .login-button.loading .button-text {
    display: none;
  }

  .login-button.loading .loading-text {
    display: inline;
  }

  @media (max-width: 520px) {

    body.login-page {
      padding: 16px;
    }

    .login-card {
      padding: 32px 24px;

      border-radius: 22px;
    }

    .login-heading h1 {
      font-size: 24px;
    }

    .logo {
      width: 165px;
    }
  }

  :root {
    --g: #2563A6;
    --g2: #2563A6;
    --o: #2563A6;
  
    --ink: #17302A;
    --muted: #65736D;
    --bg: #F6FAF8;
    --white: #fff;
    --line: #E2EBE6;
    --shadow: 0 18px 55px rgba(37, 99, 166, .1);
  }
  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
  }

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

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  .wrap {
    width: min(1160px, 92%);
    margin: auto;
  }
  header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  
    min-height: 82px;
    display: flex;
    align-items: center;
  }

  .nav {
    height: 80px;
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .logo {
    width: 190px;
    height: 90px;
    object-fit: contain;
    object-position: left center;
    display: block;
  }

  .links {
    margin-left: auto;
    display: flex;
    gap: 22px;
    align-items: center;
    font-size: 14px;
    font-weight: 750;
  }

  .links a:hover {
    color: var(--g);
  }

  .menu {
    display: none;
    margin-left: -25px;
    color: #2563A6;
  background: transparent;
  border: none;
  font-size: 32px;
  font-weight: 700;
  cursor: pointer;
  }

  .btn {
    border: 0;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .primary {
    background: var(--g);
    color: #fff;
  }

  .orange {
    background: var(--o);
    color: #fff;
  }

  .outline {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--g2);
  }

  .hero {
    padding: 86px 0 72px;
    background:
      radial-gradient(
        circle at 85% 20%,
        rgba(37, 99, 166, .18),
        transparent 30%
      ),
      linear-gradient(135deg, #edf8f1, #fff);
  }

  .heroGrid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    align-items: center;
  }

  .eyebrow {
    color: var(--g);
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12px;
  }

  .hero h1 {
    font-size: clamp(42px, 6vw, 70px);
    line-height: 1.03;
    margin: 14px 0;
  }

  .hero h1 span {
    color: var(--g);
  }

  .hero p {
    font-size: 18px;
    color: var(--muted);
    max-width: 620px;
  }

  .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
  }
  .heroImage {
    min-height: 430px;
    border-radius: 36px;
    background:
      linear-gradient(
        135deg,
        rgba(37, 99, 166, .8),
        rgba(37, 99, 166, .82)
      ),
      url('https://images.unsplash.com/photo-1497486751825-1233686d5d80?auto=format&fit=crop&w=1000&q=80')
      center/cover;
    box-shadow: var(--shadow);
    position: relative;
  }

  .heroCard {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    background: rgba(255, 255, 255, .94);
    padding: 18px;
    border-radius: 20px;
  }

  .heroCard b {
    font-size: 27px;
    color: var(--g2);
  }

  section {
    padding: 82px 0;
  }

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

  .head h2 {
    font-size: 38px;
    line-height: 1.1;
    margin: 6px 0;
  }

  .head p {
    color: var(--muted);
    max-width: 650px;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: -38px;
    position: relative;
  }

  .stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
  }

  .stat b {
    display: block;
    font-size: 34px;
    color: var(--g2);
  }

  .stat span {
    color: var(--muted);
    font-size: 13px;
  }

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

  .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px;
  }

  .card h3 {
    margin: 10px 0 6px;
  }

  .card p {
    color: var(--muted);
  }

  .icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #eaf7ef;
    color: var(--g);
    display: grid;
    place-items: center;
    font-size: 22px;
  }

  .tools {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  .tools input,
  .tools select,
  .form input,
  .form select,
  .form textarea {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    outline: none;
    width: 100%;
  }

  .tools input {
    min-width: 240px;
    width: auto;
  }

  .tools select {
    width: auto;
  }

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

  .project {
    overflow: hidden;
    padding: 0;
  }

  .project img {
    width: 100%;
    height: 205px;
    object-fit: cover;
    background: #eaf1ed;
  }

  .projectBody {
    padding: 21px;
  }

  .pill {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf8f1;
    color: var(--g2);
    font-size: 11px;
    font-weight: 800;
  }

  .progress {
    height: 8px;
    background: #e9efec;
    border-radius: 99px;
    overflow: hidden;
  }

  .progress i {
    display: block;
    height: 100%;
    background: var(--g);
    border-radius: 99px;
  }

  .empty {
    padding: 55px 20px;
    text-align: center;
    border: 1px dashed #cbd9d2;
    border-radius: 22px;
    color: var(--muted);
    grid-column: 1/-1;
  }

  .impact {
    background: #2563A6;
    color: #fff;
  }

  .impact .head p {
    color: #d9eee3;
  }

  .impactGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .impactBox {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 28px;
    border-radius: 22px;
  }

  .contactGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .form {
    display: grid;
    gap: 12px;
  }

  .form textarea {
    min-height: 130px;
  }

  .formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  footer {
    background: #092f20;
    color: #d7ebe1;
    padding: 55px 0 25px;
  }

  .footerGrid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 35px;
  }

  .footerGrid h3 {
    color: #fff;
  }

  .muted {
    color: #9fc0b1;
  }

  /* MODAL */

  .modal {
    position: fixed;
    inset: 0;
    background: rgba(4, 25, 17, .65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
  }

  .modal.show {
    display: flex;
  }

  .modalBox {
    width: min(980px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 25px;
    padding: 28px;
    position: relative;
  }

  .close {
    position: absolute;
    right: 18px;
    top: 15px;
    border: 0;
    background: #edf3ef;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 20px;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    transition: transform .2s ease;
  }

  .gallery img:hover {
    transform: scale(1.02);
  }

  .detailGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
  }

  .detailItem {
    background: #f6faf8;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
  }

  .detailItem small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .detailItem strong {
    display: block;
    color: var(--ink);
  }

  .detailSection {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }

  .detailSection h3 {
    margin-top: 0;
  }

  .locationBox {
    background: #edf8f1;
    border-radius: 16px;
    padding: 18px;
  }

  /* ADMIN STYLES KEPT */

  .admin {
    min-height: 100vh;
    background: #f4f8f5;
  }

  .adminNav {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 15px 0;
  }

  .adminGrid {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: calc(100vh - 75px);
  }

  .side {
    background: #2563A6;
    color: #dff3e8;
    padding: 22px;
  }

  .side button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
  }

  .side button:hover,
  .side button.active {
    background: rgba(255, 255, 255, .1);
  }

  .main {
    padding: 30px;
  }

  .panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
  }

  .formGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .field label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 5px;
  }

  .full {
    grid-column: 1/-1;
  }

  .adminTable {
    width: 100%;
    border-collapse: collapse;
  }

  .adminTable th,
  .adminTable td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 13px;
  }

  .status {
    font-size: 11px;
    font-weight: 900;
  }

  .imgPreview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  .imgPreview img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
  }

  .login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #edf8f1, #fff);
  }

  .loginBox {
    width: min(430px, 92%);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: 25px;
    padding: 32px;
  }

  .error {
    background: #fff0ee;
    color: #a33120;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
  }

  .success {
    background: #edf8f1;
    color: #0b6738;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
  }

  .hidden {
    display: none !important;
  }

  @media(max-width:900px) {

    .links {
      display: none;
    }

    .menu {
      display: block;
    }

    .heroGrid,
    .impactGrid,
    .contactGrid {
      grid-template-columns: 1fr;
    }

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

    .cards,
    .projects {
      grid-template-columns: 1fr 1fr;
    }

    .adminGrid {
      grid-template-columns: 1fr;
    }

    .side {
      display: flex;
      gap: 6px;
      overflow: auto;
    }

    .side button {
      white-space: nowrap;
    }

    .formGrid {
      grid-template-columns: 1fr;
    }
  }

  @media(max-width:600px) {

    .hero {
      padding-top: 55px;
    }

    .heroImage {
      min-height: 320px;
    }

    .stats,
    .cards,
    .projects {
      grid-template-columns: 1fr;
    }

    .head {
      align-items: start;
      flex-direction: column;
    }

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

    .detailGrid {
      grid-template-columns: 1fr;
    }

    .footerGrid {
      grid-template-columns: 1fr;
    }

    .formRow {
      grid-template-columns: 1fr;
    }

    .main {
      padding: 18px;
    }

    .logo {
      height: 60px;
    }

    .modalBox {
      padding: 20px;
    }
  }

/* Converted inline styles */
.impact-eyebrow {
color: #ebedf0;
}

.footer-bottom {
margin-top: 35px;
border-top: 1px solid rgba(255,255,255,.12);
padding-top: 18px;
}

.image-viewer-close {
position: absolute;
top: 20px;
right: 20px;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 24px;
background: #fff;
}

.image-viewer-image {
max-width: 95%;
max-height: 90%;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* Desktop / laptop navigation */
.links {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  
  .menu {
    display: none;
  }
  
  /* Mobile navigation */
  @media (max-width: 768px) {
    .links {
      display: none;
    }
  
    .menu {
      display: block;
    }
  }

  @media (max-width: 768px) {
    header {
      min-height: 80px;
    }
  
    .logo {
      width: 150px;
      height: 80px;
    }
  }
  #about .eyebrow {
    color: #2563A6;
  }
  
  #about h2 {
    color: #2563A6;
  }
  
  #about .card h3 {
    color: #2563A6;
  }
  
  #projects .eyebrow {
    color: #2563A6;
  }
  
  #projects h2 {
    color: #2563A6;
  }

  /* Get Involved - selected green styling */
#involve .eyebrow {
    color: #2563A6 !important;
  }
  
  #involve .btn.primary {
    background: #2563A6 !important;
    border-color: #2563A6 !important;
    color: #ffffff !important;
  }
  
  #involve .btn.orange {
    background: #2563A6 !important;
    border-color: #2563A6 !important;
    color: #ffffff !important;
  }

  footer {
    background: #2563A6;
    color: #fff;
    padding: 55px 0 25px;
  }
  
  .footerGrid h3 {
    color: #fff;
  }
  
  .muted {
    color: #61a2ec;
  }

  .footer-bottom {
    margin-top: 35px;
    border-top: 1px solid rgba(255,255,255,.25);
    padding-top: 18px;
  }

  .hero-project-info {
    color: #344A43;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  
  .brand-name {
    color: #F39A22;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }
  
  .brand .logo {
    width: 150px;
    height: 80px;
    object-fit: contain;
    display: block;
  }

  .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    transform: translateX(-52px);
  }
  
  .brand-tagline {
    color: #138a4b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 3px;
    line-height: 1;
  }
  
  /* Laptop / smaller desktop */
  @media (max-width: 1000px) {
    .brand {
      gap: 0;
      
    }
  
    .brand .logo {
      width: 125px;
      height: 60px;
    }
  
    .brand-name {
      font-size: 17px;
    }
  
    .brand-tagline {
      font-size: 10px;
    }
  }
  
  /* Mobile */
  @media (max-width: 768px) {
    .brand {
      gap: 18px;
    }
  
    .brand .logo {
      width: 90px;
      height: 77px;
      transform: translateX(-30px);
    }
  
    .brand-name {
      font-size: 20px;
      white-space: nowrap;
    }
  
    .brand-tagline {
      font-size: 8px;
      letter-spacing: 0.7px;
      margin-top: 2px;
    }
  }