/*
Theme Name: MintMech
Template: generatepress
Description: MintMech Ltd child theme — design system on top of GeneratePress.
Author: MintMech
Version: 1.2.8
Text Domain: mintmech
*/

/* Design tokens (mirrored in theme.json for the block editor) */
:root {
	--mm-color-ink: #0e0f12;
	--mm-color-paper: #ffffff;
	--mm-color-accent: #f46120;
	--mm-color-accent-hover: #d8521a;

	/* Status-tag palette (products & projects) — meaning-coded. Each base hue
	   drives a pill's border + low-opacity tint; the "-ink" shades are the
	   AA-dark text colours used on those light tints (the bright accent is
	   only ~3:1 on white, so tag text uses the darker shade — see CLAUDE.md).
	   go = available now (green), hire = rental (blue, distinct from accent),
	   ink-muted = neutral category outline for the PRODUCT/PROJECT type tag. */
	--mm-color-ink-muted: #5f5e5a;
	--mm-color-accent-ink: #8f3c10;
	--mm-color-go: #1f9d57;
	--mm-color-go-ink: #0f6e3c;
	--mm-color-hire: #2f6fb0;
	--mm-color-hire-ink: #1c4f86;

	--mm-font-display: "Source Serif 4", serif;
	--mm-font-body: "Inter", sans-serif;
}

body {
	font-family: var(--mm-font-body);
	color: var(--mm-color-ink);
	background-color: var(--mm-color-paper);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--mm-font-display);
	color: var(--mm-color-ink);
}

a {
	color: var(--mm-color-accent);
}

a:hover,
a:focus {
	color: var(--mm-color-accent-hover);
}

/* Section background variants — alternating dark/paper sections */
.mm-section--dark {
	background-color: var(--mm-color-ink);
	color: var(--mm-color-paper);
}

.mm-section--dark h1,
.mm-section--dark h2,
.mm-section--dark h3,
.mm-section--dark h4,
.mm-section--dark h5,
.mm-section--dark h6 {
	color: var(--mm-color-paper);
}

/* Kicker — uppercase letter-spaced label above headings, with a short ~6px accent rule */
.mm-kicker {
	margin-bottom: 0.5em;
	font-family: var(--mm-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-color-accent);
}

.mm-kicker-rule {
	display: block;
	width: 48px;
	height: 6px;
	/* Override the constrained-layout auto margins so the rule sits left,
	   directly under the kicker, rather than centring on the column. */
	margin: 0.5em auto 0.75em 0 !important;
	background-color: var(--mm-color-accent);
}

.mm-section--dark .mm-kicker {
	color: var(--mm-color-accent);
}

/* ==========================================================================
   Buttons — MintMech's signature CTA: rectangular with one corner clipped.
   Accent fill, sharp otherwise. Overrides GeneratePress's default grey
   block-button styling (which is more specific than theme.json).
   ========================================================================= */

/* Prefixed with `body` to outweigh GeneratePress's inline
   `.wp-block-button__link:not(.has-background)` grey default. */
/* Text on the accent is INK, not paper. Measured: white on #f46120 is 3.19:1,
   below the WCAG AA minimum of 4.5:1 for text at this size; ink on the same
   orange is 6.00:1, and 4.69:1 on the hover orange. The orange itself is
   unchanged — only the lettering. (Jack, 2026-08-11.) */
body .wp-block-button__link,
body .wp-block-button__link.wp-element-button {
	--mm-chamfer: 14px;
	background-color: var(--mm-color-accent);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-body);
	font-weight: 600;
	border: 0;
	border-radius: 0;
	padding: 0.75em 1.6em;
	/* Cut the bottom-left corner — the long-standing MintMech button shape. */
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mm-chamfer) 100%, 0 calc(100% - var(--mm-chamfer)));
	transition: background-color 120ms linear;
}

body .wp-block-button__link:hover,
body .wp-block-button__link:focus,
body .wp-block-button__link.wp-element-button:hover,
body .wp-block-button__link.wp-element-button:focus {
	background-color: var(--mm-color-accent-hover);
	color: var(--mm-color-ink);
}

/* ==========================================================================
   Header — GeneratePress "navigation float right": the horizontal logo sits
   left in the header, the mega-menu floats right in the same bar, and the whole
   header is sticky so it stays in view on scroll. The lockup is landscape, so
   cap it by height to keep the header compact (the SVG's intrinsic size is in
   mm, i.e. huge, hence the explicit height).
   ========================================================================= */

/* Sticky header: pinned to the top, opaque paper so content scrolls beneath. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--mm-color-paper);
	box-shadow: 0 1px 0 rgba(14, 15, 18, 0.08);
}

/* Compact, constrained logo — left in the header bar. */
.site-header .site-logo img,
.site-header .site-logo .header-image {
	height: 46px;
	width: auto;
}

/* ==========================================================================
   Mega menu — wide multi-column panels for Capabilities / Industries /
   Projects & Products. Built on GeneratePress's native nav menu + JS
   (hover-dropdown, mobile accordion, keyboard/aria handling) — only the
   panel layout is overridden here, no custom JS or walker required.
   ========================================================================= */

/* The mega panel is anchored to the header's content container (.inside-header)
   so every panel spans the same content-width box and is centred on the page —
   NOT centred on its own (narrow, off-centre) menu item, which made left-hand
   menus (Industries/Capabilities) spill off the left edge. This needs:
     - .inside-header as the positioning context (position: relative)
     - .inside-navigation and li.mm-mega NOT positioned, so the panel's
       absolute positioning resolves against .inside-header. */
.inside-header.grid-container {
	position: relative;
}
.main-navigation .inside-navigation {
	position: static;
}
.main-navigation .main-nav > ul > li.mm-mega {
	position: static;
}

/* The top-level mega panel itself (depth 1 <ul class="sub-menu">) */
.main-navigation .main-nav > ul > li.mm-mega > .sub-menu {
	left: 0;
	right: 0;
	width: auto;
	max-width: none;
	transform: none;
	padding: 40px 48px;
	background-color: var(--mm-color-paper);
	border-top: 3px solid var(--mm-color-accent);
	box-shadow: 0 16px 40px rgba(14, 15, 18, 0.14);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px 32px;
	/* Tall panels (Products) must not run off the bottom of short viewports;
	   the panel lives in the sticky header, so scroll it internally instead. */
	max-height: calc(100vh - 80px);
	overflow: hidden auto;
}

.main-navigation .main-nav > ul > li.mm-mega-industries > .sub-menu {
	grid-template-columns: repeat(3, 1fr);
}

/* Products panel: pack the groups with CSS multi-column flow instead of a rigid
   grid. A grid aligned every group to the tallest row, leaving big gaps under
   the short groups (Heave & Tension, Power, Geotech). Columns let each group
   stack tightly and a column take more or fewer groups as needed — no fixed
   rows, no dead whitespace. Each group stays whole (break-inside: avoid) and
   "View all products" spans the full width as a footer. (Products only — the
   other mega panels keep the grid.) */
/* Desktop only (:not(.toggled)) — the mobile accordion keeps its single-column
   stack. */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-products > .sub-menu {
	display: block;
	grid-template-columns: none;
	columns: 4;
	column-gap: 40px;
}
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-group-header {
	/* flow-root so the group contains its (GP-floated) item list and takes its
	   full height — otherwise the column packing sees only the 28px header. */
	display: flow-root;
	width: 100%;
	margin: 0 0 24px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}
/* Clear GP's left-float on the products group item lists so they stack in flow. */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-group-header > .sub-menu {
	float: none;
}
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-viewall {
	column-span: all;
	grid-column: auto;
	margin-top: 8px;
}

.main-navigation .main-nav > ul > li.mm-mega-about > .sub-menu,
.main-navigation .main-nav > ul > li.mm-mega-insights > .sub-menu {
	width: 260px;
	grid-template-columns: 1fr;
}

/* About / Insights are NARROW dropdowns, not full-width mega panels. They must
   drop directly beneath their own menu item, so they anchor to their (relative)
   <li> and centre on it, instead of spanning the header container like the wide
   panels above. Without this they inherit the wide-panel left:0/right:0 and jump
   to the far left of the page. (!important because the theme stylesheet is
   enqueued more than once, making same-specificity overrides unreliable.) */
.main-navigation .main-nav > ul > li.mm-mega-about,
.main-navigation .main-nav > ul > li.mm-mega-insights {
	position: relative !important;
}
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-about > .sub-menu,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-insights > .sub-menu,
.main-navigation:not(.toggled) ul li.mm-mega-about:hover > ul,
.main-navigation:not(.toggled) ul li.mm-mega-about.sfHover > ul,
.main-navigation:not(.toggled) ul li.mm-mega-insights:hover > ul,
.main-navigation:not(.toggled) ul li.mm-mega-insights.sfHover > ul {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Open state — keep GP's hover/sfHover trigger; span the content container. */
.main-navigation:not(.toggled) ul li.mm-mega:hover > ul,
.main-navigation:not(.toggled) ul li.mm-mega.sfHover > ul {
	left: 0;
	right: 0;
	transform: none;
}

/* Flat items (Capabilities / Industries children) */
.main-navigation .main-nav > ul > li.mm-mega > .sub-menu > li {
	width: auto;
	/* allow the grid track to shrink below the label's intrinsic width so
	   long labels wrap instead of forcing the column (and panel) to overflow */
	min-width: 0;
}

/* Flat items match the Projects & Products group-header style — same
   font (Inter 0.95rem / 600 / ink) and the thin divider rule beneath —
   while staying clickable links. */
.main-navigation .main-nav > ul > li.mm-mega > .sub-menu > li > a {
	padding: 0 0 8px;
	margin-bottom: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--mm-color-ink);
	border-bottom: 1px solid rgba(14, 15, 18, 0.12);
}

