/* Botanical editorial layout for the four documented sustainability priorities. */
.sustainability-story {
  width: min(1400px, calc(100% - 48px));
  margin: 64px auto 80px;
  padding: 42px;
  background: #f2f3ec;
  border-radius: 28px;
  color: #253c2d;
}
.sustainability-story-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  padding: 0 4px 38px;
}
.sustainability-story-heading h2 {
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--heading-tracking);
}
.sustainability-story-heading > p {
  max-width: 430px;
  font-size: 14px;
  line-height: 1.75;
  color: #60705c;
  margin-top: 8px;
}
.sustainability-story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sustainability-story-photo {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  margin: 0;
  border-radius: 16px;
  background: #536748;
}
.sustainability-story-photo img {
  width: 100%; height: 100%; position: absolute; inset: 0;
  object-fit: cover; object-position: 35% center;
  transform: scale(1.1);
  translate: 0 var(--py, 0px);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.sustainability-story-photo:hover img { transform: scale(1.14); }
.sustainability-story-photo figcaption {
  position: absolute; bottom: 18px; left: 18px;
  padding: 7px 11px; border: 1px solid #ffffff32;
  border-radius: 999px; background: #172b1f94;
  backdrop-filter: blur(8px); color: #fff;
  font-size: 9px; line-height: 1.5; letter-spacing: .025em;
}
.sustainability-priorities {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.sustainability-priority {
  display: grid; grid-template-rows: 43px 1fr; align-content: start;
  gap: 30px; padding: 27px 25px 25px; min-height: 228px;
  border-radius: 16px; background: #e2e6dc; color: #2f4435;
}
.sustainability-priority > svg { width: 39px; height: 43px; flex-shrink: 0; }
.sustainability-priority h3 {
  font-size: 21px; font-weight: 500; line-height: 1.25;
  letter-spacing: var(--title-tracking); max-width: 230px;
}
.sustainability-priority p { color: #52634e; font-size: 12px; line-height: 1.75; margin-top: 12px; }
.priority-waste { background: #344b20; color: #fafbf1; }
.priority-waste > svg { color: #b9ce8f; }
.priority-waste p { color: #d8e1c8; }
.priority-shipment { background: #fff; }
.priority-partners { background: #5c731d; color: #fff; }
.priority-partners > svg { color: #e4efb5; }
.priority-partners p { color: #f0f4de; }
@media (max-width: 1100px) {
  .sustainability-story { padding: 30px; }
  .sustainability-priority { padding: 23px 20px; gap: 26px; }
  .sustainability-priority h3 { font-size: 19px; }
}
@media (max-width: 850px) {
  .sustainability-story { margin: 44px auto 55px; width: calc(100% - 32px); padding: 26px; border-radius: 24px; }
  .sustainability-story-heading { grid-template-columns: 1fr; gap: 22px; padding-bottom: 28px; }
  .sustainability-story-heading h2 br { display: none; }
  .sustainability-story-heading > p { max-width: 530px; margin-top: 0; }
  .sustainability-story-layout { grid-template-columns: 1fr; }
  .sustainability-story-photo { min-height: 0; aspect-ratio: 1.65; }
  .sustainability-priority { min-height: 220px; padding: 25px; }
  .sustainability-priority h3 { font-size: 22px; }
  .sustainability-priority p { font-size: 13px; }
}
@media (max-width: 560px) {
  .sustainability-story { width: calc(100% - 20px); padding: 22px 16px 16px; border-radius: 24px; margin-top: 32px; }
  .sustainability-story-heading { padding: 0 8px 26px; gap: 18px; }
  .sustainability-story-heading h2 { font-size: 34px; }
  .sustainability-story-heading > p { font-size: 13px; }
  .sustainability-story-layout, .sustainability-priorities { gap: 10px; }
  .sustainability-story-photo { aspect-ratio: 1.2; border-radius: 12px; }
  .sustainability-story-photo figcaption { bottom: 13px; left: 13px; font-size: 8px; }
  .sustainability-priority { grid-template-rows: 37px 1fr; padding: 20px 17px; min-height: 245px; gap: 24px; border-radius: 12px; }
  .sustainability-priority h3 { font-size: 19px; }
  .sustainability-priority p { font-size: 12px; line-height: 1.65; }
  .sustainability-priority > svg { width: 33px; height: 37px; }
}
@media (max-width: 360px) {
  .sustainability-priorities { grid-template-columns: 1fr; }
  .sustainability-priority { min-height: 200px; padding: 25px; }
  .sustainability-priority h3 { max-width: none; font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .sustainability-story-photo img { transition: none; }
  .sustainability-story-photo:hover img { transform: scale(1.1); }
}
