/* ==========================================================================
   Upper Hand — Inner pages (about, pillars, projects, campaigns, stories,
   news, impact, transparency, gallery, contact, forms, legal)
   ========================================================================== */

/* ---- Page hero ------------------------------------------------------------ */
.page-hero {
  --pillar: var(--color-primary);
  position: relative;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--pillar) 10%, transparent), transparent 60%),
    var(--color-bg);
  border-block-end: 1px solid var(--color-border);
}
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.page-hero.has-image .page-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.page-hero-copy { display: grid; gap: var(--space-5); justify-items: start; max-inline-size: 46rem; }
.page-hero .breadcrumbs { margin-block-end: var(--space-2); }
.page-hero[data-pillar] .eyebrow { color: var(--pillar); }
.page-hero-media { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.page-hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.hero-meta span { display: inline-flex; align-items: center; gap: 0.4em; }
@media (max-width: 60rem) { .page-hero.has-image .page-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Filter bar (listings) --------------------------------------------------- */
.filter-bar {
  position: sticky; inset-block-start: 4.5rem; z-index: var(--z-sticky);
  background: var(--material-bar); backdrop-filter: var(--material-blur); -webkit-backdrop-filter: var(--material-blur);
  border-block-end: 1px solid var(--color-border);
}
.filter-bar-inner { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.filter-bar .pills { flex: 1; }
.filter-bar .cselect { inline-size: 12rem; flex-shrink: 0; }
.filter-bar .cselect-trigger { min-block-size: 2.5rem; font-size: var(--text-sm); border-radius: var(--radius-full); }
.search-field { position: relative; inline-size: 14rem; flex-shrink: 0; }
.search-field .icon { position: absolute; inset-inline-start: 0.85rem; inset-block-start: 50%; translate: 0 -50%; color: var(--color-text-subtle); inline-size: 1rem; block-size: 1rem; }
.search-field .input { min-block-size: 2.5rem; padding-inline-start: 2.4rem; border-radius: var(--radius-full); font-size: var(--text-sm); }
.results-line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-block-end: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 60rem) {
  .filter-bar-inner { flex-wrap: wrap; }
  .filter-bar .pills { flex-basis: 100%; order: 3; }
  .search-field, .filter-bar .cselect { flex: 1; inline-size: auto; }
}

/* ---- Detail layout (project, campaign) --------------------------------------- */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.detail-aside { position: sticky; inset-block-start: 6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.detail-main { display: grid; gap: var(--space-12); min-inline-size: 0; }
.detail-main > section { display: grid; gap: var(--space-5); }
.detail-main h2 { font-size: var(--text-h3); }
@media (max-width: 60rem) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { position: static; order: -1; }
}

.detail-cover { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-md); }
.detail-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.donate-card {
  display: grid; gap: var(--space-4); padding: var(--space-6);
  border-radius: var(--radius-xl); background: var(--color-surface);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
}
.donate-card-amount { display: grid; gap: 2px; }
.donate-card-raised { font-size: 1.75rem; font-weight: var(--weight-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.donate-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding-block: var(--space-3); border-block: 1px solid var(--color-border); }
.donate-card-stats strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.donate-card-stats span { font-size: var(--text-xs); color: var(--color-text-subtle); }
.donate-card-share { display: flex; align-items: center; justify-content: space-between; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.fact { display: grid; gap: 2px; padding: var(--space-4) var(--space-5); background: var(--color-surface); }
.fact dt { display: flex; align-items: center; gap: 0.4em; font-size: var(--text-xs); color: var(--color-text-subtle); }
.fact dd { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-sm); }

.hierarchy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.hierarchy .icon { inline-size: 0.9rem; block-size: 0.9rem; color: var(--color-text-subtle); }
.hierarchy a { padding: 0.25rem 0.65rem; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); font-weight: var(--weight-medium); }
.hierarchy a:hover { border-color: var(--pillar, var(--color-primary)); color: var(--pillar, var(--color-primary)); }

/* Progress updates timeline */
.updates { display: grid; list-style: none; padding: 0; }
.update { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); padding-block-end: var(--space-8); }
.update:last-child { padding-block-end: 0; }
.update::before { content: ""; position: absolute; inset-inline-start: calc(1.25rem - 1px); inset-block: 2.75rem 0.5rem; inline-size: 2px; background: var(--color-border); }
.update:last-child::before { display: none; }
.update-dot { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.update.is-latest .update-dot { background: var(--color-primary); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.update-body { display: grid; gap: var(--space-2); padding-block-start: 0.35rem; }
.update-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.update-head h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.update-date { font-size: var(--text-xs); color: var(--color-text-subtle); }
.update-body p { color: var(--color-text-muted); font-size: var(--text-sm); }
.update-body img { border-radius: var(--radius-md); aspect-ratio: 16 / 9; object-fit: cover; inline-size: min(100%, 28rem); margin-block-start: var(--space-2); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: var(--space-3); }
.gallery-grid.masonry { display: block; columns: 3 16rem; column-gap: var(--space-3); }
.gallery-grid.masonry .gallery-item { margin-block-end: var(--space-3); break-inside: avoid; }
.gallery-item { position: relative; display: block; inline-size: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-sunken); cursor: zoom-in; }
.gallery-grid:not(.masonry) .gallery-item { aspect-ratio: 4 / 3; }
.gallery-item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-spring); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--space-6) var(--space-3) var(--space-3); background: linear-gradient(transparent, rgb(0 0 0 / 0.6)); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-medium); text-align: start; opacity: 0; transition: opacity var(--dur-base) ease; }
.gallery-item:hover figcaption, .gallery-item:focus-visible figcaption { opacity: 1; }
.gallery-item .badge { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); }
.lightbox { inline-size: min(64rem, calc(100% - 2rem)); background: #0b0f0e; color: #fff; }
.lightbox img { inline-size: 100%; max-block-size: 78vh; object-fit: contain; }
.lightbox .sheet-head { border-color: rgb(255 255 255 / 0.1); }
.lightbox .btn-ghost { --btn-fg: #fff; --btn-bg-hover: rgb(255 255 255 / 0.1); }

/* Documents */
.doc-list { display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.doc { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border); transition: background-color var(--dur-fast) ease; }
.doc:last-child { border-block-end: 0; }
.doc:hover { background: var(--color-surface-hover); }
.doc-icon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-sm); background: var(--color-danger-soft); color: var(--color-danger); flex-shrink: 0; font-size: 0.625rem; font-weight: var(--weight-bold); letter-spacing: 0.04em; }
.doc-main { flex: 1; min-inline-size: 0; }
.doc-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.doc-meta { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---- Pillar & department ------------------------------------------------------ */
.pillar-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.pillar-stats .stat { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.pillar-stats .stat-value { color: var(--pillar, var(--color-text)); }
@media (max-width: 40rem) { .pillar-stats { grid-template-columns: 1fr; } }

.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: var(--space-4); }
.dept-card { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); transition: box-shadow var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) ease; }
.dept-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: color-mix(in srgb, var(--pillar) 35%, var(--color-border)); }
.dept-card h3 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.dept-card h3 a::after { content: ""; position: absolute; inset: 0; }
.dept-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.chip-list li { padding: 0.2rem 0.6rem; border-radius: var(--radius-full); background: var(--color-bg-sunken); font-size: var(--text-xs); color: var(--color-text-muted); }
.dept-card .link { position: relative; z-index: 1; color: var(--pillar); font-size: var(--text-sm); margin-block-start: var(--space-2); }

