@charset "utf-8";
/* CSS Document */
/*    VOLUNTEER PAGE    */

/* Keep volunteer section containers above decorative/background layers */
body.pf-page-volunteer .pf-vol-band .pf-container,
body.pf-page-volunteer .pf-vol-split .pf-container,
body.pf-page-volunteer .pf-vol-steps .pf-container,
body.pf-page-volunteer .pf-vol-compare .pf-container,
body.pf-page-volunteer .pf-vol-cta .pf-container,
body.pf-page-volunteer .pf-vol-contact .pf-container{
  position: relative;
  z-index: 2;
}

/* Lucide icons inside step cards */
body.pf-page-volunteer .pf-vol-step__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(187,22,84,0.08);
  color: var(--pf-red);
}

body.pf-page-volunteer .pf-vol-step__icon svg{
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.9;
}

/* Button groups */
body.pf-page-volunteer .pf-image-hero__actions,
body.pf-page-volunteer .pf-vol-cta__buttons,
body.pf-page-volunteer .pf-vol-band__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Before apply section */
body.pf-page-volunteer .before-apply{
  width: 100%;
}

/* Notes under section grids */
body.pf-page-volunteer .pf-vol-steps__note,
body.pf-page-volunteer .pf-vol-compare__note{
  margin-top: 1.5rem;
}

body.pf-page-volunteer .pf-vol-steps__note .pf-vol-p,
body.pf-page-volunteer .pf-vol-compare__note .pf-vol-p{
  max-width: 45rem;
  margin: 0 auto;
}

/* Mobile button stack */
@media (max-width: 760px){
  body.pf-page-volunteer .pf-image-hero__actions,
  body.pf-page-volunteer .pf-vol-cta__buttons,
  body.pf-page-volunteer .pf-vol-band__cta{
    flex-direction: column;
    align-items: stretch;
  }
}

/* How volunteering works */
body.pf-page-volunteer .pf-vol-steps{
  padding: 4rem 0;
  background: #f7f7f7;
}

body.pf-page-volunteer .pf-vol-steps__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

body.pf-page-volunteer .pf-vol-step{
  background: #fff;
  padding: 2rem;
  border: 1px solid #ece7ea;
  border-radius: 1rem;
  height: 100%;
}

body.pf-page-volunteer .pf-vol-step__icon{
  margin-bottom: 1rem;
}

body.pf-page-volunteer .pf-vol-steps__note{
  margin-top: 1.5rem;
}

body.pf-page-volunteer .pf-vol-step h3{
  margin: 0 0 0.75rem;
}

body.pf-page-volunteer .pf-vol-step p{
  margin: 0;
}

body.pf-page-volunteer .pf-vol-step__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: rgba(187,22,84,0.08);
  color: var(--pf-red);
}

body.pf-page-volunteer .pf-vol-step__icon svg{
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 1.9;
}

body.pf-page-volunteer .pf-vol-steps__note{
  margin-top: 2rem;
}

body.pf-page-volunteer .pf-vol-steps__note p{
  max-width: 42rem;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 900px){
  body.pf-page-volunteer .pf-vol-steps__grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Quote band */
body.pf-page-volunteer .pf-vol-band--quote{
  padding: 5rem 0;
  text-align: center;
  background: #f7f7f7; /* or remove if you want it white */
}

body.pf-page-volunteer .pf-vol-quote{
  max-width: 48rem;
  margin: 0 auto 2rem;
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--pf-text-dark);
}

body.pf-page-volunteer .pf-vol-band__cta{
  justify-content: center;
}

/* Before you apply */
body.pf-page-volunteer .pf-vol-band--soft{
  padding: 4rem 0;
}

body.pf-page-volunteer .before-apply{
  width: 100%;
}

body.pf-page-volunteer .before-apply-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2rem;
}

body.pf-page-volunteer .before-item h3{
  margin: 0 0 0.75rem;
}

body.pf-page-volunteer .before-item p{
  margin: 0;
}

/* One afternoon or week after week */
body.pf-page-volunteer .pf-vol-compare{
  padding: 4rem 0;
}

body.pf-page-volunteer .pf-vol-compare__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

body.pf-page-volunteer .pf-vol-compare__item{
  padding: 0;
}