.main-navigation .main-nav > ul > li.mm-mega > .sub-menu > li > a:hover,
.main-navigation .main-nav > ul > li.mm-mega > .sub-menu > li > a:focus {
	color: var(--mm-color-accent);
}

/* Projects & Products — group headers (depth 1) are non-navigable labels */
.main-navigation .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-group-header {
	width: auto;
}

.main-navigation .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-group-header > a {
	padding: 0 0 8px;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--mm-color-ink);
	border-bottom: 1px solid rgba(14, 15, 18, 0.12);
	margin-bottom: 8px;
	cursor: default;
}

.main-navigation .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-group-nav > a {
	cursor: pointer;
}
.main-navigation .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-group-nav > a:hover {
	color: var(--mm-color-accent);
}

/* Click interception guard.
   Every mega panel now shares the same full-width box, and GeneratePress keeps
   closed panels in the layout (opacity:0) rather than removing them. So a closed
   panel's links would sit on top of the OPEN panel and swallow clicks. Make all
   mega-panel links inert by default, and only re-enable them on the open panel.
   The non-navigable group-header LABELS stay inert even when open.
   Scoped to :not(.toggled) so the mobile accordion (which has no hover/open
   panel) keeps its links clickable. */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega .sub-menu a {
	pointer-events: none;
}
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega:hover .sub-menu a,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega.sfHover .sub-menu a {
	pointer-events: auto;
}
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega:hover > .sub-menu > li.mm-mega-group-header:not(.mm-mega-group-nav) > a,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega.sfHover > .sub-menu > li.mm-mega-group-header:not(.mm-mega-group-nav) > a {
	pointer-events: none;
}

.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header .dropdown-menu-toggle {
	display: none;
}

/* Group headers' nested product list (depth 2) — render inline, not as a flyout */
.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	opacity: 1;
	visibility: visible;
	box-shadow: none;
	padding: 0;
	margin: 0;
	transition: none;
	background-color: var(--mm-color-paper);
}

.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li {
	background-color: var(--mm-color-paper);
}

.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li > a {
	padding: 6px 0;
	font-size: 0.95rem;
	white-space: normal;
	background-color: var(--mm-color-paper);
}

.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li:hover > a,
.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li.sfHover > a {
	background-color: var(--mm-color-paper);
}

/* Indented winch variant items */
.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li.mm-mega-sub > a {
	padding-left: 14px;
	font-size: 0.875rem;
	color: var(--mm-color-ink-muted);
}
.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li.mm-mega-sub:hover > a {
	color: var(--mm-color-accent);
}

/* “View all” — full-width footer spanning all 4 columns */
.main-navigation .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-viewall {
	grid-column: 1 / span 4;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-top: 1px solid rgba(14, 15, 18, 0.12);
	padding-top: 12px;
	margin-top: 4px;
	width: auto;
}

.main-navigation .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-viewall > a {
	font-weight: 600;
	color: var(--mm-color-accent);
	white-space: nowrap;
	padding: 10px 0;
}

.main-navigation .main-nav > ul > li.mm-mega-products > .sub-menu > li.mm-mega-viewall > a:hover {
	color: var(--mm-color-accent-hover);
}

/* Mobile accordion — let nested levels stack full-width, no grid */
.main-navigation.toggled .main-nav > ul > li.mm-mega > ul.sub-menu,
.main-navigation.toggled .main-nav > ul > li.mm-mega-products .mm-mega-group-header > ul.sub-menu {
	display: block;
	grid-template-columns: none;
	width: 100%;
	padding: 0;
	border-top: 0;
	box-shadow: none;
	transform: none;
	float: none;
}

/* GeneratePress floats sub-menus left; on mobile the uncleared full-width
   floats push the FOLLOWING group header's label off-screen to the right.
   Clear all floating inside the open mega panels so each row stacks cleanly. */
.main-navigation.toggled .main-nav > ul > li.mm-mega ul.sub-menu,
.main-navigation.toggled .main-nav > ul > li.mm-mega ul.sub-menu > li {
	float: none;
}

.main-navigation.toggled .main-nav > ul > li.mm-mega-products .mm-mega-group-header > a {
	pointer-events: auto;
	cursor: pointer;
	border-bottom: 0;
}

.main-navigation.toggled .main-nav > ul > li.mm-mega-products .mm-mega-group-header .dropdown-menu-toggle {
	display: inline-block;
}

/* Mobile mega menu — strip every stray line. On mobile the stacked rows pick up
   several overlapping 1px lines: the desktop divider border on each <a>, the
   GeneratePress nested-<ul> border (.toggled .main-nav ul ul) and its drop-shadow.
   They render as extra lines across/under the text. Clear them all, then add a
   single clean divider per top-level row (group headers / flat items).
   !important is used because the theme stylesheet is enqueued more than once, so
   ordinary same-specificity overrides don't reliably win the cascade. */
.main-navigation.toggled .main-nav > ul > li.mm-mega ul.sub-menu,
.main-navigation.toggled .main-nav > ul > li.mm-mega .sub-menu a,
.main-navigation.toggled .main-nav > ul > li.mm-mega .sub-menu li {
	border: 0 !important;
	box-shadow: none !important;
}
.main-navigation.toggled .main-nav > ul > li.mm-mega > ul.sub-menu > li {
	border-bottom: 1px solid rgba(14, 15, 18, 0.10) !important;
}

/* ==========================================================================
   Contained hero — heading + supporting line + CTA on the left, one image
   on the right, held within the ~1240px grid. No full-bleed, no animation.
   ========================================================================= */

.mm-hero {
	padding: 24px 0 72px;
}

.mm-hero-row {
	gap: 48px;
}

.mm-hero-content h1 {
	margin-top: 0;
	margin-bottom: 0.5em;
}

/* Hero headings must never break a word across lines. The block theme sets a
   global word-break/overflow-wrap: break-word; reset it here so the heading
   only wraps at spaces. text-wrap: balance keeps the resulting lines even. */
.mm-hero h1,
.mm-hero-content h1 {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	text-wrap: balance;
}

.mm-hero-lead {
	max-width: 38em;
	color: var(--mm-color-ink);
	opacity: 0.85;
}

.mm-hero-content .wp-block-buttons {
	margin-top: 1.5em;
}

.mm-hero-image {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.mm-hero-image figure,
.mm-hero-image img {
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stack on mobile — image below content, full width */
@media (max-width: 768px) {
	.mm-hero {
		padding: 40px 0 48px;
	}

	.mm-hero-row {
		flex-direction: column;
		gap: 32px;
	}

	.mm-hero-row .wp-block-column {
		flex-basis: 100% !important;
	}

	.mm-hero-image {
		aspect-ratio: 16 / 10;
	}
}

/* ==========================================================================
   Section rhythm — alternating dark/paper sections, kicker + accent rule,
   body column held to ~680px, one image per section, card/grid pattern.
   ========================================================================= */

/* Colored bands fill the full content width: negative inline margins
   cancel GeneratePress's .inside-article padding (30px) so the band
   reaches the content-area edge, then matching inline padding re-aligns
   the text with the rest of the page. Predictable, no full-bleed
   overflow or clipping. */
.mm-section {
	position: relative;
	overflow: hidden;
	margin-left: -30px;
	margin-right: -30px;
	padding: 64px 30px;
}

@media (min-width: 769px) {
	.mm-section {
		padding: 88px 30px;
	}
}

.mm-section .mm-kicker-rule {
	margin-bottom: 1.5em;
}

.mm-section > .wp-block-heading {
	max-width: 38em;
	margin-top: 0;
	margin-bottom: 1em;
}

/* Topography line texture — carried over from the original mintmech.com
   to visually link the old site to the new. Rendered low-opacity via a
   pseudo-element. The new site leads paper-white, so paper sections use
   the inverted ink line-art; dark sections keep the original white.

   Which contour map shows is driven by two CSS variables. The default is
   topo-12; add an mm-topo-1 … mm-topo-14 class to a section (Block →
   Advanced → Additional CSS class(es)) to pick a different one. The
   bundled section patterns ship with varied defaults so a page looks
   varied out of the box. */
.mm-section {
	--mm-topo-ink: url( "assets/img/topo/topo-12-ink.svg" );
	--mm-topo-line: url( "assets/img/topo/topo-12.svg" );
}

.mm-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --mm-topo-ink );
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 140%;
	opacity: 0.08;
	pointer-events: none;
}

.mm-section--dark::before {
	background-image: var( --mm-topo-line );
	opacity: 0.12;
}

/* Per-section topo override classes */
.mm-section.mm-topo-1 { --mm-topo-ink: url( "assets/img/topo/topo-1-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-1.svg" ); }
.mm-section.mm-topo-2 { --mm-topo-ink: url( "assets/img/topo/topo-2-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-2.svg" ); }
.mm-section.mm-topo-3 { --mm-topo-ink: url( "assets/img/topo/topo-3-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-3.svg" ); }
.mm-section.mm-topo-4 { --mm-topo-ink: url( "assets/img/topo/topo-4-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-4.svg" ); }
.mm-section.mm-topo-5 { --mm-topo-ink: url( "assets/img/topo/topo-5-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-5.svg" ); }
.mm-section.mm-topo-6 { --mm-topo-ink: url( "assets/img/topo/topo-6-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-6.svg" ); }
.mm-section.mm-topo-7 { --mm-topo-ink: url( "assets/img/topo/topo-7-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-7.svg" ); }
.mm-section.mm-topo-8 { --mm-topo-ink: url( "assets/img/topo/topo-8-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-8.svg" ); }
.mm-section.mm-topo-9 { --mm-topo-ink: url( "assets/img/topo/topo-9-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-9.svg" ); }
.mm-section.mm-topo-10 { --mm-topo-ink: url( "assets/img/topo/topo-10-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-10.svg" ); }
.mm-section.mm-topo-11 { --mm-topo-ink: url( "assets/img/topo/topo-11-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-11.svg" ); }
.mm-section.mm-topo-12 { --mm-topo-ink: url( "assets/img/topo/topo-12-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-12.svg" ); }
.mm-section.mm-topo-13 { --mm-topo-ink: url( "assets/img/topo/topo-13-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-13.svg" ); }
.mm-section.mm-topo-14 { --mm-topo-ink: url( "assets/img/topo/topo-14-ink.svg" ); --mm-topo-line: url( "assets/img/topo/topo-14.svg" ); }

