Design patterns · Section 05 of 14

Mission & values

Ten layouts for what the foundation is here to do and the principles behind the work. Click View code under any design to see its HTML, or Copy HTML to paste it into a page.

Mission & values · Design 01

Three Icon Cards

A centred heading and the three-part purpose as centred cards with round icons, finished by a text link.

What we are here to do

Supporting people. Strengthening communities. Creating opportunities.

Supporting people

Direct, practical help with essential needs: food, clean water, medical care and education.
Strengthening communities

Work that benefits whole households and neighbourhoods, not only individuals.
Creating opportunities

Longer-term support that helps people move beyond immediate hardship.

About the foundation

<section aria-labelledby="features-01-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[46rem] text-center">
      <h2 id="features-01-title" class="t-h2">What we are here to do</h2>
      <p class="mx-auto mt-4 text-balance font-display text-[1.25rem] font-semibold leading-snug text-water sm:text-[1.375rem]">Supporting people. Strengthening communities. Creating opportunities.</p>
    </div>
    <ul class="mt-12 grid gap-5 md:grid-cols-3 lg:mt-14 lg:gap-6">
      <li class="card card-hover flex flex-col items-center px-6 py-8 text-center sm:px-8 sm:py-10">
        <span class="grid size-16 place-items-center rounded-full bg-water text-white ring-8 ring-water-tint"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
        <h3 class="t-h3 mt-7">Supporting people</h3>
        <p class="mt-2 max-w-[32ch] text-[15px] leading-relaxed text-slate">Direct, practical help with essential needs: food, clean water, medical care and education.</p>
      </li>
      <li class="card card-hover flex flex-col items-center px-6 py-8 text-center sm:px-8 sm:py-10">
        <span class="grid size-16 place-items-center rounded-full bg-water text-white ring-8 ring-water-tint"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M64.12,147.8a4,4,0,0,1-4,4.2H16a8,8,0,0,1-7.8-6.17,8.35,8.35,0,0,1,1.62-6.93A67.79,67.79,0,0,1,37,117.51a40,40,0,1,1,66.46-35.8,3.94,3.94,0,0,1-2.27,4.18A64.08,64.08,0,0,0,64,144C64,145.28,64,146.54,64.12,147.8Zm182-8.91A67.76,67.76,0,0,0,219,117.51a40,40,0,1,0-66.46-35.8,3.94,3.94,0,0,0,2.27,4.18A64.08,64.08,0,0,1,192,144c0,1.28,0,2.54-.12,3.8a4,4,0,0,0,4,4.2H240a8,8,0,0,0,7.8-6.17A8.33,8.33,0,0,0,246.17,138.89Zm-89,43.18a48,48,0,1,0-58.37,0A72.13,72.13,0,0,0,65.07,212,8,8,0,0,0,72,224H184a8,8,0,0,0,6.93-12A72.15,72.15,0,0,0,157.19,182.07Z"></path></svg></span>
        <h3 class="t-h3 mt-7">Strengthening communities</h3>
        <p class="mt-2 max-w-[32ch] text-[15px] leading-relaxed text-slate">Work that benefits whole households and neighbourhoods, not only individuals.</p>
      </li>
      <li class="card card-hover flex flex-col items-center px-6 py-8 text-center sm:px-8 sm:py-10">
        <span class="grid size-16 place-items-center rounded-full bg-water text-white ring-8 ring-water-tint"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path></svg></span>
        <h3 class="t-h3 mt-7">Creating opportunities</h3>
        <p class="mt-2 max-w-[32ch] text-[15px] leading-relaxed text-slate">Longer-term support that helps people move beyond immediate hardship.</p>
      </li>
    </ul>
    <p class="mt-10 text-center"><a class="link t-label" href="about.html">About the foundation</a></p>
  </div>
</section>

Mission & values · Design 02

Hairline Value Grid

Heading on the left, the four working commitments in a 2×2 grid of white tiles divided by fine lines.

Our values

How we work

Four commitments that shape every decision.

About the foundation

Dignity first

People are helped, photographed and described with respect. We do not use images or language that exploit hardship.
Practical help

Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies.
Directly delivered

Help goes to the families and communities who need it, without conditions attached.
Open about our work

Our registration details are public, and updates on completed work are published as they are verified.

<section aria-labelledby="features-02-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid gap-10 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-4 lg:pt-4">
      <p class="t-label text-water">Our values</p>
      <h2 id="features-02-title" class="t-h2 mt-3">How we work</h2>
      <p class="t-lead mt-4 text-slate">Four commitments that shape every decision.</p>
      <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px border border-ink text-ink hover:bg-smoke h-12 px-6 text-base mt-8" href="about.html">About the foundation</a>
    </div>
    <ul class="grid gap-px overflow-hidden rounded-2xl border border-line bg-line sm:grid-cols-2 lg:col-span-8">
      <li class="bg-white p-7 sm:p-9">
        <span class="grid size-14 place-items-center rounded-full border border-line text-water"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
        <h3 class="t-h3 mt-6">Dignity first</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-slate">People are helped, photographed and described with respect. We do not use images or language that exploit hardship.</p>
      </li>
      <li class="bg-white p-7 sm:p-9">
        <span class="grid size-14 place-items-center rounded-full border border-line text-water"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.35,44L178.57,92.29l-80.35-44Zm0,88L47.65,76,81.56,57.43l80.35,44Zm88,55.85h0l-80,43.79V133.83l32-17.51V152a8,8,0,0,0,16,0V107.56l32-17.51v85.76Z"></path></svg></span>
        <h3 class="t-h3 mt-6">Practical help</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-slate">Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies.</p>
      </li>
      <li class="bg-white p-7 sm:p-9">
        <span class="grid size-14 place-items-center rounded-full border border-line text-water"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l40-40,15.08-15.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41Zm-41.87,41.86L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm-25.72,34.8a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z"></path></svg></span>
        <h3 class="t-h3 mt-6">Directly delivered</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-slate">Help goes to the families and communities who need it, without conditions attached.</p>
      </li>
      <li class="bg-white p-7 sm:p-9">
        <span class="grid size-14 place-items-center rounded-full border border-line text-water"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm-34.32,69.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
        <h3 class="t-h3 mt-6">Open about our work</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-slate">Our registration details are public, and updates on completed work are published as they are verified.</p>
      </li>
    </ul>
  </div>
