/* About — Native (23 Oct 2026 redesign): vision → why → drawing board → 2023 → India was waiting → 2026 → built in India → not stopping.
   Cleaned 24 Oct 2026: only the rules this page uses, in page order. */
.page-about-v2{--ab-ink:#0F0F0F;--ab-paper:#FFFFFF;--ab-grey:#F5F5F5;--ab-mute:rgba(255,255,255,.6);--ab-mute-l:#6B6B66;--ab-body-l:#545454;
  --ab-orange:#FF5E00;--ab-gut:clamp(20px,4vw,72px);--ab-max:1440px;background:var(--ab-paper);color:var(--ab-ink)}
.page-about-v2 main{display:block}

/* type scale: xl (hero, close) › l (chapter statements) › mf h2 (manifesto lines) › m › sub */
.ab-wrap{width:100%;max-width:var(--ab-max);margin-inline:auto;padding-inline:var(--ab-gut)}
.ab-dark{background:var(--ab-ink);color:#fff}
.ab-grey{background:var(--ab-grey)}
.ab-sec{padding-block:clamp(88px,11vw,176px)}
.ab-h{font-weight:500;letter-spacing:-.055em;line-height:1.02;text-wrap:balance}
.ab-xl{font-size:clamp(48px,8.4vw,136px)}
.ab-l{font-size:clamp(36px,5.2vw,84px)}
.ab-m{font-size:clamp(26px,3vw,44px);letter-spacing:-.04em;line-height:1.12}
.ab-sub{margin-top:clamp(20px,2vw,32px);font-size:clamp(17px,1.4vw,22px);line-height:1.5;letter-spacing:-.015em;max-width:36ch;text-wrap:pretty}
.ab-dark .ab-sub{color:var(--ab-mute)}
.ab-tag{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:-.01em;color:var(--ab-mute)}
.ab-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ab-orange)}
.ab-num{font-size:clamp(64px,13vw,220px);font-weight:500;letter-spacing:-.06em;line-height:.95;color:var(--ab-orange);font-variant-numeric:tabular-nums}

/* breadcrumb (this page doesn't load refinement.css) */
/* on the hero's black, so the page opens as one dark block (Ankur, 24 Oct 2026) */
.page-about-v2 .crumb.site-crumb{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:var(--ab-max);margin-inline:auto;padding:28px var(--ab-gut) 20px;font-size:11px;line-height:1.4;color:rgba(255,255,255,.5);
  background:var(--ab-ink);box-shadow:0 0 0 100vmax var(--ab-ink);clip-path:inset(0 -100vmax);margin-bottom:-1px}
