/* About Kemet: shared layout for the overview and five detail pages. */
/* Shared hospital-photo hero for every About page. */
.about-page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 450px;
    padding: 60px 0;
    box-sizing: border-box;
    overflow: hidden;
    background: #263b33 url('images/hero/hero-2.jpeg') center top / cover no-repeat;
    border: 0;
    border-radius: 0;
}

/* Neutral overlay for readable text */
.about-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.42) 55%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
}

.about-page-hero::after {
    display: none;
}

.about-page-hero > .wrap {
    width: 82%;
    max-width: 1200px;
    margin-inline: auto;
}

@media (max-width: 650px) {
    .about-page-hero > .wrap {
        width: calc(100% - 40px);
    }
}

.about-page-hero .about-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 700px;
    padding: 0;
}

.about-page-hero .eyebrow {
    color: #fff;
}

.about-page-hero h1 {
    max-width: 640px;
    letter-spacing: -.055em;
    margin: 14px 0 20px;
    color: #fff;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.12;
}

.about-page-hero p {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* Reduce the gap before the About content */
@media (max-width: 650px) {
    .about-page-hero {
        min-height: clamp(250px, 70vw, 320px);
        padding: 35px 0;
        background-size: cover;
        background-position: center;
    }

    .about-page-hero::before {
        background: rgba(0, 0, 0, .52);
    }

    .about-page-hero h1 {
        margin: 12px 0 16px;
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        line-height: 1.15;
        letter-spacing: -.035em;
    }

    .about-page-hero p {
        font-size: .95rem;
        line-height: 1.6;
    }

    .about-page-hero + .about-page-section {
        padding-top: 30px;
    }
}

.about-crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 24px;color:#587266;font-size:.86rem}
.about-crumb a{color:#587266}
.about-crumb a:hover{color:#087a55;text-decoration:underline}
.about-page-section{padding-top:45px;padding-bottom:clamp(80px,10vw,120px)}

.about-page-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:start}
.about-subnav{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px;border-left:2px solid #d9e4df}
.about-subnav a{padding:10px 18px;color:#587266;font-weight:600;font-size:.92rem;border-left:2px solid transparent;margin-left:-2px}
.about-subnav a:hover{color:#087a55}
.about-subnav a.is-active{color:#087a55;border-left-color:#087a55;background:#f2f8f5}

.about-page-main{max-width:870px}
.about-page-main>.eyebrow{display:block;margin-bottom:20px}
.about-page-main h2{max-width:760px;margin-bottom:28px;font-size:clamp(2rem,3.4vw,3.25rem);line-height:1.16;color:#123e34}
.about-prose{max-width:750px}
.about-prose p{font-size:clamp(1.04rem,1.5vw,1.15rem);line-height:1.85;color:#455d53;margin:0 0 22px}
.about-principles{margin:42px 0 10px;border-top:1px solid #d9e4df}
.about-principle{display:grid;grid-template-columns:minmax(160px,.55fr) minmax(0,1fr);gap:25px;padding:22px 0;border-bottom:1px solid #d9e4df}
.about-principle h3{font-size:1.13rem;line-height:1.35;margin:0;color:#087a55}
.about-principle p{margin:0;line-height:1.65;color:#455d53}
.about-page-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:38px}
.about-text-link{color:#087a55;font-weight:700}
.about-text-link:hover{text-decoration:underline;text-underline-offset:4px}

@media(max-width:900px){
 .about-page-grid{grid-template-columns:1fr}
 .about-subnav{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;border-bottom:1px solid #d9e4df;padding-bottom:14px}
 .about-subnav a{border-left:0;border-bottom:2px solid transparent;margin-left:0}
 .about-subnav a.is-active{border-left:0;border-bottom-color:#087a55;background:none}
}
@media(max-width:800px){
 .about-crumb{margin-bottom:25px}
}
@media(max-width:600px){
 .about-principle{grid-template-columns:1fr;gap:8px}
 .about-page-actions{align-items:stretch;flex-direction:column;gap:17px}
}