:root{
  --wrap: 1400px;
  --standard-font: 16px;
  --standard-lh: 1.8;
  --title-font: "Roboto Serif", ui-serif, Georgia, serif;
  --text: #111827;
  --muted: rgba(255,255,255,.88);

  --brand: #f08a2a;
  --brand-dark: #e97912;

  --ease: cubic-bezier(.2,.8,.2,1);

  --header-h: 86px;      /* actual fixed bar height */
  --curve-h: 92px;       /* visual curve height */
  --curve-overlap: 58px; /* how much curve sits on hero */
  --nlm-ar-h: 240;
  --nlm-gap: 22px;
  --nlm-col2: 0.545;          /* right column = 0.545 of left */
  --nlm-ar-w: 336;            /* card aspect-ratio width */
  --nlm-ar-h: 240;            /* card aspect-ratio height (tweak if needed) */
}

*{ box-sizing:border-box; }
body{ margin:0; font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial;}

.hero__title,
.hero__solid,
.hero__stroke{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 600;
}

/* shared container */
.wrap{
  width:min(var(--wrap), calc(100% - 64px));
  margin-inline:auto;
}

/* ---------------- HEADER (white + wave) ---------------- */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background:#fff;
  padding: 10px 0 90px;
  background: url(../images/header-curve.png) no-repeat bottom left;
  background-size:cover;
}

.topbar{
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .25s var(--ease);
}
.topbar.is-scrolled{
  /*box-shadow: 0 18px 60px rgba(2,8,23,.10);*/
}

.topbar__row{
  display:flex;
  align-items:center;
  gap: 28px;
}

.logo{ display:inline-flex; align-items:center; }

.topnav{
  flex: 1;
  display:flex;
  justify-content:right;
  gap: 44px;
  position: relative;
  top: -14px;
}

.topnav__link{
  position:relative;
  text-decoration:none;
  color: rgba(17,24,39,.80);
  font-size: 16px;
  font-weight: 500;
  padding: 0 2px;
  transition: color .25s var(--ease);
}

.topnav__link:hover{ color: rgba(17,24,39,.95); }

.topnav__link.is-active{
  color: var(--brand);
}
.topnav__link.is-active::after{
  /*content:"";
  position:absolute;
  left: 0;
  right: 0;
  height: 3px;
  bottom: -8px;
  background: var(--brand);
  border-radius: 99px;*/
}

.cta{
  text-decoration:none;
  color:#fff;
  font-weight: 600;
  font-size: 18px;
  padding: 16px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  box-shadow: 0 18px 50px rgba(240,138,42,.35);
  transform: translateZ(0);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(240,138,42,.40);
  filter: saturate(1.05);
}
.cta:active{ transform: translateY(0); }

.topbar__wave{
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  width:100%;
  height: 120px;
  display:block;
  pointer-events:none;
}

/* ---------------- HERO (image + centered text) ---------------- */
.hero{
  position: relative;
  z-index: 10;
  height: 100vh;
  overflow: hidden;
  background:#0b1220;
  top: 0;
}

/* The image is a layer we move */
.hero__img{
  position:absolute;
  inset: -60px 0;      /* extra top/bottom so it doesn't reveal gaps */
  width:100%;
  height: calc(100% + 120px);
  object-fit: cover;
  transform: translate3d(0,0,0) scale(1.02);
  will-change: transform;
}

.hero__shade{
  position:absolute;
  inset:0;
  /* design has a subtle dark/blue shade for readability */
  background:
    radial-gradient(900px 520px at 50% 55%, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

.hero__center{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top: 70px; /* pushes content a bit down like the pdf */
}

.hero__kicker{
  margin:0 0 18px;
  color: rgba(255,255,255,.80);
  font-size: 16px;
  letter-spacing: .10em;
  text-transform:none;
  font-weight: 600;
}

.hero__title{
  margin:0 0 18px;
  line-height: .95;
  display:flex;
  gap: 24px;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
}

.hero__solid{
  font-size: 96px;
  font-weight: 600;
  color:#fff;
}

.hero__stroke{
  font-size: 96px;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255,255,255,.92);
  text-stroke: 2.5px rgba(255,255,255,.92);
}

.hero__rotate .hero__word{
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255,255,255,.92);
  text-stroke: 2.5px rgba(255,255,255,.92);
}

.hero__desc{
  margin: 10px 0 0;
  max-width: 680px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.6;
}

