/* ============================================================================
   HUMAN CONCERN INTERNATIONAL — HOMEPAGE PROTOTYPE
   Adsorse Technologies · August 2026

   Built to be ported into Elementor Pro. The token block below maps 1:1 onto
   Elementor's Global Colors / Global Fonts, so set those first and most of
   this file becomes redundant.

   Brand constraint: header, footer and the existing red are unchanged.
   Everything new is a surface (sand / maroon), a type role (serif accent),
   or a motion rule.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS  */
:root{
  /* Brand — unchanged from the live site */
  --red:#E32226;
  --red-dark:#B71C1F;
  --red-tint:#FCEBEB;

  /* New surfaces */
  --maroon:#4A0E10;
  --maroon-2:#3A0A0C;
  --sand:#FAF7F4;
  --white:#FFFFFF;

  /* Ink — warmer than the current pure black */
  --ink:#151312;
  --ink-2:#4A423E;
  --ink-3:#7A6E68;
  --line:#EAE0D9;
  --line-2:#D8C9C1;

  /* On dark */
  --on-dark:#FFFFFF;
  --on-dark-2:#E8D2CF;
  --on-dark-3:#C79E99;
  --accent-dark:#FF9E96;

  /* Type. Elementor: load Inter (400/600/700) + a serif for the accent role.
     Stacks below are graceful fallbacks so the prototype needs no webfonts. */
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;

  /* Scale */
  --shell:1240px;
  --gap:clamp(1rem,2.4vw,1.75rem);
  --pad-s:clamp(56px,7vw,104px);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;

  /* Wide, low-opacity, multi-stop. A single tight shadow reads as a hard
     edge on hover — these stay soft as the card lifts. */
  --sh-1:0 1px 2px rgba(74,14,16,.035), 0 3px 10px rgba(74,14,16,.035);
  --sh-2:0 2px 6px rgba(74,14,16,.035), 0 10px 24px rgba(74,14,16,.05), 0 22px 48px rgba(74,14,16,.045);
  --sh-3:0 2px 8px rgba(74,14,16,.04), 0 14px 32px rgba(74,14,16,.06), 0 32px 72px rgba(74,14,16,.075);

  --ease:cubic-bezier(.22,.61,.36,1);
  --bar-h:60px;
}

/* ------------------------------------------------------------------ BASE  */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:104px}

body{
  margin:0;
  padding-bottom:var(--bar-h);   /* clears the fixed bottom donate bar */
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}

button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:4px}
.band--maroon :focus-visible,.hero :focus-visible,.donatebar :focus-visible,.header :focus-visible,.footer :focus-visible{outline-color:#FFB3AD}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:999;
  background:var(--red); color:#fff; padding:10px 18px; border-radius:var(--r-pill);
  font-weight:700; font-size:.9rem; transition:top .18s var(--ease);
}
.skip:focus{top:12px}

.sprite{position:absolute; width:0; height:0; overflow:hidden}

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

/* --------------------------------------------------------------- TYPE     */
/* Red text on light grounds uses --red-dark, not --red.
   #E32226 on white is 4.0:1 and fails WCAG AA at these sizes — the exact
   failure flagged on the live site. #B71C1F is 6.2:1 and still reads as
   the brand red. Solid red fills (buttons, tags) keep #E32226. */
.eyebrow{
  margin:0 0 .55rem;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-dark);
}
.eyebrow--onDark{color:var(--accent-dark)}

.h2{
  margin:0 0 .5rem;
  font-size:clamp(1.7rem,3.5vw,2.65rem);
  line-height:1.1; letter-spacing:-.025em; font-weight:700;
  text-wrap:balance;
}
/* The single accent role: one word per heading, never two. */
.h2 em,.hero__h em{
  font-family:var(--serif); font-style:italic; font-weight:500;
  letter-spacing:-.01em; color:var(--red);
}
.h2--onDark{color:var(--on-dark)}
.h2--onDark em{color:var(--accent-dark)}

.h3{margin:0 0 .35rem; font-size:1.12rem; line-height:1.3; font-weight:700; letter-spacing:-.012em}
.h3--onDark{color:var(--on-dark)}