.page-about-v2 .site-crumb a:hover{color:#fff}.page-about-v2 .site-crumb span{color:#fff}
@media(max-width:760px){.page-about-v2 .crumb.site-crumb{font-size:10px;gap:6px;padding:20px var(--ab-gut) 16px}}

/* reveal on scroll — content is fully visible without JS; animation only once the script arms it */
html.ab-js .ab-rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.ab-js .ab-rv.is-in{opacity:1;transform:none}

/* 1 · vision, with a slow carousel of every photo on the page (pauses on hover, still for reduced motion) */
.ab-hero{padding-block:clamp(56px,8vw,152px) clamp(48px,6vw,96px);overflow:hidden}
.ab-hero .ab-h{max-width:21ch;margin-top:28px}
.ab-hero .ab-sub{max-width:52ch}
.ab-hero__strip{margin-top:clamp(48px,5vw,80px)}
.ab-strip{display:flex;width:max-content;gap:16px;animation:ab-drift 220s linear infinite}   /* ~30px/s */
.ab-hero__strip:hover .ab-strip{animation-play-state:paused}
.ab-strip figure{margin:0;flex:none;height:clamp(260px,34vw,520px);border-radius:0;overflow:hidden;background:#1C1C1C}
.ab-strip img{height:100%;width:auto;display:block;object-fit:cover}
@keyframes ab-drift{to{transform:translateX(-50%)}}

/* manifesto blocks: a short line on the left, one confident paragraph on the right */
.ab-mf{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,96px);align-items:start}
.ab-mf h2{font-size:clamp(32px,3.4vw,56px);font-weight:500;letter-spacing:-.05em;line-height:1.06;color:var(--ab-ink);max-width:14ch;text-wrap:balance}
.ab-mf p{font-size:clamp(20px,1.9vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.42;color:var(--ab-body-l);max-width:34ch;text-wrap:pretty}
.ab-mf__para{display:block;margin-top:.8em}
.ab-mf__end{color:var(--ab-ink)}
@media(max-width:900px){.ab-mf{grid-template-columns:1fr;gap:20px}.ab-mf p{max-width:none}}

/* 2 · why we started, on the site's light grey */
.ab-quiet{background:var(--ab-grey);color:var(--ab-ink)}
.ab-quiet .ab-mf p{color:var(--ab-mute-l)}

/* 3 · to the drawing board: text beside the first mock-up */
.ab-mfi{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,112px);align-items:center}
.ab-mf--stack{grid-template-columns:1fr;gap:clamp(20px,2.4vw,36px)}
.ab-mf--stack h2{max-width:16ch}
.ab-mf--stack p{max-width:30ch}
@media(max-width:900px){.ab-mfi{grid-template-columns:1fr}}
.ab-photo{margin:0;border-radius:0;overflow:hidden;background:#1C1C1C}
.ab-photo img{width:100%;height:100%;object-fit:cover}
.ab-photo--45{aspect-ratio:4/5}

/* 4 · 2023 and 2026: a giant outlined year, the line, then the photos */
.ab-launch{position:relative;overflow:hidden}
.ab-year{font-size:clamp(120px,26vw,420px);font-weight:500;letter-spacing:-.07em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);margin-left:-.04em}
.ab-launch__head{margin-top:clamp(-120px,-6vw,-40px);position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,96px);align-items:end}
.ab-launch__head .ab-h{color:#fff}
.ab-launch__head .ab-sub{max-width:44ch;margin-top:0}
.ab-reel{margin-top:clamp(48px,6vw,96px);display:flex;gap:16px;height:clamp(300px,36vw,560px)}
.ab-reel figure{margin:0;flex:var(--r) 1 0;min-width:0;border-radius:0;overflow:hidden;background:#1C1C1C}
.ab-reel img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.ab-launch__head{grid-template-columns:1fr;margin-top:-24px}
  .ab-reel{height:auto;flex-wrap:wrap}.ab-reel figure{flex:1 1 100%;aspect-ratio:4/3}.ab-reel figure+figure{flex:1 1 calc(50% - 8px);aspect-ratio:3/4}}
.ab-launch--light .ab-year{-webkit-text-stroke:1.5px rgba(11,11,11,.22)}
.ab-launch--light .ab-launch__head .ab-h{color:var(--ab-ink)}
.ab-launch--light .ab-sub{color:var(--ab-mute-l)}

/* 5 · India was waiting: text left, India in 500 dots right (they light from Gurugram outwards), then proof */
.ab-trust{background:#fff}
.ab-trust__split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:center}
.ab-trust__txt .ab-h.ab-l{max-width:12ch}
.ab-trust__num{margin-top:clamp(40px,5vw,72px);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ab-trust__num .ab-num{font-size:clamp(72px,9vw,160px)}
.ab-trust__num .ab-m{color:var(--ab-mute-l)}
.ab-india-map{display:block;width:100%;max-width:560px;margin-left:auto;height:auto;overflow:visible}
.ab-india-map circle{fill:var(--ab-orange);transform-box:fill-box;transform-origin:center}
html.ab-js .ab-india-map circle{fill:#E2E2DD;transform:scale(.55);transition:fill .5s ease var(--d),transform .6s cubic-bezier(.2,.9,.3,1.4) var(--d)}
html.ab-js .ab-india-map.is-in circle{fill:var(--ab-orange);transform:none}
@media(max-width:900px){.ab-trust__split{grid-template-columns:1fr}.ab-india-map{margin:8px auto 0;max-width:440px}}
.ab-proof{margin-top:clamp(56px,6vw,96px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ab-stat,.ab-quote{margin:0;padding:clamp(24px,2.4vw,36px);border-radius:0;background:var(--ab-grey);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:240px}
.ab-stat b{font-size:clamp(48px,5vw,80px);font-weight:500;letter-spacing:-.06em;line-height:1}
.ab-stat b span{color:var(--ab-orange);font-size:.5em;margin-left:6px;vertical-align:.5em}
.ab-stat p{font-size:16px;line-height:1.4;color:var(--ab-body-l)}
.ab-quote{background:var(--ab-ink);color:#fff}
.ab-quote blockquote{margin:0;font-size:clamp(19px,1.5vw,24px);letter-spacing:-.03em;line-height:1.3}
.ab-quote figcaption{font-size:14px;color:var(--ab-mute)}
@media(max-width:900px){.ab-proof{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ab-proof{grid-template-columns:1fr}.ab-stat,.ab-quote{min-height:0}}

/* 6 · Native Day 2026 photo wall: 4 columns, two 2×2 hero frames (left, then right) with four 3:2 frames around each */
.ab-wall{margin-top:clamp(48px,6vw,96px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-auto-flow:dense}
.ab-w{margin:0;border-radius:0;overflow:hidden;background:#1C1C1C;aspect-ratio:3/2}
.ab-w img{width:100%;height:100%;object-fit:cover}
.ab-w--big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ab-w--right{grid-column:3/5}
.ab-w--wide{grid-column:span 2;aspect-ratio:37/12}.ab-w--wide img{object-position:center 42%}   /* two small frames wide, same height (27 Oct 2026) */
@media(max-width:760px){.ab-wall{grid-template-columns:1fr 1fr;gap:8px}.ab-w--big,.ab-w--right,.ab-w--wide{grid-column:1/-1;grid-row:auto;aspect-ratio:3/2}}

/* 7 · built in India: the statement, then two rows of sketches and lab photos drifting in opposite directions */
.ab-made-in{background:#fff;overflow:hidden}
.ab-made-in .ab-mf h2{max-width:16ch}
.ab-tracks{margin-top:clamp(48px,6vw,88px);margin-inline:calc(-1 * var(--ab-gut));display:grid;gap:14px;overflow:hidden}
.ab-track{display:flex;width:max-content;gap:14px;animation:ab-drift 80s linear infinite}
.ab-track--rev{animation-direction:reverse;animation-duration:95s}
.ab-tracks:hover .ab-track{animation-play-state:paused}
.ab-track figure{margin:0;flex:none;height:clamp(200px,20vw,300px);border-radius:0;overflow:hidden;background:var(--ab-grey)}
.ab-track img{height:100%;width:auto;display:block}

/* 8 · close: not stopping */
.ab-close{background:var(--ab-ink)}
.ab-close .ab-h{max-width:12ch}
.ab-close .ab-sub{max-width:44ch}
.ab-cta{margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;gap:12px}
.ab-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:0;font-size:15px;letter-spacing:-.01em;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .2s,color .2s,border-color .2s}
.ab-btn:hover{background:#fff;color:var(--ab-ink);border-color:#fff}

@media(prefers-reduced-motion:reduce){.ab-strip,.ab-track{animation:none}.ab-hero__strip,.ab-tracks{overflow-x:auto}}
/* close (27 Oct 2026, Ankur): "We're just getting started." in a slow orange to light-orange gradient that drifts across the words */
.ab-close .ab-h{background:linear-gradient(100deg,#FF5E00 0%,#FFB27A 25%,#FF5E00 50%,#FFB27A 75%,#FF5E00 100%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#FF5E00;animation:ab-grad 9s linear infinite}
@keyframes ab-grad{from{background-position:0% 50%}to{background-position:-200% 50%}}
@media(prefers-reduced-motion:reduce){.ab-close .ab-h{animation:none}}
.ab-close .ab-h{padding-bottom:.14em;margin-bottom:-.14em}   /* the gradient is painted inside the box: room for the g's descender, same spacing below */