/* ==========================================================================
   pages.css — page-scoped compositions (PROJECT classes, all new names
   verified absent from classes.json). Every value resolves to exported
   variables (variables.css / palette.css). Structure stays on the exported
   utility classes in markup; this file only adds what utilities can't do.
   ========================================================================== */

/* ---- home hero (PROJECT .hero*) ------------------------------------------ */
.hero {
  position: relative;
  background:
    radial-gradient(70rem 44rem at 88% -10%, var(--primary-t-1), transparent 65%),
    var(--background);
  border-block-end: var(--border--standard);
}
.hero__lead {
  max-inline-size: 76ch;
  color: var(--body);
  text-wrap: pretty;
}
.hero__rule {
  inline-size: var(--space-64);
  block-size: 0.2rem;
  background-color: var(--primary);
}

/* ---- stat figures (PROJECT .stat*) --------------------------------------- */
.stat__num {
  font-family: var(--proj-font-display);
  font-size: var(--h2);
  line-height: var(--leading-none);
  color: var(--primary);
}

/* ---- selected work (PROJECT .work*) -------------------------------------- */
.work__card { transition: box-shadow 150ms ease; }
.work__card:hover { box-shadow: var(--shadow-3); }

/* ---- approach split (PROJECT .approach*) ---------------------------------- */
.approach__panel {
  padding: var(--space-32);
  background-color: var(--surface);
  border: var(--border--standard);
  border-radius: var(--radius-16);
}

/* ---- proof / expectations (PROJECT .proof*) -------------------------------- */
.proof__note {
  border-inline-start: 0.4rem solid var(--secondary);
  background-color: var(--secondary-t-1);
}

/* ---- insights (PROJECT .insights*) ---------------------------------------- */
.insights__featured {
  background:
    linear-gradient(120deg, var(--secondary-t-2), transparent 60%),
    var(--surface);
  border: var(--border--standard);
  border-radius: var(--radius-24);
}

/* ---- CTA band inner -------------------------------------------------------- */
.cta-band__title { color: var(--light); }
.cta-band .eyebrow { color: var(--primary-l-5); }
.cta-band .eyebrow::before { background-color: var(--primary-l-5); }
.cta-band__text { color: var(--dark-l-7); }

/* ---- dark surface blocks (about quote, contact rail) ----------------------- */
.ink-block {
  background:
    radial-gradient(60rem 40rem at -10% 110%, var(--secondary-t-2), transparent 60%),
    var(--dark-d-1);
  border-radius: var(--radius-24);
  color: var(--light);
}
.ink-block .card {
  background-color: transparent;
  border-color: var(--dark-l-2);
  color: var(--light);
}
.ink-block .card__title { color: var(--light); }

/* ---- footer grid ------------------------------------------------------------ */
.footer__brand { color: var(--white); }
.footer__heading {
  font-family: var(--proj-font-body);
  font-size: var(--text-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-l-6);
}
.footer__legal { font-size: var(--text-12); color: var(--dark-l-5); }

/* ---- case study (PROJECT .case*) -------------------------------------------- */
.case__spec dt { font-weight: 600; color: var(--heading); }
.case__spec dd { margin: 0; color: var(--body); }
.gallery__item {
  border-radius: var(--radius-16);
  overflow: clip; /* exported utility also on markup */
}

/* ---- 404 --------------------------------------------------------------------*/
.error__code {
  font-family: var(--proj-font-display);
  font-size: var(--scale-192);
  line-height: var(--leading-none);
  color: var(--primary);
}

/* ---- print-ish helpers for form page density --------------------------------*/
.narrow { max-inline-size: 64ch; }