/*
 * ACB Meet the Team.
 *
 * Everything is scoped under .acmt and resets inside that scope rather than
 * trusting Astra's defaults. Flat, prefixed class names, no bare tag selectors,
 * mobile first with one desktop breakpoint at 1024px.
 *
 * Two house rules this file has to keep:
 *   - Buttons carry !important on BOTH colour and border-radius, because the
 *     theme overrides each of them separately and otherwise wins on one.
 *   - Sky blue (#4790CD) only ever carries text at 24px or larger. It is 3.4:1
 *     on white, so below that size it fails AA. The design used it for the 13px
 *     counter in the dialog; that one is navy here for exactly this reason.
 */

.acmt {
	--acmt-navy: #223E5A;
	--acmt-blue: #4790CD;
	--acmt-yellow: #FFCD47;
	--acmt-ink: #111111;
	--acmt-tint: #EDF0F6;
	--acmt-panel: #F4F8FB;
	--acmt-border: #E3E9F2;
	--acmt-body: #43464B;
	--acmt-body-tint: #4A5D73;
	--acmt-muted: #5E748C;
	--acmt-wrap: 1140px;

	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--acmt-body);
	line-height: 1.5;
	/* The widget draws its own full-bleed bands, so it ignores the content column. */
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

.acmt *,
.acmt *::before,
.acmt *::after { box-sizing: border-box; }

.acmt p,
.acmt h1, .acmt h2, .acmt h3, .acmt h4, .acmt h5, .acmt h6,
.acmt ul, .acmt ol, .acmt li, .acmt figure, .acmt figcaption {
	margin: 0;
	padding: 0;
}

.acmt ul,
.acmt ol { list-style: none; }

/*
 * Every heading and text block the panel can re-tag. Block by default so that
 * choosing Span in the panel changes the element and nothing else; classes
 * later in this file that set their own display (the kicker, the photo
 * caption) still win on source order.
 */
.acmt__el { display: block; }

/*
 * No underlined links anywhere in the section, by request. !important because
 * Astra's `.ast-single-post .entry-content a` is (0,2,1) and underlines every
 * link on a single page, and its `a:hover` loads after this file. Links are
 * told apart by weight and colour instead, and change colour on hover.
 */
.acmt a,
.acmt a:hover,
.acmt a:focus,
.acmt a:visited,
.acmt a * { text-decoration: none !important; }

.acmt img { max-width: 100%; height: auto; display: block; }

.acmt__wrap {
	max-width: var(--acmt-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.acmt__sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Type */

.acmt__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--acmt-navy);
}

.acmt__dot {
	width: 9px; height: 9px;
	border-radius: 999px;
	background: var(--acmt-blue);
	display: inline-block;
	flex: none;
}

.acmt__h2 {
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--acmt-navy);
	text-wrap: balance;
}

.acmt__h2--blue { color: var(--acmt-blue); }
.acmt__h2--light { color: #FFFFFF; }

.acmt__h4 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 800;
	color: var(--acmt-navy);
}

.acmt__intro {
	font-size: 17px;
	line-height: 1.6;
	color: var(--acmt-body-tint);
}

.acmt__sec-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 68ch;
}

/* ------------------------------------------------------------- Buttons */

.acmt__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	/* !important like the colours below: Astra's `.ast-single-post
	 * .entry-content a` is (0,2,1) and underlines every button otherwise. */
	text-decoration: none !important;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	border-radius: 8px !important;
	text-align: center;
}

.acmt__btn--primary,
.acmt__btn--primary:hover,
.acmt__btn--primary:focus,
.acmt__btn--primary:visited {
	background: var(--acmt-yellow) !important;
	color: var(--acmt-ink) !important;
}

