/* Isolated GRIP styles for WordPress; original style.css preserved. */
.grip-page{

  --green: #72bf78;

  --green-dark: #4d9c56;

  --green-deep: #347c40;

  --green-light: #d8f0d9;

  --green-soft: #eef8ef;



  --red: #d93b36;



  --ink: #111111;

  --text: #4d4d4d;

  --muted: #777777;



  --line: #e4e4e4;

  --soft: #f7f7f7;

  --white: #ffffff;



  --shadow: 0 10px 28px rgba(0, 0, 0, 0.07);



  --container: 1200px;

}



/* ========================================================

   RESET

\======================================================== */



.grip-page *{

  box-sizing: border-box;

}



.grip-page{

  scroll-behavior: smooth;

}



.grip-page{

  margin: 0;



  background: var(--white);



  color: var(--text);



  font-family: "Inter", Arial, sans-serif;



  font-size: 16px;

  line-height: 1.75;



  -webkit-font-smoothing: antialiased;



  text-rendering: optimizeLegibility;

}



.grip-page a{

  color: inherit;

  text-decoration: none;

}



.grip-page button{

  font: inherit;

}



.grip-page img{

  display: block;

  max-width: 100%;

}



/* ========================================================

   CONTAINER

\======================================================== */



.grip-page .container{

  width: min(calc(100% - 64px), var(--container));



  margin: 0 auto;

}



/* ========================================================

   ACCESSIBILITY

\======================================================== */



.grip-page .skip-link{

  position: absolute;



  left: -9999px;

  top: 0;



  z-index: 9999;



  padding: 12px 18px;



  background: var(--ink);



  color: #ffffff;

}



.grip-page .skip-link:focus{

  left: 15px;

  top: 15px;

}



/* ========================================================

   INTRO

\======================================================== */



.grip-page .page-intro{

  padding: 40px 0 30px;

}



/* ========================================================

   BREADCRUMB

\======================================================== */



.grip-page .breadcrumb{

  width: max-content;



  max-width: 100%;



  margin-bottom: 25px;



  padding-bottom: 10px;



  border-bottom: 1px solid #dddddd;



  color: #222222;



  font-size: 14px;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;

}



.grip-page .breadcrumb a{

  color: #222222;

}



.grip-page .breadcrumb span{

  margin-left: 7px;

}



.grip-page .breadcrumb .current{

  padding-bottom: 11px;



  border-bottom: 2px solid #d2895a;

}



/* ========================================================

   TYPOGRAPHY

\======================================================== */



.grip-page h1, .grip-page h2, .grip-page h3{

  margin-top: 0;



  color: var(--ink);



  font-family: "Poppins", sans-serif;

}



.grip-page h1{

  max-width: 1050px;



  margin-bottom: 26px;



  font-size: clamp(38px, 4.4vw, 52px);



  line-height: 1.16;



  font-weight: 800;



  letter-spacing: -1.6px;

}



/* ========================================================

   INTRO BANNER

\======================================================== */



.grip-page .intro-banner{

  padding: 23px 27px;



  background: var(--green);



  color: #ffffff;

}



.grip-page .intro-banner p{

  max-width: 1050px;



  margin: 0;



  font-size: 15px;



  line-height: 1.8;

}



.grip-page .intro-banner strong{

  font-weight: 700;

}



/* ========================================================

   SECTIONS

\======================================================== */



.grip-page .section{

  padding: 58px 0;

}



.grip-page .section-soft{

  background: var(--soft);

}



.grip-page .section-kicker{

  display: block;



  margin-bottom: 9px;



  color: var(--green-dark);



  font-family: "Poppins", sans-serif;



  font-size: 13px;



  font-weight: 700;



  letter-spacing: 0.7px;



  text-transform: uppercase;

}



.grip-page .section-kicker.light{

  color: rgba(255, 255, 255, 0.85);

}



.grip-page .section h2, .grip-page .section-vision h2{

  max-width: 900px;



  margin-bottom: 17px;



  font-size: clamp(31px, 3.2vw, 42px);



  line-height: 1.22;



  font-weight: 800;



  letter-spacing: -1px;

}



.grip-page .section-lead{

  max-width: 900px;



  margin: 0 0 30px;



  color: #505050;



  font-size: 16px;



  line-height: 1.8;

}



.grip-page .content-copy p, .grip-page .ecosystem-copy p, .grip-page .support-copy{

  margin: 0 0 21px;



  font-size: 15.5px;



  line-height: 1.82;

}



/* ========================================================

   TWO COLUMN

\======================================================== */



.grip-page .two-column{

  display: grid;



  grid-template-columns: 1.08fr 0.92fr;



  gap: 55px;



  align-items: center;

}



.grip-page .two-column-tight{

  gap: 70px;

}



/* ========================================================

   BUTTON

\======================================================== */



.grip-page .btn-dark{

  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 9px;



  min-height: 44px;



  padding: 0 26px;



  border-radius: 999px;



  background: #252525;



  color: #ffffff;



  font-family: "Poppins", sans-serif;



  font-size: 13px;



  font-weight: 700;



  transition:

    background-color 0.2s ease,

    transform 0.2s ease;

}



.grip-page .btn-dark:hover{

  background: #000000;



  transform: translate3d(0, -1px, 0);

}



/* ========================================================

   REAL IMAGES

\======================================================== */



.grip-page .real-img, .grip-page .real-img-wide{

  width: 100%;



  object-fit: cover;



  background: #e9eee9;

}



.grip-page .real-img{

  height: 345px;

  border-radius: 5px;



}



.grip-page .real-img-wide{

  height: 500px;

  border-radius: 5px;

  margin-top: 35px;

}



/* ========================================================

   FLOW TABLE

\======================================================== */



.grip-page .flow-table{

  margin-top: 28px;



  border: 1px solid #5eae68;



  background: #ffffff;

}



.grip-page .flow-title{

  min-height: 43px;



  display: grid;



  place-items: center;



  color: #111111;



  font-family: "Poppins", sans-serif;



  font-size: 14px;



  font-weight: 700;



  border-bottom: 1px solid #5eae68;

}



.grip-page .flow-row{

  display: grid;

}



.grip-page .flow-row.six{

  grid-template-columns: repeat(6, 1fr);

}



