/* ============================================================
   ABOUT PAGE ONLY
   ------------------------------------------------------------
   About was carrying the services grid and the client wall as
   character-identical copies of the Home page. Two pages saying
   the same thing in the same shape reads as padding, so both
   blocks are rebuilt here as different objects holding the same
   facts.

   Services  -> the order a job actually runs, as a numbered
                sequence. Home answers "is the part I need on the
                list"; About answers "what happens, and when".
   Clients   -> grouped by what each name IS, instead of one flat
                run of seven. Home has the wall and the count.

   Loaded only by about.html, after site.css. No rule here may
   affect any other page.
   ============================================================ */

/* ---------- services as a sequence ---------- */

.flow{
  margin-top:clamp(2.2rem,5vh,3.4rem);
  border-top:1px solid var(--line-2);
}

.step{
  display:grid;
  /* The 4.5rem number column is gone with the numbers themselves; leaving it
     in reserved an empty indent down the whole list. */
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 2.4rem;
  align-items:baseline;
  gap:clamp(1rem,2.4vw,2.2rem);
  padding:clamp(1.1rem,2.4vh,1.7rem) 0;
  border-bottom:1px solid var(--line-2);
  position:relative;
}

.step-t{
  margin:0;
  font-family:var(--disp);
  font-variation-settings:"wdth" 98,"wght" 680;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  line-height:1.06;letter-spacing:-.022em;
  text-transform:uppercase;color:#fff;
  text-wrap:balance;
}

.step-d{
  margin:0;color:rgba(255,255,255,.72);
  font-size:clamp(.9rem,1.05vw,1rem);line-height:1.55;
  text-wrap:pretty;
}

.step-i{
  width:26px;height:26px;justify-self:end;align-self:center;
  fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  opacity:.5;transition:opacity .4s ease,stroke .4s ease;
}
.step:hover .step-i{opacity:1;stroke:var(--org)}

/* the accent runs along the foot of the row on hover, matching the
   services grid on Home so the two blocks still feel like one site */
.step::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.16,.84,.3,1);
}
.step:hover::after{transform:scaleX(1)}

@media (max-width:820px){
  /* The icons come off entirely here. A 26px column at this width left the
     long titles crowding it, and every fix for that was a trade: shrink the
     type, or let the icon drift off centre. The icons are decoration on a row
     that already carries a number, a title and a description, so the honest
     answer is to drop them and give the title the full width. */
  .step{
    grid-template-columns:minmax(0,1fr);
    row-gap:.45rem;
  }
  .step-t{grid-column:1;grid-row:1}
  .step-i{display:none}
  .step-d{grid-column:1;grid-row:2}
}

/* ---------- clients, grouped by what they are ---------- */
/* First pass used three equal columns. The groups hold 5, 7 and 1 names, so
   the third column was one line against seven and the block read as mostly
   empty. Rows carry uneven groups without leaving holes. */

.roster{
  margin-top:clamp(2rem,4.5vh,3rem);
  border-top:1px solid var(--line-2);
}
.roster-row{
  display:grid;
  grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.8rem);
  align-items:baseline;
  padding:clamp(1.05rem,2.3vh,1.6rem) 0;
  border-bottom:1px solid var(--line-2);
}
.roster-k{
  margin:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim-2);
}
.roster-v{
  margin:0;
  font-size:clamp(1rem,1.45vw,1.28rem);
  line-height:1.5;color:rgba(255,255,255,.94);
  font-variation-settings:"wdth" 100,"wght" 520;
}
.roster-v .sep{color:var(--dim-2);padding:0 .55rem}

@media (max-width:720px){
  .roster-row{grid-template-columns:minmax(0,1fr);gap:.5rem}
}

@media (prefers-reduced-motion:reduce){
  .step,.step::after,.step-i{transition:none}
}

/* ---------- the opening spread ---------- */
/* Replaces the old stacked plate + two paragraphs, and drops the section
   header that duplicated the page H1 directly above it. */

.lede{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center;
  margin-top:clamp(2rem,5vh,3.2rem);
}