.confidential {
  display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--pillar) 7%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--pillar) 25%, transparent);
}
.confidential > .icon { color: var(--pillar); inline-size: 1.75rem; block-size: 1.75rem; flex-shrink: 0; }
.confidential h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); margin-block-end: var(--space-1); }
.confidential p { font-size: var(--text-sm); color: var(--color-text-muted); }

.split-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split-feature img { border-radius: var(--radius-xl); aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; box-shadow: var(--shadow-md); }
@media (max-width: 60rem) { .split-feature { grid-template-columns: minmax(0, 1fr); } }

/* Our Work overview: pillar rows */
.pillar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; padding-block: var(--space-12); border-block-end: 1px solid var(--color-border); }
.pillar-row:nth-child(even) .pillar-row-media { order: 2; }
.pillar-row-media { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 5 / 4; }
.pillar-row-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pillar-row-copy { display: grid; gap: var(--space-4); justify-items: start; }
.pillar-row-copy h2 { color: var(--color-text); }
.pillar-row-copy .eyebrow { color: var(--pillar); }
.dept-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-6); list-style: none; padding: 0; inline-size: 100%; }
.dept-links a { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.dept-links a .icon { color: var(--pillar); inline-size: 1rem; block-size: 1rem; }
.dept-links a:hover { color: var(--pillar); }
@media (max-width: 60rem) {
  .pillar-row { grid-template-columns: minmax(0, 1fr); }
  .pillar-row:nth-child(even) .pillar-row-media { order: 0; }
  .dept-links { grid-template-columns: 1fr; }
}

/* ---- About ---------------------------------------------------------------------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.mv-card { display: grid; gap: var(--space-4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-xl); }
.mv-card.mission { background: var(--brand-900); color: #fff; }
.mv-card.mission .eyebrow { color: var(--accent-300); }
.mv-card.vision { background: var(--color-surface); border: 1px solid var(--color-border); }
.mv-card p { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.35; letter-spacing: -0.015em; }
.mv-card.mission p { color: rgb(255 255 255 / 0.92); }
.hadith { display: grid; gap: var(--space-2); margin-block-start: var(--space-6); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--accent-50); border: 1px solid var(--accent-200); text-align: center; }
.hadith p { font-family: var(--font-display); font-size: 1.375rem; font-style: italic; }
.hadith span { font-size: var(--text-xs); color: var(--accent-700); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
[data-theme="dark"] .hadith { background: rgb(239 160 33 / 0.08); border-color: rgb(239 160 33 / 0.2); }
@media (max-width: 48rem) { .mv-grid { grid-template-columns: 1fr; } }

.value-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--space-4); }
.value { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.value .pillar-icon { background: var(--color-primary-soft); color: var(--color-primary); }
.value h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.value p { font-size: var(--text-sm); color: var(--color-text-muted); }

.journey-line { display: grid; list-style: none; padding: 0; position: relative; }
.journey-line::before { content: ""; position: absolute; inset-block: 1.5rem; inset-inline-start: calc(6rem - 1px); inline-size: 2px; background: linear-gradient(var(--brand-200), var(--brand-500)); }
.journey-item { display: grid; grid-template-columns: 4rem 2.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); align-items: start; }
.journey-year { font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--weight-semibold); letter-spacing: -0.02em; text-align: end; line-height: 1.2; }
.journey-dot { justify-self: center; margin-block-start: 0.4rem; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-primary); position: relative; z-index: 1; }
.journey-item:last-child .journey-dot { background: var(--color-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.journey-item h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.journey-item p { font-size: var(--text-sm); color: var(--color-text-muted); }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4); }
.member { position: relative; display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); transition: box-shadow var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring); }
.member:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.member-photo { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, var(--brand-100), var(--brand-200)); display: grid; place-items: center; }
.member-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.member-photo .initials { font-family: var(--font-display); font-size: 3rem; font-weight: var(--weight-semibold); color: var(--brand-700); }
.member-info { display: grid; gap: 2px; padding-inline: var(--space-2); }
.member-name { font-weight: var(--weight-semibold); }
.member-role { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-medium); }
.member-bio { font-size: var(--text-xs); color: var(--color-text-muted); margin-block-start: var(--space-1); line-height: 1.5; }

.founder { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.founder .member-photo { border-radius: var(--radius-lg); }
.founder blockquote { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.35; letter-spacing: -0.015em; }
@media (max-width: 48rem) { .founder { grid-template-columns: 1fr; } .founder .member-photo { max-inline-size: 12rem; } }

.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: var(--space-3); }
.partner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.partner strong { display: block; font-size: var(--text-sm); }
.partner span { font-size: var(--text-xs); color: var(--color-text-subtle); }

/* ---- Accordion (FAQ) --------------------------------------------------------------- */
.accordion { display: grid; border-block-start: 1px solid var(--color-border); }
.accordion details { border-block-end: 1px solid var(--color-border); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); cursor: pointer; list-style: none; font-weight: var(--weight-semibold); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { flex-shrink: 0; color: var(--color-text-subtle); transition: transform var(--dur-base) var(--ease-spring); }
.accordion details[open] summary .icon { transform: rotate(45deg); color: var(--color-primary); }
.accordion details p { padding-block-end: var(--space-5); color: var(--color-text-muted); max-inline-size: 60ch; }

/* ---- Article / story reading ----------------------------------------------------------- */
.reading { max-inline-size: 44rem; margin-inline: auto; }
.reading .prose { max-inline-size: none; font-size: 1.0625rem; }
.reading .prose p { line-height: 1.75; }
.reading .prose p:first-of-type::first-letter { font-family: var(--font-display); float: left; font-size: 3.75rem; line-height: 0.9; padding: 0.3rem 0.6rem 0 0; color: var(--color-primary); font-weight: var(--weight-semibold); }
.pull-quote { margin-block: var(--space-8); padding-inline-start: var(--space-6); border-inline-start: 3px solid var(--accent-500); font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.3; letter-spacing: -0.015em; }
.pull-quote cite { display: block; margin-block-start: var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); font-style: normal; color: var(--color-text-muted); }
.article-cover { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 9; margin-block-end: var(--space-10); box-shadow: var(--shadow-md); }
.article-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.author-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.author-row strong { color: var(--color-text); display: block; }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-start: var(--space-10); padding-block: var(--space-5); border-block: 1px solid var(--color-border); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Featured news */
.news-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); position: relative; margin-block-end: var(--space-8); }
.news-feature .media { aspect-ratio: auto; min-block-size: 22rem; }
.news-feature .card-body { padding: clamp(1.5rem, 1rem + 2vw, 3rem); justify-content: center; }
.news-feature .card-title { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.02em; }
@media (max-width: 48rem) { .news-feature { grid-template-columns: 1fr; } .news-feature .media { min-block-size: 14rem; } }

