/* ============================================================
   ABOUT US PAGE — #fafafa throughout
   ============================================================ */
body.about-page{background:var(--mist)}
.about-page .nav{position:sticky;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
.ab-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.ab-sec{padding:clamp(56px,8vw,104px) 0}
/* Same eyebrow -> heading gap as the home page folds — see --eyebrow-gap. */
.ab-sec .eyebrow{margin-bottom:var(--eyebrow-gap)}
.ab-h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.01em;line-height:1.06;margin:0 0 12px;color:#0a0a0a}

/* linkable section heading (Peepal Way) */
.ab-h2-link{display:flex;width:fit-content;max-width:100%;align-items:center;gap:18px;text-decoration:none;color:inherit;margin-bottom:12px}
.ab-h2-link .ab-h2{margin:0}
.ab-h2-link .h2-arrow{flex:0 0 auto;font-family:var(--body);font-size:1.7rem;line-height:1;color:var(--neon);transition:transform .22s ease}
.ab-h2-link:hover .h2-arrow{transform:translateX(7px)}
.ab-h2-link:hover .ab-h2{text-decoration:underline;text-decoration-color:var(--neon);text-underline-offset:7px;text-decoration-thickness:2px}


/* hero video */
.ab-hero{padding:clamp(40px,6vw,72px) 0 0}
.ab-hero .eyebrow{margin-bottom:var(--eyebrow-gap)}
.ab-hero h1{font-family:var(--display);font-weight:800;font-size:var(--fs-h1,clamp(2.2rem,5vw,3.6rem));letter-spacing:-.015em;line-height:1.03;margin:0 0 28px;max-width:16ch;color:#0a0a0a}
.video-card{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#080808;cursor:pointer;isolation:isolate}
.video-card .vart{position:absolute;inset:0;z-index:0;opacity:.5}
.video-card .vart svg{position:absolute;right:-3%;top:50%;transform:translateY(-50%);width:56%;height:auto}
.video-card .vart .line{stroke:#3a3a3a;fill:none;stroke-width:1.4}
.video-card .vart .acc{stroke:var(--neon);fill:none;stroke-width:2}
.video-card::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 30% 45%,rgba(255,122,41,.16),transparent 55%),linear-gradient(0deg,rgba(8,8,8,.85),rgba(8,8,8,.25))}
.video-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3.5vw,44px)}
.v-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 12px rgba(255,122,41,.14),var(--neon-glow);transition:transform .2s}
.video-card:hover .v-play{transform:translate(-50%,-50%) scale(1.06)}
.v-play::after{content:"";border-left:26px solid #0a0a0a;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
.video-inner .veyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.088em * var(--mono-track, 1));text-transform:uppercase;color:var(--neon);margin-bottom:8px}
.video-inner h2{font-family:var(--display);font-weight:700;font-size:var(--fs-h2,clamp(1.3rem,2.4vw,2rem));color:#fff;margin:0}
.v-caption{margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.056em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey)}

