/* ==========================================================================
   Global Metals USA — design system
   Industrial B2B supplier: steel navy + safety orange, generous whitespace,
   one loud accent used only for actions. System fonts, zero webfont requests.
   ========================================================================== */

:root {
	/* ---- brand ---- */
	--gmu-navy-900: #0d1926;   /* headers, footer */
	--gmu-navy-800: #142433;
	--gmu-navy-700: #1b3145;
	--gmu-steel-700: #2c4257;
	--gmu-steel-500: #3d5266;  /* secondary text on light — 8.1:1 on white */
	--gmu-steel-300: #8496a6;

	/*
	 * Warm marigold — reserved for actions, so a button is never ambiguous.
	 *
	 * Pulled from the red-leaning safety orange it started as toward the amber
	 * in the logo's wreath, which is what the owner asked for. That move costs
	 * contrast: every step toward yellow lightens the colour, and white text
	 * goes with it. White on this sits at 2.6:1, so filled controls carry NAVY
	 * text instead (6.8:1) — see --gmu-on-accent. Used as a fill, a stroke or a
	 * rule it needs no ratio at all; used as TEXT on a light ground it does,
	 * which is what --gmu-accent-ink is for.
	 */
	--gmu-accent:      #e8891c;
	--gmu-accent-dark: #cf7510;   /* hover fill */
	--gmu-accent-ink:  #9d5c08;   /* the accent AS TEXT on light — 5.3:1 on white */
	--gmu-accent-deep: #7d4805;   /* its hover — darker, not lighter */
	--gmu-accent-soft: #fdf3e6;
	--gmu-on-accent:   #0d1926;   /* text on a filled accent control — 6.8:1 */

	/*
	 * Gold, sampled from the logo's wreath and column. It carries standing —
	 * credentials, section eyebrows, rules, the years-in-business mark — and is
	 * deliberately never used on a control, so it cannot be mistaken for an
	 * action. Two tones: bright enough to read on navy, deep enough on white.
	 */
	/*
	 * Lemon, #F6DE59 — the owner's pick, replacing the gold this started as.
	 * It is the token rather than a one-off: every stroke on the site already
	 * draws from --gmu-gold — the rule under the hero, the card and gallery
	 * borders, the panel rules, the tick markers, the focus outlines and the
	 * "Shop now" fill — so setting it here moves the whole set together.
	 *
	 * The three supporting tones move WITH it, and they are not decoration. At
	 * hue 51 and 66% lightness the pick is bright enough to read on navy (13:1)
	 * and to carry dark button text (12:1), but it is 1.35:1 on white — plainly
	 * invisible as type on a light ground. --gold-deep is the tone that has to
	 * carry there, so it cannot simply be left at the old brown-gold value.
	 *
	 * That old value, #96742a, measured 4.0-4.4:1 on the site's light grounds
	 * and failed every small-text check in the contrast audit. #756910 is the
	 * same hue family as the new lemon and reads 5.6:1 on white and 5.2:1 on
	 * the surface grey, so recolouring closes those nine failures as well.
	 */
	--gmu-gold:      #f6de59;
	/* The same colour as bare channels. A dozen strokes and glows are drawn at
	   partial alpha, and rgba() cannot take a hex var — without this they stay
	   literal and drift away from the token the next time this changes. */
	--gmu-gold-rgb:  246, 222, 89;
	--gmu-gold-lite: #f9e88c;   /* type on dark  — 14.3:1 on navy */
	--gmu-gold-deep: #756910;   /* type on light —  5.6:1 on white */
	--gmu-gold-soft: #fdfae6;

	/* ---- neutrals ---- */
	/*
	 * The two greys were the pale end of this ramp: secondary text sat at 6.6:1
	 * on white and small print at 4.3:1, which is legible on a design monitor
	 * and washed out on a laptop in a workshop. Both are pulled down a step —
	 * secondary to 8.1:1, small print to 5.8:1 — while staying in the same
	 * steel-blue family, so nothing reads as a different colour, only darker.
	 * Body text was already 8.8:1 and is left alone. Every dark band overrides
	 * these with its own light values (see "Review fixes"), so darkening them
	 * cannot reach text standing on navy.
	 */
	--gmu-ink:      #14202b;
	--gmu-body:     #3d4c59;
	--gmu-muted:    #54677a;
	--gmu-line:     #dfe5ea;
	--gmu-surface:  #f5f7f9;
	--gmu-white:    #ffffff;

	/* ---- type scale (1.25 major third, fluid) ---- */
	--gmu-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gmu-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

	/*
	 * Raised one step across the board. The old scale bottomed out at 13px for
	 * captions, card meta and form labels, which is fine on a design monitor and
	 * hard work on a laptop for the people actually specifying grating. The
	 * headings above are unchanged, so only the small end moved.
	 */
	--gmu-t-xs:  0.9375rem;
	--gmu-t-sm:  1rem;
	--gmu-t-base: 1.125rem;
	--gmu-t-lg:  clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
	--gmu-t-xl:  clamp(1.375rem, 0.8vw + 1.2rem, 1.75rem);
	--gmu-t-2xl: clamp(1.75rem, 1.6vw + 1.4rem, 2.5rem);
	--gmu-t-3xl: clamp(2.125rem, 2.6vw + 1.6rem, 3.25rem);

	/* ---- spacing rhythm ---- */
	--gmu-s-1: 0.5rem;
	--gmu-s-2: 0.875rem;
	--gmu-s-3: 1.25rem;
	--gmu-s-4: 2rem;
	--gmu-s-5: 3rem;
	--gmu-s-6: 4.5rem;
	--gmu-s-7: 6.5rem;

	--gmu-radius: 4px;      /* industrial: near-square, not pill-shaped */
	--gmu-shadow: 0 1px 2px rgba(20, 32, 43, .06), 0 8px 24px rgba(20, 32, 43, .07);
	--gmu-ring:   0 0 0 3px rgba(232, 137, 28, .38);
}

/* Map Kadence's palette onto the brand so core components inherit it. */
:root {
	--global-palette1: var(--gmu-accent);
	--global-palette2: var(--gmu-accent-dark);
	--global-palette3: var(--gmu-ink);
	--global-palette4: var(--gmu-body);
	--global-palette5: var(--gmu-muted);
	--global-palette6: var(--gmu-line);
	--global-palette7: var(--gmu-surface);
	--global-palette8: #fafbfc;
	--global-palette9: var(--gmu-white);
	--global-font-family: var(--gmu-font);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	font-family: var(--gmu-font);
	font-size: var(--gmu-t-base);
	line-height: 1.65;
	color: var(--gmu-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gmu-font);
	color: var(--gmu-ink);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--gmu-t-3xl); }
h2 { font-size: var(--gmu-t-2xl); }
h3 { font-size: var(--gmu-t-xl); }
h4 { font-size: var(--gmu-t-lg); }
h5, h6 { font-size: var(--gmu-t-base); letter-spacing: 0; }

p { max-width: 68ch; }

/* Hover goes darker, not lighter. The accent is now light enough that moving
   toward it on hover would drop a link under 3:1 on white. */
a { color: var(--gmu-accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--gmu-accent-deep); }

:where(a, button, input, select, textarea):focus-visible {
	outline: none;
	box-shadow: var(--gmu-ring);
	border-radius: var(--gmu-radius);
}

/* --------------------------------------------------------------------------
   Section rhythm — the old site had zero breathing room between blocks.
   -------------------------------------------------------------------------- */

