/* ==========================================================================
   Upper Hand — Public website: chrome (header, menus, drawer, footer) + home
   ========================================================================== */

/* ---- Announcement bar ------------------------------------------------------ */
.announce { background: var(--brand-900); color: rgb(255 255 255 / 0.88); font-size: var(--text-sm); }
.announce-inner { display: flex; align-items: center; gap: var(--space-3); min-block-size: 2.5rem; padding-block: var(--space-2); }
.announce p { flex: 1; min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce strong { color: var(--accent-300); font-weight: var(--weight-semibold); }
.announce-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent-400); flex-shrink: 0; box-shadow: 0 0 0 0 var(--accent-400); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(243 174 54 / 0); } 100% { box-shadow: 0 0 0 0 rgb(243 174 54 / 0); } }
.announce-link { display: inline-flex; align-items: center; gap: 0.3em; color: #fff; font-weight: var(--weight-semibold); white-space: nowrap; }
.announce-link:hover { color: var(--accent-300); }
.announce-close { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; color: rgb(255 255 255 / 0.6); }
.announce-close:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.announce.is-hidden { display: none; }

/* ---- Header (translucent material, content scrolls beneath) ----------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: var(--z-header);
  background: var(--material-bar);
  backdrop-filter: var(--material-blur); -webkit-backdrop-filter: var(--material-blur);
  transition: box-shadow var(--dur-base) ease, background-color var(--dur-base) ease;
}
/* Scroll edge: a soft fade instead of a hard divider, only once content is beneath */
.site-header::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; block-size: 12px;
  background: linear-gradient(to bottom, rgb(23 32 30 / 0.06), transparent);
  opacity: 0; transition: opacity var(--dur-base) ease; pointer-events: none;
}
.site-header.is-scrolled::after { opacity: 1; }
.header-inner { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: 4.5rem; }
.header-inner > .brand { flex-shrink: 0; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.nav-item { position: relative; display: flex; align-items: center; }
/* Hairline between top-level items (in-flow, so it also works for the static mega-menu item) */
.nav-item + .nav-item::before { content: ""; flex-shrink: 0; inline-size: 1px; block-size: 1rem; margin-inline: 0.3rem; background: var(--color-border-strong); opacity: 0.7; }
.nav-item:has(.menu-mega) { position: static; } /* mega menu centers on the header, not its trigger */
.nav-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.45rem 0.5rem; border-radius: var(--radius-full);
  font-size: 0.875rem; font-weight: var(--weight-medium); color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-link[aria-expanded="true"] { color: var(--color-text); background: rgb(23 32 30 / 0.05); }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--color-primary); }
