/* ==========================================================================
   Sehat Sitara Welfare Organization
   Shared design system
   ========================================================================== */

:root{
  /* brand, sampled from the Sehat Sitara logo */
  --pri:#00757C;
  --pri-dk:#005C62;
  --pri-dker:#00464B;
  --pri-lt:#0E9AA2;
  --pri-ltr:#12B3BC;

  --acc:#E0A32B;
  --acc-dk:#BE861B; --acc-ink:#855C0D;
  --acc-lt:#F0C860;
  --acc-soft:#F7E4B4;

  --bar-dark:#0C3F3B;
  --slate:#293541;
  --slate-2:#3A4855;
  --slate-3:#5B6773;

  --cream:#FBF6EA;
  --paper:#F7F4EC;
  --white:#FFFFFF;
  --ink:#293541;
  --ink-soft:#5B6773;

  --line:#E2DDD0;
  --line-2:#CFC8B6;

  --sh-sm:0 2px 8px rgba(41,53,65,.10);
  --sh:0 6px 22px rgba(41,53,65,.13);
  --sh-lg:0 18px 48px rgba(41,53,65,.20);

  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1200px;

  /* motion scale, retuned per breakpoint */
  --rvY:28px; --rvX:34px; --rvT:.75s; --stgT:.68s;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  max-width:100%;
}
body.is-locked{overflow:hidden;}