.lead{font-size:1.06rem; color:var(--ink-2); max-width:56ch}
.band--maroon .lead,.autoajr-band .lead{color:var(--on-dark-2)}

/* --------------------------------------------------------------- BUTTONS  */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  border-radius:var(--r-pill); font-weight:700; font-size:.94rem; line-height:1;
  padding:14px 26px; text-decoration:none; white-space:nowrap;
  border:2px solid transparent;
  transition:background-color .2s var(--ease), color .2s var(--ease),
             transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__ico{width:1em; height:1em; flex:none}

.btn--primary{background:var(--red); color:#fff; box-shadow:0 2px 10px rgba(227,34,38,.28)}
.btn--primary:hover{background:var(--red-dark); box-shadow:0 8px 22px rgba(227,34,38,.34)}

.btn--ghost{background:transparent; color:var(--red); border-color:var(--red)}
.btn--ghost:hover{background:var(--red); color:#fff}

.btn--onDark{background:#fff; color:var(--maroon)}
.btn--onDark:hover{background:var(--on-dark-2)}

.btn--sm{padding:10px 20px; font-size:.86rem}
.btn--lg{padding:16px 32px; font-size:1rem}

.link{
  display:inline-flex; align-items:center; gap:.45em;
  color:var(--red-dark); font-weight:700; font-size:.9rem; text-decoration:none;
}
.link svg{width:14px; height:14px; transition:transform .22s var(--ease)}
.link:hover svg{transform:translateX(4px)}
.link--lg{font-size:1rem}

.rnd{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--line-2); color:var(--maroon);
  display:grid; place-items:center; background:#fff;
  transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.rnd svg{width:16px; height:16px}
.rnd .flip{transform:scaleX(-1)}
.rnd:hover{border-color:var(--red); color:var(--red)}
.rnd:disabled{opacity:.35; cursor:not-allowed}
.rnd:disabled:hover{border-color:var(--line-2); color:var(--maroon)}

.tag{
  display:inline-block; align-self:flex-start;
  font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; background:var(--red-tint); color:var(--red-dark);
}
.tag--urgent{background:var(--red); color:#fff}

.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 15px; border-radius:var(--r-pill);
  border:1.5px solid var(--line-2); background:#fff;
  font-size:.85rem; font-weight:700; text-decoration:none; color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover{border-color:var(--red); background:var(--red); color:#fff}
.chip--wide{width:100%}

/* --------------------------------------------------------------- FIELDS   */
.field{
  font:inherit; font-size:.88rem;
  border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1); color:#fff;
  padding:10px 12px;
}
.field::placeholder{color:rgba(255,255,255,.55)}
.field--select{
  appearance:none; padding-right:32px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field--select option{color:var(--ink); background:#fff}
.field--amount{width:96px; padding-left:22px; font-weight:700; font-variant-numeric:tabular-nums}
.field--amount::-webkit-outer-spin-button,.field--amount::-webkit-inner-spin-button{appearance:none; margin:0}
.field--amount{appearance:textfield}

.segmented{display:flex; background:rgba(255,255,255,.12); border-radius:var(--r-pill); padding:3px; flex:none}
.segmented__btn{
  padding:7px 15px; border-radius:var(--r-pill); font-size:.8rem; font-weight:600;
  color:var(--on-dark-2); transition:background-color .2s var(--ease), color .2s var(--ease);
}
.segmented__btn.is-on{background:#fff; color:var(--maroon)}

.amount{position:relative; display:flex; align-items:center}
.amount__sym{position:absolute; left:12px; font-size:.88rem; font-weight:700; color:#fff; pointer-events:none}

/* ==========================================================================
   S0 · STICKY DONATE BAR
   ========================================================================= */
/* Pinned to the bottom edge — within thumb reach on mobile, and it leaves
   the top of the page to the header alone. */
.donatebar{
  position:fixed; inset:auto 0 0 0; z-index:100;
  background:var(--maroon);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -2px 10px rgba(20,5,6,.16), 0 -14px 40px rgba(20,5,6,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
.donatebar__ico{width:13px; height:13px; vertical-align:-2px; margin-right:3px; opacity:.75}
/* Height comes from content only. Never size this from --bar-h: JS writes
   the measured height into that variable, so reading it back here creates a
   resize feedback loop that grows the bar on every observer tick. */
.donatebar__in{
  max-width:var(--shell); margin-inline:auto;
  padding:10px clamp(18px,4vw,32px);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.donatebar__brand{display:flex; align-items:center; gap:9px; text-decoration:none; flex:none}
.donatebar__name{
  font-size:.78rem; font-weight:700; letter-spacing:.02em; color:#fff;
  max-width:9.5em; line-height:1.15;
}
/* Real HCI lockup (logo.svg), 5071.72 × 1410.99 → aspect 3.594.
   The wordmark is white, so it only works on the dark bar / header / footer —
   which is where all three instances sit.
   NOTE FOR BUILD: the logo file's red is #FC0D0D; the site's CSS red is
   #E32226. Left as authored here. Worth reconciling with the brand owner. */
.hcilogo{display:block; flex:none; aspect-ratio:3.594; width:auto}
.hcilogo--sm{height:24px}
.hcilogo--md{height:34px}
.hcilogo--lg{height:44px}

.donatebar__form{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-inline:auto}
.donatebar__trust{
  margin:0; flex:none; font-size:.72rem; letter-spacing:.04em; color:var(--on-dark-3);
  display:inline-flex; align-items:center;
}

/* ==========================================================================
   HEADER — unchanged visual language: dark pill, centred logo
   ========================================================================= */
.header{
  position:sticky; top:0; z-index:90;
  padding:14px clamp(18px,4vw,32px);
}
.header__bar{
  max-width:var(--shell); margin-inline:auto;
  background:#111; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:16px;
  padding:10px 14px 10px 10px;
  box-shadow:var(--sh-2);
}
.header__nav{display:flex; align-items:center; gap:6px; flex:1}
.header__nav--right{justify-content:flex-end}
.navlink{
  padding:8px 11px; border-radius:var(--r-pill);
  font-size:.83rem; font-weight:600; color:#EDE8E6; text-decoration:none; white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.navlink:hover{background:rgba(255,255,255,.1); color:#fff}
.navpill{
  padding:8px 15px; border-radius:var(--r-pill); background:var(--red); color:#fff;
  font-size:.83rem; font-weight:700; text-decoration:none; white-space:nowrap;
}
.navpill:hover{background:var(--red-dark)}

.header__logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.header__wordmark{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  line-height:1.25; color:#fff;
}
.header__wordmark b{font-weight:800}

.header__mobile{display:none; align-items:center; gap:10px; margin-left:auto}
.burger{width:40px; height:40px; display:grid; place-content:center; gap:5px}
.burger span{display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------- HEADER DROPDOWNS  */
.hasmenu{position:relative}
.navlink--menu{display:inline-flex; align-items:center; gap:5px; border:0; font-family:inherit}
.caret{width:12px; height:12px; transition:transform .2s var(--ease)}
.navlink--menu[aria-expanded="true"]{background:rgba(255,255,255,.12); color:#fff}
.navlink--menu[aria-expanded="true"] .caret{transform:rotate(180deg)}

.menu{
  position:absolute; top:calc(100% + 14px); left:0; z-index:20;
  min-width:230px; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  display:flex; flex-direction:column; gap:1px;
  /* closed state: transform + visibility, so nothing flickers on load */
  transform:translateY(-6px); visibility:hidden; opacity:0;
  transition:transform .2s var(--ease), opacity .18s var(--ease), visibility .18s;
}
.hasmenu--right .menu{left:auto; right:0}
.menu--wide{min-width:320px}
.navlink--menu[aria-expanded="true"] + .menu{transform:none; visibility:visible; opacity:1}

.menu a{
  display:block; padding:9px 12px; border-radius:var(--r-sm);
  font-size:.87rem; font-weight:600; color:var(--ink); text-decoration:none;
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
.menu a:hover{background:var(--red-tint); color:var(--red-dark)}
.menu--wide a{padding:10px 12px}
.menu--wide b{display:block; font-size:.88rem; font-weight:700}
.menu--wide span{display:block; font-size:.76rem; font-weight:400; color:var(--ink-3); margin-top:2px}
.menu--wide a:hover span{color:var(--red-dark)}
/* little bridge so the pointer can cross the gap without closing the menu */
.menu::before{content:""; position:absolute; inset:-16px 0 100% 0}

/* ------------------------------------------------------- MOBILE DRAWER  */
.drawer{position:fixed; inset:0; z-index:200}
.drawer[hidden]{display:none}
.drawer__scrim{
  position:absolute; inset:0; background:rgba(20,6,7,.6); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s var(--ease);
}
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(400px,88vw);
  background:#fff; display:flex; flex-direction:column; gap:18px;
  padding:18px 20px 28px; overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .3s var(--ease);
  box-shadow:-12px 0 40px rgba(20,6,7,.28);
}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}

/* Dark strip so the lockup's white wordmark works as authored — never
   invert the logo to fit a light panel. */
.drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:-18px -20px 0; padding:16px 20px; background:#111;
}
.drawer__close{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); color:#fff;
}
.drawer__close svg{width:18px; height:18px}
.drawer__close:hover{background:var(--red); border-color:var(--red); color:#fff}
.drawer__cta{width:100%}

.drawer__nav{display:flex; flex-direction:column; gap:2px}
.drawer__pill{
  display:block; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--red-tint); color:var(--red-dark);
  font-weight:700; font-size:.92rem; text-decoration:none;
}
.drawer__link{
  display:block; padding:13px 14px; border-radius:var(--r-sm);
  font-weight:700; font-size:.95rem; text-decoration:none; color:var(--ink);
}
.drawer__link:hover{background:var(--sand)}

.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 14px; border-radius:var(--r-sm);
  font-weight:700; font-size:.95rem; text-align:left; color:var(--ink);
}
.acc__btn:hover{background:var(--sand)}
.acc__btn .caret{width:14px; height:14px; flex:none}
.acc__btn[aria-expanded="true"]{color:var(--red-dark)}
.acc__btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* Single grid child (.acc__inner) — with several children the extra implicit
   rows are auto-sized and 0fr never collapses anything. */
.acc__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .28s var(--ease);
}
.acc__btn[aria-expanded="true"] + .acc__body{grid-template-rows:1fr}
.acc__inner{overflow:hidden; min-height:0}
.acc__body a{
  display:block; padding:9px 14px 9px 26px; font-size:.87rem;
  color:var(--ink-2); text-decoration:none; border-left:2px solid var(--line); margin-left:14px;
}
.acc__body a:hover{color:var(--red-dark); border-left-color:var(--red)}

.drawer__foot{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
  font-size:.78rem; color:var(--ink-3);
}
.drawer__foot a{color:var(--red-dark); font-weight:700; text-decoration:none}

/* ==========================================================================
   BANDS — the surface rhythm. No two neighbours share a ground.
   ========================================================================= */
.band{position:relative}
.band--sand{background:var(--sand)}
.band--maroon{background:var(--maroon); color:var(--on-dark-2)}
.section{padding-block:var(--pad-s)}

.section__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:clamp(24px,3.4vw,40px);
}
.section__note{margin:0; font-size:.88rem; color:var(--ink-3)}

.grid{display:grid; gap:var(--gap)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ==========================================================================
   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 */
}
.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(80vh,640px);
  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}
.shelf__nav{display:flex; gap:8px; flex:none}
.shelf__controls{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px;
}

/* The gutters live on the WRAPPER, not the rail. `overflow` clips at the
   padding box, so horizontal padding on the rail itself let the next card
   bleed through the gutter — that was the sliced card on desktop. With the
   rail sized to the exact content width, cards clip cleanly at the gutter. */
.shelf__railwrap{
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding-inline:clamp(18px,4vw,32px);
}
.rail{
  display:flex; gap:var(--gap);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* Generous vertical padding: overflow-x:auto clips the Y axis too, so a
     tight padding would slice the top and bottom off the hover shadow. */
  padding-block:22px 40px;
  margin-block:-16px -28px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}

/* Cards are sized from the number visible per view, not a fixed px width.
   A fixed width left the last card sliced through its own text at the
   container edge, which reads as broken rather than as "scroll for more".
   --per is fractional on small screens so the peek is unmistakably a peek. */
.rail{--per:4}          /* whole cards on desktop — arrows + dots carry the affordance */
.rail > li{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align:start; display:flex;
}

.qcard{
  display:flex; flex-direction:column; gap:9px; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 19px 18px; text-decoration:none; box-shadow:var(--sh-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.qcard:hover,.qcard:focus-visible{
  transform:translateY(-5px); box-shadow:var(--sh-3); border-color:#EDD2CF;
}
.qcard__ico{width:42px; height:42px; color:var(--red)}
.qcard__name{font-size:1.02rem; font-weight:700; letter-spacing:-.015em}
.qcard__impact{font-size:.86rem; line-height:1.45; color:var(--ink-3); flex:1}
.qcard__impact b{color:var(--ink); font-weight:700}
.qcard__go{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.85rem; font-weight:700; color:var(--red-dark); margin-top:2px;
}
.qcard__go svg{width:14px; height:14px; transition:transform .24s var(--ease)}
.qcard:hover .qcard__go svg{transform:translateX(4px)}

.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}

/* --------------------------------------------------- ANIMATED LINE ICONS  */
/* stroke-dasharray / stroke-dashoffset inherit into <use> shadow content,
   so one rule on the host animates every stroke inside the symbol. */
.icon{stroke-dasharray:240; stroke-dashoffset:0}
.qcard:hover .icon,.qcard:focus-visible .icon,
.pcard:hover .icon,.pcard:focus-within .icon,
.step:hover .icon,
.autoajr__cards li:hover .icon{animation:draw 1.6s cubic-bezier(.33,.9,.28,1) both}
@keyframes draw{from{stroke-dashoffset:240} to{stroke-dashoffset:0}}

/* ==========================================================================
   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}

/* ==========================================================================
   S4 · EMERGENCY APPEALS
   ========================================================================= */
.ecard{
  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);
}
.ecard:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
/* Campaign banners are 2.23:1 with the headline baked in — cropping to a
   squarer ratio would cut the type in half. */
.ecard__media{aspect-ratio:1400/628; width:100%; object-fit:cover; display:block; background:var(--sand)}
.ecard__body{padding:20px 21px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.ecard__body p{font-size:.9rem; color:var(--ink-3); margin:0}
.ecard__amt{
  font-size:.9rem !important; color:var(--ink-2) !important;
  padding-top:10px; border-top:1px solid var(--line); margin-top:auto !important;
}
.ecard__amt b{color:var(--red-dark); font-variant-numeric:tabular-nums}
.ecard .btn{align-self:flex-start; margin-top:6px}

/* ==========================================================================
   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}

/* ==========================================================================
   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(--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(--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(--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
   ========================================================================= */
.story__in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:center}
/* YouTube facade. The iframe is injected on click only — see main.js — so a
   third-party player never loads for visitors who don't ask for it. */
.video{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--sh-3); background:#1a0d0c;
}
.video__poster{width:100%; height:100%; object-fit:cover; display:block}
.video__play{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:center; cursor:pointer;
}
.video__btn{
  width:78px; height:78px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--red);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.video__btn svg{width:34px; height:34px; margin-left:2px}
.video__play:hover .video__btn,.video__play:focus-visible .video__btn{transform:scale(1.09); background:#fff}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video.is-playing .video__play,.video.is-playing .video__len{display:none}
.video__len{
  position:absolute; top:14px; right:14px;
  font-size:.72rem; font-weight:700; color:#fff; letter-spacing:.05em;
  background:rgba(0,0,0,.55); padding:4px 9px; border-radius:6px;
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   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. */
.autoajr-band{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--maroon); 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(--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)}

/* ==========================================================================
   FOOTER — unchanged structure; `.is-new` marks prototype additions
   ========================================================================= */
.footer{background:#111; color:#BDB3AF; padding-block:clamp(48px,6vw,76px) 34px; font-size:.88rem}
.footer__top{
  display:grid; grid-template-columns:minmax(230px,1fr) 2.2fr;
  gap:clamp(30px,4vw,60px); padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__brand .logomark{margin-bottom:18px}
.footer__addr{line-height:1.75}
.footer__addr a{color:#EDE8E6; text-decoration:none}
.footer__addr a:hover{text-decoration:underline}
.footer__cra{font-size:.78rem; color:#8C817D; margin-top:16px}

.footer__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:28px}
.footer__cols h3{
  margin:0 0 12px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; font-weight:700;
}
.footer__cols a{
  display:block; padding:5px 0; color:#BDB3AF; text-decoration:none; font-size:.86rem;
  transition:color .18s var(--ease);
}
.footer__cols a:hover{color:#fff}
.is-new{position:relative}
.is-new::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--red); margin-left:7px; vertical-align:middle;
}

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding-top:24px; font-size:.8rem; color:#8C817D;
}
.footer__bottom p{margin:0}
.footer__utils{display:flex; align-items:center; gap:22px}
.footer__utils a{color:#EDE8E6; text-decoration:none}
.footer__legend{display:inline-flex; align-items:center; gap:7px; font-size:.74rem}
.footer__legend i{width:6px; height:6px; border-radius:50%; background:var(--red); display:block}

/* ==========================================================================
   REVEALS
   Transform only — never opacity. Content is always painted, so a section
   can never read as an empty gap mid-scroll. This is the fix for the dead
   whitespace on the live site.
   ========================================================================= */
[data-reveal] > *{transform:translateY(14px); transition:transform .42s var(--ease)}
[data-reveal].is-in > *{transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1240px){ .rail{--per:3} }

@media (max-width:900px){ .rail{--per:2.15} }

@media (max-width:1080px){
  .zakat__in,.story__in,.autoajr{grid-template-columns:1fr}
  .story__copy{order:1}
  .footer__top{grid-template-columns:1fr}
  .docs{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .rail{--per:2}
}

@media (max-width:960px){
  :root{--bar-h:56px}
  .header__nav{display:none}
  .header__mobile{display:flex}
  .header__bar{padding:8px 10px}
  .header__logo{margin-right:auto}
  .donatebar__trust{display:none}
  .donatebar__form{margin-inline:0 auto}
  .segmented{display:none}       /* frequency moves into the form on mobile */
  .field--select{max-width:150px}
}

@media (max-width:640px){
  body{font-size:16px}
  /* The bar must stay ONE row — if it wraps, the sticky header below it
     overlaps. JS also measures the real height into --bar-h as a backstop. */
  .donatebar__in{gap:8px; flex-wrap:nowrap}
  .donatebar__form{gap:7px; flex:1; min-width:0; flex-wrap:nowrap; margin:0}
  .field--select{flex:1; min-width:0; max-width:none; padding:9px 26px 9px 10px; font-size:.82rem}
  .field--amount{width:62px; padding-left:19px; font-size:.82rem}
  .amount__sym{left:9px; font-size:.82rem}
  .donatebar__form .btn{padding:9px 14px; font-size:.8rem}
  .donatebar__form .btn__ico{display:none}
  /* 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(88vh,720px)}
  .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)}
  .shelf__nav{display:none}       /* swipe + dots only on touch */
  .rail{--per:1.15}               /* peek only on touch, where swipe is the interaction */
  .shelf__controls{justify-content:center}
  .section__head{flex-direction:column; align-items:flex-start}
  .capture__in{flex-direction:column; align-items:stretch}
  .stat{padding:20px 18px}
  .step::before{font-size:1.9rem}
  .nisab{padding:22px 20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal] > *{transform:none}
}

/* Print — the team will PDF this for review */
@media print{
  .donatebar,.header{position:static}
  .band,.section{break-inside:avoid}
}