body.pf-page-volunteer .pf-vol-compare__label{
  display: inline-block;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

body.pf-page-volunteer .pf-vol-compare__item h3{
  margin: 0 0 0.75rem;
}

body.pf-page-volunteer .pf-vol-compare__item p{
  margin: 0;
}

body.pf-page-volunteer .pf-vol-compare__note{
  margin-top: 1.5rem;
}

/* Mobile */
@media (max-width: 900px){
  body.pf-page-volunteer .before-apply-grid,
  body.pf-page-volunteer .pf-vol-compare__grid{
    grid-template-columns: 1fr;
  }
}

/* Photo band */
body.pf-page-volunteer .pf-photo-band{
  padding: 4rem 0;
}

body.pf-page-volunteer .pf-photo-band-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

body.pf-page-volunteer .pf-photo-band-media img{
  display: block;
  width: 100%;
  height: 28rem;
  object-fit: cover;
}

body.pf-page-volunteer .pf-photo-band-copy h2{
  margin: 0 0 1rem;
}

body.pf-page-volunteer .pf-photo-band-copy p{
  margin: 0 0 1.5rem;
  max-width: 32rem;
}

@media (max-width: 900px){
  body.pf-page-volunteer .pf-photo-band-inner{
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body.pf-page-volunteer .pf-photo-band-media img{
    height: auto;
  }
}

/* Mobile */
@media (max-width: 900px){
  body.pf-page-volunteer .pf-photo-band-inner{
    grid-template-columns: 1fr;
  }
}

body.pf-page-volunteer .pf-vol-compare{
  padding: 4rem 0;
}

body.pf-page-volunteer .pf-vol-compare__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  margin-top: 2rem;
}

body.pf-page-volunteer .pf-vol-compare__item{
  padding-top: 1.5rem;
}

body.pf-page-volunteer .pf-vol-compare__item:first-child{
  border-top: 3px solid var(--pf-red);
}

body.pf-page-volunteer .pf-vol-compare__item:last-child{
  border-top: 3px solid var(--pf-orange);
}

body.pf-page-volunteer .pf-vol-compare__item:first-child .pf-vol-compare__label{
  color: var(--pf-red);
}

body.pf-page-volunteer .pf-vol-compare__item:last-child .pf-vol-compare__label{
  color: var(--pf-orange);
}

body.pf-page-volunteer .pf-vol-compare__label{
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.pf-page-volunteer .pf-vol-compare__item h3{
  margin: 0 0 0.75rem;
}

body.pf-page-volunteer .pf-vol-compare__item p{
  margin: 0;
}

body.pf-page-volunteer .pf-vol-compare__note{
  margin-top: 2rem;
}

body.pf-page-volunteer .pf-vol-compare__note p{
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 900px){
  body.pf-page-volunteer .pf-vol-compare__grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

body.pf-page-volunteer .pf-photo-band{
  padding: 3.5rem 0;
}


body.pf-page-volunteer .pf-vol-cta{
  padding: 4rem 0 4.5rem;
  border-top: 1px solid #e8e3e6;
}

body.pf-page-volunteer .pf-vol-cta__inner{
  max-width: 52rem;
}

body.pf-page-volunteer .pf-vol-cta__title{
  margin: 0 0 0.75rem;
}

body.pf-page-volunteer .pf-vol-cta__text{
  margin: 0 0 1.5rem;
}

body.pf-page-volunteer .pf-vol-cta__buttons{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

body.pf-page-volunteer .pf-vol-contact{
  padding: 4rem 0 5rem;
}

body.pf-page-volunteer .pf-vol-contact__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.9fr);
  gap: 3rem;
  align-items: start;
}

body.pf-page-volunteer .pf-vol-contact__name{
  margin: 1.5rem 0 1rem;
}

body.pf-page-volunteer .pf-vol-contact__card{
  padding: 1.75rem;
  border: 1px solid #e7e2e5;
  border-top: 4px solid var(--pf-orange);
  background: #fff;
}

body.pf-page-volunteer .pf-vol-contact__cardTitle{
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--pf-text);
}

body.pf-page-volunteer .pf-vol-contact__card .pf-vol-p{
  margin-bottom: 1.25rem;
}

body.pf-page-volunteer .pf-vol-contact__cardBtn{
  width: auto;
  display: inline-block;
  padding: 0.85rem 1.4rem;
}

@media (max-width: 900px){
  body.pf-page-volunteer .pf-vol-contact__grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body.pf-page-volunteer .pf-vol-contact__cardBtn{
    width: auto;
  }
}

.pf-before-apply__grid{
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(260px,0.8fr);
  gap: 3rem;
  align-items: start;
}

.pf-before-apply__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

body.pf-page-volunteer .pf-vol-options{
  padding: 4.5rem 0;
}

body.pf-page-volunteer .pf-vol-options__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 3rem;
  align-items: start;
}