h1,h2,h3,h4,h5,h6{
  font-family:'Aleo',Georgia,'Times New Roman',serif;
  margin:0;
  font-weight:400;
  line-height:1.24;
  color:var(--pri);
}
p{margin:0;}
a{color:var(--pri-lt); text-decoration:none; transition:color .25s var(--ease);}
a:hover{color:var(--acc-ink);}
img{max-width:100%; display:block;}
button{font-family:inherit; font-size:inherit;}
ul{margin:0;}
:focus-visible{outline:3px solid var(--acc-dk); outline-offset:3px; border-radius:2px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}
.wrap-wide{max-width:1400px; margin:0 auto; padding:0 26px;}
.sec{padding:64px 0;}
.sec-sm{padding:46px 0;}
section[id], .band[id], .split[id]{scroll-margin-top:104px;}
.center{text-align:center;}
.urdu{font-family:'Noto Nastaliq Urdu',serif; direction:rtl; line-height:2.1;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== two line heading + ornament divider =========================== */
.hd{text-align:center; margin-bottom:38px;}
.hd.left{text-align:left;}
.form-note{margin-top:16px; font-size:13.5px; line-height:1.72; color:var(--pri-dk);
  background:var(--paper); border-left:3px solid var(--acc); padding:11px 15px;}
.form-note[hidden]{display:none;}
.hd .hd-sm{
  display:block;
  font-family:'Aleo',serif;
  font-size:clamp(20px,2.4vw,27px);
  color:var(--ink);
  letter-spacing:.005em;
}
.hd .hd-lg{
  display:block;
  font-family:'Aleo',serif;
  font-size:clamp(27px,3.7vw,40px);
  color:var(--pri);
  line-height:1.2;
  margin-top:2px;
}
.hd.on-dark .hd-sm{color:var(--acc);}
.hd.on-dark .hd-lg{color:var(--white);}
.orn{
  display:flex; align-items:center; justify-content:center;
  gap:11px; margin-top:14px;
}
.orn i{display:block; width:46px; height:2px; background:var(--acc); opacity:.75;}
.orn s{
  display:block; width:13px; height:13px; text-decoration:none;
  border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 3px rgba(224,163,43,.28);
}
.hd.on-dark .orn i{background:var(--acc); opacity:.9;}

/* ===== buttons ======================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Roboto',sans-serif; font-weight:500; font-size:14.5px;
  letter-spacing:.01em; padding:11px 26px; border-radius:34px;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease),
             box-shadow .28s var(--ease);
}
.btn svg{width:16px; height:16px; flex:none;}
.btn-pri{background:var(--pri); color:var(--white); border-color:var(--pri);}
.btn-pri:hover{background:var(--pri-dk); border-color:var(--pri-dk); color:var(--white); transform:translateY(-2px); box-shadow:var(--sh);}
.btn-acc{background:var(--acc); color:var(--slate); border-color:var(--acc);}
.btn-acc:hover{background:var(--acc-dk); border-color:var(--acc-dk); color:var(--white); transform:translateY(-2px); box-shadow:var(--sh);}
.btn-ghost{background:transparent; color:var(--pri); border-color:var(--line-2);}
.btn-ghost:hover{background:var(--pri); border-color:var(--pri); color:var(--white); transform:translateY(-2px);}
.btn-light{background:rgba(255,255,255,.94); color:var(--pri-dk); border-color:rgba(255,255,255,.94);}
.btn-light:hover{background:var(--white); color:var(--acc-dk); transform:translateY(-2px); box-shadow:var(--sh);}
.btn-outline-lt{background:rgba(255,255,255,.10); color:var(--white); border-color:rgba(255,255,255,.62);}
.btn-outline-lt:hover{background:var(--white); color:var(--pri-dk); border-color:var(--white); transform:translateY(-2px);}
.btn-sm{padding:8px 19px; font-size:13px;}
.btn-lg{padding:14px 34px; font-size:16px;}

.rmore{
  font-family:'Roboto',sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--acc-ink);
  display:inline-block;
}
.rmore:hover{color:var(--pri);}

/* hover motion helpers, mirrored from the reference interaction set */
.hv-grow{transition:transform .3s var(--ease);}
.hv-grow:hover{transform:scale(1.06);}
.hv-bob:hover{animation:bob 1s ease-in-out infinite alternate;}
@keyframes bob{from{transform:translateY(0);} to{transform:translateY(-7px);}}

/* ===== splash / preloader ============================================ */
#splash{
  position:fixed; inset:0; z-index:9999;
  background:var(--pri);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#splash.done{opacity:0; visibility:hidden;}
.splash-mark{position:relative; width:132px; height:132px; display:grid; place-items:center;}
.splash-mark img{width:96px; height:auto; position:relative; z-index:2;}
.splash-ring{
  position:absolute; inset:0;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:var(--acc);
  border-radius:50%;
  animation:spin 1.5s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.splash-name{
  font-family:'Aleo',serif; font-size:19px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--white); text-align:center;
}
.splash-name span{
  display:block; font-family:'Roboto',sans-serif; font-size:11.5px;
  letter-spacing:.3em; color:rgba(255,255,255,.66); margin-top:7px;
}
.splash-bar{width:150px; height:2px; background:rgba(255,255,255,.2); overflow:hidden;}
.splash-bar i{display:block; height:100%; width:40%; background:var(--acc); animation:slidebar 1.15s var(--ease) infinite;}
@keyframes slidebar{0%{transform:translateX(-100%);} 100%{transform:translateX(340%);}}

/* page entrance */
.page-fade{animation:pagein .7s var(--ease) both;}
@keyframes pagein{from{opacity:0;} to{opacity:1;}}

/* ===== utility top bar =============================================== */
.topbar{background:var(--cream); border-bottom:1px solid var(--line); font-size:13px;}
.topbar-in{
  max-width:var(--maxw); margin:0 auto; padding:7px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.topbar a{color:var(--slate-3);}
.topbar a:hover{color:var(--pri);}
.tb-left{display:flex; align-items:center; gap:20px; color:var(--slate-3);}
.tb-item{display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.tb-item svg{width:14px; height:14px; color:var(--pri-lt); flex:none;}
.tb-right{display:flex; align-items:center; gap:18px;}
.tb-urdu{font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:14px; color:var(--pri); }
.tb-social{display:flex; align-items:center; gap:9px;}
.tb-social a{
  width:25px; height:25px; border-radius:50%; background:var(--pri);
  display:grid; place-items:center; color:var(--white);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.tb-social a:hover{background:var(--acc); color:var(--white); transform:translateY(-2px);}
.tb-social svg{width:12px; height:12px;}

/* ===== header / nav ================================================== */
.site-head{
  position:sticky; top:0; z-index:600;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-head.stuck{box-shadow:0 6px 22px rgba(41,53,65,.13);}
.nav-in{
  max-width:var(--maxw); margin:0 auto; padding:12px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  transition:padding .3s var(--ease);
}
.site-head.stuck .nav-in{padding:8px 26px;}

.brand{display:flex; align-items:center; gap:13px; flex:0 1 auto; min-width:0;}
.brand img{width:56px; height:auto; flex:none; transition:width .3s var(--ease);}
.site-head.stuck .brand img{width:46px;}
/* the wordmark truncates rather than pushing the header past the viewport */
.brand-tx{min-width:0;}
.brand-tx .bn, .brand-tx .bu{
  display:block; white-space:nowrap; text-overflow:ellipsis;
  overflow:hidden; padding-bottom:3px; margin-bottom:-3px;
}
.brand-tx .bn{
  font-family:'Aleo',serif; font-size:22px; letter-spacing:.05em;
  color:var(--pri); line-height:1.05; font-weight:700;
}
.brand-tx .bu{
  font-family:'Noto Nastaliq Urdu',serif; direction:rtl;
  font-size:13px; color:var(--acc-ink); line-height:1.7; margin-top:1px;
}

.mainnav{display:flex; align-items:center; gap:4px;}
.mainnav > li{list-style:none; position:relative;}
.mainnav > li > a{
  display:flex; align-items:center; gap:6px;
  padding:10px 13px; font-size:15px; font-weight:500; color:var(--slate);
  position:relative; white-space:nowrap;
}
.mainnav > li > a:hover{color:var(--pri);}
.mainnav > li > a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px;
  height:2.5px; background:var(--acc); transform:scaleX(0);
  transform-origin:left; transition:transform .3s var(--ease);
}
.mainnav > li > a:hover::after,
.mainnav > li.current > a::after{transform:scaleX(1);}
.mainnav > li.current > a{color:var(--pri);}
.caret{width:9px; height:9px; flex:none; transition:transform .3s var(--ease);}
.mainnav > li:hover .caret,
.mainnav > li.open .caret{transform:rotate(180deg);}

.submenu{
  position:absolute; top:100%; left:6px; min-width:238px;
  background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--acc);
  box-shadow:var(--sh-lg); padding:7px 0; margin:0;
  opacity:0; visibility:hidden; transform:translateY(9px);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.mainnav > li:hover .submenu,
.mainnav > li.open .submenu{opacity:1; visibility:visible; transform:translateY(0);}
.submenu li{list-style:none;}
.submenu a{
  display:block; padding:9px 18px; font-size:14.5px; color:var(--slate);
  border-left:3px solid transparent;
}
.submenu a:hover{background:var(--paper); color:var(--pri); border-left-color:var(--acc);}

.nav-cta{display:flex; align-items:center; gap:10px; flex:none;}
.burger{
  display:none; width:42px; height:38px; border:1px solid var(--line-2);
  background:var(--white); border-radius:4px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{display:block; width:20px; height:2px; background:var(--pri); transition:transform .3s var(--ease), opacity .2s;}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.on span:nth-child(2){opacity:0;}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile drawer */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(360px,88vw); z-index:800;
  background:var(--white); box-shadow:-14px 0 44px rgba(41,53,65,.28);
  transform:translateX(100%); transition:transform .42s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.on{transform:translateX(0);}
.drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--cream);
}
.drawer-top img{width:44px;}
.drawer-x{
  width:36px; height:36px; border:1px solid var(--line-2); background:var(--white);
  border-radius:50%; font-size:22px; line-height:1; color:var(--pri); cursor:pointer;
}
.drawer nav{padding:10px 0 18px;}
.drawer nav ul{margin:0; padding:0;}
.drawer nav li{list-style:none; border-bottom:1px solid var(--line);}
.drawer nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 22px; font-size:15.5px; color:var(--slate); font-weight:500;
}
.drawer nav a:hover{background:var(--paper); color:var(--pri);}
.drawer nav .sub a{padding-left:38px; font-size:14.5px; font-weight:400; color:var(--slate-3);}

/* a menu row that owns subsections: the link still goes to its own page, and
   the chevron beside it is a separate control that opens the list underneath.
   Collapsed height is zero and the open height is measured in site.js, so the
   panel always fits its contents exactly. */
.drow{display:flex; align-items:stretch;}
.drow > a{flex:1 1 auto; min-width:0;}
.dsub-t{
  flex:none; width:54px; border:0; border-left:1px solid var(--line);
  background:none; color:var(--pri); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.dsub-t .caret{width:13px; height:13px;}
.dsub-t:hover{background:var(--paper);}
.has-sub.open > .drow{background:var(--paper);}
.has-sub.open > .drow > a{color:var(--pri);}
.has-sub.open > .drow .caret{transform:rotate(180deg);}
.dsub{
  max-height:0; overflow:hidden; background:var(--paper);
  transition:max-height .34s var(--ease);
}
.dsub > li:last-child{border-bottom:0;}
.drawer-foot{padding:18px 22px 26px; border-top:1px solid var(--line); background:var(--cream); margin-top:auto;}
.drawer-foot .btn{width:100%;}
.drawer-foot .df-tx{font-size:13px; color:var(--slate-3); margin-top:12px; line-height:1.6;}
.scrim{
  position:fixed; inset:0; z-index:750; background:rgba(41,53,65,.5);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.scrim.on{opacity:1; visibility:visible;}

/* ===== hero slider ==================================================== */
.hero{position:relative; background:var(--pri); overflow:hidden; overflow:clip;}
.hero-track{position:relative; min-height:clamp(430px,53vw,560px);}
/* The banner is one flat colour panel beside one photograph at every width,
   never stacked, because the two halves parting from each other is the whole
   effect. --hsC is the panel colour of this slide, carried as three numbers so
   the same value can serve the solid panel and the gradient that feathers it
   into the photograph. --hsX is how far the two halves travel apart, as a
   percentage of each half's own width, so it scales with the screen by itself. */
.hero-slide{
  --hsC:0,117,124;
  --hsX:12%;
  position:absolute; inset:0;
  display:grid; grid-template-columns:46% 54%;
  background:rgb(var(--hsC));
  opacity:0; visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
}
.hero-slide.on{opacity:1; visibility:visible;}
.hero-slide:nth-child(2){--hsC:12,63,59;}
.hero-slide:nth-child(3){--hsC:0,92,98;}

.hs-copy{
  position:relative; z-index:3;
  display:flex; flex-direction:column; justify-content:center;
  padding:46px 12px 46px 0;
  color:var(--white);
}
/* The words slide in from the left and the photograph out to the right, so the
   two halves cross the seam in opposite directions as the slide changes. Both
   settle at nothing once the slide is the active one. */
.hs-copy{transform:translateX(calc(var(--hsX) * -1)); transition:transform 1.05s var(--ease);}
.hs-photo{transform:translateX(var(--hsX)); transition:transform 1.05s var(--ease);}
.hero-slide.on .hs-copy,
.hero-slide.on .hs-photo{transform:translateX(0);}
.hs-copy-in{max-width:560px; margin-left:auto; padding-left:26px; width:100%;}
.hero-slide.on .hs-copy-in > *{animation:hsUp .85s var(--ease) both;}
.hero-slide.on .hs-copy-in > *:nth-child(1){animation-delay:.18s;}
.hero-slide.on .hs-copy-in > *:nth-child(2){animation-delay:.30s;}
.hero-slide.on .hs-copy-in > *:nth-child(3){animation-delay:.42s;}
.hero-slide.on .hs-copy-in > *:nth-child(4){animation-delay:.54s;}
.hero-slide.on .hs-copy-in > *:nth-child(5){animation-delay:.66s;}
@keyframes hsUp{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);}}

.hs-mark{width:62px; height:auto; margin-bottom:14px; opacity:.95;}
.hs-urdu{
  font-family:'Noto Nastaliq Urdu',serif; direction:rtl;
  font-size:clamp(19px,2.3vw,26px); color:var(--acc-soft); line-height:2; margin-bottom:4px;
}
.hs-t1{
  display:block;
  font-family:'Aleo',serif; font-weight:300;
  font-size:clamp(28px,4.1vw,46px); line-height:1.1; color:var(--white);
}
.hs-t2{
  display:block;
  font-family:'Aleo',serif; font-weight:700;
  font-size:clamp(28px,4.1vw,46px); line-height:1.1; color:var(--white);
}
.hs-sub{
  font-size:clamp(14.5px,1.35vw,17px); color:rgba(255,255,255,.9);
  margin-top:14px; max-width:470px;
}
.hs-sub-u{
  font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:14.5px;
  color:rgba(255,255,255,.74); margin-top:6px; line-height:2;
}
.hs-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}

.hs-photo{position:relative; z-index:1; overflow:hidden;}
.hs-photo img{width:100%; height:100%; object-fit:cover; object-position:center 34%;}
/* Feathered blend from the flat colour panel into the photograph. One rule for
   all three slides: the colour comes from --hsC, so a slide colour is changed
   in one place and the seam follows it. */
.hs-photo::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,
    rgb(var(--hsC)) 0%,
    rgb(var(--hsC)) 12%,
    rgba(var(--hsC),.55) 30%,
    rgba(var(--hsC),.12) 52%,
    rgba(var(--hsC),0) 70%);
}
.hero-slide.on .hs-photo img{animation:kb 9s var(--ease) both;}
@keyframes kb{from{transform:scale(1.09);} to{transform:scale(1);}}

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  color:var(--white); display:grid; place-items:center;
  transition:background .28s var(--ease), transform .28s var(--ease);
}
.hero-arrow:hover{background:rgba(255,255,255,.34);}
.hero-arrow svg{width:19px; height:19px;}
.hero-arrow.prev{left:14px;}
.hero-arrow.next{right:14px;}
.hero-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:6;
  display:flex; justify-content:center; gap:9px;
}
.hero-dots button{
  width:11px; height:11px; border-radius:50%; cursor:pointer; padding:0;
  border:1.5px solid rgba(255,255,255,.75); background:transparent;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.hero-dots button[aria-current="true"]{background:var(--acc); border-color:var(--acc); transform:scale(1.25);}

/* ===== three coloured card blocks ==================================== */
.blocks{background:var(--white); padding:52px 0 58px;}
.blocks-grid{display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start;}
.blk{border:1px solid var(--line); background:var(--white); box-shadow:var(--sh-sm); display:flex; flex-direction:column;}
.blk-hd{
  padding:11px 18px; text-align:center;
  font-family:'Aleo',serif; font-size:22px; font-weight:400; color:var(--white);
}
.blk.c-pri .blk-hd{background:var(--pri);}
.blk.c-acc .blk-hd{background:var(--acc-dk);}
.blk.c-dark .blk-hd{background:var(--bar-dark);}
.blk-body{padding:16px; display:grid; gap:12px;}
.blk.c-pri .blk-body{grid-template-columns:repeat(4,minmax(0,1fr));}
.blk.c-pri.g3 .blk-body{grid-template-columns:repeat(3,minmax(0,1fr));}
.blk.c-acc .blk-body,
.blk.c-dark .blk-body{grid-template-columns:repeat(2,minmax(0,1fr));}
.mini{
  border:1px solid var(--line); padding:12px 8px 10px; text-align:center;
  background:var(--white); transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:6px; min-height:118px;
}
.mini:hover{transform:translateY(-4px); box-shadow:var(--sh); }
.blk.c-pri .mini:hover{border-color:var(--pri);}
.blk.c-acc .mini:hover{border-color:var(--acc-dk);}
.blk.c-dark .mini:hover{border-color:var(--bar-dark);}
.mini svg{width:30px; height:30px; flex:none;}
.blk.c-pri .mini svg{color:var(--pri);}
.blk.c-acc .mini svg{color:var(--acc-dk);}
.blk.c-dark .mini svg{color:var(--bar-dark);}
.mini .mt{font-size:11.5px; font-weight:500; line-height:1.35; color:var(--slate); letter-spacing:.01em;}
.mini .mu{font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:10.5px; color:var(--slate-3); line-height:1.9;}
.blk-foot{margin-top:auto; padding:0 16px 18px; text-align:center;}
.blk-foot .btn{min-width:132px;}

/* ===== notched "view all" ribbon ==================================== */
.ribbon{
  display:block; width:100%; max-width:820px; margin:26px auto 0;
  background:var(--acc); color:var(--slate);
  font-family:'Aleo',serif; font-size:19px; text-align:center;
  padding:9px 46px; position:relative;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  transition:background .28s var(--ease), color .28s var(--ease);
}
.ribbon:hover{background:var(--acc-dk); color:var(--white);}

/* ===== generic carousel ============================================= */
.car{position:relative;}
.car-vp{overflow:hidden;}
.car-tr{
  display:grid; grid-auto-flow:column; gap:20px;
  transition:transform .6s var(--ease);
}
.car[data-per="4"] .car-tr{grid-auto-columns:calc((100% - 60px) / 4);}
.car[data-per="3"] .car-tr{grid-auto-columns:calc((100% - 40px) / 3);}
.car[data-per="2"] .car-tr{grid-auto-columns:calc((100% - 20px) / 2);}
.car[data-per="1"] .car-tr{grid-auto-columns:100%;}
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; cursor:pointer; padding:0;
  background:transparent; border:none; display:grid; place-items:center;
  color:var(--pri); transition:color .25s var(--ease), transform .25s var(--ease);
}
.car-arrow:hover{color:var(--acc-dk);}
.car-arrow:disabled{opacity:.28; cursor:default;}
.car-arrow svg{width:26px; height:26px;}
.car-arrow.prev{left:-46px;}
.car-arrow.next{right:-46px;}
.car.on-dark .car-arrow{color:rgba(255,255,255,.85);}
.car.on-dark .car-arrow:hover{color:var(--acc);}
.car-dots{display:flex; justify-content:center; gap:7px; margin-top:18px;}
.car-dots button{
  width:8px; height:8px; border-radius:50%; padding:0; cursor:pointer;
  border:none; background:var(--line-2); transition:background .25s var(--ease), transform .25s var(--ease);
}
.car-dots button[aria-current="true"]{background:var(--acc); transform:scale(1.4);}
.car.on-dark .car-dots button{background:rgba(255,255,255,.34);}
.car.on-dark .car-dots button[aria-current="true"]{background:var(--acc);}