.lede-art{position:relative;margin:0;overflow:hidden;border-radius:6px;background:#101012}
.lede-art img{width:100%;height:auto;display:block;filter:saturate(.9) contrast(1.04)}
.lede-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%)}
.lede-art .tag{position:absolute;left:1rem;bottom:.9rem;z-index:2}

.lede-claim{
  margin:0 0 1.1rem;
  font-family:var(--disp);
  font-variation-settings:"wdth" 98,"wght" 700;
  font-size:clamp(1.3rem,2.5vw,2.05rem);
  line-height:1.06;letter-spacing:-.028em;
  color:#fff;text-wrap:balance;
}
.lede-copy .body{margin-top:.9rem}

@media (max-width:900px){
  .lede{grid-template-columns:minmax(0,1fr);gap:1.4rem}
}

/* ---------- ground for the client section ---------- */
/* This section lost its photograph when every image on the site was cut to a
   single appearance, and flat black under the existing veil read as unfinished.
   Rather than recycle another still, the ground is drawn: the 115deg is the
   same angle as the clapper bar on the Productions slate cards, so the two
   pages share a motif, and the wash is her own two accent colours. Pure CSS,
   no request, no bytes.

   Sits at z-index 0, under the .veil at 1 and the .wrap at 2. The veil runs
   0.92 dark at the top and 0.34 through the middle, so this reads clearly in
   the band where the names actually sit. */
#clients::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.032) 0 44px,
      rgba(255,255,255,0) 44px 88px),
    radial-gradient(900px 520px at 80% 14%, rgba(228,25,126,.14), transparent 62%),
    radial-gradient(760px 460px at 8% 92%, rgba(245,130,31,.11), transparent 60%);
}

/* ---------- client names sweep in ---------- */
/* The row itself already carries .rev, which fades the whole line at once.
   Staggering the names inside it makes the list read as a roll call rather
   than a block of text appearing. Same idea as the wall on Home, except that
   one is driven from site.js and this is pure CSS, so About needs no script.

   nth-child counts the separators too, hence the every-other rhythm: the
   slashes travel with the names rather than sitting there waiting. */
.roster-v > *{
  display:inline-block;
  opacity:0;transform:translateY(9px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,.84,.3,1);
}
.roster-row.in .roster-v > *{opacity:1;transform:none}
.roster-v > *:nth-child(1){transition-delay:0.000s}
.roster-v > *:nth-child(2){transition-delay:0.045s}
.roster-v > *:nth-child(3){transition-delay:0.090s}
.roster-v > *:nth-child(4){transition-delay:0.135s}
.roster-v > *:nth-child(5){transition-delay:0.180s}
.roster-v > *:nth-child(6){transition-delay:0.225s}
.roster-v > *:nth-child(7){transition-delay:0.270s}
.roster-v > *:nth-child(8){transition-delay:0.315s}
.roster-v > *:nth-child(9){transition-delay:0.360s}
.roster-v > *:nth-child(10){transition-delay:0.405s}
.roster-v > *:nth-child(11){transition-delay:0.450s}
.roster-v > *:nth-child(12){transition-delay:0.495s}
.roster-v > *:nth-child(13){transition-delay:0.540s}
.roster-v > *:nth-child(14){transition-delay:0.585s}
.roster-v > *:nth-child(15){transition-delay:0.630s}

@media (prefers-reduced-motion:reduce){
  .roster-v > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- page head ----------
   The shared .ph-t clamp is sized for longer headings on the other pages, and
   at 6vw it broke this one over three lines with the width to spare. About only
   (this sheet loads nowhere else), so no other page head moves. */
.pagehead .ph-t{font-size:clamp(1.8rem,3.55vw,3.3rem)}
/* No nowrap. Forcing one line overflowed the wrap by up to 99px at 1440, and
   one line was never the ask: the heading was three lines and needed to be two.
   The smaller clamp above does that on its own, with balance left to even them. */

/* Sits under the section heading: the list is what we cover, not a fixed
   package, and that has to be said before the seven rows imply otherwise. */
.sec-note{
  margin:.9rem 0 0;max-width:62ch;
  color:rgba(255,255,255,.68);
  font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.55;
  text-wrap:pretty;
}