/* THE BIG RAKE
   Faithful, responsive HTML/CSS recreation of the approved autumn mockup.
   No frameworks, JavaScript, build system, or image hotlinks are required.
   Sections follow the original order and desktop proportions.
*/

:root {
  color-scheme: light;
  --forest: #163c27;
  --forest-deep: #112e1e;
  --green: #278c25;
  --orange: #d83c05;
  --orange-bright: #f25508;
  --gold: #f4a000;
  --red: #ce2e1b;
  --ink: #171917;
  --muted: #515653;
  --paper: #faf8f1;
  --rule: #e3e4df;
  --body-font: "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
  --brand-font: "Bree Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.426025vw, 21px);
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f1f2ed; color: var(--ink); font-family: var(--body-font); line-height: 1.35; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, svg { display: block; }
img { max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
button, a, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #f4ad16; outline-offset: 5px; }
button { border: 0; }
::selection { color: var(--forest); background: #ffdaa0; }
.site-shell { max-width: 1472px; margin-inline: auto; overflow: clip; background: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; fill: currentColor; }
.chevron { width: .8rem; height: .8rem; flex: 0 0 auto; }
.decoration { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
.paper { background-color: var(--paper); background-image: url("assets/paper-grain.svg"); }

/* HEADER --------------------------------------------------------------- */
.site-header { position: relative; z-index: 5; display: grid; grid-template-columns: 17.2rem auto auto; align-items: center; justify-content: space-between; gap: 1rem; min-height: 6rem; padding: .45rem 4.2rem .6rem; background: #fff; isolation: isolate; }
.site-header::before, .site-header::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.site-header::before { inset: 0 auto 0 0; width: 4.5rem; background: url("assets/header-foliage.webp") top left / 100% 100% no-repeat; }
.site-header::after { top: 0; right: 0; width: 67%; height: 1.45rem; background: url("assets/header-canopy.webp") center / cover no-repeat; }
.brand { display: flex; align-items: center; gap: .2rem; width: max-content; max-width: 100%; }
.brand-leaf { width: 4rem; height: 4.7rem; object-fit: contain; transform: rotate(-8deg); }
.brand-wordmark { display: flex; flex-direction: column; align-items: flex-start; }
.brand-the { font-family: var(--brand-font); font-size: 1.48rem; font-weight: 700; line-height: .88; letter-spacing: -.05rem; }
.brand-name { font-family: var(--brand-font); font-size: 2.6rem; font-weight: 700; line-height: .99; white-space: nowrap; letter-spacing: -.13rem; }
.brand-tagline { margin-top: .32rem; font-family: Arial, sans-serif; font-size: .63rem; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: -.014rem; }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding-top: .4rem; }
.nav-link { display: inline-flex; align-items: center; justify-content: center; gap: .16rem; position: relative; min-height: max(44px, 2.75rem); padding: .35rem 0; background: none; font-size: .87rem; white-space: nowrap; }
.nav-link:hover { color: var(--orange); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.8rem; padding: .55rem 1rem; border-radius: .65rem; border: 1px solid transparent; font-weight: 600; line-height: 1.15; text-align: center; transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.button:hover { filter: brightness(1.05); box-shadow: 0 .25rem .6rem #13291822; transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-green { color: #fff; background: linear-gradient(135deg, #2f8127, #216e1c); border-color: #cadba5; }
.button-red { color: #fff; background: linear-gradient(135deg, #d43220, #bb2115); border-color: #ffa179; }
.button-white { background: #fff; color: var(--ink); border-color: #fbb65f; }
.button-white > .icon { color: var(--red); }
/* Native details disclosures keep both city menus keyboard-operable without JS. */
.nav-dropdown { position: relative; }
.nav-dropdown > summary { list-style: none; cursor: pointer; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker { content: ""; }
.nav-dropdown .chevron { transition: transform 150ms ease; }
.nav-dropdown[open] > summary .chevron { transform: rotate(180deg); }
.city-submenu { position: absolute; z-index: 10; top: calc(100% + .35rem); left: -.75rem; min-width: 13rem; margin: 0; padding: .4rem; list-style: none; border: 1px solid #e1e5d9; border-radius: .65rem; background: #fffdf8; color: var(--forest); box-shadow: 0 .6rem 2rem #123d2830; }
.city-submenu a { display: flex; align-items: center; min-height: 44px; padding: .65rem .75rem; border-radius: .3rem; font-size: .95rem; white-space: nowrap; }
.city-submenu a:hover { background: #f8eddb; color: var(--forest); }
.city-submenu a:focus-visible { outline-offset: -3px; }
.header-actions { display: flex; align-items: center; gap: .45rem; padding-top: .4rem; }
.header-action { min-height: max(44px, 2.75rem); padding: .5rem .65rem; border-radius: .5rem; font-size: .87rem; white-space: nowrap; gap: .4rem; }
.header-action .icon { width: 1.2rem; height: 1.2rem; }
.menu-close-icon { display: none; }
.mobile-menu { display: none; }

/* HERO ----------------------------------------------------------------- */
.hero { position: relative; min-height: 25.1875rem; color: #fff; background-color: #243620; background-image: linear-gradient(90deg, #14200d52 0%, #10221026 34%, transparent 59%), url("assets/hero-autumn.webp"); background-size: cover; background-position: center; isolation: isolate; }
.hero-content { padding: 2.02rem 0 2.25rem 4.2rem; width: 39rem; max-width: 100%; }
.hero-heading { width: 25.19rem; max-width: 100%; line-height: 0; margin-left: -.45rem; margin-bottom: .72rem; }
.hero-heading img { width: 100%; height: auto; filter: drop-shadow(0 .06rem .1rem #0002); }
.hero-description { font-family: Arial, sans-serif; font-size: 1.025rem; font-weight: 500; line-height: 1.27; text-shadow: 0 1px 2px #0005; }
.hero-beneficiary { margin-top: .62rem; font-family: Arial, sans-serif; font-size: .91rem; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 2px #0004; }
.hero-actions { display: grid; grid-template-columns: 13.6rem 9.6rem 9.6rem; gap: .6rem; margin-top: .94rem; }
.hero-button { min-height: 3.65rem; padding: .48rem .7rem; border-width: 2px; box-shadow: 0 0 .65rem #ffbf2635, inset 0 1px 1px #fff6; border-radius: .73rem; gap: .6rem; }
.hero-button .icon { width: 1.7rem; height: 1.7rem; }
.hero-button .button-label { display: flex; flex-direction: column; gap: .1rem; text-align: left; white-space: nowrap; }
.button-label strong { font-size: 1.05rem; font-weight: 600; }
.button-label small { font-size: .81rem; font-weight: 400; }
.hero-sponsor { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: .8rem; width: 16.2rem; min-height: 3.95rem; padding: .6rem 1rem .55rem 2.2rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7% 50%); background: linear-gradient(115deg, #0e7e20, #168527); }
.hero-sponsor > span { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.hero-sponsor-brand { display: flex; flex-direction: column; align-items: flex-start; }
.hero-sponsor-name { display: flex; align-items: center; gap: .45rem; }
.hero-sponsor-name img { width: 2rem; height: 1.88rem; }
.hero-sponsor-name strong { font-family: Arial, sans-serif; font-size: 1.04rem; }
.hero-sponsor-brand small { font-family: Arial, sans-serif; font-size: .56rem; margin-top: .13rem; white-space: nowrap; }

/* HOW IT WORKS --------------------------------------------------------- */
.how-it-works { position: relative; display: grid; grid-template-columns: 29.6% minmax(0,1fr); align-items: center; min-height: 12.0625rem; padding: 1rem 1.8rem 1.05rem; }
.how-intro { text-align: center; padding-right: 1.1rem; }
.how-intro h2 img { width: 18.31rem; height: auto; margin-inline: auto; }
.handdrawn-underline { display: block; width: 8rem; height: .6rem; margin: .15rem auto .65rem 1.2rem; border-top: .25rem solid var(--orange); border-radius: 50%; transform: rotate(-5deg); }
.how-intro p { font-size: 1.1rem; line-height: 1.25; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); list-style: none; padding: 0; margin: 0; }
.step { position: relative; min-width: 0; min-height: 8.25rem; padding: .05rem .3rem 0; text-align: center; }
.step + .step { border-left: 1px solid var(--rule); }
.step-number { position: absolute; display: grid; place-items: center; top: -.7rem; left: .65rem; width: 2.16rem; height: 2.16rem; border-radius: 50%; color: #fff; border: 1.5px solid #fff; font-size: 1.3rem; font-weight: 700; box-shadow: inset 0 0 .3rem #fff5; }
.number-orange { background: #dc3c04; }
.number-gold { background: #e99600; }
.number-green { background: #2c8b21; }
.step-icon { width: 3.4rem; height: 3.5rem; margin: 0 auto .45rem; fill: var(--forest); color: var(--forest); }
.step-icon.rake-icon { width: 4.35rem; height: 4rem; margin-top: -.5rem; }
.step-icon.care-icon { width: 3.9rem; }
.step h3 { margin: .1rem 0 .35rem; font-size: 1.14rem; font-weight: 700; line-height: 1.12; white-space: nowrap; }
.step p { color: var(--muted); font-size: .9rem; line-height: 1.18; }
.how-leaf-one { width: 3.5rem; height: auto; left: .1rem; bottom: -1.7rem; transform: rotate(-21deg); filter: hue-rotate(16deg); }
.how-leaf-two { width: 2rem; height: auto; top: 2.5rem; right: 1rem; transform: rotate(45deg); }

/* COMMUNITY IMPACT ---------------------------------------------------- */
.impact-stats { position: relative; display: grid; grid-template-columns: 29% 25.5% 25.5% 20%; align-items: center; min-height: 8.6875rem; padding: .5rem 1.6rem .5rem 2.9rem; background: #fff; }
.stat { min-width: 0; text-align: center; }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat-core { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.stat-icon { width: 3.7rem; height: 3.7rem; flex-shrink: 0; fill: currentColor; }
.stat-volunteers .stat-icon { color: var(--gold); width: 4.25rem; }
.stat-volunteers .stat-value { color: #d84a0c; }
.stat-lawns .stat-value { color: #29772b; }
.stat-raised .stat-icon, .stat-raised .stat-value { color: #d42e0c; }
.stat .stat-leaf { width: 3.2rem; height: 3.9rem; transform: rotate(16deg); }
.stat-value { display: block; font-size: 2.8rem; font-weight: 800; line-height: 1.02; letter-spacing: -.07rem; text-align: left; }
.stat h2 { margin-top: .06rem; font-size: 1.22rem; line-height: 1.1; font-weight: 700; text-align: left; }
.stat p { margin-top: .48rem; color: var(--muted); font-size: .84rem; white-space: nowrap; line-height: 1.25; }
.community-note { align-self: stretch; position: relative; display: flex; align-items: center; justify-content: flex-end; margin: -.5rem -.9rem -.5rem .3rem; }
.community-note img { width: 13.1rem; height: auto; max-height: 8.75rem; object-fit: contain; }
.stats-leaf { width: 2.2rem; height: auto; left: .9rem; bottom: 3.1rem; transform: rotate(-15deg); opacity: .8; filter: hue-rotate(19deg); }

/* PHOTOGRAPHY + FUNDRAISING -------------------------------------------- */
.impact-row { display: grid; grid-template-columns: 63.25% minmax(0,1fr); gap: .55rem; min-height: 14.6875rem; background: #f4f5ef; }
.volunteer-gallery { display: grid; grid-template-columns: 35.4fr 40.6fr 24fr; gap: .18rem; height: 14.6875rem; overflow: hidden; }
.volunteer-gallery figure { min-width: 0; overflow: hidden; }
.volunteer-gallery img { width: 100%; height: 100%; object-fit: cover; }
.goal-card { margin: .45rem .8rem .45rem 0; padding: .63rem 1.6rem .85rem; border-radius: 1.12rem; background: #fff; box-shadow: 0 .3rem 1.5rem #25482b04; }
.goal-card h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.25rem; line-height: 1.2; font-weight: 700; white-space: nowrap; }
.goal-card h2 img { width: 1.7rem; height: 1.95rem; filter: hue-rotate(15deg); }
.goal-amounts { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: .8rem; }
.goal-amounts strong { color: var(--forest); font-size: 1.9rem; line-height: 1.15; }
.goal-amounts span { font-size: .99rem; }
.goal-card progress { display: block; appearance: none; border: 0; width: 100%; height: 1.37rem; margin-top: .55rem; overflow: hidden; border-radius: 999px; color: var(--green); background: #e6e6e6; }
.goal-card progress::-webkit-progress-bar { background: #e6e6e6; border-radius: 999px; }
.goal-card progress::-webkit-progress-value { background: linear-gradient(90deg,#2a8d24,#29851f); border-radius: 999px; }
.goal-card progress::-moz-progress-bar { background: #29851f; border-radius: 999px; }
.goal-card > p { margin-top: .6rem; color: var(--muted); font-size: .86rem; line-height: 1.2; text-align: center; white-space: nowrap; }
.goal-button { display: flex; width: 13.4rem; max-width: 100%; min-height: 2.93rem; margin: .87rem auto 0; font-size: 1.12rem; border-radius: .67rem; }
.goal-button .icon { width: 1.5rem; height: 1.5rem; }
.goal-button .arrow-icon { width: 1.2rem; margin-left: .1rem; }

/* SPONSOR -------------------------------------------------------------- */
.sponsor-strip { display: grid; grid-template-columns: 22.5% 31% 24% 22.5%; align-items: center; min-height: 7.75rem; padding: 1rem 2rem; gap: 0; background: #fff; }
.sponsor-strip > h2 { display: flex; align-items: center; align-self: flex-start; gap: .55rem; margin-top: .35rem; font-size: 1.19rem; font-weight: 600; white-space: nowrap; }
.sponsor-strip > h2 img { width: 2.35rem; height: 2.75rem; filter: hue-rotate(15deg); }
.lead-sponsor { display: flex; align-items: center; gap: 1.1rem; padding-left: .55rem; }
.td-mark { width: 4.64rem; height: 4.32rem; object-fit: fill; }
.lead-sponsor span { display: flex; flex-direction: column; gap: .2rem; }
.lead-sponsor strong { color: var(--forest); font-family: Arial,sans-serif; font-size: 1.9rem; line-height: 1.15; font-weight: 750; white-space: nowrap; }
.lead-sponsor small { color: var(--forest); font-size: .91rem; white-space: nowrap; }
.sponsor-thanks { display: grid; place-items: center; min-height: 4.4rem; border-inline: 1px solid #d7dbd6; }
.sponsor-thanks img { width: 10.25rem; height: auto; }
.sponsor-promise { position: relative; padding-left: 2rem; display: flex; align-items: center; gap: .5rem; }
.sponsor-promise p { color: #203c31; font-size: 1rem; line-height: 1.2; white-space: nowrap; }
.sponsor-promise img { width: 2.6rem; height: auto; flex-shrink: 0; transform: rotate(14deg); }

/* FOOTER --------------------------------------------------------------- */
.site-footer { display: grid; grid-template-columns: 29.4% 46% 24.6%; align-items: center; min-height: 8.75rem; padding: 1.15rem 2.7rem; background-color: var(--forest); background-image: url("assets/paper-grain.svg"), radial-gradient(ellipse at 70% 0%, #24493270, transparent 70%); color: #fffdf4; }
.brand-footer { color: #fffdf4; gap: .1rem; }
.brand-footer .brand-leaf { width: 2.7rem; height: 3.2rem; }
.brand-footer .brand-the { font-size: 1.2rem; letter-spacing: -.04rem; }
.brand-footer .brand-name { font-size: 1.9rem; letter-spacing: -.09rem; }
.footer-brand-block > p { margin-top: .75rem; font-size: .77rem; white-space: nowrap; }
.footer-middle { display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; padding-top: .3rem; }
.footer-nav { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
.footer-nav > a, .footer-nav > .nav-dropdown > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 1.5rem; background: transparent; color: inherit; font-size: .76rem; padding: 0 .9rem; white-space: nowrap; line-height: 1; }
.footer-nav > :first-child, .footer-nav > .nav-dropdown:first-child > summary { padding-left: 0; }
.footer-nav > :not(:first-child) { border-left: 1px solid #ffffff68; }
.footer-nav > a:hover, .footer-nav > .nav-dropdown > summary:hover, .contact-item[href]:hover { color: #ffc75c; }
.footer-cities .city-submenu { top: auto; bottom: calc(100% + .5rem); left: 0; }
.footer-contact-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 1.75rem; }
.contact-item { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font-size: .79rem; }
.contact-item .icon { width: 1.15rem; height: 1.3rem; }
.social-links { display: flex; align-items: center; gap: .72rem; margin-left: -.25rem; }
.social-links a { display: grid; place-items: center; padding: .15rem; margin: -.15rem; width: 1.4rem; height: 1.6rem; background: none; color: inherit; }
.social-links .icon { width: 1.2rem; height: 1.2rem; }
.social-links a:hover { color: #ffc75c; }
.footer-message { display: flex; justify-content: flex-end; align-items: center; gap: .15rem; }
.footer-message > img:first-child { width: 11rem; height: 6.6rem; object-fit: contain; }
.footer-message .footer-outline-leaf { width: 2rem; height: 2.7rem; filter: hue-rotate(-24deg) saturate(1.7); }
.legal-footer { min-height: 4.56rem; padding: 1.06rem 2.7rem .65rem; color: #696d68; background: #fafafa; font-size: .75rem; }
.legal-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.legal-row nav { display: flex; align-items: center; }
.legal-row a { padding: .12rem 1.2rem; background: none; color: #626761; font-size: .72rem; line-height: 1; }
.legal-row a + a { border-left: 1px solid #bbc0b9; }
.legal-row a:last-child { padding-right: 0; }
.legal-row a:hover { color: var(--forest); text-decoration: underline; }
.preview-note { margin-top: .7rem; font-size: .66rem; color: #6e736b; line-height: 1.3; }

/* TABLET AND MOBILE ---------------------------------------------------- */
@media (max-width: 900px) {
  :root { font-size: 16px; }
  .site-header { min-height: 6rem; grid-template-columns: minmax(0,1fr) auto; padding: .65rem 1.5rem; gap: 1rem; }
  .site-header::before { opacity: .5; width: 3rem; }
  .site-header::after { width: 54%; height: .8rem; }
  .brand { position: relative; z-index: 1; }
  .brand-name { font-size: 2.25rem; }
  .brand-the { font-size: 1.25rem; }
  .brand-leaf { width: 3.2rem; height: 4rem; }
  .brand-tagline { font-size: .56rem; }
  .desktop-nav, .header-actions { display: none; }
  .mobile-menu { display: block; position: relative; z-index: 3; }
  .mobile-menu > summary { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid #d7dfd2; border-radius: .5rem; cursor: pointer; color: var(--forest); background: #fff; list-style: none; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu > summary::marker { content: ""; }
  .mobile-menu[open] > summary { color: #fff; background: var(--forest); }
  .mobile-menu[open] .menu-open-icon { display: none; }
  .mobile-menu[open] .menu-close-icon { display: block; }
  .mobile-nav { position: absolute; top: calc(100% + .8rem); right: 0; width: min(21rem, calc(100vw - 3rem)); max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain; display: grid; padding: .6rem; border: 1px solid #dfe4d8; border-radius: .7rem; background: #fffdf8; box-shadow: 0 .6rem 2rem #123d2830; }
  .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 44px; padding: .8rem .65rem; text-align: left; border-radius: .35rem; color: var(--forest); background: none; }
  .mobile-nav-link:hover { background: #f5ecd9; }
  .mobile-nav-link:focus-visible { outline-offset: -3px; }
  .mobile-cities .city-submenu { position: static; min-width: 0; margin: .1rem 0 .4rem .65rem; padding: .1rem 0 .1rem .45rem; border: 0; border-left: 2px solid #e5b253; border-radius: 0; background: none; box-shadow: none; }
  .mobile-cities .city-submenu a { font-size: .95rem; }
  .mobile-actions { display: grid; gap: .65rem; margin-top: .55rem; padding: .9rem .2rem .2rem; border-top: 1px solid #e2e4d8; }
  .mobile-action { min-height: 3rem; width: 100%; }
  .mobile-action:focus-visible { outline-offset: 2px; }
  .hero { min-height: 28rem; background-color: #142a19; background-image: linear-gradient(90deg, #142a19 0%, #142a19f2 39%, #142a1970 58%, #142a1900 77%), url("assets/hero-mobile.webp"); background-size: 100% 100%, auto 100%; background-position: center, right center; background-repeat: no-repeat; }
  .hero-content { padding: 3rem 1.75rem 2rem; width: 38rem; }
  .hero-heading { width: 24rem; margin-left: 0; }
  .hero-description { font-size: 1rem; }
  .hero-beneficiary { font-size: .88rem; }
  .hero-actions { grid-template-columns: 13.6rem 9.6rem 9.6rem; gap: .5rem; }
  .hero-sponsor { width: 15rem; min-height: 3.6rem; }
  .how-it-works { grid-template-columns: 1fr; padding: 1.8rem 1rem 1.65rem; gap: 1.5rem; }
  .how-intro { padding: 0; }
  .how-intro h2 img { width: 17rem; }
  .handdrawn-underline { margin: .1rem auto .65rem; }
  .how-intro p { font-size: 1rem; }
  .step { min-height: 9rem; padding: .3rem .4rem 0; }
  .step h3 { font-size: 1.08rem; }
  .step p { font-size: .89rem; }
  .step-number { left: .1rem; }
  .how-leaf-two { top: 2rem; right: 2rem; }
  .impact-stats { padding: 1.2rem 1rem; grid-template-columns: repeat(3,1fr); row-gap: 1rem; }
  .community-note { display: none; }
  .stat-core { gap: .4rem; }
  .stat-value { font-size: 2.3rem; }
  .stat h2 { font-size: 1.1rem; }
  .stat p { white-space: normal; font-size: .76rem; padding-inline: .25rem; }
  .stat-icon, .stat-volunteers .stat-icon { width: 3.2rem; height: 3.2rem; }
  .stats-leaf { display: none; }
  .impact-row { grid-template-columns: 1fr; gap: 0; }
  .volunteer-gallery { height: 16rem; }
  .goal-card { margin: .8rem; padding: 1.2rem 1.5rem 1.3rem; }
  .goal-card h2 { justify-content: center; font-size: 1.4rem; }
  .goal-card > p { font-size: .95rem; white-space: normal; }
  .goal-card progress { height: 1.25rem; }
  .goal-amounts { margin-top: 1rem; }
  .sponsor-strip { padding: 1.5rem 1rem; grid-template-columns: 1fr 1.3fr; row-gap: 1.7rem; }
  .sponsor-strip > h2 { align-self: center; justify-content: center; font-size: 1.2rem; margin: 0; }
  .lead-sponsor { justify-content: center; gap: .8rem; padding: 0; }
  .lead-sponsor strong { font-size: 1.8rem; }
  .lead-sponsor small { font-size: .83rem; }
  .sponsor-thanks { border-left: 0; }
  .sponsor-promise { justify-content: center; padding-left: 0; }
  .site-footer { grid-template-columns: 1fr; gap: 1.7rem; padding: 2rem 1.5rem 1.5rem; text-align: center; }
  .brand-footer { margin-inline: auto; }
  .footer-brand-block > p { white-space: normal; font-size: .85rem; }
  .footer-nav, .footer-contact-row, .footer-message { justify-content: center; }
  .footer-nav > a, .footer-nav > .nav-dropdown > summary { font-size: .9rem; padding-inline: 1rem; }
  .footer-middle { padding: 0; gap: 1.2rem; }
  .footer-contact-row { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .contact-item { font-size: .9rem; }
  .social-links { gap: 1rem; margin-left: 0; }
  .social-links a { width: 2rem; height: 2rem; }
  .social-links .icon { width: 1.3rem; height: 1.3rem; }
  .footer-message > img:first-child { width: 10rem; height: auto; }
  .legal-footer { padding: 1.1rem 1.5rem; }
  .legal-row { flex-wrap: wrap; }
  .preview-note { font-size: .7rem; line-height: 1.5; }
}

@media (max-width: 600px) {
  .site-header { min-height: 5.5rem; padding: .6rem 1.1rem; gap: .4rem; }
  .hero { min-height: 0; background-color: #142a19; background-image: linear-gradient(180deg, #10281600 0%, #122a1500 19%, #142a1988 33%, #142a19f7 49%, #142a19 70%), url("assets/hero-mobile.webp"); background-size: 100% 100%, 100% auto; background-position: top center; background-repeat: no-repeat; }
  .hero-content { padding: 15.5rem 1.25rem 1.5rem; width: 100%; }
  .hero-heading { width: 24rem; max-width: 100%; margin: 0 0 .8rem; }
  .hero-description { font-size: 1rem; line-height: 1.45; }
  .desktop-break { display: none; }
  .hero-beneficiary { font-size: .88rem; line-height: 1.5; margin-top: .8rem; }
  .hero-actions { grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.05rem; }
  .hero-button { min-height: 3.6rem; padding: .55rem .5rem; gap: .5rem; }
  .hero-button:first-child { grid-column: 1 / -1; }
  .hero-button:last-child { grid-column: auto; }
  .hero-button .button-label strong { font-size: 1rem; }
  .hero-button .button-label small { font-size: .8rem; }
  .hero-sponsor { width: 14rem; min-height: 3.4rem; gap: .65rem; padding: .45rem .8rem .45rem 1.9rem; }
  .hero-sponsor > span { font-size: .73rem; }
  .hero-sponsor-name img { width: 1.8rem; height: 1.7rem; }
  .hero-sponsor-brand small { font-size: .52rem; }
  .how-it-works { padding: 1.8rem 1rem 1.2rem; gap: 2rem; }
  .how-intro h2 img { width: 17rem; }
  .how-intro p { font-size: 1.08rem; }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.6rem .5rem; }
  .step { min-height: 9.3rem; padding-top: .25rem; }
  .step + .step { border-left: 0; }
  .step:nth-child(even) { border-left: 1px solid var(--rule); }
  .step-number { width: 1.85rem; height: 1.85rem; font-size: 1.1rem; left: .3rem; top: -.5rem; }
  .step-icon { width: 3rem; height: 3.15rem; }
  .step-icon.rake-icon { width: 3.8rem; height: 3.65rem; }
  .step h3 { font-size: 1.1rem; white-space: normal; }
  .step p { font-size: .86rem; line-height: 1.25; }
  .how-leaf-one { width: 2.6rem; bottom: -1.2rem; }
  .how-leaf-two { width: 1.7rem; top: 1.2rem; right: .75rem; }
  .impact-stats { grid-template-columns: 1fr 1fr; padding: 1.5rem 1rem .7rem; row-gap: 1.5rem; }
  .stat + .stat { border-left: 0; }
  .stat-core { gap: .3rem; }
  .stat-icon, .stat-volunteers .stat-icon { width: 2.7rem; height: 2.7rem; }
  .stat .stat-leaf { width: 2.3rem; height: 2.8rem; }
  .stat-value { font-size: 2.25rem; }
  .stat-raised .stat-value { font-size: 2.05rem; }
  .stat-raised .stat-icon { width: 2.3rem; height: 2.3rem; }
  .stat h2 { font-size: 1rem; }
  .stat p { font-size: .76rem; margin-top: .6rem; }
  .community-note { display: flex; margin: -1rem -.6rem -.5rem; justify-content: center; }
  .community-note img { width: 10.5rem; height: 7rem; }
  .volunteer-gallery { height: 11rem; gap: .15rem; grid-template-columns: 35fr 40fr 25fr; }
  .goal-card { margin: .65rem; padding: 1.2rem 1.1rem; border-radius: .9rem; }
  .goal-card h2 { font-size: 1.27rem; gap: .4rem; }
  .goal-amounts strong { font-size: 1.8rem; }
  .goal-amounts span { font-size: .92rem; }
  .goal-card > p { font-size: .88rem; line-height: 1.4; }
  .goal-button { width: 14rem; margin-top: .9rem; }
  .sponsor-strip { grid-template-columns: 1fr 1fr; padding: 1.4rem 1rem 1.5rem; gap: 1.1rem 0; }
  .sponsor-strip > h2, .lead-sponsor { grid-column: 1 / -1; }
  .sponsor-strip > h2 { font-size: 1.3rem; }
  .sponsor-strip > h2 img { width: 2rem; height: 2.3rem; }
  .lead-sponsor { padding: .3rem 0 .6rem; gap: 1.1rem; }
  .lead-sponsor strong { font-size: 2rem; }
  .lead-sponsor small { font-size: .86rem; }
  .td-mark { width: 4.7rem; height: 4.38rem; }
  .sponsor-thanks { min-height: 4.2rem; padding: 0 .7rem 0 0; }
  .sponsor-thanks img { width: 9.7rem; }
  .sponsor-promise { padding-left: .7rem; gap: 0; }
  .sponsor-promise p { font-size: .84rem; line-height: 1.3; white-space: normal; }
  .sponsor-promise img { width: 1.5rem; }
  .site-footer { padding-inline: 1rem; }
  .footer-nav { flex-wrap: wrap; row-gap: .8rem; }
  .footer-nav > a, .footer-nav > .nav-dropdown > summary { font-size: .83rem; padding-inline: .64rem; }
  .footer-contact-row { gap: .7rem 1rem; }
  .contact-item { font-size: .86rem; }
  .social-links { flex-basis: 100%; justify-content: center; gap: .8rem; }
  .footer-middle { gap: .9rem; }
  .footer-message > img:first-child { width: 11rem; }
  .legal-footer { text-align: center; padding: 1.2rem 1rem; }
  .legal-row { flex-direction: column; gap: .8rem; }
  .legal-row a { min-height: 1.2rem; }
  .legal-row a:last-child { padding-right: 1.2rem; }
  .preview-note { margin-top: 1rem; line-height: 1.55; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: .8rem; }
  .brand-name { font-size: 2.05rem; }
  .brand-leaf { width: 2.7rem; }
  .brand-tagline { font-size: .51rem; }
  .hero-content { padding-inline: 1rem; }
  .hero-button .icon { width: 1.4rem; height: 1.4rem; }
  .hero-button { gap: .35rem; }
  .button-label small { font-size: .73rem; }
  .stat-core { gap: .2rem; }
  .stat-value { font-size: 2rem; }
  .stat-raised .stat-value { font-size: 1.8rem; }
  .stat-icon, .stat-volunteers .stat-icon { width: 2.2rem; }
  .goal-card h2 { font-size: 1.13rem; }
  .footer-nav > a, .footer-nav > .nav-dropdown > summary { padding-inline: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  :root { font-size: 12px; }
  body { background: #fff; }
  .site-shell { max-width: none; }
  .site-header, .hero, .paper, .site-footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mobile-menu, .desktop-nav, .header-actions, .hero-actions, .goal-button, .social-links { display: none !important; }
  .hero-content { padding-top: 3rem; }
  section, footer { break-inside: avoid; }
}