.grip-page .flow-row > div{

  min-height: 78px;



  display: flex;



  flex-direction: column;



  justify-content: center;



  align-items: center;



  gap: 7px;



  padding: 10px;



  background: #daf1da;



  color: #151515;



  border-right: 1px solid #5eae68;



  text-align: center;



  font-size: 13px;



  font-weight: 500;

}



.grip-page .flow-row > div:last-child{

  border-right: 0;

}



.grip-page .flow-row > div i{

  color: var(--green-deep);



  font-size: 21px;

}



.grip-page .flow-row .flow-end{

  background: #c7e9c9;



  font-weight: 700;

}



/* ========================================================

   PROGRAMME GRID

\======================================================== */



.grip-page .programme-grid{

  display: grid;



  gap: 22px;



  margin-top: 32px;

}



.grip-page .programme-grid.four{

  grid-template-columns: repeat(4, 1fr);

}



.grip-page .programme-grid.five{

  grid-template-columns: repeat(5, 1fr);

}



/* ========================================================

   CARDS

\======================================================== */



.grip-page .programme-card{

  min-height: 190px;



  padding: 30px 24px;



  background: #ffffff;



  border: 1px solid #ececec;



  border-radius: 16px;



  box-shadow: var(--shadow);



  text-align: center;



  transform: translateZ(0);



  transition:

    transform 0.25s ease,

    box-shadow 0.25s ease;

}



.grip-page .programme-card:hover{

  transform: translate3d(0, -3px, 0);



  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.09);

}



.grip-page .programme-card.compact{

  min-height: 145px;



  display: flex;



  flex-direction: column;



  justify-content: center;



  align-items: center;

}



/* ========================================================

   CARD ICON

\======================================================== */



.grip-page .card-icon{

  width: 48px;



  height: 48px;



  margin: 0 auto 15px;



  display: grid;



  place-items: center;



  border-radius: 50%;



  background: var(--green-soft);



  color: var(--green-dark);



  font-size: 24px;

}



.grip-page .programme-card h3{

  margin-bottom: 10px;



  font-size: 17px;



  line-height: 1.35;



  font-weight: 700;

}



.grip-page .programme-card p{

  margin: 0;



  color: #666666;



  font-size: 13.5px;



  line-height: 1.7;

}



/* ========================================================

   STATISTICS

\======================================================== */



.grip-page .stats-grid{

  display: grid;



  gap: 22px;



  margin-top: 30px;

}



.grip-page .stats-grid.three{

  grid-template-columns: repeat(3, 1fr);

}

.grip-page .stats-grid.four{

    grid-template-columns: repeat(4, 1fr);

}



.grip-page .stat-card{

  position: relative;



  padding: 28px;



  background: #ffffff;



  border: 1px solid #e9e9e9;

}



.grip-page .stat-icon{

  margin-bottom: 15px;



  color: var(--green-dark);



  font-size: 25px;

}



.grip-page .stat-card strong{

  display: block;



  margin-bottom: 9px;



  color: var(--green-dark);



  font-family: "Poppins", sans-serif;



  font-size: 37px;



  line-height: 1;



  font-weight: 800;

}



.grip-page .stat-card span{

  color: #5f5f5f;



  font-size: 13.5px;



  line-height: 1.6;

}



.grip-page .support-copy{

  max-width: 900px;



  margin-top: 22px;

}



/* ========================================================

   MINI PROCESS

\======================================================== */



.grip-page .mini-process{

  border: 1px solid #dedede;



  background: #ffffff;

}



.grip-page .mini-process > div{

  min-height: 62px;



  display: grid;



  grid-template-columns: 60px 46px 1fr;



  align-items: center;



  border-bottom: 1px solid #e4e4e4;

}



.grip-page .mini-process > div:last-child{

  border-bottom: 0;

}



.grip-page .mini-process span{

  align-self: stretch;



  display: grid;



  place-items: center;



  background: var(--green-soft);



  color: var(--green-dark);



  font-size: 12px;



  font-weight: 700;

}



.grip-page .mini-process i{

  color: var(--green-dark);



  font-size: 21px;



  text-align: center;

}



.grip-page .mini-process strong{

  padding-left: 5px;



  color: #222222;



  font-family: "Poppins", sans-serif;



  font-size: 15px;



  font-weight: 600;

}



.grip-page .mini-process-end span{

  background: var(--green);



  color: #ffffff;

}



/* ========================================================

   ECOSYSTEM

\======================================================== */



.grip-page .ecosystem-top{

  margin-top: 28px;

}



.grip-page .ecosystem-copy h3{

  margin-bottom: 13px;



  font-size: 27px;



  font-weight: 700;

}



/* ========================================================

   EVIDENCE

\======================================================== */



.grip-page .evidence-grid{

  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 22px;



  margin-top: 32px;

}



.grip-page .evidence-feature{

  grid-column: 1 / -1;



  min-height: 110px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 30px;



  padding: 25px 30px;



  background: var(--green-light);



  border: 1px solid #afd7b1;

}



.grip-page .evidence-feature > div{

  display: flex;



  align-items: center;



  gap: 12px;

}



.grip-page .evidence-feature i{

  color: var(--green-dark);



  font-size: 28px;

}



.grip-page .evidence-feature span{

  color: #333333;



  font-size: 14px;

}



.grip-page .evidence-feature strong{

  color: #277f35;



  font-family: "Poppins", sans-serif;



  font-size: clamp(29px, 4vw, 42px);



  line-height: 1;

}



.grip-page .evidence-feature em{

  padding: 0 10px;



  font-style: normal;



  font-weight: 500;

}



.grip-page .evidence-card{

  min-height: 165px;



  padding: 26px;



  background: #ffffff;



  border: 1px solid #e9e9e9;



  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.05);

}



.grip-page .evidence-card > i{

  display: block;



  margin-bottom: 15px;



  color: var(--green-dark);



  font-size: 25px;

}



.grip-page .evidence-card strong{

  display: block;



  margin-bottom: 11px;



  color: #151515;



  font-family: "Poppins", sans-serif;



  font-size: 35px;



  line-height: 1;



  font-weight: 800;

}



.grip-page .evidence-card span{

  color: #666666;



  font-size: 13px;



  line-height: 1.55;

}



.grip-page .footnote{

  max-width: 920px;



  margin: 24px 0 0;



  color: #858585;



  font-size: 12px;



  line-height: 1.75;



  font-style: italic;

}



/* ========================================================

   VISION

\======================================================== */



.grip-page .section-vision{

  padding: 60px 0 70px;

}



