/* ============================================================
   Pakistan & Counting — Homepage (v3-r2 rebuild)
   Font: Mona Sans (local variable) · Design tokens from Figma
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/Mona-Sans.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('../fonts/Mona-Sans-Italic.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green:#26B685; --green2:#28B685; --green-dk:#1E9E73; --mint:#DEFFF4;
  --yellow:#FFCB00; --yellow2:#FFCD30; --gold:#F9C300; --cream:#FFF8E4;
  --orange:#FF6B22; --peach:#FEE2D5;
  --pink:#EF2167; --pink2:#D82E5D; --pink-lt:#FBDDE5;
  --dark:#3A3A3A; --dark2:#393939; --ink:#16181C;
  --gray:#787878; --gray2:#919191; --line:#E7E7E7;
  --white:#fff; --bg:#fff;
  --ff:'Mona Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --wrap:1320px;
  --radius:16px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;font-family:var(--ff);color:var(--dark);
  background-color:var(--bg);
  /* ONE continuous grid for the whole page. The box is kept at the SAME ~46px size
     on every device — phone, tablet and desktop — instead of scaling down on small
     screens. round() fits a WHOLE number of ~46px columns across the width, so:
       • the box size stays ~46px everywhere (consistent, matches desktop);
       • a whole number of columns fits, so boxes are complete on the left & right
         edges (no thin sliver);
       • the grid starts at 0,0 so the top row is complete too;
       • it stays continuous across sections, so boxes are never cut at a section
         start/end — they flow straight through.
     Fallback for older browsers (no round()): a fixed 46px box. */
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size:46px 46px;
  background-size:calc(100vw / round(100vw / 46px, 1)) calc(100vw / round(100vw / 46px, 1));
  background-position:0 0;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(24px,2.4vw,60px)}
/* Large-screen tiers: the whole site widens progressively above 1600px so big
   monitors don't strand the design in a narrow centred column. ≤1599px is
   unchanged. clamp() padding + these tiers also keep zoom levels sensible. */