</section>

Mission & values · Design 03

Icon List With Photo

A portrait photo on a marigold block on the left, the three aims as an icon list with dividers on the right.

A man in shalwar kameez working the handle of a hand pump in a field

Our purpose

What we are here to do

Practical help with essential needs, for people and communities facing poverty and hardship in Pakistan and the UK.

Supporting people
Direct, practical help with essential needs: food, clean water, medical care and education.
Strengthening communities
Work that benefits whole households and neighbourhoods, not only individuals.
Creating opportunities
Longer-term support that helps people move beyond immediate hardship.

Working in Pakistan and the United Kingdom

<section aria-labelledby="features-03-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid items-center gap-14 lg:grid-cols-12 lg:gap-20">
    <div class="relative pb-4 pl-4 sm:pb-6 sm:pl-6 lg:col-span-5">
      <div class="absolute bottom-0 left-0 h-3/4 w-3/4 rounded-2xl bg-marigold" aria-hidden="true"></div>
      <div class="relative aspect-[4/3] overflow-hidden rounded-2xl bg-mist shadow-[var(--shadow-card-hover)] sm:aspect-[4/5]">
        <img src="images/water-hand-pump-man.jpg" srcset="images/webp/water-hand-pump-man-640.webp 640w, images/webp/water-hand-pump-man-1080.webp 1080w" sizes="(min-width: 1024px) 40vw, 100vw" alt="A man in shalwar kameez working the handle of a hand pump in a field" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 20%">
      </div>
    </div>
    <div class="lg:col-span-7">
      <p class="t-label text-water">Our purpose</p>
      <h2 id="features-03-title" class="t-h2 mt-3">What we are here to do</h2>
      <p class="t-lead mt-4 max-w-[52ch] text-slate">Practical help with essential needs, for people and communities facing poverty and hardship in Pakistan and the UK.</p>
      <ul class="mt-8 divide-y divide-line border-y border-line">
        <li class="flex gap-5 py-6">
          <span class="grid size-13 shrink-0 place-items-center rounded-xl bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
          <div><h3 class="t-h3">Supporting people</h3><p class="mt-1.5 text-[15px] leading-relaxed text-slate">Direct, practical help with essential needs: food, clean water, medical care and education.</p></div>
        </li>
        <li class="flex gap-5 py-6">
          <span class="grid size-13 shrink-0 place-items-center rounded-xl bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M64.12,147.8a4,4,0,0,1-4,4.2H16a8,8,0,0,1-7.8-6.17,8.35,8.35,0,0,1,1.62-6.93A67.79,67.79,0,0,1,37,117.51a40,40,0,1,1,66.46-35.8,3.94,3.94,0,0,1-2.27,4.18A64.08,64.08,0,0,0,64,144C64,145.28,64,146.54,64.12,147.8Zm182-8.91A67.76,67.76,0,0,0,219,117.51a40,40,0,1,0-66.46-35.8,3.94,3.94,0,0,0,2.27,4.18A64.08,64.08,0,0,1,192,144c0,1.28,0,2.54-.12,3.8a4,4,0,0,0,4,4.2H240a8,8,0,0,0,7.8-6.17A8.33,8.33,0,0,0,246.17,138.89Zm-89,43.18a48,48,0,1,0-58.37,0A72.13,72.13,0,0,0,65.07,212,8,8,0,0,0,72,224H184a8,8,0,0,0,6.93-12A72.15,72.15,0,0,0,157.19,182.07Z"></path></svg></span>
          <div><h3 class="t-h3">Strengthening communities</h3><p class="mt-1.5 text-[15px] leading-relaxed text-slate">Work that benefits whole households and neighbourhoods, not only individuals.</p></div>
        </li>
        <li class="flex gap-5 py-6">
          <span class="grid size-13 shrink-0 place-items-center rounded-xl bg-water-tint text-water"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path></svg></span>
          <div><h3 class="t-h3">Creating opportunities</h3><p class="mt-1.5 text-[15px] leading-relaxed text-slate">Longer-term support that helps people move beyond immediate hardship.</p></div>
        </li>
      </ul>
      <p class="mt-6 inline-flex items-center gap-2 font-display text-[15px] font-semibold text-ink"><span class="text-water"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path></svg></span>Working in Pakistan and the United Kingdom</p>
    </div>
  </div>
</section>

Mission & values · Design 04

Numbered Commitments

An editorial list: large teal numbers, titles and descriptions laid out in ruled rows.

How we work

Four commitments that shape every decision, in Pakistan and in the UK.

Dignity first

People are helped, photographed and described with respect. We do not use images or language that exploit hardship.
Practical help

Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies.
Directly delivered

