/* AECA Contact page
----------------------------------------------------------------------------------------------------

Everything is namespaced under `.aeca-page--contact` (and the `.aeca-page` foundation it sits on), so
nothing here can reach the home page, About, Quote, Insights, Case Studies, the three hub pages or
any of the 22 detail pages.

WHY THIS FILE EXISTS
Requested 2026-08-10. Contact was one 4,000-character Blocs `div`: the Google map, the enquiry form
and the contact details were tangled into a single `#bloc-170` row, so the map sat directly above the
form in the same column and the details rail was a stack of `const-contact-info` grids that only held
together because of hardcoded `col-9` widths. There was no hero, and the page opened on an embedded
map with no heading above it.

EXTENDS THE SUB-PAGE SYSTEM
The instruction was to extend the existing system rather than invent a new look, so this file takes
from css/aeca-subpages.css: the tokens, the two typefaces, the 1180px container, the section rhythm,
the white / tint grounds and the figure frame. The `.aeca-page` block below is that shared foundation,
kept separate from the `--contact` modifier so Home, About or Quote can be brought onto it later
without unpicking anything.

Quote is the first page to take it up (2026-08-18, css/aeca-quote.css). It reads the foundation, and
also `.aeca-page-form` and `.aeca-page-details` below, which are deliberately left unscoped for that
reason: everything a second page could reuse is written without the `--contact` modifier, and
everything that is genuinely Contact's own carries it. Keep that split when editing this file, and
note that css/aeca-quote.css is enqueued with this file as its dependency.

WHAT CONTACT DOES DIFFERENTLY
It is the one page a visitor arrives at ready to act, so it opens dark and leads with the three
fastest routes (phone, email, WhatsApp) rather than with a form. The form then gets a panel of its
own with the details rail beside it, and the map runs at the foot where "where are you" belongs
instead of competing with the form for the same column.

NOTHING WAS DROPPED IN THE MOVE
Address, office line, email, WhatsApp, LinkedIn, the team photograph, the Google embed and every form
control are the ones that were in the Blocs markup, with the same field names, ids and validation
attributes, so includes/form-handler.php keeps working untouched.

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

/* ====================================================================================================
   SHARED FOUNDATION
   The same tokens css/aeca-subpages.css declares, aliased again under this namespace so a brand
   change still flows from aeca-custom.css but neither file has to load the other to be read.
   ==================================================================================================== */