.gmu-section { padding-block: var(--gmu-s-6); }
.gmu-section--tight { padding-block: var(--gmu-s-5); }
.gmu-section--surface { background: var(--gmu-surface); }
.gmu-section--dark { background: var(--gmu-navy-900); color: #c8d4de; }
.gmu-section--dark h1,
.gmu-section--dark h2,
.gmu-section--dark h3 { color: #fff; }

.gmu-wrap {
	width: min(1200px, 100% - 2.5rem);
	margin-inline: auto;
}

/* The deep tone, not the accent itself, which is too light to read as small
   uppercase type on white. In practice the "Gold" section further down wins
   here — every eyebrow renders gold — but this is the base it overrides, and
   it should be legible on its own. */
.gmu-eyebrow {
	font-size: var(--gmu-t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gmu-accent-ink);
	margin-bottom: var(--gmu-s-1);
}

.gmu-lead {
	font-size: var(--gmu-t-lg);
	color: var(--gmu-steel-500);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.gmu-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.6rem;
	border-radius: var(--gmu-radius);
	font-weight: 650;
	font-size: var(--gmu-t-sm);
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

/* Navy on marigold, not white on it. White would sit at 2.6:1 against the new
   accent — unreadable at button size. Navy reads 6.8:1 and suits gold branding
   better than white did. The weight goes up a step to hold the darker type. */
.gmu-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--gmu-accent);
	color: var(--gmu-on-accent);
	font-weight: 700;
}
.gmu-btn--primary:hover,
.woocommerce a.button.alt:hover { background: var(--gmu-accent-dark); color: var(--gmu-on-accent); }
.gmu-btn:active { transform: translateY(1px); }

.gmu-btn--ghost {
	background: transparent;
	color: var(--gmu-ink);
	border-color: var(--gmu-line);
}
.gmu-btn--ghost:hover { border-color: var(--gmu-steel-500); color: var(--gmu-ink); }

.gmu-btn--onDark {
	background: rgba(255,255,255,.08);
	color: #fff;
	border-color: rgba(255,255,255,.25);
}
.gmu-btn--onDark:hover { background: rgba(255,255,255,.16); }

/* --------------------------------------------------------------------------
   Product / category cards — replaces the red-bordered black boxes
   -------------------------------------------------------------------------- */

.gmu-grid {
	display: grid;
	gap: var(--gmu-s-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.gmu-card {
	display: flex;
	flex-direction: column;
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gmu-card:hover {
	border-color: var(--gmu-steel-300);
	box-shadow: var(--gmu-shadow);
	transform: translateY(-2px);
}

.gmu-card__media {
	aspect-ratio: 4 / 3;
	background: var(--gmu-surface);
	overflow: hidden;
}
.gmu-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

.gmu-card__body { padding: var(--gmu-s-3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.gmu-card__title { font-size: var(--gmu-t-base); font-weight: 700; color: var(--gmu-ink); margin: 0; line-height: 1.3; }
.gmu-card__meta {
	font-family: var(--gmu-mono);
	font-size: var(--gmu-t-xs);
	color: var(--gmu-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.gmu-card__spec { font-size: var(--gmu-t-sm); color: var(--gmu-body); margin: 0; }
.gmu-card__foot { margin-top: auto; padding-top: var(--gmu-s-2); }

/* --------------------------------------------------------------------------
   Spec tables — core content type for a grating supplier
   -------------------------------------------------------------------------- */

.gmu-spec {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--gmu-t-sm);
	overflow-x: auto;
	display: block;
}
.gmu-spec th, .gmu-spec td {
	text-align: left;
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--gmu-line);
}
.gmu-spec thead th {
	background: var(--gmu-surface);
	color: var(--gmu-ink);
	font-size: var(--gmu-t-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.gmu-spec tbody tr:hover { background: var(--gmu-surface); }
.gmu-spec td:first-child { font-family: var(--gmu-mono); color: var(--gmu-ink); }

/* --------------------------------------------------------------------------
   Header / footer
   -------------------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--gmu-line); background: #fff; }
.site-branding .site-title { font-weight: 800; letter-spacing: -.03em; color: var(--gmu-ink); }

/* Compact utility strip: contact details belong here once, not in four
   full-width red banners repeated down the page. */
.gmu-topbar {
	background: var(--gmu-navy-900);
	color: #b9c7d3;
	font-size: var(--gmu-t-xs);
}
.gmu-topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.gmu-topbar__inner {
	display: flex; flex-wrap: wrap; gap: var(--gmu-s-3);
	align-items: center; justify-content: space-between;
	padding-block: .5rem;
}

.site-footer { background: var(--gmu-navy-900); color: #9fb0be; }
.site-footer a { color: #dbe4eb; }
.site-footer a:hover { color: var(--gmu-accent); }

/* --------------------------------------------------------------------------
   Mobile fixes — the old build overlapped the hero and clipped headings
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	:root { --gmu-s-6: 3rem; --gmu-s-7: 4rem; }

	.gmu-wrap { width: min(1200px, 100% - 1.75rem); }

	/* Nothing may spill horizontally. */
	body { overflow-x: hidden; }
	h1, h2, h3, h4 { overflow-wrap: anywhere; hyphens: auto; }

	.gmu-grid { grid-template-columns: 1fr 1fr; gap: var(--gmu-s-2); }
}

@media (max-width: 480px) {
	.gmu-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Accessibility / motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

.gmu-visually-hidden {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Catalogue enquiry — hover actions, modal, contact channels
   ========================================================================== */

/* --- product card actions ------------------------------------------------ */

ul.products li.product,
.woocommerce ul.products li.product {
	position: relative;
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	overflow: hidden;
	padding: 0 0 var(--gmu-s-3);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
ul.products li.product:hover {
	border-color: var(--gmu-steel-300);
	box-shadow: var(--gmu-shadow);
	transform: translateY(-2px);
}
ul.products li.product img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	margin: 0 0 var(--gmu-s-2);
	background: var(--gmu-surface);
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--gmu-t-base) !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--gmu-ink);
	padding: 0 var(--gmu-s-3);
	margin: 0 0 .15rem;
}
ul.products li.product .gmu-card__meta {
	display: block;
	padding: 0 var(--gmu-s-3);
	margin-bottom: var(--gmu-s-2);
}

.gmu-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 0 var(--gmu-s-3);
	flex-wrap: wrap;
}
.gmu-actions__ask { flex: 1 1 auto; padding: .6rem 1rem; font-size: var(--gmu-t-xs); }
.gmu-actions__quick { display: inline-flex; gap: .35rem; }

/* The way into the product's own page. Outlined, so the gold enquiry button
   stays the loudest thing on the card. */
.gmu-actions__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	flex: 1 1 auto;
	padding: .6rem 1rem;
	font-size: var(--gmu-t-xs);
	font-weight: 700;
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	background: var(--gmu-white);
	color: var(--gmu-ink);
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.gmu-actions__view:hover,
.gmu-actions__view:focus-visible {
	color: var(--gmu-accent-ink, #8a6a1f);
	border-color: var(--gmu-accent);
	background: var(--gmu-accent-soft);
}

.gmu-actions__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	color: var(--gmu-steel-500);
	background: var(--gmu-white);
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.gmu-actions__ico:hover {
	color: var(--gmu-accent-ink);
	border-color: var(--gmu-accent);
	background: var(--gmu-accent-soft);
}
.gmu-channel--whatsapp:hover,
.gmu-actions__ico[aria-label^="WhatsApp"]:hover { color: #25d366; border-color: #25d366; background: #eafaf0; }

/* Reveal on hover only where hovering exists; always visible on touch. */
@media (hover: hover) and (pointer: fine) {
	.gmu-actions {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity .16s ease, transform .16s ease;
	}
	ul.products li.product:hover .gmu-actions,
	ul.products li.product:focus-within .gmu-actions {
		opacity: 1;
		transform: none;
	}
}

/* --- modal --------------------------------------------------------------- */

.gmu-modal { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 1rem; }
.gmu-modal[hidden] { display: none; }
.gmu-modal__backdrop { position: absolute; inset: 0; background: rgba(13,25,38,.62); backdrop-filter: blur(2px); }

.gmu-modal__panel {
	position: relative;
	width: min(620px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	padding: var(--gmu-s-4);
	box-shadow: 0 24px 64px rgba(13,25,38,.32);
}
.gmu-modal__x {
	position: absolute; top: .6rem; right: .75rem;
	background: none; border: 0; cursor: pointer;
	font-size: 1.7rem; line-height: 1; color: var(--gmu-muted);
}
.gmu-modal__x:hover { color: var(--gmu-ink); }
.gmu-modal__title { font-size: var(--gmu-t-xl); margin: 0 0 .25rem; }
.gmu-modal__item {
	font-family: var(--gmu-mono); font-size: var(--gmu-t-sm);
	color: var(--gmu-accent-ink); background: var(--gmu-accent-soft);
	padding: .5rem .75rem; border-radius: var(--gmu-radius);
	margin: 0 0 var(--gmu-s-3);
}

.gmu-form__row { display: flex; flex-direction: column; gap: .3rem; margin-bottom: var(--gmu-s-2); }
.gmu-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gmu-s-2); }
@media (max-width: 560px) { .gmu-form__grid { grid-template-columns: 1fr; } }

.gmu-form label { font-size: var(--gmu-t-xs); font-weight: 650; color: var(--gmu-ink); text-transform: uppercase; letter-spacing: .04em; }
.gmu-form input, .gmu-form textarea {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	font: inherit; font-size: var(--gmu-t-sm);
	color: var(--gmu-ink); background: #fff;
}
.gmu-form input:focus, .gmu-form textarea:focus { border-color: var(--gmu-accent); box-shadow: var(--gmu-ring); outline: none; }
.gmu-form__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: var(--gmu-s-3); }
.gmu-form__status { margin: .75rem 0 0; font-size: var(--gmu-t-sm); min-height: 1.2em; }
.gmu-form__status.is-ok { color: #1a7f4b; font-weight: 600; }
.gmu-form__status.is-error { color: #b3261e; font-weight: 600; }
.gmu-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- contact channel row ------------------------------------------------- */

.gmu-channels { text-align: center; }
.gmu-channels__title {
	font-size: var(--gmu-t-lg);
	font-weight: 650;
	color: inherit;
	margin: 0 0 var(--gmu-s-3);
	max-width: none;
}
.gmu-channels__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-wrap: wrap;
	gap: .6rem; justify-content: center;
}
.gmu-channel {
	display: inline-flex; align-items: center; justify-content: center;
	width: 58px; height: 58px;
	border-radius: var(--gmu-radius);
	border: 1px solid var(--gmu-line);
	background: #fff; color: var(--gmu-steel-700);
	transition: transform .12s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}
/* The marks are the row's whole content, so they are sized here rather than by
   the width/height attributes PHP prints — one number to change instead of
   three call sites, and the labelled variant on the contact page inherits it.
   48 inside 58 is ~83%: the mark carries the tile and the border reads as a
   thin frame around it rather than as a box the logo is floating in. */
.gmu-channel .gmu-icon { width: 48px; height: 48px; }
/* The named pills on the contact page are a different shape — there the mark
   shares the row with a label, so it scales with the text instead of filling
   the tile. 48 here would push the pill half again as tall. */
.gmu-channels--labelled .gmu-channel .gmu-icon { width: 30px; height: 30px; }
.gmu-channel:hover { transform: translateY(-2px); color: var(--gmu-accent-ink); border-color: var(--gmu-accent); }
.gmu-section--dark .gmu-channel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #dbe4eb; }
.gmu-section--dark .gmu-channel:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }

.gmu-icon { display: block; }

/* --------------------------------------------------------------------------
   Kadence archive card corrections
   Kadence adds .woo-archive-action-on-hover and absolutely positions
   .product-action-wrap, which lands on top of the product title. Put it back
   into normal flow; our own @media (hover) rule above handles the reveal.
   -------------------------------------------------------------------------- */

ul.products li.product {
	display: flex;
	flex-direction: column;
}
ul.products li.product .product-details,
ul.products li.product .entry-content-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
}

ul.products li.product .product-action-wrap {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin-top: auto;
	width: auto !important;
	min-height: 0 !important;
}

ul.products li.product .product-excerpt {
	padding: 0 var(--gmu-s-3);
	margin: 0 0 var(--gmu-s-3);
}
ul.products li.product .product-excerpt p {
	font-size: var(--gmu-t-sm);
	color: var(--gmu-body);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: none;
}

/* Leftover YITH markup, in case the plugins are ever re-enabled. */
.yith-wcwl-add-to-wishlist,
.yith-wcqv-button,
.add-to-wishlist-before_image,
.add-to-wishlist-after_add_to_cart { display: none !important; }

/* Kadence's own price/cart remnants have no meaning in a quote catalogue. */
ul.products li.product .price,
ul.products li.product .kadence-woo-cart-button-wrap { display: none !important; }

/* ==========================================================================
   Front page
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

.gmu-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: var(--gmu-navy-900);
	padding-block: clamp(4rem, 11vw, 8.5rem);
	overflow: hidden;
}
.gmu-hero__bg {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
}
.gmu-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(100deg, rgba(9,17,26,.94) 0%, rgba(9,17,26,.80) 42%, rgba(9,17,26,.42) 100%);
}
.gmu-hero__inner { max-width: 46rem; }
.gmu-hero h1 { color: #fff; margin: 0 0 var(--gmu-s-3); }
.gmu-hero__lead {
	font-size: var(--gmu-t-lg);
	color: #c3d0da;
	margin: 0 0 var(--gmu-s-4);
	max-width: 38rem;
}
.gmu-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.gmu-hero .gmu-eyebrow { color: var(--gmu-accent); }

/* --- standards strip ----------------------------------------------------- */

.gmu-standards {
	list-style: none; margin: var(--gmu-s-5) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .5rem .6rem;
}
.gmu-standards li {
	font-size: var(--gmu-t-xs);
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #cbd7e1;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: var(--gmu-radius);
	padding: .4rem .7rem;
	background: rgba(255,255,255,.05);
}

/* --- section headers ----------------------------------------------------- */

.gmu-head { max-width: 44rem; margin: 0 0 var(--gmu-s-4); }
.gmu-head h2 { margin: 0 0 .5rem; }
.gmu-head p { margin: 0; color: var(--gmu-steel-500); font-size: var(--gmu-t-lg); }
.gmu-head--center { margin-inline: auto; text-align: center; }
.gmu-head--center p { margin-inline: auto; }

/* --- category cards ------------------------------------------------------ */

.gmu-grid--cats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.gmu-cat { text-decoration: none; color: inherit; }
.gmu-cat .gmu-card__body { gap: .35rem; }
.gmu-cat .gmu-card__title { font-size: var(--gmu-t-lg); }
.gmu-cat__go {
	margin-top: .4rem;
	font-size: var(--gmu-t-sm);
	font-weight: 650;
	color: var(--gmu-accent-ink);
}
.gmu-cat:hover .gmu-cat__go { color: var(--gmu-accent-deep); }

/* --- capabilities -------------------------------------------------------- */

.gmu-caps {
	display: grid; gap: var(--gmu-s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.gmu-cap__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--gmu-radius);
	background: var(--gmu-accent-soft);
	color: var(--gmu-accent-ink);
	margin-bottom: var(--gmu-s-2);
}
.gmu-cap__title { font-size: var(--gmu-t-lg); margin: 0 0 .4rem; }
.gmu-cap__text { margin: 0; color: var(--gmu-body); font-size: var(--gmu-t-sm); }

/* --- applications -------------------------------------------------------- */

.gmu-applications {
	list-style: none; margin: 0; padding: 0;
	columns: 3; column-gap: var(--gmu-s-4);
}
@media (max-width: 900px) { .gmu-applications { columns: 2; } }
@media (max-width: 560px) { .gmu-applications { columns: 1; } }
.gmu-applications li {
	break-inside: avoid;
	padding: .5rem 0 .5rem 1.6rem;
	position: relative;
	font-size: var(--gmu-t-sm);
	border-bottom: 1px solid var(--gmu-line);
}
.gmu-applications li::before {
	content: ""; position: absolute; left: 0; top: 1.05em;
	width: 8px; height: 2px; background: var(--gmu-accent);
}

/* --- contact ------------------------------------------------------------- */

.gmu-contact__cols {
	display: grid; gap: var(--gmu-s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin-bottom: var(--gmu-s-5);
	text-align: left;
}
.gmu-contact__big { font-size: var(--gmu-t-2xl); font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.02em; }
.gmu-contact__big a { color: inherit; text-decoration: none; }
.gmu-contact__big a:hover { color: var(--gmu-accent-ink); }
.gmu-section--dark .gmu-contact__big a:hover { color: var(--gmu-accent); }
.gmu-contact__line { margin: 0 0 .35rem; font-size: var(--gmu-t-sm); }
.gmu-section--dark .gmu-contact__line { color: #b3c2ce; }
.gmu-section--dark .gmu-contact__line a { color: #fff; }

/* --- footer credit ------------------------------------------------------- */

.site-footer .site-info,
.footer-html { font-size: var(--gmu-t-xs); }
.site-footer .site-info a,
.footer-html a { color: #dbe4eb; font-weight: 600; text-decoration: none; }
.site-footer .site-info a:hover,
.footer-html a:hover { color: var(--gmu-accent); text-decoration: underline; }

/* Kadence hides the excerpt until hover on action-on-hover archives, which
   leaves a dead gap in every card. Show it always and let only the action bar
   fade in — the space stays reserved so nothing shifts on hover. */
ul.products li.product .product-excerpt {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	max-height: none !important;
}
ul.products li.product .entry-content-wrap > *:last-child { margin-bottom: 0; }
ul.products li.product .gmu-actions { padding-bottom: var(--gmu-s-3); }

/* Front page: the hero is the title, so suppress the theme's page-title band. */
.home .entry-hero,
.page-id-3181 .entry-hero,
.home .entry-hero-container,
.page-id-3181 .entry-hero-container { display: none !important; }

/* The hero is edge-to-edge; remove the content padding the theme adds above it. */
.home .content-area,
.home .site-main,
.page-id-3181 .content-area,
.page-id-3181 .site-main { padding-top: 0 !important; margin-top: 0 !important; }
.home .entry-content-wrap { padding: 0 !important; }

/* ==========================================================================
   Catalogue hover — overlay the actions on the photo
   Reserving space below every card left a dead white gap. Instead the action
   bar covers the image on hover, which is also the interaction the brief
   described: hover the item, message about it.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	/* Kadence gives .product-details position:relative, which would make it the
	   containing block and land the overlay below the photo. Neutralise it so the
	   card itself positions the overlay. */
	ul.products li.product { position: relative !important; }

	/* position:static alone isn't enough — Kadence also sets a transform on
	   .product-details, and a transform creates a containing block for absolutely
	   positioned descendants whatever the position value is. Clear the lot so the
	   card becomes the offsetParent. */
	ul.products li.product .product-details,
	ul.products li.product .entry-content-wrap {
		position: static !important;
		transform: none !important;
		will-change: auto !important;
		filter: none !important;
		backdrop-filter: none !important;
		perspective: none !important;
		contain: none !important;
	}

	ul.products li.product .product-action-wrap {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		aspect-ratio: 4 / 3;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .6rem;
		background: rgba(11, 21, 32, .82) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transition: opacity .18s ease, visibility .18s ease;
		pointer-events: none;
		z-index: 3;
	}
	/*
	 * The backdrop stays click-through even when it is showing.
	 *
	 * It covers the whole picture, and the picture is a link to the product's
	 * own page — so making the backdrop itself clickable meant that hovering a
	 * card put an invisible sheet over the one thing a visitor is most likely
	 * to click. The buttons take their own clicks; everything around them
	 * falls through to the product link underneath.
	 */
	ul.products li.product:hover .product-action-wrap,
	ul.products li.product:focus-within .product-action-wrap {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: none;
	}
	ul.products li.product .product-action-wrap .gmu-btn,
	ul.products li.product .product-action-wrap .gmu-actions__ico { pointer-events: auto; }

	/* Reset the earlier fade — the wrap itself now handles it. */
	ul.products li.product .gmu-actions {
		opacity: 1;
		transform: none;
		flex-direction: column;
		gap: .6rem;
		padding: 0 var(--gmu-s-3);
		width: 100%;
	}
	ul.products li.product .gmu-actions__ask { width: 100%; flex: 0 0 auto; }

	/* Against the dark backdrop the outline button inverts. */
	ul.products li.product .gmu-actions__view {
		width: 100%;
		flex: 0 0 auto;
		background: rgba(255,255,255,.12);
		border-color: rgba(255,255,255,.45);
		color: #fff;
	}
	ul.products li.product .gmu-actions__view:hover,
	ul.products li.product .gmu-actions__view:focus-visible {
		background: #fff;
		border-color: #fff;
		color: var(--gmu-accent-ink, #8a6a1f);
	}

	ul.products li.product .gmu-actions__ico {
		background: rgba(255,255,255,.1);
		border-color: rgba(255,255,255,.3);
		color: #fff;
	}
	ul.products li.product .gmu-actions__ico:hover {
		background: #fff;
		color: var(--gmu-accent-ink);
		border-color: #fff;
	}
}

/* Touch: no hover to discover, so keep one compact action under the details. */
@media not all and (hover: hover) {
	ul.products li.product .gmu-actions { padding-bottom: var(--gmu-s-3); }
}

/* ==========================================================================
   Hero slider
   ========================================================================== */

.gmu-hero { position: relative; isolation: isolate; }

.gmu-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gmu-hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .9s ease;
}
.gmu-hero__bg.is-active { opacity: 1; }

/*
 * The scrim used to run from 95% down to 38%, which held the headline easily
 * but left the photograph looking like it was behind smoked glass. It is now a
 * whisper — 12% falling to 5% — so the picture reads at full strength.
 *
 * The headline can no longer lean on the scrim for contrast, so it carries its
 * own: the text shadow below is what keeps white type legible over a bright
 * patch of galvanized steel. Remove one and the other stops working.
 */
.gmu-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(100deg, rgba(8,15,23,.12) 0%, rgba(8,15,23,.09) 45%, rgba(8,15,23,.06) 75%, rgba(8,15,23,.05) 100%);
}
.gmu-hero__title,
.gmu-hero__lead,
.gmu-hero__promise,
.gmu-hero .gmu-eyebrow {
	/* Three layers doing different jobs: a tight one to hold the letterforms
	   apart from whatever is directly behind them, a mid one for weight, and a
	   wide soft one that darkens the picture just around the type. With the
	   scrim down at 12% this is the only thing keeping white text legible over
	   a bright patch of galvanized steel. */
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .92),
		0 2px 10px rgba(0, 0, 0, .85),
		0 6px 32px rgba(0, 0, 0, .7);
}

/*
 * A pool of shade behind the copy, rather than a sheet over the photograph.
 *
 * With the scrim at 12% the picture reads at full strength, but white type over
 * a lit patch of steel does not — and no amount of text shadow fixes that on
 * its own. So the darkening is moved off the image and onto the text: a soft
 * ellipse centred on the copy that has fallen to nothing well before the right
 * of the frame, where the photograph is left exactly as shot.
 */
.gmu-hero__inner {
	max-width: 50rem;
	position: relative;
	padding-block: var(--gmu-s-4);
}
/*
 * The pool is drawn on its own layer, inset well outside the copy, so the fade
 * finishes in open air. Painted as a background on .gmu-hero__inner itself it
 * was clipped to that box and the ellipse ended mid-gradient — a visible
 * rectangle of shade sitting on the photograph.
 *
 * z-index: -1 drops it behind the text (which is a positioned descendant and so
 * paints above) while staying inside the stacking context .gmu-hero opens with
 * `isolation: isolate`, so it can never escape over the header or the section
 * below.
 */
.gmu-hero__inner::before {
	content: "";
	position: absolute;
	/* Generous on every side, and the ellipse is under half the box in each
	   axis, so the gradient is already at zero before it meets an edge. Any
	   larger and the clip line shows up on the photograph as a straight seam. */
	inset: -7rem -18rem;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse 48% 48% at 50% 50%,
		rgba(8, 15, 23, .80) 0%,
		rgba(8, 15, 23, .70) 40%,
		rgba(8, 15, 23, .40) 68%,
		rgba(8, 15, 23, .12) 86%,
		rgba(8, 15, 23, 0) 100%
	);
}

/*
 * The promise line. It was set at small-print size, which is where a strapline
 * usually belongs — but this one is the first thing the business wants read, so
 * it is sized to be read: up from t-sm to t-lg, and a shade heavier so the
 * italic still holds against the photograph behind it.
 */
.gmu-hero__promise {
	font-size: var(--gmu-t-lg);
	font-style: italic;
	font-weight: 600;
	color: var(--gmu-accent);
	margin: 0 0 var(--gmu-s-2);
	letter-spacing: .01em;
}

.gmu-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
}

/*
 * Row 1 is the standing promise, row 2 is the rotating slide. Every panel is
 * pinned to row 2 so they stack in one cell and the block never jumps as the
 * slider advances; rows 3 and 4 (actions, dots) then auto-place beneath.
 */
.gmu-hero__promise { grid-area: 1 / 1; }
.gmu-hero__panel {
	grid-area: 2 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.gmu-hero__panel.is-active { opacity: 1; visibility: visible; transform: none; }

.gmu-hero__cta,
.gmu-hero__dots { grid-column: 1; }

.gmu-hero__title {
	font-size: var(--gmu-t-3xl);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	color: #fff;
	margin: 0 0 var(--gmu-s-3);
	text-wrap: balance;
}
.gmu-hero__lead {
	font-size: var(--gmu-t-lg);
	color: #c9d6e1;
	margin: 0;
	max-width: 40rem;
}

/* Reserve the tallest panel's height so the CTAs never shift. */
.gmu-hero__panel { min-height: 11.5rem; }
@media (max-width: 782px) { .gmu-hero__panel { min-height: 14rem; } }

.gmu-hero__cta { margin-top: var(--gmu-s-4); }

.gmu-hero__dots { display: flex; gap: .5rem; margin-top: var(--gmu-s-4); }

/*
 * The bar is 4px tall, which is the look we want and far too small to hit with
 * a thumb — WCAG 2.5.8 asks for 24px, and the inline-text exemption does not
 * apply to a standalone control. So the button keeps a 24px-tall touch area and
 * paints the 4px bar inside it, giving a target six times the size at no visual
 * cost.
 */
.gmu-hero__dot {
	width: 34px;
	height: 24px;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	-webkit-tap-highlight-color: transparent;
}
.gmu-hero__dot::before {
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .3);
	transition: background-color .2s ease;
}
.gmu-hero__dot.is-active::before { background: var(--gmu-accent); }
.gmu-hero__dot:hover::before    { background: rgba(255, 255, 255, .6); }
.gmu-hero__dot:focus-visible {
	outline: 2px solid var(--gmu-gold, #d0a343);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ==========================================================================
   Payment notice
   ========================================================================== */

.gmu-payments {
	display: flex;
	align-items: center;
	/* Centred as a unit: the card marks and the line that names them read as
	   one badge sitting in the middle of the band, rather than as artwork on
	   the left with a caption trailing off to the right. */
	justify-content: center;
	text-align: center;
	gap: var(--gmu-s-4);
	flex-wrap: wrap;
	padding: var(--gmu-s-3) var(--gmu-s-4);
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
}
.gmu-payments img { width: 260px; max-width: 100%; height: auto; }
/* One line beside the card marks now, so no reserved column and no trailing
   margin under a paragraph that is no longer followed by anything. `0 1 auto`
   rather than `1 1 auto` so the text takes only the width it needs — grow it
   and the centred pair is pushed back off-centre. */
.gmu-payments__text { flex: 0 1 auto; }
.gmu-payments__title { font-weight: 700; color: var(--gmu-ink); margin: 0; font-size: var(--gmu-t-xl); }
.gmu-section--dark .gmu-payments { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.gmu-section--dark .gmu-payments__title { color: #fff; }

/* ==========================================================================
   Branding
   The logo is gold artwork designed for a dark ground. On white it needs room
   and a little breathing space rather than filling the whole bar.
   ========================================================================== */

.site-branding img.custom-logo {
	height: auto;
	width: auto;
}
.site-header-main-section-left .site-branding { padding-block: .7rem; }

/* ==========================================================================
   Dark header
   The logo is gold artwork on a dark ground — that is what it was drawn for.
   On white it washes out, and because it is a wordmark it also duplicates the
   site title. Dark bar, logo only, sized so the lettering is actually legible.
   ========================================================================== */

.site-header,
#main-header,
.site-header-row-container-inner,
.site-main-header-wrap {
	background: var(--gmu-navy-900) !important;
	border-bottom: 1px solid rgba(255,255,255,.10);
}

/*
 * The mark is a stacked lockup — wreath over wordmark, 1.4:1 — so height is
 * what makes it legible, not width. At 78px the wordmark under the wreath was
 * about 6px tall and unreadable; 100px is the point where it resolves, and the
 * bar grows to 122px with it, which is what the owner asked for.
 *
 * No shrink-on-scroll: the rule below intends a sticky header, but Kadence
 * overrides position to relative and .site carries overflow:clip, so the bar
 * scrolls away like any other block. Its height costs nothing past the fold.
 */
.site-branding img.custom-logo {
	max-height: 100px;
	max-width: 240px;
	width: auto;
	height: auto;
}
@media (max-width: 1024px) {
	.site-branding img.custom-logo { max-height: 76px; max-width: 190px; }
}
@media (max-width: 782px) {
	.site-branding img.custom-logo { max-height: 62px; max-width: 160px; }
}

/* The logo already says the company name. */
.site-branding .site-title,
.site-branding .site-description { display: none !important; }

/* Navigation on the dark bar */
.site-header .header-navigation a,
.site-header .header-navigation .menu > li > a {
	color: #dbe4eb !important;
	font-weight: 600;
	font-size: var(--gmu-t-sm);
	letter-spacing: .01em;
}
.site-header .header-navigation a:hover,
.site-header .header-navigation .menu > li.current-menu-item > a {
	color: var(--gmu-accent) !important;
}

/* Dropdown panel */
.site-header .header-navigation ul.sub-menu {
	background: var(--gmu-navy-800);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--gmu-radius);
	padding: .35rem;
	box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.site-header .header-navigation ul.sub-menu li a {
	color: #cdd9e3 !important;
	padding: .55rem .8rem;
	border-radius: 3px;
}
.site-header .header-navigation ul.sub-menu li a:hover {
	background: rgba(255,255,255,.08);
	color: #fff !important;
}

/* Mobile toggle */
.site-header .menu-toggle-open,
.site-header .drawer-toggle,
.site-header button.menu-toggle { color: #dbe4eb !important; }
.site-header .menu-toggle-icon .bar { background-color: #dbe4eb !important; }

/* The hero sits directly beneath, so no gap. */
.home .site-main > .entry-content-wrap > .entry-content > .gmu-hero:first-child { margin-top: 0; }

/* ==========================================================================
   Inner pages
   ========================================================================== */

.gmu-pagehero {
	position: relative;
	isolation: isolate;
	background: var(--gmu-navy-900);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	overflow: hidden;
}
.gmu-pagehero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--gmu-pagehero-img, none);
	background-size: cover;
	background-position: center;
}
/* Same whisper of a scrim as the home hero, for the same reason — the banner
   photograph should read as a photograph. The type carries its own contrast. */
.gmu-pagehero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(8,15,23,.12) 0%, rgba(8,15,23,.09) 45%, rgba(8,15,23,.06) 100%);
}
.gmu-pagehero h1 { color: #fff; margin: 0 0 var(--gmu-s-2); }
.gmu-pagehero__lead {
	font-size: var(--gmu-t-lg);
	/* Was #c3d0da, which worked against a 94% scrim. With the scrim down at 12%
	   the standfirst has to hold its own over a lit photograph, so it comes up
	   to near-white and takes the shadow below with it. */
	color: #eef3f7;
	margin: 0;
	max-width: 46rem;
}

/* Every page but the home page centres its banner: eyebrow, title and standfirst
   sit on the middle axis. The home hero keeps its left-aligned promise, which is
   built around the slide panel and its dots. */
.gmu-pagehero { text-align: center; }
.gmu-pagehero__lead { margin-inline: auto; }

/*
 * The pool of shade the home hero carries, brought to the banner on every
 * other page. The three-layer shadow below holds a letterform apart from what
 * is directly behind it, but on a bright, busy photograph — galvanized steel
 * in sunlight, a gorge full of leaves — the whole block of type still competes
 * with the picture. This darkens the picture just where the words are and
 * fades to nothing well before any edge, so it never reads as a panel.
 *
 * `position: relative` on the wrap is what gives the pool something to sit in
 * and puts it above the section's scrim; the section already isolates itself,
 * so a negative z-index here cannot fall through to the page behind.
 */
.gmu-pagehero > .gmu-wrap {
	position: relative;
	isolation: isolate;
}
.gmu-pagehero > .gmu-wrap::before {
	content: "";
	position: absolute;
	inset: -5rem -14rem;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse 48% 48% at 50% 50%,
		rgba(8, 15, 23, .80) 0%,
		rgba(8, 15, 23, .70) 40%,
		rgba(8, 15, 23, .40) 68%,
		rgba(8, 15, 23, .12) 86%,
		rgba(8, 15, 23, 0) 100%
	);
}

.gmu-pagehero h1,
.gmu-pagehero__lead,
.gmu-pagehero .gmu-hero__promise,
.gmu-pagehero .gmu-eyebrow {
	/* Three layers doing different jobs: a tight one to hold the letterforms
	   apart from whatever is directly behind them, a mid one for weight, and a
	   wide soft one that darkens the picture just around the type. With the
	   scrim down at 12% this is the only thing keeping white text legible over
	   a bright patch of galvanized steel. */
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .92),
		0 2px 10px rgba(0, 0, 0, .85),
		0 6px 32px rgba(0, 0, 0, .7);
}

/* --- readable prose column ---------------------------------------------- */

/*
 * The prose column keeps a comfortable measure inside a full-width container.
 * It used to be pinned left so that text and the figures beside it shared one
 * edge; that held while both were 1200px, and stopped holding when the picture
 * sections went to 1400px. The measure is set and centred further down, under
 * "Review fixes" — see the MEASURE note there.
 */
.gmu-prose { max-width: none; }
.gmu-prose > * { max-width: 78ch; }
.gmu-prose > .gmu-head { max-width: 62ch; }
.gmu-prose h2 { margin: var(--gmu-s-5) 0 var(--gmu-s-2); }
.gmu-prose h3 { margin: var(--gmu-s-4) 0 var(--gmu-s-2); }
.gmu-prose h4 {
	margin: var(--gmu-s-4) 0 var(--gmu-s-1);
	color: var(--gmu-steel-700);
	font-size: var(--gmu-t-lg);
}
.gmu-prose > *:first-child { margin-top: 0; }
.gmu-prose p { margin: 0 0 var(--gmu-s-3); max-width: none; }

/* A footnote to the body copy — a review date, a source, a caveat. Set apart
   by a rule and a lighter weight rather than by size, so it stays readable. */
.gmu-note {
	margin-top: var(--gmu-s-5) !important;
	padding-top: var(--gmu-s-3);
	border-top: 1px solid var(--gmu-line);
	color: var(--gmu-steel-500);
	font-size: var(--gmu-t-sm);
}

.gmu-rule {
	border: 0;
	border-top: 1px solid var(--gmu-line);
	margin: var(--gmu-s-5) 0;
}

.gmu-ticks {
	list-style: none;
	margin: 0 0 var(--gmu-s-4);
	padding: 0;
	display: grid;
	gap: .1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.gmu-ticks li {
	position: relative;
	padding: .5rem 0 .5rem 1.5rem;
	font-size: var(--gmu-t-sm);
	border-bottom: 1px solid var(--gmu-line);
}
.gmu-ticks li::before {
	content: ""; position: absolute; left: 0; top: 1.05em;
	width: 8px; height: 2px; background: var(--gmu-accent);
}


/* --- gallery ------------------------------------------------------------- */

.gmu-gallery {
	display: grid;
	gap: var(--gmu-s-2);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.gmu-gallery__item {
	margin: 0;
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	overflow: hidden;
	background: var(--gmu-white);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gmu-gallery__item:hover {
	border-color: var(--gmu-steel-300);
	box-shadow: var(--gmu-shadow);
	transform: translateY(-2px);
}
.gmu-gallery__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--gmu-surface);
}

/* Inner pages are full-width sections; kill the theme's content padding. */
.page .site-main > .entry-content-wrap { padding: 0 !important; }
.page .entry-content > .gmu-pagehero:first-child { margin-top: 0; }

/* ==========================================================================
   Intro band — the positioning line, directly under the hero
   The hero carries imagery and two actions; the phone numbers belong here,
   read once, where a visitor's eye lands after the fold.
   ========================================================================== */

.gmu-intro {
	background: var(--gmu-white);
	border-bottom: 1px solid var(--gmu-line);
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	text-align: center;
}
.gmu-intro__title {
	margin: 0 0 .35rem;
	font-size: var(--gmu-t-2xl);
	letter-spacing: -.02em;
	color: var(--gmu-ink);
}
.gmu-intro__title::after {
	content: "";
	display: block;
	width: 56px; height: 3px;
	margin: var(--gmu-s-2) auto 0;
	background: var(--gmu-accent);
}
.gmu-intro__sub {
	margin: var(--gmu-s-2) auto 0;
	max-width: 52rem;
	font-size: var(--gmu-t-lg);
	font-weight: 600;
	color: var(--gmu-steel-700);
	line-height: 1.4;
}
.gmu-intro__contact {
	margin: var(--gmu-s-3) auto 0;
	max-width: 60rem;
	font-size: var(--gmu-t-sm);
	color: var(--gmu-muted);
}
.gmu-intro__contact a {
	color: var(--gmu-ink);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--gmu-line);
	white-space: nowrap;
}
.gmu-intro__contact a:hover { color: var(--gmu-accent-ink); border-bottom-color: currentColor; }

/* ==========================================================================
   Two-column narrative — statement on the left, list on the right
   ========================================================================== */

.gmu-split {
	display: grid;
	gap: var(--gmu-s-5);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: start;
}
@media (max-width: 900px) { .gmu-split { grid-template-columns: 1fr; gap: var(--gmu-s-4); } }

.gmu-split__lead p { font-size: var(--gmu-t-lg); color: var(--gmu-body); line-height: 1.6; }
.gmu-split__aside {
	background: var(--gmu-surface);
	border: 1px solid var(--gmu-line);
	border-left: 3px solid var(--gmu-accent);
	border-radius: var(--gmu-radius);
	padding: var(--gmu-s-4);
}
.gmu-split__title { margin: 0; font-size: var(--gmu-t-xl); color: var(--gmu-ink); }
.gmu-split__note { margin: .35rem 0 var(--gmu-s-3); font-size: var(--gmu-t-sm); color: var(--gmu-muted); }

.gmu-expertise { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.gmu-expertise li {
	position: relative;
	padding: .6rem 0 .6rem 1.6rem;
	font-size: var(--gmu-t-sm);
	color: var(--gmu-ink);
	border-bottom: 1px solid var(--gmu-line);
}
.gmu-expertise li:last-child { border-bottom: 0; }
.gmu-expertise li::before {
	content: "";
	position: absolute; left: 0; top: 1.15em;
	width: 9px; height: 2px;
	background: var(--gmu-accent);
}

/* ==========================================================================
   Specification panels
   ========================================================================== */

.gmu-specs {
	display: grid;
	gap: var(--gmu-s-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.gmu-specpanel {
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	overflow: hidden;
}
.gmu-specpanel__title {
	margin: 0;
	padding: var(--gmu-s-3) var(--gmu-s-4);
	background: var(--gmu-navy-900);
	color: #fff;
	font-size: var(--gmu-t-base);
	letter-spacing: .01em;
}
.gmu-specpanel__list { margin: 0; padding: 0 var(--gmu-s-4) var(--gmu-s-2); }
.gmu-specpanel__row {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	gap: var(--gmu-s-2);
	padding: .8rem 0;
	border-bottom: 1px solid var(--gmu-line);
}
.gmu-specpanel__row:last-child { border-bottom: 0; }
.gmu-specpanel__row dt {
	margin: 0;
	font-size: var(--gmu-t-xs);
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--gmu-muted);
	font-weight: 700;
}
.gmu-specpanel__row dd {
	margin: 0;
	font-size: var(--gmu-t-sm);
	color: var(--gmu-ink);
}
@media (max-width: 560px) {
	.gmu-specpanel__row { grid-template-columns: 1fr; gap: .2rem; }
}

/* ==========================================================================
   Global reach band
   NASA "Black Marble" composite (public domain). Kept because its navy-and-
   amber palette is already the brand's; the copy sits over it as real text.
   ========================================================================== */

.gmu-global {
	position: relative;
	isolation: isolate;
	background: var(--gmu-navy-900);
	color: #c7d4de;
	padding-block: clamp(3.5rem, 7vw, 6rem);
	overflow: hidden;
}
.gmu-global::before {
	content: "";
	position: absolute; inset: 0; z-index: -2;
	background-image: var(--gmu-global-img, none);
	background-size: cover;
	background-position: center;
	opacity: .85;
}
.gmu-global::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(120% 90% at 20% 40%, rgba(8,15,23,.86) 0%, rgba(8,15,23,.62) 55%, rgba(8,15,23,.78) 100%);
}
.gmu-global__inner { max-width: 62rem; }
.gmu-global .gmu-eyebrow { color: var(--gmu-accent); }
.gmu-global__title {
	color: #fff;
	margin: var(--gmu-s-2) 0 var(--gmu-s-3);
	font-size: var(--gmu-t-2xl);
	letter-spacing: -.02em;
	max-width: 24ch;
}
.gmu-global__lead { margin: 0; max-width: 52rem; line-height: 1.65; color: #c7d4de; }

.gmu-global__branches {
	display: grid;
	gap: var(--gmu-s-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-top: var(--gmu-s-4);
	max-width: 48rem;
}
.gmu-global__branch {
	padding: var(--gmu-s-3);
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--gmu-radius);
	backdrop-filter: blur(2px);
}
.gmu-global__label {
	margin: 0 0 .3rem;
	font-size: var(--gmu-t-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--gmu-accent);
	font-weight: 700;
}
.gmu-global__where { margin: 0 0 .4rem; color: #fff; font-weight: 600; }
.gmu-global__num { margin: 0; font-size: var(--gmu-t-sm); }
.gmu-global__num a { color: #dbe4eb; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.gmu-global__num a:hover { color: #fff; border-bottom-color: var(--gmu-accent); }

/* ==========================================================================
   Catalogue grid — three across, as specified
   WooCommerce ships float/percentage widths; replace them with a real grid so
   the cards align on both axes whatever the title length.
   ========================================================================== */

.woocommerce ul.products,
ul.products {
	display: grid !important;
	gap: var(--gmu-s-3);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.woocommerce ul.products.columns-4,
ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.woocommerce ul.products.columns-2,
ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}
ul.products::before, ul.products::after { content: none !important; }

@media (max-width: 900px) {
	.woocommerce ul.products,
	ul.products,
	.woocommerce ul.products.columns-4,
	ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.woocommerce ul.products,
	ul.products,
	.woocommerce ul.products.columns-4,
	ul.products.columns-4,
	.woocommerce ul.products.columns-2,
	ul.products.columns-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Header and primary navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* One hairline of amber under the bar ties the header to the accent without
   adding another colour block. */
.site-header::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--gmu-accent) 0%, rgba(232,137,28,0) 60%);
	pointer-events: none;
}

/* Up from 15px. Uppercase at .08em tracking eats width fast, so the tracking
   comes back a touch as the size goes up and the row still fits on a laptop. */
.site-header .header-navigation .menu > li > a,
.site-header .header-navigation ul.menu > li > a {
	position: relative;
	padding: 1.15rem .8rem !important;
	text-transform: uppercase;
	font-size: 1.0625rem !important;
	font-weight: 700;
	letter-spacing: .05em;
	transition: color .15s ease;
}
@media (max-width: 1200px) {
	.site-header .header-navigation .menu > li > a,
	.site-header .header-navigation ul.menu > li > a {
		padding: 1.15rem .6rem !important;
		font-size: 1rem !important;
		letter-spacing: .04em;
	}
}

/* Underline indicator: grows from the centre, so the label never shifts. */
.site-header .header-navigation .menu > li > a::after {
	content: "";
	position: absolute;
	left: .8rem; right: .8rem; bottom: .7rem;
	height: 2px;
	background: var(--gmu-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .18s ease;
}
.site-header .header-navigation .menu > li > a:hover::after,
.site-header .header-navigation .menu > li.current-menu-item > a::after,
.site-header .header-navigation .menu > li.current-menu-ancestor > a::after,
.site-header .header-navigation .menu > li.current_page_item > a::after { transform: scaleX(1); }

.site-header .header-navigation .menu > li.current-menu-item > a,
.site-header .header-navigation .menu > li.current_page_item > a { color: #fff !important; }

/* Focus must be visible on the dark bar. */
.site-header .header-navigation a:focus-visible {
	outline: 2px solid var(--gmu-accent);
	outline-offset: -2px;
	border-radius: 2px;
}

/* The last item is the call to action, not another link. */
.site-header .header-navigation .menu > li.gmu-nav-cta > a {
	margin-left: .5rem;
	padding: .6rem 1.1rem !important;
	background: var(--gmu-accent);
	color: var(--gmu-on-accent) !important;
	border-radius: var(--gmu-radius);
	letter-spacing: .06em;
}
.site-header .header-navigation .menu > li.gmu-nav-cta > a:hover { background: var(--gmu-accent-dark); }
.site-header .header-navigation .menu > li.gmu-nav-cta > a::after { content: none; }

/* Dropdowns open flush under the bar. */
.site-header .header-navigation ul.sub-menu { margin-top: 0; }

/* Mobile drawer inherits the dark ground. */
#mobile-drawer .drawer-inner,
.mobile-navigation ul li a { background-color: var(--gmu-navy-900); }
.mobile-navigation ul li a { color: #dbe4eb !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-navigation ul li.current-menu-item > a { color: var(--gmu-accent) !important; }

/* ==========================================================================
   Call-us band
   The line the live site runs under its product grid. A gold hairline top and
   bottom rather than a filled block, so it separates the catalogue from what
   follows without competing with the dark contact section at the foot.
   ========================================================================== */

.gmu-callout {
	background: var(--gmu-gold-soft, #faf5e9);
	border-block: 1px solid var(--gmu-gold, #d0a343);
	padding-block: var(--gmu-s-3);
}
.gmu-callout__text {
	max-width: var(--gmu-wrap, 1200px);
	margin: 0 auto;
	padding-inline: var(--gmu-s-4);
	text-align: center;
	font-size: var(--gmu-t-lg);
	font-weight: 600;
	color: var(--gmu-ink);
	line-height: 1.6;
}
.gmu-callout__text a {
	color: var(--gmu-gold-deep, #96742a);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.gmu-callout__text a:hover,
.gmu-callout__text a:focus-visible { border-bottom-color: currentColor; }
.gmu-callout__or,
.gmu-callout__sep { color: var(--gmu-muted, #6b7a88); font-weight: 500; }

@media (max-width: 40rem) {
	.gmu-callout__text { font-size: var(--gmu-t-base); }
}

/* ==========================================================================
   Product gallery visibility

   WooCommerce prints the gallery with an inline style="opacity: 0" and relies
   on its own flexslider script to fade it back in. This theme drops the Woo
   gallery supports on purpose — our lightbox does zoom and stepping better and
   without jQuery UI — but dropping them also means nothing ever runs the code
   that removes that opacity, so every product photograph was rendering
   invisible while the markup around it looked perfectly correct.

   Inline styles can only be beaten by !important.
   ========================================================================== */

.woocommerce div.product div.images.woocommerce-product-gallery,
.woocommerce-product-gallery { opacity: 1 !important; }

/* ==========================================================================
   Contact channels — real brand marks
   Channels without a URL yet render as a dimmed, non-clickable tile so the row
   is complete and nothing ships as a dead link.
   ========================================================================== */

.gmu-channel { --gmu-brand: var(--gmu-steel-700); }
.gmu-channel--facebook  { --gmu-brand: #1877f2; }
.gmu-channel--instagram { --gmu-brand: #d62976; }
.gmu-channel--x         { --gmu-brand: #0f1419; }
.gmu-channel--whatsapp  { --gmu-brand: #25d366; }
.gmu-channel--youtube   { --gmu-brand: #ff0000; }
.gmu-channel--pinterest { --gmu-brand: #e60023; }
.gmu-channel--map       { --gmu-brand: #34a853; }
.gmu-channel--video     { --gmu-brand: #0b57d0; }
.gmu-channel--email     { --gmu-brand: #ea4335; }
.gmu-channel--text      { --gmu-brand: #0a84ff; }
.gmu-channel--phone     { --gmu-brand: var(--gmu-accent); }

.gmu-channel:hover,
.gmu-channel:focus-visible {
	background: var(--gmu-brand);
	border-color: var(--gmu-brand);
	color: #fff;
}
.gmu-channel--x:hover { background: #000; border-color: #000; }

/*
 * Tiles carrying a real logo behave differently to the ones carrying a glyph.
 * Flooding the tile with the brand colour was fine when the mark was a white
 * silhouette; against a full-colour logo it drowns it. These keep the tile
 * white — which is how every one of these brands specifies its mark be
 * presented — and move the hover to the frame instead.
 */
.gmu-channel--branded,
.gmu-channel--branded:hover,
.gmu-channel--branded:focus-visible {
	background: #fff;
}
.gmu-channel--branded:hover,
.gmu-channel--branded:focus-visible {
	border-color: var(--gmu-brand);
	box-shadow: 0 6px 18px rgba(20, 32, 43, .16);
}
.gmu-section--dark .gmu-channel--branded,
.gmu-section--dark .gmu-channel--branded:hover {
	background: #fff;
	border-color: rgba(255, 255, 255, .28);
}
.gmu-section--dark .gmu-channel--branded:hover { border-color: #fff; }

/* The logo never inherits the tile's text colour. */
.gmu-icon--brand { color: initial; }

.gmu-channel.is-pending {
	opacity: .45;
	cursor: default;
	filter: grayscale(1);
}
.gmu-channel.is-pending:hover { background: transparent; color: inherit; }

/*
 * A logo that has no URL yet keeps its colours.
 *
 * Draining them was right when these were grey glyphs — grey-on-grey read as
 * "not yet". Against the real marks it reads as broken, because a washed-out
 * Instagram is not a state Instagram has. So the mark stays true and the
 * dashed frame carries the "not linked yet" meaning instead. Fill the URL in
 * Site Content and the frame turns solid and the tile becomes clickable.
 */
.gmu-channel--branded.is-pending {
	opacity: .82;
	filter: none;
	background: #fff;
	border-style: dashed;
	box-shadow: none;
}
.gmu-channel--branded.is-pending:hover { background: #fff; box-shadow: none; }
.gmu-section--dark .gmu-channel--branded.is-pending { background: #fff; }

/* ==========================================================================
   Inline figures — images set with the copy they belong to
   Used where the photographs ARE the content (architectural patterns), so they
   read alongside their description instead of being pooled in a gallery.
   ========================================================================== */

.gmu-figures {
	display: grid;
	gap: var(--gmu-s-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	margin: var(--gmu-s-4) 0 0;
}
.gmu-figure {
	margin: 0;
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gmu-figure:hover { border-color: var(--gmu-steel-300); box-shadow: var(--gmu-shadow); }
.gmu-figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--gmu-surface);
}
.gmu-figure figcaption {
	padding: var(--gmu-s-3);
	font-size: var(--gmu-t-sm);
	color: var(--gmu-body);
	border-top: 1px solid var(--gmu-line);
}
.gmu-figure__title {
	display: block;
	font-weight: 700;
	color: var(--gmu-ink);
	margin-bottom: .2rem;
}

/* A single wide figure between paragraphs. */
.gmu-figure--wide { grid-column: 1 / -1; }
.gmu-figure--wide img { aspect-ratio: 21 / 9; }

/* ==========================================================================
   Referral form — a standalone page form, not the modal
   ========================================================================== */

.gmu-referral { max-width: 46rem; }

.gmu-form__set {
	border: 0;
	border-top: 1px solid var(--gmu-line);
	padding: var(--gmu-s-3) 0 0;
	margin: 0 0 var(--gmu-s-3);
}
.gmu-form__set:first-of-type { border-top: 0; padding-top: 0; }
.gmu-form__legend {
	padding: 0 0 var(--gmu-s-2);
	font-size: var(--gmu-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--gmu-accent-ink);
}
.gmu-form__note {
	margin: var(--gmu-s-2) 0 0;
	font-size: var(--gmu-t-xs);
	color: var(--gmu-muted);
}

.gmu-notice {
	margin: 0 0 var(--gmu-s-3);
	padding: var(--gmu-s-2) var(--gmu-s-3);
	border-left: 3px solid;
	border-radius: var(--gmu-radius);
	font-size: var(--gmu-t-sm);
}
.gmu-notice--ok  { border-color: #1a7f4b; background: #eef8f2; color: #14603a; }
.gmu-notice--bad { border-color: #b3261e; background: #fdefee; color: #8f1d17; }

/* ==========================================================================
   Standards strip on a light ground
   The original rule was written for the hero, where the ground is dark. It now
   also runs directly under the intro band, so give it a legible light form and
   centre it to sit with the band above.
   ========================================================================== */

.gmu-section--tight .gmu-standards {
	margin: 0;
	justify-content: center;
}
.gmu-section--tight .gmu-standards li {
	color: var(--gmu-steel-700);
	border-color: var(--gmu-line);
	background: var(--gmu-surface);
}

/* The intro band and the strip read as one unit — no double gap between. */
.gmu-intro + .gmu-section--tight { padding-block: var(--gmu-s-3) var(--gmu-s-5); }

/* Brand colours for the two channels on the client's own list that the
   handwritten note omitted. */
.gmu-channel--linkedin { --gmu-brand: #0a66c2; }
.gmu-channel--google   { --gmu-brand: #4285f4; }

/* The site's own contact wording, above and below the details columns. */
.gmu-contact__intro,
.gmu-contact__closing {
	max-width: 62ch;
	margin: 0 auto var(--gmu-s-4);
	text-align: center;
	color: #c8d4de;
	font-size: var(--gmu-t-sm);
}
.gmu-contact__closing {
	margin: var(--gmu-s-4) auto 0;
	padding-top: var(--gmu-s-3);
	border-top: 1px solid rgba(255,255,255,.12);
}
.gmu-contact__intro a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); white-space: nowrap; }
.gmu-contact__intro a:hover { color: var(--gmu-accent); border-bottom-color: currentColor; }

/* ==========================================================================
   Density pass
   The layout was reading loose: full-width containers holding short content,
   so rules ran on past the words and columns floated apart with dead space to
   their right. Nothing here changes what the page says — it gives each block a
   measure that matches how much it has to say.
   ========================================================================== */

:root {
	--gmu-s-6: 3.75rem;      /* section rhythm — was 4.5rem */
	--gmu-s-7: 5.25rem;
	--gmu-measure: 72rem;    /* the widest a block of copy should ever run */
}

.gmu-section { padding-block: var(--gmu-s-6); }
.gmu-section--tight { padding-block: var(--gmu-s-4); }

.gmu-head { margin-bottom: var(--gmu-s-3); }
.gmu-head p { font-size: var(--gmu-t-base); }
.gmu-head--center p { max-width: 58ch; }

/* --- intro band ---------------------------------------------------------- */

.gmu-intro__inner { max-width: 62rem; margin-inline: auto; }
.gmu-intro__contact { margin-top: var(--gmu-s-2); }

/* The contact row sits inside the band, separated by a rule rather than by a
   pile of whitespace. */
.gmu-channels--intro {
	margin-top: var(--gmu-s-3);
	padding-top: var(--gmu-s-3);
	border-top: 1px solid var(--gmu-line);
}
.gmu-channels--intro .gmu-channels__title {
	font-size: var(--gmu-t-xs);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--gmu-muted);
	margin: 0 0 .65rem;
}
.gmu-channels--intro .gmu-channels__list { justify-content: center; }

/* --- applications: a dense grid, not a long ladder ----------------------- */

.gmu-applications {
	columns: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	gap: .4rem;
}
.gmu-applications li {
	border-bottom: 0;
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
	background: var(--gmu-white);
	padding: .6rem .75rem .6rem 1.55rem;
	line-height: 1.35;
}
.gmu-applications li::before { left: .7rem; top: 1.05em; }
@media (max-width: 900px) { .gmu-applications { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gmu-applications { grid-template-columns: 1fr; } }

/* --- global band: copy and branches share the width --------------------- */

.gmu-global__inner {
	max-width: var(--gmu-measure);
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--gmu-s-5);
	align-items: center;
}
.gmu-global__title { max-width: 18ch; }
.gmu-global__lead { max-width: 46ch; font-size: var(--gmu-t-sm); }
.gmu-global__branches {
	margin-top: 0;
	max-width: none;
	grid-template-columns: 1fr;
	gap: .75rem;
}
@media (max-width: 900px) {
	.gmu-global__inner { grid-template-columns: 1fr; gap: var(--gmu-s-4); }
	.gmu-global__title, .gmu-global__lead { max-width: none; }
}

/* --- contact: three tiles, centred, instead of two adrift --------------- */

.gmu-contact { max-width: var(--gmu-measure); margin-inline: auto; }
.gmu-contact__cols {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gmu-s-2);
	margin-bottom: 0;
}
.gmu-contact__card {
	padding: var(--gmu-s-3);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.13);
	border-radius: var(--gmu-radius);
}
.gmu-contact__big { font-size: var(--gmu-t-xl); margin-bottom: .35rem; }
/* WhatsApp reads at the same weight as the two dialable numbers above it; only
   the word is dialled back, so the digits line up with theirs. */
.gmu-contact__big--wa a { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.gmu-contact__wa {
	font-size: var(--gmu-t-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	color: var(--gmu-gold-lite);
}
/* Deep gold is the tone for a light band. A dark band is a .gmu-section too,
   so without the exclusion this overrode the gold-lite above it and put 3.6:1
   deep gold on navy. */
.gmu-section:not(.gmu-section--dark) .gmu-contact__wa { color: var(--gmu-gold-deep); }
.gmu-contact__line { margin: 0 0 .3rem; line-height: 1.45; }
.gmu-contact__line:last-child { margin-bottom: 0; }
.gmu-contact__line a { display: inline-flex; align-items: center; gap: .4rem; }
.gmu-contact__line--muted { color: #8fa2b2 !important; }
.gmu-contact__intro { margin-bottom: var(--gmu-s-3); }
.gmu-contact__closing { margin-top: var(--gmu-s-3); padding-top: var(--gmu-s-3); }
@media (max-width: 860px) { .gmu-contact__cols { grid-template-columns: 1fr; } }

/* --- payments: match the measure ---------------------------------------- */

.gmu-payments { max-width: var(--gmu-measure); margin-inline: auto; gap: var(--gmu-s-3); }
.gmu-payments img { width: 300px; }

/* --- capabilities and spec panels --------------------------------------- */

.gmu-caps { gap: var(--gmu-s-3); }
.gmu-cap {
	padding: var(--gmu-s-3);
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-radius: var(--gmu-radius);
}
.gmu-section--surface .gmu-cap { background: var(--gmu-white); }

/* --- inner pages: copy should not run the full 1200px ------------------- */

.gmu-prose > * { max-width: 74ch; }
.gmu-prose h2 { margin-top: var(--gmu-s-4); }
.gmu-prose h3 { margin-top: var(--gmu-s-3); }
.gmu-prose p { margin-bottom: var(--gmu-s-2); }
.gmu-rule { margin-block: var(--gmu-s-4); }

.gmu-ticks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .35rem; }
.gmu-ticks li { padding: .45rem 0 .45rem 1.35rem; border-bottom: 1px solid var(--gmu-line); }

/* The auto-fit grid is for short specification bullets — two or three words to
   a line. Where an item is a sentence or two of explanation it has to stay in
   one column, or the reader is asked to track two paragraphs side by side and
   an odd item out is stranded alone on the last row.

   Declared here rather than beside the base rule because that rule is restated
   above with the same specificity, and the later declaration wins. */
.gmu-ticks--stack { grid-template-columns: 1fr; }
.gmu-ticks--stack li { padding-block: .7rem; }

/* Consecutive prose runs inside one section shouldn't stack their margins. */
.gmu-section > .gmu-wrap + .gmu-wrap { margin-top: var(--gmu-s-3); }

/* --- footer credit line ------------------------------------------------- */

.site-footer .footer-html,
.site-footer .site-info { text-align: center; }

/* --- product cards: a little less air ----------------------------------- */

.gmu-card__body { padding: var(--gmu-s-2) var(--gmu-s-3) var(--gmu-s-3); }

/* ==========================================================================
   Final polish
   ========================================================================== */

/* The intro band, the standards strip and the first section were reading as
   three separate things with a gap each. Close them up into one opening move. */
.gmu-intro + .gmu-section--tight { padding-block: var(--gmu-s-3) var(--gmu-s-3); }
.gmu-intro + .gmu-section--tight + .gmu-section { padding-top: var(--gmu-s-5); }

/* The closing call to action and the footer share a colour, so they read as one
   block. A hairline says where one ends and the other begins. */
.site-footer { border-top: 1px solid rgba(255,255,255,.10); }

/* Kadence's footer HTML inherits the global paragraph measure, which pins the
   credit line to the left of a 1200px bar. */
.site-footer .footer-html,
.site-footer .footer-html-inner,
.site-footer .site-info { text-align: center !important; }
.site-footer .footer-html p {
	max-width: none;
	margin: 0;
}

/* Section headings sit closer to what they introduce. */
.gmu-section--dark .gmu-head--center { margin-bottom: var(--gmu-s-3); }

/* Category cards: the meta line was floating below the title on its own row. */
.gmu-cat .gmu-card__body { gap: .25rem; }
.gmu-cat .gmu-card__meta { margin: 0; }

/* Spec panels read better a touch tighter. */
.gmu-specpanel__row { padding: .65rem 0; }
.gmu-specpanel__title { padding: var(--gmu-s-2) var(--gmu-s-3); }
.gmu-specpanel__list { padding: 0 var(--gmu-s-3) var(--gmu-s-1); }

/* Expertise list inside the aside panel. */
.gmu-split__aside { padding: var(--gmu-s-3); }
.gmu-expertise li { padding-block: .5rem; }

/* Inline figures: a tighter grid so a row of three does not span 1200px with
   a caption strip of empty space under each. */
.gmu-figures { gap: var(--gmu-s-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.gmu-figure figcaption { padding: .6rem .75rem; font-size: var(--gmu-t-xs); }
.gmu-gallery { gap: var(--gmu-s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* Page hero: less air above and below the title. */
.gmu-pagehero { padding-block: clamp(2.5rem, 5.5vw, 4.25rem); }

/* The referral form should not stretch to the full column. */
.gmu-referral { max-width: 42rem; }

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 600px) {
	/* Two actions of different label lengths were rendering at two different
	   widths, which reads as an accident rather than a pair. */
	.gmu-hero__cta { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: var(--gmu-s-3); }
	.gmu-hero__cta .gmu-btn { width: 100%; }

	/* The reserved slide height only needs to stop the buttons jumping; at this
	   width it was reserving more than the tallest slide uses. */
	.gmu-hero__panel { min-height: 0; }
	.gmu-hero { padding-block: var(--gmu-s-5); }

	.gmu-intro { padding-block: var(--gmu-s-4); }
	.gmu-intro__contact { font-size: var(--gmu-t-xs); }
	.gmu-channels__list { flex-wrap: wrap; }

	/* Spec panels: the label column collapses, so give the value room. */
	.gmu-specpanel__list { padding-inline: var(--gmu-s-3); }
}

/* Figures size to their own content. Stretching them to the tallest in the row
   left an empty white strip under every frame whose caption was suppressed. */
.gmu-figures { align-items: start; }
.gmu-figure figcaption { border-top: 1px solid var(--gmu-line); }

/* ==========================================================================
   Gold
   Sampled from the logo. Used for standing — eyebrows, rules, credentials, the
   footer mark — and never on a control, so orange stays unambiguously "act".
   ========================================================================== */

.gmu-eyebrow--gold { color: var(--gmu-gold-deep); }
.gmu-section--dark .gmu-eyebrow--gold,
.gmu-pagehero .gmu-eyebrow--gold,
.gmu-global .gmu-eyebrow--gold { color: var(--gmu-gold-lite); }

/* The rule under the intro title picks up the logo's gold beside the orange. */
.gmu-intro__title::after {
	background: linear-gradient(90deg, var(--gmu-accent) 0 55%, var(--gmu-gold) 55% 100%);
	width: 72px;
}

/* Section headings on light grounds get a short gold lead-in. */
.gmu-section--surface .gmu-head h2::before,
.gmu-section .gmu-head h2::before {
	content: "";
	display: block;
	width: 34px; height: 2px;
	margin-bottom: .7rem;
	background: var(--gmu-gold);
}
.gmu-head--center h2::before { margin-inline: auto; }
.gmu-section--dark .gmu-head h2::before { background: var(--gmu-gold-lite); }

/* Standards strip: gold hairline instead of another grey box. */
.gmu-section--tight .gmu-standards li {
	border-color: var(--gmu-gold);
	background: var(--gmu-gold-soft);
	color: var(--gmu-gold-deep);
}

/* Spec panel headers carry a gold rule under the navy. */
.gmu-specpanel__title { border-bottom: 2px solid var(--gmu-gold); }

/* Page heroes: a gold hairline where the band meets the page. */
.gmu-pagehero { border-bottom: 2px solid var(--gmu-gold); }
.gmu-hero { border-bottom: 2px solid var(--gmu-gold); }

/* ==========================================================================
   Years in business
   ========================================================================== */

.gmu-years {
	list-style: none;
	margin: var(--gmu-s-4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
	gap: var(--gmu-s-2);
	max-width: 54rem;
}
.gmu-years li {
	padding: .7rem 0 .7rem 1rem;
	border-left: 2px solid var(--gmu-gold);
}
.gmu-years__figure {
	display: block;
	font-size: var(--gmu-t-xl);
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
	line-height: 1.1;
}
.gmu-years__label {
	display: block;
	font-size: var(--gmu-t-xs);
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--gmu-gold-lite);
	margin-top: .2rem;
}

/* On a light ground. */
.gmu-section .gmu-years__figure { color: var(--gmu-ink); }
.gmu-section .gmu-years__label { color: var(--gmu-gold-deep); }

/* The credentials strip is capped at 54rem inside a 1200px wrap, so left-aligned
   it ended a third of the page short and read as though it had been pushed into
   the corner. Centred, the four marks sit under the middle of the copy above.
   Scoped to this band rather than to .gmu-years itself: the same list is used in
   the page banner, where it lines up with left-aligned banner copy. */
/* (centred further down, after the gmu- list reset that would otherwise win) */

.gmu-years--inline {
	display: inline-flex;
	align-items: baseline;
	gap: .3rem;
	padding: .15rem .5rem;
	border: 1px solid var(--gmu-gold);
	border-radius: var(--gmu-radius);
	background: var(--gmu-gold-soft);
	color: var(--gmu-gold-deep);
	font-size: var(--gmu-t-xs);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 700;
	white-space: nowrap;
}

/* ==========================================================================
   About Us — numbered value cards
   ========================================================================== */

.gmu-valuegrid {
	display: grid;
	gap: var(--gmu-s-2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}
.gmu-valuegrid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.gmu-value {
	position: relative;
	padding: var(--gmu-s-3);
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-top: 2px solid var(--gmu-gold);
	border-radius: var(--gmu-radius);
}
.gmu-value__no {
	display: block;
	font-family: var(--gmu-mono);
	font-size: var(--gmu-t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--gmu-gold-deep);
	margin-bottom: .45rem;
}
/* The card number is a paragraph now that these pages are built from blocks:
   there is no bare-<span> block, and a number the owner cannot click is a
   number they cannot correct. Same box as the span it replaced — the rule
   above already sets display:block and the bottom margin, so only the
   paragraph's inherited top margin has to go. */
p.gmu-value__no { margin-top: 0; }

.gmu-value__title { margin: 0 0 .35rem; font-size: var(--gmu-t-lg); }
.gmu-value__text { margin: 0; font-size: var(--gmu-t-sm); color: var(--gmu-body); max-width: none; }

/* A plain aside — copy, not a callout panel. */
.gmu-split__aside--plain {
	background: transparent;
	border: 0;
	border-left: 2px solid var(--gmu-gold);
	border-radius: 0;
	padding: 0 0 0 var(--gmu-s-3);
}
.gmu-split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Photo bands: no card chrome, just the pictures. */
.gmu-figures--plain .gmu-figure {
	border: 0;
	border-radius: var(--gmu-radius);
	background: transparent;
}
.gmu-figures--plain .gmu-figure img { border-radius: var(--gmu-radius); }

/* ==========================================================================
   Product photography
   On Architectural and Fabrication the photographs are the content, so they get
   a larger frame, a real crop ratio and a click-to-enlarge affordance.
   ========================================================================== */

.gmu-figures {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--gmu-s-3);
}
.gmu-figure {
	border: 1px solid var(--gmu-line);
	box-shadow: 0 1px 2px rgba(20,32,43,.05);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gmu-figure img {
	aspect-ratio: 3 / 2;
	transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.gmu-figure:hover,
.gmu-figure:focus-visible {
	border-color: var(--gmu-gold);
	box-shadow: 0 10px 30px rgba(20,32,43,.14);
	transform: translateY(-2px);
}
/* The frame stays put; only the picture moves inside it. */
.gmu-figure { overflow: hidden; }
.gmu-figure:hover img { transform: scale(1.045); }

.gmu-figure.is-zoomable { cursor: zoom-in; position: relative; }
.gmu-figure.is-zoomable::after {
	content: "";
	position: absolute; top: .6rem; right: .6rem;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgba(13,25,38,.62) center / 15px 15px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.6v5.8M7.6 10.5h5.8'/%3E%3C/svg%3E");
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}
.gmu-figure.is-zoomable:hover::after,
.gmu-figure.is-zoomable:focus-visible::after { opacity: 1; }
.gmu-figure:focus-visible { outline: 2px solid var(--gmu-gold); outline-offset: 2px; }

.gmu-figure figcaption {
	background: var(--gmu-white);
	color: var(--gmu-steel-500);
	font-size: var(--gmu-t-xs);
	letter-spacing: .01em;
}

/* Gallery tiles get the same affordance. */
.gmu-gallery__item.is-zoomable { cursor: zoom-in; }
.gmu-gallery__item img { transition: transform .45s cubic-bezier(.2,.6,.2,1); }
.gmu-gallery__item:hover img { transform: scale(1.05); }
.gmu-gallery__item:hover { border-color: var(--gmu-gold); }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.gmu-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(6, 12, 18, .93);
	backdrop-filter: blur(3px);
}
.gmu-lightbox[hidden] { display: none; }

.gmu-lightbox__frame {
	margin: 0;
	max-width: min(1100px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.gmu-lightbox__frame img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	width: auto; height: auto;
	margin-inline: auto;
	border-radius: var(--gmu-radius);
	border: 1px solid rgba(var(--gmu-gold-rgb),.35);
	background: #0d1926;
}
.gmu-lightbox figcaption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--gmu-s-3);
	color: #cbd7e1;
	font-size: var(--gmu-t-sm);
}
.gmu-lightbox__count {
	font-family: var(--gmu-mono);
	font-size: var(--gmu-t-xs);
	color: var(--gmu-gold-lite);
	white-space: nowrap;
}

.gmu-lightbox__x,
.gmu-lightbox__nav {
	position: absolute;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	color: #fff;
	border-radius: var(--gmu-radius);
	cursor: pointer;
	line-height: 1;
	transition: background-color .15s ease, border-color .15s ease;
}
.gmu-lightbox__x:hover,
.gmu-lightbox__nav:hover { background: rgba(255,255,255,.18); border-color: var(--gmu-gold); }
.gmu-lightbox__x:focus-visible,
.gmu-lightbox__nav:focus-visible { outline: 2px solid var(--gmu-gold); outline-offset: 2px; }

.gmu-lightbox__x {
	top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
	width: 44px; height: 44px;
	font-size: 26px;
}
.gmu-lightbox__nav {
	top: 50%; transform: translateY(-50%);
	width: 46px; height: 64px;
	font-size: 30px;
}
.gmu-lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.gmu-lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 560px) {
	.gmu-lightbox__nav { width: 40px; height: 52px; font-size: 24px; }
	.gmu-lightbox__frame img { max-height: calc(100vh - 11rem); }
}

/* ==========================================================================
   Footer mark
   ========================================================================== */

.gmu-footer-logo {
	display: block;
	margin: 0 0 var(--gmu-s-3);
}
/* The stacked lockup needs height to read, and the footer has height to give —
   nothing below it is competing for the space the way the sticky header is. */
.gmu-footer-logo img {
	width: auto;
	height: auto;
	max-height: 176px;
	max-width: 300px;
	margin-inline: auto;
	display: block;
	opacity: .95;
	transition: opacity .15s ease;
}
@media screen and (max-width: 560px) {
	.gmu-footer-logo img { max-height: 118px; max-width: 200px; }
}
.gmu-footer-logo a:hover img { opacity: 1; }
.site-footer .footer-html p { margin: 0; }

/* The four pages that belong in a footer rather than in the main navigation.
   Flex rather than dot-separated text so a narrow phone wraps them into two
   tidy rows instead of breaking a line in the middle of a separator. */
.gmu-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem 1.25rem;
	margin: 0 0 var(--gmu-s-2);
}
.site-footer .gmu-footer-legal a {
	/* 24px of vertical target on a line of 12px text — WCAG 2.5.8. */
	padding: .3rem 0;
	display: inline-block;
}

/* The product pages, lifted out of the header so the menu holds one line on a
   laptop. Same shape as the legal row directly beneath it, one step brighter:
   these are routes into the catalogue, not small print. */
.gmu-footer-products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem 1.5rem;
	margin: 0 0 var(--gmu-s-2);
	font-weight: 600;
}
.site-footer .gmu-footer-products a {
	padding: .3rem 0;
	display: inline-block;
}

/* ==========================================================================
   Six-column photo bands
   Three frames to a row, with the last row filling the width rather than
   leaving one frame stranded on its own line.
   ========================================================================== */

.gmu-figures--six {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gmu-figure--span2 { grid-column: span 2; }
.gmu-figure--span3 { grid-column: span 3; }
.gmu-figure--span6 { grid-column: span 6; }
.gmu-figure--span3 img { aspect-ratio: 2 / 1; }
.gmu-figure--span6 img { aspect-ratio: 3 / 1; }

@media (max-width: 900px) {
	.gmu-figures--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gmu-figure--span2,
	.gmu-figure--span3 { grid-column: span 1; }
	.gmu-figure--span6 { grid-column: span 2; }
	.gmu-figure--span3 img { aspect-ratio: 3 / 2; }
	.gmu-figure--span6 img { aspect-ratio: 2 / 1; }
}
@media (max-width: 520px) {
	.gmu-figures--six { grid-template-columns: 1fr; }
	.gmu-figure--span2,
	.gmu-figure--span3,
	.gmu-figure--span6 { grid-column: span 1; }
	.gmu-figure--span3 img,
	.gmu-figure--span6 img { aspect-ratio: 3 / 2; }
}

/* Five commitments read better across one row than four and an orphan. */
.gmu-valuegrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.25rem), 1fr)); }
@media (max-width: 1100px) { .gmu-valuegrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } }

/* The lightbox controls are chrome, not calls to action — the theme's global
   button colour was painting them safety orange, which reads as "click me to
   buy something". Neutral on the overlay, gold only on hover. */
.gmu-lightbox button.gmu-lightbox__x,
.gmu-lightbox button.gmu-lightbox__nav {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	padding: 0;
	font-weight: 400;
	box-shadow: none;
}
.gmu-lightbox button.gmu-lightbox__x:hover,
.gmu-lightbox button.gmu-lightbox__nav:hover {
	background: rgba(255, 255, 255, .2);
	border-color: var(--gmu-gold);
	color: #fff;
}

/* ==========================================================================
   Review fixes
   ========================================================================== */

/* CONTRAST. `.gmu-head p` sets the light-ground secondary grey directly, which
   beats the dark section's inherited colour — so the deck under every dark
   heading ("Contact us today", "Request a quote") was painting #4a5f72 on
   #0d1926: 2.7:1, well under the 4.5:1 minimum. Fixed at the system level so it
   holds for any dark section, not just the two that have one today. */
.gmu-section--dark .gmu-head p,
.gmu-pagehero .gmu-head p,
.gmu-global .gmu-head p { color: #c3d0da; }

/* GOLD, NOT ORANGE. Orange is the action colour; every eyebrow and standing
   label is non-interactive and belongs to the logo's gold. The --gold modifier
   already existed but had to be applied by hand at each call site, which is a
   rule nobody can keep — so the default itself now carries gold, and the
   modifier stays as an explicit affirmation. */
.gmu-eyebrow { color: var(--gmu-gold-deep); }
.gmu-section--dark .gmu-eyebrow,
.gmu-pagehero .gmu-eyebrow,
.gmu-global .gmu-eyebrow,
.gmu-hero .gmu-eyebrow { color: var(--gmu-gold-lite); }

.gmu-hero__promise { color: var(--gmu-gold-lite); }
.gmu-pagehero .gmu-hero__promise { color: var(--gmu-gold-lite); }

.gmu-global__label { color: var(--gmu-gold-lite); }
.gmu-contact .gmu-eyebrow { color: var(--gmu-gold-lite); }

/* Standing rules and list markers go gold; the accent bar stays orange only
   where it marks something you can act on. */
.gmu-split__aside { border-left-color: var(--gmu-gold); }
.gmu-applications li::before,
.gmu-expertise li::before,
.gmu-ticks li::before { background: var(--gmu-gold); }

/* LIST ALIGNMENT. The theme's default ul padding pushed every one of these
   lists 34px right of its own heading, so the credentials strip and the
   applications grid never lined up with the copy above them, and the centred
   icon rows sat off-centre. */
.entry-content ul[class^="gmu-"],
.entry-content ul[class*=" gmu-"],
ul.gmu-years,
ul.gmu-standards,
ul.gmu-applications,
ul.gmu-expertise,
ul.gmu-ticks,
ul.gmu-channels__list {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

/*
 * …except the credentials strip. It is capped at 54rem inside a 1200px wrap, so
 * the `margin-left: 0` above pinned it to the left edge and left a third of the
 * row empty on the right. It belongs in the middle of the page, under the copy
 * it qualifies. This has to sit after the reset: `.entry-content ul[class^=…]`
 * carries an attribute selector, so it outranks a two-class rule placed earlier.
 */
.gmu-section--credentials ul.gmu-years { margin-inline: auto; }

/* MEASURE. Paragraphs were running the full 1200px while the lists beside them
   were capped at 74ch, so half the page sat empty next to every list. One
   measure for both; `.gmu-prose p` needs naming directly because it outweighs
   `.gmu-prose > *`.

   Widened and centred. The measure was set when the prose wrapper was 1200px
   and the photographs beside it were the same width, so a column pinned to the
   left shared an edge with them. The picture sections now run 1400px, which
   left a 74ch column filling half its own wrapper with 682px of empty page
   beside it — copy stranded down one side rather than a column with a left
   edge.

   The measure sits on the wrapper rather than on each child. Centring the
   children individually only moved the paragraphs: every heading and button
   row carries its own `margin` shorthand, which zeroes the side margins again
   at a higher specificity, so the headings stayed pinned left of the copy they
   introduce. Sizing the column itself moves everything in it together, and
   `.gmu-wrap`'s own `margin-inline: auto` does the centring. */
.gmu-wrap.gmu-prose,
.gmu-section--pictures .gmu-wrap.gmu-prose {
	width: min(90ch, 100% - 3rem);
	max-width: none;
	margin-inline: auto;
}
.gmu-prose p,
.gmu-prose ul,
.gmu-prose ol,
.gmu-prose > * { max-width: none; }
.gmu-prose > .gmu-head { max-width: none; }

/* A stray <br> at the top of the imported content opened a white gap between
   the dark header and the dark page hero. */
.entry-content > br:first-child,
.entry-content > p:empty { display: none; }

/* `.gmu-split__lead p` and friends outrank a bare class, so the eyebrow needs
   the element name to hold its colour wherever it is placed. */
p.gmu-eyebrow { color: var(--gmu-gold-deep); }
.gmu-section--dark p.gmu-eyebrow,
.gmu-pagehero p.gmu-eyebrow,
.gmu-global p.gmu-eyebrow,
.gmu-hero p.gmu-eyebrow,
.gmu-contact p.gmu-eyebrow { color: var(--gmu-gold-lite); }
p.gmu-hero__promise { color: var(--gmu-gold-lite); }

/* Kadence prints its own archive title band on the catalogue, which landed a
   grey "Shop" strip between our page hero and the products — two titles for
   one page. Our hero carries the title. */
.woocommerce .entry-hero-container,
.woocommerce-page .entry-hero-container,
.post-type-archive-product .entry-hero,
.tax-product_cat .entry-hero,
.woocommerce-products-header { display: none !important; }

/* The catalogue's own top padding, now that the hero sits above it. */
.woocommerce .site-main > .content-container,
.woocommerce-page .site-main > .content-container { padding-top: var(--gmu-s-5); }

/* Result count and sort control sit as one quiet row. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	font-size: var(--gmu-t-sm);
	color: var(--gmu-muted);
}

/* ==========================================================================
   FAQ
   Native <details>, so it works with no JavaScript and is keyboard-operable
   and searchable by the browser's own find-in-page.
   ========================================================================== */

.gmu-faq { max-width: 58rem; display: grid; gap: .5rem; }

.gmu-faq__item {
	background: var(--gmu-white);
	border: 1px solid var(--gmu-line);
	border-left: 2px solid var(--gmu-gold);
	border-radius: var(--gmu-radius);
	overflow: hidden;
}
.gmu-faq__item[open] { box-shadow: var(--gmu-shadow); }

/* The question is matched two ways on purpose. Hand-written FAQ markup carries
   .gmu-faq__q; the block editor's details block renders a bare <summary> and
   gives no way to put a class on it, so the element itself is the hook. Both
   forms are live on the site, and both have to look the same. */
.gmu-faq__q,
.gmu-faq__item > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--gmu-s-2) var(--gmu-s-3);
	padding-right: 2.75rem;
	position: relative;
	font-weight: 700;
	color: var(--gmu-ink);
	font-size: var(--gmu-t-base);
	line-height: 1.4;
}
.gmu-faq__q::-webkit-details-marker,
.gmu-faq__item > summary::-webkit-details-marker { display: none; }
.gmu-faq__q::after,
.gmu-faq__item > summary::after {
	content: "";
	position: absolute;
	right: var(--gmu-s-3);
	top: 50%;
	width: 11px; height: 11px;
	margin-top: -6px;
	border-right: 2px solid var(--gmu-gold-deep);
	border-bottom: 2px solid var(--gmu-gold-deep);
	transform: rotate(45deg);
	transition: transform .18s ease;
}
.gmu-faq__item[open] .gmu-faq__q::after,
.gmu-faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.gmu-faq__q:hover,
.gmu-faq__item > summary:hover { color: var(--gmu-accent-ink); }
.gmu-faq__q:focus-visible,
.gmu-faq__item > summary:focus-visible { outline: 2px solid var(--gmu-gold); outline-offset: -2px; }

.gmu-faq__a {
	padding: 0 var(--gmu-s-3) var(--gmu-s-3);
	border-top: 1px solid var(--gmu-line);
	padding-top: var(--gmu-s-2);
}
.gmu-faq__a p { margin: 0; font-size: var(--gmu-t-sm); color: var(--gmu-body); max-width: 62ch; }

/* FAQ groups: heading left, questions right, so the accordions do not sit in a
   narrow column with half the page empty beside them. */
.gmu-faqgroup {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: var(--gmu-s-4);
	align-items: start;
}
.gmu-faqgroup__head h2 { margin: 0; font-size: var(--gmu-t-xl); }
.gmu-faqgroup__head h2::before {
	content: "";
	display: block;
	width: 34px; height: 2px;
	margin-bottom: .7rem;
	background: var(--gmu-gold);
}
.gmu-faqgroup .gmu-faq { max-width: none; }
@media (max-width: 860px) {
	.gmu-faqgroup { grid-template-columns: 1fr; gap: var(--gmu-s-3); }
}


/* ==========================================================================
   Contact page — form first, details beside it
   ========================================================================== */

/*
 * The enquiry form is why this page exists, so it takes the wide column and the
 * details sit beside it. Below 60rem they stack with the form still first.
 */
.gmu-contactpage {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 60rem) {
	.gmu-contactpage { grid-template-columns: 1fr; }
}

.gmu-contactpage__form > h2 { margin: 0 0 .75rem; }
.gmu-contactpage__form > p  { margin: 0 0 2rem; max-width: 58ch; }

.gmu-contactpage__aside {
	background: var(--gmu-surface, #f4f6f8);
	border: 1px solid rgba(13, 25, 38, .08);
	border-top: 3px solid var(--gmu-gold, #d0a343);
	border-radius: 4px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.gmu-contactpage__asideTitle {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	margin: 0 0 .75rem;
}

.gmu-contactpage__aside > p {
	margin: 0 0 1.75rem;
	font-size: 1.02rem;
	line-height: 1.65;
}

/* ---- stacked detail rows ---- */

.gmu-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}

.gmu-detail {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: .85rem;
	align-items: start;
}

.gmu-detail__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(var(--gmu-gold-rgb), .14);
	color: var(--gmu-gold-deep, #96742a);
	flex: none;
}

.gmu-detail__body { display: grid; gap: .2rem; min-width: 0; }

.gmu-detail__label {
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gmu-gold-deep, #96742a);
}

.gmu-detail__line {
	font-size: 1.02rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.gmu-detail__big { font-size: 1.25rem; font-weight: 700; }

.gmu-detail__muted { color: #5a6a78; font-size: .92rem; }

.gmu-detail a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(13, 25, 38, .2); }
.gmu-detail a:hover,
.gmu-detail a:focus-visible { color: var(--gmu-gold-deep, #96742a); border-bottom-color: currentColor; }

/* ---- named channels ----
 *
 * In the footer the row is a set of marks you recognise at a glance. On the
 * contact page it is the actual directory, so each one is named — and the ones
 * without an account yet say so instead of looking broken.
 */
.gmu-channels--labelled .gmu-channels__list {
	display: grid;
	/* 15rem, not 13: at 13 "Instagram" broke mid-word and "Google Business
	   Profile" wrapped to three lines once the status badge took its share. */
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: .75rem;
	margin-top: 2rem;
}

.gmu-channels--labelled .gmu-channel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .25rem .75rem;
	width: 100%;
	height: auto;
	min-height: 3.6rem;
	padding: .7rem 1rem;
	border-radius: 4px;
	background: #fff;
	border: 1px solid rgba(13, 25, 38, .1);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.gmu-channels--labelled .gmu-channel:hover,
.gmu-channels--labelled .gmu-channel:focus-visible {
	border-color: var(--gmu-gold, #d0a343);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(13, 25, 38, .07);
}

.gmu-channels--labelled .gmu-channel__name {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--gmu-ink, #0d1926);
	line-height: 1.25;
	/* Wrap between words only — never split "Instagram" across two lines. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	/* Anchored to the icon rather than centred in the leftover space. */
	text-align: left;
	justify-self: start;
}

.gmu-channels--labelled .gmu-channel.is-pending {
	background: transparent;
	border-style: dashed;
	opacity: .62;
}

/*
 * The status sits under the name in the same column rather than beside it, so
 * a long name gets the full width instead of competing with the badge.
 */
.gmu-channels--labelled .gmu-channel__soon {
	grid-column: 2;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7a88;
	white-space: nowrap;
	line-height: 1;
}

/* ---- refer a friend ---- */

.gmu-refercta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3rem);
	border: 1px solid rgba(var(--gmu-gold-rgb), .35);
	border-left: 3px solid var(--gmu-gold, #d0a343);
	border-radius: 4px;
	background: var(--gmu-gold-soft, #faf4e6);
}

@media (max-width: 48rem) {
	.gmu-refercta { grid-template-columns: 1fr; }
	.gmu-refercta__mark { display: none; }
}

.gmu-refercta__body > h2 { margin: 0 0 .75rem; }
.gmu-refercta__body > p  { margin: 0 0 1rem; max-width: 62ch; }
.gmu-refercta__actions   { margin: 1.5rem 0 0 !important; }

.gmu-refercta__mark { color: var(--gmu-gold, #d0a343); opacity: .35; line-height: 0; }
.gmu-refercta__mark svg { width: 6rem; height: 6rem; }

/* ==========================================================================
   World map — the company's own artwork from the original contact page
   ========================================================================== */

/*
 * The artwork has a solid black ground, so it sits on the dark band where the
 * edge reads as a deliberate frame rather than a black box dropped onto white.
 */
.gmu-worldmap {
	margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
	max-width: 75rem;
	border: 1px solid rgba(var(--gmu-gold-rgb), .3);
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
	background: #000;
}

.gmu-worldmap__img {
	display: block;
	width: 100%;
	height: auto;
}
/*
 * A centred head is capped narrow so a deck stays readable, but a short heading
 * with a long compound ("Manufacturing in New York, supplying worldwide") then
 * breaks in the wrong place. This lifts the cap for the heading only.
 */
.gmu-head--wide { max-width: 56rem; }
.gmu-head--wide h2 { max-width: none; text-wrap: balance; }
/*
 * A four-across figure row, for photograph sets that come as a group of four —
 * the architectural lattice and ornamental security ranges. Steps down to two
 * on tablet and one on phone rather than shrinking a grille photograph past the
 * point where the bar spacing is readable.
 */
.gmu-figures--four {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gmu-s-3, 1.25rem);
	align-items: start;
}

@media (max-width: 62rem) {
	.gmu-figures--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
	.gmu-figures--four { grid-template-columns: 1fr; }
}

.gmu-figures--four .gmu-figure figcaption strong {
	display: block;
	color: var(--gmu-gold-deep, #96742a);
	letter-spacing: .04em;
}
/* The pattern code sits on a dark caption bar on Architectural, where the deep
   gold meant for light grounds read 3.7:1. Same leak as the WhatsApp label. */
.gmu-section--dark .gmu-figures--four .gmu-figure figcaption strong,
.gmu-section--pictures .gmu-figures--four .gmu-figure figcaption strong {
	color: var(--gmu-gold-lite);
}
/* ==========================================================================
   Standalone enquiry action  [gmu_ask]
   ========================================================================== */

/*
 * On a catalogue card the action bar is hidden until the card is hovered. Used
 * on its own — under a grille pattern heading on the Architectural page — there
 * is no card to hover, so it would never appear. This wrapper opts out of the
 * reveal and gives the bar the padding a card would otherwise supply.
 */
.gmu-ask { margin: var(--gmu-s-3, 1.25rem) 0 var(--gmu-s-4, 2rem); }

.gmu-ask .gmu-actions {
	opacity: 1;
	transform: none;
	padding: 0;
	gap: .6rem;
}

.gmu-ask .gmu-actions__ask {
	flex: 0 0 auto;
	padding: .7rem 1.35rem;
	font-size: var(--gmu-t-sm, .9rem);
}

.gmu-ask .gmu-actions__ico {
	border: 1px solid var(--gmu-line, #d9e0e6);
	background: #fff;
}

/*
 * On a dark band this reset cleared the border and the background but left the
 * glyph on the light-ground steel, so the WhatsApp/mail/phone icons were being
 * drawn at 2.7:1 on navy — the same oversight the product-card version of this
 * bar already fixes further down. `currentColor` feeds the SVG, so setting the
 * colour here is what actually paints the icon.
 */
.gmu-section--dark .gmu-ask .gmu-actions__ico {
	border-color: rgba(255, 255, 255, .22);
	background: transparent;
	color: #f2e6cc;
}
.gmu-section--dark .gmu-ask .gmu-actions__ico:hover,
.gmu-section--dark .gmu-ask .gmu-actions__ico:focus-visible {
	border-color: var(--gmu-gold);
	color: #fff;
}
/* ==========================================================================
   Two phone numbers
   The header item stays the first number so one tap still dials; hovering it
   drops the second one down, and the contact card lists them one under the
   other.
   ========================================================================== */

/* Set to the size of the number in the bar above it, not to the smaller
   sub-menu size — it is the same kind of thing, an equal way to reach the
   company, so it should not read as small print hanging off the real one.
   The !important matches the one on the sub-menu colour rule it overrides. */
.gmu-menu-phone__number > a {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-size: 1.0625rem !important;
	font-weight: 700;
	letter-spacing: .03em;
	padding: .6rem 1rem !important;
	text-align: center;
}
@media (max-width: 1200px) {
	.gmu-menu-phone__number > a { font-size: 1rem !important; }
}

/* The second number is the same size as the first — it is an equal way to
   reach the company, not a footnote to the real one. */
.gmu-contact__big--second { margin-top: .15rem; }

.gmu-detail__body .gmu-detail__big + .gmu-detail__big { margin-top: .1rem; }

/* ==========================================================================
   Product grid on a dark ground
   Runs in two places: the shop archive and the "Our product line" section on
   the homepage. Both are the same WooCommerce loop, so both are named here.

   This is a re-skin of the card built further up this file, not a second one —
   the column layout, the 4:3 picture and the hover overlay all still come from
   there. What changes is the ground it sits on. Every product photograph is
   galvanized or grey steel shot full-frame, and on a white page the pale bars
   bleed into it. Navy-900 is the footer's own colour, so the band belongs to
   the site rather than arriving as a one-off panel.

   The live site bakes its caption into the picture: a 501x657 JPEG whose top
   501x375 is the photograph and whose remaining 282px is black with the name,
   item number and a Shop Now button drawn on. We reproduce that split for real
   — photo cropped to 501x375, caption set in HTML underneath — which is why the
   thumbnail is 4:3 and not the portrait its stored size first suggests.

   `!important` throughout, matching the card rules above: Kadence paints this
   component from its own light palette and those rules already had to be beaten
   the same way.
   ========================================================================== */

.post-type-archive-product #primary.content-area {
	background: var(--gmu-navy-900);
	color: #c8d4de;
	/* Butts straight up under the dark page hero and straight down onto the
	   footer, so the three read as one ground. Kadence's margin sits outside
	   the background and showed as a white gap at both ends; padding does the
	   same spacing job from inside the colour. */
	margin-block: 0;
	padding-block: var(--gmu-s-5);
}

/*
 * The card is lifted off the band rather than matching it — a white film thin
 * enough to stay in the navy family, which means it sits correctly on the shop
 * band and the homepage section without a second colour being hard-coded for
 * each. The gold is the site's own (#d0a343), a hair warmer than the spec's
 * #d4af37 and already the colour of every other rule on the site.
 */
:is(.post-type-archive-product, .home) ul.products li.product.entry {
	background: rgba(255, 255, 255, .045) !important;
	border: 1px solid rgba(var(--gmu-gold-rgb), .28) !important;
	border-radius: 8px;
	box-shadow: none !important;
	/* The card reserves 1.25rem under the caption. On white that was invisible;
	   on navy it left the band showing between the panel and the gold rule —
	   the gap in the stroke. The caption runs to the frame instead. */
	padding-bottom: 0 !important;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
:is(.post-type-archive-product, .home) ul.products li.product.entry:hover {
	border-color: var(--gmu-gold) !important;
	box-shadow: 0 4px 20px rgba(var(--gmu-gold-rgb), .18) !important;
}

/* The picture butts onto the caption the way the live site's does, parted by a
   hairline rather than by a strip of card showing between the two. */
:is(.post-type-archive-product, .home) ul.products li.product img {
	margin-bottom: 0 !important;
	background: var(--gmu-navy-900);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* The caption sits directly on the card surface, so the panel itself carries no
   colour of its own. Horizontal padding stays on the children, which is where
   the card above puts it — setting it here too would double it. */
:is(.post-type-archive-product, .home) ul.products li.product .product-details {
	background: transparent !important;
	padding-block: var(--gmu-s-3) !important;
}

/* --- caption text -------------------------------------------------------- */

:is(.post-type-archive-product, .home) ul.products li.product .woocommerce-loop-product__title,
:is(.post-type-archive-product, .home) ul.products li.product .woocommerce-loop-product__title a {
	color: #f8fafc !important;
	font-weight: 600;
	line-height: 1.35;
}
:is(.post-type-archive-product, .home) ul.products li.product .product-excerpt p {
	color: #b9c8d4 !important;
	line-height: 1.55;
}

/* The caption is centred, as the live site's is: title, item number and the way
   in read as one stack rather than three lines hanging off the left edge. */
:is(.post-type-archive-product, .home) ul.products li.product .woocommerce-loop-product__title,
:is(.post-type-archive-product, .home) ul.products li.product .product-excerpt,
:is(.post-type-archive-product, .home) ul.products li.product .gmu-card__meta {
	text-align: center;
}

/*
 * The item number carries the same weight as the title — buyers quote it down
 * the phone, so it is set at the title's size rather than as small print.
 * `margin-top: auto` in the card's flex column drops it to the foot of the card
 * whatever length the title runs to, so the numbers line up across a row
 * instead of floating at three different heights.
 */
:is(.post-type-archive-product, .home) ul.products li.product .gmu-card__meta {
	order: 10;
	margin-top: auto;
	padding-top: var(--gmu-s-2);
	font-family: var(--gmu-mono);
	font-size: var(--gmu-t-base);
	/* Still tracked out, but less than small print wants — at this size .12em
	   pushed the longer codes onto a second line. */
	letter-spacing: .06em;
	text-transform: uppercase;
	/* The same gold as the button under it and the card's own stroke, and
	   heavier — this is the string buyers read down the phone. */
	font-weight: 700;
	color: var(--gmu-gold) !important;
}

/*
 * "Shop now" closes the card, the way the live site's does. Gold filled rather
 * than outlined: everything else here is a thin gold line, so the one thing
 * meant to be pressed should not be another one.
 */
ul.products li.product .gmu-card__shop {
	order: 11;
	align-self: center;
	margin: var(--gmu-s-3) var(--gmu-s-3) 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 11rem;
	padding: .62rem 1.4rem;
	border: 1px solid var(--gmu-gold);
	border-radius: 4px;
	background: var(--gmu-gold);
	color: #14202b;
	font-size: var(--gmu-t-xs);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
ul.products li.product .gmu-card__shop:hover,
ul.products li.product .gmu-card__shop:focus-visible {
	background: var(--gmu-gold-lite);
	border-color: var(--gmu-gold-lite);
	color: #0d1926;
}

.post-type-archive-product .kadence-woo-results-count,
.post-type-archive-product .woocommerce-result-count { color: #a9bcc9; }

/*
 * The count beside it was rescued above; the sort control next to it was not,
 * and was still being drawn in the light-ground small-print grey on the navy
 * band. Same for Kadence's grid/list toggle, which takes its inactive colour
 * from --global-palette5 — our own muted token — and so followed it onto the
 * dark ground. The <option> list is painted for a light menu because that is
 * what the operating system draws it on, whatever the page behind it.
 */
.post-type-archive-product .woocommerce-ordering select,
.post-type-archive-product .kadence-toggle-shop-layout {
	color: #a9bcc9;
	border-color: rgba(255, 255, 255, .2);
	background-color: transparent;
}
.post-type-archive-product .woocommerce-ordering select option {
	color: var(--gmu-ink);
	background-color: #fff;
}
/* The selected view is the one Kadence paints from --global-palette5, which is
   our own small-print grey — so the *active* toggle was the dark one. Gold puts
   the emphasis where the selection is, and needs the container in the selector
   to outweigh Kadence's own two-class rule. */
.post-type-archive-product .kadence-product-toggle-container .kadence-toggle-shop-layout.toggle-active,
.post-type-archive-product .kadence-product-toggle-container .kadence-toggle-shop-layout:hover {
	color: var(--gmu-gold-lite);
	border-color: var(--gmu-gold-lite);
	background: transparent;
}

/*
 * Kadence sets 2.5rem between cards. Measured against the live site at the same
 * 1800px viewport, its tiles are 450px apart by only 17 — the cards almost touch
 * and the grid reads as one block of catalogue rather than as nine things
 * floating in a lot of navy. 1rem is that spacing.
 */
:is(.post-type-archive-product, .home) ul.products.grid-cols {
	gap: 1rem;
}

/* --- actions ------------------------------------------------------------- */

/*
 * The hover overlay itself is the one built above — it already covers the whole
 * picture. Only the buttons on it are restated, outlined in the frame's gold
 * rather than the white they carried, which on a dark scrim over a dark card
 * was the loudest thing on the page.
 */
:is(.post-type-archive-product, .home) ul.products li.product .product-action-wrap {
	background: rgba(9, 17, 26, .86) !important;
}
:is(.post-type-archive-product, .home) ul.products li.product .gmu-actions__view,
:is(.post-type-archive-product, .home) ul.products li.product .gmu-actions__ico {
	background: rgba(var(--gmu-gold-rgb), .1) !important;
	border-color: rgba(var(--gmu-gold-rgb), .55) !important;
	color: #f2e6cc !important;
}
:is(.post-type-archive-product, .home) ul.products li.product .gmu-actions__view:hover,
:is(.post-type-archive-product, .home) ul.products li.product .gmu-actions__view:focus-visible,
:is(.post-type-archive-product, .home) ul.products li.product .gmu-actions__ico:hover,
:is(.post-type-archive-product, .home) ul.products li.product .gmu-actions__ico:focus-visible {
	background: rgba(var(--gmu-gold-rgb), .24) !important;
	border-color: var(--gmu-gold) !important;
	color: #fff !important;
}

/*
 * 19 does not divide by three: laid out 3-across, the last row holds one tile
 * and two holes. Six columns is the common denominator — the first fifteen take
 * two columns each, which is still three to a row, and the final four take three
 * each, which is two to a row running the full width. Seven full rows, no holes.
 *
 * Uniform tiles were tried instead and reverted: the owner would rather have
 * four larger tiles at the end than any empty cell on the page, which is his
 * call to make.
 * Desktop only; below 1025px Kadence's own 2-column rule runs.
 */
@media screen and (min-width: 1025px) {
	/*
	 * Measured off the live site at an 1800px viewport: its product grid runs
	 * 1383px wide, three tiles of 450 with 17px between them. At this site's
	 * usual 1200px measure the same three-up lands at 370 and the catalogue
	 * reads smaller than the real one. 1400 reproduces it — six columns and five
	 * 1rem gaps means tile = (W - 80) / 3 + 16, so 1400 gives 456.
	 */
	.post-type-archive-product .content-container.site-container {
		max-width: min(1400px, 100% - 3rem);
	}
	/* .gmu-wrap is sized with `width`, not `max-width`, so a max-width override
	   here would be ignored — the width has to be restated. */
	.gmu-section--products .gmu-wrap {
		width: min(1400px, 100% - 3rem);
		max-width: none;
	}
	:is(.post-type-archive-product, .home) ul.products.grid-cols {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	:is(.post-type-archive-product, .home) ul.products.grid-cols > li.product {
		grid-column-end: span 2;
	}
	/* The final four take three columns each — two to a row, each half the grid,
	   so the pair spans exactly the width the three above it do. */
	:is(.post-type-archive-product, .home) ul.products.grid-cols > li.product:nth-last-child(-n + 4) {
		grid-column-end: span 3;
	}
}

/* --- enquiry form set into the product page ------------------------------ */
/*
 * The modal's form on a dark band, as a section of the product page. Fields are
 * inverted from the light modal palette rather than restyled: same shapes, same
 * spacing, so a customer who has seen one recognises the other.
 */
.gmu-inquiry-inline__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.gmu-inquiry-inline__title { color: #fff; margin: 0 0 .35rem; }
.gmu-inquiry-inline__item {
	font-family: var(--gmu-mono);
	font-size: var(--gmu-t-sm);
	letter-spacing: .06em;
	color: var(--gmu-gold-lite);
	margin: 0 0 var(--gmu-s-4);
}
.gmu-form--inline { text-align: left; }
.gmu-form--inline label { color: #cddae4; }
.gmu-form--inline input,
.gmu-form--inline textarea {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
}
.gmu-form--inline input:focus,
.gmu-form--inline textarea:focus {
	border-color: var(--gmu-gold);
	outline: 2px solid rgba(var(--gmu-gold-rgb), .35);
	outline-offset: 1px;
}
.gmu-form--inline input::placeholder,
.gmu-form--inline textarea::placeholder { color: #8fa2b2; }
.gmu-form--inline .gmu-form__actions { justify-content: center; }
.gmu-form--inline .gmu-btn--ghost { border-color: rgba(255, 255, 255, .4); color: #fff; }
.gmu-form--inline .gmu-form__status { text-align: center; color: #cddae4; }
.gmu-form--inline .gmu-form__status.is-ok { color: #7ee0a1; }
.gmu-form--inline .gmu-form__status.is-error { color: #ff9b9b; }

/* ==========================================================================
   Picture tiles match the product cards
   Every grid of photographs on the site is the same object as a product card:
   a picture on a lifted dark surface inside a thin gold frame. They were three
   different treatments before — white figure, white category card, dark product
   card — which read as three different kinds of thing on one page.

   The product grid itself is not restated here; it already carries this. This
   is the figures and the category cards catching up to it.
   ========================================================================== */

.gmu-section--pictures .gmu-figure,
.gmu-section--pictures .gmu-card {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(var(--gmu-gold-rgb), .28);
	border-radius: 8px;
	box-shadow: none;
	overflow: hidden;
}
.gmu-section--pictures .gmu-figure:hover,
.gmu-section--pictures .gmu-card:hover,
.gmu-section--pictures .gmu-card:focus-visible {
	border-color: var(--gmu-gold);
	box-shadow: 0 4px 20px rgba(var(--gmu-gold-rgb), .18);
	transform: none;
}

/* The picture butts onto its caption, parted by a hairline — as on the cards. */
.gmu-section--pictures .gmu-figure img,
.gmu-section--pictures .gmu-card__media img {
	background: var(--gmu-navy-900);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/*
 * The caption panel. `.gmu-figure figcaption` further up paints it white for
 * the light pages, and setting only a colour here left pale grey text on a
 * white bar — the one genuinely unreadable thing on the dark band. The
 * background has to be cleared as well as the colour set.
 */
.gmu-section--pictures .gmu-figure figcaption,
.gmu-section--pictures .gmu-card__body {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .07);
	color: #cddae4;
	text-align: center;
	padding: var(--gmu-s-2) var(--gmu-s-3);
}
.gmu-section--pictures .gmu-figure__title,
.gmu-section--pictures .gmu-card__title { color: #f8fafc; }
.gmu-section--pictures .gmu-card__meta { color: var(--gmu-gold); font-weight: 700; }
.gmu-section--pictures .gmu-cat__go { color: var(--gmu-gold-lite); justify-content: center; }

@media screen and (min-width: 1025px) {
	/* Same measure and the same 1rem gutter as the catalogue, so a photograph in
	   a gallery is exactly the size of a photograph on a product card. */
	.gmu-section--pictures .gmu-wrap {
		width: min(1400px, 100% - 3rem);
		max-width: none;
	}
	.gmu-section--pictures .gmu-figures,
	.gmu-section--pictures .gmu-grid {
		gap: 1rem;
	}
	/* The category grid keeps its own count. Four ranges fit on one line, and
	   forcing them to three only to agree with the catalogue would leave a hole
	   in the second row for no gain — the tiles already match in colour, frame
	   and proportion, which is what makes them read as the same object. */
}

/*
 * The gallery page is the same object again. Its tiles are `.gmu-gallery__item`
 * rather than `.gmu-figure` — a separate class for the lightbox behaviour — so
 * they were the one grid of photographs the treatment above missed.
 */
.gmu-section--pictures .gmu-gallery__item {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(var(--gmu-gold-rgb), .28);
	border-radius: 8px;
	box-shadow: none;
}
.gmu-section--pictures .gmu-gallery__item:hover {
	border-color: var(--gmu-gold);
	box-shadow: 0 4px 20px rgba(var(--gmu-gold-rgb), .18);
	transform: none;
}
.gmu-section--pictures .gmu-gallery__item img { background: var(--gmu-navy-900); }

@media screen and (min-width: 1025px) {
	/* Three across, at the catalogue's gutter, so a gallery photograph is the
	   same size as a product photograph. The grid auto-filled at 15rem before,
	   which put five in a row and made these the smallest pictures on the site. */
	.gmu-section--pictures .gmu-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

/*
 * Kadence gives every `figure.wp-block-image` a 2em bottom margin and takes it
 * away again only on `:last-child`. Inside a grid that margin never shows as
 * space between tiles — the gap already does that — it just makes every row
 * 32px taller than the tile standing in it. The last tile is the one with no
 * margin, so it alone stretches to the full row and puts those 32px on show as
 * empty card below its photograph.
 *
 * `.gmu-gallery__item { margin: 0 }` is a class against Kadence's class plus
 * element, and loses. Naming the block class as well as ours wins it back.
 */
.gmu-gallery > figure.wp-block-image.gmu-gallery__item,
.gmu-figures > figure.wp-block-image.gmu-figure {
	margin: 0;
}

/*
 * A figure grid holding one picture collapses to a single track and hands that
 * picture the full 1400px measure, which on About Us made the container shot
 * twice the size of anything else on the page. Held to the width of two tiles
 * and centred, it stays a picture rather than a banner.
 */
.gmu-figures > figure.wp-block-image.gmu-figure:only-child {
	max-width: 46rem;
	margin-inline: auto;
}

/*
 * The same margin, one level up. Every section on a page is a `wp-block-group`,
 * so each one but the last carries 2em below it. A section already sets its own
 * spacing with padding, and that padding is inside its colour while the margin
 * is outside it — which on a dark page drew a white line between the gallery
 * and the band under it. Closing it lets two dark sections read as one ground,
 * the way the catalogue band already does above.
 */
.entry-content > section.wp-block-group.gmu-section {
	margin-block: 0;
}

/* ==========================================================================
   Subsidiary credits
   The two sister companies at the foot of the page, side by side: logo, name,
   and the address of their site, each card clickable. Gold throughout because
   this is standing, not an action — the same reasoning that keeps eyebrows and
   the credentials band gold and off the orange reserved for controls.

   Set as a lockup rather than as their supplied artwork: see gmu_subsidiary()
   in functions.php for what was done to each logo and why.
   ========================================================================== */

.gmu-subsidiary {
	display: block;
	margin-block: var(--gmu-s-4) var(--gmu-s-3);
}
.gmu-subsidiary__label {
	display: block;
	margin-bottom: var(--gmu-s-3);
	color: var(--gmu-gold-lite);
	font-size: var(--gmu-t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* The pair, centred in the footer column, wrapping to a stack when there is no
   room for two.

   Block-level flex, not inline-flex: a wrapping flex container sized by
   shrink-to-fit resolves to roughly one item's width in Chromium rather than
   the sum, which folded the second card underneath at every viewport. The
   cards are centred by justify-content instead, which needs the full width. */
.gmu-subsidiary__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--gmu-s-3);
}

/* Each card stacks — logo over name over address — as the owner's mock has it.
   Equal basis so the two cards match in width whatever their wording runs to. */
.gmu-subsidiary__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	flex: 1 1 17.5rem;
	max-width: 21rem;
	padding: var(--gmu-s-3) var(--gmu-s-3) var(--gmu-s-2);
	border: 1px solid rgba(var(--gmu-gold-rgb), .28);
	border-radius: 8px;
	background: rgba(255, 255, 255, .045);
	text-align: center;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.gmu-subsidiary__link:hover,
.gmu-subsidiary__link:focus-visible {
	border-color: var(--gmu-gold);
	box-shadow: 0 4px 20px rgba(var(--gmu-gold-rgb), .18);
}

/* One badge is a wide cut-out, the other a 4:3 photographic tile. Sizing them
   by a fixed frame height rather than by width is what stops the wide one from
   towering over its neighbour; `contain` lets each keep its own proportions. */
.gmu-subsidiary__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;
	margin-bottom: .15rem;
}
/*
 * Qualified by the frame AND by the element name on purpose.
 *
 * WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto }`,
 * which is (0,1,1) and beat the bare `.gmu-subsidiary__mark` class at (0,1,0).
 * On every page carrying the .woocommerce body class — the shop and all
 * nineteen product pages — the height rule below lost, the mark ignored its
 * 78px frame and drew at its natural 280x207. It looked like the footer had a
 * different, much larger logo on the catalogue than on the rest of the site.
 * `.gmu-subsidiary__frame img.gmu-subsidiary__mark` is (0,2,1) and settles it
 * on specificity rather than on which stylesheet happens to load last.
 */
.gmu-subsidiary__frame img.gmu-subsidiary__mark {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}
/* The tile is a photograph with a hard edge, so it takes the rounding; the
   cut-out has no ground of its own and must not be clipped. */
.gmu-subsidiary__mark--tile   { border-radius: 5px; }
/* The badge is nearly 2:1. Capping its width is what stops it running away
   from its 4:3 neighbour; the cap is set from the card's inner width, so the
   smaller type below buys the badge the room rather than the card growing. */
.gmu-subsidiary__frame img.gmu-subsidiary__mark--cutout { max-height: 78px; max-width: 195px; }

/* A step down from t-base. Both companies' names are long, and taking the
   type back gives the width to the logos instead of to the lettering. */
.gmu-subsidiary__name {
	color: var(--gmu-gold-lite);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.3;
}
/* Shown as an address, so it reads as one: underlined, and it carries the
   hover rather than the card doing it, which is the convention people expect
   from a web address printed in full.

   An address has no spaces in it, so it either fits on one line or it breaks
   in a place that makes it look like a different address ("…concept.co / m").
   The card is sized to hold the longer of the two; this shrinks the type
   rather than wrapping it if a narrow viewport ever takes that away. */
.gmu-subsidiary__site {
	color: var(--gmu-gold);
	font-size: clamp(.62rem, 2.3vw, .8125rem);
	line-height: 1.45;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: rgba(var(--gmu-gold-rgb), .45);
	text-underline-offset: .18em;
}
.gmu-subsidiary__link:hover .gmu-subsidiary__site,
.gmu-subsidiary__link:focus-visible .gmu-subsidiary__site {
	color: var(--gmu-gold-lite);
	text-decoration-color: currentColor;
}

/* The footer paints every link a pale blue; these are gold throughout. */
.site-footer a.gmu-subsidiary__link,
.site-footer a.gmu-subsidiary__link:hover {
	color: var(--gmu-gold-lite);
}

@media screen and (max-width: 560px) {
	.gmu-subsidiary__link { max-width: none; }
	.gmu-subsidiary__frame { height: 64px; }
}

/* ==========================================================================
   Tile type — one step up
   Every card on the site reads 2px larger: catalogue tiles, the category and
   capability cards, the gallery captions and the contact channels.

   Set here as one block keyed off the tile roots rather than by editing each
   component's own font-size, for two reasons. The sizes live on tokens shared
   with body copy and headings, so raising the tokens would move the whole site
   rather than the tiles. And a tile carries five or six different text roles —
   title, part number, spec line, excerpt, button, caption — which would mean
   the same +2px written out a dozen times and drifting apart later.

   2px, not a ratio: the request was a fixed step, and calc() on the token keeps
   each role's relationship to the others exactly as it was.
   ========================================================================== */

.gmu-card__title,
.gmu-cat .gmu-card__title,
ul.products li.product .woocommerce-loop-product__title {
	font-size: calc(var(--gmu-t-base) + 2px) !important;
}
.gmu-cat .gmu-card__title,
.gmu-cap__title {
	font-size: calc(var(--gmu-t-lg) + 2px) !important;
}

.gmu-card__spec,
.gmu-cap__text,
.gmu-cat__go,
ul.products li.product .product-excerpt p {
	font-size: calc(var(--gmu-t-sm) + 2px);
}

.gmu-card__meta,
ul.products li.product .gmu-card__meta,
.gmu-figure figcaption {
	font-size: calc(var(--gmu-t-xs) + 2px);
}

/* The buttons inside a tile move with it, so the foot of the card does not
   suddenly look undersized against the larger title above it. */
.gmu-card__foot .gmu-btn,
ul.products li.product .gmu-btn,
ul.products li.product .gmu-actions__view {
	font-size: calc(var(--gmu-t-sm) + 2px);
}

/* Contact channel tiles. */
.gmu-channels--labelled .gmu-channel__name { font-size: calc(var(--gmu-t-sm) + 2px); }

/* The subsidiary cards are deliberately exempt — they were just taken DOWN a
   step so the two logos have room, which is the opposite request. */

/* ==========================================================================
   Page lede
   The single paragraph between a page hero and the first picture band is the
   page's opening statement — on Fabrication and Architectural it is the line
   that says what the company actually makes. It was set at body size and body
   weight, so it read as the first of many paragraphs rather than as the intro.

   Matched structurally (first paragraph of the first prose block after a hero)
   rather than by page id: ids are not stable between this machine and the
   host, and a class in the content would have to be re-applied every time that
   paragraph is edited in the block editor.
   ========================================================================== */

/* Size and weight only — no colour. Fabrication's opening band is dark and
   Architectural's is light, so anything hardcoded here is wrong on one of
   them; inheriting takes each band's own text colour. */
.gmu-pagehero + .gmu-section > .gmu-wrap.gmu-prose:first-child > p:first-child {
	font-size: var(--gmu-t-lg);
	font-weight: 650;
	line-height: 1.5;
	letter-spacing: -.005em;
	max-width: 62rem;
	margin-inline: auto;
}

/* ==========================================================================
   Picture captions
   Every captioned photograph on the site sits in a dark band, so the caption
   bar is dark too and its text was #cddae4 at regular weight — correct for a
   quiet supporting line, too quiet for one that names the product in the
   photograph above it. Near-white and semi-bold instead.

   Set at the end so it wins over the three earlier figcaption rules (the light
   default, the product-photography override and the dark-band override)
   without having to unpick which of them applies on which page.
   ========================================================================== */

.gmu-figure figcaption,
.gmu-section--pictures .gmu-figure figcaption,
.gmu-gallery__item figcaption {
	color: #eef4f9;
	font-weight: 600;
}
/* The lead line inside a caption keeps its extra weight above the rest. */
.gmu-figure figcaption .gmu-figure__title,
.gmu-section--pictures .gmu-figure__title { color: #fff; font-weight: 700; }

/* ==========================================================================
   Full-bleed picture areas
   Wherever the page shows photographs — the catalogue grid, the picture bands
   on About Us, Fabrication and Architectural, and the gallery — the pictures
   run the full width of the viewport instead of sitting inside the text
   measure, so they are as large as the screen allows.

   Every one of those grids sits in a `.gmu-wrap`, which is `width: min(1200px,
   100% - 2.5rem)`. The section around it is already full width on every page
   (measured: 1440 of 1440), so nothing has to be lifted out of its container
   with viewport units — clearing the wrap's own width is enough. That matters:
   the usual `100vw` full-bleed trick counts the scrollbar and leaves a few
   pixels of horizontal overflow, and this has none.

   Selected with :has() so the markup is untouched — a wrap qualifies by what
   it contains, which means a picture band added later in the block editor is
   full-bleed without anyone remembering to add a class. Checked as supported
   in the target browser; where it is not, the wrap simply keeps its measure
   and the page looks the way it did before.

   Text is deliberately NOT included. Prose still runs to its measure — a line
   of body copy 1900px wide is unreadable, and the request was about pictures.
   ========================================================================== */

/*
 * Descendant, not child. On the home page a picture band is wrapped twice —
 * section > .gmu-wrap > .gmu-wrap > .gmu-figures — because the head and the
 * grid are grouped together. Matching only direct children left those grids at
 * 1344 of 1440 while every other page went full width. Both wraps have to
 * clear: the inner one cannot exceed a parent that is still 1200 wide.
 *
 * .gmu-grid--cats is in the list because those category cards are photographs
 * too; it is the "Our product ranges" row.
 */
.gmu-wrap:has(.gmu-figures),
.gmu-wrap:has(.gmu-gallery),
.gmu-wrap:has(.woocommerce),
.gmu-wrap:has(ul.products),
.gmu-wrap:has(.gmu-grid--cats) {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* The catalogue archive is Kadence's own template, not one of our sections, so
   its container is the thing holding the grid in. */
.post-type-archive-product .content-container.site-container {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
/* The result count and the sort control are text. They keep the side margin
   the rest of the site's text has, or they end up flush against the glass. */
.post-type-archive-product .kadence-shop-top-row,
.post-type-archive-product .woocommerce-notices-wrapper,
.post-type-archive-product .woocommerce-products-header {
	padding-inline: var(--gmu-s-3);
}

/* Edge to edge means the tiles carry the whole width, so the air between them
   comes back a step — at the old 2rem the gaps grew with the grid and ate the
   width the pictures just gained. */
.gmu-wrap:has(.gmu-figures) .gmu-figures,
.gmu-wrap:has(.gmu-gallery) .gmu-gallery,
.gmu-wrap:has(.gmu-grid--cats) .gmu-grid--cats {
	gap: var(--gmu-s-2);
	margin-top: 0;
}

/* A band that holds nothing but pictures does not need a section's worth of
   air above and below it; the pictures are the content, not an aside to it. */
.gmu-section--tight:has(.gmu-figures) {
	padding-block: var(--gmu-s-3);
}

/* Rounded corners and a hairline border read as "card" at 340px and as a
   mistake at 480 — a full-bleed band should look like one run of pictures.
   The border also cost a pixel of picture on each of the four edges, which is
   the one thing edge-to-edge is not supposed to do. */
.gmu-wrap:has(.gmu-figures) .gmu-figure,
.gmu-wrap:has(.gmu-figures) .gmu-figure img,
.gmu-wrap:has(.gmu-gallery) .gmu-gallery__item,
.gmu-wrap:has(.gmu-gallery) .gmu-gallery__item img {
	border-radius: 0;
	border-width: 0;
}

@media screen and (max-width: 782px) {
	/* On a phone the grid is one column, so full bleed would put a photograph
	   hard against both edges with the text still inset — which reads as a
	   broken margin rather than as a design. A small inset stays. */
	.gmu-wrap:has(.gmu-figures),
	.gmu-wrap:has(.gmu-gallery),
	.gmu-wrap:has(.woocommerce),
	.gmu-wrap:has(ul.products),
	.gmu-wrap:has(.gmu-grid--cats),
	.post-type-archive-product .content-container.site-container {
		padding-inline: .75rem;
	}
	/* The home page nests one matching wrap inside another, so both took the
	   inset and the picture bands came out at 24px from the edge while the
	   catalogue above them sat at 12. The inner one gives its padding up. */
	.gmu-wrap:has(.gmu-figures) .gmu-wrap,
	.gmu-wrap:has(.gmu-gallery) .gmu-wrap,
	.gmu-wrap:has(.woocommerce) .gmu-wrap,
	.gmu-wrap:has(ul.products) .gmu-wrap,
	.gmu-wrap:has(.gmu-grid--cats) .gmu-wrap {
		padding-inline: 0;
	}
}

/* ==========================================================================
   Headings over pictures, centred
   Wherever a section shows photographs the heading and its line of copy sit
   centred above them, not ranged left. Left-ranged text over a grid that now
   runs the full width of the screen leaves the title stranded in the corner
   with a metre of empty space beside it.

   The copy keeps a measure even though the band does not. A heading can span
   whatever it likes, but a sentence set 1900px wide is unreadable — the eye
   loses the start of the next line. So the block centres, the paragraph is
   held to about 62 characters, and only the pictures go truly edge to edge.
   ========================================================================== */

.gmu-section:is(:has(.gmu-figures), :has(.gmu-gallery), :has(ul.products), :has(.gmu-grid--cats)) .gmu-head {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: var(--gmu-s-3);
	text-align: center;
}
.gmu-section:is(:has(.gmu-figures), :has(.gmu-gallery), :has(ul.products), :has(.gmu-grid--cats)) .gmu-head p {
	margin-inline: auto;
	max-width: 62ch;
}
/* The short rule under an h2 is drawn with ::before and is ranged left by
   default; centred text needs it centred too or it hangs off the corner. */
.gmu-section:is(:has(.gmu-figures), :has(.gmu-gallery), :has(ul.products), :has(.gmu-grid--cats)) .gmu-head h2::before {
	margin-inline: auto;
}

/* The category cards in "Our product ranges" carry photographs, so their text
   centres with the rest. On the dark picture bands this already happened; on
   any other ground it did not. */
.gmu-grid--cats .gmu-card__body {
	text-align: center;
	align-items: center;
}

/* ==========================================================================
   Buttons in the brand lemon
   Every filled call to action — the two in the hero, the header's own, and
   WooCommerce's — takes the same lemon as the strokes and the "Shop now"
   tiles, so there is one button colour on the site rather than two.

   Navy type on it, not white: white on this lemon is 1.1:1 and simply cannot
   be read, while the navy measures 13:1. The label weight goes up a step to
   carry the darker type at button size.
   ========================================================================== */

.gmu-btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.site-header .header-navigation .menu > li.gmu-nav-cta > a {
	background: var(--gmu-gold);
	color: var(--gmu-on-accent) !important;
	border-color: var(--gmu-gold);
	font-weight: 700;
}
.gmu-btn--primary:hover,
.gmu-btn--primary:focus-visible,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.site-header .header-navigation .menu > li.gmu-nav-cta > a:hover {
	background: var(--gmu-gold-lite);
	border-color: var(--gmu-gold-lite);
	color: var(--gmu-on-accent) !important;
}
/* The focus ring was keyed to the old orange; on a lemon button it has to be
   something the button is not, or it disappears into its own fill. */
.gmu-btn--primary:focus-visible {
	outline: 2px solid var(--gmu-white);
	outline-offset: 2px;
}

/* ==========================================================================
   The last of the orange strokes
   Everything the reader reads as a rule, a marker or an indicator now draws
   from the lemon, so no one stroke on the page is left the old colour.

   Two tones, for the same reason the eyebrows need two: the lemon is 13:1 on
   navy and 1.35:1 on white. A marker set in it on a dark band is crisp; the
   same marker on a white band would be a dash nobody can see. Light grounds
   take --gold-deep, which is the same hue at 5.6:1.
   ========================================================================== */

/* On dark: the hero's slide indicator and the header's own rules. */
.gmu-hero__dot.is-active::before,
.site-header .header-navigation .menu > li > a::after {
	background: var(--gmu-gold);
}
.site-header::after {
	background: linear-gradient(90deg, var(--gmu-gold) 0%, rgba(var(--gmu-gold-rgb), 0) 60%);
}

/* On light: the dash before each item in a tick list. */
.gmu-ticks li::before,
.gmu-applications li::before,
.gmu-expertise li::before {
	background: var(--gmu-gold-deep);
}
.gmu-section--dark .gmu-ticks li::before,
.gmu-section--dark .gmu-applications li::before,
.gmu-section--dark .gmu-expertise li::before,
.gmu-section--pictures .gmu-ticks li::before {
	background: var(--gmu-gold);
}

/* The rule under an intro title paired the old orange with the old gold; both
   halves are now the one colour, so it is a single bar. */
.gmu-intro__title::after {
	background: var(--gmu-gold);
}

/* ==========================================================================
   Hero measure
   The copy was boxed into 800px of a 1440px band, so two thirds of the hero was
   empty air and the paragraph broke at 640 — a short column of text sitting in
   a wide photograph. The owner asked for the writing to run 95% of the width
   with only a little space either side, and for the gaps above and between the
   lines to close up.

   The trade-off is line length: at 1368px a 20px paragraph runs well past the
   60-75 characters that reads comfortably. The copy is written in short
   sentences to soften that, and the block still centres so the eye has a
   consistent left edge to return to.
   ========================================================================== */

.gmu-hero { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }

.gmu-hero__inner {
	width: 95%;
	max-width: none;
	margin-inline: auto;
	padding-block: var(--gmu-s-2);
}

/* The gaps under the copy, closed to "a little bit". The two above it are left
   where they are: the promise's is Kadence's own `.single-content p` rule at
   (0,2,1) and the headline's is `.gmu-hero h1` at (0,1,1), both of which
   outrank a single class here — and measured on the page they read correctly at
   32px and 20px, so there is nothing to win by fighting them for it. */
.gmu-hero__lead { max-width: none; }
.gmu-hero__cta  { margin-top: var(--gmu-s-3); }
.gmu-hero__dots { margin-top: var(--gmu-s-3); }

/*
 * The pool of shade moves from the copy box onto the hero itself.
 *
 * It was drawn for an 800px column: an ellipse inset 18rem beyond a narrow box,
 * so the gradient reached zero in open air well inside the frame. Against a box
 * that is now 95% of the hero those same numbers push the tail outside the
 * section, where `overflow: hidden` cuts it — measured, and it shows as a
 * straight rectangle of shade sitting on the photograph behind the paragraph.
 *
 * Painted on .gmu-hero::after instead, the ellipse is measured against the hero
 * and clipped only at the hero's own edges, which are real boundaries — the
 * header above, the gold rule below. There is nothing for a seam to show
 * against, so there is no seam. The character is unchanged: the corners of the
 * picture keep their full strength (about 26% at the far corners) and the type
 * sits in its own shade (about 60-70% across the copy).
 */
.gmu-hero::after {
	background:
		radial-gradient(
			ellipse 88% 72% at 50% 48%,
			rgba(8, 15, 23, .76) 0%,
			rgba(8, 15, 23, .70) 45%,
			rgba(8, 15, 23, .50) 72%,
			rgba(8, 15, 23, .24) 88%,
			rgba(8, 15, 23, .10) 100%
		),
		linear-gradient(100deg, rgba(8, 15, 23, .12) 0%, rgba(8, 15, 23, .06) 100%);
}
.gmu-hero__inner::before { content: none; }

/* On a phone the lead is the whole hero, and the fuller copy would run it well
   past the fold at the desktop size. One step down holds it. */
@media screen and (max-width: 782px) {
	/* 12px a side, the same inset the picture bands take on a phone. 95% of a
	   390px screen would be 10 — near enough to nothing that the type reads as
	   falling off the edge, which is what it did when this said 100%. */
	.gmu-hero__inner { width: calc(100% - 1.5rem); }
	.gmu-hero__lead { font-size: var(--gmu-t-sm); line-height: 1.5; }
}

/* ==========================================================================
   Catalogue tile proportions
   The caption under each picture carried 20px of padding top and bottom, an 8px
   band around the title, 20px above the button and 20px under the excerpt —
   about 100px of the 283px panel was space rather than text. Tightened, the
   card closes on the picture instead of hanging below it, and the tile lands
   much nearer square.

   Only the spacing moves. Every size in here was raised 2px on request a round
   ago and stays exactly where it was put.
   ========================================================================== */

:is(.post-type-archive-product, .home) ul.products li.product .product-details {
	padding-block: var(--gmu-s-1) var(--gmu-s-2) !important;
}

:is(.post-type-archive-product, .home) ul.products li.product .woocommerce-loop-product__title {
	padding-block: 0;
	margin: 0;
	line-height: 1.25;
}

:is(.post-type-archive-product, .home) ul.products li.product .product-excerpt {
	margin-block: .3rem .35rem;
}
:is(.post-type-archive-product, .home) ul.products li.product .product-excerpt p {
	line-height: 1.4;
}

/* The item number keeps `margin-top: auto`, which is what lines the numbers up
   across a row whatever length the titles run to. Its own padding is what was
   adding height. */
:is(.post-type-archive-product, .home) ul.products li.product .gmu-card__meta {
	padding-top: .2rem;
	margin-bottom: 0;
	line-height: 1.3;
}

:is(.post-type-archive-product, .home) ul.products li.product .gmu-card__shop {
	margin-top: .5rem;
	padding: .45rem 1.2rem;
}

/* ==========================================================================
   The call-us line
   It was a full-bleed band — pale gold ground, a gold hairline top and bottom —
   and the sentence broke across two lines with the second address stranded on
   its own. The owner wants it as one line with no edge around it, and the
   blocks either side brought closer.

   One line is a width problem, not a wrapping problem: at 20px the sentence
   measures about 1450px and the band gave it 1200. It now takes the full
   measure and its size tracks the viewport, so the whole line fits on one row
   from about 1100px up and wraps naturally below that, where it has to.
   ========================================================================== */

.gmu-callout {
	background: none;
	border-block: 0;
	padding-block: var(--gmu-s-2);
}
.gmu-callout__text {
	max-width: none;
	padding-inline: var(--gmu-s-3);
	font-size: clamp(.9375rem, 1.12vw, 1.25rem);
	line-height: 1.45;
}

/* Less space from block to block: the sections either side gave 60px each, on
   top of the band's own. */
.gmu-section:has(+ .gmu-callout) { padding-bottom: var(--gmu-s-4); }
.gmu-callout + .gmu-section { padding-top: var(--gmu-s-4); }

/* The same sentence opens the home page under the intro title, and broke in the
   same place. The intro's own measure is 62rem, which is narrower than the line
   needs, so the block widens and the line steps down with the viewport. */
.gmu-intro { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.gmu-intro__inner {
	width: min(1400px, 100% - 2.5rem);
	max-width: none;
}
.gmu-intro__contact {
	max-width: none;
	margin-top: var(--gmu-s-2);
	font-size: clamp(.8125rem, 1.02vw, 1.125rem);
}

/* The slide indicators sat in the pool's darkest part when the copy box was
   800px wide. With the hero shorter and the shade re-centred they fall on a lit
   part of the photograph, where white at 30% is not there at all — the row read
   as one stray lemon dash. A little more white and a hairline of shade under
   each bar carries them over any frame. */
.gmu-hero__dot::before {
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.gmu-hero__dot:hover::before { background: rgba(255, 255, 255, .85); }

/* ==========================================================================
   Hero height and centred controls
   Closing the gaps took the hero from 821px to 520 — tighter than asked, and
   most of the photograph went with it. Taller padding gives the picture back
   about 100px top and bottom without reopening the space inside the copy,
   which is what was actually complained about.

   The calls to action and the slide indicators centre under the copy. The
   sentences still read from the left, where the eye returns for each new line;
   the two things meant to be pressed sit in the middle of the frame.
   ========================================================================== */

.gmu-hero { padding-block: clamp(3.5rem, 7.5vw, 7rem); }

.gmu-hero__cta,
.gmu-hero__dots { justify-content: center; }

/* ==========================================================================
   Hero slogan, more picture, bigger mark
   ========================================================================== */

/* The standing promise centres with the buttons, and takes 3px so it holds its
   own against the headline underneath it.

   `max-width: none` is what actually centres it. The site sets `p` to 68ch, and
   at 23px that is 893px inside a 1368px hero — so `text-align: center` on its
   own centred the line inside its own short box, leaving it visibly left of the
   buttons below. Measured before and after: 482px off-centre, then 720. */
.gmu-hero__promise {
	max-width: none;
	text-align: center;
	font-size: calc(var(--gmu-t-lg) + 3px);
}

/* Another 30px of photograph, top and bottom. The copy keeps the spacing it was
   given — this is the frame growing, not the gaps reopening. */
.gmu-hero { padding-block: clamp(4.5rem, 8.5vw, 8rem); }

/* The mark takes 30px with it. Height is what makes a stacked lockup legible —
   the wordmark under the wreath scales with it — and the bar grows to match. */
.site-branding img.custom-logo {
	max-height: 130px;
	max-width: 300px;
}
@media (max-width: 1024px) {
	.site-branding img.custom-logo { max-height: 92px; max-width: 230px; }
}
@media (max-width: 782px) {
	.site-branding img.custom-logo { max-height: 62px; max-width: 160px; }
}

/* ==========================================================================
   Cropping the catalogue pictures
   The first attempt at this pulled the picture up with a negative top margin
   and let the tile's `overflow: hidden` clip it. That shortened the tile by the
   right number of pixels but took the whole crop off the top, so every
   photograph sat low in its frame — measured, the subject moved 25px down in a
   350px window, and it read as a picture that had been cut.

   So the crop is done by the frame instead. Each tile carries the finished
   picture ratio as a custom property; the image fills it with `object-fit:
   cover` and `object-position: 50% 50%`, which takes the difference off the top
   and the bottom equally and leaves the subject where it was.

   The ratios are set from the 1440px measure, which is where they were asked
   for: the three-across pictures lose 25px (350 -> 325) and the two-across
   lose 80 (533 -> 453). Being a ratio rather than a pixel count, the crop then
   scales with the tile instead of eating a fixed 25px out of a small one.

   The hover panel reads the same property. It is absolutely positioned on the
   card rather than inside the picture — the markup gives it no choice — so
   anything that changes the picture's height has to change its height too, or
   the dark sheet stands 25px proud of the photograph and over the title.

   Desktop only. Below 1025px Kadence's own two-column rule runs, every tile is
   the same size, and the three-up/two-up distinction does not exist.
   ========================================================================== */

@media screen and (min-width: 1025px) {
	:is(.post-type-archive-product, .home) ul.products.grid-cols > li.product {
		--gmu-tile-ar: 467 / 325;
	}
	:is(.post-type-archive-product, .home) ul.products.grid-cols > li.product:nth-last-child(-n + 4) {
		--gmu-tile-ar: 710 / 453;
	}

	:is(.post-type-archive-product, .home) ul.products.grid-cols > li.product img {
		margin-top: 0;
		height: auto;
		aspect-ratio: var(--gmu-tile-ar);
		object-fit: cover;
		object-position: 50% 50%;
	}
}

/* The overlay only exists on a device that can hover, and outside that query it
   is an ordinary block in the caption — giving that one an aspect ratio would
   open a tall empty box under the item number. */
@media screen and (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	:is(.post-type-archive-product, .home) ul.products.grid-cols > li.product .product-action-wrap {
		aspect-ratio: var(--gmu-tile-ar);
	}
}

/* ==========================================================================
   Hero — three zones
   The owner's mock-up puts three blocks of text across the hero: the slide's
   own words in the middle, and two standing lists either side that do not
   change as the slider advances.

   The side lists are rendered once, outside the panels, and placed in the outer
   columns; the five panels stack in the middle column, which is where the
   slider's crossfade already happens. So the page carries one copy of each side
   list rather than five, and the slider code is untouched.
   ========================================================================== */

.gmu-hero__stage {
	display: grid;
	/* The middle carries a 52px headline, so it needs most of the width; the
	   sides only carry three short lines each. minmax(0, …) so a long line
	   wraps rather than blowing the column past its share. */
	grid-template-columns: minmax(0, .9fr) minmax(0, 3fr) minmax(0, .9fr);
	column-gap: var(--gmu-s-4);
	/* Centred rather than top-aligned: the panel stack is a fixed height (all
	   five slides share one grid cell, so the tallest sets it), which means the
	   lists sit still as the slider advances — and level with the slide's copy
	   the way the mock-up has them, rather than up beside the headline. */
	align-items: center;
}

/* The panels stacked in one cell — the same trick .gmu-hero__inner used before
   the stage existed, moved down a level. Without resetting `grid-area` they
   would still be looking for row 2 of a grid they are no longer in. */
.gmu-hero__panels {
	grid-column: 2;
	display: grid;
	grid-template-columns: 1fr;
}
.gmu-hero__panel { grid-area: 1 / 1; }

.gmu-hero__side--left  { grid-column: 1; }
.gmu-hero__side--right { grid-column: 3; }

/*
 * The slide's own words, centred — "it should read in the middle".
 */
.gmu-hero__panel { text-align: center; }
.gmu-hero .gmu-hero__panels .gmu-hero__title { text-align: center; }
.gmu-hero__lead { margin-inline: auto; }

/* A sub written as `one | two | three` sets as separate lines, which is how the
   mock-up has the first slide. No markers: the owner's note is plain lines. */
.gmu-hero__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .3rem;
	font-size: var(--gmu-t-lg);
	color: #d7e3ec;
}
.gmu-hero__lines li { margin: 0; }

/* The standing lists. Smaller than the slide copy and marked with a lemon
   bullet, so they read as supporting detail rather than competing with the
   headline between them. */
.gmu-hero__side {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
	font-size: var(--gmu-t-sm);
	line-height: 1.4;
	color: #d7e3ec;
}
.gmu-hero__side li {
	margin: 0;
	position: relative;
	padding-left: 1rem;
}
.gmu-hero__side li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gmu-gold);
}
.gmu-hero__side--right { text-align: left; }

/* Same three shadows the rest of the hero type carries — these sit on the open
   part of the photograph, outside the pool, so they need it more than the
   headline does. */
.gmu-hero__side,
.gmu-hero__lines {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .92),
		0 2px 10px rgba(0, 0, 0, .85),
		0 6px 32px rgba(0, 0, 0, .7);
}

/* Short slides sit in the middle of the height the tallest one reserves,
   rather than at the top of it with the whole difference falling as a hole
   above the buttons. */
.gmu-hero__panel {
	display: grid;
	grid-template-columns: 1fr;
	align-content: center;
}

/*
 * Below 1200 there is not room for three columns of text beside a 52px
 * headline — measured at 1100 it broke the headline over three lines in a
 * 535px column. So the slide comes first and the two lists sit under it as a
 * pair, then as one column on a phone.
 */
@media screen and (max-width: 1199px) {
	.gmu-hero__stage {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--gmu-s-3);
	}
	.gmu-hero__panels     { grid-column: 1 / -1; grid-row: 1; }
	.gmu-hero__side--left  { grid-column: 1; grid-row: 2; }
	.gmu-hero__side--right { grid-column: 2; grid-row: 2; }
}
@media screen and (max-width: 600px) {
	.gmu-hero__stage { grid-template-columns: 1fr; }
	.gmu-hero__side--left  { grid-column: 1; grid-row: 2; }
	.gmu-hero__side--right { grid-column: 1; grid-row: 3; }
}

/*
 * Kadence's `.single-content ul` gives every list a 32px bottom margin at
 * (0,2,1), which outranks the `margin: 0` these two carry on a single class.
 * Measured on a phone it showed up as a 32px hole between the two standing
 * lists and under the slide's own lines. Three classes to outrank it.
 */
.gmu-hero .gmu-hero__stage ul.gmu-hero__side,
.gmu-hero .gmu-hero__stage ul.gmu-hero__lines {
	margin: 0;
	padding: 0;
}
.gmu-hero .gmu-hero__stage .gmu-hero__side li,
.gmu-hero .gmu-hero__stage .gmu-hero__lines li {
	margin: 0;
}

/* ==========================================================================
   Catalogue heading
   The archive opens with a heading rather than a photographic banner, the way
   the Gallery page does. It sits on the same navy as the grid under it, so the
   two read as one block; only the top padding is generous, because the bottom
   of it is the top of the catalogue.
   ========================================================================== */

.gmu-catalogue-head {
	padding-block: var(--gmu-s-5) var(--gmu-s-3);
}
.gmu-catalogue-head .gmu-head {
	max-width: 60rem;
	margin-bottom: 0;
}
.gmu-catalogue-head h1 {
	margin: 0 0 .5rem;
	color: #fff;
}
.gmu-catalogue-head .gmu-head p {
	max-width: 62ch;
	margin-inline: auto;
}

@media screen and (max-width: 782px) {
	.gmu-catalogue-head { padding-block: var(--gmu-s-4) var(--gmu-s-2); }
}

/* ==========================================================================
   Round 11 — quieter pages
   ========================================================================== */

/* The lemon dash sat directly above the closing contact heading, where the
   heading is already the loudest thing on a dark band and needs no marker to
   announce it. Keyed off the contact block rather than the words, so it lifts
   from "Contact us today" and "Request a quote" alike and nowhere else. */
.gmu-section:has(.gmu-contact) .gmu-head h2::before { content: none; }

/*
 * Fabrication and Architectural set their titles centred.
 *
 * Headings, the line that introduces a tick list, and the line that sits
 * directly under a heading — the three things that read as titles. Body
 * paragraphs stay ranged left: four centred lines of running text is hard to
 * read, because the eye has no fixed edge to return to at the start of each
 * line, and none of those paragraphs is a title.
 */
.gmu-prose-centered .gmu-prose :is(h1, h2, h3, h4),
.gmu-prose-centered .gmu-prose :is(h1, h2, h3, h4) + p,
.gmu-prose-centered .gmu-prose p:has(+ ul.gmu-ticks),
.gmu-prose-centered .gmu-prose p:has(+ ol.gmu-ticks) {
	text-align: center;
	margin-inline: auto;
}

/*
 * The opening line of an interior page, on one line.
 *
 * It is a run of three separate claims — the supplier line, "Quality is our
 * pride", the promise — set at 20px in a 78-character measure, so it broke
 * across two lines and the band around it grew to match. Sized against the
 * viewport instead, it holds one row from about 1100px up, and the band closes
 * to the height of that row.
 */
.gmu-pagehero + .gmu-section > .gmu-wrap.gmu-prose:first-child {
	/* The prose column is 90ch — 873px — which is narrower than this line needs
	   at any readable size. It is one line, not a paragraph, so it does not want
	   a reading measure; it wants the width of the page. */
	width: min(1400px, 100% - 2.5rem);
}
.gmu-pagehero + .gmu-section > .gmu-wrap.gmu-prose:first-child > p:first-child {
	max-width: none;
	text-align: center;
	font-size: clamp(.875rem, 1.35vw, 1.25rem);
	line-height: 1.45;
}
.gmu-pagehero + .gmu-section { padding-block: var(--gmu-s-3); }

/* The enquiry row under a centred title, centred with it — left alone it was
   the one thing in the block still ranged left. */
.gmu-prose-centered .gmu-prose .gmu-ask .gmu-actions {
	justify-content: center;
}
.gmu-prose-centered .gmu-prose .gmu-ask .gmu-actions__ask { flex: 0 0 auto; }