Help goes to the families and communities who need it, without conditions attached.
Open about our work

Our registration details are public, and updates on completed work are published as they are verified. See the impact page

<section aria-labelledby="features-04-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-5 border-b-2 border-ink pb-8 lg:grid-cols-12 lg:items-end lg:gap-10 lg:pb-10">
      <h2 id="features-04-title" class="t-display lg:col-span-7">How we work</h2>
      <p class="t-lead text-slate lg:col-span-5">Four commitments that shape every decision, in Pakistan and in the UK.</p>
    </div>
    <ol class="divide-y divide-line">
      <li class="grid gap-3 py-8 md:grid-cols-12 md:gap-8 lg:py-10">
        <span aria-hidden="true" class="font-display text-[2.5rem] font-bold leading-none tracking-[-0.02em] text-water md:col-span-2 lg:text-[3.5rem]">01</span>
        <h3 class="t-h3 md:col-span-4 md:pt-1 lg:pt-3">Dignity first</h3>
        <p class="max-w-[60ch] text-slate md:col-span-6 md:pt-1 lg:pt-3">People are helped, photographed and described with respect. We do not use images or language that exploit hardship.</p>
      </li>
      <li class="grid gap-3 py-8 md:grid-cols-12 md:gap-8 lg:py-10">
        <span aria-hidden="true" class="font-display text-[2.5rem] font-bold leading-none tracking-[-0.02em] text-water md:col-span-2 lg:text-[3.5rem]">02</span>
        <h3 class="t-h3 md:col-span-4 md:pt-1 lg:pt-3">Practical help</h3>
        <p class="max-w-[60ch] text-slate md:col-span-6 md:pt-1 lg:pt-3">Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies.</p>
      </li>
      <li class="grid gap-3 py-8 md:grid-cols-12 md:gap-8 lg:py-10">
        <span aria-hidden="true" class="font-display text-[2.5rem] font-bold leading-none tracking-[-0.02em] text-water md:col-span-2 lg:text-[3.5rem]">03</span>
        <h3 class="t-h3 md:col-span-4 md:pt-1 lg:pt-3">Directly delivered</h3>
        <p class="max-w-[60ch] text-slate md:col-span-6 md:pt-1 lg:pt-3">Help goes to the families and communities who need it, without conditions attached.</p>
      </li>
      <li class="grid gap-3 py-8 md:grid-cols-12 md:gap-8 lg:py-10">
        <span aria-hidden="true" class="font-display text-[2.5rem] font-bold leading-none tracking-[-0.02em] text-water md:col-span-2 lg:text-[3.5rem]">04</span>
        <h3 class="t-h3 md:col-span-4 md:pt-1 lg:pt-3">Open about our work</h3>
        <p class="max-w-[60ch] text-slate md:col-span-6 md:pt-1 lg:pt-3">Our registration details are public, and updates on completed work are published as they are verified. <a class="link" href="impact.html">See the impact page</a></p>
      </li>
    </ol>
  </div>
</section>

Mission & values · Design 05

Alternating Rows

Two image and text rows that swap sides: immediate needs, then lasting foundations, each with its causes.

From immediate needs to lasting foundations

Five areas of practical work, from a family's immediate needs to foundations that keep helping.

Men cooking a large pot of food over an open fire outdoors

Immediate needs

Practical help when a family cannot wait

Food distribution
Food parcels with staple items for families facing hunger.
Medical assistance
Consultations, medicines, tests and treatment.
Emergency relief
Food, water, shelter and medicine in an emergency.

A boy pumping water from a green hand pump into a bucket

Lasting foundations

Support that keeps helping after the first day

Clean water
Hand pumps and their installation. One pump can serve a household or a cluster of homes.
Education
Fees, uniforms, books and stationery: the costs that keep children in school.

How each cause works

<section aria-labelledby="features-05-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="mx-auto max-w-[60ch] text-center">
      <h2 id="features-05-title" class="t-h2">From immediate needs to lasting foundations</h2>
      <p class="t-lead mt-4 text-slate">Five areas of practical work, from a family's immediate needs to foundations that keep helping.</p>
    </div>
    <div class="mt-12 grid gap-14 lg:mt-16 lg:gap-20">
      <div class="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist"><img src="images/food-community-cooking.jpg" srcset="images/webp/food-community-cooking-640.webp 640w, images/webp/food-community-cooking-1080.webp 1080w" sizes="(min-width: 1024px) 50vw, 100vw" alt="Men cooking a large pot of food over an open fire outdoors" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 60%"></div>
        <div>
          <p class="t-label text-water">Immediate needs</p>
          <h3 class="mt-2 font-display text-[1.75rem] font-bold leading-tight tracking-[-0.01em] sm:text-[2rem]">Practical help when a family cannot wait</h3>
          <ul class="mt-6 grid gap-3">
            <li class="flex gap-4 rounded-xl bg-white p-4 sm:p-5"><span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span><div><h4 class="font-display text-[17px] font-semibold">Food distribution</h4><p class="text-[15px] leading-relaxed text-slate">Food parcels with staple items for families facing hunger.</p></div></li>
            <li class="flex gap-4 rounded-xl bg-white p-4 sm:p-5"><span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span><div><h4 class="font-display text-[17px] font-semibold">Medical assistance</h4><p class="text-[15px] leading-relaxed text-slate">Consultations, medicines, tests and treatment.</p></div></li>
            <li class="flex gap-4 rounded-xl bg-white p-4 sm:p-5"><span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span><div><h4 class="font-display text-[17px] font-semibold">Emergency relief</h4><p class="text-[15px] leading-relaxed text-slate">Food, water, shelter and medicine in an emergency.</p></div></li>
          </ul>
        </div>
      </div>
      <div class="grid items-center gap-8 lg:grid-cols-2 lg:gap-16">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist lg:order-last"><img src="images/water-hand-pump-boy.jpg" srcset="images/webp/water-hand-pump-boy-640.webp 640w, images/webp/water-hand-pump-boy-1080.webp 1080w" sizes="(min-width: 1024px) 50vw, 100vw" alt="A boy pumping water from a green hand pump into a bucket" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 65% 25%"></div>
        <div>
          <p class="t-label text-water">Lasting foundations</p>
          <h3 class="mt-2 font-display text-[1.75rem] font-bold leading-tight tracking-[-0.01em] sm:text-[2rem]">Support that keeps helping after the first day</h3>
          <ul class="mt-6 grid gap-3">
            <li class="flex gap-4 rounded-xl bg-white p-4 sm:p-5"><span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span><div><h4 class="font-display text-[17px] font-semibold">Clean water</h4><p class="text-[15px] leading-relaxed text-slate">Hand pumps and their installation. One pump can serve a household or a cluster of homes.</p></div></li>
            <li class="flex gap-4 rounded-xl bg-white p-4 sm:p-5"><span class="mt-0.5 grid size-7 shrink-0 place-items-center rounded-full bg-water text-white"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span><div><h4 class="font-display text-[17px] font-semibold">Education</h4><p class="text-[15px] leading-relaxed text-slate">Fees, uniforms, books and stationery: the costs that keep children in school.</p></div></li>
          </ul>
          <a class="link t-label mt-7" href="causes.html">How each cause works</a>
        </div>
      </div>
    </div>
  </div>