/* ---------------- REVEAL (fade in) ---------------- */
[data-reveal]{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in{
  opacity:1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* responsive */
@media (max-width: 1100px){
  .topnav{ gap: 24px; }
  .topnav__link{ font-size: 16px; }
  .cta{ font-size: 16px; padding: 14px 20px; }
  .hero__solid,.hero__stroke{ font-size: 40px; }
  .hero__desc{ font-size: 16px; }
}

/* Hamburger button (hidden on desktop) */
.topbar__toggle{
  display:none;
  appearance:none;
  border:1px solid rgba(17,24,39,.12);
  background: rgb(15 188 201);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}

.topbar__burger{
  width: 18px;
  height: 2px;
  background: #fff;
  display:block;
  position: relative;
  border-radius: 2px;
}
.topbar__burger::before,
.topbar__burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.topbar__burger::before{ top: -6px; }
.topbar__burger::after{ top: 6px; }

/* responsive */
@media (max-width: 860px){
  .topbar__row{
    justify-content: space-between;
    gap: 12px;
  }

  .topbar__toggle{
    display: inline-grid;
    place-items: center;
    position: relative;
    top: 0;
  }

  /* Turn your existing .topnav into a dropdown panel */
  .topnav{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(var(--header-h) - 4px);

    gap: 10px;
    padding: 16px 18px 18px;

    background: #fff;
    border: 1px solid rgba(16,17,20,.10);
    box-shadow: 0 26px 70px rgba(2,8,23,.14);
    border-radius: 18px;

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;

    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }

  .topbar.is-menu-open .topnav{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .topnav__link{
    width: 100%;
    padding: 10px 2px;
    font-size: 16px;
  }

  /* if your CTA is inside the nav, make it full-width */
  .topnav .cta{
    width: 100%;
    text-align: center;
    margin-top: 6px;
  }

  .hero{ height: 560px; }

  .topbar{background: #fff; padding-bottom: 10px;}
}


.hero__title{
  display: flex;
  justify-content: center;   /* centers Child + word as one unit */
  align-items: baseline;     /* keeps baseline stable */
  gap: .22em;                /* space between Child and rotating word */
}


/* Rotating stroke word — no clipping + baseline stable */
.hero__rotate{
  display: inline-grid;
  grid-template-areas: "stack";
  align-items: baseline;
  justify-items: start;

  overflow: clip;            /* cleaner than hidden */
  line-height: 1.05;
  padding: 0 .18em .22em .12em;  /* room for stroke + descenders */

  transition: width .65s var(--ease);
  will-change: width;
}

.hero__word{
  grid-area: stack;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(90%) rotateX(-25deg);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  will-change: transform, opacity;
}

.hero__word.is-active{
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

.hero__word.is-out{
  opacity: 0;
  transform: translateY(-90%) rotateX(25deg);
}

/* stroke */
.hero__rotate .hero__word{
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255,255,255,.92);
}


/* ===========================
   Section 2: Driven by Compassion
=========================== */

.compassion{
  position: relative;
  background: url(../images/leher-wave-bg.png) no-repeat 0 -10px #ffffff;
  color: #e9eef5;
  padding: 120px 0 120px;
  overflow: hidden;
  background-size: 100%;
}

.compassion__grid{
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 90px;
  align-items: center;
}

/* ---- Collage ---- */
.collage{
  position: relative;
  min-height: 420px;
}

.collage__card{
  position: absolute;
  display:block;
  border-radius: 0;              /* design has sharp corners */
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0,0,0,.40);
  transform: translateZ(0);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
  will-change: transform;
}
.collage__card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .7s var(--ease);
}

.collage__card:hover{
  transform: translateY(-6px);
  box-shadow: 0 32px 90px rgba(0,0,0,.55);
  filter: saturate(1.05) contrast(1.03);
}
.collage__card:hover img{
  transform: scale(1.07);
}

/* positions match your screenshot layout */
.collage__card--a{ left: 0;   top: 0;   width: 360px; height: 190px; }
.collage__card--b{ left: 385px; top: 0; width: 180px; height: 240px; }
.collage__card--c{ left: 35px; top: 215px; width: 380px; height: 230px; }

/* center logo circle */
.collage__logo{
  position:absolute;
  left: 310px;
  top: 155px;
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.collage__logo img{
  width: 86px;
  height: auto;
  opacity: .9;
}

/* ---- Content ---- */
.compassion__eyebrow{
  margin: 0 0 5px;
  color: var(--brand);
  font-size: 16px;
  font-weight: 400;
}

.compassion_h2{
  color: #333333;
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 50px;
  margin: 0.5em 0;
}

.compassion__para{
  margin: 0 0 24px;
  color: #333333;
  line-height: 1.75;
  font-size: 16px;
  max-width: 720px;
}

.compassion__bullets{
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr; 
}

.compassion__bullets li{
  position: relative;
  padding-left: 22px;
  padding-right: 30px;
  color: #333333;
  font-weight: 400;
}

.compassion__bullets li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(240,138,42,.10);
}

.btn2{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content:center;
  height: 52px;
  padding: 0 42px;
  border-radius: 30px 0px 30px 0px;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 18px 55px rgba(240,138,42,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  transform: translateZ(0);
}
.btn2:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(240,138,42,.36);
  filter: saturate(1.06);
}
.btn2:active{ transform: translateY(0); }

.btn2__glow{
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: radial-gradient(220px 60px at 50% 50%, rgba(255,255,255,.22), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events:none;
}
.btn2:hover .btn2__glow{ opacity: 1; }

/* responsive */
@media (max-width: 1200px){
  .compassion__grid{ grid-template-columns: 1fr; gap: 0; }
  .collage{ max-width: 620px; }
  .compassion__loops{ left: 10%; width: 110%; }
}

@media (max-width: 600px){
  .collage{ min-height: 520px; }
  .collage__card--a{ width: 86%; height: 170px; }
  .collage__card--b{ left: 60%; width: 38%; height: 200px; }
  .collage__card--c{ width: 92%; left: 4%; }
  .collage__logo{ left: 45%; transform: translateX(-50%); }
}

/* ===========================
   Key Publications & Toolkit
=========================== */

.kp{
  background: url(../images/resource-bg.png) no-repeat 0 -80% #fff;
  padding: 92px 0 60px;
  background-size: 100%;
}

.kp__wrap{
  width:min(var(--wrap), calc(100% - 64px));
  margin-inline:auto;
}

/* heading row */
.kp__head{
  display:flex;
  align-items:flex-end;
  gap: 26px;
  margin-bottom: 111px;
}

.kp__title{
  position: relative;
  margin: 0;
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  color:#101114;
}

.kp__title img{
  position: absolute; left: 0; bottom: -20px;
}

.arrowDown{
  width: 32px;
}

/* orange underline */
.kp__underline{
  position:absolute;
  left: 0;
  bottom: -10px;
  width: 155px;
  height: 4px;
  background: var(--brand);
  border-radius: 99px;
}

/* blue arrow */
.kp__arrow{
  width: 22px;
  height: 22px;
  border-right: 4px solid #1a73ff;
  border-bottom: 4px solid #1a73ff;
  transform: translateY(-6px) rotate(45deg);
}

/* main two-column layout */
.kp__grid{
  display:grid;
  grid-template-columns: 1.75fr 0.8fr;
  gap: 70px;
  align-items:start;
}

/* left is a 2x2 grid */
.kp__left{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 86px;
  row-gap: 72px;
  margin-top: 5em;
}

/* each mini item is image + text */
.kpitem{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items:start;
}

.kpitem__img{
  width: 120px;
  height: 155px;
  object-fit: cover;
  display:block;
  box-shadow: 0 20px 55px rgba(0,0,0,.16);
  border-radius: 2px;
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.kpitem:hover .kpitem__img{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}

.kpitem__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(16,17,20,.78);
  max-width: 260px; /* keeps the paragraph narrow like the design */
}

.kpitem__text a{
  color: #fff;
  text-decoration: none;
}

/* right big cover */
.kp__right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 16px;
  position: relative; top: -120px;
}

.kp__big{
  width: 420px;
  max-width: 100%;
  height: auto;
  display:block;
  box-shadow: 0 28px 90px rgba(0,0,0,.18);
  border-radius: 2px;
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.kp__right:hover .kp__big{
  transform: translateY(-6px);
  box-shadow: 0 34px 105px rgba(0,0,0,.24);
}

.kp__caption{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(16,17,20,.85);
  max-width: 420px;
}

.kp__caption a{
  text-decoration: none; color: #fff;
}

/* responsive */
@media (max-width: 1200px){
  .kp__grid{ grid-template-columns: 1fr; }
  .kp__big{ width: min(520px, 100%); }
}

@media (max-width: 820px){
  .kp{ padding: 70px 0 90px; }
  .kp__title{ font-size: 32px; }
  .kp__left{ grid-template-columns: 1fr; }
  .kpitem{ grid-template-columns: 110px 1fr; }
  .kpitem__img{ width: 110px; height: 145px; }
}

/* ===========================
   Campaign & Blogs
=========================== */

.cb{
  background:#fff;
  padding: 86px 0 60px;
}

.cb__wrap{
  width:min(var(--wrap), calc(100% - 64px));
  margin-inline:auto;
}

.cb__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 22px;
}

/* reuse kp__head layout but tighten spacing for this section */
.cb__headLeft{
  margin: 0;              /* kp__head has large bottom margin, override */
  align-items: flex-end;
  gap: 22px;
}

/* View all button (reuse .btn2, just size tweaks) */
.cb__viewall{
  height: 46px;
  padding: 0 34px;
  font-size: 15px;
  box-shadow: 0 16px 44px rgba(240,138,42,.22);
}

.cb__rule{
  border: 0;
  height: 1px;
  background: rgba(16,17,20,.14);
  margin: 18px 0 52px;
}

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

/* Card */
.cbcard{
  background:#fff;
  border: 1px solid rgba(16,17,20,.10);
  box-shadow: 0 10px 30px rgba(2,8,23,.06);
}

.cbcard__media{
  display:block;
  height: 260px;
  overflow:hidden;
}

.cbcard__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  transition: transform .55s var(--ease);
}

.cbcard:hover .cbcard__media img{
  transform: scale(1.06);
}

.cbcard__body{
  padding: 22px 22px 18px;
}

.cbcard__title{
  margin: 0 0 14px;
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color:#101114;
  max-width: 90%;
}

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

.cbcard__text{
  margin: 0 0 26px;
  color: rgba(16,17,20,.72);
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 92%;
}

.cbcard__more{
  display:inline-block;
  text-decoration:none;
  color:#101114;
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 8px;
  position: relative;
}

.cbcard__more::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 72px;
  height: 3px;
  background: var(--brand);
  border-radius: 99px;
}

.cbcard__more:hover{
  color: rgba(16,17,20,.85);
}

/* responsive */
@media (max-width: 1100px){
  .cb__grid{ grid-template-columns: 1fr; }
  .cbcard__media{ height: 240px; }
}

@media (max-width: 600px){
  .cb__head{ flex-direction: column; align-items:flex-start; }
}

/* ===========================
   Impact + Video section
=========================== */

section.impact{
  background:#fff;
  padding: 90px 0 150px !important;
  overflow:hidden;
  background: url(../images/video-bg.png) no-repeat left top;
  background-size: 100%;
}

section.impact .impact__wrap{
  position: relative;
  width:min(var(--wrap), calc(100% - 64px));
  margin-inline:auto;
}

/* orange wave shape */
section.impact .impact__wave{

}

/* layout */
section.impact .impact__grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items:center;
}

/* left content */
section.impact .impact__left{
  color:#fff;
  padding: 110px 10px 38px 8px; /* little breathing space */
}

section.impact .impact__kicker{
  margin: 0 0 10px;
  font-size: 18px;
}

section.impact .impact__title{
  margin: 0 0 14px;
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  color: #333;
}
section.impact .impact__title span{
  font-family: inherit;
  font-weight: 600;
}

section.impact .impact__desc{
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.7;
  max-width: 470px;
}

/* stats grid */
section.impact .impact__stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 44px;
}

section.impact .istat{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

section.impact .istat__icon{
  width: 60px;
  height: 60px;
  display:grid;
  place-items:center;
  color:#fff;
  opacity:.95;
}
section.impact .istat__icon svg{ width: 34px; height: 34px; }

section.impact .istat__num{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  color: #333;
}

section.impact .istat__label{
  font-size: 15px;
  margin-top: 3px;
}

/* video card */
section.impact .videoCard{
  width: 100%;
  margin-left: auto;
  background:#fff;
  border-radius: 0; /* design is sharp */
  overflow:hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

section.impact .videoCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 34px 105px rgba(0,0,0,.22);
}

section.impact .videoCard__frame{
  display:block;
  width:100%;
  aspect-ratio: 16/9;
  border:0;
}

/* responsive */
@media (max-width: 1100px){
  section.impact .impact__grid{ grid-template-columns: 1fr; }
  section.impact .impact__wave{
    width: 100%;
    left: 0;
    clip-path: polygon(0 8%, 100% 0, 100% 95%, 0 100%);
  }
  section.impact .impact__left{ max-width: 100%; padding: 36px 18px; }
  section.impact .videoCard{ margin: 18px auto 0; }
}

@media (max-width: 640px){
  section.impact{ padding: 70px 0 90px; }
  section.impact .impact__title{ font-size: 28px; }
  section.impact .impact__stats{ grid-template-columns: 1fr; }
}


/* ===========================
   Video Gallery (Featured + 2x2)
=========================== */

.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.vg{
  background:#fff;
  padding: 90px 0 110px;
  overflow:hidden;
}

.vg__head{
  display:flex;
  align-items:center;
  justify-content:left;
  gap: 18px;
  margin: 0 0 42px;
  position: relative;
}

.vg__underline{
  width: 180px;
  height:auto;
  transform: translateY(-2px);
  position: absolute;
  left: 0;
  bottom: -20px;
}

.vg__arrow{
  width: 34px;
  height:auto;
}

.vg__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 34px;
  align-items: stretch;
}