.nav-chevron { inline-size: 0.875rem; block-size: 0.875rem; opacity: 0.6; transition: transform var(--dur-base) var(--ease-spring); }
.nav-item:hover .nav-chevron, .nav-link[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.header-ctas { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: var(--space-2); }
.header-ctas .btn { padding-inline: 0.9rem; letter-spacing: 0.02em; }
.header-menu { display: none; }

/* Account: "Sign in" when signed out, avatar + menu when signed in */
.header-signin { gap: 0.4rem; padding-inline: 0.75rem; font-size: 0.875rem; font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; }
.header-signin .icon { inline-size: 1.05rem; block-size: 1.05rem; color: var(--color-primary); }
.account-menu { position: relative; display: flex; }
.account-trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.25rem 0.55rem 0.25rem 0.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.875rem; font-weight: var(--weight-semibold); cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.account-trigger .avatar { --size: 2rem; }
.account-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.account-name { max-inline-size: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.menu-account { inset-inline-start: auto; inset-inline-end: 0; translate: none; transform-origin: top right; min-inline-size: 17rem; }
.account-trigger[aria-expanded="true"] + .menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring), visibility 0s;
}
.menu-account form { margin: 0; }
.account-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); min-inline-size: 0; }
.account-card:hover { background: var(--color-surface-hover); }
.account-card .avatar { --size: 2.5rem; flex-shrink: 0; }
.account-card > span { display: grid; min-inline-size: 0; }
.account-card strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card strong + span { font-size: var(--text-xs); color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-item {
  display: flex; align-items: center; gap: var(--space-3); inline-size: 100%;
  padding: 0.55rem var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent;
  font: inherit; font-size: var(--text-sm); color: var(--color-text); text-align: start; cursor: pointer;
}
.account-item:hover, .account-item:focus-visible { background: var(--color-surface-hover); }
.account-item .icon { inline-size: 1rem; block-size: 1rem; color: var(--color-text-subtle); }
.account-item.is-danger, .account-item.is-danger .icon { color: var(--color-danger); }
.account-item.is-notice { color: var(--color-primary); font-weight: var(--weight-semibold); }
.account-item.is-notice .icon { color: currentColor; }
.menu-account .menu-sep { block-size: 1px; margin: var(--space-1) 0; background: var(--color-border); }

/* Dropdown menus — grow from the trigger they belong to */
.menu {
  position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 50%;
  min-inline-size: 20rem; padding: var(--space-2);
  background: var(--color-surface); /* solid: menus sit on a translucent header, nested blur would hurt legibility */
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  transform-origin: top center;
  translate: -50% 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97);
  transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring), visibility 0s linear var(--dur-fast);
}
/* Invisible bridge so the pointer can travel from trigger to menu */
.menu::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -0.75rem; block-size: 0.75rem; }
.nav-item:hover > .menu, .nav-item:focus-within > .menu, .nav-link[aria-expanded="true"] + .menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring), visibility 0s;
}
.nav-item.is-closed > .menu { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.97); }

.menu-list { display: grid; gap: 2px; list-style: none; padding: 0; }
.menu-list:has(> li:nth-child(7)) { grid-template-columns: repeat(2, minmax(15rem, 1fr)); } /* long menus split in two so they never run off the screen */
.menu-link { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background-color var(--dur-fast) ease; }
.menu-link:hover { background: var(--color-surface-hover); }
.menu-icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); }
.menu-icon .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.menu-title { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.menu-desc { display: block; font-size: var(--text-xs); color: var(--color-text-subtle); line-height: 1.45; margin-block-start: 0.1rem; }

.menu-mega { inline-size: min(74rem, calc(100vw - 3rem)); padding: 0; }
.mega-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-3); } /* one column per pillar, however many */
.mega-col { padding: var(--space-3); border-radius: var(--radius-md); transition: background-color var(--dur-fast) ease; }
.mega-col:hover { background: color-mix(in srgb, var(--pillar) 5%, transparent); }
.mega-head { display: grid; gap: var(--space-3); margin-block-end: var(--space-3); }
.mega-title { display: block; font-weight: var(--weight-semibold); font-size: 0.9375rem; }
.mega-head:hover .mega-title { color: var(--pillar); }
.mega-desc { display: block; font-size: var(--text-xs); line-height: 1.45; color: var(--color-text-subtle); margin-block-start: 0.2rem; }
.mega-links { display: grid; gap: 1px; list-style: none; padding: 0; padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
.mega-links a { display: block; padding: 0.3rem 0; font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring); }
.mega-links a:hover { color: var(--color-text); transform: translateX(3px); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6); border-block-start: 1px solid var(--color-border); background: var(--color-surface-2); border-end-start-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); }
.mega-foot-note { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.mega-foot-note .icon { color: var(--accent-600); }
.mega-foot-note a { color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); }

/* Collapse to drawer */
@media (max-width: 80rem) {
  .main-nav { display: none; }
  .header-menu { display: inline-flex; }
}
@media (max-width: 64rem) {
  .account-name { display: none; }
}
@media (max-width: 40rem) {
  .header-ctas { display: none; }
  /* Phones: the account stays one tap away, as an icon */
  .header-signin { padding-inline: 0; inline-size: var(--btn-h, 2.75rem); justify-content: center; }
  .header-signin span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-signin .icon { inline-size: 1.25rem; block-size: 1.25rem; color: currentColor; }
  .account-trigger { padding: 0.2rem; border-color: transparent; background: transparent; }
  .account-trigger .nav-chevron { display: none; }
  .menu.menu-account { position: fixed; inset-inline: var(--space-3); inset-block-start: 4.25rem; min-inline-size: 0; }
}

