/* ============================================================
   Pakistan & Counting — About Us (inner page)
   Shared header/footer/tokens in style.css; boxed headline,
   rainbow, sponsor, ticker from industry-reports.css.
   Images: assets/images/about/
   ============================================================ */

/* boxed-headline offsets: hero = YELLOW, section headings = GREEN (Figma) */
.ir-boxed--hero{box-shadow:8px 8px 0 0 var(--yellow)}

/* ============================================================
   HERO  (main-about-BG.png behind, faint white scrim)
   ============================================================ */
.ab-hero{position:relative;margin-top:-84px;padding:170px 0 92px;text-align:center;overflow:hidden;
  background-color:#fff;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px);
  background-size:46px 46px}
.ab-hero__inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 32px}
.ab-hero__kicker{display:inline-block;font-family:var(--ff);font-weight:700;
  font-size:clamp(16px,2.1vw,28px);letter-spacing:.2em;text-transform:uppercase;color:#000;margin-bottom:16px}
.ab-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--dark)}
.ab-hero__title .ir-boxed{font-size:clamp(26px,5.4vw,64px);color:var(--dark);white-space:nowrap}
.ab-hero__sub{margin:42px auto 0;max-width:720px;font-family:var(--ff);font-weight:600;
  text-transform:none;color:#3a3a3a;font-size:clamp(16px,1.9vw,24px);line-height:1.45}

/* ============================================================
   SHARED section heading + slanted wedge underline (SVG assets)
   ============================================================ */
.ab-h{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:var(--dark);
  line-height:1;font-size:clamp(28px,3.8vw,48px);display:inline-block}
.ab-rule{display:none}

/* ============================================================
   OUR STORY  (Our-Story-BG.png = green panel + watermark + arrow | copy)
   ============================================================ */
/* SVG = green panel + growth curves only (its opaque white bg was removed), so the
   page's continuous box-grid shows through the rest of the section. */
.ab-story{position:relative;overflow:hidden;
  background:url('../images/about/Our-Story-BG.svg?v=2') no-repeat center center;background-size:cover;
  padding:78px 0}
.ab-story__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.ab-story__media{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:flex-start;min-height:430px}
.ab-story__media img{display:block;width:100%;max-width:400px;height:auto}
.ab-story__copy{position:relative;z-index:1}
.ab-story__copy p{font-family:var(--ff);font-weight:500;color:#4b4b4b;
  font-size:clamp(14px,1.05vw,16px);line-height:1.65;margin-top:18px;max-width:560px;text-transform:none}
.ab-story__copy p:first-of-type{margin-top:26px}

/* DESKTOP portrait geometry — measured off Figma (frame is 1920 wide):
   the photo is placed at its NATURAL size (688×904) and its bottom bleeds 45px past the
   section's foot. Those last 45px of the asset are transparent, so the suit lands exactly
   ON the section's bottom edge (`.ab-story` already sets overflow:hidden, which clips it).
   Section then measures 57 + 781 + 78 = 916px tall, matching Figma.
   Below ~1620px there isn't room for full size beside the copy, so it scales with the
   viewport and stops bleeding left. ≤960px has its own green-band layout further down. */
@media (min-width:961px){
  .ab-story{padding:30px 0 78px}
  .ab-story__media{margin-bottom:-78px}          /* image bottom → section's bottom edge */
  .ab-story__media img{
    --story-w:clamp(400px,35.83vw,688px);        /* = 688px (natural) at 1920 */
    width:var(--story-w);
    max-width:none;
    margin-left:min(0px,calc(718px - 25vw));     /* bleeds left to x=90 on wide screens only */
    /* The asset carries a 45px transparent tail below the suit at natural size (45/688 of
       its width). Scale the pull-down with the image, or the suit over-crops as it shrinks. */
    margin-bottom:calc(var(--story-w) * -0.0654);
  }
}

/* ============================================================
   MISSION & IMPACT  (light grid bg | dark right-bleed panel; boxes straddle its edge)
   ============================================================ */
.ab-mission{position:relative;overflow:hidden;background:#fff;padding:20px 0 82px}
.ab-mission::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}
.ab-mission__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
/* left column is RIGHT-aligned toward the centre/boxes (Figma) */
.ab-mission__copy{position:relative;z-index:2;text-align:left}
.ab-mission__copy .ab-rule{margin-left:auto}
.ab-mission__lead{margin:28px 0 0;font-family:var(--ff);font-weight:800;font-style:italic;color:var(--dark);
  font-size:clamp(20px,2.1vw,25px);line-height:1.2}
.ab-mission__copy p{font-family:var(--ff);font-weight:500;color: var(--dark);
  font-size:clamp(14px,1.05vw,16px);line-height:1.65;margin:20px 0 0}
/* stats column: boxes sit toward the left of the column, dark panel bleeds right behind their right edge */
.ab-stats{position:relative;display:flex;flex-direction:column;gap:22px;padding:54px 0;align-items:flex-start}
/* right edge reaches the viewport edge (reasonable panel width, so the image covers cleanly) */
.ab-stats::before{content:"";position:absolute;top:0;bottom:0;left:50%;right:calc((var(--wrap) - 100vw)/2 - 32px);z-index:0;
  border-radius:16px 0 0 16px;
  background:#2c2c2c url('../images/about/Mission-and-Impact.webp') center center/cover no-repeat}
.ab-stat{position:relative;z-index:1;width:min(100%,340px);margin-left:7%;
  display:flex;align-items:center;gap:15px;background:#fff;padding:14px 18px}
.ab-stat--yt{border:2px solid var(--orange);box-shadow:6px 6px 0 0 var(--orange)}
.ab-stat--ig{border:2px solid var(--pink);box-shadow:6px 6px 0 0 var(--pink)}
.ab-stat--li{border:2px solid var(--green);box-shadow:6px 6px 0 0 var(--green)}
.ab-stat--fb{border:2px solid #1877F2;;box-shadow:6px 6px 0 0 #1877F2;}
.ab-stat--vw{border:2px solid var(--yellow);box-shadow:6px 6px 0 0 var(--yellow)}
.ab-stat__ic{flex:0 0 auto;width:46px;height:46px;border-radius:10px;display:grid;place-items:center;color:#fff}
.ab-stat--yt .ab-stat__ic{background:var(--orange)}
.ab-stat--ig .ab-stat__ic{background:var(--pink)}
.ab-stat--li .ab-stat__ic{background:var(--green)}
.ab-stat--fb .ab-stat__ic{background:#1877F2}
.ab-stat--vw .ab-stat__ic{background:var(--yellow);color:#3a3a3a}
.ab-stat__ic svg{width:25px;height:25px}
.ab-stat__t{display:flex;flex-direction:column;line-height:1}
.ab-stat__t b{font-family:var(--ff);font-weight:900;font-size:clamp(24px,2.6vw,32px);color:var(--dark)}
.ab-stat__t span{font-family:var(--ff);font-weight:500;font-size:14px;color:#6b6b6b;margin-top:5px}

/* ============================================================
   MEET THE TEAM
   ============================================================ */
.ab-team{position:relative;background:#fff;padding:64px 0 84px;text-align:center;overflow:hidden}
.ab-team::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}
.ab-team>*{position:relative;z-index:1}
.ab-team__mark{height:52px;width:auto;display:inline-block;margin-bottom:16px}
.ab-team__title{margin:0 auto}
.ab-team__title .ir-boxed{font-size:clamp(24px,3.6vw,46px);color:var(--dark)}
.ab-team__sub{margin:24px auto 0;max-width:640px;font-family:var(--ff);font-weight:500;
  text-transform:none;color:#7a7a7a;font-size:clamp(14px,1.15vw,16px);line-height:1.5}
.ab-team__viewport{margin:48px -8px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;cursor:grab;touch-action:pan-x}
.ab-team__viewport.is-dragging{cursor:grabbing;scroll-snap-type:none}
.ab-team__viewport::-webkit-scrollbar{display:none}
.ab-team__track{display:flex;gap:26px;padding:8px;width:max-content}
.ab-member{flex:0 0 auto;width:236px;margin:0;scroll-snap-align:start;text-align:left;
  background:#fff;border:1px solid #ededed;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.ab-member__photo{position:relative;width:100%;aspect-ratio:236/236;overflow:hidden;background:#eee}
.ab-member__photo img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-filter: grayscale(100%);
  filter: grayscale(100%)}
.ab-member figcaption{display:flex;align-items:center;gap:12px;padding:15px 16px 17px}
.ab-member__info{flex:1 1 auto;min-width:0}
.ab-member__info b{display:block;font-family:var(--ff);font-weight:800;font-size:16px;color:var(--dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-member__info span{display:block;font-family:var(--ff);font-weight:500;font-size:12.5px;
  color:var(--dark);margin-top:3px}
.ab-member__li{flex:0 0 auto;display:grid;place-items:center;color:#b6b6b6;transition:.15s}
.ab-member__li:hover{color:#0A66C2}
.ab-member__li svg{width:26px;height:26px}
.ab-team__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px}
.ab-team__arrow{width:44px;height:44px;border:1.5px solid var(--dark);background:#fff;color:var(--dark);
  display:grid;place-items:center;cursor:pointer;transition:.15s}
.ab-team__arrow:hover{background:var(--dark);color:#fff}
.ab-team__arrow svg{width:18px;height:18px}
.ab-team__dots{display:flex;align-items:center;gap:7px}
.ab-dot{width:9px;height:9px;background:#d5d5d5;border:0;padding:0;cursor:pointer;transition:.2s}
.ab-dot.is-active{width:26px;background:var(--orange)}

/* OUR PARTNERS — reuses .ir-sponsor from industry-reports.css */
.ab-partners .ir-sponsor__title{margin-bottom:4px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  /* OUR STORY: full-width green band with the same green + growth-curve artwork as
     desktop (SVG), portrait on top, copy below on the faint grid. The old CSS
     "PAKISTAN & COUNTING" watermark text is removed (client request). */
  /* transparent section, like desktop — so the site-wide box grid on <body> shows
     through the SVG's transparent areas (the boxes sit BEHIND the SVG image) */
  .ab-story{background:transparent;padding:0}
  .ab-story__inner{grid-template-columns:1fr;gap:0;padding:0}
  .ab-story__media{order:-1;min-height:320px;overflow:hidden;
    padding:34px 20px 0;justify-content:center;align-items:flex-end;
    background: url('../images/about/Our-Story-BG.svg?v=2') no-repeat left center/ cover}
  .ab-story__media::after{content:none}
  .ab-story__media img{position:relative;z-index:1;width:100%;max-width:320px;margin-bottom:-20px}
  /* no own grid — the transparent section lets the continuous <body> box grid show */
  .ab-story__copy{padding:38px 24px 52px;text-align:center}
  .ab-story__copy p{max-width:none}
  .ab-rule{margin-left:auto;margin-right:auto}

  /* MISSION: single column; dark panel backs ONLY the stat cards */
  .ab-mission{padding:44px 0 56px}
  .ab-mission__inner{grid-template-columns:1fr;gap:30px}
  .ab-mission__copy{text-align:center}
  .ab-mission__copy p,.ab-mission__lead{max-width:none}
  .ab-mission__lead{margin-left:auto;margin-right:auto}
  .ab-stats{padding:0;align-items:center}
  .ab-stats::before{top:0;bottom:0;left:-100vw;right:-100vw;border-radius:0;
    padding:34px 0;background-position:center}
  .ab-stat{margin-left:0;width:min(100%,360px);margin:0 auto}
  .ab-stats>.ab-stat:first-child{margin-top:34px}
  .ab-stats>.ab-stat:last-child{margin-bottom:34px}
}
@media (max-width:600px){
  .ab-hero{margin-top:-70px;padding:120px 0 56px}
  .ab-hero__title .ir-boxed{font-size:clamp(17px,5.4vw,40px)}
  .ab-team{padding:52px 0}
  .ab-member{width:210px}
}