.acmt__btn--primary:hover { background: #F5C232 !important; }

.acmt__btn--navy,
.acmt__btn--navy:hover,
.acmt__btn--navy:focus,
.acmt__btn--navy:visited {
	background: var(--acmt-navy) !important;
	color: #FFFFFF !important;
	font-weight: 800;
}

.acmt__btn--navy:hover { background: #1A3147 !important; }

.acmt__btn--ghost,
.acmt__btn--ghost:hover,
.acmt__btn--ghost:focus,
.acmt__btn--ghost:visited {
	background: transparent !important;
	color: #FFFFFF !important;
	border: 2px solid rgba(255, 255, 255, .65) !important;
}

.acmt__btn--ghost:hover { background: rgba(255, 255, 255, .1) !important; }

.acmt a:focus-visible,
.acmt button:focus-visible {
	outline: 3px solid var(--acmt-blue);
	outline-offset: 2px;
	border-radius: 6px;
}

.acmt__tick { flex: none; width: 24px; height: 24px; color: var(--acmt-navy); }

.acmt__brief {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 16px;
	background: var(--acmt-tint);
	color: var(--acmt-muted);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

.acmt__brief--blank { background: var(--acmt-tint); }

/* ------------------------------------------------------------- Journey */

.acmt__journey {
	background: #FFFFFF;
	padding: 48px 0 52px;
}

.acmt__journey .acmt__wrap {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.acmt__steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.acmt__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 360px;
}

.acmt__polaroid {
	position: relative;
	width: 290px;
	max-width: 100%;
	transform: rotate(var(--acmt-tilt, 0deg));
	background: #FFFFFF;
	border: 1px solid var(--acmt-border);
	border-radius: 6px;
	padding: 12px 12px 0;
	box-shadow: 0 12px 30px rgba(34, 62, 90, .14);
}

.acmt__card-media {
	height: 210px;
	position: relative;
	background: var(--acmt-tint);
	overflow: hidden;
}

.acmt__card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Qualified: the caption can be a <p>, and the `.acmt p` reset is (0,1,1). */
.acmt__polaroid .acmt__card-cap {
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	color: var(--acmt-navy);
	text-align: center;
	padding: 0 6px;
}

.acmt__badge {
	position: absolute;
	left: -12px;
	top: -12px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--acmt-navy);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 4px #FFFFFF;
}

.acmt__badge--done { background: var(--acmt-yellow); color: var(--acmt-ink); }

.acmt__step-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding: 0 10px;
}

.acmt__step-name {
	font-size: 19px;
	font-weight: 800;
	color: var(--acmt-navy);
	line-height: 1.2;
}

.acmt__step-copy .acmt__step-blurb {
	font-size: 16px;
	line-height: 1.5;
	color: var(--acmt-body-tint);
}

.acmt__or { font-size: 16px; color: var(--acmt-muted); }

.acmt__or a,
.acmt__or a:visited {
	color: var(--acmt-navy);
	font-weight: 800;
	text-decoration: none;
	text-underline-offset: 2px;
}

/* On a phone every connector is the same downward dashed run. */
.acmt__link {
	display: block;
	width: 24px;
	height: 56px;
	margin: 16px 0 12px;
	background-image: linear-gradient(to bottom, var(--acmt-blue) 0 6px, transparent 6px 14px);
	background-size: 3px 14px;
	background-repeat: repeat-y;
	background-position: center top;
}

.acmt__link { position: relative; }

.acmt__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-right: 3px solid var(--acmt-blue);
	border-bottom: 3px solid var(--acmt-blue);
	border-radius: 0 0 3px 0;
	transform: rotate(45deg);
}

.acmt__link svg { display: none; }

/* ---------------------------------------------------------- The faces */

.acmt__faces {
	display: flex;
	gap: 18px 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-bottom: 6px;
}

/*
 * Everybody on a step is shown now, with no "+N more" tile, so a big step
 * (five surveyors) wraps. Capping the row at three faces makes it wrap as
 * 3 + 2 in a centred block instead of five in a line that runs off the card.
 * The cap is three face widths plus two gaps, so it moves with the face size.
 */
.acmt__faces--many { max-width: 234px; margin-left: auto; margin-right: auto; }

/* The installation team sits in its own wide space, so it takes four a row. */
.acmt__step-team .acmt__faces--many { max-width: 306px; }

.acmt__face,
.acmt__face:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--acmt-navy);
	min-width: 66px;
	padding: 2px;
}

.acmt__face:hover .acmt__face-name { color: var(--acmt-blue); }

.acmt__face-pic {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Every face is the installation team's size, so names read easily. */
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: #DCE5F0;
	overflow: hidden;
	flex: none;
}

.acmt__face-pic img { width: 100%; height: 100%; object-fit: cover; }