.mm-section > * {
	position: relative;
	z-index: 1;
}

.mm-section-row {
	gap: 48px;
	margin-top: 2em;
}

.mm-section-body {
	max-width: 38em;
}

.mm-section-body p:last-child {
	margin-bottom: 0;
}

.mm-section-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.mm-section-image figure,
.mm-section-image img {
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.mm-section-row {
		flex-direction: column;
	}

	.mm-section-row .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Conditional inline (second) image — sits mid-copy, contained to the
   grid with comfortable vertical breathing. Only present when the page
   manifest supplies an inline image (see functions.php). */
/* Match the section bands' width: cancel the inside-article padding so the
   image lines up edge-to-edge with the section blocks above and below. */
.mm-inline-image {
	margin-left: -30px;
	margin-right: -30px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.mm-inline-image figure,
.mm-inline-image img {
	margin: 0;
	display: block;
	width: 100%;
	height: auto;
}

/* Full-width image band (hardcoded page image, distinct from the
   manifest-driven conditional .mm-inline-image). Matches the section
   bands' width. */
.mm-image-band {
	margin-left: -30px;
	margin-right: -30px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.mm-image-band figure,
.mm-image-band img {
	margin: 0;
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}

/* Intro lede — the opening paragraph below a hero, slightly larger. */
.mm-lede {
	max-width: 38em;
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 1.2rem;
	line-height: 1.6;
}

/* "Areas of work" link grid — two/four-column list of entry points. */
.mm-areas {
	list-style: none;
	margin: 1.5em 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

@media (min-width: 769px) {
	/* Even 2×5 grid: the 9 industries (matching the Industries mega-menu) plus
	   the "All industries →" link as the 10th in-grid cell. Two columns keep the
	   labels wide enough to read on one line; equal cell heights + vertically-
	   centred labels keep the rows aligned even where a label wraps. */
	.mm-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 48px;
	}
}

/* "All industries →" stays the deliberate orange "go to the section" link even
   though it now sits in the grid alongside the black industry labels. */
.mm-areas .mm-areas__all a {
	color: var(--mm-color-accent);
}
.mm-areas .mm-areas__all a:hover,
.mm-areas .mm-areas__all a:focus {
	color: var(--mm-color-accent-hover);
}

.mm-areas li {
	margin: 0;
	border-top: 1px solid rgba(14, 15, 18, 0.12);
}

.mm-areas a {
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 48px;
	padding: 10px 0;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mm-color-ink);
	text-decoration: none;
}

.mm-areas a:hover,
.mm-areas a:focus {
	color: var(--mm-color-accent);
}

/* Card/grid pattern — overview pages, product template */
.mm-card-grid {
	gap: 32px;
	margin-top: 2em;
}

.mm-card {
	background-color: var(--mm-color-paper);
}

.mm-section--dark .mm-card {
	background-color: var(--mm-color-ink);
}

.mm-card-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 1em;
}

.mm-card-image figure,
.mm-card-image img {
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mm-card h3 {
	margin-top: 0;
	/* A touch more room so the ghost-button title clears its description. */
	margin-bottom: 0.7em;
}

.mm-card p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.mm-card-grid {
		flex-direction: column;
	}

	.mm-card-grid .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   Ghost button — the inverse of the signature CTA. Transparent interior,
   accent outline + accent text, with the SAME chamfered bottom-left corner as
   .wp-block-button__link (reusing --mm-chamfer and the same clip-path polygon).
   On hover/focus it inverts to the solid CTA look (accent fill, paper text).

   The card-title links on the overview pages (Capabilities / Industries /
   Projects & Products) get this automatically; .mm-ghost-button is the reusable
   opt-in class for any other plain link that wants the matched treatment
   (added via the List/Paragraph block's Additional CSS class field).

   Outline technique: clip-path slices a plain CSS `border` off along the
   diagonal, leaving a gap on the cut corner. So the frame is built from two
   stacked, chamfered layers — an accent ::before (the "border") and a ::after
   inset by the border width, filled with the card's own colour (--mm-ghost-fill)
   to knock out the centre. On the solid card backgrounds this reads as a clean
   transparent interior; on hover the fill flips to accent and the whole thing
   goes solid. --mm-ghost-fill / --mm-ghost-ring are re-pointed on dark sections.
   ========================================================================= */
.mm-ghost-button,
.mm-card h3 a {
	--mm-ghost-border: 1.5px;
	/* Inner chamfer pulled in by ~border×√2 so the diagonal stroke matches the
	   straight edges' width instead of collapsing to a gap. */
	--mm-chamfer-inner: calc(var(--mm-chamfer) - (var(--mm-ghost-border) * 1.42));
	--mm-ghost-fill: var(--mm-color-paper);
	--mm-ghost-ring: var(--mm-color-ink);
	--mm-chamfer: 12px;
	position: relative;
	z-index: 0;
	display: inline-block;
	max-width: 100%;
	padding: 0.5em 1.1em;
	font-family: var(--mm-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--mm-color-accent);
	background-color: transparent;
	text-decoration: none;
	transition: color 120ms linear;
}

/* Accent layer = the visible chamfered outline (same polygon as the CTA). */
.mm-ghost-button::before,
.mm-card h3 a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--mm-color-accent);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mm-chamfer) 100%, 0 calc(100% - var(--mm-chamfer)));
}

/* Fill layer = section/card colour, inset by the border width with a slightly
   tighter chamfer, knocking out the centre so only the outline shows. */
.mm-ghost-button::after,
.mm-card h3 a::after {
	content: "";
	position: absolute;
	inset: var(--mm-ghost-border);
	z-index: -1;
	background-color: var(--mm-ghost-fill);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mm-chamfer-inner) 100%, 0 calc(100% - var(--mm-chamfer-inner)));
	transition: background-color 120ms linear;
}

/* Hover / focus — invert to the solid CTA look: accent fill, paper text. */
.mm-ghost-button:hover,
.mm-ghost-button:focus,
.mm-card h3 a:hover,
.mm-card h3 a:focus {
	color: var(--mm-color-ink);
	--mm-ghost-fill: var(--mm-color-accent);
}

/* Keyboard focus — a clear ring outside the button (clip-path would clip an
   inset one). Ring colour flips on dark sections so it stays visible. */
.mm-ghost-button:focus-visible,
.mm-card h3 a:focus-visible {
	outline: 2px solid var(--mm-ghost-ring);
	outline-offset: 2px;
}

/* Dark sections: interior matches the ink card, focus ring goes paper. Accent
   outline + accent text keep ~6:1 contrast on ink; the inverted solid state is
   ink-on-accent, identical to the established CTA. */
.mm-section--dark .mm-ghost-button,
.mm-section--dark .mm-card h3 a {
	--mm-ghost-fill: var(--mm-color-ink);
	--mm-ghost-ring: var(--mm-color-paper);
}

.mm-section--dark .mm-ghost-button:hover,
.mm-section--dark .mm-ghost-button:focus,
.mm-section--dark .mm-card h3 a:hover,
.mm-section--dark .mm-card h3 a:focus {
	--mm-ghost-fill: var(--mm-color-accent);
}

/* ==========================================================================
   Status tags (pills) — data-driven type/availability badges for products &
   projects, so a buyer scans "what is it / how fast can I get it" at a glance.
   Adapted from the brand's APPROVED·READY availability badge: outline pill,
   uppercase, letter-spaced, small, 2px radius, low-opacity tint of the tag's
   colour. One component, two sizes — .mm-tags--compact on listing cards,
   .mm-tags--hero near a detail title.

   Each variant sets a single hue via --mm-tag-color; border and tint derive
   from it (color-mix), and text uses an AA-dark "-ink" shade on light tints,
   lifting to a light tint of the same hue on dark sections. Colour encodes
   meaning but the label always carries it too, so colour is never the only
   signal. Rendered as real <ul>/<li> — informational, not interactive.
   ========================================================================= */
.mm-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.85em;
	padding: 0;
	list-style: none;
}

.mm-tag {
	--mm-tag-color: var(--mm-color-ink-muted);
	--mm-tag-text: var(--mm-tag-color);
	display: inline-flex;
	align-items: center;
	font-family: var(--mm-font-body);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	padding: 0.42em 0.62em;
	border-radius: 2px;
	border: 1px solid color-mix(in srgb, var(--mm-tag-color) 55%, transparent);
	background-color: color-mix(in srgb, var(--mm-tag-color) 12%, transparent);
	color: var(--mm-tag-text);
}

/* Meaning → colour. Light-mode text uses the AA-dark "-ink" shades. */
.mm-tag--type     { --mm-tag-color: var(--mm-color-ink-muted); --mm-tag-text: var(--mm-color-ink-muted); }
.mm-tag--stock    { --mm-tag-color: var(--mm-color-go);     --mm-tag-text: var(--mm-color-go-ink); }
.mm-tag--standard { --mm-tag-color: var(--mm-color-accent); --mm-tag-text: var(--mm-color-accent-ink); }
.mm-tag--hire     { --mm-tag-color: var(--mm-color-hire);   --mm-tag-text: var(--mm-color-hire-ink); }

/* Dark sections/cards: keep the bright hue for border + tint, lift the text to
   a light tint of the same hue so it stays legible (AA) on ink. */
