/* Home page only. Shared rules live in css/style.css. */
.stack-intro{padding:var(--sec) 0 40px}
.stack-intro h2{font-size:var(--h-section);max-width:18ch}
.stack-intro p{color:var(--dim);margin-top:16px;font-size:19px;max-width:60ch}
.why-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.why-grid h2{font-size:var(--h-section);max-width:14ch}
.why .figures{margin-top:96px}
@media (max-width:1024px){
  .why-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:767px){
  .stack-intro{padding:var(--sec) 0 32px}
  .why .figures{margin-top:64px}
}

/* Client marks: one optical cap height across eight marks of different
   construction. Single-line wordmarks sit at ~12px cap; the two stacked marks
   (Bajaj Finserv, IDFC FIRST Bank) are sized on their type, not their box. */
.logos li{height:34px}
.logos .lg-cb{height:17px}
.logos .lg-eb{height:21px}
.logos .lg-ds{height:16px}
.logos .lg-un{height:20px}
.logos .lg-bj{height:28px}
.logos .lg-if{height:30px}

/* Offices on the home page: 2x2 with horizontal rules only, so it does not
   repeat the single-row vertical-ruled device used by the six phases above. */
.offices{grid-template-columns:1fr 1fr}
.offices>*{border-right:0;padding:28px 40px 32px 0}
.offices>*+*{padding-left:0}
.offices>*:nth-child(2n){padding-left:40px}
.offices>*:nth-child(n+3){border-top:1px solid var(--rule)}
.offices address{max-width:38ch}
/* Cell 1 carries the Headquarters tag; offset its row neighbour so both city names sit on one line. */
.offices>*:nth-child(2) h3{margin-top:27px}

/* Case grid: equal image height so all three captions start on one line. */
.case-grid{align-items:start}
.case-grid img{aspect-ratio:auto;height:224px}

@media (max-width:767px){
  .logos li{height:28px}
  .logos .lg-cb{height:14px}
  .logos .lg-eb{height:17px}
  .logos .lg-ds{height:13px}
  .logos .lg-un{height:16px}
  .logos .lg-bj{height:23px}
  .logos .lg-if{height:25px}
  .offices{grid-template-columns:1fr}
  .offices>*{padding:24px 0 28px}
  .offices>*:nth-child(2n){padding-left:0}
  .offices>*:nth-child(n+2){border-top:1px solid var(--rule)}
  .case-grid img{height:auto;aspect-ratio:3/2}
}

/* Work: a ruled list of engagements. Deliberately text only, because the three
   service panels above are photographic and the page needs the change of pace. */
.worklist{list-style:none;border-top:1px solid var(--rule)}
.worklist li{display:grid;grid-template-columns:3fr 6fr 5fr;gap:32px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--rule)}
.wl-client{font-size:20px;font-weight:700;letter-spacing:-.02em}
.wl-what{font-size:17px;color:var(--text)}
.wl-out{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--dim)}
@media (max-width:1024px){
  .worklist li{grid-template-columns:2fr 3fr;gap:8px 28px}
  .wl-out{grid-column:2}
}
@media (max-width:767px){
  .worklist li{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .wl-out{grid-column:1}
}