/* ============================================================================
 * unikode.ai /about/ : two-focus, graph removed, native minimalist sibling.
 * Reuses the .home shell, .hero cluster, .section-kicker, .site-head/.site-foot,
 * .btn--primary, .hero-textlink from site.css. New primitives are token-only and
 * visible-by-default. One neutral charcoal beat (S3) via --home-ink background
 * + --home-surface text (no --md3 inverse tokens; those resolve to a bluish slate).
 *
 * Authoring rules: design tokens + color-mix(tokens) only (no raw color); no
 * !important on visual properties; no inline styles/scripts; sizes via clamp();
 * all content renders visible-by-default (no JS-gated visibility).
 * ========================================================================== */

body.about {
  --about-section-pad: clamp(72px, 13vh, 150px);
  --about-gap: clamp(18px, 3.4vh, 36px);
  --about-measure: 42rem;
  /* Monochrome only: charcoal focus ring on this page, never the blue accent. */
  --uk-color-focus-ring: var(--home-ink);
}

/* The hero keeps the native two-column .home layout (copy + the lattice-cube
 * graph visual); no single-column override here. */

/* Lattice-cube sizing now lives in site.css (.home .graph) so the graph is
 * consistent across every page (home + about); the about page inherits it.
 * Only the about hero's phone rhythm is tuned here. */

/* Tighten the about hero's vertical rhythm on phones so the larger cube and the
 * copy compose as one intentional first screen. */
@media (max-width: 600px) {
  body.about .hero {
    gap: 20px;
    padding-block: 24px 28px;
  }
}

/* --- S2 Focus 1: light statement movement --------------------------------- */
body.about .about-focus {
  width: 100%;
  max-width: var(--home-shell);
  margin-inline: auto;
  padding: var(--about-section-pad) var(--home-edge);
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
}

body.about .about-focus__head {
  margin: 0;
  font-family: var(--uk-font-family-sans);
  font-weight: var(--uk-font-weight-light);
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: var(--uk-letter-spacing-normal);
  color: var(--home-ink);
  text-wrap: balance;
  max-width: 20ch;
}

body.about .about-focus__body {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: var(--home-muted);
  max-width: var(--about-measure);
}

/* G2 sub-block: separated by air + a hairline, one step quieter than the head */
body.about .about-focus__sub {
  margin-top: clamp(20px, 3vh, 40px);
  padding-top: clamp(24px, 3.4vh, 44px);
  border-top: 1px solid var(--home-line);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 18px);
}

body.about .about-focus__subhead {
  margin: 0;
  font-family: var(--uk-font-family-sans);
  font-weight: var(--uk-font-weight-light);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.14;
  letter-spacing: var(--uk-letter-spacing-normal);
  color: var(--home-ink);
  text-wrap: balance;
  max-width: 22ch;
}

body.about .about-focus__subbody {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: var(--home-muted);
  max-width: var(--about-measure);
}

/* --- S3 Real customers: the ONE neutral charcoal beat --------------------- */
/* Neutral charcoal/black band: background = --home-ink, text = --home-surface.
 * No --md3 inverse tokens here (those resolve to the bluish slate). All tints
 * derive from --home-surface via color-mix so the band stays neutral ink. */
body.about .about-clients {
  --about-dark-fg: var(--home-surface);
  width: 100vw;
  margin-left: calc(50% - 50vw); /* full-bleed escape from the shell */
  background: var(--home-ink);
  color: var(--about-dark-fg);
  padding-block: clamp(84px, 16vh, 170px);
}

body.about .about-clients__inner {
  max-width: var(--home-shell);
  margin-inline: auto;
  padding-inline: var(--home-edge);
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
}

body.about .about-clients__head {
  margin: 0;
  font-family: var(--uk-font-family-sans);
  font-weight: var(--uk-font-weight-light);
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.1;
  letter-spacing: var(--uk-letter-spacing-normal);
  color: var(--about-dark-fg);
  text-wrap: balance;
  max-width: 18ch;
}

body.about .about-clients__lead {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: color-mix(in srgb, var(--about-dark-fg) 78%, transparent);
  max-width: var(--about-measure);
}

/* sector/detail rows: restrained two-part list, faint neutral hairlines */
body.about .about-clients__list {
  list-style: none;
  margin: clamp(12px, 2vh, 24px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 46rem;
}

body.about .about-clients__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 4vw, 40px);
  padding-block: var(--uk-space-20, 20px);
  border-top: 1px solid color-mix(in srgb, var(--about-dark-fg) 16%, transparent);
}

body.about .about-clients__row:first-child {
  border-top: 0;
}

body.about .about-clients__sector {
  flex: 0 0 auto;
  min-width: 11rem;
  font-family: var(--uk-font-family-mono);
  font-size: 13px;
  font-weight: var(--uk-font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--about-dark-fg) 60%, transparent);
}

body.about .about-clients__detail {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--about-dark-fg);
  max-width: 34rem;
}

/* on-dark kicker variant (mono micro-label inside the charcoal beat) */
body.about .section-kicker--on-dark {
  color: color-mix(in srgb, var(--about-dark-fg) 60%, transparent);
}

/* --- S4 Close ------------------------------------------------------------- */
body.about .about-close {
  width: 100%;
  max-width: var(--home-shell);
  margin-inline: auto;
  padding: var(--about-section-pad) var(--home-edge);
  border-top: 1px solid var(--home-line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--about-gap);
}

body.about .about-close__head {
  margin: 0;
  font-family: var(--uk-font-family-sans);
  font-weight: var(--uk-font-weight-light);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: var(--uk-letter-spacing-normal);
  color: var(--home-ink);
  text-wrap: balance;
  max-width: 20ch;
}

body.about .about-close__body {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.62;
  color: var(--home-muted);
  max-width: var(--about-measure);
}

body.about .about-close__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
}

/* --- Responsive collapse -------------------------------------------------- */
@media (max-width: 640px) {
  body.about .about-clients__row {
    flex-direction: column;
    gap: 4px;
  }
  body.about .about-clients__sector {
    min-width: 0;
  }
}