/*
 * Design system layer for the Mechatronics homepage.
 *
 * Loads last, so it sets the typeface, the type scale, the spacing rhythm and
 * the shared card and button treatment over the top of the original section
 * styles. Everything here is presentation only: the page is still built from
 * blocks, so the client keeps editing it the same way.
 *
 * The two typefaces are bundled with the theme rather than fetched from a font
 * service, so the site has no third party request and no layout shift.
 */

/* ---------------------------------------------------------------------------
 * 1. Typefaces. Archivo carries the headings, Inter the reading text.
 * ------------------------------------------------------------------------ */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
 * 2. Tokens. One scale for type, one for spacing, one for elevation.
 * ------------------------------------------------------------------------ */

.mc-home {
	--mc-display: "Archivo", "Segoe UI", Arial, sans-serif;
	--mc-body: "Inter", "Segoe UI", Arial, sans-serif;

	--mc-text-xs: 12px;
	--mc-text-sm: 14px;
	--mc-text-base: 16px;
	--mc-text-lg: 18px;

	--mc-space-section: 112px;
	--mc-space-heading: 52px;

	--mc-shadow-card: 0 1px 2px rgb(13 37 55 / 4%), 0 12px 28px rgb(13 37 55 / 6%);
	--mc-shadow-lift: 0 2px 4px rgb(13 37 55 / 6%), 0 22px 44px rgb(13 37 55 / 12%);

	/* The original grey was set for 11px text. Larger text wants more weight. */
	--mc-muted: #55626b;

	font-family: var(--mc-body);
	font-size: var(--mc-text-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
 * 3. Headings. Archivo, tightened, with a consistent optical rhythm.
 * ------------------------------------------------------------------------ */

.mc-home h1,
.mc-home h2,
.mc-home h3,
.mc-home h4,
.mc-home .mc-stat-value,
.mc-home .mc-carousel-count {
	font-family: var(--mc-display);
	font-feature-settings: "ss01";
}

.mc-home h1 {
	font-size: clamp(44px, 4.9vw, 72px);
	font-weight: 700;
	letter-spacing: -0.032em;
	line-height: 1.04;
}

.mc-home h2 {
	font-size: clamp(32px, 3.4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.1;
}

.mc-home h3 {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * 4. Reading text. The original ran 11 to 13 pixels, which is too small for a
 * technical audience reading specifications. Everything steps up.
 * ------------------------------------------------------------------------ */

.mc-home .mc-slide-description,
.mc-home .mc-welcome-copy > p:not(.mc-eyebrow),
.mc-home .mc-about-copy > p:not(.mc-eyebrow),
.mc-home .mc-section-heading > p,
.mc-home .mc-contact-main > p:not(.mc-eyebrow),
.mc-home .mc-testimonial-intro > p:not(.mc-eyebrow) {
	font-size: var(--mc-text-base);
	line-height: 1.75;
	color: var(--mc-muted);
}

.mc-home .mc-slide-description {
	color: #ccd8e0;
	max-width: 46ch;
}

.mc-home .mc-division-body > p,
.mc-home .mc-project > p:not(.mc-eyebrow),
.mc-home .mc-benefit-copy,
.mc-home .mc-stat-label {
	font-size: var(--mc-text-sm);
	line-height: 1.65;
	color: var(--mc-muted);
}

/* Fixed text heights were tuned for the old size and now cause ragged gaps. */
.mc-home .mc-division-body > p {
	min-height: 0;
}

.mc-home .mc-division-grid {
	align-items: stretch;
}

.mc-home .mc-division {
	display: flex;
	flex-direction: column;
}

.mc-home .mc-division-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px 24px 22px;
}

.mc-home .mc-division-actions {
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
 * 5. Eyebrows. One treatment everywhere, wider tracking, readable size.
 * ------------------------------------------------------------------------ */

.mc-home .mc-eyebrow {
	font-family: var(--mc-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.6;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.mc-home .mc-brandband-head .mc-eyebrow,
.mc-home .mc-about-copy > .mc-eyebrow,
.mc-home .mc-project .mc-eyebrow,
.mc-home .mc-media-tag,
.mc-home .mc-exhibition-year,
.mc-home .mc-brochure-kicker,
.mc-home .mc-about-tag-kicker,
.mc-home .mc-photo-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * 6. Section rhythm. Equal breathing room above and below every band.
 * ------------------------------------------------------------------------ */

.mc-home .wp-block-group.mc-section,
.mc-home .mc-media,
.mc-home .mc-testimonials {
	padding-block: var(--mc-space-section);
}

.mc-home .mc-section-heading {
	margin-bottom: var(--mc-space-heading);
	align-items: flex-end;
	gap: 64px;
}

.mc-home .mc-section-heading > p {
	max-width: 42ch;
}

.mc-home .mc-statband {
	padding-block: 64px;
}

/* ---------------------------------------------------------------------------
 * 7. One card treatment, used by every card on the page.
 * ------------------------------------------------------------------------ */

.mc-home .mc-division,
.mc-home .mc-brochure-card,
.mc-home .mc-brand-tile {
	border: 1px solid #e4e8e9;
	box-shadow: var(--mc-shadow-card);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.mc-home .mc-division:hover,
.mc-home .mc-brochure-card:hover,
.mc-home .mc-brand-tile:hover {
	transform: translateY(-6px);
	box-shadow: var(--mc-shadow-lift);
	border-color: #f0bda4;
}

.mc-home .mc-project,
.mc-home .mc-exhibition,
.mc-home .mc-media-card {
	transition: transform 0.35s ease;
}

.mc-home .mc-project:hover,
.mc-home .mc-exhibition:hover,
.mc-home .mc-media-card:hover {
	transform: translateY(-5px);
}

.mc-home .mc-card-link > .wp-block-button__link {
	font-size: var(--mc-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-top: 18px;
	margin-top: 18px;
	border-top: 1px solid #e7e9e7;
	width: 100%;
	justify-content: space-between;
}

.mc-home .mc-project-actions .wp-block-button__link,
.mc-home .mc-media-actions .wp-block-button__link {
	border-top: 0;
	padding-top: 6px;
	margin-top: 6px;
	justify-content: flex-start;
	gap: 12px;
}

/* ---------------------------------------------------------------------------
 * 8. Buttons. One height, one weight, one rhythm.
 * ------------------------------------------------------------------------ */

.mc-home .wp-block-button.mc-button > .wp-block-button__link,
.mc-home .wp-block-button.mc-button-dark > .wp-block-button__link {
	font-family: var(--mc-body);
	font-size: var(--mc-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 19px 30px;
	gap: 16px;
}

.mc-home .wp-block-button.mc-text-link > .wp-block-button__link {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
 * 9. Small print that was set too small to read comfortably.
 * ------------------------------------------------------------------------ */

.mc-home .mc-topbar {
	font-size: 12px;
}

.mc-home .mc-footer p,
.mc-home .mc-footer .mc-footer-link > .wp-block-button__link {
	font-size: 13px;
	line-height: 1.8;
}

.mc-home .mc-footer h3 {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}

.mc-home .mc-footer-bottom p {
	font-size: 12px;
}

.mc-home .mc-industry {
	font-size: 13px;
	padding: 10px 17px;
}

.mc-home .mc-benefit-title {
	font-size: 15px;
	font-family: var(--mc-display);
	letter-spacing: -0.01em;
}

.mc-home .mc-slide-assurance,
.mc-home .mc-product-features span,
.mc-home .mc-product-caption {
	font-size: 12px;
}

.mc-home .mc-product-label strong {
	font-family: var(--mc-display);
	font-size: 20px;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
 * 10. The reworked bands, tuned to the new scale.
 * ------------------------------------------------------------------------ */

.mc-home .mc-stat-value {
	font-size: clamp(38px, 3.2vw, 50px);
	font-weight: 700;
	letter-spacing: -0.035em;
}

.mc-home .mc-brandband-title {
	font-size: clamp(24px, 2.1vw, 30px);
	font-weight: 700;
	letter-spacing: -0.025em;
}

.mc-home .mc-brand-tile {
	height: 118px;
}

.mc-home .mc-quote > p {
	font-family: var(--mc-display);
	letter-spacing: -0.02em;
	line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * 11. Responsive steps for the rhythm.
 * ------------------------------------------------------------------------ */

@media (max-width: 1150px) {
	.mc-home {
		--mc-space-section: 88px;
		--mc-space-heading: 44px;
	}
}

@media (max-width: 900px) {
	.mc-home {
		--mc-space-section: 72px;
		--mc-space-heading: 36px;
	}

	.mc-home .mc-section-heading {
		gap: 40px;
	}
}

@media (max-width: 700px) {
	.mc-home {
		--mc-space-section: 60px;
		--mc-space-heading: 30px;
		--mc-text-base: 15px;
	}

	.mc-home .mc-statband {
		padding-block: 44px;
	}

	.mc-home .mc-brand-tile {
		height: 92px;
	}

	.mc-home .mc-section-heading {
		gap: 20px;
	}
}

/* ---------------------------------------------------------------------------
 * 12. Hero headline.
 * carousel.css names Arial explicitly on the slide heading, so it needs an
 * equally specific rule to pick up the display face.
 * ------------------------------------------------------------------------ */

.mc-home .mc-slide h2 {
	font-family: var(--mc-display);
	font-weight: 700;
	letter-spacing: -0.034em;
	line-height: 1.05;
	max-width: 14ch;
}

.mc-home .mc-slide h2 em {
	letter-spacing: -0.034em;
}

/* ---------------------------------------------------------------------------
 * 13. Video cards.
 * sections.css styles any direct div child of a video card as the image frame.
 * Block markup adds a second div for the link, so it inherited the frame's
 * height and background. This puts it back to a plain row.
 * ------------------------------------------------------------------------ */

.mc-home .mc-media-card > .mc-media-actions {
	height: auto;
	min-height: 0;
	background: transparent;
	border: 0;
	overflow: visible;
	position: static;
}

.mc-home .mc-media-card > .mc-media-actions::after {
	content: none;
}

/* Supporting copy stays light where a section sits on a dark ground. */
.mc-home .mc-media .mc-section-heading > p {
	color: #adbec8;
}

/* ===========================================================================
 * 14. Brand colour system.
 * Two colours only. The blue is taken from the logo artwork itself, sampled at
 * #0078A8, and extended into a gradient by moving along the same hue. The rust
 * is the accent the site already used. Everything else is neutral: ink, paper
 * and white.
 * ======================================================================== */

.mc-home {
	--mc-brand: #0078a8;
	--mc-brand-deep: #005a7e;
	--mc-brand-bright: #00a2d8;
	--mc-gradient: linear-gradient(135deg, #0078a8 0%, #00a2d8 100%);
	--mc-gradient-deep: linear-gradient(135deg, #005a7e 0%, #0086ba 100%);

	--mc-rust: #c65324;
	--mc-rust-bright: #ed6b32;

	/* Neutrals pulled toward the brand hue so the greys sit with the blue. */
	--mc-ink: #0b2430;
	--mc-navy: #0b2430;
	--mc-paper: #f2f6f8;
	--mc-line: #dde5ea;
	--mc-muted: #4f6069;
	--mc-orange: var(--mc-rust);

	color: #24363f;
}

/* --- Rust: eyebrows, small marks, card icons ---------------------------- */

.mc-home .mc-eyebrow,
.mc-home .mc-brochure-kicker,
.mc-home .mc-exhibition-year,
.mc-home .mc-about-tag-kicker {
	color: var(--mc-rust);
}

.mc-home .mc-eyebrow.mc-light,
.mc-home .mc-media .mc-eyebrow,
.mc-home .mc-slide-eyebrow,
.mc-home .mc-contact .mc-eyebrow {
	color: var(--mc-rust-bright);
}

.mc-home .mc-eyebrow > span,
.mc-home .mc-section-heading .mc-eyebrow::before,
.mc-home .mc-section-heading .mc-eyebrow::after {
	background: var(--mc-rust);
}

.mc-home .mc-stat-value em,
.mc-home h1 em,
.mc-home .mc-slide h2 em {
	color: var(--mc-rust-bright);
}

.mc-home .mc-card-link .mc-icon,
.mc-home .mc-division-icon,
.mc-home .mc-benefit > .mc-icon {
	color: var(--mc-rust);
	stroke: var(--mc-rust);
}

.mc-home .mc-text-link > .wp-block-button__link:hover,
.mc-home .mc-card-link > .wp-block-button__link:hover {
	color: var(--mc-rust);
}

/* --- Gradient: primary actions and brand surfaces ----------------------- */

.mc-home .wp-block-button.mc-button > .wp-block-button__link,
.mc-home .wp-block-button.mc-button:not(.mc-button-dark) > .wp-block-button__link {
	background: var(--mc-gradient);
	color: #fff;
	border: 0;
}

.mc-home .wp-block-button.mc-button > .wp-block-button__link:hover,
.mc-home .wp-block-button.mc-button:not(.mc-button-dark) > .wp-block-button__link:hover {
	background: var(--mc-gradient-deep);
}

.mc-home .wp-block-button.mc-button-dark > .wp-block-button__link {
	background: var(--mc-ink);
}

.mc-home .wp-block-button.mc-button-dark > .wp-block-button__link:hover {
	background: var(--mc-gradient);
}

.mc-home .mc-division-number,
.mc-home .mc-project:hover .mc-project-mark {
	background: var(--mc-brand);
}

.mc-home .mc-division:hover,
.mc-home .mc-brochure-card:hover,
.mc-home .mc-brand-tile:hover {
	border-color: #9fd0e4;
}

.mc-home .mc-stat-value {
	background: var(--mc-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Bands -------------------------------------------------------------- */

.mc-home .mc-statband {
	background: #fff;
	border-block: 1px solid var(--mc-line);
}

.mc-home .mc-stat {
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 26px 14px;
	background: var(--mc-paper);
	border: 1px solid var(--mc-line);
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.mc-home .mc-stat:hover {
	background: #fff;
	border-color: #9fd0e4;
	transform: translateY(-5px);
}

.mc-home .mc-stat + .mc-stat::before {
	display: none;
}

.mc-home .mc-stat-label {
	max-width: 18ch;
}

.mc-home .mc-media,
.mc-home .mc-industries {
	background: var(--mc-ink);
}

.mc-home .mc-footer {
	background: #08202b;
}

.mc-home .mc-industry-actions .wp-block-button__link {
	color: var(--mc-rust-bright);
}

/* --- Contact band, the page's closing surface --------------------------- */

.mc-home .mc-contact {
	background: var(--mc-gradient);
	color: #fff;
}

.mc-home .mc-contact h2,
.mc-home .mc-contact .mc-contact-main > p:not(.mc-eyebrow) {
	color: #fff;
}

.mc-home .mc-contact .mc-eyebrow {
	color: #ffd9c6;
}

.mc-home .mc-contact .wp-block-button.mc-button-dark > .wp-block-button__link {
	background: #fff;
	color: var(--mc-ink);
}

.mc-home .mc-contact .wp-block-button.mc-button-dark > .wp-block-button__link:hover {
	background: var(--mc-ink);
	color: #fff;
}

.mc-home .mc-contact .mc-text-link > .wp-block-button__link {
	color: #fff;
}

.mc-home .mc-contact-mark svg {
	stroke: #ffffff5c;
}

/* --- Centred section headings, carried over ----------------------------- */

.mc-home .mc-section-heading {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

.mc-home .mc-section-heading > .mc-section-heading-main {
	max-width: 44ch;
}

.mc-home .mc-section-heading .mc-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 14px;
}

.mc-home .mc-section-heading .mc-eyebrow::before,
.mc-home .mc-section-heading .mc-eyebrow::after {
	content: "";
	width: 26px;
	height: 2px;
}

.mc-home .mc-section-heading > p {
	max-width: 60ch;
	margin-inline: auto;
}

.mc-home .mc-section-actions,
.mc-home .mc-brandband-actions {
	justify-content: center;
}

@media (max-width: 700px) {
	.mc-home .mc-stat {
		padding: 20px 10px;
	}
}

/* The carousel renders plain anchors, so they need the gradient too. */
.mc-home a.mc-button,
.mc-home a.mc-button:not(.mc-button-dark) {
	background: var(--mc-gradient);
	border: 0;
	color: #fff;
}

.mc-home a.mc-button:hover,
.mc-home a.mc-button:not(.mc-button-dark):hover {
	background: var(--mc-gradient-deep);
}

.mc-home .mc-carousel .mc-carousel-controls .wp-block-button__link:hover,
.mc-home .mc-carousel-selector .mc-selected {
	background: var(--mc-brand);
	border-color: var(--mc-brand-bright);
}

.mc-home .mc-brand-progress {
	background: var(--mc-rust-bright);
}

.mc-home .mc-product-dot,
.mc-home .mc-pulse {
	background: var(--mc-rust-bright);
}

/* ===========================================================================
 * 15. Type scale matched to the supplied reference.
 * The reference runs noticeably larger reading text and a much larger eyebrow
 * than this site did, and its headings are set at close to normal tracking
 * rather than tightly compressed. All three are corrected here.
 * ======================================================================== */

.mc-home {
	--mc-text-xs: 13px;
	--mc-text-sm: 16px;
	--mc-text-base: 18px;
	--mc-text-lg: 20px;
}

/* Headings: large, but open rather than tightly tracked. */
.mc-home h1,
.mc-home .mc-slide h2 {
	font-size: clamp(46px, 5vw, 74px);
	letter-spacing: -0.018em;
	line-height: 1.08;
}

.mc-home h2 {
	font-size: clamp(34px, 3.5vw, 50px);
	letter-spacing: -0.012em;
	line-height: 1.18;
}

.mc-home h3 {
	font-size: 22px;
	letter-spacing: -0.005em;
	line-height: 1.35;
}

/* Reading text steps up from 16 to 18, card text from 14 to 16. */
.mc-home .mc-slide-description,
.mc-home .mc-welcome-copy > p:not(.mc-eyebrow),
.mc-home .mc-about-copy > p:not(.mc-eyebrow),
.mc-home .mc-section-heading > p,
.mc-home .mc-contact-main > p:not(.mc-eyebrow),
.mc-home .mc-testimonial-intro > p:not(.mc-eyebrow) {
	font-size: var(--mc-text-base);
	line-height: 1.78;
}

.mc-home .mc-division-body > p,
.mc-home .mc-project > p:not(.mc-eyebrow),
.mc-home .mc-benefit-copy,
.mc-home .mc-stat-label {
	font-size: var(--mc-text-sm);
	line-height: 1.7;
}

/* The eyebrow was 11px. The reference sets it near body size, in bold. */
.mc-home .mc-eyebrow {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin-bottom: 18px;
}

.mc-home .mc-brandband-head .mc-eyebrow,
.mc-home .mc-about-copy > .mc-eyebrow,
.mc-home .mc-project .mc-eyebrow,
.mc-home .mc-brochure-kicker,
.mc-home .mc-about-tag-kicker {
	font-size: 14px;
	letter-spacing: 0.02em;
}

.mc-home .mc-media-tag,
.mc-home .mc-exhibition-year,
.mc-home .mc-photo-label {
	font-size: 12px;
	letter-spacing: 0.1em;
}

/* The reference brackets its eyebrow with slashes rather than rules. */
.mc-home .mc-section-heading .mc-eyebrow::before,
.mc-home .mc-section-heading .mc-eyebrow::after {
	content: "//";
	width: auto;
	height: auto;
	background: none;
	font-weight: 700;
	letter-spacing: -0.04em;
}

/* Supporting copy elsewhere, brought onto the same scale. */
.mc-home .mc-footer p,
.mc-home .mc-footer .mc-footer-link > .wp-block-button__link,
.mc-home .mc-industry {
	font-size: 15px;
}

.mc-home .mc-benefit-title {
	font-size: 17px;
}

.mc-home .mc-slide-assurance,
.mc-home .mc-product-features span,
.mc-home .mc-product-caption,
.mc-home .mc-topbar {
	font-size: 13px;
}

.mc-home .wp-block-button.mc-button > .wp-block-button__link,
.mc-home .wp-block-button.mc-button-dark > .wp-block-button__link,
.mc-home a.mc-button {
	font-size: 15px;
}

.mc-home .mc-text-link > .wp-block-button__link,
.mc-home .mc-card-link > .wp-block-button__link {
	font-size: 14px;
}

@media (max-width: 900px) {
	.mc-home {
		--mc-text-base: 17px;
		--mc-text-sm: 15px;
	}

	.mc-home .mc-eyebrow {
		font-size: 14px;
	}
}

@media (max-width: 700px) {
	.mc-home {
		--mc-text-base: 16px;
		--mc-text-sm: 15px;
	}

	.mc-home .mc-eyebrow {
		font-size: 13px;
	}

	.mc-home h3 {
		font-size: 20px;
	}
}

/* ===========================================================================
 * 16. Images filling their containers.
 * Brand tiles held a fixed height with a small capped logo, so the box gaped
 * as the columns widened. The tile now scales with its column and each logo
 * fills the available box, which also evens out logos of different shapes.
 * ======================================================================== */

.mc-home .mc-brand-tile {
	height: auto;
	aspect-ratio: 5 / 2;
	padding: 20px 24px;
}

.mc-home .mc-brand-tile .wp-block-image {
	width: 100%;
	height: 100%;
	display: block;
}

.mc-home .mc-brand-tile img,
.mc-home .mc-brand-tile .wp-block-image img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 700px) {
	.mc-home .mc-brand-tile {
		aspect-ratio: 2 / 1;
		padding: 14px 16px;
	}
}

/* The manufacturing caption overhung the photo once the type grew. */
@media (max-width: 900px) {
	.mc-home .mc-about-tag {
		left: 24px;
		right: 24px;
		bottom: 24px;
		max-width: none;
		padding: 22px 24px;
	}
}

@media (max-width: 700px) {
	.mc-home .mc-about-visual {
		padding: 0 0 34px;
	}

	.mc-home .mc-about-tag {
		left: 16px;
		right: 16px;
		bottom: 50px;
		padding: 18px 20px;
	}

	.mc-home .mc-about-tag-title {
		font-size: 20px;
	}
}

/* ===========================================================================
 * 17. Defect fixes found in review.
 * ======================================================================== */

/* The play badge was drawing two triangles: a CSS border triangle from the
 * original stylesheet plus the inline icon. Keep one, solid. */
.mc-home .mc-play::before {
	content: none;
}

.mc-home .mc-play svg {
	fill: currentColor;
	stroke: none;
}

/* Action rows lost their spacing when the buttons became block markup, so the
 * buttons sat directly against the paragraph above them. */
.mc-home .mc-actions,
.mc-home .wp-block-buttons.mc-actions {
	margin-top: 34px;
}

.mc-home .mc-brandband-actions,
.mc-home .mc-section-actions {
	margin-top: 8px;
}

/* Headings inherit a dark colour from the theme, which hid them where they sit
 * on a photograph or a dark panel. */
.mc-home .mc-exhibition-name,
.mc-home .mc-about-tag-title,
.mc-home .mc-media-card h3,
.mc-home .mc-slide h2,
.mc-home .mc-industries h2,
.mc-home .mc-contact h2,
.mc-home .mc-footer h3 {
	color: #fff;
}

/* Slider arrows sat off centre inside their boxes. */
.mc-home .mc-quote-controls button,
.mc-home .mc-carousel-controls .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 0;
}

.mc-home .mc-quote-controls button .mc-icon {
	margin: 0;
}

/* The footer logo plate sat directly on the paragraph beneath it. */
.mc-home .mc-footer-logo {
	display: inline-block;
	margin-bottom: 22px;
}

.mc-home .mc-footer-intro > p {
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
 * The manufacturing caption overlapped the photo and its label on phones.
 * Below the tablet breakpoint it leaves the photo and sits underneath it.
 * ------------------------------------------------------------------------ */

@media (max-width: 700px) {
	.mc-home .mc-about-visual {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.mc-home .mc-about-tag {
		position: static;
		left: auto;
		right: auto;
		bottom: auto;
		max-width: none;
		margin-top: -1px;
		padding: 22px 24px;
	}

	.mc-home .mc-photo-label {
		position: static;
		margin-top: 14px;
	}

	.mc-home .mc-about-visual::before {
		display: none;
	}
}

/* ===========================================================================
 * 18. Second review pass.
 * The original stylesheet draws several icons with CSS pseudo elements. The
 * block markup also carries an icon in the same places, so both appeared. The
 * pseudo element is the better looking one in each case, so the markup icon is
 * hidden rather than the other way round.
 * ======================================================================== */

/* Video badge: keep the solid CSS triangle, drop the duplicate outline. */
.mc-home .mc-media-card .mc-play svg {
	display: none;
}

/* Benefit rows: keep the coloured circular badges, drop the pale check box. */
.mc-home .mc-benefit > .mc-icon {
	display: none;
}

.mc-home .mc-benefits {
	display: grid;
	gap: 6px;
	margin: 30px 0 0;
}

.mc-home .mc-benefit {
	display: block;
	padding-left: 54px;
	margin-top: 24px;
}

.mc-home .mc-benefit-body {
	display: block;
}

.mc-home .mc-benefit-title {
	margin: 0 0 4px;
	font-size: 17px;
	line-height: 1.35;
}

.mc-home .mc-benefit-copy {
	margin: 0;
}

.mc-home .mc-about-actions {
	margin-top: 34px;
}

/* Remaining tight gaps between a text block and the control beneath it. */
.mc-home .mc-division-actions {
	margin-top: 22px;
}

.mc-home .mc-media-actions {
	margin-top: 14px;
}

.mc-home .mc-industry-actions {
	margin-top: 4px;
}

.mc-home .mc-footer-brochure-actions {
	margin-top: 18px;
}

.mc-home .mc-footer-column .mc-footer-links {
	margin-top: 4px;
}

/* Brand tiles held different heights because the logo, not the tile, set the
 * height. The figure is now taken out of flow so the tile's proportion rules. */
.mc-home .mc-brand-tile {
	position: relative;
}

.mc-home .mc-brand-tile .wp-block-image {
	position: absolute;
	inset: 20px 24px;
	width: auto;
	height: auto;
}

@media (max-width: 700px) {
	.mc-home .mc-brand-tile .wp-block-image {
		inset: 14px 16px;
	}
}

/* The hero product frame was taller than the artwork at some widths, which
 * letterboxed the image. The frame now matches the asset proportion. */
.mc-home .mc-product-image {
	aspect-ratio: 2.133;
	background: #fff;
}

/* The number on the selected brand tab was too dim against the fill. */
.mc-home .mc-brand-selector.mc-selected small {
	color: #cfeaf6;
}

/* ---------------------------------------------------------------------------
 * Facts band: the tiles were mostly empty. Tighter boxes, a larger figure and
 * a label that sits directly under it.
 * ------------------------------------------------------------------------ */

.mc-home .mc-statband {
	padding-block: 52px;
}

.mc-home .mc-statband-grid {
	gap: 18px;
}

.mc-home .mc-stat {
	padding: 22px 14px 20px;
	gap: 2px;
	justify-content: center;
}

.mc-home .mc-stat-value {
	font-size: clamp(36px, 2.9vw, 46px);
	line-height: 1.1;
}

.mc-home .mc-stat-label {
	font-size: 15px;
	line-height: 1.45;
	max-width: 15ch;
}

@media (max-width: 700px) {
	.mc-home .mc-stat {
		padding: 18px 10px 16px;
	}

	.mc-home .mc-stat-label {
		font-size: 14px;
	}
}