/* ============================================================
   Pakistan & Counting — Explainers (inner page)
   Shared header/footer/tokens in style.css; boxed headline,
   rainbow, ticker from industry-reports.css.
   Exact Figma colours: pink #EF2167 · orange #FF6B22 · green #26B685
   · yellow #FFCB00 · dark #3A3A3A · body #4E4E4E · pink-tint #FFAEC9
   ============================================================ */

:root{ --pink:#EF2167; --ex-orange:#FF6B22; --ex-dark:#3A3A3A; --ex-body:#4E4E4E; }

/* pink boxed-title variant (hero) */
.ir-boxed--pink{box-shadow:9px 9px 0 0 var(--pink)}

/* soft green glow + faint grid shared by the content sections */
.ex-understand,.ex-grid-sec,.ex-data,.ex-lead{position:relative;overflow:hidden;background:#fff}
.ex-understand::before,.ex-grid-sec::before,.ex-data::before,.ex-lead::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);
  background-size:46px 46px}

/* ============================================================
   HERO  (EXPLAINERS)  — faded photo + white fade + pink tint + grid
   ============================================================ */
.ex-hero{position:relative;margin-top:-84px;padding:170px 0 92px;text-align:center;overflow:hidden;background:#fff}
.ex-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  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}
.ex-hero__inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 32px}
.ex-hero__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1;color:var(--ex-dark)}
.ex-hero__title .ir-boxed{font-size:clamp(28px,5.2vw,60px);color:var(--ex-dark);border-color:var(--ex-dark);white-space:nowrap}
.ex-hero__sub{margin:34px auto 0;max-width:660px;font-family:var(--ff);font-weight:500;
  color:var(--ex-body);font-size:clamp(15px,1.5vw,26px);line-height:1.35}

/* ============================================================
   UNDERSTANDING THE ECONOMY
   ============================================================ */
.ex-understand{padding:70px 0 78px}
/* the pink "PAKISTAN & COUNTING" watermark panel: sits behind the featured card
   (top pink block level with the card) and its watermark tail continues below it */
/* brand "PAKISTAN & COUNTING" watermark image removed (client request); the solid
   pink panel colour is kept via .ex-feature::before */
.ex-understand__wm{display:none}
.ex-understand__inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center}
.ex-understand__head{font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1.02;
  color:var(--ex-dark);font-size:clamp(30px,3.6vw,46px)}
.ex-understand__rule{display:none}
.ex-understand__text{margin:20px 0 0;font-family:var(--ff);font-weight:500;color:var(--ex-body);
  font-size:clamp(14px,1.05vw,16px);line-height:1.7;max-width:520px}

/* "See All On -> YouTube Channel" — big YouTube play chip + two-line text */
.ex-yt{display:inline-flex;align-items:center;gap:18px;margin-top:30px}
.ex-yt__icon{flex:0 0 auto;width:90px;height:50px;border-radius:10px;background:var(--pink);
  display:flex;align-items:center;justify-content:center}
