/* About page */

.about { padding-bottom: var(--band); }
.about .wordmark { font-weight: 600; font-size: 24px; letter-spacing: -0.035em; }
.about .wordmark--long { font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.page-head .lede { text-wrap: pretty; }

/* How the firm works: four named columns, the name in the heading face (as the home page's specialisms) */
.ways { padding-bottom: var(--band); }
.ways-list { list-style: none; margin: 0; padding: var(--gap-rule) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-list) var(--split-gap); }
.ways-list h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.ways-list p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 1199px) { .ways-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ways-list { grid-template-columns: minmax(0, 1fr); } }
.exp-head .section-head { margin-bottom: var(--gap-block); }
.exp-head .section-head p { text-wrap: pretty; }

/* The logo row (moved here from the home page, 2026-10-01): where the founder has built */
.marks { padding: var(--strip) 0; border-top: 1px solid var(--line); }
.marks-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 20px; }
.marks-row li { display: flex; align-items: center; gap: 10px; min-height: 44px; filter: grayscale(1) brightness(1.5); opacity: 0.85; transition: filter 160ms var(--ease), opacity 160ms var(--ease); }
.marks-row li:hover, .marks-row li:focus-within { filter: none; opacity: 1; }
/* Assured Guaranty turns to its own burgundy on hover (its file is white, so the colour comes from a mask of it) */
.marks-row .ag-mark { position: relative; display: inline-flex; }
.marks-row .ag-mark::after { content: ""; position: absolute; inset: 0; background: #b1253c; -webkit-mask: url(./assets/logos/assured-guaranty-white.png) center / contain no-repeat; mask: url(./assets/logos/assured-guaranty-white.png) center / contain no-repeat; opacity: 0; transition: opacity 160ms var(--ease); }
.marks-row .ag-mark img { transition: opacity 160ms var(--ease); }
.marks-row .m-ag:hover .ag-mark::after, .marks-row .m-ag:focus-within .ag-mark::after { opacity: 1; }
.marks-row .m-ag:hover .ag-mark img, .marks-row .m-ag:focus-within .ag-mark img { opacity: 0; }
/* The two in-house products have no public site yet: they light up like the rest, and hovering says so */
.marks-row li.is-private { position: relative; }
.marks-row .soon { position: absolute; left: 0; top: calc(100% - 4px); font-family: var(--sans); font-size: var(--fs-meta); line-height: 1; color: var(--text-2); white-space: nowrap; visibility: hidden; transform: translateY(-3px); transition: transform 160ms var(--ease), visibility 0s linear 160ms; pointer-events: none; }
@media (hover: hover) { .marks-row li.is-private:hover .soon { visibility: visible; transform: none; transition: transform 160ms var(--ease), visibility 0s; } }
@media (prefers-reduced-motion: reduce) { .marks-row .soon, .marks-row .ag-mark::after, .marks-row .ag-mark img { transition: none; } }
.marks-row a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.marks-row img { height: 26px; width: auto; }
.marks-row .m-ag img { height: 35px; }
.marks-row .m-oxys img { height: 30px; }
.marks-row .wordmark { font-weight: 600; font-size: 24px; letter-spacing: -0.035em; }
.marks-row .wordmark--long { font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
/* Tablet and split-screen widths: the row will not fit on one line, so it splits into two even rows of three
   instead of wrapping one mark onto a line of its own. */
@media (min-width: 761px) and (max-width: 1199px) {
  .marks-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--split-gap); }
}
/* Product wordmarks: QuantMechanix in its own app's face; in SGNL FOCUS the orange ring is the O */
.marks-row .wm-qm { font-family: 'Space Grotesk', var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0; }
.marks-row .wm-sgnl { display: inline-block; font-family: 'Space Grotesk', var(--sans); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; color: var(--text); }
.marks-row .wm-sgnl .ring-o { display: inline-block; width: 0.82em; height: 0.82em; margin: 0 0.02em; vertical-align: -0.1em; }
/* Phones: two marks per line, each scaled to fit its own column rather than cropped.
   The row is a size container, so 100cqw is its width and --cell is one column. Every mark is capped at a share of
   --cell (the divisors are the mark's width over its height or font size, plus a little slack), so a mark never
   leaves its column and neighbours keep at least the 24px column gap. Above about 425px the caps do nothing. */
@media (max-width: 760px) {
  .marks-row { --mk-gap: 24px; container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--mk-gap); }
  .marks-row li { --cell: calc(50cqw - var(--mk-gap) / 2); }
  .marks-row .wordmark { font-size: min(21px, calc(var(--cell) / 5.1)); }
  .marks-row img { height: min(22px, calc(var(--cell) / 7.6)); }
  .marks-row .m-ag img { height: min(30px, calc(var(--cell) / 2.8)); }
  .marks-row .m-oxys img { height: min(25px, calc(var(--cell) / 4.4)); }
  .marks-row .qm { gap: 0.53em; font-size: min(19px, calc(var(--cell) / 9.3)); }
  .marks-row .qm img { height: 1.16em; }
  .marks-row .qm .wm-qm { font-size: 12px; }
  .marks-row .wm-sgnl { font-size: min(17px, calc(var(--cell) / 6.4)); }
}
/* QuantMechanix reads a touch small beside the other marks: 10% larger, at every width */
.marks-row li.qm a > img, .marks-row li.qm a > .wm-qm { zoom: 1.10; }
.marks + .about { padding-top: 0; }

/* The experience behind the firm, entry by entry */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-block) var(--split-gap); }
.about-grid article { padding-top: var(--pad-row); border-top: 1px solid var(--line); }
.about-grid h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 32px; font: inherit; }
/* logos stay plain white, like the wordmarks beside them; they are headings, not links, so nothing changes on hover */
.about-grid h3 img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.about-grid ul { list-style: none; margin: var(--gap-sf) 0 0; padding: 0; display: grid; gap: var(--gap-list); }
.about-grid li { font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
/* the one or two facts a buyer scans for in each entry, lifted from grey to the page's full text colour (same weight, no bold) */
.about-grid .key { font-weight: 400; color: var(--text); }
/* Terminal function names: words, so Geist, picked out by weight */
.about-grid .fn { font-family: var(--sans); font-weight: 500; font-size: inherit; color: var(--text); }
.about-foot { margin-top: var(--gap-foot); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 40px; }
.about-foot p { font-size: 13px; color: var(--text-3); }
@media (max-width: 760px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-grid h3 { flex-direction: column; align-items: flex-start; gap: 6px; }
}