/* ============================================================================
   HOMEPAGE — section styles only.
   Requires shared.css to be loaded FIRST (tokens, base, chrome, footer).
   ========================================================================= */

/* ==========================================================================
   S1 · HERO
   ========================================================================= */
/* Pulled up by exactly the header's measured height (JS writes --header-h),
   so the header floats over the photograph with no white strip above it. */
.hero {
  /* z-index:0 pins the whole hero below the sticky header (z 90). Without it
     iOS Safari let slide content paint over the header mid-scroll. */
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(var(--header-h, 86px) * -1);
  background: var(--maroon-2);
  --hero-ui: 92px;
  /* height reserved for the controls strip */
}

/* Boxed layout — a rounded card inside the normal .shell container instead
   of a full-bleed hero pulled under the fixed header. The wrapping
   <section class="band section pt-header"><div class="shell"> (see
   HCI_Widget_Hero::render()) supplies the fixed-header clearance and
   normal section spacing, same pattern as HCI_Widget_Campaign_Banner's
   boxed mode — so .hero--boxed itself only needs to cancel the pull and
   round its corners. */
.hero--boxed {
  margin-top: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.hero__slides {
  position: relative;
  display: grid
}

/* All slides stack in one grid cell so the section height is set by the
   tallest — no layout shift when the slide changes. */
.hero__slide {
  grid-area: 1/1;
  position: relative;
  isolation: isolate;
  min-height: min(86vh, 720px);
  display: flex;
  align-items: center;
  /* Bottom padding reserves the controls strip so the CTAs and the trust line
     can never collide with it, however tall a slide's copy runs. */
  padding-block: calc(clamp(48px, 7vw, 88px) + var(--header-h, 86px)) calc(var(--hero-ui) + 16px);
  visibility: hidden;
  transition: visibility .6s;
}

.hero__slide.is-on {
  visibility: visible
}

.hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .8s var(--ease), transform 7s linear;
}

.hero__slide.is-on .hero__img {
  opacity: 1;
  transform: scale(1)
}

/* Heavy on the left where the copy sits, lighter on the right so the
   photograph's subject stays readable. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(38, 6, 8, .95) 0%, rgba(48, 8, 10, .86) 32%, rgba(58, 10, 12, .52) 56%, rgba(58, 10, 12, .22) 82%),
    linear-gradient(to top, rgba(24, 5, 6, .75) 0%, transparent 42%);
}

.hero__in {
  position: relative;
  color: #fff;
  transform: translateY(16px);
  transition: transform .55s var(--ease) .1s;
}

.hero__slide.is-on .hero__in {
  transform: none
}

/* controls strip pinned to the foot of the hero */
.hero__ui {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  min-height: var(--hero-ui);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: wrap;
  padding-bottom: clamp(18px, 2.6vw, 30px);
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: 9px
}

.rnd--onDark {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
  backdrop-filter: blur(6px);
}

.rnd--onDark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--maroon)
}

.rnd--onDark:disabled:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .32);
  color: #fff
}

.hero__dots {
  display: flex;
  gap: 7px;
  margin-left: 6px
}

.hero__dots button {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .42);
  transition: background-color .2s var(--ease), width .3s var(--ease);
}

.hero__dots button.is-on {
  background: #fff;
  width: 30px
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(227, 34, 38, .9);
  padding: 6px 13px;
  border-radius: var(--r-pill);
}

.hero__h {
  margin: 0 0 16px;
  max-width: 15ch;
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.032em;
  font-weight: 800;
  text-wrap: balance;
}

.hero__h em {
  color: #fff
}

