/* AECA Demo & Quote page
----------------------------------------------------------------------------------------------------

Everything is namespaced under `.aeca-page--quote`, plus the `.aeca-quote-*` blocks that only ever
appear inside it, so nothing here can reach Home, About, Contact, the three hub pages or any of the
22 detail pages.

WHY THIS FILE EXISTS
Requested 2026-08-18. Quote was still the raw Blocs export: one `#quote` bloc holding a heading, an
eight-field form, and a brochure card wedged into a `col-lg-3` beside it. No hero, no ground, no
grouping, and the page simply stopped at the submit button. It is the page every "Request a Demo"
and "Get a Quote" button in the theme points at, and it was the plainest page on the site.

SITS ON THE SHARED FOUNDATION
The `.aeca-page` block in css/aeca-contact.css is the shared foundation its own header says Home,
About or Quote could be brought onto later. This is that. The tokens, the 1180px container, the
section rhythm, the white / tint grounds, `.aeca-page-form` (including its button, its `.alert`
family and its invalid-field states), `.aeca-page-details` and `.aeca-page-link` all come from
there, which is why this file is enqueued with aeca-contact as its dependency. Only the parts Quote
does differently are written below.

WHAT QUOTE DOES DIFFERENTLY
Contact opens with three ways to reach us, because most people who open it want to talk to somebody.
Quote opens with the two things the brief asks the page to offer, a free demo and a costed proposal,
as the two entry cards, because the visitor has usually already pressed one of them somewhere else.
The cards are ordinary links carrying `?intent=`, the parameter page-quote.php already read to
preselect the request type, so the choice survives with no JavaScript and the card it came from
comes back marked. The form is then split into three named steps rather than presented as eight
fields in a stack, and the page closes on what happens after you send it.

NOTHING WAS DROPPED
Every form control keeps its `name`, `id`, `required` and `data-*` validation attributes, so
includes/form_2.php and the Blocs form JS both keep working untouched. The brochure card that
survived the rebuild was removed on 2026-08-28 with the rest of the brochure, and its rules with it
keeps its card, its icon and its read-from-disk file size.

---------------------------------------------------------------------------------------------------- */

.aeca-page--quote {
	--page-accent: var(--page-blue-light);
	--page-gap: clamp(52px, 6.5vw, 94px);
}


/* ====================================================================================================
   HERO
   ==================================================================================================== */

.aeca-page--quote .aeca-page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(52px, 6.5vw, 96px) 0;
	background: var(--page-navy);
	color: var(--page-white);
}

/* The site's dark-ground texture, as used by the 404 and Contact heroes. The radial is thrown from
   the left here rather than the right, so the two pages do not read as the same photograph. */
.aeca-page--quote .aeca-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		radial-gradient(120% 100% at 6% 8%, rgba(22, 173, 238, 0.26), rgba(22, 173, 238, 0) 68%);
	background-size: 56px 56px, 56px 56px, 100% 100%;
	pointer-events: none;
}

.aeca-page--quote .aeca-page-hero > .container {
	position: relative;
	z-index: 1;
}

.aeca-page--quote .aeca-page-hero__grid {
	display: grid;
	gap: clamp(32px, 5vw, 66px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	align-items: center;
}

.aeca-page--quote .aeca-page-hero h1 {
	margin: 0 0 1rem;
	font-size: clamp(2.3rem, 4.8vw, 3.5rem);
	font-weight: 600;
	line-height: 1.04;
}

.aeca-page--quote .aeca-page-hero__lead {
	max-width: 52ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(1.02rem, 1.4vw, 1.16rem);
	line-height: 1.68;
}

/* ---- The three reassurances -------------------------------------------------------------------- */

/* Everything a visitor wants to know before filling in eight fields: that the demo costs nothing,
   that the price is against their own scope, and roughly when somebody will reply. */

.aeca-quote-assure {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.6rem;
	margin: 1.9rem 0 0;
	padding: 0;
	list-style: none;
}

.aeca-quote-assure li {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.93rem;
	line-height: 1.4;
}

.aeca-quote-assure .fa {
	color: var(--page-blue-light);
	font-size: 0.85rem;
}

/* ---- The two entry cards ----------------------------------------------------------------------- */

.aeca-quote-intent {
	display: grid;
	gap: 10px;
}

.aeca-quote-intent__card {
	position: relative;
	display: grid;
	gap: 0.9rem;
	grid-template-columns: 40px minmax(0, 1fr);
	padding: 1.3rem 1.45rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.07);
	color: var(--page-white);
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* The accent edge is the hover and the selected state both. It is drawn at zero width so the card
   does not resize when it lights up. */
.aeca-quote-intent__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--page-blue-light);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.24s ease;
}

.aeca-quote-intent__card:hover,
.aeca-quote-intent__card:focus-visible {
	border-color: rgba(22, 173, 238, 0.5);
	background: rgba(255, 255, 255, 0.13);
	color: var(--page-white);
}

.aeca-quote-intent__card:hover::before,
.aeca-quote-intent__card:focus-visible::before,
.aeca-quote-intent__card.is-active::before {
	transform: scaleX(1);
}

