/* ==========================================================================
   Project Pathfinder: the modal.

   Loaded only on a page that prints [enquries_pathfinder], and only when the feature can answer.
   It carries its own tokens rather than reading the theme's, because the plugin has to look right
   wherever it is dropped, and it keeps to the site's one blue ramp so that on the contact page it
   reads as part of the page rather than as a widget sitting on top of it.

   Everything is scoped under .enqpf. The dialog lives in the browser's top layer, so nothing here
   needs a z-index.
   ========================================================================== */

.enqpf {
	--pf-surface: #ffffff;
	--pf-paper: #f6f8fc;
	--pf-ink: #0f1e3a;
	--pf-ink-2: #3d4d6b;
	--pf-ink-3: #6c7c99;
	--pf-blue: #46659b;
	--pf-blue-dark: #38517d;
	--pf-blue-deep: #2d4164;
	--pf-soft: #e5eaf3;
	--pf-line: rgba(15, 30, 58, 0.10);
	--pf-line-2: rgba(15, 30, 58, 0.18);
	--pf-danger: #a4332b;
	--pf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--pf-r: 16px;
	--pf-r-sm: 9px;
	--pf-t: 180ms;
	--pf-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	width: min(680px, calc(100vw - 32px));
	max-height: min(860px, calc(100vh - 48px));
	padding: 0;
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-r);
	background: var(--pf-surface);
	color: var(--pf-ink);
	font-family: var(--pf-font);
	box-shadow: 0 2px 6px rgba(15, 30, 58, 0.06), 0 40px 90px -40px rgba(15, 30, 58, 0.45);
	overflow: hidden;
}

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

/* The script shows and hides the steps with the hidden attribute. The browser's own rule for it
   is display: none at the lowest priority there is, so any display an author sets wins over it:
   the conversation step is a flex column, and with the attribute alone it stayed a flex column,
   which put an empty log and the reply box under the details form and stretched the dialog to
   its full height around them. This restores the attribute's meaning for everything in here,
   whatever display a step has when it is shown. */
.enqpf [hidden] {
	display: none;
}

.enqpf::backdrop {
	background: rgba(15, 30, 58, 0.55);
	backdrop-filter: blur(2px);
}

.enqpf[open] {
	animation: enqpf-in var(--pf-t) var(--pf-ease) both;
}

@keyframes enqpf-in {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}

.enqpf__inner {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Visible to a screen reader, to nobody else. */
.enqpf__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

.enqpf__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--pf-line);
	background: var(--pf-surface);
}

.enqpf__eyebrow {
	margin: 0 0 4px;
	color: var(--pf-blue);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.enqpf__title {
	margin: 0;
	font-size: clamp(19px, 2.2vw, 23px);
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.enqpf__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--pf-line);
	border-radius: 50%;
	background: var(--pf-surface);
	color: var(--pf-ink-2);
	cursor: pointer;
	transition: background var(--pf-t) var(--pf-ease), color var(--pf-t) var(--pf-ease);
}

.enqpf__close:hover {
	background: var(--pf-soft);
	color: var(--pf-blue-deep);
}

/* --------------------------------------------------------------------------
   Step one: the details
   -------------------------------------------------------------------------- */

.enqpf__intro {
	padding: 20px 22px 24px;
}

.enqpf__lead {
	margin: 0 0 18px;
	color: var(--pf-ink-2);
	font-size: 14px;
	line-height: 1.6;
}

.enqpf__field {
	margin-bottom: 13px;
}

.enqpf__field label,
.enqpf__captcha > label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.enqpf__optional {
	color: var(--pf-ink-3);
	font-weight: 400;
}

.enqpf input[type="text"],
.enqpf input[type="email"],
.enqpf input[type="tel"],
.enqpf input[type="number"],
.enqpf textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--pf-line-2);
	border-radius: var(--pf-r-sm);
	background: var(--pf-surface);
	color: var(--pf-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color var(--pf-t) var(--pf-ease), box-shadow var(--pf-t) var(--pf-ease);
}

/* Focus.

   A field that is being typed into warms its border and gains a faint glow: one soft edge, not a
   ring standing off the box. The earlier version paired a full-strength border with a heavier halo
   and read as two rings around the same field.

   Buttons and chips keep a real outline, because there the border is the shape of the control and
   colouring it says nothing; a keyboard user needs to see where they are. It sits closer and
   lighter than the site's own, which is deliberately loud for a page of links. */
.enqpf input:focus,
.enqpf textarea:focus {
	outline: none;
	border-color: rgba(70, 101, 155, 0.62);
	box-shadow: 0 0 0 3px rgba(70, 101, 155, 0.10);
}

.enqpf button:focus-visible,
.enqpf a:focus-visible {
	outline: 2px solid rgba(70, 101, 155, 0.55);
	outline-offset: 2px;
}

.enqpf input:focus-visible,
.enqpf textarea:focus-visible {
	outline: none;
}

.enqpf__check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 4px 0 16px;
	color: var(--pf-ink-2);
	font-size: 13px;
	line-height: 1.5;
	cursor: pointer;
}