.hero__sub {
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: #F3DCD9;
  margin-bottom: 26px
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.hero__trust {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   S2 · QUICK-DONATE SHELF
   ========================================================================= */
.shelf {
  padding-block: clamp(40px, 5vw, 64px)
}

.shelf__head {
  margin-bottom: 22px
}

.shelf__head .h2 {
  max-width: 24ch
}

/* Grid, not a rail: every visible cause in one viewport, no scroll/swipe.
   4 columns x 2 rows everywhere down to tablet, narrowing to 2 columns on
   mobile — see responsive overrides below. Only the 8 highest-priority
   causes show (nth-child(n+9) hidden below); the original swipeable rail
   with all 10 is preserved as a documented pattern in campaign-kit.html
   (#carousels). */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hci-gap);
}

.shelf-grid > li:nth-child(n+9) {
  display: none;
}

.qcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 14px 14px;
  box-shadow: var(--sh-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}

.qcard:hover,
.qcard:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: #EDD2CF;
}

.qcard__ico {
  width: 30px;
  height: 30px;
  color: var(--red)
}

.qcard__name {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.015em
}

.qcard__impact {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ink-3);
  flex: 1
}

.qcard__impact b {
  color: var(--ink);
  font-weight: 700
}

.qcard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.qcard__go {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .85rem;
  font-weight: 700;
  color: var(--red-dark);
  text-decoration: none;
}

.qcard__go svg {
  width: 14px;
  height: 14px;
  transition: transform .24s var(--ease)
}

.qcard:hover .qcard__go svg,
.qcard__go:hover svg {
  transform: translateX(4px)
}

.qcard__learn {
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
}

.qcard__learn:hover,
.qcard__learn:focus-visible {
  color: var(--red-dark);
  text-decoration: underline;
}

.dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 4px
}

.dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transition: background-color .2s var(--ease), width .2s var(--ease);
}

.dots button.is-on {
  background: var(--red);
  width: 24px
}

/* ==========================================================================
   S3 · IMPACT & TRUST STRIP
   ========================================================================= */
.impact {
  padding-block: var(--pad-s)
}

/* 3 across, 2 rows. Six across clipped the widest figure (1,267,655). */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(26px, 3.4vw, 40px);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-md);
  overflow: hidden;
}

.stat {
  background: var(--maroon);
  padding: 24px 22px
}

.stat__ico {
  width: 32px;
  height: 32px;
  color: var(--accent-dark);
  display: block;
  margin-bottom: 14px
}

.stat__n {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.stat__l {
  display: block;
  margin-top: 6px;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--on-dark-3)
}

.impact__foot {
  margin: 22px 0 0;
  font-size: .8rem;
  color: var(--on-dark-3);
}

.impact__foot a {
  color: var(--accent-dark);
  font-weight: 600
}

/* ==========================================================================
   S5 · PROGRAMS GRID
   ========================================================================= */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}

.pcard> :not(.pcard__media) {
  margin-inline: 22px
}

.pcard>.pcard__media+* {
  margin-top: 16px
}

.pcard> :last-child {
  margin-bottom: 22px
}

.pcard__ico {
  width: 40px;
  height: 40px;
  color: var(--red);
  margin-top: 24px
}

.pcard__media {
  width: 100%;
  aspect-ratio: 1400/628;
  object-fit: cover;
  display: block;
  background: var(--sand);
}

.pcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: #EDD2CF
}

.pcard p {
  font-size: .88rem;
  color: var(--ink-3);
  margin: 0
}

.ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px
}

.pcard__note {
  font-size: .78rem !important;
  color: var(--ink-3);
  font-style: italic
}

/* ==========================================================================
   S5 · CAMPAIGN CARDS — banner + excerpt + two CTAs, 3 across
   ========================================================================= */
.campaigns {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

.ccard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}

.ccard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: #EDD2CF
}

.ccard__media {
  width: 100%;
  aspect-ratio: 1400/628;
  object-fit: cover;
  display: block;
  background: var(--sand);
}

.ccard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 24px;
  flex: 1
}

.ccard__body p {
  font-size: .89rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  flex: 1
}

.ccard__actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 6px
}

/* Category tabs — "Our campaigns": Emergency / General / Most Needed.
   Wraps the shared .segmented--light pill (same style as the sticky
   bar's frequency toggle) and centers it above the campaign grid. */
