/* Homepage About (A136, after Amotax; Ryan picked it over the fill statement, archive/home-about-a-fill-statement-2026-11-07/).
   The site eyebrow and a heading that fills in letter by letter as it scrolls up (home-about.js), three numbers on lines
   stepping down, a smaller fact row, a tall rounded photo on the right; then our client logos drifting sideways under a
   line that runs edge to edge (the homepage's inline script), fading out at both ends. Numbers are counts we can check
   (see the note in index.html). */

/* The section and the logo band fill one screen together, from under the 76px menu bar to the bottom of the window, so
   when the band reaches the bottom of the screen the hero has scrolled away. The section centres in what's left above
   the band; its padding stays on the section token. */
.ha-screen { display: flex; flex-direction: column; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); }
.hb { flex: 1 0 auto; display: grid; align-content: center; }
.hb-grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 34fr); column-gap: 6%; align-items: stretch; }
.hb-head { margin-bottom: var(--head-gap); }
.hb-label { display: flex; margin: 0 0 24px; }   /* the site eyebrow (demos/eyebrow.css), as on every section */
#about .hb-title { margin: 0; max-width: none; color: #fff; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.02; text-wrap: balance; }
/* one colour, as on Amotax: home-about.js fills it in letter by letter as it scrolls up (from 25% white) */
.hb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin: 0; }
.hb-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 24px; border-top: 1px solid #3a3a44; }   /* DESIGN faint: visible on the canvas (was the near-invisible #24242b) */
.hb-stat:nth-child(2) { margin-top: clamp(24px, 3.5vw, 50px); }   /* Amotax's stepped columns; all three lines the same colour (Ryan: no coloured divider) */
.hb-stat:nth-child(3) { margin-top: clamp(48px, 7vw, 100px); }
.hb-stat dd { margin: 0; color: #fff; font: 800 clamp(56px, 6vw, 88px)/1 "Sofia Sans Extra Condensed", "Satoshi", sans-serif; letter-spacing: -.01em; }
.hb-stat dt { margin-top: 10px; color: #b8b8b8; font: 400 18px/1.5 Inter, system-ui, sans-serif; }
.hb-more { display: flex; align-items: stretch; gap: 32px; margin-top: clamp(40px, 4.2vw, 60px); }
.hb-more p { align-self: center; margin: 0; max-width: 26ch; color: #d0d0d6; font: 500 16px/1.5 Inter, system-ui, sans-serif; }
.hb-more__fig { align-self: stretch !important; display: flex; align-items: center; gap: 12px; padding-left: 32px; border-left: 1px solid #3a3a44; }   /* the divider runs the row's full height */
.hb-more__fig b { color: var(--accent); font: 800 48px/1 "Sofia Sans Extra Condensed", "Satoshi", sans-serif; }
.hb-more__fig span { max-width: 14ch; }
.hb-pic { margin: 0; overflow: hidden; border-radius: 24px; border: 1px solid #2d2d38; background: #111115; }
.hb-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }

/* The logo band: a line edge to edge above it, no padding of its own (WEBSITE-RULES 10: the sections around it give the space) */
.hb-logos { padding: 0; border-top: 1px solid #24242b; }
.logos__viewport { position: relative; overflow: hidden; margin-inline: var(--gutter); padding-block: 44px; }
.logos__viewport::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* Lanes' 6% fades into the page at both ends */
  background: linear-gradient(90deg, var(--bg, #0a0a0a), transparent 6%, transparent 94%, var(--bg, #0a0a0a)); }
.logos__track { display: flex; width: max-content; }
.logos__row { display: flex; align-items: center; gap: 96px; padding-right: 96px; }   /* Ryan: one or two fewer logos in view (about 9 at 1520px) */
/* our client marks are badges, not Lanes' one-line wordmarks, so they sit at about two-thirds of their old size */
.logo { display: block; flex: none; width: auto; height: calc(var(--h, 44px) * .66); opacity: .55; transition: opacity .3s; }
.logo:hover { opacity: .9; }

@media (prefers-reduced-motion: reduce) { .logo { transition: none; } }

@media (max-width: 900px) {
  .hb-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .hb-pic { aspect-ratio: 4 / 3; }   /* under the text when stacked (WEBSITE-RULES 11) */
}
@media (max-width: 760px) {
  .logos__row { gap: 44px; padding-right: 44px; }
  .logo { height: calc(var(--h, 44px) * .56); }
}
@media (max-width: 600px) {
  #about .hb-title { font-size: 28px; }
  .logos__viewport { padding-block: 32px; }
  .hb-stats { grid-template-columns: 1fr; row-gap: 28px; }
  .hb-stat:nth-child(n) { margin-top: 0; }
  .hb-more { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hb-more__fig { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid #3a3a44; align-self: stretch; }
}