.enqpf__check input {
	flex: 0 0 auto;
	margin-top: 2px;
}

.enqpf__captcha-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

.enqpf__captcha-img {
	height: 38px;
	width: auto;
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-r-sm);
	background: var(--pf-paper);
}

.enqpf__captcha-new {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--pf-line-2);
	border-radius: var(--pf-r-sm);
	background: var(--pf-surface);
	color: var(--pf-ink-3);
	cursor: pointer;
}

.enqpf__captcha-new:hover {
	color: var(--pf-blue);
}

.enqpf__captcha-row input {
	width: 96px;
	text-align: center;
}

/* Nothing points at it, nothing focuses it, and it is not merely transparent: a field that is
   only invisible is still read out and still tabbed into. */
.enqpf__pot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.enqpf__go,
.enqpf__send,
.enqpf__fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid var(--pf-blue);
	border-radius: var(--pf-r-sm);
	background: var(--pf-blue);
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--pf-t) var(--pf-ease), border-color var(--pf-t) var(--pf-ease);
}

.enqpf__go {
	width: 100%;
	margin-top: 4px;
}

.enqpf__go:hover,
.enqpf__send:hover,
.enqpf__fallback:hover {
	background: var(--pf-blue-dark);
	border-color: var(--pf-blue-dark);
}

.enqpf__go[disabled],
.enqpf__send[disabled] {
	opacity: 0.55;
	cursor: default;
}

.enqpf__fine {
	margin: 12px 0 0;
	color: var(--pf-ink-3);
	font-size: 11.5px;
	line-height: 1.5;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Step two: the conversation
   -------------------------------------------------------------------------- */

/* The conversation is a column in which only the log scrolls. The composer was sticky at first,
   which looked right until a row of quick replies wrapped to two lines on a narrow screen and the
   composer sat on top of the second row. Letting the log absorb the spare height instead means
   nothing can ever be underneath anything. */
.enqpf__chat {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.enqpf__log {
	flex: 1 1 auto;
	min-height: 200px;
	max-height: 46vh;
	padding: 20px 22px 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Everything in the conversation arrives, rather than being there suddenly. The text is in the
   DOM complete before any of this runs, so a screen reader still reads one whole message once;
   what is animated is only how it comes into view. */
@keyframes enqpf-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.enqpf-msg {
	max-width: 88%;
	margin-bottom: 12px;
	animation: enqpf-rise 240ms var(--pf-ease) both;
}

.enqpf-msg--bot {
	margin-right: auto;
}

.enqpf-msg--me {
	margin-left: auto;
}

.enqpf-msg__text {
	margin: 0;
	padding: 11px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
}

.enqpf-msg--bot .enqpf-msg__text {
	border: 1px solid var(--pf-line);
	border-bottom-left-radius: 5px;
	background: var(--pf-paper);
	color: var(--pf-ink);
}

.enqpf-msg--me .enqpf-msg__text {
	border-bottom-right-radius: 5px;
	background: var(--pf-blue);
	color: #ffffff;
}

.enqpf-msg--wait .enqpf-dots {
	display: inline-flex;
	gap: 4px;
	padding: 14px;
	border: 1px solid var(--pf-line);
	border-radius: 14px 14px 14px 5px;
	background: var(--pf-paper);
}

.enqpf-dots i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pf-ink-3);
	animation: enqpf-bounce 1.1s infinite ease-in-out;
}

.enqpf-dots i:nth-child(2) { animation-delay: 0.16s; }
.enqpf-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes enqpf-bounce {
	0%, 62%, 100% { opacity: 0.32; transform: none; }
	28%           { opacity: 1; transform: translateY(-3px); }
}

.enqpf__replies {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 7px;
	padding: 8px 22px 0;
}

.enqpf__replies:empty {
	display: none;
}

/* The suggestions come in behind the answer, one after another, because they are part of what was
   just said rather than a toolbar that was always there. */
.enqpf-chip {
	animation: enqpf-rise 220ms var(--pf-ease) both;
	animation-delay: calc(140ms + var(--i, 0) * 70ms);
	padding: 7px 13px;
	border: 1px solid var(--pf-line-2);
	border-radius: 999px;
	background: var(--pf-surface);
	color: var(--pf-blue-deep);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--pf-t) var(--pf-ease), border-color var(--pf-t) var(--pf-ease);
}

.enqpf-chip:hover {
	border-color: var(--pf-blue);
	background: var(--pf-soft);
}

/* No rule above the composer. It fell directly under the row of suggestions and read as a line
   drawn through them, which made the suggestions look like part of the furniture rather than
   something that had just been said. The composer is already separated by its own white space. */
.enqpf__compose {
	flex: 0 0 auto;
	padding: 14px 22px 18px;
	background: var(--pf-surface);
}

.enqpf__compose textarea {
	resize: vertical;
	min-height: 54px;
}

.enqpf__compose-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 9px;
}

