/*
 * Section: Process — Figma 2232:2918, card 2239:3669.
 *
 * Four 411 cards on Cement, preceded by a 32 stub so the first card's copy
 * lines up with the page margin above it. Each card cuts its top-right corner
 * the same way the Return cards do.
 */

.section-process {
	color: var(--paper);
}

/* Head — About's Approach (2232:2909) sets the slash heading over the row on
   the page's own ground, so the section's Cement stops at the cards. */
.section-process__head {
	width: var(--content);
	max-width: 100%;
	margin-inline: auto;
	padding: 75px 0 calc(24px * var(--label-gap-scale));
	background: none;
	color: var(--ink);
}


.section-process__intro {
	display: flex;
	align-items: center;
	padding-top: calc(24px * var(--label-gap-scale));
}

.section-process__heading {
	display: flex;
	align-items: baseline;

	/* The frame sets the slash and the words 18 apart — its heading text node
	   carries leading spaces rather than a gap, which comes to the same thing. */
	gap: 1.074vw; /* 18 */
	flex: 0 0 54.917%; /* 659 / 1200 */
	max-width: 54.917%;
	margin: 0;
	padding-right: 12.25%; /* 147 */
	color: var(--night);
	font-size: var(--wp--preset--font-size--heading-xl);
	font-weight: 700;
	line-height: 1.19;
	letter-spacing: -0.026em;
}

/* The slash is a flex item beside the heading and the artwork is drawn with
   preserveAspectRatio="none", so anything that squeezes the box squeezes the
   mark with it. Without this the longest headings crushed it - Hospitality ran
   it at 11px wide against a designed 27, Student Housing at 14 - while pages
   with short headings looked right, which is what made it read as a problem
   with those two pages rather than with every one of them. */
.section-process__slash {
	flex: 0 0 auto;
}

.section-process__slash svg {
	width: 0.552em;
	height: 0.931em;
}

.section-process__description {
	flex: 0 0 auto;
	min-width: 0;
	width: calc(var(--cards-copy, 571) / 1676 * 100vw);
	margin: 0;
	color: var(--slate);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.625;
}

/* Approach (2232:2909) - the frame-exact head.
 *
 * 75 above the label, the label's own 16, 12, then a 151.984 row that centres
 * both columns, then 32. The row is 659 + 162 + 571 = 1392 wide against a 1200
 * column: the paragraph deliberately overhangs the rule above it by 192, which
 * is how the frame draws it. Sized off the 1676 frame so the whole head is a
 * scaled copy at any width rather than a fixed block.
 */
.section-process--rows .section-process__head {
	width: 71.6vw; /* 1200 — the frame's own, as above */
	padding: 4.475vw 0 2.964vw; /* 75; 32 plus the frame's 16.02 slack and 1.648 gap */
}

/* The frame uses the component's own 16 here (Features squashes it to 11.097),
   but a fixed 16 inside a head that scales would take a growing share of it. */
.section-process--rows .section-label {
	height: 0.955vw; /* 16 */
}

/* Box-sizing is border-box here, so the height carries the frame's 12 of top
   padding as well as the 151.984 the two columns are centred in. */
.section-process--rows .section-process__intro {
/* A floor, not a fixed height. The frame's box is still what the section is
   drawn to, so nothing moves while the copy is the length it was designed
   around - but an editor who adds a sentence gets a taller box rather than
   text sliding out from under its own section. */
	gap: 9.666vw; /* 162 */
	min-height: 9.785vw; /* 12 + 151.984 */
	padding-top: 0.716vw; /* 12 */
}

.section-process--rows .section-process__heading {
	flex: 0 0 auto;
	max-width: none;
	width: 39.320vw; /* 659 - the 512 heading plus its 147 of right padding */
	padding-right: 8.771vw; /* 147 */
	font-size: 3.461vw; /* 58 */

	/* The frame centres the slash against the line rather than sitting it on
	   the baseline, which is 4 lower. */
	align-items: center;
}

