:root {
  --about-navy: #1e3a5f;
  --about-navy-soft: #2c527f;
  --about-ink: #172033;
  --about-copy: #536071;
  --about-muted: #f6f8fa;
  --about-line: #e2e6eb;
  --about-accent: #c98300;
  --about-shell: 1120px;
}

* { box-sizing: border-box; }

body.about-page {
  margin: 0;
  background: #fff;
  color: var(--about-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.about-shell {
  width: min(calc(100% - 48px), var(--about-shell));
  margin: 0 auto;
}

.about-breadcrumbs {
  background: #fff;
}

.about-breadcrumbs ol {
  min-height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  color: #758093;
  font-size: 13px;
}

.about-breadcrumbs li + li::before { content: "/"; margin-right: 10px; color: #a4acb8; }
.about-breadcrumbs a { color: var(--about-navy); text-decoration: none; }

.about-header { padding: 72px 0 64px; }

.about-header-layout {
  display: grid;
  grid-template-columns: 112px minmax(0, 760px);
  align-items: center;
  gap: 32px;
}

.about-brand-mark {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid var(--about-line);
  border-radius: 8px;
  background: #fff;
}

.about-brand-mark img { display: block; width: 88px; height: 88px; }

.about-kicker,
.about-section-heading > span {
  display: block;
  margin-bottom: 10px;
  color: var(--about-accent);
  font-size: 13px;
  font-weight: 700;
}

.about-header h1 {
  margin: 0;
  color: var(--about-ink);
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: 0;
}

.about-header p {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--about-copy);
  font-size: 16px;
  line-height: 1.9;
}

.about-section { padding: 72px 0; }
.about-section-muted { background: #fff; }

.about-facts-layout,
.about-boundary-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 72px;
}

.about-section-heading h2 {
  max-width: 480px;
  margin: 0;
  color: var(--about-ink);
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: 0;
}

.about-section-heading p {
  margin: 14px 0 0;
  color: var(--about-copy);
  font-size: 14px;
  line-height: 1.8;
}

.about-section-heading-wide { margin-bottom: 36px; }

.about-facts { margin: 0; }

.about-facts > div {
  min-height: 62px;
  padding: 16px 0;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.about-facts dt { color: #6d7787; font-size: 14px; }
.about-facts dd { margin: 0; color: var(--about-ink); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.about-facts dd small { display: block; margin-top: 5px; color: #788394; font-size: 12px; font-weight: 400; }
.about-facts a { color: var(--about-navy); text-decoration: none; }
.about-facts a:hover { text-decoration: underline; }

.about-service-list { border-top: 0; }

.about-service-list a {
  min-height: 104px;
  padding: 22px 0;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.about-service-list a:hover { background: #fff; }
.about-service-list b { color: var(--about-accent); font-size: 13px; line-height: 1.7; }
.about-service-list strong { display: block; color: var(--about-navy); font-size: 18px; }
.about-service-list p { margin: 8px 0 0; color: var(--about-copy); font-size: 14px; line-height: 1.8; }

.about-boundary-copy { border-top: 0; }
.about-boundary-copy p { margin: 0; padding: 18px 0; color: var(--about-copy); font-size: 15px; line-height: 1.9; }

.about-footer {
  padding: 32px 24px;
  background: #fff;
  text-align: center;
}

.about-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 24px; }
.about-footer-links a { color: var(--about-copy); font-size: 13px; text-decoration: none; }
.about-footer-links a:hover { color: var(--about-navy); }
.about-footer p { margin: 14px 0 0; color: #788394; font-size: 12px; }

@media (max-width: 760px) {
  .about-shell { width: min(calc(100% - 32px), var(--about-shell)); }
  .about-header { padding: 48px 0 42px; }
  .about-header-layout { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: start; }
  .about-brand-mark { width: 72px; height: 72px; }
  .about-brand-mark img { width: 56px; height: 56px; }
  .about-header h1 { font-size: 30px; }
  .about-header p { grid-column: 1 / -1; margin-top: 2px; font-size: 15px; }
  .about-section { padding: 48px 0; }
  .about-facts-layout,
  .about-boundary-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-section-heading h2 { font-size: 24px; }
  .about-facts > div { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
  .about-service-list a { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-service-list a { transition: none; }
}