/* Startup Pakistan — the brand reach block (front page): the theme's tokens + ONE yellow, --wd-color-storm (the posters'
   highlight). Phone first; only transform/opacity move (and a tinted card's colour, once, when its picture lands); paused
   off screen; reduced motion = still. Look › "Brand block cards" = html[data-p-reach-cards]: none = the icon tiles (the
   theme's own) · photo · tinted · wash. */
.wd-reach{--y:var(--wd-color-storm,#FFBC23);--i:var(--wd-color-ink);--d:var(--wd-font-display);--r:var(--wd-radius-card-phone);padding:var(--wd-space-section) 0 0}
.wd-reach__in{display:grid;gap:26px}
.wd-reach__kick{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font:var(--wd-weight-extra) 13px/1 var(--d);
letter-spacing:.09em;text-transform:uppercase;color:var(--wd-color-ink-3)}
.wd-reach__kick svg,.wd-reach__ic{background:var(--y);color:var(--i)}
.wd-reach__kick svg{width:28px;height:28px;padding:5px;border-radius:50%}
.wd-reach__h{margin:0;font:var(--wd-weight-black) clamp(40px,6vw,76px)/1.02 var(--d);letter-spacing:-.045em;color:var(--i)}
.wd-reach__h span{display:block}
.wd-reach__h em{font-style:normal;font-weight:300;letter-spacing:-.035em}
/* the posters' yellow box behind each word, swept in once */
.wd-reach__hl{position:relative;z-index:0;display:inline-block}
.wd-reach__hl::before{content:"";position:absolute;z-index:-1;inset:.13em -.1em .04em -.06em;background:var(--y);transform-origin:0 50%}
.wd-reach__hl:not(:last-child)::before{right:-.33em}
html.js .wd-reach:not(.is-in) .wd-reach__hl::before{transform:scaleX(0)}
.wd-reach.is-in .wd-reach__hl::before{transition:transform .64s var(--wd-motion-ease) .3s}
.wd-reach.is-in .wd-reach__hl+.wd-reach__hl::before{transition-delay:.56s}
/* the lines take turns in ONE cell: the tallest sets its height, nothing below moves */
.wd-reach__says,.wd-reach__stats{display:grid;margin:0;padding:0;list-style:none}
.wd-reach__says li{grid-area:1/1;font:var(--wd-weight-extra) clamp(21px,2.2vw,27px)/1.32 var(--d);letter-spacing:-.018em;
color:var(--i);opacity:0;transform:translateY(14px)}
.wd-reach__says li:first-child{opacity:1;transform:none}
.wd-reach__says b{font-weight:var(--wd-weight-black);background:linear-gradient(var(--y),var(--y)) 0 86%/100% .38em no-repeat;padding:0 .05em}
.wd-reach__bars{display:flex;gap:6px;margin-top:18px}
.wd-reach__bars i{position:relative;width:36px;height:4px;border-radius:9px;background:var(--wd-color-band);overflow:hidden}
.wd-reach__bars i::after{content:"";position:absolute;inset:0;background:var(--i);transform:scaleX(0);transform-origin:0 50%}
.wd-reach__bars i:first-child::after{transform:none}
.wd-reach__says :nth-child(2),.wd-reach__bars :nth-child(2){--s:1}
.wd-reach__says :nth-child(3),.wd-reach__bars :nth-child(3){--s:2}
.wd-reach.is-in .wd-reach__says li{animation:wd-reach-say 10.5s var(--wd-motion-ease) calc(var(--s,0)*3.5s - .5s) infinite}
.wd-reach.is-in .wd-reach__bars i::after{animation:wd-reach-bar 10.5s linear calc(var(--s,0)*3.5s - .5s) infinite}

/* THE NUMBERS — two cards, then the 99% coming up as a slider across the block; each one's words take turns */
.wd-reach__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wd-reach__stat,.wd-reach__pct{position:relative;z-index:0;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
padding:14px 14px 16px;border-radius:var(--r);background:var(--wd-color-card);color:var(--i);overflow:hidden}
.wd-reach__top{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:8px;margin-bottom:14px}
.wd-reach__ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:14px}
.wd-reach__ic svg{width:23px;height:23px}
.wd-reach__when{font:var(--wd-weight-extra) 10.5px/1.3 var(--d);letter-spacing:.09em;text-transform:uppercase;color:var(--wd-color-ink-3)}
.wd-reach__n{margin-top:5px;font:var(--wd-weight-black) 33px/1 var(--d);letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.wd-reach__n small{font-size:.5em;font-weight:300;letter-spacing:-.01em}
.wd-reach__fig{position:relative;display:inline-block}
.wd-reach__fig b{font-weight:inherit}
.wd-reach__fig i{position:absolute;left:0;top:0;font-style:normal;visibility:hidden}
.wd-reach__fig.is-count b{color:transparent}
.wd-reach__fig.is-count i{visibility:visible}
.wd-reach__l{display:grid;align-self:stretch;margin-top:8px;font-size:14.5px;line-height:1.35;color:var(--wd-color-ink-3)}
.wd-reach__l>span{grid-area:1/1;opacity:0;transform:translateY(8px)}
.wd-reach__l>span:first-child{opacity:1;transform:none}
.wd-reach__l.is-turning>span{opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .7s var(--wd-motion-ease)}
.wd-reach__l.is-turning>span.is-was{transform:translateY(-7px)}
.wd-reach__l.is-turning>span.is-on{opacity:1;transform:none;transition-delay:.18s}
/* what each number counts, drawn: three of the posters fanned small · four followers */
.wd-reach__g{display:flex;align-items:center}
.wd-reach__mini{position:relative;width:64px;height:42px}
.wd-reach__mini .wd-pic{position:absolute;top:1px;left:17px;width:30px;aspect-ratio:1081/1301;border-radius:5px;background:#262626;
box-shadow:0 3px 8px #0b0b0b2e;transform-origin:50% 135%}
.wd-reach__mini .wd-pic:first-child{transform:rotate(-15deg)}
.wd-reach__mini .wd-pic:last-child{transform:rotate(15deg);z-index:1}
.wd-reach__mini .wd-ph{display:none}
.wd-reach__ppl{width:74px;height:25px;overflow:visible}
.wd-reach__ppl g>:first-child{stroke:var(--wd-color-card);stroke-width:2.4}
.wd-reach__ppl .p0>:first-child,.wd-reach__ppl .p1>:not(:first-child){fill:var(--y)}
.wd-reach__ppl .p0>:not(:first-child),.wd-reach__ppl .p1>:first-child,.wd-reach__ppl .p3>:not(:first-child){fill:var(--i)}
.wd-reach__ppl .p2>:first-child{fill:#CFCFCF}
.wd-reach__ppl .p2>:not(:first-child),.wd-reach__ppl .p3>:first-child{fill:#fff}
/* the 99%: a slider filled to 99 — its last 1% left over */
.wd-reach__pct{--o:2}
.wd-reach__pct .wd-reach__top{margin-bottom:10px}
.wd-reach__pct .wd-reach__n{margin-top:6px;font-size:clamp(76px,22vw,100px);line-height:.92;letter-spacing:-.055em}
.wd-reach__pct .wd-reach__n small{margin-left:.02em;font-size:.48em;font-weight:var(--wd-weight-black);letter-spacing:0}
.wd-reach__pct .wd-reach__l{margin-top:4px;font:var(--wd-weight-bold) 16.5px/1.35 var(--d);letter-spacing:-.01em;color:var(--i)}
.wd-reach__slider{position:relative;align-self:stretch;height:38px;margin:16px 0 6px}
.wd-reach__track,.wd-reach__rail{position:absolute;left:0;right:42px}
.wd-reach__track{top:13px;height:12px;border-radius:99px;background:var(--wd-color-rule);overflow:hidden}
.wd-reach__fill{position:absolute;inset:0;border-radius:inherit;background:var(--y);transform:translateX(-1%)}
.wd-reach__rail{top:0;height:38px;transform:translateX(99%)}
.wd-reach__knob{position:absolute;left:-19px;top:0;width:38px;height:38px;border-radius:50%;background:#fff;
box-shadow:0 0 0 1px #0b0b0b14,0 5px 14px #0b0b0b33}
.wd-reach__knob::after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--i)}
.wd-reach__rest{position:absolute;right:0;top:11px;font:var(--wd-weight-extra) 13px/16px var(--d);color:var(--wd-color-ink-3)}
html.js .wd-reach__pct:not(.is-seen) .wd-reach__fill{transform:translateX(-100%)}
html.js .wd-reach__pct:not(.is-seen) .wd-reach__rail{transform:none}
html.js .wd-reach__pct:not(.is-seen) .wd-reach__rest{opacity:0}
.wd-reach__pct.is-seen .wd-reach__fill,.wd-reach__pct.is-seen .wd-reach__rail{transition:transform 1.7s cubic-bezier(.33,1,.68,1) .25s}
.wd-reach__pct.is-seen .wd-reach__rest{transition:opacity .5s ease 1.6s}

/* THE STAGE — real posters fanned in a hand; --w (a card's width) sets every size */
.wd-reach__stage{--w:min(calc((100vw - 64px)/2.25),172px);position:relative;height:calc(var(--w)*2.42);border-radius:var(--r);
background:var(--y);overflow:hidden;isolation:isolate;pointer-events:none}
.wd-reach__fan{position:absolute;left:50%;top:calc(var(--w)*-.04);width:0;height:calc(var(--w)*2.85);transform-origin:0 calc(var(--w)*2.2)}
.wd-reach__fan::before,.wd-reach__wave{content:"";position:absolute;left:calc(var(--w)*-1.2);top:calc(var(--w)*-.4);width:calc(var(--w)*2.4);
aspect-ratio:1;border-radius:50%;border:1.5px solid #0b0b0b17}
.wd-reach__wave{border:calc(var(--w)*.012) solid #0b0b0b33;opacity:0}
.wd-reach__spark{position:absolute;left:calc(var(--w)*.78);top:calc(var(--w)*.12);width:calc(var(--w)*.14);color:var(--i)}
.wd-reach__spark+.wd-reach__spark{left:calc(var(--w)*-1.08);top:calc(var(--w)*.3);width:calc(var(--w)*.1)}
.wd-reach__cards{position:absolute;inset:0;z-index:1}
.wd-reach__card{--a:calc(var(--k)*15deg);position:absolute;z-index:var(--z);left:calc(var(--w)*-.5);top:calc(var(--w)*.266);width:var(--w);
aspect-ratio:1081/1301;border-radius:calc(var(--w)*.06);background:#262626;box-shadow:0 calc(var(--w)*.06) calc(var(--w)*.15) #0b0b0b4a;
transform-origin:50% calc(100% + var(--w)*.05);transform:translateY(var(--up,0px)) rotate(var(--a));
transition:transform 1.05s var(--wd-motion-spring) var(--dl,0s),opacity .6s ease}
.wd-reach__card--front{--up:calc(var(--w)*-.09)}
.wd-reach__card--far,.wd-reach__card.is-spare{display:none}
.wd-reach__card .wd-pic{height:100%;aspect-ratio:auto;border-radius:inherit;background:#262626}
.wd-reach__card .wd-ph{display:none}
/* the cards behind sit in the front card's shade (it lifts as a card comes forward) */
.wd-reach__card::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
background:linear-gradient(#0b0b0b00 34%,#0b0b0bcc 74%);transition:opacity .9s ease}
.wd-reach__card--front::after{opacity:0}
.wd-reach__hand{position:absolute;left:calc(var(--w)*-.3175);top:calc(var(--w)*1.24);width:calc(var(--w)*1.122);height:auto;max-width:none}
.wd-reach__hand--thumb{z-index:2}
/* the deal: the front poster leaves upward, the next comes forward, a poster slips in at the back */
.wd-reach__card.is-out{z-index:40;opacity:0;transform:translateY(calc(var(--w)*-1.45)) rotate(calc(var(--a) + var(--spin,7deg)));
transition:transform .78s cubic-bezier(.5,0,.75,.25),opacity .42s ease .3s}
.wd-reach__card.is-staged{opacity:0;transform:translateY(calc(var(--w)*.42)) rotate(var(--a))}
/* the fan opens once; the hand floats; waves roll out */
html.js .wd-reach:not(.is-in) .wd-reach__card{transform:translateY(calc(var(--w)*.12)) rotate(calc(var(--a)*.12))}
.wd-reach.is-in:not(.is-live) .wd-reach__card{--dl:calc(.14s + var(--k)*var(--k)*.03s)}
.wd-reach.is-in .wd-reach__fan{animation:wd-reach-float 8s ease-in-out infinite}
.wd-reach.is-in .wd-reach__wave{animation:wd-reach-wave 6.6s cubic-bezier(.2,.6,.3,1) infinite}
.wd-reach.is-in .wd-reach__wave+.wd-reach__wave{animation-delay:3.3s}
.wd-reach.is-off *,.wd-reach.is-off ::after{animation-play-state:paused!important}
@keyframes wd-reach-float{50%{transform:translateY(calc(var(--w)*-.03)) rotate(-.9deg)}}
@keyframes wd-reach-wave{0%{opacity:0;transform:scale(.45)}12%{opacity:1}100%{opacity:0;transform:scale(1.45)}}
@keyframes wd-reach-say{0%{opacity:0;transform:translateY(14px)}5%,30%{opacity:1;transform:none}34.5%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes wd-reach-bar{0%{transform:scaleX(0);opacity:1}33.3%{transform:none;opacity:1}37%,100%{transform:none;opacity:0}}

/* PHOTO CARDS (his reference: rounded photo cards, the words over the picture's lower part, a white icon tile) */
[data-p-reach-cards=photo] .wd-reach__stat,[data-p-reach-cards=wash] .wd-reach__stat{justify-content:flex-end;min-height:236px}
[data-p-reach-cards=photo] .wd-reach__stat,[data-p-reach-cards=photo] .wd-reach__pct{color:#fff;background:#141414}
[data-p-reach-cards=photo] .wd-reach__stat .wd-reach__top{position:absolute;top:12px;left:12px;right:12px;justify-content:flex-end}
[data-p-reach-cards=photo] .wd-reach__ic{width:38px;height:38px;border-radius:12px;background:#fff}
[data-p-reach-cards=photo] .wd-reach__ic svg{width:21px;height:21px}
/* a picture card shows the poster's photograph only — the band between its logo (the top 22%) and its headline (from 61%) */
.wd-reach__media,.wd-reach__strip{position:relative;display:block;overflow:hidden}
.wd-reach__media:not(.wd-reach__wall)>.wd-pic,.wd-reach__strip>.wd-pic{position:absolute;top:-56.4%;left:50%;width:auto;height:256.4%;
aspect-ratio:1081/1301;border-radius:0;background:#141414;transform:translateX(-50%)}
:is([data-p-reach-cards=photo],[data-p-reach-cards=wash]) .wd-reach__media{position:absolute;inset:0;z-index:-1;isolation:isolate}
[data-p-reach-cards=photo] .wd-reach__stat .wd-reach__media::after{content:"";position:absolute;inset:0;
background:linear-gradient(#0b0b0b2e,#0b0b0b00 24%,#0b0b0b8c 54%,#0b0b0bf0 88%)}
[data-p-reach-cards=photo] .wd-reach__when{color:var(--y)}
:is([data-p-reach-cards=photo],[data-p-reach-cards=tinted]) .wd-reach__l{color:#ffffffd6}
:is([data-p-reach-cards=photo],[data-p-reach-cards=tinted],[data-p-reach-cards=wash]) .wd-reach__g{display:none}
/* …and the 99% over the posters' photographs side by side as strips (one wide one on a phone) */
.wd-reach__wall{display:flex;gap:3px}
.wd-reach__strip{flex:1 1 0;min-width:0}
.wd-reach__strip:nth-child(n+2){display:none}
.wd-reach__media .wd-ph{display:none}
[data-p-reach-cards=photo] .wd-reach__wall::after{content:"";position:absolute;inset:0;
background:linear-gradient(#0b0b0bb8,#0b0b0be6),linear-gradient(90deg,#0b0b0b8c,#0b0b0b00 70%)}
:is([data-p-reach-cards=photo],[data-p-reach-cards=tinted],[data-p-reach-cards=wash]) .wd-reach__pct :is(.wd-reach__l,.wd-reach__n){color:#fff}
:is([data-p-reach-cards=photo],[data-p-reach-cards=tinted],[data-p-reach-cards=wash]) .wd-reach__pct :is(.wd-reach__when,.wd-reach__rest){color:#ffffffb3}
:is([data-p-reach-cards=photo],[data-p-reach-cards=tinted],[data-p-reach-cards=wash]) .wd-reach__track{background:#ffffff2e}

/* TINTED CARDS (his reference: the picture on top, the card below in that picture's own deep colour, an outlined pill) */
[data-p-reach-cards=tinted] .wd-reach__stat,[data-p-reach-cards=tinted] .wd-reach__pct{background:var(--tint,#1f2024);color:#fff;
transition:background-color 1s ease}
[data-p-reach-cards=tinted] .wd-reach__stat{padding:7px 7px 16px}
[data-p-reach-cards=tinted] .wd-reach__media{align-self:stretch;aspect-ratio:16/11;margin-bottom:14px;border-radius:calc(var(--r) - 6px);
background:#ffffff14}
[data-p-reach-cards=tinted] .wd-reach__stat>:not(.wd-reach__media){margin-left:9px;margin-right:9px}
[data-p-reach-cards=tinted] .wd-reach__top{display:none}
[data-p-reach-cards=tinted] .wd-reach__when{padding:7px 12px 6px;border:1.5px solid #ffffff9e;border-radius:99px;color:#fff}
[data-p-reach-cards=tinted] .wd-reach__n{margin-top:12px}
[data-p-reach-cards=tinted] .wd-reach__pct{padding:7px 7px 18px}
[data-p-reach-cards=tinted] .wd-reach__pct>:not(.wd-reach__media){margin-left:11px;margin-right:11px}
[data-p-reach-cards=tinted] .wd-reach__pct .wd-reach__media{aspect-ratio:16/8}
[data-p-reach-cards=tinted] .wd-reach__slider{align-self:stretch;margin-left:11px;margin-right:11px}

/* COLOUR-WASHED (his reference: pictures washed in one solid colour) — the yellow, the grey, the ink */
[data-p-reach-cards=wash] .wd-reach__stat[data-stat=reads]{--bg:var(--y);--wash:var(--y)}
[data-p-reach-cards=wash] .wd-reach__stat[data-stat=follow]{--bg:#E8E8E8;--wash:#C9C9C9}
[data-p-reach-cards=wash] .wd-reach__pct{--bg:var(--i);--wash:#4a4a4a;color:#fff}
[data-p-reach-cards=wash] :is(.wd-reach__stat,.wd-reach__pct){background:var(--bg)}
[data-p-reach-cards=wash] .wd-reach__stat .wd-reach__media{bottom:34%}
[data-p-reach-cards=wash] .wd-reach__media img{filter:grayscale(1) contrast(1.12)}
[data-p-reach-cards=wash] .wd-reach__media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--wash);mix-blend-mode:multiply}
[data-p-reach-cards=wash] .wd-reach__media::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(#0000 30%,var(--bg))}
[data-p-reach-cards=wash] .wd-reach__wall::after{background:linear-gradient(90deg,var(--bg) 12%,#0b0b0bb3 60%,#0b0b0b66)}
[data-p-reach-cards=wash] .wd-reach__stat[data-stat=reads] .wd-reach__ic{background:var(--i);color:var(--y)}
[data-p-reach-cards=wash] .wd-reach__stat .wd-reach__top{position:absolute;top:12px;left:12px;right:12px}
[data-p-reach-cards=wash] .wd-reach__stat[data-stat=reads] .wd-reach__when{color:#0b0b0bb3}

@media (min-width:700px){
.wd-reach__stage{--w:200px}
.wd-reach__card{--a:calc(var(--k)*9.5deg)}
.wd-reach__card--far{display:block}
.wd-reach__stats{gap:12px}
.wd-reach__stat{padding:18px 18px 20px}
.wd-reach__n{font-size:40px}
.wd-reach__strip:nth-child(n+2){display:block}
.wd-reach__top{height:52px}
.wd-reach__mini{width:80px;height:52px}
.wd-reach__mini .wd-pic{left:21px;width:38px;border-radius:6px}
.wd-reach__ppl{width:92px;height:31px}
.wd-reach__pct .wd-reach__when{justify-self:start}
.wd-reach__pct{display:grid;grid-template:"n top when" auto "n slider slider" auto "n l l" auto/auto auto minmax(0,1fr);
column-gap:14px;align-items:center;padding:24px 30px 26px}
.wd-reach__pct .wd-reach__n{grid-area:n;margin:0 22px 0 0;font-size:clamp(100px,11vw,150px)}
.wd-reach__pct .wd-reach__top{grid-area:top;margin:0}
.wd-reach__pct .wd-reach__when{grid-area:when}
.wd-reach__slider{grid-area:slider;margin:12px 0 8px}
.wd-reach__pct .wd-reach__l{grid-area:l;align-self:start;font-size:clamp(17px,1.6vw,20px)}
[data-p-reach-cards=tinted] .wd-reach__pct{grid-template:"pic n top when" auto "pic n slider slider" auto "pic n l l" auto/minmax(0,.55fr) auto auto minmax(0,1fr);
padding:8px 30px 8px 8px}
[data-p-reach-cards=tinted] .wd-reach__pct .wd-reach__media{grid-area:pic;align-self:stretch;aspect-ratio:auto;min-height:190px;margin:0 16px 0 0}
[data-p-reach-cards=tinted] .wd-reach__pct>:not(.wd-reach__media){margin:0}
[data-p-reach-cards=tinted] .wd-reach__pct .wd-reach__n{margin-right:22px}
[data-p-reach-cards=tinted] .wd-reach__slider{margin:12px 0 8px}
}
@media (min-width:1000px){
.wd-reach__in{grid-template:"head stage" auto "says stage" auto "stats stage" 1fr "pct pct" auto/minmax(0,1fr) minmax(0,.9fr);gap:30px 48px}
.wd-reach__in--words{grid-template:"head" "says" "stats" "pct"/1fr}
.wd-reach__head{grid-area:head}
.wd-reach__mid{grid-area:says}
.wd-reach__stats{grid-area:stats;align-self:end}
.wd-reach__pct{grid-area:pct;--r:var(--wd-radius-card)}
.wd-reach__stat{--r:var(--wd-radius-card)}
.wd-reach__n{font-size:clamp(34px,3.2vw,44px)}
.wd-reach__stage{grid-area:stage;--w:min(240px,(100vw - 64px)*.19);height:100%;min-height:calc(var(--w)*2.62);border-radius:var(--wd-radius-card)}
.wd-reach__fan{top:auto;bottom:calc(var(--w)*-.4)}
}
@media (prefers-reduced-motion:reduce){
.wd-reach *,.wd-reach ::before,.wd-reach ::after{animation:none!important;transition:none!important}
html.js .wd-reach .wd-reach__card{transform:translateY(var(--up,0px)) rotate(var(--a))}
html.js .wd-reach .wd-reach__hl::before{transform:none}
html.js .wd-reach__pct .wd-reach__fill{transform:translateX(-1%)}
html.js .wd-reach__pct .wd-reach__rail{transform:translateX(99%)}
html.js .wd-reach__pct .wd-reach__rest{opacity:1}
.wd-reach__says{gap:12px}
.wd-reach__says li{grid-area:auto;opacity:1;transform:none}
.wd-reach__l>.wd-reach__wink{grid-area:2/1;opacity:1;transform:none;margin-top:4px}
.wd-reach__bars,.wd-reach__wave{display:none}
}