/* Grade House Process — the stages laid out along a tailor's tape measure:
 * manila tape with tick marks (short every 8px, long every 40px), a metal
 * end tab, each stage's number printed on the tape above its column and a
 * short blue pencil line down to the stage. The blue line along the tape
 * draws once when the section comes into view (JS adds .is-on). On tablets
 * and phones the tape runs down the left. Column count comes from --n. */

.gh.process { --proc-ink: var(--gh-ink); --proc-tape: 46px; --proc-gap: 30px; }
.gh.process .proc__body { position: relative; padding-top: calc(var(--proc-tape) + var(--proc-gap)); }

.gh.process .proc__tape { position: absolute; left: 0; right: 0; top: 0; height: var(--proc-tape); border: 1px solid var(--gh-card-line); border-radius: 2px; background-color: var(--gh-card);
	background-image:
		repeating-linear-gradient(90deg, var(--proc-ink) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, var(--proc-ink) 0 1px, transparent 1px 8px);
	background-size: 100% 16px, 100% 8px;
	background-position: 0 0, 0 0;
	background-repeat: no-repeat; }
.gh.process.tone-card .proc__tape { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.gh.process .proc__end { position: absolute; left: -9px; top: -4px; bottom: -4px; width: 10px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #7D8288, #B9BDC2 55%, #8D9197); }
.gh.process .proc__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--gh-blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--gh-ease); }
.gh.process.is-on .proc__line { transform: none; }

.gh.process .proc__steps { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.gh.process .proc__step { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding-left: 14px; }
.gh.process .proc__step::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--proc-gap)); height: calc(var(--proc-gap) + 6px); width: 2px; background: var(--gh-blue); }
.gh.process .proc__num { position: absolute; left: 0; top: calc(-1 * (var(--proc-tape) + var(--proc-gap))); height: var(--proc-tape); display: flex; align-items: flex-end; padding: 0 0 5px 7px; font: 700 17px/1 var(--gh-sans); color: var(--proc-ink); font-variant-numeric: tabular-nums; }
.gh.process .proc__title { font: 600 18px/1.3 var(--gh-sans); color: var(--gh-ink); }
.gh.process .proc__text { font-size: 15px; line-height: 1.55; color: var(--gh-text); }

.gh.process.tone-ink .proc__title { color: #fff; }
.gh.process.tone-ink .proc__text { color: #C9CBCF; }

/* Tablets and phones: the tape runs down the left */
@media (max-width: 1024px) {
	.gh.process { --proc-tape: 40px; }
	.gh.process .proc__body { padding-top: 0; padding-left: calc(var(--proc-tape) + 26px); }
	.gh.process .proc__tape { right: auto; bottom: 0; width: var(--proc-tape); height: auto;
		background-image:
			repeating-linear-gradient(180deg, var(--proc-ink) 0 1px, transparent 1px 40px),
			repeating-linear-gradient(180deg, var(--proc-ink) 0 1px, transparent 1px 8px);
		background-size: 16px 100%, 8px 100%; }
	.gh.process .proc__end { left: -4px; right: -4px; top: -9px; bottom: auto; width: auto; height: 10px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #7D8288, #B9BDC2 55%, #8D9197); }
	.gh.process .proc__line { left: auto; right: -1px; top: 0; bottom: 0; width: 3px; height: auto; transform: scaleY(0); transform-origin: 50% 0; }
	.gh.process .proc__steps { grid-template-columns: 1fr; gap: 28px; }
	.gh.process .proc__step { padding-left: 0; }
	.gh.process .proc__step::before { left: -26px; top: 11px; width: 26px; height: 2px; }
	.gh.process .proc__num { left: calc(-1 * (var(--proc-tape) + 26px)); top: 0; width: var(--proc-tape); height: auto; padding: 2px 0 0; justify-content: flex-end; align-items: flex-start; padding-right: 6px; background: var(--gh-card); }
}
@media (max-width: 767px) {
	.gh.process .proc__title { font-size: 17px; }
}