</section>

Mission & values · Design 06

Ink Principle Cards

A dark section with a split heading and three translucent cards for the rules behind every published update.

How we report

We publish what has been done, not what we hope to do

Three rules for everything that appears on the impact page, where updates are added as work is completed and verified.

Verified before published

A figure is published with its period and its source, once the work it describes is complete.
Consent before stories

People are named or pictured in a story only when they have agreed to it, and never in a way that trades on hardship.
Places, not vague claims

Updates say where and when the work happened, so supporters can see exactly what their gifts became.

Visit the impact page

<section aria-labelledby="features-06-title" class="bg-ink py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-5 lg:grid-cols-12 lg:items-end lg:gap-10">
      <div class="lg:col-span-7">
        <p class="t-label text-marigold">How we report</p>
        <h2 id="features-06-title" class="t-h2 mt-3 max-w-[20ch]">We publish what has been done, not what we hope to do</h2>
      </div>
      <p class="t-lead text-white/80 lg:col-span-5">Three rules for everything that appears on the impact page, where updates are added as work is completed and verified.</p>
    </div>
    <ul class="mt-12 grid gap-5 md:grid-cols-3 lg:mt-14">
      <li class="flex flex-col rounded-2xl border border-white/10 bg-white/5 p-7 sm:p-8">
        <div class="flex items-center justify-between"><span class="grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1,0-16h8V136a8,8,0,0,1,8-8H72a8,8,0,0,1,8,8v64H96V88a8,8,0,0,1,8-8h32a8,8,0,0,1,8,8V200h16V40a8,8,0,0,1,8-8h40a8,8,0,0,1,8,8V200h8A8,8,0,0,1,232,208Z"></path></svg></span><span aria-hidden="true" class="font-display text-[15px] font-semibold text-on-dark-muted">01</span></div>
        <h3 class="t-h3 mt-7">Verified before published</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/80">A figure is published with its period and its source, once the work it describes is complete.</p>
      </li>
      <li class="flex flex-col rounded-2xl border border-white/10 bg-white/5 p-7 sm:p-8">
        <div class="flex items-center justify-between"><span class="grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm-44,76a36,36,0,1,1-36-36A36,36,0,0,1,164,132Z"></path></svg></span><span aria-hidden="true" class="font-display text-[15px] font-semibold text-on-dark-muted">02</span></div>
        <h3 class="t-h3 mt-7">Consent before stories</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/80">People are named or pictured in a story only when they have agreed to it, and never in a way that trades on hardship.</p>
      </li>
      <li class="flex flex-col rounded-2xl border border-white/10 bg-white/5 p-7 sm:p-8">
        <div class="flex items-center justify-between"><span class="grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg></span><span aria-hidden="true" class="font-display text-[15px] font-semibold text-on-dark-muted">03</span></div>
        <h3 class="t-h3 mt-7">Places, not vague claims</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/80">Updates say where and when the work happened, so supporters can see exactly what their gifts became.</p>
      </li>
    </ul>
    <a class="link-on-dark t-label mt-10" href="impact.html">Visit the impact page</a>
  </div>
</section>

Mission & values · Design 07

Tabbed Aims

CSS-only tabs (radio inputs and :has) switch between the three aims, each with a photo, related causes and a button.

What we are here to do

Supporting people. Strengthening communities. Creating opportunities. Choose one to see what it means in practice.

Supporting people Strengthening communities Creating opportunities

