/* Company evidence and project experience, scoped to the About page. */
.about-page { color: #17191d; overflow-wrap: anywhere; }
.about-page p, .about-page dd { font-size: 18px; line-height: 1.75; color: #505862; }
.about-page .eyebrow { font-size: 14px; line-height: 1.5; }
.about-page h2 { font-size: 36px; line-height: 1.25; }
.about-page h3 { font-size: 23px; line-height: 1.35; }
.about-page .actions { flex-wrap: wrap; gap: 20px 30px; }
.about-page .button, .about-page .inline-link { font-size: 16px; white-space: normal; max-width: 100%; }
.about-page a:focus-visible { outline: 3px solid #164ed8; outline-offset: 5px; }
.about-page [id] { scroll-margin-top: 112px; }
.about-intro { padding-block: 60px 52px; }
.about-intro h1 { font-size: 56px; line-height: 1.12; margin-block: 20px 24px; }
.about-intro .about-lead { font-size: 26px; line-height: 1.4; color: #17191d; }
.about-intro-copy { max-width: 850px; margin-block: 20px 26px; }
.about-facts { background: #17191d; }
.about-facts dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-block: 0; padding-block: 32px; }
.about-facts dl > div { display: flex; flex-direction: column-reverse; justify-content: end; gap: 8px; }
.about-facts dl > div + div { border-left: 1px solid #41454c; padding-left: 36px; }
.about-facts dt { font-size: 16px; color: #d4d8df; }
.about-facts dd { font-size: 36px; line-height: 1.2; font-weight: 650; color: #fff; margin: 0; }
.about-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; margin-bottom: 36px; }
.about-section-heading p + p { margin-top: 18px; }
.about-section-heading h2 + p { margin-top: 24px; }
.about-section-heading .inline-link { margin-top: 20px; }
.about-section-intro { max-width: 800px; margin-block: 24px 32px; }
.about-factory-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.about-factory-photos figure { margin: 0; }
.about-factory-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.about-factory-photos figcaption { color: #505862; font-size: 15px; margin-top: 10px; }
.about-teams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 48px; }
.about-teams article { border-top: 1px solid #ced3dc; padding-top: 24px; }
.about-teams svg { width: 36px; height: 36px; color: #164ed8; margin-bottom: 18px; }
.about-teams h3 { margin-bottom: 14px; }
.about-cooperation-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-block: 24px 36px; }
.about-cooperation-intro > p { margin: 0; }
.about-odm-steps { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.about-odm-step { padding-top: 20px; border-top: 2px solid #164ed8; }
.about-odm-step > span { display: block; font-size: 16px; color: #164ed8; font-weight: 700; margin-bottom: 16px; }
.about-odm-step h3 { font-size: 21px; margin-bottom: 14px; }
.about-odm-step p { font-size: 17px; }
.about-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.about-cases article { border-top: 2px solid #164ed8; padding-top: 26px; }
.about-cases h3 { font-size: 28px; margin-bottom: 20px; }
.about-cases dl { margin: 24px 0 0; }
.about-cases dl > div + div { margin-top: 22px; }
.about-cases dt { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.about-cases dd { margin: 0; }
.about-page .about-note { font-size: 16px; margin-block: 28px 20px; }
.about-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.about-quality-grid article { border-top: 1px solid #ced3dc; padding-top: 26px; }
.about-quality-grid .about-document-names { font-size: 20px; color: #164ed8; font-weight: 650; margin-block: 16px 12px; }
.about-delivery-options { border-top: 1px solid #ced3dc; }
.about-delivery-options article { padding-block: 22px; border-bottom: 1px solid #ced3dc; }
.about-delivery-options h3 { margin-bottom: 12px; }
.about-email { display: inline-block; color: #164ed8; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; font-size: 22px; margin-top: 22px; }
.about-product-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding-top: 16px; }
.about-product-links > a { min-width: 0; display: flex; align-items: center; gap: 20px; border-block: 1px solid #e0e3e8; padding-block: 18px; }
.about-product-links img { display: block; width: 112px; height: 112px; object-fit: contain; flex: 0 0 112px; }
.about-product-links span { font-size: 20px; font-weight: 600; }
.about-product-links span svg { display: inline-block; width: 20px; height: 20px; margin-left: 10px; vertical-align: middle; }
.about-company { background: #17191d; color: #fff; }
.about-company .spc-company-details { border: 0; padding: 0; margin: 0; gap: 64px; }
.about-page .about-company h2 { font-size: 28px; color: #fff; }
.about-page .about-company p, .about-page .about-company dd { color: #d4d8df; font-size: 18px; line-height: 1.75; }
.about-company .spc-company-addresses dt { color: #fff; font-size: 18px; }
.about-company .spc-contact-links a { color: #fff; font-size: 18px; text-decoration: underline; text-underline-offset: 4px; }
.about-company .about-owner-support { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; margin-top: 32px; border-top: 1px solid #41454c; }
.about-company .inline-link { color: #fff; flex-shrink: 0; }
.about-company a:focus-visible { outline-color: #fff; }
@media (max-width: 1100px) {
 .about-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .about-odm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .about-section-heading, .about-cases { gap: 36px; }
 .about-product-links > a { flex-direction: column; align-items: flex-start; gap: 10px; }
 .about-company .spc-company-details { gap: 36px; }
}
@media (max-width: 759px) {
 .about-page .section { padding-block: 48px; }
 .about-page h2 { font-size: 30px; }
 .about-intro { padding-block: 40px; }
 .about-intro h1 { font-size: 36px; }
 .about-intro .about-lead { font-size: 23px; }
 .about-facts dl { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 28px; }
 .about-facts dl > div + div { border-left: 0; border-top: 1px solid #41454c; padding: 20px 0 0; }
 .about-facts dd { font-size: 30px; }
 .about-section-heading, .about-factory-photos, .about-cooperation-intro, .about-cases, .about-quality-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .about-odm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
 .about-cases h3 { font-size: 25px; }
 .about-company .about-owner-support { display: block; }
 .about-page .about-company h2 { font-size: 26px; }
 .about-company .about-owner-support .inline-link { margin-top: 18px; }
 .about-company .spc-company-details { grid-template-columns: minmax(0, 1fr); }
 .about-product-links { grid-template-columns: minmax(0, 1fr); gap: 0; }
 .about-product-links > a { flex-direction: row; align-items: center; gap: 22px; border-bottom: 0; }
 .about-product-links > a:last-child { border-bottom: 1px solid #e0e3e8; }
 .about-product-links img { width: 88px; height: 88px; flex-basis: 88px; }
}
@media (max-width: 479px) {
 .about-teams, .about-odm-steps { grid-template-columns: minmax(0, 1fr); }
}