/*
 * The whole-team circle. The photo is a wide group shot, so it is zoomed in on
 * the people rather than shrunk to a strip of brick and tarmac.
 */
.acmt__face-pic--team { background: var(--acmt-navy); color: #FFFFFF; }
.acmt__face-pic--team img { transform: scale(1.55); object-position: 50% 58%; }

.acmt__initials {
	font-size: 15px;
	font-weight: 900;
	color: var(--acmt-navy);
	letter-spacing: .02em;
}

.acmt__face-name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--acmt-navy);
	line-height: 1.2;
	text-align: center;
}

/* ------------------------------------------------------ The bottom row */

/*
 * The finish card, then the director and marketing cards. No heading and no
 * rule above them: they read as the last row of the journey, not a new section.
 */
.acmt__end {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
}

/*
 * Tucks up under the phone's dashed run from step 05, the way every other step
 * sits under the run before it. Qualified because the scoped list reset
 * (.acmt ul, 0,1,1) otherwise zeroes a bare class's margin.
 */
.acmt__journey .acmt__end { margin-top: -22px; }

.acmt__step--behind { max-width: 380px; }

/* The installation team's faces, which on a phone just follow the copy. */
.acmt__step-team { width: 100%; }

/*
 * A behind-the-scenes card with one person is entirely their link. Every box
 * property is stated because Astra styles bare links, which has caught the
 * sibling plugins twice; and the colour is inherited so the heading stays navy
 * and the blurb stays grey rather than both turning into link blue.
 */
.acmt__behind-link {
	/*
	 * The same column the <li> used to be. Wrapping the card in a link made the
	 * <li> a single-child container, so the gap that separated the polaroid from
	 * the copy stopped applying and the heading rode up under the photo.
	 *
	 * gap: inherit, not a number: .acmt__step is 18px here and 22px on desktop,
	 * and inheriting takes whichever is in force rather than needing this
	 * repeated in the media query and kept in step by hand.
	 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: inherit;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
	border-radius: 14px;
	transition: transform .18s ease;
}
/*
 * NEVER underlined, in any state.
 *
 * Astra's a:hover is (0,1,1) and its stylesheet loads after this one, so a bare
 * .acmt__behind-link:hover ties on weight and loses on order. That matters more
 * here than on a normal link: text-decoration set on the anchor is drawn
 * through every descendant and cannot be turned off by them, so one lost tie
 * underlined the caption, the heading and the blurb all at once. Scoped to
 * .acmt and qualified with the element to outrank it, and every state is named
 * because :visited and :active have caught this theme before.
 */
.acmt a.acmt__behind-link,
.acmt a.acmt__behind-link:link,
.acmt a.acmt__behind-link:visited,
.acmt a.acmt__behind-link:hover,
.acmt a.acmt__behind-link:focus,
.acmt a.acmt__behind-link:focus-visible,
.acmt a.acmt__behind-link:active {
	text-decoration: none;
	color: inherit;
}
/* The card lifting is the affordance instead. It moves the card, not the text
   inside it, which is the thing that was asked to stay put. */
.acmt__step--linked .acmt__behind-link:hover,
.acmt__step--linked .acmt__behind-link:focus-visible { transform: translateY(-3px); }
.acmt__behind-link:focus-visible {
	outline: 3px solid var(--acmt-blue);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.acmt__behind-link { transition: none; }
	.acmt__step--linked .acmt__behind-link:hover,
	.acmt__step--linked .acmt__behind-link:focus-visible { transform: none; }
}

/* ----------------------------------------------------------- Our story */

/*
 * Half the size of the founder block on the About page, on purpose: it is a
 * signpost to that page, not a second copy of it. The photo is qualified with
 * its parent because the scoped `.acmt img` reset is (0,1,1) and would otherwise
 * win on height.
 */
.acmt__story { background: #FFFFFF; padding: 0 0 48px; }

.acmt__story-box {
	background: var(--acmt-panel);
	border: 1px solid var(--acmt-border);
	border-radius: 14px;
	padding: 20px;
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	grid-template-areas:
		"img eyebrow"
		"img heading"
		"body body"
		"actions actions";
	grid-template-rows: 1fr auto auto auto;
	gap: 0 18px;
	align-items: start;
}

.acmt__story-img {
	grid-area: img;
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(34, 62, 90, .16);
	aspect-ratio: 4 / 5;
}

.acmt__story-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

/* On a phone the copy's children join the box's grid, so the kicker and
 * heading sit beside the photo and the paragraph runs full width under it. */
.acmt__story-copy { display: contents; }
.acmt__story-copy .acmt__eyebrow { grid-area: eyebrow; align-self: end; margin-bottom: 6px; }
.acmt__story-copy .acmt__h4 { grid-area: heading; }

.acmt__story-copy .acmt__story-body {
	grid-area: body;
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--acmt-body-tint);
}

.acmt__story-actions {
	grid-area: actions;
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

/* ------------------------------------------------------- Why we employ */

.acmt__why {
	background: var(--acmt-tint);
	padding: 48px 0;
}

.acmt__why .acmt__wrap {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.acmt__why-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.acmt__why-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 20px;
	border-top: 3px solid var(--acmt-blue);
}

.acmt__why-n {
	font-size: 32px;
	font-weight: 800;
	color: var(--acmt-blue);
	line-height: 1;
}

.acmt__why-col .acmt__why-body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--acmt-body-tint);
}

