/* Shared public-site typography. The About page is the visual reference. */
:root {
  --font-site: "Onest", "Segoe UI", Arial, sans-serif;
  --type-hero: 58px;
  --type-section: 52px;
  --type-feature: 48px;
  --type-panel: 34px;
  --type-card: 23px;
  --type-body: 18px;
  --type-lead: 19px;
  --type-detail: 15px;
  --type-title-weight: 400;
  --type-card-weight: 700;
  --type-title-line: 1.12;
  --type-body-line: 1.65;
  --type-detail-line: 1.58;
}

body {
  font-family: var(--font-site);
}

/* Page titles, including the home and legal pages. */
main h1,
.hero h1,
.page-hero h1,
.faq-page .page-hero h1,
.thanks-page .page-hero h1,
.legal-document h1 {
  font-size: var(--type-hero);
  font-weight: var(--type-title-weight);
  line-height: 1.04;
  letter-spacing: normal;
}

.hero h1 span {
  font-weight: inherit;
}

.hero .lead,
.page-hero .lead,
.thanks-page .page-hero .lead {
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: 1.55;
}

/* Main section headings and their introductory copy. */
main h2,
.about-story__copy h2,
.designers-new-head h2,
.assurance-intro h2,
.service-flow__head h2,
.works-gallery__head h2 {
  font-size: var(--type-section);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-line);
  letter-spacing: normal;
}

.about-story__copy p,
.designers-new-head p,
.section-head p,
.assurance-intro > p,
.service-decision__copy > p,
.service-choice__copy > p,
.service-flow__intro p,
.service-faq__copy p,
.service-intro__copy p,
.service-specs__grid p,
.service-faq__grid p {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--type-body-line);
}

/* Shared social and request sections keep the About page's own scale. */
.social-life h2,
.cta-copy h2 {
  font-size: var(--type-feature);
  line-height: 1.04;
}

/* Cards use the same heading and text rhythm as the About pillars. */
.about-story__pillar h4,
.service-body h2,
.service-body h3,
.designers-review__items h3,
.designers-delivery__steps h3,
.designers-benefits__grid h3,
.assurance-points h3,
.service-scenario-grid h3,
.service-included h3,
.service-flow__steps h3,
.faq-side-card h2 {
  font-size: var(--type-card);
  font-weight: var(--type-card-weight);
  line-height: 1.2;
  letter-spacing: normal;
}

.about-story__pillar p,
.service-body p,
.designers-review__items p,
.designers-delivery__steps p,
.assurance-points p,
.service-scenario-grid p,
.service-choice__cards p,
.service-brief-list p,
.service-flow__steps p,
.service-options p,
.faq-side-card p,
.contacts-benefit p,
.contacts-card p {
  font-size: var(--type-detail);
  font-weight: 400;
  line-height: var(--type-detail-line);
}

/* Compact panels follow the regular-weight heading style. */
.estimate-layout h2,
.service-brief-card h3,
.designers-result__intro h3,
.contacts-request__form h2,
.faq-banner h2,
.faq-form-copy h2,
.portfolio-modal__content h2,
.legal-document h2 {
  font-size: var(--type-panel);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-line);
  letter-spacing: normal;
}

.designers-partnership__role h3 {
  font-size: var(--type-feature);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-line);
  letter-spacing: normal;
}

.designers-result__intro p,
.designers-result__answers p {
  font-size: var(--type-detail);
  line-height: var(--type-detail-line);
}

/* Smaller headings remain suited to captions, questions and contact details. */
.designers-result__answers strong,
.service-choice__cards strong,
.portfolio-grid .work-card figcaption strong,
.contacts-benefit h2,
.contacts-card h2,
.faq-question,
.faq-page .faq-question {
  font-size: 18px;
  font-weight: var(--type-card-weight);
  line-height: 1.3;
  letter-spacing: normal;
}

.faq-answer,
.faq-page .faq-answer {
  font-size: 16px;
  font-weight: 400;
  line-height: var(--type-body-line);
}

.contacts-card a,
.contacts-form label,
.faq-form label {
  font-weight: var(--type-card-weight);
}

.legal-document p:not(.legal-meta),
.legal-document li {
  font-size: var(--type-body);
  line-height: var(--type-body-line);
}

@media (max-width: 1180px) {
  :root {
    --type-hero: 50px;
    --type-feature: 40px;
  }
}

@media (max-width: 980px) {
  :root {
    --type-section: 44px;
  }
}

@media (max-width: 740px) {
  :root {
    --type-hero: 38px;
    --type-section: 34px;
    --type-feature: 32px;
    --type-panel: 28px;
    --type-card: 21px;
    --type-body: 16px;
    --type-lead: 16px;
  }

  main h1,
  .hero h1,
  .page-hero h1,
  .faq-page .page-hero h1,
  .thanks-page .page-hero h1,
  .legal-document h1 {
    line-height: 1.08;
    overflow-wrap: break-word;
  }

  .social-life h2 {
    font-size: 30px;
  }

  .faq-question,
  .faq-page .faq-question {
    font-size: 16px;
  }
}