/* Shared text roles for every chapter, component and dialog. */
:root {
  --font-text: "Inter", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
    "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font-numbers: var(--font-text);
  --type-display: clamp(40px, 4.25vw, 68px);
  --type-chapter: clamp(30px, 2.65vw, 44px);
  --type-feature: 24px;
  --type-module: 20px;
  --type-card: 16px;
  --type-dialog: 28px;
  --type-body: 15px;
  --type-meta: 13px;
  --type-control: 14px;
  --type-metric: clamp(36px, 3.5vw, 54px);
  --type-unit: 20px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 700;
  --muted: #5d6e7b;
  --type-accent: #006c9d;
  --type-heading-color: var(--ink);
  --type-copy-color: var(--muted);
  --type-meta-color: var(--muted);
  --type-kicker-color: var(--type-accent);
}

body {
  font-family: var(--font-text);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  font-kerning: normal;
}
button, a, h1, h2, h3 { font-family: inherit; }
p { font-weight: var(--weight-regular); }

/* Dark visual chapters use the same roles with inverse text colors. */
.hero, .lowair, .city-caption {
  --type-heading-color: #fff;
  --type-copy-color: #d6e2eb;
  --type-meta-color: #c4d5e1;
  --type-kicker-color: #a8e2f4;
}

.section-heading h2 {
  font-size: var(--type-chapter);
  font-weight: var(--weight-heading);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--type-heading-color);
}
.section-heading h2 > span {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.hero h1, .air-content h2 {
  font-size: var(--type-display);
  font-weight: var(--weight-heading);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--type-heading-color);
}
.hero h1 em { font-weight: inherit; }

/* Feature statements share a level above module and card headings. */
.overview-story .lead,
.service-intro .lead,
.ai-copy h3,
.city-caption h3,
.air-subtitle {
  font-size: var(--type-feature);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--type-heading-color);
}

/* Modules and product names. */
.architecture-row h3,
.business-strips h3,
.service-item h3,
.platform-identity h3,
.capability-section h3,
.air-systems strong {
  font-size: var(--type-module);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--type-heading-color);
}
.platform-identity h3 small {
  font: inherit;
  color: inherit;
}
.service-item button[aria-expanded="true"] h3,
.business-strips button:hover h3 {
  color: var(--type-accent);
}

/* Repeated card labels and directory entries. */
.case-card h3,
.certificate-card strong,
.outline-row strong {
  font-size: var(--type-card);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--type-heading-color);
  overflow-wrap: break-word;
  line-break: strict;
}
.case-card:hover h3,
.outline-row.active strong {
  color: var(--type-accent);
}

/* All dialog titles, including gallery and full-size certificate view. */
.dialog-heading h2,
.detail-title,
.certificate-gallery-heading .detail-title,
.certificate-viewer-heading h2 {
  font-size: var(--type-dialog);
  font-weight: var(--weight-heading);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--type-heading-color);
}

/* Reading text, including explanatory paragraphs over imagery. */
.overview-story > p:not(.lead),
.service-intro > p:not(.lead),
.ai-copy > p,
.service-body p:not(.service-keywords),
.section-intro,
.case-topline p,
.city-caption p,
.air-description,
.hero-description,
.architecture-row p,
.ai-layer,
.detail-copy,
.capability-section p,
.certificate-gallery-description,
.platform-summary {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.8;
  letter-spacing: 0;
  color: var(--type-copy-color);
  overflow-wrap: break-word;
  line-break: strict;
}
.overview-story > p:not(.lead) strong {
  font: inherit;
  color: inherit;
}
.ai-layer strong,
.capability-section b,
.detail-content-label,
.delivery-line strong {
  font-weight: var(--weight-semibold);
  color: var(--type-heading-color);
}

/* Supporting information uses one size, weight and foreground per theme. */
.section-tag,
.small-label,
.values-line,
.values-line > span,
.service-promises,
.service-body .service-keywords,
.case-topline > span,
.case-category,
.business-strips p,
.stats-grid span,
.annual-output > span,
.service-clock p,
.hero-stat > span,
.hero-company,
.hero-location,
.hero-note,
.city-caption > span,
.image-label,
.security-line,
.delivery-line,
.ai-visual-label,
.air-systems span,
.air-corner,
.agent-chips span,
.certificate-total,
.certificate-card-meta,
.certificate-gallery-footer,
.certificate-position,
#certificate-position,
.credentials-grid figcaption,
.outline-note,
.outline-row small,
.outline-row > span:first-child,
.platform-type,
.platforms-hint,
.page-counter #current-title,
.page-divider,
.keyboard-hint,
.edition,
.rail-label,
.rail-end,
.service-number,
.service-en,
.strip-no,
.architecture-row b,
.ai-principles i,
.ai-tabs button > span {
  font-size: var(--type-meta);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--type-meta-color);
}
.case-category, .strip-no { color: var(--type-accent); }
.hero-company { letter-spacing: .08em; }
.service-en { letter-spacing: .08em; }

