/* ============================================================
   THE STILL VARIANT — still.html only.              22 Sep 2026
   ------------------------------------------------------------
   "Keep only one picture in these pictures and make all these
   visible when we click How its made, and in a different link
   and dont change anything in this website link."

   So: index.html is untouched and still cycles its six stages
   inside every card. THIS page holds one photograph still and
   puts the whole sequence behind the button.

   The picture is the journey's FIRST stage - the crop in the
   field. It is chosen over p.img because it exists for all
   twenty-one products, where p.img covers only eight.

   Loaded INSTEAD of css/journey-card.css, not on top of it.
   ============================================================ */

/* ---- the one picture --------------------------------------- */
/* Same square and the same accent bar the cycling card used, so
   the two pages line up when compared side by side. */
.pcard.is-still .still-shot{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--oat);
}
.pcard.is-still .still-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--acc);z-index:2;
}
.pcard.is-still .still-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);
}
.pcard.is-still:hover .still-shot img{transform:scale(1.05);}

/* satva.css positions .veg against .pthumb, which this is not, so it
   arrives unstyled. Same fix the cycling card needed. */
.pcard.is-still .still-shot .veg{
  position:absolute;top:12px;left:12px;z-index:3;
  width:18px;height:18px;border:2px solid #1f7a34;
  background:#fff;display:grid;place-items:center;border-radius:2px;
}
.pcard.is-still .still-shot .veg i{
  width:8px;height:8px;border-radius:50%;background:#1f7a34;display:block;
}

/* ---- the body --------------------------------------------- */
.pcard.is-still .jcard-kick{
  margin:0 0 4px;font:600 .62rem/1 "Jost",system-ui,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk);
}
/* The button is the whole point of this page, so it is louder than
   the quiet text link the badge version used - but still below
   "Ask about this", which is the action that matters most. */
.pcard.is-still .pjourney{
  margin-top:9px;padding:7px 14px;
  border:1px solid var(--clay);border-radius:999px;
  color:var(--acc-ink);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.pcard.is-still .pjourney:hover,
.pcard.is-still .pjourney:focus-visible{
  background:var(--sand);border-color:var(--gold-dk);color:var(--gold-dk);
}