/* ===== support / appeal cards ======================================= */
.support{
  background:radial-gradient(120% 130% at 50% 118%, var(--pri-ltr) 0%, var(--pri-lt) 34%, var(--pri) 68%, var(--pri-dk) 100%);
  padding:58px 0 0; color:var(--white);
}
.ap-card{display:flex; flex-direction:column; text-align:center;}
.ap-shot{
  position:relative; overflow:hidden; aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,.4); border-radius:10px;
  background:rgba(255,255,255,.07);
}
.ap-shot img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease);}
.ap-card:hover .ap-shot img{transform:scale(1.07);}
.ap-tag{
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(0,70,75,.86); color:var(--white);
  font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:20px;
}
.ap-ttl{
  font-family:'Aleo',serif; font-size:19px; color:var(--white);
  margin-top:16px; line-height:1.3;
}
.ap-btn{margin-top:14px; align-self:center;}
.ap-btn.btn{
  font-size:12.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:9px 20px;
}

/* ===== how to give =================================================== */
.howto{background:var(--white); padding:56px 0 60px;}
.howto-panel{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:0;
  border:1px solid var(--line); box-shadow:var(--sh); overflow:hidden;
}
.howto-steps{padding:34px 34px 36px; background:var(--white);}
.step{display:flex; gap:16px; padding:15px 0; border-bottom:1px dashed var(--line-2);}
.step:last-child{border-bottom:none;}
.step-n{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--pri); color:var(--white); display:grid; place-items:center;
  font-family:'Aleo',serif; font-size:17px;
}
.step h3{font-size:17.5px; color:var(--pri); margin-bottom:3px;}
.step p{font-size:14.5px; color:var(--slate-3); line-height:1.7;}
.howto-side{
  background:var(--pri); color:var(--white); padding:34px 32px;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
}
.howto-side h3{color:var(--white); font-size:22px;}
.howto-side p{font-size:14.5px; color:rgba(255,255,255,.86);}
.hs-row{display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.18);}
.hs-row:last-of-type{border-bottom:none;}
.hs-row b{font-weight:500; color:rgba(255,255,255,.7);}
.hs-row span{text-align:right; color:var(--white);}
.hs-board{display:flex; flex-direction:column;}
.hs-mem{padding:10px 0; border-bottom:1px solid rgba(255,255,255,.18);}
.hs-nm{display:flex; flex-direction:column; gap:2px; margin:0 0 6px;}
.hs-nm b{font-weight:600; color:var(--white); font-size:14.5px;}
.hs-nm i{font-style:normal; font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.4;}
.hs-ct{margin:0;}
.hs-ct a{display:inline-flex; align-items:center; gap:8px; color:var(--white); font-size:14px; text-decoration:none; word-break:break-word;}
.hs-ct a svg{width:15px; height:15px; flex:none; color:var(--acc);}
.hs-ct a:hover{color:var(--acc);}

/* ===== twin appeal columns ========================================== */
.twin{background:var(--pri-lt); padding:52px 0 0;
  background:radial-gradient(120% 130% at 50% 116%, var(--pri-ltr) 0%, var(--pri-lt) 38%, var(--pri) 74%, var(--pri-dk) 100%);}
.twin-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:46px;}
.twin .hd{margin-bottom:28px;}

