/* ============================================================
   99creatix About
   Page-specific layer. The shared design system (.c99) already
   carries the tokens, chrome, bands and buttons; this holds only
   what is unique to this page.
   Selectors are doubled (.c99.c99-about) so they outrank the
   homepage's .c99 rules, which print later in the site custom CSS.
   ============================================================ */

/* ---- values that differ from the homepage build ---- */
.c99.c99-about .display { font-size: clamp(2.4rem, 7.5vw, 5.6rem); line-height: 0.88; }
.c99.c99-about .opening .hero { padding-block: clamp(2.75rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem); }
.c99.c99-about .hero__eyebrow { padding-bottom: 1.5rem; }
.c99.c99-about .hero h1 { margin-bottom: 1.4rem; }
.c99.c99-about .hero__sub { max-width: 54ch; margin: 0; }
.c99.c99-about .band__head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.c99.c99-about .closer p { max-width: 46ch; }
.c99.c99-about .nav__mark { text-decoration: none; color: inherit; }

/* ---- the facts: three figures, not the homepage's four ---- */
.c99.c99-about .figs { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .c99.c99-about .figs { grid-template-columns: 1fr; }
  .c99.c99-about .figs > div + div {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--rule);
  }
}

/* ---- two-column prose ---- */
.c99.c99-about .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.c99.c99-about .duo p {
  color: var(--ink-mute); margin: 0;
  font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.65;
}
.c99.c99-about .duo p + p { margin-top: 1rem; }
@media (max-width: 820px) { .c99.c99-about .duo { grid-template-columns: 1fr; } }

/* ---- the 99 numeral: the page's signature moment ---- */
.c99.c99-about .ninenine {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(6rem, 18vw, 14rem); line-height: 0.85;
  letter-spacing: -0.06em; color: var(--blue);
  font-variant-numeric: tabular-nums; user-select: none;
}
.c99.c99-about .ninenine small {
  display: block; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 1rem;
}

/* ---- how your project runs, on light ground ---- */
.c99.c99-about .run { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.c99.c99-about .run > div { padding: 1.5rem 1.5rem 1.75rem 0; }
.c99.c99-about .run > div + div { border-left: 1px solid var(--rule); padding-left: 1.5rem; }
.c99.c99-about .run .k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 0.9rem;
}
.c99.c99-about .run h3 { font-size: 1.22rem; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 0.7rem; }
.c99.c99-about .run p { margin: 0; color: var(--ink-mute); font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 820px) {
  .c99.c99-about .run { grid-template-columns: 1fr; }
  .c99.c99-about .run > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
}

/* ---- the promises, on the dark stage ---- */
.c99.c99-about .cols3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--panel-rule); }
.c99.c99-about .cols3 > div { padding: 1.5rem 1.5rem 1.75rem 0; }
.c99.c99-about .cols3 > div + div { border-left: 1px solid var(--panel-rule); padding-left: 1.5rem; }
.c99.c99-about .cols3 .k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--blue-l); display: block; margin-bottom: 0.9rem;
}
.c99.c99-about .cols3 h3 { font-size: 1.22rem; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 0.7rem; }
.c99.c99-about .cols3 p { margin: 0; color: var(--panel-mute); font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 820px) {
  .c99.c99-about .cols3 { grid-template-columns: 1fr; }
  .c99.c99-about .cols3 > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--panel-rule); }
}