.volunteer-hero{padding:120px 0 80px;background-image:url(/assets/images/about/mentor-with-student-robot-kit.jpeg);background-size:cover;background-position:50%;color:var(--white);text-align:center;position:relative}.volunteer-hero:before{content:"";position:absolute;inset:0;background:rgba(15,23,42,.85);z-index:1}.volunteer-hero .container{position:relative;z-index:2}.volunteer-hero h1{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:var(--spacing-sm);color:var(--white)}.volunteer-hero p{font-size:1.25rem;max-width:600px;margin:0 auto;color:var(--light-gray)}.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:var(--spacing-xl);gap:var(--spacing-xl)}.benefit-card{text-align:center}.benefit-card .icon{font-size:3rem;background:var(--light-gray);width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0 auto var(--spacing-md)}.benefit-card h4{font-size:1.25rem;margin-bottom:var(--spacing-sm)}.benefit-card p{color:var(--medium-gray)}.volunteer-layout{display:grid;grid-template-columns:1fr 1fr;grid-gap:var(--spacing-2xl);gap:var(--spacing-2xl)}.roles-content h2{font-size:2rem;margin-bottom:var(--spacing-md);color:var(--deep-navy)}.roles-content>p{font-size:1.125rem;color:var(--dark-slate);margin-bottom:var(--spacing-lg)}.roles-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.role-item{background:var(--white);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border-left:4px solid var(--vibrant-teal)}.role-item h3{font-size:1.25rem;margin-bottom:var(--spacing-xs);color:var(--electric-blue)}.role-item p{color:var(--dark-slate);margin-bottom:var(--spacing-sm)}.role-item p:last-child{margin-bottom:0;color:var(--medium-gray);font-size:.875rem}.volunteer-card{background:var(--white);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--light-gray);position:-webkit-sticky;position:sticky;top:100px}.volunteer-card h3{font-size:1.5rem;margin-bottom:var(--spacing-xs)}.volunteer-card>p{color:var(--medium-gray);margin-bottom:var(--spacing-lg);font-size:.875rem}.volunteer-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-select{padding:.75rem;border:1px solid var(--medium-gray);border-radius:var(--radius-sm);font-family:var(--font-body);width:100%;background:var(--white)}@media (max-width:768px){.benefits-grid,.volunteer-layout{grid-template-columns:1fr}}