/* ===== mission on photo background ================================== */
.mission{position:relative; overflow:hidden; overflow:clip; background:var(--slate); color:var(--white);}
.mission-bg{position:absolute; inset:0; z-index:0;}
/* --- sticky photo backgrounds: image holds still, content scrolls over --- */
.mission-bg, .stories-bg, .voices-bg, .pbanner-bg{overflow:hidden; overflow:clip;}
.mission-bg > img, .stories-bg > img, .voices-bg > img, .pbanner-bg > img{
  position:sticky; top:0;
  display:block; width:100%; height:100vh; height:100lvh;
  object-fit:cover;
}
@supports not (overflow:clip){
  .mission-bg > img, .stories-bg > img, .voices-bg > img, .pbanner-bg > img{
    position:absolute; inset:0; height:100%;
  }
}
.mission-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(41,53,65,.62) 0%, rgba(20,40,44,.72) 55%, rgba(0,70,75,.8) 100%);
}
.mission-in{position:relative; z-index:2; padding:66px 0 70px;}
.mission-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:52px; align-items:center;}
.mission h2{color:var(--white); font-size:clamp(28px,3.6vw,40px); letter-spacing:.05em; text-align:center;}
.mission-tx{color:rgba(255,255,255,.9); font-size:15.5px; text-align:justify; margin-top:18px;}
.mission-tx b{color:var(--acc-soft); font-weight:500;}
.counts{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px 22px;}
.cnt{text-align:center;}
.cnt .cn{
  font-family:'Aleo',serif; font-size:clamp(34px,4.4vw,52px); font-weight:400;
  color:var(--white); line-height:1;
}
.cnt .cl{font-size:14px; color:rgba(255,255,255,.76); margin-top:8px; line-height:1.5;}
.mission-note{
  margin-top:22px; border-left:3px solid var(--acc); padding-left:16px;
  font-family:'Aleo',serif; font-style:italic; font-size:16.5px; color:var(--acc-soft);
}

/* ===== success stories on starfield ================================= */
.stories{position:relative; overflow:hidden; overflow:clip; background:#0A1020; color:var(--white);}
.stories-bg{position:absolute; inset:0; z-index:0;}
.stories-bg::after{content:""; position:absolute; inset:0; background:rgba(8,14,28,.5);}
.stories-in{position:relative; z-index:2; padding:56px 0 0;}
.st-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column;}
.st-shot{position:relative; overflow:hidden; aspect-ratio:16/10;}
.st-shot img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.st-card:hover .st-shot img{transform:scale(1.06);}
.st-bar{background:var(--pri); padding:12px 16px; text-align:center;}
.st-bar h3{color:var(--white); font-size:17.5px; line-height:1.32;}
.st-body{padding:16px 18px 20px; text-align:center;}
.st-body p{font-size:14.5px; color:rgba(255,255,255,.82); text-align:justify;}
.st-body .btn{margin-top:15px;}

/* ===== report / update columns ====================================== */
.reports{background:var(--white); padding:58px 0;}
.reports-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:46px;}
.rc{
  border:1px solid var(--line); background:var(--white); box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.rc:hover{box-shadow:var(--sh); transform:translateY(-3px);}
.rc-shot{position:relative; overflow:hidden; aspect-ratio:16/9;}
.rc-shot img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.rc:hover .rc-shot img{transform:scale(1.05);}
.rc-body{padding:16px 18px 14px; text-align:center; display:flex; flex-direction:column; flex:1;}
.rc-body h3{font-size:18px; color:var(--pri); line-height:1.32;}
.rc-body p{font-size:14.5px; color:var(--slate-3); margin-top:10px; text-align:justify; flex:1;}
.rc-body .rmore{margin-top:13px;}
.rc-foot{
  border-top:1px solid var(--line); padding:10px 18px; font-size:13px;
  color:var(--slate-3); background:var(--paper);
}
.rc-foot a{color:var(--slate-3);}
.rc-foot a:hover{color:var(--pri);}
.rc-grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;}

/* ===== voices / testimonial ========================================= */
.voices{position:relative; overflow:hidden; overflow:clip; background:var(--pri-dk); color:var(--white);}
.voices-bg{position:absolute; inset:0; z-index:0;}
.voices-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,70,75,.86),rgba(10,32,36,.9));}
.voices-in{position:relative; z-index:2; padding:56px 0 60px;}
.vo{text-align:center; max-width:880px; margin:0 auto;}
.vo-q{display:block; width:40px; height:40px; margin:0 auto 12px; color:var(--acc); opacity:.6;}
.vo blockquote{margin:0;}
.vo-u{font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:17px; color:var(--white); line-height:2.4;}
.vo-e{font-size:15.5px; color:rgba(255,255,255,.85); margin-top:14px; font-style:italic;}
.vo-who{display:flex; align-items:center; justify-content:center; gap:13px; margin-top:22px;}
.vo-av{
  width:56px; height:56px; border-radius:50%; overflow:hidden; flex:none;
  border:2px solid var(--acc); background:var(--pri);
}
.vo-av img{width:100%; height:100%; object-fit:cover;}
.vo-mono{
  width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:2px solid var(--acc); background:var(--pri-dker);
  font-family:'Aleo',serif; font-size:19px; color:var(--acc-soft);
}
.vo-nm{text-align:left;}
.vo-nm b{display:block; font-family:'Aleo',serif; font-size:19px; color:var(--acc); font-weight:400;}
.vo-nm i{display:block; font-style:normal; font-size:13px; color:rgba(255,255,255,.7);}

/* ===== collaboration strip ========================================= */
.collab{background:linear-gradient(180deg,var(--white) 0%, var(--paper) 100%); padding:52px 0 56px; position:relative;}
.collab-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; align-items:stretch;}
.collab-grid.two{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:860px; margin:0 auto;}
.collab-grid.three{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1020px; margin:0 auto;}
.co{
  border:1px solid var(--line); background:var(--white); padding:22px 20px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.co:hover{transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--pri-lt);}
.co-mark{
  width:66px; height:66px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--paper); border:1.5px solid var(--line-2);
  font-family:'Aleo',serif; font-size:19px; color:var(--pri); letter-spacing:.02em;
}
.co h3{font-size:16.5px; color:var(--pri); line-height:1.34;}
.co .co-sub{font-size:12.5px; color:var(--slate-3);}
.co .co-tx{font-size:13.5px; color:var(--slate-3); line-height:1.65;}
.co-tag{
  font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--acc-ink); background:var(--acc-soft); padding:3px 10px; border-radius:20px;
}

/* ===== registration strip ========================================== */
.regstrip{background:var(--pri); color:var(--white); padding:16px 0;}
.regstrip p{font-size:14.5px; text-align:center; color:rgba(255,255,255,.95);}
.regstrip b{font-weight:700;}

