/* =========================================================
   TYPE SYSTEM — loaded last, so it is the single source of truth for fonts.
   Three families, each with one job (tied to the Digitally Driven logo):
     Satoshi         headlines        400 (Regular) everywhere
     Montserrat      labels / caps    600
     Inter           reading text     400 · 600
   ========================================================= */
:root {
  --font-display: "Satoshi", "Inter", sans-serif;
  --font-label: "Montserrat", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display: var(--font-display);          /* older rules reference --display */

  /* Scale */
  --fs-display: clamp(64px, 13.4vw, 230px);  /* hero word, CTA, footer wordmark  */
  --fs-section: clamp(36px, 4.4vw, 68px);  /* every section heading */
  --fs-row: clamp(34px, 4.6vw, 80px);      /* service rows, project names */
  --fs-card: clamp(21px, 1.8vw, 28px);     /* card / panel titles */
  --fs-body-l: 17px;                       /* intro paragraphs */
  --fs-body: 15px;                         /* standard paragraphs */
  --fs-small: 13px;
  --fs-label: 12px;                        /* spaced caps labels */
}

* { font-stretch: normal; }                /* nothing uses a condensed width any more */
body { font-family: var(--font-body); font-weight: 400; }

/* ---------- Display: Satoshi 400 ---------- */
.display {
  font-family: var(--font-display); font-weight: 800; text-transform: none;
  letter-spacing: -.035em; line-height: .92;
}
.hero__word, .vid__text, .footer__mark { font-size: var(--fs-display); line-height: .85; letter-spacing: -.045em; }
.vid__text { font-size: calc(var(--fs-display) * .78); }   /* two words ("booked solid"), so a step smaller to fit its column */

/* ---------- Headings: Satoshi 400 ---------- */
.wwd-title, .svc-head h2, .faq__side h2, .osc-title, .wt-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-section);
  line-height: 1.02; letter-spacing: -.03em; text-transform: none;
}
/* Headings are one colour — no muted second half anywhere */
h1 span, h2 span, h3 span, .osc-title span, .wt-title span, .wwd-title span, .osr-title span { color: inherit; }
.svc2-row h3, .wt-meta h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-row); line-height: .95; letter-spacing: -.035em; text-transform: none; }
.osc-copy h3, .os__panel h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-card); line-height: 1.1; letter-spacing: -.02em; }

/* ---------- Labels: Montserrat 600, spaced caps ---------- */
.eyebrow, .svc-eyebrow, .wwd-label, .osc-label, .faq__label, .vid__eyebrow, .os__eyebrow,
.logos__label, .osc-copy .num, .wt-chip, .wt-bar, .svc2-row span, .footer__top h4,
.hero__top, .os-count, .wt-title sup, .wt-meta h3 sup, .qa__num {
  font-family: var(--font-label); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.5;
}
.wt-bar { letter-spacing: .12em; }
.qa__num { letter-spacing: .08em; }
.logos__label { letter-spacing: .1em; font-size: var(--fs-small); }

/* ---------- Body: Inter 400 / 600 only ---------- */
.brand, .logo, .roll, .pill, .qa button, .footer__top a { font-family: var(--font-body); font-weight: 600; }
.logo { font-size: clamp(16px, 1.3vw, 20px); letter-spacing: -.01em; }
.wwd-side p, .hero__intro p, .osc-blurb, .vid__cta p { font-size: var(--fs-body-l); }
.svc2-row p, .svb-intro, .osc-copy p, .wt-meta p, .qa__body p, .faq__side p { font-size: var(--fs-body); font-weight: 400; }

/* Headings: Title Case — first letter of every word capitalised (source text can stay in any case) */
h1, h2, h3, .display, .wwd-title, .svc-head h2, .faq__side h2, .osc-title, .wt-title,
.svc2-row h3, .wt-meta h3, .osc-copy h3, .os__panel h3 { text-transform: capitalize; }
/* Letter-by-letter animated headings wrap each letter in its own element, which "capitalize" would
   treat as a new word (turning DRIVEN / BOOKED SOLID all-caps) — their source text is Title Case instead */
.hero__word .char, .vid__text .char { text-transform: none; }

/* Satoshi Regular (400) for every heading, wordmark and big number set in the display font.
   Section styles elsewhere still declare 700/800 from the League Spartan era — this wins over all of them. */
:is(h1, h2, h3, .display, .dp-h1, .dp-h2, .dp-h3, .vid__head, .vid__text, .hero__word, .footer__mark, .sv-reveal__text,
  .fx-quote p, .fx-more__list a, .plan__price, .fx-price, .sv-num, .fx-loop .num, .dp-step__n, .sv-problems b, .shv__head,
  .osc-title, .wwd-title, .wt-title) { font-weight: 400 !important; }