/* ---- Drawer (mobile nav) — enters and exits from the right edge ------------- */
.sheet.drawer {
  inline-size: min(24rem, 100%); max-inline-size: 100%;
  block-size: 100dvh; max-block-size: 100dvh;
  margin: 0; margin-inline-start: auto;
  border-radius: 0; border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl);
}
.sheet.drawer[open] { animation: drawer-in var(--dur-base) var(--ease-spring); }
.sheet.drawer.is-closing { animation: drawer-out var(--dur-fast) ease-in forwards; }
@keyframes drawer-in  { from { transform: translateX(100%); } }
@keyframes drawer-out { to   { transform: translateX(100%); } }
[dir="rtl"] .sheet.drawer { margin-inline-start: 0; margin-inline-end: auto; }
@media (max-width: 40rem) {
  .sheet.drawer { inline-size: 100%; border-radius: 0; }
  .sheet.drawer[open] { animation: drawer-in var(--dur-base) var(--ease-spring); }
  .sheet.drawer.is-closing { animation: drawer-out var(--dur-fast) ease-in forwards; }
}
.drawer .sheet-head { padding-block: var(--space-4); }
.drawer-body { flex: 1; display: grid; align-content: start; gap: var(--space-5); }
.drawer-ctas { display: grid; gap: var(--space-2); }
.drawer-nav { display: grid; }
.drawer-link, .drawer-group summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0; border-block-end: 1px solid var(--color-border);
  font-size: 1.125rem; font-weight: var(--weight-semibold); letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
}
.drawer-group summary::-webkit-details-marker { display: none; }
.drawer-group summary .icon { color: var(--color-text-subtle); transition: transform var(--dur-base) var(--ease-spring); }
.drawer-group[open] summary .icon { transform: rotate(180deg); }
.drawer-group ul { list-style: none; padding: var(--space-2) 0 var(--space-3); display: grid; }
.drawer-group li a { display: block; padding: var(--space-2) 0; color: var(--color-text-muted); }
.drawer-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding-block: var(--space-3); }
.drawer-pillar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.drawer-pillar .pillar-icon { inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-sm); }
.drawer-pillar .pillar-icon .icon { inline-size: 1rem; block-size: 1rem; }
.drawer-foot { display: grid; grid-template-columns: 1fr 1fr; }
.drawer-foot form { margin: 0; }
.drawer-account, .drawer-contact { grid-column: 1 / -1; }
.drawer-account { border: 1px solid var(--color-border); background: var(--color-surface-2); }
.drawer-account > .icon { margin-inline-start: auto; color: var(--color-text-subtle); }

/* ---- Search sheet -------------------------------------------------------------- */
.search-sheet { align-self: start; margin-block-start: 12vh; }
.search-form { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-block-end: 1px solid var(--color-border); }
.search-form > .icon { color: var(--color-text-subtle); }
.search-input { flex: 1; min-inline-size: 0; border: 0; background: none; font-size: 1.125rem; padding-block: var(--space-2); }
.search-input:focus { outline: none; }
@media (max-width: 40rem) { .search-sheet { align-self: end; margin-block-start: auto; } }

/* ---- Footer --------------------------------------------------------------------- */
.site-footer { background: var(--brand-950); color: rgb(255 255 255 / 0.72); padding-block: var(--space-16) var(--space-8); margin-block-start: var(--section-y); }
.site-footer a { transition: color var(--dur-fast) ease; }
.site-footer a:hover { color: #fff; }
.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
  padding: var(--space-10); margin-block: calc(var(--space-16) * -1 - var(--section-y) * 0.5) var(--space-16);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent-500) 22%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: #fff; box-shadow: var(--shadow-xl);
}
.footer-cta-copy { display: grid; gap: var(--space-3); max-inline-size: 36rem; }
.footer-cta .eyebrow { color: var(--accent-300); }
.footer-cta h2 { font-size: var(--text-h2); }
.footer-cta p { color: rgb(255 255 255 / 0.78); }