/* ===== footer ====================================================== */
.site-foot{background:var(--slate); color:rgba(255,255,255,.72); padding:0;}
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1.05fr); gap:0;
  max-width:var(--maxw); margin:0 auto;
}
.foot-col{padding:44px 30px 40px;}
.foot-col:first-child{background:rgba(255,255,255,.035);}
.foot-logo{width:250px; max-width:100%; margin-bottom:22px;}
.foot-logo.sq{width:132px;}
.foot-col h3{
  font-family:'Roboto',sans-serif; font-size:15.5px; font-weight:700; color:var(--white);
  letter-spacing:.02em; padding-bottom:9px; margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.foot-col h3+h3{margin-top:26px;}
.foot-col ul+h3, .foot-col p+h3{margin-top:26px;}
.foot-tx{font-size:14px; line-height:1.85; text-align:justify; color:rgba(255,255,255,.7);}
.foot-links{padding:0; margin:0;}
.foot-links li{list-style:none;}
.foot-links a{display:block; padding:5px 0; font-size:14.5px; color:rgba(255,255,255,.72);}
.foot-links a:hover{color:var(--acc); padding-left:5px;}
.foot-links a{transition:color .25s var(--ease), padding-left .25s var(--ease);}
.fc-row{display:flex; gap:11px; align-items:flex-start; padding:6px 0; font-size:14px; line-height:1.65;}
.fc-row svg{width:15px; height:15px; flex:none; margin-top:5px; color:var(--acc); opacity:.9;}
.fc-row a{color:rgba(255,255,255,.72);}
.fc-row a:hover{color:var(--acc);}
.bank-row{font-size:13.5px; padding:4px 0; color:rgba(255,255,255,.7);}
.foot-bottom{
  background:rgba(0,0,0,.22); border-top:1px solid rgba(255,255,255,.09);
}
.foot-bottom-in{
  max-width:var(--maxw); margin:0 auto; padding:14px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:rgba(255,255,255,.6);
}
.fb-social{display:flex; align-items:center; gap:9px;}
.fb-social a{
  width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:rgba(255,255,255,.8);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.fb-social a:hover{background:var(--acc); color:var(--slate); transform:translateY(-2px);}
.fb-social svg{width:13px; height:13px;}

/* ===== floats ====================================================== */
.totop{
  position:fixed; right:18px; bottom:82px; z-index:560;
  width:42px; height:42px; border:none; border-radius:4px; cursor:pointer;
  background:var(--pri); color:var(--white); display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s, background .25s var(--ease), transform .25s var(--ease);
}
.totop.on{opacity:1; visibility:visible;}
.totop:hover{background:var(--acc-dk); transform:translateY(-3px);}
.totop svg{width:17px; height:17px;}
.wa-float{
  position:fixed; right:18px; bottom:24px; z-index:560;
  width:48px; height:48px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:var(--sh);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.wa-float:hover{transform:scale(1.09); color:#fff; box-shadow:var(--sh-lg);}
.wa-float svg{width:26px; height:26px;}

/* ===== page banner (inner pages) =================================== */
.pbanner{position:relative; overflow:hidden; overflow:clip; background:var(--pri);}
.pbanner-bg{position:absolute; inset:0; z-index:0;}
.pbanner-bg > img{object-position:center 30%;}
.pbanner-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(0,70,75,.94) 0%,rgba(0,92,98,.82) 44%,rgba(0,92,98,.5) 100%);}
.pbanner-in{position:relative; z-index:2; padding:52px 0 54px; color:var(--white);}
.pbanner h1{color:var(--white); font-size:clamp(28px,4vw,44px); font-weight:700;}
.pbanner .pb-u{font-family:'Noto Nastaliq Urdu',serif; direction:rtl; font-size:17px; color:var(--acc-soft); line-height:2.1; margin-bottom:4px;}
.pbanner .pb-sub{font-size:16px; color:rgba(255,255,255,.86); margin-top:12px; max-width:640px;}
.crumb{display:flex; gap:9px; align-items:center; font-size:13px; color:rgba(255,255,255,.7); margin-top:16px; flex-wrap:wrap;}
.crumb a{color:var(--acc-soft);}
.crumb a:hover{color:var(--white);}

/* ===== generic content blocks ===================================== */
.prose{max-width:820px;}
.prose p{font-size:16px; color:var(--slate-2); text-align:justify; margin-bottom:16px;}
.prose h2{font-size:clamp(23px,2.7vw,30px); margin:30px 0 12px;}
.prose h3{font-size:20px; margin:24px 0 8px;}
.prose ul{padding-left:20px; margin-bottom:16px;}
.prose li{font-size:15.5px; color:var(--slate-2); margin-bottom:7px;}
.prose p:first-child{margin-top:0;}
.prose h2:first-child{margin-top:0;}
.prose.center{max-width:760px; margin:0 auto 38px;}
.prose.center p{text-align:center;}
.prose.on-dark p{color:rgba(255,255,255,.86);}
.prose.on-dark h2, .prose.on-dark h3{color:var(--white);}
.prose.on-dark .note{color:var(--acc-soft); border-left-color:var(--acc);}
.glead{max-width:720px; margin:0 auto 26px; text-align:center; font-size:15.5px; color:var(--slate-3); line-height:1.75;}
.btn-row{margin-top:22px;}

.band{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center;}
.split.text-lead{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.split.flip .figframe{order:-1;}
.split .prose{max-width:none;}
.figframe{border:1px solid var(--line); padding:9px; background:var(--white); box-shadow:var(--sh-sm); margin:0;}
.figframe img{width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover;}
.figframe.tall img{aspect-ratio:3/4;}
.figframe.square img{aspect-ratio:1/1;}
.figframe figcaption{font-size:13px; color:var(--slate-3); padding:11px 4px 2px; text-align:center; line-height:1.6;}
.eyebrow{
  font-family:'Roboto',sans-serif; font-size:12px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--acc-ink); display:block; margin-bottom:8px;
}
.factgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;}
.factgrid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.fact{border:1px solid var(--line); background:var(--white); padding:22px 18px; text-align:center; box-shadow:var(--sh-sm);}
.fact b{display:block; font-family:'Aleo',serif; font-size:36px; color:var(--pri); line-height:1.05; font-weight:400;}
.fact span{display:block; font-size:13.5px; color:var(--slate-3); margin-top:7px; line-height:1.55;}
.chiprow{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.chiprow span{
  font-size:12.5px; color:var(--pri); background:var(--paper);
  border:1px solid var(--line); padding:4px 12px; border-radius:20px;
}
.note{
  border-left:3px solid var(--acc); padding:4px 0 4px 16px; margin:20px 0 0;
  font-family:'Aleo',serif; font-style:italic; font-size:16.5px; color:var(--pri-dk);
}

.cardgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
.pcard{
  border:1px solid var(--line); background:var(--white); box-shadow:var(--sh-sm);
  padding:26px 24px 28px; display:flex; flex-direction:column; gap:11px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--pri-lt);}
.pcard .pn{
  font-family:'Aleo',serif; font-size:13px; color:var(--acc-ink);
  letter-spacing:.14em; font-weight:700;
}
.pcard h3{font-size:20px; color:var(--pri);}
.pcard p{font-size:14.5px; color:var(--slate-3); line-height:1.72;}
.pcard .ptag{
  margin-top:auto; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--pri); background:var(--paper); border:1px solid var(--line);
  padding:4px 11px; border-radius:20px; align-self:flex-start;
}

/* board */
.boardgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;}
.bm{border:1px solid var(--line); background:var(--white); box-shadow:var(--sh-sm); display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.bm:hover{transform:translateY(-5px); box-shadow:var(--sh);}
.bm-shot{aspect-ratio:4/5; overflow:hidden; background:var(--pri-dk);}
.bm-shot img{width:100%; height:100%; object-fit:cover;}
.bm-mono{
  aspect-ratio:4/5; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 36%, var(--pri-lt), var(--pri-dker));
  font-family:'Aleo',serif; font-size:64px; color:rgba(255,255,255,.9); letter-spacing:.06em;
}
.bm-body{padding:20px 20px 22px;}
.bm-role{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc-ink); font-weight:500;}
.bm-body h3{font-size:21px; color:var(--pri); margin:5px 0 6px;}
.bm-post{font-size:13.5px; color:var(--slate-3); line-height:1.6; padding-bottom:12px; border-bottom:1px solid var(--line);}
.bm-body p{font-size:14.5px; color:var(--slate-2); line-height:1.75; margin-top:12px; text-align:justify;}
.bm-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.bm-chips span{font-size:11.5px; color:var(--pri); background:var(--paper); border:1px solid var(--line); padding:3px 10px; border-radius:20px;}
.bm-contact{margin-top:14px; padding-top:13px; border-top:1px solid var(--line); display:grid; gap:6px;}
.bm-contact a, .bm-contact span{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--slate-3);}
.bm-contact a:hover{color:var(--pri);}
.bm-contact svg{width:14px; height:14px; color:var(--pri-lt); flex:none;}

/* gallery */
.galgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.gitem{
  position:relative; overflow:hidden; padding:0; margin:0; border:none; background:var(--paper);
  cursor:pointer; display:block; width:100%; aspect-ratio:1/1; appearance:none;
}
.gitem img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.gitem:hover img{transform:scale(1.08);}
.gitem figcaption, .gitem .gcap{
  position:absolute; inset:auto 0 0 0; z-index:2;
  background:linear-gradient(180deg,rgba(0,70,75,0),rgba(0,70,75,.9));
  color:var(--white); font-size:12.5px; text-align:left; padding:22px 12px 10px;
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.gitem:hover figcaption, .gitem:focus-visible figcaption,
.gitem:hover .gcap, .gitem:focus-visible .gcap{opacity:1; transform:translateY(0);}
.lightbox{
  position:fixed; inset:0; z-index:900; background:rgba(8,22,24,.94);
  display:flex; align-items:center; justify-content:center; padding:36px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.on{opacity:1; visibility:visible;}
.lightbox img{max-width:100%; max-height:82vh; box-shadow:var(--sh-lg);}
.lb-cap{position:absolute; left:0; right:0; bottom:22px; text-align:center; color:rgba(255,255,255,.82); font-size:14px;}
.lb-x{
  position:absolute; top:18px; right:20px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  color:var(--white); font-size:24px; cursor:pointer; line-height:1;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  color:var(--white); display:grid; place-items:center;
}
.lb-nav.prev{left:16px;} .lb-nav.next{right:16px;}
.lb-nav svg{width:19px; height:19px;}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:44px; align-items:start;}
.ci{display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line);}
.ci:last-child{border-bottom:none;}
.ci-ic{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); color:var(--pri);
}
.ci-ic svg{width:18px; height:18px;}
.ci h3{font-size:16px; color:var(--pri); margin-bottom:3px;}
.ci p, .ci a{font-size:14.5px; color:var(--slate-2); display:block;}
.ci a:hover{color:var(--pri);}
.ci small{display:block; font-size:12.5px; color:var(--slate-3); margin-top:3px;}
.form-card{border:1px solid var(--line); background:var(--white); box-shadow:var(--sh); padding:30px 28px 32px;}
.form-card h2{font-size:24px; margin-bottom:6px;}
.form-card > p{font-size:14.5px; color:var(--slate-3); margin-bottom:20px;}
.fld{margin-bottom:15px;}
.fld label{display:block; font-size:13px; font-weight:500; color:var(--slate); margin-bottom:6px; letter-spacing:.02em;}
.fld input, .fld select, .fld textarea{
  width:100%; padding:11px 13px; font-family:'Roboto',sans-serif; font-size:15px;
  color:var(--ink); background:var(--white); border:1px solid var(--line-2); border-radius:3px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none; border-color:var(--pri); box-shadow:0 0 0 3px rgba(0,117,124,.14);
}
.fld textarea{resize:vertical; min-height:118px;}
.fld-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px;}