<section aria-labelledby="features-07-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="grid gap-5 lg:grid-cols-12 lg:items-end lg:gap-10">
      <h2 id="features-07-title" class="t-h2 lg:col-span-6">What we are here to do</h2>
      <p class="t-lead text-slate lg:col-span-6">Supporting people. Strengthening communities. Creating opportunities. Choose one to see what it means in practice.</p>
    </div>
    <div class="group/tabs mt-10 lg:mt-12">
      <div class="grid gap-2 rounded-2xl bg-smoke p-2 sm:grid-cols-3">
        <label class="flex cursor-pointer items-center gap-3 rounded-xl px-4 py-3.5 font-display text-[16px] font-semibold text-ink transition-colors hover:bg-white has-[:checked]:bg-water has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-water"><input type="radio" name="features-07-aim" id="features-07-aim-1" class="peer sr-only" checked><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg>Supporting people</label>
        <label class="flex cursor-pointer items-center gap-3 rounded-xl px-4 py-3.5 font-display text-[16px] font-semibold text-ink transition-colors hover:bg-white has-[:checked]:bg-water has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-water"><input type="radio" name="features-07-aim" id="features-07-aim-2" class="peer sr-only"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M64.12,147.8a4,4,0,0,1-4,4.2H16a8,8,0,0,1-7.8-6.17,8.35,8.35,0,0,1,1.62-6.93A67.79,67.79,0,0,1,37,117.51a40,40,0,1,1,66.46-35.8,3.94,3.94,0,0,1-2.27,4.18A64.08,64.08,0,0,0,64,144C64,145.28,64,146.54,64.12,147.8Zm182-8.91A67.76,67.76,0,0,0,219,117.51a40,40,0,1,0-66.46-35.8,3.94,3.94,0,0,0,2.27,4.18A64.08,64.08,0,0,1,192,144c0,1.28,0,2.54-.12,3.8a4,4,0,0,0,4,4.2H240a8,8,0,0,0,7.8-6.17A8.33,8.33,0,0,0,246.17,138.89Zm-89,43.18a48,48,0,1,0-58.37,0A72.13,72.13,0,0,0,65.07,212,8,8,0,0,0,72,224H184a8,8,0,0,0,6.93-12A72.15,72.15,0,0,0,157.19,182.07Z"></path></svg>Strengthening communities</label>
        <label class="flex cursor-pointer items-center gap-3 rounded-xl px-4 py-3.5 font-display text-[16px] font-semibold text-ink transition-colors hover:bg-white has-[:checked]:bg-water has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-water"><input type="radio" name="features-07-aim" id="features-07-aim-3" class="peer sr-only"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path></svg>Creating opportunities</label>
      </div>
      <div class="mt-8 hidden items-center gap-8 group-has-[#features-07-aim-1:checked]/tabs:grid lg:mt-10 lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist"><img src="images/medical-clinic-blood-pressure.jpg" srcset="images/webp/medical-clinic-blood-pressure-640.webp 640w, images/webp/medical-clinic-blood-pressure-1080.webp 1080w" sizes="(min-width: 1024px) 50vw, 100vw" alt="A doctor taking a patient's blood pressure in a small clinic" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 50%"></div>
        <div>
          <h3 class="t-h3">Supporting people</h3>
          <p class="t-lead mt-3 text-ink">Direct, practical help with essential needs: food, clean water, medical care and education.</p>
          <ul class="mt-6 grid gap-3 font-display text-[16px] font-semibold sm:grid-cols-2">
            <li class="flex items-center gap-3"><span class="text-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Food distribution</li>
            <li class="flex items-center gap-3"><span class="text-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Clean water</li>
            <li class="flex items-center gap-3"><span class="text-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Medical assistance</li>
            <li class="flex items-center gap-3"><span class="text-water"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg></span>Education</li>
          </ul>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=general">Give a general donation</a>
        </div>
      </div>
      <div class="mt-8 hidden items-center gap-8 group-has-[#features-07-aim-2:checked]/tabs:grid lg:mt-10 lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist"><img src="images/village-pump-shikarpur.jpg" srcset="images/webp/village-pump-shikarpur-640.webp 640w, images/webp/village-pump-shikarpur-1080.webp 1080w" sizes="(min-width: 1024px) 50vw, 100vw" alt="Women and a child drawing water from a hand pump beside their home in a village" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 50%"></div>
        <div>
          <h3 class="t-h3">Strengthening communities</h3>
          <p class="t-lead mt-3 text-ink">Work that benefits whole households and neighbourhoods, not only individuals.</p>
          <p class="mt-4 text-slate">Each hand pump is drilled down to a clean water table. One pump can serve a household or a cluster of homes and removes the daily walk for water.</p>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=water">Give to clean water</a>
        </div>
      </div>
      <div class="mt-8 hidden items-center gap-8 group-has-[#features-07-aim-3:checked]/tabs:grid lg:mt-10 lg:grid-cols-2 lg:gap-14">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist"><img src="images/children-walking-to-school.jpg" srcset="images/webp/children-walking-to-school-640.webp 640w, images/webp/children-walking-to-school-1080.webp 1080w" sizes="(min-width: 1024px) 50vw, 100vw" alt="Children with school bags walking along a tree-lined path in early morning light" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 55%"></div>
        <div>
          <h3 class="t-h3">Creating opportunities</h3>
          <p class="t-lead mt-3 text-ink">Longer-term support that helps people move beyond immediate hardship.</p>
          <p class="mt-4 text-slate">Education support goes towards the practical costs that keep children in school: fees, uniforms, books and stationery.</p>
          <a class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-marigold text-ink hover:bg-marigold-deep h-12 px-6 text-base mt-8" href="donate.html?fund=education">Give to education</a>
        </div>
      </div>
    </div>
  </div>
</section>

Mission & values · Design 08

Values Accordion