.acmt__phone-inline,
.acmt__phone-inline:visited {
	color: var(--acmt-navy);
	font-weight: 800;
	text-decoration: none;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.acmt__ticks { display: flex; flex-direction: column; gap: 10px; }

.acmt__ticks li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.55;
	color: var(--acmt-body);
}

.acmt__ticks .acmt__tick { width: 26px; height: 26px; margin-top: 1px; }

/* ------------------------------------------------------------- Join us */

.acmt__join { background: #FFFFFF; padding: 40px 0; }

.acmt__join-box {
	background: var(--acmt-panel);
	border: 1px solid var(--acmt-border);
	border-radius: 14px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.acmt__join-box .acmt__join-body {
	font-size: 16.5px;
	line-height: 1.6;
	color: #575757;
	margin-top: 8px;
}

/* ----------------------------------------------------------- Final CTA */

.acmt__cta { background: var(--acmt-navy); padding: 48px 0; }

.acmt__cta-grid {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.acmt__cta-body {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	margin-top: 14px;
}

.acmt__cta-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 18px;
}

.acmt__cta-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 22px 50px rgba(6, 16, 30, .38);
}

.acmt__cta-phone,
.acmt__cta-phone:visited {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 28px;
	font-weight: 900;
	color: var(--acmt-navy);
	text-decoration: none;
	line-height: 1.1;
	min-height: 48px;
}

.acmt__cta-phone:hover { color: var(--acmt-blue); }
.acmt__cta-phone svg { color: var(--acmt-blue); width: 28px; height: 28px; flex: none; }

.acmt__cta-card .acmt__cta-card-body,
.acmt__cta-card .acmt__cta-email {
	font-size: 16px;
	line-height: 1.6;
	color: #575757;
}

.acmt__rule { height: 1px; background: #E9EEF6; }

.acmt__cta-email { font-size: 15px; color: var(--acmt-muted); }

.acmt__cta-email a,
.acmt__cta-email a:visited {
	color: var(--acmt-navy);
	font-weight: 700;
	text-decoration: none;
	text-underline-offset: 2px;
	word-break: break-word;
}

/* ------------------------------------------------------------- Panels */

/*
 * Closed by default. Two ways to open, deliberately:
 *   :target   - no JavaScript. The link lands on the panel and shows it.
 *   .is-open  - acb-team.js, which also traps focus and closes on Escape.
 */
.acmt__modal { display: none; }
.acmt__modal:has(.acmt__panel:target) { display: block; }
.acmt__modal.is-open { display: block; }

.acmt__modal.is-open,
.acmt__modal:has(.acmt__panel:target) {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow-y: auto;
	padding: 16px;
	-webkit-overflow-scrolling: touch;
}

.acmt__scrim {
	position: fixed;
	inset: 0;
	background: rgba(34, 62, 90, .6);
	display: block;
}

.acmt__dlg {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(6, 16, 30, .45);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.acmt__panel { display: none; position: relative; }
.acmt__panel:target,
.acmt__panel.is-active { display: block; }

.acmt__panel-media {
	position: relative;
	/*
	 * The shape of the headshots (1122 x 1402), so a phone shows the whole
	 * photo as uploaded instead of a 250px strip cut out of the middle of it,
	 * which read as a tight close-up. Capped so a short phone still shows the
	 * name below it; the crop then comes off the bottom, never the face.
	 *
	 * NOT aspect-ratio plus max-height: a max-height is carried across the
	 * ratio into a max-width, so on a short screen the box narrowed and left a
	 * white strip down the card's right edge. The height is worked out from
	 * the card's own width instead (cqw), and the width stays 100%.
	 */
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--acmt-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Qualified: the scoped .acmt img reset (0,1,1) sets height:auto and would
   otherwise win, leaving a landscape photo as a strip across the top. */
.acmt .acmt__panel-img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; position: absolute; inset: 0; }

/* The whole-team card's photo is a wide group shot, so its box is wide too. */
.acmt__panel--team .acmt__panel-media { aspect-ratio: 16 / 9; }

@supports (height: 1cqw) {
	.acmt__panel { container-type: inline-size; }
	.acmt__panel-media { aspect-ratio: auto; height: min(125cqw, 62vh); }
	.acmt__panel--team .acmt__panel-media { aspect-ratio: auto; height: min(56.25cqw, 62vh); }
}

.acmt__panel-media .acmt__initials { font-size: 64px; color: #A8BCD2; }

/*
 * Focus moves to the heading when a card opens, so a screen reader announces
 * who it is. The heading is not something anyone can click or tab to
 * (tabindex -1), so it never gets a ring. Chrome on a phone treats that
 * programmatic focus as :focus-visible after a tap and drew a box round the
 * name, which is why both states are covered.
 */
.acmt__panel-title:focus,
.acmt__panel-title:focus-visible { outline: none; }

.acmt__stage {
	position: absolute;
	left: 14px;
	top: 14px;
	background: #FFFFFF;
	border-radius: 999px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 800;
	color: var(--acmt-navy);
	box-shadow: 0 6px 18px rgba(34, 62, 90, .16);
	pointer-events: none;
	max-width: calc(100% - 76px);
}

.acmt__panel-body {
	padding: 22px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.acmt__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--acmt-border);
	background: #FFFFFF;
	color: var(--acmt-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	text-decoration: none;
}

.acmt__close:hover { background: var(--acmt-tint); color: var(--acmt-navy); }

/* Navy, not the design's sky blue: at 13px sky blue is 3.4:1 and fails AA. */
.acmt__count {
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--acmt-navy);
}

.acmt__panel-title {
	font-size: 28px;
	line-height: 1.12;
	font-weight: 800;
	color: var(--acmt-navy);
	text-wrap: balance;
}

.acmt__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.acmt__pill {
	background: #EAF2FA;
	color: var(--acmt-navy);
	font-size: 14px;
	font-weight: 700;
	border-radius: 999px;
	padding: 5px 12px;
}

.acmt__years,
.acmt__note {
	font-size: 14px;
	font-weight: 500;
	color: var(--acmt-body-tint);
}

.acmt__panel-intro {
	font-size: 17px;
	line-height: 1.55;
	color: var(--acmt-navy);
	text-wrap: pretty;
}

.acmt__panel-more a,
.acmt__panel-more a:visited {
	font-size: 15px;
	font-weight: 700;
	color: var(--acmt-navy);
	text-decoration: none;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.acmt__hand {
	margin-top: auto;
	background: var(--acmt-tint);
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.acmt__hand-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--acmt-navy);
	font-weight: 500;
}

.acmt__panel-foot {
	/* Pushed to the bottom of the card, just above the faces bar. */
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
}

/* Previous / Next. Small outlined pills; 44px tall so they are easy to tap. */
.acmt a.acmt__nav,
.acmt a.acmt__nav:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--acmt-border);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--acmt-navy);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	flex: none;
}

