:root{
      --ink:#0f1a2a;
      --muted:#5b6675;
      --bg:#f7f8fb;
      --card:#ffffff;
      --accent:#c04c00; /* climate orange */
      --accent-2:#0f5e9c;
      --soft:#f9ebe5;
      --soft-2:#f7f2e8;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{font-family:'Titillium Web', sans-serif; color:var(--ink); background:var(--bg); line-height:1.6}

    .hero-header {
        position: relative;
        height: 400px;
        background: url('../images/projects/') center top 25% / cover no-repeat;
        display: flex;
        align-items: flex-end;
    }

    .hero-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%; /* make it cover the entire container */
        padding: 2rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 80%);
        box-sizing: border-box;
        display: flex;
        align-items: flex-end; /* keeps text at the bottom */
    }

    .hero-texts {
        color: #fff;
        text-align: left;
        max-width: 1000px;
        margin: 0 auto;
    }

    .hero-texts .eyebrow {
        font-size: 1rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        letter-spacing: 1px;
        color: #ccc;
    }

    .hero-texts h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .hero-texts p {
        font-size: 1.1rem;
        color: #f1f1f1;
        /* line-height: 1.5; */
    }

    @media (max-width: 768px) {
        .hero-header {
            min-height: 250px;
            padding: 1.5rem;
        }

        .hero-texts h1 {
            font-size: 2rem;
        }

        .hero-texts p {
            font-size: 1rem;
        }
    }

    @media (max-width: 480px) {
        .hero-header {
            min-height: auto;
            padding: 1rem;
        }

        .hero-texts h1 {
            font-size: 1.5rem;
        }

        .hero-texts p {
            font-size: 0.9rem;
        }
    }

    .container{max-width:1160px; margin:0 auto; padding:0 20px}
    .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px}
    .section-head h2{margin:0; font-size:1.6rem; color:var(--ink)}
    .section-sub{color:var(--muted); font-size:.98rem}
    .context{display:grid; grid-template-columns:2fr 1fr; gap:18px}
    .context .card{background:var(--card); font-size:1rem; border:1px solid #edf0f6; border-radius:12px; padding:20px; box-shadow:0 8px 24px rgba(15,23,42,.04)}
    .context ul{margin:10px 0 0 18px}
    .stat-pill{background:var(--soft); color:var(--accent); border:1px solid #ecd8c2; border-radius:10px; padding:10px 12px; font-weight:700; display:inline-block; margin:0 10px 10px 0}
    .note{color:var(--muted); font-size:1rem}

    .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .pillar{background:var(--card); border:1px solid #edf0f6; border-radius:12px; padding:18px}
    .pillar h3{margin:.2rem 0 .4rem; font-size:1.05rem; color:var(--accent)}
    .pillar p{margin:0; color:#3d4857; font-size:.98rem}

    .projects{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    .project{background:var(--card); border:1px solid #edf0f6; border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
    .project img{width:100%; height:160px; object-fit:cover}
    .project-body{padding:16px}
    .proj-title{font-weight:700; margin:0 0 6px; color:var(--ink)}
    .pir{display:grid; gap:8px; margin-top:8px}
    .pir div{background:#f7faf9; border:1px solid #e4eeea; border-radius:8px; padding:10px}
    .pir strong{color:var(--accent)}
    .proj-links a{color:var(--accent-2); text-decoration:none; font-weight:600; font-size:.95rem}
    .proj-links a:hover{text-decoration:underline}

    .ba {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #edf0f6;
      background: #000;
    }
    .ba img {
      display: block;
      width: 100%;
      height: 360px;
      object-fit: cover;
    }
    .ba .after {
      position: absolute;
      inset: 0;
      clip-path: inset(0 50% 0 0);
      transition: clip-path 0.2s ease;
      z-index: 1;
    }
    .ba .handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 3px;
      background: linear-gradient(180deg, transparent, #fff, transparent);
      transform: translateX(-50%);
      z-index: 2;
    }
    .ba input[type=range] {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 12px;
      width: calc(100% - 24px);
      margin: 0 12px;
      appearance: none;
      height: 4px;
      background: rgba(255, 255, 255, 0.55);
      border-radius: 999px;
      z-index: 3;
    }
    .ba input[type=range]::-webkit-slider-thumb {
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid rgba(0, 0, 0, 0.25);
    }
    .ba-label {
      position: absolute;
      top: 12px;
      padding: 4px 8px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      font-size: 0.92rem;
      border-radius: 4px;
      z-index: 2;
      pointer-events: none;
    }
    .before-label {
      left: 12px;
    }
    .after-label {
      right: 12px;
    }
    .ba-label.hidden {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .impact{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    .impact .kpi{background:linear-gradient(180deg,#fff,#f7f8fb); border:1px solid #e6efe9; border-radius:12px; padding:18px; text-align:center}
    .impact .num{font-size:1.8rem; font-weight:800; color:var(--accent)}
    .impact .lbl{color:var(--muted); font-size:.92rem}

    .voices{display:grid; grid-template-columns:2fr 1fr; gap:16px}
    .quote{background:var(--card); border:1px solid #edf0f6; border-radius:12px; padding:18px}
    .quote blockquote{margin:0; font-size:1.05rem; color:#2b3947}
    .quote cite{display:block; margin-top:8px; color:var(--muted); font-style:normal}
    .mini-map{background:linear-gradient(180deg, var(--soft-2), #f3f7fd); border:1px solid #dfe9f6; border-radius:12px; padding:18px; display:flex; align-items:center; justify-content:center; color:#466c9b; height:100%}

    .resources{display:grid; grid-template-columns:2fr 1fr; gap:16px}
    .doc-list{background:var(--card); border:1px solid #edf0f6; border-radius:12px; padding:18px}
    .doc-list ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
    .doc-list a{color:var(--accent-2); text-decoration:none; font-weight:600}
    .doc-list a:hover{text-decoration:underline}
    .cta{background:linear-gradient(90deg, #fff6ee, #f7f2e8); border:1px solid #e8dac4; border-radius:12px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
    .btn{display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:10px; border:1px solid #d9b18c; background:var(--accent); color:#fff; font-weight:700; text-decoration:none}
    .btn.secondary{background:#fff; color:var(--accent-2); border-color:#dcd2cc}

    .card{background:var(--card); border:1px solid #edf0f6; border-radius:12px; padding:18px}
    .muted{color:var(--muted)}

    .btn {
      display: inline-block;
      padding: 10px 20px;
      border-radius: 4px;
      background-color: #c04c00;
      color: white;
      text-decoration: none;
      font-weight: 600;
      transition: background-color 0.3s ease;
    }

    /* .btn:hover {
      background-color: #004d40;
    } */

    .btn-outline {
      background-color: transparent;
      color: #c04c00;
      border: 2px solid #c04c00;
    }

    .btn-outline:hover {
      background-color: #c04c00;
      color: white;
    }

    @media (max-width: 980px){
      .context{grid-template-columns:1fr}
      .pillars{grid-template-columns:1fr}
      .projects{grid-template-columns:1fr}
      .impact{grid-template-columns:repeat(2,1fr)}
      .voices{grid-template-columns:1fr}
      .resources{grid-template-columns:1fr}
      .ba img{height:300px}
    }