/*
 * Senior HR Forum v1.8.8.
 * "most valuable assets" highlight: one smooth draw-in, left to right.
 *   transform: scaleX(0 -> 1), 1.8 s, cubic-bezier(.22, .61, .36, 1), started by assets/js/mark.js
 *   0.3 s after its heading has finished appearing (homepage: after the section's scroll reveal;
 *   About page: after the heading's page-load rise). It is a transition, so nothing ends or restarts
 *   it. will-change only while drawing (.is-drawing). Shown fully drawn without JS, with
 *   "reduce motion" and in the Editor.
 */
.shf-mark::after { animation: none !important; transform: none; transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
	html.shf-motion:not(.shf-mark-static) .shf-mark::after {
		transform: scaleX(0);
		transition: transform 1.8s cubic-bezier(.22, .61, .36, 1);
	}
	html.shf-motion .shf-mark.is-drawing::after { will-change: transform; }
	html.shf-motion .shf-mark.is-drawn::after { transform: scaleX(1); }
	/* Safety: if the highlight script never runs, show it once the page entrances are done. */
	html.shf-entrance-done:not(.shf-mark-js) .shf-mark::after { transform: none; transition: none; }
}
.editor-styles-wrapper .shf-mark::after { transform: none !important; transition: none !important; }

/* ===================== Contact hero: LinkedIn / Facebook icon buttons under the lead line ===================== */
.shf-contact-hero__follow { margin-top: 26px !important; }
.shf-contact-hero__follow .shf-follow { justify-content: flex-start; }

/* ===================== Shared Contact/Join form: required stars and "(optional)" ===================== */
.shf-cform__req { color: #D93025; font-weight: 700; margin-left: 2px; } /* 4.9:1 on white */
.shf-cform__reqnote { margin: 4px 0 14px !important; font-size: .875rem; color: var(--shf-slate, #4A5A66); }
.shf-cform__reqnote .shf-cform__req { margin-left: 3px; }
.shf-cform label .shf-cform__opt, .shf-cform .shf-cform__opt {
	font-weight: 400 !important; font-size: .875rem !important; color: var(--shf-slate, #4A5A66) !important;
	letter-spacing: 0; text-transform: none; font-style: normal; margin-left: 2px;
}
.shf-cform .shf-cform__join-mark { display: none; }
.shf-cform[data-mode="join"] .shf-cform__join-mark { display: inline; }
.shf-cform[data-mode="join"] .shf-cform__enquiry-mark { display: none; }
.shf-cform .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ===================== v1.8.9: About page "Who we are" + "What we do" (approved copy, 23 Oct 2026) ===================== */
/* The longer approved wording sits a step smaller so the open statement stays airy, not a wall of text. */
.shf-about-story > .shf-about-intro.shf-about-who {
	--shf-who-pad: clamp(28px, 5vw, 72px);
	--shf-what-indent: clamp(0px, 7vw, 110px);
}
.shf-about-who .shf-about-who__text {
	max-width: 42ch;
	font-size: clamp(1.2rem, 0.98rem + 0.85vw, 1.65rem);
}
/* "What we do": same eyebrow and type, set in from "Who we are" and joined to the teal rule by a thin
   branch line, so the two read as layers of one statement rather than two boxes. */
.shf-about-who > .shf-about-what {
	position: relative;
	margin: clamp(34px, 4vw, 54px) 0 0 var(--shf-what-indent) !important;
}
.shf-about-what > * { margin: 0 !important; }
.shf-about-what::before {
	content: "";
	position: absolute;
	top: 0.62em;
	right: calc(100% + 12px);
	width: calc(var(--shf-what-indent) + var(--shf-who-pad) - 12px);
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(34, 184, 207, 0.6), rgba(34, 184, 207, 0.12));
	font-size: 0.82rem;
	pointer-events: none;
}
.shf-about-who .shf-about-what .shf-about-what__text {
	margin-top: 16px !important;
	max-width: 44ch;
	font-size: clamp(1.08rem, 0.95rem + 0.55vw, 1.4rem);
	font-weight: 500;
	line-height: 1.55;
	color: var(--shf-ink);
}
@media (max-width: 600px) {
	.shf-about-story > .shf-about-intro.shf-about-who { --shf-what-indent: 0px; }
}