.acmt a.acmt__nav:hover,
.acmt a.acmt__nav:focus-visible {
	background: var(--acmt-tint);
	border-color: #C9D5E4;
	color: var(--acmt-navy);
}

.acmt__nav--next { margin-left: auto; }
.acmt__panel-foot .acmt__hint { flex: 1; min-width: 0; }

.acmt__hint { font-size: 14.5px; color: var(--acmt-muted); }

/* ------------------------------------------------------- People picker */

.acmt__picker {
	display: flex;
	align-items: stretch;
	gap: 4px;
	padding: 10px 12px;
	border-top: 1px solid var(--acmt-border);
	background: #F7F9FC;
	overflow-x: auto;
}

.acmt__picker-group {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px 14px;
	border-left: 1px solid #DCE5F0;
	border-radius: 10px;
}

.acmt__picker-group:first-child { border-left: 0; }

.acmt__picker-label {
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acmt-navy);
	white-space: nowrap;
}

.acmt__picker ul { display: flex; gap: 6px; }

.acmt__picker a,
.acmt__picker a:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 54px;
	text-decoration: none;
	padding: 2px;
}

.acmt__picker .acmt__face-pic { width: 44px; height: 44px; }

.acmt__picker .acmt__face-name {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 54px;
}

.acmt__picker a[aria-current="true"] .acmt__face-pic {
	box-shadow: 0 0 0 3px var(--acmt-blue);
}

