/* Sustainability page styles — minimal, leveraging base.css */
.hero {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 8%, transparent), transparent 60%);
  padding: var(--space-10) 0 var(--space-8);
}
.hero__inner { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1.2fr 1fr; }
.hero__content { max-width: 60ch; }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
.hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.hero__media { position: relative; }
.hero__media img { width: 100%; height: auto; box-shadow: var(--shadow-md); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.local-nav { margin-block: var(--space-4) var(--space-6); }
.local-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.local-nav__list a { padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-pill); background: var(--color-surface); }

.section { padding-block: var(--space-10); }
.section--alt { background: color-mix(in oklab, var(--gray-100) 60%, transparent); }
.section__header { margin-bottom: var(--space-6); }
.section__cta { margin-top: var(--space-5); display: flex; gap: var(--space-3); }

.eco-grid .card h3, .impact-grid .card h3 { margin-bottom: var(--space-2); }
.eco-image, .ethics-image, .community-image { margin-top: var(--space-6); }
.eco-image img, .ethics-image img, .community-image img { width: 100%; height: auto; box-shadow: var(--shadow-sm); }

/* Care accordion */
.care-accordion { display: grid; gap: var(--space-3); }
.care-item { background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); }
.care-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.care-item summary::-webkit-details-marker { display: none; }
.care-item[open] { box-shadow: var(--shadow-md); }
.care-item ul { margin-top: var(--space-3); padding-left: var(--space-4); }
.care-item li { margin-bottom: var(--space-2); }

.steps { counter-reset: step; display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.steps li { position: relative; padding-left: 40px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); font-weight: 700; }

.recycling-form { margin-top: var(--space-4); }

.cert-grid .badge { margin-top: var(--space-3); }

/* Minor motion for reveal (opt-in via JS) */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.reveal.is-visible { opacity: 1; transform: none; }