.ctabs {
  display: flex;
  justify-content: center;
  margin-bottom: var(--hci-gap)
}

.ctabs .segmented__btn {
  padding: 9px 22px;
  font-size: .88rem
}

/* ==========================================================================
   S6 · ZAKAT — steps card replaces the Nisab panel
   ========================================================================= */
.zakat__card {
  background: var(--maroon);
  color: var(--on-dark-2);
  border-radius: var(--r-lg);
  padding: 30px 30px 26px;
  box-shadow: var(--sh-3);
}

.zakat__ico {
  width: 40px;
  height: 40px;
  color: var(--accent-dark);
  margin-bottom: 16px
}

.zakat__card .h3 {
  color: #fff;
  margin-bottom: 18px
}

.zakat__steps {
  counter-reset: zs;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.zakat__steps li {
  position: relative;
  padding-left: 40px
}

.zakat__steps li::before {
  counter-increment: zs;
  content: counter(zs);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: .74rem;
  font-weight: 700;
  color: #fff;
}

.zakat__steps b {
  display: block;
  font-size: .92rem;
  color: #fff
}

.zakat__steps span {
  display: block;
  font-size: .82rem;
  color: var(--on-dark-3);
  margin-top: 2px
}

.zakat__policy {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16)
}

.zakat__policy .link {
  color: var(--accent-dark)
}

/* ==========================================================================
   S7b · ACCOUNTABILITY
   ========================================================================= */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--hci-gap);
  margin-bottom: clamp(30px, 4vw, 48px);
}

.facts li {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 18px;
}

.facts__n {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.facts__l {
  display: block;
  margin-top: 5px;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--ink-3)
}

.docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--hci-gap)
}

.docs__h {
  margin: 0 0 12px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

.doc:hover {
  border-color: var(--red);
  transform: translateX(3px);
  box-shadow: var(--sh-1)
}

.doc__yr {
  font-size: .72rem;
  font-weight: 700;
  color: var(--red-dark);
  flex: none;
  background: var(--red-tint);
  border-radius: 5px;
  padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}

.doc__t {
  font-size: .87rem;
  font-weight: 600;
  flex: 1;
  color: var(--ink)
}

.doc svg {
  width: 14px;
  height: 14px;
  color: var(--ink-3);
  flex: none;
  transition: transform .18s var(--ease)
}

.doc:hover svg {
  transform: translateX(3px);
  color: var(--red)
}

.doc--feature {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--maroon);
  border-color: var(--maroon);
  padding: 20px 20px 18px;
}

.doc--feature:hover {
  border-color: var(--accent-dark);
  transform: translateY(-3px)
}

.doc--feature .doc__yr {
  background: rgba(255, 255, 255, .14);
  color: #fff
}

.doc--feature .doc__t {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff
}

.doc__note {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--on-dark-3)
}

.doc--feature svg {
  color: var(--accent-dark)
}

.regline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-3);
  max-width: 80ch;
}

.regline__ico {
  width: 18px;
  height: 18px;
  color: var(--red);
  flex: none;
  margin-top: 2px
}

/* ==========================================================================
   S7c · GOVERNANCE
   ========================================================================= */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--hci-gap)
}

.people__group {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 24px 20px;
  box-shadow: var(--sh-1);
}

.people__h {
  margin: 0 0 16px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-dark);
}

.people__group ul {
  display: flex;
  flex-direction: column;
  gap: 14px
}

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

.people__group b {
  display: block;
  font-size: .94rem
}

.people__group span:not(.avatar) {
  display: block;
  font-size: .8rem;
  color: var(--ink-3)
}

.disclaimer {
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--red);
  background: rgba(227, 34, 38, .05);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .84rem;
  color: var(--ink-2);
  max-width: 78ch;
}

.disclaimer b {
  color: var(--red-dark)
}

/* ==========================================================================
   S6 · ZAKAT PROMO
   ========================================================================= */
