/* ═══════════════════════════════════════════════════════════════════════
   STRATEGY — /services/strategy/ (7 Sep 2026). Swiss rows on a 12-column
   grid: key (overline + numeral) in 1–2, copy in 3–8 at a ~60ch measure,
   the glass solid in 9–12. Hairline rules between rows. The glass (7 Sep) is
   ONE page-wide run, .glass-run.st-page-run, hero through footer — glass.js
   pins its solid to the viewport centre and shrinks it down the page
   (strategy.js mounts it in section mode; the host carries the tuning as
   data-glass-*). Its one rule is at the foot of this sheet.

   Type and space are the page; motion is a hairline drawing in, words
   rising through a clip, a numeral drifting a few px. Nothing else.
   ═══════════════════════════════════════════════════════════════════════ */
.st{--st-gap:clamp(16px,2vw,28px);--st-row-y:clamp(48px,7vw,104px)}
.st-grid,.st-run,.st-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap)}
.st-run,.st-row,.st-row--index,.st-foot{grid-column:1/-1}
.st-run{position:relative}

/* ── the row ── */
.st-row{position:relative;padding:var(--st-row-y) 0}
/* rows 01–03 each take most of a screen: the solid is pinned for the run's
   length, and each row gets its own moment against it. Content centred in
   the row so the copy meets the solid at the viewport's middle. */
.st-run > .st-row{min-height:calc(var(--vh,1vh) * 62);align-content:center}
.st-row::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--border-hi);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease)}
.st-row.is-in::before{transform:none}
html.rzv-no-motion .st-row::before{transform:none;transition:none}
.st-row--01{grid-row:1}
.st-row--02{grid-row:2}
.st-row--03{grid-row:3}
.st-row--index{border-bottom:1px solid var(--border-hi)}

/* ── the key: overline label, then the numeral drawn light and quiet
   (the dashboard's .tl-num / work.css .sv-step-n treatment, scaled up) ── */
.st-key{grid-column:1/3;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px);align-self:start}
.st-key > .overline{color:var(--text)}
.st-num{font-weight:300;font-size:clamp(4rem,8.5vw,8.5rem);letter-spacing:-0.05em;line-height:.86;
  color:var(--dim);font-variant-numeric:tabular-nums;margin:0}
.st-num > span{display:inline-block;will-change:transform}

/* ── the copy ── */
.st-copy{grid-column:3/9;display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px);max-width:60ch;margin:0}
.st-copy p{margin:0;font-size:var(--fs-md);font-weight:300;letter-spacing:-0.02em;line-height:1.42;color:var(--text)}
/* word-rise masks (work.js initWordRise) — form.css's .rw recipe, verbatim;
   that sheet is not on this page. clip-path as well as overflow: Safari does
   not clip a composited child otherwise. */
.rw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em;-webkit-clip-path:inset(0);clip-path:inset(0)}
.rw-i{display:inline-block;will-change:transform}

/* ── the glass column: one host, rows 1–3, right third ── */
.st-glass{grid-column:9/-1;grid-row:1/4;position:relative;pointer-events:none;overflow:hidden;min-height:0;z-index:1}

/* ── 05 · the index (8 Sep, Haseeb: the service chip everywhere) — a wrapping
   row of chips at chips.css's item step, markup from _tools/chips.mjs. The
   ol/li stays: [data-reveal-group] staggers the <li>s in. No numerals, no
   arrows — the chip is the whole row. ── */
.st-index{grid-column:3/-1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(8px,0.9vw,14px);align-self:start}
.st-item{margin:0;padding:0}

.st-foot{padding:clamp(26px,3.4vw,44px) 0 0}
.st-foot .sv-more{grid-column:3/-1}
.st-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--st-gap)}

/* ── phones: one column; the visual above the copy, numeral small ── */
@media (max-width:760px){
  .st-grid,.st-run,.st-row,.st-foot{grid-template-columns:1fr}
  /* phones (7 Sep): the glass host spans rows 01–03 BEHIND the copy and stays
     pinned to the viewport as they scroll; the rows sit above it. */
  .st-glass{grid-column:1;grid-row:1/4;height:auto;overflow:visible;z-index:0}
  .st-row--01{grid-row:1}
  .st-row--02{grid-row:2}
  .st-row--03{grid-row:3}
  .st-run > .st-row{position:relative;z-index:1}
  .st-row{padding:clamp(36px,9vw,56px) 0}
  .st-run > .st-row{min-height:0;align-content:start}
  .st-key{grid-column:1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
  .st-num{font-size:clamp(1.6rem,6vw,2.2rem);letter-spacing:-0.04em;line-height:1}
  .st-copy{grid-column:1;margin-top:clamp(18px,5vw,28px);max-width:none}
  .st-copy p{font-size:var(--fs-md-m)}
  .st-index{grid-column:1;margin-top:clamp(18px,5vw,28px)}
  .st-foot .sv-more{grid-column:1}
}

/* 05 · the process: four numbered steps in the copy column (7 Sep). */
.st-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-step{display:grid;grid-template-columns:3.2em 1fr;gap:0 clamp(12px,1.4vw,20px);padding:clamp(18px,2.2vw,28px) 0;border-top:1px solid var(--border)}
.st-step:last-child{border-bottom:1px solid var(--border)}
.st-step-n{color:var(--dim);padding-top:.45em}
.st-step-h{margin:0 0 6px;font-weight:400;font-size:var(--fs-sub);letter-spacing:-0.02em;line-height:1.2;color:var(--text)}
.st-step p{margin:0;color:var(--muted);font-size:var(--fs-body);line-height:1.5;max-width:52ch}
.st-steps-close{margin:clamp(18px,2.2vw,28px) 0 0;color:var(--muted)}
@media (max-width:760px){ .st-step{grid-template-columns:2.6em 1fr} }

/* The lede as 3/5 + 2/5 (7 Sep, Haseeb): big line left, small text right, a nice
   amount of padding around it. Stacks on phones. */
.page-hero .st-lede{max-width:min(100%,52rem);margin-inline:0;text-align:left;display:grid;grid-template-columns:1fr;row-gap:clamp(18px,2.4vw,28px);justify-items:stretch;align-items:start;   /* 8 Sep: "Center the hero" — one centred column */
  padding:clamp(28px,4vw,64px) 0 clamp(20px,3vw,48px)}
.st-lede-big{margin:0;max-width:100%;min-width:0;font-size:var(--fs-lede);font-weight:300;letter-spacing:var(--ls-lede);line-height:var(--lh-lede);color:var(--text);text-wrap:balance}
.st-lede-small{margin:0;font-family:var(--sans,inherit);font-size:var(--fs-body);font-weight:400;letter-spacing:normal;line-height:1.6;color:var(--muted);text-wrap:pretty}   /* body text, not the lede's tight display setting (7 Sep) */
@media (max-width:760px){ .page-hero .st-lede{grid-template-columns:1fr;row-gap:18px;align-items:start;padding-top:clamp(20px,6vw,36px)} .st-lede-big{font-size:var(--fs-lede-m)} }

/* 7 Sep, Haseeb: no big numerals — the key is one mono line, "03 // Deliverables". */
.st-key{gap:0}
.st-key .overline{color:var(--text)}

/* THE PAGE RUN (7 Sep, Haseeb: "have the glass go through the whole page
   gradually getting smaller - like at the bottom of homepage"): one .glass-run
   from the hero to the footer, PIN + SHRINK in glass.js. base.css gives a run
   40vh of top padding to clear the home grid; here the hero IS the top. */
.st-page-run{padding-top:0}