/* The frame's paragraph opens with an empty line - a stray return in the file,
   but it is what sets the copy 29.25 below where centring alone would put it,
   so it is reproduced as padding rather than as an empty node. */
.section-process--rows .section-process__description {
	width: 34.070vw; /* 571 */
	padding-top: 1.745vw; /* 29.25 */
	font-size: 1.074vw; /* 18 */
}

/* Title only (2246:2226) — the Team page's head.
 *
 * The same object as the Approach head above: a 16 label, 12, then a 151.984
 * row that centres the heading. It differs only in what it drops (no slash, no
 * copy beside it) and in its padding: 30 above rather than 75, 32 below. The
 * heading takes the frame's own 477 measure.
 */
.section-process--title .section-process__head {
	/* The frame's own 1200, not the site column: the column walks its gutters in
	   more slowly, which would leave this rule longer than the band's below it
	   on the same page. */
	width: 71.6vw; /* 1200 */
	padding: 1.790vw 0 1.909vw; /* 30 / 32 */
}

.section-process--title .section-label {
	height: 0.955vw; /* 16 */
}

.section-process--title .section-process__intro {
	min-height: 9.785vw; /* 12 + 151.984 */
	padding-top: 0.716vw; /* 12 */
}

.section-process--title .section-process__heading {
	flex: 0 0 auto;
	max-width: none;
	width: 28.461vw; /* 477 */
	padding-right: 0;
	color: var(--ink); /* #0B1628 */
	font-size: 3.461vw; /* 58 */
	line-height: 1.19; /* 69 */
	letter-spacing: -0.026em; /* -1.52 */
}

/* Head only, copy beside it (2280:4709) — the band that opens the article grid.
 *
 * The same 151.984 row as the two heads above, centring both columns, but it
 * opens the section rather than sitting under a rule: the sub-nav is directly
 * above it, so there is no top padding at all, only the frame's 32 below.
 *
 * The two columns are 512 and 688 — 1200 exactly, no gap between them. The
 * frame also puts 204 of right padding on the row they sit in, which they
 * simply overrun; it decides nothing, so it is not reproduced.
 */
.section-process--head .section-process__head {
	/* The frame's own 1200 rather than the site column, which is deliberately
	   wider than frame-proportional below 1676 and would re-wrap the copy. */
	width: 71.6vw; /* 1200 */
	padding: 0 0 1.909vw; /* 32 */
}

.section-process--head .section-process__intro {
/* A floor, not a fixed height. The frame's box is still what the section is
   drawn to, so nothing moves while the copy is the length it was designed
   around - but an editor who adds a sentence gets a taller box rather than
   text sliding out from under its own section. */
	align-items: center;
	min-height: 9.069vw; /* 151.984 */
	padding-top: 0;
}

/* 512 is the floor, not the width. The frame fits its longest heading —
   "Customer stories." — on one line inside 512, but only because its own text
   node is 480 with the slash hard against it; here the slash and its gap take
   48.8 of the 512, leaving the words 17.7 short and wrapping them to two lines.
   So the heading takes what it needs and the paragraph gives up the
   difference: Insights and News are unchanged at the frame's 512 / 688, and
   the long one borrows from a column that can spare it without re-wrapping.
   Any topic added later is handled the same way rather than by counting
   characters.

   The 32 of padding is the clear space between the two columns. The frame has
   no gap between them and does not need one, because its heading never fills
   its box; a heading that does fill it would otherwise set its full stop hard
   against the paragraph. Inside the border-box floor, so a short heading still
   gets the frame's exact 480 measure and the paragraph still starts at 512. */
.section-process--head .section-process__heading {
	flex: 0 0 auto;
	align-items: center;
	width: auto;
	min-width: 30.549vw; /* 512 */
	max-width: none;
	padding-right: 1.909vw; /* 32 */
	color: var(--night); /* #0A0A09 */
	font-size: 3.461vw; /* 58 */
	line-height: 1.19; /* 69 */
	letter-spacing: -0.026em; /* -1.52 */
	white-space: nowrap;
}