.footer-main { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr) 1.5fr; gap: var(--space-8); padding-block-end: var(--space-12); }
.footer-about { display: grid; gap: var(--space-5); align-content: start; }
.footer-about > p { font-size: var(--text-sm); max-inline-size: 34ch; }
.footer-contact { display: grid; gap: var(--space-3); list-style: none; padding: 0; font-size: var(--text-sm); }
.footer-contact li { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer-contact .icon { color: var(--brand-300); margin-block-start: 0.15rem; }
.footer-social { display: flex; gap: var(--space-2); }
.footer-social a { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: rgb(255 255 255 / 0.07); transition: background-color var(--dur-fast) ease, transform var(--dur-base) var(--ease-spring); }
.footer-social a:hover { background: rgb(255 255 255 / 0.16); }
.footer-social a:active { transform: scale(0.92); }
.footer-social .icon { inline-size: 1.125rem; block-size: 1.125rem; }
.footer-col h3, .footer-news h3 { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: #fff; letter-spacing: 0; margin-block-end: var(--space-4); }
.footer-col ul { display: grid; gap: var(--space-3); list-style: none; padding: 0; font-size: var(--text-sm); }
.footer-news p { font-size: var(--text-sm); margin-block-end: var(--space-4); }
.newsletter { display: flex; gap: var(--space-2); }
.newsletter .input { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.14); color: #fff; }
.newsletter .input::placeholder { color: rgb(255 255 255 / 0.45); }
.newsletter .input:focus { border-color: var(--brand-300); }
.newsletter .btn { --btn-h: 2.875rem; border-radius: var(--radius-input); flex-shrink: 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); flex-wrap: wrap; padding-block-start: var(--space-6); border-block-start: 1px solid rgb(255 255 255 / 0.1); font-size: var(--text-xs); color: rgb(255 255 255 / 0.5); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer-locale { display: inline-flex; align-items: center; gap: var(--space-2); }

@media (max-width: 75rem) {
  .footer-main { grid-template-columns: repeat(4, 1fr); }
  .footer-about { grid-column: 1 / -1; }
  .footer-news { grid-column: 1 / -1; max-inline-size: 28rem; }
}
@media (max-width: 40rem) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-4); }
  .footer-cta { padding: var(--space-6); }
  .footer-cta .cluster, .footer-cta .btn { inline-size: 100%; }
}

/* ---- Mobile donate bar --------------------------------------------------------- */
.mobile-donate {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky);
  padding: var(--space-3) var(--gutter) max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--material-bar); backdrop-filter: var(--material-blur); -webkit-backdrop-filter: var(--material-blur);
  border-block-start: 1px solid var(--material-bar-edge);
  transform: translateY(110%); transition: transform var(--dur-base) var(--ease-spring);
  display: none;
}
.mobile-donate.is-visible { transform: none; }
.mobile-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 48rem) {
  .mobile-donate { display: block; }
  .site-footer { padding-block-end: calc(var(--space-8) + 5rem); } /* room for the donate bar */
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--space-16); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero-copy { display: grid; gap: var(--space-6); justify-items: start; }
.hero-copy .display em { font-style: italic; color: var(--color-primary); font-variation-settings: "SOFT" 100, "WONK" 1; }
.hero-copy .lead { max-inline-size: 34rem; }
.hero-trust { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.avatar-stack { display: flex; }
.avatar-stack .avatar { --size: 2.25rem; border: 2px solid var(--color-bg); margin-inline-start: -0.6rem; font-size: 0.75rem; }
.avatar-stack .avatar:first-child { margin-inline-start: 0; }
.avatar-stack .avatar:nth-child(2) { background: var(--accent-100); color: var(--accent-700); }
.avatar-stack .avatar:nth-child(3) { background: color-mix(in srgb, var(--pillar-education) 14%, white); color: var(--pillar-education); }
.hero-trust strong { color: var(--color-text); }

.hero-visual { position: relative; min-block-size: 34rem; }
.hero-photo { position: absolute; inset: 0 0 3rem 3rem; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 50%, rgb(5 32 30 / 0.45)); }
.hero-chip {
  position: absolute; inset-block-start: 1.5rem; inset-inline-end: -0.75rem; z-index: 2;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--material-thick); backdrop-filter: var(--material-blur); -webkit-backdrop-filter: var(--material-blur);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm);
}
.hero-chip .pillar-icon { border-radius: 50%; inline-size: 2.5rem; block-size: 2.5rem; }
.hero-chip strong { display: block; font-size: 1.0625rem; letter-spacing: -0.01em; }
.hero-chip span { color: var(--color-text-muted); font-size: var(--text-xs); }