A heading and captioned photo beside four expandable values built with details and summary; one opens at a time.

Our values

How we work

Four commitments that shape every decision. Open each one to read what it means.

A man riding a motorcycle loaded with sacks along a rural road lined with trees — Rural road in Sindh, Pakistan

Dignity first

People are helped, photographed and described with respect. We do not use images or language that exploit hardship. People are named or pictured in a story only when they have agreed to it.

Practical help

Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies.

Directly delivered

Help goes to the families and communities who need it, without conditions attached. It is delivered with dignity, in Pakistan and the UK.

Open about our work

Our registration details are public, and updates on completed work are published as they are verified.

Visit the impact page

<section aria-labelledby="features-08-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8 grid gap-10 lg:grid-cols-12 lg:gap-16">
    <div class="lg:col-span-5">
      <p class="t-label text-water">Our values</p>
      <h2 id="features-08-title" class="t-h2 mt-3">How we work</h2>
      <p class="t-lead mt-4 text-slate">Four commitments that shape every decision. Open each one to read what it means.</p>
      <figure class="m-0 mt-8 hidden lg:block">
        <div class="aspect-[4/3] overflow-hidden rounded-2xl bg-mist"><img src="images/delivery-motorcycle-sindh.jpg" srcset="images/webp/delivery-motorcycle-sindh-640.webp 640w, images/webp/delivery-motorcycle-sindh-1080.webp 1080w" sizes="(min-width: 1024px) 38vw, 1px" alt="A man riding a motorcycle loaded with sacks along a rural road lined with trees" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 50%"></div>
        <figcaption class="t-caption mt-2.5 text-slate">Rural road in Sindh, Pakistan</figcaption>
      </figure>
    </div>
    <div class="grid content-start gap-3 lg:col-span-7">
      <details name="features-08-values" class="group rounded-xl border border-line bg-white open:shadow-[var(--shadow-card)]" open>
        <summary class="flex cursor-pointer list-none items-center gap-4 p-5 sm:p-6 [&::-webkit-details-marker]:hidden">
          <span class="grid size-12 shrink-0 place-items-center rounded-md bg-water-tint text-water group-open:bg-water group-open:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
          <h3 class="t-h3 flex-1">Dignity first</h3>
          <span class="grid size-9 shrink-0 place-items-center rounded-full border border-line text-ink transition-transform group-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
        </summary>
        <div class="px-5 pb-6 sm:pl-[5.5rem] sm:pr-8">
          <p class="text-slate">People are helped, photographed and described with respect. We do not use images or language that exploit hardship. People are named or pictured in a story only when they have agreed to it.</p>
        </div>
      </details>
      <details name="features-08-values" class="group rounded-xl border border-line bg-white open:shadow-[var(--shadow-card)]">
        <summary class="flex cursor-pointer list-none items-center gap-4 p-5 sm:p-6 [&::-webkit-details-marker]:hidden">
          <span class="grid size-12 shrink-0 place-items-center rounded-md bg-water-tint text-water group-open:bg-water group-open:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.35,44L178.57,92.29l-80.35-44Zm0,88L47.65,76,81.56,57.43l80.35,44Zm88,55.85h0l-80,43.79V133.83l32-17.51V152a8,8,0,0,0,16,0V107.56l32-17.51v85.76Z"></path></svg></span>
          <h3 class="t-h3 flex-1">Practical help</h3>
          <span class="grid size-9 shrink-0 place-items-center rounded-full border border-line text-ink transition-transform group-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
        </summary>
        <div class="px-5 pb-6 sm:pl-[5.5rem] sm:pr-8">
          <p class="text-slate">Support takes the form of things people can use: a food parcel, a hand pump, medicine, school fees, emergency supplies.</p>
        </div>
      </details>
      <details name="features-08-values" class="group rounded-xl border border-line bg-white open:shadow-[var(--shadow-card)]">
        <summary class="flex cursor-pointer list-none items-center gap-4 p-5 sm:p-6 [&::-webkit-details-marker]:hidden">
          <span class="grid size-12 shrink-0 place-items-center rounded-md bg-water-tint text-water group-open:bg-water group-open:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l40-40,15.08-15.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41Zm-41.87,41.86L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm-25.72,34.8a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z"></path></svg></span>
          <h3 class="t-h3 flex-1">Directly delivered</h3>
          <span class="grid size-9 shrink-0 place-items-center rounded-full border border-line text-ink transition-transform group-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
        </summary>
        <div class="px-5 pb-6 sm:pl-[5.5rem] sm:pr-8">
          <p class="text-slate">Help goes to the families and communities who need it, without conditions attached. It is delivered with dignity, in Pakistan and the UK.</p>
        </div>
      </details>
      <details name="features-08-values" class="group rounded-xl border border-line bg-white open:shadow-[var(--shadow-card)]">
        <summary class="flex cursor-pointer list-none items-center gap-4 p-5 sm:p-6 [&::-webkit-details-marker]:hidden">
          <span class="grid size-12 shrink-0 place-items-center rounded-md bg-water-tint text-water group-open:bg-water group-open:text-white"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm-34.32,69.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
          <h3 class="t-h3 flex-1">Open about our work</h3>
          <span class="grid size-9 shrink-0 place-items-center rounded-full border border-line text-ink transition-transform group-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
        </summary>
        <div class="px-5 pb-6 sm:pl-[5.5rem] sm:pr-8">
          <p class="text-slate">Our registration details are public, and updates on completed work are published as they are verified.</p>
          <a class="link t-label mt-3" href="impact.html">Visit the impact page</a>
        </div>
      </details>
    </div>
  </div>