.zakat__in {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 20px 0 26px
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: .92rem;
  color: var(--ink-2)
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 16px;
  height: 9px;
  border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg);
}

.zakat__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.nisab {
  background: var(--maroon);
  color: var(--on-dark-2);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--sh-3);
}

.nisab__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px
}

.nisab__ico {
  width: 38px;
  height: 38px;
  color: var(--accent-dark);
  flex: none
}

.nisab__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff
}

.nisab__date {
  margin: 0;
  font-size: .78rem;
  color: var(--on-dark-3)
}

.nisab__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0
}

.nisab__grid dt {
  font-size: .78rem;
  color: var(--on-dark-3);
  margin-bottom: 4px
}

.nisab__grid dt span {
  display: block;
  opacity: .7;
  font-size: .72rem
}

.nisab__grid dd {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.nisab__note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .78rem;
  color: var(--on-dark-3);
}

/* ==========================================================================
   S7 · HOW IT WORKS
   ========================================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3.4vw, 44px);
  margin-top: clamp(28px, 3.4vw, 44px);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 4px
}

.step__ico {
  width: 46px;
  height: 46px;
  color: var(--accent-dark);
  margin-bottom: 14px
}

.step p {
  font-size: .9rem;
  color: var(--on-dark-3);
  margin: 0
}

.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .07);
  line-height: 1;
}

/* ==========================================================================
   S8 · STORY / VIDEO
   .video/.video__* (the YouTube facade) moved to campaign.css — it's no
   longer homepage-only, thankyou.html reuses it too.
   ========================================================================= */
.story__in {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center
}

/* ==========================================================================
   S9 · AUTOAJR
   ========================================================================= */
/* Deep band with a geometric overlay — the Islamic-pattern reference from
   the brief, drawn in CSS so there is no asset to ship. */
/* Near-black, not maroon: this band now sits directly under the maroon
   impact band, and no two neighbouring bands should share a ground. */
.autoajr-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #141110;
  color: var(--on-dark-2);
}

.autoajr-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background:
    repeating-linear-gradient(45deg, transparent 0 26px, rgba(255, 190, 185, .10) 26px 28px),
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(255, 190, 185, .10) 26px 28px),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 190, 185, .06) 52px 53px),
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(255, 190, 185, .06) 52px 53px);
}

.autoajr-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(75% 90% at 22% 40%, rgba(74, 14, 16, .9) 0%, rgba(74, 14, 16, .35) 55%, transparent 78%);
}

.autoajr {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center
}

.autoajr__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px
}

.autoajr__hint {
  font-size: .82rem;
  color: var(--on-dark-3)
}

.ayah {
  margin: 24px 0 0;
  padding: 16px 0 4px 20px;
  border-left: 2px solid var(--accent-dark);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #F3DCD9;
  max-width: 52ch;
}

.ayah cite {
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}

.ajrcard {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg);
  padding: 26px 26px 20px;
  backdrop-filter: blur(6px);
}

.ajrcard__top {
  padding-bottom: 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .16)
}

.ajrcard__label {
  margin: 0 0 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}

.ajrcard__amount {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ajrcard__amount span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-dark-3);
  letter-spacing: 0
}

.ajrcard__sub {
  margin: 8px 0 0;
  font-size: .84rem;
  color: var(--on-dark-2)
}

.ajrcard__rows {
  display: flex;
  flex-direction: column
}

.ajrcard__rows li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ajrcard__rows li:last-child {
  border-bottom: 0;
  padding-bottom: 4px
}

.ajrcard__rows .icon {
  width: 26px;
  height: 26px;
  color: var(--accent-dark);
  flex: none;
  margin-top: 1px
}

.ajrcard__rows b {
  display: block;
  font-size: .9rem;
  color: #fff
}

.ajrcard__rows span {
  display: block;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--on-dark-3);
  margin-top: 2px
}

.ajrcard__rows li:hover .icon {
  animation: draw 1.6s cubic-bezier(.33, .9, .28, 1) both
}