.aeca-page {
	--page-blue: var(--aeca-blue, #024da1);
	--page-blue-light: var(--aeca-blue-light, #16adee);
	--page-red: var(--aeca-red, #ec1c24);
	--page-navy: #012340;
	--page-navy-2: #01315a;
	--page-ink: #14212e;
	--page-muted: #4a5b6b;
	--page-line: #d7e3ee;
	--page-tint: #f2f7fb;
	--page-white: #fff;

	--page-accent: var(--page-blue);
	--page-gap: clamp(56px, 7.5vw, 108px);

	color: var(--page-ink);
	font-family: var(--aeca-font-body, "Inter", system-ui, sans-serif);
}

.aeca-page :is(h1, h2, h3, h4) {
	font-family: var(--aeca-font-head, "Outfit", system-ui, sans-serif);
	letter-spacing: -0.015em;
}

.aeca-page .container {
	max-width: 1180px;
}

.aeca-page__eyebrow {
	margin: 0 0 0.6rem;
	color: var(--page-accent);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---- Section shell ----------------------------------------------------------------------------- */

.aeca-page-section {
	padding: var(--page-gap) 0;
	background: var(--page-white);
}

.aeca-page-section--tint {
	background: var(--page-tint);
}

.aeca-page-section__head {
	margin-bottom: clamp(28px, 3.6vw, 46px);
}

.aeca-page-section__head h2 {
	margin: 0 0 0.6rem;
	color: var(--page-blue);
	font-size: clamp(1.9rem, 3.6vw, 2.7rem);
	font-weight: 600;
	line-height: 1.08;
}

.aeca-page-section__lead {
	max-width: 66ch;
	margin: 0;
	color: var(--page-muted);
	font-size: 1.04rem;
	line-height: 1.68;
}

/* ---- Figure ------------------------------------------------------------------------------------ */

.aeca-page-figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #dce6ef;
}

.aeca-page-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: var(--page-figure-ratio, 4 / 3);
}

/* ---- Text link --------------------------------------------------------------------------------- */

.aeca-page-link {
	display: inline-flex;
	gap: 0.55rem;
	align-items: center;
	color: var(--page-blue);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.aeca-page-link::after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.aeca-page-link:hover,
.aeca-page-link:focus-visible {
	color: var(--page-navy);
	text-decoration: underline;
}

.aeca-page-link:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}


/* ====================================================================================================
   CONTACT
   ==================================================================================================== */

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

/* ---- Hero -------------------------------------------------------------------------------------- */

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

/* The same faint graticule the 404 hero uses. It is the site's dark-ground texture now, and drawing
   it in CSS means the page's first paint does not wait on an image. */
.aeca-page--contact .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(115% 95% at 88% 0%, rgba(22, 173, 238, 0.24), rgba(22, 173, 238, 0) 72%);
	background-size: 56px 56px, 56px 56px, 100% 100%;
	pointer-events: none;
}

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

.aeca-page--contact .aeca-page-hero__grid {
	display: grid;
	gap: clamp(30px, 5vw, 64px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	align-items: center;
}

.aeca-page--contact .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--contact .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 four ticks under the H1. They complete the heading's sentence, so they sit tight to it and
   read at heading weight rather than as body copy. The tick is a CSS glyph in the light brand blue:
   an emoji tick would be rendered by whatever emoji font the machine has and lands green. */
.aeca-page--contact .aeca-page-hero__checks {
	margin: 0 0 1.35rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.aeca-page--contact .aeca-page-hero__checks li {
	position: relative;
	padding-left: 2rem;
	color: var(--page-white);
	font-size: clamp(1.05rem, 1.5vw, 1.24rem);
	font-weight: 500;
	line-height: 1.4;
}

.aeca-page--contact .aeca-page-hero__checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: -0.06em;
	width: 1.35em;
	height: 1.35em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(22, 173, 238, 0.16);
	border: 1px solid rgba(22, 173, 238, 0.55);
	color: var(--page-blue-light);
	font-size: 0.82em;
	line-height: 1;
}

/* ---- The three fast routes --------------------------------------------------------------------- */

/* Real links, not decoration: on a phone the first one dials and the third opens WhatsApp. They are
   above the form on purpose, because most people who open this page want to talk to somebody rather
   than fill in eight fields. */

.aeca-page-quick {
	display: grid;
	gap: 2px;
}

.aeca-page-quick a {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1.05rem 1.25rem;
	background: rgba(255, 255, 255, 0.07);
	color: var(--page-white);
	text-decoration: none;
	transition: background-color 0.18s ease;
}

.aeca-page-quick a:hover,
.aeca-page-quick a:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	color: var(--page-white);
}

.aeca-page-quick__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: rgba(22, 173, 238, 0.18);
	color: var(--page-blue-light);
	font-size: 0.95rem;
}