.grip-page .vision-banner{

  padding: 46px 48px;



  background: var(--green);



  color: #ffffff;

}



.grip-page .vision-banner h2{

  margin-top: 2px;



  color: #ffffff;

}



.grip-page .vision-banner p{

  max-width: 760px;



  margin: 0 0 25px;



  color: rgba(255, 255, 255, 0.95);



  font-size: 15px;



  line-height: 1.7;

}



.grip-page .btn-dark.inverse{

  background: #262626;



  color: #ffffff;

}



/* ========================================================

   GALLERY

\======================================================== */



.grip-page .gallery-section{

  overflow: hidden;



  border-top: 1px solid #edf2ed;



  background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f5faf5 100%);

}



.grip-page .gallery-heading{

  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  gap: 32px;

}



.grip-page .gallery-heading .section-lead{

  margin-bottom: 0;

}



.grip-page .gallery-counter{

  flex: 0 0 auto;



  min-width: 88px;



  padding-bottom: 5px;



  color: var(--green-deep);



  font-family: "Poppins", sans-serif;



  font-size: 14px;



  font-weight: 700;



  letter-spacing: 0.08em;



  text-align: right;

}



/* ========================================================

   GALLERY CAROUSEL

\======================================================== */



.grip-page .gallery-carousel{

  position: relative;



  margin-top: 30px;



  overflow: hidden;



  border: 1px solid #dfe8df;



  border-radius: 16px;



  background: var(--white);



  box-shadow: var(--shadow);



  outline: none;



  contain: layout paint;

}



.grip-page .gallery-carousel:focus-visible{

  box-shadow:

    0 0 0 3px rgba(77, 156, 86, 0.2),

    var(--shadow);

}



/* ========================================================

   GALLERY STAGE

\======================================================== */



.grip-page .gallery-stage{

  position: relative;



  aspect-ratio: 16 / 8.8;



  min-height: 430px;



  overflow: hidden;



  background: #e7efe8;



  touch-action: pan-y;



  user-select: none;



  isolation: isolate;



  transform: translateZ(0);



  backface-visibility: hidden;

}



/* ========================================================

   GALLERY SLIDES

\======================================================== */



.grip-page .gallery-slide{

  position: absolute;



  inset: 0;



  margin: 0;



  z-index: 0;



  opacity: 0;



  visibility: hidden;



  pointer-events: none;



  transform: translate3d(0, 0, 0) scale(1.025);



  will-change: opacity, transform;



  backface-visibility: hidden;



  transition:

    opacity 650ms cubic-bezier(0.22, 0.61, 0.36, 1),

    transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1),

    visibility 650ms linear;

}



.grip-page .gallery-slide.is-active{

  z-index: 1;



  opacity: 1;



  visibility: visible;



  pointer-events: auto;



  transform: translate3d(0, 0, 0) scale(1);

}



.grip-page .gallery-slide img{

  width: 100%;



  height: 100%;



  object-fit: cover;



  transform: translateZ(0);



  backface-visibility: hidden;



  -webkit-user-drag: none;

}



/* ========================================================

   GRADIENT OVER IMAGE

\======================================================== */



.grip-page .gallery-slide::after{

  content: "";



  position: absolute;



  inset: auto 0 0;



  height: 34%;



  pointer-events: none;



  background: linear-gradient(

    180deg,

    rgba(0, 0, 0, 0) 0%,



    rgba(0, 0, 0, 0.56) 100%

  );

}



/* ========================================================

   GALLERY CAPTION

\======================================================== */



.grip-page .gallery-caption{

  position: absolute;



  left: 28px;



  bottom: 24px;



  z-index: 2;



  display: flex;



  align-items: center;



  gap: 12px;



  color: #ffffff;



  font-family: "Poppins", sans-serif;



  font-size: 13px;



  font-weight: 600;

}



.grip-page .gallery-slide-number{

  width: 38px;



  height: 38px;



  display: grid;



  place-items: center;



  border: 1px solid rgba(255, 255, 255, 0.56);



  border-radius: 50%;



  background: rgba(17, 17, 17, 0.18);



  backdrop-filter: blur(7px);



  -webkit-backdrop-filter: blur(7px);



  font-size: 11px;



  letter-spacing: 0.06em;

}



/* ========================================================

   GALLERY CONTROLS

\======================================================== */



.grip-page .gallery-stage-controls{

  position: absolute;



  right: 24px;



  bottom: 22px;



  z-index: 4;



  display: flex;



  gap: 9px;

}



.grip-page .gallery-arrow{

  width: 46px;



  height: 46px;



  display: grid;



  place-items: center;



  padding: 0;



  border: 1px solid rgba(255, 255, 255, 0.72);



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.94);



  color: #1f1f1f;



  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);



  cursor: pointer;



  transform: translateZ(0);



  transition:

    background-color 0.2s ease,

    color 0.2s ease,

    transform 0.2s ease;

}



.grip-page .gallery-arrow:hover{

  background: var(--green-dark);



  color: #ffffff;



  transform: translate3d(0, -1px, 0);

}



.grip-page .gallery-arrow i{

  font-size: 21px;

}



.grip-page .gallery-arrow:focus-visible, .grip-page .gallery-thumb:focus-visible{

  outline: 3px solid rgba(77, 156, 86, 0.28);



  outline-offset: 3px;

}



/* ========================================================

   3 SECOND PROGRESS BAR

\======================================================== */



.grip-page .gallery-progress{

  position: absolute;



  left: 0;



  right: 0;



  bottom: 0;



  z-index: 5;



  height: 3px;



  overflow: hidden;



  background: rgba(255, 255, 255, 0.16);



  pointer-events: none;

}



.grip-page .gallery-progress span{

  display: block;



  width: 100%;



  height: 100%;



  background: var(--green);



  transform: scaleX(0);



  transform-origin: left center;



  will-change: transform;

}



.grip-page .gallery-progress span.is-running{

  animation: galleryTimer 3s linear forwards;

}



@keyframes galleryTimer {

  from {

    transform: scaleX(0);

  }



  to {

    transform: scaleX(1);

  }

}



/* ========================================================

   GALLERY FOOTER

\======================================================== */



.grip-page .gallery-footer{

  padding: 20px 22px 22px;



  background: #ffffff;

}



.grip-page .gallery-footer > p{

  margin: 0 0 15px;



  color: #6a6a6a;



  font-size: 12.5px;



  line-height: 1.6;

}