</section>

Mission & values · Design 09

Bento Grid

A large photo tile carrying the three-part statement, surrounded by four coloured tiles in teal, smoke, marigold and ink.

What we are here to do

About the foundation

Children with school bags walking along a tree-lined path in early morning light

Supporting people. Strengthening communities. Creating opportunities.

Supporting people

Direct, practical help with essential needs.

Strengthening communities

Work that benefits whole households and neighbourhoods.

Creating opportunities

Longer-term support beyond immediate hardship.

Where we work

Pakistan and the United Kingdom

<section aria-labelledby="features-09-title" class="bg-white py-16 sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="flex flex-wrap items-end justify-between gap-4">
      <h2 id="features-09-title" class="t-h2">What we are here to do</h2>
      <a class="link t-label" href="about.html">About the foundation</a>
    </div>
    <div class="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <div class="relative isolate flex min-h-[400px] flex-col justify-end overflow-hidden rounded-2xl p-6 text-white sm:p-8 md:col-span-2 lg:row-span-2 lg:min-h-[540px]">
        <div class="absolute inset-0 -z-10"><img src="images/children-walking-to-school.jpg" srcset="images/webp/children-walking-to-school-640.webp 640w, images/webp/children-walking-to-school-1080.webp 1080w" sizes="(min-width: 1024px) 50vw, 100vw" alt="Children with school bags walking along a tree-lined path in early morning light" loading="lazy" decoding="async" class="h-full w-full object-cover" style="object-position: 50% 55%"></div>
        <div class="absolute inset-0 -z-10 bg-linear-to-t from-ink/95 via-ink/55 to-ink/0" aria-hidden="true"></div>
        <p class="max-w-[18ch] font-display text-[1.625rem] font-bold leading-[1.1] tracking-[-0.01em] sm:text-[2.25rem]">Supporting people. Strengthening communities. Creating opportunities.</p>
      </div>
      <div class="flex flex-col rounded-2xl bg-water p-6 text-white sm:p-7">
        <span class="grid size-11 place-items-center rounded-md bg-white/15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
        <h3 class="t-h3 mt-auto pt-8">Supporting people</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">Direct, practical help with essential needs.</p>
      </div>
      <div class="flex flex-col rounded-2xl bg-smoke p-6 sm:p-7">
        <span class="grid size-11 place-items-center rounded-md bg-white text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M64.12,147.8a4,4,0,0,1-4,4.2H16a8,8,0,0,1-7.8-6.17,8.35,8.35,0,0,1,1.62-6.93A67.79,67.79,0,0,1,37,117.51a40,40,0,1,1,66.46-35.8,3.94,3.94,0,0,1-2.27,4.18A64.08,64.08,0,0,0,64,144C64,145.28,64,146.54,64.12,147.8Zm182-8.91A67.76,67.76,0,0,0,219,117.51a40,40,0,1,0-66.46-35.8,3.94,3.94,0,0,0,2.27,4.18A64.08,64.08,0,0,1,192,144c0,1.28,0,2.54-.12,3.8a4,4,0,0,0,4,4.2H240a8,8,0,0,0,7.8-6.17A8.33,8.33,0,0,0,246.17,138.89Zm-89,43.18a48,48,0,1,0-58.37,0A72.13,72.13,0,0,0,65.07,212,8,8,0,0,0,72,224H184a8,8,0,0,0,6.93-12A72.15,72.15,0,0,0,157.19,182.07Z"></path></svg></span>
        <h3 class="t-h3 mt-auto pt-8">Strengthening communities</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-slate">Work that benefits whole households and neighbourhoods.</p>
      </div>
      <div class="flex flex-col rounded-2xl bg-marigold p-6 text-ink sm:p-7">
        <span class="grid size-11 place-items-center rounded-md bg-ink/10"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path></svg></span>
        <h3 class="t-h3 mt-auto pt-8">Creating opportunities</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-ink/80">Longer-term support beyond immediate hardship.</p>
      </div>
      <div class="flex flex-col rounded-2xl bg-ink p-6 text-white sm:p-7">
        <span class="grid size-11 place-items-center rounded-md bg-white/10 text-marigold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path></svg></span>
        <p class="t-caption mt-auto pt-8 text-on-dark-muted">Where we work</p>
        <h3 class="t-h3 mt-1">Pakistan and the United Kingdom</h3>
      </div>
    </div>
  </div>
</section>

Mission & values · Design 10

Scrolling Principles

A teal section with a horizontal scroll-snap row of seven principle cards, tagged by how we work and how we report.

The principles behind the work

Four commitments that shape every decision, and three rules for everything we publish.

Scroll to see all seven

How we work
Dignity first

People are helped, photographed and described with respect.
How we work
Practical help

A food parcel, a hand pump, medicine, school fees, emergency supplies.
How we work
Directly delivered

Help goes to the families and communities who need it, without conditions attached.
How we work
Open about our work

Registration details are public, and updates are published as they are verified.
How we report
Verified before published

A figure is published with its period and its source, once the work is complete.
How we report
Consent before stories

People are named or pictured only when they have agreed to it.
How we report
Places, not vague claims

Updates say where and when the work happened.

