/* Type scale — Archivo throughout (weights 300/400/500/600), values taken 1:1 from
   the Figma homepage. Display sizes scale with the viewport via --u (tokens.css) and cap
   at their mock size; UI text (labels, captions, buttons) grows on a gentler ramp,
   --ui-label (tokens.css). */

body {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 { font-weight: 300; letter-spacing: .01em; }

/* ---- Display — Archivo Light with the gradient fill ------------------------------ */

/* Full scale kept even where a step is currently unclaimed (e.g. .display-2/-4/-5, .h6,
   .h6-light, sections.css .stack-* gaps): the unused steps are what make the used sizes
   read as one system. */

.display {
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: transparent;
  background-image: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.display-1 { font-size: var(--wordmark-fs); letter-spacing: -0.035em; } /* footer wordmark */
.display-2 { font-size: var(--fs-display-2); }                          /* team marquee: one centred screen */
.display-3 { font-size: var(--fs-display-3); }                          /* Signature works */
.display-4 { font-size: var(--fs-display-4); }                          /* What we do     */
.display-5 { font-size: var(--fs-display-5); line-height: 1; }          /* Built on trust */
.display-6 { font-size: var(--fs-display-6); line-height: 1.08; letter-spacing: var(--track-display); } /* hero — scales by the smaller of width/height */
.display-8 { font-size: var(--fs-display-8); }                            /* Let's talk     */

/* ---- Headings ------------------------------------------------------------------- */

.h3 { font-size: var(--fs-h3); font-weight: 300; line-height: 1.5; letter-spacing: var(--track-head); } /* featured quote */
.h4 { font-size: var(--fs-h4); font-weight: 300; line-height: 1.4; letter-spacing: var(--track-head); color: var(--ink-2); } /* stats */
.h5 { font-size: var(--fs-h5); font-weight: 300; line-height: 1.4; letter-spacing: var(--track-head); } /* project title */
.h6 { font-size: var(--fs-h6); font-weight: 300; line-height: 1.4; letter-spacing: .01em; } /* service title */
.h6-light { font-size: var(--fs-h6); font-weight: 300; line-height: 1.2; letter-spacing: 0; } /* tabs */

/* ---- List — the What-we-do rows (services, integrations, the stack) ------------- */

/* Off the heading steps on purpose: the whole subsection stands in one column at once, so
   each is sized to fit its count of lines, not to a heading rank (sections.css .what-row). */
.list-lg { font-size: var(--fs-list-lg); font-weight: 300; line-height: 1.08; letter-spacing: var(--track-head); } /* services (5, up to 8 lines) */
.list    { font-size: var(--fs-list); font-weight: 300; line-height: 1.08; letter-spacing: var(--track-head); } /* integrations (8, one line each) */
.list-xl { font-size: var(--fs-list-xl); font-weight: 300; line-height: 1.08; letter-spacing: var(--track-head); } /* the stack's one headline */

/* ---- Body ----------------------------------------------------------------------- */

/* Body copy tracks the same --u unit as the headings: a flat 18px body next to a title
   scaling up to 271px would read as a mock stretched onto a 27" screen, not a design made
   for it. The px value is the floor, so nothing below the reference width changes. */
.body-lg { font-size: var(--fs-body); font-weight: 300; line-height: 1.6; letter-spacing: var(--track-body); color: var(--text); }
.body    { font-size: var(--fs-body); font-weight: 300; line-height: 1.6; letter-spacing: var(--track-body); color: var(--ink); }
.body-sm { font-size: var(--fs-body-sm); font-weight: 300; line-height: 1.6; letter-spacing: var(--track-body); color: var(--ink); }

/* ---- Small / UI ----------------------------------------------------------------- */

/* The decorative slash is part of the eyebrow style, not the copy. */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-cap); /* 12px up to 1512, 13.2px at 2560 */
  font-weight: 400;
  line-height: normal;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.eyebrow::before {
  content: "/";
  margin-right: var(--slash-gap); /* the air to the label */
  font-size: var(--slash-fs);
  vertical-align: var(--slash-y);
}

/* Person names, button labels */
.label {
  font-size: var(--fs-cap);
  font-weight: 600;
  line-height: normal;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

/* One-line steps: their leading is 1 because each stands on a single line (a role, a link,
   a label), where it only sets the box's height. A use that wraps gives itself a leading of
   1.3 or more at its own rule (.hero-partners > .small, .quote-client): raising it here
   would move every one-line use by a few pixels for no gain in reading. */
.caption    { font-size: var(--fs-small); font-weight: 300; line-height: 1;   letter-spacing: var(--track-body); color: var(--muted); }
.caption-xl { font-size: var(--fs-small); font-weight: 300; line-height: 1;   letter-spacing: var(--track-body); }
.small      { font-size: var(--fs-small); font-weight: 300; line-height: 1;   letter-spacing: var(--track-body); color: var(--muted); }
.nav        { font-size: var(--fs-small); font-weight: 500; line-height: 1;   letter-spacing: var(--track-body); color: var(--ink); }