/* ========================================================

   THUMBNAILS

\======================================================== */



.grip-page .gallery-thumbnails{

  display: flex;



  gap: 10px;



  overflow-x: auto;



  overscroll-behavior-inline: contain;



  padding: 3px 2px 7px;



  scroll-behavior: smooth;



  scrollbar-width: thin;



  scrollbar-color: #b9cbb9 transparent;



  -webkit-overflow-scrolling: touch;

}



.grip-page .gallery-thumbnails::-webkit-scrollbar{

  height: 5px;

}



.grip-page .gallery-thumbnails::-webkit-scrollbar-track{

  background: transparent;

}



.grip-page .gallery-thumbnails::-webkit-scrollbar-thumb{

  border-radius: 999px;



  background: #b9cbb9;

}


/* =========================================================
   FINANCIAL IMPACT
========================================================= */

.grip-page .finance-impact-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
}


/* CARD */

.grip-page .finance-impact-card{
    position: relative;

    min-height: 190px;
    padding: 28px 28px;

    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;

    background: #ffffff;

    border: 1px solid rgba(28, 80, 61, 0.10);
    border-radius: 16px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.grip-page .finance-impact-card:hover{
    transform: translateY(-4px);

    border-color: rgba(28, 80, 61, 0.22);

    box-shadow:
        0 18px 45px rgba(31, 69, 55, 0.09);
}


/* subtle left accent */

.grip-page .finance-impact-card::before{
    content: "";

    position: absolute;

    left: 0;
    top: 26px;
    bottom: 26px;

    width: 3px;

    background: var(--green);

    border-radius: 0 4px 4px 0;
}


/* ICON */

.grip-page .finance-impact-icon{
    width: 62px;
    height: 62px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(28, 96, 69, 0.07);

    color: var(--green);

    font-size: 28px;
}


/* CONTENT */

.grip-page .finance-impact-content{
    min-width: 0;
}


.grip-page .finance-impact-content h3{
    margin: 0 0 8px;

    font-family: "Poppins", sans-serif;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;

    color: var(--green);
}


.grip-page .finance-impact-content p{
    max-width: 290px;

    margin: 0;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;

    color: #68736e;

    text-align: left;
}


/* NUMBER */

.grip-page .finance-impact-number{
    min-width: 100px;

    padding-left: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    border-left: 1px solid rgba(28, 80, 61, 0.10);

    color: var(--green);
}


.grip-page .finance-impact-number strong{
    font-family: "Poppins", sans-serif;

    font-size: 42px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -2px;
}


.grip-page .finance-impact-number span{
    margin: 2px 0 0 3px;

    font-family: "Poppins", sans-serif;

    font-size: 18px;
    font-weight: 600;

    line-height: 1;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .grip-page .finance-impact-grid{
        grid-template-columns: 1fr;
    }

    .grip-page .finance-impact-content p{
        max-width: 420px;
    }

}


@media (max-width: 600px) {

    .grip-page .finance-impact-card{
        min-height: auto;

        grid-template-columns: 54px minmax(0, 1fr);

        gap: 16px;

        padding: 22px 20px;
    }


    .grip-page .finance-impact-icon{
        width: 54px;
        height: 54px;

        font-size: 25px;
    }


    .grip-page .finance-impact-number{
        grid-column: 1 / -1;

        min-width: 0;

        margin-top: 4px;
        padding: 16px 0 0;

        justify-content: flex-start;

        border-left: 0;
        border-top: 1px solid rgba(28, 80, 61, 0.10);
    }


    .grip-page .finance-impact-number strong{
        font-size: 34px;
    }


    .grip-page .finance-impact-number span{
        font-size: 16px;
    }

}
.grip-page .gallery-thumb{

  position: relative;



  flex: 0 0 96px;



  aspect-ratio: 4 / 3;



  overflow: hidden;



  padding: 0;



  border: 2px solid transparent;



  border-radius: 9px;



  background: #edf3ed;



  cursor: pointer;



  opacity: 0.62;



  transform: translateZ(0);



  transition:

    border-color 0.2s ease,

    opacity 0.2s ease,

    transform 0.2s ease;

}



.grip-page .gallery-thumb:hover{
  opacity: 0.9;
  transform: translate3d(0, -1px, 0);

}



.grip-page .gallery-thumb.is-active{
  border-color: var(--green-dark);
  opacity: 1;
}



.grip-page .gallery-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.grip-page .gallery-thumb span{

  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 24px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.7);
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;

}



/* ========================================================

   BACK TO TOP

\======================================================== */



.grip-page .to-top{
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 900;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--red);
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition:

    opacity 0.2s ease,

    transform 0.2s ease;

}



.grip-page .to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);

}



/* ========================================================

   TABLET

\======================================================== */



@media (max-width: 1000px) {

  .grip-page .programme-grid.five{

    grid-template-columns: repeat(3, 1fr);

  }



  .grip-page .programme-grid.four{

    grid-template-columns: repeat(2, 1fr);

  }



  .grip-page .evidence-grid{

    grid-template-columns: repeat(2, 1fr);

  }

}



/* ========================================================

   TABLET / MOBILE

\======================================================== */



@media (max-width: 820px) {

  .grip-page .container{
    width: min(calc(100% - 38px), var(--container));
  }



  .grip-page .two-column{

    grid-template-columns: 1fr;
    gap: 32px;
  }



  .grip-page .flow-row.six{
    grid-template-columns: repeat(3, 1fr);
  }



  .grip-page .flow-row > div{
    border-bottom: 1px solid #5eae68;
  }



  .grip-page .stats-grid.three{

    grid-template-columns: 1fr;

  }



  .grip-page .gallery-heading{
    align-items: flex-start;

  }



  .grip-page .gallery-stage{

    min-height: 360px;
    aspect-ratio: 4 / 3;

  }



  .grip-page .gallery-caption{

    left: 20px;

    bottom: 19px;
  }



  .grip-page .gallery-stage-controls{

    right: 18px;
    bottom: 17px;

  }



  .grip-page .gallery-arrow{

    width: 42px;
    height: 42px;

  }

}



/* ========================================================

   MOBILE

\======================================================== */



