/* Sustainability page specific styles */
.hero { margin: 0 auto; padding-block: var(--space-14) var(--space-12); background: linear-gradient(180deg, rgba(63,125,78,0.06), transparent); }
.hero__inner { align-items: center; }
.hero__content p { margin-block-end: var(--space-6); }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.eyebrow { font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-700); margin-bottom: var(--space-3); }
.section { padding-block: var(--space-14); }
.pillars .card h3 { margin-top: 0; }
.benefits { display: grid; gap: var(--space-3); padding-left: 1rem; }
.benefits li { list-style: disc; }
.cases__grid { align-items: start; }
.case__media { align-self: stretch; display: flex; }
.metrics { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.metric__label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.bar { position: relative; height: 10px; background: var(--gray-200); border-radius: var(--radius-round); overflow: hidden; }
.bar__fill { display: block; height: 100%; width: 0; background: var(--color-primary); border-radius: var(--radius-round); transform-origin: left center; transition: width var(--dur-slow) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.bar__fill.is-animated { width: var(--fill, 0%); }
.products__media { max-width: 56rem; margin-inline: auto; }

/* Small tweaks for narrow viewports */
@media (max-width: 900px) {
  .hero { padding-block: var(--space-12) var(--space-10); }
}