/* ===================================
   Components: forms, form messages, buttons, marquee controls, slide pager, headings.
=================================== */

/* -----------------------------------
   Form fields
----------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 2.1rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--black);
	border-radius: 0;
	outline: 0;
	font-family: var(--wp--preset--font-family--body);
	-webkit-appearance: none;
	resize: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: var(--wp--preset--color--black);
}
/* select and textarea are boxed, not underlined */
select {
	height: 3.45rem;
	padding: 0.8em;
	border: 1px solid var(--wp--preset--color--black);
	background: url(../../images/select-arrow.png) no-repeat 98% center var(--wp--preset--color--white);
}
textarea {
	width: 100%;
	height: auto;
	padding: 0.8em;
	border: 1px solid var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--white);
}
label select,
label textarea {
	margin-top: 17px;
}
input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--darkblue);
	opacity: 1; /* Firefox dims placeholders by default */
}

/* -----------------------------------
   Contact Form 7 layout. The form's markup (CF7 > Contact forms) uses
   .half-col / .full-col to place fields in two columns.
----------------------------------- */
form.wpcf7-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
form.wpcf7-form p {
	width: 100%;
	margin: 0;
}
form.wpcf7-form br {
	display: none;
}
form.wpcf7-form label {
	display: block;
	margin-bottom: 20px;
	color: var(--wp--preset--color--black);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2.52px;
	text-transform: uppercase;
}
form.wpcf7-form label small,
form.wpcf7-form label i {
	display: block;
	margin-top: 15px;
	color: var(--wp--preset--color--darkblue);
	font-size: 14px;
}
form.wpcf7-form .wpcf7-form-control-wrap {
	position: relative;
	display: block;
	margin-bottom: 10px;
}
.wpcf7-form-control.wpcf7-textarea {
	height: 216px;
}
.wpcf7 input[type="file"] {
	font-family: var(--wp--preset--font-family--body);
}
.wpcf7-spinner {
	display: block;
}
.center .wpcf7-spinner {
	margin: 0 auto;
}
.half-col {
	width: 49%;
	margin-bottom: 10px;
}
.full-col {
	width: 100%;
	margin-bottom: 10px;
}
@media only screen and (max-width: 600px) {
	.half-col {
		width: 100%;
	}
}

/* -----------------------------------
   Contact Form 7 messages. A field error turns the field's line red and puts a short message
   under it, aligned with the field. Form-level messages are a calm panel tinted by state
   (error, sent, spam).
----------------------------------- */
.wpcf7 {
	--form-error: #c62828;
	--form-ok: var(--wp--preset--color--darkgreen);
}
.wpcf7 .wpcf7-not-valid {
	border-bottom-color: var(--form-error) !important; /* beats CF7's own field styles */
}
.wpcf7 :is(textarea, select).wpcf7-not-valid {
	border-color: var(--form-error) !important;
}
.wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	background: none;
	color: var(--form-error, #c62828);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2px;
	text-transform: none;
	animation: form-msg-in 400ms var(--ease-out) both;
}
.wpcf7-not-valid-tip::before {
	content: "!";
	flex: none;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: currentColor;
	color: var(--wp--preset--color--white);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.wpcf7 form .wpcf7-response-output {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 28px 0 0;
	padding: 16px 20px;
	border: 0;
	border-radius: 14px;
	background: #f4f6f8;
	color: var(--wp--preset--color--black);
	font-size: 15px;
	line-height: 1.5;
	animation: form-msg-in 450ms var(--ease-out) both;
}
.wpcf7 form .wpcf7-response-output::before {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	font-size: 13px;
	font-weight: 700;
}
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted) .wpcf7-response-output {
	background: #fdf0f0;
}
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted) .wpcf7-response-output::before {
	content: "!";
	background: var(--form-error);
}
.wpcf7 form.spam .wpcf7-response-output {
	background: #fff7e6;
}
.wpcf7 form.spam .wpcf7-response-output::before {
	content: "!";
	background: #b7791f;
}
.wpcf7 form.sent .wpcf7-response-output {
	background: #eaf8ee;
}
.wpcf7 form.sent .wpcf7-response-output::before {
	content: "\2713";
	background: var(--form-ok);
}
.wpcf7 form.init .wpcf7-response-output:empty,
.wpcf7 form.resetting .wpcf7-response-output:empty {
	display: none;
}
@keyframes form-msg-in {
	from {
		opacity: 0;
		transform: translate3d(0, -4px, 0);
	}
}