@media (max-width: 620px) {

  .grip-page .container{
    width: min(calc(100% - 28px), var(--container));
  }



  .grip-page .page-intro{
    padding: 26px 0 20px;
  }



  .grip-page .section{
    padding: 44px 0;
  }



  .grip-page h1{
    font-size: 32px;
    letter-spacing: -1px;

  }



  .grip-page .section h2, .grip-page .section-vision h2{
    font-size: 28px;
  }



  .grip-page .breadcrumb{
    font-size: 11px;
  }


  .grip-page .intro-banner{
    padding: 19px;
  }



  .grip-page .intro-banner p{
    font-size: 14px;

  }



  .grip-page .programme-grid.four, .grip-page .programme-grid.five, .grip-page .evidence-grid{
    grid-template-columns: 1fr;
  }



  .grip-page .programme-card{
    min-height: auto;
  }



  .grip-page .flow-row.six{
    grid-template-columns: 1fr 1fr;
  }



  .grip-page .evidence-feature{
    display: block;
    padding: 23px;
  }



  .grip-page .evidence-feature > div{
    margin-bottom: 16px;
  }



  .grip-page .evidence-feature strong{
    font-size: 29px;
  }



  .grip-page .vision-banner{

    padding: 32px 25px;

  }



  /* Gallery */



  .grip-page .gallery-heading{

    display: block;
  }



  .grip-page .gallery-counter{

    margin-top: 15px;
    padding: 0;
    text-align: left;

  }



  .grip-page .gallery-carousel{

    margin-top: 22px;
    border-radius: 12px;

  }



  .grip-page .gallery-stage{

    min-height: 300px;
    aspect-ratio: 1 / 1;

  }



  .grip-page .gallery-caption{

    left: 15px;
    bottom: 15px;
    max-width: calc(100% - 126px);
    gap: 8px;
    font-size: 11px;

  }



  .grip-page .gallery-slide-number{

    width: 32px;

    height: 32px;

  }



  .grip-page .gallery-stage-controls{

    right: 13px;
    bottom: 13px;
    gap: 7px;

  }



  .grip-page .gallery-arrow{

    width: 38px;
    height: 38px;

  }



  .grip-page .gallery-arrow i{

    font-size: 18px;
  }



  .grip-page .gallery-footer{

    padding: 16px 14px 17px;

  }


  .grip-page .gallery-thumb{

    flex-basis: 76px;

  }

}



/* ========================================================

   VERY SMALL MOBILE

\======================================================== */



@media (max-width: 420px) {

  .grip-page .flow-row.six{

    grid-template-columns: 1fr;

  }



  .grip-page .flow-row > div{

    min-height: 70px;

  }



  .grip-page .mini-process > div{

    grid-template-columns: 48px 40px 1fr;

  }



  .grip-page .gallery-stage{

    min-height: 270px;

  }



  .grip-page .gallery-caption > span:last-child{

    display: none;

  }

}



/* ========================================================

   REDUCED MOTION

\======================================================== */



@media (prefers-reduced-motion: reduce) {

  .grip-page{

    scroll-behavior: auto;

  }



  .grip-page *, .grip-page *::before, .grip-page *::after{

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;

  }

}

@media (max-width: 900px) {

    .grip-page .stats-grid.four{

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 600px) {

    .grip-page .stats-grid.four{

        grid-template-columns: 1fr;

    }

}

/* ========================================================

   GEOGRAPHICAL OUTREACH

\======================================================== */



.grip-page .outreach-section{

    margin-top: 55px;

    padding-top: 38px;

    border-top: 1px solid var(--line);

}



.grip-page .outreach-heading{

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 28px;

}



.grip-page .outreach-heading > div:first-child{

    max-width: 760px;

}



.grip-page .outreach-heading h3{

    margin: 0 0 10px;

    font-size: 27px;

    line-height: 1.3;

    font-weight: 700;

}



.grip-page .outreach-heading p{

    margin: 0;

    color: #666666;

    font-size: 14px;

    line-height: 1.7;

}



.grip-page .outreach-start{

    flex: 0 0 auto;

    padding-left: 28px;

    border-left: 2px solid var(--green);

}



.grip-page .outreach-start span{

    display: block;

    margin-bottom: 3px;

    color: var(--muted);

    font-size: 12px;

}



.grip-page .outreach-start strong{

    display: block;

    color: var(--green-dark);

    font-family: "Poppins", sans-serif;

    font-size: 17px;

    font-weight: 700;

}



/* OUTREACH NUMBERS */



.grip-page .outreach-stats{

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    border: 1px solid #d8e6d9;

    background: #ffffff;

}



.grip-page .outreach-stat{

    min-height: 135px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 20px 12px;

    border-right: 1px solid #d8e6d9;

    text-align: center;

}



.grip-page .outreach-stat:last-child{

    border-right: 0;

}



.grip-page .outreach-stat i{

    color: var(--green-dark);

    font-size: 23px;

}



.grip-page .outreach-stat strong{

    color: var(--green-dark);

    font-family: "Poppins", sans-serif;

    font-size: 31px;

    line-height: 1;

    font-weight: 800;

}



.grip-page .outreach-stat span{

    color: #555555;

    font-size: 13px;

    line-height: 1.4;

}



.grip-page .outreach-stat-primary{

    background: var(--green-soft);

}



/* ========================================================

   RESPONSIVE

\======================================================== */



@media (max-width: 900px) {



    .grip-page .outreach-heading{

        align-items: flex-start;

        flex-direction: column;

    }



    .grip-page .outreach-start{

        padding-left: 0;

        padding-top: 12px;

        border-left: 0;

        border-top: 2px solid var(--green);

    }



    .grip-page .outreach-stats{

        grid-template-columns: repeat(3, 1fr);

    }



    .grip-page .outreach-stat:nth-child(3){

        border-right: 0;

    }



    .grip-page .outreach-stat:nth-child(-n/**/+3){

        border-bottom: 1px solid #d8e6d9;

    }



}



@media (max-width: 600px) {



    .grip-page .outreach-section{

        margin-top: 40px;

        padding-top: 30px;

    }



    .grip-page .outreach-stats{

        grid-template-columns: repeat(2, 1fr);

    }



    .grip-page .outreach-stat:nth-child(3){

        border-right: 1px solid #d8e6d9;

    }



    .grip-page .outreach-stat:nth-child(even){

        border-right: 0;

    }



    .grip-page .outreach-stat{

        border-bottom: 1px solid #d8e6d9;

    }



    .grip-page .outreach-stat:nth-last-child(-n/**/+2){

        border-bottom: 0;

    }



}

/* ========================================================

   ASSET CREATION

\======================================================== */



.grip-page .asset-distribution{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    margin-top: 36px;

}



.grip-page .asset-share-card{

    padding: 28px;

    border: 1px solid #dce8dd;

    border-radius: 14px;

    background: #ffffff;

}



.grip-page .asset-share-top{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

}



.grip-page .asset-share-card .card-icon{

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: var(--green-soft);

    color: var(--green-dark);

    font-size: 23px;

}



.grip-page .asset-share-top strong{

    color: var(--green-dark);

    font-family: "Poppins", sans-serif;

    font-size: 32px;

    line-height: 1;

    font-weight: 800;

}



.grip-page .asset-share-card h3{

    margin: 0 0 10px;

    font-size: 18px;

    font-weight: 700;

}



.grip-page .asset-share-card p{

    margin: 0;
    color: #666666;

    font-size: 13px;

    line-height: 1.7;

}



/* PROGRESS INDICATOR */



.grip-page .asset-progress{

    width: 100%;
    height: 5px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--green-light);

}



