.text-white > .stepBoxes .stepBoxesHead .stepBoxesSmall,
.text-white > .stepBoxes .stepBoxesHead h2 { color:var(--light-font-color); }

.text-body-alt > .stepBoxes .stepBoxesHead .stepBoxesSmall,
.text-body-alt > .stepBoxes .stepBoxesHead h2 { color:var(--light-font-color2); }

.text-primary > .stepBoxes .stepBoxesHead .stepBoxesSmall,
.text-primary > .stepBoxes .stepBoxesHead h2 { color:var(--main-clr); }

.text-secondary > .stepBoxes .stepBoxesHead .stepBoxesSmall,
.text-secondary > .stepBoxes .stepBoxesHead h2 { color:var(--head-font-color); }

.stepBoxesHead{margin:0 auto 40px;text-align:center;}
.stepBoxesSmall{display:block;color:var(--black-clr);opacity:.4;font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:15px;}
.stepBoxesHead h2{color:var(--head-font-color);font-weight:700; padding:0;} /*font-size:28px;*/

.stepBoxesList{display:flex;flex-direction:column;}

/* Each box sticks a little lower than the one before it (--stepbox-peek), so a thin strip of
   every earlier box stays peeking out from behind the stack instead of being fully covered. */
.stepBox:nth-child(1){--stepbox-peek:calc(25px * 0);}
.stepBox:nth-child(2){--stepbox-peek:calc(25px * 1);}
.stepBox:nth-child(3){--stepbox-peek:calc(25px * 2);}
.stepBox:nth-child(4){--stepbox-peek:calc(25px * 3);}
.stepBox:nth-child(5){--stepbox-peek:calc(25px * 4);}
.stepBox:nth-child(6){--stepbox-peek:calc(25px * 5);}
.stepBox:nth-child(7){--stepbox-peek:calc(25px * 6);}
.stepBox:nth-child(8){--stepbox-peek:calc(25px * 7);}
.stepBox:nth-child(9){--stepbox-peek:calc(25px * 8);}
.stepBox:nth-child(10){--stepbox-peek:calc(25px * 9);}
.stepBox:nth-child(11){--stepbox-peek:calc(25px * 10);}
.stepBox:nth-child(12){--stepbox-peek:calc(25px * 11);}

/* A sticky box only stays stuck for as long as its OWN space in the flow is still scrolling
   past - with plain stacking (one full box-height after another) each box runs out of that
   room and drifts away well before the boxes above it have finished arriving, so the peek above
   disappears instead of staying put. Telescoping the margins gives every earlier box extra
   reserved space below it (--stepbox-index/--stepbox-count come from the JS) - each later box
   pulls that space back up via a matching negative margin-top, so it doesn't visually move, but
   the earlier box now has enough room to stay stuck for as long as every box above it needs. */
.stepBox{
	--stepbox-margin-step: 25px;
	margin-bottom: calc( ( var(--stepbox-count, 1) - 1 - var(--stepbox-index, 0) ) * var(--stepbox-margin-step) );
}
.stepBox:not(:first-child){
	margin-top: calc( ( var(--stepbox-index, 0) - var(--stepbox-count, 1) ) * var(--stepbox-margin-step) );
}

.stepBox{position:sticky;top:var(--stepbox-peek, 0px);background:var(--black-clr);border-radius:30px;padding:30px;min-height:var(--tallest-height, auto);}
.stepBox:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,var(--stepbox-tint, 0.1));border-radius:30px;}
.stepBox .row{position:relative;--bs-gutter-x:50px;row-gap:20px; align-items: center;}
.stepBox .row,
.stepBox .col-lg-6{height:100%;}

.stepBoxLabel{display:block;color:var(--tertiary-color);font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;}

.stepBoxContent h3{color:var(--light-font-color);font-weight:600;font-size:var(--fs-24);}
.stepBoxContent h3:not(:last-child){padding-bottom:15px;}
.stepBoxContent p{color:var(--light-font-color);font-size:16px;}
.stepBoxContent p:last-child{padding-bottom:0;}

.stepBoxMedia{height:100%;min-height:220px;border-radius:20px;overflow:hidden;}
.stepBoxMedia picture{display:block;height:100%;}
.stepBoxMedia img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

@media(min-width:568px){ .stepBoxesHead h2{font-size:var(--fs-28);} }
/* @media(min-width:768px){ .stepBoxesHead h2{font-size:34px;} } */
@media(min-width:992px){
	/* .stepBoxesHead h2{font-size:38px;} */
	.stepBox{padding:50px;}
	.stepBoxContent h3{font-size:var(--fs-32);}
}
@media(min-width:1600px){ .stepBoxContent h3{font-size:var(--fs-36);} }
/* @media(min-width:1600px){ .stepBoxesHead h2{font-size:44px;} } */

/* Offset where each box sticks TO - so it settles in below the sticky site header instead of
   right underneath it. */
@media(min-width:1200px){ .stepBox{top:calc((var(--headerHeight) + 20px) + 40px + var(--stepbox-peek, 0px));} }

@media(max-width:767.98px){ .stepBoxes br { display: none; } }