.vg__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 1fr); /* 🔥 equal rows */
  gap: 18px;
  height: 100%; /* 🔥 match left column height */
}


/* Card */
.vgCard{
  position:relative;
  display:block;
  border-radius: 22px;
  overflow:hidden;
  text-decoration:none;
  background:#111;
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  will-change: transform;
}

.vgCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 36px 95px rgba(0,0,0,.65);
  filter: saturate(1.05) contrast(1.03);
}

.vg__side .vgCard {
  height: 100%;
  width: 100%;
}

.vgCard__img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  transform: scale(1.40);
  transition: transform .6s var(--ease);
}

.vgCard:hover .vgCard__img{
  transform: scale(1.42);
}

/* sizing */
.vgCard--featured{
  aspect-ratio: 16 / 9;
  min-height: 420px;
}

.vg__side .vgCard{
  aspect-ratio: 16 / 10;
  min-height: 162px;
}

/* overlays */
.vgCard__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 30% 60%, rgba(0,0,0,.20), rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55));
}

.vgCard__title{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color:#fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.vg__side .vgCard__title{
  font-size: 18px;
  font-weight: 600;
  bottom: 14px;
}

/* play button */
.vgPlay{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 34px;
  transform: translate(-50%,-50%);
  background: #ff2d2d;
  border-radius: 10px;
  display:grid;
  place-items:center;
  box-shadow: 0 18px 45px rgba(255,45,45,.35);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}

.vgPlay--lg{
  width: 70px;
  height: 52px;
  border-radius: 14px;
}

.vgCard:hover .vgPlay{
  transform: translate(-50%,-50%) scale(1.06);
  filter: saturate(1.05);
}

.vgPlay__tri{
  width:0;height:0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 2px;
}

.vgPlay--lg .vgPlay__tri{
  border-left-width: 18px;
  border-top-width: 12px;
  border-bottom-width: 12px;
}

/* ===========================
   Video Modal (perf-friendly)
=========================== */
.vgModal{
  position:fixed;
  inset:0;
  z-index: 5000;
  display:grid;
  place-items:center;
  padding: 28px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.vgModal__dialog{
  width: min(1100px, 100%);
  background: #0b0f16;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 40px 140px rgba(0,0,0,.70);
  transform: translateZ(0);
}

.vgModal__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  color: rgba(255,255,255,.8);
  font-size: 14px;
}

.vgModal__close{
  appearance:none;
  border:0;
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor:pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}

.vgModal__close:hover{
  background: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.vgModal__frame{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  display:block;
}

/* responsive */
@media (max-width: 1100px){
  .vg__grid{ grid-template-columns: 1fr; }
  .vgCard--featured{ min-height: 320px; }
}

@media (max-width: 640px){
  .vg__side{ grid-template-columns: 1fr; }
  .vg__side .vgCard{ min-height: 190px; }
  .vgCard__title{ font-size: 18px; }
}

/* ===========================
   Instagram (full-width) + Donors
=========================== */

.ig{
  background:#fff;
  padding: 96px 0 60px;
}

.ig__head{
  text-align:center;
  margin: 0 auto 46px;
}

.ig__eyebrow{
  margin: 0 0 10px;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  font-weight: 700;
}

.ig__title{
  margin: 0;
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  font-size: clamp(30px, 4vw, 48px);
  overflow-wrap: break-word;
  color:#101114;
}

.ig__title em{
  font-style: italic;
  font-weight: 600;
}

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

.ig__tile{
  display:block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow:hidden;
  background:#f2f2f2;
  transition: transform .3s var(--ease);
}

.ig__tile:hover{
  transform: translateY(-4px);
}

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

.ig__cta{
  margin-top: 40px;
  text-align:center;
}

/* orange outline button */
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 52px;
  padding: 0 40px;
  border-radius: 30px 0 30px 0;
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
  text-decoration:none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}

.btn-ghost:hover{
  background: rgba(240,138,42,.08);
  transform: translateY(-2px);
}

.btn-ghost:active{ transform: translateY(0); }

/* ---- Donors band ---- */
.donors{
  position: relative;
  background: #fdf6ee; /* soft warm off-white */
  padding: 0 0 96px;
}

.donors__wave{
  line-height: 0;
  font-size: 0;
}

.donors__wave svg{
  display:block;
  width: 100%;
  height: 72px;
}

.donors__head{
  text-align:center;
  max-width: 760px;
  margin: 4px auto 54px;
}

.donors__eyebrow{
  margin: 0 0 10px;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 13px;
  font-weight: 700;
}

.donors__title{
  margin: 0;
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  font-size: 34px;
  color:#101114;
}

.donors__row{
  list-style:none;
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
  display:flex;
  align-items:center;
  gap: clamp(36px, 5vw, 84px);
}

.donors__item{
  flex: 1 1 0;
  min-width: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.donors__item img{
  display: block;
  width:auto;
  height:auto;
  max-width: 100%;
  object-fit: contain;
}

/* per-logo visual balancing (not equal widths) */
.donors__item--phf img{    max-width: 290px; max-height: 62px; }
.donors__item--unicef img{ max-width: 96px;  max-height: 96px; }
.donors__item--dasra img{  max-width: 84px;  max-height: 84px; }
.donors__item--ubs img{    max-width: 210px; max-height: 74px; }

/* responsive */
@media (max-width: 1100px){
  .ig__title{ font-size: 44px; }
  .ig__grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 820px){
  .donors__row{
    flex-wrap: wrap;
    gap: 40px clamp(32px, 8vw, 72px);
  }
  .donors__item{
    flex: 0 0 calc(50% - 36px);
  }
  .donors__item--phf img{ max-width: min(100%, 290px); }
  .donors__item--ubs img{ max-width: min(100%, 210px); }
}

@media (max-width: 640px){
  .ig{ padding: 88px 0 56px; }
  .ig__head{ margin-bottom: 34px; }
  .ig__grid{ gap: 16px; }
  .ig__cta{ margin-top: 32px; }
  .donors{ padding-bottom: 72px; }
  .donors__wave svg{ height: 52px; }
  .donors__head{ margin-bottom: 40px; }
  .donors__title{ font-size: 24px; }
  .donors__row{ gap: 52px 28px; }
  .donors__item{ flex: 0 0 calc(50% - 14px); }
  .donors__item--phf img{ max-width: calc(100% - 16px); }
  .donors__item--ubs img{ max-width: min(100%, 150px); }
}


/* =========================
   FOOTER
========================= */

.site-footer {
  background: url(../images/footer-bg.png) no-repeat bottom left #19b2d4; /* exact blue from design */
  color: #fff;
  padding: 60px 0 50px;
  position: relative;
}

.footer__grid {
  display: flex;
  justify-content: space-between;
}


/* LEFT */
.footer__logo {
  width: 120px;
  margin-bottom: 20px;
}

.footer__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.footer__text {
  font-size: 14px;
  line-height: 1.6;
  max-width: 260px;
  opacity: 0.95;
}

.footer__social {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

footer a {
  color: #fff;
  text-decoration: none;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  opacity: .85;
  transition: opacity .2s, background-color .2s;
}

.footer__social a:hover {
  opacity: 1;
  background-color: rgba(255,255,255,.15);
}

.footer__social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.footer__left {
  align-self: flex-start;
}


/* CENTER NAV */
.footer__nav {
  display: flex;
  gap: 40px;
  align-self: center;
  white-space: nowrap;
  position: absolute; right: 50px; top: 50px;
}


.footer__nav a {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
}



/* RIGHT */
.footer__subscribe {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: flex-end;  
}

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

.footer__form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.8);
  padding: 10px 4px;
  color: #fff;
  font-size: 14px;
  width: 220px;
}

.footer__form input::placeholder {
  color: rgba(255,255,255,0.9);
}

.footer__form input:focus {
  outline: none;
  border-bottom-color: #fff;
}

.footer__form button {
  background: #fff;
  color: #19b2d4;
  border: none;
  padding: 10px 22px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}


.footer__form {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__subscribe {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__subscribe input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255,255,255,0.9);
  padding: 6px 2px;
  font-size: 14px;
  color: #fff;
  width: 220px;
}

.footer__subscribe button {
  height: 40px;
  padding: 0 22px;
  background: #ffffff;
  color: #19b2d4;
  font-weight: 600;
  font-size: 14px;
  border-radius: 20px 0px 20px 0px;
}

.footer {
  min-height: 220px; /* adjust to match design */
}

/* ===========================
   INNER PAGES: Masthead (reusable)
   Usage:
   <section class="masthead"> ... </section>
=========================== */

:root{
  --radius-lg: 20px;
  --masthead-h: 70vh;
}