.grip-page .asset-progress span{

    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--green-dark);

}



/* ========================================================

   SHG HIGHLIGHT

\======================================================== */



.grip-page .shg-highlight{

    display: flex;

    align-items: center;

    gap: 24px;
    margin-top: 28px;

    padding: 26px 30px;

    border-left: 4px solid var(--green-dark);

    border-radius: 0 12px 12px 0;
    background: var(--green-soft);

}



.grip-page .shg-icon{

    flex: 0 0 58px;



    width: 58px;

    height: 58px;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    background: #ffffff;

    color: var(--green-dark);



    font-size: 26px;

}



.grip-page .shg-copy span{

    display: block;



    margin-bottom: 4px;



    color: var(--green-dark);



    font-size: 11px;

    font-weight: 700;



    text-transform: uppercase;

    letter-spacing: 0.08em;

}



.grip-page .shg-copy h3{

    margin: 0 0 5px;



    font-size: 20px;

    line-height: 1.4;

}



.grip-page .shg-copy p{

    max-width: 760px;
    margin: 0;
    color: #626262;

    font-size: 13px;

    line-height: 1.6;

}



/* ========================================================

   RESPONSIVE

\======================================================== */



@media (max-width: 900px) {



    .grip-page .asset-distribution{

        grid-template-columns: 1fr;

    }



}



@media (max-width: 600px) {



    .grip-page .asset-share-card{

        padding: 22px;

    }



    .grip-page .shg-highlight{

        align-items: flex-start;

        flex-direction: column;



        padding: 24px;

    }



}


/* ========================================================
   REQUESTED CONTENT / ALIGNMENT REFINEMENTS
======================================================== */

/* Larger, clearer body copy */
.grip-page{
    font-size: 17px;
}

/* All paragraph/body text is justified; headings/labels stay naturally aligned. */
.grip-page p, .grip-page .section-lead, .grip-page .content-copy p, .grip-page .ecosystem-copy p, .grip-page .support-copy, .grip-page .asset-share-card p, .grip-page .programme-card p, .grip-page .stat-card span, .grip-page .outreach-heading p, .grip-page .shg-copy p, .grip-page .gallery-footer > p, .grip-page .intro-banner p{
    text-align: justify;
    text-justify: inter-word;
}

/* Slightly larger section labels and general supporting copy */
.grip-page .section-kicker{
    font-size: 15px;
    letter-spacing: 0.55px;
}

.grip-page .section-lead{
    font-size: 17px;
    line-height: 1.85;
}

.grip-page .content-copy p, .grip-page .ecosystem-copy p, .grip-page .support-copy{
    font-size: 16.5px;
}

/* Larger icons throughout cards, flows and statistics */
.grip-page .card-icon{
    width: 58px;
    height: 58px;
    font-size: 30px;
}

.grip-page .asset-share-card .card-icon{
    width: 58px;
    height: 58px;
    font-size: 29px;
}

.grip-page .flow-row > div{
    min-height: 100px;
    gap: 10px;
    padding: 15px 12px;
    font-size: 14.5px;
    line-height: 1.45;
}

.grip-page .flow-row > div i{
    font-size: 29px;
}

.grip-page .stat-icon{
    font-size: 31px;
}

.grip-page .outreach-stat i{
    font-size: 29px;
}

.grip-page .shg-icon{
    flex-basis: 66px;
    width: 66px;
    height: 66px;
    font-size: 31px;
}

/* With Reinvestment removed, the growth cycle uses five balanced columns. */
.grip-page #growth .flow-row.six{
    grid-template-columns: repeat(5, 1fr);
}

/* Cleaner vertical and horizontal alignment */
.grip-page .two-column, .grip-page .two-column-tight, .grip-page .ecosystem-top{
    align-items: center;
}

.grip-page .programme-grid, .grip-page .stats-grid, .grip-page .asset-distribution, .grip-page .outreach-stats{
    align-items: stretch;
}

.grip-page .programme-card, .grip-page .stat-card, .grip-page .asset-share-card{
    height: 100%;
}

/* Point 7: multi-image ecosystem collage */
.grip-page .ecosystem-images{
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    grid-template-rows: repeat(2, 170px);
    gap: 12px;
    width: 100%;
}

.grip-page .ecosystem-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    background: #e9eee9;
}

.grip-page .ecosystem-image-main{
    grid-row: 1 / 3;
}

/* Number badges/counters are intentionally hidden/removed. */
.grip-page .gallery-counter, .grip-page .gallery-slide-number, .grip-page .gallery-thumb > span{
    display: none !important;
}

.grip-page .gallery-caption{
    left: 24px;
}

@media (max-width: 820px) {
    .grip-page #growth .flow-row.six{
        grid-template-columns: repeat(2, 1fr);
    }

    .grip-page .ecosystem-images{
        grid-template-rows: repeat(2, 155px);
    }
}

@media (max-width: 620px) {
    .grip-page{
        font-size: 16px;
    }

    .grip-page .section-kicker{
        font-size: 13.5px;
    }

    .grip-page .section-lead, .grip-page .content-copy p, .grip-page .ecosystem-copy p, .grip-page .support-copy{
        font-size: 15.5px;
    }

    .grip-page #growth .flow-row.six{
        grid-template-columns: 1fr;
    }

    .grip-page .ecosystem-images{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 230px 125px;
    }

    .grip-page .ecosystem-image-main{
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .grip-page .flow-row > div{
        min-height: 82px;
    }
}

