/* the company About page (2026-10-03) */
.hero { padding-block: var(--sp-8) var(--section-main); }
.hero .intro { max-width: 64ch; }
.lede p + p { margin-top: var(--sp-3); }
/* the mark teaser (2026-10-04): the icon alone, large, links to the story on about-mark.html */
.mk-teaser { grid-column: 8 / 13; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: var(--radius-main); background: var(--background-2); color: var(--logo-text); align-self: center; }
.mk-teaser svg { width: auto; height: 62%; aspect-ratio: 200.15 / 300.88; }
@media (max-width: 899px) { .mk-teaser { grid-column: 1 / 13; max-width: 360px; width: 100%; margin-top: var(--sp-5); } }
.statement { margin: var(--sp-3) 0 0; max-width: 28ch; color: var(--text-heading); font-size: var(--h3); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }   /* the mission at heading size: the page has no .h3 text style, so it rendered as body text */
.who { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.who img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--link); }
.who > span { display: grid; gap: 2px; }
.who b { font-weight: 500; font-size: var(--h5); color: var(--text-heading); }
.who span span { color: var(--text); font-size: var(--text-s); }
#founder .link { display: inline-flex; margin-top: var(--sp-4); }
.hl { grid-column: 1 / 13; list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-w) solid var(--border-subtle); }
.hl li { display: grid; gap: 4px; align-content: start; padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: var(--border-w) solid var(--border-subtle); }
.hl .y { color: var(--link); letter-spacing: .12em; }
.hl .t { color: var(--text-heading); font-weight: 500; }
.hl .c { color: var(--text); font-size: var(--text-s); }
/* selected studio work: the deck's featured projects, 3 across, strip on top */
.sw { grid-column: 1 / 13; list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); }
.sw li { display: grid; gap: 4px; align-content: start; }
.sw img { width: 100%; height: auto; aspect-ratio: 864 / 160; object-fit: cover; border-radius: var(--radius-main); margin-bottom: var(--sp-2); }
.sw .y { color: var(--link); letter-spacing: .12em; }
.sw .t { color: var(--text-heading); font-weight: 500; }
.sw .c { color: var(--text); font-size: var(--text-s); }
.sw p { margin: var(--sp-1) 0 0; font-size: var(--text-s); }
.full { grid-column: 1 / 13; justify-self: start; margin-top: var(--sp-4); }
@media (max-width: 1000px) { .sw { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sw { grid-template-columns: minmax(0, 1fr); } .hl { grid-template-columns: minmax(0, 1fr); } }