/* Eyebrows have one text treatment throughout chapters and dialogs. */
.eyebrow,
.detail-eyebrow,
.dialog-heading .eyebrow,
.certificate-viewer-heading .detail-eyebrow {
  font-size: var(--type-meta);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: .14em;
  color: var(--type-kicker-color);
}
.ai-visual.nuc::after {
  font-size: var(--type-meta);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--muted);
}

/* Primary actions and text links share their respective weights. */
.primary-button,
.platform-launch,
.platform-open {
  font-size: var(--type-control);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0;
}
.text-button,
.hero-platforms,
.certificate-play,
#certificate-zoom,
.top-nav button,
.scenario-tabs button,
.ai-tabs button,
.air-applications button,
.certificate-mode button,
.ai-principles > span {
  font-size: var(--type-control);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: 0;
}
.text-button, .top-nav button, .ai-principles > span {
  color: var(--type-heading-color);
}
.platform-open, .text-button span,
.certificate-play, #certificate-zoom {
  color: var(--type-accent);
}
.scenario-tabs button.active,
.ai-tabs button[aria-selected="true"],
.certificate-mode button[aria-pressed="true"] {
  font-weight: var(--weight-semibold);
  color: var(--type-accent);
}
.air-applications button,
.hero-platforms {
  color: var(--type-copy-color);
}
.air-applications button[aria-pressed="true"],
.air-applications button:hover,
.hero-platforms:hover {
  color: #fff;
}

/* Values use the same numerals, weight and sizing across statistic blocks. */
.stats-grid strong,
.stats-grid strong.rank,
.annual-output strong,
.service-clock strong,
.hero-stat strong,
.certificate-total strong {
  font-family: var(--font-numbers);
  font-size: var(--type-metric);
  font-weight: var(--weight-medium);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--type-heading-color);
}
.stats-grid sup,
.annual-output strong span,
.service-clock strong > span,
.hero-stat strong span {
  font-family: var(--font-text);
  font-size: var(--type-unit);
  font-weight: var(--weight-regular);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--type-meta-color);
}
.rail-button,
.page-counter #current-page,
.hero-index {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums lining-nums;
}
.rail-button {
  font-size: var(--type-meta);
  font-weight: var(--weight-regular);
}
.rail-button.active { font-weight: var(--weight-semibold); }
.page-counter #current-page,
.hero-index {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
.hero-index span {
  font-size: var(--type-meta);
  font-weight: var(--weight-regular);
}
.toast {
  font-size: var(--type-control);
  font-weight: var(--weight-regular);
  line-height: 1.5;
}

/* Preserve the spacing refinements while using the shared text scale. */
.overview-story > p:not(.lead) { margin-top: 16px; }
.ai-copy > p { margin-bottom: 18px; }
.ai-layer { grid-template-columns: 6em minmax(0, 1fr); column-gap: 16px; }
.stats-grid > div { gap: 13px; }
.text-actions { flex-wrap: wrap; row-gap: 12px; }
.case-grid { row-gap: 26px; }
.case-category { margin-top: 12px; margin-bottom: 7px; }
.service-body { padding-bottom: 20px; }
#ai-panel:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

@media screen and (min-width: 1440px) and (min-height: 800px) {
  :root {
    --type-feature: 28px;
    --type-module: 22px;
    --type-body: 16px;
    --type-control: 15px;
  }
  .overview-main { column-gap: 6%; }
  .service-intro > p:not(.lead) { max-width: 390px; }
}

@media screen and (min-width: 901px) and (max-height: 799px) {
  :root {
    --type-feature: 22px;
    --type-module: 18px;
    --type-card: 14px;
    --type-body: 14px;
    --type-meta: 12px;
    --type-metric: 40px;
    --type-unit: 18px;
  }
  .overview-story > p:not(.lead) { margin-top: 12px; }
  .case-grid { row-gap: 20px; }
  .service-body { padding-bottom: 18px; }
}

@media screen and (max-width: 900px) {
  :root {
    --type-display: clamp(36px, 7vw, 56px);
    --type-chapter: 30px;
    --type-feature: 24px;
    --type-module: 20px;
    --type-card: 15px;
    --type-body: 15px;
    --type-meta: 12px;
    --type-metric: 36px;
    --type-unit: 18px;
  }
}

@media screen and (max-width: 650px) {
  :root {
    --type-display: clamp(34px, 9vw, 44px);
    --type-chapter: 28px;
    --type-feature: 22px;
    --type-module: 18px;
    --type-card: 14px;
    --type-dialog: 24px;
    --type-metric: 32px;
    --type-unit: 16px;
  }
  .section-heading { margin-bottom: 24px; }
  .overview-main { gap: 30px; }
  .business-strips p { font-size: var(--type-meta); }
  .case-grid { row-gap: 22px; }
  .ai-layer { column-gap: 12px; }
  .values-line { line-height: 1.8; }
}