/* About page treatment; shared components and tokens remain in site.css. */
.about-page .container { width: min(1280px, 89%); }

.about-hero {
    position: relative;
    min-height: 348px;
    overflow: hidden;
    color: #fff;
    background-color: #111;
    background-image: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.58) 49%, rgba(0,0,0,.2) 100%), url("../images/about/industrial-hero.jpg");
    background-repeat: no-repeat;
    background-position: center, right center;
    background-size: cover, cover;
}
.about-hero-inner { display: flex; min-height: 348px; align-items: stretch; }
.about-hero-copy { width: min(690px, 100%); padding-top: 70px; }
.about-hero-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.25; }
.about-hero-kicker span { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-orange); }
.about-hero h1 { margin: 0; color: #fff; font-size: 76px; font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
.about-hero-rule { width: 100%; height: 1px; margin-top: 24px; background: rgba(255,255,255,.72); }
.about-breadcrumb { display: flex; align-items: center; gap: 12px; margin-top: 17px; color: #f2f2f2; font-size: 11px; line-height: 1.3; }
.about-breadcrumb a:hover { color: var(--color-orange); }

.about-categories { padding-block: 65px 106px; }
.about-categories .section-heading { margin-bottom: 28px; }
.about-categories .category-image { height: 304px; }
.about-categories .category-meta { min-height: 94px; }

.about-selection { padding-block: 68px 60px; }
.about-selection .section-heading { margin-bottom: 41px; }
.about-selection .section-description { max-width: 1000px; }
.about-selection .comparison-table th,
.about-selection .comparison-table td { padding-block: 28.75px; }
.about-selection .comparison-table thead th { padding-block: 26px; }

.about-industrial-air { padding-block: 66px 73px; }
.about-industrial-air .section-heading { margin-bottom: 28px; }
.about-industrial-air .brief-grid { gap: 26px; }
.about-industrial-air .brief-card { min-height: 245px; }

.about-why {
    position: relative;
    min-height: 803px;
    padding-block: 75px 73px;
    overflow: hidden;
    isolation: isolate;
    background: #080808 url("../images/hero/factory-right.jpg") center 55% / cover no-repeat;
}
.about-why::before { position: absolute; z-index: -1; inset: 0; background: rgba(0,0,0,.76); content: ""; }
.about-why .container { position: relative; z-index: 1; }
.about-why .section-heading { margin-bottom: 42px; }
.about-why .section-heading h2 span { color: var(--color-orange); }
.about-why .problem-grid { gap: 24px; margin-top: 0; }
.about-why .problem-card { min-height: 255px; padding: 46px 30px 30px; background: rgba(9,9,9,.7); border-color: rgba(255,255,255,.11); border-left: 2px solid var(--color-orange); }
.about-why .problem-card h3 { margin-bottom: 12px; font-size: 20px; }
.about-why .problem-card p { max-width: 570px; font-size: 13px; line-height: 1.45; }
.about-why .problem-card a { margin-top: 23px; font-size: 12px; }

.about-equipment { min-height: 603px; padding-block: 65px 72px; }
.about-equipment .section-heading { margin-bottom: 28px; }
.about-equipment .section-description { max-width: 1120px; }
.equipment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.equipment-card { display: grid; min-width: 0; min-height: 302px; grid-template-columns: 48% 52%; border: 1px solid #e5e5e3; background: #fff; }
.equipment-image { display: grid; min-width: 0; place-items: center; overflow: hidden; background: #f4f4f3; }
.equipment-image img { width: 100%; height: 100%; object-fit: contain; }
.equipment-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: 26px 28px 24px 36px; border-left: 1px solid #ededeb; }
.equipment-copy h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.equipment-copy p { margin: 0 0 17px; color: var(--color-muted); font-size: 13px; line-height: 1.45; }
.equipment-copy .text-link { font-size: 12px; }

.about-faq { min-height: 457px; padding-block: 66px 73px; }
.about-faq .faq-layout { grid-template-columns: .72fr 1.75fr; gap: 65px; }
.about-faq .faq-intro .eyebrow { margin-bottom: 16px; }
.about-faq .faq-intro h2 { font-size: 42px; }
.about-faq-list { min-width: 0; }
.about-faq-item { border-bottom: 1px solid #dededc; }
.about-faq-item h3 { margin: 0; }
.about-faq-question { display: flex; width: 100%; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border: 0; background: transparent; color: var(--color-ink); text-align: left; font-size: 16px; font-weight: 700; cursor: pointer; }
.about-faq-mark { flex: 0 0 auto; color: var(--color-orange); font-size: 19px; font-weight: 400; }
.about-faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .24s ease, opacity .2s ease; }
.about-faq-item.is-open .about-faq-answer { grid-template-rows: 1fr; opacity: 1; }
.about-faq-answer-inner { min-height: 0; overflow: hidden; }
.about-faq-answer p { margin: 0; padding: 0 38px 16px 0; color: var(--color-muted); font-size: 13px; line-height: 1.5; }

/* These pages use the same shared footer; this small difference matches its supplied crop. */
.about-page .footer-contact { display: none; }

@media (max-width: 1180px) {
    .about-page .about-hero h1 { font-size: 68px; }
    .about-why .problem-card { padding-inline: 24px; }
    .equipment-copy { padding-inline: 24px; }
    .about-faq .faq-layout { gap: 38px; }
}

@media (max-width: 980px) {
    .about-page .container { width: calc(100% - 48px); }
    .about-categories, .about-selection, .about-industrial-air, .about-equipment, .about-faq { min-height: 0; padding-block: 60px; }
    .about-why { min-height: 0; padding-block: 64px; }
    .about-why .section-heading { margin-bottom: 30px; }
    .about-why .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-why .problem-card { min-height: 245px; padding: 30px 22px 24px; }
    .about-equipment .equipment-grid { gap: 16px; }
    .equipment-card { min-height: 280px; }
    .equipment-copy { padding: 20px; }
    .about-faq .faq-intro h2 { font-size: 36px; }
}

@media (max-width: 700px) {
    .about-page .container { width: calc(100% - 36px); }
    .about-hero, .about-hero-inner { min-height: 320px; }
    .about-hero { background-position: center, right center; background-size: cover, auto 100%; }
    .about-hero-copy { padding-top: 55px; }
    .about-hero-kicker { margin-bottom: 18px; font-size: 13px; }
    .about-hero h1 { font-size: 60px; }
    .about-hero-rule { margin-top: 22px; }
    .about-categories, .about-selection, .about-industrial-air, .about-equipment, .about-faq { padding-block: 48px; }
    .about-why { padding-block: 48px; }
    .about-why .problem-grid { grid-template-columns: 1fr; gap: 12px; }
    .about-why .problem-card { min-height: 0; padding: 24px 20px; }
    .about-why .problem-card a { margin-top: 16px; }
    .equipment-grid { grid-template-columns: 1fr; gap: 14px; }
    .equipment-card { min-height: 240px; grid-template-columns: .83fr 1.17fr; }
    .equipment-copy { padding: 16px 14px; }
    .equipment-copy h3 { margin-bottom: 8px; font-size: 15px; }
    .equipment-copy p { margin-bottom: 11px; font-size: 11px; }
    .equipment-copy .text-link { font-size: 11px; }
    .about-faq .faq-layout { grid-template-columns: 1fr; gap: 22px; }
    .about-faq .faq-intro h2 { font-size: clamp(30px, 8vw, 38px); }
    .about-faq .faq-intro h2 br { display: none; }
    .about-faq-question { min-height: 58px; font-size: 13px; }
    .about-faq-answer p { padding-right: 20px; font-size: 12px; }
}