/* 关于服装八场：服装制作影像、品牌主视觉、六项平台积累与业务介绍。 */
.fz8c-about {
  --about-ink: #173143;
  --about-muted: #526777;
  --about-blue: #006fa3;
  --about-line: #dce6ec;
  --about-navy: #102f43;
  --about-paper: #f1f7fb;
  background: #fff;
  color: var(--about-ink);
  overflow-wrap: break-word;
}
.fz8c-about :where(h1, h2, h3, p, ol, dl) { margin: 0; }
.fz8c-about .about-shell { width: min(100% - 80px, 1120px); margin-inline: auto; }
.fz8c-about a { color: var(--about-blue); transition: color .18s ease, background-color .18s ease; }
.fz8c-about a:hover { color: #005680; }
.fz8c-about a:focus-visible { outline: 3px solid var(--about-blue); outline-offset: 5px; }
.fz8c-about :where(h2[id], section[id], article[id]) { scroll-margin-top: 110px; }
.fz8c-about .about-eyebrow { color: var(--about-blue); font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1.7; }
.fz8c-about .about-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--about-navy); color: #fff; }
.fz8c-about .about-hero__visual { position: absolute; z-index: -2; inset: 0; display: block; }
.fz8c-about .about-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; filter: saturate(.55); }
.fz8c-about .about-hero::before { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(90deg, rgb(8 28 41 / .62), rgb(8 28 41 / .84) 38%, rgb(8 28 41 / .82) 64%, rgb(8 28 41 / .48)); }
.fz8c-about .about-breadcrumb { padding-top: 20px; color: #d2e0e7; font-size: .75rem; }
.fz8c-about .about-breadcrumb ol { display: flex; align-items: center; gap: 12px; list-style: none; }
.fz8c-about .about-breadcrumb li + li::before { content: '/'; padding-inline-end: 12px; color: #90abbc; }
.fz8c-about .about-breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: #d2e0e7; }
.fz8c-about .about-breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fz8c-about .about-hero a:focus-visible { outline-color: #fff; }
.fz8c-about .about-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: 64px 88px; text-align: center; }
.fz8c-about .about-hero__body { width: 100%; max-width: 760px; }
.fz8c-about .about-brand { display: flex; align-items: center; justify-content: center; gap: 24px; }
.fz8c-about .about-brand img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px; }
.fz8c-about .about-brand h1 { font-size: 4.75rem; font-weight: 650; line-height: 1.15; letter-spacing: .025em; }
.fz8c-about .about-hero__promise { margin-top: 18px; color: #e4edf2; font-size: 1.5rem; font-weight: 500; line-height: 1.6; letter-spacing: .08em; text-wrap: balance; }
.fz8c-about .about-hero__description { margin-top: 28px; color: #fff; font-size: 1.25rem; line-height: 1.8; letter-spacing: .04em; text-wrap: balance; }
.fz8c-about .about-metrics { padding-block: 38px; border-bottom: 1px solid var(--about-line); background: #fff; }
.fz8c-about .about-metrics__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fz8c-about .about-metric { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; padding-inline: 12px; text-align: center; }
.fz8c-about .about-metric + .about-metric { border-inline-start: 1px solid var(--about-line); }
.fz8c-about .about-metric dt { color: var(--about-muted); font-size: .75rem; line-height: 1.6; }
.fz8c-about .about-metric dd { display: flex; align-items: baseline; gap: 4px; margin: 0; color: var(--about-blue); line-height: 1.2; white-space: nowrap; }
.fz8c-about .about-metric--experience dd { color: var(--about-ink); }
.fz8c-about .about-metric__value { font-size: 2.25rem; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fz8c-about .about-metric__unit { font-size: .75rem; }
.fz8c-about .about-content { padding-block: 64px; }
.fz8c-about .about-intro { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; }
.fz8c-about .about-intro h2 { margin-top: 14px; font-size: 2rem; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
.fz8c-about .about-intro__note { margin-top: 22px; color: var(--about-muted); font-size: .8125rem; line-height: 1.9; }
.fz8c-about .about-intro__body > p { font-size: .9375rem; line-height: 2; }
.fz8c-about .about-intro__body > p + p { margin-top: 16px; }
.fz8c-about .about-services { margin-top: 48px; }
.fz8c-about .about-services__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.fz8c-about .about-services__heading h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.6; }
.fz8c-about .about-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: .8125rem; text-decoration: underline; text-underline-offset: 5px; }
.fz8c-about .about-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fz8c-about .about-service { padding-top: 22px; border-top: 1px solid var(--about-line); }
.fz8c-about .about-service__label { display: flex; align-items: center; gap: 12px; color: var(--about-blue); font-size: .75rem; line-height: 1.8; }
.fz8c-about .about-service__label span { font-variant-numeric: tabular-nums; }
.fz8c-about .about-service h3 { margin-top: 12px; font-size: 1rem; font-weight: 600; line-height: 1.7; }
.fz8c-about .about-service__answer { margin-top: 12px; color: var(--about-muted); font-size: .8125rem; line-height: 1.95; }
.fz8c-about .about-contact { padding-block: 36px; background: var(--about-paper); }
.fz8c-about .about-contact__layout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.fz8c-about .about-contact h2 { font-size: 2rem; font-weight: 600; line-height: 1.5; text-wrap: balance; }
.fz8c-about .about-contact h2 + p { margin-top: 10px; color: var(--about-muted); font-size: .8125rem; line-height: 1.9; }
.fz8c-about .about-contact__actions { text-align: center; }
.fz8c-about .about-button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 50px; padding: 12px 24px; color: #fff; background: #0077ad; border-radius: 3px; font-size: .875rem; font-weight: 600; }
.fz8c-about .about-button:hover { color: #fff; background: #006695; }
.fz8c-about .about-button span { transition: transform .18s ease; }
.fz8c-about .about-button:hover span { transform: translate(2px, -2px); }
.fz8c-about .about-contact__actions p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px; margin-top: 8px; color: var(--about-muted); font-size: .6875rem; }
.fz8c-about .about-contact__actions p a { display: inline-flex; align-items: center; min-height: 32px; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.fz8c-about-page .site-nav li.current-menu-item > a,
.fz8c-about-page .site-nav li a:hover { color: #006fa3; }
.fz8c-about-page .site-nav li a,
.fz8c-about-page .site-nav li a::after { transition: color .18s ease, background-color .18s ease, transform .18s ease; }
@media (prefers-reduced-motion: no-preference) {
  .fz8c-about .about-brand,
  .fz8c-about .about-hero__promise,
  .fz8c-about .about-hero__description { animation: about-enter .6s both; }
  .fz8c-about .about-hero__visual img { animation: about-image-enter 1.2s ease-out both; }
  .fz8c-about .about-hero__promise { animation-delay: .1s; }
  .fz8c-about .about-hero__description { animation-delay: .2s; }
}
@keyframes about-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes about-image-enter { from { transform: scale(1.035); } to { transform: scale(1); } }
@media (max-width: 900px) {
  .fz8c-about .about-shell { width: calc(100% - 48px); }
  .fz8c-about .about-brand h1 { font-size: 3.5rem; }
  .fz8c-about .about-metrics__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 0; }
  .fz8c-about .about-metric:nth-child(3n + 1) { border-inline-start: 0; }
  .fz8c-about .about-metric__value { font-size: 2rem; }
  .fz8c-about .about-intro { gap: 32px; }
  .fz8c-about .about-intro h2 { font-size: 1.75rem; }
  .fz8c-about .about-services__grid { gap: 24px; }
}
@media (max-width: 768px) {
  .fz8c-about-page .header-container { padding: 10px 16px 6px; gap: 2px; min-height: 98px; justify-content: center; }
  .fz8c-about-page .branding { margin: 0; line-height: 1.6; }
  .fz8c-about-page .center-nav { flex: 0 1 auto; width: 100%; justify-content: center; }
  .fz8c-about-page .site-nav { justify-content: center; flex-wrap: wrap; gap: 0; }
  .fz8c-about-page .site-nav li a { padding: 11px 6px; font-size: .8125rem; border-radius: 2px; }
  .fz8c-about :where(h2[id], section[id], article[id]) { scroll-margin-top: 120px; }
  .fz8c-about .about-hero__layout { padding-block: 52px 64px; }
  .fz8c-about .about-hero::before { background: rgb(8 28 41 / .76); }
  .fz8c-about .about-intro { grid-template-columns: 1fr; gap: 24px; }
  .fz8c-about .about-intro h2 br { display: none; }
  .fz8c-about .about-intro__note { display: none; }
  .fz8c-about .about-content { padding-block: 48px; }
  .fz8c-about .about-contact__layout { grid-template-columns: 1fr auto; gap: 24px; }
  .fz8c-about .about-contact h2 { font-size: 1.625rem; }
  .fz8c-about .about-button { gap: 16px; padding-inline: 18px; }
}
@media (max-width: 580px) {
  .fz8c-about .about-shell { width: calc(100% - 40px); }
  .fz8c-about .about-breadcrumb { padding-top: 12px; }
  .fz8c-about .about-brand { gap: 14px; }
  .fz8c-about .about-brand img { flex-basis: 42px; width: 42px; height: 42px; border-radius: 8px; }
  .fz8c-about .about-brand h1 { font-size: clamp(2.25rem, 10.2vw, 3rem); }
  .fz8c-about .about-hero__promise { margin-top: 16px; font-size: clamp(1rem, 4.6vw, 1.25rem); letter-spacing: .03em; }
  .fz8c-about .about-hero__description { margin-top: 24px; font-size: .9375rem; letter-spacing: 0; }
  .fz8c-about .about-metrics { padding-block: 28px; }
  .fz8c-about .about-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .fz8c-about .about-metric { gap: 8px; }
  .fz8c-about .about-metric:nth-child(3n + 1) { border-inline-start: 1px solid var(--about-line); }
  .fz8c-about .about-metric:nth-child(2n + 1) { border-inline-start: 0; }
  .fz8c-about .about-metric__value { font-size: 2rem; }
  .fz8c-about .about-intro h2 { font-size: 1.625rem; }
  .fz8c-about .about-intro__body > p { font-size: .875rem; }
  .fz8c-about .about-services { margin-top: 36px; }
  .fz8c-about .about-services__heading { margin-bottom: 14px; }
  .fz8c-about .about-services__heading h2 { font-size: 1.125rem; }
  .fz8c-about .about-services__grid { grid-template-columns: 1fr; gap: 22px; }
  .fz8c-about .about-service { padding-top: 18px; }
  .fz8c-about .about-service h3 { margin-top: 8px; }
  .fz8c-about .about-service__answer { margin-top: 8px; }
  .fz8c-about .about-contact { padding-block: 32px; }
  .fz8c-about .about-contact__layout { grid-template-columns: 1fr; gap: 22px; }
  .fz8c-about .about-contact__actions { text-align: start; }
  .fz8c-about .about-contact__actions p { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .fz8c-about *, .fz8c-about *::before, .fz8c-about *::after { animation: none !important; transition: none !important; }
}
@media print {
  .fz8c-about-page .site-header, .fz8c-about-page .site-footer,
  .fz8c-about .about-breadcrumb, .fz8c-about .about-hero__visual,
  .fz8c-about .about-hero::before { display: none; }
  .fz8c-about .about-shell { width: 100%; }
  .fz8c-about .about-hero { background: #fff; color: #173143; }
  .fz8c-about .about-hero :where(p, a, span) { color: #173143; }
  .fz8c-about .about-content { padding-block: 32px; }
}