/* ===================================
   Buttons
   The global `button` style is a green pill. A <button> that should look like plain text needs
   `all: unset` and `::before/::after { content: none }`.
   (`:not(.carousel__button)` matches every button now; it stays because it raises these rules'
   specificity, which other button rules rely on.)
=================================== */
button:not(.carousel__button),
.button,
input[type="button"],
input[type="reset"],
input[type="submit"]:not([disabled]) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px; /* label to arrow */
	box-sizing: border-box !important;
	width: auto;
	height: 40px;
	margin: 0;
	padding: 0 19px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 37px;
	letter-spacing: -0.43px;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 0.1s var(--ease-out),
		background-color 0.1s var(--ease-out),
		border-color 0.1s var(--ease-out);
}
input[type="button"],
input[type="reset"],
input[type="submit"]:not([disabled]) {
	padding: 0 50px;
}

/* "Send message" (Contact form submit) is text with a long arrow, not a pill; its arrow is below */
button.btn_submit {
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent !important; /* over the focus/active black */
	color: var(--wp--preset--color--black);
	font-weight: 500;
	line-height: normal;
	letter-spacing: 2.7px;
}
button.btn_submit:focus {
	color: var(--wp--preset--color--black);
	font-weight: 500;
}

/* style variants (ACF "Button style") */
button.button-white,
.button.button-white {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary);
}
button.button-darkgreen,
.button.button-darkgreen {
	border-color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}
button.button-transparent,
.button.button-transparent {
	border-color: var(--wp--preset--color--primary);
	background-color: transparent;
	color: var(--wp--preset--color--white);
}

/* hover colours (ACF "Button hover style"); the ink below brings them in */
@media (hover: hover) and (pointer: fine) {
	button:hover,
	.button:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover {
		border-color: var(--wp--preset--color--secondary);
		background-color: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--white);
	}
	button.hover-button-primary:hover,
	.button.hover-button-primary:hover,
	button.button-darkgreen:hover,
	.button.button-darkgreen:hover {
		border-color: var(--wp--preset--color--primary);
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--black);
	}
	button.hover-button-white:hover,
	.button.hover-button-white:hover {
		border-color: var(--wp--preset--color--white);
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--secondary);
	}
	button.hover-button-darkgreen:hover,
	.button.hover-button-darkgreen:hover {
		border-color: var(--wp--preset--color--secondary);
		background-color: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--white);
	}
}
button:active,
button:focus,
.button:active,
.button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* the arrow on plain <button>s (icon font); .button draws its own (below) */
button:not(.carousel__button)::after,
.button::after {
	content: "\e80e";
	display: block;
	font-family: "excentric";
	font-size: 12px;
	transition: transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	button:not(.carousel__button):hover::after {
		transform: translateX(4px);
	}
}

/* -----------------------------------
   Pill buttons (.button): ink hover
   The hover colour spreads out from where the pointer enters (--bx/--by, set by
   assets/js/motion.js) and shrinks back into where it leaves; the text colour follows as the ink
   passes, and the variant's own hover background lands once the ink covers the pill, so the
   hand-off can't be seen. A press dips to 97%.
   --btn-ink is the ink colour: the variant's hover colour.
----------------------------------- */
.button {
	--btn-ink: var(--wp--preset--color--secondary);
	isolation: isolate;
	overflow: hidden;
	margin-right: calc(var(--btn-tail) * -1); /* the arrow's extra width comes out of the margin (below) */
	transition:
		color 300ms var(--ease-out),
		border-color 300ms var(--ease-out),
		background-color 0s,
		transform 160ms var(--ease-out),
		--btn-tail 650ms var(--ease-out);
}
.button.hover-button-primary,
.button.button-darkgreen {
	--btn-ink: var(--wp--preset--color--primary);
}
.button.hover-button-white {
	--btn-ink: var(--wp--preset--color--white);
}
.button.hover-button-darkgreen {
	--btn-ink: var(--wp--preset--color--secondary);
}

.button::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: var(--btn-ink, transparent);
	clip-path: circle(0% at var(--bx, 50%) var(--by, 50%));
	pointer-events: none;
	transition: clip-path 320ms cubic-bezier(0.3, 0, 0.2, 1); /* leaving: shrinks at once */
}
/* the script snaps the ink to nothing at the new entry point before it grows */
.button.ink-reset::before {
	transition: none !important;
	clip-path: circle(0% at var(--bx, 50%) var(--by, 50%)) !important;
}
.button:focus-visible {
	--btn-tail: 0.5em;
	transition:
		color 220ms var(--ease-out) 80ms,
		border-color 220ms var(--ease-out) 80ms,
		background-color 0s linear 330ms,
		transform 160ms var(--ease-out),
		--btn-tail 650ms var(--ease-out);
}
.button:focus-visible::before {
	clip-path: circle(150% at var(--bx, 50%) var(--by, 50%));
	transition: clip-path 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.button:hover {
		--btn-tail: 0.5em;
		transition:
			color 220ms var(--ease-out) 80ms,
			border-color 220ms var(--ease-out) 80ms,
			background-color 0s linear 330ms,
			transform 160ms var(--ease-out),
			--btn-tail 650ms var(--ease-out);
	}
	.button:hover::before {
		clip-path: circle(150% at var(--bx, 50%) var(--by, 50%));
		transition: clip-path 420ms var(--ease-out);
	}
}
.button:active {
	transform: scale(0.97);
}