.quick-donate {
  position: absolute; inset-inline-start: 0; inset-block-end: 0; z-index: 2;
  inline-size: min(21.5rem, 92%);
  display: grid; gap: var(--space-4); padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--material-thick); backdrop-filter: var(--material-blur); -webkit-backdrop-filter: var(--material-blur);
  border: 1px solid var(--material-bar-edge);
  box-shadow: var(--shadow-xl);
}
.quick-donate-head { display: flex; align-items: center; justify-content: space-between; }
.quick-donate-head h2 { font-family: var(--font-sans); font-size: 1rem; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.quick-donate .amount-grid { grid-template-columns: repeat(3, 1fr); }
.quick-donate .amount-chip { min-block-size: 2.75rem; font-size: var(--text-sm); }
.quick-donate .select { min-block-size: 2.75rem; font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { min-block-size: 0; display: grid; gap: var(--space-4); }
  .hero-photo { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .hero-chip { inset-inline-end: var(--space-3); inset-block-start: var(--space-3); }
  .quick-donate { position: relative; inline-size: 100%; margin-block-start: -5rem; margin-inline: auto; max-inline-size: 26rem; }
}

/* ---- Trust strip ---------------------------------------------------------------- */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-block: var(--space-6); border-block: 1px solid var(--color-border); }
.trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.trust-item .icon { color: var(--color-primary); inline-size: 1.5rem; block-size: 1.5rem; }
.trust-item strong { display: block; color: var(--color-text); font-weight: var(--weight-semibold); }
@media (max-width: 60rem) { .trust-strip { grid-template-columns: 1fr 1fr; } }

/* ---- Section head with action ----------------------------------------------------- */
.section-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-block-end: var(--space-10); }
.section-bar .section-head { margin-block-end: 0; }