.mm-section--dark .mm-tag,
.mm-card--dark .mm-tag {
	--mm-tag-text: color-mix(in srgb, var(--mm-tag-color) 32%, #ffffff);
}

/* The neutral type tag needs a lighter grey on ink so its outline still reads. */
.mm-section--dark .mm-tag--type,
.mm-card--dark .mm-tag--type {
	--mm-tag-color: #b4b2a9;
}

/* Compact — listing cards. Smaller so all four pills sit on a card cleanly. */
.mm-tags--compact {
	gap: 0.3rem;
}

.mm-tags--compact .mm-tag {
	font-size: 0.58rem;
	letter-spacing: 0.05em;
	padding: 0.36em 0.5em;
}

/* Hero — the primary "can I get this now?" row near a detail-page title. */
.mm-tags--hero {
	gap: 0.5rem;
	margin-bottom: 1.1em;
}

.mm-tags--hero .mm-tag {
	font-size: 0.74rem;
	padding: 0.5em 0.8em;
}

/* ==========================================================================
   Marked list — reusable styled list device. Real <ul>/<li> semantics; an
   orange accent marker (echoing the kicker rule) and a thin divider per item,
   with generous spacing. Use .mm-marked-list on any list that wants this
   treatment (e.g. the Home "Why choose us" list). Items may optionally lead
   with a bold term + em-dash clause; where a <strong> lead-in is present it's
   styled too, but plain items work just as well.

   .mm-delivery-modes-list is retained as an alias so the mintmech/delivery-modes
   pattern and the existing About / Home "What we do" lists keep this styling
   without markup changes; it carries no rules of its own.

   Note on contrast: the brand orange (#f46120 ≈ 3:1 on white) doesn't meet
   WCAG AA 4.5:1 for body-size text, so the orange carries through the
   decorative marker only — any lead-in term stays ink for full legibility.
   ========================================================================= */

.mm-marked-list,
.mm-delivery-modes-list {
	list-style: none;
	margin: 1.5em 0 0;
	padding: 0;
}

.mm-marked-list li,
.mm-delivery-modes-list li {
	position: relative;
	margin: 0;
	padding: 0.95em 0 0.95em 28px;
	border-top: 1px solid rgba(14, 15, 18, 0.12);
	line-height: 1.6;
}

.mm-marked-list li:first-child,
.mm-delivery-modes-list li:first-child {
	border-top: 0;
	padding-top: 0.2em;
}

/* Orange accent marker — a short bar echoing the kicker's ~6px accent rule,
   aligned to the first line of the item. Decorative, so the brand orange is
   used here rather than on the text. */
.mm-marked-list li::before,
.mm-delivery-modes-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 14px;
	height: 4px;
	background-color: var(--mm-color-accent);
}

.mm-marked-list li:first-child::before,
.mm-delivery-modes-list li:first-child::before {
	top: 0.5em;
}

/* Bold lead-in term, Inter — kept ink for contrast (see note above). */
.mm-marked-list li strong,
.mm-delivery-modes-list li strong {
	font-family: var(--mm-font-body);
	font-weight: 600;
	color: var(--mm-color-ink);
}

/* Dark-section variant — marker stays accent (good contrast on ink); the
   lead-in term and dividers invert to paper. */
.mm-section--dark .mm-marked-list li,
.mm-section--dark .mm-delivery-modes-list li {
	border-top-color: rgba(255, 255, 255, 0.16);
}

.mm-section--dark .mm-marked-list li strong,
.mm-section--dark .mm-delivery-modes-list li strong {
	color: var(--mm-color-paper);
}

/* ==========================================================================
   Geo-overlay caption — per-image LAT / LON / LOCATION as real, selectable
   <figcaption> text over a CSS-only dark-to-transparent scrim. Built once
   into mintmech_image_tag() (functions.php), so the hero and inline images
   on every page inherit it. Accent-orange "+" and LAT/LON labels, white
   coordinate values, white uppercase location. Technical/utilitarian — no
   animation, nothing baked into the source image.
   ========================================================================= */

/* Anchor the absolutely-positioned caption to its image figure so the LAT /
   LON / LOCATION always sits OVER the image (never in the block area below it).
   Covers every design-system slot — hero (group + the contained-hero figure),
   inline, section, card and band — plus a :has() catch-all so any figure that
   carries a geo caption is anchored, whatever its wrapper. */
.mm-hero-image figure,
.mm-inline-image figure,
.mm-section-image figure,
.mm-card-image figure,
.mm-image-band figure,
figure.mm-hero__image,
figure:has( > figcaption.mm-geo ) {
	position: relative;
	/* Clip the absolutely-positioned geo overlay (coords, location, credit) to the
	   image so its text + scrim can never spill past the image boundary, whatever
	   the image's aspect ratio or the figure's height. */
	overflow: hidden;
}

/* The contained-hero figure also needs to clip the scrim to its rounded corners. */
figure.mm-hero__image {
	overflow: hidden;
	border-radius: 4px;
	margin: 0;
}

/* Standalone dark band (the mm_band_dark helper output) sits between mm-prose
   bodies on detail/spoke pages. Hold its copy to the same measure + 20px inset
   as mm-prose so it doesn't run wider than the light sections around it — the
   dark background still fills the band, only the text is constrained. Full
   section bands (mm-section mm-section--dark, e.g. on Home) are NOT affected. */
.mm-section--dark:not(.mm-section) {
	/* The block's intended spacing-70 padding never rendered (the static group
	   div carries no inline style), so the dark box sat tight against its copy.
	   Balance the band: moderate internal padding (so the black isn't oversized)
	   plus external margin (so the following paper section — e.g. a "Where it's
	   applied" kicker — isn't crowded against the band's edge). Inside ≈ outside. */
	padding: 2.5rem 20px;
	margin-block: 2.75rem;
}

.mm-section--dark:not(.mm-section) > * {
	max-width: 768px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Keep the clearance symmetrical — don't let the first/last child's own margin
   stack on top of the band padding. */
.mm-section--dark:not(.mm-section) > :first-child {
	margin-top: 0;
}

.mm-section--dark:not(.mm-section) > :last-child {
	margin-bottom: 0;
}

.mm-geo {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	/* Reset the core .wp-block-image figcaption margin — on an absolutely
	   positioned box a bottom margin lifts the scrim off the image edge,
	   leaving a strip of bare photo below it. */
	margin: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px 12px;
	/* CSS scrim for legibility — never baked into the source image. */
	background: linear-gradient(
		to top,
		rgba(14, 15, 18, 0.78) 0%,
		rgba(14, 15, 18, 0.42) 48%,
		rgba(14, 15, 18, 0) 100%
	);
	color: var(--mm-color-paper);
}

/* Left: the "+" marker then the two stacked coordinate lines. */
.mm-geo-coords {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.mm-geo-mark {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--mm-color-accent);
}

.mm-geo-lines {
	display: flex;
	flex-direction: column;
}

/* Accent-orange labels, white values. */
.mm-geo-label {
	color: var(--mm-color-accent);
}

.mm-geo-value {
	color: var(--mm-color-paper);
}

/* Right column: location in the brand kicker treatment, with the optional
   photo credit stacked directly beneath it. */
.mm-geo-place {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 0;
	text-align: right;
}

.mm-geo-location {
	min-width: 0;
	font-family: var(--mm-font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-align: right;
	text-transform: uppercase;
	color: var(--mm-color-paper);
}

/* Photo credit — smaller and lighter than the location, accent "Credit /" label. */
.mm-geo-credit {
	font-family: var(--mm-font-body);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.85);
}

.mm-geo-credit-label {
	color: var(--mm-color-accent);
}

/* Card slots are small even on desktop — tighten the caption and let it
   wrap so the location never crowds the coordinates. */
.mm-card-image .mm-geo {
	flex-wrap: wrap;
	gap: 6px 10px;
	padding: 9px 11px 8px;
}

.mm-card-image .mm-geo-coords,
.mm-card-image .mm-geo-location {
	font-size: 0.64rem;
}

.mm-card-image .mm-geo-credit {
	font-size: 0.58rem;
}

/* Mobile: shrink rather than overflow; let a long location wrap. */
@media (max-width: 768px) {
	.mm-geo {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 11px 14px 10px;
	}

	.mm-geo-coords,
	.mm-geo-location {
		font-size: 0.66rem;
	}

	.mm-geo-credit {
		font-size: 0.6rem;
	}
}

/* ==========================================================================
   Social rail — a fixed vertical bar pinned to the viewport's left edge and
   vertically centred, persistent on every page (injected once via
   wp_body_open in functions.php). Styled as MintMech's signature CTA: an
   accent-orange sharp rectangle with the bottom-left corner chamfered (same
   --mm-chamfer and clip-path polygon as .wp-block-button__link), white icons,
   and the darker accent on hover. Sits above the sticky header (z-index 1000
   vs the header's 100). Top to bottom: LinkedIn, the phone number set
   vertically (reading bottom-to-top, still real selectable text), and a
   contact envelope.
   ========================================================================= */

.mm-social-rail {
	--mm-chamfer: 14px;
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 10px 6px;
	background-color: var(--mm-color-accent);
	/* Cut the bottom-left corner — the long-standing MintMech button shape. */
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mm-chamfer) 100%, 0 calc(100% - var(--mm-chamfer)));
}

.mm-social-rail__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 10px;
	color: var(--mm-color-ink);
	line-height: 0;
	text-decoration: none;
	transition: background-color 120ms linear, color 120ms linear;
}

/* Hover/focus darkens just the hovered item to the button's hover orange. */
.mm-social-rail__item:hover,
.mm-social-rail__item:focus-visible {
	background-color: var(--mm-color-accent-hover);
	color: var(--mm-color-ink);
}

/* Inset focus ring (ink on orange) so it stays visible and isn't clipped by
   the rail's chamfer clip-path. */