/* -----------------------------------
   Pill button arrow. Buttons lead to pages of this site, so the arrow is the design's → (drawn,
   like the case-study Previous/Next). On hover/focus its shaft draws out by --btn-tail and the
   pill widens with it; the same amount comes off the right margin, so a centred button doesn't
   re-centre and nothing around it moves. Buttons that open another site (target="_blank" or
   .is-external) show the ↗ instead, whose tail grows (global/hero.css).
----------------------------------- */
@property --btn-tail {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}
:root {
	/* the design's right arrow (24x22 artboard: 1.5 stroke, a tall right-angle chevron, square ends).
     Each use sets --ah (its height); the shaft is 1.5/22 of it thick, on the chevron's centre line. */
	--arrow-e-head: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='11 0 13 22'%3E%3Cpath d='M12.336.867 22.614 11 12.336 21.133' fill='none' stroke='%23000' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E");
}
.button::after {
	--ah: 0.82em;
	content: "";
	flex: none;
	width: calc(var(--ah) * 1.09 + var(--btn-tail));
	height: var(--ah);
	background: currentColor;
	font-size: inherit;
	-webkit-mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) left 0 top 50% / calc(100% - var(--ah) * 0.11) calc(var(--ah) * 0.068) no-repeat;
	mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) left 0 top 50% / calc(100% - var(--ah) * 0.11) calc(var(--ah) * 0.068) no-repeat;
	transform: none;
	transition: none; /* its width follows --btn-tail */
}
.button:is([target="_blank"], .is-external) {
	--btn-tail: 0px;
}
.button:is([target="_blank"], .is-external)::after {
	--ar: 0.7em;
	--ar-gap: 0px;
	--arrow-c: currentColor;
}
.button:is([target="_blank"], .is-external):focus-visible::after {
	--tail: calc(var(--ar) * 1.5);
}
@media (hover: hover) and (pointer: fine) {
	.button:is([target="_blank"], .is-external):hover::after {
		--tail: calc(var(--ar) * 1.5);
	}
}

/* -----------------------------------
   "Send message" arrow: its shaft draws out on hover (animated text-indent); the label's weight
   stays put.
----------------------------------- */
button.btn_submit::after {
	content: "\e80a";
	overflow: hidden;
	margin-left: 5px;
	font-size: 20px;
	text-indent: -52px;
	transition:
		text-indent 650ms var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}
button.btn_submit:focus-visible::after {
	transform: none; /* the shaft grows instead of the whole arrow nudging */
}
@media (hover: hover) and (pointer: fine) {
	button.btn_submit:hover {
		color: var(--wp--preset--color--black);
		font-weight: 500;
	}
	button.btn_submit:hover::after {
		margin-left: 5px;
		text-indent: 0px;
		transform: none;
	}
}
button.btn_submit:active::after {
	transform: translateX(3px);
}
/* sending (blocks/contact/script.js): the label reads "Sending…", the arrow drifts right and back,
   and the button takes no clicks. Contact Form 7's own spinner is hidden. */
.wpcf7-form.submitting button.btn_submit {
	pointer-events: none;
}
.wpcf7-form.submitting button.btn_submit::after {
	text-indent: 0px;
	animation: exc-send-drift 700ms var(--ease-in-out) infinite alternate;
}
@keyframes exc-send-drift {
	to {
		transform: translateX(6px);
	}
}
.wpcf7-form:has(button.btn_submit) .wpcf7-spinner {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.wpcf7-form.submitting button.btn_submit::after {
		animation: none;
	}
}

/* ===================================
   Marquee controls (assets/js/marquee.mjs): small, quiet previous / pause-play / next buttons at
   the bottom-right of the section. Rows can also be dragged or swiped sideways; vertical swipes
   still scroll the page. Reduced motion: rows scroll sideways by hand.
=================================== */
button.marquee-toggle {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
	transition:
		opacity var(--dur-short) var(--ease-out),
		background-color var(--dur-short) var(--ease-out),
		transform 160ms var(--ease-out);
}
button.marquee-toggle::before,
button.marquee-toggle::after {
	content: none;
}
button.marquee-toggle:focus-visible {
	opacity: 1;
	outline: 2px solid var(--wp--preset--color--darkgreen);
	outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
	button.marquee-toggle:hover {
		opacity: 1;
	}
}
button.marquee-toggle:active {
	transform: scale(0.94);
}
button.marquee-toggle svg {
	width: 14px;
	height: 14px;
}
.has-marquee-toggle {
	position: relative;
}
.has-marquee-toggle > .mq-buttons {
	position: absolute;
	right: clamp(16px, 3vw, 48px);
	bottom: clamp(16px, 3vw, 40px);
	z-index: 2;
	display: flex;
	gap: 8px;
}
.section_industry_experience > .mq-buttons {
	color: var(--wp--preset--color--white);
}
.mq-viewport.is-manual {
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
.mq-viewport.is-draggable {
	touch-action: pan-y;
	cursor: grab;
}
.mq-viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}
.mq-viewport.is-draggable img {
	-webkit-user-drag: none;
	user-select: none;
}

