/*
 * Shared editorial rhythm for every public route.
 *
 * Three spacing tiers keep the site coherent without making unlike sections
 * feel mechanically identical:
 *   standard — ordinary content sections;
 *   compact  — image-led sections whose heading belongs close to the visual;
 *   story    — long-form / dark narrative sections.
 */
:root {
  --section-space-standard: clamp(72px, 5.8vw, 104px);
  --section-space-compact: clamp(60px, 4.8vw, 84px);
  --section-space-story: clamp(80px, 6.6vw, 118px);
  --section-kicker-size: 11px;
  --section-kicker-leading: 1.4;
  --section-kicker-tracking: .16em;
  --section-kicker-gap: 12px;
  --section-title-size: 40px;
  --section-title-leading: 1.2;
  --section-title-tracking: -.04em;
  --section-rule-gap: 22px;
  --section-content-gap: clamp(32px, 2.8vw, 46px);
  --section-content-gap-compact: clamp(24px, 2vw, 32px);
  --section-rule-color: #b8c2ca;
  --section-copy-width: 64ch;
}

/* One English-label treatment across page heroes, sections and modal headings. */
#main :is(
  .eyebrow,
  .section-heading-group > span,
  .assurance-heading > span,
  .strength-heading > span,
  .home-cta > div > span,
  .about-profile__layout header > span,
  .culture-panel__head > span
) {
  font-family: var(--body);
  font-size: var(--section-kicker-size);
  font-weight: 700;
  line-height: var(--section-kicker-leading);
  letter-spacing: var(--section-kicker-tracking);
  text-transform: uppercase;
}

/* Kicker-to-title spacing is measured from the actual text, not inherited margins. */
#main :is(
  .section-heading-group > span,
  .section-head > .eyebrow,
  .assurance-heading > span,
  .strength-heading > span,
  .home-cta > div > span,
  .contact-page__heading > .eyebrow,
  .career-talent__heading > .eyebrow
) {
  display: block;
  margin: 0 0 var(--section-kicker-gap);
}

#main :is(
  .section-heading-group,
  .section-head,
  .assurance-heading,
  .strength-heading,
  .contact-page__heading,
  .career-talent__heading
) > h2 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--section-title-size);
  font-weight: 700;
  line-height: var(--section-title-leading);
  letter-spacing: var(--section-title-tracking);
  text-wrap: balance;
}

/* Hero labels use the same typography but a slightly airier composition. */
#main .hero-copy > .eyebrow,
#main .page-hero__content > .eyebrow {
  margin: 0 0 16px;
}
#main .hero-copy > h1,
#main .page-hero__content > h1 { margin-top: 0; }

/* Standard section starts. Image- and story-led modules use the named tiers. */
#main .section:not(.article):not(.careers-page),
#main .home-operations,
#main .home-capacity,
#main .home-partners,
#main .home-news,
#main .culture-section--ledger,
#main .jerone-welfare,
#main .contact-page {
  padding-top: var(--section-space-standard);
  padding-bottom: var(--section-space-standard);
}

#main .meta-showcase--system-image {
  padding-top: var(--section-space-compact);
  padding-bottom: var(--section-space-compact);
}

#main .company-history {
  padding-top: var(--section-space-story);
  padding-bottom: var(--section-space-story);
}

/* Shared frame and predictable heading-to-content intervals. */
#main :is(
  .operations-heading,
  .operations-orchestrator,
  .capacity-heading,
  .capacity-band,
  .jm-system-heading,
  .jm-system-image,
  .home-partners-head,
  .partner-logo-wall,
  .home-section-line,
  .home-news-list,
  .company-history__head,
  .history-stream,
  .culture-section__head,
  .culture-ledger,
  .jerone-welfare__head,
  .jerone-welfare__board
) {
  width: 100%;
  max-width: var(--site-frame);
  margin-right: auto;
  margin-left: auto;
}

#main .operations-heading,
#main .capacity-heading,
#main .home-partners-head,
#main .home-section-line {
  margin-bottom: var(--section-content-gap);
  padding-bottom: var(--section-rule-gap);
  border-bottom-color: var(--section-rule-color);
}

/* A wrapped right-hand deck must not push the Chinese title away from its
   kicker on compact desktops. The deck keeps its optical bottom alignment. */
#main .operations-heading { align-items: start; }
#main .operations-heading > p { align-self: end; }

#main .jm-system-heading { margin-bottom: var(--section-content-gap-compact); }
#main .culture-section--ledger .culture-section__head,
#main .jerone-welfare__head,
#main .credential-section > .section-head,
#main .career-talent__heading,
#main .career-activities .activity-heading,
#main .career-jobs > .section-head {
  margin-top: 0;
  margin-bottom: var(--section-content-gap);
}

#main .company-history__head {
  padding-bottom: var(--section-rule-gap);
}
#main .history-stream { margin-top: clamp(44px, 3.8vw, 62px); }

#main .contact-page__heading {
  padding-bottom: var(--section-rule-gap);
  border-bottom-color: #d5dde2;
}

/* Supporting copy follows a common reading measure and baseline. */
#main :is(.operations-heading, .section-head, .assurance-heading) > p {
  max-width: var(--section-copy-width);
  line-height: 1.75;
}

/* Repeated sections within the careers route use the same vertical cadence. */
#main .career-activities { margin-top: var(--section-space-standard); }

@media (max-width: 800px) {
  :root {
    --section-space-standard: clamp(58px, 12vw, 72px);
    --section-space-compact: clamp(52px, 10vw, 64px);
    --section-space-story: clamp(64px, 13vw, 78px);
    --section-kicker-size: 10px;
    --section-kicker-gap: 10px;
    --section-title-size: 30px;
    --section-title-leading: 1.25;
    --section-title-tracking: -.035em;
    --section-rule-gap: 18px;
    --section-content-gap: clamp(26px, 6vw, 34px);
    --section-content-gap-compact: 24px;
  }

  #main .hero-copy > .eyebrow,
  #main .page-hero__content > .eyebrow { margin-bottom: 13px; }

  #main .history-stream { margin-top: 36px; }
}

@media (max-width: 380px) {
  :root {
    --section-space-standard: 54px;
    --section-space-compact: 48px;
    --section-space-story: 60px;
    --section-title-size: 28px;
  }
}