/* ==========================================================================
   S10 · NEWS
   ========================================================================= */
.ncard {
  display: flex
}

.ncard a {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}

.ncard a:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3)
}

.ncard__media {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--sand)
}

.ncard__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px 0;
  font-size: .76rem;
  color: var(--ink-3);
}

.ncard .h3 {
  padding-inline: 20px;
  margin: 0
}

.ncard__ex {
  padding: 0 20px;
  font-size: .88rem;
  color: var(--ink-3);
  line-height: 1.5;
  flex: 1
}

.ncard .link {
  padding: 0 20px 20px
}

/* ==========================================================================
   S11 · SOCIAL PROOF
   ⚠ Everything styled here renders INVENTED sample content. `.is-sample`
   marks the whole section so it can be found and stripped in one pass.
   ========================================================================= */
.sample-tag {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8A6A1E;
  background: #FBF0D6;
  border: 1px dashed #DFC079;
  border-radius: var(--r-pill);
  padding: 5px 13px;
}

.quotes {
  margin-top: clamp(6px, 1vw, 12px)
}

.quote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 24px 22px;
  box-shadow: var(--sh-1);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}

.quote:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2)
}

.quote__stars {
  display: flex;
  gap: 3px;
  color: #E0A21A
}

.quote__stars svg {
  width: 16px;
  height: 16px
}

.quote blockquote {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-2);
  flex: 1
}

.quote blockquote::before {
  content: "\201C"
}

.quote blockquote::after {
  content: "\201D"
}

.quote__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--line)
}

.avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.quote__who b {
  display: block;
  font-size: .9rem
}

.quote__who span {
  display: block;
  font-size: .78rem;
  color: var(--ink-3)
}

.proofbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
  margin-top: var(--hci-gap);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--sh-1);
}

.proofbar__ratings {
  display: flex;
  gap: clamp(22px, 3vw, 40px);
  flex-wrap: wrap
}

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

.rating__n {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--red-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rating__n small {
  font-size: .9rem;
  font-weight: 700;
  opacity: .6
}

.rating__l {
  font-size: .76rem;
  line-height: 1.35;
  color: var(--ink-3)
}

.proofbar__label {
  margin: 0 0 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.partners {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.partners li {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 7px 13px;
  background: var(--sand);
}

/* ==========================================================================
   S12 · EMAIL CAPTURE
   ========================================================================= */
.capture {
  padding-block: clamp(44px, 5.5vw, 72px)
}

.capture__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
}

.capture .h2 {
  margin-bottom: .6rem
}

.capture__sub {
  margin: 0;
  font-size: .94rem;
  color: var(--on-dark-3);
  max-width: 44ch
}

.capture__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 290px;
  max-width: 460px
}

.field--email {
  flex: 1;
  min-width: 180px;
  padding: 14px 16px;
  font-size: .94rem;
  border-radius: var(--r-pill)
}



/* ==========================================================================
   S11b · FROM OUR BENEFICIARIES — portrait video carousel
   9:16 cards on a near-black band. Click-to-load facade: no YouTube
   player, script or cookie until the visitor asks for one, and only one
   video is allowed to play at a time.
   ========================================================================= */
.band--dark {
  background: #141110;
  color: var(--on-dark-2)
}

.sample-tag--onDark {
  background: rgba(255, 214, 140, .12);
  border-color: rgba(223, 192, 121, .45);
  color: #E8C88A
}

.vrail__wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px)
}

.vrail {
  display: flex;
  gap: var(--hci-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: 20px 34px;
  margin-block: -14px -24px;
  scrollbar-width: none;
  --vper: 5;
}

.vrail::-webkit-scrollbar {
  display: none
}

.vrail>li {
  flex: 0 0 calc((100% - (var(--vper) - 1) * var(--hci-gap)) / var(--vper));
  scroll-snap-align: start;
  display: flex;
}

.vcard {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #241414;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 18px 40px rgba(0, 0, 0, .45);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}

.vcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 28px 60px rgba(0, 0, 0, .55)
}

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

/* scrim so the caption stays legible over any frame */
.vcard::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 3, 4, .92) 0%, rgba(10, 3, 4, .55) 42%, transparent 100%);
  transition: opacity .28s var(--ease);
}