.masthead{
  position: relative;
  z-index: 9;
  height: var(--masthead-h);
  overflow: hidden;
  background: #0b1220;

  /* creates space so the fixed header doesn't cover the masthead */
  padding-top: var(--header-h);

  /* Rounded bottom like the design */
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* Image layer */
.masthead__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: translateZ(0) scale(1.02);
  will-change: transform;
  transition: transform .85s var(--ease);
}

/* Readability overlay (left-weighted like the PDF) */
.masthead__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.08) 100%),
    radial-gradient(900px 520px at 25% 55%, rgba(0,0,0,.28), rgba(0,0,0,.05));
}

/* Content */
.masthead__inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Title styling to match your typography scale */
.masthead__title{
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 1.4;

  /* responsive premium scale */
  font-size: clamp(30px, 3.2vw, 54px);

  /* subtle crispness like the design */
  text-shadow: 0 18px 50px rgba(0,0,0,.55);
  max-width: none;
}

/* Premium micro-interaction (safe): gentle zoom on hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  .masthead:hover .masthead__img{
    transform: translateZ(0) scale(1.045);
    transition: transform .85s var(--ease);
  }
}


/* ===========================
   ABOUT: Building Strong Local Ecosystems (reusable)
=========================== */

.ecos{
  background: #fff;
  padding: 84px 0 70px;
}

.ecos__head{
  text-align: center;
  max-width: 980px;
  margin: 0 auto 36px;
}

/* Generic collapsible */
.js-collapsible{
  overflow: clip;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .6s var(--ease), opacity .35s var(--ease), transform .45s var(--ease);
  will-change: max-height;
  display: none;
}

.js-collapsible.is-open{
  opacity: 1;
  transform: translateY(0);
  display: block;
  max-height: inherit;
}


.ecos__title{
  margin: 0;
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  color: #111;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

/* orange underline “stroke” */
.ecos__underline{
  position: absolute;
  right: 0%;
  bottom: -10%;
  width: 188px;
  height: 15px;
  background: url("../images/underline.png") no-repeat top left;
  background-size: 100%;
}

.ecos__sub{
  margin: 22px auto 0;
  color: rgba(16,17,20,.72);
  font-size: 16px;
  line-height: 1.8;
  max-width: 860px;
}
.ecos__hl{
  color: var(--brand);
  font-weight: 700;
}

/* --- Cards --- */
.ecos__cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: stretch;
  margin: 60px 0 60px;
}

.ecosCard{
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(2,8,23,.14);
  overflow: hidden;
  padding: 34px 28px 26px;
  text-align: center;
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  min-height: 320px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ecosCard__icon{
  height: 120px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.ecosCard__icon img{
  width: min(180px, 100%);
  height: auto;
  display: block;
}

.ecosCard__title{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  width: 90%;
  margin: 5px auto 12px auto;
}

.ecosCard__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  opacity: .88;
  max-width: 320px;
  margin-inline: auto;
}

.ecosCard--orange{
  background: #E6863A;
  color: #111;
}
.ecosCard--teal{
  background: #69D3E9;
  color: #111;
}
.ecosCard--blue{
  background: #0B6CA6;
  color: #fff;
}

@media (hover:hover) and (pointer:fine){
  .ecosCard:hover{
    transform: translateY(-8px);
    box-shadow: 0 34px 90px rgba(2,8,23,.18);
    filter: saturate(1.03) contrast(1.02);
  }
}

/* --- Paragraph copy --- */
.ecos__copy{
  max-width: 1020px;
  margin: 0 auto;
  color: rgba(16,17,20,.76);
  font-size: 14px;
  line-height: 1.85;
}

.ecos__copy p{
  margin: 0 0 18px;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
}

.ecos__link{
  color: #0364A1; /* design-like link blue */
  font-weight: 700;
}

.ecos__muted{
  color: rgba(16,17,20,.64);
}

/* --- Vision callout --- */
.vision{
  margin: 60px auto 0;
  max-width: 1080px;
  background: #fff;
  border: 1px solid #96CEF6;
  box-shadow: 0 18px 55px rgba(2,8,23,.10);
  border-radius: 18px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  align-items: center;
  position: relative;
}

.vision__tag{
  position: absolute;
  top: -12px;
  left: 18%;
  transform: translateX(-50%);
  background: #FFD9C3;
  color: #111;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  padding: 6px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(2,8,23,.12);
}

.vision__icon{
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.vision__icon img{
  width: 80px;
  height: auto;
  display: block;
}

.vision__text{
  margin: 0;
  color: rgba(16,17,20,.78);
  font-size: 18px;
  line-height: 1.65;
}

/* ===========================
   ABOUT: Evolution of Our Model (reusable)
=========================== */

.model{
  background: #fff;
  padding: 74px 0 84px;
}

.model__grid{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 64px;
  align-items: start;
}

.model__media{
  margin: 0;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(2,8,23,.14);
  background: #e9eef5;
  height: 100%;
}

.model__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* maintains that “tall photo” feel */
  aspect-ratio: 4 / 5;
  transform: translateZ(0);
}

.model__content{
  min-width: 0;
}

.model__title{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  color: #111;
  font-family: var(--title-font);
}

.model__copy p{
  margin: 0 0 14px;
  color: rgba(16,17,20,.74);
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
}

.model__what{
  margin-top: 26px;
}

.model__whatTitle{
  margin: 0 0 18px;
  font-size: 26px;
  line-height: 1.15;
  color: #111;
}

/* Cards grid (6 tiles) */
.model__cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Tile */
.modelCard{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  min-height: 120px;
  box-shadow: 0 18px 55px rgba(2,8,23,.12);
  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}

.modelCard__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 8.5;
  transform: scale(1.02);
  transition: transform .55s var(--ease);
}

/* Dark overlay for text legibility */
.modelCard::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.10) 100%);
  z-index: 1;
}

/* label bottom-left */
.modelCard__label{
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 52px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
  z-index: 1;
}

/* arrow bottom-right */
.modelCard__arrow{
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 1;
}

/* Premium hover */
@media (hover:hover) and (pointer:fine){
  .modelCard:hover{
    transform: translateY(-6px);
    box-shadow: 0 26px 80px rgba(2,8,23,.18);
    filter: saturate(1.03) contrast(1.02);
  }
  .modelCard:hover .modelCard__img{
    transform: scale(1.07);
  }
}


/* ===========================
   ABOUT: BSH sections (reusable split + band)
=========================== */

/* --- Generic icon list (reusable) --- */
.iconList{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 18px;
}

.iconList__item{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
}

.iconList__icon{
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}
.iconList__icon img{
  width: 50px;
  height: auto;
  display: block;
}

.iconList__title{
  font-weight: 700;
  font-size: var(--standard-font);
  color: rgba(16,17,20,.84);
  margin: 0 0 4px;
}

.iconList__text{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(16,17,20,.70);
}

.iconList--tight{ gap: 16px; }

/* --- BSH top section --- */
.bsh{
  background: #fff;
  padding: 70px 0 56px;
}

.bsh__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items: center;
}

.bsh__title{
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  color: #111;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}


/* orange hand-stroke underline (simple version) */
.bsh__stroke{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  box-shadow: 0 10px 26px rgba(240,138,42,.22);
}

.bsh__lead{
  margin: 0 0 14px;
  color: rgba(16,17,20,.72);
  font-size: 14px;
  line-height: 1.85;
}

.bsh__subhead{
  margin: 18px 0 8px;
  font-weight: 700;
  font-size: 22px;
  color: #111;
}

.bsh__media{
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(2,8,23,.14);
  background: #e9eef5;
}

.bsh__img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Light-blue band section --- */
.band{
  background: #DDF2F6; /* soft blue like design */
  padding: 0 0;
}

.band__grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 56px;
  align-items: center;
  padding-left: 0;
  margin-left: 0;
  width: 96%;
}

.band__media{
  margin: 0;
  border-radius: 0 70px 70px 0;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(2,8,23,.14);
  background: #e9eef5;
}

.band__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.band__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 28px;
  color: #111;
}

.band__lead{
  margin: 0 0 10px;
  color: rgba(16,17,20,.70);
  font-size: 13.5px;
  line-height: 1.7;
}

.bsh__title,
.band__title {
  font-family: var(--title-font);
}

.bsh__lead,
.iconList__text,
.band__lead {
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.72);
  margin-bottom: 30px;
}

.blocks {
  padding: 72px 0 84px;
  background: #fff;
}

.blocks__head {
  text-align: center;
  margin-bottom: 42px;
}

.blocks__title {
  font-family: var(--title-font);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}


.blocks__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1.05fr;
  grid-template-rows: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}


.block--tall:first-of-type {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.block--tall:last-of-type {
  grid-row: 1 / span 2;
  grid-column: 4;
}


.block {
  background: #FFE3D1;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(2,8,23,.12);
}

.block__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  flex-shrink: 0;
}

.block--tall .block__img {
  height: 65%;
}

.block__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.block__title {
  font-family: var(--title-font);
  font-size: calc(var(--standard-font) * 1.05);
  font-weight: 700;
  margin: 0 0 6px;
}

.block__text {
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.72);
  margin: 0;
}


/* --- Monitoring & Innovation band --- */
.band--innovation {
  background: #DDF2F6;
}

