/* ============================================================
   SUSTAINABILITY PAGE — editorial layout matching Our Story v3
   Loaded on sustainability page; depends on our-story-v3.css.
   ============================================================ */

/* Feature image + text block (replaces the old AI image section) */
.sustain-feature{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}
.sustain-feature__visual{
  position:relative;
}
.sustain-feature__visual img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 30px 70px -30px rgba(27,22,17,.22);
}
.sustain-feature__visual::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px var(--line);
  pointer-events:none;
}
.sustain-feature__text{
  padding:1rem 0;
}
.sustain-feature__text .eyebrow{
  margin-bottom:.8rem;
}
.sustain-feature__text .section-title{
  margin-bottom:1.4rem;
}
.sustain-feature__text p{
  color:var(--muted);
  font-size:.98rem;
  line-height:1.85;
  margin-bottom:1.2rem;
}
.sustain-feature__text p:last-child{
  margin-bottom:0;
}

/* Responsive */
@media(max-width:900px){
  .sustain-feature{
    grid-template-columns:1fr;
    gap:2.4rem;
  }
  .sustain-feature__text{
    padding:0;
  }
}
@media(max-width:768px){
  .sustain-feature__text .section-title{
    font-size:1.6rem;
  }
}

/* ── FOUR PILLARS (Values grid) ─────────────
   4 cards in an even 4-col grid (no orphaned card),
   each card a clean panel with gold top-border + lift.
   The band breaks out to full viewport width so the side
   gutters share the same ivory-2 background. */
.sustain-pillars{
  margin:0 calc(-1 * (50vw - 50%));
  width:auto;
  padding:5rem 0;
}
.sustain-pillars__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 2.4rem;
}
.sustain-pillars__head{
  text-align:center;
  max-width:680px;
  margin:0 auto 3rem;
}
.sustain-pillars__head .eyebrow{
  margin-bottom:.8rem;
}
.sustain-pillars__head .section-title{
  margin-bottom:0;
}
.values-grid.values-grid--pillars{
  grid-template-columns:repeat(4,1fr);
  gap:1.6rem;
  align-items:stretch;
}
.values-grid--pillars .value-card{
  background:var(--ivory);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  padding:2.2rem 1.8rem;
  box-shadow:0 10px 30px -22px rgba(27,22,17,.20);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.values-grid--pillars .value-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 46px -24px rgba(27,22,17,.28);
  border-color:rgba(176,137,79,.45);
}
.values-grid--pillars .value-num{
  font-size:2.6rem;
}
.values-grid--pillars .value-card h3{
  font-size:1.2rem;
  margin-top:.2rem;
}
.values-grid--pillars .value-card p{
  font-size:.88rem;
  line-height:1.7;
}

/* Pillars responsive collapse */
@media(max-width:900px){
  .values-grid.values-grid--pillars{
    grid-template-columns:repeat(2,1fr);
    gap:1.4rem;
  }
}
@media(max-width:560px){
  .values-grid.values-grid--pillars{
    grid-template-columns:1fr;
    gap:1.2rem;
  }
  .sustain-pillars__head{
    margin-bottom:2.2rem;
  }
}