/* ============================================================
   INTRADCO — BASE & PRIMITIVE UTILITIES
   Light reset + a few brand primitives (eyebrow, bullet list,
   chevron field, grain) that recur across products. Components
   should lean on tokens; these utilities cover raw HTML mocks.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--surface-page);
  color: var(--text-strong);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display headline ---- */
.itd-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* ---- Section eyebrow (small wide caps) ---- */
.itd-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-ink);
}
.itd-eyebrow--on-dark { color: var(--color-accent); }

/* ---- Editorial italic accent (Lora) ---- */
.itd-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-semibold);
}

/* ---- Highlight: ink text on a solid green/white block ---- */
.itd-mark { background: var(--green); color: var(--ink); padding: 0.04em 0.18em; }
.itd-mark--white { background: var(--white); color: var(--ink); }

/* ---- Bullet list with the signature small green square ---- */
.itd-list { list-style: none; margin: 0; padding: 0; }
.itd-list li {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-body);
  font-weight: var(--fw-medium);
  padding-left: 18px;
  position: relative;
  margin-bottom: 11px;
}
.itd-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: var(--bullet-size); height: var(--bullet-size);
  background: var(--green);
}

/* ---- Brand graphic fields ---- */
.itd-chevrons { background-image: var(--chevrons); background-size: 34px 34px; }
.itd-grain { background-image: var(--grain); background-size: 150px; opacity: 0.05; mix-blend-mode: overlay; }

/* ---- Reading column ---- */
.itd-wrap { max-width: var(--container); margin: 0 auto; }