.band__title {
  font-family: var(--title-font);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  margin: 0 0 18px;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.band__content p,
.band__content .iconList__text {
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
}


/* ===========================
   Impact & Effectiveness
=========================== */

.impactaneffectiveness {
  padding: 72px 0 90px;
  background: #fff;
}

.impactaneffectiveness .impact__grid {
  display: grid;
  grid-template-columns: 1.7fr 0.75fr;
  gap: 56px;
  align-items: start;
}

.impactaneffectiveness .impact__title {
  font-family: var(--title-font);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  margin: 0 0 22px;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.impactaneffectiveness .impact__content .iconList__text {
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
}

.impactaneffectiveness .impact__media {
  display: grid;
  gap: 22px;
}

.impactaneffectiveness .impact__img {
  width: 100%;
  border-radius: 100px;
  object-fit: cover;
  box-shadow: 0 24px 70px rgba(2,8,23,.14);
}


/* ===========================
   TEAM (final section)
=========================== */

.band--team{
  background: #DDF2F6;
}

.team{
  padding: 72px 0 84px;
}

.team__title,
.team__subTitle,
.modal__title{
  font-family: var(--title-font);
}

.team__title{
  font-size: clamp(34px, 3.5vw, 46px);
  font-weight: 900;
  margin: 0 0 16px;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.team__intro,
.team__text{
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.72);
  margin: 0;
  max-width: 980px;
}

.team__block{
  margin-top: 50px;
}

.team__subTitle{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: #111;
}

/* Core leadership grid */
.teamGrid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 50px;
  margin-top: 18px;
}

.person{
  appearance: none;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

.person__img{
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(2,8,23,.14);
  background: #fff;
}

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

.person__name{
  display: block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  color: #111;
}

.person__meta{
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--brand);
  font-style: italic;
}

/* Governing body list */
.boardGrid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 26px;
  margin-top: 18px;
}

.boardItem{
  text-align: left;
  background: transparent;
  border: 0;
  padding: 2em 0;
  cursor: pointer;
}

.boardItem__name{
  display: block;
  font-weight: 800;
  font-size: 14px;
  color: #111;
}

.boardItem__role{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(16,17,20,.60);
}

/* Hover (premium but subtle) */
@media (hover:hover) and (pointer:fine){
  .person:hover .person__img{
    transform: translateY(-4px);
    transition: transform .35s var(--ease);
  }
  .boardItem:hover .boardItem__name{
    color: var(--brand);
    transition: color .25s var(--ease);
  }
}

/* ===========================
   GET INVOLVED: Collage intro
=========================== */

.giIntro{
  background: url(../images/get-involved/gi-bg.png) no-repeat -3% -10% #fff;
  padding: 72px 0 150px;
  background-size: 32%;
}

.giIntro__grid{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 18px;
  align-items: flex-start;
}

/* LEFT collage */
.giIntro__collage{
  position: relative;
  min-height: 420px;
}

.giIntro__dots{
  position: absolute;
  inset: -28px -28px -28px -28px;
  pointer-events: none;

  /* dotted field */
  background:
    radial-gradient(circle, rgba(90, 190, 210, .28) 2px, transparent 2.6px) 0 0/22px 22px,
    radial-gradient(circle, rgba(90, 190, 210, .18) 1.2px, transparent 1.8px) 12px 10px/22px 22px;

  /* fade out edges so it feels soft like the design */
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1), rgba(0,0,0,.4) 62%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1), rgba(0,0,0,.4) 62%, rgba(0,0,0,0) 100%);
}

.giIntro__shot{
  position: absolute;
  margin: 0;
  overflow: hidden;
}

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

/* top image */
.giIntro__shot--top{
  width: min(380px, 92%);
  height: auto;
  left: 0;
  top: 0;
  border-top-left-radius: 0;
}

/* bottom image (bigger, overlaps) */
.giIntro__shot--bottom{
  width: min(440px, 98%);
  height: auto;
  left: 210px;
  top: 140px;
  border-bottom-right-radius: 0;
}

/* RIGHT copy */
.giIntro__kicker{
  margin: 0 0 10px;
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  position: relative;
  left: -30%;
}

.giIntro__title{
  margin: 0 0 18px;
  font-family: var(--title-font);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  color: #111;
  position: relative;
  left: -30%;
}

.giIntro__text{
  margin: 0;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.72);
  max-width: 52ch;
  margin-top: 2em;
}

/* Premium hover (subtle, optional) */
@media (hover:hover) and (pointer:fine){
  .giIntro__shot{
    transition: transform .45s var(--ease);
  }
  .giIntro__collage:hover .giIntro__shot--top{
    transform: translateY(-4px);
  }
  .giIntro__collage:hover .giIntro__shot--bottom{
    transform: translateY(-6px);
  }
}

/* Responsive */
@media (max-width: 1100px){
  .giIntro__grid{ gap: 40px; }
  .giIntro__shot--bottom{ left: 110px; }
  .giIntro__kicker, .giIntro__title{left: 0;}
}

@media (max-width: 920px){
  .giIntro__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .giIntro__collage{
    min-height: 420px;
  }
  .giIntro__shot--bottom{
    left: 90px;
  }
  .giIntro__shot--top{
    width: 62%;
    height: 210px;
  }
  .giIntro__shot--bottom{
    width: 66%;
    height: 270px;
    left: 30%;
    top: 110px;
  }
  .giIntro__text{
    max-width: 100%;
  }
}

@media (max-width: 560px){
  .giIntro{ padding: 56px 0 64px; }
  .giIntro__collage{ min-height: 390px; }

  .giIntro__shot--top{
    width: 62%;
    height: 210px;
  }
  .giIntro__shot--bottom{
    width: 66%;
    height: 270px;
    left: 30%;
    top: 110px;
  }
}


/* ===========================
   GET INVOLVED: Ways section
   (background image will provide the curve)
=========================== */

.ways{
  padding: 260px 0;
  background-image: url("../images/get-involved/ways-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
  margin-bottom: 60px;
}

.ways__title{
  font-family: var(--title-font);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 900;
  margin: 0 0 26px;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

/* grid */
.ways__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* card */
.waysCard{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: #fff;
  border-radius: 22px;
  padding: 26px 18px 45px;

  border: 1px solid rgba(240,138,42,.28);
  box-shadow: 0 18px 55px rgba(2,8,23,.12);

  text-decoration: none;
  color: inherit;

  min-height: 240px;
  position: relative;

  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.waysCard__icon{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.waysCard__icon img{
  width: 56px;
  height: auto;
  display: block;
}

.waysCard__title{
  font-family: var(--standard-font);
  font-size: calc(var(--standard-font) * 1.08);
  font-weight: 600;
  margin: 0 0 10px;
  color: #111;
}

.waysCard__text{
  font-size: 14px;
  line-height: 20px;
  color: rgba(16,17,20,.70);
  margin: 0;
  max-width: 26ch;
}

/* small arrow button */
.waysCard__go{
  margin-top: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid rgba(240,138,42,.7);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 900;
  line-height: 1;
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: #fff;
}

@media (hover:hover) and (pointer:fine){
  .waysCard:hover{
    transform: translateY(-6px);
    box-shadow: 0 26px 80px rgba(2,8,23,.16);
  }
}


/* ===========================
   GET INVOLVED: Detail rows
=========================== */

.giDetails__wrap{
  width: 100%;
}

.giDetails{
  padding: 46px 0 90px;
  background: #fff;
}

.giRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  padding: 60px 0;
}

.giRow + .giRow{}

.giRow__media{
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(2,8,23,.12);
}

.giRow__img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* match those tall-ish screenshots */
.giRow--imgLeft .giRow__img,
.giRow--imgRight .giRow__img{
  aspect-ratio: 16 / 8.8;
}

.giRow--imgLeft .giRow__media{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.giRow--imgRight .giRow__media{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Right “brand tile” images: keep them clean, no heavy crop */
.giRow__media--tile{
  background: transparent;
  box-shadow: none;
  border-radius: 26px;
  overflow: hidden;
}
.giRow__media--tile .giRow__img{
  aspect-ratio: 16 / 9;
  object-fit: contain; /* because it's a graphic */
  background: transparent;
}

/* swap layout */
.giRow--imgRight .giRow__content{ order: 1; margin-left:10%; }
.giRow--imgRight .giRow__media{ order: 2; }
.giRow--imgLeft .giRow__content{margin-right: 10%;}

.giRow__title{
  font-family: var(--title-font);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  margin: 0 0 16px;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.giRow__text{
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.72);
  margin: 0 0 12px;
}

.giRow__links{
  margin: 12px 0 0;
}

a{
  color: var(--brand);
}

.giRow__link{
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,138,42,.35);
}
.giRow__link:hover{
  border-bottom-color: rgba(240,138,42,.85);
}

/* "Get online" row — social icons (scoped to this row only) */
.giSocial{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
}

.giSocial__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(240,138,42,.55);
  background: #fff;
  color: var(--brand);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.giSocial__icon{
  width: 20px;
  height: 20px;
  display: block;
}

@media (hover:hover) and (pointer:fine){
  .giSocial__link:hover{
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
  }
}

.giSocial__link:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ===========================
   BLOGS LISTING
=========================== */

.blogsList{
  padding: 54px 0 90px;
  background: #fff;
}

.blogsList__head{
  text-align: center;
  margin-bottom: 26px;
}

.blogsList__title{
  font-family: var(--title-font);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900;
  margin: 0 0 14px;
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}

.blogsList__intro{
  margin: 0 auto;
  max-width: 72ch;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.72);
}

.blogsList__intro span{
  color: var(--brand);
}

/* Toolbar */
.blogsToolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 60px 0 30px;
}

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

.blogsToolbar__count{
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.65);
}

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

.blogsToolbar__select{
  font-size: var(--standard-font);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(2,8,23,.12);
  background: #fff;
  opacity: 0.8;
  color: #111;
}

/* View toggle */
.viewToggle{
  display: inline-flex;
  border: 1px solid rgba(2,8,23,.12);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.viewToggle__btn{
  border: 0;
  background: transparent;
  padding: 9px 10px;
  cursor: pointer;
  font-weight: 900;
  color: rgba(16,17,20,.65);
}

.viewToggle__btn.is-active{
  color: var(--brand);
  background: var(--brand);
}

.viewToggle__btn img{
  width: 20px;
}

/* Grid/List wrapper */
.blogGrid{
  display: grid;
  gap: 40px;
}

/* grid view: 3 columns like design */
.blogGrid.is-grid{
  grid-template-columns: repeat(3, 1fr);
}

/* list view: 1 column */
.blogGrid.is-list{
  grid-template-columns: 1fr;
}

/* Card */
.blogCard{
  border-radius: 0 40px 18px 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 55px rgba(2,8,23,.10);
  border: 1px solid rgba(2,8,23,.06);
  position: relative;
}

.blogCard__media{
  position: relative;
  display: block;
  height: 250px;
  overflow: hidden;
  background: #ffffff;
}

.blogCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
  border-bottom-left-radius: 40px;
  border-bottom: 5px solid var(--brand);
}

.blogCard__tag{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,.92);
  color: rgba(16,17,20,.85);
  box-shadow: 0 12px 26px rgba(2,8,23,.12);
  z-index: 1;
}