/* ===================================
   Slide pager: one slim bar per slide, the current one longer, filling over the autoplay interval.
   Vertical on desktop, horizontal below 980px. Used by the home hero (assets/js/theme.js) and the
   success-driven block. The script sets --pager-interval, and on an ancestor:
   .is-paused (the fill holds where it is) and .is-stopped (a visitor picked a slide: the bar shows full).
   Two classes on the bar rules, so they win over the global button style.
=================================== */
.exc-pager {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.exc-pager .exc-pager__dot {
	all: unset;
	position: relative;
	display: block;
	width: 3px;
	height: 28px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
	cursor: pointer;
	transition:
		height var(--dur-short) var(--ease-out),
		width var(--dur-short) var(--ease-out),
		background-color var(--dur-short) var(--ease-out);
}
.exc-pager .exc-pager__dot::before,
.exc-pager .exc-pager__dot::after {
	content: none;
}
@media (hover: hover) and (pointer: fine) {
	.exc-pager .exc-pager__dot:hover {
		background: rgba(255, 255, 255, 0.6);
	}
}
.exc-pager .exc-pager__dot.is-current {
	height: 48px;
}
.exc-pager .exc-pager__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
.exc-pager__fill {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--neongreen);
	transform: scaleY(0);
	transform-origin: top;
}
/* fills over the autoplay interval (linear is right for a timer) */
.exc-pager .exc-pager__dot.is-current .exc-pager__fill {
	animation: exc-pager-fill-y var(--pager-interval, 7000ms) linear forwards;
}
.is-paused .exc-pager .exc-pager__dot.is-current .exc-pager__fill {
	animation-play-state: paused;
}
.is-stopped .exc-pager .exc-pager__dot.is-current .exc-pager__fill {
	animation: none;
	transform: none;
}
@keyframes exc-pager-fill-y {
	to {
		transform: scaleY(1);
	}
}
@media only screen and (max-width: 979px) {
	.exc-pager {
		flex-direction: row;
	}
	.exc-pager .exc-pager__dot {
		width: 28px;
		height: 3px;
	}
	.exc-pager .exc-pager__dot.is-current {
		width: 48px;
		height: 3px;
	}
	.exc-pager__fill {
		transform: scaleX(0);
		transform-origin: left;
	}
	.exc-pager .exc-pager__dot.is-current .exc-pager__fill {
		animation-name: exc-pager-fill-x;
	}
}
@keyframes exc-pager-fill-x {
	to {
		transform: scaleX(1);
	}
}

/* ===================================
   Headings and section labels
=================================== */
h1 {
	margin: 0 0 22px 0;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--playfairdisplay);
	font-size: var(--wp--preset--font-size--large-80);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	letter-spacing: -3%; /* where supported; 0 elsewhere */
	text-transform: none;
}
h2 {
	margin: 0 0 36px 0;
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--playfairdisplay);
	font-size: var(--wp--preset--font-size--large-50);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -3%;
}
h3 {
	margin: 0 0 14px 0;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--medium-40);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}
h4 {
	margin: 0 0 15px 0;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small-28);
	font-weight: 400;
	line-height: 1.2;
}
h5 {
	font-size: var(--wp--preset--font-size--small-21);
	font-weight: 400;
}
h6 {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}
h1.has-background,
h2.has-background,
h3.has-background,
h4.has-background,
h5.has-background,
h6.has-background {
	padding: 0.5em;
}
.section_title_above {
	margin-bottom: 36px;
	color: var(--wp--preset--color--black);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.section_description {
	max-width: 585px;
	margin-bottom: 70px;
}
.textcolor-white h1,
.textcolor-white h2,
.textcolor-white h3,
.textcolor-white h4,
.textcolor-white h5,
.textcolor-white .section_title_above {
	color: var(--wp--preset--color--white);
}
@media screen and (max-width: 768px) {
	.section_title_above {
		margin-bottom: 20px;
		letter-spacing: 2px;
	}
	h2 {
		margin-bottom: 30px;
	}
	.section_description {
		margin-bottom: 40px;
	}
}