.mm-social-rail__item:focus-visible {
	outline: 2px solid var(--mm-color-ink);
	outline-offset: -2px;
}

.mm-social-rail__icon {
	display: block;
}

/* Phone — rotated to read bottom-to-top. writing-mode turns the line
   vertical; rotate(180deg) flips it so it ascends. The text stays real and
   selectable, just transformed. */
.mm-social-rail__phone {
	padding: 14px 10px;
}

.mm-social-rail__phone-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--mm-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Hide on narrower viewports, where the centred ~1240px content reaches close
   enough to the screen edge that the rail would sit over body text. Shown only
   once there's a comfortable gutter (≥1280px viewport vs the 1240px grid). The
   site's other breakpoint is 768px, but that's too narrow here — the rail
   would overlap copy between ~768px and ~1280px — so this guards the body text
   as the brief requires. */
@media (max-width: 1279px) {
	.mm-social-rail {
		display: none;
	}
}


/* ==========================================================================
   FOOTER — mm-footer
   Dark (#0e0f12) branded footer: three columns + legal bar beneath.
   ========================================================================== */

.mm-footer {
	background: var(--mm-color-ink);
	color: rgba(255,255,255,0.75);
	font-family: var(--mm-font-body);
	font-size: 0.9rem;
	line-height: 1.6;
}

.mm-footer__inner {
	max-width: var(--mm-container);
	margin: 0 auto;
	padding: 64px 24px 48px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
}

.mm-footer__logo {
	display: block;
	width: 100px;
	height: auto;
	margin-bottom: 20px;
}

.mm-footer__tagline {
	color: rgba(255,255,255,0.55);
	font-size: 0.85rem;
	max-width: 260px;
	margin: 0;
}

.mm-footer__col-heading {
	font-family: var(--mm-font-body);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-color-orange);
	margin: 0 0 16px;
}

.mm-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-footer__nav li {
	margin-bottom: 10px;
}

.mm-footer__nav a,
.mm-footer__address a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	transition: color 0.15s ease;
}

.mm-footer__nav a:hover,
.mm-footer__address a:hover {
	color: #fff;
}

.mm-footer__address {
	font-style: normal;
}

.mm-footer__address p {
	margin: 0 0 14px;
}

.mm-footer__bar {
	border-top: 1px solid rgba(255,255,255,0.1);
	max-width: var(--mm-container);
	margin: 0 auto;
	padding: 20px 24px;
}

.mm-footer__legal {
	color: rgba(255,255,255,0.4);
	font-size: 0.8rem;
	margin: 0;
}

.mm-footer__legal a {
	color: rgba(255,255,255,0.4);
	text-decoration: none;
}

.mm-footer__legal a:hover {
	color: rgba(255,255,255,0.7);
}

/* Cookie Settings footer control — a real <button> (Complianz only binds its
   click delegation to button.cmplz-manage-consent, not <a>), reset to read
   identically to the plain-text footer links either side of it. */
.mm-footer__legal-button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: rgba(255,255,255,0.4);
	text-decoration: none;
	cursor: pointer;
}
.mm-footer__legal-button:hover,
.mm-footer__legal-button:focus-visible {
	color: rgba(255,255,255,0.7);
}

@media (max-width: 768px) {
	.mm-footer__inner {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 48px 24px 36px;
	}
}


/* ==========================================================================
   CONTACT MAP — mm-contact-map
   Full-width OpenStreetMap embed below the contact details section.
   ========================================================================== */

.mm-contact-map {
	width: 100%;
	height: 420px;
	border: 0;
	display: block;
	border-radius: 4px;
	overflow: hidden;
}

.mm-map-marker__dot {
	width: 20px;
	height: 20px;
	background: var(--mm-color-accent);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.leaflet-popup-content-wrapper {
	border-radius: 4px;
	font-family: var(--mm-font-body);
	font-size: 0.88rem;
	line-height: 1.5;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.leaflet-popup-tip-container {
	margin-top: -1px;
}

.mm-contact-location {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mm-contact-location a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mm-w3w-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--mm-color-orange) !important;
	text-decoration: none !important;
}

.mm-w3w-link:hover {
	color: var(--mm-hover-orange) !important;
}

.mm-w3w-logo {
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
	color: #e11f26;
}

/* ==========================================================================
   Spec tables (.mm-spec) — key/value technical specifications on product pages.
   First column is the label (narrow, bold ink), second the value; thin rules
   between rows, no heavy grid.
   ========================================================================== */
.mm-spec {
	margin: 2.25rem 0;
	border: 1px solid rgba(14, 15, 18, 0.12);
	border-top: 3px solid var(--mm-color-accent);
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--mm-color-paper);
}

.mm-spec table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mm-font-body);
	font-size: 0.95rem;
}

.mm-spec th,
.mm-spec td {
	padding: 0.9rem 1.15rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}

/* Hairline rules between rows only — not after the last one (the frame closes it). */
.mm-spec tr:not(:last-child) th,
.mm-spec tr:not(:last-child) td {
	border-bottom: 1px solid rgba(14, 15, 18, 0.09);
}

/* Label column: an uppercase, letter-spaced spec-sheet label on a faint tint,
   divided from the value by a hairline — reads like a datasheet, not a wireframe. */
.mm-spec th {
	width: 32%;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mm-color-ink);
	background-color: rgba(14, 15, 18, 0.035);
	border-right: 1px solid rgba(14, 15, 18, 0.09);
}

.mm-spec td {
	color: var(--mm-color-ink);
}

/* Subtle row hover for scannability. */
.mm-spec tr:hover th {
	background-color: rgba(244, 97, 32, 0.06);
}

.mm-spec tr:hover td {
	background-color: rgba(244, 97, 32, 0.035);
}

/* On dark bands: transparent frame, inverted text, same accent top rule. */
.mm-section--dark .mm-spec {
	border-color: rgba(255, 255, 255, 0.16);
	border-top-color: var(--mm-color-accent);
	background-color: transparent;
}

.mm-section--dark .mm-spec th {
	color: var(--mm-color-paper);
	background-color: rgba(255, 255, 255, 0.05);
	border-right-color: rgba(255, 255, 255, 0.16);
}

.mm-section--dark .mm-spec td {
	color: rgba(255, 255, 255, 0.82);
}

.mm-section--dark .mm-spec tr:not(:last-child) th,
.mm-section--dark .mm-spec tr:not(:last-child) td {
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.mm-section--dark .mm-spec tr:hover th,
.mm-section--dark .mm-spec tr:hover td {
	background-color: rgba(244, 97, 32, 0.1);
}

/* Status-tag pills sitting in a dark hero need a little breathing room. */
.mm-hero-tags {
	margin-top: 1.25rem;
}

/* Insight-article byline + case-study client line. */
.mm-byline {
	font-family: var(--mm-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mm-color-accent-ink);
	margin-bottom: 1.5rem;
}

.mm-meta-client {
	font-family: var(--mm-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mm-color-ink-muted);
	margin-bottom: 1.25rem;
}

.mm-meta-client strong {
	color: var(--mm-color-accent-ink);
}

/* ==========================================================================
   Breadcrumbs (.mm-breadcrumb)
   Sits quietly directly beneath the hero on every page except Home. Small,
   muted, letter-spaced, with orange separators; the current page is accented
   and not a link. Injected after the hero block (see mintmech_render_breadcrumb).
   ========================================================================== */
.mm-breadcrumb {
	max-width: 1240px;
	margin: 0 auto;
	padding: 2.25rem 20px 1.5rem;
}

.mm-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.1rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--mm-font-body);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mm-breadcrumb__item {
	display: flex;
	align-items: center;
	color: var(--mm-color-ink-muted);
}

/* Orange separator before every item except the first. */
.mm-breadcrumb__item + .mm-breadcrumb__item::before {
	content: "/";
	margin-right: 0.55rem;
	color: var(--mm-color-accent);
	font-weight: 600;
}

.mm-breadcrumb__item a {
	color: var(--mm-color-ink-muted);
	text-decoration: none;
}

.mm-breadcrumb__item a:hover {
	color: var(--mm-color-accent-hover);
}

.mm-breadcrumb__item--current span {
	color: var(--mm-color-ink);
	font-weight: 600;
}

/* ==========================================================================
   Related links (.mm-related)
   The canonical "where to go next" block — last block in the content area on
   every page. A tinted band clearly separated from the body, carrying the
   kicker + 6px rule device and a marked list of onward links. Works on paper
   (default) and dark (.mm-related--dark, or inside a dark section).
   ========================================================================== */
.mm-related {
	max-width: 1240px;
	/* Top margin opens a gap above the divider so the body's last element (often
	   a CTA button) isn't butted up against the rule. */
	margin: 2.5rem auto 0;
	padding: 56px 20px 64px;
	border-top: 1px solid rgba(14, 15, 18, 0.12);
}

.mm-related__kicker {
	margin: 0 0 0.5em;
	font-family: var(--mm-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mm-color-accent);
}

.mm-related__rule {
	display: block;
	width: 48px;
	height: 6px;
	margin: 0 0 1rem;
	background-color: var(--mm-color-accent);
}

.mm-related__heading {
	margin: 0 0 1.25rem;
	font-family: var(--mm-font-display);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	line-height: 1.15;
}

/* Onward links: reuse the marked-list device. The list itself is a core list
   block carrying .mm-marked-list, so styling is inherited; this just constrains
   width and tightens it for the related band. */
.mm-related .mm-marked-list {
	max-width: 760px;
}

.mm-related__links {
	max-width: 760px;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-family: var(--mm-font-body);
}

.mm-related__links li {
	position: relative;
	padding-left: 1.1rem;
}

.mm-related__links li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 3px;
	background-color: var(--mm-color-accent);
}

.mm-related__links a {
	color: var(--mm-color-ink);
	text-decoration: none;
	font-weight: 500;
}

.mm-related__links a:hover {
	color: var(--mm-color-accent-hover);
}

/* On a dark band, invert the body text; markers/kicker stay orange. */
.mm-related--dark,
.mm-section--dark .mm-related {
	border-top-color: rgba(255, 255, 255, 0.16);
}

.mm-related--dark .mm-related__heading,
.mm-related--dark .mm-related__links a,
.mm-section--dark .mm-related .mm-related__heading,
.mm-section--dark .mm-related .mm-related__links a {
	color: var(--mm-color-paper);
}

.mm-related--dark .mm-related__links a:hover,
.mm-section--dark .mm-related .mm-related__links a:hover {
	color: var(--mm-color-accent);
}

/* ==========================================================================
   Detail-page polish (2026-06-21)
   ========================================================================== */

/* Detail/product body: align the copy with the breadcrumb and the related
   block above/below it. Those are centred in a 1240px column with a 20px
   inset; the bare mm_body group sat flush at the content edge, so the text
   read as "stuck to the edge". This re-frames it identically and holds the
   copy to a readable measure (like the home/overview body columns). */
.mm-prose {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* Hold copy to a readable measure, LEFT-aligned at the inset edge so it lines
   up with the breadcrumb and related block rather than floating in the middle.
   !important is required to beat the block editor's constrained-layout rule,
   which auto-centres children (margin-inline:auto) at equal specificity. */
.mm-prose > * {
	max-width: 768px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.mm-prose > .wp-block-table,
.mm-prose > figure {
	max-width: 768px;
}

/* Contact page: muted note under the Fluent Forms submit button ("what we do
   with your details"). Set from mintmech-forms.php (fluentform/after_form_render),
   not editable content, so it lives here rather than in a per-page utility class. */
.mm-form-note {
	color: var(--mm-color-ink-muted);
	font-size: 0.85em;
	margin-top: 0.75em;
}

/* Detail-page hero (the dark spoke/detail hero): inset the content 20px so the
   hero text and image line up with the breadcrumb + body, which sit in the
   1240+20px column. The dark band still spans the full content width. The light
   hero on home/overviews is left untouched — it aligns with its mm-section
   bodies, which sit flush at the content edge. */
.mm-hero--dark {
	padding-left: 20px;
	padding-right: 20px;
}

/* ==========================================================================
   Navigation colour — brand orange on hover/focus/current, never GeneratePress
   blue. Applies to top-level (parent) items and every sub-item.
   ========================================================================== */
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a:hover {
	color: var(--mm-color-accent);
	background-color: transparent;
}

/* Grouped product/solutions sub-items: orange on hover (they only had a bg rule). */
.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li:hover > a,
.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li > a:hover,
.main-navigation .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu > li > a:focus {
	color: var(--mm-color-accent);
	background-color: transparent;
}

/* ==========================================================================
   Mega menu — keep the Products / Solutions lists permanently expanded inside
   the open panel (no per-group hover-to-fly-out). The grouped sub-lists render
   inline and stay visible; this hardens it against GeneratePress's default
   flyout hide so the full catalogue is always shown at a glance.
   ========================================================================== */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-products .mm-mega-group-header > .sub-menu,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-solutions .mm-mega-group-header > .sub-menu {
	display: block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
	max-height: none !important;
	transform: none !important;
	/* pointer-events intentionally NOT forced here — a closed panel keeps these
	   sub-lists in the layout, and forcing them clickable let a closed panel
	   swallow clicks meant for the open one. Click state is governed by the
	   open/closed pointer-events rules in the mega-menu block above. */
	left: auto !important;
	top: auto !important;
}


/* ==========================================================================
   Layout refinements (2026-06-22) — overview/index card grids and dark heroes.
   ========================================================================== */

/* Card grids were rendered as a single squeezed flex row (every child on one
   line), which crushed cards and split words. Make them a real responsive grid
   that wraps into multiple rows with a sensible minimum card width. The
   compound selector outranks WordPress's generated .wp-container-* flex rules.
   Applies everywhere the card-grid pattern is used: Solutions, Insights,
   Industries, Capabilities, Products and the Home overview bands. */
.wp-block-columns.mm-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 40px 32px;
	margin-top: 2em;
	align-items: start;
}

/* Neutralise the inherited flex sizing on the cards now they're grid items. */
.wp-block-columns.mm-card-grid > .wp-block-column {
	flex-basis: auto;
	margin: 0;
}

/* On the narrowest screens a single, comfortable column. */
@media (max-width: 520px) {
	.wp-block-columns.mm-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Topography behind the dark hero — the same contour motif the overview
   sections carry, now tying the detail (product / solution / etc.) and overview
   heroes into the system. It sits over the black band but beneath the hero
   content, which is lifted into its own stacking layer. */
.mm-hero--dark {
	position: relative;
	overflow: hidden;
	--mm-topo-line: url( "assets/img/topo/topo-12.svg" );
}

.mm-hero--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var( --mm-topo-line );
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 150%;
	opacity: 0.1;
	pointer-events: none;
	z-index: 0;
}

.mm-hero--dark > .wp-block-columns {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Insight-article meta (2026-06-22) — byline date/publication link on the
   article page, and the author/date line on the Insights listing cards.
   ========================================================================== */

/* Byline (article page): the date + publication link are appended inline after
   the author so they read together at the top. */
.mm-byline-sep {
	color: var(--mm-color-ink-muted);
	font-weight: 400;
}

.mm-pub-link {
	color: var(--mm-color-accent-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms linear;
}

.mm-pub-link:hover,
.mm-pub-link:focus {
	border-bottom-color: currentColor;
}

.mm-pub-name {
	color: var(--mm-color-ink-muted);
}

/* Listing cards: a small "author · date" line under the title. */
.mm-card-meta {
	font-family: var(--mm-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--mm-color-ink-muted);
	margin: 0 0 0.7em;
}

.mm-card-author {
	color: var(--mm-color-accent-ink);
}

.mm-card-meta-sep {
	margin: 0 0.15em;
	opacity: 0.55;
}

.mm-section--dark .mm-card-meta {
	color: rgba(244, 243, 240, 0.72);
}

.mm-section--dark .mm-card-author {
	color: var(--mm-color-accent);
}

/* ==========================================================================
   Availability pills (2026-06-23) — customer-facing status badges used inline
   in the HPU range table and the Cranetainer model headings. Distinct from the
   .page__tag build chrome and the .mm-tags hero/card pills. Small, uppercase,
   solid-filled so they read on paper and dark alike.
   ========================================================================== */
.mm-pill {
	display: inline-block;
	padding: 0.16em 0.5em;
	margin: 0 0.15em 0.15em 0;
	font-family: var(--mm-font-body);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.45;
	border-radius: 2px;
	vertical-align: middle;
	white-space: nowrap;
	color: #fff;
}
.mm-pill-instock  { background-color: #1f7a3d; }                       /* green  */
.mm-pill-hire     { background-color: #1f5fa8; }                       /* blue   */
/* Only the orange pill flips to ink text. Measured against white at pill size:
   green 5.37:1, blue 6.44:1, ink 19.17:1 and grey 5.05:1 all clear AA, but
   orange is 3.19:1 and fails; ink on that orange is 6.00:1. The other four keep
   white because ink would fail on every one of them. */
.mm-pill-sale     { background-color: var(--mm-color-accent); color: var(--mm-color-ink); } /* orange */
.mm-pill-standard { background-color: var(--mm-color-ink); }           /* ink    */
.mm-pill-eto      { background-color: #6b6f76; }                       /* grey   */

/* On dark sections the ink pill would vanish — invert it. */
.mm-section--dark .mm-pill-standard,
.mm-hero--dark .mm-pill-standard {
	background-color: var(--mm-color-paper);
	color: var(--mm-color-ink);
}

/* When pills are converted to <a> elements by the pills-clickable script */
a.mm-pill {
	text-decoration: none;
	cursor: pointer;
}
a.mm-pill:hover {
	opacity: 0.8;
}

/* Cranetainer model headings carry their pills inline. */
.mm-models h5 {
	margin-top: 1.4em;
	margin-bottom: 0.4em;
}

/* ==========================================================================
   Menu hover = brand orange (2026-06-23). GeneratePress's nav rules colour
   hover / focus / current items with var(--accent), and GP's default --accent
   is blue (#1e73be). Re-point --accent to the brand accent *scoped to the nav*
   so every menu link — header top-level, mega-menu sub-items and the current
   item — highlights orange instead of blue. Inheritance from .main-navigation
   beats the :root blue, so no order/specificity fight or !important needed.
   ========================================================================== */
.main-navigation {
	--accent: var(--mm-color-accent);
}

/* ==========================================================================
   Careers — collapsible vacancy adverts (.mm-vacancy) + apply CTA (.mm-apply)
   (round 16, 2026-06-24)
   ========================================================================== */
/* Container for all vacancies — sits at the same width as the surrounding text. */
.mm-vacancies {
	width: 100%;
}

.mm-vacancy {
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 0;
	margin: 0 0 0.5em;
	padding: 0;
	background: var(--mm-color-paper);
}
.mm-vacancy:first-child { border-radius: 3px 3px 0 0; }
.mm-vacancy:last-child  { border-radius: 0 0 3px 3px; margin-bottom: 1.5em; }
.mm-vacancy summary {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 0.5em 0.8em;
	padding: 0.85em 1.25em;
	cursor: pointer;
	font-family: var(--mm-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--mm-color-ink);
	list-style: none;
	white-space: nowrap;
	overflow: hidden;
}
.mm-vacancy summary::-webkit-details-marker { display: none; }
/* Role title — fixed min-width so all rows align */
.mm-vacancy summary b,
.mm-vacancy summary strong {
	display: inline-block;
	min-width: 13em;
	flex-shrink: 0;
	font-weight: 700;
}
/* Muted location/type string — push to the right, don't wrap */
.mm-vacancy summary .muted {
	margin-left: auto;
	flex-shrink: 0;
	white-space: nowrap;
	font-weight: 400;
	font-size: 0.88em;
	color: #666;
}
.mm-vacancy summary::after {
	content: '+';
	font-size: 1.3em;
	font-weight: 300;
	color: var(--mm-color-accent);
	flex-shrink: 0;
	line-height: 1;
	margin-left: 0.5em;
}
.mm-vacancy[open] {
	border-color: var(--mm-color-accent);
}
.mm-vacancy[open] > summary {
	border-bottom: 1px solid rgba(0,0,0,.1);
	margin-bottom: 1.25em;
}
.mm-vacancy[open] > summary::after {
	content: '×';
}
.mm-vacancy > :not(summary) {
	padding: 0 1.25em;
}
.mm-vacancy > p,
.mm-vacancy > ul,
.mm-vacancy > h3,
.mm-vacancy > h4 {
	padding-left: 1.25em;
	padding-right: 1.25em;
}
.mm-vacancy ul { margin-left: 1em; }

/* Apply CTA button — matches the site's standard .wp-block-button__link shape */
.mm-apply {
	--mm-chamfer: 14px;
	display: inline-block;
	margin: 0.8em 0 1.4em;
	padding: 0.75em 1.6em;
	background-color: var(--mm-color-accent);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mm-chamfer) 100%, 0 calc(100% - var(--mm-chamfer)));
	transition: background-color 120ms linear;
}
.mm-apply:hover,
.mm-apply:focus {
	background-color: var(--mm-color-accent-hover);
	color: var(--mm-color-ink);
}

/* ==========================================================================
   Footer — trademark line (.mm-footer-trademark)
   (round 16, 2026-06-24)
   ========================================================================== */
.mm-footer-trademark {
	text-align: center;
	font-family: var(--mm-font-body);
	font-size: 0.72rem;
	color: rgba(255,255,255,.45);
	letter-spacing: 0.03em;
	padding: 0.6em 1rem 1rem;
	margin-top: 0.4em;
}
.mm-footer-trademark a {
	color: rgba(255,255,255,.55);
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.2);
}
.mm-footer-trademark a:hover { color: #fff; }

/* ==========================================================================
   Complianz cookie consent banner — brand styling
   (added 2026-08-11, GDPR/UK-GDPR configuration)

   Complianz (free) writes its own generated stylesheet to
   /wp-content/uploads/complianz/css/banner-{id}-{type}.css on every save,
   and re-enqueues it after this stylesheet. Rather than fight load order
   with !important, we re-declare its CSS custom properties scoped to the
   banner's own container (#cmplz-cookiebanner-container / #cmplz-manage-
   consent). Custom properties set on a specific element always win over
   an ancestor :root declaration, however the two stylesheets are ordered
   — so this survives every time Complianz regenerates its CSS file.

   Design intent: restrained, square-ish corners, a genuine two-button
   choice (Accept / Deny) of identical size, weight and boldness — no
   accept-styled-as-primary-with-a-ghost-reject pattern. Brand orange is
   used only on the Accept button's solid fill (white text on it, matching
   every other CTA on this site), never as small body-size text — the
   banner's own message/links stay ink-on-paper for contrast.
   ========================================================================== */
#cmplz-cookiebanner-container,
#cmplz-manage-consent {
	--cmplz_banner_background_color: var(--mm-color-paper);
	--cmplz_banner_border_color: var(--mm-color-ink);
	--cmplz_banner_border_width: 1px 1px 1px 1px;
	--cmplz_banner_border_radius: 2px 2px 2px 2px;
	--cmplz_banner_margin: 10px;

	--cmplz_text_color: var(--mm-color-ink);
	--cmplz_hyperlink_color: var(--mm-color-ink);
	--cmplz_title_font_size: 1rem;
	--cmplz_text_font_size: 0.92rem;
	--cmplz_link_font_size: 0.82rem;
	--cmplz_category_body_font_size: 0.85rem;

	/* Accept — solid orange with ink text, matching the site CTA. The whole site
	   moved from white-on-orange (3.19:1, below AA) to ink-on-orange (6.00:1)
	   on 2026-08-11, so this is the shared convention, not an exception. */
	--cmplz_button_accept_background_color: var(--mm-color-accent);
	--cmplz_button_accept_border_color: var(--mm-color-accent);
	--cmplz_button_accept_text_color: var(--mm-color-ink);

	/* Deny — equally solid, same size and weight, ink instead of orange. This is a
	   genuine, equally-easy refusal, not a de-emphasised text link. */
	--cmplz_button_deny_background_color: var(--mm-color-ink);
	--cmplz_button_deny_border_color: var(--mm-color-ink);
	--cmplz_button_deny_text_color: var(--mm-color-paper);

	/* View preferences / manage options — tertiary, outlined, lower weight than the two primary choices */
	--cmplz_button_settings_background_color: var(--mm-color-paper);
	--cmplz_button_settings_border_color: var(--mm-color-ink);
	--cmplz_button_settings_text_color: var(--mm-color-ink);

	--cmplz_button_border_radius: 2px 2px 2px 2px;
	--cmplz_button_font_size: 0.9rem;

	--cmplz_category_header_always_active_color: var(--mm-color-ink-muted);
	--cmplz_category_header_title_font_size: 0.85rem;
	--cmplz_category_header_active_font_size: 0.72rem;
	--cmplz_slider_active_color: var(--mm-color-accent);
	--cmplz_slider_inactive_color: #c7c5c0;
	--cmplz_slider_bullet_color: var(--mm-color-paper);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--mm-font-body);
	/* Subtle shadow only — the plugin default is a heavy double drop-shadow */
	box-shadow: 0 2px 16px rgba(14, 15, 18, 0.14);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover {
	/* cancel the plugin's default shadow-growth-on-hover; restraint over flourish */
	box-shadow: 0 2px 16px rgba(14, 15, 18, 0.14);
	transition-duration: 0s;
}

#cmplz-cookiebanner-container .cmplz-title {
	font-family: var(--mm-font-display);
	font-weight: 600;
}

/* Buttons carry the signature MintMech CTA shape: rectangular with the
   bottom-left corner cut, using the same --mm-chamfer and the same clip-path
   polygon as body .wp-block-button__link. Complianz sets a border-radius from
   its own settings, so that is zeroed first — a radius and a chamfer on the
   same element fight each other and the corner reads as a mistake.

   The border is dropped to 0 and folded into the padding, because clip-path
   slices straight through a border and would leave the cut edge unstroked. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
	--mm-chamfer: 14px;
	font-family: var(--mm-font-body);
	font-weight: 600;
	border: 0;
	border-radius: 0;
	padding: 0.75em 1.6em;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mm-chamfer) 100%, 0 calc(100% - var(--mm-chamfer)));
	transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}

/* The banner is compact, so the two secondary buttons take a slightly smaller
   chamfer to stay in proportion — same shape language, scaled. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	--mm-chamfer: 10px;
}

/* clip-path removes the element from the normal outline box, so a focus ring
   drawn inside it would be sliced off. Keep it outside. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:focus-visible {
	outline: 2px solid var(--mm-color-ink);
	outline-offset: 2px;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible {
	background-color: var(--mm-color-accent-hover);
	border-color: var(--mm-color-accent-hover);
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:focus-visible {
	background-color: #26272b;
	border-color: #26272b;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus-visible,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus-visible {
	background-color: #f2f1ee;
}

#cmplz-cookiebanner-container .cmplz-links .cmplz-link {
	text-decoration: underline;
}
#cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover {
	color: var(--mm-color-accent-hover);
}

#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--mm-font-body);
	font-weight: 600;
	font-size: 0.82rem;
}

/* ==========================================================================
   Fluent Forms — brand skin (2026-08-11)

   Fluent Forms ships its own stylesheet with a blue submit button, rounded
   corners and the system font stack. Left alone it looks like a plugin bolted
   onto the page rather than part of the site. This restyles the parts that
   show, using the same tokens as everything else, so the enquiry form reads as
   MintMech's rather than Fluent Forms'.

   Only the plugin's visual defaults are overridden — no layout or behaviour is
   touched, so the form keeps working exactly as built.
   ========================================================================== */

/* Fluent Forms themes itself through its own custom properties, so repoint
   those at the brand tokens rather than fighting each rule individually. This
   carries the accent through the submit button, the tooltip icon and anything
   else the plugin colours from `primary`. */
.fluentform {
	--fluentform-primary: var(--mm-color-accent);
	--fluentform-secondary: var(--mm-color-ink-muted);
}

/* The variable handles the fill, but the plugin ALSO prints a hard-coded
   `color: #fff` in an inline <style> block that loads after this stylesheet,
   at selector `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)`
   — specificity (0,3,1). Equal specificity plus later source order means it
   wins, so the selectors below add one element to reach (0,3,2) and take it
   back. That is why `form` appears in them; it is load-bearing, not noise.
   Keyed off the wrapper class rather than the form ID, so it survives the
   form being rebuilt with a new ID. */
.fluentform form .ff-btn-submit,
.fluentform form .ff-btn.ff-btn-submit,
.fluentform form .ff-btn-submit:not(.ff_btn_no_style) {
	--mm-chamfer: 14px;
	background: var(--mm-color-accent);
	background-color: var(--mm-color-accent);
	color: var(--mm-color-ink);
	font-family: var(--mm-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.25;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0.75em 1.6em;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mm-chamfer) 100%, 0 calc(100% - var(--mm-chamfer)));
	transition: background-color 120ms linear;
}

.fluentform form .ff-btn-submit:hover,
.fluentform form .ff-btn-submit:focus,
.fluentform form .ff-btn.ff-btn-submit:hover,
.fluentform form .ff-btn.ff-btn-submit:focus {
	background: var(--mm-color-accent-hover);
	background-color: var(--mm-color-accent-hover);
	color: var(--mm-color-ink);
}

/* The text colour needs one more step than the rules above.
   Plugin rule:  form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)  = (0,3,1)
   Rules above:  .fluentform form .ff-btn-submit:not(...)                 = (0,3,1)
   Equal specificity, and the plugin's inline <style> loads later, so it wins the
   tie. Prefixing `body` adds an element — (0,3,2) — which breaks the tie on the
   third component without resorting to !important.

   Ink rather than white: white on this orange is 3.19:1 and fails WCAG AA;
   ink is 6.00:1. Same rule as every other CTA on the site. */
body .fluentform form .ff-btn-submit,
body .fluentform form .ff-btn-submit:not(.ff_btn_no_style),
body .fluentform form .ff-btn-submit:not(.ff_btn_no_style):hover,
body .fluentform form .ff-btn-submit:not(.ff_btn_no_style):focus {
	color: var(--mm-color-ink);
}

/* clip-path would slice an inset focus ring off, so keep it outside. */
.fluentform form .ff-btn-submit:focus-visible {
	outline: 2px solid var(--mm-color-ink);
	outline-offset: 2px;
}

/* Fields — square corners and brand typography, to match the rest of the site. */
.fluentform .ff-el-form-control {
	font-family: var(--mm-font-body);
	border-radius: 0;
	border: 1px solid #d8d6d0;
	background-color: var(--mm-color-paper);
	color: var(--mm-color-ink);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--mm-color-ink);
	outline: 2px solid var(--mm-color-accent);
	outline-offset: 1px;
	box-shadow: none;
}

.fluentform .ff-el-input--label label {
	font-family: var(--mm-font-body);
	font-weight: 600;
	color: var(--mm-color-ink);
}

/* The required asterisk and the help tooltip both ship in Fluent Forms' blue.
   Recolour to the brand: asterisk uses the darker accent shade because it sits
   on paper at small size, where the bright accent is only ~3:1. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--mm-color-accent-ink);
}

/* Same specificity story as the button — the plugin's own rule for this is
   (0,2,1), so `form` is added to reach (0,2,2). Muted ink rather than the
   accent: it is a small help icon, and the bright orange is only ~3:1 on
   paper at that size. */
.fluentform form .ff-el-tooltip,
.fluentform form .ff-el-tooltip svg {
	color: var(--mm-color-ink-muted);
	fill: var(--mm-color-ink-muted);
}

/* Validation messages — brand-consistent, and readable at small size. */
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	font-family: var(--mm-font-body);
	color: var(--mm-color-accent-ink);
}

/* The muted promise line beneath the button. */
.mm-form-note {
	font-family: var(--mm-font-body);
	font-size: 0.85rem;
	color: var(--mm-color-ink-muted);
	margin-top: 0.9em;
}

/* ==========================================================================
   404 — page not found.

   The theme default was GeneratePress's "Oops! That page can't be found."
   above a search box. This is the same page laid out as a set of routes: the
   five hubs, then a way to reach a person. Styled from the existing tokens and
   list device rather than inventing a one-off look — the marked list, kicker
   and accent rule are the same ones every page uses.
   ========================================================================= */
.mm-404 {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 6rem) 20px clamp(4rem, 9vw, 7rem);
}

.mm-404__title {
	margin: 0 0 0.5em;
	font-family: var(--mm-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	color: var(--mm-color-ink);
}

.mm-404__lead {
	margin: 0 0 2.5rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--mm-color-ink-muted);
	max-width: 56ch;
}

.mm-404__routes {
	margin-bottom: 3rem;
}

.mm-404__ask {
	padding-top: 2.5rem;
	border-top: 1px solid rgba(14, 15, 18, 0.12);
}

.mm-404__ask-heading {
	margin: 0 0 0.5em;
	font-family: var(--mm-font-display);
	font-size: 1.4rem;
	color: var(--mm-color-ink);
}

.mm-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
	margin-top: 1.5rem;
}

/* The two actions sit side by side as a pair, so the Call button takes the
   Contact button's metrics here - same type size, padding and chamfer, hence
   the same height (it was 31px beside 51px). Scoped to this row: everywhere
   else .mm-ghost-button is deliberately the smaller, secondary size.
   (Jack, 2026-10-08.) */
.mm-404__actions .mm-ghost-button {
	--mm-chamfer: 14px;
	display: inline-flex;
	align-items: center;
	padding: 0.75em 1.6em;
	font-size: inherit;
	line-height: inherit;
}

/* The search field stays, but as the last resort rather than the only offer. */
.mm-404__search {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(14, 15, 18, 0.12);
}

.mm-404__search .search-field {
	max-width: 22rem;
}

/* ==========================================================================
   Mega-menu — keyboard access.

   GeneratePress hides a closed sub-menu by parking it at left:-99999px with
   height:0 and overflow:hidden, which also takes its links out of the tab
   order. The mega-panel rules above override every one of those properties
   (left:0; right:0; max-height; overflow:hidden auto) so the panel can span the
   header — which quietly put all 127 sub-menu links back on screen at opacity 0
   and back in the tab order. A keyboard user tabbing from the logo had to pass
   through 127 links they could not see before reaching the page.

   visibility:hidden removes a subtree from the tab order without moving it, so
   it restores the intent without touching the layout. :focus-within then opens
   the panel when a keyboard user tabs to its parent — previously the panel only
   ever opened on hover, so the menu could not be operated from the keyboard at
   all.

   Scoped to :not(.toggled): the mobile accordion has no hover state and its
   links must stay reachable.
   ========================================================================== */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega > .sub-menu {
	visibility: hidden;
}

/* Selector shape mirrors the closed rule above, so the open state wins on
   specificity rather than on source order alone. */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega:hover > .sub-menu,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega.sfHover > .sub-menu,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	height: auto;
	overflow: hidden auto;
}

/* The open-state geometry has to apply on focus too, or a tabbed-to panel
   appears at the closed position. Mirrors the :hover/.sfHover rules above. */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega:focus-within > .sub-menu {
	left: 0;
	right: 0;
	transform: none;
}

.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-about:focus-within > .sub-menu,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-insights:focus-within > .sub-menu {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	max-height: none !important;
	overflow: visible !important;
}

.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega:focus-within .sub-menu a {
	pointer-events: auto;
}

/* A visible focus ring everywhere, not only in the menu. The browser default is
   suppressed by the button and link resets, and "where am I" is the whole of
   keyboard navigation. :focus-visible so it never shows for a mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--mm-color-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------
   Section heading scale — one system sitewide
   ------------------------------------------------------------------------
   Decision of 2026-08-18. Replaces the .mm-h-section / .mm-h-sub pinning that
   held the promoted headings at their pre-promotion size: those classes are
   gone and the sizes live on the elements instead, so every section heading on
   the site is the same size regardless of how it got to be an h2.

   GeneratePress ships h2 35px / h3 29px / h4 24px. 29 and 24 keep the promoted
   headings exactly where they were and bring the rest into line with them.

   h3 IS SET DELIBERATELY, not just h2. Left alone it inherits GeneratePress's
   29px, which is identical to the h2 above — so the four Cranetainer model
   sub-headings, and the seven other genuine h3s, would render the same size as
   the sections that contain them and the hierarchy just fixed in the markup
   would be invisible on the page. A heading scale with two levels the same size
   is not one system.

   WHAT THIS DOES NOT REACH, and it is not an oversight. 19 h2s across 7 hub
   pages — home, capabilities, industries, insights, how-we-work,
   design-approach and the case-studies index — carry the block editor's
   `has-x-large-font-size` preset class and render at 40px. WordPress emits
   preset font-size classes with `!important`, so an element rule cannot touch
   them, and forcing it would need `!important` of our own. That is deliberately
   not done: those sizes were set per block in the editor, and overriding them
   in the stylesheet would take a control away from whoever is editing the page
   (CLAUDE.md §6 — maintainable by non-devs in the block editor). If those seven
   pages should join the 29px scale, the honest fix is to clear the preset on
   those blocks in the editor, not to out-shout it here.

   RULED ON BY JACK, 2026-08-19: LEAVE THEM. No preset clearing, no CSS
   escalation. Home and six other hub pages render h2 at 40px while the rest of
   the site renders 29px. The site is knowingly not on one scale, and that is
   accepted. This is not an oversight waiting to be tidied up - do not "fix" it. */
h2 {
	font-size: 29px;
}

h3 {
	font-size: 24px;
}

/* ------------------------------------------------------------------------
   Escape closes a mega-panel — the CSS half
   ------------------------------------------------------------------------
   The panel is opened by :focus-within (see the mega-menu rules above), which
   is what makes the menu keyboard-operable at all. Escape therefore cannot be
   implemented by removing a class in JS: menu-escape.js was removing .sfHover
   correctly — verified, the class really was gone — and the panel stayed open,
   because focus is still inside the <li> and :focus-within does not care what
   classes are on it.

   So the escaped state has to out-specify the open rule. .mm-escaped is added
   by menu-escape.js and removed the moment focus leaves the item, so this only
   ever suppresses the one panel the user pressed Escape on. Selector shape
   mirrors the open rule with one extra class, which is exactly enough.

   Everything the open rule sets has to be put back, geometry included, or the
   panel goes invisible but keeps its 127 links in the tab order — the very
   problem the visibility:hidden above was added to fix. */
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega.mm-escaped:focus-within > .sub-menu,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-about.mm-escaped:focus-within > .sub-menu,
.main-navigation:not(.toggled) .main-nav > ul > li.mm-mega-insights.mm-escaped:focus-within > .sub-menu {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	height: 0;
	overflow: hidden;
}