.blogCard__body{
  padding: 22px 22px 40px;
  position: relative;
}

.blogCard__body p {
    opacity: 0.7;
    font-size: 15px;
    line-height: 1.5em;
}

.blogCard__title{
  margin: 0 0 8px;
  font-family: var(--title-font);
  font-size: calc(var(--standard-font) * 1.1);
  font-weight: 600;
  line-height: 1.3;
}

.blogCard__title a{
  color: #111;
  text-decoration: none;
}

.blogCard__excerpt{
  margin: 0;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.65);
}

/* orange corner go button */
.blogCard__go{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(240,138,42,.12);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(240,138,42,.35);
  background: var(--brand);
  border-radius: 20px 0 0 0;
}

/* hover */
@media (hover:hover) and (pointer:fine){
  .blogCard:hover .blogCard__media img{ transform: scale(1.04); }
  .blogCard:hover{ box-shadow: 0 26px 80px rgba(2,8,23,.14); }
}

/* List view layout */
.blogGrid.is-list .blogCard{
  display: grid;
  grid-template-columns: 240px 1fr;
  border-bottom-left-radius: 40px;
}
.blogGrid.is-list .blogCard__media{ height: 100%; min-height: 140px; }
.blogGrid.is-list .blogCard__body{ padding: 16px 16px 18px; }

/* ===========================
   ANNUAL REPORTS (page-annual-reports.php only)
=========================== */

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

.arCard{
  position: relative;
  border-radius: 0 40px 18px 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 55px rgba(2,8,23,.10);
  border: 1px solid rgba(2,8,23,.06);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

/* client-side reveal: only ever added by JS, so no-JS shows every card */
.arCard.is-hidden{ display: none; }

.arCard__media{
  display: block;
  aspect-ratio: 4 / 3;                 /* uniform card tops regardless of source ratio */
  overflow: hidden;
  background: #f2f4f7;
  border-bottom: 5px solid var(--brand);
}

.arCard__img{
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
  padding: 0;
}

/* neutral placeholder when an image is unexpectedly missing */
.arCard__media--empty{
  display: grid;
  place-items: center;
}

.arCard__media--empty::after{
  content: "";
  width: 40px;
  height: 50px;
  border: 2px solid rgba(2,8,23,.16);
  border-radius: 4px;
}

.arCard__body{
  padding: 20px 22px 24px;
}

.arCard__title{
  margin: 0 0 8px;
  font-family: var(--title-font);
  font-size: calc(var(--standard-font) * 1.1);
  font-weight: 600;
  line-height: 1.3;
}

.arCard__link{
  color: #111;
  text-decoration: none;
}

/* single anchor covers the whole card — no nested/overlapping links */
.arCard__link::after{
  content: "";
  position: absolute;
  inset: 0;
}

.arCard__cue{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand);
}

.arCard__cueArrow{
  transition: transform .25s var(--ease);
}

.arCard:focus-within{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (hover:hover) and (pointer:fine){
  .arCard:hover{
    box-shadow: 0 26px 80px rgba(2,8,23,.14);
    transform: translateY(-2px);
  }
  .arCard:hover .arCard__cueArrow{ transform: translateX(3px); }
}

.arMoreWrap{
  margin-top: 46px;
  text-align: center;
}

.arMore{
  margin: 0 auto;
}

.arStatus{
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(16,17,20,.45);
}

.arEmpty{
  margin: 40px auto 10px;
  text-align: center;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.55);
}

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

@media (max-width: 680px){
  .arGrid{ grid-template-columns: 1fr; }
}

/* ===========================
   SITEMAP (page-sitemap.php only)
=========================== */

.sitemap__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 34px 48px;
  align-items: start;
}

.sitemap__group{
  padding-top: 6px;
  border-top: 3px solid var(--brand);
}

.sitemap__heading{
  margin: 14px 0 16px;
  font-family: var(--title-font);
  font-size: 19px;
  font-weight: 700;
  color: #111827;
}

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

.sitemap__heading a:hover,
.sitemap__heading a:focus-visible{
  color: var(--brand);
}

