/* ============================================================
   Fortellar — Master Typography System
   Load AFTER colors_and_type.css / website.css / template.css /
   practice.css / expertise.css / homepage.css so it wins the cascade.
   Sizing, weight, line-height and tracking only; layout untouched.
   ============================================================ */

/* ---------- Tokens ---------- */
/* Hero headlines top out at 70px and scale down fluidly with the viewport, so
   the framing holds together between breakpoints instead of stepping. They
   reach the full 70px at roughly 1190px and wider. */
@media (min-width: 769px) {
  :root {
    /* Homepage statement hero keeps the large size. Every other page's H1 is 38px,
       which is what Claude Design's typography system specifies. */
    --fs-hero: clamp(38px, 5.9vw, 70px);  --lh-hero: 1.1;
    --fs-h1:   38px;                      --lh-h1:   1.2;
    --fs-h2:   38px;  --lh-h2:   1.2;
    --fs-h3:   22px;  --lh-h3:   1.3;
    --fs-h4:   20px;  --lh-h4:   1.4;
    --fs-lead: 18px;  --lh-lead: 1.6;
    --fs-body: 16px;  --lh-body: 1.6;
    --fs-sm:   14px;  --lh-sm:   1.5;
    --fs-xs:   12px;  --lh-xs:   1.4;
  }
}
@media (max-width: 768px) {
  :root {
    --fs-hero: clamp(32px, 8.2vw, 44px);  --lh-hero: 1.12;
    --fs-h1:   30px;                      --lh-h1:   1.2;
    --fs-h2:   30px;  --lh-h2:   1.2;
    --fs-h3:   20px;  --lh-h3:   1.3;
    --fs-h4:   18px;  --lh-h4:   1.4;
    --fs-lead: 16px;  --lh-lead: 1.6;
    --fs-body: 16px;  --lh-body: 1.6;
    --fs-sm:   14px;  --lh-sm:   1.5;
    --fs-xs:   12px;  --lh-xs:   1.4;
  }
}

/* ---------- Display / Hero ---------- */
.site .hero.hero--statement-img h1,
.site .hero.hero--statement h1,
.site .hero h1.display,
.site h1.display.display {
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  font-weight: 700; letter-spacing: -0.02em;
}

/* ---------- H1 ---------- */
.site h1, .site h1.h1, .site .hero h1, .site .page-hero h1, .site .exp-hero h1 {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  font-weight: 700; letter-spacing: -0.02em;
}

/* ---------- Hero subtitle (light backgrounds only) ---------- */
.site p.hero-lead, .site p.lead.hero-lead,
.site .hero p.hero-lead, .site .page-hero p.hero-lead,
.site .about-hero p.hero-lead, .site .careers-hero p.hero-lead {
  font-size: 20px; line-height: 1.5; font-weight: 500; color: #1E293B;
}
/* Expertise hero lead: expertise.css asks for 21px but `.site p` out-ranks a
   single-class selector, so it needs to be declared at this specificity. */
.site .exp-hero p.exp-hero__lead {
  font-size: 21px; line-height: 34px; font-weight: 400; color: #1E293B;
}
@media (max-width: 768px) {
  .site .exp-hero p.exp-hero__lead { font-size: 18px; line-height: 30px; }
}

/* Only genuinely inverse bands keep light ink. The About / Careers / Expertise
   heroes are light treatments now, so they are deliberately not listed here. */
.site .hero--inverse p.hero-lead, .site .section--inverse p.hero-lead {
  font-size: 20px; line-height: 1.5; font-weight: 500; color: #E2E8F0;
}
@media (max-width: 768px) {
  .site p.hero-lead, .site .hero p.hero-lead, .site .page-hero p.hero-lead,
  .site .exp-hero p.exp-hero__lead { font-size: 18px; }
}

/* ---------- H2 ---------- */
.site h2, .site h2.h2,
.site .home-head h2, .site .home-head--pop h2, .site .who-lede h2,
.site .split--top h2, .site .section-header h2, .site .section-eyebrow-head h2,
.site .why h2, .site .why-band h2, .site .exp-shift h2, .site .prac-cov h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700;
}