.enqpf__count {
	margin: 0;
	color: var(--pf-ink-3);
	font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   Step three: the outline
   -------------------------------------------------------------------------- */

.enqpf__outline {
	padding: 22px;
	border-top: 1px solid var(--pf-line);
	background: var(--pf-paper);
}

.enqpf-outline__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.enqpf-outline__top .enqpf__eyebrow {
	margin: 0;
}

.enqpf-confidence {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pf-soft);
	color: var(--pf-blue-deep);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.enqpf-confidence--low {
	background: #fdf1e7;
	color: #8a4a12;
}

.enqpf-outline__title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 650;
	line-height: 1.3;
}

.enqpf-outline__lead {
	margin: 0 0 16px;
	color: var(--pf-ink-2);
	font-size: 13.5px;
	line-height: 1.6;
}

/* Flex, not grid, and that is the whole reason it is here twice.

   A grid with a fixed column count leaves a hole whenever the number of facts is not a multiple of
   it, and the hole shows as a grey block because the dividing lines are the container's background
   coming through the gaps. The number of facts is not fixed: a value the model left empty is not
   printed. Flex items share whatever row they are on, so three facts sit as three, two as two, and
   there is never a cell with nothing in it. */
.enqpf-facts {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px;
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-r-sm);
	background: var(--pf-surface);
	overflow: hidden;
}

.enqpf-fact {
	flex: 1 1 150px;
	padding: 12px 14px;
	border-left: 1px solid var(--pf-line);
}

.enqpf-fact:first-child {
	border-left: 0;
}

.enqpf-fact__label {
	margin: 0 0 3px;
	color: var(--pf-ink-3);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.enqpf-fact__value {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

.enqpf-outline__h {
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pf-ink-2);
}

.enqpf-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	counter-reset: enqpf-step;
}

.enqpf-list li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--pf-line);
}

.enqpf-list li:last-child {
	border-bottom: 0;
}

.enqpf-list__name {
	font-size: 13.5px;
	font-weight: 600;
}

.enqpf-list__meta {
	color: var(--pf-ink-3);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.enqpf-list__text {
	grid-column: 1 / -1;
	color: var(--pf-ink-2);
	font-size: 12.5px;
	line-height: 1.55;
}

.enqpf-list--phases li {
	counter-increment: enqpf-step;
}

.enqpf-list--phases .enqpf-list__name::before {
	content: counter(enqpf-step, decimal-leading-zero) " ";
	color: var(--pf-blue);
	font-variant-numeric: tabular-nums;
}

.enqpf-list--plain li {
	display: block;
	color: var(--pf-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.enqpf-outline__note {
	margin: 0 0 10px;
	padding: 10px 13px;
	border-left: 2px solid var(--pf-blue);
	background: var(--pf-soft);
	border-radius: 0 var(--pf-r-sm) var(--pf-r-sm) 0;
	color: var(--pf-blue-deep);
	font-size: 12.5px;
	line-height: 1.55;
}

.enqpf-outline__next,
.enqpf-outline__done {
	margin: 0 0 8px;
	color: var(--pf-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.enqpf-outline__done {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--pf-blue-deep);
}

/* --------------------------------------------------------------------------
   Booking the call

   The end of the whole thing, so it is given its own ground rather than being
   one more paragraph at the bottom of the outline. Everything above is the
   machine's work; this is the offer of a person.
   -------------------------------------------------------------------------- */

.enqpf__book {
	padding: 20px 22px 22px;
	border-top: 1px solid var(--pf-line);
	background: var(--pf-soft);
	text-align: center;
}

.enqpf__book-title {
	margin: 0 0 6px;
	font-size: 15.5px;
	font-weight: 650;
	letter-spacing: -0.005em;
	color: var(--pf-blue-deep);
}

.enqpf__book-text {
	max-width: 46ch;
	margin: 0 auto 16px;
	color: var(--pf-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.enqpf__book-go {
	width: auto;
	margin: 0;
}

.enqpf__book-note {
	margin: 11px 0 0;
	color: var(--pf-ink-3);
	font-size: 11.5px;
	letter-spacing: 0.01em;
}


/* --------------------------------------------------------------------------
   When something refuses
   -------------------------------------------------------------------------- */

.enqpf__error {
	margin: 0;
	padding: 16px 22px 20px;
	border-top: 1px solid var(--pf-line);
	background: #fdf6f5;
}

.enqpf__error-text {
	margin: 0 0 11px;
	color: var(--pf-danger);
	font-size: 13.5px;
	line-height: 1.6;
}

.enqpf__fallback {
	border-color: var(--pf-blue-deep);
	background: var(--pf-blue-deep);
}

/* --------------------------------------------------------------------------
   Narrow screens, and stillness
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
	.enqpf-fact {
		flex-basis: 100%;
		border-left: 0;
		border-top: 1px solid var(--pf-line);
	}

	.enqpf-fact:first-child {
		border-top: 0;
	}

	.enqpf {
		width: 100vw;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	.enqpf__log {
		max-height: none;
	}

	.enqpf__inner {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.enqpf[open],
	.enqpf-msg,
	.enqpf-chip {
		animation: none;
	}

	.enqpf-dots i {
		animation: none;
		opacity: 0.55;
	}
}