.volunteer-overview { background:#eef5f0; color:#143039; }
.volunteer-overview__hero { background:linear-gradient(125deg,#08252d,#0c4345); color:#f7fbf7; overflow:hidden; }
.volunteer-overview__hero-inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr); align-items:center; gap:3rem; min-height:540px; padding-block:5rem; }
.volunteer-overview__eyebrow,.volunteer-overview__heading>span { color:#61d6c5; font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.volunteer-overview h1 { max-width:720px; margin:1rem 0 1.5rem; color:inherit; font-size:clamp(3rem,6vw,5.5rem); line-height:1.05; }
.volunteer-overview__copy>p { max-width:620px; color:#c5e4dc; font-size:1.16rem; line-height:1.8; }
.volunteer-overview__actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.volunteer-overview__mark { width:min(100%,360px); aspect-ratio:1; display:flex; direction:ltr; align-items:center; justify-content:center; border:1px solid #5fc8bc77; border-radius:50%; color:#f8d676; font-size:clamp(5rem,10vw,9rem); font-weight:800; letter-spacing:-.15em; transform:rotate(-12deg); box-shadow:0 0 0 38px #4cd4c315,0 0 0 76px #4cd4c30b; }
.volunteer-overview__mark span:nth-child(2) { color:#60d6ce; transform:translateY(-.15em); }
.volunteer-overview__details { padding-block:5rem 6rem; }
.volunteer-overview__heading>span { color:#0b7774; }
.volunteer-overview h2 { color:#0d624d; font-size:clamp(2.2rem,4vw,3.5rem); margin:.8rem 0 2.5rem; }
.volunteer-overview__steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.volunteer-overview__steps article { padding:2rem; background:#fff; border:1px solid #c5ddd3; border-radius:14px; }
.volunteer-overview__steps article>span { color:#0d7772; font-weight:800; }
.volunteer-overview__steps h3 { color:#0d624d; font-size:1.4rem; margin:1.5rem 0 .7rem; }
.volunteer-overview__steps p { color:#58727a; line-height:1.7; }
.volunteer-status { min-height:65vh; }
.volunteer-status__inner { max-width:860px; padding-block:4rem 6rem; }
.volunteer-status__back { display:inline-block; color:#0d624d; margin-bottom:2.5rem; font-weight:700; }
.volunteer-status .volunteer-overview__eyebrow { color:#0d7772; }
.volunteer-status h1 { color:#0d624d; margin-bottom:1rem; }
.volunteer-status__inner>p { color:#58727a; font-size:1.05rem; line-height:1.7; }
.volunteer-status__card { display:flex; gap:2rem; flex-wrap:wrap; padding:1.5rem; margin:2rem 0; background:#fff; border:1px solid #c5ddd3; border-radius:14px; }
.volunteer-status__card>div { display:grid; gap:.4rem; min-width:180px; }
.volunteer-status__card span { color:#58727a; font-size:.84rem; }
.volunteer-status__badge { color:#0d624d; }
.volunteer-status__timeline { list-style:none; padding:0; margin:2rem 0; display:grid; }
.volunteer-status__timeline li { position:relative; display:grid; grid-template-columns:2rem minmax(0,1fr); gap:1rem; padding:0 0 1rem; }
.volunteer-status__timeline li:last-child { padding-bottom:0; }
.volunteer-status__timeline li::before { content:""; position:absolute; top:3rem; bottom:-1rem; inset-inline-start:calc(1rem - 1px); width:2px; background:#b7d2c8; }
.volunteer-status__timeline li:last-child::before { display:none; }
.volunteer-status__timeline li.is-complete::before { background:#0d624d; }
.volunteer-status__timeline li>span { position:relative; z-index:1; align-self:start; margin-top:1rem; width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; background:#d8e9e3; color:#0d624d; font-weight:700; }
.volunteer-status__timeline li.is-reached>span { background:#0d624d; color:#fff; }
.volunteer-status__timeline li>div { padding:1.15rem 1.25rem; border:1px solid #c5ddd3; border-radius:12px; background:#fff; }
.volunteer-status__timeline li:not(.is-reached)>div { background:transparent; }
.volunteer-status__timeline strong { color:#143039; }
.volunteer-status__timeline p { color:#58727a; margin:.35rem 0 0; }
@media(max-width:700px){.volunteer-overview__hero-inner,.volunteer-overview__steps{grid-template-columns:1fr}.volunteer-overview__mark{display:none}.volunteer-overview__hero-inner{min-height:0;padding-block:4rem}.volunteer-overview__details{padding-block:4rem}.volunteer-status__inner{padding-block:3rem 5rem}}