/* ---- Emergency feature --------------------------------------------------------- */
.emergency {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
}
.emergency-media { position: relative; min-block-size: 24rem; }
.emergency-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.emergency-media .media-badges { inset: var(--space-5); }
.emergency-body { display: grid; gap: var(--space-5); align-content: center; padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.emergency-body h2 { font-size: var(--text-h2); }
.emergency-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-block: 1px solid var(--color-border); }
.emergency-stats strong { display: block; font-size: 1.25rem; font-weight: var(--weight-bold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.emergency-stats span { font-size: var(--text-xs); color: var(--color-text-subtle); }
@media (max-width: 60rem) {
  .emergency { grid-template-columns: minmax(0, 1fr); }
  .emergency-media { min-block-size: 15rem; }
}

/* ---- Pillars ----------------------------------------------------------------------- */
.pillars-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); }
.pillars-grid .card-pillar { min-block-size: 27rem; }
.pillar-stat { display: flex; align-items: baseline; gap: var(--space-2); padding-block-start: var(--space-3); margin-block-start: var(--space-1); border-block-start: 1px solid rgb(255 255 255 / 0.2); font-size: var(--text-xs); color: rgb(255 255 255 / 0.75); }
.pillar-stat strong { font-size: 1.25rem; color: #fff; font-weight: var(--weight-bold); }
.pillar-more { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: #fff; }
.pillar-more .icon { transition: transform var(--dur-base) var(--ease-spring); }
.card-pillar:hover .pillar-more .icon { transform: translateX(4px); }
@media (max-width: 75rem) {
  .pillars-grid { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .pillars-grid .card-pillar:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 40rem) { .pillars-grid { grid-template-columns: minmax(0, 1fr); } .pillars-grid .card-pillar { min-block-size: 20rem; } }

/* ---- Impact band --------------------------------------------------------------------- */
.impact-band {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--brand-500) 45%, transparent), transparent 60%),
    radial-gradient(60% 100% at 100% 100%, color-mix(in srgb, var(--accent-500) 18%, transparent), transparent 60%),
    var(--brand-900);
}
.impact-band .section-head .eyebrow { color: var(--accent-300); }
.impact-band .lead { color: rgb(255 255 255 / 0.75); }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgb(255 255 255 / 0.1); border-radius: var(--radius-xl); overflow: hidden; }
.impact-cell { display: grid; gap: var(--space-2); padding: var(--space-8); background: var(--brand-900); }
.impact-cell .stat-icon { color: var(--brand-300); }
.impact-cell .stat-value { color: #fff; }
.impact-cell .stat-label { color: rgb(255 255 255 / 0.7); }
.impact-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block-start: var(--space-8); font-size: var(--text-sm); color: rgb(255 255 255 / 0.65); }
.impact-foot .live { display: inline-flex; align-items: center; gap: var(--space-2); }
.impact-foot .live::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: #4cc787; box-shadow: 0 0 0 3px rgb(76 199 135 / 0.25); }
@media (max-width: 60rem) { .impact-grid { grid-template-columns: 1fr 1fr; } .impact-cell { padding: var(--space-6); } }

/* ---- How giving works (donation journey) ------------------------------------------- */
.journey { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.steps { display: grid; gap: var(--space-2); counter-reset: s; list-style: none; padding: 0; margin-block-start: var(--space-8); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); transition: background-color var(--dur-fast) ease; }
.steps li:hover { background: var(--color-surface); }
.steps li::before {
  counter-increment: s; content: counter(s);
  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-weight: var(--weight-bold);
}
.steps h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.steps p { font-size: var(--text-sm); color: var(--color-text-muted); margin-block-start: 0.2rem; }

.tracker { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); display: grid; gap: var(--space-5); }
.tracker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-border); }
.tracker-amount { font-size: 1.75rem; font-weight: var(--weight-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.timeline { display: grid; list-style: none; padding: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); padding-block-end: var(--space-5); }
.timeline li:last-child { padding-block-end: 0; }
.timeline li::after { content: ""; position: absolute; inset-inline-start: 0.6875rem; inset-block: 1.625rem 0.25rem; inline-size: 2px; background: var(--color-border); }
.timeline li:last-child::after { display: none; }
.tl-dot { display: grid; place-items: center; inline-size: 1.375rem; block-size: 1.375rem; border-radius: 50%; background: var(--color-primary); color: #fff; margin-block-start: 0.1rem; }
.tl-dot .icon { inline-size: 0.75rem; block-size: 0.75rem; stroke-width: 3; }
.tl-dot.pending { background: var(--color-surface); border: 2px solid var(--color-border-strong); }
.tl-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.tl-desc { font-size: var(--text-xs); color: var(--color-text-subtle); }
.tl-date { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; }
.tl-photo { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.tl-photo img { inline-size: 4.5rem; block-size: 3.25rem; object-fit: cover; border-radius: var(--radius-xs); }
@media (max-width: 60rem) { .journey { grid-template-columns: minmax(0, 1fr); } }

/* ---- Featured story with before/after compare ---------------------------------------- */
.story-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.compare {
  --pos: 50%;
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); user-select: none; touch-action: pan-y;
}
.compare img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.compare .compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-handle {
  position: absolute; inset-block: 0; inset-inline-start: var(--pos); inline-size: 3px; margin-inline-start: -1.5px;
  background: #fff; box-shadow: 0 0 12px rgb(0 0 0 / 0.3); pointer-events: none;
}
.compare-handle::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 2.75rem; block-size: 2.75rem; translate: -50% -50%; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146b5f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18-6-6 6-6'/%3E%3Cpath d='m15 6 6 6-6 6'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-spring);
}
.compare.is-dragging .compare-handle::after { transform: scale(1.12); }
.compare-label { position: absolute; inset-block-end: var(--space-4); z-index: 1; pointer-events: none; }
.compare-label.before { inset-inline-start: var(--space-4); }
.compare-label.after { inset-inline-end: var(--space-4); }
.compare input[type="range"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare input[type="range"]:focus-visible ~ .compare-handle::after { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 50%, transparent), var(--shadow-md); }

.story-copy { display: grid; gap: var(--space-5); }
.story-copy blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.story-copy blockquote::before { content: "“"; display: block; font-size: 4rem; line-height: 0.6; color: var(--accent-500); margin-block-end: var(--space-2); }
.story-person { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.story-person strong { display: block; color: var(--color-text); }
.story-more { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block-start: var(--space-12); }
.story-mini { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); position: relative; transition: box-shadow var(--dur-base) var(--ease-spring), transform var(--dur-base) var(--ease-spring); }
.story-mini:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.story-mini img { inline-size: 6.5rem; block-size: 5rem; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.story-mini h3 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.35; }
.story-mini a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 60rem) {
  .story-feature { grid-template-columns: minmax(0, 1fr); }
  .story-more { grid-template-columns: minmax(0, 1fr); }
}

