.about-page { background: #fff; }
.about-introduction { padding: 62px 0 74px; }
.about-introduction > .wrap > .eyebrow { color: #136ee5; font-size: clamp(42px, 4.2vw, 66px); font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; }
.about-introduction h1 { max-width: none; margin: 22px 0 44px; color: #111; font-size: clamp(32px, 2.8vw, 46px); font-weight: 500; line-height: 1.14; }
.about-intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); gap: clamp(42px, 4vw, 78px); align-items: start; }
.about-copy { max-width: 900px; font-size: 17px; line-height: 1.66; color: #172431; }
.about-copy p { margin: 0 0 19px; }
.about-company-photo { width: 100%; max-width: none; aspect-ratio: 1.5 / 1; min-height: 0; justify-self: end; background-color: #edf2f6; background-image: url('../images/about/hongli-company-building-no-cars.webp'); background-repeat: no-repeat; background-position: center 58%; background-size: cover; border: 0; border-radius: 24px; }
.about-capability-showcase { padding: 82px 0 92px; background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%); }
.about-showcase-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 34px 72px; align-items: end; margin-bottom: 40px; }
.about-showcase-heading .eyebrow { margin-bottom: 10px; color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.about-showcase-heading h2 { margin: 0; color: var(--navy); font-size: clamp(32px, 3.2vw, 46px); line-height: 1.1; }
.about-showcase-heading p { max-width: 510px; margin: 0; color: #526b84; font-size: 17px; line-height: 1.65; }
.about-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.about-showcase-card { min-width: 0; padding: 20px; border: 1px solid #dbe7f1; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(9, 42, 76, .07); }
.about-showcase-card h3 { margin: 0 0 15px; color: var(--navy); font-size: 19px; line-height: 1.25; }
.about-showcase-card figure { margin: 0; overflow: hidden; border-radius: 11px; background: #eaf1f6; aspect-ratio: 4 / 3; }
.about-showcase-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.about-showcase-card:hover img { transform: scale(1.025); }
.company-gallery-section { padding: 18px 0 88px; overflow: hidden; }
.company-carousel { position: relative; background: #fff; }
.company-carousel-track { position: relative; aspect-ratio: 3.18 / 1; min-height: 250px; }
.company-carousel .carousel-slide img { object-fit: cover; object-position: center; }
.company-carousel-photo { display: block; width: 100%; height: 100%; background-color: #eaf1f6; background-repeat: no-repeat; }
.company-carousel-photo--facility { background-image: url('../images/scissor-lift-table-enhanced.webp'); background-size: cover; background-position: center; }
.company-carousel-photo--installation { background-image: url('../images/fixed-dock-leveler-enhanced.webp'); background-size: cover; background-position: center; }
.company-carousel-control { position: absolute; top: 50%; z-index: 4; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(7, 35, 64, .66); color: #fff; font-size: 34px; font-weight: 300; line-height: 34px; cursor: pointer; transform: translateY(-50%); transition: background .18s ease, transform .18s ease; }
.company-carousel-control:hover, .company-carousel-control:focus-visible { background: #1269b0; transform: translateY(-50%) scale(1.06); }
.company-carousel-control--previous { left: 22px; }
.company-carousel-control--next { right: 22px; }
.certificates-section { padding: 82px 0 94px; background: #f4f7fa; }
.certificate-heading { margin-bottom: 34px; text-align: center; }
.certificate-heading .eyebrow { color: var(--blue); }
.certificate-heading h2 { margin: 7px 0 0; color: var(--ink); font-size: clamp(34px, 4vw, 52px); line-height: 1.1; }
.certificate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.certificate-item { margin: 0; }
.certificate-art { display: flex; min-height: 390px; align-items: center; justify-content: center; overflow: hidden; border: 0; background: #fff; box-shadow: none; }
.certificate-art img { display: block; width: auto; max-width: 100%; max-height: 410px; object-fit: contain; }
.certificate-art:hover, .certificate-art:focus-visible { box-shadow: none; outline: none; transform: none; }
.certificate-item h3 { margin: 17px 4px 0; color: var(--navy); font-size: 17px; line-height: 1.35; }
@media (max-width: 760px) { .about-introduction { padding: 52px 0 46px; }.about-introduction > .wrap > .eyebrow { font-size: clamp(38px, 12vw, 52px); }.about-introduction h1 { margin: 18px 0 28px; font-size: 31px; }.about-intro-grid { grid-template-columns: 1fr; gap: 30px; }.about-copy { max-width: none; font-size: 16px; }.about-company-photo { width: min(100%, 430px); min-height: 0; justify-self: center; background-size: cover; background-position: center 56%; }.about-capability-showcase { padding: 56px 0 62px; }.about-showcase-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }.about-showcase-heading h2 { font-size: 32px; }.about-showcase-heading p { font-size: 16px; }.about-showcase-grid { grid-template-columns: 1fr; gap: 20px; }.about-showcase-card { padding: 14px; border-radius: 15px; }.about-showcase-card h3 { margin-bottom: 11px; font-size: 18px; }.company-gallery-section { padding-bottom: 54px; }.company-carousel-track { aspect-ratio: 1.38 / 1; min-height: 260px; }.company-carousel .carousel-slide img { object-fit: cover; object-position: center; }.company-carousel-photo--facility { background-size: cover; background-position: center; }.company-carousel-photo--installation { background-size: cover; background-position: center; }.company-carousel-control { width: 36px; height: 36px; font-size: 29px; line-height: 29px; }.company-carousel-control--previous { left: 10px; }.company-carousel-control--next { right: 10px; }.certificates-section { padding: 58px 0 62px; }.certificate-grid { grid-template-columns: 1fr; gap: 32px; }.certificate-art { min-height: 0; }.certificate-art img { max-height: 430px; }.certificate-item h3 { font-size: 16px; } }