/* history */
.ab-history .lead-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:6px}
.ab-history p{color:#3a3a3a;line-height:1.7;font-size:1.05rem;margin:0}
.tl-wrap{position:relative;margin-top:44px}
.tl-bar{position:absolute;top:0;left:0;right:0;height:2px;background:#e6e6e6;border-radius:2px}
.tl-thumb{position:absolute;top:0;height:2px;background:var(--neon);border-radius:2px;left:0;width:30%;cursor:grab;touch-action:none;transition:background .2s}
.tl-thumb:hover,.tl-thumb.drag{background:var(--orange)}
.timeline{display:flex;gap:0;overflow-x:auto;padding-top:26px;scrollbar-width:none}
.timeline::-webkit-scrollbar{display:none}
.tl-item{flex:0 0 auto;min-width:190px;padding:0 26px 0 0;position:relative}
.tl-year{font-family:var(--mono);font-size:.9rem;color:var(--neon);letter-spacing:calc(.024em * var(--mono-track, 1))}
.tl-label{font-family:var(--display);font-size:1.02rem;font-weight:600;color:#0a0a0a;margin-top:8px;line-height:1.25;max-width:20ch}
/* The CMS offers an optional milestone description; the reference design has
   no such element, so it is set as quiet supporting text under the label. */
.tl-note{margin-top:6px;max-width:24ch}
.tl-note p{color:#555;font-size:.86rem;line-height:1.5;margin:0}

/* mission / vision / values */
.ab-mv{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
/* Same 8px-under-the-heading problem as .way-grid; kept in step with it. */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(32px,4vw,56px)}
.mv-card{border:1px solid #ececec;border-radius:16px;padding:clamp(28px,3.5vw,44px);background:var(--mist)}
.mv-card .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:calc(.08em * var(--mono-track, 1));text-transform:uppercase;color:var(--neon);margin-bottom:16px}
.mv-card p{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.32;color:#0a0a0a;margin:0}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.val-card{border:1px solid #ececec;border-radius:14px;padding:24px;background:var(--mist);display:flex;flex-direction:column;gap:8px}
.val-card .vn{font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.072em * var(--mono-track, 1));color:var(--neon)}
.val-card h4{font-family:var(--display);font-size:1.3rem;font-weight:700;margin:0;color:#0a0a0a}
.val-card p{color:#555;font-size:.92rem;line-height:1.55;margin:0}

/* the peepal way */
/* The heading is display-size and underlined on hover; too little under it and
   the heading reads as one block with the first row of cards.
   --way-grid-top is the CMS control ("Space above the cards"). It is held to a
   floor here rather than used raw: a small value saved against the earlier,
   tighter design would otherwise keep clustering the cards under the heading.
   The control still opens the gap further, it just cannot close it below this. */
.way-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:max(var(--way-grid-top,0px),clamp(44px,4.5vw,68px))}
.way-card{background:#fff;border:1px solid #ececec;border-radius:16px;padding:28px;transition:transform .2s,box-shadow .2s}
.way-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.07)}
.way-card .wn{font-family:var(--mono);font-size:.72rem;letter-spacing:calc(.064em * var(--mono-track, 1));color:var(--neon);margin-bottom:14px}
.way-card h3{font-family:var(--display);font-size:var(--fs-h3,1.5rem);font-weight:700;margin:0 0 10px;color:#0a0a0a}
.way-card p{color:#555;line-height:1.6;font-size:.96rem;margin:0}
.way-marquee{overflow:hidden;margin-top:30px;border-top:1px solid #ececec;border-bottom:1px solid #ececec;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.way-track{display:flex;align-items:center;gap:50px;width:max-content;animation:scroll 34s linear infinite}
.way-marquee:hover .way-track{animation-play-state:paused}
.way-stat2{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.way-stat2 .n{font-family:var(--display);font-weight:800;font-size:1.85rem;color:#0a0a0a;line-height:1}
.way-stat2 .l{font-family:var(--mono);font-size:.64rem;letter-spacing:calc(.056em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep)}
.way-sep{color:var(--neon);font-size:.68rem}

/* team */
.ab-team{background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee}
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(44px,4.5vw,68px)}
.leader{display:flex;gap:22px;align-items:center;border:1px solid #ececec;border-radius:16px;padding:26px;background:var(--mist)}
.avatar{flex:0 0 auto;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.5rem;color:#0a0a0a;background:#fff;border:2px solid var(--neon);box-shadow:var(--neon-glow)}
.leader .info h3{font-family:var(--display);font-size:var(--fs-h3,1.4rem);font-weight:700;margin:0;color:#0a0a0a}
.leader .info .role{font-family:var(--mono);font-size:.68rem;letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep);margin-top:6px}
.leader .info a{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.04em * var(--mono-track, 1));text-transform:uppercase;color:var(--neon)}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.member{border:1px solid #ececec;border-radius:14px;padding:22px;background:var(--mist);text-align:center}
.member .avatar{width:60px;height:60px;font-size:1.2rem;margin:0 auto 14px;border-width:1.5px}
.member h4{font-family:var(--display);font-size:1.05rem;font-weight:700;margin:0;color:#0a0a0a}
.member .role{font-family:var(--mono);font-size:.6rem;letter-spacing:calc(.04em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep);margin-top:6px;line-height:1.4}
.member a{display:inline-block;margin-top:10px;color:var(--neon);font-size:.9rem}

/* foundation */
.ab-foundation .found-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,56px);margin-top:8px;align-items:start}
.ab-foundation p{color:#3a3a3a;line-height:1.7;font-size:1.05rem;margin:0 0 18px}
.found-quote{border-left:2px solid var(--neon);padding:6px 0 6px 22px;margin-top:26px}
.found-quote blockquote{font-family:var(--display);font-style:italic;font-size:1.25rem;line-height:1.4;color:#0a0a0a;margin:0}
.found-quote cite{display:block;margin-top:12px;font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep);font-style:normal}
.found-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.found-tiles .tile{aspect-ratio:1/1;border-radius:12px;background:linear-gradient(150deg,#ececec,#f6f6f6);border:1px solid #e6e6e6;display:flex;align-items:flex-end;padding:14px}
.found-tiles .tile span{font-family:var(--mono);font-size:.56rem;letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey)}
/* Additions for CMS content the static reference did not have to carry:
   an uploaded photo inside an initials disc, and an image filling a tile. */
.avatar .peepal-media,.avatar img{width:100%;height:100%;border-radius:50%;display:block;object-fit:cover}
.found-tiles .tile{position:relative;overflow:hidden}
.found-tiles .tile .peepal-media,.found-tiles .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.found-tiles .tile.has-image span{position:relative;z-index:1;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}

@media(max-width:900px){
  .ab-history .lead-cols,.mv-grid,.leaders,.ab-foundation .found-cols{grid-template-columns:1fr}
  .way-grid{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .way-grid,.team-grid{grid-template-columns:1fr}
}