<section aria-labelledby="features-10-title" class="bg-water py-16 text-white sm:py-20 lg:py-24">
  <div class="mx-auto w-full max-w-content px-5 sm:px-8">
    <div class="flex flex-wrap items-end justify-between gap-6">
      <div class="max-w-[42rem]">
        <h2 id="features-10-title" class="t-h2">The principles behind the work</h2>
        <p class="t-lead mt-4 text-white/85">Four commitments that shape every decision, and three rules for everything we publish.</p>
      </div>
      <p class="t-label inline-flex items-center gap-2 text-white/85">Scroll to see all seven<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></p>
    </div>
  </div>
    <ul class="mt-10 flex snap-x snap-mandatory scroll-px-5 gap-4 overflow-x-auto px-5 pb-4 sm:scroll-px-8 sm:px-8 lg:mt-12 xl:scroll-px-[calc((100%-80rem)/2+2rem)] xl:px-[calc((100%-80rem)/2+2rem)]">
      <li class="flex w-[17.5rem] shrink-0 snap-start flex-col rounded-2xl border border-white/10 bg-water-deep p-6 sm:w-[19rem]">
        <span class="t-caption self-start rounded-full bg-white/15 px-2.5 py-1 font-semibold">How we work</span>
        <span class="mt-7 grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M230.33,141.06a24.34,24.34,0,0,0-18.61-4.77C230.5,117.33,240,98.48,240,80c0-26.47-21.29-48-47.46-48A47.58,47.58,0,0,0,156,48.75,47.58,47.58,0,0,0,119.46,32C93.29,32,72,53.53,72,80c0,11,3.24,21.69,10.06,33a31.87,31.87,0,0,0-14.75,8.4L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56Zm-10.9,27.15-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9Z"></path></svg></span>
        <h3 class="t-h3 mt-5">Dignity first</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">People are helped, photographed and described with respect.</p>
      </li>
      <li class="flex w-[17.5rem] shrink-0 snap-start flex-col rounded-2xl border border-white/10 bg-water-deep p-6 sm:w-[19rem]">
        <span class="t-caption self-start rounded-full bg-white/15 px-2.5 py-1 font-semibold">How we work</span>
        <span class="mt-7 grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.35,44L178.57,92.29l-80.35-44Zm0,88L47.65,76,81.56,57.43l80.35,44Zm88,55.85h0l-80,43.79V133.83l32-17.51V152a8,8,0,0,0,16,0V107.56l32-17.51v85.76Z"></path></svg></span>
        <h3 class="t-h3 mt-5">Practical help</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">A food parcel, a hand pump, medicine, school fees, emergency supplies.</p>
      </li>
      <li class="flex w-[17.5rem] shrink-0 snap-start flex-col rounded-2xl border border-white/10 bg-water-deep p-6 sm:w-[19rem]">
        <span class="t-caption self-start rounded-full bg-white/15 px-2.5 py-1 font-semibold">How we work</span>
        <span class="mt-7 grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l40-40,15.08-15.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41Zm-41.87,41.86L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm-25.72,34.8a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z"></path></svg></span>
        <h3 class="t-h3 mt-5">Directly delivered</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">Help goes to the families and communities who need it, without conditions attached.</p>
      </li>
      <li class="flex w-[17.5rem] shrink-0 snap-start flex-col rounded-2xl border border-white/10 bg-water-deep p-6 sm:w-[19rem]">
        <span class="t-caption self-start rounded-full bg-white/15 px-2.5 py-1 font-semibold">How we work</span>
        <span class="mt-7 grid size-12 place-items-center rounded-md bg-marigold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm-34.32,69.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
        <h3 class="t-h3 mt-5">Open about our work</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">Registration details are public, and updates are published as they are verified.</p>
      </li>
      <li class="flex w-[17.5rem] shrink-0 snap-start flex-col rounded-2xl border border-white/10 bg-water-deep p-6 sm:w-[19rem]">
        <span class="t-caption self-start rounded-full bg-marigold px-2.5 py-1 font-semibold text-ink">How we report</span>
        <span class="mt-7 grid size-12 place-items-center rounded-md bg-white text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1,0-16h8V136a8,8,0,0,1,8-8H72a8,8,0,0,1,8,8v64H96V88a8,8,0,0,1,8-8h32a8,8,0,0,1,8,8V200h16V40a8,8,0,0,1,8-8h40a8,8,0,0,1,8,8V200h8A8,8,0,0,1,232,208Z"></path></svg></span>
        <h3 class="t-h3 mt-5">Verified before published</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">A figure is published with its period and its source, once the work is complete.</p>
      </li>
      <li class="flex w-[17.5rem] shrink-0 snap-start flex-col rounded-2xl border border-white/10 bg-water-deep p-6 sm:w-[19rem]">
        <span class="t-caption self-start rounded-full bg-marigold px-2.5 py-1 font-semibold text-ink">How we report</span>
        <span class="mt-7 grid size-12 place-items-center rounded-md bg-white text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm-44,76a36,36,0,1,1-36-36A36,36,0,0,1,164,132Z"></path></svg></span>
        <h3 class="t-h3 mt-5">Consent before stories</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">People are named or pictured only when they have agreed to it.</p>
      </li>
      <li class="flex w-[17.5rem] shrink-0 snap-start flex-col rounded-2xl border border-white/10 bg-water-deep p-6 sm:w-[19rem]">
        <span class="t-caption self-start rounded-full bg-marigold px-2.5 py-1 font-semibold text-ink">How we report</span>
        <span class="mt-7 grid size-12 place-items-center rounded-md bg-white text-water"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg></span>
        <h3 class="t-h3 mt-5">Places, not vague claims</h3>
        <p class="mt-2 text-[15px] leading-relaxed text-white/85">Updates say where and when the work happened.</p>
      </li>
    </ul>
</section>