/* hero carries the form, so it aligns to the top, not center */
	.page-hero .ph-grid { align-items: start; }
	.page-hero .check-intro { font-weight: 600; color: var(--ink); margin-bottom: 1rem; }

	/* benefit rows: icon tile + benefit headline + quiet support line.
	   White tiles with a soft shadow so the icons read as small images
	   against the hero background. */
	.why-rows { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
	.why-rows li { display: flex; gap: 1rem; align-items: flex-start; }
	.why-rows .wr-ico {
		flex: none; width: 46px; height: 46px; border-radius: 13px;
		background: #fff; border: 1px solid rgba(29,53,87,.10);
		box-shadow: 0 8px 18px rgba(20,45,80,.08);
		display: flex; align-items: center; justify-content: center; color: var(--accent);
	}
	.why-rows .wr-ico svg { width: 27px; height: 27px; }
	.why-rows li > div { font-size: .93rem; font-weight: 400; color: var(--body); line-height: 1.55; }
	.why-rows li > div strong { display: block; font-size: 1.08rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: .2rem; }

	/* the form card */
	.demo-card {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: 0 24px 60px rgba(20,45,80,.10);
		padding: clamp(1.6rem, 3vw, 2.4rem);
	}
	.demo-card h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: .4rem; }
	.demo-card .dc-sub { font-size: .95rem; color: var(--body); margin-bottom: 1.4rem; }

	/* Mautic form skin, scoped to the project-consulting form wrapper */
	#mauticform_wrapper_2025projectconsultingform .mauticform-row { margin-bottom: 1.05rem; }
	#mauticform_wrapper_2025projectconsultingform label {
		display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem;
	}
	/* Float labels: the form keeps its placeholder-only look when empty; once a field
	   is focused or filled, its label fades in as a small chip on the field's top edge,
	   so captions persist after typing/autofill (the accessible version of placeholders).
	   NOTE: unlike the demo form (id 44), form 48 ships NO labels at all, so the JS
	   below CREATES one per field from its placeholder, then toggles .has-value per row. */
	#mauticform_wrapper_2025projectconsultingform .mauticform-row:not(.mauticform-checkboxgrp) { position: relative; }
	#mauticform_wrapper_2025projectconsultingform .mauticform-row:not(.mauticform-checkboxgrp) .mauticform-label {
		position: absolute; top: -.55rem; left: 14px; z-index: 1;
		margin: 0; padding: 0 .4rem; background: #fff; border-radius: 4px;
		font-size: .72rem; font-weight: 600; line-height: 1.2; color: var(--accent-dk);
		opacity: 0; transform: translateY(4px); pointer-events: none;
		transition: opacity .15s ease, transform .15s ease;
	}
	#mauticform_wrapper_2025projectconsultingform .mauticform-row:not(.mauticform-checkboxgrp):has(:focus) .mauticform-label,
	#mauticform_wrapper_2025projectconsultingform .mauticform-row:not(.mauticform-checkboxgrp):has(.mauticform-input:not(:placeholder-shown)) .mauticform-label,
	#mauticform_wrapper_2025projectconsultingform .mauticform-row:not(.mauticform-checkboxgrp):has(.mauticform-textarea:not(:placeholder-shown)) .mauticform-label,
	#mauticform_wrapper_2025projectconsultingform .mauticform-row.has-value:not(.mauticform-checkboxgrp) .mauticform-label {
		opacity: 1; transform: none;
	}
	@media (prefers-reduced-motion: reduce) {
		#mauticform_wrapper_2025projectconsultingform .mauticform-label { transition: none; }
	}
	#mauticform_wrapper_2025projectconsultingform .mauticform-input,
	#mauticform_wrapper_2025projectconsultingform .mauticform-selectbox,
	#mauticform_wrapper_2025projectconsultingform .mauticform-textarea {
		width: 100%; box-sizing: border-box;
		font-family: inherit; font-size: .95rem; color: var(--ink);
		background: #fbfcfd; border: 1px solid #d6dbe3; border-radius: 10px;
		padding: .68rem .9rem;
		transition: border-color .15s ease, box-shadow .15s ease;
	}
	#mauticform_wrapper_2025projectconsultingform .mauticform-input:focus,
	#mauticform_wrapper_2025projectconsultingform .mauticform-selectbox:focus,
	#mauticform_wrapper_2025projectconsultingform .mauticform-textarea:focus {
		outline: none; border-color: var(--accent);
		box-shadow: 0 0 0 3px rgba(0,100,120,.14);
	}
	/* project overview is the field that matters on this form; give it room */
	#mauticform_wrapper_2025projectconsultingform .mauticform-textarea { min-height: 7.5rem; resize: vertical; }
	#mauticform_wrapper_2025projectconsultingform .mauticform-helpmessage {
		font-size: .82rem; color: var(--muted); margin-bottom: .3rem;
	}
	#mauticform_wrapper_2025projectconsultingform .mauticform-errormsg {
		display: block; color: #c2333f; font-size: .82rem; margin-top: .3rem;
	}
	/* checkbox groups: form 48 has none today, but keep the skin so consent
	   checkboxes added in Mautic later (to match the demo form) style correctly */
	#mauticform_wrapper_2025projectconsultingform .mauticform-checkboxgrp-row { display: flex; align-items: flex-start; gap: .55rem; }
	#mauticform_wrapper_2025projectconsultingform .mauticform-checkboxgrp-checkbox { flex: none; width: 16px; height: 16px; margin-top: .2rem; accent-color: var(--accent); }
	#mauticform_wrapper_2025projectconsultingform .mauticform-checkboxgrp-label { font-weight: 400; font-size: .85rem; color: var(--body); line-height: 1.5; margin: 0; }
	#mauticform_wrapper_2025projectconsultingform .mauticform-checkboxgrp a { color: var(--accent) !important; }
	#mauticform_wrapper_2025projectconsultingform .mauticform-button-wrapper { margin-top: .4rem; }
	#mauticform_wrapper_2025projectconsultingform .mauticform-button {
		display: block; width: 100%;
		font-family: inherit; font-size: 1rem; font-weight: 600; color: #fff;
		background: var(--btn-ink); border: 0; border-radius: 999px;
		padding: .85rem 1.5rem; cursor: pointer;
		transition: background-color .18s ease, transform .18s ease;
	}
	#mauticform_wrapper_2025projectconsultingform .mauticform-button:hover { background: #183a94; transform: translateY(-1px); }
	#mauticform_wrapper_2025projectconsultingform .mauticform-button:disabled,
	#mauticform_wrapper_2025projectconsultingform .mauticform-button.submitting { opacity: .65; cursor: default; transform: none; }
	#mauticform_wrapper_2025projectconsultingform .mauticform-post-success { color: var(--accent-dk); font-weight: 600; }

	/* hero grid: copy left, form right, quote rotator under the copy.
	   Grid areas keep the form right after the copy on mobile, quotes last. */
	.ph-grid.demo { grid-template-areas: "copy form" "quotes form"; align-items: start; }
	.ph-grid.demo > * { min-width: 0; } /* let items shrink; without this the quote rotator blows out the column on mobile */
	.ph-grid.demo > .ph-copy { grid-area: copy; }
	.ph-grid.demo > .ph-form { grid-area: form; }
	.ph-grid.demo > .hero-quotes { grid-area: quotes; }
	@media (max-width: 991px) { .ph-grid.demo { grid-template-areas: "copy" "form" "quotes"; } }

	/* stat strip: the shared .cred grid is 4 columns; with 3 stats the empty
	   fourth column shoves the group left, so use 3 equal columns on desktop
	   (scoped to min-width so the shared 2-column mobile rule still wins) */
	@media (min-width: 768px) { .cred { grid-template-columns: repeat(3, 1fr); } }

	/* quote rotator (same treatment as /aw/trial-2026.html): each quote on a
	   translucent card that slides in from the right, pauses centered, then
	   slides out left. Driven by the small script at the end of the page. */
	/* clip-path instead of overflow:hidden: cards still clip at the left/right
	   edges (the slide-behind effect) but the drop shadow can fall freely
	   above/below instead of being sliced off at the container's bottom edge */
	.hp-quotes { position: relative; margin-top: .4rem; max-width: min(58ch, 100%); clip-path: inset(-40px 0); min-height: 7rem; }
	.hpq {
		position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box;
		padding: 1.05rem 1.25rem;
		background: rgba(255,255,255,.55);
		border: 1px solid rgba(29,53,87,.09); border-radius: 14px;
		backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
		box-shadow: 0 10px 26px rgba(20,45,80,.06);
		transform: translateX(112%); opacity: 0;
		transition: transform .7s cubic-bezier(.3,.7,.3,1), opacity .5s ease .1s;
	}
	.hpq.in { transform: translateX(0); opacity: 1; }
	.hpq.out { transform: translateX(-112%); opacity: 0; }
	.hpq.no-t { transition: none; }
	.hpq p { font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.55; margin: 0 0 .5rem; }
	.hpq > span { display: block; font-size: .82rem; color: var(--body); }
	.hpq > span::before {
		content: ""; display: inline-block; width: 18px; height: 2px; border-radius: 2px;
		background: var(--accent); margin-right: .55rem; vertical-align: .22em;
	}