.sitemap__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitemap__list a{
  display: inline-block;
  padding: 6px 0;
  font-size: var(--standard-font);
  line-height: 1.5;
  color: rgba(16,17,20,.72);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sitemap__list a:hover{
  color: var(--brand);
  border-bottom-color: rgba(240,138,42,.4);
}

.sitemap__list a:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Child pages, output by wp_list_pages() — scoped to this page only */
.sitemap .children{
  list-style: none;
  margin: 0 0 0 16px;
  padding: 2px 0 2px 14px;
  border-left: 1px solid rgba(2,8,23,.10);
}

@media (max-width: 520px){
  .sitemap__grid{ gap: 30px; }
  .sitemap__heading{ font-size: 18px; }
}

/* ===========================
   BLOG DETAIL (matches site)
=========================== */

.blogDetail{
  padding: 200px 0 86px;
  background: #fff;
}

.blogDetail h1{width: 80%; margin-top: 0 auto 20px auto;}

.blogDetail h1 .ecos__underline{
    position: absolute;
    right: 0%;
    bottom: -40px;
    left: 0;
    width: 188px;
    margin: 0 auto;
    height: 15px;
    background: url(../images/underline.png) no-repeat top left;
    background-size: 100%;
    margin-bottom: 40px;
}

.blogDetail__head{
  text-align: center;
  margin-bottom: 50px;
}

.blogDetail__cat{
  font-size: 14px;
  color: rgba(17,24,39,.55);
  margin-bottom: 10px;
}

.blogDetail__title{
  margin: 0;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.15;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
  color: #111827;
}

/* Hero image */
.blogHero{
  margin: 18px auto 28px;
  width: min(1500px, 100%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(2,8,23,.14);
  background: #e9eef5;
}

.blogHero__img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 6.2;
  object-fit: cover;
}

/* Two column layout */
.blogLayout{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

/* Article */
.blogArticle__content{
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(17,24,39,.78);
}

.blogArticle__content p{
  margin: 0 0 14px;
  width: 95%;
}

.blogArticle__content table{max-width: 100%;margin-bottom: 0.5em;border: 1px solid #999;color: #111;width: 100%;}
.blogArticle__content table tr td, .blogArticle__content table tr th{padding: 1% 1%;font-size: 0.9em;}
.blogArticle__content table th { background: #cccccc; }
.blogArticle__content table tr:nth-child(even) td{background: #efefef;}

.blogArticle__content h2{
  font-family: var(--title-font);
  font-size: 22px;
  font-weight: 700;
  margin: 22px 0 10px;
  color: #111827;
}

.blogArticle__content ul{
  margin: 0 0 16px 18px;
  padding: 0;
}
.blogArticle__content li{
  margin: 0 0 8px;
}

.blogArticle__content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(240,138,42,.7);
  background: rgba(240,138,42,.06);
  border-radius: 12px;
  color: rgba(17,24,39,.82);
}

.blogArticle__meta{
  margin-top: 18px;
  font-size: 13px;
  color: rgba(17,24,39,.55);
}

/* Knowledge Hub resource detail — cover + intro (resource pages only) */
.resourceIntro{
  display: grid;
  grid-template-columns: minmax(200px, min(30%, 410px)) 1fr;  /* ~30% cover, capped ~410px on wide screens */
  gap: clamp(32px, 5vw, 72px);
  align-items: start;            /* text starts level with the top of the cover */
  margin-top: 6px;
}

.resourceIntro--noimg{           /* no featured image → one full-width column */
  grid-template-columns: 1fr;
}

.resourceCover{
  margin: 0;
  align-self: start;
}

.resourceCover__img{
  display: block;
  width: 100%;
  height: auto;                  /* natural aspect ratio, never cropped */
  border-radius: 14px;
  background: #e9eef5;
}

.resourceBody{
  min-width: 0;                  /* prevent grid blow-out / horizontal overflow */
  overflow-wrap: break-word;
}

.resourceBody .blogArticle__meta{ margin-top: 20px; }

.resourceLede{
  font-size: 1.05em;
  line-height: 1.7;
  color: rgba(17,24,39,.9);
  margin: 0 0 18px;
}

.resourceCta{
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
}

@media (max-width: 860px){
  .resourceIntro{
    grid-template-columns: 1fr;  /* stack: cover first, then text */
    gap: 24px;
  }
  .resourceCover{
    max-width: 320px;            /* sensible mobile cover width, centred */
    margin-inline: auto;
  }
}

/* Sidebar */
.blogSide__card{
  border-radius: 16px;
  border: 1px solid rgba(2,8,23,.08);
  box-shadow: 0 18px 55px rgba(2,8,23,.08);
  background: #fff;
  padding: 14px 14px 10px;
}

.blogSide__title{
  margin: 0 0 10px;
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
}

.blogSide__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.blogSide__list li + li{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(2,8,23,.06);
}

.blogSide__link{
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(17,24,39,.72);
  text-decoration: none;
}

.blogSide__link:hover{ color: var(--brand); }
.blogSide__link.is-active{ color: var(--brand); font-weight: 600; }

/* Most read */
.blogMore{
  margin-top: 44px;
}

.blogMore__title{
  margin: 0 0 14px;
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

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

.moreCard{
  text-decoration: none;
  color: inherit;
}

.moreCard__media{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #e9eef5;
  box-shadow: 0 18px 55px rgba(2,8,23,.10);
}

.moreCard__media img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.moreCard__caption{
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(17,24,39,.70);
}


/* RESPONSIVE ALL*/
@media (max-width: 900px) {
  .footer__grid{
    display: flex;              /* keep flex */
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* absolute nav breaks on mobile — reset it */
  .footer__nav{
    position: static;
    right: auto;
    top: auto;

    width: 100%;
    margin-top: 6px;

    white-space: normal;
    flex-wrap: wrap;
    gap: 12px 18px;
  }

  .footer__subscribe{
    width: 100%;
    align-self: flex-start;
  }

  .footer__form{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer__form input{
    flex: 1 1 50px;
    width: 100%;
    min-width: 0; /* prevents overflow on iOS */
  }

  .footer__form button{
    flex: 0 0 auto;
  }

  .hero__rotate .hero__word{-webkit-text-stroke:1.5px rgba(255,255,255,.92);}
  .hero__rotate{text-align:center!important; align-items: center;}
  .kp__head{margin-bottom: 0;}
  .hero__solid{display: block; width: 100%;}
  .compassion__para, .compassion__bullets li{font-size: 14px; margin-top: 1.5em;}
  .compassion_h2, .kp__title{font-size: 40px;}
  .kpitem__text a, .kp__caption a{color: #fff;}
  .kp__right{top: 0;}
  .kpitem{padding: 1em; border: 1px solid #eeeeee; box-shadow: 0px 0px 6px #e0e0e0a3; border-radius: 5px;}
  .kp__left{gap: 40px;}
  .kpitem:hover .kpitem__img{transform: none; box-shadow: none;}
  .cb__viewall{margin-top: 2em;}
  .impact{background-size: cover;}
  .impact__grid, .vg__grid{gap: 10px;}
  .vg{padding-top: 60px;}
  .vgCard--featured{min-height: auto;}
  .vg{padding-bottom: 0;}
  .vgCard, .vgCard:hover{box-shadow: none;}
  .kp{background: #02b9c4; background-size: 100%;}
  .impact{background: #ff924d;}
}

@media (max-width: 520px) {
  .site-footer{
    padding: 44px 0 36px;
  }

  .footer__text{
    max-width: 100%;
  }

  /* stack subscribe form nicely */
  .footer__form{
    flex-direction: column;
    align-items: stretch;
  }

  .footer__form button{
    width: 100%;
  }

  /* optional: make nav a clean vertical list on very small screens */
  .footer__nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* Responsive About */
@media (max-width: 860px){
  :root{ --masthead-h: 300px; }
  .masthead{ padding-top: 74px; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
  .masthead__title{ max-width: 22ch; }
}

@media (max-width: 520px){
  :root{ --masthead-h: 260px; }
  .masthead__title{ font-size: clamp(26px, 7vw, 36px); }
}


/* --- Responsive --- */
@media (max-width: 1100px){
  .ecos__cards{ gap: 22px; }
  .ecosCard{ min-height: 300px; padding: 30px 22px 24px; }
}

@media (max-width: 900px){
  .ecos{ padding: 64px 0 58px; }
  .ecos__cards{ grid-template-columns: 1fr; gap: 18px; }
  .ecosCard{ min-height: auto; }
  .vision{ grid-template-columns: 86px 1fr; }
  .vision__icon{ width: 78px; height: 78px; }
}

@media (max-width: 520px){
  .ecos__head{ margin-bottom: 22px; }
  .ecos__underline{ width: 140px; }
  .vision{ grid-template-columns: 1fr; text-align: left; }
  .vision__icon{ margin: 0; }
  .vision__tag{ left: 22px; transform: none; }
}

/* Responsive */
@media (max-width: 1100px){
  .model__grid{
    grid-template-columns: 360px 1fr;
    gap: 42px;
  }
  .model__cards{ gap: 16px; }
}

@media (max-width: 950px){
  .model{
    padding: 60px 0 70px;
  }
  .model__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .model__media{
    border-radius: 26px;
  }
  .model__img{
    aspect-ratio: 16 / 10;
  }
  .model__cards{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  .model__cards{
    grid-template-columns: 1fr;
  }
  .modelCard__label{
    font-size: 15px;
  }
}

/* Responsive */
@media (max-width: 980px){
  .bsh__grid,
  .band__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .bsh{ padding: 58px 0 46px; }
  .band{ padding: 46px 0; }
}

@media (max-width: 560px){
  .iconList__item{
    grid-template-columns: 46px 1fr;
    gap: 12px;
  }
  .iconList__icon{ width: 40px; height: 40px; }
  .iconList__icon img{ width: 26px; }
  .bsh__subhead{ font-size: 20px; }
}


@media (max-width: 1100px) {
  .blocks__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .block--tall {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .blocks__grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive */
@media (max-width: 980px) {
  .impactaneffectiveness .impact__grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive */
@media (max-width: 1100px){
  .teamGrid{ grid-template-columns: repeat(4, 1fr); }
  .boardGrid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px){
  .teamGrid{ grid-template-columns: repeat(2, 1fr); }
  .boardGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px){
  .boardGrid{ grid-template-columns: 1fr; }
}

/* ===========================
   MODAL (Reusable)
=========================== */

.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.modal.is-open{
  display: block;
}

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,8,23,.55);
  backdrop-filter: blur(6px);
}

.modal__panel{
  position: relative;
  width: min(920px, calc(100% - 28px));
  margin: 7vh auto 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 40px 120px rgba(2,8,23,.28);
  overflow: hidden;
}

.modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(16,17,20,.08);
  cursor: pointer;
  font-size: 18px;
}

.modal__grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
}

.modal__media{
  background: #f3f6fb;
}

.modal__media img{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.modal__content{
  padding: 28px 26px 26px;
}

.modal__title{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #111;
}

.modal__role{
  margin: 8px 0 14px;
  color: var(--brand);
  font-weight: 700;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
}

.modal__bio{
  margin: 0;
  font-size: var(--standard-font);
  line-height: var(--standard-lh);
  color: rgba(16,17,20,.72);
  height: 50vh; overflow: auto;
}

@media (max-width: 820px){
  .modal__grid{ grid-template-columns: 1fr; }
  .modal__panel{ margin-top: 5vh; }
}



/* responsive */
@media (max-width: 1100px){
  .ways__grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px){
  .ways{ padding: 64px 0 70px; }
  .ways__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px){
  .ways__grid{ grid-template-columns: 1fr; }
}


/* responsive */
@media (max-width: 980px){
  .giRow{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 0;
  }
  .giRow--imgRight .giRow__content,
  .giRow--imgRight .giRow__media{
    order: initial;
  }
}

@media (max-width: 980px){
  .blogGrid.is-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px){
  .blogsToolbar{ flex-direction: column; align-items: stretch; }
  .blogsToolbar__left, .blogsToolbar__right{ justify-content: space-between; }
  .blogGrid.is-grid{ grid-template-columns: 1fr; }
  .blogGrid.is-list .blogCard{ grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 980px){
  .blogLayout{
    grid-template-columns: 1fr;
  }
  .blogMore__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px){
  .blogMore__grid{
    grid-template-columns: 1fr;
  }
}

/* =============================
   Pagination — Narratives for Change (and shared)
   Targets the <ul class="page-numbers"> list output by paginate_links()
============================= */

.blogsPagination{
  margin: 56px 0 16px;
  display: flex;
  justify-content: center;
}

.blogsPagination .page-numbers{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blogsPagination .page-numbers li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.blogsPagination .page-numbers a,
.blogsPagination .page-numbers span{
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid rgba(2,8,23,.14);
  color: rgba(16,17,20,.75);
  background: #fff;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* active page */
.blogsPagination .page-numbers .current{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px rgba(240,138,42,.30);
}

/* hover on non-active items */
@media (hover:hover) and (pointer:fine){
  .blogsPagination .page-numbers a:hover{
    background: rgba(240,138,42,.08);
    border-color: var(--brand);
    color: var(--brand);
  }
}

/* prev / next arrows — slightly wider */
.blogsPagination .prev.page-numbers,
.blogsPagination .next.page-numbers{
  font-size: 16px;
  font-weight: 700;
  min-width: 44px;
}

/* dots … */
.blogsPagination .page-numbers .dots{
  border-color: transparent;
  background: transparent;
  cursor: default;
  color: rgba(16,17,20,.40);
}

/* =============================
   NFC infinite scroll UI
============================= */

#nfcSentinel{
  height: 1px;
  margin-top: 40px;
}

.nfcLoader{
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(16,17,20,.45);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nfcLoader.is-active::before{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(240,138,42,.25);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: nfcSpin .7s linear infinite;
}

@keyframes nfcSpin{
  to { transform: rotate(360deg); }
}

.nfcEndMsg{
  display: none;
  text-align: center;
  padding: 24px 0 40px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(16,17,20,.35);
}

.nfcEndMsg.is-visible{
  display: block;
}

/* -------------------------------------------------------
 * "Making a Difference" section — YouTube embed (replaces collage)
 * ----------------------------------------------------- */

.compassion__video {
  align-self: center;
  min-width: 0;
}

.compassion__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0,0,0,.40);
}

.compassion__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -------------------------------------------------------
 * Impact section — layout refinement
 * White / continuous background, no overlap, clean flow
 * ----------------------------------------------------- */

section.impact {
  background: #fff !important;
  padding: 90px 0 100px !important;
  overflow: hidden !important;
}

section.impact .impact__wave { display: none; }

/* ── Top: 2-column — text left, video right ──────── */
section.impact .impact__top {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 48px;
}

section.impact .impact__head {
  text-align: left;
  max-width: none;
  margin: 0;
}

section.impact .impact__kicker {
  display: block;
  color: var(--brand, #f08a2a);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

section.impact .impact__title {
  color: #0f0f0f;
  font-size: clamp(28px, 3.2vw, 42px);
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 700;
  margin: 0 0 18px;
  line-height: 1.15;
}

section.impact .impact__title span {
  color: var(--brand, #f08a2a);
  font-family: inherit;
}

section.impact .impact__desc {
  color: #444;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  max-width: 420px;
}

section.impact .impact__video { margin: 0; }

section.impact .videoCard {
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(0,0,0,.16);
}

section.impact .videoCard:hover {
  transform: none;
  box-shadow: 0 20px 56px rgba(0,0,0,.16);
}

section.impact .videoCard__frame {
  aspect-ratio: 16/9;
  width: 100%;
  border: 0;
  display: block;
}

/* ── Stat cards row ──────────────────────────────── */
section.impact .impact__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 0;
  margin: 0;
}

/* Card flip wrapper */
section.impact .iStat {
  perspective: 900px;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

section.impact .iStat:focus-visible {
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(240,138,42,.3);
}

section.impact .iStat__inner {
  position: relative;
  height: 120px;
  transform-style: preserve-3d;
  transition: transform .52s cubic-bezier(.4,0,.2,1);
}

@media (hover: hover) {
  section.impact .iStat:hover .iStat__inner {
    transform: rotateY(180deg);
  }
}

section.impact .iStat:focus-within .iStat__inner,
section.impact .iStat.is-flipped .iStat__inner {
  transform: rotateY(180deg);
}

/* Shared face styles */
section.impact .iStat__front,
section.impact .iStat__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Front: icon circle + number/label */
section.impact .iStat__front {
  padding: 22px 26px;
  gap: 20px;
}

section.impact .iStat__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(240,138,42,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand, #f08a2a);
  transition: transform .3s ease;
}

@media (hover: hover) {
  section.impact .iStat:hover .iStat__icon {
    transform: scale(1.12);
  }
}

section.impact .iStat__icon svg {
  width: 24px;
  height: 24px;
}

section.impact .iStat__body { min-width: 0; }

section.impact .iStat__num {
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  color: #111;
  line-height: 1.05;
  margin-bottom: 4px;
}

section.impact .iStat__lbl {
  font-size: 13px;
  color: #555;
  line-height: 1.45;
}

/* Back: detail text */
section.impact .iStat__back {
  transform: rotateY(180deg);
  border-left: 3px solid var(--brand, #f08a2a);
  padding: 20px 22px 20px 22px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
}

section.impact .iStat__back p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #444;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  section.impact .impact__top {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }
  section.impact .impact__desc { max-width: none; }
}

@media (max-width: 640px) {
  section.impact { padding: 60px 0 72px !important; }
  section.impact .impact__stats { grid-template-columns: 1fr; gap: 14px; }
  section.impact .iStat__inner { height: auto; min-height: 90px; }
  section.impact .iStat__front,
  section.impact .iStat__back {
    position: relative;
    inset: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: none !important;
    height: auto;
    min-height: 90px;
  }
  section.impact .iStat__back { display: none; }
  section.impact .iStat.is-flipped .iStat__front { display: none; }
  section.impact .iStat.is-flipped .iStat__back  { display: flex; }
  section.impact .iStat__inner { transform: none !important; }
}

/* -------------------------------------------------------
 * Where we work — About Us page
 * ----------------------------------------------------- */

/* -------------------------------------------------------
 * Where we work — About Us
 * Image left (dominant), text+list right
 * DOM order: text → image (text-first on mobile)
 * ----------------------------------------------------- */

.coverage {
  background: #fff;
  padding: 80px 0 88px;
}

.coverage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Desktop: swap visual order so image sits on the left */
.coverage__media  { order: 1; }
.coverage__content{ order: 2; }

/* ── Map card ─────────────────────────────────────── */
.coverage__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 52px rgba(2,8,23,.12);
  background: #f7f9fb;
  max-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coverage__img {
  width: 100%;
  height: 100%;
  max-height: 640px;
  object-fit: contain;
  display: block;
}

/* ── Text column ──────────────────────────────────── */
.coverage__title {
  font-family: "Roboto Serif", ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.12;
  color: #111;
  margin: 0 0 20px;
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.coverage__intro {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(16,17,20,.68);
  margin: 0;
}

/* ── State / district list ────────────────────────── */
.coverage__places {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid #ebebeb;
}

.coverage__places li {
  position: relative;
  padding: 13px 0 13px 18px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.coverage__places li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand, #f08a2a);
  flex-shrink: 0;
}

.coverage__state {
  font-size: 14.5px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}

.coverage__state::after {
  content: ' —';
  font-weight: 400;
  color: #bbb;
}

.coverage__districts {
  font-size: 13.5px;
  color: #888;
  line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .coverage__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* restore DOM order on mobile: text first, image below */
  .coverage__content{ order: 1; }
  .coverage__media  { order: 2; }
  .coverage__media  { max-height: 480px; }
}

@media (max-width: 640px) {
  .coverage { padding: 60px 0 64px; }
  .coverage__media { max-height: 360px; }
}


/* ── Narratives for Change: category landing cards ────────────────────── */
.nfcCatGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.nfcCatCard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s, transform .2s;
}

.nfcCatCard:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.nfcCatCard__img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.nfcCatCard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.nfcCatCard:hover .nfcCatCard__img img { transform: scale(1.04); }

.nfcCatCard__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.nfcCatCard__name {
  font-family: "Roboto Serif", serif;
  font-size: 17px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}

.nfcCatCard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nfcCatCard__count {
  font-size: 12px;
  color: #999;
}

.nfcCatCard__arrow {
  font-size: 18px;
  color: var(--brand);
  flex-shrink: 0;
  transition: transform .2s;
}

.nfcCatCard:hover .nfcCatCard__arrow { transform: translateX(4px); }

@media (max-width: 640px) {
  .nfcCatGrid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
}

.masthead__back { margin: 0 0 10px; font-size: 13px; }
.masthead__back a { color: rgba(255,255,255,.75); text-decoration: none; }
.masthead__back a:hover { color: #fff; }