@media (min-width:1600px){:root{--wrap:1480px}}
@media (min-width:1920px){:root{--wrap:1640px}}
@media (min-width:2400px){:root{--wrap:1880px}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:15px;letter-spacing:.2px;
  padding:13px 26px;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--lg{padding:15px 32px;font-size:16px}
.btn--green{background:var(--green);color:#fff;box-shadow:4px 4px 0 0 var(--gold)}
.btn--green:hover{background:var(--green-dk);box-shadow:4px 4px 0 0 var(--gold);transform:translateY(-1px)}
.btn--yellow{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 0 var(--dark)}
.btn--yellow:hover{box-shadow:0 6px 0 0 var(--dark);transform:translateY(-1px)}
.btn--orange{background:var(--orange);color:#fff;box-shadow:4px 4px 0 0 var(--dark)}
.btn--orange:hover{box-shadow:0 6px 0 0 var(--dark);transform:translateY(-1px)}
.btn--yellow-outline{background:#fff;color:var(--ink);border:2px solid var(--yellow);box-shadow:0 4px 0 0 var(--yellow)}
.btn--yellow-outline:hover{background:var(--cream);box-shadow:6px 6px 0 0 var(--yellow);transform:translateY(-1px)}
.btn--partner{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 0 var(--green)}
.btn--partner:hover{box-shadow:4px 4px 0 0 var(--green);transform:translateY(-1px)}

/* ---------- Boxed headline device ---------- */
.boxed{
  display:inline-block;position:relative;
  border:3px solid var(--dark);
  padding:.05em .35em;background:#fff;
}
.boxed--gold{box-shadow:6px 7px 0 0 var(--yellow2)}
.boxed--green{box-shadow:6px 7px 0 0 var(--green)}

/* ---------- Section head ---------- */
.sec-head.center{text-align:center;max-width:860px;margin:0 auto 54px}
.sec-kicker{
  display:inline-block;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  font-size:13px;color:var(--gray2);margin-bottom:18px;
}
.sec-title{
  font-weight:900;line-height:1.08;color:var(--dark);text-transform:uppercase;
  font-size:clamp(21px,2.5vw,33px);display:flex;flex-direction:column;gap:.28em;align-items:center;
}
.sec-title .boxed{text-transform:uppercase;max-width:100%}
.sec-sub{margin-top:26px;color:var(--gray);font-size:17px;font-weight:500}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;background:transparent;
  transition:background .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.header__inner{display:flex;align-items:center;gap:18px;height:84px;justify-content:space-between}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:44px;width:auto;display:block}
.brand__vid{height:44px;width:auto;display:block;object-fit:contain}

.nav{margin:0 auto}
.nav-overlay{display:none}
.nav__cta{display:none}
.nav__list{display:flex;gap:22px;align-items:center}
.nav__list li{position:relative}
.nav__list a{font-weight:600;font-size:13px;letter-spacing:.3px;text-transform:uppercase;color:var(--dark);transition:color .15s;display:inline-flex;align-items:center;white-space:nowrap}
.nav__list a:hover{color:var(--green)}
.has-caret>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}

/* ---------- Nav dropdown (Industry Reports → sectors) ---------- */
.nav__drop-toggle{display:none}
.nav__drop{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,8px);
  min-width:190px;background:#fff;border:1px solid var(--dark);
  box-shadow:6px 6px 0 0 var(--yellow);padding:6px 0;z-index:120;
  opacity:0;visibility:hidden;transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
/* invisible bridge so the pointer can travel from the label to the panel */
.nav__drop::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav__drop a{display:block;padding:11px 20px;font-size:12.5px;color:var(--dark)}
.nav__drop a:hover{background:var(--mint);color:var(--green)}
/* hover/focus reveal only above the drawer breakpoint (must stay in step with the
   max-width:1240px off-canvas rules further down) */
@media (min-width:1241px){
  .has-drop:hover .nav__drop,
  .has-drop:focus-within .nav__drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .has-drop:hover>a::after,
  .has-drop:focus-within>a::after{transform:translateY(1px) rotate(-135deg)}
}

.header__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-transform: uppercase;}
/* search toggle */
.search{position:relative;display:flex;align-items:center}
.search__box{position:absolute;right:0;top:calc(100% + 12px);width:0;overflow:hidden;opacity:0;pointer-events:none;transition:width .25s ease,opacity .2s ease;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12);border:1.5px solid var(--line)}
.search.is-open .search__box{width:280px;opacity:1;pointer-events:auto}
.search__box input{width:100%;border:0;outline:0;padding:13px 16px;font-family:inherit;font-size:14px;background:transparent;color:var(--dark)}
.icon-btn{display:grid;place-items:center;color:#23B785;width:38px;height:38px;}
.icon-btn:hover{background:var(--mint);color:var(--green)}
/* search glass is BLACK in Figma (the cart beside it stays green) */
.search__toggle{color:#000}
.search__toggle:hover,
.search.is-open .search__toggle{background:var(--mint);color:#000}
.header__cta{padding:11px 22px}
.cart-btn{position:relative}
.cart-badge{
  position:absolute;top:2px;right:0;background:#F9C300;color:#000;border-radius: 10px;
  font-size:11px;font-weight:700;min-width:17px;height:17px;
  display:grid;place-items:center;padding:0 4px;
}
/* add-to-cart toast (site-wide) */
.cart-toast{position:fixed;right:22px;bottom:22px;z-index:2000;display:flex;align-items:center;gap:10px;
  background:var(--green);color:#fff;font-weight:800;font-size:14px;letter-spacing:.2px;
  padding:14px 20px;max-width:min(360px,86vw);box-shadow:6px 6px 0 0 var(--gold),0 14px 34px rgba(0,0,0,.18);
  transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease}
.cart-toast.is-show{transform:translateY(0);opacity:1}
.cart-toast svg{flex:0 0 auto}
[data-add-cart].is-busy{opacity:.6;pointer-events:none}
@media (max-width:600px){.cart-toast{right:14px;left:14px;bottom:14px;max-width:none}}

.hamburger{display:none;flex-direction:column;gap:5px;width:34px;height:30px;justify-content:center;padding:0 4px}
.hamburger span{height:3px;background:var(--green);transition:.25s}
.hamburger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
/* subtle grid + arc background texture (from Figma) */
.bg-grid{
  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);
}
/* Figma hero background: clean light field — soft mint wash (top-left) + subtle grid.
   (Replaces the old Main-Hero-Banner.png which had a green block + yellow growth curve.) */
.hero{position:relative;margin-top:-84px;padding:150px 0 100px;overflow:hidden;
  background:transparent}
.hero__decor{display:none}

/* side social rail — white icons on the green band (Figma: left edge, vertically centred) */
.social-rail{position:absolute;left:22px;top:75%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:16px;align-items:center;background:transparent}
.social-rail a{width:24px;height:24px;display:grid;place-items:center;color:#8f8f8f;transition:.18s}
.social-rail a svg{width:20px;height:20px}
.social-rail a:hover{color:var(--green);transform:translateY(-2px)}

/* two columns: video | copy — content vertically centred */
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;align-items:center;padding-left:70px}

/* video card — 16:9 frame so the 16:9 video fills it edge-to-edge (no black
   letterbox bars). Transparent fill so nothing black shows behind the video;
   only the offset box-shadow stays. */
.video-card{position:relative;overflow:hidden;box-shadow: 10px 10px 0px #000000;
  aspect-ratio:16/9;
  background:transparent}
.video-card__tag,
.video-card__badge{position:absolute;top:16px;z-index:3;font-size:12px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase}
.video-card__tag{left:18px;color:#fff;display:inline-flex;align-items:center;gap:8px}
.video-card__sq{width:8px;height:8px;background:var(--yellow2);display:inline-block;flex:0 0 auto}
.video-card__badge{right:16px;background:var(--yellow2);color:var(--dark);padding:5px 12px;}
/* overlay title (both lines white, Figma) — sized in cqw so it scales with the card */
.video-card__title{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.4cqw;text-align:center;
  text-transform:uppercase;font-weight:700;line-height:1.06}
.video-card__t1{font-size:6cqw;color:#fff;letter-spacing:.4px}
.video-card__t2{font-size:4cqw;color:#fff;letter-spacing:.6px}
/* bottom player bar */
.video-card__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;background: #FFF;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.14)}
.video-card__free{font-size:2cqw;font-weight:600;color:#919191;}
.video-card__watch{display:inline-flex;align-items:center;gap:.4em;font-size:2cqw;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:var(--green2);white-space:nowrap}
.video-card__watch svg{width:.9em;height:.9em;flex:0 0 auto}

/* live hero video — the YouTube iframe FILLS the card box exactly at every size
   and zoom. No transform-centering and no cover-overflow (those caused the video
   to shift/misalign on zoom because the iframe was larger than the box and cropped);
   here the iframe edges = the card edges, so alignment is rock-solid and fully
   responsive. YouTube letterboxes the 16:9 video inside, centred consistently.
   !important is used so the YouTube IFrame API's own inline width/height (it likes
   to set 640×390 / px sizes) can never override the fill. */
.video-card__player{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.video-card__player iframe{position:absolute!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;border:0;display:block}
/* sound on/off button (bottom-right) */
.video-card__sound{position:absolute;z-index:4;right:16px;bottom:16px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:800;
  font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:8px 14px 8px 12px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .18s ease,border-color .18s ease}
.video-card__sound:hover{background:var(--green2);border-color:var(--green2)}
.video-card__ico{flex:0 0 auto}
.video-card__sound.is-muted .video-card__ico--sound,
.video-card__sound:not(.is-muted) .video-card__ico--muted,
.video-card__sound:not(.is-muted) .video-card__sound-txt{display:none}

/* copy — centred right column. Figma sizes (32/70/27 in the 1920 frame) scaled ~0.69 to the site container */
.hero__copy{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__title{font-weight:900;text-transform:uppercase;color:var(--dark);line-height:1.02;
  display:flex;flex-direction:column;gap:10px;align-items:center}
.hero__line1{font-weight:700;font-size:clamp(16px,1.7vw,22px);letter-spacing:3px;color:var(--dark2)}
.hero__line2{font-size:clamp(30px,3.5vw,48px);letter-spacing:0}
.hero__sub{font-family:var(--ff);font-weight:500;font-size:clamp(14px,1.4vw,18px);
  line-height:1.45;color:var(--gray);max-width:440px;margin-top:20px}
.hero__actions{margin-top:26px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.hero__actions .btn{padding:13px 24px;font-size:14px}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:#FFE6DA;color:var(--ink);overflow:hidden;padding:12px 0}
/* The track holds the headline list TWICE and slides exactly -50% for a seamless
   loop. Spacing MUST come from margins, not `gap`: a flex gap is not repeated after
   the last child, so -50% lands half a gap short and the strip jumps every cycle. */
.ticker__track{display:flex;align-items:center;white-space:nowrap;width:max-content;
  animation:ticker 34s linear infinite;will-change:transform}
.ticker__track span,.ticker__track i{margin-right:22px}
.ticker__track span{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--ink)}
.ticker__track i{color:var(--green);font-style:normal;font-size:12px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* rainbow bar below the ticker */
.ticker-rainbow{height:8px;background:linear-gradient(90deg,var(--green) 0 25%,var(--yellow) 25% 50%,var(--orange) 50% 75%,var(--pink) 75% 100%)}

/* ============================================================
   PRODUCTS
   ============================================================ */
.products{padding:50px 0 50px;position:relative;
  background:transparent}
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:stretch}
.pcard{
  position:relative;overflow:hidden;color:#fff;
  min-height:420px;padding:26px;display:flex;flex-direction:column;
  box-shadow:8px 9px 0 0 #3A3A3A;
}
.pcard::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.9;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 34px);
}
/* even alignment (client request): all cards equal height + tops/bottoms aligned */
.pcard--low{min-height:470px}
.pcard--high{min-height:470px;margin-bottom:0}
/* flat solid brand fills (Figma) */
.pcard--green{background:var(--green)}
.pcard--yellow{background:var(--yellow)}
.pcard--yellow .pcard__tag,.pcard--yellow .pcard__title{color:var(--ink)}
.pcard--orange{background:var(--orange)}
.pcard--pink{background:var(--pink)}
/* tag = translucent outlined pill (Figma) */
.pcard__tag{position:relative;z-index:1;align-self:flex-start;background:transparent;border:2px solid rgba(255,255,255,.4);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:6px 14px;}
.pcard--yellow .pcard__tag{border-color:rgba(0,0,0,.28);}
/* number watermark = black 10% (Figma); hidden on hover while the reveal shows */
.pcard__num{position:absolute;left:16px;top:26%;z-index:0;font-size:155px;font-weight:900;line-height:.8;color:rgba(0,0,0,.10);transition:opacity .55s ease}
.pcard:hover .pcard__num,.pcard:focus-within .pcard__num{opacity:0}
/* title + reveal group pinned to the card bottom; on hover the group grows so the
   heading rises and the paragraph + button are revealed in the middle */
.pcard__body{position:relative;z-index:1;margin-top:auto}
.pcard__title{position:relative;z-index:1;font-size:26px;font-weight:900;text-transform:uppercase;line-height:1.05}
/* heading underlines removed (client request) */
.pcard__title::after{content:none;display:none}
/* hover reveal — paragraph + Explore button */
.pcard__reveal{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .7s ease,opacity .55s ease,margin .7s ease}
.pcard:hover .pcard__reveal,.pcard:focus-within .pcard__reveal{max-height:240px;opacity:1;margin-top:16px}
.pcard__desc{margin:0;font-family:var(--ff);font-weight:500;font-size:14px;line-height:1.55;color:#fff}
.pcard--yellow .pcard__desc{color:var(--ink)}
/* single consistent button: black fill, white text, white offset shadow.
   margin-bottom leaves room so the reveal's overflow:hidden doesn't clip the shadow */
.pcard__btn{display:inline-block;margin:16px 0 10px;font-family:var(--ff);font-weight:800;
  font-size:14px;letter-spacing:.02em;color:#fff;background:#000;padding:13px 26px;
  box-shadow:4px 4px 0 0 #fff;transition:transform .15s ease,box-shadow .15s ease}
.pcard__btn:hover{transform:translateY(-1px);box-shadow:6px 6px 0 0 #fff}

/* ============================================================
   WEBINARS
   ============================================================ */
.webinars{padding:50px 0 50px;position:relative;
  background:transparent}
/* tabs — sharp boxes, 3px dark border + green hard offset shadow;
   active = green fill, white border, gold offset shadow (Figma) */
.wtabs{display:flex;justify-content:center;gap:18px;margin:6px 0 22px;flex-wrap:wrap}
/* all three tabs share one width (min-width ≥ the widest label) so the row reads as
   a set rather than three different-sized boxes */
.wtab{
  border:2px solid var(--dark);background:#fff;color:var(--dark);
  font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.4px;
  min-width:250px;max-width:100%;padding:11px 18px;text-align:center;
  box-shadow:6px 6px 0 0 var(--green);
  transition:transform .12s ease, box-shadow .12s ease;
}
.wtab:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 0 var(--green)}
.wtab.is-active{background:var(--green);color:#fff;border-color:#fff;box-shadow:6px 6px 0 0 var(--yellow)}
.wtab.is-active:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 0 var(--yellow)}
.webinars__note{text-align:center;color:var(--dark);font-weight:600;margin-bottom:34px}
.webinars__note a{color:var(--green);font-weight:800}

.wcarousel{display:flex;align-items:center;justify-content:center;gap:10px}
.wstage{display:flex;align-items:center;justify-content:center;gap:40px;flex:1;max-width:1200px;overflow:hidden;
  touch-action:pan-y;cursor:grab}
.wstage img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.wslide--side{flex:0 0 22%;opacity:.55;filter:saturate(.9)}
.wslide--side:first-child{transform:translateX(24%)}
.wslide--side:last-child{transform:translateX(-24%)}
.wslide--center{flex:0 0 58%;position:relative;z-index:2}
.laptop{position:relative}
.laptop__frame{width:100%;position:relative;z-index:2;pointer-events:none}
/* laptop.webp screen is now a 16:9 hole (matched to the 16:9 cover images), so the
   image fills it exactly — fully visible, no crop, no white gap. Box = the hole. */
.laptop__screen{position:absolute;left:13.65%;top:9.6%;width:72.62%;height:73.78%;object-fit:cover;object-position:center;z-index:1;}
/* slider arrows — white square, 1px dark border, hard grey offset shadow (Figma).
   Figma: 56px arrow on an ~814px laptop, inset ~9% from the laptop edges, vertically centred. */
.round-nav{
  position:absolute;top:46%;z-index:6;width:40px;height:40px;background:#fff;color:#555555;
  border:1px solid var(--dark);box-shadow:4px 4px 0 0 #D9D9D9;
  display:grid;place-items:center;transition:box-shadow .12s ease;
}
.round-nav svg{width:18px;height:18px;display:block}
.round-nav--prev{left:9%;transform:translate(-50%,-50%)}
.round-nav--next{right:9%;transform:translate(50%,-50%)}
.round-nav:hover{box-shadow:2px 2px 0 0 #D9D9D9}

.wmeta{text-align:center;margin-top:14px}
/* price is GREEN in Figma; the gold wedge underneath it stays gold */
.wmeta__price{display:inline-block;font-size:26px;font-weight:900;color:var(--green);position:relative;padding-bottom:12px}
.wmeta__price::after{content:none;display:none}
.wmeta__title{margin-top:16px;font-size:24px;font-weight:900;text-transform:uppercase;color:var(--dark)}
/* Figma trims this to two lines ("…"); clamping also keeps the block a fixed
   height so the layout doesn't jump as the slider autoplays between products */
.wmeta__desc{margin:12px auto 0;max-width:560px;color:var(--gray);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wmeta__actions{margin-top:22px;display:flex;gap:14px;justify-content:center}
.wdots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.webinars .wdots{margin-top:18px;margin-bottom:6px}
.webinars__empty{text-align:center;color:var(--gray);font-weight:600;padding:48px 0}
.wdots i{width:12px;height:10px;background:#D9D9D9;cursor:pointer;transition:.2s}
.wdots i.is-active{width:46px;background:var(--orange)}

/* ============================================================
   ABOUT
   ============================================================ */
/* ============================================================
   REAL NUMBERS, REAL ENGAGEMENT
   ============================================================ */
.realnum{padding:56px 0 50px;
  background:transparent}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:stretch;max-width:none;margin:0 auto}
.statc{padding:34px 22px 30px;text-align:center;position:relative;
  background:no-repeat center/100% 100%;box-shadow:0 16px 38px rgba(0,0,0,.08)}
/* stagger (Figma): pink & orange raised up, green & gold dropped ~15% */
/* even alignment (client request): no vertical stagger, all 4 aligned at the top */
.statc--low{min-height:385px}
.statc--high{min-height:385px}
.statc--pink{background-image:url('../images/Engagement-BG.webp')}
.statc--green{background-image:url('../images/Average-View-BG.webp')}
.statc--orange{background-image:url('../images/total-Views-BG.webp')}
.statc--gold{background-image:url('../images/Subscriber-BG.webp')}
.statc__icon{display:block;width:62px;height:62px;margin:0 auto 10px;object-fit:contain}
.statc__label{font-size:21px;font-weight:900;text-transform:uppercase;color:var(--dark);line-height:1.1}
/* arrow-shaped underline under each stat label (Figma) */
.statc__line{display:block;width:92px;height:auto;margin:8px auto 8px}
.statc__sub{margin-top:2px;color:var(--gray);font-weight:600;font-size:14px}
/* metric box = white fill, 2px strong-colour border + same-colour hard offset shadow (Figma) */
.statc__metric{margin-top:16px;display:inline-flex;flex-direction:column;align-items:center;gap:3px;border:2px solid;padding:11px 26px;background:#fff}
.statc__metric b{font-size:30px;font-weight:900;line-height:1}
/* unit suffixes (MIN/SEC/M+) render black per Figma; % keeps the accent colour (pink box) */
.statc__metric b small{font-size:.5em;font-weight:800;margin:0 1px;color:var(--ink)}
.statc__metric--pink b small{color:inherit}
.statc__mplus{color:var(--ink)}
/* delta line: small grey "vs" prefix + bold black value (Figma) */
.statc__metric span{font-size:12px;font-weight:700;color:var(--gray);display:inline-flex;align-items:baseline;gap:4px}
.statc__metric span strong{font-size:17px;font-weight:900;color:var(--ink)}
.statc__metric--pink{border-color:var(--pink2);box-shadow:5px 6px 0 0 var(--pink2);color:var(--pink2)}
.statc__metric--green{border-color:var(--green2);box-shadow:5px 6px 0 0 var(--green2);color:var(--green2)}
.statc__metric--orange{border-color:var(--orange);box-shadow:5px 6px 0 0 var(--orange);color:var(--orange)}
.statc__subs{margin-top:14px;display:flex;justify-content:center;gap:8px}
.statc__subs span{display:flex;flex-direction:column;align-items:center;gap:1px;border:2px solid var(--yellow2);box-shadow:3px 4px 0 0 var(--yellow2);background:#fff;padding:7px 9px;font-size:11px;color:#303030;font-weight:600;line-height:1.2}
/* subscriber counts render in gold, platform labels dark (Figma) */
.statc__subs b{font-size:18px;font-weight:900;color:#9D7C13}

/* ============================================================
   ABOUT
   ============================================================ */
.about{padding:50px 0 50px;
  background:transparent}
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about__stats{display:flex;flex-direction:column;gap:18px}
.stat{display:flex;align-items:center;gap:18px;background:#fff;border:1.5px solid var(--line);padding:20px 22px;position:relative}
.stat__big{font-size:34px;font-weight:900;color:var(--dark);white-space:nowrap;min-width:96px}
.stat__big small{font-size:.5em;font-weight:800}
.stat__body h4{font-size:18px;font-weight:800;text-transform:uppercase;color:var(--dark)}
.stat__body p{font-size:13px;color:var(--gray);font-weight:600;margin-top:2px}
.stat__body .up{color:var(--green)}
.stat__icon{width:40px;height:40px;margin-left:auto;color:var(--green)}
.stat:nth-child(2) .stat__icon{color:var(--orange)}
.stat:nth-child(3) .stat__icon{color:var(--pink)}
.subs{background:var(--ink);padding:22px 24px;color:#fff}
.subs__label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--yellow)}
.subs__row{display:flex;gap:14px;margin-top:14px}
.subs__item{flex:1;background:rgba(255,255,255,.06);padding:12px;text-align:center}
.subs__item b{display:block;font-size:26px;font-weight:900}
.subs__item b small{font-size:.55em}
.subs__item span{font-size:12px;color:#c6cbd1;font-weight:600}

.about__right{display:flex;flex-direction:column;gap:22px}
.about__right .btn{align-self:flex-start}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vm-card{position:relative;overflow:hidden;padding:28px 24px;color:#fff;min-height:300px;display:flex;flex-direction:column;background:no-repeat center/100% 100%}
.vm-card h4{position:relative;z-index:1;font-size:20px;font-weight:900;text-transform:uppercase;margin-bottom:8px}
.vm-card h4::after{content:none;display:none}
.vm-card p{position:relative;z-index:1;font-size:14px;font-weight:500;opacity:.95}
.vm-card--vision{background-image:url('../images/Our-Vision-BG.webp')}
.vm-card--vision h4::after{background-image:url('../images/Our-Vision-Underline.webp')}
.vm-card--mission{background-image:url('../images/Our-Mission-BG.webp')}
.vm-card--mission h4::after{background-image:url('../images/Our-Mission-Underline.webp')}
.about__photo{margin:0;position:relative}
.about__photo::before{content:"";position:absolute;inset:0;transform:translate(16px,16px);z-index:0}
/* show the full 16:9 photo — natural ratio, never cropped, scales with the column */
.about__photo img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:700/500;object-fit:contain}
/* Our Purpose photo bleeds flush to the LEFT browser edge (Figma) */
.about__photo{--flush:calc((100vw - min(var(--wrap),100vw))/2 + 32px);margin-left:calc(-1 * var(--flush));width:calc(100% + var(--flush))}
/* standalone white glyph inside the Vision / Mission cards (Figma: no ring) */
.vm-card__icon{position:relative;z-index:1;display:block;width:58px;height:58px;margin-bottom:18px}
.about__text{color:var(--gray);font-weight:500;font-size:15px}

/* ============================================================
   PARTNER
   ============================================================ */
.partner{padding:50px 0 100px;
  background:transparent}
.partner__cta{margin-top:26px}
/* short vertical divider between the "Become A Sponsor" button and "What You Get:" (Figma) */
.reach-divider{display:block;width:1.5px;height:46px;background:#8f8f8f;margin:-24px auto 22px}
.get-lead{text-align:center;font-family:var(--ff);font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:16px;color:var(--dark);margin:0 0 -30px}
/* even alignment (client request): centred grid, all three cards level */
.get-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0 auto 56px;max-width:1040px;align-items:stretch}
.get-card--yellow{margin-top:0}
.get-card{padding:28px;min-height:220px;position:relative;background:no-repeat center/100% 100%}
.get-card--green{background-image:url('../images/Audience-BG.webp')}
.get-card--yellow{background-image:url('../images/Trust-BG.webp')}
.get-card--orange{background-image:url('../images/Brand-Leadership-BG.webp')}
/* Figma: outlined pills (white fill, coloured border), not solid blocks */
.get-card__tag{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:6px 14px;margin-bottom:20px;border-radius:6px;border:1.5px solid transparent;background:#fff}
.get-card--green .get-card__tag{border-color:#1f9d76;color:var(--green-dk)}
.get-card--yellow .get-card__tag{border-color:#e6b800;color:#a07a00}
.get-card--orange .get-card__tag{border-color:#e2591f;color:#c2461a}
.get-card h3{font-size:22px;font-weight:900;text-transform:uppercase;line-height:1.15;color:var(--dark)}
.get-card h3::after{content:none;display:none}
.get-card--green h3::after{background-image:url('../images/Audience-Underline.webp')}
.get-card--yellow h3::after{background-image:url('../images/Trust-Underline.webp')}
.get-card--orange h3::after{background-image:url('../images/Brand-Leadership-Underline.webp')}

.trusted{display:flex;flex-direction:column;align-items:center;gap:26px;margin-bottom:8px}
/* short vertical divider that leads into the "Trusted By" heading (Figma) */
.trusted__divider{width:1.5px;height:46px;background:#8f8f8f;flex:0 0 auto}
.trusted__label{font-weight:900;letter-spacing:2px;text-transform:uppercase;font-size:15px;color:var(--dark)}
.trusted__logos{display:flex;align-items:stretch;gap:20px;flex-wrap:wrap;justify-content:center}
/* TABLET: same auto-sliding strip as the phone layout further down (which takes over
   at ≤600px). Ranges deliberately don't overlap, so neither block fights the other. */
@media (min-width:601px) and (max-width:1024px){
  .trusted__logos{
    width:100%;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:16px;padding:6px 20px 12px;margin:0 -20px;box-sizing:border-box;scrollbar-width:none;
  }
  .trusted__logos::-webkit-scrollbar{display:none}
  .trusted__card{flex:0 0 30%;min-width:0;scroll-snap-align:center}
}
.trusted__card{background:#fff;border:1.5px solid var(--line);padding:16px 24px;display:grid;place-items:center;min-width:150px;height:100px;box-shadow:6px 6px 0px rgba(0,0,0,.05);transition:.18s}
.trusted__card:hover{box-shadow:0 12px 26px rgba(0,0,0,.1);transform:translateY(-3px)}
.trusted__card img{height:40px;width:auto;max-width:128px;object-fit:contain}

/* rainbow separator above footer */
.footer-rainbow{height:10px;background:linear-gradient(90deg,var(--green) 0 25%,var(--yellow) 25% 50%,var(--orange) 50% 75%,var(--pink) 75% 100%)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:transparent;padding:70px 0 26px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:34px}
.brand--footer{margin-bottom:16px}
.brand--footer img{height:50px}
.footer__brand p{color:var(--gray);font-size:14px;font-weight:500;max-width:330px;margin-bottom:20px}
.footer__follow{display:block;font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:13px;color:var(--dark);margin-bottom:12px}
/* ===== YouTube popup player (shared, yt-modal.js) ===== */
.yt-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.yt-modal.is-open{display:flex}
.yt-modal__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.82)}
.yt-modal__dialog{position:relative;z-index:1;width:100%;max-width:920px}
.yt-modal__frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.yt-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-modal__title{margin:0 44px 10px 2px;color:#fff;font-family:var(--ff,inherit);font-weight:700;font-size:15px;line-height:1.35}
.yt-modal__close{position:absolute;top:-46px;right:0;width:38px;height:38px;
  display:grid;place-items:center;background:#fff;color:#111;border:0;border-radius:50%;
  font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.yt-modal__close:hover{background:var(--green,#26B685);color:#fff}
@media (max-width:600px){.yt-modal__title{display:none}.yt-modal__close{top:-44px}}

.socials{display:flex;gap:10px}
.soc{width:38px;height:38px;display:grid;place-items:center;color:#fff}
/* social icons: hard offset shadow tinted with each platform's BRAND colour */
.soc--wa{background:#fff;color:#3A3A3A;border:1.5px solid #3A3A3A;box-shadow: 4px 4px 0px #25D366;}   /* WhatsApp green */
.soc--yt{background:#fff;color:#3A3A3A;border:1.5px solid #3A3A3A;box-shadow: 4px 4px 0px #FF0000;}   /* YouTube red */
.soc--ig{background:#fff;color:#3A3A3A;border:1.5px solid #3A3A3A;box-shadow: 4px 4px 0px #E4405F;}   /* Instagram magenta */
.soc--li{background:#fff;color:#3A3A3A;border:1.5px solid #3A3A3A;box-shadow: 4px 4px 0px #0A66C2;}   /* LinkedIn blue */
.soc--x{background:#fff;color:#3A3A3A;border:1.5px solid #3A3A3A;box-shadow: 4px 4px 0px #000000;}    /* X black */
.soc--fb{background:#fff;color:#3A3A3A;border:1.5px solid #3A3A3A;box-shadow: 4px 4px 0px #1877F2;}   /* Facebook blue */
.soc--tt{background:#fff;color:#3A3A3A;border:1.5px solid #3A3A3A;box-shadow: 4px 4px 0px #25F4EE;}   /* TikTok cyan */
.soc--ig:hover,.soc--wa:hover,.soc--yt:hover,.soc--li:hover,.soc--x:hover,.soc--fb:hover,.soc--tt:hover{transform:translateY(-2px)}
.footer__col h5{font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:1px;color:var(--green);margin-bottom:16px}
.footer__col a,.footer__addr{display:flex;align-items:flex-start;gap:8px;color:var(--dark);font-size:14px;font-weight:500;margin-bottom:12px}
.footer__col a:hover{color:var(--green)}
.footer__contact svg{flex:0 0 auto;margin-top:2px;color:var(--orange)}
.footer__bottom{border-top:1px solid var(--line);margin-top:36.5px;padding-top:22px;text-align:center}
.footer__bottom p{color:var(--gray);font-size:14px}
.footer__bottom b{color:var(--dark)}

/* ============================================================
   INDUSTRY REPORTS (inner page)
   All page-specific styles live in industry-reports.css.
   Only the shared .btn--pink variant is kept here alongside
   the other global button variants.
   ============================================================ */
.btn--pink{background:var(--pink);color:#fff;box-shadow:4px 4px 0 0 var(--dark)}
.btn--pink:hover{box-shadow:0 6px 0 0 var(--dark);transform:translateY(-1px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__inner{gap:36px}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:40px}
  .footer__contact{grid-column:2/-1}
}
@media (max-width:1240px){
  .header__cta{display:none}
  .site-header{z-index:130}
  .hamburger{display:flex;position:relative;z-index:135}
  /* off-canvas slide-in drawer */
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(84vw,330px);z-index:120;margin:0;
    background:#fff;padding:86px 0 40px;
    box-shadow:-18px 0 46px rgba(0,0,0,.18);
    transform:translateX(105%);transition:transform .38s cubic-bezier(.33,.9,.25,1);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .nav__list>li{width:100%;border-bottom:1px solid var(--line)}
  .nav__list>li:first-child{border-top:1px solid var(--line)}
  .nav__list a{display:block;padding:17px 30px;font-size:15px}
  .nav__list a:hover,.nav__list a[aria-current="page"]{color:var(--green);background:var(--mint)}

  /* dropdown → tap-to-expand accordion inside the drawer */
  .has-drop>a{padding-right:66px}
  .nav__drop-toggle{
    display:block;position:absolute;top:0;right:0;width:60px;height:56px;
    background:none;border:0;padding:0;
  }
  .nav__drop-toggle::before{
    content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
    border-right:2px solid var(--green);border-bottom:2px solid var(--green);
    transform:translate(-50%,-70%) rotate(45deg);transition:transform .22s ease;
  }
  .has-drop.is-open .nav__drop-toggle::before{transform:translate(-50%,-30%) rotate(-135deg)}
  .has-caret>a::after{display:none}   /* the toggle button carries the caret here */
  .nav__drop{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;border:0;box-shadow:none;background:#FAFAFA;
    max-height:0;overflow:hidden;padding:0;transition:max-height .3s ease;
  }
  .nav__drop::before{display:none}
  .has-drop.is-open .nav__drop{max-height:320px}
  .nav__drop a{padding:14px 30px 14px 46px;font-size:14px}
  .nav__drop li+li{border-top:1px solid var(--line)}
  .nav-overlay{display:block;position:fixed;inset:0;z-index:115;background:rgba(20,22,28,.5);
    opacity:0;visibility:hidden;transition:opacity .38s ease,visibility .38s ease}
  body.nav-open .nav-overlay{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  .nav__cta{display:inline-flex;justify-content:center;margin:22px 30px 4px;width:calc(100% - 60px)}
  .hero__inner{grid-template-columns:1fr;gap:34px;padding-left:0}
  .hero__copy{max-width:none;order:-1}
  .social-rail{display:none}
  .hero__decor::before{width:220px;height:220px;opacity:.35}
  .pcards{grid-template-columns:repeat(2,1fr)}
  .pcard--high,.pcard--low{min-height:360px}
  .about__grid{grid-template-columns:1fr;gap:34px}
  .about__photo{margin-left:0;width:auto}
  .stat-cards{grid-template-columns:repeat(2,1fr);max-width:620px;align-items:stretch}
  .statc--low,.statc--high{min-height:300px}
  .get-cards{grid-template-columns:1fr;max-width:460px}
  .get-card--yellow{margin-top:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:600px){
  .container{padding:0 20px}
  .header__inner{height:70px;gap:12px}
  .header__actions{gap:8px}
  .hero{margin-top:-70px;padding:88px 0 30px}
  .hero__actions .btn{flex:1}
  .products,.about,.partner{padding:35px 0}
  /* headings read too large on small screens; keep long boxed titles inside the viewport */
  #products .sec-title,.sec-title{font-size:18px}
  .sec-title .boxed{word-break:break-word}
  .webinars{padding:35px 0}
  /* cards → touch/swipe slider on mobile */
  .pcards{
    display:flex;grid-template-columns:none;align-items:stretch;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:18px;padding:6px 20px 20px;margin:0 -20px;scrollbar-width:none;
  }
  .pcards::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 80%;scroll-snap-align:center}
  .pcard--high,.pcard--low{min-height:400px}
  .wtabs{flex-direction:column;align-items:stretch}
  .wslide--side{display:none}
  .wslide--center{flex:0 0 100%}
  /* smaller arrows on mobile (inset 9% already keeps them inside the viewport) */
  .round-nav{width:32px;height:32px}
  .round-nav svg{width:15px;height:15px}
  .wmeta__actions{flex-direction:row;flex-wrap:nowrap}
  .wmeta__actions .btn{flex:1 1 0;min-width:0;padding:12px 12px;font-size:14px}
  .about__right{grid-template-columns:1fr}
  .vm{grid-template-columns:1fr}
  /* stat cards → touch/swipe slider on mobile (same pattern as .pcards) */
  .stat-cards{
    display:flex;grid-template-columns:none;align-items:stretch;max-width:none;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:18px;padding:6px 20px 20px;margin:0 -20px;scrollbar-width:none;
  }
  .stat-cards::-webkit-scrollbar{display:none}
  .statc{flex:0 0 80%;scroll-snap-align:center}
  .statc--low,.statc--high{min-height:0;margin-top:0}
  .subs__row{flex-wrap:wrap}
  /* trusted-by logos → touch/swipe slider on mobile (same pattern as .pcards) */
  .trusted__logos{
    width:100%;flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:16px;padding:6px 20px 12px;margin:0 -20px;box-sizing:border-box;scrollbar-width:none;
  }
  .trusted__logos::-webkit-scrollbar{display:none}
  .trusted__card{flex:0 0 65%;min-width:0;scroll-snap-align:center}
  .sponsor__card{padding:28px 22px}
  .sponsor__num{font-size:90px;right:14px}
  .cta__inner{padding:80px 0 90px}
  /* single column on phones — a 2-col footer overflowed the viewport (~23px),
     which let the whole page pan sideways on touch */
  .footer__grid{grid-template-columns:1fr}
  .footer__brand{grid-column:auto}
  .footer__contact{grid-column:auto}
  .footer__col a,.footer__addr{word-break:break-word}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto}
  /* The headline tickers are the exception. Windows' "Animation effects: off"
     (Settings → Accessibility → Visual effects) makes Chrome/Edge report `reduce`,
     and the blanket rule above then freezes them — which is exactly why a ticker runs
     on one laptop and not another.
     EVERY ticker must be listed here, not just the homepage one: the inner pages use
     their own prefixed tracks (ir- = about/contact/explainer/faqs/industry-reports/
     partner/podcasts/policies/unlocking-growth · sd- = industry-decks/deck-detail/
     power/mobility/agriculture/payments · rw- = recorded-webinars). Adding a new
     ticker? Add its track here too, or it will be dead on those machines. */
  .ticker__track,
  .ir-ticker__track,
  .sd-ticker__track,
  .rw-ticker__track{animation-duration:34s!important;animation-iteration-count:infinite!important}
  /* Explainer trusted-logos marquee — same exemption, its own 45s duration. */
  .ex-lead__track{animation-duration:45s!important;animation-iteration-count:infinite!important}
  /* Partner-logos marquee (About / Industry Reports / FAQs / Policies). */
  .ir-sponsor__track{animation-duration:38s!important;animation-iteration-count:infinite!important}
}

/* Sponsor/brand logos wrapped in their official-site links. display:contents keeps
   the logo's original box (no layout shift); the img stays clickable & focusable. */
.logo-link{display:contents;cursor:pointer}

/* ============================================================
   SEARCH RESULTS + 404 PAGE
   ============================================================ */
.search-sec{position:relative;padding:56px 0 92px;background:#fff}
.search-form{display:flex;gap:12px;max-width:640px;margin:0 auto 40px}
.search-form input{flex:1;min-width:0;padding:14px 18px;border:2px solid var(--line);font-family:var(--ff);font-size:16px;color:var(--dark);background:#fff}
.search-form input:focus{outline:none;border-color:var(--green)}
.search-form .btn{flex:0 0 auto}
.search-meta{text-align:center;color:var(--gray);font-weight:600;margin-bottom:28px}
.search-results{list-style:none;max-width:760px;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:16px}
.search-results a{display:block;padding:22px 24px;border:1px solid var(--line);background:#fff;box-shadow: 6px 8px 0 0 #defff4; transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.search-results a:hover{border-color:var(--green);box-shadow:6px 8px 0 0 var(--green);transform:translateY(-2px)}
.search-results h3{font-family:var(--ff);font-weight:800;color:var(--dark);font-size:19px;line-height:1.25}
.search-results p{margin:6px 0 0;color:var(--gray);font-size:14px;line-height:1.5}
.search-results .u{display:block;margin-top:8px;color:var(--green);font-size:12px;font-weight:700;word-break:break-all}
.err-404__sub{margin:26px 0 0;font-family:var(--ff);font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,34px);color:var(--dark)}
.err-404__text{margin:14px auto 30px;max-width:520px;color:var(--gray);font-size:16px;line-height:1.6}
.err-404__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:600px){.search-form{flex-direction:column}.search-form .btn{width:100%}}

/* ===== Large-screen widening (placed last so it wins source-order) =====
   Let the capped homepage grids fill the wider container above 1500px. */
@media (min-width:1500px){
  .stat-cards{max-width:none}
  .get-cards{max-width:none}
}

/* ============================================================
   CONTINUOUS PAGE GRID  (fixes boxes breaking / overlapping at section seams)
   The 46px grid now lives ONCE on <body>, so it flows unbroken down the whole
   page. Every hero/section that used to paint its OWN grid (which restarted at
   each section's top edge and caused doubled boxes at the joins) is made
   transparent here so the single body grid shows through uniformly.
   !important is required because these page-specific stylesheets load AFTER
   style.css. Coloured design panels (green map/story/side panels, band colour
   bleeds) are intentionally NOT listed, so they stay intact.
   ============================================================ */
.hero,.products,.webinars,.realnum,.about,.partner,.footer,
.sd-hero,.rw-hero,.ab-hero,.ct-hero,.ir-hero,.ug-hero,.lg-hero,.ex-hero,.pc-hero,
.sd-sec,.sd-sponsor,.sd-videos,.rw-sec,.rw-sponsor,.ir-band,.ir-sponsor,
.ex-understand,.ex-grid-sec,.ex-data,.ex-lead,
.pc-series,.pc-sponsor,.ct-now,.ab-mission,.ab-team,
.lg-body,.pol-body,.ug-decks,.ug-webinars,.ug-sponsor,.ug-body,
.ct-wrap,.ck-wrap,.pd-wrap{
  background-color:transparent!important;
  background-image:none!important;
}
.sd-sec::before,.sd-sponsor::before,.sd-videos::before,.rw-sec::before,.rw-sponsor::before,
.ir-band::before,.ir-sponsor::before,
.ex-understand::before,.ex-grid-sec::before,.ex-data::before,.ex-lead::before,
.ex-hero::before,.pc-hero::before,
.pc-series::before,.pc-sponsor::before,.ct-now::before,
.ab-mission::before,.ab-team::before,.lg-body::before,.pol-body::before,
.ug-decks::before,.ug-webinars::before,.ug-sponsor::before,.ug-body::before,
.ct-wrap::before,.ck-wrap::before,.pd-wrap::before{
  display:none!important;
}