/* Volunteer page styles are isolated from the shared site. */
.volunteerPage { background: #faf7f2; color: #203852; font-size: 16px; line-height: 1.65; }
.volunteerPage * { box-sizing: border-box; }
.volunteerPage h1, .volunteerPage h2, .volunteerPage h3,
.volunteerPage p, .volunteerPage a, .volunteerPage li { overflow-wrap: break-word; }
.volunteerPage p { font-size: 16px; line-height: 1.75; margin: 0 0 18px; }
.volunteerPage h2 {
    border: 0; color: #203852; font-size: 34px; font-weight: 700; letter-spacing: -0.5px;
    line-height: 1.25; margin: 0 0 18px; padding: 0; text-transform: none;
}
.volunteerPage h3 { color: #203852; font-size: 24px; line-height: 1.35; margin: 0 0 16px; }
.volunteerPage .volunteerKicker {
    color: #24595c; font-size: 14px; font-weight: 700; letter-spacing: 1.5px;
    line-height: 1.5; margin: 0 0 14px; text-transform: uppercase;
}
.volunteerHero { background: #203852; color: #f3f7fb; padding: 54px 0; }
.volunteerHeroGrid { align-items: center; display: grid; gap: 64px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.volunteerHeroGrid > * { min-width: 0; }
.volunteerHero .volunteerKicker { color: #cfe0dc; }
.volunteerHero h1 { color: #fff; font-size: 50px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.12; margin: 0 0 24px; }
.volunteerHero .volunteerHeroLead { color: #fff; font-size: 21px; line-height: 1.6; }
.volunteerHeroCopy > p { max-width: 610px; }
.volunteerActions { align-items: center; display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 28px; }
.volunteerButton { border: 2px solid transparent; border-radius: 5px; display: inline-block; font-size: 16px; font-weight: 700; line-height: 1.5; max-width: 100%; padding: 14px 22px; text-align: center; text-decoration: none; }
.volunteerButtonLight, .volunteerButtonLight:visited { background: #fff; border-color: #fff; color: #203852; }
.volunteerButtonLight:hover, .volunteerButtonLight:focus { background: #e4ece8; border-color: #e4ece8; color: #203852; text-decoration: none; }
.volunteerHeroLink, .volunteerHeroLink:visited { color: #fff; font-size: 14px; font-weight: 700; padding: 12px 0; text-decoration: underline; text-underline-offset: 4px; }
.volunteerHeroLink:hover, .volunteerHeroLink:focus { color: #eac678; }
.volunteerHeroPhoto { border: 1px solid #526779; border-radius: 8px; margin: 0; overflow: hidden; }
.volunteerHeroPhoto img { display: block; height: auto; width: 100%; }
.volunteerHeroPhoto figcaption { background: #172b40; border-top: 4px solid #d6a84b; color: #fff; font-size: 14px; line-height: 1.6; padding: 16px 20px; }
.volunteerSection { padding: 64px 0; scroll-margin-top: 24px; }
.volunteerSectionHeading { max-width: 790px; margin-bottom: 32px; }
.volunteerSectionHeading > p:last-child { color: #52636a; }
.volunteerGrid { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.volunteerCard { background: #fff; border: 1px solid #d7e1dc; border-top: 4px solid #2f6f73; border-radius: 8px; display: flex; flex-direction: column; min-width: 0; padding: 30px; }
.volunteerCard:nth-child(2) { border-top-color: #365581; }
.volunteerCard:nth-child(3) { border-top-color: #775b16; }
.volunteerCard:nth-child(4) { border-top-color: #52636a; }
.volunteerCardTop { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 24px; }
.volunteerNumber { color: #24595c; font-size: 16px; font-weight: 700; }
.volunteerCard .volunteerCommitment { background: #e4ece8; border-radius: 4px; color: #24595c; font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0; padding: 7px 10px; }
.volunteerCard > p, .volunteerCard li { color: #52636a; }
.volunteerCard ul { margin: 0 0 20px; padding-left: 22px; }
.volunteerCard li { font-size: 16px; line-height: 1.7; margin-bottom: 9px; padding-left: 3px; }
.volunteerCardNote { background: #f0f4f1; border-left: 3px solid #d6a84b; margin: 2px 0 22px; padding: 18px 20px; }
.volunteerCardNote strong { display: block; font-size: 16px; margin-bottom: 8px; }
.volunteerCardNote p { color: #394a50; margin: 0; }
.volunteerCard .volunteerTimeNote { border-top: 1px solid #d7e1dc; color: #394a50; font-size: 14px; padding-top: 16px; }
.volunteerCardLink, .volunteerCardLink:visited { align-self: flex-start; color: #24595c; display: inline-block; font-size: 14px; font-weight: 700; line-height: 1.65; margin-top: auto; padding: 12px 0; text-decoration: underline; text-underline-offset: 4px; }
.volunteerCardLink:hover, .volunteerCardLink:focus { color: #203852; }
.volunteerStartSection { background: #e4ece8; padding: 60px 0; scroll-margin-top: 24px; }
.volunteerStartGrid { align-items: start; display: grid; gap: 48px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
.volunteerStartGrid > * { min-width: 0; }
.volunteerStartCopy > p { color: #394a50; }
.volunteerScreening { border-left: 4px solid #d6a84b; margin-top: 26px; padding: 8px 0 8px 20px; }
.volunteerScreening h3 { font-size: 18px; margin-bottom: 8px; }
.volunteerScreening p { color: #394a50; margin: 0; }
.volunteerContact { background: #203852; border-radius: 8px; color: #fff; padding: 32px; }
.volunteerContact .volunteerKicker { color: #cfe0dc; }
.volunteerContact h3 { color: #fff; }
.volunteerEmail, .volunteerEmail:visited { color: #fff; display: inline-block; font-size: 16px; margin-bottom: 22px; padding: 4px 0; text-decoration: underline; text-underline-offset: 4px; }
.volunteerEmail:hover, .volunteerEmail:focus { color: #eac678; }
.volunteerContact .volunteerButton { display: block; width: 100%; }
.volunteerContact .volunteerEmailHint { color: #d9e7f5; font-size: 14px; margin: 16px 0 0; }
@media (max-width: 991px) {
    .volunteerHeroGrid { gap: 32px; }
    .volunteerHero h1 { font-size: 42px; }
    .volunteerStartGrid { gap: 28px; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .volunteerHero { padding: 38px 0; }
    .volunteerHeroGrid, .volunteerGrid { grid-template-columns: minmax(0, 1fr); }
    .volunteerHeroPhoto { max-width: 440px; }
    .volunteerHero h1 { font-size: 36px; }
    .volunteerHero .volunteerHeroLead { font-size: 19px; }
    .volunteerActions { align-items: stretch; flex-direction: column; }
    .volunteerHeroLink { text-align: center; }
    .volunteerSection, .volunteerStartSection { padding: 42px 0; }
    .volunteerPage h2 { font-size: 28px; }
    .volunteerCard, .volunteerContact { padding: 25px 22px; }
    .volunteerCardTop { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
}