/* ---- News card ------------------------------------------------------------------------ */
.card-news .media { --ratio: 16 / 10; }
.card-news .card-title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: var(--weight-semibold); letter-spacing: -0.015em; line-height: 1.25; }


/* ---- Section tints -------------------------------------------------------------------- */
.bg-sunken { background: var(--color-bg-sunken); }

/* ---- Flagship programs (home): Yatama and Qurbani ------------------------------------------------- */
.program-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.program-card { display: grid; align-content: start; gap: var(--space-4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--pillar) 22%, var(--color-border)); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pillar) 12%, transparent), transparent 60%), var(--color-surface); box-shadow: var(--shadow-sm); }
.program-card .eyebrow { color: var(--pillar); }
.program-card h3 { font-size: var(--text-h3); }
.program-card > p { color: var(--color-text-muted); }
.program-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding-block: var(--space-4); border-block: 1px solid var(--color-border); }
.program-stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.program-stats dt { font-size: var(--text-xs); color: var(--color-text-subtle); }
.program-stats dd { margin: 0; font-size: 1.375rem; font-weight: var(--weight-semibold); letter-spacing: -0.01em; color: var(--color-text); font-variant-numeric: tabular-nums; }
@media (max-width: 60rem) { .program-duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .program-stats dd { font-size: 1.125rem; } }

/* Home quick-donate: all suggested amounts in one swipeable row, custom amount last */
.amount-strip { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); scroll-padding-inline: var(--space-5); cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 2.25rem), transparent); mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 2.25rem), transparent); }
.amount-strip.at-start { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent); }
.amount-strip.at-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem); mask-image: linear-gradient(to right, transparent, #000 1.25rem); }
.amount-strip.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
.amount-strip::-webkit-scrollbar { display: none; }
.amount-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.amount-strip.is-dragging .amount-chip { pointer-events: none; }
.amount-strip .amount-chip { flex: 0 0 calc((100% - 2 * var(--space-2)) / 3.35); scroll-snap-align: start; }
.amount-custom { flex: 0 0 11rem; display: flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; padding-inline: var(--space-3); border-radius: var(--radius-md); border: 1px dashed var(--color-border-strong); background: var(--color-surface); font-size: var(--text-sm); scroll-snap-align: end; cursor: text; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.amount-custom span { font-size: 0.6875rem; font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
.amount-custom input { flex: 1; min-inline-size: 0; border: 0; background: transparent; font: inherit; font-weight: var(--weight-semibold); color: var(--color-text); }
.amount-custom input::placeholder { font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.amount-custom input:focus { outline: none; }
.amount-custom:focus-within, .amount-custom.is-active { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); }