/* ========================================================
   IMPACT — MORE THAN INCOME
   Balanced 6-card layout: 3 x 2 desktop, 2 x 3 tablet, 1 x 6 mobile
======================================================== */
.grip-page #impact .impact-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 1080px;
    margin: 34px auto 0;
}

.grip-page #impact .programme-card{
    min-height: 245px;
    padding: 30px 28px 28px;
    border: 1px solid #e4ebe5;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(24, 68, 43, 0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.grip-page #impact .programme-card::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--green-deep);
    opacity: 0.75;
}

.grip-page #impact .programme-card .card-icon{
    width: 64px;
    height: 64px;
    margin: 0 0 24px;
    border-radius: 16px;
    font-size: 31px;
    display: grid;
    place-items: center;
}

.grip-page #impact .programme-card h3{
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.35;
    text-align: left;
}

.grip-page #impact .programme-card p{
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    text-align: justify;
    text-justify: inter-word;
}

.grip-page #impact .programme-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(24, 68, 43, 0.10);
    border-color: #d2dfd4;
}

@media (max-width: 900px) {
    .grip-page #impact .impact-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .grip-page #impact .impact-grid{
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 26px;
    }

    .grip-page #impact .programme-card{
        min-height: 0;
        padding: 24px 22px;
    }

    .grip-page #impact .programme-card .card-icon{
        width: 58px;
        height: 58px;
        margin-bottom: 18px;
        font-size: 28px;
    }

    .grip-page #impact .programme-card h3{
        font-size: 18px;
    }
}


/* =======================================================================
   BANDHAN-INSPIRED GRIP REFINEMENT · October 2026
   Reference: bandhan.org/bandhan-financial-literacy-programme/
   Yellow: sampled from the supplied statistics-bar screenshot (#e4af0b).
   The photographic header is supplied in images/bandhan-colour-header.jpg.
   All existing GRIP programme data and carousel behaviour are retained.
   ======================================================================= */