body.pf-page-volunteer .pf-vol-options__compare .pf-vol-compare__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

body.pf-page-volunteer .pf-vol-compare__item{
  padding: 1.5rem 0 0;
}

body.pf-page-volunteer .pf-vol-compare__item--red{
  border-top: 3px solid var(--pf-red);
}

body.pf-page-volunteer .pf-vol-compare__item--orange{
  border-top: 3px solid var(--pf-orange);
}

body.pf-page-volunteer .pf-vol-compare__item--red .pf-vol-compare__label{
  color: var(--pf-red);
}

body.pf-page-volunteer .pf-vol-compare__item--orange .pf-vol-compare__label{
  color: var(--pf-orange);
}

body.pf-page-volunteer .pf-vol-compare__label{
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.pf-page-volunteer .pf-vol-compare__item h3{
  margin: 0 0 0.75rem;
}

body.pf-page-volunteer .pf-vol-compare__item p{
  margin: 0;
}

body.pf-page-volunteer .pf-vol-compare__note{
  margin-top: 1.75rem;
}

body.pf-page-volunteer .pf-vol-options__cta{
  border: 1px solid #e7e2e5;
}

/* VOLUNTEER DETAILS / ACCORDION SECTION */
body.pf-page-volunteer .pf-vol-details{
  padding: 4.5rem 0;
  background: #d78c3d;
  color: #ffffff;
}

.pf-vol-details p{
  color: rgba(255,255,255,0.92);
}

body.pf-page-volunteer .pf-vol-details .pf-container{
  max-width: 76rem;
}

body.pf-page-volunteer .pf-vol-details__grid{
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: 3.5rem;
  align-items: stretch;
}

body.pf-page-volunteer .pf-vol-details__media,
body.pf-page-volunteer .pf-vol-details__content{
  min-width: 0;
}

body.pf-page-volunteer .pf-vol-details__media-frame{
  height: 100%;
  display: flex;
  flex-direction: column;
}

body.pf-page-volunteer .pf-vol-details__image{
  display: none;
  width: 100%;
  height: 34rem;
  object-fit: cover;
}

body.pf-page-volunteer .pf-vol-details__image.is-active{
  display: block;
}

body.pf-page-volunteer .pf-vol-details__caption{
  padding: 1rem 0 0;
  font-size: 0.975rem;
  line-height: 1.6;
  color: #5a514c;
}

body.pf-page-volunteer .pf-vol-details__content{
  padding: 0.25rem 0;
}

body.pf-page-volunteer .pf-vol-details__intro{
  max-width: 36rem;
  margin: 0 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Accordion */
body.pf-page-volunteer .pf-vol-accordion{
  border-top: 1px solid rgba(51,51,51,0.14);
}

body.pf-page-volunteer .pf-vol-accordion__item{
  border-bottom: 1px solid rgba(255,255,255,0.25);

}

body.pf-page-volunteer .pf-vol-accordion__trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  font: inherit;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.25;
  cursor: pointer;
}

body.pf-page-volunteer .pf-vol-accordion__trigger:hover{
  color: #fff;
}

body.pf-page-volunteer .pf-vol-accordion__icon{
  flex: 0 0 auto;
  font-size: 1.75rem;
  line-height: 1;
  color: #ffffff;
  opacity: 0.85;
}

body.pf-page-volunteer .pf-vol-accordion__panel{
  padding: 0 2.5rem 1.25rem 0;
}

body.pf-page-volunteer .pf-vol-accordion__panel p{
  margin: 0;
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #fff;
}

@media (max-width: 980px){
  body.pf-page-volunteer .pf-vol-details__grid{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  body.pf-page-volunteer .pf-vol-details__image{
    height: auto;
    max-height: 32rem;
  }
}
/*<------ APPLICATION */
body.pf-page-volunteer-application .pf-form-section{
  padding: 4rem 0 5rem;
}

body.pf-page-volunteer-application .pf-form-wrap{
  max-width: 75rem;
  margin: 0 auto;
}