/* About refinement: real field photography and a calmer reading rhythm. */
.site-typography .about-page .about-section-nav { padding: 24px 0; border-bottom: 1px solid var(--line); background: #fff; }
.site-typography .about-page .about-section-nav > .container { display: flex; align-items: baseline; gap: 32px; }
.site-typography .about-page .about-section-nav span { flex: 0 0 auto; color: var(--navy); font-size: .82rem; font-weight: 650; }
.site-typography .about-page .about-section-nav .container > div { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 12px; }
.site-typography .about-page .about-section-nav a { display: inline-flex; align-items: center; gap: 8px; color: #38645e; font-size: .85rem; line-height: 1.6; padding-block: 8px; }
.site-typography .about-page .about-section-nav a svg { width: 13px; height: 13px; transform: rotate(90deg); }
.site-typography .about-page .about-section-nav a:hover { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 5px; }
.site-typography .about-page .about-section-nav a:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 5px; border-radius: 2px; }
.site-typography .about-page .company-profile-section { padding-block: clamp(56px, 5.5vw, 88px); background: #fbfdfc; }
.site-typography .about-page .about-profile-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: clamp(32px, 4vw, 64px); row-gap: 40px; align-items: center; }
.site-typography .about-page .about-profile-intro { max-width: 40rem; }
.site-typography .about-page .about-profile-intro h2 { max-width: 23ch; font-size: clamp(28px, 2.55vw, 42px); line-height: 1.24; text-wrap: balance; }
.site-typography .locale-zh .about-page .about-profile-intro h2 { max-width: 16em; }
.site-typography .about-page .about-profile-intro > p:not(.eyebrow) { margin-top: 20px; max-width: 62ch; line-height: 1.8; }
.site-typography .about-page .company-profile-boundary { margin-top: 24px; padding-top: 18px; max-width: 62ch; }
.site-typography .about-page .about-profile-media { width: 100%; max-width: none; border: 0; border-radius: 12px; }
.site-typography .about-page .about-profile-media img { aspect-ratio: 16 / 9; height: auto; object-fit: contain; }
.site-typography .about-page .about-profile-media figcaption { padding: 12px 0; border: 0; background: #fbfdfc; color: #526a70; font-size: .82rem; }
.site-typography .about-page .about-profile-stages { gap: 28px; border: 0; border-radius: 0; overflow: visible; }
.site-typography .about-page .about-profile-stages li { padding: 24px 0 0; border: 0; border-top: 2px solid #d4e4df; }
.site-typography .about-page .about-profile-stages li > span { width: auto; height: auto; margin-bottom: 12px; border-radius: 0; background: none; font-size: .78rem; color: #087a5b; }
.site-typography .about-page .about-profile-stages h3 { font-size: 1.2rem; line-height: 1.4; }
.site-typography .about-page .about-profile-stages p { margin-top: 10px; font-size: .94rem; line-height: 1.75; }
.site-typography .about-page .company-technology-section,
.site-typography .about-page .company-focus-section,
.site-typography .about-page .company-ledger-section,
.site-typography .about-page .company-location-section { padding-block: clamp(56px, 5.5vw, 88px); }
.site-typography .about-page .company-technology-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
.site-typography .about-page .company-technology-ledger { margin-top: 32px; }
@media (max-width: 980px) {
  .site-typography .about-page .about-profile-layout,
  .site-typography .about-page .company-technology-layout { grid-template-columns: minmax(0, 1fr); }
  .site-typography .about-page .company-technology-layout { grid-template-areas: "intro" "media" "facts" "ledger" "boundary"; row-gap: 24px; }
  .site-typography .about-page .about-profile-intro { max-width: none; }
  .site-typography .about-page .about-profile-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-typography .about-page .about-section-nav > .container { flex-direction: column; gap: 10px; }
}
@media (max-width: 620px) {
  .site-typography .about-page .about-profile-layout { row-gap: 28px; }
  .site-typography .about-page .about-profile-stages { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .site-typography .about-page .about-profile-stages li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-top: 20px; }
  .site-typography .about-page .about-profile-stages li > span { margin: 4px 0 0; align-self: start; }
  .site-typography .about-page .about-section-nav .container > div { column-gap: 20px; row-gap: 2px; }
  .site-typography .about-page .about-section-nav a { min-height: 44px; }
  .site-typography .about-page .company-technology-boundary { grid-template-columns: 1fr; gap: 12px; }
}
