:root {
  --ink: #17131a;
  --muted: #675f69;
  --paper: #fffdfb;
  --plum: #611c64;
  --plum-deep: #3f0a43;
  --magenta: #c52a67;
  --coral: #f15b59;
  --peach: #f8dfc7;
  --line: #e8e0e6;
  --max: 1200px;
  --radius: 1.4rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; }
button, summary { font: inherit; }
img { max-width: 100%; }
.skip-link { position: fixed; top: .75rem; left: .75rem; transform: translateY(-160%); z-index: 100; padding: .7rem 1rem; border-radius: .5rem; background: white; color: var(--plum); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 2rem; padding: 1.5rem 2rem; color: white; }
.brand img { display: block; width: 170px; }
.site-header nav { display: flex; justify-content: center; gap: 1.5rem; }
.site-header nav a, .header-report { font-size: .9rem; font-weight: 750; text-decoration: none; }
.site-header nav a { opacity: .84; }
.site-header nav a:hover, .site-header nav a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: .3rem; }
.header-report { border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: .65rem 1rem; }

.hero { min-height: 780px; display: grid; grid-template-columns: 52% 48%; background: var(--plum-deep); color: white; }
.hero-photo { min-height: 780px; background: linear-gradient(90deg, transparent 70%, rgba(63,10,67,.98)), linear-gradient(0deg, rgba(20,5,24,.35), transparent 58%), url("hero.jpg") center/cover no-repeat; }
.hero-copy { align-self: center; max-width: 660px; padding: 8rem clamp(2.2rem, 7vw, 7rem) 5rem clamp(2rem, 6vw, 6rem); position: relative; }
.hero-copy::after { content: ""; position: absolute; right: 7%; bottom: 13%; width: 110px; height: 110px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.05), 0 0 0 38px rgba(255,255,255,.035); }
.eyebrow { margin: 0 0 1.2rem; color: white; font-size: .78rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.purple { color: var(--plum); }
.eyebrow.coral { color: var(--coral); }
h1, h2, h3 { margin-top: 0; line-height: 1.02; letter-spacing: -.04em; }
h1 { max-width: 610px; margin-bottom: 1.5rem; font-size: clamp(3.5rem, 7vw, 7rem); }
h2 { font-size: clamp(2.5rem, 5vw, 5rem); }
.hero-lede { max-width: 560px; color: rgba(255,255,255,.82); font-size: 1.1rem; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 3rem 0 2rem; }
.hero-stats div { padding-left: 1rem; border-left: 3px solid var(--coral); }
.hero-stats strong { display: block; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; }
.hero-stats span { display: block; margin-top: .45rem; color: rgba(255,255,255,.66); font-size: .78rem; line-height: 1.3; }
.text-link { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; text-decoration: none; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateY(.2rem); }
.text-link.light { color: white; }

.section { max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) 2rem; }
.purpose { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); }
.section-intro h2, .growth-copy h2, .reach-copy h2, .heart-copy h2 { max-width: 760px; }
.section-intro > p:last-child, .growth-copy > p, .reach-copy > p, .heart-copy > p { color: var(--muted); font-size: 1.08rem; }
.lead { margin: 0 0 3rem; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.5; }
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
.value-grid article { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.value-grid span { color: var(--coral); font-size: .8rem; font-weight: 850; }
.value-grid h3 { margin: .5rem 0 .6rem; font-size: 1.3rem; }
.value-grid p { margin: 0; color: var(--muted); }

.dark { max-width: none; background: var(--ink); color: white; }
.impact { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 8vw, 8rem); padding-left: max(2rem, calc((100vw - var(--max)) / 2 + 2rem)); padding-right: max(2rem, calc((100vw - var(--max)) / 2 + 2rem)); }
.dark .section-intro > p:last-child { color: rgba(255,255,255,.63); }
.tab-list { display: flex; gap: .5rem; border-bottom: 1px solid rgba(255,255,255,.16); margin-bottom: 2rem; }
.tab-list button { border: 0; border-bottom: 3px solid transparent; padding: .7rem 1rem 1rem; background: none; color: rgba(255,255,255,.56); cursor: pointer; font-weight: 800; }
.tab-list button[aria-selected="true"] { color: white; border-color: var(--coral); }
.tab-panel { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tab-panel.is-active { display: grid; }
.tab-panel article { min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; background: linear-gradient(150deg, #742474, #3f0a43); border-radius: var(--radius); }
.tab-panel article:nth-child(2) { background: linear-gradient(150deg, #bd275f, #6c153a); }
.tab-panel article:nth-child(3) { background: linear-gradient(150deg, #f27a5a, #b52b44); }
.tab-panel strong { font-size: clamp(2.2rem, 4vw, 4rem); line-height: .95; }
.tab-panel span { margin-top: .8rem; font-weight: 800; }
.tab-panel small { margin-top: .5rem; color: rgba(255,255,255,.66); font-size: .78rem; }

.growth { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.year-controls { display: flex; gap: .6rem; margin-top: 2.2rem; }
.year-controls button { border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1rem; background: transparent; color: var(--ink); cursor: pointer; font-weight: 800; }
.year-controls button.active { border-color: var(--plum); background: var(--plum); color: white; }
.growth-card { position: relative; overflow: hidden; border-radius: 1.7rem; padding: clamp(2rem, 5vw, 4rem); background: var(--peach); }
.growth-card::after { content: ""; position: absolute; width: 230px; height: 230px; right: -90px; top: -90px; border: 44px solid rgba(197,42,103,.12); border-radius: 50%; }
.growth-year { margin-bottom: 2.5rem; color: var(--plum); font-size: clamp(3rem, 6vw, 6rem); font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.growth-metric { margin: 1.5rem 0; }
.growth-metric span { display: flex; align-items: baseline; gap: .5rem; font-weight: 750; }
.growth-metric b { min-width: 3ch; font-size: 1.5rem; }
.growth-metric div { height: 9px; margin-top: .55rem; overflow: hidden; border-radius: 9px; background: rgba(97,28,100,.12); }
.growth-metric i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--plum), var(--magenta)); transition: width .45s ease; }
#growth-note { margin: 2rem 0 0; color: var(--plum); font-weight: 800; }

.reach-section { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.reach-visual { min-height: 450px; display: grid; place-items: center; border-radius: 1.8rem; background: var(--plum-deep); overflow: hidden; }
.reach-visual svg { width: 100%; height: auto; }
.route-line { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 10; }
.route-line.faint { opacity: .45; }
.map-point circle { fill: var(--coral); stroke: white; stroke-width: 4; }
.map-point text { fill: white; font-size: 17px; font-weight: 800; }
.map-point.home circle { fill: var(--magenta); }
.reach-facts { margin: 2.5rem 0 0; }
.reach-facts div { display: grid; grid-template-columns: 135px 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.reach-facts dt { color: var(--plum); font-size: 1.6rem; font-weight: 900; }
.reach-facts dd { margin: 0; color: var(--muted); }

.legacy { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; background: var(--plum-deep); color: white; }
.legacy-photo { min-height: 640px; background: linear-gradient(90deg, transparent 78%, rgba(63,10,67,.6)), url("junior-rider.jpg") center/cover no-repeat; }
.legacy-copy { align-self: center; max-width: 720px; padding: clamp(4rem, 9vw, 8rem); }
.legacy-copy p { color: rgba(255,255,255,.77); }
.button { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem; border-radius: 999px; padding: .9rem 1.2rem; font-weight: 850; text-decoration: none; }
.coral-button { background: var(--coral); color: #26091b; }
.coral-button:hover { background: #ff8071; }

.heart { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.friendraiser-card { border-radius: 1.7rem; padding: clamp(2.2rem, 5vw, 4rem); background: var(--peach); }
.friendraiser-card .pulse { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 2rem; border-radius: 50%; background: var(--coral); color: var(--plum-deep); font-size: 1.5rem; }
.friendraiser-card strong { color: var(--plum); font-size: clamp(3.2rem, 7vw, 6rem); line-height: 1; letter-spacing: -.05em; }
.friendraiser-card p { margin-bottom: 0; color: #4e394d; }

.experience { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); padding-left: max(2rem, calc((100vw - var(--max)) / 2 + 2rem)); padding-right: max(2rem, calc((100vw - var(--max)) / 2 + 2rem)); }
.score-list > div { margin-bottom: 2rem; }
.score-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.score-label strong { color: var(--coral); font-size: 1.2rem; }
.score-track { height: 10px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.12); }
.score-track i { display: block; width: var(--score); height: 100%; background: linear-gradient(90deg, var(--coral), var(--magenta)); border-radius: inherit; }

.community-photo { min-height: 600px; display: grid; align-items: end; background: linear-gradient(0deg, rgba(25,4,28,.8), transparent 60%), url("volunteers.jpg") center 40%/cover no-repeat; }
.community-photo div { width: min(var(--max), calc(100% - 4rem)); margin: 0 auto; padding-bottom: 3.5rem; }
.community-photo p { max-width: 800px; margin: 0; color: white; font-size: clamp(2.4rem, 5vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; }

.ahead { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 8vw, 8rem); }
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; cursor: pointer; font-size: 1.2rem; font-weight: 850; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { color: var(--coral); font-size: 1.5rem; transition: transform .2s ease; }
.accordion details[open] summary span { transform: rotate(45deg); }
.accordion details p { max-width: 650px; margin: -.3rem 0 1.5rem; color: var(--muted); }

.closing { padding: clamp(6rem, 12vw, 11rem) 2rem; text-align: center; background: var(--plum-deep); color: white; }
.closing h2 { max-width: 850px; margin: 0 auto 1.5rem; }
.closing > p:not(.eyebrow) { max-width: 610px; margin: 0 auto; color: rgba(255,255,255,.72); font-size: 1.1rem; }
.closing-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.closing-actions .button { margin-top: 0; }

footer { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 2rem; padding: 2rem max(2rem, calc((100vw - var(--max)) / 2 + 2rem)); background: #210624; color: rgba(255,255,255,.62); font-size: .8rem; }
footer img { width: 170px; }
footer p:last-child { text-align: right; }

:focus-visible { outline: 3px solid #ffba59; outline-offset: 4px; }

@media (max-width: 920px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-photo { min-height: 500px; background: linear-gradient(0deg, var(--plum-deep), transparent 60%), url("hero.jpg") center/cover no-repeat; }
  .hero-copy { max-width: none; padding-top: 3rem; }
  .purpose, .impact, .growth, .reach-section, .heart, .experience, .ahead { grid-template-columns: 1fr; }
  .legacy { grid-template-columns: 1fr; }
  .legacy-photo { min-height: 540px; background-position: center; }
  .legacy-copy { max-width: none; }
  .reach-copy { order: -1; }
}

@media (max-width: 650px) {
  .site-header { padding: 1.1rem 1rem; }
  .brand img { width: 130px; }
  .header-report { padding: .55rem .75rem; font-size: .78rem; }
  .hero, .hero-photo { min-height: 430px; }
  .hero-copy { padding: 2.5rem 1.3rem 4rem; }
  h1 { font-size: 3.3rem; }
  .hero-stats { gap: .5rem; }
  .hero-stats div { padding-left: .65rem; }
  .section { padding: 5rem 1.3rem; }
  .value-grid, .tab-panel.is-active { grid-template-columns: 1fr; }
  .tab-panel article { min-height: 190px; }
  .tab-list { overflow-x: auto; }
  .reach-visual { min-height: 300px; }
  .reach-facts div { grid-template-columns: 110px 1fr; }
  .legacy-photo { min-height: 420px; }
  .legacy-copy { padding: 4rem 1.3rem 5rem; }
  .community-photo { min-height: 470px; }
  .community-photo div { width: calc(100% - 2.6rem); }
  footer { grid-template-columns: 1fr; text-align: left; }
  footer p:last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}