/* V2, client feedback pass. Inherits styles.css then concept-b.css (black ground),
   adds the numbered index and the tighter rhythm. See ../../design-notes.md */

/* numbered section index. Client explicitly listed the site as 01-07, and the
   numerals double as a contents index for a 90-second read. */
.num{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  color:var(--ash);display:block;margin-bottom:8px;
}
.cols > div > .num:first-child{margin-top:0}

/* tighter vertical rhythm: the brief is "shorter, sharper, 90 seconds" */
section{padding-block:clamp(52px,7.5vw,104px)}
.hero{padding-block:clamp(64px,11vw,150px) clamp(32px,5vw,64px)}
.reg__row{padding:clamp(15px,2.2vw,22px) 0}
.reg__row dd{font-size:15px;line-height:1.5;max-width:64ch}

/* one-line practice rows read better with the term and text on one baseline */
.reg__row{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
@media (max-width:760px){ .reg__row{grid-template-columns:1fr} }

/* the two people sections, 04 and 05 */
.people{display:grid;grid-template-columns:minmax(0,600px) minmax(0,320px);justify-content:start;
         gap:clamp(28px,5vw,64px);align-items:start;margin-top:clamp(24px,4vw,44px)}
@media (max-width:900px){ .people{grid-template-columns:1fr} }
.people .body{font-size:16px;max-width:58ch}

/* network: the principle carries the section now, so give it size */
.principle{font-size:clamp(18px,2.3vw,26px);line-height:1.32;letter-spacing:-.018em;
           max-width:34ch;margin:18px 0 0;color:#000}
.field__sub{margin:14px 0 0;font-size:15px;line-height:1.55;color:#4A4A4A;max-width:38ch}

/* positions */
.pos td:first-child{font-family:var(--display);font-size:16px;letter-spacing:-.01em;
                    text-transform:none;font-weight:700}
.pos .sub{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
          text-transform:uppercase;color:var(--ash);margin-top:5px;font-weight:400}

/* ---------- 02 "What we do": tonal panels, no rules ----------
   Replaces the ruled register at Mudit's request (2026-09-03: "i don't like the
   horizontal lines setup"). The dividers are 2px gaps of pure black rather than
   hairlines, so the section carries no rules at all. The six items are now a
   sequence (due diligence through to exit), and the panel tone steps one value
   lighter at each stage, so the order is felt rather than announced. */
.stages{
  list-style:none;margin:clamp(28px,5vw,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#000;
}
@media (max-width:900px){ .stages{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .stages{grid-template-columns:1fr} }

.stage{
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,34px) clamp(20px,2.2vw,30px) clamp(30px,3.4vw,44px);
}
.stage__i{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;color:#9E9E9E;
}
.stage__t{
  font-weight:700;font-size:clamp(19px,1.9vw,25px);line-height:1.1;
  letter-spacing:-.025em;margin:14px 0 10px;
}
.stage__d{margin:0;font-size:15px;line-height:1.55;color:#CFCFCF;max-width:36ch}

.stage:nth-child(1){background:#0B0B0B}
.stage:nth-child(2){background:#101010}
.stage:nth-child(3){background:#151515}
.stage:nth-child(4){background:#1A1A1A}
.stage:nth-child(5){background:#1F1F1F}
.stage:nth-child(6){background:#242424}