.acmt__picker a[aria-current="true"] .acmt__face-name { font-weight: 800; }

/* ============================================================= Desktop */

@media (min-width: 1024px) {

	.acmt__wrap { padding: 0 24px; }

	.acmt__h2 { font-size: 36px; line-height: 1.18; }
	.acmt__h4 { font-size: 26px; }
	.acmt__intro { font-size: 18px; }

	.acmt__btn { font-size: 19px; padding: 15px 28px; }

	.acmt__journey { padding: 76px 0 80px; }
	.acmt__journey .acmt__wrap { gap: 56px; }

	/*
	 * Three across, and the rows alternate direction so the eye follows one
	 * continuous path. The column is set per cell from PHP (--acmt-col), not
	 * with direction:rtl, which would flip the text inside the cards too.
	 */
	.acmt__steps {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 380px));
		justify-content: center;
		row-gap: 48px;
		column-gap: 0;
		align-items: start;
	}

	.acmt__step {
		grid-column: var(--acmt-col, auto);
		grid-row: var(--acmt-row, auto);
		max-width: none;
		gap: 22px;
	}

	/*
	 * Every step as tall as its row, so a drop to the next row always starts
	 * from a box whose foot IS the foot of the row. Rows grow with blurbs and
	 * faces (five surveyors wrap to two lines), and a step shorter than its
	 * row left the drop stopping short of the card below.
	 */
	.acmt__steps > .acmt__step { align-self: stretch; }

	/*
	 * Card width, as a variable because the connectors are placed from it.
	 * Capped so there are always 64px between neighbouring cards: at 1024px a
	 * column is 328px, and full-width cards left a 28px gap, too little for an
	 * arrow to sit in.
	 */
	.acmt__steps,
	.acmt__end { --acmt-card-w: min(300px, calc(100% - 64px)); }

	.acmt__polaroid { width: var(--acmt-card-w); }
	.acmt__card-media { height: 236px; }
	.acmt__polaroid .acmt__card-cap { height: 60px; font-size: 17px; }
	.acmt__badge { left: -14px; top: -14px; font-size: 16px; }
	.acmt__step-name { font-size: 20px; }
	.acmt__step-copy { max-width: 360px; }

	/*
	 * The dashed connectors become the arcs the design draws. Every one is
	 * placed from the card edges (the card is centred in its column, and
	 * --acmt-card-w wide) rather than from fixed offsets, so the arrowhead
	 * stops at the card it points to at any width. Checked with a script that
	 * measures each tip against its target card at 1024 to 1920px.
	 */
	.acmt__link {
		position: absolute;
		margin: 0;
		background: none;
		pointer-events: none;
	}

	.acmt__link::after { display: none; }
	.acmt__link svg { display: block; width: 100%; height: 100%; overflow: visible; }

	/*
	 * From 24px in over this card's corner to 8px short of the next card.
	 * Starting over the corner, as the design draws it, is what gives the arc
	 * enough width to read in a 64px gap. The arc inside scales to fit and
	 * is pinned to the far end, so the arrowhead is always at the next card.
	 */
	.acmt__link--right,
	.acmt__link--left {
		top: 30px;
		width: calc(100% - var(--acmt-card-w) + 16px);
		height: 60px;
	}

	.acmt__link--right { left: calc(50% + var(--acmt-card-w) / 2 - 24px); }
	.acmt__link--left { right: calc(50% + var(--acmt-card-w) / 2 - 24px); transform: scaleX(-1); }

	/*
	 * Anchored top AND bottom rather than given a height, so the drop between
	 * rows is as long as the row is tall. It was a fixed 250px, which ended
	 * 174px above the next card and read as the arrow pointing back at the card
	 * it came from. Rows here are content-height and vary with the blurb and
	 * whether the step has faces, so no single number can be right.
	 */
	.acmt__link--down-right,
	.acmt__link--down-left {
		top: 120px;
		bottom: -40px; /* The 48px row gap, less 8px so the tip stops above the card. */
		width: 72px;
		height: auto;
	}

	/* The arrowhead, at a fixed size at the foot of that stretched box. The
	   curve inside is stretched and an arrowhead drawn with it would be
	   elongated by the same factor. */
	.acmt__link--down-right::after,
	.acmt__link--down-left::after { display: block; left: 20px; }

	/* The box starts 40px in from the card's edge; the curve leaves the edge,
	   bows out and comes back to land 20px in, on the top of the card below. */
	.acmt__link--down-right { left: calc(50% + var(--acmt-card-w) / 2 - 40px); }
	.acmt__link--down-left { right: calc(50% + var(--acmt-card-w) / 2 - 40px); transform: scaleX(-1); }

	/*
	 * The last numbered step, widened into its row's empty cells: card 05 in
	 * its own column, the installation team's faces filling the one beside it.
	 * Its own two columns are the same width as the page's, so the card stays
	 * exactly under the card above it.
	 */
	.acmt__step--wide {
		grid-column: var(--acmt-col) / span var(--acmt-span);
		display: grid;
		grid-template-columns: repeat(var(--acmt-span), minmax(0, 1fr));
		/* Card and copy centred top to bottom in the panel: the step is
		   stretched to its row, which the step beside it can make taller. */
		grid-template-rows: auto auto;
		align-content: center;
		justify-items: center;
		align-items: start;
		column-gap: 0;
		row-gap: 22px;
		isolation: isolate;
	}

	.acmt__step--wide > .acmt__polaroid { grid-column: var(--acmt-card); grid-row: 1; }
	.acmt__step--wide > .acmt__step-copy { grid-column: var(--acmt-card); grid-row: 2; }

	.acmt__step--card-end > .acmt__step-team { grid-column: 1 / var(--acmt-card); }
	.acmt__step--card-start > .acmt__step-team { grid-column: 2 / -1; }

	.acmt__step--wide > .acmt__step-team {
		grid-row: 1 / -1;
		align-self: center;
		padding: 0 12px;
	}

	/*
	 * One shared panel behind the card, its copy and the faces, so the faces
	 * read as part of "Your installation" rather than a block of their own.
	 * Drawn on ::before so it does not move anything: the card stays aligned
	 * with the rest of the grid.
	 */
	.acmt__step--wide::before {
		content: "";
		position: absolute;
		inset: -24px 10px -26px 10px;
		z-index: -1;
		background: var(--acmt-panel);
		border: 1px solid var(--acmt-border);
		border-radius: 24px;
	}

	.acmt__step-team .acmt__faces {
		max-width: 340px;
		margin: 0 auto;
		gap: 22px 12px;
		padding: 0;
	}

	.acmt__face { min-width: 72px; }
	.acmt__face-pic { width: 66px; height: 66px; }
	.acmt__faces--many { max-width: 240px; }

	/*
	 * Row heights vary with the blurb and the faces, so the last step is
	 * stretched to its row: the drop below it then always starts from the
	 * same line, the foot of the row, and is a fixed length.
	 */
	.acmt__step--last { align-self: stretch; }

	/* The connectors sit over the widened step's panel, not under it. */
	.acmt__link { z-index: 1; }

	/*
	 * From under the last card, down to the finish card at the start of the
	 * bottom row. Left and width come from PHP (the columns vary with the
	 * number of steps); the curve stretches to fit and the arrowhead is the
	 * fixed-size chevron at the bottom-left corner, over column 1.
	 */
	.acmt__link--drop {
		top: calc(100% + 34px);
		left: var(--acmt-drop-left);
		width: var(--acmt-drop-width);
		height: 70px;
	}

	.acmt__link--drop::after {
		display: block;
		left: 0;
		bottom: -2px;
	}

	/* Straight down, when the last card is already over column 1. */
	.acmt__link--straight {
		width: 24px;
		margin-left: -12px;
		background-image: linear-gradient(to bottom, var(--acmt-blue) 0 6px, transparent 6px 14px);
		background-size: 3px 14px;
		background-repeat: repeat-y;
		background-position: center top;
	}
	.acmt__link--straight svg { display: none; }
	.acmt__link--straight::after { left: 50%; }

	/* Same three tracks as the steps above, so the two grids line up. */
	.acmt__end {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 380px));
		justify-content: center;
		row-gap: 48px;
		align-items: start;
	}

	.acmt__journey .acmt__end { margin-top: 60px; }

	.acmt__end .acmt__step { max-width: none; gap: 22px; }

	.acmt__story { padding: 0 0 76px; }

	.acmt__story-box {
		padding: 24px 36px 24px 24px;
		grid-template-columns: 170px minmax(0, 1fr) auto;
		grid-template-areas: "img copy actions";
		grid-template-rows: auto;
		gap: 32px;
		align-items: center;
	}

	.acmt__story-copy { grid-area: copy; display: flex; flex-direction: column; gap: 8px; }
	.acmt__story-copy .acmt__eyebrow { margin-bottom: 0; align-self: flex-start; }
	.acmt__story-copy .acmt__story-body { margin-top: 0; }
	.acmt__story-actions { margin-top: 0; }

	.acmt__story-copy .acmt__story-body { font-size: 17px; max-width: 60ch; }

	.acmt__why { padding: 76px 0; }
	.acmt__why .acmt__wrap { gap: 34px; }
	.acmt__why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
	.acmt__why-col { padding-top: 22px; gap: 14px; }
	.acmt__why-col .acmt__why-body,
	.acmt__ticks li { font-size: 17px; }

	.acmt__join { padding: 70px 0; }

	.acmt__join-box {
		padding: 32px 36px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 32px;
		align-items: center;
	}

	.acmt__join-box .acmt__join-body { font-size: 17.5px; max-width: 70ch; }

	.acmt__cta { padding: 76px 0; }

	.acmt__cta-grid {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		gap: 52px;
		align-items: center;
	}

	.acmt__cta-body { font-size: 19px; }
	.acmt__cta-actions { flex-direction: row; flex-wrap: wrap; gap: 14px; }
	.acmt__cta-card { padding: 32px 34px; gap: 14px; }
	.acmt__cta-phone { font-size: 32px; }
	.acmt__cta-phone svg { width: 30px; height: 30px; }
	.acmt__cta-card .acmt__cta-card-body,
	.acmt__cta-card .acmt__cta-email { font-size: 17px; }

	.acmt__modal.is-open,
	.acmt__modal:has(.acmt__panel:target) { padding: 40px 20px; }

	.acmt__dlg { border-radius: 24px; }

	.acmt__panel:target,
	.acmt__panel.is-active {
		display: grid;
		grid-template-columns: 400px minmax(0, 1fr);
	}

	/* Beside the text on desktop: the column sets the width, the row the height. */
	.acmt__panel-media,
	.acmt__panel--team .acmt__panel-media { aspect-ratio: auto; height: auto; min-height: 500px; }
	.acmt__stage { left: 18px; top: 18px; font-size: 13.5px; padding: 8px 14px; }

	.acmt__panel-body { padding: 34px 36px 28px; gap: 16px; }

	.acmt__close { top: 16px; right: 16px; }

	.acmt__panel-title { font-size: 38px; line-height: 1.1; padding-right: 48px; }
	.acmt__panel-intro { font-size: 19px; }
	.acmt__hand { padding: 18px 20px; flex-direction: row; align-items: center; flex-wrap: wrap; }
	.acmt__hand-text { flex: 1; min-width: 200px; }
	.acmt__hand .acmt__btn { white-space: nowrap; font-size: 16.5px; min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
	.acmt__polaroid { transform: none; }
}