/* ===== live content from the admin panel ============================ */
/* Programmes, projects and updates added in the admin panel share one card so
   there is a single thing to keep looking right. The section around them ships
   with the hidden attribute and only appears once a record exists, so an empty
   collection leaves the page exactly as it was hand written. */
.lv-sec[hidden], [data-live-more][hidden], [data-live-social][hidden],
[data-live-socials][hidden]{display:none !important;}
/* The hand written fallbacks are hidden by the live layer once the panel has
   real content, and hiding has to actually hide. The browser's own rule for the
   hidden attribute is the weakest rule there is, so any element given a display
   of its own, and a board card, a programme section, a gallery cell and a video
   card all have one, would go on showing and the visitor would see the same
   thing twice. These say so at a strength no layout rule can beat. */
[data-board-authored][hidden], [data-prog-authored][hidden],
[data-gal-authored][hidden], [data-vid-authored][hidden]{display:none !important;}
.gitem[hidden]{display:none !important;}
.lv-sec{background:var(--paper); border-top:1px solid var(--line);}
.lv-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
  align-items:start;
}
.lv-card{
  position:relative; min-width:0;
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:24px 22px 22px; box-shadow:var(--sh-sm);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease),
             opacity var(--rvT) var(--ease);
}
/* the gold rule down the left edge ties these to the report cards elsewhere */
.lv-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  border-radius:12px 0 0 12px; background:var(--acc);
}
.lv-card h3{
  font-family:'Aleo',Georgia,serif; font-size:19px; line-height:1.35;
  color:var(--pri-dk); margin:0; overflow-wrap:break-word;
}
.lv-urdu{
  font-family:'Noto Nastaliq Urdu',serif; font-size:15px; line-height:2.1;
  color:var(--ink-soft); margin:6px 0 0;
}
.lv-sum{
  margin:10px 0 0; font-size:14.5px; line-height:1.75; color:var(--ink-soft);
  overflow-wrap:break-word;
}
.lv-date{
  margin:0 0 7px; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--acc-ink);
}
.lv-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:9px 0 0;}
.lv-chip{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--paper); color:var(--slate-3); border:1px solid var(--line-2);
}
.lv-ongoing{background:rgba(0,117,124,.10); color:var(--pri-dk); border-color:rgba(0,117,124,.28);}
.lv-completed{background:rgba(224,163,43,.16); color:var(--acc-ink); border-color:rgba(224,163,43,.42);}
.lv-planned{background:var(--paper); color:var(--slate-3);}
.lv-where{font-size:13px; color:var(--slate-3);}
.lv-more{text-align:center; margin-top:30px;}
/* Cards are revealed one at a time by the live layer rather than as a group, so
   the stagger is carried here instead of by the .stg delays. */
.lv-grid > .rv:nth-child(2){transition-delay:.08s;}
.lv-grid > .rv:nth-child(3){transition-delay:.16s;}
.lv-grid > .rv:nth-child(4){transition-delay:.24s;}
.lv-grid > .rv:nth-child(5){transition-delay:.32s;}
.lv-grid > .rv:nth-child(6){transition-delay:.40s;}

/* ===== overflow guards ============================================== */
.wrap, .sec, main, footer{min-width:0;}
.hs-copy, .hs-copy-in, .mission-grid > *, .split > *, .twin-grid > *,
.contact-grid > *, .foot-col, .nav-in > *, .topbar-in > *, .tb-left > *,
.st-card, .pcard, .bmember, .blk, .card, .co-card, .lv-card{min-width:0;}
.lead, .prose, .prose p, .st-tx p, .vo-q, .blk p, .card p, .co-card p,
.lv-card h3, .lv-sum{overflow-wrap:break-word;}
a[href^="mailto:"], a[href^="tel:"], .ct-val, .ct-val a, .foot-col a{overflow-wrap:anywhere;}
table{max-width:100%;}
pre, code{overflow-x:auto; max-width:100%;}

/* ===== reveal + animation system ===================================== */
/* motion distances are tokenised so phones get gentler, balanced travel */
/* nothing here may hide an element with clip-path. A clipped element reports
   an empty rectangle to IntersectionObserver, so the observer never fires,
   so the class that would unclip it never arrives: the element stays hidden
   for good. Reveals use opacity and transform only. */
.rv,.rv-dn,.rv-l,.rv-r,.rv-f,.rv-z{
  transition:opacity var(--rvT) var(--ease), transform var(--rvT) var(--ease);
}
.rv    {opacity:0; transform:translateY(var(--rvY));}
.rv-dn {opacity:0; transform:translateY(calc(var(--rvY) * -1));}
.rv-l  {opacity:0; transform:translateX(calc(var(--rvX) * -1));}
.rv-r  {opacity:0; transform:translateX(var(--rvX));}
.rv-f  {opacity:0;}
.rv-z  {opacity:0; transform:scale(.93);}
.rv.in,.rv-dn.in,.rv-l.in,.rv-r.in,.rv-z.in{
  opacity:1; transform:none;
}
.rv-f.in{opacity:1;}

.rv-d1{transition-delay:.08s;} .rv-d2{transition-delay:.16s;}
.rv-d3{transition-delay:.24s;} .rv-d4{transition-delay:.32s;}
.rv-d5{transition-delay:.40s;} .rv-d6{transition-delay:.48s;}

/* --- staggered groups: one observer on the container, children cascade --- */
.stg > *{
  opacity:0; transform:translateY(var(--rvY));
  transition:opacity var(--stgT) var(--ease), transform var(--stgT) var(--ease);
}
.stg-l  > *{transform:translateX(calc(var(--rvX) * -1));}
.stg-r  > *{transform:translateX(var(--rvX));}
.stg-z  > *{transform:scale(.94);}
.stg-alt > *:nth-child(odd) {transform:translateX(calc(var(--rvX) * -.8));}
.stg-alt > *:nth-child(even){transform:translateX(calc(var(--rvX) * .8));}
.stg.in > *{opacity:1; transform:none;}
.stg.in > *:nth-child(1){transition-delay:0.040s;}
.stg.in > *:nth-child(2){transition-delay:0.100s;}
.stg.in > *:nth-child(3){transition-delay:0.160s;}
.stg.in > *:nth-child(4){transition-delay:0.220s;}
.stg.in > *:nth-child(5){transition-delay:0.280s;}
.stg.in > *:nth-child(6){transition-delay:0.340s;}
.stg.in > *:nth-child(7){transition-delay:0.400s;}
.stg.in > *:nth-child(8){transition-delay:0.460s;}
.stg.in > *:nth-child(9){transition-delay:0.520s;}
.stg.in > *:nth-child(10){transition-delay:0.580s;}
.stg.in > *:nth-child(11){transition-delay:0.640s;}
.stg.in > *:nth-child(12){transition-delay:0.700s;}
.stg.in > *:nth-child(13){transition-delay:0.760s;}
.stg.in > *:nth-child(14){transition-delay:0.820s;}
.stg.in > *:nth-child(15){transition-delay:0.880s;}
.stg.in > *:nth-child(16){transition-delay:0.940s;}
.stg.in > *:nth-child(17){transition-delay:1.000s;}
.stg.in > *:nth-child(18){transition-delay:1.060s;}
.stg.in > *:nth-child(19){transition-delay:1.120s;}
.stg.in > *:nth-child(20){transition-delay:1.180s;}
/* a stagger group taller than the screen would finish its cascade off screen,
   so site.js watches those cards one by one and marks each on arrival */
.stg > .in{opacity:1; transform:none; transition-delay:0s;}

/* --- word by word heading reveal, spans injected by site.js ------------ */
.tsw{display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.16em; margin-bottom:-.16em;}
.tsw > i{
  display:inline-block; font-style:inherit; font-weight:inherit;
  transform:translateY(112%); opacity:0;
  transition:transform .72s var(--ease), opacity .72s var(--ease);
}
.tsp.in .tsw > i{transform:translateY(0); opacity:1;}

/* --- sequenced section heading ---------------------------------------- */
.hda .hd-sm{opacity:0; transform:translateY(-14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);}
.hda.in .hd-sm{opacity:1; transform:none;}
.hda .orn i{transform:scaleX(0); transition:transform .75s var(--ease) .34s;}
.hda.in .orn i{transform:none;}
.hda .orn s{transform:scale(0);
  transition:transform .55s cubic-bezier(.34,1.5,.64,1) .26s;}
.hda.in .orn s{transform:none;}

/* --- counter figures pop as they finish -------------------------------- */
.cnt .cn{transition:transform .5s cubic-bezier(.34,1.5,.64,1);}
.cnt .cn.pop{transform:scale(1.06);}