/* No stray empty line in this one, unlike the Approach head — the copy is two
   lines centred against the heading, so it needs no offset of its own. */
.section-process--head .section-process__description {
	flex: 1 1 auto;
	width: auto; /* 688 when the heading sits on its 512 floor */
	padding-top: 0;
	font-size: 1.074vw; /* 18 */
	font-weight: 600;
	line-height: 1.625; /* 29.25 */
}

/* The row rather than the section carries the ground, so a section that opens
   with a head on the page's own ground keeps the Cement to the cards — and the
   32 stub before the first card is that ground showing through. */
.section-process__row {
	display: grid;
	align-items: stretch;
	grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
	min-height: 12.610vw; /* 211.352 - the cards are 178 of it, the rest is page */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The 32 cement stub that used to sit before the first card is gone on the
   client's note of 2026-10-28: with each card carrying its own colour it read
   as a stray grey block rather than as the row's ground. */

.process-card {
	position: relative;
	min-height: 10.620vw; /* 178 */
	padding: 2.864vw 0 2.387vw 2.983vw; /* 48 / 40 / 50 */
	background: var(--cement);
	color: var(--paper);
}

/* The 45x109 wedge at the top-right. The frame paints it rather than cutting
   it: it is a triangle in the NEXT card's ground, which is why the row reads as
   each colour running into the one after it. Clipping the card instead would
   show the page through the wedge — white where the frame has Harbor, Steel
   and Ivory. The last card has no next, so it falls back to the row's white. */
.process-card::after {
	content: "";
	position: absolute;
	top: 0;

	/* The wedge overshoots the card's right edge by a pixel. Sitting flush, its
	   clipped vertical edge lands mid-device-pixel on a fractional card width —
	   at 125% display scaling that painted a 1px seam of wedge-over-card blend
	   down the full 109, which reads as a line between two of the cards. The
	   overshoot moves that blend under the next card, which is the same colour
	   as the wedge anyway. */
	right: -1px;
	width: calc(2.685vw + 1px); /* 45 */
	height: 6.504vw; /* 109 */
	background: var(--next-ground, #fff);
	clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Each card carries its own ground across the four (2239:3669/3684/3699/3714);
   the Ivory one is the only light card, so its copy flips to Harbor. */
.process-card--cement { background: var(--cement); }
.process-card--harbor { background: var(--harbor); }
.process-card--steel { background: var(--steel); }

.process-card--ivory {
	background: var(--ivory);
	color: var(--harbor);
}

.process-card__title {
	display: flex;
	align-items: center;
	gap: 0.597vw; /* 10 */
	margin: 0 0 0.716vw; /* 12 */
	color: inherit;
	font-size: 1.193vw; /* 20 */
	font-weight: 800;
	line-height: 1.6; /* 32 */
	letter-spacing: -0.03em; /* -0.6 */
}

/* A 22 slot; the frame lets each glyph overhang it by a few pixels rather than
   fitting them all to the same square, so the art is placed absolutely at the
   size the frame gives it. */
.process-card__icon {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 1.313vw; /* 22 */
	height: 1.313vw;
}

/* main.css caps every svg at max-width:100%, which would clamp the three
   overhanging glyphs back to the 22 slot — height would overhang and width
   would not, which is worse than either. */
.process-card__icon svg {
	position: absolute;
	display: block;
	max-width: none;
	width: 100%;
	height: 100%;
}

.process-card__icon--process-install svg {
	top: -0.119vw; /* -2 */
	left: -0.179vw; /* -3 */
	width: 1.671vw; /* 28 */
	height: 1.432vw; /* 24 */
}

.process-card__icon--process-accounting svg {
	top: -0.119vw; /* -2 */
	height: 1.552vw; /* 26 */
}

.process-card__icon--process-operations svg {
	top: -0.119vw; /* -2 */
	left: -0.179vw; /* -3 */
	width: 1.625vw; /* 27.231 */
	height: 1.606vw; /* 26.914 */
}

.process-card__description {
	max-width: 19.749vw; /* 331 */
	margin: 0;
	color: inherit;
	font-size: 0.835vw; /* 14 */
	font-weight: 500;
	line-height: 1.625; /* 22.75 */
}

@media (max-width: 1024px) {
	.section-process__head,
	.section-process--rows .section-process__head,
	.section-process--title .section-process__head,
	.section-process--head .section-process__head {
		width: var(--content);
		padding-block: 56px 32px;
	}

	/* Stacked, the frame's shares stop meaning anything. */
	.section-process--head .section-process__head {
		padding-block: 32px;
	}

	.section-process--head .section-process__intro {
		height: auto;
		min-height: 0;
		padding-top: 0;
	}

	/* Stacked there is one column, so the floor and the one-line rule both go:
	   held to a single line, a long heading would run off a phone. */
	.section-process--head .section-process__heading {
		width: auto;
		min-width: 0;
		padding-right: 0;
		font-size: var(--wp--preset--font-size--heading-xl);
		white-space: normal;
	}

	.section-process--head .section-process__description {
		flex: 0 1 auto;
		width: auto;
		font-size: var(--wp--preset--font-size--body);
	}

	/* Stacked, the frame's shares stop meaning anything. */
	.section-process--title .section-label {
		height: 16px;
	}

	.section-process--title .section-process__intro {
		height: auto;
		min-height: 0;
		padding-top: 20px;
	}

	.section-process--title .section-process__heading {
		width: auto;
		font-size: var(--wp--preset--font-size--heading-xl);
	}

	/* Stacked, the frame's shares stop meaning anything - back to the shared
	   label and the readable type ramp. */
	.section-process--rows .section-label {
		height: 16px;
	}

	.section-process--rows .section-process__intro {
		gap: 20px;
		height: auto;
		min-height: 0;
		padding-top: 20px;
	}

	.section-process--rows .section-process__heading {
		width: auto;
		font-size: var(--wp--preset--font-size--heading-xl);
	}

	.section-process--rows .section-process__description {
		padding-top: 0;
		font-size: var(--wp--preset--font-size--body);
	}

	.section-process__row {
		height: auto;
		min-height: 0;
	}

	.section-process__row::before {
		display: none;
	}

	.process-card {
		min-height: 0;
	}

	.process-card__icon {
		width: 22px;
		height: 22px;
	}

	.process-card__icon svg,
	.process-card__icon--process-install svg,
	.process-card__icon--process-accounting svg,
	.process-card__icon--process-operations svg {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.process-card__title {
		gap: 10px;
		margin-bottom: 12px;
		font-size: var(--fs-20, 20px);
	}

	.process-card__description {
		max-width: none;
		font-size: var(--wp--preset--font-size--caption);
	}

	.section-process__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.section-process__heading,
	.section-process__description {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		padding-right: 0;
	}

	/* Two up, but only when the row divides into two — an odd count would
	   leave the last card alone beside a white half, so three go one up. */
	.section-process__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.section-process__row:has(.process-card:nth-child(odd):last-child) {
		grid-template-columns: 1fr;
	}

	.process-card:first-child {
		grid-column: auto;
	}

	/* Two up, "the next card" is no longer the one to the right, so the wedge
	   goes back to being cut out of the card. */
	.process-card {
		padding: 32px var(--gutter);
		clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 109px, 100% 100%, 0 100%);
	}

	.process-card::after {
		display: none;
	}
}

@media (max-width: 782px) {
	.section-process__head {
		padding-block: 48px 24px;
	}

	.section-process__intro {
		padding-top: 20px;
	}

	.section-process__row {
		grid-template-columns: 1fr;
	}

	.process-card {
		min-height: 0;
		clip-path: none;
	}

	.process-card__description {
		max-width: none;
	}
}