/* =========================================================
   needs-stack.css  (added 2026-11-13)
   Site Requirements page: "Six things your site needs".
   Each need is one white card with its words on the left and
   its photo on the right. Every card is "sticky": it sticks
   near the top of the screen, so the next card slides up and
   stacks on top of it while you scroll.
   ========================================================= */

.needstack{padding:clamp(30px,5vh,60px) 0 clamp(60px,10vh,120px)}
.needstack-in{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* one card */
.needstack .nc{
  position:sticky;
  /* each card stops a little lower than the one before (--i = 0..5),
     so you can see the edges of the stack behind it */
  top:calc(110px + var(--i) * 14px);
  height:min(68vh,540px);
  margin-bottom:14vh;
  display:grid;grid-template-columns:.9fr 1.1fr;
  background:#fff;
  border:1px solid rgba(25,23,21,.10);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(25,23,21,.35);
  transform-origin:50% 0;
  will-change:transform;
}
.needstack .nc:last-child{margin-bottom:0}

/* words side */
.needstack .nc-t{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.needstack .nc .n{font-size:clamp(48px,5.4vw,80px);font-weight:200;line-height:.9;color:transparent;-webkit-text-stroke:1px var(--champ)}
.needstack .nc svg{width:34px;height:34px;stroke:var(--orange-ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.needstack .nc h3{font-size:clamp(26px,2.8vw,40px);font-weight:300;line-height:1.05}
.needstack .nc h3 b{font-weight:900}
.needstack .nc p{color:#4d4741;font-size:17px;line-height:1.55;max-width:34ch}

/* photo side */
.needstack .nc img{width:100%;height:100%;object-fit:cover}

/* phones: photo on top, words underneath */
@media (max-width:760px){
  .needstack .nc{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;top:calc(84px + var(--i) * 10px);margin-bottom:8vh}
  .needstack .nc img{order:-1;height:210px}
  .needstack .nc-t{padding:22px 20px 26px;gap:10px}
  .needstack .nc .n{font-size:44px}
  .needstack .nc p{font-size:15px}
}

/* people who switch off motion: plain list, no sticking */
@media (prefers-reduced-motion:reduce){
  .needstack .nc{position:relative;top:auto;margin-bottom:24px}
}