/* Set when the page was opened with `?intent=` matching this card, so the visitor can see which
   button brought them here and that the form below already knows. */
.aeca-quote-intent__card.is-active {
	border-color: rgba(22, 173, 238, 0.55);
	background: rgba(22, 173, 238, 0.16);
}

.aeca-quote-intent__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: rgba(22, 173, 238, 0.18);
	color: var(--page-blue-light);
	font-size: 1.05rem;
}

.aeca-quote-intent__title {
	display: block;
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.25;
}

.aeca-quote-intent__note {
	display: block;
	margin-top: 0.3rem;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.92rem;
	line-height: 1.55;
}

.aeca-quote-intent__mark {
	display: block;
	margin-top: 0.5rem;
	color: var(--page-blue-light);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Hidden until the card is the one that was chosen, so the two cards stay the same height whichever
   state they are in. */
.aeca-quote-intent__card:not(.is-active) .aeca-quote-intent__mark {
	visibility: hidden;
}

.aeca-quote-intent__both {
	margin: 0.2rem 0 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.9rem;
	line-height: 1.5;
}

.aeca-quote-intent__both a {
	color: var(--page-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aeca-quote-intent__both a:hover,
.aeca-quote-intent__both a:focus-visible {
	color: var(--page-blue-light);
}


/* ====================================================================================================
   FORM BAND
   ==================================================================================================== */

.aeca-quote-grid {
	display: grid;
	gap: clamp(28px, 4vw, 52px);
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: start;
}

/* ---- Steps ------------------------------------------------------------------------------------- */

/* A fieldset per question the form is really asking -- what you want, who you are, what the job is
   -- rather than eight controls in one run. The legend is `display: block` on purpose: legends
   still render inconsistently under flex across browsers, so the row is built from a span inside. */

.aeca-quote-step {
	margin: 0 0 clamp(1.6rem, 2.4vw, 2.3rem);
	padding: 0;
	border: 0;
}

.aeca-quote-step:last-of-type {
	margin-bottom: 0;
}

.aeca-quote-step > legend {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 1.05rem;
	padding: 0 0 0.7rem;
	border-bottom: 1px solid var(--page-line);
	color: var(--page-ink);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.3;
}

.aeca-quote-step__num {
	display: inline-grid;
	place-items: center;
	width: 25px;
	height: 25px;
	margin-right: 0.65rem;
	background: var(--page-blue);
	color: var(--page-white);
	font-size: 0.76rem;
	font-weight: 600;
	vertical-align: 2px;
}

/* ---- Labels ------------------------------------------------------------------------------------ */

/* The Blocs export labelled every control with a `visually-hidden` label and leaned on the
   placeholder, which disappears the moment somebody starts typing -- on a nine-control form that is
   how people end up putting their phone number in the country field. Real labels now, with the
   placeholder kept only where it adds a hint the label does not carry. */

.aeca-quote-label {
	display: block;
	margin: 0 0 0.4rem;
	color: var(--page-ink);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Eight of the nine controls are required, so marking the exception is quieter than marking the
   rule, and it tells the visitor something they can act on. */
.aeca-quote-label__opt {
	color: var(--page-muted);
	font-weight: 400;
}

.aeca-quote-consent {
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--page-line);
}

.aeca-quote-consent .form-check {
	margin-bottom: 0.9rem;
}

.aeca-quote-privacy {
	margin: 0;
	color: var(--page-muted);
	font-size: 0.88rem;
	line-height: 1.6;
}

.aeca-quote-privacy a {
	color: var(--page-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ====================================================================================================
   ASIDE RAIL
   ==================================================================================================== */

.aeca-quote-aside {
	display: grid;
	gap: clamp(16px, 2vw, 22px);
}

/* ====================================================================================================
   WHAT HAPPENS NEXT
   ==================================================================================================== */

/* The old page ended at the submit button, which is the moment a visitor most wants to know what
   they have just started. */

.aeca-quote-next {
	display: grid;
	gap: clamp(22px, 3vw, 34px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	counter-reset: aeca-quote-next;
}

.aeca-quote-next__step {
	position: relative;
	padding-top: 1.5rem;
	border-top: 3px solid var(--page-line);
	counter-increment: aeca-quote-next;
}

.aeca-quote-next__step:first-child {
	border-top-color: var(--page-blue);
}

.aeca-quote-next__step::before {
	content: counter(aeca-quote-next, decimal-leading-zero);
	display: block;
	margin-bottom: 0.55rem;
	color: var(--page-blue-light);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.aeca-quote-next__step h3 {
	margin: 0 0 0.5rem;
	color: var(--page-blue);
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.3;
}

.aeca-quote-next__step p {
	margin: 0;
	color: var(--page-muted);
	font-size: 0.98rem;
	line-height: 1.65;
}


/* ====================================================================================================
   NARROW
   ==================================================================================================== */

@media (max-width: 991.98px) {
	.aeca-page--quote .aeca-page-hero__grid,
	.aeca-quote-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aeca-quote-next {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.aeca-quote-intent__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.aeca-quote-assure {
		gap: 0.55rem 1.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aeca-quote-intent__card,
	.aeca-quote-intent__card::before {
		transition: none;
	}
}