/* --- ambient loops ----------------------------------------------------- */
@keyframes waRing{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45);}
  70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
.wa-float{animation:waRing 2.8s ease-out infinite;}

/* --- drawer contents slide in as the panel opens ----------------------- */
.drawer nav ul li{opacity:0; transform:translateX(22px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);}
.drawer.on nav ul li{opacity:1; transform:none;}
.drawer.on nav ul li:nth-child(1){transition-delay:0.05s;}
.drawer.on nav ul li:nth-child(2){transition-delay:0.09s;}
.drawer.on nav ul li:nth-child(3){transition-delay:0.12s;}
.drawer.on nav ul li:nth-child(4){transition-delay:0.16s;}
.drawer.on nav ul li:nth-child(5){transition-delay:0.19s;}
.drawer.on nav ul li:nth-child(6){transition-delay:0.23s;}
.drawer.on nav ul li:nth-child(7){transition-delay:0.26s;}
.drawer.on nav ul li:nth-child(8){transition-delay:0.30s;}
.drawer.on nav ul li:nth-child(9){transition-delay:0.33s;}
.drawer.on nav ul li:nth-child(10){transition-delay:0.37s;}
.drawer.on nav ul li:nth-child(11){transition-delay:0.40s;}
.drawer.on nav ul li:nth-child(12){transition-delay:0.43s;}
.drawer.on nav ul li:nth-child(13){transition-delay:0.47s;}
.drawer.on nav ul li:nth-child(14){transition-delay:0.51s;}
.drawer-foot{opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease) .32s, transform .45s var(--ease) .32s;}
.drawer.on .drawer-foot{opacity:1; transform:none;}

/* --- hover micro interactions (pointer devices only) ------------------- */
.card, .pcard, .st-card, .bmember, .co-card{
  transition:transform .42s var(--ease), box-shadow .42s var(--ease),
             border-color .42s var(--ease);
}
.figframe, .gitem, .st-shot, .bm-shot, .pc-shot{overflow:hidden;}
.figframe img, .gitem img, .st-shot img, .bm-shot img, .pc-shot img{
  transition:transform .8s var(--ease);
}

/* ===== facebook videos (home) ======================================= */
.fbvids{background:var(--paper); padding:56px 0;}
.fbvid-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:26px;}
.fbvid{background:var(--white); border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(41,53,65,.10); display:flex; flex-direction:column;}
.fbvid-frame{position:relative; width:100%; aspect-ratio:16/9; background:#0b0f14; overflow:hidden;}
.fbvid-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* The cover over each video. Nothing at all is fetched from Facebook until a
   visitor presses it, which is what this is for: an embedded Facebook video
   that will not play, and a share link never will, replaces itself with
   Facebook's own grey Video unavailable panel, and that panel would be sitting
   on the home page of a charity before anyone had asked for a video. So the
   page shows its own cover instead, and the press either plays the video here
   or opens it on Facebook, where it always works. Both are a real link in the
   HTML, so this still works with no JavaScript at all. */
.fbvid-cover{
  position:absolute; inset:0; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:13px;
  margin:0; padding:0; border:0; cursor:pointer; font:inherit;
  color:var(--white); text-align:center; text-decoration:none;
  background:
    radial-gradient(115% 115% at 50% 4%, rgba(14,154,162,.40) 0%, rgba(7,42,46,0) 62%),
    linear-gradient(158deg, #0C3F3B 0%, #00464B 54%, #072A2E 100%);
}
.fbvid-cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
/* a chosen cover photograph needs a wash under the words, or white text on a
   bright picture cannot be read */
.fbvid-cover.has-cover::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,42,46,.30) 0%, rgba(7,42,46,.62) 100%);
}
.fbvid-play, .fbvid-lbl{position:relative;}
.fbvid-play{
  width:62px; height:62px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--acc); color:var(--pri-dker);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  transition:transform .34s var(--ease), background-color .34s var(--ease);
}
.fbvid-play svg{width:23px; height:23px; margin-left:3px;}
.fbvid-lbl{font-size:14.5px; font-weight:500; letter-spacing:.02em;
  text-shadow:0 1px 10px rgba(7,42,46,.55);}
.fbvid-cover:hover .fbvid-play, .fbvid-cover:focus-visible .fbvid-play{
  transform:scale(1.08); background:var(--acc-lt);
}
.fbvid-cover:focus-visible{outline:3px solid var(--acc-lt); outline-offset:-4px;}
.fbvid-cap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px;}
.fbvid-cap>span{font-size:14px; color:var(--slate);}
.fbvid-link{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--pri); text-decoration:none; white-space:nowrap;}
.fbvid-link svg{width:15px; height:15px; flex:none; color:var(--pri);}
.fbvid-link:hover{color:var(--acc-ink); text-decoration:underline;}
.fbvid-note{margin-top:18px; text-align:center; font-size:13px; color:var(--slate-3);}

/* ===== eSitara app promo (get involved) ============================= */
.esitara{background:var(--cream); padding:60px 0;}
.esit-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:center;}
.esit-media{border-radius:16px; overflow:hidden; box-shadow:0 14px 36px rgba(41,53,65,.16); background:var(--white);}
.esit-media img{display:block; width:100%; height:auto;}
.esit-body .eyebrow{margin-bottom:8px;}
.esit-body h2{font-size:34px; color:var(--pri); margin:0 0 10px;}
.esit-lead{font-size:17px; font-weight:500; color:var(--slate); margin:0 0 12px; line-height:1.55;}
.esit-body p{font-size:15px; color:var(--slate-2); line-height:1.7;}
.esit-body .btn{margin-top:18px;}

@media (hover:hover) and (pointer:fine){
  .card:hover, .pcard:hover, .st-card:hover, .bmember:hover, .co-card:hover,
  .lv-card:hover{
    transform:translateY(-6px); box-shadow:var(--sh-lg);
  }
  .figframe:hover img, .gitem:hover img, .st-shot:hover img,
  .bm-shot:hover img, .pc-shot:hover img{transform:scale(1.055);}
  .btn{transition:transform .3s var(--ease), background-color .3s var(--ease),
                  color .3s var(--ease), border-color .3s var(--ease),
                  box-shadow .3s var(--ease);}
  .btn:hover{transform:translateY(-2px);}
}
.btn:active{transform:translateY(0);}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1280px){
  .car-arrow.prev{left:-34px;} .car-arrow.next{right:-34px;}
}

/* ---- tablet landscape ------------------------------------------------- */
@media (max-width:1120px){
  :root{--maxw:100%;}
  .wrap{padding:0 22px;}
  .car-arrow.prev{left:2px;} .car-arrow.next{right:2px;}
  .car-arrow{background:rgba(255,255,255,.9); box-shadow:var(--sh-sm);}
  .car.on-dark .car-arrow{background:rgba(0,70,75,.6);}
  .blocks-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;}
  .blk.c-pri{grid-column:1 / -1;}
  .collab-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .foot-col:first-child{grid-column:1 / -1;}
  .nav-in{gap:14px;}
  .mainnav{gap:0;}
  .mainnav > li > a{padding:10px 9px; font-size:14px;}
}

/* ---- burger takes over ------------------------------------------------ */
@media (max-width:1024px){
  .mainnav{display:none;}
  .burger{display:flex;}
  .hero-track{min-height:clamp(400px,62vw,520px);}
  .hero-slide{grid-template-columns:52% 48%;}
  .hs-copy-in{max-width:none;}
  .mission-grid{grid-template-columns:minmax(0,1fr); gap:36px;}
  .mission h2{text-align:left;}
  .howto-panel{grid-template-columns:minmax(0,1fr);}
  .contact-grid{grid-template-columns:minmax(0,1fr); gap:32px;}
  .cardgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .boardgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .galgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tb-left .tb-hide{display:none;}
}

/* ---- tablet portrait -------------------------------------------------- */
@media (max-width:900px){
  .twin-grid, .reports-grid{grid-template-columns:minmax(0,1fr);}
  .lv-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .split{grid-template-columns:minmax(0,1fr); gap:30px;}
  .split.text-lead{grid-template-columns:minmax(0,1fr);}
  .split.flip .figframe{order:0;}
  .factgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* the three across variant needs saying separately, or its own base rule
     goes on winning over the two column tablet rule above */
  .collab-grid.three{grid-template-columns:repeat(2,minmax(0,1fr));}
  .car[data-per="4"] .car-tr, .car[data-per="3"] .car-tr{
    grid-auto-columns:calc((100% - 20px) / 2);
  }
}