/* ---- Impact ----------------------------------------------------------------------------- */
.impact-table-wrap { display: grid; gap: var(--space-4); }
.bar-list { display: grid; gap: var(--space-3); }
.bar-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 3rem; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.bar-track { block-size: 0.75rem; border-radius: var(--radius-full); background: var(--color-bg-sunken); overflow: hidden; }
.bar-fill { block-size: 100%; border-radius: inherit; background: var(--bar, var(--color-primary)); inline-size: var(--w); }
.bar-row strong { text-align: end; font-variant-numeric: tabular-nums; }
.region-map { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); min-block-size: 24rem; background: var(--color-bg-sunken); }
.region-map iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; filter: saturate(0.85); }
.region-legend { position: absolute; inset-block-end: var(--space-4); inset-inline-start: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); z-index: 1; }

/* ---- Transparency --------------------------------------------------------------------------- */
.util { display: grid; gap: var(--space-5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); }
.util-bar { display: flex; block-size: 3rem; border-radius: var(--radius-md); overflow: hidden; gap: 3px; }
.util-bar span { background: var(--c); flex: var(--p) 0 0; transition: flex var(--dur-slow) var(--ease-spring); }
.util-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-3); }
.util-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.util-legend i { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.util-legend strong { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.report-featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--space-4); }
.report-card { position: relative; display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); transition: box-shadow var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring); }
.report-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.report-cover { aspect-ratio: 3 / 2; border-radius: var(--radius-md); display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); color: #fff; text-align: center; padding: var(--space-4); }
.report-cover strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; }
.report-cover span { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-300); }
.report-card h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.trust-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.trust-point { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.trust-point .icon { color: var(--color-primary); inline-size: 1.75rem; block-size: 1.75rem; }
.trust-point h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.trust-point p { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 60rem) { .trust-points { grid-template-columns: 1fr; } }

/* ---- Forms pages ---------------------------------------------------------------------------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.form-card { display: grid; gap: var(--space-6); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.form-card h2 { font-size: var(--text-h3); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-5); }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-section-title { grid-column: 1 / -1; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-subtle); letter-spacing: 0.06em; text-transform: uppercase; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.form-note, .field-hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.field-hint { font-size: var(--text-xs); margin-block-start: var(--space-2); }
fieldset.field { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.field .choice .pillar-icon { inline-size: 2.25rem; block-size: 2.25rem; flex-shrink: 0; }
.file-names { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.help-papers { margin: 0; }
.help-papers a { font-weight: var(--weight-semibold); }
.help-done { align-content: start; }
.help-done-mark { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); }
.help-done-mark .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.help-next { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.side-stack { display: grid; gap: var(--space-4); position: sticky; inset-block-start: 6rem; }
.info-card { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.info-card h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.info-card p, .info-card li { font-size: var(--text-sm); color: var(--color-text-muted); }
.info-card ul { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.info-card li { display: flex; gap: var(--space-2); }
.info-card li .icon { color: var(--color-primary); flex-shrink: 0; margin-block-start: 0.15rem; inline-size: 1rem; block-size: 1rem; }
.chip-select { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-select label { cursor: pointer; }
.chip-select input { position: absolute; opacity: 0; }
.chip-select span { display: inline-flex; padding: 0.45rem 0.9rem; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); transition: all var(--dur-fast) ease; }
.chip-select input:checked + span { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-ink); }
.chip-select input:focus-visible + span { box-shadow: var(--focus-ring); }
/* Forms page (forms.php): pick a form, its fieldset appears */
.form-step { display: flex; align-items: center; gap: var(--space-3); padding: 0; margin-block-end: var(--space-4); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.form-step-no { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: var(--text-sm); }
.form-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-2); }
.apply-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.apply-head .form-step { margin-block-end: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.apply-head .form-step-no { background: var(--pillar, var(--color-primary)); }
fieldset.apply-fields { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
[data-apply-body] .chip-select input:checked + span { background: color-mix(in srgb, var(--pillar) 10%, var(--color-surface)); border-color: var(--pillar); color: color-mix(in srgb, var(--pillar) 82%, var(--color-text)); }
@media (max-width: 60rem) { .form-layout { grid-template-columns: minmax(0, 1fr); } .side-stack { position: static; } }
@media (max-width: 40rem) { .form-grid { grid-template-columns: 1fr; } }

/* Contact */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.contact-card { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.contact-card .pillar-icon { background: var(--color-primary-soft); color: var(--color-primary); }
.contact-card strong { font-size: var(--text-sm); }
.contact-card span, .contact-card a { font-size: var(--text-sm); color: var(--color-text-muted); }
.contact-card a:hover { color: var(--color-primary); }
@media (max-width: 60rem) { .contact-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .contact-cards { grid-template-columns: 1fr; } }

/* ---- Legal pages ---------------------------------------------------------------------------- */
.legal-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.legal-nav { position: sticky; inset-block-start: 6rem; display: grid; gap: 2px; }
.legal-nav a { padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.legal-nav a:hover { background: var(--color-surface-hover); color: var(--color-text); }
.legal-nav a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.legal-body h2 { font-size: var(--text-h4); font-family: var(--font-sans); margin-block: var(--space-8) var(--space-3); }
.legal-body h2:first-child { margin-block-start: 0; }
.legal-body p, .legal-body li { color: var(--color-text-muted); line-height: 1.7; }
.legal-body ul { padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); margin-block: var(--space-3); }
@media (max-width: 48rem) { .legal-layout { grid-template-columns: 1fr; } .legal-nav { position: static; display: flex; overflow-x: auto; } .legal-nav a { white-space: nowrap; } }

/* ---- 404 --------------------------------------------------------------------------------------- */
.not-found { display: grid; justify-items: center; text-align: center; gap: var(--space-5); padding-block: var(--space-24); }
.not-found .display { color: var(--color-primary); }

.sub-label { margin-block: var(--space-12) var(--space-5); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.lightbox-nav { display: flex; gap: var(--space-1); }
.lightbox figure { position: relative; margin: 0; display: grid; place-items: center; background: #000; }
.lightbox figcaption { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); color: rgb(255 255 255 / 0.75); }
a.kpi:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--pillar, var(--color-primary)) 40%, var(--color-border)); }
a.kpi:active { transform: scale(0.98); }
@media (max-width: 40rem) {
  .donate-card { padding: var(--space-5); }
  .donate-card .amount-chip { min-block-size: 3rem; }
}

/* ---- Yatama program page ---------------------------------------------------------------------- */
.tier { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); transition: border-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) ease; }
.tier:hover { border-color: var(--accent-600); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tier strong { font-size: var(--text-lg); }
.tier-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.tier > .icon { color: var(--accent-600); flex-shrink: 0; }

/* ---- Qurbani pages -------------------------------------------------------------------------------- */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4); }
/* Column layout: the description takes the spare height, so every card's button lines up */
.pkg-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); transition: box-shadow var(--dur-base) ease, transform var(--dur-base) var(--ease-spring), border-color var(--dur-fast) ease; }
.pkg-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-600) 40%, var(--color-border)); }
.pkg-card h3 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.pkg-sub, .pkg-desc { font-size: var(--text-sm); color: var(--color-text-muted); }
.pkg-price { font-size: 1.75rem; font-weight: var(--weight-semibold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pkg-card .hint .icon { color: var(--color-success); }
.pkg-card > .badge, .pkg-card > .pillar-icon { align-self: flex-start; }
.pkg-card > .pkg-desc { flex: 1; }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-4); }
.qty { display: flex; align-items: center; gap: var(--space-2); }
.qty .input { inline-size: 4rem; text-align: center; font-weight: var(--weight-semibold); }

