.involved-page { overflow-x: hidden; background: #f7f7f2; }
.involved-page .primary-nav .active { color: var(--orange); border-bottom-color: var(--orange); }
.involved-hero { position: relative; min-height: 760px; overflow: hidden; color: #fff; background: var(--ink); }
.hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px); background-size: 72px 72px; transform: perspective(700px) rotateX(56deg) scale(1.5); transform-origin: bottom; }
.hero-kicker { position: absolute; top: clamp(3rem,7vw,7rem); left: max(3rem,calc((100vw - 1240px)/2)); z-index: 2; }
.hero-kicker .eyebrow { color: var(--lime); }.hero-kicker > span { display: block; color: rgba(255,255,255,.48); font: 800 clamp(1.4rem,2vw,2rem)/1 "Barlow Semi Condensed",sans-serif; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-90deg) translateX(-100%); transform-origin: top left; }
.hero-statement { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: clamp(9rem,14vw,13rem) 3rem 7rem 15%; }
.hero-statement h1, .ways h2, .movement-path h2, .involved-close h2 { margin: 0; font-family: "Barlow Semi Condensed",Impact,sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: .86; text-transform: uppercase; }
.hero-statement h1 { font-size: clamp(5.4rem,10.8vw,11rem); }.hero-statement h1 em { color: var(--orange); font-style: normal; }.hero-statement > p { max-width: 520px; margin: 2rem 0 0 auto; color: rgba(255,255,255,.78); font-size: clamp(1.08rem,1.5vw,1.3rem); }
.hero-signal { position: absolute; right: -5rem; bottom: -5rem; width: 370px; height: 370px; }.hero-signal span { position: absolute; inset: 0; border: 2px solid rgba(224,227,32,.5); border-radius: 50%; }.hero-signal span:nth-child(2) { inset: 42px; }.hero-signal span:nth-child(3) { inset: 84px; background: var(--lime); border: 0; }
.ways { max-width: 1240px; margin: 0 auto; padding: clamp(7rem,11vw,11rem) 3rem; }.ways-heading { display: grid; grid-template-columns: .8fr 1fr; gap: 0 5rem; align-items: end; margin-bottom: 5rem; }.ways-heading .eyebrow { grid-column: 1/-1; color: var(--purple); }.ways h2, .movement-path h2, .involved-close h2 { font-size: clamp(4rem,7vw,7.2rem); }.ways-heading > p:last-child { max-width: 430px; margin: 0 0 .5rem; color: #586d73; }
.action-board { border-top: 1px solid rgba(23,47,55,.24); }.action-card { --action: var(--teal-bright); display: grid; grid-template-columns: minmax(0,1fr) 70px; gap: 2rem; align-items: center; min-height: 210px; padding: 2.5rem 1.4rem; color: var(--ink); border-bottom: 1px solid rgba(23,47,55,.24); text-decoration: none; transition: color 220ms ease,background 220ms ease,padding 220ms ease; }.action-news { --action: var(--moss); }.action-events { --action: var(--orange); }.action-donate { --action: var(--purple); }.action-card:hover,.action-card:focus-visible { padding-right: 2rem; padding-left: 2rem; color: #fff; background: var(--action); }.action-copy { display: grid; grid-template-columns: minmax(250px,.75fr) 1fr; column-gap: 4rem; align-items: center; }.action-verb { grid-column: 1/-1; margin: 0 0 .35rem; color: var(--action); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.action-card:hover .action-verb,.action-card:focus-visible .action-verb { color: var(--lime); }.action-copy h3 { margin: 0; font: 800 clamp(2.7rem,4.8vw,5rem)/.9 "Barlow Semi Condensed",sans-serif; text-transform: uppercase; }.action-copy > p:last-child { max-width: 440px; margin: 0; color: #5a6d73; }.action-card:hover .action-copy > p:last-child,.action-card:focus-visible .action-copy > p:last-child { color: rgba(255,255,255,.82); }.action-arrow { font-size: 2.2rem; text-align: right; transition: transform 220ms ease; }.action-card:hover .action-arrow,.action-card:focus-visible .action-arrow { transform: translate(5px,-5px); }
.movement-path { padding: clamp(7rem,11vw,11rem) max(3rem,calc((100vw - 1240px)/2)); color: #fff; background: var(--purple); }.movement-heading { display: flex; justify-content: space-between; gap: 4rem; align-items: end; margin-bottom: 5rem; }.movement-heading .eyebrow { color: var(--lime); }.movement-steps { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.35); }.movement-steps article { position: relative; min-height: 280px; padding: 2rem 1.5rem; border-right: 1px solid rgba(255,255,255,.35); }.movement-steps article:last-child { border-right: 0; }.movement-steps strong { display: block; margin-top: 3.5rem; font: 800 clamp(2.2rem,3.7vw,3.8rem)/1 "Barlow Semi Condensed",sans-serif; text-transform: uppercase; }.movement-steps p { color: rgba(255,255,255,.76); }.movement-steps article:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -18px; display: grid; width: 36px; height: 36px; place-items: center; content: "→"; color: var(--ink); background: var(--lime); border-radius: 50%; font-weight: 800; transform: translateY(-50%); }
.involved-close { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 5rem; align-items: end; min-height: 620px; padding: clamp(7rem,11vw,11rem) max(3rem,calc((100vw - 1240px)/2)); overflow: hidden; color: var(--ink); background: var(--lime); }.close-copy { position: relative; z-index: 2; }.close-copy .eyebrow { color: var(--purple); }.close-copy > p:last-child { max-width: 570px; margin: 2rem 0 0; font-size: 1.2rem; }.close-link { position: relative; z-index: 2; display: inline-flex; gap: 2rem; align-items: center; padding: 1.2rem 1.5rem; color: #fff; background: var(--ink); border-radius: 999px; font-weight: 800; text-decoration: none; text-transform: uppercase; transition: transform 200ms ease,background 200ms ease; }.close-link:hover,.close-link:focus-visible { background: var(--purple); transform: translateY(-3px); }.close-orbit { position: absolute; right: -3rem; top: 1rem; width: 390px; height: 390px; margin: 0; padding: 4.3rem; color: rgba(23,47,55,.12); border: 2px solid rgba(23,47,55,.16); border-radius: 50%; font: 800 2.6rem/1.25 "Barlow Semi Condensed",sans-serif; text-transform: uppercase; transform: rotate(15deg); }
@media (max-width: 900px) { .hero-statement { padding-left: 10%; }.ways-heading { grid-template-columns: 1fr; gap: 2rem; }.ways-heading .eyebrow { grid-column: auto; }.action-copy { grid-template-columns: 1fr; gap: 1rem; }.movement-heading { display: block; }.movement-heading h2 { margin-top: 1rem; }.movement-steps { grid-template-columns: repeat(2,1fr); }.movement-steps article:nth-child(2) { border-right: 0; }.movement-steps article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.35); }.movement-steps article:nth-child(2)::after { display: none; }.involved-close { grid-template-columns: 1fr; gap: 3rem; } }
@media (max-width: 640px) { .involved-hero { min-height: 660px; }.hero-kicker { top: 2.5rem; left: 1.25rem; }.hero-kicker > span { display: none; }.hero-statement { padding: 8rem 1.25rem 5rem; }.hero-statement h1 { font-size: clamp(4rem,19vw,6.3rem); }.hero-statement > p { margin-left: 0; }.hero-signal { width: 250px; height: 250px; }.ways { padding-right: 1.25rem; padding-left: 1.25rem; }.action-card { grid-template-columns: 1fr 30px; gap: .7rem; min-height: 190px; padding: 2rem .25rem; }.action-copy h3 { font-size: 2.7rem; }.action-copy > p:last-child { font-size: .93rem; }.movement-path,.involved-close { padding-right: 1.25rem; padding-left: 1.25rem; }.movement-steps { grid-template-columns: 1fr; }.movement-steps article { min-height: 220px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.35); }.movement-steps article:not(:last-child)::after { top: auto; right: 1rem; bottom: -18px; transform: rotate(90deg); }.movement-steps article:nth-child(2)::after { display: grid; }.movement-steps strong { margin-top: 2.5rem; }.close-orbit { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .action-card,.action-arrow,.close-link { transition: none; } }