/* ---------- H3 / card + step titles ---------- */
.site h3, .site h3.h3, .site .card-title, .site .step-title,
.site .pillar-card h3, .site .factory__card h3, .site .process__step h3,
.site .value-card h3.value-card__value, .site .split h3,
.site .overview-card h3, .site .moment h3, .site .exp-disc__title,
.site .exp-princ__t, .site .exp-applied__t, .site .prac-cov__title,
.site .risk-cat__name, .site .ms-tier__name {
  font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600;
}
.site h3.phase-list__title, .site .work-phase__title {
  font-size: 20px; line-height: 1.3; font-weight: 600;
}

/* ---------- H4 ---------- */
.site h4, .site h4.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

/* ---------- Section lead ---------- */
.site p.section-lead, .site p.lead, .site .home-head p, .site .who-lede p,
.site .section-eyebrow-head p, .site .prac-cov p.prac-cov__body {
  font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 400;
}

/* ---------- Body copy (size + line-height only; each section owns its ink) ---------- */
.site p, .site li,
.site p.card-body, .site p.step-body, .site .pillar-card__desc,
.site .factory__card p, .site .process__step p, .site .svc-card__desc,
.site .moment__body, .site .exp-disc__body, .site .exp-princ__b,
.site .exp-applied__b, .site .risk-cat__body, .site .ms-tier__desc {
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400;
}

/* ---------- List item copy ---------- */
.site .list-item-text, .site .who-grid span.list-item-text,
.site .overview-card__list li, .site .prac-list li {
  font-size: 15px; line-height: 1.5; font-weight: 500;
}
.site p.card-problem { font-size: 15px; line-height: 1.5; font-weight: 500; color: #1E293B; }

/* ---------- Buttons ---------- */
.site a.btn, .site button.btn, .site .btn-text {
  font-size: 15px; font-weight: 600;
}

/* ---------- Eyebrows & kickers ---------- */
.site .eyebrow, .site span.eyebrow, .site p.eyebrow {
  font-size: 15px; line-height: 1.4; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.site .card-eyebrow, .site .value-card__problem-label {
  font-size: 11px; line-height: 1.4; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #1D4ED8;
}
.site .trust-eyebrow, .site .logo-strip span.logo-strip__label {
  font-size: 11px; line-height: 1.4; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #64748B;
}
.site .diagram-label {
  font-size: 12px; line-height: 1.4; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------- Dark background inversion ---------- */
.site .eyebrow-dark, .site span.eyebrow-dark,
.site .section--inverse .eyebrow, .site .why-band .eyebrow {
  font-size: 12px; line-height: 1.4; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #93C5FD;
}
.site h2.h2-dark, .site .section--inverse h2, .site .why-band h2,
.site .cta-band h2, .site .final-cta h3 {
  color: #FFFFFF; font-weight: 700; line-height: 1.2;
}
.site h2.cta-title, .site .cta-band h2.cta-title,
.site .final-cta h3, .site .exp-cta h3, .site .prac-cta h3,
.site .rc-cta h2 { font-size: 32px; line-height: 1.2; font-weight: 700; }
.site .rc-cta p { font-size: 16px; line-height: 1.5; }
@media (max-width: 768px) {
  .site h2.cta-title, .site .cta-band h2.cta-title,
  .site .final-cta h3, .site .exp-cta h3, .site .prac-cta h3,
  .site .rc-cta h2 { font-size: 26px; }
}
.site p.lead-dark, .site .section--inverse p.lead-dark, .site .why-band p.lead-dark {
  font-size: 18px; line-height: 1.6; font-weight: 400; color: #E2E8F0;
}
.site p.cta-body, .site .cta-band p.cta-body, .site .final-cta p {
  font-size: 16px; line-height: 1.5; font-weight: 400; color: #E2E8F0;
}

/* ---------- Small print ---------- */
.site small, .site .caption, .site .site-footer__brand p {
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}