.ex-yt__icon svg{width:90px;height:90px;color:#fff}
.ex-yt__txt{display:flex;flex-direction:column;line-height:1.05;font-family:var(--ff);text-transform:uppercase;color:var(--ex-dark)}
.ex-yt__top{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;letter-spacing:.04em}
.ex-yt__top svg{width:20px;height:20px;color:var(--pink)}
.ex-yt__big{font-weight:900;font-size:clamp(19px,1.8vw,26px);letter-spacing:.01em}
.ex-yt:hover .ex-yt__icon{background:#d81a58}

/* featured EDUCATION card sits on the pink "Understanding the Economy" watermark panel */
.ex-feature{position:relative;display:block;overflow:visible;line-height:0;}
/* continue the watermark's pink block to the right screen edge so it NEVER leaves a
   white gap at any zoom/width. Sized in card-relative % (top/height match the image's
   pink block: top 51.9% of the 132%-tall panel) so it stays aligned at every zoom. */
.ex-feature::before{content:"";position:absolute;z-index:0;pointer-events:none;
  top:-15%;height:68.5%;left:55%;right:-100vw;background:#ef2167}
.ex-feature__img{position:relative;z-index:1;display:block;width:100%;height:auto}
.ex-feature__watch{top:-70px;position:relative;z-index:1;display:inline-flex;align-items:center;gap:11px;
  padding:15px 24px 17px;color:#fff;font-family:var(--ff);font-weight:900;font-size:clamp(15px,1.4vw,19px);
  line-height:1;letter-spacing:.05em;text-transform:uppercase}
.ex-feature__play{width:0;height:0;flex:0 0 auto;border-style:solid;border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent #fff}
.ex-feature:hover .ex-feature__watch{color:#ffe3ee}

/* ============================================================
   EXPLAINER CARD GRID  (mint cards, green accents, BLACK play)
   ============================================================ */
.ex-grid-sec{padding:6px 0 78px}
.ex-grid{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0px 150px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.ex-card{background:#f0fbf7;border:1.5px solid #bfe8d9;padding:12px 12px 20px;
  box-shadow:8px 9px 0 0 #bfe8d9;display:flex;flex-direction:column}
.ex-card__thumb{display:block;line-height:0;overflow:hidden;aspect-ratio:16/9;background:#e7f4ee}
.ex-card__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ex-card__by{margin:14px 2px 0;font-family:var(--ff);font-weight:600;font-size:13px;color:var(--green)}
.ex-card__by span{color:var(--green);font-weight:600}
.ex-card__title{margin:8px 2px 0;font-family:var(--ff);font-weight:700;color:var(--ex-dark);
  font-size:16px;line-height:1.3}
.ex-card__title .ex-ep{color:var(--green);font-weight:800}
.ex-card__desc{margin:8px 2px 0;font-family:var(--ff);font-weight:400;color:#272727;
  font-size:13px;line-height:1.55;flex:1 0 auto}

/* Watch Now — coloured text, BLACK play triangle */
.ex-watch{display:inline-flex;align-items:center;gap:9px;margin:16px 2px 0;
  font-family:var(--ff);font-weight:900;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
.ex-play{width:0;height:0;flex:0 0 auto;display:inline-block;
  border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #111}
.ex-watch:hover{color:#0d2c22}

.ex-more{position:relative;z-index:1;display:flex;justify-content:center;margin-top:46px}
.ex-more__btn{font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:15px 44px;cursor:pointer;border:0}

/* ============================================================
   SERIES SHELVES — videos grouped by series, like the YT channel
   ============================================================ */
.ex-series-wrap{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 150px}
.ex-series{margin-top:44px}
.ex-series:first-child{margin-top:6px}
/* headless "Interviews" continuation row — hugs the Explainer row above it */
.ex-series--cont{margin-top:4px}
.ex-series__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.ex-series__title{font-family:var(--ff);font-weight:900;font-size:clamp(20px,2.3vw,28px);
  color:var(--ex-dark);line-height:1.15;text-transform:uppercase;letter-spacing:.01em}
.ex-series__all{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--ff);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--green);white-space:nowrap}
.ex-series__all span{color:#7a7a7a;font-weight:600}
.ex-series__all:hover{color:var(--green-dk)}
.ex-series__all svg{transition:transform .2s ease}
.ex-series__all:hover svg{transform:translateX(3px)}

/* ---------- polished carousel ---------- */
.ex-slider{position:relative}

/* scroll track — native scrollbar hidden, grab-to-drag, room for card shadows */
.ex-shelf{display:flex;gap:26px;overflow-x:auto;cursor:grab;
  padding:10px 12px 30px 4px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.ex-shelf::-webkit-scrollbar{display:none;width:0;height:0}
.ex-shelf>.ex-card{flex:0 0 296px;margin:0}

/* per-series sponsor — "Sponsored By" + logo BELOW the row, bottom-right */
.ex-spon{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  margin:20px 14px 0 0;text-align:right}
.ex-spon__label{font-family:var(--ff);font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;color:#7a7a7a;white-space:nowrap}
.ex-spon__logos{display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap}
.ex-spon__logo{max-width:150px;max-height:60px;width:auto;height:auto;object-fit:contain}
/* Data Meets Insight card moved into the Data To Life section */
.ex-data__series{margin-top:44px}
.ex-shelf a,.ex-shelf .ex-watch--btn{cursor:pointer}
.ex-shelf img{-webkit-user-drag:none;user-drag:none}
.ex-shelf.is-grabbing{cursor:grabbing}
.ex-shelf.is-grabbing a,.ex-shelf.is-grabbing .ex-watch--btn{cursor:grabbing}
.ex-shelf.is-grabbing,.ex-shelf.is-grabbing *{user-select:none}

/* video card — hover: the WHOLE box turns green and the text turns white */
.ex-vcard{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease}
.ex-vcard:hover{transform:translateY(-4px);background:var(--green);border-color:var(--green);box-shadow:8px 12px 0 0 #0d6b4f}
.ex-vcard:hover .ex-card__title,
.ex-vcard:hover .ex-card__title a,
.ex-vcard:hover .ex-card__desc,
.ex-vcard:hover .ex-watch,
.ex-vcard:hover .ex-watch *{color:#fff}
.ex-vcard .ex-card__thumb{position:relative;}
.ex-vcard .ex-card__thumb img{transition:transform .35s ease}
.ex-vcard:hover .ex-card__thumb img{transform:scale(1.05)}
.ex-vcard .ex-card__title{margin-top:12px;font-size:15px;min-height:40px}
.ex-vcard .ex-card__title a{color:inherit;text-decoration:none;transition:color .2s ease}

/* Data-to-Life cards — same whole-box green hover */
.ex-datacard{transition:background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.ex-datacard:hover{background:var(--green);border-color:var(--green);transform:translateY(-4px);box-shadow:8px 12px 0 0 #0d6b4f}
.ex-datacard:hover .ex-datacard__title,
.ex-datacard:hover .ex-datacard__desc,
.ex-datacard:hover .ex-watch,
.ex-datacard:hover .ex-watch *,
.ex-datacard:hover .ex-datacard__partners,
.ex-datacard:hover .ex-datacard__partners *{color:#fff}

/* touch devices: no sticky green after tap */
@media (hover:none){
  .ex-vcard:hover,.ex-datacard:hover{background:inherit;border-color:inherit;transform:none;box-shadow:none}
  .ex-vcard:hover .ex-card__title,.ex-vcard:hover .ex-card__title a,.ex-vcard:hover .ex-card__desc,
  .ex-datacard:hover .ex-datacard__title,.ex-datacard:hover .ex-datacard__desc{color:inherit}
}
.ex-vcard .ex-card__desc{margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ex-watch--btn{background:none;border:0;padding:0;cursor:pointer;align-self:flex-start}

/* edge fade hints (shown only while there is more to scroll that way) */
.ex-slider::before,.ex-slider::after{content:"";position:absolute;top:6px;bottom:24px;width:56px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .25s ease}
.ex-slider::before{left:0;background:linear-gradient(90deg,#fff 18%,rgba(255,255,255,0))}
.ex-slider::after{right:0;background:linear-gradient(270deg,#fff 18%,rgba(255,255,255,0))}
.ex-slider.is-scrollable:not(.at-start)::before{opacity:1}
.ex-slider.is-scrollable:not(.at-end)::after{opacity:1}

/* prev / next arrow buttons — big & high-contrast so navigation is obvious */
.ex-slider__nav{position:absolute;z-index:3;top:108px;transform:translateY(-50%);
  width:52px;height:52px;display:none;place-items:center;
  background:#fff;color:var(--ex-dark);border:1.5px solid #d7e6df;border-radius:50%;cursor:pointer;
  box-shadow:0 8px 22px rgba(20,45,32,.22);
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease,transform .12s ease}
.ex-slider.is-scrollable .ex-slider__nav{display:grid}
.ex-slider__nav svg{width:24px;height:24px}
.ex-slider__nav--prev{left:-24px}
.ex-slider__nav--next{right:-24px}
.ex-slider__nav:hover{background:var(--green);color:#fff;border-color:var(--green);
  box-shadow:0 10px 26px rgba(38,182,133,.45);transform:translateY(-50%) scale(1.06)}
.ex-slider__nav:active{transform:translateY(-50%) scale(.95)}
.ex-slider__nav.is-disabled{opacity:.34;pointer-events:none;box-shadow:0 4px 12px rgba(20,45,32,.14)}

@media (max-width:1024px){
  .ex-series-wrap{padding:0 32px}
  .ex-shelf>.ex-card{flex:0 0 288px}
  .ex-slider__nav--prev{left:-18px}
  .ex-slider__nav--next{right:-18px}
}
@media (max-width:767px){
  .ex-series-wrap{padding:0 20px}
  .ex-series__head{flex-wrap:wrap;gap:6px}
  .ex-series__all{font-size:11px}
  .ex-shelf{gap:16px;padding:8px 2px 26px}
  .ex-shelf>.ex-card{flex:0 0 82%}
  .ex-slider__nav{display:none!important}   /* touch: swipe instead of arrows */
  .ex-slider::before,.ex-slider::after{display:none}
}

/* ============================================================
   shared centred section title + subtitle (Data / Lead)
   ============================================================ */
.ex-sec-title{position:relative;z-index:1;text-align:center;font-family:var(--ff);font-weight:900;text-transform:uppercase;line-height:1}
.ex-sec-title .ir-boxed{font-size:clamp(24px,3.4vw,40px);color:var(--ex-dark)}
.ex-sec-sub{position:relative;z-index:1;margin:24px auto 0;max-width:900px;text-align:center;font-family:var(--ff);
  font-weight:500;color:var(--ex-body);font-size:clamp(14px,1.05vw,16px);line-height:1.65}
.ex-data > .container,.ex-lead > .container{position:relative;z-index:1}

/* ============================================================
   DATA TO LIFE  (thin border, BLACK play)
   ============================================================ */
.ex-data{padding:35px 0 74px}
.ex-data__grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
/* Figma (node 1455:5596/5613): fill #fff5f0, 1px #ff6b22 border @50%, hard orange
   offset shadow +10/+13 @50%, generous inner padding — SAME for both cards. */
.ex-datacard{position:relative;background:#fff5f0;border:1px solid rgba(255,107,34,.5);
  padding:40px 42px 34px;box-shadow: 10px 13px 0 0 rgba(255,107,34,.5);}
.ex-datacard--green .ex-watch,.ex-datacard--orange .ex-watch{color:var(--ex-orange)}

.ex-datacard__thumb{position:relative;display:block;line-height:0;overflow:hidden;aspect-ratio:16/9;background:#eee}
.ex-datacard__thumb img{display:block;width:100%;object-fit:cover}
.ex-datacard__thumb--soon img{filter:brightness(.20)}
.ex-soon{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;line-height:1.15;pointer-events:none}
.ex-soon__title{font-family:var(--ff);font-weight:900;text-transform:uppercase;color:#fff;
  font-size:clamp(20px,2.4vw,34px);letter-spacing:.01em}
.ex-soon__rule{display:none!important}
.ex-soon__sub{font-family:var(--ff);font-weight:600;color:#f2f2f2;font-size:clamp(12px,1.1vw,15px)}

.ex-datacard__tag{position:absolute;top:26px;right:28px;z-index:3;background:var(--ex-orange);color:#fff;
  font-family:var(--ff);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px;border-radius:3px}

.ex-datacard__partners{display:flex;align-items:center;gap:10px;margin-top:18px;min-height:30px}
.ex-datacard__gallup{font-weight:700;color:#913C12;font-size:18px;letter-spacing:.01em}
.ex-datacard__amp{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--ex-orange);color:#fff;font-family:var(--ff);font-weight:900;font-size:25px}
.ex-datacard__pc{font-family:var(--ff);font-weight:700;color:#913C12;font-size:18px}
.ex-datacard__spon{font-family:var(--ff);font-weight:700;color:#913C12;font-size:14px;text-transform:uppercase;letter-spacing:.02em}
.ex-datacard__wb{height:38px;width:auto}
.ex-datacard__title{margin:14px 0 0;font-family:var(--ff);font-weight:500;color:var(--ex-dark);
  font-size:clamp(19px,1.7vw,24px)}
.ex-datacard__desc{margin:8px 0 0;font-family:var(--ff);font-weight:500;color:#8a8a8a;
  font-size:13.5px;line-height:1.55}
.ex-datacard .ex-watch{margin-top:14px}

/* ============================================================
   LEAD THE CONVERSATION
   ============================================================ */
.ex-lead{padding:64px 0 84px;text-align:center}
/* Trusted logos — seamless auto-scrolling marquee (track holds 2 copies). */
.ex-lead__slider{position:relative;z-index:1;margin:44px auto 0;overflow:hidden;max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.ex-lead__track{display:flex;align-items:center;width:max-content;
  animation:ex-lead-marquee 45s linear infinite;will-change:transform}
.ex-lead__slider:hover .ex-lead__track{animation-play-state:paused}
@keyframes ex-lead-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ex-lead__logo{flex:0 0 auto;width:230px;height:120px;margin-right:34px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #ededed;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.06);padding:22px 30px}
.ex-lead__logo img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain}
/* NOTE: on machines with "reduce motion" set (Windows → Animation effects: off),
   style.css's blanket rule freezes all animations. The marquee is re-asserted in
   that exemption block in style.css (alongside the tickers) so it keeps scrolling. */
.ex-lead__cta{position:relative;z-index:1;margin-top:46px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:15px 40px}

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

/* --- Tablet + mobile: card grid becomes a horizontal SLIDER --- */
@media (max-width:1024px){
  .ex-grid{grid-template-columns:none;display:flex;gap:20px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding:6px 32px 22px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ex-grid::-webkit-scrollbar{display:none}
  .ex-card{flex:0 0 320px;scroll-snap-align:start}
    .ex-understand__wm{position:absolute;top:-20%;right:-9%;height:133%}
  .ex-feature::before {background: unset;}
}
@media (max-width:900px){
  .ex-understand__inner{grid-template-columns:1fr;gap:30px}
  .ex-data__grid{grid-template-columns:1fr;gap:30px}
  .ex-hero::before{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}
}
@media (max-width:767px){
  .ex-hero{margin-top:-70px;padding:120px 0 56px}
  .ex-grid{padding:6px 20px 22px;gap:16px}
  .ex-card{flex:0 0 84%}
  .ex-yt{gap:14px}
  .ex-yt__icon{width:60px;height:40px}
  .ex-yt__icon svg{width:38px;height:38px}
  .ex-feature__watch{margin-top: 20px;}
  .ex-data__grid{margin-top:34px}
  .ex-lead__logo{width:200px;height:104px;margin-right:22px;padding:18px 22px}
  .ex-understand__wm{position:absolute;top:-8%;right:-8%;height:132%}
  .ex-feature::before {background: unset;}
}