/* charity.pk — big, colourful, structured. Modelled on the INGO charity layout
   language (large hero, cause cards, counters, persistent donate) but on our own
   palette: deep teal and warm amber rather than Islamic Relief's green and gold. */

:root {
  --teal-900: #0b3d3a;
  --teal-800: #10514c;
  --teal-700: #146a63;
  --teal-100: #e6f2f1;
  --amber:    #e8a53a;
  --amber-dk: #c9861f;
  --clay:     #c05621;
  --ink:      #16211f;
  --muted:    #5b6b68;
  --line:     #dfe7e5;
  --bg:       #ffffff;
  --bg-soft:  #f6f9f8;
  --radius:   14px;
  --wrap:     1200px;
  --shadow:   0 10px 30px rgba(11, 61, 58, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font: 17px/1.65 "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal-700); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }

/* ── buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 15px 30px; border-radius: 100px;
  font-weight: 700; text-decoration: none; border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--amber { background: var(--amber); color: #2a1c00; }
.btn--white { background: #fff; color: var(--teal-900); }
.btn--ghost { border-color: currentColor; color: #fff; }
.btn--teal  { background: var(--teal-700); color: #fff; }

/* ── header ──────────────────────────────────────────────── */
.topbar { background: var(--teal-900); color: #cfe6e3; font-size: 14px; }
.topbar .wrap { display: flex; gap: 20px; justify-content: space-between;
  align-items: center; min-height: 40px; flex-wrap: wrap; }
.topbar a { color: #fff; }

header.site { position: sticky; top: 0; z-index: 50; background: #fff;
  border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; gap: 26px; min-height: 74px; }
.logo { font-weight: 800; font-size: 1.35rem; color: var(--teal-900);
  text-decoration: none; letter-spacing: -.02em; }
.logo span { color: var(--amber); }
nav.main { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
nav.main a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
nav.main a:hover { color: var(--teal-700); }

/* ── hero ────────────────────────────────────────────────── */
.hero { position: relative; color: #fff; background: var(--teal-900); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .40; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,61,58,.94) 0%, rgba(11,61,58,.72) 45%, rgba(11,61,58,.35) 100%); }
.hero .wrap { position: relative; z-index: 2; padding-top: 86px; padding-bottom: 86px; }
.hero__eyebrow { display: inline-block; background: var(--amber); color: #2a1c00;
  font-weight: 800; font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 100px; margin-bottom: 20px; }
.hero p { font-size: 1.2rem; max-width: 56ch; color: #dcece9; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* the typewriter line inside the H1 */
.type { color: var(--amber); border-right: 3px solid var(--amber);
  padding-right: 4px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .type { animation: caret .9s step-end infinite; }
}
@keyframes caret { 50% { border-color: transparent; } }

/* ── counters ────────────────────────────────────────────── */
.counters { background: var(--amber); color: #2a1c00; }
.counters .grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; padding: 34px 0; text-align: center; }
.counters .n { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1; }
.counters .k { font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; opacity: .78; margin-top: 8px; }

/* ── sections ────────────────────────────────────────────── */
section { padding: 74px 0; }
section.soft { background: var(--bg-soft); }
.section-head { max-width: 62ch; margin-bottom: 38px; }
.eyebrow { color: var(--clay); font-weight: 800; font-size: 13px;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }

/* ── cause cards ─────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .14s ease, box-shadow .14s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__img { aspect-ratio: 16/10; background: var(--teal-100); position: relative; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__tag { position: absolute; top: 12px; left: 12px; background: var(--amber);
  color: #2a1c00; font-size: 12px; font-weight: 800; padding: 5px 11px;
  border-radius: 100px; text-transform: uppercase; letter-spacing: .05em; }
.card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__body p { margin: 0; color: var(--muted); font-size: 15.5px; }
.card__body .btn { margin-top: auto; align-self: flex-start; padding: 11px 22px; font-size: 15px; }

/* progress bar on an appeal */
.bar { height: 9px; background: var(--teal-100); border-radius: 100px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--amber); }
.bar-meta { display: flex; justify-content: space-between; font-size: 13.5px;
  font-weight: 700; color: var(--teal-800); }

/* ── steps ───────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.step { position: relative; padding-top: 16px; }
.step b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal-700); color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.step p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ── split ───────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.split img { border-radius: var(--radius); }

/* ── band ────────────────────────────────────────────────── */
.band { background: var(--teal-800); color: #fff; text-align: center; }
.band h2 { color: #fff; }
.band p { color: #cfe3e0; max-width: 58ch; margin: 0 auto 26px; }

/* ── footer ──────────────────────────────────────────────── */
footer.site { background: var(--teal-900); color: #b9d4d1; padding: 56px 0 30px; font-size: 15px; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
footer.site h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
footer.site a { color: #b9d4d1; text-decoration: none; display: block; margin-bottom: 9px; }
footer.site a:hover { color: #fff; }
footer.site .legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 34px;
  padding-top: 20px; font-size: 13.5px; color: #90b4b0; }

.urdu { font-family: "Noto Nastaliq Urdu", serif; direction: rtl; }

@media (max-width: 900px) {
  .split, footer.site .cols { grid-template-columns: 1fr; gap: 30px; }
  .counters .grid { grid-template-columns: repeat(2, 1fr); }
  nav.main { display: none; }
  .hero .wrap { padding-top: 58px; padding-bottom: 58px; }
}

/* ═══════════════════════════════════════════════════════════
   Layout matched to the Islamic Aid reference Imran supplied:
   solid coloured masthead with a contrasting donate button, a
   full-bleed hero photograph with the headline left and a
   donation widget card overlaid right. Our palette: deep teal
   and amber, with clay for the donate action instead of their
   green and crimson.
   ═══════════════════════════════════════════════════════════ */

header.site.solid { background: var(--teal-800); border-bottom: 0; }
header.site.solid .wrap { min-height: 84px; gap: 18px; }
header.site.solid .logo { color: #fff; }
header.site.solid nav.main a { color: #eaf5f3; font-size: 15.5px; }
header.site.solid nav.main a:hover { color: var(--amber); }
.donate-btn {
  background: var(--clay); color: #fff; font-weight: 800; text-decoration: none;
  padding: 28px 30px; margin: 0 -22px 0 6px; align-self: stretch;
  display: flex; align-items: center; letter-spacing: .01em;
}
.donate-btn:hover { background: #a8481a; }
.years { color: var(--amber); font-weight: 700; font-size: 15px; }
.years em { font-style: normal; opacity: .85; }

/* hero split: copy left, giving card right */
.hero--photo .wrap { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 40px; align-items: end; padding-top: 70px; padding-bottom: 0; }
.hero--photo::after { background:
  linear-gradient(90deg, rgba(11,61,58,.92) 0%, rgba(11,61,58,.70) 42%, rgba(11,61,58,.20) 100%); }
.hero--photo .hero__media img { opacity: .95; }
.hero__eyebrow.plain { background: none; color: var(--amber); padding: 0;
  font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 800; text-transform: none;
  letter-spacing: -.01em; margin-bottom: 8px; }
.hero h1.big { font-size: clamp(2.6rem, 6.4vw, 5rem); text-transform: uppercase;
  font-weight: 900; letter-spacing: -.03em; margin-bottom: .3em; }
.type-line { display: inline-block; background: var(--amber); color: #2a1c00;
  font-weight: 900; font-size: clamp(1.3rem, 3vw, 2.1rem); text-transform: uppercase;
  padding: 6px 14px; margin-bottom: 18px; letter-spacing: -.01em; }

/* the giving card */
.give { background: var(--teal-700); color: #fff; padding: 30px;
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow); }
.give h3 { color: #fff; font-size: 1.5rem; text-align: center; margin-bottom: 4px; }
.give .sub { text-align: center; color: #cfe6e3; margin: 0 0 20px; font-size: 15.5px; }
.give__freq { display: flex; gap: 18px; justify-content: center; margin-bottom: 20px;
  font-size: 15px; flex-wrap: wrap; }
.give__freq label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.give__amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.give__amounts label { background: #fff; color: var(--ink); border: 3px solid #fff;
  border-radius: 8px; padding: 12px; cursor: pointer; font-size: 13.5px; line-height: 1.4; }
.give__amounts input { margin-right: 6px; }
.give__amounts label:has(input:checked) { border-color: var(--amber); }
.give__amounts .amt { display: block; font-size: 1.3rem; font-weight: 800; margin-bottom: 3px; }
.give__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.give__row input[type=text] { border: 0; border-radius: 8px; padding: 15px;
  font-size: 16px; font-family: inherit; }
.give__row button { background: var(--clay); color: #fff; border: 0; border-radius: 8px;
  padding: 15px 24px; font-weight: 800; font-size: 15.5px; cursor: pointer; font-family: inherit; }
.give__row button:hover { background: #a8481a; }
.give__note { font-size: 12.5px; color: #a9cfcb; text-align: center; margin: 14px 0 0; }

@media (max-width: 980px) {
  .hero--photo .wrap { grid-template-columns: 1fr; padding-bottom: 0; }
  .donate-btn { margin: 0; padding: 14px 22px; border-radius: 100px; align-self: center; }
  header.site.solid .wrap { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
}

/* ── Imagery: honest placeholders ─────────────────────────────
   There is no field photography yet, and stock pictures of children this charity
   has never met would contradict the one thing the site claims. These treatments
   carry the design until real photographs from real cases exist — at which point
   the img slots are already in place. */
.hero__media--pattern {
  background:
    radial-gradient(900px 480px at 12% 8%, rgba(232,165,58,.30), transparent 60%),
    radial-gradient(760px 520px at 88% 92%, rgba(192,86,33,.34), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 16px),
    var(--teal-900);
}
.card__ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 18px; font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -.01em;
  background: var(--teal-700);
}
.card__ph::after { content: "photograph to follow"; position: absolute; bottom: 12px;
  left: 0; right: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; opacity: .55; }
.card__ph--mental-health { background: linear-gradient(140deg, #146a63, #0b3d3a); }
.card__ph--water         { background: linear-gradient(140deg, #1b7f96, #0e4a58); }
.card__ph--health        { background: linear-gradient(140deg, #a8481a, #5e2610); }
.card__ph--education     { background: linear-gradient(140deg, #c9861f, #7a4f0c); }
.card__ph--floods        { background: linear-gradient(140deg, #2b5f8a, #14314a); }
.card__ph--poverty       { background: linear-gradient(140deg, #6b5f2a, #38310f); }

/* inner-page hero: shorter than the homepage, no giving widget */
.hero--inner .wrap { padding-top: 62px; padding-bottom: 62px; display: block; }
.hero--inner h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }

/* ── emergency / announcement bar ─────────────────────────── */
.alertbar { background: var(--clay); color: #fff; font-size: 14.5px; }
.alertbar .wrap { display: flex; align-items: center; gap: 16px; padding: 11px 22px; }
.alertbar a { color: #fff; font-weight: 800; white-space: nowrap; }
.alertbar__x { margin-left: auto; background: none; border: 0; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }

/* ── tick list ────────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; margin: 0 0 26px; }
.ticks li { position: relative; padding: 9px 0 9px 34px; border-bottom: 1px solid var(--line); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 9px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--teal-700);
  color: #fff; font-size: 13px; display: grid; place-items: center; font-weight: 800; }

/* ── zakat band ───────────────────────────────────────────── */
.zakat-band { background: var(--teal-900); color: #fff; }
.zakat-band h2 { color: #fff; }
.zakat-band p { color: #cfe3e0; }
.zakat-ur { font-size: 1.35rem; line-height: 2.4; color: var(--amber);
  border-right: 4px solid var(--amber); padding-right: 22px; }

/* ── four-across card grid ────────────────────────────────── */
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ── newsletter ───────────────────────────────────────────── */
.newsletter { background: var(--amber); color: #2a1c00; }
.newsletter .wrap { display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 34px; align-items: center; }
.newsletter h2 { margin-bottom: .3em; }
.newsletter p { margin: 0; font-size: 16px; }
.newsletter__form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.newsletter__form input { border: 0; border-radius: 8px; padding: 16px;
  font-size: 16px; font-family: inherit; }
.newsletter__form button { background: var(--teal-900); color: #fff; border: 0;
  border-radius: 8px; padding: 16px 26px; font-weight: 800; font-size: 15.5px;
  cursor: pointer; font-family: inherit; }
.newsletter__form button:hover { background: var(--teal-700); }

@media (max-width: 900px) {
  .newsletter .wrap { grid-template-columns: 1fr; }
  .zakat-ur { border-right: 0; padding-right: 0; }
  .alertbar .wrap { flex-wrap: wrap; }
}

/* The hero photograph is real but busy, so it sits further back behind the
   headline than a commissioned shot would need to. */
.hero--photo .hero__media img { opacity: .62; object-position: center 38%; }
.hero--photo::after { background:
  linear-gradient(90deg, rgba(11,61,58,.95) 0%, rgba(11,61,58,.86) 38%, rgba(11,61,58,.55) 100%); }