.aeca-page-quick__label {
	display: block;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.aeca-page-quick__value {
	display: block;
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 1.02rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* ---- Form beside the details rail -------------------------------------------------------------- */

/* ONE COLUMN SINCE 2026-08-28, when AECA removed the contact-details aside that used to sit in the
   second track. What is left in the grid is the form alone, so a two-track rule would leave an empty
   43% of the row beside it.

   The track is capped and centred rather than left at full container width. Uncapped, the Project
   Description textarea runs to 1180px, which is roughly twice a comfortable line length for free
   text; left-aligned at 760px, the removed column's 415px reads as a panel that failed to load. The
   address, phone, email and WhatsApp all survive on this page in the hero quick-links above, and in
   the footer. */
.aeca-page-contact-grid {
	display: grid;
	gap: clamp(28px, 4vw, 52px);
	grid-template-columns: minmax(0, min(760px, 100%));
	justify-content: center;
	align-items: start;
}

.aeca-page-form {
	padding: clamp(26px, 3.4vw, 44px);
	border: 1px solid var(--page-line);
	background: var(--page-white);
}

.aeca-page-form h2 {
	margin: 0 0 0.5rem;
	color: var(--page-blue);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
}

.aeca-page-form__lead {
	margin: 0 0 1.8rem;
	color: var(--page-muted);
	line-height: 1.65;
}

/* `background-color`, never the `background` shorthand. Bootstrap draws the select's chevron as a
   `background-image`, so a shorthand here wipes it and every select on the page loses the one mark
   that says it opens. */

.aeca-page-form .form-control,
.aeca-page-form .form-select {
	min-height: 50px;
	border: 1px solid var(--page-line);
	border-radius: 0;
	background-color: var(--page-tint);
}

.aeca-page-form textarea.form-control {
	min-height: 132px;
}

.aeca-page-form .form-control:focus,
.aeca-page-form .form-select:focus {
	border-color: var(--page-blue-light);
	background-color: var(--page-white);
	box-shadow: 0 0 0 3px rgba(22, 173, 238, 0.18);
}

.aeca-page-form .form-check-label {
	color: var(--page-muted);
	font-size: 0.93rem;
}

/* The submit button has to be repainted here. The brand paint in aeca-custom.css is scoped to
   `.bloc:not(.d-bloc) .const-button`, and this page has no `.bloc` ancestor by design, so the button
   fell through to style.css's own `.const-form-button`: a 28% grey fill with near-black ink, which is
   the same washed-out Construction-template leftover that section already documents. Matching the
   light-ground primary treatment rather than inventing a fourth button. `!important` because
   style.css sets `color` with it. */

.aeca-page-form .const-form-button {
	margin-top: 0.6rem;
	padding: 0.75rem 1.7rem !important;
	border: 2px solid var(--page-blue) !important;
	border-radius: 2px;
	background-color: var(--page-blue) !important;
	background-image: none !important;
	box-shadow: none;
	color: var(--page-white) !important;
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-shadow: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.aeca-page-form .const-form-button:hover,
.aeca-page-form .const-form-button:focus-visible {
	border-color: var(--page-blue-light) !important;
	background-color: var(--page-blue-light) !important;
	color: var(--page-white) !important;
}

/* ---- Form notifications ------------------------------------------------------------------------ */

/* Same leftover as the button above. style.css carries a Construction-template `.alert` rule:

       .alert{text-align:center;background-color:#000000;color:#FFD60A!important;
              border-radius:0;border-width:0;font-family:"Teko-Light";}

   a black panel with amber Teko text, which is nothing like this palette. It caught every notice the
   form can raise, because all three are `.alert` elements:

     .alert-warning  per-field validation, injected by js/all.js into `.help-block` as a <ul>
     .alert-danger   the submit failure banner (`#form-alert`)
     .alert-success  the confirmation (`#form-feedback-alert`)

   They are repainted here as one family rather than three: square, a 3px accent edge, tinted ground,
   body typeface, left aligned so the text reads as a message and not as a label. Colour is the only
   thing that separates them. `color` needs `!important` purely to beat the amber above.

   Scoped to `.aeca-page-form`, so an `.alert` anywhere else in the theme is left exactly as it was. */

.aeca-page-form .alert {
	padding: 0.85rem 1rem;
	border: 1px solid var(--page-line);
	border-left: 3px solid var(--page-accent);
	border-radius: 0;
	background-color: var(--page-tint);
	color: var(--page-ink) !important;
	font-family: var(--aeca-font-body, "Inter", sans-serif);
	font-size: 0.92rem;
	line-height: 1.55;
	text-align: left;
}

/* Failure, and the per-field warnings, both read as "something needs your attention", so both take
   the brand red edge. The ink stays near-black rather than going red as well: red text on a tinted
   ground is the part that fails contrast, and the edge already carries the signal. */

.aeca-page-form .alert-danger,
.aeca-page-form .alert-warning {
	border-left-color: var(--page-red);
	background-color: #fdf2f3;
}

.aeca-page-form .alert-success {
	border-left-color: var(--page-blue-light);
	background-color: var(--page-tint);
}

/* The per-field list sits inside `.help-block`, directly under the control it belongs to, so it runs
   tighter than the form-level banners and loses the list indent js/all.js does not strip. */

.aeca-page-form .help-block .alert {
	margin-bottom: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
}

.aeca-page-form .help-block ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

/* jqBootstrapValidation marks the field's `.form-group` / `.form-check` with `warning` while it is
   invalid and `error` after a blocked submit. Bootstrap 5 defines neither, so until now a bad field
   looked identical to a good one. The control itself picks up the red edge so the eye lands on the
   field, not only on the message under it. */

.aeca-page-form .form-group.warning .form-control,
.aeca-page-form .form-group.error .form-control,
.aeca-page-form .form-group.warning .form-select,
.aeca-page-form .form-group.error .form-select {
	border-color: var(--page-red);
	background-color: var(--page-white);
}

.aeca-page-form .form-group.warning .form-control:focus,
.aeca-page-form .form-group.error .form-control:focus,
.aeca-page-form .form-group.warning .form-select:focus,
.aeca-page-form .form-group.error .form-select:focus {
	border-color: var(--page-red);
	box-shadow: 0 0 0 3px rgba(236, 28, 36, 0.16);
}

/* The dismiss button is Bootstrap's `.btn-close`, a dark SVG on transparent. It was invisible against
   the black panel and needs no help against the tint, but it does need pulling off the text. */

.aeca-page-form .alert .btn-close {
	margin-left: 0.75rem;
	padding: 0.4rem;
	font-size: 0.7rem;
}

/* ---- Details rail ------------------------------------------------------------------------------ */

/* A description list rather than five `row`/`col-9` grids. Each detail is genuinely a term and its
   value, and a <dl> gets that relationship across to a screen reader without the icon having to
   carry the meaning. The Font Awesome marks stay, but as decoration beside a real label. */

.aeca-page-details {
	padding: clamp(26px, 3.4vw, 40px);
	background: var(--page-navy);
	color: var(--page-white);
}

.aeca-page-details__photo {
	margin: 0 0 1.7rem;
	--page-figure-ratio: 3 / 2;
}

.aeca-page-details h2 {
	margin: 0 0 0.5rem;
	color: var(--page-white);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 600;
}

.aeca-page-details__lead {
	margin: 0 0 1.7rem;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.98rem;
	line-height: 1.65;
}

.aeca-page-details dl {
	margin: 0;
}

.aeca-page-details dt {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	color: var(--page-blue-light);
	font-family: var(--aeca-font-head, "Outfit", sans-serif);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.aeca-page-details dt .fa,
.aeca-page-details dt .fab {
	font-size: 0.95rem;
}

.aeca-page-details dd {
	margin: 0.4rem 0 0;
	padding-left: 1.55rem;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.aeca-page-details dd + dt {
	margin-top: 1.3rem;
	padding-top: 1.3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

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

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

/* ---- Map band ---------------------------------------------------------------------------------- */

.aeca-page-map__frame {
	position: relative;
	border: 1px solid var(--page-line);
	background: var(--page-tint);
}

/* The embed arrives with width="600" height="450" hardcoded on it. Overriding both here, rather than
   editing the attributes away, keeps the intrinsic ratio as the fallback if this file ever fails to
   load: a 600x450 map is still a usable map, where width:100% with no height is a zero-height box. */
.aeca-page-map__frame iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 46vh, 460px);
	border: 0;
}

.aeca-page-map__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 1.4rem;
}

.aeca-page-map__meta p {
	max-width: 54ch;
	margin: 0;
	color: var(--page-muted);
	line-height: 1.65;
}


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

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

@media (max-width: 575.98px) {
	.aeca-page-form .const-form-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aeca-page-link::after,
	.aeca-page-quick a {
		transition: none;
	}
}