.volunteer-page h2 { font-size: clamp(2.1rem,3.6vw,3.2rem); line-height: 1.1; margin: 0 0 20px; }
.volunteer-page h2 span, .volunteer-page h1 span { color: #62806a; }
.volunteer-page .eyebrow { font-size: .67rem; }
.vol-hero { padding: 54px 0 30px; background: #fffefa; }
.vol-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 58px; align-items: center; }
.vol-hero-copy { display: flex; flex-direction: column; align-items: flex-start; padding-block: 12px; }
.vol-hero-copy .vol-audience { margin: 0 0 22px; padding: 7px 12px; border-radius: 6px; background: #edf2e7; color: #315440; font-size: .875rem; font-weight: 700; line-height: 1.5; }
.vol-hero h1 { font-size: clamp(2.75rem, 4.5vw, 4.1rem); letter-spacing: -.04em; line-height: 1.08; margin: 0; color: #103b2c; }
.vol-hero-copy .vol-intro { color: #52635b; font-size: 1.0625rem; line-height: 1.7; max-width: 44ch; margin: 24px 0 0; }
.vol-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.vol-apply-button { background: #ffd24f; color: #103b2c; border-color: #ffd24f; border-radius: 10px; min-height: 54px; padding: 14px 22px; box-shadow: none; }
.vol-apply-button:hover { background: #f5c439; border-color: #f5c439; }
.vol-role-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #315440; font-size: .94rem; font-weight: 700; text-underline-offset: 5px; }
.vol-role-link:hover { color: #103b2c; }
.vol-text-link { color: #31533d; font-size: .85rem; font-weight: 700; text-decoration: none; }
.vol-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.vol-hero-visual { position: relative; min-height: 480px; border-radius: 100px 24px 24px 24px; overflow: hidden; background: #dde5d5; }
.vol-hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.vol-hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%,#103b2ce8); }
.vol-sticker { position: absolute; z-index: 1; top: 22px; right: 20px; width: 104px; height: 104px; display: grid; place-content: center; background: #ffd24f; color: #173e2b; border-radius: 50%; transform: rotate(10deg); font-size: 1rem; font-weight: 700; line-height: 1.3; text-align: center; }
.vol-photo-note { position: absolute; z-index: 1; bottom: 28px; left: 28px; right: 20px; color: #fffefa; }
.vol-photo-note span { display: block; font-size: .62rem; letter-spacing: .13em; color: #e7eddc; margin-bottom: 8px; }
.vol-photo-note strong { font-size: 1.4rem; }
.vol-section { padding: 76px 0; scroll-margin-top: 100px; }
#roller { padding-top: 0; }
#roller > .container { border-top: 1px solid #dbe4d6; padding-top: 30px; }
#roller .vol-heading .eyebrow { margin: 0 0 10px; }
.vol-heading { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 64px; margin-bottom: 36px; }
.vol-heading h2 { margin-bottom: 0; }
.vol-heading > p { color: #596d5e; font-size: .96rem; line-height: 1.7; margin: 0; }
.vol-role-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.vol-role { display: flex; flex-direction: column; padding: 22px; background: #fffefa; border: 1px solid #dbe4d6; border-radius: 22px; }
.vol-role:nth-child(2) { background: #eff3e9; }
.vol-role:nth-child(3) { background: #fff6d8; }
.vol-role-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: #e3ebdc; color: #2e533b; font-size: 1.65rem; margin-bottom: 16px; }
.vol-role:nth-child(3) .vol-role-icon { background: #ffe895; }
.vol-role h3 { font-size: 1.4rem; line-height: 1.2; margin: 0 0 10px; }
.vol-role > p, .vol-role li { font-size: .87rem; color: #536956; line-height: 1.7; }
.vol-role > p { margin: 0 0 20px; }
.vol-role ul { padding: 20px 0 22px; margin: 0; list-style: none; }
.vol-role li { padding-left: 18px; position: relative; margin: 7px 0; }
.vol-role li::before { content: '·'; position: absolute; left: 0; font-weight: 700; }
.vol-role a { margin-top: auto; padding-top: 17px; border-top: 1px solid #d6dfce; display: flex; justify-content: space-between; gap: 10px; text-decoration: none; color: #234e34; font-size: .84rem; font-weight: 700; }
.vol-role a:hover { text-decoration: underline; }
@media(max-width: 950px) { .vol-hero-grid { gap: 28px; } .vol-role { padding: 22px; } .vol-role-grid { gap: 14px; } .vol-heading { gap: 36px; } }
@media(max-width: 760px) { .vol-hero-grid, .vol-heading { grid-template-columns: 1fr; } .vol-hero-visual { min-height: 380px; border-radius: 48px 20px 20px 20px; } .vol-role-grid { grid-template-columns: 1fr; } .vol-role { padding: 22px; } }
@media(max-width: 480px) { .vol-hero { padding: 36px 0 24px; } #roller > .container { padding-top: 24px; } .vol-hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); } .vol-hero-copy .vol-audience { margin-bottom: 18px; } .vol-actions { gap: 12px 20px; margin-top: 24px; } .vol-section { padding: 48px 0; } }

.vol-application { scroll-margin-top: 0; background: #123c2e; }
.vol-application-grid { display: grid; grid-template-columns: .85fr 1.25fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.vol-application-copy { align-self: center; padding-block: 16px; }
.vol-application-copy h2 { font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.05; letter-spacing: -.035em; margin-bottom: 28px; color: #fffefa; }
.vol-application-copy > p { color: #d4e2d8; font-size: 1.0625rem; line-height: 1.8; max-width: 42ch; margin: 0; }
.vol-safety-link { display: block; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ffffff30; text-decoration: none; }
.vol-safety-link > span { display: block; color: #d4e2d8; font-size: .85rem; margin-bottom: 6px; }
.vol-safety-link strong { display: inline-block; color: #ffe083; font-size: .94rem; line-height: 1.6; }
.vol-safety-link strong span { margin-left: 6px; }
.vol-safety-link:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.vol-safety-link:focus-visible { outline: 3px solid #ffe083; outline-offset: 6px; }
.vol-application-form { min-width: 0; }
.vol-application-form > .form-section { margin-bottom: 0; }
.vol-form-intro { margin: 0 0 22px; color: #52635b; font-size: .94rem; }
.vol-roles-help { margin: 6px 0 12px; color: #52635b; font-size: .88rem; }
.vol-role-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vol-application-form .form-actions { margin-top: 26px; }
.vol-application-form .form-actions button { width: 100%; }
.vol-application-form .form-errors h4 { font-family: inherit; font-size: 1rem; margin: 0 0 10px; }
.vol-application-form :focus-visible { outline: 3px solid #3569b3; outline-offset: 3px; }
.vol-application-form, .vol-application-form [id] { scroll-margin-top: 12px; }
.vol-application-form [data-state="success"] { background: #eaf2ec; color: #113b2d; border-color: #113b2d; }
@media (max-width: 900px) {
 .vol-application-grid { grid-template-columns: 1fr; gap: 28px; }
 .vol-application-copy h2 br { display: none; }
 }
@media (max-width: 600px) {
 .vol-application-copy h2 br { display: initial; }
 .vol-role-options { grid-template-columns: 1fr; }
}


.vol-application-form #vol-form-title { margin: 0 0 12px; font-size: 1.45rem; line-height: 1.3; color: #113b2d; }

/* One-time entrances are handled separately from gentle hover movement. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .volunteer-page .vol-role { transition: transform 240ms ease, box-shadow 240ms ease; }
  .volunteer-page .vol-role:is(:hover, :focus-within) { transform: translateY(-6px); box-shadow: 0 14px 28px rgb(17 59 45 / 10%); }
  .volunteer-page .vol-role-icon, .volunteer-page .vol-sticker { transition: rotate 240ms ease; }
  .volunteer-page .vol-role:is(:hover, :focus-within) .vol-role-icon { rotate: -7deg; }
  .volunteer-page .vol-sticker:hover { rotate: -8deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .volunteer-page :is(.vol-role a, .vol-apply-button, .vol-role-link, .form-actions button) > span[aria-hidden="true"],
  .volunteer-page .vol-safety-link strong > span { display: inline-block; transition: translate 200ms ease; }
  .volunteer-page :is(.vol-role a, .vol-apply-button, .form-actions button):is(:hover, :focus-visible) > span[aria-hidden="true"] { translate: 3px -3px; }
  .volunteer-page .vol-role-link:is(:hover, :focus-visible) > span { translate: 0 3px; }
  .volunteer-page .vol-safety-link:is(:hover, :focus-visible) strong > span { translate: 3px 0; }
}