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

/* ---------- Hero ---------- */
.vhero { padding: clamp(130px, 16vw, 190px) 0 clamp(50px, 6vw, 80px); }
.vhero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.vhero__title { font-size: clamp(3rem, 7vw, 6.4rem); margin-bottom: 24px; }
.vhero__copy .lede { max-width: 46ch; }
.vhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 10px; }
.vhero__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3.6; box-shadow: 0 30px 60px rgba(37, 39, 35, .15); }
.vhero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }

/* ---------- Three steps ---------- */
.vsteps { padding-top: clamp(30px, 4vw, 60px); }
.vsteps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.vstep {
  display: flex; flex-direction: column; min-height: clamp(260px, 24vw, 340px);
  padding: clamp(26px, 3vw, 40px); border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--stone);
}
.vstep__num { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--forest); }
.vstep h2 { font-weight: 900; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -.035em; margin: 22px 0 28px; max-width: 12ch; }
.vstep .btn { margin-top: auto; align-self: flex-start; }
.vstep--feature { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.vstep--feature .vstep__num { color: var(--sage); }

/* ---------- Open hands ---------- */
.vhands { background: var(--charcoal); color: var(--ivory); padding: clamp(90px, 12vw, 170px) 0; }
.vhands__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.vhands__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.vhands__photo img { width: 100%; height: 100%; object-fit: cover; }
.vhands__title { font-weight: 900; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: .98; letter-spacing: -.04em; max-width: 12ch; margin-bottom: 30px; }
.vhands__title .w--accent { color: var(--sage); }
.vhands__copy p:not(.eyebrow) { color: rgba(244, 240, 231, .8); font-size: clamp(1.05rem, 1.3vw, 1.18rem); max-width: 54ch; }

/* ---------- Ways to give ---------- */
.vways .lede a { color: var(--forest); font-weight: 600; }
.vways__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.vway { background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; transition: box-shadow .4s, border-color .4s; }
.vway:hover { box-shadow: 0 24px 50px rgba(37, 39, 35, .08); border-color: var(--sage); }
.vway svg { width: 46px; height: 46px; fill: none; stroke: var(--forest); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 26px; }
.vway h3 { font-weight: 900; font-size: clamp(1.4rem, 1.9vw, 1.75rem); letter-spacing: -.03em; margin-bottom: 12px; }
.vway p { margin: 0 0 20px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.vway strong { color: var(--charcoal); }
.vway .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .vways__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) {
  .vhero__grid, .vhands__grid { grid-template-columns: 1fr; }
  .vsteps__grid { grid-template-columns: 1fr; }
  .vstep { min-height: 0; }
  .vhands__photo { max-width: 460px; }
}
@media (max-width: 600px) { .vways__grid { grid-template-columns: 1fr; } }