/* =========================================================
   LOVE LOCAL page — builds on styles.css (core green palette)
   ========================================================= */

/* ---------- Hero ---------- */
.lhero { padding: clamp(130px, 16vw, 190px) 0 clamp(70px, 9vw, 120px); }
.lhero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.lhero__title { font-size: clamp(3.4rem, 8.4vw, 7.8rem); margin-bottom: 24px; }
.lhero__copy .lede { max-width: 44ch; }
.lhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 10px; }
.lhero__photos { position: relative; aspect-ratio: 1 / 1.08; }
.lpic { position: absolute; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px rgba(37, 39, 35, .15); }
.lpic img { width: 100%; height: 100%; object-fit: cover; }
.lpic--a { top: 0; right: 0; width: 72%; aspect-ratio: 4 / 4.8; }
.lpic--a img { object-position: center 30%; }
.lpic--b { bottom: 0; left: 0; width: 46%; aspect-ratio: 1; border: 8px solid var(--ivory); }

/* ---------- Statement ---------- */
.lstatement { background: var(--charcoal); color: var(--ivory); padding: clamp(100px, 14vw, 190px) 0; }
.lstatement__title { font-weight: 900; font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: .98; letter-spacing: -.04em; max-width: 17ch; }
.lstatement__title .w--accent { color: var(--sage); }
.lstatement__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(48px, 6vw, 80px); }
.lstatement__photos figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.lstatement__photos figure:nth-child(2) { transform: translateY(36px); }
.lstatement__photos img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Ways ---------- */
.lcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.lcard { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); transition: box-shadow .4s, border-color .4s; }
.lcard:hover { box-shadow: 0 24px 50px rgba(37, 39, 35, .08); border-color: var(--sage); }
.lcard__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--forest); margin-bottom: clamp(36px, 4vw, 56px); }
.lcard h3 { font-weight: 900; font-size: clamp(1.9rem, 2.8vw, 2.6rem); letter-spacing: -.035em; line-height: 1; margin-bottom: 14px; }
.lcard p { margin: 0; color: var(--ink-soft); }

/* ---------- Partners ---------- */
.lpartners { background: var(--cream); }
.lpartners__head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 64px); }
.lpartners__head h2 { margin-bottom: 16px; }
.lpartners__head .lede { margin: 0 auto; }
.llogos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.llogos li {
  aspect-ratio: 1; border-radius: var(--radius); background: #fff;
  display: grid; place-items: center; padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--stone); transition: transform .5s var(--ease), box-shadow .4s;
}
.llogos li:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(37, 39, 35, .1); }
.llogos li { min-width: 0; overflow: hidden; }
.llogos img { width: 100%; height: 100%; object-fit: contain; }
.llogos--dark { background: #272827 !important; border-color: #272827 !important; }
.llogos--dark:nth-child(3) { background: #000 !important; border-color: #000 !important; }

/* ---------- Get involved ---------- */
.linvolved__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.linvolved__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.6; }
.linvolved__photo img { width: 100%; height: 100%; object-fit: cover; }
.linvolved__copy h2 { margin-bottom: 20px; }
.linvolved__copy p:not(.eyebrow) { color: var(--ink-soft); max-width: 50ch; margin: 0 0 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .lhero__grid, .linvolved__grid { grid-template-columns: 1fr; }
  .lhero__photos { max-width: 560px; width: 100%; margin: 0 auto; }
  .lcards { grid-template-columns: 1fr; }
  .lcard__num { margin-bottom: 20px; }
  .llogos { grid-template-columns: 1fr 1fr; }
  .linvolved__photo { max-width: 520px; }
}
@media (max-width: 760px) {
  .lstatement__photos { grid-template-columns: 1fr 1fr; }
  .lstatement__photos figure:nth-child(2) { display: none; }
  .lstatement__photos figure:nth-child(3) { transform: translateY(20px); }
}