/* ==========================================================================
   Process: "From first call to launch."
   Four sky-blue squares (the blue is sampled from the hero video's sky). Each holds
   an ink drawing of the same tree at a later stage of growth: sapling → full tree.
   The step number and title sit at the top of the square; the drawing fills the rest
   down to its ground line; the description sits under the square as a caption.

   The drawings are generated by tools/generate-trees.mjs (one deterministic tree,
   drawn at four stages). If you change --step-sky, regenerate them with the same colour:
     SEED=55 node tools/generate-trees.mjs assets/trees '#5ba9dd' '#0b2340'
   ========================================================================== */
:root{
  --step-sky:#5ba9dd;      /* sampled from the sky in the hero video */
  --step-ink:#0b2340;      /* deep navy, the drawings' ink; ~6:1 on the sky blue */
}

.steps{position:relative;padding:clamp(72px,10vh,120px) var(--pad-x) clamp(96px,14vh,160px);color:var(--ink)}
.steps h2{margin:0 0 clamp(28px,4vw,48px);font-family:var(--font-display);font-weight:900;
  font-size:clamp(32px,1rem + 3vw,60px);line-height:1;letter-spacing:-.035em;text-wrap:balance}

.steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(12px,1.4vw,20px);margin:0;padding:0;list-style:none}

.step-card{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--step-sky);color:var(--step-ink);
  padding:clamp(20px,2vw,28px)}
.step-num{display:block;font-family:var(--font-text);font-weight:400;font-size:15px;line-height:1;opacity:.82}
.step h3{margin:10px 0 0;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,.7rem + 1.05vw,26px);
  line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
/* the same drawing area in every square, so the tree visibly grows from one to the next */
.step-art{position:absolute;left:4%;right:4%;bottom:3%;top:27%;width:92%;height:70%;object-fit:contain;object-position:50% 100%}

.step > p{margin:14px 2px 0;font-family:var(--font-text);font-weight:400;font-size:clamp(15px,.9rem + .2vw,17px);
  line-height:1.45;color:var(--ink);max-width:36ch}

@media (max-width:1100px){ .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .steps-grid{grid-template-columns:1fr} }