/* --------------------------------------------------------------------------
 * Elementor reset
 *
 * Each top-level <section> of the design is wrapped in an Elementor container so
 * it stays editable. Elementor's container brings its own width, padding and
 * flex box model, all of which would break a full-bleed band. This strips the
 * wrapper back to a transparent pass-through so the design's own sections keep
 * doing the layout.
 * ----------------------------------------------------------------------- */

.mpm-band {
	--container-max-width: 100%;
	--content-width: 100%;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--margin-top: 0;
	--margin-right: 0;
	--margin-bottom: 0;
	--margin-left: 0;
	--gap: 0px;
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.mpm-band > .e-con-inner {
	display: block;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.mpm-band > .e-con-inner > .elementor-element,
.mpm-band > .elementor-element {
	width: 100%;
	max-width: none;
}

.mpm-band .elementor-widget-html > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* Elementor sets overflow-x on the page wrapper; the sticky rails need it clear. */
.elementor,
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {
	overflow: visible;
}

/* --------------------------------------------------------------------------
 * Contact page: native Elementor Pro form wearing the design's .formcard skin
 *
 * The design's enquiry card is rebuilt as an Elementor form so submissions are
 * stored and emailed. Elementor's own container and form stylesheets load after
 * the theme's, and .e-con / .elementor-col-50 collide with the design's classes
 * at equal specificity - hence the doubled class names below.
 * ----------------------------------------------------------------------- */

.mpm-contact.mpm-contact {
	/* This container carries the design's .wrap classes, but Elementor's .e-con
	   sets width:100% at equal specificity and loads later, so the grid went
	   full-bleed on wide screens. Restate .wrap's own width formula here. */
	width: min(100% - var(--gutter) * 2, var(--container));
	margin-inline: auto;
	/* Elementor's default container padding was eating 20px of the row, so both
	   columns came out narrower than the design's. .wrap has no padding. */
	padding: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--s-9);
	align-items: start;
	padding-block: var(--s-8) var(--s-10);
}

.mpm-contact.mpm-contact > * {
	min-width: 0;
}

/* The card itself - .e-con would otherwise flatten the design's chrome. */
.mpm-formcard.mpm-formcard {
	display: block;
	width: 100%;
	max-width: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-l);
	box-shadow: var(--sh-3);
	padding: var(--s-8);
	margin: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

.mpm-formcard.mpm-formcard > .elementor-element {
	width: 100%;
	max-width: none;
}

.mpm-formcard.mpm-formcard h2 {
	font-size: 1.5rem;
	margin: 0;
}

.mpm-formcard.mpm-formcard > .elementor-widget-html p {
	color: var(--muted);
	font-size: .95rem;
	margin: var(--s-2) 0 0;
}

.mpm-formcard.mpm-formcard .formnote {
	font-size: .84rem;
	color: var(--muted);
	margin: var(--s-4) 0 0;
}

/* Field grid: two columns, matching .field--2 in the design. */
.formcard-el.formcard-el .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-5) var(--s-4);
	margin: var(--s-6) 0 0;
}

.formcard-el.formcard-el .elementor-field-group {
	display: grid;
	gap: var(--s-2);
	align-content: start;
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
	margin: 0;
}

.formcard-el.formcard-el .elementor-field-group.elementor-col-100,
.formcard-el.formcard-el .elementor-field-type-submit {
	grid-column: 1 / -1;
}

.formcard-el.formcard-el .elementor-field-label {
	font-weight: 700;
	font-size: .9rem;
	color: var(--ink);
	padding: 0;
	line-height: 1.35;
}

.formcard-el.formcard-el .elementor-field-textual,
.formcard-el.formcard-el select.elementor-field,
.formcard-el.formcard-el textarea.elementor-field {
	font: inherit;
	font-size: .98rem;
	line-height: 1.4;
	padding: var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	background: var(--cream);
	color: var(--ink);
	width: 100%;
	height: auto;
	min-height: 0;
	box-shadow: none;
}

.formcard-el.formcard-el .elementor-field-textual:focus,
.formcard-el.formcard-el select.elementor-field:focus,
.formcard-el.formcard-el textarea.elementor-field:focus {
	border-color: var(--brand);
	background: #fff;
}

.formcard-el.formcard-el textarea.elementor-field {
	min-height: 118px;
	resize: vertical;
}

.formcard-el.formcard-el .elementor-field-type-submit .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	width: 100%;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	padding: var(--s-4) var(--s-6);
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	background: var(--brand-strong);
	color: #fff;
	box-shadow: var(--sh-2);
	cursor: pointer;
	transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.formcard-el.formcard-el .elementor-field-type-submit .elementor-button:hover {
	background: var(--brand-hover);
	box-shadow: var(--sh-3);
	transform: translateY(-2px);
}

.formcard-el.formcard-el .elementor-message {
	font-size: .95rem;
	margin-top: var(--s-4);
	flex-basis: 100%;
}

@media (max-width: 860px) {
	.mpm-contact.mpm-contact { grid-template-columns: 1fr; gap: var(--s-8); }
	.formcard-el.formcard-el .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
 * Design rules Elementor's reset outranks
 *
 * Elementor ships resets that tie with, or beat, the design's own rules and
 * load afterwards. Each block below restores the design pack's intent. The
 * doubled class names are deliberate - they buy the specificity back.
 * ----------------------------------------------------------------------- */

/* `.elementor img { height: auto }` ties with `.featured img { height: 100% }`,
   so the blog index's featured photo collapsed to its intrinsic 16:9 height and
   filled only the top half of its column. */
.elementor .featured img {
	height: 100%;
}

/* `.elementor .elementor-widget:not(...):not(...) figure { margin: 0 }` beats
   `.tablefig`/`.videoblock`, flattening every data table and video against the
   copy around it on all 19 pages. */
.elementor .elementor-widget figure.tablefig.tablefig {
	margin: var(--s-7) 0;
}

.elementor .elementor-widget figure.videoblock.videoblock {
	margin: var(--s-8) 0;
}

/* Restoring those margins must not trample `.prose > *:last-child`, which the
   design uses to stop a trailing figure pushing the section open. */
.elementor .elementor-widget .prose > figure.tablefig.tablefig:last-child,
.elementor .elementor-widget .prose > figure.videoblock.videoblock:last-child {
	margin-bottom: 0;
}

/* Featured card: at the design's 1.15fr/.85fr the headline broke to three lines
   and the standfirst to five in a 489px column. Even columns give the copy room
   without shrinking the photo below its 340px minimum. */
@media (min-width: 1024px) {
	.featured.featured {
		grid-template-columns: 1fr 1fr;
	}
}

/* The contact hero card's heading was promoted from h3 to h2 so the page has no
   h1 -> h3 gap; keep the card's original type scale. */
.hero-contact .card h2.card__h,
.card h2.card__h {
	font-size: 1.18rem;
	line-height: 1.25;
	margin: 0;
}