.vcard.is-playing::after {
  opacity: 0
}

.vcard__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.vcard__btn {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--red);
  transition: transform .28s var(--ease), background-color .28s var(--ease);
}

.vcard__btn svg {
  width: 28px;
  height: 28px;
  margin-left: 2px
}

.vcard__play:hover .vcard__btn,
.vcard__play:focus-visible .vcard__btn {
  transform: scale(1.1);
  background: #fff
}

.vcard__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  transition: opacity .28s var(--ease);
}

.vcard__tag {
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(227, 34, 38, .92);
  padding: 4px 9px;
  border-radius: 5px;
}

.vcard__line {
  font-size: .84rem;
  line-height: 1.4;
  color: #F3E3E0
}

.vcard.is-playing .vcard__meta,
.vcard.is-playing .vcard__play {
  opacity: 0;
  pointer-events: none
}

.vcard iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4
}

.vrail__controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.vrail__nav {
  display: flex;
  gap: 8px
}

.vrail__controls .dots {
  margin-right: auto
}

.vrail__controls .dots button {
  background: rgba(255, 255, 255, .28)
}

.vrail__controls .dots button.is-on {
  background: var(--red)
}

.link--onDark {
  color: var(--accent-dark)
}

/* ==========================================================================
   RESPONSIVE — homepage sections
   ========================================================================= */
@media (max-width:1240px) {
  .vrail {
    --vper: 4
  }
}

@media (max-width:1080px) {

  .zakat__in,
  .story__in,
  .autoajr {
    grid-template-columns: 1fr
  }

  .story__copy {
    order: 1
  }

  .docs {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
  }

  .vrail {
    --vper: 3
  }
}

@media (max-width:900px) {
  .vrail {
    --vper: 3
  }
}

@media (max-width:640px) {

  /* Taller controls strip: the trust line wraps to two lines and the
     controls drop onto their own row, so the slide must reserve more. */
  .hero {
    --hero-ui: 134px
  }

  .hero__slide {
    min-height: min(92vh, 780px)
  }

  .hero__h {
    max-width: none
  }

  .hero__img {
    object-position: 52% 38%
  }

  .hero__ui {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end
  }

  .hero__trust {
    order: -1
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center
  }

  .stats {
    grid-template-columns: repeat(2, 1fr)
  }

  /* 3 across is unreadable here */
  .facts {
    grid-template-columns: repeat(2, 1fr)
  }

  /* 2 columns on mobile — 4 columns has too little room for the impact
     line here and card heights go uneven as text wraps. The 8-card cap
     (nth-child(n+9)) is set once at the base .shelf-grid rule and applies
     at every breakpoint, so it doesn't need repeating here. */
  .shelf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .qcard {
    padding: 16px 14px 14px
  }

  .qcard__ico {
    width: 28px;
    height: 28px
  }

  .qcard__name {
    font-size: .92rem
  }

  .qcard__impact {
    font-size: .78rem
  }

  .qcard__go {
    font-size: .8rem
  }

  .qcard__actions {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .qcard__learn {
    font-size: .74rem
  }

  .vrail {
    --vper: 1.6
  }

  /* portrait cards: show one and a half */
  .vrail__nav {
    display: none
  }

  /* swipe on touch */
  .vrail__controls {
    justify-content: center
  }

  .vrail__controls .dots {
    margin-right: 0
  }

  .capture__in {
    flex-direction: column;
    align-items: stretch
  }

  .stat {
    padding: 20px 18px
  }

  .step::before {
    font-size: 1.9rem
  }

  .nisab {
    padding: 22px 20px
  }
}