.grip-page{
  --yellow: #e4af0b;
  --yellow-deep: #ba8400;
  --yellow-pale: #fff3cf;
  --yellow-soft: #fffaf0;
  --green: var(--yellow);
  --green-dark: #9a7106;
  --green-deep: #7c5b04;
  --green-light: #f8e4a8;
  --green-soft: #fff6db;
  --ink: #0b0b0b;
  --text: #252525;
  --muted: #656565;
  --soft: #f7f7f7;
  --line: #e4e4e4;
  --container: 1386px;
}
.grip-page{ scroll-padding-top: 24px; }
.grip-page{ overflow-x: hidden; font-size: 17px; line-height: 1.82; }
.grip-page .container{ width: min(calc(100% - 72px), var(--container)); }
.grip-page h1, .grip-page h2, .grip-page h3, .grip-page strong{ overflow-wrap: break-word; }
.grip-page h1{ max-width: none; font-size: clamp(32px, 3.35vw, 54px); letter-spacing: -1.7px; line-height: 1.2; }
.grip-page a:focus-visible, .grip-page button:focus-visible{ outline: 3px solid #ca8d00; outline-offset: 4px; }

/* Cropped from the reference artwork supplied in the user's screenshot. */
.grip-page .programme-top-art{ width: 100%; height: 185px; overflow: hidden; background: #b96e22; }
.grip-page .programme-top-art img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.grip-page .page-intro{ padding: 34px 0 22px; }
.grip-page .breadcrumb{ width: fit-content; max-width: 100%; margin: 0 0 37px; padding: 0 0 8px; border-bottom: 1px solid #ddd; font-size: 18px; line-height: 1.6; white-space: normal; overflow: visible; }
.grip-page .breadcrumb .current{ margin-left: 10px; border-bottom: 1px solid #f06d3c; padding-bottom: 10px; }
.grip-page .page-intro h1{ margin: 0 0 29px; }
.grip-page .intro-banner{ padding: 27px 31px; background: var(--yellow); color: #111; }
.grip-page .intro-banner p{ max-width: 1260px; font-size: 18px; line-height: 1.95; }
.grip-page .intro-banner strong{ color: inherit; }

/* Broad, white editorial layout rather than a small card-based landing page. */
.grip-page .section{ padding: 62px 0; }
.grip-page .section-soft{ background: #f7f7f7; }
.grip-page .section-kicker{ color: #a16b04; font-size: 13px; font-weight: 700; letter-spacing: 1.05px; }
.grip-page .section h2, .grip-page .section-vision h2{ max-width: 1050px; font-size: clamp(29px, 3.1vw, 43px); }
.grip-page .section-lead{ max-width: 1000px; font-size: 17px; line-height: 1.84; }
.grip-page .content-copy p, .grip-page .ecosystem-copy p, .grip-page .support-copy{ font-size: 17px; line-height: 1.93; }
.grip-page .two-column{ align-items: center; gap: clamp(24px, 4.2vw, 66px); }
.grip-page .real-img, .grip-page .real-img-wide, .grip-page .multiplier-image img, .grip-page .ecosystem-images img{ border-radius: 0 !important; }

/* Decorative clipped concentric circle: genuine CSS, no missing asset. */
.grip-page #model{ position: relative; isolation: isolate; overflow: hidden; }
.grip-page #model::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: -218px;
  top: 54px;
  width: 350px;
  height: 350px;
  border: 74px solid #73c27c;
  border-radius: 50%;
  pointer-events: none;
}
.grip-page #model > .container{ position: relative; z-index: 1; }

/* Handcrafted little leaf bullets used by the original reference site. */
.grip-page .leaf-list{ list-style: none; margin: 25px 0 0; padding: 0; }
.grip-page .leaf-list li{ position: relative; padding-left: 30px; margin: 0 0 14px; line-height: 1.75; font-size: 16px; color: #2b2b2b; }
.grip-page .leaf-list li::before{
  content: ""; position: absolute; left: 0; top: 6px; width: 17px; height: 18px;
  background: #70aa60;
  clip-path: polygon(91% 0, 56% 9%, 29% 16%, 9% 34%, 6% 61%, 19% 78%, 34% 71%, 45% 44%, 61% 30%, 39% 67%, 34% 100%, 42% 100%, 48% 75%, 70% 54%, 82% 29%);
}
.grip-page .leaf-list--inline{ display: flex; flex-wrap: wrap; column-gap: 32px; row-gap: 0; margin: 8px 0 29px; }
.grip-page .leaf-list--inline li{ margin-bottom: 8px; }

/* Reference-style six-column statistics ribbon. Values remain GRIP's own. */
.grip-page .outreach-section{ border-top: 1px solid #ececec; padding-top: 42px; margin-top: 62px; }
.grip-page .outreach-heading h3{ font-size: 30px; }
.grip-page .outreach-start{ border-color: var(--yellow); }
.grip-page .outreach-start strong{ color: #151515; }
.grip-page .outreach-stats{ background: var(--yellow); border: 0; grid-template-columns: repeat(6,minmax(0,1fr)); padding: 27px 18px; }
.grip-page .outreach-stat{ background: transparent !important; border-right: 1px solid #c57a11 !important; border-bottom: none !important; min-height: 111px; padding: 7px 10px; gap: 7px; }
.grip-page .outreach-stat:last-child{ border-right: 0 !important; }
.grip-page .outreach-stat i{ display: none; }
.grip-page .outreach-stat strong{ color: #070707; font-weight: 800; font-size: clamp(23px,2.1vw,30px); line-height: 1.2; }
.grip-page .outreach-stat span{ color: #101010; font-size: 15px; line-height: 1.4; }

/* Gold highlight treatment across preexisting sections, never white text on yellow. */
.grip-page .flow-title, .grip-page .mini-process, .grip-page .gallery-progress span, .grip-page .asset-progress span{ background: var(--yellow) !important; color: #111 !important; }
.grip-page .flow-title, .grip-page .flow-title *{ color: #111 !important; }
.grip-page .flow-row > div i, .grip-page .mini-process i{ color: #a27206 !important; }
.grip-page .programme-card, .grip-page .asset-share-card, .grip-page .finance-impact-card{ border-radius: 0 !important; border-color: #eadfbe !important; box-shadow: none !important; }
.grip-page .card-icon, .grip-page .finance-impact-icon, .grip-page .shg-icon, .grip-page .stat-icon{ color: #916605 !important; background: var(--yellow-pale) !important; }
.grip-page .asset-share-top strong, .grip-page .finance-impact-number, .grip-page .stat-card strong{ color: #1b1b1b !important; }
.grip-page .shg-highlight{ background: var(--yellow-soft); border-left-color: var(--yellow); border-radius: 0; }
.grip-page .gallery-section{ background: #fff; }
.grip-page .gallery-counter{ color: #202020; }
.grip-page .gallery-thumb.is-active{ border-color: var(--yellow) !important; }
.grip-page .gallery-arrow:hover{ background: var(--yellow) !important; color: #101010 !important; }
.grip-page .btn-dark{ background: #2d2d2d; }
.grip-page .to-top{ background: #ed242b !important; border-radius: 0 !important; }
.grip-page .data-footnote{ text-align: right; padding-top: 0; font-size: 13px; color: #666; }
.grip-page .gallery-empty{ padding: 28px; border: 1px solid #e8dbb3; background: #fffbf1; }

@media (min-width: 1250px) {
  .grip-page .page-intro{ padding-top: 37px; }
  .grip-page #need > .container > .two-column{ grid-template-columns: 1.25fr .95fr; }
}
@media (max-width: 1000px) {
  .grip-page .outreach-stats{ padding: 18px 15px; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .grip-page .outreach-stat:nth-child(3){ border-right: 0 !important; }
  .grip-page .outreach-stat:nth-child(-n/**/+3){ border-bottom: 1px solid #c57a11 !important; }
  .grip-page .programme-top-art{ height: 148px; }
}
@media (max-width: 700px) {
  .grip-page .container{ width: min(calc(100% - 36px), var(--container)); }
  .grip-page .programme-top-art{ height: 110px; }
  .grip-page .breadcrumb{ font-size: 13px; margin-bottom: 22px; }
  .grip-page .breadcrumb .current{ margin-left: 3px; }
  .grip-page .page-intro{ padding: 26px 0 18px; }
  .grip-page .page-intro h1{ font-size: clamp(29px,7vw,41px); line-height: 1.2; letter-spacing: -.8px; }
  .grip-page .intro-banner{ padding: 20px 21px; }
  .grip-page .intro-banner p{ font-size: 15px; line-height: 1.8; }
  .grip-page .section{ padding: 39px 0; }
  .grip-page .content-copy p, .grip-page .ecosystem-copy p, .grip-page .support-copy, .grip-page .section-lead{ font-size: 15px; }
  .grip-page .leaf-list li{ font-size: 15px; }
  .grip-page #model::before{ width: 220px; height: 220px; border-width: 46px; left: -160px; top: 30px; }
  .grip-page .outreach-stats{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; padding: 14px 8px; }
  .grip-page .outreach-stat, .grip-page .outreach-stat:nth-child(3){ border-right: 1px solid #c57a11 !important; border-bottom: 1px solid #c57a11 !important; min-height: 110px; }
  .grip-page .outreach-stat:nth-child(even){ border-right: 0 !important; }
  .grip-page .outreach-stat:nth-last-child(-n/**/+2){ border-bottom: 0 !important; }
  .grip-page .outreach-stat strong{ font-size: 25px; }
  .grip-page .outreach-stat span{ font-size: 13px; }
  .grip-page .outreach-heading{ gap: 17px; }
  .grip-page .outreach-heading h3{ font-size: 24px; }
  .grip-page .leaf-list--inline{ display: block; }
}
@media (max-width: 400px) {
  .grip-page .outreach-stats{ padding: 12px 4px; }
  .grip-page .outreach-stat{ padding-left: 5px; padding-right: 5px; }
  .grip-page .outreach-stat strong{ font-size: 22px; }
}

/* Final contrast and full-width refinements */
.grip-page .vision-banner{ background: var(--yellow); color: #121212; }
.grip-page .vision-banner h2, .grip-page .vision-banner p{ color: #151515; }
.grip-page .section-kicker.light{ color: #4f3800; }
.grip-page .mini-process-end span{ color: #111; }
.grip-page .gallery-section{ border: 0; }
.grip-page .evidence-feature strong{ color: #8a6200; }
@media (min-width: 1001px) {
  .grip-page .outreach-stats{
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding-left: max(22px, calc((100vw - var(--container))/2));
    padding-right: max(22px, calc((100vw - var(--container))/2));
  }
}