/* Site-wide type scale and rhythm — loaded last on every project page.
   One size per role, so headings, paragraphs and small text match across case studies.
   Weights and colors stay with each page's own brand styles. */

:root {
  --t-hero:     clamp(40px, 6vw, 84px);     /* page title */
  --t-hero-sub: clamp(16px, 1.5vw, 19px);   /* line under the page title */
  --t-section:  clamp(28px, 3.4vw, 44px);   /* section title */
  --t-sub:      clamp(20px, 2.1vw, 26px);   /* sub-heading inside a section */
  --t-card:     18px;                       /* title inside a card */
  --t-lead:     clamp(15px, 1.4vw, 17px);   /* lead / intro paragraph */
  --t-body:     16px;                       /* reading paragraphs */
  --t-small:    14px;                       /* paragraphs inside cards */
  --t-caption:  12.5px;                     /* captions, meta */
  --t-label:    11px;                       /* eyebrow labels */
  --t-quote:    clamp(26px, 3.4vw, 46px);   /* pull quotes */
  --t-cta:      clamp(36px, 5vw, 64px);     /* closing call to action */
  --lh-body:    1.65;
  --sp-section: 100px;                      /* vertical padding of a section */
  --sp-head:    56px;                       /* gap between a section's head and its content */
}
@media (max-width: 760px) {
  :root { --sp-section: 64px; --sp-head: 36px; --t-body: 15.5px; }
}

/* ── page title ── */
.hero-title, .case-title { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.03em; }
.hero-sub { font-size: var(--t-hero-sub); line-height: 1.55; }
.hero-meta { font-size: 12px; }
.fact strong, .pm strong { font-size: var(--t-label); }
.fact span, .pm span { font-size: var(--t-small); }

/* ── eyebrow labels ── */
.section-label, .label, .pullquote-label, .pull-label, .end-cta-label, .prompt-label,
.benefits-label, .sitemap-label, .hp-eyebrow, .campaign-cta .eyebrow, .cv-steplbl {
  font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase;
}

/* ── section titles and leads ── */
.section-title, .h2 { font-size: var(--t-section); line-height: 1.08; letter-spacing: -0.025em; max-width: 880px; }
.lead, .cv-block .cv-sub { font-size: var(--t-lead); line-height: var(--lh-body); max-width: 680px; }

/* ── sub-headings inside a section: never the same size as the section title ── */
.who-copy h3, .digital-intro h3, .product-info h3, .anatomy-copy h4, .cv-block h3, .cv-insight h3,
.hero-preview h4, .proto-side h3, .persona-info h3, .campaign-cta h4, .team-card h4, .product-body h4,
.pass-card h4, .side-card h4, .bench-card h4, .ps-card h4 {
  font-size: var(--t-sub); line-height: 1.2; letter-spacing: -0.02em;
}

/* ── card titles ── */
.goal h4, .insight h4, .test-card h4, .market h5, .next-item h5, .mobile-card h5, .box-item h5,
.pillar h5, .pillar h4, .video-card h5, .cv-signals h4, .cv-res h4, .future-card h5, .quality-card h5,
.role-card h5, .two-col-grid .col h4 {
  font-size: var(--t-card); line-height: 1.3;
}

/* ── reading paragraphs ── */
.who-copy p, .digital-intro p, .product-info p, .anatomy-copy > p, .problem p, .story-copy p,
.overview-copy p, .overview-copy p.muted, .review p, .proto-side p {
  font-size: var(--t-body); line-height: var(--lh-body);
}

/* ── paragraphs inside cards ── */
.goal p, .insight p, .test-card p, .market p, .next-item p, .ps-card p, .mobile-card p, .box-item p,
.pillar p, .video-card p, .cv-signals p, .cv-res p, .bench-card p, .future-card p, .quality-card p,
.team-card p, .role-card p, .two-col-grid .col p, .cv-hyp p, .question-group p, .cv-note, .hiw-cta p {
  font-size: var(--t-small); line-height: 1.55;
}

/* ── captions and meta ── */
.journey-meta, .stat .sub, .type-meta, .b2i-card p, .type-sub, .team-card .title, .colorway-label,
.campaign-cta .subtext, .brand-mini-sub, .cv-key small, .cv-callout span {
  font-size: var(--t-caption);
}
.end-cta-sub { font-size: var(--t-body); }

/* ── pull quotes and closing ── */
.pullquote p, .pull p, .solution-big p { font-size: var(--t-quote); line-height: 1.15; }
.end-cta h3 { font-size: var(--t-cta); }

/* ── rhythm ── */
.section, .overview { padding: var(--sp-section) 0; }
.section.tight { padding: calc(var(--sp-section) * 0.6) 0; }
.section-head { margin-bottom: var(--sp-head); }
.h2 { margin-bottom: 20px; }
.lead { margin-top: 16px; }
.digital-intro { margin-bottom: var(--sp-head); }
.anatomy { margin-top: var(--sp-head); }
.cv-block + .cv-block { margin-top: var(--sp-section); }
.pullquote, .pull { padding: var(--sp-section) 0; }