/* Refined LAB-03 · 2026-09-09 */
/* Services & Approach composition. Type, cards and section rhythm are shared. */
.about-hero{min-height:0;padding-block:var(--space-hero);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:var(--gap);row-gap:var(--space-label)}
.about-hero>.kicker{grid-column:1/span 6;grid-row:1}
.about-hero h1{grid-column:1/-1;grid-row:2;font-size:var(--type-hero-heading);max-width:none}
.about-hero__lead{grid-column:1/span 6;grid-row:3;align-self:end;margin-block-start:var(--space-title-copy);max-width:var(--copy-measure);font-size:var(--type-lead);color:var(--ink-soft)}
.facts{padding-block:var(--space-heading-content)}
.facts-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-row) var(--gap)}
.facts-grid article{grid-column:span 3;padding-block-start:1rem;border-top:1px solid var(--ink)}
.facts-grid strong{display:block;font-size:var(--type-small-heading);font-weight:400;line-height:var(--leading-card);letter-spacing:-.035em}
.facts-grid p{margin-block-start:var(--space-card);color:var(--gray);font-size:var(--type-meta)}
.lab-system .approach-grid{--info-span:3;--info-rows:4}
.lab-system .approach-step__baseline{color:var(--gray);font-size:var(--type-meta)}
.client-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.client-mark{min-height:clamp(9rem,14vw,14rem);padding:clamp(1.5rem,3vw,3rem);display:grid;place-items:center;border-top:1px solid var(--line)}
.client-mark img{width:100%;height:100%;max-height:7rem;object-fit:contain;filter:grayscale(1)}
a.client-mark{border-radius:var(--radius)}
a.client-mark:active{background:var(--ink)}
a.client-mark:active img{filter:grayscale(1) invert(1)}
a.client-mark:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media(hover:hover) and (pointer:fine){a.client-mark:hover{background:var(--ink)}a.client-mark:hover img{filter:grayscale(1) invert(1)}}
.lab-system .services-index{--info-span:3;--info-rows:2}
@media(max-width:1100px) and (min-width:681px){
  .about-hero__lead{grid-column:1/span 8}
  .facts-grid article{grid-column:span 6}
  .lab-system :is(.approach-grid,.services-index){--info-span:6}
}
@media(max-width:680px){
  .about-hero{min-height:0;grid-template-columns:repeat(4,minmax(0,1fr))}
  .about-hero>.kicker,.about-hero h1,.about-hero__lead{grid-column:1/-1}
  .facts-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts-grid article{grid-column:1/-1}
  .lab-system :is(.approach-grid,.services-index){--info-span:4}
  .client-grid{grid-template-columns:1fr}
  .client-mark{min-height:11rem}
}