/* ---- Qurbani booking (qurbani-book): package cards, payment like the donation checkout, order summary ---- */
.qb-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--space-2); }
.qb-package { align-items: center; }
.qb-package-text { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.qb-package-price { flex: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb-layout .qty-row { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
.qb-layout .stepper-input button:disabled { opacity: 0.4; cursor: not-allowed; }
.qb-layout fieldset.field { gap: var(--space-4); }
/* A legend is not a grid item, so it needs its own space below */
.qb-layout .form-step { margin-block-end: var(--space-3); }
.qb-layout .form-note { margin: 0; }
.qb-pay .field-error[hidden] { display: none; }
.qb-pay .field-error:not([hidden]) { display: flex; }
.qb-pay .field-hint { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.qb-pay .field-hint .icon { color: var(--color-success); flex: none; }
.qb-amount-row { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.qb-amount-row strong { font-size: var(--text-md); color: var(--color-text); }
.qb-ref { font-family: var(--font-mono, ui-monospace, monospace); }
.qb-done-total { padding-block-start: var(--space-2); border-block-start: 1px solid var(--color-border); }
.qb-done-total strong { font-size: var(--text-lg, 1.125rem); }
.qb-summary .summary-cause .pillar-icon { background: color-mix(in srgb, var(--pillar, var(--color-primary)) 14%, transparent); color: var(--pillar, var(--color-primary)); }
.qb-summary .summary-cause .pillar-icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.qb-summary .summary-fx { text-align: start; margin-block-start: var(--space-1); }
/* The sign-up offer sits inside the confirmation card, so it stacks in one column */
.account-cta.qb-account { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-block-start: var(--space-2); }
.account-cta.qb-account ul { margin-block-start: var(--space-3); }
@media (max-width: 60rem) {
  .qb-summary { order: -1; }
  .qb-summary .qb-next { display: none; }
}

/* ---- Quick Donate (QR) ---------------------------------------------------------------------------- */
.qr-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); justify-items: stretch; margin-block-start: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.qr-panel[hidden] { display: none; }
.qr-box { display: grid; gap: var(--space-2); justify-items: center; justify-self: center; }
.qr { inline-size: 9.5rem; block-size: 9.5rem; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #fff; }
.qr-tag { font-size: var(--text-xs); color: var(--color-text-subtle); }
.qr-panel .qr-details { display: grid; gap: 0; margin: 0; inline-size: 100%; text-align: start; }
.qr-panel .qr-details > div { display: grid; grid-template-columns: 8.25rem minmax(0, 1fr); align-items: center; justify-items: start; gap: var(--space-3); padding-block: 0.65rem; border-block-end: 1px solid var(--color-border); }
.qr-panel .qr-details > div:first-child { padding-block-start: 0; }
.qr-panel .qr-details > div:last-child { padding-block-end: 0; border-block-end: 0; }
.qr-panel .qr-details dt { margin: 0; color: var(--color-text-subtle); font-size: var(--text-sm); font-weight: var(--weight-regular); text-align: start; }
.qr-panel .qr-details dd { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--space-2); inline-size: 100%; margin: 0; text-align: start; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--color-text); }
.qr-panel .qr-details dd > span { min-inline-size: 0; overflow-wrap: anywhere; }
.qr-panel .qr-details .btn { flex-shrink: 0; }
.qr-details .qr-note { justify-content: flex-start; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); }
.qr-note .icon { flex-shrink: 0; margin-block-start: 0.15rem; color: var(--color-primary); }
@media (max-width: 40rem) {
  .qr-panel .qr-details > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; align-items: start; }
}

/* Need Help: step 1 ticks off and step 2 is brought into view once an area is chosen */
.form-step.is-done .form-step-no { background: var(--color-success); }
[data-help-step2] { scroll-margin-block-start: 1.25rem; /* on top of the page-wide scroll padding for the sticky header */ border-radius: var(--radius-md); }
[data-help-step2].is-revealed { animation: step-reveal 1.6s ease-out; }
@keyframes step-reveal { 0% { box-shadow: 0 0 0 0.75rem color-mix(in srgb, var(--color-primary) 16%, transparent); background: color-mix(in srgb, var(--color-primary) 7%, transparent); } 100% { box-shadow: 0 0 0 0.75rem transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { [data-help-step2].is-revealed { animation: none; } }