/* ppuzzle.org */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #faf7f2; color: #3d2c1e; font-family: 'Lato', sans-serif; font-weight: 400; line-height: 1.7; }
.civic { text-align: center; padding: 5rem 2rem 2rem; }
.brand-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.puzzle-icon { width: 24px; height: 24px; clip-path: polygon(0 0, 70% 0, 70% 30%, 100% 30%, 100% 100%, 30% 100%, 30% 70%, 0 70%); background: #c2410c; flex-shrink: 0; }
.brand { font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.label { font-family: 'Inter', sans-serif; font-size: 0.55rem; letter-spacing: 0.12em; color: #92400e; text-transform: uppercase; display: block; margin-top: 0.3rem; }
.impact-metric { font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.8rem); color: #c2410c; margin-top: 1rem; }
.warm-rule { border: none; border-top: 1px solid #d6cfc5; max-width: 600px; margin: 2rem auto; }
.initiatives { max-width: 600px; margin: 0 auto; padding: 2rem 2rem; display: flex; flex-direction: column; gap: 2rem; }
.initiative-panel { border-left: 3px solid #c2410c; padding: 1.5rem 2rem; }
.init-title { font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; }
.init-text { font-size: 0.85rem; color: #5c4332; }
.impact { max-width: 600px; margin: 0 auto; padding: 3rem 2rem; }
.metric-strip { display: flex; justify-content: space-around; text-align: center; margin-bottom: 2rem; }
.metric-number { font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: #c2410c; }
.metric-number.sage { color: #65a30d; }
.metric-label { font-size: 0.7rem; color: #92400e; margin-top: 0.2rem; }
.circles { display: flex; justify-content: center; }
.circle { width: 60px; height: 60px; border-radius: 50%; background: #d4b896; margin-left: -12px; opacity: 0.7; }
.circle:first-child { margin-left: 0; }
.together { padding: 2rem 2rem 5rem; }
.amber-section { max-width: 600px; margin: 0 auto; background: #fef3c7; padding: 3rem 2rem; text-align: center; border-radius: 4px; }
.together-text { font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(1.2rem, 3vw, 1.6rem); color: #92400e; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }