/*
Theme Name: Mass Gear
Theme URI: https://massgearseg.com/
Author: Mass Gear
Description: A native WordPress block theme for Mass Gear for Engineering Industries. Built on core blocks only — no page-builder plugins. Design language: machined precision, navy and gold, blueprint grids and technical mono labels.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: massgears
Tags: block-theme, full-site-editing, business, industrial, one-column, wide-blocks, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, template-editing, translation-ready, accessibility-ready
*/

/* =========================================================================
   Mass Gear — supplementary layer
   theme.json owns the tokens. This file owns motion, texture and the
   composite components that block supports cannot express.
   ========================================================================= */

/* ---------- 1. Foundations ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	overflow-x: clip;
}

::selection { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--navy-deep); }

:where(a, button, .wp-block-button__link, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Skip link */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--navy-deep);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 1rem 1.5rem;
	z-index: 999999;
}

/* Numerals: tabular everywhere they carry meaning */
.mg-stat__value, .mg-index__num, .mg-spec td, .mg-spec th, .mg-meta {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Header, main and footer each carry their own background and padding, so
   WordPress's default gap between the top-level site blocks has nothing to
   space out — it only exposes the body colour, as a white strip under the
   sticky bar and another above the footer. */
.wp-site-blocks > * { margin-block-start: 0; }

/* ---------- 2. Texture: the blueprint grid ---------- */

.mg-blueprint { position: relative; isolation: isolate; }
.mg-blueprint::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--mg-grid, rgba(0,45,76,.08)) 1px, transparent 1px),
		linear-gradient(to bottom, var(--mg-grid, rgba(0,45,76,.08)) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: center;
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
	        mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}
.mg-blueprint.has-navy-background-color::before,
.mg-blueprint.has-navy-deep-background-color::before,
.mg-blueprint.has-navy-fade-gradient-background::before { --mg-grid: rgba(255,255,255,.075); }

/* The header carries the same grid as the footer, but the bar is short
   and pale: a full-size 72px grid would only show one or two lines. A
   tighter cell and a wider fade keep it as texture rather than pattern. */
.mg-header.mg-blueprint::before {
	background-size: 44px 44px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	opacity: .85;
}

/* Once the bar goes translucent and blurred, the grid would smear through
   the page behind it, so it steps back. */
.mg-headerbar.is-stuck .mg-header.mg-blueprint::before { opacity: .5; }

/* Knurled edge — a machined band used as a section divider */
.mg-knurl {
	height: 10px;
	width: 100%;
	background-image: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--gold) 0 2px,
		transparent 2px 7px
	);
	opacity: .85;
}

/* ---------- 3. Eyebrow / technical label ---------- */

.mg-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wp--preset--color--gold-deep);
	margin-block-end: var(--wp--preset--spacing--20);
}
.mg-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--gold);
}
.mg-eyebrow.is-centered { justify-content: center; }
.has-navy-background-color .mg-eyebrow,
.has-navy-deep-background-color .mg-eyebrow,
.has-navy-fade-gradient-background .mg-eyebrow,
.mg-hero .mg-eyebrow { color: var(--wp--preset--color--gold-bright); }

/* Small technical label. Carries the look that used to sit on <h6>, so
   the markup can use the heading level the document outline actually
   needs instead of picking a level for its typography. */
.mg-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--gold-deep);
	margin-block: 0;
}
.has-navy-background-color .mg-label,
.has-navy-deep-background-color .mg-label,
.has-navy-fade-gradient-background .mg-label,
.wp-block-cover .mg-label { color: var(--wp--preset--color--gold); }

/* ---------- 4. Headline accent ---------- */

.mg-accent { color: var(--wp--preset--color--gold); }

/* A hairline that sits under a section heading */
.mg-underline { position: relative; padding-block-end: 0.6em; }
.mg-underline::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 64px; height: 3px;
	background: var(--wp--preset--color--gold);
}
.has-text-align-center .mg-underline::after,
.mg-underline.is-centered::after { left: 50%; transform: translateX(-50%); }

/* ---------- 5. Hero ---------- */

.mg-hero { position: relative; overflow: clip; }

/* Inline highlight: core's colour format keeps the <mark> element, and a
   browser's yellow default would fight the brand palette. */
mark.has-inline-color { background-color: transparent; }


.mg-hero .wp-block-cover__video-background,
.mg-hero .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* Corner registration ticks — a drafting-table detail */
.mg-ticks::before, .mg-ticks::after {
	content: "";
	position: absolute;
	width: 34px; height: 34px;
	border: 1px solid var(--wp--preset--color--gold);
	pointer-events: none;
	opacity: .8;
}
.mg-ticks::before { top: 24px; left: 24px; border-right: 0; border-bottom: 0; }
.mg-ticks::after  { bottom: 24px; right: 24px; border-left: 0; border-top: 0; }

/* Scroll cue */
.mg-scrollcue {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.72);
}
.mg-scrollcue::after {
	content: "";
	width: 1px; height: 40px;
	background: linear-gradient(180deg, var(--wp--preset--color--gold), transparent);
	animation: mg-drop 2.4s var(--wp--custom--ease) infinite;
	transform-origin: top;
}
@keyframes mg-drop { 0%,100% { transform: scaleY(.35); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* ---------- 6. Cards ---------- */

.mg-card {
	position: relative;
	height: 100%;
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--rule);
	border-radius: 3px;
	overflow: clip;
	transition: transform var(--wp--custom--speed) var(--wp--custom--ease),
	            box-shadow var(--wp--custom--speed) var(--wp--custom--ease),
	            border-color var(--wp--custom--speed) var(--wp--custom--ease);
}
.mg-card:hover, .mg-card:focus-within {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent);
	box-shadow: var(--wp--preset--shadow--lift);
}
/* the gold rule that draws itself across the top on hover */
.mg-card::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 3px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms var(--wp--custom--ease);
	z-index: 2;
}
.mg-card:hover::after, .mg-card:focus-within::after { transform: scaleX(1); }

/* Product card: image zooms, label slides */
.mg-card--product .wp-block-image { overflow: clip; margin: 0; }
.mg-card--product .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 600ms var(--wp--custom--ease), filter 400ms var(--wp--custom--ease);
	filter: saturate(.92);
}
.mg-card--product:hover .wp-block-image img { transform: scale(1.06); filter: saturate(1.05); }

.mg-card__body { padding: var(--wp--preset--spacing--30); }
.mg-card__body > :first-child { margin-block-start: 0; }
.mg-card__body > :last-child  { margin-block-end: 0; }

/* The gear pages' enquiry card is an aside, not a grid cell: it should
   hug its content and follow the reader down the article. */
.mg-card--aside { height: auto; }
@media (min-width: 782px) {
	.mg-card--aside {
		position: sticky;
		top: calc(var(--mg-header-h, 84px) + 1.5rem);
	}
}

/* Whole-card click target, built out of the "read more" link so the
   markup stays plain core blocks. The pseudo-element resolves against
   .mg-card, which is the nearest positioned ancestor. */
.mg-card .mg-more a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.mg-card .mg-more a { color: inherit; }

/* Arrow affordance on card links */
.mg-more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}
.mg-more::after {
	content: "→";
	transition: transform var(--wp--custom--speed) var(--wp--custom--ease);
}
.mg-card:hover .mg-more { color: var(--wp--preset--color--gold-deep); }
.mg-card:hover .mg-more::after { transform: translateX(5px); }

/* Button variations registered in functions.php */

.wp-block-button.is-style-mg-ghost > .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}
.wp-block-button.is-style-mg-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-mg-ghost > .wp-block-button__link:focus {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
}

.wp-block-button.is-style-mg-quiet > .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: inherit;
	padding-inline: 0;
	padding-block: .4em;
	border-block-end: 2px solid var(--wp--preset--color--gold);
	border-radius: 0;
}
.wp-block-button.is-style-mg-quiet > .wp-block-button__link:hover,
.wp-block-button.is-style-mg-quiet > .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--gold);
	border-block-end-color: currentColor;
}

/* Knurled edge as a group top border */
.is-style-mg-knurl-top { position: relative; }
.is-style-mg-knurl-top::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 8px;
	background-image: repeating-linear-gradient(90deg, var(--wp--preset--color--gold) 0 2px, transparent 2px 7px);
}

/* ---------- 7. Capability list (numbered index) ---------- */

.mg-index { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: mgidx; }
.mg-index li {
	counter-increment: mgidx;
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: var(--wp--preset--spacing--20);
	align-items: baseline;
	padding-block: 1.1rem;
	border-block-end: var(--wp--custom--rule);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	transition: color var(--wp--custom--speed) var(--wp--custom--ease),
	            padding-inline-start var(--wp--custom--speed) var(--wp--custom--ease);
}
.mg-index li::before {
	content: counter(mgidx, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--wp--preset--color--gold);
}
.mg-index li:hover { color: var(--wp--preset--color--gold-deep); padding-inline-start: .5rem; }

/* On the dark sections the hairline and the hover tint both have to flip. */
.has-navy-background-color .mg-index li,
.has-navy-deep-background-color .mg-index li,
.has-navy-fade-gradient-background .mg-index li,
.wp-block-cover .mg-index li { border-block-end: var(--wp--custom--rule-dark); }

.has-navy-background-color .mg-index li:hover,
.has-navy-deep-background-color .mg-index li:hover,
.has-navy-fade-gradient-background .mg-index li:hover,
.wp-block-cover .mg-index li:hover { color: var(--wp--preset--color--gold-bright); }

/* ---------- 8. Stats ---------- */

.mg-stat { text-align: center; }
.mg-stat__value {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--gold);
}
.mg-stat__label {
	display: block;
	margin-block-start: .75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel-light);
}

/* ---------- 9. Client marquee ---------- */

.mg-marquee {
	--mg-marquee-duration: 46s;
	position: relative;
	display: flex;
	overflow: hidden;
	gap: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mg-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-inline-end: clamp(2rem, 5vw, 4.5rem);
	animation: mg-scroll var(--mg-marquee-duration) linear infinite;
	will-change: transform;
}
.mg-marquee:hover .mg-marquee__track { animation-play-state: paused; }
@keyframes mg-scroll { from { transform: translateX(0) } to { transform: translateX(-100%) } }

.mg-client {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 190px;
	padding-inline-start: 1rem;
	border-inline-start: 2px solid color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent);
}
.mg-client__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--wp--preset--color--base);
}
.mg-client__sector {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel-light);
}

/* ---------- 10. Framed media ---------- */

.mg-frame { position: relative; }
.mg-frame img { display: block; width: 100%; height: auto; border-radius: 3px; }
.mg-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	translate: 18px 18px;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 3px;
	z-index: -1;
	pointer-events: none;
}

/* Gallery tiles */
.mg-gallery.wp-block-gallery img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 700ms var(--wp--custom--ease), filter 400ms var(--wp--custom--ease);
}
.mg-gallery.wp-block-gallery .wp-block-image { overflow: clip; border-radius: 3px; }
.mg-gallery.wp-block-gallery .wp-block-image:hover img { transform: scale(1.05); }

/* ---------- 10b. Catalogue flipbook ----------
   A two-page spread that turns like a book. The stage is empty until the
   script has a first rendered page to measure, so it holds a placeholder
   height and only reveals once ready; if anything fails, .is-failed shows
   the download link instead. */

.mg-flipbook {
	position: relative;
	outline: none;
}

.mg-flipbook__stage {
	width: 100%;
	min-height: 380px;
	margin-inline: auto;
	opacity: 0;
	transition: opacity 500ms var(--wp--custom--ease);
}
.mg-flipbook.is-ready .mg-flipbook__stage { opacity: 1; }

/* The paper itself. */
.mg-flipbook__page {
	background: var(--wp--preset--color--base);
	overflow: hidden;
}
.mg-flipbook__page canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* A spine shadow down the gutter of the open book. */
.mg-flipbook .stf__block { filter: drop-shadow(0 24px 48px rgba(0, 45, 76, 0.28)); }

.mg-flipbook__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
}

.mg-flipbook__nav {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--wp--preset--color--navy);
	background: transparent;
	border: 1px solid rgba(0, 45, 76, 0.22);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 200ms var(--wp--custom--ease),
	            border-color 200ms var(--wp--custom--ease),
	            color 200ms var(--wp--custom--ease);
}
.mg-flipbook__nav:hover,
.mg-flipbook__nav:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
}

.mg-flipbook__status {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--steel);
	font-variant-numeric: tabular-nums;
	min-width: 5ch;
	text-align: center;
}

.mg-flipbook__fallback { margin-block-start: var(--wp--preset--spacing--30); text-align: center; }
.mg-flipbook.is-failed .mg-flipbook__stage,
.mg-flipbook.is-failed .mg-flipbook__bar { display: none; }

/* Arrows follow the reading direction. */
[dir="rtl"] .mg-flipbook__bar { flex-direction: row-reverse; }

/* ---------- 11. Spec table ---------- */

.mg-spec table { border-collapse: collapse; width: 100%; }
.mg-spec th, .mg-spec td {
	text-align: start;
	padding: .95rem 1rem;
	border-block-end: var(--wp--custom--rule);
	font-size: .9375rem;
}
.mg-spec th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	width: 42%;
}
.mg-spec tr:hover td { background: var(--wp--preset--color--paper); }

/* ---------- 12. Header — the instrument rail ---------- */

/*
 * Three states, driven by theme.js:
 *   rest    transparent over the hero, full-size mark
 *   stuck   compressed navy bar, blurred, gold scroll-progress hairline
 *   hidden  slid away while the reader scrolls down; returns on scroll up
 * --mg-progress (0..1) is the document scroll position.
 */

/* Position lives on the template-part wrapper, not the group inside it.
   `position: sticky` only travels within its parent's box, and the group's
   parent <header> is exactly as tall as the header — so sticking it there
   pins it to nothing and it scrolls straight off the top. */
.mg-headerbar {
	--mg-progress: 0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.mg-header {
	position: relative; /* containing block for the Gears panel */
	padding-block: var(--wp--preset--spacing--20);
	transition: background-color 300ms var(--wp--custom--ease),
	            box-shadow 300ms var(--wp--custom--ease),
	            padding-block 300ms var(--wp--custom--ease);
}


/* Scroll-progress hairline along the bottom edge of the stuck bar. */
.mg-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold-deep), var(--wp--preset--color--gold-bright));
	transform: scaleX(var(--mg-progress));
	transform-origin: left;
	opacity: 0;
	transition: opacity 300ms var(--wp--custom--ease);
	pointer-events: none;
}
.mg-headerbar.is-stuck .mg-header::after { opacity: 1; }

.mg-headerbar.is-stuck .mg-header {
	padding-block: 0.55rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	        backdrop-filter: saturate(180%) blur(16px);
	box-shadow: inset 0 -1px 0 rgba(0,45,76,.10), 0 16px 40px -30px rgba(0,45,76,.55);
}

/* A hairline keeps the white bar from dissolving into a white section. */
.mg-header { box-shadow: inset 0 -1px 0 rgba(0,45,76,.10); }

/* The mark is a gear, so let it turn with the page. The header and footer
   both sit on navy, where the two-tone brand mark loses its navy half, so
   they use the paper-and-gold variant shipped with the theme. */
.mg-logo { margin: 0; line-height: 0; }
.mg-logo img {
	display: block;
	height: auto;
	background: var(--wp--preset--color--cream);
	border-radius: 50%;
	padding: 5px;
	box-shadow: inset 0 0 0 1px rgba(0, 45, 76, 0.10);
	transition: width 320ms var(--wp--custom--ease);
	transform-origin: center;
}
.mg-headerbar.is-stuck .mg-header .mg-logo img { width: 86px !important; }

@media (prefers-reduced-motion: no-preference) {
	.mg-headerbar.is-stuck .mg-header .mg-logo img {
		transform: rotate(calc(var(--mg-progress) * 120deg));
	}
}

/* Social marks sit quietly next to the quote button. */
.mg-header__social { gap: 0.35rem !important; }
.mg-header__social .wp-block-social-link { margin: 0; }
.mg-header__social .wp-social-link a { padding: 6px; opacity: .75; transition: opacity 200ms var(--wp--custom--ease), transform 200ms var(--wp--custom--ease); }
.mg-header__social .wp-social-link a:hover { opacity: 1; transform: translateY(-2px); }

/* Nav now sits beside the logo, so the underline should hug the label. */
.mg-header__lead { min-width: 0; }
.mg-header__lead .wp-block-navigation { flex: 0 1 auto; }

/* ---- Top-level links ---- */

.mg-header .wp-block-navigation a { position: relative; padding-block: .35rem; }

.mg-header .wp-block-navigation > ul > li > .wp-block-navigation-item__content::after,
.mg-header .wp-block-navigation > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 280ms var(--wp--custom--ease);
}
.mg-header .wp-block-navigation > ul > li > .wp-block-navigation-item__content:hover::after,
.mg-header .wp-block-navigation > ul > li:focus-within > .wp-block-navigation-item__content::after,
.mg-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ---- The Gears panel ----
   Fourteen products in a single dropped column is a list to scroll, not a
   menu to read. Laid out as a hairline grid instead, anchored to the
   item's right edge so it can never run off the viewport.

   Scoped above the navigation block's own overlay breakpoint: below it the
   same element becomes the nested list inside the full-screen menu, where
   a fixed panel width would overflow the screen.

   The width needs !important because core sizes the open submenu with
   `width: auto; min-width: 200px` on a :hover selector of equal
   specificity, which collapses the 1fr columns to 45px. */

@media (min-width: 601px) {

	/* Anchor the panel to the header, not to the menu item. Core makes the
	   parent <li> the containing block, and right-aligning to a menu item
	   that sits well left of the edge pushes the panel off screen at
	   narrower desktop widths. */
	.mg-header .wp-block-navigation,
	.mg-header .wp-block-navigation__responsive-dialog,
	.mg-header .wp-block-navigation__responsive-container-content,
	.mg-header .wp-block-navigation__container,
	.mg-header .wp-block-navigation .has-child { position: static; }

	/* Core positions this one with a three-class selector of its own
	   (`…__responsive-container:not(.hidden-by-default):not(.is-menu-open)`),
	   so the override has to out-specify it rather than merely repeat it.
	   Left alone below the breakpoint, where it is the overlay. */
	.mg-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		position: static;
	}

	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container {
		--mg-panel-cols: 3;
		/* The nav sits beside the logo, so the panel opens from the same
		   edge: aligned to the constrained header content, falling back to
		   the page gutter once the viewport is narrower. Anchoring to the
		   opposite edge left it opening across the page from its trigger. */
		right: auto;
		left: max(var(--wp--custom--gutter), calc((100vw - 1400px) / 2));
		top: 100%;
		width: min(790px, calc(100vw - 2rem)) !important;
		min-width: 0 !important;
		max-width: none;
		display: grid;
		grid-template-columns: repeat(var(--mg-panel-cols), minmax(0, 1fr));
		gap: 0 1.25rem;
		padding: var(--wp--preset--spacing--30);
		margin-block-start: 0.3rem;
		border: 1px solid rgba(255,255,255,.14);
		border-radius: 3px;
		background: var(--wp--preset--color--navy-deep) !important;
		box-shadow: 0 28px 60px -30px rgba(0,0,0,.95);
		counter-reset: mgnav;
	}

	/* Hover bridge. The panel is positioned against the header rather than
	   against the menu item, so the pointer has to travel across header
	   padding that is not inside the <li>. Without something in the
	   submenu's own box spanning that gap, the li's mouseleave fires and
	   the panel closes before it can be reached. The submenu is a DOM
	   descendant of the li, so its pseudo-element counts as the li for
	   hit-testing — and it is inert while the panel is hidden. */
	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 100%;
		height: 3.25rem;
	}

	/* Knurled edge across the top, echoing the CTA band. */
	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		inset-inline: -1px;
		top: -1px;
		height: 3px;
		background-image: repeating-linear-gradient(90deg, var(--wp--preset--color--gold) 0 2px, transparent 2px 7px);
		border-radius: 3px 3px 0 0;
	}

	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container > li {
		counter-increment: mgnav;
		border-block-end: 1px solid rgba(255,255,255,.08);
	}

	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container > li > a {
		display: flex;
		align-items: baseline;
		gap: .7rem;
		width: 100%;
		padding: .7rem .5rem;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: -0.01em;
		text-transform: none;
		line-height: 1.25;
		border-radius: 2px;
		transition: background-color 200ms var(--wp--custom--ease),
		            color 200ms var(--wp--custom--ease),
		            padding-inline-start 200ms var(--wp--custom--ease);
	}
	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container > li > a::before {
		content: counter(mgnav, decimal-leading-zero);
		flex: 0 0 auto;
		font-family: var(--wp--preset--font-family--mono);
		font-size: .6875rem;
		font-weight: 500;
		letter-spacing: .08em;
		color: var(--wp--preset--color--gold);
		opacity: .7;
	}
	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container > li > a:hover,
	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container > li > a:focus-visible {
		background: rgba(255,255,255,.06);
		color: var(--wp--preset--color--gold-bright);
		padding-inline-start: .8rem;
	}
	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container > li > a::after { display: none; }

}

@media (min-width: 601px) and (max-width: 1180px) {
	.mg-header .wp-block-navigation .wp-block-navigation__submenu-container {
		--mg-panel-cols: 2;
		width: min(540px, calc(100vw - 2rem)) !important;
	}
}

/* Between the overlay breakpoint and roughly 780px the bar carries the
   logo, five links and the quote button in too little room, and the nav
   wraps to a second row. The button is the least load-bearing of the
   three there — the hero CTAs and the floating chat button both cover it.
   Needs three classes to out-specify `.wp-block-buttons.is-layout-flex`. */
@media (min-width: 601px) and (max-width: 800px) {
	.mg-headerbar .mg-header .mg-header__cta,
	.mg-headerbar .mg-header .mg-header__social { display: none; }

	/* Tighten the run of links so the row does not wrap and double the
	   bar's height. */
	.mg-headerbar .mg-header .wp-block-navigation__container { gap: 1rem; }
	.mg-headerbar .mg-header .mg-header__lead { gap: 1.25rem; }
}

/* ---- Mobile overlay ---- */

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--navy-deep) !important;
	padding: clamp(3rem, 9vw, 4.5rem) var(--wp--custom--gutter) var(--wp--preset--spacing--40);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	counter-reset: mgmob;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content { justify-content: flex-start; }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
	counter-increment: mgmob;
	width: 100%;
	border-block-end: 1px solid rgba(255,255,255,.14);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding-block: .85rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 8vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: none;
	line-height: 1.1;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content::before {
	content: counter(mgmob, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--wp--preset--color--gold);
}
/* Close control, matched to the bordered social buttons in the footer. */
.wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.24);
	border-radius: 2px;
	color: var(--wp--preset--color--base);
	transition: background-color 200ms var(--wp--custom--ease),
	            border-color 200ms var(--wp--custom--ease),
	            color 200ms var(--wp--custom--ease);
}
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
}

/* Menu toggle gets the same treatment — but only where it belongs. Core
   hides it above the breakpoint with a single-class `display: none`, so
   setting display here unscoped would drag the hamburger onto desktop. */
@media (max-width: 600px) {
	.mg-header .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		display: grid;
		place-items: center;
		border: 1px solid rgba(0,45,76,.22);
		border-radius: 2px;
		transition: background-color 200ms var(--wp--custom--ease),
		            border-color 200ms var(--wp--custom--ease),
		            color 200ms var(--wp--custom--ease);
	}
	.mg-header .wp-block-navigation__responsive-container-open:hover {
		background: rgba(0,45,76,.06);
		border-color: var(--wp--preset--color--gold);
	}
}

/* Fourteen gear links expanded inside the overlay push everything below
   them off the screen. Core forces submenus open there and hides the
   disclosure button, so both have to be put back: show the button, and
   collapse the list until it is asked for.

   :has() keys the list off the button's own aria-expanded, which core's
   interactivity code already maintains. Where :has() is unsupported the
   list simply stays open, which is core's behaviour anyway. */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	/* No auto margin here: it resolves against the line and pushes the row
	   past its width, which wraps the button onto a line of its own. The
	   label growing is what should move the button to the edge. */
	margin-inline-start: 0;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 2px;
	color: var(--wp--preset--color--gold);
	cursor: pointer;
	transition: transform 220ms var(--wp--custom--ease),
	            border-color 220ms var(--wp--custom--ease);
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	border-color: var(--wp--preset--color--gold);
}

/* Label and toggle on one row. A two-column grid rather than flex: the
   label lands in a 1fr track that starts hard at the edge, and the button
   in an auto track beside it. Flexbox here meant fighting core's auto
   margins, which absorb free space before flex-grow or justify-content
   ever apply. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > li.has-child {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 0.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > li.has-child > .wp-block-navigation-item__content {
	grid-column: 1;
	margin-inline: 0 !important;
	min-width: 0;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > li.has-child > .wp-block-navigation__submenu-icon {
	grid-column: 2;
}
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > li.has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
}

.wp-block-navigation__responsive-container.is-menu-open
	li.has-child:has( > .wp-block-navigation-submenu__toggle[aria-expanded="false"] )
	> .wp-block-navigation__submenu-container {
	display: none !important;
}

/* Nested gear list reads as a quiet index under its parent. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-inline-start: 2.5rem;
	padding-block-end: .75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > a {
	padding-block: .4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
	color: rgba(255,255,255,.72);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li > a:hover {
	color: var(--wp--preset--color--gold-bright);
}

/* ---------- 12a. Header on small screens ----------
   The bar carries only what a phone needs: the mark, the language
   toggle, and the menu button hard against the reading edge. The quote
   button and the social marks are one tap away inside the overlay and
   repeated in the footer.

   Every rule here needs three classes: the block layout styles these are
   overriding (`.wp-block-group.is-layout-flex`,
   `.wp-block-social-links.is-layout-flex`) are themselves two-class
   selectors, so a two-class override only ties and loses on order. */

@media (max-width: 600px) {

	/* Flatten the lead group so the logo and the menu button become
	   siblings of the aside and can be ordered independently. */
	.mg-headerbar .mg-header .mg-header__lead { display: contents; }

	.mg-headerbar .mg-header .wp-block-site-logo { order: 1; }
	.mg-headerbar .mg-header .mg-header__aside   { order: 2; margin-inline-start: auto; gap: 0.75rem; }
	.mg-headerbar .mg-header .wp-block-navigation { order: 3; flex: 0 0 auto; }

	.mg-headerbar .mg-header > .wp-block-group { flex-wrap: nowrap; gap: 0.75rem; }

	/* No room for these beside the toggle. */
	.mg-headerbar .mg-header .mg-header__cta,
	.mg-headerbar .mg-header .mg-header__social { display: none; }
}

/* ---------- 12c. Hero on small screens ----------
   A landscape still cropped into a portrait viewport shows very little,
   and the desktop dim then flattens what is left into a plain dark
   block. Lift the scrim and shorten the hero so the photograph reads.

   The cover block writes min-height inline, so this has to be forced. */

.mg-hero { min-height: 100svh; }

@media (max-width: 600px) {
	.mg-hero.wp-block-cover {
		min-height: 86vh !important;
		min-height: 86svh !important;
	}
	.mg-hero > .wp-block-cover__background { opacity: 0.64; }

	/* Give the eyebrow its own line rather than a hanging rule. */
	.mg-hero .mg-eyebrow { flex-wrap: wrap; row-gap: .35rem; }
}

/* ---------- 12b. Language switcher ---------- */
/* Lives here, not in the RTL sheet: it renders on the English pages too,
   where that sheet is not loaded. */

.mg-langswitch {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
}
.mg-langswitch__sep { width: 1px; height: 14px; background: rgba(0,45,76,.25); }
.mg-langswitch__opt {
	color: color-mix(in srgb, var(--wp--preset--color--steel) 90%, transparent);
	text-decoration: none;
	padding: .35rem .15rem;
	transition: color 200ms var(--wp--custom--ease);
}
.mg-langswitch__opt:hover { color: var(--wp--preset--color--gold-deep); }
.mg-langswitch__opt.is-current { color: var(--wp--preset--color--navy); }

/* ---------- 13. Footer ---------- */

.mg-footer a { color: inherit; }
.mg-footer .wp-block-list { list-style: none; padding-inline-start: 0; }
.mg-footer .wp-block-list a { display: inline-block; padding-block: 0.1rem; }
.mg-footer .wp-block-list a:hover { color: var(--wp--preset--color--gold-bright); }
.mg-footer .mg-contactline {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .875rem;
	letter-spacing: .01em;
}
.mg-footer .mg-contactline a:hover { color: var(--wp--preset--color--gold-bright); }

.mg-social { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.mg-social a {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 2px;
	transition: all var(--wp--custom--speed) var(--wp--custom--ease);
}
.mg-social a:hover {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
	transform: translateY(-2px);
}
.mg-social svg { width: 18px; height: 18px; fill: currentColor; }

/* Floating WhatsApp / chat affordance */
.mg-chat {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.15rem;
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: var(--wp--preset--shadow--lift);
	transition: all var(--wp--custom--speed) var(--wp--custom--ease);
}
.mg-chat:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--navy-deep); transform: translateY(-3px); }
.mg-chat svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- 14. Reveal on scroll ---------- */

@media (prefers-reduced-motion: no-preference) {
	.mg-reveal > * , .mg-reveal.mg-reveal--self {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 700ms var(--wp--custom--ease), transform 700ms var(--wp--custom--ease);
	}
	.mg-reveal > :nth-child(2) { transition-delay: 70ms; }
	.mg-reveal > :nth-child(3) { transition-delay: 140ms; }
	.mg-reveal > :nth-child(4) { transition-delay: 210ms; }
	.mg-reveal > :nth-child(5) { transition-delay: 280ms; }
	.mg-reveal > :nth-child(6) { transition-delay: 350ms; }
	.mg-reveal.is-in > *, .mg-reveal.mg-reveal--self.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mg-marquee__track { animation: none; }
	.mg-scrollcue::after { animation: none; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- 15. Editorial helpers ---------- */

.mg-lede {
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	line-height: 1.6;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--steel);
}
.has-navy-background-color .mg-lede,
.has-navy-deep-background-color .mg-lede,
.has-navy-fade-gradient-background .mg-lede { color: rgba(255,255,255,.76); }

.has-navy-background-color :where(h1,h2,h3,h4,h5),
.has-navy-deep-background-color :where(h1,h2,h3,h4,h5),
.has-navy-fade-gradient-background :where(h1,h2,h3,h4,h5),
.wp-block-cover :where(h1,h2,h3,h4,h5) { color: inherit; }

/* Rules between grid children */
.mg-divided { border-block-start: var(--wp--custom--rule); }
.mg-divided-dark { border-block-start: var(--wp--custom--rule-dark); }

/* Full-bleed helper inside constrained layouts.
   WordPress's constrained layout centres every child with
   `margin-left/right: auto !important`, so escaping it needs the same
   weight — otherwise the element is centred at 100vw and overflows the
   viewport by the container's padding. */
.mg-bleed {
	width: 100vw;
	max-width: none !important;
	margin-inline: calc(50% - 50vw) !important;
}

/* ---------- 16. Forms (core blocks + WPForms fallback) ---------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="file"], textarea, select {
	width: 100%;
	padding: .85rem 1rem;
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--rule);
	border-radius: 2px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--speed) var(--wp--custom--ease),
	            box-shadow var(--wp--custom--speed) var(--wp--custom--ease);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--gold) 22%, transparent);
	outline: none;
}
label { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--steel); }

/* Enquiry form (theme-native, no form plugin) */

.mg-form { display: grid; gap: var(--wp--preset--spacing--30); }
.mg-form__row { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mg-form__field { display: grid; gap: .45rem; margin: 0; }
.mg-form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mg-form__actions { margin: 0; }

.mg-form__submit {
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 2px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .95em 1.9em;
	cursor: pointer;
	transition: background-color var(--wp--custom--speed) var(--wp--custom--ease),
	            transform var(--wp--custom--speed) var(--wp--custom--ease);
}
.mg-form__submit:hover { background: var(--wp--preset--color--gold-bright); transform: translateY(-2px); }

.mg-notice {
	margin: 0;
	padding: 1rem 1.15rem;
	border-inline-start: 3px solid;
	border-radius: 2px;
	font-size: .9375rem;
}
.mg-notice--ok  { border-color: var(--wp--preset--color--gold); background: color-mix(in srgb, var(--wp--preset--color--gold) 12%, transparent); }
.mg-notice--err { border-color: #c2410c; background: color-mix(in srgb, #c2410c 10%, transparent); }

/* ---------- 17. Responsive ---------- */

@media (max-width: 781px) {
	.mg-ticks::before, .mg-ticks::after { display: none; }
	.mg-header .mg-logo img { width: 76px !important; height: auto; }

	/* Stat rail reads as a stacked list rather than three squeezed columns. */
	.mg-hero .wp-block-columns { gap: var(--wp--preset--spacing--20); }
	.mg-frame::before { translate: 10px 10px; }
	.mg-index li { grid-template-columns: 3rem 1fr; }
	.mg-chat span { display: none; }
	.mg-chat { padding: 1rem; border-radius: 50%; }
}