/* ---- hero narrows, it never stacks ------------------------------------ */
@media (max-width:820px){
  .sec{padding:48px 0;}
  /* The colour panel takes more of the width as the screen narrows, because the
     words need the room, but the photograph is never dropped underneath. The
     height stops being a viewport sum here and is set by the words instead, so
     no phone gets a banner taller than what it has to say. */
  .hero-slide{grid-template-columns:56% 44%;}
  .hero-track{min-height:0;}
  .hero-slide.on{position:relative;}
  .hero-slide{--hsX:16%;}
  .hs-copy{padding:30px 14px 34px 0;}
  .hs-copy-in{padding-left:22px;}
  .hs-mark{width:52px; margin-bottom:10px;}
  /* both arrows sit over the photograph, clear of the seam and of the words */
  .hero-arrow{width:42px; height:42px;}
  .hero-arrow.prev{left:auto; right:62px;}
  .hero-arrow.next{right:12px;}
  .hero-dots{top:auto; bottom:12px;}
  .blocks-grid{grid-template-columns:minmax(0,1fr);}
  .topbar-in{flex-direction:column; gap:6px; align-items:center; text-align:center;}
  .tb-left{justify-content:center; flex-wrap:wrap; gap:14px;}
  .foot-grid{grid-template-columns:minmax(0,1fr);}
  .galgrid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;}
  .rc-grid2{grid-template-columns:minmax(0,1fr);}
  .fbvid-grid{grid-template-columns:minmax(0,1fr);}
  .fbvid-play{width:54px; height:54px;}
  .fbvid-play svg{width:20px; height:20px;}
  .esit-grid{grid-template-columns:minmax(0,1fr); gap:22px;}
  .esit-media{order:-1;}
}

/* ---- large phones ----------------------------------------------------- */
@media (max-width:680px){
  :root{--rvY:22px; --rvX:26px; --rvT:.66s; --stgT:.6s;}
  .sec{padding:40px 0;}
  .wrap{padding:0 18px;}
  .hd{margin-bottom:28px;}
  .cardgrid, .boardgrid, .lv-grid{grid-template-columns:minmax(0,1fr);}
  .collab-grid, .collab-grid.two, .collab-grid.three{grid-template-columns:minmax(0,1fr);}
  .car[data-per="4"] .car-tr, .car[data-per="3"] .car-tr,
  .car[data-per="2"] .car-tr{grid-auto-columns:100%;}
  .fld-row{grid-template-columns:minmax(0,1fr);}
  .fbvid-cap{flex-wrap:wrap; gap:6px 12px;}
  .ribbon{font-size:17px; padding:8px 40px;}
  .galgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .brand img{width:46px; height:43px;}
  .brand-tx .bn{font-size:18px;}
  .brand-tx .bu{font-size:11.5px;}
  .nav-in{padding:10px 18px;}
  .foot-bottom-in{flex-direction:column; text-align:center; gap:11px;}
}

/* ---- phones: header must fit, nothing may exceed the viewport --------- */
@media (max-width:560px){
  .wrap{padding:0 16px;}
  .nav-in{padding:9px 16px; gap:10px; flex-wrap:nowrap;}
  /* the Support button goes, but the burger lives inside .nav-cta and stays */
  .nav-cta > .btn{display:none;}
  .nav-cta{flex:none; gap:0;}
  .burger{flex:none; display:flex;}
  .nav-in > nav{flex:none;}
  .brand{gap:9px;}
  .topbar{font-size:12px;}
  .tb-left{gap:10px 12px; row-gap:4px;}
  .tb-item{font-size:12px; white-space:normal;}
  .tb-urdu{display:none;}
  .split, .twin-grid, .contact-grid, .mission-grid{gap:26px;}
  .hs-copy{padding:26px 12px 30px 0;}
  .hs-copy-in{padding-left:18px;}
  .hero-arrow.prev{right:56px;}
  .factgrid{gap:14px;}
  .st-tx, .pc-tx, .card-tx{padding:18px 16px;}
  .drawer{width:min(340px,90vw);}
}

/* ---- small phones ----------------------------------------------------- */
@media (max-width:430px){
  :root{--rvY:18px; --rvX:20px; --rvT:.6s; --stgT:.55s;}
  .factgrid, .factgrid.two{grid-template-columns:minmax(0,1fr);}
  /* the words take three fifths of a small phone and the photograph two, and
     the type comes down with the column so no headline word can outgrow it */
  .hero-slide{grid-template-columns:60% 40%; --hsX:20%;}
  .hs-copy{padding:22px 11px 26px 0;}
  .hs-copy-in{padding-left:15px;}
  .hs-urdu{font-size:17px; line-height:1.9; margin-bottom:2px;}
  .hs-t1, .hs-t2{font-size:clamp(20px,5.6vw,26px);}
  .hs-sub{font-size:clamp(13px,3.4vw,14.5px); margin-top:10px;}
  .hs-sub-u{font-size:13px;}
  .hs-mark{width:46px; margin-bottom:8px;}
  .hs-btns{flex-direction:column; width:100%; align-items:stretch; margin-top:16px; gap:9px;}
  .hs-btns .btn{width:100%; font-size:13.5px; padding:10px 12px;}
  .hero-arrow{width:36px; height:36px;}
  .hero-arrow svg{width:15px; height:15px;}
  .hero-arrow.prev{right:48px;}
  .hero-arrow.next{right:9px;}
  .hero-dots{bottom:10px;}
  .counts{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 12px;}
  .vo-who{flex-direction:column; gap:9px;}
  .ribbon{font-size:15.5px; padding:8px 34px;
    clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);}
  .totop{right:12px; bottom:76px;}
  .wa-float{right:12px; bottom:18px; width:44px; height:44px;}
  .splash-mark{width:106px; height:106px;}
  .splash-mark img{width:76px;}
  .splash-name{font-size:16px; letter-spacing:.16em;}
  .btn{white-space:normal;}
  .galgrid{gap:7px;}
  .tb-social{gap:12px;}
}

/* ---- 320px class devices ---------------------------------------------- */
@media (max-width:380px){
  .wrap{padding:0 13px;}
  .nav-in{padding:8px 13px; gap:8px;}
  .brand img{width:40px; height:37px;}
  .brand-tx .bn{font-size:16.5px;}
  .brand-tx .bu{font-size:10.5px;}
  .burger{width:38px; height:34px;}
  .sec{padding:34px 0;}
  .hd{margin-bottom:24px;}
  /* the narrowest phones: two thirds words, one third photograph. The arrows go
     because there is no longer room for them clear of the seam, and the dots
     underneath still change the slide. */
  .hero-slide{grid-template-columns:64% 36%; --hsX:22%;}
  .hs-copy{padding:18px 10px 22px 0;}
  .hs-copy-in{padding-left:14px;}
  .hs-urdu{font-size:15.5px; line-height:1.8;}
  .hs-t1, .hs-t2{font-size:clamp(19px,5.4vw,23px);}
  .hs-sub{font-size:clamp(12.5px,3.3vw,13.5px); margin-top:9px;}
  .hs-sub-u{font-size:12.5px;}
  .hs-mark{width:40px; margin-bottom:6px;}
  .hs-btns{margin-top:14px;}
  .hs-btns .btn{font-size:13px; padding:9px 11px;}
  .hero-arrow{display:none;}
  .hero-dots{bottom:8px;}
  .counts{grid-template-columns:minmax(0,1fr); gap:18px;}
  .galgrid{grid-template-columns:minmax(0,1fr);}
  .tb-item svg{display:none;}
  .ribbon{font-size:14px; padding:7px 28px;}
  .st-tx, .pc-tx, .card-tx{padding:16px 14px;}
}

/* ---- short landscape phones ------------------------------------------ */
@media (max-height:520px) and (orientation:landscape){
  .hero-track{min-height:0;}
  .sec{padding:32px 0;}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv, .rv-dn, .rv-l, .rv-r, .rv-f, .rv-z,
  .stg > *, .tsw > i, .hda .hd-sm, .hda .orn i, .hda .orn s, .cnt .cn{
    opacity:1 !important; transform:none !important;
    filter:none !important; clip-path:none !important;
  }
  .wa-float{animation:none !important;}
  /* a still background is fine, but drop the sticky travel */
  .mission-bg > img, .stories-bg > img, .voices-bg > img, .pbanner-bg > img{
    position:absolute; inset:0; height:100% !important;
  }
  .hero-slide.on .hs-copy-in > *{animation:none !important; opacity:1 !important; transform:none !important;}
  .hero-slide.on .hs-photo img{animation:none !important; transform:none !important;}
  /* the two halves sit where they belong instead of parting and returning */
  .hs-copy, .hs-photo{transform:none !important;}
  .splash-ring{border-top-color:rgba(255,255,255,.22);}
  .splash-bar i{width:100%; animation:none !important;}
  .hv-bob:hover{animation:none !important;}
  .hv-grow:hover{transform:none !important;}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  #splash, .topbar, .burger, .drawer, .scrim, .totop, .wa-float,
  .hero-arrow, .hero-dots, .car-arrow, .car-dots{display:none !important;}
  body{background:#fff; color:#000;}
  .site-head{position:static;}
  a{color:#000;}
}